diff --git a/.changeset/beige-peaches-explain.md b/.changeset/beige-peaches-explain.md
deleted file mode 100644
index 81af374af..000000000
--- a/.changeset/beige-peaches-explain.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-'@westpac/ui': minor
----
-
-fixed button groups hover glitch; updated footer story shield margin; updated space below alert title; updated search icon size in automcomplete
diff --git a/apps/protoform/CHANGELOG.md b/apps/protoform/CHANGELOG.md
index 883baa8a2..716520193 100644
--- a/apps/protoform/CHANGELOG.md
+++ b/apps/protoform/CHANGELOG.md
@@ -1,5 +1,14 @@
 # protoform
 
+## 0.2.4
+
+### Patch Changes
+
+- Updated dependencies [6f96072]
+- Updated dependencies [23dad1b]
+- Updated dependencies [94d6345]
+  - @westpac/ui@0.28.0
+
 ## 0.2.3
 
 ### Patch Changes
diff --git a/apps/protoform/package.json b/apps/protoform/package.json
index 0ab9a73f1..34ef4499c 100644
--- a/apps/protoform/package.json
+++ b/apps/protoform/package.json
@@ -1,6 +1,6 @@
 {
   "name": "protoform",
-  "version": "0.2.3",
+  "version": "0.2.4",
   "private": true,
   "scripts": {
     "dev": "next dev",
diff --git a/apps/protoform/src/components/cta/cta.tsx b/apps/protoform/src/components/cta/cta.tsx
index 6f9b7b8c2..3dbb813fb 100644
--- a/apps/protoform/src/components/cta/cta.tsx
+++ b/apps/protoform/src/components/cta/cta.tsx
@@ -19,7 +19,7 @@ export function Cta({
   tertiaryOnClick?: () => void;
 }) {
   return (
-    <div className="flex gap-2 py-5 max-md:flex-col">
+    <div className="flex gap-2 pt-5 pb-9 max-md:flex-col">
       <Button size="large" look="primary" className="md:px-2.5" onClick={primaryOnClick} type={primaryType}>
         {children}
       </Button>
diff --git a/apps/protoform/src/components/sidebar/sidebar.tsx b/apps/protoform/src/components/sidebar/sidebar.tsx
index c374edbc1..17b35b387 100644
--- a/apps/protoform/src/components/sidebar/sidebar.tsx
+++ b/apps/protoform/src/components/sidebar/sidebar.tsx
@@ -84,7 +84,7 @@ export function Sidebar({ children }: { children?: ReactNode }) {
       <>
         <div
           className={clsx(
-            'sticky top-0 flex h-9 justify-between bg-white px-2 py-3 after:pointer-events-none after:absolute after:inset-x-0 after:top-full after:z-10 after:block after:h-1 after:bg-gradient-to-b after:from-black/[.2] after:from-0% after:opacity-0 after:transition-all after:duration-200 after:will-change-[opacity] xsl:px-4 sm:px-5 md:hidden',
+            'sticky items-center top-0 flex h-9 justify-between bg-white px-2 py-3 after:pointer-events-none after:absolute after:inset-x-0 after:top-full after:z-10 after:block after:h-1 after:bg-gradient-to-b after:from-black/[.2] after:from-0% after:opacity-0 after:transition-all after:duration-200 after:will-change-[opacity] xsl:px-4 sm:px-5 md:hidden',
             { 'after:opacity-100': scrolled },
           )}
         >
diff --git a/apps/site/CHANGELOG.md b/apps/site/CHANGELOG.md
index 6ef4d29f3..80067b7cf 100644
--- a/apps/site/CHANGELOG.md
+++ b/apps/site/CHANGELOG.md
@@ -1,5 +1,14 @@
 # site
 
+## 0.3.4
+
+### Patch Changes
+
+- Updated dependencies [6f96072]
+- Updated dependencies [23dad1b]
+- Updated dependencies [94d6345]
+  - @westpac/ui@0.28.0
+
 ## 0.3.3
 
 ### Patch Changes
diff --git a/apps/site/package.json b/apps/site/package.json
index d9eeb6af4..5267f7c51 100644
--- a/apps/site/package.json
+++ b/apps/site/package.json
@@ -1,6 +1,6 @@
 {
   "name": "site",
-  "version": "0.3.3",
+  "version": "0.3.4",
   "private": true,
   "scripts": {
     "build": "next build",
diff --git a/apps/site/src/app/design-system/[brand]/[...component]/components/content-tabs/components/intro/components/table-of-contents/table-of-contents.component.tsx b/apps/site/src/app/design-system/[brand]/[...component]/components/content-tabs/components/intro/components/table-of-contents/table-of-contents.component.tsx
index 2fa6df8ff..9517cde09 100644
--- a/apps/site/src/app/design-system/[brand]/[...component]/components/content-tabs/components/intro/components/table-of-contents/table-of-contents.component.tsx
+++ b/apps/site/src/app/design-system/[brand]/[...component]/components/content-tabs/components/intro/components/table-of-contents/table-of-contents.component.tsx
@@ -1,7 +1,7 @@
 'use client';
-
 import { List, ListItem } from '@westpac/ui';
-import { MouseEventHandler, useCallback } from 'react';
+import Link from 'next/link';
+import { usePathname } from 'next/navigation';
 
 import { ArrowDownRightIcon } from '@/components/icons';
 
@@ -10,7 +10,7 @@ import { type TableOfContentsProps } from './table-of-contents.types';
 export function TableOfContents({ contents = [] }: TableOfContentsProps) {
   return (
     <nav>
-      <h2 className="typography-body-9 border-b border-border pb-2 font-medium">Page content</h2>
+      <h2 className="typography-body-9 border-border border-b pb-2 font-medium">Page content</h2>
       <List icon={ArrowDownRightIcon} type="icon" look="primary" className="mt-3 [&_li]:my-1.5">
         {contents.map(({ title }) => {
           const id = title
@@ -20,7 +20,7 @@ export function TableOfContents({ contents = [] }: TableOfContentsProps) {
             .join('-');
           return (
             <ListItem key={id} className="pl-[1.075rem]">
-              <Link href={`#${id}`}>{title}</Link>
+              <NavLink href={`#${id}`}>{title}</NavLink>
             </ListItem>
           );
         })}
@@ -29,30 +29,12 @@ export function TableOfContents({ contents = [] }: TableOfContentsProps) {
   );
 }
 
-const HEADER_HEIGHT = {
-  sm: 150,
-  lg: 200,
-};
-
-const BREAKPOINT_MD = 768;
-
-function Link({ href, children }: { children?: React.ReactNode; href?: string }) {
-  const handleClick: MouseEventHandler<HTMLAnchorElement> = useCallback(
-    ev => {
-      ev.preventDefault();
-      const viewport = window.innerWidth < BREAKPOINT_MD ? 'sm' : 'lg';
-      const bodyRect = document.body.getBoundingClientRect(),
-        elemRect = document?.querySelector(href || '')?.getBoundingClientRect(),
-        offset = (elemRect?.top || 0) - bodyRect.top - HEADER_HEIGHT[viewport];
-
-      window?.scrollTo({ top: offset, behavior: 'smooth' });
-    },
-    [href],
-  );
+function NavLink({ href, children }: { children?: React.ReactNode; href: string }) {
+  const pathname = usePathname();
 
   return (
-    <a href={href} className="ml-1 block hover:underline focus-visible:focus-outline" onClick={handleClick}>
+    <Link className="focus-visible:focus-outline ml-1 block hover:underline" href={`${pathname}${href}`} replace scroll>
       {children}
-    </a>
+    </Link>
   );
 }
diff --git a/apps/site/src/app/design-system/[brand]/[...component]/components/header/header.component.tsx b/apps/site/src/app/design-system/[brand]/[...component]/components/header/header.component.tsx
index eb0636bc3..1b22458f9 100644
--- a/apps/site/src/app/design-system/[brand]/[...component]/components/header/header.component.tsx
+++ b/apps/site/src/app/design-system/[brand]/[...component]/components/header/header.component.tsx
@@ -1,7 +1,7 @@
 'use client';
 
 import { HamburgerMenuIcon } from '@westpac/ui/icon';
-import React, { useEffect, useRef, useState } from 'react';
+import React, { useLayoutEffect, useRef, useState } from 'react';
 
 import { useSidebar } from '@/app/design-system/components/sidebar/sidebar.context';
 import { BrandKey } from '@/app/types/brand.types';
@@ -11,41 +11,26 @@ import { styles as headerStyles } from './header.styles';
 const FIXED_HEADER = 162; // 228 - 66 = height to stick
 
 export function Header({ className, title, brand }: { brand: string; className?: string; title?: string }) {
-  const [fixed, setFixed] = useState(typeof window !== 'undefined' ? window.scrollY >= FIXED_HEADER : false);
+  const [fixed, setFixed] = useState(false);
   const styles = headerStyles({ brand: brand.toLowerCase() as BrandKey, fixed, className });
   const headerRef = useRef<HTMLHeadingElement>(null);
   const { setOpen } = useSidebar();
 
-  useEffect(() => {
-    if (typeof window !== 'undefined') {
-      const handleScroll = () => {
-        const isFixed = window.scrollY >= FIXED_HEADER;
-        setFixed(isFixed);
-      };
-      window.addEventListener('scroll', handleScroll);
-      return () => window.removeEventListener('scroll', handleScroll);
-    }
+  useLayoutEffect(() => {
+    const handleScroll = () => {
+      const isFixed = window.scrollY >= FIXED_HEADER;
+      setFixed(isFixed);
+    };
+
+    handleScroll();
+
+    window.addEventListener('scroll', handleScroll);
+
+    return () => window.addEventListener('scroll', handleScroll);
   }, []);
 
   return (
     <header className={styles.base()}>
-      <div className={styles.gridButtonWrapper()}>
-        <span className="sr-only">Active breakpoint:</span>
-        <span className="hidden font-bold sm:block md:hidden">SM</span>
-        <span className="hidden font-bold md:block lg:hidden">MD</span>
-        <span className="hidden font-bold lg:block">LG</span>
-        <button
-          aria-hidden="true"
-          className={styles.gridButton()}
-          onClick={() => {
-            return;
-          }}
-        >
-          {new Array(4).fill(null).map((_, index) => {
-            return <span className="w-[0.25rem] items-stretch bg-white/30" key={index} />;
-          })}
-        </button>
-      </div>
       {/* The tab order on the original site was the grid button before wrapper when coming from the browser bar */}
       <button className={styles.hamburgerButton()} onClick={() => setOpen(open => !open)}>
         <HamburgerMenuIcon color="white" className="mx-auto" />
diff --git a/apps/site/src/app/design-system/components/sidebar/sidebar.component.tsx b/apps/site/src/app/design-system/components/sidebar/sidebar.component.tsx
index 3f90020f6..d97cd269b 100644
--- a/apps/site/src/app/design-system/components/sidebar/sidebar.component.tsx
+++ b/apps/site/src/app/design-system/components/sidebar/sidebar.component.tsx
@@ -28,18 +28,18 @@ export function Sidebar({ items, brand }: SidebarProps) {
   });
 
   useEffect(() => {
-    if (!listRef.current) {
+    if (!outsideRef.current) {
       return;
     }
     const listener = () => {
-      const y = listRef.current?.scrollTop || 0;
+      const y = outsideRef.current?.scrollTop || 0;
       setScrolled(y > 0);
     };
-    listRef.current.addEventListener('scroll', listener);
+    outsideRef.current.addEventListener('scroll', listener);
     return () => {
-      listRef.current?.removeEventListener('scroll', listener);
+      outsideRef.current?.removeEventListener('scroll', listener);
     };
-  }, [listRef]);
+  }, []);
 
   useEffect(() => {
     if (open) {
@@ -81,8 +81,8 @@ export function Sidebar({ items, brand }: SidebarProps) {
           })}
         >
           <div
-            className={clsx({
-              'shadow-[rgba(0,0,0,0.26)_0_2px_5px]': scrolled,
+            className={clsx('sticky top-0 bg-white transition-shadow delay-0 duration-200 ease-[ease]', {
+              'shadow-[0_2px_5px_rgba(0,0,0,0.3)]': scrolled,
             })}
           >
             <button
diff --git a/apps/site/src/app/layout.tsx b/apps/site/src/app/layout.tsx
index ce8c5ed43..a67fada86 100644
--- a/apps/site/src/app/layout.tsx
+++ b/apps/site/src/app/layout.tsx
@@ -16,13 +16,13 @@ export const metadata: Metadata = {
 export default function RootLayout({ children }: { children: React.ReactNode }) {
   const { isEnabled } = draftMode();
   return (
-    <html lang="en">
+    <html lang="en" className="scroll-smooth">
       <FontPreloader />
       <meta name="google-site-verification" content="OqpMflvRwQAgK3Lbvov6fs-G37wjQy1hqAH7ECgCW7M" />
       <body>
         {children}
         {isEnabled && (
-          <div className="absolute right-15 top-3 z-[999]">
+          <div className="right-15 absolute top-3 z-[999]">
             <form method="post" action="/preview/end">
               <button className="text-white">End preview</button>
             </form>
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 f47f4e68b..87e099ce4 100644
--- a/apps/site/src/components/document-renderer/heading/heading.style.ts
+++ b/apps/site/src/components/document-renderer/heading/heading.style.ts
@@ -1,7 +1,8 @@
 import { tv } from 'tailwind-variants';
 
+// scroll margin top = header height + 24px
 export const styles = tv({
-  base: 'mt-5 font-bold first:mt-0',
+  base: 'mt-5 scroll-mt-[9.125rem] font-bold first:mt-0 md:scroll-mt-[11.25rem]',
   variants: {
     textAlign: {
       left: 'text-left',
@@ -10,7 +11,7 @@ export const styles = tv({
     },
     level: {
       1: 'typography-body-5 mb-3',
-      2: 'typography-body-7 mb-4 sm:typography-body-6 sm:mb-7',
+      2: 'typography-body-7 sm:typography-body-6 mb-4 sm:mb-7',
       3: 'typography-body-8 mb-2',
       4: 'typography-body-10 mb-2 uppercase',
       5: 'typography-body-9 mb-2',
diff --git a/apps/site/src/content/design-system/components/badge/accessibilityDemo.mdoc b/apps/site/src/content/design-system/components/badge/accessibilityDemo.mdoc
index 49ad4a079..f9e6faac6 100644
--- a/apps/site/src/content/design-system/components/badge/accessibilityDemo.mdoc
+++ b/apps/site/src/content/design-system/components/badge/accessibilityDemo.mdoc
@@ -35,9 +35,11 @@
                 <span>Label</span>
               </div>
             </Button>
-            <a className="text-link underline" href="#">
-                Messages 
-                <Badge color="muted" type="pill" className="ml-1">
+            <a className="text-link flex items-center" href="#">
+                <div className="underline">
+                  Product feature
+                </div>
+                <Badge color="muted" type="pill" className="ml-1 no-underline">
                   12
                 </Badge>
               </a>
@@ -65,12 +67,11 @@
   
             <a className="text-link underline" href="#">
                 Product feature
-                <Badge color="muted"  className="ml-1">
+                <Badge color="muted" className="ml-1">
                   NEW
                 </Badge>
               </a>
 
-
           </div>
         </div>
       </div>
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 21b2f3326..4e9e202df 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
@@ -1,38 +1,48 @@
 Badges come in 2 different types:
 
-- Default -  used to highlight words
+- Default - used to highlight words
 - Pill - used to highlight numbers
 
 ### Badges - Default
 
 ```tsx
 <Fragment>
-<p className="typography-body-10 text-muted">
-<em>Default</em>
-</p>
+  <p className="typography-body-10 text-muted">
+    <em>Default</em>
+  </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>{" "}
-
-    <Badge color="success" >Success</Badge>{" "}
-    <Badge color="info" >Info</Badge>{" "}
-    <Badge color="warning" >Warning</Badge>{" "}
-    <Badge color="danger" >Danger</Badge>
+    <Badge color="primary">Primary</Badge> <Badge color="hero">Hero</Badge> <Badge color="neutral">Neutral</Badge>{' '}
+    <Badge color="faint">Faint</Badge> <Badge color="success">Success</Badge> <Badge color="info">Info</Badge>{' '}
+    <Badge color="warning">Warning</Badge> <Badge color="danger">Danger</Badge>
   </p>
   <p className="typography-body-10 text-muted">
-<em>Soft</em>
-</p>
-    <p className="my-2">
-    <Badge color="primary" soft>Primary</Badge>{" "}
-    <Badge color="hero" soft>Hero</Badge>{" "}
-    <Badge color="neutral" soft>Neutral</Badge>{" "}
-    <Badge color="faint" soft>Faint</Badge>{" "}
-    <Badge color="success" soft>Success</Badge>{" "}
-    <Badge color="info" soft>Info</Badge>{" "}
-    <Badge color="warning" soft>Warning</Badge>{" "}
-    <Badge color="danger" soft>Danger</Badge>
+    <em>Soft</em>
+  </p>
+  <p className="my-2">
+    <Badge color="primary" soft>
+      Primary
+    </Badge>{' '}
+    <Badge color="hero" soft>
+      Hero
+    </Badge>{' '}
+    <Badge color="neutral" soft>
+      Neutral
+    </Badge>{' '}
+    <Badge color="faint" soft>
+      Faint
+    </Badge>{' '}
+    <Badge color="success" soft>
+      Success
+    </Badge>{' '}
+    <Badge color="info" soft>
+      Info
+    </Badge>{' '}
+    <Badge color="warning" soft>
+      Warning
+    </Badge>{' '}
+    <Badge color="danger" soft>
+      Danger
+    </Badge>
   </p>
 </Fragment>
 ```
@@ -75,80 +85,80 @@ Badges come in 2 different types:
 
 ```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-col gap-6">
-        <div>
-          <p className="mb-2 typography-body-10 text-muted">
-            <em>Examples showing pill style badge</em>
-          </p>
-          <div className="flex gap-2">
-            <Button look="primary" soft>
-              <div className="flex gap-1">
-                <Badge color="hero" type="pill">
-                  6
-                </Badge>
-                <span>Label</span>
-              </div>
-            </Button>
-            <Button look="primary">
-              <div className="flex gap-1">
-                <Badge color="faint" type="pill" soft>
-                  88
-                </Badge>
-                <span>Label</span>
-              </div>
-            </Button>
-            <a className="text-link underline" href="#">
-                Messages </a>
-                <Badge color="muted" type="pill" className="ml-.5">
-                  12
-                </Badge>
-              
-          </div>
+  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-col gap-6">
+      <div>
+        <p className="mb-2 typography-body-10 text-muted">
+          <em>Examples showing pill style badge</em>
+        </p>
+        <div className="flex gap-2">
+          <Button look="primary" soft>
+            <div className="flex gap-1">
+              <Badge color="hero" type="pill">
+                6
+              </Badge>
+              <span>Label</span>
+            </div>
+          </Button>
+          <Button look="primary">
+            <div className="flex gap-1">
+              <Badge color="faint" type="pill" soft>
+                88
+              </Badge>
+              <span>Label</span>
+            </div>
+          </Button>
+          <a className="text-link underline" href="#">
+            Messages{' '}
+          </a>
+          <Badge color="muted" type="pill" className="ml-.5">
+            12
+          </Badge>
         </div>
-        <div>
-          <p className="mb-2 typography-body-10 text-muted">
-            <em>Examples showing basic style badge</em>
-          </p>
-  
-          <div className="flex gap-2">
-            <Button look="primary" soft>
-              <div className="flex gap-1 items-center">
-                <span>Label</span>
-                <Badge color="hero">New</Badge>
-              </div>
-            </Button>
-  
-            <Button look="primary">
-              <div className="flex gap-1 items-center">
-                <span>Label</span>
-                <Badge color="faint" soft>New</Badge>
-              </div>
-            </Button>
-  
-            <a className="text-link underline" href="#">
-                Product feature</a>
-                <Badge color="muted" className="ml-.5">
-                  New
-                </Badge>
-              
+      </div>
+      <div>
+        <p className="mb-2 typography-body-10 text-muted">
+          <em>Examples showing basic style badge</em>
+        </p>
+
+        <div className="flex gap-2">
+          <Button look="primary" soft>
+            <div className="flex gap-1 items-center">
+              <span>Label</span>
+              <Badge color="hero">New</Badge>
+            </div>
+          </Button>
 
+          <Button look="primary">
+            <div className="flex gap-1 items-center">
+              <span>Label</span>
+              <Badge color="faint" soft>
+                New
+              </Badge>
+            </div>
+          </Button>
 
-          </div>
+          <a className="text-link underline" href="#">
+            Product feature
+          </a>
+          <Badge color="muted" className="ml-.5">
+            New
+          </Badge>
         </div>
       </div>
-    );
-  };
+    </div>
+  );
+};
 ```
diff --git a/packages/ui/CHANGELOG.md b/packages/ui/CHANGELOG.md
index 6edaa7b41..535020f94 100644
--- a/packages/ui/CHANGELOG.md
+++ b/packages/ui/CHANGELOG.md
@@ -1,5 +1,13 @@
 # @westpac/ui
 
+## 0.28.0
+
+### Minor Changes
+
+- 6f96072: fixed button groups hover glitch; updated footer story shield margin; updated space below alert title; updated search icon size in automcomplete
+- 23dad1b: Updated the appearance and svg of progress indicator component; updated visual bugs in header and badge;
+- 94d6345: added icons - arrow circle icons
+
 ## 0.27.0
 
 ### Minor Changes
diff --git a/packages/ui/assets/icons/filled/arrow-back-circle-filled.svg b/packages/ui/assets/icons/filled/arrow-back-circle-filled.svg
new file mode 100644
index 000000000..ffed4eed0
--- /dev/null
+++ b/packages/ui/assets/icons/filled/arrow-back-circle-filled.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none"><path fill="#00F" fill-rule="evenodd" d="M12 0C5.372 0 0 5.373 0 12s5.372 12 12 12 12-5.373 12-12S18.628 0 12 0ZM9.414 13l3.293 3.293-1.414 1.414L5.586 12l5.707-5.707 1.414 1.414L9.414 11H18v2H9.414Z" clip-rule="evenodd"/></svg>
\ No newline at end of file
diff --git a/packages/ui/assets/icons/filled/arrow-down-circle-filled.svg b/packages/ui/assets/icons/filled/arrow-down-circle-filled.svg
new file mode 100644
index 000000000..ed7bd4c68
--- /dev/null
+++ b/packages/ui/assets/icons/filled/arrow-down-circle-filled.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none"><path fill="#00F" fill-rule="evenodd" d="M0 12c0 6.628 5.373 12 12 12s12-5.372 12-12S18.627 0 12 0 0 5.372 0 12Zm13 2.586 3.293-3.293 1.414 1.414L12 18.414l-5.707-5.707 1.414-1.414L11 14.586V6h2v8.586Z" clip-rule="evenodd"/></svg>
\ No newline at end of file
diff --git a/packages/ui/assets/icons/filled/arrow-forward-circle-filled.svg b/packages/ui/assets/icons/filled/arrow-forward-circle-filled.svg
new file mode 100644
index 000000000..c8e95979a
--- /dev/null
+++ b/packages/ui/assets/icons/filled/arrow-forward-circle-filled.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none"><path fill="#00F" fill-rule="evenodd" d="M12 24c6.628 0 12-5.373 12-12S18.628 0 12 0 0 5.373 0 12s5.372 12 12 12Zm2.586-13-3.293-3.293 1.414-1.414L18.414 12l-5.707 5.707-1.414-1.414L14.586 13H6v-2h8.586Z" clip-rule="evenodd"/></svg>
\ No newline at end of file
diff --git a/packages/ui/assets/icons/filled/arrow-up-circle-filled.svg b/packages/ui/assets/icons/filled/arrow-up-circle-filled.svg
new file mode 100644
index 000000000..e0efd0539
--- /dev/null
+++ b/packages/ui/assets/icons/filled/arrow-up-circle-filled.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none"><path fill="#00F" fill-rule="evenodd" d="M24 12c0-6.628-5.373-12-12-12S0 5.372 0 12s5.373 12 12 12 12-5.372 12-12ZM11 9.414l-3.293 3.293-1.414-1.414L12 5.586l5.707 5.707-1.414 1.414L13 9.414V18h-2V9.414Z" clip-rule="evenodd"/></svg>
\ No newline at end of file
diff --git a/packages/ui/assets/icons/outlined/arrow-back-circle-outlined.svg b/packages/ui/assets/icons/outlined/arrow-back-circle-outlined.svg
new file mode 100644
index 000000000..2bf62ae15
--- /dev/null
+++ b/packages/ui/assets/icons/outlined/arrow-back-circle-outlined.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none"><path fill="#00F" d="m9.414 13 3.293 3.293-1.414 1.414L5.586 12l5.707-5.707 1.414 1.414L9.414 11H18v2H9.414Z"/><path fill="#00F" fill-rule="evenodd" d="M12 0C5.372 0 0 5.373 0 12s5.372 12 12 12 12-5.373 12-12S18.628 0 12 0Zm10 12c0 5.523-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2s10 4.477 10 10Z" clip-rule="evenodd"/></svg>
\ No newline at end of file
diff --git a/packages/ui/assets/icons/outlined/arrow-down-circle-outlined.svg b/packages/ui/assets/icons/outlined/arrow-down-circle-outlined.svg
new file mode 100644
index 000000000..398381861
--- /dev/null
+++ b/packages/ui/assets/icons/outlined/arrow-down-circle-outlined.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none"><path fill="#00F" d="m13 14.586 3.293-3.293 1.414 1.414L12 18.414l-5.707-5.707 1.414-1.414L11 14.586V6h2v8.586Z"/><path fill="#00F" fill-rule="evenodd" d="M0 12c0 6.628 5.373 12 12 12s12-5.372 12-12S18.627 0 12 0 0 5.372 0 12ZM12 2c5.523 0 10 4.477 10 10s-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2Z" clip-rule="evenodd"/></svg>
\ No newline at end of file
diff --git a/packages/ui/assets/icons/outlined/arrow-forward-circle-outlined.svg b/packages/ui/assets/icons/outlined/arrow-forward-circle-outlined.svg
new file mode 100644
index 000000000..2cf19a356
--- /dev/null
+++ b/packages/ui/assets/icons/outlined/arrow-forward-circle-outlined.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none"><path fill="#00F" d="m14.586 11-3.293-3.293 1.414-1.414L18.414 12l-5.707 5.707-1.414-1.414L14.586 13H6v-2h8.586Z"/><path fill="#00F" fill-rule="evenodd" d="M12 24c6.628 0 12-5.373 12-12S18.628 0 12 0 0 5.373 0 12s5.372 12 12 12ZM2 12C2 6.477 6.477 2 12 2s10 4.477 10 10-4.477 10-10 10S2 17.523 2 12Z" clip-rule="evenodd"/></svg>
\ No newline at end of file
diff --git a/packages/ui/assets/icons/outlined/arrow-up-circle-outlined.svg b/packages/ui/assets/icons/outlined/arrow-up-circle-outlined.svg
new file mode 100644
index 000000000..1cf2fc49d
--- /dev/null
+++ b/packages/ui/assets/icons/outlined/arrow-up-circle-outlined.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none"><path fill="#00F" d="m11 9.414-3.293 3.293-1.414-1.414L12 5.586l5.707 5.707-1.414 1.414L13 9.414V18h-2V9.414Z"/><path fill="#00F" fill-rule="evenodd" d="M24 12c0-6.628-5.373-12-12-12S0 5.372 0 12s5.373 12 12 12 12-5.372 12-12ZM12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10-4.477 10-10 10Z" clip-rule="evenodd"/></svg>
\ No newline at end of file
diff --git a/packages/ui/package.json b/packages/ui/package.json
index 622d13e0a..e6c97a34d 100644
--- a/packages/ui/package.json
+++ b/packages/ui/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@westpac/ui",
-  "version": "0.27.0",
+  "version": "0.28.0",
   "license": "MIT",
   "sideEffects": false,
   "type": "module",
diff --git a/packages/ui/src/components/badge/badge.stories.tsx b/packages/ui/src/components/badge/badge.stories.tsx
index 3373ccb0c..4420afed5 100644
--- a/packages/ui/src/components/badge/badge.stories.tsx
+++ b/packages/ui/src/components/badge/badge.stories.tsx
@@ -131,12 +131,14 @@ export const Soft = () => (
 export const Links = () => (
   <div className="flex flex-col gap-2">
     {COLORS.map(color => (
-      <a key={color} className="text-link underline" href="#">
-        {color}
-        <Badge color={color} type="pill" className="ml-1">
-          12
-        </Badge>
-      </a>
+      <div key={color} className="flex items-center">
+        <a className="flex items-center text-link" href="#">
+          <div className="underline">Product feature</div>
+          <Badge color={color} type="pill" className="ml-1">
+            NEW
+          </Badge>
+        </a>
+      </div>
     ))}
   </div>
 );
diff --git a/packages/ui/src/components/header/header.component.tsx b/packages/ui/src/components/header/header.component.tsx
index bd8c43fb4..ef3c4b8c0 100644
--- a/packages/ui/src/components/header/header.component.tsx
+++ b/packages/ui/src/components/header/header.component.tsx
@@ -103,7 +103,7 @@ export function Header({
             <Button
               look="link"
               iconAfter={ButtonIcon}
-              size="large"
+              iconSize={leftIcon === 'arrow' ? 'medium' : 'small'}
               onClick={leftOnClick}
               aria-label={leftAssistiveText}
               className={styles.leftButton()}
diff --git a/packages/ui/src/components/header/header.styles.ts b/packages/ui/src/components/header/header.styles.ts
index 478229839..ee5587a52 100644
--- a/packages/ui/src/components/header/header.styles.ts
+++ b/packages/ui/src/components/header/header.styles.ts
@@ -11,7 +11,7 @@ export const styles = tv(
       largeLogo: 'max-sm:hidden',
       leftContent: 'flex items-center',
       leftButton:
-        'my-1 border-r border-[#E8E8ED] p-0 max-sm:-ml-2 max-sm:mr-2 max-sm:h-7 max-sm:min-w-[2.625rem] sm:-ml-4 sm:mr-3 sm:h-[3.3125rem] sm:min-w-[3.75rem]',
+        'my-1 border-r border-[#E8E8ED] p-0 rounded-none max-sm:-ml-2 max-sm:mr-2 max-sm:h-7 max-sm:min-w-[2.625rem] sm:-ml-4 sm:mr-3 sm:h-[3.3125rem] sm:min-w-[3.75rem]',
       rightContent: 'ml-auto flex items-center',
     },
     variants: {
diff --git a/packages/ui/src/components/icon/components/arrow-back-circle-icon.tsx b/packages/ui/src/components/icon/components/arrow-back-circle-icon.tsx
new file mode 100644
index 000000000..31574cd9f
--- /dev/null
+++ b/packages/ui/src/components/icon/components/arrow-back-circle-icon.tsx
@@ -0,0 +1,37 @@
+import React, { Fragment } from 'react';
+
+import { Icon } from '../icon.component.js';
+import { type IconProps } from '../icon.types.js';
+
+export function ArrowBackCircleIcon({
+  look = 'filled',
+  'aria-label': ariaLabel = 'Arrow Back Circle',
+  copyrightYear = '2023',
+  ...props
+}: IconProps) {
+  return (
+    <Icon aria-label={ariaLabel} copyrightYear={copyrightYear} {...props}>
+      {look === 'filled' ? (
+        <path
+          fill="currentColor"
+          fillRule="evenodd"
+          d="M12 0C5.372 0 0 5.373 0 12s5.372 12 12 12 12-5.373 12-12S18.628 0 12 0ZM9.414 13l3.293 3.293-1.414 1.414L5.586 12l5.707-5.707 1.414 1.414L9.414 11H18v2H9.414Z"
+          clipRule="evenodd"
+        />
+      ) : (
+        <Fragment>
+          <path
+            fill="currentColor"
+            d="m9.414 13 3.293 3.293-1.414 1.414L5.586 12l5.707-5.707 1.414 1.414L9.414 11H18v2H9.414Z"
+          />
+          <path
+            fill="currentColor"
+            fillRule="evenodd"
+            d="M12 0C5.372 0 0 5.373 0 12s5.372 12 12 12 12-5.373 12-12S18.628 0 12 0Zm10 12c0 5.523-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2s10 4.477 10 10Z"
+            clipRule="evenodd"
+          />
+        </Fragment>
+      )}
+    </Icon>
+  );
+}
diff --git a/packages/ui/src/components/icon/components/arrow-down-circle-icon.tsx b/packages/ui/src/components/icon/components/arrow-down-circle-icon.tsx
new file mode 100644
index 000000000..732e25c56
--- /dev/null
+++ b/packages/ui/src/components/icon/components/arrow-down-circle-icon.tsx
@@ -0,0 +1,37 @@
+import React, { Fragment } from 'react';
+
+import { Icon } from '../icon.component.js';
+import { type IconProps } from '../icon.types.js';
+
+export function ArrowDownCircleIcon({
+  look = 'filled',
+  'aria-label': ariaLabel = 'Arrow Down Circle',
+  copyrightYear = '2023',
+  ...props
+}: IconProps) {
+  return (
+    <Icon aria-label={ariaLabel} copyrightYear={copyrightYear} {...props}>
+      {look === 'filled' ? (
+        <path
+          fill="currentColor"
+          fillRule="evenodd"
+          d="M0 12c0 6.628 5.373 12 12 12s12-5.372 12-12S18.627 0 12 0 0 5.372 0 12Zm13 2.586 3.293-3.293 1.414 1.414L12 18.414l-5.707-5.707 1.414-1.414L11 14.586V6h2v8.586Z"
+          clipRule="evenodd"
+        />
+      ) : (
+        <Fragment>
+          <path
+            fill="currentColor"
+            d="m13 14.586 3.293-3.293 1.414 1.414L12 18.414l-5.707-5.707 1.414-1.414L11 14.586V6h2v8.586Z"
+          />
+          <path
+            fill="currentColor"
+            fillRule="evenodd"
+            d="M0 12c0 6.628 5.373 12 12 12s12-5.372 12-12S18.627 0 12 0 0 5.372 0 12ZM12 2c5.523 0 10 4.477 10 10s-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2Z"
+            clipRule="evenodd"
+          />
+        </Fragment>
+      )}
+    </Icon>
+  );
+}
diff --git a/packages/ui/src/components/icon/components/arrow-forward-circle-icon.tsx b/packages/ui/src/components/icon/components/arrow-forward-circle-icon.tsx
new file mode 100644
index 000000000..1a13c772d
--- /dev/null
+++ b/packages/ui/src/components/icon/components/arrow-forward-circle-icon.tsx
@@ -0,0 +1,37 @@
+import React, { Fragment } from 'react';
+
+import { Icon } from '../icon.component.js';
+import { type IconProps } from '../icon.types.js';
+
+export function ArrowForwardCircleIcon({
+  look = 'filled',
+  'aria-label': ariaLabel = 'Arrow Forward Circle',
+  copyrightYear = '2023',
+  ...props
+}: IconProps) {
+  return (
+    <Icon aria-label={ariaLabel} copyrightYear={copyrightYear} {...props}>
+      {look === 'filled' ? (
+        <path
+          fill="currentColor"
+          fillRule="evenodd"
+          d="M12 24c6.628 0 12-5.373 12-12S18.628 0 12 0 0 5.373 0 12s5.372 12 12 12Zm2.586-13-3.293-3.293 1.414-1.414L18.414 12l-5.707 5.707-1.414-1.414L14.586 13H6v-2h8.586Z"
+          clipRule="evenodd"
+        />
+      ) : (
+        <Fragment>
+          <path
+            fill="currentColor"
+            d="m14.586 11-3.293-3.293 1.414-1.414L18.414 12l-5.707 5.707-1.414-1.414L14.586 13H6v-2h8.586Z"
+          />
+          <path
+            fill="currentColor"
+            fillRule="evenodd"
+            d="M12 24c6.628 0 12-5.373 12-12S18.628 0 12 0 0 5.373 0 12s5.372 12 12 12ZM2 12C2 6.477 6.477 2 12 2s10 4.477 10 10-4.477 10-10 10S2 17.523 2 12Z"
+            clipRule="evenodd"
+          />
+        </Fragment>
+      )}
+    </Icon>
+  );
+}
diff --git a/packages/ui/src/components/icon/components/arrow-up-circle-icon.tsx b/packages/ui/src/components/icon/components/arrow-up-circle-icon.tsx
new file mode 100644
index 000000000..d9b0510a1
--- /dev/null
+++ b/packages/ui/src/components/icon/components/arrow-up-circle-icon.tsx
@@ -0,0 +1,37 @@
+import React, { Fragment } from 'react';
+
+import { Icon } from '../icon.component.js';
+import { type IconProps } from '../icon.types.js';
+
+export function ArrowUpCircleIcon({
+  look = 'filled',
+  'aria-label': ariaLabel = 'Arrow Up Circle',
+  copyrightYear = '2023',
+  ...props
+}: IconProps) {
+  return (
+    <Icon aria-label={ariaLabel} copyrightYear={copyrightYear} {...props}>
+      {look === 'filled' ? (
+        <path
+          fill="currentColor"
+          fillRule="evenodd"
+          d="M24 12c0-6.628-5.373-12-12-12S0 5.372 0 12s5.373 12 12 12 12-5.372 12-12ZM11 9.414l-3.293 3.293-1.414-1.414L12 5.586l5.707 5.707-1.414 1.414L13 9.414V18h-2V9.414Z"
+          clipRule="evenodd"
+        />
+      ) : (
+        <Fragment>
+          <path
+            fill="currentColor"
+            d="m11 9.414-3.293 3.293-1.414-1.414L12 5.586l5.707 5.707-1.414 1.414L13 9.414V18h-2V9.414Z"
+          />
+          <path
+            fill="currentColor"
+            fillRule="evenodd"
+            d="M24 12c0-6.628-5.373-12-12-12S0 5.372 0 12s5.373 12 12 12 12-5.372 12-12ZM12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10-4.477 10-10 10Z"
+            clipRule="evenodd"
+          />
+        </Fragment>
+      )}
+    </Icon>
+  );
+}
diff --git a/packages/ui/src/components/icon/index.ts b/packages/ui/src/components/icon/index.ts
index ac21c7978..3ff55bb38 100755
--- a/packages/ui/src/components/icon/index.ts
+++ b/packages/ui/src/components/icon/index.ts
@@ -6,10 +6,14 @@ export { AlertIcon } from './components/alert-icon.js';
 export { AndroidIcon } from './components/android-icon.js';
 export { AppleIcon } from './components/apple-icon.js';
 export { ArchiveBoxIcon } from './components/archive-box-icon.js';
+export { ArrowBackCircleIcon } from './components/arrow-back-circle-icon.js';
+export { ArrowDownCircleIcon } from './components/arrow-down-circle-icon.js';
 export { ArrowForkIcon } from './components/arrow-fork-icon.js';
+export { ArrowForwardCircleIcon } from './components/arrow-forward-circle-icon.js';
 export { ArrowLeftIcon } from './components/arrow-left-icon.js';
 export { ArrowRightIcon } from './components/arrow-right-icon.js';
 export { ArrowSplitIcon } from './components/arrow-split-icon.js';
+export { ArrowUpCircleIcon } from './components/arrow-up-circle-icon.js';
 export { AtmIcon } from './components/atm-icon.js';
 export { AttacheCaseIcon } from './components/attache-case-icon.js';
 export { AustraliaIcon } from './components/australia-icon.js';
diff --git a/packages/ui/src/components/progress-indicator/progress-indicator.component.tsx b/packages/ui/src/components/progress-indicator/progress-indicator.component.tsx
index 35330fe4d..8a37f3ba3 100644
--- a/packages/ui/src/components/progress-indicator/progress-indicator.component.tsx
+++ b/packages/ui/src/components/progress-indicator/progress-indicator.component.tsx
@@ -1,21 +1,67 @@
-import React from 'react';
+import React, { useId } from 'react';
 
 import { Icon } from '../icon/icon.component.js';
+import { Label } from '../label/label.component.js';
 
-import { styles } from './progress-indicator.styles.js';
+import { styles as ProgressIndicatorStyles } from './progress-indicator.styles.js';
 import { ProgressIndicatorProps } from './progress-indicator.types.js';
 
 export function ProgressIndicator({
-  className,
-  children,
   color = 'hero',
+  label,
   size = 'medium',
+  icon: EmbedIcon,
+  className,
   'aria-label': ariaLabel = 'Loading',
   ...props
 }: ProgressIndicatorProps) {
+  const styles = ProgressIndicatorStyles({
+    size,
+    color,
+  });
+
+  const id = useId();
+
+  const sizeMap: Record<string, { strokeWidth: number }> = {
+    xlarge: { strokeWidth: 4 },
+    large: { strokeWidth: 4 },
+    medium: { strokeWidth: 15 },
+    small: { strokeWidth: 20 },
+    xsmall: { strokeWidth: 30 },
+  };
+
+  const strokeHalfWidth = sizeMap[size.toString()].strokeWidth / 2;
+
   return (
-    <Icon className={styles({ className })} size={size} color={color} aria-label={ariaLabel} {...props}>
-      {children}
-    </Icon>
+    <div aria-label={ariaLabel} className={styles.container()}>
+      <div className="relative">
+        <Icon viewBox="0 0 180 180" fill="none" color={color} className={styles.base({ className })} {...props}>
+          <defs>
+            <linearGradient id={`${id}-1`}>
+              <stop offset="0%" stopOpacity="0" stopColor="currentColor" />
+              <stop offset="100%" stopColor="currentColor" />
+            </linearGradient>
+            <linearGradient id={`${id}-2`}>
+              <stop offset="0%" stopColor="currentColor" />
+              <stop offset="50%" stopColor="currentColor" />
+            </linearGradient>
+          </defs>
+          <g strokeWidth={strokeHalfWidth * 2}>
+            <>
+              <path
+                stroke={`url(#${id}-1)`}
+                d={`M ${strokeHalfWidth} 90 A ${90 - strokeHalfWidth} ${90 - strokeHalfWidth} 0 0 1 ${180 - strokeHalfWidth} 90`}
+              ></path>
+              <path
+                stroke={`url(#${id}-2)`}
+                d={`M ${180 - strokeHalfWidth} 90 A ${90 - strokeHalfWidth} ${90 - strokeHalfWidth} 0 0 1 ${strokeHalfWidth} 90`}
+              ></path>
+            </>
+          </g>
+        </Icon>
+        {EmbedIcon && size === 'large' && <EmbedIcon size="large" color={color} className={styles.icon()} />}
+      </div>
+      {label && size === 'large' && <Label className={styles.label()}>{label}</Label>}
+    </div>
   );
 }
diff --git a/packages/ui/src/components/progress-indicator/progress-indicator.scenarios.stories.tsx b/packages/ui/src/components/progress-indicator/progress-indicator.scenarios.stories.tsx
index 8ba9152ac..5d9e1c307 100644
--- a/packages/ui/src/components/progress-indicator/progress-indicator.scenarios.stories.tsx
+++ b/packages/ui/src/components/progress-indicator/progress-indicator.scenarios.stories.tsx
@@ -25,7 +25,7 @@ type Story = StoryObj<typeof meta>;
  * >Default usage example
  */
 export const Default: Story = {
-  args: { size: 'xlarge' },
+  args: { size: 'large' },
 };
 
 /**
diff --git a/packages/ui/src/components/progress-indicator/progress-indicator.stories.tsx b/packages/ui/src/components/progress-indicator/progress-indicator.stories.tsx
index d555cb6eb..5774a3132 100644
--- a/packages/ui/src/components/progress-indicator/progress-indicator.stories.tsx
+++ b/packages/ui/src/components/progress-indicator/progress-indicator.stories.tsx
@@ -1,5 +1,7 @@
 import { type Meta, StoryFn, type StoryObj } from '@storybook/react';
 
+import { FingerprintIcon, PadlockIcon, PadlockTickIcon } from '../icon/index.js';
+
 import { ProgressIndicator } from './progress-indicator.component.js';
 
 const meta: Meta<typeof ProgressIndicator> = {
@@ -19,7 +21,7 @@ type Story = StoryObj<typeof meta>;
  * > Default usage example
  */
 export const Default: Story = {
-  args: { size: 'xlarge' },
+  args: { size: 'large' },
 };
 
 /**
@@ -28,11 +30,11 @@ export const Default: Story = {
 
 export const Sizes = () => {
   return (
-    <>
-      {(['xsmall', 'small', 'medium', 'large', 'xlarge'] as const).map(size => (
-        <ProgressIndicator key={size} size={size} className="mr-2" />
+    <div className="flex items-center justify-center gap-1">
+      {(['xsmall', 'small', 'medium', 'large'] as const).map(size => (
+        <ProgressIndicator key={size} size={size} />
       ))}
-    </>
+    </div>
   );
 };
 
@@ -42,10 +44,36 @@ export const Sizes = () => {
 
 export const Inverted = () => {
   return (
-    <div className="rounded bg-black">
-      {(['xsmall', 'small', 'medium', 'large', 'xlarge'] as const).map(size => (
-        <ProgressIndicator key={size} size={size} color={'white'} className="mr-2" />
+    <div className="flex items-center justify-center gap-1 rounded bg-black">
+      {(['xsmall', 'small', 'medium', 'large'] as const).map(size => (
+        <ProgressIndicator key={size} size={size} color="white" />
       ))}
     </div>
   );
 };
+
+/**
+ * > Large indicator with embedded icon example
+ */
+
+export const Icon = () => {
+  return (
+    <div className="flex items-center justify-center gap-3">
+      <ProgressIndicator size="large" icon={PadlockIcon} />
+      <ProgressIndicator size="large" icon={PadlockTickIcon} />
+      <ProgressIndicator size="large" icon={FingerprintIcon} />
+    </div>
+  );
+};
+
+/**
+ * > Large indicator with label example
+ */
+export const Label = () => {
+  return (
+    <div className="flex items-center justify-center gap-3">
+      <ProgressIndicator size="large" label="Loading..." />
+      <ProgressIndicator size="large" icon={PadlockTickIcon} label="Signing in..." />
+    </div>
+  );
+};
diff --git a/packages/ui/src/components/progress-indicator/progress-indicator.styles.ts b/packages/ui/src/components/progress-indicator/progress-indicator.styles.ts
index e509dee05..65992931d 100644
--- a/packages/ui/src/components/progress-indicator/progress-indicator.styles.ts
+++ b/packages/ui/src/components/progress-indicator/progress-indicator.styles.ts
@@ -2,7 +2,43 @@ import { tv } from 'tailwind-variants';
 
 export const styles = tv(
   {
-    base: 'box-border inline-block animate-[spin_0.7s_linear_infinite] rounded-full border border-r-0',
+    slots: {
+      icon: 'absolute inset-0 m-auto',
+      base: 'animate-[spin_0.7s_linear_infinite]',
+      container: 'flex flex-col items-center',
+      label: 'typography-body-9 mt-1.5',
+    },
+    variants: {
+      size: {
+        xsmall: { base: 'h-2 w-2' },
+        small: { base: 'h-3 w-3' },
+        medium: { base: 'h-4 w-4' },
+        large: { base: 'h-15 w-15' },
+        xlarge: { base: 'h-15 w-15' },
+      },
+      color: {
+        success: { label: 'text-success' },
+        info: { label: 'text-info' },
+        warning: { label: 'text-warning' },
+        danger: { label: 'text-danger' },
+        system: { label: 'text-system' },
+        white: { label: 'text-white' },
+        black: { label: 'text-black' },
+        background: { label: 'text-background' },
+        border: { label: 'text-border' },
+        borderDark: { label: 'text-borderDark' },
+        focus: { label: 'text-focus' },
+        heading: { label: 'text-heading' },
+        hero: { label: 'text-hero' },
+        light: { label: 'text-light' },
+        link: { label: 'text-link' },
+        muted: { label: 'text-muted' },
+        neutral: { label: 'text-neutral' },
+        pop: { label: 'text-pop' },
+        primary: { label: 'text-primary' },
+        text: { label: 'text-text' },
+      },
+    },
   },
   { responsiveVariants: ['xsl', 'sm', 'md', 'lg', 'xl'] },
 );
diff --git a/packages/ui/src/components/progress-indicator/progress-indicator.types.ts b/packages/ui/src/components/progress-indicator/progress-indicator.types.ts
index 5455001ba..7c13550e9 100644
--- a/packages/ui/src/components/progress-indicator/progress-indicator.types.ts
+++ b/packages/ui/src/components/progress-indicator/progress-indicator.types.ts
@@ -1,3 +1,19 @@
+import { ReactNode } from 'react';
+
 import { IconProps } from '../icon/icon.types.js';
 
-export type ProgressIndicatorProps = IconProps;
+export type ProgressIndicatorProps = Omit<IconProps, 'copyrightYear' | 'look'> & {
+  /**
+   * children prop
+   * @default false
+   */
+  children?: ReactNode;
+  /**
+   * Icon embedded in progress indicator
+   */
+  icon?: (props: IconProps) => JSX.Element;
+  /**
+   * Label placed below progress indicator
+   */
+  label?: string;
+};
diff --git a/packages/ui/src/stories/foundation/typography.stories.tsx b/packages/ui/src/stories/foundation/typography.stories.tsx
index db798396d..a4d7e8323 100644
--- a/packages/ui/src/stories/foundation/typography.stories.tsx
+++ b/packages/ui/src/stories/foundation/typography.stories.tsx
@@ -42,7 +42,7 @@ export const BrandFont = () => {
     { className: 'typography-brand-11', fontSize: fourteenPixel, lineHeight: twentyPixel },
   ];
   return (
-    <Table>
+    <Table className="whitespace-pre">
       <TableCaption>GEL brand typography tokens</TableCaption>
       <TableHeader>
         <TableHeaderRow>