diff --git a/pages/events/[slug].vue b/pages/events/[slug].vue
index f2bd516..52a46b6 100644
--- a/pages/events/[slug].vue
+++ b/pages/events/[slug].vue
@@ -2,7 +2,7 @@
 // COMPONENT RE-IMPORTS
 // TODO: remove when we have implemented component library as a module
 // https://nuxt.com/docs/guide/directory-structure/components#library-authors
-import { BlockEventDetail, BlockInfo, BlockTag, ButtonDropdown, CardMeta, DividerWayFinder, FlexibleMediaGalleryNewLightbox, NavBreadcrumb, ResponsiveImage, RichText, SectionScreeningDetails, SectionTeaserCard, SectionWrapper } from 'ucla-library-website-components'
+import { BlockEventDetail, BlockInfo, BlockTag, ButtonDropdown, CardMeta, DividerWayFinder, FlexibleMediaGalleryNewLightbox, NavBreadcrumb, ResponsiveImage, RichText, SectionScreeningDetails, SectionTeaserCard, SectionWrapper, TwoColLayoutWStickySideBar } from 'ucla-library-website-components'
 
 // HELPERS
 import _get from 'lodash/get'
@@ -53,8 +53,6 @@ const parsedCarouselData = computed(() => {
     return {
       item: [{ ...rawItem.image[0], kind: 'image' }], // Carousels on this page are always images, no videos
       credit: rawItem?.creditText,
-      // captionTitle: 'dfdsfs', // TODO do we need these? test without
-      // captionText: 'dfsdfsd',
     }
   })
 })
