diff --git a/src/app/(Administrador)/equipoComputo/page.tsx b/src/app/(Administrador)/equipoComputo/page.tsx
index c0a2c20..15fc4f2 100644
--- a/src/app/(Administrador)/equipoComputo/page.tsx
+++ b/src/app/(Administrador)/equipoComputo/page.tsx
@@ -7,6 +7,7 @@ import Pregunta3 from "@/components/Equipo_Computo/Pregunta3";
 import Pregunta7EP from "@/components/Perifericos/Pregunta7EP";
 import Pregunta9 from "@/components/Equipo_Computo/Pregunta9";
 import "../../styles/layout/reporte.scss";
+import Pregunta8 from "@/components/Perifericos/Pregunta8";
 
 type PreguntaKey =
   | "pregunta1"
@@ -44,7 +45,12 @@ export default function Page() {
       case "pregunta3":
         return <Pregunta3 />;
       case "pregunta7EP":
-        return <Pregunta7EP />;
+        return (
+          <>
+            <Pregunta7EP />
+            <Pregunta8 />
+          </>
+        );
       case "pregunta9":
         return <Pregunta9 />;
       default:
diff --git a/src/app/styles/layout/BarNavigation.scss b/src/app/styles/layout/BarNavigation.scss
index 081ca7e..a001dfd 100644
--- a/src/app/styles/layout/BarNavigation.scss
+++ b/src/app/styles/layout/BarNavigation.scss
@@ -21,7 +21,7 @@
   cursor: pointer;
   width: auto;
   transition: background-color 0.3s ease;
-  font-size: 1.5rem;
+  font-size: 1rem;
 }
 
 .menuToggle {
@@ -88,7 +88,7 @@
   align-items: center;
   justify-content: center;
   color: #383838;
-  font-size: 2rem;
+  font-size: 1.5rem;
 }
 
 .links {
diff --git a/src/app/styles/layout/BarNavigationAdmin.scss b/src/app/styles/layout/BarNavigationAdmin.scss
index 2291f9b..7213c37 100644
--- a/src/app/styles/layout/BarNavigationAdmin.scss
+++ b/src/app/styles/layout/BarNavigationAdmin.scss
@@ -21,7 +21,7 @@
   cursor: pointer;
   width: auto;
   transition: background-color 0.3s ease;
-  font-size: 1.5rem;
+  font-size: 1rem;
 }
 
 .menuToggle {
@@ -88,7 +88,7 @@
   align-items: center;
   justify-content: center;
   color: #383838;
-  font-size: 2rem;
+  font-size: 1.5rem;
 }
 
 .links {
diff --git a/src/app/styles/layout/reporte.scss b/src/app/styles/layout/reporte.scss
index 505c16e..c0efb70 100644
--- a/src/app/styles/layout/reporte.scss
+++ b/src/app/styles/layout/reporte.scss
@@ -88,11 +88,12 @@
 .data-table_reporte {
   display: flex;
   flex-direction: column;
-  gap: 10px;
+  gap: 20px;
   justify-content: center;
   padding: 20px;
   background-color: #f5f5f7;
 
+  text-align: center;
   border: none;
   min-height: 300px;
   animation: fadein 0.2s ease;
diff --git a/src/components/Equipo_Computo/Pregunta1.tsx b/src/components/Equipo_Computo/Pregunta1.tsx
index 8ae966d..d2cb113 100644
--- a/src/components/Equipo_Computo/Pregunta1.tsx
+++ b/src/components/Equipo_Computo/Pregunta1.tsx
@@ -170,9 +170,8 @@ export default function Pregunta1() {
       <div className="contenedor-censo">Censo de equipos de cómputo</div>
 
       <div className="pregunta-cuadro">
-        1. Desglose en cada renglón, el número de equipos de cómputo dedicado
-        por cada categoría enlistada, de acuerdo con el perfil de usuario al que
-        se destina su uso primordialmente. *
+        Número de equipos de cómputo
+        por cada categoría enlistada, de acuerdo con el perfil de usuario.
       </div>
 
       <div className="contenedor-tablas">
diff --git a/src/components/Equipo_Computo/Pregunta2.tsx b/src/components/Equipo_Computo/Pregunta2.tsx
index 5414df3..ced4338 100644
--- a/src/components/Equipo_Computo/Pregunta2.tsx
+++ b/src/components/Equipo_Computo/Pregunta2.tsx
@@ -57,9 +57,9 @@ export default function Pregunta2() {
     const token = Cookies.get("token");
     const headers = {Authorization: `Bearer ${token}`};
     axios
-      .get("https://venus.acatlan.unam.mx/censo_test/equipos/reporte/tipoEquipos_sistemasOperativos",{headers}) // ← TU API AQUI
+      .get("https://venus.acatlan.unam.mx/censo_test/equipos/reporte/tipoEquipos_sistemasOperativos",{headers})
       .then((res) => {
-        const json = res.data; // Tu JSON con 5 arreglos
+        const json = res.data; 
 
         const formatted: PlatformData = {
           "pc-desktop": transformPlatform(json[0]),
@@ -85,10 +85,6 @@ export default function Pregunta2() {
           Censo de equipos — Sistemas Operativos
         </div>
 
-        <div className={styles.header_P1}>
-          Presione cada pestaña para ver la información de las plataformas.
-        </div>
-
         <div className={styles["main-content_P1"]}>
           {/* Tabs */}
           <div className={styles.tabs_P1}>
diff --git a/src/components/Perifericos/Pregunta7EP.tsx b/src/components/Perifericos/Pregunta7EP.tsx
index 5901232..406a6e3 100644
--- a/src/components/Perifericos/Pregunta7EP.tsx
+++ b/src/components/Perifericos/Pregunta7EP.tsx
@@ -1,6 +1,8 @@
 "use client";
 
 import React, { useState, useEffect } from "react";
+import axios from "axios";
+import Cookies from "js-cookie";
 import "../../app/styles/layout/pregunta7.scss";
 
 interface Dato {
@@ -8,29 +10,6 @@ interface Dato {
   cantidad: number;
 }
 
-const datosSimulados: Dato[] = [
-  { nombre: "AULA DE ROBÓTICA 101", cantidad: 18 },
-  { nombre: "LAB DE QUÍMICA 201", cantidad: 25 },
-  { nombre: "LAB DE FÍSICA 202", cantidad: 30 },
-  { nombre: "LAB DE PROGRAMACIÓN 301", cantidad: 40 },
-  { nombre: "AULA DE DISEÑO 102", cantidad: 22 },
-  { nombre: "LAB ELECTRÓNICA 204", cantidad: 35 },
-  { nombre: "LAB COMPUTACIÓN 305", cantidad: 28 },
-  { nombre: "AULA INTERACTIVA 106", cantidad: 15 },
-  { nombre: "LAB DE INNOVACIÓN 307", cantidad: 33 },
-  { nombre: "SALA DE CONFERENCIAS A", cantidad: 12 },
-  { nombre: "LAB DE MECATRÓNICA 308", cantidad: 45 },
-  { nombre: "LAB DE INTELIGENCIA ARTIFICIAL 309", cantidad: 38 },
-  { nombre: "LAB DE REDES 310", cantidad: 27 },
-  { nombre: "SALA MULTIMEDIA B", cantidad: 20 },
-  { nombre: "LAB DE BIOLOGÍA 205", cantidad: 26 },
-  { nombre: "LAB DE MECÁNICA 210", cantidad: 32 },
-  { nombre: "AULA DE INGLÉS 110", cantidad: 19 },
-  { nombre: "SALA DE DOCENTES", cantidad: 14 },
-  { nombre: "LAB DE BIG DATA 311", cantidad: 36 },
-  { nombre: "LAB DE CIBERSEGURIDAD 312", cantidad: 29 },
-];
-
 export default function Pregunta7EP() {
   const [data, setData] = useState<Dato[]>([]);
   const [currentPage, setCurrentPage] = useState<number>(1);
@@ -38,8 +17,25 @@ export default function Pregunta7EP() {
   const [sortColumn, setSortColumn] = useState<keyof Dato | null>(null);
   const [sortAsc, setSortAsc] = useState<boolean>(true);
 
+  const api_url = process.env.NEXT_PUBLIC_API_URL;
+
   useEffect(() => {
-    setData(datosSimulados);
+    const token = Cookies.get("token");
+    const headers = { Authorization: `Bearer ${token}` };
+
+    axios
+      .get(`${api_url}/equipos/reporte/contar_laboratorio`, { headers })
+      .then((res) => {
+        const formato: Dato[] = res.data.map((item: any) => ({
+          nombre: item.laboratorio || "SIN NOMBRE",
+          cantidad: item.total || 0,
+        }));
+
+        setData(formato);
+      })
+      .catch((err) => {
+        console.error("Error cargando datos:", err);
+      });
   }, []);
 
   const sortedData = React.useMemo(() => {
@@ -80,6 +76,10 @@ export default function Pregunta7EP() {
 
   return (
     <div className="container">
+      <div className="pregunta-cuadro">
+        Numero de laboratorios.
+      </div>
+
       <div className="controls">
         <div className="show-records">
           Mostrar
@@ -99,7 +99,10 @@ export default function Pregunta7EP() {
         <table>
           <thead>
             <tr>
-              <th onClick={() => handleSort("nombre")}>
+              <th
+                onClick={() => handleSort("nombre")}
+                style={{ textAlign: "center" }}
+              >
                 Nombre del laboratorio o aula
                 {sortColumn === "nombre" && (
                   <img
@@ -109,7 +112,10 @@ export default function Pregunta7EP() {
                 )}
               </th>
 
-              <th onClick={() => handleSort("cantidad")}>
+              <th
+                onClick={() => handleSort("cantidad")}
+                style={{ textAlign: "center" }}
+              >
                 Cantidad
                 {sortColumn === "cantidad" && (
                   <img
diff --git a/src/components/Perifericos/Pregunta8.tsx b/src/components/Perifericos/Pregunta8.tsx
new file mode 100644
index 0000000..a91b8cd
--- /dev/null
+++ b/src/components/Perifericos/Pregunta8.tsx
@@ -0,0 +1,167 @@
+"use client";
+
+import React, { useState, useEffect } from "react";
+import axios from "axios";
+import Cookies from "js-cookie";
+import "../../app/styles/layout/pregunta7.scss";
+
+interface Dato {
+  nombre: string;
+  cantidad: number;
+}
+
+export default function Pregunta8() {
+  const [data, setData] = useState<Dato[]>([]);
+  const [currentPage, setCurrentPage] = useState<number>(1);
+  const [recordsPerPage, setRecordsPerPage] = useState<number>(10);
+  const [sortColumn, setSortColumn] = useState<keyof Dato | null>(null);
+  const [sortAsc, setSortAsc] = useState<boolean>(true);
+
+  const api_url = process.env.NEXT_PUBLIC_API_URL;
+
+  useEffect(() => {
+    const token = Cookies.get("token");
+    const headers = { Authorization: `Bearer ${token}` };
+
+    axios
+      .get(`${api_url}/equipos/reporte/contar_proyecto`, { headers })
+      .then((res) => {
+        const formato: Dato[] = res.data.map((item: any) => ({
+          nombre: item.proyecto || "SIN PROYECTO",
+          cantidad: Number(item.total) || 0,
+        }));
+
+        setData(formato);
+      })
+      .catch((err) => {
+        console.error("Error cargando datos:", err);
+      });
+  }, []);
+
+  const sortedData = React.useMemo(() => {
+    if (!sortColumn) return data;
+    return [...data].sort((a, b) => {
+      if (a[sortColumn] < b[sortColumn]) return sortAsc ? -1 : 1;
+      if (a[sortColumn] > b[sortColumn]) return sortAsc ? 1 : -1;
+      return 0;
+    });
+  }, [data, sortColumn, sortAsc]);
+
+  const paginatedData = React.useMemo(() => {
+    const start = (currentPage - 1) * recordsPerPage;
+    return sortedData.slice(start, start + recordsPerPage);
+  }, [sortedData, currentPage, recordsPerPage]);
+
+  const totalPages = Math.ceil(sortedData.length / recordsPerPage);
+
+  const handleSort = (column: keyof Dato) => {
+    if (sortColumn === column) {
+      setSortAsc(!sortAsc);
+    } else {
+      setSortColumn(column);
+      setSortAsc(true);
+    }
+    setCurrentPage(1);
+  };
+
+  const handleRecordsPerPageChange = (
+    e: React.ChangeEvent<HTMLSelectElement>
+  ) => {
+    setRecordsPerPage(Number(e.target.value));
+    setCurrentPage(1);
+  };
+
+  const startItem = (currentPage - 1) * recordsPerPage + 1;
+  const endItem = Math.min(startItem + recordsPerPage - 1, sortedData.length);
+
+  return (
+    <div className="container">
+      <div className="pregunta-cuadro">Numero de proyectos.</div>
+      <div className="controls">
+        <div className="show-records">
+          Mostrar
+          <select value={recordsPerPage} onChange={handleRecordsPerPageChange}>
+            <option value={5}>5</option>
+            <option value={10}>10</option>
+            <option value={25}>25</option>
+          </select>
+          registros
+        </div>
+        <div className="results-info">
+          Mostrando {startItem} al {endItem} de {sortedData.length} resultados
+        </div>
+      </div>
+
+      <div className="table-container">
+        <table>
+          <thead>
+            <tr>
+              <th
+                onClick={() => handleSort("nombre")}
+                style={{ textAlign: "center" }}
+              >
+                Proyecto
+                {sortColumn === "nombre" && (
+                  <img
+                    src={sortAsc ? "/arrow_up.svg" : "/arrow_down.svg"}
+                    alt="orden"
+                  />
+                )}
+              </th>
+
+              <th
+                onClick={() => handleSort("cantidad")}
+                style={{ textAlign: "center" }}
+              >
+                Cantidad
+                {sortColumn === "cantidad" && (
+                  <img
+                    src={sortAsc ? "/arrow_up.svg" : "/arrow_down.svg"}
+                    alt="orden"
+                  />
+                )}
+              </th>
+            </tr>
+          </thead>
+
+          <tbody>
+            {paginatedData.map((item, index) => (
+              <tr key={index}>
+                <td>{item.nombre}</td>
+                <td>{item.cantidad}</td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+
+      <div className="pagination">
+        <button
+          onClick={() => setCurrentPage((prev) => Math.max(prev - 1, 1))}
+          disabled={currentPage === 1}
+        >
+          {"<"}
+        </button>
+
+        {Array.from({ length: totalPages }, (_, i) => i + 1).map((page) => (
+          <button
+            key={page}
+            onClick={() => setCurrentPage(page)}
+            className={page === currentPage ? "active" : ""}
+          >
+            {page}
+          </button>
+        ))}
+
+        <button
+          onClick={() =>
+            setCurrentPage((prev) => Math.min(prev + 1, totalPages))
+          }
+          disabled={currentPage === totalPages}
+        >
+          {">"}
+        </button>
+      </div>
+    </div>
+  );
+}