diff --git a/Code/ost/JAVA-FX-PROJECT/_javafx_website_task/src/main/resources/com/example/images/earthsea.jpg b/Code/ost/JAVA-FX-PROJECT/_javafx_website_task/src/main/resources/com/example/images/earthsea.jpg
new file mode 100644
index 0000000..5278bc4
Binary files /dev/null and b/Code/ost/JAVA-FX-PROJECT/_javafx_website_task/src/main/resources/com/example/images/earthsea.jpg differ
diff --git a/Code/ost/JAVA-FX-PROJECT/_javafx_website_task/src/main/resources/com/example/images/kingkiller.jpeg b/Code/ost/JAVA-FX-PROJECT/_javafx_website_task/src/main/resources/com/example/images/kingkiller.jpeg
new file mode 100644
index 0000000..f2d9670
Binary files /dev/null and b/Code/ost/JAVA-FX-PROJECT/_javafx_website_task/src/main/resources/com/example/images/kingkiller.jpeg differ
diff --git a/Code/ost/JAVA-FX-PROJECT/_javafx_website_task/src/main/resources/com/example/images/lotr.jpg b/Code/ost/JAVA-FX-PROJECT/_javafx_website_task/src/main/resources/com/example/images/lotr.jpg
new file mode 100644
index 0000000..95a73e8
Binary files /dev/null and b/Code/ost/JAVA-FX-PROJECT/_javafx_website_task/src/main/resources/com/example/images/lotr.jpg differ
diff --git a/Code/ost/JAVA-FX-PROJECT/_javafx_website_task/src/main/resources/com/example/images/mistborn.jpg b/Code/ost/JAVA-FX-PROJECT/_javafx_website_task/src/main/resources/com/example/images/mistborn.jpg
new file mode 100644
index 0000000..d5e2ff2
Binary files /dev/null and b/Code/ost/JAVA-FX-PROJECT/_javafx_website_task/src/main/resources/com/example/images/mistborn.jpg differ
diff --git a/Code/ost/JAVA-FX-PROJECT/_javafx_website_task/src/main/resources/com/example/images/narnia.jpg b/Code/ost/JAVA-FX-PROJECT/_javafx_website_task/src/main/resources/com/example/images/narnia.jpg
new file mode 100644
index 0000000..4e580df
Binary files /dev/null and b/Code/ost/JAVA-FX-PROJECT/_javafx_website_task/src/main/resources/com/example/images/narnia.jpg differ
diff --git a/Code/ost/JAVA-FX-PROJECT/_javafx_website_task/src/main/resources/com/example/images/stormlight.jpg b/Code/ost/JAVA-FX-PROJECT/_javafx_website_task/src/main/resources/com/example/images/stormlight.jpg
new file mode 100644
index 0000000..5ff0418
Binary files /dev/null and b/Code/ost/JAVA-FX-PROJECT/_javafx_website_task/src/main/resources/com/example/images/stormlight.jpg differ
diff --git a/Code/ost/JAVA-FX-PROJECT/_javafx_website_task/src/main/resources/com/example/images/theFirstLaw.jpg b/Code/ost/JAVA-FX-PROJECT/_javafx_website_task/src/main/resources/com/example/images/theFirstLaw.jpg
new file mode 100644
index 0000000..259c741
Binary files /dev/null and b/Code/ost/JAVA-FX-PROJECT/_javafx_website_task/src/main/resources/com/example/images/theFirstLaw.jpg differ
diff --git a/Code/ost/JAVA-FX-PROJECT/_javafx_website_task/src/main/resources/com/example/images/wheel.jpg b/Code/ost/JAVA-FX-PROJECT/_javafx_website_task/src/main/resources/com/example/images/wheel.jpg
new file mode 100644
index 0000000..8a53c9a
Binary files /dev/null and b/Code/ost/JAVA-FX-PROJECT/_javafx_website_task/src/main/resources/com/example/images/wheel.jpg differ
diff --git a/Code/ost/JAVA-FX-PROJECT/_javafx_website_task/src/main/resources/com/example/shop.fxml b/Code/ost/JAVA-FX-PROJECT/_javafx_website_task/src/main/resources/com/example/shop.fxml
index 568d3ad..f1b79c9 100644
--- a/Code/ost/JAVA-FX-PROJECT/_javafx_website_task/src/main/resources/com/example/shop.fxml
+++ b/Code/ost/JAVA-FX-PROJECT/_javafx_website_task/src/main/resources/com/example/shop.fxml
@@ -3,6 +3,7 @@
 <?import javafx.geometry.Insets?>
 <?import javafx.scene.control.Button?>
 <?import javafx.scene.control.Label?>
