diff --git a/src/components/layouts/Footer.tsx b/src/components/layouts/Footer.tsx
index 61fac2c..33b6881 100644
--- a/src/components/layouts/Footer.tsx
+++ b/src/components/layouts/Footer.tsx
@@ -1,6 +1,21 @@
+"use client";
+import React, { useEffect, useState } from "react";
 import Image from "next/image";
+import { useLatestPropertyQuery } from "../../services/hooks/property";
 
 export default function Footer() {
+  const { data, _fetch } = useLatestPropertyQuery();
+  const [isDataFetched, setIsDataFetched] = useState(false);
+
+  useEffect(() => {
+    if (!isDataFetched) {
+      _fetch();
+      setIsDataFetched(true);
+    }
+  }, [isDataFetched, _fetch]);
+
+  const latestProperties = data ? data.slice(0, 2) : [];
+
   return (
     <>
       <section className="section section-md bg-colorFooter context-dark">
@@ -10,36 +25,34 @@ export default function Footer() {
               <h3 className="heading-square font-weight-sbold" data-item=".heading-square-item">
                 <span className="heading-square-item"></span>Latest Properties
               </h3>
-              <a className="post-minimal" href="single-property.html">
-                <div className="post-minimal-image">
-                  <Image src="/images/featured-properties-17-480x287.jpg" alt="" width="161" height="136" />
-                </div>
-                <div className="post-minimal-body">
-                  <div className="post-minimal-title">
-                    <span className="text-colorFooterText! hover:text-colorFooterTextHover!">
-                      Retail Store Southwest 186th Street
-                    </span>
-                  </div>
-                  <div className="post-minimal-text">
-                    <span>From $120/month</span>
-                  </div>
-                </div>
-              </a>
-              <a className="post-minimal" href="single-property.html">
-                <div className="post-minimal-image">
-                  <Image src="/images/featured-properties-17-480x287.jpg" alt="" width="161" height="136" />
-                </div>
-                <div className="post-minimal-body">
-                  <div className="post-minimal-title">
-                    <span className="text-colorFooterText! hover:text-colorFooterTextHover!">
-                      Apartment Building with Subunits
-                    </span>
-                  </div>
-                  <div className="post-minimal-text">
-                    <span>From $120/month</span>
-                  </div>
-                </div>
-              </a>
+              {latestProperties && latestProperties.length > 0 ? (
+                latestProperties.map((property, index) => (
+                  <a key={index} className="post-minimal" href={`single-property/${property.slug}`}>
+                    <div className="post-minimal-image">
+                      <Image
+                        src={
+                          property.images && property.images.length > 0
+                            ? property.images[0].url
+                            : "/images/featured-properties-17-480x287.jpg"
+                        }
+                        alt={property.title}
+                        width={161}
+                        height={136}
+                      />
+                    </div>
+                    <div className="post-minimal-body">
+                      <div className="post-minimal-title">
+                        <span className="text-colorFooterText! hover:text-colorFooterTextHover!">{property.title}</span>
+                      </div>
+                      <div className="post-minimal-text">
+                        <span>From ${property.price}/month</span>
+                      </div>
+                    </div>
+                  </a>
+                ))
+              ) : (
+                <div>Data Not Available</div>
+              )}
             </div>
             <div className="col-md-6 col-lg-4 col-xl-3 col-bordered">
               <h3 className="heading-square font-weight-sbold" data-item=".heading-square-item">
diff --git a/src/services/hooks/property.ts b/src/services/hooks/property.ts
index 39ae8d8..1e9ff13 100644
--- a/src/services/hooks/property.ts
+++ b/src/services/hooks/property.ts
@@ -1,3 +1,4 @@
+"use client";
 import { CardPropertyData } from "@/schema/property";
 import { useState } from "react";
 import { fetchLatestPropertyREST } from "../rest/property";