diff --git a/Rick And Morty.postman_collection.json b/Rick And Morty.postman_collection.json
new file mode 100644
index 0000000..6b296e2
--- /dev/null
+++ b/Rick And Morty.postman_collection.json	
@@ -0,0 +1,98 @@
+{
+	"info": {
+		"_postman_id": "d25a2ace-ba4f-43a4-80d3-7d16caddf291",
+		"name": "Rick And Morty",
+		"schema": "https://schema.getpostman.com/json/collection/v2.1.0/collection.json"
+	},
+	"item": [
+		{
+			"name": "Get Episodes",
+			"request": {
+				"method": "GET",
+				"header": [],
+				"url": {
+					"raw": "https://rickandmortyapi.com/api/episode?page=1",
+					"protocol": "https",
+					"host": [
+						"rickandmortyapi",
+						"com"
+					],
+					"path": [
+						"api",
+						"episode"
+					],
+					"query": [
+						{
+							"key": "page",
+							"value": "1"
+						}
+					]
+				}
+			},
+			"response": []
+		},
+		{
+			"name": "Get episode",
+			"request": {
+				"method": "GET",
+				"header": [],
+				"url": {
+					"raw": "https://rickandmortyapi.com/api/episode/1",
+					"protocol": "https",
+					"host": [
+						"rickandmortyapi",
+						"com"
+					],
+					"path": [
+						"api",
+						"episode",
+						"1"
+					]
+				}
+			},
+			"response": []
+		},
+		{
+			"name": "Get character",
+			"request": {
+				"method": "GET",
+				"header": [],
+				"url": {
+					"raw": "https://rickandmortyapi.com/api/character/1",
+					"protocol": "https",
+					"host": [
+						"rickandmortyapi",
+						"com"
+					],
+					"path": [
+						"api",
+						"character",
+						"1"
+					]
+				}
+			},
+			"response": []
+		},
+		{
+			"name": "Get location",
+			"request": {
+				"method": "GET",
+				"header": [],
+				"url": {
+					"raw": "https://rickandmortyapi.com/api/location/20",
+					"protocol": "https",
+					"host": [
+						"rickandmortyapi",
+						"com"
+					],
+					"path": [
+						"api",
+						"location",
+						"20"
+					]
+				}
+			},
+			"response": []
+		}
+	]
+}
\ No newline at end of file
diff --git a/package-lock.json b/package-lock.json
index 993b456..9be81d4 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -2097,6 +2097,15 @@
       "resolved": "https://registry.npmjs.org/@types/json5/-/json5-0.0.29.tgz",
       "integrity": "sha1-7ihweulOEdK4J7y+UnC86n8+ce4="
     },
+    "@types/mdast": {
+      "version": "3.0.10",
+      "resolved": "https://registry.npmjs.org/@types/mdast/-/mdast-3.0.10.tgz",
+      "integrity": "sha512-W864tg/Osz1+9f4lrGTZpCSO5/z4608eUp19tbozkq2HJK6i3z1kT0H9tlADXuYIb1YYOBByU4Jsqkk75q48qA==",
+      "dev": true,
+      "requires": {
+        "@types/unist": "*"
+      }
+    },
     "@types/minimatch": {
       "version": "3.0.3",
       "resolved": "https://registry.npmjs.org/@types/minimatch/-/minimatch-3.0.3.tgz",
@@ -2166,6 +2175,12 @@
         "source-map": "^0.6.1"
       }
     },
+    "@types/unist": {
+      "version": "2.0.6",
+      "resolved": "https://registry.npmjs.org/@types/unist/-/unist-2.0.6.tgz",
+      "integrity": "sha512-PBjIUxZHOuj0R15/xuwJYjFi+KZdNFrehocChv4g5hu6aFroHue8m0lBP0POdK2nKzbw0cgV1mws8+V/JAcEkQ==",
+      "dev": true
+    },
     "@types/webpack": {
       "version": "4.41.26",
       "resolved": "https://registry.npmjs.org/@types/webpack/-/webpack-4.41.26.tgz",
@@ -3292,12 +3307,6 @@
       "resolved": "https://registry.npmjs.org/babylon/-/babylon-6.18.0.tgz",
       "integrity": "sha512-q/UEjfGJ2Cm3oKV71DJz9d25TPnq5rhBVL2Q4fA5wcC3jcrdn7+SssEybFIxwAvvP+YCsCYNKughoF33GxgycQ=="
     },
-    "bail": {
-      "version": "1.0.5",
-      "resolved": "https://registry.npmjs.org/bail/-/bail-1.0.5.tgz",
-      "integrity": "sha512-xFbRxM1tahm08yHBP16MMjVUAvDaBMD38zsM9EMAUN61omwLmKlOpB/Zku5QkjZ8TZ4vn53pj+t518cH0S03RQ==",
-      "dev": true
-    },
     "balanced-match": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.0.tgz",
@@ -3578,15 +3587,32 @@
       }
     },
     "browserslist": {
-      "version": "4.16.3",
-      "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.16.3.tgz",
-      "integrity": "sha512-vIyhWmIkULaq04Gt93txdh+j02yX/JzlyhLYbV3YQCn/zvES3JnY7TifHHvvr1w5hTDluNKMkV05cs4vy8Q7sw==",
+      "version": "4.17.2",
+      "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.17.2.tgz",
+      "integrity": "sha512-jSDZyqJmkKMEMi7SZAgX5UltFdR5NAO43vY0AwTpu4X3sGH7GLLQ83KiUomgrnvZRCeW0yPPnKqnxPqQOER9zQ==",
       "requires": {
-        "caniuse-lite": "^1.0.30001181",
-        "colorette": "^1.2.1",
-        "electron-to-chromium": "^1.3.649",
+        "caniuse-lite": "^1.0.30001261",
+        "electron-to-chromium": "^1.3.854",
         "escalade": "^3.1.1",
-        "node-releases": "^1.1.70"
+        "nanocolors": "^0.2.12",
+        "node-releases": "^1.1.76"
+      },
+      "dependencies": {
+        "caniuse-lite": {
+          "version": "1.0.30001263",
+          "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001263.tgz",
+          "integrity": "sha512-doiV5dft6yzWO1WwU19kt8Qz8R0/8DgEziz6/9n2FxUasteZNwNNYSmJO3GLBH8lCVE73AB1RPDPAeYbcO5Cvw=="
+        },
+        "electron-to-chromium": {
+          "version": "1.3.856",
+          "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.856.tgz",
+          "integrity": "sha512-lSezYIe1/p5qkEswAfaQUseOBiwGwuCvRl/MKzOEVe++DcmQ92+43dznDl4rFJ4Zpu+kevhwyIf7KjJevyDA/A=="
+        },
+        "node-releases": {
+          "version": "1.1.76",
+          "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-1.1.76.tgz",
+          "integrity": "sha512-9/IECtNr8dXNmPWmFXepT0/7o5eolGesHUa3mtr0KlgnCvnZxwh2qensKL42JJY2vQKC3nIBXetFAqR+PW1CmA=="
+        }
       }
     },
     "bser": {
@@ -3970,12 +3996,6 @@
         }
       }
     },
