diff --git a/public/css/style.css b/public/css/style.css
index 9b91adc..b223537 100644
--- a/public/css/style.css
+++ b/public/css/style.css
@@ -588,9 +588,9 @@ a:hover {
 	color: #967244;
 }
 
-a[href*='tel'], a[href*='mailto'] {
+/* a[href*='tel'], a[href*='mailto'] {
 	white-space: nowrap;
-}
+} */
 
 .link-default, .link-default:active, .link-default:focus {
 	color: #424445;
@@ -1177,7 +1177,7 @@ a.privacy-link {
 	padding: 12px 11px;
 	color: #9cc1ff;
 	letter-spacing: 0;
-	background-color: #31323c;
+	background-color: var(--color-colorContactForm);
 }
 
 .block-callboard a, .block-callboard a:focus, .block-callboard a:active {
diff --git a/src/app/(main)/globals.css b/src/app/(main)/globals.css
index 08bd10e..29b5ab8 100644
--- a/src/app/(main)/globals.css
+++ b/src/app/(main)/globals.css
@@ -34,6 +34,7 @@
   --color-colorText1: var(--color-colorExt10);
   --color-colorText2: var(--color-colorExt20);
   --color-colorLoaderBackground: var(--color-colorExt20);
+  --color-colorPriceTag: var(--color-colorExt30);
 }
 
 @layer components {
diff --git a/src/app/(main)/listings-for-rent/[slug]/page.tsx b/src/app/(main)/listings-for-rent/[slug]/page.tsx
new file mode 100644
index 0000000..a6dada7
--- /dev/null
+++ b/src/app/(main)/listings-for-rent/[slug]/page.tsx
@@ -0,0 +1,594 @@
+import CardProperty from "@/components/CardProperty";
+import HeroImage from "@/components/HeroImage";
+import { CardPropertyData } from "@/schema/property";
+import { formatCurrency } from "@/utils/general";
+
+const similarPropertiesData: CardPropertyData[] = [
+  {
+    id: 1,
+    title: "401 Biscayne Boulevard, Miami",
+    slug: "401-biscayne-boulevard",
+    images: [
+      { url: "/images/featured-properties-01-480x287.jpg", alt: "biscayne boulevard" },
+      { url: "/images/featured-properties-01-480x287.jpg", alt: "biscayne boulevard" },
+      { url: "/images/featured-properties-01-480x287.jpg", alt: "biscayne boulevard" },
+    ],
+    price: 5000,
+    propertyType: "rent",
+    posted_at: "",
+    area: 480,
+    bathrooms_count: 2,
+    bedrooms_count: 2,
+    is_available: true,
+  },
+  {
+    id: 2,
+    title: "402 Biscayne Boulevard, Miami",
+    slug: "402-biscayne-boulevard",
+    images: [{ url: "/images/featured-properties-01-480x287.jpg", alt: "biscayne boulevard" }],
+    price: 5000,
+    propertyType: "rent",
+    posted_at: "",
+    area: 480,
+    bathrooms_count: 2,
+    bedrooms_count: 2,
+    is_available: true,
+  },
+];
+
+export default function ListingsForRentDetail() {
+  return (
+    <>
+      <HeroImage title="Lorem Ipsum, Dolor" />
+
+      <section className="section section-md bg-gray-12">
+        <div className="container">
+          <div className="row row-50">
+            <div className="col-lg-7 col-xl-8">
+              <div className="slick-slider-1">
+                <div className="slick-slider-price">$5000\mo</div>
+                <div
+                  className="slick-slider carousel-parent"
+                  id="parent-carousel"
+                  data-arrows="true"
+                  data-loop="true"
+                  data-dots="false"
+                  data-swipe="true"
+                  data-fade="true"
+                  data-items="1"
+                  data-child="#child-carousel"
+                  data-for="#child-carousel"
+                >
+                  <div className="item">
+                    <img src="/images/single-property-1-763x443.jpg" alt="" width="763" height="443" />
+                  </div>
+                  <div className="item">
+                    <img src="/images/single-property-2-763x443.jpg" alt="" width="763" height="443" />
+                  </div>
+                  <div className="item">
+                    <img src="/images/single-property-3-763x443.jpg" alt="" width="763" height="443" />
+                  </div>
+                  <div className="item">
+                    <img src="/images/single-property-4-763x443.jpg" alt="" width="763" height="443" />
+                  </div>
+                  <div className="item">
+                    <img src="/images/single-property-5-763x443.jpg" alt="" width="763" height="443" />
+                  </div>
+                  <div className="item">
+                    <img src="/images/single-property-6-763x443.jpg" alt="" width="763" height="443" />
+                  </div>
+                </div>
+                <div
+                  className="slick-slider carousel-child"
+                  id="child-carousel"
+                  data-arrows="true"
+                  data-loop="true"
+                  data-dots="false"
+                  data-swipe="true"
+                  data-items="1"
+                  data-sm-items="3"
+                  data-md-items="4"
+                  data-lg-items="4"
+                  data-xl-items="5"
+                  data-slide-to-scroll="1"
+                  data-for="#parent-carousel"
+                >
+                  <div>
+                    <div className="slick-slide-inner bg-[url(/images/single-property-1-763x443.jpg)]"></div>
+                  </div>
+                  <div>
+                    <div className="slick-slide-inner bg-[url(/images/single-property-1-763x443.jpg)]"></div>
+                  </div>
+                  <div>
+                    <div className="slick-slide-inner bg-[url(/images/single-property-1-763x443.jpg)]"></div>
+                  </div>
+                  <div>
+                    <div className="slick-slide-inner bg-[url(/images/single-property-1-763x443.jpg)]"></div>
+                  </div>
+                  <div>
+                    <div className="slick-slide-inner bg-[url(/images/single-property-1-763x443.jpg)]"></div>
+                  </div>
+                  <div>
+                    <div className="slick-slide-inner bg-[url(/images/single-property-1-763x443.jpg)]"></div>
+                  </div>
+                </div>
+              </div>
+              <div className="features-block">
+                <div className="features-block-inner">
+                  <div className="features-block-item">
+                    <ul className="features-block-list">
+                      <li>
+                        <span className="icon hotel-icon-10"></span>
+                        <span>2 Bathrooms</span>
+                      </li>
+                      <li>
+                        <span className="icon hotel-icon-05"></span>
+                        <span>2 Bedrooms</span>
+                      </li>
+                      <li>
+                        <span className="icon mdi mdi-vector-square"></span>
+                        <span>480 Sq Ft</span>
+                      </li>
+                    </ul>
+                  </div>
+                  <div className="features-block-item">
+                    <a className="link link-1" href="#">
+                      <span className="icon mdi mdi-heart-outline"></span>Add to Favorites
+                    </a>
+                  </div>
+                </div>
+              </div>
+              <p>
+                Choose this property if you are looking for a modern house near the ocean shore. With 2 bathrooms and 2
+                bedrooms as well as a single garage, it is a perfect option for a small family.
+              </p>
+              <p>
+                This home has been completely renovated within the past year and features amazing views and sunsets of
+                the local lake, solid wood cabinets (and loads of them), granite counters with colored glass backsplash,
+                sliding glass doors across the entire family room allowing beautiful views of the lake etc. Its
+                affordable price serves as a great bonus for a family looking for an opportunity to save money on Miami
+                MyHome.
+              </p>
+
+              <div
+                className="card-group-custom card-group-corporate"
+                id="accordion1"
+                role="tablist"
+                aria-multiselectable="false"
+              >
+                <article className="card card-custom card-corporate">
+                  <div className="card-header" id="accordion1-heading-1" role="tab">
+                    <div className="card-title">
+                      <a
+                        className="card-link"
+                        role="button"
+                        data-toggle="collapse"
+                        href="#accordion1-collapse-1"
+                        aria-controls="accordion1-collapse-1"
+                        aria-expanded="true"
+                      >
+                        <span>Address</span>
+                        <div className="card-arrow"></div>
+                      </a>
+                    </div>
+                  </div>
+                  <div
+                    className="show visible!"
+                    id="accordion1-collapse-1"
+                    role="tabpanel"
+                    aria-labelledby="accordion1-heading-1"
+                    data-parent="#accordion1"
+                  >
+                    <div className="card-body">
+                      <div className="layout-1">
+                        <dl className="list-terms-inline">
+                          <dt>Address:</dt>
+                          <dd>Biscayne Blvd</dd>
+                        </dl>
+                        <dl className="list-terms-inline">
+                          <dt>State/County:</dt>
+                          <dd>Florida</dd>
+                        </dl>
+                        <dl className="list-terms-inline">
+                          <dt>City:</dt>
+                          <dd>Miami</dd>
+                        </dl>
+                        <dl className="list-terms-inline">
+                          <dt>Zip:</dt>
+                          <dd>8322</dd>
+                        </dl>
+                        <dl className="list-terms-inline">
+                          <dt>Country:</dt>
+                          <dd>United States</dd>
+                        </dl>
+                        <dl className="list-terms-inline">
+                          <dt>Area:</dt>
+                          <dd>Lake Worth</dd>
+                        </dl>
+                      </div>
+                    </div>
+                  </div>
+                </article>
+              </div>
+              <div
+                className="card-group-custom card-group-corporate"
+                id="accordion2"
+                role="tablist"
+                aria-multiselectable="false"
+              >
+                <article className="card card-custom card-corporate">
+                  <div className="card-header" id="accordion2-heading-1" role="tab">
+                    <div className="card-title">
+                      <a
+                        className="card-link"
+                        role="button"
+                        data-toggle="collapse"
+                        href="#accordion2-collapse-1"
+                        aria-controls="accordion2-collapse-1"
+                        aria-expanded="true"
+                      >
+                        <span>Features</span>
+                        <div className="card-arrow"></div>
+                      </a>
+                    </div>
+                  </div>
+                  <div
+                    className="show visible!"
+                    id="accordion2-collapse-1"
+                    role="tabpanel"
+                    aria-labelledby="accordion2-heading-1"
+                    data-parent="#accordion2"
+                  >
+                    <div className="card-body">
+                      <ul className="list-marked-2 layout-2">
+                        <li>2 Stories</li>
+                        <li>Basketball Court</li>
+                        <li>Lawn</li>
+                        <li>Gym</li>
+                        <li>Fireplace</li>
+                        <li>Sprinklers</li>
+                        <li>Private Space</li>
+                        <li>Balcony</li>
+                        <li>Laundry</li>
+                        <li>Ocean View</li>
+                      </ul>
+                    </div>
+                  </div>
+                </article>
+              </div>
+              <div
+                className="card-group-custom card-group-corporate"
+                id="accordion0"
+                role="tablist"
+                aria-multiselectable="false"
+              >
+                <article className="card card-custom card-corporate">
+                  <div className="card-header" id="accordion0-heading-0" role="tab">
+                    <div className="card-title">
+                      <a
+                        className="card-link"
+                        role="button"
+                        data-toggle="collapse"
+                        href="#accordion0-collapse-0"
+                        aria-controls="accordion0-collapse-0"
+                        aria-expanded="true"
+                      >
+                        <span>Pricing Detail</span>
+                        <div className="card-arrow"></div>
+                      </a>
+                    </div>
+                  </div>
+                  <div
+                    className="show visible!"
+                    id="accordion0-collapse-0"
+                    role="tabpanel"
+                    aria-labelledby="accordion0-heading-0"
+                    data-parent="#accordion0"
+                  >
+                    <div className="card-body">
+                      <div className="layout-1 columns-1!">
+                        <dl className="list-terms-inline w-full flex justify-between">
+                          <dt>Base Rent</dt>
+                          <dd>{formatCurrency(2700)}</dd>
+                        </dl>
+                      </div>
+                      <div className="layout-1 columns-1!">
+                        <dl className="list-terms-inline w-full flex justify-between">
+                          <dt>Smart Home</dt>
+                          <dd>{formatCurrency(20)}</dd>
+                        </dl>
+                      </div>
+                      <div className="layout-1 columns-1!">
+                        <dl className="list-terms-inline w-full flex justify-between">
+                          <dt>Utility Service</dt>
+                          <dd>{formatCurrency(5)}</dd>
+                        </dl>
+                      </div>
+                      <div className="layout-1 columns-1! mt-2">
+                        <dl className="list-terms-inline w-full flex justify-between">
+                          <dd className="font-semibold!">Est. total monthly*</dd>
+                          <dd className="font-semibold!">{formatCurrency(2900)}</dd>
+                        </dl>
+                      </div>
+                    </div>
+                  </div>
+                </article>
+              </div>
+
+              <div className="block-group-item">
+                <h3>Property Map</h3>
+                <div className="row row-30">
+                  <div className="col-12">
+                    <iframe
+                      src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3360.4823498818855!2d-83.68565822483802!3d32.61997607372962!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x88f3e6ce99781991%3A0xabfd803ad30f6d12!2s100%20N%20Houston%20Lake%20Blvd%2C%20Centerville%2C%20GA%2031028%2C%20USA!5e0!3m2!1sen!2sid!4v1744883077476!5m2!1sen!2sid"
+                      width={"100%"}
+                      height={450}
+                      style={{ border: 0 }}
+                      loading="lazy"
+                      referrerPolicy="no-referrer-when-downgrade"
+                    />
+                  </div>
+                </div>
+              </div>
+              <div className="blog-post-solo-footer mt-20">
+                <div className="blog-post-solo-footer-left">
+                  <ul className="blog-post-solo-footer-list">
+                    <li>
+                      <span className="icon mdi mdi-clock"></span>
+                      <a href="#">February 10, 2021</a>
+                    </li>
+                  </ul>
+                </div>
+                <div className="blog-post-solo-footer-right">
+                  <ul className="blog-post-solo-footer-list-1">
+                    <li>
+                      <span>Share this post</span>
+                    </li>
+                    <li>
+                      <ul className="list-inline-1">
+                        <li>
+                          <a className="icon link-default fa-facebook" href="#"></a>
+                        </li>
+                        <li>
+                          <a className="icon link-default fa-twitter" href="#"></a>
+                        </li>
+                        <li>
+                          <a className="icon link-default fa-google-plus" href="#"></a>
+                        </li>
+                        <li>
+                          <a className="icon link-default fa-pinterest-p" href="#"></a>
+                        </li>
+                      </ul>
+                    </li>
+                  </ul>
+                </div>
+              </div>
+
+              <div className="block-group-item">
+                <h3>Similar Properties</h3>
+                <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+                  {similarPropertiesData.map((p) => (
+                    <CardProperty key={p.id} data={p} />
+                  ))}
+                </div>
+              </div>
+            </div>
+            <div className="col-lg-5 col-xl-4">
+              <div className="row row-50">
+                <div className="col-md-6 col-lg-12">
+                  <div className="block-info">
+                    <h3>Find Your Property</h3>
+                    <form
+                      className="rd-mailform form-select"
+                      data-form-output="form-output-global"
+                      data-form-type="contact"
+                      method="post"
+                      action="bat/rd-mailform.php"
+                    >
+                      <div className="form-wrap form-wrap-validation">
+                        <select
+                          className="form-input select-filter"
+                          data-style="modern"
+                          data-placeholder="Choose Location"
+                          data-minimum-results-for-search="Infinity"
+                          data-constraints="@Required"
+                        >
+                          <option label="placeholder"></option>
+                          <option value="2">Alaska</option>
+                          <option value="3">Arizona</option>
+                          <option value="4">Arkansas</option>
+                          <option value="5">California</option>
+                          <option value="6">Colorado</option>
+                          <option value="7">Connecticut</option>
+                          <option value="8">Delaware</option>
+                          <option value="9">Florida</option>
+                        </select>
+                        <span className="select-arrow"></span>
+                      </div>
+                      <div className="form-wrap form-wrap-validation">
+                        <select
+                          className="form-input select-filter"
+                          data-style="modern"
+                          data-placeholder="Property Status"
+                          data-minimum-results-for-search="Infinity"
+                          data-constraints="@Required"
+                        >
+                          <option label="placeholder"></option>
+                          <option value="2">Low</option>
+                          <option value="3">Middle</option>
+                          <option value="4">Primary</option>
+                        </select>
+                        <span className="select-arrow"></span>
+                      </div>
+                      <div className="form-wrap form-wrap-validation">
+                        <select
+                          className="form-input select-filter"
+                          data-style="modern"
+                          data-placeholder="Property Type"
+                          data-minimum-results-for-search="Infinity"
+                          data-constraints="@Required"
+                        >
+                          <option label="placeholder"></option>
+                          <option value="2">Low</option>
+                          <option value="3">Middle</option>
+                          <option value="4">Primary</option>
+                        </select>
+                        <span className="select-arrow"></span>
+                      </div>
+                      <div className="form-wrap-group">
+                        <div className="form-wrap form-wrap-validation">
+                          <select
+                            className="form-input select-filter"
+                            data-style="modern"
+                            data-placeholder="Min Price"
+                            data-minimum-results-for-search="Infinity"
+                            data-constraints="@Required"
+                          >
+                            <option label="placeholder"></option>
+                            <option value="2">100 $</option>
+                            <option value="3">200 $</option>
+                            <option value="4">300 $</option>
+                          </select>
+                          <span className="select-arrow"></span>
+                        </div>
+                        <div className="form-wrap form-wrap-validation">
+                          <select
+                            className="form-input select-filter"
+                            data-style="modern"
+                            data-placeholder="Max Price"
+                            data-minimum-results-for-search="Infinity"
+                            data-constraints="@Required"
+                          >
+                            <option label="placeholder"></option>
+                            <option value="2">1000 $</option>
+                            <option value="3">2000 $</option>
+                            <option value="4">3000 $</option>
+                          </select>
+                          <span className="select-arrow"></span>
+                        </div>
+                      </div>
+                      <div className="form-wrap-group">
+                        <div className="form-wrap form-wrap-validation">
+                          <select
+                            className="form-input select-filter"
+                            data-style="modern"
+                            data-placeholder="Min Area"
+                            data-minimum-results-for-search="Infinity"
+                            data-constraints="@Required"
+                          >
+                            <option label="placeholder"></option>
+                            <option value="2">100 Sq Ft</option>
+                            <option value="3">200 Sq Ft</option>
+                            <option value="4">300 Sq Ft</option>
+                          </select>
+                          <span className="select-arrow"></span>
+                        </div>
+                        <div className="form-wrap form-wrap-validation">
+                          <select
+                            className="form-input select-filter"
+                            data-style="modern"
+                            data-placeholder="Max Area"
+                            data-minimum-results-for-search="Infinity"
+                            data-constraints="@Required"
+                          >
+                            <option label="placeholder"></option>
+                            <option value="2">1000 Sq Ft</option>
+                            <option value="3">2000 Sq Ft</option>
+                            <option value="4">3000 Sq Ft</option>
+                          </select>
+                          <span className="select-arrow"></span>
+                        </div>
+                      </div>
+                      <div className="form-button">
+                        <button className="button button-block button-primary" type="submit">
+                          Search
+                        </button>
+                      </div>
+                    </form>
+                  </div>
+                </div>
+                <div className="col-md-6 col-lg-12">
+                  <article className="block-callboard">
+                    <div className="block-callboard-body">
+                      <h3 className="block-callboard-title">Request a Showing</h3>
+                      <form
+                        className="rd-form rd-mailform"
+                        data-form-output="form-output-global"
+                        data-form-type="contact"
+                        method="post"
+                        action="bat/rd-mailform.php"
+                      >
+                        <div className="row row-20">
+                          <div className="col-12">
+                            <div className="form-wrap">
+                              <input
+                                className="form-input"
+                                id="contact-name"
+                                type="text"
+                                name="name"
+                                data-constraints="@Required"
+                              />
+                              <label className="form-label" htmlFor="contact-name">
+                                Your Name
+                              </label>
+                            </div>
+                          </div>
+                          <div className="col-12">
+                            <div className="form-wrap">
+                              <input
+                                className="form-input"
+                                id="contact-email"
+                                type="email"
+                                name="email"
+                                data-constraints="@Email @Required"
+                              />
+                              <label className="form-label" htmlFor="contact-email">
+                                E-mail
+                              </label>
+                            </div>
+                          </div>
+                          <div className="col-12">
+                            <div className="form-wrap">
+                              <input
+                                className="form-input"
+                                id="contact-phone"
+                                type="text"
+                                name="phone"
+                                data-constraints="@PhoneNumber"
+                              />
+                              <label className="form-label" htmlFor="contact-phone">
+                                Phone
+                              </label>
+                            </div>
+                          </div>
+                          <div className="col-12">
+                            <div className="form-wrap">
+                              <label className="form-label" htmlFor="contact-message">
+                                Message
+                              </label>
+                              <textarea
+                                className="form-input"
+                                id="contact-message"
+                                name="message"
+                                data-constraints="@Required"
+                              ></textarea>
+                            </div>
+                          </div>
+                          <div className="col-12">
+                            <button className="button button-block button-secondary" type="submit">
+                              Send message
+                            </button>
+                          </div>
+                        </div>
+                      </form>
+                    </div>
+                  </article>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </section>
+    </>
+  );
+}
diff --git a/src/app/(main)/listings-for-rent/page.tsx b/src/app/(main)/listings-for-rent/page.tsx
new file mode 100644
index 0000000..107775c
--- /dev/null
+++ b/src/app/(main)/listings-for-rent/page.tsx
@@ -0,0 +1,292 @@
+import CardProperty from "@/components/CardProperty";
+import HeroImage from "@/components/HeroImage";
+import Pagination from "@/components/Pagination";
+import { CardPropertyData } from "@/schema/property";
+import { getDefaultMetadata } from "@/utils/metadata";
+import { Metadata } from "next";
+
+const metaDesc = "Explore the latest properties on the Dynamic Realty.";
+
+export async function generateMetadata(): Promise<Metadata> {
+  const metadata = await getDefaultMetadata();
+  metadata.title = `Listings For Rent - ${metadata.openGraph?.siteName}`;
+  metadata.description = metaDesc;
+
+  return metadata;
+}
+
+const propertiesData: CardPropertyData[] = [
+  {
+    id: 1,
+    title: "401 Biscayne Boulevard, Miami",
+    slug: "401-biscayne-boulevard",
+    images: [
+      { url: "/images/featured-properties-01-480x287.jpg", alt: "biscayne boulevard" },
+      { url: "/images/featured-properties-01-480x287.jpg", alt: "biscayne boulevard" },
+      { url: "/images/featured-properties-01-480x287.jpg", alt: "biscayne boulevard" },
+    ],
+    price: 5000,
+    propertyType: "rent",
+    posted_at: "",
+    area: 480,
+    bathrooms_count: 2,
+    bedrooms_count: 2,
+    is_available: true,
+  },
+  {
+    id: 2,
+    title: "402 Biscayne Boulevard, Miami",
+    slug: "402-biscayne-boulevard",
+    images: [{ url: "/images/featured-properties-01-480x287.jpg", alt: "biscayne boulevard" }],
+    price: 5000,
+    propertyType: "rent",
+    posted_at: "",
+    area: 480,
+    bathrooms_count: 2,
+    bedrooms_count: 2,
+    is_available: true,
+  },
+  {
+    id: 3,
+    title: "403 Biscayne Boulevard, Miami",
+    slug: "403-biscayne-boulevard",
+    images: [{ url: "/images/featured-properties-01-480x287.jpg", alt: "biscayne boulevard" }],
+    price: 5000,
+    propertyType: "rent",
+    posted_at: "",
+    area: 480,
+    bathrooms_count: 2,
+    bedrooms_count: 2,
+    is_available: true,
+  },
+  {
+    id: 4,
+    title: "404 Biscayne Boulevard, Miami",
+    slug: "404-biscayne-boulevard",
+    images: [{ url: "/images/featured-properties-01-480x287.jpg", alt: "biscayne boulevard" }],
+    price: 5000,
+    propertyType: "rent",
+    posted_at: "",
+    area: 480,
+    bathrooms_count: 2,
+    bedrooms_count: 2,
+    is_available: true,
+  },
+];
+
+export default function ListingsForRent() {
+  return (
+    <>
+      <HeroImage title="Listings For Rent" />
+
+      <section className="section section-md bg-gray-12">
+        <div className="container">
+          <div className="row row-50">
+            <div className="col-lg-7 col-xl-8">
+              <div className="row row-30">
+                <div className="col-12">
+                  <ul className="block-info-1">
+                    <li>
+                      <div className="form-wrap-group-1">
+                        <div className="form-wrap">
+                          <select
+                            className="form-input select-filter"
+                            data-style="modern"
+                            data-placeholder="Publication Date"
+                            data-minimum-results-for-search="Infinity"
+                            data-constraints="@Required"
+                          >
+                            <option label="placeholder"></option>
+                            <option value="2">Monday</option>
+                            <option value="3">Tuesday</option>
+                            <option value="4">Wednesday</option>
+                            <option value="5">Thursday</option>
+                            <option value="6">Friday</option>
+                            <option value="7">Saturday</option>
+                            <option value="8">Sunday</option>
+                          </select>
+                        </div>
+                        <div className="form-wrap">
+                          <select
+                            className="form-input select-filter"
+                            data-style="modern"
+                            data-placeholder="Price Low to High"
+                            data-minimum-results-for-search="Infinity"
+                            data-constraints="@Required"
+                          >
+                            <option label="placeholder"></option>
+                            <option value="1">Price Low to High</option>
+                            <option value="2">Price High to Low</option>
+                            <option value="3">Most Popular</option>
+                            <option value="4">Top Rated</option>
+                            <option value="5">Best Sellers</option>
+                          </select>
+                        </div>
+                      </div>
+                    </li>
+                  </ul>
+                </div>
+                <div className="col-12">
+                  <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+                    {propertiesData.map((p) => (
+                      <CardProperty key={p.id} data={p} />
+                    ))}
+                  </div>
+                </div>
+                <div className="col-12">
+                  {/* <ul className="pagination-custom">
+                    <li>
+                      <a className="active" href="#">
+                        1
+                      </a>
+                    </li>
+                    <li>
+                      <a href="#">2</a>
+                    </li>
+                  </ul> */}
+                  <Pagination hasNextPage={true} hasPreviousPage={true} totalPages={10} page={3} />
+                </div>
+              </div>
+            </div>
+            <div className="col-lg-5 col-xl-4">
+              <div className="row row-50">
+                <div className="col-md-6 col-lg-12">
+                  <div className="block-info">
+                    <h3>Find Your Property</h3>
+                    <form
+                      className="rd-mailform form-select"
+                      data-form-output="form-output-global"
+                      data-form-type="contact"
+                      method="post"
+                      action="bat/rd-mailform.php"
+                    >
+                      <div className="form-wrap form-wrap-validation">
+                        <select
+                          className="form-input select-filter"
+                          data-style="modern"
+                          data-placeholder="Choose Location"
+                          data-minimum-results-for-search="Infinity"
+                          data-constraints="@Required"
+                        >
+                          <option label="placeholder"></option>
+                          <option value="2">Alaska</option>
+                          <option value="3">Arizona</option>
+                          <option value="4">Arkansas</option>
+                          <option value="5">California</option>
+                          <option value="6">Colorado</option>
+                          <option value="7">Connecticut</option>
+                          <option value="8">Delaware</option>
+                          <option value="9">Florida</option>
+                        </select>
+                        <span className="select-arrow"></span>
+                      </div>
+                      <div className="form-wrap form-wrap-validation">
+                        <select
+                          className="form-input select-filter"
+                          data-style="modern"
+                          data-placeholder="Property Status"
+                          data-minimum-results-for-search="Infinity"
+                          data-constraints="@Required"
+                        >
+                          <option label="placeholder"></option>
+                          <option value="2">Low</option>
+                          <option value="3">Middle</option>
+                          <option value="4">Primary</option>
+                        </select>
+                        <span className="select-arrow"></span>
+                      </div>
+                      <div className="form-wrap form-wrap-validation">
+                        <select
+                          className="form-input select-filter"
+                          data-style="modern"
+                          data-placeholder="Property Type"
+                          data-minimum-results-for-search="Infinity"
+                          data-constraints="@Required"
+                        >
+                          <option label="placeholder"></option>
+                          <option value="2">Low</option>
+                          <option value="3">Middle</option>
+                          <option value="4">Primary</option>
+                        </select>
+                        <span className="select-arrow"></span>
+                      </div>
+                      <div className="form-wrap-group">
+                        <div className="form-wrap form-wrap-validation">
+                          <select
+                            className="form-input select-filter"
+                            data-style="modern"
+                            data-placeholder="Min Price"
+                            data-minimum-results-for-search="Infinity"
+                            data-constraints="@Required"
+                          >
+                            <option label="placeholder"></option>
+                            <option value="2">100 $</option>
+                            <option value="3">200 $</option>
+                            <option value="4">300 $</option>
+                          </select>
+                          <span className="select-arrow"></span>
+                        </div>
+                        <div className="form-wrap form-wrap-validation">
+                          <select
+                            className="form-input select-filter"
+                            data-style="modern"
+                            data-placeholder="Max Price"
+                            data-minimum-results-for-search="Infinity"
+                            data-constraints="@Required"
+                          >
+                            <option label="placeholder"></option>
+                            <option value="2">1000 $</option>
+                            <option value="3">2000 $</option>
+                            <option value="4">3000 $</option>
+                          </select>
+                          <span className="select-arrow"></span>
+                        </div>
+                      </div>
+                      <div className="form-wrap-group">
+                        <div className="form-wrap form-wrap-validation">
+                          <select
+                            className="form-input select-filter"
+                            data-style="modern"
+                            data-placeholder="Min Area"
+                            data-minimum-results-for-search="Infinity"
+                            data-constraints="@Required"
+                          >
+                            <option label="placeholder"></option>
+                            <option value="2">100 Sq Ft</option>
+                            <option value="3">200 Sq Ft</option>
+                            <option value="4">300 Sq Ft</option>
+                          </select>
+                          <span className="select-arrow"></span>
+                        </div>
+                        <div className="form-wrap form-wrap-validation">
+                          <select
+                            className="form-input select-filter"
+                            data-style="modern"
+                            data-placeholder="Max Area"
+                            data-minimum-results-for-search="Infinity"
+                            data-constraints="@Required"
+                          >
+                            <option label="placeholder"></option>
+                            <option value="2">1000 Sq Ft</option>
+                            <option value="3">2000 Sq Ft</option>
+                            <option value="4">3000 Sq Ft</option>
+                          </select>
+                          <span className="select-arrow"></span>
+                        </div>
+                      </div>
+                      <div className="form-button">
+                        <button className="button button-block button-primary" type="submit">
+                          Search
+                        </button>
+                      </div>
+                    </form>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </section>
+    </>
+  );
+}
diff --git a/src/components/CardProperty.tsx b/src/components/CardProperty.tsx
new file mode 100644
index 0000000..1f4b4cf
--- /dev/null
+++ b/src/components/CardProperty.tsx
@@ -0,0 +1,63 @@
+import { CardPropertyData } from "@/schema/property";
+import { formatCurrency } from "@/utils/general";
+import Image from "next/image";
+import Link from "next/link";
+
+type CardPropertyProps = {
+  data: CardPropertyData;
+};
+
+export default function CardProperty({ data }: CardPropertyProps) {
+  return (
+    <>
+      <div>
+        <article className="product-classic">
+          <div className="product-classic-media">
+            <div
+              className="owl-carousel"
+              data-items="1"
+              data-nav="true"
+              data-stage-padding="0"
+              data-loop="false"
+              data-margin="0"
+              data-mouse-drag="false"
+            >
+              {Array.isArray(data.images) &&
+                data.images.map((img, idx) => (
+                  <Image key={idx} src={img.url} alt={img.alt ?? ""} width="480" height="287" />
+                ))}
+            </div>
+            <div className="product-classic-price bg-colorPriceTag/80!">
+              <span>
+                {formatCurrency(data.price)}
+                {data.propertyType === "rent" && `/mo`}
+              </span>
+            </div>
+          </div>
+          <h4 className="product-classic-title">
+            <Link href="/listings-for-rent/slug">{data.title}</Link>
+          </h4>
+          <div className="product-classic-divider"></div>
+          <ul className="product-classic-list">
+            <li>
+              <span className="icon mdi mdi-vector-square"></span>
+              <span>{data.area} Sq Ft</span>
+            </li>
+            {data.bathrooms_count && (
+              <li>
+                <span className="icon hotel-icon-10"></span>
+                <span>{data.bathrooms_count} Bathrooms</span>
+              </li>
+            )}
+            {data.bedrooms_count && (
+              <li>
+                <span className="icon hotel-icon-05"></span>
+                <span>{data.bedrooms_count} Bedrooms</span>
+              </li>
+            )}
+          </ul>
+        </article>
+      </div>
+    </>
+  );
+}
diff --git a/src/components/Pagination.tsx b/src/components/Pagination.tsx
new file mode 100644
index 0000000..01ca49f
--- /dev/null
+++ b/src/components/Pagination.tsx
@@ -0,0 +1,120 @@
+"use client";
+
+import { usePathname } from "next/navigation";
+
+interface PaginationProps {
+  page: number;
+  hasPreviousPage: boolean;
+  hasNextPage: boolean;
+  totalPages: number;
+  usePathParams?: boolean;
+}
+
+export default function Pagination({
+  page,
+  hasPreviousPage,
+  hasNextPage,
+  totalPages,
+  usePathParams = false,
+}: PaginationProps) {
+  const activePage = page;
+  const pathName = usePathname();
+
+  // Function to handle page change
+  const handlePageChange = (page: string | number) => {
+    if (typeof page === "string") return;
+    if (typeof window === "undefined") return;
+    const url = new URL(window.location.href);
+    const searchParams = new URLSearchParams(url.search);
+
+    if (usePathParams) {
+      let updatedPath = "";
+      if (pathName.includes("/page")) {
+        updatedPath = pathName.replace(/\/page\/\d+/, `/page/${page}`);
+      } else {
+        updatedPath = `${pathName}/page/${page}`;
+      }
+      window.location.href = `${updatedPath}?${searchParams}`;
+    } else {
+      searchParams.set("page", `${page}`);
+      window.location.href = `${pathName}/?${searchParams}`;
+    }
+  };
+
+  const getPageNumbers = () => {
+    const pages = [];
+    const showEllipsisStart = activePage > 4;
+    const showEllipsisEnd = activePage < totalPages - 3;
+
+    if (totalPages <= 7) {
+      // Show all pages if total is 7 or less
+      for (let i = 1; i <= totalPages; i++) {
+        pages.push(i);
+      }
+    } else {
+      // Always show first page
+      pages.push(1);
+
+      if (showEllipsisStart) {
+        pages.push("...");
+      }
+
+      // Show pages around current page
+      const start = showEllipsisStart ? Math.max(2, activePage - 1) : 2;
+      const end = showEllipsisEnd ? Math.min(totalPages - 1, activePage + 1) : totalPages - 1;
+
+      for (let i = start; i <= end; i++) {
+        pages.push(i);
+      }
+
+      if (showEllipsisEnd) {
+        pages.push("...");
+      }
+
+      // Always show last page
+      pages.push(totalPages);
+    }
+
+    return pages;
+  };
+
+  return (
+    <ul className={"pagination-custom"}>
+      {/* Previous Page Button */}
+      {hasPreviousPage && (
+        <>
+          <li className="cursor-pointer">
+            <a
+              onClick={() => activePage > 1 && handlePageChange(activePage - 1)}
+              className={activePage === 1 ? "disabled" : ""}
+            >
+              {"<"}
+            </a>
+          </li>
+        </>
+      )}
+
+      {getPageNumbers().map((page, key) => (
+        <li key={key} className="cursor-pointer">
+          <a onClick={() => handlePageChange(page)} className={activePage === page ? "active" : ""}>
+            {page}
+          </a>
+        </li>
+      ))}
+
+      {/* Next Page Button */}
+      {hasNextPage && (
+        <>
+          <li className="cursor-pointer">
+            <a
+              onClick={() => activePage < totalPages && handlePageChange(activePage + 1)}
+              className={activePage === totalPages ? "disabled" : ""}
+            >
+              {">"}
+            </a>
+          </li>
+        </>
+      )}
+    </ul>
+  );
+}
diff --git a/src/components/layouts/Header.tsx b/src/components/layouts/Header.tsx
index 455da0c..d8a5e50 100644
--- a/src/components/layouts/Header.tsx
+++ b/src/components/layouts/Header.tsx
@@ -118,7 +118,7 @@ export default function Header() {
                     </a>
                   </li>
                   <li className="rd-nav-item">
-                    <a className="rd-nav-link rd-nav-link-custom" href="/">
+                    <a className="rd-nav-link rd-nav-link-custom" href="/listings-for-rent">
                       LISTINGS FOR RENT
                     </a>
                   </li>
diff --git a/src/schema/property.ts b/src/schema/property.ts
new file mode 100644
index 0000000..37eca2b
--- /dev/null
+++ b/src/schema/property.ts
@@ -0,0 +1,16 @@
+export type CardPropertyData = {
+  id: number;
+  slug?: string | null;
+  title: string;
+  price: number;
+  images?: { url: string; alt?: string }[];
+  /**
+   * in sqft
+   */
+  area: number;
+  bedrooms_count?: number;
+  bathrooms_count?: number;
+  posted_at: string;
+  propertyType: "rent" | "sell";
+  is_available: boolean;
+};
diff --git a/src/utils/general.ts b/src/utils/general.ts
index 294ef90..5e09779 100644
--- a/src/utils/general.ts
+++ b/src/utils/general.ts
@@ -5,3 +5,22 @@ export function limitString(text: string) {
 export function getRandomNumber(range: number): number {
   return Math.floor(Math.random() * range) + 1;
 }
+
+export function formatCurrency(num: number): string {
+  return Intl.NumberFormat("en-US", {
+    style: "currency",
+    currency: "USD",
+
+    // These options can be used to round to whole numbers.
+    trailingZeroDisplay: "stripIfInteger", // This is probably what most people
+    // want. It will only stop printing
+    // the fraction when the input
+    // amount is a round number (int)
+    // already. If that's not what you
+    // need, have a look at the options
+    // below.
+    //minimumFractionDigits: 0, // This suffices for whole numbers, but will
+    // print 2500.10 as $2,500.1
+    //maximumFractionDigits: 0, // Causes 2500.99 to be printed as $2,501
+  }).format(num);
+}