diff --git a/public/aganda-back.jpg b/public/aganda-back.jpg
new file mode 100644
index 0000000..d91edd4
Binary files /dev/null and b/public/aganda-back.jpg differ
diff --git a/public/hero-back.jpg b/public/hero-back.jpg
new file mode 100644
index 0000000..b6c094c
Binary files /dev/null and b/public/hero-back.jpg differ
diff --git a/public/how-back.jpg b/public/how-back.jpg
new file mode 100644
index 0000000..848efc0
Binary files /dev/null and b/public/how-back.jpg differ
diff --git a/public/offer-back.jpg b/public/offer-back.jpg
new file mode 100644
index 0000000..1042c5b
Binary files /dev/null and b/public/offer-back.jpg differ
diff --git a/resources/js/components/landing/HeroSection.vue b/resources/js/components/landing/HeroSection.vue
index 1534695..8eb31de 100644
--- a/resources/js/components/landing/HeroSection.vue
+++ b/resources/js/components/landing/HeroSection.vue
@@ -20,13 +20,7 @@ const goToShuffle = () => {
     <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"
-                style="
-                    background-image: url('https://lh3.googleusercontent.com/aida-public/AB6AXuCYwDtbzamxSUEWCWG7j3saRw40YQI6KQIVhrw_IrJI8FZXKKHOYej_hGrkM6B5S_MiY-vZ3sWqQDJdPEiYnuH81hSwoHOwfuZWZqY_QoW2UvbtvqCVIiFzd0wk-P63V9j-AgIYgqtonlEzqX1FvYGPZrsocOKx6sArVQACeo6MrVYkm2IVwDGWFyFL0L5U9bzRD8-Zo7hRvn_1hmJxOPS72z61S3jZnDTZPQe6tX9_jJk8ei7qludF6Gs-Qb92jXbRR68FpIoxPHg');
-                    filter: blur(4px) brightness(0.7);
-                "
-            ></div>
+            <div class="absolute inset-0 bg-cover bg-center" style="background-image: url('/hero-back.jpg'); filter: blur(4px) brightness(0.7)"></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 -->
diff --git a/resources/js/components/landing/HowSection.vue b/resources/js/components/landing/HowSection.vue
index 71d3830..0776a5a 100644
--- a/resources/js/components/landing/HowSection.vue
+++ b/resources/js/components/landing/HowSection.vue
@@ -1,37 +1,88 @@
 <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 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">
-                <div class="flex items-center gap-8">
-                    <div
-                        class="flex h-20 w-20 flex-shrink-0 items-center justify-center rounded-full bg-[var(--subtle-gold)] text-3xl font-bold text-[var(--midnight-blue)] shadow-lg"
-                    >
-                        1
+    <section class="relative overflow-hidden py-20 sm:py-24">
+        <!-- Background Image with Overlay -->
+        <div class="absolute inset-0 z-0">
+            <div class="absolute inset-0 bg-[url('how-back.jpg')] bg-cover bg-center bg-no-repeat"></div>
+            <div class="absolute inset-0 bg-gradient-to-br from-[var(--midnight-blue)]/20 to-[var(--subtle-gold)]/30"></div>
+        </div>
+
+        <!-- Content Container -->
+        <div class="relative z-10 mx-auto max-w-6xl px-4">
+            <h2 class="mb-16 text-center text-4xl font-bold text-[var(--midnight-blue)] drop-shadow-sm md:text-5xl">Comment cela fonctionne</h2>
+
+            <!-- Timeline Container -->
+            <div class="relative mx-auto max-w-2xl">
+                <!-- Vertical Timeline Line -->
+                <div
+                    class="absolute left-1/2 h-full w-1 -translate-x-1/2 bg-gradient-to-b from-[var(--subtle-gold)] to-[var(--midnight-blue)] shadow-md"
+                ></div>
+
+                <!-- Timeline Items -->
+                <div class="relative z-10 flex flex-col gap-16">
+                    <!-- Step 1 -->
+                    <div class="group flex items-center gap-8">
+                        <div class="relative">
+                            <div
+                                class="flex h-20 w-20 flex-shrink-0 items-center justify-center rounded-full bg-[var(--subtle-gold)] text-3xl font-bold text-[var(--midnight-blue)] shadow-lg transition-all duration-300 group-hover:scale-110 group-hover:shadow-xl"
+                            >
+                                1
+                            </div>
+                            <div
+                                class="absolute -inset-2 rounded-full bg-[var(--subtle-gold)] opacity-20 blur-md transition-opacity duration-300 group-hover:opacity-40"
+                            ></div>
+                        </div>
+                        <div
+                            class="rounded-xl border border-white/50 bg-white/80 p-6 shadow-lg backdrop-blur-sm transition-all duration-300 group-hover:bg-white/90 group-hover:shadow-xl"
+                        >
+                            <h3 class="mb-2 text-2xl font-bold text-[var(--midnight-blue)]">Choisissez Votre Lecture</h3>
+                            <p class="text-[var(--midnight-blue)]/80">
+                                Sélectionnez parmi nos différentes méthodes de divination pour trouver celle qui résonne avec vous.
+                            </p>
+                        </div>
                     </div>
-                    <div class="bg-[var(--light-ivory)] pl-4">
-                        <h3 class="text-2xl font-bold text-[var(--midnight-blue)]">Choisissez Votre Lecture</h3>
+
+                    <!-- Step 2 -->
+                    <div class="group flex items-center justify-end gap-8 text-right">
+                        <div
+                            class="rounded-xl border border-white/50 bg-white/80 p-6 shadow-lg backdrop-blur-sm transition-all duration-300 group-hover:bg-white/90 group-hover:shadow-xl"
+                        >
+                            <h3 class="mb-2 text-2xl font-bold text-[var(--midnight-blue)]">Recevez Votre Interprétation</h3>
+                            <p class="text-[var(--midnight-blue)]/80">
+                                Obtenez une analyse détaillée et personnalisée de votre tirage par nos experts.
+                            </p>
+                        </div>
+                        <div class="relative">
+                            <div
+                                class="flex h-20 w-20 flex-shrink-0 items-center justify-center rounded-full bg-[var(--subtle-gold)] text-3xl font-bold text-[var(--midnight-blue)] shadow-lg transition-all duration-300 group-hover:scale-110 group-hover:shadow-xl"
+                            >
+                                2
+                            </div>
+                            <div
+                                class="absolute -inset-2 rounded-full bg-[var(--subtle-gold)] opacity-20 blur-md transition-opacity duration-300 group-hover:opacity-40"
+                            ></div>
+                        </div>
                     </div>
-                </div>
-                <div class="flex items-center justify-end gap-8 text-right">
-                    <div class="bg-[var(--light-ivory)] pr-4">
-                        <h3 class="text-2xl font-bold text-[var(--midnight-blue)]">Recevez Votre Interprétation</h3>
-                    </div>
-                    <div
-                        class="flex h-20 w-20 flex-shrink-0 items-center justify-center rounded-full bg-[var(--subtle-gold)] text-3xl font-bold text-[var(--midnight-blue)] shadow-lg"
-                    >
-                        2
-                    </div>
-                </div>
-                <div class="flex items-center gap-8">
-                    <div
-                        class="flex h-20 w-20 flex-shrink-0 items-center justify-center rounded-full bg-[var(--subtle-gold)] text-3xl font-bold text-[var(--midnight-blue)] shadow-lg"
-                    >
-                        3
-                    </div>
-                    <div class="bg-[var(--light-ivory)] pl-4">
-                        <h3 class="text-2xl font-bold text-[var(--midnight-blue)]">Appliquez la Sagesse</h3>
+
+                    <!-- Step 3 -->
+                    <div class="group flex items-center gap-8">
+                        <div class="relative">
+                            <div
+                                class="flex h-20 w-20 flex-shrink-0 items-center justify-center rounded-full bg-[var(--subtle-gold)] text-3xl font-bold text-[var(--midnight-blue)] shadow-lg transition-all duration-300 group-hover:scale-110 group-hover:shadow-xl"
+                            >
+                                3
+                            </div>
+                            <div
+                                class="absolute -inset-2 rounded-full bg-[var(--subtle-gold)] opacity-20 blur-md transition-opacity duration-300 group-hover:opacity-40"
+                            ></div>
+                        </div>
+                        <div
+                            class="rounded-xl border border-white/50 bg-white/80 p-6 shadow-lg backdrop-blur-sm transition-all duration-300 group-hover:bg-white/90 group-hover:shadow-xl"
+                        >
+                            <h3 class="mb-2 text-2xl font-bold text-[var(--midnight-blue)]">Appliquez la Sagesse</h3>
+                            <p class="text-[var(--midnight-blue)]/80">
+                                Intégrez les conseils et perspectives reçues dans votre vie quotidienne pour avancer avec clarté.
+                            </p>
+                        </div>
                     </div>
                 </div>
             </div>
diff --git a/resources/js/components/organism/ShuffleCard/ShuffleCardPresentation.vue b/resources/js/components/organism/ShuffleCard/ShuffleCardPresentation.vue
index 2d660cf..ed7313f 100644
--- a/resources/js/components/organism/ShuffleCard/ShuffleCardPresentation.vue
+++ b/resources/js/components/organism/ShuffleCard/ShuffleCardPresentation.vue
@@ -22,6 +22,7 @@ const isFlipped = ref<boolean[]>([]);
 const isRestacking = ref(false);
 
 const remainingDeckSize = computed(() => Math.max(0, deckSize - revealedCards.value.length));
+const isFinished = computed(() => !!props.drawnCards && revealedCards.value.length >= props.drawnCards.length);
 
 const startDraw = (index: number) => {
     if (!props.drawnCards || revealedCards.value.length >= props.drawnCards.length) return;
@@ -50,6 +51,7 @@ const startDraw = (index: number) => {
 
 const handleDeckClick = () => {
     if (isDrawing.value) return;
+    if (isFinished.value) return;
 
     // First click spreads the deck
     if (!isSpread.value) {
@@ -157,9 +159,8 @@ defineExpose({ setDrawnCards });
                 <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 }"
+                        :class="{ spread: isSpread, drawing: isDrawing, restacking: isRestacking, finished: isFinished }"
                         @click="handleDeckClick"
-                        v-show="!drawnCards || revealedCards.length < drawnCards.length"
                     >
                         <div v-for="i in remainingDeckSize" :key="i" class="card" :style="getCardStyle(i)" @click="onCardClick(i, $event)">
                             <div class="card-back">
@@ -309,6 +310,13 @@ defineExpose({ setDrawnCards });
 .card-stack.restacking {
     animation: stack-restack 0.5s ease-out;
 }
+
+/* Keep stack visible but inert when finished */
+.card-stack.finished {
+    pointer-events: none;
+    opacity: 0.9;
+}
+
 @keyframes stack-restack {
     0% {
         transform: translateY(-8px) rotateX(3deg) rotateY(-3deg);
diff --git a/resources/js/layouts/app/LandingLayout.vue b/resources/js/layouts/app/LandingLayout.vue
index 5d66a83..654004f 100644
--- a/resources/js/layouts/app/LandingLayout.vue
+++ b/resources/js/layouts/app/LandingLayout.vue
@@ -1,8 +1,9 @@
 <script setup lang="ts">
 import { Link, router } from '@inertiajs/vue3';
-import { ref } from 'vue';
+import { onMounted, ref } from 'vue';
 
 const isMobileMenuOpen = ref(false);
+const scrolled = ref(false);
 
 const toggleMobileMenu = () => {
     isMobileMenuOpen.value = !isMobileMenuOpen.value;
@@ -11,126 +12,308 @@ const toggleMobileMenu = () => {
 const goToShuffle = () => {
     router.visit('/tirage');
 };
+
+onMounted(() => {
+    const handleScroll = () => {
+        scrolled.value = window.scrollY > 20;
+    };
+    window.addEventListener('scroll', handleScroll);
+    return () => window.removeEventListener('scroll', handleScroll);
+});
 </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">
+    <div
+        class="group/design-root relative flex size-full min-h-screen flex-col overflow-x-hidden bg-gradient-to-br from-[var(--light-ivory)]/30 via-white to-[var(--linen)]/20"
+    >
+        <!-- Background decorative elements -->
+        <div class="fixed inset-0 z-0 overflow-hidden">
+            <!-- Subtle gradient orbs -->
+            <div class="absolute -top-40 -right-40 h-80 w-80 rounded-full bg-[var(--subtle-gold)]/10 blur-3xl"></div>
+            <div class="absolute -bottom-40 -left-40 h-80 w-80 rounded-full bg-[var(--midnight-blue)]/5 blur-3xl"></div>
+
+            <!-- Subtle pattern overlay -->
+            <div
+                class="absolute inset-0 bg-[radial-gradient(circle_at_1px_1px,_rgba(0,0,0,0.15)_1px,_transparent_0)] bg-[length:40px_40px] opacity-[0.02]"
+            ></div>
+        </div>
+
+        <div class="layout-container relative z-10 flex h-full grow flex-col">
+            <!-- Enhanced Header -->
             <header
-                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"
+                class="sticky top-0 z-50 flex items-center justify-between px-4 py-4 transition-all duration-500 md:px-10 lg:px-20"
+                :class="scrolled ? 'bg-white/90 py-3 shadow-sm backdrop-blur-md' : 'bg-transparent py-4'"
             >
-                <div class="text-midnight-blue flex items-center gap-3">
-                    <img src="icon.jpg" alt="Logo" class="h-30 w-30" />
+                <!-- Logo with enhanced styling -->
+                <div class="flex items-center gap-3">
+                    <div class="relative">
+                        <div class="absolute -inset-2 rounded-full bg-[var(--subtle-gold)]/20 blur-sm"></div>
+                        <img src="icon.jpg" alt="Logo" class="relative h-16 w-16 rounded-full object-cover shadow-lg md:h-20 md:w-20" />
+                    </div>
+                    <div class="hidden md:block">
+                        <h1 class="font-serif text-xl font-bold text-[var(--midnight-blue)]">Kris Saint Ange</h1>
+                        <p class="text-xs text-[var(--midnight-blue)]/70">Oracle & Guidance</p>
+                    </div>
                 </div>
 
-                <nav class="hidden flex-1 items-center justify-center gap-10 md:flex">
-                    <Link class="text-midnight-blue hover:text-subtle-gold text-sm font-medium transition-colors duration-300" href="/">Accueil</Link>
-                    <Link class="text-midnight-blue hover:text-subtle-gold text-sm font-medium transition-colors duration-300" href="/tirage"
-                        >L'Oracle</Link
+                <!-- Desktop Navigation -->
+                <nav class="hidden flex-1 items-center justify-center gap-8 md:flex">
+                    <Link
+                        class="group relative rounded-lg px-3 py-2 text-sm font-medium text-[var(--midnight-blue)]/80 transition-all duration-300 hover:bg-white/50 hover:text-[var(--midnight-blue)]"
+                        href="/"
                     >
+                        <span class="relative z-10">Accueil</span>
+                        <div
+                            class="absolute inset-0 scale-0 rounded-lg bg-[var(--subtle-gold)]/20 transition-transform duration-300 group-hover:scale-100"
+                        ></div>
+                    </Link>
+                    <Link
+                        class="group relative rounded-lg px-3 py-2 text-sm font-medium text-[var(--midnight-blue)]/80 transition-all duration-300 hover:bg-white/50 hover:text-[var(--midnight-blue)]"
+                        href="/tirage"
+                    >
+                        <span class="relative z-10">L'Oracle</span>
+                        <div
+                            class="absolute inset-0 scale-0 rounded-lg bg-[var(--subtle-gold)]/20 transition-transform duration-300 group-hover:scale-100"
+                        ></div>
+                    </Link>
                     <a
                         v-if="$page.url === '/'"
-                        class="text-midnight-blue hover:text-subtle-gold text-sm font-medium transition-colors duration-300"
+                        class="group relative rounded-lg px-3 py-2 text-sm font-medium text-[var(--midnight-blue)]/80 transition-all duration-300 hover:bg-white/50 hover:text-[var(--midnight-blue)]"
                         href="#testimonials"
-                        >Témoignages</a
                     >
-                    <Link class="text-midnight-blue hover:text-subtle-gold text-sm font-medium transition-colors duration-300" href="/rendez-vous"
-                        >Prendre Rendez-vous</Link
+                        <span class="relative z-10">Témoignages</span>
+                        <div
+                            class="absolute inset-0 scale-0 rounded-lg bg-[var(--subtle-gold)]/20 transition-transform duration-300 group-hover:scale-100"
+                        ></div>
+                    </a>
+                    <Link
+                        class="group relative rounded-lg px-3 py-2 text-sm font-medium text-[var(--midnight-blue)]/80 transition-all duration-300 hover:bg-white/50 hover:text-[var(--midnight-blue)]"
+                        href="/rendez-vous"
                     >
+                        <span class="relative z-10">Prendre Rendez-vous</span>
+                        <div
+                            class="absolute inset-0 scale-0 rounded-lg bg-[var(--subtle-gold)]/20 transition-transform duration-300 group-hover:scale-100"
+                        ></div>
+                    </Link>
                 </nav>
 
+                <!-- CTA Button & Mobile Menu -->
                 <div class="flex items-center gap-4">
-                    <button @click="toggleMobileMenu" class="md:hidden">
-                        <svg class="text-midnight-blue h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16m-7 6h7"></path>
-                        </svg>
-                    </button>
-
                     <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"
+                        class="group relative flex h-12 min-w-[120px] cursor-pointer items-center justify-center overflow-hidden rounded-full bg-gradient-to-r from-[var(--midnight-blue)] to-[var(--spiritual-earth)] px-6 text-sm font-bold tracking-wide text-white shadow-lg transition-all duration-500 hover:from-[var(--spiritual-earth)] hover:to-[var(--midnight-blue)] hover:shadow-xl"
                     >
-                        <span class="truncate">Commencer</span>
+                        <span class="relative z-10 flex items-center gap-2">
+                            Commencer
+                            <svg
+                                class="h-4 w-4 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="M13 7l5 5m0 0l-5 5m5-5H6" />
+                            </svg>
+                        </span>
+                        <div
+                            class="absolute inset-0 bg-gradient-to-r from-white/20 to-transparent opacity-0 transition-opacity duration-300 group-hover:opacity-100"
+                        ></div>
+                    </button>
+
+                    <button
+                        @click="toggleMobileMenu"
+                        class="relative flex h-10 w-10 items-center justify-center rounded-lg border border-[var(--linen)] bg-white/50 backdrop-blur-sm transition-all duration-300 hover:bg-white hover:shadow-sm md:hidden"
+                    >
+                        <svg
+                            class="h-5 w-5 text-[var(--midnight-blue)] transition-transform duration-300"
+                            fill="none"
+                            viewBox="0 0 24 24"
+                            stroke="currentColor"
+                        >
+                            <path
+                                v-if="!isMobileMenuOpen"
+                                stroke-linecap="round"
+                                stroke-linejoin="round"
+                                stroke-width="2"
+                                d="M4 6h16M4 12h16M4 18h16"
+                            ></path>
+                            <path v-else stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
+                        </svg>
                     </button>
                 </div>
             </header>
-            <div class="gradient-bg">
-                <h1>2</h1>
+
+            <!-- Enhanced Mobile Menu -->
+            <div
+                v-if="isMobileMenuOpen"
+                class="fixed inset-0 z-40 bg-white/95 backdrop-blur-md transition-all duration-500 md:hidden"
+                :class="isMobileMenuOpen ? 'opacity-100' : 'pointer-events-none opacity-0'"
+            >
+                <div class="flex min-h-screen flex-col items-center justify-center gap-8 p-8">
+                    <button
+                        @click="toggleMobileMenu"
+                        class="absolute top-6 right-6 flex h-10 w-10 items-center justify-center rounded-full bg-[var(--light-ivory)]"
+                    >
+                        <svg class="h-5 w-5 text-[var(--midnight-blue)]" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
+                        </svg>
+                    </button>
+
+                    <div class="mb-8 text-center">
+                        <img src="icon.jpg" alt="Logo" class="mx-auto mb-4 h-20 w-20 rounded-full object-cover shadow-lg" />
+                        <h2 class="font-serif text-2xl font-bold text-[var(--midnight-blue)]">Kris Saint Ange</h2>
+                        <p class="text-[var(--midnight-blue)]/70">Oracle & Guidance</p>
+                    </div>
+
+                    <nav class="flex w-full max-w-sm flex-col items-center gap-6">
+                        <Link
+                            class="w-full rounded-xl border border-[var(--linen)] bg-white/50 py-4 text-center text-lg font-medium text-[var(--midnight-blue)] transition-all duration-300 hover:border-[var(--subtle-gold)]/30 hover:bg-[var(--subtle-gold)]/10 hover:shadow-sm"
+                            href="/"
+                            @click="toggleMobileMenu"
+                        >
+                            Accueil
+                        </Link>
+                        <Link
+                            class="w-full rounded-xl border border-[var(--linen)] bg-white/50 py-4 text-center text-lg font-medium text-[var(--midnight-blue)] transition-all duration-300 hover:border-[var(--subtle-gold)]/30 hover:bg-[var(--subtle-gold)]/10 hover:shadow-sm"
+                            href="/tirage"
+                            @click="toggleMobileMenu"
+                        >
+                            L'Oracle
+                        </Link>
+                        <Link
+                            class="w-full rounded-xl border border-[var(--linen)] bg-white/50 py-4 text-center text-lg font-medium text-[var(--midnight-blue)] transition-all duration-300 hover:border-[var(--subtle-gold)]/30 hover:bg-[var(--subtle-gold)]/10 hover:shadow-sm"
+                            href="#testimonials"
+                            @click="toggleMobileMenu"
+                        >
+                            Témoignages
+                        </Link>
+                        <Link
+                            class="w-full rounded-xl border border-[var(--linen)] bg-white/50 py-4 text-center text-lg font-medium text-[var(--midnight-blue)] transition-all duration-300 hover:border-[var(--subtle-gold)]/30 hover:bg-[var(--subtle-gold)]/10 hover:shadow-sm"
+                            href="/rendez-vous"
+                            @click="toggleMobileMenu"
+                        >
+                            Prendre Rendez-vous
+                        </Link>
+                    </nav>
+
+                    <button
+                        @click="goToShuffle"
+                        class="mt-8 w-full max-w-sm rounded-xl bg-gradient-to-r from-[var(--midnight-blue)] to-[var(--spiritual-earth)] py-4 text-lg font-bold text-white shadow-lg transition-all duration-300 hover:shadow-xl"
+                    >
+                        Commencer la Lecture
+                    </button>
+                </div>
             </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"
-                    href="#"
-                    @click="toggleMobileMenu"
-                    >Accueil</Link
-                >
 
-                <Link
-                    class="text-midnight-blue hover:text-subtle-gold text-sm font-medium transition-colors duration-300"
-                    href="#"
-                    @click="toggleMobileMenu"
-                    >L'Oracle</Link
-                >
-                <Link
-                    class="text-midnight-blue hover:text-subtle-gold text-sm font-medium transition-colors duration-300"
-                    href="#"
-                    @click="toggleMobileMenu"
-                    >Lectures</Link
-                >
-                <Link
-                    class="text-midnight-blue hover:text-subtle-gold text-sm font-medium transition-colors duration-300"
-                    href="#"
-                    @click="toggleMobileMenu"
-                    >Témoignages</Link
-                >
-                <Link
-                    class="text-midnight-blue hover:text-subtle-gold text-sm font-medium transition-colors duration-300"
-                    href="/rendez-vous"
-                    @click="toggleMobileMenu"
-                    >Booking</Link
-                >
-            </nav>
-
-            <main class="flex flex-col items-center">
+            <!-- Main Content -->
+            <main class="flex flex-1 flex-col items-center">
                 <slot />
             </main>
 
-            <footer class="bg-pure-white text-midnight-blue/80 py-12">
+            <!-- Enhanced Footer -->
+            <footer class="mt-16 border-t border-[var(--linen)] bg-gradient-to-b from-white to-[var(--light-ivory)]/30 py-16">
                 <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
-                    <div class="flex flex-col items-center gap-8">
-                        <div class="flex flex-wrap justify-center gap-x-4 gap-y-2 md:gap-x-8 md:gap-y-4">
-                            <Link class="hover:text-subtle-gold transition-colors" href="/">Accueil</Link>
-
-                            <a v-if="$page.url = '/'" class="hover:text-subtle-gold transition-colors" href="#testimonials">Témoignages</a>
-
-                            <Link class="hover:text-subtle-gold transition-colors" href="/politique-confidalite">Politique de Confidentialité</Link>
-                            <Link class="hover:text-subtle-gold transition-colors" href="/term-condition">Conditions d'Utilisation</Link>
+                    <div class="flex flex-col items-center gap-12">
+                        <!-- Logo and description -->
+                        <div class="max-w-md text-center">
+                            <div class="mb-4 flex justify-center">
+                                <img src="icon.jpg" alt="Logo" class="h-16 w-16 rounded-full object-cover shadow-lg" />
+                            </div>
+                            <h3 class="mb-2 font-serif text-xl font-bold text-[var(--midnight-blue)]">Kris Saint Ange</h3>
+                            <p class="text-sm text-[var(--midnight-blue)]/70">Guidance spirituelle et consultations d'oracle personnalisées</p>
                         </div>
-                        <div class="flex justify-center gap-4 md:gap-6">
-                            <Link class="text-midnight-blue/60 hover:text-spiritual-earth transition-colors" href="#">
-                                <svg class="h-6 w-6" fill="currentColor" viewBox="0 0 256 256">
+
+                        <!-- Links -->
+                        <div class="flex flex-wrap justify-center gap-x-8 gap-y-4">
+                            <Link
+                                class="group relative text-[var(--midnight-blue)]/70 transition-all duration-300 hover:text-[var(--midnight-blue)]"
+                                href="/"
+                            >
+                                Accueil
+                                <span
+                                    class="absolute -bottom-1 left-0 h-0.5 w-0 bg-[var(--subtle-gold)] transition-all duration-300 group-hover:w-full"
+                                ></span>
+                            </Link>
+                            <a
+                                v-if="$page.url === '/'"
+                                class="group relative text-[var(--midnight-blue)]/70 transition-all duration-300 hover:text-[var(--midnight-blue)]"
+                                href="#testimonials"
+                            >
+                                Témoignages
+                                <span
+                                    class="absolute -bottom-1 left-0 h-0.5 w-0 bg-[var(--subtle-gold)] transition-all duration-300 group-hover:w-full"
+                                ></span>
+                            </a>
+                            <Link
+                                class="group relative text-[var(--midnight-blue)]/70 transition-all duration-300 hover:text-[var(--midnight-blue)]"
+                                href="/politique-confidalite"
+                            >
+                                Politique de Confidentialité
+                                <span
+                                    class="absolute -bottom-1 left-0 h-0.5 w-0 bg-[var(--subtle-gold)] transition-all duration-300 group-hover:w-full"
+                                ></span>
+                            </Link>
+                            <Link
+                                class="group relative text-[var(--midnight-blue)]/70 transition-all duration-300 hover:text-[var(--midnight-blue)]"
+                                href="/term-condition"
+                            >
+                                Conditions d'Utilisation
+                                <span
+                                    class="absolute -bottom-1 left-0 h-0.5 w-0 bg-[var(--subtle-gold)] transition-all duration-300 group-hover:w-full"
+                                ></span>
+                            </Link>
+                        </div>
+
+                        <!-- Social Links -->
+                        <div class="flex justify-center gap-6">
+                            <Link
+                                class="group rounded-full border border-[var(--linen)] bg-white/50 p-3 text-[var(--midnight-blue)]/60 transition-all duration-300 hover:border-[var(--subtle-gold)]/30 hover:text-[var(--spiritual-earth)] hover:shadow-sm"
+                                href="#"
+                            >
+                                <svg
+                                    class="h-5 w-5 transition-transform duration-300 group-hover:scale-110"
+                                    fill="currentColor"
+                                    viewBox="0 0 256 256"
+                                >
                                     <path
                                         d="M128,80a48,48,0,1,0,48,48A48.05,48.05,0,0,0,128,80Zm0,80a32,32,0,1,1,32-32A32,32,0,0,1,128,160ZM176,24H80A56.06,56.06,0,0,0,24,80v96a56.06,56.06,0,0,0,56,56h96a56.06,56.06,0,0,0,56-56V80A56.06,56.06,0,0,0,176,24Zm40,152a40,40,0,0,1-40,40H80a40,40,0,0,1-40-40V80A40,40,0,0,1,80,40h96a40,40,0,0,1,40,40ZM192,76a12,12,0,1,1-12-12A12,12,0,0,1,192,76Z"
                                     ></path>
                                 </svg>
                             </Link>
-                            <Link class="text-midnight-blue/60 hover:text-spiritual-earth transition-colors" href="#">
-                                <svg class="h-6 w-6" fill="currentColor" viewBox="0 0 256 256">
+                            <Link
+                                class="group rounded-full border border-[var(--linen)] bg-white/50 p-3 text-[var(--midnight-blue)]/60 transition-all duration-300 hover:border-[var(--subtle-gold)]/30 hover:text-[var(--spiritual-earth)] hover:shadow-sm"
+                                href="#"
+                            >
+                                <svg
+                                    class="h-5 w-5 transition-transform duration-300 group-hover:scale-110"
+                                    fill="currentColor"
+                                    viewBox="0 0 256 256"
+                                >
                                     <path
                                         d="M128,24A104,104,0,1,0,232,128,104.11,104.11,0,0,0,128,24Zm8,191.63V152h24a8,8,0,0,0,0-16H136V112a16,16,0,0,1,16-16h16a8,8,0,0,0,0-16H152a32,32,0,0,0-32,32v24H96a8,8,0,0,0,0,16h24v63.63a88,88,0,1,1,16,0Z"
                                     ></path>
                                 </svg>
                             </Link>
-                            <Link class="text-midnight-blue/60 hover:text-spiritual-earth transition-colors" href="#">
-                                <svg class="h-6 w-6" fill="currentColor" viewBox="0 0 256 256">
+                            <Link
+                                class="group rounded-full border border-[var(--linen)] bg-white/50 p-3 text-[var(--midnight-blue)]/60 transition-all duration-300 hover:border-[var(--subtle-gold)]/30 hover:text-[var(--spiritual-earth)] hover:shadow-sm"
+                                href="#"
+                            >
+                                <svg
+                                    class="h-5 w-5 transition-transform duration-300 group-hover:scale-110"
+                                    fill="currentColor"
+                                    viewBox="0 0 256 256"
+                                >
                                     <path
                                         d="M247.39,68.94A8,8,0,0,0,240,64H209.57A48.66,48.66,0,0,0,168.1,40a46.91,46.91,0,0,0-33.75,13.7A47.9,47.9,0,0,0,120,88v6.09C79.74,83.47,46.81,50.72,46.46,50.37a8,8,0,0,0-13.65,4.92c-4.31,47.79,9.57,79.77,22,98.18a110.93,110.93,0,0,0,21.88,24.2c-15.23,17.53-39.21,26.74-39.47,26.84a8,8,0,0,0-3.85,11.93c.75,1.12,3.75,5.05,11.08,8.72C53.51,229.7,65.48,232,80,232c70.67,0,129.72-54.42,135.75-124.44l29.91-29.9A8,8,0,0,0,247.39,68.94Zm-45,29.41a8,8,0,0,0-2.32,5.14C196,166.58,143.28,216,80,216c-10.56,0-18-1.4-23.22-3.08,11.51-6.25,27.56-17,37.88-32.48A8,8,0,0,0,92,169.08c-.47-.27-43.91-26.34-44-96,16,13,45.25,33.17,78.67,38.79A8,8,0,0,0,136,104V88a32,32,0,0,1,9.6-22.92A30.94,30.94,0,0,1,167.9,56c12.66.16,24.49,7.88,29.44,19.21A8,8,0,0,0,204.67,80h16Z"
                                     ></path>
                                 </svg>
                             </Link>
                         </div>
-                        <p class="text-sm">© 2024 Kris Saint Ange. Tous droits réservés.</p>
+
+                        <!-- Copyright -->
+                        <div class="w-full max-w-md border-t border-[var(--linen)] pt-8 text-center">
+                            <p class="text-sm text-[var(--midnight-blue)]/60">© 2024 Kris Saint Ange. Tous droits réservés.</p>
+                        </div>
                     </div>
                 </div>
             </footer>
@@ -139,52 +322,28 @@ const goToShuffle = () => {
 </template>
 
 <style scoped>
-/* Utility classes for colors */
-.text-midnight-blue {
-    color: var(--midnight-blue);
+/* Smooth transitions for all interactive elements */
+* {
+    transition-property: color, background-color, border-color, transform, box-shadow;
+    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+    transition-duration: 300ms;
 }
-.bg-midnight-blue {
-    background-color: var(--midnight-blue);
+
+/* Custom scrollbar */
+::-webkit-scrollbar {
+    width: 6px;
 }
-.text-spiritual-earth {
-    color: var(--spiritual-earth);
+
+::-webkit-scrollbar-track {
+    background: var(--light-ivory);
 }
-.bg-spiritual-earth {
-    background-color: var(--spiritual-earth);
+
+::-webkit-scrollbar-thumb {
+    background: var(--subtle-gold);
+    border-radius: 3px;
 }
-.text-subtle-gold {
-    color: var(--subtle-gold);
-}
-.bg-subtle-gold {
-    background-color: var(--subtle-gold);
-}
-.text-linen {
-    color: var(--linen);
-}
-.bg-linen {
-    background-color: var(--linen);
-}
-.text-pure-white {
-    color: var(--pure-white);
-}
-.bg-pure-white {
-    background-color: var(--pure-white);
-}
-.text-light-ivory {
-    color: var(--light-ivory);
-}
-.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;
+
+::-webkit-scrollbar-thumb:hover {
+    background: var(--spiritual-earth);
 }
 </style>
diff --git a/resources/js/pages/Agenda.vue b/resources/js/pages/Agenda.vue
index cb12bf3..6a53e82 100644
--- a/resources/js/pages/Agenda.vue
+++ b/resources/js/pages/Agenda.vue
@@ -48,46 +48,234 @@ const redirectToStipeCheckout = async () => {
 
 <template>
     <LandingLayout>
-        <main class="flex flex-1 justify-center px-10 py-16">
-            <div class="layout-content-container flex w-full max-w-4xl flex-col items-center gap-12">
-                <h1 class="text-center text-5xl font-bold text-[var(--midnight-blue)]">Réservez votre consultation</h1>
-                <div class="flex w-full flex-wrap items-start justify-center gap-16">
-                    <date-picker v-model:selectedDate="selectedDate" />
-                    <div class="flex max-w-md min-w-[320px] flex-1 flex-col gap-6">
-                        <p class="text-center text-lg text-[var(--midnight-blue)]">Entrez vos informations</p>
-                        <form class="flex flex-col gap-6" @submit.prevent="handleAppointment">
-                            <div>
-                                <label class="mb-2 block text-sm font-medium text-[var(--midnight-blue)]" for="name">Nom complet</label>
-                                <input
-                                    class="form-input w-full rounded-lg border-[var(--linen)] bg-[var(--pure-white)] p-3 text-base text-[var(--midnight-blue)] focus:border-[var(--subtle-gold)] focus:ring-[var(--subtle-gold)]"
-                                    id="name"
-                                    name="name"
-                                    placeholder="Votre nom complet"
-                                    type="text"
-                                    v-model="userForm.fullname"
-                                />
+        <!-- Background container - only affects the main content -->
+        <div class="relative min-h-screen">
+            <!-- Background with mystical elements - only for main content -->
+            <div class="absolute inset-0 z-0 overflow-hidden">
+                <!-- Main background with gradient overlay -->
+                <div class="absolute inset-0 bg-gradient-to-br from-[var(--light-ivory)]/95 via-white/90 to-[var(--linen)]/80"></div>
+
+                <!-- Background image with very low opacity -->
+                <div class="absolute inset-0 bg-cover bg-center bg-no-repeat opacity-50" style="background-image: url('/aganda-back.jpg')"></div>
+
+                <!-- Decorative floating elements -->
+                <div class="absolute top-1/4 left-1/4 h-32 w-32 rounded-full bg-[var(--subtle-gold)]/10 blur-xl"></div>
+                <div class="absolute right-1/4 bottom-1/3 h-40 w-40 rounded-full bg-[var(--midnight-blue)]/5 blur-xl"></div>
+                <div class="absolute top-1/3 right-1/3 h-24 w-24 rounded-full bg-[var(--spiritual-earth)]/8 blur-lg"></div>
+
+                <!-- Subtle pattern overlay -->
+                <div
+                    class="absolute inset-0 bg-[radial-gradient(circle_at_1px_1px,_rgba(0,0,0,0.15)_1px,_transparent_0)] bg-[length:60px_60px] opacity-[0.02]"
+                ></div>
+            </div>
+
+            <!-- Main content with background -->
+            <main class="relative z-10 flex flex-1 justify-center px-4 py-12 sm:px-6 sm:py-16 lg:px-8 lg:py-20">
+                <div class="layout-content-container flex w-full max-w-6xl flex-col items-center gap-12 lg:gap-16">
+                    <!-- Enhanced Header Section -->
+                    <div class="max-w-3xl text-center">
+                        <h1 class="mb-6 font-serif text-4xl font-bold text-[var(--midnight-blue)] sm:text-5xl lg:text-6xl">
+                            Réservez votre consultation
+                        </h1>
+                        <p class="mx-auto max-w-2xl text-lg text-[var(--midnight-blue)]/80 sm:text-xl">
+                            Choisissez la date de votre consultation spirituelle et laissez-vous guider vers l'éclaircissement
+                        </p>
+                    </div>
+
+                    <!-- Main Content Container -->
+                    <div class="flex w-full flex-col items-center justify-center gap-12 lg:flex-row lg:items-start lg:gap-16 xl:gap-20">
+                        <!-- Date Picker Card -->
+                        <div class="w-full max-w-md lg:max-w-lg">
+                            <div class="rounded-2xl border border-white/50 bg-white/80 p-6 shadow-xl backdrop-blur-sm">
+                                <div class="mb-6 text-center">
+                                    <h2 class="font-serif text-2xl font-bold text-[var(--midnight-blue)]">Choisissez votre date</h2>
+                                    <p class="mt-2 text-[var(--midnight-blue)]/70">Sélectionnez le moment parfait pour votre guidance</p>
+                                </div>
+                                <date-picker v-model:selectedDate="selectedDate" />
                             </div>
-                            <div>
-                                <label class="mb-2 block text-sm font-medium text-[var(--midnight-blue)]" for="email">Adresse e-mail</label>
-                                <input
-                                    class="form-input w-full rounded-lg border-[var(--linen)] bg-[var(--pure-white)] p-3 text-base text-[var(--midnight-blue)] focus:border-[var(--subtle-gold)] focus:ring-[var(--subtle-gold)]"
-                                    id="email"
-                                    name="email"
-                                    placeholder="Votre adresse e-mail"
-                                    type="email"
-                                    v-model="userForm.email"
-                                />
+                        </div>
+
+                        <!-- Form Card -->
+                        <div class="w-full max-w-md">
+                            <div class="rounded-2xl border border-white/50 bg-white/80 p-8 shadow-xl backdrop-blur-sm">
+                                <div class="mb-8 text-center">
+                                    <div class="mb-4 inline-flex h-12 w-12 items-center justify-center rounded-full bg-[var(--subtle-gold)]/20">
+                                        <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="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"
+                                            />
+                                        </svg>
+                                    </div>
+                                    <h2 class="font-serif text-2xl font-bold text-[var(--midnight-blue)]">Vos informations</h2>
+                                    <p class="mt-2 text-[var(--midnight-blue)]/70">Remplissez vos coordonnées pour finaliser la réservation</p>
+                                </div>
+
+                                <form class="flex flex-col gap-6" @submit.prevent="handleAppointment">
+                                    <!-- Name Input -->
+                                    <div class="group">
+                                        <label class="mb-3 block text-sm font-semibold text-[var(--midnight-blue)]" for="name"> Nom complet </label>
+                                        <div class="relative">
+                                            <input
+                                                class="form-input w-full rounded-xl border-2 border-[var(--linen)] bg-white/80 p-4 text-base text-[var(--midnight-blue)] transition-all duration-300 placeholder:text-[var(--midnight-blue)]/40 focus:border-[var(--subtle-gold)] focus:bg-white focus:shadow-lg focus:ring-2 focus:ring-[var(--subtle-gold)]/20"
+                                                id="name"
+                                                name="name"
+                                                placeholder="Votre nom complet"
+                                                type="text"
+                                                v-model="userForm.fullname"
+                                                required
+                                            />
+                                            <div
+                                                class="pointer-events-none absolute inset-0 rounded-xl border-2 border-transparent transition-all duration-300 group-focus-within:border-[var(--subtle-gold)]/30"
+                                            ></div>
+                                        </div>
+                                    </div>
+
+                                    <!-- Email Input -->
+                                    <div class="group">
+                                        <label class="mb-3 block text-sm font-semibold text-[var(--midnight-blue)]" for="email">
+                                            Adresse e-mail
+                                        </label>
+                                        <div class="relative">
+                                            <input
+                                                class="form-input w-full rounded-xl border-2 border-[var(--linen)] bg-white/80 p-4 text-base text-[var(--midnight-blue)] transition-all duration-300 placeholder:text-[var(--midnight-blue)]/40 focus:border-[var(--subtle-gold)] focus:bg-white focus:shadow-lg focus:ring-2 focus:ring-[var(--subtle-gold)]/20"
+                                                id="email"
+                                                name="email"
+                                                placeholder="Votre adresse e-mail"
+                                                type="email"
+                                                v-model="userForm.email"
+                                                required
+                                            />
+                                            <div
+                                                class="pointer-events-none absolute inset-0 rounded-xl border-2 border-transparent transition-all duration-300 group-focus-within:border-[var(--subtle-gold)]/30"
+                                            ></div>
+                                        </div>
+                                    </div>
+
+                                    <!-- Selected Date Display -->
+                                    <div class="rounded-xl border border-[var(--linen)] bg-[var(--light-ivory)]/50 p-4">
+                                        <p class="mb-1 text-sm font-medium text-[var(--midnight-blue)]">Date sélectionnée :</p>
+                                        <p class="text-lg font-semibold text-[var(--spiritual-earth)]">
+                                            {{
+                                                selectedDate.toLocaleDateString('fr-FR', {
+                                                    weekday: 'long',
+                                                    year: 'numeric',
+                                                    month: 'long',
+                                                    day: 'numeric',
+                                                })
+                                            }}
+                                        </p>
+                                    </div>
+
+                                    <!-- Submit Button -->
+                                    <button
+                                        class="group relative mt-4 flex h-14 w-full cursor-pointer items-center justify-center overflow-hidden rounded-xl bg-gradient-to-r from-[var(--midnight-blue)] to-[var(--spiritual-earth)] px-8 text-lg font-bold tracking-wide text-white shadow-lg transition-all duration-500 hover:from-[var(--spiritual-earth)] hover:to-[var(--midnight-blue)] hover:shadow-xl disabled:cursor-not-allowed disabled:opacity-50"
+                                        type="submit"
+                                        :disabled="loading || !userForm.fullname || !userForm.email"
+                                    >
+                                        <!-- Shine effect -->
+                                        <span
+                                            class="absolute inset-0 -translate-x-full -skew-x-12 transform bg-gradient-to-r from-transparent via-white/30 to-transparent transition-transform duration-700 group-hover:translate-x-full"
+                                        ></span>
+
+                                        <!-- Button content -->
+                                        <span class="relative z-10 flex items-center gap-3">
+                                            <svg v-if="loading" class="h-5 w-5 animate-spin" fill="none" viewBox="0 0 24 24">
+                                                <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+                                                <path
+                                                    class="opacity-75"
+                                                    fill="currentColor"
+                                                    d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+                                                ></path>
+                                            </svg>
+                                            <span>{{ loading ? 'Traitement...' : 'Confirmer et Payer' }}</span>
+                                            <svg
+                                                v-if="!loading"
+                                                class="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="M13 7l5 5m0 0l-5 5m5-5H6" />
+                                            </svg>
+                                        </span>
+                                    </button>
+
+                                    <!-- Security Note -->
+                                    <p class="mt-4 text-center text-xs text-[var(--midnight-blue)]/60">
+                                        🔒 Paiement sécurisé via Stripe. Vos informations sont protégées.
+                                    </p>
+                                </form>
                             </div>
-                            <button
-                                class="mt-6 flex h-14 w-full cursor-pointer items-center justify-center rounded-full bg-[var(--midnight-blue)] px-8 text-lg font-bold tracking-wide text-[var(--pure-white)] shadow-[var(--linen)] shadow-lg transition-colors duration-300 hover:bg-[var(--spiritual-earth)]"
-                                type="submit"
-                            >
-                                <span class="truncate">Confirmer et Payer</span>
-                            </button>
-                        </form>
+                        </div>
+                    </div>
+
+                    <!-- Additional Information -->
+                    <div class="mt-8 max-w-2xl text-center">
+                        <div
+                            class="inline-flex items-center gap-4 rounded-2xl border border-white/50 bg-white/50 px-6 py-4 text-sm text-[var(--midnight-blue)]/70 backdrop-blur-sm"
+                        >
+                            <svg class="h-5 w-5 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 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"
+                                />
+                            </svg>
+                            <span>Consultation confidentielle • Guidance personnalisée • Support après séance</span>
+                        </div>
                     </div>
                 </div>
-            </div>
-        </main>
+            </main>
+        </div>
     </LandingLayout>
 </template>
+
+<style scoped>
+/* Custom animations */
+@keyframes float {
+    0%,
+    100% {
+        transform: translateY(0px);
+    }
+    50% {
+        transform: translateY(-10px);
+    }
+}
+
+.floating {
+    animation: float 6s ease-in-out infinite;
+}
+
+/* Smooth transitions for form elements */
+.form-input {
+    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+/* Ensure the background doesn't leak into footer */
+.relative.min-h-screen {
+    background: transparent;
+}
+
+/* Custom scrollbar for date picker if needed */
+.custom-scrollbar::-webkit-scrollbar {
+    width: 6px;
+}
+
+.custom-scrollbar::-webkit-scrollbar-track {
+    background: var(--light-ivory);
+    border-radius: 3px;
+}
+
+.custom-scrollbar::-webkit-scrollbar-thumb {
+    background: var(--subtle-gold);
+    border-radius: 3px;
+}
+
+.custom-scrollbar::-webkit-scrollbar-thumb:hover {
+    background: var(--spiritual-earth);
+}
+</style>
diff --git a/resources/js/pages/cards/cardSelection.vue b/resources/js/pages/cards/cardSelection.vue
index d25a7b3..4948011 100644
--- a/resources/js/pages/cards/cardSelection.vue
+++ b/resources/js/pages/cards/cardSelection.vue
@@ -70,186 +70,205 @@ const clearHover = () => {
     hoveredCard.value = null;
 };
 </script>
+
 <template>
-    <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="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="mx-auto grid max-w-6xl grid-cols-1 gap-6 md:gap-8 lg:grid-cols-3">
-            <!-- Free draw -->
+    <section class="relative overflow-hidden px-4 py-12 sm:py-16 md:py-20">
+        <!-- Background with subtle gradient overlay -->
+        <div class="absolute inset-0 z-0">
+            <div class="absolute inset-0 bg-gradient-to-br from-white via-[var(--light-ivory)] to-[var(--linen)] opacity-95"></div>
+            <div class="absolute inset-0 bg-[url('how-back.jpg')] bg-cover bg-center bg-no-repeat opacity-10 mix-blend-overlay"></div>
+            <!-- Subtle pattern overlay -->
             <div
-                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"
+                class="absolute inset-0 bg-[radial-gradient(circle_at_1px_1px,_rgba(0,0,0,0.15)_1px,_transparent_0)] bg-[length:20px_20px] opacity-5"
+            ></div>
+        </div>
+
+        <div class="relative z-10 mx-auto max-w-7xl">
+            <h2 class="mb-8 text-center text-3xl font-bold text-[var(--midnight-blue)] md:text-4xl lg:text-5xl">Explorez Nos Lectures</h2>
+
+            <p
+                v-if="isFreeDrawUsed"
+                class="mx-auto mb-10 max-w-2xl rounded-xl border border-[var(--linen)] bg-white/80 p-4 text-center text-base font-medium text-[var(--spiritual-earth)] shadow-sm backdrop-blur-sm"
             >
-                <!-- 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>
+                Vous avez utilisé votre tirage gratuit ! Choisissez une option payante pour continuer.
+            </p>
 
-                <div class="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)]">
-                            <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="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)"
-                >
-                    <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>
-
-            <!-- Premium option -->
-            <div
-                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"
-            >
-                <!-- 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="mx-auto grid max-w-6xl grid-cols-1 gap-6 md:gap-8 lg:grid-cols-3">
+                <!-- Free draw -->
                 <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="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)"
+                    class="relative flex flex-col gap-6 rounded-2xl border border-[var(--linen)] bg-white/90 p-6 shadow-lg backdrop-blur-sm transition-all duration-500 hover:-translate-y-2 hover:shadow-xl md:p-8"
+                    :class="{ 'opacity-100': !isFreeDrawUsed, 'opacity-70 grayscale': isFreeDrawUsed }"
+                    @mouseenter="setHover(1)"
+                    @mouseleave="clearHover"
                 >
-                    <!-- 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>
+                    <!-- 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>
 
-            <!-- Premium plus option -->
-            <div
-                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">
-                    <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 class="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">
+                                <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>
-                    <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="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)"
-                >
-                    <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"
+                    <button
+                        :disabled="isFreeDrawUsed"
+                        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)] shadow-sm transition-all duration-300 hover:bg-[var(--spiritual-earth)] hover:text-white disabled:cursor-not-allowed disabled:opacity-50"
+                        @click="handleSelection(1)"
                     >
-                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3" />
-                    </svg>
-                </button>
+                        <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>
+
+                <!-- Premium option -->
+                <div
+                    class="relative flex transform flex-col gap-6 rounded-2xl bg-gradient-to-br from-[var(--midnight-blue)] via-[#2d3748] to-[#1a202c] p-6 shadow-xl transition-all duration-500 hover:-translate-y-2 hover:shadow-2xl md:scale-[1.02] md:p-8"
+                    @mouseenter="setHover(2)"
+                    @mouseleave="clearHover"
+                >
+                    <!-- Premium badge -->
+                    <div class="absolute -top-3 left-1/2 z-20 -translate-x-1/2 transform">
+                        <span
+                            class="rounded-full bg-gradient-to-r from-[var(--subtle-gold)] to-amber-300 px-4 py-1.5 text-xs font-bold tracking-wide text-[var(--midnight-blue)] uppercase shadow-sm"
+                            >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>
+
+                    <!-- Subtle pattern overlay -->
+                    <div
+                        class="absolute inset-0 rounded-2xl bg-[radial-gradient(circle_at_1px_1px,_white_1px,_transparent_0)] bg-[length:20px_20px] opacity-5"
+                    ></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-white/10 shadow-sm backdrop-blur-sm">
+                                <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-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="group relative mt-2 flex h-12 w-full items-center justify-center overflow-hidden rounded-full bg-gradient-to-r from-[var(--subtle-gold)] to-amber-300 px-6 font-bold tracking-wide text-[var(--midnight-blue)] shadow-md transition-all duration-300 hover:from-white hover:to-amber-50 hover:shadow-lg"
+                        @click="handleSelection(3)"
+                    >
+                        <!-- Button shine effect -->
+                        <span
+                            class="absolute inset-0 -translate-x-full -skew-x-12 transform bg-gradient-to-r from-transparent via-white/60 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="relative flex flex-col gap-6 rounded-2xl border border-[var(--linen)] bg-white/90 p-6 shadow-lg backdrop-blur-sm transition-all duration-500 hover:-translate-y-2 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">
+                        <div class="mb-4 flex justify-center">
+                            <div
+                                class="flex h-12 w-12 items-center justify-center rounded-full bg-gradient-to-br from-[var(--light-ivory)] to-amber-50 shadow-sm"
+                            >
+                                <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="group mt-2 flex h-12 w-full items-center justify-center rounded-full bg-gradient-to-r from-[var(--linen)] to-amber-50 px-6 font-bold tracking-wide text-[var(--midnight-blue)] shadow-sm transition-all duration-300 hover:from-[var(--spiritual-earth)] hover:to-amber-200 hover:text-[var(--midnight-blue)]"
+                        @click="handleSelection(4)"
+                    >
+                        <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>
         </div>
     </section>