diff --git a/src/views/Home.vue b/src/views/Home.vue
index 27f4625..e392d98 100644
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@@ -14,30 +14,52 @@
         <v-app-bar scroll-threshold="0"
             class="mx-auto px-auto"
             >
-            <v-text-field
-              v-model="searchQuery"
-              @keyup.enter="performSearch"
-              @input="performSearch"
-              density="compact"
-              variant="solo"
-              prepend-inner-icon="mdi-magnify"
-              single-line
-              hide-details
-            ></v-text-field>
-            <v-btn icon>
+            
+            <div class="flex-grow-1">
+                <v-text-field
+                  v-model="searchQuery"
+                  @keyup.enter="performSearch"
+                  @input="performSearch"
+                  @click="toggleSearchBar()"
+                  density="compact"
+                  variant="solo"
+                  prepend-inner-icon="mdi-magnify"
+                  single-line
+                  hide-details
+                  
+                ></v-text-field>
+            </div>
+
+            <v-btn icon @click="showSearchBar = !showSearchBar">
                 <v-icon>mdi-crosshairs-gps</v-icon>
             </v-btn>
+
         </v-app-bar>
         
       </v-layout>
 
-      <div v-if="searchResults.length > 0" class="search-results">
-              <ul>
-                <li v-for="result in searchResults" :key="result.place_id" @click="moveToLocation(result)">
-                  {{ result.display_name }}
-                </li>
-              </ul>
-            </div>
+      <!-- <div v-if="searchResults.length > 0" class="search-results">
+          <ul>
+             <li v-for="result in searchResults" :key="result.place_id" @click="moveToLocation(result)">
+               {{ result.display_name }}
+             </li>
+          </ul>
+      </div> -->
+
+            
+      <v-list v-if="searchResults.length > 0 && !showSearchBar" class="search-results">
+        <v-list-item
+          v-for="result in searchResults"
+          :key="result.place_id"
+          @click="moveToLocation(result),toggleSearchBar()"
+        >
+          <v-list-item-icon>
+            <v-icon>mdi-map-marker</v-icon>
+          </v-list-item-icon>
+          {{ result.display_name }}
+        </v-list-item>
+      </v-list>
+
   <!-- <map/> -->
     <ol-map
     :loadTilesWhileAnimating="true"
@@ -84,14 +106,17 @@ const popupData = ref(null);
 //search
 const searchQuery = ref("");
 const searchResults = ref([]);
+const showSearchBar = ref(false);
+
+const toggleSearchBar = () => {
+  showSearchBar.value = !showSearchBar.value;
+};
 
 const moveToLocation = (result) => {
-  // Extract latitude and longitude from the selected result
   const lat = parseFloat(result.lat);
   const lon = parseFloat(result.lon);
-
-  // Update the center coordinates to move the camera to the selected location
   center.value = [lon, lat];
+  showSearchBar.value = false;
 };
 
 const performSearch = async () => {
@@ -100,14 +125,12 @@ const performSearch = async () => {
       `https://nominatim.openstreetmap.org/search?format=json&q=${encodeURIComponent(searchQuery.value)}`
     );
 
-    // Process the search results and limit to, let's say, 5 results
     searchResults.value = response.data.slice(0, 5);
   } catch (error) {
     console.error("Error fetching search results:", error);
   }
 };
 
-
 //Show API
 const handleMapClick = async event => {
   const clickedCoordinate = event.coordinate;