diff --git a/resources/assets/js/components/LocaleDropdown.vue b/resources/assets/js/components/LocaleDropdown.vue
index 5f6efaba..745d1b98 100644
--- a/resources/assets/js/components/LocaleDropdown.vue
+++ b/resources/assets/js/components/LocaleDropdown.vue
@@ -1,72 +1,65 @@
 <template>
-<div>
-  <ul class="nav navbar-nav">
-    <!-- <li class="nav-item dropdown">
-      <a class="nav-link dropdown-toggle" href="#" role="button"
-        data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-        {{ locales[locale] }}
-      </a>
-      <div class="dropdown-menu">
-        <a v-for="(value, key) in locales" :key="key" class="dropdown-item" href="#"
-          @click.prevent="setLocale(key)">
-          {{ value }}
-        </a>
-      </div>
-    </li> -->
-    <ul class="navbar-nav">
+  <div>
+    <ul class="nav navbar-nav">
       <li v-if="(user && role == 'admin')" class="nav-item">
-        <el-popover placement="top" width="300" v-model="UpdateRatePopoverVisible">
-            <div align="center">
-              <p>Today's Rate</p>
-              <p>X1 : Cash: {{rate.x1_cash}} Cheque: {{rate.x1_cheque}} BA: {{rate.x1_ba}}</p>
-              <p>X2 : Cash: {{rate.x2_cash}} Cheque: {{rate.x2_cheque}} BA: {{rate.x2_ba}}</p>
-            </div>
-            <div style="text-align: center; margin: 0">
-              <el-button type="primary" size="mini" @click="UpdateRatePopoverVisible = false; UpdateRateDialogVisible = true">Update rate</el-button>
-            </div>
-            <a class="nav-link" href="#" role="button" slot="reference">Update Rate</a>
-        </el-popover>
+        <router-link :to="{ name: 'admin.home' }" class="nav-link">
+          {{ $t('Home') }}
+        </router-link>
       </li>
+      <ul class="navbar-nav">
+        <li v-if="(user && role == 'admin')" class="nav-item">
+          <el-popover placement="top" width="300" v-model="UpdateRatePopoverVisible">
+              <div align="center">
+                <p>Today's Rate</p>
+                <p>X1 : Cash: {{rate.x1_cash}} Cheque: {{rate.x1_cheque}} BA: {{rate.x1_ba}}</p>
+                <p>X2 : Cash: {{rate.x2_cash}} Cheque: {{rate.x2_cheque}} BA: {{rate.x2_ba}}</p>
+              </div>
+              <div style="text-align: center; margin: 0">
+                <el-button type="primary" size="mini" @click="UpdateRatePopoverVisible = false; UpdateRateDialogVisible = true">Update rate</el-button>
+              </div>
+              <a class="nav-link" href="#" role="button" slot="reference">Update Rate</a>
+          </el-popover>
+        </li>
+      </ul>
+        <li v-if="(user && role == 'admin')" class="nav-item">
+          <router-link :to="{ name: 'admin.transaction-history' }" class="nav-link">
+            {{ $t('Transaction History') }}
+          </router-link>
+        </li>
+        <li v-if="(user && role == 'admin')" class="nav-item">
+          <router-link :to="{ name: 'admin.complete' }" class="nav-link">
+            {{ $t('Completed Orders') }}
+          </router-link>
+        </li>
     </ul>
-      <li v-if="(user && role == 'admin')" class="nav-item">
-        <router-link :to="{ name: 'admin.transaction-history' }" class="nav-link">
-          {{ $t('Transaction History') }}
-        </router-link>
-      </li>
-      <li v-if="(user && role == 'admin')" class="nav-item">
-        <router-link :to="{ name: 'admin.complete' }" class="nav-link">
-          {{ $t('Completed Orders') }}
-        </router-link>
-      </li>
-  </ul>
-<!-- update rate dialog start -->
- <el-dialog align="center" :visible.sync="UpdateRateDialogVisible" width="900px">
-    <el-form :inline="true" align="center" ref="rate" :model="rate" :rules="rules">
+  <!-- update rate dialog start -->
+  <el-dialog align="center" :visible.sync="UpdateRateDialogVisible" width="900px">
+      <el-form :inline="true" align="center" ref="rate" :model="rate" :rules="rules">
 