-    "collapse-white-space": {
-      "version": "1.0.6",
-      "resolved": "https://registry.npmjs.org/collapse-white-space/-/collapse-white-space-1.0.6.tgz",
-      "integrity": "sha512-jEovNnrhMuqyCcjfEJA56v0Xq8SkIoPKDyaHahwo3POf4qcSXqMYuwNcOTzp74vTsR9Tn08z4MxWqAhcekogkQ==",
-      "dev": true
-    },
     "collect-v8-coverage": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/collect-v8-coverage/-/collect-v8-coverage-1.0.1.tgz",
@@ -4989,9 +5009,9 @@
       "integrity": "sha1-s55/HabrCnW6nBcySzR1PEfgZU0="
     },
     "dns-packet": {
-      "version": "1.3.1",
-      "resolved": "https://registry.npmjs.org/dns-packet/-/dns-packet-1.3.1.tgz",
-      "integrity": "sha512-0UxfQkMhYAUaZI+xrNZOz/as5KgDU0M/fQ9b6SpkyLbk3GEswDi6PADJVaYJradtRVsRIlF1zLyOodbcTCDzUg==",
+      "version": "1.3.4",
+      "resolved": "https://registry.npmjs.org/dns-packet/-/dns-packet-1.3.4.tgz",
+      "integrity": "sha512-BQ6F4vycLXBvdrJZ6S3gZewt6rcrks9KBgM9vrhW+knGRqc8uEdT7fuCwloc7nny5xNoMJ17HGH0R/6fpo8ECA==",
       "requires": {
         "ip": "^1.1.0",
         "safe-buffer": "^5.0.1"
@@ -5880,13 +5900,12 @@
       }
     },
     "eslint-plugin-markdown": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/eslint-plugin-markdown/-/eslint-plugin-markdown-2.0.0.tgz",
-      "integrity": "sha512-zt10JoexHeJFMTE5egDcetAJ34bn5k/92s0wAuRZfhDAyI0ryEj+O91JL2CbBExajie6BE5L63y47dN1Sbp6mQ==",
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-markdown/-/eslint-plugin-markdown-2.2.1.tgz",
+      "integrity": "sha512-FgWp4iyYvTFxPwfbxofTvXxgzPsDuSKHQy2S+a8Ve6savbujey+lgrFFbXQA0HPygISpRYWYBjooPzhYSF81iA==",
       "dev": true,
       "requires": {
-        "remark-parse": "^5.0.0",
-        "unified": "^6.1.2"
+        "mdast-util-from-markdown": "^0.8.5"
       }
     },
     "eslint-plugin-node": {
@@ -7222,9 +7241,9 @@
       "integrity": "sha512-HRcs+2mr52W0K+x8RzcLzuPPmVIKMSv97RGHy0Ea9y/mpcaK+xTrjICA04KAHi4GRzxliNqNJEFYWHghy3rSfQ=="
     },
     "hosted-git-info": {
-      "version": "2.8.8",
-      "resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-2.8.8.tgz",
-      "integrity": "sha512-f/wzC2QaWBs7t9IYqB4T3sR1xviIViXJRJTWBlx2Gf3g0Xi5vI7Yy4koXQ1c9OYDGHN9sBy1DQ2AB8fqZBWhUg=="
+      "version": "2.8.9",
+      "resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-2.8.9.tgz",
+      "integrity": "sha512-mxIDAb9Lsm6DoOJ7xH+5+X4y1LU/4Hi50L9C5sIswK3JzULS4bwk1FvjdBgvYR4bzT4tuUQiC15FE2f5HbLvYw=="
     },
     "hpack.js": {
       "version": "2.1.6",
@@ -8029,23 +8048,11 @@
       "resolved": "https://registry.npmjs.org/is-typedarray/-/is-typedarray-1.0.0.tgz",
       "integrity": "sha1-5HnICFjfDBsR3dppQPlgEfzaSpo="
     },
-    "is-whitespace-character": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/is-whitespace-character/-/is-whitespace-character-1.0.4.tgz",
-      "integrity": "sha512-SDweEzfIZM0SJV0EUga669UTKlmL0Pq8Lno0QDQsPnvECB3IM2aP0gdx5TrU0A01MAPfViaZiI2V1QMZLaKK5w==",
-      "dev": true
-    },
     "is-windows": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/is-windows/-/is-windows-1.0.2.tgz",
       "integrity": "sha512-eXK1UInq2bPmjyX6e3VHIzMLobc4J94i4AWn+Hpq3OU5KkrRC96OAcR3PRJ/pGu6m8TRnBHP9dkXQVsT/COVIA=="
     },
-    "is-word-character": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/is-word-character/-/is-word-character-1.0.4.tgz",
-      "integrity": "sha512-5SMO8RVennx3nZrqtKwCGyyetPE9VDba5ugvKLaD4KopPG5kR4mQ7tNt/r7feL5yt5h3lpuBbIUmCOG2eSzXHA==",
-      "dev": true
-    },
     "is-wsl": {
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/is-wsl/-/is-wsl-2.2.0.tgz",
@@ -9415,12 +9422,6 @@
         "object-visit": "^1.0.0"
       }
     },
-    "markdown-escapes": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/markdown-escapes/-/markdown-escapes-1.0.4.tgz",
-      "integrity": "sha512-8z4efJYk43E0upd0NbVXwgSTQs6cT3T06etieCMEg7dRbzCbxUCK/GHlX8mhHRDcp+OLlHkPKsvqQTCvsRl2cg==",
-      "dev": true
-    },
     "md5.js": {
       "version": "1.3.5",
       "resolved": "https://registry.npmjs.org/md5.js/-/md5.js-1.3.5.tgz",
@@ -9431,6 +9432,25 @@
         "safe-buffer": "^5.1.2"
       }
     },
