simple mock up for fav* need icon set to align

src/views/Home.vue

@@ -1,6 +1,7 @@
 <template>
-    <!-- TO DO need someone to make map fuctional properly -->
-    <!--don't know why height auto didn't work so i write 1117px for temporary -->
+  
+  <searchbar/>
+
     <ol-map
     :loadTilesWhileAnimating="true"
     :loadTilesWhileInteracting="true"
@@ -9,10 +10,7 @@
       height: 100%;
       width: 100%;
       position: fixed; 
-      top: 0;
-      left: 0;
-      bottom: 0;
-      right: 0;
+      
     "
   >
     <ol-view
@@ -27,11 +25,14 @@
       <ol-source-osm />
     </ol-tile-layer>
   </ol-map>
+
 </template>
 
 
 
 <script setup>
+
+import searchbar from '@/components/searchbar.vue';
 import { ref } from "vue";
 
 const center = ref([100.538611, 13.764722]);