diff --git a/src/components/DestinationInfoCard.vue b/src/components/DestinationInfoCard.vue
index c453c03..085345b 100644
--- a/src/components/DestinationInfoCard.vue
+++ b/src/components/DestinationInfoCard.vue
@@ -1,14 +1,19 @@
 <template>
   <v-card 
-  class="stick-bottom card-height"
+  class="stick-bottom card-height destination-card"
   width="100%"
-  height="60vh"
-  style="padding-top: 15px; font-weight:bold;"
-  :title="nearestStructureData.display_name" 
-  :subtitle="destination.subTitle"
+  :height="cardHeight"
+  style="padding-top: 15px;"
   >
 
-    <v-list lines="one">
+  <div v-if="!showRoute">
+    <v-list>
+
+      <v-list-item>
+        <v-list-item-title class="title-text">{{nearestStructureData.display_name}}</v-list-item-title>
+        <v-list-item-subtitle class="subtitle-text">{{destination.subTitle}}</v-list-item-subtitle>
+      </v-list-item>
+      
       <v-list-item>
         <template v-slot:prepend>
           <v-avatar>
@@ -29,7 +34,7 @@
             />
           </v-avatar>
         </template>
-        <v-list-item-title class="text-decoration-underline">{{detial[1].title}}</v-list-item-title>
+        <v-list-item-title class="text-decoration-underline">{{nearestStructureData.lat}} , {{nearestStructureData.lon}}</v-list-item-title>
       </v-list-item>
 
       <v-list-item>
@@ -49,15 +54,150 @@
     <v-card-actions class="stick-bottom btnlist-height justify-sa">
       <v-btn rounded="xl" variant="tonal" width="45vw" height="44px">
         เพิ่มลงในสถานที่โปรด</v-btn>
-      <v-btn rounded="xl" variant="flat" class="text-white" width="45vw" height="44px" color="#f16322">
+      <v-btn @click="viewRoute" rounded="xl" variant="flat" class="text-white" width="45vw" height="44px" color="#f16322">
         ดูเส้นทาง</v-btn>
     </v-card-actions>
 
-    <v-btn 
+    
+  </div>
+
+
+  <div v-else>
+
+    <v-list-item class="d-flex justify-center">
+        <v-btn-toggle
+        class="btn-toggle"
+        mandatory
+        >
+          <v-btn class="btn"><v-icon class="icon-walk"></v-icon></v-btn>
+          <v-btn class="btn"><v-icon class="icon-wheelchair"></v-icon></v-btn>
+        </v-btn-toggle>
+      </v-list-item>
+
+      <v-list-item class="d-flex justify-center">
+            <v-toolbar
+            dense
+            floating
+            style="width: 90vw; background-color: transparent;"
+            >
+            <v-icon
+              style="
+              background-color: transparent;
+              border-radius: 10px;
+              width: 12vw;
+              height: 100%;
+              ">
+                <v-icon 
+              class="icon-flag"
+              style="background-color: transparent;"
+              >
+              </v-icon>
+
+              </v-icon>
+              
+            <v-text-field
+              hide-details
+              prepend-icon="mdi-magnify"
+              style="
+              
+              border-radius: 10px;
+              background-color: rgba(230, 230, 230, 1);
+              padding-left: 2vw;"
+              variant="invert-solo"
+              flat
+            ></v-text-field>
+            <v-btn
+            hide-details
+            style="
+            background-color: rgba(230, 230, 230, 1);
+            margin-left: 2vw;
+            margin-right: 1vw;
+            border-radius: 10px;
+            height: 86%;"
+            flat
+            >
+              <v-icon class="icon-plus"></v-icon>
+            </v-btn>
+          </v-toolbar>
+      </v-list-item>
+
+      <v-list-item class="d-flex justify-center"
+      style="overflow-x:hidden"
+      >
+            <v-toolbar
+            dense
+            floating
+            style="
+            width: 90vw;
+            background-color: transparent;
+            flex-wrap: nowrap;
+            overflow-y: hidden;"
+            >
+
+              <v-icon
+              style="
+              background-color: transparent;
+              border-radius: 10px;
+              width: 12vw;
+              height: 100%;
+              ">
+                <v-icon 
+              class="icon-flag"
+              style="background-color: rgba(241, 99, 34, 1);"
+              >
+              </v-icon>
+
+              </v-icon>
+            <v-text-field
+              @click="viewPopup"
+              readonly
+              hide-details
+              prepend-icon="mdi-magnify"
+              style="
+              border-radius: 10px;
+              background-color: rgba(230, 230, 230, 1);
+              padding-left: 2vw;
+              "
+              variant="invert-solo"
+              flat
+              :model-value="nearestStructureData.display_name"
+              >
+            
+            </v-text-field>
+            <v-btn
+            hide-details
+            style="
+            background-color: rgba(230, 230, 230, 1);
+            margin-left: 2vw;
+            margin-right: 1vw;
+            border-radius: 10px;
+            height: 86%;
+            "
+            flat
+            >
+            
+              <v-icon class="icon-vertical-arrows"></v-icon>
+            </v-btn>
+          </v-toolbar>
+      </v-list-item>
+
+      <v-list-item class="d-flex justify-center">
+        <v-card-text>0 นาที</v-card-text>
+      </v-list-item>
+
+      <v-card-actions class="stick-bottom btnlist-height justify-sa">
+        <v-btn @click="viewPopup" rounded="xl" variant="tonal" width="45vw" height="44px">
+          ย้อนกลับ</v-btn>
+        <v-btn @click="viewRoute" rounded="xl" variant="flat" class="text-white" width="45vw" height="44px" color="#f16322">
+          เริ่มการนำทาง</v-btn>
+
+    </v-card-actions>
+  </div>
+
+  <v-btn 
     @click="closePopup"
     variant="tonal" icon="mdi-close" style="position: absolute; top: 15px; right: 15px;" />
 