+    "mdast-util-from-markdown": {
+      "version": "0.8.5",
+      "resolved": "https://registry.npmjs.org/mdast-util-from-markdown/-/mdast-util-from-markdown-0.8.5.tgz",
+      "integrity": "sha512-2hkTXtYYnr+NubD/g6KGBS/0mFmBcifAsI0yIWRiRo0PjVs6SSOSOdtzbp6kSGnShDN6G5aWZpKQ2lWRy27mWQ==",
+      "dev": true,
+      "requires": {
+        "@types/mdast": "^3.0.0",
+        "mdast-util-to-string": "^2.0.0",
+        "micromark": "~2.11.0",
+        "parse-entities": "^2.0.0",
+        "unist-util-stringify-position": "^2.0.0"
+      }
+    },
+    "mdast-util-to-string": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/mdast-util-to-string/-/mdast-util-to-string-2.0.0.tgz",
+      "integrity": "sha512-AW4DRS3QbBayY/jJmD8437V1Gombjf8RSOUCMFBuo5iHi58AGEgVCKQ+ezHkZZDpAQS75hcBMpLqjpJTjtUL7w==",
+      "dev": true
+    },
     "mdn-data": {
       "version": "2.0.4",
       "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.4.tgz",
@@ -9499,6 +9519,16 @@
       "resolved": "https://registry.npmjs.org/microevent.ts/-/microevent.ts-0.1.1.tgz",
       "integrity": "sha512-jo1OfR4TaEwd5HOrt5+tAZ9mqT4jmpNAusXtyfNzqVm9uiSYFZlKM1wYL4oU7azZW/PxQW53wM0S6OR1JHNa2g=="
     },
+    "micromark": {
+      "version": "2.11.4",
+      "resolved": "https://registry.npmjs.org/micromark/-/micromark-2.11.4.tgz",
+      "integrity": "sha512-+WoovN/ppKolQOFIAajxi7Lu9kInbPxFuTBVEavFcL8eAfVstoc5MocPmqBeAdBOJV00uaVjegzH4+MA0DN/uA==",
+      "dev": true,
+      "requires": {
+        "debug": "^4.0.0",
+        "parse-entities": "^2.0.0"
+      }
+    },
     "micromatch": {
       "version": "4.0.2",
       "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.2.tgz",
@@ -9758,10 +9788,10 @@
       "integrity": "sha512-M2ufzIiINKCuDfBSAUr1vWQ+vuVcA9kqx8JJUsbQi6yf1uGRyb7HfpdfUr5qLXf3B/t8dPvcjhKMmlfnP47EzQ==",
       "optional": true
     },
-    "nanoid": {
-      "version": "3.1.20",
-      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.1.20.tgz",
-      "integrity": "sha512-a1cQNyczgKbLX9jwbS/+d7W8fX/RfgYR7lVWwWOGIPNgK2m0MWvrGF6/m4kk6U3QcFMnZf3RIhL0v2Jgh/0Uxw=="
+    "nanocolors": {
+      "version": "0.2.12",
+      "resolved": "https://registry.npmjs.org/nanocolors/-/nanocolors-0.2.12.tgz",
+      "integrity": "sha512-SFNdALvzW+rVlzqexid6epYdt8H9Zol7xDoQarioEFcFN0JHo4CYNztAxmtfgGTVRCmFlEOqqhBpoFGKqSAMug=="
     },
     "nanomatch": {
       "version": "1.2.13",
@@ -10344,9 +10374,9 @@
       }
     },
     "parse-entities": {
-      "version": "1.2.2",
-      "resolved": "https://registry.npmjs.org/parse-entities/-/parse-entities-1.2.2.tgz",
-      "integrity": "sha512-NzfpbxW/NPrzZ/yYSoQxyqUZMZXIdCfE0OIN4ESsnptHJECoUk3FZktxNuzQf4tjt5UEopnxpYJbvYuxIFDdsg==",
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/parse-entities/-/parse-entities-2.0.0.tgz",
+      "integrity": "sha512-kkywGpCcRYhqQIchaWqZ875wzpS/bMKhz5HnN3p7wveJTkTtyAB/AlnS0f8DFSqYW1T82t6yEAkEcB+A1I3MbQ==",
       "dev": true,
       "requires": {
         "character-entities": "^1.0.0",
@@ -10430,9 +10460,9 @@
       "integrity": "sha1-QRyttXTFoUDTpLGRDUDYDMn0C0A="
     },
     "path-parse": {
-      "version": "1.0.6",
-      "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.6.tgz",
-      "integrity": "sha512-GSmOT2EbHrINBf9SR7CDELwlJ8AENk3Qn7OikK4nFYAu3Ote2+JYNVvkpAEQm3/TLNEJFD/xZJjzyxg3KBWOzw=="
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.7.tgz",
+      "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw=="
     },
     "path-to-regexp": {
       "version": "0.1.7",
@@ -11555,13 +11585,20 @@
       },
       "dependencies": {
         "postcss": {
-          "version": "8.2.8",
-          "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.2.8.tgz",
-          "integrity": "sha512-1F0Xb2T21xET7oQV9eKuctbM9S7BC0fetoHCc4H13z0PT6haiRLP4T0ZY4XWh7iLP0usgqykT6p9B2RtOf4FPw==",
+          "version": "8.3.8",
+          "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.3.8.tgz",
+          "integrity": "sha512-GT5bTjjZnwDifajzczOC+r3FI3Cu+PgPvrsjhQdRqa2kTJ4968/X9CUce9xttIB0xOs5c6xf0TCWZo/y9lF6bA==",
           "requires": {
-            "colorette": "^1.2.2",
-            "nanoid": "^3.1.20",
-            "source-map": "^0.6.1"
+            "nanocolors": "^0.2.2",
+            "nanoid": "^3.1.25",
+            "source-map-js": "^0.6.2"
+          },
+          "dependencies": {
+            "nanoid": {
+              "version": "3.1.28",
+              "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.1.28.tgz",
+              "integrity": "sha512-gSu9VZ2HtmoKYe/lmyPFES5nknFrHa+/DT9muUFWFMi6Jh9E1I7bkvlQ8xxf1Kos9pi9o8lBnIOkatMhKX/YUw=="
+            }
           }
         }
       }
@@ -12458,29 +12495,6 @@
       "resolved": "https://registry.npmjs.org/relateurl/-/relateurl-0.2.7.tgz",
       "integrity": "sha1-VNvzd+UUQKypCkzSdGANP/LYiKk="
     },
