diff --git a/app/Http/Controllers/StripeController.php b/app/Http/Controllers/StripeController.php
index ca3bd50..d574939 100644
--- a/app/Http/Controllers/StripeController.php
+++ b/app/Http/Controllers/StripeController.php
@@ -29,8 +29,8 @@ class StripeController extends Controller
         $clientSessionId = Str::uuid();
 
         $priceIds = [
-            3 => 'price_1S51zxGaZ3yeYkzWYb0wSt4j',
-            4 => 'price_1S5464GaZ3yeYkzWh8RuJfab',
+            6 => 'price_1S51zxGaZ3yeYkzWYb0wSt4j',
+            18 => 'price_1S5464GaZ3yeYkzWh8RuJfab',
         ];
 
         if (!isset($priceIds[$count])) {
diff --git a/public/logo_or.png b/public/logo_or.png
new file mode 100644
index 0000000..65b18f3
Binary files /dev/null and b/public/logo_or.png differ
diff --git a/resources/css/app.css b/resources/css/app.css
index 28fca48..2d3ee26 100644
--- a/resources/css/app.css
+++ b/resources/css/app.css
@@ -11,6 +11,7 @@
     --font-heading: 'Cormorant Garamond', serif;
     --font-body: 'Montserrat', sans-serif;
     --font-accent: 'Citadel Script', cursive;
+    --font-audrey: 'Audrey', sans-serif;
 
     --font-sans: var(--font-body);
 
@@ -77,7 +78,6 @@
     html {
         font-family: var(--font-body);
     }
-
     h1,
     h2,
     h3,
@@ -178,6 +178,12 @@
     .text-shadow-custom {
         text-shadow: 0 2px 20px rgba(0, 0, 0, 0.4);
     }
+    .font-audrey {
+        font-family: 'Audrey', Sans-serif;
+        font-size: 30px;
+        font-weight: 550;
+        color: var(--e-global-color-2407621);
+    }
 }
 
 @font-face {
@@ -214,3 +220,11 @@
     font-style: normal;
     font-display: swap;
 }
+
+@font-face {
+    font-family: 'Audrey';
+    src: url('@/fonts/Audrey/Audrey-Medium.otf') format('truetype');
+    font-weight: 400;
+    font-style: normal;
+    font-display: swap;
+}
diff --git a/resources/js/components/landing/HeroSection.vue b/resources/js/components/landing/HeroSection.vue
index 447b3aa..1da3644 100644
--- a/resources/js/components/landing/HeroSection.vue
+++ b/resources/js/components/landing/HeroSection.vue
@@ -79,8 +79,8 @@ const goToShuffle = () => {
                 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.
+                Et si vos quatre royaumes intérieurs : Santé, Amour, Fortune, Ambition, chevauchaient vers un même horizon ? 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 -->
diff --git a/resources/js/components/landing/ManuscritSection.vue b/resources/js/components/landing/ManuscritSection.vue
index 55c0881..f59d663 100644
--- a/resources/js/components/landing/ManuscritSection.vue
+++ b/resources/js/components/landing/ManuscritSection.vue
@@ -1,11 +1,30 @@
 <template>
     <section class="py-20 text-center sm:py-24">
         <h2 class="text-4xl font-bold text-[var(--midnight-blue)] md:text-5xl">
-            Plus Qu’un Guide, <span class="citadel-script text-5xl text-[var(--spiritual-earth)] md:text-6xl">Un Manuscrit Stratégique</span>
+            Plus qu'un guide,
+            <span class="citadel-script relative text-3xl font-normal text-[var(--subtle-gold)] md:text-7xl">Un manuscrit stratégique</span>
         </h2>
         <p class="mx-auto mt-6 max-w-3xl text-lg text-[var(--midnight-blue)]/80">
-            L'Oracle de Kris Saint Ange est une boussole pour votre voyage personnel et professionnel. Chaque carte est une clé pour débloquer votre
-            potentiel et prendre des décisions éclairées.
+            Conçu pour les Leaders visionnaires, cet oracle n'est pas un simple guide : c'est un Manuscrit où se croisent stratégie antique et
+            alchimie moderne.
+        </p>
+
+        <div class="mx-auto mt-8 max-w-4xl">
+            <h2 class="mb-4 text-2xl font-bold text-[var(--midnight-blue)]">Chacune des 80 lames vous révèle :</h2>
+            <div class="space-y-4 text-[var(--midnight-blue)]/80">
+                <p>
+                    <strong>Un message axial</strong> - lorsqu'elle apparait à l'endroit - colonne vertébrale de la stratégie à adopter, tandis que la
+                    carte tirée inversée offre un conseil ciselé, comme le diamantaire retouche une gemme.
+                </p>
+                <p><strong>Des archétypes intemporels</strong>, d'Isis à Napoléon, pour incarner votre légende.</p>
+                <p><strong>Des symboles cryptés</strong> : planètes, pierres, lieux sacrés, éclairant vos choix comme un phare.</p>
+                <p><strong>Un outil d'élite</strong>, où la prédiction se mue en plan d'action.</p>
+                <p>Du néophyte au stratège aguerri, chacun y trouve son code secret.</p>
+            </div>
+        </div>
+
+        <p class="mx-auto mt-6 max-w-3xl text-lg text-[var(--midnight-blue)]/80">
+            La souveraineté ne se négocie pas. Elle se conquiert. Et votre empire intérieur attend son couronnement.
         </p>
     </section>
 </template>
diff --git a/resources/js/components/landing/OfferSection.vue b/resources/js/components/landing/OfferSection.vue
index c707397..71fb96a 100644
--- a/resources/js/components/landing/OfferSection.vue
+++ b/resources/js/components/landing/OfferSection.vue
@@ -7,7 +7,7 @@
                 class="flex flex-col gap-6 rounded-2xl border-2 border-[var(--subtle-gold)] bg-[var(--pure-white)] p-8 shadow-lg transition-all duration-300 hover:-translate-y-2 hover:border-[var(--linen)] hover:shadow-2xl"
             >
                 <div class="text-center">
-                    <h3 class="text-2xl font-bold text-[var(--midnight-blue)]">Lecture Gratuite</h3>
+                    <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>
                 <ul class="flex-grow space-y-3 text-[var(--midnight-blue)]/80">
@@ -49,8 +49,8 @@
                 class="flex scale-105 flex-col gap-6 rounded-2xl border-2 border-[var(--subtle-gold)] bg-[var(--midnight-blue)] p-8 shadow-lg transition-all duration-300 hover:-translate-y-2 hover:border-[var(--linen)] hover:shadow-2xl"
             >
                 <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>
+                    <h3 class="text-2xl font-bold text-[var(--pure-white)]">PROFILAGE</h3>
+                    <p class="mt-2 text-5xl font-bold text-[var(--subtle-gold)]">9.99€</p>
                 </div>
                 <ul class="flex-grow space-y-3 text-[var(--linen)]">
                     <li class="flex items-center gap-3">
@@ -59,7 +59,7 @@
                                 d="M229.66,77.66l-128,128a8,8,0,0,1-11.32,0l-56-56a8,8,0,0,1,11.32-11.32L96,188.69,218.34,66.34a8,8,0,0,1,11.32,11.32Z"
                             ></path>
                         </svg>
-                        Lecture de trois cartes
+                        Lecture de 6 cartes
                     </li>
                     <li class="flex items-center gap-3">
                         <svg class="h-5 w-5 text-[var(--subtle-gold)]" fill="currentColor" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg">
@@ -91,8 +91,8 @@
                 class="flex flex-col gap-6 rounded-2xl border-2 border-[var(--subtle-gold)] bg-[var(--pure-white)] p-8 shadow-lg transition-all duration-300 hover:-translate-y-2 hover:border-[var(--linen)] hover:shadow-2xl"
             >
                 <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>
+                    <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)]">15.90€</p>
                 </div>
                 <ul class="flex-grow space-y-3 text-[var(--midnight-blue)]/80">
                     <li class="flex items-center gap-3">
