diff --git a/public/images/map-img.png b/public/images/map-img.png
new file mode 100644
index 000000000..feb3dc919
Binary files /dev/null and b/public/images/map-img.png differ
diff --git a/src/components/elements/Breadcrumbs/Breadcrumbs.tsx b/src/components/elements/Breadcrumbs/Breadcrumbs.tsx
index f71c23028..9fe404f44 100644
--- a/src/components/elements/Breadcrumbs/Breadcrumbs.tsx
+++ b/src/components/elements/Breadcrumbs/Breadcrumbs.tsx
@@ -5,22 +5,26 @@ import LinkWrapper from "@/components/elements/LinkWrapper/LinkWrapper";
 import Text from "@/components/elements/Text/Text";
 import Icon, { IconNames } from "@/components/extensive/Icon/Icon";
 import { History } from "@/context/routeHistory.provider";
+import { TextVariants } from "@/types/common";
 
 export interface BreadcrumbsProps extends DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement> {
   links: (Omit<History, "path"> & { path?: string })[];
+  clasNameText?: string;
+  textVariant?: TextVariants;
 }
 
-const Breadcrumbs = ({ className, links, ...props }: BreadcrumbsProps) => {
+const Breadcrumbs = ({ className, links, clasNameText, textVariant, ...props }: BreadcrumbsProps) => {
   return (
     <div {...props} className={classNames(className, "flex items-center gap-3")}>
       {links.map((item, index) => (
         <Fragment key={`${item.path} + ${index}`}>
           <LinkWrapper href={item.path}>
             <Text
-              variant="text-14-bold"
+              variant={textVariant || "text-14-bold"}
               className={classNames(
                 { "text-darkCustom opacity-60 hover:underline": !!item.path, "text-darkCustom": !item.path },
-                "line-clamp-1"
+                "line-clamp-1",
+                clasNameText
               )}
               title={item.title}
             >
diff --git a/src/components/elements/ImageGallery/ImageGalleryItem.tsx b/src/components/elements/ImageGallery/ImageGalleryItem.tsx
index f65330757..46d9ddfc8 100644
--- a/src/components/elements/ImageGallery/ImageGalleryItem.tsx
+++ b/src/components/elements/ImageGallery/ImageGalleryItem.tsx
@@ -5,6 +5,9 @@ import { DetailedHTMLProps, FC, HTMLAttributes } from "react";
 import { MenuItemProps } from "@/components/elements/Menu/Menu";
 import Text from "@/components/elements/Text/Text";
 import Icon, { IconNames } from "@/components/extensive/Icon/Icon";
+import { ModalId } from "@/components/extensive/Modal/ModalConst";
+import ModalImageDetails from "@/components/extensive/Modal/ModalImageDetails";
+import { useModalContext } from "@/context/modal.provider";
 
 import ImageWithChildren from "../ImageWithChildren/ImageWithChildren";
 import Menu from "../Menu/Menu";
@@ -28,12 +31,21 @@ export interface ImageGalleryItemProps extends DetailedHTMLProps<HTMLAttributes<
 }
 
 const ImageGalleryItem: FC<ImageGalleryItemProps> = ({ data, onClickGalleryItem, onDelete, className, ...rest }) => {
+  const { openModal, closeModal } = useModalContext();
   const t = useT();
 
   const handleDelete = () => {
     onDelete?.(data.uuid);
   };
 
+  const openMopdalImageDetail = () => {
+    openModal(
+      ModalId.MODAL_IMAGE_DETAIL,
+      <ModalImageDetails title="IMAGE DETAILS" onClose={() => closeModal(ModalId.MODAL_IMAGE_DETAIL)} />,
+      true
+    );
+  };
+
   const galeryMenu: MenuItemProps[] = [
     {
       id: "1",
@@ -41,7 +53,8 @@ const ImageGalleryItem: FC<ImageGalleryItemProps> = ({ data, onClickGalleryItem,
         <Text variant="text-12-bold" className="pr-3">
           {t("Edit Attributes")}
         </Text>
-      )
+      ),
+      onClick: openMopdalImageDetail
     },
     {
       id: "2",
@@ -103,12 +116,15 @@ const ImageGalleryItem: FC<ImageGalleryItemProps> = ({ data, onClickGalleryItem,
 
       <div className="p-4">
         <div className="flex items-center justify-between gap-1">
-          <Text variant="text-14-bold" className="flex items-center gap-1 text-darkCustom">
-            {data.label.split(":")[0]}:<Text variant="text-14-bold">{data.label.split(":")[1]}</Text>
+          <Text variant="text-16-bold" className="flex items-center gap-1 text-darkCustom">
+            {data.label.split(":")[0]}:<Text variant="text-16-bold">{data.label.split(":")[1]}</Text>
           </Text>
-          <div className="rounded-lg p-1 text-darkCustom hover:bg-grey-800 hover:text-primary">
+          <button
+            className="rounded-lg p-1 text-darkCustom hover:bg-grey-800 hover:text-primary"
+            onClick={openMopdalImageDetail}
+          >
             <Icon name={IconNames.EDIT} height={24} width={24} className="" />
-          </div>
+          </button>
         </div>
 
         {data.subtitle && (
diff --git a/src/components/elements/ImageGallery/__snapshots__/ImageGallery.stories.storyshot b/src/components/elements/ImageGallery/__snapshots__/ImageGallery.stories.storyshot
index f69bcec6a..4dcc86e6d 100644
--- a/src/components/elements/ImageGallery/__snapshots__/ImageGallery.stories.storyshot
+++ b/src/components/elements/ImageGallery/__snapshots__/ImageGallery.stories.storyshot
@@ -539,18 +539,19 @@ exports[`Storyshots Components/Elements/ImageGallery Default 1`] = `
           className="flex items-center justify-between gap-1"
         >
           <p
-            className="flex items-center gap-1 text-darkCustom text-14-bold"
+            className="flex items-center gap-1 text-darkCustom text-16-bold"
             data-testid="txt"
           >
             Quod distinctio reiciendis maxime enim et quidem.
             :
             <p
-              className="text-14-bold"
+              className="text-16-bold"
               data-testid="txt"
             />
           </p>
-          <div
+          <button
             className="rounded-lg p-1 text-darkCustom hover:bg-grey-800 hover:text-primary"
+            onClick={[Function]}
           >
             <div
               style={
@@ -560,7 +561,7 @@ exports[`Storyshots Components/Elements/ImageGallery Default 1`] = `
                 }
               }
             />
-          </div>
+          </button>
         </div>
       </div>
     </div>
@@ -710,18 +711,19 @@ exports[`Storyshots Components/Elements/ImageGallery Default 1`] = `
           className="flex items-center justify-between gap-1"
         >
           <p
-            className="flex items-center gap-1 text-darkCustom text-14-bold"
+            className="flex items-center gap-1 text-darkCustom text-16-bold"
             data-testid="txt"
           >
             Blanditiis magnam quae labore vel dicta quasi qui.
             :
             <p
-              className="text-14-bold"
+              className="text-16-bold"
               data-testid="txt"
             />
           </p>
-          <div
+          <button
             className="rounded-lg p-1 text-darkCustom hover:bg-grey-800 hover:text-primary"
+            onClick={[Function]}
           >
             <div
               style={
@@ -731,7 +733,7 @@ exports[`Storyshots Components/Elements/ImageGallery Default 1`] = `
                 }
               }
             />
-          </div>
+          </button>
         </div>
       </div>
     </div>
@@ -881,18 +883,19 @@ exports[`Storyshots Components/Elements/ImageGallery Default 1`] = `
           className="flex items-center justify-between gap-1"
         >
           <p
-            className="flex items-center gap-1 text-darkCustom text-14-bold"
+            className="flex items-center gap-1 text-darkCustom text-16-bold"
             data-testid="txt"
           >
             Aliquam quidem cupiditate reprehenderit incidunt.
             :
             <p
-              className="text-14-bold"
+              className="text-16-bold"
               data-testid="txt"
             />
           </p>
-          <div
+          <button
             className="rounded-lg p-1 text-darkCustom hover:bg-grey-800 hover:text-primary"
+            onClick={[Function]}
           >
             <div
               style={
@@ -902,7 +905,7 @@ exports[`Storyshots Components/Elements/ImageGallery Default 1`] = `
                 }
               }
             />
-          </div>
+          </button>
         </div>
       </div>
     </div>
@@ -1060,18 +1063,19 @@ exports[`Storyshots Components/Elements/ImageGallery Default 1`] = `
           className="flex items-center justify-between gap-1"
         >
           <p
-            className="flex items-center gap-1 text-darkCustom text-14-bold"
+            className="flex items-center gap-1 text-darkCustom text-16-bold"
             data-testid="txt"
           >
             Doloremque quisquam hic pariatur in dolores reprehenderit illo.
             :
             <p
-              className="text-14-bold"
+              className="text-16-bold"
               data-testid="txt"
             />
           </p>
-          <div
+          <button
             className="rounded-lg p-1 text-darkCustom hover:bg-grey-800 hover:text-primary"
+            onClick={[Function]}
           >
             <div
               style={
@@ -1081,7 +1085,7 @@ exports[`Storyshots Components/Elements/ImageGallery Default 1`] = `
                 }
               }
             />
-          </div>
+          </button>
         </div>
       </div>
     </div>
@@ -1231,18 +1235,19 @@ exports[`Storyshots Components/Elements/ImageGallery Default 1`] = `
           className="flex items-center justify-between gap-1"
         >
           <p
-            className="flex items-center gap-1 text-darkCustom text-14-bold"
+            className="flex items-center gap-1 text-darkCustom text-16-bold"
             data-testid="txt"
           >
             Dignissimos unde tempore modi aut ut.
             :
             <p
-              className="text-14-bold"
+              className="text-16-bold"
               data-testid="txt"
             />
           </p>
-          <div
+          <button
             className="rounded-lg p-1 text-darkCustom hover:bg-grey-800 hover:text-primary"
+            onClick={[Function]}
           >
             <div
               style={
@@ -1252,7 +1257,7 @@ exports[`Storyshots Components/Elements/ImageGallery Default 1`] = `
                 }
               }
             />
-          </div>
+          </button>
         </div>
       </div>
     </div>
@@ -1410,18 +1415,19 @@ exports[`Storyshots Components/Elements/ImageGallery Default 1`] = `
           className="flex items-center justify-between gap-1"
         >
           <p
-            className="flex items-center gap-1 text-darkCustom text-14-bold"
+            className="flex items-center gap-1 text-darkCustom text-16-bold"
             data-testid="txt"
           >
             Fugit quod ullam cum natus expedita reprehenderit.
             :
             <p
-              className="text-14-bold"
+              className="text-16-bold"
               data-testid="txt"
             />
           </p>
-          <div
+          <button
             className="rounded-lg p-1 text-darkCustom hover:bg-grey-800 hover:text-primary"
+            onClick={[Function]}
           >
             <div
               style={
@@ -1431,7 +1437,7 @@ exports[`Storyshots Components/Elements/ImageGallery Default 1`] = `
                 }
               }
             />
