diff --git a/package.json b/package.json
index 23f84404..bb7d8524 100644
--- a/package.json
+++ b/package.json
@@ -18,6 +18,7 @@
     "@fortawesome/vue-fontawesome": "^0.0.22",
     "axios": "^0.18.0",
     "bootstrap": "^4.0.0",
+    "element-ui": "^2.3.9",
     "jquery": "^3.3.1",
     "js-cookie": "^2.2.0",
     "popper.js": "^1.14.1",
diff --git a/public/fonts/vendor/element-ui/lib/theme-chalk/element-icons.ttf b/public/fonts/vendor/element-ui/lib/theme-chalk/element-icons.ttf
new file mode 100644
index 00000000..73bc90f4
Binary files /dev/null and b/public/fonts/vendor/element-ui/lib/theme-chalk/element-icons.ttf differ
diff --git a/public/fonts/vendor/element-ui/lib/theme-chalk/element-icons.woff b/public/fonts/vendor/element-ui/lib/theme-chalk/element-icons.woff
new file mode 100644
index 00000000..28da65d4
Binary files /dev/null and b/public/fonts/vendor/element-ui/lib/theme-chalk/element-icons.woff differ
diff --git a/public/mix-manifest.json b/public/mix-manifest.json
index a446c42a..774f9597 100644
--- a/public/mix-manifest.json
+++ b/public/mix-manifest.json
@@ -1,7 +1,7 @@
 {
-    "/js/lang-zh-CN.05f1eac96ac4b1a58972.js": "/js/lang-zh-CN.05f1eac96ac4b1a58972.js",
-    "/js/lang-es.7f2b93b9c03c518567a9.js": "/js/lang-es.7f2b93b9c03c518567a9.js",
-    "/js/lang-en.592895da306250f00312.js": "/js/lang-en.592895da306250f00312.js",
+    "/js/lang-zh-CN.c0da3973e52421a8cfe5.js": "/js/lang-zh-CN.c0da3973e52421a8cfe5.js",
+    "/js/lang-es.f4a1a5b4a30e92527b46.js": "/js/lang-es.f4a1a5b4a30e92527b46.js",
+    "/js/lang-en.0f790217417404ecc662.js": "/js/lang-en.0f790217417404ecc662.js",
     "/js/app.js": "/js/app.js",
     "/css/app.css": "/css/app.css"
 }
\ No newline at end of file
diff --git a/resources/assets/js/app.js b/resources/assets/js/app.js
index 525edb8e..c7bb2bd5 100644
--- a/resources/assets/js/app.js
+++ b/resources/assets/js/app.js
@@ -3,16 +3,21 @@ import store from '~/store'
 import router from '~/router'
 import i18n from '~/plugins/i18n'
 import App from '~/components/App'
+import ElementUI from 'element-ui';
+import 'element-ui/lib/theme-chalk/index.css';
+import locale from 'element-ui/lib/locale/lang/en'
 
 import '~/plugins'
 import '~/components'
 
 Vue.config.productionTip = false
 
+Vue.use(ElementUI, { locale })
 /* eslint-disable no-new */
 new Vue({
   i18n,
   store,
   router,
+  el: '#app',
   ...App
 })
diff --git a/resources/assets/js/pages/home.vue b/resources/assets/js/pages/home.vue
index 6f8a26a0..80171cd7 100644
--- a/resources/assets/js/pages/home.vue
+++ b/resources/assets/js/pages/home.vue
@@ -1,15 +1,119 @@
 <template>
