diff --git a/src/views/Models.vue b/src/views/Models.vue
index 5987e4f..929185a 100644
--- a/src/views/Models.vue
+++ b/src/views/Models.vue
@@ -1,10 +1,71 @@
 <template>
-  <div></div>
+  <b-row>
+    <b-col>
+      <b-table striped hover :items="models" :fields="fields" :tbody-tr-class="rowClass" :busy="actionPending">
+
+        <!-- A virtual composite column -->
+        <template #cell(actions)="data">
+          <b-button class="mx-1" size="sm" variant="primary" @click="actionInfo(data.id)"><b-icon icon="info"/></b-button>
+          <b-button class="mx-1" size="sm" variant="danger" @click="actionDelete(data.id)"><b-icon icon="trash"/></b-button>
+        </template>
+
+      </b-table>
+    </b-col>
+  </b-row>
 </template>
 
 <script>
 export default {
-  name: "Models"
+  name: "Models",
+  data() {
+    return {
+      actionPending: false,
+      models: [],
+      fields: [
+        {
+          key: 'type',
+          sortable: true
+        },
+        {
+          key: 'id',
+          sortable: true
+        },
+          "actions"
+      ]
+    }
+  },
+  methods: {
+    updateModelList() {
+      return new Promise((resolve, reject) => {
+        this.actionPending = true
+        this.$api.get("/model").then(({data}) => {
+          this.models = data
+          this.actionPending = false
+          resolve()
+        }).catch((error) => {
+
+          if (!error.response) {
+            // network error happened
+            this.$showToast("Some network error happened.\nCheck logs!")
+          } else {
+            // server returned bruh moment
+            this.$showToast(`The server returned error: ${error.response.status} ${error.response.statusText}\n${error.response.data}`)
+          }
+
+          this.actionPending = false
+          reject()
+        })
+      });
+    },
+    rowClass(item, type) {
+      if (!item || type !== 'row') return
+      if (item.default) return 'table-info'
+    }
+  },
+  mounted() {
+    this.updateModelList()
+  }
+
 }
 </script>