diff --git a/resources/js/pages/cards/FreeCardResult.vue b/resources/js/pages/cards/FreeCardResult.vue
index ac2a7d9..79f3605 100644
--- a/resources/js/pages/cards/FreeCardResult.vue
+++ b/resources/js/pages/cards/FreeCardResult.vue
@@ -1,35 +1,3 @@
-<script setup lang="ts">
-import LandingLayout from '@/layouts/app/LandingLayout.vue';
-import { router } from '@inertiajs/vue3';
-import axios from 'axios';
-import { computed, onMounted, ref } from 'vue';
-
-const goToBooking = () => {
-    router.visit('/rendez-vous');
-};
-
-const card = ref<any>(null);
-const error = ref<string | null>(null);
-const loading = ref(true);
-
-const params = new URLSearchParams(window.location.search);
-const cardId = params.get('id');
-
-const hasCard = computed(() => card.value !== null);
-
-onMounted(async () => {
-    try {
-        const response = await axios.get(`/api/get-card/${cardId}`);
-        card.value = response.data.cards;
-    } catch (err: any) {
-        console.error('Card fetch error:', err);
-        error.value = err.response?.data?.message || 'Failed to get cards from the server. Please contact support.';
-    } finally {
-        loading.value = false;
-    }
-});
-</script>
-
 <template>
     <LandingLayout>
         <main class="flex flex-1 justify-center px-4 py-8 sm:px-6 sm:py-12 md:py-16 lg:px-8">
@@ -62,46 +30,69 @@ onMounted(async () => {
                         <!-- Card Header -->
                         <div class="bg-[var(--midnight-blue)] p-6 text-center text-white">
                             <h2 class="text-2xl font-bold">{{ card.name }}</h2>
+                            <p v-if="card.orientation" class="mt-2 text-sm opacity-80">
+                                Orientation: {{ card.orientation === 'reversed' ? 'Inversée' : 'Droite' }}
+                            </p>
                         </div>
 
                         <!-- Card Content -->
                         <div class="p-6">
                             <!-- Card Image -->
                             <div class="mb-6 flex justify-center">
-                                <img :src="`/cards/${card.id + 1}.png`" :alt="card.name" class="w-full max-w-xs rounded-lg shadow-md" />
+                                <img
+                                    :src="card.image_url || `/cards/${card.id + 1}.png`"
+                                    :alt="card.name"
+                                    class="w-full max-w-xs rounded-lg shadow-md"
+                                />
                             </div>
 
-                            <!-- Description based on orientation -->
-                            <div class="mb-6">
-                                <h3 class="mb-3 text-lg font-semibold text-[var(--midnight-blue)]">Signification intégrale</h3>
+                            <!-- General description (if available) -->
+                            <div v-if="card.description" class="mb-6">
+                                <h3 class="mb-3 text-lg font-semibold text-[var(--midnight-blue)]">Description</h3>
                                 <p class="leading-relaxed text-gray-700">
                                     {{ card.description }}
                                 </p>
                             </div>
 
+                            <!-- Description based on orientation -->
+                            <div class="mb-6">
+                                <!-- <h3 class="mb-3 text-lg font-semibold text-[var(--midnight-blue)]">
+                                    {{ card.orientation === 'reversed' ? 'Signification Inversée' : 'Signification Droite' }}
+                                </h3> -->
+                                <p class="leading-relaxed text-gray-700">
+                                    {{ card.orientation === 'reversed' ? card.description_reversed : card.description_upright }}
+                                </p>
+                            </div>
+
                             <!-- Alternative meaning -->
-                            <!-- <div class="mb-6">
-                                <h3 class="mb-3 text-lg font-semibold text-[var(--midnight-blue)]">
-                                    {{
-                                        card.orientation === 'reversed'
-                                            ? 'Signification Alternative (Droite)'
-                                            : 'Signification Alternative (Inversée)'
-                                    }}
-                                </h3>
+                            <div class="mb-6">
+                                <!-- <h3 class="mb-3 text-lg font-semibold text-[var(--midnight-blue)]">
+                                    {{ card.orientation === 'reversed' ? 'Signification Droite' : 'Signification Inversée' }}
+                                </h3> -->
                                 <p class="leading-relaxed text-gray-700">
                                     {{ card.orientation === 'reversed' ? card.description_upright : card.description_reversed }}
                                 </p>
-                            </div> -->
+                            </div>
 
                             <!-- Symbolism -->
-                            <div v-if="card.symbolism && card.symbolism.length > 0">
+                            <div v-if="card.symbolism && Object.keys(card.symbolism).length > 0" class="mb-6">
                                 <h3 class="mb-3 text-lg font-semibold text-[var(--midnight-blue)]">Symbolisme</h3>
-                                <ul class="list-disc space-y-2 pl-5 text-gray-700">
-                                    <li v-for="(symbol, index) in card.symbolism" :key="index">
-                                        {{ symbol }}
+                                <ul class="space-y-2 text-gray-700">
+                                    <li v-for="(value, key) in card.symbolism" :key="key" class="pl-0">
+                                        <strong class="text-[var(--midnight-blue)]">{{ key }}:</strong> {{ value }}
                                     </li>
                                 </ul>
                             </div>
+
+                            <!-- Additional Information -->
+                            <!-- <div class="mt-8 border-t border-gray-200 pt-6">
+                                <h3 class="mb-3 text-lg font-semibold text-[var(--midnight-blue)]">Informations Supplémentaires</h3>
+                                <div class="grid grid-cols-1 gap-4 text-sm text-gray-600 sm:grid-cols-2">
+                                    <div><span class="font-medium">ID de la carte:</span> {{ card.id }}</div>
+                                    <div><span class="font-medium">Créée le:</span> {{ formatDate(card.created_at) }}</div>
+                                    <div><span class="font-medium">Mise à jour le:</span> {{ formatDate(card.updated_at) }}</div>
+                                </div>
+                            </div> -->
                         </div>
                     </div>
                 </div>
@@ -126,20 +117,43 @@ onMounted(async () => {
         </main>
     </LandingLayout>
 </template>
+<script setup lang="ts">
+import LandingLayout from '@/layouts/app/LandingLayout.vue';
+import { router } from '@inertiajs/vue3';
+import axios from 'axios';
+import { computed, onMounted, ref } from 'vue';
 
-<style scoped>
-.layout-content-container {
-    animation: fadeIn 0.6s ease-out;
-}
+const goToBooking = () => {
+    router.visit('/rendez-vous');
+};
 
-@keyframes fadeIn {
-    from {
-        opacity: 0;
-        transform: translateY(10px);
+const card = ref<any>(null);
+const error = ref<string | null>(null);
+const loading = ref(true);
+
+const params = new URLSearchParams(window.location.search);
+const cardId = params.get('id');
+
+const hasCard = computed(() => card.value !== null);
+
+// Helper function to format dates
+const formatDate = (dateString: string) => {
+    return new Date(dateString).toLocaleDateString('fr-FR', {
+        year: 'numeric',
+        month: 'long',
+        day: 'numeric',
+    });
+};
+
+onMounted(async () => {
+    try {
+        const response = await axios.get(`/api/get-card/${cardId}`);
+        card.value = response.data.cards;
+    } catch (err: any) {
+        console.error('Card fetch error:', err);
+        error.value = err.response?.data?.message || 'Failed to get cards from the server. Please contact support.';
+    } finally {
+        loading.value = false;
     }
-    to {
-        opacity: 1;
-        transform: translateY(0);
-    }
-}
-</style>
+});
+</script>