diff --git a/apps/site/keystatic.config.ts b/apps/site/keystatic.config.ts
index 3d928327b..db7b2a387 100644
--- a/apps/site/keystatic.config.ts
+++ b/apps/site/keystatic.config.ts
@@ -163,17 +163,26 @@ export default config({
           links: true,
           label: 'Accessibility Demo',
         }),
-        relatedInformation: fields.array(
-          fields.relationship({
-            label: 'Related components',
-            description: 'A list of related components',
-            collection: 'designSystem',
+        relatedComponents: fields.array(
+          fields.object({
+            title: fields.text({
+              label: 'Related Components',
+            }),
+            slug: fields.url({
+              label: 'Slug',
+            }),
           }),
           {
             label: 'Related Components',
-            itemLabel: props => props.value || '',
+            itemLabel: props => props.fields.title.value || '',
           },
         ),
+        relatedArticles: fields.document({
+          formatting: true,
+          dividers: true,
+          links: true,
+          label: 'Related Articles',
+        }),
         code: fields.document({
           formatting: true,
           dividers: true,
diff --git a/apps/site/src/app/articles/[article]/error.tsx b/apps/site/src/app/articles/[article]/error.tsx
index 43fbc3b34..32f9b95b4 100644
--- a/apps/site/src/app/articles/[article]/error.tsx
+++ b/apps/site/src/app/articles/[article]/error.tsx
@@ -5,6 +5,7 @@ import { useEffect } from 'react';
 export default function Error({ error, reset }: { error: Error & { digest?: string }; reset: () => void }) {
   useEffect(() => {
     // Log the error to an error reporting service
+    // eslint-disable-next-line no-console
     console.error(error);
   }, [error]);
 
diff --git a/apps/site/src/app/design-system/[...component]/components/content-tabs/components/code-content/code-content.component.tsx b/apps/site/src/app/design-system/[...component]/components/content-tabs/components/code-content/code-content.component.tsx
index 4f8319d24..b451a5e53 100644
--- a/apps/site/src/app/design-system/[...component]/components/content-tabs/components/code-content/code-content.component.tsx
+++ b/apps/site/src/app/design-system/[...component]/components/content-tabs/components/code-content/code-content.component.tsx
@@ -89,9 +89,11 @@ export function CodeContent({ content = [], westpacUIInfo, componentProps, subCo
         </Container>
       </section>
       {componentProps && (
-        <section className="bg-white py-7 sm:pb-10 sm:pt-15">
+        <section className="border-t border-t-border bg-white py-7 sm:pb-10 sm:pt-15">
           <Container>
-            <Heading level={2}>Props</Heading>
+            <Heading level={2} className="!mb-4 sm:!mb-7">
+              Props
+            </Heading>
             <div className="flex flex-col gap-6">
               <ComponentPropsTable componentProps={componentProps} />
               {subComponentProps?.map(subComponentProps => (
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 95952c862..32ac788cc 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
@@ -8,6 +8,7 @@ import { Colors } from '@/components/component-blocks/colors/colors.component';
 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';
+import { Symbols } from '@/components/component-blocks/symbols/symbols.component';
 import { Section } from '@/components/content-blocks/section';
 import { Code, Heading } from '@/components/document-renderer';
 import { RelatedInfo } from '@/components/related-info';
@@ -17,7 +18,7 @@ import { DOCUMENT_RENDERERS } from '../document-renderer';
 
 import { type DesignContentProps } from '.';
 
-export function DesignContent({ designSections, description, relatedComponents }: DesignContentProps) {
+export function DesignContent({ designSections, description, relatedComponents, relatedArticles }: DesignContentProps) {
   const sectionNames = useMemo(() => {
     return designSections?.filter(({ noTitle }) => !noTitle).map(({ title }) => ({ title })) || [];
   }, [designSections]);
@@ -44,6 +45,7 @@ export function DesignContent({ designSections, description, relatedComponents }
                   icons: () => <Icons />,
                   logos: () => <Logos />,
                   pictograms: () => <Pictograms />,
+                  symbols: () => <Symbols />,
                   colors: props => <Colors palette={props.palette} />,
                 }}
               />
@@ -51,7 +53,9 @@ export function DesignContent({ designSections, description, relatedComponents }
           </Section>
         );
       })}
-      {!!relatedComponents?.length && <RelatedInfo relatedComponents={relatedComponents} />}
+      {(!!relatedComponents?.length || !!relatedArticles?.length) && (
+        <RelatedInfo relatedComponents={relatedComponents} relatedArticles={relatedArticles} />
+      )}
     </>
   );
 }
diff --git a/apps/site/src/app/design-system/[...component]/components/content-tabs/components/design-content/design-content.types.tsx b/apps/site/src/app/design-system/[...component]/components/content-tabs/components/design-content/design-content.types.tsx
index 4c6f00e0f..e125ed182 100644
--- a/apps/site/src/app/design-system/[...component]/components/content-tabs/components/design-content/design-content.types.tsx
+++ b/apps/site/src/app/design-system/[...component]/components/content-tabs/components/design-content/design-content.types.tsx
@@ -7,5 +7,6 @@ export type DesignSectionProps = { content: DocumentElement[]; noTitle?: boolean
 export type DesignContentProps = {
   description?: string;
   designSections?: DesignSectionProps[];
+  relatedArticles?: RelatedInfoProps['relatedArticles'];
   relatedComponents?: RelatedInfoProps['relatedComponents'];
 };
diff --git a/apps/site/src/app/design-system/[...component]/components/content-tabs/components/document-renderer.tsx b/apps/site/src/app/design-system/[...component]/components/content-tabs/components/document-renderer.tsx
index 0024ec3cb..72c26605b 100644
--- a/apps/site/src/app/design-system/[...component]/components/content-tabs/components/document-renderer.tsx
+++ b/apps/site/src/app/design-system/[...component]/components/content-tabs/components/document-renderer.tsx
@@ -8,7 +8,7 @@ export const DOCUMENT_RENDERERS: Required<DocumentRendererProps>['renderers'] =
   block: {
     divider: Divider,
     paragraph: props => <Paragraph {...props} className="w-full sm:w-9/12" />,
-    code: props => <Code className="my-4" {...props} showCode />,
+    code: props => <Code className="mb-5 mt-1 sm:mb-8 sm:mt-2" {...props} showCode />,
     heading: Heading,
     list: props => <List {...props} className="sm:w-9/12" />,
     layout: Layout,
diff --git a/apps/site/src/app/design-system/[...component]/components/content-tabs/components/tabs/components/tab/tab.component.tsx b/apps/site/src/app/design-system/[...component]/components/content-tabs/components/tabs/components/tab/tab.component.tsx
index e3b86dae6..61219e9ed 100644
--- a/apps/site/src/app/design-system/[...component]/components/content-tabs/components/tabs/components/tab/tab.component.tsx
+++ b/apps/site/src/app/design-system/[...component]/components/content-tabs/components/tabs/components/tab/tab.component.tsx
@@ -1,5 +1,5 @@
 import { useRef } from 'react';
-import { AriaTabProps, useTab } from 'react-aria';
+import { AriaTabProps, mergeProps, useFocusRing, useTab } from 'react-aria';
 import { Node, TabListState } from 'react-stately';
 
 import { styles } from './tab.styles';
@@ -7,10 +7,11 @@ import { styles } from './tab.styles';
 export function Tab({ item, state }: { item: Node<AriaTabProps>; state: TabListState<AriaTabProps> }) {
   const { key, rendered } = item;
   const ref = useRef(null);
+  const { focusProps, isFocusVisible } = useFocusRing();
   const { tabProps } = useTab({ key }, state, ref);
   const selected = key === state.selectedKey;
   return (
-    <div {...tabProps} ref={ref} className={styles({ selected })}>
+    <div {...mergeProps(tabProps, focusProps)} ref={ref} className={styles({ selected, isFocusVisible })}>
       {rendered}
     </div>
   );
diff --git a/apps/site/src/app/design-system/[...component]/components/content-tabs/components/tabs/components/tab/tab.styles.ts b/apps/site/src/app/design-system/[...component]/components/content-tabs/components/tabs/components/tab/tab.styles.ts
index 1b5986e10..3264da568 100644
--- a/apps/site/src/app/design-system/[...component]/components/content-tabs/components/tabs/components/tab/tab.styles.ts
+++ b/apps/site/src/app/design-system/[...component]/components/content-tabs/components/tabs/components/tab/tab.styles.ts
@@ -1,10 +1,13 @@
 import { tv } from 'tailwind-variants';
 
 export const styles = tv({
-  base: 'relative flex h-9 flex-1 cursor-pointer items-center justify-center border-r border-r-border font-semibold text-muted after:absolute after:inset-x-0 after:bottom-0 after:h-0 after:border-b-[3px] after:border-[transparent] last:border-r-0 sm:h-11 sm:grow-0 sm:px-10 sm:last:border-r',
+  base: 'relative flex h-9 flex-1 cursor-pointer items-center justify-center border-r border-r-border font-semibold text-muted after:absolute after:inset-x-0 after:bottom-0 after:h-0 after:border-b-[3px] after:border-[transparent] last:border-r-0 focus-visible:outline-none sm:h-11 sm:grow-0 sm:px-10 sm:last:border-r',
   variants: {
     selected: {
       true: 'text-text after:border-primary',
     },
+    isFocusVisible: {
+      true: '!outline-offset-0 focus-outline focus:focus-outline focus-visible:focus-outline',
+    },
   },
 });
diff --git a/apps/site/src/app/design-system/[...component]/components/content-tabs/content-tabs.component.tsx b/apps/site/src/app/design-system/[...component]/components/content-tabs/content-tabs.component.tsx
index a1802e394..dd86a71d8 100644
--- a/apps/site/src/app/design-system/[...component]/components/content-tabs/content-tabs.component.tsx
+++ b/apps/site/src/app/design-system/[...component]/components/content-tabs/content-tabs.component.tsx
@@ -13,6 +13,7 @@ const TabPanelByKey = ({ tabKey, content }: { content: ContentTabsProps; tabKey:
         description={content.description}
         designSections={content.designSections}
         relatedComponents={content.relatedComponents}
+        relatedArticles={content.relatedArticles}
       />
     );
   }
diff --git a/apps/site/src/app/design-system/[...component]/components/content-tabs/content-tabs.types.ts b/apps/site/src/app/design-system/[...component]/components/content-tabs/content-tabs.types.ts
index 775259924..69b9305ec 100644
--- a/apps/site/src/app/design-system/[...component]/components/content-tabs/content-tabs.types.ts
+++ b/apps/site/src/app/design-system/[...component]/components/content-tabs/content-tabs.types.ts
@@ -1,6 +1,7 @@
 import { DocumentElement } from '@keystatic/core';
 import { ComponentProps } from '@westpac/ui';
 
+import { RelatedInfoLinks } from '@/components/related-info/related-info.types';
 import { WestpacUIInfo } from '@/types/westpac-ui-info.types';
 
 import { AccessibilitySectionProps } from './components/accessibility-content/accessibility-content.types';
@@ -13,7 +14,8 @@ export type ContentTabsProps = {
   componentProps?: ComponentProps;
   description?: string;
   designSections?: DesignSectionProps[];
-  relatedComponents?: string[];
+  relatedArticles?: DocumentElement[];
+  relatedComponents?: RelatedInfoLinks[];
   subComponentProps: ComponentProps[];
   westpacUIInfo: WestpacUIInfo;
 };
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 fb8c36862..cd8c93764 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 transition-colors sm:px-4 md:top-[-10.125rem] md:h-[14.25rem] md:items-end',
+      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',
       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',
@@ -17,7 +17,7 @@ export const styles = tv(
         },
         false: {
           base: '',
-          title: 'md:typography-brand-2 md:px-2 md:pb-[1.75rem] md:pt-5 md:leading-none lg:ml-2',
+          title: 'md:typography-brand-2 md:px-2 md:pb-[1.6875rem] md:pt-5 md:leading-none lg:ml-2',
         },
       },
       brand: {
diff --git a/apps/site/src/app/design-system/[...component]/page.tsx b/apps/site/src/app/design-system/[...component]/page.tsx
index ac4571274..6723f9a5b 100644
--- a/apps/site/src/app/design-system/[...component]/page.tsx
+++ b/apps/site/src/app/design-system/[...component]/page.tsx
@@ -3,6 +3,7 @@ import json from '@westpac/ui/component-type.json';
 import { Metadata } from 'next';
 
 import { reader } from '@/app/reader';
+import { RelatedInfoLinks } from '@/components/related-info/related-info.types';
 
 import { ContentTabs } from './components';
 import { AccessibilitySectionProps } from './components/content-tabs/components/accessibility-content/accessibility-content.types';
@@ -48,12 +49,12 @@ export default async function ComponentPage({ params }: { params: { component: s
     reader.collections.designSystem.readOrThrow(component.join('/')),
     reader.singletons.westpacUIInfo.readOrThrow(),
   ]);
-  const componentName = component[1]
-    .split('-')
+  const componentName = component?.[1]
+    ?.split('-')
     .map(name => `${name[0].toUpperCase()}${name.slice(1)}`)
     .join('');
 
-  const [designSections, accessibilitySections, accessibilityDemo, code] = await Promise.all([
+  const [designSections, accessibilitySections, accessibilityDemo, code, relatedArticles] = await Promise.all([
     Promise.all(
       content.design.map(section => {
         return new Promise<DesignSectionProps>((resolve, reject) => {
@@ -99,10 +100,12 @@ export default async function ComponentPage({ params }: { params: { component: s
     ),
     content?.accessibilityDemo(),
     content?.code(),
+    content?.relatedArticles(),
   ]);
 
   const codeIsEmpty = code[0].children.length <= 1 && !code[0].children[0].text;
   const accessibilityIsEmpty = accessibilityDemo[0].children.length <= 1 && !accessibilityDemo[0].children[0].text;
+  const relatedArticlesIsEmpty = relatedArticles[0].children.length <= 1 && !relatedArticles[0].children[0].text;
 
   const componentProps: ComponentProps | undefined = (json as any)[componentName];
   const subComponentProps = Object.entries(json).reduce((acc, [key, value]: [string, any]) => {
@@ -121,7 +124,8 @@ export default async function ComponentPage({ params }: { params: { component: s
         code: codeIsEmpty ? undefined : code,
         description: content.description,
         designSections,
-        relatedComponents: content.relatedInformation.filter(value => !!value) as string[],
+        relatedArticles: relatedArticlesIsEmpty ? undefined : relatedArticles,
+        relatedComponents: content.relatedComponents.filter(value => !!value) as RelatedInfoLinks[],
         componentProps,
         subComponentProps,
       }}
diff --git a/apps/site/src/app/design-system/components/hero/hero.component.tsx b/apps/site/src/app/design-system/components/hero/hero.component.tsx
index df304c05c..6df926eac 100644
--- a/apps/site/src/app/design-system/components/hero/hero.component.tsx
+++ b/apps/site/src/app/design-system/components/hero/hero.component.tsx
@@ -19,37 +19,41 @@ export function Hero() {
       <BackgroundImage brand={brand} type="hero" />
       <Header brand={brand} />
       <Container className="relative z-10">
-        <Grid className="mb-4 xsl:mb-10">
+        <Grid className="mb-4 !gap-y-0 xsl:mb-10">
           <Item span={{ initial: 10, xsl: 12, sm: 10 }} start={{ initial: 2, xsl: 1, sm: 2 }} className="mb-4 xsl:mb-6">
             <h2 className={heading()}>
               Deliver quality user interfaces that scale – <em>fast!</em>
             </h2>
           </Item>
           <Item span={10} start={2}>
-            <p className="typography-body-8">Simplify your projects with reusable components and patterns</p>
+            <p className="typography-body-8 mb-2">Simplify your projects with reusable components and patterns</p>
           </Item>
         </Grid>
-        <Grid tag="ul" className="typography-body-8 gap-x-0 gap-y-4 xsl:gap-x-5">
+        <Grid tag="ul" className="typography-body-8 mb-[1rem] gap-x-0 gap-y-4 xsl:gap-x-5 sm:!gap-5">
           <Item tag="li" span={{ initial: 12, xsl: 4 }} className=" flex flex-col items-center ">
-            <div className="mb-3 xsl:mb-4">
+            <div className="mb-3">
               <StopwatchPictogram mode="light" className="hidden sm:inline-block" />
               <StopwatchPictogram mode="duo" className="inline-block sm:hidden" />
             </div>
-            <div>Go to market faster leveraging tools to get you up and running instantly</div>
+            <div className="max-w-[18.125rem]">
+              Go to market faster leveraging tools to get you up and running instantly
+            </div>
           </Item>
           <Item tag="li" span={{ initial: 12, xsl: 4 }} className=" flex flex-col items-center ">
-            <div className="mb-3 xsl:mb-4">
+            <div className="mb-3">
               <TruckPictogram mode="light" className="hidden sm:inline-block" />
               <TruckPictogram mode="duo" className="inline-block sm:hidden" />
             </div>
-            <div>Design, build and ship consistent brand experiences</div>
+            <div className="max-w-[18.125rem]">Design, build and ship consistent brand experiences</div>
           </Item>
           <Item tag="li" span={{ initial: 12, xsl: 4 }} className=" flex flex-col items-center ">
-            <div className="mb-3 xsl:mb-4">
+            <div className="mb-3">
               <AccessibilityPictogram mode="light" className="hidden sm:inline-block" />
-              <TruckPictogram mode="duo" className="inline-block sm:hidden" />
+              <AccessibilityPictogram mode="duo" className="inline-block sm:hidden" />
+            </div>
+            <div className="max-w-[18.125rem]">
+              Create more accessible solutions that are inclusive of all customers
             </div>
-            <div>Create more accessible solutions that are inclusive of all customers</div>
           </Item>
         </Grid>
       </Container>
diff --git a/apps/site/src/app/design-system/components/hero/hero.styles.ts b/apps/site/src/app/design-system/components/hero/hero.styles.ts
index 1ed26aee1..92886cda9 100644
--- a/apps/site/src/app/design-system/components/hero/hero.styles.ts
+++ b/apps/site/src/app/design-system/components/hero/hero.styles.ts
@@ -4,7 +4,7 @@ import { tv } from 'tailwind-variants';
 export const styles = tv({
   slots: {
     base: 'relative overflow-hidden bg-background pb-7 text-center antialiased sm:pb-11 sm:text-white',
-    heading: 'typography-brand-4 mt-15 sm:typography-brand-1 sm:mt-7',
+    heading: 'typography-brand-4 mt-15 !leading-none sm:typography-brand-1 sm:mt-7',
   },
   variants: {
     brand: {
diff --git a/apps/site/src/app/design-system/error.tsx b/apps/site/src/app/design-system/error.tsx
index 43fbc3b34..32f9b95b4 100644
--- a/apps/site/src/app/design-system/error.tsx
+++ b/apps/site/src/app/design-system/error.tsx
@@ -5,6 +5,7 @@ import { useEffect } from 'react';
 export default function Error({ error, reset }: { error: Error & { digest?: string }; reset: () => void }) {
   useEffect(() => {
     // Log the error to an error reporting service
+    // eslint-disable-next-line no-console
     console.error(error);
   }, [error]);
 
diff --git a/apps/site/src/components/code/code.inject-components.ts b/apps/site/src/components/code/code.inject-components.ts
index 2600e171c..fcb2179fd 100644
--- a/apps/site/src/components/code/code.inject-components.ts
+++ b/apps/site/src/components/code/code.inject-components.ts
@@ -45,6 +45,12 @@ export {
 } from '@westpac/ui';
 
 export {
+  NewWindowIcon,
+  DropDownIcon,
+  PrintIcon,
+  PlayIcon,
+  PauseIcon,
+  AddCircleIcon,
   AddIcon,
   TickCircleIcon,
   ArrowRightIcon,
@@ -80,6 +86,9 @@ export {
   GiftIcon,
   WarningIcon,
   SuccessIcon,
+  ArrowLeftIcon,
+  GenericFileIcon,
+  GithubIcon,
 } from '@westpac/ui/icon';
 
 export { GiftPictogram } from '@westpac/ui/pictogram';
diff --git a/apps/site/src/components/code/components/live-code/live-code.component.tsx b/apps/site/src/components/code/components/live-code/live-code.component.tsx
index 49cbb1249..734d6a0d0 100644
--- a/apps/site/src/components/code/components/live-code/live-code.component.tsx
+++ b/apps/site/src/components/code/components/live-code/live-code.component.tsx
@@ -3,6 +3,7 @@ import copy from 'clipboard-copy';
 import { themes } from 'prism-react-renderer';
 import { KeyboardEvent, useCallback, useContext, useId, useRef, useState } from 'react';
 import { LiveContext, LiveEditor, LivePreview } from 'react-live';
+import { VariantProps } from 'tailwind-variants';
 
 import { styles as liveCodeStyles } from './live-code.styles';
 import { LiveCodeProps } from './live-code.types';
@@ -15,7 +16,10 @@ export function LiveCode({ showCode = false, enableLiveCode = true, className }:
   const [localCopy, setLocalCopy] = useState<string>(live.code);
   const [isCodeVisible, toggleIsCodeVisible] = useState(showCode);
 
-  const styles = liveCodeStyles({ isCodeVisible });
+  const styles = liveCodeStyles({
+    isCodeVisible,
+    language: live.language as VariantProps<typeof liveCodeStyles>['language'],
+  });
 
   const copyLiveCode = useCallback(() => {
     copy(localCopy);
@@ -56,7 +60,7 @@ export function LiveCode({ showCode = false, enableLiveCode = true, className }:
         {enableLiveCode && (
           <div className={styles.buttonWrapper({})}>
             <button
-              className="typography-body-10 flex items-center gap-1 border-l border-l-border p-3 transition-opacity hover:opacity-100"
+              className="typography-body-10 border-l-border flex items-center gap-1 border-l p-3 transition-opacity hover:opacity-100"
               ref={liveCodeToggleButton}
               onClick={() => toggleIsCodeVisible(state => !state)}
               aria-controls={codeId}
diff --git a/apps/site/src/components/code/components/live-code/live-code.styles.ts b/apps/site/src/components/code/components/live-code/live-code.styles.ts
index e95e34ae7..a2a1c6e14 100644
--- a/apps/site/src/components/code/components/live-code/live-code.styles.ts
+++ b/apps/site/src/components/code/components/live-code/live-code.styles.ts
@@ -2,16 +2,22 @@ import { tv } from 'tailwind-variants';
 
 export const styles = tv({
   slots: {
-    base: 'max-w-5xl overflow-hidden bg-white p-6 pb-0',
-    displayWrapper: 'relative -mx-6 -mt-6 border-muted-50 p-6',
-    error: 'flex gap-2 rounded-md bg-danger-10 p-2 text-danger-90',
+    base: 'max-w-5xl bg-white p-6 pb-0',
+    displayWrapper: 'border-muted-50 relative -mx-6 -mt-6 p-6',
+    error: 'bg-danger-10 text-danger-90 flex gap-2 rounded-md p-2',
     buttonWrapper: '-mx-6 -mb-6 flex items-center justify-end ',
-    codeWrapper: 'relative -mx-6 border-t border-muted-50',
+    codeWrapper: 'border-muted-50 relative -mx-6 border-t',
     arrowIcon: 'transition-transform',
     copyCodeButton:
       'typography-body-10 absolute right-0 top-0 p-1 pr-2 text-white opacity-50 transition-opacity hover:opacity-100',
   },
   variants: {
+    language: {
+      html: {
+        base: 'bg-transparent',
+        displayWrapper: 'p-0',
+      },
+    },
     isCodeVisible: {
       true: {
         codeWrapper: 'block',
diff --git a/apps/site/src/components/component-blocks/foundation-blocks.tsx b/apps/site/src/components/component-blocks/foundation-blocks.tsx
index 7eea39af3..b7d1a98f8 100644
--- a/apps/site/src/components/component-blocks/foundation-blocks.tsx
+++ b/apps/site/src/components/component-blocks/foundation-blocks.tsx
@@ -2,10 +2,12 @@ import { colors } from './colors/colors.preview';
 import { icons } from './icons/icons.preview';
 import { logos } from './logos/logos.preview';
 import { pictograms } from './pictograms/pictograms.preview';
+import { symbols } from './symbols/symbols.preview';
 
 export const foundationBlocks = {
   colors,
   icons,
   logos,
   pictograms,
+  symbols,
 };
diff --git a/apps/site/src/components/component-blocks/symbols/symbols.component.tsx b/apps/site/src/components/component-blocks/symbols/symbols.component.tsx
new file mode 100644
index 000000000..39a00beb7
--- /dev/null
+++ b/apps/site/src/components/component-blocks/symbols/symbols.component.tsx
@@ -0,0 +1,58 @@
+'use client';
+
+import { Grid, Item } from '@westpac/ui/grid';
+import { Input } from '@westpac/ui/input';
+import * as AllLogos from '@westpac/ui/symbol';
+import { ChangeEvent, useCallback, useMemo, useState } from 'react';
+
+export const Symbols = () => {
+  const [search, setSearch] = useState('');
+
+  const filteredSymbols = useMemo(() => {
+    return Object.entries(AllLogos).reduce(
+      (acc: { Logo: React.FC<AllLogos.SymbolProps>; key: string }[], [logoName, Logo]) => {
+        if (logoName.toUpperCase().indexOf(search.toUpperCase()) === -1 || !logoName.includes('Symbol')) {
+          return acc;
+        }
+        return [...acc, { key: logoName, Logo }];
+      },
+      [],
+    );
+  }, [search]);
+
+  const foundText = filteredSymbols.length === 1 ? 'Found 1 symbol' : `Found ${filteredSymbols.length} symbols`;
+
+  const handleOnChange = useCallback(({ target: { value } }: ChangeEvent<HTMLInputElement>) => {
+    setSearch(value);
+  }, []);
+
+  return (
+    <div>
+      <div className="bg-light mb-4 p-4">
+        <Grid>
+          <Item span={{ initial: 12, sm: 6 }}>
+            <div className="flex flex-col items-start sm:flex-row sm:items-center">
+              <label className="mb-2 mr-[1rem] sm:mb-0" htmlFor="filter-icons">
+                Filter by name
+              </label>
+              <Input id="filter-icon" value={search} onChange={handleOnChange} className="w-full" />
+            </div>
+          </Item>
+        </Grid>
+      </div>
+      <Grid>
+        <Item span={12}>
+          <p className="text-muted text-right italic">{foundText}</p>
+        </Item>
+        {filteredSymbols.map(({ key, Logo }) => (
+          <Item key={key} span={{ initial: 12, sm: 6, md: 4, lg: 3 }} className="flex">
+            <div className="xsl:mb-4 mb-2 flex grow flex-col items-center justify-center bg-white px-2 pb-3 pt-6">
+              <Logo className="mb-6" />
+              <span className="text-muted text-[0.6875rem]">{key}</span>
+            </div>
+          </Item>
+        ))}
+      </Grid>
+    </div>
+  );
+};
diff --git a/apps/site/src/components/component-blocks/symbols/symbols.preview.tsx b/apps/site/src/components/component-blocks/symbols/symbols.preview.tsx
new file mode 100644
index 000000000..001df305c
--- /dev/null
+++ b/apps/site/src/components/component-blocks/symbols/symbols.preview.tsx
@@ -0,0 +1,11 @@
+import { NotEditable, component } from '@keystatic/core';
+
+export const symbols = component({
+  preview: () => (
+    <NotEditable>
+      <div>All Symbols</div>
+    </NotEditable>
+  ),
+  label: 'Symbols',
+  schema: {},
+});
diff --git a/apps/site/src/components/document-renderer/heading/heading.style.ts b/apps/site/src/components/document-renderer/heading/heading.style.ts
index b85fa0ae6..798395d0b 100644
--- a/apps/site/src/components/document-renderer/heading/heading.style.ts
+++ b/apps/site/src/components/document-renderer/heading/heading.style.ts
@@ -10,8 +10,8 @@ export const styles = tv({
     },
     level: {
       1: 'typography-body-5 mb-3',
-      2: 'typography-body-7 mb-7 sm:typography-body-6',
-      3: 'typography-body-8 mb-2',
+      2: 'typography-body-7 mb-2 sm:typography-body-6 sm:mb-3',
+      3: 'typography-body-8 my-2 first:mt-0',
       4: 'typography-body-9 mb-2',
       5: 'typography-body-10 mb-2',
       6: 'typography-body-10 mb-2',
diff --git a/apps/site/src/components/related-info/articles-renderer.tsx b/apps/site/src/components/related-info/articles-renderer.tsx
new file mode 100644
index 000000000..70760cd13
--- /dev/null
+++ b/apps/site/src/components/related-info/articles-renderer.tsx
@@ -0,0 +1,17 @@
+import { DocumentRendererProps } from '@keystatic/core/renderer';
+
+import { Link } from '@/components/content-blocks/typography';
+import { Divider, Heading, Paragraph } from '@/components/document-renderer';
+import { Layout } from '@/components/document-renderer/layout';
+
+export const DOCUMENT_RENDERERS: Required<DocumentRendererProps>['renderers'] = {
+  block: {
+    divider: Divider,
+    paragraph: props => <Paragraph {...props} className="w-full last:mb-2" />,
+    heading: Heading,
+    layout: Layout,
+  },
+  inline: {
+    link: Link,
+  },
+};
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 5c3577510..d700dc65c 100644
--- a/apps/site/src/components/related-info/related-info.component.tsx
+++ b/apps/site/src/components/related-info/related-info.component.tsx
@@ -1,37 +1,53 @@
-import { Container, Grid, Item } from '@westpac/ui';
-import { ArrowRightIcon, CubeIcon } from '@westpac/ui/icon';
+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 { Container } from '@/app/design-system/components';
+
 import { Section } from '../content-blocks/section';
 import { Heading } from '../document-renderer';
 
+import { DOCUMENT_RENDERERS } from './articles-renderer';
 import { RelatedInfoProps } from './related-info.types';
 
-export function RelatedInfo({ relatedComponents = [] }: RelatedInfoProps) {
+export function RelatedInfo({ relatedComponents = [], relatedArticles }: RelatedInfoProps) {
+  const relatedComponentsEmpty = relatedComponents?.length < 1;
   return (
     <Section className="bg-white">
-      <Container>
+      <Container className="">
         <Heading level={2} className="mb-4 sm:mb-7">
           Related information
         </Heading>
         <Grid>
-          <Item span={{ initial: 12, sm: 4 }}>
-            <h3 className="typography-body-8 flex items-center justify-between border-b border-neutral pb-3 font-bold">
-              Components
-              <CubeIcon color="muted" />
-            </h3>
-            <ul>
-              {relatedComponents.map(relatedComponent => {
-                const componentURL = relatedComponent.split('/').reverse()[0];
-                const componentName = componentURL[0].toUpperCase() + componentURL.slice(1).split('-').join(' ');
-                return (
-                  <li key={relatedComponent}>
-                    <Link href={`/design-system/components/${componentURL}?brand=wbc`}>{componentName}</Link>
-                  </li>
-                );
-              })}
-            </ul>
-          </Item>
+          {!relatedComponentsEmpty && (
+            <Item span={{ initial: 12, xsl: 4 }}>
+              <h3 className="typography-body-8 flex items-center justify-between border-b border-neutral pb-3 font-bold">
+                Components
+                <CubeIcon color="muted" />
+              </h3>
+              <ul>
+                {relatedComponents.map(({ title, slug }) => {
+                  return (
+                    <li key={title}>
+                      <Link href={`/design-system/${slug}?brand=wbc`}>{title}</Link>
+                    </li>
+                  );
+                })}
+              </ul>
+            </Item>
+          )}
+          {relatedArticles && (
+            <Item span={12} start={{ initial: 1, xsl: relatedComponentsEmpty ? 1 : 6 }}>
+              <h3 className="typography-body-8 flex items-center justify-between border-b border-neutral pb-3 font-bold">
+                Articles
+                <GenericFileIcon color="muted" />
+              </h3>
+              <div className="mt-3">
+                <DocumentRenderer document={relatedArticles} renderers={DOCUMENT_RENDERERS} />
+              </div>
+            </Item>
+          )}
         </Grid>
       </Container>
     </Section>
diff --git a/apps/site/src/components/related-info/related-info.types.ts b/apps/site/src/components/related-info/related-info.types.ts
index a0cdacef2..a2e060e94 100644
--- a/apps/site/src/components/related-info/related-info.types.ts
+++ b/apps/site/src/components/related-info/related-info.types.ts
@@ -1,3 +1,11 @@
+import { DocumentElement } from '@keystatic/core';
+
 export type RelatedInfoProps = {
-  relatedComponents?: string[];
+  relatedArticles?: DocumentElement[];
+  relatedComponents?: RelatedInfoLinks[];
 };
+
+export interface RelatedInfoLinks {
+  slug: string;
+  title: string;
+}
diff --git a/apps/site/src/content/design-system/accessibility/design-system-accessibility/relatedArticles.mdoc b/apps/site/src/content/design-system/accessibility/design-system-accessibility/relatedArticles.mdoc
new file mode 100644
index 000000000..0fae254f3
--- /dev/null
+++ b/apps/site/src/content/design-system/accessibility/design-system-accessibility/relatedArticles.mdoc
@@ -0,0 +1,3 @@
+[WCAG 2.1 Reading level](https://www.w3.org/WAI/WCAG21/Understanding/reading-level.html)
+
+[Writing for GOV.UK](https://www.gov.uk/guidance/content-design/writing-for-gov-uk)
diff --git a/apps/site/src/content/design-system/components/a11y/index.yaml b/apps/site/src/content/design-system/components/a11y/index.yaml
index 4b1d7b9a7..a7d4d01f9 100644
--- a/apps/site/src/content/design-system/components/a11y/index.yaml
+++ b/apps/site/src/content/design-system/components/a11y/index.yaml
@@ -1,4 +1,4 @@
-name: A11y
+name: A11y (Dev)
 description: >-
   This is a developer-only accessibility package that is used to ensure an
   optimal experience for users of assistive technologies.
diff --git a/apps/site/src/content/design-system/components/accordion/index.yaml b/apps/site/src/content/design-system/components/accordion/index.yaml
index 63de2675d..3c72c43ba 100644
--- a/apps/site/src/content/design-system/components/accordion/index.yaml
+++ b/apps/site/src/content/design-system/components/accordion/index.yaml
@@ -28,3 +28,8 @@ accessibility:
   - title:
       name: Accessibility API
       slug: accessibility-api
+relatedComponents:
+  - title: Wells
+    slug: components/well
+  - title: Panels
+    slug: components/panel
diff --git a/apps/site/src/content/design-system/components/alert/accessibilityDemo.mdoc b/apps/site/src/content/design-system/components/alert/accessibilityDemo.mdoc
index 293d28049..c31aadceb 100644
--- a/apps/site/src/content/design-system/components/alert/accessibilityDemo.mdoc
+++ b/apps/site/src/content/design-system/components/alert/accessibilityDemo.mdoc
@@ -15,7 +15,7 @@
   <ComponentTitle>Danger</ComponentTitle>
   <Alert look="danger" dismissible>
     <strong>Please fix the 3 errors listed below</strong>
-    <ul className="[&_li]:m-1 [&_li]:underline">
+    <ul className="[&_li]:my-1 [&_li]:underline">
       <li>Select a title</li>
       <li>Enter your given name</li>
       <li>Enter your family name</li>
diff --git a/apps/site/src/content/design-system/components/alert/code.mdoc b/apps/site/src/content/design-system/components/alert/code.mdoc
index a70dcfec3..cf2720b59 100644
--- a/apps/site/src/content/design-system/components/alert/code.mdoc
+++ b/apps/site/src/content/design-system/components/alert/code.mdoc
@@ -1,100 +1,41 @@
-### Looks
+### Default alert
 
 ```jsx
-<div>
-  <Alert look="info">
-    <strong>Heads up!</strong> This alert needs your attention, but it’s not super important. <a href="#">Link</a>
-  </Alert>
-  <Alert look="success">
-    <strong>Well done!</strong> You successfully read this important alert message. <a href="#">Link</a>
-  </Alert>
-  <Alert look="warning">
-    <strong>Warning!</strong> Better check yourself, you’re not looking too good. <a href="#">Link</a>
-  </Alert>
-  <Alert look="danger">
-    <strong>Oh snap!</strong> Change a few things up and try submitting again. <a href="#">Link</a>
-  </Alert>
-  <Alert look="system">
-    <strong>System Error 8942:</strong> The server is no responding. Please try again later. Sorry for the
-    inconvenience. <a href="#">Link</a>
-  </Alert>
-</div>
+<Alert>This is a default alert.</Alert>
 ```
 
----
-
-### Text
+### Alert looks
 
 ```jsx
 <div>
-  <Alert look="info" mode="text">
-    <strong>Heads up!</strong> This alert needs your attention, but it’s not super important. <a href="#">Link</a>
-  </Alert>
-  <Alert look="success" mode="text">
+  <ComponentTitle>Success</ComponentTitle>
+  <Alert look="success">
     <strong>Well done!</strong> You successfully read this important alert message. <a href="#">Link</a>
   </Alert>
-  <Alert look="warning" mode="text">
+  <ComponentTitle>Info</ComponentTitle>
+  <Alert look="info">
+    <strong>Heads up!</strong> This alert needs your attention, but it’s not super important. <a href="#">Link</a>
+  </Alert>
+  <ComponentTitle>Warning</ComponentTitle>
+  <Alert look="warning">
     <strong>Warning!</strong> Better check yourself, you’re not looking too good. <a href="#">Link</a>
   </Alert>
-  <Alert look="danger" mode="text">
+  <ComponentTitle>Danger</ComponentTitle>
+  <Alert look="danger">
     <strong>Oh snap!</strong> Change a few things up and try submitting again. <a href="#">Link</a>
   </Alert>
-  <Alert look="system" mode="text">
+  <ComponentTitle>System</ComponentTitle>
+  <Alert look="system">
     <strong>System Error 8942:</strong> The server is no responding. Please try again later. Sorry for the
     inconvenience. <a href="#">Link</a>
   </Alert>
 </div>
 ```
 
----
-
-### Heading
-
-```jsx
-<Alert look="info" heading="I am an alert heading">
-  This alert needs your attention, but it’s not super important. Lorem ipsum dolor sit amet, consectetur adipisicing
-  elit. Quo dolor provident quasi nisi officia tempore fuga autem, animi iste molestiae, qui omnis doloribus aliquid
-  ipsam rem fugiat veniam voluptatem accusamus! Lorem ipsum dolor sit amet, consectetur adipisicing elit.
-  <a href="#">Link</a>
-</Alert>
-```
-
----
-
-### Custom
-
-```jsx
-<Alert look="info" icon={TelephoneIcon}>
-  <strong>Heads up!</strong> Only info look alerts allow custom icons. <a href="#">Link</a>
-</Alert>
-```
-
----
-
-### Dismissible
+### Dismissible alert
 
 ```jsx
 <Alert look="info" dismissible>
   <strong>Heads up!</strong> This alert needs your attention, but it’s not super important. <a href="#">Link</a>
 </Alert>
 ```
-
----
-
-### Controlled
-
-```jsx
-() => {
-  const [open, setOpen] = useState(true);
-  return (
-    <Fragment>
-      <Button className="mb-3" onClick={() => setOpen(open => !open)}>
-        {open ? 'Hide' : 'Show'}
-      </Button>
-      <Alert look="info" dismissible open={open} onClose={() => setOpen(false)}>
-        <strong>Heads up!</strong> This alert needs your attention, but it’s not super important. <a href="#">Link</a>
-      </Alert>
-    </Fragment>
-  );
-};
-```
diff --git a/apps/site/src/content/design-system/components/alert/design/alert-boxes/content.mdoc b/apps/site/src/content/design-system/components/alert/design/alert-boxes/content.mdoc
index 1eb4d190d..98cd80015 100644
--- a/apps/site/src/content/design-system/components/alert/design/alert-boxes/content.mdoc
+++ b/apps/site/src/content/design-system/components/alert/design/alert-boxes/content.mdoc
@@ -2,33 +2,33 @@ Alerts come in five different styles and are configurable to allow for simple st
 
 ```jsx
 <div>
-  <p className="typography-body-10 mb-[0.875rem] text-muted italic">Success</p>
+  <ComponentTitle>Success</ComponentTitle>
   <Alert look="success">
     <strong>Thank you</strong> Your account has successfully been opened.
   </Alert>
-  <p className="typography-body-10 mb-[0.875rem] text-muted italic">Information</p>
+  <ComponentTitle>Information</ComponentTitle>
   <Alert look="info" dismissible>
     <strong>Changed Opening Hours</strong> The opening hours for this branch have changed.
   </Alert>
-  <p className="typography-body-10 mb-[0.875rem] text-muted italic">Warning</p>
+  <ComponentTitle>Warning</ComponentTitle>
   <Alert look="warning" dismissible>
     <strong>Time out</strong> Please make sure you complete this process, this operation will time out in 5 min.
   </Alert>
-  <p className="typography-body-10 mb-[0.875rem] text-muted italic">Danger</p>
+  <ComponentTitle>Danger</ComponentTitle>
   <Alert look="danger" dismissible>
     <strong>Please fix the 3 errors listed below</strong>
-    <ul className="[&_li]:m-1 [&_li]:underline">
+    <ul className="[&_li]:my-1 [&_li]:underline">
       <li>Select a title</li>
       <li>Enter your given name</li>
       <li>Enter your family name</li>
     </ul>
   </Alert>
-  <p className="typography-body-10 mb-[0.875rem] text-muted italic">System error</p>
+  <ComponentTitle>System error</ComponentTitle>
   <Alert look="system" dismissible>
     <strong>System Error</strong> The server is not responding. Please try again later. We are sorry for any
     inconvenience.
   </Alert>
-  <p className="typography-body-10 mb-[0.875rem] text-muted italic">Flexible info style icon</p>
+  <ComponentTitle>Flexible info style icon</ComponentTitle>
   <Alert look="info" icon={PhoneIcon}>
     Please make sure your mobile number is correct, we will use this to contact you if we have any questions about your
     application.
diff --git a/apps/site/src/content/design-system/components/alert/design/alert-text/content.mdoc b/apps/site/src/content/design-system/components/alert/design/alert-text/content.mdoc
index ff2d4492e..ee8f7ed9b 100644
--- a/apps/site/src/content/design-system/components/alert/design/alert-text/content.mdoc
+++ b/apps/site/src/content/design-system/components/alert/design/alert-text/content.mdoc
@@ -2,19 +2,19 @@ Alert text comes in four different styles and is configurable to allow for simpl
 
 ```jsx
 <div>
-  <p className="typography-body-10 mb-[0.875rem] text-muted italic">Success</p>
+  <ComponentTitle>Success</ComponentTitle>
   <Alert look="success" mode="text">
     Your account has successfully been opened.
   </Alert>
-  <p className="typography-body-10 mb-[0.875rem] text-muted italic">Information</p>
+  <ComponentTitle>Information</ComponentTitle>
   <Alert look="info" mode="text">
     The opening hours for this branch have changed.
   </Alert>
-  <p className="typography-body-10 mb-[0.875rem] text-muted italic">Warning</p>
+  <ComponentTitle>Warning</ComponentTitle>
   <Alert look="warning" mode="text">
     Please make sure you complete this process, this operation will time out in 5 min.
   </Alert>
-  <p className="typography-body-10 mb-[0.875rem] text-muted italic">Danger</p>
+  <ComponentTitle>Danger</ComponentTitle>
   <Alert look="danger" mode="text">
     Please enter a valid account number.
   </Alert>
diff --git a/apps/site/src/content/design-system/components/alert/index.yaml b/apps/site/src/content/design-system/components/alert/index.yaml
index 009203f9a..5f1973a22 100644
--- a/apps/site/src/content/design-system/components/alert/index.yaml
+++ b/apps/site/src/content/design-system/components/alert/index.yaml
@@ -31,4 +31,8 @@ accessibility:
   - title:
       name: Accessibility API
       slug: accessibility-api
-relatedInformation: []
+relatedComponents:
+  - title: Colours
+    slug: foundation/colour
+  - title: Icons
+    slug: foundation/icon
diff --git a/apps/site/src/content/design-system/components/badge/code.mdoc b/apps/site/src/content/design-system/components/badge/code.mdoc
index 463b1adcf..bf5efdddc 100644
--- a/apps/site/src/content/design-system/components/badge/code.mdoc
+++ b/apps/site/src/content/design-system/components/badge/code.mdoc
@@ -1,33 +1,21 @@
 ## Autocomplete
 
 ```tsx
-() => {
-  const COLORS = ['danger', 'faint', 'hero', 'info', 'neutral', 'primary', 'success', 'warning'] as const;
-
-  const INVERTED_COLORS = [
-    'danger-inverted',
-    'faint-inverted',
-    'hero-inverted',
-    'info-inverted',
-    'neutral-inverted',
-    'primary-inverted',
-    'success-inverted',
-    'warning-inverted',
-  ] as const;
-
-  return (
-    <div className="flex flex-wrap flex-col gap-3">
-      <div className="flex gap-2">
-        {COLORS.map(color => (
-          <Badge color={color}>{color}</Badge>
-        ))}
-      </div>
-      <div className="flex flex-wrap gap-2 bg-muted p-2">
-        {INVERTED_COLORS.map(color => (
-          <Badge color={color}>{color}</Badge>
-        ))}
-      </div>
-    </div>
-  );
-};
+<Fragment>
+  <p className="my-2">
+    <Badge >Default</Badge>
+  </p>
+  <p className="my-2">
+    <Badge color="primary">Primary</Badge>{" "}
+    <Badge color="hero">Hero</Badge>{" "}
+    <Badge color="neutral">Neutral</Badge>{" "}
+    <Badge color="faint">Faint</Badge>
+  </p>
+  <p className="my-2">
+    <Badge color="success" >Success</Badge>{" "}
+    <Badge color="info" >Info</Badge>{" "}
+    <Badge color="warning" >Warning</Badge>{" "}
+    <Badge color="danger" >Danger</Badge>
+  </p>
+</Fragment>
 ```
diff --git a/apps/site/src/content/design-system/components/badge/design/badge-styles/content.mdoc b/apps/site/src/content/design-system/components/badge/design/badge-styles/content.mdoc
index d5fc5f4ef..6334769d5 100644
--- a/apps/site/src/content/design-system/components/badge/design/badge-styles/content.mdoc
+++ b/apps/site/src/content/design-system/components/badge/design/badge-styles/content.mdoc
@@ -4,31 +4,15 @@ Badges come in 2 different styles, _Default_ and _Pill._ Each style has 8 colour
 
 ```tsx
 () => {
-  const COLORS = ['danger', 'faint', 'hero', 'info', 'neutral', 'primary', 'success', 'warning'] as const;
-
-  const INVERTED_COLORS = [
-    'danger-inverted',
-    'faint-inverted',
-    'hero-inverted',
-    'info-inverted',
-    'neutral-inverted',
-    'primary-inverted',
-    'success-inverted',
-    'warning-inverted',
-  ] as const;
+  const COLORS = ['danger', 'warning', 'success', 'info', 'primary', 'hero', 'neutral', 'faint'] as const;
 
   return (
-    <div className="flex flex-wrap flex-col gap-3">
-      <div className="flex gap-2">
-        {COLORS.map(color => (
-          <Badge color={color}>{color}</Badge>
-        ))}
-      </div>
-      <div className="flex flex-wrap gap-2 bg-muted p-2">
-        {INVERTED_COLORS.map(color => (
-          <Badge color={color}>{color}</Badge>
-        ))}
-      </div>
+    <div className="flex gap-1 flex-wrap w-[15.625rem]">
+      {COLORS.map(color => (
+        <Badge className="my-1" color={color}>
+          {color}
+        </Badge>
+      ))}
     </div>
   );
 };
@@ -38,34 +22,15 @@ Badges come in 2 different styles, _Default_ and _Pill._ Each style has 8 colour
 
 ```tsx
 () => {
-  const COLORS = ['danger', 'faint', 'hero', 'info', 'neutral', 'primary', 'success', 'warning'] as const;
-  const INVERTED_COLORS = [
-    'danger-inverted',
-    'faint-inverted',
-    'hero-inverted',
-    'info-inverted',
-    'neutral-inverted',
-    'primary-inverted',
-    'success-inverted',
-    'warning-inverted',
-  ] as const;
+  const COLORS = ['danger', 'warning', 'success', 'info', 'primary', 'hero', 'neutral', 'faint'] as const;
 
   return (
-    <div className="flex flex-col gap-3">
-      <div className="flex gap-2">
-        {COLORS.map(color => (
-          <Badge type="pill" color={color}>
-            {color}
-          </Badge>
-        ))}
-      </div>
-      <div className="flex flex-wrap gap-2 bg-muted p-2">
-        {INVERTED_COLORS.map(color => (
-          <Badge type="pill" color={color}>
-            {color}
-          </Badge>
-        ))}
-      </div>
+    <div className="flex gap-1 flex-wrap w-[12rem]">
+      {COLORS.map(color => (
+        <Badge className="my-1" type="pill" color={color}>
+          88
+        </Badge>
+      ))}
     </div>
   );
 };
diff --git a/apps/site/src/content/design-system/components/badge/index.yaml b/apps/site/src/content/design-system/components/badge/index.yaml
index 9e275ea04..4be2d6d7a 100644
--- a/apps/site/src/content/design-system/components/badge/index.yaml
+++ b/apps/site/src/content/design-system/components/badge/index.yaml
@@ -29,3 +29,8 @@ accessibility:
   - title:
       name: Accessibility API
       slug: accessibility-api
+relatedComponents:
+  - title: Buttons
+    slug: components/button
+  - title: Alerts
+    slug: components/alert
diff --git a/apps/site/src/content/design-system/components/breadcrumb/accessibilityDemo.mdoc b/apps/site/src/content/design-system/components/breadcrumb/accessibilityDemo.mdoc
index 4cce98db2..6a21514e7 100644
--- a/apps/site/src/content/design-system/components/breadcrumb/accessibilityDemo.mdoc
+++ b/apps/site/src/content/design-system/components/breadcrumb/accessibilityDemo.mdoc
@@ -1,12 +1,12 @@
 ```jsx
-// Using the Link component (as NextLink) from 'next/LinkLink'
-<div className="flex flex-col gap-5">
-  <Breadcrumb aria-label="Page transitions and the such">
+// Using the Link component (as NextLink) from 'next/Link'
+<div className="flex flex-col gap-4">
+  <Breadcrumb aria-label="Page transitions and the such" className="px-3 py-1 mt-2">
     <NextLink href="#home" passHref legacyBehavior>
       <Breadcrumb.Item isCurrent tag="a">Home</Breadcrumb.Item>
     </NextLink>
   </Breadcrumb>
-  <Breadcrumb aria-label="Page transitions and the such">
+  <Breadcrumb aria-label="Page transitions and the such" className="px-3 py-1">
     <NextLink href="#home" passHref legacyBehavior>
       <Breadcrumb.Item tag="a">Home</Breadcrumb.Item>
     </NextLink>
@@ -14,7 +14,7 @@
       <Breadcrumb.Item tag="a" isCurrent>Personal</Breadcrumb.Item>
     </NextLink>
   </Breadcrumb>
-  <Breadcrumb aria-label="Page transitions and the such">
+  <Breadcrumb aria-label="Page transitions and the such" className="px-3 py-1 mb-2">
     <NextLink href="#home" passHref legacyBehavior>
       <Breadcrumb.Item tag="a">Home</Breadcrumb.Item>
     </NextLink>
@@ -25,23 +25,5 @@
       <Breadcrumb.Item tag="a" isCurrent>Credit cards</Breadcrumb.Item>
     </NextLink>
   </Breadcrumb>
-  <Breadcrumb>
-    <NextLink href="#test" passHref legacyBehavior>
-      <Breadcrumb.Item tag="a">Anchor item</Breadcrumb.Item>
-    </NextLink>
-    <NextLink href="#another" passHref legacyBehavior>
-      <Breadcrumb.Item tag="a">Another anchor item</Breadcrumb.Item>
-    </NextLink>
-    <NextLink href="#another" passHref legacyBehavior>
-      <Breadcrumb.Item isDisabled tag="a">
-        Disabled item
-      </Breadcrumb.Item>
-    </NextLink>
-    <NextLink href="#another" passHref legacyBehavior>
-      <Breadcrumb.Item isCurrent tag="a">
-        Last item
-      </Breadcrumb.Item>
-    </NextLink>
-  </Breadcrumb>
 </div>
 ```
diff --git a/apps/site/src/content/design-system/components/breadcrumb/code.mdoc b/apps/site/src/content/design-system/components/breadcrumb/code.mdoc
index 6e6a7aeb1..dccb4cca1 100644
--- a/apps/site/src/content/design-system/components/breadcrumb/code.mdoc
+++ b/apps/site/src/content/design-system/components/breadcrumb/code.mdoc
@@ -1,24 +1,30 @@
 ### Default breadcrumb
 
 ```jsx
-// Using the Link component (as NextLink) from 'next/LinkLink'
-<div>
-  <Breadcrumb>
-    <NextLink href="#test" passHref legacyBehavior>
-      <Breadcrumb.Item tag="a">Anchor item</Breadcrumb.Item>
+// Using the Link component (as NextLink) from 'next/Link'
+<div className="flex flex-col gap-5">
+  <Breadcrumb aria-label="Page transitions and the such">
+    <NextLink href="#home" passHref legacyBehavior>
+      <Breadcrumb.Item isCurrent tag="a">Home</Breadcrumb.Item>
     </NextLink>
-    <NextLink href="#another" passHref legacyBehavior>
-      <Breadcrumb.Item tag="a">Another anchor item</Breadcrumb.Item>
+  </Breadcrumb>
+  <Breadcrumb aria-label="Page transitions and the such">
+    <NextLink href="#home" passHref legacyBehavior>
+      <Breadcrumb.Item tag="a">Home</Breadcrumb.Item>
     </NextLink>
-    <NextLink href="#another" passHref legacyBehavior>
-      <Breadcrumb.Item isDisabled tag="a">
-        Disabled item
-      </Breadcrumb.Item>
+    <NextLink href="#personal" passHref legacyBehavior>
+      <Breadcrumb.Item tag="a" isCurrent>Personal</Breadcrumb.Item>
     </NextLink>
-    <NextLink href="#another" passHref legacyBehavior>
-      <Breadcrumb.Item isCurrent tag="a">
-        Last item
-      </Breadcrumb.Item>
+  </Breadcrumb>
+  <Breadcrumb aria-label="Page transitions and the such">
+    <NextLink href="#home" passHref legacyBehavior>
+      <Breadcrumb.Item tag="a">Home</Breadcrumb.Item>
+    </NextLink>
+    <NextLink href="#personal" passHref legacyBehavior>
+      <Breadcrumb.Item tag="a">Personal</Breadcrumb.Item>
+    </NextLink>
+    <NextLink href="#credit-cards" passHref legacyBehavior>
+      <Breadcrumb.Item tag="a" isCurrent>Credit cards</Breadcrumb.Item>
     </NextLink>
   </Breadcrumb>
 </div>
diff --git a/apps/site/src/content/design-system/components/breadcrumb/design/breadcrumbs/content.mdoc b/apps/site/src/content/design-system/components/breadcrumb/design/breadcrumbs/content.mdoc
index ea461ece0..e2228c2e8 100644
--- a/apps/site/src/content/design-system/components/breadcrumb/design/breadcrumbs/content.mdoc
+++ b/apps/site/src/content/design-system/components/breadcrumb/design/breadcrumbs/content.mdoc
@@ -1,23 +1,31 @@
 Breadcrumbs come in one style for navigational consistency across all touch-points.
 
 ```jsx
-// Using the Link component (as NextLink) from 'next/LinkLink'
-<Breadcrumb>
-  <NextLink href="#test" passHref legacyBehavior>
-    <Breadcrumb.Item tag="a">Anchor item</Breadcrumb.Item>
-  </NextLink>
-  <NextLink href="#another" passHref legacyBehavior>
-    <Breadcrumb.Item tag="a">Another anchor item</Breadcrumb.Item>
-  </NextLink>
-  <NextLink href="#another" passHref legacyBehavior>
-    <Breadcrumb.Item isDisabled tag="a">
-      Disabled item
-    </Breadcrumb.Item>
-  </NextLink>
-  <NextLink href="#another" passHref legacyBehavior>
-    <Breadcrumb.Item isCurrent tag="a">
-      Last item
-    </Breadcrumb.Item>
-  </NextLink>
-</Breadcrumb>
+// Using the Link component (as NextLink) from 'next/Link'
+<div className="flex flex-col gap-4">
+  <Breadcrumb aria-label="Page transitions and the such" className="px-3 py-1 mt-2">
+    <NextLink href="#home" passHref legacyBehavior>
+      <Breadcrumb.Item isCurrent tag="a">Home</Breadcrumb.Item>
+    </NextLink>
+  </Breadcrumb>
+  <Breadcrumb aria-label="Page transitions and the such" className="px-3 py-1">
+    <NextLink href="#home" passHref legacyBehavior>
+      <Breadcrumb.Item tag="a">Home</Breadcrumb.Item>
+    </NextLink>
+    <NextLink href="#personal" passHref legacyBehavior>
+      <Breadcrumb.Item tag="a" isCurrent>Personal</Breadcrumb.Item>
+    </NextLink>
+  </Breadcrumb>
+  <Breadcrumb aria-label="Page transitions and the such" className="px-3 py-1 mb-2">
+    <NextLink href="#home" passHref legacyBehavior>
+      <Breadcrumb.Item tag="a">Home</Breadcrumb.Item>
+    </NextLink>
+    <NextLink href="#personal" passHref legacyBehavior>
+      <Breadcrumb.Item tag="a">Personal</Breadcrumb.Item>
+    </NextLink>
+    <NextLink href="#credit-cards" passHref legacyBehavior>
+      <Breadcrumb.Item tag="a" isCurrent>Credit cards</Breadcrumb.Item>
+    </NextLink>
+  </Breadcrumb>
+</div>
 ```
diff --git a/apps/site/src/content/design-system/components/breadcrumb/index.yaml b/apps/site/src/content/design-system/components/breadcrumb/index.yaml
index 22104e1ed..1796d9a33 100644
--- a/apps/site/src/content/design-system/components/breadcrumb/index.yaml
+++ b/apps/site/src/content/design-system/components/breadcrumb/index.yaml
@@ -26,4 +26,6 @@ accessibility:
   - title:
       name: Accessibility API
       slug: accessibility-api
-relatedInformation: []
+relatedComponents:
+  - title: Icons
+    slug: foundation/icon
diff --git a/apps/site/src/content/design-system/components/breadcrumb/relatedArticles.mdoc b/apps/site/src/content/design-system/components/breadcrumb/relatedArticles.mdoc
new file mode 100644
index 000000000..5454dd9f3
--- /dev/null
+++ b/apps/site/src/content/design-system/components/breadcrumb/relatedArticles.mdoc
@@ -0,0 +1,3 @@
+**Neilson Norman Group**
+
+Find out what they have to say about breadcrumbs. Read&nbsp;[Breadcrumbs: 11 Design Guidelines for Desktop and Mobile](https://www.nngroup.com/articles/breadcrumbs/).
diff --git a/apps/site/src/content/design-system/components/button-dropdown/code.mdoc b/apps/site/src/content/design-system/components/button-dropdown/code.mdoc
index cd07cf957..bb2568894 100644
--- a/apps/site/src/content/design-system/components/button-dropdown/code.mdoc
+++ b/apps/site/src/content/design-system/components/button-dropdown/code.mdoc
@@ -1,29 +1,22 @@
 ### Default button dropdown
 
 ```jsx
-<ButtonDropdown text="Default dropdown" look="primary" soft>
-  <p>
-    Example dropdown{' '}
-    <a href="#" className="text-[blue] underline">
-      content
-    </a>
-    ...
-  </p>
-</ButtonDropdown>
-```
-
-### Dropdown with headings
-
-```jsx
-<ButtonDropdown text="Dropdown with headings" look="primary" soft>
-  <ButtonDropdown.Heading>Dropdown heading #1</ButtonDropdown.Heading>
-  Example dropdown content...
-  <ButtonDropdown.Heading>Dropdown heading #2</ButtonDropdown.Heading>
-  Example dropdown content...
-</ButtonDropdown>
+<div>
+  <ButtonDropdown text="Default dropdown" look="primary" soft>
+    <p>Example dropdown content ...</p>
+  </ButtonDropdown>
+  <br />
+  <br />
+  <ButtonDropdown text="Dropdown with headings" look="primary" soft>
+    <ButtonDropdown.Heading>Dropdown heading #1</ButtonDropdown.Heading>
+    Example dropdown content...
+    <ButtonDropdown.Heading>Dropdown heading #2</ButtonDropdown.Heading>
+    Example dropdown content...
+  </ButtonDropdown>
+</div>
 ```
 
-### Dropdown box sizes (min-widths)
+### Button dropdown sizes
 
 ```jsx
 <div className="flex gap-1">
diff --git a/apps/site/src/content/design-system/components/button-dropdown/index.yaml b/apps/site/src/content/design-system/components/button-dropdown/index.yaml
index c853c504e..799c5899c 100644
--- a/apps/site/src/content/design-system/components/button-dropdown/index.yaml
+++ b/apps/site/src/content/design-system/components/button-dropdown/index.yaml
@@ -25,3 +25,10 @@ accessibility:
   - title:
       name: Accessibility API
       slug: accessibility-api
+relatedComponents:
+  - title: Checkboxes
+    slug: components/checkbox-group
+  - title: Buttons
+    slug: components/button
+  - title: Switches
+    slug: components/switch
diff --git a/apps/site/src/content/design-system/components/button-group/index.yaml b/apps/site/src/content/design-system/components/button-group/index.yaml
index fab23ed84..7d000d5b7 100644
--- a/apps/site/src/content/design-system/components/button-group/index.yaml
+++ b/apps/site/src/content/design-system/components/button-group/index.yaml
@@ -28,3 +28,10 @@ accessibility:
   - title:
       name: Accessibility API
       slug: accessibility-api
+relatedComponents:
+  - title: Buttons
+    slug: components/button
+  - title: Checkboxes
+    slug: components/checkbox-group
+  - title: Switches
+    slug: components/switch
diff --git a/apps/site/src/content/design-system/components/button/accessibilityDemo.mdoc b/apps/site/src/content/design-system/components/button/accessibilityDemo.mdoc
index e38ffe2e8..6e8daae7a 100644
--- a/apps/site/src/content/design-system/components/button/accessibilityDemo.mdoc
+++ b/apps/site/src/content/design-system/components/button/accessibilityDemo.mdoc
@@ -1,31 +1,46 @@
 ```jsx
 <div className="flex flex-col gap-2">
-  <div className="flex gap-2">
-    <Button iconBefore={FavoriteIcon}>Button</Button>
-    <Button look="primary" iconAfter={FavoriteIcon}>
-      Button
-    </Button>
-    <Button look="faint" iconAfter={FavoriteIcon}>
-      Button
+  <div>
+    <Button look="hero" soft iconAfter={NewWindowIcon}>
+      New window
+    </Button>{' '}
+    <Button look="primary" iconAfter={DropDownIcon}>
+      Dropdown
+    </Button>{' '}
+    <Button look="hero" iconAfter={PrintIcon}>
+      Print
+    </Button>{' '}
+    <Button look="primary" soft iconAfter={RefreshIcon}>
+      Refresh
+    </Button>{' '}
+    <Button look="primary" iconAfter={SearchIcon}>
+      Search
     </Button>
   </div>
-  <div className="flex gap-2">
-    <Button soft iconBefore={FavoriteIcon}>
-      Button
-    </Button>
-    <Button look="primary" soft iconAfter={FavoriteIcon}>
-      Button
-    </Button>
-    <Button look="faint" soft iconAfter={FavoriteIcon}>
-      Button
-    </Button>
+  <div>
+    <Button look="faint" iconBefore={SearchIcon} /> <Button look="faint" iconBefore={PlayIcon} />{' '}
+    <Button look="faint" iconBefore={PauseIcon} /> <Button look="faint" iconBefore={CloseIcon} />{' '}
+    <Button look="faint" iconBefore={AddCircleIcon} />
+  </div>
+  <div>
+    <ComponentTitle>Icon positioning</ComponentTitle>
+    <div className="flex items-end gap-1">
+      <Button look="primary" iconAfter={InfoIcon}>
+        Icon right
+      </Button>
+      <Button look="primary" iconBefore={InfoIcon}>
+        Icon left
+      </Button>
+    </div>
   </div>
-  <div className="flex flex-col gap-2">
-    <Button block iconAfter={AddIcon}>
-      Button
+  <div>
+    <ComponentTitle>Block-level buttons with icons</ComponentTitle>
+    <Button look="primary" block justify iconAfter={ArrowRightIcon}>
+      Next step
     </Button>
-    <Button block justify iconAfter={AddIcon}>
-      Button
+    <br />
+    <Button look="primary" iconAfter={RefreshIcon} block>
+      Refresh list
     </Button>
   </div>
 </div>
diff --git a/apps/site/src/content/design-system/components/button/code.mdoc b/apps/site/src/content/design-system/components/button/code.mdoc
index 961b47c69..ef7526794 100644
--- a/apps/site/src/content/design-system/components/button/code.mdoc
+++ b/apps/site/src/content/design-system/components/button/code.mdoc
@@ -1,105 +1,67 @@
-## Button sizes
+### Button looks
 
 ```jsx
-<div className="flex gap-2">
-  <Button look="primary" size="xlarge">
-    Extra large: 48px
+<Fragment>
+  <ComponentTitle>Default</ComponentTitle>
+  <Button>Default standard</Button>{' '}
+  <Button soft>Default soft</Button>
+  <hr className="border-t border-t-border my-4" />
+  <ComponentTitle>Standard</ComponentTitle>
+  <Button look="primary">Primary standard</Button> <Button look="hero">Hero standard</Button> <Button look="faint">
+    Faint standard
   </Button>
-
-  <Button look="primary" size="large">
-    Large: 42px
-  </Button>
-
-  <Button look="primary" size="medium">
-    Medium: 36px
-  </Button>
-
-  <Button look="primary" size="small">
-    Small: 30px
-  </Button>
-</div>
-```
-
----
-
-## Standard buttons
-
-```jsx
-<div className="flex gap-2">
-  <Button look="primary">Primary standard</Button>
-  <Button look="hero">Hero standard</Button>
-  <Button look="faint">Faint standard</Button>
-  <Button look="link">Link</Button>
-</div>
-```
-
----
-
-## Soft buttons
-
-```jsx
-<div className="flex gap-2">
+  <Button look="link">Link</Button> <Button look="unstyled">Unstyled</Button>
+  <hr className="border-t border-t-border my-4" />
+  <ComponentTitle>Soft</ComponentTitle>
   <Button look="primary" soft>
     Primary soft
-  </Button>
+  </Button>{' '}
   <Button look="hero" soft>
     Hero soft
-  </Button>
+  </Button>{' '}
   <Button look="faint" soft>
     Faint soft
   </Button>
-</div>
+</Fragment>
 ```
 
----
-
-## Buttons with icons
+### Button sizes
 
 ```jsx
-<div className="flex flex-col gap-2">
-  <div className="flex gap-2">
-    <Button iconBefore={FavoriteIcon}>Button</Button>
-    <Button look="primary" iconAfter={FavoriteIcon}>
-      Button
-    </Button>
-    <Button look="faint" iconAfter={FavoriteIcon}>
-      Button
-    </Button>
-  </div>
-  <div className="flex gap-2">
-    <Button soft iconBefore={FavoriteIcon}>
-      Button
-    </Button>
-    <Button look="primary" soft iconAfter={FavoriteIcon}>
-      Button
-    </Button>
-    <Button look="faint" soft iconAfter={FavoriteIcon}>
-      Button
-    </Button>
-  </div>
-  <div className="flex flex-col gap-2">
-    <Button block iconAfter={AddIcon}>
-      Button
-    </Button>
-    <Button block justify iconAfter={AddIcon}>
-      Button
-    </Button>
-  </div>
-</div>
+<Fragment>
+  <ComponentTitle>Sizes</ComponentTitle>
+  <Button size="xlarge">Extra large: 48px</Button> <Button size="large">Large: 42px</Button> <Button size="medium">
+    Medium (default): 36px
+  </Button> <Button size="small">Small: 30px</Button>
+  <hr className="border-t border-t-border my-4" />
+  <ComponentTitle>Responsive sizing</ComponentTitle>
+  <Button size={{ initial: 'small', xsl: 'medium', sm: 'large', md: 'xlarge' }}>Responsive size</Button>
+  <br />
+  <br />
+  <Button size={{ initial: 'small', xsl: null, sm: 'xlarge' }}>Responsive size</Button>
+</Fragment>
 ```
 
----
-
-## Responsive buttons
-
-Medium size button becomes Extra large from the MD breakpoint
+### Block buttons
 
 ```jsx
-<Button size={{ initial: 'medium', md: 'xlarge' }}>Sample button</Button>
+<Fragment>
+  <ComponentTitle>Block</ComponentTitle>
+  <Button block>Block-level button</Button>
+  <Hr />
+  <ComponentTitle>Responsive block</ComponentTitle>
+  <Button block={{ initial: true, xsl: false, sm: true, lg: false }}>Responsive block button</Button>
+  <br />
+  <br />
+  <Button block={{ initial: true, sm: false }}>Responsive block button</Button>
+</Fragment>
 ```
 
-Small size button becomes medium at the SM breakpoint, large at the MD breakpoint and Extra large at the LG breakpoint
+### Buttons with icons
 
 ```jsx
-<Button size={{ initial: 'small', md: 'large', lg: 'xlarge' }}>Sample button</Button>
+<div className="flex items-center gap-1">
+  <Button iconBefore={ArrowLeftIcon}>Icon before</Button>
+  <Button iconAfter={ArrowRightIcon}>Icon after</Button>
+</div>
 ```
diff --git a/apps/site/src/content/design-system/components/button/design/button-sizes/content.mdoc b/apps/site/src/content/design-system/components/button/design/button-sizes/content.mdoc
index f219b3189..f84508194 100644
--- a/apps/site/src/content/design-system/components/button/design/button-sizes/content.mdoc
+++ b/apps/site/src/content/design-system/components/button/design/button-sizes/content.mdoc
@@ -1,7 +1,7 @@
 Buttons are available in four sizes. These sizes align with other form element sizes. Please only use the button sizes provided. Button widths are auto-sized by default or can be made to fit to the full width of their container, see block buttons, below.
 
 ```tsx
-<div className="flex gap-2">
+<div className="flex gap-1 items-center">
   <Button look="primary" size="xlarge">
     Extra large: 48px
   </Button>
diff --git a/apps/site/src/content/design-system/components/button/design/button-styles/content.mdoc b/apps/site/src/content/design-system/components/button/design/button-styles/content.mdoc
index a1b67e964..b5ee6c10f 100644
--- a/apps/site/src/content/design-system/components/button/design/button-styles/content.mdoc
+++ b/apps/site/src/content/design-system/components/button/design/button-styles/content.mdoc
@@ -1,18 +1,17 @@
 **Standard buttons:** There are three standard button styles you can use in your interface.
 
 ```jsx
-<div className="flex gap-2">
+<div className="flex gap-1">
   <Button look="primary">Primary standard</Button>
   <Button look="hero">Hero standard</Button>
   <Button look="faint">Faint standard</Button>
-  <Button look="link">Link</Button>
 </div>
 ```
 
 **Soft buttons:** The soft button option places less visual emphasis on the button. Soft buttons are useful when grouping buttons with differing importance.
 
 ```jsx
-<div className="flex gap-2">
+<div className="flex gap-1">
   <Button look="primary" soft>
     Primary soft
   </Button>
@@ -29,32 +28,47 @@
 
 ```jsx
 <div className="flex flex-col gap-2">
-  <div className="flex gap-2">
-    <Button iconBefore={FavoriteIcon}>Button</Button>
-    <Button look="primary" iconAfter={FavoriteIcon}>
-      Button
-    </Button>
-    <Button look="faint" iconAfter={FavoriteIcon}>
-      Button
+  <div>
+    <Button look="hero" soft iconAfter={NewWindowIcon}>
+      New window
+    </Button>{' '}
+    <Button look="primary" iconAfter={DropDownIcon}>
+      Dropdown
+    </Button>{' '}
+    <Button look="hero" iconAfter={PrintIcon}>
+      Print
+    </Button>{' '}
+    <Button look="primary" soft iconAfter={RefreshIcon}>
+      Refresh
+    </Button>{' '}
+    <Button look="primary" iconAfter={SearchIcon}>
+      Search
     </Button>
   </div>
-  <div className="flex gap-2">
-    <Button soft iconBefore={FavoriteIcon}>
-      Button
-    </Button>
-    <Button look="primary" soft iconAfter={FavoriteIcon}>
-      Button
-    </Button>
-    <Button look="faint" soft iconAfter={FavoriteIcon}>
-      Button
-    </Button>
+  <div>
+    <Button look="faint" iconBefore={SearchIcon} /> <Button look="faint" iconBefore={PlayIcon} />{' '}
+    <Button look="faint" iconBefore={PauseIcon} /> <Button look="faint" iconBefore={CloseIcon} />{' '}
+    <Button look="faint" iconBefore={AddCircleIcon} />
+  </div>
+  <div>
+    <ComponentTitle>Icon positioning</ComponentTitle>
+    <div className="flex items-end gap-1">
+      <Button look="primary" iconAfter={InfoIcon}>
+        Icon right
+      </Button>
+      <Button look="primary" iconBefore={InfoIcon}>
+        Icon left
+      </Button>
+    </div>
   </div>
-  <div className="flex flex-col gap-2">
-    <Button block iconAfter={AddIcon}>
-      Button
+  <div>
+    <ComponentTitle>Block-level buttons with icons</ComponentTitle>
+    <Button look="primary" block justify iconAfter={ArrowRightIcon}>
+      Next step
     </Button>
-    <Button block justify iconAfter={AddIcon}>
-      Button
+    <br />
+    <Button look="primary" iconAfter={RefreshIcon} block>
+      Refresh list
     </Button>
   </div>
 </div>
diff --git a/apps/site/src/content/design-system/components/button/design/dos-and-donts/content.mdoc b/apps/site/src/content/design-system/components/button/design/dos-and-donts/content.mdoc
index c9ed0f468..62de21f85 100644
--- a/apps/site/src/content/design-system/components/button/design/dos-and-donts/content.mdoc
+++ b/apps/site/src/content/design-system/components/button/design/dos-and-donts/content.mdoc
@@ -10,12 +10,17 @@
 {% layout-area %}
 ![Two buttons vertically stacked with space between them, labelled ‘Save’ and ‘Delete’. This diagram has a tick.](https://res.cloudinary.com/westpac-gel/image/upload/v1603847085/5f98c3ac28dd13161ae76fd8.png)
 
-Do - Prevent errors by keeping buttons a safe distance apart.
+```html
+<p className="typography-body-10"><span className="text-success font-bold">Do</span> - Prevent errors by keeping buttons a safe distance apart.</p>
+```
+
 {% /layout-area %}
 
 {% layout-area %}
 ![Two buttons vertically stacked with no space between them, labelled ‘Save’ and ‘Delete’. This diagram has a cross.](https://res.cloudinary.com/westpac-gel/image/upload/v1603847093/5f98c3b428dd13161ae76fd9.png)
 
-Avoid - Placing buttons next to each other that perform an opposing function that a user cannot recover from.
+```html
+<p className="typography-body-10"><span className="text-danger font-bold">Avoid</span> - Placing buttons next to each other that perform an opposing function that a user cannot recover from.</p>
+```
 {% /layout-area %}
 {% /layout %}
diff --git a/apps/site/src/content/design-system/components/button/design/responsive-buttons/content.mdoc b/apps/site/src/content/design-system/components/button/design/responsive-buttons/content.mdoc
index 73b76dd5b..291a34a9f 100644
--- a/apps/site/src/content/design-system/components/button/design/responsive-buttons/content.mdoc
+++ b/apps/site/src/content/design-system/components/button/design/responsive-buttons/content.mdoc
@@ -1,13 +1,25 @@
 Responsive buttons can change appearance based on breakpoint. For example, the buttons can change size or become block or inline. This feature is often used at the XS breakpoint (generally for mobile devices). The example descriptions below assume the button is first viewed at XS, resize your browser to see them change.
 
-Medium size button becomes Extra large from the MD breakpoint
-
 ```jsx
-<Button size={{ initial: 'medium', md: 'xlarge' }}>Sample button</Button>
-```
+<Fragment>
+  <ComponentTitle>Medium size button becomes Extra large from the MD breakpoint</ComponentTitle>
+  <Button size={{ initial: 'medium', md: 'xlarge' }}>Medium → Extra large</Button>
+  <hr className="border-t border-t-border my-4" />
 
-Small size button becomes medium at the SM breakpoint, large at the MD breakpoint and Extra large at the LG breakpoint
+  <ComponentTitle>Extra large size button becomes small from the SM breakpoint</ComponentTitle>
+  <Button size={{ initial: 'xlarge', sm: 'small' }}>Extra large → Small</Button>
+  <hr className="border-t border-t-border my-4" />
 
-```jsx
-<Button size={{ initial: 'small', md: 'large', lg: 'xlarge' }}>Sample button</Button>
+  <ComponentTitle>
+    Small size button becomes medium at the SM breakpoint, large at the MD breakpoint and Extra large at the LG
+    breakpoint
+  </ComponentTitle>
+  <Button size={{ initial: 'small', sm: 'medium', md: 'large', lg: 'xlarge' }}>
+    Small → Medium → Large → Extra large
+  </Button>
+  <hr className="border-t border-t-border my-4" />
+
+  <ComponentTitle>Block button becomes non-block from the SM breakpoint</ComponentTitle>
+  <Button block={{ initial: true, sm: false }}>Block → Non-block</Button>
+</Fragment>
 ```
diff --git a/apps/site/src/content/design-system/components/button/index.yaml b/apps/site/src/content/design-system/components/button/index.yaml
index 6ee624a33..dab6cf6da 100644
--- a/apps/site/src/content/design-system/components/button/index.yaml
+++ b/apps/site/src/content/design-system/components/button/index.yaml
@@ -35,4 +35,12 @@ accessibility:
   - title:
       name: Accessibility API
       slug: accessibility-api
-relatedInformation: []
+relatedComponents:
+  - title: Icons
+    slug: foundation/icon
+  - title: Button dropdowns
+    slug: components/button-dropdown
+  - title: Button groups
+    slug: components/button-group
+  - title: Colours
+    slug: foundation/colour
diff --git a/apps/site/src/content/design-system/components/checkbox-group/design/dos-and-donts/content.mdoc b/apps/site/src/content/design-system/components/checkbox-group/design/dos-and-donts/content.mdoc
index 410b75043..c4bd42c1a 100644
--- a/apps/site/src/content/design-system/components/checkbox-group/design/dos-and-donts/content.mdoc
+++ b/apps/site/src/content/design-system/components/checkbox-group/design/dos-and-donts/content.mdoc
@@ -8,13 +8,19 @@
 {% layout-area %}
 ![Question set asking ‘Which methods do you use to get to work?’ With checkbox options: Car, Bicycle, Train, Other means. This diagram has a tick.](https://res.cloudinary.com/westpac-gel/image/upload/v1603779769/5f97bcb7bf99e236cd9193f6.png)
 
-Do - Remain consistent with the control type used
+```html
+<p className="typography-body-10"><span className="text-success font-bold">Do</span> - Remain consistent with the control type used</p>
+```
+
 {% /layout-area %}
 
 {% layout-area %}
 ![Question set asking ‘Which methods do you use to get to work?’ With checkbox options: Car, Bicycle, Train. Last item Other means as radio button. This diagram has a cross.](https://res.cloudinary.com/westpac-gel/image/upload/v1603779775/5f97bcbebf99e236cd9193f7.png)
 
-Avoid - Mixing checkboxes and radios
+```html
+<p className="typography-body-10"><span className="text-danger font-bold">Avoid</span> - Mixing checkboxes and radios</p>
+```
+
 {% /layout-area %}
 {% /layout %}
 
@@ -22,12 +28,18 @@ Avoid - Mixing checkboxes and radios
 {% layout-area %}
 ![Question set asking ‘Do you have any of the following in your household?’ With checkbox options: Cameras, Bicycles, Audio equipment, Computer equipment. This diagram has a tick.](https://res.cloudinary.com/westpac-gel/image/upload/v1604288190/5f9f7ebdc5be90222be29900.png)
 
-Do - Keep labels short, makes scanning easier.
+```html
+<p className="typography-body-10"><span className="text-success font-bold">Do</span> - Keep labels short, makes scanning easier.</p>
+```
+
 {% /layout-area %}
 
 {% layout-area %}
 ![Question set asking ‘Do you have any of the following in your household?’ With checkbox options: Cameras such as professional cameras, consumer cameras, digital cameras, film cameras, video cameras; Bicycles (whether it’s yours or someone else’s in the same household); Audio equipment including CB radios; Computer equipment including smartphones, desktops, tablets, laptops, game consoles. This diagram has a cross.](https://res.cloudinary.com/westpac-gel/image/upload/v1604287897/5f9f7d97c5be90222be298ff.png)
 
-Avoid - Having long descriptive labels, if you need more content you can try using the 'Hint' option.
+```html
+<p className="typography-body-10"><span className="text-danger font-bold">Avoid</span> - Having long descriptive labels, if you need more content you can try using the 'Hint' option.</p>
+```
+
 {% /layout-area %}
 {% /layout %}
diff --git a/apps/site/src/content/design-system/components/checkbox-group/index.yaml b/apps/site/src/content/design-system/components/checkbox-group/index.yaml
index 6b1af8d88..22d3afc13 100644
--- a/apps/site/src/content/design-system/components/checkbox-group/index.yaml
+++ b/apps/site/src/content/design-system/components/checkbox-group/index.yaml
@@ -1,4 +1,4 @@
-name: Checkbox Groups
+name: Checkboxes
 description: >-
   Checkboxes are a proven and effective way to elicit a multiple choice from a
   user. They also require careful consideration to produce the best results.
@@ -37,3 +37,10 @@ accessibility:
   - title:
       name: Accessibility API
       slug: accessibility-api
+relatedComponents:
+  - title: Radios
+    slug: components/radio-group
+  - title: Buttons groups
+    slug: components/button-group
+  - title: Switches
+    slug: components/switch
diff --git a/apps/site/src/content/design-system/components/collapsible/index.yaml b/apps/site/src/content/design-system/components/collapsible/index.yaml
index de905e9ca..2743ddc1d 100644
--- a/apps/site/src/content/design-system/components/collapsible/index.yaml
+++ b/apps/site/src/content/design-system/components/collapsible/index.yaml
@@ -1,4 +1,4 @@
-name: Collapsibles
+name: Collapsible
 description: >-
   A Collapsible is a component used for containing information that you may not
   want to surface at the page or screen level, but needs to be findable.
@@ -25,3 +25,14 @@ accessibility:
   - title:
       name: Accessibility API
       slug: accessibility-api
+relatedComponents:
+  - title: Buttons
+    slug: components/button
+  - title: Accordions
+    slug: components/accordion
+  - title: Tabs
+    slug: components/tabs
+  - title: Colours
+    slug: foundation/colour
+  - title: Pictograms
+    slug: foundation/pictogram
diff --git a/apps/site/src/content/design-system/components/compacta/index.yaml b/apps/site/src/content/design-system/components/compacta/index.yaml
index 7b1363c0e..22df25f61 100644
--- a/apps/site/src/content/design-system/components/compacta/index.yaml
+++ b/apps/site/src/content/design-system/components/compacta/index.yaml
@@ -1,4 +1,4 @@
-name: Compactas
+name: Compacta
 description: >-
   The Compacta is a form input for capturing multiple instances of multiple
   fields, saving valuable screen space.
@@ -19,3 +19,8 @@ accessibility:
   - title:
       name: Accessibility notes
       slug: accessibility-notes
+relatedComponents:
+  - title: Accordions
+    slug: components/accordion
+  - title: Tabs
+    slug: components/tabs
diff --git a/apps/site/src/content/design-system/components/date-picker/accessibilityDemo.mdoc b/apps/site/src/content/design-system/components/date-picker/accessibilityDemo.mdoc
index 59d8177b5..11009c7db 100644
--- a/apps/site/src/content/design-system/components/date-picker/accessibilityDemo.mdoc
+++ b/apps/site/src/content/design-system/components/date-picker/accessibilityDemo.mdoc
@@ -1,12 +1,17 @@
 ```jsx
-<div className="flex gap-3">
-  <div className="py-2">
-    <small>Select from</small>
-    <DatePicker />
+<Fragment>
+  <ComponentTitle>Selecting a date range</ComponentTitle>
+  <div className="flex gap-3">
+    <div className="pb-2">
+      <Field label="Select from">
+        <DatePicker size="md" />
+      </Field>
+    </div>
+    <div className="pb-2">
+      <Field label="Select to">
+        <DatePicker size="md" />
+      </Field>
+    </div>
   </div>
-  <div className="py-2">
-    <small>Select to</small>
-    <DatePicker />
-  </div>
-</div>
+</Fragment>
 ```
diff --git a/apps/site/src/content/design-system/components/date-picker/code.mdoc b/apps/site/src/content/design-system/components/date-picker/code.mdoc
index 22ec91199..a8029a4a0 100644
--- a/apps/site/src/content/design-system/components/date-picker/code.mdoc
+++ b/apps/site/src/content/design-system/components/date-picker/code.mdoc
@@ -1,23 +1,49 @@
-## Datepicker sizes
+### Sizes
 
 ```jsx
 () => {
-  const sizes = ['sm', 'md', 'lg', 'xl'];
-  return sizes.map(size => (
-    <div className="py-2" key={size}>
-      <small>size {size}</small>
+  const sizes = [
+    { label: 'Small', size: 'sm' },
+    { label: 'Medium (default)', size: 'md' },
+    { label: 'Large', size: 'lg' },
+    { label: 'XLarge', size: 'xl' },
+  ];
+  return sizes.map(({ label, size }) => (
+    <div className="py-4 border-t border-t-border first:border-t-0" key={size}>
+      <ComponentTitle>{label}</ComponentTitle>
       <DatePicker size={size} />
     </div>
   ));
 };
 ```
 
----
+### Range
 
-## Disable Weekends
+```jsx
+<Fragment>
+  <ComponentTitle>Selecting a date range</ComponentTitle>
+  <div className="flex gap-3">
+    <div className="pb-2">
+      <Field label="Select from">
+        <DatePicker />
+      </Field>
+    </div>
+    <div className="pb-2">
+      <Field label="Select to">
+        <DatePicker />
+      </Field>
+    </div>
+  </div>
+</Fragment>
+```
+
+### Disabled dates
 
 ```jsx
-() => {
-  return <DatePicker disableWeekends />;
-};
+<Fragment>
+  <ComponentTitle>Blocked out dates</ComponentTitle>
+  <Field label="Select date">
+    <DatePicker disableWeekends />
+  </Field>
+</Fragment>
 ```
diff --git a/apps/site/src/content/design-system/components/date-picker/design/date-range/content.mdoc b/apps/site/src/content/design-system/components/date-picker/design/date-range/content.mdoc
index f788e35c1..d25a7d61c 100644
--- a/apps/site/src/content/design-system/components/date-picker/design/date-range/content.mdoc
+++ b/apps/site/src/content/design-system/components/date-picker/design/date-range/content.mdoc
@@ -3,14 +3,19 @@ In order to create a date range, two date pickers need to be used with appropria
 Established convention of layout places two date pickers side by side, with stacked date pickers also an option particularly when horizontal space is at a premium or in a responsive context.
 
 ```jsx
-<div className="flex gap-3">
-  <div className="py-2">
-    <small>Select from</small>
-    <DatePicker />
+<Fragment>
+  <ComponentTitle>Selecting a date range</ComponentTitle>
+  <div className="flex gap-3">
+    <div className="pb-2">
+      <Field label="Select from">
+        <DatePicker />
+      </Field>
+    </div>
+    <div className="pb-2">
+      <Field label="Select to">
+        <DatePicker />
+      </Field>
+    </div>
   </div>
-  <div className="py-2">
-    <small>Select to</small>
-    <DatePicker />
-  </div>
-</div>
+</Fragment>
 ```
diff --git a/apps/site/src/content/design-system/components/date-picker/design/sizes/content.mdoc b/apps/site/src/content/design-system/components/date-picker/design/sizes/content.mdoc
index 0f0690b83..c08d18f26 100644
--- a/apps/site/src/content/design-system/components/date-picker/design/sizes/content.mdoc
+++ b/apps/site/src/content/design-system/components/date-picker/design/sizes/content.mdoc
@@ -2,10 +2,15 @@ The date picker can be used in various sizes to match the UI direction.
 
 ```jsx
 () => {
-  const sizes = ['sm', 'md', 'lg', 'xl'];
-  return sizes.map(size => (
-    <div className="py-2" key={size}>
-      <small>size {size}</small>
+  const sizes = [
+    { label: 'Small', size: 'sm' },
+    { label: 'Medium (default)', size: 'md' },
+    { label: 'Large', size: 'lg' },
+    { label: 'XLarge', size: 'xl' },
+  ];
+  return sizes.map(({ label, size }) => (
+    <div className="py-4 border-t border-t-border first:border-t-0" key={size}>
+      <ComponentTitle>{label}</ComponentTitle>
       <DatePicker size={size} />
     </div>
   ));
diff --git a/apps/site/src/content/design-system/components/date-picker/design/unavailable-dates/content.mdoc b/apps/site/src/content/design-system/components/date-picker/design/unavailable-dates/content.mdoc
index 6366e42c8..25c5032cf 100644
--- a/apps/site/src/content/design-system/components/date-picker/design/unavailable-dates/content.mdoc
+++ b/apps/site/src/content/design-system/components/date-picker/design/unavailable-dates/content.mdoc
@@ -7,9 +7,7 @@ When dates are unavailable for whatever reason, the strikethrough styling is app
 
 ```jsx
 <Fragment>
-  <p className="mb-2 typography-body-10 text-muted">
-    <em>Blocked out dates</em>
-  </p>
+  <ComponentTitle>Blocked out dates</ComponentTitle>
   <Field label="Select date">
     <DatePicker disableWeekends />
   </Field>
diff --git a/apps/site/src/content/design-system/components/date-picker/index.yaml b/apps/site/src/content/design-system/components/date-picker/index.yaml
index bf38a506c..d4769daea 100644
--- a/apps/site/src/content/design-system/components/date-picker/index.yaml
+++ b/apps/site/src/content/design-system/components/date-picker/index.yaml
@@ -1,4 +1,4 @@
-name: Date pickers
+name: Date picker
 description: >-
   Date pickers assist when dates are not known, set in the future, to schedule
   something, or assist in providing “day of the week” context.
@@ -31,3 +31,6 @@ accessibility:
   - title:
       name: Accessibility API
       slug: accessibility-api
+relatedComponents:
+  - title: Input fields
+    slug: components/input-field
diff --git a/apps/site/src/content/design-system/components/flexi-cell/index.yaml b/apps/site/src/content/design-system/components/flexi-cell/index.yaml
index 12ddc7854..f4634a976 100644
--- a/apps/site/src/content/design-system/components/flexi-cell/index.yaml
+++ b/apps/site/src/content/design-system/components/flexi-cell/index.yaml
@@ -1 +1 @@
-name: Flexi-Cells
+name: Flexi Cell
diff --git a/apps/site/src/content/design-system/components/heading/index.yaml b/apps/site/src/content/design-system/components/heading/index.yaml
index 42fbf47bb..b60e4cb55 100644
--- a/apps/site/src/content/design-system/components/heading/index.yaml
+++ b/apps/site/src/content/design-system/components/heading/index.yaml
@@ -1,4 +1,4 @@
-name: Headings
+name: Heading (Dev)
 description: >-
   This is a developer-only package containing styling for heading elements
   supporting visual and semantic heading levels, uppercase and both body font
diff --git a/apps/site/src/content/design-system/components/input-field/index.yaml b/apps/site/src/content/design-system/components/input-field/index.yaml
index e6f3091c2..71eb0b997 100644
--- a/apps/site/src/content/design-system/components/input-field/index.yaml
+++ b/apps/site/src/content/design-system/components/input-field/index.yaml
@@ -1,4 +1,4 @@
-name: Input Fields
+name: Input groups
 description: >-
   Input field is an input field either followed or preceded by an input or
   character. They are useful for giving context to input field values.
@@ -31,3 +31,6 @@ accessibility:
   - title:
       name: Accessibility API
       slug: accessibility-api
+relatedComponents:
+  - title: Text inputs
+    slug: components/input
diff --git a/apps/site/src/content/design-system/components/input/design/dos-and-donts/content.mdoc b/apps/site/src/content/design-system/components/input/design/dos-and-donts/content.mdoc
index e7f61cb85..9c32ad94d 100644
--- a/apps/site/src/content/design-system/components/input/design/dos-and-donts/content.mdoc
+++ b/apps/site/src/content/design-system/components/input/design/dos-and-donts/content.mdoc
@@ -8,12 +8,18 @@
 
 ![](https://res.cloudinary.com/westpac-gel/image/upload/v1603846745/5f98c25828dd13161ae76fd6.png)
 
-Do - Place labels in close proximity above the input field - this helps promote scanning, readability and faster progress.
+```html
+<p className="typography-body-10"><span className="text-success font-bold">Do</span> - Place labels in close proximity above the input field - this helps promote scanning, readability and faster progress.</p>
+```
+
 {% /layout-area %}
 
 {% layout-area %}
 ![](https://res.cloudinary.com/westpac-gel/image/upload/v1603846751/5f98c25e28dd13161ae76fd7.png)
 
-Avoid - Placing labels too far away from the input field, this can create confusion and lose any perceived connection between the items.
+```html
+<p className="typography-body-10"><span className="text-danger font-bold">Avoid</span> - Placing labels too far away from the input field, this can create confusion and lose any perceived connection between the items.</p>
+```
+
 {% /layout-area %}
 {% /layout %}
diff --git a/apps/site/src/content/design-system/components/input/index.yaml b/apps/site/src/content/design-system/components/input/index.yaml
index f89d3253d..2bba36731 100644
--- a/apps/site/src/content/design-system/components/input/index.yaml
+++ b/apps/site/src/content/design-system/components/input/index.yaml
@@ -35,3 +35,6 @@ accessibility:
   - title:
       name: Accessibility API
       slug: accessibility-api
+relatedComponents:
+  - title: Input fields
+    slug: components/input-field
diff --git a/apps/site/src/content/design-system/components/link/index.yaml b/apps/site/src/content/design-system/components/link/index.yaml
index 2da2b90e6..4bedf4f51 100644
--- a/apps/site/src/content/design-system/components/link/index.yaml
+++ b/apps/site/src/content/design-system/components/link/index.yaml
@@ -1,4 +1,4 @@
-name: Links (anchor)
+name: Link (Anchor)
 description: >-
   The Link component is a way for developers to quickly apply consistent web
   link styling while also providing global guidance for designers. There are two
@@ -30,3 +30,10 @@ accessibility:
   - title:
       name: Accessibility API
       slug: accessibility-api
+relatedComponents:
+  - title: Colours
+    slug: foundation/colour
+  - title: Lists
+    slug: components/list
+  - title: Icons
+    slug: foundation/icon
diff --git a/apps/site/src/content/design-system/components/list/accessibilityDemo.mdoc b/apps/site/src/content/design-system/components/list/accessibilityDemo.mdoc
index e3f7c00c8..5fae0f5f1 100644
--- a/apps/site/src/content/design-system/components/list/accessibilityDemo.mdoc
+++ b/apps/site/src/content/design-system/components/list/accessibilityDemo.mdoc
@@ -1,15 +1,31 @@
-```tsx
-() => {
-  const TYPES = ['bullet', 'link', 'tick', 'cross', 'unstyled', 'icon', 'ordered'];
-  return TYPES.map(type => (
-    <div key={type}>
-      <h1 className="typography-body-10 mb-2">{type}</h1>
-      <List type={type} className="mb-4" icon={type === 'icon' ? PdfFileIcon : undefined}>
-        <List.Item>Styled {type} list</List.Item>
-        <List.Item>Styled {type} list</List.Item>
-        <List.Item>Styled {type} list</List.Item>
-      </List>
-    </div>
-  ));
-};
-```
+```jsx
+<>
+  <h1 className="typography-body-10 mb-2 italic text-muted">Link list</h1>
+  <List type="link" className="mb-4">
+    <List.Item>This is a link list</List.Item>
+    <List.Item>This is a link list</List.Item>
+  </List>
+  <h1 className="typography-body-10 mb-2 italic text-muted">Tick list</h1>
+  <List type="tick" className="mb-4">
+    <List.Item>This is a tick list</List.Item>
+    <List.Item>This is a tick list</List.Item>
+  </List>
+  <h1 className="typography-body-10 mb-2 italic text-muted">Cross list</h1>
+  <List type="cross" className="mb-4">
+    <List.Item>This is a cross list</List.Item>
+    <List.Item>This is a cross list</List.Item>
+  </List>
+  <h1 className="typography-body-10 mb-2 italic text-muted">Unstyled list</h1>
+  <List type="unstyled" className="mb-4">
+    <List.Item>This is an unstyled list</List.Item>
+    <List.Item>This is an unstyled list</List.Item>
+  </List>
+  <h1 className="typography-body-10 mb-2 italic text-muted">Icon list</h1>
+  <List className="mb-4">
+    <List.Item type="icon" icon={GenericFileIcon} look="muted">This is an icon list</List.Item>
+    <List.Item type="icon" icon={GenericFileIcon} look="muted">This is an icon list</List.Item>
+    <List.Item type="icon" icon={GenericFileIcon} look="primary">This is an icon list</List.Item>
+    <List.Item type="icon" icon={GenericFileIcon} look="primary">This is an icon list</List.Item>
+  </List>
+</>
+```
\ No newline at end of file
diff --git a/apps/site/src/content/design-system/components/list/code.mdoc b/apps/site/src/content/design-system/components/list/code.mdoc
index 4ba73916e..bfd040ad0 100644
--- a/apps/site/src/content/design-system/components/list/code.mdoc
+++ b/apps/site/src/content/design-system/components/list/code.mdoc
@@ -1,8 +1,8 @@
-## Default List
+### Default list
 
 ```jsx
 <div>
-  <h1 className="typography-body-10 mb-2">Default list</h1>
+  <h1 className="typography-body-10 mb-2 italic text-muted">Default list</h1>
   <List type="bullet">
     <List.Item>Styled bullet list</List.Item>
     <List.Item>Styled bullet list</List.Item>
@@ -20,7 +20,7 @@
     </List>
     <List.Item>Styled bullet list</List.Item>
   </List>
-  <h1 className="typography-body-10 mb-2">Look</h1>
+  <h1 className="typography-body-10 mb-2 italic text-muted">Look</h1>
   <List type="bullet" look="primary" className="mb-4">
     <List.Item>Styled bullet list - primary</List.Item>
     <List.Item>Styled bullet list - primary</List.Item>
@@ -36,15 +36,15 @@
 </div>
 ```
 
-## List Looks
+### List looks
 
 ```jsx
 () => {
-  const TYPES = ['bullet', 'link', 'tick', 'cross', 'unstyled', 'icon', 'ordered'];
+  const TYPES = ['bullet', 'link', 'tick', 'ordered', 'unstyled', 'icon'];
   return TYPES.map(type => (
     <div key={type}>
-      <h1 className="typography-body-10 mb-2">{type}</h1>
-      <List type={type} className="mb-4" icon={type === 'icon' ? PdfFileIcon : undefined}>
+      <h1 className="typography-body-10 mb-2 italic text-muted">{`${type[0].toUpperCase()}${type.slice(1)} List`}</h1>
+      <List type={type} icon={type === 'icon' ? GithubIcon : undefined}>
         <List.Item>Styled {type} list</List.Item>
         <List.Item>Styled {type} list</List.Item>
         <List.Item>Styled {type} list</List.Item>
@@ -54,17 +54,17 @@
 };
 ```
 
-## List spacing
+### List spacing
 
 ```jsx
 <div>
-  <h1 className="typography-body-10 mb-2">Medium</h1>
+  <h1 className="typography-body-10 mb-2 italic text-muted">Medium</h1>
   <List type="bullet" className="mb-4" spacing="medium">
     <List.Item>Styled bullet list</List.Item>
     <List.Item>Styled bullet list</List.Item>
     <List.Item>Styled bullet list</List.Item>
   </List>
-  <h1 className="typography-body-10 mb-2">Large</h1>
+  <h1 className="typography-body-10 mb-2 italic text-muted">Large</h1>
   <List type="bullet" className="mb-4" spacing="large">
     <List.Item>Styled bullet list</List.Item>
     <List.Item>Styled bullet list</List.Item>
@@ -72,21 +72,3 @@
   </List>
 </div>
 ```
-
-## Using Next Link
-
-```jsx
-<div>
-  <List type="link" className="mb-4">
-    <NextLink href="#test1" passHref legacyBehavior>
-      <List.Item>Styled bullet list</List.Item>
-    </NextLink>
-    <NextLink href="#test2" passHref legacyBehavior>
-      <List.Item>Styled bullet list</List.Item>
-    </NextLink>
-    <NextLink href="#test3" passHref legacyBehavior>
-      <List.Item>Styled bullet list</List.Item>
-    </NextLink>
-  </List>
-</div>
-```
diff --git a/apps/site/src/content/design-system/components/list/design/bullet-lists/content.mdoc b/apps/site/src/content/design-system/components/list/design/bullet-lists/content.mdoc
index be8d7b10f..9412370b3 100644
--- a/apps/site/src/content/design-system/components/list/design/bullet-lists/content.mdoc
+++ b/apps/site/src/content/design-system/components/list/design/bullet-lists/content.mdoc
@@ -2,7 +2,7 @@ Create simple and easily scannable lists with these list and nested list styles.
 
 ```jsx
 <div>
-  <h1 className="typography-body-10 mb-2">Default list</h1>
+  <h1 className="typography-body-10 mb-2 italic text-muted">Default list</h1>
   <List type="bullet">
     <List.Item>Styled bullet list</List.Item>
     <List.Item>Styled bullet list</List.Item>
@@ -20,18 +20,12 @@ Create simple and easily scannable lists with these list and nested list styles.
     </List>
     <List.Item>Styled bullet list</List.Item>
   </List>
-  <h1 className="typography-body-10 mb-2">Look</h1>
-  <List type="bullet" look="primary" className="mb-4">
-    <List.Item>Styled bullet list - primary</List.Item>
-    <List.Item>Styled bullet list - primary</List.Item>
-  </List>
-  <List type="bullet" look="hero" className="mb-4">
-    <List.Item>Styled bullet list - hero</List.Item>
-    <List.Item>Styled bullet list - hero</List.Item>
-  </List>
-  <List type="bullet" look="neutral" className="mb-4">
-    <List.Item>Styled bullet list - neutral</List.Item>
-    <List.Item>Styled bullet list - neutral</List.Item>
+  <br/>
+  <h1 className="typography-body-10 mb-2 italic text-muted">List colours</h1>
+  <List type="bullet" className="mb-4">
+    <List.Item look="primary">This is a primary list</List.Item>
+    <List.Item look="hero">This is a hero list</List.Item>
+    <List.Item look="neutral">This is a neutral list</List.Item>
   </List>
 </div>
 ```
diff --git a/apps/site/src/content/design-system/components/list/design/list-item-spacing/content.mdoc b/apps/site/src/content/design-system/components/list/design/list-item-spacing/content.mdoc
index 87825806d..2b4ba343c 100644
--- a/apps/site/src/content/design-system/components/list/design/list-item-spacing/content.mdoc
+++ b/apps/site/src/content/design-system/components/list/design/list-item-spacing/content.mdoc
@@ -2,17 +2,10 @@ Use a large spaced list when you have interactive elements. This can be used to
 
 ```jsx
 <div>
-  <h1 className="typography-body-10 mb-2">Medium</h1>
-  <List type="bullet" className="mb-4" spacing="medium">
-    <List.Item>Styled bullet list</List.Item>
-    <List.Item>Styled bullet list</List.Item>
-    <List.Item>Styled bullet list</List.Item>
-  </List>
-  <h1 className="typography-body-10 mb-2">Large</h1>
-  <List type="bullet" className="mb-4" spacing="large">
-    <List.Item>Styled bullet list</List.Item>
-    <List.Item>Styled bullet list</List.Item>
-    <List.Item>Styled bullet list</List.Item>
+  <List type="link" spacing="large">
+    <List.Item>This is a large spaced link list</List.Item>
+    <List.Item>This is a large spaced link list</List.Item>
+    <List.Item>This is a large spaced link list</List.Item>
   </List>
 </div>
 ```
diff --git a/apps/site/src/content/design-system/components/list/design/other-lists/content.mdoc b/apps/site/src/content/design-system/components/list/design/other-lists/content.mdoc
index 3c52152df..121da8625 100644
--- a/apps/site/src/content/design-system/components/list/design/other-lists/content.mdoc
+++ b/apps/site/src/content/design-system/components/list/design/other-lists/content.mdoc
@@ -1,17 +1,33 @@
 Use link list styling when the list items are clickable. An un-styled list has no bullets, ticks or icons.
 
 ```jsx
-() => {
-  const TYPES = ['bullet', 'link', 'tick', 'cross', 'unstyled', 'icon', 'ordered'];
-  return TYPES.map(type => (
-    <div key={type}>
-      <h1 className="typography-body-10 mb-2">{type}</h1>
-      <List type={type} className="mb-4" icon={type === 'icon' ? PdfFileIcon : undefined}>
-        <List.Item>Styled {type} list</List.Item>
-        <List.Item>Styled {type} list</List.Item>
-        <List.Item>Styled {type} list</List.Item>
-      </List>
-    </div>
-  ));
-};
+<>
+  <h1 className="typography-body-10 mb-2 italic text-muted">Link list</h1>
+  <List type="link" className="mb-4">
+    <List.Item>This is a link list</List.Item>
+    <List.Item>This is a link list</List.Item>
+  </List>
+  <h1 className="typography-body-10 mb-2 italic text-muted">Tick list</h1>
+  <List type="tick" className="mb-4">
+    <List.Item>This is a tick list</List.Item>
+    <List.Item>This is a tick list</List.Item>
+  </List>
+  <h1 className="typography-body-10 mb-2 italic text-muted">Cross list</h1>
+  <List type="cross" className="mb-4">
+    <List.Item>This is a cross list</List.Item>
+    <List.Item>This is a cross list</List.Item>
+  </List>
+  <h1 className="typography-body-10 mb-2 italic text-muted">Unstyled list</h1>
+  <List type="unstyled" className="mb-4">
+    <List.Item>This is an unstyled list</List.Item>
+    <List.Item>This is an unstyled list</List.Item>
+  </List>
+  <h1 className="typography-body-10 mb-2 italic text-muted">Icon list</h1>
+  <List className="mb-4">
+    <List.Item type="icon" icon={GenericFileIcon} look="muted">This is an icon list</List.Item>
+    <List.Item type="icon" icon={GenericFileIcon} look="muted">This is an icon list</List.Item>
+    <List.Item type="icon" icon={GenericFileIcon} look="primary">This is an icon list</List.Item>
+    <List.Item type="icon" icon={GenericFileIcon} look="primary">This is an icon list</List.Item>
+  </List>
+</>
 ```
diff --git a/apps/site/src/content/design-system/components/list/index.yaml b/apps/site/src/content/design-system/components/list/index.yaml
index 964526b0f..dee2c2164 100644
--- a/apps/site/src/content/design-system/components/list/index.yaml
+++ b/apps/site/src/content/design-system/components/list/index.yaml
@@ -32,3 +32,6 @@ accessibility:
   - title:
       name: Accessibility API
       slug: accessibility-api
+relatedComponents:
+  - title: Icons
+    slug: foundation/icon
diff --git a/apps/site/src/content/design-system/components/modal/index.yaml b/apps/site/src/content/design-system/components/modal/index.yaml
index 983315b43..6bf71aafa 100644
--- a/apps/site/src/content/design-system/components/modal/index.yaml
+++ b/apps/site/src/content/design-system/components/modal/index.yaml
@@ -29,3 +29,10 @@ accessibility:
   - title:
       name: Accessibility API
       slug: accessibility-api
+relatedComponents:
+  - title: Popovers
+    slug: components/popover
+  - title: Buttons
+    slug: components/button
+  - title: Icons
+    slug: foundation/icon
diff --git a/apps/site/src/content/design-system/components/pagination/index.yaml b/apps/site/src/content/design-system/components/pagination/index.yaml
index 534c3a9bc..5482e949e 100644
--- a/apps/site/src/content/design-system/components/pagination/index.yaml
+++ b/apps/site/src/content/design-system/components/pagination/index.yaml
@@ -1,4 +1,4 @@
-name: Paginations
+name: Pagination
 description: >-
   Pagination is a component capable of helping the user navigate and give access
   to multiple pages of content, typically used in long form content.
@@ -28,3 +28,6 @@ accessibility:
   - title:
       name: Accessibility API
       slug: accessibility-api
+relatedComponents:
+  - title: Buttons
+    slug: components/button
diff --git a/apps/site/src/content/design-system/components/panel/index.yaml b/apps/site/src/content/design-system/components/panel/index.yaml
index 63f5435a0..81de24778 100644
--- a/apps/site/src/content/design-system/components/panel/index.yaml
+++ b/apps/site/src/content/design-system/components/panel/index.yaml
@@ -34,3 +34,12 @@ accessibility:
   - title:
       name: Accessibility API
       slug: accessibility-api
+relatedComponents:
+  - title: Accordions
+    slug: components/accordion
+  - title: Tabs
+    slug: components/tabs
+  - title: Wells
+    slug: components/well
+  - title: Tables
+    slug: components/table
diff --git a/apps/site/src/content/design-system/components/popover/code.mdoc b/apps/site/src/content/design-system/components/popover/code.mdoc
index af43cf7cc..acf905137 100644
--- a/apps/site/src/content/design-system/components/popover/code.mdoc
+++ b/apps/site/src/content/design-system/components/popover/code.mdoc
@@ -3,6 +3,7 @@
 ```tsx
 <div className="flex gap-2">
   <Popover
+    soft
     look="primary"
     heading="Heading"
     content="Small overlays of content for housing secondary information. These are often used to provide explanatory information
@@ -11,6 +12,7 @@
     With heading
   </Popover>
   <Popover
+    soft
     look="primary"
     content="Small overlays of content for housing secondary information. These are often used to provide explanatory information
     for complex ideas."
diff --git a/apps/site/src/content/design-system/components/popover/design/popover/content.mdoc b/apps/site/src/content/design-system/components/popover/design/popover/content.mdoc
index 6bc14ae40..a680422f9 100644
--- a/apps/site/src/content/design-system/components/popover/design/popover/content.mdoc
+++ b/apps/site/src/content/design-system/components/popover/design/popover/content.mdoc
@@ -3,7 +3,7 @@ These popovers can appear with or without a heading. For accessibility reasons o
 ```tsx
 <div className="flex gap-2">
   <Popover
-    look="link"
+    look="unstyled"
     heading="Heading"
     content="Small overlays of content for housing secondary information. These are often used to provide explanatory information
     for complex ideas."
@@ -12,7 +12,7 @@ These popovers can appear with or without a heading. For accessibility reasons o
     With heading
   </Popover>
   <Popover
-    look="link"
+    look="unstyled"
     content="Small overlays of content for housing secondary information. These are often used to provide explanatory information
     for complex ideas."
     icon={() => <HelpIcon className="ml-2" color="hero" />}
diff --git a/apps/site/src/content/design-system/components/popover/index.yaml b/apps/site/src/content/design-system/components/popover/index.yaml
index f94d518a7..75c211813 100644
--- a/apps/site/src/content/design-system/components/popover/index.yaml
+++ b/apps/site/src/content/design-system/components/popover/index.yaml
@@ -25,3 +25,6 @@ accessibility:
   - title:
       name: Accessibility API
       slug: accessibility-api
+relatedComponents:
+  - title: Modals
+    slug: components/modal
diff --git a/apps/site/src/content/design-system/components/progress-bar/index.yaml b/apps/site/src/content/design-system/components/progress-bar/index.yaml
index 993e1da2d..783c7bcce 100644
--- a/apps/site/src/content/design-system/components/progress-bar/index.yaml
+++ b/apps/site/src/content/design-system/components/progress-bar/index.yaml
@@ -1,4 +1,4 @@
-name: Progress bars
+name: Progress bar
 description: >-
   Progress bars are animated bars which show a rate of completion for a system
   task or a response to user input. They can be accompanied by a percentage of
diff --git a/apps/site/src/content/design-system/components/progress-rope/index.yaml b/apps/site/src/content/design-system/components/progress-rope/index.yaml
index e4476c286..f065807c7 100644
--- a/apps/site/src/content/design-system/components/progress-rope/index.yaml
+++ b/apps/site/src/content/design-system/components/progress-rope/index.yaml
@@ -1,4 +1,4 @@
-name: Progress ropes
+name: Progress rope
 description: >-
   The progress rope is a tool for signposting completion on long forms or
   applications and is designed to be used with the GEL forms framework.
diff --git a/apps/site/src/content/design-system/components/radio-group/design/dos-and-donts/content.mdoc b/apps/site/src/content/design-system/components/radio-group/design/dos-and-donts/content.mdoc
index 18884b7d2..909c66145 100644
--- a/apps/site/src/content/design-system/components/radio-group/design/dos-and-donts/content.mdoc
+++ b/apps/site/src/content/design-system/components/radio-group/design/dos-and-donts/content.mdoc
@@ -8,13 +8,19 @@
 {% layout-area %}
 ![Question set asking ‘Select your favourite fruit’ With radio options vertically stacked: Apples, Pineapples, Pears. This diagram has a tick.](https://res.cloudinary.com/westpac-gel/image/upload/v1604287075/5f9f7a62c5be90222be298fc.png)
 
-Do - List checkboxes and radios vertically, this makes scanning choices faster and easier.
+```html
+<p className="typography-body-10"><span className="text-success font-bold">Do</span> - List checkboxes and radios vertically, this makes scanning choices faster and easier.</p>
+```
+
 {% /layout-area %}
 
 {% layout-area %}
 ![Question set asking ‘Select your favourite fruit’ With radio options horizontally displayed: Apples, Pineapples, Pears. This diagram has a cross.](https://res.cloudinary.com/westpac-gel/image/upload/v1604287083/5f9f7a69c5be90222be298fd.png)
 
-Avoid - Placing more than two checkboxes horizontally, side-by-side.
+```html
+<p className="typography-body-10"><span className="text-danger font-bold">Avoid</span> - Placing more than two checkboxes horizontally, side-by-side.</p>
+```
+
 {% /layout-area %}
 {% /layout %}
 
@@ -22,12 +28,18 @@ Avoid - Placing more than two checkboxes horizontally, side-by-side.
 {% layout-area %}
 ![Question set asking ‘Select your favourite fruit’ With radio options: Apples, Pineapples, Pears, Watermelons. This diagram has a tick.](https://res.cloudinary.com/westpac-gel/image/upload/v1624410638/60d28a0d62675721d7db363e.png)
 
-Do - Use a consistent taxonomy
+```html
+<p className="typography-body-10"><span className="text-success font-bold">Do</span> - Use a consistent taxonomy</p>
+```
+
 {% /layout-area %}
 
 {% layout-area %}
 ![Question set asking ‘Select your favourite fruit’ With radio options: Apples, Pineapples, Red apples, Green apples. This diagram has a cross.](https://res.cloudinary.com/westpac-gel/image/upload/v1624410646/60d28a1562675721d7db363f.png)
 
-Avoid - Mixing taxonomy categories and sub categories
+```html
+<p className="typography-body-10"><span className="text-danger font-bold">Avoid</span> - Mixing taxonomy categories and sub categories</p>
+```
+
 {% /layout-area %}
 {% /layout %}
diff --git a/apps/site/src/content/design-system/components/radio-group/index.yaml b/apps/site/src/content/design-system/components/radio-group/index.yaml
index 51384bdbb..8869b45d5 100644
--- a/apps/site/src/content/design-system/components/radio-group/index.yaml
+++ b/apps/site/src/content/design-system/components/radio-group/index.yaml
@@ -1,4 +1,4 @@
-name: Radio groups
+name: Radios
 description: >-
   Radios are a proven and effective way to elicit a single choice from a user.
   They also require careful consideration to produce the best results.
@@ -37,3 +37,10 @@ accessibility:
   - title:
       name: Accessibility API
       slug: accessibility-api
+relatedComponents:
+  - title: Checkboxes
+    slug: components/checkbox-group
+  - title: Button groups
+    slug: components/button-group
+  - title: Switches
+    slug: components/switch
diff --git a/apps/site/src/content/design-system/components/repeater/accessibilityDemo.mdoc b/apps/site/src/content/design-system/components/repeater/accessibilityDemo.mdoc
index 64c88e311..4137a8ca0 100644
--- a/apps/site/src/content/design-system/components/repeater/accessibilityDemo.mdoc
+++ b/apps/site/src/content/design-system/components/repeater/accessibilityDemo.mdoc
@@ -1,9 +1,5 @@
 ```jsx
 <Repeater>
-  <Form.Group>
-    <Form.Label htmlFor={`test`}>Primary</Form.Label>
-    <Form.Hint>Primary title text</Form.Hint>
-    <Input className="w-full" name="test" onChange={e => console.log(e)} />
-  </Form.Group>
+  <h3>Repeater</h3>
 </Repeater>
 ```
diff --git a/apps/site/src/content/design-system/components/repeater/code.mdoc b/apps/site/src/content/design-system/components/repeater/code.mdoc
index 64c88e311..4137a8ca0 100644
--- a/apps/site/src/content/design-system/components/repeater/code.mdoc
+++ b/apps/site/src/content/design-system/components/repeater/code.mdoc
@@ -1,9 +1,5 @@
 ```jsx
 <Repeater>
-  <Form.Group>
-    <Form.Label htmlFor={`test`}>Primary</Form.Label>
-    <Form.Hint>Primary title text</Form.Hint>
-    <Input className="w-full" name="test" onChange={e => console.log(e)} />
-  </Form.Group>
+  <h3>Repeater</h3>
 </Repeater>
 ```
diff --git a/apps/site/src/content/design-system/components/repeater/design/default/content.mdoc b/apps/site/src/content/design-system/components/repeater/design/default/content.mdoc
index 05619983b..f8a4550d8 100644
--- a/apps/site/src/content/design-system/components/repeater/design/default/content.mdoc
+++ b/apps/site/src/content/design-system/components/repeater/design/default/content.mdoc
@@ -2,10 +2,6 @@ Sitting directly under the elements or component it aims to repeat, by selecting
 
 ```jsx
 <Repeater>
-  <Form.Group>
-    <Form.Label htmlFor={`test`}>Primary</Form.Label>
-    <Form.Hint>Primary title text</Form.Hint>
-    <Input className="w-full" name="test" onChange={e => console.log(e)} />
-  </Form.Group>
+  <h3>Repeater</h3>
 </Repeater>
 ```
diff --git a/apps/site/src/content/design-system/components/repeater/index.yaml b/apps/site/src/content/design-system/components/repeater/index.yaml
index 08db1ae4d..72219be59 100644
--- a/apps/site/src/content/design-system/components/repeater/index.yaml
+++ b/apps/site/src/content/design-system/components/repeater/index.yaml
@@ -1,4 +1,4 @@
-name: Repeaters
+name: Repeater
 description: >-
   A Repeater is a user controlled pattern for allowing multiple instances of
   something.
diff --git a/apps/site/src/content/design-system/components/selector/accessibilityDemo.mdoc b/apps/site/src/content/design-system/components/selector/accessibilityDemo.mdoc
index d73b3cf49..bbb5227c9 100644
--- a/apps/site/src/content/design-system/components/selector/accessibilityDemo.mdoc
+++ b/apps/site/src/content/design-system/components/selector/accessibilityDemo.mdoc
@@ -1,55 +1,62 @@
 ```tsx
-<Selector type="radio">
-  {[
-    {
-      before: (
-        <Selector.Adornment align="top">
-          <SettingsIcon className="h-5 w-5" />
-        </Selector.Adornment>
-      ),
-      label: 'Label',
-      hint: 'Some supporting hint text can do here',
-      key: 'A',
-      secondaryText: '$10,000.00',
-      disabled: false,
-    },
-    {
-      before: (
-        <Selector.Adornment align="top">
-          <WatchIcon className="h-5 w-5" />
-        </Selector.Adornment>
-      ),
-      label: 'Label',
-      hint: 'Some supporting hint text can do here',
-      key: 'B',
-      secondaryText: '$10,000.00',
-      disabled: false,
-    },
-    {
-      before: (
-        <Selector.Adornment align="top">
-          <EmailIcon className="h-5 w-5" />
-        </Selector.Adornment>
-      ),
-      label: 'Label',
-      hint: 'Some supporting hint text can do here',
-      key: 'C',
-      secondaryText: '$10,000.00',
-      disabled: false,
-    },
-  ].map(({ key, disabled, hint, label, before, secondaryText }) => (
-    <Selector.Radio
-      checkIcon="arrow"
-      before={before}
-      after={<Selector.Label>{secondaryText}</Selector.Label>}
-      key={key}
-      body
-      value={key}
-      isDisabled={disabled}
-    >
-      <Selector.Label>{label}</Selector.Label>
-      {hint && <Selector.Hint>{hint}</Selector.Hint>}
-    </Selector.Radio>
-  ))}
-</Selector>
+<Grid>
+  <Item span={{ initial: 12, sm: 6 }}>
+    <Selector type="radio">
+      <Selector.Radio
+        key="1"
+        checkIcon="arrow"
+        value="1"
+        before={
+          <Selector.Adornment align="top">
+            <SettingsIcon color="hero" />
+          </Selector.Adornment>
+        }
+      >
+        <div className="flex flex-row justify-between">
+          <Selector.Label>Label</Selector.Label>
+          <Selector.Label className="max-sm:typography-body-9 sm:typography-body-8 font-normal">
+            $10,000.00
+          </Selector.Label>
+        </div>
+        <Selector.Hint className="max-sm:typography-body-10 sm:typography-body-9">Some supporting hint text can go here</Selector.Hint>
+      </Selector.Radio>
+      <Selector.Radio
+        key="2"
+        checkIcon="arrow"
+        value="2"
+        before={
+          <Selector.Adornment align="top">
+            <WatchIcon color="hero" />
+          </Selector.Adornment>
+        }
+      >
+        <div className="flex flex-row justify-between">
+          <Selector.Label>Label</Selector.Label>
+          <Selector.Label className="max-sm:typography-body-9 sm:typography-body-8 font-normal">
+            $10,000.00
+          </Selector.Label>
+        </div>        
+        <Selector.Hint className="max-sm:typography-body-10 sm:typography-body-9">Some supporting hint text can go here</Selector.Hint>
+      </Selector.Radio>
+      <Selector.Radio
+        key="3"
+        checkIcon="arrow"
+        value="3"
+        before={
+          <Selector.Adornment align="top">
+            <EmailIcon color="hero"/>
+          </Selector.Adornment>
+        }
+      >
+        <div className="flex flex-row justify-between">
+          <Selector.Label>Label</Selector.Label>
+          <Selector.Label className="max-sm:typography-body-9 sm:typography-body-8 font-normal">
+            $10,000.00
+          </Selector.Label>
+        </div>
+        <Selector.Hint className="max-sm:typography-body-10 sm:typography-body-9">Some supporting hint text can go here</Selector.Hint>
+      </Selector.Radio>
+    </Selector>
+  </Item>
+</Grid>
 ```
diff --git a/apps/site/src/content/design-system/components/selector/code.mdoc b/apps/site/src/content/design-system/components/selector/code.mdoc
index 519958b6e..47310a6a4 100644
--- a/apps/site/src/content/design-system/components/selector/code.mdoc
+++ b/apps/site/src/content/design-system/components/selector/code.mdoc
@@ -1,95 +1,148 @@
+### Button select
+
 ```tsx
-<Selector type="checkbox">
-  {[
-    { key: 'A', disabled: false },
-    { key: 'B', disabled: false },
-    { key: 'C', disabled: false },
-    { key: 'D', disabled: true },
-  ].map(({ key, disabled }) => (
-    <Selector.Checkbox key={key} body value={key} isDisabled={disabled}>
-      <Selector.Label>Something {key}</Selector.Label>
-    </Selector.Checkbox>
-  ))}
-</Selector>
+<Grid>
+  <Item span={{ initial: 12, sm: 6 }}>
+    <Selector type="radio">
+      <Selector.Radio key="1" checkIcon="arrow" value="1">
+        <Selector.Label>Button select</Selector.Label>
+        <Selector.Hint className="max-sm:typography-body-10 sm:typography-body-9">Some supporting hint text can go here</Selector.Hint>
+      </Selector.Radio>
+      <Selector.Radio key="2" checkIcon="arrow" value="2">
+        <Selector.Label>Button select</Selector.Label>
+        <Selector.Hint className="max-sm:typography-body-10 sm:typography-body-9">Some supporting hint text can go here</Selector.Hint>
+      </Selector.Radio>
+      <Selector.Radio key="3" checkIcon="arrow" value="3">
+        <Selector.Label>Button select</Selector.Label>
+        <Selector.Hint className="max-sm:typography-body-10 sm:typography-body-9">Some supporting hint text can go here</Selector.Hint>
+      </Selector.Radio>
+    </Selector>
+  </Item>
+</Grid>
 ```
 
----
-
-### Radio
+### Single-select
 
 ```tsx
-<Selector type="radio">
-  {[
-    { key: 'A', disabled: false },
-    { key: 'B', disabled: false },
-    { key: 'C', disabled: false },
-    { key: 'D', disabled: true },
-  ].map(({ key, disabled }) => (
-    <Selector.Radio key={key} body value={key} isDisabled={disabled}>
-      <Selector.Label>Something {key}</Selector.Label>
-    </Selector.Radio>
-  ))}
-</Selector>
+<Grid>
+  <Item span={{ initial: 12, sm: 6 }}>
+    <Selector type="radio">
+      <Selector.Radio key="1" value="1">
+        <Selector.Label>Single-select</Selector.Label>
+        <Selector.Hint className="max-sm:typography-body-10 sm:typography-body-9">Some supporting hint text can go here</Selector.Hint>
+      </Selector.Radio>
+      <Selector.Radio key="2" value="2">
+        <Selector.Label>Single-select</Selector.Label>
+        <Selector.Hint className="max-sm:typography-body-10 sm:typography-body-9">Some supporting hint text can go here</Selector.Hint>
+      </Selector.Radio>
+      <Selector.Radio key="3" value="3">
+        <Selector.Label>Single-select</Selector.Label>
+        <Selector.Hint className="max-sm:typography-body-10 sm:typography-body-9">Some supporting hint text can go here</Selector.Hint>
+      </Selector.Radio>
+    </Selector>
+  </Item>
+</Grid>
 ```
 
 ---
 
-### Check with arrow
+### Multi-select
 
 ```tsx
-<Selector type="radio">
-  {[
-    { key: 'A', disabled: false },
-    { key: 'B', disabled: false },
-    { key: 'C', disabled: false },
-    { key: 'D', disabled: true },
-  ].map(({ key, disabled }) => (
-    <Selector.Radio key={key} body value={key} isDisabled={disabled} checkIcon="arrow">
-      <Selector.Label>Something {key}</Selector.Label>
-    </Selector.Radio>
-  ))}
-</Selector>
+() => {
+  const [selectedValues, setSelectedValues] = useState<string[]>(['2', '3']);
+  return (
+    <Grid>
+      <Item span={{ initial: 12, sm: 6 }}>
+        <Selector
+          type="checkbox"
+          value={selectedValues}
+          onChange={value => {
+            setSelectedValues(value);
+          }}
+        >
+          <Selector.Checkbox key="1" value="1">
+            <Selector.Label>Multi-select</Selector.Label>
+            <Selector.Hint className="max-sm:typography-body-10 sm:typography-body-9">Some supporting hint text can go here</Selector.Hint>
+          </Selector.Checkbox>
+          <Selector.Checkbox key="2" value="2">
+            <Selector.Label>Multi-select</Selector.Label>
+            <Selector.Hint className="max-sm:typography-body-10 sm:typography-body-9">Some supporting hint text can go here</Selector.Hint>
+          </Selector.Checkbox>
+          <Selector.Checkbox key="3" value="3">
+            <Selector.Label>Multi-select</Selector.Label>
+            <Selector.Hint className="max-sm:typography-body-10 sm:typography-body-9">Some supporting hint text can go here</Selector.Hint>
+          </Selector.Checkbox>
+        </Selector>
+      </Item>
+    </Grid>
+  );
+};
 ```
 
 ---
 
-### Check with arrow
+### Complex layout
 
 ```tsx
-() => {
-  return (
-    <Selector type="checkbox">
-      {[
-        {
-          label: 'Here is a label A',
-          hint: (
-            <>
-              <VisuallyHidden>Bank Account</VisuallyHidden>
-              123-456 123456
-            </>
-          ),
-          key: 'A',
-          disabled: false,
-        },
-        {
-          label: 'Here is a label B',
-          hint: (
-            <>
-              <VisuallyHidden>Bank Account</VisuallyHidden>
-              123-456 123456
-            </>
-          ),
-          key: 'B',
-          disabled: false,
-        },
-        { label: 'Here is a label C', hint: '', key: 'C', disabled: false },
-      ].map(({ key, disabled, hint, label }) => (
-        <Selector.Checkbox key={key} body value={key} isDisabled={disabled}>
-          <Selector.Label>{label}</Selector.Label>
-          {hint && <Selector.Hint>{hint}</Selector.Hint>}
-        </Selector.Checkbox>
-      ))}
+<Grid>
+  <Item span={{ initial: 12, sm: 6 }}>
+    <Selector type="radio">
+      <Selector.Radio
+        key="1"
+        checkIcon="arrow"
+        value="1"
+        before={
+          <Selector.Adornment align="top">
+            <SettingsIcon color="hero" />
+          </Selector.Adornment>
+        }
+      >
+        <div className="flex flex-row justify-between">
+          <Selector.Label>Label</Selector.Label>
+          <Selector.Label className="max-sm:typography-body-9 sm:typography-body-8 font-normal">
+            $10,000.00
+          </Selector.Label>
+        </div>
+        <Selector.Hint className="max-sm:typography-body-10 sm:typography-body-9">Some supporting hint text can go here</Selector.Hint>
+      </Selector.Radio>
+      <Selector.Radio
+        key="2"
+        checkIcon="arrow"
+        value="2"
+        before={
+          <Selector.Adornment align="top">
+            <WatchIcon color="hero" />
+          </Selector.Adornment>
+        }
+      >
+        <div className="flex flex-row justify-between">
+          <Selector.Label>Label</Selector.Label>
+          <Selector.Label className="max-sm:typography-body-9 sm:typography-body-8 font-normal">
+            $10,000.00
+          </Selector.Label>
+        </div>        
+        <Selector.Hint className="max-sm:typography-body-10 sm:typography-body-9">Some supporting hint text can go here</Selector.Hint>
+      </Selector.Radio>
+      <Selector.Radio
+        key="3"
+        checkIcon="arrow"
+        value="3"
+        before={
+          <Selector.Adornment align="top">
+            <EmailIcon color="hero"/>
+          </Selector.Adornment>
+        }
+      >
+        <div className="flex flex-row justify-between">
+          <Selector.Label>Label</Selector.Label>
+          <Selector.Label className="max-sm:typography-body-9 sm:typography-body-8 font-normal">
+            $10,000.00
+          </Selector.Label>
+        </div>
+        <Selector.Hint className="max-sm:typography-body-10 sm:typography-body-9">Some supporting hint text can go here</Selector.Hint>
+      </Selector.Radio>
     </Selector>
-  );
-};
+  </Item>
+</Grid>
 ```
diff --git a/apps/site/src/content/design-system/components/selector/design/selector-design/content.mdoc b/apps/site/src/content/design-system/components/selector/design/selector-design/content.mdoc
index 649fb5dcd..fcd0bafcf 100644
--- a/apps/site/src/content/design-system/components/selector/design/selector-design/content.mdoc
+++ b/apps/site/src/content/design-system/components/selector/design/selector-design/content.mdoc
@@ -5,17 +5,26 @@ Any of the variations described above can come in either a simple or complex lay
 The minimum content requirement is a label.
 
 ```tsx
-<Selector type="radio">
-  {[
-    { key: 'A', disabled: false },
-    { key: 'B', disabled: false },
-    { key: 'C', disabled: false },
-  ].map(({ key, disabled }) => (
-    <Selector.Radio key={key} body value={key} isDisabled={disabled}>
-      <Selector.Label>Label</Selector.Label>
-    </Selector.Radio>
-  ))}
-</Selector>
+() => {
+  const [value, setValue] = useState<string>('2');
+  return (
+    <Grid>
+      <Item span={{ initial: 12, sm: 6 }}>
+        <Selector type="radio" value={value} onChange={value => setValue(value)}>
+          <Selector.Radio key="1" value="1">
+            <Selector.Label>Label</Selector.Label>
+          </Selector.Radio>
+          <Selector.Radio key="2" value="2">
+            <Selector.Label>Label</Selector.Label>
+          </Selector.Radio>
+          <Selector.Radio key="3" value="3">
+            <Selector.Label>Label</Selector.Label>
+          </Selector.Radio>
+        </Selector>
+      </Item> 
+    </Grid>
+  );
+};
 ```
 
 ### Complex layout
@@ -25,57 +34,64 @@ Some experiences may require more detail such as monetary values or product name
 Any combination of these elements may be used as long as they are used consistently throughout a set, and should always at least have a label.
 
 ```tsx
-<Selector type="radio">
-  {[
-    {
-      before: (
-        <Selector.Adornment align="top">
-          <SettingsIcon className="h-5 w-5" />
-        </Selector.Adornment>
-      ),
-      label: 'Label',
-      hint: 'Some supporting hint text can do here',
-      key: 'A',
-      secondaryText: '$10,000.00',
-      disabled: false,
-    },
-    {
-      before: (
-        <Selector.Adornment align="top">
-          <WatchIcon className="h-5 w-5" />
-        </Selector.Adornment>
-      ),
-      label: 'Label',
-      hint: 'Some supporting hint text can do here',
-      key: 'B',
-      secondaryText: '$10,000.00',
-      disabled: false,
-    },
-    {
-      before: (
-        <Selector.Adornment align="top">
-          <EmailIcon className="h-5 w-5" />
-        </Selector.Adornment>
-      ),
-      label: 'Label',
-      hint: 'Some supporting hint text can do here',
-      key: 'C',
-      secondaryText: '$10,000.00',
-      disabled: false,
-    },
-  ].map(({ key, disabled, hint, label, before, secondaryText }) => (
-    <Selector.Radio
-      checkIcon="arrow"
-      before={before}
-      after={<Selector.Label>{secondaryText}</Selector.Label>}
-      key={key}
-      body
-      value={key}
-      isDisabled={disabled}
-    >
-      <Selector.Label>{label}</Selector.Label>
-      {hint && <Selector.Hint>{hint}</Selector.Hint>}
-    </Selector.Radio>
-  ))}
-</Selector>
+<Grid>
+  <Item span={{ initial: 12, sm: 6 }}>
+    <Selector type="radio">
+      <Selector.Radio
+        key="1"
+        checkIcon="arrow"
+        value="1"
+        before={
+          <Selector.Adornment align="top">
+            <SettingsIcon color="hero" />
+          </Selector.Adornment>
+        }
+      >
+        <div className="flex flex-row justify-between">
+          <Selector.Label>Label</Selector.Label>
+          <Selector.Label className="max-sm:typography-body-9 sm:typography-body-8 font-normal">
+            $10,000.00
+          </Selector.Label>
+        </div>
+        <Selector.Hint className="max-sm:typography-body-10 sm:typography-body-9">Some supporting hint text can go here</Selector.Hint>
+      </Selector.Radio>
+      <Selector.Radio
+        key="2"
+        checkIcon="arrow"
+        value="2"
+        before={
+          <Selector.Adornment align="top">
+            <WatchIcon color="hero" />
+          </Selector.Adornment>
+        }
+      >
+        <div className="flex flex-row justify-between">
+          <Selector.Label>Label</Selector.Label>
+          <Selector.Label className="max-sm:typography-body-9 sm:typography-body-8 font-normal">
+            $10,000.00
+          </Selector.Label>
+        </div>        
+        <Selector.Hint className="max-sm:typography-body-10 sm:typography-body-9">Some supporting hint text can go here</Selector.Hint>
+      </Selector.Radio>
+      <Selector.Radio
+        key="3"
+        checkIcon="arrow"
+        value="3"
+        before={
+          <Selector.Adornment align="top">
+            <EmailIcon color="hero"/>
+          </Selector.Adornment>
+        }
+      >
+        <div className="flex flex-row justify-between">
+          <Selector.Label>Label</Selector.Label>
+          <Selector.Label className="max-sm:typography-body-9 sm:typography-body-8 font-normal">
+            $10,000.00
+          </Selector.Label>
+        </div>
+        <Selector.Hint className="max-sm:typography-body-10 sm:typography-body-9">Some supporting hint text can go here</Selector.Hint>
+      </Selector.Radio>
+    </Selector>
+  </Item>
+</Grid>
 ```
diff --git a/apps/site/src/content/design-system/components/selector/design/selector-functionality/content.mdoc b/apps/site/src/content/design-system/components/selector/design/selector-functionality/content.mdoc
index d2842ca5a..b7ef72f1e 100644
--- a/apps/site/src/content/design-system/components/selector/design/selector-functionality/content.mdoc
+++ b/apps/site/src/content/design-system/components/selector/design/selector-functionality/content.mdoc
@@ -1,20 +1,50 @@
+### Button select
+
+The Button select variation, or 'Select and go' functionality is used to direct the user to a new destination or to present them with something new (eg a new question). The hover state includes a micro-interaction of the chevron, as well as an increase in border thickness.
+```tsx
+<Grid>
+  <Item span={{ initial: 12, sm: 6 }}>
+    <Selector type="radio">
+      <Selector.Radio key="1" checkIcon="arrow" value="1">
+        <Selector.Label>Button select</Selector.Label>
+        <Selector.Hint className="max-sm:typography-body-10 sm:typography-body-9">Some supporting hint text can go here</Selector.Hint>
+      </Selector.Radio>
+      <Selector.Radio key="2" checkIcon="arrow" value="2">
+        <Selector.Label>Button select</Selector.Label>
+        <Selector.Hint className="max-sm:typography-body-10 sm:typography-body-9">Some supporting hint text can go here</Selector.Hint>
+      </Selector.Radio>
+      <Selector.Radio key="3" checkIcon="arrow" value="3">
+        <Selector.Label>Button select</Selector.Label>
+        <Selector.Hint className="max-sm:typography-body-10 sm:typography-body-9">Some supporting hint text can go here</Selector.Hint>
+      </Selector.Radio>
+    </Selector>
+  </Item>
+</Grid>
+```
+
 ### Single select
 
 The single-select variation mimics the functionality of radio buttons, allowing only one item from the set to be selected. When an item is selected, the border increases in thickness with a tick icon used for further aid in visual confirmation.
 
 ```tsx
-<Selector type="radio">
-  {[
-    { key: 'A', disabled: false },
-    { key: 'B', disabled: false },
-    { key: 'C', disabled: false },
-    { key: 'D', disabled: true },
-  ].map(({ key, disabled }) => (
-    <Selector.Radio key={key} body value={key} isDisabled={disabled}>
-      <Selector.Label>Something {key}</Selector.Label>
-    </Selector.Radio>
-  ))}
-</Selector>
+<Grid>
+  <Item span={{ initial: 12, sm: 6 }}>
+    <Selector type="radio">
+      <Selector.Radio key="1" value="1">
+        <Selector.Label>Single-select</Selector.Label>
+        <Selector.Hint className="max-sm:typography-body-10 sm:typography-body-9">Some supporting hint text can go here</Selector.Hint>
+      </Selector.Radio>
+      <Selector.Radio key="2" value="2">
+        <Selector.Label>Single-select</Selector.Label>
+        <Selector.Hint className="max-sm:typography-body-10 sm:typography-body-9">Some supporting hint text can go here</Selector.Hint>
+      </Selector.Radio>
+      <Selector.Radio key="3" value="3">
+        <Selector.Label>Single-select</Selector.Label>
+        <Selector.Hint className="max-sm:typography-body-10 sm:typography-body-9">Some supporting hint text can go here</Selector.Hint>
+      </Selector.Radio>
+    </Selector>
+  </Item>
+</Grid>
 ```
 
 ### Multi-select
@@ -22,16 +52,33 @@ The single-select variation mimics the functionality of radio buttons, allowing
 The multi-select variation mimics the functionality of checkboxes, allowing multiple items from the set to be selected. When an item is selected, the border increases in thickness with a tick icon used for further aid in visual confirmation.
 
 ```tsx
-<Selector type="checkbox">
-  {[
-    { key: 'A', disabled: false },
-    { key: 'B', disabled: false },
-    { key: 'C', disabled: false },
-    { key: 'D', disabled: true },
-  ].map(({ key, disabled }) => (
-    <Selector.Checkbox key={key} body value={key} isDisabled={disabled}>
-      <Selector.Label>Something {key}</Selector.Label>
-    </Selector.Checkbox>
-  ))}
-</Selector>
+() => {
+  const [selectedValues, setSelectedValues] = useState<string[]>(['2', '3']);
+  return (
+    <Grid>
+      <Item span={{ initial: 12, sm: 6 }}>
+        <Selector
+          type="checkbox"
+          value={selectedValues}
+          onChange={value => {
+            setSelectedValues(value);
+          }}
+        >
+          <Selector.Checkbox key="1" value="1">
+            <Selector.Label>Multi-select</Selector.Label>
+            <Selector.Hint className="max-sm:typography-body-10 sm:typography-body-9">Some supporting hint text can go here</Selector.Hint>
+          </Selector.Checkbox>
+          <Selector.Checkbox key="2" value="2">
+            <Selector.Label>Multi-select</Selector.Label>
+            <Selector.Hint className="max-sm:typography-body-10 sm:typography-body-9">Some supporting hint text can go here</Selector.Hint>
+          </Selector.Checkbox>
+          <Selector.Checkbox key="3" value="3">
+            <Selector.Label>Multi-select</Selector.Label>
+            <Selector.Hint className="max-sm:typography-body-10 sm:typography-body-9">Some supporting hint text can go here</Selector.Hint>
+          </Selector.Checkbox>
+        </Selector>
+      </Item>
+    </Grid>
+  );
+};
 ```
diff --git a/apps/site/src/content/design-system/components/selector/index.yaml b/apps/site/src/content/design-system/components/selector/index.yaml
index c26262b8f..23d4b5dd2 100644
--- a/apps/site/src/content/design-system/components/selector/index.yaml
+++ b/apps/site/src/content/design-system/components/selector/index.yaml
@@ -1,4 +1,4 @@
-name: Selectors
+name: Selector
 description: >-
   A Selector is essentially a large stylised radio or checkbox that can be
   configured in many different ways for different uses.
@@ -28,3 +28,14 @@ accessibility:
   - title:
       name: Accessibility API
       slug: accessibility-api
+relatedComponents:
+  - title: Icons
+    slug: foundation/icon
+  - title: Checkboxes
+    slug: components/checkbox-group
+  - title: Colours
+    slug: foundation/colour
+  - title: Radios
+    slug: components/radio-group
+  - title: Pictograms
+    slug: foundation/pictogram
diff --git a/apps/site/src/content/design-system/components/switch/design/dos-and-donts/content.mdoc b/apps/site/src/content/design-system/components/switch/design/dos-and-donts/content.mdoc
index 9fcc0b2e5..205f0af8e 100644
--- a/apps/site/src/content/design-system/components/switch/design/dos-and-donts/content.mdoc
+++ b/apps/site/src/content/design-system/components/switch/design/dos-and-donts/content.mdoc
@@ -6,12 +6,18 @@
 {% layout-area %}
 ![](https://res.cloudinary.com/westpac-gel/image/upload/v1604288835/5f9f8142c5be90222be29901.png)
 
-Do - Use switches to reflect On or Off.
+```html
+<p className="typography-body-10"><span className="text-success font-bold">Do</span> - Use switches to reflect On or Off.</p>
+```
+
 {% /layout-area %}
 
 {% layout-area %}
 ![](https://res.cloudinary.com/westpac-gel/image/upload/v1604288842/5f9f8149c5be90222be29902.png)
 
-Avoid - Using switches to indicate a Yes or No answer to a question.
+```html
+<p className="typography-body-10"><span className="text-danger font-bold">Avoid</span> - Using switches to indicate a Yes or No answer to a question.</p>
+```
+
 {% /layout-area %}
 {% /layout %}
diff --git a/apps/site/src/content/design-system/components/switch/design/switches/content.mdoc b/apps/site/src/content/design-system/components/switch/design/switches/content.mdoc
deleted file mode 100644
index 4f058f25f..000000000
--- a/apps/site/src/content/design-system/components/switch/design/switches/content.mdoc
+++ /dev/null
@@ -1,31 +0,0 @@
-**Sizes:** We have one simple switch style that is available in four sizes (heights), with the default being Medium 36px. These four sizes align with other form element sizes.
-
-```jsx
-<div className="flex flex-row gap-2">
-  <Switch size="small" label="Small 30px" />
-  <Switch label="Medium 36px" />
-  <Switch size="large" label="Large 42px" />
-  <Switch size="xlarge" label="X Large 48px" />
-</div>
-```
-
-**Block switches:** Use Block switches in small break points to align the label and element to either side of the screen. This behaviour can be set up to work responsively, and change depending on breakpoint.
-
-```jsx
-<div className="flex flex-col gap-2">
-  <Switch block label="I'm a block switch" />
-</div>
-```
-
-**Using responsive breakpoint control:** As well as determining if the switch is a Block switch, the switch's size can also change based on breakpoint.
-
-```jsx
-<div className="flex flex-col gap-2">
-  <Switch
-    block
-    size={{ initial: 'small', lg: 'xlarge', xl: 'small' }}
-    label="Small but Extra large for LG breakpoint"
-  />
-  <Switch block size={{ initial: 'medium', lg: 'small', xl: 'medium' }} label="Small for LG breakpoint only" />
-</div>
-```
diff --git a/apps/site/src/content/design-system/components/switch/index.yaml b/apps/site/src/content/design-system/components/switch/index.yaml
index 2765877ba..a1a4cdf48 100644
--- a/apps/site/src/content/design-system/components/switch/index.yaml
+++ b/apps/site/src/content/design-system/components/switch/index.yaml
@@ -28,4 +28,8 @@ accessibility:
   - title:
       name: Accessibility API
       slug: accessibility-api
-relatedInformation: ['checkbox-group', 'button-group']
\ No newline at end of file
+relatedComponents:
+  - title: Checkboxes
+    slug: components/checkbox-group
+  - title: Button groups
+    slug: components/button-group
diff --git a/apps/site/src/content/design-system/components/symbol/design/third-party-symbols/content.mdoc b/apps/site/src/content/design-system/components/symbol/design/third-party-symbols/content.mdoc
index 56a010f03..b888c7521 100644
--- a/apps/site/src/content/design-system/components/symbol/design/third-party-symbols/content.mdoc
+++ b/apps/site/src/content/design-system/components/symbol/design/third-party-symbols/content.mdoc
@@ -1,47 +1 @@
-Filter by name
-
-Found 22 symbols
-
-AmericanExpressSymbol
-
-AppleStoreInverseSymbol
-
-AppleStoreSymbol
-
-BPayLandSymbol
-
-BPayPortSymbol
-
-FacebookSymbol
-
-GooglePlusSymbol
-
-GoogleStoreSymbol
-
-InstagramSymbol
-
-LinkedInSymbol
-
-MastercardAcceptedSymbol
-
-MastercardHorizontalSymbol
-
-MastercardSymbol
-
-MicrosoftStoreSymbol
-
-PayIDSymbol
-
-SlackSymbol
-
-TwitterSymbol
-
-VisaBlueSymbol
-
-VisaSymbol
-
-VisaWhiteSymbol
-
-YammerSymbol
-
-YouTubeSymbol
+{% symbols /%}
diff --git a/apps/site/src/content/design-system/components/symbol/index.yaml b/apps/site/src/content/design-system/components/symbol/index.yaml
index 4c9a4084f..3b3aa6d4b 100644
--- a/apps/site/src/content/design-system/components/symbol/index.yaml
+++ b/apps/site/src/content/design-system/components/symbol/index.yaml
@@ -27,3 +27,8 @@ accessibility:
   - title:
       name: Accessibility API
       slug: accessibility-api
+relatedComponents:
+  - title: Logos
+    slug: foundation/logo
+  - title: Icons
+    slug: foundation/icon
diff --git a/apps/site/src/content/design-system/components/table/index.yaml b/apps/site/src/content/design-system/components/table/index.yaml
index 72e24f97f..9abc37cf5 100644
--- a/apps/site/src/content/design-system/components/table/index.yaml
+++ b/apps/site/src/content/design-system/components/table/index.yaml
@@ -7,27 +7,35 @@ design:
   - title:
       name: Basic table
       slug: basic-table
+    
   - title:
       name: Striped row table
       slug: striped-row-table
+    
   - title:
       name: Bordered table
       slug: bordered-table
+    
   - title:
       name: Bordered, striped table
       slug: bordered-striped-table
+    
   - title:
       name: Basic table with highlights
       slug: basic-table-with-highlights
+    
   - title:
       name: User experience
       slug: user-experience
+    
   - title:
       name: Visual design
       slug: visual-design
+    
   - title:
       name: Dos and don’ts
       slug: dos-and-donts
+    
 accessibility:
   - title:
       name: Notes on accessibility
@@ -41,3 +49,6 @@ accessibility:
   - title:
       name: Accessibility API
       slug: accessibility-api
+relatedComponents:
+  - title: Panels
+    slug: components/panel
diff --git a/apps/site/src/content/design-system/components/tabs/index.yaml b/apps/site/src/content/design-system/components/tabs/index.yaml
index 1f62afbb9..9ec35cc99 100644
--- a/apps/site/src/content/design-system/components/tabs/index.yaml
+++ b/apps/site/src/content/design-system/components/tabs/index.yaml
@@ -28,3 +28,8 @@ accessibility:
   - title:
       name: Accessibility API
       slug: accessibility-api
+relatedComponents:
+  - title: Wells
+    slug: components/well
+  - title: Panels
+    slug: components/panel
diff --git a/apps/site/src/content/design-system/components/well/design/well/content.mdoc b/apps/site/src/content/design-system/components/well/design/well/content.mdoc
deleted file mode 100644
index a23c2208f..000000000
--- a/apps/site/src/content/design-system/components/well/design/well/content.mdoc
+++ /dev/null
@@ -1,23 +0,0 @@
-Choose the colour of your well and the background it appears on to help your content either stand out or recede. Contrasting colours will always make an impact.
-
-```tsx
-<Well>
-  It was a bright morning in the early part of summer; the river had resumed its wonted banks and its accustomed pace,
-  and a hot sun seemed to be pulling everything green and bushy and spiky up out of the earth towards him, as if by
-  strings. The Mole and the Water Rat had been up since dawn, very busy on matters connected with boats and the opening
-  of the boating season; painting and varnishing, mending paddles, repairing cushions, hunting for missing boat-hooks,
-  and so on; and were finishing breakfast in their little parlour and eagerly discussing their plans for the day, when a
-  heavy knock sounded at the door.
-</Well>
-```
-
-```tsx
-<Well color="white">
-  It was a bright morning in the early part of summer; the river had resumed its wonted banks and its accustomed pace,
-  and a hot sun seemed to be pulling everything green and bushy and spiky up out of the earth towards him, as if by
-  strings. The Mole and the Water Rat had been up since dawn, very busy on matters connected with boats and the opening
-  of the boating season; painting and varnishing, mending paddles, repairing cushions, hunting for missing boat-hooks,
-  and so on; and were finishing breakfast in their little parlour and eagerly discussing their plans for the day, when a
-  heavy knock sounded at the door.
-</Well>
-```
diff --git a/apps/site/src/content/design-system/components/well/index.yaml b/apps/site/src/content/design-system/components/well/index.yaml
index e8f06d403..7f6b9100b 100644
--- a/apps/site/src/content/design-system/components/well/index.yaml
+++ b/apps/site/src/content/design-system/components/well/index.yaml
@@ -25,4 +25,10 @@ accessibility:
   - title:
       name: Accessibility API
       slug: accessibility-api
-relatedInformation: ['panel', 'accordion', 'tabs']
\ No newline at end of file
+relatedComponents:
+  - title: Panels
+    slug: components/panel
+  - title: Accordions
+    slug: components/accordion
+  - title: Tabs
+    slug: components/tabs
diff --git a/apps/site/src/content/design-system/content/guidelines/age-school-year/index.yaml b/apps/site/src/content/design-system/content/guidelines/age-school-year/index.yaml
index d4dfa42ed..4ed07b41d 100644
--- a/apps/site/src/content/design-system/content/guidelines/age-school-year/index.yaml
+++ b/apps/site/src/content/design-system/content/guidelines/age-school-year/index.yaml
@@ -6,4 +6,4 @@ design:
       slug: undefined
     noTitle: true
 accessibility: []
-relatedInformation: []
+relatedComponents: []
diff --git a/apps/site/src/content/design-system/content/guidelines/error-message/relatedArticles.mdoc b/apps/site/src/content/design-system/content/guidelines/error-message/relatedArticles.mdoc
new file mode 100644
index 000000000..0a33ec695
--- /dev/null
+++ b/apps/site/src/content/design-system/content/guidelines/error-message/relatedArticles.mdoc
@@ -0,0 +1,3 @@
+[3.3.1 Error identification (Level A)](https://www.w3.org/WAI/WCAG21/quickref/#error-identification)&nbsp;: If an input error is automatically detected, the item that is in error is identified and the error is described to the user in text.
+
+[3.3.3 Error Suggestion (Level AA)](https://www.w3.org/WAI/WCAG21/quickref/#error-suggestion)&nbsp;: If an input error is automatically detected and suggestions for correction are known, then the suggestions are provided to the user, unless it would jeopardize the security or purpose of the content.
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 bcdd763a1..1375fd4e9 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
@@ -176,8 +176,12 @@ For example:
 
 ![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)
 
-Do - Use clear call to action labels
+```html
+<p className="typography-body-10"><span className="text-success font-bold">Do</span> - Use clear call to action labels</p>
+```
 
 ![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)
 
-Avoid - Using double negative labels
+```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
diff --git a/apps/site/src/content/design-system/design-tokens/code.mdoc b/apps/site/src/content/design-system/design-tokens/code.mdoc
new file mode 100644
index 000000000..e69de29bb
diff --git a/apps/site/src/content/design-system/design-tokens/design/main/content.mdoc b/apps/site/src/content/design-system/design-tokens/design/main/content.mdoc
new file mode 100644
index 000000000..782638295
--- /dev/null
+++ b/apps/site/src/content/design-system/design-tokens/design/main/content.mdoc
@@ -0,0 +1,22 @@
+This basic information includes things like:
+
+- Colours
+- Fonts and font sizes
+- Spacing
+- Breakpoints
+
+More complex features such as animation can also be shared once a common design is reached.
+
+Design tokens create a common language that can be accessed by each platform where typically this data cannot be shared due to technical limitations.
+
+GEL Design System tokens deliver the basic core elements of the system which provide an accurate representation of brand. These tokens are exported for any platform to consume ‘as is’ or to transform them into the correct value type required for their platform. When adopted they can support increased brand consistency across our web or native touchpoints.
+
+Design tokens optimise workflow and mitigate the risk of error which arises when copying styles.
+
+Using a central design token system keeps things simple – a single source of truth for any platform to reference the latest approved brand styles.
+
+Adopting the GEL Design System tokens:
+
+- Optimises workflow
+- Removes risk of copying styles
+- Reduces the time and cost of each platform maintaining styles
diff --git a/apps/site/src/content/design-system/design-tokens/index.yaml b/apps/site/src/content/design-system/design-tokens/index.yaml
new file mode 100644
index 000000000..f65c2f60e
--- /dev/null
+++ b/apps/site/src/content/design-system/design-tokens/index.yaml
@@ -0,0 +1,9 @@
+name: Design tokens
+description: Design tokens support us to share basic brand styling at the simplest level with any interface on any platform across the Bank.
+design:
+  - title:
+      name: Main
+      slug: main
+    noTitle: true
+accessibility: []
+relatedComponents: []
diff --git a/apps/site/src/content/design-system/foundation/colour/relatedArticles.mdoc b/apps/site/src/content/design-system/foundation/colour/relatedArticles.mdoc
new file mode 100644
index 000000000..78ed2ce1c
--- /dev/null
+++ b/apps/site/src/content/design-system/foundation/colour/relatedArticles.mdoc
@@ -0,0 +1,7 @@
+**Colour system**
+
+Why we've done it, how it works and why you should use it. Read about the&nbsp;[colour](/articles/colour)&nbsp;system.
+
+**Multi-brand**
+
+Strategic approach to digital brand management and delivery. Find out how to&nbsp;[think multi-brand](/articles/multi-brand-made-easy).
diff --git a/apps/site/src/content/design-system/foundation/font/index.yaml b/apps/site/src/content/design-system/foundation/font/index.yaml
index fb9799efc..c173ce411 100644
--- a/apps/site/src/content/design-system/foundation/font/index.yaml
+++ b/apps/site/src/content/design-system/foundation/font/index.yaml
@@ -31,3 +31,6 @@ accessibility:
   - title:
       name: Accessibility API
       slug: accessibility-api
+relatedComponents:
+  - title: Text styling
+    slug: foundation/text-styling
diff --git a/apps/site/src/content/design-system/foundation/font/relatedArticles.mdoc b/apps/site/src/content/design-system/foundation/font/relatedArticles.mdoc
new file mode 100644
index 000000000..f11153f9c
--- /dev/null
+++ b/apps/site/src/content/design-system/foundation/font/relatedArticles.mdoc
@@ -0,0 +1,7 @@
+**Typography**
+
+Why we've done it, how it works and why you should use it. Read about&nbsp;[typography](/articles/typography).
+
+**Multi-brand**
+
+Strategic approach to digital brand management and delivery. Find out how to&nbsp;[think multi-brand](/articles/multi-brand-made-easy).
diff --git a/apps/site/src/content/design-system/foundation/grid/relatedArticles.mdoc b/apps/site/src/content/design-system/foundation/grid/relatedArticles.mdoc
new file mode 100644
index 000000000..1e55f86cd
--- /dev/null
+++ b/apps/site/src/content/design-system/foundation/grid/relatedArticles.mdoc
@@ -0,0 +1,7 @@
+**The grid**
+
+Why you should use it and how it works. Read about the responsive&nbsp;[grid](/articles/the-grid).
+
+**Responsive design**
+
+Responsive design is the right approach, influence your project to do the right thing by our customers and adopt it. Read about&nbsp;[responsive design](/articles/think-responsive).
diff --git a/apps/site/src/content/design-system/foundation/icon/index.yaml b/apps/site/src/content/design-system/foundation/icon/index.yaml
index 69a37dc93..6b9b352f5 100644
--- a/apps/site/src/content/design-system/foundation/icon/index.yaml
+++ b/apps/site/src/content/design-system/foundation/icon/index.yaml
@@ -35,3 +35,10 @@ accessibility:
   - title:
       name: Accessibility API
       slug: accessibility-api
+relatedComponents:
+  - title: Logos
+    slug: foundation/logo
+  - title: Colours
+    slug: foundation/colour
+  - title: Pictograms
+    slug: foundation/pictogram
diff --git a/apps/site/src/content/design-system/foundation/icon/relatedArticles.mdoc b/apps/site/src/content/design-system/foundation/icon/relatedArticles.mdoc
new file mode 100644
index 000000000..52640cf3a
--- /dev/null
+++ b/apps/site/src/content/design-system/foundation/icon/relatedArticles.mdoc
@@ -0,0 +1,3 @@
+**Iconography**
+
+How to use icons, when and when not to use icons. Read more about&nbsp;[iconography](/articles/iconography).
diff --git a/apps/site/src/content/design-system/foundation/logo/index.yaml b/apps/site/src/content/design-system/foundation/logo/index.yaml
index 60c0a078f..9b502bc59 100644
--- a/apps/site/src/content/design-system/foundation/logo/index.yaml
+++ b/apps/site/src/content/design-system/foundation/logo/index.yaml
@@ -27,3 +27,8 @@ accessibility:
   - title:
       name: Accessibility API
       slug: accessibility-api
+relatedComponents:
+  - title: Icons
+    slug: foundation/icon
+  - title: Symbols
+    slug: components/symbol
diff --git a/apps/site/src/content/design-system/foundation/logo/relatedArticles.mdoc b/apps/site/src/content/design-system/foundation/logo/relatedArticles.mdoc
new file mode 100644
index 000000000..b86b6bbdf
--- /dev/null
+++ b/apps/site/src/content/design-system/foundation/logo/relatedArticles.mdoc
@@ -0,0 +1,3 @@
+**Multibrand**
+
+Learn about the strategic approach to digital brand management & delivery. Read about&nbsp;[Multi-brand](/articles/multi-brand-made-easy).
diff --git a/apps/site/src/content/design-system/foundation/pictogram/index.yaml b/apps/site/src/content/design-system/foundation/pictogram/index.yaml
index 243b9cf86..d07827602 100644
--- a/apps/site/src/content/design-system/foundation/pictogram/index.yaml
+++ b/apps/site/src/content/design-system/foundation/pictogram/index.yaml
@@ -26,3 +26,10 @@ accessibility:
   - title:
       name: Accessibility API
       slug: accessibility-api
+relatedComponents:
+  - title: Icons
+    slug: foundation/icon
+  - title: Symbols
+    slug: components/symbol
+  - title: Logos
+    slug: foundation/logo
diff --git a/apps/site/src/content/design-system/foundation/pictogram/relatedArticles.mdoc b/apps/site/src/content/design-system/foundation/pictogram/relatedArticles.mdoc
new file mode 100644
index 000000000..78ed2ce1c
--- /dev/null
+++ b/apps/site/src/content/design-system/foundation/pictogram/relatedArticles.mdoc
@@ -0,0 +1,7 @@
+**Colour system**
+
+Why we've done it, how it works and why you should use it. Read about the&nbsp;[colour](/articles/colour)&nbsp;system.
+
+**Multi-brand**
+
+Strategic approach to digital brand management and delivery. Find out how to&nbsp;[think multi-brand](/articles/multi-brand-made-easy).
diff --git a/apps/site/src/content/design-system/foundation/text-styling/design/visual-design/content.mdoc b/apps/site/src/content/design-system/foundation/text-styling/design/visual-design/content.mdoc
deleted file mode 100644
index ae55514d2..000000000
--- a/apps/site/src/content/design-system/foundation/text-styling/design/visual-design/content.mdoc
+++ /dev/null
@@ -1 +0,0 @@
-See [Fonts](/design-system/foundation/fonts) for further information on the use of typography
diff --git a/apps/site/src/content/design-system/foundation/text-styling/index.yaml b/apps/site/src/content/design-system/foundation/text-styling/index.yaml
index b02a938c0..f3491b972 100644
--- a/apps/site/src/content/design-system/foundation/text-styling/index.yaml
+++ b/apps/site/src/content/design-system/foundation/text-styling/index.yaml
@@ -28,3 +28,6 @@ accessibility:
   - title:
       name: Accessibility API
       slug: accessibility-api
+relatedComponents:
+  - title: Fonts
+    slug: foundation/font
diff --git a/apps/site/src/content/design-system/foundation/text-styling/relatedArticles.mdoc b/apps/site/src/content/design-system/foundation/text-styling/relatedArticles.mdoc
new file mode 100644
index 000000000..f11153f9c
--- /dev/null
+++ b/apps/site/src/content/design-system/foundation/text-styling/relatedArticles.mdoc
@@ -0,0 +1,7 @@
+**Typography**
+
+Why we've done it, how it works and why you should use it. Read about&nbsp;[typography](/articles/typography).
+
+**Multi-brand**
+
+Strategic approach to digital brand management and delivery. Find out how to&nbsp;[think multi-brand](/articles/multi-brand-made-easy).
diff --git a/apps/site/src/content/design-system/patterns/addresses/auto-address/index.yaml b/apps/site/src/content/design-system/patterns/addresses/auto-address/index.yaml
index 65a28c411..af4e6ddbc 100644
--- a/apps/site/src/content/design-system/patterns/addresses/auto-address/index.yaml
+++ b/apps/site/src/content/design-system/patterns/addresses/auto-address/index.yaml
@@ -17,3 +17,8 @@ design:
       name: Pattern examples in code
       slug: pattern-examples-in-code
 accessibility: []
+relatedComponents:
+  - title: Text inputs
+    slug: components/input
+  - title: Alerts
+    slug: components/alert
diff --git a/apps/site/src/content/design-system/patterns/addresses/complex-address/index.yaml b/apps/site/src/content/design-system/patterns/addresses/complex-address/index.yaml
index 32ed076d4..4929a1389 100644
--- a/apps/site/src/content/design-system/patterns/addresses/complex-address/index.yaml
+++ b/apps/site/src/content/design-system/patterns/addresses/complex-address/index.yaml
@@ -10,3 +10,8 @@ design:
       name: Pattern examples in code
       slug: pattern-examples-in-code
 accessibility: []
+relatedComponents:
+  - title: Text inputs
+    slug: components/input
+  - title: Alerts
+    slug: components/alert
diff --git a/apps/site/src/content/design-system/patterns/addresses/manual-address/index.yaml b/apps/site/src/content/design-system/patterns/addresses/manual-address/index.yaml
index a050b427b..d99638d10 100644
--- a/apps/site/src/content/design-system/patterns/addresses/manual-address/index.yaml
+++ b/apps/site/src/content/design-system/patterns/addresses/manual-address/index.yaml
@@ -13,3 +13,8 @@ design:
       name: Pattern examples in code
       slug: pattern-examples-in-code
 accessibility: []
+relatedComponents:
+  - title: Text inputs
+    slug: components/input
+  - title: Alerts
+    slug: components/alert
diff --git a/apps/site/src/content/design-system/patterns/dates/date-of-birth/index.yaml b/apps/site/src/content/design-system/patterns/dates/date-of-birth/index.yaml
index 777e8518a..b44c2d009 100644
--- a/apps/site/src/content/design-system/patterns/dates/date-of-birth/index.yaml
+++ b/apps/site/src/content/design-system/patterns/dates/date-of-birth/index.yaml
@@ -19,3 +19,8 @@ design:
       name: Pattern examples in code
       slug: pattern-examples-in-code
 accessibility: []
+relatedComponents:
+  - title: Text inputs
+    slug: components/input
+  - title: Alerts
+    slug: components/alert
diff --git a/apps/site/src/content/design-system/patterns/dates/expiry-date/index.yaml b/apps/site/src/content/design-system/patterns/dates/expiry-date/index.yaml
index d3339228a..7bfb8b6a4 100644
--- a/apps/site/src/content/design-system/patterns/dates/expiry-date/index.yaml
+++ b/apps/site/src/content/design-system/patterns/dates/expiry-date/index.yaml
@@ -16,3 +16,8 @@ design:
       name: Pattern examples in code
       slug: pattern-examples-in-code
 accessibility: []
+relatedComponents:
+  - title: Text inputs
+    slug: components/input
+  - title: Alerts
+    slug: components/alert
diff --git a/apps/site/src/content/design-system/patterns/personal-details/email/index.yaml b/apps/site/src/content/design-system/patterns/personal-details/email/index.yaml
index 3df2cf167..1db0e2efb 100644
--- a/apps/site/src/content/design-system/patterns/personal-details/email/index.yaml
+++ b/apps/site/src/content/design-system/patterns/personal-details/email/index.yaml
@@ -16,3 +16,8 @@ design:
       name: Pattern examples in code
       slug: pattern-examples-in-code
 accessibility: []
+relatedComponents:
+  - title: Text inputs
+    slug: components/input
+  - title: Alerts
+    slug: components/alert
diff --git a/apps/site/src/content/design-system/patterns/personal-details/employment/index.yaml b/apps/site/src/content/design-system/patterns/personal-details/employment/index.yaml
index d7696fcab..71a9fb5c1 100644
--- a/apps/site/src/content/design-system/patterns/personal-details/employment/index.yaml
+++ b/apps/site/src/content/design-system/patterns/personal-details/employment/index.yaml
@@ -16,3 +16,8 @@ design:
       name: Pattern examples in code
       slug: pattern-examples-in-code
 accessibility: []
+relatedComponents:
+  - title: Text inputs
+    slug: components/input
+  - title: Alerts
+    slug: components/alert
diff --git a/apps/site/src/content/design-system/patterns/personal-details/name/index.yaml b/apps/site/src/content/design-system/patterns/personal-details/name/index.yaml
index e5815b650..53ea02ac2 100644
--- a/apps/site/src/content/design-system/patterns/personal-details/name/index.yaml
+++ b/apps/site/src/content/design-system/patterns/personal-details/name/index.yaml
@@ -17,3 +17,8 @@ design:
       name: Pattern examples in code
       slug: pattern-examples-in-code
 accessibility: []
+relatedComponents:
+  - title: Text inputs
+    slug: components/input
+  - title: Alerts
+    slug: components/alert
diff --git a/apps/site/src/content/design-system/patterns/personal-details/phone/index.yaml b/apps/site/src/content/design-system/patterns/personal-details/phone/index.yaml
index 8f3a68e3c..13b026fd1 100644
--- a/apps/site/src/content/design-system/patterns/personal-details/phone/index.yaml
+++ b/apps/site/src/content/design-system/patterns/personal-details/phone/index.yaml
@@ -1,4 +1,4 @@
-name: Phone
+name: Phone number
 description: >-
   This pattern is used for accurately capturing phone numbers. Only capture what
   you need for your application.
@@ -19,3 +19,10 @@ design:
       name: Pattern examples in code
       slug: pattern-examples-in-code
 accessibility: []
+relatedComponents:
+  - title: Text inputs
+    slug: components/input
+  - title: Input fields
+    slug: components/input-field
+  - title: Alerts
+    slug: components/alert
diff --git a/apps/site/src/content/design-system/patterns/tax-file-number/index.yaml b/apps/site/src/content/design-system/patterns/tax-file-number/index.yaml
index 49a111eea..ed6e57788 100644
--- a/apps/site/src/content/design-system/patterns/tax-file-number/index.yaml
+++ b/apps/site/src/content/design-system/patterns/tax-file-number/index.yaml
@@ -16,3 +16,8 @@ design:
       name: Pattern examples in code
       slug: pattern-examples-in-code
 accessibility: []
+relatedComponents:
+  - title: Text inputs
+    slug: components/input
+  - title: Alerts
+    slug: components/alert
diff --git a/apps/site/tailwind.config.ts b/apps/site/tailwind.config.ts
index 34663735f..7f493f540 100644
--- a/apps/site/tailwind.config.ts
+++ b/apps/site/tailwind.config.ts
@@ -82,6 +82,14 @@ const config: Config = withGEL({
     'sm:typography-body-6',
     'md:typography-body-4',
     'lg:typography-body-2',
+    'w-[15.625rem]',
+    'w-[12rem]',
+    '[&_li]:my-1',
+    '[&_li]:underline',
+    'ml-2',
+    'text-success',
+    'text-danger',
+    'font-bold',
   ],
   plugins: [SitePlugin],
   options: {
diff --git a/helpers/create-package/index.js b/helpers/create-package/index.js
index 5d15cdf51..f6651ddf4 100644
--- a/helpers/create-package/index.js
+++ b/helpers/create-package/index.js
@@ -1,3 +1,4 @@
+/* eslint-disable no-console */
 const shell = require('child_process').execSync;
 const fs = require('fs');
 const readline = require('readline');
diff --git a/packages/eslint-config/index.js b/packages/eslint-config/index.js
index c51270286..844ca4cb5 100644
--- a/packages/eslint-config/index.js
+++ b/packages/eslint-config/index.js
@@ -50,6 +50,7 @@ module.exports = {
         ignoredKeys: ['compoundVariants', 'defaultVariants', 'responsiveVariants', 'compoundSlots'],
       },
     ],
+    'no-console': 'error',
   },
   settings: {
     'import/parsers': {
diff --git a/packages/ui/src/components/alert/alert.stories.tsx b/packages/ui/src/components/alert/alert.stories.tsx
index 3fa388c17..ef8a81f67 100644
--- a/packages/ui/src/components/alert/alert.stories.tsx
+++ b/packages/ui/src/components/alert/alert.stories.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable no-console */
 import { type Meta, StoryFn, type StoryObj } from '@storybook/react';
 
 import { TelephoneIcon } from '../icon/index.js';
diff --git a/packages/ui/src/components/button-dropdown/components/panel/panel.component.tsx b/packages/ui/src/components/button-dropdown/components/panel/panel.component.tsx
index f3f4db18c..f20add3e6 100644
--- a/packages/ui/src/components/button-dropdown/components/panel/panel.component.tsx
+++ b/packages/ui/src/components/button-dropdown/components/panel/panel.component.tsx
@@ -16,7 +16,7 @@ export function Panel({ className, children, state, block, id, ...props }: Panel
 
   // Added this based on accessibility features seen https://gel.westpacgroup.com.au/design-system/components/button-dropdowns?b=WBC&tab=accessibility and React Aria doesn't do this
   const focusHandler = useCallback(
-    (event: globalThis.FocusEvent) => {
+    (event: FocusEvent) => {
       if (
         event.target &&
         popoverRef.current &&
@@ -31,8 +31,15 @@ export function Panel({ className, children, state, block, id, ...props }: Panel
 
   // React Aria does not handle click as we need when isNonModal is true so this is needed
   const clickHandler = useCallback(
-    (event: globalThis.MouseEvent) => {
-      if (event.target && popoverRef.current && !popoverRef.current.contains(event.target as Node) && state.isOpen)
+    (event: MouseEvent) => {
+      if (
+        event.target &&
+        props.triggerRef.current &&
+        !props.triggerRef.current.contains(event.target as Node) &&
+        popoverRef.current &&
+        !popoverRef.current.contains(event.target as Node) &&
+        state.isOpen
+      )
         state.close();
     },
     [state.isOpen],
diff --git a/packages/ui/src/components/button/button.component.tsx b/packages/ui/src/components/button/button.component.tsx
index b20b23079..b2e510f1e 100644
--- a/packages/ui/src/components/button/button.component.tsx
+++ b/packages/ui/src/components/button/button.component.tsx
@@ -13,7 +13,7 @@ function BaseButton(
     size = 'medium',
     look = 'hero',
     soft,
-    block,
+    block = false,
     justify,
     tag: Tag = 'button',
     iconBefore: IconBefore,
diff --git a/packages/ui/src/components/button/button.spec.tsx b/packages/ui/src/components/button/button.spec.tsx
index b45bd4cff..74bd84595 100644
--- a/packages/ui/src/components/button/button.spec.tsx
+++ b/packages/ui/src/components/button/button.spec.tsx
@@ -17,7 +17,7 @@ describe('Button', () => {
   it('renders the style correctly', () => {
     const style = styles({ look: 'primary', size: 'medium' });
     expect(style.base()).toBe(
-      'inline-flex items-center justify-center rounded leading-[1.5] transition-[background] disabled:pointer-events-none disabled:opacity-50 group-[.add-on-after]:rounded-l-none group-[.add-on-before]:rounded-r-none typography-body-9 px-2 py-[0.3125rem] active-theme-rams:before:h-[0.125rem] relative border border-primary bg-primary text-white hover:bg-primary-70 active:bg-primary-50 active-theme-rams:border-b-pop active-theme-rams:before:absolute active-theme-rams:before:bottom-0 active-theme-rams:before:block active-theme-rams:before:w-full active-theme-rams:before:bg-pop',
+      'items-center justify-center rounded leading-[1.5] transition-[background] disabled:pointer-events-none disabled:opacity-50 group-[.add-on-after]:rounded-l-none group-[.add-on-before]:rounded-r-none typography-body-9 active-theme-rams:before:h-[0.125rem] px-2 py-[0.3125rem] border-primary bg-primary hover:bg-primary-70 active:bg-primary-50 active-theme-rams:border-b-pop active-theme-rams:before:absolute active-theme-rams:before:bottom-0 active-theme-rams:before:block active-theme-rams:before:w-full active-theme-rams:before:bg-pop relative border text-white',
     );
   });
 
diff --git a/packages/ui/src/components/button/button.styles.ts b/packages/ui/src/components/button/button.styles.ts
index 8968dc962..d6deebf35 100644
--- a/packages/ui/src/components/button/button.styles.ts
+++ b/packages/ui/src/components/button/button.styles.ts
@@ -6,7 +6,7 @@ import { tv } from 'tailwind-variants';
 export const styles = tv(
   {
     slots: {
-      base: 'inline-flex items-center justify-center rounded leading-[1.5] transition-[background] disabled:pointer-events-none disabled:opacity-50 group-[.add-on-after]:rounded-l-none group-[.add-on-before]:rounded-r-none',
+      base: 'items-center justify-center rounded leading-[1.5] transition-[background] disabled:pointer-events-none disabled:opacity-50 group-[.add-on-after]:rounded-l-none group-[.add-on-before]:rounded-r-none',
       iconBefore: '',
       iconAfter: '',
       dropdown: 'ml-[0.4em]',
@@ -14,17 +14,17 @@ export const styles = tv(
     },
     variants: {
       size: {
-        small: { base: 'typography-body-10 px-2 pb-[0.25rem] pt-0.5 active-theme-rams:before:h-[0.0625rem]' },
-        medium: { base: 'typography-body-9 px-2 py-[0.3125rem] active-theme-rams:before:h-[0.125rem]' },
-        large: { base: 'typography-body-9 px-2.5 py-[0.5rem] active-theme-rams:before:h-0.5' },
-        xlarge: { base: 'typography-body-8 px-3 pb-[0.625rem] pt-1.5 active-theme-rams:before:h-[0.25rem]' },
+        small: { base: 'typography-body-10 active-theme-rams:before:h-[0.0625rem] px-2 pb-[0.25rem] pt-0.5' },
+        medium: { base: 'typography-body-9 active-theme-rams:before:h-[0.125rem] px-2 py-[0.3125rem]' },
+        large: { base: 'typography-body-9 active-theme-rams:before:h-0.5 px-2.5 py-[0.5rem]' },
+        xlarge: { base: 'typography-body-8 active-theme-rams:before:h-[0.25rem] px-3 pb-[0.625rem] pt-1.5' },
       },
       look: {
         primary: {
-          base: 'relative border border-primary bg-primary text-white hover:bg-primary-70 active:bg-primary-50 active-theme-rams:border-b-pop active-theme-rams:before:absolute active-theme-rams:before:bottom-0 active-theme-rams:before:block active-theme-rams:before:w-full active-theme-rams:before:bg-pop',
+          base: 'border-primary bg-primary hover:bg-primary-70 active:bg-primary-50 active-theme-rams:border-b-pop active-theme-rams:before:absolute active-theme-rams:before:bottom-0 active-theme-rams:before:block active-theme-rams:before:w-full active-theme-rams:before:bg-pop relative border text-white',
         },
-        hero: { base: 'border border-hero bg-hero text-white hover:bg-hero-70 active:bg-hero-50' },
-        faint: { base: 'border border-border bg-light text-muted hover:bg-white active:bg-white' },
+        hero: { base: 'border-hero bg-hero hover:bg-hero-70 active:bg-hero-50 border text-white' },
+        faint: { base: 'border-border bg-light text-muted border hover:bg-white active:bg-white' },
         link: { base: 'text-link underline' },
       },
       soft: {
@@ -32,6 +32,7 @@ export const styles = tv(
       },
       block: {
         true: { base: 'flex w-full' },
+        false: { base: 'inline-flex w-auto' },
       },
       justify: {
         true: { base: 'justify-between' },
@@ -49,7 +50,7 @@ export const styles = tv(
         slots: ['base'],
         look: 'primary',
         soft: true,
-        className: 'text-text hover:text-white active-theme-rams:text-primary active-theme-rams:hover:text-white',
+        className: 'text-text active-theme-rams:text-primary active-theme-rams:hover:text-white hover:text-white',
       },
       {
         slots: ['base'],
diff --git a/packages/ui/src/components/checkbox-group/checkbox-group.stories.tsx b/packages/ui/src/components/checkbox-group/checkbox-group.stories.tsx
index 4ebc5ec6d..54ee61faa 100644
--- a/packages/ui/src/components/checkbox-group/checkbox-group.stories.tsx
+++ b/packages/ui/src/components/checkbox-group/checkbox-group.stories.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable no-console */
 import { type Meta, StoryFn, type StoryObj } from '@storybook/react';
 
 import { CheckboxGroup } from './checkbox-group.component.js';
diff --git a/packages/ui/src/components/date-picker/date-picker.component.tsx b/packages/ui/src/components/date-picker/date-picker.component.tsx
index b50445a08..07cdad5cf 100644
--- a/packages/ui/src/components/date-picker/date-picker.component.tsx
+++ b/packages/ui/src/components/date-picker/date-picker.component.tsx
@@ -20,8 +20,9 @@ export function DatePicker({
   max,
   value,
   id,
-  size = 'xl',
+  size = 'md',
   name,
+  block = false,
   ...props
 }: DatePickerProps) {
   const [initialized, setInitialized] = useState(false);
@@ -121,5 +122,5 @@ export function DatePicker({
 
   // eslint-disable-next-line @typescript-eslint/ban-ts-comment
   // @ts-ignore
-  return <duet-date-picker class={styles({ size })} ref={ref} {...props} />;
+  return <duet-date-picker class={styles({ size, block })} ref={ref} {...props} />;
 }
diff --git a/packages/ui/src/components/date-picker/date-picker.stories.tsx b/packages/ui/src/components/date-picker/date-picker.stories.tsx
index 6b22d72d0..e766ab805 100644
--- a/packages/ui/src/components/date-picker/date-picker.stories.tsx
+++ b/packages/ui/src/components/date-picker/date-picker.stories.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable no-console */
 import { type Meta, StoryFn, type StoryObj } from '@storybook/react';
 import { useState } from 'react';
 
diff --git a/packages/ui/src/components/date-picker/date-picker.styles.ts b/packages/ui/src/components/date-picker/date-picker.styles.ts
index 0a72d7526..cc8fa21bb 100644
--- a/packages/ui/src/components/date-picker/date-picker.styles.ts
+++ b/packages/ui/src/components/date-picker/date-picker.styles.ts
@@ -10,6 +10,10 @@ export const styles = tv(
         lg: 'date-picker-lg',
         xl: 'date-picker-xl',
       },
+      block: {
+        true: 'date-picker-block',
+        false: '',
+      },
     },
   },
   { responsiveVariants: ['xsl', 'sm', 'md', 'lg', 'xl'] },
diff --git a/packages/ui/src/components/date-picker/date-picker.types.ts b/packages/ui/src/components/date-picker/date-picker.types.ts
index 1f2af8f52..30f497706 100644
--- a/packages/ui/src/components/date-picker/date-picker.types.ts
+++ b/packages/ui/src/components/date-picker/date-picker.types.ts
@@ -17,6 +17,10 @@ export type DuetDatePickerElement = Element & {
 type Variants = VariantProps<typeof styles>;
 
 export type DatePickerProps = {
+  /**
+   * Make Datepicker block
+   */
+  block?: Variants['block'];
   /*
    * Disable specific dates. Must be in IS0-8601 format: YYYY-MM-DD
    */
diff --git a/packages/ui/src/components/icon/icon.stories.tsx b/packages/ui/src/components/icon/icon.stories.tsx
index cd8311adc..7d642cf26 100644
--- a/packages/ui/src/components/icon/icon.stories.tsx
+++ b/packages/ui/src/components/icon/icon.stories.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable no-console */
 import { type Meta, StoryFn, type StoryObj } from '@storybook/react';
 import { ChangeEvent, useCallback, useMemo, useState } from 'react';
 
@@ -35,7 +36,7 @@ const AllIconsExample = (props: AllIcons.IconProps) => {
   return (
     <div className="flex flex-col gap-2">
       <input
-        className="rounded-sm border border-border px-3 py-2"
+        className="border-border rounded-sm border px-3 py-2"
         onChange={handleOnChange}
         placeholder="e.g: Accessibiliy"
       />
@@ -43,7 +44,7 @@ const AllIconsExample = (props: AllIcons.IconProps) => {
         {filteredIcons.map(({ key, Icon }) => (
           <button
             onClick={() => handleOnClick(key)}
-            className="flex h-15 w-23 flex-col items-center justify-center gap-2 border border-border"
+            className="h-15 w-23 border-border flex flex-col items-center justify-center gap-2 border"
             key={key}
           >
             <Icon {...props} />
diff --git a/packages/ui/src/components/list/components/item/item.styles.ts b/packages/ui/src/components/list/components/item/item.styles.ts
index 5bc57f62b..ea3b37454 100644
--- a/packages/ui/src/components/list/components/item/item.styles.ts
+++ b/packages/ui/src/components/list/components/item/item.styles.ts
@@ -61,11 +61,12 @@ export const styles = tv(
           bullet: 'pl-[1.1875rem] ',
         },
         icon: {
-          base: '',
+          base: 'pl-[1.4375rem]',
           bullet: 'border-none bg-[transparent]',
         },
         ordered: {
-          base: 'pl-0',
+          // value gotten from taking rem of list number from original GEL value as tailwind seems to handled ordered list styling differently
+          base: 'pl-[0.35rem]',
         },
       },
       nested: {
@@ -82,6 +83,12 @@ export const styles = tv(
         icon: true,
         className: 'left-0 top-0 h-3 w-3 rotate-0 border-none bg-[transparent]',
       },
+      {
+        slots: ['base'],
+        type: 'link',
+        icon: true,
+        className: 'pl-[1.4375rem]',
+      },
     ],
   },
   { responsiveVariants: ['xsl', 'sm', 'md', 'lg', 'xl'] },
diff --git a/packages/ui/src/components/list/list.spec.tsx b/packages/ui/src/components/list/list.spec.tsx
index fdc9175a6..4f7350945 100644
--- a/packages/ui/src/components/list/list.spec.tsx
+++ b/packages/ui/src/components/list/list.spec.tsx
@@ -85,7 +85,7 @@ describe('List', () => {
         <List.Item>ordered list</List.Item>
       </List>,
     );
-    expect(getByText('ordered list')).toHaveClass('pl-0');
+    expect(getByText('ordered list')).toHaveClass('pl-[0.35rem]');
   });
 
   it('should render with correct spacing when large spacing prop passed', () => {
diff --git a/packages/ui/src/components/popover/popover.component.tsx b/packages/ui/src/components/popover/popover.component.tsx
index 38c9924ee..dd7c2dceb 100644
--- a/packages/ui/src/components/popover/popover.component.tsx
+++ b/packages/ui/src/components/popover/popover.component.tsx
@@ -23,6 +23,7 @@ export function Popover({
   onClick = () => undefined,
   placement,
   look,
+  soft = false,
   open = false,
   icon,
 }: PopoverProps) {
@@ -58,6 +59,7 @@ export function Popover({
       <Button
         look={icon && !children ? 'link' : look}
         iconAfter={icon}
+        soft={soft}
         aria-expanded={state.isOpen}
         aria-controls={panelId}
         onClick={handleClick}
diff --git a/packages/ui/src/components/popover/popover.types.ts b/packages/ui/src/components/popover/popover.types.ts
index 3050e7c44..b5f1f2872 100644
--- a/packages/ui/src/components/popover/popover.types.ts
+++ b/packages/ui/src/components/popover/popover.types.ts
@@ -37,4 +37,4 @@ export type PopoverProps = {
    */
   placement?: 'top' | 'bottom';
 } & HTMLAttributes<Element> &
-  Pick<ButtonProps, 'look'>;
+  Pick<ButtonProps, 'look' | 'soft'>;
diff --git a/packages/ui/src/components/radio-group/radio-group.stories.tsx b/packages/ui/src/components/radio-group/radio-group.stories.tsx
index ebb716d4f..9f010d9b2 100644
--- a/packages/ui/src/components/radio-group/radio-group.stories.tsx
+++ b/packages/ui/src/components/radio-group/radio-group.stories.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable no-console */
 import { type Meta, StoryFn, type StoryObj } from '@storybook/react';
 
 import { RadioGroup } from './radio-group.component.js';
diff --git a/packages/ui/src/components/repeater/repeater.stories.tsx b/packages/ui/src/components/repeater/repeater.stories.tsx
index ad9cc5d4f..6fa4193de 100644
--- a/packages/ui/src/components/repeater/repeater.stories.tsx
+++ b/packages/ui/src/components/repeater/repeater.stories.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable no-console */
 import { type Meta, StoryFn, type StoryObj } from '@storybook/react';
 
 import { Form, Input } from '../index.js';
diff --git a/packages/ui/src/tailwind/utils/generate-date-picker-component.ts b/packages/ui/src/tailwind/utils/generate-date-picker-component.ts
index d7660359f..8e0ef8e83 100644
--- a/packages/ui/src/tailwind/utils/generate-date-picker-component.ts
+++ b/packages/ui/src/tailwind/utils/generate-date-picker-component.ts
@@ -23,6 +23,9 @@ export const generateDatePicker = () => {
 
       /* SIZE VARIANTS */
       '&.date-picker-sm': {
+        '.duet-date': {
+          '@apply max-w-[8.75rem]': {},
+        },
         '.duet-date__input': {
           '@apply py-[0.25rem] pl-[0.5625rem] text-sm': {},
         },
@@ -31,6 +34,9 @@ export const generateDatePicker = () => {
         },
       },
       '&.date-picker-md': {
+        '.duet-date': {
+          '@apply max-w-[10.9375rem]': {},
+        },
         '.duet-date__input': {
           '@apply py-1 pl-2 text-base': {},
         },
@@ -39,6 +45,9 @@ export const generateDatePicker = () => {
         },
       },
       '&.date-picker-lg': {
+        '.duet-date': {
+          '@apply max-w-[12.0625rem]': {},
+        },
         '.duet-date__input': {
           '@apply py-[0.5rem] pl-[0.9375.rem] text-base': {},
         },
@@ -50,6 +59,9 @@ export const generateDatePicker = () => {
         },
       },
       '&.date-picker-xl': {
+        '.duet-date': {
+          '@apply max-w-[13.6875rem]': {},
+        },
         '.duet-date__input': {
           '@apply py-[0.5625rem] pl-[1.125rem]': {},
         },
@@ -60,6 +72,11 @@ export const generateDatePicker = () => {
           '@apply w-[24px] h-[24px]': {},
         },
       },
+      '&.date-picker-block': {
+        '.duet-date': {
+          '@apply max-w-none': {},
+        },
+      },
 
       /* Calendar selects */
       '.duet-date__dialog-content': {
diff --git a/packages/ui/utils/build-icons/index.ts b/packages/ui/utils/build-icons/index.ts
index def88c580..9fd3047dc 100644
--- a/packages/ui/utils/build-icons/index.ts
+++ b/packages/ui/utils/build-icons/index.ts
@@ -1,3 +1,4 @@
+/* eslint-disable no-console */
 import fs from 'fs';
 import path from 'path';