diff --git a/_data/events.yml b/_data/events.yml
new file mode 100644
index 0000000000..8c4cb9ddbf
--- /dev/null
+++ b/_data/events.yml
@@ -0,0 +1,11 @@
+---
+- name: Onboarding
+  text: If you are new to the community, join us for Onboarding Night! We offer both Guided Onboarding and Self Onboarding options on our <a target='_blank' href='getting-started'>Getting Started</a> page.
+  link: '../assets/images/getting-started/step1.png'
+- name: Workshops
+  text: We host workshops on a range of topics, from development best practices to project management methodologies. Please check back for the current workshop schedule.
+  link: '../assets/images/hack-nights/building.png'
+- name: Happy Hour
+  text: Bars and cafes are shut down, but that doesn’t mean we can’t enjoy each other’s company! Grab your beverage of choice and socialize with fellow hackers following some organizational announcements.
+  link: ../assets/images/hack-nights/happy-hour.png
+---
\ No newline at end of file
diff --git a/_sass/components/_events.scss b/_sass/components/_events.scss
index 002f5b50cc..e9bdc60f71 100644
--- a/_sass/components/_events.scss
+++ b/_sass/components/_events.scss
@@ -87,21 +87,21 @@
   text-align: center;
   max-width: 150px;
 }
-.getting-started-page-card-hack-nights {
+.column-card-lg--events {
   background: #fff;
   border: 0 solid rgba(51, 51, 51, 0.06);
-  border-radius: 16px;
+  border-radius: 20px;
   box-shadow: 0 0 8px 0 rgba(51, 51, 51, 0.2);
   overflow: hidden;
   max-width: 489px;
   margin-bottom: 0;
-  padding: 18px;
+  padding: 32px;
   margin: 8px;
   font-family: "Roboto" sans-serif;
 
   // NEW MOBILE FRIENDLY RULES
   @media #{$bp-below-tablet} {
-    padding: 30px 15px;
+    padding: 5px 15px;
   }
 }
 
@@ -129,7 +129,8 @@
 
 .meetup-steps {
   display: flex;
-  margin: 17px 0;
+  align-items: center;
+  margin: 24px 0;
 
   @media #{$bp-below-mobile} {
     flex-direction: column;
@@ -138,6 +139,8 @@
 }
 .meetup-steps-2 {
   display: flex;
+  align-items: center;
+  margin: 24px 0;
   @media #{$bp-below-mobile} {
     flex-direction: column;
     text-align: center;
@@ -151,8 +154,6 @@
 
   @media #{$bp-below-mobile} {
     padding: 0;
-    font-size: 12px;
-    line-height: 14px;
     text-align: initial;
     margin: 37px;
   }
@@ -164,8 +165,6 @@
 
   @media #{$bp-below-mobile} {
     padding: 8px;
-    font-size: 12px;
-    line-height: 14px;
     text-align: initial;
     margin-bottom: 25px;
   }
@@ -185,11 +184,10 @@
 
 .notification-banner p {
   text-align: center;
-  margin: auto 18%;
+  margin: auto 29%;
   padding: 20px;
-  font-size: 25px;
-  line-height: 29px;
-  font-weight: normal;
+  font-size: 1rem;
+  font-weight: 700;
 
   @media #{$bp-below-mobile} {
     text-align: justify;
@@ -286,14 +284,13 @@
 }
 
 .title-meetup {
-  font-size: 25px;
+  font-size: 1.25rem;
   text-align: center;
-  margin: 30px;
-  font-weight: normal;
+  font-weight: 700;
+  text-align: left;
+  margin-bottom: 16px;
+
 
-  @media #{$bp-below-mobile} {
-    margin: 0;
-  }
 }
 
 // .btn-meet {
@@ -321,7 +318,7 @@
 
 .class-btn {
   text-align: center;
-  // margin-top: 33%;
+  margin-top: 8px;
 
   @media #{$bp-below-mobile} {
     margin: 0;
@@ -329,7 +326,7 @@
 }
 
 .btn--events {
-  margin-top: 32px;
+  margin-bottom: 32px;
 }
 
 .event-title-1 {
@@ -344,6 +341,8 @@
     font-size: 17px;
     display: flex;
     justify-content: space-between;
+    margin-bottom: 16px;
+
   }
 }
 
@@ -369,10 +368,11 @@
 }
 .event-title {
   text-align: center;
-  font-size: 30px;
+  font-size: 1.5rem;
   margin-top: 20px;
-  line-height: 35px;
-  font-weight: normal;
+  font-weight: 700;
+  margin-bottom: 15px;
+
 }
 
 @media #{$bp-below-tablet} {
@@ -380,6 +380,7 @@
     font-size: 17px;
     display: flex;
     justify-content: space-between;
+    align-items: center;
   }
   .event-title::after {
     content: "\221F";
@@ -430,6 +431,13 @@
   list-style: none;
   font-size: 16px;
   line-height: 19px;
+
+  grid-template-columns: repeat(2, 1fr);
+  display: grid;
+
+
+
+
   @media #{$bp-below-tablet} {
     font-size: 13px;
     line-height: 15px;
@@ -437,9 +445,12 @@
 }
 
 .day-header-1 {
+  text-transform: uppercase;
   margin-block-end: 0.25em;
-  line-height: 21px;
-  font-size: 16px;
+  font-size: 1rem;
+  font-weight: 700;
+  margin: 30px 0 10px 0;
+  padding:0;
   @media #{$bp-below-tablet} {
     font-size: 15px;
     line-height: 18px;
@@ -496,3 +507,20 @@
       color: $color-white;
     }
 
