diff --git a/_data/menu.yml b/_data/menu.yml
index 64cce0c..db99b77 100644
--- a/_data/menu.yml
+++ b/_data/menu.yml
@@ -31,9 +31,12 @@ main:
   - name: Visit The Lab
     url: /visit
     weight: 5
+  - name: Calendar
+    url: /calendar
+    weight: 6
   - name: Join Now
     url: https://join.thelab.ms
-    weight: 6
+    weight: 7
 footer_primary:
   - name: Home
     url: /
@@ -51,9 +54,12 @@ footer_secondary:
   - name: About
     url: /about/
     weight: 2
+  - name: Calendar
+    url: /calendar
+    weight: 3
   - name: Contact
     url: /contact/
-    weight: 3
+    weight: 4
 footer_tertiary:
   - name: Join Now
     url: https://join.thelab.ms
diff --git a/_includes/framework/info.html b/_includes/framework/info.html
index f8a4dcd..ba408d0 100644
--- a/_includes/framework/info.html
+++ b/_includes/framework/info.html
@@ -24,6 +24,8 @@ <h2>{{ heading }}</h2>
             {% endfor %}
           </ul>
         {% endif %}
+        <div id="calendar" class="list-group"></div>
+        <script type="text/javascript" src="{{ '/assets/js/calendar-short.js' | relative_url }}"></script>   
         {% if buttons.list.size > 0 %}
           <div class="info-buttons mt-2">
             {% for button in buttons.list %}
@@ -43,11 +45,6 @@ <h2>{{ heading }}</h2>
       </div>
     </div>
 
-    <div class="col-12 {% if image and align == 'center' %}col-md-10 mt-3{% else %}col-md-6{% endif %} {% if align == 'left' %}order-2 mt-3 mt-md-0{% elsif align == 'right' %}order-1{% elsif align == 'center' %}{% endif %}">
-      {% if image %}
-        <img width="{% if align == 'center' %}1280{% else %}640{% endif %}" height="{% if align == 'center' %}720{% else %}360{% endif %}" alt="{{ heading }}" class="img-fluid" src="{{ image | relative_url }}"/>
-      {% endif %}
-    </div>
-
+  
   </div>
 </div>
