diff --git a/src/app/(listing-detail)/layout.tsx b/src/app/(listing-detail)/layout.tsx
new file mode 100644
index 0000000..dcf9c48
--- /dev/null
+++ b/src/app/(listing-detail)/layout.tsx
@@ -0,0 +1,72 @@
+"use client";
+
+import BackgroundSection from "@/components/BackgroundSection";
+import ListingImageGallery from "@/components/listing-image-gallery/ListingImageGallery";
+import SectionSliderNewCategories from "@/components/SectionSliderNewCategories";
+import SectionSubscribe2 from "@/components/SectionSubscribe2";
+import { usePathname, useRouter, useSearchParams } from "next/navigation";
+import React, { ReactNode } from "react";
+import MobileFooterSticky from "./(components)/MobileFooterSticky";
+import { imageGallery as listingStayImageGallery } from "./listing-stay-detail/constant";
+import { imageGallery as listingCarImageGallery } from "./listing-car-detail/constant";
+import { imageGallery as listingExperienceImageGallery } from "./listing-experiences-detail/constant";
+import { Route } from "next";
+
+const DetailtLayout = ({ children }: { children: ReactNode }) => {
+  const router = useRouter();
+  const thisPathname = usePathname();
+  const searchParams = useSearchParams();
+  const modal = searchParams?.get("modal");
+
+  const handleCloseModalImageGallery = () => {
+    let params = new URLSearchParams(document.location.search);
+    params.delete("modal");
+    router.push(`${thisPathname}/?${params.toString()}` as Route);
+  };
+
+  const getImageGalleryListing = () => {
+    if (thisPathname?.includes("/listing-stay-detail")) {
+      return listingStayImageGallery;
+    }
+    if (thisPathname?.includes("/listing-car-detail")) {
+      return listingCarImageGallery;
+    }
+    if (thisPathname?.includes("/listing-experiences-detail")) {
+      return listingExperienceImageGallery;
+    }
+
+    return [];
+  };
+
+  return (
+    <div className="ListingDetailPage">
+      <ListingImageGallery
+        isShowModal={modal === "PHOTO_TOUR_SCROLLABLE"}
+        onClose={handleCloseModalImageGallery}
+        images={getImageGalleryListing()}
+      />
+
+      <div className="container ListingDetailPage__content">{children}</div>
+
+      {/* OTHER SECTION */}
+      <div className="container py-24 lg:py-32">
+        <div className="relative py-16">
+          <BackgroundSection />
+          <SectionSliderNewCategories
+            heading="Explore by types of stays"
+            subHeading="Explore houses based on 10 types of stays"
+            categoryCardType="card5"
+            itemPerRow={5}
+            sliderStyle="style2"
+          />
+        </div>
+        <SectionSubscribe2 className="pt-24 lg:pt-32" />
+      </div>
+
+      {/* STICKY FOOTER MOBILE */}
+      <MobileFooterSticky />
+    </div>
+  );
+};
+
+export default DetailtLayout;