diff --git a/web/pageComponents/pageTemplates/Event.tsx b/web/pageComponents/pageTemplates/Event.tsx
index b2387a417..1dce1cbe5 100644
--- a/web/pageComponents/pageTemplates/Event.tsx
+++ b/web/pageComponents/pageTemplates/Event.tsx
@@ -4,9 +4,9 @@ import { FormattedMessage } from 'react-intl'
 import { getEventDates } from '../../common/helpers/dateUtilities'
 import ContactList from '../shared/ContactList'
 import TitleText from '../shared/portableText/TitleText'
-import RelatedContent from '../shared/RelatedContent'
 import AddToCalendar from '../topicPages/AddToCalendar'
 import Promotion from '../topicPages/Promotion'
+import RelatedContent from '../shared/RelatedContent'
 
 import type { PortableTextBlock } from '@portabletext/types'
 import Seo from '../../pageComponents/shared/Seo'
@@ -14,7 +14,6 @@ import type { EventSchema } from '../../types/types'
 import { EventJsonLd } from 'next-seo'
 import Blocks from '../../pageComponents/shared/portableText/Blocks'
 
-
 export default function Event({ data }: { data: EventSchema }): JSX.Element {
   const { title } = data
   const { location, ingress, content, promotedPeople, relatedLinks, contactList, eventDate } = data.content
@@ -30,11 +29,8 @@ export default function Event({ data }: { data: EventSchema }): JSX.Element {
       )}
       <main>
         <article>
