diff --git a/src/components/virtualTour/VirtualTourTopPanel.tsx b/src/components/virtualTour/VirtualTourTopPanel.tsx
new file mode 100644
index 0000000..c113461
--- /dev/null
+++ b/src/components/virtualTour/VirtualTourTopPanel.tsx
@@ -0,0 +1,87 @@
+import { useNavigate } from "react-router-dom";
+import useModal from "../../store/useModal";
+import Button from "../Button";
+import HintIcon from "../icons/HintIcon";
+import LeftArrowSliderIcon from "../icons/LeftArrowSliderIcon";
+import ResizeIcon from "../icons/ResizeIcon";
+import HelpModal from "../modals/HelpModal";
+import InfoIcon from "../icons/InfoIcon";
+import useFullScreen from "../../store/useFullScreen";
+import ActiveResizeIcon from "../icons/ActiveResizeIcon";
+import useWingSidebar from "../../store/useWingSidebar";
+
+const VirtualTourTopPanel = () => {
+ const { setModal } = useModal();
+ const { onFullscreen, isFullscreen, setIsFullscreen } = useFullScreen();
+ const { setIsSidebar, isSidebar } = useWingSidebar();
+ const navigate = useNavigate();
+
+ const handleOnHelpClick = () => {
+ setModal();
+ };
+
+ const handleOnBackClick = () => {
+ if (isSidebar) {
+ setIsSidebar(false);
+ } else {
+ navigate(-1);
+ }
+ };
+
+ const handleOnFullScreenClick = () => {
+ if (!onFullscreen) return;
+
+ setIsFullscreen(!isFullscreen);
+ if (!isFullscreen) {
+ onFullscreen.enter();
+ } else {
+ onFullscreen.exit();
+ }
+ };
+
+ return (
+ <>
+
+

+
+
+
+ }
+ buttonType="cta"
+ onClick={handleOnBackClick}
+ />
+ }
+ buttonType="primary"
+ text="About Complex"
+ />
+
+
+ {isFullscreen ? (
+ }
+ onClick={handleOnFullScreenClick}
+ />
+ ) : (
+ }
+ onClick={handleOnFullScreenClick}
+ />
+ )}
+ }
+ onClick={handleOnHelpClick}
+ />
+
+
+ >
+ );
+};
+
+export default VirtualTourTopPanel;
diff --git a/src/pages/VirtualTour.tsx b/src/pages/VirtualTour.tsx
index 87b1575..0531c10 100644
--- a/src/pages/VirtualTour.tsx
+++ b/src/pages/VirtualTour.tsx
@@ -10,6 +10,9 @@ import { IAppartmentSphere, ISphere } from "../types/apartmentSphere";
import useSphere from "../store/useSphere";
import { useParams } from "react-router-dom";
import _appartment from "../data/appartment.json";
+import ButtonPanel from "../components/searchApartment/ButtonPanel";
+import TopPanel from "../components/masterplanPage/TopPanel";
+import VirtualTourTopPanel from "../components/virtualTour/VirtualTourTopPanel";
const appartments = _appartment as IAppartmentSphere[];
@@ -39,8 +42,9 @@ const VirtualTour = () => {
return (