-    "remark-parse": {
-      "version": "5.0.0",
-      "resolved": "https://registry.npmjs.org/remark-parse/-/remark-parse-5.0.0.tgz",
-      "integrity": "sha512-b3iXszZLH1TLoyUzrATcTQUZrwNl1rE70rVdSruJFlDaJ9z5aMkhrG43Pp68OgfHndL/ADz6V69Zow8cTQu+JA==",
-      "dev": true,
-      "requires": {
-        "collapse-white-space": "^1.0.2",
-        "is-alphabetical": "^1.0.0",
-        "is-decimal": "^1.0.0",
-        "is-whitespace-character": "^1.0.0",
-        "is-word-character": "^1.0.0",
-        "markdown-escapes": "^1.0.0",
-        "parse-entities": "^1.1.0",
-        "repeat-string": "^1.5.4",
-        "state-toggle": "^1.0.0",
-        "trim": "0.0.1",
-        "trim-trailing-lines": "^1.0.0",
-        "unherit": "^1.0.4",
-        "unist-util-remove-position": "^1.0.0",
-        "vfile-location": "^2.0.0",
-        "xtend": "^4.0.1"
-      }
-    },
     "remove-trailing-separator": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/remove-trailing-separator/-/remove-trailing-separator-1.1.0.tgz",
@@ -12523,12 +12537,6 @@
       "resolved": "https://registry.npmjs.org/repeat-string/-/repeat-string-1.6.1.tgz",
       "integrity": "sha1-jcrkcOHIirwtYA//Sndihtp15jc="
     },
-    "replace-ext": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/replace-ext/-/replace-ext-1.0.0.tgz",
-      "integrity": "sha1-3mMSg3P8v3w8z6TeWkgMRaZ5WOs=",
-      "dev": true
-    },
     "request": {
       "version": "2.88.2",
       "resolved": "https://registry.npmjs.org/request/-/request-2.88.2.tgz",
@@ -13606,6 +13614,11 @@
       "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
       "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g=="
     },
+    "source-map-js": {
+      "version": "0.6.2",
+      "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-0.6.2.tgz",
+      "integrity": "sha512-/3GptzWzu0+0MBQFrDKzw/DvvMTUORvgY6k6jd/VS6iCR4RDTKWH6v6WPwQoUO8667uQEf9Oe38DxAYWY5F/Ug=="
+    },
     "source-map-resolve": {
       "version": "0.6.0",
       "resolved": "https://registry.npmjs.org/source-map-resolve/-/source-map-resolve-0.6.0.tgz",
@@ -13749,12 +13762,6 @@
       "resolved": "https://registry.npmjs.org/stackframe/-/stackframe-1.2.0.tgz",
       "integrity": "sha512-GrdeshiRmS1YLMYgzF16olf2jJ/IzxXY9lhKOskuVziubpTYcYqyOwYeJKzQkwy7uN0fYSsbsC4RQaXf9LCrYA=="
     },
-    "state-toggle": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/state-toggle/-/state-toggle-1.0.3.tgz",
-      "integrity": "sha512-d/5Z4/2iiCnHw6Xzghyhb+GcmF89bxwgXG60wjIiZaxnymbyOmI8Hk4VqHXiVVp6u2ysaskFfXg3ekCj4WNftQ==",
-      "dev": true
-    },
     "static-extend": {
       "version": "0.1.2",
       "resolved": "https://registry.npmjs.org/static-extend/-/static-extend-0.1.2.tgz",
@@ -14164,9 +14171,9 @@
       "integrity": "sha512-4WK/bYZmj8xLr+HUCODHGF1ZFzsYffasLUgEiMBY4fgtltdO6B4WJtlSbPaDTLpYTcGVwM2qLnFTICEcNxs3kA=="
     },
     "tar": {
-      "version": "6.1.0",
-      "resolved": "https://registry.npmjs.org/tar/-/tar-6.1.0.tgz",
-      "integrity": "sha512-DUCttfhsnLCjwoDoFcI+B2iJgYa93vBnDUATYEeRx6sntCTdN01VnqsIuTlALXla/LWooNg0yEGeB+Y8WdFxGA==",
+      "version": "6.1.11",
+      "resolved": "https://registry.npmjs.org/tar/-/tar-6.1.11.tgz",
+      "integrity": "sha512-an/KZQzQUkZCkuoAA64hM92X0Urb6VpRhAFllDzz44U2mcD5scmT3zBc4VgVpkugF580+DQn8eAFSyoQt0tznA==",
       "requires": {
         "chownr": "^2.0.0",
         "fs-minipass": "^2.0.0",
@@ -14483,24 +14490,6 @@
         "punycode": "^2.1.1"
       }
     },
-    "trim": {
-      "version": "0.0.1",
-      "resolved": "https://registry.npmjs.org/trim/-/trim-0.0.1.tgz",
-      "integrity": "sha1-WFhUf2spB1fulczMZm+1AITEYN0=",
-      "dev": true
-    },
-    "trim-trailing-lines": {
-      "version": "1.1.4",
-      "resolved": "https://registry.npmjs.org/trim-trailing-lines/-/trim-trailing-lines-1.1.4.tgz",
-      "integrity": "sha512-rjUWSqnfTNrjbB9NQWfPMH/xRK1deHeGsHoVfpxJ++XeYXE0d6B1En37AHfw3jtfTU7dzMzZL2jjpe8Qb5gLIQ==",
-      "dev": true
-    },
-    "trough": {
-      "version": "1.0.5",
-      "resolved": "https://registry.npmjs.org/trough/-/trough-1.0.5.tgz",
-      "integrity": "sha512-rvuRbTarPXmMb79SmzEp8aqXNKcK+y0XaB298IXueQ8I2PsrATcPBCSPyK/dDNa2iWOhKlfNnOjdAOTBU/nkFA==",
-      "dev": true
-    },
     "tryer": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/tryer/-/tryer-1.0.1.tgz",
@@ -14625,16 +14614,6 @@
         "which-boxed-primitive": "^1.0.1"
       }
     },