+<?import javafx.scene.control.TextArea?>
 <?import javafx.scene.layout.BorderPane?>
 <?import javafx.scene.layout.ColumnConstraints?>
 <?import javafx.scene.layout.GridPane?>
@@ -46,67 +47,95 @@
             <Insets />
          </BorderPane.margin>
          <children>
-            <!-- Card 1 -->
-            <VBox id="cardDiv" prefHeight="200.0" prefWidth="100.0" styleClass="cardDiv">
+            <!-- Card 1: Lord of the Rings -->
+            <VBox id="cardDiv1" prefHeight="200.0" prefWidth="100.0" styleClass="cardDiv">
                <children>
-                  <Label id="cardTitel" styleClass="cardTitel" text="Booktitel" />
-                  <Button id="cardBtn" mnemonicParsing="false" styleClass="cardBtn" text="add to cart" />
-                  <Label id="cardText" styleClass="cardText" text="Description: ...." />
+                  <Label id="cardTitel" styleClass="cardTitel" text="Lord of the Rings" />
+                  <Button id="cardBtn" mnemonicParsing="false" styleClass="cardBtn" text="Add to Cart" />
+                  <TextArea id="cardText" editable="false" prefRowCount="4" styleClass="cardText" text="Description: A high-fantasy epic by J.R.R. Tolkien. The story follows the journey of Frodo Baggins and his companions as they attempt to destroy the One Ring and defeat the Dark Lord Sauron." wrapText="true">
+                     <opaqueInsets>
+                        <Insets />
+                     </opaqueInsets>
+                     <VBox.margin>
+                        <Insets top="10.0" />
+                     </VBox.margin></TextArea>
                </children>
             </VBox>
-            <!-- Card 3 -->
-            <VBox id="cardDiv" prefHeight="200.0" prefWidth="100.0" styleClass="cardDiv" GridPane.columnIndex="2">
+            <!-- Card 2: The Wheel of Time -->
+            <VBox id="cardDiv2" prefHeight="200.0" prefWidth="100.0" styleClass="cardDiv" GridPane.columnIndex="1">
                <children>
-                  <Label id="cardTitel" styleClass="cardTitel" text="Booktitel" />
-                  <Button id="cardBtn" mnemonicParsing="false" styleClass="cardBtn" text="add to cart" />
-                  <Label id="cardText" styleClass="cardText" text="Description: ...." />
+                  <Label id="cardTitel" styleClass="cardTitel" text="The Wheel of Time" />
+                  <Button id="cardBtn" mnemonicParsing="false" styleClass="cardBtn" text="Add to Cart" />
+                  <TextArea id="cardText" editable="false" prefRowCount="4" styleClass="cardText" text="Description: A sprawling epic fantasy series by Robert Jordan. It follows the journey of Rand al'Thor as he struggles to control his newfound powers and faces the ultimate battle between light and shadow." wrapText="true">
+                     <VBox.margin>
+                        <Insets top="10.0" />
+                     </VBox.margin></TextArea>
                </children>
             </VBox>
-            <!-- Card 4 -->
-            <VBox id="cardDiv" prefHeight="200.0" prefWidth="100.0" styleClass="cardDiv" GridPane.columnIndex="3">
+            <!-- Card 3: The Chronicles of Narnia -->
+            <VBox id="cardDiv3" prefHeight="200.0" prefWidth="100.0" styleClass="cardDiv" GridPane.columnIndex="2">
                <children>
-                  <Label id="cardTitel" styleClass="cardTitel" text="Booktitel" />
-                  <Button id="cardBtn" mnemonicParsing="false" styleClass="cardBtn" text="add to cart" />
-                  <Label id="cardText" styleClass="cardText" text="Description: ...." />
+                  <Label id="cardTitel" styleClass="cardTitel" text="The Chronicles of Narnia" />
+                  <Button id="cardBtn" mnemonicParsing="false" styleClass="cardBtn" text="Add to Cart" />
+                  <TextArea id="cardText" editable="false" prefRowCount="4" styleClass="cardText" text="Description: A classic series by C.S. Lewis. The Chronicles of Narnia explores the adventures of children who discover a magical world, Narnia, and become part of its struggle against the forces of evil." wrapText="true">
+                     <VBox.margin>
+                        <Insets top="10.0" />
+                     </VBox.margin></TextArea>
                </children>
             </VBox>
-            <!-- Card 5 -->
-            <VBox id="cardDiv" prefHeight="200.0" prefWidth="100.0" styleClass="cardDiv" GridPane.rowIndex="1">
+            <!-- Card 4: The Earthsea Cycle -->
+            <VBox id="cardDiv4" prefHeight="200.0" prefWidth="100.0" styleClass="cardDiv" GridPane.columnIndex="3">
                <children>
