diff --git a/blocks/breadcrumbs/breadcrumbs.css b/blocks/breadcrumbs/breadcrumbs.css
new file mode 100644
index 0000000..e81bfe2
--- /dev/null
+++ b/blocks/breadcrumbs/breadcrumbs.css
@@ -0,0 +1,52 @@
+.breadcrumbs {
+    grid-area: bread;
+    display: inline-block;
+    list-style: none;
+    padding: 0;
+    font-size: 14px;
+    margin-bottom: 50px;
+}
+
+.breadcrumbs ul {
+    padding-top: 0;
+    margin-top: 0;
+}
+
+.breadcrumbs li {
+    display: inline-block;
+    padding: 10px 5px;
+    text-transform: uppercase;
+}
+
+.breadcrumbs li a {
+    color: #202020;
+    text-decoration: none;
+}
+
+.breadcrumbs li:first-child {
+    padding-left: 0;
+}
+
+.breadcrumbs li:last-child {
+    font-weight: 600;
+}
+
+.breadcrumbs li::before {
+    font-family: arial, sans-serif;
+    font-style: normal;
+    font-weight: 400;
+    font-variant: normal;
+    text-transform: none;
+    line-height: 1;
+    font-size: 14px;
+    padding-right: 5px;
+}
+
+.breadcrumbs li:first-child::before {
+    content: none;
+}
+
+.breadcrumbs li:not(:last-child)::after {
+    content: ">\00a0";
+    padding: 0 2px 0 7px;
+}
\ No newline at end of file
diff --git a/blocks/breadcrumbs/breadcrumbs.js b/blocks/breadcrumbs/breadcrumbs.js
new file mode 100644
index 0000000..d77dbe7
--- /dev/null
+++ b/blocks/breadcrumbs/breadcrumbs.js
@@ -0,0 +1,34 @@
+import { getMetadata } from '../../scripts/aem.js';
+
+/**
+ *
+ * @param {HTMLElement} $block The main element
+ */
+export default function decorate($block) {
+  const title = getMetadata('og:title');
+  const $ul = document.createElement('ul');
+  $block.append($ul);
+  const trail = [{
+    text: 'Home',
+    link: '/',
+  }, {
+    text: 'Events',
+    link: '/about-us/events',
+  }, {
+    text: title,
+  }];
+  while (trail.length) {
+    const step = trail.shift();
+    const $li = document.createElement('li');
+    $ul.append($li);
+    let $wrap = $li;
+    if (step.link) {
+      $wrap = document.createElement('a');
+      $wrap.href = step.link;
+      $li.append($wrap);
+    }
+    const $span = document.createElement('span');
+    $wrap.append($span);
+    $span.textContent = step.text;
+  }
+}
diff --git a/blocks/event-summary/event-summary.css b/blocks/event-summary/event-summary.css
new file mode 100644
index 0000000..e445020
--- /dev/null
+++ b/blocks/event-summary/event-summary.css
@@ -0,0 +1,85 @@
+.event-summary {
+  display: flex;
+  flex-wrap: wrap;
+  margin-bottom: 20px;
+}
+
+.event-details {
+  flex: 1;
+  max-width: calc(50% - 20px);
+  margin: 0 10px 10px;
+}
+
+ul.keyword-list {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+ul.keyword-list li:not(:last-of-type)::after {
+  content: '|';
+  display: inline-block;
+  margin-left: 10px;
+}
+
+ul.keyword-list li {
+  display: inline-block;
+  margin-right: 10px;
+  position: relative;
+  font-size: 18px;
+  vertical-align: middle;
+}
+
+ul li {
+  padding: 0 !important;
+}
+
+.event-date {
+  font-size: 14px;
+  padding-top: 0 !important;
+}
+
+.event-subtitle {
+  font-size: 20px;
+  font-weight: bold;
+  margin-bottom: 12px;
+  color: var(--primary-color);
+}
+
+.event-keywords {
+  font-size: 18px;
+}
+
+.image-container {
+  flex: 1;
+  max-width: 50%;
+  margin-right: 30px;
+  overflow: hidden;
+  position: relative;
+}
+
+.image-container img {
+  width: 100%;
+  height: auto;
+  aspect-ratio: 16 / 16;
+}
+
+@media only screen and (max-width: 768px) {
+  .image-container, 
+  .event-details {
+    flex: 1 0 100%;
+    max-width: 100%;
+  }
+
+  .event-details {
+    margin-top: 20px;
+  }
+}
+
+@media only screen and (min-width: 1024px) {
+  .event-details {
+    order: 1;
+  }
+}
+
+
diff --git a/blocks/event-summary/event-summary.js b/blocks/event-summary/event-summary.js
new file mode 100644
index 0000000..01784a0
--- /dev/null
+++ b/blocks/event-summary/event-summary.js
@@ -0,0 +1,88 @@
+import { getMetadata, createOptimizedPicture } from '../../scripts/aem.js';
+import {
+  div, h1, a, li, p, ul,
+  strong,
+  button,
+} from '../../scripts/dom-builder.js';
+
+export default async function decorate(block) {
+  const startDatestr = getMetadata('startdate');
+  const endDatestr = getMetadata('enddate');
+  const eventTime = getMetadata('eventtime');
+  const startDateParts = startDatestr.split(/-|\//);
+  const endDateParts = endDatestr.split(/-|\//);
+  const startDate = new Date(startDateParts[2], startDateParts[0] - 1, startDateParts[1]);
+  const endDate = new Date(endDateParts[2], endDateParts[0] - 1, endDateParts[1]);
+  const formattedStartDate = startDate.toLocaleDateString('en-Us', { month: 'short', day: '2-digit', year: 'numeric' });
+  const formattedEndDate = endDate.toLocaleDateString('en-Us', { month: 'short', day: '2-digit', year: 'numeric' });
+  let date;
+  if (formattedEndDate !== formattedStartDate) {
+    date = `${formattedStartDate.split(',')[0]} - ${formattedEndDate}`;
+  } else { date = `${formattedEndDate}`; }
+
+  const image = getMetadata('og:image');
+  const description = getMetadata('og:description');
+  const registerButton = getMetadata('register-button');
+  const title = getMetadata('og:title');
+  const type = getMetadata('type');
+  const region = getMetadata('region');
+  const address = getMetadata('address');
+
+  const outerBlock = document.querySelector('.section');
+  outerBlock.classList.add('outer');
+
+  // Create elements
+  const imageContainer = div(
+    { class: 'image-container' },
+    createOptimizedPicture(image, title),
+  );
+
+  const eventDate = (eventTime !== '' ? p(
+    { class: 'event-date' },
+    `${date} ${eventTime}`,
+  ) : p({ class: 'event-date' }, date));
+  const eventSubtitle = h1({ class: 'event-subtitle' }, title);
+  const keywordList = ul(
+    { class: 'keyword-list' },
+    li({ class: 'item type' }, type),
+    li({ class: 'item address' }, address !== region ? address : region),
+    (address !== region ? li({ class: 'item region' }, region) : ''),
+  );
+  let registerButtonLink;
+  const eventDescription = p(description);
+  if (type === 'Conference') {
+    registerButtonLink = a({ href: registerButton, title }, 'Visit the Event Website');
+  } else {
+    registerButtonLink = a({ href: registerButton, title }, 'Register Today');
+  }
+  const registerButtonContainer = p({ class: 'button-container find-out-more' }, strong(registerButtonLink));
+
+  // Append elements to block
+  block.appendChild(imageContainer);
+  block.appendChild(div({ class: 'event-details' }, eventDate, eventSubtitle, div({ class: 'event-keywords' }, keywordList), div({ class: 'event-description' }, eventDescription, registerButtonContainer)));
+
+  // Add event listener to the 'Register Today' button
+  registerButtonLink.addEventListener('click', (event) => {
+    event.preventDefault();
+
+    const popupMessageBox = div({ class: 'popup-message' });
+    const message = p('You are now moving to an external website.');
+    const proceedBtn = button({ class: 'proceed' }, 'Proceed');
+    const cancelBtn = button({ class: 'cancel' }, 'Cancel');
+
+    popupMessageBox.appendChild(message);
+    popupMessageBox.appendChild(proceedBtn);
+    popupMessageBox.appendChild(cancelBtn);
+    block.appendChild(popupMessageBox);
+
+    proceedBtn.addEventListener('click', () => {
+      const ahref = registerButtonLink.getAttribute('href');
+      window.open(ahref, '_blank');
+      popupMessageBox.style.display = 'none';
+    });
+
+    cancelBtn.addEventListener('click', () => {
+      popupMessageBox.style.display = 'none';
+    });
+  });
+}
diff --git a/scripts/scripts.js b/scripts/scripts.js
index dfd04c7..b35546e 100644
--- a/scripts/scripts.js
+++ b/scripts/scripts.js
@@ -37,6 +37,7 @@ const TEMPLATE_LIST = [
   'news',
   'anniversary',
   'landing-page',
+  'event',
 ];
 
 const CATEGORY_LIST = [
diff --git a/templates/Event/Event.css b/templates/Event/Event.css
new file mode 100644
index 0000000..3756e47
--- /dev/null
+++ b/templates/Event/Event.css
@@ -0,0 +1,89 @@
+main .section {
+  padding-top: 50px;
+  padding-bottom: 50px;
+  text-align: left;
+  margin-top: 50px;
+  margin-bottom: 50px;
+}
+
+.outer {
+  width: 80%;
+  margin: auto;
+}
+
+.event main .section .default-content-wrapper {
+  padding-top: 15px;
+  padding-bottom: 15px;
+}
+
+.event .event-title {
+  font-size: 30px;
+  padding-bottom: 30px;
+  border-bottom: 2px solid #ccc;
+  margin-bottom: 30px;
+}
+
+.event .find-out-more {
+  padding: 30px 0;
+  margin-right: 8px;
+}
+
+.event main .event-container p:last-of-type {
+  padding-bottom: 100px;
+}
+
+
+main .section > div {
+  margin: 0 auto;
+  padding: 0 15px;
+}
+
+.popup-message {
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  background-color: #fff;
+  padding: 20px;
+  border: 1px solid #ccc;
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+  z-index: 9999;
+  text-align: left;
+}
+
+.popup-message p{
+  font-size: 20px;
+  font-weight: bold;
+}
+
+.popup-message .proceed{
+  float: left;
+}
+
+.popup-message .cancel{
+  float: right;
+}
+
+.button-container a {
+  background-color: var(--primary-color) !important;
+  padding: 10px !important;
+  text-decoration: none !important;
+  border: 1px solid var(--primary-color) !important;
+  font-size: 20px !important;
+  color: #fff !important;
+  font-weight: bold !important;
+}
+
+.button-container a :hover {
+  background-color: #fff !important;
+  text-decoration: none !important;
+  color: var(--primary-color) !important;
+}
+
+@media (max-width: 1024px) {
+  .outer {
+      padding-left: 20px!important;
+      padding-right: 20px!important;
+      width: auto
+  }
+}
diff --git a/templates/Event/Event.js b/templates/Event/Event.js
new file mode 100644
index 0000000..30d551e
--- /dev/null
+++ b/templates/Event/Event.js
@@ -0,0 +1,13 @@
+async function renderDetails(insertAfterElement) {
+  const summaryWrapper = document.querySelector('event-summary-wrapper');
+  if (summaryWrapper) {
+    const summary = document.querySelector('event-summary');
+    insertAfterElement.parentNode.insertBefore(summary, insertAfterElement.nextSibling);
+  }
+}
+
+export default async function buildAutoBlocks() {
+  const title = document.getElementById('event-details');
+  if (title) title.classList.add('event-title');
+  renderDetails(title);
+}