diff --git a/public/images/map/markers/popups/downtown.png b/public/images/map/markers/popups/downtown.png
index d79b0f6..d53ff47 100644
Binary files a/public/images/map/markers/popups/downtown.png and b/public/images/map/markers/popups/downtown.png differ
diff --git a/public/images/map/markers/popups/downtown_old.png b/public/images/map/markers/popups/downtown_old.png
new file mode 100644
index 0000000..d79b0f6
Binary files /dev/null and b/public/images/map/markers/popups/downtown_old.png differ
diff --git a/public/images/map/markers/popups/dubai-marina.png b/public/images/map/markers/popups/dubai-marina.png
index bb8dcd7..69455db 100644
Binary files a/public/images/map/markers/popups/dubai-marina.png and b/public/images/map/markers/popups/dubai-marina.png differ
diff --git a/public/images/map/markers/popups/dubai-marina_old.png b/public/images/map/markers/popups/dubai-marina_old.png
new file mode 100644
index 0000000..bb8dcd7
Binary files /dev/null and b/public/images/map/markers/popups/dubai-marina_old.png differ
diff --git a/public/images/map/markers/popups/hq.png b/public/images/map/markers/popups/hq.png
index 95e4283..62fb5ec 100644
Binary files a/public/images/map/markers/popups/hq.png and b/public/images/map/markers/popups/hq.png differ
diff --git a/public/images/map/markers/popups/marasi-drive.png b/public/images/map/markers/popups/marasi-drive.png
index 925bde3..f4c76a2 100644
Binary files a/public/images/map/markers/popups/marasi-drive.png and b/public/images/map/markers/popups/marasi-drive.png differ
diff --git a/public/images/map/markers/popups/marasi-drive_old.png b/public/images/map/markers/popups/marasi-drive_old.png
new file mode 100644
index 0000000..925bde3
Binary files /dev/null and b/public/images/map/markers/popups/marasi-drive_old.png differ
diff --git a/src/components/AboutHQ.tsx b/src/components/AboutHQ.tsx
index 1e90577..b959901 100644
--- a/src/components/AboutHQ.tsx
+++ b/src/components/AboutHQ.tsx
@@ -39,9 +39,9 @@ export default function AboutHQ() {
 
           <div className="2xl:space-y-[1.667vw] md:max-2xl:space-y-6 space-y-4 relative">
             <h1 className="2xl:text-[5vw] md:max-2xl:text-7xl text-[32px] leading-none tracking-[-0.07em] font-mixcase-unmixed font-medium whitespace-pre-line">
-              {`Rove Home HQ — 
-                Work looks different
-                here`}
+              {`HQ by Rove instead —
+               Work looks different
+               here`}
             </h1>
           </div>
 
@@ -55,7 +55,7 @@ export default function AboutHQ() {
               {`Welcome to the office you
                     actually want to show up for`}
             </h4>
-            <p className="opacity-70 text-s 2xl:w-1/4 md:max-2xl:w-1/3">
+            <p className="text-s 2xl:w-1/4 md:max-2xl:w-1/3 opacity-70">
               HQ by Rove was born out of a question: what if the office could
               feel alive again? Now, the first ever hospitality-branded office
               building in Dubai is here to answer it. Starting in Marasi Bay
@@ -82,7 +82,7 @@ export default function AboutHQ() {
                 <span className="opacity-40">More than an office,</span>{" "}
                 <br className="2xl:hidden" /> a lifestyle.
               </h2>
-              <p className="text-center whitespace-pre-line opacity-70 text-s max-md:whitespace-normal max-md:mb-12 md:max-2xl:mb-16">
+              <p className="text-s max-md:whitespace-normal max-md:mb-12 md:max-2xl:mb-16 text-center whitespace-pre-line opacity-70">
                 {`Living rooms became boardrooms, kitchens became creative hubs.
                       But as the world returned, the office didn’t keep up. HQ by Rove is the
                       answer - an office with a living touch.`}
@@ -274,7 +274,7 @@ export default function AboutHQ() {
         </div>
         <div className="px-[2.778vw] flex flex-col gap-[3.333vw] max-2xl:px-0 md:max-2xl:gap-[6.25vw]">
           <div className="space-y-[1.111vw]">
-            <h2 className="font-medium whitespace-pre-line text-h2 max-2xl:mb-4">
+            <h2 className="text-h2 max-2xl:mb-4 font-medium whitespace-pre-line">
               {`Work looks different here`}
             </h2>
             <p className="opacity-40 text-s max-md:mb-[32px] md:max-2xl:max-w-[57.943vw]">
diff --git a/src/components/FloorPlanMarasiDriveEast.tsx b/src/components/FloorPlanMarasiDriveEast.tsx
index 2802f74..fa3c528 100644
--- a/src/components/FloorPlanMarasiDriveEast.tsx
+++ b/src/components/FloorPlanMarasiDriveEast.tsx
@@ -6,12 +6,14 @@ interface FloorPlanMarasiDriveEastProps {
   selectedFloor: string | null;
   unitsOnFloor: Unit[];
   chosenUnit?: Unit;
+  isUnitPage?: boolean;
 }
 
 function FloorPlanMarasiDriveEast({
   selectedFloor,
   unitsOnFloor,
   chosenUnit,
+  isUnitPage,
 }: FloorPlanMarasiDriveEastProps) {
   return (
     <GenericFloorPlan
@@ -22,6 +24,7 @@ function FloorPlanMarasiDriveEast({
       selectedFloor={selectedFloor}
       unitsOnFloor={unitsOnFloor}
       chosenUnit={chosenUnit}
+      isUnitPage={isUnitPage}
       wing="East"
     >
       <g>
diff --git a/src/components/FloorPlanMarasiDriveWestLower.tsx b/src/components/FloorPlanMarasiDriveWestLower.tsx
index 85170d7..79d0e9c 100644
--- a/src/components/FloorPlanMarasiDriveWestLower.tsx
+++ b/src/components/FloorPlanMarasiDriveWestLower.tsx
@@ -6,12 +6,14 @@ interface FloorPlanMarasiDriveWestLowerProps {
   selectedFloor: string | null;
   unitsOnFloor: Unit[];
   chosenUnit?: Unit;
+  isUnitPage?: boolean;
 }
 
 function FloorPlanMarasiDriveWestLower({
   selectedFloor,
   unitsOnFloor,
   chosenUnit,
+  isUnitPage,
 }: FloorPlanMarasiDriveWestLowerProps) {
   return (
     <GenericFloorPlan
@@ -22,6 +24,7 @@ function FloorPlanMarasiDriveWestLower({
       selectedFloor={selectedFloor}
       unitsOnFloor={unitsOnFloor}
       chosenUnit={chosenUnit}
+      isUnitPage={isUnitPage}
       wing="West"
     >
       <g>
diff --git a/src/components/FloorPlanMarasiDriveWestUpper.tsx b/src/components/FloorPlanMarasiDriveWestUpper.tsx
index add5453..789219a 100644
--- a/src/components/FloorPlanMarasiDriveWestUpper.tsx
+++ b/src/components/FloorPlanMarasiDriveWestUpper.tsx
@@ -6,12 +6,14 @@ interface FloorPlanMarasiDriveWestUpperProps {
   selectedFloor: string | null;
   unitsOnFloor: Unit[];
   chosenUnit?: Unit;
+  isUnitPage?: boolean;
 }
 
 function FloorPlanMarasiDriveWestUpper({
   unitsOnFloor,
   selectedFloor,
   chosenUnit,
+  isUnitPage,
 }: FloorPlanMarasiDriveWestUpperProps) {
   return (
     <GenericFloorPlan
@@ -22,6 +24,7 @@ function FloorPlanMarasiDriveWestUpper({
       selectedFloor={selectedFloor}
       unitsOnFloor={unitsOnFloor}
       chosenUnit={chosenUnit}
+      isUnitPage={isUnitPage}
       wing="West"
     >
       <g>
diff --git a/src/components/Marker.tsx b/src/components/Marker.tsx
index b0e0432..0c15c04 100644
--- a/src/components/Marker.tsx
+++ b/src/components/Marker.tsx
@@ -64,7 +64,7 @@ function Marker({
       />
       <div
         className={clsx(
-          "absolute bottom-[10%]",
+          "absolute bottom-[10%]ф top-1/2 -translate-y-1/2",
           marker.popupPosition === "left" ? "right-full" : "left-full"
         )}
       >
diff --git a/src/components/OnFloorMask.tsx b/src/components/OnFloorMask.tsx
index 0716bb8..6f3032d 100644
--- a/src/components/OnFloorMask.tsx
+++ b/src/components/OnFloorMask.tsx
@@ -1,16 +1,50 @@
+import { useQuery } from "@tanstack/react-query";
+import { api } from "../api/ky";
 import { Unit } from "../types/IUnit";
 import GenericFloorPlan from "./floor-plans/GenericFloorPlan";
 import { getFloorPlanConfigForUnit } from "../data/floor-plan-config";
 import { getSlugFromProjectName } from "../data/complex-config";
+import { ComplexName } from "../types/ComplexName";
+
+// ─── Helpers ─────────────────────────────────────────────
+
+function getFloorParam(complexName: ComplexName, unit: Unit): string {
+  if (complexName === "dubai-marina" && (unit.floor === 39 || unit.floor === 40))
+    return "39";
+  if (complexName === "dubai-marina" && (unit.floor === 41 || unit.floor === 42))
+    return "41";
+  if (complexName === "hq" && (unit.floor === 29 || unit.floor === 30))
+    return "29";
+  return unit.floor.toString();
+}
 
 // ─── Component ───────────────────────────────────────────
 
 function OnFloorMask({ unit }: { unit: Unit }) {
   const complexName = getSlugFromProjectName(unit.project);
-  if (!complexName) return null;
+  const config = complexName
+    ? getFloorPlanConfigForUnit(complexName, unit)
+    : null;
+  const floorParam = complexName ? getFloorParam(complexName, unit) : "";
 
-  const config = getFloorPlanConfigForUnit(complexName, unit);
-  if (!config) return null;
+  const { data: unitsOnFloor } = useQuery({
+    queryKey: ["units-on-floor", complexName, floorParam, unit.wing],
+    queryFn: () =>
+      api
+        .get(
+          `units/on-floor?project=${complexName}&floor=${floorParam}${
+            complexName === "marasi-drive" && unit.wing
+              ? `&wing=${unit.wing}`
+              : ""
+          }`
+        )
+        .json<Unit[]>(),
+    enabled: !!complexName && !!config,
+  });
+
+  if (!complexName || !config) return null;
+
+  const units = unitsOnFloor ?? [unit];
 
   // Marasi Drive uses component-based rendering (inline SVG)
   if (config.component) {
@@ -18,8 +52,9 @@ function OnFloorMask({ unit }: { unit: Unit }) {
     return (
       <Component
         selectedFloor={unit.floor.toString()}
-        unitsOnFloor={[unit]}
+        unitsOnFloor={units}
         chosenUnit={unit}
+        isUnitPage
       />
     );
   }
@@ -34,8 +69,9 @@ function OnFloorMask({ unit }: { unit: Unit }) {
       getMaskKey={config.getMaskKey}
       filterUnits={config.filterUnits}
       selectedFloor={unit.floor.toString()}
-      unitsOnFloor={[unit]}
+      unitsOnFloor={units}
       chosenUnit={unit}
+      isUnitPage
       wing={config.wing}
     />
   );
diff --git a/src/components/PopupContainer.tsx b/src/components/PopupContainer.tsx
index 3e2987c..5dfeb2b 100644
--- a/src/components/PopupContainer.tsx
+++ b/src/components/PopupContainer.tsx
@@ -61,13 +61,14 @@ function PopupContainer() {
           <div
             className={clsx(
               "max-md:hidden absolute 2xl:border-[0.556vw_0px_0.486vw_0.556vw] [border-width:8px_0px_7px_8px] [border-color:_transparent_transparent_transparent_#fff]",
-              side === "left" && "top-1/2 [y:-50%] left-full [x:1px]",
+              side === "left" &&
+                "top-1/2 -translate-y-1/2 left-full -translate-x-[1px]",
               side === "right" &&
-                "top-1/2 [y:-50%] right-full [x:1px] [rotate:180deg]",
+                "top-1/2 translate-y-1/2 right-full -translate-x-[1px] [rotate:180deg]",
               side === "top" &&
-                "left-1/2 [x:100%] absolute top-full [y:1px] [rotate:90deg] origin-top-left",
+                "left-1/2 -translate-y-full -translate-x-[1px] absolute top-full [rotate:90deg] origin-top-left",
               side === "bottom" &&
-                "left-1/2 [x:100%] absolute bottom-full [y:1px] [rotate:-90deg] origin-bottom-left"
+                "left-1/2 translate-y-full -translate-x-[1px] absolute bottom-full [rotate:-90deg] origin-bottom-left"
             )}
           />
         </motion.div>
diff --git a/src/components/SearchFilters.tsx b/src/components/SearchFilters.tsx
index aa240cf..809b264 100644
--- a/src/components/SearchFilters.tsx
+++ b/src/components/SearchFilters.tsx
@@ -173,7 +173,7 @@ function SearchFilters({
         )}
         <div className="2xl:space-y-[2.222vw] space-y-8">
           <div className="2xl:space-y-[1.111vw] space-y-4">
-            <p className="font-medium text-h2">
+            <p className="text-h2 font-medium">
               {inModal ? "Filters" : "Search"}
             </p>
             <div className={clsx(!inModal && "max-md:hidden")}>
@@ -372,7 +372,7 @@ function SearchFilters({
             <div className="w-5 h-5">
               <FiltersIcon />
             </div>
-            <p className="text-sm leading-0">Filters</p>
+            <p className="leading-0 text-sm">Filters</p>
           </Button>
           <Button
             variant="secondary"
diff --git a/src/components/SequenceSlider.tsx b/src/components/SequenceSlider.tsx
index fcbf37c..6a07034 100644
--- a/src/components/SequenceSlider.tsx
+++ b/src/components/SequenceSlider.tsx
@@ -203,30 +203,29 @@ function SequenceSlider({ complexName }: SequenceSliderProps) {
             <span className="max-md:hidden">About</span>
           </Button>
           <p className="absolute md:text-h4 text-h5 font-medium text-white -translate-x-1/2 select-none left-1/2 2xl:top-[2.5vw] md:max-2xl:top-[3.646vw] top-[7.5vw] drop-shadow pointer-events-none">
-            ROVE Home{" "}
             {markers.find((marker) => marker.name === complexName)?.title}
           </p>
           <Button
             onlyIcon
-            variant="secondary"
-            className="absolute top-1/2 -translate-y-1/2 2xl:left-[31.111vw] md:max-2xl:left-[8.854vw] left-4 !bg-[#0D1922] !bg-opacity-40 backdrop-blur-md"
+            variant="fab"
+            className="absolute top-1/2 -translate-y-1/2 2xl:left-[31.111vw] md:max-2xl:left-[8.854vw] left-4"
             roundedFull
             disabled={isAnimating || !isShowVideo}
             onClick={() => handleSwipe("prev")}
           >
-            <span className="2xl:size-[1.111vw] size-4 text-white">
+            <span className="2xl:size-[1.111vw] size-4">
               <ArrowLeftIcon />
             </span>
           </Button>
           <Button
             onlyIcon
-            variant="secondary"
-            className="absolute top-1/2 -translate-y-1/2 2xl:right-[31.111vw] md:max-2xl:right-[8.854vw] right-4 !bg-[#0D1922] !bg-opacity-40 backdrop-blur-md"
+            variant="fab"
+            className="absolute top-1/2 -translate-y-1/2 2xl:right-[31.111vw] md:max-2xl:right-[8.854vw] right-4"
             roundedFull
             disabled={isAnimating || !isShowVideo}
             onClick={() => handleSwipe("next")}
           >
-            <span className="2xl:size-[1.111vw] size-4 text-white">
+            <span className="2xl:size-[1.111vw] size-4">
               <ArrowRightIcon />
             </span>
           </Button>
diff --git a/src/components/UnitTypeCard.tsx b/src/components/UnitTypeCard.tsx
index 09630ea..2fca05d 100644
--- a/src/components/UnitTypeCard.tsx
+++ b/src/components/UnitTypeCard.tsx
@@ -25,7 +25,11 @@ function UnitTypeCard({ project, type }: { project: Project; type: UnitType }) {
         <img
           src={`/images/unit-types/${project.slug}/${type.slug}${
             type.slug.includes("loft") ? "-lower" : ""
-          }${project.hasSides !== false && type.slug !== "2-bedroom-b" ? "-left" : ""}.jpg`}
+          }${
+            project.hasSides !== false && type.slug !== "2-bedroom-b"
+              ? "-left"
+              : ""
+          }.jpg`}
           alt=""
         />
       </div>
diff --git a/src/components/UnitTypeImageWithMarkers.tsx b/src/components/UnitTypeImageWithMarkers.tsx
index 971ef42..559320c 100644
--- a/src/components/UnitTypeImageWithMarkers.tsx
+++ b/src/components/UnitTypeImageWithMarkers.tsx
@@ -60,24 +60,28 @@ function UnitTypeImageWithMarkers({
         }}
       />
       {filteredLegend.map((item, index) => {
-        const coords = unitTypeVariant?.endsWith("left") ? item.left : item.right;
+        const coords = unitTypeVariant?.endsWith("left")
+          ? item.left
+          : item.right;
         return (
           <rect
             key={`marker-${index}`}
             ref={refRect}
             x={coords.x}
             y={coords.y}
-            width={16}
-            height={16}
-            rx={8}
-            className="stroke-white fill-[#00BED7] hover:fill-white transition-colors cursor-pointer max-md:hidden"
+            width={12}
+            height={12}
+            rx={6}
+            className="stroke-white hover:fill-[#00BED7] fill-white transition-colors max-md:hidden"
             onMouseEnter={() => setHoveredIndex(index)}
             onMouseLeave={() => setHoveredIndex(null)}
           />
         );
       })}
       {filteredLegend.map((item, index) => {
-        const coords = unitTypeVariant?.endsWith("left") ? item.left : item.right;
+        const coords = unitTypeVariant?.endsWith("left")
+          ? item.left
+          : item.right;
         return (
           <g
             key={`tooltip-${index}`}
diff --git a/src/components/UnitSlider.tsx b/src/components/_UnitSlider.tsx
similarity index 100%
rename from src/components/UnitSlider.tsx
rename to src/components/_UnitSlider.tsx
diff --git a/src/components/floor-plans/AmenitiesFloorView.tsx b/src/components/floor-plans/AmenitiesFloorView.tsx
index 3b07026..cd17083 100644
--- a/src/components/floor-plans/AmenitiesFloorView.tsx
+++ b/src/components/floor-plans/AmenitiesFloorView.tsx
@@ -43,7 +43,7 @@ function AmenitiesFloorView({ floor }: AmenitiesFloorViewProps) {
     <div className="2xl:space-y-[2.222vw] space-y-8">
       <div className="2xl:space-y-[1.667vw] space-y-6">
         <div className="2xl:space-y-[0.556vw] space-y-2 border-b border-[#E2E2DC] 2xl:pb-[1.667vw] pb-6">
-          <p className="font-medium text-h4">{floor.displayName}</p>
+          <p className="text-h4 font-medium">{floor.displayName}</p>
           <Badge
             variant="secondary"
             text={`${floor.amenitiesCount.total} Amenities`}
@@ -80,13 +80,13 @@ function AmenitiesFloorView({ floor }: AmenitiesFloorViewProps) {
             <Button
               variant="cta"
               className="absolute 2xl:top-[1.667vw] 2xl:right-[1.667vw] md:max-2xl:top-6 md:max-2xl:right-6 top-4 right-4"
-              onlyIcon
               size="small"
               onClick={() => setModal(<VideoModal src={floor.video!} />)}
             >
               <span className="2xl:size-[1.111vw] size-4">
                 <PlayIcon />
               </span>
+              Play Video
             </Button>
           )}
         </div>
@@ -94,7 +94,7 @@ function AmenitiesFloorView({ floor }: AmenitiesFloorViewProps) {
 
       {hasIndoorOutdoorSplit && indoorAmenities.length > 0 && (
         <div className="2xl:space-y-[1.667vw] space-y-6">
-          <p className="font-medium text-h4">Indoor Amenities</p>
+          <p className="text-h4 font-medium">Indoor Amenities</p>
           <div className="grid md:grid-cols-4 grid-cols-3 2xl:gap-[1.111vw] gap-4">
             {indoorAmenities.map((amenity, index) => (
               <AmentitiesBadge key={index} title={amenity.title} />
@@ -108,7 +108,7 @@ function AmenitiesFloorView({ floor }: AmenitiesFloorViewProps) {
       )}
 
       <div className="2xl:space-y-[1.667vw] space-y-6">
-        <p className="font-medium text-h4">
+        <p className="text-h4 font-medium">
           {hasIndoorOutdoorSplit ? "Outdoor Amenities" : "Amenities"}
         </p>
         <div
diff --git a/src/components/floor-plans/GenericFloorPlan.tsx b/src/components/floor-plans/GenericFloorPlan.tsx
index 9d0d57d..440e4c5 100644
--- a/src/components/floor-plans/GenericFloorPlan.tsx
+++ b/src/components/floor-plans/GenericFloorPlan.tsx
@@ -1,4 +1,5 @@
 import { Fragment, useState } from "react";
+import { useNavigate } from "react-router";
 import { Unit } from "../../types/IUnit";
 import { ComplexName } from "../../types/ComplexName";
 import { FloorPlanMasks } from "../../types/FloorPlanMasks";
@@ -18,6 +19,8 @@ interface GenericFloorPlanProps {
   selectedFloor: string | null;
   unitsOnFloor: Unit[];
   chosenUnit?: Unit | null;
+  /** When true: dim background, gray other units, no hover/cursor. Only from OnFloorMask. */
+  isUnitPage?: boolean;
   /** How to extract the mask key from unit.unitNo. Default: unitNo.slice(-2) */
   getMaskKey?: (unitNo: string) => string;
   /** Optional unit filter (e.g. filterDuplicateUnits for combinable layouts) */
@@ -40,6 +43,7 @@ function GenericFloorPlan({
   selectedFloor,
   unitsOnFloor,
   chosenUnit,
+  isUnitPage = false,
   getMaskKey = defaultGetMaskKey,
   filterUnits,
   wing,
@@ -61,8 +65,16 @@ function GenericFloorPlan({
       {...svgProps}
     >
       {/* Background: either an image or custom inline SVG */}
-      {imagePath && <image transform="scale(.5)" xlinkHref={imagePath} />}
-      {children}
+      {imagePath && (
+        <image
+          transform="scale(.5)"
+          xlinkHref={imagePath}
+          opacity={isUnitPage ? 0.3 : 1}
+        />
+      )}
+      {children ? (
+        <g opacity={isUnitPage ? 0.3 : 1}>{children}</g>
+      ) : null}
 
       {/* Unit overlays */}
       {units.map((unit) => {
@@ -76,6 +88,8 @@ function GenericFloorPlan({
             key={unit.unitNo}
             complexName={complexName}
             wing={wing}
+            chosenUnit={chosenUnit}
+            isUnitPage={isUnitPage}
             selectedUnit={selectedUnit}
             onSelect={setSelectedUnit}
             formattedUnitType={maskData.formattedUnitType}
@@ -104,6 +118,8 @@ function GenericFloorPlanUnit({
   formattedUnitType,
   onSelect,
   selectedUnit,
+  chosenUnit,
+  isUnitPage = false,
 }: {
   complexName: ComplexName;
   wing?: "East" | "West";
@@ -114,18 +130,23 @@ function GenericFloorPlanUnit({
   formattedUnitType: string;
   selectedUnit: Unit | null;
   onSelect: (unit: Unit | null) => void;
+  chosenUnit?: Unit | null;
+  isUnitPage?: boolean;
 }) {
+  const navigate = useNavigate();
   const { setPopup, setSide, setPosition } = usePopupStore();
 
-  function handleClick(unit: Unit) {
-    window.open(`/complex/${complexName}/${unit.unitNo}`, "_blank");
+  const isOtherUnit =
+    isUnitPage && chosenUnit && unit.unitNo !== chosenUnit.unitNo;
+
+  function handleClick(u: Unit) {
+    setPopup(null);
+    navigate(`/complex/${complexName}/${u.unitNo}`);
   }
 
   function handleMouseEnter() {
     if (floor === null) return;
-
     setSide("top");
-
     if (!selectedUnit)
       setPopup(
         <UnitPopup
@@ -146,7 +167,10 @@ function GenericFloorPlanUnit({
     <g>
       <text
         transform={textTransform}
-        className="fill-white text-[8px] select-none"
+        className={clsx(
+          "text-[8px] select-none",
+          isUnitPage && !isOtherUnit ? "fill-[#374151]" : "fill-white"
+        )}
         textAnchor="middle"
       >
         <tspan x={0} y={0}>
@@ -157,18 +181,35 @@ function GenericFloorPlanUnit({
         </tspan>
       </text>
       <path
-        onClick={() => !isMobile && !selectedUnit && handleClick(unit)}
-        onMouseEnter={!isMobile ? handleMouseEnter : undefined}
-        onMouseLeave={() => !isMobile && setPopup(null)}
-        onTouchStart={(e) => {
-          onSelect(unit);
-          setPosition({ x: e.touches[0].clientX, y: e.touches[0].clientY });
-          handleMouseEnter();
-        }}
+        onClick={
+          !isUnitPage && !isMobile && !selectedUnit
+            ? () => handleClick(unit)
+            : undefined
+        }
+        onMouseEnter={
+          !isUnitPage && !isMobile ? handleMouseEnter : undefined
+        }
+        onMouseLeave={!isUnitPage && !isMobile ? () => setPopup(null) : undefined}
+        onTouchStart={
+          !isUnitPage
+            ? (e) => {
+                onSelect(unit);
+                setPosition({ x: e.touches[0].clientX, y: e.touches[0].clientY });
+                handleMouseEnter();
+              }
+            : undefined
+        }
         className={clsx(
-          "fill-transparent hover:fill-[#00BED7] opacity-40 isolate cursor-pointer transition-colors",
-          selectedUnit?.unitNo === unit.unitNo &&
-            "!fill-[#00BED7] opacity-40 cursor-default"
+          "isolate transition-colors",
+          isUnitPage
+            ? isOtherUnit
+              ? "fill-[#9CA3AF] opacity-50 pointer-events-none"
+              : "fill-[#00BED7] opacity-40"
+            : clsx(
+                "fill-transparent hover:fill-[#00BED7] opacity-40 cursor-pointer",
+                selectedUnit?.unitNo === unit.unitNo &&
+                  "!fill-[#00BED7] opacity-40 cursor-default"
+              )
         )}
         d={d}
       />
diff --git a/src/components/ui/Button.tsx b/src/components/ui/Button.tsx
index 99e9e59..70ed8d4 100644
--- a/src/components/ui/Button.tsx
+++ b/src/components/ui/Button.tsx
@@ -3,7 +3,7 @@ import { clsx } from "clsx";
 
 interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
   children: React.ReactNode;
-  variant?: "link" | "primary" | "secondary" | "tertiary" | "cta";
+  variant?: "link" | "primary" | "secondary" | "tertiary" | "cta" | "fab";
   className?: string;
   size?: "small" | "medium" | "large";
   onlyIcon?: boolean;
@@ -50,6 +50,11 @@ function Button({
           "bg-white hover:!bg-white hover:bg-opacity-80 text-[#0D1922]/70 disabled:!bg-[#0D1922] disabled:!bg-opacity-[8%] disabled:text-[#0D1922]/40",
         variant === "tertiary" &&
           "text-xs leading-[135%] text-[#0D1922]/70 !px-0 hover:!text-[#0D1922] disabled:!bg-transparent",
+        variant === "fab" &&
+          "bg-[#0D192266] hover:bg-[#0D192299] active:bg-[#00BED7] disabled:bg-[#0D192214] disabled:text-[#0D192214] text-white backdrop-blur-md rounded-full",
+        variant === "fab" && onlyIcon
+          ? "active:!bg-[#0D192299] active:!text-[#00BED7]"
+          : "",
         roundedFull ? "rounded-full" : "2xl:rounded-[0.833vw] rounded-xl",
         className
       )}
diff --git a/src/data/brochures.ts b/src/data/brochures.ts
index c047d73..ac9805a 100644
--- a/src/data/brochures.ts
+++ b/src/data/brochures.ts
@@ -101,7 +101,7 @@ export const projectBrochures: ProjectBrochures[] = [
     ],
   },
   {
-    projectTitle: "Rove Home HQ",
+    projectTitle: "HQ by Rove",
     brochures: [
       {
         title: "Main Brochure",
diff --git a/src/data/complex-config.ts b/src/data/complex-config.ts
index 1e8d2a5..feb5e8b 100644
--- a/src/data/complex-config.ts
+++ b/src/data/complex-config.ts
@@ -38,7 +38,7 @@ const complexConfigs: Record<ComplexName, ComplexConfig> = {
   },
   hq: {
     slug: "hq",
-    projectName: "Rove Home HQ",
+    projectName: "HQ by Rove",
     floors: hqFloors,
     hasWings: false,
     hasCombinable: false,
diff --git a/src/data/floor-plan-config.ts b/src/data/floor-plan-config.ts
index 5d3ceb0..7432feb 100644
--- a/src/data/floor-plan-config.ts
+++ b/src/data/floor-plan-config.ts
@@ -48,6 +48,7 @@ export interface FloorPlanLayoutConfig {
     selectedFloor: string | null;
     unitsOnFloor: Unit[];
     chosenUnit?: Unit;
+    isUnitPage?: boolean;
   }>;
   /** Wing designation for Marasi Drive popups */
   wing?: "East" | "West";
diff --git a/src/data/markers.ts b/src/data/markers.ts
index 8ce1970..042cc61 100644
--- a/src/data/markers.ts
+++ b/src/data/markers.ts
@@ -7,7 +7,7 @@ export const markers: IMarker[] = [
     x: "54.2%",
     y: "50.6%",
     popupPosition: "left",
-    title: "Downtown",
+    title: "Rove Home Downtown",
     disabled: true,
   },
   {
@@ -16,7 +16,7 @@ export const markers: IMarker[] = [
     x: "55.6%",
     y: "52.5%",
     popupPosition: "right",
-    title: "Marasi Drive",
+    title: "Rove Home Marasi Drive",
     numberOfUnits: 809,
   },
   {
@@ -25,16 +25,16 @@ export const markers: IMarker[] = [
     x: "35.35%",
     y: "71.6%",
     popupPosition: "right",
-    title: "Dubai Marina",
+    title: "Rove Home Dubai Marina",
     numberOfUnits: 958,
   },
   {
-    id:4 ,
+    id: 4,
     name: "hq",
     x: "57%",
     y: "48%",
     popupPosition: "right",
-    title: "HQ",
+    title: "HQ by Rove",
     numberOfUnits: 1000,
-  }
+  },
 ];
diff --git a/src/data/projects.ts b/src/data/projects.ts
index e73a392..d52164a 100644
--- a/src/data/projects.ts
+++ b/src/data/projects.ts
@@ -1989,14 +1989,14 @@ export const projects: Project[] = [
     ],
   },
   {
-    title: "Rove Home HQ",
+    title: "HQ by Rove",
     slug: "hq",
     img: "/images/search/rove_home_hq.png",
     buildingType: "commercial",
     hasSides: false,
     types: [
       {
-        name: "Studio",
+        name: "Studio office",
         slug: "studio",
         floors: "Ground Floor",
         area: "TBD Sqft",
@@ -2054,7 +2054,7 @@ export const projects: Project[] = [
         tourAvailable: false,
       },
       {
-        name: "Simplex Edge",
+        name: "Simplex Edge office",
         slug: "simplex-edge",
         floors: "Ground Floor",
         area: "TBD Sqft",
@@ -2108,12 +2108,11 @@ export const projects: Project[] = [
             left: { x: 115, y: 185 },
             right: { x: 115, y: 185 },
           },
-
         ],
         tourAvailable: false,
       },
       {
-        name: "Loft Edge",
+        name: "Loft Edge office",
         slug: "loft-edge",
         floors: "Ground Floor & Mezzanine",
         area: "TBD Sqft",
@@ -2263,7 +2262,7 @@ export const projects: Project[] = [
         tourAvailable: false,
       },
       {
-        name: "Penthouse Loft",
+        name: "Penthouse Loft office",
         slug: "penthouse-loft",
         floors: "Upper Floors",
         area: "TBD Sqft",
@@ -2327,7 +2326,7 @@ export const projects: Project[] = [
           },
           {
             name: "Powder room",
-            left: { x: 430, y: 536},
+            left: { x: 430, y: 536 },
             right: { x: 430, y: 536 },
             floor: "lower",
           },
@@ -2407,7 +2406,7 @@ export const projects: Project[] = [
         tourAvailable: false,
       },
       {
-        name: "Presidential Loft",
+        name: "Presidential Loft office",
         slug: "presidential-loft",
         floors: "Upper Floors",
         area: "TBD Sqft",
diff --git a/src/main.tsx b/src/main.tsx
index ded2b88..56a6e21 100644
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -20,7 +20,6 @@ import LayoutWithoutFooter from "./layout/LayoutWithoutFooter.tsx";
 import { queryClient } from "./lib/queryClient.ts";
 import AboutComplexPage from "./pages/AboutComplexPage.tsx";
 import UnitTypeItemPage from "./pages/UnitTypeItemPage.tsx";
-import TestPage from "./pages/TestPage.tsx";
 import UnitPage from "./pages/UnitPage.tsx";
 import PopupContainer from "./components/PopupContainer.tsx";
 import VirtualTourPage from "./pages/VirtualTourPage.tsx";
@@ -80,10 +79,6 @@ const route = createBrowserRouter([
       },
     ],
   },
-  {
-    path: "/test",
-    element: <TestPage />,
-  },
 ]);
 
 createRoot(document.getElementById("root")!).render(
diff --git a/src/pages/UnitPage.tsx b/src/pages/UnitPage.tsx
index 2c2ddbf..0b2854c 100644
--- a/src/pages/UnitPage.tsx
+++ b/src/pages/UnitPage.tsx
@@ -1,3 +1,4 @@
+import { useEffect } from "react";
 import { useQuery } from "@tanstack/react-query";
 import { useParams } from "react-router";
 import { api } from "../api/ky";
@@ -42,6 +43,17 @@ function UnitPage() {
 
   const { setModal } = useModalStore();
 
+  const displayUnitType = unit
+    ? formattedUnitTypes.get(unit.unitType) || unit.unitType
+    : "Rove Home";
+
+  useEffect(() => {
+    document.title = displayUnitType;
+    return () => {
+      document.title = "Rove Home";
+    };
+  }, [displayUnitType]);
+
   if (!unit) return null;
 
   function handleShare() {
@@ -51,151 +63,167 @@ function UnitPage() {
     });
   }
 
-  if (!unit) return <div>Loading...</div>;
-
   const unitType = projects
     .find((project) => project.slug === unit.projectSlug)
     ?.types.find((type) => type.slug === unit.unitTypeVariantSlug);
 
   return (
-    <html>
-      <head>
-        <title>{unit.unitTypeVariantSlug}</title>
-      </head>
-      <body>
-        <div className="2xl:p-[2.222vw] md:max-2xl:p-6 p-4 max-2xl:pb-0 bg-white flex 2xl:gap-[2.222vw] md:max-2xl:gap-8 gap-6 max-2xl:flex-col">
-          <NewUnitSlider>
-            {unit.isLoft ? (
-              <>
-                <UnitSliderItem text="Lower">
-                  <UnitTypeImageWithMarkers
-                    complexName={unit.projectSlug}
-                    unitTypeVariant={
-                      unit.unitTypeVariantSlug +
-                      "-lower" +
-                      (unit.side ? `-${unit.side}` : "")
-                    }
-                    floor="lower"
-                    legend={unitType?.legend || []}
-                  />
-                </UnitSliderItem>
-                <UnitSliderItem text="Upper">
-                  <UnitTypeImageWithMarkers
-                    complexName={unit.projectSlug}
-                    unitTypeVariant={
-                      unit.unitTypeVariantSlug +
-                      "-upper" +
-                      (unit.side ? `-${unit.side}` : "")
-                    }
-                    floor="upper"
-                    legend={unitType?.legend || []}
-                  />
-                </UnitSliderItem>
-              </>
-            ) : (
-              <UnitSliderItem text="Layout">
+    <div className="2xl:p-[2.222vw] md:max-2xl:p-6 p-4 max-2xl:pb-0 bg-white flex 2xl:gap-[2.222vw] md:max-2xl:gap-8 gap-6 max-2xl:flex-col">
+      <div className="relative">
+        <NewUnitSlider>
+          {unit.isLoft ? (
+            <>
+              <UnitSliderItem text="Lower">
                 <UnitTypeImageWithMarkers
                   complexName={unit.projectSlug}
                   unitTypeVariant={
                     unit.unitTypeVariantSlug +
+                    "-lower" +
                     (unit.side ? `-${unit.side}` : "")
                   }
+                  floor="lower"
                   legend={unitType?.legend || []}
                 />
               </UnitSliderItem>
-            )}
-            <UnitSliderItem text="On the floor">
-              <svg className="2xl:py-[2.222vw] py-8 size-full">
-                <OnFloorMask unit={unit} />
-              </svg>
-            </UnitSliderItem>
-            {innerWidth >= 768 ? (
-              <UnitSliderItem text="Interior">
-                <InteriorSlider
-                  unitTypeSlug={unit.unitTypeVariantSlug}
-                  projectSlug={unit.projectSlug}
+              <UnitSliderItem text="Upper">
+                <UnitTypeImageWithMarkers
+                  complexName={unit.projectSlug}
+                  unitTypeVariant={
+                    unit.unitTypeVariantSlug +
+                    "-upper" +
+                    (unit.side ? `-${unit.side}` : "")
+                  }
+                  floor="upper"
+                  legend={unitType?.legend || []}
                 />
               </UnitSliderItem>
-            ) : (
-              unitType?.interiors.map((interior, index) => (
-                <UnitSliderItem text={`interior ${index + 1}`} key={index}>
-                  <img
-                    src={interior}
-                    alt=""
-                    className="size-full object-cover pointer-events-none"
+            </>
+          ) : (
+            <UnitSliderItem text="Layout">
+              <UnitTypeImageWithMarkers
+                complexName={unit.projectSlug}
+                unitTypeVariant={
+                  unit.unitTypeVariantSlug + (unit.side ? `-${unit.side}` : "")
+                }
+                legend={unitType?.legend || []}
+              />
+            </UnitSliderItem>
+          )}
+          <UnitSliderItem text="On the floor">
+            <svg className="2xl:py-[2.222vw] py-8 size-full">
+              <OnFloorMask unit={unit} />
+            </svg>
+          </UnitSliderItem>
+          {innerWidth >= 768 ? (
+            <UnitSliderItem text="Interior">
+              <InteriorSlider
+                unitTypeSlug={unit.unitTypeVariantSlug}
+                projectSlug={unit.projectSlug}
+              />
+            </UnitSliderItem>
+          ) : (
+            unitType?.interiors.map((interior, index) => (
+              <UnitSliderItem text={`interior ${index + 1}`} key={index}>
+                <img
+                  src={interior}
+                  alt=""
+                  className="size-full object-cover pointer-events-none"
+                />
+              </UnitSliderItem>
+            ))
+          )}
+        </NewUnitSlider>
+        {unit.projectSlug === "hq" &&
+          [
+            "loft-edge",
+            "penthouse-loft",
+            "presidential-loft",
+            "studio",
+          ].includes(unit.unitTypeVariantSlug) && (
+            <Button
+              variant="cta"
+              onlyIcon={innerWidth < 768}
+              size="large"
+              className="absolute 2xl:right-[1.667vw] 2xl:top-[1.667vw] right-6 top-6"
+              onClick={() =>
+                setModal(
+                  <VideoModal
+                    src={`/videos/unit-types/hq/${unit.unitTypeVariantSlug}.mp4`}
                   />
-                </UnitSliderItem>
-              ))
-            )}
-          </NewUnitSlider>
-          <div className="flex flex-col justify-between md:max-2xl:gap-6 gap-4 2xl:w-[21.944vw] flex-shrink-0">
-            <div className="2xl:space-y-[1.667vw] space-y-6">
-              <div className="flex justify-between items-start">
-                <div className="2xl:space-y-[1.111vw] space-y-4">
-                  <h3 className="text-h3 font-medium">
-                    {formattedUnitTypes.get(unit.unitType) || unit.unitType}
-                  </h3>
-                  <div className="2xl:space-y-[0.556vw] space-y-2">
-                    <p className="text-s text-[#00BED7]">{unit.project}</p>
-                    <div className="flex items-center 2xl:gap-[0.556vw]">
-                      {unit.wing && (
-                        <>
-                          <p className="text-s opacity-70">{unit.wing}</p>
-                          <div className="2xl:w-[0.278vw] 2xl:h-[0.278vw] w-1 h-1 rounded-full bg-[#E2E2DC]" />
-                        </>
-                      )}
-                      <p className="text-s opacity-70">Floor {unit.floor}</p>
+                )
+              }
+            >
+              <div className="2xl:size-[1.389vw] size-5">
+                <PlayIcon />
+              </div>
+              <span className="max-md:hidden">Video tour</span>
+            </Button>
+          )}
+      </div>
+      <div className="flex flex-col justify-between md:max-2xl:gap-6 gap-4 2xl:w-[21.944vw] flex-shrink-0">
+        <div className="2xl:space-y-[1.667vw] space-y-6">
+          <div className="flex justify-between items-start">
+            <div className="2xl:space-y-[1.111vw] space-y-4">
+              <h3 className="text-h3 font-medium">
+                {formattedUnitTypes.get(unit.unitType) || unit.unitType}
+              </h3>
+              <div className="2xl:space-y-[0.556vw] space-y-2">
+                <p className="text-s text-[#00BED7]">{unit.project}</p>
+                <div className="flex items-center 2xl:gap-[0.556vw]">
+                  {unit.wing && (
+                    <>
+                      <p className="text-s opacity-70">{unit.wing}</p>
                       <div className="2xl:w-[0.278vw] 2xl:h-[0.278vw] w-1 h-1 rounded-full bg-[#E2E2DC]" />
-                      <p className="text-s opacity-70">{unit.unitNo}</p>
-                    </div>
-                  </div>
-                </div>
-                <div>
-                  <Button variant="tertiary" onlyIcon onClick={handleFavorite}>
-                    <span className="2xl:size-[1.389vw] size-5">
-                      {favoriteUnits.some(
-                        (favoriteUnit) => favoriteUnit.id === unit.id
-                      ) ? (
-                        <FilledHeartIcon />
-                      ) : (
-                        <HeartIcon />
-                      )}
-                    </span>
-                  </Button>
-                  <Button variant="tertiary" onlyIcon onClick={handleShare}>
-                    <span className="2xl:size-[1.389vw] size-5">
-                      <ShareIcon />
-                    </span>
-                  </Button>
+                    </>
+                  )}
+                  <p className="text-s opacity-70">Floor {unit.floor}</p>
+                  <div className="2xl:w-[0.278vw] 2xl:h-[0.278vw] w-1 h-1 rounded-full bg-[#E2E2DC]" />
+                  <p className="text-s opacity-70">{unit.unitNo}</p>
                 </div>
               </div>
-              <hr className="w-full border-[#E2E2DC] 2xl:h-[0.069vw] h-px" />
-              {unitType?.video && (
-                <button
-                  onClick={() =>
-                    setModal(<VideoModal src={unitType.video?.src || ""} />)
-                  }
-                  className="2xl:p-[1.111vw] p-4 2xl:rounded-[1.111vw] text-left rounded-2xl flex items-center gap-[0.556vw] ring-[0.069vw] ring-[#E2E2DC] cursor-pointer w-full"
-                >
-                  <div className="lg:space-y-[0.278vw] space-y-1 flex-1">
-                    <p className="text-h5 font-medium">
-                      {unitType.video.title}
-                    </p>
-                    <p className="text-s text-[#00BED7]">
-                      {unitType.video.desc}
-                    </p>
-                  </div>
-                  <div className="2xl:size-[1.389vw] size-5">
-                    <PlayIcon />
-                  </div>
-                </button>
-              )}
-              <div className="flex flex-col 2xl:gap-y-[0.556vw]">
-                <div className="flex justify-between">
-                  <p className="text-s opacity-70">Total Area</p>
-                  <p className="text-s">{unit.squareFt.toFixed(2)} Sqft</p>
-                </div>
-                {/* <div className="flex justify-between">
+            </div>
+            <div>
+              <Button variant="tertiary" onlyIcon onClick={handleFavorite}>
+                <span className="2xl:size-[1.389vw] size-5">
+                  {favoriteUnits.some(
+                    (favoriteUnit) => favoriteUnit.id === unit.id
+                  ) ? (
+                    <FilledHeartIcon />
+                  ) : (
+                    <HeartIcon />
+                  )}
+                </span>
+              </Button>
+              <Button variant="tertiary" onlyIcon onClick={handleShare}>
+                <span className="2xl:size-[1.389vw] size-5">
+                  <ShareIcon />
+                </span>
+              </Button>
+            </div>
+          </div>
+          <hr className="w-full border-[#E2E2DC] 2xl:h-[0.069vw] h-px" />
+          {unitType?.video && (
+            <button
+              onClick={() =>
+                setModal(<VideoModal src={unitType.video?.src || ""} />)
+              }
+              className="2xl:p-[1.111vw] p-4 2xl:rounded-[1.111vw] text-left rounded-2xl flex items-center gap-[0.556vw] ring-[0.069vw] ring-[#E2E2DC] cursor-pointer w-full"
+            >
+              <div className="lg:space-y-[0.278vw] space-y-1 flex-1">
+                <p className="text-h5 font-medium">{unitType.video.title}</p>
+                <p className="text-s text-[#00BED7]">{unitType.video.desc}</p>
+              </div>
+              <div className="2xl:size-[1.389vw] size-5">
+                <PlayIcon />
+              </div>
+            </button>
+          )}
+          <div className="flex flex-col 2xl:gap-y-[0.556vw]">
+            <div className="flex justify-between">
+              <p className="text-s opacity-70">Total Area</p>
+              <p className="text-s">{unit.squareFt.toFixed(2)} Sqft</p>
+            </div>
+            {/* <div className="flex justify-between">
                       <p className="text-s opacity-70">Suite Area</p>
                       <p className="text-s">{unit.suitsArea.toFixed(2)} Sqft</p>
                     </div>
@@ -205,7 +233,7 @@ function UnitPage() {
                         {unit.balconyArea.toFixed(2)} Sqft
                       </p>
                     </div> */}
-                {/* <div className="flex justify-between">
+            {/* <div className="flex justify-between">
                   <p className="text-s opacity-70">Status</p>
                   <p className="text-s">
                     {unit.projectSlug === "dubai-marina" &&
@@ -215,20 +243,20 @@ function UnitPage() {
                         unit.state.slice(1).replace(/_/g, " ")}
                   </p>
                 </div> */}
-                <div className="flex justify-between">
-                  <p className="text-s opacity-70">Parking Space</p>
-                  <p className="text-s">{unit.noOfParkingSpace}</p>
-                </div>
-              </div>
-              {/* <p className="text-h4 font-medium text-[#00BED7]">{`AED ${Intl.NumberFormat(
+            <div className="flex justify-between">
+              <p className="text-s opacity-70">Parking Space</p>
+              <p className="text-s">{unit.noOfParkingSpace}</p>
+            </div>
+          </div>
+          {/* <p className="text-h4 font-medium text-[#00BED7]">{`AED ${Intl.NumberFormat(
                 "ar-AE",
                 {
                   currency: "AED",
                   minimumFractionDigits: 0,
                 }
               ).format(unit.salesPrice)}`}</p> */}
-            </div>
-            {/* <div className="flex 2xl:flex-col 2xl:gap-[0.556vw] gap-2 2xl:bottom-[2.222vw] bottom-0 bg-white md:max-2xl:-mx-[3.125vw] md:max-2xl:p-[3.125vw] max-md:-mx-4 max-md:p-4 max-2xl:rounded-t-2xl max-2xl:shadow-[0_-4px_20px_0_rgba(0,0,0,0.05)]">
+        </div>
+        {/* <div className="flex 2xl:flex-col 2xl:gap-[0.556vw] gap-2 2xl:bottom-[2.222vw] bottom-0 bg-white md:max-2xl:-mx-[3.125vw] md:max-2xl:p-[3.125vw] max-md:-mx-4 max-md:p-4 max-2xl:rounded-t-2xl max-2xl:shadow-[0_-4px_20px_0_rgba(0,0,0,0.05)]">
               <Button
                 disabled={!unitTypeVariantMarasiDrive}
                 variant="cta"
@@ -247,55 +275,53 @@ function UnitPage() {
                 Book
               </Button>
             </div> */}
-            <div className="flex 2xl:flex-col 2xl:gap-[0.556vw] gap-2 2xl:bottom-[2.222vw] bottom-0 bg-white md:max-2xl:-mx-[3.125vw] md:max-2xl:p-[3.125vw] max-md:-mx-4 max-md:p-4 max-2xl:rounded-t-2xl max-2xl:shadow-[0_-4px_20px_0_rgba(0,0,0,0.05)]">
-              {projects
-                .find((project) => project.slug === params.complexName)
-                ?.types.find((type) => type.slug === unit.unitTypeVariantSlug)
-                ?.tourAvailable && (
-                <Button
-                  variant="cta"
-                  size="large"
-                  onClick={() =>
-                    window.open(
-                      `/virtual-tour/${params.complexName}/${unit.unitTypeVariantSlug}`,
-                      "_blank"
-                    )
-                  }
-                >
-                  Virtual tour
-                </Button>
-              )}
-              {/* <Button disabled variant="cta" size="large">
+        <div className="flex 2xl:flex-col 2xl:gap-[0.556vw] gap-2 2xl:bottom-[2.222vw] bottom-0 bg-white md:max-2xl:-mx-[3.125vw] md:max-2xl:p-[3.125vw] max-md:-mx-4 max-md:p-4 max-2xl:rounded-t-2xl max-2xl:shadow-[0_-4px_20px_0_rgba(0,0,0,0.05)]">
+          {projects
+            .find((project) => project.slug === params.complexName)
+            ?.types.find((type) => type.slug === unit.unitTypeVariantSlug)
+            ?.tourAvailable && (
+            <Button
+              variant="cta"
+              size="large"
+              onClick={() =>
+                window.open(
+                  `/virtual-tour/${params.complexName}/${unit.unitTypeVariantSlug}`,
+                  "_blank"
+                )
+              }
+            >
+              Virtual tour
+            </Button>
+          )}
+          {/* <Button disabled variant="cta" size="large">
             Book
           </Button> */}
 
-              {/* videos for hq units */}
-              {unit.projectSlug === "hq" &&
-                [
-                  "loft-edge",
-                  "penthouse-loft",
-                  "presidential-loft",
-                  "studio",
-                ].includes(unit.unitTypeVariantSlug) && (
-                  <Button
-                    variant="cta"
-                    size="large"
-                    onClick={() =>
-                      setModal(
-                        <VideoModal
-                          src={`/videos/unit-types/hq/${unit.unitTypeVariantSlug}.mp4`}
-                        />
-                      )
-                    }
-                  >
-                    Video tour
-                  </Button>
-                )}
-            </div>
-          </div>
+          {/* videos for hq units */}
+          {/* {unit.projectSlug === "hq" &&
+            [
+              "loft-edge",
+              "penthouse-loft",
+              "presidential-loft",
+              "studio",
+            ].includes(unit.unitTypeVariantSlug) && (
+              <Button
+                variant="cta"
+                size="large"
+                onClick={() =>
+                  setModal(
+                    <VideoModal
+                      src={`/videos/unit-types/hq/${unit.unitTypeVariantSlug}.mp4`}
+                    />
+                  )
+                }
+              >
+                Video tour
+              </Button>
+            )} */}
         </div>
-      </body>
-    </html>
+      </div>
+    </div>
   );
 }