diff --git a/client/src/components/FloorPlan.tsx b/client/src/components/FloorPlan.tsx
index 8c09185..984ba73 100644
--- a/client/src/components/FloorPlan.tsx
+++ b/client/src/components/FloorPlan.tsx
@@ -9,6 +9,8 @@ import useModal from "../store/useModal";
 import IUnit from "../types/IUnit";
 import api from "../utils/api";
 import UnitModal from "./modals/UnitModal";
+import { useSearchParams } from "react-router-dom";
+import unitTypes from "../data/unitTypes.json";
 
 interface Props {
   wing: "east" | "west";
@@ -21,6 +23,7 @@ function FloorPlan({ wing, floor }: Props) {
   const [showPopup, setShowPopup] = useState(false);
   const [mousePos, setMousePos] = useState<[number, number]>([0, 0]);
   const [type, setType] = useState<string | null>(null);
+  const [searchParams] = useSearchParams();
 
   function handleMouseEnter(e: React.MouseEvent<SVGPathElement>) {
     const unitNumber = e.currentTarget.dataset.number;
@@ -53,25 +56,49 @@ function FloorPlan({ wing, floor }: Props) {
   }
 
   async function getUnit(unitNumber: string) {
+    let unitNo;
+
+    if (searchParams.has("unitNo")) {
+      unitNo = searchParams.get("unitNo");
+    } else {
+      unitNo = `${wing[0].toUpperCase()}-${floor}${unitNumber.padStart(2, "0")}`;
+    }
+
     try {
-      const result: IUnit[] = await api
-        .get(`units?unitNo=${wing[0].toUpperCase()}-${floor}${unitNumber.padStart(2, "0")}`)
-        .json();
+      const result: IUnit[] = await api.get(`units?unitNo=${unitNo}`).json();
 
       setHoveredUnit(result[0]);
+
+      const type = unitTypes.find((unitType) => unitType.title === result[0].unitName)?.type;
+
+      if (!type || !searchParams.has("unitNo")) return;
+
+      setModal(<UnitModal unit={result[0]} type={type} />);
     } catch (error) {
       alert((error as Error).message);
     }
   }
 
   useEffect(() => {
-    console.log("hoveredUnit", hoveredUnit);
-
     if (!isMobile || !hoveredUnit || !type) return;
 
     setModal(<UnitModal unit={hoveredUnit} type={type} />);
   }, [hoveredUnit]);
 
+  async function setUnitNo() {
+    const unitNo = searchParams.get("unitNo");
+
+    if (!unitNo) return;
+
+    await getUnit(unitNo);
+  }
+
+  useEffect(() => {
+    if (searchParams.has("unitNo")) {
+      setUnitNo();
+    }
+  }, []);
+
   return (
     <div className="flex flex-col flex-1 space-y-2 max-sm:w-screen max-sm:-m-4">
       <div className="flex items-center justify-end p-4 bg-white xl:justify-between rounded-2xl max-xl:hidden">
diff --git a/client/src/components/FloorSidebarContainer.tsx b/client/src/components/FloorSidebarContainer.tsx
index 7b8ad7f..d308862 100644
--- a/client/src/components/FloorSidebarContainer.tsx
+++ b/client/src/components/FloorSidebarContainer.tsx
@@ -1,22 +1,46 @@
+/* eslint-disable react-hooks/exhaustive-deps */
 import { useEffect, useState } from "react";
 import Button3 from "./Button3";
 import CloseIcon from "./icons/CloseIcon";
+import { useSearchParams } from "react-router-dom";
 
 interface Props {
   sidebarComponent: {
     element: JSX.Element;
     name: "Floor" | "Rooftop" | "Sky Garden" | "Podium Level" | "Ground Level";
     desc?: string;
+    dataName: string;
   } | null;
   onClose: () => void;
 }
 
 function FloorSidebarContainer({ sidebarComponent, onClose }: Props) {
   const [component, setComponent] = useState(sidebarComponent);
+  const [, setSearchParams] = useSearchParams();
 
   useEffect(() => {
     if (!sidebarComponent) return;
     setComponent(sidebarComponent);
+
+    setSearchParams(
+      (searchParams) => {
+        searchParams.set("dataName", sidebarComponent.dataName);
+
+        return searchParams;
+      },
+      { replace: true }
+    );
+
+    return () => {
+      setSearchParams(
+        (searchParams) => {
+          searchParams.delete("dataName");
+
+          return searchParams;
+        },
+        { replace: true }
+      );
+    };
   }, [sidebarComponent]);
 
   return (
diff --git a/client/src/components/modals/UnitModal.tsx b/client/src/components/modals/UnitModal.tsx
index 45fc1a4..8f3a538 100644
--- a/client/src/components/modals/UnitModal.tsx
+++ b/client/src/components/modals/UnitModal.tsx
@@ -6,7 +6,7 @@ import BookingIcon from "../icons/BookingIcon";
 import HeartIcon from "../icons/HeartIcon";
 import VirtualTourIcon from "../icons/VirtualTourIcon";
 import unitTypes from "../../data/unitTypes.json";
-import { useLocation, useNavigate } from "react-router-dom";
+import { useLocation, useSearchParams } from "react-router-dom";
 import { useEffect } from "react";
 import useFavoritesStore from "../../store/useFavoritesStore";
 import HeartFilledIcon from "../icons/HeartFilledIcon";
@@ -19,8 +19,8 @@ interface Props {
 }
 
 function UnitModal({ unit, type }: Props) {
+  const [, setSearchParams] = useSearchParams();
   const { setModal } = useModal();
-  const navigate = useNavigate();
   const { favoriteUnits, setFavoriteUnits } = useFavoritesStore();
   const location = useLocation();
 
@@ -190,10 +190,33 @@ function UnitModal({ unit, type }: Props) {
   }
 
   function handleClickTour() {
-    navigate(`/virtual-tour/${type}?unitNo=${unit.unitNo}`);
+    console.log("unit.unitNo", unit.unitNo);
+    console.log("type", type);
+
+    window.location.href = `/virtual-tour/${type}?unitNo=${unit.unitNo}`;
+  }
+
+  function handleClose() {
+    setSearchParams(
+      (searchParams) => {
+        searchParams.delete("unitNo");
+        return searchParams;
+      },
+      { replace: true }
+    );
+
+    setModal(null);
   }
 
   useEffect(() => {
+    setSearchParams(
+      (searchParams) => {
+        searchParams.set("unitNo", unit.unitNo);
+        return searchParams;
+      },
+      { replace: true }
+    );
+
     document.body.classList.add("overflow-y-hidden");
 
     return () => {
@@ -209,7 +232,7 @@ function UnitModal({ unit, type }: Props) {
             <div className="left lg:max-w-[800px] w-full flex flex-col gap-4">
               <div className="flex justify-between gap-4">
                 <div className="flex items-center gap-4">
-                  <Button3 icon={<ArrowLeftIcon />} onlyIcon onClick={() => setModal(null)} />
+                  <Button3 icon={<ArrowLeftIcon />} onlyIcon onClick={handleClose} />
                   <p className="text-2xl font-[#0D1922] font-semibold">
                     {unitTypes.find((unitType) => unitType.type === type)?.title}
                   </p>
diff --git a/client/src/data/apartments.json b/client/src/data/apartments.json
index cb059a6..83fd817 100644
--- a/client/src/data/apartments.json
+++ b/client/src/data/apartments.json
@@ -3,6 +3,25 @@
     "id": "studio-flex",
     "map": "/images/virtual-tour/STD-FLEX_13/map.jpg",
     "spheres": [
+      {
+        "id": "studio-1_sp-06",
+        "sphereImage": "/images/virtual-tour/STD-FLEX_13/STD-FLEX-13_sp-6.jpg",
+        "roomType": "glass doors",
+        "position": [-14.16, 0, 24.11],
+        "mapPosition": [115, 55],
+        "links": [
+          {
+            "id": "studio-1_sp-07",
+            "type": "default",
+            "labelPosition": [-0.16, 0, 25.11]
+          },
+          {
+            "id": "studio-1_sp-04",
+            "type": "default",
+            "labelPosition": [-45, 0, 22.11]
+          }
+        ]
+      },
       {
         "id": "studio-1_sp-01",
         "sphereImage": "/images/virtual-tour/STD-FLEX_13/STD-FLEX-13_sp-1.jpg",
@@ -62,25 +81,6 @@
           }
         ]
       },
-      {
-        "id": "studio-1_sp-06",
-        "sphereImage": "/images/virtual-tour/STD-FLEX_13/STD-FLEX-13_sp-6.jpg",
-        "roomType": "glass doors",
-        "position": [-14.16, 0, 24.11],
-        "mapPosition": [115, 55],
-        "links": [
-          {
-            "id": "studio-1_sp-07",
-            "type": "default",
-            "labelPosition": [-0.16, 0, 25.11]
-          },
-          {
-            "id": "studio-1_sp-04",
-            "type": "default",
-            "labelPosition": [-45, 0, 22.11]
-          }
-        ]
-      },
       {
         "id": "studio-1_sp-07",
         "sphereImage": "/images/virtual-tour/STD-FLEX_13/STD-FLEX-13_sp-7.jpg",
@@ -101,6 +101,25 @@
     "id": "studio-2",
     "map": "/images/virtual-tour/STD-2_31/map.jpg",
     "spheres": [
+      {
+        "id": "studio-2_sp-07",
+        "sphereImage": "/images/virtual-tour/STD-2_31/Studio2_31_sp-070000.jpg",
+        "roomType": "glass doors",
+        "position": [-14.16, 0, 24.11],
+        "mapPosition": [125, 70],
+        "links": [
+          {
+            "id": "studio-2_sp-04",
+            "type": "default",
+            "labelPosition": [-45, 0, 20.11]
+          },
+          {
+            "id": "studio-2_sp-08",
+            "type": "default",
+            "labelPosition": [70.16, 0, 35.11]
+          }
+        ]
+      },
       {
         "id": "studio-2_sp-01",
         "sphereImage": "/images/virtual-tour/STD-2_31/Studio2_31_sp-010000.jpg",
@@ -153,25 +172,6 @@
           }
         ]
       },
-      {
-        "id": "studio-2_sp-07",
-        "sphereImage": "/images/virtual-tour/STD-2_31/Studio2_31_sp-070000.jpg",
-        "roomType": "glass doors",
-        "position": [-14.16, 0, 24.11],
-        "mapPosition": [125, 70],
-        "links": [
-          {
-            "id": "studio-2_sp-04",
-            "type": "default",
-            "labelPosition": [-45, 0, 20.11]
-          },
-          {
-            "id": "studio-2_sp-08",
-            "type": "default",
-            "labelPosition": [70.16, 0, 35.11]
-          }
-        ]
-      },
       {
         "id": "studio-2_sp-08",
         "sphereImage": "/images/virtual-tour/STD-2_31/Studio2_31_sp-080000.jpg",
diff --git a/client/src/pages/ComplexWingPage.tsx b/client/src/pages/ComplexWingPage.tsx
index fcc9c43..600482b 100644
--- a/client/src/pages/ComplexWingPage.tsx
+++ b/client/src/pages/ComplexWingPage.tsx
@@ -1,12 +1,12 @@
 /* eslint-disable react-hooks/exhaustive-deps */
-import { useRef, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import FloorPath from "../components/FloorPath";
 import floorPaths from "../data/floorPaths.json";
 import ArrowLeftIcon from "../components/icons/ArrowLeftIcon";
 import Button3 from "../components/Button3";
 import InfoIcon from "../components/icons/InfoIcon";
 // import Header from "../components/Header";
-import { useNavigate } from "react-router-dom";
+import { useNavigate, useSearchParams } from "react-router-dom";
 import { isMobile } from "react-device-detect";
 
 import FloorPopup from "../components/FloorPopup";
@@ -34,8 +34,10 @@ function ComplexWingPage() {
     element: JSX.Element;
     name: "Floor" | "Rooftop" | "Sky Garden" | "Podium Level" | "Ground Level";
     desc?: string;
+    dataName: string;
   } | null>(null);
   const [selectedWing, setSelectedWing] = useState<"east" | "west" | null>(null);
+  const [searchParams] = useSearchParams();
 
   // function handleResize() {
   //   if (window.innerHeight > window.innerWidth) {
@@ -61,38 +63,43 @@ function ComplexWingPage() {
   }
 
   function handleClick(path: IPath) {
-    console.log("path", path);
+    const dataName = path["data-name"];
 
-    if (path["data-name"].includes("floor")) {
-      const wing = path["data-name"].split(" ")[0].toLowerCase() as "east" | "west";
-      const floor = path["data-name"].split(" ")[1];
+    if (dataName.includes("floor")) {
+      const wing = dataName.split(" ")[0].toLowerCase() as "east" | "west";
+      const floor = dataName.split(" ")[1];
 
       setSidebarComponent({
         element: <FloorPlan wing={wing} floor={floor} />,
         name: "Floor",
+        dataName,
       });
-    } else if (path["data-name"] === "Sky Garden") {
+    } else if (dataName === "Sky Garden") {
       setSidebarComponent({
         element: <FloorPlanSkyGarden />,
         name: "Sky Garden",
         desc: "22-23 floor",
+        dataName,
       });
-    } else if (path["data-name"] === "Rooftop") {
+    } else if (dataName === "Rooftop") {
       setSidebarComponent({
         element: <FloorPlanRooftop />,
         name: "Rooftop",
         desc: "32 floor",
+        dataName,
       });
-    } else if (path["data-name"] === "Podium Level") {
+    } else if (dataName === "Podium Level") {
       setSidebarComponent({
         element: <FloorPlanPodiumLevel />,
         name: "Podium Level",
         desc: "4 floor",
+        dataName,
       });
-    } else if (path["data-name"] === "Ground Level") {
+    } else if (dataName === "Ground Level") {
       setSidebarComponent({
         element: <FloorPlanGroundLevel />,
         name: "Ground Level",
+        dataName,
       });
     }
   }
@@ -112,6 +119,50 @@ function ComplexWingPage() {
   //   };
   // }, []);
 
+  useEffect(() => {
+    if (searchParams.has("dataName")) {
+      const dataName = searchParams.get("dataName");
+
+      if (dataName?.includes("floor")) {
+        const wing = dataName.split(" ")[0].toLowerCase() as "east" | "west";
+        const floor = dataName.split(" ")[1];
+
+        setSidebarComponent({
+          element: <FloorPlan wing={wing} floor={floor} />,
+          name: "Floor",
+          dataName,
+        });
+      } else if (dataName === "Sky Garden") {
+        setSidebarComponent({
+          element: <FloorPlanSkyGarden />,
+          name: "Sky Garden",
+          desc: "22-23 floor",
+          dataName,
+        });
+      } else if (dataName === "Rooftop") {
+        setSidebarComponent({
+          element: <FloorPlanRooftop />,
+          name: "Rooftop",
+          desc: "32 floor",
+          dataName,
+        });
+      } else if (dataName === "Podium Level") {
+        setSidebarComponent({
+          element: <FloorPlanPodiumLevel />,
+          name: "Podium Level",
+          desc: "4 floor",
+          dataName,
+        });
+      } else if (dataName === "Ground Level") {
+        setSidebarComponent({
+          element: <FloorPlanGroundLevel />,
+          name: "Ground Level",
+          dataName,
+        });
+      }
+    }
+  }, []);
+
   return (
     <>
       {!isMobile ? (