diff --git a/public/images/floor-plans/dubai-marina/floor-plan_7-38_comb.png b/public/images/floor-plans/dubai-marina/floor-plan_7-38_comb.png
new file mode 100644
index 0000000..d170745
Binary files /dev/null and b/public/images/floor-plans/dubai-marina/floor-plan_7-38_comb.png differ
diff --git a/src/components/FloorPlanDubaiMarina39_40.tsx b/src/components/FloorPlanDubaiMarina39_40.tsx
index 92156c2..7999607 100644
--- a/src/components/FloorPlanDubaiMarina39_40.tsx
+++ b/src/components/FloorPlanDubaiMarina39_40.tsx
@@ -23,7 +23,7 @@ function FloorPlanDubaiMarinaUnit({
   selectedUnit,
 }: {
   unit: Unit;
-  floor: string;
+  floor: number;
   d: string;
   textTransform: string;
   formattedUnitType: string;
@@ -148,7 +148,7 @@ function FloorPlanDubaiMarina39_41({
               dubaiMarinaMasks.get(unit.unitNo.slice(-2))!.formattedUnitType
             }
             unit={unit}
-            floor={selectedFloor!}
+            floor={Number(selectedFloor!)}
             d={dubaiMarinaMasks.get(unit.unitNo.slice(-2))!.d}
             textTransform={`translate(${dubaiMarinaMasks
               .get(unit.unitNo.slice(-2))!
diff --git a/src/components/FloorPlanDubaiMarina41_42.tsx b/src/components/FloorPlanDubaiMarina41_42.tsx
index a81f0e4..23aee78 100644
--- a/src/components/FloorPlanDubaiMarina41_42.tsx
+++ b/src/components/FloorPlanDubaiMarina41_42.tsx
@@ -23,7 +23,7 @@ function FloorPlanDubaiMarinaUnit({
   selectedUnit,
 }: {
   unit: Unit;
-  floor: string;
+  floor: number;
   d: string;
   textTransform: string;
   formattedUnitType: string;
@@ -148,7 +148,7 @@ function FloorPlanDubaiMarina41_42({
               dubaiMarinaMasks.get(unit.unitNo.slice(-2))!.formattedUnitType
             }
             unit={unit}
-            floor={selectedFloor!}
+            floor={Number(selectedFloor!)}
             d={dubaiMarinaMasks.get(unit.unitNo.slice(-2))!.d}
             textTransform={`translate(${dubaiMarinaMasks
               .get(unit.unitNo.slice(-2))!
diff --git a/src/components/FloorPlanDubaiMarina.tsx b/src/components/FloorPlanDubaiMarina7_38.tsx
similarity index 67%
rename from src/components/FloorPlanDubaiMarina.tsx
rename to src/components/FloorPlanDubaiMarina7_38.tsx
index 89eb4b7..300d73d 100644
--- a/src/components/FloorPlanDubaiMarina.tsx
+++ b/src/components/FloorPlanDubaiMarina7_38.tsx
@@ -6,7 +6,6 @@ import UnitPopup from "./UnitPopup";
 import { isMobile } from "react-device-detect";
 import { useEffect, useState } from "react";
 import clsx from "clsx";
-import Button from "./ui/Button";
 // import { useClickAway } from "@uidotdev/usehooks";
 
 interface FloorPlanDubaiMarinaProps {
@@ -14,7 +13,7 @@ interface FloorPlanDubaiMarinaProps {
   unitsOnFloor: Unit[];
 }
 
-function FloorPlanDubaiMarina({
+function FloorPlanDubaiMarina7_38({
   selectedFloor,
   unitsOnFloor,
   ...props
@@ -24,56 +23,47 @@ function FloorPlanDubaiMarina({
   // const ref = useClickAway<SVGSVGElement>(() => setSelectedUnit(null));
 
   return (
-    <>
-      <div className=" w-full flex items-center justify-center gap-1">
-        <Button variant="cta">Standard</Button>
-        <Button variant="secondary" disabled>
-          Combinable
-        </Button>
-      </div>
-
-      <svg
-        xmlns="http://www.w3.org/2000/svg"
-        xmlnsXlink="http://www.w3.org/1999/xlink"
-        viewBox="0 0 632 467.5"
-        className="w-full h-full"
-        // ref={ref}
-        {...props}
-      >
-        <image
-          // width={1264}
-          // height={935}
-          transform="scale(.5)"
-          xlinkHref="/images/floor-plans/dubai-marina/floor-plan_7-38.png"
-        />
-        {unitsOnFloor.map((unit) =>
-          dubaiMarinaMasks.has(unit.unitNo.slice(-2)) ? (
-            <FloorPlanDubaiMarinaUnit
-              key={unit.unitNo}
-              selectedUnit={selectedUnit}
-              onSelect={setSelectedUnit}
-              formattedUnitType={
-                dubaiMarinaMasks.get(unit.unitNo.slice(-2))!.formattedUnitType
-              }
-              unit={unit}
-              floor={selectedFloor!}
-              d={dubaiMarinaMasks.get(unit.unitNo.slice(-2))!.d}
-              textTransform={`translate(${dubaiMarinaMasks
-                .get(unit.unitNo.slice(-2))!
-                .textTransform.join(" ")})`}
-            />
-          ) : (
-            <Fragment key={unit.unitNo} />
-          )
-        )}
-      </svg>
-    </>
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      xmlnsXlink="http://www.w3.org/1999/xlink"
+      viewBox="0 0 632 467.5"
+      className="w-full h-full"
+      // ref={ref}
+      {...props}
+    >
+      <image
+        // width={1264}
+        // height={935}
+        transform="scale(.5)"
+        xlinkHref="/images/floor-plans/dubai-marina/floor-plan_7-38.png"
+      />
+      {unitsOnFloor.map((unit) =>
+        dubaiMarinaMasks.has(unit.unitNo.slice(-2)) ? (
+          <FloorPlanDubaiMarina7_38Unit
+            key={unit.unitNo}
+            selectedUnit={selectedUnit}
+            onSelect={setSelectedUnit}
+            formattedUnitType={
+              dubaiMarinaMasks.get(unit.unitNo.slice(-2))!.formattedUnitType
+            }
+            unit={unit}
+            floor={Number(selectedFloor!)}
+            d={dubaiMarinaMasks.get(unit.unitNo.slice(-2))!.d}
+            textTransform={`translate(${dubaiMarinaMasks
+              .get(unit.unitNo.slice(-2))!
+              .textTransform.join(" ")})`}
+          />
+        ) : (
+          <Fragment key={unit.unitNo} />
+        )
+      )}
+    </svg>
   );
 }
 
-export default FloorPlanDubaiMarina;
+export default FloorPlanDubaiMarina7_38;
 
-function FloorPlanDubaiMarinaUnit({
+export function FloorPlanDubaiMarina7_38Unit({
   unit,
   floor,
   d,
@@ -83,7 +73,7 @@ function FloorPlanDubaiMarinaUnit({
   selectedUnit,
 }: {
   unit: Unit;
-  floor: string;
+  floor: number;
   d: string;
   textTransform: string;
   formattedUnitType: string;
diff --git a/src/components/FloorPlanDubaiMarina7_38Comb.tsx b/src/components/FloorPlanDubaiMarina7_38Comb.tsx
new file mode 100644
index 0000000..169ae3e
--- /dev/null
+++ b/src/components/FloorPlanDubaiMarina7_38Comb.tsx
@@ -0,0 +1,203 @@
+// import { Fragment } from "react/jsx-runtime";
+import { Unit } from "../types/IUnit";
+import { usePopupStore } from "../stores/usePopupStore";
+import UnitPopup from "./UnitPopup";
+import { isMobile } from "react-device-detect";
+import { useEffect, useState } from "react";
+import clsx from "clsx";
+import { dubaiMarinaMasks } from "../data/floor-plan-masks/dubai-marina_7-38_comb";
+import { FloorPlanDubaiMarina7_38Unit } from "./FloorPlanDubaiMarina7_38";
+//  import Button from "./ui/Button";
+// import { useClickAway } from "@uidotdev/usehooks";
+
+interface FloorPlanDubaiMarinaCombProps {
+  selectedFloor: string | null;
+  unitsOnFloor: Unit[];
+}
+
+function FloorPlanDubaiMarina7_38Comb({
+  selectedFloor,
+  unitsOnFloor,
+  ...props
+}: FloorPlanDubaiMarinaCombProps & React.SVGProps<SVGSVGElement>) {
+  const [selectedUnit, setSelectedUnit] = useState<string | null>(null);
+
+  // const ref = useClickAway<SVGSVGElement>(() => setSelectedUnit(null));
+
+  console.log(unitsOnFloor);
+
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      xmlnsXlink="http://www.w3.org/1999/xlink"
+      viewBox="0 0 626 465"
+      className="w-full h-full"
+      // ref={ref}
+      {...props}
+    >
+      <image
+        // width={1264}
+        // height={935}
+        transform="scale(.5)"
+        xlinkHref="/images/floor-plans/dubai-marina/floor-plan_7-38_comb.png"
+      />
+      {/* {unitsOnFloor.map((unit) =>
+        dubaiMarinaMasks.has(unit.unitNo.slice(-2)) ? (
+          <FloorPlanDubaiMarina7_38CombUnit
+            key={unit.unitNo}
+            selectedUnit={selectedUnit}
+            onSelect={setSelectedUnit}
+            formattedUnitType={
+              dubaiMarinaMasks.get(unit.unitNo.slice(-2))!.formattedUnitType
+            }
+            unit={unit}
+            floor={Number(selectedFloor!)}
+            d={dubaiMarinaMasks.get(unit.unitNo.slice(-2))!.d}
+            textTransform={`translate(${dubaiMarinaMasks
+              .get(unit.unitNo.slice(-2))!
+              .textTransform.join(" ")})`}
+          />
+        ) : (
+          <Fragment key={unit.unitNo} />
+        )
+      )} */}
+
+      {unitsOnFloor.map((unit) =>
+        !unit.unitNo.endsWith("-C") ? (
+          <FloorPlanDubaiMarina7_38Unit
+            key={unit.unitNo}
+            selectedUnit={selectedUnit}
+            onSelect={setSelectedUnit}
+            formattedUnitType={
+              dubaiMarinaMasks.get(unit.unitNo.slice(-2))!.formattedUnitType
+            }
+            unit={unit}
+            floor={Number(selectedFloor!)}
+            d={dubaiMarinaMasks.get(unit.unitNo.slice(-2))!.d}
+            textTransform={`translate(${dubaiMarinaMasks
+              .get(unit.unitNo.slice(-2))!
+              .textTransform.join(" ")})`}
+          />
+        ) : (
+          <FloorPlanDubaiMarina7_38CombUnit
+            key={unit.unitNo}
+            selectedUnit={selectedUnit}
+            onSelect={setSelectedUnit}
+            formattedUnitType={
+              dubaiMarinaMasks.get(unit.unitNo.slice(-2))!.formattedUnitType
+            }
+            unit={unit}
+            floor={Number(selectedFloor!)}
+            d={dubaiMarinaMasks.get(unit.unitNo.slice(-2))!.d}
+            textTransform={`translate(${dubaiMarinaMasks
+              .get(unit.unitNo.slice(-2))!
+              .textTransform.join(" ")})`}
+          />
+        )
+      )}
+    </svg>
+  );
+}
+
+export default FloorPlanDubaiMarina7_38Comb;
+
+function FloorPlanDubaiMarina7_38CombUnit({
+  unit,
+  floor,
+  d,
+  textTransform,
+  formattedUnitType,
+  onSelect,
+  selectedUnit,
+}: {
+  unit: Unit;
+  floor: number;
+  d: string;
+  textTransform: string;
+  formattedUnitType: string;
+  selectedUnit: string | null;
+  onSelect: (unitNumber: string | null) => void;
+}) {
+  const { setPopup, setSide, setPosition, popup } = usePopupStore();
+
+  function handleClick(unitNumber: string) {
+    window.open(`/complex/dubai-marina/${unitNumber}`, "_blank");
+  }
+
+  function handleMouseEnter() {
+    if (floor === null) return;
+    // onSelect(unit.unitNo);
+    setSide("top");
+    setPopup(
+      <UnitPopup
+        complexName="dubai-marina"
+        unitType={unit.unitType}
+        floor={unit.floor}
+        unitNumber={unit.unitNo}
+        squareFt={unit.squareFt}
+        suitesArea={unit.suitsArea}
+        balconyArea={unit.balconyArea}
+        price={unit.salesPrice}
+      />
+    );
+  }
+
+  // useEffect(() => {
+  //   if (!selectedUnit) setPopup(null);
+  //   setSide("top");
+  //   setPopup(
+  //     <UnitPopup
+  //       complexName="dubai-marina"
+  //       unitType={unit.unitType}
+  //       floor={unit.floor}
+  //       unitNumber={unit.unitNo}
+  //       squareFt={unit.squareFt}
+  //       suitesArea={unit.suitsArea}
+  //       balconyArea={unit.balconyArea}
+  //       price={unit.salesPrice}
+  //     />
+  //   );
+  // }, [selectedUnit, setPopup, setSide, unit]);
+
+  useEffect(() => {
+    if (!popup) onSelect(null);
+  }, [onSelect, popup]);
+
+  // const ref = useClickAway<SVGPathElement>(
+  //   () => !!selectedUnit && setPopup(null)
+  // );
+
+  return (
+    <g
+    // ref={ref}
+    >
+      <text
+        transform={textTransform}
+        className="fill-white text-[8px] select-none"
+        textAnchor="middle"
+      >
+        <tspan x={0} y={0}>
+          {unit.unitNo}
+        </tspan>
+        <tspan x={0} y={15}>
+          {formattedUnitType}
+        </tspan>
+      </text>
+      <path
+        onClick={() => !isMobile && handleClick(unit.unitNo)}
+        onMouseEnter={!isMobile ? handleMouseEnter : undefined}
+        onMouseLeave={() => !isMobile && setPopup(null)}
+        onTouchStart={(e) => {
+          onSelect(unit.unitNo);
+          setPosition({ x: e.touches[0].clientX, y: e.touches[0].clientY });
+          handleMouseEnter();
+        }}
+        className={clsx(
+          "fill-transparent hover:fill-[#00BED7]/40 isolate cursor-pointer transition-colors",
+          selectedUnit === unit.unitNo && "!fill-[#00BED7]/40"
+        )}
+        d={d}
+      />
+    </g>
+  );
+}
diff --git a/src/components/UnitMaskOnFloor.tsx b/src/components/UnitMaskOnFloor.tsx
new file mode 100644
index 0000000..b64ce35
--- /dev/null
+++ b/src/components/UnitMaskOnFloor.tsx
@@ -0,0 +1,51 @@
+import { Unit } from "../types/IUnit";
+import getUnitMaskOnFloor from "../utils/getUnitMaskOnFloor";
+import DubaiMarinaOnFloorMask7_38Comb from "./onFloorMasks/DubaiMarinaOnFloorMask7_38Comb";
+
+interface UnitMaskOnFloorProps {
+  unit: Unit;
+}
+
+function UnitMaskOnFloor({ unit }: UnitMaskOnFloorProps) {
+  const maskType = getUnitMaskOnFloor(unit);
+
+  if (!maskType) {
+    return null;
+  }
+
+  // Extract unit number (last 2 digits)
+  const unitNumber = +unit.unitNo.split("-")[0].slice(-2);
+
+  switch (maskType) {
+    case "dubai-marina-mask-7_38":
+      return <div>Dubai Marina Floor 7-38 Mask for unit {unit.unitNo}</div>;
+
+    case "dubai-marina-mask-7_38-combinable":
+      return <DubaiMarinaOnFloorMask7_38Comb unitNumber={unitNumber} />;
+
+    case "dubai-marina-mask-39_40":
+      // Handle 39-40 floor mask
+      return <div>Dubai Marina Floor 39-40 Mask for unit {unit.unitNo}</div>;
+
+    case "dubai-marina-mask-41_42":
+      // Handle 41-42 floor mask
+      return <div>Dubai Marina Floor 41-42 Mask for unit {unit.unitNo}</div>;
+
+    case "marasi-drive-east-mask-5_31":
+      // Handle Marasi Drive East mask
+      return <div>Marasi Drive East Mask for unit {unit.unitNo}</div>;
+
+    case "marasi-drive-west-mask-5_21":
+      // Handle Marasi Drive West 5-21 mask
+      return <div>Marasi Drive West 5-21 Mask for unit {unit.unitNo}</div>;
+
+    case "marasi-drive-west-mask-24_31":
+      // Handle Marasi Drive West 24-31 mask
+      return <div>Marasi Drive West 24-31 Mask for unit {unit.unitNo}</div>;
+
+    default:
+      return null;
+  }
+}
+
+export default UnitMaskOnFloor;
diff --git a/src/components/UnitPopup.tsx b/src/components/UnitPopup.tsx
index 1eab799..2f2783d 100644
--- a/src/components/UnitPopup.tsx
+++ b/src/components/UnitPopup.tsx
@@ -7,7 +7,7 @@ import { usePopupStore } from "../stores/usePopupStore";
 interface UnitPopupProps {
   unitType: string;
   wing?: "East" | "West";
-  floor: string;
+  floor: number;
   unitNumber: string;
   squareFt: number;
   suitesArea: number;
diff --git a/src/components/UnitTypeCard.tsx b/src/components/UnitTypeCard.tsx
index 6861c15..c48c345 100644
--- a/src/components/UnitTypeCard.tsx
+++ b/src/components/UnitTypeCard.tsx
@@ -12,9 +12,9 @@ function UnitTypeCard({ project, type }: { project: Project; type: UnitType }) {
       <div className="space-y-1 2xl:space-y-[0.278vw]">
         <p className="text-s text-[#00BED7]">{project.title}</p>
         <div className="flex items-center gap-2 2xl:gap-[0.556vw]">
-          {type.wings && (
+          {type.wing && (
             <>
-              <p className="text-caption-m text-[#0D1922]/70">{type.wings}</p>
+              <p className="text-caption-m text-[#0D1922]/70">{type.wing}</p>
               <div className="w-1 h-1 bg-[#E2E2DC] rounded-full"></div>
             </>
           )}
diff --git a/src/components/UnitTypeItem.tsx b/src/components/UnitTypeItem.tsx
index bea4b09..4a2040d 100644
--- a/src/components/UnitTypeItem.tsx
+++ b/src/components/UnitTypeItem.tsx
@@ -107,9 +107,9 @@ function UnitTypeItem({ project, type }: UnitTypeItemProps) {
           <div className="2xl:space-y-[0.556vw] md:max-2xl:space-y-2 space-y-1">
             <p className="text-m text-[#00BED7]">{project.title}</p>
             <div className="flex items-center 2xl:gap-[0.556vw]">
-              {type.wings && (
+              {type.wing && (
                 <>
-                  <p className="text-s text-[#0D1922]/70">{type.wings}</p>
+                  <p className="text-s text-[#0D1922]/70">{type.wing}</p>
                   <div className="2xl:w-[0.278vw] 2xl:h-[0.278vw] w-1 h-1 rounded-full bg-[#E2E2DC]" />
                 </>
               )}
diff --git a/src/components/onFloorMasks/DubaiMarinaOnFloorMask7_38Comb.tsx b/src/components/onFloorMasks/DubaiMarinaOnFloorMask7_38Comb.tsx
new file mode 100644
index 0000000..b091f8e
--- /dev/null
+++ b/src/components/onFloorMasks/DubaiMarinaOnFloorMask7_38Comb.tsx
@@ -0,0 +1,87 @@
+import clsx from "clsx";
+import { useEffect } from "react";
+
+const paths = [
+  {
+    dataName: 12,
+    d: "M1.47 84.79h53.29v-.31c0-.55.45-1 1-1h2.44c.55 0 1-.45 1-1V35.14c0-.55-.45-1-1-1h-1.59c-.55 0-1-.45-1-1V16.85c0-.55.45-1 1-1h20.17c.09 0 .17-.01.26-.03l52.8-14.11c3.03-.81 6.26.02 8.53 2.18l9.29 8.85c.2.19.31.45.31.72v19.71c0 .5-.4.9-.9.9s-.9.4-.9.9v47.49c0 .55.45 1 1 1h2.44c.55 0 1 .45 1 1v42.39c0 .55-.45 1-1 1h-3.76c-.55 0-1 .45-1 1v7.82c0 .55-.45 1-1 1H118.3v23.25c0 .55-.45 1-1 1h-7.72c-.55 0-1 .45-1 1v7.86c0 .55-.45 1-1 1H1.47c-.55 0-1-.45-1-1V85.79c0-.55.45-1 1-1",
+  },
+  {
+    dataName: 11,
+    d: "M154.01 127.38h3.25c.55 0 1 .45 1 1v8.31c0 .55.45 1 1 1h37.88c.55 0 1-.45 1-1v-8.3c0-.55.45-1 1-1h13.72c.55 0 1 .44 1 1v8.31c0 .55.45 1 1 1h38.33c.55 0 1-.45 1-1v-8.3c0-.55.45-1 1-1h6.08c.55 0 1-.45 1-1V34.12h1.8V15.39s.11-3.35 0-3.46l-10.27-9.5a8.01 8.01 0 0 0-9.56-1.33L219.34 15c-.15.08-.32.13-.49.13h-14.26q-.075-.165-.21-.3l-11.06-12.4a8.01 8.01 0 0 0-9.56-1.33L158.86 15c-.15.08-.32.13-.49.13h-6.3c-.55 0-1 .45-1 1v17.24c0 .41.33.74.74.74h1.17v92.26c0 .55.45 1 1 1Z",
+  },
+  {
+    dataName: 10,
+    d: "M264.53 84.48v21.73c0 .55.45 1 1 1h15.52c.55 0 1 .45 1 1v6.03c0 .55.45 1 1 1h28.02c.55 0 1 .45 1 1v20.43c0 .55.45 1 1 1h40.56c.55 0 1-.45 1-1v-7.82c0-.55.45-1 1-1h3.76c.55 0 1-.45 1-1V84.46c0-.55-.45-1-1-1h-2.44c-.55 0-1-.45-1-1V34.97c0-.5-.04-.9.46-.9s.9-.4.9-.9v-19.7c0-.27-.11-.54-.31-.72l-8.85-8.85a9 9 0 0 0-8.53-2.18l-52.8 14.11c-.08.02-.17.03-.26.03h-18.33c-.55 0-1 .45-1 1v16.29c0 .55.45 1 1 1s.75.45.75 1v47.34c0 .55-.45 1-1 1h-2.44c-.55 0-1 .45-1 1Z",
+  },
+  {
+    dataName: 9,
+    d: "M363.2 127.38h3.25c.55 0 1 .45 1 1v8.31c0 .55.45 1 1 1h37.88c.55 0 1-.45 1-1v-8.3c0-.55.45-1 1-1h13.71c.55 0 1 .45 1 1v8.31c0 .55.45 1 1 1h38.33c.55 0 1-.45 1-1v-8.3c0-.55.45-1 1-1h6.08c.55 0 1-.45 1-1V34.12h1.8V15.39s.11-3.35 0-3.46l-10.27-9.5a8.01 8.01 0 0 0-9.56-1.33L428.52 15c-.15.08-.32.13-.49.13h-13.26q-.075-.165-.21-.3L402.5 2.43a8.01 8.01 0 0 0-9.56-1.33L368.04 15c-.15.08-.32.13-.49.13h-6.3c-.55 0-1 .45-1 1v17.24c0 .41.33.74.74.74h1.17v92.26c0 .55.45 1 1 1Z",
+  },
+  {
+    dataName: 8,
+    d: "M624.85 84.79h-55.02v-1.73h-4.02V34.13h4.12V15.54L558.19 2.93a8.01 8.01 0 0 0-7.98-2.26l-53.9 14.87h-19.7v18.59h1.67v49h-3.95v44.79h5.4v9.76h26.88v23.23c0 .55.45 1 1 1h7.73c.55 0 1 .45 1 1v7.86c0 .55.45 1 1 1h107.5c.55 0 1-.45 1-1V85.78c0-.55-.45-1-1-1Z",
+  },
+  {
+    dataName: 7,
+    d: "M474.4 223.33h17.41v17.65H474.4v45.48h7.19v10.13h22.29v-4.45h12.26v-1.33h22.81v-6.06h47.75v4.76h18.55v-9.82h8.52v-94.5h-8.52v-9.82H586.7v4.76h-47.75v-6.06h-22.81v-1.33h-12.26v-4.45h-22.29v10.13h-7.19v44.9Z",
+  },
+  {
+    dataName: 6,
+    d: "M624.85 379.83h-55.02v1.7h-4.02v48.93h4.12v18.59l-11.74 12.61a8.01 8.01 0 0 1-7.98 2.26l-53.9-14.87h-19.7v-18.59h1.67v-49h-3.95v-44.79h5.4v-9.76h26.88v-23.2c0-.55.45-1 1-1h7.41c.55 0 1-.45 1-1v-7.87c0-.55.45-1 1-1h107.82c.55 0 1 .45 1 1v85c0 .55-.45 1-1 1Z",
+  },
+  {
+    dataName: 5,
+    d: "M363.2 336.76h3.25c.55 0 1-.45 1-1v-8.31c0-.55.45-1 1-1h37.88c.55 0 1 .45 1 1v8.3c0 .55.45 1 1 1h13.72c.55 0 1-.44 1-1v-8.31c0-.55.45-1 1-1h38.33c.55 0 1 .45 1 1v8.3c0 .55.45 1 1 1h6.08c.55 0 1 .45 1 1v92.25h1.8v18.73s.11 3.35 0 3.46l-10.27 9.5a8.01 8.01 0 0 1-9.56 1.33l-24.9-13.9c-.15-.08-.32-.13-.49-.13h-12.26q-.075.165-.21.3l-13.06 12.4a8.01 8.01 0 0 1-9.56 1.33l-24.9-13.9c-.15-.08-.32-.13-.49-.13h-6.3c-.55 0-1-.45-1-1v-17.24c0-.41.33-.74.74-.74h1.17v-92.26c0-.55.45-1 1-1Z",
+  },
+  {
+    dataName: 4,
+    d: "M264.53 379.64v-21.73c0-.55.45-1 1-1h15.52c.55 0 1-.45 1-1v-6.04c0-.55.45-1 1-1h28.02c.55 0 1-.45 1-1v-20.43c0-.55.45-1 1-1h40.56c.55 0 1 .45 1 1v7.82c0 .55.45 1 1 1h3.76c.55 0 1 .45 1 1v42.39c0 .55-.45 1-1 1h-2.44c-.55 0-1-.45-1-1v47.49c0 .5-.04.9.46.9s.9.4.9.9v19.71c0 .27-.11.54-.31.72l-8.85 8.85a9 9 0 0 1-8.53 2.18l-52.8-14.11a1 1 0 0 0-.26-.03h-18.33c-.55 0-1-.45-1-1v-16.29c0-.55.45-1 1-1s.75-.45.75-1v-47.34c0-.55-.45-1-1-1h-2.44c-.55 0-1-.45-1-1Z",
+  },
+  {
+    dataName: 3,
+    d: "M154.01 336.76h3.25c.55 0 1-.45 1-1v-8.31c0-.55.45-1 1-1h37.88c.55 0 1 .45 1 1v8.3c0 .55.45 1 1 1h13.71c.55 0 1-.45 1-1v-8.31c0-.55.45-1 1-1h38.33c.55 0 1 .45 1 1v8.3c0 .55.45 1 1 1h6.08c.55 0 1 .45 1 1v92.25h1.8v18.73s.11 3.35 0 3.46l-10.27 9.5a8.01 8.01 0 0 1-9.56 1.33l-24.9-13.9c-.15-.08-.32-.13-.49-.13h-12.26q-.075.165-.21.3l-13.06 12.4a8.01 8.01 0 0 1-9.56 1.33l-24.9-13.9c-.15-.08-.32-.13-.49-.13h-6.3c-.55 0-1-.45-1-1v-17.24c0-.41.33-.74.74-.74h1.17v-92.26c0-.55.45-1 1-1Z",
+  },
+  {
+    dataName: 2,
+    d: "M1.47 379.83h53.31c.08.47.49.82.98.82h2.44c.55 0 1 .45 1 1v47.34c0 .55-.45 1-1 1h-1.59c-.55 0-1 .45-1 1v16.29c0 .55.45 1 1 1h20.17c.09 0 .17.01.26.03l52.8 14.11c3.03.81 6.26-.02 8.53-2.18l9.29-8.85c.2-.19.31-.45.31-.72v-19.71c0-.49-.4-.9-.9-.9s-.9-.4-.9-.9v-47.49c0-.55.45-1 1-1h2.44c.55 0 1-.45 1-1v-42.39c0-.55-.45-1-1-1h-3.76c-.55 0-1-.45-1-1v-7.82c0-.55-.45-1-1-1H119.3c-.55 0-1-.45-1-1V303.7c0-.55-.45-1-1-1h-7.72c-.55 0-1-.45-1-1v-7.76c0-.55-.45-1-1-1H1.47c-.55 0-1 .45-1 1v84.9c0 .55.45 1 1 1Z",
+  },
+  {
+    dataName: 1,
+    d: "M1.47 84.79h53.29v-.31c0-.55.45-1 1-1h2.44c.55 0 1-.45 1-1V35.14c0-.55-.45-1-1-1h-1.59c-.55 0-1-.45-1-1V16.85c0-.55.45-1 1-1h20.17c.09 0 .17-.01.26-.03l52.8-14.11c3.03-.81 6.26.02 8.53 2.18l9.29 8.85c.2.19.31.45.31.72v19.71c0 .5-.4.9-.9.9s-.9.4-.9.9v47.49c0 .55.45 1 1 1h2.44c.55 0 1 .45 1 1v42.39c0 .55-.45 1-1 1h-3.76c-.55 0-1 .45-1 1v7.82c0 .55-.45 1-1 1H118.3v23.25c0 .55-.45 1-1 1h-7.72c-.55 0-1 .45-1 1v7.86c0 .55-.45 1-1 1H1.47c-.55 0-1-.45-1-1V85.79c0-.55.45-1 1-1",
+  },
+];
+
+interface DubaiMarinaOnFloorMask7_38CombProps {
+  unitNumber: number;
+}
+
+function DubaiMarinaOnFloorMask7_38Comb({
+  unitNumber,
+}: DubaiMarinaOnFloorMask7_38CombProps) {
+  useEffect(() => {
+    console.log(unitNumber);
+  }, [unitNumber]);
+
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      xmlnsXlink="http://www.w3.org/1999/xlink"
+      viewBox="0 0 626 465"
+      // {...props}
+    >
+      {paths.map((path) => (
+        <path
+          data-name={path.dataName}
+          d={path.d}
+          className={clsx(
+            "fill-red-500",
+            path.dataName === unitNumber ? "opacity-100" : "opacity-0"
+          )}
+        />
+      ))}
+    </svg>
+  );
+}
+
+export default DubaiMarinaOnFloorMask7_38Comb;
diff --git a/src/data/floor-plan-masks/dubai-marina_7-38_comb.ts b/src/data/floor-plan-masks/dubai-marina_7-38_comb.ts
new file mode 100644
index 0000000..9cb8895
--- /dev/null
+++ b/src/data/floor-plan-masks/dubai-marina_7-38_comb.ts
@@ -0,0 +1,100 @@
+import { FloorPlanMasks } from "./marasi-drive";
+
+export const dubaiMarinaMasks: FloorPlanMasks = new Map([
+  [
+    "01",
+    {
+      d: "M39.97,289.09h-16.7c-.55,0-1-.45-1-1v-6.52c0-.55-.45-1-1-1h-5.74c-.55,0-1-.45-1-1v-92.56c0-.55.45-1,1-1h5.78c.55,0,1-.45,1-1v-8.31c0-.55.45-1,1-1h17.34c.55,0,1,.45,1,1v2.5c0,.55.45,1,1,1h46.35c.55,0,1-.45,1-1v-3.38c0-.55.45-1,1-1h34.77c.55,0,1,.45,1,1v45.53c0,.55.45,1,1,1h7.35c.55,0,1,.45,1,1v17.28c0,.55.45,1,1,1h15.5c.55,0,1,.45,1,1v43.27c0,.55-.45,1-1,1h-5.21c-.55,0-1,.45-1,1v7.83c0,.55-.45,1-1,1h-20.77c-.55,0-1-.45-1-1v-3.39c0-.55-.45-1-1-1h-31.69c-.55,0-1-.45-1-1v-3.85c0-.55-.45-1-1-1h-46.98c-.55,0-1,.45-1,1v1.61c0,.55-.45,1-1,1h0Z",
+      textTransform: [67 + 15, 235],
+      formattedUnitType: "1 BR² — B",
+    },
+  ],
+  [
+    "02",
+    {
+      d: "M4.47,380.58h53.31c.08.47.49.82.98.82h2.44c.55,0,1,.45,1,1v47.34c0,.55-.45,1-1,1h-1.59c-.55,0-1,.45-1,1v16.29c0,.55.45,1,1,1h20.17c.09,0,.17.01.26.03l52.8,14.11c3.03.81,6.26-.02,8.53-2.18l9.29-8.85c.2-.19.31-.45.31-.72v-19.71c0-.49-.4-.9-.9-.9s-.9-.4-.9-.9v-47.49c0-.55.45-1,1-1h2.44c.55,0,1-.45,1-1v-42.39c0-.55-.45-1-1-1h-3.76c-.55,0-1-.45-1-1v-7.82c0-.55-.45-1-1-1h-24.55c-.55,0-1-.45-1-1v-21.76c0-.55-.45-1-1-1h-7.72c-.55,0-1-.45-1-1v-7.76c0-.55-.45-1-1-1H4.47c-.55,0-1,.45-1,1v84.9c0,.55.45,1,1,1h0Z",
+      textTransform: [87 + 15, 380],
+      formattedUnitType: "2 BR",
+    },
+  ],
+  [
+    "03",
+    {
+      d: "M157.01,337.51h3.25c.55,0,1-.45,1-1v-8.31c0-.55.45-1,1-1h37.88c.55,0,1,.45,1,1v8.3c0,.55.45,1,1,1h13.71c.55,0,1-.45,1-1v-8.31c0-.55.45-1,1-1h38.33c.55,0,1,.45,1,1v8.3c0,.55.45,1,1,1h6.08c.55,0,1,.45,1,1v92.25h1.8v18.73s.11,3.35,0,3.46l-10.27,9.5c-2.53,2.53-6.43,3.07-9.56,1.33l-24.9-13.9c-.15-.08-.32-.13-.49-.13h-12.26c-.05.11-.12.21-.21.3l-13.06,12.4c-2.53,2.53-6.43,3.07-9.56,1.33l-24.9-13.9c-.15-.08-.32-.13-.49-.13h-6.3c-.55,0-1-.45-1-1v-17.24c0-.41.33-.74.74-.74h1.17v-92.26c0-.55.45-1,1-1l.04.02Z",
+      textTransform: [192 + 15, 380],
+      formattedUnitType: "1 BR² — C",
+    },
+  ],
+  [
+    "04",
+    {
+      d: "M267.53,380.39v-21.73c0-.55.45-1,1-1h15.52c.55,0,1-.45,1-1v-6.04c0-.55.45-1,1-1h28.02c.55,0,1-.45,1-1v-20.43c0-.55.45-1,1-1h40.56c.55,0,1,.45,1,1v7.82c0,.55.45,1,1,1h3.76c.55,0,1,.45,1,1v42.39c0,.55-.45,1-1,1h-2.44c-.55,0-1,.45-1,1v47.49c0,.5-.04.9.46.9s.9.4.9.9v19.71c0,.27-.11.54-.31.72l-8.85,8.85c-2.27,2.16-5.5,2.99-8.53,2.18l-52.8-14.11c-.08-.02-.17-.03-.26-.03h-18.33c-.55,0-1-.45-1-1v-16.29c0-.55.45-1,1-1s.75-.45.75-1v-47.34c0-.55-.45-1-1-1h-2.44c-.55,0-1-.45-1-1h0Z",
+      textTransform: [297 + 15, 380],
+      formattedUnitType: "1 BR² — A",
+    },
+  ],
+  [
+    "05",
+    {
+      d: "M366.2,337.51h3.25c.55,0,1-.45,1-1v-8.31c0-.55.45-1,1-1h37.88c.55,0,1,.45,1,1v8.3c0,.55.45,1,1,1h13.72c.55,0,1-.44,1-1v-8.31c0-.55.45-1,1-1h38.33c.55,0,1,.45,1,1v8.3c0,.55.45,1,1,1h6.08c.55,0,1,.45,1,1v92.25h1.8v18.73s.11,3.35,0,3.46l-10.27,9.5c-2.53,2.53-6.43,3.07-9.56,1.33l-24.9-13.9c-.15-.08-.32-.13-.49-.13h-12.26c-.05.11-.12.21-.21.3l-13.06,12.4c-2.53,2.53-6.43,3.07-9.56,1.33l-24.9-13.9c-.15-.08-.32-.13-.49-.13h-6.3c-.55,0-1-.45-1-1v-17.24c0-.41.33-.74.74-.74h1.17v-92.26c0-.55.45-1,1-1l.03.02Z",
+      textTransform: [401 + 15, 380],
+      formattedUnitType: "1 BR² — C",
+    },
+  ],
+  [
+    "06",
+    {
+      d: "M627.85,380.58h-55.02v1.7h-4.02v48.93h4.12v18.59l-11.74,12.61c-2.03,2.18-5.11,3.05-7.98,2.26l-53.9-14.87h-19.7v-18.59h1.67v-49h-3.95v-44.79h5.4v-9.76h26.88v-23.2c0-.55.45-1,1-1h7.41c.55,0,1-.45,1-1v-7.87c0-.55.45-1,1-1h107.82c.55,0,1,.45,1,1v85c0,.55-.45,1-1,1h.01Z",
+      textTransform: [505 + 15, 380],
+      formattedUnitType: "2 BR",
+    },
+  ],
+  [
+    "07",
+    {
+      d: "M477.4,224.08h17.41v17.65h-17.41v45.48h7.19v10.13h22.29v-4.45h12.26v-1.33h22.81v-6.06h47.75v4.76h18.55v-9.82h8.52v-94.5h-8.52v-9.82h-18.55v4.76h-47.75v-6.06h-22.81v-1.33h-12.26v-4.45h-22.29v10.13h-7.19v44.9h0Z",
+      textTransform: [525 + 15, 229],
+      formattedUnitType: "1 BR — D",
+    },
+  ],
+  [
+    "08",
+    {
+      d: "M627.85,85.54h-55.02v-1.73h-4.02v-48.93h4.12v-18.59l-11.74-12.61c-2.03-2.18-5.11-3.05-7.98-2.26l-53.9,14.87h-19.7v18.59h1.67v49h-3.95v44.79h5.4v9.76h26.88v23.23c0,.55.45,1,1,1h7.73c.55,0,1,.45,1,1v7.86c0,.55.45,1,1,1h107.5c.55,0,1-.45,1-1v-84.99c0-.55-.45-1-1-1h.01Z",
+      textTransform: [505 + 15, 78],
+      formattedUnitType: "2 BR",
+    },
+  ],
+  [
+    "09",
+    {
+      d: "M366.2,128.13h3.25c.55,0,1,.45,1,1v8.31c0,.55.45,1,1,1h37.88c.55,0,1-.45,1-1v-8.3c0-.55.45-1,1-1h13.71c.55,0,1,.45,1,1v8.31c0,.55.45,1,1,1h38.33c.55,0,1-.45,1-1v-8.3c0-.55.45-1,1-1h6.08c.55,0,1-.45,1-1V34.87h1.8v-18.73s.11-3.35,0-3.46l-10.27-9.5c-2.53-2.53-6.43-3.07-9.56-1.33l-24.9,13.9c-.15.08-.32.13-.49.13h-13.26c-.05-.11-.12-.21-.21-.3l-12.06-12.4c-2.53-2.53-6.43-3.07-9.56-1.33l-24.9,13.9c-.15.08-.32.13-.49.13h-6.3c-.55,0-1,.45-1,1v17.24c0,.41.33.74.74.74h1.17v92.26c0,.55.45,1,1,1h.04Z",
+      textTransform: [401 + 15, 78],
+      formattedUnitType: "1 BR² — C",
+    },
+  ],
+  [
+    "10",
+    {
+      d: "M267.53,85.23v21.73c0,.55.45,1,1,1h15.52c.55,0,1,.45,1,1v6.03c0,.55.45,1,1,1h28.02c.55,0,1,.45,1,1v20.43c0,.55.45,1,1,1h40.56c.55,0,1-.45,1-1v-7.82c0-.55.45-1,1-1h3.76c.55,0,1-.45,1-1v-42.39c0-.55-.45-1-1-1h-2.44c-.55,0-1-.45-1-1v-47.49c0-.5-.04-.9.46-.9s.9-.4.9-.9V14.22c0-.27-.11-.54-.31-.72l-8.85-8.85c-2.27-2.16-5.5-2.99-8.53-2.18l-52.8,14.11c-.08.02-.17.03-.26.03h-18.33c-.55,0-1,.45-1,1v16.29c0,.55.45,1,1,1s.75.45.75,1v47.34c0,.55-.45,1-1,1h-2.44c-.55,0-1,.45-1,1h0Z",
+      textTransform: [297 + 15, 78],
+      formattedUnitType: "1 BR² — A",
+    },
+  ],
+  [
+    "11",
+    {
+      d: "M157.01,128.13h3.25c.55,0,1,.45,1,1v8.31c0,.55.45,1,1,1h37.88c.55,0,1-.45,1-1v-8.3c0-.55.45-1,1-1h13.72c.55,0,1,.44,1,1v8.31c0,.55.45,1,1,1h38.33c.55,0,1-.45,1-1v-8.3c0-.55.45-1,1-1h6.08c.55,0,1-.45,1-1V34.87h1.8v-18.73s.11-3.35,0-3.46l-10.27-9.5c-2.53-2.53-6.43-3.07-9.56-1.33l-24.9,13.9c-.15.08-.32.13-.49.13h-14.26c-.05-.11-.12-.21-.21-.3l-11.06-12.4c-2.53-2.53-6.43-3.07-9.56-1.33l-24.9,13.9c-.15.08-.32.13-.49.13h-6.3c-.55,0-1,.45-1,1v17.24c0,.41.33.74.74.74h1.17v92.26c0,.55.45,1,1,1h.03Z",
+      textTransform: [192 + 15, 78],
+      formattedUnitType: "1 BR² — C",
+    },
+  ],
+  [
+    "12",
+    {
+      d: "M4.47,85.54h53.29v-.31c0-.55.45-1,1-1h2.44c.55,0,1-.45,1-1v-47.34c0-.55-.45-1-1-1h-1.59c-.55,0-1-.45-1-1v-16.29c0-.55.45-1,1-1h20.17c.09,0,.17-.01.26-.03l52.8-14.11c3.03-.81,6.26.02,8.53,2.18l9.29,8.85c.2.19.31.45.31.72v19.71c0,.5-.4.9-.9.9s-.9.4-.9.9v47.49c0,.55.45,1,1,1h2.44c.55,0,1,.45,1,1v42.39c0,.55-.45,1-1,1h-3.76c-.55,0-1,.45-1,1v7.82c0,.55-.45,1-1,1h-25.55v23.25c0,.55-.45,1-1,1h-7.72c-.55,0-1,.45-1,1v7.86c0,.55-.45,1-1,1H4.47c-.55,0-1-.45-1-1v-84.99c0-.55.45-1,1-1h0Z",
+      textTransform: [87 + 15, 78],
+      formattedUnitType: "2 BR",
+    },
+  ],
+]);
diff --git a/src/data/projects.ts b/src/data/projects.ts
index a64bbd4..0494bee 100644
--- a/src/data/projects.ts
+++ b/src/data/projects.ts
@@ -9,9 +9,10 @@ export const projects: Project[] = [
       {
         name: "Studio Flex",
         slug: "studio-flex",
-        wings: "West Wing",
+        wing: "West Wing",
         floors: "Floor 5-21",
         area: "341-366 Sqft",
+        onFloorColor: "#969495",
         desc: [
           "In Studio Flex explore the ORI Cloud Bed, optimizing your living space with functionality and smart living.",
           "Every inch is designed to provide more space for comfort and convenience. This feature increase your unit size by 33%",
@@ -68,9 +69,10 @@ export const projects: Project[] = [
       {
         name: "Studio²",
         slug: "studio-2",
-        wings: "East Wing / West Wing",
+        wing: "East Wing / West Wing",
         floors: "Floor 5-21 / 24-31",
         area: "386-416 Sqft",
+        onFloorColor: "#000000",
         desc: [
           "In Studio² experience the Flexibed, a smart innovation for modern living.",
           "When folded, it unveils a spacious living room creating a cohesive space that blends both style and functionality.",
@@ -127,9 +129,10 @@ export const projects: Project[] = [
       {
         name: "1 Bedroom² Type A",
         slug: "1-bedroom-a",
-        wings: "West Wing",
+        wing: "West Wing",
         floors: "Floor 5-31",
         area: "622 Sqft",
+        onFloorColor: "#000000",
         desc: [
           "In 1 Bedroom² double up your space with next generation features that enhance smart living.",
           "With pocket walls that disappear and a Flexibed that seamlessly converts, you can trans form your living room into an extra bedroom, anytime you want!",
@@ -190,9 +193,10 @@ export const projects: Project[] = [
       {
         name: "1 Bedroom² Type B",
         slug: "1-bedroom-b",
-        wings: "East Wing / West Wing",
+        wing: "East Wing / West Wing",
         floors: "Floor 5-31",
         area: "751-770 Sqft",
+        onFloorColor: "#000000",
         desc: [
           "In 1 Bedroom² double up your space with next generation features that enhance smart living.",
           "With pocket walls that disappear and a Flexibed that seamlessly converts, you can trans form your living room into an extra bedroom, anytime you want!",
@@ -248,9 +252,10 @@ export const projects: Project[] = [
       {
         name: "1 Bedroom² Type C",
         slug: "1-bedroom-c",
-        wings: "East Wing / West Wing",
+        wing: "East Wing / West Wing",
         floors: "Floor 5-31",
         area: "608-642 Sqft",
+        onFloorColor: "#000000",
         desc: [
           "In 1 Bedroom² double up your space with next generation features that enhance smart living.",
           "With pocket walls that disappear and a Flexibed that seamlessly converts, you can trans form your living room into an extra bedroom, anytime you want!",
@@ -311,9 +316,10 @@ export const projects: Project[] = [
       {
         name: "1 Bedroom² Type D",
         slug: "1-bedroom-d",
-        wings: "East Wing / West Wing",
+        wing: "East Wing / West Wing",
         floors: "Floor 5-21 / 24-31",
         area: "607-619 Sqft",
+        onFloorColor: "#000000",
         desc: [
           "In 1 Bedroom² double up your space with next generation features that enhance smart living.",
           "With pocket walls that disappear and a Flexibed that seamlessly converts, you can trans form your living room into an extra bedroom, anytime you want!",
@@ -375,9 +381,10 @@ export const projects: Project[] = [
       {
         name: "2 Bedroom² Type A",
         slug: "2-bedroom-a",
-        wings: "East Wing / West Wing",
+        wing: "East Wing / West Wing",
         floors: "Floor 5-31",
         area: "914 Sqft",
+        onFloorColor: "#000000",
         desc: [
           "In 2 Bedroom² discover extra functionality with added space and maximum value.",
           "Whether you want to add a multipurpose spare room or double up your living space as a bedroom - every inch of space feels larger and works exactly how you want.",
@@ -448,9 +455,10 @@ export const projects: Project[] = [
       {
         name: "2 Bedroom² Type B",
         slug: "2-bedroom-b",
-        wings: "West Wing",
+        wing: "West Wing",
         floors: "Floor 5-31",
         area: "1058 Sqft",
+        onFloorColor: "#000000",
         desc: [
           "In 2 Bedroom² discover extra functionality with added space and maximum value.",
           "Whether you want to add a multipurpose spare room or double up your living space as a bedroom - every inch of space feels larger and works exactly how you want.",
@@ -558,6 +566,7 @@ export const projects: Project[] = [
         slug: "studio-2-a",
         floors: "Floor 7-20 / 22-38",
         area: "402 Sqft",
+        onFloorColor: "#000000",
         desc: [
           "In Studio² experience the Flexibed, a smart innovation for modern living.",
           "When folded, it unveils a spacious living room creating a cohesive space that blends both style and functionality.",
@@ -621,6 +630,7 @@ export const projects: Project[] = [
         slug: "studio-2-b",
         floors: "Floor 7-20 / 22-38",
         area: "444 Sqft",
+        onFloorColor: "#000000",
         desc: [
           "In Studio² experience the Flexibed, a smart innovation for modern living.",
           "When folded, it unveils a spacious living room creating a cohesive space that blends both style and functionality.",
@@ -694,6 +704,7 @@ export const projects: Project[] = [
         slug: "studio-2-c",
         floors: "Floor 7-20 / 22-38",
         area: "460 Sqft",
+        onFloorColor: "#000000",
         desc: [
           "In Studio² experience the Flexibed, a smart innovation for modern living.",
           "When folded, it unveils a spacious living room creating a cohesive space that blends both style and functionality.",
@@ -757,6 +768,7 @@ export const projects: Project[] = [
         slug: "1-bedroom-a",
         floors: "Floor 7-20 / 22-38",
         area: "613-620 Sqft",
+        onFloorColor: "#000000",
         desc: [
           "In 1 Bedroom² double up your space with next generation features that enhance smart living.",
           "With pocket walls that disappear and a Flexibed that seamlessly converts, you can trans form your living room into an extra bedroom, anytime you want!",
@@ -830,6 +842,7 @@ export const projects: Project[] = [
         slug: "1-bedroom-b",
         floors: "Floor 7-20 / 22-38",
         area: "827 Sqft",
+        onFloorColor: "#000000",
         desc: [
           "In 1 Bedroom² double up your space with next generation features that enhance smart living.",
           "With pocket walls that disappear and a Flexibed that seamlessly converts, you can trans form your living room into an extra bedroom, anytime you want!",
@@ -918,6 +931,7 @@ export const projects: Project[] = [
         slug: "1-bedroom-c",
         floors: "Floor 7-20 / 22-38",
         area: "804 Sqft",
+        onFloorColor: "#000000",
         desc: [
           "In 1 Bedroom² double up your space with next generation features that enhance smart living.",
           "With pocket walls that disappear and a Flexibed that seamlessly converts, you can trans form your living room into an extra bedroom, anytime you want!",
@@ -1011,6 +1025,7 @@ export const projects: Project[] = [
         slug: "1-bedroom-d",
         floors: "Floor 7-20 / 22-38",
         area: "919-926 Sqft",
+        onFloorColor: "#000000",
         desc: [
           "In 1 Bedroom² double up your space with next generation features that enhance smart living.",
           "With pocket walls that disappear and a Flexibed that seamlessly converts, you can trans form your living room into an extra bedroom, anytime you want!",
@@ -1104,6 +1119,7 @@ export const projects: Project[] = [
         slug: "2-bedroom-a",
         floors: "Floor 7-20 / 22-38",
         area: "1064 Sqft",
+        onFloorColor: "#000000",
         desc: [
           "In 2 Bedroom² discover extra functionality with added space and maximum value.",
           "Whether you want to add a multipurpose spare room or double up your living space as a bedroom - every inch of space feels larger and works exactly how you want.",
@@ -1217,6 +1233,7 @@ export const projects: Project[] = [
         slug: "1-bedroom-loft-a",
         floors: "Floor 39-40 / 41-42",
         area: "1130 Sqft",
+        onFloorColor: "#000000",
         desc: [
           "In 1 Bedroom² double up your space with next generation features that enhance smart living.",
           "With pocket walls that disappear and a Flexibed that seamlessly converts, you can trans form your living room into an extra bedroom, anytime you want!",
@@ -1355,6 +1372,7 @@ export const projects: Project[] = [
         slug: "1-bedroom-loft-b",
         floors: "Floor 39-40 / 41-42",
         area: "1095 Sqft",
+        onFloorColor: "#000000",
         desc: [
           "In 1 Bedroom² double up your space with next generation features that enhance smart living.",
           "With pocket walls that disappear and a Flexibed that seamlessly converts, you can trans form your living room into an extra bedroom, anytime you want!",
@@ -1487,6 +1505,7 @@ export const projects: Project[] = [
         slug: "1-bedroom-loft-c",
         floors: "Floor 39-40 / 41-42",
         area: "1361 Sqft",
+        onFloorColor: "#000000",
         desc: [
           "In 1 Bedroom² double up your space with next generation features that enhance smart living.",
           "With pocket walls that disappear and a Flexibed that seamlessly converts, you can trans form your living room into an extra bedroom, anytime you want!",
@@ -1619,6 +1638,7 @@ export const projects: Project[] = [
         slug: "2-bedroom-loft",
         floors: "Floor 39-40 / 41-42",
         area: "1511 Sqft",
+        onFloorColor: "#000000",
         desc: [
           "In 2 Bedroom² discover extra functionality with added space and maximum value.",
           "Whether you want to add a multipurpose spare room or double up your living space as a bedroom - every inch of space feels larger and works exactly how you want.",
diff --git a/src/main.tsx b/src/main.tsx
index 6c5a9d5..ded2b88 100644
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -1,7 +1,7 @@
 // Initialize Eruda for mobile debugging in development
-if (import.meta.env.DEV) {
-  import('eruda').then(eruda => eruda.default.init());
-}
+// if (import.meta.env.DEV) {
+//   import('eruda').then(eruda => eruda.default.init());
+// }
 
 import "./index.css";
 import { QueryClientProvider } from "@tanstack/react-query";
diff --git a/src/pages/FloorsPage.tsx b/src/pages/FloorsPage.tsx
index cc4b7bd..05e4761 100644
--- a/src/pages/FloorsPage.tsx
+++ b/src/pages/FloorsPage.tsx
@@ -1,7 +1,7 @@
 import FloorSelect, { FloorsData } from "../components/FloorSelect";
 import { useParams } from "react-router";
 import FloorSidebar from "../components/FloorSidebar";
-import FloorPlanDubaiMarina from "../components/FloorPlanDubaiMarina";
+
 import { useState } from "react";
 import Select from "../components/ui/Select";
 import { useQuery } from "@tanstack/react-query";
@@ -23,8 +23,11 @@ import { Unit } from "../types/IUnit";
 import slugToComplexName from "../utils/slugToComplexName";
 import { usePopupStore } from "../stores/usePopupStore";
 import { isMobile } from "react-device-detect";
-import FloorPlanDubaiMarina39_40 from "../components/FloorPlanDubaiMarina39_40";
 import FloorPlanDubaiMarina41_42 from "../components/FloorPlanDubaiMarina41_42";
+import FloorPlanDubaiMarina39_40 from "../components/FloorPlanDubaiMarina39_40";
+import FloorPlanDubaiMarina7_38Comb from "../components/FloorPlanDubaiMarina7_38Comb";
+import FloorPlanDubaiMarina7_38 from "../components/FloorPlanDubaiMarina7_38";
+import Button from "../components/ui/Button";
 
 function FloorsPage() {
   const { complexName } = useParams();
@@ -61,6 +64,7 @@ function FloorsPage() {
   });
 
   const { setPosition, setPopup } = usePopupStore();
+  const [isCombinable, setIsCombinable] = useState(false);
 
   return (
     <div className="relative 2xl:h-[calc(100dvh-4.444vw)]md:max-2xl:h-[calc(100vh-64px)]h-[calc(100vh-56px)] h-full overflow-hidden">
@@ -161,6 +165,22 @@ function FloorsPage() {
                       />
                     </div>
                   </div>
+                  {/* <div className="flex items-center justify-center gap-2">
+                    <Button
+                      variant={!isCombinable ? "cta" : "primary"}
+                      className="w-full"
+                      onClick={() => setIsCombinable(false)}
+                    >
+                      Standard
+                    </Button>
+                    <Button
+                      variant={isCombinable ? "cta" : "primary"}
+                      className="w-full"
+                      onClick={() => setIsCombinable(true)}
+                    >
+                      Combinable
+                    </Button>
+                  </div> */}
                   <div
                     className="2xl:py-[1.667vw] 2xl:px-[1.111vw] max-2xl:p-4 bg-[#F3F3F2] 2xl:rounded-[0.833vw] rounded-lg relative 2xl:space-y-[2.222vw] space-y-8"
                     onMouseMove={(e) =>
@@ -170,10 +190,19 @@ function FloorsPage() {
                     {selectedFloor && unitsOnFloor && (
                       <>
                         {+selectedFloor >= 7 && +selectedFloor < 39 && (
-                          <FloorPlanDubaiMarina
-                            selectedFloor={selectedFloor}
-                            unitsOnFloor={unitsOnFloor}
-                          />
+                          <>
+                            {!isCombinable ? (
+                              <FloorPlanDubaiMarina7_38
+                                selectedFloor={selectedFloor}
+                                unitsOnFloor={unitsOnFloor}
+                              />
+                            ) : (
+                              <FloorPlanDubaiMarina7_38Comb
+                                selectedFloor={selectedFloor}
+                                unitsOnFloor={unitsOnFloor}
+                              />
+                            )}
+                          </>
                         )}
                         {selectedFloor === "39-40" && (
                           <FloorPlanDubaiMarina39_40
diff --git a/src/pages/UnitPage.tsx b/src/pages/UnitPage.tsx
index 99da56f..69bc7c8 100644
--- a/src/pages/UnitPage.tsx
+++ b/src/pages/UnitPage.tsx
@@ -15,6 +15,8 @@ import { useEffect, useState } from "react";
 import UnitTypeImageWithMarkers from "../components/UnitTypeImageWithMarkers";
 import { getUnitTypeVariantMarasiDrive } from "../utils/getUnitTypeVariantMarasiDrive";
 import { formattedUnitTypes } from "../data/formattedUnitTypes";
+import UnitMaskOnFloor from "../components/UnitMaskOnFloor";
+import { isUnitCombinable } from "../utils/getUnitMaskOnFloor";
 // import { useEffect } from "react";
 // import PlayIcon from "../components/icons/PlayIcon";
 // import { useRef } from "react";
@@ -57,6 +59,12 @@ function UnitPage() {
 
       setUnitTypeVariantMarasiDrive(unitTypeVariantMarasiDrive);
     }
+
+    if (unit) {
+      console.log("Unit number:", unit.unitNo);
+      console.log("Is combinable:", isUnitCombinable(unit));
+      console.log("Unit type:", unit.unitType);
+    }
   }, [unit]);
 
   const { favoriteUnits, setFavoriteUnits } = useFavoritesUnitsStore();
@@ -104,6 +112,8 @@ function UnitPage() {
               }
             />
 
+            {unit && <UnitMaskOnFloor unit={unit} />}
+
             {/* <img
           src={`/images/unit-types/${params.complexName}/${getUnitTypeSlug(
             params.complexName!,
diff --git a/src/types/IUnit.ts b/src/types/IUnit.ts
index e8e0ecb..312269b 100644
--- a/src/types/IUnit.ts
+++ b/src/types/IUnit.ts
@@ -2,7 +2,7 @@ export interface Unit {
   id: string;
   unitNo: string;
   project: string;
-  floor: string;
+  floor: number;
   unitType: string;
   unitView: string;
   state: string;
diff --git a/src/types/UnitType.ts b/src/types/UnitType.ts
index cff1b42..a809612 100644
--- a/src/types/UnitType.ts
+++ b/src/types/UnitType.ts
@@ -1,9 +1,10 @@
 export default interface UnitType {
   name: string;
   slug: string;
-  wings?: string;
+  wing?: string;
   floors: string;
   area: string;
+  onFloorColor?: string;
   desc: string[];
   video?: {
     title: string;
diff --git a/src/utils/getUnitMaskOnFloor.ts b/src/utils/getUnitMaskOnFloor.ts
new file mode 100644
index 0000000..227c9ad
--- /dev/null
+++ b/src/utils/getUnitMaskOnFloor.ts
@@ -0,0 +1,44 @@
+import { Unit } from "../types/IUnit";
+
+// Helper function to check if a unit is combinable
+export function isUnitCombinable(unit: Unit): boolean {
+  // For Dubai Marina project, check if unit number ends with "-C"
+  if (unit.project === "Rove Home Dubai Marina") {
+    return unit.unitNo.endsWith("-C");
+  }
+  
+  // For other projects, check if unit type contains "Combined"
+  return unit.unitType.includes("Combined");
+}
+
+export default function getUnitMaskOnFloor(unit: Unit) {
+  if (unit.project === "Rove Home Marasi Drive") {
+    if (unit.wing === "East") {
+      return "marasi-drive-east-mask-5_31";
+    } else if (unit.wing === "West") {
+      if (unit.floor >= 5 && unit.floor <= 21) {
+        return "marasi-drive-west-mask-5_21";
+      } else if (unit.floor >= 24 && unit.floor <= 31) {
+        return "marasi-drive-west-mask-24_31";
+      }
+    }
+  } else if (unit.project === "Rove Home Dubai Marina") {
+    if (
+      (unit.floor >= 7 && unit.floor <= 20) ||
+      (unit.floor >= 22 && unit.floor <= 38)
+    ) {
+      // Check combinable
+      if (isUnitCombinable(unit)) {
+        return "dubai-marina-mask-7_38-combinable";
+      } else {
+        return "dubai-marina-mask-7_38";
+      }
+    } else if (unit.floor >= 39 && unit.floor <= 40) {
+      return "dubai-marina-mask-39_40";
+    } else if (unit.floor >= 41 && unit.floor <= 42) {
+      return "dubai-marina-mask-41_42";
+    }
+  }
+
+  return null;
+}