diff --git a/.env b/.env
new file mode 100644
index 000000000..9dca6bb96
--- /dev/null
+++ b/.env
@@ -0,0 +1 @@
+API_KEY='AIzaSyBLF4iEDjnWFmKrhEtIetO5qRT2aKQqO4o'
\ No newline at end of file
diff --git a/package.json b/package.json
index cbfb45caa..e0583e851 100644
--- a/package.json
+++ b/package.json
@@ -12,12 +12,15 @@
     "@chakra-ui/react": "^1.0.0",
     "@emotion/react": "^11.0.0",
     "@emotion/styled": "^11.0.0",
+    "axios": "^0.21.1",
+    "formik": "^2.2.6",
     "framer-motion": "^2.9.4",
     "next": "latest",
     "node-fetch": "^2.6.1",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
     "react-icons": "^4.2.0",
+    "react-router-dom": "^5.2.0",
     "styled-components": "^5.2.1",
     "yarn": "^1.22.10"
   },
diff --git a/src/components/Card/Card.jsx b/src/components/Card/Card.jsx
index 382c8ea9e..f7f8a2369 100644
--- a/src/components/Card/Card.jsx
+++ b/src/components/Card/Card.jsx
@@ -1,19 +1,28 @@
-import { StarIcon } from '@chakra-ui/icons'
 import { Image } from '@chakra-ui/image'
 import { Badge, Box } from '@chakra-ui/layout'
+import { useRouter } from "next/router"
 import React from 'react'
 