-                  <Label id="cardTitel" styleClass="cardTitel" text="Booktitel" />
-                  <Button id="cardBtn" mnemonicParsing="false" styleClass="cardBtn" text="add to cart" />
-                  <Label id="cardText" styleClass="cardText" text="Description: ...." />
+                  <Label id="cardTitel" styleClass="cardTitel" text="The Earthsea Cycle" />
+                  <Button id="cardBtn" mnemonicParsing="false" styleClass="cardBtn" text="Add to Cart" />
+                  <TextArea id="cardText" editable="false" prefRowCount="4" styleClass="cardText" text="Description: A fantasy series by Ursula K. Le Guin. The Earthsea Cycle follows Ged, a young wizard, as he embarks on a journey of self-discovery and learns the true meaning of power." wrapText="true">
+                     <VBox.margin>
+                        <Insets top="10.0" />
+                     </VBox.margin></TextArea>
                </children>
             </VBox>
-            <!-- Card 6 -->
-            <VBox id="cardDiv" prefHeight="200.0" prefWidth="100.0" styleClass="cardDiv" GridPane.columnIndex="1" GridPane.rowIndex="1">
+            <!-- Card 5: The First Law Trilogy -->
+            <VBox id="cardDiv5" prefHeight="200.0" prefWidth="100.0" styleClass="cardDiv" GridPane.rowIndex="1">
                <children>
-                  <Label id="cardTitel" styleClass="cardTitel" text="Booktitel" />
-                  <Button id="cardBtn" mnemonicParsing="false" styleClass="cardBtn" text="add to cart" />
-                  <Label id="cardText" styleClass="cardText" text="Description: ...." />
+                  <Label id="cardTitel" styleClass="cardTitel" text="The First Law Trilogy" />
+                  <Button id="cardBtn" mnemonicParsing="false" styleClass="cardBtn" text="Add to Cart" />
+                  <TextArea id="cardText" editable="false" prefRowCount="4" styleClass="cardText" text="Description: A dark fantasy series by Joe Abercrombie. It focuses on a group of characters navigating a brutal world, where honor and loyalty are tested by betrayal and violence." wrapText="true">
+                     <VBox.margin>
+                        <Insets top="10.0" />
+                     </VBox.margin></TextArea>
                </children>
             </VBox>
-            <!-- Card 7 -->
-            <VBox id="cardDiv" prefHeight="200.0" prefWidth="100.0" styleClass="cardDiv" GridPane.columnIndex="2" GridPane.rowIndex="1">
+            <!-- Card 6: The Kingkiller Chronicle -->
+            <VBox id="cardDiv6" prefHeight="200.0" prefWidth="100.0" styleClass="cardDiv" GridPane.columnIndex="1" GridPane.rowIndex="1">
                <children>
-                  <Label id="cardTitel" styleClass="cardTitel" text="Booktitel" />
-                  <Button id="cardBtn" mnemonicParsing="false" styleClass="cardBtn" text="add to cart" />
-                  <Label id="cardText" styleClass="cardText" text="Description: ...." />
+                  <Label id="cardTitel" styleClass="cardTitel" text="The Kingkiller Chronicle" />
+                  <Button id="cardBtn" mnemonicParsing="false" styleClass="cardBtn" text="Add to Cart" />
+                  <TextArea id="cardText" editable="false" prefRowCount="4" styleClass="cardText" text="Description: A tale of magic and music by Patrick Rothfuss. The series follows Kvothe, a legendary figure, as he recounts his life story filled with adventures, heartbreaks, and personal struggles." wrapText="true">
+                     <VBox.margin>
+                        <Insets top="10.0" />
+                     </VBox.margin></TextArea>
                </children>
             </VBox>
-            <!-- Card 8 -->
-            <VBox id="cardDiv" prefHeight="200.0" prefWidth="100.0" styleClass="cardDiv" GridPane.columnIndex="3" GridPane.rowIndex="1">
+            <!-- Card 7: The Mistborn Series -->
+            <VBox id="cardDiv7" prefHeight="200.0" prefWidth="100.0" styleClass="cardDiv" GridPane.columnIndex="2" GridPane.rowIndex="1">
                <children>
