diff --git a/public/images/gallery/Pains Traditionnels.jpeg b/public/images/gallery/Pains Traditionnels.png
similarity index 100%
rename from public/images/gallery/Pains Traditionnels.jpeg
rename to public/images/gallery/Pains Traditionnels.png
diff --git a/public/images/gallery/Pâtisseries.jpg b/public/images/gallery/Pâtisseries.png
similarity index 100%
rename from public/images/gallery/Pâtisseries.jpg
rename to public/images/gallery/Pâtisseries.png
diff --git a/public/images/ressources/card-back.png b/public/images/ressources/card-back.png
new file mode 100644
index 0000000..f81c66f
Binary files /dev/null and b/public/images/ressources/card-back.png differ
diff --git a/public/images/ressources/card-front.png b/public/images/ressources/card-front.png
new file mode 100644
index 0000000..1d2ca70
Binary files /dev/null and b/public/images/ressources/card-front.png differ
diff --git a/src/app/globals.css b/src/app/globals.css
index e5cf6b4..637015c 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -2,12 +2,55 @@
 @tailwind components;
 @tailwind utilities;
 
+html {
+  scroll-behavior: smooth;
+}
+
 body {
   @apply bg-bakery-50 text-bakery-900;
+  opacity: 0;
+  animation: fadeIn 0.5s ease-in forwards;
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+    transform: translateY(10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
 }
 
 @layer components {
   .container {
     @apply max-w-7xl mx-auto px-4 sm:px-6 lg:px-8;
   }
+}
+
+/* Add card flip animation */
+.card-container {
+  perspective: 1000px;
+}
+
+.card {
+  transition: transform 0.8s;
+  transform-style: preserve-3d;
+}
+
+.card:hover {
+  transform: rotateY(180deg);
+}
+
+.card-front,
+.card-back {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  backface-visibility: hidden;
+}
+
+.card-back {
+  transform: rotateY(180deg);
 }
\ No newline at end of file
diff --git a/src/components/HomePage.tsx b/src/components/HomePage.tsx
index 1bee02f..b5c492e 100644
--- a/src/components/HomePage.tsx
+++ b/src/components/HomePage.tsx
@@ -88,6 +88,33 @@ const HomePage = () => {
             Rejoignez notre programme de fidélité et bénéficiez d'avantages exclusifs.
             Votre 10ème baguette offerte !
           </p>
+          
+          {/* Loyalty Card with Flip Effect */}
+          <div className="card-container max-w-2xl mx-auto h-[200px] mb-8">
+            <div className="card relative w-full h-full">
+              {/* Front of the card */}
+              <div className="card-front">
+                <Image
+                  src="/images/ressources/card-front.png"
+                  alt="Carte de fidélité - Recto"
+                  fill
+                  className="object-contain rounded-xl shadow-lg"
+                  priority
+                />
+              </div>
+              {/* Back of the card */}
+              <div className="card-back">
+                <Image
+                  src="/images/ressources/card-back.png"
+                  alt="Carte de fidélité - Verso"
+                  fill
+                  className="object-contain rounded-xl shadow-lg"
+                  priority
+                />
+              </div>
+            </div>
+          </div>
+
           <button className="bg-white text-bakery-600 px-8 py-3 rounded-md hover:bg-bakery-50 transition">
             Obtenir ma carte
           </button>