diff --git a/src/app/(listing-detail)/(components)/MobileFooterSticky.tsx b/src/app/(listing-detail)/(components)/MobileFooterSticky.tsx
new file mode 100644
index 0000000..7f48336
--- /dev/null
+++ b/src/app/(listing-detail)/(components)/MobileFooterSticky.tsx
@@ -0,0 +1,49 @@
+import React, { useState } from "react";
+import ModalSelectDate from "@/components/ModalSelectDate";
+import ButtonPrimary from "@/shared/ButtonPrimary";
+import converSelectedDateToString from "@/utils/converSelectedDateToString";
+import ModalReserveMobile from "./ModalReserveMobile";
+
+const MobileFooterSticky = () => {
+  const [startDate, setStartDate] = useState<Date | null>(
+    new Date("2023/02/06")
+  );
+  const [endDate, setEndDate] = useState<Date | null>(new Date("2023/02/23"));
+
+  return (
+    <div className="block lg:hidden fixed bottom-0 inset-x-0 py-2 sm:py-3 bg-white dark:bg-neutral-800 border-t border-neutral-200 dark:border-neutral-6000 z-40">
+      <div className="container flex items-center justify-between">
+        <div className="">
+          <span className="block text-xl font-semibold">
+            $311
+            <span className="ml-1 text-sm font-normal text-neutral-500 dark:text-neutral-400">
+              /night
+            </span>
+          </span>
+          <ModalSelectDate
+            renderChildren={({ openModal }) => (
+              <span
+                onClick={openModal}
+                className="block text-sm underline font-medium"
+              >
+                {converSelectedDateToString([startDate, endDate])}
+              </span>
+            )}
+          />
+        </div>
+        <ModalReserveMobile
+          renderChildren={({ openModal }) => (
+            <ButtonPrimary
+              sizeClass="px-5 sm:px-7 py-3 !rounded-2xl"
+              onClick={openModal}
+            >
+              Reserve
+            </ButtonPrimary>
+          )}
+        />
+      </div>
+    </div>
+  );
+};
+
+export default MobileFooterSticky;