diff --git a/frontend/src/components/Books.vue b/frontend/src/components/Books.vue
index 895cf0b..283940d 100644
--- a/frontend/src/components/Books.vue
+++ b/frontend/src/components/Books.vue
@@ -5,6 +5,15 @@
       <icon name="refresh" spin></icon>&nbsp;&nbsp;
       Loading...
     </div>
+    <div class="ui negative message" v-if="error">
+      <div class="header">
+        An erro occured.
+      </div>
+      {{ error.message }}
+      <div v-if="error.response">
+      {{ error.response.Message }}
+      </div>
+    </div>
     <div v-if="!loading">
       <form id="search">
         <div class="ui icon input">
@@ -58,7 +67,8 @@ export default {
       searchQuery: '',
       gridColumns: ['Title', 'ISBN', 'Year', 'Price', 'Author', 'Publisher', 'Status'],
       loading: false,
-      paginate: ['books']
+      paginate: ['books'],
+      error: ''
     }
   },
   created () {
@@ -89,6 +99,8 @@ export default {
         .then(response => {
           let bs = response.data
           let i = 0
+
+          // Loop throught the data we got from our API and prepare an array to display all books
           for (const b in bs) {
             this.books[i] = {
               Title: bs[b].Title,
@@ -113,8 +125,8 @@ export default {
           this.loading = false
         })
         .catch(e => {
-          this.loading = false
-          this.errors.push(e)
+          console.log(e)
+          this.error = e
         })
     }
   }