diff --git a/components.d.ts b/components.d.ts
index a678b6b..54a4847 100644
--- a/components.d.ts
+++ b/components.d.ts
@@ -26,6 +26,7 @@ declare module 'vue' {
     AppStepper: typeof import('./src/@core/components/AppStepper.vue')['default']
     AppTextarea: typeof import('./src/@core/components/app-form-elements/AppTextarea.vue')['default']
     AppTextField: typeof import('./src/@core/components/app-form-elements/AppTextField.vue')['default']
+    Buchkarten: typeof import('./src/components/Buchkarten.vue')['default']
     Buecherdatenbank: typeof import('./src/pages/buecherdatenbank.vue')['default']
     BuyNow: typeof import('./src/@core/components/BuyNow.vue')['default']
     CardAddEditDialog: typeof import('./src/components/dialogs/CardAddEditDialog.vue')['default']
diff --git a/src/components/Buchkarten.vue b/src/components/Buchkarten.vue
new file mode 100644
index 0000000..78aae52
--- /dev/null
+++ b/src/components/Buchkarten.vue
@@ -0,0 +1,100 @@
+<template>
+  <VRow>
+    <VCol
+      v-for="book in books"
+      :key="book.id"
+      cols="12"
+      sm="6"
+      md="4"
+    >
+      <VCard class="pa-2 hover-card">
+        <div class="buchkarten-grid">
+          <!-- Cover links -->
+          <VImg
+            :src="book.image"
+            class="buch-cover"
+            cover
+          />
+
+          <!-- Inhalt rechts -->
+          <div class="buch-details">
+            <!-- Titel -->
+            <div class="text-h6 font-weight-bold">
+              {{ book.title }}
+            </div>
+
+            <!-- Autoren -->
+            <div v-if="book.authors?.length" class="text-caption mb-2">
+              von {{ book.authors.map(a => a.name).join(', ') }}
+            </div>
+
+            <!-- Genres -->
+            <div class="d-flex flex-wrap mb-2">
+              <VChip
+                v-for="genre in book.genres"
+                :key="genre"
+                color="primary"
+                size="small"
+                class="ma-1"
+              >
+                {{ genre }}
+              </VChip>
+            </div>
+
+            <!-- Fieberkurve -->
+            <Fieberkurve
+              :is-static="true"
+              :default-values="book.fieberkurve"
+              :hide-text="true"
+            />
+
+            <!-- Aktionen -->
+            <VCardActions class="justify-start mt-3">
+              <VBtn size="small" variant="outlined">
+                <VIcon icon="tabler-list-details" />
+                <span class="ms-2">Detail Seite</span>
+              </VBtn>
+              <IconBtn color="secondary" icon="tabler-share" />
+            </VCardActions>
+          </div>
+        </div>
+      </VCard>
+    </VCol>
+  </VRow>
+</template>
+
+<script setup>
+import Fieberkurve from '@/components/Fieberkurve.vue'
+
+defineProps({
+  books: Array
+})
+</script>
+
+<style scoped>
+.buchkarten-grid {
+  display: grid;
+  grid-template-columns: 160px 1fr;
+  gap: 1rem;
+  align-items: center;
+}
+
+.buch-cover {
+  width: 160px;
+  height: 240px;
+  border-radius: 8px;
+}
+
+.buch-details {
+  display: flex;
+  flex-direction: column;
+}
+
+.hover-card {
+  transition: transform 0.25s ease, box-shadow 0.25s ease;
+}
+.hover-card:hover {
+  transform: translateY(-4px);
+  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
+}
+</style>
diff --git a/src/pages/buechersuche.vue b/src/pages/buechersuche.vue
index d74283f..fb26bc7 100644
--- a/src/pages/buechersuche.vue
+++ b/src/pages/buechersuche.vue
@@ -77,85 +77,14 @@
 
 
     <!-- Gefundene Bücher -->
-    <VCol cols="12" md="12">
-      <VCard class="mb-6">
-        <!-- Trefferanzahl -->
-        <VCardTitle class="text-h5 px-6 pt-4 pb-2">
-          {{ resultCount }} {{ resultCount === 1 ? 'Buch' : 'Bücher' }} gefunden
-        </VCardTitle>
-        <VDivider class="my-2" />
-
-        <VRow>
-          <VCol v-for="book in filteredBooks" :key="book.id" cols="12" sm="6" md="4">
-            <VCard class="pa-2">
-              <VCardText class="d-flex flex-column align-center">
-                <!-- Bild -->
-                <VImg
-                  :src="book.image"
-                  width="160"
-                  height="240"
-                  class="mb-3 rounded"
-                  cover
-                />
-
-                <!-- Titel -->
-                <div class="text-h6 font-weight-bold text-center">
-                  {{ book.title }}
-                </div>
-
-                <!-- Autoren -->
-                <div v-if="book.authors?.length" class="text-caption mb-2 text-center">
-                  von {{ book.authors.map(a => a.name).join(', ') }}
-                </div>
-
-                <!-- Genres -->
-                <div class="d-flex flex-wrap justify-center mb-2">
-                  <VChip
-                    v-for="genre in book.genres"
-                    :key="genre"
-                    color="primary"
-                    size="small"
-                    class="ma-1"
-                  >
-                    {{ genre }}
-                  </VChip>
-                </div>
-
-                <!-- Beschreibung (Blurb) -->
-                <div
-                  class="text-truncate mb-3 text-center"
-                  style="max-width: 90%; max-height: 3em; overflow: hidden;"
-                >
-                  {{ book.blurb }}
-                </div>
-
-                <!-- Fieberkurve -->
-                <Fieberkurve
-                  :is-static="true"
-                  :default-values="book.fieberkurve"
-                  :hide-text="true"
-                />
-
-                <!-- Aktionen -->
-                <VCardActions class="justify-center mt-2">
-                  <VBtn size="small" variant="outlined">
-                    <VIcon icon="tabler-list-details" />
-                    <span class="ms-2">Detail Seite</span>
-                  </VBtn>
-                  <IconBtn color="secondary" icon="tabler-share" />
-                </VCardActions>
-              </VCardText>
-            </VCard>
-          </VCol>
-        </VRow>
-      </VCard>
-    </VCol>
+    <Buchkarten :books="filteredBooks" />
   </VRow>
 </template>
 
 <script setup lang="ts">
 import { ref, computed } from "vue";
 import Fieberkurve from "@/components/Fieberkurve.vue";
+import Buchkarten from '@/components/Buchkarten.vue';
 import { books } from "@/components/buecherdatenbank";
 import { genres } from "@/components/genredatenbank";