-          </div>
+          </button>
         </div>
       </div>
     </div>
@@ -1581,18 +1587,19 @@ exports[`Storyshots Components/Elements/ImageGallery Default 1`] = `
           className="flex items-center justify-between gap-1"
         >
           <p
-            className="flex items-center gap-1 text-darkCustom text-14-bold"
+            className="flex items-center gap-1 text-darkCustom text-16-bold"
             data-testid="txt"
           >
             Sit nobis unde numquam tenetur.
             :
             <p
-              className="text-14-bold"
+              className="text-16-bold"
               data-testid="txt"
             />
           </p>
-          <div
+          <button
             className="rounded-lg p-1 text-darkCustom hover:bg-grey-800 hover:text-primary"
+            onClick={[Function]}
           >
             <div
               style={
@@ -1602,7 +1609,7 @@ exports[`Storyshots Components/Elements/ImageGallery Default 1`] = `
                 }
               }
             />
-          </div>
+          </button>
         </div>
       </div>
     </div>
@@ -1752,18 +1759,19 @@ exports[`Storyshots Components/Elements/ImageGallery Default 1`] = `
           className="flex items-center justify-between gap-1"
         >
           <p
-            className="flex items-center gap-1 text-darkCustom text-14-bold"
+            className="flex items-center gap-1 text-darkCustom text-16-bold"
             data-testid="txt"
           >
             Dolorum explicabo magnam ad qui ab reprehenderit dolor.
             :
             <p
-              className="text-14-bold"
+              className="text-16-bold"
               data-testid="txt"
             />
           </p>
-          <div
+          <button
             className="rounded-lg p-1 text-darkCustom hover:bg-grey-800 hover:text-primary"
+            onClick={[Function]}
           >
             <div
               style={
@@ -1773,7 +1781,7 @@ exports[`Storyshots Components/Elements/ImageGallery Default 1`] = `
                 }
               }
             />
