diff --git a/Modules/Raffle/app/Models/Raffle.php b/Modules/Raffle/app/Models/Raffle.php
index fc9e52b..a8bc159 100644
--- a/Modules/Raffle/app/Models/Raffle.php
+++ b/Modules/Raffle/app/Models/Raffle.php
@@ -45,4 +45,5 @@ public function tickets()
 {
     return $this->hasMany(Ticket::class, 'raffle_id');
 }
-}
+
+}
\ No newline at end of file
diff --git a/package-lock.json b/package-lock.json
index 5a2b34e..4d199d0 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -4,6 +4,7 @@
     "requires": true,
     "packages": {
         "": {
+            "name": "gananza",
             "dependencies": {
                 "@headlessui/vue": "^1.7.23",
                 "@splidejs/vue-splide": "^0.6.12",
@@ -1570,9 +1571,9 @@
             }
         },
         "node_modules/cross-spawn": {
-            "version": "7.0.3",
-            "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz",
-            "integrity": "sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==",
+            "version": "7.0.6",
+            "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.6.tgz",
+            "integrity": "sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA==",
             "dev": true,
             "license": "MIT",
             "dependencies": {
diff --git a/resources/js/Components/Dashboard/ActiveRaffles.vue b/resources/js/Components/Dashboard/ActiveRaffles.vue
index b3bc4dc..5a812dc 100644
--- a/resources/js/Components/Dashboard/ActiveRaffles.vue
+++ b/resources/js/Components/Dashboard/ActiveRaffles.vue
@@ -3,12 +3,18 @@
     <h2 :class="['text-2xl font-bold mb-6 text-center', theme.textPrimary]">Rifas Activas</h2>
 
     <!-- Mensaje si no hay rifas -->
-    <div v-if="raffles.data.length === 0" :class="theme.textSecondary">
+    <div
+      v-if="raffles.data.length === 0"
+      :class="theme.textSecondary"
+    >
       No hay rifas activas en este momento.
     </div>
 
     <!-- Grid de Rifas (1 fila con 3 cartas) -->
-    <div v-else class="container mx-auto w-full grid grid-cols-1 md:grid-cols-3 gap-6">
+    <div
+      v-else
+      class="container mx-auto w-full grid grid-cols-1 md:grid-cols-3 gap-10"
+    >
       <RaffleCard
         v-for="raffle in raffles.data.slice(0, 3)"
         :key="raffle.id"
diff --git a/resources/js/Components/Dashboard/RaffleCard.vue b/resources/js/Components/Dashboard/RaffleCard.vue
index cdcceff..08635d4 100644
--- a/resources/js/Components/Dashboard/RaffleCard.vue
+++ b/resources/js/Components/Dashboard/RaffleCard.vue
@@ -1,45 +1,121 @@
 <template>
-  <div :class="['raffle-card shadow-lg rounded-lg p-4 flex flex-col items-center gap-4 mx-auto', theme.cardBackground]">
-    <img
-      src="../../../../public/assets/media/auth/Letra-Gananza.svg"
-      alt="Prize"
-      class="h-32 w-32 object-cover rounded-lg mb-3"
-    />
-    <h3 :class="['text-lg font-semibold', theme.textPrimary]">{{ raffle.name }}</h3>
-    <p :class="theme.textSecondary">Organizador: {{ raffle.organizer.name }}</p>
-    <p :class="theme.textSecondary">
-      Ticket de precios <span :class="theme.textHighlight">${{ raffle.ticket_price }}</span>
-    </p>
-    <!-- Buy Button -->
-    <button @click.prevent="openSelectionModal" :class="theme.buttonPrimary"
-      class="py-2 px-4 rounded-lg hover:scale-105 transition">
-      Comprar
-    </button>
+  <!-- Main Container -->
+  <div
+    :class="['raffle-card shadow-lg rounded-lg p-6 items-center gap-5 mx-auto grid grid-cols-2', theme.cardBackground]"
+  >
+    <!-- Raffle Image and Countdown -->
+    <div>
+      <!-- Countdown Timer -->
+      <div
+        class="countdown p-0.3 x-sm rounded-lg text-center"
+        :class="countdownEnded ? 'bg-red-600 text-white' : 'bg-yellow-600 text-white'"
+      >
+        <p v-if="countdownEnded">¡Ya terminó!</p>
+        <p v-else>
+          {{ countdown.days }} :
+          {{ countdown.hours }} :
+          {{ countdown.minutes }} :
+          {{ countdown.seconds }}
+        </p>
+      </div>
+      <img
+        src="../../../../public/assets/media/auth/Logo-Gananza2.svg"
+        alt="Prize"
+        class="h-32 w-32 flex items-center justify-center rounded-lg mb-3"
+      />
+    </div>
+
+    <!-- Raffle Details -->
+    <div class="flex flex-col justify-center">
+      <h3 :class="['text-lg font-semibold', theme.textPrimary]">{{ raffle.name }}</h3>
+      <p :class="theme.textSecondary">Organizador: {{ raffle.organizer.name }}</p>
+      <p :class="theme.textSecondary">
+        Precio: <span :class="theme.textHighlight">${{ raffle.ticket_price }}</span>
+      </p>
+      <p :class="theme.textSecondary">Números disponibles: {{ raffle.total_tickets }}</p>
+      <p :class="theme.textSecondary">Total vendido: ${{ raffle.total_sales }}</p>
+      <p :class="theme.textSecondary">Fecha de juego: <br>{{ raffle.end_date }}</p>
+
+      <!-- Buy Button -->
+      <button
+        v-if="!countdownEnded"
+        @click.prevent="openSelectionModal"
+        :class="[theme.buttonPrimary, 'mt-4 py-2 px-4 rounded-lg hover:scale-105 transition']"
+      >
+        Comprar
+      </button>
+      <p
+        v-else
+        class="text-gray-500 mt-4"
+      >
+        Rifa finalizada
+      </p>
+    </div>
 
     <!-- Modal for Selecting Numbers -->
-    <TransitionRoot appear :show="showSelectionModal" as="template">
-      <Dialog as="div" @close="closeSelectionModal"
-        class="fixed inset-0 z-50 flex items-center justify-center backdrop-blur-sm">
-        <TransitionChild as="template" enter="ease-out duration-300" leave="ease-in duration-200">
+    <TransitionRoot
+      appear
+      :show="showSelectionModal"
+      as="template"
+    >
+      <Dialog
+        as="div"
+        @close="closeSelectionModal"
+        class="fixed inset-0 z-50 flex items-center justify-center backdrop-blur-sm"
+      >
+        <TransitionChild
+          as="template"
+          enter="ease-out duration-300"
+          leave="ease-in duration-200"
+        >
           <DialogPanel :class="[theme.modalBackground, 'w-full max-w-3xl p-8 rounded-2xl shadow-2xl flex gap-8']">
-            <div class="w-2/3 flex flex-col items-center gap-4">
+            <!-- Number Selection -->
+            <div class="w-2/3 grid items-center gap-x-6">
               <div class="grid grid-cols-5 gap-4 mb-4">
-                <button v-for="number in paginatedNumbers" :key="number" @click="handleNumberClick(number)"
-                  :class="['number-button py-2 px-4 rounded-lg transition', selectedNumber.includes(number) ? 'bg-blue-600 text-white' : 'bg-gray-200 hover:bg-blue-600 hover:text-white']">
+                <button
+                  v-for="number in paginatedNumbers"
+                  :key="number"
+                  @click="handleNumberClick(number)"
+                  :class="['number-button py-2 px-4 rounded-lg transition', selectedNumber.includes(number) ? 'bg-blue-600 text-white' : 'bg-gray-200 hover:bg-blue-600 hover:text-white']"
+                >
                   {{ number }}
                 </button>
               </div>
+
+              <!-- Buttons: "Limpiar" and "Random" -->
+              <div class="flex justify-evenly mt-2 p-6">
+                <button
+                  @click="clearSelection"
+                  :class="[theme.buttonDanger, 'px-4 py-2 rounded-lg']"
+                >
+                  Limpiar
+                </button>
+                <button
+                  @click="selectRandomNumbers"
+                  :class="[theme.buttonPrimary, 'px-4 py-2 rounded-lg']"
+                >
+                  Random
+                </button>
+              </div>
+
+              <!-- Pagination for Numbers -->
               <div class="flex justify-center items-center w-full">
-                <button @click="goToPreviousPage" :disabled="currentPage === 1"
-                  class="px-4 py-2 bg-gray-300 rounded-lg mx-2">
-                  Atras
+                <button
+                  @click="goToPreviousPage"
+                  :disabled="currentPage === 1"
+                  class="px-4 py-2 bg-gray-300 rounded-lg mx-2"
+                >
+                  &lt;
                 </button>
-                <span> Página {{ currentPage }} de {{ totalPages }}</span>
-                <button @click="goToNextPage" :disabled="currentPage === totalPages"
-                  class="px-4 py-2 bg-gray-300 rounded-lg mx-2">
-                  Siguiente
+                <button
+                  @click="goToNextPage"
+                  :disabled="currentPage === totalPages"
+                  class="px-4 py-2 bg-gray-300 rounded-lg mx-2"
+                >
+                  &gt;
                 </button>
               </div>
+              <div><span>Página {{ currentPage }} de {{ totalPages }}</span></div>
             </div>
             <div class="w-1/3 flex flex-col items-center justify-center bg-white p-4 rounded-lg shadow-lg">
               <h3 class="text-lg font-semibold mb-4">Factura</h3>
@@ -48,10 +124,15 @@
                 <div class="py-2 px-4 bg-gray-200 rounded-lg text-center">{{ userName || 'None' }}</div>
               </div>
               <div class="w-full mb-4">
-                <label class="text-gray-700">Numeros Seleccionados</label>
-                <div class="py-2 px-4 bg-gray-200 rounded-lg text-center">{{ selectedNumber.join(', ') || 'Ninguno' }}</div>
+                <label class="text-gray-700">Números Seleccionados</label>
+                <div class="py-2 px-4 bg-gray-200 rounded-lg text-center">
+                  {{ selectedNumber.join(', ') || 'Ninguno' }}
+                </div>
               </div>
-              <button @click="proceedToPaymentModal" :class="[theme.buttonPrimary, 'px-4 py-2 rounded-lg']">
+              <button
+                @click="proceedToPaymentModal"
+                :class="[theme.buttonPrimary, 'px-4 py-2 rounded-lg']"
+              >
                 Comprar
               </button>
             </div>
@@ -59,236 +140,91 @@
         </TransitionChild>
       </Dialog>
     </TransitionRoot>
-    <TransitionRoot appear :show="showModal" as="template">
-      <Dialog as="div" @close="closeModal" class="fixed inset-0 z-50 flex items-center justify-center backdrop-blur-sm">
-        <TransitionChild as="template" enter="ease-out duration-300" leave="ease-in duration-200">
-          <DialogPanel :class="[theme.modalBackground, 'w-full max-w-lg p-8 rounded-2xl shadow-2xl']">
-            <div>
-              <table cellspacing="0" cellpadding="10" class="w-full text-left border-collapse">
-                <thead>
-                  <tr>
-                    <th class="border-b-2 py-2">Nombre</th>
-                    <th class="border-b-2 py-2">Tus Numeros</th>
-                    <th class="border-b-2 py-2">Total a pagar</th>
-                  </tr>
-                </thead>
-                <tbody>
-                  <tr>
-                    <td class="border-t py-2">{{ userName }}</td>
-                    <td class="border-t py-2">{{ selectedNumber.join(', ') || 'None' }}</td>
-                    <td class="border-t py-2">
-                      ${{ selectedNumber.length > 0 ? (raffle.ticket_price * selectedNumber.length).toFixed(2) : '0.00' }}
-                    </td>
-                  </tr>
-                </tbody>
-              </table>
-            </div>
-            <!-- Payment and Close Buttons -->
-            <div id="wallet_container" class="my-4"></div>
-
-            <button @click="closeModal" :class="[theme.buttonDanger, 'px-4 py-2 rounded-lg']">
-              Cerrar
-            </button>
-          </DialogPanel>
-        </TransitionChild>
-      </Dialog>
-    </TransitionRoot>
   </div>
 </template>
 
 <script setup>
-/* Imports and Setup */
-import { onMounted, ref, computed } from "vue";
-import axios from "axios";
-
-import { usePage } from '@inertiajs/vue3';
+import { ref, computed, onMounted, onUnmounted } from 'vue';
 import { useDarkMode } from '@/composables/useDarkMode';
 import { TransitionRoot, TransitionChild, Dialog, DialogPanel } from '@headlessui/vue';
 
-const raffleProps = defineProps({ raffle: Object });
+/* Props and Reactive Data */
+const raffleProps = defineProps({
+  raffle: {
+    type: Object,
+    required: true,
+  },
+});
 const showSelectionModal = ref(false);
-const showModal = ref(false);
-const showVerificationModal = ref(false);
-const totalTickets = ref(raffleProps.raffle.total_tickets || 0);
-const referenceNumber = ref('');
-const numbers = ref([]);
 const selectedNumber = ref([]);
-
-const currentPage = ref(1);
-const itemsPerPage = 15;
-const totalPages = computed(() => Math.ceil(totalTickets.value / itemsPerPage));
-
-const user = usePage().props.auth?.user || null;
-const userName = ref(user ? user.name : 'Unauthenticated User');
-const { isDarkMode } = useDarkMode();
-const theme = computed(() => ({
-  textPrimary: isDarkMode.value ? 'text-white' : 'text-black',
-  cardBackground: isDarkMode.value ? 'bg-[#1c1c1e]' : 'bg-[#f9f9f9]',
-  modalBackground: isDarkMode.value ? 'bg-[#2c2c2e]' : 'bg-white',
-  buttonPrimary: 'bg-blue-600 text-white',
-  buttonDanger: 'bg-red-500 text-white',
-}));
-
-const initializeNumbers = () => {
-  numbers.value = Array.from({ length: totalTickets.value }, (_, i) => i + 1);
-};
-
-const paginatedNumbers = computed(() => {
-  const start = (currentPage.value - 1) * itemsPerPage;
-  const end = start + itemsPerPage;
-  return numbers.value.slice(start, end);
+const countdown = ref({
+  days: 0,
+  hours: 0,
+  minutes: 0,
+  seconds: 0,
 });
+const countdownEnded = ref(false);
 
-const goToNextPage = () => {
-  if (currentPage.value < totalPages.value) {
-    currentPage.value += 1;
-  }
-};
-
-const goToPreviousPage = () => {
-  if (currentPage.value > 1) {
-    currentPage.value -= 1;
-  }
-};
-
-const handleNumberClick = (number) => {
-  const index = selectedNumber.value.indexOf(number);
-  if (index === -1) {
-    selectedNumber.value.push(number);
-  } else {
-    selectedNumber.value.splice(index, 1);
-  }
-};
-
+/* Methods */
 const openSelectionModal = () => {
-  initializeNumbers();
-  showSelectionModal.value = true;
-};
-
-const closeSelectionModal = () => {
-  showSelectionModal.value = false;
-};
-
-const proceedToPaymentModal = () => {
-  if (selectedNumber.value.length === 0) {
-    alert('Please select at least one number.');
+  if (!raffleProps.raffle.total_tickets || raffleProps.raffle.total_tickets <= 0) {
+    alert('No hay boletos disponibles');
     return;
   }
-  closeSelectionModal();
-  showModal.value = true;
-};
-
-const openModal = () => {
-  showModal.value = true;
-};
-
-const closeModal = () => {
-  showModal.value = false;
-};
-
-const openVerificationModal = () => {
-  closeModal();
-  showVerificationModal.value = true;
-};
-
-const closeVerificationModal = () => {
-  showVerificationModal.value = false;
+  showSelectionModal.value = true;
 };
 
-/* Mercado pago button */
-
-const preferenceId = ref(null); // Para almacenar el preferenceId
-
-// Función para obtener el preferenceId desde el backend
-const fetchPreferenceId = async () => {
-  try {
-    // Prepara los datos para enviar al backend
-    const payload = {
-      // Asegúrate de enviar la información relevante que tu backend necesita
-      amount: 1000, // Ejemplo de monto, puedes usar el valor calculado
-      numbers: [1, 2, 3], // Ejemplo de números seleccionados
-    };
-
-    // Realiza la solicitud al backend
-    const response = await axios.post('/api/mercadopago/create-payment', payload);
+const calculateCountdown = () => {
+  const now = new Date();
+  const endDate = new Date(raffleProps.raffle.end_date);
+  const totalMilliseconds = endDate - now;
 
-    if (response.data.id) {
-      preferenceId.value = response.data.id;
-      initializeMercadoPago(response.data.id); // Llama a la función para renderizar el botón
-    } else {
-      throw new Error('No se recibió un ID de preferencia válido.');
-    }
-  } catch (error) {
-    console.error('Error obteniendo el preferenceId:', error);
-    alert('Ocurrió un error al obtener la preferencia de pago.');
-  }
-};
-
-// Función para inicializar MercadoPago y renderizar el botón
-const initializeMercadoPago = (preferenceId) => {
-  if (!window.MercadoPago) {
-    console.error('SDK de MercadoPago no cargado.');
+  if (totalMilliseconds <= 0) {
+    countdownEnded.value = true;
+    countdown.value = { days: 0, hours: 0, minutes: 0, seconds: 0 };
     return;
   }
 
-  // Inicializar MercadoPago con el access token de tu cuenta
-  const mp = new window.MercadoPago('APP_USR-3f0baf72-345b-40ac-ba99-745f71d22b81', {
-    locale: 'es-MX', // Ajusta el idioma al español de México
-  });
+  countdownEnded.value = false;
 
-  // Renderizar el botón de pago
-  mp.bricks().create('wallet', 'wallet_container', {
-    initialization: {
-      preferenceId: preferenceId,
-      redirectMode: 'modal', // Puedes cambiarlo a 'redirect' si prefieres redirigir
-    },
-  });
+  const totalSeconds = Math.floor(totalMilliseconds / 1000);
+  countdown.value = {
+    days: Math.floor(totalSeconds / (24 * 60 * 60)),
+    hours: Math.floor((totalSeconds % (24 * 60 * 60)) / (60 * 60)),
+    minutes: Math.floor((totalSeconds % (60 * 60)) / 60),
+    seconds: totalSeconds % 60,
+  };
 };
 
-// Cargar el SDK de MercadoPago cuando el componente se monte
+/* Lifecycle */
+let timerInterval;
 onMounted(() => {
-  // Cargar el script de MercadoPago
-  const script = document.createElement('script');
-  script.src = 'https://sdk.mercadopago.com/js/v2';
-  script.onload = fetchPreferenceId; // Llama a la función después de cargar el SDK
-  document.body.appendChild(script);
+  calculateCountdown();
+  timerInterval = setInterval(calculateCountdown, 1000);
+});
+onUnmounted(() => {
+  clearInterval(timerInterval);
 });
 
+/* Theme Configuration */
+const { isDarkMode } = useDarkMode();
+const theme = computed(() => ({
+  textPrimary: isDarkMode.value ? 'text-white' : 'text-black',
+  cardBackground: isDarkMode.value ? 'bg-[#1c1c1e]' : 'bg-[#f9f9f9]',
+  textSecondary: isDarkMode.value ? 'text-gray-400' : 'text-gray-600',
+  textHighlight: isDarkMode.value ? 'text-yellow-300' : 'text-yellow-600',
+  buttonPrimary: 'bg-blue-600 text-white',
+  modalBackground: isDarkMode.value ? 'bg-[#2c2c2e]' : 'bg-white',
+}));
 </script>
 
 <style scoped>
-.number-button {
-  transition: transform 0.2s, box-shadow 0.2s;
-}
-
-.number-button:hover {
-  cursor: pointer;
-  transform: scale(1.05);
+.raffle-card {
+  max-width: 500px;
 }
 
-.number-button:active,
-.number-button.bg-blue-600 {
-  transform: scale(0.95);
-  box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.2);
-}
-
-.number-button.bg-blue-600 {
-  background-color: #2563eb;
-  color: #fff;
-}
-
-.number-button.bg-gray-200 {
-  background-color: #f9f9f9;
-}
-
-.number-button.selected {
-  background-color: #2563eb;
-}
-
-.card {
-  padding: 20px;
-  border-radius: 10px;
-  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+.countdown {
+  font-size: 1.2rem;
+  font-weight: bold;
 }
 </style>
-