diff --git a/public/assets/image.png b/public/assets/image.png
new file mode 100644
index 0000000..fa6b429
Binary files /dev/null and b/public/assets/image.png differ
diff --git a/public/banner-guapa.webp b/public/banner-guapa.webp
new file mode 100644
index 0000000..14055f1
Binary files /dev/null and b/public/banner-guapa.webp differ
diff --git a/public/banner3.png b/public/banner3.png
new file mode 100644
index 0000000..304330e
Binary files /dev/null and b/public/banner3.png differ
diff --git a/src/app/(admins)/administrador/crear-evento/page.tsx b/src/app/(admins)/administrador/crear-evento/page.tsx
deleted file mode 100644
index 2affa1b..0000000
--- a/src/app/(admins)/administrador/crear-evento/page.tsx
+++ /dev/null
@@ -1,161 +0,0 @@
-'use client';
-
-import React, { useState } from 'react';
-import { CreateEventoType } from '@/types/create-evento';
-import { FormularioCreacion } from '@/types/create-formulario';
-import CreateEvento from '@/containers/create-evento';
-import { plantillasDisponibles } from '@/data/plantillas';
-import Image from 'next/image';
-import CreateFormulario from '@/containers/create-formulario';
-import Button from '@/components/button';
-import axiosInstance from '@/utils/api-config';
-import toast from 'react-hot-toast';
-import { useRouter } from 'next/navigation';
-import { getAxiosError } from '@/utils/errors-utils';
-
-export default function Page() {
-  const [eventoBanner, setEventoBanner] = useState<File | null>(null);
-  const [evento, setEvento] = useState<CreateEventoType>({
-    tipo_evento: '',
-    nombre_evento: '',
-    descripcion_evento: '',
-    fecha_inicio: new Date(),
-    fecha_fin: new Date(),
-  });
-  const router = useRouter();
-
-  const [datosFormulario, setDatosFormulario] =
-    useState<FormularioCreacion | null>(null);
-
-  const handleChange = (
-    field: keyof CreateEventoType,
-    value: string | Date
-  ) => {
-    setEvento((prev) => ({
-      ...prev,
-      [field]: value,
-    }));
-  };
-
-  const handleBannerChange = (file: File | null) => {
-    setEventoBanner(file);
-  };
-
-  const handleSeleccionarPlantilla = (plantillaId: string) => {
-    const seleccionada = plantillasDisponibles.find(
-      (p) => p.id === plantillaId
-    );
-    if (seleccionada) {
-      setDatosFormulario(seleccionada.datos);
-      console.log('Plantilla seleccionada:', seleccionada);
-    }
-  };
-
-  const handleCrearEventoYFormulario = async () => {
-    try {
-      const createEventoWithCuestionario = await axiosInstance.post('/cuestionario/withEvento', {
-        evento: evento,
-        cuestionario: datosFormulario,
-      });
-
-      if (createEventoWithCuestionario) {
-        const formData = new FormData();
-        if (eventoBanner) {
-          formData.append('banner', eventoBanner);
-          const bannercreated = await axiosInstance.post(
-            `/evento/${createEventoWithCuestionario.data.id_evento}/banner`,
-            formData,
-            {
-              headers: {
-                'Content-Type': 'multipart/form-data',
-              },
-            }
-          );
-          console.log('Banner creado:', bannercreated.data);
-        }
-      }
-      
-      console.log('Evento y formulario creados:', createEventoWithCuestionario.data);
-
-      toast.success('Evento y formulario creados exitosamente');
-      router.push(`/administrador`);
-    } catch (error) {
-      const msg = getAxiosError(error);
-      toast.error(
-        `Error al crear el evento o formulario: ${msg.message || 'Error desconocido'}`
-      );
-      console.error('Error al crear evento y formulario:', error);
-    }
-  };
-
-  return (
-    <div className="container">
-      <div className="my-4">
-        <h1>Crear evento y formulario de registro</h1>
-        <p>
-          En esta pagina podras crear un evento y un primer formulario de
-          registro, posteriormente podras crear mas formularios relacionados a
-          este evento.
-        </p>
-      </div>
-
-      <CreateEvento
-        evento={evento}
-        handleChange={handleChange}
-        handleBannerChange={handleBannerChange}
-      />
-
-      {!datosFormulario && (
-        <div className="border p-3 rounded my-4">
-          <h2 className="h5 fw-bold mb-2">
-            Selecciona una plantilla para el formulario:
-          </h2>
-          <p className="text-secondary small lh-sm">
-            Elige una de las plantillas disponibles para crear tu formulario de
-            registro.
-            <br />
-            Estas plantillas están diseñadas para garantizar la correcta
-            integración con el sistema, permitiendo que los datos se obtengan y
-            se prellenan automáticamente de forma precisa.
-            <br />
-            <span className="text-danger fw-semibold">
-              Para asegurar el funcionamiento óptimo del prellenado, modifica la
-              estructura solo si es necesario.
-            </span>
-          </p>
-
-          <div className="d-flex gap-4 flex-wrap">
-            {plantillasDisponibles.map((plantilla) => (
-              <div
-                className="mb-3 cursor-pointer"
-                key={plantilla.id}
-                onClick={() => handleSeleccionarPlantilla(plantilla.id)}
-              >
-                <div className="text-center">
-                  <Image
-                    src={plantilla.imagen}
-                    width={200}
-                    height={200}
-                    alt={`Plantilla de formulario ${plantilla.nombre}`}
-                    className="img-fluid rounded shadow-sm"
-                  />
-                </div>
-              </div>
-            ))}
-          </div>
-        </div>
-      )}
-
-      {datosFormulario && (
-        <CreateFormulario
-          formulario={datosFormulario}
-          onChange={(nuevo) => setDatosFormulario({ ...nuevo })}
-        />
-      )}
-
-      <Button className="mb-4" onClick={handleCrearEventoYFormulario}>
-        Crear Evento y Formulario
-      </Button>
-    </div>
-  );
-}
diff --git a/src/app/(admins)/administrador/evento/[id_evento]/page.tsx b/src/app/(admins)/administrador/evento/[id_evento]/page.tsx
deleted file mode 100644
index 551c312..0000000
--- a/src/app/(admins)/administrador/evento/[id_evento]/page.tsx
+++ /dev/null
@@ -1,162 +0,0 @@
-'use client';
-import EditEvento from '@/containers/edit-evento';
-import { useGetApi } from '@/hooks/use-get-api';
-import {
-  CuestionarioWithCupo,
-  GetEventoWithCuestionarios,
-} from '@/types/evento';
-import { useParams } from 'next/navigation';
-import React, { useState, useEffect } from 'react';
-import { CreateEventoType } from '@/types/create-evento';
-import axiosInstance from '@/utils/api-config';
-import toast from 'react-hot-toast';
-import Table, { Header } from '@/components/table';
-import Button from '@/components/button';
-import { downloadFile } from '@/utils/downloas-utils';
-import Link from 'next/link';
-
-type Params = {
-  id_evento: string;
-};
-
-export default function Page() {
-  const params = useParams<Params>();
-  const { data } = useGetApi<GetEventoWithCuestionarios>(
-    `/evento/${params.id_evento}/cuestionarios`
-  );
-
-  const [evento, setEvento] = useState<GetEventoWithCuestionarios | null>(null);
-  const [loading, setLoading] = useState(false);
-
-  useEffect(() => {
-    if (data) setEvento(data);
-  }, [data]);
-
-  const handleChange = (
-    field: keyof CreateEventoType,
-    value: string | Date
-  ) => {
-    setEvento((prev) =>
-      prev
-        ? {
-            ...prev,
-            [field]: value,
-          }
-        : null
-    );
-  };
-
-  const handleEventoActualizado = (
-    eventoActualizado: GetEventoWithCuestionarios
-  ) => {
-    setEvento(eventoActualizado);
-  };
-
-  const headers: Header<CuestionarioWithCupo>[] = [
-    {
-      key: 'nombre_form',
-      label: 'Nombre del cuestionario',
-    },
-    {
-      key: 'cupo_maximo',
-      label: 'Cupos',
-      render: (_, row) => {
-        if (row.cupo_maximo === null) {
-          return 'Sin límite';
-        }
-
-        return `${row.cupos_usados ?? 0} / ${row.cupo_maximo}`;
-      },
-    },
-    {
-      key: 'banner',
-      label: 'Ver / Editar',
-      render: (_, row) => (
-        <div className="d-flex gap-2">
-          <Link
-            className="btn btn-primary"
-            href={`/administrador/evento/${params.id_evento}/${row.id_cuestionario}`}
-          >
-            Ver/Editar formulario
-          </Link>
-        </div>
-      ),
-    },
-    {
-      key: 'banner',
-      label: 'Descargar respuestas',
-      render: (_, row) => (
-        <Button
-          variant="success"
-          icon="download"
-          onClick={() => handleDownload(row.id_cuestionario, row.nombre_form)}
-          disabled={loading}
-        >
-          {loading ? (
-            <>
-              <span
-                className="spinner-border spinner-border-sm me-2"
-                role="status"
-                aria-hidden="true"
-              ></span>
-              Descargando...
-            </>
-          ) : (
-            'Descargar respuestas'
-          )}
-        </Button>
-      ),
-    },
-  ];
-
-  if (!evento) return <p>Cargando...</p>;
-
-  const handleDownload = async (id_cuestionario: number, nombre: string) => {
-    setLoading(true);
-
-    try {
-      const res = await axiosInstance.get(
-        `/cuestionario-respondido/reporte-respuestas/${id_cuestionario}`,
-        {
-          responseType: 'blob',
-        }
-      );
-
-      downloadFile(res.data, `${nombre}`, 'csv');
-    } catch (error) {
-      console.error('Error al descargar el archivo:', error);
-      toast.error('Error al descargar el archivo');
-    } finally {
-      setLoading(false);
-    }
-  };
-
-  return (
-    <div className="my-4">
-      <Link
-        href={`/administrador`}
-        className="btn btn-link mb-3"
-      >
-        <i className="bi bi-arrow-left me-2"></i>
-        Volver
-      </Link>
-
-      <h2 className="mb-4">Evento</h2>
-
-      <EditEvento
-        evento={evento}
-        handleChange={handleChange}
-        handleOnChange={handleEventoActualizado}
-      />
-
-      {data?.cuestionarios && data.cuestionarios.length > 0 && (
-        <>
-          <h3 className="mt-5">Cuestionarios del evento</h3>
-          <div className="mt-2">
-            <Table headers={headers} data={data.cuestionarios ?? []} />
-          </div>
-        </>
-      )}
-    </div>
-  );
-}
diff --git a/src/app/(admins)/administrador/page.tsx b/src/app/(admins)/administrador/page.tsx
deleted file mode 100644
index da32aaf..0000000
--- a/src/app/(admins)/administrador/page.tsx
+++ /dev/null
@@ -1,64 +0,0 @@
-'use client';
-
-import Button from '@/components/button';
-import EventoCard from '@/components/evento-card';
-import { useGetApi } from '@/hooks/use-get-api';
-import { GetEventoWithCuestionarios } from '@/types/evento';
-import Link from 'next/link';
-import React from 'react';
-
-export default function Page() {
-  const { loading, data, error } = useGetApi<GetEventoWithCuestionarios[]>(
-    '/evento/activos/cuestionarios'
-  );
-  const { data: recientes } = useGetApi<GetEventoWithCuestionarios[]>(
-    '/evento/recientes/cuestionarios'
-  );
-
-  if (loading) return <div>Cargando formularios...</div>;
-  if (error) return <div className="alert alert-danger">{error.message}</div>;
-
-  return (
-    <>
-      <div className="d-flex justify-content-between align-items-center my-4">
-        <h1>Eventos</h1>
-        <Link href="/administrador/crear-evento">
-          <Button>Crear Evento</Button>
-        </Link>
-      </div>
-      {loading && <div>Cargando...</div>}
-      {data && (
-        <div className="row">
-          {data.map((item, key) => {
-            const fadeClass = `delay-${(key % 5) + 1}`;
-            return (
-              <div
-                className={`col-md-6 col-lg-4 my-4 fade-in-up-bounce ${fadeClass}`}
-                key={key}
-              >
-                <EventoCard evento={item} user="administrador" />
-              </div>
-            );
-          })}
-        </div>
-      )}
-      {recientes && (
-        <div className="row">
-          <h2>Eventos Recientes</h2>
-          <p className="text-muted">Eventos de los ultimos 30 días.</p>
-          {recientes.map((item, key) => {
-            const fadeClass = `delay-${(key % 5) + 1}`;
-            return (
-              <div
-                className={`col-md-6 col-lg-4 my-4 fade-in-up-bounce ${fadeClass}`}
-                key={key}
-              >
-                <EventoCard evento={item} user="administrador" />
-              </div>
-            );
-          })}
-        </div>
-      )}
-    </>
-  );
-}
diff --git a/src/app/(admins)/staff/layout.tsx b/src/app/(admins)/staff/layout.tsx
deleted file mode 100644
index 2582403..0000000
--- a/src/app/(admins)/staff/layout.tsx
+++ /dev/null
@@ -1,27 +0,0 @@
-import Footer from '@/components/layout/footer';
-import Header from '@/components/layout/header';
-import Link from 'next/link';
-import React from 'react';
-
-export default function Layout({ children }: { children: React.ReactNode }) {
-  return (
-    <div className='d-flex flex-column min-vh-100'>
-      <Header />
-      <main className='container flex-grow-1'>
-        <nav className='d-flex gap-2 my-4'>
-          <Link href={'/staff/'} className='text-decoration-none'>
-            <div className='box'>Escaner</div>
-          </Link>
-          <Link
-            href={'/staff/lista-manual'}
-            className='text-decoration-none'
-          >
-            <div className='box'>Lista manual</div>
-          </Link>
-        </nav>
-        {children}
-      </main>
-      <Footer />
-    </div>
-  );
-}
diff --git a/src/app/(admins)/staff/lista-manual/page.tsx b/src/app/(admins)/staff/lista-manual/page.tsx
deleted file mode 100644
index 994d00c..0000000
--- a/src/app/(admins)/staff/lista-manual/page.tsx
+++ /dev/null
@@ -1,181 +0,0 @@
-'use client';
-import Button from '@/components/button';
-import Input from '@/components/input';
-import Select from '@/components/select';
-import Table, { Header } from '@/components/table';
-import {
-  GetCuestionario,
-  GetCuestionarioWithEvento,
-} from '@/types/cuestionario';
-import { GetEvento } from '@/types/evento';
-import { ParticipacionEvento } from '@/types/participante-evento';
-import axiosInstance from '@/utils/api-config';
-import React, { useEffect } from 'react';
-import toast from 'react-hot-toast';
-
-export default function Page() {
-  const headers: Header<ParticipacionEvento>[] = [
-    {
-      key: 'id_participante',
-      label: '#',
-      render: (_, row) => row.participante.id_participante,
-    },
-    {
-      key: 'participante',
-      label: 'Correo',
-      render: (_, row) => row.participante.correo,
-    },
-    {
-      key: 'fecha_registro',
-      label: 'Fecha registro',
-      render: (val) => new Date(val as string).toLocaleString(),
-    },
-    {
-      key: 'estatus',
-      label: 'Asistencia',
-      render: (_, row) => {
-        const isLoading = loadingAsistencia[row.id_participante];
-
-        return row.fecha_asistencia ? (
-          <span className="text-success">
-            <i className="bi bi-check-circle-fill me-2"></i>
-            Asistió
-          </span>
-        ) : (
-          <Button
-            size="sm"
-            outline
-            onClick={() =>
-              confirmarAsistencia(row.id_participante, row.id_cuestionario)
-            }
-            disabled={isLoading}
-          >
-            {isLoading ? (
-              <>
-                <span
-                  className="spinner-border spinner-border-sm me-2"
-                  role="status"
-                  aria-hidden="true"
-                ></span>
-                Confirmando...
-              </>
-            ) : (
-              'Confirmar asistencia'
-            )}
-          </Button>
-        );
-      },
-    },
-  ];
-
-  const [eventos, setEventos] = React.useState<GetCuestionarioWithEvento[]>([]);
-  const [participantes, setParticipantes] = React.useState<
-    ParticipacionEvento[]
-  >([]);
-  const [loadingAsistencia, setLoadingAsistencia] = React.useState<
-    Record<number, boolean>
-  >({});
-  const [busquedaCorreo, setBusquedaCorreo] = React.useState('');
-
-  useEffect(() => {
-    const getEventos = async () => {
-      try {
-        const { data } = await axiosInstance.get<GetCuestionario[]>(
-          `/cuestionario`
-        );
-        if (!data) throw new Error('No se encontraron eventos');
-
-        const cuestionariosConEvento = await Promise.all(
-          data.map(async (cuestionario) => {
-            const { data: evento } = await axiosInstance.get<GetEvento>(
-              `/evento/${cuestionario.id_evento}`
-            );
-            return { ...cuestionario, evento };
-          })
-        );
-
-        setEventos(cuestionariosConEvento);
-      } catch (error) {
-        console.error('Error en getEventos:', error);
-      }
-    };
-
-    getEventos();
-  }, []);
-
-  const handleOnSelect = async (idSeleccionado: number) => {
-    try {
-      const { data } = await axiosInstance.get<ParticipacionEvento[]>(
-        `/participante-evento/evento/${idSeleccionado}`
-      );
-      setParticipantes(data);
-    } catch (error) {
-      console.error('Error al obtener participante-evento:', error);
-    }
-  };
-
-  const confirmarAsistencia = async (
-    id_participante: number,
-    id_cuestionario: number
-  ) => {
-    setLoadingAsistencia((prev) => ({ ...prev, [id_participante]: true }));
-    try {
-      await axiosInstance.post(
-        `/participante-evento/asistencia/${id_participante}/${id_cuestionario}`
-      );
-
-      toast.success('Asistencia confirmada');
-      // Actualiza lista
-      await handleOnSelect(id_cuestionario);
-    } catch (error) {
-      toast.error('Error al confirmar asistencia');
-      console.error(error);
-    } finally {
-      setLoadingAsistencia((prev) => ({ ...prev, [id_participante]: false }));
-    }
-  };
-
-  const participantesFiltrados = participantes.filter((p) =>
-    p.participante.correo.toLowerCase().includes(busquedaCorreo.toLowerCase())
-  );
-
-  return (
-    <div>
-      <Select
-        label="Selecciona un evento"
-        options={eventos.map((evento) => ({
-          value: evento.id_cuestionario,
-          label: `${evento.evento.nombre_evento} - ${evento.nombre_form}`,
-        }))}
-        onChange={(e) => {
-          const id = Number(e?.target?.value ?? e);
-          if (!isNaN(id)) handleOnSelect(id);
-        }}
-        placeholder="Selecciona un evento"
-      />
-      {participantes.length > 0 && (
-        <>
-          <Input
-            label="Buscar por correo"
-            placeholder="ejemplo@correo.com"
-            value={busquedaCorreo}
-            onChange={(e) => setBusquedaCorreo(e.target.value)}
-          />
-
-          <div className="mt-4">
-            <Table
-              headers={headers}
-              data={participantesFiltrados}
-              rowKey={(row) => row.id_participante}
-            />
-          </div>
-        </>
-      )}
-      {participantes.length === 0 && (
-        <div className="alert alert-warning mt-4">
-          No hay participantes registrados para este evento.
-        </div>
-      )}
-    </div>
-  );
-}
diff --git a/src/app/(admins)/staff/page.tsx b/src/app/(admins)/staff/page.tsx
deleted file mode 100644
index 6aa1277..0000000
--- a/src/app/(admins)/staff/page.tsx
+++ /dev/null
@@ -1,144 +0,0 @@
-'use client';
-
-import React, { useState } from 'react';
-import dynamic from 'next/dynamic';
-import { Scanner } from '@yudiel/react-qr-scanner';
-import Button from '@/components/button';
-import axiosInstance from '@/utils/api-config';
-import toast from 'react-hot-toast';
-
-const Modal = dynamic(() => import('@/components/modal'), { ssr: false });
-
-export default function Page() {
-  const [scannedData, setScannedData] = useState<{
-    id_participante: number;
-    id_cuestionario: number;
-  } | null>(null);
-
-  const [showModal, setShowModal] = useState(false);
-  const [enableScan, setEnableScan] = useState(true);
-  const [statusMessage, setStatusMessage] = useState('');
-
-  const [participante, setParticipante] = useState('');
-
-  const handleScan = async (rawValue: string) => {
-    console.log('QR Escaneado:', rawValue);
-    if (!enableScan) return;
-
-    try {
-      const data = JSON.parse(rawValue);
-      if (data.id_participante && data.id_cuestionario) {
-        try {
-          const response = await axiosInstance.get(
-            `/participante-evento/${data.id_participante}/${data.id_cuestionario}`
-          );
-
-          setParticipante(response.data.participante.correo);
-          setScannedData({
-            id_participante: data.id_participante,
-            id_cuestionario: data.id_cuestionario,
-          });
-          setShowModal(true);
-          setEnableScan(false);
-        } catch (err) {
-          console.warn('Participante no registrado en el cuestionario:', err);
-          setStatusMessage(
-            '❌ El participante no está registrado en este evento.'
-          );
-        }
-      } else {
-        setStatusMessage('⚠️ El QR no contiene los campos requeridos');
-      }
-    } catch (err) {
-      console.error('QR malformado:', err);
-      setStatusMessage('❌ Error al leer el QR: formato inválido');
-    }
-  };
-
-  const handleConfirm = async () => {
-    if (!scannedData) return;
-
-    try {
-      const response = await axiosInstance.post(
-        `/participante-evento/asistencia/${scannedData.id_participante}/${scannedData.id_cuestionario}`
-      );
-
-      console.log('Asistencia registrada:', response.data);
-      toast.success('✅ Asistencia registrada correctamente');
-    } catch (err) {
-      console.error('Error en la petición:', err);
-      setStatusMessage('❌ Error de red al registrar asistencia');
-    }
-
-    setShowModal(false);
-    setEnableScan(true);
-    setScannedData(null);
-  };
-
-  return (
-    <main className="container flex-grow-1 d-flex flex-column align-items-center justify-content-center">
-      <h1 className="mb-4">Lectura de QRs</h1>
-
-      {enableScan ? (
-        <>
-          <div style={{ width: '100%', maxWidth: '400px' }}>
-            <Scanner
-              onScan={(codes) => {
-                if (codes.length > 0) {
-                  handleScan(codes[0].rawValue);
-                }
-              }}
-              onError={(err) => console.error('QR Error:', err)}
-              constraints={{ facingMode: 'environment' }}
-            />
-          </div>
-          <Button
-            onClick={() => setEnableScan(false)}
-            variant="outline-danger"
-            className="mt-3"
-          >
-            Detener cámara
-          </Button>
-        </>
-      ) : (
-        <>
-          <p className="text-muted mb-3">La cámara está detenida.</p>
-          <Button onClick={() => setEnableScan(true)} variant="outline-primary">
-            Activar cámara
-          </Button>
-        </>
-      )}
-
-      {statusMessage && <p className="mt-3">{statusMessage}</p>}
-
-      <Modal
-        isVisible={showModal}
-        size="md"
-        onClose={() => {
-          setShowModal(false);
-          setEnableScan(true);
-          setScannedData(null);
-        }}
-        closeButton
-        className={{
-          content: 'p-3',
-          body: 'text-center',
-        }}
-      >
-        <h5 className="mb-3">Datos escaneados</h5>
-        {scannedData ? (
-          <>
-            <p>
-              <strong>Participante:</strong> {participante}
-            </p>
-            <Button variant="success" onClick={handleConfirm}>
-              Confirmar lectura
-            </Button>
-          </>
-        ) : (
-          <p>QR inválido</p>
-        )}
-      </Modal>
-    </main>
-  );
-}
diff --git a/src/app/(admins)/administrador/evento/[id_evento]/[id_cuestionario]/page.tsx b/src/app/(admins)/user/evento/[id_evento]/formulario/[id_cuestionario]/page.tsx
similarity index 91%
rename from src/app/(admins)/administrador/evento/[id_evento]/[id_cuestionario]/page.tsx
rename to src/app/(admins)/user/evento/[id_evento]/formulario/[id_cuestionario]/page.tsx
index c486950..78f4611 100644
--- a/src/app/(admins)/administrador/evento/[id_evento]/[id_cuestionario]/page.tsx
+++ b/src/app/(admins)/user/evento/[id_evento]/formulario/[id_cuestionario]/page.tsx
@@ -1,4 +1,5 @@
 'use client';
+import Breadcrumb from '@/components/breadcrumb';
 import SimpleInput from '@/components/input';
 import Table, { Header } from '@/components/table';
 import EditFormulario from '@/containers/edit-formulario';
@@ -6,10 +7,10 @@ import { useGetApi } from '@/hooks/use-get-api';
 import { GetCuestionario } from '@/types/cuestionario';
 import { ParticipacionEvento } from '@/types/participante-evento';
 import axiosInstance from '@/utils/api-config';
-import Link from 'next/link';
 import { useParams } from 'next/navigation';
 import React, { useEffect } from 'react';
 import toast from 'react-hot-toast';
