diff --git a/frontend/src/js/components/UserList.vue b/frontend/src/js/components/UserList.vue
new file mode 100644
index 0000000..384a8eb
--- /dev/null
+++ b/frontend/src/js/components/UserList.vue
@@ -0,0 +1,118 @@
+<script>
+
+export default {
+  data () {
+    return {
+      hello: null,
+      itemsPerPage: 5,
+      headers: [
+        {
+          title: 'Dessert (100g serving)',
+          align: 'start',
+          sortable: false,
+          key: 'name',
+        },
+        { title: 'Calories', align: 'end', key: 'calories' },
+        { title: 'Fat (g)', align: 'end', key: 'fat' },
+        { title: 'Carbs (g)', align: 'end', key: 'carbs' },
+        { title: 'Protein (g)', align: 'end', key: 'protein' },
+        { title: 'Iron (%)', align: 'end', key: 'iron' },
+      ],
+      desserts: [
+        {
+          name: 'Frozen Yogurt',
+          calories: 159,
+          fat: 6.0,
+          carbs: 24,
+          protein: 4.0,
+          iron: '1',
+        },
+        {
+          name: 'Jelly bean',
+          calories: 375,
+          fat: 0.0,
+          carbs: 94,
+          protein: 0.0,
+          iron: '0',
+        },
+        {
+          name: 'KitKat',
+          calories: 518,
+          fat: 26.0,
+          carbs: 65,
+          protein: 7,
+          iron: '6',
+        },
+        {
+          name: 'Eclair',
+          calories: 262,
+          fat: 16.0,
+          carbs: 23,
+          protein: 6.0,
+          iron: '7',
+        },
+        {
+          name: 'Gingerbread',
+          calories: 356,
+          fat: 16.0,
+          carbs: 49,
+          protein: 3.9,
+          iron: '16',
+        },
+        {
+          name: 'Ice cream sandwich',
+          calories: 237,
+          fat: 9.0,
+          carbs: 37,
+          protein: 4.3,
+          iron: '1',
+        },
+        {
+          name: 'Lollipop',
+          calories: 392,
+          fat: 0.2,
+          carbs: 98,
+          protein: 0,
+          iron: '2',
+        },
+        {
+          name: 'Cupcake',
+          calories: 305,
+          fat: 3.7,
+          carbs: 67,
+          protein: 4.3,
+          iron: '8',
+        },
+        {
+          name: 'Honeycomb',
+          calories: 408,
+          fat: 3.2,
+          carbs: 87,
+          protein: 6.5,
+          iron: '45',
+        },
+        {
+          name: 'Donut',
+          calories: 452,
+          fat: 25.0,
+          carbs: 51,
+          protein: 4.9,
+          iron: '22',
+        }
+      ]
+    }
+  }
+}
+</script>
+
+<template>
+  <div>
+    <v-data-table
+      v-model:items-per-page="itemsPerPage"
+      :headers="headers"
+      :items="desserts"
+      item-value="name"
+      class="elevation-1"
+    ></v-data-table>
+  </div>
+</template>
diff --git a/frontend/src/js/views/UserList.vue b/frontend/src/js/views/UserList.vue
new file mode 100644
index 0000000..3261d99
--- /dev/null
+++ b/frontend/src/js/views/UserList.vue
@@ -0,0 +1,17 @@
+<script>
+
+import UserList from '../components/UserList.vue'
+
+export default {
+  components: {
+    UserList,
+  },
+}
+
+</script>
+
+<template>
+  <div>
+    <UserList />
+  </div>
+</template>