diff --git a/src/components/Header.tsx b/src/components/Header.tsx
index 60059a9..74ddbde 100644
--- a/src/components/Header.tsx
+++ b/src/components/Header.tsx
@@ -216,11 +216,7 @@ function NavItem({ href, title }: { href: string; title: string }) {
     >
       {title}
       {title === "Favorites" && !!favoriteUnits.length && (
-        <div
-          className={clsx(
-            "absolute 2xl:top-0 2xl:right-0 top-0.5 right-0.5 rounded-full w-5 flex items-center justify-center aspect-square bg-[#00BED7] text-white text-caption-s"
-          )}
-        >
+        <div className="absolute 2xl:top-0 2xl:right-0 top-0.5 right-0.5 rounded-full w-5 flex items-center justify-center aspect-square bg-[#00BED7] text-white text-caption-s text-center">
           {favoriteUnits.length}
         </div>
       )}
@@ -268,7 +264,7 @@ function BrochuresDropdown() {
             animate={{ opacity: 1, x: "0%" }}
             exit={{ opacity: 0, x: "100%" }}
             transition={{ bounce: 0, duration: 0.3 }}
-            className="max-2xl:hidden p-[1.667vw] flex gap-[1.111vw] justify-stretch items-stretch fixed top-[calc(3.889vw+20px)] left-[57.083vw] w-[32.222vw] rounded-[1.111vw] bg-white shadow-[0_2px_8px_rgba(0,0,0,0.15)]"
+            className="max-2xl:hidden p-[1.667vw] flex gap-[1.111vw] justify-stretch items-stretch fixed top-[calc(3.889vw+20px)] left-[44.028vw] w-[32.222vw] rounded-[1.111vw] bg-white shadow-[0_2px_8px_rgba(0,0,0,0.15)]"
           >
             <div className="flex-1 space-y-4">
               <p className="text-s font-medium">Rove Home Marasi Drive</p>
diff --git a/src/components/SequenceSlider.tsx b/src/components/SequenceSlider.tsx
index ef2f747..a6a23e2 100644
--- a/src/components/SequenceSlider.tsx
+++ b/src/components/SequenceSlider.tsx
@@ -209,7 +209,7 @@ function SequenceSlider({ complexName }: SequenceSliderProps) {
               <span className="max-md:hidden">About</span>
             </Button>
           </div>
-          <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]">
+          <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">
             ROVE Home{" "}
             {markers.find((marker) => marker.name === complexName)?.title}
           </p>
@@ -237,7 +237,13 @@ function SequenceSlider({ complexName }: SequenceSliderProps) {
               <ArrowRightIcon />
             </span>
           </Button>
-          <Compass imgStyle={{ transform: `rotate(${currentIndex}deg)` }} />
+          <Compass
+            imgStyle={{
+              transform: `rotate(${
+                currentIndex + (complexName === "dubai-marina" ? 90 : 0)
+              }deg)`,
+            }}
+          />
           <div className="absolute 2xl:bottom-[2.222vw] 2xl:right-[2.222vw] 2xl:left-[2.222vw] max-w-full flex justify-end items-center 2xl:gap-[0.556vw] gap-2 md:max-2xl:bottom-6 md:max-2xl:left-6 md:max-2xl:right-6 bottom-4 left-4 right-4">
             <DisclaimerButton />
             <PrivacyPolicyButton />
diff --git a/src/components/UnitCard.tsx b/src/components/UnitCard.tsx
index 305762e..d0a97ad 100644
--- a/src/components/UnitCard.tsx
+++ b/src/components/UnitCard.tsx
@@ -51,6 +51,7 @@ function UnitCard({ unit }: { unit: IUnit }) {
           </span>
         </Button>
       </div>
+      <img src="/images/unit-types/marasi-drive/1_bedroom_a.jpg" alt="" />
       <div className="2xl:space-y-[0.278vw] space-y-1">
         <p className="text-s">
           {`${formattedUnitTypes.get(
diff --git a/src/components/icons/PlayIcon.tsx b/src/components/icons/PlayIcon.tsx
new file mode 100644
index 0000000..a4efe7a
--- /dev/null
+++ b/src/components/icons/PlayIcon.tsx
@@ -0,0 +1,15 @@
+function PlayIcon() {
+  return (
+    <svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path
+        d="M15.685 9.785a.25.25 0 0 1 .053.387l-.053.043-9.556 5.733a.25.25 0 0 1-.379-.215V4.267a.25.25 0 0 1 .314-.243l.065.028z"
+        stroke="#0D1922"
+        strokeWidth={1.5}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+
+export default PlayIcon;
diff --git a/src/components/icons/ShareIcon.tsx b/src/components/icons/ShareIcon.tsx
new file mode 100644
index 0000000..9f64daa
--- /dev/null
+++ b/src/components/icons/ShareIcon.tsx
@@ -0,0 +1,15 @@
+function ShareIcon() {
+  return (
+    <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path
+        d="M19 14.875V16a3 3 0 0 1-3 3H8a3 3 0 0 1-3-3V8a3 3 0 0 1 3-3h1.125m4.374 5.5 5.35-5.5m0 0v5.4m0-5.4h-5.4"
+        stroke="currentColor"
+        strokeWidth={1.5}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+
+export default ShareIcon;
diff --git a/src/main.tsx b/src/main.tsx
index 93296d9..0080180 100644
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -14,6 +14,7 @@ import SearchPage from "./pages/SearchPage.tsx";
 import LayoutWithoutFooter from "./layout/LayoutWithoutFooter.tsx";
 import { queryClient } from "./lib/queryClient.ts";
 import AboutComplexPage from "./pages/AboutComplexPage.tsx";
+import UnitTypeItemPage from "./pages/UnitTypeItemPage.tsx";
 
 const route = createBrowserRouter([
   {
@@ -23,6 +24,10 @@ const route = createBrowserRouter([
         path: "/unit-types",
         element: <UnitTypesPage />,
       },
+      {
+        path: "/unit-types/:unitType",
+        element: <UnitTypeItemPage />,
+      },
       {
         path: "/about",
         element: <AboutPage />,
diff --git a/src/pages/UnitTypeItemPage.tsx b/src/pages/UnitTypeItemPage.tsx
new file mode 100644
index 0000000..ca37fdb
--- /dev/null
+++ b/src/pages/UnitTypeItemPage.tsx
@@ -0,0 +1,71 @@
+import PlayIcon from "../components/icons/PlayIcon";
+import ShareIcon from "../components/icons/ShareIcon";
+import Button from "../components/ui/Button";
+
+function UnitTypeItemPage() {
+  return (
+    <div>
+      <div className="2xl:p-[2.222vw] bg-white 2xl:flex 2xl:gap-[2.222vw]">
+        <div className="flex bg-[#F3F3F2] 2xl:aspect-[1028/664] 2xl:w-[71.389vw] 2xl:rounded-[1.111vw]" />
+        <div className="flex flex-col justify-between flex-1">
+          <div className="2xl:space-y-[1.667vw]">
+            <div className="flex items-start justify-between">
+              <div className="2xl:space-y-[0.556vw]">
+                <p className="font-medium text-h3">Studio Flex</p>
+                <p className="2xl:rounded-[1.667vw] 2xl:px-[0.833vw] 2xl:py-[0.278vw] outline outline-[#E2E2DC] text-[#0D1922]/70 text-caption-m w-fit">
+                  Up to 366 Sqft
+                </p>
+              </div>
+              <Button onlyIcon variant="secondary">
+                <span className="2xl:w-[1.389vw] 2xl:h-[1.389vw] w-5 h-5 text-[#0D1922]">
+                  <ShareIcon />
+                </span>
+              </Button>
+            </div>
+            <div className="2xl:space-y-[0.556vw]">
+              <p className="text-m text-[#00BED7]">Rove Home Marasi Drive</p>
+              <div className="flex items-center 2xl:gap-[0.556vw]">
+                <p className="text-s text-[#0D1922]/70">East Wing</p>
+                <div className="2xl:w-[0.278vw] 2xl:h-[0.278vw] w-1 h-1 rounded-full bg-[#E2E2DC]" />
+                <p className="text-s text-[#0D1922]/70">Floor 5-21</p>
+              </div>
+            </div>
+            <hr className="w-full border-[#E2E2DC] 2xl:h-[0.069vw] h-px" />
+            <div className="2xl:p-[1.111vw] 2xl:rounded-[0.833vw] outline outline-[#E2E2DC] flex 2xl:gap-[0.556vw] justify-between">
+              <div className="2xl:space-y-[0.278vw]">
+                <p className="text-h5 font-medium">ORI Cloud Bed</p>
+                <p className="text-s text-[#00BED7]">
+                  Live in the future, today
+                </p>
+              </div>
+              <Button variant="secondary" onlyIcon>
+                <span className="2xl:w-[1.389vw] 2xl:h-[1.389vw] w-5 h-5 text-[#0D1922]">
+                  <PlayIcon />
+                </span>
+              </Button>
+            </div>
+            <div className="2xl:space-y-[0.556vw]">
+              <p className="text-caption-m">
+                In Studio Flex explore the ORI Cloud Bed, optimizing your living
+                space with functionality and smart living.
+              </p>
+              <p className="text-caption-m">
+                Every inch is designed to provide more space for comfort and
+                convenience. This feature increase your unit size by 33%
+              </p>
+            </div>
+          </div>
+          <div className="2xl:space-y-[0.556vw]">
+            <Button variant="secondary" className="!bg-[#F3F3F2] w-full">
+              Virtual tour
+            </Button>
+            <Button className="w-full">Show options</Button>
+          </div>
+        </div>
+      </div>
+      <div></div>
+    </div>
+  );
+}
+
+export default UnitTypeItemPage;