-        <el-form-item prop="x1_cash" >X1: &nbsp;&nbsp;&nbsp;Cash : <el-input v-model.number="rate.x1_cash" style=width:25% ></el-input></el-form-item>
-        <el-form-item prop="x1_cheque" >Cheque : <el-input  v-model.number="rate.x1_cheque" style=width:25%></el-input></el-form-item>
-        <el-form-item prop="x1_ba">BA : <el-input v-model.number="rate.x1_ba" style=width:25%></el-input></el-form-item>
-        <br>
-        <el-form-item prop="x2_cash" >X2: &nbsp;&nbsp;&nbsp;Cash : <el-input  v-model.number="rate.x2_cash" style=width:25% ></el-input></el-form-item>
-        <el-form-item prop="x2_cheque" >Cheque : <el-input  v-model.number="rate.x2_cheque" style=width:25%></el-input></el-form-item>
-        <el-form-item prop="x2_ba" >BA : <el-input  v-model.number="rate.x2_ba" style=width:25%></el-input></el-form-item>
-    </el-form>
-    <br>
-    <div align="center">
-        <el-button type="text" @click="UpdateRateDialogVisible = false">Cancel</el-button>
-        <el-button type="primary" @click="updateRate('rate'); UpdateRateDialogVisible = false; DoneUpdateRateDialogVisible = true" >Save</el-button>
-    </div>
-  </el-dialog> 
-<!-- update rate dialog done -->
+          <el-form-item prop="x1_cash" >X1: &nbsp;&nbsp;&nbsp;Cash : <el-input v-model.number="rate.x1_cash" style=width:25% ></el-input></el-form-item>
+          <el-form-item prop="x1_cheque" >Cheque : <el-input  v-model.number="rate.x1_cheque" style=width:25%></el-input></el-form-item>
+          <el-form-item prop="x1_ba">BA : <el-input v-model.number="rate.x1_ba" style=width:25%></el-input></el-form-item>
+          <br>
+          <el-form-item prop="x2_cash" >X2: &nbsp;&nbsp;&nbsp;Cash : <el-input  v-model.number="rate.x2_cash" style=width:25% ></el-input></el-form-item>
+          <el-form-item prop="x2_cheque" >Cheque : <el-input  v-model.number="rate.x2_cheque" style=width:25%></el-input></el-form-item>
+          <el-form-item prop="x2_ba" >BA : <el-input  v-model.number="rate.x2_ba" style=width:25%></el-input></el-form-item>
+      </el-form>
+      <br>
+      <div align="center">
+          <el-button type="text" @click="UpdateRateDialogVisible = false">Cancel</el-button>
+          <el-button type="primary" @click="updateRate('rate'); UpdateRateDialogVisible = false; DoneUpdateRateDialogVisible = true" >Save</el-button>
+      </div>
+    </el-dialog> 
+  <!-- update rate dialog done -->
 
-  <el-dialog align="center" :visible.sync="DoneUpdateRateDialogVisible" width="30%">
-    <span>Rate Successfully Updated</span><br><br>
-    <div align="center">
-        <el-button type="primary" @click="DoneUpdateRateDialogVisible = false">OK</el-button>
-    </div>
-  </el-dialog>
-<!-- update rate dialog done end -->
- </div> 
+    <el-dialog align="center" :visible.sync="DoneUpdateRateDialogVisible" width="30%">
+      <span>Rate Successfully Updated</span><br><br>
+      <div align="center">
+          <el-button type="primary" @click="DoneUpdateRateDialogVisible = false">OK</el-button>
+      </div>
+    </el-dialog>
+  <!-- update rate dialog done end -->
+  </div> 
 </template>
 
 <script>
diff --git a/resources/assets/js/components/Navbar.vue b/resources/assets/js/components/Navbar.vue
index ccbabb91..e8d970e7 100644
--- a/resources/assets/js/components/Navbar.vue
+++ b/resources/assets/js/components/Navbar.vue
@@ -12,54 +12,39 @@
       <div id="navbarToggler" class="collapse navbar-collapse">
         <ul class="navbar-nav ml-auto">
           <locale-dropdown/>
-          <!-- <li class="nav-item">
-            <a class="nav-link" href="#">Link</a>
-          </li> -->
         </ul>
-
-        <ul class="navbar-nav ml-auto">
-          <!-- Authenticated -->
-          <template v-if="user">
-            <!-- <el-badge :value="12" class="item">
-              <el-button size="share-button"><i class="el-icon-bell"></i></el-button>
-            </el-badge> -->
-            <!-- <el-dropdown trigger="click">
-              <el-badge :value="12" class="item">
-                <el-button icon="el-icon-bell" circle></el-button>
-              </el-badge>
-              <el-dropdown-menu slot="dropdown" style="max-width: 30%" id="notification">
-                <a v-for="item in notification" :href="item.link">
-                  <el-dropdown-item>
-                    {{item.message}}
-                  </el-dropdown-item>
-                </a>
-              </el-dropdown-menu>
-            </el-dropdown> -->
-
-
-            <li class="nav-item dropdown">
-            <a class="nav-link dropdown-toggle text-dark"
-               href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-              <img :src="user.photo_url" class="rounded-circle profile-photo mr-1">
-              {{ user.name }}
-            </a>
-            <div class="dropdown-menu">
-              <router-link :to="{ name: 'settings.profile' }" class="dropdown-item pl-3">
-                <fa icon="cog" fixed-width/>
-                {{ $t('settings') }}
+        <template v-if="user">
+          <ul class="navbar-nav">
+            <li v-if="(user && role == 'user')" class="nav-item">
+              <router-link :to="{ name: 'home' }" class="nav-link">
+                {{ $t('Home') }}
               </router-link>
