diff --git a/frontend/src/pages/BookDetailsPage/bookDetailsPage/BookDetailsPage.tsx b/frontend/src/pages/BookDetailsPage/bookDetailsPage/BookDetailsPage.tsx
index 314215e..1b9ab59 100644
--- a/frontend/src/pages/BookDetailsPage/bookDetailsPage/BookDetailsPage.tsx
+++ b/frontend/src/pages/BookDetailsPage/bookDetailsPage/BookDetailsPage.tsx
@@ -19,6 +19,11 @@ export default function BookDetailsPage() {
         fetchBook();
     },[])
 
+    const deleteBook = (id: string) => {
+        axios.delete("/api/books/" + id)
+    }
+
+
     return (
         <>
             <article>
@@ -26,6 +31,7 @@ export default function BookDetailsPage() {
                 <p>Author: {book.author}</p>
                 <p>More details...</p>
                 <Link to={"/"}>Back</Link>
+                <button onClick={() => {deleteBook(book.id)}}>Delete</button>
             </article>
         </>
     )
diff --git a/frontend/src/pages/BookGalleryPage/components/bookCard/BookCard.tsx b/frontend/src/pages/BookGalleryPage/components/bookCard/BookCard.tsx
index 26f7b65..c9628b4 100644
--- a/frontend/src/pages/BookGalleryPage/components/bookCard/BookCard.tsx
+++ b/frontend/src/pages/BookGalleryPage/components/bookCard/BookCard.tsx
@@ -2,18 +2,11 @@ import "./BookCard.css"
 
 import {Book} from "../../../../types/types.ts";
 import {Link} from "react-router-dom";
-import {Book} from "../../types/types.ts";
-import axios from "axios";
 
 type BookCardProps = {
     book: Book
 }
 
-const deleteBook = (id: string) => {
-    axios.delete("api/books/" + id)
-        .catch((error) => alert(error.message))
-}
-
 export default function BookCard({book}: BookCardProps) {
 
     return (
@@ -22,7 +15,6 @@ export default function BookCard({book}: BookCardProps) {
             <p>Id: {book.id}</p>
             <p>Title: {book.title}</p>
             <p>Author:{book.author}</p>
-            <button onClick={() => deleteBook(book.id)}>Delete</button>
             <Link to={`/books/${book.id}`}>Details</Link>
         </li>