diff --git a/package-lock.json b/package-lock.json
index 1565414..0fe622a 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -3765,15 +3765,6 @@
       "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.2.0.tgz",
       "integrity": "sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA=="
     },
-    "bindings": {
-      "version": "1.5.0",
-      "resolved": "https://registry.npmjs.org/bindings/-/bindings-1.5.0.tgz",
-      "integrity": "sha512-p2q/t/mhvuOj/UeLlV6566GD/guowlr0hHxClI0W9m7MWYkL1F0hLo+0Aexs9HSPCtR1SXQ0TD3MMKrXZajbiQ==",
-      "optional": true,
-      "requires": {
-        "file-uri-to-path": "1.0.0"
-      }
-    },
     "bluebird": {
       "version": "3.7.2",
       "resolved": "https://registry.npmjs.org/bluebird/-/bluebird-3.7.2.tgz",
@@ -6741,12 +6732,6 @@
         }
       }
     },
-    "file-uri-to-path": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/file-uri-to-path/-/file-uri-to-path-1.0.0.tgz",
-      "integrity": "sha512-0Zt+s3L7Vf1biwWZ29aARiVYLx7iMGnEUl9x33fbB/j3jR81u/O2LbqK+Bm1CDSNDKVtJ/YjwY7TUd5SkeLQLw==",
-      "optional": true
-    },
     "filesize": {
       "version": "6.1.0",
       "resolved": "https://registry.npmjs.org/filesize/-/filesize-6.1.0.tgz",
@@ -11074,7 +11059,6 @@
         "stdout-stream": "^1.4.0",
         "true-case-path": "^1.0.2"
       },
-       
       "dependencies": {
         "ansi-regex": {
           "version": "2.1.1",
@@ -14228,7 +14212,6 @@
         "chokidar": ">=3.0.0 <4.0.0"
       }
     },
-   
     "sass-graph": {
       "version": "2.2.5",
       "resolved": "https://registry.npmjs.org/sass-graph/-/sass-graph-2.2.5.tgz",
@@ -14245,7 +14228,6 @@
           "resolved": "https://registry.npm.taobao.org/ansi-regex/download/ansi-regex-4.1.0.tgz",
           "integrity": "sha1-i5+PCM8ay4Q3Vqg5yox+MWjFGZc="
         },
-    
         "camelcase": {
           "version": "5.3.1",
           "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-5.3.1.tgz",
@@ -14266,7 +14248,6 @@
           "resolved": "https://registry.npm.taobao.org/emoji-regex/download/emoji-regex-7.0.3.tgz?cache=0&sync_timestamp=1614682798745&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Femoji-regex%2Fdownload%2Femoji-regex-7.0.3.tgz",
           "integrity": "sha1-kzoEBShgyF6DwSJHnEdIqOTHIVY="
         },