-
-              <div class="dropdown-divider"/>
-              <a href="#" class="dropdown-item pl-3" @click.prevent="logout">
-                <fa icon="sign-out-alt" fixed-width/>
-                {{ $t('logout') }}
+            </li>
+          </ul>
+          <ul class="navbar-nav ml-auto">
+            <li class="nav-item dropdown">
+              <a class="nav-link dropdown-toggle text-dark"
+                  href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                <img :src="user.photo_url" class="rounded-circle profile-photo mr-1">
+                  {{ user.name }}
               </a>
-            </div>
-          </li>
-          </template>
-          </li>
+              <div class="dropdown-menu">
+                <router-link :to="{ name: 'settings.profile' }" class="dropdown-item pl-3">
+                  <fa icon="cog" fixed-width/>
+                  {{ $t('settings') }}
+                </router-link>
+                <div class="dropdown-divider"/>
+                <a href="#" class="dropdown-item pl-3" @click.prevent="logout">
+                  <fa icon="sign-out-alt" fixed-width/>
+                  {{ $t('logout') }}
+                </a>
+              </div>
+            </li>
+          </ul>
+        </template>
           <!-- Guest -->
-          <template v-else>
+        <template v-else>
+          <ul class="navbar-nav ml-auto">
             <li class="nav-item">
               <router-link :to="{ name: 'login' }" class="nav-link" active-class="active">
                 {{ $t('login') }}
@@ -70,13 +55,21 @@
                 {{ $t('register') }}
               </router-link>
             </li>
-          </template>
-        </ul>
+          </ul>
+        </template>
       </div>
     </div>
   </nav>
 </template>
 
+<style scoped>
+  .profile-photo {
+    width: 2rem;
+    height: 2rem;
+    margin: -.375rem 0;
+  }
+</style>
+
 <script>
 import { mapGetters } from 'vuex'
 import LocaleDropdown from './LocaleDropdown'
@@ -100,7 +93,8 @@ export default {
   }),
 
   computed: mapGetters({
-    user: 'auth/user'
+    user: 'auth/user',
+    role: 'auth/role'
   }),
 
   methods: {
@@ -115,10 +109,3 @@ export default {
 }
 </script>
 
-<style scoped>
-.profile-photo {
-  width: 2rem;
-  height: 2rem;
-  margin: -.375rem 0;
-}
-</style>
diff --git a/resources/assets/js/pages/booking/transfer.vue b/resources/assets/js/pages/booking/transfer.vue
index 1346fc78..23e4d807 100644
--- a/resources/assets/js/pages/booking/transfer.vue
+++ b/resources/assets/js/pages/booking/transfer.vue
@@ -72,7 +72,7 @@
         <div class="card-body">
           <a target="_blank" :href="booking_details.user_bankslip_path">
             <a target="_blank" :href="getURL(booking_details.user_bankslip_path)">
-              <img v-if="isImage(booking_details.user_bankslip_path)" v-bind:src="booking_details.user_bankslip_path" class="image">
+              <img v-if="isImage(booking_details.user_bankslip_path)" v-bind:src="booking_details.user_bankslip_path" class="uploadedImage">
               <p v-else>Download</p>
             </a>
           </a>    
diff --git a/resources/assets/js/pages/booking/uploadPo.vue b/resources/assets/js/pages/booking/uploadPo.vue
index bfb08d35..9edb5571 100644
--- a/resources/assets/js/pages/booking/uploadPo.vue
+++ b/resources/assets/js/pages/booking/uploadPo.vue
@@ -142,7 +142,7 @@
     text-align:center;
     margin-bottom:3%;
   }
