diff --git a/.changeset/cyan-owls-rest.md b/.changeset/cyan-owls-rest.md
new file mode 100644
index 000000000..697344e07
--- /dev/null
+++ b/.changeset/cyan-owls-rest.md
@@ -0,0 +1,5 @@
+---
+'@westpac/ui': minor
+---
+
+Updated the appearance and svg of progress indicator component; updated visual bugs in header and badge;
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/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/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 3a2376810..36f9ad572 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
@@ -105,8 +105,10 @@ Badges come in 2 different styles: Default, used to highlight words, and Pill, u
                 <span>Label</span>
               </div>
             </Button>
-            <a className="text-link underline" href="#">
-                Messages 
+            <a className="text-link flex items-center" href="#">
+                <div className="underline">
+                  Messages
+                </div> 
                 <Badge color="muted" type="pill" className="ml-1">
                   12
                 </Badge>
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/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>