-     
         "find-up": {
           "version": "3.0.0",
           "resolved": "https://registry.npmjs.org/find-up/-/find-up-3.0.0.tgz",
@@ -17421,7 +17402,6 @@
           "version": "2.1.1",
           "resolved": "https://registry.npmjs.org/string-width/-/string-width-2.1.1.tgz",
           "integrity": "sha512-nOqH59deCq9SRHlxq1Aw85Jnt4w6KvLKqWVik6oA9ZklXLNIOlqg4F2yrT1MVaTjAqvVwdfeZ7w7aCvJD7ugkw==",
-
           "requires": {
             "is-fullwidth-code-point": "^2.0.0",
             "strip-ansi": "^4.0.0"
diff --git a/src/App.js b/src/App.js
index 3bed95c..9500e67 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,28 +1,28 @@
-import logo from './logo.svg';
 import '../src/styles/app.scss';
 import { BrowserRouter, Route, Switch } from "react-router-dom";
-import AuthPage from '../src/views/Auth/AuthPage';
 import LoginForm from "./views/Auth/LoginForm";
 import SignUpForm from "./views/Auth/SignUpForm";
 import FAQ from '../src/views/faq/faq';
+import Events from '../src/views/events/event';
 import Home from '../src/views/home/home';
 
 function App() {
   return (
     <BrowserRouter>
-    <Switch>
-      <Route exact
-      path="/signup"
-      name="SignUpForm"
-      component={SignUpForm}/>
-      <Route exact
-      path="/signin"
-      name="LoginForm"
-      component={LoginForm}/>
-      <Route path="/faq"> <FAQ /> </Route>
-       <Route path="/"> <Home /> </Route>
-    
-    </Switch>
+      <Switch>
+        <Route exact
+          path="/signup"
+          name="SignUpForm"
+          component={SignUpForm} />
+        <Route exact
+          path="/signin"
+          name="LoginForm"
+          component={LoginForm} />
+        <Route path="/faq"> <FAQ /> </Route>
+        <Route path="/events"> <Events /> </Route>
+        <Route path="/"> <Home /> </Route>
+
+      </Switch>
     </BrowserRouter>
   );
 }
diff --git a/src/assets/images/eventman.png b/src/assets/images/eventman.png
new file mode 100644
index 0000000..5a33614
Binary files /dev/null and b/src/assets/images/eventman.png differ
diff --git a/src/assets/images/eventwoman.png b/src/assets/images/eventwoman.png
new file mode 100644
index 0000000..5900adb
Binary files /dev/null and b/src/assets/images/eventwoman.png differ
diff --git a/src/components/Card.jsx b/src/components/Card.jsx
deleted file mode 100644
index 3254e16..0000000
--- a/src/components/Card.jsx
+++ /dev/null
@@ -1,28 +0,0 @@
-import React from "react";
-import { makeStyles } from "@material-ui/core/styles";
-
-export function Card({ title, icon, subtitle, details }) {
-  const classes = useStyles();
-
-  return (
-    <div class="card-box">
-      <div class="card-title tr">
-        <p class="lx-s">Hacktoberfest Online Meetup in La Défense</p>
-      </div>
-      <p class="lm">La Défense, France</p>
-      <hr />
-      <p class="ts">2020/10/01 CET</p>
-    </div>
-  );
-}
-
-// export function SmallCard({ title }) {
-//   return (
-//     <div class="card-box-sm">
-//       <div class="card-title tr">
-//         <p class="lx-s"> {title}</p>
-//       </div>
-//       <p class="lm">5 Tonnes</p>
-//     </div>
-//   );
-// }
diff --git a/src/components/eventcard.js b/src/components/eventcard.js
new file mode 100644
index 0000000..b9a47ec
--- /dev/null
+++ b/src/components/eventcard.js
@@ -0,0 +1,16 @@
+import React from "react";
+import '../styles/components/eventcard.css';
+
+function Card(props) {
+    return (
+        <div className="card event-card">
+            <div class="card-body">
+                <h5 class="card-title">{props.eventTitle}</h5>
+                <h6 class="card-subtitle mb-2">{props.eventLocation}</h6>
+                <p class="card-text">{props.eventTime}</p>
+            </div>
+        </div>
+    );
+}
+
+export default Card;
\ No newline at end of file
diff --git a/src/components/header.js b/src/components/header.js
index 9138141..eb81b8c 100644
--- a/src/components/header.js
+++ b/src/components/header.js
@@ -14,7 +14,7 @@ class Header extends Component {
         return (
             <React.Fragment>
                 <nav className="navbar navbar-expand-md navbar-lighter bg-lighter">
-                    <a className="navbar-brand" href="#">
+                    <a className="navbar-brand" href="/">
                         <img src={Logo} alt="Logo" className="logo" />
                     </a>
                     <button className="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
@@ -30,7 +30,7 @@ class Header extends Component {
                                 <a className="nav-link" href="#">Resources</a>
                             </li>
                             <li className="nav-item active">
-                                <a className="nav-link" href="#">Events</a>
+                                <a className="nav-link" href="/events">Events</a>
                             </li>
                             <li className="nav-item active">
                                 <a className="nav-link" href="/faq">FAQs</a>
diff --git a/src/components/subscribe.js b/src/components/subscribe.js
index 8ff67ea..1d65f4a 100644
--- a/src/components/subscribe.js
+++ b/src/components/subscribe.js
@@ -25,11 +25,11 @@ class Subscribe extends Component {
                                 <p className="leads"> Support open source and pick a limited edition T-shirt or plant a tree.</p>
                                 <Form>
                                     <Form.Row>
-                                        <Col md={8}>
+                                        <Col md={8} sm={7}>
                                             <Form.Control placeholder="Email Address" />
                                         </Col>
                                         <Col >
-                                            <Button className="sub-button" type="submit">SUBSCRIBE</Button>
+                                            <Button className="sub-button xbs" type="submit">SUBSCRIBE</Button>
                                         </Col>
                                     </Form.Row>
                                 </Form>
diff --git a/src/styles/components/eventcard.css b/src/styles/components/eventcard.css
new file mode 100644
index 0000000..231e611
--- /dev/null
+++ b/src/styles/components/eventcard.css
@@ -0,0 +1,71 @@
+.event-card {
+    width: 30%;
+    text-align: left;
+    background: #3F3F3F42 0% 0% no-repeat padding-box;
+    border: 1px solid #70707042;
+    border-radius: 15px;
+    margin: 16px 16px;
+}
+
+.card-body {
+   opacity: 1;
+}
+
+.card-title {
+    text-align: left;
+    letter-spacing: 2px;
+    color: #FFFFFF;
+    font-size: 16px;
+    padding: 15px 25px;
+    font-family: FTPolar;
+    font-weight: bold;
+}
+
+.card-subtitle {
+    text-align: left;
+    font-size: 12px;
+    letter-spacing: 1px;
+    color: #FFFFFF80;
+    padding: 0px 25px;
+    font-weight: bold;
+    font-family: Axiforma;
+}
+
+.card-text {
+    text-align: left;
+    font-family: Axiforma;
+    font-size: 10px;
+    letter-spacing: 1px;
+    color: #B70569;
+    padding: 40px 25px 35px;
+    font-weight: bold;
+}
+
+@media (min-width: 992px) and (max-width: 1199px) {
+    .event-card {
+        width: 29%;
+        margin: 16px 20px;
+    }
+    
+} 
+
+@media (min-width: 768px) and (max-width: 991px) {
+    .event-card {
+        width: 45%;
+        margin: 16px 17px;
+    }
+}
+
+@media (min-width: 560px) and (max-width: 767px) {
+    .event-card {
+        width: 46%;
+        margin: 16px 10px;
+    }
+}
+
+@media (max-width: 559px) {
+    .event-card {
+        width: 60%;
+        margin: 16px auto;
+    }
+}
\ No newline at end of file
diff --git a/src/styles/components/subscribe.css b/src/styles/components/subscribe.css
index 068b725..3bea979 100644
--- a/src/styles/components/subscribe.css
+++ b/src/styles/components/subscribe.css
@@ -25,9 +25,19 @@ form {
     border: 1px solid #70707042;
     border-radius: .5rem;
     color: #D1D1D1;
-    /* border: 0; */
+    padding: .375rem .0rem;
     font-size: 10px;
     height: 40px;
+    padding-left: 3px;
+}
+
+.form-control:focus {
+    background-color: #FFFFFF50;
+   
+}
+
+.btn {
+    padding: .375rem .15rem;
 }
 
 .sub-button {
@@ -60,3 +70,9 @@ form {
         margin: 1rem 4rem 2rem;
     }
 }
+
+@media (max-width: 575px) {
+    .xbs {
+        margin-top: 10px;
+    }
+}
diff --git a/src/styles/views/event.css b/src/styles/views/event.css
new file mode 100644
index 0000000..cf6a780
--- /dev/null
+++ b/src/styles/views/event.css
@@ -0,0 +1,45 @@
+.events {
+    margin-bottom: 35px;
+}
+
+.header-img {
+    height: 30px;
+    width: 30px;
+}
+
+.up img {
+    vertical-align: top;
+    height: 100px;
+    width: 100px;
+}
+
+.down img {
+    height: 110px;
+    width: 110px;
+    bottom: 0;
+    position: absolute;
+    left: 0;
+}
+
+.mid {
+    padding-top: 50px;
+}
+
+.form {
+    padding-top: 25px;
+}
+
+.event-button {
+    width: 66%;
+    float: left;
+}
+
+@media (max-width: 767px) {
+    .up img, .down img, .hide-form {
+        display: none;
+    }
+
+    .event-button {
+        width: 100%;
+    }
+}
\ No newline at end of file
diff --git a/src/views/events/event.js b/src/views/events/event.js
new file mode 100644
index 0000000..557ac5c
--- /dev/null
+++ b/src/views/events/event.js
@@ -0,0 +1,69 @@
+import React from 'react';
+import Header from '../../components/header';
+import Footer from '../../components/footer';
+import Subscribe from '../../components/subscribe';
+import Card from '../../components/eventcard';
+import woman from '../../assets/images/eventwoman.png';
+import man from '../../assets/images/eventman.png';
+import '../../styles/views/event.css';
+import Form from "react-bootstrap/Form";
+import Col from "react-bootstrap/Col";
+import Button from "react-bootstrap/Button";
+
+function Events() {
+    let eventCards = [];
+    for (var i = 0; i < 9; i++) {
+        eventCards.push(
+            <Card
+                eventTitle="Hacktoberfest Online Meetup in La Défense"
+                eventLocation="La Défense, France"
+                eventTime="2020/10/01 CET"
+            />
+        );
+    }
+    return (
+        <React.Fragment>
+            <Header />
+            <div className="container">
+                <div className="jumbotron">
+                    <div className="row">
+                        <div className="col up">
+                            <img src={woman} alt="..." />
+                        </div>
+                        <div className="col-md-7 mid">
+                            <h1>All Events</h1>
+                            <p className="lead"> Support open source and pick a limited edition T-shirts</p>
+                        </div>
+                        <div className="col down">
+                            <img src={man} alt="..." />
+                        </div>
+                    </div>
+                    <Form className="form">
+                        <Form.Row>
+                            <Col>
+                                <Form.Control placeholder="Location" />
+                            </Col>
+                            <Col>
+                                <Form.Control placeholder="Time Zone" />
+                            </Col>
+                            <Col>
+                                <Form.Control placeholder="Keyword" />
+                            </Col>
+                            <Col >
+                                <Button className="sub-button event-button" type="submit">SEARCH</Button>
+                            </Col>
+                            <Col className="hide-form"></Col>
+                        </Form.Row>
+                    </Form>
+                </div>
+                <div className="row events">
+                    {eventCards}
+                </div>
+                <Subscribe />
+            </div>
+            <Footer />
+        </React.Fragment >
+    )
+}
+
+export default Events;
\ No newline at end of file