diff --git a/src/app/(stay-listings)/TabFilters.tsx b/src/app/(stay-listings)/TabFilters.tsx
new file mode 100644
index 0000000..16f36d0
--- /dev/null
+++ b/src/app/(stay-listings)/TabFilters.tsx
@@ -0,0 +1,677 @@
+"use client";
+
+import React, { Fragment, useState } from "react";
+import { Dialog, Popover, Transition } from "@headlessui/react";
+import NcInputNumber from "@/components/NcInputNumber";
+import ButtonPrimary from "@/shared/ButtonPrimary";
+import ButtonThird from "@/shared/ButtonThird";
+import ButtonClose from "@/shared/ButtonClose";
+import Checkbox from "@/shared/Checkbox";
+import Slider from "rc-slider";
+import convertNumbThousand from "@/utils/convertNumbThousand";
+
+// DEMO DATA
+const typeOfPaces = [
+ {
+ name: "Entire place",
+ description: "Have a place to yourself",
+ },
+ {
+ name: "Private room",
+ description: "Have your own room and share some common spaces",
+ },
+ {
+ name: "Hotel room",
+ description:
+ "Have a private or shared room in a boutique hotel, hostel, and more",
+ },
+ {
+ name: "Shared room",
+ description: "Stay in a shared space, like a common room",
+ },
+];
+
+const moreFilter1 = [
+ { name: "Kitchen", defaultChecked: true },
+ { name: "Air conditioning", defaultChecked: true },
+ { name: "Heating" },
+ { name: "Dryer" },
+ { name: "Washer" },
+ { name: "Wifi" },
+ { name: "Indoor fireplace" },
+ { name: "Breakfast" },
+ { name: "Hair dryer" },
+ { name: " Dedicated workspace" },
+];
+
+const moreFilter2 = [
+ { name: " Free parking on premise" },
+ { name: "Hot tub" },
+ { name: "Gym" },
+ { name: " Pool" },
+ { name: " EV charger" },
+];
+
+const moreFilter3 = [
+ { name: " House" },
+ { name: "Bed and breakfast" },
+ { name: "Apartment", defaultChecked: true },
+ { name: " Boutique hotel" },
+ { name: " Bungalow" },
+ { name: " Chalet", defaultChecked: true },
+ { name: " Condominium", defaultChecked: true },
+ { name: " Cottage" },
+ { name: " Guest suite" },
+ { name: " Guesthouse" },
+];
+
+const moreFilter4 = [{ name: " Pets allowed" }, { name: "Smoking allowed" }];
+
+const TabFilters = () => {
+ const [isOpenMoreFilter, setisOpenMoreFilter] = useState(false);
+ const [isOpenMoreFilterMobile, setisOpenMoreFilterMobile] = useState(false);
+ const [rangePrices, setRangePrices] = useState([0, 1000]);
+
+ //
+ const closeModalMoreFilter = () => setisOpenMoreFilter(false);
+ const openModalMoreFilter = () => setisOpenMoreFilter(true);
+ //
+ const closeModalMoreFilterMobile = () => setisOpenMoreFilterMobile(false);
+ const openModalMoreFilterMobile = () => setisOpenMoreFilterMobile(true);
+
+ const renderXClear = () => {
+ return (
+
+
+
+ );
+ };
+
+ const renderTabsTypeOfPlace = () => {
+ return (
+