-const Card = ({item, index}) => {
+const Card = ({item}) => {
+    const router = useRouter();
     const property = {
-        imageUrl: item.snippet.thumbnails.default.url,
-        imageAlt: "Rear view of modern home with pool",
-        title: item.snippet.channelTitle,
-        reviewCount: 34,
-        rating: 4,
+        videoId: item.id.videoId,
+        imageUrl: item.snippet.thumbnails.high.url,
+        imageAlt: "youtube image",
+        title: item.snippet.title,
+        channelTitle: item.snippet.channelTitle,
+        description: item.snippet.description
       }
+
+    const videoHandler = () => {
+        router.push({
+            pathname: "/videoPlayer",
+            query: property
+        })
+    }
     
     return (
-        <Box key={index} maxW="sm" borderWidth="1px" borderRadius="lg" overflow="hidden">
+        <Box key={property.videoId} onClick={videoHandler} cursor="pointer" maxW="sm" borderWidth="1px" borderRadius="lg" overflow="hidden">
             <Image width="100%" maxW="382px" maxHeight="286px" src={property.imageUrl} alt={property.imageAlt} />
 
             <Box p="6">
@@ -32,19 +41,8 @@ const Card = ({item, index}) => {
             >
                 {property.title}
             </Box>
-
-            <Box d="flex" mt="2" alignItems="center">
-                {Array(5)
-                .fill("")
-                .map((_, i) => (
-                    <StarIcon
-                    key={i}
-                    color={i < property.rating ? "teal.500" : "gray.300"}
-                    />
-                ))}
-                <Box as="span" ml="2" color="gray.600" fontSize="sm">
-                {property.reviewCount} reviews
-                </Box>
+            <Box as="span" color="gray.600" fontSize="sm">
+                {property.channelTitle} 
             </Box>
             </Box>
         </Box>
diff --git a/src/components/CardList/CardList.jsx b/src/components/CardList/CardList.jsx
index 3da369e0a..079e99f20 100644
--- a/src/components/CardList/CardList.jsx
+++ b/src/components/CardList/CardList.jsx
@@ -1,25 +1,33 @@
-import { Flex, Grid } from '@chakra-ui/layout';
+import { Flex, Grid } from '@chakra-ui/layout'
+import { useRouter } from 'next/router'
 import React, { useEffect, useState } from 'react'
+import fetchData from '../../utils/useFetchData'
 import Card from '../Card/Card'
 
-const CardList = () => {
+const CardList = ({list, IdVid}) => {
     const [data, setData] = useState()
+    const { query } = useRouter()
+    const { search } = query
+    let result = {}
+    useEffect(async () => {
+        if (IdVid) {
+            result = search ?  await fetchData.get("/search", {params: {q: search}}) : await fetchData.get("/search", {params: {relatedToVideoId: IdVid}})
+        } else {
+            result = search ?  await fetchData.get("/search", {params: {q: search}}) : await fetchData.get("/search")
+        }
+        console.log(result.data)
+        setData(result.data)
 
-    const fetchData = async () => {
-        const res = await fetch("https://gist.githubusercontent.com/jparciga/1d4dd34fb06ba74237f8966e2e777ff5/raw/f3af25f1505deb67e2cc9ee625a633f24d8983ff/youtube-videos-mock.json")
-        const result = await res.json()
-        setData(result)
-    }
+        return function cleanup() {
+            search = ""
+        }
+    },[search])
 
-    useEffect(() => {
-        fetchData()
-        console.log(data)
-    },[])
     return (
-        <Grid templateColumns={{"md": "repeat(3, 1fr)", "sm": "repeat(1, 1fr)"}} mb={5} gap={1}>
-            {!data ? "hola" : data.items.map((item,index) => {
+        <Grid templateColumns={!list?{"md": "repeat(3, 1fr)", "sm": "repeat(1, 1fr)"}:"repeat(1, 1fr)"} mb={5} gap={1}>
+            {!data ? "hola" : data.items.map((item) => {
                 return (
-                    <Card item={item} index={index} />
+                    <Card key={item.id.videoId} item={item}/>         
                 )
             })}
         </Grid>
diff --git a/src/components/CardList/CardList.test.jsx b/src/components/CardList/CardList.test.jsx
index 7a7e9aa35..e2efa2cea 100644
--- a/src/components/CardList/CardList.test.jsx
+++ b/src/components/CardList/CardList.test.jsx
@@ -1,17 +1,31 @@
-import "@testing-library/jest-dom/extend-expect";
-const fetch = require("node-fetch");
+import "@testing-library/jest-dom/extend-expect"
+import { render, screen, cleanup, waitFor } from "@testing-library/react"
+import fetchData from "../../utils/useFetchData"
+import CardList from "./CardList"
+const useRouter = jest.spyOn(require('next/router'), 'useRouter')
 
+describe('Testing CardList', () => {
+    afterEach(cleanup)
+    it('Testing data result from API', async () => {
+        const result = await fetchData.get("/search")
+        expect(Object.keys(result).length).not.toBe(0);
+    });
+    
+    it('Testing data result from API with params', async () => {
+        const result = await fetchData.get("/search", {params: {q: "hola"}})
+        expect(Object.keys(result).length).not.toBe(0)
+    });
+    
+    it('CardList Component', async () => {
 
-const fetchData = async () => {
-    const res = await fetch("https://gist.githubusercontent.com/jparciga/1d4dd34fb06ba74237f8966e2e777ff5/raw/f3af25f1505deb67e2cc9ee625a633f24d8983ff/youtube-videos-mock.json");
-    return res;
-}
+        useRouter.mockImplementationOnce(() => ({
+            query: { search: '' },
+          }))
+
+        
+        const { container } = render(<CardList/>)
+        expect(container).toMatchSnapshot()
 
-describe('Testing CardList', () => {
-    it('Testing data result from request', async () => {
-        const result = await fetchData();
-        const obj = await result.json();
-        expect(Object.keys(obj).length).not.toBe(0);
     });
     
     
diff --git a/src/components/CardList/__snapshots__/CardList.test.jsx.snap b/src/components/CardList/__snapshots__/CardList.test.jsx.snap
new file mode 100644
index 000000000..d321f7941
--- /dev/null
+++ b/src/components/CardList/__snapshots__/CardList.test.jsx.snap
@@ -0,0 +1,11 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Testing CardList CardList Component 1`] = `
+<div>
+  <div
+    class="css-1r9y2ds"
+  >
+    hola
+  </div>
+</div>
+`;
diff --git a/src/components/Navbar/NavBar.jsx b/src/components/Navbar/NavBar.jsx
index 698c330b3..542d121e0 100644
--- a/src/components/Navbar/NavBar.jsx
+++ b/src/components/Navbar/NavBar.jsx
@@ -7,19 +7,31 @@ import React from 'react'
 import SideMenu from '../SideMenu/SideMenu'
 import { useDisclosure, Link } from "@chakra-ui/react"
 import NextLink from "next/link"
-import Title from '../Title/Title'
+import { useRouter } from 'next/router';
 
 const Navbar = () => {
+    const router = useRouter()
     const { isOpen, onOpen, onClose } = useDisclosure();
     const btnRef = React.useRef()
 
+    const submitHandler = (e) => {
+        e.key === "Enter" && router.push({
+                pathname: "/",
+                query: {search: e.target.value}
+            })
+    }
+
     return (
         <>
             <Flex bg="blue.50" alignItems={"center"}>
                 <HamburgerIcon cursor="pointer" ref={btnRef} ml="2" mr="2" onClick={onOpen} />
-                <Title/>
+                <NextLink href="/">
+                    <Link>
+                        <Text fontSize="3xl">Dutube</Text>    
+                    </Link>
+                </NextLink>
                 <Box mx="auto" w="40%">
-                    <Input bg="white" placeholder="Search..." />
+                    <Input onKeyUp={(e) => submitHandler(e)} bg="white" placeholder="Search..." />
                 </Box>
                 <Switch mr="2"/>
                 <NextLink href="/">
diff --git a/src/components/Video/Video.jsx b/src/components/Video/Video.jsx
new file mode 100644
index 000000000..f1b74fcc4
--- /dev/null
+++ b/src/components/Video/Video.jsx
@@ -0,0 +1,26 @@
+import { Box } from '@chakra-ui/layout';
+import React from 'react'
+
+const Video = ({videoId, title, description}) => {
+    const videoSrc = `https://www.youtube.com/embed/${videoId}`;
+    console.log(description)
+    return (
+        <Box maxW="70%" overflow="hidden">
+            <iframe src={videoSrc} style={{width: "100%", maxHeight: "600px", height: "500px"}}  allowFullScreen title='Video player'/>
+            <Box
+            mt="3"
+            fontWeight="semibold"
+            as="h2"
+            lineHeight="tight"
+            isTruncated
+            >
+                {title}
+            </Box>
+            <Box ml="3" as="span" color="gray.600" fontSize="sm">
+                {description}
+            </Box>
+        </Box>
+    )
+}
+
+export default Video
diff --git a/src/pages/_app.jsx b/src/pages/_app.jsx
index 120241b21..25dbe0c04 100644
--- a/src/pages/_app.jsx
+++ b/src/pages/_app.jsx
@@ -1,5 +1,5 @@
 import { ChakraProvider, ColorModeProvider } from '@chakra-ui/react'
-
+import Layout from '../components/Layout/Layout'
 import theme from '../theme'
 
 function MyApp({ Component, pageProps }) {
@@ -10,7 +10,9 @@ function MyApp({ Component, pageProps }) {
           useSystemColorMode: true,
         }}
       >
-        <Component {...pageProps} />
+        <Layout>
+          <Component {...pageProps} />
+        </Layout>
       </ColorModeProvider>
     </ChakraProvider>
   )
diff --git a/src/pages/index.jsx b/src/pages/index.jsx
index 0d1dbe80a..c84aebd94 100644
--- a/src/pages/index.jsx
+++ b/src/pages/index.jsx
@@ -1,10 +1,9 @@
 import CardList from "../components/CardList/CardList"
-import Layout from "../components/Layout/Layout"
 
 const Index = () => (
-  <Layout>
-    <CardList/>
-  </Layout>
+  
+  <CardList/>
+  
 )
 
 export default Index
diff --git a/src/pages/videoPlayer.jsx b/src/pages/videoPlayer.jsx
new file mode 100644
index 000000000..2a144c91b
--- /dev/null
+++ b/src/pages/videoPlayer.jsx
@@ -0,0 +1,29 @@
+import { Box, Flex, Text } from '@chakra-ui/layout'
+import { useRouter } from 'next/router'
+import React, { useEffect } from 'react'
+import CardList from '../components/CardList/CardList'
+import Video from '../components/Video/Video'
+
+const videoPlayer = () => {
+    const { query } = useRouter()
+    const { videoId, title, description } = query
+    
+    return (
+        <Flex>
+            <Video videoId={videoId} title={title} description={description} />
+            <Box w="sm">
+                <CardList list={true} IdVid={videoId} />
+            </Box>
+        </Flex>
+        
+            
+        
+            
+        
+        
+            
+        
+    )
+}
+
+export default videoPlayer
diff --git a/src/utils/useFetchData.js b/src/utils/useFetchData.js
new file mode 100644
index 000000000..068d296c9
--- /dev/null
+++ b/src/utils/useFetchData.js
@@ -0,0 +1,12 @@
+import axios from 'axios';
+const KEY = 'AIzaSyBLF4iEDjnWFmKrhEtIetO5qRT2aKQqO4o';
+
+export default axios.create({
+    baseURL: 'https://www.googleapis.com/youtube/v3/',
+    params: {
+        part: 'snippet',
+        maxResults: 15,
+        key: KEY,
+        type: 'video',
+    }
+})
diff --git a/yarn.lock b/yarn.lock
index 8e3c66cb3..06d157636 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -289,7 +289,7 @@
   dependencies:
     regenerator-runtime "^0.13.4"
 
-"@babel/runtime@^7.0.0", "@babel/runtime@^7.10.2", "@babel/runtime@^7.12.13", "@babel/runtime@^7.12.5", "@babel/runtime@^7.7.2", "@babel/runtime@^7.9.2":
+"@babel/runtime@^7.0.0", "@babel/runtime@^7.1.2", "@babel/runtime@^7.10.2", "@babel/runtime@^7.12.1", "@babel/runtime@^7.12.13", "@babel/runtime@^7.12.5", "@babel/runtime@^7.7.2", "@babel/runtime@^7.9.2":
   version "7.13.10"
   resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.13.10.tgz#47d42a57b6095f4468da440388fdbad8bebf0d7d"
   integrity sha512-4QPkjJq6Ns3V/RgpEahRk+AGfL0eO6RHHtTWoNNr5mO49G6B5+X6d6THgWEAvTrznU5xYpbAlVKRYcsCgh/Akw==
@@ -1651,6 +1651,13 @@ aws4@^1.8.0:
   resolved "https://registry.yarnpkg.com/aws4/-/aws4-1.11.0.tgz#d61f46d83b2519250e2784daf5b09479a8b41c59"
   integrity sha512-xh1Rl34h6Fi1DC2WWKfxUTVqRsNnr6LsKz2+hfwDxQJWmrx8+c7ylaqBMcHfl1U1r2dsifOvKX3LQuLNZ+XSvA==
 
+axios@^0.21.1:
+  version "0.21.1"
+  resolved "https://registry.yarnpkg.com/axios/-/axios-0.21.1.tgz#22563481962f4d6bde9a76d516ef0e5d3c09b2b8"
+  integrity sha512-dKQiRHxGD9PPRIUNIWvZhPTPpl1rf/OxTYKsqKUDjBwYylTvV7SjSHJb9ratfyzM6wCdLCOYLzs73qpg5c4iGA==
+  dependencies:
+    follow-redirects "^1.10.0"
+
 babel-jest@^26.6.3:
   version "26.6.3"
   resolved "https://registry.yarnpkg.com/babel-jest/-/babel-jest-26.6.3.tgz#d87d25cb0037577a0c89f82e5755c5d293c01056"
@@ -2421,6 +2428,11 @@ deep-is@~0.1.3:
   resolved "https://registry.yarnpkg.com/deep-is/-/deep-is-0.1.3.tgz#b369d6fb5dbc13eecf524f91b070feedc357cf34"
   integrity sha1-s2nW+128E+7PUk+RsHD+7cNXzzQ=
 
+deepmerge@^2.1.1:
+  version "2.2.1"
+  resolved "https://registry.yarnpkg.com/deepmerge/-/deepmerge-2.2.1.tgz#5d3ff22a01c00f645405a2fbc17d0778a1801170"
+  integrity sha512-R9hc1Xa/NOBi9WRVUWg19rl1UB7Tt4kuPd+thNJgFZoxXsTz7ncaPaeIm+40oSGuP33DfMb4sZt1QIGiJzC4EA==
+
 deepmerge@^4.2.2:
   version "4.2.2"
   resolved "https://registry.yarnpkg.com/deepmerge/-/deepmerge-4.2.2.tgz#44d2ea3679b8f4d4ffba33f03d865fc1e7bf4955"
@@ -2807,6 +2819,11 @@ focus-lock@^0.8.1:
   dependencies:
     tslib "^1.9.3"
 
+follow-redirects@^1.10.0:
+  version "1.13.3"
+  resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.13.3.tgz#e5598ad50174c1bc4e872301e82ac2cd97f90267"
+  integrity sha512-DUgl6+HDzB0iEptNQEXLx/KhTmDb8tZUHSeLqpnjpknR70H0nC2t9N73BK6fN4hOvJ84pKlIQVQ4k5FFlBedKA==
+
 for-in@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/for-in/-/for-in-1.0.2.tgz#81068d295a8142ec0ac726c6e2200c30fb6d5e80"
@@ -2826,6 +2843,19 @@ form-data@~2.3.2:
     combined-stream "^1.0.6"
     mime-types "^2.1.12"
 
+formik@^2.2.6:
+  version "2.2.6"
+  resolved "https://registry.yarnpkg.com/formik/-/formik-2.2.6.tgz#378a4bafe4b95caf6acf6db01f81f3fe5147559d"
+  integrity sha512-Kxk2zQRafy56zhLmrzcbryUpMBvT0tal5IvcifK5+4YNGelKsnrODFJ0sZQRMQboblWNym4lAW3bt+tf2vApSA==
+  dependencies:
+    deepmerge "^2.1.1"
+    hoist-non-react-statics "^3.3.0"
+    lodash "^4.17.14"
+    lodash-es "^4.17.14"
+    react-fast-compare "^2.0.1"
+    tiny-warning "^1.0.2"
+    tslib "^1.10.0"
+
 fragment-cache@^0.2.1:
   version "0.2.1"
   resolved "https://registry.yarnpkg.com/fragment-cache/-/fragment-cache-0.2.1.tgz#4290fad27f13e89be7f33799c6bc5a0abfff0d19"
@@ -3048,6 +3078,18 @@ hey-listen@^1.0.5, hey-listen@^1.0.8:
   resolved "https://registry.yarnpkg.com/hey-listen/-/hey-listen-1.0.8.tgz#8e59561ff724908de1aa924ed6ecc84a56a9aa68"
   integrity sha512-COpmrF2NOg4TBWUJ5UVyaCU2A88wEMkUPK4hNqyCkqHbxT92BbvfjoSozkAIIm6XhicGlJHhFdullInrdhwU8Q==
 
+history@^4.9.0:
+  version "4.10.1"
+  resolved "https://registry.yarnpkg.com/history/-/history-4.10.1.tgz#33371a65e3a83b267434e2b3f3b1b4c58aad4cf3"
+  integrity sha512-36nwAD620w12kuzPAsyINPWJqlNbij+hpK1k9XRloDtym8mxzGYl2c17LnV6IAGB2Dmg4tEa7G7DlawS0+qjew==
+  dependencies:
+    "@babel/runtime" "^7.1.2"
+    loose-envify "^1.2.0"
+    resolve-pathname "^3.0.0"
+    tiny-invariant "^1.0.2"
+    tiny-warning "^1.0.0"
+    value-equal "^1.0.1"
+
 hmac-drbg@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/hmac-drbg/-/hmac-drbg-1.0.1.tgz#d2745701025a6c775a6c545793ed502fc0c649a1"
@@ -3057,7 +3099,7 @@ hmac-drbg@^1.0.1:
     minimalistic-assert "^1.0.0"
     minimalistic-crypto-utils "^1.0.1"
 
-hoist-non-react-statics@^3.0.0, hoist-non-react-statics@^3.3.1:
+hoist-non-react-statics@^3.0.0, hoist-non-react-statics@^3.1.0, hoist-non-react-statics@^3.3.0, hoist-non-react-statics@^3.3.1:
   version "3.3.2"
   resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz#ece0acaf71d62c2969c2ec59feff42a4b1a85b45"
   integrity sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==
@@ -3346,6 +3388,11 @@ is-wsl@^2.2.0:
   dependencies:
     is-docker "^2.0.0"
 
+isarray@0.0.1:
+  version "0.0.1"
+  resolved "https://registry.yarnpkg.com/isarray/-/isarray-0.0.1.tgz#8a18acfca9a8f4177e09abfc6038939b05d1eedf"
+  integrity sha1-ihis/Kmo9Bd+Cav8YDiTmwXR7t8=
+
 isarray@1.0.0, isarray@^1.0.0, isarray@~1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/isarray/-/isarray-1.0.0.tgz#bb935d48582cba168c06834957a54a3e07124f11"
@@ -3970,6 +4017,11 @@ locate-path@^5.0.0:
   dependencies:
     p-locate "^4.1.0"
 
+lodash-es@^4.17.14:
+  version "4.17.21"
+  resolved "https://registry.yarnpkg.com/lodash-es/-/lodash-es-4.17.21.tgz#43e626c46e6591b7750beb2b50117390c609e3ee"
+  integrity sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw==
+
 lodash.mergewith@4.6.2:
   version "4.6.2"
   resolved "https://registry.yarnpkg.com/lodash.mergewith/-/lodash.mergewith-4.6.2.tgz#617121f89ac55f59047c7aec1ccd6654c6590f55"
@@ -3980,12 +4032,12 @@ lodash.sortby@^4.7.0:
   resolved "https://registry.yarnpkg.com/lodash.sortby/-/lodash.sortby-4.7.0.tgz#edd14c824e2cc9c1e0b0a1b42bb5210516a42438"
   integrity sha1-7dFMgk4sycHgsKG0K7UhBRakJDg=
 
-lodash@^4.17.11, lodash@^4.17.13, lodash@^4.17.15, lodash@^4.17.19:
+lodash@^4.17.11, lodash@^4.17.13, lodash@^4.17.14, lodash@^4.17.15, lodash@^4.17.19:
   version "4.17.21"
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c"
   integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==
 
-loose-envify@^1.0.0, loose-envify@^1.1.0, loose-envify@^1.4.0:
+loose-envify@^1.0.0, loose-envify@^1.1.0, loose-envify@^1.2.0, loose-envify@^1.3.1, loose-envify@^1.4.0:
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/loose-envify/-/loose-envify-1.4.0.tgz#71ee51fa7be4caec1a63839f7e682d8132d30caf"
   integrity sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==
@@ -4101,6 +4153,14 @@ min-indent@^1.0.0:
   resolved "https://registry.yarnpkg.com/min-indent/-/min-indent-1.0.1.tgz#a63f681673b30571fbe8bc25686ae746eefa9869"
   integrity sha512-I9jwMn07Sy/IwOj3zVkVik2JTvgpaykDZEigL6Rx6N9LbMywwUSMtxET+7lVoDLLd3O3IXwJwvuuns8UB/HeAg==
 
+mini-create-react-context@^0.4.0:
+  version "0.4.1"
+  resolved "https://registry.yarnpkg.com/mini-create-react-context/-/mini-create-react-context-0.4.1.tgz#072171561bfdc922da08a60c2197a497cc2d1d5e"
+  integrity sha512-YWCYEmd5CQeHGSAKrYvXgmzzkrvssZcuuQDDeqkT+PziKGMgE+0MCCtcKbROzocGBG1meBLl2FotlRwf4gAzbQ==
+  dependencies:
+    "@babel/runtime" "^7.12.1"
+    tiny-warning "^1.0.3"
+
 minimalistic-assert@^1.0.0, minimalistic-assert@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/minimalistic-assert/-/minimalistic-assert-1.0.1.tgz#2e194de044626d4a10e7f7fbc00ce73e83e4d5c7"
@@ -4510,6 +4570,13 @@ path-parse@^1.0.6:
   resolved "https://registry.yarnpkg.com/path-parse/-/path-parse-1.0.6.tgz#d62dbb5679405d72c4737ec58600e9ddcf06d24c"
   integrity sha512-GSmOT2EbHrINBf9SR7CDELwlJ8AENk3Qn7OikK4nFYAu3Ote2+JYNVvkpAEQm3/TLNEJFD/xZJjzyxg3KBWOzw==
 
+path-to-regexp@^1.7.0:
+  version "1.8.0"
+  resolved "https://registry.yarnpkg.com/path-to-regexp/-/path-to-regexp-1.8.0.tgz#887b3ba9d84393e87a0a0b9f4cb756198b53548a"
+  integrity sha512-n43JRhlUKUAlibEJhPeir1ncUID16QnEjNpwzNdO3Lm4ywrBpBZ5oLD0I6br9evr1Y9JTqwRtAh7JLoOzAQdVA==
+  dependencies:
+    isarray "0.0.1"
+
 path-type@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/path-type/-/path-type-4.0.0.tgz#84ed01c0a7ba380afe09d90a8c180dcd9d03043b"
@@ -4749,6 +4816,11 @@ react-fast-compare@3.2.0:
   resolved "https://registry.yarnpkg.com/react-fast-compare/-/react-fast-compare-3.2.0.tgz#641a9da81b6a6320f270e89724fb45a0b39e43bb"
   integrity sha512-rtGImPZ0YyLrscKI9xTpV8psd6I8VAtjKCzQDlzyDvqJA8XOW78TXYQwNRNd8g8JZnDu8q9Fu/1v4HPAVwVdHA==
 
+react-fast-compare@^2.0.1:
+  version "2.0.4"
+  resolved "https://registry.yarnpkg.com/react-fast-compare/-/react-fast-compare-2.0.4.tgz#e84b4d455b0fec113e0402c329352715196f81f9"
+  integrity sha512-suNP+J1VU1MWFKcyt7RtjiSWUjvidmQSlqu+eHslq+342xCbGTYmC0mEhPCOHxlW0CywylOC1u2DFAT+bv4dBw==
+
 react-focus-lock@2.5.0:
   version "2.5.0"
   resolved "https://registry.yarnpkg.com/react-focus-lock/-/react-focus-lock-2.5.0.tgz#12e3a3940e897c26e2c2a0408cd25ea3c99b3709"
@@ -4766,7 +4838,7 @@ react-icons@^4.2.0:
   resolved "https://registry.yarnpkg.com/react-icons/-/react-icons-4.2.0.tgz#6dda80c8a8f338ff96a1851424d63083282630d0"
   integrity sha512-rmzEDFt+AVXRzD7zDE21gcxyBizD/3NqjbX6cmViAgdqfJ2UiLer8927/QhhrXQV7dEj/1EGuOTPp7JnLYVJKQ==
 
-react-is@16.13.1, react-is@^16.7.0, react-is@^16.8.1:
+react-is@16.13.1, react-is@^16.6.0, react-is@^16.7.0, react-is@^16.8.1:
   version "16.13.1"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
   integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==
@@ -4800,6 +4872,35 @@ react-remove-scroll@2.4.1:
     use-callback-ref "^1.2.3"
     use-sidecar "^1.0.1"
 
+react-router-dom@^5.2.0:
+  version "5.2.0"
+  resolved "https://registry.yarnpkg.com/react-router-dom/-/react-router-dom-5.2.0.tgz#9e65a4d0c45e13289e66c7b17c7e175d0ea15662"
+  integrity sha512-gxAmfylo2QUjcwxI63RhQ5G85Qqt4voZpUXSEqCwykV0baaOTQDR1f0PmY8AELqIyVc0NEZUj0Gov5lNGcXgsA==
+  dependencies:
+    "@babel/runtime" "^7.1.2"
+    history "^4.9.0"
+    loose-envify "^1.3.1"
+    prop-types "^15.6.2"
+    react-router "5.2.0"
+    tiny-invariant "^1.0.2"
+    tiny-warning "^1.0.0"
+
+react-router@5.2.0:
+  version "5.2.0"
+  resolved "https://registry.yarnpkg.com/react-router/-/react-router-5.2.0.tgz#424e75641ca8747fbf76e5ecca69781aa37ea293"
+  integrity sha512-smz1DUuFHRKdcJC0jobGo8cVbhO3x50tCL4icacOlcwDOEQPq4TMqwx3sY1TP+DvtTgz4nm3thuo7A+BK2U0Dw==
+  dependencies:
+    "@babel/runtime" "^7.1.2"
+    history "^4.9.0"
+    hoist-non-react-statics "^3.1.0"
+    loose-envify "^1.3.1"
+    mini-create-react-context "^0.4.0"
+    path-to-regexp "^1.7.0"
+    prop-types "^15.6.2"
+    react-is "^16.6.0"
+    tiny-invariant "^1.0.2"
+    tiny-warning "^1.0.0"
+
 react-style-singleton@^2.1.0:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/react-style-singleton/-/react-style-singleton-2.1.1.tgz#ce7f90b67618be2b6b94902a30aaea152ce52e66"
@@ -4970,6 +5071,11 @@ resolve-from@^5.0.0:
   resolved "https://registry.yarnpkg.com/resolve-from/-/resolve-from-5.0.0.tgz#c35225843df8f776df21c57557bc087e9dfdfc69"
   integrity sha512-qYg9KP24dD5qka9J47d0aVky0N+b4fTU89LN9iDnjB5waksiC49rvMB0PrUJQGoTmH50XPiqOvAjDfaijGxYZw==
 
+resolve-pathname@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/resolve-pathname/-/resolve-pathname-3.0.0.tgz#99d02224d3cf263689becbb393bc560313025dcd"
+  integrity sha512-C7rARubxI8bXFNB/hqcp/4iUeIXJhJZvFPFPiSPRnhU5UPxzMFIl+2E6yY6c4k9giDJAhtV+enfA+G89N6Csng==
+
 resolve-url@^0.2.1:
   version "0.2.1"
   resolved "https://registry.yarnpkg.com/resolve-url/-/resolve-url-0.2.1.tgz#2c637fe77c893afd2a663fe21aa9080068e2052a"
@@ -5548,11 +5654,16 @@ timers-browserify@^2.0.4:
   dependencies:
     setimmediate "^1.0.4"
 
-tiny-invariant@^1.0.6:
+tiny-invariant@^1.0.2, tiny-invariant@^1.0.6:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/tiny-invariant/-/tiny-invariant-1.1.0.tgz#634c5f8efdc27714b7f386c35e6760991d230875"
   integrity sha512-ytxQvrb1cPc9WBEI/HSeYYoGD0kWnGEOR8RY6KomWLBVhqz0RgTwVO9dLrGz7dC+nN9llyI7OKAgRq8Vq4ZBSw==
 
+tiny-warning@^1.0.0, tiny-warning@^1.0.2, tiny-warning@^1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/tiny-warning/-/tiny-warning-1.0.3.tgz#94a30db453df4c643d0fd566060d60a875d84754"
+  integrity sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA==
+
 tinycolor2@1.4.2:
   version "1.4.2"
   resolved "https://registry.yarnpkg.com/tinycolor2/-/tinycolor2-1.4.2.tgz#3f6a4d1071ad07676d7fa472e1fac40a719d8803"
@@ -5836,6 +5947,11 @@ validate-npm-package-license@^3.0.1:
     spdx-correct "^3.0.0"
     spdx-expression-parse "^3.0.0"
 
+value-equal@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/value-equal/-/value-equal-1.0.1.tgz#1e0b794c734c5c0cade179c437d356d931a34d6c"
+  integrity sha512-NOJ6JZCAWr0zlxZt+xqCHNTEKOsrks2HQd4MqhP1qy4z1SkbEP467eNx6TgDKXMvUOb+OENfJCZwM+16n7fRfw==
+
 verror@1.10.0:
   version "1.10.0"
   resolved "https://registry.yarnpkg.com/verror/-/verror-1.10.0.tgz#3a105ca17053af55d6e270c1f8288682e18da400"