diff --git a/src/components/BottomNavigation.vue b/src/components/BottomNavigation.vue
index 55436fb..a520b1d 100644
--- a/src/components/BottomNavigation.vue
+++ b/src/components/BottomNavigation.vue
@@ -4,7 +4,9 @@
                     <v-btn :to="{name: 'home'}"
                     block rounded="lg"
                     min-width="20px"
-                    max-width="120px">
+                    max-width="120px"
+                    class = "white-border"
+                    >
                         <v-icon>mdi-map</v-icon>
                         แผนที่
                     </v-btn>
@@ -13,7 +15,8 @@
                     <v-btn :to="{name: 'favorite'}"
                     block rounded="lg"
                     min-width="20px"
-                    max-width="120px">
+                    max-width="120px"
+                    class = "white-border">
                         <v-icon>mdi-heart</v-icon>
                         สถานที่โปรด
                     </v-btn>
@@ -21,7 +24,8 @@
                     <v-btn :to="{name: 'setting'}"
                     block rounded="lg"
                     min-width="20px"
-                    max-width="120px">
+                    max-width="120px"
+                    class = "white-border">
                         <v-icon>mdi-cog</v-icon>
                         การตั้งค่า
                     </v-btn>
@@ -39,7 +43,7 @@ import {RouterLink} from 'vue-router';
 </script>
 
 <style>