+
+
+.events-page{
+  background: #030c2c;
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  font-family: "Roboto"sans-serif;
+  font-style: normal;
+  font-weight: normal;
+}
+
+.userTimeZone {
+  font-weight: 700;
+}
\ No newline at end of file
diff --git a/events.html b/events.html
deleted file mode 100644
index 2c4c26866a..0000000000
--- a/events.html
+++ /dev/null
@@ -1,659 +0,0 @@
----
-layout: default
-title: Hack Nights
----
-
-<div class="header-container hacknights--header-container">
-  <h1>Events</h1>
-  <div class="content-hack-night">
-    <div class="show-video">
-      <div>
-        <h2 class="header-desc">
-          Hack for LA is the Los Angeles brigade of
-          <a href="http://brigade.codeforamerica.org/" target="_blank">Code for America</a>,
-          a network of civic-minded technologists who contribute their skills
-          toward using the web as a platform for local government and community
-          service.
-        </h2>
-        <!--This is hidden when full screen and shown when mobile and tablet-->
-        <div class="fullscreen--hide-video">
-          <div>
-            <iframe class="video-size" src="https://embed.ted.com/talks/jennifer_pahlka_coding_a_better_government"
-              width="854" height="480" frameborder="0" scrolling="no" allowfullscreen></iframe>
-          </div>
-        </div>
-
-        <p id="head-content" class="hacknights--head-content">
-          To learn more, watch the
-          <a href="https://www.ted.com/talks/jennifer_pahlka_coding_a_better_government" target="_blank">Ted Talk</a>
-          by Code for America founder, Jennifer Pahlka, on maintaining a better government through code.
-        </p>
-      </div>
-
-      <div class="mobile--hide-video fullscreen-video">
-        <div class="events-video-fullscreen-container">
-          <iframe class="video-size" src="https://embed.ted.com/talks/jennifer_pahlka_coding_a_better_government"
-            width="854" height="480" frameborder="0" scrolling="no" allowfullscreen></iframe>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-
-<div class="getting-started-page">
-  <h1 style="color: #ffffff; margin-top: 75px; font-size: 35px">Our Events</h1>
-  <div class="flex-page-card">
-    <div class="getting-started-page-card-hack-nights">
-      <h2 class="event-title">
-        <img class="vector-img" src="./assets/images/hack-nights/meetup.svg" alt="image of an m" />
-        Meetup Events
-      </h2>
-      <div class="mobile-dropdown">
-        <h2 class="title-meetup">Onboarding</h2>
-        <div class="meetup-steps">
-          <div id="img-content">
-            <img class="step-img-1" src="./assets/images/getting-started/step1.png" />
-          </div>
-          <div id="text-content">
-            <p>
-              If you are new to the community, join us for Onboarding Night! We
-              offer both Guided Onboarding and Self Onboarding options on our
-              <a target="_blank" href="getting-started">Getting Started</a>
-              page.
-            </p>
-          </div>
-        </div>
-
-        <h2 class="title-meetup">Workshops</h2>
-        <div class="meetup-steps">
-          <div id="img-content">
-            <img class="step-img-1" src="/assets/images/hack-nights/building.png" />
-          </div>
-          <div id="text-content">
-            <p>
-              We host workshops on a range of topics, from development best
-              practices to project management methodologies. Please check back
-              for the current workshop schedule.
-            </p>
-          </div>
-        </div>
-
-        <h2 class="title-meetup">Happy Hour</h2>
-        <div class="meetup-steps">
-          <div id="img-content">
-            <img class="step-img-1" src="assets/images/hack-nights/happy-hour.png" />
-          </div>
-          <div id="text-content">
-            <p>
-              Bars and cafes are shut down, but that doesn’t mean we can’t enjoy
-              each other’s company! Grab your beverage of choice and socialize
-              with fellow hackers following some organizational announcements.
-            </p>
-          </div>
-        </div>
-        <div class="class-btn">
-          <a href="https://www.meetup.com/hackforla/events" target="_blank">
-            <button class="btn btn-primary btn-lg btn--events">View on Meetup</button></a>
-        </div>
-      </div>
-    </div>
-    <div class="getting-started-page-card-hack-nights">
-      <h2 class="event-title">
-        <img class="vector-img" src="./assets/images/hack-nights/meetings.svg" alt="image of a group of people" />
-        Online Project Team Meetings
-      </h2>
-      <div class="mobile-dropdown">
-        <div class="meetup-steps-2">
-          <div id="img-content">
-            <img class="step-img-2" src="/assets/images/hack-nights/org-projects.png" />
-          </div>
-          <div id="text-content-1">
-            <p>
-              Please review the listing of project team meeting times to find a
-              project that fits your schedule. You are welcome to attend a
-              project team meeting after you have completed
-              <a href="https://undebate-cc.herokuapp.com/hackforla-projects" target="_blank">Onboarding</a>.
-            </p>
-          </div>
-        </div>
-        <div class="days-display-1">
-          <div id="userTimeZone" class='userTimeZone'></div>
-          <div id="Monday">
-            <h3 class="day-header-1">
-              Monday
-            </h3>
-            <ul id="Monday-List" class="schedule-list-1"></ul>
-          </div>
-          <div id="Tuesday">
-            <h3 class="day-header-1">
-              Tuesday
-            </h3>
-            <ul id="Tuesday-List" class="schedule-list-1"></ul>
-          </div>
-          <div id="Wednesday">
-            <h3 class="day-header-1">
-              Wednesday
-            </h3>
-            <ul id="Wednesday-List" class="schedule-list-1"></ul>
-          </div>
-          <div id="Thursday">
-            <h3 class="day-header-1">
-              Thursday
-            </h3>
-            <ul id="Thursday-List" class="schedule-list-1"></ul>
-          </div>
-          <div id="Friday">
-            <h3 class="day-header-1">
-              Friday
-            </h3>
-            <ul id="Friday-List" class="schedule-list-1"></ul>
-          </div>
-          <div id="Saturday">
-            <h3 class="day-header-1">
-              Saturday
-            </h3>
-            <ul id="Saturday-List" class="schedule-list-1"></ul>
-          </div>
-          <div id="Sunday">
-            <h3 class="day-header-1">
-              Sunday
-            </h3>
-            <ul id="Sunday-List" class="schedule-list-1"></ul>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-
-  <h1 style="color: #ffffff; margin-top: 40px; font-size: 35px">
-    Our Locations
-  </h1>
-  <div class="notification-banner">
-    <p class="meetings-message">
-      In light of the COVID-19 pandemic, Hack for LA has suspended its in-person
-      events below. The organization remains fully active, and all events are
-      now being conducted remotely using Zoom at the days/times listed above.
-    </p>
-
-    <div class="getting-started-mobile-page">
-      <h2 class="event-title-1">
-        <img class="vector-img" src="./assets/images/hack-nights/locations.svg" alt="image of a location icon" />
-        See our Locations
-      </h2>
-    </div>
-  </div>
-
-  <div class="mobile-locations-dropdown">
-    <div class="getting-started-page-card-locations">
-      <div class="locations-1">
-        <div class="location-img-pos">
-          <img class="location-image" src="assets/images/hack-nights/westside1.png" alt="westside" />
-        </div>
-        <div class="location-content">
-          <h1 style="font-size: 35px; font-weight: normal">Monday</h1>
-          <div class="mini-projects">
-            <div class="img-dis">
-              <img id="mini-img" src="/assets/images/projects/engage.jpg" alt="" />
-              <div class="proj-desc">
-                <a href="https://www.hackforla.org/projects/engage">Engage</a>
-              </div>
-            </div>
-
-            <div class="img-dis">
-              <img id="mini-img" src="assets/images/projects/hellogov.jpg" alt="" />
-              <div class="proj-desc">
-                <a href="https://www.hackforla.org/projects/hellogov">HelloGOV</a>
-              </div>
-            </div>
-
-            <div class="img-dis">
-              <img id="mini-img" src="assets/images/projects/lucky-parking.png" alt="" />
-              <div class="proj-desc">
-                <a href="https://www.hackforla.org/projects/lucky-parking">Lucky Parking</a>
-              </div>
-            </div>
-
-            <div class="img-dis">
-              <img id="mini-img" src="assets/images/projects/new-schools-today.jpg" alt="" />
-              <div class="proj-desc">
-                <a href="https://www.hackforla.org/projects/new-schools-today">New Schools Today</a>
-              </div>
-            </div>
-
-            <div class="img-dis">
-              <img id="mini-img" src="assets/images/projects/not-today.png" alt="" />
-              <div class="proj-desc">
-                <a href="https://www.hackforla.org/projects/not-today">Not Today</a>
-              </div>
-            </div>
-
-            <div class="img-dis">
-              <img id="mini-img" src="assets/images/projects/public-tree-map.png" alt="" />
-              <div class="proj-desc">
-                <a href="">Public Tree Map</a>
-              </div>
-            </div>
-
-            <div class="img-dis">
-              <img id="mini-img" src="assets/images/projects/vrms.png" alt="" />
-              <div class="proj-desc">
-                <a href="https://www.hackforla.org/projects/vrms">VRMS</a>
-              </div>
-            </div>
-
-            <div class="img-dis">
-              <img id="mini-img" src="assets/images/projects/website.png" alt="" />
-              <div class="proj-desc">
-                <a href="https://www.hackforla.org/projects/website">HackforLA Website</a>
-              </div>
-            </div>
-
-            <div class="img-dis">
-              <img id="mini-img" src="assets/images/projects/undebate.jpg" alt="" />
-              <div class="proj-desc">
-                <a href="https://www.hackforla.org/projects/undebate">Undebate</a>
-              </div>
-            </div>
-
-            <div class="img-dis">
-              <img id="mini-img" src="assets/images/projects/record-clearance.jpg" alt="" />
-              <div class="proj-desc">
-                <a href="https://www.hackforla.org/projects/record-clearance-project">Clearance Project</a>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-
-    <div class="getting-started-page-card-locations">
-      <div class="locations-1">
-        <div class="location-img-pos">
-          <img class="location-image" src="assets/images/hack-nights/DTLA.png" alt="DTLA" />
-        </div>
-        <div class="location-content">
-          <h1 style="font-size: 35px; font-weight: normal">Tuesday</h1>
-          <div class="mini-projects">
-            <div class="img-dis">
-              <img id="mini-img" src="assets/images/projects/311.jpg" alt="" />
-              <div class="proj-desc">
-                <a href="https://www.hackforla.org/projects/311-data">311 Data</a>
-              </div>
-            </div>
-
-            <div class="img-dis">
-              <img id="mini-img" src="assets/images/projects/civic-tech-index.png" alt="" />
-              <div class="proj-desc">
-                <a href="https://www.hackforla.org/projects/civic-tech-index">Civic Tech Index</a>
-              </div>
-            </div>
-
-            <div class="img-dis">
-              <img id="mini-img" src="assets/images/projects/tdm-calculator.jpg" alt="" />
-              <div class="proj-desc">
-                <a href="https://www.hackforla.org/projects/tdm-calculator">LA TDM Calculator</a>
-              </div>
-            </div>
-
-            <div class="img-dis">
-              <img id="mini-img" src="assets/images/projects/vrms.png" alt="" />
-              <div class="proj-desc">
-                <a href="https://www.hackforla.org/projects/vrms">VRMS</a>
-              </div>
-            </div>
-
-            <div class="img-dis">
-              <img id="mini-img" src="assets/images/projects/home-unite-us.png" alt="" />
-              <div class="proj-desc">
-                <a href="https://www.hackforla.org/projects/home-unite-us">Home Unite Us</a>
-              </div>
-            </div>
-
-            <div class="img-dis">
-              <img id="mini-img" src="assets/images/projects/website.png" alt="" />
-              <div class="proj-desc">
-                <a href="https://www.hackforla.org/projects/website">HackforLA Website</a>
-              </div>
-            </div>
-
-            <div class="img-dis">
-              <img id="mini-img" src="assets/images/projects/writeforall.png" alt="" />
-              <div class="proj-desc">
-                <a href="https://www.hackforla.org/projects/writeforall">Write for All</a>
-              </div>
-            </div>
-
-            <div class="img-dis">
-              <img id="mini-img" src="assets/images/projects/food-oasis.jpg" alt="" />
-              <div class="proj-desc">
-                <a href="https://www.hackforla.org/projects/food-oasis">Food Oasis</a>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-
-    <div class="getting-started-page-card-locations">
-      <div class="locations-1">
-        <div class="location-img-pos">
-          <img class="location-image" src="assets/images/hack-nights/southla.png" alt="southLA" />
-        </div>
-        <div class="location-content">
-          <h1 style="font-size: 35px; font-weight: normal">Wednesday</h1>
-          <div class="mini-projects description">
-            <p>
-              Our South LA meetup was created by a community member on our
-              leadership team.
-            </p>
-            <p>
-              The mission of the South LA hacknight is to offer free technical
-              education opportunities and facilitate user centered design and
-              software development projects to improve civic life in the local
-              area with local partners and stakeholders.
-            </p>
-            <p>
-              This meetup is just getting started, there are no current
-              projects.
-            </p>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-
-<script>
-  const locationsDropDown = document.querySelector(
-    ".getting-started-mobile-page"
-  );
-  const showingLocations = document.querySelector(".mobile-locations-dropdown");
-  const showContent = document.querySelectorAll(".event-title");
-  const showLocations = document.querySelector(".event-title-1");
-
-  showLocations.addEventListener("click", function () {
-    this.classList.toggle("active");
-    if (showingLocations.style.display == "block") {
-      showingLocations.style.display = "none";
-    } else {
-      showingLocations.style.display = "block";
-    }
-  });
-
-  for (let i = 0; i < showContent.length; i++) {
-    showContent[i].addEventListener("click", showingDropDown);
-  }
-
-  function showingDropDown() {
-    this.classList.toggle("active");
-    let dropDown = this.nextElementSibling;
-
-    if (dropDown.style.display === "block") {
-      dropDown.style.display = "none";
-    } else {
-      dropDown.style.display = "block";
-    }
-  }
-</script>
-
-<script>
-
-
-
-  // Assigns local JSON Data to localData variable
-  {% assign localData = site.data.vrms_data | jsonify %}
-  let localData = {{ localData }};
-
-  const API_URL = 'https://www.vrms.io/api/recurringevents';
-
-  // Assigns variable to each header by ID
-  const mondayList = document.querySelector("#Monday-List");
-  const tuesdayList = document.querySelector("#Tuesday-List");
-  const wednesdayList = document.querySelector("#Wednesday-List");
-  const thursdayList = document.querySelector("#Thursday-List");
-  const fridayList = document.querySelector("#Friday-List");
-  const saturdayList = document.querySelector("#Saturday-List");
-  const sundayList = document.querySelector("#Sunday-List");
-
-  // GET request
-  let calendarFetch = fetch(API_URL, {
-    method: 'GET'
-  });
-
-  // Function schedules data that is passed in
-  function schedule(scheduleData) {
-    let daysReceived = [];
-    let days = ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"];
-    let daysMatched = [];
-    
-    //sorting based on Hours then minutes
-    scheduleData.sort(
-    function(a, b) {
-        var newA = new Date(a.startTime);  
-        var newB = new Date(b.startTime);
-        if (newA.getHours() != newB.getHours() ) {
-            return (newA.getHours() - newB.getHours());
-        } else {
-            return newA.getMinutes() - newB.getMinutes();
-        }
-    } );
-
-    // Loops through data and assigns information to variables in a readable format
-    for (let i = 0; i <= scheduleData.length - 1; i++) {
-      let startTime = timeFormat(new Date(scheduleData[i].startTime));
-      let endTime = timeFormat(new Date(scheduleData[i].endTime));
-      let webURL = scheduleData[i].project.hflaWebsiteUrl;
-      let projectName = scheduleData[i].project.name;
-      let description = scheduleData[i].description;
-      let day = new Date(scheduleData[i].date).toString().substring(0, 3);
-      let scheduleClass;
-
-      // Fills up array of days received to later check if any days are missing
-      daysReceived.push(day);
-
-      // Checks if days received matches days of the week
-      for (let j = 0; j <= daysReceived.length - 1; j++) {
-        for (let k = 0; k <= days.length - 1; k++) {
-          if (daysReceived[j] == days[k]) {
-            daysMatched.push(days[k]);
-          }
-        }
-      }
-
-      // Function that adds data to proper header
-      function scheduleDay() {
-        let dayList;
-        // Assigns different class to data depending if it utilized local JSON file or the VRMS fetch data
-        if (scheduleData == localData) {
-          scheduleClass = "localData";
-        } else {
-          scheduleClass = "updated";
-        }
-        if ((day === "Mon")) {
-          dayList = mondayList;
-        } else if ((day === "Tue")) {
-          dayList = tuesdayList;
-        } else if ((day === "Wed")) {
-          dayList = wednesdayList;
-        } else if ((day === "Thu")) {
-          dayList = thursdayList;
-        } else if ((day === "Fri")) {
-          dayList = fridayList;
-        } else if ((day === "Sat")) {
-          dayList = saturdayList;
-        } else if ((day === "Sun")) {
-          dayList = sundayList;
-        }
-
-        dayList.insertAdjacentHTML("beforeend",
-          `<li class="${scheduleClass}">${startTime} - ${endTime} <a href="${webURL}">${projectName}</a> ${description}</li>`
-        );
-      }
-
-      scheduleDay(day);
-    }
-
-    // Removes duplicate days from days matched
-    let cleanArray = removeDuplicates(daysMatched);
-
-    // Fills up array with days that have nothing scheduled
-    let emptyDays = arr_diff(days, cleanArray);
-
-    // Passes in array of days with nothing scheduled
-    if (emptyDays) {
-      // Function passes in array of days that outputs an li element w/ "There are no meeting scheduled" to days without meetings scheduled
-      function scheduleEmpty(emptyDays) {
-        for (let a = 0; a <= emptyDays.length - 1; a++) {
-          let emptyDayList;
-          let day = emptyDays[a].toString();
-          // Assigns different class to data depending if it utilized local JSON file or the VRMS fetch data
-          if (scheduleData == localData) {
-            scheduleClass = "localData";
-          } else {
-            scheduleClass = "updated";
-          }
-          if ((day === "Mon")) {
-            emptyDayList = mondayList;
-          } else if ((day === "Tue")) {
-            emptyDayList = tuesdayList;
-          } else if ((day === "Wed")) {
-            emptyDayList = wednesdayList;
-          } else if ((day === "Thu")) {
-            emptyDayList = thursdayList;
-          } else if ((day === "Fri")) {
-            emptyDayList = fridayList;
-          } else if ((day === "Sat")) {
-            emptyDayList = saturdayList;
-          } else if ((day === "Sun")) {
-            emptyDayList = sundayList;
-          }
-
-          emptyDayList.insertAdjacentHTML("beforeend",
-            `<li class="${scheduleClass}">There are no meetings scheduled.</li>`);
-        }
-      }
-      // Executes empty schedule
-      scheduleEmpty(emptyDays)
-    }
-  }
-
-  // Function removes duplicates in an array
-  function removeDuplicates(array) {
-    return array.filter((a, b) => array.indexOf(a) === b)
-  };
-
-  // Function checks for differences between two arrays
-  function arr_diff(a1, a2) {
-
-    let a = [],
-      diff = [];
-
-    for (let i = 0; i < a1.length; i++) {
-      a[a1[i]] = true;
-    }
-
-    for (let i = 0; i < a2.length; i++) {
-      if (a[a2[i]]) {
-        delete a[a2[i]];
-      } else {
-        a[a2[i]] = true;
-      }
-    }
-
-    for (let k in a) {
-      diff.push(k);
-    }
-
-    return diff;
-    // console.log(diff)
-  }
-
-  // Function clears the schedule
-  function clearSchedule() {
-    let prevMonList = mondayList.getElementsByClassName("localData");
-    let prevTueList = tuesdayList.getElementsByClassName("localData");
-    let prevWedList = wednesdayList.getElementsByClassName("localData");
-    let prevThuList = thursdayList.getElementsByClassName("localData");
-    let prevFriList = fridayList.getElementsByClassName("localData");
-    let prevSatList = saturdayList.getElementsByClassName("localData");
-    let prevSunList = sundayList.getElementsByClassName("localData");
-
-    while (prevMonList[0]) {
-      prevMonList[0].parentNode.removeChild(prevMonList[0]);
-    }
-    while (prevTueList[0]) {
-      prevTueList[0].parentNode.removeChild(prevTueList[0]);
-    }
-    while (prevWedList[0]) {
-      prevWedList[0].parentNode.removeChild(prevWedList[0]);
-    }
-    while (prevThuList[0]) {
-      prevThuList[0].parentNode.removeChild(prevThuList[0]);
-    }
-    while (prevFriList[0]) {
-      prevFriList[0].parentNode.removeChild(prevFriList[0]);
-    }
-    while (prevSatList[0]) {
-      prevSatList[0].parentNode.removeChild(prevSatList[0]);
-    }
-    while (prevSunList[0]) {
-      prevSunList[0].parentNode.removeChild(prevSunList[0]);
-    }
-  }
-
-  // Executes schedule with localData
-  schedule(localData);
-
-  // Fetchs JSON file from VRMS_API
-  calendarFetch
-    .then(response => response.json())
-    .then((data) => {
-      // Checks for differences between localData and VRMS data
-      if (arr_diff(data, localData)) {
-        clearSchedule();
-        schedule(data);
-      }
-    })
-    .catch(err => {
-      console.log(err);
-    })
-
-  // Formats time to be readable
-  function timeFormat(time) {
-    hours = time.getHours();
-    minutes = time.getMinutes();
-
-    if (minutes == 0) {
-      minutes = minutes + "0";
-    }
-
-    if (hours < 12 && hours !== 0) {
-      return `${hours}:${minutes} am`;
-    } else if (hours === 0) {
-      return `12:${minutes} am`;
-    } else if (hours > 12) {
-      hours = hours - 12;
-      return `${hours}:${minutes} pm`;
-    } else if (hours = 12) {
-      return `${hours}:${minutes} pm`;
-    } else {
-      return `${hours}:${minutes} am`;
-    }
-  }
-  /* Show user's time zone */
-
-  // Initialize variables and set defaults
-  let userTimeZone = undefined;
-  let timeZoneOutput = "All times listed in your local time zone.";
-
-  // Get user time zone
-  userTimeZone = Intl.DateTimeFormat().resolvedOptions().timeZone;
-
-  // If userTimeZone exists, add it to the text
-  if (userTimeZone) {
-    timeZoneOutput = `Times are in your local time zone: ${userTimeZone}`;
-  }
-
-  // Display time zone on page
-  document.getElementById("userTimeZone").insertAdjacentHTML('afterbegin', timeZoneOutput);
-</script>
\ No newline at end of file
diff --git a/events/events.html b/events/events.html
new file mode 100644
index 0000000000..f23f4ae8d8
--- /dev/null
+++ b/events/events.html
@@ -0,0 +1,78 @@
+---
+layout: default
+title: Events - Hack for LA
+permalink: /events/
+---
+
+<div class="header-container hacknights--header-container">
+  {% include_relative header-container-content.html %}
+</div>
+
+<section class="events-page">
+
+    <h1 style="color: #ffffff; margin-top: 48px; font-size: 36px">Our Events</h1>
+    <div class="flex-page-card">
+      <div class="column-card-lg--events">
+        {% include_relative left-col-content.html %}
+      </div>
+
+      <div class="column-card-lg--events">
+        {% include_relative right-col-content.html%}
+      </div>
+    </div>
+  
+    <h1 style="color: #ffffff; margin-top: 48px; font-size: 36px">
+      Our Locations
+    </h1>
+    
+    <div class="notification-banner">
+      <p class="meetings-message">
+        In light of the COVID-19 pandemic, Hack for LA has suspended its in-person
+        events below. The organization remains fully active, and all events are
+        now being conducted remotely using Zoom at the days/times listed above.
+      </p>
+  
+      <div class="getting-started-mobile-page">
+        <h2 class="event-title-1">
+          <img class="vector-img" src="../assets/images/hack-nights/locations.svg" alt="image of a location icon" />
+          See our Locations
+        </h2>
+      </div>
+    </div>
+  
+    <div class="mobile-locations-dropdown">
+      {% include_relative our-locations-content.html %}
+    </div>
+
+</section>
+
+<script>
+  const locationsDropDown = document.querySelector(".getting-started-mobile-page");
+  const showingLocations = document.querySelector(".mobile-locations-dropdown");
+  const showContent = document.querySelectorAll(".event-title");
+  const showLocations = document.querySelector(".event-title-1");
+
+  showLocations.addEventListener("click", function () {
+    this.classList.toggle("active");
+    if (showingLocations.style.display == "block") {
+      showingLocations.style.display = "none";
+    } else {
+      showingLocations.style.display = "block";
+    }
+  });
+
+  for (let i = 0; i < showContent.length; i++) {
+    showContent[i].addEventListener("click", showingDropDown);
+  }
+
+  function showingDropDown() {
+    this.classList.toggle("active");
+    let dropDown = this.nextElementSibling;
+
+    if (dropDown.style.display === "block") {
+      dropDown.style.display = "none";
+    } else {
+      dropDown.style.display = "block";
+    }
+  }
+</script>
\ No newline at end of file
diff --git a/events/header-container-content.html b/events/header-container-content.html
new file mode 100644
index 0000000000..d752df48c2
--- /dev/null
+++ b/events/header-container-content.html
@@ -0,0 +1,34 @@
+<h1>Events</h1>
+<div class="content-hack-night">
+  <div class="show-video">
+    <div>
+      <h2 class="header-desc">
+        Hack for LA is the Los Angeles brigade of
+        <a href="http://brigade.codeforamerica.org/" target="_blank">Code for America</a>,
+        a network of civic-minded technologists who contribute their skills
+        toward using the web as a platform for local government and community
+        service.
+      </h2>
+      <!--This is hidden when full screen and shown when mobile and tablet-->
+      <div class="fullscreen--hide-video">
+        <div>
+          <iframe class="video-size" src="https://embed.ted.com/talks/jennifer_pahlka_coding_a_better_government"
+            width="854" height="480" frameborder="0" scrolling="no" allowfullscreen></iframe>
+        </div>
+      </div>
+
+      <p id="head-content" class="hacknights--head-content">
+        To learn more, watch the
+        <a href="https://www.ted.com/talks/jennifer_pahlka_coding_a_better_government" target="_blank">Ted Talk</a>
+        by Code for America founder, Jennifer Pahlka, on maintaining a better government through code.
+      </p>
+    </div>
+
+    <div class="mobile--hide-video fullscreen-video">
+      <div class="events-video-fullscreen-container">
+        <iframe class="video-size" src="https://embed.ted.com/talks/jennifer_pahlka_coding_a_better_government"
+          width="854" height="480" frameborder="0" scrolling="no" allowfullscreen></iframe>
+      </div>
+    </div>
+  </div>
+</div>
\ No newline at end of file
diff --git a/events/left-col-content.html b/events/left-col-content.html
new file mode 100644
index 0000000000..6c72d31f21
--- /dev/null
+++ b/events/left-col-content.html
@@ -0,0 +1,24 @@
+<h2 class="event-title">
+  <img class="vector-img" src="../assets/images/hack-nights/meetup.svg" alt="image of an m" />
+  Meetup Events
+</h2>
+<div class="mobile-dropdown">
+
+{% for event in site.data.events %}
+  <div class="meetup-steps">
+    <div id="img-content">
+      <img class="step-img-1" src="{{event.link}}" />
+    </div>
+    <div id="text-content">
+      <h2 class="title-meetup">{{event.name}}</h2>
+      <p>{{event.text}}</p>
+    </div>
+  </div>
+{% endfor %}
+
+  <div class="class-btn">
+    <a href="https://www.meetup.com/hackforla/events" target="_blank">
+      <button class="btn btn-primary btn-lg btn--events">View on Meetup</button></a>
+  </div>
+
+</div>
\ No newline at end of file
diff --git a/events/our-locations-content.html b/events/our-locations-content.html
new file mode 100644
index 0000000000..e9c37a8f5f
--- /dev/null
+++ b/events/our-locations-content.html
@@ -0,0 +1,177 @@
+
+<div class="getting-started-page-card-locations">
+    <div class="locations-1">
+      <div class="location-img-pos">
+        <img class="location-image" src="../assets/images/hack-nights/westside1.png" alt="westside" />
+      </div>
+      <div class="location-content">
+        <h1 style="font-size: 35px; font-weight: normal">Monday</h1>
+        <div class="mini-projects">
+          <div class="img-dis">
+            <img id="mini-img" src="../assets/images/projects/engage.jpg" alt="" />
+            <div class="proj-desc">
+              <a href="https://www.hackforla.org/projects/engage">Engage</a>
+            </div>
+          </div>
+
+          <div class="img-dis">
+            <img id="mini-img" src="../assets/images/projects/hellogov.jpg" alt="" />
+            <div class="proj-desc">
+              <a href="https://www.hackforla.org/projects/hellogov">HelloGOV</a>
+            </div>
+          </div>
+
+          <div class="img-dis">
+            <img id="mini-img" src="../assets/images/projects/lucky-parking.png" alt="" />
+            <div class="proj-desc">
+              <a href="https://www.hackforla.org/projects/lucky-parking">Lucky Parking</a>
+            </div>
+          </div>
+
+          <div class="img-dis">
+            <img id="mini-img" src="../assets/images/projects/new-schools-today.jpg" alt="" />
+            <div class="proj-desc">
+              <a href="https://www.hackforla.org/projects/new-schools-today">New Schools Today</a>
+            </div>
+          </div>
+
+          <div class="img-dis">
+            <img id="mini-img" src="../assets/images/projects/not-today.png" alt="" />
+            <div class="proj-desc">
+              <a href="https://www.hackforla.org/projects/not-today">Not Today</a>
+            </div>
+          </div>
+
+          <div class="img-dis">
+            <img id="mini-img" src="../assets/images/projects/public-tree-map.png" alt="" />
+            <div class="proj-desc">
+              <a href="">Public Tree Map</a>
+            </div>
+          </div>
+
+          <div class="img-dis">
+            <img id="mini-img" src="../assets/images/projects/vrms.png" alt="" />
+            <div class="proj-desc">
+              <a href="https://www.hackforla.org/projects/vrms">VRMS</a>
+            </div>
+          </div>
+
+          <div class="img-dis">
+            <img id="mini-img" src="../assets/images/projects/website.png" alt="" />
+            <div class="proj-desc">
+              <a href="https://www.hackforla.org/projects/website">HackforLA Website</a>
+            </div>
+          </div>
+
+          <div class="img-dis">
+            <img id="mini-img" src="../assets/images/projects/undebate.jpg" alt="" />
+            <div class="proj-desc">
+              <a href="https://www.hackforla.org/projects/undebate">Undebate</a>
+            </div>
+          </div>
+
+          <div class="img-dis">
+            <img id="mini-img" src="../assets/images/projects/record-clearance.jpg" alt="" />
+            <div class="proj-desc">
+              <a href="https://www.hackforla.org/projects/record-clearance-project">Clearance Project</a>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <div class="getting-started-page-card-locations">
+    <div class="locations-1">
+      <div class="location-img-pos">
+        <img class="location-image" src="../assets/images/hack-nights/DTLA.png" alt="DTLA" />
+      </div>
+      <div class="location-content">
+        <h1 style="font-size: 35px; font-weight: normal">Tuesday</h1>
+        <div class="mini-projects">
+          <div class="img-dis">
+            <img id="mini-img" src="../assets/images/projects/311.jpg" alt="" />
+            <div class="proj-desc">
+              <a href="https://www.hackforla.org/projects/311-data">311 Data</a>
+            </div>
+          </div>
+
+          <div class="img-dis">
+            <img id="mini-img" src="../assets/images/projects/civic-tech-index.png" alt="" />
+            <div class="proj-desc">
+              <a href="https://www.hackforla.org/projects/civic-tech-index">Civic Tech Index</a>
+            </div>
+          </div>
+
+          <div class="img-dis">
+            <img id="mini-img" src="../assets/images/projects/tdm-calculator.jpg" alt="" />
+            <div class="proj-desc">
+              <a href="https://www.hackforla.org/projects/tdm-calculator">LA TDM Calculator</a>
+            </div>
+          </div>
+
+          <div class="img-dis">
+            <img id="mini-img" src="../assets/images/projects/vrms.png" alt="" />
+            <div class="proj-desc">
+              <a href="https://www.hackforla.org/projects/vrms">VRMS</a>
+            </div>
+          </div>
+
+          <div class="img-dis">
+            <img id="mini-img" src="../assets/images/projects/home-unite-us.png" alt="" />
+            <div class="proj-desc">
+              <a href="https://www.hackforla.org/projects/home-unite-us">Home Unite Us</a>
+            </div>
+          </div>
+
+          <div class="img-dis">
+            <img id="mini-img" src="../assets/images/projects/website.png" alt="" />
+            <div class="proj-desc">
+              <a href="https://www.hackforla.org/projects/website">HackforLA Website</a>
+            </div>
+          </div>
+
+          <div class="img-dis">
+            <img id="mini-img" src="../assets/images/projects/writeforall.png" alt="" />
+            <div class="proj-desc">
+              <a href="https://www.hackforla.org/projects/writeforall">Write for All</a>
+            </div>
+          </div>
+
+          <div class="img-dis">
+            <img id="mini-img" src="../assets/images/projects/food-oasis.jpg" alt="" />
+            <div class="proj-desc">
+              <a href="https://www.hackforla.org/projects/food-oasis">Food Oasis</a>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <div class="getting-started-page-card-locations">
+    <div class="locations-1">
+      <div class="location-img-pos">
+        <img class="location-image" src="../assets/images/hack-nights/southla.png" alt="southLA" />
+      </div>
+      <div class="location-content">
+        <h1 style="font-size: 35px; font-weight: normal">Wednesday</h1>
+        <div class="mini-projects description">
+          <p>
+            Our South LA meetup was created by a community member on our
+            leadership team.
+          </p>
+          <p>
+            The mission of the South LA hacknight is to offer free technical
+            education opportunities and facilitate user centered design and
+            software development projects to improve civic life in the local
+            area with local partners and stakeholders.
+          </p>
+          <p>
+            This meetup is just getting started, there are no current
+            projects.
+          </p>
+        </div>
+      </div>
+    </div>
+  </div>
diff --git a/events/right-col-content.html b/events/right-col-content.html
new file mode 100644
index 0000000000..40849dccb5
--- /dev/null
+++ b/events/right-col-content.html
@@ -0,0 +1,185 @@
+<h2 class="event-title">
+    <img class="vector-img" src="../assets/images/hack-nights/meetings.svg" alt="image of a group of people" />
+    Online Project Team Meetings
+</h2>
+<div class="mobile-dropdown">
+    <div class="meetup-steps-2">
+        <div id="img-content">
+            <img class="step-img-2" src="../assets/images/hack-nights/org-projects.png" />
+        </div>
+        <div id="text-content-1">
+            <p>
+                Please review the listing of project team meeting times to find a
+                project that fits your schedule. You are welcome to attend a project
+                team meeting after you have completed
+                <a href="https://www.hackforla.org/getting-started" target="_blank">Onboarding</a>.
+            </p>
+        </div>
+    </div>
+    <div class="days-display-1">
+        <div id="userTimeZone" class="userTimeZone"></div>
+        {% assign days-of-week =
+        "Monday,Tuesday,Wednesday,Thursday,Friday,Saturday,Sunday" | split: "," %}
+        {% for day in days-of-week %}
+        <div id="{{day}}">
+            <h3 class="day-header-1">{{day}}</h3>
+            <ul id="{{day}}-List" class="schedule-list-1"></ul>
+        </div>
+        {% endfor %}
+    </div>
+</div>
+<script>
+
+    const API_ENDPOINT = 'https://www.vrms.io/api/recurringevents';
+
+    /**
+     * This type of function is called an IIFE function. The main function is the primarily controller that loads the recurring events on this page.
+     * Refer: https://developer.mozilla.org/en-US/docs/Glossary/IIFE
+    */
+    (async function main(){
+
+        const response_data = await sendGetRequest(API_ENDPOINT);
+
+        let filteredData = filterDataFromApi(response_data);
+
+        let sortedData = sortData(filteredData);
+
+        document.addEventListener('DOMContentLoaded',insertEventSchedule(sortedData));
+
+        document.addEventListener('DOMContentLoaded',insertTimeZoneText());
+
+
+    })()
+
+    /**
+     * Retrieves data from the wins excel sheet provided a valid excel url
+     * @param  {URL} url 
+     * @return {Object} response data
+     */
+     async function sendGetRequest(url){
+        try {
+            // const resp =  await axios.get(url);
+            const resp = await fetch(url);
+            return await resp.json();
+        } catch (err) {
+            // Handle Error Here
+            console.error(err);
+        }
+    }
+
+    /**
+     * Filters out the needed data from the api endpoint
+    */
+    function filterDataFromApi(response_data){
+        const return_obj={}
+        response_data.forEach(item=>{
+            let day_of_week = getDayString(item.date)
+            if(!(day_of_week in return_obj)){
+                return_obj[day_of_week] = [];
+                return_obj[day_of_week].push(display_object(item))
+            }
+            else{
+                return_obj[day_of_week].push(display_object(item))
+            }
+        })
+
+        return return_obj;
+    }
+
+    /**
+     * Sorts Filtered Date from the api end point by their start time
+    */
+    function sortData(filteredData){
+        for(const [key,value] of Object.entries(filteredData)){
+            value.sort(function (a, b) {
+                return convertTime12to24(a.start) - convertTime12to24(b.start);
+            });
+        }
+        return filteredData;
+    }
+
+    /**
+     * Inserts the recurring events into the html
+     * @param {Object} sortedData - An array object of the type returned by displayObject()
+    */
+    function insertEventSchedule(sortedData){
+        for(const [key,value] of Object.entries(sortedData)){
+            let placeToInsert = document.querySelector(`#${key}-List`);
+            value.forEach(event=>{
+                placeToInsert.insertAdjacentHTML('beforeend',
+                `<li>${event.start} - ${event.end} </li><li><a href="${event.hflaWebsiteUrl}">${event.name}</a> ${event.dsc}</li>`
+                );
+            })
+        }
+
+    }
+
+    /**
+     * @param {Date} time - A valid javscript time string. Example:  "2020-05-13T02:00:00.000Z"
+     * @return {String} - A time string formatted in the 12 hour format and converted to your timezone. Example: "10:00 PM"
+    */
+    function localeTimeIn12Format(time){
+        
+        return new Date(time)
+            .toLocaleTimeString(
+                {},
+                {timeZone:Intl.DateTimeFormat().resolvedOptions().timeZone,hour12:true,hour:'2-digit',minute:'numeric'}
+            );
+        
+    }
+
+    /**
+     * @param {Date} date - A valid javscript time string. Example:  "2020-05-13T02:00:00.000Z"
+     * @return {String} - The name of the day represented by the time string. Example 2020-05-13 was a wednesday. I.e rv = 'Wednesday'
+    */
+    function getDayString(date){
+        let new_date = new Date(date);
+        let weekday = new_date.getDay();
+        let options = {weekday:'long'};
+        return new Intl.DateTimeFormat('en-US', options).format(new_date);
+    }
+
+    /**
+     * Given a time string of 12 hour format like '06:00 pm' returns the integer of that string in 24 hour format -> 0600
+     * @param {String} time12h - A 12 hour format time string
+     * @return {Integer} An integer representing the input time string in 24 hour format
+    */
+    function convertTime12to24(time12h){
+        const [time, modifier] = time12h.split(" ");
+        
+        let [hours, minutes] = time.split(":");
+        
+        if (hours === "12") {
+            hours = "00";
+        }
+        
+        if (modifier === "PM" || 'pm') {
+            hours = parseInt(hours, 10) + 12;
+        }
+        return parseInt(`${hours}${minutes}`);
+
+    }
+
+    /**
+     * Function that represent the individual object extracted from the api
+    */
+    function display_object(item){
+        rv_object = {
+            "name":item.project.name,
+            "dsc": item.description,
+            "start":localeTimeIn12Format(item.startTime),
+            "end": localeTimeIn12Format(item.endTime),
+            "hflaWebsiteUrl": item.project.hflaWebsiteUrl
+        }
+        return rv_object;
+    }
+
+    /**
+     * Displays/Inserts the user's time zone in the DOM
+    */
+    function insertTimeZoneText(){
+        let timeZoneText  = `Times are in your local time zone: ${Intl.DateTimeFormat().resolvedOptions().timeZone}`;
+        document.querySelector('#userTimeZone').insertAdjacentHTML('afterbegin', timeZoneText);
+    }
+
+</script>
\ No newline at end of file