simple mock up for fav* need icon set to align

src/App.vue

@@ -1,11 +1,9 @@
 <template>
-  <searchbar/>
   <router-view/>
   <bottomNavigation/>
 </template>
 
 <script setup>
   import {RouterView} from 'vue-router';
-  import searchbar from '@/components/searchbar.vue';
   import bottomNavigation from '@/components/BottomNavigation.vue';
 </script>

src/components/searchbar.vue

@@ -1,5 +1,5 @@
 <template>
-    <v-layout style="height: 55px;">
+    <v-layout style="height: 65px;">
         <v-app-bar scroll-threshold="0"
             class="mx-auto px-auto"
             >

src/plugins/vuetify.js

@@ -1,6 +1,6 @@
 import { createApp } from 'vue'
 import { createVuetify, ThemeDefinition } from 'vuetify'
-
+import { aliases, custom } from '../iconsets/custom'
 const myCustomLightTheme = {
   dark: false,
   colors: {
@@ -24,4 +24,11 @@ export default createVuetify({
       myCustomLightTheme,
     },
   },
+  icons: {
+    defaultSet: 'adwaita',
+    aliases,
+    sets: {
+      custom,
+    },
+  },
 })

src/views/Favorite.vue

@@ -1,9 +1,73 @@
 <template>
-    <h1>Favorie</h1>
-    <ul>
-        <li>List of Destination</li>
-        <li>List of Destination</li>
-        <li>List of Destination</li>
-        <li>List of Destination</li>
-    </ul>
+    <!-- <h1>Favorite</h1> -->
+
+    <!-- <v-card
+    class="mx-auto"
+    max-width="420"
+    height="600"
+    >
+
+    <v-list lines="two">
+        <v-list-item
+            v-for="item in items"
+            :key="item.title"
+            :title="item.title"
+            :subtitle="item.desc"
+            :prepend-avatar="pin_svg"
+        ></v-list-item>
+    </v-list>
+
+    </v-card> -->
+
+    <v-card
+    class="mx-auto"
+    max-width="420"
+    height="600"
+    >
+        <v-list
+        item-props
+        lines="two"
+        >
+        <v-list-item
+            v-for="(item, i) in items"
+            :key="i"
+            :value="item"
+            >
+
+            <template v-slot:prepend>
+                <v-img
+                :width="32"
+                src= "./icons/Adwaita/pin.svg"
+                ></v-img>
             </template>
+
+            <v-list-item-title v-text="item.title"></v-list-item-title>
+            <v-list-item-subtitle v-text="item.desc"></v-list-item-subtitle>
+            
+            <v-divider></v-divider>
+        </v-list-item>
+        </v-list>
+    </v-card>
+
+    
+</template>
+
+<script setup>
+    const pin_svg = "./icons/Adwaita/pin.svg"
+    const items = [
+        {
+        title: 'หอพักนักศึกษา',
+        desc: 'ลาดกระบัง, กรุงเทพมหานคร',
+        },
+        {
+        title: 'อนุสาวรีย์ชัยสมรภูมิ',
+        desc: 'ราชเทวี, กรุงเทพมหานคร',
+        },
+  ]
+</script>
+
+<style >
+.v-list__group__header__prepend-icon {
+    color: red;
+}  
+</style>

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]);