diff --git a/apps/vue-storybook/.percy.yml b/apps/vue-storybook/.percy.yml
index bc1b122d..163a32fd 100644
--- a/apps/vue-storybook/.percy.yml
+++ b/apps/vue-storybook/.percy.yml
@@ -8,6 +8,9 @@ snapshot:
   disableShadowDOM: false
   enableJavascript: true
   enableLayout: true
+discovery:
+  concurrency: 15
+  retry: true
 storybook:
   # args: {}
   # globals: {}
@@ -52,7 +55,7 @@ storybook:
       'Components/Blocks/BlockLinkCarousel: Two Items',
       'Components/Blocks/BlockLinkCarousel: Multiple Carousels',
       'Components/Heroes/Small: Video',
-      'Snapshot found: Components/Heroes/Small: HeroMedium (compact)',
+      'Components/Heroes/Small: HeroMedium (compact)',
       'Components/WWW/Homepage/HomepageCarousel: Carousel with shuffled items',
       'Components/WWW/Homepage/HomepageCarousel: Carousel with few slides',
       'Components/WWW/Homepage/HomepageCarousel/HomepageCarouselItem: Single Item',
diff --git a/apps/vue-storybook/package.json b/apps/vue-storybook/package.json
index 696950e6..9f6ae172 100644
--- a/apps/vue-storybook/package.json
+++ b/apps/vue-storybook/package.json
@@ -19,7 +19,8 @@
     "prepare:fontcss": "cp ./node_modules/@explorer-1/common/src/scss/_fonts.scss ./public/css/font-face.css",
     "storybook": "storybook dev -c .storybook -p 6006 --ci",
     "build": "storybook build -c .storybook -o storybook_compiled NODE_ENV='production'",
-    "percy": "percy storybook ./storybook_compiled",
+    "percy": "percy storybook ./storybook_compiled --verbose",
+    "percy:debug": "percy storybook ./storybook_compiled --debug --shard-count=2 --shard-index=1",
     "percy:dry-run": "percy storybook ./storybook_compiled --dry-run",
     "lint:app": "eslint './.storybook/**/*.@(js|ts)'",
     "lint:app:fix": "eslint './.storybook/**/*.@(js|ts)' --fix",
@@ -27,9 +28,9 @@
     "lint:fix": "eslint './../../packages/vue/src/**/*.stories.@(js|ts|mdx)' --fix && pnpm lint:app:fix",
     "init-msw": "msw init public/",
     "start": "http-server storybook_compiled -p 6006 -c-1 -s",
-    "test": "test-storybook --stories-json --maxWorkers=4",
+    "test": "test-storybook --stories-json --maxWorkers=4 --skipTags=\"skip-test\"",
     "test:cross-browser": "test-storybook --stories-json --verbose --maxWorkers=4 --browsers chromium webkit firefox",
-    "test:ci": "test-storybook --stories-json --maxWorkers=4",
+    "test:ci": "test-storybook --stories-json --maxWorkers=4 --skipTags=\"skip-test\"",
     "update:storybook": "npx storybook@latest upgrade --package-manager pnpm"
   },
   "dependencies": {
@@ -49,8 +50,8 @@
     "@explorer-1/html": "workspace:*",
     "@explorer-1/prettier-config": "workspace:*",
     "@explorer-1/tsconfig": "workspace:*",
-    "@percy/cli": "^1.28.6",
-    "@percy/storybook": "^6.0.0",
+    "@percy/cli": "^1.28.7",
+    "@percy/storybook": "^6.0.1",
     "@rushstack/eslint-patch": "^1.2.0",
     "@storybook/addon-a11y": "^8.2.6",
     "@storybook/addon-essentials": "^8.2.6",
diff --git a/apps/vue-storybook/vite.config.ts b/apps/vue-storybook/vite.config.ts
index d040132f..05f8da8f 100644
--- a/apps/vue-storybook/vite.config.ts
+++ b/apps/vue-storybook/vite.config.ts
@@ -22,5 +22,9 @@ export default defineConfig({
     watch: {
       usePolling: true
     }
+  },
+  build: {
+    // storybook-only
+    modulePreload: false
   }
 })