-                  <Label id="cardTitel" styleClass="cardTitel" text="Booktitel" />
-                  <Button id="cardBtn" mnemonicParsing="false" styleClass="cardBtn" text="add to cart" />
-                  <Label id="cardText" styleClass="cardText" text="Description: ...." />
+                  <Label id="cardTitel" styleClass="cardTitel" text="The Mistborn Series" />
+                  <Button id="cardBtn" mnemonicParsing="false" styleClass="cardBtn" text="Add to Cart" />
+                  <TextArea id="cardText" editable="false" prefRowCount="4" styleClass="cardText" text="Description: A magic-based series by Brandon Sanderson. Set in a world where ash falls from the sky, the series follows Vin, a young woman who discovers her incredible magical abilities and joins a group of rebels." wrapText="true">
+                     <VBox.margin>
+                        <Insets top="10.0" />
+                     </VBox.margin></TextArea>
                </children>
             </VBox>
-            <VBox id="cardDiv" prefHeight="200.0" prefWidth="100.0" styleClass="cardDiv" GridPane.columnIndex="1">
+            <!-- Card 8: The Stormlight Archive -->
+            <VBox id="cardDiv8" prefHeight="200.0" prefWidth="100.0" styleClass="cardDiv" GridPane.columnIndex="3" GridPane.rowIndex="1">
                <children>
-                  <Label id="cardTitel" styleClass="cardTitel" text="Booktitel" />
-                  <Button id="cardBtn" mnemonicParsing="false" styleClass="cardBtn" text="add to cart" />
-                  <Label id="cardText" styleClass="cardText" text="Description: ...." />
+                  <Label id="cardTitel" styleClass="cardTitel" text="The Stormlight Archive" />
+                  <Button id="cardBtn" mnemonicParsing="false" styleClass="cardBtn" text="Add to Cart" />
+                  <TextArea id="cardText" editable="false" prefRowCount="4" styleClass="cardText" text="Description: A high-fantasy epic by Brandon Sanderson. The series explores the lives of several characters on the Shattered Plains, as they fight to survive and uncover a dark secret that threatens their world." wrapText="true">
+                     <VBox.margin>
+                        <Insets top="10.0" />
+                     </VBox.margin></TextArea>
                </children>
             </VBox>
          </children>
diff --git a/Code/ost/JAVA-FX-PROJECT/_javafx_website_task/src/main/resources/com/example/styles.css b/Code/ost/JAVA-FX-PROJECT/_javafx_website_task/src/main/resources/com/example/styles.css
index 59668bf..c93b6f9 100644
--- a/Code/ost/JAVA-FX-PROJECT/_javafx_website_task/src/main/resources/com/example/styles.css
+++ b/Code/ost/JAVA-FX-PROJECT/_javafx_website_task/src/main/resources/com/example/styles.css
@@ -82,6 +82,8 @@
     -fx-min-height: 230;
 }
 
+
+
 .cardTitel {
     -fx-font-size: 18px;
     -fx-font-weight: 600;
@@ -91,7 +93,64 @@
 }
 
 .cardText {
-    -fx-text-fill: #ffffff;
+    -fx-text-fill: #000;
+    -fx-margin: 10px auto;
+}
+
+#cardDiv1 {
+    -fx-background-image: url('images/lotr.jpg');
+    -fx-background-size: cover;
+    -fx-background-repeat: no-repeat;
+    -fx-background-position: center;
+}
+
+#cardDiv2 {
+    -fx-background-image: url('images/wheel.jpg');
+    -fx-background-size: cover;
+    -fx-background-repeat: no-repeat;
+    -fx-background-position: center;
+}
+
+#cardDiv3 {
+    -fx-background-image: url('images/narnia.jpg');
+    -fx-background-size: cover;
+    -fx-background-repeat: no-repeat;
+    -fx-background-position: center;
+}
+
+#cardDiv4 {
+    -fx-background-image: url('images/earthsea.jpg');
+    -fx-background-size: cover;
+    -fx-background-repeat: no-repeat;
+    -fx-background-position: center;
+}
+
+#cardDiv5 {
+    -fx-background-image: url('images/theFirstLaw.jpg');
+    -fx-background-size: cover;
+    -fx-background-repeat: no-repeat;
+    -fx-background-position: center;
+}
+
+#cardDiv6 {
+    -fx-background-image: url('images/kingkiller.jpeg');
+    -fx-background-size: cover;
+    -fx-background-repeat: no-repeat;
+    -fx-background-position: center;
+}
+
+#cardDiv7 {
+    -fx-background-image: url('images/mistborn.jpg');
+    -fx-background-size: cover;
+    -fx-background-repeat: no-repeat;
+    -fx-background-position: center;
+}
+
+#cardDiv8 {
+    -fx-background-image: url('images/stormlight.jpg');
+    -fx-background-size: cover;
+    -fx-background-repeat: no-repeat;
+    -fx-background-position: center;
 }
 
 /* Buttons */
