diff --git a/Frontend/icon1.jpg b/Frontend/icon1.jpg
new file mode 100644
index 0000000..bb8f9e2
Binary files /dev/null and b/Frontend/icon1.jpg differ
diff --git a/Frontend/index.html b/Frontend/index.html
index 9a578a6..4d3a607 100644
--- a/Frontend/index.html
+++ b/Frontend/index.html
@@ -20,6 +20,7 @@
     <div class="container">
       <!-- Krishna-->
       <div id="navbar">
+        
         <div class="menu-container">
           <div class="menu-flex">
               <img src="./Screenshot 2024-05-09 232128.png" class="logo"/>
@@ -34,8 +35,8 @@
           <div class="menu-flex">
               <div class="right-menu">
                   <div class="right-menu-item">
-                      <button class="menu-button">Airbnb your Home</button>
-                      <button class="menu-globe"><span class="material-icons globe">language</span></button>
+                      <button id="btn" class="menu-button">Airbnb your Home</button>
+                      <button id=" btn" class="menu-globe"><span class="material-icons globe">language</span></button>
                       <div class="button-icons"><span class="material-icons iconMenu">menu</span> <span class="material-icons iconUser">account_circle</span>
                       <i class="fa-solid fa-circle iconCircle"></i>
                       <div id="dropdownMenu" class="dropdown-content">
@@ -59,12 +60,20 @@
              </div>
              <div>
              <label>Check in</label>
+             <input type="datetime-local"
+               id="Test_DatetimeLocal"
+               min="2015-01-01T00:00"
+               max="2025-12-31T23:59"
+               step="1">
 
-              <input type="text" placeholder="Add Dates">
              </div>
              <div>
              <label>Check Out</label>
-              <input type="text" placeholder="Add Dates">
+             <input type="datetime-local"
+             id="Test_DatetimeLocal"
+             min="2015-01-01T00:00"
+             max="2025-12-31T23:59"
+             step="1">
              </div>
              <div>
               <label>Who</label>
@@ -78,18 +87,175 @@
             </form>
             </div>
       </div>
+      <div id="datePicker">
+        
+    </div>
         
       </div>
       <!-- Krishna-->
       <div id="top-carousel">