-          </div>
+          </button>
         </div>
       </div>
     </div>
@@ -1931,18 +1939,19 @@ exports[`Storyshots Components/Elements/ImageGallery Default 1`] = `
           className="flex items-center justify-between gap-1"
         >
           <p
-            className="flex items-center gap-1 text-darkCustom text-14-bold"
+            className="flex items-center gap-1 text-darkCustom text-16-bold"
             data-testid="txt"
           >
             Rerum hic laboriosam similique quidem molestias.
             :
             <p
-              className="text-14-bold"
+              className="text-16-bold"
               data-testid="txt"
             />
           </p>
-          <div
+          <button
             className="rounded-lg p-1 text-darkCustom hover:bg-grey-800 hover:text-primary"
+            onClick={[Function]}
           >
             <div
               style={
@@ -1952,7 +1961,7 @@ exports[`Storyshots Components/Elements/ImageGallery Default 1`] = `
                 }
               }
             />
-          </div>
+          </button>
         </div>
       </div>
     </div>
@@ -2110,18 +2119,19 @@ exports[`Storyshots Components/Elements/ImageGallery Default 1`] = `
           className="flex items-center justify-between gap-1"
         >
           <p
-            className="flex items-center gap-1 text-darkCustom text-14-bold"
+            className="flex items-center gap-1 text-darkCustom text-16-bold"
             data-testid="txt"
           >
             Odit quo ipsam cupiditate laborum qui.
             :
             <p
-              className="text-14-bold"
+              className="text-16-bold"
               data-testid="txt"
             />
           </p>
-          <div
+          <button
             className="rounded-lg p-1 text-darkCustom hover:bg-grey-800 hover:text-primary"
+            onClick={[Function]}
           >
             <div
               style={
@@ -2131,7 +2141,7 @@ exports[`Storyshots Components/Elements/ImageGallery Default 1`] = `
                 }
               }
             />
