diff --git a/src/App.tsx b/src/App.tsx
index d2760b4..5195b04 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,9 +1,10 @@
 import './App.css'
-
+import { Catalog } from './pages'
 function App() {
 
   return (
     <>
+      <Catalog/>
     </>
   )
 }
diff --git a/src/pages/catalog/catalog.tsx b/src/pages/catalog/catalog.tsx
new file mode 100644
index 0000000..6b1046d
--- /dev/null
+++ b/src/pages/catalog/catalog.tsx
@@ -0,0 +1,47 @@
+import { useEffect, useState } from "react";
+import { Card } from "./components";
+
+type Product = {
+  id: number;
+  name : string;
+  price: number;
+  description: string;
+  image: string;
+};
+
+const Catalog = () => {
+
+  const [products, setProducts] = useState<Product[]>([]);
+
+  useEffect(() => {
+    async function fetchProducts(){
+      try{
+        const response = await fetch("http://localhost:8010/api/v1/products");
+        const data = await response.json();
+        setProducts(data);
+      }catch(error){
+        console.error(`Este es el error: ${error}`);
+      };
+    };
+    fetchProducts();
+  }, []);
+
+  console.log(products);
+  return (
+    <>
+      { products.map((product) => {
+        return (
+          <Card
+            image={product.image}
+            name={product.name}
+            price={product.price}
+            description={ product.description}
+            cardId={product.id}
+          />
+        )
+      }) }
+    </>
+  )
+}
+
+export default Catalog;
diff --git a/src/pages/catalog/components/card/card.tsx b/src/pages/catalog/components/card/card.tsx
new file mode 100644
index 0000000..cb11777
--- /dev/null
+++ b/src/pages/catalog/components/card/card.tsx
@@ -0,0 +1,31 @@
+type CardProps = {
+  image: string;
+  name: string;
+  price: number;
+  description: string;
+  cardId: number
+}
+
+
+const Card = ({ image, name, price, description, cardId } : CardProps) => {
+  return (
+    <div key={cardId}>
+        <div>
+          <img src={`${image}`} alt="Imagen"/>
+        </div>
+
+        <div>
+          <p>{name}</p>
+          <p>{price}</p>
+          <p>{description}</p>
+        </div>
+
+        <div>
+          <button>Conocer Origen</button>
+          <button>Agregar</button>
+        </div>
+      </div>
+  )
+}
+
+export default Card;
diff --git a/src/pages/catalog/components/card/index.ts b/src/pages/catalog/components/card/index.ts
new file mode 100644
index 0000000..66c5d65
--- /dev/null
+++ b/src/pages/catalog/components/card/index.ts
@@ -0,0 +1 @@
+export { default as Card } from './card.tsx';
diff --git a/src/pages/catalog/components/index.ts b/src/pages/catalog/components/index.ts
new file mode 100644
index 0000000..45b499f
--- /dev/null
+++ b/src/pages/catalog/components/index.ts
@@ -0,0 +1,2 @@
+export * from './card/';
+export * from './index';
diff --git a/src/pages/catalog/index.ts b/src/pages/catalog/index.ts
new file mode 100644
index 0000000..b11f23d
--- /dev/null
+++ b/src/pages/catalog/index.ts
@@ -0,0 +1 @@
+export { default as Catalog} from './catalog.tsx';
diff --git a/src/pages/index.ts b/src/pages/index.ts
new file mode 100644
index 0000000..cc98181
--- /dev/null
+++ b/src/pages/index.ts
@@ -0,0 +1 @@
+export * from './catalog/';