diff --git a/public/icon.jpg b/public/icon.jpg
new file mode 100644
index 0000000..7759164
Binary files /dev/null and b/public/icon.jpg differ
diff --git a/resources/js/components/landing/HeroSection.vue b/resources/js/components/landing/HeroSection.vue
index b61f127..1534695 100644
--- a/resources/js/components/landing/HeroSection.vue
+++ b/resources/js/components/landing/HeroSection.vue
@@ -1,5 +1,15 @@
 <script lang="ts" setup>
 import { router } from '@inertiajs/vue3';
+import { onMounted, ref } from 'vue';
+
+const isMounted = ref(false);
+const buttonHover = ref(false);
+
+onMounted(() => {
+    setTimeout(() => {
+        isMounted.value = true;
+    }, 100);
+});
 
 const goToShuffle = () => {
     router.visit('/tirage');
@@ -7,7 +17,8 @@ const goToShuffle = () => {
 </script>
 
 <template>
-    <div class="relative flex items-center justify-center py-20 text-center sm:py-32">
+    <div class="relative flex items-center justify-center overflow-hidden py-20 text-center sm:py-32">
+        <!-- Animated background elements -->
         <div class="absolute inset-0 overflow-hidden">
             <div
                 class="absolute inset-0 bg-cover bg-center"
@@ -17,23 +28,171 @@ const goToShuffle = () => {
                 "
             ></div>
             <div class="absolute inset-0 bg-gradient-to-t from-[var(--light-ivory)] via-transparent to-transparent"></div>
+
+            <!-- Smooth gold particles with stable positions -->
+            <div
+                v-for="i in 15"
+                :key="i"
+                class="gold-particle absolute"
+                :style="{
+                    left: `${10 + Math.random() * 80}%`,
+                    top: `${10 + Math.random() * 80}%`,
+                    width: `${Math.random() * 8 + 4}px`,
+                    height: `${Math.random() * 8 + 4}px`,
+                    animationDelay: `${Math.random() * 2}s`,
+                    animationDuration: `${Math.random() * 15 + 15}s`,
+                }"
+            ></div>
+
+            <!-- Larger, slower gold elements -->
+            <div
+                v-for="i in 5"
+                :key="'large-' + i"
+                class="large-gold-particle absolute"
+                :style="{
+                    left: `${15 + Math.random() * 70}%`,
+                    top: `${15 + Math.random() * 70}%`,
+                    width: `${Math.random() * 20 + 15}px`,
+                    height: `${Math.random() * 20 + 15}px`,
+                    animationDelay: `${Math.random() * 5}s`,
+                    animationDuration: `${Math.random() * 25 + 25}s`,
+                }"
+            ></div>
         </div>
-        <div class="relative z-10 flex max-w-3xl flex-col items-center gap-6">
-            <h1 class="text-5xl font-bold text-[var(--pure-white)] md:text-7xl" style="text-shadow: 0 2px 20px rgba(0, 0, 0, 0.4)">
+
+        <!-- Main content with animations -->
+        <div class="relative z-10 flex max-w-3xl flex-col items-center gap-6 px-4">
+            <!-- Animated title -->
+            <h1
+                class="text-5xl font-bold text-[var(--pure-white)] md:text-7xl"
+                :class="{ 'animate-fade-in-up': isMounted }"
+                style="text-shadow: 0 2px 20px rgba(0, 0, 0, 0.4)"
+            >
                 Révélez Votre
-                <span class="citadel-script text-6xl text-[var(--subtle-gold)] md:text-8xl">Empire</span>
+                <span class="citadel-script relative text-6xl text-[var(--subtle-gold)] md:text-8xl">
+                    <span class="gold-glow">Voyage</span>
+                    <!-- Gold underline accent -->
+                    <span
+                        class="absolute right-0 -bottom-2 left-0 h-1 scale-x-0 transform bg-gradient-to-r from-transparent via-[var(--subtle-gold)] to-transparent transition-transform duration-1000"
+                        :class="{ 'scale-x-100': isMounted }"
+                    ></span>
+                </span>
                 Intérieur
             </h1>
-            <p class="max-w-2xl text-lg text-[var(--linen)]">
-                Embrassez la sagesse intemporelle de l’Oracle de Kris Saint Ange, un guide stratégique pour naviguer votre destin avec clarté et
+
+            <!-- Animated description -->
+            <p
+                class="max-w-2xl text-lg text-[var(--linen)] transition-all delay-500 duration-1000"
+                :class="{ 'translate-y-0 opacity-100': isMounted, 'translate-y-4 opacity-0': !isMounted }"
+            >
+                Embrassez la sagesse intemporelle de l'Oracle de Kris Saint Ange, un guide stratégique pour naviguer votre destin avec clarté et
                 confiance.
             </p>
+
+            <!-- Animated button with gold effects -->
             <button
-                class="mt-4 flex h-12 max-w-[480px] min-w-[120px] cursor-pointer items-center justify-center overflow-hidden rounded-full bg-[var(--subtle-gold)] px-8 text-base font-bold tracking-wide text-[var(--midnight-blue)] transition-all duration-300 hover:shadow-[var(--subtle-gold)]/30 hover:shadow-lg"
+                class="group gold-button relative mt-4 flex h-14 max-w-[480px] min-w-[160px] cursor-pointer items-center justify-center overflow-hidden rounded-full bg-gradient-to-b from-[var(--subtle-gold)] to-[#c8a971] px-8 text-base font-bold tracking-wide text-[var(--midnight-blue)] transition-all duration-500"
+                :class="{ 'shadow-[var(--subtle-gold)]/40 shadow-lg': buttonHover }"
                 @click="goToShuffle"
+                @mouseenter="buttonHover = true"
+                @mouseleave="buttonHover = false"
             >
-                <span class="truncate">Découvrir Votre Oracle</span>
+                <!-- Gold shine effect -->
+                <span
+                    class="absolute inset-0 translate-x-[-100%] -skew-x-12 transform bg-gradient-to-r from-transparent via-white/30 to-transparent transition-transform duration-1000 group-hover:translate-x-[100%]"
+                ></span>
+
+                <span class="relative z-10 truncate">Découvrir Votre Oracle</span>
+
+                <!-- Animated arrow icon -->
+                <svg
+                    class="relative z-10 ml-2 h-5 w-5 transition-transform duration-300"
+                    :class="{ 'translate-x-1': buttonHover }"
+                    fill="none"
+                    viewBox="0 0 24 24"
+                    stroke="currentColor"
+                >
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3" />
+                </svg>
             </button>
         </div>
     </div>
 </template>
+
+<style scoped>
+/* Gold particle animation */
+.gold-particle {
+    background: radial-gradient(circle, var(--subtle-gold) 30%, transparent 70%);
+    border-radius: 50%;
+    opacity: 0.6;
+    animation: gentle-float 20s infinite ease-in-out;
+    pointer-events: none;
+    transform-origin: center;
+}
+
+.large-gold-particle {
+    background: radial-gradient(circle, var(--subtle-gold) 20%, transparent 70%);
+    border-radius: 50%;
+    opacity: 0.3;
+    animation: gentle-float 30s infinite ease-in-out;
+    pointer-events: none;
+    transform-origin: center;
+}
+
+@keyframes gentle-float {
+    0%,
+    100% {
+        transform: translateY(0) translateX(0) rotate(0deg) scale(1);
+        opacity: 0.6;
+    }
+    25% {
+        transform: translateY(-10px) translateX(5px) rotate(2deg) scale(1.02);
+    }
+    50% {
+        transform: translateY(-5px) translateX(8px) rotate(4deg) scale(1.05);
+        opacity: 0.7;
+    }
+    75% {
+        transform: translateY(3px) translateX(3px) rotate(2deg) scale(1.02);
+    }
+}
+
+/* Title animation */
+.animate-fade-in-up {
+    animation: fadeInUp 1.2s ease-out forwards;
+}
+
+@keyframes fadeInUp {
+    from {
+        opacity: 0;
+        transform: translateY(20px);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+/* Gold text glow */
+.gold-glow {
+    text-shadow:
+        0 0 10px rgba(212, 175, 55, 0.5),
+        0 0 20px rgba(212, 175, 55, 0.3),
+        0 0 30px rgba(212, 175, 55, 0.2);
+}
+
+/* Button styling without particle interaction */
+.gold-button {
+    box-shadow: 0 0 15px rgba(212, 175, 55, 0.5);
+    transition: all 0.3s ease;
+}
+
+.gold-button:hover {
+    box-shadow: 0 0 25px rgba(212, 175, 55, 0.7);
+    transform: translateY(-2px);
+}
+
+.gold-button:active {
+    transform: translateY(1px);
+}
+</style>
diff --git a/resources/js/components/landing/HowSection.vue b/resources/js/components/landing/HowSection.vue
index 324aee9..71d3830 100644
--- a/resources/js/components/landing/HowSection.vue
+++ b/resources/js/components/landing/HowSection.vue
@@ -1,6 +1,6 @@
 <template>
     <section class="py-20 sm:py-24">
-        <h2 class="mb-16 text-center text-4xl font-bold text-[var(--midnight-blue)] md:text-5xl">Comment Ça Marche</h2>
+        <h2 class="mb-16 text-center text-4xl font-bold text-[var(--midnight-blue)] md:text-5xl">Comment cela fonctionne</h2>
         <div class="relative mx-auto max-w-2xl">
             <div class="absolute left-1/2 h-full w-0.5 -translate-x-1/2 bg-[var(--linen)]"></div>
             <div class="relative z-10 flex flex-col gap-16">
diff --git a/resources/js/components/organism/ShuffleCard/ShuffleCardPresentation.vue b/resources/js/components/organism/ShuffleCard/ShuffleCardPresentation.vue
index 1ac8df7..130d9f0 100644
--- a/resources/js/components/organism/ShuffleCard/ShuffleCardPresentation.vue
+++ b/resources/js/components/organism/ShuffleCard/ShuffleCardPresentation.vue
@@ -149,20 +149,20 @@ defineExpose({ setDrawnCards });
                                 </div>
                             </div>
                         </div>
-                        <button
-                            @click="goToSelection"
-                            class="mt-8 flex h-12 max-w-[480px] min-w-[200px] cursor-pointer items-center justify-center overflow-hidden rounded-full bg-[var(--midnight-blue)] px-8 text-base font-bold tracking-wide text-[var(--pure-white)] transition-all duration-300 hover:bg-[var(--spiritual-earth)] hover:shadow-[var(--spiritual-earth)]/30 hover:shadow-lg disabled:cursor-not-allowed disabled:bg-gray-400 disabled:hover:shadow-none"
-                        >
-                            <span class="truncate">Retourner à la sélection des cartes</span>
-                        </button>
-                        <button
-                            @click="goToResult"
-                            class="mt-8 flex h-12 max-w-[480px] min-w-[200px] cursor-pointer items-center justify-center overflow-hidden rounded-full bg-[var(--midnight-blue)] px-8 text-base font-bold tracking-wide text-[var(--pure-white)] transition-all duration-300 hover:bg-[var(--spiritual-earth)] hover:shadow-[var(--spiritual-earth)]/30 hover:shadow-lg disabled:cursor-not-allowed disabled:bg-gray-400 disabled:hover:shadow-none"
-                        >
-                            <span class="truncate">Resultat du tirage</span>
-                        </button>
                     </div>
                 </transition>
+                <button
+                    @click="goToSelection"
+                    class="mt-8 flex h-12 max-w-[480px] min-w-[200px] cursor-pointer items-center justify-center overflow-hidden rounded-full bg-[var(--midnight-blue)] px-8 text-base font-bold tracking-wide text-[var(--pure-white)] transition-all duration-300 hover:bg-[var(--spiritual-earth)] hover:shadow-[var(--spiritual-earth)]/30 hover:shadow-lg disabled:cursor-not-allowed disabled:bg-gray-400 disabled:hover:shadow-none"
+                >
+                    <span class="truncate">Retourner à la sélection des cartes</span>
+                </button>
+                <button
+                    @click="goToResult"
+                    class="mt-8 flex h-12 max-w-[480px] min-w-[200px] cursor-pointer items-center justify-center overflow-hidden rounded-full bg-[var(--midnight-blue)] px-8 text-base font-bold tracking-wide text-[var(--pure-white)] transition-all duration-300 hover:bg-[var(--spiritual-earth)] hover:shadow-[var(--spiritual-earth)]/30 hover:shadow-lg disabled:cursor-not-allowed disabled:bg-gray-400 disabled:hover:shadow-none"
+                >
+                    <span class="truncate">Resultat du tirage</span>
+                </button>
             </div>
         </template>
     </CardShuffleTemplate>
diff --git a/resources/js/components/ui/card/CardResult.vue b/resources/js/components/ui/card/CardResult.vue
index 4d5d68e..09c2a66 100644
--- a/resources/js/components/ui/card/CardResult.vue
+++ b/resources/js/components/ui/card/CardResult.vue
@@ -1,29 +1,65 @@
 <template>
-    <div class="border-linen flex flex-col items-center gap-8 rounded-lg border bg-white p-8 shadow-sm md:flex-row">
-        <div
-            class="h-72 w-48 flex-shrink-0 rounded-md bg-cover bg-center bg-no-repeat"
-            :style="{
-                'background-image': `url('${imageUrl}')`,
-                'box-shadow': '0 0 15px 5px rgba(215, 186, 141, 0.3)'
-            }"
-        ></div>
-        <div class="flex flex-col gap-2">
-            <p class="text-spiritual-earth text-sm tracking-widest uppercase">Carte {{ cardNumber }}</p>
-            <h3 class="text-midnight-blue text-2xl font-bold">{{ name }}</h3>
-            <p class="text-midnight-blue/80 leading-relaxed">{{ description }}</p>
-        </div>
+  <div
+    class="border-linen flex flex-col items-center gap-6 md:gap-8 rounded-lg border bg-white p-6 md:p-8 shadow-sm transition-all duration-300 hover:shadow-md md:flex-row"
+  >
+    <!-- Card Image -->
+    <div class="relative">
+      <div
+        class="h-56 w-36 sm:h-64 sm:w-40 md:h-72 md:w-48 flex-shrink-0 rounded-md bg-cover bg-center bg-no-repeat transition-transform duration-300 hover:scale-105"
+        :style="{
+          'background-image': `url('${imageUrl}')`,
+          'box-shadow': '0 0 15px 5px rgba(215, 186, 141, 0.3)',
+          transform: orientation === 'reversed' ? 'rotate(180deg)' : 'none'
+        }"
+      ></div>
+      <div
+        v-if="orientation === 'reversed'"
+        class="absolute top-2 right-2 bg-red-100 text-red-800 text-xs px-2 py-1 rounded-full"
+      >
+        Inversée
+      </div>
     </div>
+
+    <!-- Card Content -->
+    <div class="flex flex-col gap-3 text-center md:text-left">
+      <p class="text-spiritual-earth text-xs sm:text-sm tracking-widest uppercase font-semibold">
+        Carte {{ cardNumber }}
+      </p>
+      <h3 class="text-midnight-blue text-xl sm:text-2xl font-bold leading-tight">
+        {{ name }}
+      </h3>
+      <p class="text-midnight-blue/80 text-sm sm:text-base leading-relaxed">
+        {{ description }}
+      </p>
+    </div>
+  </div>
 </template>
 
 <script setup lang="ts">
-import { defineProps } from 'vue';
-
 interface Props {
   cardNumber: number;
   name: string;
   imageUrl: string;
+  orientation?: string;
   description: string;
 }
 
 defineProps<Props>();
 </script>
+
+<style scoped>
+div {
+  animation: slideUp 0.5s ease-out;
+}
+
+@keyframes slideUp {
+  from {
+    opacity: 0;
+    transform: translateY(15px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+</style>
diff --git a/resources/js/layouts/app/LandingLayout.vue b/resources/js/layouts/app/LandingLayout.vue
index f462f0e..6069292 100644
--- a/resources/js/layouts/app/LandingLayout.vue
+++ b/resources/js/layouts/app/LandingLayout.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { Link } from '@inertiajs/vue3';
+import { Link, router } from '@inertiajs/vue3';
 import { ref } from 'vue';
 
 const isMobileMenuOpen = ref(false);
@@ -7,31 +7,20 @@ const isMobileMenuOpen = ref(false);
 const toggleMobileMenu = () => {
     isMobileMenuOpen.value = !isMobileMenuOpen.value;
 };
+
+const goToShuffle = () => {
+    router.visit('/tirage');
+};
 </script>
 
 <template>
     <div class="group/design-root relative flex size-full min-h-screen flex-col overflow-x-hidden">
         <div class="layout-container flex h-full grow flex-col">
             <header
-                class="bg-light-ivory/80 sticky top-0 z-50 flex items-center justify-between px-4 py-4 whitespace-nowrap backdrop-blur-sm md:px-10 lg:px-20"
+                class="bg-pure-white sticky top-0 z-50 flex items-center justify-between px-4 py-4 whitespace-nowrap backdrop-blur-sm md:px-10 lg:px-20"
             >
                 <div class="text-midnight-blue flex items-center gap-3">
-                    <svg class="text-subtle-gold h-6 w-6" fill="none" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
-                        <g clip-path="url(#clip0_6_535)">
-                            <path
-                                clip-rule="evenodd"
-                                d="M47.2426 24L24 47.2426L0.757355 24L24 0.757355L47.2426 24ZM12.2426 21H35.7574L24 9.24264L12.2426 21Z"
-                                fill="currentColor"
-                                fill-rule="evenodd"
-                            ></path>
-                        </g>
-                        <defs>
-                            <clipPath id="clip0_6_535">
-                                <rect fill="white" height="48" width="48"></rect>
-                            </clipPath>
-                        </defs>
-                    </svg>
-                    <h2 class="text-xl font-bold tracking-wide md:text-2xl">Kris Saint Ange</h2>
+                    <img src="icon.jpg" alt="Logo" class="h-30 w-30" />
                 </div>
 
                 <nav class="hidden flex-1 items-center justify-center gap-10 md:flex">
@@ -59,12 +48,16 @@ const toggleMobileMenu = () => {
 
                     <button
                         v-if="$page.url === '/'"
+                        @click="goToShuffle"
                         class="bg-midnight-blue text-pure-white hover:bg-spiritual-earth flex h-10 min-w-[100px] cursor-pointer items-center justify-center overflow-hidden rounded-full px-4 text-sm font-bold tracking-wide transition-all duration-300 md:px-6"
                     >
                         <span class="truncate">Commencer</span>
                     </button>
                 </div>
             </header>
+            <div class="gradient-bg">
+                <h1>2</h1>
+            </div>
             <nav v-if="isMobileMenuOpen" class="bg-light-ivory/90 flex flex-col items-center gap-4 py-4 md:hidden">
                 <Link
                     class="text-midnight-blue hover:text-subtle-gold text-sm font-medium transition-colors duration-300"
@@ -184,4 +177,15 @@ const toggleMobileMenu = () => {
 .bg-light-ivory {
     background-color: var(--light-ivory);
 }
+.gradient-bg {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    z-index: -1;
+    background: linear-gradient(180deg, var(--light-ivory) 0%, var(--pure-white) 100%);
+    background-size: 100% 100%;
+    transition: background-color 0.5s ease;
+}
 </style>
diff --git a/resources/js/pages/cards/cardSelection.vue b/resources/js/pages/cards/cardSelection.vue
index 6311576..d25a7b3 100644
--- a/resources/js/pages/cards/cardSelection.vue
+++ b/resources/js/pages/cards/cardSelection.vue
@@ -58,64 +58,213 @@ const redirectToStripeCheckout = async (count: number) => {
 
 // Computed to disable the free draw button if used
 const isFreeDrawUsed = computed(() => tarotStore.freeDrawsRemaining <= 0);
+
+// Hover state for cards
+const hoveredCard = ref(null);
+
+const setHover = (index) => {
+    hoveredCard.value = index;
+};
+
+const clearHover = () => {
+    hoveredCard.value = null;
+};
 </script>
-
 <template>
-    <section class="py-20 sm:py-24">
-        <h2 class="mb-16 text-center text-4xl font-bold text-[var(--midnight-blue)] md:text-5xl">Explorez Nos Lectures</h2>
+    <section class="px-4 py-16 sm:py-20">
+        <h2 class="mb-12 text-center text-3xl font-bold text-[var(--midnight-blue)] md:text-4xl lg:text-5xl">
+            Explorez Nos <span class="text-[var(--subtle-gold)]">Lectures</span>
+        </h2>
 
-        <p v-if="isFreeDrawUsed" class="mb-8 text-center text-lg font-semibold text-[var(--spiritual-earth)]">
+        <p
+            v-if="isFreeDrawUsed"
+            class="mx-auto mb-8 max-w-2xl rounded-lg bg-[var(--light-ivory)] p-4 text-center text-lg font-semibold text-[var(--spiritual-earth)]"
+        >
             Vous avez utilisé votre tirage gratuit ! Choisissez une option payante pour continuer.
         </p>
 
-        <div class="grid grid-cols-1 gap-8 md:grid-cols-2 lg:grid-cols-3">
+        <div class="mx-auto grid max-w-6xl grid-cols-1 gap-6 md:gap-8 lg:grid-cols-3">
             <!-- Free draw -->
             <div
-                class="flex flex-col gap-6 rounded-2xl border border-[var(--linen)] bg-[var(--pure-white)] p-8 shadow-lg transition-all duration-300 hover:-translate-y-2 hover:shadow-2xl"
+                class="relative flex flex-col gap-6 rounded-2xl border border-[var(--linen)] bg-[var(--pure-white)] p-6 shadow-lg transition-all duration-500 hover:-translate-y-3 hover:shadow-xl md:p-8"
+                :class="{ 'opacity-100': !isFreeDrawUsed, 'opacity-80': isFreeDrawUsed }"
+                @mouseenter="setHover(1)"
+                @mouseleave="clearHover"
             >
+                <!-- Decorative elements -->
+                <div class="absolute top-0 left-0 h-1 w-full bg-gradient-to-r from-transparent via-[var(--subtle-gold)] to-transparent"></div>
+
                 <div class="text-center">
-                    <h3 class="text-2xl font-bold text-[var(--midnight-blue)]">Lecture Gratuite</h3>
-                    <p class="mt-2 text-5xl font-bold text-[var(--subtle-gold)]">Gratuit</p>
+                    <div class="mb-4 flex justify-center">
+                        <div class="flex h-12 w-12 items-center justify-center rounded-full bg-[var(--light-ivory)]">
+                            <svg
+                                xmlns="http://www.w3.org/2000/svg"
+                                class="h-6 w-6 text-[var(--subtle-gold)]"
+                                fill="none"
+                                viewBox="0 0 24 24"
+                                stroke="currentColor"
+                            >
+                                <path
+                                    stroke-linecap="round"
+                                    stroke-linejoin="round"
+                                    stroke-width="2"
+                                    d="M12 8v13m0-13V6a2 2 0 112 2h-2zm0 0V5.5A2.5 2.5 0 109.5 8H12zm-7 4h14M5 12a2 2 0 110-4h14a2 2 0 110 4M5 12v7a2 2 0 002 2h10a2 2 0 002-2v-7"
+                                />
+                            </svg>
+                        </div>
+                    </div>
+                    <h3 class="text-xl font-bold text-[var(--midnight-blue)] md:text-2xl">Lecture Gratuite</h3>
+                    <p class="mt-2 text-4xl font-bold text-[var(--subtle-gold)] md:text-5xl">Gratuit</p>
+                    <p class="mt-4 text-sm text-gray-600 md:text-base">
+                        Une question simple, une réponse claire. Parfait pour une première expérience avec l'oracle.
+                    </p>
                 </div>
                 <button
                     :disabled="isFreeDrawUsed"
-                    class="mt-4 flex h-12 w-full items-center justify-center rounded-full bg-[var(--linen)] px-8 font-bold tracking-wide text-[var(--midnight-blue)] transition-all duration-300 hover:bg-[var(--spiritual-earth)] hover:text-[var(--pure-white)] disabled:cursor-not-allowed disabled:opacity-50"
+                    class="group mt-2 flex h-12 w-full items-center justify-center rounded-full bg-[var(--linen)] px-6 font-bold tracking-wide text-[var(--midnight-blue)] transition-all duration-300 hover:bg-[var(--spiritual-earth)] hover:text-[var(--pure-white)] disabled:cursor-not-allowed disabled:opacity-50"
                     @click="handleSelection(1)"
                 >
-                    Commencer
+                    <span>Commencer</span>
+                    <svg
+                        v-if="!isFreeDrawUsed"
+                        xmlns="http://www.w3.org/2000/svg"
+                        class="ml-2 h-5 w-5 transition-transform duration-300 group-hover:translate-x-1"
+                        fill="none"
+                        viewBox="0 0 24 24"
+                        stroke="currentColor"
+                    >
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3" />
+                    </svg>
                 </button>
             </div>
 
-            <!-- Paid options -->
+            <!-- Premium option -->
             <div
-                class="flex scale-105 flex-col gap-6 rounded-2xl bg-[var(--midnight-blue)] p-8 shadow-lg ring-2 ring-[var(--subtle-gold)] transition-all duration-300 hover:-translate-y-2 hover:shadow-2xl"
+                class="relative flex transform flex-col gap-6 rounded-2xl bg-gradient-to-b from-[var(--midnight-blue)] to-[#1a365d] p-6 shadow-xl transition-all duration-500 hover:-translate-y-3 hover:shadow-2xl md:scale-105 md:p-8"
+                @mouseenter="setHover(2)"
+                @mouseleave="clearHover"
             >
-                <div class="text-center">
-                    <h3 class="text-2xl font-bold text-[var(--pure-white)]">Profilage</h3>
-                    <p class="mt-2 text-5xl font-bold text-[var(--subtle-gold)]">29€</p>
+                <!-- Premium badge -->
+                <div class="absolute -top-3 left-1/2 -translate-x-1/2 transform">
+                    <span class="rounded-full bg-[var(--subtle-gold)] px-3 py-1 text-xs font-bold text-[var(--midnight-blue)] uppercase"
+                        >Populaire</span
+                    >
+                </div>
+
+                <!-- Shine effect on hover -->
+                <div
+                    class="absolute inset-0 rounded-2xl bg-gradient-to-r from-transparent via-[var(--subtle-gold)]/10 to-transparent opacity-0 transition-opacity duration-500"
+                    :class="{ 'opacity-100': hoveredCard === 2 }"
+                ></div>
+
+                <div class="relative z-10 text-center">
+                    <div class="mb-4 flex justify-center">
+                        <div class="flex h-12 w-12 items-center justify-center rounded-full bg-[var(--subtle-gold)]/20">
+                            <svg
+                                xmlns="http://www.w3.org/2000/svg"
+                                class="h-6 w-6 text-[var(--subtle-gold)]"
+                                fill="none"
+                                viewBox="0 0 24 24"
+                                stroke="currentColor"
+                            >
+                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z" />
+                            </svg>
+                        </div>
+                    </div>
+                    <h3 class="text-xl font-bold text-[var(--pure-white)] md:text-2xl">Profilage</h3>
+                    <p class="mt-2 text-4xl font-bold text-[var(--subtle-gold)] md:text-5xl">29€</p>
+                    <p class="mt-4 text-sm text-gray-200 md:text-base">
+                        Une analyse approfondie de votre situation avec des conseils stratégiques personnalisés.
+                    </p>
                 </div>
                 <button
-                    class="mt-4 flex h-12 w-full items-center justify-center rounded-full bg-[var(--subtle-gold)] px-8 font-bold tracking-wide text-[var(--midnight-blue)] transition-all duration-300 hover:bg-[var(--pure-white)]"
+                    class="group relative mt-2 flex h-12 w-full items-center justify-center overflow-hidden rounded-full bg-[var(--subtle-gold)] px-6 font-bold tracking-wide text-[var(--midnight-blue)] transition-all duration-300 hover:bg-[var(--pure-white)] hover:shadow-lg"
                     @click="handleSelection(3)"
                 >
-                    Découvrir
+                    <!-- Button shine effect -->
+                    <span
+                        class="absolute inset-0 -translate-x-full -skew-x-12 transform bg-gradient-to-r from-transparent via-white/40 to-transparent transition-transform duration-700 group-hover:translate-x-full"
+                    ></span>
+                    <span class="relative z-10">Découvrir</span>
+                    <svg
+                        xmlns="http://www.w3.org/2000/svg"
+                        class="relative z-10 ml-2 h-5 w-5 transition-transform duration-300 group-hover:translate-x-1"
+                        fill="none"
+                        viewBox="0 0 24 24"
+                        stroke="currentColor"
+                    >
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3" />
+                    </svg>
                 </button>
             </div>
 
+            <!-- Premium plus option -->
             <div
-                class="flex flex-col gap-6 rounded-2xl border border-[var(--linen)] bg-[var(--pure-white)] p-8 shadow-lg transition-all duration-300 hover:-translate-y-2 hover:shadow-2xl"
+                class="relative flex flex-col gap-6 rounded-2xl border border-[var(--linen)] bg-[var(--pure-white)] p-6 shadow-lg transition-all duration-500 hover:-translate-y-3 hover:shadow-xl md:p-8"
+                @mouseenter="setHover(3)"
+                @mouseleave="clearHover"
             >
+                <!-- Gold corner accents -->
+                <div class="absolute top-0 left-0 h-6 w-6 rounded-tl-lg border-t-2 border-l-2 border-[var(--subtle-gold)]"></div>
+                <div class="absolute top-0 right-0 h-6 w-6 rounded-tr-lg border-t-2 border-r-2 border-[var(--subtle-gold)]"></div>
+                <div class="absolute bottom-0 left-0 h-6 w-6 rounded-bl-lg border-b-2 border-l-2 border-[var(--subtle-gold)]"></div>
+                <div class="absolute right-0 bottom-0 h-6 w-6 rounded-br-lg border-r-2 border-b-2 border-[var(--subtle-gold)]"></div>
+
                 <div class="text-center">
-                    <h3 class="text-2xl font-bold text-[var(--midnight-blue)]">Quadrige Doré</h3>
-                    <p class="mt-2 text-5xl font-bold text-[var(--subtle-gold)]">99€</p>
+                    <div class="mb-4 flex justify-center">
+                        <div class="flex h-12 w-12 items-center justify-center rounded-full bg-[var(--light-ivory)]">
+                            <svg
+                                xmlns="http://www.w3.org/2000/svg"
+                                class="h-6 w-6 text-[var(--subtle-gold)]"
+                                fill="none"
+                                viewBox="0 0 24 24"
+                                stroke="currentColor"
+                            >
+                                <path
+                                    stroke-linecap="round"
+                                    stroke-linejoin="round"
+                                    stroke-width="2"
+                                    d="M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00.95.69h4.915c.969 0 1.371 1.24.588 1.81l-3.976 2.888a1 1 0 00-.363 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l-3.976-2.888a1 1 0 00-1.176 0l-3.976 2.888c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1 1 0 00-.363-1.118l-3.976-2.888c-.784-.57-.38-1.81.588-1.81h4.914a1 1 0 00.951-.69l1.519-4.674z"
+                                />
+                            </svg>
+                        </div>
+                    </div>
+                    <h3 class="text-xl font-bold text-[var(--midnight-blue)] md:text-2xl">Quadrige Doré</h3>
+                    <p class="mt-2 text-4xl font-bold text-[var(--subtle-gold)] md:text-5xl">99€</p>
+                    <p class="mt-4 text-sm text-gray-600 md:text-base">
+                        Une lecture complète sur tous les aspects de votre vie : amour, carrière, spiritualité et abondance.
+                    </p>
                 </div>
                 <button
-                    class="mt-4 flex h-12 w-full items-center justify-center rounded-full bg-[var(--linen)] px-8 font-bold tracking-wide text-[var(--midnight-blue)] transition-all duration-300 hover:bg-[var(--spiritual-earth)] hover:text-[var(--pure-white)]"
+                    class="group mt-2 flex h-12 w-full items-center justify-center rounded-full bg-gradient-to-r from-[var(--linen)] to-[#e8e0d5] px-6 font-bold tracking-wide text-[var(--midnight-blue)] transition-all duration-300 hover:from-[var(--spiritual-earth)] hover:to-[#8a7f6d] hover:text-[var(--pure-white)]"
                     @click="handleSelection(4)"
                 >
-                    Explorer
+                    <span>Explorer</span>
+                    <svg
+                        xmlns="http://www.w3.org/2000/svg"
+                        class="ml-2 h-5 w-5 transition-transform duration-300 group-hover:translate-x-1"
+                        fill="none"
+                        viewBox="0 0 24 24"
+                        stroke="currentColor"
+                    >
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3" />
+                    </svg>
                 </button>
             </div>
         </div>
     </section>
 </template>
+
+<style scoped>
+/* Custom animations for cards */
+.card-hover {
+    transition: all 0.3s ease;
+}
+
+.card-hover:hover {
+    transform: translateY(-5px);
+    box-shadow:
+        0 20px 25px -5px rgba(0, 0, 0, 0.1),
+        0 10px 10px -5px rgba(0, 0, 0, 0.04);
+}
+</style>
diff --git a/resources/js/pages/cards/resultat.vue b/resources/js/pages/cards/resultat.vue
index 3036ad0..0541f18 100644
--- a/resources/js/pages/cards/resultat.vue
+++ b/resources/js/pages/cards/resultat.vue
@@ -3,55 +3,83 @@ import CardResult from '@/components/ui/card/CardResult.vue';
 import LandingLayout from '@/layouts/app/LandingLayout.vue';
 import { router } from '@inertiajs/vue3';
 import axios from 'axios';
-import { onMounted, ref } from 'vue';
+import { computed, onMounted, ref } from 'vue';
 
-const goTobooking = () => {
+const goToBooking = () => {
     router.visit('/rendez-vous');
 };
 
-const cards = ref([]);
+const cards = ref<Array<any>>([]);
 const error = ref<string | null>(null);
+const loading = ref(true);
 
 const params = new URLSearchParams(window.location.search);
 const clientSessionId = params.get('client_session_id');
-const loading = ref(false);
+
+const hasCards = computed(() => cards.value.length > 0);
 
 onMounted(async () => {
-    if (clientSessionId) {
-        try {
-            const response = await axios.get(`/api/get-cards?client_session_id=${clientSessionId}`);
-            if (response.data.success) {
-                cards.value = response.data.cards;
-            } else {
-                error.value = response.data.message || 'An error occurred while validating payment.';
-            }
-        } catch (err) {
-            console.error(err);
-            error.value = 'Failed to get cards from the server. Please contact support.';
-        } finally {
-            loading.value = false;
+    if (!clientSessionId) {
+        error.value = 'No session ID provided. Please return to the payment page.';
+        loading.value = false;
+        return;
+    }
+
+    try {
+        const response = await axios.get(`/api/get-cards?client_session_id=${clientSessionId}`);
+
+        if (response.data.success) {
+            cards.value = response.data.cards;
+        } else {
+            error.value = response.data.message || 'An error occurred while validating payment.';
         }
+    } catch (err: any) {
+        console.error('Card fetch error:', err);
+        error.value = err.response?.data?.message || 'Failed to get cards from the server. Please contact support.';
+    } finally {
+        loading.value = false;
     }
 });
 </script>
 
 <template>
     <LandingLayout>
-        <main class="flex flex-1 justify-center px-4 py-16 sm:px-6 lg:px-8">
+        <main class="flex flex-1 justify-center px-4 py-8 sm:px-6 sm:py-12 md:py-16 lg:px-8">
             <div class="layout-content-container flex w-full max-w-4xl flex-col">
-                <div class="mb-12 text-center">
-                    <h1 class="text-midnight-blue text-5xl font-bold">Votre Lecture</h1>
-                    <p class="text-spiritual-earth mt-2 text-lg">
+                <!-- Header Section -->
+                <div class="mb-8 text-center md:mb-12">
+                    <h1 class="text-midnight-blue mb-2 text-3xl font-bold sm:text-4xl md:text-5xl">Votre Lecture</h1>
+                    <p class="text-spiritual-earth mx-auto max-w-2xl text-base sm:text-lg">
                         Voici une analyse détaillée de votre lecture choisie. Veuillez vérifier avant de procéder au paiement.
                     </p>
                 </div>
 
-                <div class="mb-12">
-                    <div class="space-y-12">
+                <!-- Loading State -->
+                <div v-if="loading" class="flex items-center justify-center py-16">
+                    <div class="h-12 w-12 animate-spin rounded-full border-t-2 border-b-2 border-[var(--subtle-gold)]"></div>
+                </div>
+
+                <!-- Error State -->
+                <div v-else-if="error" class="mb-8 rounded-lg bg-red-50 p-6 text-center">
+                    <div class="mb-2 font-medium text-red-700">Erreur</div>
+                    <p class="text-red-600">{{ error }}</p>
+                    <button @click="$router.back()" class="mt-4 rounded-md bg-red-600 px-4 py-2 text-white transition-colors hover:bg-red-700">
+                        Retour
+                    </button>
+                </div>
+
+                <!-- Empty State -->
+                <div v-else-if="!hasCards" class="rounded-lg bg-gray-50 p-8 text-center">
+                    <p class="text-gray-600">Aucune carte n'a été trouvée pour votre session.</p>
+                </div>
+
+                <!-- Cards Results -->
+                <div v-else class="mb-8 md:mb-12">
+                    <div class="space-y-6 md:space-y-8">
                         <card-result
-                            v-for="card in cards"
-                            :key="card.id"
-                            :card-number="1"
+                            v-for="(card, index) in cards"
+                            :key="card.id || index"
+                            :card-number="index + 1"
                             :name="card.name"
                             :image-url="card.image_url"
                             :orientation="card.orientation"
@@ -59,14 +87,19 @@ onMounted(async () => {
                         />
                     </div>
                 </div>
-                <div class="border-linen rounded-lg border bg-white p-8 text-center shadow-sm md:p-12">
-                    <div class="bg-subtle-gold mx-auto mb-6 h-px w-20"></div>
-                    <p class="text-midnight-blue/80 mx-auto mb-8 max-w-2xl text-lg leading-relaxed">
+
+                <!-- Consultation CTA -->
+                <div
+                    v-if="!loading && !error"
+                    class="border-linen rounded-lg border bg-white p-6 text-center shadow-sm transition-all duration-300 hover:shadow-md md:p-8 lg:p-12"
+                >
+                    <div class="bg-subtle-gold mx-auto mb-6 h-1 w-16 rounded-full"></div>
+                    <p class="text-midnight-blue/80 mx-auto mb-6 max-w-2xl text-base leading-relaxed md:mb-8 md:text-lg">
                         Pour une guidance plus approfondie, réservez une consultation personnalisée avec Kris Saint Ange.
                     </p>
                     <button
-                        @click="goTobooking"
-                        class="mt-8 inline-flex h-12 max-w-[480px] min-w-[120px] flex-shrink-0 cursor-pointer items-center justify-center rounded-full bg-[var(--subtle-gold)] px-8 text-base font-bold tracking-wide text-[var(--midnight-blue)] transition-all duration-300 hover:shadow-[var(--subtle-gold)]/30 hover:shadow-lg"
+                        @click="goToBooking"
+                        class="hover:bg-opacity-90 focus:ring-opacity-50 mt-4 inline-flex h-12 min-w-[160px] items-center justify-center rounded-full bg-[var(--subtle-gold)] px-6 text-base font-bold tracking-wide text-[var(--midnight-blue)] transition-all duration-300 hover:shadow-lg focus:ring-2 focus:ring-[var(--subtle-gold)] focus:outline-none md:mt-6 md:px-8"
                     >
                         Réserver une Consultation
                     </button>
@@ -75,3 +108,20 @@ onMounted(async () => {
         </main>
     </LandingLayout>
 </template>
+
+<style scoped>
+.layout-content-container {
+    animation: fadeIn 0.6s ease-out;
+}
+
+@keyframes fadeIn {
+    from {
+        opacity: 0;
+        transform: translateY(10px);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+</style>
diff --git a/resources/views/app.blade.php b/resources/views/app.blade.php
index f4e0cfa..58aed9b 100644
--- a/resources/views/app.blade.php
+++ b/resources/views/app.blade.php
@@ -32,8 +32,8 @@
 
         <title inertia>{{ config('app.name', 'Laravel') }}</title>
 
-        <link rel="icon" href="/favicon.ico" sizes="any">
-        <link rel="icon" href="/favicon.svg" type="image/svg+xml">
+        <link rel="icon" href="/icon.jpg" sizes="any">
+        <link rel="icon" href="/icin.jpg" >
         <link rel="apple-touch-icon" href="/apple-touch-icon.png">
 
         <link rel="preconnect" href="https://fonts.googleapis.com">
@@ -47,3 +47,5 @@
         @inertia
     </body>
 </html>
+
+