diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
index 1ed207fc9..2a8071035 100644
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -59,7 +59,7 @@ jobs:
         run: |
           echo "ES_INDEX=${{secrets.ES_INDEX_TEST}}-deploy-preview" >> $GITHUB_ENV
         if: github.ref_name!='nuxt3.x'
-      - name: Sets env vars for main merge
+      - name: Sets env vars for nuxt3.x merge
         run: |
           echo "ES_INDEX=${{secrets.ES_INDEX_TEST}}" >> $GITHUB_ENV
         if: github.ref_name=='nuxt3.x'
diff --git a/gql/queries/Homepage.gql b/gql/queries/Homepage.gql
index 09cdd2ee0..88266f341 100644
--- a/gql/queries/Homepage.gql
+++ b/gql/queries/Homepage.gql
@@ -1,4 +1,4 @@
-#import "~/gql/fragments/Image"
+#import "../gql/fragments/Image.gql"
 
 query Homepage {
     entry(section: "homepage") {
diff --git a/layouts/default.vue b/layouts/default.vue
index 55d71e0d5..f26a0bed9 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -45,18 +45,18 @@ const classes = computed(() => [
   <div :class="classes">
     <!-- VueSkipTo to="#main" label="Skip to main content" / -->
     <!-- this is not working in static build -->
-    <!-- header-smart / -->
+    <header-smart />
 
-    <!-- section-wrapper class="section-alert" theme="divider" -->
-    <site-notification-alert v-if="libraryAlert" class="library-alert" v-bind="libraryAlert" />
-    <!-- /section-wrapper -->
+    <section-wrapper class="section-alert" theme="divider">
+      <site-notification-alert v-if="libraryAlert" class="library-alert" v-bind="libraryAlert" />
+    </section-wrapper>
 
     <slot />
 
-    <!-- footer>
-            <footer-primary :form="true" />
-            <footer-sock />
-        </footer -->
+    <footer>
+      <footer-primary :form="true" />
+      <footer-sock />
+    </footer>
     <div id="libchat_5a44dfe7cc29aaee5bba635ab13fa753" />
   </div>
 </template>
diff --git a/layouts/impact.vue b/layouts/impact.vue
index 563d9d12a..7dc6e1b0b 100644
--- a/layouts/impact.vue
+++ b/layouts/impact.vue
@@ -1,7 +1,8 @@
 <script setup>
 // MOCK DATA
+import * as MOCK_API from '~/data/mock-api.json'
 
-/* const footerPrimaryItems = [...MOCK_API.shortLinks]
+const footerPrimaryItems = [...MOCK_API.shortLinks]
 const parsedItems = computed(() => {
   // Restructuring item to support text key
   return footerPrimaryItems.map((obj) => {
@@ -20,13 +21,14 @@ const parsedPressItems = computed(() => {
       text: obj.name,
     }
   })
-}) */
+})
+const globalStore = useGlobalStore()
 
 const classes = computed(() => [
   'layout',
   'layout-default',
-  { 'has-scrolled': sTop.value },
-  { 'has-scrolled-past-header': sTop.value >= 150 }
+  { 'has-scrolled': globalStore.sTop },
+  { 'has-scrolled-past-header': globalStore.sTop >= 150 }
 ])
 
 useHead({
@@ -36,32 +38,31 @@ useHead({
 
 <template>
   <div :class="classes">
-    <!-- nav-primary class="primary" / -->
-    <main>
-      <slot />
-    </main>
+    <nav-primary class="primary" />
+
+    <slot />
 
-    <!-- footer-primary :social-items="parsedItems" :press-items="parsedPressItems" :form="false" / -->
+    <footer-primary :social-items="parsedItems" :press-items="parsedPressItems" :form="false" />
   </div>
 </template>
 
 <style lang="scss" scoped>
 .layout-default {
-    min-height: 100vh;
+  min-height: 100vh;
 
-    display: flex;
-    flex-direction: column;
-    flex-wrap: nowrap;
-    justify-content: space-between;
-    align-content: center;
-    align-items: center;
+  display: flex;
+  flex-direction: column;
+  flex-wrap: nowrap;
+  justify-content: space-between;
+  align-content: center;
+  align-items: center;
 
-    > * {
-        width: 100%;
-    }
+  >* {
+    width: 100%;
+  }
 
-    .page {
-        flex: 1 1 auto;
-    }
+  .page {
+    flex: 1 1 auto;
+  }
 }
 </style>
diff --git a/nuxt.config.ts b/nuxt.config.ts
index 090894d2a..6041ee1c6 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -87,7 +87,7 @@ export default defineNuxtConfig({
   ],
 
   imports: {
-    dirs: ['stores', 'gql'],
+    dirs: ['stores'],
   },
 
   apollo: {
diff --git a/package.json b/package.json
index 7755843e0..eba4c71dc 100644
--- a/package.json
+++ b/package.json
@@ -28,6 +28,7 @@
         "nuxt": "^v3.7.3",
         "sass": "^1.66.1",
         "ucla-library-design-tokens": "^5.5.0",
-        "ucla-library-website-components": "2.39.0-alpha.10"
+        "ucla-library-website-components": "2.39.0-alpha.15",
+        "lodash": "^4.17.21"
     }
 }
\ No newline at end of file
diff --git a/pages/components.vue b/pages/components.vue
index 201e30bfd..ed762a423 100644
--- a/pages/components.vue
+++ b/pages/components.vue
@@ -25,10 +25,100 @@ const propsForMediaWithText = {
 }
 const itemVideo = MEDIA.VideoFile
 const coverImage = MEDIA.VideoFileCoverImage
+const mockStaff = {
+  subjectArea: 'African American Studies',
+  nameFirst: 'Ariane',
+  nameLast: 'Bicho',
+  to: '/about/staff/ariane-bicho',
+  staffName: 'Ariane Bicho 娘の洋子より',
+  image: null,
+
+  jobTitle: 'Director of Communications and Marketing',
+  departments: [
+    {
+      id: '7272',
+      title: 'Communications',
+    },
+    {
+      id: '7373',
+      title: 'Marketing',
+    },
+  ],
+  alternativeName: [
+    {
+      fullName: '娘の洋子より',
+      languageAltName: 'zh',
+    },
+  ],
+  uri: 'about/staff/ariane-bicho',
+  phone: '(222) 444-5555',
+  email: 'abicho@library.ucla.edu',
+  consultation: 'https://calendar.library.ucla.edu/appointments/aogarcia',
+  academicDepartments: [
+    {
+      id: '11947',
+      title: 'African American Studies',
+    },
+    {
+      id: '11955',
+      title: 'Cluster 60: America in Sixties: Politics, Society, and Culture, 1954 to 1974',
+    },
+  ],
+  locations: [
+    {
+      title: 'DIIT',
+      to: 'location/bar',
+    },
+  ],
+}
+
+const mockStaff2 = {
+  title: 'Humanities and Social Sciences Librarian',
+  alternativeFullName: '陳餘敏卿纪念基金',
+  language: 'zh',
+  text:
+    '<p><span>The UCLA Library seeks a highly collaborative, user-focused professional for the position of Humanities and Social Sciences Librarian. The incumbent will join a multi-location, cross disciplinary team that supports teaching and all levels of research in the humanities and social sciences. </span><span>Note: Two positions are being filled.</span><br /></p>',
+  jobType: [
+    {
+      title: 'Academic Librarian',
+    },
+  ],
+  jobRequisitionNumber: 'JPF08053',
+  jobPostingURL: 'https://recruit.apo.ucla.edu/JPF08053',
+  department: [
+    {
+      title: 'User Engagement',
+    },
+    {
+      title: 'Human Resources',
+    },
+  ],
+  associatedLocations: [
+    {
+      title: 'UCLA Film & Television Archive',
+      uri: 'visit/locations/film-television-archive',
+    },
+    {
+      title: 'Powell Library',
+      uri: 'visit/locations/powell-library',
+    },
+  ],
+}
+const amenities = [
+  'icon-clock',
+  'icon-accessible',
+  'icon-chair',
+  'icon-virtual',
+  'icon-laptop',
+  'icon-locker',
+  'icon-light',
+  'icon-share-printer',
+  'icon-book',
+]
 </script>
 
 <template>
-  <div>
+  <div class="components">
     <hr>
     <h2>DividerGeneral Component</h2>
     <DividerGeneral />
@@ -126,7 +216,35 @@ const coverImage = MEDIA.VideoFileCoverImage
     <BlockCallToActionTwoUp :items="mockItemsBlockCallToActionTwoUp" />
     <hr>
     <br>
+    <br>
+    <h2>BlockStaffSubjectLibrarian Component</h2>
+    <table>
+      <tbody>
+        <BlockStaffSubjectLibrarian v-bind="mockStaff" />
+      </tbody>
+    </table>
+    <br>
+    <hr>
+    <br>
+    <h2>BlockGenericList Component</h2>
+    <ul>
+      <BlockGenericList v-bind="mockStaff2" />
+    </ul>
+    <br>
+    <hr>
+    <br>
+    <block-amenities :amenities="amenities" />
+    <br>
+    <br>
   </div>
 </template>
 
-<style scoped></style>
+<style scoped>
+div.components,
+ul,
+li,
+div,
+table {
+  margin: 20px;
+}
+</style>
diff --git a/pages/impact/[year]/index.vue b/pages/impact/[year]/index.vue
new file mode 100644
index 000000000..491e9f1ae
--- /dev/null
+++ b/pages/impact/[year]/index.vue
@@ -0,0 +1,317 @@
+<script setup>
+definePageMeta({
+  layout: 'impact'
+})
+</script>
+
+<template lang="html">
+  <main id="main" class="page page-impact-report">
+    <!-- This is template for impact reports -->
+    <div class="meta">
+      Hello impact report
+      <!-- h1 class="intro" v-html="page.title" />
+            <responsive-image v-if="page.portrait && page.portrait.length > 0" :image="page.portrait[0]" :aspect-ratio="60"
+                class="portrait-Ginny"
+                alt="Sketch of Ginny Steel wearing glasses and a grey blazer, with a yellow background" />
+
+            <rich-text class="text" v-html="page.text" / -->
+    </div>
+    <section-wrapper theme="divider">
+      <divider-way-finder class="divider" color="about" />
+    </section-wrapper>
+    <h2 class="visually-hidden">
+      Main Story
+    </h2>
+    <!-- banner-featured v-if="page.keyArt && page.keyArt.length != 0" class="section-banner"
+            :image="page.keyArt[0].heroImage[0]" :ratio="40" :title="page.keyArt[0].titleGeneral"
+            :description="page.keyArt[0].summary" :prompt="page.keyArt[0].buttonText" :to="page.keyArt[0].buttonUrl"
+            :align-right="false" />
+
+        <flexible-blocks v-if="page.blocks" class="flexible-content" :blocks="page.blocks" / -->
+
+    <section-wrapper theme="divider">
+      <divider-way-finder class="divider" color="about" />
+    </section-wrapper>
+
+    <!-- section-wrapper :section-title="page.timelineTitle">
+            <div v-for="(value, propertyName) in timelineSortedBySubtitle" :key="propertyName" class="sub-section-grid">
+                <h3 class="grid-gallery-subtitle" v-html="propertyName" />
+
+                <grid-gallery v-for="(subValue, propertySubName) in value" :key="propertySubName"
+                    :section-summary="propertySubName" :items="subValue" />
+            </div>
+        </section-wrapper -->
+    <section-wrapper theme="divider">
+      <divider-way-finder class="divider" color="about" />
+    </section-wrapper>
+    <!-- section-wrapper v-if="page.acknowledgements && page.acknowledgements.length == 1">
+            <h2 :class="page.acknowledgements[0].displaySectionTitle === 'true'
+                ? ''
+                : 'visually-hidden'
+                ">
+                {{ page.acknowledgements[0].titleGeneral }}
+            </h2>
+            <rich-text class="credits" v-html="page.acknowledgements[0].acknowledgements" />
+        </section-wrapper -->
+  </main>
+</template>
+
+<style lang="scss" scoped>
+.page-impact-report {
+    .meta {
+        padding: 0 var(--unit-gutter);
+        margin: var(--space-xl) auto 0 auto;
+        max-width: $container-xl-banner + px;
+
+        .intro {
+            @include step-5;
+            margin-bottom: var(--space-xl);
+            color: var(--color-primary-blue-03);
+        }
+
+        .rich-text {
+            margin: 0;
+            padding-right: 0;
+            margin-right: 0;
+            max-width: $container-xl-banner + px;
+        }
+
+        .text {
+            @include step-3;
+            line-height: 120%;
+
+            ::v-deep p {
+                @include step-3;
+            }
+        }
+    }
+
+    .portrait-Ginny {
+        width: 100%;
+        max-width: 50%;
+        margin-left: 24px;
+        float: right;
+
+        ::v-deep .media {
+            object-fit: cover;
+        }
+    }
+
+    .section-banner {
+        margin: 0 auto;
+        max-width: $container-xl-banner + px;
+
+        ::v-deep {
+            --banner-color-theme: var(--color-help-green-03);
+
+            // refactor when option to turn off overlays is available in craft
+            .gradient,
+            .molecule,
+            &.hatch-left .hatch {
+                display: none;
+            }
+        }
+    }
+
+    ::v-deep .block-highlight .text {
+        display: initial;
+    }
+
+    h2 {
+        @include step-3;
+        color: var(--color-primary-blue-03);
+        margin-bottom: var(--space-xl);
+    }
+
+    ::v-deep .grid-gallery {
+        padding: 0;
+    }
+
+    /* .banner {
+        margin: var(--space-3xl) auto;
+    }*/
+
+    /* .section-grid {
+        max-width: $container-l-main + px;
+
+        display: flex;
+        flex-direction: column;
+        justify-content: left;
+
+        margin: 0 auto;
+        .title {
+            color: var(--color-primary-blue-03);
+            font-size: 48px;
+            line-height: 56px;
+            margin-bottom: var(--space-xl);
+            @include step-3;
+        }
+        .sub-section-grid {
+            margin: 12px auto;
+            position: relative;
+        }
+        .grid-gallery-subtitle {
+            color: var(--color-primary-blue-03);
+            font-size: 35.538px;
+            line-height: 43px;
+            @include step-2;
+            position: sticky;
+            top: 0;
+            background-color: var(--color-white);
+            padding-top: 8px;
+            z-index: 30;
+            min-height: 46px;
+        }
+        .divider-section {
+            max-width: $container-l-main + px;
+            margin: var(--space-3xl) 0;
+        }
+    }*/
+    .sub-section-grid {
+        margin: 12px auto;
+        position: relative;
+    }
+
+    .grid-gallery-subtitle {
+        color: var(--color-primary-blue-03);
+        font-size: 35.538px;
+        line-height: 43px;
+        @include step-2;
+        position: sticky;
+        top: 0;
+        background-color: var(--color-white);
+        padding-top: 8px;
+        z-index: 30;
+        min-height: 46px;
+    }
+
+    .teaser-card {
+        margin: 0 auto;
+    }
+
+    .credits {
+        max-width: $container-l-main + px;
+        font-style: italic;
+        line-height: 26px;
+
+        ::v-deep p,
+        ::v-deep a {
+            font-family: var(--font-secondary);
+            font-size: var(--step--1);
+            color: var(--color-secondary-grey-04);
+
+            strong {
+                font-weight: 600;
+            }
+        }
+    }
+
+    /* .credit-list {
+        display: inline;
+    }*/
+    .divider {
+        max-width: $container-l-main + px;
+        margin: var(--space-3xl) auto;
+    }
+
+    .divider-general {
+        margin-top: var(--space-3xl);
+        margin-bottom: var(--space-3xl);
+        max-width: $container-l-main + px;
+    }
+
+    /* .credits dt,
+    dd {
+        display: inline;
+        font-family: var(--font-secondary);
+        line-height: 26px;
+    }
+    .credits dd,
+    .credits dl {
+        margin: 0;
+        color: var(--color-secondary-grey-04);
+    }
+    dt {
+        font-weight: 600;
+        padding-left: 2px;
+    }
+    .credit-header {
+        display: inline;
+        color: var(--color-primary-blue-03);
+        font-weight: 700;
+        font-size: 18px;
+        padding-right: 5px;
+    }
+    .illustrator a {
+        text-decoration: underline;
+        text-decoration-color: var(--color-default-cyan-03);
+        text-decoration-thickness: 2px;
+        text-underline-offset: 1px;
+    }*/
+    // Hover states
+    @media #{$has-hover} {
+        /* .illustrator:hover {
+            color: var(--color-primary-blue-03);
+            @include link-hover;
+        }*/
+    }
+
+    @media #{$medium} {
+        .meta {
+            padding: 0 $whitespace-m-sides + px;
+            margin-top: 24px;
+
+            .portrait-Ginny {
+                float: none;
+                max-width: 100%;
+                margin: 32px auto;
+            }
+        }
+
+        .divider-general {
+            width: calc(100% - (var(--unit-gutter) * 2));
+        }
+
+        ::v-deep .grid-gallery {
+            padding: unset;
+
+            .section-summary {
+                top: 36px;
+            }
+        }
+    }
+
+    @media #{$small} {
+        .meta {
+            padding: 0 $whitespace-s-sides + px;
+
+            .portrait-Ginny {
+                width: 100%;
+            }
+        }
+
+        .banner-featured.hatch-left {
+            ::v-deep .meta {
+                padding-left: var(--unit-gutter);
+                padding-right: var(--unit-gutter);
+            }
+        }
+
+        .grid-gallery-subtitle {
+            height: 80px;
+        }
+    }
+
+    @media (min-width: 400px) {
+        .grid-gallery-subtitle {
+            height: 60px;
+        }
+    }
+
+    @media (min-width: 860px) {
+        .grid-gallery-subtitle {
+            height: 40px;
+        }
+    }
+}
+</style>
diff --git a/pages/index.vue b/pages/index.vue
index 5d267e0b7..c355856ef 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -1,7 +1,315 @@
-<script setup></script>
+<script setup>
+// HELPERS
+import _get from 'lodash/get'
+
+// GQL
+import HOMEPAGE from '../gql/queries/Homepage.gql'
+
+const { data } = await useAsyncQuery(HOMEPAGE)
+
+const page = ref(_get(data.value, 'entry', {}))
+
+const parsedAdvancedSearchLink = computed(() => {
+  // Last item in searchLinks
+  const advancedLink = page.value.searchLinks.slice(-1)[0]
+  return advancedLink
+})
+const parsedSearchLinks = computed(() => {
+  // Remove last item in searchLinks
+  const searchLinks = [...page.value.searchLinks].slice(0, -1)
+  return searchLinks
+})
+
+const parsedGetHelpWith = computed(() => {
+  return page.value.getHelpWith[0].getHelpWith.map((obj) => {
+    return {
+      ...obj,
+      to: obj.externalResourceUrl
+        ? obj.externalResourceUrl
+        : `/${obj.uri}`,
+    }
+  })
+})
+const bannerFeaturedEvent = computed(() => {
+  const bannerFeaturedEvent = page.value.featuredEvents[0]
+  return {
+    ...bannerFeaturedEvent,
+    to: `/${bannerFeaturedEvent.uri}`,
+    title:
+      bannerFeaturedEvent.sectionHandle
+        === 'workshopOrEventSeries'
+        ? bannerFeaturedEvent.title
+        : bannerFeaturedEvent.eventTitle,
+    prompt:
+      bannerFeaturedEvent.sectionHandle
+        === 'workshopOrEventSeries'
+        ? 'View series'
+        : `View ${bannerFeaturedEvent.sectionHandle}`,
+    image: _get(bannerFeaturedEvent, 'heroImage[0].image[0]', null),
+    startDate:
+      bannerFeaturedEvent.sectionHandle === 'event'
+        ? _get(bannerFeaturedEvent, 'startDateWithTime', null)
+        : _get(bannerFeaturedEvent, 'startDate', null),
+    endDate:
+      bannerFeaturedEvent.sectionHandle === 'event'
+        ? _get(bannerFeaturedEvent, 'endDateWithTime', null)
+        : _get(bannerFeaturedEvent, 'endDate', null),
+    category: _get(bannerFeaturedEvent, 'category[0].title', ''),
+    description:
+      bannerFeaturedEvent.sectionHandle === 'event'
+        ? _get(bannerFeaturedEvent, 'eventDescription', '')
+        : _get(bannerFeaturedEvent, 'summary', ''),
+    locations:
+      bannerFeaturedEvent.associatedLocations[0] != null
+        ? bannerFeaturedEvent.associatedLocations
+        : bannerFeaturedEvent.eventLocation,
+  }
+})
+// TO DO need to update dates on component
+const parsedDualMasonryEvents = computed(() => {
+  const masonaryEvents = page.value.featuredEvents.slice(1, 3)
+  return masonaryEvents.map((obj) => {
+    return {
+      ...obj,
+      to: `/${obj.uri}`,
+      title:
+        obj.sectionHandle === 'workshopOrEventSeries'
+          ? obj.title
+          : obj.eventTitle,
+      image: _get(obj, 'heroImage[0].image[0]', null),
+      startDate:
+        obj.sectionHandle === 'event'
+          ? _get(obj, 'startDateWithTime', null)
+          : _get(obj, 'startDate', null),
+      endDate:
+        obj.sectionHandle === 'event'
+          ? _get(obj, 'endDateWithTime', null)
+          : _get(obj, 'endDate', null),
+      category: 'Featured',
+      prompt:
+        obj.sectionHandle === 'workshopOrEventSeries'
+          ? 'View series'
+          : `View ${obj.sectionHandle}`,
+    }
+  })
+})
+const bannerFeaturedCollection = computed(() => {
+  const bannerFeaturedCollection = page.value.featuredCollections[0]
+  return {
+    ...bannerFeaturedCollection,
+    to: `/${bannerFeaturedCollection.uri}`,
+    image: _get(
+      bannerFeaturedCollection,
+      'heroImage[0].image[0]',
+      null
+    ),
+    category: bannerFeaturedCollection.category
+      ? bannerFeaturedCollection.category.toString()
+      : '',
+    description: _get(bannerFeaturedCollection, 'text', ''),
+    prompt: `View ${bannerFeaturedCollection.sectionHandle}`,
+  }
+})
+const parsedSectionHighlightCollection = computed(() => {
+  const highlightCollections = page.value.featuredCollections.slice(1)
+  return highlightCollections.map((obj) => {
+    return {
+      ...obj,
+      to: `/${obj.uri}`,
+      image: _get(obj, 'heroImage[0].image[0]', ''),
+      category: obj.category ? obj.category.toString() : '',
+    }
+  })
+})
+
+function parseArticleCategory(categories) {
+  if (!categories || categories.length === 0)
+    return ''
+  let result = ''
+  categories.forEach((obj) => {
+    result = `${result + obj.title}, `
+  })
+  return result.slice(0, -2)
+}
+const bannerFeaturedNews = computed(() => {
+  const bannerFeaturedNews = page.value.featuredNews[0]
+  return {
+    ...bannerFeaturedNews,
+    to:
+      bannerFeaturedNews.externalResourceUrl != null
+        ? _get(bannerFeaturedNews, 'externalResourceUrl', '')
+        : `/${bannerFeaturedNews.to}`,
+    image: _get(bannerFeaturedNews, 'heroImage[0].image[0]', null),
+    // startDate: _get(bannerFeaturedNews, "postDate", null),
+    category: parseArticleCategory(
+      bannerFeaturedNews.articleCategories
+    ),
+    description: _get(bannerFeaturedNews, 'text', ''),
+    startDate: _get(bannerFeaturedNews, 'postDate', ''),
+    endDate: _get(bannerFeaturedNews, 'postDate', ''),
+    prompt: `View ${bannerFeaturedNews.sectionHandle}`,
+  }
+})
+const parsedNewsList = computed(() => {
+  const newsList = page.value.featuredNews.slice(1)
+  return newsList.map((obj) => {
+    return {
+      ...obj,
+      to:
+        obj.externalResourceUrl != null
+          ? _get(obj, 'externalResourceUrl', '')
+          : `/${obj.to}`,
+      image: _get(obj, 'heroImage[0].image[0]', ''),
+      category: parseArticleCategory(obj.articleCategories),
+      startDate: _get(obj, 'postDate', ''),
+      endDate: _get(obj, 'postDate', ''),
+    }
+  })
+})
+
+useHead({
+  title: page.value?.title || '... loading',
+  meta: [
+    {
+      hid: 'description',
+      name: 'description',
+      content: 'The UCLA Library creates a vibrant nexus of ideas, collections, expertise, and spaces in which users illuminate solutions for local and global challenges. We constantly evolve to advance UCLA’s research, education, and public service mission by empowering and inspiring communities of scholars and learners to discover, access, create, share, and preserve knowledge.',
+    },
+  ],
+})
+</script>
 
 <template>
-  <main>
-    <h1>Welcome this is library home page!</h1>
+  <main id="main" class="page page-home">
+    <masthead-primary :link-items="parsedSearchLinks" :advanced-search-link="parsedAdvancedSearchLink" />
+
+    <!-- TODO elastic search testing -->
+    <!-- h4>Mapping:</h4>
+        <p>{{ mapping }}</p>
+        <h4>Search Responsee</h4>
+        <p>{{ searchResponse }}</p -->
+
+    <section-wrapper theme="divider">
+      <divider-way-finder class="search-margin" color="help" />
+    </section-wrapper>
+
+    <section-wrapper class="section-no-top-margin">
+      {{ page.getHelpWith[0].titleGeneral }}
+      <br>
+      {{ page.getHelpWith[0].sectionSummary }}
+      <br>
+      {{ parsedGetHelpWith }}
+      <!-- section-cards-with-illustrations
+                class="section"
+                :items="parsedGetHelpWith"
+                :section-title="page.getHelpWith[0].titleGeneral"
+                :section-summary="page.getHelpWith[0].sectionSummary"
+                button-text="See All Services &amp; Resources"
+                to="/help/services-resources"
+                :is-horizontal="false"
+            / -->
+    </section-wrapper>
+
+    <section-wrapper theme="divider">
+      <divider-way-finder color="visit" />
+    </section-wrapper>
+
+    <section-wrapper class="section-banner">
+      {{ bannerFeaturedEvent }}
+      <!-- banner-featured
+                :image="bannerFeaturedEvent.image"
+                :to="bannerFeaturedEvent.to"
+                :prompt="bannerFeaturedEvent.prompt"
+                :title="bannerFeaturedEvent.title"
+                :start-date="bannerFeaturedEvent.startDate"
+                :end-date="bannerFeaturedEvent.endDate"
+                :locations="bannerFeaturedEvent.associatedLocations"
+                :align-right="false"
+                :category="bannerFeaturedEvent.category"
+            >
+                <heading-arrow text="Featured Events &amp; Exhibitions" />
+            </banner-featured -->
+    </section-wrapper>
+
+    <section-wrapper class="section-dual-masonry">
+      {{ parsedDualMasonryEvents }}
+      <!-- section-dual-masonry
+                v-if="parsedDualMasonryEvents.length > 0"
+                :items="parsedDualMasonryEvents"
+                to="/visit/events-exhibitions"
+                text="See All Events &amp; Exhibitions"
+            / -->
+    </section-wrapper>
+
+    <section-wrapper theme="divider">
+      <divider-way-finder color="default" />
+    </section-wrapper>
+
+    <section-wrapper class="section-banner">
+      {{ bannerFeaturedCollection }}
+      <!-- banner-featured
+                :image="bannerFeaturedCollection.image"
+                :to="bannerFeaturedCollection.to"
+                :title="bannerFeaturedCollection.title"
+                :description="bannerFeaturedCollection.description"
+                :category="bannerFeaturedCollection.category"
+                :prompt="bannerFeaturedCollection.prompt"
+                :align-right="true"
+            >
+                <heading-arrow text="Featured Collections" />
+            </banner-featured -->
+    </section-wrapper>
+
+    <section-wrapper>
+      {{ parsedSectionHighlightCollection }}
+      <br>
+      <!-- section-teaser-highlight
+                v-if="parsedSectionHighlightCollection.length > 1"
+                :items="parsedSectionHighlightCollection"
+            / -->
+      <nuxt-link to="/collections/explore" class="button-more">
+        <button-more text="See All Featured Collections" />
+      </nuxt-link>
+    </section-wrapper>
+
+    <section-wrapper theme="divider">
+      <divider-way-finder color="about" />
+    </section-wrapper>
+
+    <section-wrapper class="section-banner">
+      {{ bannerFeaturedNews }}
+      <!-- banner-featured
+                :image="bannerFeaturedNews.image"
+                :to="bannerFeaturedNews.to"
+                :prompt="bannerFeaturedNews.prompt"
+                :title="bannerFeaturedNews.title"
+                :description="bannerFeaturedNews.description"
+                :category="bannerFeaturedNews.category"
+                :start-date="bannerFeaturedNews.startDate"
+                :end-date="bannerFeaturedNews.endDate"
+                :align-right="false"
+            >
+                <heading-arrow text="Featured News" />
+            </banner-featured -->
+    </section-wrapper>
+
+    <section-wrapper>
+      {{ parsedNewsList }}
+      <!-- section-teaser-card
+                v-if="parsedNewsList.length > 1"
+                :items="parsedNewsList"
+            / -->
+      <nuxt-link to="/about/news" class="button-more">
+        <button-more text="See All News" />
+      </nuxt-link>
+    </section-wrapper>
   </main>
 </template>
+
+<style lang="scss" scoped>
+.page-home {
+  .button-more {
+    margin: var(--space-2xl) auto;
+  }
+}
+</style>
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index ac6eaf5f6..be606d210 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -40,6 +40,9 @@ devDependencies:
   eslint-plugin-cypress:
     specifier: ^2.15.1
     version: 2.15.1(eslint@8.49.0)
+  lodash:
+    specifier: ^4.17.21
+    version: 4.17.21
   nuxt:
     specifier: ^v3.7.3
     version: 3.7.3(@types/node@18.17.3)(eslint@8.49.0)(sass@1.66.1)(typescript@5.2.2)
@@ -50,8 +53,8 @@ devDependencies:
     specifier: ^5.5.0
     version: 5.5.0
   ucla-library-website-components:
-    specifier: 2.39.0-alpha.10
-    version: 2.39.0-alpha.10(typescript@5.2.2)(vue-router@4.2.5)(vue@3.3.4)
+    specifier: 2.39.0-alpha.15
+    version: 2.39.0-alpha.15(typescript@5.2.2)(vue-router@4.2.5)(vue@3.3.4)
 
 packages:
 
@@ -479,6 +482,13 @@ packages:
       '@babel/plugin-syntax-typescript': 7.22.5(@babel/core@7.22.20)
     dev: true
 
+  /@babel/runtime@7.23.2:
+    resolution: {integrity: sha512-mM8eg4yl5D6i3lu2QKPuPH4FArvJ8KhTofbE7jwMUv9KX5mBvwPAqnV3MlyBNqdp9RyRKP6Yck8TrfYrPvX3bg==}
+    engines: {node: '>=6.9.0'}
+    dependencies:
+      regenerator-runtime: 0.14.0
+    dev: true
+
   /@babel/standalone@7.22.20:
     resolution: {integrity: sha512-1W+v64N5c4yEQH1WZDGTzChpxfJ23QjmeH6qPT8CSqLV1kwKkpajMSK/xpD2aQkvy+Hfw4WaMMOhSMQtMC+PNw==}
     engines: {node: '>=6.9.0'}
@@ -3557,6 +3567,13 @@ packages:
     engines: {node: '>= 12'}
     dev: true
 
+  /date-fns@2.30.0:
+    resolution: {integrity: sha512-fnULvOpxnC5/Vg3NCiWelDsLiUc9bRwAPs/+LfTLNvetFCtCTN+yQz15C/fs4AwX1R9K5GLtLfn8QW+dWisaAw==}
+    engines: {node: '>=0.11'}
+    dependencies:
+      '@babel/runtime': 7.23.2
+    dev: true
+
   /dayjs@1.11.10:
     resolution: {integrity: sha512-vjAczensTgRcqDERK0SR2XMwsF/tSvnvlv6VcF2GIhg6Sx4yOIt/irsr1RDJsKiIyBzJDpCoXiWWq28MqH2cnQ==}
     dev: true
@@ -7304,6 +7321,10 @@ packages:
       redis-errors: 1.2.0
     dev: true
 
+  /regenerator-runtime@0.14.0:
+    resolution: {integrity: sha512-srw17NI0TUWHuGa5CFGGmhfNIeja30WMBfbslPNhf6JrqQlLN5gcrvig1oqPxiVaXb0oW0XRKtH6Nngs5lKCIA==}
+    dev: true
+
   /regexp-tree@0.1.27:
     resolution: {integrity: sha512-iETxpjK6YoRWJG5o6hXLwvjYAoW+FEZn9os0PD/b6AP6xQwsa/Y7lCVgIixBbUPMfhu+i2LtdeAqVTgGlQarfA==}
     hasBin: true
@@ -8107,12 +8128,13 @@ packages:
     resolution: {integrity: sha512-Y2qRlOdTbtU03S+/0gRQn/h2SypxP0QEPxkqLKDDVgDePR9tepf7iOCkWWUwfvcRtyEWtQirsC20e13kKAbBLg==}
     dev: true
 
-  /ucla-library-website-components@2.39.0-alpha.10(typescript@5.2.2)(vue-router@4.2.5)(vue@3.3.4):
-    resolution: {integrity: sha512-KcAKuVPePPV4CqJXTb0M+Q5HOj1CdI6f6mh9J0pGzxPf5Y8yC7282wtuJKiKmCw1dRjM7vV9WR0pZjm/MqbF/A==}
+  /ucla-library-website-components@2.39.0-alpha.15(typescript@5.2.2)(vue-router@4.2.5)(vue@3.3.4):
+    resolution: {integrity: sha512-tQ36OI4Ld88RI+Ep+HtjHgWdSNUUbq1gD898tvNSPoJ2Uu17OIpCTh8WInRyAran0Jf6ATcoOfhI+6OWfmsefA==}
     peerDependencies:
       vue: ^3.3.4
       vue-router: ^4.2.4
     dependencies:
+      date-fns: 2.30.0
       lodash: 4.17.21
       pinia: 2.1.6(typescript@5.2.2)(vue@3.3.4)
       vue: 3.3.4