-  .bankinSlipImage {
+  .image {
     border: 1px solid #ddd;
     border-radius: 4px;
     margin-left: auto;
@@ -150,7 +150,7 @@
     width: 150px;
     display: block;
   }
-  .bankinSlipImage:hover {
+  .image:hover {
     box-shadow: 0 0 2px 1px rgba(0, 140, 186, 0.5);
   }
   .uploadAreaTwo {
diff --git a/resources/assets/js/pages/home.vue b/resources/assets/js/pages/home.vue
index 9e505fd0..81c89ecd 100644
--- a/resources/assets/js/pages/home.vue
+++ b/resources/assets/js/pages/home.vue
@@ -168,76 +168,74 @@
 
     <!-- Booking_confirmation_popup -->
     <el-dialog :visible.sync="dialogFormVisible1" :fullscreen="true" title="Booking Confirmation" center>
-      <table class="table table-bordered">
-        <tbody>
-          <tr>
-            <td>Date : </td>
-            <td> {{ bookingConfirmTable.date }}</td>
-          </tr>
-          <tr>
-            <td>Customer Marking : </td>
-            <td> {{ bookingConfirmTable.marking }}</td>
-          </tr>
-          <tr>
-            <td>Payment for (Order No.) : </td>
-            <td> {{ bookingConfirmTable.payment_order }}</td>
-          </tr>
-          <tr>
-            <td>Payment Method : </td>
-            <td> {{ bookingConfirmTable.payment_method }}</td>
-          </tr>
-          <tr>
-            <td>Remarks : </td>
-            <td> {{ bookingConfirmTable.remark }}</td>
-          </tr>
-          <tr>
-            <td></td>
-            <td></td>
-          </tr>
-          <tr>
-            <td>CNY/RMB :</td>
-            <td>
-              <b> RM {{ bookingConfirmTable.amount }}</b>
-            </td>
-          </tr>
-          <tr>
-            <td>+ Service Charges :</td>
-            <td>
-               RM {{ bookingConfirmTable.service_charge }}
-            </td>
-          </tr>
-          <tr>
-            <td>/ Rate :</td>
-            <td>
-              {{ bookingConfirmTable.rate }}
-            </td>
-          </tr>
-          <tr>
-            <td></td>
-            <td>
-               RM {{ bookingConfirmTable.subtotal }}
-            </td>
-          </tr>
-          <tr>
-            <td>+ Tax :</td>
-            <td>
-              RM {{ bookingConfirmTable.taxAmount }}
-            </td>
-          </tr>
-          <tr>
-            <td>+ Billing Charge :</td>
-            <td>
-               RM {{ bookingConfirmTable.billingChargeAmount }}
-            </td>
-          </tr>
-          <tr>
-            <td>Bank In Amount :</td>
-            <td>
-              <b> RM {{ bookingConfirmTable.bankin_amount }}</b>
-            </td>
-          </tr>
-        </tbody>
-      </table>
+      <div class="table-responsive">
+        <table class="table">
+          <tbody>
+            <tr>
+              <td>Date : </td>
+              <td> {{ bookingConfirmTable.date }}</td>
+            </tr>
+            <tr>
+              <td>Customer Marking : </td>
+              <td> {{ bookingConfirmTable.marking }}</td>
+            </tr>
+            <tr>
+              <td>Payment for (Order No.) : </td>
+              <td> {{ bookingConfirmTable.payment_order }}</td>
+            </tr>
+            <tr>
+              <td>Payment Method : </td>
+              <td> {{ bookingConfirmTable.payment_method }}</td>
+            </tr>
+            <tr>
+              <td>Remarks : </td>
+              <td> {{ bookingConfirmTable.remark }}</td>
+            </tr>
+            <tr>
+              <td>CNY/RMB :</td>
+              <td>
+                <b> RM {{ bookingConfirmTable.amount }}</b>
+              </td>
+            </tr>
+            <tr>
+              <td>+ Service Charges :</td>
+              <td>
+                RM {{ bookingConfirmTable.service_charge }}
+              </td>
+            </tr>
+            <tr>
+              <td>Rate :</td>
+              <td>
+                {{ bookingConfirmTable.rate }}
+              </td>
+            </tr>
+            <tr>
+              <td></td>
+              <td>
+                RM {{ bookingConfirmTable.subtotal }}
+              </td>
+            </tr>
+            <tr>
+              <td>+ Tax :</td>
+              <td>
+                RM {{ bookingConfirmTable.taxAmount }}
+              </td>
+            </tr>
+            <tr>
+              <td>+ Billing Charge :</td>
+              <td>
+                RM {{ bookingConfirmTable.billingChargeAmount }}
+              </td>
+            </tr>
+            <tr>
+              <td>Bank In Amount :</td>
+              <td>
+                <b> RM {{ bookingConfirmTable.bankin_amount }}</b>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
       <span slot="footer" class="dialog-footer">
         <!-- <el-button @click="dialogFormVisible = false">Cancel</el-button> -->
         <el-button :loading="loading" type="primary" @click="createBooking">Confirm</el-button>