-.v-btn {
+.white-border {
   min-width: 50px;
   border: 3px solid rgba(255, 255, 255, 1);
 }
diff --git a/src/components/TopBar.vue b/src/components/TopBar.vue
new file mode 100644
index 0000000..3c42446
--- /dev/null
+++ b/src/components/TopBar.vue
@@ -0,0 +1,34 @@
+<template>
+  <v-app-bar app class="custom-app-bar">
+    <v-app-bar-nav-icon @click="goBack" v-if="showBackIcon">
+      <v-icon large>mdi-arrow-left</v-icon> 
+    </v-app-bar-nav-icon>
+    <v-toolbar-title class="text-center">{{ pageTitle }}</v-toolbar-title>
+  </v-app-bar>
+</template>
+
+<script>
+export default {
+  props: {
+    showBackIcon: {
+      type: Boolean,
+      default: false
+    },
+    pageTitle: {
+      type: String,
+      default: ''
+    }
+  },
+  methods: {
+    goBack() {
+      this.$router.go(-1);
+    }
+  }
+};
+</script>
+
+<style scoped>
+.custom-app-bar {
+  box-shadow: none;
+}
+</style>
diff --git a/src/plugins/router.js b/src/plugins/router.js
index c27a324..dd7c224 100644
--- a/src/plugins/router.js
+++ b/src/plugins/router.js
@@ -6,6 +6,7 @@ const routes = [
     {path: '/favorite', name: 'favorite', component: () => import('@/views/Favorite.vue')},
     {path: '/setting', name: 'setting', component: () => import('@/views/Setting.vue')},
     {path: '/destination-info', name: 'destination-info', component: () => import('@/views/DestinationInfo.vue')},
+    {path: '/login', name: 'login', component: () => import('@/views/Login.vue')},
 ]
 const router = createRouter({
     routes,
diff --git a/src/views/DestinationInfo.vue b/src/views/DestinationInfo.vue
index f9bd6e3..e58f219 100644
--- a/src/views/DestinationInfo.vue
+++ b/src/views/DestinationInfo.vue
@@ -4,9 +4,4 @@
 
 <script setup>
     import DestinationInfoCard from '@/components/DestinationInfoCard.vue';
-</script>
-
-
-<style>
-
-</style>
\ No newline at end of file
+</script>
\ No newline at end of file
diff --git a/src/views/Login.vue b/src/views/Login.vue
new file mode 100644
index 0000000..ba34a99
--- /dev/null
+++ b/src/views/Login.vue
@@ -0,0 +1,58 @@
+<template>
+
+  <v-app>
+    <top-bar :show-back-icon="true" :page-title="pageTitle" />  
+    <v-main>
+      <v-container>
+        <v-form name="login-form">
+          <div class="mb-3">
+            <label for="username">Username: </label>
+            <input type="text" id="username" v-model="input.username" />
+          </div>
+          <div class="mb-3">
+            <label for="password">Password: </label>
+            <input type="password" id="password" v-model="input.password" />
+          </div>
+          
+        </v-form>
+      </v-container>
+      
+            <v-btn @click.prevent="login">ลงชื่อเข้าใช้</v-btn>
+            <v-btn >ฉันต้องการสมัครสมาชิก</v-btn>
+       
+    </v-main>
+  </v-app>
+
+</template>
+
+<script>
+// mango : i have a problem with css due to the icon theme so i make some mock up to testing login/register
+import TopBar from '@/components/TopBar.vue';
+
+export default {
+  components: {
+    TopBar
+  },
+  name: 'Login',
+  data() {
+    return {
+      pageTitle: 'ตั้งค่าบัญชี', // Set the page title here
+      input: {
+        username: '',
+        password: ''
+      }
+    };
+  },
+  methods: {
+    login() {
+      // Make sure username OR password are not empty
+      if (this.input.username !== '' || this.input.password !== '') {
+        console.log('Authenticated: Checking with Backend');
+      } else {
+        console.log('Username and Password cannot be empty');
+      }
+    }
+  }
+};
+
+</script>
diff --git a/src/views/Setting.vue b/src/views/Setting.vue
index 4a4bf14..2e08d7d 100644
--- a/src/views/Setting.vue
+++ b/src/views/Setting.vue
@@ -1,49 +1,20 @@
 <template>
-    <v-sheet class="d-flex justify-center">
-
-        <v-sheet class="ma-2 pa-4 mb-auto">
-
-            <v-row class="ma-2" justify="space-around">
-            <v-avatar
-                color="grey"
-                size="128"
-            >
-            <v-img cover src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/59/User-avatar.svg/1200px-User-avatar.svg.png"></v-img>
-            </v-avatar>
-            </v-row>
-
-            <v-list-item
-            center
-                class="text-black"
-                title="SRP Rottenmango"
-                subtitle="sasha@example.org"
-            >
-            </v-list-item>
-        </v-sheet>
-        
-    </v-sheet>
-
+<v-app>
+    <v-container class="d-flex justify-center align-center">
+        <div>
+            <h1>Heading</h1>
+        <h2>Sub-Heading</h2>
+      <v-container class="d-flex justify-center align-center">
+        <v-btn class="ma-2" width="150" :to="{name: 'login'}">ลงชื่อเข้าใช้</v-btn>
+        <v-btn class="ma-2" width="150">สมัครสมาชิค</v-btn>
+      </v-container>
+        </div>
+    </v-container>
     <v-sheet class="d-flex justify-center ma-2">
         <v-sheet class="mb-auto"
         max-width="420px"
         min-width="200px"
         width="95vw">
-        
-            <v-list class = "ma-2" density="compact">
-                <v-list-item
-                    v-for="(item, i) in account_items"
-                    :key="i"
-                    :value="item"
-                >
-                <template v-slot:append>
-                <v-icon :icon="item.icon"></v-icon>
-                </template>
-
-                    <v-list-item-title v-text="item.text"></v-list-item-title>
-                </v-list-item>
-            </v-list>
-
-            
             <v-list class = "ma-2" density="compact">
                 <v-list-subheader>การแสดงผล</v-list-subheader>
 
@@ -90,7 +61,8 @@
             </v-btn>
         </v-sheet>
         
-    </v-sheet>    
+    </v-sheet>   
+</v-app> 
 
 </template>
 
@@ -99,7 +71,8 @@
 import {RouterLink} from 'vue-router';
 
 const account_items = [
-    { text: 'ตั้งค่าบัญชี',icon: 'mdi-chevron-right'},
+    { text: 'ตั้งค่าบัญชี',
+    icon: 'mdi-chevron-right'},
     
   ]
 
@@ -113,7 +86,8 @@ const display_items = [
   ]
 
   const about_items = [
-    { text: 'เกี่ยวกับ',icon: 'mdi-chevron-right',}
+    { text: 'เกี่ยวกับ',
+    icon: 'mdi-chevron-right',}
   ]