diff --git a/package.json b/package.json
index f585f6a..7130fdc 100644
--- a/package.json
+++ b/package.json
@@ -23,7 +23,8 @@
     "element-plus": "^2.4.2",
     "ramda": "^0.29.1",
     "vue": "^3.3.4",
-    "vue-router":"^4.2.5"
+    "vue-router":"^4.2.5",
+    "date-fns": "^2.3.0"
   },
   "devDependencies": {
     "@storybook/addon-essentials": "7.5.1",
diff --git a/src/App.vue b/src/App.vue
index 729f18a..58ed6b6 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -205,6 +205,47 @@
         :display="r.display"
       />
     </div>
+    <el-col>
+    <el-row class="event-card-row">
+         
+            <event-card
+              :eventType="eventCardEvent.type"
+              :eventImage="eventCardEvent.image"
+              :title="eventCardEvent.title"
+              :startDate="eventCardEvent.startDate"
+              :endDate="eventCardEvent.endDate"
+              :location="eventCardEvent.location"
+              :url="eventCardEvent.url"
+            />
+            <event-card
+              :eventType="eventCardEvent.type"
+              :eventImage="eventCardEvent.image"
+              :title="eventCardEvent.title"
+              :startDate="eventCardEvent.startDate"
+              :endDate="eventCardEvent.endDate"
+              :location="eventCardEvent.location"
+              :url="eventCardEvent.url"
+            />
+            <event-card
+              :eventType="eventCardEvent.type"
+              :eventImage="eventCardEvent.image"
+              :title="eventCardEvent.title"
+              :startDate="eventCardEvent.startDate"
+              :endDate="eventCardEvent.endDate"
+              :location="eventCardEvent.location"
+              :url="eventCardEvent.url"
+            />
+            <event-card
+              :eventType="eventCardEvent.type"
+              :eventImage="eventCardEvent.image"
+              :title="eventCardEvent.title"
+              :startDate="eventCardEvent.startDate"
+              :endDate="eventCardEvent.endDate"
+              :location="eventCardEvent.location"
+              :url="eventCardEvent.url"
+            />
+        </el-row>
+      </el-col>
     <el-col class="dropdown-multiselect">
       <el-row>
         <dropdown-multiselect
@@ -356,10 +397,12 @@
   import IconCard from './components/IconCard.vue'
   import ContentOverviewCard from './components/ContentOverviewCard.vue'
   import ContentTabCard from './components/ContentTabCard.vue'
+  import EventCard from './components/EventCard.vue'
 
   import { ref } from 'vue'
   import { successMessage, infoMessage, failMessage, informationNotification, iconInformationNotification } from "../utils/notificationMessages"
 
+
   const listCardDataStyleOne= [
         {
           title: "Prototype simulation of undiseased human cardiac ventricular cells",
@@ -405,6 +448,18 @@
         text: "Show all News",
         url: "/#"
       }
+
+  const eventCardEvent = {
+        type: "Conference",
+        image: "https://via.placeholder.com/736",
+        title: "SPARC and Experimental Biology (EB)",
+        startDate: "2020-04-04T10:36:01.516Z",
+        endDate:"2020-04-07T10:36:01.516Z",
+        location: "San Diego, California",
+        url: "/#"
+      }
+
+
   const checkboxItem = ref([
       {
         label: 1,
@@ -1040,8 +1095,8 @@
       IconCard,
       ContentOverviewCard,
       ContentTabCard,
-      ListCard
-
+      ListCard,
+      EventCard
     },
     name: 'App',
     setup() {
@@ -1119,8 +1174,8 @@
         contentOverviewCard,
         listCardDataStyleOne,
         listCardDataStyleTwo,
-        contentTabCard: tabCard
-
+        contentTabCard: tabCard,
+        eventCardEvent
       }
     },
     methods: {
@@ -1187,6 +1242,17 @@ header {
     border-bottom: none !important;
   }
 }
+.event-card-row {
+  .el-col {
+    width: 100%;
+    @media (min-width: 48em) {
+      width: 50%;
+    }
+    @media (min-width: 64em) {
+      width: 25%;
+    }
+  }
+}
 
 @media (min-width: 1024px) {
   header {
diff --git a/src/components/EventCard.vue b/src/components/EventCard.vue
new file mode 100644
index 0000000..9d4d14f
--- /dev/null
+++ b/src/components/EventCard.vue
@@ -0,0 +1,147 @@
+<template>
+    <div class="upcoming-event">
+      <div class="upcoming-event__image">
+          <a v-if="url" :href="url">
+            <img :src="eventImage" :alt="title" />
+          </a>
+          <div v-else>
+            <img :src="eventImage" :alt="title" />
+          </div>
+        <span>{{ eventType }}</span>
+      </div>
+      <h3>
+          <a v-if="url" :href="url">
+            {{ title }}
+          </a>
+          <div v-else>
+            {{ title }}
+          </div>
+      </h3>
+      <div class="upcoming-event__detail">
+        <svgicon name="calendar" height="16" width="16" />
+        <div class="body1">{{ getDateRange(startDate, endDate) }}</div>
+      </div>
+      <div v-if="location" class="upcoming-event__detail">
+        <svgicon name="map" height="16" width="16" />
+        <div class="body1">{{ location }}</div>
+      </div>
+    </div>
+  </template>
+  
+  <script>
+  import { format, parseISO } from 'date-fns'
+  
+  export default {
+    name: 'EventCard',
+  
+    props: {
+      title: {
+        type: String,
+        required: true
+      },
+      eventImage: {
+        type: String,
+        required: true
+      },
+      eventType: {
+        type: String,
+      },
+      location: {
+        type: String,
+        required: true
+      },
+      startDate: {
+        type: String,
+        required: true
+      },
+      endDate: {
+        type: String,
+      },
+      url: {
+        type: String
+      }
+    },
+  
+    methods: {
+      /**
+       * Get event date range, if there is no end date, default to start date
+       * @returns {String}
+       */
+      getDateRange: function(startDate, endDate) {
+        startDate = this.formatDate(startDate || '')
+        endDate = this.formatDate(endDate || '')
+        return startDate === endDate || !endDate
+          ? startDate
+          : `${startDate} - ${endDate}`
+      },
+      formatDate: function(date) {
+        return date != '' ? format(parseISO(date), 'MMMM d, yyyy') : ''
+      }
+    }
+  }
+  </script>
+  
+  <style lang="scss" scoped>
+  @import '../assets/_variables.scss';
+  
+  .upcoming-event {
+    background: #fff;
+    border: 1px solid #dbdfe6;
+    color: $darkBlue;
+    padding: 1em;
+    margin: 1em;
+    &__image {
+      margin-bottom: 1rem;
+      overflow: hidden;
+      padding-top: 100%;
+      position: relative;
+      img {
+        display: block;
+        height: auto;
+        left: 0;
+        position: absolute;
+        top: 0;
+        width: 100%;
+      }
+      span {
+        background: $purple;
+        border-radius: 15px;
+        color: #fff;
+        font-size: 0.875rem;
+        top: 10px;
+        padding: 0 0.65rem;
+        position: absolute;
+        right: 14px;
+      }
+    }
+    &__detail {
+      align-items: baseline;
+      display: flex;
+      margin-bottom: 0.625rem;
+      &:last-child {
+        margin: 0;
+      }
+      .svg-icon {
+        flex-shrink: 0;
+        margin-right: 0.5rem;
+      }
+      p {
+        margin: 0;
+      }
+    }
+    h3 {
+      font-size: 1.125rem;
+      font-weight: 500;
+      margin-bottom: 1rem;
+      line-height: 1.375rem;
+    }
+    a {
+      color: $purple;
+      text-decoration: none;
+      &:hover,
+      &:focus {
+        text-decoration: underline;
+      }
+    }
+  }
+  </style>
\ No newline at end of file
diff --git a/yarn.lock b/yarn.lock
index 13f0267..ba7d294 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1010,6 +1010,13 @@
   dependencies:
     regenerator-runtime "^0.14.0"
 
+"@babel/runtime@^7.21.0":
+  version "7.23.5"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.23.5.tgz#11edb98f8aeec529b82b211028177679144242db"
+  integrity sha512-NdUTHcPe4C99WxPub+K9l9tK5/lV4UXIoaHSYgzco9BCyjKAAwzdBI+wWtYqHt7LJdbo74ZjRPJgzVweq1sz0w==
+  dependencies:
+    regenerator-runtime "^0.14.0"
+
 "@babel/template@^7.22.15":
   version "7.22.15"
   resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.22.15.tgz#09576efc3830f0430f4548ef971dde1350ef2f38"
@@ -3481,6 +3488,13 @@ csstype@^3.0.2, csstype@^3.1.2:
   resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.1.2.tgz#1d4bf9d572f11c14031f0436e1c10bc1f571f50b"
   integrity sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ==
 
+date-fns@^2.3.0:
+  version "2.30.0"
+  resolved "https://registry.yarnpkg.com/date-fns/-/date-fns-2.30.0.tgz#f367e644839ff57894ec6ac480de40cae4b0f4d0"
+  integrity sha512-fnULvOpxnC5/Vg3NCiWelDsLiUc9bRwAPs/+LfTLNvetFCtCTN+yQz15C/fs4AwX1R9K5GLtLfn8QW+dWisaAw==
+  dependencies:
+    "@babel/runtime" "^7.21.0"
+
 dayjs@^1.11.3:
   version "1.11.10"
   resolved "https://registry.yarnpkg.com/dayjs/-/dayjs-1.11.10.tgz#68acea85317a6e164457d6d6947564029a6a16a0"