From 1b4e9d29e8f87f4488dc12eac333060f3a8aa3c7 Mon Sep 17 00:00:00 2001
From: Diego <diego@vizonomy.com>
Date: Thu, 6 Jun 2024 17:42:53 -0400
Subject: [PATCH 01/17] update components

---
 .../GoalProgressCard/GoalProgressCard.tsx     |   4 +-
 .../GoalProgressCard/GoalProgressCardItem.tsx |   4 +-
 .../ItemMonitoringCards.tsx                   |   4 +-
 .../Cards/UserRoleCard/UserRoleCard.tsx       |   6 +-
 .../elements/Commentary/Commentary.tsx        |  16 +-
 .../elements/CommentaryBox/CommentaryBox.tsx  | 143 +++++++-
 .../elements/Inputs/Checkbox/Checkbox.tsx     |  20 +-
 .../elements/Inputs/Dropdown/Dropdown.tsx     |  11 +-
 .../Inputs/Dropdown/constants/colorMap.ts     |   6 +-
 .../elements/Inputs/Input/Input.tsx           |  19 +-
 .../Inputs/InputElements/InputWrapper.tsx     |   4 +-
 src/components/elements/Inputs/Map/RHFMap.tsx |   6 +-
 .../elements/Inputs/textArea/TextArea.tsx     |  13 +-
 .../__snapshots__/TextArea.stories.storyshot  |   1 +
 src/components/elements/Map-mapbox/Map.tsx    | 325 ++++++++++++------
 .../Map-mapbox/MapControls/EditControl.tsx    | 216 +++---------
 .../MapControls/FeatureDetailCard.tsx         | 170 ---------
 .../Map-mapbox/MapControls/StyleControl.tsx   |  44 ++-
 .../Map-mapbox/MapControls/ZoomControl.tsx    |  21 +-
 .../elements/Map-mapbox/MapControls/types.ts  |   4 +-
 .../Map-mapbox/MapLayers/GeoJsonLayer.tsx     |  16 +-
 .../Map-mapbox/MapLayers/ImagesLayer.tsx      | 180 ----------
 .../Map-mapbox/components/ControlGroup.tsx    |   8 +-
 .../Map-mapbox/hooks/useOnHoverFeature.ts     |  38 --
 src/components/elements/Map-mapbox/utils.ts   | 276 ++++++++++++++-
 .../MapSidePanel/MapSidePanel.stories.tsx     |  31 +-
 .../elements/MapSidePanel/MapSidePanel.tsx    | 168 ++++++++-
 .../MapSidePanel/MapSidePanelItem.tsx         |  93 ++++-
 src/components/elements/Menu/Menu.tsx         |   1 -
 .../Notification/Notification.stories.tsx     |   9 +-
 .../elements/Notification/Notification.tsx    |  76 ++--
 src/components/elements/Status/Status.tsx     |  43 ++-
 .../elements/TooltipMap/TooltipMap.tsx        | 101 ++++--
 .../EntityMapAndGalleryCard.tsx               |  36 +-
 src/components/extensive/Icon/Icon.tsx        |   7 +
 src/components/extensive/Modal/ModalAdd.tsx   |  17 +-
 .../extensive/Modal/ModalApprove.tsx          |  18 +-
 .../extensive/Modal/ModalConfirm.tsx          |  16 +-
 .../extensive/Modal/ModalSubmit.tsx           |  48 ++-
 .../extensive/Modal/ModalWithClose.tsx        |  10 +
 .../extensive/Modal/ModalWithLogo.tsx         |   8 +-
 .../extensive/Modal/ModalWithMap.tsx          |  44 ++-
 .../PageElements/Footer/PageFooter.tsx        |   6 +-
 .../extensive/WizardForm/FormSummaryRow.tsx   |  70 +++-
 44 files changed, 1475 insertions(+), 882 deletions(-)
 delete mode 100644 src/components/elements/Map-mapbox/MapControls/FeatureDetailCard.tsx
 delete mode 100644 src/components/elements/Map-mapbox/MapLayers/ImagesLayer.tsx
 delete mode 100644 src/components/elements/Map-mapbox/hooks/useOnHoverFeature.ts

diff --git a/src/components/elements/Cards/GoalProgressCard/GoalProgressCard.tsx b/src/components/elements/Cards/GoalProgressCard/GoalProgressCard.tsx
index 786f72bdc..a70dfff02 100644
--- a/src/components/elements/Cards/GoalProgressCard/GoalProgressCard.tsx
+++ b/src/components/elements/Cards/GoalProgressCard/GoalProgressCard.tsx
@@ -42,9 +42,9 @@ const GoalProgressCard: FC<GoalProgressCardProps> = ({
             {label}
           </Text>
           <Text variant="text-24-bold" className="flex w-full items-baseline">
-            {value}&nbsp;
+            {value?.toLocaleString()}&nbsp;
             <When condition={!!limit}>
-              <Text variant="text-16-light">of {limit}</Text>
+              <Text variant="text-16-light">of {limit?.toLocaleString()}</Text>
             </When>
             <Text variant="text-16-light">{labelValue}</Text>
           </Text>
diff --git a/src/components/elements/Cards/GoalProgressCard/GoalProgressCardItem.tsx b/src/components/elements/Cards/GoalProgressCard/GoalProgressCardItem.tsx
index 44a678433..639de32e1 100644
--- a/src/components/elements/Cards/GoalProgressCard/GoalProgressCardItem.tsx
+++ b/src/components/elements/Cards/GoalProgressCard/GoalProgressCardItem.tsx
@@ -20,9 +20,7 @@ const GoalProgressCardItem: FC<GoalProgressCardItemProps> = ({ iconName, label,
         {label}
       </Text>
 
-      <Text variant="text-14-bold" className="">
-        {value}
-      </Text>
+      <Text variant="text-14-bold">{value?.toLocaleString()}</Text>
     </div>
   );
 };
diff --git a/src/components/elements/Cards/ItemMonitoringCard/ItemMonitoringCards.tsx b/src/components/elements/Cards/ItemMonitoringCard/ItemMonitoringCards.tsx
index ae04b0601..34ea663d7 100644
--- a/src/components/elements/Cards/ItemMonitoringCard/ItemMonitoringCards.tsx
+++ b/src/components/elements/Cards/ItemMonitoringCard/ItemMonitoringCards.tsx
@@ -9,7 +9,7 @@ import ToolTip from "@/components/elements/Tooltip/Tooltip";
 
 import Icon, { IconNames } from "../../../extensive/Icon/Icon";
 
-export interface LeyendItemMonitoringCardsProps {
+export interface LegendItemMonitoringCardsProps {
   title: string;
   color: string;
 }
@@ -27,7 +27,7 @@ export interface ItemMonitoringCardsProps
   className?: string;
   img?: IconNames;
   type?: "graph" | "map" | "graph-button";
-  legends?: LeyendItemMonitoringCardsProps[];
+  legends?: LegendItemMonitoringCardsProps[];
 }
 
 const ItemMonitoringCards = ({
diff --git a/src/components/elements/Cards/UserRoleCard/UserRoleCard.tsx b/src/components/elements/Cards/UserRoleCard/UserRoleCard.tsx
index 8ffd30709..4a07c5d73 100644
--- a/src/components/elements/Cards/UserRoleCard/UserRoleCard.tsx
+++ b/src/components/elements/Cards/UserRoleCard/UserRoleCard.tsx
@@ -18,6 +18,7 @@ export interface UserRoleCardProps {
   setSelectedOption?: any;
   refContentCard?: React.RefObject<HTMLDivElement>;
   selectedOption?: string;
+  icon?: IconNames;
 }
 
 const UserRoleCard: React.FC<UserRoleCardProps> = ({
@@ -29,7 +30,8 @@ const UserRoleCard: React.FC<UserRoleCardProps> = ({
   setSelectedOption,
   refContentCard,
   selectedOption,
-  menu
+  menu,
+  icon
 }) => {
   const t = useT();
   const MenuOption: MenuItemProps[] = options ?? [
@@ -64,7 +66,7 @@ const UserRoleCard: React.FC<UserRoleCardProps> = ({
       })}
     >
       <div className="rounded-lg border border-grey-350 p-2">
-        <Icon name={IconNames.USER_ROLE} className="h-10 w-10 lg:h-11 lg:w-11 wide:h-12 wide:w-12" />
+        <Icon name={icon ?? IconNames.USER_ROLE} className="h-10 w-10 lg:h-11 lg:w-11 wide:h-12 wide:w-12" />
       </div>
       <div className="flex flex-1 flex-col items-start gap-1">
         <Text variant="text-12-bold" className="text-darkCustom">
diff --git a/src/components/elements/Commentary/Commentary.tsx b/src/components/elements/Commentary/Commentary.tsx
index 9230e11a7..cd0eca3b5 100644
--- a/src/components/elements/Commentary/Commentary.tsx
+++ b/src/components/elements/Commentary/Commentary.tsx
@@ -10,7 +10,7 @@ export interface CommentaryProps {
   lastName: string;
   date: string;
   commentary: string;
-  status?: "draft" | "submitted";
+  status?: string;
   files?: CommentaryFilesProps[];
 }
 
@@ -21,14 +21,15 @@ const statusStyle = {
 
 const Commentary = (props: CommentaryProps) => {
   const { name, lastName, date, commentary, files = [], status } = props;
+  const statusKey = status as keyof typeof statusStyle;
   return (
     <div className="flex flex-col gap-2">
       <div className="flex justify-between">
         <div className="flex items-center gap-2">
           <div className="ml-3 flex h-fit min-h-[32px] min-w-[32px] items-center justify-center rounded-full bg-primary-500">
             <Text variant="text-14-semibold" className="uppercase text-white">
-              {name[0]}
-              {lastName[0]}
+              {name?.[0]}
+              {lastName?.[0]}
             </Text>
           </div>
           <div className="flex w-full flex-col gap-1">
@@ -43,16 +44,15 @@ const Commentary = (props: CommentaryProps) => {
         <When condition={status}>
           <div
             className={`flex h-fit w-[92px] items-center justify-center rounded-xl py-2 ${
-              status ? statusStyle[status].container : ""
+              status ? statusStyle[statusKey].container : ""
             }`}
           >
-            <Text variant="text-12-semibold" className={`${status ? statusStyle[status].textColor : ""}`}>
+            <Text variant="text-12-semibold" className={`${status ? statusStyle[statusKey].textColor : ""}`}>
               {status}
             </Text>
           </div>
         </When>
       </div>
-
       <Text
         variant="text-12-light"
         className="max-h-72 overflow-auto rounded-2xl border border-grey-750 p-3 leading-[175%] text-blueCustom-250 opacity-50"
@@ -60,10 +60,10 @@ const Commentary = (props: CommentaryProps) => {
         {commentary}
       </Text>
       <div className="flex flex-wrap gap-2">
-        {files.map(file => (
+        {files?.map((file: any) => (
           <div key={file.id} className="rounded-xl bg-neutral-150 px-2 py-1">
             <Text variant="text-14-light" className="text-grey-700">
-              {file.file}
+              {file?.attachment}
             </Text>
           </div>
         ))}
diff --git a/src/components/elements/CommentaryBox/CommentaryBox.tsx b/src/components/elements/CommentaryBox/CommentaryBox.tsx
index 8385e66fe..4527a4822 100644
--- a/src/components/elements/CommentaryBox/CommentaryBox.tsx
+++ b/src/components/elements/CommentaryBox/CommentaryBox.tsx
@@ -1,32 +1,115 @@
 import { useT } from "@transifex/react";
+import { useState } from "react";
 import { When } from "react-if";
 
 import Button from "@/components/elements/Button/Button";
 import TextArea from "@/components/elements/Inputs/textArea/TextArea";
 import Text from "@/components/elements/Text/Text";
 import Icon, { IconNames } from "@/components/extensive/Icon/Icon";
+import { usePostV2AuditStatus } from "@/generated/apiComponents";
+
+import Notification from "../Notification/Notification";
 
 export interface CommentaryBoxProps {
   name: string;
   lastName: string;
   buttonSendOnBox?: boolean;
   mutate?: any;
-  refresh?: any;
+  refresh?: () => void;
   record?: any;
   entity?: string;
 }
 
 const CommentaryBox = (props: CommentaryBoxProps) => {
-  const { name, lastName, buttonSendOnBox } = props;
+  const { name, lastName, buttonSendOnBox, refresh, record, entity } = props;
+  const { mutate: sendCommentary } = usePostV2AuditStatus();
+  const [files, setFiles] = useState<File[]>([]);
+  const [comment, setComment] = useState<string>("");
+  const [error, setError] = useState<string>("");
+  const [charCount, setCharCount] = useState<number>(0);
+  const [showNotification, setShowNotification] = useState<boolean>(false);
+  const [loading, setLoading] = useState<boolean>(false);
+  const [warning, setWarning] = useState<string>("");
   const t = useT();
+  const validFileTypes = [
+    "application/pdf",
+    "application/vnd.ms-excel",
+    "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
+    "application/msword",
+    "application/vnd.openxmlformats-officedocument.wordprocessingml.document",
+    "image/jpeg",
+    "image/png",
+    "image/tiff"
+  ];
+  const maxFileSize = 10 * 1024 * 1024;
+  const maxFiles = 5;
+  const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    if (e.target.files) {
+      const file = e.target.files[0];
+      if (files.length >= maxFiles) {
+        setError("You can upload a maximum of 5 files.");
+        return;
+      }
+      if (!validFileTypes.includes(file?.type)) {
+        setError("Invalid file type. Only PDF, XLS, DOC, XLSX, DOCX, JPG, PNG, and TIFF are allowed.");
+        return;
+      }
+      if (file.size > maxFileSize) {
+        setError("File size must be less than 10MB.");
+        return;
+      }
+      setFiles(prevFiles => [...prevFiles, file]);
+      setError("");
+    }
+  };
+  const submitComment = () => {
+    const body = new FormData();
+    body.append("entity_uuid", record?.uuid);
+    body.append("status", record?.status);
+    body.append("entity", entity as string);
+    body.append("comment", comment);
+    body.append("type", "comment");
+    files.forEach((element: File, index: number) => {
+      body.append(`file[${index}]`, element);
+    });
+    setLoading(true);
+    sendCommentary?.(
+      {
+        //@ts-ignore swagger issue
+        body
+      },
+      {
+        onSuccess: () => {
+          setShowNotification(true);
+          setTimeout(() => {
+            setShowNotification(false);
+          }, 3000);
+          setComment("");
+          setError("");
+          setFiles([]);
+          refresh && refresh();
+          setLoading(false);
+        }
+      }
+    );
+  };
+  const handleCommentChange = (e: any) => {
+    setComment(e.target.value);
+    setCharCount(e.target.value.length);
+    if (charCount >= 255) {
+      setWarning("Your comment exceeds 255 characters.");
+    } else {
+      setWarning("");
+    }
+  };
 
   return (
     <div className="flex flex-col gap-4">
       <div className="flex items-center gap-2 rounded-3xl border border-grey-750 p-3">
         <div className="flex min-h-[32px] min-w-[32px] items-center justify-center self-start rounded-full bg-primary-500">
           <Text variant="text-14-semibold" className="uppercase text-white">
-            {name[0]}
-            {lastName[0]}
+            {name?.[0]}
+            {lastName?.[0]}
           </Text>
         </div>
         <TextArea
@@ -35,12 +118,19 @@ const CommentaryBox = (props: CommentaryBoxProps) => {
           className="max-h-72 !min-h-0 resize-none border-none !p-0 text-xs"
           containerClassName="w-full"
           rows={1}
+          onChange={e => handleCommentChange(e)}
+          value={comment}
         />
         <label htmlFor="input-files" className="cursor-pointer">
           <input
             type="file"
             id="input-files"
             className="absolute z-[-1] h-[0.1px] w-[0.1px] overflow-hidden opacity-0"
+            onChange={e => {
+              if (e.target.files) {
+                handleFileChange(e);
+              }
+            }}
           />
           <Icon name={IconNames.PAPER_CLIP} className="h-4 w-4" />
         </label>
@@ -48,13 +138,56 @@ const CommentaryBox = (props: CommentaryBoxProps) => {
           <Button variant="text" iconProps={{ name: IconNames.SEND, className: "h-4 w-4 text-darkCustom" }} />
         </When>
       </div>
+      <div className="flex flex-1 justify-between gap-4">
+        <div className="flex flex-wrap gap-2">
+          <When condition={files.length > 0}>
+            {...files.map((file: any) => (
+              <div
+                key={file.name}
+                className="flex items-baseline justify-between gap-2 rounded-xl bg-neutral-150 px-2 py-1"
+              >
+                <Text variant="text-12-light" className="text-nowrap text-darkCustom">
+                  {file?.name}
+                </Text>
+                <button
+                  className="bg-transparent p-0 text-darkCustom hover:text-red"
+                  onClick={() => {
+                    setFiles(files.filter((f: any) => f.name !== file.name));
+                  }}
+                >
+                  <Icon name={IconNames.CLEAR} className="h-2.5 w-2.5 lg:h-3 lg:w-3" />
+                </button>
+              </div>
+            ))}
+          </When>
+        </div>
+        <div className="display-grid">
+          {warning && charCount > 255 && <div className="text-right text-xs text-red">{warning}</div>}
+          <div className={`text-nowrap text-right text-xs ${charCount > 255 ? "text-red" : "text-grey-500"}`}>
+            {charCount}/255 {t("characters")}
+          </div>
+        </div>
+      </div>
+      {error && <div className="text-red">{error}</div>}
       <When condition={!buttonSendOnBox}>
-        <Button className="self-end" iconProps={{ name: IconNames.SEND, className: "h-4 w-4" }}>
+        <Button
+          className="self-end"
+          disabled={loading}
+          iconProps={{ name: IconNames.SEND, className: "h-4 w-4" }}
+          onClick={submitComment}
+        >
           <Text variant="text-12-bold" className="text-white">
             {t("SEND")}
           </Text>
+          {loading && <Icon name={IconNames.ELLIPSE_POLYGON} className={"h-6 w-6 animate-spin"} />}
         </Button>
       </When>
+      <Notification
+        title="Success!"
+        message="Your comment was just added!"
+        type="success"
+        open={showNotification}
+      ></Notification>
     </div>
   );
 };
diff --git a/src/components/elements/Inputs/Checkbox/Checkbox.tsx b/src/components/elements/Inputs/Checkbox/Checkbox.tsx
index 97179eb51..d2c6e54c4 100644
--- a/src/components/elements/Inputs/Checkbox/Checkbox.tsx
+++ b/src/components/elements/Inputs/Checkbox/Checkbox.tsx
@@ -15,11 +15,24 @@ export interface CheckboxProps extends Omit<React.InputHTMLAttributes<HTMLInputE
   className?: string;
   textClassName?: string;
   inputClassName?: string;
+  errorClassName?: string;
 }
 
 const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(
   (
-    { label, required, error, className, disabled, defaultChecked, textClassName, form, inputClassName, ...props },
+    {
+      label,
+      required,
+      error,
+      className,
+      disabled,
+      defaultChecked,
+      textClassName,
+      form,
+      inputClassName,
+      errorClassName,
+      ...props
+    },
     ref
   ) => {
     const id = useId();
@@ -75,7 +88,10 @@ const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(
           )}
         />
         <When condition={!!error}>
-          <Text variant="text-body-500" className="absolute right-0 -bottom-6 w-full text-right text-error">
+          <Text
+            variant="text-body-500"
+            className={classNames("absolute right-0 -bottom-6 w-full text-right text-error", errorClassName)}
+          >
             {t(error?.message ?? "")}
           </Text>
         </When>
diff --git a/src/components/elements/Inputs/Dropdown/Dropdown.tsx b/src/components/elements/Inputs/Dropdown/Dropdown.tsx
index c7517acc1..1eb48bfef 100644
--- a/src/components/elements/Inputs/Dropdown/Dropdown.tsx
+++ b/src/components/elements/Inputs/Dropdown/Dropdown.tsx
@@ -47,6 +47,7 @@ export interface DropdownProps {
   feedbackRequired?: boolean;
   formHook?: UseFormReturn;
   onChangeConfirm?: boolean;
+  disableOptionTitles?: string[] | undefined;
   setOnChangeConfirm?: (confirm: boolean) => void;
   onChange: (value: OptionValue[]) => void;
   onInternalError?: (error: ErrorOption) => void;
@@ -136,6 +137,10 @@ const Dropdown = (props: PropsWithChildren<DropdownProps>) => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [otherIsSelected, otherValue, t]);
 
+  const verifyDisableOption = (title: string) => {
+    return props?.disableOptionTitles?.includes(title);
+  };
+
   return (
     <div className={tw("space-y-2", props.containerClassName)}>
       <Listbox value={selected} defaultValue={selected} onChange={onChange} multiple={props.multiSelect}>
@@ -197,7 +202,7 @@ const Dropdown = (props: PropsWithChildren<DropdownProps>) => {
               <Listbox.Options
                 as="div"
                 className={tw(
-                  "border-light absolute mt-2 max-h-[400px] min-w-full overflow-auto rounded-lg bg-white",
+                  "border-light absolute mt-2 max-h-[235px] min-w-full overflow-auto rounded-lg bg-white lg:max-h-[250px] wide:max-h-[266px]",
                   props.optionsClassName
                 )}
               >
@@ -218,9 +223,11 @@ const Dropdown = (props: PropsWithChildren<DropdownProps>) => {
                           "w-full cursor-pointer hover:bg-primary-100",
                           props.multiSelect ? "p-3.5" : "p-3",
                           isSelected && !props.multiSelect && "bg-primary-100",
-                          props.optionClassName
+                          props.optionClassName,
+                          verifyDisableOption(option.title) ? "cursor-not-allowed bg-grey-750 hover:bg-grey-750" : ""
                         )
                       )}
+                      disabled={verifyDisableOption(option.title)}
                     >
                       <If condition={props.multiSelect}>
                         <Then>
diff --git a/src/components/elements/Inputs/Dropdown/constants/colorMap.ts b/src/components/elements/Inputs/Dropdown/constants/colorMap.ts
index 88e8f2984..1b2276d49 100644
--- a/src/components/elements/Inputs/Dropdown/constants/colorMap.ts
+++ b/src/components/elements/Inputs/Dropdown/constants/colorMap.ts
@@ -1,7 +1,9 @@
 export const COLOR_MAP: { [key: string]: string } = {
-  approved: "bg-green",
+  approved: "bg-secondary",
   submitted: "bg-blue",
   draft: "bg-pinkCustom",
   "Under Review": "bg-tertiary-600",
-  "Needs More Info": "bg-tertiary-600"
+  "needs-more-information": "bg-tertiary-600",
+  "planting-in-progress": "bg-blue",
+  "awaiting-approval": "bg-tertiary-600"
 };
diff --git a/src/components/elements/Inputs/Input/Input.tsx b/src/components/elements/Inputs/Input/Input.tsx
index 5073f8842..3b7c3f9d2 100644
--- a/src/components/elements/Inputs/Input/Input.tsx
+++ b/src/components/elements/Inputs/Input/Input.tsx
@@ -25,7 +25,7 @@ export interface InputProps
   descriptionClassName?: string;
   descriptionFooter?: string;
   format?: "number";
-  sufixLabelView?: boolean;
+  suffixLabelView?: boolean;
   classNameContainerInput?: string;
   classNameError?: string;
 }
@@ -61,7 +61,7 @@ const Input = forwardRef(
       labelVariant,
       readOnly,
       format,
-      sufixLabelView,
+      suffixLabelView,
       classNameContainerInput,
       classNameError,
       ...inputWrapperProps
@@ -79,6 +79,7 @@ const Input = forwardRef(
       ...inputProps
     } = inputWrapperProps;
     const id = useId();
+    const customVariantClasses = customVariant ? customVariant : {};
     const variantClasses = {
       default: {
         "px-3 py-[9px] rounded-lg focus:border-primary-500": true,
@@ -113,7 +114,7 @@ const Input = forwardRef(
       "w-full outline-none transition-all duration-300 ease-in-out focus:ring-transparent",
       { ...variantClasses[variant] },
       { ["border border-error focus:border-error"]: error },
-      customVariant
+      customVariantClasses
     );
 
     const clearInput = () => formHook?.setValue(inputWrapperProps.name, "");
@@ -159,6 +160,14 @@ const Input = forwardRef(
       input.value = formattedValue;
     };
 
+    const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+      if (format === "number") {
+        formatNumber(event);
+      } else if (inputProps.type === "password") {
+        registeredFormProps?.onChange(event);
+      }
+    };
+
     return (
       <InputWrapper
         inputId={id}
@@ -172,7 +181,7 @@ const Input = forwardRef(
         feedbackRequired={feedbackRequired}
         labelClassName={labelClassName}
         descriptionClassName={descriptionClassName}
-        sufixLabelView={sufixLabelView}
+        suffixLabelView={suffixLabelView}
         classNameError={classNameError}
       >
         <div className={classNames("relative", classNameContainerInput)}>
@@ -180,7 +189,7 @@ const Input = forwardRef(
             {...inputProps}
             {...registeredFormProps}
             onKeyDown={inputProps.type === "number" ? preventScientificNumbers : undefined}
-            onChange={format === "number" ? formatNumber : undefined}
+            onChange={handleChange}
             ref={registeredFormProps?.ref || ref}
             id={id}
             className={inputClasses}
diff --git a/src/components/elements/Inputs/InputElements/InputWrapper.tsx b/src/components/elements/Inputs/InputElements/InputWrapper.tsx
index a46ed3523..3e976c141 100644
--- a/src/components/elements/Inputs/InputElements/InputWrapper.tsx
+++ b/src/components/elements/Inputs/InputElements/InputWrapper.tsx
@@ -21,7 +21,7 @@ export interface InputWrapperProps {
   feedbackRequired?: boolean;
   labelClassName?: string;
   descriptionClassName?: string;
-  sufixLabelView?: boolean;
+  suffixLabelView?: boolean;
   classNameError?: string;
 }
 
@@ -34,7 +34,7 @@ const InputWrapper = (props: PropsWithChildren<InputWrapperProps>) => {
         feedbackRequired={props.feedbackRequired}
         labelVariant={props.labelVariant}
         className={props.labelClassName}
-        suffixLabelView={props.sufixLabelView}
+        suffixLabelView={props.suffixLabelView}
       >
         {props.label}
       </InputLabel>
diff --git a/src/components/elements/Inputs/Map/RHFMap.tsx b/src/components/elements/Inputs/Map/RHFMap.tsx
index b0f46f544..e3df35f05 100644
--- a/src/components/elements/Inputs/Map/RHFMap.tsx
+++ b/src/components/elements/Inputs/Map/RHFMap.tsx
@@ -1,17 +1,15 @@
 import { useT } from "@transifex/react";
-import dynamic from "next/dynamic";
 import { PropsWithChildren, useEffect } from "react";
 import { useController, UseControllerProps, UseFormReturn } from "react-hook-form";
 
 import InputWrapper, { InputWrapperProps } from "@/components/elements/Inputs/InputElements/InputWrapper";
+import { MapContainer } from "@/components/elements/Map-mapbox/Map";
 import { AdditionalPolygonProperties } from "@/components/elements/Map-mapbox/MapLayers/ShapePropertiesModal";
 import { useGetV2ENTITYUUID } from "@/generated/apiComponents";
 import { singularEntityNameToPlural } from "@/helpers/entity";
 import { useDebounce } from "@/hooks/useDebounce";
 import { Entity, SingularEntityName } from "@/types/common";
 
-const Map = dynamic(() => import("@/components/elements/Map-mapbox/Map"), { ssr: false });
-
 export interface RHFMapProps extends UseControllerProps, InputWrapperProps {
   onChangeCapture?: () => void;
   formHook: UseFormReturn;
@@ -87,7 +85,7 @@ const RHFMap = ({
 
   return (
     <InputWrapper {...inputWrapperProps}>
-      <Map
+      <MapContainer
         geojson={value}
         onGeojsonChange={_onChange}
         editable
diff --git a/src/components/elements/Inputs/textArea/TextArea.tsx b/src/components/elements/Inputs/textArea/TextArea.tsx
index 0f0be52f1..bea8c4742 100644
--- a/src/components/elements/Inputs/textArea/TextArea.tsx
+++ b/src/components/elements/Inputs/textArea/TextArea.tsx
@@ -1,5 +1,5 @@
 import cn from "classnames";
-import { ChangeEvent, DetailedHTMLProps, TextareaHTMLAttributes, useCallback, useId, useState } from "react";
+import { ChangeEvent, DetailedHTMLProps, TextareaHTMLAttributes, useCallback, useEffect, useId, useState } from "react";
 import { UseFormReturn } from "react-hook-form";
 
 import InputWrapper, { InputWrapperProps } from "@/components/elements/Inputs/InputElements/InputWrapper";
@@ -32,10 +32,12 @@ const TextArea = ({ formHook, className, onChange: externalOnChange, ...inputWra
     { "border-light ": !error },
     { ["border border-error focus:border-error"]: error }
   );
-  if (error && formHook?.watch(inputWrapperProps.name)) {
-    formHook?.trigger();
-    formHook?.reset(formHook.getValues());
-  }
+  useEffect(() => {
+    if (inputProps.value === "") {
+      setTextValue("");
+    }
+  }, [inputProps.value]);
+
   const [textValue, setTextValue] = useState("");
   const handleTextAreaChange = useCallback(
     (event: ChangeEvent<HTMLTextAreaElement>) => {
@@ -46,6 +48,7 @@ const TextArea = ({ formHook, className, onChange: externalOnChange, ...inputWra
   );
   const { textareaProps } = useTextAreaAuto(handleTextAreaChange, textValue?.toString());
   const mergedProps = { ...inputProps, ...textareaProps };
+
   return (
     <InputWrapper
       inputId={id}
diff --git a/src/components/elements/Inputs/textArea/__snapshots__/TextArea.stories.storyshot b/src/components/elements/Inputs/textArea/__snapshots__/TextArea.stories.storyshot
index 56acd742b..ddc3dc665 100644
--- a/src/components/elements/Inputs/textArea/__snapshots__/TextArea.stories.storyshot
+++ b/src/components/elements/Inputs/textArea/__snapshots__/TextArea.stories.storyshot
@@ -26,6 +26,7 @@ exports[`Storyshots Components/Elements/Inputs/TextArea Default 1`] = `
     id=":r2g:"
     onChange={[Function]}
     placeholder="Input placeholder"
+    value=""
   />
 </div>
 `;
diff --git a/src/components/elements/Map-mapbox/Map.tsx b/src/components/elements/Map-mapbox/Map.tsx
index 8065ab8c1..648fe1e0e 100644
--- a/src/components/elements/Map-mapbox/Map.tsx
+++ b/src/components/elements/Map-mapbox/Map.tsx
@@ -1,38 +1,57 @@
 import "mapbox-gl/dist/mapbox-gl.css";
 
+import _ from "lodash";
 //@ts-ignore
-import MapboxDraw from "@mapbox/mapbox-gl-draw";
 //@ts-ignore
-import StaticMode from "@mapbox/mapbox-gl-draw-static-mode";
-import mapboxgl, { Map as IMap } from "mapbox-gl";
+import mapboxgl from "mapbox-gl";
 //@ts-ignore
-import { CircleMode, DirectMode, DragCircleMode, SimpleSelectMode } from "mapbox-gl-draw-circle";
-import { DetailedHTMLProps, HTMLAttributes } from "react";
+import React, { useEffect } from "react";
+import { DetailedHTMLProps, HTMLAttributes, useState } from "react";
 import { When } from "react-if";
 import { twMerge } from "tailwind-merge";
 import { ValidationError } from "yup";
 
 import ControlGroup from "@/components/elements/Map-mapbox/components/ControlGroup";
-import { EditControl } from "@/components/elements/Map-mapbox/MapControls/EditControl";
-import { FeatureDetailCard } from "@/components/elements/Map-mapbox/MapControls/FeatureDetailCard";
-import { FilterControl } from "@/components/elements/Map-mapbox/MapControls/FilterLayer";
-import { StyleControl } from "@/components/elements/Map-mapbox/MapControls/StyleControl";
-import { MapStyle } from "@/components/elements/Map-mapbox/MapControls/types";
-import { ZoomControl } from "@/components/elements/Map-mapbox/MapControls/ZoomControl";
-import { GeoJSONLayer } from "@/components/elements/Map-mapbox/MapLayers/GeoJsonLayer";
-import { ImagesLayer } from "@/components/elements/Map-mapbox/MapLayers/ImagesLayer";
+import { AdditionalPolygonProperties } from "@/components/elements/Map-mapbox/MapLayers/ShapePropertiesModal";
+import Icon, { IconNames } from "@/components/extensive/Icon/Icon";
+import { LAYERS_NAMES, layersList } from "@/constants/layers";
+import { useSitePolygonData } from "@/context/sitePolygon.provider";
+import { fetchGetV2TerrafundPolygonGeojsonUuid, fetchPutV2TerrafundPolygonUuid } from "@/generated/apiComponents";
+import { SitePolygonsDataResponse } from "@/generated/apiSchemas";
+
+import { AdminPopup } from "./components/AdminPopup";
+import { BBox } from "./GeoJSON";
+import type { TooltipType } from "./Map.d";
+import CheckPolygonControl from "./MapControls/CheckPolygonControl";
+import EditControl from "./MapControls/EditControl";
+import { FilterControl } from "./MapControls/FilterControl";
+import ImageControl from "./MapControls/ImageControl";
+import PolygonCheck from "./MapControls/PolygonCheck";
+import { StyleControl } from "./MapControls/StyleControl";
+import { MapStyle } from "./MapControls/types";
+import ViewImageCarousel from "./MapControls/ViewImageCarousel";
+import { ZoomControl } from "./MapControls/ZoomControl";
 import {
-  AdditionalPolygonProperties,
-  user_shapePropertiesValidationSchema
-} from "@/components/elements/Map-mapbox/MapLayers/ShapePropertiesModal";
-import mapStyles from "@/components/elements/Map-mapbox/mapStyle";
-import MapProvider from "@/context/map.provider";
-import { useDebounce } from "@/hooks/useDebounce";
+  addFilterOnLayer,
+  addGeojsonToDraw,
+  addPopupsToMap,
+  addSourcesToLayers,
+  removePopups,
+  startDrawing,
+  stopDrawing,
+  zoomToBbox
+} from "./utils";
 
 mapboxgl.accessToken =
   process.env.NEXT_PUBLIC_MAPBOX_ACCESS_TOKEN ||
   "pk.eyJ1IjoiM3NpZGVkY3ViZSIsImEiOiJjam55amZrdjIwaWY3M3FueDAzZ3ZjeGR2In0.DhSsxs-8XhbTgoVmFcs94Q";
 
+interface LegendItem {
+  color: string;
+  text: string;
+  uuid: string;
+}
+
 interface MapProps extends Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "onError"> {
   geojson?: any;
   imageLayerGeojson?: any;
@@ -44,9 +63,27 @@ interface MapProps extends Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>
   additionalPolygonProperties?: AdditionalPolygonProperties;
   captureAdditionalPolygonProperties?: boolean;
   hasControls?: boolean;
+  siteData?: boolean;
+  status?: boolean;
+  editPolygon?: boolean;
+  polygonChecks?: boolean;
+  legend?: LegendItem[];
+  centroids?: any;
+  polygonsData?: Record<string, string[]>;
+  bbox?: BBox;
+  setPolygonFromMap?: React.Dispatch<React.SetStateAction<{ uuid: string; isOpen: boolean }>>;
+  polygonFromMap?: { uuid: string; isOpen: boolean };
+  record?: any;
+  isUserDrawing?: boolean;
+  setIsUserDrawing?: React.Dispatch<React.SetStateAction<boolean>>;
+  showPopups?: boolean;
+  showLegend?: boolean;
+  mapFunctions?: any;
+  tooltipType?: TooltipType;
+  sitePolygonData?: SitePolygonsDataResponse;
 }
 
-export const Map = ({
+export const MapContainer = ({
   onError: _onError,
   editable,
   geojson,
@@ -57,114 +94,208 @@ export const Map = ({
   hasControls = true,
   additionalPolygonProperties,
   captureAdditionalPolygonProperties,
+  siteData = false,
+  status = false,
+  editPolygon = false,
+  polygonChecks = false,
+  record,
+  isUserDrawing = false,
+  setIsUserDrawing,
+  showPopups = false,
+  showLegend = false,
+  mapFunctions,
+  tooltipType = "view",
   ...props
 }: MapProps) => {
-  const onError = useDebounce((hasError, errors) => _onError?.(hasError, errors), 250);
+  const [viewImages, setViewImages] = useState(false);
+  const [currentStyle, setCurrentStyle] = useState(MapStyle.Satellite);
+  const { polygonsData, bbox, setPolygonFromMap, polygonFromMap, sitePolygonData } = props;
+  const context = useSitePolygonData();
+  const { isUserDrawingEnabled } = isUserDrawing
+    ? { isUserDrawingEnabled: isUserDrawing }
+    : context || { isUserDrawingEnabled: false };
+  const { toggleUserDrawing, toggleAttribute, reloadSiteData } = context || {};
+  if (!mapFunctions) {
+    return null;
+  }
+  const { map, mapContainer, draw, onCancel, styleLoaded, initMap, setStyleLoaded, setChangeStyle, changeStyle } =
+    mapFunctions;
 
-  const validateGeoJSON = function (map: IMap, source: string) {
-    if (!editable) return;
+  useEffect(() => {
+    initMap();
+  });
 
-    const errors: { [index: string | number]: ValidationError | undefined } = {};
-    const features = map.querySourceFeatures(source);
-
-    for (const feature of features) {
-      if (typeof feature.id === "undefined" || feature.id === null || feature.properties?.meta !== "feature") return;
+  useEffect(() => {
+    if (isUserDrawing) {
+      toggleUserDrawing?.(isUserDrawing);
+      toggleAttribute?.(true);
+    }
+  }, [isUserDrawing]);
 
-      try {
-        user_shapePropertiesValidationSchema.validateSync(feature.properties);
-        errors[feature.id!] = undefined;
-        map.setFeatureState({ id: feature.id, source }, { error: false });
-      } catch (error) {
-        map.setFeatureState({ id: feature.id, source }, { error: true });
-        errors[feature.id!] = error as ValidationError;
+  useEffect(() => {
+    if (map?.current && draw?.current) {
+      if (isUserDrawingEnabled) {
+        startDrawing(draw.current, map.current);
+      } else {
+        stopDrawing(draw.current, map.current);
       }
     }
+  }, [isUserDrawingEnabled]);
 
-    onError(Object.values(errors).filter(error => !!error).length > 0, errors);
-  };
+  useEffect(() => {
+    if (map?.current && styleLoaded && showPopups) {
+      const currentMap = map.current;
 
-  const onLoadMap = (map: IMap, draw?: MapboxDraw) => {
-    map.on("draw.selectionchange", function (e) {
-      const isSelected = e.features.length > 0;
+      map.current.on("load", () => {
+        addPopupsToMap(currentMap, AdminPopup, setPolygonFromMap, sitePolygonData, tooltipType);
+      });
+    }
+  }, [styleLoaded, sitePolygonData]);
 
-      if (isSelected && draw?.getMode() === "simple_select") {
-        draw.changeMode(draw.modes.DIRECT_SELECT, { featureId: e.features[0].id });
-      }
-    });
+  useEffect(() => {
+    if (map?.current && styleLoaded && !_.isEmpty(polygonsData)) {
+      const currentMap = map.current as mapboxgl.Map;
+      addSourcesToLayers(currentMap, polygonsData);
+      setChangeStyle(true);
+    }
+  }, [sitePolygonData, styleLoaded, polygonsData]);
 
-    map.on("draw.upload", function () {
-      onGeojsonChange?.(draw?.getAll());
-    });
+  useEffect(() => {
+    if (currentStyle) {
+      setChangeStyle(false);
+    }
+  }, [currentStyle]);
 
-    map.on("draw.clear", function () {
-      onGeojsonChange?.(null);
-    });
+  useEffect(() => {
+    if (!changeStyle) {
+      setStyleLoaded(false);
+    }
+  }, [changeStyle]);
 
-    map.on("draw.create", function () {
-      onGeojsonChange?.(draw?.getAll());
-    });
+  useEffect(() => {
+    if (bbox && map.current && map) {
+      zoomToBbox(bbox, map.current, hasControls);
+    }
+  }, [bbox]);
 
-    map.on("draw.update", function () {
-      onGeojsonChange?.(draw?.getAll());
-    });
+  function handleAddGeojsonToDraw(polygonuuid: string) {
+    if (polygonsData && map.current && draw.current) {
+      const currentMap = map.current;
+      const newPolygonData = JSON.parse(JSON.stringify(polygonsData));
+      const statuses = ["submitted", "approved", "need-more-info"];
+      statuses.forEach(status => {
+        if (newPolygonData[status]) {
+          newPolygonData[status] = newPolygonData[status].filter((feature: string) => feature !== polygonuuid);
+        }
+      });
+      addFilterOnLayer(
+        layersList.find(layer => layer.name === LAYERS_NAMES.POLYGON_GEOMETRY),
+        "uuid",
+        newPolygonData,
+        currentMap
+      );
+    }
+  }
 
-    if (captureAdditionalPolygonProperties) {
-      map.on("data", function () {
-        validateGeoJSON(map, MapboxDraw.constants.sources.COLD);
+  const handleEditPolygon = async () => {
+    removePopups();
+    if (polygonFromMap?.isOpen && polygonFromMap?.uuid !== "") {
+      const polygonuuid = polygonFromMap.uuid;
+      const polygonGeojson = await fetchGetV2TerrafundPolygonGeojsonUuid({
+        pathParams: { uuid: polygonuuid }
       });
+      if (map.current && draw.current && polygonGeojson) {
+        addGeojsonToDraw(polygonGeojson.geojson, polygonuuid, () => handleAddGeojsonToDraw(polygonuuid), draw.current);
+      }
+    }
+  };
+
+  const onSaveEdit = async () => {
+    if (map.current && draw.current) {
+      const geojson = draw.current.getAll();
+      if (geojson) {
+        if (polygonFromMap?.uuid) {
+          const feature = geojson.features[0];
+          const response = await fetchPutV2TerrafundPolygonUuid({
+            body: { geometry: JSON.stringify(feature) },
+            pathParams: { uuid: polygonFromMap?.uuid }
+          });
+          reloadSiteData?.();
+          if (response.message == "Geometry updated successfully.") {
+            onCancel(polygonsData);
+            addSourcesToLayers(map.current, polygonsData);
+          }
+        }
+      }
     }
   };
 
+  const onCancelEdit = () => {
+    onCancel(polygonsData);
+  };
+
   return (
-    <MapProvider
-      {...props}
-      initialState={{ geoJson: geojson }}
-      mapOptions={{
-        style: MapStyle.Satellite,
-        zoom: 1
-      }}
-      drawOptions={{
-        displayControlsDefault: false,
-        userProperties: true,
-        defaultMode: editable ? "simple_select" : "static",
-        modes: {
-          ...MapboxDraw.modes,
-          static: StaticMode,
-          draw_circle: CircleMode,
-          drag_circle: DragCircleMode,
-          direct_select: DirectMode,
-          simple_select: SimpleSelectMode
-        },
-        styles: mapStyles
-      }}
-      onLoadMap={onLoadMap}
-      className={twMerge("h-[500px]", className)}
-    >
-      <GeoJSONLayer geojson={geojson} />
+    <div ref={mapContainer} className={twMerge("h-[500px] wide:h-[700px]", className)} id="mapContainer">
       <When condition={hasControls}>
+        <When condition={polygonFromMap?.isOpen}>
+          <ControlGroup position="top-center">
+            <EditControl onClick={handleEditPolygon} onSave={onSaveEdit} onCancel={onCancelEdit} />
+          </ControlGroup>
+        </When>
         <ControlGroup position="top-right">
-          <StyleControl />
+          <StyleControl map={map.current} currentStyle={currentStyle} setCurrentStyle={setCurrentStyle} />
         </ControlGroup>
         <ControlGroup position="top-right" className="top-21">
-          <ZoomControl />
-          <When condition={editable}>
-            <EditControl />
-          </When>
+          <ZoomControl map={map.current} />
         </ControlGroup>
-        <When condition={!editable}>
-          <ControlGroup position="bottom-left">
-            <FilterControl />
+        <When condition={!!status && !!record.uuid}>
+          <ControlGroup position="top-left">
+            <CheckPolygonControl siteRecord={record} />
+          </ControlGroup>
+        </When>
+        <When condition={!!viewImages}>
+          <ControlGroup position={siteData ? "bottom-left-site" : "bottom-left"}>
+            <ImageControl viewImages={viewImages} setViewImages={setViewImages} />
           </ControlGroup>
-          <ImagesLayer source="images" data={imageLayerGeojson} onDeleteImage={onDeleteImage} />
         </When>
+        <When condition={editPolygon}>
+          <ControlGroup position="top-right" className="top-64">
+            <button type="button" className="rounded-lg bg-white p-2.5 text-primary hover:text-primary ">
+              <Icon name={IconNames.EDIT} className="h-5 w-5 lg:h-6 lg:w-6" />
+            </button>
+          </ControlGroup>
+        </When>
+        <When condition={!editable && !viewImages}>
+          <ControlGroup position={siteData ? "bottom-left-site" : "bottom-left"}></ControlGroup>
+        </When>
+        <ControlGroup position="top-right" className="top-48">
+          <button
+            type="button"
+            className="rounded-lg bg-white p-2.5 text-darkCustom-100 hover:bg-neutral-200 "
+            onClick={() => bbox && map.current && zoomToBbox(bbox, map.current, hasControls)}
+          >
+            <Icon name={IconNames.IC_EARTH_MAP} className="h-5 w-5 lg:h-6 lg:w-6" />
+          </button>
+        </ControlGroup>
+        <ControlGroup position="bottom-right" className="bottom-8">
+          <ViewImageCarousel viewImages={viewImages} setViewImages={setViewImages} />
+        </ControlGroup>
+      </When>
+      <When condition={showLegend}>
+        <ControlGroup position={siteData ? "bottom-left-site" : "bottom-left"}>
+          <FilterControl />
+        </ControlGroup>
       </When>
       <When condition={captureAdditionalPolygonProperties}>
-        <ControlGroup position="bottom-right">
-          <FeatureDetailCard editable={editable} additionalPolygonProperties={additionalPolygonProperties} />
+        <ControlGroup position="bottom-right"></ControlGroup>
+      </When>
+      <When condition={polygonChecks}>
+        <ControlGroup position="bottom-left" className="bottom-13">
+          <PolygonCheck />
         </ControlGroup>
       </When>
-    </MapProvider>
+    </div>
   );
 };
 
-export default Map;
+export default MapContainer;
diff --git a/src/components/elements/Map-mapbox/MapControls/EditControl.tsx b/src/components/elements/Map-mapbox/MapControls/EditControl.tsx
index 5bccb2988..db1e27601 100644
--- a/src/components/elements/Map-mapbox/MapControls/EditControl.tsx
+++ b/src/components/elements/Map-mapbox/MapControls/EditControl.tsx
@@ -1,181 +1,53 @@
-import { useT } from "@transifex/react";
-import bbox from "@turf/bbox";
-import classNames from "classnames";
-import mapboxgl, { LngLatBoundsLike } from "mapbox-gl";
-import { useEffect, useRef, useState } from "react";
+import React, { useEffect } from "react";
 
-import IconButton from "@/components/elements/IconButton/IconButton";
-import ControlButtonsGroup from "@/components/elements/Map-mapbox/components/ControlButtonsGroup";
-import ControlDivider from "@/components/elements/Map-mapbox/components/ControlDivider";
-import { useConvertShapeFileToGeoJson } from "@/components/elements/Map-mapbox/hooks/useConvertShapefileToGeoJson";
-import { IconNames } from "@/components/extensive/Icon/Icon";
-import Modal from "@/components/extensive/Modal/Modal";
-import { useMapContext } from "@/context/map.provider";
-import { useModalContext } from "@/context/modal.provider";
-import { ToastType, useToastContext } from "@/context/toast.provider";
-import { useFilePicker } from "@/hooks/useFilePicker";
-import { FileType } from "@/types/common";
-
-export const EditControl = () => {
-  const { draw, map } = useMapContext();
-  const { openModal, closeModal } = useModalContext();
-  const t = useT();
-  const clicked = useRef(1);
-  const [mode, setMode] = useState<string>();
-  const { openToast } = useToastContext();
-
-  const { mutate: convertShapeFile } = useConvertShapeFileToGeoJson({
-    async onSuccess(data) {
-      const geoJson = await data.json();
-      draw?.add(geoJson);
-      map?.fitBounds(bbox(draw?.getAll()) as LngLatBoundsLike, { padding: 50, animate: false });
-      map?.fire("draw.upload");
-    },
-    onError() {
-      openToast(t("File is not supported!"), ToastType.ERROR);
-    }
-  });
-
-  const { open: openFilePicker } = useFilePicker(
-    files => {
-      for (const file of Array.from(files)) {
-        convertShapeFile({ file });
-      }
-    },
-    { accept: [FileType.ShapeFiles], multiple: true }
-  );
+import Button from "../../Button/Button";
+import Text from "../../Text/Text";
 
+const EditControl = ({ onClick, onSave, onCancel }: { onClick?: any; onSave?: any; onCancel?: any }) => {
+  const [isEditing, setIsEditing] = React.useState(false);
   useEffect(() => {
-    if (!map || !draw) return;
-
-    const mouseTooltip = new mapboxgl.Popup({
-      closeOnClick: false,
-      className: "mouse-tooltip",
-      closeButton: false,
-      anchor: "left",
-      offset: 10
-    });
-    mouseTooltip.trackPointer();
-
-    const onModeChangeListener = () => {
-      setMode(draw.getMode());
-      const TooltipMapping: any = {
-        draw_polygon: t("Click to start drawing"),
-        draw_circle: t("Click to add a circle"),
-        drag_circle: t("Click, hold and drag to draw a circle"),
-        draw_point: t("Click to add a point")
-      };
-
-      const tooltip = TooltipMapping[draw.getMode()];
-
-      if (tooltip) {
-        mouseTooltip.setHTML(tooltip);
-        mouseTooltip.addTo(map);
-        map.getCanvas().style.cursor = "crosshair";
-      } else {
-        mouseTooltip.remove();
-        clicked.current = 1;
-        map.getCanvas().style.cursor = "default";
-      }
-    };
-
-    const onRenderListener = () => {
-      if (draw.getMode() === "draw_polygon") {
-        if (clicked.current > 2) {
-          mouseTooltip.setHTML(t("Click first point to close this shape"));
-        } else if (clicked.current >= 1) {
-          mouseTooltip.setHTML(t("Click to continue drawing shape"));
-        }
-      }
-
-      clicked.current++;
-    };
-
-    map.on("draw.actionable", onModeChangeListener);
-    map.on("click", onRenderListener);
-
     return () => {
-      map.off("draw.actionable", onModeChangeListener);
-      map.off("click", onRenderListener);
+      onCancel();
     };
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [map, draw]);
-
-  const handleClearMap = () => {
-    openModal(
-      <Modal
-        iconProps={{ name: IconNames.EXCLAMATION_CIRCLE, width: 60, height: 60 }}
-        title={t("Confirm Map Clear")}
-        content={t("Are you sure you want to clear all shapes on the map, this action is irreversible.")}
-        primaryButtonProps={{
-          children: t("Clear"),
-          onClick: () => {
-            draw?.deleteAll();
-            map?.fire("draw.clear");
-            closeModal();
-          }
-        }}
-        secondaryButtonProps={{
-          children: t("Cancel"),
-          onClick: closeModal
-        }}
-      />
-    );
-  };
-
-  if (!draw) return null;
-
+  }, []);
   return (
-    <ControlButtonsGroup direction="col">
-      <IconButton
-        iconProps={{
-          name: IconNames.DrawPoint,
-          width: 16
-        }}
-        onClick={() => draw?.changeMode("draw_point")}
-        className={classNames("h-8 w-8 rounded-t-lg rounded-b-none", mode === "draw_point" && "bg-neutral-200")}
-        aria-label={t("Draw Point")}
-      />
-      <ControlDivider direction="horizontal" />
-      <IconButton
-        iconProps={{
-          name: IconNames.DrawPolygon,
-          width: 16
-        }}
-        onClick={() => draw?.changeMode("draw_polygon")}
-        className={classNames("h-8 w-8 rounded-none", mode === "draw_polygon" && "bg-neutral-200")}
-        aria-label={t("Draw Polygon")}
-      />
-      <ControlDivider direction="horizontal" />
-      <IconButton
-        iconProps={{
-          name: IconNames.DragCircle,
-          width: 16
+    <div className="flex w-[160px] flex-col items-center gap-1">
+      <Button
+        id="buttonEditPolygon"
+        variant="white"
+        className="w-full py-2"
+        onClick={() => {
+          setIsEditing(true);
+          onClick();
         }}
-        onClick={() => draw?.changeMode("drag_circle")}
-        className={classNames("h-8 w-8 rounded-none", mode === "drag_circle" && "bg-neutral-200")}
-        aria-label={t("Drag Circle")}
-      />
-      <ControlDivider direction="horizontal" />
-      <IconButton
-        iconProps={{
-          name: IconNames.TRASH,
-          width: 16
-        }}
-        onClick={handleClearMap}
-        className={classNames("h-8 w-8 rounded-none", mode === "drag_circle" && "bg-neutral-200")}
-        aria-label={t("Clear Map")}
-      />
-      <ControlDivider direction="horizontal" />
-      <IconButton
-        iconProps={{
-          name: IconNames.UPLOAD,
-          width: 16
-        }}
-        onClick={openFilePicker}
-        className={classNames("h-8 w-8 rounded-b-lg rounded-t-none", mode === "drag_circle" && "bg-neutral-200")}
-        aria-label={t("Upload Shape File")}
-      />
-    </ControlButtonsGroup>
+      >
+        <Text variant="text-12-bold" className="leading-[normal] text-black">
+          Edit Polygon
+        </Text>
+      </Button>
+      {isEditing && (
+        <div className="flex w-full items-center gap-1">
+          <Button onClick={onSave} className="w-full">
+            <Text variant="text-12-bold" className="leading-[normal]">
+              Save
+            </Text>
+          </Button>
+          <Button
+            variant="sky-page-admin"
+            className="w-full"
+            onClick={() => {
+              setIsEditing(false);
+              onCancel();
+            }}
+          >
+            <Text variant="text-12-bold" className="leading-[normal]">
+              Cancel
+            </Text>
+          </Button>
+        </div>
+      )}
+    </div>
   );
 };
+
+export default EditControl;
diff --git a/src/components/elements/Map-mapbox/MapControls/FeatureDetailCard.tsx b/src/components/elements/Map-mapbox/MapControls/FeatureDetailCard.tsx
deleted file mode 100644
index eb01a0b60..000000000
--- a/src/components/elements/Map-mapbox/MapControls/FeatureDetailCard.tsx
+++ /dev/null
@@ -1,170 +0,0 @@
-import { useT } from "@transifex/react";
-import { filter } from "lodash";
-import { MapboxGeoJSONFeature } from "mapbox-gl";
-import { useEffect } from "react";
-import { When } from "react-if";
-
-import IconButton from "@/components/elements/IconButton/IconButton";
-import { useOnHoverFeature } from "@/components/elements/Map-mapbox/hooks/useOnHoverFeature";
-import { useSelectFeature } from "@/components/elements/Map-mapbox/hooks/useSelectFeature";
-import {
-  AdditionalPolygonProperties,
-  ShapePropertiesModal
-} from "@/components/elements/Map-mapbox/MapLayers/ShapePropertiesModal";
-import { getFeatureProperties } from "@/components/elements/Map-mapbox/utils";
-import Text from "@/components/elements/Text/Text";
-import { IconNames } from "@/components/extensive/Icon/Icon";
-import { getCountriesOptions } from "@/constants/options/countries";
-import { getDistributionOptions } from "@/constants/options/distribution";
-import { getLandUseTypeOptions } from "@/constants/options/landUseType";
-import { getRestorationStrategyOptions } from "@/constants/options/restorationStrategy";
-import { useMapContext } from "@/context/map.provider";
-import { useModalContext } from "@/context/modal.provider";
-import { formatOptionsList, getOptionTitle } from "@/utils/options";
-
-interface FeatureDetailCardProps {
-  editable?: boolean;
-  additionalPolygonProperties?: AdditionalPolygonProperties;
-}
-
-export const FeatureDetailCard = ({ editable, additionalPolygonProperties }: FeatureDetailCardProps) => {
-  const t = useT();
-
-  const { map, draw } = useMapContext();
-  const [selectedFeature, setSelectedFeature] = useSelectFeature(map);
-  const { openModal, closeModal } = useModalContext();
-  useOnHoverFeature();
-
-  const onEditFeature = (feature: MapboxGeoJSONFeature) => {
-    openModal(
-      <ShapePropertiesModal
-        draw={draw}
-        onSubmit={onSubmitPropertiesForm}
-        feature={feature}
-        additionalPolygonProperties={additionalPolygonProperties}
-      />
-    );
-  };
-
-  const onDeleteFeature = () => {
-    draw?.delete(selectedFeature?.properties?.id);
-    setSelectedFeature(undefined);
-  };
-
-  const onSubmitPropertiesForm = (additionalProperties: any, feature: MapboxGeoJSONFeature) => {
-    Object.entries(additionalProperties).forEach(([key, val]) => {
-      const value = Array.isArray(val) ? val.join(",") : val;
-      draw?.setFeatureProperty(feature?.properties?.id || feature.id, key, value);
-      feature.properties = { ...feature.properties, [key]: value };
-    });
-    setSelectedFeature(feature);
-    closeModal();
-
-    map?.fire("draw.update", { feature });
-  };
-
-  useEffect(() => {
-    if (!map) return;
-    const onCreateListener = function (e: any) {
-      const feature = e.features[0];
-      onEditFeature(feature);
-    };
-    map.on("draw.create", onCreateListener);
-
-    return () => {
-      map.off("draw.create", onCreateListener);
-    };
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [map, additionalPolygonProperties]);
-
-  //@ts-ignore
-  if (!selectedFeature || selectedFeature.properties?.mode?.includes("draw_")) return null;
-
-  const title = getFeatureProperties<string>(selectedFeature.properties, "Poly_ID") || t("Shape");
-  const countryCode = getFeatureProperties<string>(selectedFeature.properties, "Country");
-
-  const isPpc = additionalPolygonProperties?.Framework === "ppc";
-  const projectId =
-    (isPpc ? additionalPolygonProperties?.Project_ID : null) ??
-    getFeatureProperties<string>(selectedFeature.properties, "Project_ID");
-  const projectUuid = additionalPolygonProperties?.Project_UUID;
-  const siteId =
-    (isPpc ? additionalPolygonProperties?.Site_ID : null) ??
-    getFeatureProperties<string>(selectedFeature.properties, "Site_ID");
-  const siteUuid = additionalPolygonProperties?.Site_UUID;
-
-  const properties = filter([
-    { title: t("Polygon ID"), value: title },
-    { title: t("Org Name"), value: getFeatureProperties<string>(selectedFeature.properties, "Org_Name") },
-    { title: t("Project ID"), value: projectId },
-    isPpc && projectUuid != null ? { title: t("Project UUID"), value: projectUuid } : null,
-    { title: t("Project Name"), value: getFeatureProperties<string>(selectedFeature.properties, "Project_Name") },
-    { title: t("Site ID"), value: siteId },
-    isPpc && siteUuid != null ? { title: t("Site UUID"), value: siteUuid } : null,
-    { title: t("Site Name"), value: getFeatureProperties<string>(selectedFeature.properties, "Site_Name") },
-    {
-      title: t("Country"),
-      value: countryCode ? getOptionTitle(countryCode, getCountriesOptions()) : undefined
-    },
-    {
-      title: t("Planting Start Date"),
-      value: getFeatureProperties<string>(selectedFeature.properties, "Plant_Date")
-    },
-    {
-      title: t("Restoration Practice"),
-      value: formatOptionsList(
-        getRestorationStrategyOptions(),
-        getFeatureProperties<string>(selectedFeature.properties, "Practice")?.split(",")
-      )
-    },
-    {
-      title: t("Target land use system"),
-      value: formatOptionsList(
-        getLandUseTypeOptions(),
-        getFeatureProperties<string>(selectedFeature.properties, "Target_Sys")?.split(",")
-      )
-    },
-    {
-      title: t("Tree distribution"),
-      value: formatOptionsList(
-        getDistributionOptions(),
-        getFeatureProperties<string>(selectedFeature.properties, "Distr")?.split(",")
-      )
-    }
-  ]) as { title: string; value: any }[];
-
-  return (
-    <>
-      <div className="w-80 rounded-lg bg-white">
-        <div className="flex h-9 items-center rounded-t-lg bg-primary-200 px-3 py-2">
-          <Text variant="text-heading-200">{title}</Text>
-        </div>
-        <div className="p-3">
-          <div className="mb-1">
-            {properties.filter(v => !!v.value).length === 0 && (
-              <Text variant="text-light-caption-200">{t("No data is attached to this polygon")}</Text>
-            )}
-            {properties.map(prop => (
-              <Text key={prop.title} variant="text-light-caption-200">
-                <strong>{prop.title}: </strong>
-                {prop.value || "N/A"}
-              </Text>
-            ))}
-          </div>
-          <When condition={editable}>
-            <div className="flex items-start gap-3">
-              <IconButton
-                iconProps={{ name: IconNames.EDIT_CIRCLE, width: 32, className: "fill-primary" }}
-                onClick={() => onEditFeature(selectedFeature)}
-              />
-              <IconButton
-                iconProps={{ name: IconNames.TRASH_CIRCLE, width: 32, className: "fill-error" }}
-                onClick={onDeleteFeature}
-              />
-            </div>
-          </When>
-        </div>
-      </div>
-    </>
-  );
-};
diff --git a/src/components/elements/Map-mapbox/MapControls/StyleControl.tsx b/src/components/elements/Map-mapbox/MapControls/StyleControl.tsx
index fba25aee7..faef3a6cd 100644
--- a/src/components/elements/Map-mapbox/MapControls/StyleControl.tsx
+++ b/src/components/elements/Map-mapbox/MapControls/StyleControl.tsx
@@ -1,41 +1,47 @@
 import { useT } from "@transifex/react";
 import classNames from "classnames";
-import { useState } from "react";
+import mapboxgl from "mapbox-gl";
 
 import ControlButtonsGroup from "@/components/elements/Map-mapbox/components/ControlButtonsGroup";
 import ControlDivider from "@/components/elements/Map-mapbox/components/ControlDivider";
 import { MapStyle } from "@/components/elements/Map-mapbox/MapControls/types";
-import { useMapContext } from "@/context/map.provider";
 
-export const StyleControl = () => {
+export const StyleControl = ({
+  map,
+  currentStyle,
+  setCurrentStyle
+}: {
+  map: mapboxgl.Map | null;
+  currentStyle: MapStyle;
+  setCurrentStyle: (style: MapStyle) => void;
+}) => {
   const t = useT();
-  const { map } = useMapContext();
-  const [currentStyle, setCurrentStyle] = useState(MapStyle.Satellite);
+
+  const setMapStyle = (style: MapStyle) => {
+    if (map && currentStyle !== style) {
+      map.setStyle(style);
+      setCurrentStyle(style);
+    }
+  };
 
   return (
-    <ControlButtonsGroup direction="row">
+    <ControlButtonsGroup direction="row" className="h-auto">
       <button
-        onClick={() => {
-          map?.setStyle(MapStyle.Street);
-          setCurrentStyle(MapStyle.Street);
-        }}
+        onClick={() => setMapStyle(MapStyle.Street)}
         className={classNames(
-          "w-16 rounded-l-lg px-1",
-          currentStyle === MapStyle.Street ? "text-body-500 underline" : "text-body-400"
+          "h-fit w-21 rounded-l-lg py-2",
+          currentStyle === MapStyle.Street ? "text-body-500" : "text-body-400"
         )}
         aria-label="Map street style"
       >
         {t("Map")}
       </button>
-      <ControlDivider direction="vertical" />
+      <ControlDivider direction="vertical" className="m-0 h-auto bg-neutral-200" />
       <button
-        onClick={() => {
-          map?.setStyle(MapStyle.Satellite);
-          setCurrentStyle(MapStyle.Satellite);
-        }}
+        onClick={() => setMapStyle(MapStyle.Satellite)}
         className={classNames(
-          "w-16 rounded-r-lg px-1",
-          currentStyle === MapStyle.Satellite ? "text-body-500 underline" : "text-body-400"
+          "h-fit w-21 rounded-r-lg py-2",
+          currentStyle === MapStyle.Satellite ? "text-body-500" : "text-body-400"
         )}
         aria-label="Map satellite style"
       >
diff --git a/src/components/elements/Map-mapbox/MapControls/ZoomControl.tsx b/src/components/elements/Map-mapbox/MapControls/ZoomControl.tsx
index 835c79ccc..f87361c99 100644
--- a/src/components/elements/Map-mapbox/MapControls/ZoomControl.tsx
+++ b/src/components/elements/Map-mapbox/MapControls/ZoomControl.tsx
@@ -1,31 +1,32 @@
+import mapboxgl from "mapbox-gl";
+
 import IconButton from "@/components/elements/IconButton/IconButton";
 import ControlButtonsGroup from "@/components/elements/Map-mapbox/components/ControlButtonsGroup";
 import ControlDivider from "@/components/elements/Map-mapbox/components/ControlDivider";
 import { IconNames } from "@/components/extensive/Icon/Icon";
-import { useMapContext } from "@/context/map.provider";
-
-export const ZoomControl = () => {
-  const { map } = useMapContext();
 
+export const ZoomControl = ({ map }: { map: mapboxgl.Map | null }) => {
   return (
-    <ControlButtonsGroup direction="col">
+    <ControlButtonsGroup direction="col" className="z-10 w-auto">
       <IconButton
         iconProps={{
           name: IconNames.ZoomIn,
-          width: 16
+          width: 24,
+          height: 24
         }}
         onClick={() => map?.zoomIn()}
-        className="h-8 w-8 rounded-b-none rounded-t-lg"
+        className="rounded-b-none rounded-t-lg p-[10px]"
         aria-label="Zoom in"
       />
-      <ControlDivider direction="horizontal" />
+      <ControlDivider direction="horizontal" className="m-0 w-auto bg-neutral-200" />
       <IconButton
         iconProps={{
           name: IconNames.ZoomOut,
-          width: 16
+          width: 24,
+          height: 24
         }}
         onClick={() => map?.zoomOut()}
-        className="h-8 w-8 rounded-t-none rounded-b-lg"
+        className="rounded-t-none rounded-b-lg p-[10px]"
         aria-label="Zoom out"
       />
     </ControlButtonsGroup>
diff --git a/src/components/elements/Map-mapbox/MapControls/types.ts b/src/components/elements/Map-mapbox/MapControls/types.ts
index 895e85061..9b5482d87 100644
--- a/src/components/elements/Map-mapbox/MapControls/types.ts
+++ b/src/components/elements/Map-mapbox/MapControls/types.ts
@@ -1,6 +1,6 @@
 /* eslint-disable no-unused-vars */
 
 export enum MapStyle {
-  Street = "mapbox://styles/mapbox/streets-v9",
-  Satellite = "mapbox://styles/mapbox/satellite-v9"
+  Street = "mapbox://styles/terramatch/clve3yxzq01w101pefkkg3rci",
+  Satellite = "mapbox://styles/terramatch/clv3bkxut01y301pk317z5afu"
 }
diff --git a/src/components/elements/Map-mapbox/MapLayers/GeoJsonLayer.tsx b/src/components/elements/Map-mapbox/MapLayers/GeoJsonLayer.tsx
index c6f5872d9..037438a85 100644
--- a/src/components/elements/Map-mapbox/MapLayers/GeoJsonLayer.tsx
+++ b/src/components/elements/Map-mapbox/MapLayers/GeoJsonLayer.tsx
@@ -2,23 +2,21 @@ import bbox from "@turf/bbox";
 import { LngLatBoundsLike } from "mapbox-gl";
 import { useEffect } from "react";
 
-import { useMapContext } from "@/context/map.provider";
+// interface GeoJSONLayerProps {
+//   geojson: any;
+// }
 
-interface GeoJSONLayerProps {
-  geojson: any;
-}
-
-export const GeoJSONLayer = ({ geojson }: GeoJSONLayerProps) => {
-  const { map, draw } = useMapContext();
+export const GeoJSONLayer = ({ mapRef, geojson }: { mapRef: any; geojson: any }) => {
+  const map = mapRef.current?.map;
+  const draw = mapRef.current?.draw;
 
   useEffect(() => {
     try {
       if (!map || !draw || !geojson) return;
-
       draw?.set(geojson);
       map.fitBounds(bbox(geojson) as LngLatBoundsLike, { padding: 50, animate: false });
     } catch (e) {
-      console.log("invalid geoJSON", e);
+      console.error("invalid geoJSON", e);
     }
   }, [draw, geojson, map]);
 
diff --git a/src/components/elements/Map-mapbox/MapLayers/ImagesLayer.tsx b/src/components/elements/Map-mapbox/MapLayers/ImagesLayer.tsx
deleted file mode 100644
index 3d9f7626d..000000000
--- a/src/components/elements/Map-mapbox/MapLayers/ImagesLayer.tsx
+++ /dev/null
@@ -1,180 +0,0 @@
-import { Canvg } from "canvg";
-import { EventData, GeoJSONSourceRaw, Map, MapboxEvent, MapMouseEvent } from "mapbox-gl";
-import { useEffect } from "react";
-
-import ImageGalleryPreviewer from "@/components/elements/ImageGallery/ImageGalleryPreviewer";
-import { useMapContext } from "@/context/map.provider";
-import { useModalContext } from "@/context/modal.provider";
-import { toDataURL } from "@/utils/image";
-
-interface ImagesLayerProps extends Omit<GeoJSONSourceRaw, "cluster" | "type"> {
-  source: string;
-  onDeleteImage?: (uuid: string) => void;
-}
-
-export const ImagesLayer = ({ source, data, onDeleteImage }: ImagesLayerProps) => {
-  const { map } = useMapContext();
-  const { openModal } = useModalContext();
-
-  useEffect(() => {
-    if (!map) return;
-
-    const onRenderListener = async () => {
-      const allFeatures = map.queryRenderedFeatures();
-      //@ts-ignore
-      for (const feature of allFeatures.filter(f => !!f.properties.id && !!f.properties.thumb_url)) {
-        const props: any = feature.properties;
-        await loadImage(map, props.id, markerSVG(await toDataURL(props.thumb_url)));
-      }
-    };
-    map.on("render", onRenderListener);
-
-    const onClickListener = async (e: MapMouseEvent) => {
-      const map = e.target;
-      const features = map?.queryRenderedFeatures(e.point);
-      const properties = features?.[0]?.properties;
-
-      if (properties?.image_url) {
-        openModal(
-          <ImageGalleryPreviewer
-            data={{
-              uuid: properties.uuid,
-              fullImageUrl: properties?.image_url
-            }}
-            onDelete={onDeleteImage}
-          />
-        );
-      }
-    };
-    map.on("click", onClickListener);
-
-    return () => {
-      map.off("render", onRenderListener);
-      map.off("click", onClickListener);
-    };
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [map]);
-
-  useEffect(() => {
-    if (!map) return;
-    const onLoadListener = (e: MapboxEvent & EventData) => {
-      const map = e.target;
-
-      // Add a new source from our GeoJSON data and
-      // set the 'cluster' option to true. GL-JS will
-      // add the point_count property to your source data.
-      map.addSource(source, {
-        type: "geojson",
-        // Point to GeoJSON data. This example visualizes all M1.0+ earthquakes
-        // from 12/22/15 to 1/21/16 as logged by USGS' Earthquake hazards program.
-        data,
-        cluster: true,
-        clusterMaxZoom: 14, // Max zoom to cluster points on
-        clusterRadius: 50 // Radius of each cluster when clustering points (defaults to 50)
-      });
-
-      map.addLayer({
-        id: "clusters",
-        type: "circle",
-        source,
-        filter: ["has", "point_count"],
-        paint: {
-          // Use step expressions (https://docs.mapbox.com/style-spec/reference/expressions/#step)
-          // with three steps to implement three types of circles:
-          //   * Blue, 20px circles when point count is less than 100
-          //   * Yellow, 30px circles when point count is between 100 and 750
-          //   * Pink, 40px circles when point count is greater than or equal to 750
-          "circle-color": "#27A9E0",
-          "circle-radius": [
-            "step",
-            ["get", "point_count"],
-            20, //output
-            25, //threshold
-            40, //output
-            50, //threshold
-            80 // output
-          ]
-        }
-      });
-
-      map.addLayer({
-        id: "cluster-count",
-        type: "symbol",
-        source,
-        filter: ["has", "point_count"],
-        layout: {
-          "text-field": ["get", "point_count_abbreviated"],
-          "text-font": ["DIN Offc Pro Medium", "Arial Unicode MS Bold"],
-          "text-size": 18
-        },
-        paint: {
-          "text-color": "white"
-        }
-      });
-
-      map.addLayer({
-        id: "unclustered-point",
-        type: "circle",
-        source,
-        filter: ["!", ["has", "point_count"]],
-        paint: {
-          "circle-color": "#11b4da",
-          "circle-radius": 4,
-          "circle-stroke-width": 1,
-          "circle-stroke-color": "#fff"
-        }
-      });
-      // Add a layer to use the image to represent the data.
-      map.addLayer({
-        id: "image",
-        type: "symbol",
-        filter: ["!", ["has", "point_count"]],
-        source, // reference the data source
-        layout: {
-          "icon-image": ["get", "id"], // reference the image
-          "icon-size": 1
-        }
-      });
-    };
-    map.on("load", onLoadListener);
-
-    return () => {
-      map.off("load", onLoadListener);
-    };
-  }, [map, data, source]);
-
-  return null;
-};
-
-const loadImage = async (map: Map, imageName: string, svgString: string) => {
-  if (!!imageName && !!svgString && !map?.hasImage(imageName)) {
-    const marker = new Image();
-    const canvas = document.createElement("canvas");
-
-    const v = await Canvg.fromString(canvas.getContext("2d")!, svgString);
-    await v.render({ ignoreAnimation: true });
-
-    canvas.toBlob(blob => {
-      if (!blob) return;
-      marker.src = URL.createObjectURL(blob);
-      marker.onload = () => map?.addImage(imageName, marker);
-    });
-  }
-};
-
-const markerSVG = (imageUri: string) => `
-  <svg width="85" height="92" viewBox="0 0 85 92" fill="none" xmlns="http://www.w3.org/2000/svg"
-  xmlns:xlink="http://www.w3.org/1999/xlink">
-    <rect width="15.9435" height="15.9435" transform="matrix(0.709613 -0.704591 0.709613 0.704591 31.5 79.8594)"
-        fill="white" />
-    <rect x="2" y="1.59375" width="81" height="80.448" rx="13.5" fill="white" />
-    <rect x="9.5" y="9.09375" width="66" height="66" rx="10" fill="url(#pattern0)" stroke="#27A9E0" stroke-width="4" />
-    <rect x="2" y="1.59375" width="81" height="80.448" rx="13.5" stroke="white" stroke-width="3" />
-    <defs>
-      <pattern id="pattern0" patternContentUnits="objectBoundingBox" width="80" height="80">
-      <use xlink:href="#image_id" />
-      </pattern>
-        <image id="image_id" xlink:href="${imageUri}" />
-    </defs>
-  </svg>
-`;
diff --git a/src/components/elements/Map-mapbox/components/ControlGroup.tsx b/src/components/elements/Map-mapbox/components/ControlGroup.tsx
index 8faf8ca16..04c4ae0af 100644
--- a/src/components/elements/Map-mapbox/components/ControlGroup.tsx
+++ b/src/components/elements/Map-mapbox/components/ControlGroup.tsx
@@ -5,7 +5,7 @@ import { twMerge } from "tailwind-merge";
 export interface ControlGroupProps
   extends DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>,
     PropsWithChildren {
-  position: "top-right" | "top-left" | "bottom-right" | "bottom-left";
+  position: "top-right" | "top-left" | "bottom-right" | "bottom-left" | "bottom-left-site" | "top-center";
 }
 
 const ControlGroup = ({ children, position, className, ...props }: ControlGroupProps) => {
@@ -13,11 +13,13 @@ const ControlGroup = ({ children, position, className, ...props }: ControlGroupP
     <div
       {...props}
       className={twMerge(
-        classNames("absolute z-20 flex flex-col gap-8", {
+        classNames("absolute z-[18] flex flex-col gap-8", {
           "top-5": position.includes("top"),
           "left-5 items-start": position.includes("left"),
           "right-5 items-end": position.includes("right"),
-          "bottom-7": position.includes("bottom")
+          "bottom-8": position.includes("bottom"),
+          "left-[24vw] items-start": position.includes("site"),
+          "left-[45%]": position.includes("center")
         }),
         className
       )}
diff --git a/src/components/elements/Map-mapbox/hooks/useOnHoverFeature.ts b/src/components/elements/Map-mapbox/hooks/useOnHoverFeature.ts
deleted file mode 100644
index 0dc21bd4a..000000000
--- a/src/components/elements/Map-mapbox/hooks/useOnHoverFeature.ts
+++ /dev/null
@@ -1,38 +0,0 @@
-import { EventData, MapboxGeoJSONFeature, MapLayerMouseEvent } from "mapbox-gl";
-import { useEffect, useRef } from "react";
-
-import { useMapContext } from "@/context/map.provider";
-
-export const useOnHoverFeature = (
-  layer: string | readonly string[] = ["gl-draw-polygon-fill-static.cold", "gl-draw-polygon-fill-static-default.cold"]
-) => {
-  const { map, draw } = useMapContext();
-  const hoveredFeature = useRef<MapboxGeoJSONFeature>();
-
-  useEffect(() => {
-    if (!map) return;
-    const onMouseEnter = (e: MapLayerMouseEvent & EventData) => {
-      const map = e.target;
-      const features = map?.queryRenderedFeatures(e.point);
-      const feature = features?.[0];
-      if (!feature || !map) return;
-
-      hoveredFeature.current = feature;
-      map.setFeatureState(feature, { hover: true });
-    };
-    map.on("mouseenter", layer, onMouseEnter);
-
-    const onMouseLeave = (e: MapLayerMouseEvent & EventData) => {
-      if (hoveredFeature.current) {
-        map.setFeatureState(hoveredFeature.current, { hover: false });
-        hoveredFeature.current = undefined;
-      }
-    };
-    map.on("mouseleave", layer, onMouseLeave);
-
-    return () => {
-      map.off("mouseenter", onMouseEnter);
-      map.off("mouseleave", onMouseLeave);
-    };
-  }, [draw, map, layer]);
-};
diff --git a/src/components/elements/Map-mapbox/utils.ts b/src/components/elements/Map-mapbox/utils.ts
index 91d048a89..f68433a10 100644
--- a/src/components/elements/Map-mapbox/utils.ts
+++ b/src/components/elements/Map-mapbox/utils.ts
@@ -1,3 +1,277 @@
-export function getFeatureProperties<T extends any>(properties: any, key: string): T | undefined {
+import * as turfHelper from "@turf/helpers";
+import mapboxgl from "mapbox-gl";
+import { createElement } from "react";
+import { createRoot } from "react-dom/client";
+
+import { layersList } from "@/constants/layers";
+import { SitePolygon, SitePolygonsDataResponse } from "@/generated/apiSchemas";
+
+import { BBox, FeatureCollection } from "./GeoJSON";
+import type { LayerType, LayerWithStyle, TooltipType } from "./Map.d";
+
+const GEOSERVER = "https://geoserver-prod.wri-restoration-marketplace-api.com";
+
+export const getFeatureProperties = <T extends any>(properties: any, key: string): T | undefined => {
   return properties[key] || properties[`user_${key}`];
+};
+
+export const convertToGeoJSON = (featureCollection: FeatureCollection) => {
+  const { features } = featureCollection;
+  return features.reduce((acc: turfHelper.Feature[], feature) => {
+    const { geometry, properties } = feature;
+    const coordinates = geometry.coordinates;
+    const type = geometry.type;
+    const featureGeoJSON = turfHelper.feature({ type, coordinates }, properties);
+    acc.push(featureGeoJSON);
+    return acc;
+  }, []);
+};
+
+export const convertToAcceptedGEOJSON = (geojson: any) => {
+  if (geojson.type !== "FeatureCollection" && geojson.type !== "GeometryCollection") {
+    const templateGeoJSON = {
+      type: "Feature",
+      properties: {},
+      geometry: geojson
+    };
+    const geojsonFormatted = {
+      type: "FeatureCollection",
+      features: [templateGeoJSON]
+    };
+    return geojsonFormatted;
+  } else if (geojson.type === "GeometryCollection") {
+    const geojsonFormatted = {
+      type: "FeatureCollection",
+      features: geojson.geometries.map((geometry: any) => ({
+        type: "Feature",
+        properties: {},
+        geometry
+      }))
+    };
+    return geojsonFormatted;
+  }
+  return geojson;
+};
+
+export const startDrawing = (draw: MapboxDraw, map: mapboxgl.Map) => {
+  draw.changeMode("draw_polygon");
+  map.getCanvas().style.cursor = "crosshair";
+};
+
+export const stopDrawing = (draw: MapboxDraw, map: mapboxgl.Map) => {
+  draw.changeMode("simple_select");
+  map.getCanvas().style.cursor = "auto";
+};
+
+export const addFilterOnLayer = (
+  layer: any,
+  field: string,
+  parsedPolygonData: Record<string, string[]>,
+  map: mapboxgl.Map
+) => {
+  addSourceToLayer(layer, map, parsedPolygonData);
+  const { name, styles } = layer;
+  showPolygons(styles, name, map, field, parsedPolygonData);
+};
+
+const showPolygons = (
+  styles: LayerWithStyle[],
+  name: string,
+  map: mapboxgl.Map,
+  field: string,
+  parsedPolygonData: any
+) => {
+  styles.forEach((style: LayerWithStyle, index: number) => {
+    const layerName = `${name}-${index}`;
+    if (!map.getLayer(layerName)) {
+      console.error(`Layer ${layerName} does not exist.`);
+      return;
+    }
+    const polygonStatus = style?.metadata?.polygonStatus;
+    const filter = [
+      "in",
+      ["get", field],
+      ["literal", parsedPolygonData?.[polygonStatus] === undefined ? "" : parsedPolygonData[polygonStatus]]
+    ];
+    const completeFilter = ["all", filter];
+    map.setFilter(layerName, completeFilter);
+    map.setLayoutProperty(layerName, "visibility", "visible");
+  });
+};
+
+let popup: mapboxgl.Popup | null = null;
+let arrayPopups: mapboxgl.Popup[] = [];
+
+export const loadLayersInMap = (map: mapboxgl.Map, polygonsData: Record<string, string[]> | undefined) => {
+  layersList.forEach((layer: any) => {
+    if (map) {
+      showPolygons(layer.styles, layer.name, map, "uuid", polygonsData);
+    }
+  });
+};
+
+const handleLayerClick = (
+  e: any,
+  popupComponent: any,
+  map: mapboxgl.Map,
+  setPolygonFromMap: any,
+  sitePolygonData: SitePolygonsDataResponse | undefined,
+  type: TooltipType
+) => {
+  removePopups();
+  const { lng, lat } = e.lngLat;
+  const feature = e.features[0];
+
+  let popupContent = document.createElement("div");
+  popupContent.className = "popup-content-map";
+  const root = createRoot(popupContent);
+  root.render(createElement(popupComponent, { feature, popup, setPolygonFromMap, sitePolygonData, type }));
+
+  popup = new mapboxgl.Popup({ className: "popup-map" }).setLngLat([lng, lat]).setDOMContent(popupContent).addTo(map);
+
+  arrayPopups.push(popup);
+};
+
+export const removePopups = () => {
+  arrayPopups.forEach(popup => {
+    popup.remove();
+  });
+};
+
+export const addFilterOfPolygonsData = (map: mapboxgl.Map, polygonsData: Record<string, string[]> | undefined) => {
+  if (map && polygonsData) {
+    if (map.isStyleLoaded() || map.loaded()) {
+      loadLayersInMap(map, polygonsData);
+    } else {
+      map.on("style.load", () => {
+        loadLayersInMap(map, polygonsData);
+      });
+      map.on("load", () => {
+        loadLayersInMap(map, polygonsData);
+      });
+    }
+  }
+};
+
+export const addGeojsonToDraw = (geojson: any, uuid: string, cb: Function, currentDraw: MapboxDraw) => {
+  if (geojson) {
+    const geojsonFormatted = convertToAcceptedGEOJSON(geojson);
+    const addToDrawAndFilter = () => {
+      if (currentDraw) {
+        const featureGeojson = currentDraw.set(geojsonFormatted);
+        if (featureGeojson.length) {
+          currentDraw.changeMode("direct_select", { featureId: featureGeojson[0] });
+        }
+        cb(uuid);
+      }
+    };
+    addToDrawAndFilter();
+  }
+};
+
+export const addSourcesToLayers = (map: mapboxgl.Map, polygonsData: Record<string, string[]> | undefined) => {
+  layersList.forEach((layer: LayerType) => {
+    if (map) {
+      addSourceToLayer(layer, map, polygonsData);
+    }
+  });
+};
+
+export const addPopupsToMap = (
+  map: mapboxgl.Map,
+  popupComponent: any,
+  setPolygonFromMap: any,
+  sitePolygonData: SitePolygonsDataResponse | undefined,
+  type: TooltipType
+) => {
+  if (popupComponent) {
+    layersList.forEach((layer: LayerType) => {
+      addPopupToLayer(map, popupComponent, layer, setPolygonFromMap, sitePolygonData, type);
+    });
+  }
+};
+
+export const addPopupToLayer = (
+  map: mapboxgl.Map,
+  popupComponent: any,
+  layer: any,
+  setPolygonFromMap: any,
+  sitePolygonData: SitePolygonsDataResponse | undefined,
+  type: TooltipType
+) => {
+  if (popupComponent) {
+    const { name } = layer;
+
+    let layers = map.getStyle().layers;
+
+    let targetLayers = layers.filter(layer => layer.id.startsWith(name));
+
+    targetLayers.forEach(targetLayer => {
+      map.on("click", targetLayer.id, (e: any) =>
+        handleLayerClick(e, popupComponent, map, setPolygonFromMap, sitePolygonData, type)
+      );
+    });
+  }
+};
+
+export const addSourceToLayer = (layer: any, map: mapboxgl.Map, polygonsData: Record<string, string[]> | undefined) => {
+  const { name, styles } = layer;
+  if (map.getSource(name)) {
+    styles?.forEach((_: unknown, index: number) => {
+      map.removeLayer(`${name}-${index}`);
+    });
+    map.removeSource(name);
+  }
+  const URL_GEOSERVER = `${GEOSERVER}/geoserver/gwc/service/wmts?REQUEST=GetTile&SERVICE=WMTS
+    &VERSION=1.0.0&LAYER=wri:${name}&STYLE=&TILEMATRIX=EPSG:900913:{z}&TILEMATRIXSET=EPSG:900913&FORMAT=application/vnd.mapbox-vector-tile&TILECOL={x}&TILEROW={y}&RND=${Math.random()}`;
+  map.addSource(name, {
+    type: "vector",
+    tiles: [URL_GEOSERVER]
+  });
+  styles?.forEach((style: LayerWithStyle, index: number) => {
+    addLayerStyle(map, name, style, index);
+  });
+  loadLayersInMap(map, polygonsData);
+};
+
+export const addLayerStyle = (map: mapboxgl.Map, sourceName: string, style: LayerWithStyle, index: number) => {
+  map.addLayer({
+    id: `${sourceName}-${index}`,
+    source: sourceName,
+    "source-layer": sourceName,
+    ...style
+  } as mapboxgl.AnyLayer);
+};
+
+export const zoomToBbox = (bbox: BBox, map: mapboxgl.Map, hasControls: boolean) => {
+  if (map && bbox) {
+    map.fitBounds(bbox, {
+      padding: hasControls ? 100 : 30,
+      linear: false,
+      animate: true
+    });
+  }
+};
+
+export const formatPlannedStartDate = (plantStartDate: Date | null | undefined): string => {
+  return plantStartDate != null
+    ? plantStartDate.toLocaleDateString("en-US", {
+        month: "long",
+        day: "numeric",
+        year: "numeric",
+        timeZone: "UTC"
+      })
+    : "Unknown";
+};
+
+export function mapPolygonData(sitePolygonData: SitePolygonsDataResponse | undefined) {
+  return (sitePolygonData ?? []).reduce((acc: Record<string, string[]>, data: SitePolygon) => {
+    if (data.status && data.poly_id !== undefined) {
+      if (!acc[data.status]) {
+        acc[data.status] = [];
+      }
+      acc[data.status].push(data.poly_id);
+    }
+    return acc;
+  }, {});
 }
diff --git a/src/components/elements/MapSidePanel/MapSidePanel.stories.tsx b/src/components/elements/MapSidePanel/MapSidePanel.stories.tsx
index f48ac4f9b..88bdec011 100644
--- a/src/components/elements/MapSidePanel/MapSidePanel.stories.tsx
+++ b/src/components/elements/MapSidePanel/MapSidePanel.stories.tsx
@@ -20,6 +20,7 @@ export const Default: Story = {
         {...args}
         items={items.filter(item => (query ? item.title.includes(query) : item))}
         onSearch={setQuery}
+        title="Project Sites"
       />
     );
   },
@@ -33,32 +34,50 @@ const items = [
   {
     uuid: "1",
     title: "Puerto Princesa Subterranean River National Park Forest Corridor",
-    subtitle: "Created 03/12/21"
+    subtitle: "Created 03/12/21",
+    status: "submitted",
+    setClickedButton: console.log,
+    refContainer: null
   },
   {
     uuid: "2",
     title: "A medium sized project site to see how it looks with 2 lines",
-    subtitle: "Created 03/12/21"
+    subtitle: "Created 03/12/21",
+    status: "submitted",
+    setClickedButton: console.log,
+    refContainer: null
   },
   {
     uuid: "3",
     title: "A shorter project site",
-    subtitle: "Created 03/12/21"
+    subtitle: "Created 03/12/21",
+    status: "submitted",
+    setClickedButton: console.log,
+    refContainer: null
   },
   {
     uuid: "4",
     title:
       "Very long name A medium sized project site to see how it looks with 2 lines A medium sized project site to see how it looks with 2 lines A medium sized project site to see how it looks with 2 lines",
-    subtitle: "Created 03/12/21"
+    subtitle: "Created 03/12/21",
+    status: "submitted",
+    setClickedButton: console.log,
+    refContainer: null
   },
   {
     uuid: "5",
     title: "A shorter project site",
-    subtitle: "Created 03/12/21"
+    subtitle: "Created 03/12/21",
+    status: "submitted",
+    setClickedButton: console.log,
+    refContainer: null
   },
   {
     uuid: "6",
     title: "A shorter project site",
-    subtitle: "Created 03/12/21"
+    subtitle: "Created 03/12/21",
+    status: "submitted",
+    setClickedButton: console.log,
+    refContainer: null
   }
 ];
diff --git a/src/components/elements/MapSidePanel/MapSidePanel.tsx b/src/components/elements/MapSidePanel/MapSidePanel.tsx
index cf7ac32c1..f62e0fc38 100644
--- a/src/components/elements/MapSidePanel/MapSidePanel.tsx
+++ b/src/components/elements/MapSidePanel/MapSidePanel.tsx
@@ -1,19 +1,31 @@
 import { useT } from "@transifex/react";
 import classNames from "classnames";
-import { DetailedHTMLProps, Fragment, HTMLAttributes, useState } from "react";
+import { DetailedHTMLProps, Fragment, HTMLAttributes, useEffect, useRef, useState } from "react";
+import { When } from "react-if";
 
 import MapSidePanelItem, { MapSidePanelItemProps } from "@/components/elements/MapSidePanel/MapSidePanelItem";
-import FilterSearchBox from "@/components/elements/TableFilters/Inputs/FilterSearchBox";
 import Text from "@/components/elements/Text/Text";
+import Icon, { IconNames } from "@/components/extensive/Icon/Icon";
 import List from "@/components/extensive/List/List";
+import { STATUSES } from "@/constants/statuses";
+import { fetchGetV2TerrafundGeojsonComplete, fetchGetV2TerrafundPolygonBboxUuid } from "@/generated/apiComponents";
+
+import Button from "../Button/Button";
+import Checkbox from "../Inputs/Checkbox/Checkbox";
+import Menu from "../Menu/Menu";
+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;
+  onSearch?: (query: string) => void;
+  onLoadMore?: () => void;
   emptyText?: string;
+  mapFunctions: any;
+  checkedValues: string[];
+  onCheckboxChange: (value: string, checked: boolean) => void;
+  setSortOrder: React.Dispatch<React.SetStateAction<string>>;
 }
 
 const MapSidePanel = ({
@@ -24,31 +36,150 @@ const MapSidePanel = ({
   onSearch,
   onLoadMore,
   emptyText,
+  mapFunctions,
+  checkedValues,
+  onCheckboxChange,
+  setSortOrder,
   ...props
 }: MapSidePanelProps) => {
   const t = useT();
+  const menuCheckboxRef = useRef<HTMLDivElement>(null);
   const [selected, setSelected] = useState<MapSidePanelItemProps>();
+  const refContainer = useRef<HTMLDivElement>(null);
+  const [openMenu, setOpenMenu] = useState(false);
+  const [clickedButton, setClickedButton] = useState<string>("");
+  const checkboxRefs = useRef<HTMLInputElement[]>([]);
+
+  const { map } = mapFunctions;
+
+  const flyToPolygonBounds = async (polygonUuid: string) => {
+    const bbox = await fetchGetV2TerrafundPolygonBboxUuid({ pathParams: { uuid: polygonUuid } });
+    const bounds: any = bbox.bbox;
+    if (!map.current) {
+      return;
+    }
+    map.current.fitBounds(bounds, {
+      padding: 100,
+      linear: false
+    });
+  };
+
+  const downloadGeoJsonPolygon = async (polygonUuid: string) => {
+    const polygonGeojson = await fetchGetV2TerrafundGeojsonComplete({
+      queryParams: { uuid: polygonUuid }
+    });
+    const blob = new Blob([JSON.stringify(polygonGeojson)], { type: "application/json" });
+    const url = URL.createObjectURL(blob);
+    const link = document.createElement("a");
+    link.href = url;
+    link.download = `polygon.geojson`;
+    link.click();
+    URL.revokeObjectURL(url);
+  };
+
+  useEffect(() => {
+    if (clickedButton === "site") {
+      const siteUrl = `/site/${selected?.site_id}`;
+      window.open(siteUrl, "_blank");
+      setClickedButton("");
+    } else if (clickedButton === "zoomTo") {
+      flyToPolygonBounds(selected?.poly_id ?? "");
+      setClickedButton("");
+    } else if (clickedButton === "download") {
+      downloadGeoJsonPolygon(selected?.poly_id ?? "");
+      setClickedButton("");
+    }
+  }, [clickedButton, selected]);
+
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      if (menuCheckboxRef.current && !menuCheckboxRef.current?.contains(event.target as Node)) {
+        setOpenMenu(false);
+      }
+    };
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside);
+    };
+  });
+
+  const itemsPrimaryMenu = [
+    {
+      id: "1",
+      render: () => (
+        <Text variant="text-14-semibold" className="flex items-center" onClick={() => setSortOrder("poly_name")}>
+          Name
+        </Text>
+      )
+    },
+    {
+      id: "2",
+      render: () => (
+        <Text variant="text-14-semibold" className="flex items-center" onClick={() => setSortOrder("status")}>
+          Status
+        </Text>
+      )
+    },
+    {
+      id: "3",
+      render: () => (
+        <Text variant="text-14-semibold" className="flex items-center" onClick={() => setSortOrder("created_at")}>
+          Date Created
+        </Text>
+      )
+    }
+  ];
 
   return (
     <div {...props} className={classNames(className)}>
-      <div className="rounded-tl-lg bg-primary-200 px-5 py-4">
-        <Text variant="text-bold-subtitle-400">{title}</Text>
+      <div className="absolute top-0 left-0 -z-10 h-full w-full backdrop-blur-md" />
+      <div className="mb-3 flex items-start justify-between rounded-tl-lg">
+        <Text variant="text-16-bold" className="text-white">
+          {title}
+        </Text>
+        <div className="flex items-center gap-2">
+          <div className="relative" ref={menuCheckboxRef}>
+            <div className="rounded bg-white p-1.5" onClick={() => setOpenMenu(!openMenu)}>
+              <Icon name={IconNames.IC_FILTER} className="h-4 w-4 text-blueCustom-900 hover:text-primary-500" />
+            </div>
+            <When condition={openMenu}>
+              <div className="absolute z-10 mt-1 grid w-max gap-3 rounded-lg bg-white p-3 shadow">
+                {STATUSES.map((status, index) => (
+                  <Checkbox
+                    ref={ref => ref && checkboxRefs.current.push(ref as HTMLInputElement)}
+                    key={index}
+                    name=""
+                    label={t(status.label)}
+                    className="flex w-full flex-row-reverse items-center justify-end gap-3"
+                    textClassName="text-10-semibold"
+                    checked={checkedValues.includes(status.value)}
+                    onChange={e => onCheckboxChange(status.value, e.target.checked)}
+                  />
+                ))}
+              </div>
+            </When>
+          </div>
+          <div className="rounded bg-white p-1.5">
+            <Menu
+              container={refContainer?.current}
+              placement={MENU_PLACEMENT_BOTTOM_BOTTOM}
+              menu={itemsPrimaryMenu}
+              classNameContentMenu="!mt-3 ml-[-7px]"
+            >
+              <Button variant="text" onClick={() => {}}>
+                <Icon name={IconNames.IC_SORT} className="h-4 w-4 text-blueCustom-900 hover:text-primary-500" />
+              </Button>
+            </Menu>
+          </div>
+        </div>
       </div>
-      <div className="h-[calc(100%-59px)] rounded-bl-lg border-2 border-t-0 border-neutral-100 p-4">
-        <FilterSearchBox onChange={onSearch} className="w-full flex-shrink-0" placeholder={t("Search")} />
+      <div className="h-[calc(100%-38px)] rounded-bl-lg">
         {items.length === 0 && (
-          <Text variant="text-light-subtitle-400" className="mt-8 text-center">
+          <Text variant="text-16-light" className="mt-8 text-white">
             {emptyText || t("No result")}
           </Text>
         )}
-        <div
-          className="h-[calc(100%-16px)] space-y-4 overflow-y-auto py-4"
-          onScroll={e => {
-            //@ts-ignore
-            const bottom = e.target.scrollHeight - e.target.scrollTop === e.target.clientHeight;
-            if (bottom) onLoadMore();
-          }}
-        >
+        <div ref={refContainer} className="mr-[-12px] h-full space-y-4 overflow-y-auto pr-3">
           <List
             as={Fragment}
             items={items}
@@ -58,11 +189,14 @@ const MapSidePanel = ({
                 uuid={item.uuid}
                 title={item.title}
                 subtitle={item.subtitle}
+                status={item.status}
                 onClick={() => {
                   setSelected(item);
                   onSelectItem(item);
                 }}
+                setClickedButton={setClickedButton}
                 isSelected={selected?.uuid === item.uuid}
+                refContainer={refContainer}
               />
             )}
           />
diff --git a/src/components/elements/MapSidePanel/MapSidePanelItem.tsx b/src/components/elements/MapSidePanel/MapSidePanelItem.tsx
index dcebe1ac5..45b00c32b 100644
--- a/src/components/elements/MapSidePanel/MapSidePanelItem.tsx
+++ b/src/components/elements/MapSidePanel/MapSidePanelItem.tsx
@@ -4,28 +4,93 @@ import { DetailedHTMLProps, HTMLAttributes } from "react";
 import Text from "@/components/elements/Text/Text";
 import Icon, { IconNames } from "@/components/extensive/Icon/Icon";
 
+import Menu from "../Menu/Menu";
+import { MENU_PLACEMENT_RIGHT_BOTTOM } from "../Menu/MenuVariant";
+
 export interface MapSidePanelItemProps extends DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement> {
   uuid: string;
   title: string;
   subtitle: string;
+  status: string;
   isSelected?: boolean;
+  poly_id?: string;
+  site_id?: string;
+  setClickedButton: React.Dispatch<React.SetStateAction<string>>;
+  refContainer: React.RefObject<HTMLDivElement> | null;
 }
 
-const MapSidePanelItem = ({ title, subtitle, isSelected, className, ...props }: MapSidePanelItemProps) => {
-  return (
-    <div
-      {...props}
-      className={classNames(className, "flex items-center gap-6 rounded-lg border-2 p-3", {
-        "border-primary-500": isSelected,
-        "border-neutral-100 hover:border-neutral-800": !isSelected
-      })}
-    >
-      <Icon name={IconNames.MAP_THUMBNAIL} className="h-11 w-11 rounded-lg bg-neutral-300" />
-      <div className="flex flex-1 flex-col">
-        <Text variant="text-bold-caption-200" className="line-clamp-3">
-          {title}
+const MapSidePanelItem = ({
+  uuid,
+  title,
+  subtitle,
+  status,
+  isSelected,
+  setClickedButton,
+  className,
+  refContainer,
+  ...props
+}: MapSidePanelItemProps) => {
+  let imageStatus = `IC_${status.toUpperCase().replace(/-/g, "_")}`;
+
+  const itemsPrimaryMenu = [
+    {
+      id: "1",
+      render: () => (
+        <Text variant="text-14-semibold" className="flex items-center" onClick={() => setClickedButton("site")}>
+          <Icon name={IconNames.IC_SITE_VIEW} className="h-4 w-4 lg:h-5 lg:w-5" />
+          &nbsp; View Site
+        </Text>
+      )
+    },
+    {
+      id: "2",
+      render: () => (
+        <Text variant="text-14-semibold" className="flex items-center" onClick={() => setClickedButton("zoomTo")}>
+          <Icon name={IconNames.SEARCH} className="h-4 w-4 lg:h-5 lg:w-5" />
+          &nbsp; Zoom to
         </Text>
-        <Text variant="text-light-caption-200">{subtitle}</Text>
+      )
+    },
+    {
+      id: "3",
+      render: () => (
+        <Text variant="text-14-semibold" className="flex items-center" onClick={() => setClickedButton("download")}>
+          <Icon name={IconNames.IC_DOWNLOAD_MENU} className="h-4 w-4 lg:h-5 lg:w-5" />
+          &nbsp; Download
+        </Text>
+      )
+    }
+  ];
+
+  return (
+    <div>
+      <div
+        {...props}
+        className={classNames(className, " rounded-lg border-2 border-transparent bg-white p-2 hover:border-primary", {
+          "border-primary-500": isSelected,
+          "border-neutral-500 hover:border-neutral-800": !isSelected
+        })}
+      >
+        <div className="flex items-center gap-2">
+          <Icon
+            name={IconNames[imageStatus as keyof typeof IconNames]}
+            className="h-11 w-11 rounded-lg bg-neutral-300"
+          />
+          <div className="flex flex-1 flex-col">
+            <Text variant="text-14-bold" className="">
+              {title}
+            </Text>
+            <Text variant="text-14-light">{subtitle}</Text>
+          </div>
+          <div className="lex h-full self-start">
+            <Menu container={refContainer?.current} placement={MENU_PLACEMENT_RIGHT_BOTTOM} menu={itemsPrimaryMenu}>
+              <Icon
+                name={IconNames.IC_MORE_OUTLINED}
+                className="h-4 w-4 rounded-lg hover:fill-primary hover:text-primary lg:h-5 lg:w-5"
+              />
+            </Menu>
+          </div>
+        </div>
       </div>
     </div>
   );
diff --git a/src/components/elements/Menu/Menu.tsx b/src/components/elements/Menu/Menu.tsx
index 9e3a7f63f..c69096379 100644
--- a/src/components/elements/Menu/Menu.tsx
+++ b/src/components/elements/Menu/Menu.tsx
@@ -162,7 +162,6 @@ const Menu = (props: MenuProps) => {
 
     return styles;
   };
-
   return (
     <div
       ref={menuContainerRef}
diff --git a/src/components/elements/Notification/Notification.stories.tsx b/src/components/elements/Notification/Notification.stories.tsx
index 2a215628e..00fd61788 100644
--- a/src/components/elements/Notification/Notification.stories.tsx
+++ b/src/components/elements/Notification/Notification.stories.tsx
@@ -18,7 +18,8 @@ export const Success: Story = {
   args: {
     title: "Success! Your notes were just saved!",
     message: "Your notes were just saved!",
-    type: "success"
+    type: "success",
+    open: true
   }
 };
 
@@ -31,7 +32,8 @@ export const Error: Story = {
   args: {
     title: "Your critical message - make it short",
     message: "Describe the event and give further instruction if needed, including links to other pages.",
-    type: "error"
+    type: "error",
+    open: true
   }
 };
 
@@ -44,6 +46,7 @@ export const Warning: Story = {
   args: {
     title: "Your polygon has been edited. Run a validation check.",
     message: "This is required for site approval.",
-    type: "warning"
+    type: "warning",
+    open: true
   }
 };
diff --git a/src/components/elements/Notification/Notification.tsx b/src/components/elements/Notification/Notification.tsx
index 8d1a7bf26..33c3e2080 100644
--- a/src/components/elements/Notification/Notification.tsx
+++ b/src/components/elements/Notification/Notification.tsx
@@ -1,8 +1,10 @@
 import { useT } from "@transifex/react";
 import classNames from "classnames";
 import { has } from "lodash";
-import { FC, useMemo } from "react";
+import { FC, useEffect, useMemo, useState } from "react";
+import ReactDOM from "react-dom";
 import { When } from "react-if";
+import { twMerge as tw } from "tailwind-merge";
 
 import Icon, { IconNames } from "@/components/extensive/Icon/Icon";
 
@@ -14,11 +16,13 @@ export interface NotificationProps extends React.HTMLAttributes<HTMLDivElement>
   type?: "success" | "error" | "warning";
   message: string;
   title: string;
+  open: boolean;
 }
 
 const Notification: FC<NotificationProps> = props => {
-  const { type = "default", message, className, title, ...rest } = props;
+  const { type = "default", message, className, title, open, ...rest } = props;
   const t = useT();
+  const [openNotification, setOpenNotification] = useState(open);
 
   const textClasses = useMemo(() => (has(TEXT_CLASSES, type) ? TEXT_CLASSES[type] : TEXT_CLASSES.default), [type]);
 
@@ -27,28 +31,52 @@ const Notification: FC<NotificationProps> = props => {
     [type]
   );
 
-  return (
-    <div {...rest} className={classNames(notificationClasses, className)}>
-      <div className="mr-2">
-        <When condition={type === "success"}>
-          <Icon name={IconNames.IC_SUCCESS} width={24} height={24} />
-        </When>
-        <When condition={type === "error"}>
-          <Icon name={IconNames.IC_ERROR} width={24} height={24} />
-        </When>
-        <When condition={type === "warning"}>
-          <Icon name={IconNames.IC_WARNING} width={24} height={24} />
-        </When>
-      </div>
-      <div>
-        <Text variant="text-bold-body-300" className={textClasses}>
-          {t(title)}
-        </Text>
-        <Text variant="text-body-200" className="mt-2 !font-primary">
-          {t(message)}
-        </Text>
-      </div>
-    </div>
+  useEffect(() => {
+    setOpenNotification(open);
+  }, [open]);
+
+  const closeNotification = () => {
+    setOpenNotification(false);
+  };
+
+  return ReactDOM.createPortal(
+    <div className="fixed top-[86px] right-[1.5vw] z-[1000000] flex w-[28vw] shadow-black">
+      {openNotification ? (
+        <>
+          <div {...rest} className={classNames(notificationClasses, className)}>
+            <div className="mr-2">
+              <When condition={type === "success"}>
+                <Icon name={IconNames.IC_SUCCESS} width={24} height={24} />
+              </When>
+              <When condition={type === "error"}>
+                <Icon name={IconNames.IC_ERROR} width={24} height={24} />
+              </When>
+              <When condition={type === "warning"}>
+                <Icon name={IconNames.IC_WARNING} width={24} height={24} />
+              </When>
+            </div>
+            <div className="w-full">
+              <div>
+                <Text variant="text-bold-body-300" className={tw("w-full", textClasses)}>
+                  <button onClick={closeNotification} className="float-right text-neutral-400 hover:opacity-60">
+                    <Icon name={IconNames.CLEAR} className={tw("h-3 w-3 lg:h-4 lg:w-4 wide:h-5 wide:w-5")} />
+                  </button>
+                  {t(title)}
+                </Text>
+              </div>
+              <When condition={!!message}>
+                <Text variant="text-body-200" className="mt-2 !font-primary">
+                  {t(message)}
+                </Text>
+              </When>
+            </div>
+          </div>
+        </>
+      ) : (
+        <></>
+      )}
+    </div>,
+    document.body
   );
 };
 
diff --git a/src/components/elements/Status/Status.tsx b/src/components/elements/Status/Status.tsx
index bf4d59d18..4b831c82d 100644
--- a/src/components/elements/Status/Status.tsx
+++ b/src/components/elements/Status/Status.tsx
@@ -7,24 +7,47 @@ import { TextVariants } from "@/types/common";
 import Text from "../Text/Text";
 import { COLOR_BG_MAP } from "./constants/colorBgMap";
 import { COLOR_TEXT_MAP } from "./constants/colorTextMap";
-import { STATUS_MAP } from "./constants/statusMap";
+
+export enum StatusEnum {
+  // eslint-disable-next-line no-unused-vars
+  DRAFT = "draft",
+  // eslint-disable-next-line no-unused-vars
+  SUBMITTED = "submitted",
+  // eslint-disable-next-line no-unused-vars
+  APPROVED = "approved",
+  // eslint-disable-next-line no-unused-vars
+  UNDER_REVIEW = "under-review",
+  // eslint-disable-next-line no-unused-vars
+  NEEDS_MORE_INFORMATION = "needs-more-information",
+  // eslint-disable-next-line no-unused-vars
+  PLANTING_IN_PROGRESS = "planting-in-progress",
+  // eslint-disable-next-line no-unused-vars
+  AWAITING_APPROVAL = "awaiting-approval"
+}
 
 export interface StatusProps {
   className?: string;
-  status:
-    | "draft"
-    | "submitted"
-    | "approved"
-    | "under-review"
-    | "needs-more-information"
-    | "planting-in-progress"
-    | "awaiting-approval";
+  status: StatusEnum;
   textVariant?: TextVariants;
 }
 
 const Status = (props: StatusProps) => {
   const { className, status, textVariant = "text-12-semibold" } = props;
 
+  const convertStatusToReadableStatus = (status: string): string => {
+    const statusMap: { [key: string]: string } = {
+      approved: "Approved",
+      submitted: "Submitted",
+      draft: "Draft",
+      "under-review": "Under Review",
+      "needs-more-information": "Needs More Information",
+      "planting-in-progress": "Planting in Progress",
+      "awaiting-approval": "Awaiting Approval"
+    };
+
+    return statusMap[status] || "";
+  };
+
   return (
     <div className={tw("flex items-center justify-center rounded-xl py-1 px-[6px]", COLOR_BG_MAP[status], className)}>
       <Text
@@ -34,7 +57,7 @@ const Status = (props: StatusProps) => {
         <When condition={status === "approved"}>
           <Icon name={IconNames.CHECK_CIRCLE_FILL} className="h-4 w-4 text-secondary" />
         </When>
-        {STATUS_MAP[status]}
+        {convertStatusToReadableStatus(status)}
       </Text>
     </div>
   );
diff --git a/src/components/elements/TooltipMap/TooltipMap.tsx b/src/components/elements/TooltipMap/TooltipMap.tsx
index dc65e9f70..2c8500dd3 100644
--- a/src/components/elements/TooltipMap/TooltipMap.tsx
+++ b/src/components/elements/TooltipMap/TooltipMap.tsx
@@ -1,34 +1,59 @@
 import { useT } from "@transifex/react";
-import React from "react";
+import React, { useEffect } from "react";
 
 import Icon, { IconNames } from "@/components/extensive/Icon/Icon";
+import { useGetV2TerrafundPolygonUuid } from "@/generated/apiComponents";
+import { SitePolygon } from "@/generated/apiSchemas";
 
+import type { TooltipType } from "../Map-mapbox/Map.d";
+import { formatPlannedStartDate } from "../Map-mapbox/utils";
 import Text from "../Text/Text";
 export interface TooltipMapProps {
   setTooltipOpen: () => void;
   setEditPolygon: () => void;
   polygon: any;
+  type?: TooltipType;
   popup?: any;
-  formattedPlantStartDate: any;
 }
 const topBorderColorPopup: any = {
-  Submitted: "border-t-primary",
-  Approved: "border-t-[#72D961]",
-  "Needs More Info": "border-t-[#FF8938]"
+  submitted: "border-t-primary",
+  approved: "border-t-[#72D961]",
+  "needs-more-information": "border-t-[#FF8938]",
+  draft: "border-t-[#E468EF]"
 };
 
 const TooltipMap = (props: TooltipMapProps) => {
-  const { setTooltipOpen, setEditPolygon, polygon, formattedPlantStartDate } = props;
+  const { setTooltipOpen, setEditPolygon, polygon, type } = props;
   const t = useT();
+  const [polygonData, setPolygonData] = React.useState<SitePolygon>();
+  const { data: sitePolygonData } = useGetV2TerrafundPolygonUuid<{
+    site_polygon: SitePolygon;
+  }>({
+    pathParams: {
+      uuid: polygon
+    }
+  });
+
+  useEffect(() => {
+    setPolygonData(sitePolygonData?.site_polygon);
+  }, [sitePolygonData]);
+
+  const formatDate = (date: string | undefined) => {
+    const plantStartDate = date ? new Date(date) : null;
+    const formattedPlantStartDate = formatPlannedStartDate(plantStartDate);
+    return formattedPlantStartDate;
+  };
+
+  const polygonDataStatus = polygonData?.status ? polygonData.status : "submitted";
+
+  const goToRelatedSiteProfile = () => {
+    const siteUrl = `/site/${polygonData?.site_id}`;
+    window.open(siteUrl, "_blank");
+  };
+
   return (
     <div
-      className={`absolute z-20 w-[295px] rounded border-t-[5px] ${
-        topBorderColorPopup[polygon?.status]
-      } bg-white px-3 pb-3 pt-[7px]`}
-      style={{
-        bottom: "0",
-        transform: "translate(-50%, 0px)"
-      }}
+      className={`w-[295px] rounded border-t-[5px] ${topBorderColorPopup[polygonDataStatus]} bg-white px-3 pb-3 pt-[7px]`}
     >
       <button onClick={setTooltipOpen} className="absolute right-2 top-2 ml-2 rounded p-1 hover:bg-grey-800">
         <Icon name={IconNames.CLEAR} className="h-3 w-3 text-darkCustom-100" />
@@ -36,11 +61,11 @@ const TooltipMap = (props: TooltipMapProps) => {
 
       <div className="text-10 flex items-center justify-center gap-1">
         <Text variant="text-10" className="mb-1 uppercase leading-[normal]">
-          {polygon?.site_name} {t("SITE")}
+          {polygonData?.site_name} {t("SITE")}
         </Text>
       </div>
       <Text variant="text-10-bold" className="text-center leading-[normal] text-black">
-        {polygon?.poly_name ? polygon?.poly_name : t("Unnamed Polygon")}
+        {polygonData?.poly_name ? polygonData?.poly_name : t("Unnamed Polygon")}
       </Text>
       <hr className="my-2 border border-grey-750" />
       <div className="grid grid-cols-2 gap-4">
@@ -49,7 +74,7 @@ const TooltipMap = (props: TooltipMapProps) => {
             {t("Restoration Practice")}
           </Text>
           <Text variant="text-10-bold" className="leading-[normal] text-black ">
-            {polygon?.practice ? polygon?.practice : t("Unknown")}
+            {polygonData?.practice ? polygonData?.practice : t("Unknown")}
           </Text>
         </div>
         <div>
@@ -57,7 +82,7 @@ const TooltipMap = (props: TooltipMapProps) => {
             {t("Target Land Use System")}
           </Text>
           <Text variant="text-10-bold" className="leading-[normal] text-black ">
-            {polygon?.target_sys ? polygon?.target_sys : t("Unknown")}
+            {polygonData?.target_sys ? polygonData?.target_sys : t("Unknown")}
           </Text>
         </div>
         <div>
@@ -65,7 +90,7 @@ const TooltipMap = (props: TooltipMapProps) => {
             {t("Tree Distribution")}
           </Text>
           <Text variant="text-10-bold" className="leading-[normal] text-black">
-            {polygon?.distr ? polygon?.distr : t("Unknown")}
+            {polygonData?.distr ? polygonData?.distr : t("Unknown")}
           </Text>
         </div>
         <div>
@@ -73,20 +98,42 @@ const TooltipMap = (props: TooltipMapProps) => {
             {t("Planting Start Date")}
           </Text>
           <Text variant="text-10-bold" className="leading-[normal] text-black ">
-            {formattedPlantStartDate}
+            {formatDate(polygonData?.plantstart)}
           </Text>
         </div>
       </div>
 
       <hr className="my-2 border border-grey-750" />
-      <div className="flex w-full items-center justify-center">
-        <button className="flex items-center justify-center gap-1" onClick={setEditPolygon}>
-          <Icon name={IconNames.CLICK} className="h-4 w-4" />
-          <Text variant="text-10-light" className="italic text-black">
-            {t("click to see polygon details")}
-          </Text>
-        </button>
-      </div>
+      {type === "edit" && (
+        <div className="flex w-full items-center justify-center">
+          <button className="flex items-center justify-center gap-1" onClick={setEditPolygon}>
+            <Icon name={IconNames.CLICK} className="h-4 w-4" />
+            <Text variant="text-10-light" className="italic text-black">
+              {t("click to see polygon details")}
+            </Text>
+          </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">
+              {t("click to open site profile page")}
+            </Text>
+          </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/components/extensive/Icon/Icon.tsx b/src/components/extensive/Icon/Icon.tsx
index 2cfaa464e..84043b6e1 100644
--- a/src/components/extensive/Icon/Icon.tsx
+++ b/src/components/extensive/Icon/Icon.tsx
@@ -92,6 +92,9 @@ export enum IconNames {
   SUCCESS = "ic-success",
   CRITICAL = "ic-critical",
   USER_ROLE = "user-role",
+  USER_PROJECT_DEVELOPER = "ic-projectdeveloper",
+  USER_GOVERNMENT = "ic-government",
+  USER_INVESTOR = "ic-investor",
   NO_SUCCESS = "no-success",
   CLEAR = "clear",
   IC_ERROR = "ic-error",
@@ -147,6 +150,10 @@ export enum IconNames {
   IC_INFO_WHITE = "ic-info-white",
   ERROR_WHITE_BORDER_RED = "error-white-border-red",
   CLICK = "click",
+  IC_APPROVED = "ic_approved",
+  IC_DRAFT = "ic_draft",
+  IC_NEEDS_MORE_INFORMATION = "ic_needs-more-information",
+  IC_SUBMITTED = "ic_submitted",
   IC_ARROW_COLLAPSE = "ic-arrow-collapse"
 }
 
diff --git a/src/components/extensive/Modal/ModalAdd.tsx b/src/components/extensive/Modal/ModalAdd.tsx
index 75b778f06..ef2273959 100644
--- a/src/components/extensive/Modal/ModalAdd.tsx
+++ b/src/components/extensive/Modal/ModalAdd.tsx
@@ -1,6 +1,7 @@
 import { remove } from "lodash";
 import React, { FC, ReactNode, useEffect, useState } from "react";
 import { When } from "react-if";
+import { twMerge } from "tailwind-merge";
 
 import Button from "@/components/elements/Button/Button";
 import FileInput from "@/components/elements/Inputs/FileInput/FileInput";
@@ -8,7 +9,7 @@ import {
   FileInputVariant,
   VARIANT_FILE_INPUT_MODAL_ADD
 } from "@/components/elements/Inputs/FileInput/FileInputVariants";
-import Status from "@/components/elements/Status/Status";
+import Status, { StatusEnum } from "@/components/elements/Status/Status";
 import Text from "@/components/elements/Text/Text";
 import { FileType, UploadedFile } from "@/types/common";
 
@@ -62,7 +63,11 @@ const ModalAdd: FC<ModalAddProps> = ({
         <Icon name={IconNames.WRI_LOGO} width={108} height={30} className="min-w-[108px]" />
         <div className="flex items-center">
           <When condition={status}>
-            <Status status={status ? status : "draft"} className="rounded px-2 py-[2px]" textVariant="text-14-bold" />
+            <Status
+              status={(status ? status : "draft") as StatusEnum}
+              className="rounded px-2 py-[2px]"
+              textVariant="text-14-bold"
+            />
           </When>
           <button onClick={onClose} className="ml-2 rounded p-1 hover:bg-grey-800">
             <Icon name={IconNames.CLEAR} width={16} height={16} className="text-darkCustom-100" />
@@ -70,6 +75,14 @@ const ModalAdd: FC<ModalAddProps> = ({
         </div>
       </header>
       <div className="max-h-[100%] w-full overflow-auto px-8 py-8">
+        <When condition={!!iconProps}>
+          <Icon
+            {...iconProps!}
+            width={iconProps?.width || 40}
+            className={twMerge("mb-8", iconProps?.className)}
+            style={{ minHeight: iconProps?.height || iconProps?.width || 40 }}
+          />
+        </When>
         <div className="flex items-center justify-between">
           <Text variant="text-24-bold">{title}</Text>
         </div>
diff --git a/src/components/extensive/Modal/ModalApprove.tsx b/src/components/extensive/Modal/ModalApprove.tsx
index 8825a1bef..250e9ceee 100644
--- a/src/components/extensive/Modal/ModalApprove.tsx
+++ b/src/components/extensive/Modal/ModalApprove.tsx
@@ -1,17 +1,17 @@
 import { useT } from "@transifex/react";
 import { FC } from "react";
 import { When } from "react-if";
+import { twMerge as tw } from "tailwind-merge";
 
 import Button from "@/components/elements/Button/Button";
 import Checkbox from "@/components/elements/Inputs/Checkbox/Checkbox";
-import Status from "@/components/elements/Status/Status";
+import Status, { StatusEnum } from "@/components/elements/Status/Status";
 import Text from "@/components/elements/Text/Text";
 
 import Icon, { IconNames } from "../Icon/Icon";
 import { ModalProps } from "./Modal";
 import { dataSubmitPolygons } from "./ModalContent/MockedData";
 import { ModalBaseSubmit } from "./ModalsBases";
-
 export interface ModalApproveProps extends ModalProps {
   primaryButtonText?: string;
   secondaryButtonText?: string;
@@ -41,7 +41,11 @@ const ModalApprove: FC<ModalApproveProps> = ({
         <Icon name={IconNames.WRI_LOGO} width={108} height={30} className="min-w-[108px]" />
         <div className="flex items-center">
           <When condition={status}>
-            <Status status={status ?? "draft"} className="rounded px-2 py-[2px]" textVariant="text-14-bold" />
+            <Status
+              status={(status ? status : "draft") as StatusEnum}
+              className="rounded px-2 py-[2px]"
+              textVariant="text-14-bold"
+            />
           </When>
           <button onClick={onClose} className="ml-2 rounded p-1 hover:bg-grey-800">
             <Icon name={IconNames.CLEAR} width={16} height={16} className="text-darkCustom-100" />
@@ -49,6 +53,14 @@ const ModalApprove: FC<ModalApproveProps> = ({
         </div>
       </header>
       <div className="max-h-[100%] w-full overflow-auto px-8 py-8">
+        <When condition={!!iconProps}>
+          <Icon
+            {...iconProps!}
+            width={iconProps?.width || 40}
+            className={tw("mb-8", iconProps?.className)}
+            style={{ minHeight: iconProps?.height || iconProps?.width || 40 }}
+          />
+        </When>
         <div className="flex items-center justify-between">
           <Text variant="text-24-bold">{title}</Text>
         </div>
diff --git a/src/components/extensive/Modal/ModalConfirm.tsx b/src/components/extensive/Modal/ModalConfirm.tsx
index dd88a5b83..5095b7edb 100644
--- a/src/components/extensive/Modal/ModalConfirm.tsx
+++ b/src/components/extensive/Modal/ModalConfirm.tsx
@@ -18,6 +18,7 @@ export interface ModalConfirmProps extends ModalProps {
   menu?: Option[];
   menuLabel?: string;
   commentArea?: boolean;
+  checkPolygonsSite?: boolean | undefined;
 }
 
 const ModalConfirm: FC<ModalConfirmProps> = ({
@@ -30,16 +31,23 @@ const ModalConfirm: FC<ModalConfirmProps> = ({
   menu = [],
   menuLabel,
   commentArea = false,
+  checkPolygonsSite,
   ...rest
 }) => {
   const [data, useData] = useState("");
   const [selectedOption, setSelectedOption] = useState<any>(null);
   const [showError, setShowError] = useState(false);
   const [charCount, setCharCount] = useState<number>(0);
+  const [warning, setWarning] = useState<string>("");
 
   const handleCommentChange = (e: any) => {
     useData(e.target.value);
     setCharCount(e.target.value.length);
+    if (charCount >= 255) {
+      setWarning("Your comment exceeds 255 characters.");
+    } else {
+      setWarning("");
+    }
   };
   const t = useT();
 
@@ -72,6 +80,7 @@ const ModalConfirm: FC<ModalConfirmProps> = ({
               onChange={opt => {
                 setSelectedOption(opt);
               }}
+              disableOptionTitles={checkPolygonsSite ? ["Approved"] : undefined}
             />
             <If condition={showError}>
               <Text variant="text-12-bold" className="text-red">
@@ -90,8 +99,11 @@ const ModalConfirm: FC<ModalConfirmProps> = ({
             containerClassName="w-full"
             rows={4}
           />
-          <div className={`text-right text-xs ${charCount > 255 ? "text-red" : "text-grey-500"}`}>
-            {charCount}/255 {t("characters")}
+          <div className="display-grid">
+            {warning && charCount > 255 && <div className="text-right text-xs text-red">{warning}</div>}
+            <div className={`text-right text-xs ${charCount > 255 ? "text-red" : "text-grey-500"}`}>
+              {charCount}/255 {t("characters")}
+            </div>
           </div>
         </When>
       </div>
diff --git a/src/components/extensive/Modal/ModalSubmit.tsx b/src/components/extensive/Modal/ModalSubmit.tsx
index 1dd17dfa1..4813d2092 100644
--- a/src/components/extensive/Modal/ModalSubmit.tsx
+++ b/src/components/extensive/Modal/ModalSubmit.tsx
@@ -1,15 +1,17 @@
 import { useT } from "@transifex/react";
-import { FC } from "react";
+import { FC, useEffect, useState } from "react";
 import { When } from "react-if";
+import { twMerge } from "tailwind-merge";
 
 import Button from "@/components/elements/Button/Button";
 import Checkbox from "@/components/elements/Inputs/Checkbox/Checkbox";
-import Status from "@/components/elements/Status/Status";
+import Status, { StatusEnum } from "@/components/elements/Status/Status";
 import Text from "@/components/elements/Text/Text";
+import { fetchGetV2SitePolygonUUID } from "@/generated/apiComponents";
+import { SitePolygonResponse } from "@/generated/apiSchemas";
 
 import Icon, { IconNames } from "../Icon/Icon";
 import { ModalProps } from "./Modal";
-import { dataSubmitPolygons } from "./ModalContent/MockedData";
 import { ModalBaseSubmit } from "./ModalsBases";
 
 export interface ModalSubmitProps extends ModalProps {
@@ -18,6 +20,7 @@ export interface ModalSubmitProps extends ModalProps {
   toogleButton?: boolean;
   status?: "under-review" | "approved" | "draft" | "submitted";
   onClose?: () => void;
+  site: any;
 }
 
 const ModalSubmit: FC<ModalSubmitProps> = ({
@@ -32,9 +35,24 @@ const ModalSubmit: FC<ModalSubmitProps> = ({
   children,
   status,
   onClose,
+  site,
   ...rest
 }) => {
+  const [polygonList, setPolygonList] = useState<SitePolygonResponse[]>([]);
   const t = useT();
+  const loadPolygonList = async () => {
+    const res = await fetchGetV2SitePolygonUUID({
+      pathParams: {
+        uuid: site.uuid
+      }
+    });
+    const _polygonList = (res as { data: SitePolygonResponse[] }).data;
+    setPolygonList(_polygonList);
+  };
+
+  useEffect(() => {
+    loadPolygonList();
+  }, []);
 
   return (
     <ModalBaseSubmit {...rest}>
@@ -42,7 +60,11 @@ const ModalSubmit: FC<ModalSubmitProps> = ({
         <Icon name={IconNames.WRI_LOGO} width={108} height={30} className="min-w-[108px]" />
         <div className="flex items-center">
           <When condition={status}>
-            <Status status={status ?? "draft"} className="rounded px-2 py-[2px]" textVariant="text-14-bold" />
+            <Status
+              status={(status ? status : "draft") as StatusEnum}
+              className="rounded px-2 py-[2px]"
+              textVariant="text-14-bold"
+            />
           </When>
           <button onClick={onClose} className="ml-2 rounded p-1 hover:bg-grey-800">
             <Icon name={IconNames.CLEAR} width={16} height={16} className="text-darkCustom-100" />
@@ -50,6 +72,14 @@ const ModalSubmit: FC<ModalSubmitProps> = ({
         </div>
       </header>
       <div className="max-h-[100%] w-full overflow-auto px-8 py-8">
+        <When condition={!!iconProps}>
+          <Icon
+            {...iconProps!}
+            width={iconProps?.width || 40}
+            className={twMerge("mb-8", iconProps?.className)}
+            style={{ minHeight: iconProps?.height || iconProps?.width || 40 }}
+          />
+        </When>
         <div className="flex items-center justify-between">
           <Text variant="text-24-bold">{title}</Text>
         </div>
@@ -70,13 +100,13 @@ const ModalSubmit: FC<ModalSubmitProps> = ({
               {t("Submit")}
             </Text>
           </header>
-          {dataSubmitPolygons.map(item => (
-            <div key={item.id} className="flex items-center border-b border-grey-750 px-4 py-2 last:border-0">
+          {polygonList.map(polygon => (
+            <div key={polygon.uuid} className="flex items-center border-b border-grey-750 px-4 py-2 last:border-0">
               <Text variant="text-12" className="flex-[2]">
-                {item.name}
+                {polygon.poly_name}
               </Text>
               <div className="flex flex-1 items-center justify-center">
-                <Status status={item.status} />
+                <Status status={polygon.status as StatusEnum} />
               </div>
               <div className="flex flex-1 items-center justify-center">
                 <Checkbox name={""} />
@@ -85,7 +115,7 @@ const ModalSubmit: FC<ModalSubmitProps> = ({
           ))}
         </div>
       </div>
-      <div className="flex w-full justify-end gap-3 py-4 px-8">
+      <div className="flex w-full justify-end gap-3 px-8 py-4">
         <When condition={!!secondaryButtonProps}>
           <Button {...secondaryButtonProps!} variant="white-page-admin">
             <Text variant="text-14-bold" className="capitalize">
diff --git a/src/components/extensive/Modal/ModalWithClose.tsx b/src/components/extensive/Modal/ModalWithClose.tsx
index a289f7e42..1be72b9cf 100644
--- a/src/components/extensive/Modal/ModalWithClose.tsx
+++ b/src/components/extensive/Modal/ModalWithClose.tsx
@@ -1,6 +1,7 @@
 import classNames from "classnames";
 import { FC } from "react";
 import { When } from "react-if";
+import { twMerge } from "tailwind-merge";
 
 import Button from "@/components/elements/Button/Button";
 import Text from "@/components/elements/Text/Text";
@@ -35,6 +36,15 @@ const ModalCloseLogo: FC<ModalCloseProps> = ({
       </div>
 
       {children}
+      <When condition={!!iconProps}>
+        <Icon
+          {...iconProps!}
+          width={iconProps?.width || 40}
+          className={twMerge("mb-8", iconProps?.className)}
+          style={{ minHeight: iconProps?.height || iconProps?.width || 40 }}
+        />
+      </When>
+
       <When condition={!!content}>
         <Text variant="text-light-body-300" className="mt-2 text-center" containHtml>
           {content}
diff --git a/src/components/extensive/Modal/ModalWithLogo.tsx b/src/components/extensive/Modal/ModalWithLogo.tsx
index bf1c01c8a..77af0e812 100644
--- a/src/components/extensive/Modal/ModalWithLogo.tsx
+++ b/src/components/extensive/Modal/ModalWithLogo.tsx
@@ -7,7 +7,7 @@ import Button from "@/components/elements/Button/Button";
 import Commentary from "@/components/elements/Commentary/Commentary";
 import CommentaryBox from "@/components/elements/CommentaryBox/CommentaryBox";
 import StepProgressbar from "@/components/elements/ProgressBar/StepProgressbar/StepProgressbar";
-import Status from "@/components/elements/Status/Status";
+import Status, { StatusEnum } from "@/components/elements/Status/Status";
 import Text from "@/components/elements/Text/Text";
 
 import Icon, { IconNames } from "../Icon/Icon";
@@ -46,7 +46,11 @@ const ModalWithLogo: FC<ModalWithLogoProps> = ({
         <Icon name={IconNames.WRI_LOGO} width={108} height={30} className="min-w-[108px]" />
         <div className="flex items-center">
           <When condition={status}>
-            <Status status={status ? status : "draft"} className="rounded px-2 py-[2px]" textVariant="text-14-bold" />
+            <Status
+              status={(status ? status : "draft") as StatusEnum}
+              className="rounded px-2 py-[2px]"
+              textVariant="text-14-bold"
+            />
           </When>
           <button onClick={onClose} className="ml-2 rounded p-1 hover:bg-grey-800">
             <Icon name={IconNames.CLEAR} width={16} height={16} className="text-darkCustom-100" />
diff --git a/src/components/extensive/Modal/ModalWithMap.tsx b/src/components/extensive/Modal/ModalWithMap.tsx
index 5430937de..b1d4faa8d 100644
--- a/src/components/extensive/Modal/ModalWithMap.tsx
+++ b/src/components/extensive/Modal/ModalWithMap.tsx
@@ -1,16 +1,17 @@
 import { useT } from "@transifex/react";
 import { remove } from "lodash";
-import { FC, useState } from "react";
+import { FC, useEffect, useState } from "react";
 import { When } from "react-if";
 
 import Button from "@/components/elements/Button/Button";
 import FileInput from "@/components/elements/Inputs/FileInput/FileInput";
 import { VARIANT_FILE_INPUT_MODAL_ADD_IMAGES_WITH_MAP } from "@/components/elements/Inputs/FileInput/FileInputVariants";
 import TextArea from "@/components/elements/Inputs/textArea/TextArea";
-import Map from "@/components/elements/Map-mapbox/Map";
+import { MapContainer } from "@/components/elements/Map-mapbox/Map";
 import StepProgressbar from "@/components/elements/ProgressBar/StepProgressbar/StepProgressbar";
-import Status from "@/components/elements/Status/Status";
+import Status, { StatusEnum } from "@/components/elements/Status/Status";
 import Text from "@/components/elements/Text/Text";
+import { fetchGetV2TerrafundPolygonBboxUuid, fetchGetV2TerrafundPolygonGeojsonUuid } from "@/generated/apiComponents";
 import { UploadedFile } from "@/types/common";
 
 import Icon, { IconNames } from "../Icon/Icon";
@@ -38,8 +39,35 @@ const ModalWithMap: FC<ModalWithMapProps> = ({
   ...rest
 }) => {
   const [files, setFiles] = useState<UploadedFile[]>([]);
+  const [polygonData, setPolygonData] = useState<any>();
+  const [initialPolygonData, setInitialPolygonData] = useState<any>();
+  const [polygonBbox, setPolygonBbox] = useState<any>();
   const t = useT();
 
+  useEffect(() => {
+    const getPolygonData = async () => {
+      if (polygonSelected) {
+        const polygonGeojson = await fetchGetV2TerrafundPolygonGeojsonUuid({
+          pathParams: { uuid: polygonSelected }
+        });
+        setInitialPolygonData(polygonGeojson);
+        const bbox = await fetchGetV2TerrafundPolygonBboxUuid({ pathParams: { uuid: polygonSelected } });
+        setPolygonBbox(bbox?.bbox);
+      }
+    };
+
+    getPolygonData();
+  }, [polygonSelected]);
+
+  useEffect(() => {
+    if (initialPolygonData) {
+      const selectedPolygon: any = {};
+      const entry = initialPolygonData?.site_polygon;
+      selectedPolygon[entry?.status] = entry?.poly_id;
+      setPolygonData(selectedPolygon);
+    }
+  }, [initialPolygonData]);
+
   return (
     <ModalBaseWithMap {...rest}>
       <div className="flex h-full w-full">
@@ -48,7 +76,7 @@ const ModalWithMap: FC<ModalWithMapProps> = ({
             <Icon name={IconNames.WRI_LOGO} width={108} height={30} className="min-w-[108px]" />
             <div className="flex items-center">
               <When condition={status}>
-                <Status status={status ?? "draft"} />
+                <Status status={(status ? status : "draft") as StatusEnum} />
               </When>
             </div>
           </header>
@@ -115,7 +143,13 @@ const ModalWithMap: FC<ModalWithMapProps> = ({
           </div>
         </div>
         <div className="relative h-[700px] w-[60%]">
-          <Map className="h-full w-full" hasControls={false} />
+          <MapContainer
+            className="h-full w-full"
+            hasControls={false}
+            polygonChecks
+            polygonsData={polygonData}
+            bbox={polygonBbox}
+          />
           <button onClick={onClose} className="absolute right-1 top-1 z-10 rounded bg-grey-750 p-1 drop-shadow-md">
             <Icon name={IconNames.CLEAR} className="h-4 w-4 text-darkCustom-100" />
           </button>
diff --git a/src/components/extensive/PageElements/Footer/PageFooter.tsx b/src/components/extensive/PageElements/Footer/PageFooter.tsx
index 1fe973c0c..d31e4db5b 100644
--- a/src/components/extensive/PageElements/Footer/PageFooter.tsx
+++ b/src/components/extensive/PageElements/Footer/PageFooter.tsx
@@ -1,6 +1,6 @@
 import Icon, { IconNames } from "../../Icon/Icon";
 
-const PageFooter = () => {
+const PageFooter = () => (
   <div className="mt-0 flex h-28 items-center justify-between bg-[#353535] px-28 text-white" style={{ marginTop: 0 }}>
     <div className="flex">
       <Icon name={IconNames.FACEBOOK} className="mr-4" />
@@ -9,7 +9,7 @@ const PageFooter = () => {
     </div>
     <Icon name={IconNames.WRI_LOGO} width={108} height={30} className="min-w-[108px]" />
     <p> © TerraMatch 2024</p>
-  </div>;
-};
+  </div>
+);
 
 export default PageFooter;
diff --git a/src/components/extensive/WizardForm/FormSummaryRow.tsx b/src/components/extensive/WizardForm/FormSummaryRow.tsx
index 90ac8a5c4..f03bea716 100644
--- a/src/components/extensive/WizardForm/FormSummaryRow.tsx
+++ b/src/components/extensive/WizardForm/FormSummaryRow.tsx
@@ -1,7 +1,7 @@
 import { AccessorKeyColumnDef } from "@tanstack/react-table";
 import { useT } from "@transifex/react";
-import dynamic from "next/dynamic";
 import { useMemo } from "react";
+import { useShowContext } from "react-admin";
 import { Else, If, Then } from "react-if";
 
 import { formatEntryValue } from "@/admin/apiProvider/utils/entryFormat";
@@ -14,18 +14,22 @@ import { getOwnershipTableColumns } from "@/components/elements/Inputs/DataTable
 import { getSeedingTableColumns } from "@/components/elements/Inputs/DataTable/RHFSeedingTable";
 import { getStrataTableColumns } from "@/components/elements/Inputs/DataTable/RHFStrataTable";
 import { TreeSpeciesValue } from "@/components/elements/Inputs/TreeSpeciesInput/TreeSpeciesInput";
+import { useMap } from "@/components/elements/Map-mapbox/hooks/useMap";
+import { MapContainer } from "@/components/elements/Map-mapbox/Map";
 import Text from "@/components/elements/Text/Text";
 import { FormSummaryProps } from "@/components/extensive/WizardForm/FormSummary";
 import WorkdayCollapseGrid from "@/components/extensive/WorkdayCollapseGrid/WorkdayCollapseGrid";
 import { GRID_VARIANT_NARROW } from "@/components/extensive/WorkdayCollapseGrid/WorkdayVariant";
+import { useGetV2SitesSiteBbox, useGetV2SitesSitePolygon } from "@/generated/apiComponents";
+import { SitePolygonsDataResponse } from "@/generated/apiSchemas";
+import { EntityName } from "@/types/common";
 
 import List from "../List/List";
 import { FieldType, FormStepSchema } from "./types";
 import { getAnswer, getFormattedAnswer } from "./utils";
 
-const Map = dynamic(() => import("@/components/elements/Map-mapbox/Map"), { ssr: false });
-
 export interface FormSummaryRowProps extends FormSummaryProps {
+  type?: EntityName;
   step: FormStepSchema;
   index: number;
   nullText?: string;
@@ -41,10 +45,21 @@ export interface FormEntry {
 
 export const useGetFormEntries = (props: GetFormEntriesProps) => {
   const t = useT();
-  return useMemo<any[]>(() => getFormEntries(props, t), [props, t]);
+  const { record } = useShowContext();
+  const siteGeojson = getSitePolygonData(record);
+  const bbox = getSiteBbox(record);
+  const mapFunctions = useMap();
+
+  return useMemo<any[]>(() => getFormEntries(props, t, siteGeojson, bbox, mapFunctions), [props, t, siteGeojson, bbox]);
 };
 
-export const getFormEntries = ({ step, values, nullText }: GetFormEntriesProps, t: typeof useT) => {
+export const getFormEntries = (
+  { step, values, nullText }: GetFormEntriesProps,
+  t: typeof useT,
+  siteGeojson?: any,
+  bbox?: any,
+  mapFunctions?: any
+) => {
   const outputArr: FormEntry[] = [];
 
   step.fields.forEach(f => {
@@ -83,7 +98,19 @@ export const getFormEntries = ({ step, values, nullText }: GetFormEntriesProps,
         outputArr.push({
           title: f.label,
           type: f.type,
-          value: <Map geojson={values[f.name]} className="h-[240px] flex-1" hasControls={false} />
+          value: siteGeojson ? (
+            <MapContainer
+              polygonsData={siteGeojson}
+              bbox={bbox}
+              className="h-[240px] flex-1"
+              hasControls={false}
+              showPopups
+              showLegend
+              mapFunctions={mapFunctions}
+            />
+          ) : (
+            <></>
+          )
         });
         break;
       }
@@ -170,6 +197,37 @@ export const getFormEntries = ({ step, values, nullText }: GetFormEntriesProps,
   return outputArr;
 };
 
+const getSitePolygonData = (record: any) => {
+  let result = null;
+  if (record) {
+    const { data: sitePolygonData } = useGetV2SitesSitePolygon({
+      pathParams: {
+        site: record.uuid
+      }
+    });
+    if (sitePolygonData) {
+      const polygonDataMap = ((sitePolygonData ?? []) as SitePolygonsDataResponse).reduce((acc: any, data: any) => {
+        if (!acc[data.status]) {
+          acc[data.status] = [];
+        }
+        acc[data.status].push(data.poly_id);
+        return acc;
+      }, {});
+      result = polygonDataMap;
+    }
+  }
+  return result;
+};
+
+const getSiteBbox = (record: any) => {
+  const { data: sitePolygonBbox } = useGetV2SitesSiteBbox({
+    pathParams: {
+      site: record.uuid
+    }
+  });
+  const siteBbox = sitePolygonBbox?.bbox;
+  return siteBbox;
+};
 const FormSummaryRow = ({ step, index, ...props }: FormSummaryRowProps) => {
   const t = useT();
   const entries = useGetFormEntries({ step, ...props });

From 4d7297eeea483a7749f38af3dcd0d28cbc9330f8 Mon Sep 17 00:00:00 2001
From: Dotty <dottykurmi123@gmail.com>
Date: Fri, 7 Jun 2024 08:48:04 -0400
Subject: [PATCH 02/17] fix deploy

---
 .../elements/CommentaryBox/CommentaryBox.tsx  | 143 +-----------------
 1 file changed, 5 insertions(+), 138 deletions(-)

diff --git a/src/components/elements/CommentaryBox/CommentaryBox.tsx b/src/components/elements/CommentaryBox/CommentaryBox.tsx
index 4527a4822..8385e66fe 100644
--- a/src/components/elements/CommentaryBox/CommentaryBox.tsx
+++ b/src/components/elements/CommentaryBox/CommentaryBox.tsx
@@ -1,115 +1,32 @@
 import { useT } from "@transifex/react";
-import { useState } from "react";
 import { When } from "react-if";
 
 import Button from "@/components/elements/Button/Button";
 import TextArea from "@/components/elements/Inputs/textArea/TextArea";
 import Text from "@/components/elements/Text/Text";
 import Icon, { IconNames } from "@/components/extensive/Icon/Icon";
-import { usePostV2AuditStatus } from "@/generated/apiComponents";
-
-import Notification from "../Notification/Notification";
 
 export interface CommentaryBoxProps {
   name: string;
   lastName: string;
   buttonSendOnBox?: boolean;
   mutate?: any;
-  refresh?: () => void;
+  refresh?: any;
   record?: any;
   entity?: string;
 }
 
 const CommentaryBox = (props: CommentaryBoxProps) => {
-  const { name, lastName, buttonSendOnBox, refresh, record, entity } = props;
-  const { mutate: sendCommentary } = usePostV2AuditStatus();
-  const [files, setFiles] = useState<File[]>([]);
-  const [comment, setComment] = useState<string>("");
-  const [error, setError] = useState<string>("");
-  const [charCount, setCharCount] = useState<number>(0);
-  const [showNotification, setShowNotification] = useState<boolean>(false);
-  const [loading, setLoading] = useState<boolean>(false);
-  const [warning, setWarning] = useState<string>("");
+  const { name, lastName, buttonSendOnBox } = props;
   const t = useT();
-  const validFileTypes = [
-    "application/pdf",
-    "application/vnd.ms-excel",
-    "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
-    "application/msword",
-    "application/vnd.openxmlformats-officedocument.wordprocessingml.document",
-    "image/jpeg",
-    "image/png",
-    "image/tiff"
-  ];
-  const maxFileSize = 10 * 1024 * 1024;
-  const maxFiles = 5;
-  const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    if (e.target.files) {
-      const file = e.target.files[0];
-      if (files.length >= maxFiles) {
-        setError("You can upload a maximum of 5 files.");
-        return;
-      }
-      if (!validFileTypes.includes(file?.type)) {
-        setError("Invalid file type. Only PDF, XLS, DOC, XLSX, DOCX, JPG, PNG, and TIFF are allowed.");
-        return;
-      }
-      if (file.size > maxFileSize) {
-        setError("File size must be less than 10MB.");
-        return;
-      }
-      setFiles(prevFiles => [...prevFiles, file]);
-      setError("");
-    }
-  };
-  const submitComment = () => {
-    const body = new FormData();
-    body.append("entity_uuid", record?.uuid);
-    body.append("status", record?.status);
-    body.append("entity", entity as string);
-    body.append("comment", comment);
-    body.append("type", "comment");
-    files.forEach((element: File, index: number) => {
-      body.append(`file[${index}]`, element);
-    });
-    setLoading(true);
-    sendCommentary?.(
-      {
-        //@ts-ignore swagger issue
-        body
-      },
-      {
-        onSuccess: () => {
-          setShowNotification(true);
-          setTimeout(() => {
-            setShowNotification(false);
-          }, 3000);
-          setComment("");
-          setError("");
-          setFiles([]);
-          refresh && refresh();
-          setLoading(false);
-        }
-      }
-    );
-  };
-  const handleCommentChange = (e: any) => {
-    setComment(e.target.value);
-    setCharCount(e.target.value.length);
-    if (charCount >= 255) {
-      setWarning("Your comment exceeds 255 characters.");
-    } else {
-      setWarning("");
-    }
-  };
 
   return (
     <div className="flex flex-col gap-4">
       <div className="flex items-center gap-2 rounded-3xl border border-grey-750 p-3">
         <div className="flex min-h-[32px] min-w-[32px] items-center justify-center self-start rounded-full bg-primary-500">
           <Text variant="text-14-semibold" className="uppercase text-white">
-            {name?.[0]}
-            {lastName?.[0]}
+            {name[0]}
+            {lastName[0]}
           </Text>
         </div>
         <TextArea
@@ -118,19 +35,12 @@ const CommentaryBox = (props: CommentaryBoxProps) => {
           className="max-h-72 !min-h-0 resize-none border-none !p-0 text-xs"
           containerClassName="w-full"
           rows={1}
-          onChange={e => handleCommentChange(e)}
-          value={comment}
         />
         <label htmlFor="input-files" className="cursor-pointer">
           <input
             type="file"
             id="input-files"
             className="absolute z-[-1] h-[0.1px] w-[0.1px] overflow-hidden opacity-0"
-            onChange={e => {
-              if (e.target.files) {
-                handleFileChange(e);
-              }
-            }}
           />
           <Icon name={IconNames.PAPER_CLIP} className="h-4 w-4" />
         </label>
@@ -138,56 +48,13 @@ const CommentaryBox = (props: CommentaryBoxProps) => {
           <Button variant="text" iconProps={{ name: IconNames.SEND, className: "h-4 w-4 text-darkCustom" }} />
         </When>
       </div>
-      <div className="flex flex-1 justify-between gap-4">
-        <div className="flex flex-wrap gap-2">
-          <When condition={files.length > 0}>
-            {...files.map((file: any) => (
-              <div
-                key={file.name}
-                className="flex items-baseline justify-between gap-2 rounded-xl bg-neutral-150 px-2 py-1"
-              >
-                <Text variant="text-12-light" className="text-nowrap text-darkCustom">
-                  {file?.name}
-                </Text>
-                <button
-                  className="bg-transparent p-0 text-darkCustom hover:text-red"
-                  onClick={() => {
-                    setFiles(files.filter((f: any) => f.name !== file.name));
-                  }}
-                >
-                  <Icon name={IconNames.CLEAR} className="h-2.5 w-2.5 lg:h-3 lg:w-3" />
-                </button>
-              </div>
-            ))}
-          </When>
-        </div>
-        <div className="display-grid">
-          {warning && charCount > 255 && <div className="text-right text-xs text-red">{warning}</div>}
-          <div className={`text-nowrap text-right text-xs ${charCount > 255 ? "text-red" : "text-grey-500"}`}>
-            {charCount}/255 {t("characters")}
-          </div>
-        </div>
-      </div>
-      {error && <div className="text-red">{error}</div>}
       <When condition={!buttonSendOnBox}>
-        <Button
-          className="self-end"
-          disabled={loading}
-          iconProps={{ name: IconNames.SEND, className: "h-4 w-4" }}
-          onClick={submitComment}
-        >
+        <Button className="self-end" iconProps={{ name: IconNames.SEND, className: "h-4 w-4" }}>
           <Text variant="text-12-bold" className="text-white">
             {t("SEND")}
           </Text>
-          {loading && <Icon name={IconNames.ELLIPSE_POLYGON} className={"h-6 w-6 animate-spin"} />}
         </Button>
       </When>
-      <Notification
-        title="Success!"
-        message="Your comment was just added!"
-        type="success"
-        open={showNotification}
-      ></Notification>
     </div>
   );
 };

From f7b7db4856b1d759120854e6b10eb0ab2a4c010f Mon Sep 17 00:00:00 2001
From: Dotty <dottykurmi123@gmail.com>
Date: Fri, 7 Jun 2024 08:49:55 -0400
Subject: [PATCH 03/17] fix deploy storybook

---
 src/components/elements/Inputs/Map/RHFMap.tsx | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/components/elements/Inputs/Map/RHFMap.tsx b/src/components/elements/Inputs/Map/RHFMap.tsx
index e3df35f05..b0f46f544 100644
--- a/src/components/elements/Inputs/Map/RHFMap.tsx
+++ b/src/components/elements/Inputs/Map/RHFMap.tsx
@@ -1,15 +1,17 @@
 import { useT } from "@transifex/react";
+import dynamic from "next/dynamic";
 import { PropsWithChildren, useEffect } from "react";
 import { useController, UseControllerProps, UseFormReturn } from "react-hook-form";
 
 import InputWrapper, { InputWrapperProps } from "@/components/elements/Inputs/InputElements/InputWrapper";
-import { MapContainer } from "@/components/elements/Map-mapbox/Map";
 import { AdditionalPolygonProperties } from "@/components/elements/Map-mapbox/MapLayers/ShapePropertiesModal";
 import { useGetV2ENTITYUUID } from "@/generated/apiComponents";
 import { singularEntityNameToPlural } from "@/helpers/entity";
 import { useDebounce } from "@/hooks/useDebounce";
 import { Entity, SingularEntityName } from "@/types/common";
 
+const Map = dynamic(() => import("@/components/elements/Map-mapbox/Map"), { ssr: false });
+
 export interface RHFMapProps extends UseControllerProps, InputWrapperProps {
   onChangeCapture?: () => void;
   formHook: UseFormReturn;
@@ -85,7 +87,7 @@ const RHFMap = ({
 
   return (
     <InputWrapper {...inputWrapperProps}>
-      <MapContainer
+      <Map
         geojson={value}
         onGeojsonChange={_onChange}
         editable

From 884822ad02577c67e2323c5d2b04370ea56a64f7 Mon Sep 17 00:00:00 2001
From: Dotty <dottykurmi123@gmail.com>
Date: Fri, 7 Jun 2024 09:09:53 -0400
Subject: [PATCH 04/17] update component

---
 src/components/elements/Map-mapbox/Map.tsx    | 326 ++++++------------
 .../Map-mapbox/MapControls/EditControl.tsx    | 216 +++++++++---
 .../MapControls/FeatureDetailCard.tsx         | 171 +++++++++
 .../Map-mapbox/MapControls/StyleControl.tsx   |  44 +--
 .../Map-mapbox/MapControls/ZoomControl.tsx    |  21 +-
 .../Map-mapbox/MapLayers/GeoJsonLayer.tsx     |  16 +-
 .../Map-mapbox/MapLayers/ImagesLayer.tsx      | 180 ++++++++++
 .../Map-mapbox/hooks/useOnHoverFeature.ts     |  38 ++
 8 files changed, 697 insertions(+), 315 deletions(-)
 create mode 100644 src/components/elements/Map-mapbox/MapControls/FeatureDetailCard.tsx
 create mode 100644 src/components/elements/Map-mapbox/MapLayers/ImagesLayer.tsx
 create mode 100644 src/components/elements/Map-mapbox/hooks/useOnHoverFeature.ts

diff --git a/src/components/elements/Map-mapbox/Map.tsx b/src/components/elements/Map-mapbox/Map.tsx
index 648fe1e0e..6a4b8170d 100644
--- a/src/components/elements/Map-mapbox/Map.tsx
+++ b/src/components/elements/Map-mapbox/Map.tsx
@@ -1,57 +1,39 @@
 import "mapbox-gl/dist/mapbox-gl.css";
 
-import _ from "lodash";
 //@ts-ignore
+import MapboxDraw from "@mapbox/mapbox-gl-draw";
 //@ts-ignore
-import mapboxgl from "mapbox-gl";
+import StaticMode from "@mapbox/mapbox-gl-draw-static-mode";
+import mapboxgl, { Map as IMap } from "mapbox-gl";
 //@ts-ignore
-import React, { useEffect } from "react";
-import { DetailedHTMLProps, HTMLAttributes, useState } from "react";
+import { CircleMode, DirectMode, DragCircleMode, SimpleSelectMode } from "mapbox-gl-draw-circle";
+import { DetailedHTMLProps, HTMLAttributes } from "react";
 import { When } from "react-if";
 import { twMerge } from "tailwind-merge";
 import { ValidationError } from "yup";
 
 import ControlGroup from "@/components/elements/Map-mapbox/components/ControlGroup";
-import { AdditionalPolygonProperties } from "@/components/elements/Map-mapbox/MapLayers/ShapePropertiesModal";
-import Icon, { IconNames } from "@/components/extensive/Icon/Icon";
-import { LAYERS_NAMES, layersList } from "@/constants/layers";
-import { useSitePolygonData } from "@/context/sitePolygon.provider";
-import { fetchGetV2TerrafundPolygonGeojsonUuid, fetchPutV2TerrafundPolygonUuid } from "@/generated/apiComponents";
-import { SitePolygonsDataResponse } from "@/generated/apiSchemas";
-
-import { AdminPopup } from "./components/AdminPopup";
-import { BBox } from "./GeoJSON";
-import type { TooltipType } from "./Map.d";
-import CheckPolygonControl from "./MapControls/CheckPolygonControl";
-import EditControl from "./MapControls/EditControl";
-import { FilterControl } from "./MapControls/FilterControl";
-import ImageControl from "./MapControls/ImageControl";
-import PolygonCheck from "./MapControls/PolygonCheck";
-import { StyleControl } from "./MapControls/StyleControl";
-import { MapStyle } from "./MapControls/types";
-import ViewImageCarousel from "./MapControls/ViewImageCarousel";
-import { ZoomControl } from "./MapControls/ZoomControl";
+import { EditControl } from "@/components/elements/Map-mapbox/MapControls/EditControl";
+import { FilterControl } from "@/components/elements/Map-mapbox/MapControls/FilterLayer";
+import { StyleControl } from "@/components/elements/Map-mapbox/MapControls/StyleControl";
+import { MapStyle } from "@/components/elements/Map-mapbox/MapControls/types";
+import { ZoomControl } from "@/components/elements/Map-mapbox/MapControls/ZoomControl";
+import { GeoJSONLayer } from "@/components/elements/Map-mapbox/MapLayers/GeoJsonLayer";
 import {
-  addFilterOnLayer,
-  addGeojsonToDraw,
-  addPopupsToMap,
-  addSourcesToLayers,
-  removePopups,
-  startDrawing,
-  stopDrawing,
-  zoomToBbox
-} from "./utils";
+  AdditionalPolygonProperties,
+  user_shapePropertiesValidationSchema
+} from "@/components/elements/Map-mapbox/MapLayers/ShapePropertiesModal";
+import mapStyles from "@/components/elements/Map-mapbox/mapStyle";
+import MapProvider from "@/context/map.provider";
+import { useDebounce } from "@/hooks/useDebounce";
+
+import { FeatureDetailCard } from "./MapControls/FeatureDetailCard";
+import { ImagesLayer } from "./MapLayers/ImagesLayer";
 
 mapboxgl.accessToken =
   process.env.NEXT_PUBLIC_MAPBOX_ACCESS_TOKEN ||
   "pk.eyJ1IjoiM3NpZGVkY3ViZSIsImEiOiJjam55amZrdjIwaWY3M3FueDAzZ3ZjeGR2In0.DhSsxs-8XhbTgoVmFcs94Q";
 
-interface LegendItem {
-  color: string;
-  text: string;
-  uuid: string;
-}
-
 interface MapProps extends Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "onError"> {
   geojson?: any;
   imageLayerGeojson?: any;
@@ -63,27 +45,9 @@ interface MapProps extends Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>
   additionalPolygonProperties?: AdditionalPolygonProperties;
   captureAdditionalPolygonProperties?: boolean;
   hasControls?: boolean;
-  siteData?: boolean;
-  status?: boolean;
-  editPolygon?: boolean;
-  polygonChecks?: boolean;
-  legend?: LegendItem[];
-  centroids?: any;
-  polygonsData?: Record<string, string[]>;
-  bbox?: BBox;
-  setPolygonFromMap?: React.Dispatch<React.SetStateAction<{ uuid: string; isOpen: boolean }>>;
-  polygonFromMap?: { uuid: string; isOpen: boolean };
-  record?: any;
-  isUserDrawing?: boolean;
-  setIsUserDrawing?: React.Dispatch<React.SetStateAction<boolean>>;
-  showPopups?: boolean;
-  showLegend?: boolean;
-  mapFunctions?: any;
-  tooltipType?: TooltipType;
-  sitePolygonData?: SitePolygonsDataResponse;
 }
 
-export const MapContainer = ({
+export const Map = ({
   onError: _onError,
   editable,
   geojson,
@@ -94,208 +58,114 @@ export const MapContainer = ({
   hasControls = true,
   additionalPolygonProperties,
   captureAdditionalPolygonProperties,
-  siteData = false,
-  status = false,
-  editPolygon = false,
-  polygonChecks = false,
-  record,
-  isUserDrawing = false,
-  setIsUserDrawing,
-  showPopups = false,
-  showLegend = false,
-  mapFunctions,
-  tooltipType = "view",
   ...props
 }: MapProps) => {
-  const [viewImages, setViewImages] = useState(false);
-  const [currentStyle, setCurrentStyle] = useState(MapStyle.Satellite);
-  const { polygonsData, bbox, setPolygonFromMap, polygonFromMap, sitePolygonData } = props;
-  const context = useSitePolygonData();
-  const { isUserDrawingEnabled } = isUserDrawing
-    ? { isUserDrawingEnabled: isUserDrawing }
-    : context || { isUserDrawingEnabled: false };
-  const { toggleUserDrawing, toggleAttribute, reloadSiteData } = context || {};
-  if (!mapFunctions) {
-    return null;
-  }
-  const { map, mapContainer, draw, onCancel, styleLoaded, initMap, setStyleLoaded, setChangeStyle, changeStyle } =
-    mapFunctions;
+  const onError = useDebounce((hasError, errors) => _onError?.(hasError, errors), 250);
 
-  useEffect(() => {
-    initMap();
-  });
+  const validateGeoJSON = function (map: IMap, source: string) {
+    if (!editable) return;
 
-  useEffect(() => {
-    if (isUserDrawing) {
-      toggleUserDrawing?.(isUserDrawing);
-      toggleAttribute?.(true);
-    }
-  }, [isUserDrawing]);
+    const errors: { [index: string | number]: ValidationError | undefined } = {};
+    const features = map.querySourceFeatures(source);
 
-  useEffect(() => {
-    if (map?.current && draw?.current) {
-      if (isUserDrawingEnabled) {
-        startDrawing(draw.current, map.current);
-      } else {
-        stopDrawing(draw.current, map.current);
+    for (const feature of features) {
+      if (typeof feature.id === "undefined" || feature.id === null || feature.properties?.meta !== "feature") return;
+
+      try {
+        user_shapePropertiesValidationSchema.validateSync(feature.properties);
+        errors[feature.id!] = undefined;
+        map.setFeatureState({ id: feature.id, source }, { error: false });
+      } catch (error) {
+        map.setFeatureState({ id: feature.id, source }, { error: true });
+        errors[feature.id!] = error as ValidationError;
       }
     }
-  }, [isUserDrawingEnabled]);
 
-  useEffect(() => {
-    if (map?.current && styleLoaded && showPopups) {
-      const currentMap = map.current;
+    onError(Object.values(errors).filter(error => !!error).length > 0, errors);
+  };
 
-      map.current.on("load", () => {
-        addPopupsToMap(currentMap, AdminPopup, setPolygonFromMap, sitePolygonData, tooltipType);
-      });
-    }
-  }, [styleLoaded, sitePolygonData]);
+  const onLoadMap = (map: IMap, draw?: MapboxDraw) => {
+    map.on("draw.selectionchange", function (e) {
+      const isSelected = e.features.length > 0;
 
-  useEffect(() => {
-    if (map?.current && styleLoaded && !_.isEmpty(polygonsData)) {
-      const currentMap = map.current as mapboxgl.Map;
-      addSourcesToLayers(currentMap, polygonsData);
-      setChangeStyle(true);
-    }
-  }, [sitePolygonData, styleLoaded, polygonsData]);
+      if (isSelected && draw?.getMode() === "simple_select") {
+        draw.changeMode(draw.modes.DIRECT_SELECT, { featureId: e.features[0].id });
+      }
+    });
 
-  useEffect(() => {
-    if (currentStyle) {
-      setChangeStyle(false);
-    }
-  }, [currentStyle]);
+    map.on("draw.upload", function () {
+      onGeojsonChange?.(draw?.getAll());
+    });
 
-  useEffect(() => {
-    if (!changeStyle) {
-      setStyleLoaded(false);
-    }
-  }, [changeStyle]);
+    map.on("draw.clear", function () {
+      onGeojsonChange?.(null);
+    });
 
-  useEffect(() => {
-    if (bbox && map.current && map) {
-      zoomToBbox(bbox, map.current, hasControls);
-    }
-  }, [bbox]);
+    map.on("draw.create", function () {
+      onGeojsonChange?.(draw?.getAll());
+    });
 
-  function handleAddGeojsonToDraw(polygonuuid: string) {
-    if (polygonsData && map.current && draw.current) {
-      const currentMap = map.current;
-      const newPolygonData = JSON.parse(JSON.stringify(polygonsData));
-      const statuses = ["submitted", "approved", "need-more-info"];
-      statuses.forEach(status => {
-        if (newPolygonData[status]) {
-          newPolygonData[status] = newPolygonData[status].filter((feature: string) => feature !== polygonuuid);
-        }
-      });
-      addFilterOnLayer(
-        layersList.find(layer => layer.name === LAYERS_NAMES.POLYGON_GEOMETRY),
-        "uuid",
-        newPolygonData,
-        currentMap
-      );
-    }
-  }
+    map.on("draw.update", function () {
+      onGeojsonChange?.(draw?.getAll());
+    });
 
-  const handleEditPolygon = async () => {
-    removePopups();
-    if (polygonFromMap?.isOpen && polygonFromMap?.uuid !== "") {
-      const polygonuuid = polygonFromMap.uuid;
-      const polygonGeojson = await fetchGetV2TerrafundPolygonGeojsonUuid({
-        pathParams: { uuid: polygonuuid }
+    if (captureAdditionalPolygonProperties) {
+      map.on("data", function () {
+        validateGeoJSON(map, MapboxDraw.constants.sources.COLD);
       });
-      if (map.current && draw.current && polygonGeojson) {
-        addGeojsonToDraw(polygonGeojson.geojson, polygonuuid, () => handleAddGeojsonToDraw(polygonuuid), draw.current);
-      }
     }
   };
 
-  const onSaveEdit = async () => {
-    if (map.current && draw.current) {
-      const geojson = draw.current.getAll();
-      if (geojson) {
-        if (polygonFromMap?.uuid) {
-          const feature = geojson.features[0];
-          const response = await fetchPutV2TerrafundPolygonUuid({
-            body: { geometry: JSON.stringify(feature) },
-            pathParams: { uuid: polygonFromMap?.uuid }
-          });
-          reloadSiteData?.();
-          if (response.message == "Geometry updated successfully.") {
-            onCancel(polygonsData);
-            addSourcesToLayers(map.current, polygonsData);
-          }
-        }
-      }
-    }
-  };
-
-  const onCancelEdit = () => {
-    onCancel(polygonsData);
-  };
-
   return (
-    <div ref={mapContainer} className={twMerge("h-[500px] wide:h-[700px]", className)} id="mapContainer">
+    <MapProvider
+      {...props}
+      initialState={{ geoJson: geojson }}
+      mapOptions={{
+        style: MapStyle.Satellite,
+        zoom: 1
+      }}
+      drawOptions={{
+        displayControlsDefault: false,
+        userProperties: true,
+        defaultMode: editable ? "simple_select" : "static",
+        modes: {
+          ...MapboxDraw.modes,
+          static: StaticMode,
+          draw_circle: CircleMode,
+          drag_circle: DragCircleMode,
+          direct_select: DirectMode,
+          simple_select: SimpleSelectMode
+        },
+        styles: mapStyles
+      }}
+      onLoadMap={onLoadMap}
+      className={twMerge("h-[500px]", className)}
+    >
+      <GeoJSONLayer geojson={geojson} />
       <When condition={hasControls}>
-        <When condition={polygonFromMap?.isOpen}>
-          <ControlGroup position="top-center">
-            <EditControl onClick={handleEditPolygon} onSave={onSaveEdit} onCancel={onCancelEdit} />
-          </ControlGroup>
-        </When>
         <ControlGroup position="top-right">
-          <StyleControl map={map.current} currentStyle={currentStyle} setCurrentStyle={setCurrentStyle} />
+          <StyleControl />
         </ControlGroup>
         <ControlGroup position="top-right" className="top-21">
-          <ZoomControl map={map.current} />
+          <ZoomControl />
+          <When condition={editable}>
+            <EditControl />
+          </When>
         </ControlGroup>
-        <When condition={!!status && !!record.uuid}>
-          <ControlGroup position="top-left">
-            <CheckPolygonControl siteRecord={record} />
-          </ControlGroup>
-        </When>
-        <When condition={!!viewImages}>
-          <ControlGroup position={siteData ? "bottom-left-site" : "bottom-left"}>
-            <ImageControl viewImages={viewImages} setViewImages={setViewImages} />
+        <When condition={!editable}>
+          <ControlGroup position="bottom-left">
+            <FilterControl />
           </ControlGroup>
+          <ImagesLayer source="images" data={imageLayerGeojson} onDeleteImage={onDeleteImage} />
         </When>
-        <When condition={editPolygon}>
-          <ControlGroup position="top-right" className="top-64">
-            <button type="button" className="rounded-lg bg-white p-2.5 text-primary hover:text-primary ">
-              <Icon name={IconNames.EDIT} className="h-5 w-5 lg:h-6 lg:w-6" />
-            </button>
-          </ControlGroup>
-        </When>
-        <When condition={!editable && !viewImages}>
-          <ControlGroup position={siteData ? "bottom-left-site" : "bottom-left"}></ControlGroup>
-        </When>
-        <ControlGroup position="top-right" className="top-48">
-          <button
-            type="button"
-            className="rounded-lg bg-white p-2.5 text-darkCustom-100 hover:bg-neutral-200 "
-            onClick={() => bbox && map.current && zoomToBbox(bbox, map.current, hasControls)}
-          >
-            <Icon name={IconNames.IC_EARTH_MAP} className="h-5 w-5 lg:h-6 lg:w-6" />
-          </button>
-        </ControlGroup>
-        <ControlGroup position="bottom-right" className="bottom-8">
-          <ViewImageCarousel viewImages={viewImages} setViewImages={setViewImages} />
-        </ControlGroup>
-      </When>
-      <When condition={showLegend}>
-        <ControlGroup position={siteData ? "bottom-left-site" : "bottom-left"}>
-          <FilterControl />
-        </ControlGroup>
       </When>
       <When condition={captureAdditionalPolygonProperties}>
-        <ControlGroup position="bottom-right"></ControlGroup>
-      </When>
-      <When condition={polygonChecks}>
-        <ControlGroup position="bottom-left" className="bottom-13">
-          <PolygonCheck />
+        <ControlGroup position="bottom-right">
+          <FeatureDetailCard editable={editable} additionalPolygonProperties={additionalPolygonProperties} />
         </ControlGroup>
       </When>
-    </div>
+    </MapProvider>
   );
 };
 
-export default MapContainer;
+export default Map;
diff --git a/src/components/elements/Map-mapbox/MapControls/EditControl.tsx b/src/components/elements/Map-mapbox/MapControls/EditControl.tsx
index db1e27601..5bccb2988 100644
--- a/src/components/elements/Map-mapbox/MapControls/EditControl.tsx
+++ b/src/components/elements/Map-mapbox/MapControls/EditControl.tsx
@@ -1,53 +1,181 @@
-import React, { useEffect } from "react";
+import { useT } from "@transifex/react";
+import bbox from "@turf/bbox";
+import classNames from "classnames";
+import mapboxgl, { LngLatBoundsLike } from "mapbox-gl";
+import { useEffect, useRef, useState } from "react";
 
-import Button from "../../Button/Button";
-import Text from "../../Text/Text";
+import IconButton from "@/components/elements/IconButton/IconButton";
+import ControlButtonsGroup from "@/components/elements/Map-mapbox/components/ControlButtonsGroup";
+import ControlDivider from "@/components/elements/Map-mapbox/components/ControlDivider";
+import { useConvertShapeFileToGeoJson } from "@/components/elements/Map-mapbox/hooks/useConvertShapefileToGeoJson";
+import { IconNames } from "@/components/extensive/Icon/Icon";
+import Modal from "@/components/extensive/Modal/Modal";
+import { useMapContext } from "@/context/map.provider";
+import { useModalContext } from "@/context/modal.provider";
+import { ToastType, useToastContext } from "@/context/toast.provider";
+import { useFilePicker } from "@/hooks/useFilePicker";
+import { FileType } from "@/types/common";
+
+export const EditControl = () => {
+  const { draw, map } = useMapContext();
+  const { openModal, closeModal } = useModalContext();
+  const t = useT();
+  const clicked = useRef(1);
+  const [mode, setMode] = useState<string>();
+  const { openToast } = useToastContext();
+
+  const { mutate: convertShapeFile } = useConvertShapeFileToGeoJson({
+    async onSuccess(data) {
+      const geoJson = await data.json();
+      draw?.add(geoJson);
+      map?.fitBounds(bbox(draw?.getAll()) as LngLatBoundsLike, { padding: 50, animate: false });
+      map?.fire("draw.upload");
+    },
+    onError() {
+      openToast(t("File is not supported!"), ToastType.ERROR);
+    }
+  });
+
+  const { open: openFilePicker } = useFilePicker(
+    files => {
+      for (const file of Array.from(files)) {
+        convertShapeFile({ file });
+      }
+    },
+    { accept: [FileType.ShapeFiles], multiple: true }
+  );
 
-const EditControl = ({ onClick, onSave, onCancel }: { onClick?: any; onSave?: any; onCancel?: any }) => {
-  const [isEditing, setIsEditing] = React.useState(false);
   useEffect(() => {
+    if (!map || !draw) return;
+
+    const mouseTooltip = new mapboxgl.Popup({
+      closeOnClick: false,
+      className: "mouse-tooltip",
+      closeButton: false,
+      anchor: "left",
+      offset: 10
+    });
+    mouseTooltip.trackPointer();
+
+    const onModeChangeListener = () => {
+      setMode(draw.getMode());
+      const TooltipMapping: any = {
+        draw_polygon: t("Click to start drawing"),
+        draw_circle: t("Click to add a circle"),
+        drag_circle: t("Click, hold and drag to draw a circle"),
+        draw_point: t("Click to add a point")
+      };
+
+      const tooltip = TooltipMapping[draw.getMode()];
+
+      if (tooltip) {
+        mouseTooltip.setHTML(tooltip);
+        mouseTooltip.addTo(map);
+        map.getCanvas().style.cursor = "crosshair";
+      } else {
+        mouseTooltip.remove();
+        clicked.current = 1;
+        map.getCanvas().style.cursor = "default";
+      }
+    };
+
+    const onRenderListener = () => {
+      if (draw.getMode() === "draw_polygon") {
+        if (clicked.current > 2) {
+          mouseTooltip.setHTML(t("Click first point to close this shape"));
+        } else if (clicked.current >= 1) {
+          mouseTooltip.setHTML(t("Click to continue drawing shape"));
+        }
+      }
+
+      clicked.current++;
+    };
+
+    map.on("draw.actionable", onModeChangeListener);
+    map.on("click", onRenderListener);
+
     return () => {
-      onCancel();
+      map.off("draw.actionable", onModeChangeListener);
+      map.off("click", onRenderListener);
     };
-  }, []);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [map, draw]);
+
+  const handleClearMap = () => {
+    openModal(
+      <Modal
+        iconProps={{ name: IconNames.EXCLAMATION_CIRCLE, width: 60, height: 60 }}
+        title={t("Confirm Map Clear")}
+        content={t("Are you sure you want to clear all shapes on the map, this action is irreversible.")}
+        primaryButtonProps={{
+          children: t("Clear"),
+          onClick: () => {
+            draw?.deleteAll();
+            map?.fire("draw.clear");
+            closeModal();
+          }
+        }}
+        secondaryButtonProps={{
+          children: t("Cancel"),
+          onClick: closeModal
+        }}
+      />
+    );
+  };
+
+  if (!draw) return null;
+
   return (
-    <div className="flex w-[160px] flex-col items-center gap-1">
-      <Button
-        id="buttonEditPolygon"
-        variant="white"
-        className="w-full py-2"
-        onClick={() => {
-          setIsEditing(true);
-          onClick();
+    <ControlButtonsGroup direction="col">
+      <IconButton
+        iconProps={{
+          name: IconNames.DrawPoint,
+          width: 16
+        }}
+        onClick={() => draw?.changeMode("draw_point")}
+        className={classNames("h-8 w-8 rounded-t-lg rounded-b-none", mode === "draw_point" && "bg-neutral-200")}
+        aria-label={t("Draw Point")}
+      />
+      <ControlDivider direction="horizontal" />
+      <IconButton
+        iconProps={{
+          name: IconNames.DrawPolygon,
+          width: 16
+        }}
+        onClick={() => draw?.changeMode("draw_polygon")}
+        className={classNames("h-8 w-8 rounded-none", mode === "draw_polygon" && "bg-neutral-200")}
+        aria-label={t("Draw Polygon")}
+      />
+      <ControlDivider direction="horizontal" />
+      <IconButton
+        iconProps={{
+          name: IconNames.DragCircle,
+          width: 16
         }}
-      >
-        <Text variant="text-12-bold" className="leading-[normal] text-black">
-          Edit Polygon
-        </Text>
-      </Button>
-      {isEditing && (
-        <div className="flex w-full items-center gap-1">
-          <Button onClick={onSave} className="w-full">
-            <Text variant="text-12-bold" className="leading-[normal]">
-              Save
-            </Text>
-          </Button>
-          <Button
-            variant="sky-page-admin"
-            className="w-full"
-            onClick={() => {
-              setIsEditing(false);
-              onCancel();
-            }}
-          >
-            <Text variant="text-12-bold" className="leading-[normal]">
-              Cancel
-            </Text>
-          </Button>
-        </div>
-      )}
-    </div>
+        onClick={() => draw?.changeMode("drag_circle")}
+        className={classNames("h-8 w-8 rounded-none", mode === "drag_circle" && "bg-neutral-200")}
+        aria-label={t("Drag Circle")}
+      />
+      <ControlDivider direction="horizontal" />
+      <IconButton
+        iconProps={{
+          name: IconNames.TRASH,
+          width: 16
+        }}
+        onClick={handleClearMap}
+        className={classNames("h-8 w-8 rounded-none", mode === "drag_circle" && "bg-neutral-200")}
+        aria-label={t("Clear Map")}
+      />
+      <ControlDivider direction="horizontal" />
+      <IconButton
+        iconProps={{
+          name: IconNames.UPLOAD,
+          width: 16
+        }}
+        onClick={openFilePicker}
+        className={classNames("h-8 w-8 rounded-b-lg rounded-t-none", mode === "drag_circle" && "bg-neutral-200")}
+        aria-label={t("Upload Shape File")}
+      />
+    </ControlButtonsGroup>
   );
 };
-
-export default EditControl;
diff --git a/src/components/elements/Map-mapbox/MapControls/FeatureDetailCard.tsx b/src/components/elements/Map-mapbox/MapControls/FeatureDetailCard.tsx
new file mode 100644
index 000000000..7e89eb397
--- /dev/null
+++ b/src/components/elements/Map-mapbox/MapControls/FeatureDetailCard.tsx
@@ -0,0 +1,171 @@
+import { useT } from "@transifex/react";
+import { filter } from "lodash";
+import { MapboxGeoJSONFeature } from "mapbox-gl";
+import { useEffect } from "react";
+import { When } from "react-if";
+
+import IconButton from "@/components/elements/IconButton/IconButton";
+import { useSelectFeature } from "@/components/elements/Map-mapbox/hooks/useSelectFeature";
+import {
+  AdditionalPolygonProperties,
+  ShapePropertiesModal
+} from "@/components/elements/Map-mapbox/MapLayers/ShapePropertiesModal";
+import { getFeatureProperties } from "@/components/elements/Map-mapbox/utils";
+import Text from "@/components/elements/Text/Text";
+import { IconNames } from "@/components/extensive/Icon/Icon";
+import { getCountriesOptions } from "@/constants/options/countries";
+import { getDistributionOptions } from "@/constants/options/distribution";
+import { getLandUseTypeOptions } from "@/constants/options/landUseType";
+import { getRestorationStrategyOptions } from "@/constants/options/restorationStrategy";
+import { useMapContext } from "@/context/map.provider";
+import { useModalContext } from "@/context/modal.provider";
+import { formatOptionsList, getOptionTitle } from "@/utils/options";
+
+import { useOnHoverFeature } from "../hooks/useOnHoverFeature";
+
+interface FeatureDetailCardProps {
+  editable?: boolean;
+  additionalPolygonProperties?: AdditionalPolygonProperties;
+}
+
+export const FeatureDetailCard = ({ editable, additionalPolygonProperties }: FeatureDetailCardProps) => {
+  const t = useT();
+
+  const { map, draw } = useMapContext();
+  const [selectedFeature, setSelectedFeature] = useSelectFeature(map);
+  const { openModal, closeModal } = useModalContext();
+  useOnHoverFeature();
+
+  const onEditFeature = (feature: MapboxGeoJSONFeature) => {
+    openModal(
+      <ShapePropertiesModal
+        draw={draw}
+        onSubmit={onSubmitPropertiesForm}
+        feature={feature}
+        additionalPolygonProperties={additionalPolygonProperties}
+      />
+    );
+  };
+
+  const onDeleteFeature = () => {
+    draw?.delete(selectedFeature?.properties?.id);
+    setSelectedFeature(undefined);
+  };
+
+  const onSubmitPropertiesForm = (additionalProperties: any, feature: MapboxGeoJSONFeature) => {
+    Object.entries(additionalProperties).forEach(([key, val]) => {
+      const value = Array.isArray(val) ? val.join(",") : val;
+      draw?.setFeatureProperty(feature?.properties?.id || feature.id, key, value);
+      feature.properties = { ...feature.properties, [key]: value };
+    });
+    setSelectedFeature(feature);
+    closeModal();
+
+    map?.fire("draw.update", { feature });
+  };
+
+  useEffect(() => {
+    if (!map) return;
+    const onCreateListener = function (e: any) {
+      const feature = e.features[0];
+      onEditFeature(feature);
+    };
+    map.on("draw.create", onCreateListener);
+
+    return () => {
+      map.off("draw.create", onCreateListener);
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [map, additionalPolygonProperties]);
+
+  //@ts-ignore
+  if (!selectedFeature || selectedFeature.properties?.mode?.includes("draw_")) return null;
+
+  const title = getFeatureProperties<string>(selectedFeature.properties, "Poly_ID") || t("Shape");
+  const countryCode = getFeatureProperties<string>(selectedFeature.properties, "Country");
+
+  const isPpc = additionalPolygonProperties?.Framework === "ppc";
+  const projectId =
+    (isPpc ? additionalPolygonProperties?.Project_ID : null) ??
+    getFeatureProperties<string>(selectedFeature.properties, "Project_ID");
+  const projectUuid = additionalPolygonProperties?.Project_UUID;
+  const siteId =
+    (isPpc ? additionalPolygonProperties?.Site_ID : null) ??
+    getFeatureProperties<string>(selectedFeature.properties, "Site_ID");
+  const siteUuid = additionalPolygonProperties?.Site_UUID;
+
+  const properties = filter([
+    { title: t("Polygon ID"), value: title },
+    { title: t("Org Name"), value: getFeatureProperties<string>(selectedFeature.properties, "Org_Name") },
+    { title: t("Project ID"), value: projectId },
+    isPpc && projectUuid != null ? { title: t("Project UUID"), value: projectUuid } : null,
+    { title: t("Project Name"), value: getFeatureProperties<string>(selectedFeature.properties, "Project_Name") },
+    { title: t("Site ID"), value: siteId },
+    isPpc && siteUuid != null ? { title: t("Site UUID"), value: siteUuid } : null,
+    { title: t("Site Name"), value: getFeatureProperties<string>(selectedFeature.properties, "Site_Name") },
+    {
+      title: t("Country"),
+      value: countryCode ? getOptionTitle(countryCode, getCountriesOptions()) : undefined
+    },
+    {
+      title: t("Planting Start Date"),
+      value: getFeatureProperties<string>(selectedFeature.properties, "Plant_Date")
+    },
+    {
+      title: t("Restoration Practice"),
+      value: formatOptionsList(
+        getRestorationStrategyOptions(),
+        getFeatureProperties<string>(selectedFeature.properties, "Practice")?.split(",")
+      )
+    },
+    {
+      title: t("Target land use system"),
+      value: formatOptionsList(
+        getLandUseTypeOptions(),
+        getFeatureProperties<string>(selectedFeature.properties, "Target_Sys")?.split(",")
+      )
+    },
+    {
+      title: t("Tree distribution"),
+      value: formatOptionsList(
+        getDistributionOptions(),
+        getFeatureProperties<string>(selectedFeature.properties, "Distr")?.split(",")
+      )
+    }
+  ]) as { title: string; value: any }[];
+
+  return (
+    <>
+      <div className="w-80 rounded-lg bg-white">
+        <div className="flex h-9 items-center rounded-t-lg bg-primary-200 px-3 py-2">
+          <Text variant="text-heading-200">{title}</Text>
+        </div>
+        <div className="p-3">
+          <div className="mb-1">
+            {properties.filter(v => !!v.value).length === 0 && (
+              <Text variant="text-light-caption-200">{t("No data is attached to this polygon")}</Text>
+            )}
+            {properties.map(prop => (
+              <Text key={prop.title} variant="text-light-caption-200">
+                <strong>{prop.title}: </strong>
+                {prop.value || "N/A"}
+              </Text>
+            ))}
+          </div>
+          <When condition={editable}>
+            <div className="flex items-start gap-3">
+              <IconButton
+                iconProps={{ name: IconNames.EDIT_CIRCLE, width: 32, className: "fill-primary" }}
+                onClick={() => onEditFeature(selectedFeature)}
+              />
+              <IconButton
+                iconProps={{ name: IconNames.TRASH_CIRCLE, width: 32, className: "fill-error" }}
+                onClick={onDeleteFeature}
+              />
+            </div>
+          </When>
+        </div>
+      </div>
+    </>
+  );
+};
diff --git a/src/components/elements/Map-mapbox/MapControls/StyleControl.tsx b/src/components/elements/Map-mapbox/MapControls/StyleControl.tsx
index faef3a6cd..fba25aee7 100644
--- a/src/components/elements/Map-mapbox/MapControls/StyleControl.tsx
+++ b/src/components/elements/Map-mapbox/MapControls/StyleControl.tsx
@@ -1,47 +1,41 @@
 import { useT } from "@transifex/react";
 import classNames from "classnames";
-import mapboxgl from "mapbox-gl";
+import { useState } from "react";
 
 import ControlButtonsGroup from "@/components/elements/Map-mapbox/components/ControlButtonsGroup";
 import ControlDivider from "@/components/elements/Map-mapbox/components/ControlDivider";
 import { MapStyle } from "@/components/elements/Map-mapbox/MapControls/types";
+import { useMapContext } from "@/context/map.provider";
 
-export const StyleControl = ({
-  map,
-  currentStyle,
-  setCurrentStyle
-}: {
-  map: mapboxgl.Map | null;
-  currentStyle: MapStyle;
-  setCurrentStyle: (style: MapStyle) => void;
-}) => {
+export const StyleControl = () => {
   const t = useT();
-
-  const setMapStyle = (style: MapStyle) => {
-    if (map && currentStyle !== style) {
-      map.setStyle(style);
-      setCurrentStyle(style);
-    }
-  };
+  const { map } = useMapContext();
+  const [currentStyle, setCurrentStyle] = useState(MapStyle.Satellite);
 
   return (
-    <ControlButtonsGroup direction="row" className="h-auto">
+    <ControlButtonsGroup direction="row">
       <button
-        onClick={() => setMapStyle(MapStyle.Street)}
+        onClick={() => {
+          map?.setStyle(MapStyle.Street);
+          setCurrentStyle(MapStyle.Street);
+        }}
         className={classNames(
-          "h-fit w-21 rounded-l-lg py-2",
-          currentStyle === MapStyle.Street ? "text-body-500" : "text-body-400"
+          "w-16 rounded-l-lg px-1",
+          currentStyle === MapStyle.Street ? "text-body-500 underline" : "text-body-400"
         )}
         aria-label="Map street style"
       >
         {t("Map")}
       </button>
-      <ControlDivider direction="vertical" className="m-0 h-auto bg-neutral-200" />
+      <ControlDivider direction="vertical" />
       <button
-        onClick={() => setMapStyle(MapStyle.Satellite)}
+        onClick={() => {
+          map?.setStyle(MapStyle.Satellite);
+          setCurrentStyle(MapStyle.Satellite);
+        }}
         className={classNames(
-          "h-fit w-21 rounded-r-lg py-2",
-          currentStyle === MapStyle.Satellite ? "text-body-500" : "text-body-400"
+          "w-16 rounded-r-lg px-1",
+          currentStyle === MapStyle.Satellite ? "text-body-500 underline" : "text-body-400"
         )}
         aria-label="Map satellite style"
       >
diff --git a/src/components/elements/Map-mapbox/MapControls/ZoomControl.tsx b/src/components/elements/Map-mapbox/MapControls/ZoomControl.tsx
index f87361c99..9329a9785 100644
--- a/src/components/elements/Map-mapbox/MapControls/ZoomControl.tsx
+++ b/src/components/elements/Map-mapbox/MapControls/ZoomControl.tsx
@@ -1,32 +1,31 @@
-import mapboxgl from "mapbox-gl";
-
 import IconButton from "@/components/elements/IconButton/IconButton";
 import ControlButtonsGroup from "@/components/elements/Map-mapbox/components/ControlButtonsGroup";
 import ControlDivider from "@/components/elements/Map-mapbox/components/ControlDivider";
 import { IconNames } from "@/components/extensive/Icon/Icon";
+import { useMapContext } from "@/context/map.provider";
+
+export const ZoomControl = () => {
+  const { map } = useMapContext();
 
-export const ZoomControl = ({ map }: { map: mapboxgl.Map | null }) => {
   return (
-    <ControlButtonsGroup direction="col" className="z-10 w-auto">
+    <ControlButtonsGroup direction="col">
       <IconButton
         iconProps={{
           name: IconNames.ZoomIn,
-          width: 24,
-          height: 24
+          width: 16
         }}
         onClick={() => map?.zoomIn()}
-        className="rounded-b-none rounded-t-lg p-[10px]"
+        className="h-8 w-8 rounded-t-lg rounded-b-none"
         aria-label="Zoom in"
       />
-      <ControlDivider direction="horizontal" className="m-0 w-auto bg-neutral-200" />
+      <ControlDivider direction="horizontal" />
       <IconButton
         iconProps={{
           name: IconNames.ZoomOut,
-          width: 24,
-          height: 24
+          width: 16
         }}
         onClick={() => map?.zoomOut()}
-        className="rounded-t-none rounded-b-lg p-[10px]"
+        className="h-8 w-8 rounded-t-none rounded-b-lg"
         aria-label="Zoom out"
       />
     </ControlButtonsGroup>
diff --git a/src/components/elements/Map-mapbox/MapLayers/GeoJsonLayer.tsx b/src/components/elements/Map-mapbox/MapLayers/GeoJsonLayer.tsx
index 037438a85..c6f5872d9 100644
--- a/src/components/elements/Map-mapbox/MapLayers/GeoJsonLayer.tsx
+++ b/src/components/elements/Map-mapbox/MapLayers/GeoJsonLayer.tsx
@@ -2,21 +2,23 @@ import bbox from "@turf/bbox";
 import { LngLatBoundsLike } from "mapbox-gl";
 import { useEffect } from "react";
 
-// interface GeoJSONLayerProps {
-//   geojson: any;
-// }
+import { useMapContext } from "@/context/map.provider";
 
-export const GeoJSONLayer = ({ mapRef, geojson }: { mapRef: any; geojson: any }) => {
-  const map = mapRef.current?.map;
-  const draw = mapRef.current?.draw;
+interface GeoJSONLayerProps {
+  geojson: any;
+}
+
+export const GeoJSONLayer = ({ geojson }: GeoJSONLayerProps) => {
+  const { map, draw } = useMapContext();
 
   useEffect(() => {
     try {
       if (!map || !draw || !geojson) return;
+
       draw?.set(geojson);
       map.fitBounds(bbox(geojson) as LngLatBoundsLike, { padding: 50, animate: false });
     } catch (e) {
-      console.error("invalid geoJSON", e);
+      console.log("invalid geoJSON", e);
     }
   }, [draw, geojson, map]);
 
diff --git a/src/components/elements/Map-mapbox/MapLayers/ImagesLayer.tsx b/src/components/elements/Map-mapbox/MapLayers/ImagesLayer.tsx
new file mode 100644
index 000000000..3d9f7626d
--- /dev/null
+++ b/src/components/elements/Map-mapbox/MapLayers/ImagesLayer.tsx
@@ -0,0 +1,180 @@
+import { Canvg } from "canvg";
+import { EventData, GeoJSONSourceRaw, Map, MapboxEvent, MapMouseEvent } from "mapbox-gl";
+import { useEffect } from "react";
+
+import ImageGalleryPreviewer from "@/components/elements/ImageGallery/ImageGalleryPreviewer";
+import { useMapContext } from "@/context/map.provider";
+import { useModalContext } from "@/context/modal.provider";
+import { toDataURL } from "@/utils/image";
+
+interface ImagesLayerProps extends Omit<GeoJSONSourceRaw, "cluster" | "type"> {
+  source: string;
+  onDeleteImage?: (uuid: string) => void;
+}
+
+export const ImagesLayer = ({ source, data, onDeleteImage }: ImagesLayerProps) => {
+  const { map } = useMapContext();
+  const { openModal } = useModalContext();
+
+  useEffect(() => {
+    if (!map) return;
+
+    const onRenderListener = async () => {
+      const allFeatures = map.queryRenderedFeatures();
+      //@ts-ignore
+      for (const feature of allFeatures.filter(f => !!f.properties.id && !!f.properties.thumb_url)) {
+        const props: any = feature.properties;
+        await loadImage(map, props.id, markerSVG(await toDataURL(props.thumb_url)));
+      }
+    };
+    map.on("render", onRenderListener);
+
+    const onClickListener = async (e: MapMouseEvent) => {
+      const map = e.target;
+      const features = map?.queryRenderedFeatures(e.point);
+      const properties = features?.[0]?.properties;
+
+      if (properties?.image_url) {
+        openModal(
+          <ImageGalleryPreviewer
+            data={{
+              uuid: properties.uuid,
+              fullImageUrl: properties?.image_url
+            }}
+            onDelete={onDeleteImage}
+          />
+        );
+      }
+    };
+    map.on("click", onClickListener);
+
+    return () => {
+      map.off("render", onRenderListener);
+      map.off("click", onClickListener);
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [map]);
+
+  useEffect(() => {
+    if (!map) return;
+    const onLoadListener = (e: MapboxEvent & EventData) => {
+      const map = e.target;
+
+      // Add a new source from our GeoJSON data and
+      // set the 'cluster' option to true. GL-JS will
+      // add the point_count property to your source data.
+      map.addSource(source, {
+        type: "geojson",
+        // Point to GeoJSON data. This example visualizes all M1.0+ earthquakes
+        // from 12/22/15 to 1/21/16 as logged by USGS' Earthquake hazards program.
+        data,
+        cluster: true,
+        clusterMaxZoom: 14, // Max zoom to cluster points on
+        clusterRadius: 50 // Radius of each cluster when clustering points (defaults to 50)
+      });
+
+      map.addLayer({
+        id: "clusters",
+        type: "circle",
+        source,
+        filter: ["has", "point_count"],
+        paint: {
+          // Use step expressions (https://docs.mapbox.com/style-spec/reference/expressions/#step)
+          // with three steps to implement three types of circles:
+          //   * Blue, 20px circles when point count is less than 100
+          //   * Yellow, 30px circles when point count is between 100 and 750
+          //   * Pink, 40px circles when point count is greater than or equal to 750
+          "circle-color": "#27A9E0",
+          "circle-radius": [
+            "step",
+            ["get", "point_count"],
+            20, //output
+            25, //threshold
+            40, //output
+            50, //threshold
+            80 // output
+          ]
+        }
+      });
+
+      map.addLayer({
+        id: "cluster-count",
+        type: "symbol",
+        source,
+        filter: ["has", "point_count"],
+        layout: {
+          "text-field": ["get", "point_count_abbreviated"],
+          "text-font": ["DIN Offc Pro Medium", "Arial Unicode MS Bold"],
+          "text-size": 18
+        },
+        paint: {
+          "text-color": "white"
+        }
+      });
+
+      map.addLayer({
+        id: "unclustered-point",
+        type: "circle",
+        source,
+        filter: ["!", ["has", "point_count"]],
+        paint: {
+          "circle-color": "#11b4da",
+          "circle-radius": 4,
+          "circle-stroke-width": 1,
+          "circle-stroke-color": "#fff"
+        }
+      });
+      // Add a layer to use the image to represent the data.
+      map.addLayer({
+        id: "image",
+        type: "symbol",
+        filter: ["!", ["has", "point_count"]],
+        source, // reference the data source
+        layout: {
+          "icon-image": ["get", "id"], // reference the image
+          "icon-size": 1
+        }
+      });
+    };
+    map.on("load", onLoadListener);
+
+    return () => {
+      map.off("load", onLoadListener);
+    };
+  }, [map, data, source]);
+
+  return null;
+};
+
+const loadImage = async (map: Map, imageName: string, svgString: string) => {
+  if (!!imageName && !!svgString && !map?.hasImage(imageName)) {
+    const marker = new Image();
+    const canvas = document.createElement("canvas");
+
+    const v = await Canvg.fromString(canvas.getContext("2d")!, svgString);
+    await v.render({ ignoreAnimation: true });
+
+    canvas.toBlob(blob => {
+      if (!blob) return;
+      marker.src = URL.createObjectURL(blob);
+      marker.onload = () => map?.addImage(imageName, marker);
+    });
+  }
+};
+
+const markerSVG = (imageUri: string) => `
+  <svg width="85" height="92" viewBox="0 0 85 92" fill="none" xmlns="http://www.w3.org/2000/svg"
+  xmlns:xlink="http://www.w3.org/1999/xlink">
+    <rect width="15.9435" height="15.9435" transform="matrix(0.709613 -0.704591 0.709613 0.704591 31.5 79.8594)"
+        fill="white" />
+    <rect x="2" y="1.59375" width="81" height="80.448" rx="13.5" fill="white" />
+    <rect x="9.5" y="9.09375" width="66" height="66" rx="10" fill="url(#pattern0)" stroke="#27A9E0" stroke-width="4" />
+    <rect x="2" y="1.59375" width="81" height="80.448" rx="13.5" stroke="white" stroke-width="3" />
+    <defs>
+      <pattern id="pattern0" patternContentUnits="objectBoundingBox" width="80" height="80">
+      <use xlink:href="#image_id" />
+      </pattern>
+        <image id="image_id" xlink:href="${imageUri}" />
+    </defs>
+  </svg>
+`;
diff --git a/src/components/elements/Map-mapbox/hooks/useOnHoverFeature.ts b/src/components/elements/Map-mapbox/hooks/useOnHoverFeature.ts
new file mode 100644
index 000000000..0dc21bd4a
--- /dev/null
+++ b/src/components/elements/Map-mapbox/hooks/useOnHoverFeature.ts
@@ -0,0 +1,38 @@
+import { EventData, MapboxGeoJSONFeature, MapLayerMouseEvent } from "mapbox-gl";
+import { useEffect, useRef } from "react";
+
+import { useMapContext } from "@/context/map.provider";
+
+export const useOnHoverFeature = (
+  layer: string | readonly string[] = ["gl-draw-polygon-fill-static.cold", "gl-draw-polygon-fill-static-default.cold"]
+) => {
+  const { map, draw } = useMapContext();
+  const hoveredFeature = useRef<MapboxGeoJSONFeature>();
+
+  useEffect(() => {
+    if (!map) return;
+    const onMouseEnter = (e: MapLayerMouseEvent & EventData) => {
+      const map = e.target;
+      const features = map?.queryRenderedFeatures(e.point);
+      const feature = features?.[0];
+      if (!feature || !map) return;
+
+      hoveredFeature.current = feature;
+      map.setFeatureState(feature, { hover: true });
+    };
+    map.on("mouseenter", layer, onMouseEnter);
+
+    const onMouseLeave = (e: MapLayerMouseEvent & EventData) => {
+      if (hoveredFeature.current) {
+        map.setFeatureState(hoveredFeature.current, { hover: false });
+        hoveredFeature.current = undefined;
+      }
+    };
+    map.on("mouseleave", layer, onMouseLeave);
+
+    return () => {
+      map.off("mouseenter", onMouseEnter);
+      map.off("mouseleave", onMouseLeave);
+    };
+  }, [draw, map, layer]);
+};

From 7c724bd1e94d05acaf4e8b700fdcdfa3b53d4744 Mon Sep 17 00:00:00 2001
From: Dotty <dottykurmi123@gmail.com>
Date: Fri, 7 Jun 2024 09:40:07 -0400
Subject: [PATCH 05/17] edit map

---
 src/components/elements/Map-mapbox/utils.ts   | 276 +-----------------
 .../MapSidePanel/MapSidePanel.stories.tsx     |  31 +-
 .../elements/MapSidePanel/MapSidePanel.tsx    | 168 ++---------
 .../MapSidePanel/MapSidePanelItem.tsx         |  93 +-----
 .../elements/TooltipMap/TooltipMap.tsx        | 101 ++-----
 .../EntityMapAndGalleryCard.tsx               |  36 +--
 .../extensive/Modal/ModalSubmit.tsx           |  38 +--
 .../extensive/Modal/ModalWithMap.tsx          |  40 +--
 .../extensive/WizardForm/FormSummaryRow.tsx   |  70 +----
 9 files changed, 83 insertions(+), 770 deletions(-)

diff --git a/src/components/elements/Map-mapbox/utils.ts b/src/components/elements/Map-mapbox/utils.ts
index f68433a10..91d048a89 100644
--- a/src/components/elements/Map-mapbox/utils.ts
+++ b/src/components/elements/Map-mapbox/utils.ts
@@ -1,277 +1,3 @@
-import * as turfHelper from "@turf/helpers";
-import mapboxgl from "mapbox-gl";
-import { createElement } from "react";
-import { createRoot } from "react-dom/client";
-
-import { layersList } from "@/constants/layers";
-import { SitePolygon, SitePolygonsDataResponse } from "@/generated/apiSchemas";
-
-import { BBox, FeatureCollection } from "./GeoJSON";
-import type { LayerType, LayerWithStyle, TooltipType } from "./Map.d";
-
-const GEOSERVER = "https://geoserver-prod.wri-restoration-marketplace-api.com";
-
-export const getFeatureProperties = <T extends any>(properties: any, key: string): T | undefined => {
+export function getFeatureProperties<T extends any>(properties: any, key: string): T | undefined {
   return properties[key] || properties[`user_${key}`];
-};
-
-export const convertToGeoJSON = (featureCollection: FeatureCollection) => {
-  const { features } = featureCollection;
-  return features.reduce((acc: turfHelper.Feature[], feature) => {
-    const { geometry, properties } = feature;
-    const coordinates = geometry.coordinates;
-    const type = geometry.type;
-    const featureGeoJSON = turfHelper.feature({ type, coordinates }, properties);
-    acc.push(featureGeoJSON);
-    return acc;
-  }, []);
-};
-
-export const convertToAcceptedGEOJSON = (geojson: any) => {
-  if (geojson.type !== "FeatureCollection" && geojson.type !== "GeometryCollection") {
-    const templateGeoJSON = {
-      type: "Feature",
-      properties: {},
-      geometry: geojson
-    };
-    const geojsonFormatted = {
-      type: "FeatureCollection",
-      features: [templateGeoJSON]
-    };
-    return geojsonFormatted;
-  } else if (geojson.type === "GeometryCollection") {
-    const geojsonFormatted = {
-      type: "FeatureCollection",
-      features: geojson.geometries.map((geometry: any) => ({
-        type: "Feature",
-        properties: {},
-        geometry
-      }))
-    };
-    return geojsonFormatted;
-  }
-  return geojson;
-};
-
-export const startDrawing = (draw: MapboxDraw, map: mapboxgl.Map) => {
-  draw.changeMode("draw_polygon");
-  map.getCanvas().style.cursor = "crosshair";
-};
-
-export const stopDrawing = (draw: MapboxDraw, map: mapboxgl.Map) => {
-  draw.changeMode("simple_select");
-  map.getCanvas().style.cursor = "auto";
-};
-
-export const addFilterOnLayer = (
-  layer: any,
-  field: string,
-  parsedPolygonData: Record<string, string[]>,
-  map: mapboxgl.Map
-) => {
-  addSourceToLayer(layer, map, parsedPolygonData);
-  const { name, styles } = layer;
-  showPolygons(styles, name, map, field, parsedPolygonData);
-};
-
-const showPolygons = (
-  styles: LayerWithStyle[],
-  name: string,
-  map: mapboxgl.Map,
-  field: string,
-  parsedPolygonData: any
-) => {
-  styles.forEach((style: LayerWithStyle, index: number) => {
-    const layerName = `${name}-${index}`;
-    if (!map.getLayer(layerName)) {
-      console.error(`Layer ${layerName} does not exist.`);
-      return;
-    }
-    const polygonStatus = style?.metadata?.polygonStatus;
-    const filter = [
-      "in",
-      ["get", field],
-      ["literal", parsedPolygonData?.[polygonStatus] === undefined ? "" : parsedPolygonData[polygonStatus]]
-    ];
-    const completeFilter = ["all", filter];
-    map.setFilter(layerName, completeFilter);
-    map.setLayoutProperty(layerName, "visibility", "visible");
-  });
-};
-
-let popup: mapboxgl.Popup | null = null;
-let arrayPopups: mapboxgl.Popup[] = [];
-
-export const loadLayersInMap = (map: mapboxgl.Map, polygonsData: Record<string, string[]> | undefined) => {
-  layersList.forEach((layer: any) => {
-    if (map) {
-      showPolygons(layer.styles, layer.name, map, "uuid", polygonsData);
-    }
-  });
-};
-
-const handleLayerClick = (
-  e: any,
-  popupComponent: any,
-  map: mapboxgl.Map,
-  setPolygonFromMap: any,
-  sitePolygonData: SitePolygonsDataResponse | undefined,
-  type: TooltipType
-) => {
-  removePopups();
-  const { lng, lat } = e.lngLat;
-  const feature = e.features[0];
-
-  let popupContent = document.createElement("div");
-  popupContent.className = "popup-content-map";
-  const root = createRoot(popupContent);
-  root.render(createElement(popupComponent, { feature, popup, setPolygonFromMap, sitePolygonData, type }));
-
-  popup = new mapboxgl.Popup({ className: "popup-map" }).setLngLat([lng, lat]).setDOMContent(popupContent).addTo(map);
-
-  arrayPopups.push(popup);
-};
-
-export const removePopups = () => {
-  arrayPopups.forEach(popup => {
-    popup.remove();
-  });
-};
-
-export const addFilterOfPolygonsData = (map: mapboxgl.Map, polygonsData: Record<string, string[]> | undefined) => {
-  if (map && polygonsData) {
-    if (map.isStyleLoaded() || map.loaded()) {
-      loadLayersInMap(map, polygonsData);
-    } else {
-      map.on("style.load", () => {
-        loadLayersInMap(map, polygonsData);
-      });
-      map.on("load", () => {
-        loadLayersInMap(map, polygonsData);
-      });
-    }
-  }
-};
-
-export const addGeojsonToDraw = (geojson: any, uuid: string, cb: Function, currentDraw: MapboxDraw) => {
-  if (geojson) {
-    const geojsonFormatted = convertToAcceptedGEOJSON(geojson);
-    const addToDrawAndFilter = () => {
-      if (currentDraw) {
-        const featureGeojson = currentDraw.set(geojsonFormatted);
-        if (featureGeojson.length) {
-          currentDraw.changeMode("direct_select", { featureId: featureGeojson[0] });
-        }
-        cb(uuid);
-      }
-    };
-    addToDrawAndFilter();
-  }
-};
-
-export const addSourcesToLayers = (map: mapboxgl.Map, polygonsData: Record<string, string[]> | undefined) => {
-  layersList.forEach((layer: LayerType) => {
-    if (map) {
-      addSourceToLayer(layer, map, polygonsData);
-    }
-  });
-};
-
-export const addPopupsToMap = (
-  map: mapboxgl.Map,
-  popupComponent: any,
-  setPolygonFromMap: any,
-  sitePolygonData: SitePolygonsDataResponse | undefined,
-  type: TooltipType
-) => {
-  if (popupComponent) {
-    layersList.forEach((layer: LayerType) => {
-      addPopupToLayer(map, popupComponent, layer, setPolygonFromMap, sitePolygonData, type);
-    });
-  }
-};
-
-export const addPopupToLayer = (
-  map: mapboxgl.Map,
-  popupComponent: any,
-  layer: any,
-  setPolygonFromMap: any,
-  sitePolygonData: SitePolygonsDataResponse | undefined,
-  type: TooltipType
-) => {
-  if (popupComponent) {
-    const { name } = layer;
-
-    let layers = map.getStyle().layers;
-
-    let targetLayers = layers.filter(layer => layer.id.startsWith(name));
-
-    targetLayers.forEach(targetLayer => {
-      map.on("click", targetLayer.id, (e: any) =>
-        handleLayerClick(e, popupComponent, map, setPolygonFromMap, sitePolygonData, type)
-      );
-    });
-  }
-};
-
-export const addSourceToLayer = (layer: any, map: mapboxgl.Map, polygonsData: Record<string, string[]> | undefined) => {
-  const { name, styles } = layer;
-  if (map.getSource(name)) {
-    styles?.forEach((_: unknown, index: number) => {
-      map.removeLayer(`${name}-${index}`);
-    });
-    map.removeSource(name);
-  }
-  const URL_GEOSERVER = `${GEOSERVER}/geoserver/gwc/service/wmts?REQUEST=GetTile&SERVICE=WMTS
-    &VERSION=1.0.0&LAYER=wri:${name}&STYLE=&TILEMATRIX=EPSG:900913:{z}&TILEMATRIXSET=EPSG:900913&FORMAT=application/vnd.mapbox-vector-tile&TILECOL={x}&TILEROW={y}&RND=${Math.random()}`;
-  map.addSource(name, {
-    type: "vector",
-    tiles: [URL_GEOSERVER]
-  });
-  styles?.forEach((style: LayerWithStyle, index: number) => {
-    addLayerStyle(map, name, style, index);
-  });
-  loadLayersInMap(map, polygonsData);
-};
-
-export const addLayerStyle = (map: mapboxgl.Map, sourceName: string, style: LayerWithStyle, index: number) => {
-  map.addLayer({
-    id: `${sourceName}-${index}`,
-    source: sourceName,
-    "source-layer": sourceName,
-    ...style
-  } as mapboxgl.AnyLayer);
-};
-
-export const zoomToBbox = (bbox: BBox, map: mapboxgl.Map, hasControls: boolean) => {
-  if (map && bbox) {
-    map.fitBounds(bbox, {
-      padding: hasControls ? 100 : 30,
-      linear: false,
-      animate: true
-    });
-  }
-};
-
-export const formatPlannedStartDate = (plantStartDate: Date | null | undefined): string => {
-  return plantStartDate != null
-    ? plantStartDate.toLocaleDateString("en-US", {
-        month: "long",
-        day: "numeric",
-        year: "numeric",
-        timeZone: "UTC"
-      })
-    : "Unknown";
-};
-
-export function mapPolygonData(sitePolygonData: SitePolygonsDataResponse | undefined) {
-  return (sitePolygonData ?? []).reduce((acc: Record<string, string[]>, data: SitePolygon) => {
-    if (data.status && data.poly_id !== undefined) {
-      if (!acc[data.status]) {
-        acc[data.status] = [];
-      }
-      acc[data.status].push(data.poly_id);
-    }
-    return acc;
-  }, {});
 }
diff --git a/src/components/elements/MapSidePanel/MapSidePanel.stories.tsx b/src/components/elements/MapSidePanel/MapSidePanel.stories.tsx
index 88bdec011..f48ac4f9b 100644
--- a/src/components/elements/MapSidePanel/MapSidePanel.stories.tsx
+++ b/src/components/elements/MapSidePanel/MapSidePanel.stories.tsx
@@ -20,7 +20,6 @@ export const Default: Story = {
         {...args}
         items={items.filter(item => (query ? item.title.includes(query) : item))}
         onSearch={setQuery}
-        title="Project Sites"
       />
     );
   },
@@ -34,50 +33,32 @@ const items = [
   {
     uuid: "1",
     title: "Puerto Princesa Subterranean River National Park Forest Corridor",
-    subtitle: "Created 03/12/21",
-    status: "submitted",
-    setClickedButton: console.log,
-    refContainer: null
+    subtitle: "Created 03/12/21"
   },
   {
     uuid: "2",
     title: "A medium sized project site to see how it looks with 2 lines",
-    subtitle: "Created 03/12/21",
-    status: "submitted",
-    setClickedButton: console.log,
-    refContainer: null
+    subtitle: "Created 03/12/21"
   },
   {
     uuid: "3",
     title: "A shorter project site",
-    subtitle: "Created 03/12/21",
-    status: "submitted",
-    setClickedButton: console.log,
-    refContainer: null
+    subtitle: "Created 03/12/21"
   },
   {
     uuid: "4",
     title:
       "Very long name A medium sized project site to see how it looks with 2 lines A medium sized project site to see how it looks with 2 lines A medium sized project site to see how it looks with 2 lines",
-    subtitle: "Created 03/12/21",
-    status: "submitted",
-    setClickedButton: console.log,
-    refContainer: null
+    subtitle: "Created 03/12/21"
   },
   {
     uuid: "5",
     title: "A shorter project site",
-    subtitle: "Created 03/12/21",
-    status: "submitted",
-    setClickedButton: console.log,
-    refContainer: null
+    subtitle: "Created 03/12/21"
   },
   {
     uuid: "6",
     title: "A shorter project site",
-    subtitle: "Created 03/12/21",
-    status: "submitted",
-    setClickedButton: console.log,
-    refContainer: null
+    subtitle: "Created 03/12/21"
   }
 ];
diff --git a/src/components/elements/MapSidePanel/MapSidePanel.tsx b/src/components/elements/MapSidePanel/MapSidePanel.tsx
index f62e0fc38..cf7ac32c1 100644
--- a/src/components/elements/MapSidePanel/MapSidePanel.tsx
+++ b/src/components/elements/MapSidePanel/MapSidePanel.tsx
@@ -1,31 +1,19 @@
 import { useT } from "@transifex/react";
 import classNames from "classnames";
-import { DetailedHTMLProps, Fragment, HTMLAttributes, useEffect, useRef, useState } from "react";
-import { When } from "react-if";
+import { DetailedHTMLProps, Fragment, HTMLAttributes, useState } from "react";
 
 import MapSidePanelItem, { MapSidePanelItemProps } from "@/components/elements/MapSidePanel/MapSidePanelItem";
+import FilterSearchBox from "@/components/elements/TableFilters/Inputs/FilterSearchBox";
 import Text from "@/components/elements/Text/Text";
-import Icon, { IconNames } from "@/components/extensive/Icon/Icon";
 import List from "@/components/extensive/List/List";
-import { STATUSES } from "@/constants/statuses";
-import { fetchGetV2TerrafundGeojsonComplete, fetchGetV2TerrafundPolygonBboxUuid } from "@/generated/apiComponents";
-
-import Button from "../Button/Button";
-import Checkbox from "../Inputs/Checkbox/Checkbox";
-import Menu from "../Menu/Menu";
-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;
+  onSearch: (query: string) => void;
+  onLoadMore: () => void;
   emptyText?: string;
-  mapFunctions: any;
-  checkedValues: string[];
-  onCheckboxChange: (value: string, checked: boolean) => void;
-  setSortOrder: React.Dispatch<React.SetStateAction<string>>;
 }
 
 const MapSidePanel = ({
@@ -36,150 +24,31 @@ const MapSidePanel = ({
   onSearch,
   onLoadMore,
   emptyText,
-  mapFunctions,
-  checkedValues,
-  onCheckboxChange,
-  setSortOrder,
   ...props
 }: MapSidePanelProps) => {
   const t = useT();
-  const menuCheckboxRef = useRef<HTMLDivElement>(null);
   const [selected, setSelected] = useState<MapSidePanelItemProps>();
-  const refContainer = useRef<HTMLDivElement>(null);
-  const [openMenu, setOpenMenu] = useState(false);
-  const [clickedButton, setClickedButton] = useState<string>("");
-  const checkboxRefs = useRef<HTMLInputElement[]>([]);
-
-  const { map } = mapFunctions;
-
-  const flyToPolygonBounds = async (polygonUuid: string) => {
-    const bbox = await fetchGetV2TerrafundPolygonBboxUuid({ pathParams: { uuid: polygonUuid } });
-    const bounds: any = bbox.bbox;
-    if (!map.current) {
-      return;
-    }
-    map.current.fitBounds(bounds, {
-      padding: 100,
-      linear: false
-    });
-  };
-
-  const downloadGeoJsonPolygon = async (polygonUuid: string) => {
-    const polygonGeojson = await fetchGetV2TerrafundGeojsonComplete({
-      queryParams: { uuid: polygonUuid }
-    });
-    const blob = new Blob([JSON.stringify(polygonGeojson)], { type: "application/json" });
-    const url = URL.createObjectURL(blob);
-    const link = document.createElement("a");
-    link.href = url;
-    link.download = `polygon.geojson`;
-    link.click();
-    URL.revokeObjectURL(url);
-  };
-
-  useEffect(() => {
-    if (clickedButton === "site") {
-      const siteUrl = `/site/${selected?.site_id}`;
-      window.open(siteUrl, "_blank");
-      setClickedButton("");
-    } else if (clickedButton === "zoomTo") {
-      flyToPolygonBounds(selected?.poly_id ?? "");
-      setClickedButton("");
-    } else if (clickedButton === "download") {
-      downloadGeoJsonPolygon(selected?.poly_id ?? "");
-      setClickedButton("");
-    }
-  }, [clickedButton, selected]);
-
-  useEffect(() => {
-    const handleClickOutside = (event: MouseEvent) => {
-      if (menuCheckboxRef.current && !menuCheckboxRef.current?.contains(event.target as Node)) {
-        setOpenMenu(false);
-      }
-    };
-    document.addEventListener("mousedown", handleClickOutside);
-    return () => {
-      document.removeEventListener("mousedown", handleClickOutside);
-    };
-  });
-
-  const itemsPrimaryMenu = [
-    {
-      id: "1",
-      render: () => (
-        <Text variant="text-14-semibold" className="flex items-center" onClick={() => setSortOrder("poly_name")}>
-          Name
-        </Text>
-      )
-    },
-    {
-      id: "2",
-      render: () => (
-        <Text variant="text-14-semibold" className="flex items-center" onClick={() => setSortOrder("status")}>
-          Status
-        </Text>
-      )
-    },
-    {
-      id: "3",
-      render: () => (
-        <Text variant="text-14-semibold" className="flex items-center" onClick={() => setSortOrder("created_at")}>
-          Date Created
-        </Text>
-      )
-    }
-  ];
 
   return (
     <div {...props} className={classNames(className)}>
-      <div className="absolute top-0 left-0 -z-10 h-full w-full backdrop-blur-md" />
-      <div className="mb-3 flex items-start justify-between rounded-tl-lg">
-        <Text variant="text-16-bold" className="text-white">
-          {title}
-        </Text>
-        <div className="flex items-center gap-2">
-          <div className="relative" ref={menuCheckboxRef}>
-            <div className="rounded bg-white p-1.5" onClick={() => setOpenMenu(!openMenu)}>
-              <Icon name={IconNames.IC_FILTER} className="h-4 w-4 text-blueCustom-900 hover:text-primary-500" />
-            </div>
-            <When condition={openMenu}>
-              <div className="absolute z-10 mt-1 grid w-max gap-3 rounded-lg bg-white p-3 shadow">
-                {STATUSES.map((status, index) => (
-                  <Checkbox
-                    ref={ref => ref && checkboxRefs.current.push(ref as HTMLInputElement)}
-                    key={index}
-                    name=""
-                    label={t(status.label)}
-                    className="flex w-full flex-row-reverse items-center justify-end gap-3"
-                    textClassName="text-10-semibold"
-                    checked={checkedValues.includes(status.value)}
-                    onChange={e => onCheckboxChange(status.value, e.target.checked)}
-                  />
-                ))}
-              </div>
-            </When>
-          </div>
-          <div className="rounded bg-white p-1.5">
-            <Menu
-              container={refContainer?.current}
-              placement={MENU_PLACEMENT_BOTTOM_BOTTOM}
-              menu={itemsPrimaryMenu}
-              classNameContentMenu="!mt-3 ml-[-7px]"
-            >
-              <Button variant="text" onClick={() => {}}>
-                <Icon name={IconNames.IC_SORT} className="h-4 w-4 text-blueCustom-900 hover:text-primary-500" />
-              </Button>
-            </Menu>
-          </div>
-        </div>
+      <div className="rounded-tl-lg bg-primary-200 px-5 py-4">
+        <Text variant="text-bold-subtitle-400">{title}</Text>
       </div>
-      <div className="h-[calc(100%-38px)] rounded-bl-lg">
+      <div className="h-[calc(100%-59px)] rounded-bl-lg border-2 border-t-0 border-neutral-100 p-4">
+        <FilterSearchBox onChange={onSearch} className="w-full flex-shrink-0" placeholder={t("Search")} />
         {items.length === 0 && (
-          <Text variant="text-16-light" className="mt-8 text-white">
+          <Text variant="text-light-subtitle-400" className="mt-8 text-center">
             {emptyText || t("No result")}
           </Text>
         )}
-        <div ref={refContainer} className="mr-[-12px] h-full space-y-4 overflow-y-auto pr-3">
+        <div
+          className="h-[calc(100%-16px)] space-y-4 overflow-y-auto py-4"
+          onScroll={e => {
+            //@ts-ignore
+            const bottom = e.target.scrollHeight - e.target.scrollTop === e.target.clientHeight;
+            if (bottom) onLoadMore();
+          }}
+        >
           <List
             as={Fragment}
             items={items}
@@ -189,14 +58,11 @@ const MapSidePanel = ({
                 uuid={item.uuid}
                 title={item.title}
                 subtitle={item.subtitle}
-                status={item.status}
                 onClick={() => {
                   setSelected(item);
                   onSelectItem(item);
                 }}
-                setClickedButton={setClickedButton}
                 isSelected={selected?.uuid === item.uuid}
-                refContainer={refContainer}
               />
             )}
           />
diff --git a/src/components/elements/MapSidePanel/MapSidePanelItem.tsx b/src/components/elements/MapSidePanel/MapSidePanelItem.tsx
index 45b00c32b..dcebe1ac5 100644
--- a/src/components/elements/MapSidePanel/MapSidePanelItem.tsx
+++ b/src/components/elements/MapSidePanel/MapSidePanelItem.tsx
@@ -4,93 +4,28 @@ import { DetailedHTMLProps, HTMLAttributes } from "react";
 import Text from "@/components/elements/Text/Text";
 import Icon, { IconNames } from "@/components/extensive/Icon/Icon";
 
-import Menu from "../Menu/Menu";
-import { MENU_PLACEMENT_RIGHT_BOTTOM } from "../Menu/MenuVariant";
-
 export interface MapSidePanelItemProps extends DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement> {
   uuid: string;
   title: string;
   subtitle: string;
-  status: string;
   isSelected?: boolean;
-  poly_id?: string;
-  site_id?: string;
-  setClickedButton: React.Dispatch<React.SetStateAction<string>>;
-  refContainer: React.RefObject<HTMLDivElement> | null;
 }
 
-const MapSidePanelItem = ({
-  uuid,
-  title,
-  subtitle,
-  status,
-  isSelected,
-  setClickedButton,
-  className,
-  refContainer,
-  ...props
-}: MapSidePanelItemProps) => {
-  let imageStatus = `IC_${status.toUpperCase().replace(/-/g, "_")}`;
-
-  const itemsPrimaryMenu = [
-    {
-      id: "1",
-      render: () => (
-        <Text variant="text-14-semibold" className="flex items-center" onClick={() => setClickedButton("site")}>
-          <Icon name={IconNames.IC_SITE_VIEW} className="h-4 w-4 lg:h-5 lg:w-5" />
-          &nbsp; View Site
-        </Text>
-      )
-    },
-    {
-      id: "2",
-      render: () => (
-        <Text variant="text-14-semibold" className="flex items-center" onClick={() => setClickedButton("zoomTo")}>
-          <Icon name={IconNames.SEARCH} className="h-4 w-4 lg:h-5 lg:w-5" />
-          &nbsp; Zoom to
-        </Text>
-      )
-    },
-    {
-      id: "3",
-      render: () => (
-        <Text variant="text-14-semibold" className="flex items-center" onClick={() => setClickedButton("download")}>
-          <Icon name={IconNames.IC_DOWNLOAD_MENU} className="h-4 w-4 lg:h-5 lg:w-5" />
-          &nbsp; Download
-        </Text>
-      )
-    }
-  ];
-
+const MapSidePanelItem = ({ title, subtitle, isSelected, className, ...props }: MapSidePanelItemProps) => {
   return (
-    <div>
-      <div
-        {...props}
-        className={classNames(className, " rounded-lg border-2 border-transparent bg-white p-2 hover:border-primary", {
-          "border-primary-500": isSelected,
-          "border-neutral-500 hover:border-neutral-800": !isSelected
-        })}
-      >
-        <div className="flex items-center gap-2">
-          <Icon
-            name={IconNames[imageStatus as keyof typeof IconNames]}
-            className="h-11 w-11 rounded-lg bg-neutral-300"
-          />
-          <div className="flex flex-1 flex-col">
-            <Text variant="text-14-bold" className="">
-              {title}
-            </Text>
-            <Text variant="text-14-light">{subtitle}</Text>
-          </div>
-          <div className="lex h-full self-start">
-            <Menu container={refContainer?.current} placement={MENU_PLACEMENT_RIGHT_BOTTOM} menu={itemsPrimaryMenu}>
-              <Icon
-                name={IconNames.IC_MORE_OUTLINED}
-                className="h-4 w-4 rounded-lg hover:fill-primary hover:text-primary lg:h-5 lg:w-5"
-              />
-            </Menu>
-          </div>
-        </div>
+    <div
+      {...props}
+      className={classNames(className, "flex items-center gap-6 rounded-lg border-2 p-3", {
+        "border-primary-500": isSelected,
+        "border-neutral-100 hover:border-neutral-800": !isSelected
+      })}
+    >
+      <Icon name={IconNames.MAP_THUMBNAIL} className="h-11 w-11 rounded-lg bg-neutral-300" />
+      <div className="flex flex-1 flex-col">
+        <Text variant="text-bold-caption-200" className="line-clamp-3">
+          {title}
+        </Text>
+        <Text variant="text-light-caption-200">{subtitle}</Text>
       </div>
     </div>
   );
diff --git a/src/components/elements/TooltipMap/TooltipMap.tsx b/src/components/elements/TooltipMap/TooltipMap.tsx
index 2c8500dd3..dc65e9f70 100644
--- a/src/components/elements/TooltipMap/TooltipMap.tsx
+++ b/src/components/elements/TooltipMap/TooltipMap.tsx
@@ -1,59 +1,34 @@
 import { useT } from "@transifex/react";
-import React, { useEffect } from "react";
+import React from "react";
 
 import Icon, { IconNames } from "@/components/extensive/Icon/Icon";
-import { useGetV2TerrafundPolygonUuid } from "@/generated/apiComponents";
-import { SitePolygon } from "@/generated/apiSchemas";
 
-import type { TooltipType } from "../Map-mapbox/Map.d";
-import { formatPlannedStartDate } from "../Map-mapbox/utils";
 import Text from "../Text/Text";
 export interface TooltipMapProps {
   setTooltipOpen: () => void;
   setEditPolygon: () => void;
   polygon: any;
-  type?: TooltipType;
   popup?: any;
+  formattedPlantStartDate: any;
 }
 const topBorderColorPopup: any = {
-  submitted: "border-t-primary",
-  approved: "border-t-[#72D961]",
-  "needs-more-information": "border-t-[#FF8938]",
-  draft: "border-t-[#E468EF]"
+  Submitted: "border-t-primary",
+  Approved: "border-t-[#72D961]",
+  "Needs More Info": "border-t-[#FF8938]"
 };
 
 const TooltipMap = (props: TooltipMapProps) => {
-  const { setTooltipOpen, setEditPolygon, polygon, type } = props;
+  const { setTooltipOpen, setEditPolygon, polygon, formattedPlantStartDate } = props;
   const t = useT();
-  const [polygonData, setPolygonData] = React.useState<SitePolygon>();
-  const { data: sitePolygonData } = useGetV2TerrafundPolygonUuid<{
-    site_polygon: SitePolygon;
-  }>({
-    pathParams: {
-      uuid: polygon
-    }
-  });
-
-  useEffect(() => {
-    setPolygonData(sitePolygonData?.site_polygon);
-  }, [sitePolygonData]);
-
-  const formatDate = (date: string | undefined) => {
-    const plantStartDate = date ? new Date(date) : null;
-    const formattedPlantStartDate = formatPlannedStartDate(plantStartDate);
-    return formattedPlantStartDate;
-  };
-
-  const polygonDataStatus = polygonData?.status ? polygonData.status : "submitted";
-
-  const goToRelatedSiteProfile = () => {
-    const siteUrl = `/site/${polygonData?.site_id}`;
-    window.open(siteUrl, "_blank");
-  };
-
   return (
     <div
-      className={`w-[295px] rounded border-t-[5px] ${topBorderColorPopup[polygonDataStatus]} bg-white px-3 pb-3 pt-[7px]`}
+      className={`absolute z-20 w-[295px] rounded border-t-[5px] ${
+        topBorderColorPopup[polygon?.status]
+      } bg-white px-3 pb-3 pt-[7px]`}
+      style={{
+        bottom: "0",
+        transform: "translate(-50%, 0px)"
+      }}
     >
       <button onClick={setTooltipOpen} className="absolute right-2 top-2 ml-2 rounded p-1 hover:bg-grey-800">
         <Icon name={IconNames.CLEAR} className="h-3 w-3 text-darkCustom-100" />
@@ -61,11 +36,11 @@ const TooltipMap = (props: TooltipMapProps) => {
 
       <div className="text-10 flex items-center justify-center gap-1">
         <Text variant="text-10" className="mb-1 uppercase leading-[normal]">
-          {polygonData?.site_name} {t("SITE")}
+          {polygon?.site_name} {t("SITE")}
         </Text>
       </div>
       <Text variant="text-10-bold" className="text-center leading-[normal] text-black">
-        {polygonData?.poly_name ? polygonData?.poly_name : t("Unnamed Polygon")}
+        {polygon?.poly_name ? polygon?.poly_name : t("Unnamed Polygon")}
       </Text>
       <hr className="my-2 border border-grey-750" />
       <div className="grid grid-cols-2 gap-4">
@@ -74,7 +49,7 @@ const TooltipMap = (props: TooltipMapProps) => {
             {t("Restoration Practice")}
           </Text>
           <Text variant="text-10-bold" className="leading-[normal] text-black ">
-            {polygonData?.practice ? polygonData?.practice : t("Unknown")}
+            {polygon?.practice ? polygon?.practice : t("Unknown")}
           </Text>
         </div>
         <div>
@@ -82,7 +57,7 @@ const TooltipMap = (props: TooltipMapProps) => {
             {t("Target Land Use System")}
           </Text>
           <Text variant="text-10-bold" className="leading-[normal] text-black ">
-            {polygonData?.target_sys ? polygonData?.target_sys : t("Unknown")}
+            {polygon?.target_sys ? polygon?.target_sys : t("Unknown")}
           </Text>
         </div>
         <div>
@@ -90,7 +65,7 @@ const TooltipMap = (props: TooltipMapProps) => {
             {t("Tree Distribution")}
           </Text>
           <Text variant="text-10-bold" className="leading-[normal] text-black">
-            {polygonData?.distr ? polygonData?.distr : t("Unknown")}
+            {polygon?.distr ? polygon?.distr : t("Unknown")}
           </Text>
         </div>
         <div>
@@ -98,42 +73,20 @@ const TooltipMap = (props: TooltipMapProps) => {
             {t("Planting Start Date")}
           </Text>
           <Text variant="text-10-bold" className="leading-[normal] text-black ">
-            {formatDate(polygonData?.plantstart)}
+            {formattedPlantStartDate}
           </Text>
         </div>
       </div>
 
       <hr className="my-2 border border-grey-750" />
-      {type === "edit" && (
-        <div className="flex w-full items-center justify-center">
-          <button className="flex items-center justify-center gap-1" onClick={setEditPolygon}>
-            <Icon name={IconNames.CLICK} className="h-4 w-4" />
-            <Text variant="text-10-light" className="italic text-black">
-              {t("click to see polygon details")}
-            </Text>
-          </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">
-              {t("click to open site profile page")}
-            </Text>
-          </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 className="flex w-full items-center justify-center">
+        <button className="flex items-center justify-center gap-1" onClick={setEditPolygon}>
+          <Icon name={IconNames.CLICK} className="h-4 w-4" />
+          <Text variant="text-10-light" className="italic text-black">
+            {t("click to see polygon details")}
+          </Text>
+        </button>
+      </div>
     </div>
   );
 };
diff --git a/src/components/extensive/EntityMapAndGalleryCard/EntityMapAndGalleryCard.tsx b/src/components/extensive/EntityMapAndGalleryCard/EntityMapAndGalleryCard.tsx
index f0345ac40..43e7c6c1e 100644
--- a/src/components/extensive/EntityMapAndGalleryCard/EntityMapAndGalleryCard.tsx
+++ b/src/components/extensive/EntityMapAndGalleryCard/EntityMapAndGalleryCard.tsx
@@ -1,23 +1,14 @@
 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 { 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 Map from "@/components/elements/Map-mapbox/Map";
 import { IconNames } from "@/components/extensive/Icon/Icon";
 import PageCard from "@/components/extensive/PageElements/Card/PageCard";
 import { getEntitiesOptions } from "@/constants/options/entities";
-import {
-  GetV2TypeEntityResponse,
-  useDeleteV2FilesUUID,
-  useGetV2MODELUUIDFiles,
-  useGetV2TypeEntity
-} from "@/generated/apiComponents";
+import { useDeleteV2FilesUUID, useGetV2MODELUUIDFiles } from "@/generated/apiComponents";
 import { useGetReadableEntityName } from "@/hooks/entity/useGetReadableEntityName";
 import { useDate } from "@/hooks/useDate";
 import { useGetImagesGeoJSON } from "@/hooks/useImageGeoJSON";
@@ -43,10 +34,7 @@ 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,
@@ -56,17 +44,6 @@ 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 },
@@ -113,18 +90,11 @@ const EntityMapAndGalleryCard = ({
   return (
     <>
       <PageCard title={`${modelTitle} ${t("Area")}`}>
-        <MapContainer
-          polygonsData={polygonDataMap}
-          sitePolygonData={sitePolygonData?.polygonsData}
-          bbox={mapBbox}
+        <Map
           className="rounded-lg"
           geojson={geoJSON}
           imageLayerGeojson={imagesGeoJson}
           onDeleteImage={uuid => deleteFile({ pathParams: { uuid } })}
-          mapFunctions={mapFunctions}
-          showLegend
-          hasControls
-          showPopups
         />
       </PageCard>
       <If
diff --git a/src/components/extensive/Modal/ModalSubmit.tsx b/src/components/extensive/Modal/ModalSubmit.tsx
index 4813d2092..a2b94cb81 100644
--- a/src/components/extensive/Modal/ModalSubmit.tsx
+++ b/src/components/extensive/Modal/ModalSubmit.tsx
@@ -1,17 +1,15 @@
 import { useT } from "@transifex/react";
-import { FC, useEffect, useState } from "react";
+import { FC } from "react";
 import { When } from "react-if";
-import { twMerge } from "tailwind-merge";
 
 import Button from "@/components/elements/Button/Button";
 import Checkbox from "@/components/elements/Inputs/Checkbox/Checkbox";
 import Status, { StatusEnum } from "@/components/elements/Status/Status";
 import Text from "@/components/elements/Text/Text";
-import { fetchGetV2SitePolygonUUID } from "@/generated/apiComponents";
-import { SitePolygonResponse } from "@/generated/apiSchemas";
 
 import Icon, { IconNames } from "../Icon/Icon";
 import { ModalProps } from "./Modal";
+import { dataSubmitPolygons } from "./ModalContent/MockedData";
 import { ModalBaseSubmit } from "./ModalsBases";
 
 export interface ModalSubmitProps extends ModalProps {
@@ -20,7 +18,6 @@ export interface ModalSubmitProps extends ModalProps {
   toogleButton?: boolean;
   status?: "under-review" | "approved" | "draft" | "submitted";
   onClose?: () => void;
-  site: any;
 }
 
 const ModalSubmit: FC<ModalSubmitProps> = ({
@@ -35,24 +32,9 @@ const ModalSubmit: FC<ModalSubmitProps> = ({
   children,
   status,
   onClose,
-  site,
   ...rest
 }) => {
-  const [polygonList, setPolygonList] = useState<SitePolygonResponse[]>([]);
   const t = useT();
-  const loadPolygonList = async () => {
-    const res = await fetchGetV2SitePolygonUUID({
-      pathParams: {
-        uuid: site.uuid
-      }
-    });
-    const _polygonList = (res as { data: SitePolygonResponse[] }).data;
-    setPolygonList(_polygonList);
-  };
-
-  useEffect(() => {
-    loadPolygonList();
-  }, []);
 
   return (
     <ModalBaseSubmit {...rest}>
@@ -72,14 +54,6 @@ const ModalSubmit: FC<ModalSubmitProps> = ({
         </div>
       </header>
       <div className="max-h-[100%] w-full overflow-auto px-8 py-8">
-        <When condition={!!iconProps}>
-          <Icon
-            {...iconProps!}
-            width={iconProps?.width || 40}
-            className={twMerge("mb-8", iconProps?.className)}
-            style={{ minHeight: iconProps?.height || iconProps?.width || 40 }}
-          />
-        </When>
         <div className="flex items-center justify-between">
           <Text variant="text-24-bold">{title}</Text>
         </div>
@@ -100,13 +74,13 @@ const ModalSubmit: FC<ModalSubmitProps> = ({
               {t("Submit")}
             </Text>
           </header>
-          {polygonList.map(polygon => (
-            <div key={polygon.uuid} className="flex items-center border-b border-grey-750 px-4 py-2 last:border-0">
+          {dataSubmitPolygons.map(item => (
+            <div key={item.id} className="flex items-center border-b border-grey-750 px-4 py-2 last:border-0">
               <Text variant="text-12" className="flex-[2]">
-                {polygon.poly_name}
+                {item.name}
               </Text>
               <div className="flex flex-1 items-center justify-center">
-                <Status status={polygon.status as StatusEnum} />
+                <Status status={status as StatusEnum} />
               </div>
               <div className="flex flex-1 items-center justify-center">
                 <Checkbox name={""} />
diff --git a/src/components/extensive/Modal/ModalWithMap.tsx b/src/components/extensive/Modal/ModalWithMap.tsx
index b1d4faa8d..7f9930760 100644
--- a/src/components/extensive/Modal/ModalWithMap.tsx
+++ b/src/components/extensive/Modal/ModalWithMap.tsx
@@ -1,17 +1,16 @@
 import { useT } from "@transifex/react";
 import { remove } from "lodash";
-import { FC, useEffect, useState } from "react";
+import { FC, useState } from "react";
 import { When } from "react-if";
 
 import Button from "@/components/elements/Button/Button";
 import FileInput from "@/components/elements/Inputs/FileInput/FileInput";
 import { VARIANT_FILE_INPUT_MODAL_ADD_IMAGES_WITH_MAP } from "@/components/elements/Inputs/FileInput/FileInputVariants";
 import TextArea from "@/components/elements/Inputs/textArea/TextArea";
-import { MapContainer } from "@/components/elements/Map-mapbox/Map";
+import Map from "@/components/elements/Map-mapbox/Map";
 import StepProgressbar from "@/components/elements/ProgressBar/StepProgressbar/StepProgressbar";
 import Status, { StatusEnum } from "@/components/elements/Status/Status";
 import Text from "@/components/elements/Text/Text";
-import { fetchGetV2TerrafundPolygonBboxUuid, fetchGetV2TerrafundPolygonGeojsonUuid } from "@/generated/apiComponents";
 import { UploadedFile } from "@/types/common";
 
 import Icon, { IconNames } from "../Icon/Icon";
@@ -39,35 +38,8 @@ const ModalWithMap: FC<ModalWithMapProps> = ({
   ...rest
 }) => {
   const [files, setFiles] = useState<UploadedFile[]>([]);
-  const [polygonData, setPolygonData] = useState<any>();
-  const [initialPolygonData, setInitialPolygonData] = useState<any>();
-  const [polygonBbox, setPolygonBbox] = useState<any>();
   const t = useT();
 
-  useEffect(() => {
-    const getPolygonData = async () => {
-      if (polygonSelected) {
-        const polygonGeojson = await fetchGetV2TerrafundPolygonGeojsonUuid({
-          pathParams: { uuid: polygonSelected }
-        });
-        setInitialPolygonData(polygonGeojson);
-        const bbox = await fetchGetV2TerrafundPolygonBboxUuid({ pathParams: { uuid: polygonSelected } });
-        setPolygonBbox(bbox?.bbox);
-      }
-    };
-
-    getPolygonData();
-  }, [polygonSelected]);
-
-  useEffect(() => {
-    if (initialPolygonData) {
-      const selectedPolygon: any = {};
-      const entry = initialPolygonData?.site_polygon;
-      selectedPolygon[entry?.status] = entry?.poly_id;
-      setPolygonData(selectedPolygon);
-    }
-  }, [initialPolygonData]);
-
   return (
     <ModalBaseWithMap {...rest}>
       <div className="flex h-full w-full">
@@ -143,13 +115,7 @@ const ModalWithMap: FC<ModalWithMapProps> = ({
           </div>
         </div>
         <div className="relative h-[700px] w-[60%]">
-          <MapContainer
-            className="h-full w-full"
-            hasControls={false}
-            polygonChecks
-            polygonsData={polygonData}
-            bbox={polygonBbox}
-          />
+          <Map className="h-full w-full" hasControls={false} />
           <button onClick={onClose} className="absolute right-1 top-1 z-10 rounded bg-grey-750 p-1 drop-shadow-md">
             <Icon name={IconNames.CLEAR} className="h-4 w-4 text-darkCustom-100" />
           </button>
diff --git a/src/components/extensive/WizardForm/FormSummaryRow.tsx b/src/components/extensive/WizardForm/FormSummaryRow.tsx
index f03bea716..90ac8a5c4 100644
--- a/src/components/extensive/WizardForm/FormSummaryRow.tsx
+++ b/src/components/extensive/WizardForm/FormSummaryRow.tsx
@@ -1,7 +1,7 @@
 import { AccessorKeyColumnDef } from "@tanstack/react-table";
 import { useT } from "@transifex/react";
+import dynamic from "next/dynamic";
 import { useMemo } from "react";
-import { useShowContext } from "react-admin";
 import { Else, If, Then } from "react-if";
 
 import { formatEntryValue } from "@/admin/apiProvider/utils/entryFormat";
@@ -14,22 +14,18 @@ import { getOwnershipTableColumns } from "@/components/elements/Inputs/DataTable
 import { getSeedingTableColumns } from "@/components/elements/Inputs/DataTable/RHFSeedingTable";
 import { getStrataTableColumns } from "@/components/elements/Inputs/DataTable/RHFStrataTable";
 import { TreeSpeciesValue } from "@/components/elements/Inputs/TreeSpeciesInput/TreeSpeciesInput";
-import { useMap } from "@/components/elements/Map-mapbox/hooks/useMap";
-import { MapContainer } from "@/components/elements/Map-mapbox/Map";
 import Text from "@/components/elements/Text/Text";
 import { FormSummaryProps } from "@/components/extensive/WizardForm/FormSummary";
 import WorkdayCollapseGrid from "@/components/extensive/WorkdayCollapseGrid/WorkdayCollapseGrid";
 import { GRID_VARIANT_NARROW } from "@/components/extensive/WorkdayCollapseGrid/WorkdayVariant";
-import { useGetV2SitesSiteBbox, useGetV2SitesSitePolygon } from "@/generated/apiComponents";
-import { SitePolygonsDataResponse } from "@/generated/apiSchemas";
-import { EntityName } from "@/types/common";
 
 import List from "../List/List";
 import { FieldType, FormStepSchema } from "./types";
 import { getAnswer, getFormattedAnswer } from "./utils";
 
+const Map = dynamic(() => import("@/components/elements/Map-mapbox/Map"), { ssr: false });
+
 export interface FormSummaryRowProps extends FormSummaryProps {
-  type?: EntityName;
   step: FormStepSchema;
   index: number;
   nullText?: string;
@@ -45,21 +41,10 @@ export interface FormEntry {
 
 export const useGetFormEntries = (props: GetFormEntriesProps) => {
   const t = useT();
-  const { record } = useShowContext();
-  const siteGeojson = getSitePolygonData(record);
-  const bbox = getSiteBbox(record);
-  const mapFunctions = useMap();
-
-  return useMemo<any[]>(() => getFormEntries(props, t, siteGeojson, bbox, mapFunctions), [props, t, siteGeojson, bbox]);
+  return useMemo<any[]>(() => getFormEntries(props, t), [props, t]);
 };
 
-export const getFormEntries = (
-  { step, values, nullText }: GetFormEntriesProps,
-  t: typeof useT,
-  siteGeojson?: any,
-  bbox?: any,
-  mapFunctions?: any
-) => {
+export const getFormEntries = ({ step, values, nullText }: GetFormEntriesProps, t: typeof useT) => {
   const outputArr: FormEntry[] = [];
 
   step.fields.forEach(f => {
@@ -98,19 +83,7 @@ export const getFormEntries = (
         outputArr.push({
           title: f.label,
           type: f.type,
-          value: siteGeojson ? (
-            <MapContainer
-              polygonsData={siteGeojson}
-              bbox={bbox}
-              className="h-[240px] flex-1"
-              hasControls={false}
-              showPopups
-              showLegend
-              mapFunctions={mapFunctions}
-            />
-          ) : (
-            <></>
-          )
+          value: <Map geojson={values[f.name]} className="h-[240px] flex-1" hasControls={false} />
         });
         break;
       }
@@ -197,37 +170,6 @@ export const getFormEntries = (
   return outputArr;
 };
 
-const getSitePolygonData = (record: any) => {
-  let result = null;
-  if (record) {
-    const { data: sitePolygonData } = useGetV2SitesSitePolygon({
-      pathParams: {
-        site: record.uuid
-      }
-    });
-    if (sitePolygonData) {
-      const polygonDataMap = ((sitePolygonData ?? []) as SitePolygonsDataResponse).reduce((acc: any, data: any) => {
-        if (!acc[data.status]) {
-          acc[data.status] = [];
-        }
-        acc[data.status].push(data.poly_id);
-        return acc;
-      }, {});
-      result = polygonDataMap;
-    }
-  }
-  return result;
-};
-
-const getSiteBbox = (record: any) => {
-  const { data: sitePolygonBbox } = useGetV2SitesSiteBbox({
-    pathParams: {
-      site: record.uuid
-    }
-  });
-  const siteBbox = sitePolygonBbox?.bbox;
-  return siteBbox;
-};
 const FormSummaryRow = ({ step, index, ...props }: FormSummaryRowProps) => {
   const t = useT();
   const entries = useGetFormEntries({ step, ...props });

From cab5c17842a2a502b08f5792ff049d14f9da7194 Mon Sep 17 00:00:00 2001
From: Dotty <dottykurmi123@gmail.com>
Date: Fri, 7 Jun 2024 11:31:10 -0400
Subject: [PATCH 06/17] update style in terramatch pages

---
 .../PageElements/Footer/PageFooter.tsx        |  6 +-
 src/pages/auth/layout.tsx                     | 36 ++++++++++
 .../signup/components/usePasswordStrength.tsx | 70 +++++++++++++++++++
 .../create/[frameworkUUID].page.tsx           |  2 +
 .../[entityName]/edit/[uuid]/index.page.tsx   |  3 +
 src/pages/home.page.tsx                       |  8 ++-
 src/pages/my-projects/index.page.tsx          |  4 ++
 src/pages/nursery/[uuid]/index.page.tsx       |  2 +-
 src/pages/opportunities/index.page.tsx        |  5 ++
 .../[id]/components/BuildStrongerProfile.tsx  |  2 +-
 .../organization/[id]/components/Files.tsx    |  2 +-
 .../[id]/components/OrganizationHeader.tsx    | 48 +++++++------
 .../financial/FinancialInformation.tsx        |  2 +-
 .../[id]/components/overview/About.tsx        |  4 +-
 .../overview/PastCommunityExperience.tsx      |  4 +-
 .../components/overview/TeamAndResources.tsx  |  5 +-
 .../projects/ProjectsTabContent.tsx           |  4 +-
 .../[id]/components/team/TeamTabContent.tsx   |  4 +-
 src/pages/organization/[id]/index.page.tsx    |  4 +-
 src/pages/project/[uuid]/index.page.tsx       |  4 +-
 src/pages/project/[uuid]/tabs/Details.tsx     |  2 +
 src/pages/project/[uuid]/tabs/Gallery.tsx     |  2 +
 .../project/[uuid]/tabs/GoalsAndProgress.tsx  | 21 +++---
 .../project/[uuid]/tabs/ProjectSites.tsx      |  9 +--
 .../project/[uuid]/tabs/ReportingTasks.tsx    |  2 +
 src/pages/site/[uuid]/index.page.tsx          |  4 +-
 .../site/[uuid]/tabs/CompletedReports.tsx     |  2 +
 src/pages/site/[uuid]/tabs/Details.tsx        |  2 +
 .../site/[uuid]/tabs/GoalsAndProgress.tsx     | 11 ++-
 29 files changed, 211 insertions(+), 63 deletions(-)
 create mode 100644 src/pages/auth/layout.tsx
 create mode 100644 src/pages/auth/signup/components/usePasswordStrength.tsx

diff --git a/src/components/extensive/PageElements/Footer/PageFooter.tsx b/src/components/extensive/PageElements/Footer/PageFooter.tsx
index 1fe973c0c..d31e4db5b 100644
--- a/src/components/extensive/PageElements/Footer/PageFooter.tsx
+++ b/src/components/extensive/PageElements/Footer/PageFooter.tsx
@@ -1,6 +1,6 @@
 import Icon, { IconNames } from "../../Icon/Icon";
 
-const PageFooter = () => {
+const PageFooter = () => (
   <div className="mt-0 flex h-28 items-center justify-between bg-[#353535] px-28 text-white" style={{ marginTop: 0 }}>
     <div className="flex">
       <Icon name={IconNames.FACEBOOK} className="mr-4" />
@@ -9,7 +9,7 @@ const PageFooter = () => {
     </div>
     <Icon name={IconNames.WRI_LOGO} width={108} height={30} className="min-w-[108px]" />
     <p> © TerraMatch 2024</p>
-  </div>;
-};
+  </div>
+);
 
 export default PageFooter;
diff --git a/src/pages/auth/layout.tsx b/src/pages/auth/layout.tsx
new file mode 100644
index 000000000..6d54b1005
--- /dev/null
+++ b/src/pages/auth/layout.tsx
@@ -0,0 +1,36 @@
+"use client";
+import { Button } from "@mui/material";
+import { usePathname } from "next/navigation";
+import React from "react";
+import { When } from "react-if";
+
+import Text from "@/components/elements/Text/Text";
+
+interface LoginLayoutProps {
+  children: React.ReactNode;
+}
+
+const LoginLayout: React.FC<LoginLayoutProps> = props => {
+  const { children } = props;
+  const pathname = usePathname();
+
+  return (
+    <div className="relative flex h-screen w-full bg-square-pattern bg-contain bg-right bg-no-repeat">
+      <div className="mt-[-78px] flex w-[45%] flex-col items-center justify-center py-[78px]">
+        {children}
+        <When condition={pathname !== "/sign-up"}>
+          <div className="absolute bottom-[1.5vh] left-6">
+            <Button>
+              <Text variant="text-12-bold" className="text-primary">
+                English (United Kingdom)
+              </Text>
+            </Button>
+          </div>
+        </When>
+      </div>
+      <div className="flex w-[55%] items-center justify-end" />
+    </div>
+  );
+};
+
+export default LoginLayout;
diff --git a/src/pages/auth/signup/components/usePasswordStrength.tsx b/src/pages/auth/signup/components/usePasswordStrength.tsx
new file mode 100644
index 000000000..76628d154
--- /dev/null
+++ b/src/pages/auth/signup/components/usePasswordStrength.tsx
@@ -0,0 +1,70 @@
+import { useEffect, useState } from "react";
+
+interface UsePasswordStrengthProps {
+  password: string;
+}
+
+interface UsePasswordStrengthResult {
+  passwordStrength: string;
+  values: {
+    hasUppercase: boolean;
+    hasLowercase: boolean;
+    hasNumber: boolean;
+    hasCorrectLength: boolean;
+  };
+  validationCount: number;
+}
+
+const ValidationStrength = {
+  STRONG: 4,
+  FAIR: 3,
+  WEAK: 2,
+  VERY_WEAK: 1
+};
+const usePasswordStrength = (props: UsePasswordStrengthProps): UsePasswordStrengthResult => {
+  const { password } = props;
+  const [passwordStrength, setPasswordStrength] = useState("Very Weak");
+  const [values, setValues] = useState({
+    hasUppercase: false,
+    hasLowercase: false,
+    hasNumber: false,
+    hasCorrectLength: false
+  });
+
+  const [validation, setValidation] = useState<boolean[]>([]);
+
+  useEffect(() => {
+    const hasCorrectLength = password.length >= 8;
+    const hasUppercase = (password.match(/[A-Z]/g) || []).length > 0;
+    const hasLowercase = (password.match(/[a-z]/g) || []).length > 0;
+    const hasNumber = (password.match(/[0-9]/g) || []).length > 0;
+
+    const _validation = [hasUppercase, hasLowercase, hasNumber, hasCorrectLength];
+
+    const strengthMap = {
+      [ValidationStrength.STRONG]: "Strong",
+      [ValidationStrength.FAIR]: "Fair",
+      [ValidationStrength.WEAK]: "Weak"
+    };
+
+    setValues({
+      hasUppercase,
+      hasLowercase,
+      hasNumber,
+      hasCorrectLength
+    });
+
+    setValidation(_validation);
+    const validationCount = _validation.filter(value => value === true).length;
+
+    setPasswordStrength(strengthMap[validationCount]);
+  }, [password]);
+
+  return {
+    passwordStrength,
+    values,
+    validationCount: validation.filter(Boolean).length
+  };
+};
+
+export default usePasswordStrength;
diff --git a/src/pages/entity/[entityName]/create/[frameworkUUID].page.tsx b/src/pages/entity/[entityName]/create/[frameworkUUID].page.tsx
index 5330d01c7..9175fc4cc 100644
--- a/src/pages/entity/[entityName]/create/[frameworkUUID].page.tsx
+++ b/src/pages/entity/[entityName]/create/[frameworkUUID].page.tsx
@@ -2,6 +2,7 @@ import { useT } from "@transifex/react";
 import Link from "next/link";
 import { useRouter } from "next/router";
 
+import PageFooter from "@/components/extensive/PageElements/Footer/PageFooter";
 import WizardFormIntro from "@/components/extensive/WizardForm/WizardFormIntro";
 import BackgroundLayout from "@/components/generic/Layout/BackgroundLayout";
 import ContentLayout from "@/components/generic/Layout/ContentLayout";
@@ -111,6 +112,7 @@ const EntityIntroPage = () => {
           />
         </LoadingContainer>
       </ContentLayout>
+      <PageFooter />
     </BackgroundLayout>
   );
 };
diff --git a/src/pages/entity/[entityName]/edit/[uuid]/index.page.tsx b/src/pages/entity/[entityName]/edit/[uuid]/index.page.tsx
index 510e025f3..ffe2ca324 100644
--- a/src/pages/entity/[entityName]/edit/[uuid]/index.page.tsx
+++ b/src/pages/entity/[entityName]/edit/[uuid]/index.page.tsx
@@ -3,6 +3,7 @@ import { notFound } from "next/navigation";
 import { useRouter } from "next/router";
 import { useMemo } from "react";
 
+import PageFooter from "@/components/extensive/PageElements/Footer/PageFooter";
 import WizardForm from "@/components/extensive/WizardForm";
 import BackgroundLayout from "@/components/generic/Layout/BackgroundLayout";
 import LoadingContainer from "@/components/generic/Loading/LoadingContainer";
@@ -154,6 +155,8 @@ const EditEntityPage = () => {
           }}
         />
       </LoadingContainer>
+      <br />
+      <PageFooter />
     </BackgroundLayout>
   );
 };
diff --git a/src/pages/home.page.tsx b/src/pages/home.page.tsx
index 710b46183..73df2e65c 100644
--- a/src/pages/home.page.tsx
+++ b/src/pages/home.page.tsx
@@ -8,6 +8,7 @@ import ActionTracker from "@/components/extensive/ActionTracker/ActionTracker";
 import FundingCarouselList from "@/components/extensive/FundingsCarouselList/FundingsCarouselList";
 import { IconNames } from "@/components/extensive/Icon/Icon";
 import PageBody from "@/components/extensive/PageElements/Body/PageBody";
+import PageFooter from "@/components/extensive/PageElements/Footer/PageFooter";
 import PageSection from "@/components/extensive/PageElements/Section/PageSection";
 import TaskList from "@/components/extensive/TaskList/TaskList";
 import { useGetHomeTourItems } from "@/components/extensive/WelcomeTour/useGetHomeTourItems";
@@ -39,7 +40,7 @@ const HomePage = () => {
         <title>{t("Home")}</title>
       </Head>
       <PageSection>
-        <Text variant="text-heading-700" className="text-center">
+        <Text variant="text-36-bold" className="text-center">
           {t("What would you like to do?")}
         </Text>
       </PageSection>
@@ -65,9 +66,9 @@ const HomePage = () => {
         </LoadingContainer>
       </When>
       <When condition={!!myOrg}>
-        <PageSection>
+        <PageSection className="flex justify-center bg-white pb-10" hasFull>
           <TaskList
-            title={t("Get Ready for Funding Opportunities")}
+            title={t(`Get Ready for <br> Funding Opportunities`)}
             subtitle={t("Keep your information updated to have more chances of having a successful application.")}
             items={[
               {
@@ -96,6 +97,7 @@ const HomePage = () => {
           />
         </PageSection>
       </When>
+      <PageFooter />
     </PageBody>
   );
 };
diff --git a/src/pages/my-projects/index.page.tsx b/src/pages/my-projects/index.page.tsx
index 7c55b732a..6c4e7f49c 100644
--- a/src/pages/my-projects/index.page.tsx
+++ b/src/pages/my-projects/index.page.tsx
@@ -11,6 +11,7 @@ import Text from "@/components/elements/Text/Text";
 import { IconNames } from "@/components/extensive/Icon/Icon";
 import List from "@/components/extensive/List/List";
 import PageBody from "@/components/extensive/PageElements/Body/PageBody";
+import PageFooter from "@/components/extensive/PageElements/Footer/PageFooter";
 import PageHeader from "@/components/extensive/PageElements/Header/PageHeader";
 import PageSection from "@/components/extensive/PageElements/Section/PageSection";
 import LoadingContainer from "@/components/generic/Loading/LoadingContainer";
@@ -88,6 +89,9 @@ const MyProjectsPage = () => {
             </Else>
           </If>
         </LoadingContainer>
+        <br />
+        <br />
+        <PageFooter />
       </PageBody>
     </>
   );
diff --git a/src/pages/nursery/[uuid]/index.page.tsx b/src/pages/nursery/[uuid]/index.page.tsx
index 364552260..d81a0c6a5 100644
--- a/src/pages/nursery/[uuid]/index.page.tsx
+++ b/src/pages/nursery/[uuid]/index.page.tsx
@@ -147,7 +147,7 @@ const NurseryDetailPage = () => {
             body: <CompletedReportsTab nursery={nursery} />
           }
         ]}
-        containerClassName="max-w-7xl px-10 xl:px-0 w-full overflow-auto"
+        containerClassName="max-w-[82vw] px-10 xl:px-0 w-full  overflow-y-hidden"
       />
     </LoadingContainer>
   );
diff --git a/src/pages/opportunities/index.page.tsx b/src/pages/opportunities/index.page.tsx
index 5b3f7693b..9b80013fb 100644
--- a/src/pages/opportunities/index.page.tsx
+++ b/src/pages/opportunities/index.page.tsx
@@ -12,6 +12,7 @@ import FundingCarouselList from "@/components/extensive/FundingsCarouselList/Fun
 import { IconNames } from "@/components/extensive/Icon/Icon";
 import PageBody from "@/components/extensive/PageElements/Body/PageBody";
 import PageCard from "@/components/extensive/PageElements/Card/PageCard";
+import PageFooter from "@/components/extensive/PageElements/Footer/PageFooter";
 import PageHeader from "@/components/extensive/PageElements/Header/PageHeader";
 import PageSection from "@/components/extensive/PageElements/Section/PageSection";
 import ApplicationsTable from "@/components/extensive/Tables/ApplicationsTable";
@@ -146,7 +147,11 @@ const OpportunitiesPage = () => {
             </PageSection>
           </Else>
         </If>
+        <br />
+        <br />
       </PageBody>
+
+      <PageFooter />
     </>
   );
 };
diff --git a/src/pages/organization/[id]/components/BuildStrongerProfile.tsx b/src/pages/organization/[id]/components/BuildStrongerProfile.tsx
index e1562824c..77d0f37a7 100644
--- a/src/pages/organization/[id]/components/BuildStrongerProfile.tsx
+++ b/src/pages/organization/[id]/components/BuildStrongerProfile.tsx
@@ -21,7 +21,7 @@ const BuildStrongerProfile = ({ subtitle, steps, onEdit }: BuildStrongerProfileP
   const t = useT();
 
   return (
-    <section className="my-10 bg-neutral-150 p-8">
+    <section className="my-10 rounded-lg bg-neutral-150 p-8">
       <div className="flex flex-col gap-4">
         <div className="flex items-center justify-between">
           <Text variant="text-heading-2000">{t("Build a Stronger Profile")}</Text>
diff --git a/src/pages/organization/[id]/components/Files.tsx b/src/pages/organization/[id]/components/Files.tsx
index a8ad7883f..6eb518265 100644
--- a/src/pages/organization/[id]/components/Files.tsx
+++ b/src/pages/organization/[id]/components/Files.tsx
@@ -14,7 +14,7 @@ type FilesProps = {
 
 const Files = ({ files, title }: FilesProps) => {
   return (
-    <section className="my-10 bg-neutral-150 p-8">
+    <section className="my-10 rounded-lg bg-neutral-150 p-8">
       <When condition={!!title}>
         <Text variant="text-heading-300" className="mb-10">
           {title}
diff --git a/src/pages/organization/[id]/components/OrganizationHeader.tsx b/src/pages/organization/[id]/components/OrganizationHeader.tsx
index 9d38e1a36..e465f8e28 100644
--- a/src/pages/organization/[id]/components/OrganizationHeader.tsx
+++ b/src/pages/organization/[id]/components/OrganizationHeader.tsx
@@ -49,33 +49,35 @@ const OrganizationHeader = ({ organization }: OrganizationHeaderProps) => {
             }}
           />
           {/* Content Container */}
-          <div className="tranform translate-y-[-70px]">
-            <Text variant="text-heading-2000" className="mb-3">
-              {organization?.name}
-            </Text>
-            <div className="flex flex-col gap-3">
-              <div className="flex items-start gap-1">
-                <Icon name={IconNames.MAP_PIN} width={13} className="mt-[2px]" />
-                <Text variant="text-body-900">
-                  {formatOptionsList(getCountriesOptions(t), organization?.hq_country ?? [])}
-                </Text>
-              </div>
+        </section>
+        <div className="mt-8">
+          <Button onClick={showEditOrgModal}>{t("Edit Profile")}</Button>
+        </div>
+      </Container>
+      <Container className="mb-6">
+        <div className="tranform translate-y-[-70px]">
+          <Text variant="text-heading-2000" className="mb-3">
+            {organization?.name}
+          </Text>
+          <div className="flex flex-col gap-3">
+            <div className="flex items-center gap-1">
+              <Icon name={IconNames.MAP_PIN} width={13} height={18} />
               <Text variant="text-body-900">
-                {formatOptionsList(getOrganisationTypeOptions(t), organization?.type!) || ""}
+                {formatOptionsList(getCountriesOptions(t), organization?.hq_country ?? [])}
               </Text>
-              <Text variant="text-body-900">{organization?.description}</Text>
             </div>
+            <Text variant="text-body-900">
+              {formatOptionsList(getOrganisationTypeOptions(t), organization?.type!) || ""}
+            </Text>
+            <Text variant="text-body-400">{organization?.description}</Text>
           </div>
-          <div className="flex translate-y-[-30px] transform gap-6">
-            <IconSocial name={IconNames.SOCIAL_FACEBOOK} url={organization?.facebook_url} />
-            <IconSocial name={IconNames.SOCIAL_INSTAGRAM} url={organization?.instagram_url} />
-            <IconSocial name={IconNames.SOCIAL_LINKEDIN} url={organization?.linkedin_url} />
-            <IconSocial name={IconNames.SOCIAL_TWITTER} url={organization?.twitter_url} />
-            <IconSocial name={IconNames.EARTH} url={organization?.web_url} />
-          </div>
-        </section>
-        <div className="mt-8">
-          <Button onClick={showEditOrgModal}>{t("Edit Profile")}</Button>
+        </div>
+        <div className="flex translate-y-[-30px] transform gap-6">
+          <IconSocial name={IconNames.SOCIAL_FACEBOOK} url={organization?.facebook_url} />
+          <IconSocial name={IconNames.SOCIAL_INSTAGRAM} url={organization?.instagram_url} />
+          <IconSocial name={IconNames.SOCIAL_LINKEDIN} url={organization?.linkedin_url} />
+          <IconSocial name={IconNames.SOCIAL_TWITTER} url={organization?.twitter_url} />
+          <IconSocial name={IconNames.EARTH} url={organization?.web_url} />
         </div>
       </Container>
     </div>
diff --git a/src/pages/organization/[id]/components/financial/FinancialInformation.tsx b/src/pages/organization/[id]/components/financial/FinancialInformation.tsx
index 57dda62e9..e08d43313 100644
--- a/src/pages/organization/[id]/components/financial/FinancialInformation.tsx
+++ b/src/pages/organization/[id]/components/financial/FinancialInformation.tsx
@@ -22,7 +22,7 @@ const FinancialInformation = ({ organization }: FinancialInformationProps) => {
   ];
 
   return (
-    <section className="my-10 bg-neutral-150 p-8">
+    <section className="my-10 rounded-lg bg-neutral-150 p-8">
       <List
         className="flex flex-col gap-3"
         items={budgetRows}
diff --git a/src/pages/organization/[id]/components/overview/About.tsx b/src/pages/organization/[id]/components/overview/About.tsx
index f5b6cce55..89678f4ff 100644
--- a/src/pages/organization/[id]/components/overview/About.tsx
+++ b/src/pages/organization/[id]/components/overview/About.tsx
@@ -12,12 +12,12 @@ const About = ({ organization }: AboutProps) => {
   const t = useT();
 
   return (
-    <section className="my-15 bg-neutral-150 p-8">
+    <section className="my-15 rounded-lg bg-neutral-150 p-8">
       <div className="flex flex-col gap-4">
         <Text variant="text-heading-300">{t("About")}</Text>
         <Text variant="text-body-800">{organization?.description}</Text>
       </div>
-      <div className="mt-10 flex flex-col gap-3">
+      <div className="mt-10 flex flex-col gap-4">
         <TextRow name={t("Website:")} value={organization?.web_url} nameClassName="w-1/3" />
         <TextRow
           name={t("Headquarters:")}
diff --git a/src/pages/organization/[id]/components/overview/PastCommunityExperience.tsx b/src/pages/organization/[id]/components/overview/PastCommunityExperience.tsx
index c76fdf6ba..5f72301c8 100644
--- a/src/pages/organization/[id]/components/overview/PastCommunityExperience.tsx
+++ b/src/pages/organization/[id]/components/overview/PastCommunityExperience.tsx
@@ -18,9 +18,9 @@ const PastCommunityExperience = ({ organization }: PastCommunityExperienceProps)
   const t = useT();
 
   return (
-    <section className="my-10 bg-neutral-150 p-8">
+    <section className="my-10 rounded-lg bg-neutral-150 p-8">
       <Text variant="text-heading-300">{t("Social Impact")}</Text>
-      <div className="mt-10 flex flex-col gap-3">
+      <div className="mt-10 flex flex-col gap-4">
         <TextRow
           name={t("Engagement: Farmers")}
           value={formatOptionsList(getFarmersEngagementStrategyOptions(t), organization?.engagement_farmers)}
diff --git a/src/pages/organization/[id]/components/overview/TeamAndResources.tsx b/src/pages/organization/[id]/components/overview/TeamAndResources.tsx
index 89a4a91e3..37d93a191 100644
--- a/src/pages/organization/[id]/components/overview/TeamAndResources.tsx
+++ b/src/pages/organization/[id]/components/overview/TeamAndResources.tsx
@@ -3,6 +3,7 @@ import React from "react";
 import { When } from "react-if";
 
 import Table from "@/components/elements/Table/Table";
+import { VARIANT_TABLE_BORDER_ALL } from "@/components/elements/Table/TableVariants";
 import Text from "@/components/elements/Text/Text";
 import { V2OrganisationRead } from "@/generated/apiSchemas";
 
@@ -14,7 +15,7 @@ const TeamAndResources = ({ organization }: TeamAndResourcesProps) => {
   const t = useT();
 
   return (
-    <section className="my-10 bg-neutral-150 p-8">
+    <section className="my-10 rounded-lg bg-neutral-150 p-8">
       <Text variant="text-heading-300">{t("Team and Resources")}</Text>
       <div className="mt-10 flex flex-col gap-12">
         <When condition={organization?.leadership_team && organization?.leadership_team.length > 0}>
@@ -57,9 +58,11 @@ const TeamAndResources = ({ organization }: TeamAndResourcesProps) => {
               role: member.position,
               gender: member.gender
             }))}
+            variant={VARIANT_TABLE_BORDER_ALL}
           />
         </When>
         <Table
+          variant={VARIANT_TABLE_BORDER_ALL}
           columns={[
             {
               accessorKey: "label",
diff --git a/src/pages/organization/[id]/components/projects/ProjectsTabContent.tsx b/src/pages/organization/[id]/components/projects/ProjectsTabContent.tsx
index 417d7c2f8..05152dedd 100644
--- a/src/pages/organization/[id]/components/projects/ProjectsTabContent.tsx
+++ b/src/pages/organization/[id]/components/projects/ProjectsTabContent.tsx
@@ -6,6 +6,7 @@ import Button from "@/components/elements/Button/Button";
 import EmptyState from "@/components/elements/EmptyState/EmptyState";
 import StatusPill from "@/components/elements/StatusPill/StatusPill";
 import Table from "@/components/elements/Table/Table";
+import { VARIANT_TABLE_BORDER_ALL } from "@/components/elements/Table/TableVariants";
 import Text from "@/components/elements/Text/Text";
 import { getActionCardStatusMapper } from "@/components/extensive/ActionTracker/ActionTrackerCard";
 import { IconNames } from "@/components/extensive/Icon/Icon";
@@ -20,7 +21,7 @@ const ProjectsTabContent = () => {
   const { data: projectsData } = useGetV2MyProjects<{ data: GetV2MyProjectsResponse }>({});
 
   return (
-    <Container className="py-15 px-8">
+    <Container className="px-8 py-15">
       <If condition={(projectsData?.data?.length ?? 0) > 0}>
         <Then>
           <div className="mb-8 flex">
@@ -33,6 +34,7 @@ const ProjectsTabContent = () => {
           </div>
           <div className="rounded-xl p-8 shadow">
             <Table<GetV2MyProjectsResponse[0]>
+              variant={VARIANT_TABLE_BORDER_ALL}
               columns={[
                 { header: t("Title"), accessorKey: "name" },
                 {
diff --git a/src/pages/organization/[id]/components/team/TeamTabContent.tsx b/src/pages/organization/[id]/components/team/TeamTabContent.tsx
index 1039942cc..67acc352e 100644
--- a/src/pages/organization/[id]/components/team/TeamTabContent.tsx
+++ b/src/pages/organization/[id]/components/team/TeamTabContent.tsx
@@ -104,7 +104,7 @@ const TeamTabContent = () => {
         <Text variant="text-heading-2000">{t("Meet the Team")}</Text>
 
         <When condition={!!approvedUsers?.data.length}>
-          <div className="mt-12 bg-neutral-150 py-8 px-14">
+          <div className="mt-12 rounded-lg bg-neutral-150 py-8 px-14">
             <Text variant="text-heading-200">
               {t("Your Organizations' TerraMatch Users ({n})", { n: approvedUsers?.data.length })}
             </Text>
@@ -116,7 +116,7 @@ const TeamTabContent = () => {
           </div>
         </When>
         <When condition={!!pendingUsers?.data.length}>
-          <div className="mt-12 bg-neutral-150 py-8 px-14">
+          <div className="mt-12 rounded-lg bg-neutral-150 py-8 px-14">
             <Text variant="text-heading-200">
               {t("Requests to Join Organization ({n})", { n: pendingUsers?.data.length })}
             </Text>
diff --git a/src/pages/organization/[id]/index.page.tsx b/src/pages/organization/[id]/index.page.tsx
index a186183d0..ceebfbc15 100644
--- a/src/pages/organization/[id]/index.page.tsx
+++ b/src/pages/organization/[id]/index.page.tsx
@@ -3,6 +3,7 @@ import { useRouter } from "next/router";
 
 import SecondaryTabs from "@/components/elements/Tabs/Secondary/SecondaryTabs";
 import HeroBanner from "@/components/extensive/Banner/Hero/HeroBanner";
+import PageFooter from "@/components/extensive/PageElements/Footer/PageFooter";
 import LoadingContainer from "@/components/generic/Loading/LoadingContainer";
 import { useGetV2OrganisationsUUID } from "@/generated/apiComponents";
 import { V2OrganisationRead } from "@/generated/apiSchemas";
@@ -35,7 +36,7 @@ const OrganizationPage = () => {
       />
       <OrganizationHeader organization={organizationData?.data} />
       <SecondaryTabs
-        containerClassName="max-w-4xl"
+        containerClassName="max-w-[82vw] px-10 xl:px-0 w-full"
         tabItems={[
           {
             key: "overview",
@@ -75,6 +76,7 @@ const OrganizationPage = () => {
           }
         ]}
       />
+      <PageFooter />
     </LoadingContainer>
   );
 };
diff --git a/src/pages/project/[uuid]/index.page.tsx b/src/pages/project/[uuid]/index.page.tsx
index 8036db1b8..6018fbda3 100644
--- a/src/pages/project/[uuid]/index.page.tsx
+++ b/src/pages/project/[uuid]/index.page.tsx
@@ -9,6 +9,7 @@ import SecondaryTabs from "@/components/elements/Tabs/Secondary/SecondaryTabs";
 import { IconNames } from "@/components/extensive/Icon/Icon";
 import Modal from "@/components/extensive/Modal/Modal";
 import PageBreadcrumbs from "@/components/extensive/PageElements/Breadcrumbs/PageBreadcrumbs";
+import PageFooter from "@/components/extensive/PageElements/Footer/PageFooter";
 import PageHeader from "@/components/extensive/PageElements/Header/PageHeader";
 import LoadingContainer from "@/components/generic/Loading/LoadingContainer";
 import { useModalContext } from "@/context/modal.provider";
@@ -176,8 +177,9 @@ const ProjectDetailPage = () => {
             )
           }
         ]}
-        containerClassName="max-w-7xl px-10 xl:px-0 w-full overflow-auto"
+        containerClassName="max-w-[82vw] px-10 xl:px-0 w-full"
       />
+      <PageFooter />
     </LoadingContainer>
   );
 };
diff --git a/src/pages/project/[uuid]/tabs/Details.tsx b/src/pages/project/[uuid]/tabs/Details.tsx
index 2f089e57d..1f0521a5d 100644
--- a/src/pages/project/[uuid]/tabs/Details.tsx
+++ b/src/pages/project/[uuid]/tabs/Details.tsx
@@ -211,6 +211,8 @@ const ProjectDetailTab = ({ project }: ProjectDetailsTabProps) => {
           </PageCard>
         </PageColumn>
       </PageRow>
+      <br />
+      <br />
     </PageBody>
   );
 };
diff --git a/src/pages/project/[uuid]/tabs/Gallery.tsx b/src/pages/project/[uuid]/tabs/Gallery.tsx
index bc059a9a5..a7862eef2 100644
--- a/src/pages/project/[uuid]/tabs/Gallery.tsx
+++ b/src/pages/project/[uuid]/tabs/Gallery.tsx
@@ -35,6 +35,8 @@ const GalleryTab = (props: EntityMapAndGalleryCardProps & { sharedDriveLink?: st
           </When>
         </PageColumn>
       </PageRow>
+      <br />
+      <br />
     </PageBody>
   );
 };
diff --git a/src/pages/project/[uuid]/tabs/GoalsAndProgress.tsx b/src/pages/project/[uuid]/tabs/GoalsAndProgress.tsx
index 493871d5f..c17b61aa0 100644
--- a/src/pages/project/[uuid]/tabs/GoalsAndProgress.tsx
+++ b/src/pages/project/[uuid]/tabs/GoalsAndProgress.tsx
@@ -4,6 +4,7 @@ import { Else, If, Then, When } from "react-if";
 import GoalProgressCard from "@/components/elements/Cards/GoalProgressCard/GoalProgressCard";
 import GenericField from "@/components/elements/Field/GenericField";
 import TextField from "@/components/elements/Field/TextField";
+import { VARIANT_TABLE_BORDER } from "@/components/elements/Table/TableVariants";
 import { IconNames } from "@/components/extensive/Icon/Icon";
 import PageBody from "@/components/extensive/PageElements/Body/PageBody";
 import PageCard from "@/components/extensive/PageElements/Card/PageCard";
@@ -21,28 +22,23 @@ const GoalsAndProgressTab = ({ project }: GoalsAndProgressProps) => {
   const { isPPC } = useFramework(project);
 
   return (
-    <PageBody>
+    <PageBody className="text-darkCustom">
       <PageRow>
         <PageCard title={t("Progress & Goals")}>
-          <div className="flex w-full flex-wrap gap-6">
+          <div className="flex w-full flex-wrap items-start gap-8">
             <If condition={isPPC}>
               <Then>
-                <GoalProgressCard label={t("Workday (PPC)")} value={project.workday_count} className="w-[170px]" />
+                <GoalProgressCard label={t("Workday (PPC)")} value={project.workday_count} />
               </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("Hectares Restored Goal")} value={project.total_hectares_restored_goal} />
             <GoalProgressCard
               label={t("Trees restored")}
               value={project.trees_restored_count}
@@ -56,7 +52,7 @@ const GoalsAndProgressTab = ({ project }: GoalsAndProgressProps) => {
                   value: project.regenerated_trees_count
                 }
               ]}
-              className="flex-1"
+              className="flex-1 !items-start"
             />
           </div>
         </PageCard>
@@ -85,12 +81,15 @@ const GoalsAndProgressTab = ({ project }: GoalsAndProgressProps) => {
               <TextField label={t("Year 5 Grown Cover Goal (PPC)")} value={project.year_five_crown_cover} />
             </When>
             <TextField label={t("Survival Rate (Goal)")} value={project.survival_rate} />
+            <br />
             <GenericField label={t("Tree Species")}>
-              <TreeSpeciesTable modelName="project" modelUUID={project.uuid} />
+              <TreeSpeciesTable modelName="project" modelUUID={project.uuid} variantTable={VARIANT_TABLE_BORDER} />
             </GenericField>
           </PageCard>
         </PageColumn>
       </PageRow>
+      <br />
+      <br />
     </PageBody>
   );
 };
diff --git a/src/pages/project/[uuid]/tabs/ProjectSites.tsx b/src/pages/project/[uuid]/tabs/ProjectSites.tsx
index 3ed6a7e67..17f34b003 100644
--- a/src/pages/project/[uuid]/tabs/ProjectSites.tsx
+++ b/src/pages/project/[uuid]/tabs/ProjectSites.tsx
@@ -54,12 +54,7 @@ const ProjectSitesTab = ({ project }: ProjectNurseriesTabProps) => {
                 />
               </Then>
               <Else>
-                <PageCard
-                  title={t("Project Sites")}
-                  subtitle={t(
-                    "This table displays all the sites associated with this project. You can use it to keep track of your site approvals."
-                  )}
-                >
+                <PageCard title={t("Project Sites")}>
                   <SitesTable project={project} />
                 </PageCard>
               </Else>
@@ -67,6 +62,8 @@ const ProjectSitesTab = ({ project }: ProjectNurseriesTabProps) => {
           </LoadingContainer>
         </PageColumn>
       </PageRow>
+      <br />
+      <br />
     </PageBody>
   );
 };
diff --git a/src/pages/project/[uuid]/tabs/ReportingTasks.tsx b/src/pages/project/[uuid]/tabs/ReportingTasks.tsx
index f2f56c293..0e2175f88 100644
--- a/src/pages/project/[uuid]/tabs/ReportingTasks.tsx
+++ b/src/pages/project/[uuid]/tabs/ReportingTasks.tsx
@@ -54,6 +54,8 @@ const ReportingTasksTab = (props: ReportingTasksProps) => {
           </LoadingContainer>
         </PageColumn>
       </PageRow>
+      <br />
+      <br />
     </PageBody>
   );
 };
diff --git a/src/pages/site/[uuid]/index.page.tsx b/src/pages/site/[uuid]/index.page.tsx
index 6debfea7c..262073894 100644
--- a/src/pages/site/[uuid]/index.page.tsx
+++ b/src/pages/site/[uuid]/index.page.tsx
@@ -10,6 +10,7 @@ import { getActionCardStatusMapper } from "@/components/extensive/ActionTracker/
 import { IconNames } from "@/components/extensive/Icon/Icon";
 import Modal from "@/components/extensive/Modal/Modal";
 import PageBreadcrumbs from "@/components/extensive/PageElements/Breadcrumbs/PageBreadcrumbs";
+import PageFooter from "@/components/extensive/PageElements/Footer/PageFooter";
 import PageHeader from "@/components/extensive/PageElements/Header/PageHeader";
 import LoadingContainer from "@/components/generic/Loading/LoadingContainer";
 import { useModalContext } from "@/context/modal.provider";
@@ -148,8 +149,9 @@ const SiteDetailPage = () => {
             body: <SiteCompletedReportsTab siteUUID={site.uuid} />
           }
         ]}
-        containerClassName="max-w-7xl px-10 xl:px-0 w-full overflow-auto"
+        containerClassName="max-w-[82vw] px-10 xl:px-0 w-full"
       />
+      <PageFooter />
     </LoadingContainer>
   );
 };
diff --git a/src/pages/site/[uuid]/tabs/CompletedReports.tsx b/src/pages/site/[uuid]/tabs/CompletedReports.tsx
index 02f1011b8..13a0a792e 100644
--- a/src/pages/site/[uuid]/tabs/CompletedReports.tsx
+++ b/src/pages/site/[uuid]/tabs/CompletedReports.tsx
@@ -55,6 +55,8 @@ const SiteCompletedReportsTab = ({ siteUUID }: SiteCompletedReportsTabProps) =>
           </LoadingContainer>
         </PageColumn>
       </PageRow>
+      <br />
+      <br />
     </PageBody>
   );
 };
diff --git a/src/pages/site/[uuid]/tabs/Details.tsx b/src/pages/site/[uuid]/tabs/Details.tsx
index bec51d96f..538dad327 100644
--- a/src/pages/site/[uuid]/tabs/Details.tsx
+++ b/src/pages/site/[uuid]/tabs/Details.tsx
@@ -91,6 +91,8 @@ const SiteDetailTab = ({ site }: SiteDetailsTabProps) => {
           </When>
         </PageColumn>
       </PageRow>
+      <br />
+      <br />
     </PageBody>
   );
 };
diff --git a/src/pages/site/[uuid]/tabs/GoalsAndProgress.tsx b/src/pages/site/[uuid]/tabs/GoalsAndProgress.tsx
index 19eefcf58..ce590c7d3 100644
--- a/src/pages/site/[uuid]/tabs/GoalsAndProgress.tsx
+++ b/src/pages/site/[uuid]/tabs/GoalsAndProgress.tsx
@@ -4,6 +4,7 @@ import { When } from "react-if";
 import GoalProgressCard from "@/components/elements/Cards/GoalProgressCard/GoalProgressCard";
 import GenericField from "@/components/elements/Field/GenericField";
 import TextField from "@/components/elements/Field/TextField";
+import { VARIANT_TABLE_BORDER } from "@/components/elements/Table/TableVariants";
 import { IconNames } from "@/components/extensive/Icon/Icon";
 import PageBody from "@/components/extensive/PageElements/Body/PageBody";
 import PageCard from "@/components/extensive/PageElements/Card/PageCard";
@@ -24,12 +25,16 @@ const GoalsAndProgressTab = ({ site }: GoalsAndProgressTabProps) => {
     <PageBody>
       <PageRow>
         <PageCard title={t("Progress & Goals")}>
-          <div className="flex w-full flex-wrap gap-6">
+          <div className="flex w-full flex-wrap items-start gap-8">
             <When condition={isPPC}>
               <GoalProgressCard label={t("Workday Count (PPC)")} value={site.workday_count} className="w-[170px]" />
             </When>
+            <GoalProgressCard label={t("Hectares Restored Goal")} value={site.total_hectares_restored_goal} />
+
             <GoalProgressCard
               label={t("Trees restored")}
+              value={site.trees_restored_count}
+              limit={site.trees_grown_goal}
               hasProgress={false}
               items={[
                 { iconName: IconNames.TREE_CIRCLE, label: t("Trees Planted"), value: site.trees_planted_count },
@@ -77,11 +82,13 @@ const GoalsAndProgressTab = ({ site }: GoalsAndProgressTabProps) => {
               <TextField label={t("Year 5 Grown Cover Goal (PPC)")} value={site.aim_year_five_crown_cover} />
             </When>
             <GenericField label={t("Tree Species")}>
-              <TreeSpeciesTable modelName="site" modelUUID={site.uuid} />
+              <TreeSpeciesTable modelName="site" modelUUID={site.uuid} variantTable={VARIANT_TABLE_BORDER} />
             </GenericField>
           </PageCard>
         </PageColumn>
       </PageRow>
+      <br />
+      <br />
     </PageBody>
   );
 };

From 17b2a60b4a8d4d8b29c6b52a567f596929a500d2 Mon Sep 17 00:00:00 2001
From: Dotty <dottykurmi123@gmail.com>
Date: Fri, 7 Jun 2024 13:26:57 -0400
Subject: [PATCH 07/17] fix comment PR

---
 src/pages/auth/signup/components/usePasswordStrength.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/pages/auth/signup/components/usePasswordStrength.tsx b/src/pages/auth/signup/components/usePasswordStrength.tsx
index 76628d154..e3f59b0dd 100644
--- a/src/pages/auth/signup/components/usePasswordStrength.tsx
+++ b/src/pages/auth/signup/components/usePasswordStrength.tsx
@@ -35,9 +35,9 @@ const usePasswordStrength = (props: UsePasswordStrengthProps): UsePasswordStreng
 
   useEffect(() => {
     const hasCorrectLength = password.length >= 8;
-    const hasUppercase = (password.match(/[A-Z]/g) || []).length > 0;
-    const hasLowercase = (password.match(/[a-z]/g) || []).length > 0;
-    const hasNumber = (password.match(/[0-9]/g) || []).length > 0;
+    const hasUppercase = (password.match(/[A-Z]/g) ?? []).length > 0;
+    const hasLowercase = (password.match(/[a-z]/g) ?? []).length > 0;
+    const hasNumber = (password.match(/[0-9]/g) ?? []).length > 0;
 
     const _validation = [hasUppercase, hasLowercase, hasNumber, hasCorrectLength];
 

From dc75529cfb925737c24d082e3653bdeb42eea59a Mon Sep 17 00:00:00 2001
From: Dotty <dottykurmi123@gmail.com>
Date: Fri, 7 Jun 2024 13:44:08 -0400
Subject: [PATCH 08/17] solved comments PR

---
 src/components/extensive/Modal/ModalWithClose.tsx | 4 ++--
 src/components/extensive/Modal/ModalWithLogo.tsx  | 2 +-
 src/components/extensive/Modal/ModalWithMap.tsx   | 2 +-
 3 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/components/extensive/Modal/ModalWithClose.tsx b/src/components/extensive/Modal/ModalWithClose.tsx
index 1be72b9cf..64216d366 100644
--- a/src/components/extensive/Modal/ModalWithClose.tsx
+++ b/src/components/extensive/Modal/ModalWithClose.tsx
@@ -39,9 +39,9 @@ const ModalCloseLogo: FC<ModalCloseProps> = ({
       <When condition={!!iconProps}>
         <Icon
           {...iconProps!}
-          width={iconProps?.width || 40}
+          width={iconProps?.width ?? 40}
           className={twMerge("mb-8", iconProps?.className)}
-          style={{ minHeight: iconProps?.height || iconProps?.width || 40 }}
+          style={{ minHeight: iconProps?.height ?? iconProps?.width ?? 40 }}
         />
       </When>
 
diff --git a/src/components/extensive/Modal/ModalWithLogo.tsx b/src/components/extensive/Modal/ModalWithLogo.tsx
index 77af0e812..58caa572e 100644
--- a/src/components/extensive/Modal/ModalWithLogo.tsx
+++ b/src/components/extensive/Modal/ModalWithLogo.tsx
@@ -47,7 +47,7 @@ const ModalWithLogo: FC<ModalWithLogoProps> = ({
         <div className="flex items-center">
           <When condition={status}>
             <Status
-              status={(status ? status : "draft") as StatusEnum}
+              status={(status ?? "draft") as StatusEnum}
               className="rounded px-2 py-[2px]"
               textVariant="text-14-bold"
             />
diff --git a/src/components/extensive/Modal/ModalWithMap.tsx b/src/components/extensive/Modal/ModalWithMap.tsx
index 7f9930760..433927745 100644
--- a/src/components/extensive/Modal/ModalWithMap.tsx
+++ b/src/components/extensive/Modal/ModalWithMap.tsx
@@ -48,7 +48,7 @@ const ModalWithMap: FC<ModalWithMapProps> = ({
             <Icon name={IconNames.WRI_LOGO} width={108} height={30} className="min-w-[108px]" />
             <div className="flex items-center">
               <When condition={status}>
-                <Status status={(status ? status : "draft") as StatusEnum} />
+                <Status status={(status ?? "draft") as StatusEnum} />
               </When>
             </div>
           </header>

From d2067fe8a0eeed931dce43e7d60306b27cef0e35 Mon Sep 17 00:00:00 2001
From: Dotty <dottykurmi123@gmail.com>
Date: Fri, 7 Jun 2024 13:51:40 -0400
Subject: [PATCH 09/17] update storybook snapshots

---
 .../GoalProgressCard.stories.storyshot        |  4 +-
 .../GoalProgressCardItem.stories.storyshot    |  2 +-
 .../Commentary.stories.storyshot              | 16 +---
 .../AutoCompleteInput.stories.storyshot       |  1 +
 .../__snapshots__/Input.stories.storyshot     |  3 +
 .../InputTable.stories.storyshot              |  3 +
 .../TreeSpeciesInput.stories.storyshot        | 23 +++---
 .../__snapshots__/TextArea.stories.storyshot  |  7 +-
 .../ModalConfirm.stories.storyshot            | 12 ++-
 .../ModalSubmit.stories.storyshot             | 82 ++++++-------------
 .../ModalWithClose.stories.storyshot          |  9 ++
 .../ModalWithLogo.stories.storyshot           | 16 +---
 .../WizardForm.stories.storyshot              |  2 +
 .../useGetCustomFormSteps.stories.storyshot   |  2 +
 14 files changed, 80 insertions(+), 102 deletions(-)

diff --git a/src/components/elements/Cards/GoalProgressCard/__snapshots__/GoalProgressCard.stories.storyshot b/src/components/elements/Cards/GoalProgressCard/__snapshots__/GoalProgressCard.stories.storyshot
index 9062439f5..2d1120327 100644
--- a/src/components/elements/Cards/GoalProgressCard/__snapshots__/GoalProgressCard.stories.storyshot
+++ b/src/components/elements/Cards/GoalProgressCard/__snapshots__/GoalProgressCard.stories.storyshot
@@ -141,7 +141,7 @@ exports[`Storyshots Components/Elements/Cards/GoalProgressCard/Card Progress And
           className="text-14-bold"
           data-testid="txt"
         >
-          1332
+          1,332
         </p>
       </div>
       <div
@@ -165,7 +165,7 @@ exports[`Storyshots Components/Elements/Cards/GoalProgressCard/Card Progress And
           className="text-14-bold"
           data-testid="txt"
         >
-          530000
+          530,000
         </p>
       </div>
     </div>
diff --git a/src/components/elements/Cards/GoalProgressCard/__snapshots__/GoalProgressCardItem.stories.storyshot b/src/components/elements/Cards/GoalProgressCard/__snapshots__/GoalProgressCardItem.stories.storyshot
index b1003597b..8a190d0a7 100644
--- a/src/components/elements/Cards/GoalProgressCard/__snapshots__/GoalProgressCardItem.stories.storyshot
+++ b/src/components/elements/Cards/GoalProgressCard/__snapshots__/GoalProgressCardItem.stories.storyshot
@@ -22,7 +22,7 @@ exports[`Storyshots Components/Elements/Cards/GoalProgressCard/Item Default 1`]
     className="text-14-bold"
     data-testid="txt"
   >
-    530000
+    530,000
   </p>
 </div>
 `;
diff --git a/src/components/elements/Commentary/__snapshots__/Commentary.stories.storyshot b/src/components/elements/Commentary/__snapshots__/Commentary.stories.storyshot
index af2a65745..b9c742abb 100644
--- a/src/components/elements/Commentary/__snapshots__/Commentary.stories.storyshot
+++ b/src/components/elements/Commentary/__snapshots__/Commentary.stories.storyshot
@@ -69,9 +69,7 @@ exports[`Storyshots Components/Elements/Commentary Default 1`] = `
         <p
           className="text-grey-700 text-14-light"
           data-testid="txt"
-        >
-          img-attachment.jpeg
-        </p>
+        />
       </div>
       <div
         className="rounded-xl bg-neutral-150 px-2 py-1"
@@ -79,9 +77,7 @@ exports[`Storyshots Components/Elements/Commentary Default 1`] = `
         <p
           className="text-grey-700 text-14-light"
           data-testid="txt"
-        >
-          img-attachment-with-large-name.jpeg
-        </p>
+        />
       </div>
       <div
         className="rounded-xl bg-neutral-150 px-2 py-1"
@@ -89,9 +85,7 @@ exports[`Storyshots Components/Elements/Commentary Default 1`] = `
         <p
           className="text-grey-700 text-14-light"
           data-testid="txt"
-        >
-          img-attachment.jpeg
-        </p>
+        />
       </div>
       <div
         className="rounded-xl bg-neutral-150 px-2 py-1"
@@ -99,9 +93,7 @@ exports[`Storyshots Components/Elements/Commentary Default 1`] = `
         <p
           className="text-grey-700 text-14-light"
           data-testid="txt"
-        >
-          img-attachment.jpeg
-        </p>
+        />
       </div>
     </div>
   </div>
diff --git a/src/components/elements/Inputs/AutoCompleteInput/__snapshots__/AutoCompleteInput.stories.storyshot b/src/components/elements/Inputs/AutoCompleteInput/__snapshots__/AutoCompleteInput.stories.storyshot
index 899a3691e..b97a7c60b 100644
--- a/src/components/elements/Inputs/AutoCompleteInput/__snapshots__/AutoCompleteInput.stories.storyshot
+++ b/src/components/elements/Inputs/AutoCompleteInput/__snapshots__/AutoCompleteInput.stories.storyshot
@@ -35,6 +35,7 @@ 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=":rc:"
+        onChange={[Function]}
         onChangeCapture={[Function]}
         onClick={[Function]}
         onKeyUp={[Function]}
diff --git a/src/components/elements/Inputs/Input/__snapshots__/Input.stories.storyshot b/src/components/elements/Inputs/Input/__snapshots__/Input.stories.storyshot
index 68139c31d..105f42cfc 100644
--- a/src/components/elements/Inputs/Input/__snapshots__/Input.stories.storyshot
+++ b/src/components/elements/Inputs/Input/__snapshots__/Input.stories.storyshot
@@ -29,6 +29,7 @@ exports[`Storyshots Components/Elements/Inputs/Input Default 1`] = `
       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"
       id=":r16:"
+      onChange={[Function]}
       placeholder="Input placeholder"
       type="text"
     />
@@ -66,6 +67,7 @@ exports[`Storyshots Components/Elements/Inputs/Input Disabled 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"
       disabled={true}
       id=":r18:"
+      onChange={[Function]}
       placeholder="Input placeholder"
       type="text"
     />
@@ -103,6 +105,7 @@ exports[`Storyshots Components/Elements/Inputs/Input Error 1`] = `
       aria-invalid={true}
       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-error focus:border-error"
       id=":r17:"
+      onChange={[Function]}
       placeholder="Input placeholder"
       type="text"
     />
diff --git a/src/components/elements/Inputs/InputTable/__snapshots__/InputTable.stories.storyshot b/src/components/elements/Inputs/InputTable/__snapshots__/InputTable.stories.storyshot
index bb841dc96..f440c8604 100644
--- a/src/components/elements/Inputs/InputTable/__snapshots__/InputTable.stories.storyshot
+++ b/src/components/elements/Inputs/InputTable/__snapshots__/InputTable.stories.storyshot
@@ -62,6 +62,7 @@ exports[`Storyshots Components/Elements/Inputs/InputTable Default 1`] = `
                   className="text-heading-100 text-center 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"
                   id=":r19:"
                   name="full-time-jobs"
+                  onChange={[Function]}
                   onKeyDown={[Function]}
                   placeholder="Enter a value"
                   type="number"
@@ -97,6 +98,7 @@ exports[`Storyshots Components/Elements/Inputs/InputTable Default 1`] = `
                   className="text-heading-100 text-center 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"
                   id=":r1a:"
                   name="part-time-jobs"
+                  onChange={[Function]}
                   onKeyDown={[Function]}
                   placeholder="Enter a value"
                   type="number"
@@ -132,6 +134,7 @@ exports[`Storyshots Components/Elements/Inputs/InputTable Default 1`] = `
                   className="text-heading-100 text-center 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"
                   id=":r1b:"
                   name="women-employees"
+                  onChange={[Function]}
                   onKeyDown={[Function]}
                   placeholder="Enter a value"
                   type="number"
diff --git a/src/components/elements/Inputs/TreeSpeciesInput/__snapshots__/TreeSpeciesInput.stories.storyshot b/src/components/elements/Inputs/TreeSpeciesInput/__snapshots__/TreeSpeciesInput.stories.storyshot
index b6fd57fc7..d264ad7ec 100644
--- a/src/components/elements/Inputs/TreeSpeciesInput/__snapshots__/TreeSpeciesInput.stories.storyshot
+++ b/src/components/elements/Inputs/TreeSpeciesInput/__snapshots__/TreeSpeciesInput.stories.storyshot
@@ -7,7 +7,7 @@ exports[`Storyshots Components/Elements/Inputs/TreeSpeciesInput Default 1`] = `
   <label
     className="mr-2 inline uppercase text-bold-body-300"
     data-testid="txt"
-    htmlFor=":r2b:"
+    htmlFor=":r2c:"
   >
     Tree Species Grown *
   </label>
@@ -19,7 +19,7 @@ exports[`Storyshots Components/Elements/Inputs/TreeSpeciesInput Default 1`] = `
       }
     }
     data-testid="txt"
-    id=":r2b:-description"
+    id=":r2c:-description"
   />
   <div>
     <div
@@ -47,12 +47,13 @@ exports[`Storyshots Components/Elements/Inputs/TreeSpeciesInput Default 1`] = `
             className="relative"
           >
             <input
-              aria-describedby=":r2c:-description"
+              aria-describedby=":r2d:-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=":r2c:"
+              id=":r2d:"
               name="name"
+              onChange={[Function]}
               onKeyDownCapture={[Function]}
               placeholder="Species Name"
               type="text"
@@ -103,7 +104,7 @@ exports[`Storyshots Components/Elements/Inputs/TreeSpeciesInput With Number 1`]
   <label
     className="mr-2 inline uppercase text-bold-body-300"
     data-testid="txt"
-    htmlFor=":r2d:"
+    htmlFor=":r2e:"
   >
     Tree Species Grown *
   </label>
@@ -115,7 +116,7 @@ exports[`Storyshots Components/Elements/Inputs/TreeSpeciesInput With Number 1`]
       }
     }
     data-testid="txt"
-    id=":r2d:-description"
+    id=":r2e:-description"
   />
   <div>
     <div
@@ -149,12 +150,13 @@ exports[`Storyshots Components/Elements/Inputs/TreeSpeciesInput With Number 1`]
             className="relative"
           >
             <input
-              aria-describedby=":r2e:-description"
+              aria-describedby=":r2f:-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=":r2e:"
+              id=":r2f:"
               name="name"
+              onChange={[Function]}
               onKeyDownCapture={[Function]}
               placeholder="Species Name"
               type="text"
@@ -168,12 +170,13 @@ exports[`Storyshots Components/Elements/Inputs/TreeSpeciesInput With Number 1`]
             className="relative"
           >
             <input
-              aria-describedby=":r2f:-description"
+              aria-describedby=":r2g:-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=":r2f:"
+              id=":r2g:"
               name="amount"
+              onChange={[Function]}
               onKeyDown={[Function]}
               onKeyDownCapture={[Function]}
               placeholder="Enter value"
diff --git a/src/components/elements/Inputs/textArea/__snapshots__/TextArea.stories.storyshot b/src/components/elements/Inputs/textArea/__snapshots__/TextArea.stories.storyshot
index ddc3dc665..03a73a5d1 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=":r2g:"
+    htmlFor=":r2b:"
   >
     Input Label 
   </label>
@@ -19,14 +19,13 @@ exports[`Storyshots Components/Elements/Inputs/TextArea Default 1`] = `
       }
     }
     data-testid="txt"
-    id=":r2g:-description"
+    id=":r2b:-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=":r2g:"
+    id=":r2b:"
     onChange={[Function]}
     placeholder="Input placeholder"
-    value=""
   />
 </div>
 `;
diff --git a/src/components/extensive/Modal/__snapshots__/ModalConfirm.stories.storyshot b/src/components/extensive/Modal/__snapshots__/ModalConfirm.stories.storyshot
index 67b63b4a8..90ff077d6 100644
--- a/src/components/extensive/Modal/__snapshots__/ModalConfirm.stories.storyshot
+++ b/src/components/extensive/Modal/__snapshots__/ModalConfirm.stories.storyshot
@@ -36,11 +36,15 @@ exports[`Storyshots Components/Extensive/Modal/ModalConfirm Default 1`] = `
         />
       </div>
       <div
-        className="text-right text-xs text-grey-500"
+        className="display-grid"
       >
-        0
-        /255 
-        characters
+        <div
+          className="text-right text-xs text-grey-500"
+        >
+          0
+          /255 
+          characters
+        </div>
       </div>
     </div>
     <div
diff --git a/src/components/extensive/Modal/__snapshots__/ModalSubmit.stories.storyshot b/src/components/extensive/Modal/__snapshots__/ModalSubmit.stories.storyshot
index c431d7a91..1904567b5 100644
--- a/src/components/extensive/Modal/__snapshots__/ModalSubmit.stories.storyshot
+++ b/src/components/extensive/Modal/__snapshots__/ModalSubmit.stories.storyshot
@@ -95,22 +95,12 @@ exports[`Storyshots Components/Extensive/Modal/ModalSubmit Default 1`] = `
             className="flex flex-1 items-center justify-center"
           >
             <div
-              className="flex items-center justify-center rounded-xl py-1 px-[6px] bg-secondary-200"
+              className="flex items-center justify-center rounded-xl py-1 px-[6px]"
             >
               <p
-                className="flex w-fit items-center justify-center gap-[6px] text-center text-green-500 text-12-semibold"
+                className="flex w-fit items-center justify-center gap-[6px] text-center undefined text-12-semibold"
                 data-testid="txt"
-              >
-                <div
-                  style={
-                    Object {
-                      "height": undefined,
-                      "width": 24,
-                    }
-                  }
-                />
-                Approved
-              </p>
+              />
             </div>
           </div>
           <div
@@ -139,14 +129,12 @@ exports[`Storyshots Components/Extensive/Modal/ModalSubmit Default 1`] = `
             className="flex flex-1 items-center justify-center"
           >
             <div
-              className="flex items-center justify-center rounded-xl py-1 px-[6px] bg-tertiary-50"
+              className="flex items-center justify-center rounded-xl py-1 px-[6px]"
             >
               <p
-                className="flex w-fit items-center justify-center gap-[6px] text-center text-tertiary-600 text-12-semibold"
+                className="flex w-fit items-center justify-center gap-[6px] text-center undefined text-12-semibold"
                 data-testid="txt"
-              >
-                Needs More Information
-              </p>
+              />
             </div>
           </div>
           <div
@@ -175,14 +163,12 @@ exports[`Storyshots Components/Extensive/Modal/ModalSubmit Default 1`] = `
             className="flex flex-1 items-center justify-center"
           >
             <div
-              className="flex items-center justify-center rounded-xl py-1 px-[6px] bg-blue-200"
+              className="flex items-center justify-center rounded-xl py-1 px-[6px]"
             >
               <p
-                className="flex w-fit items-center justify-center gap-[6px] text-center text-blue text-12-semibold"
+                className="flex w-fit items-center justify-center gap-[6px] text-center undefined text-12-semibold"
                 data-testid="txt"
-              >
-                Submitted
-              </p>
+              />
             </div>
           </div>
           <div
@@ -211,22 +197,12 @@ exports[`Storyshots Components/Extensive/Modal/ModalSubmit Default 1`] = `
             className="flex flex-1 items-center justify-center"
           >
             <div
-              className="flex items-center justify-center rounded-xl py-1 px-[6px] bg-secondary-200"
+              className="flex items-center justify-center rounded-xl py-1 px-[6px]"
             >
               <p
-                className="flex w-fit items-center justify-center gap-[6px] text-center text-green-500 text-12-semibold"
+                className="flex w-fit items-center justify-center gap-[6px] text-center undefined text-12-semibold"
                 data-testid="txt"
-              >
-                <div
-                  style={
-                    Object {
-                      "height": undefined,
-                      "width": 24,
-                    }
-                  }
-                />
-                Approved
-              </p>
+              />
             </div>
           </div>
           <div
@@ -255,14 +231,12 @@ exports[`Storyshots Components/Extensive/Modal/ModalSubmit Default 1`] = `
             className="flex flex-1 items-center justify-center"
           >
             <div
-              className="flex items-center justify-center rounded-xl py-1 px-[6px] bg-blue-200"
+              className="flex items-center justify-center rounded-xl py-1 px-[6px]"
             >
               <p
-                className="flex w-fit items-center justify-center gap-[6px] text-center text-blue text-12-semibold"
+                className="flex w-fit items-center justify-center gap-[6px] text-center undefined text-12-semibold"
                 data-testid="txt"
-              >
-                Submitted
-              </p>
+              />
             </div>
           </div>
           <div
@@ -291,14 +265,12 @@ exports[`Storyshots Components/Extensive/Modal/ModalSubmit Default 1`] = `
             className="flex flex-1 items-center justify-center"
           >
             <div
-              className="flex items-center justify-center rounded-xl py-1 px-[6px] bg-blue-200"
+              className="flex items-center justify-center rounded-xl py-1 px-[6px]"
             >
               <p
-                className="flex w-fit items-center justify-center gap-[6px] text-center text-blue text-12-semibold"
+                className="flex w-fit items-center justify-center gap-[6px] text-center undefined text-12-semibold"
                 data-testid="txt"
-              >
-                Submitted
-              </p>
+              />
             </div>
           </div>
           <div
@@ -327,14 +299,12 @@ exports[`Storyshots Components/Extensive/Modal/ModalSubmit Default 1`] = `
             className="flex flex-1 items-center justify-center"
           >
             <div
-              className="flex items-center justify-center rounded-xl py-1 px-[6px] bg-blue-200"
+              className="flex items-center justify-center rounded-xl py-1 px-[6px]"
             >
               <p
-                className="flex w-fit items-center justify-center gap-[6px] text-center text-blue text-12-semibold"
+                className="flex w-fit items-center justify-center gap-[6px] text-center undefined text-12-semibold"
                 data-testid="txt"
-              >
-                Submitted
-              </p>
+              />
             </div>
           </div>
           <div
@@ -363,14 +333,12 @@ exports[`Storyshots Components/Extensive/Modal/ModalSubmit Default 1`] = `
             className="flex flex-1 items-center justify-center"
           >
             <div
-              className="flex items-center justify-center rounded-xl py-1 px-[6px] bg-tertiary-50"
+              className="flex items-center justify-center rounded-xl py-1 px-[6px]"
             >
               <p
-                className="flex w-fit items-center justify-center gap-[6px] text-center text-tertiary-600 text-12-semibold"
+                className="flex w-fit items-center justify-center gap-[6px] text-center undefined text-12-semibold"
                 data-testid="txt"
-              >
-                Needs More Information
-              </p>
+              />
             </div>
           </div>
           <div
@@ -389,7 +357,7 @@ exports[`Storyshots Components/Extensive/Modal/ModalSubmit Default 1`] = `
       </div>
     </div>
     <div
-      className="flex w-full justify-end gap-3 py-4 px-8"
+      className="flex w-full justify-end gap-3 px-8 py-4"
     >
       <button
         className="bg-white rounded-lg text-darkCustom-100 border border-grey-750 hover:bg-grey-900 flex items-center justify-center gap-1.5 tracking-wide w-fit-content px-8 py-3"
diff --git a/src/components/extensive/Modal/__snapshots__/ModalWithClose.stories.storyshot b/src/components/extensive/Modal/__snapshots__/ModalWithClose.stories.storyshot
index 56485c8be..e641c38ab 100644
--- a/src/components/extensive/Modal/__snapshots__/ModalWithClose.stories.storyshot
+++ b/src/components/extensive/Modal/__snapshots__/ModalWithClose.stories.storyshot
@@ -30,6 +30,15 @@ exports[`Storyshots Components/Extensive/Modal/ModalWithClose Default 1`] = `
         />
       </button>
     </div>
+    <div
+      style={
+        Object {
+          "height": undefined,
+          "minHeight": 40,
+          "width": 40,
+        }
+      }
+    />
     <p
       className="mt-2 text-center text-light-body-300 with-inner-html"
       dangerouslySetInnerHTML={
diff --git a/src/components/extensive/Modal/__snapshots__/ModalWithLogo.stories.storyshot b/src/components/extensive/Modal/__snapshots__/ModalWithLogo.stories.storyshot
index ec3e45be4..0350c7d08 100644
--- a/src/components/extensive/Modal/__snapshots__/ModalWithLogo.stories.storyshot
+++ b/src/components/extensive/Modal/__snapshots__/ModalWithLogo.stories.storyshot
@@ -298,9 +298,7 @@ exports[`Storyshots Components/Extensive/Modal/ModalWithLogo Default 1`] = `
               <p
                 className="text-grey-700 text-14-light"
                 data-testid="txt"
-              >
-                img-attachment.jpeg
-              </p>
+              />
             </div>
             <div
               className="rounded-xl bg-neutral-150 px-2 py-1"
@@ -308,9 +306,7 @@ exports[`Storyshots Components/Extensive/Modal/ModalWithLogo Default 1`] = `
               <p
                 className="text-grey-700 text-14-light"
                 data-testid="txt"
-              >
-                img-attachment-with-large-name.jpeg
-              </p>
+              />
             </div>
             <div
               className="rounded-xl bg-neutral-150 px-2 py-1"
@@ -318,9 +314,7 @@ exports[`Storyshots Components/Extensive/Modal/ModalWithLogo Default 1`] = `
               <p
                 className="text-grey-700 text-14-light"
                 data-testid="txt"
-              >
-                img-attachment.jpeg
-              </p>
+              />
             </div>
             <div
               className="rounded-xl bg-neutral-150 px-2 py-1"
@@ -328,9 +322,7 @@ exports[`Storyshots Components/Extensive/Modal/ModalWithLogo Default 1`] = `
               <p
                 className="text-grey-700 text-14-light"
                 data-testid="txt"
-              >
-                img-attachment.jpeg
-              </p>
+              />
             </div>
           </div>
         </div>
diff --git a/src/components/extensive/WizardForm/__snapshots__/WizardForm.stories.storyshot b/src/components/extensive/WizardForm/__snapshots__/WizardForm.stories.storyshot
index c17cf05be..8f3eb030f 100644
--- a/src/components/extensive/WizardForm/__snapshots__/WizardForm.stories.storyshot
+++ b/src/components/extensive/WizardForm/__snapshots__/WizardForm.stories.storyshot
@@ -777,6 +777,7 @@ exports[`Storyshots Components/Extensive/Form/Wizard Edit Form 1`] = `
                         id=":r4h:"
                         name="text_field"
                         onBlur={[Function]}
+                        onChange={[Function]}
                         onChangeCapture={[Function]}
                         placeholder="Please enter ..."
                         type="text"
@@ -807,6 +808,7 @@ exports[`Storyshots Components/Extensive/Form/Wizard Edit Form 1`] = `
                         id=":r4i:"
                         name="number_field"
                         onBlur={[Function]}
+                        onChange={[Function]}
                         onChangeCapture={[Function]}
                         onKeyDown={[Function]}
                         placeholder="Please enter ..."
diff --git a/src/hooks/useGetCustomFormSteps/__snapshots__/useGetCustomFormSteps.stories.storyshot b/src/hooks/useGetCustomFormSteps/__snapshots__/useGetCustomFormSteps.stories.storyshot
index 92f135ef9..ac78c56c0 100644
--- a/src/hooks/useGetCustomFormSteps/__snapshots__/useGetCustomFormSteps.stories.storyshot
+++ b/src/hooks/useGetCustomFormSteps/__snapshots__/useGetCustomFormSteps.stories.storyshot
@@ -372,6 +372,7 @@ exports[`Storyshots Components/Extensive/Form/Wizard With Get Form Step Hook 1`]
                         id=":r4u:"
                         name="ced1d792-2f5f-40b0-8686-86e048c98406"
                         onBlur={[Function]}
+                        onChange={[Function]}
                         onChangeCapture={[Function]}
                         type="date"
                       />
@@ -898,6 +899,7 @@ exports[`Storyshots Components/Extensive/Form/Wizard With Get Form Step Hook 1`]
                         id=":r5c:"
                         name="981edb54-739e-4971-b078-4e2a971d9ffd"
                         onBlur={[Function]}
+                        onChange={[Function]}
                         onChangeCapture={[Function]}
                         type="url"
                       />

From 40b5e6c29a6feda8ca116bb55a15e4dd708d96a5 Mon Sep 17 00:00:00 2001
From: Dotty <dottykurmi123@gmail.com>
Date: Fri, 7 Jun 2024 14:28:18 -0400
Subject: [PATCH 10/17] solved comment PR

---
 src/components/extensive/Modal/ModalAdd.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/extensive/Modal/ModalAdd.tsx b/src/components/extensive/Modal/ModalAdd.tsx
index ef2273959..13b0245c8 100644
--- a/src/components/extensive/Modal/ModalAdd.tsx
+++ b/src/components/extensive/Modal/ModalAdd.tsx
@@ -78,9 +78,9 @@ const ModalAdd: FC<ModalAddProps> = ({
         <When condition={!!iconProps}>
           <Icon
             {...iconProps!}
-            width={iconProps?.width || 40}
+            width={iconProps?.width ?? 40}
             className={twMerge("mb-8", iconProps?.className)}
-            style={{ minHeight: iconProps?.height || iconProps?.width || 40 }}
+            style={{ minHeight: iconProps?.height ?? iconProps?.width ?? 40 }}
           />
         </When>
         <div className="flex items-center justify-between">

From b87faa1fcaf507f4e7fb1b38c97203f16d4d7c96 Mon Sep 17 00:00:00 2001
From: Dotty <dottykurmi123@gmail.com>
Date: Fri, 7 Jun 2024 14:46:02 -0400
Subject: [PATCH 11/17] solved PR comment

---
 src/components/extensive/Modal/ModalApprove.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/extensive/Modal/ModalApprove.tsx b/src/components/extensive/Modal/ModalApprove.tsx
index 250e9ceee..6ee12441b 100644
--- a/src/components/extensive/Modal/ModalApprove.tsx
+++ b/src/components/extensive/Modal/ModalApprove.tsx
@@ -42,7 +42,7 @@ const ModalApprove: FC<ModalApproveProps> = ({
         <div className="flex items-center">
           <When condition={status}>
             <Status
-              status={(status ? status : "draft") as StatusEnum}
+              status={(status ?? "draft") as StatusEnum}
               className="rounded px-2 py-[2px]"
               textVariant="text-14-bold"
             />
@@ -56,9 +56,9 @@ const ModalApprove: FC<ModalApproveProps> = ({
         <When condition={!!iconProps}>
           <Icon
             {...iconProps!}
-            width={iconProps?.width || 40}
+            width={iconProps?.width ?? 40}
             className={tw("mb-8", iconProps?.className)}
-            style={{ minHeight: iconProps?.height || iconProps?.width || 40 }}
+            style={{ minHeight: iconProps?.height ?? iconProps?.width ?? 40 }}
           />
         </When>
         <div className="flex items-center justify-between">

From 8a978f4571cf9dc61d43621cc2c4ab713db7d7aa Mon Sep 17 00:00:00 2001
From: Diego <diego@vizonomy.com>
Date: Fri, 7 Jun 2024 15:29:25 -0400
Subject: [PATCH 12/17] update AdminUI lists

---
 .../components/ApplicationList.tsx            | 44 +++++++++---
 .../modules/form/components/FormList.tsx      | 54 +++++++++-----
 .../components/FundingProgrammeList.tsx       | 51 ++++++++++---
 .../nurseries/components/NurseriesList.tsx    | 72 ++++++++++++++-----
 .../components/NurseryReportsList.tsx         | 61 ++++++++++++----
 .../components/OrganisationsList.tsx          | 34 ++++++---
 .../modules/pitch/components/PitchesList.tsx  | 36 +++++++---
 .../components/ProjectReportsList.tsx         | 59 +++++++++++----
 .../projects/components/ProjectsList.tsx      | 72 +++++++++++++++----
 .../components/ReportingFrameworkList.tsx     | 70 +++++++++++++-----
 .../components/SiteReportsList.tsx            | 61 ++++++++++++----
 .../modules/sites/components/SitesList.tsx    | 72 ++++++++++++++-----
 .../modules/user/components/UserList.tsx      | 40 +++++++----
 src/styles/custom-admin-page-styles.css       |  6 +-
 14 files changed, 561 insertions(+), 171 deletions(-)

diff --git a/src/admin/modules/application/components/ApplicationList.tsx b/src/admin/modules/application/components/ApplicationList.tsx
index 2e7737c11..940aa6307 100644
--- a/src/admin/modules/application/components/ApplicationList.tsx
+++ b/src/admin/modules/application/components/ApplicationList.tsx
@@ -1,4 +1,4 @@
-import { Divider, Stack, Typography } from "@mui/material";
+import { Stack } from "@mui/material";
 import { useState } from "react";
 import {
   AutocompleteInput,
@@ -17,6 +17,10 @@ import {
 
 import ListActions from "@/admin/components/Actions/ListActions";
 import ApplicationsExportModal from "@/admin/modules/application/components/ApplicationsExportModal";
+import Menu from "@/components/elements/Menu/Menu";
+import { MENU_PLACEMENT_BOTTOM_LEFT } from "@/components/elements/Menu/MenuVariant";
+import Text from "@/components/elements/Text/Text";
+import Icon, { IconNames } from "@/components/extensive/Icon/Icon";
 import { V2OrganisationRead } from "@/generated/apiSchemas";
 
 import modules from "../..";
@@ -29,6 +33,17 @@ export const statusChoices = [
   { id: "rejected", name: "Rejected" }
 ];
 
+const tableMenu = [
+  {
+    id: "1",
+    render: () => <ShowButton />
+  },
+  {
+    id: "2",
+    render: () => <DeleteWithConfirmButton />
+  }
+];
+
 const ApplicationDataGrid = () => {
   return (
     <Datagrid>
@@ -61,8 +76,9 @@ const ApplicationDataGrid = () => {
       />
       <DateField source="created_at" label="Created" showTime locales="en-GB" />
       <DateField source="updated_at" label="Last Edited" showTime locales="en-GB" />
-      <ShowButton />
-      <DeleteWithConfirmButton />
+      <Menu menu={tableMenu} placement={MENU_PLACEMENT_BOTTOM_LEFT}>
+        <Icon name={IconNames.ELIPSES} className="h-6 w-6 rounded-full p-1 hover:bg-neutral-200"></Icon>
+      </Menu>
     </Datagrid>
   );
 };
@@ -71,27 +87,33 @@ export const ApplicationList = () => {
   const [exportModalOpen, setExportModalOpen] = useState<boolean>(false);
 
   const filters = [
-    <SearchInput key="s" source="search" alwaysOn />,
+    <SearchInput key="s" source="search" alwaysOn className="search-page-admin" />,
     <ReferenceInput
       key="fp"
       source="funding_programme_uuid"
       reference={modules.fundingProgramme.ResourceName}
       label="Funding Programme"
     >
-      <AutocompleteInput optionText="name" label="Funding Programme" />
+      <AutocompleteInput optionText="name" label="Funding Programme" className="select-page-admin" />
     </ReferenceInput>,
     <ReferenceInput key="st" source="current_submission.uuid" reference={modules.stage.ResourceName} label="Stage">
-      <AutocompleteInput optionText="name" label="Stage" optionValue="uuid" />
+      <AutocompleteInput optionText="name" label="Stage" optionValue="uuid" className="select-page-admin" />
     </ReferenceInput>,
-    <SelectInput key="status" label="Status" source="current_submission_status" choices={statusChoices} />
+    <SelectInput
+      key="status"
+      label="Status"
+      source="current_submission_status"
+      choices={statusChoices}
+      className="select-page-admin"
+    />
   ];
 
   return (
     <>
-      <Stack gap={1} py={2}>
-        <Typography variant="h5">Applications</Typography>
-
-        <Divider />
+      <Stack gap={1} className="pb-6">
+        <Text variant="text-36-bold" className="leading-none">
+          Applications
+        </Text>
       </Stack>
 
       <List actions={<ListActions onExport={() => setExportModalOpen(true)} />} filters={filters}>
diff --git a/src/admin/modules/form/components/FormList.tsx b/src/admin/modules/form/components/FormList.tsx
index 7b9e61059..057f247c8 100644
--- a/src/admin/modules/form/components/FormList.tsx
+++ b/src/admin/modules/form/components/FormList.tsx
@@ -1,21 +1,39 @@
-import { Divider, Stack, Typography } from "@mui/material";
-import { BooleanField, Datagrid, ImageField, List, TextField } from "react-admin";
+import { Stack } from "@mui/material";
+import { useState } from "react";
+import { BooleanField, Datagrid, ImageField, List, TextField, useDataProvider } from "react-admin";
 
-export const FormList = () => (
-  <>
-    <Stack gap={1} py={2}>
-      <Typography variant="h5">Forms</Typography>
+import { UserDataProvider } from "@/admin/apiProvider/dataProviders/userDataProvider";
+import ListActionsCreate from "@/admin/components/Actions/ListActionsCreate";
+import ExportProcessingAlert from "@/admin/components/Alerts/ExportProcessingAlert";
+import Text from "@/components/elements/Text/Text";
 
-      <Divider />
-    </Stack>
+import modules from "../..";
 
-    <List>
-      <Datagrid rowClick="show" bulkActionButtons={false}>
-        <ImageField source="banner.thumb_url" label="Banner Image" />
-        <TextField source="title" label="Title" />
-        <TextField source="type" label="Form Type" />
-        <BooleanField source="published" label="Published" />
-      </Datagrid>
-    </List>
-  </>
-);
+export const FormList = () => {
+  const [exporting, setExporting] = useState<boolean>(false);
+  const userDataProvider = useDataProvider<UserDataProvider>();
+  const handleExport = () => {
+    setExporting(true);
+
+    userDataProvider.export(modules.user.ResourceName).finally(() => setExporting(false));
+  };
+  return (
+    <>
+      <Stack gap={1} className="pb-6">
+        <Text variant="text-36-bold" className="leading-none">
+          Forms
+        </Text>
+      </Stack>
+
+      <List actions={<ListActionsCreate onExport={handleExport} />}>
+        <Datagrid rowClick="show" bulkActionButtons={false}>
+          <ImageField source="banner.thumb_url" label="Banner Image" />
+          <TextField source="title" label="Title" />
+          <TextField source="type" label="Form Type" />
+          <BooleanField source="published" label="Published" />
+        </Datagrid>
+      </List>
+      <ExportProcessingAlert show={exporting} />
+    </>
+  );
+};
diff --git a/src/admin/modules/fundingProgrammes/components/FundingProgrammeList.tsx b/src/admin/modules/fundingProgrammes/components/FundingProgrammeList.tsx
index 64ff71ec0..a38dff916 100644
--- a/src/admin/modules/fundingProgrammes/components/FundingProgrammeList.tsx
+++ b/src/admin/modules/fundingProgrammes/components/FundingProgrammeList.tsx
@@ -1,25 +1,56 @@
-import { Divider, Stack, Typography } from "@mui/material";
-import { Datagrid, DateField, EditButton, List, ShowButton, TextField } from "react-admin";
+import { Stack } from "@mui/material";
+import { useState } from "react";
+import { Datagrid, DateField, EditButton, List, ShowButton, TextField, useDataProvider } from "react-admin";
+
+import { UserDataProvider } from "@/admin/apiProvider/dataProviders/userDataProvider";
+import ListActionsCreate from "@/admin/components/Actions/ListActionsCreate";
+import ExportProcessingAlert from "@/admin/components/Alerts/ExportProcessingAlert";
+import Menu from "@/components/elements/Menu/Menu";
+import { MENU_PLACEMENT_BOTTOM_LEFT } from "@/components/elements/Menu/MenuVariant";
+import Text from "@/components/elements/Text/Text";
+import Icon, { IconNames } from "@/components/extensive/Icon/Icon";
+
+import modules from "../..";
+
+const tableMenu = [
+  {
+    id: "1",
+    render: () => <EditButton />
+  },
+  {
+    id: "2",
+    render: () => <ShowButton />
+  }
+];
 
 export const FundingProgrammeList = () => {
+  const [exporting, setExporting] = useState<boolean>(false);
+  const userDataProvider = useDataProvider<UserDataProvider>();
+  const handleExport = () => {
+    setExporting(true);
+
+    userDataProvider.export(modules.user.ResourceName).finally(() => setExporting(false));
+  };
   return (
     <>
-      <Stack gap={1} py={2}>
-        <Typography variant="h5">Funding Programmes</Typography>
-
-        <Divider />
+      <Stack gap={1} className="pb-6">
+        <Text variant="text-36-bold" className="leading-none">
+          Funding Programmes
+        </Text>
       </Stack>
 
-      <List filters={[]}>
-        <Datagrid rowClick="edit">
+      <List actions={<ListActionsCreate onExport={handleExport} />} filters={[]}>
+        <Datagrid>
           <TextField source="name" label="Name" sortable={false} />
           <TextField source="description" label="Description" sortable={false} />
           <TextField source="status" label="Status" sortable={false} sx={{ textTransform: "capitalize" }} />
           <DateField source="created_at" label="Date Added" sortable={false} locales="en-GB" />
-          <ShowButton />
-          <EditButton />
+          <Menu menu={tableMenu} placement={MENU_PLACEMENT_BOTTOM_LEFT}>
+            <Icon name={IconNames.ELIPSES} className="h-6 w-6 rounded-full p-1 hover:bg-neutral-200"></Icon>
+          </Menu>
         </Datagrid>
       </List>
+      <ExportProcessingAlert show={exporting} />
     </>
   );
 };
diff --git a/src/admin/modules/nurseries/components/NurseriesList.tsx b/src/admin/modules/nurseries/components/NurseriesList.tsx
index 17f64de3a..b668d2f7a 100644
--- a/src/admin/modules/nurseries/components/NurseriesList.tsx
+++ b/src/admin/modules/nurseries/components/NurseriesList.tsx
@@ -1,4 +1,4 @@
-import { Divider, Stack, Typography } from "@mui/material";
+import { Stack } from "@mui/material";
 import { FC } from "react";
 import {
   AutocompleteInput,
@@ -21,6 +21,10 @@ import ExportProcessingAlert from "@/admin/components/Alerts/ExportProcessingAle
 import CustomBulkDeleteWithConfirmButton from "@/admin/components/Buttons/CustomBulkDeleteWithConfirmButton";
 import CustomDeleteWithConfirmButton from "@/admin/components/Buttons/CustomDeleteWithConfirmButton";
 import FrameworkSelectionDialog, { useFrameworkExport } from "@/admin/components/Dialogs/FrameworkSelectionDialog";
+import Menu from "@/components/elements/Menu/Menu";
+import { MENU_PLACEMENT_BOTTOM_LEFT } from "@/components/elements/Menu/MenuVariant";
+import Text from "@/components/elements/Text/Text";
+import Icon, { IconNames } from "@/components/extensive/Icon/Icon";
 import { getCountriesOptions } from "@/constants/options/countries";
 import { useFrameworkChoices } from "@/constants/options/frameworks";
 import { getChangeRequestStatusOptions, getStatusOptions } from "@/constants/options/status";
@@ -28,6 +32,25 @@ import { optionToChoices } from "@/utils/options";
 
 import modules from "../..";
 
+const tableMenu = [
+  {
+    id: "1",
+    render: () => <ShowButton />
+  },
+  {
+    id: "2",
+    render: () => <EditButton />
+  },
+  {
+    id: "3",
+    render: () => (
+      <WrapperField>
+        <CustomDeleteWithConfirmButton source="name" />
+      </WrapperField>
+    )
+  }
+];
+
 const NurseryDataGrid: FC = () => {
   const frameworkChoices = useFrameworkChoices();
 
@@ -53,11 +76,9 @@ const NurseryDataGrid: FC = () => {
         }
         sortable={false}
       />
-      <ShowButton />
-      <EditButton />
-      <WrapperField>
-        <CustomDeleteWithConfirmButton source="name" />
-      </WrapperField>
+      <Menu menu={tableMenu} placement={MENU_PLACEMENT_BOTTOM_LEFT}>
+        <Icon name={IconNames.ELIPSES} className="h-6 w-6 rounded-full p-1 hover:bg-neutral-200"></Icon>
+      </Menu>
     </Datagrid>
   );
 };
@@ -66,8 +87,14 @@ export const NurseriesList: FC = () => {
   const frameworkChoices = useFrameworkChoices();
 
   const filters = [
-    <SearchInput key="search" source="search" alwaysOn />,
-    <SelectInput key="country" label="Country" source="country" choices={optionToChoices(getCountriesOptions())} />,
+    <SearchInput key="search" source="search" alwaysOn className="search-page-admin" />,
+    <SelectInput
+      key="country"
+      label="Country"
+      source="country"
+      choices={optionToChoices(getCountriesOptions())}
+      className="select-page-admin"
+    />,
     <ReferenceInput
       key="organisation"
       source="organisation_uuid"
@@ -78,15 +105,28 @@ export const NurseriesList: FC = () => {
         order: "ASC"
       }}
     >
-      <AutocompleteInput optionText="name" label="Organization" />
+      <AutocompleteInput optionText="name" label="Organization" className="select-page-admin" />
     </ReferenceInput>,
-    <SelectInput key="framework_key" label="Framework" source="framework_key" choices={frameworkChoices} />,
-    <SelectInput key="status" label="Status" source="status" choices={optionToChoices(getStatusOptions())} />,
+    <SelectInput
+      key="framework_key"
+      label="Framework"
+      source="framework_key"
+      choices={frameworkChoices}
+      className="select-page-admin"
+    />,
+    <SelectInput
+      key="status"
+      label="Status"
+      source="status"
+      choices={optionToChoices(getStatusOptions())}
+      className="select-page-admin"
+    />,
     <SelectInput
       key="update_request_status"
       label="Change Request Status"
       source="update_request_status"
       choices={optionToChoices(getChangeRequestStatusOptions())}
+      className="select-page-admin"
     />,
     <ReferenceInput
       key="project"
@@ -98,7 +138,7 @@ export const NurseriesList: FC = () => {
         order: "ASC"
       }}
     >
-      <AutocompleteInput optionText="name" label="Project" />
+      <AutocompleteInput optionText="name" label="Project" className="select-page-admin" />
     </ReferenceInput>
   ];
 
@@ -106,10 +146,10 @@ export const NurseriesList: FC = () => {
 
   return (
     <>
-      <Stack gap={1} py={2}>
-        <Typography variant="h5">Nurseries</Typography>
-
-        <Divider />
+      <Stack gap={1} className="pb-6">
+        <Text variant="text-36-bold" className="leading-none">
+          Nurseries
+        </Text>
       </Stack>
 
       <List actions={<ListActions onExport={openExportDialog} />} filters={filters}>
diff --git a/src/admin/modules/nurseryReports/components/NurseryReportsList.tsx b/src/admin/modules/nurseryReports/components/NurseryReportsList.tsx
index 15c08c148..67d58b44f 100644
--- a/src/admin/modules/nurseryReports/components/NurseryReportsList.tsx
+++ b/src/admin/modules/nurseryReports/components/NurseryReportsList.tsx
@@ -1,4 +1,4 @@
-import { Divider, Stack, Typography } from "@mui/material";
+import { Stack } from "@mui/material";
 import { FC } from "react";
 import {
   AutocompleteInput,
@@ -19,6 +19,10 @@ import ListActions from "@/admin/components/Actions/ListActions";
 import ExportProcessingAlert from "@/admin/components/Alerts/ExportProcessingAlert";
 import CustomBulkDeleteWithConfirmButton from "@/admin/components/Buttons/CustomBulkDeleteWithConfirmButton";
 import FrameworkSelectionDialog, { useFrameworkExport } from "@/admin/components/Dialogs/FrameworkSelectionDialog";
+import Menu from "@/components/elements/Menu/Menu";
+import { MENU_PLACEMENT_BOTTOM_LEFT } from "@/components/elements/Menu/MenuVariant";
+import Text from "@/components/elements/Text/Text";
+import Icon, { IconNames } from "@/components/extensive/Icon/Icon";
 import { getCountriesOptions } from "@/constants/options/countries";
 import { useFrameworkChoices } from "@/constants/options/frameworks";
 import { getChangeRequestStatusOptions, getReportStatusOptions } from "@/constants/options/status";
@@ -26,6 +30,17 @@ import { optionToChoices } from "@/utils/options";
 
 import modules from "../..";
 
+const tableMenu = [
+  {
+    id: "1",
+    render: () => <ShowButton />
+  },
+  {
+    id: "2",
+    render: () => <EditButton />
+  }
+];
+
 const NurseryReportDataGrid: FC = () => {
   const frameworkChoices = useFrameworkChoices();
 
@@ -53,8 +68,9 @@ const NurseryReportDataGrid: FC = () => {
         }
         sortable={false}
       />
-      <ShowButton />
-      <EditButton />
+      <Menu menu={tableMenu} placement={MENU_PLACEMENT_BOTTOM_LEFT}>
+        <Icon name={IconNames.ELIPSES} className="h-6 w-6 rounded-full p-1 hover:bg-neutral-200"></Icon>
+      </Menu>
     </Datagrid>
   );
 };
@@ -63,7 +79,7 @@ export const NurseryReportsList: FC = () => {
   const frameworkChoices = useFrameworkChoices();
 
   const filters = [
-    <SearchInput key="search" source="search" alwaysOn />,
+    <SearchInput key="search" source="search" alwaysOn className="search-page-admin" />,
     <ReferenceInput
       key="project"
       source="project_uuid"
@@ -74,7 +90,7 @@ export const NurseryReportsList: FC = () => {
         order: "ASC"
       }}
     >
-      <AutocompleteInput optionText="name" label="Project" />
+      <AutocompleteInput optionText="name" label="Project" className="select-page-admin" />
     </ReferenceInput>,
     <ReferenceInput
       key="nursery"
@@ -86,16 +102,35 @@ export const NurseryReportsList: FC = () => {
         order: "ASC"
       }}
     >
-      <AutocompleteInput optionText="name" label="Nursery" />
+      <AutocompleteInput optionText="name" label="Nursery" className="select-page-admin" />
     </ReferenceInput>,
-    <SelectInput key="country" label="Country" source="country" choices={optionToChoices(getCountriesOptions())} />,
-    <SelectInput key="framework_key" label="Framework" source="framework_key" choices={frameworkChoices} />,
-    <SelectInput key="status" label="Status" source="status" choices={optionToChoices(getReportStatusOptions())} />,
+    <SelectInput
+      key="country"
+      label="Country"
+      source="country"
+      choices={optionToChoices(getCountriesOptions())}
+      className="select-page-admin"
+    />,
+    <SelectInput
+      key="framework_key"
+      label="Framework"
+      source="framework_key"
+      choices={frameworkChoices}
+      className="select-page-admin"
+    />,
+    <SelectInput
+      key="status"
+      label="Status"
+      source="status"
+      choices={optionToChoices(getReportStatusOptions())}
+      className="select-page-admin"
+    />,
     <SelectInput
       key="update_request_status"
       label="Change Request Status"
       source="update_request_status"
       choices={optionToChoices(getChangeRequestStatusOptions())}
+      className="select-page-admin"
     />
   ];
 
@@ -103,10 +138,10 @@ export const NurseryReportsList: FC = () => {
 
   return (
     <>
-      <Stack gap={1} py={2}>
-        <Typography variant="h5">Nursery Reports</Typography>
-
-        <Divider />
+      <Stack gap={1} className="pb-6">
+        <Text variant="text-36-bold" className="leading-none">
+          Nursery Reports
+        </Text>
       </Stack>
 
       <List actions={<ListActions onExport={openExportDialog} />} filters={filters}>
diff --git a/src/admin/modules/organisations/components/OrganisationsList.tsx b/src/admin/modules/organisations/components/OrganisationsList.tsx
index 0262a38ef..c32574285 100644
--- a/src/admin/modules/organisations/components/OrganisationsList.tsx
+++ b/src/admin/modules/organisations/components/OrganisationsList.tsx
@@ -1,4 +1,4 @@
-import { Divider, Stack, Tab, Tabs, Typography } from "@mui/material";
+import { Divider, Stack, Tab, Tabs } from "@mui/material";
 import { Fragment, useCallback, useState } from "react";
 import {
   Datagrid,
@@ -18,6 +18,10 @@ import { OrganisationDataProvider } from "@/admin/apiProvider/dataProviders/orga
 import ListActions from "@/admin/components/Actions/ListActions";
 import ExportProcessingAlert from "@/admin/components/Alerts/ExportProcessingAlert";
 import FundingProgrammesArrayField from "@/admin/components/Fields/FundingProgrammesArrayField";
+import Menu from "@/components/elements/Menu/Menu";
+import { MENU_PLACEMENT_BOTTOM_LEFT } from "@/components/elements/Menu/MenuVariant";
+import Text from "@/components/elements/Text/Text";
+import Icon, { IconNames } from "@/components/extensive/Icon/Icon";
 import { getOrganisationTypeOptions } from "@/constants/options/organisations";
 import { optionToChoices } from "@/utils/options";
 
@@ -32,11 +36,12 @@ const tabs = [
 ];
 
 const filters = [
-  <SearchInput key="s" source="search" alwaysOn />,
+  <SearchInput key="s" source="search" alwaysOn className="search-page-admin" />,
   <SelectInput
     key="c"
     label="Organisation Type"
     source="type"
+    className="select-page-admin"
     choices={optionToChoices(getOrganisationTypeOptions())}
   />
 ];
@@ -59,6 +64,17 @@ const ApplicationDataGrid = () => {
     [displayedFilters, filterValues, setFilters]
   );
 
+  const tableMenu = [
+    {
+      id: "1",
+      render: () => <EditButton />
+    },
+    {
+      id: "2",
+      render: () => <ShowButton />
+    }
+  ];
+
   return (
     <Fragment>
       <Tabs variant="fullWidth" centered value={filterValues.status} indicatorColor="primary" onChange={handleChange}>
@@ -83,8 +99,9 @@ const ApplicationDataGrid = () => {
         <SelectField label="Organisation Type" source="type" choices={optionToChoices(getOrganisationTypeOptions())} />
         <TextField source="readable_status" label="Organisation Status" />
         <FundingProgrammesArrayField label="Funding Programmes" />
-        <ShowButton />
-        <EditButton />
+        <Menu menu={tableMenu} placement={MENU_PLACEMENT_BOTTOM_LEFT}>
+          <Icon name={IconNames.ELIPSES} className="h-6 w-6 rounded-full p-1 hover:bg-neutral-200"></Icon>
+        </Menu>
       </Datagrid>
     </Fragment>
   );
@@ -103,12 +120,11 @@ export const OrganisationsList = () => {
 
   return (
     <>
-      <Stack gap={1} py={2}>
-        <Typography variant="h5">Organisations</Typography>
-
-        <Divider />
+      <Stack gap={1} className="pb-6">
+        <Text variant="text-36-bold" className="leading-none">
+          Organisations
+        </Text>
       </Stack>
-
       <List
         actions={<ListActions onExport={handleExport} />}
         filters={filters}
diff --git a/src/admin/modules/pitch/components/PitchesList.tsx b/src/admin/modules/pitch/components/PitchesList.tsx
index 4ec4702d2..6c5595914 100644
--- a/src/admin/modules/pitch/components/PitchesList.tsx
+++ b/src/admin/modules/pitch/components/PitchesList.tsx
@@ -1,4 +1,4 @@
-import { Divider, Stack, Typography } from "@mui/material";
+import { Stack } from "@mui/material";
 import { useState } from "react";
 import {
   Datagrid,
@@ -18,6 +18,10 @@ import { PitchDataProvider } from "@/admin/apiProvider/dataProviders/pitchDataPr
 import ListActions from "@/admin/components/Actions/ListActions";
 import ExportProcessingAlert from "@/admin/components/Alerts/ExportProcessingAlert";
 import SimpleChipFieldArray from "@/admin/components/Fields/SimpleChipFieldArray";
+import Menu from "@/components/elements/Menu/Menu";
+import { MENU_PLACEMENT_BOTTOM_LEFT } from "@/components/elements/Menu/MenuVariant";
+import Text from "@/components/elements/Text/Text";
+import Icon, { IconNames } from "@/components/extensive/Icon/Icon";
 import { getCountriesOptions } from "@/constants/options/countries";
 import { getRestorationInterventionTypeOptions } from "@/constants/options/restorationInterventionTypes";
 import { optionToChoices } from "@/utils/options";
@@ -25,24 +29,37 @@ import { optionToChoices } from "@/utils/options";
 import modules from "../..";
 
 const filters = [
-  <SearchInput key="s" source="search" alwaysOn />,
+  <SearchInput key="s" source="search" alwaysOn className="search-page-admin" />,
   <SelectInput
     key="i"
     label="Intervention Type"
+    className="select-page-admin"
     source="restoration_intervention_types"
     choices={optionToChoices(getRestorationInterventionTypeOptions())}
   />,
   <SelectInput
     key="c"
     label="Project country"
+    className="select-page-admin"
     source="project_country"
     choices={optionToChoices(getCountriesOptions())}
   />
 ];
 
+const tableMenu = [
+  {
+    id: "1",
+    render: () => <EditButton />
+  },
+  {
+    id: "2",
+    render: () => <ShowButton />
+  }
+];
+
 const ApplicationDataGrid = () => {
   return (
-    <Datagrid rowClick="show">
+    <Datagrid>
       <TextField source="project_name" label="Project Name" sortable />
       <ReferenceField
         source="organisation_id"
@@ -59,8 +76,9 @@ const ApplicationDataGrid = () => {
       />
       <SelectField source="project_country" label="Countries" choices={optionToChoices(getCountriesOptions())} />
       <DateField source="created_at" label="Date Added" locales="en-GB" />
-      <ShowButton />
-      <EditButton />
+      <Menu menu={tableMenu} placement={MENU_PLACEMENT_BOTTOM_LEFT}>
+        <Icon name={IconNames.ELIPSES} className="h-6 w-6 rounded-full p-1 hover:bg-neutral-200"></Icon>
+      </Menu>
     </Datagrid>
   );
 };
@@ -78,10 +96,10 @@ export const PitchesList = () => {
 
   return (
     <>
-      <Stack gap={1} py={2}>
-        <Typography variant="h5">Pitches</Typography>
-
-        <Divider />
+      <Stack gap={1} className="pb-6">
+        <Text variant="text-36-bold" className="leading-none">
+          Pitches
+        </Text>
       </Stack>
 
       <List actions={<ListActions onExport={handleExport} />} filters={filters}>
diff --git a/src/admin/modules/projectReports/components/ProjectReportsList.tsx b/src/admin/modules/projectReports/components/ProjectReportsList.tsx
index 9ad50a205..e1cece667 100644
--- a/src/admin/modules/projectReports/components/ProjectReportsList.tsx
+++ b/src/admin/modules/projectReports/components/ProjectReportsList.tsx
@@ -1,4 +1,4 @@
-import { Divider, Stack, Typography } from "@mui/material";
+import { Stack } from "@mui/material";
 import { FC } from "react";
 import {
   AutocompleteInput,
@@ -19,6 +19,10 @@ import ListActions from "@/admin/components/Actions/ListActions";
 import ExportProcessingAlert from "@/admin/components/Alerts/ExportProcessingAlert";
 import CustomBulkDeleteWithConfirmButton from "@/admin/components/Buttons/CustomBulkDeleteWithConfirmButton";
 import FrameworkSelectionDialog, { useFrameworkExport } from "@/admin/components/Dialogs/FrameworkSelectionDialog";
+import Menu from "@/components/elements/Menu/Menu";
+import { MENU_PLACEMENT_BOTTOM_LEFT } from "@/components/elements/Menu/MenuVariant";
+import Text from "@/components/elements/Text/Text";
+import Icon, { IconNames } from "@/components/extensive/Icon/Icon";
 import { getCountriesOptions } from "@/constants/options/countries";
 import { useFrameworkChoices } from "@/constants/options/frameworks";
 import { getChangeRequestStatusOptions, getReportStatusOptions } from "@/constants/options/status";
@@ -29,6 +33,17 @@ import modules from "../..";
 const ProjectReportDataGrid: FC = () => {
   const frameworkChoices = useFrameworkChoices();
 
+  const tableMenu = [
+    {
+      id: "1",
+      render: () => <ShowButton />
+    },
+    {
+      id: "2",
+      render: () => <EditButton />
+    }
+  ];
+
   return (
     <Datagrid bulkActionButtons={<CustomBulkDeleteWithConfirmButton source="title" />}>
       <TextField source="title" label="Report Name" />
@@ -53,8 +68,9 @@ const ProjectReportDataGrid: FC = () => {
       <DateField source="due_at" label="Due Date" locales="en-GB" />
       <DateField source="updated_at" label="Last Updated" locales="en-GB" />
       <DateField source="submitted_at" label="Date Submitted" locales="en-GB" />
-      <ShowButton />
-      <EditButton />
+      <Menu menu={tableMenu} placement={MENU_PLACEMENT_BOTTOM_LEFT}>
+        <Icon name={IconNames.ELIPSES} className="h-6 w-6 rounded-full p-1 hover:bg-neutral-200"></Icon>
+      </Menu>
     </Datagrid>
   );
 };
@@ -62,7 +78,7 @@ const ProjectReportDataGrid: FC = () => {
 export const ProjectReportsList: FC = () => {
   const frameworkChoices = useFrameworkChoices();
   const filters = [
-    <SearchInput key="search" source="search" alwaysOn />,
+    <SearchInput key="search" source="search" alwaysOn className="search-page-admin" />,
     <ReferenceInput
       key="project"
       source="project_uuid"
@@ -73,27 +89,46 @@ export const ProjectReportsList: FC = () => {
         order: "ASC"
       }}
     >
-      <AutocompleteInput optionText="name" label="Project" />
+      <AutocompleteInput optionText="name" label="Project" className="select-page-admin" />
     </ReferenceInput>,
-    <SelectInput key="country" label="Country" source="country" choices={optionToChoices(getCountriesOptions())} />,
-    <SelectInput key="status" label="Status" source="status" choices={optionToChoices(getReportStatusOptions())} />,
+    <SelectInput
+      key="country"
+      label="Country"
+      source="country"
+      choices={optionToChoices(getCountriesOptions())}
+      className="select-page-admin"
+    />,
+    <SelectInput
+      key="status"
+      label="Status"
+      source="status"
+      choices={optionToChoices(getReportStatusOptions())}
+      className="select-page-admin"
+    />,
     <SelectInput
       key="update_request_status"
       label="Change Request Status"
       source="update_request_status"
       choices={optionToChoices(getChangeRequestStatusOptions())}
+      className="select-page-admin"
     />,
-    <SelectInput key="framework_key" label="Framework" source="framework_key" choices={frameworkChoices} />
+    <SelectInput
+      key="framework_key"
+      label="Framework"
+      source="framework_key"
+      choices={frameworkChoices}
+      className="select-page-admin"
+    />
   ];
 
   const { exporting, openExportDialog, frameworkDialogProps } = useFrameworkExport("project-reports");
 
   return (
     <>
-      <Stack gap={1} py={2}>
-        <Typography variant="h5">Project Reports</Typography>
-
-        <Divider />
+      <Stack gap={1} className="pb-6">
+        <Text variant="text-36-bold" className="leading-none">
+          Project Reports
+        </Text>
       </Stack>
 
       <List actions={<ListActions onExport={openExportDialog} />} filters={filters}>
diff --git a/src/admin/modules/projects/components/ProjectsList.tsx b/src/admin/modules/projects/components/ProjectsList.tsx
index 357448002..4dd7dbc5c 100644
--- a/src/admin/modules/projects/components/ProjectsList.tsx
+++ b/src/admin/modules/projects/components/ProjectsList.tsx
@@ -1,4 +1,4 @@
-import { Divider, Stack, Typography } from "@mui/material";
+import { Stack } from "@mui/material";
 import { FC } from "react";
 import {
   AutocompleteInput,
@@ -22,6 +22,10 @@ import ExportProcessingAlert from "@/admin/components/Alerts/ExportProcessingAle
 import CustomBulkDeleteWithConfirmButton from "@/admin/components/Buttons/CustomBulkDeleteWithConfirmButton";
 import CustomDeleteWithConfirmButton from "@/admin/components/Buttons/CustomDeleteWithConfirmButton";
 import FrameworkSelectionDialog, { useFrameworkExport } from "@/admin/components/Dialogs/FrameworkSelectionDialog";
+import Menu from "@/components/elements/Menu/Menu";
+import { MENU_PLACEMENT_BOTTOM_LEFT } from "@/components/elements/Menu/MenuVariant";
+import Text from "@/components/elements/Text/Text";
+import Icon, { IconNames } from "@/components/extensive/Icon/Icon";
 import { getCountriesOptions } from "@/constants/options/countries";
 import { useFrameworkChoices } from "@/constants/options/frameworks";
 import { getChangeRequestStatusOptions, getStatusOptions } from "@/constants/options/status";
@@ -40,6 +44,25 @@ const monitoringDataChoices = [
   }
 ];
 
+const tableMenu = [
+  {
+    id: "1",
+    render: () => <ShowButton />
+  },
+  {
+    id: "2",
+    render: () => <EditButton />
+  },
+  {
+    id: "3",
+    render: () => (
+      <WrapperField>
+        <CustomDeleteWithConfirmButton source="name" />
+      </WrapperField>
+    )
+  }
+];
+
 const ProjectDataGrid = () => {
   const frameworkChoices = useFrameworkChoices();
 
@@ -65,11 +88,9 @@ const ProjectDataGrid = () => {
         sortable={false}
       />
       <BooleanField source="has_monitoring_data" label="Monitored Data" sortable={false} looseValue />
-      <ShowButton />
-      <EditButton />
-      <WrapperField>
-        <CustomDeleteWithConfirmButton source="name" />
-      </WrapperField>
+      <Menu menu={tableMenu} placement={MENU_PLACEMENT_BOTTOM_LEFT}>
+        <Icon name={IconNames.ELIPSES} className="h-6 w-6 rounded-full p-1 hover:bg-neutral-200"></Icon>
+      </Menu>
     </Datagrid>
   );
 };
@@ -78,12 +99,19 @@ export const ProjectsList: FC = () => {
   const frameworkChoices = useFrameworkChoices();
 
   const filters = [
-    <SearchInput key="search" source="search" alwaysOn />,
-    <SelectInput key="country" label="Country" source="country" choices={optionToChoices(getCountriesOptions())} />,
+    <SearchInput key="search" source="search" alwaysOn className="search-page-admin" />,
+    <SelectInput
+      key="country"
+      label="Country"
+      source="country"
+      className="select-page-admin"
+      choices={optionToChoices(getCountriesOptions())}
+    />,
     <SelectInput
       key="monitoring_data"
       label="Monitored Data"
       source="monitoring_data"
+      className="select-page-admin"
       choices={monitoringDataChoices}
     />,
     <ReferenceInput
@@ -91,31 +119,45 @@ export const ProjectsList: FC = () => {
       source="organisation_uuid"
       reference={modules.organisation.ResourceName}
       label="Organization"
+      className="select-page-admin"
       sort={{
         field: "name",
         order: "ASC"
       }}
     >
-      <AutocompleteInput optionText="name" label="Organization" />
+      <AutocompleteInput optionText="name" label="Organization" className="select-page-admin" />
     </ReferenceInput>,
-    <SelectInput key="status" label="Status" source="status" choices={optionToChoices(getStatusOptions())} />,
+    <SelectInput
+      key="status"
+      label="Status"
+      source="status"
+      choices={optionToChoices(getStatusOptions())}
+      className="select-page-admin"
+    />,
     <SelectInput
       key="update_request_status"
+      className="select-page-admin"
       label="Change Request Status"
       source="update_request_status"
       choices={optionToChoices(getChangeRequestStatusOptions())}
     />,
-    <SelectInput key="framework_key" label="Framework" source="framework_key" choices={frameworkChoices} />
+    <SelectInput
+      key="framework_key"
+      label="Framework"
+      source="framework_key"
+      choices={frameworkChoices}
+      className="select-page-admin"
+    />
   ];
 
   const { exporting, openExportDialog, frameworkDialogProps } = useFrameworkExport("projects");
 
   return (
     <>
-      <Stack gap={1} py={2}>
-        <Typography variant="h5">Projects</Typography>
-
-        <Divider />
+      <Stack gap={1} className="pb-6">
+        <Text variant="text-36-bold" className="leading-none">
+          Projects
+        </Text>
       </Stack>
 
       <List actions={<ListActions onExport={openExportDialog} />} filters={filters}>
diff --git a/src/admin/modules/reportingFramework/components/ReportingFrameworkList.tsx b/src/admin/modules/reportingFramework/components/ReportingFrameworkList.tsx
index 1eec0c260..0475d0252 100644
--- a/src/admin/modules/reportingFramework/components/ReportingFrameworkList.tsx
+++ b/src/admin/modules/reportingFramework/components/ReportingFrameworkList.tsx
@@ -1,34 +1,72 @@
-import { Divider, Stack, Typography } from "@mui/material";
-import { FC } from "react";
-import { Datagrid, EditButton, List, ShowButton, TextField, WrapperField } from "react-admin";
+import { Stack } from "@mui/material";
+import { FC, useState } from "react";
+import { Datagrid, EditButton, List, ShowButton, TextField, useDataProvider, WrapperField } from "react-admin";
 
+import { UserDataProvider } from "@/admin/apiProvider/dataProviders/userDataProvider";
+import ListActionsCreate from "@/admin/components/Actions/ListActionsCreate";
+import ExportProcessingAlert from "@/admin/components/Alerts/ExportProcessingAlert";
 import CustomDeleteWithConfirmButton from "@/admin/components/Buttons/CustomDeleteWithConfirmButton";
 import { useGetUserRole } from "@/admin/hooks/useGetUserRole";
+import Menu from "@/components/elements/Menu/Menu";
+import { MENU_PLACEMENT_BOTTOM_LEFT } from "@/components/elements/Menu/MenuVariant";
+import Text from "@/components/elements/Text/Text";
+import Icon, { IconNames } from "@/components/extensive/Icon/Icon";
+
+import modules from "../..";
 
 export const ReportingFrameworkList: FC = () => {
+  const [exporting, setExporting] = useState<boolean>(false);
+  const userDataProvider = useDataProvider<UserDataProvider>();
+  const handleExport = () => {
+    setExporting(true);
+    userDataProvider.export(modules.user.ResourceName).finally(() => setExporting(false));
+  };
   const { isSuperAdmin } = useGetUserRole();
+
+  const commonMenu = [
+    {
+      id: "1",
+      render: () => <EditButton />
+    },
+    {
+      id: "2",
+      render: () => <ShowButton />
+    }
+  ];
+
+  const tableMenu = isSuperAdmin
+    ? [
+        ...commonMenu,
+        {
+          id: "3",
+          render: () => (
+            <WrapperField>
+              <CustomDeleteWithConfirmButton source="name" />
+            </WrapperField>
+          )
+        }
+      ]
+    : commonMenu;
+
   return (
     <>
-      <Stack gap={1} py={2}>
-        <Typography variant="h5">Reporting Frameworks</Typography>
-
-        <Divider />
+      <Stack gap={1} className="pb-6">
+        <Text variant="text-36-bold" className="leading-none">
+          Reporting Frameworks
+        </Text>
       </Stack>
 
-      <List>
-        <Datagrid rowClick="edit" bulkActionButtons={false}>
+      <List actions={<ListActionsCreate onExport={handleExport} />}>
+        <Datagrid bulkActionButtons={false}>
           <TextField source="name" label="Framework" />
           <TextField source="access_code" label="Access Code" />
           <TextField source="total_projects_count" label="Enrolled Projects" />
-          <ShowButton />
-          <EditButton />
-          {isSuperAdmin && (
-            <WrapperField>
-              <CustomDeleteWithConfirmButton source="name" />
-            </WrapperField>
-          )}
+          <Menu menu={tableMenu} placement={MENU_PLACEMENT_BOTTOM_LEFT}>
+            <Icon name={IconNames.ELIPSES} className="h-6 w-6 rounded-full p-1 hover:bg-neutral-200"></Icon>
+          </Menu>
         </Datagrid>
       </List>
+      <ExportProcessingAlert show={exporting} />
     </>
   );
 };
diff --git a/src/admin/modules/siteReports/components/SiteReportsList.tsx b/src/admin/modules/siteReports/components/SiteReportsList.tsx
index 6eacb997c..64b7d71d0 100644
--- a/src/admin/modules/siteReports/components/SiteReportsList.tsx
+++ b/src/admin/modules/siteReports/components/SiteReportsList.tsx
@@ -1,4 +1,4 @@
-import { Divider, Stack, Typography } from "@mui/material";
+import { Stack } from "@mui/material";
 import { FC } from "react";
 import {
   AutocompleteInput,
@@ -19,6 +19,10 @@ import ListActions from "@/admin/components/Actions/ListActions";
 import ExportProcessingAlert from "@/admin/components/Alerts/ExportProcessingAlert";
 import CustomBulkDeleteWithConfirmButton from "@/admin/components/Buttons/CustomBulkDeleteWithConfirmButton";
 import FrameworkSelectionDialog, { useFrameworkExport } from "@/admin/components/Dialogs/FrameworkSelectionDialog";
+import Menu from "@/components/elements/Menu/Menu";
+import { MENU_PLACEMENT_BOTTOM_LEFT } from "@/components/elements/Menu/MenuVariant";
+import Text from "@/components/elements/Text/Text";
+import Icon, { IconNames } from "@/components/extensive/Icon/Icon";
 import { getCountriesOptions } from "@/constants/options/countries";
 import { useFrameworkChoices } from "@/constants/options/frameworks";
 import { getChangeRequestStatusOptions, getReportStatusOptions } from "@/constants/options/status";
@@ -29,6 +33,17 @@ import modules from "../..";
 const SiteReportDataGrid: FC = () => {
   const frameworkChoices = useFrameworkChoices();
 
+  const tableMenu = [
+    {
+      id: "1",
+      render: () => <ShowButton />
+    },
+    {
+      id: "2",
+      render: () => <EditButton />
+    }
+  ];
+
   return (
     <Datagrid bulkActionButtons={<CustomBulkDeleteWithConfirmButton source="title" />}>
       <TextField source="site.name" label="Site Name" sortable={false} />
@@ -53,8 +68,9 @@ const SiteReportDataGrid: FC = () => {
       <DateField source="due_at" label="Due Date" locales="en-GB" />
       <DateField source="updated_at" label="Last Updated" locales="en-GB" />
       <DateField source="submitted_at" label="Date Submitted" locales="en-GB" />
-      <ShowButton />
-      <EditButton />
+      <Menu menu={tableMenu} placement={MENU_PLACEMENT_BOTTOM_LEFT}>
+        <Icon name={IconNames.ELIPSES} className="h-6 w-6 rounded-full p-1 hover:bg-neutral-200"></Icon>
+      </Menu>
     </Datagrid>
   );
 };
@@ -63,7 +79,7 @@ export const SiteReportsList: FC = () => {
   const frameworkChoices = useFrameworkChoices();
 
   const filters = [
-    <SearchInput key="search" source="search" alwaysOn />,
+    <SearchInput key="search" source="search" alwaysOn className="search-page-admin" />,
     <ReferenceInput
       key="project"
       source="project_uuid"
@@ -74,7 +90,7 @@ export const SiteReportsList: FC = () => {
         order: "ASC"
       }}
     >
-      <AutocompleteInput optionText="name" label="Project" />
+      <AutocompleteInput optionText="name" label="Project" className="select-page-admin" />
     </ReferenceInput>,
     <ReferenceInput
       key="site"
@@ -86,27 +102,46 @@ export const SiteReportsList: FC = () => {
         order: "ASC"
       }}
     >
-      <AutocompleteInput optionText="name" label="Site" />
+      <AutocompleteInput optionText="name" label="Site" className="select-page-admin" />
     </ReferenceInput>,
-    <SelectInput key="country" label="Country" source="country" choices={optionToChoices(getCountriesOptions())} />,
-    <SelectInput key="status" label="Status" source="status" choices={optionToChoices(getReportStatusOptions())} />,
+    <SelectInput
+      key="country"
+      label="Country"
+      source="country"
+      choices={optionToChoices(getCountriesOptions())}
+      className="select-page-admin"
+    />,
+    <SelectInput
+      key="status"
+      label="Status"
+      source="status"
+      choices={optionToChoices(getReportStatusOptions())}
+      className="select-page-admin"
+    />,
     <SelectInput
       key="update_request_status"
       label="Change Request Status"
       source="update_request_status"
       choices={optionToChoices(getChangeRequestStatusOptions())}
+      className="select-page-admin"
     />,
-    <SelectInput key="framework_key" label="Framework" source="framework_key" choices={frameworkChoices} />
+    <SelectInput
+      key="framework_key"
+      label="Framework"
+      source="framework_key"
+      choices={frameworkChoices}
+      className="select-page-admin"
+    />
   ];
 
   const { exporting, openExportDialog, frameworkDialogProps } = useFrameworkExport("site-reports");
 
   return (
     <>
-      <Stack gap={1} py={2}>
-        <Typography variant="h5">Site Reports</Typography>
-
-        <Divider />
+      <Stack gap={1} className="pb-6">
+        <Text variant="text-36-bold" className="leading-none">
+          Site Reports
+        </Text>
       </Stack>
 
       <List actions={<ListActions onExport={openExportDialog} />} filters={filters}>
diff --git a/src/admin/modules/sites/components/SitesList.tsx b/src/admin/modules/sites/components/SitesList.tsx
index 1dd4aeed4..a4033982b 100644
--- a/src/admin/modules/sites/components/SitesList.tsx
+++ b/src/admin/modules/sites/components/SitesList.tsx
@@ -1,4 +1,4 @@
-import { Divider, Stack, Typography } from "@mui/material";
+import { Stack } from "@mui/material";
 import { FC } from "react";
 import {
   AutocompleteInput,
@@ -22,6 +22,10 @@ import ExportProcessingAlert from "@/admin/components/Alerts/ExportProcessingAle
 import CustomBulkDeleteWithConfirmButton from "@/admin/components/Buttons/CustomBulkDeleteWithConfirmButton";
 import CustomDeleteWithConfirmButton from "@/admin/components/Buttons/CustomDeleteWithConfirmButton";
 import FrameworkSelectionDialog, { useFrameworkExport } from "@/admin/components/Dialogs/FrameworkSelectionDialog";
+import Menu from "@/components/elements/Menu/Menu";
+import { MENU_PLACEMENT_BOTTOM_LEFT } from "@/components/elements/Menu/MenuVariant";
+import Text from "@/components/elements/Text/Text";
+import Icon, { IconNames } from "@/components/extensive/Icon/Icon";
 import { getCountriesOptions } from "@/constants/options/countries";
 import { useFrameworkChoices } from "@/constants/options/frameworks";
 import { getChangeRequestStatusOptions, getStatusOptions } from "@/constants/options/status";
@@ -39,6 +43,24 @@ const monitoringDataChoices = [
     name: "Yes"
   }
 ];
+const tableMenu = [
+  {
+    id: "1",
+    render: () => <ShowButton />
+  },
+  {
+    id: "2",
+    render: () => <EditButton />
+  },
+  {
+    id: "3",
+    render: () => (
+      <WrapperField>
+        <CustomDeleteWithConfirmButton source="name" />
+      </WrapperField>
+    )
+  }
+];
 
 const SiteDataGrid: FC = () => {
   const frameworkChoices = useFrameworkChoices();
@@ -65,11 +87,9 @@ const SiteDataGrid: FC = () => {
         sortable={false}
       />
       <BooleanField source="has_monitoring_data" label="Monitored Data" sortable={false} looseValue />
-      <ShowButton />
-      <EditButton />
-      <WrapperField>
-        <CustomDeleteWithConfirmButton source="name" />
-      </WrapperField>
+      <Menu menu={tableMenu} placement={MENU_PLACEMENT_BOTTOM_LEFT}>
+        <Icon name={IconNames.ELIPSES} className="h-6 w-6 rounded-full p-1 hover:bg-neutral-200"></Icon>
+      </Menu>
     </Datagrid>
   );
 };
@@ -77,8 +97,14 @@ const SiteDataGrid: FC = () => {
 export const SitesList: FC = () => {
   const frameworkChoices = useFrameworkChoices();
   const filters = [
-    <SearchInput key="search" source="search" alwaysOn />,
-    <SelectInput key="country" label="Country" source="country" choices={optionToChoices(getCountriesOptions())} />,
+    <SearchInput key="search" source="search" alwaysOn className="search-page-admin" />,
+    <SelectInput
+      key="country"
+      label="Country"
+      source="country"
+      choices={optionToChoices(getCountriesOptions())}
+      className="select-page-admin"
+    />,
     <ReferenceInput
       key="organisation"
       source="organisation_uuid"
@@ -89,7 +115,7 @@ export const SitesList: FC = () => {
         order: "ASC"
       }}
     >
-      <AutocompleteInput optionText="name" label="Organization" />
+      <AutocompleteInput optionText="name" label="Organization" className="select-page-admin" />
     </ReferenceInput>,
     <ReferenceInput
       key="project"
@@ -101,21 +127,35 @@ export const SitesList: FC = () => {
         order: "ASC"
       }}
     >
-      <AutocompleteInput optionText="name" label="Project" />
+      <AutocompleteInput optionText="name" label="Project" className="select-page-admin" />
     </ReferenceInput>,
-    <SelectInput key="framework_key" label="Framework" source="framework_key" choices={frameworkChoices} />,
-    <SelectInput key="status" label="Status" source="status" choices={optionToChoices(getStatusOptions())} />,
+    <SelectInput
+      key="framework_key"
+      label="Framework"
+      source="framework_key"
+      choices={frameworkChoices}
+      className="select-page-admin"
+    />,
+    <SelectInput
+      key="status"
+      label="Status"
+      source="status"
+      choices={optionToChoices(getStatusOptions())}
+      className="select-page-admin"
+    />,
     <SelectInput
       key="update_request_status"
       label="Change Request Status"
       source="update_request_status"
       choices={optionToChoices(getChangeRequestStatusOptions())}
+      className="select-page-admin"
     />,
     <SelectInput
       key="monitoring_data"
       label="Monitored Data"
       source="monitoring_data"
       choices={monitoringDataChoices}
+      className="select-page-admin"
     />
   ];
 
@@ -123,10 +163,10 @@ export const SitesList: FC = () => {
 
   return (
     <>
-      <Stack gap={1} py={2}>
-        <Typography variant="h5">Sites</Typography>
-
-        <Divider />
+      <Stack gap={1} className="pb-6">
+        <Text variant="text-36-bold" className="leading-none">
+          Sites
+        </Text>
       </Stack>
 
       <List actions={<ListActions onExport={openExportDialog} />} filters={filters}>
diff --git a/src/admin/modules/user/components/UserList.tsx b/src/admin/modules/user/components/UserList.tsx
index dcd6f026a..2dcd41ec8 100644
--- a/src/admin/modules/user/components/UserList.tsx
+++ b/src/admin/modules/user/components/UserList.tsx
@@ -1,4 +1,4 @@
-import { Divider, Stack, Typography } from "@mui/material";
+import { Stack } from "@mui/material";
 import { useState } from "react";
 import {
   BooleanField,
@@ -19,17 +19,22 @@ import {
 import { UserDataProvider } from "@/admin/apiProvider/dataProviders/userDataProvider";
 import ListActions from "@/admin/components/Actions/ListActions";
 import ExportProcessingAlert from "@/admin/components/Alerts/ExportProcessingAlert";
+import Menu from "@/components/elements/Menu/Menu";
+import { MENU_PLACEMENT_BOTTOM_LEFT } from "@/components/elements/Menu/MenuVariant";
+import Text from "@/components/elements/Text/Text";
+import Icon, { IconNames } from "@/components/extensive/Icon/Icon";
 import { V2AdminUserRead } from "@/generated/apiSchemas";
 
 import modules from "../..";
 import { userTypesChoices } from "../const";
 
 const filters = [
-  <SearchInput key="s" source="search" alwaysOn />,
+  <SearchInput key="s" source="search" alwaysOn className="search-page-admin" />,
   <SelectInput
     key="c"
     label="User Status"
     source="verified"
+    className="select-page-admin"
     choices={[
       {
         id: true,
@@ -43,11 +48,22 @@ const filters = [
   />
 ];
 
+const tableMenu = [
+  {
+    id: "1",
+    render: () => <EditButton />
+  },
+  {
+    id: "2",
+    render: () => <ShowButton />
+  }
+];
+
 const UserDataGrid = () => {
   return (
-    <Datagrid rowClick="show">
+    <Datagrid>
       <FunctionField
-        label="Name and last name"
+        label="Name"
         source="first_name"
         render={(record: V2AdminUserRead) => `${record?.first_name || ""} ${record?.last_name || ""}`}
       />
@@ -63,10 +79,11 @@ const UserDataGrid = () => {
       <TextField source="email_address" label="Email" />
       <BooleanField source="verified" label="Verified" sortBy="email_address_verified_at" />
       <SelectField source="user_type" label="Type" choices={userTypesChoices} />
-      <DateField source="last_logged_in_at" label="Last Login Date" locales="en-GB" />
+      <DateField source="last_logged_in_at" label="Last Login" locales="en-GB" />
       <DateField source="created_at" label="Date Added" locales="en-GB" />
-      <ShowButton />
-      <EditButton />
+      <Menu menu={tableMenu} placement={MENU_PLACEMENT_BOTTOM_LEFT}>
+        <Icon name={IconNames.ELIPSES} className="h-6 w-6 rounded-full p-1 hover:bg-neutral-200"></Icon>
+      </Menu>
     </Datagrid>
   );
 };
@@ -78,16 +95,15 @@ export const UserList = () => {
 
   const handleExport = () => {
     setExporting(true);
-
     userDataProvider.export(modules.user.ResourceName).finally(() => setExporting(false));
   };
 
   return (
     <>
-      <Stack gap={1} py={2}>
-        <Typography variant="h5">Users</Typography>
-
-        <Divider />
+      <Stack gap={1} className="pb-6">
+        <Text variant="text-36-bold" className="leading-none">
+          Users
+        </Text>
       </Stack>
 
       <List actions={<ListActions onExport={handleExport} />} filters={filters}>
diff --git a/src/styles/custom-admin-page-styles.css b/src/styles/custom-admin-page-styles.css
index a0d7212e1..aa6a90bc4 100644
--- a/src/styles/custom-admin-page-styles.css
+++ b/src/styles/custom-admin-page-styles.css
@@ -26,6 +26,10 @@
  @apply !bg-white !rounded-lg
 }
 
+.select-page-admin label{
+  @apply pr-[14px]
+ }
+
 .button-aside-page-admin {
   @apply !w-full !bg-white !border !border-solid !border-primary-500 !uppercase !leading-[normal] !px-4 !py-[10.5px] !rounded-lg hover:!bg-grey-900 disabled:!border-transparent disabled:!bg-grey-750 !text-primary-500 disabled:!text-grey-730 !text-xs !font-bold lg:!text-sm wide:!text-base;
 }
@@ -47,7 +51,7 @@
 }
 
 .RaCreateButton-root{
-  @apply !text-blueCustom-900 !bg-white !text-sm !font-bold lg:text-base wide:text-md !tracking-normal !px-4 !py-2 !rounded-lg !border !border-solid !border-neutral-300 !mb-4;
+  @apply !text-blueCustom-900 !bg-white !text-sm !font-bold lg:!text-base wide:!text-md !tracking-normal !px-4 !py-2 !rounded-lg !border !border-solid !border-neutral-300 !mb-4 !font-primary !leading-[normal] !h-[42px]
 }
 
 .RaCreateButton-root:hover {

From c285953bb54a9945b0fa0b72c021c31fb041293c Mon Sep 17 00:00:00 2001
From: Dotty <dottykurmi123@gmail.com>
Date: Fri, 7 Jun 2024 15:30:36 -0400
Subject: [PATCH 13/17] fix storybook

---
 .../elements/Notification/Notification.tsx    | 11 +++++-----
 .../Notification/withNotificationRoot.tsx     | 20 +++++++++++++++++++
 2 files changed, 26 insertions(+), 5 deletions(-)
 create mode 100644 src/components/elements/Notification/withNotificationRoot.tsx

diff --git a/src/components/elements/Notification/Notification.tsx b/src/components/elements/Notification/Notification.tsx
index 33c3e2080..f9b00508e 100644
--- a/src/components/elements/Notification/Notification.tsx
+++ b/src/components/elements/Notification/Notification.tsx
@@ -11,21 +11,22 @@ import Icon, { IconNames } from "@/components/extensive/Icon/Icon";
 import Text from "../Text/Text";
 import { TYPE_CLASSES } from "./constants/baseClasses";
 import { TEXT_CLASSES } from "./constants/textClasses";
+import withNotificationRoot from "./withNotificationRoot";
 
 export interface NotificationProps extends React.HTMLAttributes<HTMLDivElement> {
   type?: "success" | "error" | "warning";
   message: string;
   title: string;
   open: boolean;
+  portalRootId?: string;
 }
 
 const Notification: FC<NotificationProps> = props => {
-  const { type = "default", message, className, title, open, ...rest } = props;
-  const t = useT();
+  const { type = "default", message, className, title, open, portalRootId = "notification-root", ...rest } = props;
   const [openNotification, setOpenNotification] = useState(open);
+  const t = useT();
 
   const textClasses = useMemo(() => (has(TEXT_CLASSES, type) ? TEXT_CLASSES[type] : TEXT_CLASSES.default), [type]);
-
   const notificationClasses = useMemo(
     () => (has(TYPE_CLASSES, type) ? TYPE_CLASSES[type] : TYPE_CLASSES.default),
     [type]
@@ -76,8 +77,8 @@ const Notification: FC<NotificationProps> = props => {
         <></>
       )}
     </div>,
-    document.body
+    document.getElementById(portalRootId)!
   );
 };
 
-export default Notification;
+export default withNotificationRoot(Notification);
diff --git a/src/components/elements/Notification/withNotificationRoot.tsx b/src/components/elements/Notification/withNotificationRoot.tsx
new file mode 100644
index 000000000..eb6194ba5
--- /dev/null
+++ b/src/components/elements/Notification/withNotificationRoot.tsx
@@ -0,0 +1,20 @@
+import { useEffect } from "react";
+
+const withNotificationRoot = (Component: React.ComponentType<any>) => {
+  useEffect(() => {
+    const notificationRootId = "notification-root";
+    let notificationRoot = document.getElementById(notificationRootId);
+    if (!notificationRoot) {
+      notificationRoot = document.createElement("div");
+      notificationRoot.setAttribute("id", notificationRootId);
+      document.body.appendChild(notificationRoot);
+    }
+    return () => {
+      document.body.removeChild(notificationRoot);
+    };
+  }, []);
+
+  return (props: any) => <Component {...props} portalRootId="notification-root" />;
+};
+
+export default withNotificationRoot;

From 6cc03d172f838eec7ed156fcb35ca5e8a3f81463 Mon Sep 17 00:00:00 2001
From: Dotty <dottykurmi123@gmail.com>
Date: Fri, 7 Jun 2024 15:40:11 -0400
Subject: [PATCH 14/17] edit notification stories

---
 .../Notification/Notification.stories.tsx     | 42 +++++++++++--------
 1 file changed, 24 insertions(+), 18 deletions(-)

diff --git a/src/components/elements/Notification/Notification.stories.tsx b/src/components/elements/Notification/Notification.stories.tsx
index 00fd61788..0c29decf4 100644
--- a/src/components/elements/Notification/Notification.stories.tsx
+++ b/src/components/elements/Notification/Notification.stories.tsx
@@ -1,4 +1,5 @@
 import { Meta, StoryObj } from "@storybook/react";
+import { useEffect } from "react";
 
 import Notification, { NotificationProps as Props } from "./Notification";
 
@@ -9,44 +10,49 @@ export default {
 
 type Story = StoryObj<typeof Notification>;
 
+const withPortalRoot = (Story: React.ComponentType<Props>, args: Props) => {
+  useEffect(() => {
+    let NotificationRoot = args.portalRootId ? document.getElementById(args.portalRootId) : null;
+    NotificationRoot = NotificationRoot ?? document.createElement("div");
+    if (!NotificationRoot) {
+      NotificationRoot = document.createElement("div");
+      NotificationRoot.setAttribute("id", args.portalRootId ?? "");
+      document.body.appendChild(NotificationRoot);
+    }
+  }, []);
+
+  return <Story {...args} />;
+};
+
 export const Success: Story = {
-  render: (args: Props) => (
-    <div className="p-10">
-      <Notification {...args} />
-    </div>
-  ),
+  render: (args: Props) => withPortalRoot(Notification, args),
   args: {
     title: "Success! Your notes were just saved!",
     message: "Your notes were just saved!",
     type: "success",
-    open: true
+    open: true,
+    portalRootId: "notification-root"
   }
 };
 
 export const Error: Story = {
-  render: (args: Props) => (
-    <div className="p-10">
-      <Notification {...args} />
-    </div>
-  ),
+  render: (args: Props) => withPortalRoot(Notification, args),
   args: {
     title: "Your critical message - make it short",
     message: "Describe the event and give further instruction if needed, including links to other pages.",
     type: "error",
-    open: true
+    open: true,
+    portalRootId: "notification-root"
   }
 };
 
 export const Warning: Story = {
-  render: (args: Props) => (
-    <div className="p-10">
-      <Notification {...args} />
-    </div>
-  ),
+  render: (args: Props) => withPortalRoot(Notification, args),
   args: {
     title: "Your polygon has been edited. Run a validation check.",
     message: "This is required for site approval.",
     type: "warning",
-    open: true
+    open: true,
+    portalRootId: "notification-root"
   }
 };

From 37dff96cbb2d728b069530e1f6f0fd8852d843fd Mon Sep 17 00:00:00 2001
From: Dotty <dottykurmi123@gmail.com>
Date: Fri, 7 Jun 2024 16:12:18 -0400
Subject: [PATCH 15/17] edit notification

---
 .../Notification/Notification.stories.tsx     |  42 ++--
 .../elements/Notification/Notification.tsx    |  15 +-
 .../Notification.stories.storyshot            | 189 ++++++++++++------
 .../Notification/withNotificationRoot.tsx     |  20 --
 4 files changed, 150 insertions(+), 116 deletions(-)
 delete mode 100644 src/components/elements/Notification/withNotificationRoot.tsx

diff --git a/src/components/elements/Notification/Notification.stories.tsx b/src/components/elements/Notification/Notification.stories.tsx
index 0c29decf4..00fd61788 100644
--- a/src/components/elements/Notification/Notification.stories.tsx
+++ b/src/components/elements/Notification/Notification.stories.tsx
@@ -1,5 +1,4 @@
 import { Meta, StoryObj } from "@storybook/react";
-import { useEffect } from "react";
 
 import Notification, { NotificationProps as Props } from "./Notification";
 
@@ -10,49 +9,44 @@ export default {
 
 type Story = StoryObj<typeof Notification>;
 
-const withPortalRoot = (Story: React.ComponentType<Props>, args: Props) => {
-  useEffect(() => {
-    let NotificationRoot = args.portalRootId ? document.getElementById(args.portalRootId) : null;
-    NotificationRoot = NotificationRoot ?? document.createElement("div");
-    if (!NotificationRoot) {
-      NotificationRoot = document.createElement("div");
-      NotificationRoot.setAttribute("id", args.portalRootId ?? "");
-      document.body.appendChild(NotificationRoot);
-    }
-  }, []);
-
-  return <Story {...args} />;
-};
-
 export const Success: Story = {
-  render: (args: Props) => withPortalRoot(Notification, args),
+  render: (args: Props) => (
+    <div className="p-10">
+      <Notification {...args} />
+    </div>
+  ),
   args: {
     title: "Success! Your notes were just saved!",
     message: "Your notes were just saved!",
     type: "success",
-    open: true,
-    portalRootId: "notification-root"
+    open: true
   }
 };
 
 export const Error: Story = {
-  render: (args: Props) => withPortalRoot(Notification, args),
+  render: (args: Props) => (
+    <div className="p-10">
+      <Notification {...args} />
+    </div>
+  ),
   args: {
     title: "Your critical message - make it short",
     message: "Describe the event and give further instruction if needed, including links to other pages.",
     type: "error",
-    open: true,
-    portalRootId: "notification-root"
+    open: true
   }
 };
 
 export const Warning: Story = {
-  render: (args: Props) => withPortalRoot(Notification, args),
+  render: (args: Props) => (
+    <div className="p-10">
+      <Notification {...args} />
+    </div>
+  ),
   args: {
     title: "Your polygon has been edited. Run a validation check.",
     message: "This is required for site approval.",
     type: "warning",
-    open: true,
-    portalRootId: "notification-root"
+    open: true
   }
 };
diff --git a/src/components/elements/Notification/Notification.tsx b/src/components/elements/Notification/Notification.tsx
index f9b00508e..fecf29c40 100644
--- a/src/components/elements/Notification/Notification.tsx
+++ b/src/components/elements/Notification/Notification.tsx
@@ -2,7 +2,6 @@ import { useT } from "@transifex/react";
 import classNames from "classnames";
 import { has } from "lodash";
 import { FC, useEffect, useMemo, useState } from "react";
-import ReactDOM from "react-dom";
 import { When } from "react-if";
 import { twMerge as tw } from "tailwind-merge";
 
@@ -11,22 +10,21 @@ import Icon, { IconNames } from "@/components/extensive/Icon/Icon";
 import Text from "../Text/Text";
 import { TYPE_CLASSES } from "./constants/baseClasses";
 import { TEXT_CLASSES } from "./constants/textClasses";
-import withNotificationRoot from "./withNotificationRoot";
 
 export interface NotificationProps extends React.HTMLAttributes<HTMLDivElement> {
   type?: "success" | "error" | "warning";
   message: string;
   title: string;
   open: boolean;
-  portalRootId?: string;
 }
 
 const Notification: FC<NotificationProps> = props => {
-  const { type = "default", message, className, title, open, portalRootId = "notification-root", ...rest } = props;
-  const [openNotification, setOpenNotification] = useState(open);
+  const { type = "default", message, className, title, open, ...rest } = props;
   const t = useT();
+  const [openNotification, setOpenNotification] = useState(open);
 
   const textClasses = useMemo(() => (has(TEXT_CLASSES, type) ? TEXT_CLASSES[type] : TEXT_CLASSES.default), [type]);
+
   const notificationClasses = useMemo(
     () => (has(TYPE_CLASSES, type) ? TYPE_CLASSES[type] : TYPE_CLASSES.default),
     [type]
@@ -40,7 +38,7 @@ const Notification: FC<NotificationProps> = props => {
     setOpenNotification(false);
   };
 
-  return ReactDOM.createPortal(
+  return (
     <div className="fixed top-[86px] right-[1.5vw] z-[1000000] flex w-[28vw] shadow-black">
       {openNotification ? (
         <>
@@ -76,9 +74,8 @@ const Notification: FC<NotificationProps> = props => {
       ) : (
         <></>
       )}
-    </div>,
-    document.getElementById(portalRootId)!
+    </div>
   );
 };
 
-export default withNotificationRoot(Notification);
+export default Notification;
diff --git a/src/components/elements/Notification/__snapshots__/Notification.stories.storyshot b/src/components/elements/Notification/__snapshots__/Notification.stories.storyshot
index eef364986..999be0f8e 100644
--- a/src/components/elements/Notification/__snapshots__/Notification.stories.storyshot
+++ b/src/components/elements/Notification/__snapshots__/Notification.stories.storyshot
@@ -5,33 +5,54 @@ exports[`Storyshots Components/Elements/Notification Error 1`] = `
   className="p-10"
 >
   <div
-    className="flex items-start rounded-lg font-bold tracking-tighter leading-16 p-4 max-w-[35vw] bg-white shadow-[0_0_5px_0_rgba(0,0,0,0.2)] text-bold-body-300 group:text-error-600"
+    className="fixed top-[86px] right-[1.5vw] z-[1000000] flex w-[28vw] shadow-black"
   >
     <div
-      className="mr-2"
+      className="flex items-start rounded-lg font-bold tracking-tighter leading-16 p-4 max-w-[35vw] bg-white shadow-[0_0_5px_0_rgba(0,0,0,0.2)] text-bold-body-300 group:text-error-600"
     >
       <div
-        style={
-          Object {
-            "height": 24,
-            "width": 24,
-          }
-        }
-      />
-    </div>
-    <div>
-      <p
-        className="text-error-600 text-bold-body-300"
-        data-testid="txt"
+        className="mr-2"
       >
-        Your critical message - make it short
-      </p>
-      <p
-        className="mt-2 !font-primary text-body-200"
-        data-testid="txt"
+        <div
+          style={
+            Object {
+              "height": 24,
+              "width": 24,
+            }
+          }
+        />
+      </div>
+      <div
+        className="w-full"
       >
-        Describe the event and give further instruction if needed, including links to other pages.
-      </p>
+        <div>
+          <p
+            className="w-full text-error-600 text-bold-body-300"
+            data-testid="txt"
+          >
+            <button
+              className="float-right text-neutral-400 hover:opacity-60"
+              onClick={[Function]}
+            >
+              <div
+                style={
+                  Object {
+                    "height": undefined,
+                    "width": 24,
+                  }
+                }
+              />
+            </button>
+            Your critical message - make it short
+          </p>
+        </div>
+        <p
+          className="mt-2 !font-primary text-body-200"
+          data-testid="txt"
+        >
+          Describe the event and give further instruction if needed, including links to other pages.
+        </p>
+      </div>
     </div>
   </div>
 </div>
@@ -42,33 +63,54 @@ exports[`Storyshots Components/Elements/Notification Success 1`] = `
   className="p-10"
 >
   <div
-    className="flex items-start rounded-lg font-bold tracking-tighter leading-16 p-4 max-w-[35vw] bg-white shadow-[0_0_5px_0_rgba(0,0,0,0.2)] text-bold-body-300 group:text-success-600"
+    className="fixed top-[86px] right-[1.5vw] z-[1000000] flex w-[28vw] shadow-black"
   >
     <div
-      className="mr-2"
+      className="flex items-start rounded-lg font-bold tracking-tighter leading-16 p-4 max-w-[35vw] bg-white shadow-[0_0_5px_0_rgba(0,0,0,0.2)] text-bold-body-300 group:text-success-600"
     >
       <div
-        style={
-          Object {
-            "height": 24,
-            "width": 24,
-          }
-        }
-      />
-    </div>
-    <div>
-      <p
-        className="text-success-600 text-bold-body-300"
-        data-testid="txt"
+        className="mr-2"
       >
-        Success! Your notes were just saved!
-      </p>
-      <p
-        className="mt-2 !font-primary text-body-200"
-        data-testid="txt"
+        <div
+          style={
+            Object {
+              "height": 24,
+              "width": 24,
+            }
+          }
+        />
+      </div>
+      <div
+        className="w-full"
       >
-        Your notes were just saved!
-      </p>
+        <div>
+          <p
+            className="w-full text-success-600 text-bold-body-300"
+            data-testid="txt"
+          >
+            <button
+              className="float-right text-neutral-400 hover:opacity-60"
+              onClick={[Function]}
+            >
+              <div
+                style={
+                  Object {
+                    "height": undefined,
+                    "width": 24,
+                  }
+                }
+              />
+            </button>
+            Success! Your notes were just saved!
+          </p>
+        </div>
+        <p
+          className="mt-2 !font-primary text-body-200"
+          data-testid="txt"
+        >
+          Your notes were just saved!
+        </p>
+      </div>
     </div>
   </div>
 </div>
@@ -79,33 +121,54 @@ exports[`Storyshots Components/Elements/Notification Warning 1`] = `
   className="p-10"
 >
   <div
-    className="flex items-start rounded-lg font-bold tracking-tighter leading-16 p-4 max-w-[35vw] bg-white shadow-[0_0_5px_0_rgba(0,0,0,0.2)] text-bold-body-300 group:text-tertiary-600"
+    className="fixed top-[86px] right-[1.5vw] z-[1000000] flex w-[28vw] shadow-black"
   >
     <div
-      className="mr-2"
+      className="flex items-start rounded-lg font-bold tracking-tighter leading-16 p-4 max-w-[35vw] bg-white shadow-[0_0_5px_0_rgba(0,0,0,0.2)] text-bold-body-300 group:text-tertiary-600"
     >
       <div
-        style={
-          Object {
-            "height": 24,
-            "width": 24,
-          }
-        }
-      />
-    </div>
-    <div>
-      <p
-        className="text-tertiary-600 text-bold-body-300"
-        data-testid="txt"
+        className="mr-2"
       >
-        Your polygon has been edited. Run a validation check.
-      </p>
-      <p
-        className="mt-2 !font-primary text-body-200"
-        data-testid="txt"
+        <div
+          style={
+            Object {
+              "height": 24,
+              "width": 24,
+            }
+          }
+        />
+      </div>
+      <div
+        className="w-full"
       >
-        This is required for site approval.
-      </p>
+        <div>
+          <p
+            className="w-full text-tertiary-600 text-bold-body-300"
+            data-testid="txt"
+          >
+            <button
+              className="float-right text-neutral-400 hover:opacity-60"
+              onClick={[Function]}
+            >
+              <div
+                style={
+                  Object {
+                    "height": undefined,
+                    "width": 24,
+                  }
+                }
+              />
+            </button>
+            Your polygon has been edited. Run a validation check.
+          </p>
+        </div>
+        <p
+          className="mt-2 !font-primary text-body-200"
+          data-testid="txt"
+        >
+          This is required for site approval.
+        </p>
+      </div>
     </div>
   </div>
 </div>
diff --git a/src/components/elements/Notification/withNotificationRoot.tsx b/src/components/elements/Notification/withNotificationRoot.tsx
deleted file mode 100644
index eb6194ba5..000000000
--- a/src/components/elements/Notification/withNotificationRoot.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-import { useEffect } from "react";
-
-const withNotificationRoot = (Component: React.ComponentType<any>) => {
-  useEffect(() => {
-    const notificationRootId = "notification-root";
-    let notificationRoot = document.getElementById(notificationRootId);
-    if (!notificationRoot) {
-      notificationRoot = document.createElement("div");
-      notificationRoot.setAttribute("id", notificationRootId);
-      document.body.appendChild(notificationRoot);
-    }
-    return () => {
-      document.body.removeChild(notificationRoot);
-    };
-  }, []);
-
-  return (props: any) => <Component {...props} portalRootId="notification-root" />;
-};
-
-export default withNotificationRoot;

From dd09f00b2da64f87d5b2db8e88760933122b1326 Mon Sep 17 00:00:00 2001
From: Dotty <dottykurmi123@gmail.com>
Date: Fri, 7 Jun 2024 16:36:48 -0400
Subject: [PATCH 16/17] update menu

---
 src/components/elements/Menu/Menu.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/elements/Menu/Menu.tsx b/src/components/elements/Menu/Menu.tsx
index c69096379..9e3a7f63f 100644
--- a/src/components/elements/Menu/Menu.tsx
+++ b/src/components/elements/Menu/Menu.tsx
@@ -162,6 +162,7 @@ const Menu = (props: MenuProps) => {
 
     return styles;
   };
+
   return (
     <div
       ref={menuContainerRef}

From c2764c0cdb83f1c377c7a94395cd9de7db389265 Mon Sep 17 00:00:00 2001
From: Nathan Curtis <nathan.curtis@gmail.com>
Date: Fri, 7 Jun 2024 14:03:40 -0700
Subject: [PATCH 17/17] Regenerate snapshots.

---
 .../TreeSpeciesInput.stories.storyshot        | 20 +++++++++----------
 .../__snapshots__/TextArea.stories.storyshot  |  6 +++---
 2 files changed, 13 insertions(+), 13 deletions(-)

diff --git a/src/components/elements/Inputs/TreeSpeciesInput/__snapshots__/TreeSpeciesInput.stories.storyshot b/src/components/elements/Inputs/TreeSpeciesInput/__snapshots__/TreeSpeciesInput.stories.storyshot
index d264ad7ec..0e6037e87 100644
--- a/src/components/elements/Inputs/TreeSpeciesInput/__snapshots__/TreeSpeciesInput.stories.storyshot
+++ b/src/components/elements/Inputs/TreeSpeciesInput/__snapshots__/TreeSpeciesInput.stories.storyshot
@@ -7,7 +7,7 @@ exports[`Storyshots Components/Elements/Inputs/TreeSpeciesInput Default 1`] = `
   <label
     className="mr-2 inline uppercase text-bold-body-300"
     data-testid="txt"
-    htmlFor=":r2c:"
+    htmlFor=":r2b:"
   >
     Tree Species Grown *
   </label>
@@ -19,7 +19,7 @@ exports[`Storyshots Components/Elements/Inputs/TreeSpeciesInput Default 1`] = `
       }
     }
     data-testid="txt"
-    id=":r2c:-description"
+    id=":r2b:-description"
   />
   <div>
     <div
@@ -47,11 +47,11 @@ exports[`Storyshots Components/Elements/Inputs/TreeSpeciesInput Default 1`] = `
             className="relative"
           >
             <input
-              aria-describedby=":r2d:-description"
+              aria-describedby=":r2c:-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=":r2d:"
+              id=":r2c:"
               name="name"
               onChange={[Function]}
               onKeyDownCapture={[Function]}
@@ -104,7 +104,7 @@ exports[`Storyshots Components/Elements/Inputs/TreeSpeciesInput With Number 1`]
   <label
     className="mr-2 inline uppercase text-bold-body-300"
     data-testid="txt"
-    htmlFor=":r2e:"
+    htmlFor=":r2d:"
   >
     Tree Species Grown *
   </label>
@@ -116,7 +116,7 @@ exports[`Storyshots Components/Elements/Inputs/TreeSpeciesInput With Number 1`]
       }
     }
     data-testid="txt"
-    id=":r2e:-description"
+    id=":r2d:-description"
   />
   <div>
     <div
@@ -150,11 +150,11 @@ exports[`Storyshots Components/Elements/Inputs/TreeSpeciesInput With Number 1`]
             className="relative"
           >
             <input
-              aria-describedby=":r2f:-description"
+              aria-describedby=":r2e:-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=":r2f:"
+              id=":r2e:"
               name="name"
               onChange={[Function]}
               onKeyDownCapture={[Function]}
@@ -170,11 +170,11 @@ exports[`Storyshots Components/Elements/Inputs/TreeSpeciesInput With Number 1`]
             className="relative"
           >
             <input
-              aria-describedby=":r2g:-description"
+              aria-describedby=":r2f:-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=":r2g:"
+              id=":r2f:"
               name="amount"
               onChange={[Function]}
               onKeyDown={[Function]}
diff --git a/src/components/elements/Inputs/textArea/__snapshots__/TextArea.stories.storyshot b/src/components/elements/Inputs/textArea/__snapshots__/TextArea.stories.storyshot
index 03a73a5d1..56acd742b 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=":r2b:"
+    htmlFor=":r2g:"
   >
     Input Label 
   </label>
@@ -19,11 +19,11 @@ exports[`Storyshots Components/Elements/Inputs/TextArea Default 1`] = `
       }
     }
     data-testid="txt"
-    id=":r2b:-description"
+    id=":r2g:-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=":r2b:"
+    id=":r2g:"
     onChange={[Function]}
     placeholder="Input placeholder"
   />