diff --git a/.changeset/little-feet-mix.md b/.changeset/little-feet-mix.md
new file mode 100644
index 00000000000..72774568e68
--- /dev/null
+++ b/.changeset/little-feet-mix.md
@@ -0,0 +1,5 @@
+---
+'@kaizen/components': patch
+---
+
+Update Label and LabelledMessage components to CSS from SCSS
diff --git a/packages/components/src/Label/Label.module.css b/packages/components/src/Label/Label.module.css
new file mode 100644
index 00000000000..ac9ea643dd8
--- /dev/null
+++ b/packages/components/src/Label/Label.module.css
@@ -0,0 +1,97 @@
+@layer kz-components {
+  :root {
+    --label-start-margin: var(--spacing-xs);
+    --dt-color-form-text-color: var(--color-purple-800);
+  }
+
+  .label {
+    --icon-vertical-align: text-bottom;
+  }
+
+  .label,
+  :global(.ideal-sans) .label {
+    /* override Murmur global styles :( */
+    opacity: inherit;
+    color: var(--dt-color-form-text-color);
+    visibility: visible;
+    width: 100%;
+    text-align: start;
+  }
+
+  .reversed {
+    color: var(--color-white);
+
+    a {
+      color: var(--color-white);
+
+      &:hover {
+        text-decoration: none;
+      }
+    }
+  }
+
+  .disabled {
+    opacity: 0.3;
+  }
+
+  /* ///////////////////////////////////////////////////
+  ////  LABEL TYPES
+  //////////////////////////////////////////////////// */
+
+  /* This is to override bootstrap styles. Remove when appropriate */
+  .text,
+  :global(.ideal-sans) .text {
+    font-family: var(--typography-heading-6-font-family);
+    font-size: var(--typography-heading-6-font-size);
+    line-height: var(--typography-heading-6-line-height);
+    letter-spacing: var(--typography-heading-6-letter-spacing);
+    font-weight: var(--typography-heading-6-font-weight);
+  }
+
+  .checkboxOrRadio,
+  .checkbox,
+  .radio,
+  :global(.ideal-sans) .checkboxOrRadio {
+    display: flex;
+    font-family: var(--typography-paragraph-body-font-family);
+    font-size: var(--typography-paragraph-body-font-size);
+    line-height: var(--typography-paragraph-body-line-height);
+    letter-spacing: var(--typography-paragraph-body-letter-spacing);
+    font-weight: var(--typography-paragraph-body-font-weight);
+  }
+
+  .toggle {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    font-family: var(--typography-paragraph-body-font-family);
+    font-size: var(--typography-paragraph-body-font-size);
+    line-height: var(--typography-paragraph-body-line-height);
+    letter-spacing: var(--typography-paragraph-body-letter-spacing);
+    font-weight: var(--typography-paragraph-body-font-weight);
+  }
+
+  .checkbox,
+  .radio,
+  .toggle {
+    /* apply padding when label is inline with form control */
+    .prependedLabel {
+      order: -1; /* place label before the control */
+      margin-inline-end: var(--label-start-margin);
+    }
+
+    .appendedLabel {
+      margin-inline-start: var(--label-start-margin);
+    }
+  }
+
+  .prominent {
+    font-family: var(--typography-heading-4-font-family);
+    font-weight: var(--typography-heading-4-font-weight);
+    font-size: var(--typography-heading-4-font-size);
+    line-height: var(--typography-heading-4-line-height);
+    letter-spacing: var(--typography-heading-4-letter-spacing);
+    display: block;
+    margin-bottom: var(--spacing-xs);
+  }
+}
diff --git a/packages/components/src/Label/Label.module.scss b/packages/components/src/Label/Label.module.scss
deleted file mode 100644
index 7e8f7bcd700..00000000000
--- a/packages/components/src/Label/Label.module.scss
+++ /dev/null
@@ -1,105 +0,0 @@
-@import '~@kaizen/design-tokens/sass/spacing';
-@import '~@kaizen/design-tokens/sass/typography';
-@import '~@kaizen/design-tokens/sass/color';
-@import '../../styles/utils/form-variables';
-
-@layer kz-components {
-  $label-start-margin: $spacing-xs;
-
-  .label {
-    --icon-vertical-align: text-bottom;
-  }
-
-  .label,
-  :global(.ideal-sans) .label {
-    // override Murmur global styles :(
-    opacity: inherit;
-    color: $dt-color-form-text-color;
-    visibility: visible;
-    width: 100%;
-    text-align: start;
-  }
-
-  .reversed {
-    color: $color-white;
-
-    a {
-      color: $color-white;
-
-      &:hover {
-        text-decoration: none;
-      }
-    }
-  }
-
-  .disabled {
-    opacity: 30%;
-  }
-
-  ///////////////////////////////////////////////////
-  // LABEL TYPES
-  ///////////////////////////////////////////////////
-
-  // This is to override bootstrap styles. Remove when appropriate
-  .text,
-  :global(.ideal-sans) .text {
-    font-family: $typography-heading-6-font-family;
-    font-size: $typography-heading-6-font-size;
-    line-height: $typography-heading-6-line-height;
-    letter-spacing: $typography-heading-6-letter-spacing;
-    font-weight: $typography-heading-6-font-weight;
-  }
-
-  %checkboxOrRadio,
-  :global(.ideal-sans) %checkboxOrRadio {
-    display: flex;
-    font-family: $typography-paragraph-body-font-family;
-    font-size: $typography-paragraph-body-font-size;
-    line-height: $typography-paragraph-body-line-height;
-    letter-spacing: $typography-paragraph-body-letter-spacing;
-    font-weight: $typography-paragraph-body-font-weight;
-  }
-
-  .checkbox {
-    @extend %checkboxOrRadio;
-  }
-
-  .radio {
-    @extend %checkboxOrRadio;
-  }
-
-  .toggle {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    font-family: $typography-paragraph-body-font-family;
-    font-size: $typography-paragraph-body-font-size;
-    line-height: $typography-paragraph-body-line-height;
-    letter-spacing: $typography-paragraph-body-letter-spacing;
-    font-weight: $typography-paragraph-body-font-weight;
-  }
-
-  .checkbox,
-  .radio,
-  .toggle {
-    // apply padding when label is inline with form control
-    .prependedLabel {
-      order: -1; // place label before the control
-      margin-inline-end: $label-start-margin;
-    }
-
-    .appendedLabel {
-      margin-inline-start: $label-start-margin;
-    }
-  }
-
-  .prominent {
-    font-family: $typography-heading-4-font-family;
-    font-weight: $typography-heading-4-font-weight;
-    font-size: $typography-heading-4-font-size;
-    line-height: $typography-heading-4-line-height;
-    letter-spacing: $typography-heading-4-letter-spacing;
-    display: block;
-    margin-bottom: $spacing-xs;
-  }
-}
diff --git a/packages/components/src/Label/Label.tsx b/packages/components/src/Label/Label.tsx
index 0db0dfe376a..7a8707f440d 100644
--- a/packages/components/src/Label/Label.tsx
+++ b/packages/components/src/Label/Label.tsx
@@ -1,7 +1,7 @@
 import React, { type LabelHTMLAttributes } from 'react'
 import classnames from 'classnames'
 import { type OverrideClassName } from '~components/types/OverrideClassName'
