diff --git a/package-lock.json b/package-lock.json
index 1d24000..935889a 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -14,7 +14,6 @@
         "@testing-library/user-event": "^13.5.0",
         "@types/jest": "^27.5.2",
         "@types/node": "^16.18.126",
-        "@types/react": "^19.1.9",
         "@types/react-dom": "^19.1.7",
         "react": "^19.1.1",
         "react-dom": "^19.1.1",
@@ -22,6 +21,9 @@
         "recharts": "^3.1.0",
         "typescript": "^4.9.5",
         "web-vitals": "^2.1.4"
+      },
+      "devDependencies": {
+        "@types/react": "^19.1.14"
       }
     },
     "node_modules/@adobe/css-tools": {
@@ -3930,9 +3932,9 @@
       "license": "MIT"
     },
     "node_modules/@types/react": {
-      "version": "19.1.9",
-      "resolved": "https://registry.npmjs.org/@types/react/-/react-19.1.9.tgz",
-      "integrity": "sha512-WmdoynAX8Stew/36uTSVMcLJJ1KRh6L3IZRx1PZ7qJtBqT3dYTgyDTx8H1qoRghErydW7xw9mSJ3wS//tCRpFA==",
+      "version": "19.1.14",
+      "resolved": "https://registry.npmjs.org/@types/react/-/react-19.1.14.tgz",
+      "integrity": "sha512-ukd93VGzaNPMAUPy0gRDSC57UuQbnH9Kussp7HBjM06YFi9uZTFhOvMSO2OKqXm1rSgzOE+pVx1k1PYHGwlc8Q==",
       "license": "MIT",
       "dependencies": {
         "csstype": "^3.0.2"
diff --git a/package.json b/package.json
index 7387381..33aa09e 100644
--- a/package.json
+++ b/package.json
@@ -9,7 +9,6 @@
     "@testing-library/user-event": "^13.5.0",
     "@types/jest": "^27.5.2",
     "@types/node": "^16.18.126",
-    "@types/react": "^19.1.9",
     "@types/react-dom": "^19.1.7",
     "react": "^19.1.1",
     "react-dom": "^19.1.1",
@@ -41,5 +40,8 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "devDependencies": {
+    "@types/react": "^19.1.14"
   }
 }
diff --git a/src/App.css b/src/App.css
index 2cbb67d..29213ec 100644
--- a/src/App.css
+++ b/src/App.css
@@ -369,59 +369,323 @@ section {
   scroll-margin-top: 100px; /* Ajusta este valor a la altura del navbar */
 }
 
-/* === Filtros de Noticias === */
-.news-filters {
+/* ====== Estilos Ajustados para Mercado Financiero ====== */
+
+.financial-market {
+  font-family: 'Segoe UI', sans-serif;
+  padding: 20px;
+  background: #f4f6f9;
+  min-height: 100vh;
+  color: #000000;
+}
+
+/* ===== Títulos ===== */
+.financial-market h1 {
+  text-align: center;
+  font-family: 'Segoe UI Semibold', 'Segoe UI', sans-serif;
+  font-size: 24px;
+  color: #000000;
+  margin-bottom: 20px;
+}
+
+.financial-market h2 {
+  text-align: center;
+  font-family: 'Segoe UI Semibold', 'Segoe UI', sans-serif;
+  font-size: 20px;
+  color: #000000;
+  margin-bottom: 12px;
+}
+
+/* ===== Subtítulos / etiquetas ===== */
+.label,
+.subtitle,
+.financial-market p {
+  font-family: 'Segoe UI', sans-serif;
+  font-size: 14px;
+  color: #666666;
+}
+
+/* ===== Selector de Categorías ===== */
+.category-selector {
   display: flex;
-  flex-wrap: wrap;
-  gap: 1rem;
-  margin-bottom: 2rem;
-  align-items: center;
+  justify-content: center;
+  margin-bottom: 20px;
+  gap: 10px;
 }
 
-.filter-input,
-.filter-select,
-.filter-date {
-  padding: 0.5rem 0.8rem;
+.category-selector .tab {
+  padding: 10px 16px;
+  border: none;
   border-radius: 6px;
-  border: 1px solid #ccc;
-  font-size: 0.95rem;
+  background: #ffffff;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  font-family: 'Segoe UI', sans-serif;
+  font-size: 14px;
+  color: #000000;
+  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
 }
 
-.filter-select {
-  background-color: #fff;
-  cursor: pointer;
+.category-selector .tab:hover {
+  background: #f5f5f5;
+}
+
+.category-selector .tab.active {
+  background: #004080;
+  color: #ffffff;
+  font-weight: 600;
 }
 
-.filter-dates {
+/* ===== Tabla de Activos ===== */
+.table-container {
   display: flex;
-  align-items: center;
-  gap: 0.5rem;
+  justify-content: center;
 }
 
-.filter-dates label {
-  font-size: 0.9rem;
-  font-weight: 500;
+.table-wrapper {
+  width: 90%;
+  max-width: 900px;
+  background: white;
+  border-radius: 12px;
+  padding: 16px;
+  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
 }
 
-/* Botón de filtrar */
-.news-filters .btn-primary {
-  padding: 0.5rem 1rem;
-  font-size: 0.95rem;
+.custom-table {
+  width: 100%;
+  border-collapse: collapse;
+  font-family: 'Segoe UI', sans-serif;
+  font-size: 14px;
+}
+
+.custom-table thead th {
+  background: #f5f5f5;
+  font-weight: 600;
+  color: #000000;       
+  padding: 12px;
+  text-align: center;
+  border: none; 
+}
+
+.custom-table tbody td {
+  padding: 12px;
+  text-align: center;
+  color: #000000;
+  border: none; 
+  border-bottom: 1px solid #ddd;
+}
+
+.custom-table tbody tr:nth-child(odd) {
+  background: #ffffff; 
+}
+
+.custom-table tbody tr:nth-child(even) {
+  background: #fafafa;  
+}
+
+.custom-table tbody tr:hover {
+  background: #f0f0f0;
+  cursor: pointer;
+}
+
+.custom-table tr.selected {
+  background: #e6f0ff;
+  font-weight: 600;
+}
+
+.custom-table td.positivo {
+  color: #0F9D58;
+  font-weight: bold;
+}
+
+.custom-table td.negativo {
+  color: #AA0000;
+  font-weight: bold;
+}
+
+.custom-table tbody tr:nth-child(odd) {
+  background: #ffffff;
 }
 
-/* Responsividad filtros */
+.custom-table tbody tr:nth-child(even) {
+  background: #ffffff;
+}
+
+.custom-table tr:hover {
+  background: #fffefe;
+  cursor: pointer;
+}
+
+.custom-table tr.selected {
+  background: #e6f0ff;
+  font-weight: 600;
+}
+
+.custom-table td.positivo {
+  color: #0F9D58;
+  font-weight: bold;
+}
+
+.custom-table td.negativo {
+  color: #AA0000;
+  font-weight: bold;
+}
+
+.error {
+  color: #AA0000;
+  text-align: center;
+  font-weight: 600;
+}
+
+/* ===== Gráficos ===== */
+.chart-container {
+  background: #ffffff;
+  border-radius: 12px;
+  padding: 16px;
+  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
+}
+
+.recharts-cartesian-axis-tick line,
+.recharts-cartesian-axis-line {
+  stroke: #666666;
+}
+
+.recharts-cartesian-axis-tick text {
+  fill: #666666;
+  font-family: 'Segoe UI', sans-serif;
+  font-size: 12px;
+}
+
+/* ===== Botones principales ===== */
+button.primary {
+  background: #004080;
+  color: #ffffff;
+  border: none;
+  border-radius: 6px;
+  padding: 10px 16px;
+  cursor: pointer;
+  font-family: 'Segoe UI', sans-serif;
+  font-size: 14px;
+  transition: all 0.3s ease;
+}
+
+button.primary:hover {
+  background: #003366;
+}
+
+.chart-container {
+  margin-top: 24px;
+  max-width: 700px;
+  margin-inline: auto;
+  background: #ffffff;
+  border-radius: 12px;
+  padding: 16px;
+  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
+  height: 320px; 
+}
+
+
+.chart-container h2 {
+  font-family: 'Segoe UI Semibold', 'Segoe UI', sans-serif;
+  font-size: 20px;
+  color: #000000;
+  margin-bottom: 12px;
+  text-align: center;
+}
+
+/* ===== RESPONSIVE DESIGN ===== */
+
 @media (max-width: 768px) {
-  .news-filters {
+
+  .category-selector {
+    flex-wrap: wrap;
+    gap: 8px;
+  }
+
+  .category-selector .tab {
+    flex: 1 1 auto; 
+    font-size: 13px;
+    padding: 8px 12px;
+    text-align: center;
+  }
+
+  .table-wrapper {
+    width: 100%;
+    overflow-x: auto; 
+    padding: 12px;
+  }
+
+  .custom-table {
+    font-size: 13px;
+    min-width: 600px;  
+  }
+
+  .custom-table thead th,
+  .custom-table tbody td {
+    padding: 10px 8px;
+  }
+
+  .chart-container {
+    padding: 12px;
+    height: 260px;
+  }
+
+  .chart-container h2 {
+    font-size: 18px;
+  }
+}
+
+@media (max-width: 480px) {
+
+  .category-selector {
     flex-direction: column;
     align-items: stretch;
   }
 
-  .filter-dates {
-    flex-direction: column;
-    align-items: flex-start;
+  .category-selector .tab {
+    width: 100%;
+    font-size: 12px;
+    padding: 8px;
   }
 
-  .news-filters .btn-primary {
+  .custom-table {
+    font-size: 12px;
+  }
+
+  .custom-table thead {
+    display: none; 
+  }
+
+  .custom-table tbody tr {
+    display: block;
+    margin-bottom: 12px;
+    border: 1px solid #ddd;
+    border-radius: 8px;
+    padding: 8px;
+    background: #fff;
+  }
+
+  .custom-table tbody td {
+    display: flex;
+    justify-content: space-between;
+    padding: 6px 4px;
+    border: none;
+  }
+
+  .custom-table tbody td::before {
+    content: attr(data-label);
+    font-weight: bold;
+    color: #444;
+  }
+
+  button.primary {
     width: 100%;
+    font-size: 13px;
+    padding: 10px;
+  }
+
+  .chart-container {
+    height: 220px;
+    padding: 10px;
   }
-}
\ No newline at end of file
+}
diff --git a/src/App.tsx b/src/App.tsx
index bd389f3..6a2c0b8 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,6 +1,7 @@
 import React, { useState } from "react";
 import CryptoChart from "./components/CryptoChart";
 import NewsSection from "./components/NewsSection";
+import MercadoFinanciero from "./components/MercadoFinanciero";
 import "./App.css";
 
 type TabType = "Acciones" | "ETFs" | "Forex";
@@ -113,6 +114,9 @@ function App() {
       {/* Noticias → ahora en componente externo */}
       <NewsSection  />
 
+      {/* Mercado Financiero */}
+      <MercadoFinanciero />
+
       {/* Footer */}
       <footer className="footer" id="footer">
         <div className="footer-container">
diff --git a/src/components/MercadoFinanciero.tsx b/src/components/MercadoFinanciero.tsx
new file mode 100644
index 0000000..7b9542b
--- /dev/null
+++ b/src/components/MercadoFinanciero.tsx
@@ -0,0 +1,324 @@
+import React, { useEffect, useState } from "react";
+
+import {
+  LineChart,
+  Line,
+  XAxis,
+  YAxis,
+  Tooltip,
+  CartesianGrid,
+  ResponsiveContainer,
+} from "recharts";
+
+interface Activo {
+  simbolo: string;
+  nombre: string;
+  precio: number;
+  cambio: string;
+}
+
+interface HistoricalData {
+  date: string;
+  price: number;
+}
+
+const MercadoFinanciero: React.FC = () => {
+  const [categoria, setCategoria] = useState<"acciones" | "etfs" | "divisas">("acciones");
+  const [activos, setActivos] = useState<Activo[]>([]);
+  const [loading, setLoading] = useState<boolean>(false);
+  const [error, setError] = useState<string>("");
+
+  // Estado para el activo seleccionado (click en tabla)
+  const [selectedSymbol, setSelectedSymbol] = useState<string | null>(null);
+  const [historicalData, setHistoricalData] = useState<HistoricalData[]>([]);
+  const [loadingChart, setLoadingChart] = useState<boolean>(false);
+
+  // Cargar lista de activos
+  const fetchData = async (cat: "acciones" | "etfs" | "divisas") => {
+    setLoading(true);
+    setError("");
+    try {
+      const mockData: {
+      acciones: Activo[];
+      etfs: Activo[];
+      divisas: Activo[];
+      } = {
+      acciones: [
+        { simbolo: "AAPL", nombre: "Apple Inc.", precio: 175.35, cambio: "1.2" },
+        { simbolo: "TSLA", nombre: "Tesla Inc.", precio: 250.14, cambio: "-2.1" },
+        { simbolo: "MSFT", nombre: "Microsoft", precio: 330.1, cambio: "0.8" },
+        { simbolo: "AMZN", nombre: "Amazon.com Inc.", precio: 135.76, cambio: "0.5" },
+        { simbolo: "GOOGL", nombre: "Alphabet Inc.", precio: 138.42, cambio: "-0.3" },
+      ],
+      etfs: [
+        { simbolo: "SPY", nombre: "SPDR S&P 500 ETF", precio: 450.12, cambio: "0.6" },
+        { simbolo: "QQQ", nombre: "Invesco QQQ Trust", precio: 370.55, cambio: "-1.1" },
+        { simbolo: "IVV", nombre: "iShares Core S&P 500", precio: 448.32, cambio: "0.9" },
+        { simbolo: "ARKK", nombre: "ARK Innovation ETF", precio: 42.15, cambio: "-0.7" },
+      ],
+      divisas: [
+        { simbolo: "EUR/USD", nombre: "Euro / Dólar", precio: 1.065, cambio: "-0.2" },
+        { simbolo: "USD/JPY", nombre: "Dólar / Yen", precio: 148.75, cambio: "0.4" },
+        { simbolo: "GBP/USD", nombre: "Libra / Dólar", precio: 1.235, cambio: "0.1" },
+        { simbolo: "USD/CAD", nombre: "Dólar / Dólar Canadiense", precio: 1.355, cambio: "-0.3" },
+        { simbolo: "AUD/USD", nombre: "Dólar Australiano / Dólar", precio: 0.658, cambio: "0.2" },
+      ],
+    };
+    await new Promise((r) => setTimeout(r, 500)); // simular delay
+    setActivos(mockData[cat]); // ✅ pasar solo el array de la categoría
+  } catch (err) {
+    setError("Error al cargar datos");
+  } finally {
+    setLoading(false);
+  }
+};
+
+// Historicos simulados para cada sección y símbolo
+const mockHistoricalData: Record<string, HistoricalData[]> = {
+  AAPL: [
+    { date: "2023-09-01", price: 170 },
+    { date: "2023-09-02", price: 172 },
+    { date: "2023-09-03", price: 175 },
+    { date: "2023-09-04", price: 180 },
+    { date: "2023-09-05", price: 178 },
+  ],
+  MSFT: [
+    { date: "2023-09-01", price: 300 },
+    { date: "2023-09-02", price: 310 },
+    { date: "2023-09-03", price: 305 },
+    { date: "2023-09-04", price: 315 },
+    { date: "2023-09-05", price: 320 },
+  ],
+  SPY: [
+    { date: "2023-09-01", price: 450 },
+    { date: "2023-09-02", price: 452 },
+    { date: "2023-09-03", price: 448 },
+    { date: "2023-09-04", price: 455 },
+    { date: "2023-09-05", price: 460 },
+  ],
+  EURUSD: [
+    { date: "2023-09-01", price: 1.08 },
+    { date: "2023-09-02", price: 1.10 },
+    { date: "2023-09-03", price: 1.12 },
+    { date: "2023-09-04", price: 1.11 },
+    { date: "2023-09-05", price: 1.13 },
+  ],
+  BTC: [
+    { date: "2023-09-01", price: 25000 },
+    { date: "2023-09-02", price: 25500 },
+    { date: "2023-09-03", price: 26000 },
+    { date: "2023-09-04", price: 25800 },
+    { date: "2023-09-05", price: 26500 },
+  ],
+  GOLD: [
+    { date: "2023-09-01", price: 1900 },
+    { date: "2023-09-02", price: 1920 },
+    { date: "2023-09-03", price: 1915 },
+    { date: "2023-09-04", price: 1930 },
+    { date: "2023-09-05", price: 1940 },
+  ],
+  TSLA: [
+    { date: "2023-09-01", price: 250 },
+    { date: "2023-09-02", price: 255 },
+    { date: "2023-09-03", price: 260 },
+    { date: "2023-09-04", price: 258 },
+    { date: "2023-09-05", price: 265 },
+  ],
+  AMZN: [
+    { date: "2023-09-01", price: 135 },
+    { date: "2023-09-02", price: 138 },
+    { date: "2023-09-03", price: 137 },
+    { date: "2023-09-04", price: 140 },
+    { date: "2023-09-05", price: 142 },
+  ],
+  GOOGL: [
+    { date: "2023-09-01", price: 125 },
+    { date: "2023-09-02", price: 127 },
+    { date: "2023-09-03", price: 126 },
+    { date: "2023-09-04", price: 129 },
+    { date: "2023-09-05", price: 131 },
+  ],
+  QQQ: [
+    { date: "2023-09-01", price: 370 },
+    { date: "2023-09-02", price: 375 },
+    { date: "2023-09-03", price: 373 },
+    { date: "2023-09-04", price: 378 },
+    { date: "2023-09-05", price: 382 },
+  ],
+  IVV: [
+    { date: "2023-09-01", price: 440 },
+    { date: "2023-09-02", price: 443 },
+    { date: "2023-09-03", price: 441 },
+    { date: "2023-09-04", price: 446 },
+    { date: "2023-09-05", price: 450 },
+  ],
+  ARKK: [
+    { date: "2023-09-01", price: 40 },
+    { date: "2023-09-02", price: 41 },
+    { date: "2023-09-03", price: 39 },
+    { date: "2023-09-04", price: 42 },
+    { date: "2023-09-05", price: 43 },
+  ],
+};
+
+// Función que carga histórico según el símbolo
+const fetchHistoricalData = async (symbol: string) => {
+  setLoadingChart(true);
+  setError("");
+  try {
+    const history = mockHistoricalData[symbol] || [];
+    await new Promise((r) => setTimeout(r, 1500)); // simula delay
+    setHistoricalData(history);
+  } catch (err) {
+    setError("Error cargando histórico local");
+  } finally {
+    setLoadingChart(false);
+  }
+};
+
+
+  // Cuando cambie categoría → recargar lista
+  useEffect(() => {
+    fetchData(categoria);
+  }, [categoria]);
+
+  // Cuando el usuario haga click en un símbolo
+  useEffect(() => {
+    if (selectedSymbol) {
+      fetchHistoricalData(selectedSymbol);
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+    }
+  }, [selectedSymbol]);
+
+  return (
+    <div className="financial-market">
+      <h1>Mercado Financiero</h1>
+
+      {/* Selector de categorías */}
+      <div className="category-selector">
+        <button
+          onClick={() => setCategoria("acciones")}
+          className={categoria === "acciones" ? "tab active" : "tab"}
+        >
+          Acciones
+        </button>
+        <button
+          onClick={() => setCategoria("etfs")}
+          className={categoria === "etfs" ? "tab active" : "tab"}
+        >
+          ETFs
+        </button>
+        <button
+          onClick={() => setCategoria("divisas")}
+          className={categoria === "divisas" ? "tab active" : "tab"}
+        >
+          Divisas
+        </button>
+      </div>
+
+      {/* Tabla de activos */}
+      <div className="table-container">
+        <div className="table-wrapper">
+          {loading && <p>Cargando datos...</p>}
+          {error && <p className="error">{error}</p>}
+          {!loading && !error && (
+            <table className="custom-table">
+              <thead>
+                <tr>
+                  <th>Símbolo</th>
+                  <th>Nombre</th>
+                  <th>Precio</th>
+                  <th>Cambio</th>
+                </tr>
+              </thead>
+              <tbody>
+                {activos.map((item, index) => (
+                  <tr
+                    key={index}
+                    onClick={() => setSelectedSymbol(item.simbolo)}
+                    className={selectedSymbol === item.simbolo ? "selected" : ""}
+                  >
+                    <td>{item.simbolo}</td>
+                    <td>{item.nombre}</td>
+                    <td>{item.precio}</td>
+                    <td className={Number(item.cambio) < 0 ? "negativo" : "positivo"}>
+                      {item.cambio}
+                    </td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          )}
+        </div>
+      </div>
+
+      {/* Gráfico histórico */}
+      {selectedSymbol && (
+        <div className="chart-container">
+          <h2>
+            Evolución de {selectedSymbol}
+          </h2>
+          {loadingChart ? (
+            <p>Cargando gráfico...</p>
+          ) : historicalData.length > 0 ? (
+            <ResponsiveContainer width="100%" height={250}>
+              <LineChart data={historicalData}>
+                <CartesianGrid strokeDasharray="3 3" />
+                <XAxis dataKey="date" />
+                <YAxis domain={["auto", "auto"]} />
+                <Tooltip />
+                <Line
+                  type="monotone"
+                  dataKey="price"
+                  stroke="#004080"
+                  strokeWidth={2}
+                />
+              </LineChart>
+            </ResponsiveContainer>
+          ) : (
+            <p>No hay datos históricos</p>
+          )}
+        </div>
+)}
+    </div>
+  );
+};
+
+export default MercadoFinanciero;
+
+
+
+/*
+  const MercadoFinanciero: React.FC = () => {
+  const [activos, setActivos] = useState<Activo[]>([]);
+  const [historicalData, setHistoricalData] = useState<HistoricalData[]>([]);
+  const [selectedSymbol, setSelectedSymbol] = useState<string | null>(null);
+  const [loading, setLoading] = useState(false);
+
+  // Cargar lista de activos al inicio
+  useEffect(() => {
+    const loadData = async () => {
+      try {
+        const data = await fetchActivos();
+        setActivos(data);
+      } catch (error) {
+        console.error("Error cargando activos:", error);
+      }
+    };
+    loadData();
+  }, []);
+
+  // Cargar histórico cuando seleccionamos un símbolo
+  const handleSelectSymbol = async (symbol: string) => {
+    setLoading(true);
+    setSelectedSymbol(symbol);
+    try {
+      const history = await fetchHistoricalData(symbol);
+      setHistoricalData(history);
+    } catch (error) {
+      console.error("Error cargando histórico:", error);
+    } finally {
+      setLoading(false);
+    }
+  };
+*/