diff --git a/package.json b/package.json
index 5bc0e0d0d..024d55363 100644
--- a/package.json
+++ b/package.json
@@ -3,6 +3,8 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@material-ui/core": "^4.11.3",
+    "@material-ui/icons": "^4.11.2",
     "@testing-library/jest-dom": "^5.11.4",
     "@testing-library/react": "^10.4.9",
     "@testing-library/user-event": "^12.1.3",
diff --git a/src/components/App/App.component.jsx b/src/components/App/App.component.jsx
index e372d6849..52750a815 100644
--- a/src/components/App/App.component.jsx
+++ b/src/components/App/App.component.jsx
@@ -2,7 +2,7 @@ import React, { useLayoutEffect } from 'react';
 import { BrowserRouter, Switch, Route } from 'react-router-dom';
 
 import AuthProvider from '../../providers/Auth';
-import HomePage from '../../pages/Home';
+import Home from '../../pages/Home';
 import LoginPage from '../../pages/Login';
 import NotFound from '../../pages/NotFound';
 import SecretPage from '../../pages/Secret';
@@ -36,7 +36,7 @@ function App() {
         <Layout>
           <Switch>
             <Route exact path="/">
-              <HomePage />
+              <Home />
             </Route>
             <Route exact path="/login">
               <LoginPage />
diff --git a/src/components/Layout/Layout.styles.css b/src/components/Layout/Layout.styles.css
index e873b7c07..16cbec806 100644
--- a/src/components/Layout/Layout.styles.css
+++ b/src/components/Layout/Layout.styles.css
@@ -1,3 +1,4 @@
+/*
 .container {
   width: 100vw;
   height: 100vh;
@@ -7,3 +8,4 @@
   align-items: center;
   margin-top: -3rem;
 }
+*/
\ No newline at end of file
diff --git a/src/mocks/youtube-videos-mock.json b/src/mocks/youtube-videos-mock.json
new file mode 100644
index 000000000..123b407f8
--- /dev/null
+++ b/src/mocks/youtube-videos-mock.json
@@ -0,0 +1,856 @@
+{
+    "kind": "youtube#searchListResponse",
+    "etag": "LRviZfd_p3HDDD2uBk5Qv7zaEQU",
+    "nextPageToken": "CBkQAA",
+    "regionCode": "MX",
+    "pageInfo": {
+      "totalResults": 2323,
+      "resultsPerPage": 25
+    },
+    "items": [
+      {
+        "kind": "youtube#searchResult",
+        "etag": "_PVKwNJf_qw9nukFeRFOtQ837o0",
+        "id": {
+          "kind": "youtube#channel",
+          "channelId": "UCPGzT4wecuWM0BH9mPiulXg"
+        },
+        "snippet": {
+          "publishedAt": "2014-09-27T01:39:18Z",
+          "channelId": "UCPGzT4wecuWM0BH9mPiulXg",
+          "title": "Wizeline",
+          "description": "Wizeline transforms how teams build technology. Its customers accelerate the delivery of innovative products with proven solutions, which combine Wizeline's ...",
+          "thumbnails": {
+            "default": {
+              "url": "https://yt3.ggpht.com/ytc/AAUvwnighSReQlmHl_S_vSfvnWBAG5Cw4A0YxtE0tm5OpQ=s88-c-k-c0xffffffff-no-rj-mo"
+            },
+            "medium": {
+              "url": "https://yt3.ggpht.com/ytc/AAUvwnighSReQlmHl_S_vSfvnWBAG5Cw4A0YxtE0tm5OpQ=s240-c-k-c0xffffffff-no-rj-mo"
+            },
+            "high": {
+              "url": "https://yt3.ggpht.com/ytc/AAUvwnighSReQlmHl_S_vSfvnWBAG5Cw4A0YxtE0tm5OpQ=s800-c-k-c0xffffffff-no-rj-mo"
+            }
+          },
+          "channelTitle": "Wizeline",
+          "liveBroadcastContent": "upcoming",
+          "publishTime": "2014-09-27T01:39:18Z"
+        }
+      },
+      {
+        "kind": "youtube#searchResult",
+        "etag": "erqeM78PZDWIBe8qOGHGM2WdSE8",
+        "id": {
+          "kind": "youtube#video",
+          "videoId": "nmXMgqjQzls"
+        },
+        "snippet": {
+          "publishedAt": "2019-09-30T23:54:32Z",
+          "channelId": "UCPGzT4wecuWM0BH9mPiulXg",
+          "title": "Video Tour | Welcome to Wizeline Guadalajara",
+          "description": "Follow Hector Padilla, Wizeline Director of Engineering, for a lively tour of our office. In 2018, Wizeline opened its stunning new office in Guadalajara, Jalisco, ...",
+          "thumbnails": {
+            "default": {
+              "url": "https://i.ytimg.com/vi/nmXMgqjQzls/default.jpg",
+              "width": 120,
+              "height": 90
+            },
+            "medium": {
+              "url": "https://i.ytimg.com/vi/nmXMgqjQzls/mqdefault.jpg",
+              "width": 320,
+              "height": 180
+            },
+            "high": {
+              "url": "https://i.ytimg.com/vi/nmXMgqjQzls/hqdefault.jpg",
+              "width": 480,
+              "height": 360
+            }
+          },
+          "channelTitle": "Wizeline",
+          "liveBroadcastContent": "none",
+          "publishTime": "2019-09-30T23:54:32Z"
+        }
+      },
+      {
+        "kind": "youtube#searchResult",
+        "etag": "7VY0u60YdqamyHOCAufd7r6qTsQ",
+        "id": {
+          "kind": "youtube#video",
+          "videoId": "HYyRZiwBWc8"
+        },
+        "snippet": {
+          "publishedAt": "2019-04-18T18:48:04Z",
+          "channelId": "UCPGzT4wecuWM0BH9mPiulXg",
+          "title": "Wizeline Guadalajara | Bringing Silicon Valley to Mexico",
+          "description": "Wizeline continues to offer a Silicon Valley culture in burgeoning innovation hubs like Mexico and Vietnam. In 2018, our Guadalajara team moved into a ...",
+          "thumbnails": {
+            "default": {
+              "url": "https://i.ytimg.com/vi/HYyRZiwBWc8/default.jpg",
+              "width": 120,
+              "height": 90
+            },
+            "medium": {
+              "url": "https://i.ytimg.com/vi/HYyRZiwBWc8/mqdefault.jpg",
+              "width": 320,
+              "height": 180
+            },
+            "high": {
+              "url": "https://i.ytimg.com/vi/HYyRZiwBWc8/hqdefault.jpg",
+              "width": 480,
+              "height": 360
+            }
+          },
+          "channelTitle": "Wizeline",
+          "liveBroadcastContent": "none",
+          "publishTime": "2019-04-18T18:48:04Z"
+        }
+      },
+      {
+        "kind": "youtube#searchResult",
+        "etag": "by0t_nrT2TB-IQkQpgSWUVUwpKI",
+        "id": {
+          "kind": "youtube#video",
+          "videoId": "Po3VwR_NNGk"
+        },
+        "snippet": {
+          "publishedAt": "2019-03-05T03:52:55Z",
+          "channelId": "UCXmAOGwFYxIq5qrScJeeV4g",
+          "title": "Wizeline hace sentir a empleados como en casa",
+          "description": "En el 2014, Bismarck fundó Wizeline, compañía tecnológica que trabaja con los corporativos ofreciendo una plataforma para que desarrollen software de forma ...",
+          "thumbnails": {
+            "default": {
+              "url": "https://i.ytimg.com/vi/Po3VwR_NNGk/default.jpg",
+              "width": 120,
+              "height": 90
+            },
+            "medium": {
+              "url": "https://i.ytimg.com/vi/Po3VwR_NNGk/mqdefault.jpg",
+              "width": 320,
+              "height": 180
+            },
+            "high": {
+              "url": "https://i.ytimg.com/vi/Po3VwR_NNGk/hqdefault.jpg",
+              "width": 480,
+              "height": 360
+            }
+          },
+          "channelTitle": "El Economista TV",
+          "liveBroadcastContent": "none",
+          "publishTime": "2019-03-05T03:52:55Z"
+        }
+      },
+      {
+        "kind": "youtube#searchResult",
+        "etag": "9-Ag8hUNYBLTjuli6eECa5GXV1Y",
+        "id": {
+          "kind": "youtube#video",
+          "videoId": "7PtYNO6g7eI"
+        },
+        "snippet": {
+          "publishedAt": "2019-04-12T20:00:45Z",
+          "channelId": "UCPGzT4wecuWM0BH9mPiulXg",
+          "title": "We Are Wizeline",
+          "description": "Engineering a better tomorrow. Wizeline is a global software development company that helps its clients solve their biggest challenges with design and ...",
+          "thumbnails": {
+            "default": {
+              "url": "https://i.ytimg.com/vi/7PtYNO6g7eI/default.jpg",
+              "width": 120,
+              "height": 90
+            },
+            "medium": {
+              "url": "https://i.ytimg.com/vi/7PtYNO6g7eI/mqdefault.jpg",
+              "width": 320,
+              "height": 180
+            },
+            "high": {
+              "url": "https://i.ytimg.com/vi/7PtYNO6g7eI/hqdefault.jpg",
+              "width": 480,
+              "height": 360
+            }
+          },
+          "channelTitle": "Wizeline",
+          "liveBroadcastContent": "none",
+          "publishTime": "2019-04-12T20:00:45Z"
+        }
+      },
+      {
+        "kind": "youtube#searchResult",
+        "etag": "pVQGVs72zHvpgl0ewNKX2DTOH6w",
+        "id": {
+          "kind": "youtube#video",
+          "videoId": "YuW0CE_8i1I"
+        },
+        "snippet": {
+          "publishedAt": "2018-12-13T21:51:39Z",
+          "channelId": "UCPGzT4wecuWM0BH9mPiulXg",
+          "title": "Wizeline Thrives in Mexico City",
+          "description": "Our vibrant Mexico City office is home to agile software engineers, talented UX designers, and brilliant data scientists. Learn about the rich history of Mexico City.",
+          "thumbnails": {
+            "default": {
+              "url": "https://i.ytimg.com/vi/YuW0CE_8i1I/default.jpg",
+              "width": 120,
+              "height": 90
+            },
+            "medium": {
+              "url": "https://i.ytimg.com/vi/YuW0CE_8i1I/mqdefault.jpg",
+              "width": 320,
+              "height": 180
+            },
+            "high": {
+              "url": "https://i.ytimg.com/vi/YuW0CE_8i1I/hqdefault.jpg",
+              "width": 480,
+              "height": 360
+            }
+          },
+          "channelTitle": "Wizeline",
+          "liveBroadcastContent": "none",
+          "publishTime": "2018-12-13T21:51:39Z"
+        }
+      },
+      {
+        "kind": "youtube#searchResult",
+        "etag": "HlSqzTYW4HGFDNAOPCs6nIRXdq8",
+        "id": {
+          "kind": "youtube#video",
+          "videoId": "CHzlSGRvWPs"
+        },
+        "snippet": {
+          "publishedAt": "2017-03-08T22:41:43Z",
+          "channelId": "UCUsm-fannqOY02PNN67C0KA",
+          "title": "Wizeline",
+          "description": "El plan de Wizeline, una empresa de inteligencia artificial, para ayudar a crecer la comunidad de ciencia de datos en CDMX y todo el país, a través de cursos ...",
+          "thumbnails": {
+            "default": {
+              "url": "https://i.ytimg.com/vi/CHzlSGRvWPs/default.jpg",
+              "width": 120,
+              "height": 90
+            },
+            "medium": {
+              "url": "https://i.ytimg.com/vi/CHzlSGRvWPs/mqdefault.jpg",
+              "width": 320,
+              "height": 180
+            },
+            "high": {
+              "url": "https://i.ytimg.com/vi/CHzlSGRvWPs/hqdefault.jpg",
+              "width": 480,
+              "height": 360
+            }
+          },
+          "channelTitle": "Noticieros Televisa",
+          "liveBroadcastContent": "none",
+          "publishTime": "2017-03-08T22:41:43Z"
+        }
+      },
+      {
+        "kind": "youtube#searchResult",
+        "etag": "S1Ewc2IMjGC1VE5mH3AryZ43IPQ",
+        "id": {
+          "kind": "youtube#video",
+          "videoId": "cjO2fJy8asM"
+        },
+        "snippet": {
+          "publishedAt": "2018-09-25T17:45:19Z",
+          "channelId": "UCPGzT4wecuWM0BH9mPiulXg",
+          "title": "A Day in the Life of an Engineering Manager at Wizeline",
+          "description": "Fernando Espinoza shares his experience working as an engineering manager at Wizeline and mentoring other engineers. Learn about Fernando's passions ...",
+          "thumbnails": {
+            "default": {
+              "url": "https://i.ytimg.com/vi/cjO2fJy8asM/default.jpg",
+              "width": 120,
+              "height": 90
+            },
+            "medium": {
+              "url": "https://i.ytimg.com/vi/cjO2fJy8asM/mqdefault.jpg",
+              "width": 320,
+              "height": 180
+            },
+            "high": {
+              "url": "https://i.ytimg.com/vi/cjO2fJy8asM/hqdefault.jpg",
+              "width": 480,
+              "height": 360
+            }
+          },
+          "channelTitle": "Wizeline",
+          "liveBroadcastContent": "none",
+          "publishTime": "2018-09-25T17:45:19Z"
+        }
+      },
+      {
+        "kind": "youtube#searchResult",
+        "etag": "jZZv6Ufu43kg1KzFlBOWDVKfPkY",
+        "id": {
+          "kind": "youtube#video",
+          "videoId": "zClI9OjgKXM"
+        },
+        "snippet": {
+          "publishedAt": "2020-04-24T20:22:17Z",
+          "channelId": "UCPGzT4wecuWM0BH9mPiulXg",
+          "title": "Wizeline Technical Writing Academy | Featuring Eduardo Ocejo",
+          "description": "",
+          "thumbnails": {
+            "default": {
+              "url": "https://i.ytimg.com/vi/zClI9OjgKXM/default.jpg",
+              "width": 120,
+              "height": 90
+            },
+            "medium": {
+              "url": "https://i.ytimg.com/vi/zClI9OjgKXM/mqdefault.jpg",
+              "width": 320,
+              "height": 180
+            },
+            "high": {
+              "url": "https://i.ytimg.com/vi/zClI9OjgKXM/hqdefault.jpg",
+              "width": 480,
+              "height": 360
+            }
+          },
+          "channelTitle": "Wizeline",
+          "liveBroadcastContent": "none",
+          "publishTime": "2020-04-24T20:22:17Z"
+        }
+      },
+      {
+        "kind": "youtube#searchResult",
+        "etag": "z5o2tIUROuWNZU5-1pzMPjoqQC8",
+        "id": {
+          "kind": "youtube#video",
+          "videoId": "8bz9R61oY5o"
+        },
+        "snippet": {
+          "publishedAt": "2019-09-26T15:28:46Z",
+          "channelId": "UCUP6qv-_EIL0hwTsJaKYnvw",
+          "title": "Silicon Valley en México",
+          "description": "Empresas de Silicon Valley buscan establecerse en México por el gran talento que hay en nuestro país. Es una investigación de Roberto Domínguez.",
+          "thumbnails": {
+            "default": {
+              "url": "https://i.ytimg.com/vi/8bz9R61oY5o/default.jpg",
+              "width": 120,
+              "height": 90
+            },
+            "medium": {
+              "url": "https://i.ytimg.com/vi/8bz9R61oY5o/mqdefault.jpg",
+              "width": 320,
+              "height": 180
+            },
+            "high": {
+              "url": "https://i.ytimg.com/vi/8bz9R61oY5o/hqdefault.jpg",
+              "width": 480,
+              "height": 360
+            }
+          },
+          "channelTitle": "Azteca Noticias",
+          "liveBroadcastContent": "none",
+          "publishTime": "2019-09-26T15:28:46Z"
+        }
+      },
+      {
+        "kind": "youtube#searchResult",
+        "etag": "Q4bqsw7kAYe6PV1sh494TQ-UJ8c",
+        "id": {
+          "kind": "youtube#video",
+          "videoId": "7dJFraOqcoQ"
+        },
+        "snippet": {
+          "publishedAt": "2019-07-02T17:40:20Z",
+          "channelId": "UCPGzT4wecuWM0BH9mPiulXg",
+          "title": "Why Wizeline? featuring Juan Pablo Villa in Mexico City",
+          "description": "Juan Pablo, known as Gianpa at Wizeline, is a software engineer in our Mexico City office. Gianpa focuses on Android apps, is an integral part of our culture, ...",
+          "thumbnails": {
+            "default": {
+              "url": "https://i.ytimg.com/vi/7dJFraOqcoQ/default.jpg",
+              "width": 120,
+              "height": 90
+            },
+            "medium": {
+              "url": "https://i.ytimg.com/vi/7dJFraOqcoQ/mqdefault.jpg",
+              "width": 320,
+              "height": 180
+            },
+            "high": {
+              "url": "https://i.ytimg.com/vi/7dJFraOqcoQ/hqdefault.jpg",
+              "width": 480,
+              "height": 360
+            }
+          },
+          "channelTitle": "Wizeline",
+          "liveBroadcastContent": "none",
+          "publishTime": "2019-07-02T17:40:20Z"
+        }
+      },
+      {
+        "kind": "youtube#searchResult",
+        "etag": "cXSMV8jX2lv1ue3UUnbW3xCmIU4",
+        "id": {
+          "kind": "youtube#video",
+          "videoId": "w-Qwc_XJrWc"
+        },
+        "snippet": {
+          "publishedAt": "2020-12-31T16:26:44Z",
+          "channelId": "UCPGzT4wecuWM0BH9mPiulXg",
+          "title": "Wizeline&#39;s 2020 Year in Review",
+          "description": "There's no doubt that 2020 has been an unprecedented year. However, amidst all the chaos, we achieved remarkable growth in various areas of our business.",
+          "thumbnails": {
+            "default": {
+              "url": "https://i.ytimg.com/vi/w-Qwc_XJrWc/default.jpg",
+              "width": 120,
+              "height": 90
+            },
+            "medium": {
+              "url": "https://i.ytimg.com/vi/w-Qwc_XJrWc/mqdefault.jpg",
+              "width": 320,
+              "height": 180
+            },
+            "high": {
+              "url": "https://i.ytimg.com/vi/w-Qwc_XJrWc/hqdefault.jpg",
+              "width": 480,
+              "height": 360
+            }
+          },
+          "channelTitle": "Wizeline",
+          "liveBroadcastContent": "none",
+          "publishTime": "2020-12-31T16:26:44Z"
+        }
+      },
+      {
+        "kind": "youtube#searchResult",
+        "etag": "j9q9-dcRhTRDr0MCkJUMKdYt7u8",
+        "id": {
+          "kind": "youtube#video",
+          "videoId": "rjir_cHTl5w"
+        },
+        "snippet": {
+          "publishedAt": "2019-04-29T20:37:26Z",
+          "channelId": "UCPGzT4wecuWM0BH9mPiulXg",
+          "title": "Why Wizeline? featuring Hugo Lopez in Mexico City",
+          "description": "",
+          "thumbnails": {
+            "default": {
+              "url": "https://i.ytimg.com/vi/rjir_cHTl5w/default.jpg",
+              "width": 120,
+              "height": 90
+            },
+            "medium": {
+              "url": "https://i.ytimg.com/vi/rjir_cHTl5w/mqdefault.jpg",
+              "width": 320,
+              "height": 180
+            },
+            "high": {
+              "url": "https://i.ytimg.com/vi/rjir_cHTl5w/hqdefault.jpg",
+              "width": 480,
+              "height": 360
+            }
+          },
+          "channelTitle": "Wizeline",
+          "liveBroadcastContent": "none",
+          "publishTime": "2019-04-29T20:37:26Z"
+        }
+      },
+      {
+        "kind": "youtube#searchResult",
+        "etag": "MYfT5K8aZNvalrm2RR_HtylFffc",
+        "id": {
+          "kind": "youtube#video",
+          "videoId": "DcFK1x3NHGY"
+        },
+        "snippet": {
+          "publishedAt": "2016-09-01T18:02:11Z",
+          "channelId": "UCPGzT4wecuWM0BH9mPiulXg",
+          "title": "Why Wizeline? (We&#39;re Hiring in Mexico!)",
+          "description": "A quick look at why people join Wizeline, what motivates us as a team and what it's like to work in our Guadalajara office. Learn more and apply here: ...",
+          "thumbnails": {
+            "default": {
+              "url": "https://i.ytimg.com/vi/DcFK1x3NHGY/default.jpg",
+              "width": 120,
+              "height": 90
+            },
+            "medium": {
+              "url": "https://i.ytimg.com/vi/DcFK1x3NHGY/mqdefault.jpg",
+              "width": 320,
+              "height": 180
+            },
+            "high": {
+              "url": "https://i.ytimg.com/vi/DcFK1x3NHGY/hqdefault.jpg",
+              "width": 480,
+              "height": 360
+            }
+          },
+          "channelTitle": "Wizeline",
+          "liveBroadcastContent": "none",
+          "publishTime": "2016-09-01T18:02:11Z"
+        }
+      },
+      {
+        "kind": "youtube#searchResult",
+        "etag": "8dssV5QkZWEMmoo4DIq0k27aoIg",
+        "id": {
+          "kind": "youtube#video",
+          "videoId": "3BzYWAqZgFw"
+        },
+        "snippet": {
+          "publishedAt": "2019-07-02T17:45:28Z",
+          "channelId": "UCPGzT4wecuWM0BH9mPiulXg",
+          "title": "Why Wizeline? featuring Oswaldo Herrera in Mexico City",
+          "description": "Oswaldo is a software engineering in Wizeline's Mexico City office. He joined Wizeline because of the camaraderie and deep sense of commitment of our teams.",
+          "thumbnails": {
+            "default": {
+              "url": "https://i.ytimg.com/vi/3BzYWAqZgFw/default.jpg",
+              "width": 120,
+              "height": 90
+            },
+            "medium": {
+              "url": "https://i.ytimg.com/vi/3BzYWAqZgFw/mqdefault.jpg",
+              "width": 320,
+              "height": 180
+            },
+            "high": {
+              "url": "https://i.ytimg.com/vi/3BzYWAqZgFw/hqdefault.jpg",
+              "width": 480,
+              "height": 360
+            }
+          },
+          "channelTitle": "Wizeline",
+          "liveBroadcastContent": "none",
+          "publishTime": "2019-07-02T17:45:28Z"
+        }
+      },
+      {
+        "kind": "youtube#searchResult",
+        "etag": "FMbfPlflDyPx4UgcA42igb97xlk",
+        "id": {
+          "kind": "youtube#video",
+          "videoId": "3KVFmT-Tp2w"
+        },
+        "snippet": {
+          "publishedAt": "2019-02-11T17:55:19Z",
+          "channelId": "UCd6MoB9NC6uYN2grvUNT-Zg",
+          "title": "Caso de Éxito AWS: Wizeline [Spanish]",
+          "description": "Central de socios de APN - https://amzn.to/2S7tIXM Fundada en 2014, Wizeline es una compañía joven e innovadora que nació en la nube para ofrecer soporte ...",
+          "thumbnails": {
+            "default": {
+              "url": "https://i.ytimg.com/vi/3KVFmT-Tp2w/default.jpg",
+              "width": 120,
+              "height": 90
+            },
+            "medium": {
+              "url": "https://i.ytimg.com/vi/3KVFmT-Tp2w/mqdefault.jpg",
+              "width": 320,
+              "height": 180
+            },
+            "high": {
+              "url": "https://i.ytimg.com/vi/3KVFmT-Tp2w/hqdefault.jpg",
+              "width": 480,
+              "height": 360
+            }
+          },
+          "channelTitle": "Amazon Web Services",
+          "liveBroadcastContent": "none",
+          "publishTime": "2019-02-11T17:55:19Z"
+        }
+      },
+      {
+        "kind": "youtube#searchResult",
+        "etag": "0ww3Jk-j4d4TMsFNL213EhE0gGg",
+        "id": {
+          "kind": "youtube#video",
+          "videoId": "aKuPmY2m1Ro"
+        },
+        "snippet": {
+          "publishedAt": "2019-12-27T20:47:29Z",
+          "channelId": "UCPGzT4wecuWM0BH9mPiulXg",
+          "title": "Wizeline&#39;s 2019 Year in Review",
+          "description": "",
+          "thumbnails": {
+            "default": {
+              "url": "https://i.ytimg.com/vi/aKuPmY2m1Ro/default.jpg",
+              "width": 120,
+              "height": 90
+            },
+            "medium": {
+              "url": "https://i.ytimg.com/vi/aKuPmY2m1Ro/mqdefault.jpg",
+              "width": 320,
+              "height": 180
+            },
+            "high": {
+              "url": "https://i.ytimg.com/vi/aKuPmY2m1Ro/hqdefault.jpg",
+              "width": 480,
+              "height": 360
+            }
+          },
+          "channelTitle": "Wizeline",
+          "liveBroadcastContent": "none",
+          "publishTime": "2019-12-27T20:47:29Z"
+        }
+      },
+      {
+        "kind": "youtube#searchResult",
+        "etag": "8q-ajUMnXZm4gQzfSIiyrG2tA7A",
+        "id": {
+          "kind": "youtube#video",
+          "videoId": "24sTHUyWhRM"
+        },
+        "snippet": {
+          "publishedAt": "2016-10-05T00:03:32Z",
+          "channelId": "UCPGzT4wecuWM0BH9mPiulXg",
+          "title": "[1 of 2] Wizeline CEO shares career lessons from Google",
+          "description": "Founder & CEO Bismarck Lepe on growth opportunities at Wizeline and his career-path experience as an early Google employee. Join our team!",
+          "thumbnails": {
+            "default": {
+              "url": "https://i.ytimg.com/vi/24sTHUyWhRM/default.jpg",
+              "width": 120,
+              "height": 90
+            },
+            "medium": {
+              "url": "https://i.ytimg.com/vi/24sTHUyWhRM/mqdefault.jpg",
+              "width": 320,
+              "height": 180
+            },
+            "high": {
+              "url": "https://i.ytimg.com/vi/24sTHUyWhRM/hqdefault.jpg",
+              "width": 480,
+              "height": 360
+            }
+          },
+          "channelTitle": "Wizeline",
+          "liveBroadcastContent": "none",
+          "publishTime": "2016-10-05T00:03:32Z"
+        }
+      },
+      {
+        "kind": "youtube#searchResult",
+        "etag": "4QA9Eisz9-HncD9EENUm0LV7hXI",
+        "id": {
+          "kind": "youtube#video",
+          "videoId": "IxGc1gSqB3A"
+        },
+        "snippet": {
+          "publishedAt": "2021-02-04T17:45:11Z",
+          "channelId": "UCPGzT4wecuWM0BH9mPiulXg",
+          "title": "Wizeline Data Engineering featuring Tania Reyes",
+          "description": "Tania discovered her interest in Big Data while working at Wizeline and took Wizeline Academy courses to skill up and join the data team. Now, she works on ...",
+          "thumbnails": {
+            "default": {
+              "url": "https://i.ytimg.com/vi/IxGc1gSqB3A/default.jpg",
+              "width": 120,
+              "height": 90
+            },
+            "medium": {
+              "url": "https://i.ytimg.com/vi/IxGc1gSqB3A/mqdefault.jpg",
+              "width": 320,
+              "height": 180
+            },
+            "high": {
+              "url": "https://i.ytimg.com/vi/IxGc1gSqB3A/hqdefault.jpg",
+              "width": 480,
+              "height": 360
+            }
+          },
+          "channelTitle": "Wizeline",
+          "liveBroadcastContent": "none",
+          "publishTime": "2021-02-04T17:45:11Z"
+        }
+      },
+      {
+        "kind": "youtube#searchResult",
+        "etag": "5_OftJlDpcfykudIpO7nn92Pq6s",
+        "id": {
+          "kind": "youtube#video",
+          "videoId": "NP1gAnbeNno"
+        },
+        "snippet": {
+          "publishedAt": "2019-11-12T20:45:18Z",
+          "channelId": "UCPGzT4wecuWM0BH9mPiulXg",
+          "title": "Wizeline Querétaro | Mexico&#39;s New Knowledge Economy (We&#39;re hiring!)",
+          "description": "A small but mighty (and growing) team, the Queretaro crew has taken ownership of growing the office and brand, speaking at university events, hosting tech ...",
+          "thumbnails": {
+            "default": {
+              "url": "https://i.ytimg.com/vi/NP1gAnbeNno/default.jpg",
+              "width": 120,
+              "height": 90
+            },
+            "medium": {
+              "url": "https://i.ytimg.com/vi/NP1gAnbeNno/mqdefault.jpg",
+              "width": 320,
+              "height": 180
+            },
+            "high": {
+              "url": "https://i.ytimg.com/vi/NP1gAnbeNno/hqdefault.jpg",
+              "width": 480,
+              "height": 360
+            }
+          },
+          "channelTitle": "Wizeline",
+          "liveBroadcastContent": "none",
+          "publishTime": "2019-11-12T20:45:18Z"
+        }
+      },
+      {
+        "kind": "youtube#searchResult",
+        "etag": "0XmhUGwmJNRilJR1S6VgOmdO9ho",
+        "id": {
+          "kind": "youtube#video",
+          "videoId": "F6Krwu6lUc8"
+        },
+        "snippet": {
+          "publishedAt": "2020-10-23T04:15:31Z",
+          "channelId": "UCPGzT4wecuWM0BH9mPiulXg",
+          "title": "Miriam Godinez | Women in Leadership at Wizeline",
+          "description": "Science and technology always caught Miriam's attention. One of her ultimate goals as a Senior Engineer Manager and Lead from the Mobile Team at Wizeline ...",
+          "thumbnails": {
+            "default": {
+              "url": "https://i.ytimg.com/vi/F6Krwu6lUc8/default.jpg",
+              "width": 120,
+              "height": 90
+            },
+            "medium": {
+              "url": "https://i.ytimg.com/vi/F6Krwu6lUc8/mqdefault.jpg",
+              "width": 320,
+              "height": 180
+            },
+            "high": {
+              "url": "https://i.ytimg.com/vi/F6Krwu6lUc8/hqdefault.jpg",
+              "width": 480,
+              "height": 360
+            }
+          },
+          "channelTitle": "Wizeline",
+          "liveBroadcastContent": "none",
+          "publishTime": "2020-10-23T04:15:31Z"
+        }
+      },
+      {
+        "kind": "youtube#searchResult",
+        "etag": "mM9qAwvNhFKGUv6mCIamuWVo0NE",
+        "id": {
+          "kind": "youtube#video",
+          "videoId": "RFq7gfvhtCk"
+        },
+        "snippet": {
+          "publishedAt": "2020-05-23T00:11:23Z",
+          "channelId": "UCPGzT4wecuWM0BH9mPiulXg",
+          "title": "Welcome Back to Wizeline Vietnam | Extended Version",
+          "description": "Thanks to swift government action, the COVID-19 situation in Vietnam has reached a point where businesses are able to return to work and reopen offices.",
+          "thumbnails": {
+            "default": {
+              "url": "https://i.ytimg.com/vi/RFq7gfvhtCk/default.jpg",
+              "width": 120,
+              "height": 90
+            },
+            "medium": {
+              "url": "https://i.ytimg.com/vi/RFq7gfvhtCk/mqdefault.jpg",
+              "width": 320,
+              "height": 180
+            },
+            "high": {
+              "url": "https://i.ytimg.com/vi/RFq7gfvhtCk/hqdefault.jpg",
+              "width": 480,
+              "height": 360
+            }
+          },
+          "channelTitle": "Wizeline",
+          "liveBroadcastContent": "none",
+          "publishTime": "2020-05-23T00:11:23Z"
+        }
+      },
+      {
+        "kind": "youtube#searchResult",
+        "etag": "sVz5aNJZHehOf7qJCTLOLh1V40M",
+        "id": {
+          "kind": "youtube#video",
+          "videoId": "E1Vq_A3WKK8"
+        },
+        "snippet": {
+          "publishedAt": "2017-12-09T18:46:07Z",
+          "channelId": "UCPGzT4wecuWM0BH9mPiulXg",
+          "title": "How does Wizeline work?",
+          "description": "Wizeline builds teams with a mix of technical and non-technical talent to deliver better products, faster. Learn more about our consulting services: ...",
+          "thumbnails": {
+            "default": {
+              "url": "https://i.ytimg.com/vi/E1Vq_A3WKK8/default.jpg",
+              "width": 120,
+              "height": 90
+            },
+            "medium": {
+              "url": "https://i.ytimg.com/vi/E1Vq_A3WKK8/mqdefault.jpg",
+              "width": 320,
+              "height": 180
+            },
+            "high": {
+              "url": "https://i.ytimg.com/vi/E1Vq_A3WKK8/hqdefault.jpg",
+              "width": 480,
+              "height": 360
+            }
+          },
+          "channelTitle": "Wizeline",
+          "liveBroadcastContent": "none",
+          "publishTime": "2017-12-09T18:46:07Z"
+        }
+      },
+      {
+        "kind": "youtube#searchResult",
+        "etag": "kiG9Z-CXE-mbZVBeom4qLurWb4w",
+        "id": {
+          "kind": "youtube#video",
+          "videoId": "ZmkslANDz0Q"
+        },
+        "snippet": {
+          "publishedAt": "2019-12-18T19:22:44Z",
+          "channelId": "UCPGzT4wecuWM0BH9mPiulXg",
+          "title": "12 Wishes from Wizeline | Happy Holidays 2019",
+          "description": "",
+          "thumbnails": {
+            "default": {
+              "url": "https://i.ytimg.com/vi/ZmkslANDz0Q/default.jpg",
+              "width": 120,
+              "height": 90
+            },
+            "medium": {
+              "url": "https://i.ytimg.com/vi/ZmkslANDz0Q/mqdefault.jpg",
+              "width": 320,
+              "height": 180
+            },
+            "high": {
+              "url": "https://i.ytimg.com/vi/ZmkslANDz0Q/hqdefault.jpg",
+              "width": 480,
+              "height": 360
+            }
+          },
+          "channelTitle": "Wizeline",
+          "liveBroadcastContent": "none",
+          "publishTime": "2019-12-18T19:22:44Z"
+        }
+      },
+      {
+        "kind": "youtube#searchResult",
+        "etag": "bzZZYb96wT_IQHNp5sXm3VDUbXA",
+        "id": {
+          "kind": "youtube#video",
+          "videoId": "Nss3EmTDD3s"
+        },
+        "snippet": {
+          "publishedAt": "2017-12-08T18:13:27Z",
+          "channelId": "UCPGzT4wecuWM0BH9mPiulXg",
+          "title": "Why Wizeline?",
+          "description": "Hear from our employees directly about what excites them about their roles here at Wizeline. Wizeline wants to hire the best and the brightest to accelerate their ...",
+          "thumbnails": {
+            "default": {
+              "url": "https://i.ytimg.com/vi/Nss3EmTDD3s/default.jpg",
+              "width": 120,
+              "height": 90
+            },
+            "medium": {
+              "url": "https://i.ytimg.com/vi/Nss3EmTDD3s/mqdefault.jpg",
+              "width": 320,
+              "height": 180
+            },
+            "high": {
+              "url": "https://i.ytimg.com/vi/Nss3EmTDD3s/hqdefault.jpg",
+              "width": 480,
+              "height": 360
+            }
+          },
+          "channelTitle": "Wizeline",
+          "liveBroadcastContent": "none",
+          "publishTime": "2017-12-08T18:13:27Z"
+        }
+      }
+    ]
+  }
\ No newline at end of file
diff --git a/src/pages/Home/Card.component.jsx b/src/pages/Home/Card.component.jsx
new file mode 100644
index 000000000..2f4bcd6ad
--- /dev/null
+++ b/src/pages/Home/Card.component.jsx
@@ -0,0 +1,38 @@
+import React from 'react';
+import { makeStyles } from '@material-ui/core/styles';
+import Card from '@material-ui/core/Card';
+import CardActionArea from '@material-ui/core/CardActionArea';
+import CardContent from '@material-ui/core/CardContent';
+import CardMedia from '@material-ui/core/CardMedia';
+import Typography from '@material-ui/core/Typography';
+
+const useStyles = makeStyles({
+  root: {
+    maxWidth: 345,
+    margin: '0.5em'
+  },
+});
+
+export default function VideoCard({image, title, description}) {
+  const classes = useStyles();
+
+  return (
+    <Card className={classes.root}>
+      <CardActionArea>
+        <CardMedia
+          component="img"
+          height="140"
+          image={image}
+        />
+        <CardContent>
+          <Typography gutterBottom variant="h5" component="h2">
+            {title}
+          </Typography>
+          <Typography variant="body2" color="textSecondary" component="p">
+            {description}
+          </Typography>
+        </CardContent>
+      </CardActionArea>
+    </Card>
+  );
+}
\ No newline at end of file
diff --git a/src/pages/Home/Home.page.jsx b/src/pages/Home/Home.page.jsx
index 08d1dd5c0..18fa3e34b 100644
--- a/src/pages/Home/Home.page.jsx
+++ b/src/pages/Home/Home.page.jsx
@@ -1,39 +1,108 @@
-import React, { useRef } from 'react';
-import { Link, useHistory } from 'react-router-dom';
+import React from 'react';
+import clsx from 'clsx';
+import { makeStyles } from '@material-ui/core/styles';
+import AppBar from '@material-ui/core/AppBar';
+import Toolbar from '@material-ui/core/Toolbar';
+import Typography from '@material-ui/core/Typography';
+import MenuIcon from '@material-ui/icons/Menu';
+import Switch from '@material-ui/core/Switch';
+import IconButton from '@material-ui/core/IconButton';
+import AccountCircle from '@material-ui/icons/AccountCircle';
+import InputAdornment from '@material-ui/core/InputAdornment';
+import FormControl from '@material-ui/core/FormControl';
+import FilledInput from '@material-ui/core/FilledInput';
+import SearchIcon from '@material-ui/icons/Search';
+import VideoCard from './Card.component';
+import Items from '../../mocks/youtube-videos-mock.json';
 
-import { useAuth } from '../../providers/Auth';
-import './Home.styles.css';
+const useStyles = makeStyles((theme) => ({
+  root: {
+    flexGrow: 1,
+  },
+  menuButton: {
+    marginRight: theme.spacing(2),
+  },
+  sideActions: {
+    display: 'flex',
+    flexGrow: 1,
+    justifyContent: 'flex-end',
+    alignItems: 'center',
+    [theme.breakpoints.down('sm')]: {
+      display: 'none',
+    },
+  },
+  darkMode: {
+    marginRight: '1em',
+  },
+  headline: {
+    margin: '2em 0',
+    '& > h2': {
+      color: 'white'
+    }
+  },
+  itemsContainer: {
+    display: 'flex',
+    flexWrap: 'wrap',
+    justifyContent: 'center',
+  },
+}));
 
-function HomePage() {
-  const history = useHistory();
-  const sectionRef = useRef(null);
-  const { authenticated, logout } = useAuth();
-
-  function deAuthenticate(event) {
-    event.preventDefault();
-    logout();
-    history.push('/');
-  }
+export default function ButtonAppBar() {
+  const classes = useStyles();
 
   return (
-    <section className="homepage" ref={sectionRef}>
-      <h1>Hello stranger!</h1>
-      {authenticated ? (
-        <>
-          <h2>Good to have you back</h2>
-          <span>
-            <Link to="/" onClick={deAuthenticate}>
-              ← logout
-            </Link>
-            <span className="separator" />
-            <Link to="/secret">show me something cool →</Link>
-          </span>
-        </>
-      ) : (
-        <Link to="/login">let me in →</Link>
-      )}
-    </section>
+    <div className={classes.root}>
+      <AppBar position="static">
+        <Toolbar>
+          <IconButton edge="start" className={classes.menuButton} color="inherit" aria-label="menu">
+            <MenuIcon />
+          </IconButton>
+          <FormControl className={clsx(classes.margin, classes.textField)}>
+            <FilledInput
+              id="standard-adornment-password"
+              type="text"
+              startAdornment={
+                <InputAdornment position="end">
+                  <IconButton
+                    aria-label="toggle password visibility"
+                  >
+                    <SearchIcon htmlColor="white" />
+                  </IconButton>
+                </InputAdornment>
+              }
+            />
+          </FormControl>
+          <div className={classes.sideActions}>
+            <Switch aria-label="login switch" />
+            <Typography className={classes.darkMode}>Dark mode</Typography>
+            <IconButton
+              aria-label="account of current user"
+              aria-controls="menu-appbar"
+              aria-haspopup="true"
+              color="inherit"
+            >
+              <AccountCircle />
+            </IconButton>
+          </div>
+        </Toolbar>
+      </AppBar>
+      <div className={classes.headline}>
+        <Typography variant="h2" align="center">
+          Welcome to the Challenge!
+        </Typography>
+      </div>
+      <div className={classes.itemsContainer}>
+        {Items.items.map((item, index) => {
+          return ( 
+            <VideoCard
+              key={index}
+              description={item.snippet.description}
+              image={item.snippet.thumbnails.high.url}
+              title={item.snippet.title}
+            />
+          )
+        })}
+      </div>
+    </div>
   );
 }
-
-export default HomePage;
diff --git a/yarn.lock b/yarn.lock
index 0530c750a..ba654900b 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1115,6 +1115,13 @@
   dependencies:
     regenerator-runtime "^0.13.4"
 
+"@babel/runtime@^7.3.1", "@babel/runtime@^7.4.4", "@babel/runtime@^7.8.3", "@babel/runtime@^7.8.7":
+  version "7.13.10"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.13.10.tgz#47d42a57b6095f4468da440388fdbad8bebf0d7d"
+  integrity sha512-4QPkjJq6Ns3V/RgpEahRk+AGfL0eO6RHHtTWoNNr5mO49G6B5+X6d6THgWEAvTrznU5xYpbAlVKRYcsCgh/Akw==
+  dependencies:
+    regenerator-runtime "^0.13.4"
+
 "@babel/template@^7.10.4", "@babel/template@^7.4.0", "@babel/template@^7.8.6":
   version "7.10.4"
   resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.10.4.tgz#3251996c4200ebc71d1a8fc405fba940f36ba278"
@@ -1166,6 +1173,11 @@
   resolved "https://registry.yarnpkg.com/@csstools/normalize.css/-/normalize.css-10.1.0.tgz#f0950bba18819512d42f7197e56c518aa491cf18"
   integrity sha512-ij4wRiunFfaJxjB0BdrYHIH8FxBJpOwNPhhAcunlmPdXudL1WQV1qoP9un6JsEBAgQH+7UXyyjh0g7jTxXK6tg==
 
+"@emotion/hash@^0.8.0":
+  version "0.8.0"
+  resolved "https://registry.yarnpkg.com/@emotion/hash/-/hash-0.8.0.tgz#bbbff68978fefdbe68ccb533bc8cbe1d1afb5413"
+  integrity sha512-kBJtf7PH6aWwZ6fka3zQ0p6SBYzx4fl1LoZXE2RrnYST9Xljm7WfKJrU4g/Xr3Beg72MLrp1AWNUmuYJTL7Cow==
+
 "@hapi/address@2.x.x":
   version "2.1.4"
   resolved "https://registry.yarnpkg.com/@hapi/address/-/address-2.1.4.tgz#5d67ed43f3fd41a69d4b9ff7b56e7c0d1d0a81e5"
@@ -1367,6 +1379,77 @@
     "@types/yargs" "^15.0.0"
     chalk "^4.0.0"
 
+"@material-ui/core@^4.11.3":
+  version "4.11.3"
+  resolved "https://registry.yarnpkg.com/@material-ui/core/-/core-4.11.3.tgz#f22e41775b0bd075e36a7a093d43951bf7f63850"
+  integrity sha512-Adt40rGW6Uds+cAyk3pVgcErpzU/qxc7KBR94jFHBYretU4AtWZltYcNsbeMn9tXL86jjVL1kuGcIHsgLgFGRw==
+  dependencies:
+    "@babel/runtime" "^7.4.4"
+    "@material-ui/styles" "^4.11.3"
+    "@material-ui/system" "^4.11.3"
+    "@material-ui/types" "^5.1.0"
+    "@material-ui/utils" "^4.11.2"
+    "@types/react-transition-group" "^4.2.0"
+    clsx "^1.0.4"
+    hoist-non-react-statics "^3.3.2"
+    popper.js "1.16.1-lts"
+    prop-types "^15.7.2"
+    react-is "^16.8.0 || ^17.0.0"
+    react-transition-group "^4.4.0"
+
+"@material-ui/icons@^4.11.2":
+  version "4.11.2"
+  resolved "https://registry.yarnpkg.com/@material-ui/icons/-/icons-4.11.2.tgz#b3a7353266519cd743b6461ae9fdfcb1b25eb4c5"
+  integrity sha512-fQNsKX2TxBmqIGJCSi3tGTO/gZ+eJgWmMJkgDiOfyNaunNaxcklJQFaFogYcFl0qFuaEz1qaXYXboa/bUXVSOQ==
+  dependencies:
+    "@babel/runtime" "^7.4.4"
+
+"@material-ui/styles@^4.11.3":
+  version "4.11.3"
+  resolved "https://registry.yarnpkg.com/@material-ui/styles/-/styles-4.11.3.tgz#1b8d97775a4a643b53478c895e3f2a464e8916f2"
+  integrity sha512-HzVzCG+PpgUGMUYEJ2rTEmQYeonGh41BYfILNFb/1ueqma+p1meSdu4RX6NjxYBMhf7k+jgfHFTTz+L1SXL/Zg==
+  dependencies:
+    "@babel/runtime" "^7.4.4"
+    "@emotion/hash" "^0.8.0"
+    "@material-ui/types" "^5.1.0"
+    "@material-ui/utils" "^4.11.2"
+    clsx "^1.0.4"
+    csstype "^2.5.2"
+    hoist-non-react-statics "^3.3.2"
+    jss "^10.5.1"
+    jss-plugin-camel-case "^10.5.1"
+    jss-plugin-default-unit "^10.5.1"
+    jss-plugin-global "^10.5.1"
+    jss-plugin-nested "^10.5.1"
+    jss-plugin-props-sort "^10.5.1"
+    jss-plugin-rule-value-function "^10.5.1"
+    jss-plugin-vendor-prefixer "^10.5.1"
+    prop-types "^15.7.2"
+
+"@material-ui/system@^4.11.3":
+  version "4.11.3"
+  resolved "https://registry.yarnpkg.com/@material-ui/system/-/system-4.11.3.tgz#466bc14c9986798fd325665927c963eb47cc4143"
+  integrity sha512-SY7otguNGol41Mu2Sg6KbBP1ZRFIbFLHGK81y4KYbsV2yIcaEPOmsCK6zwWlp+2yTV3J/VwT6oSBARtGIVdXPw==
+  dependencies:
+    "@babel/runtime" "^7.4.4"
+    "@material-ui/utils" "^4.11.2"
+    csstype "^2.5.2"
+    prop-types "^15.7.2"
+
+"@material-ui/types@^5.1.0":
+  version "5.1.0"
+  resolved "https://registry.yarnpkg.com/@material-ui/types/-/types-5.1.0.tgz#efa1c7a0b0eaa4c7c87ac0390445f0f88b0d88f2"
+  integrity sha512-7cqRjrY50b8QzRSYyhSpx4WRw2YuO0KKIGQEVk5J8uoz2BanawykgZGoWEqKm7pVIbzFDN0SpPcVV4IhOFkl8A==
+
+"@material-ui/utils@^4.11.2":
+  version "4.11.2"
+  resolved "https://registry.yarnpkg.com/@material-ui/utils/-/utils-4.11.2.tgz#f1aefa7e7dff2ebcb97d31de51aecab1bb57540a"
+  integrity sha512-Uul8w38u+PICe2Fg2pDKCaIG7kOyhowZ9vjiC1FsVwPABTW8vPPKfF6OvxRq3IiBaI1faOJmgdvMG7rMJARBhA==
+  dependencies:
+    "@babel/runtime" "^7.4.4"
+    prop-types "^15.7.2"
+    react-is "^16.8.0 || ^17.0.0"
+
 "@mrmlnc/readdir-enhanced@^2.2.1":
   version "2.2.1"
   resolved "https://registry.yarnpkg.com/@mrmlnc/readdir-enhanced/-/readdir-enhanced-2.2.1.tgz#524af240d1a360527b730475ecfa1344aa540dde"
@@ -1639,11 +1722,37 @@
   resolved "https://registry.yarnpkg.com/@types/parse-json/-/parse-json-4.0.0.tgz#2f8bb441434d163b35fb8ffdccd7138927ffb8c0"
   integrity sha512-//oorEZjL6sbPcKUaCdIGlIUeH26mgzimjBB77G6XRgnDl/L5wOnpyBGRe/Mmf5CVW3PwEBE1NjiMZ/ssFh4wA==
 
+"@types/prop-types@*":
+  version "15.7.3"
+  resolved "https://registry.yarnpkg.com/@types/prop-types/-/prop-types-15.7.3.tgz#2ab0d5da2e5815f94b0b9d4b95d1e5f243ab2ca7"
+  integrity sha512-KfRL3PuHmqQLOG+2tGpRO26Ctg+Cq1E01D2DMriKEATHgWLfeNDmq9e29Q9WIky0dQ3NPkd1mzYH8Lm936Z9qw==
+
 "@types/q@^1.5.1":
   version "1.5.4"
   resolved "https://registry.yarnpkg.com/@types/q/-/q-1.5.4.tgz#15925414e0ad2cd765bfef58842f7e26a7accb24"
   integrity sha512-1HcDas8SEj4z1Wc696tH56G8OlRaH/sqZOynNNB+HF0WOeXPaxTtbYzJY2oEfiUxjSKjhCKr+MvR7dCHcEelug==
 
+"@types/react-transition-group@^4.2.0":
+  version "4.4.1"
+  resolved "https://registry.yarnpkg.com/@types/react-transition-group/-/react-transition-group-4.4.1.tgz#e1a3cb278df7f47f17b5082b1b3da17170bd44b1"
+  integrity sha512-vIo69qKKcYoJ8wKCJjwSgCTM+z3chw3g18dkrDfVX665tMH7tmbDxEAnPdey4gTlwZz5QuHGzd+hul0OVZDqqQ==
+  dependencies:
+    "@types/react" "*"
+
+"@types/react@*":
+  version "17.0.3"
+  resolved "https://registry.yarnpkg.com/@types/react/-/react-17.0.3.tgz#ba6e215368501ac3826951eef2904574c262cc79"
+  integrity sha512-wYOUxIgs2HZZ0ACNiIayItyluADNbONl7kt8lkLjVK8IitMH5QMyAh75Fwhmo37r1m7L2JaFj03sIfxBVDvRAg==
+  dependencies:
+    "@types/prop-types" "*"
+    "@types/scheduler" "*"
+    csstype "^3.0.2"
+
+"@types/scheduler@*":
+  version "0.16.1"
+  resolved "https://registry.yarnpkg.com/@types/scheduler/-/scheduler-0.16.1.tgz#18845205e86ff0038517aab7a18a62a6b9f71275"
+  integrity sha512-EaCxbanVeyxDRTQBkdLb3Bvl/HK7PBK6UJjsSixB0iHKoWxE5uu2Q/DgtpOhPIojN0Zl1whvOd7PoHs2P0s5eA==
+
 "@types/stack-utils@^1.0.1":
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/@types/stack-utils/-/stack-utils-1.0.1.tgz#0a851d3bd96498fa25c33ab7278ed3bd65f06c3e"
@@ -3045,6 +3154,11 @@ clone-deep@^4.0.1:
     kind-of "^6.0.2"
     shallow-clone "^3.0.0"
 
+clsx@^1.0.4:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/clsx/-/clsx-1.1.1.tgz#98b3134f9abbdf23b2663491ace13c5c03a73188"
+  integrity sha512-6/bPho624p3S2pMyvP5kKBPXnI3ufHLObBFCfgx+LkeR5lg2XYy2hqZqUf45ypD8COn2bhgGJSUE+l5dhNBieA==
+
 co@^4.6.0:
   version "4.6.0"
   resolved "https://registry.yarnpkg.com/co/-/co-4.6.0.tgz#6ea6bdf3d853ae54ccb8e47bfa0bf3f9031fb184"
@@ -3503,6 +3617,14 @@ css-tree@1.0.0-alpha.39:
     mdn-data "2.0.6"
     source-map "^0.6.1"
 
+css-vendor@^2.0.8:
+  version "2.0.8"
+  resolved "https://registry.yarnpkg.com/css-vendor/-/css-vendor-2.0.8.tgz#e47f91d3bd3117d49180a3c935e62e3d9f7f449d"
+  integrity sha512-x9Aq0XTInxrkuFeHKbYC7zWY8ai7qJ04Kxd9MnvbC1uO5DagxoHQjm4JvG+vCdXOoFtCjbL2XSZfxmoYa9uQVQ==
+  dependencies:
+    "@babel/runtime" "^7.8.3"
+    is-in-browser "^1.0.2"
+
 css-what@2.1:
   version "2.1.3"
   resolved "https://registry.yarnpkg.com/css-what/-/css-what-2.1.3.tgz#a6d7604573365fe74686c3f311c56513d88285f2"
@@ -3639,6 +3761,16 @@ cssstyle@^1.0.0, cssstyle@^1.1.1:
   dependencies:
     cssom "0.3.x"
 
+csstype@^2.5.2:
+  version "2.6.16"
+  resolved "https://registry.yarnpkg.com/csstype/-/csstype-2.6.16.tgz#544d69f547013b85a40d15bff75db38f34fe9c39"
+  integrity sha512-61FBWoDHp/gRtsoDkq/B1nWrCUG/ok1E3tUrcNbZjsE9Cxd9yzUirjS3+nAATB8U4cTtaQmAHbNndoFz5L6C9Q==
+
+csstype@^3.0.2:
+  version "3.0.7"
+  resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.0.7.tgz#2a5fb75e1015e84dd15692f71e89a1450290950b"
+  integrity sha512-KxnUB0ZMlnUWCsx2Z8MUsr6qV6ja1w9ArPErJaJaF8a5SOWoHLIszeCTKGRGRgtLgYrs1E8CHkNSP1VZTTPc9g==
+
 cyclist@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/cyclist/-/cyclist-1.0.1.tgz#596e9698fd0c80e12038c2b82d6eb1b35b6224d9"
@@ -3898,6 +4030,14 @@ dom-converter@^0.2:
   dependencies:
     utila "~0.4"
 
+dom-helpers@^5.0.1:
+  version "5.2.0"
+  resolved "https://registry.yarnpkg.com/dom-helpers/-/dom-helpers-5.2.0.tgz#57fd054c5f8f34c52a3eeffdb7e7e93cd357d95b"
+  integrity sha512-Ru5o9+V8CpunKnz5LGgWXkmrH/20cGKwcHwS4m73zIvs54CN9epEmT/HLqFJW3kXpakAFkEdzgy1hzlJe3E4OQ==
+  dependencies:
+    "@babel/runtime" "^7.8.7"
+    csstype "^3.0.2"
+
 dom-serializer@0:
   version "0.2.2"
   resolved "https://registry.yarnpkg.com/dom-serializer/-/dom-serializer-0.2.2.tgz#1afb81f533717175d478655debc5e332d9f9bb51"
@@ -5348,7 +5488,7 @@ hmac-drbg@^1.0.0:
     minimalistic-assert "^1.0.0"
     minimalistic-crypto-utils "^1.0.1"
 
-hoist-non-react-statics@^3.1.0:
+hoist-non-react-statics@^3.1.0, hoist-non-react-statics@^3.3.2:
   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==
@@ -5535,6 +5675,11 @@ husky@^4.2.5:
     slash "^3.0.0"
     which-pm-runs "^1.0.0"
 
+hyphenate-style-name@^1.0.3:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/hyphenate-style-name/-/hyphenate-style-name-1.0.4.tgz#691879af8e220aea5750e8827db4ef62a54e361d"
+  integrity sha512-ygGZLjmXfPHj+ZWh6LwbC37l43MhfztxetbFCoYTM2VjkIUpeHgSNn7QIyVFj7YQ1Wl9Cbw5sholVJPzWvC2MQ==
+
 iconv-lite@0.4.24, iconv-lite@^0.4.24:
   version "0.4.24"
   resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.4.24.tgz#2022b4b25fbddc21d2f524974a474aafe733908b"
@@ -5629,6 +5774,13 @@ imurmurhash@^0.1.4:
   resolved "https://registry.yarnpkg.com/imurmurhash/-/imurmurhash-0.1.4.tgz#9218b9b2b928a238b13dc4fb6b6d576f231453ea"
   integrity sha1-khi5srkoojixPcT7a21XbyMUU+o=
 
+indefinite-observable@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/indefinite-observable/-/indefinite-observable-2.0.1.tgz#574af29bfbc17eb5947793797bddc94c9d859400"
+  integrity sha512-G8vgmork+6H9S8lUAg1gtXEj2JxIQTo0g2PbFiYOdjkziSI0F7UYBiVwhZRuixhBCNGczAls34+5HJPyZysvxQ==
+  dependencies:
+    symbol-observable "1.2.0"
+
 indent-string@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/indent-string/-/indent-string-4.0.0.tgz#624f8f4497d619b2d9768531d58f4122854d7251"
@@ -5924,6 +6076,11 @@ is-glob@^4.0.0, is-glob@^4.0.1, is-glob@~4.0.1:
   dependencies:
     is-extglob "^2.1.1"
 
+is-in-browser@^1.0.2, is-in-browser@^1.1.3:
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/is-in-browser/-/is-in-browser-1.1.3.tgz#56ff4db683a078c6082eb95dad7dc62e1d04f835"
+  integrity sha1-Vv9NtoOgeMYILrldrX3GLh0E+DU=
+
 is-negative-zero@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/is-negative-zero/-/is-negative-zero-2.0.0.tgz#9553b121b0fac28869da9ed459e20c7543788461"
@@ -6709,6 +6866,77 @@ jsprim@^1.2.2:
     json-schema "0.2.3"
     verror "1.10.0"
 
+jss-plugin-camel-case@^10.5.1:
+  version "10.6.0"
+  resolved "https://registry.yarnpkg.com/jss-plugin-camel-case/-/jss-plugin-camel-case-10.6.0.tgz#93d2cd704bf0c4af70cc40fb52d74b8a2554b170"
+  integrity sha512-JdLpA3aI/npwj3nDMKk308pvnhoSzkW3PXlbgHAzfx0yHWnPPVUjPhXFtLJzgKZge8lsfkUxvYSQ3X2OYIFU6A==
+  dependencies:
+    "@babel/runtime" "^7.3.1"
+    hyphenate-style-name "^1.0.3"
+    jss "10.6.0"
+
+jss-plugin-default-unit@^10.5.1:
+  version "10.6.0"
+  resolved "https://registry.yarnpkg.com/jss-plugin-default-unit/-/jss-plugin-default-unit-10.6.0.tgz#af47972486819b375f0f3a9e0213403a84b5ef3b"
+  integrity sha512-7y4cAScMHAxvslBK2JRK37ES9UT0YfTIXWgzUWD5euvR+JR3q+o8sQKzBw7GmkQRfZijrRJKNTiSt1PBsLI9/w==
+  dependencies:
+    "@babel/runtime" "^7.3.1"
+    jss "10.6.0"
+
+jss-plugin-global@^10.5.1:
+  version "10.6.0"
+  resolved "https://registry.yarnpkg.com/jss-plugin-global/-/jss-plugin-global-10.6.0.tgz#3e8011f760f399cbadcca7f10a485b729c50e3ed"
+  integrity sha512-I3w7ji/UXPi3VuWrTCbHG9rVCgB4yoBQLehGDTmsnDfXQb3r1l3WIdcO8JFp9m0YMmyy2CU7UOV6oPI7/Tmu+w==
+  dependencies:
+    "@babel/runtime" "^7.3.1"
+    jss "10.6.0"
+
+jss-plugin-nested@^10.5.1:
+  version "10.6.0"
+  resolved "https://registry.yarnpkg.com/jss-plugin-nested/-/jss-plugin-nested-10.6.0.tgz#5f83c5c337d3b38004834e8426957715a0251641"
+  integrity sha512-fOFQWgd98H89E6aJSNkEh2fAXquC9aZcAVjSw4q4RoQ9gU++emg18encR4AT4OOIFl4lQwt5nEyBBRn9V1Rk8g==
+  dependencies:
+    "@babel/runtime" "^7.3.1"
+    jss "10.6.0"
+    tiny-warning "^1.0.2"
+
+jss-plugin-props-sort@^10.5.1:
+  version "10.6.0"
+  resolved "https://registry.yarnpkg.com/jss-plugin-props-sort/-/jss-plugin-props-sort-10.6.0.tgz#297879f35f9fe21196448579fee37bcde28ce6bc"
+  integrity sha512-oMCe7hgho2FllNc60d9VAfdtMrZPo9n1Iu6RNa+3p9n0Bkvnv/XX5San8fTPujrTBScPqv9mOE0nWVvIaohNuw==
+  dependencies:
+    "@babel/runtime" "^7.3.1"
+    jss "10.6.0"
+
+jss-plugin-rule-value-function@^10.5.1:
+  version "10.6.0"
+  resolved "https://registry.yarnpkg.com/jss-plugin-rule-value-function/-/jss-plugin-rule-value-function-10.6.0.tgz#3c1a557236a139d0151e70a82c810ccce1c1c5ea"
+  integrity sha512-TKFqhRTDHN1QrPTMYRlIQUOC2FFQb271+AbnetURKlGvRl/eWLswcgHQajwuxI464uZk91sPiTtdGi7r7XaWfA==
+  dependencies:
+    "@babel/runtime" "^7.3.1"
+    jss "10.6.0"
+    tiny-warning "^1.0.2"
+
+jss-plugin-vendor-prefixer@^10.5.1:
+  version "10.6.0"
+  resolved "https://registry.yarnpkg.com/jss-plugin-vendor-prefixer/-/jss-plugin-vendor-prefixer-10.6.0.tgz#e1fcd499352846890c38085b11dbd7aa1c4f2c78"
+  integrity sha512-doJ7MouBXT1lypLLctCwb4nJ6lDYqrTfVS3LtXgox42Xz0gXusXIIDboeh6UwnSmox90QpVnub7au8ybrb0krQ==
+  dependencies:
+    "@babel/runtime" "^7.3.1"
+    css-vendor "^2.0.8"
+    jss "10.6.0"
+
+jss@10.6.0, jss@^10.5.1:
+  version "10.6.0"
+  resolved "https://registry.yarnpkg.com/jss/-/jss-10.6.0.tgz#d92ff9d0f214f65ca1718591b68e107be4774149"
+  integrity sha512-n7SHdCozmxnzYGXBHe0NsO0eUf9TvsHVq2MXvi4JmTn3x5raynodDVE/9VQmBdWFyyj9HpHZ2B4xNZ7MMy7lkw==
+  dependencies:
+    "@babel/runtime" "^7.3.1"
+    csstype "^3.0.2"
+    indefinite-observable "^2.0.1"
+    is-in-browser "^1.1.3"
+    tiny-warning "^1.0.2"
+
 jsx-ast-utils@^2.2.1, jsx-ast-utils@^2.2.3, jsx-ast-utils@^2.4.1:
   version "2.4.1"
   resolved "https://registry.yarnpkg.com/jsx-ast-utils/-/jsx-ast-utils-2.4.1.tgz#1114a4c1209481db06c690c2b4f488cc665f657e"
@@ -8115,6 +8343,11 @@ pnp-webpack-plugin@1.6.4:
   dependencies:
     ts-pnp "^1.1.6"
 
+popper.js@1.16.1-lts:
+  version "1.16.1-lts"
+  resolved "https://registry.yarnpkg.com/popper.js/-/popper.js-1.16.1-lts.tgz#cf6847b807da3799d80ee3d6d2f90df8a3f50b05"
+  integrity sha512-Kjw8nKRl1m+VrSFCoVGPph93W/qrSO7ZkqPpTf7F4bk/sqcfWK019dWBUpE/fBOsOQY1dks/Bmcbfn1heM/IsA==
+
 portfinder@^1.0.26:
   version "1.0.28"
   resolved "https://registry.yarnpkg.com/portfinder/-/portfinder-1.0.28.tgz#67c4622852bd5374dd1dd900f779f53462fac778"
@@ -9118,6 +9351,11 @@ react-is@^16.12.0, react-is@^16.6.0, react-is@^16.7.0, react-is@^16.8.1, react-i
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
   integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==
 
+"react-is@^16.8.0 || ^17.0.0":
+  version "17.0.1"
+  resolved "https://registry.yarnpkg.com/react-is/-/react-is-17.0.1.tgz#5b3531bd76a645a4c9fb6e693ed36419e3301339"
+  integrity sha512-NAnt2iGDXohE5LI7uBnLnqvLQMtzhkiAOLXTmv+qnF9Ky7xAPcX8Up/xWIhxvLVGJvuLiNc4xQLtuqDRzb4fSA==
+
 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"
@@ -9207,6 +9445,16 @@ react-scripts@3.4.3:
   optionalDependencies:
     fsevents "2.1.2"
 
+react-transition-group@^4.4.0:
+  version "4.4.1"
+  resolved "https://registry.yarnpkg.com/react-transition-group/-/react-transition-group-4.4.1.tgz#63868f9325a38ea5ee9535d828327f85773345c9"
+  integrity sha512-Djqr7OQ2aPUiYurhPalTrVy9ddmFCCzwhqQmtN+J3+3DzLO209Fdr70QrN8Z3DsglWql6iY1lDWAfpFiBtuKGw==
+  dependencies:
+    "@babel/runtime" "^7.5.5"
+    dom-helpers "^5.0.1"
+    loose-envify "^1.4.0"
+    prop-types "^15.6.2"
+
 react@^16.13.1:
   version "16.13.1"
   resolved "https://registry.yarnpkg.com/react/-/react-16.13.1.tgz#2e818822f1a9743122c063d6410d85c1e3afe48e"
@@ -10450,6 +10698,11 @@ svgo@^1.0.0, svgo@^1.2.2:
     unquote "~1.1.1"
     util.promisify "~1.0.0"
 
+symbol-observable@1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/symbol-observable/-/symbol-observable-1.2.0.tgz#c22688aed4eab3cdc2dfeacbb561660560a00804"
+  integrity sha512-e900nM8RRtGhlV36KGEU9k65K3mPb1WV70OdjfxlG2EAuM1noi/E/BaW/uMhL7bPEssK8QV57vN3esixjUvcXQ==
+
 symbol-tree@^3.2.2:
   version "3.2.4"
   resolved "https://registry.yarnpkg.com/symbol-tree/-/symbol-tree-3.2.4.tgz#430637d248ba77e078883951fb9aa0eed7c63fa2"
@@ -10564,7 +10817,7 @@ tiny-invariant@^1.0.2:
   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.3:
+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==