diff --git a/resources/assets/js/components/LocaleDropdown.vue b/resources/assets/js/components/LocaleDropdown.vue
index f4b0d5c3..99a8f7ff 100644
--- a/resources/assets/js/components/LocaleDropdown.vue
+++ b/resources/assets/js/components/LocaleDropdown.vue
@@ -13,11 +13,52 @@
         </a>
       </div>
     </li>
-    <li><a class="nav-link" href="#" role="button">Update Rate</a></li>
-    <li><a class="nav-link" href="#" role="button">Complete Order</a></li>
+    <li><el-popover placement="top" width="300" v-model="UpdateRatePopoverVisible">
+          <div align="center">
+            <p>Today's Rate</p>
+            <p>X1 : Cash: 1.76 Cheque: 1.66 BA: 1.63</p>
+            <p>X2 : Cash: 1.65 Cheque: 1.70 BA: 1.58</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>
+    <li><a class="nav-link" href="/admin/complete-order" role="button">Complete Order</a></li>
     <li><a class="nav-link" href="#" role="button">Transaction History</a></li>
     <li><a class="nav-link" href="#" role="button">Upload Supplier Bank Slip to System</a></li>
   </ul>
+
+<!-- update rate dialog -->
+  <el-dialog align="center" :visible.sync="UpdateRateDialogVisible">
+    <el-form :inline="true" align="center">
+        <el-form-item>X1 : 
+            Cash : <el-input style=width:10% ></el-input>
+            Cheque : <el-input style=width:10%></el-input>
+            BA : <el-input style=width:10%></el-input>
+        </el-form-item>
+    </el-form>
+    <el-form :inline="true" align="center">
+        <el-form-item>X2 : 
+            Cash : <el-input style=width:10% ></el-input>
+            Cheque : <el-input style=width:10%></el-input>
+            BA : <el-input style=width:10%></el-input>
+        </el-form-item>
+    </el-form>
+    <div align="center">
+        <el-button type="text" @click="UpdateRateDialogVisible = false">Cancel</el-button>
+        <el-button type="primary" @click="UpdateRateDialogVisible = false; DoneUpdateRateDialogVisible = true">Save</el-button>
+    </div>
+  </el-dialog>
+<!-- update rate dialog end -->
+<!-- update rate dialog end -->
+  <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 end -->
  </div> 
 </template>
 
@@ -26,6 +67,13 @@ import { mapGetters } from 'vuex'
 import { loadMessages } from '~/plugins/i18n'
 
 export default {
+  data() {
+    return {
+        UpdateRatePopoverVisible: false,
+        UpdateRateDialogVisible: false,
+        DoneUpdateRateDialogVisible: false
+      };
+  },
   computed: mapGetters({
     locale: 'lang/locale',
     locales: 'lang/locales'
diff --git a/resources/assets/js/pages/admin/complete-order.vue b/resources/assets/js/pages/admin/complete-order.vue
new file mode 100644
index 00000000..e9681fad
--- /dev/null
+++ b/resources/assets/js/pages/admin/complete-order.vue
@@ -0,0 +1,39 @@
+<template>
+<div>
+    <span align="center"><h2>Complete Order</h2></span><br>
+    <el-table :data="tableData" stripe style="width: 100%">
+        <el-table-column prop="order_no" label="Order No" sortable></el-table-column>
+        <el-table-column prop="cust_marking" label="Customer Marking" sortable></el-table-column>
+        <el-table-column prop="order_date" label="Order Date" sortable></el-table-column>
+        <el-table-column prop="transfer_amount" label="Transfer Amount (RMB)" sortable></el-table-column>
+        <el-table-column prop="status" label="Status"></el-table-column>
+    </el-table>
+    <div>
+        <span slot="footer" class="pagination-footer">
+            <el-pagination background layout="prev, pager, next" :total="5"></el-pagination>
+        </span>
+    </div>
+</div>
+</template>
+
+<script>
+export default {
+    data() {
+      return {
+        tableData: [{
+          order_no: '001',
+          cust_marking: 'CIEF/155ECE',
+          order_date: '27/6/2018',
+          transfer_amount: '1200',
+          status: 'Complete',
+        }, {
+          order_no: '002',
+          cust_marking: 'CIEF/143EDR',
+          order_date: '23/6/2018',
+          transfer_amount: '14000',
+          status: 'Complete',
+        }]
+      }
+    }
+}
+</script>
\ No newline at end of file
diff --git a/resources/assets/js/router/routes.js b/resources/assets/js/router/routes.js
index 116f0d7f..988d3878 100644
--- a/resources/assets/js/router/routes.js
+++ b/resources/assets/js/router/routes.js
@@ -14,8 +14,6 @@ const SettingsAdminCreditSetting = () => import('~/pages/settings/admin-credit-s
 const SettingsAdminChinaBank = () => import('~/pages/settings/admin-china-bank').then(m => m.default || m)
 const SettingsAdminBankSetting = () => import('~/pages/settings/admin-bank-setting').then(m => m.default || m)
 
-// const Admin = () => import('~/pages/admin/adminhome').then(m => m.default || m)
-const Admin = () => import('~/pages/admin/index').then(m => m.default || m)
 // Booking
 const Upload = () => import('~/pages/booking/uploadUserBankSlip').then(m => m.default || m)
 const Confirmation = () => import('~/pages/booking/confirmation').then(m => m.default || m)
@@ -32,7 +30,9 @@ const UploadCNSlip = () => import('~/pages/admin/booking/uploadChinaBankslip').t
 const UploadInvoice = () => import('~/pages/admin/booking/uploadInvoice').then(m => m.default || m)
 // const Completed = () => import('~/pages/booking/uploadUserBankSlip').then(m => m.default || m)
 
+// Admin pages
 const AdminHome = () => import('~/pages/admin/home').then(m => m.default || m)
+const CompleteOrder = () => import('~/pages/admin/complete-order').then(m => m.default || m)
 
 export default [
   { path: '/', name: 'welcome', component: Welcome },
@@ -62,13 +62,6 @@ export default [
   { path: '/booking/:id/po-complete', name: 'booking.user.pocomplete', component: PoComplete },
   { path: '/booking/:id/complete', name: 'booking.complete', component: Completed },
 
-  { path: '/admin',
-    component: Admin,
-    children: [
-      { path: '', redirect: { name: 'admin.index' } },
-      { path: 'index', name: 'admin.index', component: Admin },
-      { path: 'home', name: 'admin.home', component: AdminHome }
-    ] },
   // Admin booking
   { path: '/booking/:id/verification', name: 'booking.admin.verification', component: Verification },
   { path: '/booking/:id/supplier', name: 'booking.admin.supplier', component: Supplier },
@@ -77,6 +70,8 @@ export default [
   { path: '/booking/:id/upload-invoice', name: 'booking.admin.invoice', component: UploadInvoice },
   // { path: '/booking/:id/complete', name: 'booking.complete', component: Completed },
 
+  // Admin pages
   { path: '/admin', name: 'admin.home', component: AdminHome },
+  { path: '/admin/complete-order', name: 'admin.complete-order', component: CompleteOrder },
   { path: '*', name: 'notfound', component: NotFound }
 ]