diff --git a/.github/workflows/pull-request.yml b/.github/workflows/pull-request.yml
index 3e76a0ac7..4a3c26eb7 100644
--- a/.github/workflows/pull-request.yml
+++ b/.github/workflows/pull-request.yml
@@ -1,7 +1,6 @@
 name: pull-request
 on:
   pull_request:
-    branches: [main, staging, release/**]
 jobs:
   test:
     runs-on: ubuntu-latest
diff --git a/openapi-codegen.config.ts b/openapi-codegen.config.ts
index 66736957c..e1297e325 100644
--- a/openapi-codegen.config.ts
+++ b/openapi-codegen.config.ts
@@ -28,33 +28,39 @@ type Environment = {
   apiBaseUrl: string;
   userServiceUrl: string;
   jobServiceUrl: string;
+  entityServiceUrl: string;
 };
 
 const ENVIRONMENTS: { [Property in EnvironmentName]: Environment } = {
   local: {
     apiBaseUrl: "http://localhost:8080",
     userServiceUrl: "http://localhost:4010",
-    jobServiceUrl: "http://localhost:4020"
+    jobServiceUrl: "http://localhost:4020",
+    entityServiceUrl: "http://localhost:4050"
   },
   dev: {
     apiBaseUrl: "https://api-dev.terramatch.org",
     userServiceUrl: "https://api-dev.terramatch.org",
-    jobServiceUrl: "https://api-dev.terramatch.org"
+    jobServiceUrl: "https://api-dev.terramatch.org",
+    entityServiceUrl: "https://api-dev.terramatch.org"
   },
   test: {
     apiBaseUrl: "https://api-test.terramatch.org",
     userServiceUrl: "https://api-test.terramatch.org",
-    jobServiceUrl: "https://api-test.terramatch.org"
+    jobServiceUrl: "https://api-test.terramatch.org",
+    entityServiceUrl: "https://api-test.terramatch.org"
   },
   staging: {
     apiBaseUrl: "https://api-staging.terramatch.org",
     userServiceUrl: "https://api-staging.terramatch.org",
-    jobServiceUrl: "https://api-staging.terramatch.org"
+    jobServiceUrl: "https://api-staging.terramatch.org",
+    entityServiceUrl: "https://api-staging.terramatch.org"
   },
   prod: {
     apiBaseUrl: "https://api.terramatch.org",
     userServiceUrl: "https://api.terramatch.org",
-    jobServiceUrl: "https://api.terramatch.org"
+    jobServiceUrl: "https://api.terramatch.org",
+    entityServiceUrl: "https://api.terramatch.org"
   }
 };
 
@@ -67,6 +73,7 @@ const DEFAULTS = ENVIRONMENTS[declaredEnv];
 const apiBaseUrl = process.env.NEXT_PUBLIC_API_BASE_URL ?? DEFAULTS.apiBaseUrl;
 const userServiceUrl = process.env.NEXT_PUBLIC_USER_SERVICE_URL ?? DEFAULTS.userServiceUrl;
 const jobServiceUrl = process.env.NEXT_PUBLIC_JOB_SERVICE_URL ?? DEFAULTS.jobServiceUrl;
+const entityServiceUrl = process.env.NEXT_PUBLIC_ENTITY_SERVICE_URL ?? DEFAULTS.entityServiceUrl;
 
 // The services defined in the v3 Node BE codebase. Although the URL path for APIs in the v3 space
 // are namespaced by feature set rather than service (a service may contain multiple namespaces), we
@@ -74,7 +81,8 @@ const jobServiceUrl = process.env.NEXT_PUBLIC_JOB_SERVICE_URL ?? DEFAULTS.jobSer
 // the associated BE code is for a given FE API integration.
 const SERVICES = {
   "user-service": userServiceUrl,
-  "job-service": jobServiceUrl
+  "job-service": jobServiceUrl,
+  "entity-service": entityServiceUrl
 };
 
 const config: Record<string, Config> = {
diff --git a/package.json b/package.json
index 602dceae6..22e502fb1 100644
--- a/package.json
+++ b/package.json
@@ -18,7 +18,8 @@
     "generate:api": "openapi-codegen gen api",
     "generate:jobService": "openapi-codegen gen jobService",
     "generate:userService": "openapi-codegen gen userService",
-    "generate:services": "yarn generate:userService && yarn generate:jobService",
+    "generate:entityService": "openapi-codegen gen entityService",
+    "generate:services": "yarn generate:userService && yarn generate:entityService && yarn generate:jobService",
     "tx:push": "eval $(grep '^TRANSIFEX_TOKEN' .env) && eval $(grep '^TRANSIFEX_SECRET' .env) && txjs-cli push --key-generator=hash src/ --token=$TRANSIFEX_TOKEN  --secret=$TRANSIFEX_SECRET",
     "tx:pull": "eval $(grep '^TRANSIFEX_TOKEN' .env) && eval $(grep '^TRANSIFEX_SECRET' .env) && txjs-cli pull --token=$TRANSIFEX_TOKEN  --secret=$TRANSIFEX_SECRET"
   },
diff --git a/src/admin/components/EntityEdit/EntityEdit.tsx b/src/admin/components/EntityEdit/EntityEdit.tsx
index a81045de0..81ef49f10 100644
--- a/src/admin/components/EntityEdit/EntityEdit.tsx
+++ b/src/admin/components/EntityEdit/EntityEdit.tsx
@@ -5,6 +5,7 @@ import { useNavigate, useParams } from "react-router-dom";
 import modules from "@/admin/modules";
 import WizardForm from "@/components/extensive/WizardForm";
 import LoadingContainer from "@/components/generic/Loading/LoadingContainer";
+import EntityProvider from "@/context/entity.provider";
 import FrameworkProvider, { Framework } from "@/context/framework.provider";
 import {
   GetV2FormsENTITYUUIDResponse,
@@ -73,31 +74,33 @@ export const EntityEdit = () => {
     <div className="mx-auto w-full max-w-7xl">
       <LoadingContainer loading={isLoading}>
         <FrameworkProvider frameworkKey={framework}>
-          <WizardForm
-            steps={formSteps!}
-            errors={error}
-            onBackFirstStep={() => navigate("..")}
-            onChange={data =>
-              updateEntity({
-                pathParams: { uuid: entityUUID, entity: entityName },
-                body: { answers: normalizedFormData(data, formSteps!) }
-              })
-            }
-            formStatus={isSuccess ? "saved" : isUpdating ? "saving" : undefined}
-            onSubmit={() => navigate(createPath({ resource, id, type: "show" }))}
-            defaultValues={defaultValues}
-            title={title}
-            tabOptions={{
-              markDone: true,
-              disableFutureTabs: true
-            }}
-            summaryOptions={{
-              title: "Review Details",
-              downloadButtonText: "Download"
-            }}
-            roundedCorners
-            hideSaveAndCloseButton
-          />
+          <EntityProvider entityUuid={entityUUID} entityName={entityName}>
+            <WizardForm
+              steps={formSteps!}
+              errors={error}
+              onBackFirstStep={() => navigate("..")}
+              onChange={data =>
+                updateEntity({
+                  pathParams: { uuid: entityUUID, entity: entityName },
+                  body: { answers: normalizedFormData(data, formSteps!) }
+                })
+              }
+              formStatus={isSuccess ? "saved" : isUpdating ? "saving" : undefined}
+              onSubmit={() => navigate(createPath({ resource, id, type: "show" }))}
+              defaultValues={defaultValues}
+              title={title}
+              tabOptions={{
+                markDone: true,
+                disableFutureTabs: true
+              }}
+              summaryOptions={{
+                title: "Review Details",
+                downloadButtonText: "Download"
+              }}
+              roundedCorners
+              hideSaveAndCloseButton
+            />
+          </EntityProvider>
         </FrameworkProvider>
       </LoadingContainer>
     </div>
diff --git a/src/admin/components/ResourceTabs/MonitoredTab/MonitoredTab.tsx b/src/admin/components/ResourceTabs/MonitoredTab/MonitoredTab.tsx
index b95842a46..c9fef6a55 100644
--- a/src/admin/components/ResourceTabs/MonitoredTab/MonitoredTab.tsx
+++ b/src/admin/components/ResourceTabs/MonitoredTab/MonitoredTab.tsx
@@ -1,19 +1,22 @@
 import { FC } from "react";
 import { TabbedShowLayout, TabProps } from "react-admin";
 
+import { EntityName } from "@/types/common";
+
 import DataCard from "./components/DataCard";
 import HeaderMonitoredTab from "./components/HeaderMonitoredTab";
 
 interface IProps extends Omit<TabProps, "label" | "children"> {
   label?: string;
+  type: EntityName;
 }
 
-const MonitoredTab: FC<IProps> = ({ label, ...rest }) => {
+const MonitoredTab: FC<IProps> = ({ label, type, ...rest }) => {
   return (
     <TabbedShowLayout.Tab label={label ?? "Monitored Data"} {...rest}>
       <div className="flex w-full flex-col gap-4 p-3">
-        <HeaderMonitoredTab />
-        <DataCard />
+        <HeaderMonitoredTab type={type} />
+        <DataCard type={type} />
       </div>
     </TabbedShowLayout.Tab>
   );
diff --git a/src/admin/components/ResourceTabs/MonitoredTab/components/DataCard.tsx b/src/admin/components/ResourceTabs/MonitoredTab/components/DataCard.tsx
index f7842e01f..bb523eaee 100644
--- a/src/admin/components/ResourceTabs/MonitoredTab/components/DataCard.tsx
+++ b/src/admin/components/ResourceTabs/MonitoredTab/components/DataCard.tsx
@@ -1,8 +1,13 @@
 import { ColumnDef, RowData } from "@tanstack/react-table";
+import { useT } from "@transifex/react";
 import classNames from "classnames";
+import { format } from "date-fns";
 import React, { useEffect, useState } from "react";
-import { Else, If, Then, When } from "react-if";
+import { useBasename, useShowContext } from "react-admin";
+import { When } from "react-if";
+import { useNavigate } from "react-router-dom";
 
+import ExportProcessingAlert from "@/admin/components/Alerts/ExportProcessingAlert";
 import CustomChipField from "@/admin/components/Fields/CustomChipField";
 import Button from "@/components/elements/Button/Button";
 import Dropdown from "@/components/elements/Inputs/Dropdown/Dropdown";
@@ -18,9 +23,25 @@ import Toggle, { TogglePropsItem } from "@/components/elements/Toggle/Toggle";
 import Tooltip from "@/components/elements/Tooltip/Tooltip";
 import TooltipMapMonitoring from "@/components/elements/TooltipMap/TooltipMapMonitoring";
 import Icon, { IconNames } from "@/components/extensive/Icon/Icon";
-import { DUMMY_DATA_TARGET_LAND_USE_TYPES_REPRESENTED } from "@/constants/dashboardConsts";
-import GraphicIconDashboard from "@/pages/dashboard/components/GraphicIconDashboard";
-import { OptionValue } from "@/types/common";
+import {
+  DEFAULT_POLYGONS_DATA,
+  DEFAULT_POLYGONS_DATA_ECOREGIONS,
+  DEFAULT_POLYGONS_DATA_STRATEGIES
+} from "@/constants/dashboardConsts";
+import { useMonitoredDataContext } from "@/context/monitoredData.provider";
+import { useNotificationContext } from "@/context/notification.provider";
+import { fetchGetV2IndicatorsEntityUuidSlugExport } from "@/generated/apiComponents";
+import { EntityName, OptionValue } from "@/types/common";
+import {
+  parsePolygonsIndicatorDataForEcoRegion,
+  parsePolygonsIndicatorDataForLandUse,
+  parsePolygonsIndicatorDataForStrategies,
+  parseTreeCoverData
+} from "@/utils/dashboardUtils";
+import { downloadFileBlob } from "@/utils/network";
+
+import { useMonitoredData } from "../hooks/useMonitoredData";
+import MonitoredCharts from "./MonitoredCharts";
 
 interface TableData {
   polygonName: string;
@@ -50,13 +71,360 @@ export interface DataStructure extends React.HTMLAttributes<HTMLDivElement> {
   tableData: TableData[];
 }
 
-const DataCard = ({ ...rest }: React.HTMLAttributes<HTMLDivElement>) => {
+const COMMON_COLUMNS: ColumnDef<RowData>[] = [
+  {
+    accessorKey: "poly_name",
+    header: "Polygon Name",
+    meta: { style: { width: "13.30%" } },
+    cell: (props: any) => {
+      const value = props.getValue();
+      return value == "" || value == "-" ? "-" : value;
+    }
+  },
+  {
+    accessorKey: "size",
+    header: "Size (ha)",
+    meta: { style: { width: "9.01%" } }
+  },
+  { accessorKey: "site_name", header: "Site Name", meta: { style: { width: "9.90%" } } },
+  {
+    accessorKey: "status",
+    header: "Status",
+    cell: (props: any) => (
+      <CustomChipField
+        label={props.getValue()}
+        classNameChipField="!text-[12px] font-medium lg:!text-xs wide:!text-sm"
+      />
+    ),
+    meta: { style: { width: "7.65%" } }
+  },
+  {
+    accessorKey: "plantstart",
+    header: "Plant Start Date",
+    cell: (props: any) => {
+      const value = props.getValue();
+      return value == "-" ? "-" : format(new Date(value), "dd/MM/yyyy");
+    },
+    meta: { style: { width: "13.65%" } }
+  },
+  {
+    accessorKey: "base_line",
+    header: "Baseline",
+    cell: (props: any) => {
+      const value = props.getValue();
+      return format(new Date(value), "dd/MM/yyyy");
+    },
+    meta: { style: { width: "8.87%" } }
+  }
+];
+
+type CustomColumnDefInternal<TData> = ColumnDef<TData> & { type?: string };
+
+const TABLE_COLUMNS_HECTARES_STRATEGY: ColumnDef<RowData>[] = [
+  ...COMMON_COLUMNS,
+  {
+    accessorKey: "data.tree_planting",
+    header: "Tree Planting",
+    cell: (props: any) => {
+      const value = props.getValue();
+      return value ?? "-";
+    },
+    meta: { style: { width: "11.95%" } }
+  },
+  {
+    accessorKey: "data.assisted_natural_regeneration",
+    header: () => (
+      <>
+        Asst. Nat.
+        <br />
+        Regeneration
+      </>
+    ),
+    cell: (props: any) => {
+      const value = props.getValue();
+      return value ?? "-";
+    },
+    meta: { style: { width: "12.09%" } }
+  },
+  {
+    accessorKey: "data.direct_seeding",
+    header: () => (
+      <>
+        Direct
+        <br />
+        Seeding
+      </>
+    ),
+    cell: (props: any) => {
+      const value = props.getValue();
+      return value ?? "-";
+    },
+    meta: { style: { width: "8.57%" } }
+  },
+  {
+    accessorKey: "more",
+    header: "",
+    enableSorting: false,
+    cell: props => (
+      <div className="flex w-full cursor-pointer items-center justify-end rounded p-1 hover:text-primary">
+        <Icon name={IconNames.EDIT_PA} className="h-4 w-4 text-grey-720 hover:text-primary" />
+      </div>
+    ),
+    meta: { style: { width: "5%" } }
+  }
+];
+
+const TABLE_COLUMNS_HECTARES_ECO_REGION: ColumnDef<RowData>[] = [
+  ...COMMON_COLUMNS,
+  {
+    accessorKey: "data.australasian",
+    header: "Australasian",
+    cell: (props: any) => {
+      const value = props.getValue();
+      return value ?? "-";
+    },
+    meta: { style: { width: "11.45%" } }
+  },
+  {
+    accessorKey: "data.afrotropical",
+    header: "Afrotropical",
+    cell: (props: any) => {
+      const value = props.getValue();
+      return value ?? "-";
+    },
+    meta: { style: { width: "11.05%" } }
+  },
+  {
+    accessorKey: "data.paleartic",
+    header: "Paleartic11",
+    cell: (props: any) => {
+      const value = props.getValue();
+      return value ?? "-";
+    },
+    meta: { style: { width: "10.33%" } }
+  },
+  {
+    accessorKey: "more",
+    header: "",
+    enableSorting: false,
+    cell: props => (
+      <div className="flex w-full cursor-pointer items-center justify-end rounded p-1 hover:text-primary">
+        <Icon name={IconNames.EDIT_PA} className="h-4 w-4 text-grey-720 hover:text-primary" />
+      </div>
+    ),
+    meta: { style: { width: "5%" } }
+  }
+];
+
+const TABLE_COLUMNS_HECTARES_LAND_USE: ColumnDef<RowData>[] = [
+  ...COMMON_COLUMNS,
+  {
+    accessorKey: "data.agroforest",
+    header: "Agroforest",
+    cell: (props: any) => {
+      const value = props.getValue();
+      return value ?? "-";
+    },
+    meta: { style: { width: "11.95%" } }
+  },
+  {
+    accessorKey: "data.natural_forest",
+    header: "Natural Forest",
+    cell: (props: any) => {
+      const value = props.getValue();
+      return value ?? "-";
+    },
+    meta: { style: { width: "12.09%" } }
+  },
+  {
+    accessorKey: "data.mangrove",
+    header: "Mangrove",
+    cell: (props: any) => {
+      const value = props.getValue();
+      return value ?? "-";
+    },
+    meta: { style: { width: "8.57%" } }
+  },
+  {
+    accessorKey: "more",
+    header: "",
+    enableSorting: false,
+    cell: props => (
+      <div className="flex w-full cursor-pointer items-center justify-end rounded p-1 hover:text-primary">
+        <Icon name={IconNames.EDIT_PA} className="h-4 w-4 text-grey-720 hover:text-primary" />
+      </div>
+    ),
+    meta: { style: { width: "5%" } }
+  }
+];
+
+const DROPDOWN_OPTIONS = [
+  {
+    title: "Tree Cover Loss",
+    value: "1",
+    slug: "treeCoverLoss"
+  },
+  {
+    title: "Tree Cover Loss from Fire",
+    value: "2",
+    slug: "treeCoverLossFires"
+  },
+  {
+    title: "Hectares Under Restoration By WWF EcoRegion",
+    value: "3",
+    slug: "restorationByEcoRegion"
+  },
+  {
+    title: "Hectares Under Restoration By Strategy",
+    value: "4",
+    slug: "restorationByStrategy"
+  },
+  {
+    title: "Hectares Under Restoration By Target Land Use System",
+    value: "5",
+    slug: "restorationByLandUse"
+  }
+];
+
+const toggleItems: TogglePropsItem[] = [
+  {
+    key: "dashboard",
+    render: (
+      <Text variant="text-14" className="py-0.5">
+        Table
+      </Text>
+    )
+  },
+  {
+    key: "table",
+    render: (
+      <Text variant="text-14" className="py-0.5">
+        Graph
+      </Text>
+    )
+  },
+  {
+    key: "table",
+    render: (
+      <Text variant="text-14" className="py-0.5">
+        Map
+      </Text>
+    )
+  }
+];
+
+const noDataGraph = (
+  <div className="flex w-full flex-col items-center justify-center gap-2 rounded-xl border border-grey-1000">
+    <Text variant={"text-32-semibold"} className="text-blueCustom">
+      No Data to Display
+    </Text>
+    <div className="flex items-center gap-1">
+      <Text variant={"text-14"} className="text-darkCustom">
+        RUN ANALYSUS ON PROJECT POLYGONS TO SEE DATA
+      </Text>
+      <Tooltip content={"Tooltip"}>
+        <Icon name={IconNames.IC_INFO} className="h-4 w-4" />
+      </Tooltip>
+    </div>
+  </div>
+);
+
+const indicatorDescription1 =
+  "From the <b>23 August 2024</b> analysis, 12.2M out of 20M hectares are being restored. Of those, <b>Direct Seeding was the most prevalent strategy used with more 765,432ha</b>, followed by Tree Planting with 453,89ha and Assisted Natural Regeneration with 93,345ha.";
+const indicatorDescription2 =
+  "The numbers and reports below display data related to Indicator 2: Hectares Under Restoration described in TerraFund’s MRV framework. Please refer to the linked MRV framework for details on how these numbers are sourced and verified.";
+
+const noDataMap = (
+  <div className="absolute top-0 flex h-full w-full">
+    <div className="relative flex w-[23vw] flex-col gap-3 p-6">
+      <div className="absolute left-0 top-0 h-full w-full rounded-l-xl bg-white bg-opacity-20 backdrop-blur" />
+      <Text
+        variant={"text-14-semibold"}
+        className="z-10 w-fit border-b-2 border-white border-opacity-20 pb-1.5 text-white"
+      >
+        Indicator Description
+      </Text>
+      <div className="z-[5] flex min-h-0 flex-col gap-3 overflow-auto pr-1">
+        <Text variant={"text-14-light"} className="text-white" containHtml>
+          {indicatorDescription1}
+        </Text>
+        <Text variant={"text-14-light"} className="text-white" containHtml>
+          {indicatorDescription2}
+        </Text>
+      </div>
+    </div>
+    <div className="w-full p-6">
+      <div className="relative flex h-full w-full flex-col items-center justify-center gap-2 rounded-xl border border-white">
+        <div className="absolute left-0 top-0 h-full w-full rounded-xl bg-white bg-opacity-20 backdrop-blur" />
+        <Text variant={"text-32-semibold"} className="z-10 text-white">
+          No Data to Display
+        </Text>
+        <div className="flex items-center gap-1">
+          <Text variant={"text-14"} className="z-10 text-white">
+            RUN ANALYSUS ON PROJECT POLYGONS TO SEE DATA
+          </Text>
+          <Tooltip content={"Tooltip"}>
+            <Icon name={IconNames.IC_INFO_WHITE_BLACK} className="h-4 w-4" />
+          </Tooltip>
+        </div>
+      </div>
+    </div>
+  </div>
+);
+
+const DataCard = ({
+  type,
+  ...rest
+}: React.HTMLAttributes<HTMLDivElement> & {
+  type?: EntityName;
+}) => {
   const [tabActive, setTabActive] = useState(0);
   const [selected, setSelected] = useState<OptionValue[]>(["1"]);
+  const [selectedPolygonUuid, setSelectedPolygonUuid] = useState<any>("0");
+  const basename = useBasename();
   const mapFunctions = useMap();
+  const { record } = useShowContext();
+  const { polygonsIndicator, treeCoverLossData, treeCoverLossFiresData, isLoadingIndicator, polygonOptions } =
+    useMonitoredData(type!, record.uuid);
+  const filteredPolygonsIndicator =
+    selectedPolygonUuid !== "0"
+      ? polygonsIndicator?.filter((polygon: any) => polygon.poly_id === selectedPolygonUuid)
+      : polygonsIndicator;
+
+  const filteredTreeCoverLossData =
+    selectedPolygonUuid !== "0"
+      ? treeCoverLossData?.filter((data: any) => data.poly_id === selectedPolygonUuid)
+      : treeCoverLossData;
+
+  const filteredTreeCoverLossFiresData =
+    selectedPolygonUuid !== "0"
+      ? treeCoverLossFiresData?.filter((data: any) => data.poly_id === selectedPolygonUuid)
+      : treeCoverLossFiresData;
+
+  const parsedData = parseTreeCoverData(filteredTreeCoverLossData, filteredTreeCoverLossFiresData);
+  const { setSearchTerm, setIndicatorSlug, indicatorSlug, setSelectPolygonFromMap, selectPolygonFromMap } =
+    useMonitoredDataContext();
+  const navigate = useNavigate();
+  const { openNotification } = useNotificationContext();
+  const [exporting, setExporting] = useState<boolean>(false);
+  const t = useT();
+  const totalHectaresRestoredGoal = record?.total_hectares_restored_goal
+    ? Number(record?.total_hectares_restored_goal)
+    : +record?.hectares_to_restore_goal;
+  const landUseData = filteredPolygonsIndicator
+    ? parsePolygonsIndicatorDataForLandUse(filteredPolygonsIndicator, totalHectaresRestoredGoal)
+    : DEFAULT_POLYGONS_DATA;
+  const strategiesData = filteredPolygonsIndicator
+    ? parsePolygonsIndicatorDataForStrategies(filteredPolygonsIndicator)
+    : DEFAULT_POLYGONS_DATA_STRATEGIES;
+
+  const ecoRegionData: any = filteredPolygonsIndicator
+    ? parsePolygonsIndicatorDataForEcoRegion(filteredPolygonsIndicator)
+    : DEFAULT_POLYGONS_DATA_ECOREGIONS;
 
   const [topHeaderFirstTable, setTopHeaderFirstTable] = useState("102px");
   const [topHeaderSecondTable, setTopHeaderSecondTable] = useState("70px");
+  const totalElemIndicator = filteredPolygonsIndicator?.length ? filteredPolygonsIndicator?.length - 1 : null;
 
   useEffect(() => {
     if (typeof window !== "undefined") {
@@ -66,36 +434,40 @@ const DataCard = ({ ...rest }: React.HTMLAttributes<HTMLDivElement>) => {
     }
   }, []);
 
-  const TABLE_COLUMNS: ColumnDef<RowData>[] = [
+  const TABLE_COLUMNS_TREE_COVER_LOSS: CustomColumnDefInternal<RowData>[] = [
     {
       id: "mainInfo",
       meta: { style: { top: `${topHeaderSecondTable}`, borderBottomWidth: 0, borderRightWidth: 0 } },
       header: "",
       columns: [
         {
-          accessorKey: "polygonName",
+          accessorKey: "poly_name",
           header: "Polygon Name",
-          meta: { style: { top: `${topHeaderFirstTable}`, borderRadius: "0" } }
+          meta: { style: { top: `${topHeaderFirstTable}`, borderRadius: "0", width: "11%" } }
         },
         {
           accessorKey: "size",
           header: "Size (ha)",
-          meta: { style: { top: `${topHeaderFirstTable}` } }
+          meta: { style: { top: `${topHeaderFirstTable}`, width: "7%" } }
+        },
+        {
+          accessorKey: "site_name",
+          header: "Site Name",
+          meta: { style: { top: `${topHeaderFirstTable}`, width: "8%" } }
         },
-        { accessorKey: "siteName", header: "Site Name", meta: { style: { top: `${topHeaderFirstTable}` } } },
         {
           accessorKey: "status",
           header: "Status",
-          meta: { style: { top: `${topHeaderFirstTable}` } },
+          meta: { style: { top: `${topHeaderFirstTable}`, width: "7%" } },
           cell: (props: any) => (
             <CustomChipField
               label={props.getValue()}
-              classNameChipField="!text-[10px] font-medium lg:!text-xs wide:!text-sm"
+              classNameChipField="!text-[12px] font-medium lg:!text-xs wide:!text-sm"
             />
           )
         },
         {
-          accessorKey: "plantDate",
+          accessorKey: "plantstart",
           header: () => (
             <>
               Plant
@@ -103,79 +475,81 @@ const DataCard = ({ ...rest }: React.HTMLAttributes<HTMLDivElement>) => {
               Start Date
             </>
           ),
-          meta: { style: { top: `${topHeaderFirstTable}` } }
+          meta: { style: { top: `${topHeaderFirstTable}`, width: "8%" } }
         }
       ]
     },
     {
       id: "analysis2024",
-      header: "Analysis: April 25, 2024",
+      header: totalElemIndicator
+        ? `Analysis: ${format(new Date(polygonsIndicator?.[totalElemIndicator]?.created_at!), "MMMM d, yyyy")}`
+        : "Analysis:",
       meta: { style: { top: `${topHeaderSecondTable}`, borderBottomWidth: 0 } },
       columns: [
         {
-          accessorKey: "2024-2015",
+          accessorKey: "data.2015",
           header: "2015",
-          meta: { style: { top: `${topHeaderFirstTable}` } }
+          meta: { style: { top: `${topHeaderFirstTable}`, width: "5.4%" } }
         },
         {
-          accessorKey: "2024-2016",
+          accessorKey: "data.2016",
           header: "2016",
-          meta: { style: { top: `${topHeaderFirstTable}` } }
+          meta: { style: { top: `${topHeaderFirstTable}`, width: "5.4%" } }
         },
         {
-          accessorKey: "2024-2017",
+          accessorKey: "data.2017",
           header: "2017",
-          meta: { style: { top: `${topHeaderFirstTable}` } }
+          meta: { style: { top: `${topHeaderFirstTable}`, width: "5.4%" } }
         },
         {
-          accessorKey: "2024-2018",
+          accessorKey: "data.2018",
           header: "2018",
-          meta: { style: { top: `${topHeaderFirstTable}` } }
+          meta: { style: { top: `${topHeaderFirstTable}`, width: "5.4%" } }
         },
         {
-          accessorKey: "2024-2019",
+          accessorKey: "data.2019",
           header: "2019",
-          meta: { style: { top: `${topHeaderFirstTable}` } }
+          meta: { style: { top: `${topHeaderFirstTable}`, width: "5.4%" } }
         },
         {
-          accessorKey: "2024-2020",
+          accessorKey: "data.2020",
           header: "2020",
-          meta: { style: { top: `${topHeaderFirstTable}` } }
+          meta: { style: { top: `${topHeaderFirstTable}`, width: "5.4%" } }
         },
         {
-          accessorKey: "2024-2021",
+          accessorKey: "data.2021",
           header: "2021",
-          meta: { style: { top: `${topHeaderFirstTable}` } }
+          meta: { style: { top: `${topHeaderFirstTable}`, width: "5.4%" } }
         },
         {
-          accessorKey: "2024-2022",
+          accessorKey: "data.2022",
           header: "2022",
-          meta: { style: { top: `${topHeaderFirstTable}` } }
+          meta: { style: { top: `${topHeaderFirstTable}`, width: "5.4%" } }
         },
         {
-          accessorKey: "2024-2023",
+          accessorKey: "data.2023",
           header: "2023",
-          meta: { style: { top: `${topHeaderFirstTable}` } }
+          meta: { style: { top: `${topHeaderFirstTable}`, width: "5.4%" } }
         },
         {
-          accessorKey: "2024-2024",
+          accessorKey: "data.2024",
           header: "2024",
-          meta: { style: { top: `${topHeaderFirstTable}` } }
+          meta: { style: { top: `${topHeaderFirstTable}`, width: "5.4%" } }
         }
       ]
     },
     {
       id: "moreInfo",
       header: " ",
-      meta: { style: { top: `${topHeaderSecondTable}`, borderBottomWidth: 0 } },
+      meta: { style: { top: `${topHeaderSecondTable}`, borderBottomWidth: 0, width: "5%" } },
       columns: [
         {
           accessorKey: "more",
           header: "",
           enableSorting: false,
           cell: props => (
-            <div className="w-min rounded p-1 hover:bg-primary-200">
-              <Icon name={IconNames.ELIPSES} className="roudn h-4 w-4 rounded-sm text-grey-720 hover:bg-primary-200" />
+            <div className="flex w-full cursor-pointer items-center justify-end rounded p-1 hover:text-primary">
+              <Icon name={IconNames.EDIT_PA} className="h-4 w-4 text-grey-720 hover:text-primary" />
             </div>
           ),
           meta: { style: { top: `${topHeaderFirstTable}`, borderRadius: "0" } }
@@ -184,698 +558,153 @@ const DataCard = ({ ...rest }: React.HTMLAttributes<HTMLDivElement>) => {
     }
   ];
 
-  const TABLE_COLUMNS_HECTARES: ColumnDef<RowData>[] = [
-    { accessorKey: "polygonName", header: "Polygon Name" },
-    {
-      accessorKey: "size",
-      header: "Size (ha)"
-    },
-    { accessorKey: "siteName", header: "Site Name" },
-    {
-      accessorKey: "status",
-      header: "Status",
-      cell: (props: any) => (
-        <CustomChipField
-          label={props.getValue()}
-          classNameChipField="!text-[10px] font-medium lg:!text-xs wide:!text-sm"
-        />
-      )
-    },
-    {
-      accessorKey: "plantDate",
-      header: "Plant Start Date"
-    },
-    {
-      accessorKey: "baseline",
-      header: "Baseline"
-    },
-    {
-      accessorKey: "treePlanting",
-      header: "Tree Planting"
-    },
-    {
-      accessorKey: "regeneration",
-      header: () => (
-        <>
-          Asst. Nat.
-          <br />
-          Regeneration
-        </>
-      )
-    },
-    {
-      accessorKey: "seeding",
-      header: () => (
-        <>
-          Direct
-          <br />
-          Seeding
-        </>
-      )
-    },
-    {
-      accessorKey: "more",
-      header: "",
-      enableSorting: false,
-      cell: props => (
-        <div className="w-min rounded p-1 hover:bg-primary-200">
-          <Icon name={IconNames.ELIPSES} className="roudn h-4 w-4 rounded-sm text-grey-720 hover:bg-primary-200" />
-        </div>
-      )
-    }
-  ];
+  const TABLE_COLUMNS_MAPPING: Record<string, any> = {
+    treeCoverLoss: TABLE_COLUMNS_TREE_COVER_LOSS,
+    treeCoverLossFires: TABLE_COLUMNS_TREE_COVER_LOSS,
+    restorationByEcoRegion: TABLE_COLUMNS_HECTARES_ECO_REGION,
+    restorationByStrategy: TABLE_COLUMNS_HECTARES_STRATEGY,
+    restorationByLandUse: TABLE_COLUMNS_HECTARES_LAND_USE
+  };
 
-  const TABLE_DATA = [
-    {
-      polygonName: "ABA",
-      siteName: "Palm Oil",
-      status: "Draft",
-      size: "7,473",
-      plantDate: "9/26/24",
-      baseline: "25/4/24",
-      treePlanting: "0.423",
-      regeneration: "0.120",
-      seeding: "0.120",
-      "2024-2015": "0.423",
-      "2024-2016": "0.120",
-      "2024-2017": "0.655",
-      "2024-2018": "0.208",
-      "2024-2019": "0.654",
-      "2024-2020": "0.466",
-      "2024-2021": "0.151",
-      "2024-2022": "0.385",
-      "2024-2023": "0.457",
-      "2024-2024": "0.966"
-    },
-    {
-      polygonName: "Adison Thaochu A",
-      siteName: "Palm Oil",
-      status: "Submitted",
-      size: "7,473",
-      plantDate: "9/26/24",
-      baseline: "25/4/24",
-      treePlanting: "0.423",
-      regeneration: "0.120",
-      seeding: "0.120",
-      "2024-2015": "0.423",
-      "2024-2016": "0.120",
-      "2024-2017": "0.655",
-      "2024-2018": "0.208",
-      "2024-2019": "0.654",
-      "2024-2020": "0.466",
-      "2024-2021": "0.151",
-      "2024-2022": "0.385",
-      "2024-2023": "0.457",
-      "2024-2024": "0.966"
-    },
-    {
-      polygonName: "AEK Nabara Selatan",
-      siteName: "Palm Oil",
-      status: "Needs Info",
-      size: "7,473",
-      plantDate: "9/26/24",
-      baseline: "25/4/24",
-      treePlanting: "0.423",
-      regeneration: "0.120",
-      seeding: "0.120",
-      "2024-2015": "0.423",
-      "2024-2016": "0.120",
-      "2024-2017": "0.655",
-      "2024-2018": "0.208",
-      "2024-2019": "0.654",
-      "2024-2020": "0.466",
-      "2024-2021": "0.151",
-      "2024-2022": "0.385",
-      "2024-2023": "0.457",
-      "2024-2024": "0.966"
-    },
-    {
-      polygonName: "AEK Raso",
-      siteName: "Palm Oil",
-      status: "Approved",
-      size: "7,473",
-      plantDate: "9/26/24",
-      baseline: "25/4/24",
-      treePlanting: "0.423",
-      regeneration: "0.120",
-      seeding: "0.120",
-      "2024-2015": "0.423",
-      "2024-2016": "0.120",
-      "2024-2017": "0.655",
-      "2024-2018": "0.208",
-      "2024-2019": "0.654",
-      "2024-2020": "0.466",
-      "2024-2021": "0.151",
-      "2024-2022": "0.385",
-      "2024-2023": "0.457",
-      "2024-2024": "0.966"
-    },
-    {
-      polygonName: "AEK Torup",
-      siteName: "Palm Oil",
-      status: "Approved",
-      size: "7,473",
-      plantDate: "9/26/24",
-      baseline: "25/4/24",
-      treePlanting: "0.423",
-      regeneration: "0.120",
-      seeding: "0.120",
-      "2024-2015": "0.423",
-      "2024-2016": "0.120",
-      "2024-2017": "0.655",
-      "2024-2018": "0.208",
-      "2024-2019": "0.654",
-      "2024-2020": "0.466",
-      "2024-2021": "0.151",
-      "2024-2022": "0.385",
-      "2024-2023": "0.457",
-      "2024-2024": "0.966"
-    },
-    {
-      polygonName: "Africas",
-      siteName: "Palm Oil",
-      status: "Approved",
-      size: "7,473",
-      plantDate: "9/26/24",
-      baseline: "25/4/24",
-      treePlanting: "0.423",
-      regeneration: "0.120",
-      seeding: "0.120",
-      "2024-2015": "0.423",
-      "2024-2016": "0.120",
-      "2024-2017": "0.655",
-      "2024-2018": "0.208",
-      "2024-2019": "0.654",
-      "2024-2020": "0.466",
-      "2024-2021": "0.151",
-      "2024-2022": "0.385",
-      "2024-2023": "0.457",
-      "2024-2024": "0.966"
-    },
-    {
-      polygonName: "Agoue Iboe",
-      siteName: "Palm Oil",
-      status: "Approved",
-      size: "7,473",
-      plantDate: "9/26/24",
-      baseline: "25/4/24",
-      treePlanting: "0.423",
-      regeneration: "0.120",
-      seeding: "0.120",
-      "2024-2015": "0.423",
-      "2024-2016": "0.120",
-      "2024-2017": "0.655",
-      "2024-2018": "0.208",
-      "2024-2019": "0.654",
-      "2024-2020": "0.466",
-      "2024-2021": "0.151",
-      "2024-2022": "0.385",
-      "2024-2023": "0.457",
-      "2024-2024": "0.966"
-    },
-    {
-      polygonName: "Agrajaya Baktitama",
-      siteName: "Palm Oil",
-      status: "Approved",
-      size: "7,473",
-      plantDate: "9/26/24",
-      baseline: "25/4/24",
-      treePlanting: "0.423",
-      regeneration: "0.120",
-      seeding: "0.120",
-      "2024-2015": "0.423",
-      "2024-2016": "0.120",
-      "2024-2017": "0.655",
-      "2024-2018": "0.208",
-      "2024-2019": "0.654",
-      "2024-2020": "0.466",
-      "2024-2021": "0.151",
-      "2024-2022": "0.385",
-      "2024-2023": "0.457",
-      "2024-2024": "0.966"
-    },
-    {
-      polygonName: "Agralsa",
-      siteName: "Palm Oil",
-      status: "Approved",
-      size: "7,473",
-      plantDate: "9/26/24",
-      baseline: "25/4/24",
-      treePlanting: "0.423",
-      regeneration: "0.120",
-      seeding: "0.120",
-      "2024-2015": "0.423",
-      "2024-2016": "0.120",
-      "2024-2017": "0.655",
-      "2024-2018": "0.208",
-      "2024-2019": "0.654",
-      "2024-2020": "0.466",
-      "2024-2021": "0.151",
-      "2024-2022": "0.385",
-      "2024-2023": "0.457",
-      "2024-2024": "0.966"
-    },
-    {
-      polygonName: "Africas",
-      siteName: "Palm Oil",
-      status: "Approved",
-      size: "7,473",
-      plantDate: "9/26/24",
-      baseline: "25/4/24",
-      treePlanting: "0.423",
-      regeneration: "0.120",
-      seeding: "0.120",
-      "2024-2015": "0.423",
-      "2024-2016": "0.120",
-      "2024-2017": "0.655",
-      "2024-2018": "0.208",
-      "2024-2019": "0.654",
-      "2024-2020": "0.466",
-      "2024-2021": "0.151",
-      "2024-2022": "0.385",
-      "2024-2023": "0.457",
-      "2024-2024": "0.966"
-    },
-    {
-      polygonName: "Agoue Iboe",
-      siteName: "Palm Oil",
-      status: "Approved",
-      size: "7,473",
-      plantDate: "9/26/24",
-      baseline: "25/4/24",
-      treePlanting: "0.423",
-      regeneration: "0.120",
-      seeding: "0.120",
-      "2024-2015": "0.423",
-      "2024-2016": "0.120",
-      "2024-2017": "0.655",
-      "2024-2018": "0.208",
-      "2024-2019": "0.654",
-      "2024-2020": "0.466",
-      "2024-2021": "0.151",
-      "2024-2022": "0.385",
-      "2024-2023": "0.457",
-      "2024-2024": "0.966"
-    },
-    {
-      polygonName: "Agrajaya Baktitama",
-      siteName: "Palm Oil",
-      status: "Approved",
-      size: "7,473",
-      plantDate: "9/26/24",
-      baseline: "25/4/24",
-      treePlanting: "0.423",
-      regeneration: "0.120",
-      seeding: "0.120",
-      "2024-2015": "0.423",
-      "2024-2016": "0.120",
-      "2024-2017": "0.655",
-      "2024-2018": "0.208",
-      "2024-2019": "0.654",
-      "2024-2020": "0.466",
-      "2024-2021": "0.151",
-      "2024-2022": "0.385",
-      "2024-2023": "0.457",
-      "2024-2024": "0.966"
-    },
-    {
-      polygonName: "Agralsa",
-      siteName: "Palm Oil",
-      status: "Approved",
-      size: "7,473",
-      plantDate: "9/26/24",
-      baseline: "25/4/24",
-      treePlanting: "0.423",
-      regeneration: "0.120",
-      seeding: "0.120",
-      "2024-2015": "0.423",
-      "2024-2016": "0.120",
-      "2024-2017": "0.655",
-      "2024-2018": "0.208",
-      "2024-2019": "0.654",
-      "2024-2020": "0.466",
-      "2024-2021": "0.151",
-      "2024-2022": "0.385",
-      "2024-2023": "0.457",
-      "2024-2024": "0.966"
-    },
-    {
-      polygonName: "ABA",
-      siteName: "Palm Oil",
-      status: "Draft",
-      size: "7,473",
-      plantDate: "9/26/24",
-      baseline: "25/4/24",
-      treePlanting: "0.423",
-      regeneration: "0.120",
-      seeding: "0.120",
-      "2024-2015": "0.423",
-      "2024-2016": "0.120",
-      "2024-2017": "0.655",
-      "2024-2018": "0.208",
-      "2024-2019": "0.654",
-      "2024-2020": "0.466",
-      "2024-2021": "0.151",
-      "2024-2022": "0.385",
-      "2024-2023": "0.457",
-      "2024-2024": "0.966"
-    },
-    {
-      polygonName: "Adison Thaochu A",
-      siteName: "Palm Oil",
-      status: "Submitted",
-      size: "7,473",
-      plantDate: "9/26/24",
-      baseline: "25/4/24",
-      treePlanting: "0.423",
-      regeneration: "0.120",
-      seeding: "0.120",
-      "2024-2015": "0.423",
-      "2024-2016": "0.120",
-      "2024-2017": "0.655",
-      "2024-2018": "0.208",
-      "2024-2019": "0.654",
-      "2024-2020": "0.466",
-      "2024-2021": "0.151",
-      "2024-2022": "0.385",
-      "2024-2023": "0.457",
-      "2024-2024": "0.966"
-    },
-    {
-      polygonName: "AEK Nabara Selatan",
-      siteName: "Palm Oil",
-      status: "Needs Info",
-      size: "7,473",
-      plantDate: "9/26/24",
-      baseline: "25/4/24",
-      treePlanting: "0.423",
-      regeneration: "0.120",
-      seeding: "0.120",
-      "2024-2015": "0.423",
-      "2024-2016": "0.120",
-      "2024-2017": "0.655",
-      "2024-2018": "0.208",
-      "2024-2019": "0.654",
-      "2024-2020": "0.466",
-      "2024-2021": "0.151",
-      "2024-2022": "0.385",
-      "2024-2023": "0.457",
-      "2024-2024": "0.966"
-    },
-    {
-      polygonName: "AEK Raso",
-      siteName: "Palm Oil",
-      status: "Approved",
-      size: "7,473",
-      plantDate: "9/26/24",
-      baseline: "25/4/24",
-      treePlanting: "0.423",
-      regeneration: "0.120",
-      seeding: "0.120",
-      "2024-2015": "0.423",
-      "2024-2016": "0.120",
-      "2024-2017": "0.655",
-      "2024-2018": "0.208",
-      "2024-2019": "0.654",
-      "2024-2020": "0.466",
-      "2024-2021": "0.151",
-      "2024-2022": "0.385",
-      "2024-2023": "0.457",
-      "2024-2024": "0.966"
-    },
-    {
-      polygonName: "AEK Torup",
-      siteName: "Palm Oil",
-      status: "Approved",
-      size: "7,473",
-      plantDate: "9/26/24",
-      baseline: "25/4/24",
-      treePlanting: "0.423",
-      regeneration: "0.120",
-      seeding: "0.120",
-      "2024-2015": "0.423",
-      "2024-2016": "0.120",
-      "2024-2017": "0.655",
-      "2024-2018": "0.208",
-      "2024-2019": "0.654",
-      "2024-2020": "0.466",
-      "2024-2021": "0.151",
-      "2024-2022": "0.385",
-      "2024-2023": "0.457",
-      "2024-2024": "0.966"
-    }
-  ];
+  const handleExport = async () => {
+    try {
+      setExporting(true);
+      const blob = await fetchGetV2IndicatorsEntityUuidSlugExport({
+        pathParams: { entity: type!, uuid: record.uuid, slug: indicatorSlug! }
+      });
+      downloadFileBlob(blob!, `Indicator (${DROPDOWN_OPTIONS.find(item => item.slug === indicatorSlug)?.title}).csv`);
 
-  const DROPDOWN_OPTIONS = [
-    {
-      title: "Tree Cover Loss",
-      value: "1"
-    },
-    {
-      title: "Tree Cover Loss from Fire",
-      value: "2"
-    },
-    {
-      title: "Hectares Under Restoration By WWF EcoRegion",
-      value: "3"
-    },
-    {
-      title: "Hectares Under Restoration By Strategy",
-      value: "4"
-    },
-    {
-      title: "Hectares Under Restoration By Target Land Use System",
-      value: "5"
-    },
-    {
-      title: "Tree Count",
-      value: "6"
+      openNotification("success", t("Success! Export completed."), t("The export has been completed successfully."));
+      setExporting(false);
+    } catch (error) {
+      openNotification("error", t("Error! Export failed."), t("The export has failed. Please try again."));
+      setExporting(false);
+    } finally {
+      setExporting(false);
     }
-  ];
+  };
 
-  const toggleItems: TogglePropsItem[] = [
-    {
-      key: "dashboard",
-      render: (
-        <Text variant="text-14" className="py-0.5">
-          Table
-        </Text>
-      )
-    },
-    {
-      key: "table",
-      render: (
-        <Text variant="text-14" className="py-0.5">
-          Graph
-        </Text>
-      )
-    },
-    {
-      key: "table",
-      render: (
-        <Text variant="text-14" className="py-0.5">
-          Map
-        </Text>
-      )
+  useEffect(() => {
+    if (selectPolygonFromMap?.isOpen) {
+      setSelectPolygonFromMap?.({ isOpen: false, uuid: "" });
     }
-  ];
-
-  const POLYGONS = [
-    { title: "Agrariala Palma", value: "1" },
-    { title: "Agraisa", value: "2" },
-    { title: "Agrajaya Batitama", value: "3" },
-    { title: "Agoue Iboe", value: "4" },
-    { title: "Africas", value: "5" },
-    { title: "AEK Torup", value: "6" },
-    { title: "AEK Raso", value: "7" },
-    { title: "AEK Nabara Selatan", value: "8" },
-    { title: "Adison Thaochu A", value: "9" },
-    { title: "ABA", value: "10" }
-  ];
-
-  const indicatorDescription1 =
-    "From the <b>23 August 2024</b> analysis, 12.2M out of 20M hectares are being restored. Of those, <b>Direct Seeding was the most prevalent strategy used with more 765,432ha</b>, followed by Tree Planting with 453,89ha and Assisted Natural Regeneration with 93,345ha.";
-  const indicatorDescription2 =
-    "The numbers and reports below display data related to Indicator 2: Hectares Under Restoration described in TerraFund’s MRV framework. Please refer to the linked MRV framework for details on how these numbers are sourced and verified.";
-
-  const noDataGraph = (
-    <div className="flex w-full flex-col items-center justify-center gap-2 rounded-xl border border-grey-1000">
-      <Text variant={"text-32-semibold"} className="text-blueCustom">
-        No Data to Display
-      </Text>
-      <div className="flex items-center gap-1">
-        <Text variant={"text-14"} className="text-darkCustom">
-          RUN ANALYSUS ON PROJECT POLYGONS TO SEE DATA
-        </Text>
-        <Tooltip content={"Tooltip"}>
-          <Icon name={IconNames.IC_INFO} className="h-4 w-4" />
-        </Tooltip>
-      </div>
-    </div>
-  );
-
-  const noDataMap = (
-    <div className="absolute top-0 flex h-full w-full">
-      <div className="relative flex w-[23vw] flex-col gap-3 p-6">
-        <div className="absolute left-0 top-0 h-full w-full rounded-l-xl bg-white bg-opacity-20 backdrop-blur" />
-        <Text
-          variant={"text-14-semibold"}
-          className="z-10 w-fit border-b-2 border-white border-opacity-20 pb-1.5 text-white"
-        >
-          Indicator Description
-        </Text>
-        <div className="z-[5] flex min-h-0 flex-col gap-3 overflow-auto pr-1">
-          <Text variant={"text-14-light"} className="text-white" containHtml>
-            {indicatorDescription1}
-          </Text>
-          <Text variant={"text-14-light"} className="text-white" containHtml>
-            {indicatorDescription2}
-          </Text>
-        </div>
-      </div>
-      <div className="w-full p-6">
-        <div className="relative flex h-full w-full flex-col items-center justify-center gap-2 rounded-xl border border-white">
-          <div className="absolute left-0 top-0 h-full w-full rounded-xl bg-white bg-opacity-20 backdrop-blur" />
-          <Text variant={"text-32-semibold"} className="z-10 text-white">
-            No Data to Display
-          </Text>
-          <div className="flex items-center gap-1">
-            <Text variant={"text-14"} className="z-10 text-white">
-              RUN ANALYSUS ON PROJECT POLYGONS TO SEE DATA
-            </Text>
-            <Tooltip content={"Tooltip"}>
-              <Icon name={IconNames.IC_INFO_WHITE_BLACK} className="h-4 w-4" />
-            </Tooltip>
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-
+  }, [selectPolygonFromMap]);
   return (
-    <div className="-mx-4 h-[calc(100vh-200px)] overflow-auto px-4 pb-4">
-      <div className="sticky top-[0px] z-[10] rounded-lg border border-grey-850 bg-white shadow-monitored" {...rest}>
-        <div className="sticky top-[0px] z-[10] flex items-center justify-between rounded-t-lg bg-white px-6 pb-3 pt-6">
-          <div className="flex items-center gap-2">
-            <Icon name={IconNames.MONITORING_PROFILE} className="h-8 w-8" />
-            <Dropdown
-              options={DROPDOWN_OPTIONS}
-              onChange={option => {
-                setSelected(option);
-              }}
-              variant={VARIANT_DROPDOWN_SIMPLE}
-              inputVariant="text-14-semibold"
-              className="z-50"
-              defaultValue={[DROPDOWN_OPTIONS[0].value]}
-              optionsClassName="w-max z-50"
-            />
-          </div>
-
-          <div className="flex items-center gap-2">
-            <When condition={tabActive === 0}>
-              <FilterSearchBox placeholder="Search" onChange={() => {}} variant={FILTER_SEARCH_MONITORING} />
-              <Button variant="white-border" className="!h-[32px] !min-h-[32px] !w-8 p-0" onClick={() => {}}>
-                <Icon name={IconNames.DOWNLOAD_PA} className="h-4 w-4 text-darkCustom" />
-              </Button>
-            </When>
+    <>
+      <div className="-mx-4 h-[calc(100vh-200px)] overflow-auto px-4 pb-4">
+        <div className="sticky top-[0px] z-[10] rounded-lg border border-grey-850 bg-white shadow-monitored" {...rest}>
+          <div className="sticky top-[0px] z-[11] flex items-center justify-between rounded-t-lg bg-white px-6 pb-3 pt-6">
+            <div className="flex items-center gap-2">
+              <Icon name={IconNames.MONITORING_PROFILE} className="h-8 w-8" />
+              <Dropdown
+                options={DROPDOWN_OPTIONS}
+                onChange={option => {
+                  setIndicatorSlug?.(DROPDOWN_OPTIONS.find(item => item.value === option[0])?.slug!);
+                  setSelected(option);
+                }}
+                variant={VARIANT_DROPDOWN_SIMPLE}
+                inputVariant="text-14-semibold"
+                className="z-50"
+                defaultValue={[DROPDOWN_OPTIONS.find(item => item.slug === indicatorSlug)?.value!]}
+                optionsClassName="w-max z-50"
+              />
+            </div>
 
-            <Toggle items={toggleItems} onChangeActiveIndex={setTabActive} />
-          </div>
-        </div>
-        <When condition={tabActive === 0}>
-          <div className="relative w-full px-6 pb-6">
-            <If condition={selected.includes("1") || selected.includes("2")}>
-              <Then>
-                <Table
-                  columns={TABLE_COLUMNS}
-                  data={TABLE_DATA}
-                  variant={VARIANT_TABLE_MONITORED}
-                  classNameWrapper="!overflow-visible"
-                  visibleRows={50}
-                  border={1}
-                />
-              </Then>
-              <Else>
-                <Table
-                  columns={TABLE_COLUMNS_HECTARES}
-                  data={TABLE_DATA}
-                  variant={VARIANT_TABLE_MONITORED}
-                  classNameWrapper="!overflow-visible"
-                  visibleRows={50}
+            <div className="flex items-center gap-2">
+              <When condition={tabActive === 0}>
+                <FilterSearchBox
+                  placeholder="Search"
+                  onChange={e => {
+                    setSearchTerm(e);
+                  }}
+                  variant={FILTER_SEARCH_MONITORING}
                 />
-              </Else>
-            </If>
+                <Button variant="white-border" className="!h-[32px] !min-h-[32px] !w-8 p-0" onClick={handleExport}>
+                  <Icon name={IconNames.DOWNLOAD_PA} className="h-4 w-4 text-darkCustom" />
+                </Button>
+              </When>
+
+              <Toggle items={toggleItems} onChangeActiveIndex={setTabActive} />
+            </div>
           </div>
-        </When>
-        <When condition={tabActive === 1}>
-          <div className="relative flex w-full gap-8 px-6 pb-6 pt-2">
-            <Dropdown
-              containerClassName={classNames("absolute left-full -translate-x-full pr-6", {
-                hidden: selected.includes("6")
-              })}
-              className="w-max"
-              options={POLYGONS}
-              defaultValue={["1"]}
-              onChange={() => {}}
-            />
-            <div className="sticky top-[77px] flex h-[calc(100vh-320px)] w-1/4 min-w-[25%] flex-col gap-3">
-              <Text
-                variant={"text-14-semibold"}
-                className="w-fit border-b-2 border-neutral-450 pb-1.5 text-blueCustom-900"
-              >
-                Indicator Description
-              </Text>
-              <div className="flex min-h-0 flex-col gap-3 overflow-auto pr-1">
-                <Text variant={"text-14-light"} className="text-darkCustom-150" containHtml>
-                  {indicatorDescription1}
-                </Text>
-                <Text variant={"text-14-light"} className="text-darkCustom-150" containHtml>
-                  {indicatorDescription2}
+          <When condition={tabActive === 0}>
+            <div className="relative w-full px-6 pb-6">
+              <Table
+                columns={TABLE_COLUMNS_MAPPING[indicatorSlug!]}
+                data={polygonsIndicator ?? []}
+                variant={VARIANT_TABLE_MONITORED}
+                classNameWrapper="!overflow-visible"
+                visibleRows={50}
+                border={1}
+                onRowClick={(row: any) => {
+                  navigate(`${basename}/site/${row?.site_id}/show/1`);
+                  setSelectPolygonFromMap?.({ isOpen: true, uuid: row?.poly_id });
+                }}
+              />
+            </div>
+          </When>
+          <When condition={tabActive === 1}>
+            <div className="relative z-auto flex h-[calc(100vh-320px)] w-full gap-8 px-6 pb-6 pt-2">
+              <Dropdown
+                containerClassName={classNames("absolute left-full -translate-x-full pr-6 z-[1]", {
+                  hidden: selected.includes("6")
+                })}
+                optionsClassName="!w-max right-0"
+                className="w-max"
+                options={polygonOptions}
+                defaultValue={["0"]}
+                onChange={option => setSelectedPolygonUuid(option[0])}
+              />
+              <div className="sticky top-[77px] flex h-[calc(100vh-320px)] w-1/4 min-w-[25%] flex-col gap-3">
+                <Text
+                  variant={"text-14-semibold"}
+                  className="w-fit border-b-2 border-neutral-450 pb-1.5 text-blueCustom-900"
+                >
+                  Indicator Description
                 </Text>
+                <div className="flex min-h-0 flex-col gap-3 overflow-auto pr-1">
+                  <Text variant={"text-14"} className="text-darkCustom" containHtml>
+                    {indicatorDescription1}
+                  </Text>
+                  <Text variant={"text-14"} className="text-darkCustom" containHtml>
+                    {indicatorDescription2}
+                  </Text>
+                </div>
               </div>
+              <MonitoredCharts
+                selected={selected}
+                isLoadingIndicator={isLoadingIndicator}
+                parsedData={parsedData}
+                ecoRegionData={ecoRegionData}
+                strategiesData={strategiesData}
+                landUseData={landUseData}
+                record={record}
+                totalHectaresRestoredGoal={totalHectaresRestoredGoal}
+              />
+              <When condition={selected.includes("6")}>{noDataGraph}</When>
             </div>
-            <When condition={selected.includes("1")}>
-              <img src="/images/monitoring-graph-2.png" alt="" className="w-[73%] object-contain" />
-            </When>
-            <When condition={selected.includes("2") || selected.includes("2")}>
-              <img src="/images/monitoring-graph-2.png" alt="" className="w-[73%] object-contain" />
-            </When>
-            <When condition={selected.includes("3")}>
-              <img src="/images/monitoring-graph-3.png" alt="" className="w-[73%] object-contain" />
-            </When>
-            <When condition={selected.includes("4")}>
-              <img src="/images/monitoring-graph-4.png" alt="" className="w-[73%] object-contain" />
-            </When>
-            <When condition={selected.includes("5")}>
-              <div className="w-[73%]">
-                <GraphicIconDashboard
-                  data={DUMMY_DATA_TARGET_LAND_USE_TYPES_REPRESENTED.graphicTargetLandUseTypes}
-                  maxValue={90}
-                />
+          </When>
+          <When condition={tabActive === 2}>
+            <div className="relative h-[calc(100vh-295px)] w-full">
+              <div className="absolute left-1/2 top-6 z-10">
+                <TooltipMapMonitoring />
               </div>
-            </When>
-            <When condition={selected.includes("6")}>{noDataGraph}</When>
-          </div>
-        </When>
-        <When condition={tabActive === 2}>
-          <div className="relative h-[calc(100vh-295px)] w-full">
-            <div className="absolute left-1/2 top-6 z-10">
-              <TooltipMapMonitoring />
+              <MapContainer
+                className="!h-full"
+                mapFunctions={mapFunctions}
+                sitePolygonData={[]}
+                hasControls={!selected.includes("6")}
+                showLegend={!selected.includes("6")}
+                legendPosition="bottom-right"
+                showViewGallery={false}
+              />
+              <When condition={selected.includes("6")}>{noDataMap}</When>
             </div>
-            <MapContainer
-              className="!h-full"
-              mapFunctions={mapFunctions}
-              sitePolygonData={[]}
-              hasControls={!selected.includes("6")}
-              showLegend={!selected.includes("6")}
-              legendPosition="bottom-right"
-              showViewGallery={false}
-            />
-            <When condition={selected.includes("6")}>{noDataMap}</When>
-          </div>
-        </When>
+          </When>
+        </div>
       </div>
-    </div>
+      <ExportProcessingAlert show={exporting} />
+    </>
   );
 };
 
diff --git a/src/admin/components/ResourceTabs/MonitoredTab/components/EcoRegionDoughnutChart.tsx b/src/admin/components/ResourceTabs/MonitoredTab/components/EcoRegionDoughnutChart.tsx
new file mode 100644
index 000000000..fd8c26abd
--- /dev/null
+++ b/src/admin/components/ResourceTabs/MonitoredTab/components/EcoRegionDoughnutChart.tsx
@@ -0,0 +1,127 @@
+import React, { useState } from "react";
+import { Cell, Label, Legend, Pie, PieChart, ResponsiveContainer, Sector, Tooltip } from "recharts";
+
+interface ChartDataItem {
+  name: string;
+  value: number;
+}
+
+export interface EcoRegionData {
+  chartData: ChartDataItem[];
+  total: number;
+}
+
+interface EcoRegionDoughnutChartProps {
+  data: EcoRegionData;
+}
+
+type LegendPayload = {
+  value: string;
+  id?: string;
+  type?: string;
+  color?: string;
+};
+
+interface CustomLegendProps {
+  payload?: LegendPayload[];
+}
+
+const COLORS = ["#FFD699", "#90EE90", "#2F4F4F", "#BDB76B", "#98FB98"];
+
+const CustomLegend = ({ payload }: CustomLegendProps) => {
+  if (!payload) return null;
+  return (
+    <ul className="flex flex-col gap-2 text-sm">
+      {payload.map((entry, index) => (
+        <li key={index} className="flex items-center gap-2">
+          <span className="inline-block h-3 w-3 rounded-full" style={{ backgroundColor: entry.color }} />
+          <span>{entry.value}</span>
+        </li>
+      ))}
+    </ul>
+  );
+};
+
+const CustomTooltip = ({ active, payload }: any) => {
+  if (active && payload && payload.length) {
+    return (
+      <div className="shadow-lg rounded border bg-white p-2">
+        <p className="font-medium">{payload[0].name}</p>
+        <p className="text-gray-600">{`Value: ${payload[0].value}`}</p>
+      </div>
+    );
+  }
+  return null;
+};
+
+const renderActiveShape = (props: any) => {
+  const { cx, cy, innerRadius, outerRadius, startAngle, endAngle, fill } = props;
+  return (
+    <g>
+      <Sector
+        cx={cx}
+        cy={cy}
+        innerRadius={innerRadius}
+        outerRadius={outerRadius + 10}
+        startAngle={startAngle}
+        endAngle={endAngle}
+        fill={fill}
+      />
+    </g>
+  );
+};
+
+const EcoRegionDoughnutChart: React.FC<EcoRegionDoughnutChartProps> = ({ data }) => {
+  const { chartData } = data;
+  const [activeIndex, setActiveIndex] = useState<number | undefined>(undefined);
+
+  const onPieEnter = (_: any, index: number) => {
+    setActiveIndex(index);
+  };
+
+  const onPieLeave = () => {
+    setActiveIndex(undefined);
+  };
+
+  return (
+    <div className="relative flex h-80 w-full items-center justify-center">
+      <ResponsiveContainer width="100%" height="100%">
+        <PieChart>
+          <Tooltip content={<CustomTooltip />} />
+          <Pie
+            data={chartData}
+            cx="50%"
+            cy="50%"
+            innerRadius={100}
+            outerRadius={140}
+            paddingAngle={0}
+            dataKey="value"
+            onMouseEnter={onPieEnter}
+            onMouseLeave={onPieLeave}
+            activeIndex={activeIndex}
+            activeShape={renderActiveShape}
+          >
+            <Label position="center" className="text-20-semibold !font-semibold !text-darkCustom">
+              ECO-REGION
+            </Label>
+            {chartData.map((entry, index) => (
+              <Cell key={`cell-${index}`} fill={COLORS[index % COLORS.length]} />
+            ))}
+          </Pie>
+          <Legend
+            content={props => <CustomLegend {...props} />}
+            layout="vertical"
+            align="right"
+            verticalAlign="middle"
+            wrapperStyle={{
+              right: "calc(50% - 261px)",
+              paddingLeft: 0
+            }}
+          />
+        </PieChart>
+      </ResponsiveContainer>
+    </div>
+  );
+};
+
+export default EcoRegionDoughnutChart;
diff --git a/src/admin/components/ResourceTabs/MonitoredTab/components/HeaderMonitoredTab.tsx b/src/admin/components/ResourceTabs/MonitoredTab/components/HeaderMonitoredTab.tsx
index fab6e2d1a..bd1573449 100644
--- a/src/admin/components/ResourceTabs/MonitoredTab/components/HeaderMonitoredTab.tsx
+++ b/src/admin/components/ResourceTabs/MonitoredTab/components/HeaderMonitoredTab.tsx
@@ -1,3 +1,6 @@
+import { useShowContext } from "react-admin";
+import { When } from "react-if";
+
 import Button from "@/components/elements/Button/Button";
 import LinearProgressBarMonitored from "@/components/elements/ProgressBar/LinearProgressBar/LineProgressBarMonitored";
 import Text from "@/components/elements/Text/Text";
@@ -6,29 +9,16 @@ import { ModalId } from "@/components/extensive/Modal/ModalConst";
 import ModalNotes from "@/components/extensive/Modal/ModalNotes";
 import ModalRunAnalysis from "@/components/extensive/Modal/ModalRunAnalysis";
 import { useModalContext } from "@/context/modal.provider";
+import { useMonitoredDataContext } from "@/context/monitoredData.provider";
+import { EntityName } from "@/types/common";
 
-const HeaderMonitoredTab = () => {
-  const { openModal, closeModal } = useModalContext();
+import { useMonitoredData } from "../hooks/useMonitoredData";
 
-  const dataPolygonOverview = [
-    {
-      status: "Draft",
-      count: 12.5,
-      color: "bg-grey-200"
-    },
-    {
-      status: "Submitted",
-      count: 42.5
-    },
-    {
-      status: "Needs Info",
-      count: 22.5
-    },
-    {
-      status: "Approved",
-      count: 22.5
-    }
-  ];
+const HeaderMonitoredTab = ({ type }: { type?: EntityName }) => {
+  const { openModal, closeModal } = useModalContext();
+  const { record } = useShowContext();
+  const { headerBarPolygonStatus, totalPolygonsStatus, polygonMissingAnalysis } = useMonitoredData(type, record?.uuid);
+  const { loadingAnalysis } = useMonitoredDataContext();
 
   const openRunAnalysis = () => {
     openModal(
@@ -37,6 +27,9 @@ const HeaderMonitoredTab = () => {
         title="Update Analysis "
         content="Project Developers may submit one or all polygons for review."
         primaryButtonText="Run"
+        projectName={record?.project ? record?.project?.name : record?.name}
+        entityType={type}
+        entityUuid={record?.uuid}
         primaryButtonProps={{
           className: "px-8 py-3",
           variant: "primary",
@@ -60,9 +53,9 @@ const HeaderMonitoredTab = () => {
       ModalId.MODAL_NOTES,
       <ModalNotes
         title="Notes"
-        content="Baseline Analysis Underway: There are 200 approved polygons for this project 
-that are ready for analysis and 90 that have been analyzed already. Update the 
-graphs and tables below by clicking update analysis button to your right. "
+        content={`Baseline Analysis Underway: There are ${totalPolygonsStatus} approved polygons for this project 
+that are ready for analysis and ${polygonMissingAnalysis} that have been analyzed already. Update the 
+graphs and tables below by clicking update analysis button to your right. `}
         primaryButtonText="Close"
         primaryButtonProps={{
           className: "px-8 py-3",
@@ -85,9 +78,14 @@ graphs and tables below by clicking update analysis button to your right. "
               Polygon Overview
               <Icon name={IconNames.IC_INFO} className="h-4 w-4 text-darkCustom" />
             </Text>
+            <div className="flex items-center gap-1">
+              {loadingAnalysis ? (
+                <Icon name={IconNames.IC_LOADING} className="h-4 w-4 animate-spin text-success-600" />
+              ) : null}
+            </div>
           </div>
           <div className="w-[35vw] pt-2">
-            <LinearProgressBarMonitored data={dataPolygonOverview} />
+            <LinearProgressBarMonitored data={headerBarPolygonStatus} />
           </div>
         </div>
         <div className="flex gap-4">
@@ -96,17 +94,19 @@ graphs and tables below by clicking update analysis button to your right. "
               No. of Polygons
             </Text>
             <Text variant="text-12-bold" className="text-darkCusto pt-1">
-              45
-            </Text>
-          </div>
-          <div>
-            <Text variant="text-12" className=" text-darkCustom">
-              No. of Sites
-            </Text>
-            <Text variant="text-12-bold" className="pt-1 text-darkCustom">
-              12
+              {totalPolygonsStatus}
             </Text>
           </div>
+          <When condition={type === "projects"}>
+            <div>
+              <Text variant="text-12" className=" text-darkCustom">
+                No. of Sites
+              </Text>
+              <Text variant="text-12-bold" className="pt-1 text-darkCustom">
+                {record?.project ? record?.project?.total_sites : record?.total_sites}
+              </Text>
+            </div>
+          </When>
         </div>
       </div>
       <div className="flex gap-4">
diff --git a/src/admin/components/ResourceTabs/MonitoredTab/components/MonitoredCharts.tsx b/src/admin/components/ResourceTabs/MonitoredTab/components/MonitoredCharts.tsx
new file mode 100644
index 000000000..7f315ba4c
--- /dev/null
+++ b/src/admin/components/ResourceTabs/MonitoredTab/components/MonitoredCharts.tsx
@@ -0,0 +1,166 @@
+import classNames from "classnames";
+import React, { useEffect, useState } from "react";
+import { ReactNode } from "react";
+import { When } from "react-if";
+
+import SimpleBarChart from "@/pages/dashboard/charts/SimpleBarChart";
+import GraphicIconDashboard from "@/pages/dashboard/components/GraphicIconDashboard";
+import SecDashboard from "@/pages/dashboard/components/SecDashboard";
+import { TOTAL_HECTARES_UNDER_RESTORATION_TOOLTIP } from "@/pages/dashboard/constants/tooltips";
+
+import EcoRegionDoughnutChart from "./EcoRegionDoughnutChart";
+import { LoadingState } from "./MonitoredLoading";
+import { NoDataState } from "./NoDataState";
+import TreeLossBarChart from "./TreesLossBarChart";
+
+const ChartContainer = ({
+  children,
+  isLoading,
+  hasNoData
+}: {
+  children: ReactNode;
+  isLoading: boolean;
+  hasNoData: boolean;
+}): JSX.Element | null => {
+  if (isLoading) {
+    return <LoadingState />;
+  }
+
+  if (hasNoData) {
+    return <NoDataState />;
+  }
+
+  return <>{children}</>;
+};
+
+interface RecordType {
+  total_hectares_restored_sum: number;
+}
+
+const RestorationMetrics = ({
+  record,
+  totalHectaresRestoredGoal,
+  strategiesData
+}: {
+  record: RecordType;
+  totalHectaresRestoredGoal: number;
+  strategiesData: any[];
+}) => (
+  <div className="flex w-full flex-col gap-6 lg:ml-[35px]">
+    <SecDashboard
+      title="Total Hectares Under Restoration"
+      data={{
+        value: record.total_hectares_restored_sum,
+        totalValue: totalHectaresRestoredGoal
+      }}
+      className="w-full place-content-center pl-8"
+      tooltip={TOTAL_HECTARES_UNDER_RESTORATION_TOOLTIP}
+      showTreesRestoredGraph={false}
+    />
+    <SimpleBarChart data={strategiesData} />
+  </div>
+);
+
+interface MonitoredChartsProps {
+  selected: React.Key[];
+  isLoadingIndicator: boolean;
+  parsedData: any[];
+  ecoRegionData: any;
+  strategiesData: any[];
+  landUseData: any;
+  record: RecordType;
+  totalHectaresRestoredGoal: number;
+}
+
+const MonitoredCharts = ({
+  selected,
+  isLoadingIndicator,
+  parsedData,
+  ecoRegionData,
+  strategiesData,
+  landUseData,
+  record,
+  totalHectaresRestoredGoal
+}: MonitoredChartsProps) => {
+  const [hasNoData, setHasNoData] = useState(false);
+
+  useEffect(() => {
+    const noData = selected.some(chartId => {
+      switch (chartId) {
+        case "1":
+        case "2":
+          return !parsedData?.length;
+        case "3":
+          return !ecoRegionData?.chartData?.length;
+        case "4":
+          return !strategiesData?.length;
+        case "5":
+          return !landUseData?.graphicTargetLandUseTypes?.length;
+        default:
+          return false;
+      }
+    });
+    setHasNoData(noData);
+  }, [selected, parsedData, ecoRegionData, strategiesData, landUseData]);
+
+  const renderChart = (chartId: React.Key) => {
+    switch (chartId) {
+      case "1":
+      case "2":
+        return (
+          <ChartContainer isLoading={isLoadingIndicator} hasNoData={!parsedData?.length}>
+            <TreeLossBarChart data={parsedData} className="flex flex-col" />
+          </ChartContainer>
+        );
+
+      case "3":
+        return (
+          <ChartContainer isLoading={isLoadingIndicator} hasNoData={!ecoRegionData?.chartData?.length}>
+            <EcoRegionDoughnutChart data={ecoRegionData} />
+          </ChartContainer>
+        );
+
+      case "4":
+        return (
+          <ChartContainer isLoading={isLoadingIndicator} hasNoData={!strategiesData?.length}>
+            <RestorationMetrics
+              record={record}
+              totalHectaresRestoredGoal={totalHectaresRestoredGoal}
+              strategiesData={strategiesData}
+            />
+          </ChartContainer>
+        );
+
+      case "5":
+        return (
+          <ChartContainer isLoading={isLoadingIndicator} hasNoData={!landUseData?.graphicTargetLandUseTypes?.length}>
+            <div className="w-full pt-12">
+              <GraphicIconDashboard data={landUseData.graphicTargetLandUseTypes} maxValue={totalHectaresRestoredGoal} />
+            </div>
+          </ChartContainer>
+        );
+
+      default:
+        return null;
+    }
+  };
+
+  return (
+    <div
+      className={classNames("flex w-full flex-col gap-6", {
+        "relative z-10 bg-white": hasNoData
+      })}
+    >
+      {selected.map(
+        (id: React.Key | null | undefined) =>
+          id != null && (
+            <When key={id} condition={selected.includes(id)}>
+              {renderChart(id)}
+            </When>
+          )
+      )}
+    </div>
+  );
+};
+
+export default MonitoredCharts;
diff --git a/src/admin/components/ResourceTabs/MonitoredTab/components/MonitoredLoading.tsx b/src/admin/components/ResourceTabs/MonitoredTab/components/MonitoredLoading.tsx
new file mode 100644
index 000000000..d96df4169
--- /dev/null
+++ b/src/admin/components/ResourceTabs/MonitoredTab/components/MonitoredLoading.tsx
@@ -0,0 +1,9 @@
+import React from "react";
+
+import Loader from "@/components/generic/Loading/Loader";
+
+export const LoadingState = () => (
+  <div className="flex w-full items-start justify-center">
+    <Loader />
+  </div>
+);
diff --git a/src/admin/components/ResourceTabs/MonitoredTab/components/NoDataState.tsx b/src/admin/components/ResourceTabs/MonitoredTab/components/NoDataState.tsx
new file mode 100644
index 000000000..fdac5578f
--- /dev/null
+++ b/src/admin/components/ResourceTabs/MonitoredTab/components/NoDataState.tsx
@@ -0,0 +1,22 @@
+import React from "react";
+
+import Text from "@/components/elements/Text/Text";
+import Tooltip from "@/components/elements/Tooltip/Tooltip";
+import Icon from "@/components/extensive/Icon/Icon";
+import { IconNames } from "@/components/extensive/Icon/Icon";
+
+export const NoDataState = () => (
+  <div className="z-10 flex h-[75%] w-full flex-col items-center justify-center gap-2 rounded-xl border border-grey-1000">
+    <Text variant="text-32-semibold" className="text-blueCustom">
+      No Data to Display
+    </Text>
+    <div className="flex items-center gap-1">
+      <Text variant="text-14" className="text-darkCustom">
+        RUN ANALYSIS ON PROJECT POLYGONS TO SEE DATA
+      </Text>
+      <Tooltip content="Tooltip">
+        <Icon name={IconNames.IC_INFO} className="h-4 w-4" />
+      </Tooltip>
+    </div>
+  </div>
+);
diff --git a/src/admin/components/ResourceTabs/MonitoredTab/components/TreesLossBarChart.tsx b/src/admin/components/ResourceTabs/MonitoredTab/components/TreesLossBarChart.tsx
new file mode 100644
index 000000000..7ca07f205
--- /dev/null
+++ b/src/admin/components/ResourceTabs/MonitoredTab/components/TreesLossBarChart.tsx
@@ -0,0 +1,81 @@
+import React from "react";
+import { Bar, BarChart, CartesianGrid, Legend, ResponsiveContainer, Tooltip, XAxis, YAxis } from "recharts";
+
+import CustomBar from "@/pages/dashboard/charts/CustomBarJobsCreated";
+
+type TreeLossData = {
+  name: number;
+  treeCoverLoss: number;
+  treeCoverLossFires: number;
+};
+
+interface TreeLossBarChartProps {
+  data: TreeLossData[];
+  className?: string;
+}
+
+const TreeLossBarChart = ({ data, className = "" }: TreeLossBarChartProps) => {
+  const CustomTooltip = ({ active, payload, label }: { active?: boolean; payload?: any[]; label?: string }) => {
+    if (active && payload && payload.length) {
+      return (
+        <div className="border-gray-200 min-w-[200px] rounded-md border bg-white p-2">
+          <p className="text-12-semibold mb-2">{label}</p>
+          {payload.map((entry, index) => (
+            <div key={index} className="flex items-center gap-2">
+              <div className="h-2 w-2 rounded-full" style={{ backgroundColor: entry.color }} />
+              <span className="text-12-light">{entry.name}</span>
+              <span className="text-12-semibold ml-auto font-medium">
+                {Number(entry.value).toFixed(1).toLocaleString()} ha
+              </span>
+            </div>
+          ))}
+        </div>
+      );
+    }
+    return null;
+  };
+
+  return (
+    <div className={`h-[500px] w-full p-4 ${className}`}>
+      <h2 className="text-12 mb-1 pl-10">Tree Loss Retrospective (ha)</h2>
+      <h3 className="text-14-semibold mb-4 pl-10">2015-2024</h3>
+      <ResponsiveContainer width="100%" height="100%">
+        <BarChart
+          data={data}
+          margin={{
+            top: 20,
+            right: 30,
+            left: 20,
+            bottom: 5
+          }}
+          barSize={40}
+        >
+          <CartesianGrid vertical={false} stroke="#E1E4E9" />
+          <XAxis dataKey="name" axisLine={false} tickLine={false} dy={10} />
+          <YAxis
+            axisLine={false}
+            tickLine={false}
+            tickFormatter={value => `${value.toLocaleString()}`}
+            className="text-12"
+          />
+          <Tooltip content={<CustomTooltip />} cursor={{ fill: "rgba(0, 0, 0, 0.05)" }} />
+          <Legend
+            wrapperStyle={{
+              paddingTop: "20px"
+            }}
+          />
+          <Bar dataKey="treeCoverLossFires" stackId="a" fill="#24555C" name="Tree cover loss from fires" />
+          <Bar
+            dataKey="treeCoverLoss"
+            stackId="a"
+            fill="#4097A3"
+            name="Tree cover loss"
+            shape={(props: any) => <CustomBar {...props} />}
+          />
+        </BarChart>
+      </ResponsiveContainer>
+    </div>
+  );
+};
+
+export default TreeLossBarChart;
diff --git a/src/admin/components/ResourceTabs/MonitoredTab/hooks/useMonitoredData.ts b/src/admin/components/ResourceTabs/MonitoredTab/hooks/useMonitoredData.ts
new file mode 100644
index 000000000..00d374bd9
--- /dev/null
+++ b/src/admin/components/ResourceTabs/MonitoredTab/hooks/useMonitoredData.ts
@@ -0,0 +1,297 @@
+import { useT } from "@transifex/react";
+import { useEffect, useMemo, useState } from "react";
+
+import { ModalId } from "@/components/extensive/Modal/ModalConst";
+import { useModalContext } from "@/context/modal.provider";
+import { useMonitoredDataContext } from "@/context/monitoredData.provider";
+import { useNotificationContext } from "@/context/notification.provider";
+import {
+  fetchGetV2IndicatorsEntityUuidSlugVerify,
+  useGetV2IndicatorsEntityUuid,
+  useGetV2IndicatorsEntityUuidSlug,
+  useGetV2IndicatorsEntityUuidSlugVerify,
+  usePostV2IndicatorsSlug
+} from "@/generated/apiComponents";
+import { IndicatorPolygonsStatus, Indicators } from "@/generated/apiSchemas";
+import { EntityName } from "@/types/common";
+
+const dataPolygonOverview = [
+  {
+    status: "Draft",
+    status_key: "draft",
+    count: 12.5,
+    color: "bg-grey-200"
+  },
+  {
+    status: "Submitted",
+    status_key: "submitted",
+    count: 42.5
+  },
+  {
+    status: "Needs Info",
+    status_key: "needs-more-information",
+    count: 22.5
+  },
+  {
+    status: "Approved",
+    status_key: "approved",
+    count: 22.5
+  }
+];
+
+const DROPDOWN_OPTIONS = [
+  {
+    title: "Tree Cover Loss",
+    value: "1",
+    slug: "treeCoverLoss"
+  },
+  {
+    title: "Tree Cover Loss from Fire",
+    value: "2",
+    slug: "treeCoverLossFires"
+  },
+  {
+    title: "Hectares Under Restoration By WWF EcoRegion",
+    value: "3",
+    slug: "restorationByEcoRegion"
+  },
+  {
+    title: "Hectares Under Restoration By Strategy",
+    value: "4",
+    slug: "restorationByStrategy"
+  },
+  {
+    title: "Hectares Under Restoration By Target Land Use System",
+    value: "5",
+    slug: "restorationByLandUse"
+  }
+];
+
+const SLUGS_INDICATORS = [
+  "treeCoverLoss",
+  "treeCoverLossFires",
+  "restorationByEcoRegion",
+  "restorationByStrategy",
+  "restorationByLandUse"
+];
+
+type InterfaceIndicatorPolygonsStatus = {
+  draft: number;
+  submitted: number;
+  "needs-more-information": number;
+  approved: number;
+};
+
+interface PolygonOption {
+  title: string;
+  value: string;
+}
+
+export const useMonitoredData = (entity?: EntityName, entity_uuid?: string) => {
+  const t = useT();
+  const { searchTerm, indicatorSlug, setLoadingAnalysis, setIndicatorSlugAnalysis } = useMonitoredDataContext();
+  const { modalOpened } = useModalContext();
+  const [isLoadingVerify, setIsLoadingVerify] = useState<boolean>(false);
+  const { openNotification } = useNotificationContext();
+  const [treeCoverLossData, setTreeCoverLossData] = useState<Indicators[]>([]);
+  const [polygonOptions, setPolygonOptions] = useState<PolygonOption[]>([{ title: "All Polygons", value: "0" }]);
+  const [treeCoverLossFiresData, setTreeCoverLossFiresData] = useState<Indicators[]>([]);
+  const [analysisToSlug, setAnalysisToSlug] = useState<any>({
+    treeCoverLoss: [],
+    treeCoverLossFires: [],
+    restorationByEcoRegion: [],
+    restorationByStrategy: [],
+    restorationByLandUse: []
+  });
+  const [dropdownAnalysisOptions, setDropdownAnalysisOptions] = useState(DROPDOWN_OPTIONS);
+
+  const {
+    data: indicatorData,
+    refetch: refetchDataIndicators,
+    isLoading: isLoadingIndicator
+  } = useGetV2IndicatorsEntityUuidSlug(
+    {
+      pathParams: {
+        entity: entity!,
+        uuid: entity_uuid!,
+        slug: indicatorSlug!
+      }
+    },
+    {
+      enabled: !!indicatorSlug && !!entity_uuid
+    }
+  );
+
+  const getComplementarySlug = (slug: string) => (slug === "treeCoverLoss" ? "treeCoverLossFires" : "treeCoverLoss");
+
+  const { data: complementaryData } = useGetV2IndicatorsEntityUuidSlug(
+    {
+      pathParams: {
+        entity: entity!,
+        uuid: entity_uuid!,
+        slug: getComplementarySlug(indicatorSlug || "")
+      }
+    },
+    {
+      enabled: (indicatorSlug === "treeCoverLoss" || indicatorSlug === "treeCoverLossFires") && !!entity_uuid
+    }
+  );
+
+  useEffect(() => {
+    if (indicatorSlug === "treeCoverLoss") {
+      setTreeCoverLossData(indicatorData || []);
+      setTreeCoverLossFiresData(complementaryData || []);
+    } else if (indicatorSlug === "treeCoverLossFires") {
+      setTreeCoverLossFiresData(indicatorData || []);
+      setTreeCoverLossData(complementaryData || []);
+    }
+  }, [indicatorData, complementaryData, indicatorSlug]);
+
+  const { mutate, isLoading } = usePostV2IndicatorsSlug({
+    onSuccess: () => {
+      openNotification(
+        "success",
+        t("Success! Analysis completed."),
+        t("The analysis has been completed successfully.")
+      );
+      refetchDataIndicators();
+      setLoadingAnalysis?.(false);
+      setIndicatorSlugAnalysis?.("treeCoverLoss");
+    },
+    onError: () => {
+      openNotification("error", t("Error! Analysis failed."), t("The analysis has failed. Please try again."));
+      refetchDataIndicators();
+      setLoadingAnalysis?.(false);
+      setIndicatorSlugAnalysis?.("treeCoverLoss");
+    }
+  });
+
+  const { data: indicatorPolygonsStatus } = useGetV2IndicatorsEntityUuid<IndicatorPolygonsStatus>(
+    {
+      pathParams: {
+        entity: entity!,
+        uuid: entity_uuid!
+      }
+    },
+    {
+      enabled: !!entity_uuid
+    }
+  );
+
+  const filteredPolygons = useMemo(() => {
+    if (!indicatorData) return [];
+
+    return indicatorData
+      .filter(
+        (polygon: Indicators) =>
+          polygon?.poly_name?.toLowerCase().includes(searchTerm?.toLowerCase()) ||
+          polygon?.site_name?.toLowerCase().includes(searchTerm?.toLowerCase())
+      )
+      .sort((a, b) => (a.poly_name || "").localeCompare(b.poly_name || ""));
+  }, [indicatorData, searchTerm]);
+
+  useEffect(() => {
+    if (!indicatorData) return;
+
+    const options = [
+      { title: "All Polygons", value: "0" },
+      ...indicatorData
+        .map((item: any) => ({
+          title: item.poly_name || "",
+          value: item.poly_id || ""
+        }))
+        .sort((a, b) => a.title.localeCompare(b.title))
+    ];
+
+    setPolygonOptions(options);
+  }, [indicatorData]);
+
+  const headerBarPolygonStatus = dataPolygonOverview.map(status => {
+    const key = status.status_key as keyof InterfaceIndicatorPolygonsStatus;
+    return {
+      ...status,
+      count: indicatorPolygonsStatus?.[key] ?? 0
+    };
+  });
+
+  const totalPolygonsApproved = headerBarPolygonStatus.find(item => item.status_key === "approved")?.count;
+
+  const { data: dataToMissingPolygonVerify } = useGetV2IndicatorsEntityUuidSlugVerify(
+    {
+      pathParams: {
+        entity: entity!,
+        uuid: entity_uuid!,
+        slug: indicatorSlug!
+      }
+    },
+    {
+      enabled: !!indicatorSlug
+    }
+  );
+
+  // @ts-ignore
+  const polygonMissingAnalysis = dataToMissingPolygonVerify?.message
+    ? totalPolygonsApproved
+    : totalPolygonsApproved! - Object?.keys(dataToMissingPolygonVerify ?? {})?.length;
+
+  const verifySlug = async (slug: string) =>
+    fetchGetV2IndicatorsEntityUuidSlugVerify({
+      pathParams: {
+        entity: entity!,
+        uuid: entity_uuid!,
+        slug: slug!
+      }
+    });
+
+  useEffect(() => {
+    const fetchSlugs = async () => {
+      setIsLoadingVerify(true);
+      const slugVerify = await Promise.all(SLUGS_INDICATORS.map(verifySlug));
+      const slugToAnalysis = SLUGS_INDICATORS.reduce<Record<string, any>>((acc, slug, index) => {
+        acc[slug] = slugVerify[index];
+        return acc;
+      }, {});
+      const updateTitleDropdownOptions = () => {
+        return DROPDOWN_OPTIONS.map(option => {
+          if (slugToAnalysis[`${option.slug}`]?.message) {
+            return {
+              ...option,
+              title: `${option.title} (0 polygons not run)`
+            };
+          }
+          if (!slugToAnalysis[`${option.slug}`]) {
+            return option;
+          }
+          return {
+            ...option,
+            title: `${option.title} (${Object?.keys(slugToAnalysis[`${option.slug}`]).length} polygons not run)`
+          };
+        });
+      };
+      setAnalysisToSlug(slugToAnalysis);
+      await setDropdownAnalysisOptions(updateTitleDropdownOptions);
+      setIsLoadingVerify(false);
+    };
+    if (modalOpened(ModalId.MODAL_RUN_ANALYSIS)) {
+      fetchSlugs();
+    }
+  }, [entity]);
+
+  return {
+    polygonsIndicator: filteredPolygons,
+    polygonOptions,
+    indicatorPolygonsStatus,
+    headerBarPolygonStatus,
+    totalPolygonsStatus: totalPolygonsApproved,
+    runAnalysisIndicator: mutate,
+    loadingAnalysis: isLoading,
+    loadingVerify: isLoadingVerify,
+    isLoadingIndicator,
+    setIsLoadingVerify,
+    dropdownAnalysisOptions,
+    analysisToSlug,
+    polygonMissingAnalysis,
+    treeCoverLossData,
+    treeCoverLossFiresData
+  };
+};
diff --git a/src/admin/components/ResourceTabs/PolygonReviewTab/components/PolygonDrawer/components/VersionHistory.tsx b/src/admin/components/ResourceTabs/PolygonReviewTab/components/PolygonDrawer/components/VersionHistory.tsx
index aced65845..3dff79d6f 100644
--- a/src/admin/components/ResourceTabs/PolygonReviewTab/components/PolygonDrawer/components/VersionHistory.tsx
+++ b/src/admin/components/ResourceTabs/PolygonReviewTab/components/PolygonDrawer/components/VersionHistory.tsx
@@ -358,10 +358,11 @@ const VersionHistory = ({
             suffixLabelView={true}
             labelClassName="capitalize"
             labelVariant="text-14-light"
-            optionsClassName="!h-[182px] lg:!h-[195px] wide:h-[266px]"
+            optionsClassName="!max-h-[182px] lg:!max-h-[195px] wide:max-h-[266px]"
             placeholder="Select Polygon Version"
             options={polygonVersionData ?? []}
             optionVariant="text-12-light"
+            titleClassname="one-line-text !w-[96%] !text-nowrap"
             defaultValue={[selectPolygonVersion?.uuid ?? selectedPolygon?.uuid] as string[]}
             onChange={e => {
               const polygonVersionData = (data as SitePolygonsDataResponse)?.find(item => item.uuid === e[0]);
diff --git a/src/admin/components/ResourceTabs/PolygonReviewTab/index.tsx b/src/admin/components/ResourceTabs/PolygonReviewTab/index.tsx
index 921264199..9117e6456 100644
--- a/src/admin/components/ResourceTabs/PolygonReviewTab/index.tsx
+++ b/src/admin/components/ResourceTabs/PolygonReviewTab/index.tsx
@@ -26,6 +26,7 @@ import LinearProgressBarMonitored from "@/components/elements/ProgressBar/Linear
 import Table from "@/components/elements/Table/Table";
 import { VARIANT_TABLE_SITE_POLYGON_REVIEW } from "@/components/elements/Table/TableVariants";
 import Text from "@/components/elements/Text/Text";
+import ToolTip from "@/components/elements/Tooltip/Tooltip";
 import Icon from "@/components/extensive/Icon/Icon";
 import { IconNames } from "@/components/extensive/Icon/Icon";
 import ModalAdd from "@/components/extensive/Modal/ModalAdd";
@@ -34,6 +35,7 @@ import { ModalId } from "@/components/extensive/Modal/ModalConst";
 import { useLoading } from "@/context/loaderAdmin.provider";
 import { useMapAreaContext } from "@/context/mapArea.provider";
 import { useModalContext } from "@/context/modal.provider";
+import { useMonitoredDataContext } from "@/context/monitoredData.provider";
 import { useNotificationContext } from "@/context/notification.provider";
 import { SitePolygonDataProvider } from "@/context/sitePolygon.provider";
 import {
@@ -146,6 +148,7 @@ const ContentForApproval = ({
 
 const PolygonReviewTab: FC<IProps> = props => {
   const { isLoading: ctxLoading, record, refetch: refreshEntity } = useShowContext();
+  const { selectPolygonFromMap } = useMonitoredDataContext();
   const [files, setFiles] = useState<UploadedFile[]>([]);
   const [saveFlags, setSaveFlags] = useState<boolean>(false);
   const [polygonFromMap, setPolygonFromMap] = useState<IpolygonFromMap>({ isOpen: false, uuid: "" });
@@ -166,6 +169,12 @@ const PolygonReviewTab: FC<IProps> = props => {
 
   const { openNotification } = useNotificationContext();
 
+  useEffect(() => {
+    if (selectPolygonFromMap?.uuid) {
+      setPolygonFromMap(selectPolygonFromMap);
+      flyToPolygonBounds(selectPolygonFromMap.uuid);
+    }
+  }, [polygonList]);
   const onSave = (geojson: any, record: any) => {
     storePolygon(geojson, record, refetch, setPolygonFromMap, refreshEntity);
   };
@@ -620,7 +629,9 @@ const PolygonReviewTab: FC<IProps> = props => {
                   <div className="w-40 lg:w-48">
                     <Text variant="text-14" className="flex items-center gap-1 text-darkCustom">
                       Site Status
-                      <Icon name={IconNames.IC_INFO} className="h-3.5 w-3.5 text-darkCustom" />
+                      <ToolTip title={""} content={"Site Status"} width="" trigger="click">
+                        <Icon name={IconNames.IC_INFO} className="h-3.5 w-3.5 text-darkCustom" />
+                      </ToolTip>
                     </Text>
                     <Text variant="text-14-bold" className="leading-[normal] text-black">
                       {record?.readable_status}
@@ -629,7 +640,9 @@ const PolygonReviewTab: FC<IProps> = props => {
                   <div className="w-full">
                     <Text variant="text-14" className="mb-2 flex items-center gap-1 text-darkCustom">
                       Polygon Overview
-                      <Icon name={IconNames.IC_INFO} className="h-3.5 w-3.5 text-darkCustom" />
+                      <ToolTip title={""} content={"Polygon Overview"} width="" trigger="click">
+                        <Icon name={IconNames.IC_INFO} className="h-3.5 w-3.5 text-darkCustom" />
+                      </ToolTip>
                     </Text>
                     <If condition={sitePolygonData.length < total}>
                       <Then>
@@ -647,7 +660,9 @@ const PolygonReviewTab: FC<IProps> = props => {
                   <div className="mb-2">
                     <Text variant="text-16-bold" className="mb-2 flex items-center gap-1 text-darkCustom">
                       Add or Edit Polygons
-                      <Icon name={IconNames.IC_INFO} className="h-3.5 w-3.5 text-darkCustom" />
+                      <ToolTip title={""} content={"Add or Edit Polygons"} width="" trigger="click">
+                        <Icon name={IconNames.IC_INFO} className="h-3.5 w-3.5 text-darkCustom" />
+                      </ToolTip>
                     </Text>
                     <Text variant="text-14-light" className="text-darkCustom">
                       Add, remove or edit polygons that are associated to a site. Polygons may be edited in the map
diff --git a/src/admin/components/extensive/Modal/ModalApprove.tsx b/src/admin/components/extensive/Modal/ModalApprove.tsx
index 62f9cea7a..0ce4dfcc1 100644
--- a/src/admin/components/extensive/Modal/ModalApprove.tsx
+++ b/src/admin/components/extensive/Modal/ModalApprove.tsx
@@ -169,9 +169,13 @@ const ModalApprove: FC<ModalApproveProps> = ({
               {content}
             </Text>
           </When>
-          <Text variant="text-14-bold" className="ml-auto flex items-center justify-end gap-2 pr-[76px]">
-            Select All
-            <Checkbox name="Select All" onClick={e => handleSelectAll((e.target as HTMLInputElement).checked)} />
+          <Text variant="text-14-bold" className="ml-auto flex items-center justify-end gap-2">
+            <Checkbox
+              className="flex h-min items-center"
+              name="Select All"
+              onClick={e => handleSelectAll((e.target as HTMLInputElement).checked)}
+            />
+            <span className="text-14-bold leading-[normal]">Select All</span>
           </Text>
         </div>
 
diff --git a/src/admin/modules/projects/components/ProjectShow.tsx b/src/admin/modules/projects/components/ProjectShow.tsx
index aae73d9d2..40fca8a9d 100644
--- a/src/admin/modules/projects/components/ProjectShow.tsx
+++ b/src/admin/modules/projects/components/ProjectShow.tsx
@@ -43,7 +43,8 @@ const ProjectShow = () => {
           <GalleryTab label="Project Gallery" entity="projects" />
           <DocumentTab label="Project Documents" entity="projects" />
           <ChangeRequestsTab entity="projects" singularEntity="project" />
-          <MonitoredTab label="Monitored Data" />
+          {/* <TabbedShowLayout.Tab label="Monitored Data">In Progress</TabbedShowLayout.Tab> */}
+          <MonitoredTab label="Monitored Data" type={"projects"}></MonitoredTab>
           <AuditLogTab entity={AuditLogButtonStates.PROJECT} />
         </TabbedShowLayout>
       </RecordFrameworkProvider>