-  <card :title="$t('home')">
-    {{ $t('you_are_logged_in') }}
-  </card>
+  <el-main>
+    <div class="row">
+      <div class="col-lg-2 m-auto col-centered">
+        <el-input placeholder="Amount" v-model="input"></el-input>
+      </div>
+      <div class="col-lg-8 m-auto col-centered">
+
+        <el-select v-model="value" placeholder="MYR">
+          <el-option v-for="item in options1" :key="item.value" :label="item.label" :value="item.value">
+          </el-option>
+        </el-select>
+        <el-button icon="el-icon-search" circle></el-button>
+        <el-select v-model="value2" placeholder="RMB">
+          <el-option v-for="item2 in options2" :key="item2.value2" :label="item2.label2" :value="item2.value2">
+          </el-option>
+        </el-select>
+      </div>
+
+
+
+    </div>
+    <hr>
+    <el-row :gutter="20">
+      <el-table :data="tableData" style="width: 100%">
+        <el-table-column prop="date" label="Date" sortable :filters="[{text: '2016-05-01', value: '2016-05-01'}, {text: '2016-05-02', value: '2016-05-02'}, {text: '2016-05-03', value: '2016-05-03'}, {text: '2016-05-04', value: '2016-05-04'}]"
+          :filter-method="filterHandler">
+        </el-table-column>
+        <el-table-column prop="name" label="Order" >
+        </el-table-column>
+        <el-table-column prop="address" label="Term" :formatter="formatter">
+        </el-table-column>
+                <el-table-column prop="address" label="Rate" :formatter="formatter">
+        </el-table-column>
+                <el-table-column prop="address" label="Amount" :formatter="formatter">
+        </el-table-column>
+                        <el-table-column prop="address" label="Transfer Amount" :formatter="formatter">
+        </el-table-column>
+                       <el-table-column prop="address" label="ETA" :formatter="formatter">
+        </el-table-column>
+                       <el-table-column prop="address" label="Pay Method" :formatter="formatter">
+        </el-table-column>
+                         <el-table-column prop="address" label="Status" :formatter="formatter">
+        </el-table-column>
+                         <el-table-column prop="address" label="Balance" :formatter="formatter">
+        </el-table-column>
+                         <el-table-column prop="address" label="Time Left" :formatter="formatter">
+        </el-table-column>
+        <el-table-column prop="tag" label="Tag" width="100" :filters="[{ text: 'Home', value: 'Home' }, { text: 'Office', value: 'Office' }]"
+          :filter-method="filterTag" filter-placement="bottom-end">
+          <template slot-scope="scope">
+            <el-tag :type="scope.row.tag === 'Home' ? 'primary' : 'success'" disable-transitions>{{scope.row.tag}}</el-tag>
+          </template>
+        </el-table-column>
+      </el-table>
+    </el-row>
+  </el-main>
 </template>
 
 <script>
-export default {
-  middleware: ['auth'],
+  export default {
+    middleware: ['auth'],
 
-  metaInfo () {
-    return { title: this.$t('home') }
+    data() {
+      return {
+        options1: [{
+          value: 'RMB',
+          label: 'RMB'
+        }, {
+          value: 'MYR',
+          label: 'MYR'
+        }],
+        options2: [{
+          value2: 'MYR',
+          label2: 'MYR'
+        }, {
+          value2: 'RMB',
+          label2: 'RMB'
+        }],
+        tableData: [{
+          date: '2016-05-03',
+          name: 'Tom',
+          address: 'No. 189, Grove St, Los Angeles',
+          tag: 'Home'
+        }, {
+          date: '2016-05-02',
+          name: 'Tom',
+          address: 'No. 189, Grove St, Los Angeles',
+          tag: 'Office'
+        }, {
+          date: '2016-05-04',
+          name: 'Tom',
+          address: 'No. 189, Grove St, Los Angeles',
+          tag: 'Home'
+        }, {
+          date: '2016-05-01',
+          name: 'Tom',
+          address: 'No. 189, Grove St, Los Angeles',
+          tag: 'Office'
+        }],
+        value: '',
+        value2: '',
+        input: '',
+      }
+    },
+    methods: {
+      formatter(row, column) {
+        return row.address;
+      },
+      filterTag(value, row) {
+        return row.tag === value;
+      },
+      filterHandler(value, row, column) {
+        const property = column['property'];
+        return row[property] === value;
+      }
+    }
   }
-}
-</script>
+</script>
\ No newline at end of file
diff --git a/resources/views/index.blade.php b/resources/views/index.blade.php
index 8f61071f..9ba961dc 100644
--- a/resources/views/index.blade.php
+++ b/resources/views/index.blade.php
@@ -27,6 +27,7 @@ $polyfills = [
   <title>{{ config('app.name') }}</title>
 
   <link rel="stylesheet" href="{{ mix('css/app.css') }}">
+  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
 </head>
 <body>
   <div id="app"></div>
@@ -44,6 +45,7 @@ $polyfills = [
     <script src="{{ mix('js/manifest.js') }}"></script>
     <script src="{{ mix('js/vendor.js') }}"></script>
     <script src="{{ mix('js/app.js') }}"></script>
+    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
   @endif
 </body>
 </html>