diff --git a/packages/vue/src/components/BaseTag/BaseTag.vue b/packages/vue/src/components/BaseTag/BaseTag.vue
index eeec4515..60314f50 100644
--- a/packages/vue/src/components/BaseTag/BaseTag.vue
+++ b/packages/vue/src/components/BaseTag/BaseTag.vue
@@ -10,8 +10,8 @@ const variantMap: Attributes = {
 
 const sizeMap: Attributes = {
   sm: 'text-xs uppercase border-t-2 py-1 px-2.5',
-  md: 'text-base capitalize border-t py-2 px-3',
-  lg: 'text-lg capitalize border-t py-2 px-3'
+  md: 'text-base capitalize border-t py-1 px-3',
+  lg: 'text-lg capitalize border-t py-1 px-3'
 }
 
 interface BaseTagProps {
diff --git a/packages/vue/src/components/BlockCard/BlockCard.vue b/packages/vue/src/components/BlockCard/BlockCard.vue
index 9a747dac..d5f39384 100644
--- a/packages/vue/src/components/BlockCard/BlockCard.vue
+++ b/packages/vue/src/components/BlockCard/BlockCard.vue
@@ -1,6 +1,6 @@
 <template>
   <div
-    class="shadow-jpl relative h-full"
+    class="shadow-jpl relative h-full bg-white"
     :class="{ 'flex items-center min-h-32': !image }"
   >
     <div
@@ -23,7 +23,7 @@
         />
       </BaseImagePlaceholder>
     </div>
-    <div class="px-6 py-6">
+    <div class="px-6 py-6 ThemeVariantLight">
       <div class="text-primary text-subtitle">
         {{ type }}
       </div>
@@ -64,15 +64,18 @@ export default defineComponent({
     },
     title: {
       type: String,
-      required: false
+      required: false,
+      default: undefined
     },
     text: {
       type: String,
-      required: false
+      required: false,
+      default: undefined
     },
     image: {
       type: Object,
-      required: false
+      required: false,
+      default: undefined
     }
   },
   computed: {
diff --git a/packages/vue/src/components/BlockInlineImage/BlockInlineImage.vue b/packages/vue/src/components/BlockInlineImage/BlockInlineImage.vue
index 1842ec16..2224d19b 100644
--- a/packages/vue/src/components/BlockInlineImage/BlockInlineImage.vue
+++ b/packages/vue/src/components/BlockInlineImage/BlockInlineImage.vue
@@ -1,7 +1,7 @@
 <template>
   <div
     v-if="data"
-    class="BlockInlineImage container mx-auto"
+    class="BlockInlineImage LayoutHelper container mx-auto"
   >
     <div class="lg:BaseGrid lg:px-0 px-4">
       <!-- the image -->
diff --git a/packages/vue/src/components/BlockLinkCard/BlockLinkCard.vue b/packages/vue/src/components/BlockLinkCard/BlockLinkCard.vue
index 38309db4..27a3348d 100644
--- a/packages/vue/src/components/BlockLinkCard/BlockLinkCard.vue
+++ b/packages/vue/src/components/BlockLinkCard/BlockLinkCard.vue
@@ -5,7 +5,7 @@
     :to="theItem.url ? theItem.url : undefined"
     :href="theItem.externalLink ? theItem.externalLink : undefined"
     class="BlockLinkCard group"
-    link-class="block pb-5"
+    :link-class="`block ${compact ? 'pb-3' : 'pb-5'}`"
     external-target-blank
   >
     <BaseImagePlaceholder
@@ -29,7 +29,7 @@
     </BaseImagePlaceholder>
 
     <div
-      class="transition-translate can-hover:group-hover:delay-200 duration-200 ease-in transform"
+      class="BlockLinkCard__CardContent transition-translate can-hover:group-hover:delay-200 duration-200 ease-in transform"
       :class="
         compact ? 'can-hover:group-hover:-translate-y-2' : 'can-hover:group-hover:-translate-y-3'
       "
@@ -71,7 +71,7 @@
       </p>
     </div>
     <div
-      class="can-hover:block text-action can-hover:-ml-3 can-hover:group-hover:delay-200 can-hover:opacity-0 can-hover:group-hover:ml-0 can-hover:group-hover:opacity-100 hidden -mt-1 text-2xl leading-normal transition-all duration-200 ease-in"
+      class="BlockLinkCard__CardArrow ThemeVariantLight can-hover:block text-action can-hover:-ml-3 can-hover:group-hover:delay-200 can-hover:opacity-0 can-hover:group-hover:ml-0 can-hover:group-hover:opacity-100 hidden -mt-1 text-2xl leading-normal transition-all duration-200 ease-in"
     >
       <IconArrow />
     </div>
@@ -100,41 +100,50 @@ export default defineComponent({
   props: {
     data: {
       type: Object as PropType<Card>,
-      required: false
+      required: false,
+      default: undefined
     },
     // override props as needed
     // so we can use this component in search results
     url: {
       type: String,
-      required: false
+      required: false,
+      default: undefined
     },
     externalLink: {
       type: String,
-      required: false
+      required: false,
+      default: undefined
     },
     thumbnailImage: {
       type: Object,
-      required: false
+      required: false,
+      default: undefined
     },
     label: {
       type: String,
-      required: false
+      required: false,
+      default: undefined
     },
     title: {
       type: String,
-      required: false
+      required: false,
+      default: undefined
     },
     date: {
       type: String,
-      required: false
+      required: false,
+      default: undefined
     },
     startDate: {
       type: String,
-      required: false
+      required: false,
+      default: undefined
     },
     endDate: {
       type: String,
-      required: false
+      required: false,
+      default: undefined
     },
     // if styling should be compact
     compact: {
@@ -144,7 +153,8 @@ export default defineComponent({
     // if a heading should be used and at what level
     headingLevel: {
       type: (String as PropType<HeadingLevel>) || null,
-      required: false
+      required: false,
+      default: undefined
     }
   },
   computed: {
@@ -193,5 +203,15 @@ export default defineComponent({
   .text-subtitle.divide-x {
     @apply leading-none #{!important};
   }
+  .ThemeVariantDark & {
+    @apply bg-white;
+    .BlockLinkCard__CardContent,
+    .BlockLinkCard__CardArrow {
+      @apply px-6;
+    }
+    .BaseImagePlaceholder {
+      @apply bg-gray-mid-dark;
+    }
+  }
 }
 </style>
diff --git a/packages/vue/src/components/BlockLinkCarousel/BlockLinkCarousel.vue b/packages/vue/src/components/BlockLinkCarousel/BlockLinkCarousel.vue
index 507069d4..cc7c8c55 100644
--- a/packages/vue/src/components/BlockLinkCarousel/BlockLinkCarousel.vue
+++ b/packages/vue/src/components/BlockLinkCarousel/BlockLinkCarousel.vue
@@ -1,4 +1,3 @@
-\
 <template>
   <MixinCarousel
     v-if="hasContent"
diff --git a/packages/vue/src/components/BlockRelatedLinks/BlockRelatedLinks.vue b/packages/vue/src/components/BlockRelatedLinks/BlockRelatedLinks.vue
index b3d16319..57e2c892 100644
--- a/packages/vue/src/components/BlockRelatedLinks/BlockRelatedLinks.vue
+++ b/packages/vue/src/components/BlockRelatedLinks/BlockRelatedLinks.vue
@@ -3,6 +3,7 @@
     <BaseHeading
       v-if="data.heading"
       level="h2"
+      v-bind="$attrs"
       class="md:mb-8 mb-5"
     >
       {{ data.heading }}
@@ -43,7 +44,6 @@
 import { defineComponent } from 'vue'
 import type { PropType } from 'vue'
 import type { BlockData, RelatedLinkObject } from './../../interfaces'
-
 import RelatedLink from './../BlockRelatedLinks/RelatedLink.vue'
 import BaseHeading from './../BaseHeading/BaseHeading.vue'
 
@@ -63,6 +63,11 @@ export default defineComponent({
       type: Object as PropType<BlockRelatedLinksObject>,
       required: true,
       default: () => ({})
+    },
+    headingSize: {
+      type: String,
+      required: false,
+      default: undefined
     }
   },
   computed: {
diff --git a/packages/vue/src/components/BlockStreamfield/BlockStreamfield.stories.js b/packages/vue/src/components/BlockStreamfield/BlockStreamfield.stories.js
index bed9089e..d6ba1709 100644
--- a/packages/vue/src/components/BlockStreamfield/BlockStreamfield.stories.js
+++ b/packages/vue/src/components/BlockStreamfield/BlockStreamfield.stories.js
@@ -47,6 +47,7 @@ export const BlockStreamfieldTruncatedData = {
       value:
         '<p>Lorem ipsum <a href="/missions/test-mission/">dolor</a> sit amet, consectetur adipiscing elit. Quisque vitae justo quis justo malesuada molestie. Cras sed tincidunt dui.</p><p>Integer imperdiet blandit neque vitae euismod. Nulla aliquet lacus nibh,  vel tincidunt urna efficitur non. In et eros vitae ex posuere maximus  quis eget urna. Suspendisse fringilla posuere velit sit amet posuere.  Morbi malesuada bibendum vehicula. Donec faucibus ut erat ut mattis.  Suspendisse ornare, quam at placerat cursus, dolor mi lacinia nunc, eget  maximus augue nulla in dolor.</p>\n'
     },
+    BlockInlineImageData.block,
     BlockIframeEmbedData
   ]
 }
diff --git a/packages/vue/src/components/BlockStreamfield/BlockStreamfield.vue b/packages/vue/src/components/BlockStreamfield/BlockStreamfield.vue
index f9b8fe10..f5df4823 100644
--- a/packages/vue/src/components/BlockStreamfield/BlockStreamfield.vue
+++ b/packages/vue/src/components/BlockStreamfield/BlockStreamfield.vue
@@ -316,6 +316,9 @@ export default defineComponent({
   &.-fluid {
     .LayoutHelper {
       @apply block;
+      &.container {
+        @apply px-0;
+      }
     }
 
     .BlockInlineImage {
diff --git a/packages/vue/src/components/CalendarButton/CalendarButton.stories.js b/packages/vue/src/components/CalendarButton/CalendarButton.stories.js
index a796571a..c27f6ba8 100644
--- a/packages/vue/src/components/CalendarButton/CalendarButton.stories.js
+++ b/packages/vue/src/components/CalendarButton/CalendarButton.stories.js
@@ -15,22 +15,4 @@ export const CalendarButtonData = {
   endDatetime: '2021-11-11T23:59:59.999999-08:00'
 }
 
-// template
-const CalendarButtonTemplate = (args) => ({
-  props: Object.keys(args),
-  components: { CalendarButton },
-  template: `
-  <CalendarButton
-    :is-all-day="isAllDay"
-    :start-datetime="startDatetime"
-    :end-datetime="endDatetime"
-    :title="title"
-    :location="location"
-    />
-  `
-})
-
-export const BaseStory = CalendarButtonTemplate.bind({})
-BaseStory.args = {
-  ...CalendarButtonData
-}
+export const BaseStory = { name: 'CalendarButton', args: CalendarButtonData }
diff --git a/packages/vue/src/components/CalendarButton/CalendarButton.vue b/packages/vue/src/components/CalendarButton/CalendarButton.vue
index d942c0c0..5e77d8c8 100644
--- a/packages/vue/src/components/CalendarButton/CalendarButton.vue
+++ b/packages/vue/src/components/CalendarButton/CalendarButton.vue
@@ -1,12 +1,10 @@
 <template>
   <BaseButton
+    ref="CalendarButton"
     class="w-full"
     variant="secondary"
     compact
-    @click="
-      // @ts-ignore
-      icalendar.download()
-    "
+    @click="handleDownload"
   >
     Add to calendar
   </BaseButton>
@@ -15,6 +13,7 @@
 import { defineComponent } from 'vue'
 import { ICalendar } from 'datebook'
 import type { CalendarOptions } from 'datebook'
+import { kebabCase } from 'lodash'
 // @ts-ignore
 import dayjs from 'dayjs'
 import BaseButton from './../BaseButton/BaseButton.vue'
@@ -27,31 +26,50 @@ export default defineComponent({
   props: {
     isAllDay: {
       type: Boolean,
-      required: true
+      required: false,
+      default: false
     },
+
     startDatetime: {
       type: String,
       required: true
     },
     endDatetime: {
       type: String,
-      required: false
+      required: false,
+      default: undefined
     },
     title: {
       type: String,
-      required: false
+      required: false,
+      default: undefined
     },
     location: {
       type: String,
-      required: false
+      required: false,
+      default: undefined
     },
     description: {
       type: String,
-      required: false
+      required: false,
+      default: undefined
+    }
+  },
+  data(): {
+    icalendar: any
+    options: CalendarOptions | undefined
+  } {
+    return {
+      icalendar: undefined,
+      options: undefined
     }
   },
-  computed: {
-    icalendar(): ICalendar {
+
+  mounted() {
+    this.init()
+  },
+  methods: {
+    init() {
       let recurrence = {}
       if (this.endDatetime && this.isAllDay) {
         // Calculate how many full days
@@ -61,7 +79,7 @@ export default defineComponent({
         recurrence = { frequency: 'DAILY', interval: 1, count: difference }
       }
 
-      const options: CalendarOptions = {
+      this.options = {
         title: this.title ? this.title : undefined,
         location: this.location ? this.addSlashes(this.location) : undefined,
         description: this.description ? this.description : undefined,
@@ -69,17 +87,25 @@ export default defineComponent({
         end: !this.isAllDay && this.endDatetime ? new Date(this.endDatetime) : undefined,
         recurrence
       }
-
-      return new ICalendar(options)
-    }
-  },
-  methods: {
+      this.icalendar = new ICalendar(this.options)
+    },
     addSlashes(string: string): string {
       // Escape special characters COMMA, SEMI-COLON and BACKSLASH
       // as temporary fix for this issue https://github.com/jshor/datebook/issues/179
       // regex based of https://stackoverflow.com/a/770533
       // eslint-disable-next-line
       return string.replace(/[,;\\]/g, '\\$&').replace(/\u0000/g, '\\0')
+    },
+    handleDownload() {
+      const ics = this.icalendar.render()
+      const blob = new Blob([ics], {
+        type: 'text/calendar'
+      })
+      const objectUrl = window.URL.createObjectURL(blob)
+      let fileLink = document.createElement('a')
+      fileLink.href = objectUrl
+      fileLink.download = kebabCase(this.title)
+      fileLink.click()
     }
   }
 })
diff --git a/packages/vue/src/components/EventDetailHero/EventDetailHero.vue b/packages/vue/src/components/EventDetailHero/EventDetailHero.vue
index 3972a4f1..c93be4a3 100644
--- a/packages/vue/src/components/EventDetailHero/EventDetailHero.vue
+++ b/packages/vue/src/components/EventDetailHero/EventDetailHero.vue
@@ -1,33 +1,29 @@
 <template>
   <div
     v-if="image"
-    class="HeroMedia mb-10 md:mb-10 lg:mb-14 -mx-4 lg:mx-0"
+    class="EventDetailHero mb-10 md:mb-10 lg:mb-14 -mx-4 lg:mx-0"
   >
-    <div class="bg-gray-light">
-      <div class="relative flex items-center mx-auto overflow-hidden vh-crop max-w-screen-3xl">
-        <div class="hero">
-          <BaseImage
-            v-if="image.src"
-            :src="image.src.url"
-            :srcset="getSrcSet"
-            :alt="image.alt"
-            :width="image.src.width"
-            :height="image.src.height"
-            image-class="object-center w-full h-full"
-            object-fit-class="cover"
-            loading="lazy"
-          />
-          <div
-            v-if="startDateSplit"
-            class="ThemeVariantLight absolute top-0 left-0 z-10 px-4 py-4 text-center text-white bg-primary"
-          >
-            <div class="font-extrabold text-6xl leading-tight tracking-wider">
-              {{ startDateSplit.day }}
-            </div>
-            <div class="text-subtitle">
-              {{ startDateSplit.monthAndYear }}
-            </div>
-          </div>
+    <div class="hero">
+      <BaseImage
+        v-if="image.src"
+        :src="image.src.url"
+        :srcset="getSrcSet"
+        :width="image.src.width"
+        :height="image.src.height"
+        :alt="image.alt"
+        image-class="w-full h-auto"
+        object-fit-class="cover"
+        loading="lazy"
+      />
+      <div
+        v-if="startDateSplit"
+        class="ThemeVariantLight absolute top-0 left-0 z-10 px-4 py-4 text-center text-white bg-primary"
+      >
+        <div class="font-extrabold text-6xl leading-tight tracking-wider">
+          {{ startDateSplit.day }}
+        </div>
+        <div class="text-subtitle">
+          {{ startDateSplit.monthAndYear }}
         </div>
       </div>
     </div>
@@ -47,7 +43,8 @@ export default defineComponent({
   props: {
     data: {
       type: Object,
-      required: false
+      required: false,
+      default: undefined
     },
     startDateSplit: {
       type: Object as PropType<EventDateObject | undefined>,
@@ -55,7 +52,8 @@ export default defineComponent({
     },
     image: {
       type: Object,
-      required: false
+      required: false,
+      default: undefined
     }
   },
   computed: {
@@ -65,6 +63,3 @@ export default defineComponent({
   }
 })
 </script>
-<style lang="scss">
-@import '@explorer-1/common/src/scss/components/HeroMedia';
-</style>
diff --git a/packages/vue/src/components/MixinCarousel/MixinCarousel.vue b/packages/vue/src/components/MixinCarousel/MixinCarousel.vue
index 4fd3058e..140d40be 100644
--- a/packages/vue/src/components/MixinCarousel/MixinCarousel.vue
+++ b/packages/vue/src/components/MixinCarousel/MixinCarousel.vue
@@ -17,7 +17,7 @@
         <div class="sm:flex flex-wrap items-center justify-between">
           <h2
             v-if="heading"
-            class="font-primary text-gray-dark lg:text-6xl text-3xl font-semibold leading-normal tracking-normal uppercase"
+            class="MixinCarousel__Heading text-h3 defaultTheme:uppercase"
           >
             {{ heading }}
           </h2>
diff --git a/packages/vue/src/components/ThumbnailCarousel/ThumbnailCarousel.stories.js b/packages/vue/src/components/ThumbnailCarousel/ThumbnailCarousel.stories.js
index 8c0195b8..83891759 100644
--- a/packages/vue/src/components/ThumbnailCarousel/ThumbnailCarousel.stories.js
+++ b/packages/vue/src/components/ThumbnailCarousel/ThumbnailCarousel.stories.js
@@ -3,6 +3,7 @@ import ThumbnailCarousel from './ThumbnailCarousel.vue'
 export default {
   title: 'Components/Utilities/ThumbnailCarousel',
   component: ThumbnailCarousel,
+  tags: ['skip-test'],
   parameters: {
     docs: {
       description: {
diff --git a/packages/vue/src/templates/PageEventDetail/PageEventDetail.stories.js b/packages/vue/src/templates/PageEventDetail/PageEventDetail.stories.js
index 8c29be70..9ec6bd15 100644
--- a/packages/vue/src/templates/PageEventDetail/PageEventDetail.stories.js
+++ b/packages/vue/src/templates/PageEventDetail/PageEventDetail.stories.js
@@ -6,6 +6,7 @@ import PageEventDetail from './PageEventDetail.vue'
 export default {
   title: 'Templates/PageEventDetail',
   component: PageEventDetail,
+  tags: ['!autodocs'],
   parameters: {
     html: {
       root: '#storyDecorator'
@@ -17,6 +18,7 @@ export default {
 
 // stories
 export const BaseStory = {
+  name: 'PageEventDetail',
   args: {
     data: {
       id: '285',
@@ -34,7 +36,7 @@ export const BaseStory = {
       label: 'Events',
       location: 'Webcast',
       registerLink: [],
-      heroImage: {
+      eventImage: {
         ...EventDetailHeroData.heroImage
       },
       thumbnailImage: {
diff --git a/packages/vue/src/templates/PageEventDetail/PageEventDetail.vue b/packages/vue/src/templates/PageEventDetail/PageEventDetail.vue
index e5f0316a..5bc6910c 100755
--- a/packages/vue/src/templates/PageEventDetail/PageEventDetail.vue
+++ b/packages/vue/src/templates/PageEventDetail/PageEventDetail.vue
@@ -32,7 +32,7 @@
     >
       <div
         v-if="data.label"
-        class="flex flex-wrap items-start mb-3"
+        class="flex flex-wrap items-start mb-4"
       >
         <nuxt-link
           class="py-3 cursor-pointer group nuxt-link-active text-subtitle text-primary can-hover:hover:text-primary-dark"
@@ -62,7 +62,7 @@
 
     <LayoutHelper indent="col-2">
       <EventDetailHero
-        :image="data.heroImage"
+        :image="data.eventImage"
         :start-date-split="formattedSplitEventDates"
       />
 
@@ -73,7 +73,7 @@
           :class="data.registerLink && data.registerLink.length > 0 ? '' : 'lg:mb-10'"
         >
           <div class="PageEventDetail__Metadata text-primary">
-            <IconCalendar class="relative mr-3" />
+            <IconCalendar class="relative mr-3 text-[1.2rem]" />
             <span>{{ formattedEventDates }}</span>
           </div>
           <div
diff --git a/packages/vue/src/templates/PageImageDetail/PageImageDetail.stories.js b/packages/vue/src/templates/PageImageDetail/PageImageDetail.stories.js
index e870de4f..c3611983 100644
--- a/packages/vue/src/templates/PageImageDetail/PageImageDetail.stories.js
+++ b/packages/vue/src/templates/PageImageDetail/PageImageDetail.stories.js
@@ -6,7 +6,7 @@ export default {
   title: 'Templates/PageImageDetail',
   component: PageImageDetail,
   excludeStories: /.*Data$/,
-  tags: ['!autodocs'],
+  tags: ['!autodocs', 'skip-test'],
   parameters: {
     layout: 'fullscreen'
   }
diff --git a/packages/vue/src/templates/edu/PageContentEdu.stories.js b/packages/vue/src/templates/edu/PageContentEdu.stories.js
index cee5babb..e86f4d7c 100644
--- a/packages/vue/src/templates/edu/PageContentEdu.stories.js
+++ b/packages/vue/src/templates/edu/PageContentEdu.stories.js
@@ -26,6 +26,7 @@ export default {
 
 // stories
 export const BaseStory = {
+  name: 'PageContent',
   args: {
     data: ContentPageData
   }
diff --git a/packages/vue/src/templates/edu/PageEduEventDetail/PageEduEventDetail.stories.js b/packages/vue/src/templates/edu/PageEduEventDetail/PageEduEventDetail.stories.js
new file mode 100644
index 00000000..be61d8fb
--- /dev/null
+++ b/packages/vue/src/templates/edu/PageEduEventDetail/PageEduEventDetail.stories.js
@@ -0,0 +1,130 @@
+import { BlockKeyPointsData } from './../../../components/BlockKeyPoints/BlockKeyPoints.stories'
+import { BlockLinkCardCarouselData } from './../../../components/BlockLinkCarousel/BlockLinkCarousel.stories.js'
+import { EventDetailHeroData } from './../../../components/EventDetailHero/EventDetailHero.stories'
+import { EventsBlockLinkCarouselData } from './../../../components/BlockLinkCarousel/BlockLinkCarousel.stories'
+import PageEduEventDetail from './PageEduEventDetail.vue'
+
+export default {
+  title: 'Templates/EDU/PageEduEventDetail',
+  component: PageEduEventDetail,
+  tags: ['!autodocs'],
+  parameters: {
+    html: {
+      root: '#storyDecorator'
+    },
+    layout: 'fullscreen'
+  },
+  excludeStories: /.*Data$/
+}
+
+// stories
+export const BaseStory = {
+  name: 'PageEduEventDetail',
+  args: {
+    data: {
+      id: '285',
+      title: 'Becoming a NASA engineer',
+      slug: 'becoming-a-nasa-engineer',
+      url: '/events/becoming-a-nasa-engineer',
+      startDate: '2022-01-23',
+      startDatetime: '2022-01-23T17:00:00-08:00',
+      startTime: '17:00:00',
+      endDate: '2022-01-25',
+      endDatetime: '2022-01-25T23:00:00-08:00',
+      endTime: '23:00:00',
+      isAllDay: false,
+      timezone: 'PST',
+      eventType: 'Workshop',
+      summary:
+        'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus et luctus nisi. Maecenas vel turpis sem. Nullam ultricies nulla quis nisi faucibus eleifend. In turpis ante, blandit nec dapibus tempor, posuere at erat. In justo quam, imperdiet at hendrerit eget, imperdiet ut orci. ',
+      locationName: 'Webcast',
+      registerLink: [
+        {
+          text: 'Registration Link',
+          document: '',
+          page: {
+            url: '/placeholder'
+          },
+          externalLink: ''
+        }
+      ],
+      eventImage: {
+        __typename: 'CustomImage',
+        srcSet:
+          'https://picsum.photos/720/420 320w, https://picsum.photos/720/420 640w, https://picsum.photos/720/420 720w',
+        original: 'https://picsum.photos/720/420',
+        src: {
+          __typename: 'CustomRendition',
+          url: 'https://picsum.photos/720/420',
+          width: '720',
+          height: '420'
+        },
+        title: 'Marine Picks First Public Mars Global Surveyor Image',
+        alt: '',
+        caption:
+          '<p data-block-key="y00sz">A close-up view of part of the area imaged by Mars Global Surveyor for its public request program.</p>',
+        credit: 'Credit',
+        detailUrl: null
+      },
+      thumbnailImage: {
+        alt: '',
+        original: 'https://picsum.photos/512/288'
+      },
+      targetAudience: 'All ages',
+      body: [
+        BlockKeyPointsData,
+        {
+          blockType: 'RichTextBlock',
+          value:
+            '<p>Lorem ipsum <a href="/missions/test-mission/">dolor</a> sit amet, consectetur adipiscing elit. Quisque vitae justo quis justo malesuada molestie. Cras sed tincidunt dui.</p><p>Integer imperdiet blandit neque vitae euismod. Nulla aliquet lacus nibh,  vel tincidunt urna efficitur non. In et eros vitae ex posuere maximus  quis eget urna. Suspendisse fringilla posuere velit sit amet posuere.  Morbi malesuada bibendum vehicula. Donec faucibus ut erat ut mattis.  Suspendisse ornare, quam at placerat cursus, dolor mi lacinia nunc, eget  maximus augue nulla in dolor.</p>\n'
+        }
+      ],
+      relatedEvents: [...EventsBlockLinkCarouselData],
+      speakers: [
+        {
+          host: 'host',
+          id: '1',
+          internalLink: null,
+          name: 'Varoujan Gorjian',
+          title: 'Splitzer Research Scientest, JPL'
+        },
+        {
+          host: 'co-host',
+          id: '2',
+          image: {
+            alt: '',
+            src: {
+              height: '450',
+              url: 'https://picsum.photos/560/560',
+              width: '450'
+            }
+          },
+          internalLink: null,
+          name: 'Robert Hurt',
+          title: 'Splitzer visualisation'
+        }
+      ],
+      relatedLinks: [
+        {
+          blockType: 'RelatedLinksBlock',
+          heading: 'Related Links',
+          links: [
+            {
+              document: null,
+              externalLink: 'http://www.google.com',
+              page: null,
+              text: 'Lorem ipsum dolor'
+            },
+            {
+              document: null,
+              externalLink: 'http://www.google.com',
+              page: null,
+              text: 'Sit amet consectatur'
+            }
+          ]
+        }
+      ],
+      relatedContent: BlockLinkCardCarouselData
+    }
+  }
+}
diff --git a/packages/vue/src/templates/edu/PageEduEventDetail/PageEduEventDetail.vue b/packages/vue/src/templates/edu/PageEduEventDetail/PageEduEventDetail.vue
new file mode 100644
index 00000000..186a4f2e
--- /dev/null
+++ b/packages/vue/src/templates/edu/PageEduEventDetail/PageEduEventDetail.vue
@@ -0,0 +1,419 @@
+<template>
+  <div
+    v-if="data"
+    class="PageEduEventDetail pt-5 ThemeVariantLight lg:pt-12"
+    itemscope
+    itemtype="http://schema.org/Event"
+  >
+    <!-- schema.org -->
+    <meta
+      v-if="data.thumbnailImage && data.thumbnailImage.original"
+      itemprop="thumbnailUrl"
+      :content="data.thumbnailImage.original"
+    />
+    <meta
+      itemprop="startDate"
+      :content="data.startDatetime"
+    />
+    <meta
+      v-if="data.endDatetime"
+      itemprop="endDate"
+      :content="data.endDatetime"
+    />
+    <meta
+      v-if="data.summary || data.body"
+      itemprop="description"
+      :content="data.summary || data.body"
+    />
+
+    <LayoutHelper
+      indent="col-2"
+      class="mb-6 lg:mb-12"
+    >
+      <div
+        v-if="data.eventType"
+        class="flex flex-wrap items-start mb-3"
+      >
+        <BaseTag
+          variant="primary"
+          size="md"
+        >
+          {{ data.eventType }}
+        </BaseTag>
+      </div>
+      <BaseHeading
+        level="h1"
+        itemprop="name"
+      >
+        {{ data.title }}
+      </BaseHeading>
+      <ShareButtonsEdu
+        class="mt-4"
+        :title="data.title"
+        :url="data.url"
+      />
+    </LayoutHelper>
+
+    <LayoutHelper indent="col-2">
+      <EventDetailHero
+        :image="data.eventImage"
+        :start-date-split="formattedSplitEventDates"
+      />
+
+      <!-- Event details -->
+      <div>
+        <div
+          class="py-1 mb-10 text-xl lg:mb-0 lg:flex"
+          :class="data.registerLink && data.registerLink.length > 0 ? '' : 'lg:mb-10'"
+        >
+          <div
+            v-if="formattedEventDates || data.customDate"
+            class="PageEduEventDetail__Metadata text-primary"
+          >
+            <IconCalendar class="relative mr-3 text-[1.2rem]" />
+            <span>{{ formattedEventDates || data.customDate }}</span>
+          </div>
+          <div
+            v-show="displayTime"
+            class="PageEduEventDetail__Metadata text-primary"
+          >
+            <IconTime class="relative mr-3" />
+            <span>{{ displayTime }}</span>
+          </div>
+          <!--Virtual location -->
+          <div
+            v-if="data.isVirtualEvent && data.locationLink"
+            itemprop="location"
+            itemscope
+            itemtype="https://schema.org/VirtualLocation"
+            class="PageEduEventDetail__Metadata text-primary"
+          >
+            <link
+              itemprop="url"
+              :href="data.locationLink"
+            />
+            <meta
+              itemprop="name"
+              :content="data.locationName"
+            />
+            <IconLocation class="relative mr-3" />
+            <BaseLink
+              variant="none"
+              class="text-action"
+              :href="data.locationLink"
+              external-target-blank
+            >
+              {{ data.locationName }}
+            </BaseLink>
+          </div>
+          <!-- Normal location -->
+          <div
+            v-else-if="data.locationName"
+            class="PageEduEventDetail__Metadata text-primary"
+          >
+            <meta
+              itemprop="location"
+              :content="data.locationName"
+            />
+            <IconLocation class="relative mr-3" />
+            <BaseLink
+              v-if="data.locationLink"
+              variant="none"
+              :href="data.locationLink"
+              external-target-blank
+            >
+              {{ data.locationName }}
+            </BaseLink>
+            <span v-else>{{ data.locationName }}</span>
+          </div>
+          <div
+            v-if="data.targetAudience"
+            class="PageEduEventDetail__Metadata text-primary"
+          >
+            <IconUser class="relative mr-3 text-[.9rem]" />
+            <span>{{ data.targetAudience }}</span>
+          </div>
+
+          <div class="PageEduEventDetail__Buttons">
+            <BaseButton
+              v-if="
+                data.registerLink &&
+                data.registerLink.length > 0 &&
+                ((data.registerLink[0].page && data.registerLink[0].page.url) ||
+                  data.registerLink[0].externalLink)
+              "
+              class="w-full px-0 mb-5"
+              :href="data.registerLink[0].externalLink ? data.registerLink[0].externalLink : null"
+              :to="
+                data.registerLink[0].page && data.registerLink[0].page.url
+                  ? data.registerLink[0].page.url
+                  : null
+              "
+              :target="data.registerLink[0].externalLink ? '_blank' : '_self'"
+              compact
+              >Register for event
+            </BaseButton>
+            <!-- Todo IF VIRTUAL EVENT passes url as string to location prop -->
+            <!-- location= location name and link -->
+            <CalendarButton
+              v-if="data.startDatetime"
+              :start-datetime="data.startDatetime"
+              :end-datetime="data.endDatetime ? data.endDatetime : null"
+              :title="data.title ? data.title : null"
+              :location="data.locationName ? data.locationName : null"
+              :description="data.summary ? data.summary : null"
+            />
+          </div>
+        </div>
+
+        <!-- Body -->
+        <div
+          v-if="data.body || data.summary"
+          class="grid-cols-10 lg:grid -mx-4 lg:mx-0"
+        >
+          <div class="col-span-7">
+            <p
+              v-if="data.summary"
+              class="BlockText text-body-lg mb-8 px-4 lg:px-0 font-semibold"
+            >
+              {{ data.summary }}
+            </p>
+            <BlockStreamfield
+              v-if="data.body"
+              variant="fluid"
+              :data="data.body"
+            />
+          </div>
+        </div>
+      </div>
+    </LayoutHelper>
+
+    <!-- Speakers -->
+    <LayoutHelper
+      v-if="data.speakers && data.speakers.length > 0"
+      indent="col-2"
+      class="mb-12 lg:mb-16"
+    >
+      <div class="grid-cols-10 lg:grid">
+        <div class="col-span-7">
+          <BaseHeading
+            level="h2"
+            size="h3"
+            class="mb-5 md:mb-8"
+            >Speakers</BaseHeading
+          >
+          <div class="flex flex-col flex-wrap justify-start md:flex-row md:-mx-4">
+            <div
+              v-for="(speaker, index) in data.speakers"
+              :key="index"
+              class="flex flex-1 mb-6 md:flex-none md:flex-wrap md:mx-4 md:w-56"
+            >
+              <div class="w-40 mr-6 md:mr-0 md:w-56">
+                <BaseImagePlaceholder
+                  aspect-ratio="1:1"
+                  class="relative overflow-hidden bg-gray-light-mid"
+                  transparent-mode
+                >
+                  <BaseImage
+                    v-if="speaker.image && speaker.image.src"
+                    :src="speaker.image.src.url"
+                    :width="speaker.image.src.width"
+                    :height="speaker.image.src.height"
+                    alt=""
+                    class="object-cover"
+                    loading="lazy"
+                  />
+                  <img
+                    v-else
+                    :src="PlaceholderPortrait"
+                    alt=""
+                  />
+                </BaseImagePlaceholder>
+              </div>
+              <div class="flex-1 h-full">
+                <h3
+                  v-if="speaker.name"
+                  class="my-3 text-lg !font-normal !tracking-normal leading-none"
+                >
+                  <BaseLink
+                    v-if="speaker.internalLink || speaker.externalLink"
+                    link-class="no-underline normal-case"
+                    :to="speaker.internalLink ? speaker.internalLink.url : null"
+                    :href="speaker.externalLink ? speaker.externalLink : null"
+                    external-target-blank
+                  >
+                    {{ speaker.name }}
+                  </BaseLink>
+                  <template v-else>
+                    {{ speaker.name }}
+                  </template>
+                </h3>
+                <p
+                  v-if="speaker.title"
+                  class="mb-3 text-gray-mid-dark"
+                >
+                  {{ speaker.title }}
+                </p>
+                <p class="text-action capitalize">
+                  {{ speaker.host }}
+                </p>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </LayoutHelper>
+
+    <!-- Webcast -->
+    <LayoutHelper
+      v-if="data.relatedLinks && data.relatedLinks.length > 0"
+      indent="col-2"
+      class="my-12 lg:my-16"
+    >
+      <BlockRelatedLinks
+        :data="data.relatedLinks[0]"
+        size="h3"
+      />
+    </LayoutHelper>
+
+    <!-- Related Events -->
+    <LayoutHelper
+      v-if="data.relatedEvents?.length"
+      indent="col-1"
+      class="my-12 lg:my-16"
+    >
+      <BlockLinkCarousel
+        item-type="cards"
+        size="h3"
+        heading="Related Events"
+        :items="data.relatedEvents"
+      />
+    </LayoutHelper>
+    <!-- Related Content -->
+    <div
+      v-if="data.relatedContent?.length"
+      class="bg-stars bg-[#15003B] lg:py-24 lg:mt-24 py-12 mt-12"
+    >
+      <BlockLinkCarousel
+        class="ThemeVariantDark"
+        item-type="cards"
+        heading="Explore More"
+        :items="data.relatedContent"
+      />
+    </div>
+  </div>
+</template>
+<script lang="ts">
+import { defineComponent } from 'vue'
+import {
+  mixinFormatEventDates,
+  mixinFormatEventTimeInHoursAndMinutes,
+  mixinFormatSplitEventDates
+} from '../../../utils/mixins'
+import LayoutHelper from './../../../components/LayoutHelper/LayoutHelper.vue'
+import BaseHeading from './../../../components/BaseHeading/BaseHeading.vue'
+import BaseTag from './../../../components/BaseTag/BaseTag.vue'
+import ShareButtonsEdu from './../../../components/ShareButtonsEdu/ShareButtonsEdu.vue'
+import EventDetailHero from './../../../components/EventDetailHero/EventDetailHero.vue'
+import IconCalendar from './../../../components/Icons/IconCalendar.vue'
+import IconLocation from './../../../components/Icons/IconLocation.vue'
+import IconTime from './../../../components/Icons/IconTime.vue'
+import IconUser from './../../../components/Icons/IconUser.vue'
+import BaseLink from './../../../components/BaseLink/BaseLink.vue'
+import BaseButton from './../../../components/BaseButton/BaseButton.vue'
+import CalendarButton from './../../../components/CalendarButton/CalendarButton.vue'
+import BlockStreamfield from './../../../components/BlockStreamfield/BlockStreamfield.vue'
+import BaseImagePlaceholder from './../../../components/BaseImagePlaceholder/BaseImagePlaceholder.vue'
+import BaseImage from './../../../components/BaseImage/BaseImage.vue'
+import BlockRelatedLinks from './../../../components/BlockRelatedLinks/BlockRelatedLinks.vue'
+import BlockLinkCarousel from './../../../components/BlockLinkCarousel/BlockLinkCarousel.vue'
+// @ts-ignore
+import PlaceholderPortrait from '@explorer-1/common/src/images/svg/placeholder-portrait.svg'
+
+export default defineComponent({
+  name: 'PageEduEventDetail',
+  components: {
+    LayoutHelper,
+    BaseHeading,
+    BaseTag,
+    ShareButtonsEdu,
+    EventDetailHero,
+    IconCalendar,
+    IconLocation,
+    IconTime,
+    IconUser,
+    BaseLink,
+    BaseButton,
+    CalendarButton,
+    BlockStreamfield,
+    BaseImagePlaceholder,
+    BaseImage,
+    BlockRelatedLinks,
+    BlockLinkCarousel
+  },
+  props: {
+    data: {
+      type: Object,
+      required: false,
+      default: undefined
+    }
+  },
+  data() {
+    return {
+      PlaceholderPortrait: PlaceholderPortrait
+    }
+  },
+  computed: {
+    displayTime(): string {
+      return this.data
+        ? mixinFormatEventTimeInHoursAndMinutes(
+            this.data.startDatetime,
+            this.data.endDatetime,
+            this.data.endTime
+          )
+        : ''
+    },
+    formattedEventDates(): string {
+      return this.data ? mixinFormatEventDates(this.data.startDatetime, this.data.endDatetime) : ''
+    },
+    formattedSplitEventDates() {
+      return this.data
+        ? mixinFormatSplitEventDates(this.data.startDatetime, this.data.endDatetime)
+        : undefined
+    }
+  }
+})
+</script>
+<style lang="scss">
+.PageEduEventDetail {
+  .PageEduEventDetail__Metadata {
+    @apply flex;
+    @apply items-baseline;
+    @apply mr-12 md:mr-8 lg:mr-12;
+    @apply mb-5 lg:mb-7;
+
+    span {
+      max-width: 230px;
+      min-width: 110px;
+      @apply text-gray-dark;
+    }
+
+    svg {
+      min-width: 1.25rem;
+      @apply top-0.5;
+    }
+  }
+
+  .PageEduEventDetail__Buttons {
+    @apply text-base;
+    @apply lg:ml-auto;
+    @apply mt-10;
+    @apply lg:mt-0;
+
+    max-width: 260px;
+  }
+  .bg-stars .MixinCarousel__Heading {
+    @apply text-white;
+  }
+}
+</style>
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 4cc03c9a..27e96634 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -182,11 +182,11 @@ importers:
         specifier: workspace:*
         version: link:../../packages/configs/tsconfig
       '@percy/cli':
-        specifier: ^1.28.6
+        specifier: ^1.28.7
         version: 1.28.7(typescript@5.4.5)
       '@percy/storybook':
-        specifier: ^6.0.0
-        version: 6.0.0(typescript@5.4.5)
+        specifier: ^6.0.1
+        version: 6.0.1(typescript@5.4.5)
       '@rushstack/eslint-patch':
         specifier: ^1.2.0
         version: 1.10.3
@@ -2304,6 +2304,10 @@ packages:
     resolution: {integrity: sha512-7EAlaJT4B+naFLkF8YECOw1koZxUM59YSA90SS9KPxezEFQ1lZNBlbXN2zcK7xBF5tqdA05wHQECJkuA4V71kA==}
     hasBin: true
 
+  '@percy/storybook@6.0.1':
+    resolution: {integrity: sha512-A1EmBOY6dfv5RR4OiqkjOf0Ga5glASrgq6A/wHDBIpZTTUuBxHXUT3J7hKfGx5pr6P4TdZ1gy4fuVhtvOlTFgA==}
+    hasBin: true
+
   '@percy/webdriver-utils@1.28.7':
     resolution: {integrity: sha512-BviRMj/oHgdniHoz1nzInpIXl4JTk4vZ0+9azWntGCThITc/HhQE1sLDcHhZGYvviY+NQ4ofCcBSzZRu1z1GcQ==}
     engines: {node: '>=14'}
@@ -9143,6 +9147,18 @@ packages:
       utf-8-validate:
         optional: true
 
+  ws@8.18.0:
+    resolution: {integrity: sha512-8VbfWfHLbbwu3+N6OKsOMpBdT4kXPDDB9cJk2bJ6mh9ucxdlnNvH1e+roYkKmN9Nxw2yjz7VzeO9oOz2zJ04Pw==}
+    engines: {node: '>=10.0.0'}
+    peerDependencies:
+      bufferutil: ^4.0.1
+      utf-8-validate: '>=5.0.2'
+    peerDependenciesMeta:
+      bufferutil:
+        optional: true
+      utf-8-validate:
+        optional: true
+
   xml-name-validator@4.0.0:
     resolution: {integrity: sha512-ICP2e+jsHvAj2E2lIHxa5tjXRlKDJo4IdvPvCXbXQGdzSfmSpNVyIKMvoZHjDY9DP0zV17iI85o90vRFXNccRw==}
     engines: {node: '>=12'}
@@ -11379,7 +11395,7 @@ snapshots:
       pako: 2.1.0
       path-to-regexp: 6.2.2
       rimraf: 3.0.2
-      ws: 8.17.0
+      ws: 8.18.0
       yaml: 2.4.5
     transitivePeerDependencies:
       - bufferutil
@@ -11408,6 +11424,17 @@ snapshots:
       - typescript
       - utf-8-validate
 
+  '@percy/storybook@6.0.1(typescript@5.4.5)':
+    dependencies:
+      '@percy/cli-command': 1.28.7(typescript@5.4.5)
+      cross-spawn: 7.0.3
+      qs: 6.12.1
+    transitivePeerDependencies:
+      - bufferutil
+      - supports-color
+      - typescript
+      - utf-8-validate
+
   '@percy/webdriver-utils@1.28.7(typescript@5.4.5)':
     dependencies:
       '@percy/config': 1.28.7(typescript@5.4.5)
@@ -19936,6 +19963,8 @@ snapshots:
 
   ws@8.17.0: {}
 
+  ws@8.18.0: {}
+
   xml-name-validator@4.0.0: {}
 
   xml@1.0.1: {}