+import { useEvento } from '@/context/evento';
 
 type Params = {
   id_evento: string;
@@ -18,6 +19,7 @@ type Params = {
 
 export default function Page() {
   const params = useParams<Params>();
+  const { evento } = useEvento();
 
   const [cuestionario, setCuestionario] =
     React.useState<GetCuestionario | null>(null);
@@ -140,21 +142,23 @@ export default function Page() {
       p.participante.correo.toLowerCase().includes(busquedaCorreo.toLowerCase())
     );
 
+  const breadcrumbItems = [
+    { label: 'Inicio', href: '/user/eventos' },
+    {
+      label: evento?.nombre_evento || 'Evento',
+      href: `/user/evento/${params.id_evento}`,
+    },
+    { label: cuestionario?.nombre_form || 'Formulario' },
+  ];
+
   return (
     <div className="my-4">
-      <Link
-        href={`/administrador/evento/${params.id_evento}`}
-        className="btn btn-link mb-3"
-      >
-        <i className="bi bi-arrow-left me-2"></i>
-        Volver
-      </Link>
-
-      <h2 className="mb-4">Formulario</h2>
+      <Breadcrumb items={breadcrumbItems} />
 
       {cuestionario && (
         <EditFormulario
           cuestionario={cuestionario}
+          evento={evento}
           handleChange={handleChange}
           handleOnChange={handleCuestionarioActualizado}
         />
diff --git a/src/app/(admins)/user/evento/[id_evento]/formularios/crear/page.tsx b/src/app/(admins)/user/evento/[id_evento]/formularios/crear/page.tsx
new file mode 100644
index 0000000..f8fafba
--- /dev/null
+++ b/src/app/(admins)/user/evento/[id_evento]/formularios/crear/page.tsx
@@ -0,0 +1,297 @@
+'use client';
+import { plantillasDisponibles } from '@/data/plantillas';
+import { FormularioCreacion } from '@/types/create-formulario';
+import Image from 'next/image';
+import React, { useState } from 'react';
+import CreateFormulario from '@/containers/create-formulario';
+import FormularioCardPreview from '@/components/formulario/formulario-card-preview';
+import Button from '@/components/button';
+import Breadcrumb from '@/components/breadcrumb';
+import { useEvento } from '@/context/evento';
+import { useParams, useRouter } from 'next/navigation';
+import axiosInstance from '@/utils/api-config';
+import { getAxiosError } from '@/utils/errors-utils';
+import toast from 'react-hot-toast';
+import { useGetApi } from '@/hooks/use-get-api';
+import { TipoEvento } from '@/types/evento';
+
+type Params = {
+  id_evento: string;
+};
+
+export default function Page() {
+  const params = useParams<Params>();
+  const router = useRouter();
+  const { evento, refetch } = useEvento();
+  const [datosFormulario, setDatosFormulario] =
+    useState<FormularioCreacion | null>(null);
+  const { data: tipo_eventos } = useGetApi<TipoEvento[]>(`/tipo-evento`);
+
+  const handleSeleccionarPlantilla = (plantillaId: string) => {
+    const seleccionada = plantillasDisponibles.find(
+      (p) => p.id === plantillaId
+    );
+    if (seleccionada && evento) {
+      // Crear una copia de los datos de la plantilla
+      const datosPlantilla = { ...seleccionada.datos };
+
+      // Ajustar las fechas para que estén dentro del rango del evento
+      const fechaInicioEvento = new Date(evento.fecha_inicio);
+      const fechaFinEvento = new Date(evento.fecha_fin);
+
+      // Formatear las fechas para inputs datetime-local (YYYY-MM-DDTHH:MM)
+      const formatoFechaInput = (fecha: Date) => {
+        return fecha.toISOString().slice(0, 16);
+      };
+
+      // Establecer fecha de inicio del formulario igual a la del evento
+      datosPlantilla.fecha_inicio = formatoFechaInput(fechaInicioEvento);
+
+      // Establecer fecha de fin del formulario igual a la del evento
+      datosPlantilla.fecha_fin = formatoFechaInput(fechaFinEvento);
+
+      setDatosFormulario(datosPlantilla);
+      console.log('Plantilla seleccionada:', seleccionada);
+      console.log('Fechas ajustadas al evento:', {
+        inicio: datosPlantilla.fecha_inicio,
+        fin: datosPlantilla.fecha_fin,
+      });
+    } else if (seleccionada) {
+      // Si no hay evento disponible, usar las fechas originales de la plantilla
+      setDatosFormulario(seleccionada.datos);
+      console.log(
+        'Plantilla seleccionada (sin ajuste de fechas):',
+        seleccionada
+      );
+    }
+  };
+
+  const breadcrumbItems = [
+    { label: 'Inicio', href: '/user/eventos' },
+    {
+      label: evento?.nombre_evento || 'Evento',
+      href: `/user/evento/${params.id_evento}`,
+    },
+    { label: 'Crear formulario' },
+  ];
+
+  const handleCrearEvento = async () => {
+    if (!datosFormulario || !evento) {
+      toast.error('Faltan datos para crear el formulario');
+      return;
+    }
+
+    // Validar fechas del formulario respecto al evento
+    const fechaInicioFormulario = new Date(datosFormulario.fecha_inicio);
+    const fechaFinFormulario = new Date(datosFormulario.fecha_fin);
+    const fechaInicioEvento = new Date(evento.fecha_inicio);
+    const fechaFinEvento = new Date(evento.fecha_fin);
+
+    // Convertir a solo fecha (sin hora) para comparación
+    const fechaInicioFormularioSoloFecha = new Date(
+      fechaInicioFormulario.getFullYear(),
+      fechaInicioFormulario.getMonth(),
+      fechaInicioFormulario.getDate()
+    );
+    const fechaFinFormularioSoloFecha = new Date(
+      fechaFinFormulario.getFullYear(),
+      fechaFinFormulario.getMonth(),
+      fechaFinFormulario.getDate()
+    );
+    const fechaInicioEventoSoloFecha = new Date(
+      fechaInicioEvento.getFullYear(),
+      fechaInicioEvento.getMonth(),
+      fechaInicioEvento.getDate()
+    );
+    const fechaFinEventoSoloFecha = new Date(
+      fechaFinEvento.getFullYear(),
+      fechaFinEvento.getMonth(),
+      fechaFinEvento.getDate()
+    );
+
+    console.log('Fechas del formulario:', {
+      inicio: fechaInicioFormulario,
+      fin: fechaFinFormulario,
+    });
+    console.log('Fechas del evento:', {
+      inicio: fechaInicioEvento,
+      fin: fechaFinEvento,
+    });
+
+    if (fechaInicioFormularioSoloFecha < fechaInicioEventoSoloFecha) {
+      toast.error(
+        'La fecha de inicio del formulario debe ser posterior o igual a la fecha de inicio del evento'
+      );
+      return;
+    }
+
+    if (fechaFinFormularioSoloFecha > fechaFinEventoSoloFecha) {
+      toast.error(
+        'La fecha de fin del formulario debe ser anterior o igual a la fecha de fin del evento'
+      );
+      return;
+    }
+
+    if (fechaInicioFormulario > fechaFinFormulario) {
+      toast.error(
+        'La fecha de inicio del formulario debe ser anterior a la fecha de fin'
+      );
+      return;
+    }
+
+    try {
+      const res = await axiosInstance.post(`/cuestionario`, {
+        id_evento: evento?.id_evento || params.id_evento,
+        ...datosFormulario,
+      });
+      console.log('Formulario creado:', res.data);
+      refetch();
+      toast.success('Formulario creado exitosamente');
+      router.push(`/user/evento/${params.id_evento}`);
+    } catch (error) {
+      const msg = getAxiosError(error);
+      toast.error(msg.message || 'Error al crear el formulario');
+    }
+  };
+
+  return (
+    <div className="container-fluid my-4">
+      <Breadcrumb items={breadcrumbItems} />
+
+      {/* Header */}
+      <div className="row mb-4">
+        <div className="col-12">
+          <div className="p-4 border rounded bg-light">
+            <h2 className="mb-2">Creación de formulario</h2>
+            <p className="mb-0 text-muted">
+              Esta sección te permite crear y configurar sub-eventos en forma de
+              formularios asociados al evento. Selecciona una plantilla
+              compatible, ajusta los campos necesarios y publícalo para
+              habilitar el registro, encuestas o confirmaciones dentro de este
+              evento.
+            </p>
+          </div>
+        </div>
+      </div>
+
+      {!datosFormulario && (
+        <div className="border p-3 rounded my-4">
+          <h2 className="h5 fw-bold mb-2">
+            Selecciona una plantilla para el formulario:
+          </h2>
+          <p className="text-secondary small lh-sm">
+            Elige una de las plantillas disponibles para crear tu formulario de
+            registro.
+            <br />
+            Estas plantillas están diseñadas para garantizar la correcta
+            integración con el sistema, permitiendo que los datos se obtengan y
+            se prellenan automáticamente de forma precisa.
+            <br />
+            <span className="text-danger fw-semibold">
+              Para asegurar el funcionamiento óptimo del prellenado, modifica la
+              estructura solo si es necesario.
+            </span>
+          </p>
+
+          <div className="d-flex gap-4 flex-wrap">
+            {plantillasDisponibles.map((plantilla) => (
+              <div
+                className="mb-3 cursor-pointer"
+                key={plantilla.id}
+                onClick={() => handleSeleccionarPlantilla(plantilla.id)}
+              >
+                <div className="text-center">
+                  <Image
+                    src={plantilla.imagen}
+                    width={200}
+                    height={200}
+                    alt={`Plantilla de formulario ${plantilla.nombre}`}
+                    className="img-fluid rounded shadow-sm"
+                  />
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+      )}
+
+      {datosFormulario && (
+        <>
+          <div className="row">
+            {/* Columna Izquierda - Formulario */}
+            <div className="col-xl-7 col-lg-6">
+              <div className="pe-lg-4">
+                {(() => {
+                  const formularioEditor = CreateFormulario({
+                    formulario: datosFormulario,
+                    onChange: (nuevo) => setDatosFormulario({ ...nuevo }),
+                    evento: evento ? evento : undefined,
+                    tipo_eventos: tipo_eventos?.map((tipo) => ({
+                      value: tipo.id_tipo_evento,
+                      label: tipo.tipo_evento,
+                    })),
+                  });
+                  return formularioEditor.informacionBasica();
+                })()}
+
+                {/* Botón de crear */}
+                <div className="d-flex justify-content-end mt-4">
+                  <Button icon="save" onClick={handleCrearEvento}>
+                    Crear Formulario
+                  </Button>
+                </div>
+              </div>
+            </div>
+
+            {/* Columna Derecha - Preview */}
+            <div className="col-xl-5 col-lg-6">
+              <div className="ps-lg-4">
+                <div className="sticky-top" style={{ top: '20px' }}>
+                  <h4 className="mb-3 d-none d-lg-block">
+                    Preview del Formulario
+                  </h4>
+                  <div className="d-lg-none mt-4">
+                    <h4 className="mb-3">Preview del Formulario</h4>
+                  </div>
+                  <FormularioCardPreview
+                    formulario={datosFormulario}
+                    evento={evento || undefined}
+                  />
+
+                  {/* Alert de imagen del evento */}
+                  {evento?.banner && (
+                    <div className="alert alert-info mt-3">
+                      <i className="bi bi-info-circle-fill me-2"></i>
+                      <strong>Nota:</strong> Al no proporcionar una imagen para
+                      este formulario, se usará automáticamente la imagen del
+                      evento.
+                    </div>
+                  )}
+
+                  <div className="alert alert-warning text-center mt-3">
+                    <strong>Vista previa:</strong> Así se verá tu formulario en
+                    las listas de formularios.
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          {/* Secciones y preguntas - Ancho completo */}
+          <div className="row mt-5">
+            <div className="col-12">
+              {(() => {
+                const formularioEditor = CreateFormulario({
+                  formulario: datosFormulario,
+                  onChange: (nuevo) => setDatosFormulario({ ...nuevo }),
+                  evento: evento ? evento : undefined,
+                });
+                return formularioEditor.seccionesYPreguntas();
+              })()}
+            </div>
+          </div>
+        </>
+      )}
+    </div>
+  );
+}
diff --git a/src/app/(admins)/user/evento/[id_evento]/layout.tsx b/src/app/(admins)/user/evento/[id_evento]/layout.tsx
new file mode 100644
index 0000000..b82638e
--- /dev/null
+++ b/src/app/(admins)/user/evento/[id_evento]/layout.tsx
@@ -0,0 +1,20 @@
+'use client';
+import { EventoProvider } from '@/context/evento/evento-context';
+import { useParams } from 'next/navigation';
+import React from 'react';
+
+type Params = {
+  id_evento: string;
+};
+
+export default function Layout({ children }: { children: React.ReactNode }) {
+  const params = useParams<Params>();
+
+  if (!params.id_evento) {
+    return <div>Error: ID de evento no encontrado</div>;
+  }
+
+  return (
+    <EventoProvider id_evento={params.id_evento}>{children}</EventoProvider>
+  );
+}
diff --git a/src/app/(admins)/user/evento/[id_evento]/page.tsx b/src/app/(admins)/user/evento/[id_evento]/page.tsx
new file mode 100644
index 0000000..744cc67
--- /dev/null
+++ b/src/app/(admins)/user/evento/[id_evento]/page.tsx
@@ -0,0 +1,132 @@
+'use client';
+import EditEvento from '@/containers/edit-evento';
+import { GetEventoWithCuestionariosWithCupos } from '@/types/evento';
+import { useParams, useRouter } from 'next/navigation';
+import React, { useState } from 'react';
+import { CreateEventoType } from '@/types/create-evento';
+import { useEvento } from '@/context/evento';
+import axiosInstance from '@/utils/api-config';
+import toast from 'react-hot-toast';
+import { downloadFile } from '@/utils/downloas-utils';
+import Breadcrumb from '@/components/breadcrumb';
+import Button from '@/components/button';
+import FormularioCardAdmin from '@/components/formulario/formulario-card-admin';
+
+type Params = {
+  id_evento: string;
+};
+
+export default function Page() {
+  const router = useRouter();
+  const params = useParams<Params>();
+  const { evento, loading, error, updateEvento, setEventoData } = useEvento();
+
+  const [loadingStates, setLoadingStates] = useState<Record<number, boolean>>(
+    {}
+  );
+
+  const handleChange = (
+    field: keyof CreateEventoType,
+    value: string | Date
+  ) => {
+    // Update the evento state directly using the context
+    updateEvento({ [field]: value });
+  };
+
+  const handleEventoActualizado = (
+    eventoActualizado: GetEventoWithCuestionariosWithCupos
+  ) => {
+    // Set the complete updated evento data
+    setEventoData(eventoActualizado);
+  };
+
+  if (loading) return <p>Cargando...</p>;
+  if (error) return <p>Error: {error}</p>;
+  if (!evento) return <p>No se encontró el evento</p>;
+
+  const handleDownload = async (
+    id_cuestionario: number,
+    nombre_formulario: string,
+    nombre_evento: string
+  ) => {
+    setLoadingStates((prev) => ({ ...prev, [id_cuestionario]: true }));
+
+    try {
+      const res = await axiosInstance.get(
+        `/cuestionario-respondido/reporte-respuestas/${id_cuestionario}`,
+        {
+          responseType: 'blob',
+        }
+      );
+
+      downloadFile(res.data, `${nombre_evento} - ${nombre_formulario}`, 'csv');
+    } catch (error) {
+      console.error('Error al descargar el archivo:', error);
+      toast.error('Error al descargar el archivo');
+    } finally {
+      setLoadingStates((prev) => ({ ...prev, [id_cuestionario]: false }));
+    }
+  };
+
+  return (
+    <div className="my-4">
+      <Breadcrumb
+        items={[
+          { label: 'Eventos', href: '/user/eventos' },
+          {
+            label: `${evento.nombre_evento}`,
+            href: `/user/evento/${params.id_evento}`,
+          },
+        ]}
+      />
+
+      <EditEvento
+        evento={evento}
+        handleChange={handleChange}
+        handleOnChange={handleEventoActualizado}
+      />
+
+      <div className="p-4 border rounded bg-light">
+        <div className="d-flex justify-content-between align-items-center">
+          <div>
+            <h2 className="mb-0">Formularios del evento</h2>
+            <p className="mb-0 text-muted">
+              Aquí puedes ver y gestionar los formularios asociados a este
+              evento.
+            </p>
+          </div>
+          <Button
+            icon="plus"
+            variant="primary"
+            onClick={() =>
+              router.push(`/user/evento/${params.id_evento}/formularios/crear`)
+            }
+          >
+            Crear nuevo formulario
+          </Button>
+        </div>
+      </div>
+
+      {evento?.cuestionarios && evento.cuestionarios.length > 0 && (
+        <div className="row mt-3">
+          {evento.cuestionarios.map((item, key) => {
+            const fadeClass = `delay-${(key % 5) + 1}`;
+            return (
+              <div
+                className={`col-md-6 col-lg-4 my-4 fade-in-up-bounce ${fadeClass}`}
+                key={key}
+              >
+                <FormularioCardAdmin
+                  cuestionario={item}
+                  evento={evento}
+                  handleDownload={handleDownload}
+                  disabled={loadingStates[item.id_cuestionario] || false}
+                />
+              </div>
+            );
+          })}
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/src/app/(admins)/user/eventos/crear/page.tsx b/src/app/(admins)/user/eventos/crear/page.tsx
new file mode 100644
index 0000000..996811c
--- /dev/null
+++ b/src/app/(admins)/user/eventos/crear/page.tsx
@@ -0,0 +1,128 @@
+'use client';
+
+import React, { useState } from 'react';
+import { CreateEventoType } from '@/types/create-evento';
+import CreateEvento from '@/containers/create-evento';
+import EventoCardPreview from '@/components/evento/evento-card-preview';
+import axiosInstance from '@/utils/api-config';
+import toast from 'react-hot-toast';
+import { useRouter } from 'next/navigation';
+import { getAxiosError } from '@/utils/errors-utils';
+import Button from '@/components/button';
+
+export default function Page() {
+  const [eventoBanner, setEventoBanner] = useState<File | null>(null);
+  const [evento, setEvento] = useState<CreateEventoType>({
+    tipo_evento: '',
+    nombre_evento: '',
+    descripcion_evento: '',
+    fecha_inicio: new Date(),
+    fecha_fin: new Date(),
+  });
+  const router = useRouter();
+
+  const handleChange = (
+    field: keyof CreateEventoType,
+    value: string | Date
+  ) => {
+    setEvento((prev) => ({
+      ...prev,
+      [field]: value,
+    }));
+  };
+
+  const handleBannerChange = (file: File | null) => {
+    setEventoBanner(file);
+  };
+
+  const handleCrearEvento = async () => {
+    try {
+      const createEvento = await axiosInstance.post('/evento', evento);
+
+      if (createEvento) {
+        const formData = new FormData();
+        if (eventoBanner) {
+          formData.append('banner', eventoBanner);
+          const bannercreated = await axiosInstance.post(
+            `/evento/${createEvento.data.id_evento}/banner`,
+            formData,
+            {
+              headers: {
+                'Content-Type': 'multipart/form-data',
+              },
+            }
+          );
+          console.log('Banner creado:', bannercreated.data);
+        }
+      }
+
+      toast.success('Evento y formulario creados exitosamente');
+      router.push(
+        `/user/evento/${createEvento.data.id_evento}/formularios/crear`
+      );
+    } catch (error) {
+      const msg = getAxiosError(error);
+      toast.error(
+        `Error al crear el evento o formulario: ${
+          msg.message || 'Error desconocido'
+        }`
+      );
+      console.error('Error al crear evento y formulario:', error);
+    }
+  };
+
+  return (
+    <div className="container-fluid my-4">
+      {/* Header */}
+      <div className="row mb-4">
+        <div className="col-12">
+          <div className="p-4 border rounded bg-light">
+            <h2 className="mb-2">Creación del Evento</h2>
+            <p className="mb-0 text-muted">
+              Completa la siguiente información para describir los detalles
+              generales del evento. Presiona siguiente para continuar con la
+              creación del formulario.
+            </p>
+          </div>
+        </div>
+      </div>
+
+      <div className="row">
+        {/* Columna Izquierda - Formulario */}
+        <div className="col-xl-7 col-lg-6">
+          <div className="pe-lg-4">
+            <CreateEvento
+              evento={evento}
+              handleChange={handleChange}
+              handleBannerChange={handleBannerChange}
+            />
+
+            {/* Botón de guardar */}
+            <div className="d-flex justify-content-end">
+              <Button icon="arrow-right" onClick={handleCrearEvento}>
+                Siguiente
+              </Button>
+            </div>
+          </div>
+        </div>
+
+        {/* Columna Derecha - Preview */}
+        <div className="col-xl-5 col-lg-6">
+          <div className="ps-lg-4">
+            <div className="sticky-top" style={{ top: '20px' }}>
+              <h4 className="mb-3 d-none d-lg-block">Preview del Evento</h4>
+              <div className="d-lg-none mt-4">
+                <h4 className="mb-3">Preview del Evento</h4>
+              </div>
+              <EventoCardPreview evento={evento} eventoBanner={eventoBanner} />
+              <div className="alert alert-info text-center">
+                <strong>Nota:</strong> Esta preview es la que veras en tu ruta
+                de eventos y en la ruta publica de eventos
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/src/app/(admins)/user/eventos/page.tsx b/src/app/(admins)/user/eventos/page.tsx
new file mode 100644
index 0000000..06c370d
--- /dev/null
+++ b/src/app/(admins)/user/eventos/page.tsx
@@ -0,0 +1,101 @@
+'use client';
+
+import EventoCardAdmin from '@/components/evento/evento-card-admin';
+import FormularioCardAdmin from '@/components/formulario/formulario-card-admin';
+import { useGetApi } from '@/hooks/use-get-api';
+import { GetEventoWithCuestionariosWithCupos } from '@/types/evento';
+import axiosInstance from '@/utils/api-config';
+import { downloadFile } from '@/utils/downloas-utils';
+import React, { useState } from 'react';
+import toast from 'react-hot-toast';
+
+export default function Page() {
+  const [loadingStates, setLoadingStates] = useState<Record<number, boolean>>(
+    {}
+  );
+  const {
+    loading,
+    data: activos,
+    error,
+  } = useGetApi<GetEventoWithCuestionariosWithCupos[]>(
+    '/evento/activos/cuestionarios'
+  );
+  const { data: recientes } = useGetApi<GetEventoWithCuestionariosWithCupos[]>(
+    '/evento/recientes/cuestionarios'
+  );
+
+  if (loading) return <div>Cargando formularios...</div>;
+  if (error) return <div className="alert alert-danger">{error.message}</div>;
+
+  const handleDownload = async (
+    id_cuestionario: number,
+    nombre_formulario: string,
+    nombre_evento: string
+  ) => {
+    setLoadingStates((prev) => ({ ...prev, [id_cuestionario]: true }));
+
+    try {
+      const res = await axiosInstance.get(
+        `/cuestionario-respondido/reporte-respuestas/${id_cuestionario}`,
+        {
+          responseType: 'blob',
+        }
+      );
+
+      downloadFile(res.data, `${nombre_evento} - ${nombre_formulario}`, 'csv');
+    } catch (error) {
+      console.error('Error al descargar el archivo:', error);
+      toast.error('Error al descargar el archivo');
+    } finally {
+      setLoadingStates((prev) => ({ ...prev, [id_cuestionario]: false }));
+    }
+  };
+
+  return (
+    <div className="my-4">
+      {loading && <div>Cargando...</div>}
+      {activos && activos.length > 0 && (
+        <div className="row">
+          <h1>Eventos Activos</h1>
+          {activos.map((evento, key) => {
+            const fadeClass = `delay-${(key % 5) + 1}`;
+            return (
+              <div
+                className={`col-md-6 col-lg-4 my-4 fade-in-up-bounce ${fadeClass}`}
+                key={key}
+              >
+                <EventoCardAdmin evento={evento} />
+              </div>
+            );
+          })}
+        </div>
+      )}
+      {recientes && recientes.length > 0 && (
+        <div className="row">
+          <h2>Formularios Recientes</h2>
+          <p className="text-muted">Eventos de los ultimos 30 días.</p>
+          {recientes.map((evento) =>
+            evento.cuestionarios.map((cuestionario, cuestionarioIndex) => {
+              const fadeClass = `delay-${(cuestionarioIndex % 5) + 1}`;
+              return (
+                <div
+                  className={`col-md-6 col-lg-4 my-4 fade-in-up-bounce ${fadeClass}`}
+                  key={`${evento.id_evento}-${cuestionario.id_cuestionario}`}
+                >
+                  <FormularioCardAdmin
+                    cuestionario={cuestionario}
+                    evento={evento}
+                    handleDownload={handleDownload}
+                    disabled={
+                      loadingStates[cuestionario.id_cuestionario] || false
+                    }
+                  />
+                </div>
+              );
+            })
+          )}
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/src/app/(admins)/administrador/layout.tsx b/src/app/(admins)/user/layout.tsx
similarity index 81%
rename from src/app/(admins)/administrador/layout.tsx
rename to src/app/(admins)/user/layout.tsx
index e98b8ef..239525a 100644
--- a/src/app/(admins)/administrador/layout.tsx
+++ b/src/app/(admins)/user/layout.tsx
@@ -1,11 +1,13 @@
 import Footer from '@/components/layout/footer';
 import Header from '@/components/layout/header';
+import Navbar from '@/components/navbar';
 import React from 'react';
 
 export default function Layout({ children }: { children: React.ReactNode }) {
   return (
     <div className="d-flex flex-column min-vh-100">
-      <Header small/>
+      <Header small />
+      <Navbar />
       <main className="container flex-grow-1">{children}</main>
       <Footer />
     </div>
diff --git a/src/app/(admins)/administrador/profesores/page.tsx b/src/app/(admins)/user/profesores/page.tsx
similarity index 100%
rename from src/app/(admins)/administrador/profesores/page.tsx
rename to src/app/(admins)/user/profesores/page.tsx
diff --git a/src/app/(admins)/user/qr/page.tsx b/src/app/(admins)/user/qr/page.tsx
new file mode 100644
index 0000000..d29168d
--- /dev/null
+++ b/src/app/(admins)/user/qr/page.tsx
@@ -0,0 +1,277 @@
+'use client';
+
+import React, { useState } from 'react';
+import dynamic from 'next/dynamic';
+import { Scanner } from '@yudiel/react-qr-scanner';
+import Button from '@/components/button';
+import axiosInstance from '@/utils/api-config';
+import toast from 'react-hot-toast';
+
+const Modal = dynamic(() => import('@/components/modal'), { ssr: false });
+
+export default function Page() {
+  const [scannedData, setScannedData] = useState<{
+    id_participante: number;
+    id_cuestionario: number;
+  } | null>(null);
+
+  const [showModal, setShowModal] = useState(false);
+  const [enableScan, setEnableScan] = useState(true);
+  const [statusMessage, setStatusMessage] = useState('');
+
+  const [participante, setParticipante] = useState('');
+
+  const handleScan = async (rawValue: string) => {
+    console.log('QR Escaneado:', rawValue);
+    if (!enableScan) return;
+
+    try {
+      const data = JSON.parse(rawValue);
+      if (data.id_participante && data.id_cuestionario) {
+        try {
+          const response = await axiosInstance.get(
+            `/participante-evento/${data.id_participante}/${data.id_cuestionario}`
+          );
+
+          setParticipante(response.data.participante.correo);
+          setScannedData({
+            id_participante: data.id_participante,
+            id_cuestionario: data.id_cuestionario,
+          });
+          setShowModal(true);
+          setEnableScan(false);
+        } catch (err) {
+          console.warn('Participante no registrado en el cuestionario:', err);
+          setStatusMessage(
+            '❌ El participante no está registrado en este evento.'
+          );
+        }
+      } else {
+        setStatusMessage('⚠️ El QR no contiene los campos requeridos');
+      }
+    } catch (err) {
+      console.error('QR malformado:', err);
+      setStatusMessage('❌ Error al leer el QR: formato inválido');
+    }
+  };
+
+  const handleConfirm = async () => {
+    if (!scannedData) return;
+
+    try {
+      const response = await axiosInstance.post(
+        `/participante-evento/asistencia/${scannedData.id_participante}/${scannedData.id_cuestionario}`
+      );
+
+      console.log('Asistencia registrada:', response.data);
+      toast.success('✅ Asistencia registrada correctamente');
+    } catch (err) {
+      console.error('Error en la petición:', err);
+      setStatusMessage('❌ Error de red al registrar asistencia');
+    }
+
+    setShowModal(false);
+    setEnableScan(true);
+    setScannedData(null);
+  };
+
+  return (
+    <main className="container-fluid flex-grow-1 d-flex flex-column justify-content-center py-4">
+      <div className="row justify-content-center">
+        <div className="col-12 col-md-8 col-lg-6 col-xl-5">
+          <div className="card shadow border-0 rounded-3">
+            <div className="card-header bg-primary text-white text-center py-4 border-0">
+              <div className="mb-3">
+                <i className="bi bi-qr-code-scan display-4"></i>
+              </div>
+              <h2 className="mb-2 fw-bold">Registro de Asistencia</h2>
+              <p className="mb-0 opacity-75">
+                Escanea el código QR para registrar la asistencia
+              </p>
+            </div>
+
+            <div className="card-body p-4">
+              {enableScan ? (
+                <div className="text-center">
+                  <div className="mb-4 mx-auto position-relative d-inline-block">
+                    <div className="border border-3 border-primary rounded-3 p-3 bg-light">
+                      <Scanner
+                        onScan={(codes) => {
+                          if (codes.length > 0) {
+                            handleScan(codes[0].rawValue);
+                          }
+                        }}
+                        onError={(err) => console.error('QR Error:', err)}
+                        constraints={{ facingMode: 'environment' }}
+                        styles={{
+                          container: {
+                            width: '100%',
+                            maxWidth: '300px',
+                            borderRadius: '8px',
+                            overflow: 'hidden',
+                          },
+                        }}
+                      />
+                    </div>
+                  </div>
+
+                  <div className="mb-4">
+                    <div className="alert alert-info border-0 rounded-3 d-flex align-items-center">
+                      <i className="bi bi-info-circle-fill me-2"></i>
+                      <small>
+                        Mantén el código QR centrado en el marco de la cámara
+                      </small>
+                    </div>
+                  </div>
+
+                  <Button
+                    onClick={() => setEnableScan(false)}
+                    variant="outline-danger"
+                    className="px-4 py-2 rounded-pill"
+                  >
+                    <i className="bi bi-camera-video-off me-2"></i>
+                    Detener cámara
+                  </Button>
+                </div>
+              ) : (
+                <div className="text-center py-5">
+                  <div className="mb-4">
+                    <i
+                      className="bi bi-camera-video-off-fill text-muted"
+                      style={{ fontSize: '4rem' }}
+                    ></i>
+                  </div>
+                  <h4 className="text-muted mb-3">Cámara desactivada</h4>
+                  <p className="text-muted mb-4 lead">
+                    La cámara está detenida. Actívala para continuar escaneando
+                    códigos QR.
+                  </p>
+                  <Button
+                    onClick={() => setEnableScan(true)}
+                    variant="primary"
+                    className="px-4 py-2 rounded-pill"
+                  >
+                    <i className="bi bi-camera-video me-2"></i>
+                    Activar cámara
+                  </Button>
+                </div>
+              )}
+
+              {statusMessage && (
+                <div className="mt-4">
+                  <div
+                    className={`alert border-0 rounded-3 d-flex align-items-center ${
+                      statusMessage.includes('❌')
+                        ? 'alert-danger'
+                        : statusMessage.includes('⚠️')
+                        ? 'alert-warning'
+                        : 'alert-success'
+                    }`}
+                  >
+                    <div className="me-2">
+                      {statusMessage.includes('❌') && (
+                        <i className="bi bi-exclamation-triangle-fill"></i>
+                      )}
+                      {statusMessage.includes('⚠️') && (
+                        <i className="bi bi-exclamation-circle-fill"></i>
+                      )}
+                      {!statusMessage.includes('❌') &&
+                        !statusMessage.includes('⚠️') && (
+                          <i className="bi bi-check-circle-fill"></i>
+                        )}
+                    </div>
+                    <span>{statusMessage}</span>
+                  </div>
+                </div>
+              )}
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <Modal
+        isVisible={showModal}
+        size="md"
+        onClose={() => {
+          setShowModal(false);
+          setEnableScan(true);
+          setScannedData(null);
+        }}
+        closeButton
+        className={{
+          content: 'border-0 rounded-3',
+          body: 'text-center',
+        }}
+      >
+        <div className="modal-header bg-success text-white border-0 rounded-top-3">
+          <h5 className="modal-title mb-0 fw-bold">
+            <i className="bi bi-check-circle-fill me-2"></i>
+            QR Escaneado Correctamente
+          </h5>
+        </div>
+
+        <div className="modal-body p-4">
+          {scannedData ? (
+            <>
+              <div className="mb-4">
+                <div className="mb-3">
+                  <i
+                    className="bi bi-person-check-fill text-success"
+                    style={{ fontSize: '3rem' }}
+                  ></i>
+                </div>
+                <h5 className="mb-3 fw-semibold">
+                  Información del participante
+                </h5>
+                <div className="card bg-light border-0 rounded-3">
+                  <div className="card-body py-3">
+                    <div className="d-flex align-items-center justify-content-center">
+                      <i className="bi bi-envelope-fill text-primary me-2"></i>
+                      <strong className="me-2">Correo:</strong>
+                      <span className="text-primary fw-medium">
+                        {participante}
+                      </span>
+                    </div>
+                  </div>
+                </div>
+              </div>
+
+              <div className="d-grid gap-2 d-md-flex justify-content-center">
+                <Button
+                  variant="success"
+                  onClick={handleConfirm}
+                  className="px-4 py-2 rounded-pill fw-semibold"
+                >
+                  <i className="bi bi-check2 me-2"></i>
+                  Confirmar Asistencia
+                </Button>
+                <Button
+                  variant="outline-secondary"
+                  onClick={() => {
+                    setShowModal(false);
+                    setEnableScan(true);
+                    setScannedData(null);
+                  }}
+                  className="px-4 py-2 rounded-pill"
+                >
+                  <i className="bi bi-x-lg me-2"></i>
+                  Cancelar
+                </Button>
+              </div>
+            </>
+          ) : (
+            <div className="py-4">
+              <div className="mb-3">
+                <i
+                  className="bi bi-exclamation-triangle-fill text-warning"
+                  style={{ fontSize: '2.5rem' }}
+                ></i>
+              </div>
+              <h6 className="text-danger mb-0">QR inválido o malformado</h6>
+            </div>
+          )}
+        </div>
+      </Modal>
+    </main>
+  );
+}
diff --git a/src/app/(admins)/user/usuarios/page.tsx b/src/app/(admins)/user/usuarios/page.tsx
new file mode 100644
index 0000000..540c060
--- /dev/null
+++ b/src/app/(admins)/user/usuarios/page.tsx
@@ -0,0 +1,45 @@
+'use client';
+import Button from '@/components/button';
+import Table, { Header } from '@/components/table';
+import { useGetApi } from '@/hooks/use-get-api';
+import { Administrador } from '@/types/administradores';
+import React from 'react';
+
+export default function Page() {
+  const { data } = useGetApi<Administrador[]>('/administrador');
+
+  const headers: Header<Administrador>[] = [
+    { key: 'id_administrador', label: 'ID' },
+    { key: 'nombre_usuario', label: 'Nombre de Usuario' },
+    { key: 'correo', label: 'Correo' },
+    {
+      key: 'tipoUser',
+      render: (_, row) => row.tipoUser.tipo,
+      label: 'Tipo de Usuario',
+    },
+    {
+      key: 'tipoUser',
+      render: () => (
+        <div className="d-flex gap-2">
+          <Button className="w-100" disabled>
+            Editar
+          </Button>
+          <Button variant="danger" className="w-100" disabled>
+            Eliminar
+          </Button>
+        </div>
+      ),
+      label: 'Acciones',
+    },
+  ];
+
+  return (
+    <div>
+      <div className="d-flex justify-content-between align-items-center my-3">
+        <h1>Administradores</h1>
+        <Button variant="primary">Agregar Administrador</Button>
+      </div>
+      {data && <Table headers={headers} data={data} />}
+    </div>
+  );
+}
diff --git a/src/app/(auth)/login/administradores/page.tsx b/src/app/(auth)/login/administradores/page.tsx
deleted file mode 100644
index 7b582df..0000000
--- a/src/app/(auth)/login/administradores/page.tsx
+++ /dev/null
@@ -1,66 +0,0 @@
-'use client';
-import Button from '@/components/button';
-import Input from '@/components/input';
-import { useRouter } from 'next/navigation';
-import React, { useState } from 'react';
-import Cookies from 'js-cookie';
-
-export default function Page() {
-  const router = useRouter();
-  const [formData, setFormData] = useState({ username: '', password: '' });
-  const [error, setError] = useState('');
-
-  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    setFormData({
-      ...formData,
-      [e.target.name]: e.target.value,
-    });
-    setError('');
-  };
-
-  const handleOnSubmit = (e: React.FormEvent<HTMLFormElement>) => {
-    e.preventDefault();
-
-    const { username, password } = formData;
-
-    if (username === 'user-admin' && password === '@dm1nP@ss') {
-      Cookies.set('token', 'staff1');
-      router.push('/administrador');
-    } else {
-      setError('Usuario o contraseña incorrectos');
-    }
-  };
-
-  return (
-    <div className="d-flex flex-column justify-content-center align-items-center">
-      <h1 className="text-dorado">Iniciar sesión</h1>
-      <h2 className="text-azul">Administradores</h2>
-
-      <form className="w-300px" onSubmit={handleOnSubmit}>
-        <Input
-          name="username"
-          label="Usuario"
-          value={formData.username}
-          onChange={handleChange}
-        />
-        <Input
-          name="password"
-          type="password"
-          label="Contraseña"
-          value={formData.password}
-          onChange={handleChange}
-        />
-        {error && (
-          <div className="alert alert-danger text-center" role="alert">
-            {error}
-          </div>
-        )}
-        <div className="mb-3">
-          <Button className="w-100" type="submit">
-            Iniciar sesión
-          </Button>
-        </div>
-      </form>
-    </div>
-  );
-}
diff --git a/src/app/(auth)/login/page.tsx b/src/app/(auth)/login/page.tsx
new file mode 100644
index 0000000..aa355b9
--- /dev/null
+++ b/src/app/(auth)/login/page.tsx
@@ -0,0 +1,166 @@
+'use client';
+import SimpleInput from '@/components/input';
+import PasswordInput from '@/components/password';
+import React from 'react';
+import { useRouter } from 'next/navigation';
+import axiosInstance from '@/utils/api-config';
+
+export default function LoginForm() {
+  const router = useRouter();
+
+  const [loginData, setLoginData] = React.useState({
+    nombre_usuario: '',
+    password: '',
+  });
+
+  const [error, setError] = React.useState('');
+  const [isLoading, setIsLoading] = React.useState(false);
+
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const { name, value } = e.target;
+    setLoginData((prevData) => ({ ...prevData, [name]: value }));
+    // Clear error when user starts typing
+    if (error) setError('');
+  };
+
+  const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+    setIsLoading(true);
+    setError('');
+
+    try {
+      const response = await axiosInstance.post('/administrador/login', {
+        nombre_usuario: loginData.nombre_usuario,
+        password: loginData.password,
+      });
+
+      // Guardar el token en sessionStorage
+      if (response.data.token) {
+        sessionStorage.setItem('token', response.data.token);
+
+        // Opcional: guardar información adicional del usuario si viene en la respuesta
+        if (response.data.user) {
+          sessionStorage.setItem('user', JSON.stringify(response.data.user));
+        }
+
+        // Redireccionar al dashboard
+        router.push('/user/eventos');
+      } else {
+        setError('No se recibió token de autenticación');
+      }
+    } catch (error: unknown) {
+      console.error('Error en login:', error);
+
+      // Type guard para axios error
+      if (error && typeof error === 'object' && 'response' in error) {
+        const axiosError = error as {
+          response?: { status?: number; data?: { message?: string } };
+        };
+
+        if (axiosError.response?.status === 401) {
+          setError('Credenciales incorrectas');
+        } else if (axiosError.response?.data?.message) {
+          setError(axiosError.response.data.message);
+        } else {
+          setError('Error al iniciar sesión. Inténtalo de nuevo.');
+        }
+      } else {
+        setError('Error al iniciar sesión. Inténtalo de nuevo.');
+      }
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  return (
+    <div className="container my-5 my-md-0">
+      <div className="row justify-content-center">
+        <div className="col-xl-10">
+          <div className="card border-0">
+            <div className="card-body p-0">
+              <div className="row">
+                <div className="col-lg-6">
+                  <div className="p-5">
+                    <h3 className="fs-4 font-weight-bold text-azul mb-3 login">
+                      Iniciar sesión
+                    </h3>
+
+                    <h6 className="h5 mb-0">
+                      Bienvenido de vuelta al{' '}
+                      <span className="text-dorado">Sistema de Eventos</span>
+                    </h6>
+                    <p className="text-muted mt-2 mb-4">
+                      Ingresa tu correo electrónico y tu contraseña para acceder
+                      a tu cuenta.
+                    </p>
+
+                    {/* Error message */}
+                    {error && (
+                      <div className="alert alert-danger mb-4">{error}</div>
+                    )}
+
+                    <form onSubmit={handleSubmit}>
+                      <SimpleInput
+                        label="Nombre de usuario"
+                        type="text"
+                        id="nombre_usuario"
+                        name="nombre_usuario"
+                        value={loginData.nombre_usuario}
+                        onChange={handleChange}
+                        required
+                      />
+                      <PasswordInput
+                        label="Contraseña"
+                        id="password"
+                        name="password"
+                        value={loginData.password}
+                        onChange={handleChange}
+                        required
+                      />
+
+                      <div className="justify-content-between align-items-center d-flex">
+                        <button
+                          type="submit"
+                          className="btn btn-azul"
+                          disabled={isLoading}
+                        >
+                          {isLoading ? (
+                            <>
+                              <span
+                                className="spinner-border spinner-border-sm me-2"
+                                role="status"
+                                aria-hidden="true"
+                              ></span>
+                              Ingresando...
+                            </>
+                          ) : (
+                            'Ingresar'
+                          )}
+                        </button>
+                      </div>
+                    </form>
+                  </div>
+                </div>
+
+                <div className="col-lg-6 d-none d-lg-inline-block">
+                  <div className="position-relative h-100 p-2">
+                    <div
+                      style={{
+                        borderRadius: '0.5rem',
+                        backgroundImage: 'url(/assets/image.png)',
+                        backgroundSize: 'cover',
+                        backgroundPosition: 'center',
+                        height: '100%',
+                        width: '100%',
+                      }}
+                    ></div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/src/app/(auth)/login/staff/page.tsx b/src/app/(auth)/login/staff/page.tsx
deleted file mode 100644
index ee513ef..0000000
--- a/src/app/(auth)/login/staff/page.tsx
+++ /dev/null
@@ -1,62 +0,0 @@
-'use client';
-import Button from '@/components/button';
-import Input from '@/components/input';
-import { useRouter } from 'next/navigation';
-import React, { useState } from 'react';
-import Cookies from 'js-cookie';
-
-export default function Page() {
-  const router = useRouter();
-  const [formData, setFormData] = useState({ username: '', password: '' });
-  const [error, setError] = useState('');
-
-  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    setFormData({
-      ...formData,
-      [e.target.name]: e.target.value,
-    });
-    setError('');
-  };
-
-  const handleOnSubmit = (e: React.FormEvent<HTMLFormElement>) => {
-    e.preventDefault();
-
-    const { username, password } = formData;
-
-    if (username === 'staff1' && password === 'st@ffP@ss') {
-      Cookies.set('token', 'staff1');
-      router.push('/staff');
-    } else {
-      setError('Usuario o contraseña incorrectos');
-    }
-  };
-
-  return (
-    <div className='d-flex flex-column justify-content-center align-items-center'>
-      <h1 className='text-dorado'>Iniciar sesión</h1>
-      <h2 className='text-azul'>Staff</h2>
-
-      <form className='w-300px' onSubmit={handleOnSubmit}>
-        <Input
-          name='username'
-          label='Usuario'
-          value={formData.username}
-          onChange={handleChange}
-        />
-        <Input
-          name='password'
-          type='password'
-          label='Contraseña'
-          value={formData.password}
-          onChange={handleChange}
-        />
-        {error && <div className='alert alert-danger text-center' role='alert'>{error}</div>}
-        <div className='mb-3'>
-          <Button className='w-100' type='submit'>
-            Iniciar sesión
-          </Button>
-        </div>
-      </form>
-    </div>
-  );
-}
diff --git a/src/app/(public)/evento/[evento]/[cuestionario]/page.tsx b/src/app/(public)/evento/[evento]/[cuestionario]/page.tsx
new file mode 100644
index 0000000..b14afc0
--- /dev/null
+++ b/src/app/(public)/evento/[evento]/[cuestionario]/page.tsx
@@ -0,0 +1,70 @@
+// src/app/(public)/evento/[evento]/[cuestionario]/page.tsx
+import FormularioPage from '@/containers/pages/formulario-page';
+import { GetEventoWithCuestionario } from '@/types/evento';
+import { fromParam } from '@/utils/slugify';
+import type { Metadata } from 'next';
+
+type PageParams = {
+  evento: string; // "carrera-de-botargas-123"
+  cuestionario: string; // "formulario-inscripcion-456"
+};
+
+type Props = {
+  params: Promise<PageParams>;
+};
+
+export async function generateMetadata({ params }: Props): Promise<Metadata> {
+  const { evento, cuestionario } = await params; // <- await
+  const { id: id_evento } = fromParam(evento);
+  const { id: id_cuestionario } = fromParam(cuestionario);
+
+  if (!id_evento || !id_cuestionario) {
+    return { title: 'Evento', description: 'Descripción del evento' };
+  }
+
+  const res = await fetch(
+    `${process.env.NEXT_PUBLIC_API_URL}/evento/${id_evento}/cuestionario/${id_cuestionario}`,
+    { next: { revalidate: 60 } }
+  );
+
+  if (!res.ok) {
+    return { title: 'Evento', description: 'Descripción del evento' };
+  }
+
+  const data: GetEventoWithCuestionario = await res.json();
+  const title = data?.nombre_evento || 'Evento';
+  const description = data?.descripcion_evento || 'Descripción del evento';
+  const banner = data?.banner
+    ? `${process.env.NEXT_PUBLIC_API_URL}/banners/${data.banner}`
+    : undefined;
+
+  return {
+    title,
+    description,
+    openGraph: {
+      title,
+      description,
+      images: banner
+        ? [{ url: banner, width: 800, height: 400, alt: title }]
+        : undefined,
+    },
+  };
+}
+
+export default async function Page({ params }: Props) {
+  const { evento, cuestionario } = await params; // <- await
+  const { id: id_evento } = fromParam(evento);
+  const { id: id_cuestionario } = fromParam(cuestionario);
+
+  if (!id_evento || !id_cuestionario) {
+    // import { notFound } from 'next/navigation';
+    // return notFound();
+  }
+
+  return (
+    <FormularioPage
+      id_evento={String(id_evento)}
+      id_cuestionario={String(id_cuestionario)}
+    />
+  );
+}
diff --git a/src/app/(public)/evento/[nombre_evento]/[id_evento]/[id_cuestionario]/page.tsx b/src/app/(public)/evento/[nombre_evento]/[id_evento]/[id_cuestionario]/page.tsx
deleted file mode 100644
index ba0203c..0000000
--- a/src/app/(public)/evento/[nombre_evento]/[id_evento]/[id_cuestionario]/page.tsx
+++ /dev/null
@@ -1,48 +0,0 @@
-import FormularioPage from '@/containers/pages/formulario-page';
-import { GetEventoWithCuestionario } from '@/types/evento';
-import { Metadata } from 'next';
-import React from 'react';
-
-type Params = {
-  nombre_evento: string;
-  id_evento: string;
-  id_cuestionario: string;
-};
-
-type Props = {
-  params: Promise<Params>;
-};
-
-export async function generateMetadata({ params }: Props): Promise<Metadata> {
-  const { id_evento, id_cuestionario } = await params;
-
-  const response = await fetch(
-    `${process.env.NEXT_PUBLIC_API_URL}/evento/${id_evento}/cuestionario/${id_cuestionario}`
-  );
-
-  const data: GetEventoWithCuestionario = await response.json();
-
-  return {
-    title: data?.nombre_evento || 'Evento',
-    description: data?.descripcion_evento || 'Descripción del evento',
-    openGraph: {
-      title: data?.nombre_evento || 'Evento',
-      description: data?.descripcion_evento || 'Descripción del evento',
-      images: [
-        {
-          url: `${process.env.NEXT_PUBLIC_API_URL}/banners/${data.banner}`,
-          width: 800,
-          height: 400,
-          alt: data?.nombre_evento || 'Evento',
-        },
-      ],
-    },
-  };
-}
-
-export default async function Page({ params }: Props) {
-  const { id_evento, id_cuestionario } = await params;
-  return (
-    <FormularioPage id_evento={id_evento} id_cuestionario={id_cuestionario} />
-  );
-}
diff --git a/src/app/(public)/page.tsx b/src/app/(public)/page.tsx
index 444e2ac..8d164cf 100644
--- a/src/app/(public)/page.tsx
+++ b/src/app/(public)/page.tsx
@@ -1,37 +1,84 @@
 'use client';
 
 import ClientCarousel from '@/client-components/client-carousel';
-import EventoCard from '@/components/evento-card';
+import FormularioCardUser from '@/components/formulario/formulario-card-user';
+import EmptyEventsState from '@/components/empty-events-state';
 import { useGetApi } from '@/hooks/use-get-api';
-import { GetEventoWithCuestionarios } from '@/types/evento';
+import { GetEventoWithCuestionariosWithCupos } from '@/types/evento';
 import React from 'react';
 
 export default function Page() {
-  const { loading, data } = useGetApi<GetEventoWithCuestionarios[]>(
+  const { loading, data } = useGetApi<GetEventoWithCuestionariosWithCupos[]>(
     '/evento/activos/cuestionarios'
   );
 
   return (
     <div>
-      <div className="mx-auto mb-5 mt-3 fade-in-down-bounce">
-        <ClientCarousel
-          images={[{
-            src: '/banner.jpeg',
-            alt: 'Banner de eventos activos',
-          }]}
-        />
-      </div>
-      {loading && <div>Cargando...</div>}
-      {data && (
+      {data && data.length > 0 && (
+        <div className="mx-auto mb-5 mt-3 fade-in-down-bounce">
+          <ClientCarousel
+            images={
+              data && data.length > 0
+                ? data.map((evento) => ({
+                    src: `${process.env.NEXT_PUBLIC_API_URL}/banners/${evento.banner}`,
+                    alt: `Banner de ${evento.nombre_evento}`,
+                  }))
+                : [
+                    {
+                      src: '/default-banner.jpeg',
+                      alt: 'Banner de eventos activos',
+                    },
+                  ]
+            }
+          />
+        </div>
+      )}
+
+      {loading && (
+        <div className="text-center py-5 fade-in-scale">
+          <div className="d-flex justify-content-center align-items-center mb-3">
+            <div
+              className="spinner-border text-primary me-3"
+              role="status"
+              style={{ width: '2rem', height: '2rem' }}
+            >
+              <span className="visually-hidden">Cargando...</span>
+            </div>
+            <div>
+              <h5 className="mb-0 text-primary">Cargando eventos...</h5>
+              <small className="text-muted">
+                Esto solo tomará unos segundos
+              </small>
+            </div>
+          </div>
+        </div>
+      )}
+
+      {!loading && data && data.length === 0 && (
+        <div className="flex-grow-1 d-flex flex-column justify-content-center align-items-center">
+          <EmptyEventsState />
+        </div>
+      )}
+
+      {!loading && data && data.length > 0 && (
         <div className="row">
-          {data.map((item, key) => {
-            const fadeClass = `delay-${(key % 5) + 1}`;
-            return (
-              <div className={`col-md-6 col-lg-4 my-4 fade-in-up-bounce ${fadeClass}`} key={key}>
-                <EventoCard evento={item} />
-              </div>
-            );
-          })}
+          {data.flatMap((evento) =>
+            evento.cuestionarios.map((cuestionario, index) => {
+              return (
+                <div
+                  className={`col-md-6 col-lg-4 my-3 fade-in-up-bounce delay-${
+                    (index % 5) + 1
+                  }`}
+                  key={`${evento.id_evento}-${cuestionario.id_cuestionario}`}
+                >
+                  <FormularioCardUser
+                    evento={evento}
+                    formulario={cuestionario}
+                  />
+                </div>
+              );
+            })
+          )}
         </div>
       )}
     </div>
diff --git a/src/components/banner-uploader.tsx b/src/components/banner-uploader.tsx
index 32aa635..96bd186 100644
--- a/src/components/banner-uploader.tsx
+++ b/src/components/banner-uploader.tsx
@@ -8,12 +8,16 @@ interface BannerUploaderProps {
   label?: string;
   onChange?: (file: File | null) => void;
   defaultBanner?: string;
+  className?: string;
+  showPreview?: boolean;
 }
 
 export default function ImageUploader({
   label = 'Subir imagen',
   onChange,
   defaultBanner,
+  className = '',
+  showPreview = true,
 }: BannerUploaderProps) {
   const fileInputRef = useRef<HTMLInputElement>(null);
   const [preview, setPreview] = useState<string | null>(defaultBanner || null);
@@ -41,17 +45,28 @@ export default function ImageUploader({
   };
 
   return (
-    <div className="mb-4">
+    <div className={className}>
       {label && <label className="block mb-2 font-semibold">{label}</label>}
-      <input
-        ref={fileInputRef}
-        type="file"
-        accept="image/*"
-        onChange={handleFileChange}
-        className="form-control mb-2"
-      />
-      {preview && (
-        <div className="d-flex flex-column align-items-center">
+      <div className="d-flex gap-2 align-items-start mb-2">
+        <input
+          ref={fileInputRef}
+          type="file"
+          accept="image/*"
+          onChange={handleFileChange}
+          className="form-control"
+        />
+        {preview && (
+          <Button
+            variant="danger"
+            onClick={handleRemoveImage}
+            className="flex-shrink-0"
+          >
+            <i className="bi bi-trash"></i>
+          </Button>
+        )}
+      </div>
+      {preview && showPreview && (
+        <div className="d-flex justify-content-center">
           <Image
             src={preview}
             alt="Previsualización"
@@ -59,13 +74,6 @@ export default function ImageUploader({
             width={600}
             height={300}
           />
-          <Button
-            variant="danger"
-            onClick={handleRemoveImage}
-            className="mt-3"
-          >
-            Eliminar imagen
-          </Button>
         </div>
       )}
     </div>
diff --git a/src/components/breadcrumb.tsx b/src/components/breadcrumb.tsx
new file mode 100644
index 0000000..dd05474
--- /dev/null
+++ b/src/components/breadcrumb.tsx
@@ -0,0 +1,39 @@
+import Link from 'next/link';
+import React from 'react';
+
+interface BreadcrumbItem {
+  label: string;
+  href?: string;
+}
+
+interface BreadcrumbProps {
+  items: BreadcrumbItem[];
+}
+
+export default function Breadcrumb({ items }: BreadcrumbProps) {
+  return (
+    <nav aria-label="breadcrumb" className="mb-3">
+      <ol className="breadcrumb">
+        {items.map((item, index) => {
+          const isLast = index === items.length - 1;
+
+          return (
+            <li
+              key={index}
+              className={`breadcrumb-item ${isLast ? 'active' : ''}`}
+              aria-current={isLast ? 'page' : undefined}
+            >
+              {isLast ? (
+                item.label
+              ) : (
+                <Link href={item.href || '#'} className="text-decoration-none">
+                  {item.label}
+                </Link>
+              )}
+            </li>
+          );
+        })}
+      </ol>
+    </nav>
+  );
+}
diff --git a/src/components/cuestionario-card.tsx b/src/components/cuestionario-card.tsx
new file mode 100644
index 0000000..d615ab4
--- /dev/null
+++ b/src/components/cuestionario-card.tsx
@@ -0,0 +1,106 @@
+'use client';
+import { GetEventoWithCuestionariosWithCupos } from '@/types/evento';
+import Image from 'next/image';
+import Link from 'next/link';
+import React, { useState } from 'react';
+import MarkdownRenderer from './markdown-render';
+
+export default function CuestionarioCard({
+  evento,
+  user = 'public',
+}: {
+  evento: GetEventoWithCuestionariosWithCupos;
+  user?: 'public' | 'administrador' | 'staff';
+}) {
+  const [verMas, setVerMas] = useState(false);
+  const descripcion = evento.descripcion_evento ?? '';
+  const limite = 100;
+
+  const descripcionRecortada =
+    descripcion.length > limite && !verMas
+      ? `${descripcion.slice(0, limite)}...`
+      : descripcion;
+
+  return (
+    <div className="card card-blog d-flex flex-column justify-content-between">
+      <div>
+        <div className="card-image scale-hover-1">
+          <Link
+            href={
+              user === 'administrador' || user === 'staff'
+                ? `/${user}/evento/${evento.id_evento}`
+                : `/evento/${evento.nombre_evento.split(' ').join('_')}/${
+                    evento.id_evento
+                  }/${evento.cuestionarios[0].id_cuestionario}`
+            }
+          >
+            <Image
+              width={400}
+              height={300}
+              className="img-fluid"
+              src={`${process.env.NEXT_PUBLIC_API_URL}/banners/${evento.banner}`}
+              alt="Banner formulario"
+            />
+            <div className="card-caption">{evento.nombre_evento}</div>
+          </Link>
+          <div className="ripple-cont"></div>
+        </div>
+
+        <div className="card-body">
+          <div className="card-description mb-0">
+            {evento.cuestionarios[0]?.cupo_maximo === null ? (
+              <span className="badge bg-success mb-2">Sin límite</span>
+            ) : (
+              <span className="badge bg-primary mb-2">
+                {evento.cuestionarios[0]?.cupos_disponibles} cupos disponibles
+              </span>
+            )}
+            <MarkdownRenderer markdown={descripcionRecortada} />
+            {descripcion.length > limite && (
+              <button
+                onClick={() => setVerMas(!verMas)}
+                className="btn btn-link btn-sm p-0 ms-1 align-baseline"
+                style={{ fontSize: '0.875rem' }}
+              >
+                {verMas ? 'Ver menos' : 'Ver más'}
+              </button>
+            )}
+          </div>
+
+          {evento.cuestionarios.length > 0 &&
+            evento.cuestionarios.map((cuestionario) => (
+              <div key={cuestionario.id_cuestionario} className="">
+                {user === 'administrador' || user === 'staff' ? (
+                  <Link
+                    href={`/${user}/evento/${evento.id_evento}`}
+                    className="btn mt-2 w-100 btn-outline-primary"
+                  >
+                    Ver evento
+                  </Link>
+                ) : cuestionario.cupos_disponibles === 0 &&
+                  cuestionario.cupo_maximo !== null ? (
+                  <button
+                    className="btn mt-2 w-100 btn-outline-secondary"
+                    disabled
+                  >
+                    Cupo lleno
+                  </button>
+                ) : (
+                  <Link
+                    href={`/evento/${evento.nombre_evento
+                      .split(' ')
+                      .join('_')}/${evento.id_evento}/${
+                      cuestionario.id_cuestionario
+                    }`}
+                    className="btn mt-2 w-100 btn-outline-primary"
+                  >
+                    Registro
+                  </Link>
+                )}
+              </div>
+            ))}
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/src/components/empty-events-state.tsx b/src/components/empty-events-state.tsx
new file mode 100644
index 0000000..b285531
--- /dev/null
+++ b/src/components/empty-events-state.tsx
@@ -0,0 +1,62 @@
+'use client';
+
+import React from 'react';
+import Button from './button';
+
+export default function EmptyEventsState() {
+  return (
+    <div className="container py-5">
+      <div className="row justify-content-center">
+        <div className="col-lg-8">
+          <div className="text-center fade-in-scale">
+            {/* Ilustración principal con Bootstrap */}
+            <div className="mb-2">
+              <div
+                className="d-inline-flex align-items-center justify-content-center bg-dorado bg-opacity-10 rounded-circle mb-4"
+                style={{ width: '150px', height: '150px' }}
+              >
+                <i className="bi bi-calendar-x text-dorado display-1"></i>
+              </div>
+            </div>
+
+            {/* Título y mensaje principal */}
+            <div className="mb-5">
+              <h1 className="display-5 fw-bold text-azul mb-3 fade-in-up delay-1">
+                No hay eventos disponibles
+              </h1>
+              <p className="lead text-muted mb-0 fade-in-up delay-2">
+                En este momento no tenemos eventos activos para mostrar.
+                <br className="d-none d-md-block" />
+                <span className="text-azul fw-semibold">
+                  ¡No te preocupes!
+                </span>{' '}
+                Pronto habrá nuevas oportunidades de participación.
+              </p>
+            </div>
+
+            {/* Botón de acción usando clases Bootstrap */}
+            <div className="fade-in-up delay-4">
+              <Button
+                icon="bi bi-arrow-clockwise"
+                onClick={() => window.location.reload()}
+                size="lg"
+                className="rounded-pill px-5"
+              >
+                Actualizar pagina
+              </Button>
+            </div>
+
+            {/* Mensaje adicional */}
+            <div className="mt-4 fade-in-up delay-5">
+              <small className="text-muted">
+                <i className="bi bi-info-circle me-1"></i>
+                Esta página se actualiza automáticamente para mostrar los
+                eventos más recientes
+              </small>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/src/components/evento-card.tsx b/src/components/evento-card.tsx
index 6ea130d..595124e 100644
--- a/src/components/evento-card.tsx
+++ b/src/components/evento-card.tsx
@@ -1,15 +1,15 @@
-'use client';
-import { GetEventoWithCuestionarios } from '@/types/evento';
+import { GetEventoWithCuestionariosWithCupos } from '@/types/evento';
 import Image from 'next/image';
 import Link from 'next/link';
 import React, { useState } from 'react';
 import MarkdownRenderer from './markdown-render';
+import { formatearRangoFechas } from '@/utils/date-utils';
 
 export default function EventoCard({
   evento,
   user = 'public',
 }: {
-  evento: GetEventoWithCuestionarios;
+  evento: GetEventoWithCuestionariosWithCupos;
   user?: 'public' | 'administrador' | 'staff';
 }) {
   const [verMas, setVerMas] = useState(false);
@@ -43,18 +43,9 @@ export default function EventoCard({
             />
             <div className="card-caption">{evento.nombre_evento}</div>
           </Link>
-          <div className="ripple-cont"></div>
         </div>
-
         <div className="card-body">
           <div className="card-description mb-0">
-            {evento.cuestionarios[0]?.cupo_maximo === null ? (
-              <span className="badge bg-success mb-2">Sin límite</span>
-            ) : (
-              <span className="badge bg-primary mb-2">
-                {evento.cuestionarios[0]?.cupos_disponibles} cupos disponibles
-              </span>
-            )}
             <MarkdownRenderer markdown={descripcionRecortada} />
             {descripcion.length > limite && (
               <button
@@ -66,39 +57,108 @@ export default function EventoCard({
               </button>
             )}
           </div>
+          {evento.cuestionarios.length > 0 ? (
+            <>
+              <h2 className="my-2 fs-3">Formularios</h2>
+              <table className="table table-white">
+                <thead>
+                  <tr>
+                    <th scope="col">Nombre</th>
+                    <th scope="col">Inscritos</th>
+                    <th scope="col">Capacidad total</th>
+                  </tr>
+                </thead>
+                <tbody>
+                  {evento.cuestionarios.map((cuestionario) => (
+                    <tr key={cuestionario.id_cuestionario}>
+                      <td>
+                        <Link
+                          href={
+                            user === 'administrador' || user === 'staff'
+                              ? `/${user}/evento/${evento.id_evento}/formulario/${cuestionario.id_cuestionario}`
+                              : `/evento/${evento.nombre_evento
+                                  .split(' ')
+                                  .join('_')}/${evento.id_evento}/${
+                                  cuestionario.id_cuestionario
+                                }`
+                          }
+                        >
+                          {cuestionario.nombre_form}
+                        </Link>
+                      </td>
+                      {cuestionario.cupo_maximo ? (
+                        <>
+                          <td>{cuestionario.cupos_usados}</td>
+                          <td>{cuestionario.cupo_maximo}</td>
+                        </>
+                      ) : (
+                        <td colSpan={2} className="text-center">
+                          Sin límite
+                        </td>
+                      )}
+                    </tr>
+                  ))}
+                </tbody>
+              </table>
+            </>
+          ) : (
+            <div className="text-center px-4 py-3 border rounded bg-light my-3">
+              <i className="bi bi-clipboard-x fs-1 text-muted mb-3"></i>
+              <p className="text-muted mb-3">
+                Este evento no tiene formularios disponibles.
+              </p>
+              {(user === 'administrador' || user === 'staff') && (
+                <Link
+                  href={`/${user}/evento/${evento.id_evento}/formularios/crear`}
+                  className="btn btn-primary"
+                >
+                  <i className="bi bi-plus-circle me-2"></i>
+                  Crear formulario
+                </Link>
+              )}
+            </div>
+          )}
+          <span className="badge fs-6 w-100 bg-primary">
+            Evento {formatearRangoFechas(evento.fecha_inicio, evento.fecha_fin)}
+          </span>
 
-          {evento.cuestionarios.length > 0 &&
-            evento.cuestionarios.map((cuestionario) => (
-              <div key={cuestionario.id_cuestionario} className="">
-                {user === 'administrador' || user === 'staff' ? (
-                  <Link
-                    href={`/${user}/evento/${evento.id_evento}`}
-                    className="btn mt-2 w-100 btn-outline-primary"
-                  >
-                    Ver evento
-                  </Link>
-                ) : cuestionario.cupos_disponibles === 0 &&
-                  cuestionario.cupo_maximo !== null ? (
-                  <button
-                    className="btn mt-2 w-100 btn-outline-secondary"
-                    disabled
-                  >
-                    Cupo lleno
-                  </button>
-                ) : (
-                  <Link
-                    href={`/evento/${evento.nombre_evento
-                      .split(' ')
-                      .join('_')}/${evento.id_evento}/${
-                      cuestionario.id_cuestionario
-                    }`}
-                    className="btn mt-2 w-100 btn-outline-primary"
-                  >
-                    Registro
-                  </Link>
-                )}
-              </div>
-            ))}
+          {/* Botón único del evento */}
+          <div className="mt-2">
+            {user === 'administrador' || user === 'staff' ? (
+              <Link
+                href={`/${user}/evento/${evento.id_evento}`}
+                className="btn w-100 btn-outline-primary"
+              >
+                Ver/Editar evento
+              </Link>
+            ) : evento.cuestionarios.length === 0 ? (
+              <button className="btn w-100 btn-outline-secondary" disabled>
+                Sin formularios disponibles
+              </button>
+            ) : evento.cuestionarios.some(
+                (cuestionario) =>
+                  cuestionario.cupos_disponibles === 0 &&
+                  cuestionario.cupo_maximo !== null
+              ) &&
+              evento.cuestionarios.every(
+                (cuestionario) =>
+                  cuestionario.cupos_disponibles === 0 &&
+                  cuestionario.cupo_maximo !== null
+              ) ? (
+              <button className="btn w-100 btn-outline-secondary" disabled>
+                Cupo lleno
+              </button>
+            ) : (
+              <Link
+                href={`/evento/${evento.nombre_evento.split(' ').join('_')}/${
+                  evento.id_evento
+                }/${evento.cuestionarios[0]?.id_cuestionario || ''}`}
+                className="btn w-100 btn-outline-primary"
+              >
+                Registro
+              </Link>
+            )}
+          </div>
         </div>
       </div>
     </div>
diff --git a/src/components/evento/evento-card-admin.tsx b/src/components/evento/evento-card-admin.tsx
new file mode 100644
index 0000000..a6587a2
--- /dev/null
+++ b/src/components/evento/evento-card-admin.tsx
@@ -0,0 +1,153 @@
+import { GetEventoWithCuestionariosWithCupos } from '@/types/evento';
+import Image from 'next/image';
+import Link from 'next/link';
+import React, { useState } from 'react';
+import MarkdownRenderer from '../markdown-render';
+import { formatearFechaCard } from '@/utils/date-utils';
+
+export default function EventoCardAdmin({
+  evento,
+}: {
+  evento: GetEventoWithCuestionariosWithCupos;
+}) {
+  const [verMas, setVerMas] = useState(false);
+  const descripcion = evento.descripcion_evento ?? '';
+  const limite = 100;
+
+  const descripcionRecortada =
+    descripcion.length > limite && !verMas
+      ? `${descripcion.slice(0, limite)}...`
+      : descripcion;
+
+  // Obtener información de fecha usando la utilidad
+  const { mesTexto, diaTexto } = formatearFechaCard(
+    evento.fecha_inicio,
+    evento.fecha_fin
+  );
+
+  return (
+    <div
+      className="card shadow-sm border-0"
+      style={{ borderRadius: '12px', overflow: 'hidden' }}
+    >
+      <div className="position-relative">
+        <Link href={`/user/evento/${evento.id_evento}`}>
+          <Image
+            width={400}
+            height={250}
+            className="img-fluid w-100"
+            src={`${process.env.NEXT_PUBLIC_API_URL}/banners/${evento.banner}`}
+            alt="Banner formulario"
+            style={{ objectFit: 'cover', height: '200px' }}
+          />
+        </Link>
+
+        {/* Badge de cantidad de formularios en la esquina superior derecha */}
+        <div className="position-absolute top-0 end-0 m-2">
+          {evento.cuestionarios.length > 0 ? (
+            <span className="badge bg-primary">
+              {evento.cuestionarios.length} formulario
+              {evento.cuestionarios.length !== 1 ? 's' : ''}
+            </span>
+          ) : (
+            <span className="badge bg-secondary">Sin formularios</span>
+          )}
+        </div>
+      </div>
+
+      <div className="card-body p-3 d-flex flex-column">
+        {/* Fecha del evento */}
+        <div className="d-flex align-items-center mb-2">
+          <div className="me-3" style={{ minWidth: '50px' }}>
+            <div
+              className="text-muted text-center small"
+              style={{
+                fontSize: mesTexto.includes(' - ') ? '0.65rem' : '0.75rem',
+                lineHeight: 1.1,
+              }}
+            >
+              {mesTexto}
+            </div>
+            <div
+              className="fw-bold mb-0 text-center"
+              style={{
+                lineHeight: 1,
+                whiteSpace: 'nowrap',
+                fontSize: diaTexto.toString().length > 2 ? '1rem' : '1.25rem',
+              }}
+            >
+              {diaTexto}
+            </div>
+          </div>
+          <div>
+            <h5 className="card-title mb-1 fw-bold">{evento.nombre_evento}</h5>
+          </div>
+        </div>
+
+        {/* Descripción */}
+        <div className="card-description flex-grow-1 mb-3">
+          <MarkdownRenderer markdown={descripcionRecortada} />
+          {descripcion.length > limite && (
+            <button
+              onClick={() => setVerMas(!verMas)}
+              className="btn btn-link btn-sm p-0 ms-1 align-baseline text-decoration-none"
+              style={{ fontSize: '0.875rem' }}
+            >
+              {verMas ? 'Ver menos' : 'Ver más'}
+            </button>
+          )}
+        </div>
+
+        {/* Formularios/sub eventos */}
+        {evento.cuestionarios.length > 0 ? (
+          <div className="mb-3">
+            <h6 className="fw-bold mb-2 text-muted">
+              Formularios disponibles:
+            </h6>
+            <div className="row row-cols-1 g-2">
+              {evento.cuestionarios.slice(0, 3).map((cuestionario) => (
+                <div key={cuestionario.id_cuestionario} className="col">
+                  <div className="py-2 px-3 bg-light border-0">
+                    <div className="d-flex justify-content-between align-items-center">
+                      <Link
+                        href={`/user/evento/${evento.id_evento}/formulario/${cuestionario.id_cuestionario}`}
+                        className="text-decoration-none fw-semibold"
+                      >
+                        {cuestionario.nombre_form}
+                      </Link>
+                      <small className="text-muted">
+                        {cuestionario.cupo_maximo
+                          ? `${cuestionario.cupos_usados}/${cuestionario.cupo_maximo}`
+                          : 'Sin límite'}
+                      </small>
+                    </div>
+                  </div>
+                </div>
+              ))}
+            </div>
+          </div>
+        ) : (
+          <div className="text-center px-3 py-3 bg-light rounded mb-3">
+            <i className="bi bi-clipboard-x fs-4 text-muted mb-2 d-block"></i>
+            <p className="text-muted mb-2 small">Sin formularios disponibles</p>
+            <Link
+              href={`/user/evento/${evento.id_evento}/formularios/crear`}
+              className="btn btn-sm btn-outline-primary"
+            >
+              <i className="bi bi-plus-circle me-1"></i>
+              Crear formulario
+            </Link>
+          </div>
+        )}
+
+        {/* Botón principal */}
+        <Link
+          href={`/user/evento/${evento.id_evento}`}
+          className="btn btn-primary w-100 rounded-pill"
+        >
+          Ver/Editar evento
+        </Link>
+      </div>
+    </div>
+  );
+}
diff --git a/src/components/evento/evento-card-preview.tsx b/src/components/evento/evento-card-preview.tsx
new file mode 100644
index 0000000..bbb6651
--- /dev/null
+++ b/src/components/evento/evento-card-preview.tsx
@@ -0,0 +1,161 @@
+'use client';
+
+import { CreateEventoType } from '@/types/create-evento';
+import Image from 'next/image';
+import React, { useState, useEffect } from 'react';
+import MarkdownRenderer from '@/components/markdown-render';
+import { formatearFechaCard } from '@/utils/date-utils';
+import Button from '../button';
+
+interface EventoPreviewProps {
+  evento: CreateEventoType;
+  eventoBanner?: File | null;
+  existingBanner?: string | null; // Banner existente desde la API
+  cuestionariosCount?: number; // Número de formularios existentes
+}
+
+export default function EventoCardPreview({
+  evento,
+  eventoBanner,
+  existingBanner,
+  cuestionariosCount = 0,
+}: EventoPreviewProps) {
+  const [verMas, setVerMas] = useState(false);
+  const [bannerUrl, setBannerUrl] = useState<string>('/default-banner.png');
+
+  const descripcion = evento.descripcion_evento ?? '';
+  const limite = 100;
+
+  const descripcionRecortada =
+    descripcion.length > limite && !verMas
+      ? `${descripcion.slice(0, limite)}...`
+      : descripcion;
+
+  // Actualizar URL del banner cuando cambie el archivo o cuando haya un banner existente
+  useEffect(() => {
+    if (eventoBanner) {
+      // Si hay un nuevo banner seleccionado, usarlo
+      const url = URL.createObjectURL(eventoBanner);
+      setBannerUrl(url);
+
+      // Limpiar URL anterior cuando el componente se desmonte
+      return () => URL.revokeObjectURL(url);
+    } else if (existingBanner) {
+      // Si no hay nuevo banner pero sí hay uno existente desde la API, usarlo
+      setBannerUrl(
+        `${process.env.NEXT_PUBLIC_API_URL}/banners/${existingBanner}`
+      );
+    } else {
+      // Si no hay ningún banner, usar el banner por defecto
+      setBannerUrl('/default-banner.png');
+    }
+  }, [eventoBanner, existingBanner]);
+
+  // Obtener información de fecha usando la utilidad
+  const getDateInfo = () => {
+    if (!evento.fecha_inicio || !evento.fecha_fin) {
+      return { mesTexto: 'MES', diaTexto: 'DD' };
+    }
+
+    return formatearFechaCard(evento.fecha_inicio, evento.fecha_fin);
+  };
+
+  const { mesTexto, diaTexto } = getDateInfo();
+
+  return (
+    <div
+      className="card shadow-sm border-0 mb-2"
+      style={{ borderRadius: '12px', overflow: 'hidden' }}
+    >
+      <div className="position-relative">
+        <Image
+          width={400}
+          height={250}
+          className="img-fluid w-100"
+          src={bannerUrl}
+          alt="Banner formulario"
+          style={{ objectFit: 'cover', height: '200px' }}
+        />
+
+        {/* Badge de cantidad de formularios en la esquina superior derecha */}
+        <div className="position-absolute top-0 end-0 m-2">
+          {cuestionariosCount > 0 ? (
+            <span className="badge bg-primary">
+              {cuestionariosCount} formulario
+              {cuestionariosCount !== 1 ? 's' : ''}
+            </span>
+          ) : (
+            <span className="badge bg-secondary">Sin formularios</span>
+          )}
+        </div>
+      </div>
+
+      <div className="card-body p-3 d-flex flex-column">
+        {/* Fecha del evento */}
+        <div className="d-flex align-items-center mb-2">
+          <div className="me-3" style={{ minWidth: '50px' }}>
+            <div
+              className="text-muted text-center small"
+              style={{
+                fontSize: mesTexto.includes(' - ') ? '0.65rem' : '0.75rem',
+                lineHeight: 1.1,
+              }}
+            >
+              {mesTexto}
+            </div>
+            <div
+              className="fw-bold mb-0 text-center"
+              style={{
+                lineHeight: 1,
+                whiteSpace: 'nowrap',
+                fontSize: diaTexto.toString().length > 2 ? '1rem' : '1.25rem',
+              }}
+            >
+              {diaTexto}
+            </div>
+          </div>
+          <div>
+            <h5 className="card-title mb-1 fw-bold">
+              {evento.nombre_evento || 'Nombre del evento'}
+            </h5>
+          </div>
+        </div>
+
+        {/* Tipo de evento */}
+        {evento.tipo_evento && (
+          <div className="mb-2">
+            <small className="text-muted">
+              <i className="bi bi-tag-fill me-1"></i>
+              {evento.tipo_evento}
+            </small>
+          </div>
+        )}
+
+        {/* Descripción */}
+        <div className="card-description flex-grow-1 mb-3">
+          {descripcion ? (
+            <>
+              <MarkdownRenderer markdown={descripcionRecortada} />
+              {descripcion.length > limite && (
+                <button
+                  onClick={() => setVerMas(!verMas)}
+                  className="btn btn-link btn-sm p-0 ms-1 align-baseline text-decoration-none"
+                  style={{ fontSize: '0.875rem' }}
+                >
+                  {verMas ? 'Ver menos' : 'Ver más'}
+                </button>
+              )}
+            </>
+          ) : (
+            <p className="text-muted small">Descripción del evento...</p>
+          )}
+        </div>
+
+        {/* Botón principal - deshabilitado */}
+        <Button variant="primary" className="w-100 rounded-pill" disabled>
+          Ver/Editar evento
+        </Button>
+      </div>
+    </div>
+  );
+}
diff --git a/src/components/evento/evento-card-user.tsx b/src/components/evento/evento-card-user.tsx
new file mode 100644
index 0000000..1bd3071
--- /dev/null
+++ b/src/components/evento/evento-card-user.tsx
@@ -0,0 +1,166 @@
+import { GetEventoWithCuestionariosWithCupos } from '@/types/evento';
+import Image from 'next/image';
+import Link from 'next/link';
+import React, { useState } from 'react';
+import MarkdownRenderer from '../markdown-render';
+import { formatearRangoFechas } from '@/utils/date-utils';
+
+export default function EventoCard({
+  evento,
+  user = 'public',
+}: {
+  evento: GetEventoWithCuestionariosWithCupos;
+  user?: 'public' | 'administrador' | 'staff';
+}) {
+  const [verMas, setVerMas] = useState(false);
+  const descripcion = evento.descripcion_evento ?? '';
+  const limite = 100;
+
+  const descripcionRecortada =
+    descripcion.length > limite && !verMas
+      ? `${descripcion.slice(0, limite)}...`
+      : descripcion;
+
+  return (
+    <div className="card card-blog d-flex flex-column justify-content-between">
+      <div>
+        <div className="card-image scale-hover-1">
+          <Link
+            href={
+              user === 'administrador' || user === 'staff'
+                ? `/${user}/evento/${evento.id_evento}`
+                : `/evento/${evento.nombre_evento.split(' ').join('_')}/${
+                    evento.id_evento
+                  }/${evento.cuestionarios[0].id_cuestionario}`
+            }
+          >
+            <Image
+              width={400}
+              height={300}
+              className="img-fluid"
+              src={`${process.env.NEXT_PUBLIC_API_URL}/banners/${evento.banner}`}
+              alt="Banner formulario"
+            />
+            <div className="card-caption">{evento.nombre_evento}</div>
+          </Link>
+        </div>
+        <div className="card-body">
+          <div className="card-description mb-0">
+            <MarkdownRenderer markdown={descripcionRecortada} />
+            {descripcion.length > limite && (
+              <button
+                onClick={() => setVerMas(!verMas)}
+                className="btn btn-link btn-sm p-0 ms-1 align-baseline"
+                style={{ fontSize: '0.875rem' }}
+              >
+                {verMas ? 'Ver menos' : 'Ver más'}
+              </button>
+            )}
+          </div>
+          {evento.cuestionarios.length > 0 ? (
+            <>
+              <h2 className="my-2 fs-3">Formularios</h2>
+              <table className="table table-white">
+                <thead>
+                  <tr>
+                    <th scope="col">Nombre</th>
+                    <th scope="col">Inscritos</th>
+                    <th scope="col">Capacidad total</th>
+                  </tr>
+                </thead>
+                <tbody>
+                  {evento.cuestionarios.map((cuestionario) => (
+                    <tr key={cuestionario.id_cuestionario}>
+                      <td>
+                        <Link
+                          href={
+                            user === 'administrador' || user === 'staff'
+                              ? `/${user}/evento/${evento.id_evento}/formulario/${cuestionario.id_cuestionario}`
+                              : `/evento/${evento.nombre_evento
+                                  .split(' ')
+                                  .join('_')}/${evento.id_evento}/${
+                                  cuestionario.id_cuestionario
+                                }`
+                          }
+                        >
+                          {cuestionario.nombre_form}
+                        </Link>
+                      </td>
+                      {cuestionario.cupo_maximo ? (
+                        <>
+                          <td>{cuestionario.cupos_usados}</td>
+                          <td>{cuestionario.cupo_maximo}</td>
+                        </>
+                      ) : (
+                        <td colSpan={2} className="text-center">
+                          Sin límite
+                        </td>
+                      )}
+                    </tr>
+                  ))}
+                </tbody>
+              </table>
+            </>
+          ) : (
+            <div className="text-center px-4 py-3 border rounded bg-light my-3">
+              <i className="bi bi-clipboard-x fs-1 text-muted mb-3"></i>
+              <p className="text-muted mb-3">
+                Este evento no tiene formularios disponibles.
+              </p>
+              {(user === 'administrador' || user === 'staff') && (
+                <Link
+                  href={`/${user}/evento/${evento.id_evento}/formularios/crear`}
+                  className="btn btn-primary"
+                >
+                  <i className="bi bi-plus-circle me-2"></i>
+                  Crear formulario
+                </Link>
+              )}
+            </div>
+          )}
+          <span className="badge fs-6 w-100 bg-primary">
+            Evento {formatearRangoFechas(evento.fecha_inicio, evento.fecha_fin)}
+          </span>
+
+          {/* Botón único del evento */}
+          <div className="mt-2">
+            {user === 'administrador' || user === 'staff' ? (
+              <Link
+                href={`/${user}/evento/${evento.id_evento}`}
+                className="btn w-100 btn-outline-primary"
+              >
+                Ver/Editar evento
+              </Link>
+            ) : evento.cuestionarios.length === 0 ? (
+              <button className="btn w-100 btn-outline-secondary" disabled>
+                Sin formularios disponibles
+              </button>
+            ) : evento.cuestionarios.some(
+                (cuestionario) =>
+                  cuestionario.cupos_disponibles === 0 &&
+                  cuestionario.cupo_maximo !== null
+              ) &&
+              evento.cuestionarios.every(
+                (cuestionario) =>
+                  cuestionario.cupos_disponibles === 0 &&
+                  cuestionario.cupo_maximo !== null
+              ) ? (
+              <button className="btn w-100 btn-outline-secondary" disabled>
+                Cupo lleno
+              </button>
+            ) : (
+              <Link
+                href={`/evento/${evento.nombre_evento.split(' ').join('_')}/${
+                  evento.id_evento
+                }/${evento.cuestionarios[0]?.id_cuestionario || ''}`}
+                className="btn w-100 btn-outline-primary"
+              >
+                Registro
+              </Link>
+            )}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/src/components/formulario/formulario-card-admin.tsx b/src/components/formulario/formulario-card-admin.tsx
new file mode 100644
index 0000000..9321db0
--- /dev/null
+++ b/src/components/formulario/formulario-card-admin.tsx
@@ -0,0 +1,181 @@
+import { CuestionarioWithCupo, GetEvento } from '@/types/evento';
+import Image from 'next/image';
+import Link from 'next/link';
+import React, { useState } from 'react';
+import MarkdownRenderer from '../markdown-render';
+import { formatearFechaCard } from '@/utils/date-utils';
+import Button from '../button';
+
+export default function FormularioCardAdmin({
+  cuestionario,
+  evento,
+  handleDownload,
+  disabled,
+}: {
+  cuestionario: CuestionarioWithCupo;
+  evento: GetEvento;
+  handleDownload: (
+    id_cuestionario: number,
+    nombre_formulario: string,
+    nombre_evento: string
+  ) => void;
+  disabled: boolean;
+}) {
+  const [verMas, setVerMas] = useState(false);
+  const descripcion = cuestionario.descripcion ?? '';
+  const limite = 100;
+
+  const descripcionRecortada =
+    descripcion.length > limite && !verMas
+      ? `${descripcion.slice(0, limite)}...`
+      : descripcion;
+
+  // Obtener información de fecha usando la utilidad
+  const { mesTexto, diaTexto } = formatearFechaCard(
+    cuestionario.fecha_inicio,
+    cuestionario.fecha_fin
+  );
+
+  return (
+    <div
+      className="card shadow-sm border-0"
+      style={{ borderRadius: '12px', overflow: 'hidden' }}
+    >
+      <div className="position-relative">
+        <Link
+          href={`/user/evento/${evento.id_evento}/formulario/${cuestionario.id_cuestionario}`}
+        >
+          <Image
+            width={400}
+            height={250}
+            className="img-fluid w-100"
+            src={
+              cuestionario.banner
+                ? `${process.env.NEXT_PUBLIC_API_URL}/banners/${cuestionario.banner}`
+                : evento.banner
+                ? `${process.env.NEXT_PUBLIC_API_URL}/banners/${evento.banner}`
+                : `/default-banner.png`
+            }
+            alt="Banner formulario"
+            style={{ objectFit: 'cover', height: '200px' }}
+          />
+        </Link>
+
+        {/* Mensaje cuando se usa la imagen del evento */}
+        {!cuestionario.banner && evento.banner && (
+          <div className="position-absolute top-0 start-0 w-100 h-100 d-flex align-items-center justify-content-center bg-black bg-opacity-25">
+            <div className="bg-white bg-opacity-90 px-3 py-2 rounded-pill text-center small fw-bold">
+              <i className="bi bi-info-circle-fill me-1 text-primary"></i>
+              Usando imagen del evento
+            </div>
+          </div>
+        )}
+
+        {/* Badge de tipo de cuestionario en la esquina superior izquierda */}
+        <div className="position-absolute top-0 start-0 m-2">
+          <span className="badge bg-info">
+            {cuestionario.tipoCuestionario?.tipo_cuestionario || 'Formulario'}
+          </span>
+        </div>
+      </div>
+
+      <div className="card-body p-3 d-flex flex-column">
+        {/* Fecha del formulario */}
+        <div className="d-flex align-items-center mb-2">
+          <div className="me-3" style={{ minWidth: '50px' }}>
+            <div
+              className="text-muted text-center small"
+              style={{
+                fontSize: mesTexto.includes(' - ') ? '0.65rem' : '0.75rem',
+                lineHeight: 1.1,
+              }}
+            >
+              {mesTexto}
+            </div>
+            <div
+              className="fw-bold mb-0 text-center"
+              style={{
+                lineHeight: 1,
+                whiteSpace: 'nowrap',
+                fontSize: diaTexto.toString().length > 2 ? '1rem' : '1.25rem',
+              }}
+            >
+              {diaTexto}
+            </div>
+          </div>
+          <div>
+            <h5 className="card-title mb-1 fw-bold">
+              {cuestionario.nombre_form}
+            </h5>
+            {evento && (
+              <small className="text-muted">
+                <i className="bi bi-calendar-event me-1"></i>
+                {evento.nombre_evento}
+              </small>
+            )}
+          </div>
+        </div>
+
+        {/* Descripción */}
+        <div className="card-description flex-grow-1 mb-3">
+          <MarkdownRenderer markdown={descripcionRecortada} />
+          {descripcion.length > limite && (
+            <button
+              onClick={() => setVerMas(!verMas)}
+              className="btn btn-link btn-sm p-0 ms-1 align-baseline text-decoration-none"
+              style={{ fontSize: '0.875rem' }}
+            >
+              {verMas ? 'Ver menos' : 'Ver más'}
+            </button>
+          )}
+        </div>
+
+        {/* Información de cupos y estadísticas */}
+        <div className="mb-3">
+          <div className="py-2 px-3 bg-light rounded">
+            <div className="d-flex align-items-center">
+              <i className="bi bi-people-fill me-2 text-primary"></i>
+              <div>
+                <small className="text-muted d-block">Cupos</small>
+                <span className="fw-semibold">
+                  {cuestionario.cupo_maximo !== null
+                    ? `${cuestionario.cupos_usados} / ${cuestionario.cupo_maximo}`
+                    : 'Sin límite'}
+                </span>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        {/* Botones de acción */}
+        <div className="d-grid gap-2">
+          <Link
+            href={`/user/evento/${evento.id_evento}/formulario/${cuestionario.id_cuestionario}`}
+            className="btn btn-primary rounded-pill"
+          >
+            Ver/Editar formulario
+          </Link>
+
+          {/* Botón secundario para ver respuestas */}
+          <Button
+            outline
+            variant="success"
+            size="sm"
+            className="rounded-pill"
+            onClick={() =>
+              handleDownload(
+                cuestionario.id_cuestionario,
+                cuestionario.nombre_form,
+                evento.nombre_evento
+              )
+            }
+            disabled={disabled}
+          >
+            <i className="bi bi-download me-2"></i>
+            Descargar respuestas
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/src/components/formulario/formulario-card-create-preview.tsx b/src/components/formulario/formulario-card-create-preview.tsx
new file mode 100644
index 0000000..e69de29
diff --git a/src/components/formulario/formulario-card-preview-unified.tsx b/src/components/formulario/formulario-card-preview-unified.tsx
new file mode 100644
index 0000000..e69de29
diff --git a/src/components/formulario/formulario-card-preview.tsx b/src/components/formulario/formulario-card-preview.tsx
new file mode 100644
index 0000000..aa3fc6c
--- /dev/null
+++ b/src/components/formulario/formulario-card-preview.tsx
@@ -0,0 +1,280 @@
+import { GetCuestionario } from '@/types/cuestionario';
+import { FormularioCreacion } from '@/types/create-formulario';
+import { GetEvento, GetEventoWithCuestionariosWithCupos } from '@/types/evento';
+import Image from 'next/image';
+import React, { useState, useEffect } from 'react';
+import MarkdownRenderer from '../markdown-render';
+import { formatearFechaCard } from '@/utils/date-utils';
+
+interface FormularioCardPreviewProps {
+  // Para formularios existentes
+  cuestionario?: GetCuestionario;
+  // Para formularios en creación
+  formulario?: FormularioCreacion;
+  // Evento asociado
+  evento?: GetEvento | GetEventoWithCuestionariosWithCupos | null;
+  // Banner personalizado
+  nuevoBanner?: File | null;
+}
+
+export default function FormularioCardPreview({
+  cuestionario,
+  formulario,
+  evento,
+  nuevoBanner,
+}: FormularioCardPreviewProps) {
+  const [verMas, setVerMas] = useState(false);
+  const [bannerUrl, setBannerUrl] = useState<string>('/default-banner.png');
+
+  // Determinar qué datos usar (formulario existente o en creación)
+  const isCreating = !!formulario && !cuestionario;
+  const data = cuestionario || formulario;
+
+  // Manejar la imagen del banner
+  useEffect(() => {
+    if (nuevoBanner) {
+      // Si hay un nuevo banner seleccionado, usarlo
+      const url = URL.createObjectURL(nuevoBanner);
+      setBannerUrl(url);
+      return () => URL.revokeObjectURL(url);
+    } else if (!isCreating && cuestionario?.banner) {
+      // Si es un formulario existente y tiene banner propio
+      setBannerUrl(
+        `${process.env.NEXT_PUBLIC_API_URL}/banners/${cuestionario.banner}`
+      );
+    } else if (evento?.banner) {
+      // Si hay banner del evento, usarlo
+      setBannerUrl(
+        `${process.env.NEXT_PUBLIC_API_URL}/banners/${evento.banner}`
+      );
+    } else {
+      // Banner por defecto
+      setBannerUrl('/default-banner.png');
+    }
+  }, [nuevoBanner, evento?.banner, cuestionario?.banner, isCreating]);
+
+  if (!data) {
+    return null; // No hay datos para mostrar
+  }
+
+  const descripcion = data.descripcion ?? '';
+  const limite = 100;
+
+  const descripcionRecortada =
+    descripcion.length > limite && !verMas
+      ? `${descripcion.slice(0, limite)}...`
+      : descripcion;
+
+  // Obtener información de fecha usando la utilidad
+  const getDateInfo = () => {
+    if (!data.fecha_inicio || !data.fecha_fin) {
+      return { mesTexto: 'MES', diaTexto: 'DD' };
+    }
+
+    let fechaInicio: Date, fechaFin: Date;
+
+    if (isCreating) {
+      // Para formularios en creación, las fechas vienen como string
+      fechaInicio = new Date(data.fecha_inicio);
+      fechaFin = new Date(data.fecha_fin);
+    } else {
+      // Para formularios existentes, convertir a Date también
+      fechaInicio = new Date(data.fecha_inicio);
+      fechaFin = new Date(data.fecha_fin);
+    }
+
+    return formatearFechaCard(fechaInicio, fechaFin);
+  };
+
+  const { mesTexto, diaTexto } = getDateInfo();
+
+  // Determinar si se está usando la imagen del evento
+  const isUsingEventImage =
+    !nuevoBanner && (isCreating || !cuestionario?.banner) && evento?.banner;
+
+  // Obtener el tipo de cuestionario
+  const getTipoCuestionario = () => {
+    const tipoId = isCreating
+      ? (formulario as FormularioCreacion).id_tipo_cuestionario
+      : (cuestionario as GetCuestionario).id_tipo_cuestionario;
+
+    if (tipoId === 1) return 'Registro';
+    if (tipoId === 2) return 'Evaluación';
+    return 'Formulario';
+  };
+
+  // Obtener nombre del formulario
+  const getNombreFormulario = () => {
+    return data.nombre_form || 'Nombre del formulario';
+  };
+
+  // Obtener información de cupos
+  const getCuposInfo = () => {
+    if (isCreating) {
+      const form = formulario as FormularioCreacion;
+      return form.cupo_maximo && form.cupo_maximo > 0
+        ? `0 / ${form.cupo_maximo}`
+        : 'Sin límite';
+    } else {
+      const cuest = cuestionario as GetCuestionario;
+      return cuest.cupo_maximo !== null && cuest.cupo_maximo !== undefined
+        ? `0 / ${cuest.cupo_maximo}`
+        : 'Sin límite';
+    }
+  };
+
+  // Obtener información de secciones y preguntas (solo para formularios en creación)
+  const getSeccionesInfo = () => {
+    if (!isCreating || !formulario) return null;
+
+    const totalSecciones = formulario.secciones.length;
+    const totalPreguntas = formulario.secciones.reduce(
+      (total, seccion) => total + seccion.preguntas.length,
+      0
+    );
+
+    return { totalSecciones, totalPreguntas };
+  };
+
+  const seccionesInfo = getSeccionesInfo();
+
+  return (
+    <div
+      className="card shadow-sm border-0 mb-2"
+      style={{ borderRadius: '12px', overflow: 'hidden' }}
+    >
+      <div className="position-relative">
+        <Image
+          width={400}
+          height={250}
+          className="img-fluid w-100"
+          src={bannerUrl}
+          alt="Banner formulario"
+          style={{ objectFit: 'cover', height: '200px' }}
+        />
+
+        {/* Mensaje cuando se usa la imagen del evento */}
+        {isUsingEventImage && (
+          <div className="position-absolute top-0 start-0 w-100 h-100 d-flex align-items-center justify-content-center bg-black bg-opacity-25">
+            <div className="bg-white bg-opacity-90 px-3 py-2 rounded-pill text-center small fw-bold">
+              <i className="bi bi-info-circle-fill me-1 text-primary"></i>
+              Usando imagen del evento
+            </div>
+          </div>
+        )}
+
+        {/* Badge de tipo de cuestionario en la esquina superior izquierda */}
+        <div className="position-absolute top-0 start-0 m-2">
+          <span className="badge bg-info">{getTipoCuestionario()}</span>
+        </div>
+      </div>
+
+      <div className="card-body p-3 d-flex flex-column">
+        {/* Fecha del formulario */}
+        <div className="d-flex align-items-center mb-2">
+          <div className="me-3" style={{ minWidth: '50px' }}>
+            <div
+              className="text-muted text-center small"
+              style={{
+                fontSize: mesTexto.includes(' - ') ? '0.65rem' : '0.75rem',
+                lineHeight: 1.1,
+              }}
+            >
+              {mesTexto}
+            </div>
+            <div
+              className="fw-bold mb-0 text-center"
+              style={{
+                lineHeight: 1,
+                whiteSpace: 'nowrap',
+                fontSize: diaTexto.toString().length > 2 ? '1rem' : '1.25rem',
+              }}
+            >
+              {diaTexto}
+            </div>
+          </div>
+          <div>
+            <h5 className="card-title mb-1 fw-bold">{getNombreFormulario()}</h5>
+            {evento && (
+              <small className="text-muted">
+                <i className="bi bi-calendar-event me-1"></i>
+                {evento.nombre_evento}
+              </small>
+            )}
+          </div>
+        </div>
+
+        {/* Descripción */}
+        <div className="card-description flex-grow-1 mb-3">
+          {descripcion ? (
+            <>
+              <MarkdownRenderer markdown={descripcionRecortada} />
+              {descripcion.length > limite && (
+                <button
+                  onClick={() => setVerMas(!verMas)}
+                  className="btn btn-link btn-sm p-0 ms-1 align-baseline text-decoration-none"
+                  style={{ fontSize: '0.875rem' }}
+                >
+                  {verMas ? 'Ver menos' : 'Ver más'}
+                </button>
+              )}
+            </>
+          ) : (
+            <p className="text-muted small">Descripción del formulario...</p>
+          )}
+        </div>
+
+        {/* Información de cupos */}
+        <div className="mb-3">
+          <div className="py-2 px-3 bg-light rounded">
+            <div className="d-flex align-items-center">
+              <i className="bi bi-people-fill me-2 text-primary"></i>
+              <div>
+                <small className="text-muted d-block">Cupos</small>
+                <span className="fw-semibold">{getCuposInfo()}</span>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        {/* Información de secciones y preguntas (solo para formularios en creación) */}
+        {seccionesInfo && (
+          <div className="mb-3">
+            <div className="py-2 px-3 bg-light rounded">
+              <div className="d-flex justify-content-between align-items-center text-sm">
+                <div className="d-flex align-items-center">
+                  <i className="bi bi-list-task me-2 text-success"></i>
+                  <span className="fw-semibold">
+                    {seccionesInfo.totalSecciones} sección
+                    {seccionesInfo.totalSecciones !== 1 ? 'es' : ''}
+                  </span>
+                </div>
+                <div className="d-flex align-items-center">
+                  <i className="bi bi-question-circle me-2 text-warning"></i>
+                  <span className="fw-semibold">
+                    {seccionesInfo.totalPreguntas} pregunta
+                    {seccionesInfo.totalPreguntas !== 1 ? 's' : ''}
+                  </span>
+                </div>
+              </div>
+            </div>
+          </div>
+        )}
+
+        {/* Botón de acción */}
+        <div className="d-grid gap-2">
+          <button className="btn btn-primary rounded-pill" disabled>
+            Ver/Editar formulario
+          </button>
+          <button
+            className="btn btn-outline-success btn-sm rounded-pill"
+            disabled
+          >
+            <i className="bi bi-download me-2"></i>
+            Descargar respuestas
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/src/components/formulario/formulario-card-user.tsx b/src/components/formulario/formulario-card-user.tsx
new file mode 100644
index 0000000..c3fd5ab
--- /dev/null
+++ b/src/components/formulario/formulario-card-user.tsx
@@ -0,0 +1,211 @@
+'use client';
+import { CuestionarioWithCupo, GetEvento } from '@/types/evento';
+import Image from 'next/image';
+import Link from 'next/link';
+import React, { useState } from 'react';
+import MarkdownRenderer from '../markdown-render';
+import { toParam } from '@/utils/slugify';
+import { formatearFechaCard, formatearHorario } from '@/utils/date-utils';
+import Button from '../button';
+
+export default function FormularioCardUser({
+  evento,
+  formulario,
+}: {
+  evento: GetEvento;
+  formulario: CuestionarioWithCupo;
+}) {
+  const [verMas, setVerMas] = useState(false);
+  const descripcion = formulario.descripcion ?? '';
+  const limite = 100;
+
+  // Determinar si hay cupos disponibles
+  const sinCupos =
+    formulario.cupo_maximo !== null && formulario.cupos_disponibles <= 0;
+
+  // Verificar si el evento es el mismo día
+  const fechaInicio = new Date(formulario.fecha_inicio);
+  const fechaFin = new Date(formulario.fecha_fin);
+  const esElMismoDia = fechaInicio.toDateString() === fechaFin.toDateString();
+
+  // Obtener información de fecha formateada usando las utilidades
+  const { mesTexto, diaTexto } = formatearFechaCard(
+    formulario.fecha_inicio,
+    formulario.fecha_fin
+  );
+
+  // Obtener horario formateado si es el mismo día
+  const horarioFormateado = esElMismoDia
+    ? formatearHorario(formulario.fecha_inicio, formulario.fecha_fin)
+    : null;
+
+  const descripcionRecortada =
+    descripcion.length > limite && !verMas
+      ? `${descripcion.slice(0, limite)}...`
+      : descripcion;
+
+  const imgSrc = formulario.banner
+    ? `${process.env.NEXT_PUBLIC_API_URL}/banners/${formulario.banner}`
+    : evento.banner
+    ? `${process.env.NEXT_PUBLIC_API_URL}/banners/${evento.banner}`
+    : `/default-banner.png`;
+
+  return (
+    <div
+      className="card shadow-sm border-0"
+      style={{ borderRadius: '12px', overflow: 'hidden' }}
+    >
+      <div className="position-relative">
+        {sinCupos ? (
+          <div className="position-relative">
+            <Image
+              width={400}
+              height={250}
+              className="img-fluid w-100"
+              src={imgSrc}
+              alt="Banner formulario"
+              style={{
+                objectFit: 'cover',
+                height: '200px',
+                filter: 'grayscale(50%) opacity(0.7)',
+              }}
+            />
+            <div className="position-absolute top-50 start-50 translate-middle bg-gradient bg-black bg-opacity-75 text-white px-3 py-2 rounded-pill">
+              Sin cupos disponibles
+            </div>
+          </div>
+        ) : (
+          <Link
+            href={`/evento/${toParam(
+              evento.nombre_evento,
+              evento.id_evento
+            )}/${toParam(formulario.nombre_form, formulario.id_cuestionario)}`}
+          >
+            <Image
+              width={400}
+              height={250}
+              className="img-fluid w-100"
+              src={imgSrc}
+              alt="Banner formulario"
+              style={{ objectFit: 'cover', height: '200px' }}
+            />
+          </Link>
+        )}
+
+        {/* Badge de cupos en la esquina superior derecha */}
+        <div className="position-absolute top-0 end-0 m-2">
+          <span className="badge bg-primary">
+            {formulario.tipoCuestionario.tipo_cuestionario}{' '}
+          </span>
+        </div>
+      </div>
+
+      <div className="card-body p-3 d-flex flex-column">
+        {/* Fecha del evento */}
+        <div className="d-flex align-items-center mb-2">
+          <div className="me-3">
+            <div className="text-muted text-center small">{mesTexto}</div>
+            <div
+              className="fw-bold h4 mb-0"
+              style={{ lineHeight: 1, whiteSpace: 'nowrap' }}
+            >
+              {diaTexto}
+            </div>
+          </div>
+          <div>
+            <span className="text-muted fw-bold">{evento.nombre_evento}</span>
+            <h5 className="card-title mb-1 fw-bold">
+              {formulario.nombre_form}
+            </h5>
+            {formulario.tipoEvento && (
+              <h6 className="small text-muted">
+                {formulario.tipoEvento.tipo_evento}
+              </h6>
+            )}
+          </div>
+        </div>
+
+        {/* Descripción */}
+        <div className="card-description flex-grow-1 mb-2">
+          <MarkdownRenderer markdown={descripcionRecortada} />
+          {descripcion.length > limite && (
+            <button
+              onClick={() => setVerMas(!verMas)}
+              className="btn btn-link btn-sm p-0 ms-1 align-baseline text-decoration-none"
+              style={{ fontSize: '0.875rem' }}
+            >
+              {verMas ? 'Ver menos' : 'Ver más'}
+            </button>
+          )}
+        </div>
+
+        {/* Información de cupos y estadísticas */}
+        <div className="row mb-3">
+          {/* Columna de horario - solo visible si es el mismo día */}
+          {esElMismoDia && (
+            <div className="col-6">
+              <div
+                className={`py-2 px-3 rounded ${
+                  sinCupos ? 'bg-primary-subtle' : 'bg-light'
+                }`}
+              >
+                <div className="d-flex align-items-center">
+                  <i className={`bi bi-clock me-2 text-azul`}></i>
+                  <div>
+                    <small className="text-muted d-block">Horario</small>
+                    <span className={`fw-semibold text-azul`}>
+                      {horarioFormateado}
+                    </span>
+                  </div>
+                </div>
+              </div>
+            </div>
+          )}
+          {/* Columna de cupos - siempre visible */}
+          <div className={esElMismoDia ? 'col-6' : 'col-12'}>
+            <div
+              className={`py-2 px-3 rounded ${
+                sinCupos ? 'bg-primary-subtle' : 'bg-light'
+              }`}
+            >
+              <div className="d-flex align-items-center">
+                <i className={`bi bi-people-fill me-2 text-primary`}></i>
+                <div>
+                  <small className="text-muted d-block">Cupos</small>
+                  <span className={`fw-semibold text-primary`}>
+                    {formulario.cupo_maximo !== null
+                      ? `${formulario.cupos_usados} / ${formulario.cupo_maximo}`
+                      : 'Sin límite'}
+                  </span>
+                  {sinCupos && (
+                    <div className="small text-primary mt-1">
+                      <i className="bi bi-exclamation-circle me-1"></i>
+                      Cupos agotados
+                    </div>
+                  )}
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        {/* Botón de registro */}
+        {sinCupos ? (
+          <Button disabled className="rounded-pill">
+            Sin cupos disponibles
+          </Button>
+        ) : (
+          <Link
+            href={`/evento/${toParam(
+              evento.nombre_evento,
+              evento.id_evento
+            )}/${toParam(formulario.nombre_form, formulario.id_cuestionario)}`}
+            className="btn btn-primary w-100 rounded-pill"
+          >
+            Registro
+          </Link>
+        )}
+      </div>
+    </div>
+  );
+}
diff --git a/src/components/navbar.tsx b/src/components/navbar.tsx
index 18c9c3f..09577cb 100644
--- a/src/components/navbar.tsx
+++ b/src/components/navbar.tsx
@@ -1,9 +1,22 @@
-import React from "react";
-import Link from "next/link";
+'use client';
+import React from 'react';
+import Link from 'next/link';
+import { usePathname } from 'next/navigation';
 
 const Navbar: React.FC = () => {
+  const pathname = usePathname();
+
+  const navItems = [
+    { href: '/', label: 'Inicio' },
+    { href: '/user/eventos', label: 'Eventos' },
+    { href: '/user/qr', label: 'Lector de QRs' },
+    { href: '/user/eventos/crear', label: 'Crear Evento' },
+    { href: '/user/usuarios', label: 'Usuarios' },
+    { href: '/signout', label: 'Cerrar sesión' },
+  ];
+
   return (
-    <nav className="navbar navbar-expand-lg navbar-light bg-transparent fixed-top">
+    <nav className="navbar navbar-expand-lg navbar-dark bg-azul">
       <div className="container">
         <button
           className="navbar-toggler border-0 ms-auto"
@@ -31,38 +44,27 @@ const Navbar: React.FC = () => {
               aria-label="Close"
             ></button>
           </div>
-          <div className="offcanvas-body justify-content-center">
+          <div className="offcanvas-body align-items-center justify-content-between">
+            <h2 className="h5 mb-0 text-white">
+              Sistema de Registro de Eventos
+            </h2>
             <ul className="navbar-nav gap-lg-5">
-              <li className="nav-item" data-bs-dismiss="offcanvas">
-                <Link className="nav-link" href="/">
-                  Inicio
-                </Link>
-              </li>
-              <li className="nav-item" data-bs-dismiss="offcanvas">
-                <Link className="nav-link" href="/table">
-                  Table
-                </Link>
-              </li>
-              <li className="nav-item" data-bs-dismiss="offcanvas">
-                <Link className="nav-link" href="/input">
-                  Input
-                </Link>
-              </li>
-              <li className="nav-item" data-bs-dismiss="offcanvas">
-                <Link className="nav-link" href="/pagination">
-                  Pagination
-                </Link>
-              </li>
-              <li className="nav-item" data-bs-dismiss="offcanvas">
-                <Link className="nav-link" href="/options">
-                  Options
-                </Link>
-              </li>
-              <li className="nav-item" data-bs-dismiss="offcanvas">
-                <Link className="nav-link" href="/styles">
-                  Styles
-                </Link>
-              </li>
+              {navItems.map((item, index) => (
+                <li
+                  key={index}
+                  className={`nav-item`}
+                  data-bs-dismiss="offcanvas"
+                >
+                  <Link
+                    className={`nav-link ${
+                      pathname === item.href ? 'text-white' : ''
+                    }`}
+                    href={item.href}
+                  >
+                    {item.label}
+                  </Link>
+                </li>
+              ))}
             </ul>
           </div>
         </div>
diff --git a/src/components/new-cuestionario-card.tsx b/src/components/new-cuestionario-card.tsx
new file mode 100644
index 0000000..a80a486
--- /dev/null
+++ b/src/components/new-cuestionario-card.tsx
@@ -0,0 +1,141 @@
+'use client';
+import { CuestionarioWithCupo } from '@/types/evento';
+import Image from 'next/image';
+import Link from 'next/link';
+import React, { useState } from 'react';
+import MarkdownRenderer from './markdown-render';
+import { formatearRangoFechas } from '@/utils/date-utils';
+
+export default function NewCuestionarioCard({
+  cuestionario,
+  user = 'public',
+  onDownload,
+  loading = false,
+}: {
+  cuestionario: CuestionarioWithCupo;
+  user?: 'public' | 'administrador' | 'staff';
+  onDownload?: (id_cuestionario: number, nombre: string) => void;
+  loading?: boolean;
+}) {
+  const [verMas, setVerMas] = useState(false);
+  const descripcion = cuestionario.descripcion ?? '';
+  const limite = 100;
+
+  const descripcionRecortada =
+    descripcion.length > limite && !verMas
+      ? `${descripcion.slice(0, limite)}...`
+      : descripcion;
+
+  return (
+    <div className="card card-blog d-flex flex-column justify-content-between">
+      <div>
+        <div className="card-image scale-hover-1">
+          <Link
+            href={
+              user === 'administrador' || user === 'staff'
+                ? `/${user}/evento/${cuestionario.id_evento}`
+                : `/evento/${cuestionario.nombre_form.split(' ').join('_')}/${
+                    cuestionario.id_evento
+                  }/${cuestionario.id_cuestionario}`
+            }
+          >
+            <Image
+              width={400}
+              height={300}
+              className="img-fluid"
+              src={`${process.env.NEXT_PUBLIC_API_URL}/banners/${cuestionario.banner}`}
+              alt="Banner formulario"
+            />
+            <div className="card-caption">{cuestionario.nombre_form}</div>
+          </Link>
+          <div className="ripple-cont"></div>
+        </div>
+
+        <div className="card-body">
+          <div className="card-description mb-0">
+            {cuestionario.cupo_maximo === null ? (
+              <span className="badge bg-success mb-2">Sin límite</span>
+            ) : (
+              <span className="badge bg-primary mb-2">
+                {cuestionario.cupos_disponibles} cupos disponibles
+              </span>
+            )}
+            <MarkdownRenderer markdown={descripcionRecortada} />
+            {descripcion.length > limite && (
+              <button
+                onClick={() => setVerMas(!verMas)}
+                className="btn btn-link btn-sm p-0 ms-1 align-baseline"
+                style={{ fontSize: '0.875rem' }}
+              >
+                {verMas ? 'Ver menos' : 'Ver más'}
+              </button>
+            )}
+          </div>
+          <span className="badge fs-6 w-100 bg-primary">
+            Evento{' '}
+            {formatearRangoFechas(
+              cuestionario.fecha_inicio,
+              cuestionario.fecha_fin
+            )}
+          </span>
+          <div className="">
+            {user === 'administrador' || user === 'staff' ? (
+              <>
+                <Link
+                  href={`/${user}/evento/${cuestionario.id_evento}/formulario/${cuestionario.id_cuestionario}`}
+                  className="btn mt-2 w-100 btn-outline-primary"
+                >
+                  Ver formulario
+                </Link>
+                {user === 'administrador' && onDownload && (
+                  <button
+                    className="btn mt-2 w-100 btn-success"
+                    onClick={() =>
+                      onDownload(
+                        cuestionario.id_cuestionario,
+                        cuestionario.nombre_form
+                      )
+                    }
+                    disabled={loading}
+                  >
+                    {loading ? (
+                      <>
+                        <span
+                          className="spinner-border spinner-border-sm me-2"
+                          role="status"
+                          aria-hidden="true"
+                        ></span>
+                        Descargando...
+                      </>
+                    ) : (
+                      <>
+                        <i className="bi bi-download me-2"></i>
+                        Descargar respuestas
+                      </>
+                    )}
+                  </button>
+                )}
+              </>
+            ) : cuestionario.cupos_disponibles === 0 &&
+              cuestionario.cupo_maximo !== null ? (
+              <button className="btn mt-2 w-100 btn-outline-secondary" disabled>
+                Cupo lleno
+              </button>
+            ) : (
+              <Link
+                href={`/evento/${cuestionario.nombre_form
+                  .split(' ')
+                  .join('_')}/${cuestionario.id_evento}/${
+                  cuestionario.id_cuestionario
+                }`}
+                className="btn mt-2 w-100 btn-outline-primary"
+              >
+                Registro
+              </Link>
+            )}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/src/components/select.tsx b/src/components/select.tsx
index 364d43c..b8a2666 100644
--- a/src/components/select.tsx
+++ b/src/components/select.tsx
@@ -1,6 +1,6 @@
 import React, { useId } from 'react';
 
-interface Option {
+export interface Option {
   value: string | number;
   label: string;
 }
@@ -74,7 +74,10 @@ const Select: React.FC<SelectProps> = ({
 
   return (
     <div className={`mb-3 ${className?.container ?? ''}`}>
-      <label htmlFor={selectId} className={`form-label ${className?.label ?? ''}`}>
+      <label
+        htmlFor={selectId}
+        className={`form-label ${className?.label ?? ''}`}
+      >
         {label}
       </label>
       <select
diff --git a/src/containers/create-evento.tsx b/src/containers/create-evento.tsx
index 4885b75..50eccd4 100644
--- a/src/containers/create-evento.tsx
+++ b/src/containers/create-evento.tsx
@@ -2,7 +2,9 @@
 import ImageUploader from '@/components/banner-uploader';
 import Input from '@/components/input';
 import Select from '@/components/select';
+import { useGetApi } from '@/hooks/use-get-api';
 import { CreateEventoType } from '@/types/create-evento';
+import { TipoEvento } from '@/types/evento';
 import { formatDateLocal } from '@/utils/date-utils';
 import { commands } from '@uiw/react-md-editor';
 import dynamic from 'next/dynamic';
@@ -23,15 +25,33 @@ export default function CreateEvento({
   handleChange,
   handleBannerChange,
 }: CreateEventoProps) {
+  const { data: tipo_eventos } = useGetApi<TipoEvento[]>('tipo-evento');
   return (
-    <div className="row border p-3 rounded my-4">
-      <h2>Información del Evento</h2>
-      <p>
-        Completa la siguiente información para describir los detalles generales
-        del evento.
-      </p>
-
-      <ImageUploader label="Banner del evento" onChange={handleBannerChange} />
+    <div className="mt-2">
+      <h4 className="mb-3">Detalles del Evento</h4>
+      <div className="mb-2">
+        <ImageUploader
+          label="Banner del evento"
+          onChange={handleBannerChange}
+          showPreview={false}
+        />
+        <p className="text-muted mt-2 mb-0 small">
+          <strong>
+            <i className="bi bi-info-circle-fill me-2"></i>
+            Esta es la imagen que se verá en el carrusel del evento.
+          </strong>
+          <br />
+          <strong>
+            <i className="bi bi-image me-2"></i>
+            Dimensiones recomendadas: 1200x600 píxeles.
+          </strong>
+          <br />
+          <strong>
+            <i className="bi bi-file-earmark-image me-2"></i>
+            Formatos soportados: PNG, JPG, JPEG.
+          </strong>
+        </p>
+      </div>
 
       <Input
         label="Nombre del evento"
@@ -51,53 +71,49 @@ export default function CreateEvento({
                 handleChange('descripcion_evento', texto);
               }
             }}
-            height={300}
+            height={200}
             commands={[commands.bold, commands.italic, commands.hr]}
           />
         </div>
       </div>
 
-      <Select
-        label="Tipo de evento"
-        value={evento.tipo_evento}
-        placeholder="Selecciona un tipo de evento"
-        onChange={(e) => handleChange('tipo_evento', e.target.value)}
-        options={[
-          { label: 'Conferencia', value: 'conferencia' },
-          { label: 'Taller', value: 'taller' },
-          { label: 'Seminario', value: 'seminario' },
-          { label: 'Curso', value: 'curso' },
-          { label: 'Webinar', value: 'webinar' },
-          { label: 'Reunión', value: 'reunion' },
-          { label: 'Feria', value: 'feria' },
-          { label: 'Concierto', value: 'concierto' },
-          { label: 'Exposición', value: 'exposicion' },
-          { label: 'Deportivo', value: 'deportivo' },
-          { label: 'Cultural', value: 'cultural' },
-          { label: 'Otro', value: 'otro' },
-        ]}
-      />
-
-      <div className="col-md-6">
-        <Input
-          label="Fecha de inicio"
-          type="datetime-local"
-          className={{ container: 'mb-3' }}
-          value={formatDateLocal(evento.fecha_inicio)}
-          onChange={(e) =>
-            handleChange('fecha_inicio', new Date(e.target.value))
-          }
+      {tipo_eventos && (
+        <Select
+          label="Tipo de evento"
+          value={evento.tipo_evento}
+          placeholder="Selecciona un tipo de evento"
+          onChange={(e) => handleChange('tipo_evento', e.target.value)}
+          options={tipo_eventos.map((tipo) => ({
+            value: tipo.id_tipo_evento,
+            label: tipo.tipo_evento,
+          }))}
         />
-      </div>
+      )}
 
-      <div className="col-md-6">
-        <Input
-          label="Fecha de fin"
-          type="datetime-local"
-          className={{ container: 'mb-3' }}
-          value={formatDateLocal(evento.fecha_fin)}
-          onChange={(e) => handleChange('fecha_fin', new Date(e.target.value))}
-        />
+      <div className="row">
+        <div className="col-md-6">
+          <Input
+            label="Fecha de inicio"
+            type="datetime-local"
+            className={{ container: 'mb-3' }}
+            value={formatDateLocal(evento.fecha_inicio)}
+            onChange={(e) =>
+              handleChange('fecha_inicio', new Date(e.target.value))
+            }
+          />
+        </div>
+
+        <div className="col-md-6">
+          <Input
+            label="Fecha de fin"
+            type="datetime-local"
+            className={{ container: 'mb-3' }}
+            value={formatDateLocal(evento.fecha_fin)}
+            onChange={(e) =>
+              handleChange('fecha_fin', new Date(e.target.value))
+            }
+          />
+        </div>
       </div>
     </div>
   );
diff --git a/src/containers/create-formulario.tsx b/src/containers/create-formulario.tsx
index 458a1fa..348c04c 100644
--- a/src/containers/create-formulario.tsx
+++ b/src/containers/create-formulario.tsx
@@ -5,12 +5,16 @@ import {
   TiposValidacion,
 } from '@/types/create-formulario';
 import SimpleInput from '@/components/input';
-import Select from '@/components/select';
+import Select, { Option } from '@/components/select';
 import Button from '@/components/button';
+import { GetEventoWithCuestionariosWithCupos } from '@/types/evento';
+import { formatearRangoFechas } from '@/utils/date-utils';
 
 interface Props {
+  evento?: GetEventoWithCuestionariosWithCupos;
   formulario: FormularioCreacion;
   onChange: (formularioActualizado: FormularioCreacion) => void;
+  tipo_eventos?: Option[];
 }
 
 const tipoPreguntaOpciones: TipoPregunta[] = [
@@ -49,7 +53,12 @@ const tiposCuestionario = [
   { label: 'Evaluación', value: 2 },
 ];
 
-export default function FormularioEditor({ formulario, onChange }: Props) {
+export default function FormularioEditor({
+  formulario,
+  onChange,
+  evento,
+  tipo_eventos,
+}: Props) {
   function actualizarCampo<K extends keyof FormularioCreacion>(
     campo: K,
     valor: FormularioCreacion[K]
@@ -139,28 +148,31 @@ export default function FormularioEditor({ formulario, onChange }: Props) {
     onChange(actualizado);
   };
 
-  return (
-    <div className="row border p-3 rounded my-4">
-      <h2 className="mb-3">Editar Formulario</h2>
+  // Renderizar solo información básica del formulario
+  const renderInformacionBasica = () => (
+    <div className="p-4">
+      <h4 className="mb-3">Información del Formulario</h4>
 
-      <div className="col-md-8">
-        <SimpleInput
-          label="Nombre del Formulario"
-          value={formulario.nombre_form}
-          onChange={(e) => actualizarCampo('nombre_form', e.target.value)}
-        />
-      </div>
+      <div className="row">
+        <div className="col-md-8">
+          <SimpleInput
+            label="Nombre del Formulario"
+            value={formulario.nombre_form}
+            onChange={(e) => actualizarCampo('nombre_form', e.target.value)}
+          />
+        </div>
 
-      <div className="col-md-4">
-        <SimpleInput
-          label="Cupo máximo (Si no se requiere, dejar en blanco)"
-          type="number"
-          required
-          value={formulario.cupo_maximo}
-          onChange={(e) =>
-            actualizarCampo('cupo_maximo', Number(e.target.value))
-          }
-        />
+        <div className="col-md-4">
+          <SimpleInput
+            label="Cupo máximo"
+            type="number"
+            placeholder="Opcional"
+            value={formulario.cupo_maximo || ''}
+            onChange={(e) =>
+              actualizarCampo('cupo_maximo', Number(e.target.value) || 0)
+            }
+          />
+        </div>
       </div>
 
       <SimpleInput
@@ -173,7 +185,7 @@ export default function FormularioEditor({ formulario, onChange }: Props) {
         <div className="col-md-6">
           <SimpleInput
             label="Fecha de Inicio"
-            type="date"
+            type="datetime-local"
             value={formulario.fecha_inicio.slice(0, 16)}
             onChange={(e) => actualizarCampo('fecha_inicio', e.target.value)}
           />
@@ -181,30 +193,72 @@ export default function FormularioEditor({ formulario, onChange }: Props) {
         <div className="col-md-6">
           <SimpleInput
             label="Fecha de Fin"
-            type="date"
+            type="datetime-local"
             value={formulario.fecha_fin.slice(0, 16)}
             onChange={(e) => actualizarCampo('fecha_fin', e.target.value)}
           />
         </div>
       </div>
 
-      <Select
-        label="Tipo de Cuestionario"
-        value={formulario.id_tipo_cuestionario}
-        onChange={(e) =>
-          actualizarCampo('id_tipo_cuestionario', Number(e.target.value))
-        }
-        options={tiposCuestionario}
-        placeholder="Selecciona un tipo"
-      />
+      {evento && (
+        <div className="alert alert-primary d-flex align-items-center">
+          <i className="bi bi-info-circle-fill me-2"></i>
+          <div>
+            <strong>Evento:</strong> {evento.nombre_evento}
+            <br />
+            <small>
+              Se realizará{' '}
+              {formatearRangoFechas(evento.fecha_inicio, evento.fecha_fin)}
+            </small>
+          </div>
+        </div>
+      )}
 
-      <hr className="my-4" />
+      <div className="row">
+        <div className="col-md-6">
+          <Select
+            label="Tipo de Cuestionario"
+            value={formulario.id_tipo_cuestionario}
+            onChange={(e) =>
+              actualizarCampo('id_tipo_cuestionario', Number(e.target.value))
+            }
+            options={tiposCuestionario}
+            placeholder="Selecciona un tipo"
+          />
+        </div>
+        <div className="col-md-6">
+          <Select
+            label="Tipo de evento"
+            value={formulario.id_tipo_evento}
+            onChange={(e) =>
+              actualizarCampo('id_tipo_evento', Number(e.target.value))
+            }
+            options={tipo_eventos!}
+            placeholder="Selecciona un tipo"
+          />
+        </div>
+      </div>
+    </div>
+  );
+
+  // Renderizar secciones y preguntas
+  const renderSeccionesYPreguntas = () => (
+    <div className="mt-4">
+      <div className="d-flex justify-content-between align-items-center mb-4">
+        <h4 className="mb-0">Secciones y Preguntas</h4>
+        <Button
+          className="btn btn-success"
+          onClick={agregarSeccion}
+          icon="plus"
+        >
+          Agregar sección
+        </Button>
+      </div>
 
-      {/* Secciones */}
       {formulario.secciones.map((seccion, seccionIdx) => (
         <div key={seccionIdx} className="mb-4 p-3 border rounded bg-light">
           <div className="d-flex justify-content-between align-items-center mb-2">
-            <h4 className="mb-0">Sección {seccionIdx + 1}</h4>
+            <h5 className="mb-0">Sección {seccionIdx + 1}</h5>
             <Button
               variant="danger"
               icon="trash"
@@ -303,6 +357,7 @@ export default function FormularioEditor({ formulario, onChange }: Props) {
                   />
                 </div>
               </div>
+
               <div className="form-check mb-2">
                 <input
                   className="form-check-input"
@@ -363,16 +418,11 @@ export default function FormularioEditor({ formulario, onChange }: Props) {
           </Button>
         </div>
       ))}
-
-      <div className="text-center mt-4">
-        <Button
-          className="btn btn-success"
-          onClick={agregarSeccion}
-          icon="plus"
-        >
-          Agregar sección
-        </Button>
-      </div>
     </div>
   );
+
+  return {
+    informacionBasica: renderInformacionBasica,
+    seccionesYPreguntas: renderSeccionesYPreguntas,
+  };
 }
diff --git a/src/containers/edit-evento.tsx b/src/containers/edit-evento.tsx
index 215c90a..151c939 100644
--- a/src/containers/edit-evento.tsx
+++ b/src/containers/edit-evento.tsx
@@ -3,9 +3,11 @@ import ImageUploader from '@/components/banner-uploader';
 import Button from '@/components/button';
 import Input from '@/components/input';
 import Select from '@/components/select';
+import EventoCardPreview from '@/components/evento/evento-card-preview';
 import { CreateEventoType } from '@/types/create-evento';
-import { GetEventoWithCuestionarios } from '@/types/evento';
+import { GetEventoWithCuestionariosWithCupos } from '@/types/evento';
 import axiosInstance from '@/utils/api-config';
+import { tipoEventos } from '@/utils/arrays';
 import { formatDateLocal } from '@/utils/date-utils';
 import { getAxiosError } from '@/utils/errors-utils';
 import { commands } from '@uiw/react-md-editor';
@@ -14,10 +16,14 @@ import React, { useState } from 'react';
 import toast from 'react-hot-toast';
 const MDEditor = dynamic(() => import('@uiw/react-md-editor'), { ssr: false });
 
+const MAX_LENGTH = 500;
+
 interface EditEventoProps {
-  evento: GetEventoWithCuestionarios;
+  evento: GetEventoWithCuestionariosWithCupos;
   handleChange: (field: keyof CreateEventoType, value: string | Date) => void;
-  handleOnChange: (eventoActualizado: GetEventoWithCuestionarios) => void;
+  handleOnChange: (
+    eventoActualizado: GetEventoWithCuestionariosWithCupos
+  ) => void;
 }
 
 export default function EditEvento({
@@ -25,7 +31,6 @@ export default function EditEvento({
   handleChange,
   handleOnChange,
 }: EditEventoProps) {
-
   const [loading, setLoading] = useState(false);
   const [nuevoBanner, setNuevoBanner] = useState<File | null>(null);
 
@@ -67,94 +72,161 @@ export default function EditEvento({
     }
   };
 
+  // Convertir evento a CreateEventoType para el preview
+  const eventoPreview: CreateEventoType = {
+    tipo_evento: evento.tipo_evento,
+    nombre_evento: evento.nombre_evento,
+    descripcion_evento: evento.descripcion_evento,
+    fecha_inicio: new Date(evento.fecha_inicio),
+    fecha_fin: new Date(evento.fecha_fin),
+  };
+
   return (
-    <div className="row border p-3 rounded my-4">
-      <h2>Editar Información del Evento</h2>
-      <p>Modifica los datos del evento que desees actualizar.</p>
-
-      <ImageUploader
-        label="Banner del evento"
-        defaultBanner={
-          evento.banner
-            ? `${process.env.NEXT_PUBLIC_API_URL}/banners/${evento.banner}`
-            : undefined
-        }
-        onChange={(file) => {
-          setNuevoBanner(file);
-        }}
-      />
-
-      <Input
-        label="Nombre del evento"
-        required
-        value={evento.nombre_evento}
-        onChange={(e) => handleChange('nombre_evento', e.target.value)}
-      />
-
-      <div className="mb-4">
-        <label className="form-label">Descripción del evento</label>
-        <div data-color-mode="light">
-          <MDEditor
-            value={evento.descripcion_evento ?? ''}
-            onChange={(value) => {
-              const texto = value || '';
-              if (texto.length <= 500) {
-                handleChange('descripcion_evento', texto);
-              }
-            }}
-            height={250}
-            commands={[commands.bold, commands.italic, commands.hr]}
-          />
+    <div className="container-fluid my-4">
+      {/* Header */}
+      <div className="row mb-4">
+        <div className="col-12">
+          <div className="p-4 border rounded bg-light">
+            <h2 className="mb-2">Editar Información del Evento</h2>
+            <p className="mb-0 text-muted">
+              Modifica los datos del evento que desees actualizar y confirmalos.
+            </p>
+          </div>
         </div>
       </div>
 
-      <Select
-        label="Tipo de evento"
-        value={evento.tipo_evento}
-        placeholder="Selecciona un tipo de evento"
-        onChange={(e) => handleChange('tipo_evento', e.target.value)}
-        options={[
-          { label: 'Conferencia', value: 'conferencia' },
-          { label: 'Taller', value: 'taller' },
-          { label: 'Seminario', value: 'seminario' },
-          { label: 'Curso', value: 'curso' },
-          { label: 'Webinar', value: 'webinar' },
-          { label: 'Reunión', value: 'reunion' },
-          { label: 'Feria', value: 'feria' },
-          { label: 'Concierto', value: 'concierto' },
-          { label: 'Exposición', value: 'exposicion' },
-          { label: 'Deportivo', value: 'deportivo' },
-          { label: 'Cultural', value: 'cultural' },
-          { label: 'Otro', value: 'otro' },
-        ]}
-      />
+      <div className="row">
+        {/* Columna Izquierda - Formulario */}
+        <div className="col-xl-7 col-lg-6">
+          <div className="pe-lg-4">
+            <div className="p-4">
+              {/* Banner */}
+              <div className="mb-4">
+                <ImageUploader
+                  label="Banner del evento"
+                  defaultBanner={
+                    evento.banner
+                      ? `${process.env.NEXT_PUBLIC_API_URL}/banners/${evento.banner}`
+                      : undefined
+                  }
+                  onChange={(file) => {
+                    setNuevoBanner(file);
+                  }}
+                />
+                <p className="text-muted mt-2 small">
+                  <strong>
+                    <i className="bi bi-info-circle-fill me-2"></i>
+                    Esta es la imagen que se verá en el carrusel del evento.
+                  </strong>
+                  <br />
+                  <strong>
+                    <i className="bi bi-image me-2"></i>
+                    Dimensiones recomendadas: 1200x600 píxeles.
+                  </strong>
+                  <br />
+                  <strong>
+                    <i className="bi bi-file-earmark-image me-2"></i>
+                    Formatos soportados: PNG, JPG, JPEG.
+                  </strong>
+                </p>
+              </div>
 
-      <div className="col-md-6">
-        <Input
-          label="Fecha de inicio"
-          type="datetime-local"
-          className={{ container: 'mb-3' }}
-          value={formatDateLocal(new Date(evento.fecha_inicio))}
-          onChange={(e) =>
-            handleChange('fecha_inicio', new Date(e.target.value))
-          }
-        />
-      </div>
+              {/* Detalles del evento */}
+              <div className="col-12">
+                <h4 className="mb-3">Detalles del Evento</h4>
 
-      <div className="col-md-6">
-        <Input
-          label="Fecha de fin"
-          type="datetime-local"
-          className={{ container: 'mb-3' }}
-          value={formatDateLocal(new Date(evento.fecha_fin))}
-          onChange={(e) => handleChange('fecha_fin', new Date(e.target.value))}
-        />
-      </div>
+                <Input
+                  label="Nombre del evento"
+                  required
+                  value={evento.nombre_evento}
+                  onChange={(e) =>
+                    handleChange('nombre_evento', e.target.value)
+                  }
+                />
 
-      <div>
-        <Button icon="save" disabled={loading} onClick={handleOnSave}>
-          {loading ? 'Guardando...' : 'Guardar Cambios'}
-        </Button>
+                <div className="mb-4">
+                  <label className="form-label">Descripción del evento</label>
+                  <div data-color-mode="light">
+                    <MDEditor
+                      value={evento.descripcion_evento ?? ''}
+                      onChange={(value) => {
+                        const texto = value || '';
+                        if (texto.length <= MAX_LENGTH) {
+                          handleChange('descripcion_evento', texto);
+                        }
+                      }}
+                      height={200}
+                      commands={[commands.bold, commands.italic, commands.hr]}
+                    />
+                  </div>
+                </div>
+
+                <Select
+                  label="Tipo de evento"
+                  value={evento.tipo_evento}
+                  placeholder="Selecciona un tipo de evento"
+                  onChange={(e) => handleChange('tipo_evento', e.target.value)}
+                  options={tipoEventos}
+                />
+
+                <div className="row">
+                  <div className="col-md-6">
+                    <Input
+                      label="Fecha de inicio"
+                      type="datetime-local"
+                      className={{ container: 'mb-3' }}
+                      value={formatDateLocal(new Date(evento.fecha_inicio))}
+                      onChange={(e) =>
+                        handleChange('fecha_inicio', new Date(e.target.value))
+                      }
+                    />
+                  </div>
+
+                  <div className="col-md-6">
+                    <Input
+                      label="Fecha de fin"
+                      type="datetime-local"
+                      className={{ container: 'mb-3' }}
+                      value={formatDateLocal(new Date(evento.fecha_fin))}
+                      onChange={(e) =>
+                        handleChange('fecha_fin', new Date(e.target.value))
+                      }
+                    />
+                  </div>
+                </div>
+              </div>
+
+              {/* Botón de guardar */}
+              <div className="d-flex justify-content-end mt-4">
+                <Button icon="save" disabled={loading} onClick={handleOnSave}>
+                  {loading ? 'Guardando...' : 'Guardar Cambios'}
+                </Button>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        {/* Columna Derecha - Preview */}
+        <div className="col-xl-5 col-lg-6">
+          <div className="ps-lg-4">
+            <div className="sticky-top" style={{ top: '20px' }}>
+              <h4 className="mb-3 d-none d-lg-block">Preview del Evento</h4>
+              <div className="d-lg-none mt-4">
+                <h4 className="mb-3">Preview del Evento</h4>
+              </div>
+              <EventoCardPreview
+                evento={eventoPreview}
+                eventoBanner={nuevoBanner}
+                existingBanner={evento.banner}
+                cuestionariosCount={evento.cuestionarios?.length || 0}
+              />
+              <div className="alert alert-info text-center mt-3">
+                <strong>Vista previa:</strong> Así se verá tu evento en las
+                listas de eventos.
+              </div>
+            </div>
+          </div>
+        </div>
       </div>
     </div>
   );
diff --git a/src/containers/edit-formulario.tsx b/src/containers/edit-formulario.tsx
index bed9a48..3d7da8f 100644
--- a/src/containers/edit-formulario.tsx
+++ b/src/containers/edit-formulario.tsx
@@ -1,7 +1,9 @@
 import ImageUploader from '@/components/banner-uploader';
 import Button from '@/components/button';
 import SimpleInput from '@/components/input';
+import FormularioCardPreview from '@/components/formulario/formulario-card-preview';
 import { GetCuestionario } from '@/types/cuestionario';
+import { GetEvento } from '@/types/evento';
 import axiosInstance from '@/utils/api-config';
 import { formatDateLocal } from '@/utils/date-utils';
 import { getAxiosError } from '@/utils/errors-utils';
@@ -11,12 +13,14 @@ import toast from 'react-hot-toast';
 
 interface EditFormularioProps {
   cuestionario: GetCuestionario;
+  evento: GetEvento | null;
   handleChange: (field: keyof GetCuestionario, value: string | Date) => void;
   handleOnChange: (eventoActualizado: GetCuestionario) => void;
 }
 
 export default function EditFormulario({
   cuestionario,
+  evento,
   handleChange,
 }: EditFormularioProps) {
   const [loading, setLoading] = useState(false);
@@ -65,87 +69,179 @@ export default function EditFormulario({
   };
 
   return (
-    <div className="row border p-3 rounded my-4">
-      <h2>Editar Información del formulario</h2>
-      <p>Modifica los datos del evento que desees actualizar.</p>
-
-      <ImageUploader
-        label="Banner del formulario"
-        defaultBanner={
-          cuestionario.banner
-            ? `${process.env.NEXT_PUBLIC_API_URL}/banners/${cuestionario.banner}`
-            : undefined
-        }
-        onChange={(file) => {
-          setNuevoBanner(file);
-        }}
-      />
-
-      <div className="col-md-8">
-        <SimpleInput
-          label="Nombre del formulario"
-          required
-          value={cuestionario.nombre_form}
-          onChange={(e) => handleChange('nombre_form', e.target.value)}
-        />
-      </div>
-      <div className="col-md-4">
-        <SimpleInput
-          label="Cupo máximo (Si no se requiere, dejar en blanco)"
-          type="number"
-          value={cuestionario.cupo_maximo ?? ''}
-          onChange={(e) =>
-            handleChange('cupo_maximo', e.target.value ? e.target.value : '')
-          }
-        />
-      </div>
-
-      <div className="mb-4">
-        <label className="form-label">Descripción del evento</label>
-        <div data-color-mode="light">
-          <MDEditor
-            value={cuestionario.descripcion ?? ''}
-            onChange={(value) => {
-              const texto = value || '';
-              if (texto.length <= 500) {
-                handleChange(
-                  'descripcion' as keyof GetCuestionario,
-                  texto
-                );
-              }
-            }}
-            height={250}
-            commands={[commands.bold, commands.italic, commands.hr]}
-          />
+    <div className="container-fluid my-4">
+      {/* Header */}
+      <div className="row mb-4">
+        <div className="col-12">
+          <div className="p-4 border rounded bg-light">
+            <h2 className="mb-2">Editar Información del Formulario</h2>
+            <p className="mb-0 text-muted">
+              Modifica los datos del formulario que desees actualizar y
+              confirmalos.
+            </p>
+          </div>
         </div>
       </div>
 
-      <div className="col-md-6">
-        <SimpleInput
-          label="Fecha de inicio"
-          type="datetime-local"
-          className={{ container: 'mb-3' }}
-          value={formatDateLocal(new Date(cuestionario.fecha_inicio))}
-          onChange={(e) =>
-            handleChange('fecha_inicio', new Date(e.target.value))
-          }
-        />
-      </div>
+      <div className="row">
+        {/* Columna Izquierda - Formulario */}
+        <div className="col-xl-7 col-lg-6">
+          <div className="pe-lg-4">
+            <div className="p-4">
+              <div className="row">
+                {/* Banner */}
+                <div className="col-12">
+                  <div className="mb-4">
+                    <ImageUploader
+                      label="Banner del formulario"
+                      defaultBanner={
+                        cuestionario.banner
+                          ? `${process.env.NEXT_PUBLIC_API_URL}/banners/${cuestionario.banner}`
+                          : undefined
+                      }
+                      onChange={(file) => {
+                        setNuevoBanner(file);
+                      }}
+                    />
+                    <p className="text-muted mt-2 small">
+                      <strong>
+                        <i className="bi bi-info-circle-fill me-2"></i>
+                        Esta es la imagen que se usara para la carta de
+                        presentación del formulario.
+                      </strong>
+                      <br />
+                      <strong>
+                        <i className="bi bi-image me-2"></i>
+                        Dimensiones recomendadas: 1200x600 píxeles.
+                      </strong>
+                      <br />
+                      <strong>
+                        <i className="bi bi-file-earmark-image me-2"></i>
+                        Formatos soportados: PNG, JPG, JPEG.
+                      </strong>
+                    </p>
 
-      <div className="col-md-6">
-        <SimpleInput
-          label="Fecha de fin"
-          type="datetime-local"
-          className={{ container: 'mb-3' }}
-          value={formatDateLocal(new Date(cuestionario.fecha_fin))}
-          onChange={(e) => handleChange('fecha_fin', new Date(e.target.value))}
-        />
-      </div>
+                    {/* Alert sobre imagen por defecto */}
+                    {!cuestionario.banner && !nuevoBanner && evento?.banner && (
+                      <div className="alert alert-info mt-3">
+                        <i className="bi bi-info-circle me-2"></i>
+                        <strong>Imagen por defecto:</strong> Si no seleccionas
+                        una imagen específica para este formulario, se utilizará
+                        automáticamente la imagen del evento.
+                      </div>
+                    )}
+                  </div>
+                </div>
 
-      <div>
-        <Button icon="save" disabled={loading} onClick={handleOnSave}>
-          {loading ? 'Guardando...' : 'Guardar Cambios'}
-        </Button>
+                {/* Detalles del formulario */}
+                <div className="col-12">
+                  <h4 className="mb-3">Detalles del Formulario</h4>
+
+                  <SimpleInput
+                    label="Nombre del formulario"
+                    required
+                    value={cuestionario.nombre_form}
+                    onChange={(e) =>
+                      handleChange('nombre_form', e.target.value)
+                    }
+                  />
+
+                  <SimpleInput
+                    label="Cupo máximo (Si no se requiere, dejar en blanco)"
+                    type="number"
+                    value={cuestionario.cupo_maximo ?? ''}
+                    onChange={(e) =>
+                      handleChange(
+                        'cupo_maximo',
+                        e.target.value ? e.target.value : ''
+                      )
+                    }
+                  />
+
+                  <div className="mb-4">
+                    <label className="form-label">
+                      Descripción del formulario
+                    </label>
+                    <div data-color-mode="light">
+                      <MDEditor
+                        value={cuestionario.descripcion ?? ''}
+                        onChange={(value) => {
+                          const texto = value || '';
+                          if (texto.length <= 500) {
+                            handleChange(
+                              'descripcion' as keyof GetCuestionario,
+                              texto
+                            );
+                          }
+                        }}
+                        height={200}
+                        commands={[commands.bold, commands.italic, commands.hr]}
+                      />
+                    </div>
+                  </div>
+
+                  <div className="row">
+                    <div className="col-md-6">
+                      <SimpleInput
+                        label="Fecha de inicio"
+                        type="datetime-local"
+                        className={{ container: 'mb-3' }}
+                        value={formatDateLocal(
+                          new Date(cuestionario.fecha_inicio)
+                        )}
+                        onChange={(e) =>
+                          handleChange('fecha_inicio', new Date(e.target.value))
+                        }
+                      />
+                    </div>
+
+                    <div className="col-md-6">
+                      <SimpleInput
+                        label="Fecha de fin"
+                        type="datetime-local"
+                        className={{ container: 'mb-3' }}
+                        value={formatDateLocal(
+                          new Date(cuestionario.fecha_fin)
+                        )}
+                        onChange={(e) =>
+                          handleChange('fecha_fin', new Date(e.target.value))
+                        }
+                      />
+                    </div>
+                  </div>
+                </div>
+              </div>
+
+              {/* Botón de guardar */}
+              <div className="d-flex justify-content-end mt-4">
+                <Button icon="save" disabled={loading} onClick={handleOnSave}>
+                  {loading ? 'Guardando...' : 'Guardar Cambios'}
+                </Button>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        {/* Columna Derecha - Preview */}
+        <div className="col-xl-5 col-lg-6">
+          <div className="ps-lg-4">
+            <div className="sticky-top" style={{ top: '20px' }}>
+              <h4 className="mb-3 d-none d-lg-block">Preview del Formulario</h4>
+              <div className="d-lg-none mt-4">
+                <h4 className="mb-3">Preview del Formulario</h4>
+              </div>
+              <FormularioCardPreview
+                cuestionario={cuestionario}
+                evento={evento}
+                nuevoBanner={nuevoBanner}
+              />
+              <div className="alert alert-info text-center mt-3">
+                <strong>Vista previa:</strong> Así se verá tu formulario en las
+                listas de formularios.
+              </div>
+            </div>
+          </div>
+        </div>
       </div>
     </div>
   );
diff --git a/src/containers/formulario/formulario-registro.tsx b/src/containers/formulario/formulario-registro.tsx
index 11d9288..d8b9e70 100644
--- a/src/containers/formulario/formulario-registro.tsx
+++ b/src/containers/formulario/formulario-registro.tsx
@@ -1,5 +1,4 @@
 import React, { useState, useEffect } from 'react';
-import MarkdownRenderer from '@/components/markdown-render';
 import { useGetApi } from '@/hooks/use-get-api';
 import { GetCuestionario } from '@/types/evento';
 import SimpleInput from '@/components/input';
@@ -10,6 +9,7 @@ import Button from '@/components/button';
 import toast from 'react-hot-toast';
 import { useRouter } from 'next/navigation';
 import { getAxiosError } from '@/utils/errors-utils';
+import { SubmitResponse } from '@/types/submit';
 
 export type UsuarioDataResponse = {
   cuenta: string | null;
@@ -36,8 +36,13 @@ type RespuestaFormulario = Record<string, string | number>; // id_pregunta: resp
 
 export default function FormularioRegistro({
   id_cuestionario,
+  handleSubmitFormulario,
 }: {
+  evento: string;
+  cuestionario: string;
+  id_evento: number;
   id_cuestionario: number;
+  handleSubmitFormulario: (data: SubmitResponse) => void;
 }) {
   // ------------------------
   // Estados
@@ -78,7 +83,8 @@ export default function FormularioRegistro({
   // Efecto: buscar información de cuenta
   // ------------------------
   useEffect(() => {
-    const cuenta = respuestas[preguntaCuenta?.id_pregunta ?? ''];
+    const cuentaId = preguntaCuenta?.id_pregunta ?? '';
+    const cuenta = respuestas[cuentaId];
 
     const esCuentaAlumno = preguntaCuenta?.validacion === 'cuenta_alumno';
     const esCuentaTrabajador =
@@ -131,7 +137,7 @@ export default function FormularioRegistro({
     } else {
       setCuentaInfo(null);
     }
-  }, [respuestas[preguntaCuenta?.id_pregunta ?? '']]);
+  }, [respuestas, preguntaCuenta?.id_pregunta, preguntaCuenta?.validacion]);
 
   // ------------------------
   // Efecto: precargar respuestas si hay cuentaInfo
@@ -213,7 +219,6 @@ export default function FormularioRegistro({
   };
 
   const handleOnSubmit = async () => {
-    console.log('Enviando respuestas:', respuestas);
     setIsSending(true);
     if (!data?.cuestionario.id_cuestionario) {
       alert('No se ha cargado correctamente el formulario');
@@ -274,7 +279,7 @@ export default function FormularioRegistro({
     };
 
     try {
-      const res = await axiosInstance.post(
+      const res = await axiosInstance.post<SubmitResponse>(
         '/cuestionario-respondido/submit',
         payload
       );
@@ -283,7 +288,7 @@ export default function FormularioRegistro({
           <span
             className="fs-4 pc-3 py-2"
             style={{
-              maxWidth: '400px',
+              maxWidth: '300px',
               wordWrap: 'break-word',
               whiteSpace: 'normal',
             }}
@@ -291,7 +296,7 @@ export default function FormularioRegistro({
             {res.data.message.includes('ya ha respondido') ? (
               <>
                 <i className="bi bi-exclamation-circle-fill text-warning me-2"></i>
-                {res.data.message}
+                Respuestas Enviadas Con Éxito
               </>
             ) : (
               <>
@@ -309,13 +314,13 @@ export default function FormularioRegistro({
           },
         }
       );
+
+      handleSubmitFormulario(res.data);
     } catch (error) {
       console.log(getAxiosError(error));
       toast.error('Hubo un error al enviar el formulario', {
         duration: 5000,
       });
-    } finally {
-      // Redirigir al usuario después de enviar el formulario
       router.push('/');
     }
   };
@@ -340,13 +345,7 @@ export default function FormularioRegistro({
   }
 
   return (
-    <div className="preguntas">
-      <hr />
-      <h2 className="text-xl font-bold">{data?.cuestionario.nombre_form}</h2>
-      {data?.cuestionario.descripcion && (
-        <MarkdownRenderer markdown={data.cuestionario.descripcion} />
-      )}
-
+    <div>
       {preguntaComunidad && (
         <div className="my-4">
           <label
@@ -374,7 +373,6 @@ export default function FormularioRegistro({
           />
         </div>
       )}
-
       {isComunidad &&
         confirmativeOption.some((opt) =>
           isComunidad.label?.toLowerCase().includes(opt.toLowerCase())
@@ -411,7 +409,6 @@ export default function FormularioRegistro({
             />
           </div>
         )}
-
       {mostrarFormularioRestante &&
         data?.cuestionario.secciones.map((seccion, i) => (
           <div key={i}>
@@ -542,7 +539,6 @@ export default function FormularioRegistro({
             })}
           </div>
         ))}
-
       <Button
         className="btn btn-primary"
         onClick={handleOnSubmit}
diff --git a/src/containers/pages/formulario-page.tsx b/src/containers/pages/formulario-page.tsx
index 8ff7d93..f4edc86 100644
--- a/src/containers/pages/formulario-page.tsx
+++ b/src/containers/pages/formulario-page.tsx
@@ -2,10 +2,12 @@
 import MarkdownRenderer from '@/components/markdown-render';
 import { useGetApi } from '@/hooks/use-get-api';
 import Image from 'next/image';
-import React from 'react';
+import React, { useState, useEffect } from 'react';
 import FormularioRegistro from '../formulario/formulario-registro';
 import { GetEventoWithCuestionario } from '@/types/evento';
-import { formatFecha } from '@/utils/date-utils';
+import { formatearRangoFechas } from '@/utils/date-utils';
+import { SubmitResponse } from '@/types/submit';
+import Link from 'next/link';
 
 export default function FormularioPage({
   id_evento,
@@ -14,55 +16,354 @@ export default function FormularioPage({
   id_evento: string;
   id_cuestionario: string;
 }) {
+  const [response, setResponse] = useState<SubmitResponse | null>(null);
+  const [qrImageUrl, setQrImageUrl] = useState<string | null>(null);
   const { data, error } = useGetApi<GetEventoWithCuestionario>(
     `/evento/${id_evento}/cuestionario/${id_cuestionario}`
   );
 
+  // Procesar el QR buffer cuando se reciba la respuesta
+  useEffect(() => {
+    if (!response?.qr_buffer) {
+      setQrImageUrl(null);
+      return;
+    }
+
+    try {
+      const binaryString = atob(response.qr_buffer);
+      const bytes = new Uint8Array(binaryString.length);
+      for (let i = 0; i < binaryString.length; i++) {
+        bytes[i] = binaryString.charCodeAt(i);
+      }
+      const blob = new Blob([bytes], { type: 'image/png' });
+      const url = URL.createObjectURL(blob);
+      setQrImageUrl(url);
+    } catch (error) {
+      console.error('Error al procesar el QR buffer:', error);
+      setQrImageUrl(null);
+    }
+  }, [response?.qr_buffer]);
+
+  // Cleanup del QR cuando el componente se desmonte o cambie la respuesta
+  useEffect(() => {
+    return () => {
+      if (qrImageUrl) {
+        URL.revokeObjectURL(qrImageUrl);
+      }
+    };
+  }, [qrImageUrl]);
+
   if (error) {
     return <div>Error al cargar el cuestionario: {error.message}</div>;
   }
 
+  const onSubmitFormulario = async (res: SubmitResponse) => {
+    setResponse(res);
+  };
+
+  // Si hay una respuesta exitosa, mostrar la vista de éxito
+  if (response && response.success) {
+    return (
+      <div className="container my-5">
+        <div className="row justify-content-center">
+          <div className="col-12 col-lg-10 col-xl-8">
+            <div className="card shadow-sm">
+              <div className="card-body">
+                <div className="row g-4">
+                  <div className="col-md-6">
+                    <div className="h-100 d-flex flex-column justify-content-center">
+                      <div className="text-center mb-4">
+                        <div className="mb-3">
+                          <div
+                            className="d-inline-flex align-items-center justify-content-center bg-success rounded-circle"
+                            style={{ width: '60px', height: '60px' }}
+                          >
+                            <i
+                              className="bi bi-check-lg text-white"
+                              style={{ fontSize: '2rem' }}
+                            ></i>
+                          </div>
+                        </div>
+                        <h2 className="fw-bold text-success mb-2">
+                          ¡Felicidades!
+                        </h2>
+                        <p className="text-muted mb-0">
+                          Has completado exitosamente el formulario
+                        </p>
+                      </div>
+
+                      <div className="mb-3">
+                        <div className="d-flex align-items-center mb-2">
+                          <i
+                            className="bi bi-calendar-event text-primary me-3"
+                            style={{ fontSize: '1.3rem' }}
+                          ></i>
+                          <h6 className="mb-0 text-primary">Evento</h6>
+                        </div>
+                        <p className="mb-0 fs-6 fw-semibold ms-5">
+                          {data?.nombre_evento}
+                        </p>
+                      </div>
+
+                      <div className="mb-3">
+                        <div className="d-flex align-items-center mb-2">
+                          <i
+                            className="bi bi-file-text text-info me-3"
+                            style={{ fontSize: '1.3rem' }}
+                          ></i>
+                          <h6 className="mb-0 text-info">Formulario</h6>
+                        </div>
+                        <p className="mb-0 fs-6 fw-semibold ms-5">
+                          {data?.cuestionario.nombre_form}
+                        </p>
+                      </div>
+
+                      {response.message && (
+                        <div className="mb-3">
+                          <div className="alert alert-info" role="alert">
+                            <div className="d-flex align-items-start">
+                              <i className="bi bi-info-circle me-2 mt-1"></i>
+                              <div>
+                                <strong>Mensaje:</strong>
+                                <p className="mb-0 mt-1">{response.message}</p>
+                              </div>
+                            </div>
+                          </div>
+                        </div>
+                      )}
+                    </div>
+                  </div>
+
+                  <div className="col-md-6">
+                    <div className="h-100 d-flex flex-column justify-content-center align-items-center">
+                      {qrImageUrl ? (
+                        <div className="text-center">
+                          <h5 className="mb-3 text-secondary">
+                            <i className="bi bi-qr-code me-2"></i>
+                            Código QR
+                          </h5>
+                          <div className="p-3 bg-white rounded shadow-sm">
+                            <Image
+                              src={qrImageUrl}
+                              alt="Código QR"
+                              width={250}
+                              height={250}
+                              className="rounded"
+                              style={{ maxWidth: '100%', height: 'auto' }}
+                              unoptimized
+                            />
+                          </div>
+                        </div>
+                      ) : (
+                        <div className="text-center text-muted">
+                          <i
+                            className="bi bi-qr-code-scan"
+                            style={{ fontSize: '4rem' }}
+                          ></i>
+                          <p className="mt-3 mb-0">
+                            No hay código QR disponible
+                          </p>
+                        </div>
+                      )}
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            <div className="text-center mt-4">
+              <Link href="/" className="btn btn-primary btn-lg me-3">
+                Ir al inicio
+              </Link>
+            </div>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
   return (
     <div className="container my-5">
+      {/* Sección de banners mejorada */}
       <div className="text-center mb-4">
-        {data?.banner && (
-          <Image
-            src={`${process.env.NEXT_PUBLIC_API_URL}/banners/${data.banner}`}
-            alt={data?.nombre_evento || ''}
-            width={800}
-            height={400}
-            className="img-fluid rounded"
-          />
-        )}
+        {data?.banner && data?.cuestionario.banner ? (
+          /* Ambos banners disponibles */
+          <div className="d-flex align-items-center justify-content-center gap-3 flex-wrap">
+            <div className="position-relative">
+              <Image
+                src={`${process.env.NEXT_PUBLIC_API_URL}/banners/${data.banner}`}
+                alt={`Banner del evento: ${data.nombre_evento}`}
+                width={350}
+                height={200}
+                className="img-fluid rounded shadow-sm"
+                style={{ objectFit: 'cover' }}
+              />
+              <div className="position-absolute bottom-0 start-0 m-2">
+                <span className="badge bg-primary bg-opacity-90">
+                  <i className="bi bi-calendar-event me-1"></i>
+                  Evento
+                </span>
+              </div>
+            </div>
+
+            <div className="d-flex align-items-center justify-content-center">
+              <div
+                className="rounded-circle bg-light border d-flex align-items-center justify-content-center"
+                style={{ width: '50px', height: '50px' }}
+              >
+                <i className="bi bi-x-lg fs-4 text-muted"></i>
+              </div>
+            </div>
+
+            <div className="position-relative">
+              <Image
+                src={`${process.env.NEXT_PUBLIC_API_URL}/banners/${data.cuestionario.banner}`}
+                alt={`Banner del formulario: ${data.cuestionario.nombre_form}`}
+                width={350}
+                height={200}
+                className="img-fluid rounded shadow-sm"
+                style={{ objectFit: 'cover' }}
+              />
+              <div className="position-absolute bottom-0 start-0 m-2">
+                <span className="badge bg-success bg-opacity-90">
+                  <i className="bi bi-file-earmark-text me-1"></i>
+                  Formulario
+                </span>
+              </div>
+            </div>
+          </div>
+        ) : data?.banner ? (
+          /* Solo banner del evento */
+          <div>
+            <Image
+              src={`${process.env.NEXT_PUBLIC_API_URL}/banners/${data.banner}`}
+              alt={data?.nombre_evento || ''}
+              width={800}
+              height={400}
+              className="img-fluid rounded shadow"
+            />
+            <p className="text-muted mt-2 small">
+              <i className="bi bi-calendar-event me-1"></i>
+              Banner del evento
+            </p>
+          </div>
+        ) : data?.cuestionario.banner ? (
+          /* Solo banner del formulario */
+          <div>
+            <Image
+              src={`${process.env.NEXT_PUBLIC_API_URL}/banners/${data.cuestionario.banner}`}
+              alt={data?.cuestionario.nombre_form || ''}
+              width={800}
+              height={400}
+              className="img-fluid rounded shadow"
+            />
+            <p className="text-muted mt-2 small">
+              <i className="bi bi-file-earmark-text me-1"></i>
+              Banner del formulario
+            </p>
+          </div>
+        ) : null}
       </div>
-      <h1>{data?.nombre_evento}</h1>
-      {data?.descripcion_evento && (
-        <MarkdownRenderer markdown={data?.descripcion_evento} />
-      )}
 
-      {data?.fecha_fin && data?.fecha_inicio && (
-        <>
-          <p className="mb-0 mt-2 text-muted">Horario:</p>
-          <p className="text-muted">
-            <i className="bi bi-clock me-1 text-primary"></i>
-            {formatFecha(data.fecha_inicio!, {
-              horas: true,
-              minutos: true,
-            })}{' '}
-            al{' '}
-            {formatFecha(data.fecha_fin!, {
-              horas: true,
-              minutos: true,
-            })}
-          </p>
-        </>
-      )}
+      {/* Layout de dos columnas */}
+      <div className="row">
+        {/* Columna izquierda - Información */}
+        <div className="col-lg-5">
+          {/* Tarjeta: Evento principal */}
+          <section aria-labelledby="evento-heading" className="mb-1">
+            <div className="card border-0 shadow-sm">
+              <div className="card-body">
+                <h2
+                  id="evento-heading"
+                  className="h4 mb-2 d-flex align-items-center gap-2"
+                >
+                  <i className="bi bi-calendar-event text-primary"></i>
+                  Evento
+                </h2>
 
-      {data && (
-        <FormularioRegistro
-          id_cuestionario={data?.cuestionario.id_cuestionario}
-        />
-      )}
+                <h3 className="h3 mb-2">{data?.nombre_evento}</h3>
+
+                {data?.descripcion_evento && (
+                  <div className="text-muted mb-3">
+                    <MarkdownRenderer markdown={data?.descripcion_evento} />
+                  </div>
+                )}
+
+                {data?.fecha_inicio && data?.fecha_fin && (
+                  <p className="text-muted mb-0">
+                    <i
+                      className="bi bi-calendar-date me-1 text-primary"
+                      aria-hidden="true"
+                    ></i>
+                    {formatearRangoFechas(data.fecha_inicio, data.fecha_fin)}
+                  </p>
+                )}
+              </div>
+            </div>
+          </section>
+
+          {/* Tarjeta: Sub-evento (Cuestionario) */}
+          {data?.cuestionario && (
+            <section aria-labelledby="cuestionario-heading">
+              <div className="card border-0 shadow-sm">
+                <div className="card-body">
+                  <div className="d-flex justify-content-between align-items-start mb-2">
+                    <h2
+                      id="cuestionario-heading"
+                      className="h4 mb-0 d-flex align-items-center gap-2"
+                    >
+                      <i className="bi bi-ui-checks-grid text-success"></i>
+                      Registro a cuestionario
+                    </h2>
+                    <span className="badge bg-success-subtle text-success border border-success-subtle">
+                      Sub-evento
+                    </span>
+                  </div>
+
+                  <h3 className="h3 mb-1">{data.cuestionario.nombre_form}</h3>
+
+                  {data.cuestionario.descripcion && (
+                    <div className="text-muted mb-3">
+                      <MarkdownRenderer
+                        markdown={data.cuestionario.descripcion}
+                      />
+                    </div>
+                  )}
+
+                  {data.cuestionario.fecha_inicio &&
+                    data.cuestionario.fecha_fin && (
+                      <p className="text-muted mb-0 fs-5 fw-bold text-decoration-underline">
+                        <i
+                          className="bi  bi-clock me-1 text-primary"
+                          aria-hidden="true"
+                        ></i>
+                        {formatearRangoFechas(
+                          data.cuestionario.fecha_inicio,
+                          data.cuestionario.fecha_fin
+                        )}
+                      </p>
+                    )}
+                </div>
+              </div>
+            </section>
+          )}
+        </div>
+
+        {/* Columna derecha - Formulario */}
+        <div className="col-lg-7">
+          <div className="ps-lg-4">
+            {data && (
+              <FormularioRegistro
+                evento={data.nombre_evento}
+                cuestionario={data?.cuestionario.nombre_form}
+                id_evento={data?.id_evento}
+                id_cuestionario={data?.cuestionario.id_cuestionario}
+                handleSubmitFormulario={onSubmitFormulario}
+              />
+            )}
+          </div>
+        </div>
+      </div>
     </div>
   );
 }
diff --git a/src/context/evento/evento-context.tsx b/src/context/evento/evento-context.tsx
new file mode 100644
index 0000000..1e52318
--- /dev/null
+++ b/src/context/evento/evento-context.tsx
@@ -0,0 +1,101 @@
+'use client';
+import { GetEventoWithCuestionariosWithCupos } from '@/types/evento';
+import axiosInstance from '@/utils/api-config';
+import {
+  createContext,
+  useContext,
+  useState,
+  useEffect,
+  useCallback,
+  ReactNode,
+} from 'react';
+
+interface EventoContextType {
+  evento: GetEventoWithCuestionariosWithCupos | null;
+  loading: boolean;
+  error: string | null;
+  refetch: () => void;
+  updateEvento: (
+    eventoData: Partial<GetEventoWithCuestionariosWithCupos>
+  ) => void;
+  setEventoData: (evento: GetEventoWithCuestionariosWithCupos) => void;
+}
+
+const EventoContext = createContext<EventoContextType | undefined>(undefined);
+
+interface EventoProviderProps {
+  children: ReactNode;
+  id_evento: string;
+}
+
+export function EventoProvider({ children, id_evento }: EventoProviderProps) {
+  const [evento, setEvento] =
+    useState<GetEventoWithCuestionariosWithCupos | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  const fetchEvento = useCallback(async () => {
+    console.log('Fetching evento with ID:', id_evento);
+    try {
+      setLoading(true);
+      setError(null);
+      const response =
+        await axiosInstance.get<GetEventoWithCuestionariosWithCupos>(
+          `/evento/${id_evento}/cuestionarios`
+        );
+      setEvento(response.data);
+    } catch (error) {
+      const errorMessage =
+        error instanceof Error ? error.message : 'Error al cargar el evento';
+      setError(errorMessage);
+      console.error('Error fetching evento:', error);
+    } finally {
+      setLoading(false);
+    }
+  }, [id_evento]);
+
+  useEffect(() => {
+    if (id_evento) {
+      fetchEvento();
+    }
+  }, [id_evento, fetchEvento]);
+
+  const refetch = () => {
+    fetchEvento();
+  };
+
+  const updateEvento = useCallback(
+    (eventoData: Partial<GetEventoWithCuestionariosWithCupos>) => {
+      setEvento((prev) => (prev ? { ...prev, ...eventoData } : null));
+    },
+    []
+  );
+
+  const setEventoData = useCallback(
+    (newEvento: GetEventoWithCuestionariosWithCupos) => {
+      setEvento(newEvento);
+    },
+    []
+  );
+
+  const value: EventoContextType = {
+    evento,
+    loading,
+    error,
+    refetch,
+    updateEvento,
+    setEventoData,
+  };
+
+  return (
+    <EventoContext.Provider value={value}>{children}</EventoContext.Provider>
+  );
+}
+
+export function useEvento() {
+  const context = useContext(EventoContext);
+  if (context === undefined) {
+    throw new Error('useEvento must be used within an EventoProvider');
+  }
+  return context;
+}
diff --git a/src/context/evento/index.ts b/src/context/evento/index.ts
new file mode 100644
index 0000000..f8529b2
--- /dev/null
+++ b/src/context/evento/index.ts
@@ -0,0 +1 @@
+export * from './evento-context';
diff --git a/src/context/index.ts b/src/context/index.ts
new file mode 100644
index 0000000..1ff9ead
--- /dev/null
+++ b/src/context/index.ts
@@ -0,0 +1 @@
+export * from './evento';
diff --git a/src/styles/sass/bootstrap.scss b/src/styles/sass/bootstrap.scss
index 54d4ea2..68e4a35 100644
--- a/src/styles/sass/bootstrap.scss
+++ b/src/styles/sass/bootstrap.scss
@@ -174,3 +174,7 @@ input {
     margin-inline: 14rem;
   }
 }
+
+.table-white {
+  --bs-table-bg: #fff;
+}
diff --git a/src/types/administradores.d.ts b/src/types/administradores.d.ts
new file mode 100644
index 0000000..7192b2b
--- /dev/null
+++ b/src/types/administradores.d.ts
@@ -0,0 +1,9 @@
+export interface Administrador {
+  id_administrador: number;
+  nombre_usuario: string;
+  correo: string;
+  tipoUser: {
+    id: number;
+    tipo: string;
+  };
+}
diff --git a/src/types/create-formulario.d.ts b/src/types/create-formulario.d.ts
index 1add13b..b835e7e 100644
--- a/src/types/create-formulario.d.ts
+++ b/src/types/create-formulario.d.ts
@@ -1,25 +1,25 @@
 export type TiposValidacion =
-    | 'correo'
-    | 'correo_institucional'
-    | 'telefono'
-    | 'nombre'
-    | 'entero'
-    | 'apellidos'
-    | 'decimal'
-    | 'comunidad_alumno'
-    | 'cuenta_alumno'
-    | 'comunidad_trabajador'
-    | 'cuenta_trabajador'
-    | 'genero'
-    | 'carrera'
-    | 'institucion'
-    | 'rfc'
+  | 'correo'
+  | 'correo_institucional'
+  | 'telefono'
+  | 'nombre'
+  | 'entero'
+  | 'apellidos'
+  | 'decimal'
+  | 'comunidad_alumno'
+  | 'cuenta_alumno'
+  | 'comunidad_trabajador'
+  | 'cuenta_trabajador'
+  | 'genero'
+  | 'carrera'
+  | 'institucion'
+  | 'rfc';
 
-export type TipoPregunta = 
-    | 'Abierta (Respuesta corta)'
-    | 'Abierta (Parrafo)'
-    | 'Cerrada'
-    | 'Multiple';
+export type TipoPregunta =
+  | 'Abierta (Respuesta corta)'
+  | 'Abierta (Parrafo)'
+  | 'Cerrada'
+  | 'Multiple';
 
 export interface FormularioCreacion {
   nombre_form: string;
@@ -27,6 +27,7 @@ export interface FormularioCreacion {
   fecha_inicio: string; // ISO 8601 date string
   fecha_fin: string;
   id_tipo_cuestionario: number;
+  id_tipo_evento?: number;
   cupo_maximo?: number; // Opcional, si no se requiere un cupo máximo
   secciones: SeccionFormulario[];
 }
diff --git a/src/types/evento.d.ts b/src/types/evento.d.ts
index b6f1a35..aa8290c 100644
--- a/src/types/evento.d.ts
+++ b/src/types/evento.d.ts
@@ -1,4 +1,4 @@
-import { TipoPregunta, TiposValidacion } from "./create-formulario";
+import { TipoPregunta, TiposValidacion } from './create-formulario';
 
 export interface GetEvento {
   id_evento: number;
@@ -9,7 +9,7 @@ export interface GetEvento {
   fecha_fin: string; // formato ISO 8601
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   asistencias: any | null;
-  banner: string | null;
+  banner: string | null; // banner-1755043351827-446638467.jpeg
 }
 
 export interface Cuestionario {
@@ -28,13 +28,16 @@ export interface Cuestionario {
     id_tipo_cuestionario: number;
     tipo_cuestionario: string;
   };
+  tipoEvento: {
+    id_tipo_evento: number;
+    tipo_evento: string;
+  } | null;
 }
 
 export interface CuestionarioWithCupo extends Cuestionario {
   cupos_usados: number;
   cupos_disponibles: number;
 }
-
 export interface GetCuestionario {
   tipo_cuestionario: {
     id_tipo_cuestionario: number;
@@ -82,10 +85,20 @@ export interface CuestionarioWithSecciones extends Cuestionario {
   }[];
 }
 
-export interface GetEventoWithCuestionarios extends GetEvento {
+export interface GetEventoWithCuestionariosWithCupos extends GetEvento {
   cuestionarios: CuestionarioWithCupo[];
 }
 
 export interface GetEventoWithCuestionario extends GetEvento {
   cuestionario: Cuestionario;
 }
+
+export interface GetEventoWithCuestionarios extends GetEvento {
+  cuestionarios: Cuestionario[];
+  total_cuestionarios: number;
+}
+
+export interface TipoEvento {
+  id_tipo_evento: number;
+  tipo_evento: string;
+}
diff --git a/src/types/submit.d.ts b/src/types/submit.d.ts
new file mode 100644
index 0000000..b007eb5
--- /dev/null
+++ b/src/types/submit.d.ts
@@ -0,0 +1,7 @@
+export interface SubmitResponse {
+  success: boolean;
+  registrado: boolean;
+  message: string;
+  qr_token: string;
+  qr_buffer: string;
+}
diff --git a/src/utils/api-config.ts b/src/utils/api-config.ts
index 3e7877e..e7c24fa 100644
--- a/src/utils/api-config.ts
+++ b/src/utils/api-config.ts
@@ -14,4 +14,46 @@ const axiosInstance = axios.create({
   },
 });
 
+// Request interceptor para agregar el token de autenticación
+axiosInstance.interceptors.request.use(
+  (config) => {
+    // Obtener el token del sessionStorage
+    const token = sessionStorage.getItem('token');
+
+    if (token) {
+      config.headers.Authorization = `Bearer ${token}`;
+    }
+
+    return config;
+  },
+  (error) => {
+    return Promise.reject(error);
+  }
+);
+
+// Response interceptor para manejar errores de autenticación
+axiosInstance.interceptors.response.use(
+  (response) => {
+    return response;
+  },
+  (error) => {
+    // Si el token ha expirado o es inválido (401)
+    if (error.response?.status === 401) {
+      // Limpiar el sessionStorage
+      sessionStorage.removeItem('token');
+      sessionStorage.removeItem('user');
+
+      // Redireccionar al login solo si no estamos ya en la página de login
+      if (
+        typeof window !== 'undefined' &&
+        !window.location.pathname.includes('/login')
+      ) {
+        window.location.href = '/login';
+      }
+    }
+
+    return Promise.reject(error);
+  }
+);
+
 export default axiosInstance;
diff --git a/src/utils/arrays.ts b/src/utils/arrays.ts
new file mode 100644
index 0000000..59af560
--- /dev/null
+++ b/src/utils/arrays.ts
@@ -0,0 +1,14 @@
+export const tipoEventos = [
+  { label: 'Conferencia', value: 'conferencia' },
+  { label: 'Taller', value: 'taller' },
+  { label: 'Seminario', value: 'seminario' },
+  { label: 'Curso', value: 'curso' },
+  { label: 'Webinar', value: 'webinar' },
+  { label: 'Reunión', value: 'reunion' },
+  { label: 'Feria', value: 'feria' },
+  { label: 'Concierto', value: 'concierto' },
+  { label: 'Exposición', value: 'exposicion' },
+  { label: 'Deportivo', value: 'deportivo' },
+  { label: 'Cultural', value: 'cultural' },
+  { label: 'Otro', value: 'otro' },
+];
diff --git a/src/utils/date-utils.ts b/src/utils/date-utils.ts
index e44ed9f..c0234ce 100644
--- a/src/utils/date-utils.ts
+++ b/src/utils/date-utils.ts
@@ -28,7 +28,6 @@
 export function formatFecha(
   fechaStr: string,
   config: { horas?: boolean; minutos?: boolean; diaSemana?: boolean } = {
-    
     horas: false,
     minutos: false,
     diaSemana: false,
@@ -104,3 +103,228 @@ export function formatDateLocal(date: Date): string {
 
   return `${yyyy}-${MM}-${dd}T${hh}:${mm}`;
 }
+
+/**
+ * Formatea un rango de fechas en español, optimizando la salida según si coinciden año, mes y día.
+ *
+ * @param {string} fechaInicio - Fecha de inicio en formato ISO 8601 (ej: '2025-08-13T18:44:00.000Z').
+ * @param {string} fechaFin - Fecha de fin en formato ISO 8601 (ej: '2025-08-15T18:44:00.000Z').
+ * @returns {string} Rango de fechas formateado en español.
+ * @throws {Error} Lanza un error si alguna de las fechas proporcionadas no es válida.
+ *
+ * @example
+ * formatearRangoFechas('2025-08-13T12:00:00.000Z', '2025-08-13T18:00:00.000Z');
+ * // Retorna: "el 13 de agosto del 2025 de 12:00 a 18:00"
+ *
+ * @example
+ * formatearRangoFechas('2025-08-13T18:44:00.000Z', '2025-08-15T18:44:00.000Z');
+ * // Retorna: "del 13 al 15 de agosto del 2025"
+ *
+ * @example
+ * formatearRangoFechas('2025-08-13T18:44:00.000Z', '2025-09-13T18:44:00.000Z');
+ * // Retorna: "del 13 de agosto al 13 de septiembre del 2025"
+ *
+ * @example
+ * formatearRangoFechas('2025-08-13T18:44:00.000Z', '2026-01-13T18:44:00.000Z');
+ * // Retorna: "del 13 de agosto del 2025 al 13 de enero del 2026"
+ */
+export function formatearRangoFechas(
+  fechaInicio: string,
+  fechaFin: string
+): string {
+  const inicio = new Date(fechaInicio);
+  const fin = new Date(fechaFin);
+
+  if (isNaN(inicio.getTime())) {
+    throw new Error(`Fecha de inicio inválida: ${fechaInicio}`);
+  }
+
+  if (isNaN(fin.getTime())) {
+    throw new Error(`Fecha de fin inválida: ${fechaFin}`);
+  }
+
+  const meses = [
+    'enero',
+    'febrero',
+    'marzo',
+    'abril',
+    'mayo',
+    'junio',
+    'julio',
+    'agosto',
+    'septiembre',
+    'octubre',
+    'noviembre',
+    'diciembre',
+  ];
+
+  const diaInicio = inicio.getUTCDate();
+  const mesInicio = meses[inicio.getUTCMonth()];
+  const añoInicio = inicio.getUTCFullYear();
+
+  const diaFin = fin.getUTCDate();
+  const mesFin = meses[fin.getUTCMonth()];
+  const añoFin = fin.getUTCFullYear();
+
+  // Si es el mismo día (año, mes y día iguales)
+  if (
+    añoInicio === añoFin &&
+    inicio.getUTCMonth() === fin.getUTCMonth() &&
+    diaInicio === diaFin
+  ) {
+    const horaInicio = (inicio.getUTCHours() - 6 + 24) % 24;
+    const minutosInicio = inicio.getUTCMinutes().toString().padStart(2, '0');
+    const horaFin = (fin.getUTCHours() - 6 + 24) % 24;
+    const minutosFin = fin.getUTCMinutes().toString().padStart(2, '0');
+
+    return `el ${diaInicio} de ${mesInicio} del ${añoInicio} de ${horaInicio}:${minutosInicio} a ${horaFin}:${minutosFin}`;
+  }
+
+  // Si el año y mes son iguales pero días diferentes
+  if (añoInicio === añoFin && inicio.getUTCMonth() === fin.getUTCMonth()) {
+    return `del ${diaInicio} al ${diaFin} de ${mesInicio} del ${añoInicio}`;
+  }
+
+  // Si el año es igual pero el mes es diferente
+  if (añoInicio === añoFin) {
+    return `del ${diaInicio} de ${mesInicio} al ${diaFin} de ${mesFin} del ${añoInicio}`;
+  }
+
+  // Si tanto el año como el mes son diferentes
+  return `del ${diaInicio} de ${mesInicio} del ${añoInicio} al ${diaFin} de ${mesFin} del ${añoFin}`;
+}
+
+/**
+ * Formatea fechas para mostrar en las cartas de eventos, optimizando el espacio disponible.
+ * Retorna un objeto con el texto del mes y el texto del día para mostrar en la interfaz.
+ *
+ * @param {Date | string} fechaInicio - Fecha de inicio del evento.
+ * @param {Date | string} fechaFin - Fecha de fin del evento.
+ * @returns {{ mesTexto: string, diaTexto: string }} Objeto con texto del mes y día formateados.
+ * @throws {Error} Lanza un error si alguna de las fechas proporcionadas no es válida.
+ *
+ * @example
+ * formatearFechaCard(new Date('2025-08-15'), new Date('2025-08-15'));
+ * // Retorna: { mesTexto: 'AGO', diaTexto: '15' }
+ *
+ * @example
+ * formatearFechaCard(new Date('2025-08-15'), new Date('2025-08-20'));
+ * // Retorna: { mesTexto: 'AGO', diaTexto: '15 - 20' }
+ *
+ * @example
+ * formatearFechaCard(new Date('2025-08-28'), new Date('2025-09-05'));
+ * // Retorna: { mesTexto: 'AGO - SEP', diaTexto: '28 - 5' }
+ */
+export function formatearFechaCard(
+  fechaInicio: Date | string,
+  fechaFin: Date | string
+): { mesTexto: string; diaTexto: string } {
+  // Convertir a Date si son strings
+  const inicio =
+    typeof fechaInicio === 'string' ? new Date(fechaInicio) : fechaInicio;
+  const fin = typeof fechaFin === 'string' ? new Date(fechaFin) : fechaFin;
+
+  if (isNaN(inicio.getTime())) {
+    throw new Error(`Fecha de inicio inválida: ${fechaInicio}`);
+  }
+
+  if (isNaN(fin.getTime())) {
+    throw new Error(`Fecha de fin inválida: ${fechaFin}`);
+  }
+
+  const mesInicioCorto = inicio
+    .toLocaleDateString('es-ES', { month: 'short' })
+    .toUpperCase();
+  const mesFinCorto = fin
+    .toLocaleDateString('es-ES', { month: 'short' })
+    .toUpperCase();
+
+  const diaInicio = inicio.getDate();
+  const diaFin = fin.getDate();
+
+  // Si es el mismo día
+  const esElMismoDia = inicio.toDateString() === fin.toDateString();
+
+  // Si es el mismo mes pero diferentes días
+  const esElMismoMes =
+    inicio.getMonth() === fin.getMonth() &&
+    inicio.getFullYear() === fin.getFullYear();
+
+  if (esElMismoDia) {
+    return {
+      mesTexto: mesInicioCorto,
+      diaTexto: diaInicio.toString(),
+    };
+  } else if (esElMismoMes) {
+    return {
+      mesTexto: mesInicioCorto,
+      diaTexto: `${diaInicio} - ${diaFin}`,
+    };
+  } else {
+    // Diferentes meses
+    return {
+      mesTexto: `${mesInicioCorto} - ${mesFinCorto}`,
+      diaTexto: `${diaInicio} - ${diaFin}`,
+    };
+  }
+}
+
+/**
+ * Extrae y formatea el horario entre dos fechas.
+ * Retorna el rango de horas en formato "HH:MM a HH:MM Hrs".
+ *
+ * @param {string | Date} fechaInicio - Fecha de inicio en formato ISO 8601 o objeto Date.
+ * @param {string | Date} fechaFin - Fecha de fin en formato ISO 8601 o objeto Date.
+ * @returns {string} Horario formateado en formato "HH:MM a HH:MM Hrs".
+ * @throws {Error} Lanza un error si alguna de las fechas proporcionadas no es válida.
+ *
+ * @example
+ * formatearHorario('2025-08-13T13:00:00.000Z', '2025-08-13T14:00:00.000Z');
+ * // Retorna: "07:00 a 08:00 Hrs" (ajustado a UTC-6)
+ *
+ * @example
+ * formatearHorario(new Date('2025-08-13T19:30:00.000Z'), new Date('2025-08-13T21:45:00.000Z'));
+ * // Retorna: "13:30 a 15:45 Hrs"
+ *
+ * @example
+ * formatearHorario('2025-08-13T13:00:00.000Z', '2025-08-13T13:00:00.000Z');
+ * // Retorna: "07:00 Hrs" (misma hora)
+ */
+export function formatearHorario(
+  fechaInicio: string | Date,
+  fechaFin: string | Date
+): string {
+  // Convertir a Date si son strings
+  const inicio =
+    typeof fechaInicio === 'string' ? new Date(fechaInicio) : fechaInicio;
+  const fin = typeof fechaFin === 'string' ? new Date(fechaFin) : fechaFin;
+
+  if (isNaN(inicio.getTime())) {
+    throw new Error(`Fecha de inicio inválida: ${fechaInicio}`);
+  }
+
+  if (isNaN(fin.getTime())) {
+    throw new Error(`Fecha de fin inválida: ${fechaFin}`);
+  }
+
+  // Ajustar a zona horaria UTC-6 (México)
+  const horaInicio = (inicio.getUTCHours() - 6 + 24) % 24;
+  const minutosInicio = inicio.getUTCMinutes().toString().padStart(2, '0');
+
+  const horaFin = (fin.getUTCHours() - 6 + 24) % 24;
+  const minutosFin = fin.getUTCMinutes().toString().padStart(2, '0');
+
+  const horaInicioFormateada = `${horaInicio
+    .toString()
+    .padStart(2, '0')}:${minutosInicio}`;
+  const horaFinFormateada = `${horaFin
+    .toString()
+    .padStart(2, '0')}:${minutosFin}`;
+
+  // Si es la misma hora, solo mostrar una vez
+  if (horaInicioFormateada === horaFinFormateada) {
+    return `${horaInicioFormateada} Hrs`;
+  }
+
+  return `${horaInicioFormateada} a ${horaFinFormateada}`;
+}
diff --git a/src/utils/slugify.ts b/src/utils/slugify.ts
new file mode 100644
index 0000000..018660c
--- /dev/null
+++ b/src/utils/slugify.ts
@@ -0,0 +1,25 @@
+// slugify.ts
+export function slugify(input: string, maxLen = 60) {
+  return input
+    .normalize('NFD')
+    .replace(/[\u0300-\u036f]/g, '')
+    .toLowerCase()
+    .replace(/[^a-z0-9]+/g, '-')
+    .replace(/^-+|-+$/g, '')
+    .slice(0, maxLen);
+}
+
+// Combina slug + id (id al final facilita parsear con "último -")
+export function toParam(name: string, id: string | number) {
+  return `${slugify(name)}-${id}`;
+}
+
+// Extrae { id, slug } de un param con formato "slug-123"
+export function fromParam(param: string) {
+  const lastDash = param.lastIndexOf('-');
+  if (lastDash === -1) return { slug: param, id: null };
+  const slug = param.slice(0, lastDash);
+  const idStr = param.slice(lastDash + 1);
+  const id = /^\d+$/.test(idStr) ? Number(idStr) : null;
+  return { slug, id };
+}