diff --git a/src/admin/modules/sites/components/SiteShow.tsx b/src/admin/modules/sites/components/SiteShow.tsx
index 287325785..fb0bef090 100644
--- a/src/admin/modules/sites/components/SiteShow.tsx
+++ b/src/admin/modules/sites/components/SiteShow.tsx
@@ -42,7 +42,7 @@ const SiteShow: FC = () => {
           <GalleryTab label="Site Gallery" entity="sites" />
           <DocumentTab label="Site Documents" entity="sites" />
           <ChangeRequestsTab entity="sites" singularEntity="site" />
-          <MonitoredTab label="Monitored Data" />
+          <MonitoredTab label="Monitored Data" type={"sites"}></MonitoredTab>
           <AuditLogTab entity={AuditLogButtonStates.SITE} />
         </TabbedShowLayout>
       </RecordFrameworkProvider>
diff --git a/src/assets/icons/add-button.svg b/src/assets/icons/add-button.svg
new file mode 100644
index 000000000..b2d5c5208
--- /dev/null
+++ b/src/assets/icons/add-button.svg
@@ -0,0 +1,9 @@
+<svg width="40" height="41" viewBox="0 0 40 41" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="1" y="1.5" width="38" height="38" rx="19" stroke="currentColor" stroke-width="2"/>
+<mask id="mask0_5142_8940" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="8" y="8" width="24" height="25">
+<rect x="8" y="8.5" width="24" height="24" fill="#D9D9D9"/>
+</mask>
+<g mask="url(#mask0_5142_8940)">
+<path d="M19 21.5H14C13.7167 21.5 13.4792 21.4042 13.2875 21.2125C13.0958 21.0208 13 20.7833 13 20.5C13 20.2167 13.0958 19.9792 13.2875 19.7875C13.4792 19.5958 13.7167 19.5 14 19.5H19V14.5C19 14.2167 19.0958 13.9792 19.2875 13.7875C19.4792 13.5958 19.7167 13.5 20 13.5C20.2833 13.5 20.5208 13.5958 20.7125 13.7875C20.9042 13.9792 21 14.2167 21 14.5V19.5H26C26.2833 19.5 26.5208 19.5958 26.7125 19.7875C26.9042 19.9792 27 20.2167 27 20.5C27 20.7833 26.9042 21.0208 26.7125 21.2125C26.5208 21.4042 26.2833 21.5 26 21.5H21V26.5C21 26.7833 20.9042 27.0208 20.7125 27.2125C20.5208 27.4042 20.2833 27.5 20 27.5C19.7167 27.5 19.4792 27.4042 19.2875 27.2125C19.0958 27.0208 19 26.7833 19 26.5V21.5Z" fill="currentColor"/>
+</g>
+</svg>
diff --git a/src/assets/icons/edit-ta.svg b/src/assets/icons/edit-ta.svg
new file mode 100644
index 000000000..85d3d0d07
--- /dev/null
+++ b/src/assets/icons/edit-ta.svg
@@ -0,0 +1,8 @@
+<svg width="24" height="25" viewBox="0 0 24 25" fill="none" xmlns="http://www.w3.org/2000/svg">
+<mask id="mask0_5142_8206" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="25" height="25">
+<rect x="0.242188" y="0.722656" width="24" height="24" fill="#D9D9D9"/>
+</mask>
+<g mask="url(#mask0_5142_8206)">
+<path d="M5.24219 19.7227H6.66719L16.4422 9.94766L15.0172 8.52266L5.24219 18.2977V19.7227ZM3.24219 21.7227V17.4727L16.4422 4.29766C16.6422 4.11432 16.863 3.97266 17.1047 3.87266C17.3464 3.77266 17.6005 3.72266 17.8672 3.72266C18.1339 3.72266 18.3922 3.77266 18.6422 3.87266C18.8922 3.97266 19.1089 4.12266 19.2922 4.32266L20.6672 5.72266C20.8672 5.90599 21.013 6.12266 21.1047 6.37266C21.1964 6.62266 21.2422 6.87266 21.2422 7.12266C21.2422 7.38932 21.1964 7.64349 21.1047 7.88516C21.013 8.12682 20.8672 8.34766 20.6672 8.54766L7.49219 21.7227H3.24219ZM15.7172 9.24766L15.0172 8.52266L16.4422 9.94766L15.7172 9.24766Z" fill="currentColor"/>
+</g>
+</svg>
diff --git a/src/assets/icons/new-tag-tree-species.svg b/src/assets/icons/new-tag-tree-species.svg
new file mode 100644
index 000000000..e79ab3b38
--- /dev/null
+++ b/src/assets/icons/new-tag-tree-species.svg
@@ -0,0 +1,8 @@
+<svg width="30" height="31" viewBox="0 0 30 31" fill="none" xmlns="http://www.w3.org/2000/svg">
+<mask id="mask0_5142_10280" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="30" height="31">
+<rect y="0.5" width="30" height="30" fill="#D9D9D9"/>
+</mask>
+<g mask="url(#mask0_5142_10280)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M1.25 9.375C1.25 8.27043 2.14543 7.375 3.25 7.375H26.75C27.8546 7.375 28.75 8.27043 28.75 9.375V21.625C28.75 22.7296 27.8546 23.625 26.75 23.625H3.25C2.14543 23.625 1.25 22.7296 1.25 21.625V9.375ZM2.5 9.625C2.5 9.07272 2.94772 8.625 3.5 8.625H26.5C27.0523 8.625 27.5 9.07272 27.5 9.625V21.375C27.5 21.9273 27.0523 22.375 26.5 22.375H3.5C2.94772 22.375 2.5 21.9273 2.5 21.375V9.625ZM10.4967 12.125V18.9659H9.39442L6.17103 14.3062H6.11425V18.9659H4.875V12.125H5.98398L9.20402 16.7881H9.26414V12.125H10.4967ZM11.5111 12.125V18.9659H15.9871V17.9271H12.7503V16.0599H15.7299V15.021H12.7503V13.1638H15.9604V12.125H11.5111ZM16.3977 12.125L18.3284 18.9659H19.5509L20.9238 14.1659H20.9772L22.3468 18.9659H23.5693L25.5 12.125H24.1672L22.9346 17.1555H22.8745L21.5551 12.125H20.3426L19.0265 17.1521H18.963L17.7305 12.125H16.3977Z" fill="#FF8938"/>
+</g>
+</svg>
diff --git a/src/assets/icons/non-scientific name.svg b/src/assets/icons/non-scientific name.svg
new file mode 100644
index 000000000..7bb70d7f4
--- /dev/null
+++ b/src/assets/icons/non-scientific name.svg	
@@ -0,0 +1,9 @@
+<svg width="30" height="31" viewBox="0 0 30 31" fill="none" xmlns="http://www.w3.org/2000/svg">
+<mask id="mask0_5142_11941" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="-1" width="30" height="31">
+<rect y="-0.125" width="30" height="30" fill="#D9D9D9"/>
+</mask>
+<g mask="url(#mask0_5142_11941)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M24.884 13.6839C23.4888 14.8851 21.6729 15.6112 19.6875 15.6112C15.2865 15.6112 11.7188 12.0434 11.7188 7.64243C11.7188 5.95491 12.2433 4.3899 13.1382 3.10156C11.9637 3.31298 10.9095 3.83604 9.97559 4.67075C8.72493 5.78859 8 7.17759 7.80078 8.83774C6.5612 9.34686 5.57617 10.1603 4.8457 11.2782C4.11523 12.396 3.75 13.619 3.75 14.9471C3.75 16.7844 4.39746 18.3504 5.69238 19.6454C6.9873 20.9403 8.55339 21.5877 10.3906 21.5877H13.0469V25.5721H6.40625C6.02995 25.5721 5.71452 25.6994 5.45996 25.954C5.2054 26.2085 5.07812 26.5239 5.07812 26.9002C5.07812 27.2765 5.2054 27.592 5.45996 27.8465C5.71452 28.1011 6.02995 28.2284 6.40625 28.2284H22.3438C22.7201 28.2284 23.0355 28.1011 23.29 27.8465C23.5446 27.592 23.6719 27.2765 23.6719 26.9002C23.6719 26.5239 23.5446 26.2085 23.29 25.954C23.0355 25.6994 22.7201 25.5721 22.3438 25.5721H15.7031V21.5877H18.3594C20.1966 21.5877 21.7627 20.9403 23.0576 19.6454C24.3525 18.3504 25 16.7844 25 14.9471C25 14.5149 24.9613 14.0939 24.884 13.6839Z" fill="#F89E02"/>
+<path d="M19.9992 11.8123C20.2026 11.8123 20.3734 11.7434 20.5115 11.6058C20.6496 11.4682 20.7187 11.2977 20.7187 11.0943C20.7187 10.891 20.6499 10.7196 20.5124 10.5801C20.3748 10.4408 20.2042 10.3711 20.0008 10.3711C19.7974 10.3711 19.6267 10.4408 19.4885 10.5801C19.3504 10.7196 19.2813 10.891 19.2813 11.0943C19.2813 11.2977 19.3501 11.4682 19.4876 11.6058C19.6252 11.7434 19.7958 11.8123 19.9992 11.8123ZM20 9.2449C20.1955 9.2449 20.3605 9.17762 20.4951 9.04306C20.6295 8.90861 20.6968 8.74363 20.6968 8.54812V3.68215C20.6968 3.48665 20.6295 3.32162 20.4951 3.18706C20.3605 3.0526 20.1955 2.98538 20 2.98538C19.8045 2.98538 19.6395 3.0526 19.5049 3.18706C19.3705 3.32162 19.3032 3.48665 19.3032 3.68215V8.54812C19.3032 8.74363 19.3705 8.90861 19.5049 9.04306C19.6395 9.17762 19.8045 9.2449 20 9.2449ZM20 13.625C19.1331 13.625 18.3198 13.461 17.5599 13.1331C16.7999 12.8052 16.1389 12.3602 15.5768 11.7982C15.0148 11.2361 14.5698 10.5751 14.2419 9.81509C13.914 9.05522 13.75 8.24186 13.75 7.375C13.75 6.50814 13.914 5.69478 14.2419 4.93491C14.5698 4.17494 15.0148 3.51389 15.5768 2.95178C16.1389 2.38976 16.7999 1.9448 17.5599 1.61688C18.3198 1.28896 19.1331 1.125 20 1.125C20.8669 1.125 21.6802 1.28896 22.4401 1.61688C23.2001 1.9448 23.8611 2.38976 24.4232 2.95178C24.9852 3.51389 25.4302 4.17494 25.7581 4.93491C26.086 5.69478 26.25 6.50814 26.25 7.375C26.25 8.24186 26.086 9.05522 25.7581 9.81509C25.4302 10.5751 24.9852 11.2361 24.4232 11.7982C23.8611 12.3602 23.2001 12.8052 22.4401 13.1331C21.6802 13.461 20.8669 13.625 20 13.625Z" fill="#F89E02"/>
+</g>
+</svg>
diff --git a/src/assets/icons/trash-ta.svg b/src/assets/icons/trash-ta.svg
new file mode 100644
index 000000000..551bd1526
--- /dev/null
+++ b/src/assets/icons/trash-ta.svg
@@ -0,0 +1,8 @@
+<svg width="24" height="25" viewBox="0 0 24 25" fill="none" xmlns="http://www.w3.org/2000/svg">
+<mask id="mask0_5142_8207" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="-1" y="0" width="25" height="25">
+<rect x="-0.34375" y="0.25" width="24" height="24" fill="#D9D9D9"/>
+</mask>
+<g mask="url(#mask0_5142_8207)">
+<path d="M6.65625 21.25C6.10625 21.25 5.63542 21.0542 5.24375 20.6625C4.85208 20.2708 4.65625 19.8 4.65625 19.25V6.25H3.65625V4.25H8.65625V3.25H14.6562V4.25H19.6562V6.25H18.6562V19.25C18.6562 19.8 18.4604 20.2708 18.0688 20.6625C17.6771 21.0542 17.2063 21.25 16.6562 21.25H6.65625ZM16.6562 6.25H6.65625V19.25H16.6562V6.25ZM8.65625 17.25H10.6562V8.25H8.65625V17.25ZM12.6562 17.25H14.6562V8.25H12.6562V17.25Z" fill="currentColor"/>
+</g>
+</svg>
diff --git a/src/components/elements/Drawer/Drawer.tsx b/src/components/elements/Drawer/Drawer.tsx
index ac734c19e..dfef681c8 100644
--- a/src/components/elements/Drawer/Drawer.tsx
+++ b/src/components/elements/Drawer/Drawer.tsx
@@ -2,6 +2,7 @@ import classNames from "classnames";
 import React, { ReactNode, useEffect, useState } from "react";
 
 import Icon, { IconNames } from "@/components/extensive/Icon/Icon";
+import { useMonitoredDataContext } from "@/context/monitoredData.provider";
 
 import Button from "../Button/Button";
 import { DRAWER_VARIANT_DEFAULT, DrawerVariant } from "./DrawerVariants";
@@ -29,6 +30,7 @@ const Drawer = (props: DrawerProps) => {
   const [isScrolled, setIsScrolled] = useState(isScrolledDefault);
   const [isScrollingDown, setIsScrollingDown] = useState(isScrolledDefault);
   const [prevScrollPos, setPrevScrollPos] = useState(0);
+  const { setSelectPolygonFromMap } = useMonitoredDataContext();
 
   useEffect(() => {
     const handleScroll = () => {
@@ -70,6 +72,7 @@ const Drawer = (props: DrawerProps) => {
           onClick={() => {
             setIsOpen(false);
             setPolygonFromMap && setPolygonFromMap({ isOpen: false, uuid: "" });
+            setSelectPolygonFromMap?.({ uuid: "", isOpen: false });
           }}
         >
           <Icon name={IconNames.CLEAR} className={classNames("h-5 w-5", variant.iconClassName)} />
diff --git a/src/components/elements/Inputs/AutoCompleteInput/AutoCompleteInput.tsx b/src/components/elements/Inputs/AutoCompleteInput/AutoCompleteInput.tsx
index 57c6b16dc..827ed397d 100644
--- a/src/components/elements/Inputs/AutoCompleteInput/AutoCompleteInput.tsx
+++ b/src/components/elements/Inputs/AutoCompleteInput/AutoCompleteInput.tsx
@@ -1,9 +1,11 @@
 import { Popover, Transition } from "@headlessui/react";
 import { useT } from "@transifex/react";
+import classNames from "classnames";
 import { ChangeEvent, forwardRef, Fragment, Ref, useState } from "react";
 import { Else, If, Then } from "react-if";
 
 import { useDebounce } from "@/hooks/useDebounce";
+import { useValueChanged } from "@/hooks/useValueChanged";
 
 import Text from "../../Text/Text";
 import Input, { InputProps } from "../Input/Input";
@@ -11,13 +13,19 @@ import Input, { InputProps } from "../Input/Input";
 export interface AutoCompleteInputProps extends InputProps {
   onSearch: (query: string) => Promise<string[]>;
   disableAutoComplete?: boolean;
+  classNameMenu?: string;
 }
 
+const SEARCH_RESET = { list: [], query: "" };
+
 //TODO: Bugfix: Users can enter space in this input
 const AutoCompleteInput = forwardRef(
-  ({ onSearch, disableAutoComplete, ...inputProps }: AutoCompleteInputProps, ref?: Ref<HTMLInputElement>) => {
+  (
+    { onSearch, disableAutoComplete, classNameMenu, ...inputProps }: AutoCompleteInputProps,
+    ref?: Ref<HTMLInputElement>
+  ) => {
     const t = useT();
-    const [list, setList] = useState<string[]>([]);
+    const [searchResult, setSearchResult] = useState<{ list: string[]; query: string }>(SEARCH_RESET);
     const [loading, setLoading] = useState(false);
 
     const onSelect = (item: string) => {
@@ -27,35 +35,34 @@ const AutoCompleteInput = forwardRef(
         inputProps.onChange?.({ target: { name: inputProps.name, value: item } } as ChangeEvent<HTMLInputElement>);
       }
 
-      setList([]);
+      // Avoid showing the search result list unless the name changes again.
+      setSearchResult({ list: [], query: item });
     };
 
     const search = useDebounce(async (query: string) => {
+      if (query === searchResult.query) return;
+
       setLoading(true);
 
-      onSearch(query)
-        .then(resp => {
-          setList(resp);
-          setLoading(false);
-        })
-        .catch(() => {
-          setList([]);
-          setLoading(false);
-        });
+      try {
+        setSearchResult({ list: await onSearch(query), query });
+        setLoading(false);
+      } catch {
+        setSearchResult(SEARCH_RESET);
+        setLoading(false);
+      }
     });
 
+    useValueChanged(inputProps.value, () => search(String(inputProps.value ?? "")));
+
     return (
       <Popover as="div" className="w-full">
         <Popover.Button as={Fragment}>
-          <Input
-            {...inputProps}
-            ref={ref}
-            onChangeCapture={e => !disableAutoComplete && search(e.currentTarget.value)}
-          />
+          <Input {...inputProps} ref={ref} />
         </Popover.Button>
 
         <Transition
-          show={list.length > 0 || !!loading}
+          show={searchResult.list.length > 0 || !!loading}
           enter="transition duration-100 ease-out"
           enterFrom="transform scale-95 opacity-0"
           enterTo="transform scale-100 opacity-100"
@@ -63,7 +70,10 @@ const AutoCompleteInput = forwardRef(
           leaveFrom="transform scale-100 opacity-100"
           leaveTo="transform scale-95 opacity-0"
         >
-          <Popover.Panel as="div" className="border-light mt-2 max-h-[230px] overflow-auto rounded-lg">
+          <Popover.Panel
+            as="div"
+            className={classNames("border-light mt-2 max-h-[230px] overflow-auto rounded-lg", classNameMenu)}
+          >
             <If condition={loading}>
               <Then>
                 <Text variant="text-body-600" className="p-3">
@@ -71,7 +81,7 @@ const AutoCompleteInput = forwardRef(
                 </Text>
               </Then>
               <Else>
-                {list.map(item => (
+                {searchResult.list.map(item => (
                   <Text
                     key={item}
                     variant="text-body-600"
diff --git a/src/components/elements/Inputs/AutoCompleteInput/__snapshots__/AutoCompleteInput.stories.storyshot b/src/components/elements/Inputs/AutoCompleteInput/__snapshots__/AutoCompleteInput.stories.storyshot
index 3511a54b0..2c15a558a 100644
--- a/src/components/elements/Inputs/AutoCompleteInput/__snapshots__/AutoCompleteInput.stories.storyshot
+++ b/src/components/elements/Inputs/AutoCompleteInput/__snapshots__/AutoCompleteInput.stories.storyshot
@@ -35,7 +35,6 @@ exports[`Storyshots Components/Elements/Inputs/AutoComplete Default 1`] = `
         className="w-full outline-none transition-all duration-300 ease-in-out focus:ring-transparent px-3 py-[9px] rounded-lg focus:border-primary-500 border border-neutral-200"
         data-headlessui-state=""
         id=":r9:"
-        onChangeCapture={[Function]}
         onClick={[Function]}
         onKeyUp={[Function]}
         onMouseDown={[Function]}
diff --git a/src/components/elements/Inputs/Dropdown/Dropdown.tsx b/src/components/elements/Inputs/Dropdown/Dropdown.tsx
index 224654044..b6815374e 100644
--- a/src/components/elements/Inputs/Dropdown/Dropdown.tsx
+++ b/src/components/elements/Inputs/Dropdown/Dropdown.tsx
@@ -59,6 +59,7 @@ export interface DropdownProps {
   onClear?: () => void;
   onInternalError?: (error: ErrorOption) => void;
   showSelectAll?: boolean;
+  titleClassname?: string;
 }
 const otherKey = "other#value#key";
 const getAllowedValues = (values: OptionValue[], options: Option[]) =>
@@ -208,7 +209,7 @@ const Dropdown = (props: PropsWithChildren<DropdownProps>) => {
               <div className={tw("flex items-center gap-2", variant.titleContainerClassName)}>
                 <Text
                   variant={props.inputVariant ?? "text-14-light"}
-                  className={tw("w-full", variant.titleClassname)}
+                  className={tw("w-full", variant.titleClassname, props.titleClassname)}
                   title={formatSelectedValues(
                     selected,
                     options,
diff --git a/src/components/elements/Inputs/Input/Input.tsx b/src/components/elements/Inputs/Input/Input.tsx
index 9bc551e42..a1ae18309 100644
--- a/src/components/elements/Inputs/Input/Input.tsx
+++ b/src/components/elements/Inputs/Input/Input.tsx
@@ -14,7 +14,7 @@ export interface InputProps
   extends InputWrapperProps,
     Omit<DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "type" | "form"> {
   name: string;
-  variant?: "secondary" | "default" | "login" | "signup" | "monitored";
+  variant?: "secondary" | "default" | "login" | "signup" | "monitored" | "treePlanted";
   formHook?: UseFormReturn<any>;
   clearable?: boolean;
   iconButtonProps?: IconButtonProps;
@@ -112,6 +112,11 @@ const Input = forwardRef(
           true,
         "pl-4": inputProps.type === "number",
         "border-neutral-300": !error
+      },
+      treePlanted: {
+        "py-[7.5px] py-1.5 !w-[100px] text-center border border-blueCustom-700 rounded hover:border-primary hover:shadow-blue-border opacity-60 outline-none text-14-light !font-primary":
+          true,
+        "text-center": inputProps.type === "number"
       }
     };
 
diff --git a/src/components/elements/Inputs/Map/RHFMap.tsx b/src/components/elements/Inputs/Map/RHFMap.tsx
index cd929ad06..2c5bc2301 100644
--- a/src/components/elements/Inputs/Map/RHFMap.tsx
+++ b/src/components/elements/Inputs/Map/RHFMap.tsx
@@ -6,6 +6,7 @@ import InputWrapper, { InputWrapperProps } from "@/components/elements/Inputs/In
 import MapContainer from "@/components/elements/Map-mapbox/Map";
 import { FORM_POLYGONS } from "@/constants/statuses";
 import { useMapAreaContext } from "@/context/mapArea.provider";
+import { useMonitoredDataContext } from "@/context/monitoredData.provider";
 import { SitePolygonDataProvider } from "@/context/sitePolygon.provider";
 import { fetchGetV2TerrafundPolygonBboxUuid, useGetV2TerrafundProjectPolygon } from "@/generated/apiComponents";
 import { SitePolygonsDataResponse } from "@/generated/apiSchemas";
@@ -47,6 +48,7 @@ const RHFMap = ({
   const [polygonDataMap, setPolygonDataMap] = useState<any>({});
   const [polygonFromMap, setPolygonFromMap] = useState<any>(null);
   const { setSiteData } = useMapAreaContext();
+  const { setSelectPolygonFromMap } = useMonitoredDataContext();
 
   const refetchData = () => {
     reloadProjectPolygonData();
@@ -84,6 +86,7 @@ const RHFMap = ({
       if (!projectPolygon?.project_polygon) {
         setPolygonDataMap({ [FORM_POLYGONS]: [] });
         setPolygonFromMap({ isOpen: false, uuid: "" });
+        setSelectPolygonFromMap?.({ uuid: "", isOpen: false });
       } else {
         setBbboxAndZoom();
         setPolygonDataMap({ [FORM_POLYGONS]: [projectPolygon?.project_polygon?.poly_uuid] });
diff --git a/src/components/elements/Inputs/TreeSpeciesInput/TreeSpeciesInput.tsx b/src/components/elements/Inputs/TreeSpeciesInput/TreeSpeciesInput.tsx
index ca047e0cd..01ef90959 100644
--- a/src/components/elements/Inputs/TreeSpeciesInput/TreeSpeciesInput.tsx
+++ b/src/components/elements/Inputs/TreeSpeciesInput/TreeSpeciesInput.tsx
@@ -1,19 +1,27 @@
 import { useT } from "@transifex/react";
-import { remove } from "lodash";
-import { Fragment, KeyboardEvent, useCallback, useId, useRef } from "react";
+import classNames from "classnames";
+import { isEmpty, remove } from "lodash";
+import { Fragment, KeyboardEvent, useCallback, useId, useMemo, useRef, useState } from "react";
 import { FieldError, FieldErrors } from "react-hook-form";
-import { When } from "react-if";
+import { Else, If, Then, When } from "react-if";
 import { v4 as uuidv4 } from "uuid";
 
-import { IconNames } from "@/components/extensive/Icon/Icon";
+import { useAutocompleteSearch } from "@/components/elements/Inputs/TreeSpeciesInput/useAutocompleteSearch";
+import Icon, { IconNames } from "@/components/extensive/Icon/Icon";
 import List from "@/components/extensive/List/List";
+import { ModalId } from "@/components/extensive/Modal/ModalConst";
+import { EstablishmentEntityType, useEstablishmentTrees } from "@/connections/EstablishmentTrees";
+import { useEntityContext } from "@/context/entity.provider";
+import { useModalContext } from "@/context/modal.provider";
 import { useDebounce } from "@/hooks/useDebounce";
+import { isReportModelName } from "@/types/common";
 import { updateArrayState } from "@/utils/array";
 
 import Button from "../../Button/Button";
 import ErrorMessage from "../../ErrorMessage/ErrorMessage";
 import IconButton from "../../IconButton/IconButton";
 import Text from "../../Text/Text";
+import AutoCompleteInput from "../AutoCompleteInput/AutoCompleteInput";
 import Input from "../Input/Input";
 import InputWrapper, { InputWrapperProps } from "../InputElements/InputWrapper";
 
@@ -21,7 +29,6 @@ export interface TreeSpeciesInputProps extends Omit<InputWrapperProps, "error">
   title: string;
   buttonCaptionSuffix: string;
   withNumbers?: boolean;
-  withTreeSearch?: boolean;
   value: TreeSpeciesValue[];
   onChange: (value: any[]) => void;
   clearErrors: () => void;
@@ -31,15 +38,84 @@ export interface TreeSpeciesInputProps extends Omit<InputWrapperProps, "error">
   error?: FieldErrors[];
 }
 
-export type TreeSpeciesValue = { uuid?: string; name?: string; amount?: number };
+export type TreeSpeciesValue = { uuid?: string; name?: string; taxon_id?: string; amount?: number };
+
+const NonScientificConfirmationModal = ({ onConfirm }: { onConfirm: () => void }) => {
+  const t = useT();
+  const { closeModal } = useModalContext();
+
+  return (
+    <div className="margin-4 z-50 m-auto flex max-h-full flex-col items-center justify-start overflow-y-auto rounded-lg border-2 border-neutral-100 bg-white">
+      <div className="flex w-full items-center justify-center gap-1 border-b-2 border-neutral-100 py-1">
+        <Icon name={IconNames.EXCLAMATION_CIRCLE_FILL} className="min-h-4 min-w-4 mb-1 h-4 w-4 text-tertiary-600" />
+        <Text variant="text-16-semibold" className="mb-1 text-blueCustom-700">
+          {t("Your input is a not a scientific name")}
+        </Text>
+      </div>
+      <div className="w-full p-4">
+        <div className="w-full rounded-lg border border-dashed bg-neutral-250 p-2">
+          <div className="flex items-center gap-1">
+            <Text variant="text-14-light" className="text-blueCustom-700">
+              {t("You can add this species, but it will be pending review from Admin.")}
+            </Text>
+          </div>
+        </div>
+        <div className="mt-4 flex w-full justify-end gap-3">
+          <Button variant="secondary" onClick={() => closeModal(ModalId.ERROR_MODAL)}>
+            {t("CANCEL")}
+          </Button>
+          <Button
+            variant="primary"
+            onClick={() => {
+              closeModal(ModalId.ERROR_MODAL);
+              onConfirm();
+            }}
+          >
+            {t("CONFIRM")}
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+};
 
 const TreeSpeciesInput = (props: TreeSpeciesInputProps) => {
   const id = useId();
   const t = useT();
   const lastInputRef = useRef<HTMLInputElement>(null);
+  const autoCompleteRef = useRef<HTMLInputElement>(null);
+
+  const [valueAutoComplete, setValueAutoComplete] = useState("");
+  const [searchResult, setSearchResult] = useState<string[]>();
+  const [editIndex, setEditIndex] = useState<string | null>(null);
+  const [deleteIndex, setDeleteIndex] = useState<string | null>(null);
+  const [editValue, setEditValue] = useState<TreeSpeciesValue | null>(null);
+  const refPlanted = useRef<HTMLDivElement>(null);
+  const refTreeSpecies = useRef<HTMLDivElement>(null);
+  const { openModal } = useModalContext();
+
+  const { autocompleteSearch, findTaxonId } = useAutocompleteSearch();
 
   const { onChange, value, clearErrors, collection } = props;
 
+  const { entityUuid, entityName } = useEntityContext();
+  const isEntity = entityName != null && entityUuid != null;
+  const isReport = isEntity && isReportModelName(entityName);
+  const handleBaseEntityTrees = isReport || (isEntity && ["sites", "nurseries"].includes(entityName));
+
+  const entity = (handleBaseEntityTrees ? entityName : undefined) as EstablishmentEntityType;
+  const uuid = handleBaseEntityTrees ? entityUuid : undefined;
+  const [, { establishmentTrees, previousPlantingCounts }] = useEstablishmentTrees({ entity, uuid });
+
+  const totalWithPrevious = useMemo(
+    () =>
+      props.value.reduce(
+        (total, { name, amount }) => total + (amount ?? 0) + (previousPlantingCounts?.[name ?? ""] ?? 0),
+        0
+      ),
+    [previousPlantingCounts, props.value]
+  );
+
   const handleCreate = useDebounce(
     useCallback(
       (treeValue: TreeSpeciesValue) => {
@@ -73,9 +149,50 @@ const TreeSpeciesInput = (props: TreeSpeciesInputProps) => {
 
   const addValue = (e: React.MouseEvent<HTMLElement> | KeyboardEvent<HTMLInputElement>) => {
     e.preventDefault();
-    if (!props.error) {
-      handleCreate?.({ uuid: uuidv4(), name: undefined, amount: undefined });
-      lastInputRef.current && lastInputRef.current.focus();
+    if (props.error) return;
+
+    const taxonId = findTaxonId(valueAutoComplete);
+
+    const doAdd = () => {
+      handleCreate?.({
+        uuid: uuidv4(),
+        name: valueAutoComplete,
+        taxon_id: taxonId,
+        amount: props.withNumbers ? 0 : undefined
+      });
+
+      setValueAutoComplete("");
+      lastInputRef.current?.focus();
+    };
+
+    if (!isEmpty(searchResult) && taxonId == null) {
+      // In this case the use had valid values to choose from, but decided to add a value that isn't
+      // on the list, so they haven't been shown the warning yet.
+      openModal(ModalId.ERROR_MODAL, <NonScientificConfirmationModal onConfirm={doAdd} />);
+    } else {
+      doAdd();
+    }
+  };
+
+  const updateValue = () => {
+    const taxonId = findTaxonId(valueAutoComplete);
+
+    const doUpdate = () => {
+      setEditIndex(null);
+
+      handleUpdate({
+        ...editValue,
+        name: valueAutoComplete,
+        taxon_id: findTaxonId(valueAutoComplete)
+      });
+
+      setValueAutoComplete("");
+    };
+
+    if (!isEmpty(searchResult) && taxonId == null) {
+      openModal(ModalId.ERROR_MODAL, <NonScientificConfirmationModal onConfirm={doUpdate} />);
+    } else {
+      doUpdate();
     }
   };
 
@@ -88,78 +205,239 @@ const TreeSpeciesInput = (props: TreeSpeciesInputProps) => {
   return (
     <InputWrapper
       inputId={id}
-      label={props.label}
+      label={"ADD TREE SPECIES"}
       description={props.description}
       containerClassName={props.containerClassName}
       required={props.required}
       feedbackRequired={props.feedbackRequired}
     >
       <div>
-        <div className="mt-8 mb-2 flex justify-between">
-          <Text variant="text-body-900" className="uppercase">
-            {props.title} ({props.value.length})
+        {handleBaseEntityTrees && (
+          <div className="text-12 flex w-[66%] gap-1 rounded border border-tertiary-80 bg-tertiary-50 p-2">
+            <Icon name={IconNames.EXCLAMATION_CIRCLE_FILL} className="min-h-4 min-w-4 h-4 w-4 text-tertiary-600" />
+            {t(
+              "If you would like to add a species not included on the original Restoration Project, it will be flagged to the admin as new information pending review."
+            )}
+          </div>
+        )}
+        <div className="mb-2 mt-8">
+          <Text variant="text-14-light" className="text-black">
+            {t("Scientific Name:")}
           </Text>
-          <When condition={props.withNumbers}>
-            <Text variant="text-body-900" className="uppercase">
-              {t(`Total Count: ({number})`, { number: props.value.reduce((total, v) => total + (v.amount || 0), 0) })}
+          <div className="mt-3 flex items-start gap-3">
+            <div className="relative w-[40%]">
+              <AutoCompleteInput
+                ref={autoCompleteRef}
+                name="treeSpecies"
+                classNameMenu="bg-white z-10 w-full"
+                type="text"
+                placeholder={t("Start typing")}
+                value={valueAutoComplete}
+                onChange={e => setValueAutoComplete(e.target.value)}
+                onSearch={async search => {
+                  const result = await autocompleteSearch(search);
+                  setSearchResult(result);
+                  return result;
+                }}
+              />
+              <When condition={valueAutoComplete.length > 0}>
+                <button onClick={() => setValueAutoComplete("")} className="absolute right-4 top-4 ">
+                  <Icon name={IconNames.CLEAR} className="min-h-3 min-w-3 h-3 w-3" />
+                </button>
+              </When>
+            </div>
+            <If condition={!editIndex}>
+              <Then>
+                <button onClick={addValue} disabled={valueAutoComplete.length < 1}>
+                  <Icon
+                    name={IconNames.IC_ADD_BUTTON}
+                    className={classNames("h-10 w-10 text-neutral-500 hover:text-primary", {
+                      "hover:!text-red": valueAutoComplete.length < 1,
+                      "cursor-not-allowed": valueAutoComplete.length < 1
+                    })}
+                  />
+                </button>
+              </Then>
+              <Else>
+                <Button onClick={updateValue} variant="secondary">
+                  {t("Save")}
+                </Button>
+                <Button
+                  onClick={() => {
+                    setEditIndex(null);
+                    setValueAutoComplete("");
+                  }}
+                  variant="secondary"
+                >
+                  {t("Cancel")}
+                </Button>
+              </Else>
+            </If>
+          </div>
+        </div>
+        <When condition={!isEmpty(valueAutoComplete) && searchResult != null && isEmpty(searchResult)}>
+          <div className="w-[40%] rounded-lg border border-primary bg-neutral-250 p-2">
+            <Text variant="text-14-semibold" className="mb-1 text-blueCustom-700">
+              {t("No matches available")}
+            </Text>
+            <div className="flex items-center gap-1">
+              <Icon name={IconNames.EXCLAMATION_CIRCLE_FILL} className="min-h-4 min-w-4 h-4 w-4 text-tertiary-600" />
+              <Text variant="text-14-light" className="text-blueCustom-700">
+                {t("You can add this species, but it will be pending review from Admin.")}
+              </Text>
+            </div>
+          </div>
+        </When>
+        <div className="mb-1 mt-9 flex gap-6 border-b pb-4">
+          <div className={classNames({ "w-[75%]": !isReport, "w-[50%]": isReport })} ref={refTreeSpecies}>
+            <Text variant="text-14-bold" className="uppercase text-black">
+              {props.title}
+            </Text>
+            <Text variant="text-20-bold" className="text-primary">
+              {props.value.length}
             </Text>
+          </div>
+          <div className={classNames({ "border-r pr-6": isReport })} ref={refPlanted}>
+            <Text variant="text-14-bold" className="uppercase text-black">
+              {isReport ? t("SPECIES PLANTED:") : t("TREES TO BE PLANTED:")}
+            </Text>
+            <Text variant="text-20-bold" className="text-primary">
+              {props.withNumbers ? props.value.reduce((total, v) => total + (v.amount || 0), 0).toLocaleString() : "0"}
+            </Text>
+          </div>
+          <When condition={isReport}>
+            <div>
+              <Text variant="text-14-bold" className="uppercase text-black">
+                {t("TOTAL PLANTED TO DATE:")}
+              </Text>
+              <Text variant="text-20-bold" className="text-primary">
+                {totalWithPrevious.toLocaleString()}
+              </Text>
+            </div>
           </When>
         </div>
-
         <List
           as="div"
-          className="max-h-[300px] overflow-y-auto"
+          className=""
           itemAs={Fragment}
           uniqueId={"uuid"}
           items={props.value}
           render={(value, index) => (
-            <div className="relative flex w-full">
-              <Input
-                ref={lastInputRef}
-                name="name"
-                type="text"
-                variant="secondary"
-                defaultValue={value.name}
-                onChange={e => handleUpdate({ ...value, name: e.target.value })}
-                placeholder={t("Species Name")}
-                error={props.error?.[index]?.name ? ({} as FieldError) : undefined}
-                onKeyDownCapture={onKeyDownCapture}
-                containerClassName="flex-1"
-              />
-              <When condition={props.withNumbers}>
+            <div
+              className={classNames("relative flex w-full items-center gap-6 border-b border-neutral-450 py-2", {
+                "blur-sm": editIndex && editIndex !== value.uuid
+              })}
+            >
+              <When condition={deleteIndex === value.uuid}>
+                <div className="absolute right-0 top-0 z-10 flex h-full w-full items-center justify-between bg-neutral-250 px-4 shadow-monitored">
+                  <Text variant="text-16" className="text-blueCustom-700">
+                    {t(`Are you sure you want to delete “${value.name}”?`)}
+                  </Text>
+                  <div className="flex gap-3">
+                    <button
+                      onClick={() => {
+                        setDeleteIndex(null);
+                        handleDelete(props.value?.[index]?.uuid);
+                      }}
+                      className="text-16 text-error-500 underline underline-offset-2"
+                    >
+                      {t("Confirm")}
+                    </button>
+                    <button onClick={() => setDeleteIndex(null)} className="text-16 text-blueCustom-700">
+                      {t("Cancel")}
+                    </button>
+                  </div>
+                </div>
+              </When>
+              <When condition={editIndex === value.uuid}>
+                <div className="absolute right-0 top-0 z-10 flex h-full w-full items-center gap-1 bg-neutral-250 px-4 shadow-monitored">
+                  <Icon name={IconNames.EDIT_TA} className="min-h-6 min-w-6 h-6 w-6 text-primary" />
+                  <Text variant="text-16" className="text-blueCustom-700">
+                    {t("Editing: {name}", { name: value.name })}
+                  </Text>
+                </div>
+              </When>
+              <div
+                style={
+                  refTreeSpecies
+                    ? {
+                        width: `${refTreeSpecies.current?.clientWidth}px`,
+                        minWidth: `${refTreeSpecies.current?.clientWidth}px`
+                      }
+                    : {}
+                }
+              >
+                <div className="flex items-center gap-1">
+                  <When condition={value.taxon_id == null}>
+                    <div title={t("Non-Scientific Name")}>
+                      <Icon name={IconNames.NON_SCIENTIFIC_NAME} className="min-h-8 min-w-8 h-8 w-8" />
+                    </div>
+                  </When>
+                  <When condition={establishmentTrees != null && !establishmentTrees.includes(value.name ?? "")}>
+                    <div title={t("New Species (not used in establishment)")}>
+                      <Icon name={IconNames.NEW_TAG_TREE_SPECIES} className="min-h-8 min-w-8 h-8 w-8" />
+                    </div>
+                  </When>
+                  <Text variant="text-14-light" className="text-black ">
+                    {t(value.name)}
+                  </Text>
+                </div>
+              </div>
+              <div
+                className=""
+                style={
+                  props.withNumbers
+                    ? {
+                        width: `${refPlanted.current?.clientWidth}px`
+                      }
+                    : !props.withNumbers
+                    ? {
+                        width: `${refPlanted.current?.clientWidth}px`,
+                        minWidth: `${refPlanted.current?.clientWidth}px`
+                      }
+                    : {}
+                }
+              >
                 <Input
                   name="amount"
                   type="number"
-                  variant="secondary"
-                  defaultValue={value.amount}
-                  placeholder={t("Enter value")}
+                  variant="treePlanted"
+                  defaultValue={props.withNumbers ? value.amount : ""}
+                  placeholder={t("0")}
                   error={props.error?.[index]?.amount ? ({} as FieldError) : undefined}
-                  onChange={e => handleUpdate({ ...value, amount: +e.target.value })}
+                  onChange={e => (props.withNumbers ? handleUpdate({ ...value, amount: +e.target.value }) : {})}
                   onKeyDownCapture={onKeyDownCapture}
-                  containerClassName="flex-3"
+                  containerClassName=""
                 />
+              </div>
+              <When condition={isReport}>
+                <Text variant="text-14-light" className="text-black ">
+                  {(previousPlantingCounts?.[value.name ?? ""] ?? 0).toLocaleString()}
+                </Text>
               </When>
-              <IconButton
-                iconProps={{ name: IconNames.MINUS_CIRCLE, width: 22 }}
-                className="absolute right-0 top-3"
-                onClick={() => handleDelete(props.value?.[index]?.uuid)}
-              />
+              <div className="flex flex-1 justify-end gap-6">
+                <IconButton
+                  iconProps={{ name: IconNames.EDIT_TA, width: 24 }}
+                  className="text-blueCustom-700 hover:text-primary"
+                  onClick={() => {
+                    setValueAutoComplete(value.name ?? "");
+                    setEditIndex(value.uuid ?? null);
+                    setEditValue(value);
+                    autoCompleteRef.current?.focus();
+                  }}
+                />
+                <IconButton
+                  iconProps={{ name: IconNames.TRASH_TA, width: 24 }}
+                  className="text-blueCustom-700 hover:text-primary"
+                  onClick={() => setDeleteIndex(value.uuid ?? null)}
+                />
+              </div>
             </div>
           )}
         />
         <When condition={!!props.error}>
           <ErrorMessage error={{ message: t("One or more values are missing"), type: "required" }} className="mt-5" />
         </When>
-        <Button
-          variant="secondary"
-          onClick={addValue}
-          className="mt-4 w-fit"
-          iconProps={{ name: IconNames.PLUS_THICK, width: 12 }}
-        >
-          {props.value.length > 0
-            ? t(`Add Another {suffix}`, { suffix: props.buttonCaptionSuffix })
-            : t("Add {suffix}", { suffix: props.buttonCaptionSuffix })}
-        </Button>
       </div>
     </InputWrapper>
   );
diff --git a/src/components/elements/Inputs/TreeSpeciesInput/__snapshots__/TreeSpeciesInput.stories.storyshot b/src/components/elements/Inputs/TreeSpeciesInput/__snapshots__/TreeSpeciesInput.stories.storyshot
index 84810eee2..9810e81fc 100644
--- a/src/components/elements/Inputs/TreeSpeciesInput/__snapshots__/TreeSpeciesInput.stories.storyshot
+++ b/src/components/elements/Inputs/TreeSpeciesInput/__snapshots__/TreeSpeciesInput.stories.storyshot
@@ -9,7 +9,7 @@ exports[`Storyshots Components/Elements/Inputs/TreeSpeciesInput Default 1`] = `
     data-testid="txt"
     htmlFor=":r23:"
   >
-    Tree Species Grown *
+    ADD TREE SPECIES *
   </label>
   <p
     className="text-body-400 with-inner-html"
@@ -23,76 +23,199 @@ exports[`Storyshots Components/Elements/Inputs/TreeSpeciesInput Default 1`] = `
   />
   <div>
     <div
-      className="mt-8 mb-2 flex justify-between"
+      className="mb-2 mt-8"
     >
       <p
-        className="uppercase text-body-900"
+        className="text-black text-14-light"
         data-testid="txt"
       >
-         (
-        1
-        )
+        Scientific Name:
       </p>
-    </div>
-    <div
-      className="max-h-[300px] overflow-y-auto"
-    >
       <div
-        className="relative flex w-full"
+        className="mt-3 flex items-start gap-3"
       >
         <div
-          className="flex-1 relative space-y-2"
+          className="relative w-[40%]"
         >
           <div
-            className="relative"
+            className="w-full"
+            data-headlessui-state=""
           >
-            <input
-              aria-describedby=":r24:-description"
-              aria-invalid={false}
-              className="w-full outline-none transition-all duration-300 ease-in-out focus:ring-transparent border-0 border-b py-[10px] px-0 border-b-neutral-400"
-              defaultValue="Test"
-              id=":r24:"
-              name="name"
-              onChange={[Function]}
-              onKeyDownCapture={[Function]}
-              placeholder="Species Name"
-              type="text"
-            />
+            <div
+              className="relative space-y-2"
+            >
+              <div
+                className="relative"
+              >
+                <input
+                  aria-describedby=":r26:-description"
+                  aria-expanded={false}
+                  aria-invalid={false}
+                  className="w-full outline-none transition-all duration-300 ease-in-out focus:ring-transparent px-3 py-[9px] rounded-lg focus:border-primary-500 border border-neutral-200"
+                  data-headlessui-state=""
+                  id=":r26:"
+                  name="treeSpecies"
+                  onChange={[Function]}
+                  onClick={[Function]}
+                  onKeyUp={[Function]}
+                  onMouseDown={[Function]}
+                  placeholder="Start typing"
+                  type="text"
+                  value=""
+                />
+              </div>
+            </div>
           </div>
         </div>
         <button
-          className="flex items-center justify-center rounded-full hover:bg-opacity-60 absolute right-0 top-3"
+          disabled={true}
           onClick={[Function]}
         >
           <div
             style={
               Object {
                 "height": undefined,
-                "width": 22,
+                "width": 24,
               }
             }
           />
         </button>
       </div>
     </div>
-    <button
-      className="bg-white border border-neutral-1000 hover:border-primary-500 disabled:border-neutral-1000 py-[10.5px] rounded-md px-4 uppercase disabled:bg-neutral-300 disabled:text-neutral-800 transition whitespace-nowrap text-black min-h-10 flex items-center justify-center gap-1.5 tracking-wide w-fit-content mt-4 w-fit"
-      onClick={[Function]}
+    <div
+      className="mb-1 mt-9 flex gap-6 border-b pb-4"
     >
       <div
-        style={
-          Object {
-            "height": undefined,
-            "width": 12,
-          }
-        }
-      />
-      <span
-        className="flex items-center text-bold-caption-200 !leading-[normal]"
+        className="w-[75%]"
+      >
+        <p
+          className="uppercase text-black text-14-bold"
+          data-testid="txt"
+        />
+        <p
+          className="text-primary text-20-bold"
+          data-testid="txt"
+        >
+          1
+        </p>
+      </div>
+      <div
+        className=""
+      >
+        <p
+          className="uppercase text-black text-14-bold"
+          data-testid="txt"
+        >
+          TREES TO BE PLANTED:
+        </p>
+        <p
+          className="text-primary text-20-bold"
+          data-testid="txt"
+        >
+          0
+        </p>
+      </div>
+    </div>
+    <div
+      className=""
+    >
+      <div
+        className="relative flex w-full items-center gap-6 border-b border-neutral-450 py-2"
       >
-        Add Another undefined
-      </span>
-    </button>
+        <div
+          style={
+            Object {
+              "minWidth": "undefinedpx",
+              "width": "undefinedpx",
+            }
+          }
+        >
+          <div
+            className="flex items-center gap-1"
+          >
+            <div
+              title="Non-Scientific Name"
+            >
+              <div
+                style={
+                  Object {
+                    "height": undefined,
+                    "width": 24,
+                  }
+                }
+              />
+            </div>
+            <p
+              className="text-black  text-14-light"
+              data-testid="txt"
+            >
+              Test
+            </p>
+          </div>
+        </div>
+        <div
+          className=""
+          style={
+            Object {
+              "minWidth": "undefinedpx",
+              "width": "undefinedpx",
+            }
+          }
+        >
+          <div
+            className="relative space-y-2"
+          >
+            <div
+              className="relative"
+            >
+              <input
+                aria-describedby=":r27:-description"
+                aria-invalid={false}
+                className="w-full outline-none transition-all duration-300 ease-in-out focus:ring-transparent py-[7.5px] py-1.5 !w-[100px] text-center border border-blueCustom-700 rounded hover:border-primary hover:shadow-blue-border opacity-60 outline-none text-14-light !font-primary text-center"
+                defaultValue=""
+                id=":r27:"
+                name="amount"
+                onChange={[Function]}
+                onKeyDown={[Function]}
+                onKeyDownCapture={[Function]}
+                placeholder="0"
+                type="number"
+              />
+            </div>
+          </div>
+        </div>
+        <div
+          className="flex flex-1 justify-end gap-6"
+        >
+          <button
+            className="flex items-center justify-center rounded-full hover:bg-opacity-60 text-blueCustom-700 hover:text-primary"
+            onClick={[Function]}
+          >
+            <div
+              style={
+                Object {
+                  "height": undefined,
+                  "width": 24,
+                }
+              }
+            />
+          </button>
+          <button
+            className="flex items-center justify-center rounded-full hover:bg-opacity-60 text-blueCustom-700 hover:text-primary"
+            onClick={[Function]}
+          >
+            <div
+              style={
+                Object {
+                  "height": undefined,
+                  "width": 24,
+                }
+              }
+            />
+          </button>
+        </div>
+      </div>
+    </div>
   </div>
 </div>
 `;
@@ -104,9 +227,9 @@ exports[`Storyshots Components/Elements/Inputs/TreeSpeciesInput With Number 1`]
   <label
     className="mr-2 inline uppercase text-bold-body-300"
     data-testid="txt"
-    htmlFor=":r25:"
+    htmlFor=":r28:"
   >
-    Tree Species Grown *
+    ADD TREE SPECIES *
   </label>
   <p
     className="text-body-400 with-inner-html"
@@ -116,107 +239,202 @@ exports[`Storyshots Components/Elements/Inputs/TreeSpeciesInput With Number 1`]
       }
     }
     data-testid="txt"
-    id=":r25:-description"
+    id=":r28:-description"
   />
   <div>
     <div
-      className="mt-8 mb-2 flex justify-between"
+      className="mb-2 mt-8"
     >
       <p
-        className="uppercase text-body-900"
+        className="text-black text-14-light"
         data-testid="txt"
       >
-         (
-        1
-        )
+        Scientific Name:
       </p>
-      <p
-        className="uppercase text-body-900"
-        data-testid="txt"
-      >
-        Total Count: (23)
-      </p>
-    </div>
-    <div
-      className="max-h-[300px] overflow-y-auto"
-    >
       <div
-        className="relative flex w-full"
+        className="mt-3 flex items-start gap-3"
       >
         <div
-          className="flex-1 relative space-y-2"
+          className="relative w-[40%]"
         >
           <div
-            className="relative"
+            className="w-full"
+            data-headlessui-state=""
           >
-            <input
-              aria-describedby=":r26:-description"
-              aria-invalid={false}
-              className="w-full outline-none transition-all duration-300 ease-in-out focus:ring-transparent border-0 border-b py-[10px] px-0 border-b-neutral-400"
-              defaultValue="Test"
-              id=":r26:"
-              name="name"
-              onChange={[Function]}
-              onKeyDownCapture={[Function]}
-              placeholder="Species Name"
-              type="text"
-            />
-          </div>
-        </div>
-        <div
-          className="flex-3 relative space-y-2"
-        >
-          <div
-            className="relative"
-          >
-            <input
-              aria-describedby=":r27:-description"
-              aria-invalid={false}
-              className="w-full outline-none transition-all duration-300 ease-in-out focus:ring-transparent border-0 border-b py-[10px] px-0 pl-4 border-b-neutral-400"
-              defaultValue={23}
-              id=":r27:"
-              name="amount"
-              onChange={[Function]}
-              onKeyDown={[Function]}
-              onKeyDownCapture={[Function]}
-              placeholder="Enter value"
-              type="number"
-            />
+            <div
+              className="relative space-y-2"
+            >
+              <div
+                className="relative"
+              >
+                <input
+                  aria-describedby=":r2b:-description"
+                  aria-expanded={false}
+                  aria-invalid={false}
+                  className="w-full outline-none transition-all duration-300 ease-in-out focus:ring-transparent px-3 py-[9px] rounded-lg focus:border-primary-500 border border-neutral-200"
+                  data-headlessui-state=""
+                  id=":r2b:"
+                  name="treeSpecies"
+                  onChange={[Function]}
+                  onClick={[Function]}
+                  onKeyUp={[Function]}
+                  onMouseDown={[Function]}
+                  placeholder="Start typing"
+                  type="text"
+                  value=""
+                />
+              </div>
+            </div>
           </div>
         </div>
         <button
-          className="flex items-center justify-center rounded-full hover:bg-opacity-60 absolute right-0 top-3"
+          disabled={true}
           onClick={[Function]}
         >
           <div
             style={
               Object {
                 "height": undefined,
-                "width": 22,
+                "width": 24,
               }
             }
           />
         </button>
       </div>
     </div>
-    <button
-      className="bg-white border border-neutral-1000 hover:border-primary-500 disabled:border-neutral-1000 py-[10.5px] rounded-md px-4 uppercase disabled:bg-neutral-300 disabled:text-neutral-800 transition whitespace-nowrap text-black min-h-10 flex items-center justify-center gap-1.5 tracking-wide w-fit-content mt-4 w-fit"
-      onClick={[Function]}
+    <div
+      className="mb-1 mt-9 flex gap-6 border-b pb-4"
     >
       <div
-        style={
-          Object {
-            "height": undefined,
-            "width": 12,
-          }
-        }
-      />
-      <span
-        className="flex items-center text-bold-caption-200 !leading-[normal]"
+        className="w-[75%]"
       >
-        Add Another undefined
-      </span>
-    </button>
+        <p
+          className="uppercase text-black text-14-bold"
+          data-testid="txt"
+        />
+        <p
+          className="text-primary text-20-bold"
+          data-testid="txt"
+        >
+          1
+        </p>
+      </div>
+      <div
+        className=""
+      >
+        <p
+          className="uppercase text-black text-14-bold"
+          data-testid="txt"
+        >
+          TREES TO BE PLANTED:
+        </p>
+        <p
+          className="text-primary text-20-bold"
+          data-testid="txt"
+        >
+          23
+        </p>
+      </div>
+    </div>
+    <div
+      className=""
+    >
+      <div
+        className="relative flex w-full items-center gap-6 border-b border-neutral-450 py-2"
+      >
+        <div
+          style={
+            Object {
+              "minWidth": "undefinedpx",
+              "width": "undefinedpx",
+            }
+          }
+        >
+          <div
+            className="flex items-center gap-1"
+          >
+            <div
+              title="Non-Scientific Name"
+            >
+              <div
+                style={
+                  Object {
+                    "height": undefined,
+                    "width": 24,
+                  }
+                }
+              />
+            </div>
+            <p
+              className="text-black  text-14-light"
+              data-testid="txt"
+            >
+              Test
+            </p>
+          </div>
+        </div>
+        <div
+          className=""
+          style={
+            Object {
+              "width": "undefinedpx",
+            }
+          }
+        >
+          <div
+            className="relative space-y-2"
+          >
+            <div
+              className="relative"
+            >
+              <input
+                aria-describedby=":r2c:-description"
+                aria-invalid={false}
+                className="w-full outline-none transition-all duration-300 ease-in-out focus:ring-transparent py-[7.5px] py-1.5 !w-[100px] text-center border border-blueCustom-700 rounded hover:border-primary hover:shadow-blue-border opacity-60 outline-none text-14-light !font-primary text-center"
+                defaultValue={23}
+                id=":r2c:"
+                name="amount"
+                onChange={[Function]}
+                onKeyDown={[Function]}
+                onKeyDownCapture={[Function]}
+                placeholder="0"
+                type="number"
+              />
+            </div>
+          </div>
+        </div>
+        <div
+          className="flex flex-1 justify-end gap-6"
+        >
+          <button
+            className="flex items-center justify-center rounded-full hover:bg-opacity-60 text-blueCustom-700 hover:text-primary"
+            onClick={[Function]}
+          >
+            <div
+              style={
+                Object {
+                  "height": undefined,
+                  "width": 24,
+                }
+              }
+            />
+          </button>
+          <button
+            className="flex items-center justify-center rounded-full hover:bg-opacity-60 text-blueCustom-700 hover:text-primary"
+            onClick={[Function]}
+          >
+            <div
+              style={
+                Object {
+                  "height": undefined,
+                  "width": 24,
+                }
+              }
+            />
+          </button>
+        </div>
+      </div>
+    </div>
   </div>
 </div>
 `;
diff --git a/src/components/elements/Inputs/TreeSpeciesInput/useAutocompleteSearch.ts b/src/components/elements/Inputs/TreeSpeciesInput/useAutocompleteSearch.ts
new file mode 100644
index 000000000..a49376af8
--- /dev/null
+++ b/src/components/elements/Inputs/TreeSpeciesInput/useAutocompleteSearch.ts
@@ -0,0 +1,71 @@
+import { isEmpty } from "lodash";
+import { useCallback, useMemo } from "react";
+
+import { getAccessToken } from "@/admin/apiProvider/utils/token";
+import { resolveUrl } from "@/generated/v3/utils";
+
+type ScientificName = { taxonId: string; scientificName: string };
+
+async function searchRequest(search: string) {
+  const headers: HeadersInit = { "Content-Type": "application/json" };
+  const accessToken = typeof window !== "undefined" && getAccessToken();
+  if (accessToken != null) headers.Authorization = `Bearer ${accessToken}`;
+
+  const url = resolveUrl(`/trees/v3/scientific-names`, { search });
+  const response = await fetch(url, { headers });
+  if (!response.ok) {
+    let error;
+    try {
+      error = {
+        statusCode: response.status,
+        ...(await response.json())
+      };
+    } catch (e) {
+      error = { statusCode: -1 };
+    }
+
+    throw error;
+  }
+
+  const payload = await response.json();
+  const data = payload.data as { id: string; attributes: { scientificName: string } }[];
+  return data.map(({ id, attributes: { scientificName } }) => ({ taxonId: id, scientificName } as ScientificName));
+}
+
+/**
+ * This accesses the v3 tree species search endpoint, but skips the Connection system and the
+ * top level redux caching. Instead, it provides a simple method to issue a search and will return
+ * the locally cached result if the same search is issued multiple times (as can happen if a user
+ * types some characters, then backspaces a couple to type new ones).
+ */
+export function useAutocompleteSearch() {
+  const cache = useMemo(() => new Map<string, ScientificName[]>(), []);
+
+  const autocompleteSearch = useCallback(
+    async (search: string): Promise<string[]> => {
+      const mapNames = (names: ScientificName[]) => names.map(({ scientificName }) => scientificName);
+
+      if (isEmpty(search)) return [];
+      if (cache.has(search)) return mapNames(cache.get(search) as ScientificName[]);
+
+      const names = await searchRequest(search);
+      cache.set(search, names);
+      return mapNames(names);
+    },
+    [cache]
+  );
+
+  const findTaxonId = useCallback(
+    (name: string) => {
+      for (const names of cache.values()) {
+        const found = names.find(({ scientificName }) => scientificName === name);
+        if (found != null) return found.taxonId;
+      }
+
+      return undefined;
+    },
+    [cache]
+  );
+
+  return { autocompleteSearch, findTaxonId };
+}
diff --git a/src/components/elements/Inputs/textArea/__snapshots__/TextArea.stories.storyshot b/src/components/elements/Inputs/textArea/__snapshots__/TextArea.stories.storyshot
index d9cc8e856..619833a88 100644
--- a/src/components/elements/Inputs/textArea/__snapshots__/TextArea.stories.storyshot
+++ b/src/components/elements/Inputs/textArea/__snapshots__/TextArea.stories.storyshot
@@ -7,7 +7,7 @@ exports[`Storyshots Components/Elements/Inputs/TextArea Default 1`] = `
   <label
     className="mr-2 inline uppercase text-bold-body-300"
     data-testid="txt"
-    htmlFor=":r28:"
+    htmlFor=":r2d:"
   >
     Input Label 
   </label>
@@ -19,11 +19,11 @@ exports[`Storyshots Components/Elements/Inputs/TextArea Default 1`] = `
       }
     }
     data-testid="txt"
-    id=":r28:-description"
+    id=":r2d:-description"
   />
   <textarea
     className="min-h-[150px] w-full rounded-lg px-3 py-2 focus:border-primary-500 outline-none transition-all duration-300 ease-in-out focus:ring-transparent border-light "
-    id=":r28:"
+    id=":r2d:"
     onChange={[Function]}
     placeholder="Input placeholder"
   />
diff --git a/src/components/elements/Table/__snapshots__/Table.stories.storyshot b/src/components/elements/Table/__snapshots__/Table.stories.storyshot
index 3ae48964c..4049211ad 100644
--- a/src/components/elements/Table/__snapshots__/Table.stories.storyshot
+++ b/src/components/elements/Table/__snapshots__/Table.stories.storyshot
@@ -47,7 +47,7 @@ exports[`Storyshots Components/Elements/Table Default 1`] = `
                 className="text-16-bold"
                 data-headlessui-state=""
                 data-testid="txt"
-                id="headlessui-listbox-label-:r29:"
+                id="headlessui-listbox-label-:r2e:"
                 onClick={[Function]}
               >
                 Funding source
@@ -58,11 +58,11 @@ exports[`Storyshots Components/Elements/Table Default 1`] = `
                 <div
                   aria-expanded={false}
                   aria-haspopup="listbox"
-                  aria-labelledby="headlessui-listbox-label-:r29: headlessui-listbox-button-:r2a:"
+                  aria-labelledby="headlessui-listbox-label-:r2e: headlessui-listbox-button-:r2f:"
                   className="pitems-center flex items-center justify-center gap-1 rounded-md border border-neutral-200 bg-white py-2 pl-4 pr-4"
                   data-headlessui-state=""
                   disabled={false}
-                  id="headlessui-listbox-button-:r2a:"
+                  id="headlessui-listbox-button-:r2f:"
                   onClick={[Function]}
                   onKeyDown={[Function]}
                   onKeyUp={[Function]}
@@ -910,7 +910,7 @@ exports[`Storyshots Components/Elements/Table Primary 1`] = `
                 className="text-16-bold"
                 data-headlessui-state=""
                 data-testid="txt"
-                id="headlessui-listbox-label-:r2b:"
+                id="headlessui-listbox-label-:r2g:"
                 onClick={[Function]}
               >
                 Funding source
@@ -921,11 +921,11 @@ exports[`Storyshots Components/Elements/Table Primary 1`] = `
                 <div
                   aria-expanded={false}
                   aria-haspopup="listbox"
-                  aria-labelledby="headlessui-listbox-label-:r2b: headlessui-listbox-button-:r2c:"
+                  aria-labelledby="headlessui-listbox-label-:r2g: headlessui-listbox-button-:r2h:"
                   className="pitems-center flex items-center justify-center gap-1 rounded-md border border-neutral-200 bg-white py-2 pl-4 pr-4"
                   data-headlessui-state=""
                   disabled={false}
-                  id="headlessui-listbox-button-:r2c:"
+                  id="headlessui-listbox-button-:r2h:"
                   onClick={[Function]}
                   onKeyDown={[Function]}
                   onKeyUp={[Function]}
@@ -1773,7 +1773,7 @@ exports[`Storyshots Components/Elements/Table Secundary White 1`] = `
                 className="text-16-bold"
                 data-headlessui-state=""
                 data-testid="txt"
-                id="headlessui-listbox-label-:r2d:"
+                id="headlessui-listbox-label-:r2i:"
                 onClick={[Function]}
               >
                 Funding source
@@ -1784,11 +1784,11 @@ exports[`Storyshots Components/Elements/Table Secundary White 1`] = `
                 <div
                   aria-expanded={false}
                   aria-haspopup="listbox"
-                  aria-labelledby="headlessui-listbox-label-:r2d: headlessui-listbox-button-:r2e:"
+                  aria-labelledby="headlessui-listbox-label-:r2i: headlessui-listbox-button-:r2j:"
                   className="pitems-center flex items-center justify-center gap-1 rounded-md border border-neutral-200 bg-white py-2 pl-4 pr-4"
                   data-headlessui-state=""
                   disabled={false}
-                  id="headlessui-listbox-button-:r2e:"
+                  id="headlessui-listbox-button-:r2j:"
                   onClick={[Function]}
                   onKeyDown={[Function]}
                   onKeyUp={[Function]}
@@ -2636,7 +2636,7 @@ exports[`Storyshots Components/Elements/Table Table Airtable 1`] = `
                 className="text-16-bold"
                 data-headlessui-state=""
                 data-testid="txt"
-                id="headlessui-listbox-label-:r2j:"
+                id="headlessui-listbox-label-:r2o:"
                 onClick={[Function]}
               >
                 Funding source
@@ -2647,11 +2647,11 @@ exports[`Storyshots Components/Elements/Table Table Airtable 1`] = `
                 <div
                   aria-expanded={false}
                   aria-haspopup="listbox"
-                  aria-labelledby="headlessui-listbox-label-:r2j: headlessui-listbox-button-:r2k:"
+                  aria-labelledby="headlessui-listbox-label-:r2o: headlessui-listbox-button-:r2p:"
                   className="pitems-center flex items-center justify-center gap-1 rounded-md border border-neutral-200 bg-white py-2 pl-4 pr-4"
                   data-headlessui-state=""
                   disabled={false}
-                  id="headlessui-listbox-button-:r2k:"
+                  id="headlessui-listbox-button-:r2p:"
                   onClick={[Function]}
                   onKeyDown={[Function]}
                   onKeyUp={[Function]}
@@ -3502,7 +3502,7 @@ exports[`Storyshots Components/Elements/Table Table Airtable Dashboard 1`] = `
                   className="text-16-bold"
                   data-headlessui-state=""
                   data-testid="txt"
-                  id="headlessui-listbox-label-:r2v:"
+                  id="headlessui-listbox-label-:r34:"
                   onClick={[Function]}
                 >
                   Funding source
@@ -3513,11 +3513,11 @@ exports[`Storyshots Components/Elements/Table Table Airtable Dashboard 1`] = `
                   <div
                     aria-expanded={false}
                     aria-haspopup="listbox"
-                    aria-labelledby="headlessui-listbox-label-:r2v: headlessui-listbox-button-:r30:"
+                    aria-labelledby="headlessui-listbox-label-:r34: headlessui-listbox-button-:r35:"
                     className="pitems-center flex items-center justify-center gap-1 rounded-md border border-neutral-200 bg-white py-2 pl-4 pr-4"
                     data-headlessui-state=""
                     disabled={false}
-                    id="headlessui-listbox-button-:r30:"
+                    id="headlessui-listbox-button-:r35:"
                     onClick={[Function]}
                     onKeyDown={[Function]}
                     onKeyUp={[Function]}
@@ -4366,7 +4366,7 @@ exports[`Storyshots Components/Elements/Table Table Border 1`] = `
                 className="text-16-bold"
                 data-headlessui-state=""
                 data-testid="txt"
-                id="headlessui-listbox-label-:r2f:"
+                id="headlessui-listbox-label-:r2k:"
                 onClick={[Function]}
               >
                 Funding source
@@ -4377,11 +4377,11 @@ exports[`Storyshots Components/Elements/Table Table Border 1`] = `
                 <div
                   aria-expanded={false}
                   aria-haspopup="listbox"
-                  aria-labelledby="headlessui-listbox-label-:r2f: headlessui-listbox-button-:r2g:"
+                  aria-labelledby="headlessui-listbox-label-:r2k: headlessui-listbox-button-:r2l:"
                   className="pitems-center flex items-center justify-center gap-1 rounded-md border border-neutral-200 bg-white py-2 pl-4 pr-4"
                   data-headlessui-state=""
                   disabled={false}
-                  id="headlessui-listbox-button-:r2g:"
+                  id="headlessui-listbox-button-:r2l:"
                   onClick={[Function]}
                   onKeyDown={[Function]}
                   onKeyUp={[Function]}
@@ -5229,7 +5229,7 @@ exports[`Storyshots Components/Elements/Table Table Border All 1`] = `
                 className="text-16-bold"
                 data-headlessui-state=""
                 data-testid="txt"
-                id="headlessui-listbox-label-:r2h:"
+                id="headlessui-listbox-label-:r2m:"
                 onClick={[Function]}
               >
                 Funding source
@@ -5240,11 +5240,11 @@ exports[`Storyshots Components/Elements/Table Table Border All 1`] = `
                 <div
                   aria-expanded={false}
                   aria-haspopup="listbox"
-                  aria-labelledby="headlessui-listbox-label-:r2h: headlessui-listbox-button-:r2i:"
+                  aria-labelledby="headlessui-listbox-label-:r2m: headlessui-listbox-button-:r2n:"
                   className="pitems-center flex items-center justify-center gap-1 rounded-md border border-neutral-200 bg-white py-2 pl-4 pr-4"
                   data-headlessui-state=""
                   disabled={false}
-                  id="headlessui-listbox-button-:r2i:"
+                  id="headlessui-listbox-button-:r2n:"
                   onClick={[Function]}
                   onKeyDown={[Function]}
                   onKeyUp={[Function]}
@@ -6095,7 +6095,7 @@ exports[`Storyshots Components/Elements/Table Table Dashboard Countries 1`] = `
                   className="text-16-bold"
                   data-headlessui-state=""
                   data-testid="txt"
-                  id="headlessui-listbox-label-:r2r:"
+                  id="headlessui-listbox-label-:r30:"
                   onClick={[Function]}
                 >
                   Funding source
@@ -6106,11 +6106,11 @@ exports[`Storyshots Components/Elements/Table Table Dashboard Countries 1`] = `
                   <div
                     aria-expanded={false}
                     aria-haspopup="listbox"
-                    aria-labelledby="headlessui-listbox-label-:r2r: headlessui-listbox-button-:r2s:"
+                    aria-labelledby="headlessui-listbox-label-:r30: headlessui-listbox-button-:r31:"
                     className="pitems-center flex items-center justify-center gap-1 rounded-md border border-neutral-200 bg-white py-2 pl-4 pr-4"
                     data-headlessui-state=""
                     disabled={false}
-                    id="headlessui-listbox-button-:r2s:"
+                    id="headlessui-listbox-button-:r31:"
                     onClick={[Function]}
                     onKeyDown={[Function]}
                     onKeyUp={[Function]}
@@ -6962,7 +6962,7 @@ exports[`Storyshots Components/Elements/Table Table Dashboard Countries Modal 1`
                   className="text-16-bold"
                   data-headlessui-state=""
                   data-testid="txt"
-                  id="headlessui-listbox-label-:r2t:"
+                  id="headlessui-listbox-label-:r32:"
                   onClick={[Function]}
                 >
                   Funding source
@@ -6973,11 +6973,11 @@ exports[`Storyshots Components/Elements/Table Table Dashboard Countries Modal 1`
                   <div
                     aria-expanded={false}
                     aria-haspopup="listbox"
-                    aria-labelledby="headlessui-listbox-label-:r2t: headlessui-listbox-button-:r2u:"
+                    aria-labelledby="headlessui-listbox-label-:r32: headlessui-listbox-button-:r33:"
                     className="pitems-center flex items-center justify-center gap-1 rounded-md border border-neutral-200 bg-white py-2 pl-4 pr-4"
                     data-headlessui-state=""
                     disabled={false}
-                    id="headlessui-listbox-button-:r2u:"
+                    id="headlessui-listbox-button-:r33:"
                     onClick={[Function]}
                     onKeyDown={[Function]}
                     onKeyUp={[Function]}
@@ -7829,7 +7829,7 @@ exports[`Storyshots Components/Elements/Table Table Organization 1`] = `
                   className="text-16-bold"
                   data-headlessui-state=""
                   data-testid="txt"
-                  id="headlessui-listbox-label-:r2p:"
+                  id="headlessui-listbox-label-:r2u:"
                   onClick={[Function]}
                 >
                   Funding source
@@ -7840,11 +7840,11 @@ exports[`Storyshots Components/Elements/Table Table Organization 1`] = `
                   <div
                     aria-expanded={false}
                     aria-haspopup="listbox"
-                    aria-labelledby="headlessui-listbox-label-:r2p: headlessui-listbox-button-:r2q:"
+                    aria-labelledby="headlessui-listbox-label-:r2u: headlessui-listbox-button-:r2v:"
                     className="pitems-center flex items-center justify-center gap-1 rounded-md border border-neutral-200 bg-white py-2 pl-4 pr-4"
                     data-headlessui-state=""
                     disabled={false}
-                    id="headlessui-listbox-button-:r2q:"
+                    id="headlessui-listbox-button-:r2v:"
                     onClick={[Function]}
                     onKeyDown={[Function]}
                     onKeyUp={[Function]}
@@ -8693,7 +8693,7 @@ exports[`Storyshots Components/Elements/Table Table Site Polygon 1`] = `
                 className="text-16-bold"
                 data-headlessui-state=""
                 data-testid="txt"
-                id="headlessui-listbox-label-:r2l:"
+                id="headlessui-listbox-label-:r2q:"
                 onClick={[Function]}
               >
                 Funding source
@@ -8704,11 +8704,11 @@ exports[`Storyshots Components/Elements/Table Table Site Polygon 1`] = `
                 <div
                   aria-expanded={false}
                   aria-haspopup="listbox"
-                  aria-labelledby="headlessui-listbox-label-:r2l: headlessui-listbox-button-:r2m:"
+                  aria-labelledby="headlessui-listbox-label-:r2q: headlessui-listbox-button-:r2r:"
                   className="pitems-center flex items-center justify-center gap-1 rounded-md border border-neutral-200 bg-white py-2 pl-4 pr-4"
                   data-headlessui-state=""
                   disabled={false}
-                  id="headlessui-listbox-button-:r2m:"
+                  id="headlessui-listbox-button-:r2r:"
                   onClick={[Function]}
                   onKeyDown={[Function]}
                   onKeyUp={[Function]}
@@ -9559,7 +9559,7 @@ exports[`Storyshots Components/Elements/Table Table Version 1`] = `
                   className="text-16-bold"
                   data-headlessui-state=""
                   data-testid="txt"
-                  id="headlessui-listbox-label-:r2n:"
+                  id="headlessui-listbox-label-:r2s:"
                   onClick={[Function]}
                 >
                   Funding source
@@ -9570,11 +9570,11 @@ exports[`Storyshots Components/Elements/Table Table Version 1`] = `
                   <div
                     aria-expanded={false}
                     aria-haspopup="listbox"
-                    aria-labelledby="headlessui-listbox-label-:r2n: headlessui-listbox-button-:r2o:"
+                    aria-labelledby="headlessui-listbox-label-:r2s: headlessui-listbox-button-:r2t:"
                     className="pitems-center flex items-center justify-center gap-1 rounded-md border border-neutral-200 bg-white py-2 pl-4 pr-4"
                     data-headlessui-state=""
                     disabled={false}
-                    id="headlessui-listbox-button-:r2o:"
+                    id="headlessui-listbox-button-:r2t:"
                     onClick={[Function]}
                     onKeyDown={[Function]}
                     onKeyUp={[Function]}
diff --git a/src/components/elements/Tabs/Default/TabButton.tsx b/src/components/elements/Tabs/Default/TabButton.tsx
index 97e284389..21b6a3057 100644
--- a/src/components/elements/Tabs/Default/TabButton.tsx
+++ b/src/components/elements/Tabs/Default/TabButton.tsx
@@ -30,19 +30,22 @@ export const TabButton = forwardRef(
           className,
           "w-full items-center focus:outline-none disabled:text-neutral-900",
           item.done && "peer",
-          lastItem || selected ? "border-b" : "border-b-0",
+          lastItem || selected ? "border-b" : "border-b",
           selected
-            ? "border-neutral-100 border-r-white bg-white text-neutral-1000 peer-aria-checked:shadow-t-secondary"
+            ? "border border-success  bg-white text-blueCustom-900 peer-aria-checked:shadow-t-secondary"
             : item.done
-            ? `border-secondary-500 bg-secondary-300 text-neutral-800  `
-            : `border-neutral-100 bg-neutral-300 text-neutral-900`
+            ? `border-white bg-primary text-white `
+            : `border-b border-white bg-grey-950 text-blueCustom-900`
         )}
       >
         <Text variant={textVariant} className="w-full text-left line-clamp-2 md:pr-6" containHtml>
           {item.title}
         </Text>
         <When condition={item.done}>
-          <Icon className="text-green-100 " name={IconNames.APPROVED_COLORLESS} width={20} />
+          <Icon className="text-success-410 " name={IconNames.APPROVED_COLORLESS} width={20} />
+        </When>
+        <When condition={selected}>
+          <Icon className="text-success " name={IconNames.EDIT_TA} width={20} />
         </When>
       </button>
     );
diff --git a/src/components/elements/Tabs/Default/__snapshots__/Tabs.stories.storyshot b/src/components/elements/Tabs/Default/__snapshots__/Tabs.stories.storyshot
index f5b07e7d4..bdf0d5c5b 100644
--- a/src/components/elements/Tabs/Default/__snapshots__/Tabs.stories.storyshot
+++ b/src/components/elements/Tabs/Default/__snapshots__/Tabs.stories.storyshot
@@ -12,9 +12,9 @@ exports[`Storyshots Components/Elements/Tabs Horizontal 1`] = `
     <button
       aria-checked="false"
       aria-selected="true"
-      className="flex min-h-[70px] w-full items-center justify-start py-4 px-6 w-full items-center focus:outline-none disabled:text-neutral-900 border-b border-neutral-100 border-r-white bg-white text-neutral-1000 peer-aria-checked:shadow-t-secondary"
+      className="flex min-h-[70px] w-full items-center justify-start py-4 px-6 w-full items-center focus:outline-none disabled:text-neutral-900 border-b border border-success  bg-white text-blueCustom-900 peer-aria-checked:shadow-t-secondary"
       data-headlessui-state="selected"
-      id="headlessui-tabs-tab-:r31:"
+      id="headlessui-tabs-tab-:r36:"
       onClick={[Function]}
       onKeyDown={[Function]}
       onMouseDown={[Function]}
@@ -30,13 +30,21 @@ exports[`Storyshots Components/Elements/Tabs Horizontal 1`] = `
         }
         data-testid="txt"
       />
+      <div
+        style={
+          Object {
+            "height": undefined,
+            "width": 20,
+          }
+        }
+      />
     </button>
     <button
       aria-checked="false"
       aria-selected="false"
-      className="flex min-h-[70px] w-full items-center justify-start py-4 px-6 w-full items-center focus:outline-none disabled:text-neutral-900 border-b-0 border-neutral-100 bg-neutral-300 text-neutral-900"
+      className="flex min-h-[70px] w-full items-center justify-start py-4 px-6 w-full items-center focus:outline-none disabled:text-neutral-900 border-b border-b border-white bg-grey-950 text-blueCustom-900"
       data-headlessui-state=""
-      id="headlessui-tabs-tab-:r32:"
+      id="headlessui-tabs-tab-:r37:"
       onClick={[Function]}
       onKeyDown={[Function]}
       onMouseDown={[Function]}
@@ -56,9 +64,9 @@ exports[`Storyshots Components/Elements/Tabs Horizontal 1`] = `
     <button
       aria-checked="false"
       aria-selected="false"
-      className="flex min-h-[70px] w-full items-center justify-start py-4 px-6 w-full items-center focus:outline-none disabled:text-neutral-900 border-b-0 border-neutral-100 bg-neutral-300 text-neutral-900"
+      className="flex min-h-[70px] w-full items-center justify-start py-4 px-6 w-full items-center focus:outline-none disabled:text-neutral-900 border-b border-b border-white bg-grey-950 text-blueCustom-900"
       data-headlessui-state=""
-      id="headlessui-tabs-tab-:r33:"
+      id="headlessui-tabs-tab-:r38:"
       onClick={[Function]}
       onKeyDown={[Function]}
       onMouseDown={[Function]}
@@ -78,9 +86,9 @@ exports[`Storyshots Components/Elements/Tabs Horizontal 1`] = `
     <button
       aria-checked="false"
       aria-selected="false"
-      className="flex min-h-[70px] w-full items-center justify-start py-4 px-6 w-full items-center focus:outline-none disabled:text-neutral-900 border-b border-neutral-100 bg-neutral-300 text-neutral-900"
+      className="flex min-h-[70px] w-full items-center justify-start py-4 px-6 w-full items-center focus:outline-none disabled:text-neutral-900 border-b border-b border-white bg-grey-950 text-blueCustom-900"
       data-headlessui-state=""
-      id="headlessui-tabs-tab-:r34:"
+      id="headlessui-tabs-tab-:r39:"
       onClick={[Function]}
       onKeyDown={[Function]}
       onMouseDown={[Function]}
diff --git a/src/components/elements/Tabs/Secondary/__snapshots__/SecondaryTabs.stories.storyshot b/src/components/elements/Tabs/Secondary/__snapshots__/SecondaryTabs.stories.storyshot
index 9f8ff1b76..a63fcab49 100644
--- a/src/components/elements/Tabs/Secondary/__snapshots__/SecondaryTabs.stories.storyshot
+++ b/src/components/elements/Tabs/Secondary/__snapshots__/SecondaryTabs.stories.storyshot
@@ -16,7 +16,7 @@ exports[`Storyshots Components/Elements/Tabs Secondary 1`] = `
         aria-selected={true}
         className="mb-[-2px] h-full outline-none  px-4 py-4 border-b-[3px] text-black border-primary"
         data-headlessui-state="selected"
-        id="headlessui-tabs-tab-:r35:"
+        id="headlessui-tabs-tab-:r3a:"
         onClick={[Function]}
         onKeyDown={[Function]}
         onMouseDown={[Function]}
@@ -34,7 +34,7 @@ exports[`Storyshots Components/Elements/Tabs Secondary 1`] = `
         aria-selected={false}
         className="mb-[-2px] h-full outline-none  px-4 py-4 border-b-[3px] text-black border-transparent"
         data-headlessui-state=""
-        id="headlessui-tabs-tab-:r36:"
+        id="headlessui-tabs-tab-:r3b:"
         onClick={[Function]}
         onKeyDown={[Function]}
         onMouseDown={[Function]}
@@ -52,7 +52,7 @@ exports[`Storyshots Components/Elements/Tabs Secondary 1`] = `
         aria-selected={false}
         className="mb-[-2px] h-full outline-none  px-4 py-4 border-b-[3px] text-black border-transparent"
         data-headlessui-state=""
-        id="headlessui-tabs-tab-:r37:"
+        id="headlessui-tabs-tab-:r3c:"
         onClick={[Function]}
         onKeyDown={[Function]}
         onMouseDown={[Function]}
@@ -71,7 +71,7 @@ exports[`Storyshots Components/Elements/Tabs Secondary 1`] = `
   <div>
     <div
       data-headlessui-state="selected"
-      id="headlessui-tabs-panel-:r38:"
+      id="headlessui-tabs-panel-:r3d:"
       role="tabpanel"
       tabIndex={0}
     >
@@ -80,7 +80,7 @@ exports[`Storyshots Components/Elements/Tabs Secondary 1`] = `
       </div>
     </div>
     <span
-      id="headlessui-tabs-panel-:r39:"
+      id="headlessui-tabs-panel-:r3e:"
       role="tabpanel"
       style={
         Object {
@@ -100,7 +100,7 @@ exports[`Storyshots Components/Elements/Tabs Secondary 1`] = `
       tabIndex={-1}
     />
     <span
-      id="headlessui-tabs-panel-:r3a:"
+      id="headlessui-tabs-panel-:r3f:"
       role="tabpanel"
       style={
         Object {
diff --git a/src/components/extensive/Icon/Icon.tsx b/src/components/extensive/Icon/Icon.tsx
index e21507763..8aee895d3 100644
--- a/src/components/extensive/Icon/Icon.tsx
+++ b/src/components/extensive/Icon/Icon.tsx
@@ -203,7 +203,12 @@ export enum IconNames {
   IC_INFO_WHITE_BLACK = "ic-info-white-black",
   FLOAT_NOTIFICATION = "float-notification",
   IC_EXPAND = "ic_expand",
-  IC_SHINK = "ic_shrink"
+  IC_SHINK = "ic_shrink",
+  IC_ADD_BUTTON = "add-button",
+  TRASH_TA = "trash-ta",
+  EDIT_TA = "edit-ta",
+  NON_SCIENTIFIC_NAME = "non-scientific name",
+  NEW_TAG_TREE_SPECIES = "new-tag-tree-species"
 }
 
 export interface IconProps {
diff --git a/src/components/extensive/Modal/ModalRunAnalysis.tsx b/src/components/extensive/Modal/ModalRunAnalysis.tsx
index bf1d5fe01..9c0fbd085 100644
--- a/src/components/extensive/Modal/ModalRunAnalysis.tsx
+++ b/src/components/extensive/Modal/ModalRunAnalysis.tsx
@@ -1,11 +1,16 @@
-import { FC } from "react";
+import { FC, useState } from "react";
 import { When } from "react-if";
 
+import { useMonitoredData } from "@/admin/components/ResourceTabs/MonitoredTab/hooks/useMonitoredData";
 import Button from "@/components/elements/Button/Button";
 import Dropdown from "@/components/elements/Inputs/Dropdown/Dropdown";
 import { VARIANT_DROPDOWN_DEFAULT } from "@/components/elements/Inputs/Dropdown/DropdownVariant";
 import Input from "@/components/elements/Inputs/Input/Input";
 import Text from "@/components/elements/Text/Text";
+import InlineLoader from "@/components/generic/Loading/InlineLoader";
+import { useMonitoredDataContext } from "@/context/monitoredData.provider";
+import { useNotificationContext } from "@/context/notification.provider";
+import { EntityName } from "@/types/common";
 
 import Icon, { IconNames } from "../Icon/Icon";
 import { ModalProps } from "./Modal";
@@ -16,11 +21,17 @@ export interface ModalRunAnalysisProps extends ModalProps {
   onClose?: () => void;
   primaryButtonText: string;
   title: string;
+  projectName?: string;
+  entityType?: EntityName;
+  entityUuid?: string;
 }
 
 const ModalRunAnalysis: FC<ModalRunAnalysisProps> = ({
   primaryButtonProps,
   title,
+  projectName,
+  entityType,
+  entityUuid,
   primaryButtonText,
   secondaryButtonProps,
   secondaryButtonText,
@@ -29,11 +40,44 @@ const ModalRunAnalysis: FC<ModalRunAnalysisProps> = ({
   onClose,
   ...rest
 }) => {
+  const { indicatorSlugAnalysis, setIndicatorSlugAnalysis, setLoadingAnalysis, indicatorSlug } =
+    useMonitoredDataContext();
+  const { runAnalysisIndicator, dropdownAnalysisOptions, loadingVerify, analysisToSlug } = useMonitoredData(
+    entityType,
+    entityUuid
+  );
+  const { openNotification } = useNotificationContext();
+  const [selectSlug, setSelectSlug] = useState<string | undefined>();
+  const runAnalysis = async () => {
+    const indicatorSlugSelected = selectSlug ? indicatorSlugAnalysis : indicatorSlug;
+    setLoadingAnalysis?.(true);
+    if (analysisToSlug[`${indicatorSlugSelected}`]?.message) {
+      setLoadingAnalysis?.(false);
+      return openNotification("warning", "Warning", analysisToSlug[`${indicatorSlugSelected}`].message);
+    }
+    await runAnalysisIndicator({
+      pathParams: {
+        slug: indicatorSlugSelected!
+      },
+      body: {
+        uuids: analysisToSlug[`${indicatorSlugSelected}`]
+      }
+    });
+    setIndicatorSlugAnalysis?.("treeCoverLoss");
+    onClose?.();
+  };
+
   return (
     <ModalBaseWithMonitored {...rest}>
       <header className="flex w-full items-center justify-between border-b border-b-neutral-200 px-8 py-5">
         <Icon name={IconNames.WRI_LOGO} width={108} height={30} className="min-w-[108px]" />
-        <button onClick={onClose} className="ml-2 rounded p-1 hover:bg-grey-800">
+        <button
+          onClick={() => {
+            setIndicatorSlugAnalysis?.("treeCoverLoss");
+            onClose?.();
+          }}
+          className="ml-2 rounded p-1 hover:bg-grey-800"
+        >
           <Icon name={IconNames.CLEAR} width={16} height={16} className="text-darkCustom-100" />
         </button>
       </header>
@@ -48,7 +92,7 @@ const ModalRunAnalysis: FC<ModalRunAnalysisProps> = ({
           <Input
             type="text"
             name="projectName"
-            placeholder="Project Name"
+            placeholder={projectName!}
             label="Project Name"
             variant="default"
             labelClassName="!capitalize !text-darkCustom"
@@ -56,25 +100,32 @@ const ModalRunAnalysis: FC<ModalRunAnalysisProps> = ({
             disabled={true}
             className="bg-neutral-150"
           />
-          <Dropdown
-            placeholder="Tree Cover Loss (16 polygons not run)"
-            label="Indicator"
-            options={[
-              { title: "Global", value: "Global" },
-              { title: "Country", value: "Country" },
-              { title: "Subnational", value: "Subnational" }
-            ]}
-            onChange={() => {}}
-            variant={VARIANT_DROPDOWN_DEFAULT}
-            className="!min-h-[44px] !py-[9px]"
-            labelClassName="!capitalize !text-darkCustom"
-            labelVariant="text-14-light"
-          />
+          <When condition={!loadingVerify}>
+            <Dropdown
+              placeholder={dropdownAnalysisOptions.find(option => option.slug === indicatorSlug)?.title}
+              label="Indicator"
+              options={dropdownAnalysisOptions}
+              onChange={e => {
+                const indicator = dropdownAnalysisOptions.find(option => option.value === e[0])?.slug;
+                setIndicatorSlugAnalysis?.(indicator!);
+                setSelectSlug(indicator);
+              }}
+              variant={VARIANT_DROPDOWN_DEFAULT}
+              className="!min-h-[44px] !py-[9px]"
+              labelClassName="!capitalize !text-darkCustom"
+              labelVariant="text-14-light"
+            />
+          </When>
         </div>
         <br />
         <br />
         <br />
         <br />
+        <br />
+        <br />
+        <br />
+        <br />
+        <br />
       </div>
       <div className="flex w-full justify-end gap-3 px-8 py-4">
         <When condition={!!secondaryButtonProps}>
@@ -84,10 +135,11 @@ const ModalRunAnalysis: FC<ModalRunAnalysisProps> = ({
             </Text>
           </Button>
         </When>
-        <Button {...primaryButtonProps}>
+        <Button {...primaryButtonProps} onClick={runAnalysis} disabled={loadingVerify}>
           <Text variant="text-14-bold" className="capitalize text-white">
             {primaryButtonText}
           </Text>
+          <InlineLoader loading={loadingVerify} />
         </Button>
       </div>
     </ModalBaseWithMonitored>
diff --git a/src/components/extensive/Modal/__snapshots__/ModalAdd.stories.storyshot b/src/components/extensive/Modal/__snapshots__/ModalAdd.stories.storyshot
index f5647855f..60fe7aaf0 100644
--- a/src/components/extensive/Modal/__snapshots__/ModalAdd.stories.storyshot
+++ b/src/components/extensive/Modal/__snapshots__/ModalAdd.stories.storyshot
@@ -73,7 +73,7 @@ exports[`Storyshots Components/Extensive/Modal/ModalAdd Default 1`] = `
         >
           <input
             hidden={true}
-            id=":r3b:"
+            id=":r3g:"
             multiple={true}
             onChange={[Function]}
             onClick={[Function]}
diff --git a/src/components/extensive/Modal/__snapshots__/ModalConfirm.stories.storyshot b/src/components/extensive/Modal/__snapshots__/ModalConfirm.stories.storyshot
index 895490d45..65df9f6a5 100644
--- a/src/components/extensive/Modal/__snapshots__/ModalConfirm.stories.storyshot
+++ b/src/components/extensive/Modal/__snapshots__/ModalConfirm.stories.storyshot
@@ -27,7 +27,7 @@ exports[`Storyshots Components/Extensive/Modal/ModalConfirm Default 1`] = `
       >
         <textarea
           className="min-h-[150px] w-full rounded-lg px-3 py-2 focus:border-primary-500 outline-none transition-all duration-300 ease-in-out focus:ring-transparent max-h-72 !min-h-0 resize-none rounded-lg border border-grey-750 p-4 text-xs border-light "
-          id=":r3c:"
+          id=":r3h:"
           name=""
           onChange={[Function]}
           placeholder="Type comment here..."
diff --git a/src/components/extensive/Modal/__snapshots__/ModalSubmit.stories.storyshot b/src/components/extensive/Modal/__snapshots__/ModalSubmit.stories.storyshot
index 5996adfa5..4500c4b71 100644
--- a/src/components/extensive/Modal/__snapshots__/ModalSubmit.stories.storyshot
+++ b/src/components/extensive/Modal/__snapshots__/ModalSubmit.stories.storyshot
@@ -68,7 +68,7 @@ exports[`Storyshots Components/Extensive/Modal/ModalSubmit Default 1`] = `
           <div>
             <input
               className="h-4 w-4 cursor-pointer rounded-sm border-neutral-400 transition-all duration-300 checked:text-primary-500 focus:ring-transparent disabled:bg-neutral-400 lg:h-5 lg:w-5"
-              id=":r3d:"
+              id=":r3i:"
               name="Select All"
               onClick={[Function]}
               type="checkbox"
diff --git a/src/components/extensive/Modal/__snapshots__/ModalWithLogo.stories.storyshot b/src/components/extensive/Modal/__snapshots__/ModalWithLogo.stories.storyshot
index 0022f3536..bfc3407e1 100644
--- a/src/components/extensive/Modal/__snapshots__/ModalWithLogo.stories.storyshot
+++ b/src/components/extensive/Modal/__snapshots__/ModalWithLogo.stories.storyshot
@@ -190,7 +190,7 @@ exports[`Storyshots Components/Extensive/Modal/ModalWithLogo Default 1`] = `
               >
                 <textarea
                   className="min-h-[150px] w-full rounded-lg px-3 py-2 focus:border-primary-500 outline-none transition-all duration-300 ease-in-out focus:ring-transparent max-h-72 !min-h-0 resize-none border-none !p-0 text-xs border-light "
-                  id=":r3e:"
+                  id=":r3j:"
                   name=""
                   onChange={[Function]}
                   placeholder="Add a comment"
diff --git a/src/components/extensive/Pagination/__snapshots__/PerPageSelector.stories.storyshot b/src/components/extensive/Pagination/__snapshots__/PerPageSelector.stories.storyshot
index de01d7c18..04ec672b3 100644
--- a/src/components/extensive/Pagination/__snapshots__/PerPageSelector.stories.storyshot
+++ b/src/components/extensive/Pagination/__snapshots__/PerPageSelector.stories.storyshot
@@ -14,11 +14,11 @@ exports[`Storyshots Components/Elements/Table/PerPageSelector Default 1`] = `
       <div
         aria-expanded={false}
         aria-haspopup="listbox"
-        aria-labelledby="headlessui-listbox-label-:r3g: headlessui-listbox-button-:r3f:"
+        aria-labelledby="headlessui-listbox-label-:r3l: headlessui-listbox-button-:r3k:"
         className="relative flex h-10 w-20 items-center justify-center rounded-md shadow"
         data-headlessui-state=""
         disabled={false}
-        id="headlessui-listbox-button-:r3f:"
+        id="headlessui-listbox-button-:r3k:"
         onClick={[Function]}
         onKeyDown={[Function]}
         onKeyUp={[Function]}
@@ -50,7 +50,7 @@ exports[`Storyshots Components/Elements/Table/PerPageSelector Default 1`] = `
         className="text-bold-subtitle-500"
         data-headlessui-state=""
         data-testid="txt"
-        id="headlessui-listbox-label-:r3g:"
+        id="headlessui-listbox-label-:r3l:"
         onClick={[Function]}
       />
     </div>
diff --git a/src/components/generic/Layout/__snapshots__/MainLayout.stories.storyshot b/src/components/generic/Layout/__snapshots__/MainLayout.stories.storyshot
index a59b5dab0..aa79b10e2 100644
--- a/src/components/generic/Layout/__snapshots__/MainLayout.stories.storyshot
+++ b/src/components/generic/Layout/__snapshots__/MainLayout.stories.storyshot
@@ -41,7 +41,7 @@ exports[`Storyshots Components/Generic/Layouts/MainLayout Default 1`] = `
                 aria-expanded={false}
                 className="flex items-center justify-between p-2"
                 data-headlessui-state=""
-                id="headlessui-popover-button-:r3h:"
+                id="headlessui-popover-button-:r3m:"
                 onClick={[Function]}
                 onKeyDown={[Function]}
                 onKeyUp={[Function]}
@@ -181,7 +181,7 @@ exports[`Storyshots Components/Generic/Layouts/MainLayout Default 1`] = `
               aria-expanded={false}
               className="flex items-center justify-between p-2"
               data-headlessui-state=""
-              id="headlessui-popover-button-:r3m:"
+              id="headlessui-popover-button-:r3r:"
               onClick={[Function]}
               onKeyDown={[Function]}
               onKeyUp={[Function]}
diff --git a/src/components/generic/Navbar/__snapshots__/Navbar.stories.storyshot b/src/components/generic/Navbar/__snapshots__/Navbar.stories.storyshot
index 5ce3a4f00..c2de5734a 100644
--- a/src/components/generic/Navbar/__snapshots__/Navbar.stories.storyshot
+++ b/src/components/generic/Navbar/__snapshots__/Navbar.stories.storyshot
@@ -35,7 +35,7 @@ exports[`Storyshots Components/Generic/Navbar Logged In 1`] = `
             aria-expanded={false}
             className="flex items-center justify-between p-2"
             data-headlessui-state=""
-            id="headlessui-popover-button-:r3r:"
+            id="headlessui-popover-button-:r40:"
             onClick={[Function]}
             onKeyDown={[Function]}
             onKeyUp={[Function]}
@@ -129,7 +129,7 @@ exports[`Storyshots Components/Generic/Navbar Logged In 1`] = `
           aria-expanded={false}
           className="flex items-center justify-between p-2"
           data-headlessui-state=""
-          id="headlessui-popover-button-:r40:"
+          id="headlessui-popover-button-:r45:"
           onClick={[Function]}
           onKeyDown={[Function]}
           onKeyUp={[Function]}
@@ -213,7 +213,7 @@ exports[`Storyshots Components/Generic/Navbar Logged Out 1`] = `
             aria-expanded={false}
             className="flex items-center justify-between p-2"
             data-headlessui-state=""
-            id="headlessui-popover-button-:r45:"
+            id="headlessui-popover-button-:r4a:"
             onClick={[Function]}
             onKeyDown={[Function]}
             onKeyUp={[Function]}
@@ -353,7 +353,7 @@ exports[`Storyshots Components/Generic/Navbar Logged Out 1`] = `
           aria-expanded={false}
           className="flex items-center justify-between p-2"
           data-headlessui-state=""
-          id="headlessui-popover-button-:r4a:"
+          id="headlessui-popover-button-:r4f:"
           onClick={[Function]}
           onKeyDown={[Function]}
           onKeyUp={[Function]}
diff --git a/src/connections/EstablishmentTrees.ts b/src/connections/EstablishmentTrees.ts
new file mode 100644
index 000000000..ca30a376d
--- /dev/null
+++ b/src/connections/EstablishmentTrees.ts
@@ -0,0 +1,61 @@
+import { createSelector } from "reselect";
+
+import {
+  establishmentTreesFind,
+  EstablishmentTreesFindPathParams
+} from "@/generated/v3/entityService/entityServiceComponents";
+import { establishmentTreesFindFetchFailed } from "@/generated/v3/entityService/entityServicePredicates";
+import { EstablishmentsTreesDto } from "@/generated/v3/entityService/entityServiceSchemas";
+import { ApiDataStore } from "@/store/apiSlice";
+import { Connection } from "@/types/connection";
+import { connectionHook } from "@/utils/connectionShortcuts";
+import { selectorCache } from "@/utils/selectorCache";
+
+type EstablishmentTreesConnection = {
+  establishmentTrees?: EstablishmentsTreesDto["establishmentTrees"];
+  previousPlantingCounts?: EstablishmentsTreesDto["previousPlantingCounts"];
+
+  establishmentTreesLoadFailed: boolean;
+};
+
+type EstablishmentTreesProps = Partial<EstablishmentTreesFindPathParams>;
+
+export type EstablishmentEntityType = EstablishmentTreesFindPathParams["entity"] | undefined;
+const establishmentTreesSelector =
+  (entity: EstablishmentEntityType, uuid: string | undefined) => (store: ApiDataStore) =>
+    entity == null || uuid == null ? undefined : store.establishmentTrees?.[`${entity}|${uuid}`];
+const establishmentTreesLoadFailed =
+  (entity: EstablishmentEntityType, uuid: string | undefined) => (store: ApiDataStore) =>
+    entity == null || uuid == null
+      ? false
+      : establishmentTreesFindFetchFailed({ pathParams: { entity, uuid } })(store) != null;
+
+const connectionIsLoaded = (
+  { establishmentTrees, establishmentTreesLoadFailed }: EstablishmentTreesConnection,
+  { entity, uuid }: EstablishmentTreesProps
+) => entity == null || uuid == null || establishmentTrees != null || establishmentTreesLoadFailed;
+
+const establishmentTreesConnection: Connection<EstablishmentTreesConnection, EstablishmentTreesProps> = {
+  load: (connection, props) => {
+    if (!connectionIsLoaded(connection, props)) {
+      establishmentTreesFind({ pathParams: { entity: props.entity!, uuid: props.uuid! } });
+    }
+  },
+
+  isLoaded: connectionIsLoaded,
+
+  selector: selectorCache(
+    ({ entity, uuid }) => `${entity}|${uuid}`,
+    ({ entity, uuid }) =>
+      createSelector(
+        [establishmentTreesSelector(entity, uuid), establishmentTreesLoadFailed(entity, uuid)],
+        (treesDto, establishmentTreesLoadFailed) => ({
+          establishmentTrees: treesDto?.attributes?.establishmentTrees,
+          previousPlantingCounts: treesDto?.attributes?.previousPlantingCounts,
+          establishmentTreesLoadFailed
+        })
+      )
+  )
+};
+
+export const useEstablishmentTrees = connectionHook(establishmentTreesConnection);
diff --git a/src/constants/dashboardConsts.ts b/src/constants/dashboardConsts.ts
index 8d7c4f611..71f1f109e 100644
--- a/src/constants/dashboardConsts.ts
+++ b/src/constants/dashboardConsts.ts
@@ -44,6 +44,25 @@ export const TERRAFUND_MONITORING_LINK = "https://www.wri.org/update/land-degrad
 
 export const TERRAFUND_MRV_LINK = `<a href=${TERRAFUND_MONITORING_LINK} class="underline !text-black" target="_blank">TerraFund's MRV framework</a>`;
 
+export const DEFAULT_POLYGONS_DATA = {
+  graphicTargetLandUseTypes: [],
+  totalSection: {
+    totalHectaresRestored: 0
+  }
+};
+
+export const DEFAULT_POLYGONS_DATA_STRATEGIES = [
+  { label: "Direct Seeding", value: 0 },
+  { label: "Assisted Natural Regeneration", value: 0 },
+  { label: "Tree Planting", value: 0 },
+  { label: "Multiple Strategies", value: 0 }
+];
+
+export const DEFAULT_POLYGONS_DATA_ECOREGIONS = {
+  chartData: [],
+  total: 0
+};
+
 export const DUMMY_DATA_FOR_CHART_MULTI_LINE_CHART = [
   {
     name: "Total",
diff --git a/src/constants/environment.ts b/src/constants/environment.ts
index 3e6dcdb74..c0e55498d 100644
--- a/src/constants/environment.ts
+++ b/src/constants/environment.ts
@@ -3,10 +3,17 @@ import Log from "@/utils/log";
 const ENVIRONMENT_NAMES = ["local", "dev", "test", "staging", "prod"] as const;
 type EnvironmentName = (typeof ENVIRONMENT_NAMES)[number];
 
-type Environment = {
+const SERVICES = ["apiBaseUrl", "userServiceUrl", "jobServiceUrl", "entityServiceUrl"] as const;
+type Service = (typeof SERVICES)[number];
+
+type ServicesDefinition = {
   apiBaseUrl: string;
   userServiceUrl: string;
   jobServiceUrl: string;
+  entityServiceUrl: string;
+};
+
+type Environment = ServicesDefinition & {
   mapboxToken: string;
   geoserverUrl: string;
   geoserverWorkspace: string;
@@ -19,56 +26,43 @@ const GLOBAL_GEOSERVER_URL = "https://geoserver-prod.wri-restoration-marketplace
 const GLOBAL_SENTRY_DSN =
   "https://ab2bb67320b91a124ca3c42460b0e005@o4507018550181888.ingest.us.sentry.io/4507018664869888";
 
+const GATEWAYS = {
+  dev: "https://api-dev.terramatch.org",
+  test: "https://api-test.terramatch.org",
+  staging: "https://api-staging.terramatch.org",
+  prod: "https://api.terramatch.org"
+};
+
+const LOCAL_SERVICE_URLS = {
+  apiBaseUrl: "http://localhost:8080",
+  userServiceUrl: "http://localhost:4010",
+  jobServiceUrl: "http://localhost:4020",
+  entityServiceUrl: "http://localhost:4050"
+};
+
+const defaultServiceUrl = (env: EnvironmentName, service: Service) =>
+  env === "local" ? LOCAL_SERVICE_URLS[service] : GATEWAYS[env];
+
+const defaultGeoserverWorkspace = (env: EnvironmentName) =>
+  env === "test" ? "wri_test" : env === "prod" ? "wri_prod" : "wri_staging";
+
 // This is structured so that each environment can be targeted by a NextJS build with a single
 // NEXT_PUBLIC_TARGET_ENV variable, but each value can be overridden if desired with an associated
 // value.
-const ENVIRONMENTS: { [Property in EnvironmentName]: Environment } = {
+const buildDefaults = (env: EnvironmentName): Environment => ({
+  ...(SERVICES.reduce(
+    (serviceUrls, service) => ({
+      ...serviceUrls,
+      [service]: defaultServiceUrl(env, service)
+    }),
+    {}
+  ) as ServicesDefinition),
+  mapboxToken: GLOBAL_MAPBOX_TOKEN,
+  geoserverUrl: GLOBAL_GEOSERVER_URL,
+  geoserverWorkspace: defaultGeoserverWorkspace(env),
   // Local omits the sentry DSN
-  local: {
-    apiBaseUrl: "http://localhost:8080",
-    userServiceUrl: "http://localhost:4010",
-    jobServiceUrl: "http://localhost:4020",
-    mapboxToken: GLOBAL_MAPBOX_TOKEN,
-    geoserverUrl: GLOBAL_GEOSERVER_URL,
-    geoserverWorkspace: "wri_staging"
-  },
-  dev: {
-    apiBaseUrl: "https://api-dev.terramatch.org",
-    userServiceUrl: "https://api-dev.terramatch.org",
-    jobServiceUrl: "https://api-dev.terramatch.org",
-    mapboxToken: GLOBAL_MAPBOX_TOKEN,
-    geoserverUrl: GLOBAL_GEOSERVER_URL,
-    geoserverWorkspace: "wri_staging",
-    sentryDsn: GLOBAL_SENTRY_DSN
-  },
-  test: {
-    apiBaseUrl: "https://api-test.terramatch.org",
-    userServiceUrl: "https://api-test.terramatch.org",
-    jobServiceUrl: "https://api-test.terramatch.org",
-    mapboxToken: GLOBAL_MAPBOX_TOKEN,
-    geoserverUrl: GLOBAL_GEOSERVER_URL,
-    geoserverWorkspace: "wri_test",
-    sentryDsn: GLOBAL_SENTRY_DSN
-  },
-  staging: {
-    apiBaseUrl: "https://api-staging.terramatch.org",
-    userServiceUrl: "https://api-staging.terramatch.org",
-    jobServiceUrl: "https://api-staging.terramatch.org",
-    mapboxToken: GLOBAL_MAPBOX_TOKEN,
-    geoserverUrl: GLOBAL_GEOSERVER_URL,
-    geoserverWorkspace: "wri_staging",
-    sentryDsn: GLOBAL_SENTRY_DSN
-  },
-  prod: {
-    apiBaseUrl: "https://api.terramatch.org",
-    userServiceUrl: "https://api.terramatch.org",
-    jobServiceUrl: "https://api.terramatch.org",
-    mapboxToken: GLOBAL_MAPBOX_TOKEN,
-    geoserverUrl: GLOBAL_GEOSERVER_URL,
-    geoserverWorkspace: "wri_prod",
-    sentryDsn: GLOBAL_SENTRY_DSN
-  }
-};
+  sentryDsn: env === "local" ? undefined : GLOBAL_SENTRY_DSN
+});
 
 let declaredEnv = process.env.NEXT_PUBLIC_TARGET_ENV ?? "local";
 if (!ENVIRONMENT_NAMES.includes(declaredEnv as EnvironmentName)) {
@@ -78,10 +72,11 @@ if (!ENVIRONMENT_NAMES.includes(declaredEnv as EnvironmentName)) {
   Log.info("Booting up with target environment", { declaredEnv });
 }
 
-const DEFAULTS = ENVIRONMENTS[declaredEnv as EnvironmentName];
+const DEFAULTS = buildDefaults(declaredEnv as EnvironmentName);
 export const apiBaseUrl = process.env.NEXT_PUBLIC_API_BASE_URL ?? DEFAULTS.apiBaseUrl;
 export const userServiceUrl = process.env.NEXT_PUBLIC_USER_SERVICE_URL ?? DEFAULTS.userServiceUrl;
 export const jobServiceUrl = process.env.NEXT_PUBLIC_JOB_SERVICE_URL ?? DEFAULTS.jobServiceUrl;
+export const entityServiceUrl = process.env.NEXT_PUBLIC_ENTITY_SERVICE_URL ?? DEFAULTS.entityServiceUrl;
 export const mapboxToken = process.env.NEXT_PUBLIC_MAPBOX_TOKEN ?? DEFAULTS.mapboxToken;
 export const geoserverUrl = process.env.NEXT_PUBLIC_GEOSERVER_URL ?? DEFAULTS.geoserverUrl;
 export const geoserverWorkspace = process.env.NEXT_PUBLIC_GEOSERVER_WORKSPACE ?? DEFAULTS.geoserverWorkspace;
diff --git a/src/context/entity.provider.tsx b/src/context/entity.provider.tsx
new file mode 100644
index 000000000..a592c007d
--- /dev/null
+++ b/src/context/entity.provider.tsx
@@ -0,0 +1,20 @@
+import { createContext, ReactNode, useContext } from "react";
+
+import { EntityName } from "@/types/common";
+
+interface IEntityContext {
+  entityUuid?: string;
+  entityName?: EntityName;
+}
+
+const EntityContext = createContext<IEntityContext>({});
+
+type EntityFrameworkProviderProps = { entityUuid: string; entityName: EntityName; children: ReactNode };
+
+const EntityProvider = ({ children, entityUuid, entityName }: EntityFrameworkProviderProps) => (
+  <EntityContext.Provider value={{ entityUuid, entityName }}>{children}</EntityContext.Provider>
+);
+
+export const useEntityContext = () => useContext(EntityContext);
+
+export default EntityProvider;
diff --git a/src/context/modal.provider.tsx b/src/context/modal.provider.tsx
index a3b87c747..31a01301e 100644
--- a/src/context/modal.provider.tsx
+++ b/src/context/modal.provider.tsx
@@ -13,6 +13,7 @@ type ModalContextType = {
   openModal: (id: string, content: ReactNode, coverToolbar?: boolean) => void;
   closeModal: (id: string) => void;
   setModalLoading: (id: string, loading: boolean) => void;
+  modalOpened: (id: string) => boolean;
 };
 
 export const ModalContext = React.createContext<ModalContextType>({
@@ -20,7 +21,8 @@ export const ModalContext = React.createContext<ModalContextType>({
   setModalContent: () => {},
   openModal: () => {},
   closeModal: () => {},
-  setModalLoading: () => {}
+  setModalLoading: () => {},
+  modalOpened: () => false
 });
 
 type ModalProviderProps = {
@@ -48,13 +50,17 @@ const ModalProvider = ({ children }: ModalProviderProps) => {
     setModals(prevModals => prevModals.map(modal => (modal.id === id ? { ...modal, loading } : modal)));
   };
 
+  /** Checks if the modal is opened. */
+  const modalOpened = (id: string) => modals.some(modal => modal.id === id);
+
   const value = useMemo(
     () => ({
       modals,
       setModalContent,
       openModal,
       closeModal,
-      setModalLoading
+      setModalLoading,
+      modalOpened
     }),
     [modals]
   );
diff --git a/src/context/monitoredData.provider.tsx b/src/context/monitoredData.provider.tsx
new file mode 100644
index 000000000..9dc1a1ff5
--- /dev/null
+++ b/src/context/monitoredData.provider.tsx
@@ -0,0 +1,74 @@
+import React, { createContext, ReactNode, useContext } from "react";
+
+import { IpolygonFromMap } from "@/admin/components/ResourceTabs/PolygonReviewTab/components/Polygons";
+
+type MonitoredDataType = {
+  filters: {
+    uuid: string;
+  };
+  setFilters: React.Dispatch<
+    React.SetStateAction<{
+      uuid: string;
+    }>
+  >;
+  searchTerm: string;
+  setSearchTerm: React.Dispatch<React.SetStateAction<string>>;
+  indicatorSlug?: string;
+  setIndicatorSlug?: React.Dispatch<React.SetStateAction<string>>;
+  indicatorSlugAnalysis?: string;
+  setIndicatorSlugAnalysis?: React.Dispatch<React.SetStateAction<string>>;
+  loadingAnalysis?: boolean;
+  setLoadingAnalysis?: React.Dispatch<React.SetStateAction<boolean>>;
+  setSelectPolygonFromMap?: (value: IpolygonFromMap) => void;
+  selectPolygonFromMap?: IpolygonFromMap;
+};
+const defaultValues: MonitoredDataType = {
+  filters: {
+    uuid: ""
+  },
+  setFilters: () => {},
+  searchTerm: "",
+  setSearchTerm: () => {},
+  indicatorSlug: "treeCoverLoss",
+  setIndicatorSlug: () => {},
+  indicatorSlugAnalysis: "treeCoverLoss",
+  setIndicatorSlugAnalysis: () => {},
+  loadingAnalysis: false,
+  setLoadingAnalysis: () => {},
+  setSelectPolygonFromMap: () => {},
+  selectPolygonFromMap: { isOpen: false, uuid: "" }
+};
+const MonitoredDataContext = createContext<MonitoredDataType>(defaultValues);
+
+export const MonitoredDataProvider: React.FC<{ children: ReactNode }> = ({ children }) => {
+  const [filters, setFilters] = React.useState<MonitoredDataType["filters"]>(defaultValues.filters);
+  const [searchTerm, setSearchTerm] = React.useState("");
+  const [indicatorSlug, setIndicatorSlug] = React.useState("treeCoverLoss");
+  const [indicatorSlugAnalysis, setIndicatorSlugAnalysis] = React.useState("treeCoverLoss");
+  const [loadingAnalysis, setLoadingAnalysis] = React.useState<boolean>(false);
+  const [selectPolygonFromMap, setSelectPolygonFromMap] = React.useState<IpolygonFromMap>({ isOpen: false, uuid: "" });
+
+  const contextValue: MonitoredDataType = {
+    filters,
+    setFilters,
+    searchTerm,
+    setSearchTerm,
+    indicatorSlug,
+    setIndicatorSlug,
+    indicatorSlugAnalysis,
+    setIndicatorSlugAnalysis,
+    loadingAnalysis,
+    setLoadingAnalysis,
+    setSelectPolygonFromMap,
+    selectPolygonFromMap
+  };
+  return <MonitoredDataContext.Provider value={contextValue}>{children}</MonitoredDataContext.Provider>;
+};
+
+export const useMonitoredDataContext = () => {
+  const context = useContext(MonitoredDataContext);
+  if (!context) {
+    throw new Error("useMonitoredDataContext must be used within a MonitoredDataProvider");
+  }
+  return context;
+};
diff --git a/src/generated/apiComponents.ts b/src/generated/apiComponents.ts
index 651896ee8..a4e07fa0b 100644
--- a/src/generated/apiComponents.ts
+++ b/src/generated/apiComponents.ts
@@ -38154,6 +38154,314 @@ export const usePostV2TerrafundValidationPolygons = (
   );
 };
 
+export type GetV2IndicatorsEntityUuidSlugPathParams = {
+  /**
+   * Filter counts and metrics by entity.
+   */
+  entity: string;
+  /**
+   * Filter counts and metrics by entity uuid.
+   */
+  uuid: string;
+  /**
+   * Filter counts and metrics by slug.
+   */
+  slug: string;
+};
+
+export type GetV2IndicatorsEntityUuidSlugError = Fetcher.ErrorWrapper<undefined>;
+
+export type GetV2IndicatorsEntityUuidSlugResponse = {
+  ["2015"]?: number;
+  ["2016"]?: number;
+  ["2017"]?: number;
+  ["2018"]?: number;
+  ["2019"]?: number;
+  ["2020"]?: number;
+  ["2021"]?: number;
+  ["2022"]?: number;
+  ["2023"]?: number;
+  ["2024"]?: number;
+  id?: number;
+  poly_name?: string;
+  status?: string;
+  /**
+   * @format date
+   */
+  plantstart?: string;
+  site_name?: string;
+  size?: void;
+  /**
+   * @format date
+   */
+  created_at?: string;
+  indicator_slug?: string;
+  year_of_analysis?: number;
+  value?: Record<string, any>;
+}[];
+
+export type GetV2IndicatorsEntityUuidSlugVariables = {
+  pathParams: GetV2IndicatorsEntityUuidSlugPathParams;
+} & ApiContext["fetcherOptions"];
+
+export const fetchGetV2IndicatorsEntityUuidSlug = (
+  variables: GetV2IndicatorsEntityUuidSlugVariables,
+  signal?: AbortSignal
+) =>
+  apiFetch<
+    GetV2IndicatorsEntityUuidSlugResponse,
+    GetV2IndicatorsEntityUuidSlugError,
+    undefined,
+    {},
+    {},
+    GetV2IndicatorsEntityUuidSlugPathParams
+  >({ url: "/v2/indicators/{entity}/{uuid}/{slug}", method: "get", ...variables, signal });
+
+export const useGetV2IndicatorsEntityUuidSlug = <TData = GetV2IndicatorsEntityUuidSlugResponse>(
+  variables: GetV2IndicatorsEntityUuidSlugVariables,
+  options?: Omit<
+    reactQuery.UseQueryOptions<GetV2IndicatorsEntityUuidSlugResponse, GetV2IndicatorsEntityUuidSlugError, TData>,
+    "queryKey" | "queryFn"
+  >
+) => {
+  const { fetcherOptions, queryOptions, queryKeyFn } = useApiContext(options);
+  return reactQuery.useQuery<GetV2IndicatorsEntityUuidSlugResponse, GetV2IndicatorsEntityUuidSlugError, TData>(
+    queryKeyFn({
+      path: "/v2/indicators/{entity}/{uuid}/{slug}",
+      operationId: "getV2IndicatorsEntityUuidSlug",
+      variables
+    }),
+    ({ signal }) => fetchGetV2IndicatorsEntityUuidSlug({ ...fetcherOptions, ...variables }, signal),
+    {
+      ...options,
+      ...queryOptions
+    }
+  );
+};
+
+export type PostV2IndicatorsSlugPathParams = {
+  /**
+   * Optional. Filter counts and metrics by slug.
+   */
+  slug: string;
+};
+
+export type PostV2IndicatorsSlugError = Fetcher.ErrorWrapper<undefined>;
+
+export type PostV2IndicatorsSlugResponse = {
+  uuids?: string[];
+};
+
+export type PostV2IndicatorsSlugRequestBody = {
+  uuids?: string[];
+};
+
+export type PostV2IndicatorsSlugVariables = {
+  body?: PostV2IndicatorsSlugRequestBody;
+  pathParams: PostV2IndicatorsSlugPathParams;
+} & ApiContext["fetcherOptions"];
+
+export const fetchPostV2IndicatorsSlug = (variables: PostV2IndicatorsSlugVariables, signal?: AbortSignal) =>
+  apiFetch<
+    PostV2IndicatorsSlugResponse,
+    PostV2IndicatorsSlugError,
+    PostV2IndicatorsSlugRequestBody,
+    {},
+    {},
+    PostV2IndicatorsSlugPathParams
+  >({ url: "/v2/indicators/{slug}", method: "post", ...variables, signal });
+
+export const usePostV2IndicatorsSlug = (
+  options?: Omit<
+    reactQuery.UseMutationOptions<
+      PostV2IndicatorsSlugResponse,
+      PostV2IndicatorsSlugError,
+      PostV2IndicatorsSlugVariables
+    >,
+    "mutationFn"
+  >
+) => {
+  const { fetcherOptions } = useApiContext();
+  return reactQuery.useMutation<PostV2IndicatorsSlugResponse, PostV2IndicatorsSlugError, PostV2IndicatorsSlugVariables>(
+    (variables: PostV2IndicatorsSlugVariables) => fetchPostV2IndicatorsSlug({ ...fetcherOptions, ...variables }),
+    options
+  );
+};
+
+export type GetV2IndicatorsEntityUuidPathParams = {
+  /**
+   * Filter counts and metrics by entity.
+   */
+  entity: string;
+  /**
+   * Filter counts and metrics by entity uuid.
+   */
+  uuid: string;
+};
+
+export type GetV2IndicatorsEntityUuidError = Fetcher.ErrorWrapper<undefined>;
+
+export type GetV2IndicatorsEntityUuidResponse = {
+  draft?: number;
+  submitted?: number;
+  approved?: number;
+  ["needs-more-information"]?: number;
+}[];
+
+export type GetV2IndicatorsEntityUuidVariables = {
+  pathParams: GetV2IndicatorsEntityUuidPathParams;
+} & ApiContext["fetcherOptions"];
+
+export const fetchGetV2IndicatorsEntityUuid = (variables: GetV2IndicatorsEntityUuidVariables, signal?: AbortSignal) =>
+  apiFetch<
+    GetV2IndicatorsEntityUuidResponse,
+    GetV2IndicatorsEntityUuidError,
+    undefined,
+    {},
+    {},
+    GetV2IndicatorsEntityUuidPathParams
+  >({ url: "/v2/indicators/{entity}/{uuid}", method: "get", ...variables, signal });
+
+export const useGetV2IndicatorsEntityUuid = <TData = GetV2IndicatorsEntityUuidResponse>(
+  variables: GetV2IndicatorsEntityUuidVariables,
+  options?: Omit<
+    reactQuery.UseQueryOptions<GetV2IndicatorsEntityUuidResponse, GetV2IndicatorsEntityUuidError, TData>,
+    "queryKey" | "queryFn"
+  >
+) => {
+  const { fetcherOptions, queryOptions, queryKeyFn } = useApiContext(options);
+  return reactQuery.useQuery<GetV2IndicatorsEntityUuidResponse, GetV2IndicatorsEntityUuidError, TData>(
+    queryKeyFn({ path: "/v2/indicators/{entity}/{uuid}", operationId: "getV2IndicatorsEntityUuid", variables }),
+    ({ signal }) => fetchGetV2IndicatorsEntityUuid({ ...fetcherOptions, ...variables }, signal),
+    {
+      ...options,
+      ...queryOptions
+    }
+  );
+};
+
+export type GetV2IndicatorsEntityUuidSlugVerifyPathParams = {
+  /**
+   * Filter counts and metrics by entity.
+   */
+  entity: string;
+  /**
+   * Filter counts and metrics by entity uuid.
+   */
+  uuid: string;
+  /**
+   * Filter counts and metrics by slug.
+   */
+  slug: string;
+};
+
+export type GetV2IndicatorsEntityUuidSlugVerifyError = Fetcher.ErrorWrapper<undefined>;
+
+export type GetV2IndicatorsEntityUuidSlugVerifyResponse = any[];
+
+export type GetV2IndicatorsEntityUuidSlugVerifyVariables = {
+  pathParams: GetV2IndicatorsEntityUuidSlugVerifyPathParams;
+} & ApiContext["fetcherOptions"];
+
+export const fetchGetV2IndicatorsEntityUuidSlugVerify = (
+  variables: GetV2IndicatorsEntityUuidSlugVerifyVariables,
+  signal?: AbortSignal
+) =>
+  apiFetch<
+    GetV2IndicatorsEntityUuidSlugVerifyResponse,
+    GetV2IndicatorsEntityUuidSlugVerifyError,
+    undefined,
+    {},
+    {},
+    GetV2IndicatorsEntityUuidSlugVerifyPathParams
+  >({ url: "/v2/indicators/{entity}/{uuid}/{slug}/verify", method: "get", ...variables, signal });
+
+export const useGetV2IndicatorsEntityUuidSlugVerify = <TData = GetV2IndicatorsEntityUuidSlugVerifyResponse>(
+  variables: GetV2IndicatorsEntityUuidSlugVerifyVariables,
+  options?: Omit<
+    reactQuery.UseQueryOptions<
+      GetV2IndicatorsEntityUuidSlugVerifyResponse,
+      GetV2IndicatorsEntityUuidSlugVerifyError,
+      TData
+    >,
+    "queryKey" | "queryFn"
+  >
+) => {
+  const { fetcherOptions, queryOptions, queryKeyFn } = useApiContext(options);
+  return reactQuery.useQuery<
+    GetV2IndicatorsEntityUuidSlugVerifyResponse,
+    GetV2IndicatorsEntityUuidSlugVerifyError,
+    TData
+  >(
+    queryKeyFn({
+      path: "/v2/indicators/{entity}/{uuid}/{slug}/verify",
+      operationId: "getV2IndicatorsEntityUuidSlugVerify",
+      variables
+    }),
+    ({ signal }) => fetchGetV2IndicatorsEntityUuidSlugVerify({ ...fetcherOptions, ...variables }, signal),
+    {
+      ...options,
+      ...queryOptions
+    }
+  );
+};
+
+export type GetV2IndicatorsEntityUuidSlugExportPathParams = {
+  /**
+   * Filter counts and metrics by entity.
+   */
+  entity: string;
+  /**
+   * Filter counts and metrics by entity uuid.
+   */
+  uuid: string;
+  /**
+   * Filter counts and metrics by slug.
+   */
+  slug: string;
+};
+
+export type GetV2IndicatorsEntityUuidSlugExportError = Fetcher.ErrorWrapper<undefined>;
+
+export type GetV2IndicatorsEntityUuidSlugExportVariables = {
+  pathParams: GetV2IndicatorsEntityUuidSlugExportPathParams;
+} & ApiContext["fetcherOptions"];
+
+export const fetchGetV2IndicatorsEntityUuidSlugExport = (
+  variables: GetV2IndicatorsEntityUuidSlugExportVariables,
+  signal?: AbortSignal
+) =>
+  apiFetch<
+    undefined,
+    GetV2IndicatorsEntityUuidSlugExportError,
+    undefined,
+    {},
+    {},
+    GetV2IndicatorsEntityUuidSlugExportPathParams
+  >({ url: "/v2/indicators/{entity}/{uuid}/{slug}/export", method: "get", ...variables, signal });
+
+export const useGetV2IndicatorsEntityUuidSlugExport = <TData = undefined>(
+  variables: GetV2IndicatorsEntityUuidSlugExportVariables,
+  options?: Omit<
+    reactQuery.UseQueryOptions<undefined, GetV2IndicatorsEntityUuidSlugExportError, TData>,
+    "queryKey" | "queryFn"
+  >
+) => {
+  const { fetcherOptions, queryOptions, queryKeyFn } = useApiContext(options);
+  return reactQuery.useQuery<undefined, GetV2IndicatorsEntityUuidSlugExportError, TData>(
+    queryKeyFn({
+      path: "/v2/indicators/{entity}/{uuid}/{slug}/export",
+      operationId: "getV2IndicatorsEntityUuidSlugExport",
+      variables
+    }),
+    ({ signal }) => fetchGetV2IndicatorsEntityUuidSlugExport({ ...fetcherOptions, ...variables }, signal),
+    {
+      ...options,
+      ...queryOptions
+    }
+  );
+};
+
 export type QueryOperation =
   | {
       path: "/v2/tree-species/{entity}/{UUID}";
@@ -38859,4 +39167,24 @@ export type QueryOperation =
       path: "/v2/site-polygon/{uuid}/versions";
       operationId: "getV2SitePolygonUuidVersions";
       variables: GetV2SitePolygonUuidVersionsVariables;
+    }
+  | {
+      path: "/v2/indicators/{entity}/{uuid}/{slug}";
+      operationId: "getV2IndicatorsEntityUuidSlug";
+      variables: GetV2IndicatorsEntityUuidSlugVariables;
+    }
+  | {
+      path: "/v2/indicators/{entity}/{uuid}";
+      operationId: "getV2IndicatorsEntityUuid";
+      variables: GetV2IndicatorsEntityUuidVariables;
+    }
+  | {
+      path: "/v2/indicators/{entity}/{uuid}/{slug}/verify";
+      operationId: "getV2IndicatorsEntityUuidSlugVerify";
+      variables: GetV2IndicatorsEntityUuidSlugVerifyVariables;
+    }
+  | {
+      path: "/v2/indicators/{entity}/{uuid}/{slug}/export";
+      operationId: "getV2IndicatorsEntityUuidSlugExport";
+      variables: GetV2IndicatorsEntityUuidSlugExportVariables;
     };
diff --git a/src/generated/apiSchemas.ts b/src/generated/apiSchemas.ts
index 0ca65e9b5..c68f2fe35 100644
--- a/src/generated/apiSchemas.ts
+++ b/src/generated/apiSchemas.ts
@@ -23660,3 +23660,43 @@ export type UserCreateComplete = {
 export type V2AdminProjectUpdate = {
   is_test?: boolean;
 };
+
+export type IndicatorPost = {
+  uuids?: string[];
+};
+
+export type Indicators = {
+  ["2015"]?: number;
+  ["2016"]?: number;
+  ["2017"]?: number;
+  ["2018"]?: number;
+  ["2019"]?: number;
+  ["2020"]?: number;
+  ["2021"]?: number;
+  ["2022"]?: number;
+  ["2023"]?: number;
+  ["2024"]?: number;
+  id?: number;
+  poly_name?: string;
+  status?: string;
+  /**
+   * @format date
+   */
+  plantstart?: string;
+  site_name?: string;
+  size?: void;
+  /**
+   * @format date
+   */
+  created_at?: string;
+  indicator_slug?: string;
+  year_of_analysis?: number;
+  value?: Record<string, any>;
+};
+
+export type IndicatorPolygonsStatus = {
+  draft?: number;
+  submitted?: number;
+  approved?: number;
+  ["needs-more-information"]?: number;
+};
diff --git a/src/generated/v3/entityService/entityServiceComponents.ts b/src/generated/v3/entityService/entityServiceComponents.ts
new file mode 100644
index 000000000..964c60fcf
--- /dev/null
+++ b/src/generated/v3/entityService/entityServiceComponents.ts
@@ -0,0 +1,115 @@
+/**
+ * Generated by @openapi-codegen
+ *
+ * @version 1.0
+ */
+import type * as Fetcher from "./entityServiceFetcher";
+import { entityServiceFetch } from "./entityServiceFetcher";
+import type * as Schemas from "./entityServiceSchemas";
+
+export type TreeScientificNamesSearchQueryParams = {
+  search: string;
+};
+
+export type TreeScientificNamesSearchError = Fetcher.ErrorWrapper<undefined>;
+
+export type TreeScientificNamesSearchResponse = {
+  data?: {
+    /**
+     * @example treeSpeciesScientificNames
+     */
+    type?: string;
+    id?: string;
+    attributes?: Schemas.ScientificNameDto;
+  }[];
+};
+
+export type TreeScientificNamesSearchVariables = {
+  queryParams: TreeScientificNamesSearchQueryParams;
+};
+
+/**
+ * Search scientific names of tree species. Returns up to 10 entries.
+ */
+export const treeScientificNamesSearch = (variables: TreeScientificNamesSearchVariables, signal?: AbortSignal) =>
+  entityServiceFetch<
+    TreeScientificNamesSearchResponse,
+    TreeScientificNamesSearchError,
+    undefined,
+    {},
+    TreeScientificNamesSearchQueryParams,
+    {}
+  >({ url: "/trees/v3/scientific-names", method: "get", ...variables, signal });
+
+export type EstablishmentTreesFindPathParams = {
+  /**
+   * Entity type for which to retrieve the establishment tree data.
+   */
+  entity: "sites" | "nurseries" | "project-reports" | "site-reports" | "nursery-reports";
+  /**
+   * Entity UUID for which to retrieve the establishment tree data.
+   */
+  uuid: string;
+};
+
+export type EstablishmentTreesFindError = Fetcher.ErrorWrapper<
+  | {
+      status: 400;
+      payload: {
+        /**
+         * @example 400
+         */
+        statusCode: number;
+        /**
+         * @example Bad Request
+         */
+        message: string;
+        /**
+         * @example Bad Request
+         */
+        error?: string;
+      };
+    }
+  | {
+      status: 401;
+      payload: {
+        /**
+         * @example 401
+         */
+        statusCode: number;
+        /**
+         * @example Unauthorized
+         */
+        message: string;
+        /**
+         * @example Unauthorized
+         */
+        error?: string;
+      };
+    }
+>;
+
+export type EstablishmentTreesFindResponse = {
+  data?: {
+    /**
+     * @example establishmentTrees
+     */
+    type?: string;
+    id?: string;
+    attributes?: Schemas.EstablishmentsTreesDto;
+  };
+};
+
+export type EstablishmentTreesFindVariables = {
+  pathParams: EstablishmentTreesFindPathParams;
+};
+
+export const establishmentTreesFind = (variables: EstablishmentTreesFindVariables, signal?: AbortSignal) =>
+  entityServiceFetch<
+    EstablishmentTreesFindResponse,
+    EstablishmentTreesFindError,
+    undefined,
+    {},
+    {},
+    EstablishmentTreesFindPathParams
+  >({ url: "/trees/v3/establishments/{entity}/{uuid}", method: "get", ...variables, signal });
diff --git a/src/generated/v3/entityService/entityServiceFetcher.ts b/src/generated/v3/entityService/entityServiceFetcher.ts
new file mode 100644
index 000000000..b2ae84123
--- /dev/null
+++ b/src/generated/v3/entityService/entityServiceFetcher.ts
@@ -0,0 +1,6 @@
+// This type is imported in the auto generated `userServiceComponents` file, so it needs to be
+// exported from this file.
+export type { ErrorWrapper } from "../utils";
+
+// The serviceFetch method is the shared fetch method for all service fetchers.
+export { serviceFetch as entityServiceFetch } from "../utils";
diff --git a/src/generated/v3/entityService/entityServicePredicates.ts b/src/generated/v3/entityService/entityServicePredicates.ts
new file mode 100644
index 000000000..c27dd2821
--- /dev/null
+++ b/src/generated/v3/entityService/entityServicePredicates.ts
@@ -0,0 +1,43 @@
+import { isFetching, fetchFailed } from "../utils";
+import { ApiDataStore } from "@/store/apiSlice";
+import {
+  TreeScientificNamesSearchQueryParams,
+  TreeScientificNamesSearchVariables,
+  EstablishmentTreesFindPathParams,
+  EstablishmentTreesFindVariables
+} from "./entityServiceComponents";
+
+export const treeScientificNamesSearchIsFetching =
+  (variables: TreeScientificNamesSearchVariables) => (store: ApiDataStore) =>
+    isFetching<TreeScientificNamesSearchQueryParams, {}>({
+      store,
+      url: "/trees/v3/scientific-names",
+      method: "get",
+      ...variables
+    });
+
+export const treeScientificNamesSearchFetchFailed =
+  (variables: TreeScientificNamesSearchVariables) => (store: ApiDataStore) =>
+    fetchFailed<TreeScientificNamesSearchQueryParams, {}>({
+      store,
+      url: "/trees/v3/scientific-names",
+      method: "get",
+      ...variables
+    });
+
+export const establishmentTreesFindIsFetching = (variables: EstablishmentTreesFindVariables) => (store: ApiDataStore) =>
+  isFetching<{}, EstablishmentTreesFindPathParams>({
+    store,
+    url: "/trees/v3/establishments/{entity}/{uuid}",
+    method: "get",
+    ...variables
+  });
+
+export const establishmentTreesFindFetchFailed =
+  (variables: EstablishmentTreesFindVariables) => (store: ApiDataStore) =>
+    fetchFailed<{}, EstablishmentTreesFindPathParams>({
+      store,
+      url: "/trees/v3/establishments/{entity}/{uuid}",
+      method: "get",
+      ...variables
+    });
diff --git a/src/generated/v3/entityService/entityServiceSchemas.ts b/src/generated/v3/entityService/entityServiceSchemas.ts
new file mode 100644
index 000000000..bb11f5e3f
--- /dev/null
+++ b/src/generated/v3/entityService/entityServiceSchemas.ts
@@ -0,0 +1,28 @@
+/**
+ * Generated by @openapi-codegen
+ *
+ * @version 1.0
+ */
+export type ScientificNameDto = {
+  /**
+   * The scientific name for this tree species
+   *
+   * @example Abelia uniflora
+   */
+  scientificName: string;
+};
+
+export type EstablishmentsTreesDto = {
+  /**
+   * The species that were specified at the establishment of the parent entity.
+   */
+  establishmentTrees: string[];
+  /**
+   * If the entity in this request is a report, the sum totals of previous planting by species.
+   *
+   * @example {"Aster persaliens":256,"Cirsium carniolicum":1024}
+   */
+  previousPlantingCounts: {
+    [key: string]: number;
+  } | null;
+};
diff --git a/src/generated/v3/utils.ts b/src/generated/v3/utils.ts
index 4faf790bc..29a69385c 100644
--- a/src/generated/v3/utils.ts
+++ b/src/generated/v3/utils.ts
@@ -1,7 +1,7 @@
 import ApiSlice, { ApiDataStore, isErrorState, isInProgress, Method, PendingErrorState } from "@/store/apiSlice";
 import Log from "@/utils/log";
 import { selectLogin } from "@/connections/Login";
-import { jobServiceUrl, userServiceUrl } from "@/constants/environment";
+import { entityServiceUrl, jobServiceUrl, userServiceUrl } from "@/constants/environment";
 
 export type ErrorWrapper<TError> = TError | { statusCode: -1; message: string };
 
@@ -16,7 +16,8 @@ type SelectorOptions<TQueryParams, TPathParams> = {
 const V3_NAMESPACES: Record<string, string> = {
   auth: userServiceUrl,
   users: userServiceUrl,
-  jobs: jobServiceUrl
+  jobs: jobServiceUrl,
+  trees: entityServiceUrl
 } as const;
 
 const getBaseUrl = (url: string) => {
diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx
index 2161956e3..c0d979182 100644
--- a/src/pages/_app.tsx
+++ b/src/pages/_app.tsx
@@ -36,6 +36,7 @@ if (typeof window !== "undefined") {
 }
 
 import FloatNotificationProvider from "@/context/floatNotification.provider";
+import { MonitoredDataProvider } from "@/context/monitoredData.provider";
 
 import DashboardAnalyticsWrapper from "./dashboard/DashboardAnalyticsWrapper";
 
@@ -96,10 +97,12 @@ const _App = ({ Component, ...rest }: AppProps) => {
           <LoadingProvider>
             <FloatNotificationProvider>
               <NotificationProvider>
-                <ModalProvider>
-                  <ModalRoot />
-                  <Component {...pageProps} />
-                </ModalProvider>
+                <MonitoredDataProvider>
+                  <ModalProvider>
+                    <ModalRoot />
+                    <Component {...pageProps} />
+                  </ModalProvider>
+                </MonitoredDataProvider>
               </NotificationProvider>
             </FloatNotificationProvider>
           </LoadingProvider>
diff --git a/src/pages/dashboard/components/SecDashboard.tsx b/src/pages/dashboard/components/SecDashboard.tsx
index ded2cb9f9..b62a676b4 100644
--- a/src/pages/dashboard/components/SecDashboard.tsx
+++ b/src/pages/dashboard/components/SecDashboard.tsx
@@ -55,7 +55,8 @@ const SecDashboard = ({
   dataForChart,
   chartType,
   isUserAllowed = true,
-  isLoading = false
+  isLoading = false,
+  showTreesRestoredGraph = true
 }: {
   title: string;
   type?: "legend" | "toggle";
@@ -73,6 +74,7 @@ const SecDashboard = ({
   chartType?: string;
   isUserAllowed?: boolean;
   isLoading?: boolean;
+  showTreesRestoredGraph?: boolean;
 }) => {
   const router = useRouter();
   const [toggleValue, setToggleValue] = useState(0);
@@ -161,7 +163,7 @@ const SecDashboard = ({
         {data?.value !== undefined && (
           <ValueNumberDashboard value={data.value} unit={data.unit} totalValue={data.totalValue} />
         )}
-        <When condition={data?.totalValue}>
+        <When condition={data?.totalValue && showTreesRestoredGraph}>
           <div className="relative h-9 w-[315px]">
             <div className="absolute inset-0 z-0 h-full w-full">
               <HorizontalStackedBarChart data={restorationGoalResume} className="h-full w-full" />
diff --git a/src/pages/entity/[entityName]/edit/[uuid]/EditEntityForm.tsx b/src/pages/entity/[entityName]/edit/[uuid]/EditEntityForm.tsx
index 1e7eaa556..8b7876904 100644
--- a/src/pages/entity/[entityName]/edit/[uuid]/EditEntityForm.tsx
+++ b/src/pages/entity/[entityName]/edit/[uuid]/EditEntityForm.tsx
@@ -3,6 +3,7 @@ import { useRouter } from "next/router";
 import { useMemo } from "react";
 
 import WizardForm from "@/components/extensive/WizardForm";
+import EntityProvider from "@/context/entity.provider";
 import { useFrameworkContext } from "@/context/framework.provider";
 import {
   GetV2FormsENTITYUUIDResponse,
@@ -88,54 +89,56 @@ const EditEntityForm = ({ entityName, entityUUID, entity, formData }: EditEntity
   }, [formSteps, mode]);
 
   return (
-    <WizardForm
-      steps={formSteps!}
-      errors={error}
-      onBackFirstStep={router.back}
-      onCloseForm={() => router.push("/home")}
-      onChange={(data, closeAndSave?: boolean) =>
-        updateEntity({
-          pathParams: { uuid: entityUUID, entity: entityName },
-          // @ts-ignore
-          body: {
-            answers: normalizedFormData(data, formSteps!),
-            ...(closeAndSave ? { continue_later_action: true } : {})
-          }
-        })
-      }
-      formStatus={isSuccess ? "saved" : isUpdating ? "saving" : undefined}
-      onSubmit={() =>
-        submitEntity({
-          pathParams: {
-            entity: entityName,
-            uuid: entityUUID
-          }
-        })
-      }
-      submitButtonDisable={isSubmitting}
-      defaultValues={defaultValues}
-      title={formTitle}
-      tabOptions={{
-        markDone: true,
-        disableFutureTabs: true
-      }}
-      summaryOptions={{
-        title: t("Review Details"),
-        downloadButtonText: t("Download")
-      }}
-      roundedCorners
-      saveAndCloseModal={{
-        content:
-          saveAndCloseModalMapping[entityName] ??
-          t(
-            "You have made progress on this form. If you close the form now, your progress will be saved for when you come back. You can access this form again on the reporting tasks section under your project page. Would you like to close this form and continue later?"
-          ),
-        onConfirm() {
-          router.push(getEntityDetailPageLink(entityName, entityUUID));
+    <EntityProvider entityUuid={entityUUID} entityName={entityName}>
+      <WizardForm
+        steps={formSteps!}
+        errors={error}
+        onBackFirstStep={router.back}
+        onCloseForm={() => router.push("/home")}
+        onChange={(data, closeAndSave?: boolean) =>
+          updateEntity({
+            pathParams: { uuid: entityUUID, entity: entityName },
+            // @ts-ignore
+            body: {
+              answers: normalizedFormData(data, formSteps!),
+              ...(closeAndSave ? { continue_later_action: true } : {})
+            }
+          })
+        }
+        formStatus={isSuccess ? "saved" : isUpdating ? "saving" : undefined}
+        onSubmit={() =>
+          submitEntity({
+            pathParams: {
+              entity: entityName,
+              uuid: entityUUID
+            }
+          })
         }
-      }}
-      {...initialStepProps}
-    />
+        submitButtonDisable={isSubmitting}
+        defaultValues={defaultValues}
+        title={formTitle}
+        tabOptions={{
+          markDone: true,
+          disableFutureTabs: true
+        }}
+        summaryOptions={{
+          title: t("Review Details"),
+          downloadButtonText: t("Download")
+        }}
+        roundedCorners
+        saveAndCloseModal={{
+          content:
+            saveAndCloseModalMapping[entityName] ??
+            t(
+              "You have made progress on this form. If you close the form now, your progress will be saved for when you come back. You can access this form again on the reporting tasks section under your project page. Would you like to close this form and continue later?"
+            ),
+          onConfirm() {
+            router.push(getEntityDetailPageLink(entityName, entityUUID));
+          }
+        }}
+        {...initialStepProps}
+      />
+    </EntityProvider>
   );
 };
 
diff --git a/src/pages/project/[uuid]/reporting-task/[reportingTaskUUID].page.tsx b/src/pages/project/[uuid]/reporting-task/[reportingTaskUUID].page.tsx
index bcde2efe4..d7394c06a 100644
--- a/src/pages/project/[uuid]/reporting-task/[reportingTaskUUID].page.tsx
+++ b/src/pages/project/[uuid]/reporting-task/[reportingTaskUUID].page.tsx
@@ -187,7 +187,6 @@ const ReportingTaskPage = () => {
       enableSorting: false,
       cell: props => {
         const record = props.row.original as any;
-        console.log(record);
         const [isEnabled, setIsEnabled] = useState(true);
         const { index } = props.row;
         const { status, type, completion, uuid } = record;
diff --git a/src/store/apiSlice.ts b/src/store/apiSlice.ts
index 123c603fa..d1fff1cc8 100644
--- a/src/store/apiSlice.ts
+++ b/src/store/apiSlice.ts
@@ -5,6 +5,7 @@ import { HYDRATE } from "next-redux-wrapper";
 import { Store } from "redux";
 
 import { setAccessToken } from "@/admin/apiProvider/utils/token";
+import { EstablishmentsTreesDto } from "@/generated/v3/entityService/entityServiceSchemas";
 import { DelayedJobDto } from "@/generated/v3/jobService/jobServiceSchemas";
 import { LoginDto, OrganisationDto, UserDto } from "@/generated/v3/userService/userServiceSchemas";
 
@@ -54,10 +55,11 @@ type StoreResourceMap<AttributeType> = Record<string, StoreResource<AttributeTyp
 
 // The list of potential resource types. IMPORTANT: When a new resource type is integrated, it must
 // be added to this list.
-export const RESOURCES = ["delayedJobs", "logins", "organisations", "users"] as const;
+export const RESOURCES = ["delayedJobs", "establishmentTrees", "logins", "organisations", "users"] as const;
 
 type ApiResources = {
   delayedJobs: StoreResourceMap<DelayedJobDto>;
+  establishmentTrees: StoreResourceMap<EstablishmentsTreesDto>;
   logins: StoreResourceMap<LoginDto>;
   organisations: StoreResourceMap<OrganisationDto>;
   users: StoreResourceMap<UserDto>;
diff --git a/src/store/store.ts b/src/store/store.ts
index 4b9679305..768fd08dd 100644
--- a/src/store/store.ts
+++ b/src/store/store.ts
@@ -36,6 +36,11 @@ export const makeStore = () => {
 
   ApiSlice.redux = store;
 
+  if (typeof window !== "undefined" && (window as any).terramatch != null) {
+    // Make some things available to the browser console for easy debugging.
+    (window as any).terramatch.getApiState = () => store.getState();
+  }
+
   return store;
 };
 
diff --git a/src/types/common.ts b/src/types/common.ts
index c4f12f305..c68464509 100644
--- a/src/types/common.ts
+++ b/src/types/common.ts
@@ -231,10 +231,18 @@ export type EntityName = BaseModelNames | ReportsModelNames;
 export type BaseModelNames = "projects" | "sites" | "nurseries" | "project-pitches";
 export type ReportsModelNames = "project-reports" | "site-reports" | "nursery-reports";
 
+export const isBaseModelName = (name: EntityName): name is BaseModelNames => !name.endsWith("-reports");
+export const isReportModelName = (name: EntityName): name is ReportsModelNames => name.endsWith("-reports");
+
 export type SingularEntityName = SingularBaseModelNames | SingularReportsModelNames;
 export type SingularBaseModelNames = "project" | "site" | "nursery" | "project-pitch";
 export type SingularReportsModelNames = "project-report" | "site-report" | "nursery-report";
 
+export const isSingularBaseModelName = (name: SingularEntityName): name is SingularBaseModelNames =>
+  !name.endsWith("-report");
+export const isSingularReportModelName = (name: SingularEntityName): name is SingularReportsModelNames =>
+  name.endsWith("-report");
+
 export type Entity = {
   entityName: EntityName | SingularEntityName;
   entityUUID: string;
diff --git a/src/utils/dashboardUtils.ts b/src/utils/dashboardUtils.ts
index dca701d44..22632fce1 100644
--- a/src/utils/dashboardUtils.ts
+++ b/src/utils/dashboardUtils.ts
@@ -1,4 +1,4 @@
-import { CHART_TYPES, MONTHS } from "@/constants/dashboardConsts";
+import { CHART_TYPES, DEFAULT_POLYGONS_DATA, MONTHS } from "@/constants/dashboardConsts";
 import { DashboardTreeRestorationGoalResponse } from "@/generated/apiSchemas";
 
 type DataPoint = {
@@ -123,6 +123,33 @@ interface ChartCategory {
   values: ChartDataPoint[];
 }
 
+interface PolygonIndicator {
+  id?: number;
+  poly_name?: string;
+  status?: string;
+  data?: Record<string, number>;
+  value?: Record<string, any>;
+  [key: string]: any;
+}
+
+export interface ParsedPolygonsData {
+  graphicTargetLandUseTypes: ParsedLandUseType[];
+  totalSection: {
+    totalHectaresRestored: number;
+  };
+}
+
+interface ParsedResult {
+  chartData: ChartDataItem[];
+  total: number;
+}
+
+type YearlyData = {
+  name: number;
+  treeCoverLoss: number;
+  treeCoverLossFires: number;
+};
+
 export const formatNumberUS = (value: number) =>
   value ? (value >= 1000000 ? `${(value / 1000000).toFixed(2)}M` : value.toLocaleString("en-US")) : "";
 
@@ -416,3 +443,147 @@ export const isEmptyChartData = (chartType: string, data: any): boolean => {
       return false;
   }
 };
+
+const formatLabel = (key: string): string => {
+  return key
+    .split("_")
+    .map(word => word.charAt(0).toUpperCase() + word.slice(1))
+    .join(" ");
+};
+
+export const parsePolygonsIndicatorDataForLandUse = (
+  polygonsIndicator: PolygonIndicator[],
+  totalHectares: number
+): ParsedPolygonsData => {
+  if (!polygonsIndicator?.length) {
+    return DEFAULT_POLYGONS_DATA;
+  }
+
+  const { aggregatedData } = polygonsIndicator.reduce(
+    (acc, polygon) => {
+      if (!polygon.data) return acc;
+
+      Object.entries(polygon.data).forEach(([key, value]) => {
+        const label = formatLabel(key);
+        const numericValue = Number(value);
+        acc.aggregatedData[label] = (acc.aggregatedData[label] || 0) + numericValue;
+      });
+
+      return acc;
+    },
+    {
+      aggregatedData: {} as Record<string, number>
+    }
+  );
+
+  const graphicTargetLandUseTypes = Object.entries(aggregatedData).map(([label, value]) => {
+    const percentage = calculatePercentage(value as number, totalHectares);
+    const adjustedValue = (value as number) > totalHectares ? totalHectares : value;
+    return {
+      label,
+      value: adjustedValue as number,
+      valueText: `${Math.round(value as number)} ha ${percentage.toFixed(2)}%`
+    };
+  });
+
+  return {
+    graphicTargetLandUseTypes,
+    totalSection: {
+      totalHectaresRestored: totalHectares
+    }
+  };
+};
+
+export const parsePolygonsIndicatorDataForStrategies = (polygonsIndicator: PolygonIndicator[]): ParsedDataItem[] => {
+  const totals = {
+    "Tree Planting": 0,
+    "Direct Seeding": 0,
+    "Assisted Natural Regeneration": 0,
+    "Multiple Strategies": 0
+  };
+
+  polygonsIndicator.forEach(polygon => {
+    const strategies = polygon.data ? Object.keys(polygon.data) : [];
+
+    if (strategies.length === 1) {
+      const strategy = strategies[0];
+      switch (strategy) {
+        case "tree_planting":
+          totals["Tree Planting"] += polygon.data?.[strategy] || 0;
+          break;
+        case "direct_seeding":
+          totals["Direct Seeding"] += polygon.data?.[strategy] || 0;
+          break;
+        case "assisted_natural_regeneration":
+          totals["Assisted Natural Regeneration"] += polygon.data?.[strategy] || 0;
+          break;
+      }
+    } else if (strategies.length > 1) {
+      const totalValue = polygon.data ? Object.values(polygon.data).reduce((sum, value) => sum + (value || 0), 0) : 0;
+      totals["Multiple Strategies"] += totalValue;
+    }
+  });
+
+  return Object.entries(totals)
+    .filter(([_, value]) => value > 0)
+    .map(([label, value]) => ({
+      label,
+      value: Number(value.toFixed(2))
+    }));
+};
+
+export const parsePolygonsIndicatorDataForEcoRegion = (polygons: PolygonIndicator[]): ParsedResult => {
+  const result: ParsedResult = {
+    chartData: [],
+    total: 0
+  };
+
+  const ecoRegionMap = new Map<string, number>();
+
+  polygons.forEach(polygon => {
+    polygon.data &&
+      Object.entries(polygon.data).forEach(([name, value]) => {
+        ecoRegionMap.set(name, (ecoRegionMap.get(name) || 0) + value);
+      });
+  });
+
+  result.chartData = Array.from(ecoRegionMap, ([name, value]) => ({
+    name: formatLabel(name),
+    value: Number(value.toFixed(3))
+  }));
+
+  result.total = Number(result.chartData.reduce((sum, item) => sum + Number(item.value), 0).toFixed(3));
+
+  return result;
+};
+
+export function parseTreeCoverData(
+  treeCoverLossData: PolygonIndicator[],
+  treeCoverLossFiresData: PolygonIndicator[]
+): YearlyData[] {
+  const years = Array.from(
+    new Set(
+      treeCoverLossData
+        .flatMap(entry => (entry.data ? Object.keys(entry.data) : []))
+        .concat(treeCoverLossFiresData.flatMap(entry => (entry.data ? Object.keys(entry.data) : [])))
+    )
+  ).sort();
+
+  return years.map(year => {
+    const yearNumber = parseInt(year, 10);
+
+    const treeCoverLossSum = treeCoverLossData.reduce((sum, entry) => {
+      return sum + (entry.data?.[year] || 0);
+    }, 0);
+
+    const treeCoverLossFiresSum = treeCoverLossFiresData.reduce((sum, entry) => {
+      return sum + (entry.data?.[year] || 0);
+    }, 0);
+
+    return {
+      name: yearNumber,
+      treeCoverLoss: treeCoverLossSum,
+      treeCoverLossFires: treeCoverLossFiresSum
+    };
+  });
+}
diff --git a/tailwind.config.js b/tailwind.config.js
index c98479c9f..665a4e100 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -90,6 +90,7 @@ module.exports = {
         600: "#29C499",
         500: "#009344",
         450: "#3BAE5B",
+        410: "#27E045",
         400: "#9EDD8F",
         300: "#C7ECC4",
         200: "#E0F3E9",
@@ -107,6 +108,7 @@ module.exports = {
         400: "#B1B1B1",
         450: "#CCD4D6",
         300: "#D8D8D8",
+        250: "#F7F7F7",
         200: "#E3E3E3",
         150: "#F5F7F9",
         100: "#F2F2F2",
diff --git a/tsconfig.json b/tsconfig.json
index c95c9a97b..d9bcf2d7d 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -1,6 +1,6 @@
 {
   "compilerOptions": {
-    "target": "es5",
+    "target": "es6",
     "lib": ["dom", "dom.iterable", "esnext"],
     "allowJs": true,
     "skipLibCheck": true,
diff --git a/yarn.lock b/yarn.lock
index a9895a337..46a26cb32 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -11704,15 +11704,10 @@ nano-time@1.0.0:
   dependencies:
     big-integer "^1.6.16"
 
-nanoid@^3.3.1:
-  version "3.3.6"
-  resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.3.6.tgz#443380c856d6e9f9824267d960b4236ad583ea4c"
-  integrity sha512-BGcqMMJuToF7i1rt+2PWSNVnWIkGCU78jBG3RxO/bZlnZPK2Cmi2QaffxGO/2RvWi9sL+FAiRiXMgsyxQ1DIDA==
-
-nanoid@^3.3.4:
-  version "3.3.4"
-  resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.3.4.tgz#730b67e3cd09e2deacf03c027c81c9d9dbc5e8ab"
-  integrity sha512-MqBkQh/OHTS2egovRtLk45wEyNXwF+cokD+1YPf9u5VfJiRdAiRwB2froX5Co9Rh20xs4siNPm8naNotSD6RBw==
+nanoid@^3.3.1, nanoid@^3.3.4:
+  version "3.3.8"
+  resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.3.8.tgz#b1be3030bee36aaff18bacb375e5cce521684baf"
+  integrity sha512-WNLf5Sd8oZxOm+TzppcYk8gVOgP+l58xNy58D0nbUnOxOWRWvlcCV4kUF7ltmI6PsrLl/BgKEyS4mqsGChFN0w==
 
 natural-compare-lite@^1.4.0:
   version "1.4.0"
@@ -16353,4 +16348,4 @@ zen-observable@0.8.15:
 zwitch@^2.0.0:
   version "2.0.4"
   resolved "https://registry.yarnpkg.com/zwitch/-/zwitch-2.0.4.tgz#c827d4b0acb76fc3e685a4c6ec2902d51070e9d7"
-  integrity sha512-bXE4cR/kVZhKZX/RjPEflHaKVhUVl85noU3v6b8apfQEc1x4A+zBxjZ4lN8LqGd6WZ3dl98pY4o717VFmoPp+A==
\ No newline at end of file
+  integrity sha512-bXE4cR/kVZhKZX/RjPEflHaKVhUVl85noU3v6b8apfQEc1x4A+zBxjZ4lN8LqGd6WZ3dl98pY4o717VFmoPp+A==