-        <div class=" d-flex alighn-items-center">
-          <div class="d-flex alighn-items-center">
-            <div class="d-flex flex-column ">
-              <img src="https://a0.muscache.com/im/pictures/mediaverse/category_icon/original/3e5243c8-4d15-4c6b-97e3-7ba2bb7bb880.png" alt="">
+        <div id="iconss">
+        <div class="d-flex">
+          
+            <div class="d-flex flex-column align-items-center gray-400">
+              <img src="icon1.jpg" alt="" class="img-fluid h-1 w-1">
+           <p class="fs-6 fw-normal">icons</p>
+            </div>
+            
+            <div class="d-flex flex-column align-items-center gray-400">
+              <img src="https://a0.muscache.com/pictures/3b1eb541-46d9-4bef-abc4-c37d77e3c21b.jpg" alt="" class="img-fluid h-1 w-1">
+           <p class="fs-6 fw-normal">Amazing views</p>
+            </div>
+            <div class="d-flex flex-column align-items-center gray-400">
+              <img src="https://a0.muscache.com/pictures/bcd1adc0-5cee-4d7a-85ec-f6730b0f8d0c.jpg" alt="" class="img-fluid h-1 w-1">
+           <p class="fs-6 fw-normal">Beachfront</p>
+            </div>
+            <div class="d-flex flex-column align-items-center gray-400">
+              <img src="https://a0.muscache.com/pictures/1b6a8b70-a3b6-48b5-88e1-2243d9172c06.jpg" alt="" class="img-fluid h-1 w-1">
+           <p class="fs-6 fw-normal">Castles</p>
+            </div>
+            <div class="d-flex flex-column align-items-center gray-400">
+              <img src="https://a0.muscache.com/pictures/8b44f770-7156-4c7b-b4d3-d92549c8652f.jpg" alt="" class="img-fluid h-1 w-1">
+           <p class="fs-6 fw-normal">Arctic</p>
+            </div>
+            <div class="d-flex flex-column align-items-center gray-400">
+              <img src="https://a0.muscache.com/pictures/3271df99-f071-4ecf-9128-eb2d2b1f50f0.jpg" alt="" class="img-fluid h-1 w-1">
+           <p class="fs-6 fw-normal">Tiney Homes</p>
+            </div>
+            <div class="d-flex flex-column align-items-center gray-400">
+              <img src="https://a0.muscache.com/pictures/3fb523a0-b622-4368-8142-b5e03df7549b.jpg" alt="" class="img-fluid h-1 w-1">
+           <p class="fs-6 fw-normal">Amazing pools</p>
+            </div>
+            <div class="d-flex flex-column align-items-center gray-400">
+              <img src="https://a0.muscache.com/pictures/4d4a4eba-c7e4-43eb-9ce2-95e1d200d10e.jpg" alt="" class="img-fluid h-1 w-1">
+           <p class="fs-6 fw-normal">Treehouses</p>
+            </div>
+
+            <div class="d-flex flex-column align-items-center gray-400">
+              <img src="https://a0.muscache.com/pictures/677a041d-7264-4c45-bb72-52bff21eb6e8.jpg" alt="" class="img-fluid h-1 w-1">
+           <p class="fs-6 fw-normal">Lakefront</p>
+            </div>
+            <div class="d-flex flex-column align-items-center gray-400">
+              <img src="https://a0.muscache.com/pictures/c8e2ed05-c666-47b6-99fc-4cb6edcde6b4.jpg" alt="" class="img-fluid h-1 w-1">
+           <p class="fs-6 fw-normal">Luxe</p>
+            </div>
+            <div class="d-flex flex-column align-items-center gray-400">
+              <img src="https://a0.muscache.com/pictures/aaa02c2d-9f0d-4c41-878a-68c12ec6c6bd.jpg" alt="" class="img-fluid h-1 w-1">
+           <p class="fs-6 fw-normal">Farms</p>
+            </div>
+            <div class="d-flex flex-column align-items-center gray-400">
+              <img src="https://a0.muscache.com/pictures/732edad8-3ae0-49a8-a451-29a8010dcc0c.jpg" alt="" class="img-fluid h-1 w-1">
+           <p class="fs-6 fw-normal">Cabins</p>
+            </div>
+
+            <div class="d-flex flex-column align-items-center gray-400">
+              <img src="https://a0.muscache.com/pictures/78ba8486-6ba6-4a43-a56d-f556189193da.jpg" alt="" class="img-fluid h-1 w-1">
+           <p class="fs-6 fw-normal">Mansions</p>
+            </div>
+            <div class="d-flex flex-column align-items-center gray-400">
+              <img src="https://a0.muscache.com/pictures/bcd1adc0-5cee-4d7a-85ec-f6730b0f8d0c.jpg" alt="" class="img-fluid h-1 w-1">
+           <p class="fs-6 fw-normal">Beachfront</p>
+            </div>
+            <div class="d-flex flex-column align-items-center gray-400">
+              <img src="https://a0.muscache.com/pictures/1b6a8b70-a3b6-48b5-88e1-2243d9172c06.jpg" alt="" class="img-fluid h-1 w-1">
+           <p class="fs-6 fw-normal">Castles</p>
+            </div>
+            <div class="d-flex flex-column align-items-center gray-400">
+              <img src="https://a0.muscache.com/pictures/8b44f770-7156-4c7b-b4d3-d92549c8652f.jpg" alt="" class="img-fluid h-1 w-1">
+           <p class="fs-6 fw-normal">Arctic</p>
+            </div>
+            <div class="d-flex flex-column align-items-center gray-400">
+              <img src="https://a0.muscache.com/pictures/3271df99-f071-4ecf-9128-eb2d2b1f50f0.jpg" alt="" class="img-fluid h-1 w-1">
+           <p class="fs-6 fw-normal">Tiney Homes</p>
+            </div>
+            <div class="d-flex flex-column align-items-center gray-400">
+              <img src="https://a0.muscache.com/pictures/3fb523a0-b622-4368-8142-b5e03df7549b.jpg" alt="" class="img-fluid h-1 w-1">
+           <p class="fs-6 fw-normal">Amazing pools</p>
+            </div>
+            <div class="d-flex flex-column align-items-center gray-400">
+              <img src="https://a0.muscache.com/pictures/4d4a4eba-c7e4-43eb-9ce2-95e1d200d10e.jpg" alt="" class="img-fluid h-1 w-1">
+           <p class="fs-6 fw-normal">Treehouses</p>
             </div>