@@ -354,6 +413,7 @@
 
     .cardTitel {
         -fx-font-size: 16px;
+        -fx-background-color: #000;
     }
 
     .cardText {
diff --git a/Code/ost/JAVA-FX-PROJECT/_javafx_website_task/target/classes/com/example/images/earthsea.jpg b/Code/ost/JAVA-FX-PROJECT/_javafx_website_task/target/classes/com/example/images/earthsea.jpg
new file mode 100644
index 0000000..5278bc4
Binary files /dev/null and b/Code/ost/JAVA-FX-PROJECT/_javafx_website_task/target/classes/com/example/images/earthsea.jpg differ
diff --git a/Code/ost/JAVA-FX-PROJECT/_javafx_website_task/target/classes/com/example/images/kingkiller.jpeg b/Code/ost/JAVA-FX-PROJECT/_javafx_website_task/target/classes/com/example/images/kingkiller.jpeg
new file mode 100644
index 0000000..f2d9670
Binary files /dev/null and b/Code/ost/JAVA-FX-PROJECT/_javafx_website_task/target/classes/com/example/images/kingkiller.jpeg differ
diff --git a/Code/ost/JAVA-FX-PROJECT/_javafx_website_task/target/classes/com/example/images/lotr.jpg b/Code/ost/JAVA-FX-PROJECT/_javafx_website_task/target/classes/com/example/images/lotr.jpg
new file mode 100644
index 0000000..95a73e8
Binary files /dev/null and b/Code/ost/JAVA-FX-PROJECT/_javafx_website_task/target/classes/com/example/images/lotr.jpg differ
diff --git a/Code/ost/JAVA-FX-PROJECT/_javafx_website_task/target/classes/com/example/images/mistborn.jpg b/Code/ost/JAVA-FX-PROJECT/_javafx_website_task/target/classes/com/example/images/mistborn.jpg
new file mode 100644
index 0000000..d5e2ff2
Binary files /dev/null and b/Code/ost/JAVA-FX-PROJECT/_javafx_website_task/target/classes/com/example/images/mistborn.jpg differ
diff --git a/Code/ost/JAVA-FX-PROJECT/_javafx_website_task/target/classes/com/example/images/narnia.jpg b/Code/ost/JAVA-FX-PROJECT/_javafx_website_task/target/classes/com/example/images/narnia.jpg
new file mode 100644
index 0000000..4e580df
Binary files /dev/null and b/Code/ost/JAVA-FX-PROJECT/_javafx_website_task/target/classes/com/example/images/narnia.jpg differ
diff --git a/Code/ost/JAVA-FX-PROJECT/_javafx_website_task/target/classes/com/example/images/stormlight.jpg b/Code/ost/JAVA-FX-PROJECT/_javafx_website_task/target/classes/com/example/images/stormlight.jpg
new file mode 100644
index 0000000..5ff0418
Binary files /dev/null and b/Code/ost/JAVA-FX-PROJECT/_javafx_website_task/target/classes/com/example/images/stormlight.jpg differ
diff --git a/Code/ost/JAVA-FX-PROJECT/_javafx_website_task/target/classes/com/example/images/theFirstLaw.jpg b/Code/ost/JAVA-FX-PROJECT/_javafx_website_task/target/classes/com/example/images/theFirstLaw.jpg
new file mode 100644
index 0000000..259c741
Binary files /dev/null and b/Code/ost/JAVA-FX-PROJECT/_javafx_website_task/target/classes/com/example/images/theFirstLaw.jpg differ
diff --git a/Code/ost/JAVA-FX-PROJECT/_javafx_website_task/target/classes/com/example/images/wheel.jpg b/Code/ost/JAVA-FX-PROJECT/_javafx_website_task/target/classes/com/example/images/wheel.jpg
new file mode 100644
index 0000000..8a53c9a
Binary files /dev/null and b/Code/ost/JAVA-FX-PROJECT/_javafx_website_task/target/classes/com/example/images/wheel.jpg differ
diff --git a/Code/ost/JAVA-FX-PROJECT/_javafx_website_task/target/classes/com/example/shop.fxml b/Code/ost/JAVA-FX-PROJECT/_javafx_website_task/target/classes/com/example/shop.fxml
index 568d3ad..f1b79c9 100644
--- a/Code/ost/JAVA-FX-PROJECT/_javafx_website_task/target/classes/com/example/shop.fxml
+++ b/Code/ost/JAVA-FX-PROJECT/_javafx_website_task/target/classes/com/example/shop.fxml
@@ -3,6 +3,7 @@
 <?import javafx.geometry.Insets?>
 <?import javafx.scene.control.Button?>
 <?import javafx.scene.control.Label?>
+<?import javafx.scene.control.TextArea?>
 <?import javafx.scene.layout.BorderPane?>
 <?import javafx.scene.layout.ColumnConstraints?>
 <?import javafx.scene.layout.GridPane?>
@@ -46,67 +47,95 @@
             <Insets />
          </BorderPane.margin>
          <children>
-            <!-- Card 1 -->
-            <VBox id="cardDiv" prefHeight="200.0" prefWidth="100.0" styleClass="cardDiv">
+            <!-- Card 1: Lord of the Rings -->
+            <VBox id="cardDiv1" prefHeight="200.0" prefWidth="100.0" styleClass="cardDiv">
                <children>
-                  <Label id="cardTitel" styleClass="cardTitel" text="Booktitel" />
-                  <Button id="cardBtn" mnemonicParsing="false" styleClass="cardBtn" text="add to cart" />
-                  <Label id="cardText" styleClass="cardText" text="Description: ...." />
+                  <Label id="cardTitel" styleClass="cardTitel" text="Lord of the Rings" />
+                  <Button id="cardBtn" mnemonicParsing="false" styleClass="cardBtn" text="Add to Cart" />
+                  <TextArea id="cardText" editable="false" prefRowCount="4" styleClass="cardText" text="Description: A high-fantasy epic by J.R.R. Tolkien. The story follows the journey of Frodo Baggins and his companions as they attempt to destroy the One Ring and defeat the Dark Lord Sauron." wrapText="true">
+                     <opaqueInsets>
+                        <Insets />
+                     </opaqueInsets>
+                     <VBox.margin>
+                        <Insets top="10.0" />
+                     </VBox.margin></TextArea>
                </children>
             </VBox>
-            <!-- Card 3 -->
-            <VBox id="cardDiv" prefHeight="200.0" prefWidth="100.0" styleClass="cardDiv" GridPane.columnIndex="2">
+            <!-- Card 2: The Wheel of Time -->
+            <VBox id="cardDiv2" prefHeight="200.0" prefWidth="100.0" styleClass="cardDiv" GridPane.columnIndex="1">
                <children>
-                  <Label id="cardTitel" styleClass="cardTitel" text="Booktitel" />
-                  <Button id="cardBtn" mnemonicParsing="false" styleClass="cardBtn" text="add to cart" />
-                  <Label id="cardText" styleClass="cardText" text="Description: ...." />
+                  <Label id="cardTitel" styleClass="cardTitel" text="The Wheel of Time" />
+                  <Button id="cardBtn" mnemonicParsing="false" styleClass="cardBtn" text="Add to Cart" />
+                  <TextArea id="cardText" editable="false" prefRowCount="4" styleClass="cardText" text="Description: A sprawling epic fantasy series by Robert Jordan. It follows the journey of Rand al'Thor as he struggles to control his newfound powers and faces the ultimate battle between light and shadow." wrapText="true">
+                     <VBox.margin>
+                        <Insets top="10.0" />
+                     </VBox.margin></TextArea>
                </children>
             </VBox>
-            <!-- Card 4 -->
-            <VBox id="cardDiv" prefHeight="200.0" prefWidth="100.0" styleClass="cardDiv" GridPane.columnIndex="3">
+            <!-- Card 3: The Chronicles of Narnia -->
+            <VBox id="cardDiv3" prefHeight="200.0" prefWidth="100.0" styleClass="cardDiv" GridPane.columnIndex="2">
                <children>
-                  <Label id="cardTitel" styleClass="cardTitel" text="Booktitel" />
-                  <Button id="cardBtn" mnemonicParsing="false" styleClass="cardBtn" text="add to cart" />
-                  <Label id="cardText" styleClass="cardText" text="Description: ...." />
+                  <Label id="cardTitel" styleClass="cardTitel" text="The Chronicles of Narnia" />
+                  <Button id="cardBtn" mnemonicParsing="false" styleClass="cardBtn" text="Add to Cart" />
+                  <TextArea id="cardText" editable="false" prefRowCount="4" styleClass="cardText" text="Description: A classic series by C.S. Lewis. The Chronicles of Narnia explores the adventures of children who discover a magical world, Narnia, and become part of its struggle against the forces of evil." wrapText="true">
+                     <VBox.margin>
+                        <Insets top="10.0" />
+                     </VBox.margin></TextArea>
                </children>
             </VBox>
-            <!-- Card 5 -->
-            <VBox id="cardDiv" prefHeight="200.0" prefWidth="100.0" styleClass="cardDiv" GridPane.rowIndex="1">
+            <!-- Card 4: The Earthsea Cycle -->
+            <VBox id="cardDiv4" prefHeight="200.0" prefWidth="100.0" styleClass="cardDiv" GridPane.columnIndex="3">
                <children>
-                  <Label id="cardTitel" styleClass="cardTitel" text="Booktitel" />
-                  <Button id="cardBtn" mnemonicParsing="false" styleClass="cardBtn" text="add to cart" />
-                  <Label id="cardText" styleClass="cardText" text="Description: ...." />
+                  <Label id="cardTitel" styleClass="cardTitel" text="The Earthsea Cycle" />
+                  <Button id="cardBtn" mnemonicParsing="false" styleClass="cardBtn" text="Add to Cart" />
+                  <TextArea id="cardText" editable="false" prefRowCount="4" styleClass="cardText" text="Description: A fantasy series by Ursula K. Le Guin. The Earthsea Cycle follows Ged, a young wizard, as he embarks on a journey of self-discovery and learns the true meaning of power." wrapText="true">
+                     <VBox.margin>
+                        <Insets top="10.0" />
+                     </VBox.margin></TextArea>
                </children>
             </VBox>
-            <!-- Card 6 -->
-            <VBox id="cardDiv" prefHeight="200.0" prefWidth="100.0" styleClass="cardDiv" GridPane.columnIndex="1" GridPane.rowIndex="1">
+            <!-- Card 5: The First Law Trilogy -->
+            <VBox id="cardDiv5" prefHeight="200.0" prefWidth="100.0" styleClass="cardDiv" GridPane.rowIndex="1">
                <children>
-                  <Label id="cardTitel" styleClass="cardTitel" text="Booktitel" />
-                  <Button id="cardBtn" mnemonicParsing="false" styleClass="cardBtn" text="add to cart" />
-                  <Label id="cardText" styleClass="cardText" text="Description: ...." />
+                  <Label id="cardTitel" styleClass="cardTitel" text="The First Law Trilogy" />
+                  <Button id="cardBtn" mnemonicParsing="false" styleClass="cardBtn" text="Add to Cart" />
+                  <TextArea id="cardText" editable="false" prefRowCount="4" styleClass="cardText" text="Description: A dark fantasy series by Joe Abercrombie. It focuses on a group of characters navigating a brutal world, where honor and loyalty are tested by betrayal and violence." wrapText="true">
+                     <VBox.margin>
+                        <Insets top="10.0" />
+                     </VBox.margin></TextArea>
                </children>
             </VBox>
-            <!-- Card 7 -->
-            <VBox id="cardDiv" prefHeight="200.0" prefWidth="100.0" styleClass="cardDiv" GridPane.columnIndex="2" GridPane.rowIndex="1">
+            <!-- Card 6: The Kingkiller Chronicle -->
+            <VBox id="cardDiv6" prefHeight="200.0" prefWidth="100.0" styleClass="cardDiv" GridPane.columnIndex="1" GridPane.rowIndex="1">
                <children>
-                  <Label id="cardTitel" styleClass="cardTitel" text="Booktitel" />
-                  <Button id="cardBtn" mnemonicParsing="false" styleClass="cardBtn" text="add to cart" />
-                  <Label id="cardText" styleClass="cardText" text="Description: ...." />
+                  <Label id="cardTitel" styleClass="cardTitel" text="The Kingkiller Chronicle" />
+                  <Button id="cardBtn" mnemonicParsing="false" styleClass="cardBtn" text="Add to Cart" />
+                  <TextArea id="cardText" editable="false" prefRowCount="4" styleClass="cardText" text="Description: A tale of magic and music by Patrick Rothfuss. The series follows Kvothe, a legendary figure, as he recounts his life story filled with adventures, heartbreaks, and personal struggles." wrapText="true">
+                     <VBox.margin>
+                        <Insets top="10.0" />
+                     </VBox.margin></TextArea>
                </children>
             </VBox>
-            <!-- Card 8 -->
-            <VBox id="cardDiv" prefHeight="200.0" prefWidth="100.0" styleClass="cardDiv" GridPane.columnIndex="3" GridPane.rowIndex="1">
+            <!-- Card 7: The Mistborn Series -->
+            <VBox id="cardDiv7" prefHeight="200.0" prefWidth="100.0" styleClass="cardDiv" GridPane.columnIndex="2" GridPane.rowIndex="1">
                <children>
-                  <Label id="cardTitel" styleClass="cardTitel" text="Booktitel" />
-                  <Button id="cardBtn" mnemonicParsing="false" styleClass="cardBtn" text="add to cart" />
-                  <Label id="cardText" styleClass="cardText" text="Description: ...." />
+                  <Label id="cardTitel" styleClass="cardTitel" text="The Mistborn Series" />
+                  <Button id="cardBtn" mnemonicParsing="false" styleClass="cardBtn" text="Add to Cart" />
+                  <TextArea id="cardText" editable="false" prefRowCount="4" styleClass="cardText" text="Description: A magic-based series by Brandon Sanderson. Set in a world where ash falls from the sky, the series follows Vin, a young woman who discovers her incredible magical abilities and joins a group of rebels." wrapText="true">
+                     <VBox.margin>
+                        <Insets top="10.0" />
+                     </VBox.margin></TextArea>
                </children>
             </VBox>
-            <VBox id="cardDiv" prefHeight="200.0" prefWidth="100.0" styleClass="cardDiv" GridPane.columnIndex="1">
+            <!-- Card 8: The Stormlight Archive -->
+            <VBox id="cardDiv8" prefHeight="200.0" prefWidth="100.0" styleClass="cardDiv" GridPane.columnIndex="3" GridPane.rowIndex="1">
                <children>
-                  <Label id="cardTitel" styleClass="cardTitel" text="Booktitel" />
-                  <Button id="cardBtn" mnemonicParsing="false" styleClass="cardBtn" text="add to cart" />
-                  <Label id="cardText" styleClass="cardText" text="Description: ...." />
+                  <Label id="cardTitel" styleClass="cardTitel" text="The Stormlight Archive" />
+                  <Button id="cardBtn" mnemonicParsing="false" styleClass="cardBtn" text="Add to Cart" />
+                  <TextArea id="cardText" editable="false" prefRowCount="4" styleClass="cardText" text="Description: A high-fantasy epic by Brandon Sanderson. The series explores the lives of several characters on the Shattered Plains, as they fight to survive and uncover a dark secret that threatens their world." wrapText="true">
+                     <VBox.margin>
+                        <Insets top="10.0" />
+                     </VBox.margin></TextArea>
                </children>
             </VBox>
          </children>
diff --git a/Code/ost/JAVA-FX-PROJECT/_javafx_website_task/target/classes/com/example/styles.css b/Code/ost/JAVA-FX-PROJECT/_javafx_website_task/target/classes/com/example/styles.css
index 59668bf..c93b6f9 100644
--- a/Code/ost/JAVA-FX-PROJECT/_javafx_website_task/target/classes/com/example/styles.css
+++ b/Code/ost/JAVA-FX-PROJECT/_javafx_website_task/target/classes/com/example/styles.css
@@ -82,6 +82,8 @@
     -fx-min-height: 230;
 }
 
