diff --git a/front/src/BookListElement.vue b/front/src/BookListElement.vue
index a4c49b4..f24581f 100644
--- a/front/src/BookListElement.vue
+++ b/front/src/BookListElement.vue
@@ -1,4 +1,9 @@
 <script setup>
+  import { ref } from 'vue'
+  import { postUserBook } from './api.js'
+  import { useRouter } from 'vue-router'
+
+  const router = useRouter();
 
   const props = defineProps({
   title: String,
@@ -6,15 +11,27 @@
   id: BigInt,
   imagePath: String,
 });
-const imagePathOrDefault = (props.imagePath == "" || typeof props.imagePath === 'undefined') ? "../defaultbook.png" : props.imagePath;
+  const imagePathOrDefault = (props.imagePath == "" || typeof props.imagePath === 'undefined') ? "../defaultbook.png" : props.imagePath;
+  const error = ref(null)
 
+async function onUserBookAdd() {
+  const res = await postUserBook({bookId: props.id});
+  if (res.ok) {
+    router.push('/books')
+  } else {
+    res.json().then((json) => (error.value = json));
+  }
+}
 
 </script>
 
 <template>
+  <div v-if="error" class="notification is-danger">
+    <p>{{error}}</p>
+  </div>
   <div class="columns box container has-background-dark">
   <div class="column is-narrow">
-    <button class="button">
+    <button @click="onUserBookAdd" class="button">
       <span class="icon" title="Add">
         <b-icon-plus />
       </span>
diff --git a/front/src/api.js b/front/src/api.js
index ed5b954..780f81c 100644
--- a/front/src/api.js
+++ b/front/src/api.js
@@ -36,6 +36,10 @@ export function postBook(book) {
   return genericPostCall('/book', book.value)
 }
 
+export async function postUserBook(userbook) {
+  return genericPostCall('/userbook', userbook)
+}
+
 export function postLogin(user) {
   return genericPostCallNoAuth('/auth/login', user.value)
 }
diff --git a/get_book_test.go b/get_book_test.go
index d0c217b..87c9e35 100644
--- a/get_book_test.go
+++ b/get_book_test.go
@@ -15,13 +15,28 @@ import (
 type bookSearchGet struct {
 	Title  string `json:"title" binding:"required,max=300"`
 	Author string `json:"author" binding:"max=100"`
+	Id     uint   `json:"id"`
 }
 
-func TestSearchBook(t *testing.T) {
+func TestSearchBook_MultipleBooks(t *testing.T) {
+	books := testSearchBook(t, "san")
+
+	assert.Equal(t, 2, len(books))
+}
+
+func TestSearchBook_AllFields(t *testing.T) {
+	books := testSearchBook(t, "de san")
+	assert.Equal(t, 1, len(books))
+	assert.Equal(t,
+		[]bookSearchGet{{Title: "De sang-froid", Author: "Truman Capote", Id: 18}},
+		books)
+}
+
+func testSearchBook(t *testing.T, searchterm string) []bookSearchGet {
 	router := testutils.TestSetup()
 
 	token := testutils.ConnectDemoUser(router)
-	req, _ := http.NewRequest("GET", "/search/san", nil)
+	req, _ := http.NewRequest("GET", "/search/"+searchterm, nil)
 	req.Header.Add("Authorization", fmt.Sprintf("Bearer %s", token))
 	w := httptest.NewRecorder()
 	router.ServeHTTP(w, req)
@@ -32,6 +47,5 @@ func TestSearchBook(t *testing.T) {
 		log.Fatal(err)
 	}
 	assert.Equal(t, 200, w.Code)
-
-	assert.Equal(t, 2, len(books))
+	return books
 }
diff --git a/internal/dto/booksearchget.go b/internal/dto/booksearchget.go
index 68e854c..2477bef 100644
--- a/internal/dto/booksearchget.go
+++ b/internal/dto/booksearchget.go
@@ -3,4 +3,5 @@ package dto
 type BookSearchGet struct {
 	Title  string `json:"title" binding:"required,max=300"`
 	Author string `json:"author" binding:"max=100"`
+	ID     uint   `json:"id"`
 }
diff --git a/internal/mapper/booksearchget.go b/internal/mapper/booksearchget.go
index 6e2dcb6..8c8fc54 100644
--- a/internal/mapper/booksearchget.go
+++ b/internal/mapper/booksearchget.go
@@ -9,5 +9,6 @@ func BookDbToWs(b *model.Book) dto.BookSearchGet {
 	return dto.BookSearchGet{
 		Title:  b.Title,
 		Author: b.Author,
+		ID:     b.ID,
 	}
 }