diff --git a/frontend/src/components/Footer.jsx b/frontend/src/components/Footer.jsx
index 89026e6..babda78 100644
--- a/frontend/src/components/Footer.jsx
+++ b/frontend/src/components/Footer.jsx
@@ -50,16 +50,13 @@ const Footer = () => {
 
   return (
     <footer
-      className="bg-neutral-900 text-white pt-12 sm:pt-16 pb-8 sm:pb-10"
+      className="bg-gradient-to-b from-neutral-950 to-neutral-900 text-white pt-16 pb-8"
       role="contentinfo"
       aria-label="Site footer"
     >
       <div className="container mx-auto px-4 sm:px-6 lg:px-8 max-w-7xl">
-        <div
-          className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8 sm:gap-12 mb-12 text-center sm:text-left"
-          role="navigation"
-          aria-label="Footer navigation"
-        >
+        {/* Main Footer Content */}
+        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-5 gap-10 lg:gap-12 mb-14">
           {/* Company Info */}
           <div className="flex flex-col items-center sm:items-start">
             <h3 className="text-xl sm:text-2xl font-semibold mb-4 sm:mb-6 text-white inline-flex items-center">
@@ -67,7 +64,9 @@ const Footer = () => {
               <span className="font-light">RentSystem</span>
             </h3>
             <p className="text-neutral-400 mb-6 leading-relaxed max-w-sm">
-              {descriptionText}
+              Find your perfect home away from home. SmartRent provides a secure
+              platform for property rental with verified hosts and quality
+              listings.
             </p>
             <div className="flex space-x-4">
               <a
@@ -114,7 +113,7 @@ const Footer = () => {
           {/* Quick Links */}
           <div className="mt-4 sm:mt-0">
             <h3 className="text-lg font-semibold mb-4 sm:mb-6 text-white inline-block border-b-2 border-primary-500 pb-1">
-              {quickLinksText}
+              Quick Links
             </h3>
             <ul className="space-y-2.5 sm:space-y-3">
               <li>
@@ -124,7 +123,7 @@ const Footer = () => {
                   onClick={() => window.scrollTo(0, 0)}
                 >
                   <i className="fas fa-chevron-right text-xs mr-2 text-primary-500"></i>
-                  {homeText}
+                  Home
                 </Link>
               </li>
               <li>
@@ -134,7 +133,7 @@ const Footer = () => {
                   onClick={() => window.scrollTo(0, 0)}
                 >
                   <i className="fas fa-chevron-right text-xs mr-2 text-primary-500"></i>
-                  {aboutUsText}
+                  About Us
                 </Link>
               </li>
               <li>
@@ -144,7 +143,7 @@ const Footer = () => {
                   onClick={() => window.scrollTo(0, 0)}
                 >
                   <i className="fas fa-chevron-right text-xs mr-2 text-primary-500"></i>
-                  {contactText}
+                  Contact
                 </Link>
               </li>
               <li>
@@ -154,7 +153,7 @@ const Footer = () => {
                   onClick={() => window.scrollTo(0, 0)}
                 >
                   <i className="fas fa-chevron-right text-xs mr-2 text-primary-500"></i>
-                  {blogText}
+                  Blog
                 </Link>
               </li>
             </ul>
@@ -162,7 +161,7 @@ const Footer = () => {
 
           {/* Support */}
           <div>
-          <h3 className="text-lg font-semibold mb-6 text-white">{supportText}</h3>
+            <h3 className="text-lg font-semibold mb-6 text-white">Support</h3>
             <ul className="space-y-3">
               <li>
                 <Link
@@ -171,7 +170,7 @@ const Footer = () => {
                   onClick={() => window.scrollTo(0, 0)}
                 >
                   <i className="fas fa-chevron-right text-xs mr-2 text-primary-500"></i>
-                  {helpText}
+                  Help
                 </Link>
               </li>
               <li>
@@ -181,7 +180,7 @@ const Footer = () => {
                   onClick={() => window.scrollTo(0, 0)}
                 >
                   <i className="fas fa-chevron-right text-xs mr-2 text-primary-500"></i>
-                  {safetyText}
+                  Safety Information
                 </Link>
               </li>
               <li>
@@ -191,7 +190,7 @@ const Footer = () => {
                   onClick={() => window.scrollTo(0, 0)}
                 >
                   <i className="fas fa-chevron-right text-xs mr-2 text-primary-500"></i>
-                  {cancellationText}
+                  Cancellation Options
                 </Link>
               </li>
               <li>
@@ -201,7 +200,7 @@ const Footer = () => {
                   onClick={() => window.scrollTo(0, 0)}
                 >
                   <i className="fas fa-chevron-right text-xs mr-2 text-primary-500"></i>
-                  {ReportText}
+                  Report Concern
                 </Link>
               </li>
               <li>
@@ -211,16 +210,16 @@ const Footer = () => {
                   onClick={() => window.scrollTo(0, 0)}
                 >
                   <i className="fas fa-chevron-right text-xs mr-2 text-primary-500"></i>
-                  {FAQText}
+                  FAQ
                 </Link>
               </li>
             </ul>
-          </div>
+          </nav>
 
           {/* Contact */}
           <div className="mt-4 sm:mt-0">
             <h3 className="text-lg font-semibold mb-4 sm:mb-6 text-white inline-block border-b-2 border-primary-500 pb-1">
-              {contactUsText}
+              Contact Us
             </h3>
             <ul className="space-y-4 text-neutral-400">
               <li className="flex items-start justify-center sm:justify-start group">
@@ -229,28 +228,22 @@ const Footer = () => {
                   123 Rent Street, City, Country
                 </span>
               </li>
-              <li className="flex items-center justify-center sm:justify-start group">
-                <i className="fas fa-phone-alt mr-3 text-primary-500 group-hover:scale-110 transition-transform duration-300"></i>
-                <a
-                  href="tel:+11234567890"
-                  className="group-hover:text-neutral-300 transition-colors duration-300"
-                >
-                  +1 (123) 456-7890
-                </a>
+              <li>
+                <Link to="/cancellation" className="group text-neutral-400 hover:text-primary-400 text-sm transition-colors duration-200 flex items-center" onClick={() => window.scrollTo(0, 0)}>
+                  <span className="inline-block w-0 h-0.5 bg-primary-400 mr-2 group-hover:w-4 transition-all duration-300"></span>
+                  Cancellation
+                </Link>
               </li>
-              <li className="flex items-center justify-center sm:justify-start group">
-                <i className="fas fa-envelope mr-3 text-primary-500 group-hover:scale-110 transition-transform duration-300"></i>
-                <a
-                  href="mailto:info@smartrentsystem.com"
-                  className="group-hover:text-neutral-300 transition-colors duration-300"
-                >
-                  info@smartrentsystem.com
-                </a>
+              <li>
+                <Link to="/report-concern" className="group text-neutral-400 hover:text-primary-400 text-sm transition-colors duration-200 flex items-center" onClick={() => window.scrollTo(0, 0)}>
+                  <span className="inline-block w-0 h-0.5 bg-primary-400 mr-2 group-hover:w-4 transition-all duration-300"></span>
+                  Report Issue
+                </Link>
               </li>
             </ul>
             <div className="mt-8">
               <h4 className="text-sm font-semibold mb-4 text-white">
-                {subscribeText}
+                Subscribe to Newsletter
               </h4>
               <form onSubmit={handleSubscribe} className="space-y-2">
                 <div className="flex max-w-sm mx-auto sm:mx-0 group focus-within:scale-[1.02] transition-transform duration-300">
@@ -325,7 +318,7 @@ const Footer = () => {
               className="text-neutral-400 hover:text-primary-400 text-sm transition-all duration-300 hover:translate-y-[-1px]"
               onClick={() => window.scrollTo(0, 0)}
             >
-              {privacyPolicyText}
+              Privacy Policy
             </Link>
             <span className="hidden sm:block text-neutral-600">•</span>
             <Link
@@ -333,7 +326,7 @@ const Footer = () => {
               className="text-neutral-400 hover:text-primary-400 text-sm transition-all duration-300 hover:translate-y-[-1px]"
               onClick={() => window.scrollTo(0, 0)}
             >
-              {termsOFServiceText}
+              Terms of Service
             </Link>
             <span className="hidden sm:block text-neutral-600">•</span>
             <Link
@@ -341,7 +334,7 @@ const Footer = () => {
               className="text-neutral-400 hover:text-primary-400 text-sm transition-all duration-300 hover:translate-y-[-1px]"
               onClick={() => window.scrollTo(0, 0)}
             >
-              {cookiePolicyText}
+              Cookie Policy
             </Link>
           </div>
         </div>
diff --git a/frontend/src/pages/Home.jsx b/frontend/src/pages/Home.jsx
index 6ae5a67..8bf5766 100644
--- a/frontend/src/pages/Home.jsx
+++ b/frontend/src/pages/Home.jsx
@@ -146,6 +146,13 @@ const Home = () => {
     setRecentSearches([]);
   };
 
+  // Quick random property type navigation for the 'Surprise me' CTA
+  const surpriseMe = () => {
+    const types = ["apartment", "house", "cabin", "villa"];
+    const t = types[Math.floor(Math.random() * types.length)];
+    navigate(`/listings?type=${t}`);
+  }; 
+
   
   // Sample featured destinations data
   const destinations = [
@@ -331,80 +338,76 @@ const Home = () => {
             {uniqueAccommodationsText}
           </p>
 
-          {/* Property types grid */}
-          <div className="grid grid-cols-2 md:grid-cols-4 gap-6">
-            {/* Apartments property type */}
-            <Link to="/listings?type=apartment" className="group">
-              <div className="rounded-xl overflow-hidden">
-                <div className="h-60 relative overflow-hidden">
-                  <img
-                    src="https://images.unsplash.com/photo-1502672260266-1c1ef2d93688?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80"
-                    alt="Apartments"
-                    className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500"
-                  />
-                </div>
-                <div className="p-3">
-                  <h3 className="text-lg font-medium text-neutral-800 group-hover:text-primary-500 transition duration-300">
-                    {apartmentsText}
-                  </h3>
-                  <p className="text-neutral-600 text-sm">{urbanComfortText}</p>
-                </div>
-              </div>
-            </Link>
-            {/* Houses property type */}
-            <Link to="/listings?type=house" className="group">
-              <div className="rounded-xl overflow-hidden">
-                <div className="h-60 relative overflow-hidden">
-                  <img
-                    src="https://images.unsplash.com/photo-1564013799919-ab600027ffc6?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80"
-                    alt="Houses"
-                    className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500"
-                  />
-                </div>
-                <div className="p-3">
-                  <h3 className="text-lg font-medium text-neutral-800 group-hover:text-primary-500 transition duration-300">
-                    {housesText}
-                  </h3>
-                  <p className="text-neutral-600 text-sm">{entireHomesText}</p>
+          {/* Redesigned property types with a featured card + compact cards */}
+          <div className="grid grid-cols-1 lg:grid-cols-3 gap-6 items-stretch">
+            {/* Featured wide card */}
+            <Link to="/listings" className="group col-span-1 lg:col-span-2 focus:outline-none focus:ring-2 focus:ring-primary-500 rounded-2xl">
+              <div className="relative rounded-2xl overflow-hidden h-96 shadow-card hover:shadow-card-hover transition-transform duration-500 transform-gpu group-hover:-translate-y-1">
+                <img
+                  src="https://images.unsplash.com/photo-1522708323590-d24dbb6b0267?auto=format&fit=crop&w=1400&q=80"
+                  alt="Featured stays"
+                  className="w-full h-full object-cover"
+                />
+                <div className="absolute inset-0 bg-gradient-to-t from-black/65 via-black/30 to-transparent"></div>
+                <div className="absolute left-6 bottom-6 text-white">
+                  <span className="inline-flex items-center gap-2 bg-white/10 px-3 py-1 rounded-full text-sm backdrop-blur-sm">
+                    <MapPin className="w-4 h-4" /> {apartmentsText} • {housesText}
+                  </span>
+                  <h3 className="text-3xl font-bold mt-3">{stayAnywhereText}</h3>
+                  <p className="mt-2 max-w-lg text-white/90">From cozy cabins to luxury villas — find the perfect stay for every trip.</p>
+                  <div className="mt-4 flex items-center gap-3">
+                    <Link to="/listings" className="bg-white text-primary-600 px-4 py-2 rounded-lg font-medium hover:bg-white/90 transition focus:outline-none focus:ring-2 focus:ring-primary-500">Browse stays</Link>
+                    <button onClick={surpriseMe} className="bg-white/10 border border-white/20 text-white px-3 py-2 rounded-lg hover:bg-white/5 transition focus:outline-none focus:ring-2 focus:ring-white/30">Surprise me</button>
+                  </div>
                 </div>
               </div>
             </Link>
-            {/* Cabins property type */}
-            <Link to="/listings?type=cabin" className="group">
-              <div className="rounded-xl overflow-hidden">
-                <div className="h-60 relative overflow-hidden">
-                  <img
-                    src="https://images.unsplash.com/photo-1470240731273-7821a6eeb6bd?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80"
-                    alt="Cabins"
-                    className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500"
-                  />
-                </div>
-                <div className="p-3">
-                  <h3 className="text-lg font-medium text-neutral-800 group-hover:text-primary-500 transition duration-300">
-                    {cabinsText}
-                  </h3>
-                  <p className="text-neutral-600 text-sm">{rusticRetreatsText}</p>
+
+            {/* Compact cards stack */}
+            <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-1 gap-6">
+              <Link to="/listings?type=cabin" className="group focus:outline-none focus:ring-2 focus:ring-primary-500 rounded-xl">
+                <div className="rounded-xl overflow-hidden h-44 shadow-card hover:shadow-card-hover transition duration-300 transform-gpu group-hover:scale-105">
+                  <div className="h-full relative">
+                    <img
+                      src="https://images.unsplash.com/photo-1470240731273-7821a6eeb6bd?auto=format&fit=crop&w=800&q=60"
+                      alt="Cabins"
+                      className="w-full h-full object-cover"
+                    />
+                    <div className="absolute inset-0 bg-gradient-to-t from-black/50"></div>
+                    <div className="absolute left-4 bottom-4 text-white">
+                      <h4 className="font-semibold">{cabinsText}</h4>
+                      <p className="text-sm text-white/90">{rusticRetreatsText}</p>
+                    </div>
+                  </div>
                 </div>
-              </div>
-            </Link>
-            {/* Villas property type */}
-            <Link to="/listings?type=villa" className="group">
-              <div className="rounded-xl overflow-hidden">
-                <div className="h-60 relative overflow-hidden">
-                  <img
-                    src="https://images.unsplash.com/photo-1520250497591-112f2f40a3f4?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80"
-                    alt="Villas"
-                    className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500"
-                  />
+              </Link>
+
+              <Link to="/listings?type=villa" className="group focus:outline-none focus:ring-2 focus:ring-primary-500 rounded-xl">
+                <div className="rounded-xl overflow-hidden h-44 shadow-card hover:shadow-card-hover transition duration-300 transform-gpu group-hover:scale-105">
+                  <div className="h-full relative">
+                    <img
+                      src="https://images.unsplash.com/photo-1520250497591-112f2f40a3f4?auto=format&fit=crop&w=800&q=60"
+                      alt="Villas"
+                      className="w-full h-full object-cover"
+                    />
+                    <div className="absolute inset-0 bg-gradient-to-t from-black/40"></div>
+                    <div className="absolute left-4 bottom-4 text-white">
+                      <h4 className="font-semibold">{villasText}</h4>
+                      <p className="text-sm text-white/90">{luxuryStaysText}</p>
+                    </div>
+                  </div>
                 </div>
-                <div className="p-3">
-                  <h3 className="text-lg font-medium text-neutral-800 group-hover:text-primary-500 transition duration-300">
-                    {villasText}
-                  </h3>
-                  <p className="text-neutral-600 text-sm">{luxuryStaysText}</p>
+              </Link>
+
+              {/* Surprise card */}
+              <button onClick={surpriseMe} className="group rounded-xl overflow-hidden h-44 shadow-card hover:shadow-card-hover transition duration-300 transform-gpu hover:scale-105 bg-gradient-to-t from-primary-600 to-primary-500 text-white flex items-center justify-center focus:outline-none focus:ring-2 focus:ring-primary-500">
+                <div className="text-center p-4">
+                  <h4 className="text-lg font-semibold">Feeling adventurous?</h4>
+                  <p className="text-sm opacity-90">Let us pick a stay for you</p>
+                  <span className="mt-3 inline-block bg-white/20 px-3 py-1 rounded-full text-sm">Try it</span>
                 </div>
-              </div>
-            </Link>
+              </button>
+            </div>
           </div>
         </div>
       </div>