+
+
 .cardTitel {
     -fx-font-size: 18px;
     -fx-font-weight: 600;
@@ -91,7 +93,64 @@
 }
 
 .cardText {
-    -fx-text-fill: #ffffff;
+    -fx-text-fill: #000;
+    -fx-margin: 10px auto;
+}
+
+#cardDiv1 {
+    -fx-background-image: url('images/lotr.jpg');
+    -fx-background-size: cover;
+    -fx-background-repeat: no-repeat;
+    -fx-background-position: center;
+}
+
+#cardDiv2 {
+    -fx-background-image: url('images/wheel.jpg');
+    -fx-background-size: cover;
+    -fx-background-repeat: no-repeat;
+    -fx-background-position: center;
+}
+
+#cardDiv3 {
+    -fx-background-image: url('images/narnia.jpg');
+    -fx-background-size: cover;
+    -fx-background-repeat: no-repeat;
+    -fx-background-position: center;
+}
+
+#cardDiv4 {
+    -fx-background-image: url('images/earthsea.jpg');
+    -fx-background-size: cover;
+    -fx-background-repeat: no-repeat;
+    -fx-background-position: center;
+}
+
+#cardDiv5 {
+    -fx-background-image: url('images/theFirstLaw.jpg');
+    -fx-background-size: cover;
+    -fx-background-repeat: no-repeat;
+    -fx-background-position: center;
+}
+
+#cardDiv6 {
+    -fx-background-image: url('images/kingkiller.jpeg');
+    -fx-background-size: cover;
+    -fx-background-repeat: no-repeat;
+    -fx-background-position: center;
+}
+
+#cardDiv7 {
+    -fx-background-image: url('images/mistborn.jpg');
+    -fx-background-size: cover;
+    -fx-background-repeat: no-repeat;
+    -fx-background-position: center;
+}
+
+#cardDiv8 {
+    -fx-background-image: url('images/stormlight.jpg');
+    -fx-background-size: cover;
+    -fx-background-repeat: no-repeat;
+    -fx-background-position: center;
 }
 
 /* Buttons */
@@ -354,6 +413,7 @@
 
     .cardTitel {
         -fx-font-size: 16px;
+        -fx-background-color: #000;
     }
 
     .cardText {