diff --git a/resources/js/views/UserIndex.vue b/resources/js/views/UserIndex.vue
index 2946296..180962b 100644
--- a/resources/js/views/UserIndex.vue
+++ b/resources/js/views/UserIndex.vue
@@ -1,49 +1,111 @@
 <template>
     <div class="users">
-        <div class="loading" v-if="loading">Loading...</div>
         <div v-if="error" class="error">
             <p>{{ error }}</p>
-            <p>
-                <button @click.prevent="fetchData">
-                    Try again
-                </button>
-            </p>
         </div>
+
         <ul v-if="users">
             <li v-for="{ name, email } in users">
                 <strong>Name:</strong>  {{ name }},
                 <strong>Email:</strong> {{ email}}
             </li>
         </ul>
+        <div class="pagination">
+            <button :disabled="! prevPage" @click.prevent"goToPrev">Previous</button>
+            <button :disabled="! nexPage" @click.prevent"goToNext">Next</button>
+        </div>
     </div>
 </template>
+
 <script>
 import axios from 'axios';
+
+const getUsers = (page, callback) {
+    const params = page{ page };
+    axios
+        .get('/api/users', { params })
+        .then(response => {
+            callback(null, response.data);
+        }).catch(error => {
+            callback(error, err.response.data);
+        });
+};
+
 export default {
     data() {
         return {
-            loading: false,
             users: null,
+            meta: null,
+            links: {
+                first: null,
+                last: null,
+                next: null,
+                prev: null,
+            },
             error: null,
         };
     },
-    created() {
-        this.fetchData();
+    computed: {
+        nextPage() {
+            if( !this.meta || this.meta.current_page === this.meta.last_page ) {
+                return;
+            }
+
+            return this.meta.current_page + 1;
+        },
+        prevPage() {
+            if( !this.meta || this.meta.current_page === 1 ) {
+                return;
+            }
+
+            return this.meta.current_page - 1;
+        },
+        paginationCount() {
+            if( !this.meta ) {
+                return;
+            }
+
+            const { current_page, last_page } = this.meta;
+            return `${current_page} of ${last_page}`
+        } 
+    },
+    beforeRouteEnter(to, from, next) {
+        getUsers(to.query.page, (err, data) => {
+            next(vm => vm.setData(err, data));
+        });
+    },
+    beforeRouteUpdate(to, from, next) {
+        this.users = this.links = this.meta = null;
+        getUsers(to.query.page, (err, data) => {
+            this.setData(err, data);
+            next();
+        }
     },
     methods: {
-        fetchData() {
-            this.error = this.users = null;
-            this.loading = true;
-            axios
-                .get('/api/users')
-                .then(response => {
-                    this.loading = false;
-                    this.users = response.data.data;
-                }).catch(error => {
-                    this.loading = false;
-                    this.error = error.response.data.message || error.message;
-                });
-        }
+        goToNext() {
+            this.$router.push({
+                query: {
+                    page: this.nextPage,
+                },
+            });
+        },
+        goToPrev() {
+            this.$router.push({
+                name: 'users.index',
+                query: {
+                    page: this.prevPage,
+                }
+            });
+        },
+        setData(err, { data: users, link, meta }) {
+            if(err) {
+                this.error = err.toString();
+            } else {
+                this.users = users;
+                this.links = links;
+                this.meta = meta;
+            }
+        },
     }
 }
 </script>