diff --git a/src/App.js b/src/App.js
index 2c5ba7e..1e5b88b 100644
--- a/src/App.js
+++ b/src/App.js
@@ -16,9 +16,10 @@ function App() {
     <div className="App">
       <BrowserRouter>
         <Routes>
-          <Route exact path='/' element={<Pokemon state={state} dispatch={dispatch} />} />
-          <Route exact path='/details' element={<Details state={state} dispatch={dispatch} />} />
-          <Route exact path='/favorites' element={<Favorites state={state} dispatch={dispatch} />} />
+          <Route exact path='/' element={<Pokemon favs={state.favIds} actionName={'setMainPage'} data={state.data} page={state.mainPage.page} dispatch={dispatch} />} />
+          {/* <Route exact path='/details' element={<Details state={state} dispatch={dispatch} />} /> */}
+          <Route exact path='/favorites' element={<Pokemon favs={state.favIds} actionName={'setFavPage'} data={state.favs} page={state.favPage.page} dispatch={dispatch} />} />
+          {/* <Route exact path='/favorites' element={<Favorites state={state} dispatch={dispatch} />} /> */}
         </Routes>
       </BrowserRouter>
     </div>
diff --git a/src/components/pages/pokemon.jsx b/src/components/pages/pokemon.jsx
index 0c7a1c5..f317fcf 100644
--- a/src/components/pages/pokemon.jsx
+++ b/src/components/pages/pokemon.jsx
@@ -4,7 +4,11 @@ import ResponsiveAppBar from "../navbar"
 import PaginationControlled from "../pagination"
 import Pokelist from "../pokelist"
 
-function Pokemon({state, dispatch}) {
+function Pokemon({favs, actionName, data, page, dispatch}) {
+
+  const pokeCount = 898
+  const pageSize = 20;
+  const pageCount = Math.round(data.length / pageSize)
 
     const bodyRepo = {
         "query": `
@@ -34,8 +38,7 @@ function Pokemon({state, dispatch}) {
             try {
                 const response = await axios({ method: "post", url: baseUrl, data: JSON.stringify(bodyRepo), headers: headers });
                 const fulldata = response.data.data.pokemon_v2_pokemon;
-                const data = fulldata.slice(0, 898);
-
+                const data = fulldata.slice(0, pokeCount);
                 dispatch({ type: 'getData', data: data });
             } catch (error) {
                 console.error(error);
@@ -48,9 +51,9 @@ function Pokemon({state, dispatch}) {
     return (
         <>
         <ResponsiveAppBar/>
-      <PaginationControlled state={state} dispatch={dispatch} />
-      <Pokelist state={state} data={state.currentData} dispatch={dispatch}/>
-      <PaginationControlled state={state} dispatch={dispatch} />
+      <PaginationControlled actionName={actionName} count={pageCount} page={page} page_size ={20} data={data} dispatch={dispatch} />
+      <Pokelist favs={favs} pageSize={pageSize} data={data} page={page} dispatch={dispatch}/>
+      <PaginationControlled actionName={actionName} count={pageCount} page={page} page_size ={20} data={data} dispatch={dispatch} />
       </>
         )
 }
diff --git a/src/components/pagination.jsx b/src/components/pagination.jsx
index 1bff798..4c8974b 100644
--- a/src/components/pagination.jsx
+++ b/src/components/pagination.jsx
@@ -3,16 +3,17 @@ import Typography from '@mui/material/Typography';
 import Pagination from '@mui/material/Pagination';
 import Stack from '@mui/material/Stack';
 
-export default function PaginationControlled({state, dispatch}) {
+export default function PaginationControlled({actionName, page, count, dispatch}) {
   const handleChange = (event, value) => {
-    dispatch({type: 'setPage', page: value});
+    dispatch({type: actionName, page: value});
   };
 
   return (
       <div style={{width: '100vw', display: 'flex', alignItems: 'center', justifyContent: 'center'}}>
     <Stack spacing={2} sx={{alignSelf: 'center'}}>
       {/* <Typography>Page: {state && state.page}</Typography> */}
-      <Pagination count={45}  color="primary" page={state && state.page}  onChange={handleChange} />
+      {/* <Pagination count={Math.round(data.length / page_size)}  color="primary" page={page}  onChange={handleChange} /> */}
+        <Pagination count={count}  color="primary" page={page}  onChange={handleChange} />
     </Stack>
     </div>
   );
diff --git a/src/components/pokelist.jsx b/src/components/pokelist.jsx
index 6960e79..69c37b5 100644
--- a/src/components/pokelist.jsx
+++ b/src/components/pokelist.jsx
@@ -8,14 +8,16 @@ import Typography from '@mui/material/Typography';
 import StarBorderSharpIcon from '@mui/icons-material/StarBorderSharp';
 import StarIcon from '@mui/icons-material/Star';
 
-function Pokelist({ state, data,  dispatch }) {
+function Pokelist({ favs, data, page, pageSize, dispatch }) {
+
+    const pageData = data.slice((page-1)*pageSize, page*pageSize)
 
     function upperFirstLetter(str) {
         return str.charAt(0).toUpperCase() + str.slice(1);
     }
     return (
         <div style={{ width: '100vw', display: 'flex', flexDirection: 'row', flexFlow: 'row wrap', justifyContent: 'center' }}>
-            {data && data.map((pokemon, i) => {
+            {pageData && pageData.map((pokemon, i) => {
                 return (
                     <Card key={pokemon.id} sx={{ maxWidth: 600, margin: '5px' }}>
                         <CardMedia
@@ -34,11 +36,10 @@ function Pokelist({ state, data,  dispatch }) {
                         </CardContent>
                         <CardActions>
                             {(() => {
-                                if (state.data[pokemon.id] == state.favs[pokemon.id]) {
-                                    return <StarIcon onClick={(e) => dispatch({ type: 'favs', value: pokemon.id })} />
+                                if (favs.includes(pokemon.id)) {
+                                    return <StarIcon onClick={(e) => dispatch({ type: 'setFav', value: pokemon.id })} />
                                 } else {
-                                    console.log(pokemon.id)
-                                    return <StarBorderSharpIcon onClick={(e) => dispatch({ type: 'favs', value: pokemon.id })} />
+                                    return <StarBorderSharpIcon onClick={(e) => dispatch({ type: 'setFav', value: pokemon.id })} />
                                 }
                             })()}
                             <Button size="small">Detalles</Button>
diff --git a/src/hooks/reducer.js b/src/hooks/reducer.js
index 929b524..d5e4703 100644
--- a/src/hooks/reducer.js
+++ b/src/hooks/reducer.js
@@ -1,16 +1,17 @@
 export const initialState = {
     data: [],
-    currentData: [],
-    page: 1,
-    favs:[],
-    // pokeFavs: [],
-}
-
-const filterFav = (e) => {
-    if (!e===false){
-        return true
-    } else{
-        return false
+    favs: [],
+    favIds: [],
+    mainPage: {
+        currentData:[],
+        page: 1,
+    },
+    favPage: {
+        currentData:[],
+        page: 1,
+    },
+    detailPage: {
+        currentPoke:[],
     }
 }
 
@@ -21,57 +22,78 @@ function arrayRemove(arr, value) {
     });
 }
 
-/* function get_cached_item(key){
-    let item = []
-    try{
-        item = JSON.parse(localStorage.getItem(key))
-    }catch(error){
-        item = JSON.parse(localStorage.removeItem(key))
-        item = []
-    }
-    return item
-}
- */
 const pageSize = 20;
 export const reducer = (state, action) => {
     switch (action.type) {
         case 'getData':
             const data = action.data;
-            const dummyFavs = Array(data.length).fill(false);
-            return {...state, data: data, currentData: data.slice(0, 20), favs: dummyFavs}
-        case 'setPage':
-            const page = action.page;
-            const currentIndex =  (page*pageSize)-20;
-            const pokeData = JSON.parse(JSON.stringify(state.data));
-            const currentData = pokeData.slice(currentIndex, currentIndex + 20);
-            return {...state, page: page, currentData: currentData}  
-        case 'favs':
+            return {...state, data: data}
+        case 'setMainPage':
+            return {...state, mainPage: {...state.mainPage, page: action.page}}  
+        case 'setFavPage':
+            return {...state, favPage: {...state.favPage, page: action.page}} 
+        case 'setFav':
             const id = action.value;
-            const index = id - 1
-            const currentFavs = JSON.parse(JSON.stringify(state.favs));
-            const currentPokeEntry =  JSON.parse(JSON.stringify(state.data[index]));
-            currentFavs[index] = currentPokeEntry;
-            console.log(currentFavs.filter(filterFav))
-            return {...state, favs: currentFavs}
-            // const id = action.value;
-            // let currentFavs = JSON.parse(JSON.stringify(state.favs));
-            // const currentPokefavs = JSON.parse(JSON.stringify(state.pokeFavs));
-
-            // if (currentFavs.includes(id)) {
-            //     currentFavs = arrayRemove(currentFavs, id);
-            // } else {
-            //     currentFavs.push(id);
-            // }
-            // let newPokefavs= [];
-            // currentPokefavs.forEach(element => {
-            //     if (currentFavs.includes(element.id)) {
-            //         newPokefavs.push(element);
-            //     }
-            // });
-            // console.log('favs', currentFavs)
-            // console.log('pokefavs', newPokefavs)
-            // return {...state, favs: currentFavs, pokeFavs: newPokefavs}
+            const index = id - 1;
+            let currentFavIds = JSON.parse(JSON.stringify(state.favIds));
+            const currentPokeEntry =  JSON.parse(JSON.stringify(state.data));
+            if (currentFavIds.includes(id)) {
+                currentFavIds = arrayRemove(currentFavIds, id);
+            } else {
+                currentFavIds.push(id);
+            }
+            let newFavs = [];
+            currentPokeEntry.forEach(element => {
+                if (currentFavIds.includes(element.id)) {
+                    newFavs.push(element);
+                }
+            });
+            return {...state, favs: newFavs, favIds: currentFavIds}
         default:
            return {...state}
     }
-}
\ No newline at end of file
+}
+
+// const pageSize = 20;
+// export const reducer = (state, action) => {
+//     switch (action.type) {
+//         case 'getData':
+//             const data = action.data;
+//             const dummyFavs = Array(data.length).fill(false);
+//             return {...state, data: data, currentData: data.slice(0, 20), favs: dummyFavs}
+//         case 'setPage':
+//             const page = action.page;
+//             const currentIndex =  (page*pageSize)-20;
+//             const pokeData = JSON.parse(JSON.stringify(state.data));
+//             const currentData = pokeData.slice(currentIndex, currentIndex + 20);
+//             return {...state, page: page, currentData: currentData}  
+//         case 'favs':
+//             const id = action.value;
+//             const index = id - 1
+//             const currentFavs = JSON.parse(JSON.stringify(state.favs));
+//             const currentPokeEntry =  JSON.parse(JSON.stringify(state.data[index]));
+//             currentFavs[index] = currentPokeEntry;
+//             console.log(currentFavs.filter(filterFav))
+//             return {...state, favs: currentFavs}
+//             // const id = action.value;
+//             // let currentFavs = JSON.parse(JSON.stringify(state.favs));
+//             // const currentPokefavs = JSON.parse(JSON.stringify(state.pokeFavs));
+
+//             // if (currentFavs.includes(id)) {
+//             //     currentFavs = arrayRemove(currentFavs, id);
+//             // } else {
+//             //     currentFavs.push(id);
+//             // }
+//             // let newPokefavs= [];
+//             // currentPokefavs.forEach(element => {
+//             //     if (currentFavs.includes(element.id)) {
+//             //         newPokefavs.push(element);
+//             //     }
+//             // });
+//             // console.log('favs', currentFavs)
+//             // console.log('pokefavs', newPokefavs)
+//             // return {...state, favs: currentFavs, pokeFavs: newPokefavs}
+//         default:
+//            return {...state}
+//     }
+// }
\ No newline at end of file