-import styles from './Label.module.scss'
+import styles from './Label.module.css'
 
 type LabelType = 'text' | 'checkbox' | 'toggle' | 'radio'
 
diff --git a/packages/components/src/Label/_docs/Label.stickersheet.stories.tsx b/packages/components/src/Label/_docs/Label.stickersheet.stories.tsx
index 50c1b8b3576..c79db466c07 100644
--- a/packages/components/src/Label/_docs/Label.stickersheet.stories.tsx
+++ b/packages/components/src/Label/_docs/Label.stickersheet.stories.tsx
@@ -1,5 +1,6 @@
 import React from 'react'
 import { type Meta } from '@storybook/react'
+import { Link } from '~components/Link'
 import { StickerSheet, type StickerSheetStory } from '~storybook/components/StickerSheet'
 import { Label, type LabelProps } from '../index'
 import { BlockLabelTypes, InlineLabelTypes } from '../types'
@@ -35,12 +36,14 @@ const InlineControl = ({ labelText, ...props }: WrapperProps): JSX.Element => (
     labelText={
       <span data-sb-a11y-color-contrast-disable={props['data-sb-a11y-color-contrast-disable']}>
         {labelText}{' '}
-        <a
+        <Link
           href="/"
+          isInline={true}
+          {...(props.reversed ? { variant: 'white' } : {})}
           data-sb-a11y-color-contrast-disable={props['data-sb-a11y-color-contrast-disable']}
         >
           a
-        </a>
+        </Link>
       </span>
     }
   >
@@ -55,12 +58,14 @@ const BlockControl = ({ labelText, ...props }: WrapperProps): JSX.Element => (
       labelText={
         <span data-sb-a11y-color-contrast-disable={props['data-sb-a11y-color-contrast-disable']}>
           {labelText}{' '}
-          <a
+          <Link
             href="/"
+            isInline={true}
+            {...(props.reversed ? { variant: 'white' } : {})}
             data-sb-a11y-color-contrast-disable={props['data-sb-a11y-color-contrast-disable']}
           >
             anchor
-          </a>
+          </Link>
         </span>
       }
     />
diff --git a/packages/components/src/LabelledMessage/LabelledMessage.module.scss b/packages/components/src/LabelledMessage/LabelledMessage.module.css
similarity index 60%
rename from packages/components/src/LabelledMessage/LabelledMessage.module.scss
rename to packages/components/src/LabelledMessage/LabelledMessage.module.css
index d631c07297b..1f5efa09e86 100644
--- a/packages/components/src/LabelledMessage/LabelledMessage.module.scss
+++ b/packages/components/src/LabelledMessage/LabelledMessage.module.css
@@ -1,5 +1,3 @@
-@import '~@kaizen/design-tokens/sass/spacing';
-
 @layer kz-components {
   .labelledMessage {
     display: inline-flex;
@@ -7,6 +5,6 @@
   }
 
   .labelSeparator {
-    margin-inline-end: $spacing-6;
+    margin-inline-end: var(--spacing-6);
   }
 }
diff --git a/packages/components/src/LabelledMessage/LabelledMessage.tsx b/packages/components/src/LabelledMessage/LabelledMessage.tsx
index cf50ee0e1ec..38259fb317a 100644
--- a/packages/components/src/LabelledMessage/LabelledMessage.tsx
+++ b/packages/components/src/LabelledMessage/LabelledMessage.tsx
@@ -1,7 +1,7 @@
 import React, { type HTMLAttributes } from 'react'
 import classnames from 'classnames'
 import { type OverrideClassName } from '~components/types/OverrideClassName'
-import styles from './LabelledMessage.module.scss'
+import styles from './LabelledMessage.module.css'
 
 export type LabelledMessageProps = {
   label: string | React.ReactElement