diff --git a/apps/site/src/app/design-system/[...component]/components/content-tabs/components/accessibility-content/accessibility-content.component.tsx b/apps/site/src/app/design-system/[...component]/components/content-tabs/components/accessibility-content/accessibility-content.component.tsx
index 68ea936dc..143b7917f 100644
--- a/apps/site/src/app/design-system/[...component]/components/content-tabs/components/accessibility-content/accessibility-content.component.tsx
+++ b/apps/site/src/app/design-system/[...component]/components/content-tabs/components/accessibility-content/accessibility-content.component.tsx
@@ -2,6 +2,7 @@
 
 import { DocumentRenderer } from '@keystatic/core/renderer';
 import { Grid, Item, Select } from '@westpac/ui';
+import { useSearchParams } from 'next/navigation';
 import { useId, useState } from 'react';
 
 import { Container } from '@/app/design-system/components';
@@ -30,12 +31,14 @@ const FILTERS = [
 export function AccessibilityContent({ accessibilitySections, accessibilityDemo }: AccessibilityContentProps) {
   const [filter, setFilter] = useState<VisionFilterProps['value']>();
   const id = useId();
+  const searchParams = useSearchParams();
+  const brand = searchParams.get('brand') || 'wbc';
 
   return (
     <>
       {accessibilityDemo && (
         <Section className="border-t-0">
-          <Container className="pt-5">
+          <Container className="pt-7">
             <Heading level={2} className="mb-4 sm:mb-7">
               Colour impairment demonstration
             </Heading>
@@ -44,11 +47,15 @@ export function AccessibilityContent({ accessibilitySections, accessibilityDemo
                 <Text>
                   All components are designed and tested to ensure colour contrast ratios comply with the WCAG 2.1 AA
                   specification. Select a filter from the list below to see how this component would appear to someone
-                  with a: <Link href="#">colour vision impairment</Link>.
+                  with a:{' '}
+                  <Link href={`/design-system/accessibility/colour-vision-impairment?brand=${brand}`}>
+                    colour vision impairment
+                  </Link>
+                  .
                 </Text>
               </Item>
             </Grid>
-            <div className="mb-4 flex items-center bg-light p-4">
+            <div className="flex items-center bg-light p-4">
               <label htmlFor={id} className="mr-[1rem]">
                 Select filter
               </label>
diff --git a/apps/site/src/app/design-system/[...component]/components/content-tabs/components/design-content/design-content.component.tsx b/apps/site/src/app/design-system/[...component]/components/content-tabs/components/design-content/design-content.component.tsx
index 6e2947188..a8764f326 100644
--- a/apps/site/src/app/design-system/[...component]/components/content-tabs/components/design-content/design-content.component.tsx
+++ b/apps/site/src/app/design-system/[...component]/components/content-tabs/components/design-content/design-content.component.tsx
@@ -5,6 +5,7 @@ import { useMemo } from 'react';
 
 import { Container } from '@/app/design-system/components';
 import { Colors } from '@/components/component-blocks/colors/colors.component';
+import { ImageCaption } from '@/components/component-blocks/components/image-caption';
 import { Icons } from '@/components/component-blocks/icons/icons.component';
 import { Logos } from '@/components/component-blocks/logos/logos.component';
 import { Pictograms } from '@/components/component-blocks/pictograms/pictograms.component';
@@ -47,6 +48,7 @@ export function DesignContent({ designSections, description, relatedComponents,
                   pictograms: () => <Pictograms />,
                   symbols: () => <Symbols />,
                   colors: props => <Colors palette={props.palette} />,
+                  imageCaption: props => <ImageCaption text={props.text} />,
                 }}
               />
             </Container>
diff --git a/apps/site/src/app/design-system/[...component]/components/header/header.styles.ts b/apps/site/src/app/design-system/[...component]/components/header/header.styles.ts
index cd8c93764..3c7e6d038 100644
--- a/apps/site/src/app/design-system/[...component]/components/header/header.styles.ts
+++ b/apps/site/src/app/design-system/[...component]/components/header/header.styles.ts
@@ -3,7 +3,7 @@ import { tv } from 'tailwind-variants';
 export const styles = tv(
   {
     slots: {
-      base: 'sticky top-0 z-50 flex w-full items-center gap-2 bg-hero px-2 py-3.5 antialiased transition-colors sm:px-4 md:top-[-10.125rem] md:h-[14.25rem] md:items-end',
+      base: 'sticky top-0 z-10 flex w-full items-center gap-2 bg-hero px-2 py-3.5 antialiased transition-colors sm:px-4 md:top-[-10.125rem] md:h-[14.25rem] md:items-end',
       gridButton: 'flex h-6 items-stretch gap-[0.125rem] p-1',
       gridButtonWrapper: 'fixed right-2 top-2 hidden items-center text-white sm:flex',
       hamburgerButton: 'fixed left-0 top-0 block h-4 w-4 translate-y-[-0.125rem] px-2 py-3.5 sm:left-2 lg:hidden',
@@ -12,7 +12,7 @@ export const styles = tv(
     variants: {
       fixed: {
         true: {
-          base: 'items-center',
+          base: 'items-center shadow-[0_2px_5px_rgba(0,0,0,0.3)]',
           title: '',
         },
         false: {
diff --git a/apps/site/src/app/design-system/components/sidebar/sidebar.component.tsx b/apps/site/src/app/design-system/components/sidebar/sidebar.component.tsx
index e6db82636..63670c42d 100644
--- a/apps/site/src/app/design-system/components/sidebar/sidebar.component.tsx
+++ b/apps/site/src/app/design-system/components/sidebar/sidebar.component.tsx
@@ -57,9 +57,9 @@ export function Sidebar({ items }: SidebarProps) {
     <>
       <div
         className={clsx(
-          'fixed top-0 z-[60] flex h-full w-[18.75rem] grow-0 flex-col border-r-0 bg-white text-text shadow-2xl transition-transform ease-in-out lg:bottom-0 lg:h-auto lg:-translate-x-0 lg:overflow-x-hidden lg:border-r lg:border-r-border lg:shadow-none',
+          'fixed top-0 z-[60] flex h-full w-[18.75rem] grow-0 flex-col border-r-0 bg-white text-text transition-transform ease-in-out lg:bottom-0 lg:h-auto lg:-translate-x-0 overflow-x-hidden lg:border-r lg:border-r-border',
           {
-            '-translate-x-full overflow-x-hidden': !open, //hide sidebar to the left when closed
+            '-translate-x-full': !open, //hide sidebar to the left when closed
           },
         )}
         ref={outsideRef}
diff --git a/apps/site/src/components/component-blocks/components/image-caption/image-caption.component.tsx b/apps/site/src/components/component-blocks/components/image-caption/image-caption.component.tsx
new file mode 100644
index 000000000..0239211cf
--- /dev/null
+++ b/apps/site/src/components/component-blocks/components/image-caption/image-caption.component.tsx
@@ -0,0 +1,6 @@
+import { styles } from './image-caption.style';
+import { type ImageCaptionProps } from './image-caption.types';
+
+export const ImageCaption = ({ text }: ImageCaptionProps) => {
+  return <p className={styles({})}>{text}</p>;
+};
diff --git a/apps/site/src/components/component-blocks/components/image-caption/image-caption.preview.tsx b/apps/site/src/components/component-blocks/components/image-caption/image-caption.preview.tsx
new file mode 100644
index 000000000..7772551c7
--- /dev/null
+++ b/apps/site/src/components/component-blocks/components/image-caption/image-caption.preview.tsx
@@ -0,0 +1,11 @@
+import { component, fields } from '@keystatic/core';
+
+export const imageCaption = component({
+  label: 'Image Caption',
+  preview: props => <>{props.fields.text.value || ''}</>,
+  schema: {
+    text: fields.text({
+      label: 'Image Caption',
+    }),
+  },
+});
diff --git a/apps/site/src/components/component-blocks/components/image-caption/image-caption.style.ts b/apps/site/src/components/component-blocks/components/image-caption/image-caption.style.ts
new file mode 100644
index 000000000..68160e296
--- /dev/null
+++ b/apps/site/src/components/component-blocks/components/image-caption/image-caption.style.ts
@@ -0,0 +1,5 @@
+import { tv } from 'tailwind-variants';
+
+export const styles = tv({
+  base: 'typography-body-10 mb-5 mt-2 text-muted',
+});
diff --git a/apps/site/src/components/component-blocks/components/image-caption/image-caption.types.ts b/apps/site/src/components/component-blocks/components/image-caption/image-caption.types.ts
new file mode 100644
index 000000000..64a85afc2
--- /dev/null
+++ b/apps/site/src/components/component-blocks/components/image-caption/image-caption.types.ts
@@ -0,0 +1,3 @@
+export type ImageCaptionProps = {
+  text?: string;
+};
diff --git a/apps/site/src/components/component-blocks/components/image-caption/index.ts b/apps/site/src/components/component-blocks/components/image-caption/index.ts
new file mode 100644
index 000000000..b1e72d043
--- /dev/null
+++ b/apps/site/src/components/component-blocks/components/image-caption/index.ts
@@ -0,0 +1,2 @@
+export * from './image-caption.component';
+export * from './image-caption.types';
diff --git a/apps/site/src/components/component-blocks/foundation-blocks.tsx b/apps/site/src/components/component-blocks/foundation-blocks.tsx
index b7d1a98f8..dbac8c10b 100644
--- a/apps/site/src/components/component-blocks/foundation-blocks.tsx
+++ b/apps/site/src/components/component-blocks/foundation-blocks.tsx
@@ -1,4 +1,5 @@
 import { colors } from './colors/colors.preview';
+import { imageCaption } from './components/image-caption/image-caption.preview';
 import { icons } from './icons/icons.preview';
 import { logos } from './logos/logos.preview';
 import { pictograms } from './pictograms/pictograms.preview';
@@ -10,4 +11,5 @@ export const foundationBlocks = {
   logos,
   pictograms,
   symbols,
+  imageCaption,
 };
diff --git a/apps/site/src/components/content-blocks/typography/typography.component.tsx b/apps/site/src/components/content-blocks/typography/typography.component.tsx
index 7e7c5a509..78a2d2537 100644
--- a/apps/site/src/components/content-blocks/typography/typography.component.tsx
+++ b/apps/site/src/components/content-blocks/typography/typography.component.tsx
@@ -1,7 +1,10 @@
 import { NewWindowIcon } from '@westpac/ui/icon';
 import NextLink, { LinkProps } from 'next/link';
+import { useSearchParams } from 'next/navigation';
 import { VariantProps } from 'tailwind-variants';
 
+import { BrandKey } from '@/app/types/brand.types';
+
 import { linkStyles } from './typography.styles';
 
 export function Text({ children }: { children?: React.ReactNode }) {
@@ -14,15 +17,18 @@ export function Link({
   href,
   ...props
 }: React.PropsWithChildren<LinkProps & VariantProps<typeof linkStyles>>) {
+  const searchParams = useSearchParams();
+  const brand = (searchParams.get('brand') ?? 'wbc') as BrandKey;
+  const isExternalLink = href.toString().indexOf('http') === 0 || href.toString().indexOf('mailto') === 0;
   return (
     <NextLink
-      href={href}
-      target={href.toString().indexOf('http') === 0 ? '_blank' : '_self'}
+      href={isExternalLink ? href : `${href}?brand=${brand}`}
+      target={isExternalLink ? '_blank' : '_self'}
       className={linkStyles({ color })}
       {...props}
     >
       {children}
-      <NewWindowIcon size="xsmall" className="ml-1" />
+      {isExternalLink && <NewWindowIcon size="xsmall" className="ml-1" />}
     </NextLink>
   );
 }
diff --git a/apps/site/src/components/related-info/related-info.component.tsx b/apps/site/src/components/related-info/related-info.component.tsx
index d700dc65c..94f09a4cc 100644
--- a/apps/site/src/components/related-info/related-info.component.tsx
+++ b/apps/site/src/components/related-info/related-info.component.tsx
@@ -2,8 +2,10 @@ import { DocumentRenderer } from '@keystatic/core/renderer';
 import { Grid, Item } from '@westpac/ui';
 import { ArrowRightIcon, CubeIcon, GenericFileIcon } from '@westpac/ui/icon';
 import NextLink, { LinkProps } from 'next/link';
+import { useSearchParams } from 'next/navigation';
 
 import { Container } from '@/app/design-system/components';
+import { type BrandKey } from '@/app/types/brand.types';
 
 import { Section } from '../content-blocks/section';
 import { Heading } from '../document-renderer';
@@ -13,6 +15,8 @@ import { RelatedInfoProps } from './related-info.types';
 
 export function RelatedInfo({ relatedComponents = [], relatedArticles }: RelatedInfoProps) {
   const relatedComponentsEmpty = relatedComponents?.length < 1;
+  const searchParams = useSearchParams();
+  const brand = (searchParams.get('brand') ?? 'wbc') as BrandKey;
   return (
     <Section className="bg-white">
       <Container className="">
@@ -30,7 +34,7 @@ export function RelatedInfo({ relatedComponents = [], relatedArticles }: Related
                 {relatedComponents.map(({ title, slug }) => {
                   return (
                     <li key={title}>
-                      <Link href={`/design-system/${slug}?brand=wbc`}>{title}</Link>
+                      <Link href={`/design-system/${slug}?brand=${brand}`}>{title}</Link>
                     </li>
                   );
                 })}
diff --git a/apps/site/src/content/articles/build-strong-brands/content.mdoc b/apps/site/src/content/articles/build-strong-brands/content.mdoc
index 0e885caa4..2dbe840b3 100644
--- a/apps/site/src/content/articles/build-strong-brands/content.mdoc
+++ b/apps/site/src/content/articles/build-strong-brands/content.mdoc
@@ -32,4 +32,4 @@ This is where things get really interesting. At level 3, not only are you fully
 
 So, as well as increasing the speed which your project can be created, it also means that any future branding and accessibility updates can be simpler, save time and money now and in the future.
 
-[Access the design system for the digital brand foundations](https://gel.westpacgroup.com.au/design-system/foundation/colours)
+[Access the design system for the digital brand foundations](/design-system/foundation/colour)
diff --git a/apps/site/src/content/articles/code-with-gel/content.mdoc b/apps/site/src/content/articles/code-with-gel/content.mdoc
index c1dc302ca..58caf3a6b 100644
--- a/apps/site/src/content/articles/code-with-gel/content.mdoc
+++ b/apps/site/src/content/articles/code-with-gel/content.mdoc
@@ -34,6 +34,6 @@ In this scenario, you can consume the React JS or vanilla HTML code in your proj
 
 [Read more about the levels of design system adoption](/articles/build-strong-brands)
 
-[Access the design system](https://gel.westpacgroup.com.au/design-system)
+[Access the design system](/design-system)
 
-[Get started using the GEL design system](https://gel.westpacgroup.com.au/design-system/development/get-started?b=WBC)
\ No newline at end of file
+[Get started using the GEL design system](/design-system/development/get-started)
\ No newline at end of file
diff --git a/apps/site/src/content/articles/colour/content.mdoc b/apps/site/src/content/articles/colour/content.mdoc
index 6c73f36c3..6026e1efe 100644
--- a/apps/site/src/content/articles/colour/content.mdoc
+++ b/apps/site/src/content/articles/colour/content.mdoc
@@ -44,7 +44,7 @@ The Westpac group has a set of reserved, contextual colours used only for messag
 
 Each brand has a neutral colour with a set of 11 tints for subtle colouring. Several of these tints are already used in the primary palette for borders and backgrounds etc. The remaining tints can be used for additional colouring if required.
 
-[View the colour system](https://gel.westpacgroup.com.au/design-system/foundation/colours)
+[View the colour system](/design-system/foundation/colour)
 
 ### **Accessibility**
 
diff --git a/apps/site/src/content/articles/design-with-gel/content.mdoc b/apps/site/src/content/articles/design-with-gel/content.mdoc
index 5eff0d08e..3ca9704c1 100644
--- a/apps/site/src/content/articles/design-with-gel/content.mdoc
+++ b/apps/site/src/content/articles/design-with-gel/content.mdoc
@@ -20,7 +20,7 @@ UX designers can access component and pattern rationale through Confluence, use
 
 UI designers can access design assets from the [Figma Libraries](/articles/figma-libraries), and get up to speed on our brand and design standards such as [Typography](/articles/typography) and [Colour](/articles/colour) elsewhere on the GEL website. Assemble high quality mock-ups and prototypes using the [Figma Libraries](/articles/figma-libraries) while [Protoform](https://gel.westpacgroup.com.au/protoform) is another useful tool for seeing the behaviour of components and patterns.
 
-Developers can go straight to the [design system](https://gel.westpacgroup.com.au/design-system) to read implementation guidelines and access code, while also referencing [Protoform](https://gel.westpacgroup.com.au/protoform), our interactive demonstration of common form patterns. [Protoform](https://gel.westpacgroup.com.au/protoform) provides best-practice consideration for responsive layout, WCAG accessibility compliance, user experience and brand requirements.
+Developers can go straight to the [design system](/design-system) to read implementation guidelines and access code, while also referencing [Protoform](https://gel.westpacgroup.com.au/protoform), our interactive demonstration of common form patterns. [Protoform](https://gel.westpacgroup.com.au/protoform) provides best-practice consideration for responsive layout, WCAG accessibility compliance, user experience and brand requirements.
 
 ## I want to design the interface my way
 
diff --git a/apps/site/src/content/articles/figma-libraries/content.mdoc b/apps/site/src/content/articles/figma-libraries/content.mdoc
index 1f2a18874..cc4c3bbcb 100644
--- a/apps/site/src/content/articles/figma-libraries/content.mdoc
+++ b/apps/site/src/content/articles/figma-libraries/content.mdoc
@@ -14,7 +14,7 @@ The following Figma libraries are _only_ available for designers working within
 - [GEL Pictograms](https://www.figma.com/file/sWRKQTkG8PyNtGNKwlLReo/GEL-Pictograms)
 - [GEL Logos & Symbols](https://www.figma.com/file/WojlFfS0UyU0i3BPvZiJf0/GEL-Logos-and-Symbols)
 
-Each of the Component libraries are identical, except for the colours, fonts and logos used within them, which are specific to each brand. This is how we manage the [multibrand](/multi-brand-made-easy) system.
+Each of the Component libraries are identical, except for the colours, fonts and logos used within them, which are specific to each brand. This is how we manage the [multibrand](/articles/multi-brand-made-easy) system.
 
 The components from the _GEL Icons_ and _GEL Logos & Symbols_ libraries are not brand specific. The _GEL Pictograms_ library contains the components for every brand in the one library.
 
@@ -40,7 +40,7 @@ Where possible, elements and components are responsive making them easier to res
 
 ## **The styles**
 
-The component libraries use Styles to manage colours and some typography. The colour styles are aligned with the [colour palettes](/design-system/foundation/colours) of the GEL Design System. Sticking to these styles (rather than using hex values) will help ensure your design is on brand. It will also allow you to use the Themer plugin to easily switch your design to a different brand. See more about Themer below.
+The component libraries use Styles to manage colours and some typography. The colour styles are aligned with the [colour palettes](/design-system/foundation/colour) of the GEL Design System. Sticking to these styles (rather than using hex values) will help ensure your design is on brand. It will also allow you to use the Themer plugin to easily switch your design to a different brand. See more about Themer below.
 
 ## **Fonts**
 
@@ -62,7 +62,7 @@ As our brands evolve, we’re constantly updating and refining the Figma Librari
 
 The Design System covers the core UI elements common to most user interfaces. The majority of the elements you need should be available. However, every project is different and sometimes requires bespoke elements that are not available in the Design System. If that’s the case, of course you can create what you need, just use the brand colour palette, and don’t 'adjust' existing components.
 
-If you are trying to create something new, our general recommendation is to check with other projects or teams to see if they have done something similar. If the problem has already been solved elsewhere, don’t re-invent the wheel. Also, if this is something that other projects require, it might be candidate for a new Global GEL component. Read more about [how to request a new component.](/articles/collaboration-is-key)
+If you are trying to create something new, our general recommendation is to check with other projects or teams to see if they have done something similar. If the problem has already been solved elsewhere, don’t re-invent the wheel. Also, if this is something that other projects require, it might be candidate for a new Global GEL component. Read more about [how to request a new component.](/articles/collaboration-for-change)
 
 ### **Who do I contact for help?**
 
diff --git a/apps/site/src/content/articles/iconography/content.mdoc b/apps/site/src/content/articles/iconography/content.mdoc
index af7014373..feebeda7e 100644
--- a/apps/site/src/content/articles/iconography/content.mdoc
+++ b/apps/site/src/content/articles/iconography/content.mdoc
@@ -34,7 +34,7 @@ Icons should be used sparingly. Too many icons add clutter and confusion to the
 
 ### Icons v Pictograms
 
-The GEL design system also provides a library of Pictograms. Unlike icons Pictograms are not intended to aid navigation or represent common actions like search and print. The primary purpose of Pictograms is brand embellishment. They’re designed to enhance the brand at specific points in the customer journey, we call these “brand moments”. Given their primary function Pictograms are not designed to be used at small sizes. They’re not drawn on the pixel grid and depending on the brand they may use colours that are not accessible. As a result Pictograms must always be larger than 36px. For more information and downloads please refer to the Design System [Pictograms](https://gel.westpacgroup.com.au/design-system/foundation/pictograms?b=WBC)
+The GEL design system also provides a library of Pictograms. Unlike icons Pictograms are not intended to aid navigation or represent common actions like search and print. The primary purpose of Pictograms is brand embellishment. They’re designed to enhance the brand at specific points in the customer journey, we call these “brand moments”. Given their primary function Pictograms are not designed to be used at small sizes. They’re not drawn on the pixel grid and depending on the brand they may use colours that are not accessible. As a result Pictograms must always be larger than 36px. For more information and downloads please refer to the Design System [Pictograms](/design-system/foundation/pictogram)
 
 {% layout layout=[5, 5] %}
 {% layout-area %}
@@ -195,4 +195,4 @@ Consistency aids user comprehension of icons. Use the existing system icons when
 
 ## SVG icons
 
-With the release of the GEL Design System v2.0 we superseded the icon font in favour of an SVG (scalable vector graphics) implementation. Using SVGs ensures the highest quality rendering on all devices both now and into the future. SVGs can also be styled using code avoiding the need for multiple versions of the same icon. SVGs also comply with AA accessibility requirements. This is a more flexible and accessible approach. For more technical information (embedding, styling, sizing etc) and to download the SVG icons please refer to the Design System [Iconography.](https://gel.westpacgroup.com.au/design-system/foundation/icons)
+With the release of the GEL Design System v2.0 we superseded the icon font in favour of an SVG (scalable vector graphics) implementation. Using SVGs ensures the highest quality rendering on all devices both now and into the future. SVGs can also be styled using code avoiding the need for multiple versions of the same icon. SVGs also comply with AA accessibility requirements. This is a more flexible and accessible approach. For more technical information (embedding, styling, sizing etc) and to download the SVG icons please refer to the Design System [Iconography.](/design-system/foundation/icon)
diff --git a/apps/site/src/content/articles/multi-brand-made-easy/content.mdoc b/apps/site/src/content/articles/multi-brand-made-easy/content.mdoc
index f90203870..bc2797fea 100644
--- a/apps/site/src/content/articles/multi-brand-made-easy/content.mdoc
+++ b/apps/site/src/content/articles/multi-brand-made-easy/content.mdoc
@@ -94,7 +94,7 @@ As mentioned, the GEL provides a suite of highly crafted tools and resources. Av
 
 For designers there's the [Figma Libraries.](/articles/figma-libraries) A complete set of multi-brand, accessible design assets to help you create high quality, consistent, experiences across all our digital touch-points.
 
-For developers there's the [Front End Development Framework.](https://gel.westpacgroup.com.au/design-system) This extensive (React) code base is a mirror image of the Figma library. All assets are categorised and labeled in exactly the same way to ensure that we're all speaking the same language.
+For developers there's the [Front End Development Framework.](/design-system) This extensive (React) code base is a mirror image of the Figma library. All assets are categorised and labeled in exactly the same way to ensure that we're all speaking the same language.
 
 Both the Figma Library and the FED Framework use automated multi-brand features to leverage the power of the Design Systems theming capability. Not only does this automation significantly reduce the time and effort required to roll out an experience across all our brands it also removes the margin for error and maintains consistency throughout the customer journey.
 
diff --git a/apps/site/src/content/articles/patterns/content.mdoc b/apps/site/src/content/articles/patterns/content.mdoc
index 1a99d840a..8bab88ba2 100644
--- a/apps/site/src/content/articles/patterns/content.mdoc
+++ b/apps/site/src/content/articles/patterns/content.mdoc
@@ -4,22 +4,22 @@ We have a range of patterns across multiple projects and streams of work. Each p
 
 Apply these patterns when creating application forms.
 
-[See the Originations patterns.](https://gel.westpacgroup.com.au/articles/originations-experience)
+[See the Originations patterns.](/articles/originations-experience)
 
 ## Banking
 
 Apply these patterns when delivering features and experiences in our online banking applications.
 
-[See the Banking patterns.](https://gel.westpacgroup.com.au/articles/banking)
+[See the Banking patterns.](/articles/banking)
 
 ## Website
 
 Apply these patterns when you are delivering a page on the website.
 
-[https://gel.westpacgroup.com.au/articles/website](https://gel.westpacgroup.com.au/articles/website)
+[See the Website patterns.](/articles/website)
 
 ## Notifications
 
 Apply these patterns when you are delivering a message to customers using our notification channels.
 
-[See the Notifications patterns.](https://gel.westpacgroup.com.au/articles/notifications)
+[See the Notifications patterns.](/articles/notifications)
diff --git a/apps/site/src/content/articles/think-responsive/content.mdoc b/apps/site/src/content/articles/think-responsive/content.mdoc
index e41f4d263..3411a15a9 100644
--- a/apps/site/src/content/articles/think-responsive/content.mdoc
+++ b/apps/site/src/content/articles/think-responsive/content.mdoc
@@ -16,4 +16,4 @@ Obviously, we can’t use motion sensors and robotics to accomplish this the way
 
 [Read about the grid and how it helps achieve responsive design](/articles/the-grid)
 
-[Access the grid from the design system](https://gel.westpacgroup.com.au/design-system/foundation/grid)
+[Access the grid from the design system](/design-system/foundation/grid)
diff --git a/apps/site/src/content/articles/typography/content.mdoc b/apps/site/src/content/articles/typography/content.mdoc
index 9513fc536..ed6f354f3 100644
--- a/apps/site/src/content/articles/typography/content.mdoc
+++ b/apps/site/src/content/articles/typography/content.mdoc
@@ -41,4 +41,4 @@ We’re hoping to establish a more robust system of spacing for our Typography s
 
 {% articleBodyImage articleBodyImage="https://res.cloudinary.com/westpac-gel/image/upload/v1666141371/cl9exjwys000ptc8i1ki2fsxh.png" alt="The font sizes available in the design system" type="bodyWide" /%}
 
-[Access the design system fonts](https://gel.westpacgroup.com.au/design-system/foundation/fonts)
+[Access the design system fonts](/design-system/foundation/font)
diff --git a/apps/site/src/content/articles/using-fonts/content.mdoc b/apps/site/src/content/articles/using-fonts/content.mdoc
index 2e2daf576..c262cda97 100644
--- a/apps/site/src/content/articles/using-fonts/content.mdoc
+++ b/apps/site/src/content/articles/using-fonts/content.mdoc
@@ -57,6 +57,6 @@ As a designer at Westpac the desktop fonts you require should be pre-installed o
 
 ### For developers
 
-For those who work at Westpac we provide an internal link to the web font files in the [Downloads section of the Design System](https://gel.westpacgroup.com.au/design-system/downloads). These fonts are stored securely on the internal network and only available to Westpac Group Developers.
+For those who work at Westpac we provide an internal link to the web font files in the [Downloads section of the Design System](/design-system/downloads). These fonts are stored securely on the internal network and only available to Westpac Group Developers.
 
 **IMPORTANT:** Projects must ensure that the web fonts they wish to use are licensed for use on all the public domains, sub-domains, and or apps that will host and or display these fonts.
diff --git a/apps/site/src/content/articles/what-is-gel/content.mdoc b/apps/site/src/content/articles/what-is-gel/content.mdoc
index 0dae22429..24a82108d 100644
--- a/apps/site/src/content/articles/what-is-gel/content.mdoc
+++ b/apps/site/src/content/articles/what-is-gel/content.mdoc
@@ -17,19 +17,19 @@ GEL is governed by a centralised specialist team who manage the tools and provid
 
 The design system delivers solutions that are:
 
-- **Multi-brand**, ensuring that we can create a single solution and scale it to all 6 of our digital brands.&nbsp;[Read about our multi-brand approach](https://gel.westpacgroup.com.au/articles/multi-brand-made-easy)
-- **Responsive**, ensuring that we can create a single solution and scale it to all devices and operating systems.&nbsp;[Read about our responsive framework](https://gel.westpacgroup.com.au/articles/think-responsive)
-- **Accessible**, ensuring that our solutions consider the needs of all our digital customers.&nbsp;[Read about why accessibility matters](https://gel.westpacgroup.com.au/articles/accessible-by-design)
+- **Multi-brand**, ensuring that we can create a single solution and scale it to all 6 of our digital brands.&nbsp;[Read about our multi-brand approach](/articles/multi-brand-made-easy)
+- **Responsive**, ensuring that we can create a single solution and scale it to all devices and operating systems.&nbsp;[Read about our responsive framework](/articles/think-responsive)
+- **Accessible**, ensuring that our solutions consider the needs of all our digital customers.&nbsp;[Read about why accessibility matters](/articles/accessible-by-design)
 
 The GEL Design System provides the following brand and design foundations that support you to achieve highly scalable solutions.
 
-- **Colour**, accessible palettes that achieve brand consistency.&nbsp;[Read about colour](https://gel.westpacgroup.com.au/articles/colour)
-- **Typography**, fonts to communicate our brand personality.&nbsp;[Read about typography](https://gel.westpacgroup.com.au/articles/typography)
-- **The grid**, designed to achieve flexible layouts for any device.&nbsp;[Read about the grid](https://gel.westpacgroup.com.au/articles/the-grid)
-- **Iconography**, designed to communicate meaning and aid navigation.&nbsp;[Read about icons](https://gel.westpacgroup.com.au/articles/iconography)
+- **Colour**, accessible palettes that achieve brand consistency.&nbsp;[Read about colour](/articles/colour)
+- **Typography**, fonts to communicate our brand personality.&nbsp;[Read about typography](/articles/typography)
+- **The grid**, designed to achieve flexible layouts for any device.&nbsp;[Read about the grid](/articles/the-grid)
+- **Iconography**, designed to communicate meaning and aid navigation.&nbsp;[Read about icons](/articles/iconography)
 - **Symbols**, logos and symbols optimised for digital
 
-[Access the brand foundations and design assets from the GEL design system](https://gel.westpacgroup.com.au/design-system)
+[Access the brand foundations and design assets from the GEL design system](/design-system)
 
 ## What are the benefits of the GEL Design System?
 
diff --git a/apps/site/src/content/design-system/accessibility/design-system-accessibility/design/deprecated-components/content.mdoc b/apps/site/src/content/design-system/accessibility/design-system-accessibility/design/deprecated-components/content.mdoc
index 11c176ee6..453cde3a5 100644
--- a/apps/site/src/content/design-system/accessibility/design-system-accessibility/design/deprecated-components/content.mdoc
+++ b/apps/site/src/content/design-system/accessibility/design-system-accessibility/design/deprecated-components/content.mdoc
@@ -1,5 +1,5 @@
 Unfortunately a few of the components from the previous version of the Design System no longer made the grade in the new WCAG 2.1 AA world. So they had to be deprecated or significantly adjusted, this is what has changed:
 
-- Removed the functionality to dismiss a popover by clicking anywhere else on the page. We still have the [Popover](/design-system/components/popovers) with toggle functionality. To continue to comply with accessibility requirements Popovers need to be dismissed by either clicking on the trigger that launched them or by selecting a close button.
-- Labels were removed from Switches ([Switches](/design-system/components/switches) without labels are still available). The labels, On/Off were removed as they posed an accessibility issue for screen readers. In code, a switch is just a checkbox, a checkbox doesn't have a label that describes if it is checked or not. Re-engineering the switch to include that label was not worth the complexity required.
+- Removed the functionality to dismiss a popover by clicking anywhere else on the page. We still have the [Popover](/design-system/components/popover) with toggle functionality. To continue to comply with accessibility requirements Popovers need to be dismissed by either clicking on the trigger that launched them or by selecting a close button.
+- Labels were removed from Switches ([Switches](/design-system/components/switch) without labels are still available). The labels, On/Off were removed as they posed an accessibility issue for screen readers. In code, a switch is just a checkbox, a checkbox doesn't have a label that describes if it is checked or not. Re-engineering the switch to include that label was not worth the complexity required.
 - Tooltips proved to have accessibility issues as well as not working effectively across responsive applications. As they were not very widely used (if at all) they were removed.
diff --git a/apps/site/src/content/design-system/components/accordion/accessibility/notes-on-accessibility/content.mdoc b/apps/site/src/content/design-system/components/accordion/accessibility/notes-on-accessibility/content.mdoc
index 650bd9b6a..ecd70ef50 100644
--- a/apps/site/src/content/design-system/components/accordion/accessibility/notes-on-accessibility/content.mdoc
+++ b/apps/site/src/content/design-system/components/accordion/accessibility/notes-on-accessibility/content.mdoc
@@ -1,4 +1,4 @@
-All components comply with WCAG 2.1 AA guidelines and Success Criteria. These fall under the&nbsp;[four principles of accessibility](https://gel.westpacgroup.com.au/design-system/accessibility/design-system-accessibility)&nbsp;– Perceivable, Operable, Understandable and Robust. Below are some specific ways in which this component follows these principles:
+All components comply with WCAG 2.1 AA guidelines and Success Criteria. These fall under the&nbsp;[four principles of accessibility](/design-system/accessibility/design-system-accessibility)&nbsp;– Perceivable, Operable, Understandable and Robust. Below are some specific ways in which this component follows these principles:
 
 ### **Perceivable**
 
diff --git a/apps/site/src/content/design-system/components/button-group/design/user-experience/content.mdoc b/apps/site/src/content/design-system/components/button-group/design/user-experience/content.mdoc
index c384d8a30..0b2a6ac9e 100644
--- a/apps/site/src/content/design-system/components/button-group/design/user-experience/content.mdoc
+++ b/apps/site/src/content/design-system/components/button-group/design/user-experience/content.mdoc
@@ -4,4 +4,4 @@ As button groups tend to break on small screen sizes especially when using more
 
 Consider the two-button button group when designing forms for questions with yes/no answers.
 
-It's important to note that button groups differ from [switches](/design-system/components/switches).
+It's important to note that button groups differ from [switches](/design-system/components/switch).
diff --git a/apps/site/src/content/design-system/components/button/design/user-experience/content.mdoc b/apps/site/src/content/design-system/components/button/design/user-experience/content.mdoc
index e3953da42..7952120ba 100644
--- a/apps/site/src/content/design-system/components/button/design/user-experience/content.mdoc
+++ b/apps/site/src/content/design-system/components/button/design/user-experience/content.mdoc
@@ -4,4 +4,6 @@ It is usually easy to define the primary action for a page, for this you would o
 
 Make sure buttons are an appropriate distance to the corresponding object or function, so they appear related. The Law of Proximity is the gestalt grouping law that states: elements that are close together tend to be perceived as a unified group.
 
-![Two sets of 9 dots. First set shows 3 stacks of 3 dots evenly and closely aligned, labelled ‘Related’. Second set shows 2 stacks of 3 dots evenly and closely aligned, with a third stack placed further away labelled ‘Unrelated’. ](https://res.cloudinary.com/westpac-gel/image/upload/v1603867704/5f99143728dd13161ae76fdb.png 'Gestalt law of proximity')
\ No newline at end of file
+![Two sets of 9 dots. First set shows 3 stacks of 3 dots evenly and closely aligned, labelled ‘Related’. Second set shows 2 stacks of 3 dots evenly and closely aligned, with a third stack placed further away labelled ‘Unrelated’. ](https://res.cloudinary.com/westpac-gel/image/upload/v1603867704/5f99143728dd13161ae76fdb.png)
+
+{% imageCaption text="Gestalt law of proximity" /%}
diff --git a/apps/site/src/content/design-system/components/compacta/design/default/content.mdoc b/apps/site/src/content/design-system/components/compacta/design/default/content.mdoc
index efa9827d6..6b9f5bf17 100644
--- a/apps/site/src/content/design-system/components/compacta/design/default/content.mdoc
+++ b/apps/site/src/content/design-system/components/compacta/design/default/content.mdoc
@@ -13,11 +13,13 @@ Below is an example of how a Compacta may be used with fields and inputs. Any fo
       {({ id, setPrimaryTitle, setSecondaryTitle, setTertiaryTitle }) => (
         <Form>
           <Form.Group>
-            <Form.Label htmlFor={`primary-${id}`}>Primary</Form.Label>
-            <Form.Hint>Primary title text</Form.Hint>
+            <Form.Label htmlFor={`primary-default-${id}`}>Primary</Form.Label>
+            <Form.Hint id={`primary-default-hint-${id}`}>Primary title text</Form.Hint>
             <Input
-              name={`primary-${id}`}
-              value={inputs[`primary-${id}` as keyof typeof inputs] || ''}
+              id={`primary-default-${id}`}
+              aria-describedby={`primary-default-hint-${id}`}
+              name={`primary-default-${id}`}
+              value={inputs[`primary-default-${id}` as keyof typeof inputs] || ''}
               onChange={e => {
                 handleChange(e);
                 setPrimaryTitle(e.target.value);
@@ -25,11 +27,13 @@ Below is an example of how a Compacta may be used with fields and inputs. Any fo
             />
           </Form.Group>
           <Form.Group>
-            <Form.Label htmlFor={`secondary-${id}`}>Secondary</Form.Label>
-            <Form.Hint>Secondary title text</Form.Hint>
+            <Form.Label htmlFor={`secondary-default-${id}`}>Secondary</Form.Label>
+            <Form.Hint id={`secondary-default-hint-${id}`}>Secondary title text</Form.Hint>
             <Input
-              name={`secondary-${id}`}
-              value={inputs[`secondary-${id}` as keyof typeof inputs] || ''}
+              id={`secondary-default-${id}`}
+              aria-describedby={`secondary-default-hint-${id}`}
+              name={`secondary-default-${id}`}
+              value={inputs[`secondary-default-${id}` as keyof typeof inputs] || ''}
               onChange={e => {
                 handleChange(e);
                 setSecondaryTitle(e.target.value);
@@ -37,11 +41,13 @@ Below is an example of how a Compacta may be used with fields and inputs. Any fo
             />
           </Form.Group>
           <Form.Group>
-            <Form.Label htmlFor={`tertiary-${id}`}>Tertiary</Form.Label>
-            <Form.Hint>Tertiary title text</Form.Hint>
+            <Form.Label htmlFor={`tertiary-default-${id}`}>Tertiary</Form.Label>
+            <Form.Hint id={`tertiary-default-hint-${id}`}>Tertiary title text</Form.Hint>
             <Input
-              name={`tertiary-${id}`}
-              value={inputs[`tertiary-${id}` as keyof typeof inputs] || ''}
+              id={`tertiary-default-${id}`}
+              aria-describedby={`tertiary-default-hint-${id}`}
+              name={`tertiary-default-${id}`}
+              value={inputs[`tertiary-default-${id}` as keyof typeof inputs] || ''}
               onChange={e => {
                 handleChange(e);
                 setTertiaryTitle(e.target.value);
diff --git a/apps/site/src/content/design-system/components/link/accessibility/notes-on-accessibility/content.mdoc b/apps/site/src/content/design-system/components/link/accessibility/notes-on-accessibility/content.mdoc
index 77628730a..ec0ffdd72 100644
--- a/apps/site/src/content/design-system/components/link/accessibility/notes-on-accessibility/content.mdoc
+++ b/apps/site/src/content/design-system/components/link/accessibility/notes-on-accessibility/content.mdoc
@@ -1,6 +1,6 @@
 Links are a fundamental part of making an experience accessible, and key to navigation and providing access to products and services. By making links unambiguous through styling, placement, and copywriting we are upholding a high standard while reducing the chances of litigation.
 
-Here are some specific ways in which this component follows the WCAG 2.1 AA guidelines and Success Criteria. These fall under the [four principles of accessibility](https://gel.westpacgroup.com.au/design-system/accessibility/design-system-accessibility)– Perceivable, Operable, Understandable and Robust.
+Here are some specific ways in which this component follows the WCAG 2.1 AA guidelines and Success Criteria. These fall under the [four principles of accessibility](/design-system/accessibility/design-system-accessibility)– Perceivable, Operable, Understandable and Robust.
 
 ### Perceivable
 
diff --git a/apps/site/src/content/design-system/content/guidelines/bullet-points-numbered-list/design/bullet-points-numbered-lists/content.mdoc b/apps/site/src/content/design-system/content/guidelines/bullet-points-numbered-list/design/bullet-points-numbered-lists/content.mdoc
index 08744dda5..05122e241 100644
--- a/apps/site/src/content/design-system/content/guidelines/bullet-points-numbered-list/design/bullet-points-numbered-lists/content.mdoc
+++ b/apps/site/src/content/design-system/content/guidelines/bullet-points-numbered-list/design/bullet-points-numbered-lists/content.mdoc
@@ -19,7 +19,7 @@ Two or more sentences in any position should be fully punctuated but avoid writi
 
 ---
 
-Use numbered lists for sequential steps, e.g., instructions. Also see [Calls to action (CTAs)](https://gel.westpacgroup.com.au/design-system/content/calls-to-action).
+Use numbered lists for sequential steps, e.g., instructions. Also see [Calls to action (CTAs)](/design-system/content/guidelines/calls-to-action-ctas).
 
 For example:
 
diff --git a/apps/site/src/content/design-system/content/guidelines/calls-to-action-ctas/design/calls-to-action/content.mdoc b/apps/site/src/content/design-system/content/guidelines/calls-to-action-ctas/design/calls-to-action/content.mdoc
index a9a5dc5bb..c3b0e930a 100644
--- a/apps/site/src/content/design-system/content/guidelines/calls-to-action-ctas/design/calls-to-action/content.mdoc
+++ b/apps/site/src/content/design-system/content/guidelines/calls-to-action-ctas/design/calls-to-action/content.mdoc
@@ -4,7 +4,7 @@ For example:
 
 ![Two examples of calls to action that are short and action oriented.](https://res.cloudinary.com/westpac-gel/image/upload/v1667894142/cla7x3vj6001ef58icgubfckf.png)
 
-Use short, action oriented calls to action
+{% imageCaption text="Use short, action oriented calls to action" /%}
 
 _Note: No full stops in CTAs but fine to use question marks._
 
@@ -74,7 +74,7 @@ For example:
 
 ---
 
-If there are more than 5 steps, switch to the list format. Also see [Bullet points & numbered lists](https://gel.westpacgroup.com.au/design-system/content/bullet-points-numbered-lists).
+If there are more than 5 steps, switch to the list format. Also see [Bullet points & numbered lists](/design-system/content/guidelines/bullet-points-numbered-list).
 
 For example:
 
diff --git a/apps/site/src/content/design-system/content/guidelines/empty-state/design/empty-states/content.mdoc b/apps/site/src/content/design-system/content/guidelines/empty-state/design/empty-states/content.mdoc
index e304f5d20..809b2f153 100644
--- a/apps/site/src/content/design-system/content/guidelines/empty-state/design/empty-states/content.mdoc
+++ b/apps/site/src/content/design-system/content/guidelines/empty-state/design/empty-states/content.mdoc
@@ -3,4 +3,6 @@ When creating messages for empty states:
 - avoid generic messages
 - guide the customer on how they could move forward, for example, by inserting a call to action or placeholder text
 
-![Two images showing empty states for linking an account or searching for something.](https://res.cloudinary.com/westpac-gel/image/upload/v1669959576/clb62taq40000bn8iasgdewap.png 'Provide clear direction when displaying an empty state')
+![Two images showing empty states for linking an account or searching for something.](https://res.cloudinary.com/westpac-gel/image/upload/v1669959576/clb62taq40000bn8iasgdewap.png)
+
+{% imageCaption text="Provide clear direction when displaying an empty state" /%}
diff --git a/apps/site/src/content/design-system/content/guidelines/people-diversity/design/people-diversity/content.mdoc b/apps/site/src/content/design-system/content/guidelines/people-diversity/design/people-diversity/content.mdoc
index 38864d401..9d77592c1 100644
--- a/apps/site/src/content/design-system/content/guidelines/people-diversity/design/people-diversity/content.mdoc
+++ b/apps/site/src/content/design-system/content/guidelines/people-diversity/design/people-diversity/content.mdoc
@@ -30,7 +30,7 @@ For example:
 >
 > Don’t: Blind people
 
-_Note: Refer to the_ [\_Accessibility GEL Principles\_](https://gel.westpacgroup.com.au/principles/accessibility/) _for more information on designing for an inclusive audience._
+_Note: Refer to the_ [\_Accessibility GEL Principles\_](/principles/accessibility/) _for more information on designing for an inclusive audience._
 
 ---
 
diff --git a/apps/site/src/content/design-system/content/writing-for-digital/design/writing-tips/content.mdoc b/apps/site/src/content/design-system/content/writing-for-digital/design/writing-tips/content.mdoc
index 1375fd4e9..fb154c835 100644
--- a/apps/site/src/content/design-system/content/writing-for-digital/design/writing-tips/content.mdoc
+++ b/apps/site/src/content/design-system/content/writing-for-digital/design/writing-tips/content.mdoc
@@ -76,7 +76,7 @@ For example:
 
 ![Two mobile screens showing examples of how to provide context for the next steps required of the user.](https://res.cloudinary.com/westpac-gel/image/upload/v1667893974/cla7x09o6001df58if3zg4kxp.png)
 
-Ensure you provide clear direction and context
+{% imageCaption text="Ensure you provide clear direction and context" /%}
 
 Don’t assume that a customer knows what to do. If a customer can’t do something with your message, you may like to rethink why you’re saying it.
 
@@ -86,7 +86,7 @@ For example:
 
 ![Two mobile screens showing two different states of a question flow. The first screen hiding further questions based on a previous answer, the second displaying them.](https://res.cloudinary.com/westpac-gel/image/upload/v1667962659/cla91wg22001kf58idlvq7efj.png)
 
-Only show what the customer needs to know
+{% imageCaption text="Only show what the customer needs to know" /%}
 
 ---
 
@@ -174,14 +174,20 @@ For example:
 
 > Don’t: I don’t want to unsubscribe
 
+{% layout layout=[6, 6] %}
+{% layout-area %}
 ![Mobile screen showing a clear call-to-action label that does not use a double negative.](https://res.cloudinary.com/westpac-gel/image/upload/v1670300581/clbbpu83p0001bn8igu6e5yj1.png)
 
 ```html
 <p className="typography-body-10"><span className="text-success font-bold">Do</span> - Use clear call to action labels</p>
 ```
+{% /layout-area %}
 
+{% layout-area %}
 ![Mobile screen showing a confusing call-to-action label that does use a double negative.](https://res.cloudinary.com/westpac-gel/image/upload/v1670300587/clbbpud7x0002bn8i2m1mbnul.png)
 
 ```html
 <p className="typography-body-10"><span className="text-danger font-bold">Avoid</span> - Using double negative labels</p>
-```
\ No newline at end of file
+```
+{% /layout-area %}
+{% /layout %}
\ No newline at end of file
diff --git a/apps/site/src/content/design-system/foundation/icon/design/user-experience/content.mdoc b/apps/site/src/content/design-system/foundation/icon/design/user-experience/content.mdoc
index 7241bb7d0..3a897f97a 100644
--- a/apps/site/src/content/design-system/foundation/icon/design/user-experience/content.mdoc
+++ b/apps/site/src/content/design-system/foundation/icon/design/user-experience/content.mdoc
@@ -8,4 +8,4 @@ Here is an example of where icons may be misinterpreted, the heart icon is used
 
 ![](https://res.cloudinary.com/westpac-gel/image/upload/v1603867525/5f99138328dd13161ae76fda.png)
 
-Same icon used in three different apps with three different meanings
+{% imageCaption text="Same icon used in three different apps with three different meanings" /%}
\ No newline at end of file