+
+            <div class="d-flex flex-column align-items-center gray-400">
+              <img src="https://a0.muscache.com/pictures/677a041d-7264-4c45-bb72-52bff21eb6e8.jpg" alt="" class="img-fluid h-1 w-1">
+           <p class="fs-6 fw-normal">Lakefront</p>
+            </div>
+            <div class="d-flex flex-column align-items-center gray-400">
+              <img src="https://a0.muscache.com/pictures/c8e2ed05-c666-47b6-99fc-4cb6edcde6b4.jpg" alt="" class="img-fluid h-1 w-1">
+           <p class="fs-6 fw-normal">Luxe</p>
+            </div>
+            <div class="d-flex flex-column align-items-center gray-400">
+              <img src="https://a0.muscache.com/pictures/aaa02c2d-9f0d-4c41-878a-68c12ec6c6bd.jpg" alt="" class="img-fluid h-1 w-1">
+           <p class="fs-6 fw-normal">Farms</p>
+            </div>
+            <div class="d-flex flex-column align-items-center gray-400">
+              <img src="https://a0.muscache.com/pictures/732edad8-3ae0-49a8-a451-29a8010dcc0c.jpg" alt="" class="img-fluid h-1 w-1">
+           <p class="fs-6 fw-normal">Cabins</p>
+            </div>
+
+            <div class="d-flex flex-column align-items-center gray-400">
+              <img src="https://a0.muscache.com/pictures/78ba8486-6ba6-4a43-a56d-f556189193da.jpg" alt="" class="img-fluid h-1 w-1">
+           <p class="fs-6 fw-normal">Mansions</p>
+            </div>
+            <div class="d-flex flex-column align-items-center gray-400">
+              <img src="https://a0.muscache.com/pictures/bcd1adc0-5cee-4d7a-85ec-f6730b0f8d0c.jpg" alt="" class="img-fluid h-1 w-1">
+           <p class="fs-6 fw-normal">Beachfront</p>
+            </div>
+            <div class="d-flex flex-column align-items-center gray-400">
+              <img src="https://a0.muscache.com/pictures/1b6a8b70-a3b6-48b5-88e1-2243d9172c06.jpg" alt="" class="img-fluid h-1 w-1">
+           <p class="fs-6 fw-normal">Castles</p>
+            </div>
+            <div class="d-flex flex-column align-items-center gray-400">
+              <img src="https://a0.muscache.com/pictures/8b44f770-7156-4c7b-b4d3-d92549c8652f.jpg" alt="" class="img-fluid h-1 w-1">
+           <p class="fs-6 fw-normal">Arctic</p>
+            </div>
+            <div class="d-flex flex-column align-items-center gray-400">
+              <img src="https://a0.muscache.com/pictures/3271df99-f071-4ecf-9128-eb2d2b1f50f0.jpg" alt="" class="img-fluid h-1 w-1">
+           <p class="fs-6 fw-normal">Tiney Homes</p>
+            </div>
+            <div class="d-flex flex-column align-items-center gray-400">
+              <img src="https://a0.muscache.com/pictures/3fb523a0-b622-4368-8142-b5e03df7549b.jpg" alt="" class="img-fluid h-1 w-1">
+           <p class="fs-6 fw-normal">Amazing pools</p>
+            </div>
+            <div class="d-flex flex-column align-items-center gray-400">
+              <img src="https://a0.muscache.com/pictures/4d4a4eba-c7e4-43eb-9ce2-95e1d200d10e.jpg" alt="" class="img-fluid h-1 w-1">
+           <p class="fs-6 fw-normal">Treehouses</p>
+            </div>
+
+            <div class="d-flex flex-column align-items-center gray-400">
+              <img src="https://a0.muscache.com/pictures/677a041d-7264-4c45-bb72-52bff21eb6e8.jpg" alt="" class="img-fluid h-1 w-1">
+           <p class="fs-6 fw-normal">Lakefront</p>
+            </div>
+            <div class="d-flex flex-column align-items-center gray-400">
+              <img src="https://a0.muscache.com/pictures/c8e2ed05-c666-47b6-99fc-4cb6edcde6b4.jpg" alt="" class="img-fluid h-1 w-1">
+           <p class="fs-6 fw-normal">Luxe</p>
+            </div>
+            <div class="d-flex flex-column align-items-center gray-400">
+              <img src="https://a0.muscache.com/pictures/aaa02c2d-9f0d-4c41-878a-68c12ec6c6bd.jpg" alt="" class="img-fluid h-1 w-1">
+           <p class="fs-6 fw-normal">Farms</p>
+            </div>
+            <div class="d-flex flex-column align-items-center gray-400">
+              <img src="https://a0.muscache.com/pictures/732edad8-3ae0-49a8-a451-29a8010dcc0c.jpg" alt="" class="img-fluid h-1 w-1">
+           <p class="fs-6 fw-normal">Cabins</p>
+            </div>
+
+            <div class="d-flex flex-column align-items-center gray-400">
+              <img src="https://a0.muscache.com/pictures/78ba8486-6ba6-4a43-a56d-f556189193da.jpg" alt="" class="img-fluid h-1 w-1">
+           <p class="fs-6 fw-normal">Mansions</p>
+            </div>
+           
+            
+        </div>
+            
           </div>
