diff --git a/src/assets/icons/image-icon.svg b/src/assets/icons/image-icon.svg
new file mode 100644
index 000000000..4968120d8
--- /dev/null
+++ b/src/assets/icons/image-icon.svg
@@ -0,0 +1,3 @@
+<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M9.8 13H3.62091C3.21703 13 3.0151 13 2.92159 12.9201C2.84045 12.8509 2.79739 12.7469 2.80577 12.6405C2.81541 12.5179 2.95821 12.3751 3.24379 12.0895L8.9124 6.42093C9.1764 6.15693 9.30847 6.02487 9.46067 5.97547C9.59453 5.93193 9.7388 5.93193 9.87267 5.97547C10.0249 6.02487 10.1569 6.15693 10.4209 6.42093L13 9V9.8M9.8 13C10.9201 13 11.4801 13 11.908 12.782C12.2843 12.5903 12.5903 12.2843 12.782 11.908C13 11.4801 13 10.9201 13 9.8M9.8 13H4.2C3.07989 13 2.51984 13 2.09202 12.782C1.71569 12.5903 1.40973 12.2843 1.21799 11.908C1 11.4801 1 10.9201 1 9.8V4.2C1 3.07989 1 2.51984 1.21799 2.09202C1.40973 1.71569 1.71569 1.40973 2.09202 1.21799C2.51984 1 3.07989 1 4.2 1H9.8C10.9201 1 11.4801 1 11.908 1.21799C12.2843 1.40973 12.5903 1.71569 12.782 2.09202C13 2.51984 13 3.07989 13 4.2V9.8M6 4.66667C6 5.40305 5.40305 6 4.66667 6C3.93029 6 3.33333 5.40305 3.33333 4.66667C3.33333 3.93029 3.93029 3.33333 4.66667 3.33333C5.40305 3.33333 6 3.93029 6 4.66667Z" stroke="#637579" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/src/components/elements/Button/Button.tsx b/src/components/elements/Button/Button.tsx
index 996841b70..bea3f069d 100644
--- a/src/components/elements/Button/Button.tsx
+++ b/src/components/elements/Button/Button.tsx
@@ -28,7 +28,8 @@ export interface IButtonProps extends Omit<HTMLProps<HTMLElement>, "as"> {
     | "white-toggle"
     | "white-border"
     | "orange"
-    | "transparent-toggle";
+    | "transparent-toggle"
+    | "white-button-map";
   fullWidth?: boolean;
   shallow?: boolean;
 }
@@ -151,6 +152,11 @@ const Button: FC<IButtonProps> = props => {
           container: "group bg-transparent px-3 py-1 rounded",
           span: "text-14-light text-darkCustom-100"
         };
+      case "white-button-map":
+        return {
+          container: "h-fit rounded-lg bg-white px-4 py-2 shadow hover:bg-neutral-200",
+          span: "flex items-center gap-2"
+        };
       default:
         return { container: "", span: "" };
     }
diff --git a/src/components/elements/Map-mapbox/Map.tsx b/src/components/elements/Map-mapbox/Map.tsx
index cb7c8049c..1b5b9bcc9 100644
--- a/src/components/elements/Map-mapbox/Map.tsx
+++ b/src/components/elements/Map-mapbox/Map.tsx
@@ -22,6 +22,7 @@ import type { TooltipType } from "./Map.d";
 import CheckPolygonControl from "./MapControls/CheckPolygonControl";
 import EditControl from "./MapControls/EditControl";
 import { FilterControl } from "./MapControls/FilterControl";
+import ImageCheck from "./MapControls/ImageCheck";
 import ImageControl from "./MapControls/ImageControl";
 import PolygonCheck from "./MapControls/PolygonCheck";
 import { StyleControl } from "./MapControls/StyleControl";
