diff --git a/src/components/elements/MapSidePanel/MapSidePanel.stories.tsx b/src/components/elements/MapSidePanel/MapSidePanel.stories.tsx
index 88bdec011..3ca39db2e 100644
--- a/src/components/elements/MapSidePanel/MapSidePanel.stories.tsx
+++ b/src/components/elements/MapSidePanel/MapSidePanel.stories.tsx
@@ -25,8 +25,7 @@ export const Default: Story = {
     );
   },
   args: {
-    title: "Project Sites",
-    onSelectItem: console.log
+    title: "Project Sites"
   }
 };
 
diff --git a/src/components/elements/MapSidePanel/MapSidePanel.tsx b/src/components/elements/MapSidePanel/MapSidePanel.tsx
index 879f07e64..163713de5 100644
--- a/src/components/elements/MapSidePanel/MapSidePanel.tsx
+++ b/src/components/elements/MapSidePanel/MapSidePanel.tsx
@@ -18,7 +18,6 @@ import { MENU_PLACEMENT_BOTTOM_BOTTOM } from "../Menu/MenuVariant";
 export interface MapSidePanelProps extends DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement> {
   title: string;
   items: MapSidePanelItemProps[];
-  onSelectItem: (item: MapSidePanelItemProps) => void;
   onSearch?: (query: string) => void;
   onLoadMore?: () => void;
   emptyText?: string;
@@ -32,7 +31,6 @@ const MapSidePanel = ({
   title,
   items,
   className,
-  onSelectItem,
   onSearch,
   onLoadMore,
   emptyText,
@@ -192,7 +190,6 @@ const MapSidePanel = ({
                 status={item.status}
                 onClick={() => {
                   setSelected(item);
-                  onSelectItem(item);
                 }}
                 setClickedButton={setClickedButton}
                 isSelected={selected?.uuid === item.uuid}
diff --git a/src/components/elements/TooltipMap/TooltipMap.tsx b/src/components/elements/TooltipMap/TooltipMap.tsx
index 2c8500dd3..4c9d7809d 100644
--- a/src/components/elements/TooltipMap/TooltipMap.tsx
+++ b/src/components/elements/TooltipMap/TooltipMap.tsx
@@ -124,16 +124,6 @@ const TooltipMap = (props: TooltipMapProps) => {
           </button>
         </div>
       )}
-      {type === "goTo" && (
-        <div className="flex w-full items-center justify-center">
-          <button className="flex items-center justify-center gap-1" onClick={() => goToRelatedSiteProfile()}>
-            <Icon name={IconNames.CLICK} className="h-4 w-4" />
-            <Text variant="text-10-light" className="italic text-black">
-              click to open site profile page
-            </Text>
-          </button>
-        </div>
-      )}
     </div>
   );
 };
diff --git a/src/components/extensive/EntityMapAndGalleryCard/EntityMapAndGalleryCard.tsx b/src/components/extensive/EntityMapAndGalleryCard/EntityMapAndGalleryCard.tsx
index 43e7c6c1e..f0345ac40 100644
--- a/src/components/extensive/EntityMapAndGalleryCard/EntityMapAndGalleryCard.tsx
+++ b/src/components/extensive/EntityMapAndGalleryCard/EntityMapAndGalleryCard.tsx
@@ -1,14 +1,23 @@
 import { useT } from "@transifex/react";
+import { useRouter } from "next/router";
 import { useMemo, useState } from "react";
 import { Else, If, Then } from "react-if";
 
 import EmptyState from "@/components/elements/EmptyState/EmptyState";
 import ImageGallery from "@/components/elements/ImageGallery/ImageGallery";
-import Map from "@/components/elements/Map-mapbox/Map";
+import { BBox } from "@/components/elements/Map-mapbox/GeoJSON";
+import { useMap } from "@/components/elements/Map-mapbox/hooks/useMap";
+import { MapContainer } from "@/components/elements/Map-mapbox/Map";
+import { mapPolygonData } from "@/components/elements/Map-mapbox/utils";
 import { IconNames } from "@/components/extensive/Icon/Icon";
 import PageCard from "@/components/extensive/PageElements/Card/PageCard";
 import { getEntitiesOptions } from "@/constants/options/entities";
-import { useDeleteV2FilesUUID, useGetV2MODELUUIDFiles } from "@/generated/apiComponents";
+import {
+  GetV2TypeEntityResponse,
+  useDeleteV2FilesUUID,
+  useGetV2MODELUUIDFiles,
+  useGetV2TypeEntity
+} from "@/generated/apiComponents";
 import { useGetReadableEntityName } from "@/hooks/entity/useGetReadableEntityName";
 import { useDate } from "@/hooks/useDate";
 import { useGetImagesGeoJSON } from "@/hooks/useImageGeoJSON";
@@ -34,7 +43,10 @@ const EntityMapAndGalleryCard = ({
   const { format } = useDate();
   const [pagination, setPagination] = useState({ page: 1, pageSize: 10 });
   const [filter, setFilter] = useState<{ key: string; value: string }>();
+  const mapFunctions = useMap();
   const { getReadableEntityName } = useGetReadableEntityName();
+  const router = useRouter();
+  const projectUUID = router.query.uuid as string;
   const queryParams: any = {
     page: pagination.page,
     per_page: pagination.pageSize,
@@ -44,6 +56,17 @@ const EntityMapAndGalleryCard = ({
     queryParams[filter?.key] = filter?.value;
   }
 
+  const { data: sitePolygonData } = useGetV2TypeEntity<GetV2TypeEntityResponse>({
+    queryParams: {
+      uuid: projectUUID,
+      type: modelName
+    }
+  });
+
+  const mapBbox = sitePolygonData?.bbox as BBox;
+
+  const polygonDataMap = mapPolygonData(sitePolygonData?.polygonsData);
+
   const { data, refetch } = useGetV2MODELUUIDFiles({
     // Currently only projects, sites, nurseries, projectReports, nurseryReports and siteReports are set up
     pathParams: { model: modelName, uuid: modelUUID },
@@ -90,11 +113,18 @@ const EntityMapAndGalleryCard = ({
   return (
     <>
       <PageCard title={`${modelTitle} ${t("Area")}`}>
-        <Map
+        <MapContainer
+          polygonsData={polygonDataMap}
+          sitePolygonData={sitePolygonData?.polygonsData}
+          bbox={mapBbox}
           className="rounded-lg"
           geojson={geoJSON}
           imageLayerGeojson={imagesGeoJson}
           onDeleteImage={uuid => deleteFile({ pathParams: { uuid } })}
+          mapFunctions={mapFunctions}
+          showLegend
+          hasControls
+          showPopups
         />
       </PageCard>
       <If
diff --git a/src/pages/project/[uuid]/components/ProjectArea.tsx b/src/pages/project/[uuid]/components/ProjectArea.tsx
index fefe8b497..2df4ef9e7 100644
--- a/src/pages/project/[uuid]/components/ProjectArea.tsx
+++ b/src/pages/project/[uuid]/components/ProjectArea.tsx
@@ -17,7 +17,6 @@ interface ProjectAreaProps {
 const ProjectArea = ({ project }: ProjectAreaProps) => {
   const t = useT();
   const { format } = useDate();
-  const [setSelected] = useState<any>();
   const [polygonsData, setPolygonsData] = useState<any[]>([]);
   const [polygonDataMap, setPolygonDataMap] = useState<any>({});
   const [projectBbox, setProjectBbox] = useState<BBox>();
@@ -88,7 +87,6 @@ const ProjectArea = ({ project }: ProjectAreaProps) => {
           })) || []) as any[]
         }
         mapFunctions={mapFunctions}
-        onSelectItem={setSelected}
         className="absolute z-20 h-[500px] w-[23vw] bg-[#ffffff12] p-8"
         emptyText={t("No polygons are available.")}
         checkedValues={checkedValues}
diff --git a/src/pages/project/[uuid]/tabs/Overview.tsx b/src/pages/project/[uuid]/tabs/Overview.tsx
index 40556f5f4..8f92105ff 100644
--- a/src/pages/project/[uuid]/tabs/Overview.tsx
+++ b/src/pages/project/[uuid]/tabs/Overview.tsx
@@ -5,20 +5,16 @@ import { Else, If, Then } from "react-if";
 
 import Button from "@/components/elements/Button/Button";
 import GoalProgressCard from "@/components/elements/Cards/GoalProgressCard/GoalProgressCard";
-import LongTextField from "@/components/elements/Field/LongTextField";
-import SelectImageListField from "@/components/elements/Field/SelectImageListField";
-import TextField from "@/components/elements/Field/TextField";
+import ItemMonitoringCards from "@/components/elements/Cards/ItemMonitoringCard/ItemMonitoringCards";
+import Dropdown from "@/components/elements/Inputs/Dropdown/Dropdown";
+import Text from "@/components/elements/Text/Text";
 import { IconNames } from "@/components/extensive/Icon/Icon";
 import PageBody from "@/components/extensive/PageElements/Body/PageBody";
 import PageCard from "@/components/extensive/PageElements/Card/PageCard";
 import PageColumn from "@/components/extensive/PageElements/Column/PageColumn";
 import PageRow from "@/components/extensive/PageElements/Row/PageRow";
-import { getCountriesOptions } from "@/constants/options/countries";
-import { useDate } from "@/hooks/useDate";
 import { useFramework } from "@/hooks/useFramework";
-import { useGetOptions } from "@/hooks/useGetOptions";
 import ProjectArea from "@/pages/project/[uuid]/components/ProjectArea";
-import { formatOptionsList } from "@/utils/options";
 
 interface ProjectOverviewTabProps {
   project: any;
@@ -28,9 +24,6 @@ const ProjectOverviewTab = ({ project }: ProjectOverviewTabProps) => {
   const t = useT();
   const router = useRouter();
   const { isPPC } = useFramework(project);
-  const { format } = useDate();
-  const landUseTypesOptions = useGetOptions(project.land_use_types);
-  const restorationStrategyOptions = useGetOptions(project.restoration_strategy);
 
   return (
     <PageBody>
@@ -49,81 +42,47 @@ const ProjectOverviewTab = ({ project }: ProjectOverviewTabProps) => {
             </Button>
           }
         >
-          <div className="flex w-full flex-wrap gap-6">
-            <If condition={isPPC}>
-              <Then>
-                <GoalProgressCard
-                  label={t("Workday (PPC)")}
-                  value={project.self_reported_workday_count}
-                  className="w-[170px]"
-                />
-              </Then>
-              <Else>
-                <GoalProgressCard
-                  label={t("Jobs Created")}
-                  value={project.total_jobs_created}
-                  limit={project.jobs_created_goal}
-                  className="w-[170px]"
-                />
-              </Else>
-            </If>
-            <GoalProgressCard
-              label={t("Hectares Restored Goal")}
-              value={project.total_hectares_restored_goal}
-              className="w-[170px]"
-            />
-            <GoalProgressCard
-              label={t("Trees restored")}
-              value={project.trees_restored_count}
-              limit={project.trees_grown_goal}
-              items={[
-                { iconName: IconNames.TREE_CIRCLE, label: t("Trees Planted"), value: project.trees_planted_count },
-                { iconName: IconNames.LEAF_CIRCLE, label: t("Seeds Planted"), value: project.seeds_planted_count },
-                {
-                  iconName: IconNames.REFRESH_CIRCLE,
-                  label: t("Trees Regenerating"),
-                  value: project.regenerated_trees_count
-                }
-              ]}
-              className="flex-1"
-            />
+          <div className="flex w-full text-darkCustom">
+            <div className="grid w-[50%] grid-cols-2 gap-x-8 gap-y-7 pr-20">
+              <If condition={isPPC}>
+                <Then>
+                  <GoalProgressCard label={t("Workday Count (PPC)")} value={project.self_reported_workday_count} />
+                </Then>
+                <Else>
+                  <GoalProgressCard
+                    label={t("Jobs Created")}
+                    value={project.total_jobs_created}
+                    limit={project.jobs_created_goal}
+                  />
+                </Else>
+              </If>
+              <GoalProgressCard
+                label={t("Trees Restored")}
+                value={project.trees_restored_count}
+                limit={project.trees_grown_goal}
+                className="flex-1"
+              />
+              <GoalProgressCard label={t("Hectares Restored Goal")} value={project.total_hectares_restored_goal} />
+            </div>
+            <div>
+              <GoalProgressCard
+                label={t("Hectares Restored")}
+                hasProgress={false}
+                items={[
+                  { iconName: IconNames.TREE_CIRCLE, label: t("Trees Planted"), value: project.trees_planted_count },
+                  { iconName: IconNames.LEAF_CIRCLE, label: t("Seeds Planted"), value: project.seeds_planted_count },
+                  {
+                    iconName: IconNames.REFRESH_CIRCLE,
+                    label: t("Trees Regenerating"),
+                    value: project.regenerated_trees_count
+                  }
+                ]}
+                className="flex-1"
+              />
+            </div>
           </div>
         </PageCard>
       </PageRow>
-
-      <PageRow>
-        <PageColumn>
-          <PageCard title={t("Project Information")} gap={8}>
-            <LongTextField title={t("Description of Timeline")}>
-              {project.description_of_project_timeline}
-            </LongTextField>
-            <LongTextField title={t("History of Project Area")}>{project.history}</LongTextField>
-            <SelectImageListField
-              title={t("Target Land Use Types")}
-              options={landUseTypesOptions}
-              selectedValues={project.land_use_types}
-            />
-            <SelectImageListField
-              title={t("Restoration Strategies")}
-              options={restorationStrategyOptions}
-              selectedValues={project.restoration_strategy}
-            />
-          </PageCard>
-        </PageColumn>
-
-        <PageColumn>
-          <PageCard title={t("Project Details")} gap={4}>
-            <TextField
-              label={t("Country:")}
-              value={project.country && formatOptionsList(getCountriesOptions(t), project.country)}
-            />
-            <TextField label={t("District:")} value={project.project_county_district} />
-            <TextField label={t("Planting Start Date:")} value={format(project.planting_start_date)} />
-            <TextField label={t("Planting End Date:")} value={format(project.planting_end_date)} />
-            <TextField label={t("Project Last Updated:")} value={format(project.updated_at)} />
-          </PageCard>
-        </PageColumn>
-      </PageRow>
       <PageRow>
         <PageColumn>
           <PageCard
@@ -134,7 +93,7 @@ const ProjectOverviewTab = ({ project }: ProjectOverviewTabProps) => {
                 variant="secondary"
                 href={`/entity/sites/create/${project.framework_uuid}?parent_name=projects&parent_uuid=${project.uuid}`}
               >
-                {t("Add Site")}
+                {t("expand view")}
               </Button>
             }
           >
@@ -142,6 +101,110 @@ const ProjectOverviewTab = ({ project }: ProjectOverviewTabProps) => {
           </PageCard>
         </PageColumn>
       </PageRow>
+
+      <PageRow>
+        <PageColumn>
+          <PageCard title={t("Project Monitoring")} tooltip={t("Project Monitoring")}>
+            <div className="flex items-center justify-between text-darkCustom">
+              <Text variant="text-14-light" className="w-[65%]">
+                {t(`Select all or specific sites to view remote sensing analytics such as tree counts, NDVI, and other
+                metrics useful for assessing the impact of the restoration effort.`)}
+              </Text>
+              <div className="relative w-[25%]">
+                <Dropdown
+                  containerClassName="w-full"
+                  placeholder="All Polygons"
+                  options={[
+                    {
+                      title: "All Polygons",
+                      value: 1
+                    },
+                    {
+                      title: "All Polygons2",
+                      value: 2
+                    }
+                  ]}
+                  value={["All Polygons"]}
+                  onChange={() => {}}
+                />
+              </div>
+            </div>
+            <PageRow className="mx-auto grid max-w-full grid-cols-17 gap-3">
+              <ItemMonitoringCards title={t("Tree Count")} className="col-span-4" value="462" />
+              <ItemMonitoringCards title={t("Tree Cover 2024")} className="col-span-3" value="53.23%" />
+              <ItemMonitoringCards title={t("Total Area (ha)")} className="col-span-3" value="300.12" />
+              <ItemMonitoringCards title={t("Lookback Disturbance")} className="col-span-3" value="2.1%" />
+              <ItemMonitoringCards className="col-span-4" type="map" />
+              <ItemMonitoringCards
+                title={t("Tree Count")}
+                className="col-span-4"
+                type="graph"
+                img={IconNames.GRAPH1}
+                legends={[
+                  {
+                    color: "bg-blueCustom",
+                    title: t("Average Number of Trees per hectare")
+                  },
+                  {
+                    color: "bg-primary",
+                    title: t("Number of Trees")
+                  }
+                ]}
+              />
+              <ItemMonitoringCards
+                title={t("EMA SNOVO")}
+                type="graph-button"
+                className="col-span-9 row-span-2"
+                img={IconNames.GRAPH2}
+              />
+              <ItemMonitoringCards
+                title={t("Tree Cover Loss (ha)")}
+                className="col-span-4"
+                type="graph"
+                img={IconNames.GRAPH3}
+              />
+              <ItemMonitoringCards
+                title={t("Interventions (ha)")}
+                className="col-span-4"
+                type="graph"
+                legends={[
+                  {
+                    color: "bg-black",
+                    title: t("Agroforestry")
+                  },
+                  {
+                    color: "bg-blueCustom",
+                    title: t("Silvipasture")
+                  },
+                  {
+                    color: "bg-primary",
+                    title: t("Tree Planting")
+                  }
+                ]}
+                img={IconNames.GRAPH4}
+              />
+              <ItemMonitoringCards
+                title={t("Tree Cover Loss")}
+                className="col-span-4"
+                type="graph"
+                legends={[
+                  {
+                    color: "bg-blueCustom",
+                    title: t("Tree Cover Loss by Fires (ha)")
+                  },
+                  {
+                    color: "bg-primary",
+                    title: t("Tree Cover Loss by Non-Fires (ha)")
+                  }
+                ]}
+                img={IconNames.GRAPH5}
+              />
+            </PageRow>
+          </PageCard>
+        </PageColumn>
+      </PageRow>
+      <br />
+      <br />
     </PageBody>
   );
 };