diff --git a/src/components/buecherdatenbank.js b/src/components/buecherdatenbank.js
new file mode 100644
index 0000000..e69de29
diff --git a/src/components/genredatenbank.js b/src/components/genredatenbank.js
new file mode 100644
index 0000000..9461197
--- /dev/null
+++ b/src/components/genredatenbank.js
@@ -0,0 +1,93 @@
+export const books = [
+  {
+    id: 1,
+    title: 'Rich Dad Poor Dad',
+    description: 'Ein Buch über finanzielle Bildung und Investitionen.',
+    image: 'https://m.media-amazon.com/images/I/81gW3OmXQeL._SL1500_.jpg',
+    fieberkurve: [
+      { value: 1 },
+      { value: 1 },
+      { value: 1 },
+      { value: 1 },
+      { value: 1 },
+    ],
+  },
+  {
+    id: 2,
+    title: 'Harry Potter und der Stein der Weisen',
+    description: 'Der erste Teil der magischen Harry-Potter-Reihe.',
+    image: 'https://m.media-amazon.com/images/I/81YOuOGFCJL.jpg',
+    fieberkurve: [
+      { value: 5 },
+      { value: 2 },
+      { value: 7 },
+      { value: 3 },
+      { value: 5 },
+    ],
+  },
+  {
+    id: 3,
+    title: 'Der Herr der Ringe',
+    description: 'Ein episches Fantasy-Abenteuer von J.R.R. Tolkien.',
+    image: 'https://m.media-amazon.com/images/I/91zbi9M+mKL._AC_UF1000,1000_QL80_.jpg',
+    fieberkurve: [
+      { value: 5 },
+      { value: 4 },
+      { value: 6 },
+      { value: 4 },
+      { value: 2 },
+    ],
+  },
+  {
+    id: 4,
+    title: 'Die Tribute von Panem',
+    description: 'Ein dystopischer Roman über den Kampf ums Überleben.',
+    image: 'https://m.media-amazon.com/images/I/61JfGcL2ljL._AC_UF1000,1000_QL80_.jpg',
+    fieberkurve: [
+      { value: 4 },
+      { value: 7 },
+      { value: 4 },
+      { value: 3 },
+      { value: 5 },
+    ],
+  },
+  {
+    id: 5,
+    title: 'Game of Thrones',
+    description: 'Der Auftakt zur epischen Saga von George R.R. Martin.',
+    image: 'https://m.media-amazon.com/images/I/91L2Dhn2xBL._AC_UF1000,1000_QL80_.jpg',
+    fieberkurve: [
+      { value: 5 },
+      { value: 2 },
+      { value: 7 },
+      { value: 3 },
+      { value: 5 },
+    ],
+  },
+  {
+    id: 6,
+    title: '1984',
+    description: 'Ein dystopischer Klassiker von George Orwell.',
+    image: 'https://m.media-amazon.com/images/I/71kxa1-0mfL.jpg',
+    fieberkurve: [
+      { value: 5 },
+      { value: 2 },
+      { value: 4 },
+      { value: 4 },
+      { value: 5 },
+    ],
+  },
+  {
+    id: 7,
+    title: 'Sakrileg - The Da Vinci Code',
+    description: 'Ein spannender Thriller von Dan Brown.',
+    image: 'https://m.media-amazon.com/images/I/81Q9NhedqgL.jpg',
+    fieberkurve: [
+      { value: 1 },
+      { value: 7 },
+      { value: 7 },
+      { value: 3 },
+      { value: 1 },
+    ],
+  },
+]
diff --git a/src/pages/buecherdatenbank.vue b/src/pages/buecherdatenbank.vue
new file mode 100644
index 0000000..b3094e0
--- /dev/null
+++ b/src/pages/buecherdatenbank.vue
@@ -0,0 +1,101 @@
+<script setup>
+export const books = [
+  {
+    id: 1,
+    title: 'Rich Dad Poor Dad',
+    description: 'Ein Buch über finanzielle Bildung und Investitionen.',
+    image: 'https://m.media-amazon.com/images/I/81gW3OmXQeL._SL1500_.jpg',
+    fieberkurve: [
+      { value: 1 },
+      { value: 1 },
+      { value: 1 },
+      { value: 1 },
+      { value: 1 },
+    ],
+  },
+  {
+    id: 2,
+    title: 'Harry Potter und der Stein der Weisen',
+    description: 'Der erste Teil der magischen Harry-Potter-Reihe.',
+    image: 'https://m.media-amazon.com/images/I/81YOuOGFCJL.jpg',
+    fieberkurve: [
+      { value: 5 },
+      { value: 2 },
+      { value: 7 },
+      { value: 3 },
+      { value: 5 },
+    ],
+  },
+  {
+    id: 3,
+    title: 'Der Herr der Ringe',
+    description: 'Ein episches Fantasy-Abenteuer von J.R.R. Tolkien.',
+    image: 'https://m.media-amazon.com/images/I/91zbi9M+mKL._AC_UF1000,1000_QL80_.jpg',
+    fieberkurve: [
+      { value: 5 },
+      { value: 4 },
+      { value: 6 },
+      { value: 4 },
+      { value: 2 },
+    ],
+  },
+  {
+    id: 4,
+    title: 'Die Tribute von Panem',
+    description: 'Ein dystopischer Roman über den Kampf ums Überleben.',
+    image: 'https://m.media-amazon.com/images/I/61JfGcL2ljL._AC_UF1000,1000_QL80_.jpg',
+    fieberkurve: [
+      { value: 4 },
+      { value: 7 },
+      { value: 4 },
+      { value: 3 },
+      { value: 5 },
+    ],
+  },
+  {
+    id: 5,
+    title: 'Game of Thrones',
+    description: 'Der Auftakt zur epischen Saga von George R.R. Martin.',
+    image: 'https://m.media-amazon.com/images/I/91L2Dhn2xBL._AC_UF1000,1000_QL80_.jpg',
+    fieberkurve: [
+      { value: 5 },
+      { value: 2 },
+      { value: 7 },
+      { value: 3 },
+      { value: 5 },
+    ],
+  },
+  {
+    id: 6,
+    title: '1984',
+    description: 'Ein dystopischer Klassiker von George Orwell.',
+    image: 'https://m.media-amazon.com/images/I/71kxa1-0mfL.jpg',
+    fieberkurve: [
+      { value: 5 },
+      { value: 2 },
+      { value: 4 },
+      { value: 4 },
+      { value: 5 },
+    ],
+  },
+  {
+    id: 7,
+    title: 'Sakrileg - The Da Vinci Code',
+    description: 'Ein spannender Thriller von Dan Brown.',
+    image: 'https://m.media-amazon.com/images/I/81Q9NhedqgL.jpg',
+    fieberkurve: [
+      { value: 1 },
+      { value: 7 },
+      { value: 7 },
+      { value: 3 },
+      { value: 1 },
+    ],
+  },
+];
+</script>
+
+<template>
+</template>
+
+<style scoped lang="scss">
+</style>
diff --git a/src/pages/genredatenbank.vue b/src/pages/genredatenbank.vue
new file mode 100644
index 0000000..55b3f93
--- /dev/null
+++ b/src/pages/genredatenbank.vue
@@ -0,0 +1,29 @@
+<script setup>
+import { books } from '@/components/buecherdatenbank'; // Importiere die Bücher-Datenbank
+import Fieberkurve from "@/components/Fieberkurve.vue";
+</script>
+
+<template>
+  <h2>Bücherdatenbank:</h2>
+  <p>(Alle statisch angelegte Testbücher in "buecherdatenbank.js")</p>
+  <hr>
+  <br>
+  <VRow>
+    <VCol
+      v-for="book in books"
+      :key="book.id"
+      sm="6"
+      cols="12"
+    >
+      id: {{ book.id }} <br>
+      title: {{ book.title }} <br>
+      description: {{ book.description }} <br>
+      image: {{ book.image }} <br>
+      fieberkurve: {{ book.fieberkurve }} <br>
+
+    </VCol>
+  </VRow>
+</template>
+
+<style scoped lang="scss">
+</style>
diff --git a/src/pages/statische-fieberkurven.vue b/src/pages/statische-fieberkurven.vue
new file mode 100644
index 0000000..b9ad721
--- /dev/null
+++ b/src/pages/statische-fieberkurven.vue
@@ -0,0 +1,151 @@
+<template>
+  <div>
+    <h1>Fieberkurve Beispielseite</h1>
+
+    <!-- Interaktive Fieberkurve -->
+    <div>
+      <h2>Interaktive Fieberkurve</h2>
+      <Fieberkurve :isStatic="false" @update:values="updateValues" />
+    </div>
+
+    <br>
+    <!-- Button zum Laden der Daten -->
+    <div class="button-container">
+      <button @click="loadValues">Daten laden</button>
+    </div>
+
+    <!-- Statische Fieberkurve -->
+    <div>
+      <h2>Dynamische Fieberkurve</h2>
+      <Fieberkurve :isStatic="true" :defaultValues="staticValues" />
+      {{ staticValues }}
+    </div>
+
+    <!-- Statische Fieberkurve -->
+    <div>
+      <hr>
+      <br>
+      <h2>Statische Fieberkurve</h2>
+      <Fieberkurve :isStatic="true" :defaultValues="[{ value: 5 }, { value: 2 }, { value: 7 }, { value: 3 }, { value: 5 }]" />
+      <Fieberkurve :isStatic="true" :defaultValues="[{ value: 1 }, { value: 4 }, { value: 7 }, { value: 1 }, { value: 2 }]" />
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+import Fieberkurve from "@/components/Fieberkurve.vue";
+
+// Werte der interaktiven Fieberkurve
+const staticValues = ref([
+  { value: 4 },
+  { value: 4 },
+  { value: 4 },
+  { value: 4 },
+  { value: 4 }
+]);
+
+// Temporäre Werte für interaktive Fieberkurve
+const temporaryValues = ref([]);
+
+// Funktion zum Aktualisieren der temporären Werte
+function updateValues(values) {
+  temporaryValues.value = values.map(value => ({ value }));
+}
+
+// Funktion zum Laden der temporären Werte in die statische Fieberkurve
+function loadValues() {
+  if (temporaryValues.value != 0){
+    staticValues.value = [...temporaryValues.value]; // Neuzuweisung des Arrays
+  }
+  // console.log(staticValues.value, temporaryValues.value)
+}
+</script>
+
+<style scoped>
+h1 {
+  text-align: center;
+  margin-bottom: 20px;
+}
+
+h2 {
+  margin: 20px 0;
+  text-align: left;
+}
+
+.button-container {
+  text-align: center;
+  margin: 20px 0;
+}
+
+button {
+  background-color: #007bff;
+  color: white;
+  border: none;
+  padding: 10px 20px;
+  border-radius: 5px;
+  cursor: pointer;
+  font-size: 16px;
+}
+
+button:hover {
+  background-color: #0056b3;
+}
+
+div {
+  margin-bottom: 40px;
+}
+</style>
+
+
+
+
+
+
+
+
+
+<!--<script setup>
+
+import Fieberkurve from "@/components/Fieberkurve.vue";
+</script>
+
+<template>
+
+  <VCard
+    title="Fieberkurven Vorschauseite"
+    subtitle="Hier werden nur ein paar Varianten der Fieberkurve gezeigt!"
+  >
+
+
+
+
+    <h4>Interaktive Fieberkurve:</h4>
+    &lt;!&ndash; Interaktive Fieberkurve &ndash;&gt;
+    <Fieberkurve :isStatic="false" />
+    <br>
+    <br>
+    <Fieberkurve :isStatic="false" />
+
+    <br>
+    <hr>
+    <br>
+    <h4>Statische Fieberkurve mit vordefinierten Werten:</h4>
+
+    &lt;!&ndash; Statische Fieberkurve mit vordefinierten Werten &ndash;&gt;
+    <Fieberkurve :isStatic="true" :defaultValues="[{ value: 5 }, { value: 2 }, { value: 7 }, { value: 4 }, { value: 1 }]" />
+    <br>
+    <br>
+    <Fieberkurve :isStatic="true" :defaultValues="[{ value: 1 }, { value: 2 }, { value: 2 }, { value: 3 }, { value: 1 }]" />
+    <br>
+    <br>
+    <Fieberkurve :isStatic="true" :defaultValues="[{ value: 5 }, { value: 2 }, { value: 3 }, { value: 4 }, { value: 7 }]" />
+    <br>
+    <br>
+  </VCard>
+</template>
+
+
+<style scoped lang="scss">
+
+</style>-->