diff --git a/app/globals.css b/app/globals.css
index 8d44cb5..fc6563b 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -102,6 +102,15 @@
   }
 }
 
+@keyframes slide-up {
+  from {
+    transform: translateY(100%);
+  }
+  to {
+    transform: translateY(0);
+  }
+}
+
 .animate-float {
   animation: float 6s ease-in-out infinite;
 }
@@ -111,6 +120,10 @@
   animation-delay: 2s;
 }
 
+.animate-slide-up {
+  animation: slide-up 0.3s ease-out forwards;
+}
+
 /* Smooth Scrolling */
 html {
   scroll-behavior: smooth;
diff --git a/app/layout.tsx b/app/layout.tsx
index 820f4c0..260cf4a 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -26,7 +26,7 @@ export default function RootLayout({
           <body className={inter.className}>
             <Navbar />
             <main className="min-h-screen">{children}</main>
-            <Footer />
+            <Footer showScrollToTop={false} />
           </body>
         </html>
       </StoreProvider>
diff --git a/app/page.tsx b/app/page.tsx
index 0906fcd..445043b 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -4,16 +4,21 @@ import FeatureCards from '@/components/FeatureCards';
 import ChatSection from '@/components/ChatSection';
 import StatsSection from '@/components/StatsSection';
 import Destination from '@/components/Destination/Destination';
+import ScreenshotSection from '@/components/ScreenshotSection';
+import Newsletter from '@/components/NewsLetter';
 
 export default function Home() {
   return (
     <main className="min-h-screen bg-white">
       <Hero />
+      <ScreenshotSection />
       <Destination />
+
       {/* <Hotel /> */}
       <FeatureCards />
       <ChatSection />
       <StatsSection />
+      <Newsletter />
     </main>
   );
 }
diff --git a/components/Footer.tsx b/components/Footer.tsx
index d91978b..7e3eaa8 100644
--- a/components/Footer.tsx
+++ b/components/Footer.tsx
@@ -19,13 +19,23 @@ import {
 } from 'lucide-react';
 import Link from 'next/link';
 
-export default function Footer() {
+interface FooterProps {
+  className?: string;
+  showScrollToTop?: boolean;
+}
+
+export default function Footer({
+  className = '',
+  showScrollToTop = true,
+}: FooterProps) {
   const scrollToTop = () => {
     window.scrollTo({ top: 0, behavior: 'smooth' });
   };
 
   return (
-    <footer className="bg-gradient-to-br from-gray-900 via-gray-800 to-gray-900 text-white">
+    <footer
+      className={`bg-gradient-to-br from-gray-900 via-gray-800 to-gray-900 text-white ${className}`}
+    >
       {/* Main Footer Content */}
       <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16">
         <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
@@ -250,29 +260,6 @@ export default function Footer() {
             </div>
           </div>
         </div>
-
-        {/* Newsletter Subscription */}
-        <div className="mt-12 pt-8 border-t border-gray-700">
-          <div className="max-w-2xl mx-auto text-center">
-            <h4 className="text-xl font-semibold text-white mb-3">
-              Stay Updated with Latest Properties
-            </h4>
-            <p className="text-gray-300 mb-6">
-              Subscribe to our newsletter for exclusive property listings and
-              market insights
-            </p>
-            <div className="flex flex-col sm:flex-row gap-3 max-w-md mx-auto">
-              <input
-                type="email"
-                placeholder="Enter your email address"
-                className="flex-1 px-4 py-3 bg-gray-800 border border-gray-600 rounded-lg focus:outline-none focus:border-emerald-400 text-white placeholder-gray-400"
-              />
-              <button className="px-6 py-3 bg-emerald-500 hover:bg-emerald-600 text-white font-semibold rounded-lg transition-colors duration-200">
-                Subscribe
-              </button>
-            </div>
-          </div>
-        </div>
       </div>
 
       {/* Bottom Bar */}
@@ -319,13 +306,15 @@ export default function Footer() {
       </div>
 
       {/* Scroll to Top Button */}
-      <button
-        onClick={scrollToTop}
-        className="fixed bottom-6 right-6 w-12 h-12 bg-emerald-500 hover:bg-emerald-600 text-white rounded-full shadow-lg flex items-center justify-center transition-all duration-200 hover:scale-110 z-50"
-        aria-label="Scroll to top"
-      >
-        <ArrowUp className="w-6 h-6" />
-      </button>
+      {showScrollToTop && (
+        <button
+          onClick={scrollToTop}
+          className="fixed bottom-6 right-6 w-12 h-12 bg-emerald-500 hover:bg-emerald-600 text-white rounded-full shadow-lg flex items-center justify-center transition-all duration-200 hover:scale-110 z-50"
+          aria-label="Scroll to top"
+        >
+          <ArrowUp className="w-6 h-6" />
+        </button>
+      )}
     </footer>
   );
 }
diff --git a/components/FooterWithNewsletter.tsx b/components/FooterWithNewsletter.tsx
new file mode 100644
index 0000000..a88732b
--- /dev/null
+++ b/components/FooterWithNewsletter.tsx
@@ -0,0 +1,23 @@
+'use client';
+
+import Footer from './Footer';
+import Newsletter from './NewsLetter';
+
+interface FooterWithNewsletterProps {
+  className?: string;
+  showScrollToTop?: boolean;
+  newsletterVariant?: 'default' | 'compact';
+}
+
+export default function FooterWithNewsletter({
+  className = '',
+  showScrollToTop = true,
+  newsletterVariant = 'default',
+}: FooterWithNewsletterProps) {
+  return (
+    <>
+      <Newsletter variant={newsletterVariant} />
+      <Footer className={className} showScrollToTop={showScrollToTop} />
+    </>
+  );
+}
diff --git a/components/Hero.tsx b/components/Hero.tsx
index 0177e67..02a7f01 100644
--- a/components/Hero.tsx
+++ b/components/Hero.tsx
@@ -3,31 +3,34 @@ import SearchBox from './SearchBarComp/SearchBox';
 
 export default function Hero() {
   return (
-    <section className="relative mt-20 px-4">
-      <div className="relative bg-gradient-to-br from-purple-600 via-purple-700 to-purple-800 rounded-3xl px-6 sm:px-10 py-16 sm:py-24 max-w-7xl mx-auto shadow-lg overflow-hidden">
+    <section className="relative mt-16 sm:mt-20 px-3 sm:px-4">
+      <div className="relative bg-gradient-to-br from-purple-600 via-purple-700 to-purple-800 rounded-2xl sm:rounded-3xl px-4 sm:px-6 lg:px-10 py-12 sm:py-16 lg:py-24 max-w-7xl mx-auto shadow-lg overflow-hidden">
         <div className="absolute inset-0 z-0">
-          <div className="absolute top-20 sm:top-32 right-10 sm:right-20 w-3 h-3 sm:w-4 sm:h-4 bg-yellow-400 rounded-full animate-pulse"></div>
+          {/* Animated dots - adjusted for mobile */}
+          <div className="absolute top-16 sm:top-20 lg:top-32 right-6 sm:right-10 lg:right-20 w-2 h-2 sm:w-3 sm:h-3 lg:w-4 lg:h-4 bg-yellow-400 rounded-full animate-pulse"></div>
           <div
-            className="absolute top-32 sm:top-48 right-20 sm:right-32 w-2 h-2 sm:w-3 sm:h-3 bg-green-400 rounded-full animate-pulse"
+            className="absolute top-24 sm:top-32 lg:top-48 right-12 sm:right-20 lg:right-32 w-1.5 h-1.5 sm:w-2 sm:h-2 lg:w-3 lg:h-3 bg-green-400 rounded-full animate-pulse"
             style={{ animationDelay: '1s' }}
           ></div>
           <div
-            className="absolute top-48 sm:top-64 right-8 sm:right-16 w-2 h-2 bg-blue-400 rounded-full animate-pulse"
+            className="absolute top-32 sm:top-48 lg:top-64 right-4 sm:right-8 lg:right-16 w-1.5 h-1.5 sm:w-2 sm:h-2 bg-blue-400 rounded-full animate-pulse"
             style={{ animationDelay: '2s' }}
           ></div>
           <div
-            className="absolute top-56 sm:top-80 right-24 sm:right-40 w-3 h-3 sm:w-5 sm:h-5 bg-pink-400 rounded-full animate-pulse"
+            className="absolute top-40 sm:top-56 lg:top-80 right-16 sm:right-24 lg:right-40 w-2 h-2 sm:w-3 sm:h-3 lg:w-5 lg:h-5 bg-pink-400 rounded-full animate-pulse"
             style={{ animationDelay: '0.5s' }}
           ></div>
           <div
-            className="absolute top-64 sm:top-96 right-12 sm:right-24 w-2 h-2 sm:w-3 sm:h-3 bg-orange-400 rounded-full animate-pulse"
+            className="absolute top-48 sm:top-64 lg:top-96 right-8 sm:right-12 lg:right-24 w-1.5 h-1.5 sm:w-2 sm:h-2 lg:w-3 lg:h-3 bg-orange-400 rounded-full animate-pulse"
             style={{ animationDelay: '1.5s' }}
           ></div>
 
+          {/* Border circles - hidden on mobile for cleaner look */}
           <div className="hidden sm:block absolute top-40 right-8 w-6 h-6 sm:w-8 sm:h-8 border-2 border-white/20 rounded-full"></div>
           <div className="hidden sm:block absolute top-72 right-12 w-4 h-4 sm:w-6 sm:h-6 border-2 border-white/30 rounded-full"></div>
           <div className="hidden sm:block absolute bottom-40 right-20 w-3 h-3 sm:w-4 sm:h-4 border-2 border-white/25 rounded-full"></div>
 
+          {/* Desktop floating cards */}
           <div className="hidden lg:block absolute top-32 right-20 animate-float">
             <div className="bg-white/90 backdrop-blur-sm rounded-2xl p-4 shadow-lg transform rotate-12 hover:rotate-6 transition-transform duration-700">
               <div className="w-16 h-12 bg-gradient-to-r from-blue-400 to-purple-400 rounded-lg mb-2"></div>
@@ -56,21 +59,22 @@ export default function Hero() {
             </div>
           </div>
 
-          <div className="lg:hidden absolute top-24 right-4 animate-float">
-            <div className="bg-white/90 backdrop-blur-sm rounded-xl p-2 shadow-lg transform rotate-12">
-              <div className="w-8 h-6 bg-gradient-to-r from-blue-400 to-purple-400 rounded mb-1"></div>
+          {/* Mobile floating cards - simplified and better positioned */}
+          <div className="lg:hidden absolute top-20 sm:top-24 right-3 sm:right-4 animate-float">
+            <div className="bg-white/90 backdrop-blur-sm rounded-lg sm:rounded-xl p-2 sm:p-3 shadow-lg transform rotate-6 sm:rotate-12">
+              <div className="w-6 h-4 sm:w-8 sm:h-6 bg-gradient-to-r from-blue-400 to-purple-400 rounded mb-1"></div>
               <p className="text-xs font-medium text-gray-800">Villa</p>
             </div>
           </div>
 
-          <div className="lg:hidden absolute top-48 right-8 animate-float-delayed">
-            <div className="bg-white/90 backdrop-blur-sm rounded-xl p-2 shadow-lg transform -rotate-12">
-              <div className="w-8 h-6 bg-gradient-to-r from-green-400 to-blue-400 rounded mb-1"></div>
+          <div className="lg:hidden absolute top-36 sm:top-48 right-6 sm:right-8 animate-float-delayed">
+            <div className="bg-white/90 backdrop-blur-sm rounded-lg sm:rounded-xl p-2 sm:p-3 shadow-lg transform -rotate-6 sm:-rotate-12">
+              <div className="w-6 h-4 sm:w-8 sm:h-6 bg-gradient-to-r from-green-400 to-blue-400 rounded mb-1"></div>
               <p className="text-xs font-medium text-gray-800">Apartment</p>
             </div>
           </div>
 
-          {/* Chat Bubbles */}
+          {/* Chat Bubbles - hidden on mobile for cleaner look */}
           <div className="hidden md:block absolute top-32 sm:top-40 right-20 sm:right-32 bg-white/90 backdrop-blur-sm rounded-2xl p-2 sm:p-3 shadow-lg animate-float">
             <p className="text-xs font-medium text-gray-800">
               Property tour, 3pm?
@@ -90,15 +94,15 @@ export default function Hero() {
 
         {/* Main Heading & Text */}
         <div className="relative z-10 text-center text-white">
-          <h1 className="text-3xl sm:text-4xl md:text-5xl lg:text-6xl font-bold mb-4">
+          <h1 className="text-2xl sm:text-3xl md:text-4xl lg:text-5xl xl:text-6xl font-bold mb-3 sm:mb-4 leading-tight">
             Find your dream <span className="text-white">property.</span>
           </h1>
-          <p className="text-lg sm:text-xl md:text-2xl text-purple-100 max-w-3xl mx-auto px-4">
+          <p className="text-base sm:text-lg md:text-xl lg:text-2xl text-purple-100 max-w-2xl sm:max-w-3xl mx-auto px-2 sm:px-4 leading-relaxed">
             Choose where to live and we&lsquo;ll show you the perfect home!
           </p>
 
-          {/* Dashed Arrow */}
-          <div className="hidden sm:flex justify-center my-6">
+          {/* Dashed Arrow - hidden on mobile for cleaner look */}
+          <div className="hidden sm:flex justify-center my-4 sm:my-6">
             <svg
               width="120"
               height="60"
@@ -121,11 +125,11 @@ export default function Hero() {
             </svg>
           </div>
 
-          <div className="mt-8 sm:mt-12">
-            <div className="inline-flex items-center space-x-2 bg-white/10 backdrop-blur-sm rounded-full px-4 sm:px-6 py-2 sm:py-3 text-white">
-              <div className="w-5 h-5 sm:w-6 sm:h-6 bg-green-500 rounded-full flex items-center justify-center">
+          <div className="mt-6 sm:mt-8 lg:mt-12">
+            <div className="inline-flex items-center space-x-2 bg-white/10 backdrop-blur-sm rounded-full px-3 sm:px-4 lg:px-6 py-2 sm:py-3 text-white">
+              <div className="w-4 h-4 sm:w-5 sm:h-5 lg:w-6 lg:h-6 bg-green-500 rounded-full flex items-center justify-center flex-shrink-0">
                 <svg
-                  className="w-3 h-3 sm:w-4 sm:h-4 text-white"
+                  className="w-2.5 h-2.5 sm:w-3 sm:h-3 lg:w-4 lg:h-4 text-white"
                   fill="currentColor"
                   viewBox="0 0 20 20"
                 >
@@ -136,7 +140,7 @@ export default function Hero() {
                   />
                 </svg>
               </div>
-              <span className="text-sm sm:text-base font-medium">
+              <span className="text-xs sm:text-sm lg:text-base font-medium leading-tight">
                 Free Consultation & Flexible Booking available
               </span>
             </div>
@@ -144,7 +148,8 @@ export default function Hero() {
         </div>
       </div>
 
-      <div className="relative max-w-4xl mx-auto -mt-10 z-10">
+      {/* Search Box - adjusted positioning for mobile */}
+      <div className="relative max-w-4xl mx-auto -mt-6 sm:-mt-8 lg:-mt-10 z-10 px-2 sm:px-4">
         <SearchBox />
       </div>
     </section>
diff --git a/components/NewsLetter.tsx b/components/NewsLetter.tsx
new file mode 100644
index 0000000..b2924ce
--- /dev/null
+++ b/components/NewsLetter.tsx
@@ -0,0 +1,115 @@
+'use client';
+
+import { useState } from 'react';
+
+interface NewsletterProps {
+  className?: string;
+  variant?: 'default' | 'compact';
+}
+
+export default function Newsletter({
+  className = '',
+  variant = 'default',
+}: NewsletterProps) {
+  const [email, setEmail] = useState('');
+  const [isSubscribed, setIsSubscribed] = useState(false);
+
+  const handleSubscribe = (e: React.FormEvent) => {
+    e.preventDefault();
+    if (email) {
+      // Here you would typically make an API call to subscribe
+      console.log('Subscribing email:', email);
+      setIsSubscribed(true);
+      setEmail('');
+      // Reset after 3 seconds
+      setTimeout(() => setIsSubscribed(false), 3000);
+    }
+  };
+
+  if (variant === 'compact') {
+    return (
+      <div className={`bg-gray-800 border-t border-gray-700 ${className}`}>
+        <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
+          <div className="flex flex-col sm:flex-row items-center justify-between gap-4">
+            <div className="text-center sm:text-left">
+              <h4 className="text-lg font-semibold text-white mb-2">
+                Stay Updated with Latest Properties
+              </h4>
+              <p className="text-gray-300 text-sm">
+                Get exclusive property listings and market insights
+              </p>
+            </div>
+            <form
+              onSubmit={handleSubscribe}
+              className="flex gap-3 min-w-0 flex-1 sm:max-w-xs"
+            >
+              <input
+                type="email"
+                value={email}
+                onChange={e => setEmail(e.target.value)}
+                placeholder="Enter your email"
+                className="flex-1 px-4 py-2 bg-gray-700 border border-gray-600 rounded-lg focus:outline-none focus:border-emerald-400 text-white placeholder-gray-400 text-sm"
+                required
+              />
+              <button
+                type="submit"
+                className="px-4 py-2 bg-emerald-500 hover:bg-emerald-600 text-white font-medium rounded-lg transition-colors duration-200 text-sm whitespace-nowrap"
+              >
+                Subscribe
+              </button>
+            </form>
+          </div>
+          {isSubscribed && (
+            <div className="mt-3 text-center sm:text-left">
+              <p className="text-emerald-400 text-sm">
+                Thank you for subscribing!
+              </p>
+            </div>
+          )}
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className={`bg-gray-800 border-t border-gray-700 ${className}`}>
+      <div className="max-w-2xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
+        <div className="text-center">
+          <h4 className="text-xl font-semibold text-white mb-3">
+            Stay Updated with Latest Properties
+          </h4>
+          <p className="text-gray-300 mb-6">
+            Subscribe to our newsletter for exclusive property listings and
+            market insights
+          </p>
+          <form
+            onSubmit={handleSubscribe}
+            className="flex flex-col sm:flex-row gap-3 max-w-md mx-auto"
+          >
+            <input
+              type="email"
+              value={email}
+              onChange={e => setEmail(e.target.value)}
+              placeholder="Enter your email address"
+              className="flex-1 px-4 py-3 bg-gray-700 border border-gray-600 rounded-lg focus:outline-none focus:border-emerald-400 text-white placeholder-gray-400"
+              required
+            />
+            <button
+              type="submit"
+              className="px-6 py-3 bg-emerald-500 hover:bg-emerald-600 text-white font-semibold rounded-lg transition-colors duration-200"
+            >
+              Subscribe
+            </button>
+          </form>
+          {isSubscribed && (
+            <div className="mt-3">
+              <p className="text-emerald-400 text-sm">
+                Thank you for subscribing to our newsletter!
+              </p>
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/components/ScreenshotSection.tsx b/components/ScreenshotSection.tsx
new file mode 100644
index 0000000..6b31f34
--- /dev/null
+++ b/components/ScreenshotSection.tsx
@@ -0,0 +1,74 @@
+import Image from 'next/image';
+
+const screenshots = [
+  {
+    title: 'View Traveller Profiles',
+    subtitle: "See who's going!",
+    image: '/images/u1.png',
+    bg: 'bg-amber-400',
+  },
+  {
+    title: "Join your hostel's Chat",
+    subtitle: 'Chat with travellers 14 days before check-in',
+    image: '/images/u2.png',
+    bg: 'bg-cyan-400',
+  },
+  {
+    title: 'RSVP to Linkups',
+    subtitle: 'Explore and hang out with travellers.',
+    image: '/images/u3.png',
+    bg: 'bg-blue-600',
+  },
+  {
+    title: 'RSVP to Linkups',
+    subtitle: 'Explore and hang out with travellers.',
+    image: '/images/u3.png',
+    bg: 'bg-blue-600',
+  },
+];
+
+export default function ScreenshotSection() {
+  return (
+    <section className="py-12 px-4 max-w-7xl mx-auto">
+      <div
+        className="flex flex-col md:flex-row gap-6 justify-center items-stretch md:overflow-visible overflow-x-auto"
+        style={{ WebkitOverflowScrolling: 'touch' }}
+      >
+        <div className="flex md:flex-row flex-row md:w-full w-max gap-6 md:gap-6 snap-x snap-mandatory">
+          {screenshots.map((shot, idx) => (
+            <div
+              key={idx}
+              className={`relative flex-shrink-0 flex-1 md:min-w-0 min-w-[80vw] max-w-xs rounded-2xl p-6 flex flex-col items-center shadow-lg ${shot.bg} snap-center`}
+              style={{ minHeight: 480 }}
+            >
+              <div
+                className="absolute left-0 top-0 -translate-y-1/4 -translate-x-1/8 z-10"
+                style={{ transform: 'translate(-12px, -24px) rotate(-3deg)' }}
+              >
+                <div className="bg-white rounded-md px-6 py-3 shadow-md">
+                  <h3 className="font-bold text-2xl text-black mb-1 leading-tight">
+                    {shot.title}
+                  </h3>
+                  <p className="text-black text-base leading-tight">
+                    {shot.subtitle}
+                  </p>
+                </div>
+              </div>
+              <div className="w-full flex justify-center mb-4 mt-12">
+                <div className=" rounded-3xl p-2 w-full h-full flex items-center justify-center overflow-hidden">
+                  <Image
+                    src={shot.image}
+                    alt={shot.title}
+                    width={200}
+                    height={400}
+                    className="object-cover rounded-xl"
+                  />
+                </div>
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+}
diff --git a/components/SearchBarComp/DestinationInput.tsx b/components/SearchBarComp/DestinationInput.tsx
index 7ddd29c..00cf59a 100644
--- a/components/SearchBarComp/DestinationInput.tsx
+++ b/components/SearchBarComp/DestinationInput.tsx
@@ -7,11 +7,15 @@ import { MapPin } from 'lucide-react';
 interface DestinationInputProps {
   value: string;
   onChange: (value: string) => void;
+  readOnly?: boolean;
+  placeholder?: string;
 }
 
 const DestinationInput: React.FC<DestinationInputProps> = ({
   value,
   onChange,
+  readOnly = false,
+  placeholder = 'Enter destination',
 }) => {
   const suggestions = [
     'New York, USA',
@@ -50,12 +54,13 @@ const DestinationInput: React.FC<DestinationInputProps> = ({
         <MapPin className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 w-4 h-4" />
         <Input
           type="text"
-          placeholder="Enter destination"
+          placeholder={placeholder}
           value={value}
           onChange={handleInputChange}
-          onFocus={() => setShowSuggestions(value.length > 0)}
+          onFocus={() => !readOnly && setShowSuggestions(value.length > 0)}
           onBlur={() => setTimeout(() => setShowSuggestions(false), 200)}
           className="pl-10 h-12 border-gray-300 focus:border-blue-500 focus:ring-blue-500"
+          readOnly={readOnly}
         />
       </div>
 
diff --git a/components/SearchBarComp/SearchBox.tsx b/components/SearchBarComp/SearchBox.tsx
index 39a7398..4c81c03 100644
--- a/components/SearchBarComp/SearchBox.tsx
+++ b/components/SearchBarComp/SearchBox.tsx
@@ -2,7 +2,7 @@
 import React, { useState } from 'react';
 import { Button } from '@/components/ui/button';
 import { Card } from '@/components/ui/card';
-import { Search } from 'lucide-react';
+import { Search, X, ArrowRight } from 'lucide-react';
 import DestinationInput from './DestinationInput';
 import DateSelector from './DateSelector';
 import GuestRoomSelector from './GuestRoomSelector';
@@ -13,6 +13,7 @@ const SearchBox = () => {
   const [checkOut, setCheckOut] = useState<Date>();
   const [guests, setGuests] = useState({ adults: 2, children: 0 });
   const [rooms, setRooms] = useState(1);
+  const [isMobileOverlayOpen, setIsMobileOverlayOpen] = useState(false);
 
   const handleSearch = () => {
     console.log('Search initiated with:', {
@@ -22,54 +23,182 @@ const SearchBox = () => {
       guests,
       rooms,
     });
+    // Close mobile overlay after search
+    setIsMobileOverlayOpen(false);
+  };
+
+  const handleDestinationClick = () => {
+    setIsMobileOverlayOpen(true);
+  };
+
+  const closeMobileOverlay = () => {
+    setIsMobileOverlayOpen(false);
   };
 
   return (
-    <Card className="bg-white rounded-xl p-4 shadow-2xl border-0">
-      <div className="flex flex-col md:flex-row items-stretch md:items-center gap-3 md:gap-2">
-        <div className="w-full md:flex-1">
-          <DestinationInput value={destination} onChange={setDestination} />
-        </div>
+    <>
+      {/* Desktop/Tablet View - Full Search Box */}
+      <div className="hidden md:block">
+        <Card className="bg-white rounded-xl p-4 shadow-2xl border-0">
+          <div className="flex flex-row items-center gap-2">
+            <div className="flex-1">
+              <DestinationInput value={destination} onChange={setDestination} />
+            </div>
 
-        <div className="w-full md:flex-1 flex flex-col sm:flex-row gap-3 sm:gap-2">
-          <div className="flex-1">
-            <DateSelector
-              date={checkIn}
-              onDateChange={setCheckIn}
-              placeholder="Check-in"
-              minDate={new Date()}
-            />
+            <div className="flex-1 flex gap-2">
+              <div className="flex-1">
+                <DateSelector
+                  date={checkIn}
+                  onDateChange={setCheckIn}
+                  placeholder="Check-in"
+                  minDate={new Date()}
+                />
+              </div>
+              <div className="flex-1">
+                <DateSelector
+                  date={checkOut}
+                  onDateChange={setCheckOut}
+                  placeholder="Check-out"
+                  minDate={checkIn || new Date()}
+                />
+              </div>
+            </div>
+
+            <div className="flex-1">
+              <GuestRoomSelector
+                guests={guests}
+                rooms={rooms}
+                onGuestsChange={setGuests}
+                onRoomsChange={setRooms}
+              />
+            </div>
+
+            <div className="w-auto">
+              <Button
+                onClick={handleSearch}
+                className="bg-gradient-to-r from-blue-600 to-indigo-600 hover:from-blue-700 hover:to-indigo-700 text-white px-8 py-3 rounded-lg font-semibold shadow-lg hover:shadow-xl transition-all duration-300"
+              >
+                <Search className="w-5 h-5 mr-2" />
+                Search
+              </Button>
+            </div>
           </div>
-          <div className="flex-1">
-            <DateSelector
-              date={checkOut}
-              onDateChange={setCheckOut}
-              placeholder="Check-out"
-              minDate={checkIn || new Date()}
-            />
+        </Card>
+      </div>
+
+      {/* Mobile View - Only Destination Input */}
+      <div className="md:hidden">
+        <Card className="bg-white rounded-xl p-4 shadow-2xl border-0">
+          <div className="flex items-center gap-3">
+            <div
+              className="cursor-pointer group hover:scale-[1.02] transition-transform duration-200 flex-1"
+              onClick={handleDestinationClick}
+            >
+              <div className="relative">
+                <DestinationInput
+                  value={destination}
+                  onChange={setDestination}
+                  readOnly={true}
+                  placeholder="Where are you going?"
+                />
+                <div className="absolute right-3 top-1/2 transform -translate-y-1/2">
+                  {/* <Search className="w-5 h-5 text-gray-400 group-hover:text-blue-500 transition-colors" /> */}
+                </div>
+              </div>
+            </div>
+
+            <Button
+              onClick={handleDestinationClick}
+              className="bg-gradient-to-r from-blue-600 to-indigo-600 hover:from-blue-700 hover:to-indigo-700 text-white p-3 rounded-lg font-semibold shadow-lg hover:shadow-xl transition-all duration-300 flex-shrink-0"
+            >
+              <ArrowRight className="w-5 h-5" />
+            </Button>
           </div>
-        </div>
+        </Card>
+      </div>
 
-        <div className="w-full md:flex-1">
-          <GuestRoomSelector
-            guests={guests}
-            rooms={rooms}
-            onGuestsChange={setGuests}
-            onRoomsChange={setRooms}
+      {/* Mobile Overlay */}
+      {isMobileOverlayOpen && (
+        <div className="md:hidden fixed inset-0 z-50">
+          {/* Backdrop */}
+          <div
+            className="absolute inset-0 bg-black bg-opacity-50"
+            onClick={closeMobileOverlay}
           />
-        </div>
 
-        <div className="w-full md:w-auto">
-          <Button
-            onClick={handleSearch}
-            className="w-full md:w-auto bg-gradient-to-r from-blue-600 to-indigo-600 hover:from-blue-700 hover:to-indigo-700 text-white px-8 py-3 rounded-lg font-semibold shadow-lg hover:shadow-xl transition-all duration-300"
-          >
-            <Search className="w-5 h-5 mr-2" />
-            Search
-          </Button>
+          {/* Animated Overlay */}
+          <div className="absolute bottom-0 left-0 right-0 bg-white rounded-t-3xl p-6 transform translate-y-full animate-slide-up">
+            {/* Close Button */}
+            <div className="flex justify-end mb-4">
+              <button
+                onClick={closeMobileOverlay}
+                className="p-2 rounded-full bg-gray-100 hover:bg-gray-200 transition-colors"
+              >
+                <X className="w-5 h-5" />
+              </button>
+            </div>
+
+            {/* Search Form */}
+            <div className="space-y-4">
+              <div>
+                <label className="block text-sm font-medium text-gray-700 mb-2">
+                  Destination
+                </label>
+                <DestinationInput
+                  value={destination}
+                  onChange={setDestination}
+                />
+              </div>
+
+              <div className="grid grid-cols-2 gap-3">
+                <div>
+                  <label className="block text-sm font-medium text-gray-700 mb-2">
+                    Check-in
+                  </label>
+                  <DateSelector
+                    date={checkIn}
+                    onDateChange={setCheckIn}
+                    placeholder="Check-in"
+                    minDate={new Date()}
+                  />
+                </div>
+                <div>
+                  <label className="block text-sm font-medium text-gray-700 mb-2">
+                    Check-out
+                  </label>
+                  <DateSelector
+                    date={checkOut}
+                    onDateChange={setCheckOut}
+                    placeholder="Check-out"
+                    minDate={checkIn || new Date()}
+                  />
+                </div>
+              </div>
+
+              <div>
+                <label className="block text-sm font-medium text-gray-700 mb-2">
+                  Guests & Rooms
+                </label>
+                <GuestRoomSelector
+                  guests={guests}
+                  rooms={rooms}
+                  onGuestsChange={setGuests}
+                  onRoomsChange={setRooms}
+                />
+              </div>
+
+              <Button
+                onClick={handleSearch}
+                className="w-full bg-gradient-to-r from-blue-600 to-indigo-600 hover:from-blue-700 hover:to-indigo-700 text-white py-3 rounded-lg font-semibold shadow-lg hover:shadow-xl transition-all duration-300"
+              >
+                <Search className="w-5 h-5 mr-2" />
+                Search
+              </Button>
+            </div>
+          </div>
         </div>
-      </div>
-    </Card>
+      )}
+    </>
   );
 };
 
diff --git a/public/images/u1.png b/public/images/u1.png
new file mode 100644
index 0000000..9f0040d
Binary files /dev/null and b/public/images/u1.png differ
diff --git a/public/images/u2.png b/public/images/u2.png
new file mode 100644
index 0000000..9f0040d
Binary files /dev/null and b/public/images/u2.png differ
diff --git a/public/images/u3.png b/public/images/u3.png
new file mode 100644
index 0000000..9f0040d
Binary files /dev/null and b/public/images/u3.png differ