-    "unherit": {
-      "version": "1.1.3",
-      "resolved": "https://registry.npmjs.org/unherit/-/unherit-1.1.3.tgz",
-      "integrity": "sha512-Ft16BJcnapDKp0+J/rqFC3Rrk6Y/Ng4nzsC028k2jdDII/rdZ7Wd3pPT/6+vIIxRagwRc9K0IUX0Ra4fKvw+WQ==",
-      "dev": true,
-      "requires": {
-        "inherits": "^2.0.0",
-        "xtend": "^4.0.0"
-      }
-    },
     "unicode-canonical-property-names-ecmascript": {
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/unicode-canonical-property-names-ecmascript/-/unicode-canonical-property-names-ecmascript-1.0.4.tgz",
@@ -14659,20 +14638,6 @@
       "resolved": "https://registry.npmjs.org/unicode-property-aliases-ecmascript/-/unicode-property-aliases-ecmascript-1.1.0.tgz",
       "integrity": "sha512-PqSoPh/pWetQ2phoj5RLiaqIk4kCNwoV3CI+LfGmWLKI3rE3kl1h59XpX2BjgDrmbxD9ARtQobPGU1SguCYuQg=="
     },
-    "unified": {
-      "version": "6.2.0",
-      "resolved": "https://registry.npmjs.org/unified/-/unified-6.2.0.tgz",
-      "integrity": "sha512-1k+KPhlVtqmG99RaTbAv/usu85fcSRu3wY8X+vnsEhIxNP5VbVIDiXnLqyKIG+UMdyTg0ZX9EI6k2AfjJkHPtA==",
-      "dev": true,
-      "requires": {
-        "bail": "^1.0.0",
-        "extend": "^3.0.0",
-        "is-plain-obj": "^1.1.0",
-        "trough": "^1.0.0",
-        "vfile": "^2.0.0",
-        "x-is-string": "^0.1.0"
-      }
-    },
     "union-value": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/union-value/-/union-value-1.0.1.tgz",
@@ -14718,43 +14683,13 @@
         "crypto-random-string": "^1.0.0"
       }
     },
-    "unist-util-is": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/unist-util-is/-/unist-util-is-3.0.0.tgz",
-      "integrity": "sha512-sVZZX3+kspVNmLWBPAB6r+7D9ZgAFPNWm66f7YNb420RlQSbn+n8rG8dGZSkrER7ZIXGQYNm5pqC3v3HopH24A==",
-      "dev": true
-    },
-    "unist-util-remove-position": {
-      "version": "1.1.4",
-      "resolved": "https://registry.npmjs.org/unist-util-remove-position/-/unist-util-remove-position-1.1.4.tgz",
-      "integrity": "sha512-tLqd653ArxJIPnKII6LMZwH+mb5q+n/GtXQZo6S6csPRs5zB0u79Yw8ouR3wTw8wxvdJFhpP6Y7jorWdCgLO0A==",
-      "dev": true,
-      "requires": {
-        "unist-util-visit": "^1.1.0"
-      }
-    },
     "unist-util-stringify-position": {
-      "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/unist-util-stringify-position/-/unist-util-stringify-position-1.1.2.tgz",
-      "integrity": "sha512-pNCVrk64LZv1kElr0N1wPiHEUoXNVFERp+mlTg/s9R5Lwg87f9bM/3sQB99w+N9D/qnM9ar3+AKDBwo/gm/iQQ==",
-      "dev": true
-    },
-    "unist-util-visit": {
-      "version": "1.4.1",
-      "resolved": "https://registry.npmjs.org/unist-util-visit/-/unist-util-visit-1.4.1.tgz",
-      "integrity": "sha512-AvGNk7Bb//EmJZyhtRUnNMEpId/AZ5Ph/KUpTI09WHQuDZHKovQ1oEv3mfmKpWKtoMzyMC4GLBm1Zy5k12fjIw==",
-      "dev": true,
-      "requires": {
-        "unist-util-visit-parents": "^2.0.0"
-      }
-    },
-    "unist-util-visit-parents": {
-      "version": "2.1.2",
-      "resolved": "https://registry.npmjs.org/unist-util-visit-parents/-/unist-util-visit-parents-2.1.2.tgz",
-      "integrity": "sha512-DyN5vD4NE3aSeB+PXYNKxzGsfocxp6asDc2XXE3b0ekO2BaRUpBicbbUygfSvYfUz1IkmjFR1YF7dPklraMZ2g==",
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/unist-util-stringify-position/-/unist-util-stringify-position-2.0.3.tgz",
+      "integrity": "sha512-3faScn5I+hy9VleOq/qNbAd6pAx7iH5jYBMS9I1HgQVijz/4mv5Bvw5iw1sC/90CODiKo81G/ps8AJrISn687g==",
       "dev": true,
       "requires": {
-        "unist-util-is": "^3.0.0"
+        "@types/unist": "^2.0.2"
       }
     },
     "universalify": {
@@ -14870,9 +14805,9 @@
       }
     },
     "url-parse": {
-      "version": "1.5.1",
-      "resolved": "https://registry.npmjs.org/url-parse/-/url-parse-1.5.1.tgz",
-      "integrity": "sha512-HOfCOUJt7iSYzEx/UqgtwKRMC6EU91NFhsCHMv9oM03VJcVo2Qrp8T8kI9D7amFf1cu+/3CEhgb3rF9zL7k85Q==",
+      "version": "1.5.3",
+      "resolved": "https://registry.npmjs.org/url-parse/-/url-parse-1.5.3.tgz",
+      "integrity": "sha512-IIORyIQD9rvj0A4CLWsHkBBJuNqWpFQe224b6j9t/ABmquIS0qDU2pY6kl6AuOrL5OkCXHMCFNe1jBcuAggjvQ==",
       "requires": {
         "querystringify": "^2.1.1",
         "requires-port": "^1.0.0"
@@ -14986,33 +14921,6 @@
         "extsprintf": "^1.2.0"
       }
     },
