diff --git a/resources/assets/js/pages/home.vue b/resources/assets/js/pages/home.vue
index 245222e7..9d8a529d 100644
--- a/resources/assets/js/pages/home.vue
+++ b/resources/assets/js/pages/home.vue
@@ -234,8 +234,7 @@
     <br>
     <br>
     <hr>
-
-    <!-- Booking Table -->
+<!-- Booking Table -->
     <el-row :gutter="20">
       <div>
         <el-table :data="bookingTable">
@@ -275,12 +274,17 @@
           </el-table-column>
         </el-table>
       </div>
-    </el-row>
+    </el-row><br><br>
     <div align="right">
-        <el-pagination background layout="prev, pager, next" :total="30"></el-pagination>
+      <el-button type="primary" size="mini" @click="fetchPaginateBooking(pagination.prev_page_url)" :disabled="!pagination.prev_page_url">
+        Previous
+      </el-button>
+      <span>Page {{pagination.current_page}} of {{pagination.last_page}}</span>
+      <el-button type="primary" size="mini" @click="fetchPaginateBooking(pagination.next_page_url)" :disabled="!pagination.next_page_url">
+        Next
+      </el-button>
     </div>
     <!-- Booking Table-end -->
-
   </el-main>
 </template>
 <style>
@@ -358,6 +362,8 @@ export default {
       formLabelWidth: '0px',
       bookingTable: [
       ],
+      url: 'api/booking',
+      pagination: [],
       bookingConfirmTable: {
         date: 'undefined',
         marking: 'undefined',
@@ -372,20 +378,30 @@ export default {
     }
   },
   mounted () {
-    axios
-      .get('/api/booking/')
-      .then((response) => {
-        console.log(response)
-        this.bookingTable = response.data.data
-        // loading.close()
-      }).catch((error) => {
-        // loading.close()
-        // this.$router.push({
-        //   name: 'notfound'
-        // })
-      })
+    this.getBooking()
   },
   methods: {
+    getBooking() {
+      let $this = this
+      axios.get(this.url).then(response => {
+        this.bookingTable = response.data.data
+
+        $this.makePagination(response.data)
+      })
+    },
+    makePagination(data){
+      let pagination =  {
+        current_page: data.current_page,
+        last_page: data.last_page,
+        next_page_url: data.next_page_url,
+        prev_page_url: data.prev_page_url
+      }
+      this.pagination = pagination
+    },
+    fetchPaginateBooking(url) {
+      this.url = url
+      this.getBooking()
+    },
     // TODO fetch booking data on load
     formatter (row, column) {
       return row.address
@@ -408,13 +424,6 @@ export default {
       this.dialogFormVisible = true
       this.term = newterm
     },
-    BookingList () {
-      axios.get('api/booking')
-        .then((response) => {
-          console.log(response)
-          this.list = response.data
-        })
-    },
     // Get calculation before submitting booking
     getCalculationValue (formName) {
       this.loading = true
diff --git a/vendor/composer/autoload_static.php b/vendor/composer/autoload_static.php
index 0238e370..0b3ff9c9 100644
--- a/vendor/composer/autoload_static.php
+++ b/vendor/composer/autoload_static.php
@@ -4,7 +4,7 @@
 
 namespace Composer\Autoload;
 
-class ComposerStaticInit186bbd0d0f979469b3a193511536d69e
+class ComposerStaticInit50cdbea3724e5f1d6267359fe107641a
 {
     public static $files = array (
         '6124b4c8570aa390c21fafd04a26c69f' => __DIR__ . '/..' . '/myclabs/deep-copy/src/DeepCopy/deep_copy.php',
@@ -12,11 +12,11 @@ class ComposerStaticInit186bbd0d0f979469b3a193511536d69e
         '25072dd6e2470089de65ae7bf11d3109' => __DIR__ . '/..' . '/symfony/polyfill-php72/bootstrap.php',
         '667aeda72477189d0494fecd327c3641' => __DIR__ . '/..' . '/symfony/var-dumper/Resources/functions/dump.php',
         '320cde22f66dd4f5d3fd621d3e88b98f' => __DIR__ . '/..' . '/symfony/polyfill-ctype/bootstrap.php',
-        '2c102faa651ef8ea5874edb585946bce' => __DIR__ . '/..' . '/swiftmailer/swiftmailer/lib/swift_required.php',
         'a0edc8309cc5e1d60e3047b5df6b7052' => __DIR__ . '/..' . '/guzzlehttp/psr7/src/functions_include.php',
+        '2c102faa651ef8ea5874edb585946bce' => __DIR__ . '/..' . '/swiftmailer/swiftmailer/lib/swift_required.php',
         'c964ee0ededf28c96ebd9db5099ef910' => __DIR__ . '/..' . '/guzzlehttp/promises/src/functions_include.php',
-        '5255c38a0faeba867671b61dfda6d864' => __DIR__ . '/..' . '/paragonie/random_compat/lib/random.php',
         '37a3dc5111fe8f707ab4c132ef1dbc62' => __DIR__ . '/..' . '/guzzlehttp/guzzle/src/functions_include.php',
+        '5255c38a0faeba867671b61dfda6d864' => __DIR__ . '/..' . '/paragonie/random_compat/lib/random.php',
         'bd9634f2d41831496de0d3dfe4c94881' => __DIR__ . '/..' . '/symfony/polyfill-php56/bootstrap.php',
         'f0906e6318348a765ffb6eb24e0d0938' => __DIR__ . '/..' . '/laravel/framework/src/Illuminate/Foundation/helpers.php',
         '58571171fd5812e6e447dce228f52f4d' => __DIR__ . '/..' . '/laravel/framework/src/Illuminate/Support/helpers.php',
@@ -145,8 +145,8 @@ class ComposerStaticInit186bbd0d0f979469b3a193511536d69e
         'phpDocumentor\\Reflection\\' => 
         array (
             0 => __DIR__ . '/..' . '/phpdocumentor/reflection-common/src',
-            1 => __DIR__ . '/..' . '/phpdocumentor/type-resolver/src',
-            2 => __DIR__ . '/..' . '/phpdocumentor/reflection-docblock/src',
+            1 => __DIR__ . '/..' . '/phpdocumentor/reflection-docblock/src',
+            2 => __DIR__ . '/..' . '/phpdocumentor/type-resolver/src',
         ),
         'Zizaco\\Entrust\\' => 
         array (
@@ -4767,10 +4767,10 @@ class ComposerStaticInit186bbd0d0f979469b3a193511536d69e
     public static function getInitializer(ClassLoader $loader)
     {
         return \Closure::bind(function () use ($loader) {
-            $loader->prefixLengthsPsr4 = ComposerStaticInit186bbd0d0f979469b3a193511536d69e::$prefixLengthsPsr4;
-            $loader->prefixDirsPsr4 = ComposerStaticInit186bbd0d0f979469b3a193511536d69e::$prefixDirsPsr4;
-            $loader->prefixesPsr0 = ComposerStaticInit186bbd0d0f979469b3a193511536d69e::$prefixesPsr0;
-            $loader->classMap = ComposerStaticInit186bbd0d0f979469b3a193511536d69e::$classMap;
+            $loader->prefixLengthsPsr4 = ComposerStaticInit50cdbea3724e5f1d6267359fe107641a::$prefixLengthsPsr4;
+            $loader->prefixDirsPsr4 = ComposerStaticInit50cdbea3724e5f1d6267359fe107641a::$prefixDirsPsr4;
+            $loader->prefixesPsr0 = ComposerStaticInit50cdbea3724e5f1d6267359fe107641a::$prefixesPsr0;
+            $loader->classMap = ComposerStaticInit50cdbea3724e5f1d6267359fe107641a::$classMap;
 
         }, null, ClassLoader::class);
     }