diff --git a/FeatureFlags.js b/FeatureFlags.js
index 97bd8a7fd..af178b6f3 100644
--- a/FeatureFlags.js
+++ b/FeatureFlags.js
@@ -47,6 +47,7 @@ const MAGAZINE = [...GLOBAL_PROD, ...GLOBAL_DEV]
 /* Allows same slug for different languages */
 const SAME_SLUG = [...GLOBAL_DEV, 'japan', 'southkorea']
 const LINE_BREAK_TYPO = ['southkorea']
+const CAMPAIGN = [...GLOBAL_PROD, ...GLOBAL_DEV]
 
 /**
  * @param {string} dataset
@@ -72,4 +73,5 @@ export default (dataset) => ({
   IS_GLOBAL_PROD: GLOBAL_PROD.includes(dataset),
   IS_DEV: GLOBAL_DEV.includes(dataset),
   IS_SATELLITE: SATELLITES.includes(dataset),
+  HAS_CAMPAIGN_BLOCKS: CAMPAIGN.includes(dataset),
 })
diff --git a/sanityv3/schemas/components/ThemeSelector/themeColors.ts b/sanityv3/schemas/components/ThemeSelector/themeColors.ts
index b87d0923b..fcff2c7b1 100644
--- a/sanityv3/schemas/components/ThemeSelector/themeColors.ts
+++ b/sanityv3/schemas/components/ThemeSelector/themeColors.ts
@@ -10,7 +10,9 @@ export const themeColors = [
   { title: 'Mid Orange', value: 5 },
   { title: 'Mid Blue 1', value: 6 },
   { title: 'Mid Blue 2', value: 7 },
-  { title: 'Mid Green', value: 8 },
+  { title: 'Mid Blue 3', value: 8 },
+  { title: 'Mid Green', value: 9 },
+  { title: 'Mist Blue 2', value: 10 },
 ]
 
 //Keep in sync with web/pageComponents/shared/textTeaser/theme
@@ -91,6 +93,17 @@ export const getColorForTheme = (pattern: number) => {
         },
       }
     case 8:
+      return {
+        background: {
+          value: defaultColors[6].value,
+          key: defaultColors[6].key,
+        },
+        highlight: {
+          value: defaultColors[0].value,
+          key: defaultColors[0].key,
+        },
+      }
+    case 9:
       return {
         background: {
           value: defaultColors[7].value,
@@ -98,6 +111,17 @@ export const getColorForTheme = (pattern: number) => {
         },
         highlight: {},
       }
+    case 10:
+      return {
+        background: {
+          value: defaultColors[3].value,
+          key: defaultColors[3].key,
+        },
+        highlight: {
+          value: defaultColors[6].value,
+          key: defaultColors[6].key,
+        },
+      }
 
     case 0:
     default:
diff --git a/sanityv3/schemas/documents/header/sharedHeaderFields.ts b/sanityv3/schemas/documents/header/sharedHeaderFields.ts
index 64792a3e1..2e7847e99 100644
--- a/sanityv3/schemas/documents/header/sharedHeaderFields.ts
+++ b/sanityv3/schemas/documents/header/sharedHeaderFields.ts
@@ -42,7 +42,7 @@ const heroBigTitleDefault = {
   of: [
     configureTitleBlockContent({
       highlight: true,
-      styles: defaultBannerBigTitletStyle,
+      extendedStyles: defaultBannerBigTitletStyle,
     }),
   ],
   hidden: ({ parent }: DocumentType) => !parent.isBigTitle || parent.heroType !== HeroTypes.DEFAULT,
@@ -64,7 +64,7 @@ const heroBigTitleFiftyFifty = {
   title: 'Hero Title',
   type: 'array',
   fieldset: 'header',
-  of: [configureTitleBlockContent({ styles: fiftyFiftyBigTitleStyle })],
+  of: [configureTitleBlockContent({ extendedStyles: fiftyFiftyBigTitleStyle })],
   hidden: ({ parent }: DocumentType) => !parent.isBigTitle || parent.heroType !== HeroTypes.FIFTY_FIFTY,
   validation: (Rule: Rule) =>
     Rule.custom((value: PortableTextBlock[], ctx: ValidationContext) =>
diff --git a/sanityv3/schemas/documents/page.ts b/sanityv3/schemas/documents/page.ts
index b869fe417..9e59fcf48 100644
--- a/sanityv3/schemas/documents/page.ts
+++ b/sanityv3/schemas/documents/page.ts
@@ -43,6 +43,12 @@ export default {
       fieldset: 'metadata',
     },
     ...sharedHeroFields,
+    {
+      title: 'Is Campain',
+      name: 'isCampaign',
+      description: 'Set this to true if the page should be treated as campaign. the header title h1 will be hidden.',
+      type: 'boolean',
+    },
     {
       name: 'content',
       type: 'array',
@@ -68,6 +74,8 @@ export default {
         { type: 'videoPlayer' },
         { type: 'videoPlayerCarousel' },
         { type: 'table' },
+        Flags.HAS_CAMPAIGN_BLOCKS && { type: 'grid' },
+        Flags.HAS_CAMPAIGN_BLOCKS && { type: 'campaignBanner' },
         Flags.HAS_FORMS && { type: 'form' },
         Flags.HAS_NEWS && { type: 'newsList' },
         { type: 'stockValuesApi' },
diff --git a/sanityv3/schemas/editors/blockContentType.tsx b/sanityv3/schemas/editors/blockContentType.tsx
index e1dc5159b..2646aded1 100644
--- a/sanityv3/schemas/editors/blockContentType.tsx
+++ b/sanityv3/schemas/editors/blockContentType.tsx
@@ -19,6 +19,8 @@ export type BlockContentProps = {
   attachment?: boolean
   lists?: boolean
   smallText?: boolean
+  largeText?: boolean
+  extraLargeText?: boolean
   highlight?: boolean
   normalTextOverride?: {
     title: string
@@ -42,20 +44,28 @@ const round = (num: number) =>
     .toFixed(7)
     .replace(/(\.[0-9]+?)0+$/, '$1')
     .replace(/\.0$/, '')
-const em = (px: number, base: number) => `${round(px / base)}em`
+export const em = (px: number, base: number) => `${round(px / base)}em`
 
 const SmallTextRender = (props: any) => {
   const { children } = props
   return <span style={{ fontSize: '0.8rem' }}>{children}</span>
 }
+export const LargeTextRender = (props: any) => {
+  const { children } = props
+  return <span style={{ fontSize: `${em(36, 16)}`, fontWeight: '600' }}>{children}</span>
+}
+export const ExtraLargeTextRender = (props: any) => {
+  const { children } = props
+  return <span style={{ fontSize: `${em(56, 16)}`, fontWeight: '600' }}>{children}</span>
+}
 const Level2BaseStyle = (props: any) => {
   const { children } = props
-  return <h2 style={{ fontSize: em(18, 16), fontWeight: '600' }}>{children} </h2>
+  return <h2 style={{ fontSize: `${em(18, 16)}`, fontWeight: '600' }}>{children} </h2>
 }
 
 const Level3BaseStyle = (props: any) => {
   const { children } = props
-  return <h3 style={{ fontSize: em(16, 16), fontWeight: '600' }}>{children} </h3>
+  return <h3 style={{ fontSize: `${em(16, 16)}`, fontWeight: '600' }}>{children} </h3>
 }
 
 // H1 not allowed in block content since it should be a document title.
@@ -70,6 +80,8 @@ export const configureBlockContent = (options: BlockContentProps = {}): BlockDef
     externalLink = true,
     attachment = false,
     lists = true,
+    largeText = false,
+    extraLargeText = false,
     smallText = true,
     highlight = false,
     extendedStyles = [],
@@ -119,6 +131,16 @@ export const configureBlockContent = (options: BlockContentProps = {}): BlockDef
     value: 'smallText',
     component: SmallTextRender,
   }
+  const largeTextConfig = {
+    title: 'Large text',
+    value: 'largeText',
+    component: LargeTextRender,
+  }
+  const extraLargeTextConfig = {
+    title: 'Extra large text',
+    value: 'extraLargeText',
+    component: ExtraLargeTextRender,
+  }
   const externalLinkConfig = {
     name: 'link',
     type: 'object',
@@ -267,6 +289,12 @@ export const configureBlockContent = (options: BlockContentProps = {}): BlockDef
   if (smallText) {
     config?.styles?.push(smallTextConfig)
   }
+  if (largeText) {
+    config?.styles?.push(largeTextConfig)
+  }
+  if (extraLargeText) {
+    config?.styles?.push(extraLargeTextConfig)
+  }
 
   if (externalLink) {
     config?.marks?.annotations?.push(externalLinkConfig)
diff --git a/sanityv3/schemas/editors/titleEditorContentType.tsx b/sanityv3/schemas/editors/titleEditorContentType.tsx
index bd904c3a2..d4ae51bb2 100644
--- a/sanityv3/schemas/editors/titleEditorContentType.tsx
+++ b/sanityv3/schemas/editors/titleEditorContentType.tsx
@@ -4,30 +4,37 @@ import { StrikethroughIcon } from '@sanity/icons'
 import { BlockDefinition, BlockStyleDefinition } from 'sanity'
 import { format_color_text } from '@equinor/eds-icons'
 import { defaultColors } from '../defaultColors'
+import { em, ExtraLargeTextRender, LargeTextRender } from './blockContentType'
 
 export type TitleContentProps = {
-  styles?: BlockStyleDefinition[]
+  extendedStyles?: BlockStyleDefinition[]
   highlight?: boolean
   highlightTitle?: string
+  largeText?: boolean
+  extraLargeText?: boolean
+  twoXLText?: boolean
+}
+
+const TwoXLTextRender = (props: any) => {
+  const { children } = props
+  return <span style={{ fontSize: `${em(64, 16)}`, fontWeight: '400' }}>{children}</span>
 }
 
 // TODO: Add relevant styles for titles (i.e. highlighted text)
-export const configureTitleBlockContent = (
-  options: TitleContentProps = {
-    styles: [
-      {
-        title: 'Normal',
-        value: 'normal',
-      },
-    ],
-  },
-): BlockDefinition => {
-  const { highlight = false, styles, highlightTitle = 'Highlight' } = options
+export const configureTitleBlockContent = (options: TitleContentProps = {}): BlockDefinition => {
+  const {
+    highlight = false,
+    highlightTitle = 'Highlight',
+    largeText = false,
+    extraLargeText = false,
+    twoXLText = false,
+    extendedStyles = [],
+  } = options
 
   const config: BlockDefinition = {
     type: 'block',
     name: 'block',
-    styles: styles,
+    styles: [{ title: 'Normal', value: 'normal' }, ...extendedStyles],
     lists: [],
     marks: {
       decorators: [
@@ -56,6 +63,22 @@ export const configureTitleBlockContent = (
     },
   }
 
+  const largeTextConfig = {
+    title: 'Large text',
+    value: 'largeText',
+    component: LargeTextRender,
+  }
+  const extraLargeTextConfig = {
+    title: 'Extra large text',
+    value: 'extraLargeText',
+    component: ExtraLargeTextRender,
+  }
+  const twoXLTextConfig = {
+    title: '2XL text',
+    value: 'twoXLText',
+    component: TwoXLTextRender,
+  }
+
   const textColorConfig = {
     title: highlightTitle,
     value: 'highlight',
@@ -68,6 +91,15 @@ export const configureTitleBlockContent = (
   if (highlight) {
     config.marks?.decorators?.push(textColorConfig)
   }
+  if (largeText) {
+    config?.styles?.push(largeTextConfig)
+  }
+  if (extraLargeText) {
+    config?.styles?.push(extraLargeTextConfig)
+  }
+  if (twoXLText) {
+    config?.styles?.push(twoXLTextConfig)
+  }
 
   return config
 }
diff --git a/sanityv3/schemas/index.js b/sanityv3/schemas/index.js
index 253bf2314..1b4a7283c 100644
--- a/sanityv3/schemas/index.js
+++ b/sanityv3/schemas/index.js
@@ -94,6 +94,14 @@ import card from './objects/card'
 import cardsList from './objects/cardsList'
 import backgroundOptions from './objects/background/backgroundOptions'
 import imageBackground from './objects/background/imageBackground'
+import grid from './objects/grid/index'
+import span3 from './objects/grid/rowTypes/span3'
+import span2and1 from './objects/grid/rowTypes/span2and1'
+import gridTextBlock from './objects/grid/cellTypes/gridTextBlock'
+import campaignBanner from './objects/campaignBanner'
+import gridTeaser from './objects/grid/cellTypes/gridTeaser'
+import threeColumns from './objects/grid/rowTypes/3columns'
+import gridColorTheme from './objects/grid/theme'
 
 const routeSchemas = languages.map(({ name, title }) => {
   return route(name, title)
@@ -182,6 +190,14 @@ const RemainingSchemas = [
   cardsList,
   backgroundOptions,
   imageBackground,
+  grid,
+  span3,
+  span2and1,
+  gridTextBlock,
+  campaignBanner,
+  gridTeaser,
+  threeColumns,
+  gridColorTheme,
 ]
 
 // Then we give our schema to the builder and provide the result to Sanity
diff --git a/sanityv3/schemas/objects/campaignBanner/index.tsx b/sanityv3/schemas/objects/campaignBanner/index.tsx
new file mode 100644
index 000000000..69f960962
--- /dev/null
+++ b/sanityv3/schemas/objects/campaignBanner/index.tsx
@@ -0,0 +1,107 @@
+/* eslint-disable react/display-name */
+import blocksToText from '../../../helpers/blocksToText'
+import { configureBlockContent } from '../../editors'
+import { validateCharCounterEditor } from '../../validations/validateCharCounterEditor'
+
+import type { Image, PortableTextBlock, Reference, Rule, ValidationContext } from 'sanity'
+import type { ColorSelectorValue } from '../../components/ColorSelector'
+
+const blockConfigTitle = {
+  h2: false,
+  h3: false,
+  h4: false,
+  internalLink: false,
+  externalLink: false,
+  attachment: false,
+  lists: false,
+  smallText: true,
+  largeText: true,
+  extraLargeText: true,
+}
+const blockConfigContent = {
+  h2: false,
+  h3: false,
+  h4: false,
+  internalLink: false,
+  externalLink: false,
+  attachment: false,
+  lists: false,
+  smallText: true,
+}
+
+const blockTitleType = configureBlockContent({ ...blockConfigTitle })
+const blockContentType = configureBlockContent({ ...blockConfigContent })
+
+export type CampaignBanner = {
+  _type: 'campaignBanner'
+  overline?: string
+  title?: PortableTextBlock[]
+  text?: PortableTextBlock[]
+  image: Image
+  imagePosition?: string
+  imageSize?: string
+  background?: ColorSelectorValue
+}
+
+export default {
+  name: 'campaignBanner',
+  title: 'Campaign Banner',
+  type: 'object',
+  localize: true,
+  fieldsets: [
+    {
+      title: 'Background image',
+      name: 'backgroundImage',
+      description: 'Settings for the background image',
+      options: {
+        collapsible: true,
+        collapsed: true,
+      },
+    },
+  ],
+  fields: [
+    {
+      name: 'title',
+      title: 'Title content',
+      type: 'array',
+      of: [blockTitleType],
+      validation: (Rule: Rule) =>
+        Rule.custom((value: PortableTextBlock[], ctx: ValidationContext) => {
+          return validateCharCounterEditor(value, 600)
+        }).warning(),
+    },
+    {
+      title: 'Image',
+      name: 'backgroundImage',
+      type: 'image',
+      options: {
+        hotspot: true,
+        collapsed: false,
+      },
+      fieldset: 'backgroundImage',
+    },
+    {
+      title: 'Background Color',
+      description: 'Fallback if no background image. Default is white.',
+      name: 'backgroundColor',
+      type: 'colorlist',
+      fieldset: 'backgroundImage',
+    },
+  ],
+  preview: {
+    select: {
+      title: 'title',
+      text: 'text',
+      image: 'backgroundImage.asset',
+    },
+    prepare({ title, text, image }: { title: PortableTextBlock[]; text: PortableTextBlock[]; image: Reference }) {
+      const plainTitle = blocksToText(title || text)
+
+      return {
+        title: plainTitle || 'Missing title/content',
+        subtitle: 'Campaign banner component',
+        media: image,
+      }
+    },
+  },
+}
diff --git a/sanityv3/schemas/objects/grid/cellTypes/gridTeaser.tsx b/sanityv3/schemas/objects/grid/cellTypes/gridTeaser.tsx
new file mode 100644
index 000000000..772dbb45f
--- /dev/null
+++ b/sanityv3/schemas/objects/grid/cellTypes/gridTeaser.tsx
@@ -0,0 +1,163 @@
+/* eslint-disable react/display-name */
+import blocksToText from '../../../../helpers/blocksToText'
+import { configureBlockContent } from '../../../editors'
+import { validateCharCounterEditor } from '../../../validations/validateCharCounterEditor'
+
+import type { PortableTextBlock, Reference, Rule, ValidationContext } from 'sanity'
+import type { DownloadableImage } from './../../downloadableImage'
+import type { DownloadableFile } from '../../files'
+import type { ImageWithAlt } from '../../imageWithAlt'
+import type { LinkSelector } from '../../linkSelector'
+import type { ColorSelectorValue } from '../../../components/ColorSelector'
+import { LeftAlignedImage, RightAlignedImage } from '../../../../icons'
+import { RadioIconSelector } from '../../../components'
+
+const blockContentType = configureBlockContent({
+  smallText: true,
+  largeText: true,
+  extraLargeText: true,
+})
+
+const imageAlignmentOptions = [
+  { value: 'left', icon: LeftAlignedImage },
+  { value: 'right', icon: RightAlignedImage },
+]
+
+export type GridTeaser = {
+  _type: 'gridTeaser'
+  content?: PortableTextBlock[]
+  quote: string
+  author: string
+  authorTitle?: string
+  action?: (LinkSelector | DownloadableFile | DownloadableImage)[]
+  image: ImageWithAlt
+  imagePosition?: string
+  background?: ColorSelectorValue
+}
+
+export default {
+  name: 'gridTeaser',
+  title: 'Grid Teaser',
+  type: 'object',
+  localize: true,
+  fieldsets: [
+    {
+      title: 'Quote',
+      name: 'quote',
+      description: '',
+      options: {
+        collapsible: true,
+        collapsed: true,
+      },
+    },
+    {
+      name: 'link',
+      title: 'Link',
+      description: 'Select either an internal link or external URL.',
+    },
+    {
+      name: 'design',
+      title: 'Design options',
+    },
+  ],
+  fields: [
+    {
+      name: 'content',
+      title: 'Content',
+      type: 'array',
+      of: [blockContentType],
+      validation: (Rule: Rule) =>
+        Rule.custom((value: PortableTextBlock[], ctx: ValidationContext) => {
+          return validateCharCounterEditor(value, 600)
+        }).warning(),
+    },
+    {
+      name: 'quote',
+      type: 'text',
+      title: 'Quote',
+      description: 'Highlighted quote from the article.',
+      rows: 5,
+    },
+    {
+      name: 'author',
+      type: 'string',
+      title: 'Name',
+    },
+    {
+      name: 'authorTitle',
+      type: 'string',
+      title: 'Title',
+      description: 'Optional title for the author.',
+    },
+    {
+      name: 'action',
+      title: 'Link/action',
+      description: 'Select the link or downloadable file for the teaser',
+      type: 'array',
+      of: [
+        { type: 'linkSelector', title: 'Link' },
+        { type: 'downloadableImage', title: 'Downloadable image' },
+        { type: 'downloadableFile', title: 'Downloadable file' },
+      ],
+      validation: (Rule: Rule) => Rule.max(1).error('Only one action is permitted'),
+    },
+    {
+      name: 'image',
+      title: 'Image',
+      type: 'imageWithAlt',
+      validation: (Rule: Rule) => Rule.required(),
+    },
+    {
+      name: 'imagePosition',
+      title: 'Image position',
+      description:
+        'On span 3 one can select which side the image will be on for larger screens. On mobile and single column the image will be above',
+      type: 'string',
+      components: {
+        input: function ({ onChange, value }: { onChange: any; value: string }) {
+          return (
+            <RadioIconSelector
+              name="imageAlignmentSelector"
+              options={imageAlignmentOptions}
+              defaultValue="left"
+              currentValue={value}
+              onChange={onChange}
+            />
+          )
+        },
+      },
+    },
+    {
+      name: 'theme',
+      title: 'Theme',
+      description: 'If no theme set, normal text color is set',
+      type: 'themeList',
+    },
+  ],
+  preview: {
+    select: {
+      title: 'content',
+      text: 'quote',
+      image: 'image.asset',
+    },
+    prepare({
+      title,
+      text,
+      image,
+    }: {
+      title: PortableTextBlock[]
+      text: PortableTextBlock[]
+      isBigText: boolean
+      bigText: PortableTextBlock[]
+      image: Reference
+    }) {
+      const plainTitle = blocksToText(title || text)
+
+      return {
+        title: plainTitle || 'Missing content/quote',
+        subtitle: 'Grid Teaser component',
+        media: image,
+      }
+    },
+  },
+}
diff --git a/sanityv3/schemas/objects/grid/cellTypes/gridTextBlock.tsx b/sanityv3/schemas/objects/grid/cellTypes/gridTextBlock.tsx
new file mode 100644
index 000000000..91edbab3e
--- /dev/null
+++ b/sanityv3/schemas/objects/grid/cellTypes/gridTextBlock.tsx
@@ -0,0 +1,83 @@
+/* eslint-disable @typescript-eslint/ban-ts-comment */
+import { text_field } from '@equinor/eds-icons'
+import type { PortableTextBlock, Reference, Rule } from 'sanity'
+import type { ColorSelectorValue } from '../../../components/ColorSelector'
+import blocksToText from '../../../../helpers/blocksToText'
+import { EdsIcon } from '../../../../icons'
+import { configureBlockContent } from '../../../editors'
+
+const blockContentType = configureBlockContent({
+  smallText: true,
+  largeText: true,
+  extraLargeText: true,
+})
+
+type GridTextBlock = {
+  content?: string
+  action?: Reference[]
+  background?: ColorSelectorValue
+}
+
+export default {
+  name: 'gridTextBlock',
+  title: 'Grid Text block',
+  type: 'object',
+  fields: [
+    {
+      name: 'content',
+      title: 'Content',
+      type: 'array',
+      of: [blockContentType],
+    },
+    {
+      title: 'Text Alignment',
+      name: 'textAlignment',
+      description: 'Overrides background image alignment',
+      type: 'string',
+      options: {
+        list: [
+          { title: 'Left', value: 'left' },
+          { title: 'Right', value: 'right' },
+          { title: 'Center', value: 'center' },
+        ],
+      },
+      initialValue: 'left',
+    },
+    {
+      name: 'action',
+      title: 'Link/action',
+      description: 'Select the link or downloadable file',
+      type: 'array',
+      of: [
+        { type: 'linkSelector', title: 'Link' },
+        { type: 'downloadableImage', title: 'Downloadable image' },
+        { type: 'downloadableFile', title: 'Downloadable file' },
+      ],
+      validation: (Rule: Rule) => Rule.max(1).error('Only one action is permitted'),
+    },
+    {
+      name: 'theme',
+      type: 'themeList',
+    },
+    {
+      name: 'backgroundImage',
+      type: 'imageBackground',
+      title: 'Background Image',
+      description: 'Content alignment is ignored on this',
+    },
+  ].filter((e) => e),
+  preview: {
+    select: {
+      title: 'content',
+    },
+    prepare({ title }: { title: PortableTextBlock[] }) {
+      const plainTitle = blocksToText(title)
+
+      return {
+        title: plainTitle || 'Missing title/content',
+        subtitle: 'Grid text block component',
+        media: EdsIcon(text_field),
+      }
+    },
+  },
+}
diff --git a/sanityv3/schemas/objects/grid/index.tsx b/sanityv3/schemas/objects/grid/index.tsx
new file mode 100644
index 000000000..9fe2bc528
--- /dev/null
+++ b/sanityv3/schemas/objects/grid/index.tsx
@@ -0,0 +1,64 @@
+import { configureBlockContent } from '../../editors'
+import { PortableTextBlock } from 'sanity'
+import { EdsIcon } from '../../../icons'
+import { table_chart } from '@equinor/eds-icons'
+
+export type Grid = {
+  _type: 'grid'
+}
+
+export default {
+  title: 'Grid',
+  name: 'grid',
+  type: 'object',
+  fieldsets: [
+    {
+      title: 'Design options',
+      name: 'design',
+      description: 'Some options for design',
+      options: {
+        collapsible: true,
+        collapsed: false,
+      },
+    },
+  ],
+  fields: [
+    {
+      name: 'gridRows',
+      title: 'Grid rows',
+      description: 'Add different types of rows',
+      type: 'array',
+      of: [
+        {
+          type: 'span3',
+          title: 'Span 3 columns',
+          name: 'span3',
+        },
+        {
+          type: 'span2and1',
+          title: 'Span 2 columns and one single column',
+          name: 'span2and1',
+        },
+        {
+          type: 'threeColumns',
+          title: '3 columns',
+          name: 'threeColumns',
+        },
+      ],
+    },
+  ],
+  preview: {
+    select: {
+      title: 'title',
+    },
+    prepare({ title = [] }: { title: PortableTextBlock[] }) {
+      const plainTitle = 'Grid'
+
+      return {
+        title: plainTitle,
+        subtitle: 'Grid component',
+        media: () => EdsIcon(table_chart),
+      }
+    },
+  },
+}
diff --git a/sanityv3/schemas/objects/grid/rowTypes/3columns.tsx b/sanityv3/schemas/objects/grid/rowTypes/3columns.tsx
new file mode 100644
index 000000000..c6a9cefac
--- /dev/null
+++ b/sanityv3/schemas/objects/grid/rowTypes/3columns.tsx
@@ -0,0 +1,41 @@
+import blocksToText from '../../../../helpers/blocksToText'
+import { PortableTextBlock, Rule } from 'sanity'
+import { EdsIcon } from '../../../../icons'
+import { table_chart } from '@equinor/eds-icons'
+
+export type Span2And1 = {
+  _type: 'threeColumns'
+}
+
+export default {
+  title: '3 columns',
+  name: 'threeColumns',
+  type: 'object',
+  fields: [
+    {
+      name: 'columns',
+      title: 'List of 3 columns',
+      type: 'array',
+      of: [
+        { name: 'gridTextBlock', type: 'gridTextBlock', title: 'Text block' },
+        { type: 'figure' },
+        { type: 'gridTeaser' },
+      ],
+      validation: (Rule: Rule) => Rule.max(3).error('Only three is permitted'),
+    },
+  ],
+  preview: {
+    select: {
+      title: 'title',
+    },
+    prepare({ title = [] }: { title: PortableTextBlock[] }) {
+      const plainTitle = title.length > 0 ? blocksToText(title) : '3 columns type'
+
+      return {
+        title: plainTitle,
+        subtitle: '3 columns component',
+        media: () => EdsIcon(table_chart),
+      }
+    },
+  },
+}
diff --git a/sanityv3/schemas/objects/grid/rowTypes/span2and1.tsx b/sanityv3/schemas/objects/grid/rowTypes/span2and1.tsx
new file mode 100644
index 000000000..791e9357c
--- /dev/null
+++ b/sanityv3/schemas/objects/grid/rowTypes/span2and1.tsx
@@ -0,0 +1,61 @@
+import blocksToText from '../../../../helpers/blocksToText'
+import { configureBlockContent } from '../../../editors'
+
+import { PortableTextBlock, Rule } from 'sanity'
+import { EdsIcon } from '../../../../icons'
+import { table_chart } from '@equinor/eds-icons'
+
+export type Span2And1 = {
+  _type: 'span2and1'
+}
+
+export default {
+  title: 'Span 2 and 1 column',
+  name: 'span2and1',
+  type: 'object',
+  fields: [
+    {
+      name: 'span2',
+      title: 'The span 2 content',
+      type: 'array',
+      of: [
+        { name: 'gridTextBlock', type: 'gridTextBlock', title: 'Text block' },
+        { type: 'videoPlayer' },
+        { type: 'iframe' },
+        { type: 'figure' },
+      ],
+      validation: (Rule: Rule) => Rule.max(1).error('Only one is permitted'),
+    },
+    {
+      title: 'Align Span 2 on the right',
+      name: 'alignSpan2Right',
+      description: 'Will align the span 2 on the right side. If not selected on the left',
+      type: 'boolean',
+    },
+    {
+      name: 'singleColumn',
+      title: 'The single column content',
+      type: 'array',
+      of: [
+        { name: 'gridTextBlock', type: 'gridTextBlock', title: 'Text block' },
+        { type: 'figure' },
+        { type: 'gridTeaser' },
+      ],
+      validation: (Rule: Rule) => Rule.max(1).error('Only one is permitted'),
+    },
+  ],
+  preview: {
+    select: {
+      title: 'title',
+    },
+    prepare({ title = [] }: { title: PortableTextBlock[] }) {
+      const plainTitle = title.length > 0 ? blocksToText(title) : 'Span 2 and 1 type'
+
+      return {
+        title: plainTitle,
+        subtitle: 'Span 2 and 1 component',
+        media: () => EdsIcon(table_chart),
+      }
+    },
+  },
+}
diff --git a/sanityv3/schemas/objects/grid/rowTypes/span3.tsx b/sanityv3/schemas/objects/grid/rowTypes/span3.tsx
new file mode 100644
index 000000000..82bd7afa4
--- /dev/null
+++ b/sanityv3/schemas/objects/grid/rowTypes/span3.tsx
@@ -0,0 +1,44 @@
+import blocksToText from '../../../../helpers/blocksToText'
+import { PortableTextBlock, Rule } from 'sanity'
+import { EdsIcon } from '../../../../icons'
+import { table_chart } from '@equinor/eds-icons'
+
+export type Span3 = {
+  _type: 'span3'
+}
+
+export default {
+  title: 'Span 3',
+  name: 'span3',
+  type: 'object',
+  fields: [
+    {
+      name: 'content',
+      title: 'Span 3 type',
+      description: 'Select one type of content for span 3 type',
+      type: 'array',
+      of: [
+        { name: 'gridTextBlock', type: 'gridTextBlock', title: 'Text block' },
+        { type: 'videoPlayer' },
+        { type: 'iframe' },
+        { type: 'figure' },
+        { type: 'gridTeaser' },
+      ],
+      validation: (Rule: Rule) => Rule.max(1).error('Only one is permitted'),
+    },
+  ],
+  preview: {
+    select: {
+      title: 'title',
+    },
+    prepare({ title = [] }: { title: PortableTextBlock[] }) {
+      const plainTitle = title.length > 0 ? blocksToText(title) : 'Span 3 type'
+
+      return {
+        title: plainTitle,
+        subtitle: 'Span 3 component',
+        media: () => EdsIcon(table_chart),
+      }
+    },
+  },
+}
diff --git a/sanityv3/schemas/objects/grid/theme.tsx b/sanityv3/schemas/objects/grid/theme.tsx
new file mode 100644
index 000000000..6d00e2da7
--- /dev/null
+++ b/sanityv3/schemas/objects/grid/theme.tsx
@@ -0,0 +1,15 @@
+export default {
+  name: 'gridColorTheme',
+  title: 'Grid Color theme',
+  description: 'Text color on background color. Call to actions will be black or white text',
+  type: 'string',
+  options: {
+    list: [
+      { title: 'normal', value: 'normal' },
+      { title: 'red on white', value: 'redOnWhite' },
+      { title: 'white on dark blue', value: 'whiteOnDarkBlue' },
+      { title: 'dark blue on light blue', value: 'darkBlueOnLightBlue' },
+    ],
+  },
+  initialValue: 'normal',
+}
diff --git a/sanityv3/schemas/objects/teaser.tsx b/sanityv3/schemas/objects/teaser.tsx
index e738943ec..bcdaef655 100644
--- a/sanityv3/schemas/objects/teaser.tsx
+++ b/sanityv3/schemas/objects/teaser.tsx
@@ -142,15 +142,21 @@ export default {
     },
     {
       name: 'action',
-      title: 'Link/action',
-      description: 'Select the link or downloadable file for the teaser',
+      title: 'Links/actions',
+      description: 'Select links or downloadable files for the teaser',
       type: 'array',
       of: [
         { type: 'linkSelector', title: 'Link' },
         { type: 'downloadableImage', title: 'Downloadable image' },
         { type: 'downloadableFile', title: 'Downloadable file' },
       ],
-      validation: (Rule: Rule) => Rule.max(1).error('Only one action is permitted'),
+      validation: (Rule: Rule) => Rule.max(2).error('Only two action is permitted'),
+    },
+    {
+      title: 'Use resource link style',
+      description: 'Default is read more link style',
+      name: 'useResourceLinks',
+      type: 'boolean',
     },
     {
       name: 'image',
diff --git a/sanityv3/schemas/objects/textBlock.tsx b/sanityv3/schemas/objects/textBlock.tsx
index b844c8367..9e7915f2e 100644
--- a/sanityv3/schemas/objects/textBlock.tsx
+++ b/sanityv3/schemas/objects/textBlock.tsx
@@ -6,7 +6,6 @@ import blocksToText from '../../helpers/blocksToText'
 import { EdsIcon } from '../../icons'
 import CompactBlockEditor from '../components/CompactBlockEditor'
 import { configureBlockContent, configureTitleBlockContent } from '../editors'
-import { validateComponentAnchor } from '../validations/validateAnchorReference'
 
 const blockContentType = configureBlockContent({
   h2: false,
@@ -28,22 +27,27 @@ const blockContentTypeForBigText = configureBlockContent({
   h4: false,
   attachment: false,
   smallText: false,
+  largeText: true,
+  extraLargeText: true,
   normalTextOverride: {
     title: 'Normal',
     value: 'normal',
     component: ({ children }: { children: React.ReactNode }) => <span style={{ fontSize: '42px' }}>{children}</span>,
   },
 })
-
-const titleContentType = configureTitleBlockContent()
+const titleContentType = configureTitleBlockContent({
+  largeText: true,
+  extraLargeText: true,
+  twoXLText: true,
+})
 
 type TextBlock = {
   overline?: string
   title?: string
-  anchor?: string
   ingress?: string
   text?: string
   isBigText?: boolean
+  useBrandTheme?: boolean
   bigText?: PortableTextBlock[]
   action?: Reference[]
   splitList?: boolean
@@ -86,26 +90,20 @@ export default {
       name: 'actions',
       options: {
         collapsible: true,
-        collapsed: false,
+        collapsed: true,
       },
     },
     {
-      name: 'anchor',
-      title: 'Additional anchor point reference (Deprecated)',
-      description:
-        'If the anchor reference to this component is set using anchor link component, the value here will be overridden',
+      name: 'titleOptions',
+      title: 'Title',
+      description: '',
       options: {
         collapsible: true,
-        collapsed: true,
+        collapsed: false,
       },
     },
   ],
   fields: [
-    {
-      title: 'Big text',
-      name: 'isBigText',
-      type: 'boolean',
-    },
     {
       name: 'image',
       type: 'imageWithAlt',
@@ -123,45 +121,53 @@ export default {
     {
       name: 'title',
       type: 'array',
+      fieldset: 'titleOptions',
       components: {
         input: CompactBlockEditor,
       },
       of: [titleContentType],
       validation: (Rule: Rule) =>
         Rule.custom((value: PortableTextBlock[], ctx: ValidationContext) =>
-          !value && !(ctx.parent as TextBlock)?.isBigText ? 'A title is recommended' : true,
+          !value ? 'A title is recommended' : true,
         ).warning(),
-      hidden: ({ parent }: TextBlockDocument) => parent.isBigText,
     },
     {
-      name: 'anchor',
-      type: 'anchorReferenceField',
-      title: 'Anchor reference',
-      validation: (Rule: Rule) => [
-        Rule.max(0).warning('Clear this field and use anchor link component instead.'),
-        // @ts-ignore
-        Rule.custom((value: string, context: any) => validateComponentAnchor(value, context)),
-      ],
-      fieldset: 'anchor',
-      readOnly: ({ value }: { value?: string }) => !value,
+      title: 'Use brand theme for title',
+      description: 'Sets background to white and text color to brand red. Will disable other background options',
+      name: 'useBrandTheme',
+      type: 'boolean',
+      fieldset: 'titleOptions',
     },
     {
-      name: 'ingress',
-      title: 'Ingress',
-      type: 'array',
-      of: [ingressContentType],
-      hidden: ({ parent }: TextBlockDocument) => parent.isBigText,
+      title: 'Big text (Deprecated)',
+      description: 'Set big text to false. Will be removed after a transition period',
+      name: 'isBigText',
+      type: 'boolean',
+      fieldset: 'titleOptions',
+      readOnly: ({ value }: { value?: string }) => !value,
     },
     {
       name: 'bigTitle',
-      title: 'Title',
+      title: 'Title (Deprecated)',
+      description: 'Use regular title and set big text to false. Will be removed after a transition period',
+      fieldset: 'titleOptions',
       type: 'array',
       of: [blockContentTypeForBigText],
       hidden: ({ parent }: TextBlockDocument) => !parent.isBigText,
       validation: (Rule: Rule) =>
         Rule.custom((value: PortableTextBlock[], ctx: ValidationContext) =>
-          !value && (ctx.parent as TextBlock)?.isBigText ? 'Title is required' : true,
-        ),
+          value && (ctx.parent as TextBlock)?.isBigText
+            ? 'Clear this field and use regular title without big text boolean'
+            : true,
+        ).warning(),
+      readOnly: ({ value }: { value?: string }) => !value,
+    },
+    {
+      name: 'ingress',
+      title: 'Ingress',
+      type: 'array',
+      of: [ingressContentType],
+      hidden: ({ parent }: TextBlockDocument) => parent.isBigText,
     },
     {
       name: 'text',
@@ -204,6 +210,7 @@ export default {
     {
       name: 'designOptions',
       type: 'backgroundOptions',
+      readOnly: ({ parent }: { parent: TextBlock }) => parent.useBrandTheme,
     },
     {
       title: 'Background (Deprecated)',
diff --git a/sanityv3/schemas/objects/textTeaser.tsx b/sanityv3/schemas/objects/textTeaser.tsx
index b69fae311..65310e636 100644
--- a/sanityv3/schemas/objects/textTeaser.tsx
+++ b/sanityv3/schemas/objects/textTeaser.tsx
@@ -15,7 +15,7 @@ import { ThemeSelectorValue } from '../components/ThemeSelector'
 const titleContentType = configureTitleBlockContent({
   highlight: true,
   highlightTitle: 'Highlight text selected from theme below',
-  styles: [
+  extendedStyles: [
     {
       title: 'Normal',
       value: 'normal',
diff --git a/sanityv3/schemas/objects/videoPlayer.tsx b/sanityv3/schemas/objects/videoPlayer.tsx
index 5f02cf524..a3ab6f0dc 100644
--- a/sanityv3/schemas/objects/videoPlayer.tsx
+++ b/sanityv3/schemas/objects/videoPlayer.tsx
@@ -20,6 +20,17 @@ export default {
   name: 'videoPlayer',
   title: 'Video Player',
   type: 'object',
+  fieldsets: [
+    {
+      name: 'designOptions',
+      title: 'Design options',
+      description: '',
+      options: {
+        collapsible: true,
+        collapsed: false,
+      },
+    },
+  ],
   fields: [
     {
       name: 'title',
@@ -72,20 +83,43 @@ export default {
         layout: 'dropdown',
       },
       initialValue: '16:9',
+      fieldset: 'designOptions',
       validation: (Rule: Rule) => Rule.required(),
     },
+    {
+      name: 'width',
+      type: 'string',
+      title: 'Width',
+      options: {
+        list: [
+          { title: 'Normal', value: 'normal' },
+          { title: 'Extra wide', value: 'extraWide' },
+        ],
+        layout: 'dropdown',
+      },
+      fieldset: 'designOptions',
+      initialValue: 'normal',
+    },
     {
       name: 'height',
       type: 'number',
       title: 'Height',
+      fieldset: 'designOptions',
       description: 'Set a fixed height in pixels for the video. Note: this will override the aspect ratio setting.',
       validation: (Rule: Rule) => Rule.positive().greaterThan(0).precision(0),
     },
-
+    {
+      title: 'Use brand theme for video',
+      description: 'Make play button bigger and brand red.',
+      name: 'useBrandTheme',
+      type: 'boolean',
+      fieldset: 'designOptions',
+    },
     {
       title: 'Background',
       description: 'Pick a colour for the background. Default is white.',
       name: 'background',
+      fieldset: 'designOptions',
       type: 'colorlist',
     },
   ],
diff --git a/search/pnpm-lock.yaml b/search/pnpm-lock.yaml
index 7b344feca..150a93630 100644
--- a/search/pnpm-lock.yaml
+++ b/search/pnpm-lock.yaml
@@ -1,9 +1,5 @@
 lockfileVersion: '6.0'
 
-settings:
-  autoInstallPeers: true
-  excludeLinksFromLockfile: false
-
 dependencies:
   '@azure/storage-blob':
     specifier: ^12.15.0
@@ -3752,3 +3748,7 @@ packages:
     resolution: {integrity: sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==}
     engines: {node: '>=10'}
     dev: true
+
+settings:
+  autoInstallPeers: true
+  excludeLinksFromLockfile: false
diff --git a/web/components/src/Backgrounds/ColouredContainer.tsx b/web/components/src/Backgrounds/ColouredContainer.tsx
index cdb596b41..f169ef540 100644
--- a/web/components/src/Backgrounds/ColouredContainer.tsx
+++ b/web/components/src/Backgrounds/ColouredContainer.tsx
@@ -25,7 +25,7 @@ const ColourContainer = styled.div<ColourContainerProps>`
 `
 
 export const ColouredContainer = forwardRef<HTMLDivElement, ColouredContainerProps>(function BackgroundContainer(
-  { backgroundColor = 'White', backgroundUtility, dark, style, children, className, ...rest },
+  { backgroundColor = 'White', backgroundUtility, dark, style, children, className = '', ...rest },
   ref,
 ) {
   const styleVariant = getContainerColor(backgroundColor)
@@ -38,7 +38,7 @@ export const ColouredContainer = forwardRef<HTMLDivElement, ColouredContainerPro
   return (
     <ColourContainer
       className={twMerge(
-        `${className ?? ''} background${styleVariant} ${isDark ? 'dark' : ''} ${
+        `${className} background${styleVariant} ${isDark ? 'dark' : ''} ${
           backgroundUtility ? colorKeyToUtilityMap[backgroundUtility]?.background : ''
         }`,
       )}
diff --git a/web/components/src/VideoJsPlayer/index.tsx b/web/components/src/VideoJsPlayer/index.tsx
index f56d5cd5a..c9cc1ea5a 100644
--- a/web/components/src/VideoJsPlayer/index.tsx
+++ b/web/components/src/VideoJsPlayer/index.tsx
@@ -2,7 +2,7 @@ import * as React from 'react'
 import { useEffect, HTMLProps, useState, useCallback } from 'react'
 import videojs from 'video.js'
 import Player from 'video.js/dist/types/player'
-import 'video.js/dist/video-js.css'
+//import 'video.js/dist/video-js.css'
 import { play_circle, pause_circle, play } from '@equinor/eds-icons'
 import { Icon } from '@equinor/eds-core-react'
 import MediaError from 'video.js/dist/types/media-error'
@@ -12,8 +12,12 @@ type VideoJSProps = Omit<HTMLProps<HTMLVideoElement>, 'src'> & {
   src: string
   playButton?: boolean
   videoDescription?: string
+  /* setting this will sett fluid mode to video player */
   aspectRatio?: string
+  /** Ignores aspect ratio to enable fill mode */
+  useFillMode?: boolean
   loadingSpinner?: boolean
+  useBrandTheme?: boolean
   onReady?: (player: Player) => void
 }
 export const VideoJS: React.FC<VideoJSProps> = ({
@@ -27,6 +31,8 @@ export const VideoJS: React.FC<VideoJSProps> = ({
   aspectRatio,
   onReady,
   loadingSpinner,
+  useBrandTheme = false,
+  useFillMode = false,
   poster,
   allowFullScreen,
   ...rest
@@ -71,7 +77,7 @@ export const VideoJS: React.FC<VideoJSProps> = ({
         autoplay: autoPlay,
         preload: autoPlay ? 'auto' : 'none',
         controls: showControls,
-        aspectRatio,
+        ...(!useFillMode && { aspectRatio: aspectRatio }),
         bigPlayButton: !controls,
         controlbar: true,
         loadingSpinner: !autoPlay,
@@ -109,17 +115,19 @@ export const VideoJS: React.FC<VideoJSProps> = ({
   return (
     <>
       {/* eslint-disable-next-line */}
-      <video ref={measuredRef} className="video-js vjs-fill" poster={poster}></video>
+      <video ref={measuredRef} className="vjs-envis video-js vjs-fill" poster={poster}></video>
       {showPlayButton && (
         <button
-          className="absolute inset-0 m-auto z-10 bg-transparent border-transparent cursor-pointer [&_svg]:inline [&_svg]:align-baseline"
+          className={`${
+            useBrandTheme ? 'text-energy-red-100' : 'text-white-100'
+          } absolute inset-0 m-auto bg-transparent border-transparent cursor-pointer [&_svg]:inline [&_svg]:align-baseline`}
           onClick={handlePlayButton}
           aria-label={isPlaying ? 'Pause' : 'Play'}
         >
           <Icon
             size={48}
-            color="white"
-            style={{ opacity: 0.8 }}
+            color="currentColor"
+            style={{ opacity: useBrandTheme ? 1 : 0.8, height: 80, width: 80 }}
             data={play_circle}
             aria-label={isPlaying ? 'Pause icon' : 'Play icon'}
           />
diff --git a/web/core/Link/Link.tsx b/web/core/Link/Link.tsx
index 518297c17..d30ca3e91 100644
--- a/web/core/Link/Link.tsx
+++ b/web/core/Link/Link.tsx
@@ -13,7 +13,7 @@ export const Link = forwardRef<HTMLAnchorElement, LinkProps>(function Link(
   const classNames = twMerge(
     `text-slate-blue-95
     dark:text-white-100
-    w-max 
+    w-fit 
     inline-flex
     items-center
     gap-2.5
diff --git a/web/core/Link/ReadMoreLink.tsx b/web/core/Link/ReadMoreLink.tsx
index 98066ab05..04351242c 100644
--- a/web/core/Link/ReadMoreLink.tsx
+++ b/web/core/Link/ReadMoreLink.tsx
@@ -19,7 +19,7 @@ export const ReadMoreLink = forwardRef<HTMLAnchorElement, ReadMoreLinkProps>(fun
     group
     inline-flex
     align-baseline
-    w-max
+    w-fit
     text-slate-80
     leading-0
   `,
@@ -27,6 +27,7 @@ export const ReadMoreLink = forwardRef<HTMLAnchorElement, ReadMoreLinkProps>(fun
   )
   const contentClassNames = `
   relative
+  w-fit
   after:content-['']
   after:block
   after:absolute
diff --git a/web/core/Typography/Heading.tsx b/web/core/Typography/Heading.tsx
index 3d8f2dea9..8deab12ee 100644
--- a/web/core/Typography/Heading.tsx
+++ b/web/core/Typography/Heading.tsx
@@ -1,10 +1,17 @@
+/* eslint-disable @typescript-eslint/ban-ts-comment */
 import { PortableText, PortableTextProps } from '@portabletext/react'
 import type { PortableTextBlock } from '@portabletext/types'
 import { Typography, TypographyProps } from './Typography'
 import isEmpty from '../../pageComponents/shared/portableText/helpers/isEmpty'
 import { Highlight } from '../../pageComponents/shared/portableText/components'
+import { BlockProps } from '../../pageComponents/shared/portableText/Blocks'
+import { twMerge } from 'tailwind-merge'
 
-export type HeadingProps = PortableTextProps & TypographyProps
+export type HeadingProps = {
+  value?: PortableTextBlock[]
+} & PortableTextProps &
+  TypographyProps &
+  BlockProps
 
 const defaultComponents = ({ variant, as: providedAs, className }: TypographyProps) => {
   return {
@@ -30,6 +37,28 @@ const defaultComponents = ({ variant, as: providedAs, className }: TypographyPro
           </Typography>
         )
       },
+      largeText: ({ children }: PortableTextBlock) => {
+        return (
+          <Typography variant="2xl" as={providedAs} className={className}>
+            <>{children}</>
+          </Typography>
+        )
+      },
+      extraLargeText: ({ children }: PortableTextBlock) => {
+        return (
+          <Typography variant="5xl" as={providedAs} className={className}>
+            <>{children}</>
+          </Typography>
+        )
+      },
+      twoXLText: ({ children }: PortableTextBlock) => {
+        return (
+          <Typography variant="8xl" as={providedAs} className={className}>
+            <>{children}</>
+          </Typography>
+        )
+      },
+      //TODO Deprecate together with bigTitle option in text teaser
       extraLarge: ({ children }: PortableTextBlock) => {
         return (
           <Typography variant="5xl" as={providedAs} className={className}>
@@ -58,14 +87,61 @@ const defaultComponents = ({ variant, as: providedAs, className }: TypographyPro
 /**
  * Component to use with portabletext headings
  */
-export const Heading = ({ value, components = {}, variant, group, as, className, ...props }: HeadingProps) => {
+export const Heading = ({
+  value,
+  components = {},
+  variant,
+  group,
+  as,
+  className,
+  proseClassName = '',
+  ...props
+}: HeadingProps) => {
+  let div: PortableTextBlock[] = []
   return (
-    <PortableText
-      value={value}
-      // eslint-disable-next-line
-      // @ts-ignore
-      components={{ ...defaultComponents({ variant, group, as, className }), ...components }}
-      {...props}
-    />
+    <>
+      {value?.length > 1 ? (
+        value?.map((block: PortableTextBlock, i: number, blocks: PortableTextBlock[]) => {
+          // Normal text blocks (p, h1, h2, etc.) — these are grouped so we can wrap them in a prose div
+          if (block._type === 'block') {
+            div.push(block)
+            // If the next block is also text/pullQuote, group it with this one
+            if (blocks[i + 1]?._type === 'block') return null
+
+            // Otherwise, render the group of text blocks we have
+            const value = div
+            div = []
+            const WrapperTextTag = as ?? (`h2` as React.ElementType)
+            const PortableTextTag = `span` as React.ElementType
+
+            return (
+              <WrapperTextTag
+                key={block._key}
+                className={twMerge(`prose ${proseClassName} dark:prose-invert flex flex-col`, className)}
+              >
+                <PortableText
+                  value={value}
+                  // eslint-disable-next-line
+                  // @ts-ignore
+                  components={{
+                    ...defaultComponents({ variant, group, as: PortableTextTag, className }),
+                    ...components,
+                  }}
+                  {...props}
+                />
+              </WrapperTextTag>
+            )
+          }
+        })
+      ) : (
+        <PortableText
+          value={value}
+          // eslint-disable-next-line
+          // @ts-ignore
+          components={{ ...defaultComponents({ variant, group, as, className }), ...components }}
+          {...props}
+        />
+      )}
+    </>
   )
 }
diff --git a/web/core/Typography/Typography.tsx b/web/core/Typography/Typography.tsx
index 8bd0c4a3e..79df1f3be 100644
--- a/web/core/Typography/Typography.tsx
+++ b/web/core/Typography/Typography.tsx
@@ -72,7 +72,6 @@ export const Typography: OverridableComponent<TypographyProps, HTMLElement> = fo
   ref,
 ) {
   const as: ElementType = providedAs ? providedAs : getElementType(variant, link)
-
   const typography = findTypography(variant, group)
 
   if (typeof typography === 'undefined') {
diff --git a/web/core/Typography/variants.ts b/web/core/Typography/variants.ts
index 67be72800..078c9e365 100644
--- a/web/core/Typography/variants.ts
+++ b/web/core/Typography/variants.ts
@@ -14,8 +14,10 @@ const variants = {
     xl: 'text-slate-80 dark:text-white-100 text-xl leading-inherit font-normal',
     '2xl': 'text-slate-80 dark:text-white-100 text-2xl leading-cloudy font-normal',
     '3xl': 'text-slate-80 dark:text-white-100 text-3xl leading-earthy font-normal',
-    '4xl': 'text-slate-80 dark:text-white-100 text-4xl leading-earthy font-normal',
-    '5xl': 'text-slate-80 dark:text-white-100 text-5xl leading-earthy font-normal',
+    '4xl': 'text-slate-80 dark:text-white-100 text-4xl leading-cloudy font-normal',
+    '5xl': 'text-slate-80 dark:text-white-100 text-5xl leading-cloudy font-normal',
+    '8xl':
+      'text-slate-80 dark:text-white-100 text-5xl lg:text-6xl 2xl:text-8xl leading-cloudy lg:leading-cloudy 2xl:leading-cloudy font-normal',
   },
   paragraph: {
     ingress: '',
diff --git a/web/lib/queries/common/pageContentFields.ts b/web/lib/queries/common/pageContentFields.ts
index 474ffd3ac..f7a5d1afe 100644
--- a/web/lib/queries/common/pageContentFields.ts
+++ b/web/lib/queries/common/pageContentFields.ts
@@ -1,3 +1,4 @@
+import gridContentFields from '../gridContentFields'
 import { iframeCarouselFields } from '../iframeCarouselFields'
 import { tableFields } from '../table'
 import { videoPlayerCarouselFields } from '../videoPlayerCarouselFields'
@@ -38,11 +39,12 @@ _type == "keyNumbers" =>{
       ...,
       "extension": asset-> extension
     },
-    "action": action[0]{
+    "actions": action[]{
       ${linkSelectorFields},
       ${downloadableFileFields},
       ${downloadableImageFields},
     },
+    useResourceLinks
   },
 
   _type == "textTeaser" => {
@@ -65,12 +67,14 @@ _type == "keyNumbers" =>{
     "id": _key,
     image,
     overline,
+    //Deprecate big text after a while
     isBigText,
     "title": select(
       isBigText =>
         bigTitle[]{..., ${markDefs}},
         title[]{..., ${markDefs}}
       ),
+    useBrandTheme,
     ingress[]{..., ${markDefs}},
     text[]{..., ${markDefs}},
     "callToActions": action[]{
@@ -80,7 +84,6 @@ _type == "keyNumbers" =>{
     },
     splitList,
     overrideButtonStyle,
-    anchor,
     "designOptions": {
       ${background},
     },
@@ -512,6 +515,59 @@ _type == "keyNumbers" =>{
       ${background},
     },
   },
+  _type == "grid" => {
+    "type": _type,
+    "id": _key,
+    title,
+    "gridRows": gridRows[]{
+        "type": _type,
+        "id": _key,
+        _type == "span3" => {
+          "type": _type,
+        "id": _key,
+        "content": content[0] {
+          ${gridContentFields}
+        },
+        },
+        _type == "span2and1" => {
+          "type": _type,
+        "id": _key,
+          alignSpan2Right,
+          "span2": {
+          "content": span2[0] {
+            ${gridContentFields}
+          }
+          },
+          "singleColumn": {
+          "content": singleColumn[0] {
+            ${gridContentFields}
+          },
+        }
+      },
+      _type == "threeColumns" => {
+        "type": _type,
+        "id": _key,
+          "columns": columns[]{
+            ${gridContentFields}
+          }
+      }
+      },
+  },
+  _type == "campaignBanner" => {
+    "type": _type,
+    "id": _key,
+    "title": title[]{..., ${markDefs}},
+    "designOptions":{
+      "background": {
+        "backgroundImage":{ 
+          "image": backgroundImage 
+        },
+      "backgroundColor": coalesce(backgroundColor.title, 'White'),
+      "dark": coalesce(backgroundColor.dark, false),
+      "backgroundUtility":coalesce(backgroundColor.key, ""),
+      }
+    },
+  },
 `
 
 export default pageContentFields
diff --git a/web/lib/queries/gridContentFields.ts b/web/lib/queries/gridContentFields.ts
new file mode 100644
index 000000000..3e0841675
--- /dev/null
+++ b/web/lib/queries/gridContentFields.ts
@@ -0,0 +1,82 @@
+import downloadableFileFields from './common/actions/downloadableFileFields'
+import downloadableImageFields from './common/actions/downloadableImageFields'
+import linkSelectorFields from './common/actions/linkSelectorFields'
+import background from './common/background'
+import markDefs from './common/blockEditorMarks'
+import { videoPlayerFields } from './videoPlayerFields'
+
+const gridContentFields = /* groq */ `
+_type == "videoPlayer" => {
+  ${videoPlayerFields}
+},
+_type == "iframe" => {
+"type": _type,
+"id": _key,
+title,
+ingress[]{
+...,
+${markDefs},
+},
+description[]{
+...,
+${markDefs},
+},
+frameTitle,
+"action": action[0]{
+${linkSelectorFields},
+},
+url,
+"cookiePolicy": coalesce(cookiePolicy, 'none'),
+"designOptions": {
+"aspectRatio": coalesce(aspectRatio, '16:9'),
+${background},
+height,
+},
+},  
+_type == "gridTextBlock"=>{
+"type": _type,
+"id": _key,
+"theme": coalesce(theme.value, null),
+textAlignment,
+content[]{..., ${markDefs}},
+"action": action[0]{
+${linkSelectorFields},
+${downloadableFileFields},
+${downloadableImageFields},
+},
+backgroundImage
+},
+_type == "figure"=>{
+"type": _type,
+"id": _key,
+"figure": figure{
+_type,
+image,
+attribution,
+caption
+},
+"designOptions": {
+${background},
+},
+},
+_type == "gridTeaser" => {
+    "type": _type,
+    "id": _key,
+    content[]{..., ${markDefs}},
+    author,
+    authorTitle,
+    quote,
+    "imagePosition": coalesce(imagePosition, 'left'),
+    "theme": coalesce(theme.value, null),
+    "image": image {
+      ...,
+      "extension": asset-> extension
+    },
+    "action": action[0]{
+      ${linkSelectorFields},
+      ${downloadableFileFields},
+      ${downloadableImageFields},
+    },
+  },
+`
+export default gridContentFields
diff --git a/web/lib/queries/routes.ts b/web/lib/queries/routes.ts
index eab45faab..21bfd0355 100644
--- a/web/lib/queries/routes.ts
+++ b/web/lib/queries/routes.ts
@@ -23,6 +23,9 @@ export const routeQuery = /* groq */ `
     "seoAndSome": content->${seoAndSomeFields},
     "hero": content->${heroFields},
     "template": content->_type,
+    content->_type == "page" => {
+      "isCampaign":content->isCampaign
+    },
     "breadcrumbs": {
       ${breadcrumbsQuery}
     },
diff --git a/web/lib/queries/videoPlayerFields.ts b/web/lib/queries/videoPlayerFields.ts
index 4d66cb1b9..d604cc699 100644
--- a/web/lib/queries/videoPlayerFields.ts
+++ b/web/lib/queries/videoPlayerFields.ts
@@ -29,6 +29,8 @@ export const videoPlayerFields = /* groq */ `
   "designOptions": {
     "aspectRatio": coalesce(aspectRatio, '16:9'),
     height,
+    width,
+    useBrandTheme,
     ${background}
   },
 `
diff --git a/web/pageComponents/pageTemplates/TopicPage.tsx b/web/pageComponents/pageTemplates/TopicPage.tsx
index a3c8798b9..1f4a0bb74 100644
--- a/web/pageComponents/pageTemplates/TopicPage.tsx
+++ b/web/pageComponents/pageTemplates/TopicPage.tsx
@@ -1,3 +1,4 @@
+import { toPlainText } from '@portabletext/react'
 import useSharedTitleStyles from '../../lib/hooks/useSharedTitleStyles'
 import { HeroTypes, TopicPageSchema } from '../../types/types'
 import Seo from '../shared/Seo'
@@ -13,6 +14,7 @@ type TopicPageProps = {
 const TopicPage = ({ data }: TopicPageProps) => {
   const titleStyles = useSharedTitleStyles(data?.hero?.type, data?.content?.[0])
   const { breadcrumbs } = data
+
   return (
     <>
       <Seo
@@ -22,7 +24,11 @@ const TopicPage = ({ data }: TopicPageProps) => {
         pageTitle={data?.title}
       />
       <main>
-        <SharedBanner title={data.title} hero={data.hero} captionBg={titleStyles.background?.backgroundColor} />
+        {data.isCampaign ? (
+          <h1 className="sr-only">{toPlainText(data.title)}</h1>
+        ) : (
+          <SharedBanner title={data.title} hero={data.hero} captionBg={titleStyles.background?.backgroundColor} />
+        )}
         {breadcrumbs && breadcrumbs?.enableBreadcrumbs && (
           <Breadcrumbs
             background={titleStyles.background}
@@ -34,7 +40,7 @@ const TopicPage = ({ data }: TopicPageProps) => {
           />
         )}
 
-        {data.hero.type !== HeroTypes.DEFAULT && (
+        {data.hero.type !== HeroTypes.DEFAULT && !data?.isCampaign && (
           <SharedTitle sharedTitle={data.title} background={titleStyles.background} />
         )}
         <PageContent data={data} />
diff --git a/web/pageComponents/pageTemplates/shared/SharedPageContent.tsx b/web/pageComponents/pageTemplates/shared/SharedPageContent.tsx
index 0179d2771..91c0e6a0c 100644
--- a/web/pageComponents/pageTemplates/shared/SharedPageContent.tsx
+++ b/web/pageComponents/pageTemplates/shared/SharedPageContent.tsx
@@ -51,11 +51,15 @@ import {
   TextTeaserData,
   KeyNumbersData,
   CardsListData,
+  GridData,
+  CampaignBannerData,
 } from '../../../types/types'
 import { getColorForTheme } from '../../shared/textTeaser/theme'
+import Grid from '@sections/Grid/Grid'
+import { CampaignBanner } from '@sections/CampaignBanner'
 
 // How could we do this for several different component types?
-type ComponentProps =
+export type ComponentProps =
   | TeaserData
   | TextBlockData
   | FullWidthImageData
@@ -108,8 +112,10 @@ const isWhiteColorBackground = (componentsDO: any, component: ComponentProps) =>
 
 const isColoredBackgroundAndNotWhite = (componentsDO: any, isWhiteColor: boolean) => {
   return (
-    (componentsDO?.type === 'backgroundColor' || componentsDO?.backgroundColor || componentsDO?.background) &&
-    !isWhiteColor
+    ((componentsDO?.type === 'backgroundColor' || componentsDO?.backgroundColor || componentsDO?.background) &&
+      !isWhiteColor) ||
+    componentsDO?.type === 'backgroundImage' ||
+    componentsDO?.backgroundImage?.image
   )
 }
 
@@ -307,6 +313,10 @@ export const PageContent = ({ data }: PageContentProps) => {
         return (
           <CardsList key={c.id} data={c as CardsListData} anchor={anchorReference} className={topSpacingClassName} />
         )
+      case 'grid':
+        return <Grid key={c.id} data={c as GridData} anchor={anchorReference} className={topSpacingClassName} />
+      case 'campaignBanner':
+        return <CampaignBanner key={c.id} data={c as CampaignBannerData} />
       default:
         return null
     }
diff --git a/web/pageComponents/shared/Teaser.tsx b/web/pageComponents/shared/Teaser.tsx
index 085a55c99..20d50f357 100644
--- a/web/pageComponents/shared/Teaser.tsx
+++ b/web/pageComponents/shared/Teaser.tsx
@@ -5,7 +5,7 @@ import { getUrlFromAction, urlFor } from '../../common/helpers'
 import Img from 'next/image'
 import Image from './SanityImage'
 import type { TeaserData, ImageWithAlt } from '../../types/types'
-import { ReadMoreLink } from '../../core/Link'
+import { ReadMoreLink, ResourceLink } from '../../core/Link'
 import { Heading } from '../../core/Typography'
 import { getLocaleFromName } from '../../lib/localization'
 
@@ -44,16 +44,15 @@ const TeaserImage = ({ image }: { image: ImageWithAlt }) => {
 }
 
 const Teaser = ({ data, anchor }: TeaserProps) => {
-  const { title, overline, text, image, action, designOptions, isBigText } = data
+  const { title, overline, text, image, actions, designOptions, isBigText, useResourceLinks } = data
   const { imageSize, imagePosition, ...restOptions } = designOptions
 
-  if ([title, overline, text, image?.asset, action].every((i) => !i)) {
+  if ([title, overline, text, image?.asset, actions].every((i) => !i)) {
     return null
   }
 
-  const url = action && getUrlFromAction(action)
-
   const isSvg = image?.extension === 'svg'
+
   return (
     <BackgroundContainer {...restOptions} id={anchor} renderFragmentWhenPossible>
       <StyledEnvisTeaser imagePosition={imagePosition}>
@@ -80,14 +79,33 @@ const Teaser = ({ data, anchor }: TeaserProps) => {
               {text && <IngressText value={text} />}
             </>
           )}
-          {action && url && (
-            <ReadMoreLink
-              href={url as string}
-              {...(action.link?.lang && { locale: getLocaleFromName(action.link?.lang) })}
-              type={action.type}
-            >
-              {`${action.label} ${action.extension ? `(${action.extension.toUpperCase()})` : ''}`}
-            </ReadMoreLink>
+          {actions && (
+            <div className="flex flex-col gap-8">
+              {actions?.map((action) => {
+                const url = action && getUrlFromAction(action)
+
+                return useResourceLinks ? (
+                  <ResourceLink
+                    href={url as string}
+                    {...(action.link?.lang && { locale: getLocaleFromName(action.link?.lang) })}
+                    type={action.type}
+                    key={action.id}
+                    className="w-fit"
+                  >
+                    {`${action.label} ${action.extension ? `(${action.extension.toUpperCase()})` : ''}`}
+                  </ResourceLink>
+                ) : (
+                  <ReadMoreLink
+                    href={url as string}
+                    key={action.id}
+                    {...(action.link?.lang && { locale: getLocaleFromName(action.link?.lang) })}
+                    type={action.type}
+                  >
+                    {`${action.label} ${action.extension ? `(${action.extension.toUpperCase()})` : ''}`}
+                  </ReadMoreLink>
+                )
+              })}
+            </div>
           )}
         </Content>
       </StyledEnvisTeaser>
diff --git a/web/pageComponents/shared/VideoPlayer.tsx b/web/pageComponents/shared/VideoPlayer.tsx
index 888f50d16..3045d3891 100644
--- a/web/pageComponents/shared/VideoPlayer.tsx
+++ b/web/pageComponents/shared/VideoPlayer.tsx
@@ -66,16 +66,23 @@ type VideoJsComponentType = {
   video: VideoType
   videoControls: VideoControlsType
   designOptions: VideoDesignOptionsType
+  height?: string
+  useFillMode?: boolean
 }
 
-export const VideoJsComponent = ({ video, videoControls, designOptions }: VideoJsComponentType) => {
+export const VideoJsComponent = ({
+  video,
+  videoControls,
+  designOptions,
+  useFillMode = false,
+}: VideoJsComponentType) => {
   const { width: w, height: h } = getThumbnailRatio(designOptions.aspectRatio)
   return (
     <figure
-      className={
-        getHeightWidth(designOptions.aspectRatio, designOptions.height) +
-        ' [&video::-webkit-media-controls-fullscreen-button]:hidden relative mx-auto my-0'
-      }
+      className={`
+        ${useFillMode ? 'h-full w-full' : getHeightWidth(designOptions.aspectRatio, designOptions.height)} 
+        [&video::-webkit-media-controls-fullscreen-button]:hidden relative mx-auto my-0
+        `}
     >
       <DynamicVideoJsComponent
         className="object-cover"
@@ -84,6 +91,8 @@ export const VideoJsComponent = ({ video, videoControls, designOptions }: VideoJ
         poster={urlFor(video.thumbnail).width(w).height(h).url()}
         playsInline
         aspectRatio={designOptions.aspectRatio}
+        useBrandTheme={designOptions?.useBrandTheme}
+        useFillMode={useFillMode}
         {...videoControls}
       />
     </figure>
@@ -92,9 +101,15 @@ export const VideoJsComponent = ({ video, videoControls, designOptions }: VideoJ
 
 const VideoPlayer = ({ anchor, data, className }: { data: VideoPlayerData; anchor?: string; className?: string }) => {
   const { title, ingress, action, video, videoControls, designOptions } = data
+  const { width } = designOptions
   return (
     <BackgroundContainer {...designOptions.background} id={anchor} renderFragmentWhenPossible>
-      <div className={twMerge(`pb-page-content px-layout-lg max-w-viewport mx-auto`, className)}>
+      <div
+        className={twMerge(
+          `pb-page-content ${width === 'extraWide' ? 'px-layout-md' : 'px-layout-lg'} max-w-viewport mx-auto`,
+          className,
+        )}
+      >
         {title && <Heading value={title} as="h2" variant="xl" className="mb-2 pb-2" />}
         {ingress && <IngressText value={ingress} className="mb-lg" />}
         {action && action.label && <CallToActions callToActions={[action]} overrideButtonStyle={false} />}
diff --git a/web/pageComponents/shared/portableText/Blocks.tsx b/web/pageComponents/shared/portableText/Blocks.tsx
index 3ba67f07e..96411cddb 100644
--- a/web/pageComponents/shared/portableText/Blocks.tsx
+++ b/web/pageComponents/shared/portableText/Blocks.tsx
@@ -23,6 +23,10 @@ type TypeProps = {
 const defaultSerializers = {
   block: {
     smallText: ({ children }: TypeProps) => <p className="text-sm">{children}</p>,
+    largeText: ({ children }: TypeProps) => <p className="text-2xl leading-snug">{children}</p>,
+    extraLargeText: ({ children }: TypeProps) => {
+      return <p className={`text-4xl lg:text-5xl 2xl:text-8xl font-medium leading-planetary`}>{children}</p>
+    },
   },
   types: {
     //@ts-ignore
@@ -47,7 +51,7 @@ const defaultSerializers = {
   },
 }
 
-type BlockProps = {
+export type BlockProps = {
   /**
    * Override default block serializers
    */
@@ -82,9 +86,15 @@ type BlockProps = {
 const inlineBlockTypes = ['block', 'positionedInlineImage', 'pullQuote', 'basicIframe']
 
 //@ts-ignore
-export default function Blocks({ value, components, proseClassName = '', className = '', id }: BlockProps) {
+export default function Blocks({
+  value,
+  blocks: blocksComponents,
+  components,
+  proseClassName = '',
+  className = '',
+  id,
+}: BlockProps) {
   let div: PortableTextBlock[] = []
-
   return (
     <>
       {
@@ -107,7 +117,12 @@ export default function Blocks({ value, components, proseClassName = '', classNa
                   value={value}
                   //@ts-ignore
                   components={{
-                    ...defaultSerializers,
+                    block: {
+                      ...defaultSerializers.block,
+                      ...blocksComponents,
+                    },
+                    types: { ...defaultSerializers.types },
+                    marks: { ...defaultSerializers.marks },
                   }}
                 />
               </div>
diff --git a/web/pageComponents/shared/textTeaser/theme.ts b/web/pageComponents/shared/textTeaser/theme.ts
index 097750938..65f5f9817 100644
--- a/web/pageComponents/shared/textTeaser/theme.ts
+++ b/web/pageComponents/shared/textTeaser/theme.ts
@@ -1,13 +1,12 @@
+import { ColorKeyTokens } from '../../../styles/colorKeyToUtilityMap'
 import { BackgroundColours } from '../../../types'
 
 export type ThemeColors = {
   background: BackgroundColours
   highlight?: string
+  backgroundUtility?: string
+  textUtility?: string
   dark?: boolean
-  utility?: {
-    background?: string
-    highlight?: string
-  }
 }
 //Keep in sync with sanityv3/schemas/components/ThemeSelector/themeColors
 /*export const getColorForTheme = (pattern: number): ThemeColors => {
@@ -94,24 +93,77 @@ export type ThemeColors = {
 export const getColorForTheme = (pattern: number): ThemeColors => {
   switch (pattern) {
     case 1:
-      return { background: 'Moss Green Light' }
+      return {
+        background: 'Moss Green Light',
+        backgroundUtility: 'bg-moss-green-50',
+        textUtility: 'text-slate-80',
+      }
     case 2:
-      return { background: 'Spruce Wood' }
+      return {
+        background: 'Spruce Wood',
+        backgroundUtility: 'bg-spruce-wood-90',
+        textUtility: 'text-slate-80',
+      }
     case 3:
-      return { background: 'Mist Blue' }
+      return {
+        background: 'Mist Blue',
+        backgroundUtility: 'bg-mist-blue-100',
+        textUtility: 'text-slate-80',
+      }
     case 4:
-      return { background: 'Mid Yellow' }
+      return {
+        background: 'Mid Yellow',
+        backgroundUtility: 'bg-yellow-50',
+        textUtility: 'text-slate-80',
+      }
     case 5:
-      return { background: 'Mid Orange', highlight: 'black' }
+      return {
+        background: 'Mid Orange',
+        highlight: 'black',
+        backgroundUtility: 'bg-orange-50',
+        textUtility: 'text-slate-80',
+      }
     case 6:
-      return { background: 'Mid Blue', highlight: 'var(--bg-mid-orange)' }
+      return {
+        background: 'Mid Blue',
+        highlight: 'var(--bg-mid-orange)',
+        backgroundUtility: 'bg-blue-50',
+        textUtility: 'text-orange-50',
+      }
     case 7:
-      return { background: 'Mid Blue', highlight: 'var(--bg-mid-yellow)' }
+      return {
+        background: 'Mid Blue',
+        backgroundUtility: 'bg-blue-50',
+        highlight: 'var(--bg-mid-yellow)',
+        textUtility: 'text-yellow-50',
+      }
     case 8:
-      return { background: 'Mid Green', highlight: 'black' }
+      return {
+        background: 'Mid Blue',
+        backgroundUtility: 'bg-blue-50',
+        highlight: 'var(--bg-white)',
+        textUtility: 'text-white-100',
+      }
+    case 9:
+      return {
+        background: 'Mid Green',
+        backgroundUtility: 'bg-green-50',
+        highlight: 'black',
+        textUtility: 'text-slate-80',
+      }
+    case 10:
+      return {
+        background: 'Mist Blue',
+        backgroundUtility: 'bg-mist-blue-100',
+        textUtility: 'text-blue-50',
+      }
 
     case 0:
     default:
-      return { background: 'White' }
+      return {
+        background: 'White',
+        backgroundUtility: 'bg-white-100',
+        textUtility: 'text-energy-red-100',
+      }
   }
 }
diff --git a/web/pageComponents/topicPages/Accordion/AccordionBlock.tsx b/web/pageComponents/topicPages/Accordion/AccordionBlock.tsx
index f5610d426..a95d1bb8e 100644
--- a/web/pageComponents/topicPages/Accordion/AccordionBlock.tsx
+++ b/web/pageComponents/topicPages/Accordion/AccordionBlock.tsx
@@ -7,7 +7,7 @@ import { FAQPageJsonLd } from 'next-seo'
 
 import type { AccordionData, AccordionListData } from '../../../types/types'
 import { toPlainText } from '@portabletext/react'
-import { Heading } from '../../../core/Typography'
+import { Heading, Typography } from '../../../core/Typography'
 import { twMerge } from 'tailwind-merge'
 
 export const StyledTextBlockWrapper = styled(BackgroundContainer)<{ id: string | undefined }>`
@@ -38,6 +38,7 @@ const buildJsonLdElements = (data: AccordionListData[]) => {
 
 const AccordionBlock = ({ data, anchor, className }: AccordionBlockProps) => {
   const { title, ingress, designOptions, accordion, id, image, enableStructuredMarkup } = data
+
   return (
     <>
       <StyledTextBlockWrapper {...designOptions} id={anchor || data.anchor} renderFragmentWhenPossible>
@@ -52,7 +53,13 @@ const AccordionBlock = ({ data, anchor, className }: AccordionBlockProps) => {
               <Img image={image} maxWidth={200} aspectRatio={Ratios.ONE_TO_ONE} />
             </div>
           )}
-          {title && <Heading value={title} as="h2" variant="xl" className="mb-2" />}
+          {Array.isArray(title) ? (
+            <Heading value={title} as="h2" variant="xl" className="mb-2" />
+          ) : (
+            <Typography as="h2" variant="xl" className="mb-2">
+              {title}
+            </Typography>
+          )}
           {ingress && <IngressText value={ingress} />}
           {accordion && accordion.length > 0 && (
             <Accordion data={accordion} id={id} hasTitle={!!title} queryParamName={id} />
diff --git a/web/pageComponents/topicPages/TextBlock.tsx b/web/pageComponents/topicPages/TextBlock.tsx
index 83b4dfdf9..4d8842ff1 100644
--- a/web/pageComponents/topicPages/TextBlock.tsx
+++ b/web/pageComponents/topicPages/TextBlock.tsx
@@ -22,7 +22,7 @@ type TextBlockProps = {
   className?: string
 }
 
-const TextBlock = ({ data, anchor, className }: TextBlockProps) => {
+const TextBlock = ({ data, anchor, className = '' }: TextBlockProps) => {
   const {
     image,
     overline,
@@ -34,6 +34,7 @@ const TextBlock = ({ data, anchor, className }: TextBlockProps) => {
     splitList,
     overrideButtonStyle = false,
     isBigText,
+    useBrandTheme = false,
   } = data
   /* Don't render the component if it only has an eyebrow */
   if (!title && !ingress && !text && (!callToActions || callToActions.length === 0)) return null
@@ -58,16 +59,26 @@ const TextBlock = ({ data, anchor, className }: TextBlockProps) => {
     )
   }
 
+  let bgContainerOptions = designOptions
+  if (useBrandTheme) {
+    bgContainerOptions = {
+      background: {
+        type: 'backgroundColor',
+        backgroundUtility: 'white-100',
+        dark: false,
+      },
+    }
+  }
+
   return (
-    <StyledTextBlockWrapper {...designOptions} id={anchor || data.anchor} renderFragmentWhenPossible>
+    <StyledTextBlockWrapper {...bgContainerOptions} id={anchor} renderFragmentWhenPossible>
       <div
         className={`flex flex-col gap-6 ${
           designOptions?.background?.type === 'backgroundImage' ? backgroundImageContentClassNames : contentClassNames
         }`}
       >
-        {isBigText ? (
-          title && <Heading value={title} as="h2" variant="2xl" />
-        ) : (
+        {isBigText && title && <Heading value={title} as="h2" variant="3xl" />}
+        {!isBigText && (
           <>
             {image?.asset && (
               <div className="w-[300px]">
@@ -75,12 +86,21 @@ const TextBlock = ({ data, anchor, className }: TextBlockProps) => {
               </div>
             )}
             {overline ? (
-              <hgroup className="flex flex-col gap-2 mb-1">
+              <hgroup className={`flex flex-col gap-2 mb-1 ${useBrandTheme ? 'text-energy-red-100' : ''}`}>
                 <Eyebrow>{overline}</Eyebrow>
                 {title && <Heading value={title} as="h2" variant="xl" />}
               </hgroup>
             ) : (
-              <>{title && <Heading value={title} as="h2" variant="xl" className="mb-2" />}</>
+              <>
+                {title && (
+                  <Heading
+                    value={title}
+                    as="h2"
+                    variant="xl"
+                    className={`mb-2 ${useBrandTheme ? 'text-energy-red-100' : ''}`}
+                  />
+                )}
+              </>
             )}
             {ingress && <IngressText value={ingress} />}
           </>
diff --git a/web/sections/CallToActions/index.tsx b/web/sections/CallToActions/index.tsx
index 5123bd1b6..f4ace828a 100644
--- a/web/sections/CallToActions/index.tsx
+++ b/web/sections/CallToActions/index.tsx
@@ -6,7 +6,7 @@ import { getLocaleFromName } from '../../lib/localization'
 
 type CallToActionsProps = {
   callToActions: LinkData[]
-  overrideButtonStyle: boolean
+  overrideButtonStyle?: boolean
   splitList?: boolean
 }
 
diff --git a/web/sections/CampaignBanner/CampaignBanner.tsx b/web/sections/CampaignBanner/CampaignBanner.tsx
new file mode 100644
index 000000000..08c7c2e78
--- /dev/null
+++ b/web/sections/CampaignBanner/CampaignBanner.tsx
@@ -0,0 +1,96 @@
+import { forwardRef, HTMLAttributes } from 'react'
+import { twMerge } from 'tailwind-merge'
+import { CampaignBannerData } from '../../types/types'
+import Blocks from '../../pageComponents/shared/portableText/Blocks'
+import { PortableTextBlock } from '@portabletext/types'
+import isEmpty from '../../pageComponents/shared/portableText/helpers/isEmpty'
+import { BlockType } from '../../pageComponents/shared/portableText/helpers/defaultSerializers'
+import { colorKeyToUtilityMap } from '../../styles/colorKeyToUtilityMap'
+import { urlFor } from '../../common/helpers'
+
+/* eslint-disable @typescript-eslint/ban-ts-comment */
+const campaignTitleBlocks: BlockType = {
+  //@ts-ignore
+  smallText: ({ children }: PortableTextBlock) => <p className="text-sm">{<>{children}</>}</p>,
+  //@ts-ignore
+  largeText: ({ children }: PortableTextBlock) => (
+    <p className="block w-fit text-pretty text-2xl leading-none bg-white-100 rounded-sm">{<>{children}</>}</p>
+  ),
+  //@ts-ignore
+  extraLargeText: ({ children }: PortableTextBlock) => {
+    return (
+      <p className="block w-fit text-pretty text-4xl leading-none lg:text-8xl font-semibold mt-4 bg-white-100 rounded-sm ">
+        {<>{children}</>}
+      </p>
+    )
+  },
+  //@ts-ignore
+  normal: ({ children }: PortableTextBlock) => {
+    if (isEmpty(children)) return null
+    return (
+      <p>
+        <>{children}</>
+      </p>
+    )
+  },
+}
+/* eslint-enable @typescript-eslint/ban-ts-comment */
+
+export type CampaignBannerProps = {
+  data: CampaignBannerData
+  className?: string
+} & HTMLAttributes<HTMLElement>
+
+const CampaignBanner = forwardRef<HTMLElement, CampaignBannerProps>(function CampaignBanner({ data, className }, ref) {
+  const { title, designOptions } = data
+  const { background } = designOptions
+  const { backgroundImage, backgroundUtility, dark } = background
+
+  const bgImageClassNames = `[container:inline-size]
+  relative
+  w-full
+  bg-local
+  bg-center
+  bg-no-repeat
+  bg-cover
+  mb-18
+  pt-24
+  pb-40
+  lg:pb-52
+  2xl:pb-64
+`
+
+  const bgColor = backgroundUtility ? colorKeyToUtilityMap[backgroundUtility].background : ''
+  const backgroundClassNames = twMerge(
+    `${dark ? 'dark' : ''}
+    ${backgroundImage?.image ? bgImageClassNames : `${bgColor} pt-12 pb-12 lg:pb-18`}
+  `,
+    className,
+  )
+  const imgUrl = backgroundImage?.image ? urlFor(backgroundImage.image) : ''
+  const props = {
+    ...(backgroundImage?.image && {
+      style: {
+        backgroundImage: `url(${imgUrl})`,
+      },
+    }),
+  }
+
+  return (
+    <section ref={ref} className={`${backgroundClassNames}`} {...props}>
+      <div className={`px-layout-md mx-auto max-w-viewport`}>
+        <div className="flex justify-start">
+          <h2 className="">
+            <Blocks
+              value={title}
+              proseClassName="prose-campaign"
+              blocks={campaignTitleBlocks}
+              className="w-fit max-w-prose text-energy-red-100"
+            />
+          </h2>
+        </div>
+      </div>
+    </section>
+  )
+})
+export default CampaignBanner
diff --git a/web/sections/CampaignBanner/index.ts b/web/sections/CampaignBanner/index.ts
new file mode 100644
index 000000000..b132edd2a
--- /dev/null
+++ b/web/sections/CampaignBanner/index.ts
@@ -0,0 +1,2 @@
+//"use client";
+export { default as CampaignBanner, type CampaignBannerProps } from './CampaignBanner'
diff --git a/web/sections/Grid/Grid.tsx b/web/sections/Grid/Grid.tsx
new file mode 100644
index 000000000..4a039ecac
--- /dev/null
+++ b/web/sections/Grid/Grid.tsx
@@ -0,0 +1,54 @@
+import { twMerge } from 'tailwind-merge'
+import { GridData, GridRowType } from '../../types/types'
+import { HTMLAttributes, forwardRef } from 'react'
+import Span3 from './Span3'
+import Span2And1 from './Span2And1'
+import ThreeColumns from './ThreeColumns'
+
+export type GridProps = {
+  data: GridData
+  anchor?: string
+  className?: string
+} & HTMLAttributes<HTMLElement>
+
+const Grid = forwardRef<HTMLElement, GridProps>(function Grid({ data, anchor, className = '', ...rest }, ref) {
+  const { gridRows = [] } = data
+  const getRowType = (row: GridRowType) => {
+    switch (row?.type) {
+      case 'span3':
+        return <Span3 key={row?.id} data={row} />
+      case 'span2and1':
+        return <Span2And1 key={row?.id} data={row} />
+      case 'threeColumns':
+        return <ThreeColumns key={row?.id} data={row} />
+      default:
+        break
+    }
+  }
+  return (
+    <section
+      ref={ref}
+      className={twMerge(
+        `px-layout-md 
+        max-w-[2200px]
+        pb-page-content
+        mx-auto
+        w-full
+        grid
+        auto-rows-[minmax(auto,_600px)]
+        grid-cols-1
+        lg:grid-cols-3
+        `,
+        className,
+      )}
+      id={anchor}
+      {...rest}
+    >
+      {gridRows.map((row) => {
+        return getRowType(row)
+      })}
+    </section>
+  )
+})
+
+export default Grid
diff --git a/web/sections/Grid/GridFigure.tsx b/web/sections/Grid/GridFigure.tsx
new file mode 100644
index 000000000..662596d12
--- /dev/null
+++ b/web/sections/Grid/GridFigure.tsx
@@ -0,0 +1,19 @@
+import Image from '../../pageComponents/shared/SanityImage'
+import type { FigureData } from '../../types/types'
+
+type GridFigureProps = {
+  data: FigureData
+  className?: string
+}
+
+const GridFigure = ({ data }: GridFigureProps) => {
+  const { figure } = data
+  const { image } = figure
+  return (
+    <div className="relative w-full h-full">
+      <Image image={image} fill sizes="(max-width: 800px) 100vw, 800px" className="object-cover h-full w-auto" />
+    </div>
+  )
+}
+
+export default GridFigure
diff --git a/web/sections/Grid/GridLinkArrow.tsx b/web/sections/Grid/GridLinkArrow.tsx
new file mode 100644
index 000000000..4488dd511
--- /dev/null
+++ b/web/sections/Grid/GridLinkArrow.tsx
@@ -0,0 +1,64 @@
+/* eslint-disable @typescript-eslint/ban-ts-comment */
+import { twMerge } from 'tailwind-merge'
+import { getUrlFromAction } from '../../common/helpers'
+import { BaseLink } from '@core/Link'
+import { getLocaleFromName } from '../../lib/localization'
+import { ArrowRight } from '../../icons'
+import { LinkData } from '../../types/types'
+import { getColorForTheme } from '../../pageComponents/shared/textTeaser/theme'
+
+type GridLinkArrowProps = {
+  theme?: number
+  action?: LinkData
+  className?: string
+}
+
+const GridLinkArrow = ({ theme, action, className }: GridLinkArrowProps) => {
+  const url = action && getUrlFromAction(action)
+
+  const { textUtility } = getColorForTheme(theme ?? 0)
+
+  const variantClassName = () => {
+    switch (theme) {
+      case 0:
+        return 'text-energy-red-100 hover:bg-energy-red-100 hover:text-white-100 focus-visible:bg-energy-red-100 focus-visible:text-white-100'
+      case 8:
+        return `text-white-100 hover:bg-white-100 hover:text-blue-50 focus-visible:bg-white-100 focus-visible:text-blue-50`
+      case 10:
+      default:
+        return `${theme !== null ? textUtility : ''} hover:bg-white-100 hover:${
+          theme !== null ? textUtility : ''
+        } focus-visible:bg-white-100 focus-visible:${theme !== null ? textUtility : ''}`
+      //return 'text-white-100 hover:bg-white-100 hover:text-slate-80 focus-visible:bg-white-100 focus-visible:text-slate-80'
+    }
+  }
+
+  return (
+    <>
+      {action && url && (
+        <div className={twMerge(`absolute bottom-0 right-0 pt-4 3xl:pt-12 w-full flex justify-end`, className)}>
+          <BaseLink
+            href={url as string}
+            {...(action.link?.lang && { locale: getLocaleFromName(action.link?.lang) })}
+            type={action.type}
+            className={`group
+            py-2
+            px-4
+            focus:outline-none 
+            ${variantClassName()}
+            focus-visible:envis-outline
+            dark:focus-visible:envis-outline
+             `}
+          >
+            <span className="sr-only">{`${action.label} ${
+              action.extension ? `(${action.extension.toUpperCase()})` : ''
+            }`}</span>
+            <ArrowRight className={`w-10 h-10`} />
+          </BaseLink>
+        </div>
+      )}
+    </>
+  )
+}
+
+export default GridLinkArrow
diff --git a/web/sections/Grid/GridTeaser.tsx b/web/sections/Grid/GridTeaser.tsx
new file mode 100644
index 000000000..ea80c7f26
--- /dev/null
+++ b/web/sections/Grid/GridTeaser.tsx
@@ -0,0 +1,91 @@
+/* eslint-disable @typescript-eslint/ban-ts-comment */
+import { forwardRef, HTMLAttributes } from 'react'
+import { twMerge } from 'tailwind-merge'
+import Img from 'next/image'
+import { GridTeaserData } from '../../types/types'
+import { urlFor } from '../../common/helpers'
+import { RowType } from './mapGridContent'
+import GridLinkArrow from './GridLinkArrow'
+import { getColorForTheme } from '../../pageComponents/shared/textTeaser/theme'
+import Blocks from '../../pageComponents/shared/portableText/Blocks'
+
+export type GridTeaserProps = {
+  data: GridTeaserData
+  rowType?: RowType
+  className?: string
+} & HTMLAttributes<HTMLDivElement>
+
+export const GridTeaser = forwardRef<HTMLDivElement, GridTeaserProps>(function GridTeaser({ data, rowType }, ref) {
+  const { image, action, content, quote, author, authorTitle, theme } = data
+  const imageSrc = urlFor(image).size(1200, 800).auto('format').toString()
+  const altTag = image?.isDecorative ? '' : image?.alt || ''
+
+  const { backgroundUtility, textUtility } = getColorForTheme(theme ?? 0)
+
+  return (
+    <div
+      ref={ref}
+      className={twMerge(`
+      h-full
+      grid
+      grid-rows-2
+      lg:grid-rows-[250px_1fr]
+      ${String(rowType) === 'span3' ? 'lg:grid-cols-[40%_60%] lg:grid-rows-1' : ''}
+      ${theme !== null ? backgroundUtility : ''}
+      `)}
+    >
+      {image && (
+        <div className="relative">
+          <Img
+            src={imageSrc}
+            alt={altTag}
+            style={{ objectFit: 'cover' }}
+            fill
+            role={image?.isDecorative ? 'presentation' : undefined}
+          />
+        </div>
+      )}
+
+      <div
+        className={`relative h-full flex flex-col justify-start items-center ${action ? '' : ''} ${
+          theme !== null ? textUtility : ''
+        } `}
+      >
+        <div className={`px-10 flex flex-col gap-6 pb-6 pt-6 ${rowType !== 'span3' ? 'lg:pt-8 lg:pb-0' : 'lg:pt-16'} `}>
+          {content && (
+            <Blocks
+              value={content}
+              proseClassName="prose-campaign"
+              className={`flex flex-col gap-4 ${theme !== null ? textUtility : ''}`}
+            />
+          )}
+          {quote && (
+            <figure className="px-1 flex flex-col">
+              <div className="h-full">
+                <svg
+                  fill="currentColor"
+                  width="36px"
+                  height="36px"
+                  viewBox="0 0 48 48"
+                  aria-hidden={true}
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <title>Quote symbol</title>
+                  <path d="M24.3178 27.4196C24.3178 20.9682 29.485 14.2193 37.5942 12.7059L40.9409 15.5294C38.0002 16.5773 33.3736 20.0696 33.0856 22.5845C36.3927 23.0764 38.9218 25.7807 38.9218 29.046C38.9218 33.0391 35.4912 35.2941 32.0195 35.2941C28.0166 35.2941 24.3178 32.4016 24.3178 27.4196ZM7.05859 27.4196C7.05859 20.9682 12.2257 14.2193 20.3349 12.7059L23.3221 15.5294C20.3814 16.5773 16.1144 20.0696 15.8263 22.5845C19.1334 23.0764 21.6626 25.7807 21.6626 29.046C21.6626 33.0391 18.232 35.2941 14.7602 35.2941C10.7574 35.2941 7.05859 32.4016 7.05859 27.4196Z" />
+                </svg>
+                {quote && <p className="text-md leading-normal text-ellipsis line-clamp-4">{quote}</p>}
+              </div>
+              <figcaption className="pt-6 w-full flex justify-end">
+                <div className="w-fit flex flex-col items-start">
+                  {author && <strong className="text-base">{author}</strong>}
+                  {authorTitle && <div className="text-sm">{authorTitle}</div>}
+                </div>
+              </figcaption>
+            </figure>
+          )}
+        </div>
+        {action && <GridLinkArrow theme={theme} action={action} />}
+      </div>
+    </div>
+  )
+})
diff --git a/web/sections/Grid/GridTextBlock.tsx b/web/sections/Grid/GridTextBlock.tsx
new file mode 100644
index 000000000..86a4f74fc
--- /dev/null
+++ b/web/sections/Grid/GridTextBlock.tsx
@@ -0,0 +1,48 @@
+import { twMerge } from 'tailwind-merge'
+import { getUrlFromAction } from '../../common/helpers'
+import GridLinkArrow from './GridLinkArrow'
+import { getColorForTheme } from '../../pageComponents/shared/textTeaser/theme'
+import { GridTextBlockData } from '../../types/types'
+import Blocks from '../../pageComponents/shared/portableText/Blocks'
+
+type GridTextBlockProps = {
+  data: GridTextBlockData
+  className?: string
+}
+
+const GridTextBlock = ({ data, className }: GridTextBlockProps) => {
+  const { action, content, textAlignment = 'left', theme } = data
+  const url = action && getUrlFromAction(action)
+
+  const contentAlignment = {
+    center: 'justify-center text-center',
+    right: 'justify-center text-start xl:items-end xl:text-end xl:ml-auto',
+    left: 'justify-center text-start xl:items-start xl:mr-auto',
+  }
+
+  const contentClassNames = twMerge(`${contentAlignment[textAlignment]}`, className)
+  const { backgroundUtility, textUtility } = getColorForTheme(theme ?? 0)
+
+  return (
+    <div
+      className={`relative w-full h-full flex flex-col items-center ${
+        action ? 'pt-16 justify-between' : 'py-12 justify-center'
+      } ${theme !== null ? backgroundUtility : ''} `}
+    >
+      {content && (
+        <div className="px-12 flex flex-col justify-center">
+          <Blocks
+            value={content}
+            proseClassName="prose-campaign"
+            className={`flex flex-col gap-sm ${action ? '' : ''} ${contentClassNames} ${
+              theme !== null ? textUtility : ''
+            }`}
+          />
+        </div>
+      )}
+      {action && url && <GridLinkArrow theme={theme} action={action} />}
+    </div>
+  )
+}
+
+export default GridTextBlock
diff --git a/web/sections/Grid/Span2And1.tsx b/web/sections/Grid/Span2And1.tsx
new file mode 100644
index 000000000..e9c70c30c
--- /dev/null
+++ b/web/sections/Grid/Span2And1.tsx
@@ -0,0 +1,30 @@
+import { twMerge } from 'tailwind-merge'
+import { Fragment, HTMLAttributes, forwardRef } from 'react'
+import { mapGridContent } from './mapGridContent'
+
+export type Span2And1Props = {
+  data: any
+  className?: string
+} & HTMLAttributes<HTMLDivElement>
+
+const Span2And1 = forwardRef<HTMLDivElement, Span2And1Props>(function Span2And1({ data, className = '' }, ref) {
+  const { singleColumn, span2, alignSpan2Right = false } = data
+  const borderStyling = `border border-moss-green-60`
+  return (
+    <Fragment ref={ref}>
+      {alignSpan2Right ? (
+        <>
+          <div className={twMerge(borderStyling, className)}>{mapGridContent(singleColumn?.content)}</div>
+          <div className={twMerge(`lg:col-span-2 ${borderStyling}`, className)}>{mapGridContent(span2?.content)}</div>
+        </>
+      ) : (
+        <>
+          <div className={twMerge(`lg:col-span-2 ${borderStyling}`, className)}>{mapGridContent(span2?.content)}</div>
+          <div className={twMerge(borderStyling, className)}>{mapGridContent(singleColumn?.content)}</div>
+        </>
+      )}
+    </Fragment>
+  )
+})
+
+export default Span2And1
diff --git a/web/sections/Grid/Span3.tsx b/web/sections/Grid/Span3.tsx
new file mode 100644
index 000000000..0870d582a
--- /dev/null
+++ b/web/sections/Grid/Span3.tsx
@@ -0,0 +1,29 @@
+import { twMerge } from 'tailwind-merge'
+import { HTMLAttributes, forwardRef } from 'react'
+import { mapGridContent } from './mapGridContent'
+
+export type Span3Props = {
+  data: any
+  className?: string
+} & HTMLAttributes<HTMLDivElement>
+
+const Span3 = forwardRef<HTMLDivElement, Span3Props>(function Span3({ data, className = '', ...rest }, ref) {
+  return (
+    <div
+      ref={ref}
+      className={twMerge(
+        `lg:col-span-3 
+        w-full
+        h-full
+        border border-moss-green-60
+        `,
+        className,
+      )}
+      {...rest}
+    >
+      {mapGridContent(data?.content, 'span3')}
+    </div>
+  )
+})
+
+export default Span3
diff --git a/web/sections/Grid/ThreeColumns.tsx b/web/sections/Grid/ThreeColumns.tsx
new file mode 100644
index 000000000..e046724ca
--- /dev/null
+++ b/web/sections/Grid/ThreeColumns.tsx
@@ -0,0 +1,29 @@
+import { twMerge } from 'tailwind-merge'
+import { Fragment, HTMLAttributes, forwardRef } from 'react'
+import { mapGridContent } from './mapGridContent'
+
+export type ThreeColumnsProps = {
+  data: any
+  className?: string
+} & HTMLAttributes<HTMLDivElement>
+
+const ThreeColumns = forwardRef<HTMLDivElement, ThreeColumnsProps>(function ThreeColumns(
+  { data, className = '' },
+  ref,
+) {
+  const { columns = [] } = data
+  const borderStyling = `w-full h-full border border-moss-green-60`
+  return (
+    <Fragment ref={ref}>
+      {columns.map((column: any) => {
+        return (
+          <div key={column?.id} className={twMerge(borderStyling, className)}>
+            {mapGridContent(column)}
+          </div>
+        )
+      })}
+    </Fragment>
+  )
+})
+
+export default ThreeColumns
diff --git a/web/sections/Grid/index.ts b/web/sections/Grid/index.ts
new file mode 100644
index 000000000..9af6487d1
--- /dev/null
+++ b/web/sections/Grid/index.ts
@@ -0,0 +1,2 @@
+//"use client";
+export { default as Grid, type GridProps } from './Grid'
diff --git a/web/sections/Grid/mapGridContent.tsx b/web/sections/Grid/mapGridContent.tsx
new file mode 100644
index 000000000..34f9acd4c
--- /dev/null
+++ b/web/sections/Grid/mapGridContent.tsx
@@ -0,0 +1,27 @@
+import { ComponentProps } from '../../pageComponents/pageTemplates/shared/SharedPageContent'
+import { FigureData, IFrameData, VideoPlayerData } from '../../types/types'
+import IFrame from '../../pageComponents/topicPages/IFrame'
+import { VideoJsComponent } from '../../pageComponents/shared/VideoPlayer'
+import GridTextBlock from './GridTextBlock'
+import { GridTeaser } from './GridTeaser'
+import GridFigure from './GridFigure'
+
+export type RowType = 'span3' | 'span2and1' | undefined
+
+export const mapGridContent = (data: ComponentProps, rowType?: RowType): React.ReactNode => {
+  switch (data.type) {
+    case 'gridTextBlock':
+      return <GridTextBlock key={data.id} data={data as any} />
+    case 'gridTeaser':
+      return <GridTeaser key={data.id} data={data as any} rowType={rowType} />
+    case 'figure':
+      return <GridFigure key={data.id} data={data as FigureData} />
+    case 'iframe':
+      return <IFrame key={data.id} data={data as IFrameData} />
+    case 'videoPlayer': {
+      return <VideoJsComponent key={data.id} useFillMode {...(data as VideoPlayerData)} />
+    }
+    default:
+      return null
+  }
+}
diff --git a/web/styles/components/videojs.css b/web/styles/components/videojs.css
new file mode 100644
index 000000000..13c8f87d8
--- /dev/null
+++ b/web/styles/components/videojs.css
@@ -0,0 +1,7 @@
+/* Change all text and icon colors in the player. */
+.vjs-envis.video-js {
+}
+
+.vjs-envis .vjs-control-bar {
+  @apply bg-slate-80;
+}
diff --git a/web/styles/tailwind.css b/web/styles/tailwind.css
index 7443cdb94..c875aeda0 100644
--- a/web/styles/tailwind.css
+++ b/web/styles/tailwind.css
@@ -1,5 +1,7 @@
 @import 'tailwindcss/base';
 @import 'tailwindcss/components';
+@import 'video.js/dist/video-js.css';
+@import './components/videojs.css';
 @import 'tailwindcss/utilities';
 
 @layer utilities {
diff --git a/web/tailwind.config.cjs b/web/tailwind.config.cjs
index 6196692b4..23bedd40a 100644
--- a/web/tailwind.config.cjs
+++ b/web/tailwind.config.cjs
@@ -32,6 +32,7 @@ module.exports = {
   theme: {
     extend: {
       colors: ({ theme }) => ({
+        current: 'currentColor',
         'moss-green': {
           110: '#023f44', // colorpicked from moss-green-100 with dark overlay from Figma
           100: 'hsl(184, 100%, 17%)',
@@ -217,6 +218,7 @@ module.exports = {
         '4xl': ['clamp(calc(45.89 / 16 * 1rem), 2.16vw + 2.355rem, calc(79.225 / 16 * 1rem))'],
         //--typeScale-7
         '5xl': ['clamp(calc(51.97 / 16 * 1rem), 2.55vw + 2.64rem, calc(91.31 / 16 * 1rem))'],
+        '6xl': ['clamp(calc(58.05 / 16 * 1rem), 2.94vw + 2.925rem, calc(103.39 / 16 * 1rem))'],
       },
       fontWeight: {
         semibolder: 650,
@@ -260,6 +262,7 @@ module.exports = {
         'layout-sm': 'clamp(16px, calc(-38.3689px + 14.4984vw), 250px)',
         'layout-md': 'clamp(16px, calc(-69.4369px + 22.7832vw), 368px)',
         'layout-lg': 'clamp(16px, calc(-101.4757px + 31.3269vw), 500px)',
+        'page-content': 'theme(spacing.16)',
       },
       keyframes: {
         reveal: {
@@ -397,6 +400,16 @@ module.exports = {
             },
           },
         },
+        campaign: {
+          css: {
+            color: theme('colors.current'),
+            p: {
+              fontSize: theme('fontSize.md'),
+              marginTop: '0',
+              marginBottom: '0',
+            },
+          },
+        },
       }),
     },
   },
diff --git a/web/twMerge/index.ts b/web/twMerge/index.ts
new file mode 100644
index 000000000..bbbe35a53
--- /dev/null
+++ b/web/twMerge/index.ts
@@ -0,0 +1,17 @@
+import { extendTailwindMerge } from 'tailwind-merge'
+
+const envisTwMerge = extendTailwindMerge({
+  extend: {
+    // ↓ Add values to existing theme scale or create a new one
+    theme: {
+      padding: ['page-content', 'layout-sm', 'layout-md', 'layout-lg'],
+      margin: ['page-content', 'layout-sm', 'layout-md', 'layout-lg'],
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+      //@ts-ignore
+      maxWidth: ['viewport'],
+      minWidthh: ['viewport'],
+    },
+  },
+})
+
+export default envisTwMerge
diff --git a/web/types/types.ts b/web/types/types.ts
index 1ab5f0db8..9fd790bbf 100644
--- a/web/types/types.ts
+++ b/web/types/types.ts
@@ -7,6 +7,7 @@ import {
   SanityImageSource,
 } from '@sanity/image-url/lib/types/types'
 import { ColorKeyTokens } from '../styles/colorKeyToUtilityMap'
+import { RowType } from '@sections/Grid/mapGridContent'
 
 export type CaptionData = {
   attribution?: string
@@ -209,6 +210,8 @@ export type ContentType =
   | TwitterEmbedData
   | VideoPlayerData
   | VideoPlayerCarouselData
+  | GridData
+  | CampaignBannerData
 
 export type Breadcrumb = {
   label: string
@@ -225,6 +228,7 @@ export type PageSchema = {
   content?: ContentType[]
   id: string
   type: string
+  isCampaign?: boolean
   breadcrumbs: {
     enableBreadcrumbs: boolean
     useCustomBreadcrumbs: boolean
@@ -277,7 +281,7 @@ export type BackgroundColours =
 export type BackgroundTypes = 'backgroundColor' | 'backgroundImage'
 
 export type DesignOptions = {
-  background?: {
+  background: {
     type?: BackgroundTypes
     backgroundColor?: BackgroundColours
     backgroundImage?: ImageBackground
@@ -294,11 +298,11 @@ export type TextBlockData = {
   overline?: string
   text: PortableTextBlock[]
   isBigText?: boolean
+  useBrandTheme?: boolean
   ingress: PortableTextBlock[]
   callToActions?: LinkData[]
   splitList?: boolean
   overrideButtonStyle?: boolean
-  anchor?: string
   designOptions: DesignOptions
 }
 
@@ -316,8 +320,9 @@ export type TeaserData = {
   text: PortableTextBlock[]
   overline?: string
   isBigText?: boolean
+  useResourceLinks?: boolean
   image: ImageWithAlt
-  action?: LinkData
+  actions?: LinkData[]
   designOptions: DesignOptions & {
     imagePosition?: TeaserImagePosition
     imageSize?: TeaserImageSize
@@ -718,6 +723,8 @@ export type VideoControlsType = {
 export type VideoDesignOptionsType = {
   aspectRatio: VideoPlayerRatios
   height?: number
+  width?: 'normal' | 'extraWide'
+  useBrandTheme?: boolean
 }
 
 export type VideoPlayerData = {
@@ -828,3 +835,71 @@ export type CardListItemData = {
   title?: string
   content?: PortableTextBlock[]
 }
+
+export type GridRowType = Span3 | Span2And1 | ThreeColumns
+
+export type GridData = {
+  type: 'grid'
+  id: string
+  gridRows?: GridRowType[]
+}
+
+export type GridContentType = FigureData | IFrameData | VideoPlayerData | GridTextBlockData | GridTeaserData
+
+export type Span3 = {
+  type: 'span3'
+  id: string
+  content?: GridContentType[]
+}
+export type Span2And1 = {
+  type: 'span2and1'
+  id: string
+  singleColumn?: GridContentType[]
+  span2?: GridContentType[]
+}
+export type ThreeColumns = {
+  type: 'threeColumns'
+  id: string
+  columns?: GridContentType[]
+}
+
+export type GridTextBlockData = {
+  id: string
+  type: 'gridTextBlock'
+  action?: LinkData
+  content?: PortableTextBlock[]
+  textAlignment?: ContentAlignmentTypes
+  theme?: number
+}
+
+export type CampaignBannerData = {
+  type: 'campaignBanner'
+  id: string
+  title: PortableTextBlock[]
+  designOptions: DesignOptions
+}
+export type GridTeaserData = {
+  type: 'gridTeaser'
+  id: string
+  image: ImageWithAlt
+  rowType?: RowType
+  content?: PortableTextBlock
+  quote?: string
+  author?: string
+  authorTitle?: string
+  background?: BackgroundColours
+  imagePosition?: TeaserImagePosition
+  action?: LinkData
+  theme?: number
+}
+export type PodcastTeaserData = {
+  id: string
+  type: 'podcastTeaser'
+  spotifyLink?: string
+  appleLink?: string
+  linkTitle?: string
+  podcastName?: PortableTextBlock[]
+  podcastEpisode?: PortableTextBlock[]
+  image: ImageWithAlt
+  designOptions: DesignOptions
+}