@@ -153,77 +151,69 @@ const parsedFTVAEventScreeningDetails = computed(() => {
       </div>
     </div>
 
-    <div
+    <TwoColLayoutWStickySideBar
       data-test="second-column"
       class="two-column"
     >
-      <div class="primary-column top">
-        <SectionWrapper>
-          <CardMeta
-            data-test="text-block"
-            :category="series[0]?.title"
-            :title="page?.title"
-            :guest-speaker="page?.guestSpeaker"
-            :tag-labels="page?.tagLabels"
-            :introduction="page?.introduction"
-          />
-          <RichText
-            v-if="page?.eventDescription"
-            data-test="event-description"
-            class="eventDescription"
-            :rich-text-content="page?.eventDescription"
-          />
-
-          <RichText
-            v-if="page?.acknowledements"
-            data-test="acknowledgements"
-            class="acknowledgements"
-            :rich-text-content="page?.acknowledements"
-          />
-        </SectionWrapper>
-      </div>
-
-      <!-- sidebar slots in here on mobile -->
-      <!-- on desktop sidebar is stickied to the side with css -->
-      <div class="sidebar-column">
-        <div class="sidebar-content-wrapper">
-          <BlockEventDetail
-            data-test="event-details"
-            :start-date="page?.startDateWithTime"
-            :time="page?.startDateWithTime"
-            :locations="page?.location"
-          />
-          <ButtonDropdown
-            data-test="calendar-dropdown"
-            :title="parsedCalendarData?.title"
-            :event-description="parsedCalendarData?.eventDescription"
-            :start-date-with-time="parsedCalendarData?.startDateWithTime"
-            :location="parsedCalendarData?.location"
-            :is-event="true"
-            :debug-mode-enabled="false"
-          />
-          <BlockInfo
-            v-if="page?.ftvaTicketInformation && page?.ftvaTicketInformation.length > 0"
-            data-test="ticket-info"
-            :ftva-ticket-information="page?.ftvaTicketInformation"
-          />
-        </div>
-      </div>
-
-      <div class="primary-column bottom">
-        <SectionWrapper>
-          <DividerWayFinder />
-        </SectionWrapper>
-
-        <SectionWrapper>
-          <SectionScreeningDetails
-            v-if="parsedFTVAEventScreeningDetails"
-            data-test="screening-details"
-            :items="parsedFTVAEventScreeningDetails"
-          />
-        </SectionWrapper>
-      </div>
-    </div>
+      <template #primaryTop>
+        <CardMeta
+          data-test="text-block"
+          :category="series[0]?.title"
+          :title="page?.title"
+        />
+      </template>
+      <template #sidebarTop>
+        <BlockEventDetail
+          data-test="event-details"
+          :start-date="page?.startDateWithTime"
+          :time="page?.startDateWithTime"
+          :locations="page?.location"
+        />
+        <ButtonDropdown
+          data-test="calendar-dropdown"
+          :title="parsedCalendarData?.title"
+          :event-description="parsedCalendarData?.eventDescription"
+          :start-date-with-time="parsedCalendarData?.startDateWithTime"
+          :location="parsedCalendarData?.location"
+          :is-event="true"
+          :debug-mode-enabled="false"
+        />
+      </template>
+      <template #primaryMid>
+        <CardMeta
+          :guest-speaker="page?.guestSpeaker"
+          :tag-labels="page?.tagLabels"
+          :introduction="page?.introduction"
+        />
+        <RichText
+          v-if="page?.eventDescription"
+          data-test="event-description"
+          class="eventDescription"
+          :rich-text-content="page?.eventDescription"
+        />
+        <RichText
+          v-if="page?.acknowledements"
+          data-test="acknowledgements"
+          class="acknowledgements"
+          :rich-text-content="page?.acknowledements"
+        />
+      </template>
+      <template #sidebarBottom>
+        <BlockInfo
+          v-if="page?.ftvaTicketInformation && page?.ftvaTicketInformation.length > 0"
+          data-test="ticket-info"
+          :ftva-ticket-information="page?.ftvaTicketInformation"
+        />
+      </template>
+      <template #primaryBottom>
+        <DividerWayFinder />
+        <SectionScreeningDetails
+          v-if="parsedFTVAEventScreeningDetails"
+          data-test="screening-details"
+          :items="parsedFTVAEventScreeningDetails"
+        />
+      </template>
+    </TwoColLayoutWStickySideBar>
 
     <SectionWrapper
       v-if="parsedFtvaEventSeries && parsedFtvaEventSeries.length > 0"
@@ -267,25 +257,6 @@ const parsedFTVAEventScreeningDetails = computed(() => {
   }
 
   .two-column {
-    position: relative;
-    width: 100%;
-    max-width: var(--max-width);
-    display: flex;
-    flex-direction: row;
-    flex-wrap: wrap;
-
-    .primary-column {
-      margin-bottom: 0px;
-      width: 67%;
-
-      .section-wrapper {
-        padding-left: 0px;
-      }
-
-      &.bottom {
-        margin-top: -30px;
-      }
-    }
 
     .ftva.button-dropdown {
       margin-top: 30px;
@@ -300,25 +271,6 @@ const parsedFTVAEventScreeningDetails = computed(() => {
     :deep(figure.responsive-video:not(:has(.video-embed))) {
       display: none;
     }
-
-    // move these styles to a component so they can be reused & kept in sync
-    // with /series/[slug].vue
-    .sidebar-column {
-      min-width: 314px;
-      width: 30%;
-      position: absolute;
-      height: 100%;
-      top: 0;
-      right: 0;
-      padding-top: var(--space-2xl);
-      padding-bottom: 40px;
-
-      .sidebar-content-wrapper {
-        position: sticky;
-        top: 85px;
-        will-change: top;
-      }
-    }
   }
 
   /* makes all EventSeries same height */
@@ -328,55 +280,25 @@ const parsedFTVAEventScreeningDetails = computed(() => {
 
   @media (max-width: 1200px) {
 
-    .one-column,
-    .two-column {
+    // .two-column
+    .one-column {
       padding-left: var(--unit-gutter);
       padding-right: var(--unit-gutter);
     }
 
-    .sidebar-column {
-      padding-right: var(--unit-gutter);
-    }
-
-    .two-column>.primary-column {
-      width: 62%;
+    :deep(.primary-column) {
+      width: 65%;
     }
   }
 
   @media #{$small} {
-    .two-column {
-      display: grid;
-      grid-template-columns: 1fr;
-
-      .primary-column {
-        width: auto;
-        grid-column: 1;
-
-        .section-wrapper {
-          padding-left: var(--unit-gutter);
-        }
-
-        &.bottom {
-          margin-top: auto;
-        }
-      }
-
-      .sidebar-column {
-        width: auto;
-        position: relative;
-        grid-column: 1;
-        margin: auto var(--unit-gutter);
-        padding-top: 0px;
-        height: auto; // let content determine height on mobile
-      }
+    :deep(.primary-column) {
+      width: inherit;
     }
-  }
-}
 
-// TEMPORARY STYLES THAT SHOULD BE PART OF SECTIONWRAPPER
-.series-section-wrapper {
-  :deep(.section-header) {
-    margin-bottom: 28px;
+    :deep(.block-tags) {
+      padding-top: 30px;
+    }
   }
 }
 </style>