@@ -101,7 +101,7 @@
                                 d="M229.66,77.66l-128,128a8,8,0,0,1-11.32,0l-56-56a8,8,0,0,1,11.32-11.32L96,188.69,218.34,66.34a8,8,0,0,1,11.32,11.32Z"
                             ></path>
                         </svg>
-                        Lecture de quatre cartes
+                        Lecture de 18 cartes
                     </li>
                     <li class="flex items-center gap-3">
                         <svg class="h-5 w-5 text-[var(--subtle-gold)]" fill="currentColor" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg">
diff --git a/resources/js/components/organism/ShuffleCard/ShuffleCardPresentation.vue b/resources/js/components/organism/ShuffleCard/ShuffleCardPresentation.vue
index ed7313f..aff5c78 100644
--- a/resources/js/components/organism/ShuffleCard/ShuffleCardPresentation.vue
+++ b/resources/js/components/organism/ShuffleCard/ShuffleCardPresentation.vue
@@ -2,7 +2,7 @@
 import CardShuffleTemplate from '@/components/template/CardShuffleTemplate.vue';
 import { Card } from '@/types/cart';
 import { router } from '@inertiajs/vue3';
-import { computed, ref, watchEffect } from 'vue';
+import { computed, onMounted, ref, watchEffect } from 'vue';
 
 const props = defineProps<{
     drawCount?: number; // Optional: number of cards expected to be drawn
@@ -20,9 +20,53 @@ const drawingIndex = ref<number | null>(null);
 const revealedCards = ref<Card[]>([]);
 const isFlipped = ref<boolean[]>([]);
 const isRestacking = ref(false);
+const isAutoDrawing = ref(false);
+const autoDrawProgress = ref(0);
 
 const remainingDeckSize = computed(() => Math.max(0, deckSize - revealedCards.value.length));
 const isFinished = computed(() => !!props.drawnCards && revealedCards.value.length >= props.drawnCards.length);
+const shouldAutoDraw = computed(() => props.drawnCards?.length > 15);
+
+console.log(props.drawnCards?.length);
+
+// Auto-draw cards with beautiful animation
+const startAutoDraw = async () => {
+    if (!props.drawnCards || isAutoDrawing.value) return;
+
+    isAutoDrawing.value = true;
+    isSpread.value = false;
+
+    const totalCards = props.drawnCards.length;
+    const delayBetweenCards = 200; // ms between each card
+
+    for (let i = 0; i < totalCards; i++) {
+        if (!isAutoDrawing.value) break; // Allow cancellation
+
+        autoDrawProgress.value = (i / totalCards) * 100;
+
+        // Add card with animation
+        const nextCard = props.drawnCards[i];
+        revealedCards.value.push(nextCard);
+        isFlipped.value.push(false);
+
+        // Wait before next card
+        if (i < totalCards - 1) {
+            await new Promise((resolve) => setTimeout(resolve, delayBetweenCards));
+        }
+    }
+
+    autoDrawProgress.value = 100;
+    isAutoDrawing.value = false;
+
+    // Auto-flip all cards after drawing
+    setTimeout(() => {
+        for (let i = 0; i < revealedCards.value.length; i++) {
+            setTimeout(() => {
+                isFlipped.value[i] = true;
+            }, i * 150);
+        }
+    }, 500);
+};
 
 const startDraw = (index: number) => {
     if (!props.drawnCards || revealedCards.value.length >= props.drawnCards.length) return;
@@ -50,9 +94,15 @@ const startDraw = (index: number) => {
 };
 
 const handleDeckClick = () => {
-    if (isDrawing.value) return;
+    if (isDrawing.value || isAutoDrawing.value) return;
     if (isFinished.value) return;
 
+    // If auto-draw is available and not started, start it
+    if (shouldAutoDraw.value && !isAutoDrawing.value && revealedCards.value.length === 0) {
+        startAutoDraw();
+        return;
+    }
+
     // First click spreads the deck
     if (!isSpread.value) {
         isSpread.value = true;
@@ -75,7 +125,7 @@ const handleDeckClick = () => {
 
 const onCardClick = (i: number, e?: MouseEvent) => {
     // Only handle and stop propagation when spread; otherwise let the deck click handler spread the deck
-    if (!isSpread.value || isDrawing.value) return;
+    if (!isSpread.value || isDrawing.value || isAutoDrawing.value) return;
     if (e) e.stopPropagation();
     if (!props.drawnCards || revealedCards.value.length >= props.drawnCards.length) return;
     startDraw(i);
@@ -116,12 +166,26 @@ watchEffect(() => {
         drawingIndex.value = null;
         revealedCards.value = [];
         isFlipped.value = [];
+        isAutoDrawing.value = false;
+        autoDrawProgress.value = 0;
     } else {
         isSpread.value = false;
         isDrawing.value = false;
         drawingIndex.value = null;
         revealedCards.value = [];
         isFlipped.value = [];
+        isAutoDrawing.value = false;
+        autoDrawProgress.value = 0;
+    }
+});
+
+// Auto-start drawing if conditions are met
+onMounted(() => {
+    if (shouldAutoDraw.value && props.drawnCards && props.drawnCards.length > 0) {
+        // Small delay to allow initial render
+        setTimeout(() => {
+            startAutoDraw();
+        }, 800);
     }
 });
 
@@ -145,6 +209,15 @@ const setDrawnCards = (cardData: Card[]) => {
         drawingIndex.value = null;
         revealedCards.value = [];
         isFlipped.value = new Array(cardData.length).fill(false);
+        isAutoDrawing.value = false;
+        autoDrawProgress.value = 0;
+
+        // Auto-start if conditions are met
+        if (shouldAutoDraw.value) {
+            setTimeout(() => {
+                startAutoDraw();
+            }, 800);
+        }
     }
 };
 
@@ -154,15 +227,40 @@ defineExpose({ setDrawnCards });
 <template>
     <CardShuffleTemplate>
         <template #card-shuffle-slot>
-            <div class="card-container">
+            <div class="card-container w-full">
+                <!-- Auto-draw progress indicator -->
+                <div v-if="shouldAutoDraw && isAutoDrawing" class="auto-draw-progress">
+                    <div class="progress-bar">
+                        <div class="progress-fill" :style="{ width: `${autoDrawProgress}%` }"></div>
+                    </div>
+                    <div class="progress-text">Distribution automatique en cours... {{ Math.round(autoDrawProgress) }}%</div>
+                </div>
+
                 <!-- Always show the card stack -->
                 <transition class="card-stack-fade">
                     <div
-                        class="card-stack relative mt-4 mb-4 flex h-[500px] w-[300px] items-center justify-center"
-                        :class="{ spread: isSpread, drawing: isDrawing, restacking: isRestacking, finished: isFinished }"
+                        class="card-stack relative mt-6 mb-8 flex h-[520px] w-[320px] items-center justify-center rounded-2xl border border-[var(--linen)] bg-gradient-to-b from-white to-[var(--light-ivory)] p-4 shadow-xl"
+                        :class="{
+                            spread: isSpread,
+                            drawing: isDrawing,
+                            restacking: isRestacking,
+                            finished: isFinished,
+                            'auto-drawing': isAutoDrawing,
+                        }"
                         @click="handleDeckClick"
                     >
-                        <div v-for="i in remainingDeckSize" :key="i" class="card" :style="getCardStyle(i)" @click="onCardClick(i, $event)">
+                        <div class="pointer-events-none absolute -top-16 -left-16 h-40 w-40 rounded-full bg-[var(--subtle-gold)]/20 blur-3xl"></div>
+                        <div
+                            class="pointer-events-none absolute -right-16 -bottom-16 h-40 w-40 rounded-full bg-[var(--midnight-blue)]/15 blur-3xl"
+                        ></div>
+
+                        <!-- Auto-draw prompt -->
+                        <div v-if="shouldAutoDraw && !isAutoDrawing && revealedCards.length === 0" class="auto-draw-prompt">
+                            <div class="prompt-icon">✨</div>
+                            <div class="prompt-text">Cliquez pour une distribution automatique</div>
+                        </div>
+
+                        <div v-for="i in remainingDeckSize" :key="i" class="card group/card" :style="getCardStyle(i)" @click="onCardClick(i, $event)">
                             <div class="card-back">
                                 <div class="card-inner-content">
                                     <img src="cards/1.png" alt="Card Back" class="card-back-image" />
@@ -171,11 +269,12 @@ defineExpose({ setDrawnCards });
                         </div>
                     </div>
                 </transition>
+
                 <!-- Show result only after clicking and when drawnCards is available -->
                 <transition class="card-result-slide">
-                    <div v-if="revealedCards.length > 0" class="cards-result-container">
-                        <div v-for="(card, index) in revealedCards" :key="index" class="card-result-wrapper">
-                            <div class="result-card" :class="{ flipped: isFlipped[index] }" @click="flipCard(index)">
+                    <div v-if="revealedCards.length > 0" class="cards-result-container w-full" :class="{ 'many-cards': shouldAutoDraw }">
+                        <div v-for="(card, index) in revealedCards" :key="index" class="card-result-wrapper" :class="`card-${index}`">
+                            <div class="result-card" :class="{ flipped: isFlipped[index], 'auto-flipped': isAutoDrawing }" @click="flipCard(index)">
                                 <div class="card-face card-unknown-front">
                                     <div class="card-inner-content">
                                         <img src="cards/1.png" alt="Card Back" class="card-back-image" />
@@ -191,6 +290,7 @@ defineExpose({ setDrawnCards });
                         </div>
                     </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"
@@ -213,6 +313,65 @@ defineExpose({ setDrawnCards });
     display: flex;
     flex-direction: column;
     align-items: center;
+    min-height: 100vh;
+    padding: 2rem 1rem;
+}
+
+/* Auto-draw progress indicator */
+.auto-draw-progress {
+    width: 100%;
+    max-width: 500px;
+    margin-bottom: 2rem;
+    text-align: center;
+}
+
+.progress-bar {
+    width: 100%;
+    height: 8px;
+    background: rgba(31, 42, 68, 0.2);
+    border-radius: 4px;
+    overflow: hidden;
+    margin-bottom: 0.5rem;
+}
+
+.progress-fill {
+    height: 100%;
+    background: linear-gradient(90deg, var(--midnight-blue), var(--subtle-gold));
+    border-radius: 4px;
+    transition: width 0.3s ease;
+}
+
+.progress-text {
+    font-size: 0.9rem;
+    color: var(--midnight-blue);
+    opacity: 0.8;
+}
+
+/* Auto-draw prompt */
+.auto-draw-prompt {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    text-align: center;
+    z-index: 5;
+    background: rgba(255, 255, 255, 0.9);
+    padding: 1rem 1.5rem;
+    border-radius: 12px;
+    backdrop-filter: blur(10px);
+    border: 1px solid rgba(215, 186, 141, 0.3);
+    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
+}
+
+.prompt-icon {
+    font-size: 2rem;
+    margin-bottom: 0.5rem;
+}
+
+.prompt-text {
+    color: var(--midnight-blue);
+    font-size: 0.9rem;
+    font-weight: 500;
 }
 
 .card {
@@ -238,43 +397,43 @@ defineExpose({ setDrawnCards });
     display: flex;
     align-items: center;
     justify-content: center;
-    perspective: 1000px; /* ajoute profondeur */
+    perspective: 1000px;
 }
 
 /* Hover sur la pile */
-.card-stack:not(.spread):hover {
+.card-stack:not(.spread):not(.auto-drawing):hover {
     transform: translateY(-10px) rotateX(2deg) rotateY(-2deg);
 }
 
-.card-stack:not(.spread):hover .card:nth-child(1) {
+.card-stack:not(.spread):not(.auto-drawing):hover .card:nth-child(1) {
     transform: rotateY(-5deg) rotateX(5deg) translateZ(30px) translateX(-20px);
 }
-.card-stack:not(.spread):hover .card:nth-child(2) {
+.card-stack:not(.spread):not(.auto-drawing):hover .card:nth-child(2) {
     transform: rotateY(0deg) rotateX(2deg) translateZ(20px);
 }
-.card-stack:not(.spread):hover .card:nth-child(3) {
+.card-stack:not(.spread):not(.auto-drawing):hover .card:nth-child(3) {
     transform: rotateY(5deg) rotateX(5deg) translateZ(10px) translateX(20px);
 }
 
 /* Glow doré subtil au hover */
-.card-stack:hover .card-back {
+.card-stack:not(.auto-drawing):hover .card-back {
     box-shadow: 0 0 20px rgba(215, 186, 141, 0.6);
     transition: box-shadow 0.6s ease-in-out;
 }
 
-/* Animation click */
-@keyframes card-click-tilt {
-    0% {
-        transform: translateY(-10px) rotateX(2deg) rotateY(-2deg);
-    }
-    30% {
-        transform: translateY(-5px) rotateX(-4deg) rotateY(4deg);
-    }
-    60% {
-        transform: translateY(-12px) rotateX(3deg) rotateY(-3deg);
-    }
+/* Auto-drawing state */
+.card-stack.auto-drawing {
+    cursor: default;
+    animation: gentle-pulse 2s infinite;
+}
+
+@keyframes gentle-pulse {
+    0%,
     100% {
-        transform: translateY(-10px) rotateX(2deg) rotateY(-2deg);
+        transform: scale(1);
+    }
+    50% {
+        transform: scale(1.02);
     }
 }
 
@@ -297,11 +456,6 @@ defineExpose({ setDrawnCards });
     }
 }
 
-/* Active sur clic */
-.card-stack.clicked {
-    animation: card-click-tilt 0.4s ease-in-out;
-}
-
 .card-stack.drawing {
     animation: card-drawing 1s ease-in-out;
 }
@@ -336,76 +490,55 @@ defineExpose({ setDrawnCards });
     height: 100%;
     backface-visibility: hidden;
     border-radius: 16px;
-    display: flex; /* Keep flexbox for centering if needed */
-    align-items: center; /* For centering .card-inner-content if it's smaller */
-    justify-content: center; /* For centering .card-inner-content if it's smaller */
+    display: flex;
+    align-items: center;
+    justify-content: center;
     background-color: var(--subtle-gold);
 }
 
 .card-inner-content {
-    width: calc(100% - 10px); /* Adjust 10px to control border thickness (e.g., 5px border on each side) */
-    height: calc(100% - 10px); /* Adjust this value as well */
-    background-color: white; /* Or whatever color you want inside the gold border */
-    border-radius: 14px; /* Slightly smaller to match outer radius with padding */
-    display: flex; /* Use flex to center the image if it's an <img> tag */
+    width: calc(100% - 10px);
+    height: calc(100% - 10px);
+    background-color: white;
+    border-radius: 14px;
+    display: flex;
     align-items: center;
     justify-content: center;
-    overflow: hidden; /* Ensure image doesn't bleed out */
+    overflow: hidden;
 }
 
 .card-back-image {
     width: 100%;
     height: 100%;
-    object-fit: cover; /* Or 'cover' depending on how you want the image to fill the inner content */
-    border-radius: 14px; /* Match inner content border-radius */
+    object-fit: cover;
+    border-radius: 14px;
 }
 
 .card-result-wrapper {
-    width: 250px;
-    height: 400px;
+    width: clamp(140px, 12vw, 160px);
+    aspect-ratio: 5 / 8;
     perspective: 1000px;
+    border-radius: 16px;
+    transition: transform 0.5s ease;
 }
 
-.card-back-design-wrapper {
-    background: radial-gradient(circle, var(--midnight-blue) 0%, #121a2c 100%);
-    display: flex;
-    align-items: center;
-    justify-content: center;
-}
-
-.card-back-design {
-    width: 80%;
-    height: 80%;
-    border: 2px solid var(--subtle-gold);
-    border-radius: 8px;
-    position: relative;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-}
-.card-back-design::before,
-.card-back-design::after {
-    content: '';
-    position: absolute;
-    width: 50%;
-    height: 50%;
-    border-color: var(--subtle-gold);
-    opacity: 0.5;
+.card-result-wrapper:hover {
+    transform: translateY(-10px);
 }
 
 .card-face {
     position: absolute;
     width: 100%;
     height: 100%;
-    backface-visibility: hidden; /* This is crucial for the flip effect */
+    backface-visibility: hidden;
     border-radius: 16px;
     box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
-    overflow: hidden; /* To keep content within borders */
+    overflow: hidden;
 }
 
 .card-unknown-front {
     background-color: var(--subtle-gold);
-    display: flex; /* Keep flexbox for centering its *own* content */
+    display: flex;
     align-items: center;
     justify-content: center;
 }
@@ -415,45 +548,35 @@ defineExpose({ setDrawnCards });
     display: flex;
     justify-content: center;
     align-items: center;
-
-    transform: rotateY(180deg); /* This face starts rotated, so it's hidden */
+    transform: rotateY(180deg);
     position: relative;
-    border-radius: 16px; /* Ensure this matches the outer card radius */
+    border-radius: 16px;
     overflow: hidden;
 }
 
-.card-back-design::before {
-    top: -2px;
-    left: -2px;
-    border-top-width: 1px;
-    border-left-width: 1px;
-    border-top-style: solid;
-    border-left-style: solid;
-    border-top-left-radius: 8px;
-}
-.card-back-design::after {
-    bottom: -2px;
-    right: -2px;
-    border-bottom-width: 1px;
-    border-right-width: 1px;
-    border-bottom-style: solid;
-    border-right-style: solid;
-    border-bottom-right-radius: 8px;
-}
-
 /* Result card styles */
 .cards-result-container {
     display: flex;
     flex-wrap: wrap;
     justify-content: center;
-    gap: 20px;
+    gap: 15px;
     margin-top: 2rem;
     position: relative;
     z-index: 10;
+    max-width: 100%;
+    padding: 0 1rem;
 }
 
-.card-result-container {
-    perspective: 1000px;
+/* Enhanced layout for many cards */
+.cards-result-container.many-cards {
+    gap: 15px;
+    justify-content: center;
+}
+
+.cards-result-container.many-cards .card-result-wrapper {
+    width: clamp(140px, 12vw, 160px);
+    aspect-ratio: 5 / 8;
+    margin-bottom: 10px;
 }
 
 .result-card {
@@ -469,53 +592,8 @@ defineExpose({ setDrawnCards });
     transform: rotateY(180deg);
 }
 
-.card-front,
-.card-back-info {
-    position: absolute;
-    width: 100%;
-    height: 100%;
-    backface-visibility: hidden;
-    border-radius: 16px;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    padding: 1rem;
-    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
-    text-align: center;
-    overflow-y: auto;
-}
-
-.card-back-info p {
-    color: var(--midnight-blue); /* Adjust color if needed */
-}
-
-.card-front {
-    background: linear-gradient(145deg, var(--pure-white), var(--linen));
-    color: var(--midnight-blue);
-}
-
-.card-back-info {
-    /* Replace the existing background property */
-    background-image: url('back-card.svg'); /* background-size: cover; /* This makes the image cover the entire element */
-    background-position: center; /* This centers the image in the element */
-    background-repeat: no-repeat; /* This prevents the image from repeating */
-
-    color: var(--pure-white);
-    transform: rotateY(180deg);
-    text-align: center;
-    overflow-y: auto;
-}
-
-.card-content-wrapper {
-    background: linear-gradient(145deg, var(--pure-white), var(--linen));
-    color: var(--midnight-blue);
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    padding: 1rem;
-    transform: rotateY(180deg); /* This is the key part to make it the 'back' of the card */
+.result-card.auto-flipped {
+    transition: transform 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
 }
 
 .card-image {
@@ -530,67 +608,26 @@ defineExpose({ setDrawnCards });
 
 .card-description-overlay {
     position: absolute;
-    top: 0;
+    bottom: 0;
     left: 0;
-    width: 100%;
-    height: 100%;
-
-    /* Adjust background for a brighter, more subtle overlay */
-    background: rgba(255, 255, 255, 0.2); /* Lighter, more transparent white overlay */
-    /* You could also use a subtle gradient if you prefer: */
-    /* background: linear-gradient(to top, rgba(0,0,0,0.5) 0%, rgba(255,255,255,0) 50%); */
-
-    color: white; /* Keep text white for contrast */
-    padding: 1rem;
-
-    /* Center the content (just the name) in the middle of the card */
-    display: flex;
-    flex-direction: column;
-    justify-content: center; /* Center vertically */
-    align-items: center; /* Center horizontally */
+    right: 0;
+    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.75) 100%);
+    padding: 12px;
+    color: white;
     text-align: center;
-    box-sizing: border-box;
-    pointer-events: none; /* Make overlay non-interactive so clicks go through to flip */
+    border-bottom-left-radius: 16px;
+    border-bottom-right-radius: 16px;
+    box-shadow: 0 -6px 30px rgba(0, 0, 0, 0.35);
+    pointer-events: none;
 }
 
 .card-description-overlay h3 {
-    margin: 0; /* Remove default margin */
-    font-size: 1.8rem; /* Make the name larger */
+    margin: 0;
+    font-size: 1.8rem;
     font-weight: bold;
-    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7); /* Add subtle shadow for readability */
-    color: var(--pure-white); /* Ensure it's clearly white */
-    letter-spacing: 1px; /* Add some letter spacing */
-}
-/* Hide these elements completely */
-.card-description-overlay p.description,
-.card-description-overlay p.orientation,
-.card-description-overlay div.symbolism {
-    display: none;
-}
-.orientation {
-    font-style: italic;
-    margin-top: 0.5rem;
-    color: var(--spiritual-earth);
-}
-
-.description {
-    margin: 1rem 0;
-    font-size: 0.9rem;
-}
-
-.symbolism {
-    margin-top: 1rem;
-    font-size: 0.8rem;
-}
-
-.symbolism p {
-    margin: 0.3rem 0;
-}
-
-.click-hint {
-    margin-top: 1rem;
-    font-size: 0.7rem;
-    opacity: 0.7;
+    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
+    color: var(--pure-white);
+    letter-spacing: 1px;
 }
 
 .card-stack-fade-leave-active {
@@ -609,4 +646,139 @@ defineExpose({ setDrawnCards });
     opacity: 0;
     transform: translateY(50px);
 }
+
+/* Responsive design */
+@media (max-width: 1200px) {
+    .cards-result-container .card-result-wrapper {
+        width: clamp(140px, 12vw, 160px);
+    }
+}
+
+@media (max-width: 992px) {
+    .cards-result-container .card-result-wrapper {
+        width: clamp(140px, 20vw, 160px);
+    }
+
+    .card {
+        width: 220px;
+        height: 352px;
+    }
+
+    .card-stack {
+        width: 280px;
+        height: 460px;
+    }
+}
+
+@media (max-width: 768px) {
+    .cards-result-container {
+        gap: 15px;
+    }
+
+    .cards-result-container .card-result-wrapper {
+        width: clamp(140px, 26vw, 160px);
+    }
+
+    .card {
+        width: 200px;
+        height: 320px;
+    }
+
+    .card-stack {
+        width: 260px;
+        height: 420px;
+    }
+
+    .card-description-overlay h3 {
+        font-size: 1.4rem;
+    }
+}
+
+@media (max-width: 576px) {
+    .cards-result-container {
+        gap: 10px;
+    }
+
+    .cards-result-container .card-result-wrapper {
+        width: clamp(140px, 36vw, 160px);
+    }
+
+    .card {
+        width: 180px;
+        height: 288px;
+    }
+
+    .card-stack {
+        width: 240px;
+        height: 380px;
+    }
+
+    .card-description-overlay h3 {
+        font-size: 1.2rem;
+        padding: 8px;
+    }
+
+    .auto-draw-prompt {
+        padding: 0.8rem 1rem;
+    }
+
+    .prompt-icon {
+        font-size: 1.5rem;
+    }
+
+    .prompt-text {
+        font-size: 0.8rem;
+    }
+}
+
+/* Animation for auto-drawing cards */
+@keyframes card-appear {
+    0% {
+        opacity: 0;
+        transform: scale(0.8) translateY(20px);
+    }
+    100% {
+        opacity: 1;
+        transform: scale(1) translateY(0);
+    }
+}
+
+.cards-result-container .card-result-wrapper {
+    animation: card-appear 0.5s ease forwards;
+}
+
+/* Stagger animation for multiple cards */
+.cards-result-container .card-result-wrapper:nth-child(1) {
+    animation-delay: 0.1s;
+}
+.cards-result-container .card-result-wrapper:nth-child(2) {
+    animation-delay: 0.2s;
+}
+.cards-result-container .card-result-wrapper:nth-child(3) {
+    animation-delay: 0.3s;
+}
+.cards-result-container .card-result-wrapper:nth-child(4) {
+    animation-delay: 0.4s;
+}
+.cards-result-container .card-result-wrapper:nth-child(5) {
+    animation-delay: 0.5s;
+}
+.cards-result-container .card-result-wrapper:nth-child(6) {
+    animation-delay: 0.6s;
+}
+.cards-result-container .card-result-wrapper:nth-child(7) {
+    animation-delay: 0.7s;
+}
+.cards-result-container .card-result-wrapper:nth-child(8) {
+    animation-delay: 0.8s;
+}
+.cards-result-container .card-result-wrapper:nth-child(9) {
+    animation-delay: 0.9s;
+}
+.cards-result-container .card-result-wrapper:nth-child(10) {
+    animation-delay: 1s;
+}
+.cards-result-container .card-result-wrapper:nth-child(n + 11) {
+    animation-delay: 1.1s;
+}
 </style>
diff --git a/resources/js/fonts/Audrey/Audrey-Bold.otf b/resources/js/fonts/Audrey/Audrey-Bold.otf
new file mode 100644
index 0000000..899821b
Binary files /dev/null and b/resources/js/fonts/Audrey/Audrey-Bold.otf differ
diff --git a/resources/js/fonts/Audrey/Audrey-BoldOblique.otf b/resources/js/fonts/Audrey/Audrey-BoldOblique.otf
new file mode 100644
index 0000000..bdd09a0
Binary files /dev/null and b/resources/js/fonts/Audrey/Audrey-BoldOblique.otf differ
diff --git a/resources/js/fonts/Audrey/Audrey-Medium.otf b/resources/js/fonts/Audrey/Audrey-Medium.otf
new file mode 100644
index 0000000..59ce581
Binary files /dev/null and b/resources/js/fonts/Audrey/Audrey-Medium.otf differ
diff --git a/resources/js/fonts/Audrey/Audrey-MediumOblique.otf b/resources/js/fonts/Audrey/Audrey-MediumOblique.otf
new file mode 100644
index 0000000..148b002
Binary files /dev/null and b/resources/js/fonts/Audrey/Audrey-MediumOblique.otf differ
diff --git a/resources/js/fonts/Audrey/Audrey-Normal.otf b/resources/js/fonts/Audrey/Audrey-Normal.otf
new file mode 100644
index 0000000..ac6045d
Binary files /dev/null and b/resources/js/fonts/Audrey/Audrey-Normal.otf differ
diff --git a/resources/js/fonts/Audrey/Audrey-NormalOblique.otf b/resources/js/fonts/Audrey/Audrey-NormalOblique.otf
new file mode 100644
index 0000000..0b85dab
Binary files /dev/null and b/resources/js/fonts/Audrey/Audrey-NormalOblique.otf differ
diff --git a/resources/js/fonts/Audrey/_License.txt b/resources/js/fonts/Audrey/_License.txt
new file mode 100644
index 0000000..27cab25
--- /dev/null
+++ b/resources/js/fonts/Audrey/_License.txt
@@ -0,0 +1,8 @@
+FOR PERSONAL AND COMMERCIAL USE (DESKTOP ONLY).
+You will need a licence for online applications.
+
+For any info please contact me at info@cristinapagnotta.it
+
+Thank You!
+
+Audrey Font - Copyright Cristina Pagnotta. 2016 All rights Reserved
diff --git a/resources/js/layouts/app/LandingLayout.vue b/resources/js/layouts/app/LandingLayout.vue
index d349648..c19c3a7 100644
--- a/resources/js/layouts/app/LandingLayout.vue
+++ b/resources/js/layouts/app/LandingLayout.vue
@@ -46,11 +46,9 @@ onMounted(() => {
             >
                 <!-- Logo with natural styling (no rounding, no shadow) -->
                 <div class="flex items-center gap-3">
-                    <div class="logo-container">
-                        <img src="icon_ksa.jpg" alt="Logo" class="relative h-16 w-16 object-cover md:h-20 md:w-20" />
-                    </div>
+                    <img src="logo_or.png" alt="Logo" class="relative h-16 w-16 object-cover md:h-20 md:w-20" />
                     <div class="hidden md:block">
-                        <h1 class="font-serif text-xl font-bold text-[var(--midnight-blue)]">Kris Saint Ange</h1>
+                        <h1 class="font-audrey text-[var(--midnight-blue)]">KRIS SAINT ANGE</h1>
                     </div>
                 </div>
 
@@ -149,7 +147,7 @@ onMounted(() => {
 
                     <div class="mb-8 text-center">
                         <!-- Mobile logo without rounding or shadow -->
-                        <img src="icon_ksa.jpg" alt="Logo" class="mx-auto mb-4 h-20 w-20 object-cover" />
+                        <img src="logo_or.png" alt="Logo" class="mx-auto mb-4 h-20 w-20 object-cover" />
                         <h2 class="font-serif text-2xl font-bold text-[var(--midnight-blue)]">Kris Saint Ange</h2>
                     </div>
 
@@ -204,9 +202,7 @@ onMounted(() => {
                     <div class="flex flex-col items-center gap-12">
                         <!-- Logo and description - logo without rounding or shadow -->
                         <div class="max-w-md text-center">
-                            <div class="mb-4 flex justify-center">
-                                <img src="icon_ksa.jpg" alt="Logo" class="h-16 w-16 object-cover" />
-                            </div>
+                            <img src="logo_or.png" alt="Logo" class="mx-auto mb-4 h-16 w-16 object-cover" />
                             <h3 class="mb-2 font-serif text-xl font-bold text-[var(--midnight-blue)]">Kris Saint Ange</h3>
                         </div>
 
diff --git a/resources/js/pages/cards/cardSelection.vue b/resources/js/pages/cards/cardSelection.vue
index 356a855..e146c20 100644
--- a/resources/js/pages/cards/cardSelection.vue
+++ b/resources/js/pages/cards/cardSelection.vue
@@ -129,7 +129,7 @@ const clearHover = () => {
                                 </svg>
                             </div>
                         </div>
-                        <h3 class="text-xl font-bold text-[var(--midnight-blue)] md:text-2xl">Lecture Gratuite</h3>
+                        <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-[var(--midnight-blue)]/80 md:text-base">
                             Une question simple, une réponse claire. Parfait pour une première expérience avec l'oracle.
@@ -182,15 +182,15 @@ const clearHover = () => {
                                 </svg>
                             </div>
                         </div>
-                        <h3 class="text-xl font-bold text-white md:text-2xl">Profilage</h3>
-                        <p class="mt-2 text-4xl font-bold text-[var(--subtle-gold)] md:text-5xl">29€</p>
+                        <h3 class="text-xl font-bold text-white md:text-2xl">PROFILAGE</h3>
+                        <p class="mt-2 text-4xl font-bold text-[var(--subtle-gold)] md:text-5xl">9.99€</p>
                         <p class="mt-4 text-sm text-[var(--linen)] md:text-base">
                             Une analyse approfondie de votre situation avec des conseils stratégiques personnalisés.
                         </p>
                     </div>
                     <button
                         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)] shadow-md transition-all duration-300 hover:shadow-lg"
-                        @click="handleSelection(3)"
+                        @click="handleSelection(6)"
                     >
                         <!-- Button shine effect -->
                         <span
@@ -214,8 +214,6 @@ const 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>
 
-                    <!-- Gold corner accents -->
-
                     <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(--light-ivory)] shadow-sm">
@@ -235,15 +233,15 @@ const clearHover = () => {
                                 </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>
+                        <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">15.90€</p>
                         <p class="mt-4 text-sm text-[var(--midnight-blue)]/80 md:text-base">
                             Une lecture complète sur tous les aspects de votre vie : amour, carrière, spiritualité et abondance.
                         </p>
                     </div>
                     <button
                         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)] shadow-sm transition-all duration-300"
-                        @click="handleSelection(4)"
+                        @click="handleSelection(18)"
                     >
                         <!-- Button shine effect -->
                         <span