-    "vfile": {
-      "version": "2.3.0",
-      "resolved": "https://registry.npmjs.org/vfile/-/vfile-2.3.0.tgz",
-      "integrity": "sha512-ASt4mBUHcTpMKD/l5Q+WJXNtshlWxOogYyGYYrg4lt/vuRjC1EFQtlAofL5VmtVNIZJzWYFJjzGWZ0Gw8pzW1w==",
-      "dev": true,
-      "requires": {
-        "is-buffer": "^1.1.4",
-        "replace-ext": "1.0.0",
-        "unist-util-stringify-position": "^1.0.0",
-        "vfile-message": "^1.0.0"
-      }
-    },
-    "vfile-location": {
-      "version": "2.0.6",
-      "resolved": "https://registry.npmjs.org/vfile-location/-/vfile-location-2.0.6.tgz",
-      "integrity": "sha512-sSFdyCP3G6Ka0CEmN83A2YCMKIieHx0EDaj5IDP4g1pa5ZJ4FJDvpO0WODLxo4LUX4oe52gmSCK7Jw4SBghqxA==",
-      "dev": true
-    },
-    "vfile-message": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/vfile-message/-/vfile-message-1.1.1.tgz",
-      "integrity": "sha512-1WmsopSGhWt5laNir+633LszXvZ+Z/lxveBf6yhGsqnQIhlhzooZae7zV6YVM1Sdkw68dtAW3ow0pOdPANugvA==",
-      "dev": true,
-      "requires": {
-        "unist-util-stringify-position": "^1.1.1"
-      }
-    },
     "vm-browserify": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/vm-browserify/-/vm-browserify-1.1.2.tgz",