-          </div>
+          </button>
         </div>
       </div>
     </div>
diff --git a/src/components/elements/ImageGallery/__snapshots__/ImageGalleryItem.stories.storyshot b/src/components/elements/ImageGallery/__snapshots__/ImageGalleryItem.stories.storyshot
index d4f96a7a7..af03ddf73 100644
--- a/src/components/elements/ImageGallery/__snapshots__/ImageGalleryItem.stories.storyshot
+++ b/src/components/elements/ImageGallery/__snapshots__/ImageGalleryItem.stories.storyshot
@@ -150,18 +150,19 @@ exports[`Storyshots Components/Elements/Cards/ImageGalleryCard/Item Default 1`]
         className="flex items-center justify-between gap-1"
       >
         <p
-          className="flex items-center gap-1 text-darkCustom text-14-bold"
+          className="flex items-center gap-1 text-darkCustom text-16-bold"
           data-testid="txt"
         >
           Fugit deleniti hic optio totam beatae.
           :
           <p
-            className="text-14-bold"
+            className="text-16-bold"
             data-testid="txt"
           />
         </p>
-        <div
+        <button
           className="rounded-lg p-1 text-darkCustom hover:bg-grey-800 hover:text-primary"
+          onClick={[Function]}
         >
           <div
             style={
@@ -171,7 +172,7 @@ exports[`Storyshots Components/Elements/Cards/ImageGalleryCard/Item Default 1`]
               }
             }
           />
-        </div>
+        </button>
       </div>
       <p
         className="flex items-center gap-1 text-darkCustom-60 text-14-light"
diff --git a/src/components/elements/Inputs/BooleanInput/__snapshots__/BooleanInput.stories.storyshot b/src/components/elements/Inputs/BooleanInput/__snapshots__/BooleanInput.stories.storyshot
index c8286dbdd..5286974b8 100644
--- a/src/components/elements/Inputs/BooleanInput/__snapshots__/BooleanInput.stories.storyshot
+++ b/src/components/elements/Inputs/BooleanInput/__snapshots__/BooleanInput.stories.storyshot
@@ -36,7 +36,7 @@ exports[`Storyshots Components/Elements/Inputs/BooleanInput Default 1`] = `
       tabIndex={0}
     >
       <div
-        className="rounded-lg border border-neutral-400 py-2 px-3"
+        className="rounded-lg border border-neutral-400 px-3 py-2"
       >
         <label
           className="flex items-center flex flex-row-reverse items-center justify-end gap-3 "
@@ -70,7 +70,7 @@ exports[`Storyshots Components/Elements/Inputs/BooleanInput Default 1`] = `
       tabIndex={-1}
     >
       <div
-        className="rounded-lg border border-neutral-400 py-2 px-3"
+        className="rounded-lg border border-neutral-400 px-3 py-2"
       >
         <label
           className="flex items-center flex flex-row-reverse items-center justify-end gap-3 "
