diff --git a/src/App.tsx b/src/App.tsx
index aa70508..4607673 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,29 +1,11 @@
 import './App.css'
-import { useEffect, useState } from "react";
-import type { Product } from './types';
-import { ProductCards } from './pages'
+import Catalog from './pages/catalog/Catalog'
 
 
 function App() {
-
-  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();
-  }, []);
-
   return (
     <>
-      <ProductCards products={ products }/>
+      <Catalog/>
     </>
   )
 }
diff --git a/src/pages/catalog/Catalog.tsx b/src/pages/catalog/Catalog.tsx
new file mode 100644
index 0000000..c9bb84c
--- /dev/null
+++ b/src/pages/catalog/Catalog.tsx
@@ -0,0 +1,30 @@
+import { ProductCards } from "./components";
+import { useEffect, useState } from "react";
+import type { Product } from "../../types";
+
+
+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();
+  }, []);
+
+
+  return (
+    <>
+      <ProductCards products={products}/>
+    </>
+  )
+}
+
+export default Catalog;
diff --git a/src/pages/catalog/components/index.ts b/src/pages/catalog/components/index.ts
index 45b499f..11e1c05 100644
--- a/src/pages/catalog/components/index.ts
+++ b/src/pages/catalog/components/index.ts
@@ -1,2 +1,3 @@
 export * from './card/';
+export * from './product_cards/';
 export * from './index';
diff --git a/src/pages/catalog/ProductCards.tsx b/src/pages/catalog/components/product_cards/ProductCards.tsx
similarity index 83%
rename from src/pages/catalog/ProductCards.tsx
rename to src/pages/catalog/components/product_cards/ProductCards.tsx
index 02332e3..775a1db 100644
--- a/src/pages/catalog/ProductCards.tsx
+++ b/src/pages/catalog/components/product_cards/ProductCards.tsx
@@ -1,5 +1,5 @@
-import { Card } from "./components";
-import type { Product } from '../../types.ts'
+import Card from '../card/card.tsx';
+import type { Product } from '../../../../types.ts'
 
 type ProductCardProps = {
   products: Product[];
diff --git a/src/pages/catalog/components/product_cards/index.ts b/src/pages/catalog/components/product_cards/index.ts
new file mode 100644
index 0000000..cbac062
--- /dev/null
+++ b/src/pages/catalog/components/product_cards/index.ts
@@ -0,0 +1 @@
+export { default as ProductCards } from './ProductCards.tsx';
diff --git a/src/pages/catalog/index.ts b/src/pages/catalog/index.ts
index 28c53a3..fad6507 100644
--- a/src/pages/catalog/index.ts
+++ b/src/pages/catalog/index.ts
@@ -1 +1 @@
-export { default as ProductCards} from './ProductCards.tsx';
+export * from './Catalog.tsx';