diff --git a/src/components/NavigationMapCard.vue b/src/components/NavigationMapCard.vue
new file mode 100644
index 0000000..860c01c
--- /dev/null
+++ b/src/components/NavigationMapCard.vue
@@ -0,0 +1,38 @@
+<template>
+    <v-card 
+  class="stick-bottom card-height"
+  width="100%"
+  height="60vh"
+  style="padding-top: 15px; font-weight:bold;"
+  :title="nearestStructureData.display_name" 
+  :subtitle="destination.subTitle"
+  >
+
+    </v-card>
+
+</template>
+
+<script>
+export default {
+  props: {
+    nearestStructureData: Object,
+    onClose: Function,
+  },
+  data() {
+    return {
+      showPopup: true,
+    };
+  },
+  methods: {
+    closePopup() {
+      this.showPopup = false;
+      this.onClose();
+    },
+
+    viewRoute() {
+      this.$emit('changeComponent', { userLocation: this.userLocation, destination: this.destination });
+    },
+
+  },
+};
+</script>
\ No newline at end of file
diff --git a/src/views/Home.vue b/src/views/Home.vue
index d6d0e65..86c00a9 100644
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@@ -121,6 +121,7 @@ const moveToLocation = (result) => {
   const lon = parseFloat(result.lon);
   center.value = [lon, lat];
   showSearchBar.value = false;
+  popupData.value = result; // Set the selected search result as popupData
 };
 
 const performSearch = async () => {