+       
         </div>
+        
+      </div>
+      
       </div>
+      
       <!--Himanshu-->
       <div id="cards"></div>
       <!--Rameshwar-->
diff --git a/Frontend/scripts/index.js b/Frontend/scripts/index.js
index c0c9dc7..8971aaa 100644
--- a/Frontend/scripts/index.js
+++ b/Frontend/scripts/index.js
@@ -5,6 +5,7 @@ const dropdownMenu = document.getElementById('dropdownMenu');
 menuIcon.addEventListener('click', function() {
   dropdownMenu.classList.toggle('show');
 });
+
 // HIMANSHU------>>
 let cont=document.getElementById("cards")
 function createCards(det){
diff --git a/Frontend/styles/index.css b/Frontend/styles/index.css
index c4b9da6..98304b8 100644
--- a/Frontend/styles/index.css
+++ b/Frontend/styles/index.css
@@ -224,6 +224,101 @@ body {
   border-radius: 50px;
   background-color: rgb(230, 227, 227);
 }
+#top-carousel .d-flex{
+  margin-left: 20px;
+  gap: 10px;
+}
+#top-carousel{
+  display: flex;
+}
+#top-carousel img{
+       width:2rem ;
+       height: 2rem;
+}
+#iconss {
+  margin:5px;
+  display: flex;
+  overflow-x: auto;
+}
+#iconss::-webkit-scrollbar{
+  width: 0;
+}
+#top-carousel p{
+          font-size: 0.873rem;
+          color: gray;
+          font-weight: 400;
+}
+#top-carousel p:hover{
+  font-size: 0.873rem;
+  color: rgb(16, 15, 15);
+  font-weight: 400;
+}
+#datePicker {
+  position: absolute;
+  display: none;
+  background-color: white;
+  border: 1px solid #ccc;
+  padding: 10px;
+}
+
+#datePicker input[type="datetime-local"] {
+  width: 200px;
+}
+/* Media queries for different screen sizes */
+
+/* Mobile devices (320px to 480px) */
+@media (max-width: 480px) {
+  #navbar{
+    font-size: smaller;
+    background-color: chocolate;
+   }
+}
+
+/* Tablets (481px to 768px) */
+@media (min-width: 481px) and (max-width: 768px) {
+  #navbar .menu-container .menus .item-menu{
+   font-size: 12px;
+  }
+  #navbar .menu-container .right-menu{
+    font-size: 12px;
+   }
+  
+}
+
+/* Small screens, laptops (769px to 1024px) */
+@media (min-width: 769px) and (max-width: 1024px) {
+   .item-menu{
+  font-size: 10px;
+  gap: 5px;
+  }
+   .menu-flex .right-menu-item #btn{
+    font-size: 10px;
+   }
+   .menu-flex img{
+    width: 3cm;
+   }
+}
+
+/* Desktops, large screens (1025px and above) */
+@media (min-width: 1025px) {
+  #navbar .menu-container{
+  gap: 2px;
+
+   }
+   #navbar .menu-container .item-menu{
+  
+     }
+
+}
+
+/* Extra large screens, TV (1201px and above) */
+@media (min-width: 1201px) {
+  .item-menu,
+  .fs-6 {
+    font-size: 1.6rem; /* Adjust the font size as needed for extra large screens */
+  }
+}
+
 #dropdown{
 }
 /* HIMANSHU */
@@ -286,6 +381,7 @@ height: auto;
 display: flex;
 flex-wrap: wrap;
 gap: 25px;
+justify-content: center;
 
 }
 .c1 img{