diff --git a/public/banner.png b/public/banner.png
new file mode 100644
index 0000000..fea378a
Binary files /dev/null and b/public/banner.png differ
diff --git a/src/app/administrador/crear-formulario/page.tsx b/src/app/administrador/crear-formulario/page.tsx
new file mode 100644
index 0000000..907632b
--- /dev/null
+++ b/src/app/administrador/crear-formulario/page.tsx
@@ -0,0 +1,489 @@
+'use client';
+import React, { useState } from 'react';
+import Pagination from '@/components/pagination';
+import Image from 'next/image';
+
+interface Opcion {
+  valor: string;
+}
+
+interface Pregunta {
+  titulo: string;
+  tipo: 'Abierta' | 'Cerrada' | 'Multiple';
+  opciones: Opcion[];
+  obligatoria: boolean;
+}
+
+interface Seccion {
+  titulo: string;
+  descripcion: string;
+  preguntas: Pregunta[];
+}
+
+export default function AdminFormPage() {
+  const [nombreFormulario, setNombreFormulario] = useState('');
+  const [descripcion, setDescripcion] = useState('');
+  const [secciones, setSecciones] = useState<Seccion[]>([]);
+  const [paginaActual, setPaginaActual] = useState(1);
+  const [bannerPreview, setBannerPreview] = useState<string | null>(null);
+  const [audiencia, setAudiencia] = useState<'interna' | 'externa' | 'ambas'>(
+    'interna'
+  );
+
+  const swapItems = <T,>(arr: T[], index1: number, index2: number): T[] => {
+    const result = [...arr];
+    [result[index1], result[index2]] = [result[index2], result[index1]];
+    return result;
+  };
+
+  const moverSeccion = (from: number, to: number) => {
+    if (to >= 0 && to < secciones.length) {
+      setSecciones((prev) => swapItems(prev, from, to));
+      setPaginaActual(to + 1);
+    }
+  };
+
+  const moverPregunta = (seccionIndex: number, from: number, to: number) => {
+    const nuevas = [...secciones];
+    const preguntas = nuevas[seccionIndex].preguntas;
+    if (to >= 0 && to < preguntas.length) {
+      nuevas[seccionIndex].preguntas = swapItems(preguntas, from, to);
+      setSecciones(nuevas);
+    }
+  };
+
+  const agregarSeccion = () => {
+    setSecciones((prev) => [
+      ...prev,
+      { titulo: '', descripcion: '', preguntas: [] },
+    ]);
+    setPaginaActual(secciones.length + 1);
+  };
+
+  const eliminarSeccion = (index: number) => {
+    const nuevas = secciones.filter((_, i) => i !== index);
+    setSecciones(nuevas);
+    setPaginaActual((prev) =>
+      Math.max(1, prev > nuevas.length ? nuevas.length : prev)
+    );
+  };
+
+  const actualizarSeccion = <K extends keyof Seccion>(
+    index: number,
+    campo: K,
+    valor: Seccion[K]
+  ) => {
+    setSecciones((prev) => {
+      const nuevas = [...prev];
+      nuevas[index][campo] = valor;
+      return nuevas;
+    });
+  };
+
+  const agregarPregunta = (seccionIndex: number) => {
+    const nuevas = [...secciones];
+    nuevas[seccionIndex].preguntas.push({
+      titulo: '',
+      tipo: 'Abierta',
+      opciones: [],
+      obligatoria: false,
+    });
+    setSecciones(nuevas);
+  };
+
+  const eliminarPregunta = (seccionIndex: number, preguntaIndex: number) => {
+    const nuevas = [...secciones];
+    nuevas[seccionIndex].preguntas.splice(preguntaIndex, 1);
+    setSecciones(nuevas);
+  };
+
+  const actualizarPregunta = (
+    seccionIndex: number,
+    preguntaIndex: number,
+    campo: keyof Pregunta,
+    valor: Pregunta[keyof Pregunta]
+  ) => {
+    setSecciones((prev) => {
+      const nuevas = [...prev];
+      const pregunta = nuevas[seccionIndex].preguntas[preguntaIndex];
+      nuevas[seccionIndex].preguntas[preguntaIndex] = {
+        ...pregunta,
+        [campo]: valor,
+      };
+      return nuevas;
+    });
+  };
+  const agregarOpcion = (seccionIndex: number, preguntaIndex: number) => {
+    const nuevas = [...secciones];
+    nuevas[seccionIndex].preguntas[preguntaIndex].opciones.push({ valor: '' });
+    setSecciones(nuevas);
+  };
+
+  const eliminarOpcion = (
+    seccionIndex: number,
+    preguntaIndex: number,
+    opcionIndex: number
+  ) => {
+    const nuevas = [...secciones];
+    nuevas[seccionIndex].preguntas[preguntaIndex].opciones.splice(
+      opcionIndex,
+      1
+    );
+    setSecciones(nuevas);
+  };
+
+  const actualizarOpcion = (
+    seccionIndex: number,
+    preguntaIndex: number,
+    opcionIndex: number,
+    valor: string
+  ) => {
+    const nuevas = [...secciones];
+    nuevas[seccionIndex].preguntas[preguntaIndex].opciones[opcionIndex].valor =
+      valor;
+    setSecciones(nuevas);
+  };
+
+  const guardarFormulario = () => {
+    const formData = {
+      nombre: nombreFormulario,
+      descripcion,
+      secciones,
+    };
+    console.log('Formulario guardado:', JSON.stringify(formData));
+    alert('Formulario guardado en consola');
+  };
+
+  const seccionActual = secciones[paginaActual - 1];
+
+  const handleBannerChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const file = e.target.files?.[0] || null;
+    if (file) {
+      const reader = new FileReader();
+      reader.onload = () => setBannerPreview(reader.result as string);
+      reader.readAsDataURL(file);
+    } else {
+      setBannerPreview(null);
+    }
+  };
+
+  const imprimirFormulario = () => {
+    const data = {
+      banner: bannerPreview,
+      nombreFormulario,
+      descripcion,
+      secciones,
+    };
+    console.log('Formulario a imprimir:', JSON.stringify(data));
+  };
+
+  return (
+    <>
+      <h2 className='my-4'>Crear nuevo formulario</h2>
+
+      <div className='mb-4'>
+        <label className='form-label'>Banner del formulario</label>
+        <input
+          type='file'
+          accept='image/*'
+          className='form-control mb-2'
+          onChange={handleBannerChange}
+        />
+        {bannerPreview && (
+          <div className='text-center'>
+            <Image
+              src={bannerPreview}
+              width={1000}
+              height={300}
+              alt='Ejemplo de banner'
+              className='rounded-4 shadow-sm'
+              style={{
+                objectFit: 'cover',
+                objectPosition: 'center',
+              }}
+            />
+          </div>
+        )}
+      </div>
+
+      <div className='mb-3'>
+        <label className='form-label'>Nombre del formulario</label>
+        <input
+          type='text'
+          className='form-control'
+          value={nombreFormulario}
+          onChange={(e) => setNombreFormulario(e.target.value)}
+        />
+      </div>
+
+      <div className='mb-3'>
+        <label className='form-label'>Descripción</label>
+        <textarea
+          className='form-control'
+          rows={3}
+          value={descripcion}
+          onChange={(e) => setDescripcion(e.target.value)}
+        />
+      </div>
+      <div className='mb-4'>
+        <label className='form-label d-block'>Audiencia del formulario</label>
+        <div className='form-check form-check-inline'>
+          <input
+            className='form-check-input'
+            type='radio'
+            name='audiencia'
+            id='audienciaInterna'
+            value='interna'
+            checked={audiencia === 'interna'}
+            onChange={() => setAudiencia('interna')}
+          />
+          <label className='form-check-label' htmlFor='audienciaInterna'>
+            Interna (facultad)
+          </label>
+        </div>
+        <div className='form-check form-check-inline'>
+          <input
+            className='form-check-input'
+            type='radio'
+            name='audiencia'
+            id='audienciaExterna'
+            value='externa'
+            checked={audiencia === 'externa'}
+            onChange={() => setAudiencia('externa')}
+          />
+          <label className='form-check-label' htmlFor='audienciaExterna'>
+            Externa
+          </label>
+        </div>
+        <div className='form-check form-check-inline'>
+          <input
+            className='form-check-input'
+            type='radio'
+            name='audiencia'
+            id='audienciaAmbas'
+            value='ambas'
+            checked={audiencia === 'ambas'}
+            onChange={() => setAudiencia('ambas')}
+          />
+          <label className='form-check-label' htmlFor='audienciaAmbas'>
+            Ambas
+          </label>
+        </div>
+      </div>
+
+      <div className='mb-4'>
+        <button
+          className='btn btn-outline-primary mb-3'
+          onClick={agregarSeccion}
+        >
+          + Agregar sección
+        </button>
+
+        {seccionActual && (
+          <div className='border rounded p-3 mb-4'>
+            <div className='d-flex justify-content-between align-items-center'>
+              <h5>Sección {paginaActual}</h5>
+              <div className='d-flex gap-2'>
+                <button
+                  className='btn btn-sm btn-outline-secondary'
+                  onClick={() =>
+                    moverSeccion(paginaActual - 1, paginaActual - 2)
+                  }
+                  disabled={paginaActual === 1}
+                >
+                  ↑
+                </button>
+                <button
+                  className='btn btn-sm btn-outline-secondary'
+                  onClick={() => moverSeccion(paginaActual - 1, paginaActual)}
+                  disabled={paginaActual === secciones.length}
+                >
+                  ↓
+                </button>
+                <button
+                  className='btn btn-sm btn-danger'
+                  onClick={() => eliminarSeccion(paginaActual - 1)}
+                >
+                  Eliminar sección
+                </button>
+              </div>
+            </div>
+
+            <input
+              type='text'
+              className='form-control mb-2'
+              placeholder='Título de la sección'
+              value={seccionActual.titulo}
+              onChange={(e) =>
+                actualizarSeccion(paginaActual - 1, 'titulo', e.target.value)
+              }
+            />
+            <textarea
+              className='form-control mb-3'
+              placeholder='Descripción de la sección'
+              value={seccionActual.descripcion}
+              onChange={(e) =>
+                actualizarSeccion(
+                  paginaActual - 1,
+                  'descripcion',
+                  e.target.value
+                )
+              }
+            />
+
+            {seccionActual.preguntas.map((pregunta, pIdx) => (
+              <div key={pIdx} className='border rounded p-2 mb-3'>
+                <div className='d-flex justify-content-between align-items-center'>
+                  <strong>Pregunta {pIdx + 1}</strong>
+                  <div className='d-flex gap-2'>
+                    <button
+                      className='btn btn-sm btn-outline-secondary'
+                      onClick={() =>
+                        moverPregunta(paginaActual - 1, pIdx, pIdx - 1)
+                      }
+                      disabled={pIdx === 0}
+                    >
+                      ↑
+                    </button>
+                    <button
+                      className='btn btn-sm btn-outline-secondary'
+                      onClick={() =>
+                        moverPregunta(paginaActual - 1, pIdx, pIdx + 1)
+                      }
+                      disabled={pIdx === seccionActual.preguntas.length - 1}
+                    >
+                      ↓
+                    </button>
+                    <button
+                      className='btn btn-sm btn-outline-danger'
+                      onClick={() => eliminarPregunta(paginaActual - 1, pIdx)}
+                    >
+                      Eliminar
+                    </button>
+                  </div>
+                </div>
+                <input
+                  type='text'
+                  className='form-control my-2'
+                  placeholder='Texto de la pregunta'
+                  value={pregunta.titulo}
+                  onChange={(e) =>
+                    actualizarPregunta(
+                      paginaActual - 1,
+                      pIdx,
+                      'titulo',
+                      e.target.value
+                    )
+                  }
+                />
+                <select
+                  className='form-select mb-2'
+                  value={pregunta.tipo}
+                  onChange={(e) =>
+                    actualizarPregunta(
+                      paginaActual - 1,
+                      pIdx,
+                      'tipo',
+                      e.target.value as Pregunta['tipo']
+                    )
+                  }
+                >
+                  <option value='Abierta'>Abierta</option>
+                  <option value='Cerrada'>Cerrada</option>
+                  <option value='Multiple'>Opción múltiple</option>
+                </select>
+
+                <div className='form-check form-switch mb-3'>
+                  <input
+                    className='form-check-input'
+                    type='checkbox'
+                    id={`obligatoria-${pIdx}`}
+                    checked={pregunta.obligatoria}
+                    onChange={(e) =>
+                      actualizarPregunta(
+                        paginaActual - 1,
+                        pIdx,
+                        'obligatoria',
+                        e.target.checked
+                      )
+                    }
+                  />
+                  <label
+                    className='form-check-label'
+                    htmlFor={`obligatoria-${pIdx}`}
+                  >
+                    ¿Es obligatoria?
+                  </label>
+                </div>
+
+                {(pregunta.tipo === 'Cerrada' ||
+                  pregunta.tipo === 'Multiple') && (
+                  <>
+                    <button
+                      className='btn btn-sm btn-outline-secondary mb-2'
+                      onClick={() => agregarOpcion(paginaActual - 1, pIdx)}
+                    >
+                      + Agregar opción
+                    </button>
+                    {pregunta.opciones.map((op, oIdx) => (
+                      <div key={oIdx} className='input-group mb-2'>
+                        <input
+                          type='text'
+                          className='form-control'
+                          placeholder={`Opción ${oIdx + 1}`}
+                          value={op.valor}
+                          onChange={(e) =>
+                            actualizarOpcion(
+                              paginaActual - 1,
+                              pIdx,
+                              oIdx,
+                              e.target.value
+                            )
+                          }
+                        />
+                        <button
+                          className='btn btn-outline-danger'
+                          onClick={() =>
+                            eliminarOpcion(paginaActual - 1, pIdx, oIdx)
+                          }
+                        >
+                          x
+                        </button>
+                      </div>
+                    ))}
+                  </>
+                )}
+              </div>
+            ))}
+
+            <button
+              className='btn btn-sm btn-outline-primary'
+              onClick={() => agregarPregunta(paginaActual - 1)}
+            >
+              + Agregar pregunta
+            </button>
+          </div>
+        )}
+
+        {secciones.length > 1 && (
+          <div className='d-flex justify-content-center mb-4'>
+            <Pagination
+              currentPage={paginaActual}
+              totalPages={secciones.length}
+              onPageChange={setPaginaActual}
+            />
+          </div>
+        )}
+      </div>
+
+      <button className='btn btn-success' onClick={guardarFormulario}>
+        Guardar formulario
+      </button>
+      <div className='my-4 d-flex gap-2'>
+        <button className='btn btn-success' onClick={imprimirFormulario}>
+          Imprimir cuestionario
+        </button>
+      </div>
+    </>
+  );
+}
diff --git a/src/app/administrador/layout.tsx b/src/app/administrador/layout.tsx
new file mode 100644
index 0000000..354df53
--- /dev/null
+++ b/src/app/administrador/layout.tsx
@@ -0,0 +1,27 @@
+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={'/administrador/'} className='text-decoration-none'>
+            <div className='box'>Formularios</div>
+          </Link>
+          <Link
+            href={'/administrador/crear-formulario'}
+            className='text-decoration-none'
+          >
+            <div className='box'>Crear cuestionario</div>
+          </Link>
+        </nav>
+        {children}
+      </main>
+      <Footer />
+    </div>
+  );
+}
diff --git a/src/app/administrador/page.tsx b/src/app/administrador/page.tsx
new file mode 100644
index 0000000..81f3a1a
--- /dev/null
+++ b/src/app/administrador/page.tsx
@@ -0,0 +1,9 @@
+import React from 'react';
+
+export default function Page() {
+  return (
+    <>
+      <h2 className='my-4'>Formularios</h2>
+    </>
+  );
+}
diff --git a/src/app/page.tsx b/src/app/page.tsx
index 7cf747c..630d964 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -1,12 +1,147 @@
-import Footer from "@/components/layout/footer";
-import Header from "@/components/layout/header";
-import React from "react";
+'use client';
+import Footer from '@/components/layout/footer';
+import Header from '@/components/layout/header';
+import React, { useState } from 'react';
+import { res } from '@/data/cuestionario';
+import RadioOptionGroup, { RadioOption } from '@/components/radio-option-group';
+import CheckboxOptionGroup, {
+  CheckboxOption,
+} from '@/components/checkbox-option-group';
+import Pagination from '@/components/pagination';
+import Image from 'next/image';
+
+type Respuesta = string | number | number[];
 
 export default function Page() {
+  const [respuestas, setRespuestas] = useState<Record<number, Respuesta>>({});
+  const [paginaActual, setPaginaActual] = useState(1);
+  const totalPaginas = res.cuestionario.secciones.length;
+
+  const handleRespuesta = (idPregunta: number, valor: string | number) => {
+    setRespuestas((prev) => ({ ...prev, [idPregunta]: valor }));
+  };
+
+  const handleMultipleRespuesta = (
+    idPregunta: number,
+    opcion: CheckboxOption<number>
+  ) => {
+    setRespuestas((prev) => {
+      const current = Array.isArray(prev[idPregunta])
+        ? (prev[idPregunta] as number[])
+        : [];
+      const updated = current.includes(opcion.value)
+        ? current.filter((val) => val !== opcion.value)
+        : [...current, opcion.value];
+      return { ...prev, [idPregunta]: updated };
+    });
+  };
+
+  const imprimirRespuestas = () => {
+    console.log('Respuestas del cuestionario:', respuestas);
+    alert('Respuestas impresas en consola');
+  };
+
+  const seccion = res.cuestionario.secciones[paginaActual - 1];
+
   return (
-    <div className="d-flex flex-column min-vh-100">
+    <div className='d-flex flex-column min-vh-100'>
       <Header />
-      <div className="container flex-grow-1">
+      <div className='container flex-grow-1'>
+        <div className='text-center my-4'>
+          <Image
+            src={'/banner.png'}
+            width={1000}
+            height={300}
+            alt='Ejemplo de banner'
+            className='rounded-4 shadow-sm'
+            style={{
+              objectFit: 'cover',
+              objectPosition: 'top',
+            }}
+          />
+        </div>
+        <h1 className='mb-4'>{res.cuestionario.nombre_form}</h1>
+        <p className='mb-5 text-muted'>{res.cuestionario.descripcion}</p>
+
+        <div className='mb-5 mx-md-5 px-md-5'>
+          <h3>{seccion.seccion.titulo}</h3>
+          <p className='text-muted'>{seccion.seccion.descripcion}</p>
+
+          {seccion.preguntas.map((preguntaWrap) => {
+            const pregunta = preguntaWrap.pregunta;
+            const id = pregunta.id_pregunta;
+
+            if (pregunta.tipo_pregunta.tipo_pregunta === 'Cerrada') {
+              const opciones: RadioOption<number>[] = pregunta.opciones.map(
+                (op) => ({
+                  label: op.opcion.opcion,
+                  value: op.opcion.id_opcion,
+                })
+              );
+
+              return (
+                <div key={id} className='mt-4'>
+                  <strong>{pregunta.pregunta}</strong>
+                  <RadioOptionGroup
+                    name={`pregunta-${id}`}
+                    options={opciones}
+                    selectedValue={respuestas[id] as number}
+                    onChange={(op) => handleRespuesta(id, op.value)}
+                  />
+                </div>
+              );
+            } else if (pregunta.tipo_pregunta.tipo_pregunta === 'Abierta') {
+              return (
+                <div key={id} className='mt-4'>
+                  <strong>{pregunta.pregunta}</strong>
+                  <textarea
+                    className='form-control bg-white mt-2'
+                    rows={3}
+                    value={
+                      typeof respuestas[id] === 'string' ? respuestas[id] : ''
+                    }
+                    onChange={(e) => handleRespuesta(id, e.target.value)}
+                  />
+                </div>
+              );
+            } else if (pregunta.tipo_pregunta.tipo_pregunta === 'Multiple') {
+              const opciones: CheckboxOption<number>[] = pregunta.opciones.map(
+                (op) => ({
+                  label: op.opcion.opcion,
+                  value: op.opcion.id_opcion,
+                })
+              );
+
+              return (
+                <div key={id} className='mt-4'>
+                  <strong>{pregunta.pregunta}</strong>
+                  <CheckboxOptionGroup
+                    name={`pregunta-${id}`}
+                    options={opciones}
+                    selectedValues={(respuestas[id] as number[]) || []}
+                    onChange={(op) => handleMultipleRespuesta(id, op)}
+                  />
+                </div>
+              );
+            }
+
+            return null;
+          })}
+        </div>
+
+        <div className='d-flex justify-content-center mb-4'>
+          <Pagination
+            currentPage={paginaActual}
+            totalPages={totalPaginas}
+            onPageChange={setPaginaActual}
+          />
+        </div>
+
+        <div className='text-center mb-5'>
+          <button className='btn btn-primary' onClick={imprimirRespuestas}>
+            Imprimir respuestas en consola
+          </button>
+        </div>
       </div>
       <Footer />
     </div>
diff --git a/src/components/pagination.tsx b/src/components/pagination.tsx
index 19a2ac2..2d028d5 100644
--- a/src/components/pagination.tsx
+++ b/src/components/pagination.tsx
@@ -1,4 +1,4 @@
-import React, { useMemo } from "react";
+import React, { useMemo } from 'react';
 
 interface PaginationProps {
   totalPages: number;
@@ -43,15 +43,15 @@ export default function Pagination({
   }, [currentPage, totalPages, delta]);
 
   return (
-    <nav aria-label="Page navigation">
-      <ul className="pagination gap-1">
+    <nav aria-label='Page navigation'>
+      <ul className='pagination gap-1'>
         {/* Botón Anterior */}
-        <li className={`page-item ${currentPage === 1 ? "disabled" : ""}`}>
+        <li className={`page-item ${currentPage === 1 ? 'disabled' : ''}`}>
           <button
-            className="page-link shadow-sm rounded border-0 bg-white"
+            className='page-link box p-0'
             onClick={() => handlePageChange(currentPage - 1)}
             disabled={currentPage === 1}
-            aria-label="Previous"
+            aria-label='Previous'
           >
             &laquo;
           </button>
@@ -60,21 +60,17 @@ export default function Pagination({
         {/* Números de Página */}
         {visiblePages.map((page, index) =>
           page === -1 ? (
-            <li key={`ellipsis-${index}`} className="page-item disabled">
-              <span className="page-link shadow-sm rounded border-0 bg-white">
-                ...
-              </span>
+            <li key={`ellipsis-${index}`} className='page-item disabled'>
+              <span className='page-link box p-0'>...</span>
             </li>
           ) : (
             <li
               key={page}
-              className={`page-item ${currentPage === page ? "active" : ""}`}
+              className={`page-item ${currentPage === page ? 'active' : ''}`}
             >
               <button
-                className={`page-link shadow-sm rounded border-0 ${
-                  currentPage === page
-                    ? ""
-                    : "bg-white text-primary"
+                className={`page-link box p-0 ${
+                  currentPage === page ? 'active' : ''
                 }`}
                 onClick={() => handlePageChange(page)}
               >
@@ -87,14 +83,14 @@ export default function Pagination({
         {/* Botón Siguiente */}
         <li
           className={`page-item ${
-            currentPage === totalPages ? "disabled" : ""
+            currentPage === totalPages ? 'disabled' : ''
           }`}
         >
           <button
-            className="page-link shadow-sm rounded border-0 bg-white"
+            className='page-link box p-0'
             onClick={() => handlePageChange(currentPage + 1)}
             disabled={currentPage === totalPages}
-            aria-label="Next"
+            aria-label='Next'
           >
             &raquo;
           </button>
diff --git a/src/data/crear-cuestionario.ts b/src/data/crear-cuestionario.ts
new file mode 100644
index 0000000..a874123
--- /dev/null
+++ b/src/data/crear-cuestionario.ts
@@ -0,0 +1,53 @@
+export const crear = {
+  nombreFormulario:
+    'Registro para la Feria de la Sexualidad - Comunidad FES Acatlán',
+  descripcion:
+    'La Feria de la Sexualidad es un espacio seguro e informativo dirigido a toda la comunidad universitaria. Este registro nos ayudará a organizar mejor las actividades, talleres y charlas, así como conocer tus intereses. Por favor, completa el siguiente formulario para confirmar tu participación.',
+  banner: 'base64',
+  secciones: [
+    {
+      titulo: 'Participación en actividades',
+      descripcion:
+        'Selecciona las actividades en las que te gustaría participar durante la Feria.',
+      preguntas: [
+        {
+          titulo: '¿Qué tipo de actividades te interesan?',
+          tipo: 'Multiple',
+          opciones: [
+            { valor: 'Talleres sobre salud sexual' },
+            { valor: 'Charlas informativas' },
+            { valor: 'Mesas de diálogo y reflexión' },
+          ],
+          obligatoria: true,
+        },
+        {
+          titulo:
+            '¿Estás interesado/a en recibir un certificado de participación? ',
+          tipo: 'Cerrada',
+          opciones: [{ valor: 'Si' }, { valor: 'No' }],
+          obligatoria: false,
+        },
+      ],
+    },
+    {
+      titulo: 'Comentarios',
+      descripcion:
+        'Comparte tus ideas, inquietudes o sugerencias para esta y futuras ediciones',
+      preguntas: [
+        {
+          titulo:
+            '¿Hay algún tema específico que te gustaría que se abordara en la feria? ',
+          tipo: 'Abierta',
+          opciones: [],
+          obligatoria: false,
+        },
+        {
+          titulo: 'Comentarios adicionales',
+          tipo: 'Abierta',
+          opciones: [],
+          obligatoria: false,
+        },
+      ],
+    },
+  ],
+};
diff --git a/src/data/cuestionario.ts b/src/data/cuestionario.ts
new file mode 100644
index 0000000..c666ca9
--- /dev/null
+++ b/src/data/cuestionario.ts
@@ -0,0 +1,195 @@
+export const res: CuestionarioCompleto = {
+  tipo_cuestionario: {
+    id_tipo_cuestionario: 1,
+    tipo_cuestionario: 'Encuesta',
+  },
+  cuestionario: {
+    id_cuestionario: 10,
+    nombre_form: 'Encuesta de Satisfacción',
+    contador_secciones: 2,
+    descripcion: 'Encuesta para medir la satisfacción del cliente',
+    editable: true,
+    fecha_inicio: '2025-03-26T00:00:00',
+    fecha_fin: '2025-03-31T23:59:59',
+    id_cuestionario_original: null,
+    id_tipo_cuestionario: 1,
+    secciones: [
+      {
+        id_cuestionario_seccion: 1,
+        posicion: 1,
+        seccion: {
+          id_seccion: 100,
+          contador_pregunta: 2,
+          descripcion: 'Preguntas generales sobre el servicio',
+          titulo: 'General',
+        },
+        preguntas: [
+          {
+            id_seccion_pregunta: 1000,
+            posicion: 1,
+            pregunta: {
+              id_pregunta: 10000,
+              pregunta: '¿Cómo calificaría nuestro servicio?',
+              contador_opcion: 4,
+              obligatoria: true,
+              id_tipo_pregunta: 1,
+              id_opcion_dependiente: null,
+              tipo_pregunta: {
+                id_tipo: 1,
+                tipo_pregunta: 'Cerrada',
+              },
+              opciones: [
+                {
+                  id_pregunta_opcion: 50000,
+                  posicion: 1,
+                  id_opcion: 90000,
+                  opcion: {
+                    id_opcion: 90000,
+                    opcion: 'Excelente',
+                  },
+                },
+                {
+                  id_pregunta_opcion: 50001,
+                  posicion: 2,
+                  id_opcion: 90001,
+                  opcion: {
+                    id_opcion: 90001,
+                    opcion: 'Bueno',
+                  },
+                },
+                {
+                  id_pregunta_opcion: 50002,
+                  posicion: 3,
+                  id_opcion: 90002,
+                  opcion: {
+                    id_opcion: 90002,
+                    opcion: 'Regular',
+                  },
+                },
+                {
+                  id_pregunta_opcion: 50003,
+                  posicion: 4,
+                  id_opcion: 90003,
+                  opcion: {
+                    id_opcion: 90003,
+                    opcion: 'Malo',
+                  },
+                },
+              ],
+            },
+          },
+          {
+            id_seccion_pregunta: 1001,
+            posicion: 2,
+            pregunta: {
+              id_pregunta: 10001,
+              pregunta: '¿Recomendaría nuestro servicio?',
+              contador_opcion: 2,
+              obligatoria: true,
+              id_tipo_pregunta: 1,
+              id_opcion_dependiente: null,
+              tipo_pregunta: {
+                id_tipo: 1,
+                tipo_pregunta: 'Cerrada',
+              },
+              opciones: [
+                {
+                  id_pregunta_opcion: 50004,
+                  posicion: 1,
+                  id_opcion: 90004,
+                  opcion: {
+                    id_opcion: 90004,
+                    opcion: 'Sí',
+                  },
+                },
+                {
+                  id_pregunta_opcion: 50005,
+                  posicion: 2,
+                  id_opcion: 90005,
+                  opcion: {
+                    id_opcion: 90005,
+                    opcion: 'No',
+                  },
+                },
+              ],
+            },
+          },
+        ],
+      },
+      {
+        id_cuestionario_seccion: 2,
+        posicion: 2,
+        seccion: {
+          id_seccion: 101,
+          contador_pregunta: 1,
+          descripcion: 'Preguntas adicionales para conocer más detalles',
+          titulo: 'Adicionales',
+        },
+        preguntas: [
+          {
+            id_seccion_pregunta: 1002,
+            posicion: 1,
+            pregunta: {
+              id_pregunta: 10002,
+              pregunta: '¿Qué mejorarías en nuestro servicio?',
+              contador_opcion: 0,
+              obligatoria: false,
+              id_tipo_pregunta: 2,
+              id_opcion_dependiente: null,
+              tipo_pregunta: {
+                id_tipo: 2,
+                tipo_pregunta: 'Abierta',
+              },
+              opciones: [],
+            },
+          },
+          {
+            id_seccion_pregunta: 1003,
+            posicion: 3,
+            pregunta: {
+              id_pregunta: 10003,
+              pregunta: '¿Qué aspectos del servicio fueron de tu agrado?',
+              contador_opcion: 3,
+              obligatoria: false,
+              id_tipo_pregunta: 3, // Puedes usar este ID para distinguir múltiples
+              id_opcion_dependiente: null,
+              tipo_pregunta: {
+                id_tipo: 3,
+                tipo_pregunta: 'Multiple',
+              },
+              opciones: [
+                {
+                  id_pregunta_opcion: 50006,
+                  posicion: 1,
+                  id_opcion: 90006,
+                  opcion: {
+                    id_opcion: 90006,
+                    opcion: 'Rapidez',
+                  },
+                },
+                {
+                  id_pregunta_opcion: 50007,
+                  posicion: 2,
+                  id_opcion: 90007,
+                  opcion: {
+                    id_opcion: 90007,
+                    opcion: 'Atención al cliente',
+                  },
+                },
+                {
+                  id_pregunta_opcion: 50008,
+                  posicion: 3,
+                  id_opcion: 90008,
+                  opcion: {
+                    id_opcion: 90008,
+                    opcion: 'Facilidad de uso',
+                  },
+                },
+              ],
+            },
+          },
+        ],
+      },
+    ],
+  },
+};
diff --git a/src/styles/sass/_extends.scss b/src/styles/sass/_extends.scss
index e326d1a..cc9e051 100644
--- a/src/styles/sass/_extends.scss
+++ b/src/styles/sass/_extends.scss
@@ -1,8 +1,8 @@
 .box {
-  @extend .shadow-sm;
+  @extend .border;
   @extend .rounded;
   @extend .bg-white;
-  @extend .p-3;
+  @extend .p-2;
 
   &.active {
     @extend .bg-primary;
diff --git a/src/types/cuestionario.d.ts b/src/types/cuestionario.d.ts
new file mode 100644
index 0000000..13883ae
--- /dev/null
+++ b/src/types/cuestionario.d.ts
@@ -0,0 +1,70 @@
+interface TipoCuestionario {
+  id_tipo_cuestionario: number;
+  tipo_cuestionario: string;
+}
+
+interface Opcion {
+  id_opcion: number;
+  opcion: string;
+}
+
+interface PreguntaOpcion {
+  id_pregunta_opcion: number;
+  posicion: number;
+  id_opcion: number;
+  opcion: Opcion;
+}
+
+interface TipoPregunta {
+  id_tipo: number;
+  tipo_pregunta: string;
+}
+
+interface Pregunta {
+  id_pregunta: number;
+  pregunta: string;
+  contador_opcion: number;
+  obligatoria: boolean;
+  id_tipo_pregunta: number;
+  id_opcion_dependiente: number | null;
+  tipo_pregunta: TipoPregunta;
+  opciones: PreguntaOpcion[];
+}
+
+interface SeccionPregunta {
+  id_seccion_pregunta: number;
+  posicion: number;
+  pregunta: Pregunta;
+}
+
+interface SeccionInfo {
+  id_seccion: number;
+  contador_pregunta: number;
+  descripcion: string;
+  titulo: string;
+}
+
+interface CuestionarioSeccion {
+  id_cuestionario_seccion: number;
+  posicion: number;
+  seccion: SeccionInfo;
+  preguntas: SeccionPregunta[];
+}
+
+interface Cuestionario {
+  id_cuestionario: number;
+  nombre_form: string;
+  contador_secciones: number;
+  descripcion: string;
+  editable: boolean;
+  fecha_inicio: string; // Formato ISO 8601
+  fecha_fin: string; // Formato ISO 8601
+  id_cuestionario_original: number | null;
+  id_tipo_cuestionario: number;
+  secciones: CuestionarioSeccion[];
+}
+
+interface CuestionarioCompleto {
+  tipo_cuestionario: TipoCuestionario;
+  cuestionario: Cuestionario;
+}