diff --git a/package-lock.json b/package-lock.json
index 993b456..5c53e74 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -12099,11 +12099,11 @@
       "integrity": "sha512-X8jZHc7nCMjaCqoU+V2I0cOhNW+QMBwSUkeXnTi8IPe6zaRWfn60ZzvFDZqWPfmSJfjub7dDW1SP0jaHWLu/hg=="
     },
     "react-router": {
-      "version": "5.2.0",
-      "resolved": "https://registry.npmjs.org/react-router/-/react-router-5.2.0.tgz",
-      "integrity": "sha512-smz1DUuFHRKdcJC0jobGo8cVbhO3x50tCL4icacOlcwDOEQPq4TMqwx3sY1TP+DvtTgz4nm3thuo7A+BK2U0Dw==",
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-5.2.1.tgz",
+      "integrity": "sha512-lIboRiOtDLFdg1VTemMwud9vRVuOCZmUIT/7lUoZiSpPODiiH1UQlfXy+vPLC/7IWdFYnhRwAyNqA/+I7wnvKQ==",
       "requires": {
-        "@babel/runtime": "^7.1.2",
+        "@babel/runtime": "^7.12.13",
         "history": "^4.9.0",
         "hoist-non-react-statics": "^3.1.0",
         "loose-envify": "^1.3.1",
@@ -12136,15 +12136,15 @@
       }
     },
     "react-router-dom": {
-      "version": "5.2.0",
-      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-5.2.0.tgz",
-      "integrity": "sha512-gxAmfylo2QUjcwxI63RhQ5G85Qqt4voZpUXSEqCwykV0baaOTQDR1f0PmY8AELqIyVc0NEZUj0Gov5lNGcXgsA==",
+      "version": "5.3.0",
+      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-5.3.0.tgz",
+      "integrity": "sha512-ObVBLjUZsphUUMVycibxgMdh5jJ1e3o+KpAZBVeHcNQZ4W+uUGGWsokurzlF4YOldQYRQL4y6yFRWM4m3svmuQ==",
       "requires": {
-        "@babel/runtime": "^7.1.2",
+        "@babel/runtime": "^7.12.13",
         "history": "^4.9.0",
         "loose-envify": "^1.3.1",
         "prop-types": "^15.6.2",
-        "react-router": "5.2.0",
+        "react-router": "5.2.1",
         "tiny-invariant": "^1.0.2",
         "tiny-warning": "^1.0.0"
       }
diff --git a/package.json b/package.json
index a154f9e..c16ceb8 100644
--- a/package.json
+++ b/package.json
@@ -18,7 +18,7 @@
     "prop-types": "^15.7.2",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
-    "react-router-dom": "^5.2.0",
+    "react-router-dom": "^5.3.0",
     "react-scripts": "4.0.3",
     "sass": "^1.32.11",
     "web-vitals": "^1.0.1"
diff --git a/src/App.js b/src/App.js
index 3a49c0e..268c45a 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,9 +1,26 @@
 import React from "react";
+import {
+  BrowserRouter as Router,
+  Switch,
+  Route
+} from "react-router-dom";
+import Character from "./pages/Character/Character";
+import Episode from "./pages/Episode/Episode";
+import Location from "./pages/Location/Location";
 
 import Home from "./pages/Home";
 
 function App() {
-  return <Home />;
+  return (
+    <Router>
+      <Switch>
+        <Route path="/location/:locationId" component = {Location} />
+        <Route path="/character/:characterId" component = {Character}/>
+        <Route path="/episode/:episodeId" component = {Episode}/>
+        <Route exact path="/" component = {Home}/>
+      </Switch>
+    </Router>
+  )
 }
 
 export default App;
diff --git a/src/components/CharacterCard/CharacterCard.js b/src/components/CharacterCard/CharacterCard.js
index 9e7e4ab..5e40180 100644
--- a/src/components/CharacterCard/CharacterCard.js
+++ b/src/components/CharacterCard/CharacterCard.js
@@ -1,3 +1,4 @@
+/* eslint-disable no-console */
 import React from "react";
 import { Link } from "react-router-dom";
 
@@ -5,17 +6,30 @@ import "./CharacterCard.scss";
 
 import * as routes from "../../constants/routes";
 
-function CharacterCard({ id, name, image, species, status, origin, location }) {
+function CharacterCard({
+  characterId,
+  name,
+  image,
+  species,
+  status,
+  origin,
+  location,
+}) {
+  console.log(location);
+  let locationId = location.split("/");
+  locationId = locationId[locationId.length -1];
+  console.log(locationId);
+
   return (
     <div className="col col-12 col-sm-6 col-xl-3 CharacterCard">
       <img className="CharacterCard__img" src={image} alt="" />
-      <Link to={`${routes.CHARACTER}/${id}`}>
+      <Link to={`${routes.CHARACTER}/${characterId}`}>
         <h3 className="CharacterCard__name h4">{name}</h3>
       </Link>
       <div className="CharacterCard__meta">
         <Link
           className="CharacterCard__meta-item"
-          to={`${routes.LOCATION}/${id}`}
+          to={`${routes.LOCATION}/${locationId}`} // locationId
         >
           {origin.name}
         </Link>
diff --git a/src/components/EpisodeCard/EpisodeCard.js b/src/components/EpisodeCard/EpisodeCard.js
index 13cb5cf..02e466e 100644
--- a/src/components/EpisodeCard/EpisodeCard.js
+++ b/src/components/EpisodeCard/EpisodeCard.js
@@ -1,4 +1,4 @@
-import React from "react";
+import React, {} from "react";
 import { Link } from "react-router-dom";
 
 import "./EpisodeCard.scss";
@@ -6,6 +6,8 @@ import "./EpisodeCard.scss";
 import * as routes from "../../constants/routes";
 
 function EpisodeCard({ id, name, airDate, episode }) {
+
+
   return (
     <div className="col col-12 col-sm-6 col-xl-4 EpisodeCard">
       <Link to={`${routes.EPISODE}/${id}`}>
diff --git a/src/components/Footer/Footer.js b/src/components/Footer/Footer.js
index 8ed7b26..3cdfe28 100644
--- a/src/components/Footer/Footer.js
+++ b/src/components/Footer/Footer.js
@@ -8,6 +8,7 @@ function Footer() {
           <p className="m-0">
             Assembler School &copy; {new Date().getFullYear()}
           </p>
+          
         </div>
       </div>
     </footer>
diff --git a/src/components/Layout/Layout.js b/src/components/Layout/Layout.js
index a8bdcd3..2aa0690 100644
--- a/src/components/Layout/Layout.js
+++ b/src/components/Layout/Layout.js
@@ -9,6 +9,7 @@ function Layout({ children }) {
     <>
       <AppHeader />
       <Main>{children}</Main>
+      
       <Footer />
     </>
   );
diff --git a/src/components/Main/Main.js b/src/components/Main/Main.js
index 43bb386..a899184 100644
--- a/src/components/Main/Main.js
+++ b/src/components/Main/Main.js
@@ -4,6 +4,7 @@ function Main({ children, ...props }) {
   return (
     <main className="container" {...props}>
       {children}
+      
     </main>
   );
 }
diff --git a/src/pages/Character/Character.js b/src/pages/Character/Character.js
new file mode 100644
index 0000000..9361ecf
--- /dev/null
+++ b/src/pages/Character/Character.js
@@ -0,0 +1,106 @@
+/* eslint-disable react/destructuring-assignment */
+/* eslint-disable no-console */
+/* eslint-disable react/no-unused-state */
+/* eslint-disable react/prefer-stateless-function */
+import React, { Component } from "react";
+import axios from "axios";
+import CharacterCard from "../../components/CharacterCard";
+import EpisodeCard from "../../components/EpisodeCard";
+
+export default class Character extends Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      character: "",
+      episodeList: [],
+      id: "",
+      name: "",
+      image: "",
+      species: "",
+      status: "",
+      origin: "",
+      location: "",
+    };
+  }
+
+  async componentDidMount() {
+    await this.loadCharacter();
+    await this.loadEpisodeCharacter();
+  }
+
+  async loadCharacter() {
+    console.log(this);
+    const characterId = this.props.match.params.characterId;
+    const URL_CHARACTER = `https://rickandmortyapi.com/api/character/${characterId}`;
+    const llamada = await axios.get(URL_CHARACTER);
+    // console.log(llamada.data.episode);
+    const arr = llamada.data.episode;
+    // console.log(arr);
+    const arr2 = await axios.all(arr.map((episode) => axios.get(episode)));
+    console.log(arr2);
+    this.setState({
+      episodeList: arr2,
+    });
+    // console.log(episodeList);
+  }
+
+  async loadEpisodeCharacter() {
+    console.log(this);
+    console.log(this.props.match.params.characterId);
+    const characterId = this.props.match.params.characterId;
+    const URL_CHARACTER = `https://rickandmortyapi.com/api/character/${characterId}`;
+    const llamada = await axios.get(URL_CHARACTER);
+    const arr = llamada.data;
+    console.log(arr);
+    this.setState({
+      character: arr,
+      id: arr.id,
+      name: arr.name,
+      image: arr.image,
+      species: arr.species,
+      status: arr.status,
+      origin: arr.origin,
+      location: arr.location.url,
+    });
+    console.log(arr.name);
+  }
+
+  render() {
+    const {
+      episodeList,
+      id,
+      name,
+      image,
+      species,
+      status,
+      origin,
+      location,
+    } = this.state;
+    return (
+      <div>
+        <CharacterCard
+          key={id}
+          id={id}
+          name={name}
+          image={image}
+          species={species}
+          status={status}
+          origin={origin}
+          location={location}
+        />
+        <div>
+          {episodeList.map((epi) => (
+            <EpisodeCard
+              key={epi.data.id}
+              id={epi.data.id}
+              name={epi.data.name}
+              airDate={epi.data.air_date}
+              episode={epi.data.episode}
+            />
+          ))}
+        </div>
+      </div>
+    );
+  }
+}
diff --git a/src/pages/Character/index.js b/src/pages/Character/index.js
new file mode 100644
index 0000000..ad79840
--- /dev/null
+++ b/src/pages/Character/index.js
@@ -0,0 +1 @@
+export {default} from './Character';
\ No newline at end of file
diff --git a/src/pages/Episode/Episode.js b/src/pages/Episode/Episode.js
index 8255df5..bdd7a6b 100644
--- a/src/pages/Episode/Episode.js
+++ b/src/pages/Episode/Episode.js
@@ -1,37 +1,59 @@
+/* eslint-disable react/destructuring-assignment */
+/* eslint-disable no-console */
+import axios from "axios";
 import React, { Component } from "react";
 
 import Layout from "../../components/Layout";
-// import CharacterCard from "../../components/CharacterCard";
+import CharacterCard from "../../components/CharacterCard";
 
 class Episode extends Component {
   constructor(props) {
     super(props);
 
-    this.state = {};
-    // episode: null,
-    // characters: [],
-    // hasLoaded: false,
-    // hasError: false,
-    // errorMessage: null,
+    this.state = {
+      // episode: null,
+      characters: [],
+      // hasLoaded: false,
+      // hasError: false,
+      // errorMessage: null,
+    };
+  }
+
+  async componentDidMount(){
+    await this.loadCharacters();
+  }
+
+  async loadCharacters(){
+    // console.log(this.props.match.params.episodeId);
+    const episodeId= this.props.match.params.episodeId;
+    const URL_EPISODE = `https://rickandmortyapi.com/api/episode/${episodeId}`
+    const llamada = await axios.get(URL_EPISODE);
+    const arr = llamada.data.characters;
+    const arr2 = await axios.all(arr.map((character) => axios.get(character)))
+    console.log(arr2);
+    this.setState({
+      characters: arr2
+    })
   }
 
   render() {
+    const { characters } = this.state;
     return (
       <Layout>
         <section className="row">
           <div className="col col-12">
-            {/* {characters.map((character) => (
+            {characters.map((character) => (
               <CharacterCard
-                key={character.id}
-                id={character.id}
-                name={character.name}
-                image={character.image}
-                species={character.species}
-                status={character.status}
-                origin={character.origin}
-                location={character.location}
+                key={character.data.id}
+                characterId={character.data.id}
+                name={character.data.name}
+                image={character.data.image}
+                species={character.data.species}
+                status={character.data.status}
+                origin={character.data.origin}
+                location={character.data.location.url}
               />
-            ))} */}
+            ))}
           </div>
         </section>
       </Layout>
diff --git a/src/pages/Home/Home.js b/src/pages/Home/Home.js
index f86e93c..20c6edf 100644
--- a/src/pages/Home/Home.js
+++ b/src/pages/Home/Home.js
@@ -1,42 +1,67 @@
+/* eslint-disable no-console */
 import React, { Component } from "react";
+import axios from "axios";
 
 import Layout from "../../components/Layout";
-// import EpisodeCard from "../../components/EpisodeCard";
+import EpisodeCard from "../../components/EpisodeCard";
+import * as routes from "../../constants/routes";
 
 class Home extends Component {
   constructor(props) {
     super(props);
 
-    this.state = {};
-    // page: 1,
-    // paginationInfo: null,
-    // episodes: [],
-    // hasLoaded: false,
-    // hasError: false,
-    // errorMessage: null,
+    this.state = {
+      page: 1,
+      paginationInfo: null,
+      episodes: [],
+      hasLoaded: false,
+      hasError: false,
+      errorMessage: null,
+    };
   }
 
   async componentDidMount() {
-    // this.loadEpisodes();
+    const { page } = this.state;
+    this.loadEpisodes(page);
   }
 
-  async loadEpisodes() {
-    console.log(this);
+  async componentDidUpdate(){
+    const { page, paginationInfo } = this.state;
+
+    if (page !== paginationInfo){
+      this.loadEpisodes(page);
+    }
+  }
+
+  async loadEpisodes(page) {
+    console.log(this.props);
+    const URL_API = `https://rickandmortyapi.com/api${routes.EPISODE}?page=${page}`;
+    axios
+      .get(URL_API)
+      .then((response) => {
+        const nextEpisode = response.data.results;
+        this.setState({episodes: nextEpisode, hasLoaded: true});
+      })
+      .catch((error) => {
+        this.state({hasError: true});
+        console.log(error);
+      })
   }
 
   render() {
+    const { episodes, hasLoaded, hasError} = this.state;
     return (
       <Layout>
         <section className="row">
-          {/* {hasLoaded && !hasError && (
+          {hasLoaded && !hasError && (
             <div className="col col-12">
               <h1>Episodes loaded!</h1>
             </div>
-          )} */}
+          )}
           <div className="col col-12">
             <hr />
           </div>
-          {/* {episodes.map((episode) => (
+          {episodes.map((episode) => (
               <EpisodeCard
                 key={episode.id}
                 id={episode.id}
@@ -44,7 +69,7 @@ class Home extends Component {
                 airDate={episode.air_date}
                 episode={episode.episode}
               />
-            ))} */}
+            ))}
           <div className="col col-12">
             <hr />
           </div>
diff --git a/src/pages/Location/Location.js b/src/pages/Location/Location.js
new file mode 100644
index 0000000..b2e0396
--- /dev/null
+++ b/src/pages/Location/Location.js
@@ -0,0 +1,84 @@
+/* eslint-disable react/destructuring-assignment */
+/* eslint-disable no-console */
+/* eslint-disable react/prefer-stateless-function */
+import React, { Component } from "react";
+import axios from "axios";
+import Layout from "../../components/Layout";
+import CharacterCard from "../../components/CharacterCard";
+
+export default class location extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      name: "",
+      type: "",
+      dimension: "",
+      residentList: [],
+    };
+  }
+
+  componentDidMount() {
+    this.loadLocations();
+  }
+
+  async loadLocations() {
+    console.log(this.props.match.params.locationId);
+    const locationId = this.props.match.params.locationId;
+    const URL_LOCATION = `https://rickandmortyapi.com/api/location/${locationId}`;
+    console.log(URL_LOCATION);
+    const llamada = await axios.get(URL_LOCATION);
+    console.log(llamada.data);
+    const resum = llamada.data;
+    this.setState({
+      name: resum.name,
+      type: resum.type,
+      dimension: resum.dimension,
+    });
+
+    // console.log(llamada.data.residents);
+    const locationsURL = llamada.data.residents;
+    const locationsCharacters = await axios.all(
+      locationsURL.map((locations) => axios.get(locations)),
+    );
+    // console.log(locationsCharacters.data);
+    this.setState({
+      residentList: locationsCharacters,
+    });
+  }
+
+  render() {
+    const { name, type, dimension, residentList } = this.state;
+    return (
+      <Layout>
+        <div>
+          <h1>Location</h1>
+          <h4>
+            <strong>Name:</strong> {name}
+          </h4>
+          <h4>
+            <strong>Type: </strong>
+            {type}
+          </h4>
+          <h4>
+            <strong>Dimension: </strong>
+            {dimension}
+          </h4>
+        </div>
+        <div>
+          {residentList.map((resident) => (
+            <CharacterCard
+              key={resident.data.id}
+              characterId={resident.data.id}
+              name={resident.data.name}
+              image={resident.data.image}
+              species={resident.data.species}
+              status={resident.data.status}
+              origin={resident.data.origin}
+              location={resident.data.location.url}
+            />
+          ))}
+        </div>
+      </Layout>
+    );
+  }
+}
diff --git a/src/pages/Location/index.js b/src/pages/Location/index.js
new file mode 100644
index 0000000..7625c87
--- /dev/null
+++ b/src/pages/Location/index.js
@@ -0,0 +1 @@
+export { default } from "./Location";