diff --git a/frontend/src/pages/role.vue b/frontend/src/pages/role.vue
index 048420f0ea508bd010cfd5fe6f59f8e8b3a9fe2a..c049c612f6a859ee28a6b970312b340bb991342a 100644
--- a/frontend/src/pages/role.vue
+++ b/frontend/src/pages/role.vue
@@ -1,7 +1,39 @@
 <template>
-  <h1>Role</h1>
+  <div>
+    <section class="content-header">
+      <h1>
+        Daftar Role
+        <small>Pengaturan Peran pada Pengguna</small>
+      </h1>
+    </section>
+    <section class="content">
+      <div class="box">
+        <div class="box-header">
+          <h3 class="box-title">Daftar Role JABAR-INOV-MONEV-2</h3>
+        </div>
+        <div class="box-body">
+          <div class="dataTables_wrapper form-inline dt-bootstrap">
+            <table id="user-table" class="table table-bordered table-striped dataTable">
+            </table>
+          </div>
+        </div>
+      </div>
+    </section>
+  </div>
 </template>
 <script>
+require('jquery')
+require('datatables.net-bs')
+
+$(document).ready(function() {
+  var table = $('#user-table').DataTable({
+    'columns': [
+      {'data': 'test', 'title': 'Test'},
+      {'data': 'testone', 'title': 'Test one'},
+      {'data': 'testtwo', 'title': 'Test two'}
+    ]
+  });
+});
 export default {
   name: 'Role'
 }