@@ -16451,15 +16359,9 @@
       }
     },
     "ws": {
-      "version": "7.4.4",
-      "resolved": "https://registry.npmjs.org/ws/-/ws-7.4.4.tgz",
-      "integrity": "sha512-Qm8k8ojNQIMx7S+Zp8u/uHOx7Qazv3Yv4q68MiWWWOJhiwG5W3x7iqmRtJo8xxrciZUY4vRxUTJCKuRnF28ZZw=="
-    },
-    "x-is-string": {
-      "version": "0.1.0",
-      "resolved": "https://registry.npmjs.org/x-is-string/-/x-is-string-0.1.0.tgz",
-      "integrity": "sha1-R0tQhlrzpJqcRlfwWs0UVFj3fYI=",
-      "dev": true
+      "version": "7.5.5",
+      "resolved": "https://registry.npmjs.org/ws/-/ws-7.5.5.tgz",
+      "integrity": "sha512-BAkMFcAzl8as1G/hArkxOxq3G7pjUqQ3gzYbLL0/5zNkph70e+lCoxBGnm6AW1+/aiNeV4fnKqZ8m4GZewmH2w=="
     },
     "xml-name-validator": {
       "version": "3.0.0",
diff --git a/package.json b/package.json
index a154f9e..6e16512 100644
--- a/package.json
+++ b/package.json
@@ -44,7 +44,7 @@
     "eslint-plugin-import": "^2.22.1",
     "eslint-plugin-jest": "^24.2.1",
     "eslint-plugin-jsx-a11y": "^6.4.1",
-    "eslint-plugin-markdown": "^2.0.0",
+    "eslint-plugin-markdown": "^2.2.1",
     "eslint-plugin-node": "^11.1.0",
     "eslint-plugin-react": "^7.22.0",
     "eslint-plugin-react-hooks": "^4.2.0",
diff --git a/src/components/CharacterCard/CharacterCard.js b/src/components/CharacterCard/CharacterCard.js
index 9e7e4ab..ae02e92 100644
--- a/src/components/CharacterCard/CharacterCard.js
+++ b/src/components/CharacterCard/CharacterCard.js
@@ -9,13 +9,21 @@ function CharacterCard({ id, name, image, species, status, origin, location }) {
   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={{
+          pathname: `${routes.CHARACTER}/${id}`,
+          state: { name: id },
+        }}
+      >
         <h3 className="CharacterCard__name h4">{name}</h3>
       </Link>
       <div className="CharacterCard__meta">
         <Link
           className="CharacterCard__meta-item"
-          to={`${routes.LOCATION}/${id}`}
+          to={{
+            pathname: `${routes.LOCATION}/${id}`,
+            state: { id: id },
+          }}
         >
           {origin.name}
         </Link>
@@ -26,4 +34,4 @@ function CharacterCard({ id, name, image, species, status, origin, location }) {
   );
 }
 
-export default CharacterCard;
+export default React.memo(CharacterCard);
diff --git a/src/components/EpisodeCard/EpisodeCard.js b/src/components/EpisodeCard/EpisodeCard.js
index 13cb5cf..99a1bf0 100644
--- a/src/components/EpisodeCard/EpisodeCard.js
+++ b/src/components/EpisodeCard/EpisodeCard.js
@@ -8,8 +8,16 @@ 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}`}>
-        <h3 className="Episode__name h5">{name}</h3>
+      <Link
+        to={{
+          pathname: `${routes.EPISODE}/${id}`,
+          state: { episode: id },
+        }}
+      >
+        <h3 className="Episode__name h5">
+          {/* {name.length < 20 ? `${name}` : `${name.substring(0, 25)} ...`} */}
+          {name}
+        </h3>
       </Link>
       <div className="Episode__meta">
         <p className="Episode__meta-item">{airDate}</p>
@@ -20,4 +28,4 @@ function EpisodeCard({ id, name, airDate, episode }) {
   );
 }
 
-export default EpisodeCard;
+export default React.memo(EpisodeCard);
diff --git a/src/components/Router/Router.js b/src/components/Router/Router.js
new file mode 100644
index 0000000..c44374c
--- /dev/null
+++ b/src/components/Router/Router.js
@@ -0,0 +1,21 @@
+import React from "react";
+import { BrowserRouter, Switch, Route } from "react-router-dom";
+
+import App from "../../App";
+import Episode from "../../pages/Episode/Episode";
+import Character from "../../pages/Character/Character";
+import Location from "../../pages/Location/Location";
+import * as routes from "../../constants/routes";
+
+const Router = () => (
+  <BrowserRouter>
+    <Switch>
+      <Route path={`${routes.HOME}`} component={App} exact />
+      <Route path={`${routes.EPISODE}/:id`} component={Episode} />
+      <Route path={`${routes.CHARACTER}/:id`} component={Character} />
+      <Route path={`${routes.LOCATION}/:id`} component={Location} />
+    </Switch>
+  </BrowserRouter>
+);
+
+export default Router;
diff --git a/src/constants/api.js b/src/constants/api.js
new file mode 100644
index 0000000..b87e604
--- /dev/null
+++ b/src/constants/api.js
@@ -0,0 +1,4 @@
+export const BASE_URL = "https://rickandmortyapi.com/api/episode?page=1";
+export const EPISODE_URL = "https://rickandmortyapi.com/api/episode";
+export const CHARACTER_URL = "https://rickandmortyapi.com/api/character";
+export const LOCATION_URL = "https://rickandmortyapi.com/api/location";
diff --git a/src/index.js b/src/index.js
index c4f7c38..3e87593 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,17 +1,16 @@
 import React from "react";
 import ReactDOM from "react-dom";
-import { BrowserRouter } from "react-router-dom";
+// import { BrowserRouter } from "react-router-dom";
 
 import "bootstrap/dist/css/bootstrap.min.css";
+import Router from "./components/Router/Router";
 
-import App from "./App";
+// import App from "./App";
 import reportWebVitals from "./reportWebVitals";
 
 ReactDOM.render(
   <React.StrictMode>
-    <BrowserRouter>
-      <App />
-    </BrowserRouter>
+    <Router />
   </React.StrictMode>,
   document.getElementById("root"),
 );
diff --git a/src/pages/Character/Character.js b/src/pages/Character/Character.js
new file mode 100644
index 0000000..5709cfd
--- /dev/null
+++ b/src/pages/Character/Character.js
@@ -0,0 +1,140 @@
+import axios from "axios";
+import React, { Component } from "react";
+
+import Layout from "../../components/Layout";
+import EpisodeCard from "../../components/EpisodeCard";
+import * as api from "../../constants/api";
+
+class Character extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      character: null,
+      episode: [],
+      hasLoaded: false,
+      hasError: false,
+      errorMessage: null,
+    };
+
+    this.loadCharacter = this.loadCharacter.bind(this);
+  }
+
+  async componentDidMount() {
+    const { match } = this.props;
+    const { id } = match.params;
+    this.loadCharacter(id);
+  }
+
+  async loadCharacter(id) {
+    const response = await axios.get(`${api.CHARACTER_URL}/${id}`);
+    const characterResponse = response.data;
+    const episodeUrls = response.data.episode;
+    const requests = episodeUrls.map((episodeUrl) =>
+      axios.get(episodeUrl).catch((err) => null),
+    );
+    try {
+      const episodes = await axios.all(requests);
+      this.setState({
+        episode: episodes,
+        character: characterResponse,
+        hasLoaded: true,
+      });
+    } catch (err) {
+      this.setState({
+        hasLoaded: true,
+        hasError: true,
+        errorMessage: err.message,
+      });
+    }
+    // console.log(this);
+  }
+
+  render() {
+    const {
+      episode,
+      character,
+      hasLoaded,
+      hasError,
+      errorMessage,
+    } = this.state;
+    return (
+      <Layout>
+        {hasLoaded && !hasError && (
+          <section className="row">
+            <div className="col col-4">
+              <img
+                className="CharacterCard__img"
+                src={character.image}
+                alt=""
+              />
+            </div>
+            <div className="col col-8">
+              <div className="row">
+                <div className="col col-12">
+                  <h3>{character.name}</h3>
+                </div>
+                <div className="col col-12">
+                  <hr />
+                </div>
+                <div className="col col-12">
+                  <div>
+                    <p>
+                      <strong>CHARACTER</strong>
+                    </p>
+                    <div className="d-flex flex-row">
+                      <p>{character.species}</p>
+                      <p>|</p>
+                      <p>{character.status}</p>
+                    </div>
+                  </div>
+                </div>
+                <div className="col col-12">
+                  <di className="d-flex flex-row">
+                    <div>
+                      <p>
+                        <strong>ORIGIN</strong>
+                      </p>
+                      <p>{character.origin.name}</p>
+                    </div>
+                    <div>
+                      <p>
+                        <strong>LOCATION</strong>
+                      </p>
+                      <p>{character.location.name}</p>
+                    </div>
+                  </di>
+                </div>
+              </div>
+            </div>
+            <div className="col col-12">
+              <hr />
+            </div>
+            <div className="col col-12">
+              <h4>Episodes</h4>
+            </div>
+            <div className="col col-12">
+              <hr />
+            </div>
+            {episode.length > 0 &&
+              episode.map((ele) => (
+                <EpisodeCard
+                  key={ele.data.id}
+                  id={ele.data.id}
+                  name={ele.data.name}
+                  airDate={ele.data.air_date}
+                  episode={ele.data.episode}
+                />
+              ))}
+          </section>
+        )}
+        {hasError && (
+          <div className="col col-12">
+            <h1>{errorMessage}</h1>
+          </div>
+        )}
+      </Layout>
+    );
+  }
+}
+
+export default Character;
diff --git a/src/pages/Character/index.js b/src/pages/Character/index.js
new file mode 100644
index 0000000..f267ceb
--- /dev/null
+++ b/src/pages/Character/index.js
@@ -0,0 +1 @@
+export { default } from "./Character";
diff --git a/src/pages/Episode/Episode.js b/src/pages/Episode/Episode.js
index 8255df5..e324802 100644
--- a/src/pages/Episode/Episode.js
+++ b/src/pages/Episode/Episode.js
@@ -1,39 +1,103 @@
+import axios from "axios";
 import React, { Component } from "react";
 
 import Layout from "../../components/Layout";
-// import CharacterCard from "../../components/CharacterCard";
+import CharacterCard from "../../components/CharacterCard";
+import * as api from "../../constants/api";
 
 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,
+    };
+
+    this.loadCharacters = this.loadCharacters.bind(this);
+  }
+
+  async componentDidMount() {
+    const { match } = this.props;
+    const { id } = match.params;
+    this.loadCharacters(id);
+  }
+
+  async loadCharacters(id) {
+    const response = await axios.get(`${api.EPISODE_URL}/${id}`);
+    const episodeResponse = response.data;
+    const characterUrls = response.data.characters;
+    const requests = characterUrls.map((characterUrl) =>
+      axios.get(characterUrl).catch((err) => null),
+    );
+    try {
+      const characters = await axios.all(requests);
+      this.setState({
+        episode: episodeResponse,
+        characters: characters,
+        hasLoaded: true,
+      });
+    } catch (err) {
+      this.setState({
+        hasLoaded: true,
+        hasError: true,
+        errorMessage: err.message,
+      });
+    }
+    // console.log(this);
   }
 
   render() {
+    const {
+      episode,
+      characters,
+      hasLoaded,
+      hasError,
+      errorMessage,
+    } = this.state;
     return (
       <Layout>
-        <section className="row">
+        {hasLoaded && !hasError && (
+          <section className="row">
+            <div className="col col-12">
+              <h3>{episode.name}</h3>
+            </div>
+            <div className="col col-12">
+              <hr />
+            </div>
+            <div className="CharacterCard__meta col col-12">
+              <p className="CharacterCard__meta-item">
+                <h5>{episode.air_date}</h5>
+              </p>
+              <p className="CharacterCard__meta-item">|</p>
+              <p className="CharacterCard__meta-item">{episode.episode}</p>
+            </div>
+            <div className="col col-12">
+              <hr />
+            </div>
+            {characters.length > 0 &&
+              characters.map((character) => (
+                <CharacterCard
+                  key={character.data.id}
+                  id={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}
+                />
+              ))}
+          </section>
+        )}
+        {hasError && (
           <div className="col col-12">
-            {/* {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}
-              />
-            ))} */}
+            <h1>{errorMessage}</h1>
           </div>
-        </section>
+        )}
       </Layout>
     );
   }
diff --git a/src/pages/Home/Home.js b/src/pages/Home/Home.js
index f86e93c..3386b89 100644
--- a/src/pages/Home/Home.js
+++ b/src/pages/Home/Home.js
@@ -1,42 +1,85 @@
+import axios from "axios";
 import React, { Component } from "react";
 
 import Layout from "../../components/Layout";
-// import EpisodeCard from "../../components/EpisodeCard";
+import EpisodeCard from "../../components/EpisodeCard";
+import * as api from "../../constants/api";
 
 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,
+    this.loadEpisodes = this.loadEpisodes.bind(this);
   }
 
   async componentDidMount() {
-    // this.loadEpisodes();
+    const url = api.BASE_URL;
+    this.loadEpisodes(url);
   }
 
-  async loadEpisodes() {
-    console.log(this);
+  async loadEpisodes(url) {
+    try {
+      await axios.get(url).then((res) => {
+        const episodes = res.data.results;
+        const pageInfo = res.data.info;
+        this.setState({
+          episodes: episodes,
+          hasLoaded: true,
+          paginationInfo: pageInfo,
+        });
+      });
+    } catch (err) {
+      this.setState({
+        hasLoaded: true,
+        hasError: true,
+        errorMessage: err.message,
+      });
+    }
+    // console.log(this);
+  }
+
+  nextPage(nextUrl) {
+    this.loadEpisodes(nextUrl);
+  }
+
+  prevPage(prevUrl) {
+    this.loadEpisodes(prevUrl);
   }
 
   render() {
+    const {
+      episodes,
+      hasLoaded,
+      hasError,
+      errorMessage,
+      paginationInfo,
+    } = this.state;
     return (
       <Layout>
         <section className="row">
-          {/* {hasLoaded && !hasError && (
+          {hasLoaded && !hasError && (
             <div className="col col-12">
               <h1>Episodes loaded!</h1>
             </div>
-          )} */}
+          )}
+          {hasError && (
+            <div className="col col-12">
+              <h1>{errorMessage}</h1>
+            </div>
+          )}
           <div className="col col-12">
             <hr />
           </div>
-          {/* {episodes.map((episode) => (
+          {episodes.length > 0 &&
+            episodes.map((episode) => (
               <EpisodeCard
                 key={episode.id}
                 id={episode.id}
@@ -44,10 +87,38 @@ class Home extends Component {
                 airDate={episode.air_date}
                 episode={episode.episode}
               />
-            ))} */}
-          <div className="col col-12">
+            ))}
+          <div className="col col-12 justify-content-center">
             <hr />
           </div>
+          <div className="col col-12">
+            <nav>
+              <ul className="pagination justify-content-center">
+                {paginationInfo && paginationInfo.prev !== null ? (
+                  <li className="page-item">
+                    <button
+                      type="button"
+                      className="page-link"
+                      onClick={() => this.prevPage(paginationInfo.prev)}
+                    >
+                      Previous
+                    </button>
+                  </li>
+                ) : null}
+                {paginationInfo && paginationInfo.next !== null ? (
+                  <li className="page-item">
+                    <button
+                      type="button"
+                      className="page-link"
+                      onClick={() => this.nextPage(paginationInfo.next)}
+                    >
+                      Next
+                    </button>
+                  </li>
+                ) : null}{" "}
+              </ul>
+            </nav>
+          </div>
         </section>
       </Layout>
     );
diff --git a/src/pages/Location/Location.js b/src/pages/Location/Location.js
new file mode 100644
index 0000000..56a330b
--- /dev/null
+++ b/src/pages/Location/Location.js
@@ -0,0 +1,105 @@
+import axios from "axios";
+import React, { Component } from "react";
+
+import Layout from "../../components/Layout";
+import CharacterCard from "../../components/CharacterCard";
+import * as api from "../../constants/api";
+
+class Location extends Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      location: null,
+      residents: [],
+      hasLoaded: false,
+      hasError: false,
+      errorMessage: null,
+    };
+
+    this.loadLocation = this.loadLocation.bind(this);
+  }
+
+  async componentDidMount() {
+    const { match } = this.props;
+    const { id } = match.params;
+    this.loadLocation(id);
+  }
+
+  async loadLocation(id) {
+    const response = await axios.get(`${api.LOCATION_URL}/${id}`);
+    const locationResponse = response.data;
+    const residentUrls = response.data.residents;
+    const requests = residentUrls.map((residentUrl) =>
+      axios.get(residentUrl).catch((err) => null),
+    );
+    try {
+      const residents = await axios.all(requests);
+      this.setState({
+        location: locationResponse,
+        residents: residents,
+        hasLoaded: true,
+      });
+    } catch (err) {
+      this.setState({
+        hasLoaded: true,
+        hasError: true,
+        errorMessage: err.message,
+      });
+    }
+    // console.log(this);
+  }
+
+  render() {
+    const {
+      location,
+      residents,
+      hasLoaded,
+      hasError,
+      errorMessage,
+    } = this.state;
+    return (
+      <Layout>
+        {hasLoaded && !hasError && (
+          <section className="row">
+            <div className="col col-12">
+              <h3>{location.name}</h3>
+            </div>
+            <div className="col col-12">
+              <hr />
+            </div>
+            <div className="col col-12">
+              <h4>{location.type}</h4>
+            </div>
+            <div className="col col-12">
+              <h4>{location.dimension}</h4>
+            </div>
+            <div className="col col-12">
+              <hr />
+            </div>
+            {residents.length > 0 &&
+              residents.map((resident) => (
+                <CharacterCard
+                  key={resident.data.id}
+                  id={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}
+                />
+              ))}
+          </section>
+        )}
+        {hasError && (
+          <div className="col col-12">
+            <h1>{errorMessage}</h1>
+          </div>
+        )}
+      </Layout>
+    );
+  }
+}
+
+export default Location;
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";