diff --git a/packages/esm-form-engine-app/src/form-collapse-toggle/form-collapse-toggle.component.tsx b/packages/esm-form-engine-app/src/form-collapse-toggle/form-collapse-toggle.component.tsx
index d43143abf3..6151b146f2 100644
--- a/packages/esm-form-engine-app/src/form-collapse-toggle/form-collapse-toggle.component.tsx
+++ b/packages/esm-form-engine-app/src/form-collapse-toggle/form-collapse-toggle.component.tsx
@@ -1,7 +1,7 @@
 import React, { useCallback, useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Toggle } from '@carbon/react';
-import styles from './styles.scss';
+import styles from './form-collapse-toggle.scss';
 
 const FormCollapseToggle = () => {
   const { t } = useTranslation();
@@ -31,6 +31,7 @@ const FormCollapseToggle = () => {
   return (
     <div className={styles.toggleContainer}>
       <Toggle
+        className={styles.toggle}
         size="sm"
         aria-label={t('toggleCollapseOrExpand', 'Toggle collapse or expand')}
         defaultToggled
diff --git a/packages/esm-form-engine-app/src/form-collapse-toggle/styles.scss b/packages/esm-form-engine-app/src/form-collapse-toggle/form-collapse-toggle.scss
similarity index 51%
rename from packages/esm-form-engine-app/src/form-collapse-toggle/styles.scss
rename to packages/esm-form-engine-app/src/form-collapse-toggle/form-collapse-toggle.scss
index 9a3e076034..4378671b17 100644
--- a/packages/esm-form-engine-app/src/form-collapse-toggle/styles.scss
+++ b/packages/esm-form-engine-app/src/form-collapse-toggle/form-collapse-toggle.scss
@@ -4,3 +4,11 @@
   height: var(--workspace-header-height);
   margin-right: 0.5rem;
 }
+
+:global(.omrs-breakpoint-lt-desktop) {
+  .toggle {
+    :global(.cds--toggle__text) {
+      color: white;
+    }
+  }
+}