diff --git a/.idea/Gallus_Pub.iml b/.idea/Gallus_Pub.iml
index 24643cc..9f7ba11 100644
--- a/.idea/Gallus_Pub.iml
+++ b/.idea/Gallus_Pub.iml
@@ -8,5 +8,6 @@
     </content>
     <orderEntry type="inheritedJdk" />
     <orderEntry type="sourceFolder" forTests="false" />
+    <orderEntry type="library" name="font-awesome" level="application" />
   </component>
 </module>
\ No newline at end of file
diff --git a/Gallus_Pub_v1/src/components/HoverCard.astro b/Gallus_Pub_v1/src/components/HoverCard.astro
new file mode 100644
index 0000000..17ff057
--- /dev/null
+++ b/Gallus_Pub_v1/src/components/HoverCard.astro
@@ -0,0 +1,91 @@
+---
+// HoverCard.astro
+// Diese Komponente nimmt ein Bild, einen Titel und einen Text entgegen und zeigt sie als Hover-Karte an
+
+// Definieren der Props, die die Komponente akzeptiert
+interface Props {
+    imageSrc: string;  // Pfad zum Bild
+    title: string;     // Titel der Karte
+    text: string;      // Text, der beim Hover angezeigt wird
+    altText?: string;  // Alternative Textbeschreibung für das Bild (optional)
+}
+
+// Extrahieren der Props
+const {imageSrc, title, text, altText = ""} = Astro.props;
+---
+
+<div class="hover-card">
+    <h3 class="card-title">{title}</h3>
+    <div class="image-container">
+        <img src={imageSrc} alt={altText || title} class="card-image"/>
+    </div>
+    <div class="hover-text">
+        <p>{text}</p>
+    </div>
+</div>
+
+<style>
+  .hover-card {
+    position: relative;
+    width: 250px;
+    height: 300px;
+    overflow: hidden;
+    border-radius: 8px;
+    background-color: #213b28; /* Grüner Hintergrund, der gleiche wie in Ihrer Website */
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+    transition: transform 0.3s ease;
+  }
+
+  .hover-card:hover {
+    transform: translateY(-5px);
+  }
+
+  .image-container {
+    width: 100%;
+    padding-top: 100%; /* Macht das Bild quadratisch */
+    position: relative;
+    overflow: hidden;
+  }
+
+  .card-image {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    object-fit: cover; /* Damit wird das Bild ohne Verzerrung angepasst */
+    transition: transform 0.3s ease;
+  }
+
+  .card-title {
+    padding: 15px;
+    margin: 0;
+    color: #ceb39b; /* Gleiche Textfarbe wie in Ihrer Website */
+    font-size: 1.2rem;
+    text-align: center;
+  }
+
+  .hover-text {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(33, 59, 40, 0.9); /* Leicht transparente Version des grünen Hintergrunds */
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding: 20px;
+    opacity: 0;
+    transition: opacity 0.3s ease;
+    color: #ceb39b;
+  }
+
+  .hover-card:hover .hover-text {
+    opacity: 1;
+  }
+
+  .hover-card:hover .card-image {
+    transform: scale(1.1);
+  }
+</style>
\ No newline at end of file
diff --git a/Gallus_Pub_v1/src/pages/index.astro b/Gallus_Pub_v1/src/pages/index.astro
index a89ec34..858053d 100644
--- a/Gallus_Pub_v1/src/pages/index.astro
+++ b/Gallus_Pub_v1/src/pages/index.astro
@@ -1,6 +1,7 @@
 ---
 import Header from '../components/Header.astro';
 import Footer from '../components/Footer.astro';
+import HoverCard from '../components/HoverCard.astro';
 import '../../styles/index.css'
 ---
 
@@ -27,6 +28,12 @@ import '../../styles/index.css'
 		<h2>Abschnitt 2</h2>
 		<p>Mehr Inhalt zum Scrollen...</p>
 	</div>
+	<HoverCard
+		imageSrc="images/Logo.png"
+		title="Whisky-Tasting"
+		text="Jeden ersten Mittwoch im Monat bieten wir ein exklusives Whisky-Tasting an. Erfahren Sie mehr über die verschiedenen Aromen und Geschmacksrichtungen."
+	/>
+
 </main>
 <Footer />
 </body>