diff --git a/assets/js/calendar-short.js b/assets/js/calendar-short.js
new file mode 100644
index 0000000..1c68e94
--- /dev/null
+++ b/assets/js/calendar-short.js
@@ -0,0 +1,55 @@
+fetchCalendarData().then(data => {
+    var e = document.getElementById("calendar");
+    e.innerHTML = e.innerHTML || "";
+    var locale = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' };
+    data.slice(0,3).forEach(el => {
+        e.innerHTML += `<div class="list-group-item">
+            <div class="d-flex w-100 justify-content-between">
+                <h2 class="mb-1">${el.name}</h5>
+                <small>in ${el.daysUntil} days</small>
+            </div>
+            <p class="mb-1 ${el.membersOnly ? "text-bg-warning" : "text-bg-success"}">${el.membersOnly ? "Members Only" : "Open To The Public"}</p>
+            <p class="mb-1">${el.start.toLocaleDateString("en-us",locale)} from ${String(el.start.getHours()).padStart(2,'0')}:${String(el.start.getMinutes()).padStart(2,'0')} until ${String(el.end.getHours()).padStart(2,'0')}:${String(el.end.getMinutes()).padStart(2,'0')}</p>
+            <small>${el.description}</small>
+        </div>`;
+    });
+});
+
+async function fetchCalendarData() {
+    // Define the API URL
+    const apiUrl = 'https://profile.thelab.ms/api/events';
+    
+    // Make a GET request
+    return fetch(apiUrl)
+      .then(response => {
+        if (!response.ok) {
+          throw new Error('Network response was not ok');
+        }
+        return response.json();
+      })
+      .then(data => {
+        var now = new Date(Date.now());
+        var today = new Date(now.getFullYear(),now.getMonth(),now.getDate());
+        data.forEach(element => {
+            var start = new Date(element.start * 1000);
+            var end = new Date(element.end * 1000);
+            var durationDay = new Date(start.getFullYear(),start.getMonth(), start.getDate());
+            var diffTime = Math.abs(durationDay - today);
+            var diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24));
+            element.start = start;
+            element.end = end;
+            element.daysUntil = diffDays;
+        });
+        data = data.sort((a,b) => {
+            if (a.daysUntil > b.daysUntil) return 1;
+            else if (b.daysUntil > a.daysUntil) return -1;
+            else if (a.name > b.name) return -1;
+            else if (b.name > a.name) return 1;
+            return 0;
+        });
+        return data;
+      })
+      .catch(error => {
+        console.error('Error:', error);
+      });
+    }
\ No newline at end of file
diff --git a/assets/js/calendar.js b/assets/js/calendar.js
new file mode 100644
index 0000000..49d62d9
--- /dev/null
+++ b/assets/js/calendar.js
@@ -0,0 +1,55 @@
+fetchCalendarData().then(data => {
+    var e = document.getElementById("calendar");
+    e.innerHTML = e.innerHTML || "";
+    var locale = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' };
+    data.forEach(el => {
+        e.innerHTML += `<div class="list-group-item">
+            <div class="d-flex w-100 justify-content-between">
+                <h2 class="mb-1">${el.name}</h5>
+                <small>in ${el.daysUntil} days</small>
+            </div>
+            <p class="mb-1 ${el.membersOnly ? "text-bg-warning" : "text-bg-success"}">${el.membersOnly ? "Members Only" : "Open To The Public"}</p>
+            <p class="mb-1">${el.start.toLocaleDateString("en-us",locale)} from ${String(el.start.getHours()).padStart(2,'0')}:${String(el.start.getMinutes()).padStart(2,'0')} until ${String(el.end.getHours()).padStart(2,'0')}:${String(el.end.getMinutes()).padStart(2,'0')}</p>
+            <small>${el.description}</small>
+        </div>`;
+    });
+});
+
+async function fetchCalendarData() {
+    // Define the API URL
+    const apiUrl = 'https://profile.thelab.ms/api/events';
+    
+    // Make a GET request
+    return fetch(apiUrl)
+      .then(response => {
+        if (!response.ok) {
+          throw new Error('Network response was not ok');
+        }
+        return response.json();
+      })
+      .then(data => {
+        var now = new Date(Date.now());
+        var today = new Date(now.getFullYear(),now.getMonth(),now.getDate());
+        data.forEach(element => {
+            var start = new Date(element.start * 1000);
+            var end = new Date(element.end * 1000);
+            var durationDay = new Date(start.getFullYear(),start.getMonth(), start.getDate());
+            var diffTime = Math.abs(durationDay - today);
+            var diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24));
+            element.start = start;
+            element.end = end;
+            element.daysUntil = diffDays;
+        });
+        data = data.sort((a,b) => {
+            if (a.daysUntil > b.daysUntil) return 1;
+            else if (b.daysUntil > a.daysUntil) return -1;
+            else if (a.name > b.name) return -1;
+            else if (b.name > a.name) return 1;
+            return 0;
+        });
+        return data;
+      })
+      .catch(error => {
+        console.error('Error:', error);
+      });
+    }
\ No newline at end of file
diff --git a/pages/calendar.md b/pages/calendar.md
new file mode 100644
index 0000000..bc5f09f
--- /dev/null
+++ b/pages/calendar.md
@@ -0,0 +1,16 @@
+---
+layout: basic
+title: "Calendar"
+date: 2018-11-28T15:15:34+10:00
+header_transparent: false
+permalink: "/calendar/"
+description: "Upcoming Events"
+hero:
+  enabled: false
+  buttons:
+    enabled: false
+---
+
+<div id="calendar" class="list-group"></div>
+
+<script type="text/javascript" src="{{ '/assets/js/calendar.js' | relative_url }}"></script>
\ No newline at end of file
diff --git a/pages/home.md b/pages/home.md
index 0e236be..5270fcd 100644
--- a/pages/home.md
+++ b/pages/home.md
@@ -83,23 +83,19 @@ projects:
   prevent_click: false
 
 outro:
-  enabled: false
-  align: center
+  enabled: true
+  align: right
   image: false
-  heading: Get Started Today
-  sub_heading: "Save time and money using this premium Jekyll theme."
-  features:
-    enabled: false
-    list:
-      - text: "Free Quote"
-        fa_icon: "fas fa-envelope-open-text"
+  heading: Next Few Events
   buttons:
-    enabled: true
     list:
-      - text: "Contact Us"
-        url: "/contact"
+      - text: "View The Full Calendar"
+        url: "/calendar"
         external: false
-        size: "large"
+        fa_icon: false
+        size: large # "small", "normal", "large"
+        outline: false
+        style: "light" # "light", "dark", "primary"
 
 posts:
   enabled: false
diff --git a/pages/visit.md b/pages/visit.md
index 36afa84..09929a2 100644
--- a/pages/visit.md
+++ b/pages/visit.md
@@ -19,7 +19,7 @@ All visitors, whether taking a class or maintain a regular membership, must comp
 
 ## Visting Us
 
-We are open every Tuesday evening starting at 7pm for visitors to come to the lab, tour the facilities, and meet the leadership team.  If that timing does not work with your schedule then [join our Discord Server](https://discord.thelab.ms/) and ask in the General channel about setting up another time.
+We are open every Tuesday evening starting at 7pm for visitors to come to the lab, tour the facilities, and meet the leadership team.  If that timing does not work with your schedule then [join our Discord Server](https://discord.thelab.ms/) and ask in the General channel about setting up another time.  You can see all of our upcoming events [on our Calendar](/calendar).
 
 ### Until then...
 <div class="list-group">