-          <BackgroundContainer
-            className="px-layout-md py-layout-md"
-            background={{ backgroundColor: 'Moss Green Light' }}
-          >
-            <div className="mx-auto">
+          <BackgroundContainer className="px-layout-md py-32" background={{ backgroundColor: 'Moss Green Light' }}>
+            <div className="mx-auto max-w-[1186px]">
               {title && <TitleText value={title} level="h1" size="3xl" />}
               {start && (
                 <div className="text-xl text-moss-green-100 mt-7 mb-5">
@@ -64,7 +60,7 @@ export default function Event({ data }: { data: EventSchema }): JSX.Element {
             <div
               className={`
              mt-16
-             pb-16
+             pb-page-content
              px-0 
              md:px-8
              lg:px-0
@@ -82,7 +78,6 @@ export default function Event({ data }: { data: EventSchema }): JSX.Element {
           )}
           {promotedPeople?.people && promotedPeople?.people.length > 0 && (
             <Promotion
-              className={`pb-16`}
               data={{
                 id: 'promotedPeople',
                 type: 'people',
@@ -100,7 +95,7 @@ export default function Event({ data }: { data: EventSchema }): JSX.Element {
                   px-layout-lg
                   max-w-viewport
                   mx-auto
-                  my-3xl
+                  pb-page-content
                   `}
             />
           )}
diff --git a/web/pageComponents/shared/ContactList.tsx b/web/pageComponents/shared/ContactList.tsx
index 53be351ed..ee88771d2 100644
--- a/web/pageComponents/shared/ContactList.tsx
+++ b/web/pageComponents/shared/ContactList.tsx
@@ -1,65 +1,37 @@
 import { HTMLAttributes } from 'react'
-import styled from 'styled-components'
 import type { ContactListData } from '../../types/types'
 import { Text, Heading } from '@components'
 import { removeWhiteSpace } from '../../common/helpers/removeWhiteSpace'
 
-const Contacts = styled.div`
-  padding-top: var(--space-small);
-  display: flex;
-  flex-wrap: wrap;
-  flex-direction: row;
-  justify-content: space-between;
-`
-const Contact = styled.div`
-  display: flex;
-  padding: var(--space-small) 0;
-  flex-basis: 35%;
-  justify-content: left;
-  flex-direction: column;
-`
-const Phone = styled.a`
-  margin: var(--space-xSmall) 0;
-  color: var(--grey-70);
-  font-size: var(--typeScale-0);
-  &:hover {
-    color: var(--moss-green-100);
-  }
-`
-
-const Location = styled.p`
-  margin: var(--space-xSmall) 0;
-  font-size: var(--typeScale-1);
-`
-const Header = styled(Heading)`
-  text-align: var(--contactList-titleAlign, left);
-  margin: var(--contactList-titleMargin, 0 0 var(--space-xLarge) 0);
-`
-
 type ContactListProps = {
   data: ContactListData
 } & HTMLAttributes<HTMLDivElement>
 
 const ContactList = ({ data }: ContactListProps) => {
   return (
-    <div className="flex flex-col py-0 px-layout-lg max-w-viewport">
+    <div className="flex flex-col pb-page-content px-layout-lg max-w-viewport">
       {data?.title && (
-        <Header size="xl" level="h2">
+        <Heading className="pb-6 text-left" size="xl" level="h2">
           {data.title}
-        </Header>
+        </Heading>
       )}
       {data?.ingress && <Text size="md">{data.ingress}</Text>}
       {data?.contacts && data?.contacts.length > 0 && (
-        <Contacts>
+        <div className="flex flex-row flex-wrap justify-between">
           {data.contacts.map((contact) => {
             return (
-              <Contact key={contact._key}>
-                <Location>{contact.location} </Location>
-                <Phone href={`tel:${removeWhiteSpace(contact.phone)}`}>{contact.phone}</Phone>
-              </Contact>
+              <div className="flex basis-2/5 justify-left flex-col py-2" key={contact._key}>
+                <p className="my-2 text-md">{contact.location} </p>
+                <a
+                  className="my-2 text-gray-600 text-xs hover:text-moss-green-100"
+                  href={`tel:${removeWhiteSpace(contact.phone)}`}
+                >
+                  {contact.phone}
+                </a>
+              </div>
             )
           })}
-        </Contacts>
+        </div>
       )}
     </div>
   )
diff --git a/web/pageComponents/shared/RelatedContent.tsx b/web/pageComponents/shared/RelatedContent.tsx
index 5d57c0597..3940ac39a 100644
--- a/web/pageComponents/shared/RelatedContent.tsx
+++ b/web/pageComponents/shared/RelatedContent.tsx
@@ -1,14 +1,8 @@
 import { Fragment, HTMLAttributes } from 'react'
 import { Heading, List } from '@components'
 import type { RelatedLinksData, LinkData } from '../../types/types'
-import styled from 'styled-components'
 import ReadMoreLink from '../shared/ReadMoreLink'
 
-const StyledHeading = styled(Heading)`
-  margin: var(--related-titleMargin, 0 0 var(--space-xLarge) 0);
-  text-align: var(--related-titleAlign, left);
-`
-
 const { Item } = List
 
 type RelatedContentProps = {
@@ -18,9 +12,9 @@ type RelatedContentProps = {
 const RelatedContent = ({ data, ...rest }: RelatedContentProps) => {
   return (
     <aside {...rest}>
-      <StyledHeading size="xl" level="h2">
+      <Heading className="pb-4 text-left" size="xl" level="h2">
         {data.title}
-      </StyledHeading>
+      </Heading>
       <List unstyled>
         {data.links.length > 0 &&
           data.links.map((item: LinkData) => {
diff --git a/web/pageComponents/topicPages/promotions/SinglePromotion.tsx b/web/pageComponents/topicPages/promotions/SinglePromotion.tsx
index c986baea8..7b5b5a2f6 100644
--- a/web/pageComponents/topicPages/promotions/SinglePromotion.tsx
+++ b/web/pageComponents/topicPages/promotions/SinglePromotion.tsx
@@ -8,7 +8,6 @@ import type { PeopleCardData, EventCardData, CardData } from '../../../types/typ
 
 const LandscapeWrapper = styled.div`
   /* max-width: 350px; */
-  margin-top: var(--space-xLarge);
   padding: 0 var(--space-xLarge);
   margin-left: auto;
   margin-right: auto;