diff --git a/CHANGELOG.mdx b/CHANGELOG.mdx
index b0fe45c7e..cbc0348b0 100644
--- a/CHANGELOG.mdx
+++ b/CHANGELOG.mdx
@@ -41,8 +41,12 @@ Prefix the change with one of these keywords:
 - Icon: restricted to only black, red, white and light grey
 - Icon Cards: restricted to red icons, removed shadow and bg colors
 - Icon Cards: fixed width and height for icons inside container
-- Pagination: active text changed to red
+- Listings: removed button color options in footer subcomponent, restricted to red
+- Listings: updated card styles
 - Nav: space between logo and site title
+- Pagination: active text changed to red
+- Stacked List: removed border option
+- Stacked List: updated max width query sizes when offset used
 - Text and Image: header always has underline
 - Wide Image: opacity range set at 60-80
 
@@ -53,6 +57,7 @@ Prefix the change with one of these keywords:
 
 ### Fixed
 
+- Stacked List: bottom border on odd / even items
 - Pagination: accessibility error relating to role="presentation"
 
 ## [0.9.6]
diff --git a/lib/components/Card/CardPeopleMeta.tsx b/lib/components/Card/CardPeopleMeta.tsx
index d8ec5785f..3696cace2 100644
--- a/lib/components/Card/CardPeopleMeta.tsx
+++ b/lib/components/Card/CardPeopleMeta.tsx
@@ -10,7 +10,7 @@ export const CardPeopleMeta = ({ jobTitle, children, phone }: CardPeopleMetaProp
       {jobTitle && <li className="text-base @sm:md:text-lg italic">{jobTitle}</li>}
       {children && (
         <li>
-          <strong className="font-semibold break-all text-cyan-700 hover:text-cu-red-700">{children}</strong>
+          <strong className="font-semibold break-all hover:text-cyan-700 text-cu-red-700">{children}</strong>
         </li>
       )}
       {phone && <li>{phone}</li>}
diff --git a/lib/components/Listing/Listing.tsx b/lib/components/Listing/Listing.tsx
index b5d4f1d1e..5e53ebacd 100644
--- a/lib/components/Listing/Listing.tsx
+++ b/lib/components/Listing/Listing.tsx
@@ -1,6 +1,4 @@
 import React from 'react'
-import { ChevronRightIcon } from '@heroicons/react/24/outline'
-
 import { ListingFigure } from './ListingFigure'
 import { ListingBody } from './ListingBody'
 import { ListingHeader } from './ListingHeader'
@@ -14,26 +12,12 @@ import { ListingFooter } from './ListingFooter'
 
 export interface ListingProps {
   children: React.ReactNode
-  useArrow?: boolean
 }
 
-export const ListingWrapper = ({ children, useArrow }: ListingProps) => {
-  const arrowStyles = useArrow ? 'pr-14' : ''
-
+export const ListingWrapper = ({ children }: ListingProps) => {
   return (
-    <li className={`cu-listing not-prose relative overflow-hidden @container bg-white p-6 ${arrowStyles}`}>
-      <div className="flex flex-col @lg:md:flex-row gap-5 @lg:md:gap-7 h-full">
-        {children}
-
-        {useArrow && (
-          <div className="absolute -mt-3 top-1/2 right-4">
-            <ChevronRightIcon
-              className="flex-none w-6 h-6 ml-auto text-cu-black-300 group-hover:text-cu-red"
-              aria-hidden="true"
-            />
-          </div>
-        )}
-      </div>
+    <li className={`cu-listing not-prose relative overflow-hidden @container bg-white p-6 md:p-8`}>
+      <div className="flex flex-col @lg:md:flex-row gap-5 @lg:md:gap-7 h-full">{children}</div>
     </li>
   )
 }
diff --git a/lib/components/Listing/ListingEventMeta.tsx b/lib/components/Listing/ListingEventMeta.tsx
index 76508faee..a02058ccb 100644
--- a/lib/components/Listing/ListingEventMeta.tsx
+++ b/lib/components/Listing/ListingEventMeta.tsx
@@ -10,7 +10,7 @@ export interface ListingEventMetaProps {
   eventAddress?: string
 }
 
-export const styles = {
+const styles = {
   redIcon: `mr-2 h-6 w-6 flex-shrink-0 text-cu-red-300`,
 }
 
diff --git a/lib/components/Listing/ListingExcerpt.tsx b/lib/components/Listing/ListingExcerpt.tsx
index f193915c8..fff55b7a6 100644
--- a/lib/components/Listing/ListingExcerpt.tsx
+++ b/lib/components/Listing/ListingExcerpt.tsx
@@ -6,7 +6,7 @@ export interface ListingExcerptProps {
 export const ListingExcerpt = ({ text, hasMore }: ListingExcerptProps) => {
   return (
     <p className="text-base text-cu-black-700">
-      {text.length > 170 ? `${text.substring(0, 170)}...` : text}
+      {text.length > 200 ? `${text.substring(0, 200)}...` : text}
       {hasMore && <span className="font-semibold"> More</span>}
     </p>
   )
diff --git a/lib/components/Listing/ListingFooter.tsx b/lib/components/Listing/ListingFooter.tsx
index d2d2d2f22..0417da39a 100644
--- a/lib/components/Listing/ListingFooter.tsx
+++ b/lib/components/Listing/ListingFooter.tsx
@@ -1,20 +1,9 @@
 export interface ListingFooterProps {
   children: React.ReactNode
-  isType?: 'button' | 'badge'
-  buttonType?: 'solid' | 'outline'
-  buttonStyle?: 'red' | 'white' | 'dark-grey' | 'grey'
 }
 
-export const ListingFooter = ({ children, isType, buttonType = 'solid', buttonStyle = 'red' }: ListingFooterProps) => {
-  const buttonClass = isType === 'button' ? `cu-card-button` : ''
-  const buttonTypeClass = isType === 'button' && buttonType ? `cu-card-button-${buttonType}` : 'cu-card-button-solid'
-  const buttonStyleClass = isType === 'button' && buttonStyle ? `cu-card-button-${buttonStyle}` : 'cu-card-button-red'
-
-  return (
-    <footer className={`mt-auto text-white pt-5 ${buttonClass} ${buttonStyleClass} ${buttonTypeClass}`}>
-      {children}
-    </footer>
-  )
+export const ListingFooter = ({ children }: ListingFooterProps) => {
+  return <footer className="pt-5 mt-auto text-white">{children}</footer>
 }
 
 ListingFooter.displayName = 'Listing.Footer'
diff --git a/lib/components/Listing/ListingIconThumb.tsx b/lib/components/Listing/ListingIconThumb.tsx
index e0c2d20b0..9a3c71359 100644
--- a/lib/components/Listing/ListingIconThumb.tsx
+++ b/lib/components/Listing/ListingIconThumb.tsx
@@ -1,52 +1,23 @@
 export interface ListingIconThumbProps {
   icon?: string
-  bgType?: 'none' | 'red' | 'white'
-  hasShadow?: boolean
 }
 
-export const ListingIconThumb = ({ icon, bgType = 'red', hasShadow }: ListingIconThumbProps) => {
+export const ListingIconThumb = ({ icon }: ListingIconThumbProps) => {
   const cdnPath = 'https://cdn.carleton.ca/rds/assets/font-awesome/'
   const iconPath = `${cdnPath}${icon}.svg`
-  const iconShadow = hasShadow ? 'shadow-md' : ''
-
-  // Set classes on icon and wrapping div
-  let iconDiv
-
-  switch (bgType) {
-    case 'none':
-      iconDiv = 'w-10 h-10'
-      break
-    case 'red':
-      iconDiv = 'w-16 h-16 bg-cu-red rounded-md'
-      break
-    case 'white':
-      iconDiv = 'w-16 h-16 bg-white rounded-md'
-      break
-    default:
-      iconDiv = ''
-      break
-  }
-
-  // Use filter to change svg as image to white
-  const whiteIcon = {
-    filter: 'invert(100%) sepia(5%) saturate(0%) hue-rotate(29deg) brightness(106%) contrast(107%)',
-  }
+  const iconAlt = icon ? icon.replace(/-/g, ' ') : ''
 
-  // Use filter to change svg as image to red
   const redIcon = {
     filter: 'invert(20%) sepia(50%) saturate(7177%) hue-rotate(348deg) brightness(91%) contrast(100%)',
   }
 
-  // Remove dashes from icon name
-  const iconAlt = icon ? icon.replace(/-/g, ' ') : ''
-
   return (
-    <figure className={`flex items-center justify-center ${iconDiv} ${iconShadow}`}>
+    <figure className="flex items-center justify-center w-12 h-12">
       <img
         src={iconPath}
         alt={`An icon of a ${iconAlt}`}
-        className={`cu-icon-thumb ${bgType === 'none' ? '' : 'p-3'}`}
-        style={bgType === 'red' ? whiteIcon : redIcon}
+        className="object-cover max-h-full cu-icon-thumb max-w-none"
+        style={redIcon}
       />
     </figure>
   )
diff --git a/lib/components/Listing/ListingPeopleMeta.tsx b/lib/components/Listing/ListingPeopleMeta.tsx
index bb87b194e..1859af956 100644
--- a/lib/components/Listing/ListingPeopleMeta.tsx
+++ b/lib/components/Listing/ListingPeopleMeta.tsx
@@ -10,7 +10,7 @@ export const ListingPeopleMeta = ({ jobTitle, children, phone }: ListingPeopleMe
       {jobTitle && <li className="text-base @sm:md:text-lg italic">{jobTitle}</li>}
       {children && (
         <li>
-          <strong className="font-semibold break-all hover:cursor-pointer text-cyan-700 hover:text-cu-red-700">
+          <strong className="font-semibold break-all hover:cursor-pointer hover:text-cyan-700 text-cu-red-700">
             {children}
           </strong>
         </li>
diff --git a/lib/examples/blocks/EventListing.stories.tsx b/lib/examples/blocks/EventListing.stories.tsx
deleted file mode 100644
index 8a86db452..000000000
--- a/lib/examples/blocks/EventListing.stories.tsx
+++ /dev/null
@@ -1,285 +0,0 @@
-import React from 'react'
-import type { Meta, StoryObj } from '@storybook/react'
-import { Section } from '../../layouts/Section/Section'
-import { Container } from '../../layouts/Container/Container'
-import { Main } from '../../layouts/Main/Main'
-import { FooterStandard } from '../../components/Footer/FooterStandard/FooterStandard'
-import { StackedList } from '../../layouts/StackedList/StackedList'
-import { Nav } from '../../components/Nav/Nav'
-import { PageHeaders } from '../../components/PageHeaders/PageHeaders'
-import { Listing } from '../../components/Listing/Listing'
-import { TextImage } from '../../components/TextImage/TextImage'
-import { EventData } from '../../data/EventData'
-import { NavDataSingle, NavAsideData } from '../../data/NavData'
-
-const meta: Meta = {
-  title: 'Examples/Blocks',
-}
-
-export default meta
-type Story = StoryObj
-
-export const EventListing: Story = {
-  render: () => (
-    <>
-      <Nav>
-        <Nav.Primary>
-          <Nav.Logo title="Web Services" link="https://carleton.ca/webservices" />
-          <Nav.Menu menu={NavDataSingle} />
-          <Nav.Aside menu={NavAsideData} />
-        </Nav.Primary>
-      </Nav>
-
-      <Main>
-        <Section hasProse>
-          <TextImage hasBorder>
-            <TextImage.Content headerType="h1" title="Event Listing">
-              <p>
-                Nobis voluptatem dolorum et eum doloremque cupiditate velit. Praesentium architecto a distinctio aut
-                reprehenderit ducimus. Perferendis excepturi delectus nihil voluptatem non. Molestiae quas dolores
-                accusamus in. Praesent quis ligula quis nulla malesuada tempor.
-              </p>
-            </TextImage.Content>
-          </TextImage>
-
-          <Container>
-            <PageHeaders header="Event Listings: Default" />
-            <StackedList hasShadow>
-              {EventData.slice(0, 4).map(
-                ({
-                  id,
-                  title,
-                  link,
-                  startDate,
-                  endDate,
-                  on_campus,
-                  on_campus_building,
-                  on_campus_room_number,
-                  event_address,
-                }) => (
-                  <Listing key={id}>
-                    <Listing.DateThumb startDate={startDate} endDate={endDate} />
-                    <Listing.Body>
-                      <Listing.Header>{title}</Listing.Header>
-                      <Listing.EventMeta
-                        startDateTime={startDate}
-                        endDateTime={endDate}
-                        onCampus={on_campus}
-                        onCampusBuilding={on_campus_building}
-                        onCampusRoomNumber={on_campus_room_number}
-                        eventAddress={event_address}
-                      />
-                      <Listing.Footer isType="button">
-                        <a href={link}>Event details</a>
-                      </Listing.Footer>
-                    </Listing.Body>
-                  </Listing>
-                ),
-              )}
-            </StackedList>
-          </Container>
-
-          <Container>
-            <PageHeaders header="Event Listings: One Column" />
-            <StackedList cols="1" hasShadow>
-              {EventData.slice(0, 4).map(
-                ({
-                  id,
-                  title,
-                  link,
-                  startDate,
-                  endDate,
-                  on_campus,
-                  on_campus_building,
-                  on_campus_room_number,
-                  event_address,
-                }) => (
-                  <Listing key={id}>
-                    <Listing.DateThumb startDate={startDate} endDate={endDate} />
-                    <Listing.Body>
-                      <Listing.Header>{title}</Listing.Header>
-                      <Listing.EventMeta
-                        startDateTime={startDate}
-                        endDateTime={endDate}
-                        onCampus={on_campus}
-                        onCampusBuilding={on_campus_building}
-                        onCampusRoomNumber={on_campus_room_number}
-                        eventAddress={event_address}
-                      />
-                      <Listing.Footer isType="button">
-                        <a href={link}>Event details</a>
-                      </Listing.Footer>
-                    </Listing.Body>
-                  </Listing>
-                ),
-              )}
-            </StackedList>
-          </Container>
-
-          <Container isGrey>
-            <PageHeaders header="Event Listings: Default with Grey Bg" />
-            <StackedList hasShadow>
-              {EventData.slice(0, 4).map(
-                ({
-                  id,
-                  title,
-                  link,
-                  startDate,
-                  endDate,
-                  on_campus,
-                  on_campus_building,
-                  on_campus_room_number,
-                  event_address,
-                }) => (
-                  <Listing key={id}>
-                    <Listing.DateThumb startDate={startDate} endDate={endDate} />
-                    <Listing.Body>
-                      <Listing.Header>{title}</Listing.Header>
-                      <Listing.EventMeta
-                        startDateTime={startDate}
-                        endDateTime={endDate}
-                        onCampus={on_campus}
-                        onCampusBuilding={on_campus_building}
-                        onCampusRoomNumber={on_campus_room_number}
-                        eventAddress={event_address}
-                      />
-                      <Listing.Footer isType="button">
-                        <a href={link}>Event details</a>
-                      </Listing.Footer>
-                    </Listing.Body>
-                  </Listing>
-                ),
-              )}
-            </StackedList>
-          </Container>
-
-          <Container isGrey>
-            <PageHeaders header="Event Listings: One Column with Grey Bg" />
-            <StackedList cols="1" hasShadow>
-              {EventData.slice(0, 4).map(
-                ({
-                  id,
-                  title,
-                  link,
-                  startDate,
-                  endDate,
-                  on_campus,
-                  on_campus_building,
-                  on_campus_room_number,
-                  event_address,
-                }) => (
-                  <Listing key={id}>
-                    <Listing.DateThumb startDate={startDate} endDate={endDate} />
-                    <Listing.Body>
-                      <Listing.Header>{title}</Listing.Header>
-                      <Listing.EventMeta
-                        startDateTime={startDate}
-                        endDateTime={endDate}
-                        onCampus={on_campus}
-                        onCampusBuilding={on_campus_building}
-                        onCampusRoomNumber={on_campus_room_number}
-                        eventAddress={event_address}
-                      />
-                      <Listing.Footer isType="button">
-                        <a href={link}>Event details</a>
-                      </Listing.Footer>
-                    </Listing.Body>
-                  </Listing>
-                ),
-              )}
-            </StackedList>
-          </Container>
-
-          <PageHeaders header="Event Listings: Offset" />
-
-          <p>
-            Aliquam luctus, velit eget suscipit tincidunt, sem ex tempus turpis, quis pulvinar metus sapien in urna.
-            Nobis voluptatem dolorum et eum doloremque cupiditate velit. Praesentium architecto a distinctio aut
-            reprehenderit ducimus. Perferendis excepturi delectus nihil voluptatem non. Molestiae quas dolores accusamus
-            in. Praesent quis ligula quis nulla malesuada tempor. Etiam quis interdum nisi, et malesuada lectus. Aliquam
-            luctus, velit eget suscipit tincidunt, sem ex tempus turpis, quis pulvinar metus sapien in urna.
-          </p>
-
-          <StackedList header="Recent Event" as="ul" cols="1" listType="posts" offset="right" hasShadow>
-            {EventData.slice(0, 3).map(
-              ({
-                id,
-                title,
-                link,
-                startDate,
-                endDate,
-                on_campus,
-                on_campus_building,
-                on_campus_room_number,
-                event_address,
-              }) => (
-                <Listing key={id}>
-                  <Listing.DateThumb startDate={startDate} endDate={endDate} />
-                  <Listing.Body>
-                    <Listing.Header>{title}</Listing.Header>
-                    <Listing.EventMeta
-                      startDateTime={startDate}
-                      endDateTime={endDate}
-                      onCampus={on_campus}
-                      onCampusBuilding={on_campus_building}
-                      onCampusRoomNumber={on_campus_room_number}
-                      eventAddress={event_address}
-                    />
-                    <Listing.Footer isType="button">
-                      <a href={link}>Event details</a>
-                    </Listing.Footer>
-                  </Listing.Body>
-                </Listing>
-              ),
-            )}
-          </StackedList>
-
-          <p>
-            Nobis voluptatem dolorum et eum doloremque cupiditate velit. Praesentium architecto a distinctio aut
-            reprehenderit ducimus. Perferendis excepturi delectus nihil voluptatem non. Molestiae quas dolores accusamus
-            in. Praesent quis ligula quis nulla malesuada tempor.
-          </p>
-          <p>
-            Aliquam luctus, velit eget suscipit tincidunt, sem ex tempus turpis, quis pulvinar metus sapien in urna.
-            Nobis voluptatem dolorum et eum doloremque cupiditate velit. Praesentium architecto a distinctio aut
-            reprehenderit ducimus. Perferendis excepturi delectus nihil voluptatem non. Molestiae quas dolores accusamus
-            in. Praesent quis ligula quis nulla malesuada tempor. Etiam quis interdum nisi, et malesuada lectus. Aliquam
-            luctus, velit eget suscipit tincidunt, sem ex tempus turpis, quis pulvinar metus sapien in urna.
-          </p>
-          <p>
-            Nobis voluptatem dolorum et eum doloremque cupiditate velit. Praesentium architecto a distinctio aut
-            reprehenderit ducimus. Perferendis excepturi delectus nihil voluptatem non. Molestiae quas dolores accusamus
-            in. Praesent quis ligula quis nulla malesuada tempor.
-          </p>
-          <p>
-            Aliquam luctus, velit eget suscipit tincidunt, sem ex tempus turpis, quis pulvinar metus sapien in urna.
-            Nobis voluptatem dolorum et eum doloremque cupiditate velit. Praesentium architecto a distinctio aut
-            reprehenderit ducimus. Perferendis excepturi delectus nihil voluptatem non. Molestiae quas dolores accusamus
-            in. Praesent quis ligula quis nulla malesuada tempor. Etiam quis interdum nisi, et malesuada lectus. Aliquam
-            luctus, velit eget suscipit tincidunt, sem ex tempus turpis, quis pulvinar metus sapien in urna.
-          </p>
-          <p>
-            Nobis voluptatem dolorum et eum doloremque cupiditate velit. Praesentium architecto a distinctio aut
-            reprehenderit ducimus. Perferendis excepturi delectus nihil voluptatem non. Molestiae quas dolores accusamus
-            in. Praesent quis ligula quis nulla malesuada tempor.
-          </p>
-          <p>
-            Aliquam luctus, velit eget suscipit tincidunt, sem ex tempus turpis, quis pulvinar metus sapien in urna.
-            Nobis voluptatem dolorum et eum doloremque cupiditate velit. Praesentium architecto a distinctio aut
-            reprehenderit ducimus. Perferendis excepturi delectus nihil voluptatem non. Molestiae quas dolores accusamus
-            in. Praesent quis ligula quis nulla malesuada tempor. Etiam quis interdum nisi, et malesuada lectus. Aliquam
-            luctus, velit eget suscipit tincidunt, sem ex tempus turpis, quis pulvinar metus sapien in urna.
-          </p>
-          <p>
-            Nobis voluptatem dolorum et eum doloremque cupiditate velit. Praesentium architecto a distinctio aut
-            reprehenderit ducimus. Perferendis excepturi delectus nihil voluptatem non. Molestiae quas dolores accusamus
-            in. Praesent quis ligula quis nulla malesuada tempor. Nobis voluptatem dolorum et eum doloremque cupiditate
-            velit. Praesentium architecto a distinctio aut reprehenderit ducimus.
-          </p>
-        </Section>
-      </Main>
-
-      <FooterStandard />
-    </>
-  ),
-}
diff --git a/lib/examples/blocks/Listing.stories.tsx b/lib/examples/blocks/Listing.stories.tsx
new file mode 100644
index 000000000..39d5ce79c
--- /dev/null
+++ b/lib/examples/blocks/Listing.stories.tsx
@@ -0,0 +1,477 @@
+import React from 'react'
+import type { Meta, StoryObj } from '@storybook/react'
+import { Section } from '../../layouts/Section/Section'
+import { Container } from '../../layouts/Container/Container'
+import { Main } from '../../layouts/Main/Main'
+import { FooterStandard } from '../../components/Footer/FooterStandard/FooterStandard'
+import { StackedList } from '../../layouts/StackedList/StackedList'
+import { Nav } from '../../components/Nav/Nav'
+import { PageHeaders } from '../../components/PageHeaders/PageHeaders'
+import { Listing } from '../../components/Listing/Listing'
+import { TextImage } from '../../components/TextImage/TextImage'
+import { EventData } from '../../data/EventData'
+import { IconData } from '../../data/IconData'
+import { NewsData } from '../../data/NewsData'
+import { PeopleData } from '../../data/PeopleData'
+import { NavDataSingle, NavAsideData } from '../../data/NavData'
+
+const meta: Meta = {
+  title: 'Examples/Blocks',
+}
+
+export default meta
+type Story = StoryObj
+
+export const Listings: Story = {
+  render: () => (
+    <>
+      <Nav>
+        <Nav.Primary>
+          <Nav.Logo title="Web Services" link="https://carleton.ca/webservices" />
+          <Nav.Menu menu={NavDataSingle} />
+          <Nav.Aside menu={NavAsideData} />
+        </Nav.Primary>
+      </Nav>
+
+      <Main>
+        <Section hasProse>
+          <TextImage hasBorder>
+            <TextImage.Content headerType="h1" title="Listing Examples">
+              <p>
+                Nobis voluptatem dolorum et eum doloremque cupiditate velit. Praesentium architecto a distinctio aut
+                reprehenderit ducimus. Perferendis excepturi delectus nihil voluptatem non. Molestiae quas dolores
+                accusamus in. Praesent quis ligula quis nulla malesuada tempor.
+              </p>
+            </TextImage.Content>
+          </TextImage>
+
+          <Container>
+            <PageHeaders header="Event Listing: Two Columns" as="h2" size="md" />
+            <StackedList>
+              {EventData.slice(0, 4).map(
+                ({
+                  id,
+                  title,
+                  link,
+                  startDate,
+                  endDate,
+                  on_campus,
+                  on_campus_building,
+                  on_campus_room_number,
+                  event_address,
+                }) => (
+                  <Listing key={id}>
+                    <Listing.DateThumb startDate={startDate} endDate={endDate} />
+                    <Listing.Body>
+                      <Listing.Header>{title}</Listing.Header>
+                      <Listing.EventMeta
+                        startDateTime={startDate}
+                        endDateTime={endDate}
+                        onCampus={on_campus}
+                        onCampusBuilding={on_campus_building}
+                        onCampusRoomNumber={on_campus_room_number}
+                        eventAddress={event_address}
+                      />
+                      <Listing.Footer>
+                        <a href={link} className="cu-button cu-button--red">
+                          Event details
+                        </a>
+                      </Listing.Footer>
+                    </Listing.Body>
+                  </Listing>
+                ),
+              )}
+            </StackedList>
+          </Container>
+
+          <Container isGrey>
+            <PageHeaders header="Event Listing: Two Columns" as="h2" size="md" />
+            <StackedList>
+              {EventData.slice(0, 4).map(
+                ({
+                  id,
+                  title,
+                  link,
+                  startDate,
+                  endDate,
+                  on_campus,
+                  on_campus_building,
+                  on_campus_room_number,
+                  event_address,
+                }) => (
+                  <Listing key={id}>
+                    <Listing.DateThumb startDate={startDate} endDate={endDate} />
+                    <Listing.Body>
+                      <Listing.Header>{title}</Listing.Header>
+                      <Listing.EventMeta
+                        startDateTime={startDate}
+                        endDateTime={endDate}
+                        onCampus={on_campus}
+                        onCampusBuilding={on_campus_building}
+                        onCampusRoomNumber={on_campus_room_number}
+                        eventAddress={event_address}
+                      />
+                      <Listing.Footer>
+                        <a href={link} className="cu-button cu-button--red">
+                          Event details
+                        </a>
+                      </Listing.Footer>
+                    </Listing.Body>
+                  </Listing>
+                ),
+              )}
+            </StackedList>
+          </Container>
+
+          <Container>
+            <PageHeaders header="Event Listing: One Column" as="h2" size="md" />
+            <StackedList cols="1">
+              {EventData.slice(0, 3).map(
+                ({
+                  id,
+                  title,
+                  link,
+                  startDate,
+                  endDate,
+                  on_campus,
+                  on_campus_building,
+                  on_campus_room_number,
+                  event_address,
+                }) => (
+                  <Listing key={id}>
+                    <Listing.DateThumb startDate={startDate} endDate={endDate} />
+                    <Listing.Body>
+                      <Listing.Header>{title}</Listing.Header>
+                      <Listing.EventMeta
+                        startDateTime={startDate}
+                        endDateTime={endDate}
+                        onCampus={on_campus}
+                        onCampusBuilding={on_campus_building}
+                        onCampusRoomNumber={on_campus_room_number}
+                        eventAddress={event_address}
+                      />
+                      <Listing.Footer>
+                        <a href={link} className="cu-button cu-button--red">
+                          Event details
+                        </a>
+                      </Listing.Footer>
+                    </Listing.Body>
+                  </Listing>
+                ),
+              )}
+            </StackedList>
+          </Container>
+
+          <Container isGrey>
+            <PageHeaders header="Event Listing: One Column" as="h2" size="md" />
+            <StackedList cols="1">
+              {EventData.slice(0, 3).map(
+                ({
+                  id,
+                  title,
+                  link,
+                  startDate,
+                  endDate,
+                  on_campus,
+                  on_campus_building,
+                  on_campus_room_number,
+                  event_address,
+                }) => (
+                  <Listing key={id}>
+                    <Listing.DateThumb startDate={startDate} endDate={endDate} />
+                    <Listing.Body>
+                      <Listing.Header>{title}</Listing.Header>
+                      <Listing.EventMeta
+                        startDateTime={startDate}
+                        endDateTime={endDate}
+                        onCampus={on_campus}
+                        onCampusBuilding={on_campus_building}
+                        onCampusRoomNumber={on_campus_room_number}
+                        eventAddress={event_address}
+                      />
+                      <Listing.Footer>
+                        <a href={link} className="cu-button cu-button--red">
+                          Event details
+                        </a>
+                      </Listing.Footer>
+                    </Listing.Body>
+                  </Listing>
+                ),
+              )}
+            </StackedList>
+          </Container>
+
+          <Container>
+            <PageHeaders header="Icon Listing: Two Columns" as="h2" size="md" />
+            <StackedList>
+              {IconData.slice(0, 3).map(({ id, link, title, icon }) => (
+                <Listing key={id}>
+                  <Listing.IconThumb icon={icon} />
+                  <Listing.Body>
+                    <Listing.Header>{title}</Listing.Header>
+                    <Listing.Excerpt text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut pharetra laoreet lobortis. In hac habitasse platea dictumst." />
+
+                    <Listing.Footer>
+                      <a href={link} className="cu-button cu-button--red">
+                        Get Informed
+                      </a>
+                    </Listing.Footer>
+                  </Listing.Body>
+                </Listing>
+              ))}
+            </StackedList>
+          </Container>
+
+          <Container isGrey>
+            <PageHeaders header="Icon Listing: Two Columns" as="h2" size="md" />
+            <StackedList>
+              {IconData.slice(0, 3).map(({ id, link, title, icon }) => (
+                <Listing key={id}>
+                  <Listing.IconThumb icon={icon} />
+                  <Listing.Body>
+                    <Listing.Header>{title}</Listing.Header>
+                    <Listing.Excerpt text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut pharetra laoreet lobortis. In hac habitasse platea dictumst." />
+
+                    <Listing.Footer>
+                      <a href={link} className="cu-button cu-button--red">
+                        Get Informed
+                      </a>
+                    </Listing.Footer>
+                  </Listing.Body>
+                </Listing>
+              ))}
+            </StackedList>
+          </Container>
+
+          <Container>
+            <PageHeaders header="Icon Listing: One Columns" as="h2" size="md" />
+            <StackedList cols="1">
+              {IconData.slice(0, 3).map(({ id, link, title, icon }) => (
+                <Listing key={id}>
+                  <Listing.IconThumb icon={icon} />
+                  <Listing.Body>
+                    <Listing.Header>{title}</Listing.Header>
+                    <Listing.Excerpt text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut pharetra laoreet lobortis. In hac habitasse platea dictumst." />
+
+                    <Listing.Footer>
+                      <a href={link} className="cu-button cu-button--red">
+                        Get Informed
+                      </a>
+                    </Listing.Footer>
+                  </Listing.Body>
+                </Listing>
+              ))}
+            </StackedList>
+          </Container>
+
+          <Container isGrey>
+            <PageHeaders header="Icon Listing: One Columns" as="h2" size="md" />
+            <StackedList cols="1">
+              {IconData.slice(0, 3).map(({ id, link, title, icon }) => (
+                <Listing key={id}>
+                  <Listing.IconThumb icon={icon} />
+                  <Listing.Body>
+                    <Listing.Header>{title}</Listing.Header>
+                    <Listing.Excerpt text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut pharetra laoreet lobortis. In hac habitasse platea dictumst." />
+
+                    <Listing.Footer>
+                      <a href={link} className="cu-button cu-button--red">
+                        Get Informed
+                      </a>
+                    </Listing.Footer>
+                  </Listing.Body>
+                </Listing>
+              ))}
+            </StackedList>
+          </Container>
+
+          <Container>
+            <PageHeaders header="News Listing: Two Columns" as="h2" size="md" />
+            <StackedList>
+              {NewsData.slice(0, 4).map(({ id, title, link, excerpt, date, image, alt }) => (
+                <Listing key={id}>
+                  <Listing.Figure>
+                    <img src={image} alt={alt} width="400" height="266" />
+                  </Listing.Figure>
+                  <Listing.Body>
+                    <Listing.Header date={date}>{title}</Listing.Header>
+                    <Listing.Excerpt text={excerpt} />
+                    <Listing.Footer>
+                      <a href={link} className="cu-button cu-button--red">
+                        Read more
+                      </a>
+                    </Listing.Footer>
+                  </Listing.Body>
+                </Listing>
+              ))}
+            </StackedList>
+          </Container>
+
+          <Container isGrey>
+            <PageHeaders header="News Listing: Two Columns" as="h2" size="md" />
+            <StackedList>
+              {NewsData.slice(0, 4).map(({ id, title, link, excerpt, date, image, alt }) => (
+                <Listing key={id}>
+                  <Listing.Figure>
+                    <img src={image} alt={alt} width="400" height="266" />
+                  </Listing.Figure>
+                  <Listing.Body>
+                    <Listing.Header date={date}>{title}</Listing.Header>
+                    <Listing.Excerpt text={excerpt} />
+                    <Listing.Footer>
+                      <a href={link} className="cu-button cu-button--red">
+                        Read more
+                      </a>
+                    </Listing.Footer>
+                  </Listing.Body>
+                </Listing>
+              ))}
+            </StackedList>
+          </Container>
+
+          <Container>
+            <PageHeaders header="News Listing: One Column" as="h2" size="md" />
+            <StackedList cols="1">
+              {NewsData.slice(0, 4).map(({ id, title, link, excerpt, date, image, alt }) => (
+                <Listing key={id}>
+                  <Listing.Figure>
+                    <img src={image} alt={alt} width="400" height="266" />
+                  </Listing.Figure>
+                  <Listing.Body>
+                    <Listing.Header date={date}>{title}</Listing.Header>
+                    <Listing.Excerpt text={excerpt} />
+                    <Listing.Footer>
+                      <a href={link} className="cu-button cu-button--red">
+                        Read more
+                      </a>
+                    </Listing.Footer>
+                  </Listing.Body>
+                </Listing>
+              ))}
+            </StackedList>
+          </Container>
+
+          <Container isGrey>
+            <PageHeaders header="News Listing: One Column" as="h2" size="md" />
+            <StackedList cols="1">
+              {NewsData.slice(0, 4).map(({ id, title, link, excerpt, date, image, alt }) => (
+                <Listing key={id}>
+                  <Listing.Figure>
+                    <img src={image} alt={alt} width="400" height="266" />
+                  </Listing.Figure>
+                  <Listing.Body>
+                    <Listing.Header date={date}>{title}</Listing.Header>
+                    <Listing.Excerpt text={excerpt} />
+                    <Listing.Footer>
+                      <a href={link} className="cu-button cu-button--red">
+                        Read more
+                      </a>
+                    </Listing.Footer>
+                  </Listing.Body>
+                </Listing>
+              ))}
+            </StackedList>
+          </Container>
+
+          <Container>
+            <PageHeaders header="People Listing: Two Columns" as="h2" size="md" />
+            <StackedList>
+              {PeopleData.slice(0, 4).map(({ id, link, image, alt, firstName, lastName, jobTitle, email, phone }) => (
+                <Listing key={id}>
+                  <Listing.Figure isSquare>
+                    <img src={image} alt={alt} width="200" height="200" />
+                  </Listing.Figure>
+                  <Listing.Body>
+                    <Listing.Header>{`${firstName} ${lastName}`}</Listing.Header>
+                    <Listing.PeopleMeta jobTitle={jobTitle} phone={phone}>
+                      <a href={`mailto:${email}`}>{email}</a>
+                    </Listing.PeopleMeta>
+                    <Listing.Footer>
+                      <a href={link} className="cu-button cu-button--red">
+                        View profile
+                      </a>
+                    </Listing.Footer>
+                  </Listing.Body>
+                </Listing>
+              ))}
+            </StackedList>
+          </Container>
+
+          <Container isGrey>
+            <PageHeaders header="People Listing: Two Columns" as="h2" size="md" />
+            <StackedList>
+              {PeopleData.slice(0, 4).map(({ id, link, image, alt, firstName, lastName, jobTitle, email, phone }) => (
+                <Listing key={id}>
+                  <Listing.Figure isSquare>
+                    <img src={image} alt={alt} width="200" height="200" />
+                  </Listing.Figure>
+                  <Listing.Body>
+                    <Listing.Header>{`${firstName} ${lastName}`}</Listing.Header>
+                    <Listing.PeopleMeta jobTitle={jobTitle} phone={phone}>
+                      <a href={`mailto:${email}`}>{email}</a>
+                    </Listing.PeopleMeta>
+                    <Listing.Footer>
+                      <a href={link} className="cu-button cu-button--red">
+                        View profile
+                      </a>
+                    </Listing.Footer>
+                  </Listing.Body>
+                </Listing>
+              ))}
+            </StackedList>
+          </Container>
+
+          <Container>
+            <PageHeaders header="People Listing: One Column" as="h2" size="md" />
+            <StackedList cols="1">
+              {PeopleData.slice(0, 4).map(({ id, link, image, alt, firstName, lastName, jobTitle, email, phone }) => (
+                <Listing key={id}>
+                  <Listing.Figure isSquare>
+                    <img src={image} alt={alt} width="200" height="200" />
+                  </Listing.Figure>
+                  <Listing.Body>
+                    <Listing.Header>{`${firstName} ${lastName}`}</Listing.Header>
+                    <Listing.PeopleMeta jobTitle={jobTitle} phone={phone}>
+                      <a href={`mailto:${email}`}>{email}</a>
+                    </Listing.PeopleMeta>
+                    <Listing.Footer>
+                      <a href={link} className="cu-button cu-button--red">
+                        View profile
+                      </a>
+                    </Listing.Footer>
+                  </Listing.Body>
+                </Listing>
+              ))}
+            </StackedList>
+          </Container>
+
+          <Container isGrey>
+            <PageHeaders header="People Listing: One Column" as="h2" size="md" />
+            <StackedList cols="1">
+              {PeopleData.slice(0, 4).map(({ id, link, image, alt, firstName, lastName, jobTitle, email, phone }) => (
+                <Listing key={id}>
+                  <Listing.Figure isSquare>
+                    <img src={image} alt={alt} width="200" height="200" />
+                  </Listing.Figure>
+                  <Listing.Body>
+                    <Listing.Header>{`${firstName} ${lastName}`}</Listing.Header>
+                    <Listing.PeopleMeta jobTitle={jobTitle} phone={phone}>
+                      <a href={`mailto:${email}`}>{email}</a>
+                    </Listing.PeopleMeta>
+                    <Listing.Footer>
+                      <a href={link} className="cu-button cu-button--red">
+                        View profile
+                      </a>
+                    </Listing.Footer>
+                  </Listing.Body>
+                </Listing>
+              ))}
+            </StackedList>
+          </Container>
+        </Section>
+      </Main>
+
+      <FooterStandard />
+    </>
+  ),
+}
diff --git a/lib/examples/blocks/NewsListing.stories.tsx b/lib/examples/blocks/ListingSidebars.stories.tsx
similarity index 63%
rename from lib/examples/blocks/NewsListing.stories.tsx
rename to lib/examples/blocks/ListingSidebars.stories.tsx
index b9e10820f..4be2002d9 100644
--- a/lib/examples/blocks/NewsListing.stories.tsx
+++ b/lib/examples/blocks/ListingSidebars.stories.tsx
@@ -1,12 +1,10 @@
 import React from 'react'
 import type { Meta, StoryObj } from '@storybook/react'
 import { Section } from '../../layouts/Section/Section'
-import { Container } from '../../layouts/Container/Container'
 import { Main } from '../../layouts/Main/Main'
 import { FooterStandard } from '../../components/Footer/FooterStandard/FooterStandard'
 import { StackedList } from '../../layouts/StackedList/StackedList'
 import { Nav } from '../../components/Nav/Nav'
-import { PageHeaders } from '../../components/PageHeaders/PageHeaders'
 import { Listing } from '../../components/Listing/Listing'
 import { NewsData } from '../../data/NewsData'
 import { TextImage } from '../../components/TextImage/TextImage'
@@ -19,7 +17,7 @@ const meta: Meta = {
 export default meta
 type Story = StoryObj
 
-export const NewsListing: Story = {
+export const ListingSidebars: Story = {
   render: () => (
     <>
       <Nav>
@@ -42,88 +40,6 @@ export const NewsListing: Story = {
             </TextImage.Content>
           </TextImage>
 
-          <Container>
-            <PageHeaders header="News Listings: Default" />
-            <StackedList hasShadow>
-              {NewsData.slice(0, 4).map(({ id, title, link, excerpt, date, image, alt }) => (
-                <Listing key={id}>
-                  <Listing.Figure>
-                    <img src={image} alt={alt} width="400" height="266" />
-                  </Listing.Figure>
-                  <Listing.Body>
-                    <Listing.Header date={date}>{title}</Listing.Header>
-                    <Listing.Excerpt text={excerpt} />
-                    <Listing.Footer isType="button">
-                      <a href={link}>Read more</a>
-                    </Listing.Footer>
-                  </Listing.Body>
-                </Listing>
-              ))}
-            </StackedList>
-          </Container>
-
-          <Container>
-            <PageHeaders header="News Listings: One Column" />
-            <StackedList cols="1" hasShadow>
-              {NewsData.slice(0, 4).map(({ id, title, link, excerpt, date, image, alt }) => (
-                <Listing key={id}>
-                  <Listing.Figure>
-                    <img src={image} alt={alt} width="400" height="266" />
-                  </Listing.Figure>
-                  <Listing.Body>
-                    <Listing.Header date={date}>{title}</Listing.Header>
-                    <Listing.Excerpt text={excerpt} />
-                    <Listing.Footer isType="button">
-                      <a href={link}>Read more</a>
-                    </Listing.Footer>
-                  </Listing.Body>
-                </Listing>
-              ))}
-            </StackedList>
-          </Container>
-
-          <Container isGrey>
-            <PageHeaders header="News Listings: Default with Grey Bg" />
-            <StackedList hasShadow>
-              {NewsData.slice(0, 4).map(({ id, title, link, excerpt, date, image, alt }) => (
-                <Listing key={id}>
-                  <Listing.Figure>
-                    <img src={image} alt={alt} width="400" height="266" />
-                  </Listing.Figure>
-                  <Listing.Body>
-                    <Listing.Header date={date}>{title}</Listing.Header>
-                    <Listing.Excerpt text={excerpt} />
-                    <Listing.Footer isType="button">
-                      <a href={link}>Read more</a>
-                    </Listing.Footer>
-                  </Listing.Body>
-                </Listing>
-              ))}
-            </StackedList>
-          </Container>
-
-          <Container isGrey>
-            <PageHeaders header="News Listings: One Column with Grey Bg" />
-            <StackedList cols="1" hasShadow>
-              {NewsData.slice(0, 4).map(({ id, title, link, excerpt, date, image, alt }) => (
-                <Listing key={id}>
-                  <Listing.Figure>
-                    <img src={image} alt={alt} width="400" height="266" />
-                  </Listing.Figure>
-                  <Listing.Body>
-                    <Listing.Header date={date}>{title}</Listing.Header>
-                    <Listing.Excerpt text={excerpt} />
-                    <Listing.Footer isType="button">
-                      <a href={link}>Read more</a>
-                    </Listing.Footer>
-                  </Listing.Body>
-                </Listing>
-              ))}
-            </StackedList>
-          </Container>
-
-          <PageHeaders header="News Listings: Offset" />
-
           <p>
             Aliquam luctus, velit eget suscipit tincidunt, sem ex tempus turpis, quis pulvinar metus sapien in urna.
             Nobis voluptatem dolorum et eum doloremque cupiditate velit. Praesentium architecto a distinctio aut
@@ -132,7 +48,7 @@ export const NewsListing: Story = {
             luctus, velit eget suscipit tincidunt, sem ex tempus turpis, quis pulvinar metus sapien in urna.
           </p>
 
-          <StackedList header="Recent News" as="ul" cols="1" listType="posts" offset="right" hasShadow>
+          <StackedList header="Recent News" as="ul" cols="1" offset="right">
             {NewsData.slice(0, 3).map(({ id, title, link, excerpt, date, image, alt }) => (
               <Listing key={id}>
                 <Listing.Figure>
@@ -141,8 +57,10 @@ export const NewsListing: Story = {
                 <Listing.Body>
                   <Listing.Header date={date}>{title}</Listing.Header>
                   <Listing.Excerpt text={excerpt} />
-                  <Listing.Footer isType="button">
-                    <a href={link}>Read more</a>
+                  <Listing.Footer>
+                    <a href={link} className="cu-button cu-button--red">
+                      Read more
+                    </a>
                   </Listing.Footer>
                 </Listing.Body>
               </Listing>
diff --git a/lib/examples/blocks/PeopleListing.stories.tsx b/lib/examples/blocks/PeopleListing.stories.tsx
deleted file mode 100644
index 67a06994a..000000000
--- a/lib/examples/blocks/PeopleListing.stories.tsx
+++ /dev/null
@@ -1,217 +0,0 @@
-import React from 'react'
-import type { Meta, StoryObj } from '@storybook/react'
-import { Section } from '../../layouts/Section/Section'
-import { Container } from '../../layouts/Container/Container'
-import { Main } from '../../layouts/Main/Main'
-import { FooterStandard } from '../../components/Footer/FooterStandard/FooterStandard'
-import { StackedList } from '../../layouts/StackedList/StackedList'
-import { Nav } from '../../components/Nav/Nav'
-import { PageHeaders } from '../../components/PageHeaders/PageHeaders'
-import { Listing } from '../../components/Listing/Listing'
-import { TextImage } from '../../components/TextImage/TextImage'
-import { PeopleData } from '../../data/PeopleData'
-import { NavDataSingle, NavAsideData } from '../../data/NavData'
-
-const meta: Meta = {
-  title: 'Examples/Blocks',
-}
-
-export default meta
-type Story = StoryObj
-
-export const PeopleListing: Story = {
-  render: () => (
-    <>
-      <Nav>
-        <Nav.Primary>
-          <Nav.Logo title="Web Services" link="https://carleton.ca/webservices" />
-          <Nav.Menu menu={NavDataSingle} />
-          <Nav.Aside menu={NavAsideData} />
-        </Nav.Primary>
-      </Nav>
-
-      <Main>
-        <Section hasProse>
-          <TextImage hasBorder>
-            <TextImage.Content headerType="h1" title="People Listing">
-              <p>
-                Nobis voluptatem dolorum et eum doloremque cupiditate velit. Praesentium architecto a distinctio aut
-                reprehenderit ducimus. Perferendis excepturi delectus nihil voluptatem non. Molestiae quas dolores
-                accusamus in. Praesent quis ligula quis nulla malesuada tempor.
-              </p>
-            </TextImage.Content>
-          </TextImage>
-
-          <Container>
-            <PageHeaders header="People Listings: Default" />
-            <StackedList hasShadow>
-              {PeopleData.slice(0, 4).map(({ id, link, image, alt, firstName, lastName, jobTitle, email, phone }) => (
-                <Listing key={id}>
-                  <Listing.Figure isSquare>
-                    <img src={image} alt={alt} width="200" height="200" />
-                  </Listing.Figure>
-                  <Listing.Body>
-                    <Listing.Header>{`${firstName} ${lastName}`}</Listing.Header>
-                    <Listing.PeopleMeta jobTitle={jobTitle} phone={phone}>
-                      <a href={`mailto:${email}`}>{email}</a>
-                    </Listing.PeopleMeta>
-                    <Listing.Footer isType="button">
-                      <a href={link}>View profile</a>
-                    </Listing.Footer>
-                  </Listing.Body>
-                </Listing>
-              ))}
-            </StackedList>
-          </Container>
-
-          <Container>
-            <PageHeaders header="People Listings: One Column" />
-            <StackedList cols="1" hasShadow>
-              {PeopleData.slice(0, 4).map(({ id, link, image, alt, firstName, lastName, jobTitle, email, phone }) => (
-                <Listing key={id}>
-                  <Listing.Figure isSquare>
-                    <img src={image} alt={alt} width="200" height="200" />
-                  </Listing.Figure>
-                  <Listing.Body>
-                    <Listing.Header>{`${firstName} ${lastName}`}</Listing.Header>
-                    <Listing.PeopleMeta jobTitle={jobTitle} phone={phone}>
-                      <a href={`mailto:${email}`}>{email}</a>
-                    </Listing.PeopleMeta>
-                    <Listing.Footer isType="button">
-                      <a href={link}>View profile</a>
-                    </Listing.Footer>
-                  </Listing.Body>
-                </Listing>
-              ))}
-            </StackedList>
-          </Container>
-
-          <Container isGrey>
-            <PageHeaders header="People Listings: Default with Grey Bg" />
-            <StackedList hasShadow>
-              {PeopleData.slice(0, 4).map(({ id, link, image, alt, firstName, lastName, jobTitle, email, phone }) => (
-                <Listing key={id}>
-                  <Listing.Figure isSquare>
-                    <img src={image} alt={alt} width="200" height="200" />
-                  </Listing.Figure>
-                  <Listing.Body>
-                    <Listing.Header>{`${firstName} ${lastName}`}</Listing.Header>
-                    <Listing.PeopleMeta jobTitle={jobTitle} phone={phone}>
-                      <a href={`mailto:${email}`}>{email}</a>
-                    </Listing.PeopleMeta>
-                    <Listing.Footer isType="button">
-                      <a href={link}>View profile</a>
-                    </Listing.Footer>
-                  </Listing.Body>
-                </Listing>
-              ))}
-            </StackedList>
-          </Container>
-
-          <Container isGrey>
-            <PageHeaders header="People Listings: One Column with Grey Bg" />
-            <StackedList cols="1" hasShadow>
-              {PeopleData.slice(0, 4).map(({ id, link, image, alt, firstName, lastName, jobTitle, email, phone }) => (
-                <Listing key={id}>
-                  <Listing.Figure isSquare>
-                    <img src={image} alt={alt} width="200" height="200" />
-                  </Listing.Figure>
-                  <Listing.Body>
-                    <Listing.Header>{`${firstName} ${lastName}`}</Listing.Header>
-                    <Listing.PeopleMeta jobTitle={jobTitle} phone={phone}>
-                      <a href={`mailto:${email}`}>{email}</a>
-                    </Listing.PeopleMeta>
-                    <Listing.Footer isType="button">
-                      <a href={link}>View profile</a>
-                    </Listing.Footer>
-                  </Listing.Body>
-                </Listing>
-              ))}
-            </StackedList>
-          </Container>
-
-          <PageHeaders header="People Listings: Offset" />
-
-          <p>
-            Aliquam luctus, velit eget suscipit tincidunt, sem ex tempus turpis, quis pulvinar metus sapien in urna.
-            Nobis voluptatem dolorum et eum doloremque cupiditate velit. Praesentium architecto a distinctio aut
-            reprehenderit ducimus. Perferendis excepturi delectus nihil voluptatem non. Molestiae quas dolores accusamus
-            in. Praesent quis ligula quis nulla malesuada tempor. Etiam quis interdum nisi, et malesuada lectus. Aliquam
-            luctus, velit eget suscipit tincidunt, sem ex tempus turpis, quis pulvinar metus sapien in urna.
-          </p>
-
-          <StackedList header="Our People" as="ul" cols="1" listType="posts" offset="right" hasShadow>
-            {PeopleData.slice(0, 4).map(({ id, link, image, alt, firstName, lastName, jobTitle, email, phone }) => (
-              <Listing key={id}>
-                <Listing.Figure isSquare>
-                  <img src={image} alt={alt} width="200" height="200" />
-                </Listing.Figure>
-                <Listing.Body>
-                  <Listing.Header>{`${firstName} ${lastName}`}</Listing.Header>
-                  <Listing.PeopleMeta jobTitle={jobTitle} phone={phone}>
-                    <a href={`mailto:${email}`}>{email}</a>
-                  </Listing.PeopleMeta>
-                  <Listing.Footer isType="button">
-                    <a href={link}>View profile</a>
-                  </Listing.Footer>
-                </Listing.Body>
-              </Listing>
-            ))}
-          </StackedList>
-
-          <p>
-            Nobis voluptatem dolorum et eum doloremque cupiditate velit. Praesentium architecto a distinctio aut
-            reprehenderit ducimus. Perferendis excepturi delectus nihil voluptatem non. Molestiae quas dolores accusamus
-            in. Praesent quis ligula quis nulla malesuada tempor.
-          </p>
-          <p>
-            Aliquam luctus, velit eget suscipit tincidunt, sem ex tempus turpis, quis pulvinar metus sapien in urna.
-            Nobis voluptatem dolorum et eum doloremque cupiditate velit. Praesentium architecto a distinctio aut
-            reprehenderit ducimus. Perferendis excepturi delectus nihil voluptatem non. Molestiae quas dolores accusamus
-            in. Praesent quis ligula quis nulla malesuada tempor. Etiam quis interdum nisi, et malesuada lectus. Aliquam
-            luctus, velit eget suscipit tincidunt, sem ex tempus turpis, quis pulvinar metus sapien in urna.
-          </p>
-          <p>
-            Nobis voluptatem dolorum et eum doloremque cupiditate velit. Praesentium architecto a distinctio aut
-            reprehenderit ducimus. Perferendis excepturi delectus nihil voluptatem non. Molestiae quas dolores accusamus
-            in. Praesent quis ligula quis nulla malesuada tempor.
-          </p>
-          <p>
-            Aliquam luctus, velit eget suscipit tincidunt, sem ex tempus turpis, quis pulvinar metus sapien in urna.
-            Nobis voluptatem dolorum et eum doloremque cupiditate velit. Praesentium architecto a distinctio aut
-            reprehenderit ducimus. Perferendis excepturi delectus nihil voluptatem non. Molestiae quas dolores accusamus
-            in. Praesent quis ligula quis nulla malesuada tempor. Etiam quis interdum nisi, et malesuada lectus. Aliquam
-            luctus, velit eget suscipit tincidunt, sem ex tempus turpis, quis pulvinar metus sapien in urna.
-          </p>
-          <p>
-            Nobis voluptatem dolorum et eum doloremque cupiditate velit. Praesentium architecto a distinctio aut
-            reprehenderit ducimus. Perferendis excepturi delectus nihil voluptatem non. Molestiae quas dolores accusamus
-            in. Praesent quis ligula quis nulla malesuada tempor.
-          </p>
-          <p>
-            Aliquam luctus, velit eget suscipit tincidunt, sem ex tempus turpis, quis pulvinar metus sapien in urna.
-            Nobis voluptatem dolorum et eum doloremque cupiditate velit. Praesentium architecto a distinctio aut
-            reprehenderit ducimus. Perferendis excepturi delectus nihil voluptatem non. Molestiae quas dolores accusamus
-            in. Praesent quis ligula quis nulla malesuada tempor. Etiam quis interdum nisi, et malesuada lectus. Aliquam
-            luctus, velit eget suscipit tincidunt, sem ex tempus turpis, quis pulvinar metus sapien in urna.
-          </p>
-          <p>
-            Nobis voluptatem dolorum et eum doloremque cupiditate velit. Praesentium architecto a distinctio aut
-            reprehenderit ducimus. Perferendis excepturi delectus nihil voluptatem non. Molestiae quas dolores accusamus
-            in. Praesent quis ligula quis nulla malesuada tempor. Nobis voluptatem dolorum et eum doloremque cupiditate
-            velit. Praesentium architecto a distinctio aut reprehenderit ducimus.
-          </p>
-          <p>
-            Aliquam luctus, velit eget suscipit tincidunt, sem ex tempus turpis, quis pulvinar metus sapien in urna.
-            Nobis voluptatem dolorum et eum doloremque cupiditate velit. Praesentium architecto a distinctio aut
-            reprehenderit ducimus. Perferendis excepturi delectus nihil voluptatem non. Molestiae quas dolores accusamus
-            in. Praesent quis ligula quis nulla malesuada tempor. Etiam quis interdum nisi, et malesuada lectus. Aliquam
-            luctus, velit eget suscipit tincidunt, sem ex tempus turpis, quis pulvinar metus sapien in urna.
-          </p>
-        </Section>
-      </Main>
-
-      <FooterStandard />
-    </>
-  ),
-}
diff --git a/lib/layouts/StackedList/StackedList.styles.tsx b/lib/layouts/StackedList/StackedList.styles.tsx
deleted file mode 100644
index 93d31546b..000000000
--- a/lib/layouts/StackedList/StackedList.styles.tsx
+++ /dev/null
@@ -1,13 +0,0 @@
-export const styles = {
-  wrapper: `cu-stackedlist not-contained not-prose mx-auto overflow-hidden rounded-lg bg-white w-full`,
-  border: `border border-cu-black-100`,
-  shadow: `shadow-lg`,
-  oneCol: `grid md:grid-cols-1`,
-  twoCol: `grid md:grid-cols-2`,
-  offset: `md:mb-6 duration-300 ease-in`,
-  sm: `md:max-w-sm`,
-  lg: `md:max-w-lg`,
-  left: `md:float-left lg:ml-2 xl:ml-24 2xl:ml-[12%] md:mr-10`,
-  right: `md:float-right md:mr-0 xl:mr-24 2xl:mr-[12%] md:ml-10`,
-  title: `px-6 py-4 text-base md:text-xl font-semibold border-b rounded-t-lg bg-gray-50 text-cu-black-800`,
-}
diff --git a/lib/layouts/StackedList/StackedList.tsx b/lib/layouts/StackedList/StackedList.tsx
index 35a3b028a..4f0ff5400 100644
--- a/lib/layouts/StackedList/StackedList.tsx
+++ b/lib/layouts/StackedList/StackedList.tsx
@@ -1,5 +1,4 @@
 import React from 'react'
-import { styles } from './StackedList.styles'
 import { rdsMaxWidth } from '../../utils/optionClasses'
 
 export interface StackedListProps {
@@ -9,10 +8,13 @@ export interface StackedListProps {
   listType?: 'posts' | 'toc'
   maxWidth?: '5xl' | '7xl'
   offset?: 'left' | 'right'
-  size?: 'sm' | 'lg'
   header?: string
-  hasBorder?: boolean
-  hasShadow?: boolean
+}
+
+const styles = {
+  offset: `md:mb-6 duration-300 ease-in`,
+  left: `md:float-left lg:ml-2 xl:ml-24 2xl:ml-[12%] md:mr-10`,
+  right: `md:float-right md:mr-0 xl:mr-24 2xl:mr-[12%] md:ml-10`,
 }
 
 export const StackedList = ({
@@ -22,22 +24,24 @@ export const StackedList = ({
   listType = 'posts',
   maxWidth = '5xl',
   offset,
-  size,
-  hasBorder,
-  hasShadow,
   header,
 }: StackedListProps) => {
   const ListComponent = as
-  const gridColumns = cols === '1' ? styles.oneCol : styles.twoCol
-  const borderStyle = hasBorder ? styles.border : ''
-  const shadowStyle = hasShadow ? styles.shadow : ''
-  const sizeStyles = size ? styles[size] : styles.sm
-  const offsetStyle = offset ? `${styles[offset]} ${styles.offset} ${sizeStyles}` : rdsMaxWidth[maxWidth]
+  const gridColumns = cols === '1' ? 'grid md:grid-cols-1' : 'grid md:grid-cols-2'
+  const offsetStyle = offset ? `${styles[offset]} ${styles.offset} md:max-w-sm lg:max-w-md` : rdsMaxWidth[maxWidth]
 
   return (
-    <div className={`${styles.wrapper} ${borderStyle} ${shadowStyle} ${offsetStyle}`}>
-      {header && <h2 className={`${styles.title}`}>{header}</h2>}
-      <ListComponent className={`cu-stackedlist-${listType} ${gridColumns}`}>{children}</ListComponent>
+    <div
+      className={`cu-stackedlist not-contained not-prose mx-auto overflow-hidden rounded-lg bg-white w-full shadow-lg ${offsetStyle}`}
+    >
+      {header && (
+        <h2 className="px-6 py-4 text-base font-semibold border-b rounded-t-lg md:text-xl bg-gray-50 text-cu-black-800">
+          {header}
+        </h2>
+      )}
+      <ListComponent className={`cu-stackedlist--${listType} cu-stackedlist--${cols} ${gridColumns}`}>
+        {children}
+      </ListComponent>
     </div>
   )
 }
diff --git a/lib/layouts/StackedList/styles.css b/lib/layouts/StackedList/styles.css
index fe02d35c4..8962105aa 100644
--- a/lib/layouts/StackedList/styles.css
+++ b/lib/layouts/StackedList/styles.css
@@ -2,41 +2,59 @@
 StackedList for posts
 */
 
-.cu-stackedlist-posts > li {
-  @apply border-b border-cu-black-100 last:-mb-px;
+/* Add bottom border for single column list */
+.cu-stackedlist--posts.cu-stackedlist--1 > li {
+  @apply border-b last:border-b-0;
 }
 
-.cu-stackedlist-posts.md\:grid-cols-2 > li {
-  @apply last:mb-0 odd:border-r;
+/* Add botom border to all items */
+.cu-stackedlist--posts.cu-stackedlist--2 > li {
+  @apply border-b last:border-b-0 md:last:border-b border-cu-black-100;
+}
+
+/* Add border right on all odd items */
+.cu-stackedlist--posts.cu-stackedlist--2 > li:nth-child(odd) {
+  @apply md:border-r;
+}
+
+/* If odd li is last child in stacked list and remove bottom border */
+.cu-stackedlist--posts.cu-stackedlist--2 > li:nth-child(odd):last-child {
+  @apply md:border-b-0;
+}
+
+/* If even li is last child in stacked list and remove full bottom border */
+.cu-stackedlist--posts.cu-stackedlist--2 > li:nth-child(even):last-child,
+.cu-stackedlist--posts.cu-stackedlist--2 > li:nth-child(odd):nth-last-child(2) {
+  @apply md:border-b-0;
 }
 
 /*
 StackedList for ToC
 */
 
-.cu-stackedlist-toc {
+.cu-stackedlist--toc {
   @apply px-5 py-6 text-cu-black-900;
 }
 
-.cu-stackedlist-toc a {
+.cu-stackedlist--toc a {
   @apply text-cyan-700 hover:text-cu-red-700;
 }
 
-.cu-stackedlist-toc ul:not(:first-child) {
+.cu-stackedlist--toc ul:not(:first-child) {
   @apply pt-3;
 }
 
-.cu-stackedlist-toc li {
+.cu-stackedlist--toc li {
   @apply py-1.5 ml-8 text-lg first:pt-0 last:pb-0;
   list-style-type: decimal;
 }
 
-.cu-stackedlist-toc li li {
+.cu-stackedlist--toc li li {
   @apply ml-6;
   list-style-type: lower-alpha;
 }
 
-.cu-stackedlist-toc li li li {
+.cu-stackedlist--toc li li li {
   @apply ml-4;
   list-style-type: lower-roman;
 }