@@ -274,8 +275,9 @@ export const MapContainer = ({
             <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 position="bottom-right" className="bottom-8 flex flex-row gap-2">
+          <ImageCheck />
+          <ViewImageCarousel />
         </ControlGroup>
       </When>
       <When condition={showLegend}>
diff --git a/src/components/elements/Map-mapbox/MapControls/ImageCheck.tsx b/src/components/elements/Map-mapbox/MapControls/ImageCheck.tsx
new file mode 100644
index 000000000..98e6fc1ad
--- /dev/null
+++ b/src/components/elements/Map-mapbox/MapControls/ImageCheck.tsx
@@ -0,0 +1,23 @@
+import { useT } from "@transifex/react";
+import { useState } from "react";
+
+import Button from "../../Button/Button";
+import Checkbox from "../../Inputs/Checkbox/Checkbox";
+import Text from "../../Text/Text";
+import { MiniGallery } from "./MiniGallery";
+
+const ImageCheck = () => {
+  const t = useT();
+  const [viewImages, setViewImages] = useState(false);
+  return (
+    <div className="relarive">
+      <MiniGallery viewImages={viewImages} setViewImages={setViewImages} />
+      <Button variant="white-button-map" className="flex items-center gap-2" onClick={() => setViewImages(!viewImages)}>
+        <Checkbox name={""} className="leading-3" checked={viewImages} />
+        <Text variant="text-12-bold"> {t("Images")}</Text>
+      </Button>
+    </div>
+  );
+};
+
+export default ImageCheck;
diff --git a/src/components/elements/Map-mapbox/MapControls/MiniGallery.tsx b/src/components/elements/Map-mapbox/MapControls/MiniGallery.tsx
new file mode 100644
index 000000000..c14aa84de
--- /dev/null
+++ b/src/components/elements/Map-mapbox/MapControls/MiniGallery.tsx
@@ -0,0 +1,63 @@
+import { useT } from "@transifex/react";
+import classNames from "classnames";
+import React, { Dispatch, SetStateAction } from "react";
+import { Navigation } from "swiper";
+
+import Carousel from "@/components/extensive/Carousel/Carousel";
+import Icon from "@/components/extensive/Icon/Icon";
+import { IconNames } from "@/components/extensive/Icon/Icon";
+import { dataImageGallery } from "@/components/extensive/Modal/ModalContent/MockedData";
+import ModalImageGallery from "@/components/extensive/Modal/ModalImageGallery";
+import { useModalContext } from "@/context/modal.provider";
+
+import ImageWithPlaceholder from "../../ImageWithPlaceholder/ImageWithPlaceholder";
+import Text from "../../Text/Text";
+
+export const MiniGallery = ({
+  viewImages,
+  setViewImages
+}: {
+  viewImages: boolean;
+  setViewImages: Dispatch<SetStateAction<boolean>>;
+}) => {
+  const { openModal, closeModal } = useModalContext();
+
+  const openFormModalHandlerImageGallery = () => {
+    openModal(<ModalImageGallery onClose={closeModal} tabItems={dataImageGallery} title={""} />);
+  };
+  const t = useT();
+  return (
+    <div
+      className={classNames("absolute right-1/2 bottom-full h-[250px] w-[200px] rounded-lg bg-white p-2", {
+        hidden: !viewImages
+      })}
+    >
+      <div className="relative h-[calc(100%_-_48px)]">
+        <Carousel
+          className="test mb-2 h-full"
+          swiperClassName="h-full"
+          swiperSlideClassName="h-full"
+          items={dataImageGallery[0].images}
+          carouselItem={item => (
+            <ImageWithPlaceholder className="h-full" alt={t("Image not available")} imageUrl={item.src} />
+          )}
+          modules={[Navigation]}
+          slidesPerView={1}
+          spaceBetween={10}
+          hidePaginationBullet
+          smallSwiperButtons
+        />
+        <button
+          onClick={() => setViewImages(false)}
+          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>
+      </div>
+      <button onClick={openFormModalHandlerImageGallery}>
+        <Text variant="text-12-bold">TerraMatch Sample</Text>
+        <Text variant="text-12-light"> December 29, 2023</Text>
+      </button>
+    </div>
+  );
+};
diff --git a/src/components/elements/Map-mapbox/MapControls/ViewImageCarousel.tsx b/src/components/elements/Map-mapbox/MapControls/ViewImageCarousel.tsx
index 8196394b4..6337c97ab 100644
--- a/src/components/elements/Map-mapbox/MapControls/ViewImageCarousel.tsx
+++ b/src/components/elements/Map-mapbox/MapControls/ViewImageCarousel.tsx
@@ -1,23 +1,14 @@
 import { t } from "@transifex/native";
-import classNames from "classnames";
-import { Dispatch, SetStateAction } from "react";
-import { Navigation } from "swiper";
 
-import Carousel from "@/components/extensive/Carousel/Carousel";
 import Icon, { IconNames } from "@/components/extensive/Icon/Icon";
 import { dataImageGallery } from "@/components/extensive/Modal/ModalContent/MockedData";
 import ModalImageGallery from "@/components/extensive/Modal/ModalImageGallery";
 import { useModalContext } from "@/context/modal.provider";
 
+import Button from "../../Button/Button";
 import Text from "../../Text/Text";
 
-const ViewImageCarousel = ({
-  viewImages,
-  setViewImages
-}: {
-  viewImages: boolean;
-  setViewImages: Dispatch<SetStateAction<boolean>>;
-}) => {
+const ViewImageCarousel = () => {
   const { openModal, closeModal } = useModalContext();
 
   const openFormModalHandlerImageGallery = () => {
@@ -26,42 +17,10 @@ const ViewImageCarousel = ({
 
   return (
     <div className="relative">
-      <div
-        className={classNames("absolute right-1/2 bottom-0 h-[250px] w-[200px] rounded-lg bg-white p-2", {
-          hidden: !viewImages
-        })}
-      >
-        <div className="relative h-[calc(100%_-_48px)]">
-          <Carousel
-            className="test mb-2 h-full"
-            swiperClassName="h-full"
-            swiperSlideClassName="h-full"
-            items={dataImageGallery[0].images}
-            carouselItem={item => <img className="h-full" alt="" src={item.src} />}
-            modules={[Navigation]}
-            slidesPerView={1}
-            spaceBetween={10}
-            hidePaginationBullet
-            smallSwiperButtons
-          />
-          <button
-            onClick={() => setViewImages(false)}
-            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>
-        </div>
-        <button onClick={openFormModalHandlerImageGallery}>
-          <Text variant="text-12-bold">TerraMatch Sample</Text>
-          <Text variant="text-12-light"> December 29, 2023</Text>
-        </button>
-      </div>
-      <button
-        className="text-12-bold h-fit rounded-lg bg-white px-5 py-2 shadow hover:bg-neutral-200"
-        onClick={() => setViewImages(!viewImages)}
-      >
-        {t("View Images")}
-      </button>
+      <Button variant="white-button-map" className="flex items-center gap-2" onClick={openFormModalHandlerImageGallery}>
+        <Icon name={IconNames.IMAGE_ICON} className="h-4 w-4" />
+        <Text variant="text-12-bold"> {t("View Gallery")}</Text>
+      </Button>
     </div>
   );
 };
diff --git a/src/components/extensive/Icon/Icon.tsx b/src/components/extensive/Icon/Icon.tsx
index 84043b6e1..8f838b48a 100644
--- a/src/components/extensive/Icon/Icon.tsx
+++ b/src/components/extensive/Icon/Icon.tsx
@@ -154,7 +154,8 @@ export enum IconNames {
   IC_DRAFT = "ic_draft",
   IC_NEEDS_MORE_INFORMATION = "ic_needs-more-information",
   IC_SUBMITTED = "ic_submitted",
-  IC_ARROW_COLLAPSE = "ic-arrow-collapse"
+  IC_ARROW_COLLAPSE = "ic-arrow-collapse",
+  IMAGE_ICON = "image-icon"
 }
 
 export interface IconProps {
diff --git a/src/components/extensive/Modal/ModalContent/MockedData.ts b/src/components/extensive/Modal/ModalContent/MockedData.ts
index ebc75687b..f9a29cfe3 100644
--- a/src/components/extensive/Modal/ModalContent/MockedData.ts
+++ b/src/components/extensive/Modal/ModalContent/MockedData.ts
@@ -23,27 +23,45 @@ export const dataImageGallery = [
     images: [
       {
         id: "1",
-        src: "/Images/image-modal-main.png"
+        src: "/Images/image-modal-main.png",
+        title: "TerraMatch Sample",
+        dateCreated: "December 29, 2024",
+        geoTag: "Not Geo-Referenced"
       },
       {
         id: "2",
-        src: "/Images/image-modal-1.png"
+        src: "/Images/image-modal-1.png",
+        title: "TerraMatch Sample",
+        dateCreated: "December 29, 2024",
+        geoTag: "Not Geo-Referenced"
       },
       {
         id: "3",
-        src: "/Images/image-modal-2.png"
+        src: "/Images/image-modal-2.png",
+        title: "TerraMatch Sample",
+        dateCreated: "December 29, 2024",
+        geoTag: "Not Geo-Referenced"
       },
       {
         id: "4",
-        src: "/Images/image-modal-3.png"
+        src: "/Images/image-modal-3.png",
+        title: "TerraMatch Sample",
+        dateCreated: "December 29, 2024",
+        geoTag: "Not Geo-Referenced"
       },
       {
         id: "5",
-        src: "/Images/image-modal-4.png"
+        src: "/Images/image-modal-4.png",
+        title: "TerraMatch Sample",
+        dateCreated: "December 29, 2024",
+        geoTag: "Not Geo-Referenced"
       },
       {
         id: "6",
-        src: "/Images/image-modal-5.png"
+        src: "/Images/image-modal-5.png",
+        title: "TerraMatch Sample",
+        dateCreated: "December 29, 2024",
+        geoTag: "Not Geo-Referenced"
       }
     ]
   },
@@ -53,27 +71,45 @@ export const dataImageGallery = [
     images: [
       {
         id: "1",
-        src: "/Images/image-modal-main.png"
+        src: "/Images/image-modal-main.png",
+        title: "TerraMatch Sample",
+        dateCreated: "December 29, 2024",
+        geoTag: "Not Geo-Referenced"
       },
       {
         id: "2",
-        src: "/Images/image-modal-1.png"
+        src: "/Images/image-modal-1.png",
+        title: "TerraMatch Sample",
+        dateCreated: "December 29, 2024",
+        geoTag: "Not Geo-Referenced"
       },
       {
         id: "3",
-        src: "/Images/image-modal-2.png"
+        src: "/Images/image-modal-2.png",
+        title: "TerraMatch Sample",
+        dateCreated: "December 29, 2024",
+        geoTag: "Not Geo-Referenced"
       },
       {
         id: "4",
-        src: "/Images/image-modal-3.png"
+        src: "/Images/image-modal-3.png",
+        title: "TerraMatch Sample",
+        dateCreated: "December 29, 2024",
+        geoTag: "Not Geo-Referenced"
       },
       {
         id: "5",
-        src: "/Images/image-modal-4.png"
+        src: "/Images/image-modal-4.png",
+        title: "TerraMatch Sample",
+        dateCreated: "December 29, 2024",
+        geoTag: "Not Geo-Referenced"
       },
       {
         id: "6",
-        src: "/Images/image-modal-5.png"
+        src: "/Images/image-modal-5.png",
+        title: "TerraMatch Sample",
+        dateCreated: "December 29, 2024",
+        geoTag: "Not Geo-Referenced"
       }
     ]
   }
diff --git a/src/components/extensive/Modal/ModalImageGallery.tsx b/src/components/extensive/Modal/ModalImageGallery.tsx
index 4ee677a99..c5cd25754 100644
--- a/src/components/extensive/Modal/ModalImageGallery.tsx
+++ b/src/components/extensive/Modal/ModalImageGallery.tsx
@@ -14,6 +14,9 @@ import { ModalBaseImageGallery } from "./ModalsBases";
 export interface ImageItem {
   id: string;
   src: string;
+  title: string;
+  dateCreated: string;
+  geoTag: string;
 }
 
 export interface TabImagesItem {
@@ -87,16 +90,41 @@ const ModalImageGallery: FC<ModalImageGalleryProps> = ({
             setSelectedImage={setSelectedImage}
             carouselItem={item => (
               <div className="relative h-full px-24">
-                <div className="absolute left-[calc(50%_-_32px)] bottom-[24px] z-10 flex items-center justify-center rounded-xl bg-darkCustom py-[5px] px-[8px]">
-                  <Text variant="text-13" className="text-white">
-                    {selectedImage + 1} {t("of")} {tabItems.find(tab => tab.id === selectedTab)?.images.length}
+                <div className="absolute left-[24px] top-[24px] z-10 flex translate-x-[75%] flex-col items-center justify-center gap-[2px] rounded-xl border border-white bg-blueCustom-200 p-3">
+                  <Text variant="text-12-bold" className="text-black">
+                    {
+                      tabItems
+                        .find(tab => tab.id === selectedTab)
+                        ?.images.find((_, index: number) => index === selectedImage)?.title
+                    }
+                  </Text>
+                  <Text variant="text-12-light" className="text-black">
+                    {
+                      tabItems
+                        .find(tab => tab.id === selectedTab)
+                        ?.images.find((_, index: number) => index === selectedImage)?.dateCreated
+                    }
+                  </Text>
+                </div>
+                <div className="absolute right-[24px] top-[24px] z-10 flex translate-x-[-75%] items-center justify-center rounded-xl bg-red-100 py-[2px] px-3">
+                  <Text variant="text-12-semibold" className="text-red-200">
+                    {
+                      tabItems
+                        .find(tab => tab.id === selectedTab)
+                        ?.images.find((_, index: number) => index === selectedImage)?.geoTag
+                    }
                   </Text>
                 </div>
                 <ImageWithPlaceholder
                   className="h-full rounded-xl bg-primary-200"
                   alt={t("Image not available")}
                   imageUrl={item.src}
-                ></ImageWithPlaceholder>
+                />
+                <div className="absolute left-[calc(50%_-_32px)] bottom-[24px] z-10 flex items-center justify-center rounded-xl bg-darkCustom py-[5px] px-[8px]">
+                  <Text variant="text-13" className="text-white">
+                    {selectedImage + 1} of {tabItems.find(tab => tab.id === selectedTab)?.images.length}
+                  </Text>
+                </div>
               </div>
             )}
             items={tabItems.find(tab => tab.id === selectedTab)?.images ?? []}
diff --git a/tailwind.config.js b/tailwind.config.js
index f56091ccd..98ae2d35a 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -131,6 +131,7 @@ module.exports = {
         700: "#092C3C",
         600: "#33525c",
         250: "#11093C",
+        200: "#E6E9EC",
         100: "#cfe6f4",
         50: "#f1fafd",
         10: "#eaf7fc"
@@ -172,7 +173,11 @@ module.exports = {
         DEFAULT: "#FCFBE8",
         500: "#F3EFB0"
       },
-      red: "#FF6464"
+      red: {
+        DEFAULT: "#FF6464",
+        100: "#CBC8D2",
+        200: "#E42222"
+      }
     },
     boxShadow: {
       DEFAULT: "0px 4px 16px rgba(0, 0, 0, 0.12)",