-
   </v-card>
 </template>
   
@@ -65,6 +205,7 @@
 import findLocation from '../../icons/Material/find-location.svg';
 import clock from '../../icons/Material/clock.svg';
 import check from '../../icons/Material/check-round.svg';
+import DestinationInfoCard from '@/components/DestinationInfoCard.vue';
 const destination = {
   title: "อนุสาวรีย์ชัยสมรภูมิ",
   subTitle: "ราชเทวี , กรุงเทพมหานคร"
@@ -97,14 +238,28 @@ export default {
   data() {
     return {
       showPopup: true,
+      showRoute: false,
     };
   },
+  computed: {
+    cardHeight() {
+      return this.showRoute ? '45vh' : '60vh';
+    },
+  },
   methods: {
     closePopup() {
       this.showPopup = false;
       this.onClose();
     },
+    viewRoute() {
+    this.showRoute = true;
+    },
+    viewPopup(){
+    this.showPopup = true;
+    this.showRoute = false;
+    }
   },
+  
 };
 </script>
 
@@ -145,5 +300,80 @@ export default {
   width: 100%;
   height: 45vh;
 }
+
+.title-text
+{
+  color: rgba(0, 0, 0, 1);
+  font-style: normal;
+  font-size: 24px;
+  font-weight: 700;
+  line-height: 1.2;
+  letter-spacing: 0px;
+  text-decoration: none;
+  text-transform: none;
+}
+
+.sutitle-text{
+  color: rgba(155, 155, 155, 1);
+  font-style: normal;
+  font-size: 16px;
+  font-weight: 400;
+  line-height: 1.2;
+  letter-spacing: 0px;
+  text-decoration: none;
+  text-transform: none;
+}
+
+.icon-walk {
+  background-color: #000000;
+  -webkit-mask: url(icons/Adwaita/walk.svg) no-repeat center;
+  mask: url(icons/Adwaita/walk.svg) no-repeat center;
+}
+.icon-wheelchair {
+  background-color: #000000;
+  -webkit-mask: url(icons/Adwaita/wheelchair.svg) no-repeat center;
+  mask: url(icons/Adwaita/wheelchair.svg) no-repeat center;
+}
+.icon-plus {
+  background-color: #000000;
+  -webkit-mask: url(icons/Adwaita/plus.svg) no-repeat center;
+  mask: url(icons/Adwaita/plus.svg) no-repeat center;
+}
+.icon-vertical-arrows {
+  background-color: #000000;
+  -webkit-mask: url(icons/Adwaita/vertical-arrows.svg) no-repeat center;
+  mask: url(icons/Adwaita/vertical-arrows.svg) no-repeat center;
+}
+.icon-flag {
+  background-color: #000000;
+  -webkit-mask: url(icons/Adwaita/flag.svg) no-repeat center;
+  mask: url(icons/Adwaita/flag.svg) no-repeat center;
+}
+
+.btn-toggle
+{
+  border-radius: 10px;
+  background-color: rgba(230, 230, 230, 1);
+}
+
+.btn-toggle .btn
+{
+  border-radius: 0px;
+  background-color: rgba(230, 230, 230, 1);
+}
+
+.destination-card .v-input__control
+{
+  
+  max-height: 6vh;
+  max-width: 50vw;
+}
+
+.destination-card .v-field__input
+{
+  /* font-size: 14px; */
+  padding: 0;
+}
+
 </style>
   
\ No newline at end of file
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/iconsets/adwaita.ts b/src/iconsets/adwaita.ts
new file mode 100644
index 0000000..e69de29
diff --git a/src/views/Home.vue b/src/views/Home.vue
index d6d0e65..71bf7c1 100644
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@@ -5,12 +5,6 @@
     class="router-view"
     />
 
-    <!-- <Popup
-      v-if="popupData"
-      :nearestStructureData="popupData"
-      :onClose="closePopup"
-    /> -->
-
     <DestinationInfoCard
     class="DestinationInfoCard"
       v-if="popupData"
@@ -121,6 +115,7 @@ const moveToLocation = (result) => {
   const lon = parseFloat(result.lon);
   center.value = [lon, lat];
   showSearchBar.value = false;
+  popupData.value = result; 
 };
 
 const performSearch = async () => {
diff --git a/src/views/Login.vue b/src/views/Login.vue
index 8fc7346..503f3ef 100644
--- a/src/views/Login.vue
+++ b/src/views/Login.vue
@@ -136,7 +136,7 @@ export default {
             client_id:
               import.meta.env.VITE_CLIENT_ID,
             scope: "email profile openid",
-            redirect_uri: "http://localhost:5000/api/users/googleAuth/callback",
+            redirect_uri: "https://little-lines-backend.techtransthai.org/api/users/googleAuth/callback",
             callback: response => {
               if (response.code) {
                 this.sendCodeToBackend(response.code);
@@ -151,7 +151,7 @@ export default {
         const headers = {
           Authorization: code
         };
-        const response = await axios.post("http://localhost:5000/api/users/googleAuth", null, { headers });
+        const response = await axios.post("https://little-lines-backend.techtransthai.org/api/users/googleAuth", null, { headers });
         const userDetails = response.data;
         console.log("User Details:", userDetails);
         this.userDetails = userDetails;
@@ -190,4 +190,4 @@ export default {
   justify-content: center;
   align-content: center;
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/views/Register.vue b/src/views/Register.vue
index 64057e3..8ce68be 100644
--- a/src/views/Register.vue
+++ b/src/views/Register.vue
@@ -13,8 +13,8 @@
          
         <div class="mx-5">
           <v-text-field 
-            class="username" 
-            v-model="input.username" 
+            class="email" 
+            v-model="input.email" 
             label="อีเมล" 
             variant="solo"
           >
@@ -98,7 +98,7 @@ import eyeNotLooking from '../../icons/Material/eye-not-looking.svg';
       return {
         pageTitle: 'สมัครสมาชิก', 
         input: {
-          username: '',
+          email: '',
           password: '',
           passwordConfirm:''
         }
@@ -114,9 +114,9 @@ import eyeNotLooking from '../../icons/Material/eye-not-looking.svg';
               'Content-Type': 'application/json',
             },
             body: JSON.stringify({
-              username: this.input.username,
+              username: "temp",
               password: this.input.password,
-              email: "asdf",
+              email: this.input.email,
               isGoogleAccount: false
             })
             })
@@ -137,7 +137,7 @@ import eyeNotLooking from '../../icons/Material/eye-not-looking.svg';
             })
             console.log("fisnished fetch");
         } else {
-          console.log('Username and Password cannot be empty');
+          console.log('Email and Password cannot be empty');
         }
       }
     },
@@ -148,7 +148,7 @@ import eyeNotLooking from '../../icons/Material/eye-not-looking.svg';
 .user {
   background-color: aqua;
 }
-.username, .password {
+.email, .password {
   margin-bottom: -21px;
 }
 .check {