diff --git a/src/admin/components/Actions/ListActionsCreate.tsx b/src/admin/components/Actions/ListActionsCreate.tsx
index 1b7763c24..5d0d8afc2 100644
--- a/src/admin/components/Actions/ListActionsCreate.tsx
+++ b/src/admin/components/Actions/ListActionsCreate.tsx
@@ -6,11 +6,11 @@ interface ListActionsCreateProps {
   onExport?: () => void;
 }
 
-const ListActionsCreate = (props: ListActionsCreateProps) => (
+const ListActionsCreate = ({ onExport }: ListActionsCreateProps) => (
   <TopToolbar>
     <CreateButton className="filter-button-page-admin" />
-    <When condition={!!props.onExport}>
-      <Button className="button-page-admin" label="Export" startIcon={<DownloadIcon />} onClick={props.onExport} />
+    <When condition={!!onExport}>
+      <Button className="button-page-admin" label="Export" startIcon={<DownloadIcon />} onClick={onExport} />
     </When>
   </TopToolbar>
 );
diff --git a/src/admin/components/ResourceTabs/PolygonReviewTab/components/ComentarySection/ComentarySection.tsx b/src/admin/components/ResourceTabs/PolygonReviewTab/components/ComentarySection/ComentarySection.tsx
new file mode 100644
index 000000000..82971c190
--- /dev/null
+++ b/src/admin/components/ResourceTabs/PolygonReviewTab/components/ComentarySection/ComentarySection.tsx
@@ -0,0 +1,69 @@
+import { When } from "react-if";
+
+import Commentary from "@/components/elements/Commentary/Commentary";
+import CommentaryBox from "@/components/elements/CommentaryBox/CommentaryBox";
+import Text from "@/components/elements/Text/Text";
+import Loader from "@/components/generic/Loading/Loader";
+import { useGetAuthMe } from "@/generated/apiComponents";
+
+const ComentarySection = ({
+  auditLogData,
+  refresh,
+  record,
+  entity,
+  viewCommentsList = true,
+  attachmentRefetch
+}: {
+  auditLogData?: any;
+  refresh?: any;
+  record?: any;
+  entity?: "Project" | "SitePolygon" | "Site";
+  viewCommentsList?: boolean;
+  attachmentRefetch?: any;
+}) => {
+  const { data: authMe } = useGetAuthMe({}) as {
+    data: {
+      data: any;
+      first_name: string;
+      last_name: string;
+    };
+  };
+
+  return (
+    <div className="flex flex-col gap-4">
+      <Text variant="text-16-bold">Send Comment</Text>
+      <CommentaryBox
+        name={authMe?.data.first_name}
+        lastName={authMe?.data.last_name}
+        refresh={refresh}
+        record={record}
+        entity={entity}
+      />
+      <When condition={viewCommentsList}>
+        <div className="max-h-[60vh] min-h-[10vh] grid-cols-[14%_20%_18%_15%_33%] overflow-auto">
+          {auditLogData ? (
+            auditLogData.length > 0 ? (
+              auditLogData
+                .filter((item: any) => item.type === "comment")
+                .map((item: any) => (
+                  <Commentary
+                    key={item.id}
+                    name={item?.first_name || item.created_by}
+                    lastName={item?.last_name}
+                    date={item.date_created}
+                    comentary={item.comment}
+                  />
+                ))
+            ) : (
+              <></>
+            )
+          ) : (
+            <Loader />
+          )}
+        </div>
+      </When>
+    </div>
+  );
+};
+
+export default ComentarySection;
diff --git a/src/admin/components/ResourceTabs/PolygonReviewTab/components/PolygonDrawer/components/PolygonValidation.tsx b/src/admin/components/ResourceTabs/PolygonReviewTab/components/PolygonDrawer/components/PolygonValidation.tsx
new file mode 100644
index 000000000..6423f11be
--- /dev/null
+++ b/src/admin/components/ResourceTabs/PolygonReviewTab/components/PolygonDrawer/components/PolygonValidation.tsx
@@ -0,0 +1,91 @@
+import React, { useEffect, useRef, useState } from "react";
+import { Else, If, Then } from "react-if";
+
+import Button from "@/components/elements/Button/Button";
+import Text from "@/components/elements/Text/Text";
+import Icon from "@/components/extensive/Icon/Icon";
+import { IconNames } from "@/components/extensive/Icon/Icon";
+
+export interface ICriteriaCheckItemProps {
+  id: string;
+  status: boolean;
+  label: string;
+  date?: string;
+}
+
+export interface ICriteriaCheckProps {
+  menu: ICriteriaCheckItemProps[];
+  clickedValidation: (value: boolean) => void;
+  status: boolean;
+}
+const PolygonValidation = (props: ICriteriaCheckProps) => {
+  const { clickedValidation, status, menu } = props;
+  const [failedValidationCounter, setFailedValidationCounter] = useState(0);
+  const [lastValidationDate, setLastValidationDate] = useState(new Date("1970-01-01"));
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  const formattedDate = (dateObject: Date) => {
+    const localDate = new Date(dateObject.getTime() - dateObject.getTimezoneOffset() * 60000);
+    return `${localDate.toLocaleTimeString("en-US", {
+      hour: "2-digit",
+      minute: "2-digit"
+    })} on ${localDate.toLocaleDateString("en-US", {
+      month: "short",
+      day: "2-digit",
+      year: "numeric"
+    })}`;
+  };
+
+  useEffect(() => {
+    if (menu) {
+      const lastValidationDate = menu.reduce((latestDate, record) => {
+        const currentDate = record.date ? new Date(record.date) : null;
+        return currentDate && currentDate > latestDate ? currentDate : latestDate;
+      }, new Date("1970-01-01"));
+      setLastValidationDate(lastValidationDate);
+
+      const failedValidationCounter = menu.reduce((count, record) => {
+        return record.status === false ? count + 1 : count;
+      }, 0);
+      setFailedValidationCounter(failedValidationCounter);
+    }
+  }, [menu]);
+
+  return (
+    <div>
+      <Button variant="orange" className="mb-4 px-10" onClick={() => clickedValidation(true)}>
+        Check Polygon
+      </Button>
+      <If condition={status}>
+        <Then>
+          <div className="mb-1 flex items-center">
+            <Text variant="text-14-bold" className="text-darkCustom">
+              {`${failedValidationCounter} out of ${menu.length}`} &nbsp;
+            </Text>
+            <Text variant="text-14" className="text-darkCustom">
+              criteria are not met
+            </Text>
+          </div>
+          <Text variant="text-10-light" className="mb-4 text-blueCustom-900 opacity-80">
+            Last check at {formattedDate(lastValidationDate)}
+          </Text>
+          <div ref={containerRef} className="flex max-h-[168px] flex-col gap-3 overflow-auto">
+            {menu.map(item => (
+              <div key={item.id} className="flex items-center gap-2">
+                <Icon name={item.status ? IconNames.ROUND_GREEN_TICK : IconNames.ROUND_RED_CROSS} className="h-4 w-4" />
+                <Text variant="text-14-light">{item.label}</Text>
+              </div>
+            ))}
+          </div>
+        </Then>
+        <Else>
+          <Text variant="text-14" className="text-darkCustom">
+            No criteria checked yet
+          </Text>
+        </Else>
+      </If>
+    </div>
+  );
+};
+
+export default PolygonValidation;
diff --git a/src/admin/components/ResourceTabs/PolygonReviewTab/components/PolygonDrawer/components/VersionHistory.tsx b/src/admin/components/ResourceTabs/PolygonReviewTab/components/PolygonDrawer/components/VersionHistory.tsx
new file mode 100644
index 000000000..2ce4d833b
--- /dev/null
+++ b/src/admin/components/ResourceTabs/PolygonReviewTab/components/PolygonDrawer/components/VersionHistory.tsx
@@ -0,0 +1,40 @@
+import { useT } from "@transifex/react";
+
+import Button from "@/components/elements/Button/Button";
+import Dropdown from "@/components/elements/Inputs/Dropdown/Dropdown";
+
+const dropdownOptions = [
+  {
+    title: "1213023412",
+    value: 1
+  },
+  {
+    title: "1213023414",
+    value: 2
+  }
+];
+const VersionHistory = () => {
+  const t = useT();
+  return (
+    <div className="flex flex-col gap-4">
+      <Dropdown
+        label="Polygon Version"
+        labelClassName="capitalize"
+        labelVariant="text-14-light"
+        options={dropdownOptions}
+        defaultValue={[1]}
+        onChange={() => {}}
+      />
+      <div className="mt-auto flex items-center justify-end gap-5">
+        <Button variant="semi-red" className="w-full">
+          {t("Delete")}
+        </Button>
+        <Button variant="semi-black" className="w-full">
+          {t("Create")}
+        </Button>
+      </div>
+    </div>
+  );
+};
+
+export default VersionHistory;
diff --git a/src/admin/components/ResourceTabs/PolygonReviewTab/components/PolygonStatus/StatusDisplay .tsx b/src/admin/components/ResourceTabs/PolygonReviewTab/components/PolygonStatus/StatusDisplay .tsx
new file mode 100644
index 000000000..78bd72d6b
--- /dev/null
+++ b/src/admin/components/ResourceTabs/PolygonReviewTab/components/PolygonStatus/StatusDisplay .tsx	
@@ -0,0 +1,248 @@
+import { useState } from "react";
+import { useShowContext } from "react-admin";
+
+import Button from "@/components/elements/Button/Button";
+import Notification from "@/components/elements/Notification/Notification";
+import Text from "@/components/elements/Text/Text";
+import ModalConfirm from "@/components/extensive/Modal/ModalConfirm";
+import { useModalContext } from "@/context/modal.provider";
+
+const menuPolygonOptions = [
+  {
+    title: "Submitted",
+    status: "submitted",
+    value: 1
+  },
+  {
+    title: "Needs More Information",
+    status: "needs-more-information",
+    value: 2
+  },
+  {
+    title: "Approved",
+    status: "approved",
+    value: 3
+  }
+];
+const menuSiteOptions = [
+  {
+    title: "Draft",
+    status: "draft",
+    value: 1
+  },
+  {
+    title: "Awaiting Approval",
+    status: "awaiting-approval",
+    value: 2
+  },
+  {
+    title: "Needs More Information",
+    status: "needs-more-information",
+    value: 3
+  },
+  {
+    title: "Planting in Progress",
+    status: "planting-in-progress",
+    value: 4
+  },
+  {
+    title: "Approved",
+    status: "approved",
+    value: 5
+  }
+];
+const menuProjectOptions = [
+  {
+    title: "Draft",
+    status: "draft",
+    value: 1
+  },
+  {
+    title: "Awaiting Approval",
+    status: "awaiting-approval",
+    value: 2
+  },
+  {
+    title: "Needs More Information",
+    status: "needs-more-information",
+    value: 3
+  },
+  {
+    title: "Approved",
+    status: "approved",
+    value: 4
+  }
+];
+
+export interface StatusProps {
+  titleStatus: "Site" | "Project" | "Polygon";
+  mutate?: any;
+  record?: any;
+  refresh?: any;
+  name: any;
+  refetchPolygon?: any;
+  setSelectedPolygon?: any;
+}
+
+const menuOptionsMap = {
+  Polygon: menuPolygonOptions,
+  Site: menuSiteOptions,
+  Project: menuProjectOptions
+};
+
+const DescriptionStatusMap = {
+  Polygon: "Are you sure you want to change the polygon status to",
+  Site: "Are you sure you want to change the site status to",
+  Project: "Are you sure you want to change the project status to"
+};
+
+const DescriptionRequestMap = {
+  Polygon: "Provide an explanation for your change request for the polygon",
+  Site: "Provide an explanation for your change request for the site",
+  Project: "Provide an explanation for your change request for the project"
+};
+
+const StatusDisplay = ({ titleStatus = "Polygon", mutate, refresh, name, record, setSelectedPolygon }: StatusProps) => {
+  const { refetch: reloadEntity } = useShowContext();
+  const [notificationStatus, setNotificationStatus] = useState<{
+    open: boolean;
+    message: string;
+    type: "success" | "error" | "warning";
+    title: string;
+  }>({
+    open: false,
+    message: "",
+    type: "success",
+    title: "Success!"
+  });
+
+  const { openModal, closeModal } = useModalContext();
+  const contentStatus = (
+    <Text variant="text-12-light" as="p" className="text-center">
+      {DescriptionStatusMap[titleStatus]} <b style={{ fontSize: "inherit" }}>{name}</b>?
+    </Text>
+  );
+  const contentRequest = (
+    <Text variant="text-12-light" as="p" className="text-center">
+      {DescriptionRequestMap[titleStatus]} <b style={{ fontSize: "inherit" }}>{name}</b>?
+    </Text>
+  );
+
+  const openFormModalHandlerStatus = () => {
+    openModal(
+      <ModalConfirm
+        title={`${titleStatus} Status Change`}
+        commentArea
+        menuLabel={""}
+        menu={menuOptionsMap[titleStatus]}
+        onClose={closeModal}
+        content={contentStatus}
+        onConfirm={async (text: any, opt) => {
+          const option = menuOptionsMap[titleStatus].find(option => option.value === opt[0]);
+          try {
+            const response = await mutate({
+              pathParams: { uuid: record?.uuid },
+              body: {
+                status: option?.status,
+                comment: text,
+                type: "status"
+              }
+            });
+            if (response.poly_id) {
+              setSelectedPolygon(response?.poly_id);
+            }
+            setNotificationStatus({
+              open: true,
+              message: "Your Status Update was just saved!",
+              type: "success",
+              title: "Success!"
+            });
+            setTimeout(() => {
+              setNotificationStatus({
+                open: false,
+                message: "",
+                type: "success",
+                title: "Success!"
+              });
+            }, 3000);
+          } catch (e) {
+            alert("The request encountered an issue, or the comment exceeds 255 characters.");
+            console.error(e);
+          } finally {
+            refresh();
+            reloadEntity();
+            closeModal();
+          }
+        }}
+      />
+    );
+  };
+
+  const openFormModalHandlerRequest = () => {
+    openModal(
+      <ModalConfirm
+        title={"Change Request"}
+        content={contentRequest}
+        commentArea
+        onClose={closeModal}
+        onConfirm={async (text: any, opt) => {
+          const option = menuOptionsMap[titleStatus].find(option => option.value === opt[0]);
+          try {
+            await mutate({
+              pathParams: { uuid: record?.uuid },
+              body: {
+                status: option?.status,
+                comment: text,
+                type: "change-request",
+                is_active: true,
+                request_removed: false
+              }
+            });
+            setNotificationStatus({
+              open: true,
+              message: "Your Change Request was just added!",
+              type: "success",
+              title: "Success!"
+            });
+            setTimeout(() => {
+              setNotificationStatus({
+                open: false,
+                message: "",
+                type: "success",
+                title: "Success!"
+              });
+            }, 3000);
+          } catch (e) {
+            alert("The request encountered an issue, or the comment exceeds 255 characters.");
+            console.error(e);
+          } finally {
+            refresh();
+            reloadEntity();
+            closeModal();
+          }
+        }}
+      />
+    );
+  };
+  return (
+    <>
+      <div className="flex flex-col items-center gap-4">
+        <div className="flex w-full items-center gap-4">
+          <Button className="w-full flex-1 border-[3px] border-primary" onClick={openFormModalHandlerStatus}>
+            <Text variant="text-12-bold">change status</Text>
+          </Button>
+          <Button
+            variant="semi-black"
+            className="w-full flex-1 whitespace-nowrap"
+            onClick={openFormModalHandlerRequest}
+          >
+            <Text variant="text-12-bold">Change Request</Text>
+          </Button>
+        </div>
+      </div>
+      <Notification {...notificationStatus} />
+    </>
+  );
+};
+
+export default StatusDisplay;
diff --git a/src/admin/components/ResourceTabs/PolygonReviewTab/components/SitePolygonStatus/SitePolygonStatus.tsx b/src/admin/components/ResourceTabs/PolygonReviewTab/components/SitePolygonStatus/SitePolygonStatus.tsx
new file mode 100644
index 000000000..69c60f858
--- /dev/null
+++ b/src/admin/components/ResourceTabs/PolygonReviewTab/components/SitePolygonStatus/SitePolygonStatus.tsx
@@ -0,0 +1,18 @@
+import StepProgressbar from "@/components/elements/ProgressBar/StepProgressbar/StepProgressbar";
+
+const polygonStatusLabels = [
+  { id: "1", label: "Draft" },
+  { id: "2", label: "Awaiting approval" },
+  { id: "3", label: "Needs more information" },
+  { id: "4", label: "Planting in progress" },
+  { id: "5", label: "Approved" }
+];
+
+const SitePolygonStatus = ({ statusLabel }: { statusLabel: string }) => {
+  let status = statusLabel === "Unkown" ? "Planting in progress" : statusLabel;
+  const statusIndex = polygonStatusLabels.findIndex(({ label }) => label === status);
+  const progress = statusIndex === -1 ? 0 : statusIndex * 25;
+  return <StepProgressbar color="primary" value={progress} labels={polygonStatusLabels} labelVariant="text-10" />;
+};
+
+export default SitePolygonStatus;
diff --git a/src/admin/components/ResourceTabs/PolygonReviewTab/components/StatusLeyend.tsx b/src/admin/components/ResourceTabs/PolygonReviewTab/components/StatusLeyend.tsx
new file mode 100644
index 000000000..8d257677d
--- /dev/null
+++ b/src/admin/components/ResourceTabs/PolygonReviewTab/components/StatusLeyend.tsx
@@ -0,0 +1,27 @@
+import Text from "@/components/elements/Text/Text";
+
+const StatusLeyend = () => {
+  return (
+    <div className="flex flex-col px-2">
+      <Text variant="text-16-bold" className="text-darkCustom">
+        Status Legend
+      </Text>
+      <div>
+        <Text variant="text-14-semibold" className="flex items-center gap-2 py-2 text-darkCustom">
+          <div className="aspect-square h-3 w-3 rounded-sm bg-pinkCustom" /> Status Legend
+        </Text>
+        <Text variant="text-14-semibold" className="flex items-center gap-2 py-2 text-darkCustom">
+          <div className="aspect-square h-3 w-3 rounded-sm bg-blue" /> Submitted
+        </Text>
+        <Text variant="text-14-semibold" className="flex items-center gap-2 py-2 text-darkCustom">
+          <div className="aspect-square h-3 w-3 rounded-sm bg-green" /> Approved
+        </Text>
+        <Text variant="text-14-semibold" className="flex items-center gap-2 py-2 text-darkCustom">
+          <div className="aspect-square h-3 w-3 rounded-sm bg-tertiary-600" /> Needs More Info
+        </Text>
+      </div>
+    </div>
+  );
+};
+
+export default StatusLeyend;