diff --git a/src/components/elements/Inputs/Radio/Radio.tsx b/src/components/elements/Inputs/Radio/Radio.tsx
index bf895a9c6..bafb94eea 100644
--- a/src/components/elements/Inputs/Radio/Radio.tsx
+++ b/src/components/elements/Inputs/Radio/Radio.tsx
@@ -1,9 +1,13 @@
+import classNames from "classnames";
 import { InputHTMLAttributes, ReactNode, useId } from "react";
 
 import Text from "@/components/elements/Text/Text";
+import { TextVariants } from "@/types/common";
 
 export interface RadioProps extends InputHTMLAttributes<HTMLInputElement> {
   label: string | ReactNode;
+  variantText?: TextVariants;
+  labelRadio?: string;
 }
 
 const Radio = (props: RadioProps) => {
@@ -11,7 +15,7 @@ const Radio = (props: RadioProps) => {
 
   if (typeof props.label !== "string") {
     return (
-      <label htmlFor={id} className={`relative ${props.className}`}>
+      <label htmlFor={id} className={classNames("relative", props.className, props.labelRadio)}>
         {props.label}
         <input {...props} id={id} type="radio" className="absolute top-0 opacity-0" />
       </label>
@@ -19,8 +23,8 @@ const Radio = (props: RadioProps) => {
   }
 
   return (
-    <label htmlFor={id} className={`flex items-center ${props.className}`}>
-      <Text variant="text-light-caption-200">{props.label}</Text>
+    <label htmlFor={id} className={classNames("flex items-center", props.className, props.labelRadio)}>
+      <Text variant={props.variantText ? props.variantText : "text-light-caption-200"}>{props.label}</Text>
       <input {...props} id={id} type="radio" />
     </label>
   );
diff --git a/src/components/elements/Inputs/Radio/__snapshots__/Radio.stories.storyshot b/src/components/elements/Inputs/Radio/__snapshots__/Radio.stories.storyshot
index 3905b9830..8101fdc71 100644
--- a/src/components/elements/Inputs/Radio/__snapshots__/Radio.stories.storyshot
+++ b/src/components/elements/Inputs/Radio/__snapshots__/Radio.stories.storyshot
@@ -2,7 +2,7 @@
 
 exports[`Storyshots Components/Elements/Inputs/Radio Default 1`] = `
 <label
-  className="flex items-center undefined"
+  className="flex items-center"
   htmlFor=":r1b:"
 >
   <p
diff --git a/src/components/elements/Inputs/RadioGroup/RadioGroup.tsx b/src/components/elements/Inputs/RadioGroup/RadioGroup.tsx
index edd86127e..2d81aacc7 100644
--- a/src/components/elements/Inputs/RadioGroup/RadioGroup.tsx
+++ b/src/components/elements/Inputs/RadioGroup/RadioGroup.tsx
@@ -1,28 +1,43 @@
 import { RadioGroup as HeadlessRadioGroup } from "@headlessui/react";
+import classNames from "classnames";
 
 import InputWrapper, { InputWrapperProps } from "@/components/elements/Inputs/InputElements/InputWrapper";
 import Radio from "@/components/elements/Inputs/Radio/Radio";
-import { OptionValueWithBoolean, OptionWithBoolean } from "@/types/common";
+import { OptionValueWithBoolean, OptionWithBoolean, TextVariants } from "@/types/common";
 
 export interface RadioGroupProps extends InputWrapperProps {
   options: OptionWithBoolean[];
   value?: OptionValueWithBoolean;
   onChange?: (value: OptionValueWithBoolean) => void;
+  contentClassName?: string;
+  radioClassName?: string;
+  variantTextRadio?: TextVariants;
+  labelRadio?: string;
 }
 
-const RadioGroup = ({ value, onChange, options, ...inputWrapperProps }: RadioGroupProps) => {
+const RadioGroup = ({
+  value,
+  onChange,
+  options,
+  contentClassName,
+  radioClassName,
+  variantTextRadio,
+  ...inputWrapperProps
+}: RadioGroupProps) => {
   return (
     <InputWrapper {...inputWrapperProps}>
-      <HeadlessRadioGroup value={value} onChange={onChange} className="space-y-2">
+      <HeadlessRadioGroup value={value} onChange={onChange} className={classNames("space-y-2", contentClassName)}>
         {options.map(option => (
           <HeadlessRadioGroup.Option key={option.title} value={option.value}>
             {({ checked }) => (
-              <div className="rounded-lg border border-neutral-400 py-2 px-3">
+              <div className={classNames("rounded-lg border border-neutral-400 px-3 py-2", radioClassName)}>
                 <Radio
                   label={option.title}
                   checked={checked}
                   onChange={() => onChange && onChange(option.value)}
                   className="flex flex-row-reverse items-center justify-end gap-3 "
+                  variantText={variantTextRadio}
+                  labelRadio={radioClassName}
                 />
               </div>
             )}
diff --git a/src/components/elements/Inputs/RadioGroup/__snapshots__/RadioGroup.stories.storyshot b/src/components/elements/Inputs/RadioGroup/__snapshots__/RadioGroup.stories.storyshot
index 736e1aed7..9b617078c 100644
--- a/src/components/elements/Inputs/RadioGroup/__snapshots__/RadioGroup.stories.storyshot
+++ b/src/components/elements/Inputs/RadioGroup/__snapshots__/RadioGroup.stories.storyshot
@@ -27,7 +27,7 @@ exports[`Storyshots Components/Elements/Inputs/RadioGroup Default 1`] = `
       tabIndex={0}
     >
       <div
-        className="rounded-lg border border-neutral-400 py-2 px-3"
+        className="rounded-lg border border-neutral-400 px-3 py-2"
       >
         <label
           className="flex items-center flex flex-row-reverse items-center justify-end gap-3 "
@@ -61,7 +61,7 @@ exports[`Storyshots Components/Elements/Inputs/RadioGroup Default 1`] = `
       tabIndex={-1}
     >
       <div
-        className="rounded-lg border border-neutral-400 py-2 px-3"
+        className="rounded-lg border border-neutral-400 px-3 py-2"
       >
         <label
           className="flex items-center flex flex-row-reverse items-center justify-end gap-3 "
diff --git a/src/components/elements/Toggle/Toggle.tsx b/src/components/elements/Toggle/Toggle.tsx
index 95138a52f..7fd8549dc 100644
--- a/src/components/elements/Toggle/Toggle.tsx
+++ b/src/components/elements/Toggle/Toggle.tsx
@@ -5,6 +5,7 @@ export interface ToggleProps {
   items: string[];
   activeIndex: number;
   setActiveIndex: React.Dispatch<React.SetStateAction<number>>;
+  textClassName?: string;
 }
 
 const Toggle = (props: ToggleProps) => {
@@ -37,6 +38,7 @@ const Toggle = (props: ToggleProps) => {
           onClick={() => setActiveIndex(index)}
           className={classNames(
             "hover:stroke-blue-950 hover:text-blue-950 group relative z-10 inline-flex h-full w-max min-w-[32px] items-center justify-center gap-1 whitespace-nowrap px-3 align-middle transition-all duration-300 ease-in-out",
+            props.textClassName,
             {
               "text-14-bold text-darkCustom": activeIndex === index,
               "text-14-bold text-darkCustom-60": activeIndex !== index
diff --git a/src/components/extensive/Modal/ModalConst.ts b/src/components/extensive/Modal/ModalConst.ts
index b11be57bf..c352b0c14 100644
--- a/src/components/extensive/Modal/ModalConst.ts
+++ b/src/components/extensive/Modal/ModalConst.ts
@@ -34,6 +34,7 @@ export const ModalId = {
   MODAL_CONFIRM: "ModalConfirm",
   MODAL_CONFIRM_DELETE_PARTNER: "ModalConfirmDeletePartner",
   MODAL_WITH_LOGO: "ModalWithLogo",
+  MODAL_IMAGE_DETAIL: "ModalImageDetail",
   MODALS_MAPPING: "ModalsMapping",
   ORGANIZATION_EDIT_MODAL: "OrganizationEditModal",
   PITCH_EDIT_MODAL: "pitchEditModal",
diff --git a/src/components/extensive/Modal/ModalImageDetails.tsx b/src/components/extensive/Modal/ModalImageDetails.tsx
new file mode 100644
index 000000000..b6c9bbd4b
--- /dev/null
+++ b/src/components/extensive/Modal/ModalImageDetails.tsx
@@ -0,0 +1,197 @@
+import { useT } from "@transifex/react";
+import Image from "next/image";
+import React, { FC, useState } from "react";
+
+import Button from "@/components/elements/Button/Button";
+import Input from "@/components/elements/Inputs/Input/Input";
+import RadioGroup from "@/components/elements/Inputs/RadioGroup/RadioGroup";
+import TextArea from "@/components/elements/Inputs/textArea/TextArea";
+import Text from "@/components/elements/Text/Text";
+import Toggle from "@/components/elements/Toggle/Toggle";
+
+import Icon, { IconNames } from "../Icon/Icon";
+import PageBreadcrumbs from "../PageElements/Breadcrumbs/PageBreadcrumbs";
+import { ModalProps } from "./Modal";
+import { ModalBaseImageDetail } from "./ModalsBases";
+
+export interface ModalIamgeDetailProps extends ModalProps {
+  onClose?: () => void;
+}
+
+const ModalImageDetails: FC<ModalIamgeDetailProps> = ({
+  iconProps,
+  title,
+  content,
+  primaryButtonProps,
+  secondaryButtonProps,
+  children,
+  onClose,
+  ...rest
+}) => {
+  const [activeIndex, setActiveIndex] = useState(0);
+
+  const tabs = ["Image", "Location"];
+  const t = useT();
+  return (
+    <ModalBaseImageDetail {...rest}>
+      <button onClick={onClose} className="absolute top-8 right-8 ml-2 rounded p-1 hover:bg-grey-800">
+        <Icon name={IconNames.CLEAR} width={16} height={16} className="text-darkCustom-100" />
+      </button>
+      <div className="w-full">
+        <Text variant="text-24-bold">{title}</Text>
+        <PageBreadcrumbs
+          links={[
+            { title: t("Faja Lobi Project"), path: "/#" },
+            { title: t("Iseme Site"), path: "/#" },
+            { title: "Apex Nursery" }
+          ]}
+          className="bg-white pt-0"
+          textVariant="text-12"
+        />
+      </div>
+      <div className="flex w-full gap-12">
+        <div className="grid max-h-[62vh] flex-1 gap-4 overflow-auto pr-2">
+          <Input
+            name="imageName"
+            type="text"
+            label={t("Image Name")}
+            variant={"default"}
+            required={false}
+            placeholder=" "
+            id="imageName"
+            labelClassName="text-14-bold !normal-case"
+          />
+          <div>
+            <Text variant="text-14-bold" className="mb-2">
+              {t("Assign Cover Image")}
+            </Text>
+            <RadioGroup
+              options={[
+                { title: t("Yes"), value: true },
+                { title: t("No"), value: false }
+              ]}
+              onChange={value => {
+                console.log(value);
+              }}
+              contentClassName="flex gap-4 !space-y-0"
+              radioClassName="!p-0 !border-0 text-14-light !gap-2"
+              variantTextRadio="text-14-light"
+              labelRadio="gap-2"
+            />
+          </div>
+          <div>
+            <Text variant="text-14-bold" className="mb-2">
+              {t("Make Public")}
+            </Text>
+            <RadioGroup
+              options={[
+                { title: t("Yes"), value: true },
+                { title: t("No"), value: false }
+              ]}
+              onChange={value => {
+                console.log(value);
+              }}
+              contentClassName="flex gap-4 !space-y-0"
+              radioClassName="!p-0 !border-0 text-14-light !gap-2"
+              variantTextRadio="text-14-light"
+              labelRadio="gap-2"
+            />
+          </div>
+          <Input
+            name="Photographer"
+            type="text"
+            label={t("Photographer")}
+            variant={"default"}
+            required={false}
+            placeholder=" "
+            id="Photographer"
+            labelClassName="text-14-bold !normal-case"
+          />
+          <TextArea
+            name="Description"
+            label={t("Description")}
+            required={false}
+            placeholder=" "
+            id="Description"
+            labelClassName="text-14-bold !normal-case"
+            className="resize-none"
+          />
+        </div>
+        <div className="flex max-h-[62vh] flex-1 flex-col gap-4 overflow-auto">
+          <Toggle
+            items={tabs}
+            activeIndex={activeIndex}
+            setActiveIndex={setActiveIndex}
+            textClassName="!w-1/2 flex justify-center py-1"
+          />
+          {activeIndex === 0 ? (
+            <Image
+              src="/images/hands-planting.webp"
+              alt="Hands planting"
+              height="400"
+              width="300"
+              className="h-[202px] w-full rounded-xl lg:h-[220px]"
+            />
+          ) : (
+            <Image
+              src="/images/map-img.png"
+              alt="map"
+              height="400"
+              width="300"
+              className="h-[202px] w-full rounded-xl lg:h-[220px]"
+            />
+          )}
+          <div className="grid grid-cols-2">
+            <Text variant="text-12" className="border-b border-grey-350 py-1 text-darkCustom-60">
+              {t("Uploaded By")}
+            </Text>
+            <Text variant="text-12" className="border-b border-grey-350 py-1 text-darkCustom">
+              {t("George Washington")}
+            </Text>
+            <Text variant="text-12" className="border-b border-grey-350 py-1 text-darkCustom-60">
+              {t("Date Captured")}
+            </Text>
+            <Text variant="text-12" className="border-b border-grey-350 py-1 text-darkCustom">
+              {t("01/02/2024")}
+            </Text>
+            <Text variant="text-12" className="border-b border-grey-350 py-1 text-darkCustom-60">
+              {t("Filename")}
+            </Text>
+            <Text variant="text-12" className="border-b border-grey-350 py-1 text-darkCustom">
+              {t("apex_nursery.png")}
+            </Text>
+            <Text variant="text-12" className="border-b border-grey-350 py-1 text-darkCustom-60">
+              {t("File Type")}
+            </Text>
+            <Text variant="text-12" className="border-b border-grey-350 py-1 text-darkCustom">
+              {t("PNG")}
+            </Text>
+            <Text variant="text-12" className="border-b border-grey-350 py-1 text-darkCustom-60">
+              {t("Geotagged")}
+            </Text>
+            <Text variant="text-12" className="border-b border-grey-350 py-1 text-darkCustom">
+              {t("Yes")}
+            </Text>
+            <Text variant="text-12" className="border-b border-grey-350 py-1 text-darkCustom-60">
+              {t("Coordinates")}
+            </Text>
+            <Text variant="text-12" className="border-b border-grey-350 py-1 text-darkCustom">
+              {t("(31.2156, -29.9553)")}
+            </Text>
+          </div>
+        </div>
+      </div>
+      <div className="mt-5 flex w-full justify-end gap-3">
+        <Button className="w-1/6 rounded-full border-0 hover:border" variant="semi-red">
+          {t("Delete")}
+        </Button>
+        <Button className="w-1/6 rounded-full" variant="secondary">
+          {t("Cancel")}
+        </Button>
+        <Button className="w-1/6 rounded-full">{t("Continue")}</Button>
+      </div>
+    </ModalBaseImageDetail>
+  );
+};
+
+export default ModalImageDetails;
diff --git a/src/components/extensive/Modal/ModalsBases.tsx b/src/components/extensive/Modal/ModalsBases.tsx
index bee075f61..d355c6573 100644
--- a/src/components/extensive/Modal/ModalsBases.tsx
+++ b/src/components/extensive/Modal/ModalsBases.tsx
@@ -35,3 +35,8 @@ export const ModalBaseWithMap = createModalComponent(
   commonBaseClasses + " h-[504px] w-[80vw] overflow-hidden wide:h-[700px]",
   "margin-4 z-50"
 );
+
+export const ModalBaseImageDetail = createModalComponent(
+  commonBaseClasses + " w-[850px] lg:w-[890px] wide:w-[950px]  px-8 pt-10 pb-6 bg-white relative",
+  "margin-4 z-50"
+);
diff --git a/src/components/extensive/PageElements/Breadcrumbs/PageBreadcrumbs.tsx b/src/components/extensive/PageElements/Breadcrumbs/PageBreadcrumbs.tsx
index d112a8e71..c1b0d71b6 100644
--- a/src/components/extensive/PageElements/Breadcrumbs/PageBreadcrumbs.tsx
+++ b/src/components/extensive/PageElements/Breadcrumbs/PageBreadcrumbs.tsx
@@ -3,19 +3,27 @@ import { twMerge } from "tailwind-merge";
 
 import Breadcrumbs from "@/components/elements/Breadcrumbs/Breadcrumbs";
 import { History, useRouteHistoryContext } from "@/context/routeHistory.provider";
+import { TextVariants } from "@/types/common";
 
 export interface PageHeaderProps
   extends DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>,
     PropsWithChildren {
   links?: (Omit<History, "path"> & { path?: string })[];
+  clasNameText?: string;
+  textVariant?: TextVariants;
 }
 
-const PageBreadcrumbs = ({ links, children, className, ...props }: PageHeaderProps) => {
+const PageBreadcrumbs = ({ links, children, className, clasNameText, textVariant, ...props }: PageHeaderProps) => {
   const { history } = useRouteHistoryContext();
 
   return (
     <div {...props} className={twMerge("flex h-12 items-center bg-primary-100 p-4 px-10 xl:px-0", className)}>
-      <Breadcrumbs links={links || history} className="mx-auto w-full max-w-[82vw]" />
+      <Breadcrumbs
+        links={links || history}
+        className="mx-auto w-full max-w-[82vw]"
+        clasNameText={clasNameText}
+        textVariant={textVariant}
+      />
     </div>
   );
 };