diff --git a/core/themes/claro/claro.info.yml b/core/themes/claro/claro.info.yml
index daf248154b..3ba9a44599 100644
--- a/core/themes/claro/claro.info.yml
+++ b/core/themes/claro/claro.info.yml
@@ -21,6 +21,7 @@ libraries:
   - core/drupal.message
   - core/normalize
   - claro/global-styling
+  - claro/custom-scripts
 libraries-override:
   core/drupal.tabledrag:
     css:
diff --git a/core/themes/claro/claro.libraries.yml b/core/themes/claro/claro.libraries.yml
index 3ba8ff8568..d8cf6f4cfd 100644
--- a/core/themes/claro/claro.libraries.yml
+++ b/core/themes/claro/claro.libraries.yml
@@ -343,3 +343,11 @@ classy.search-results:
   css:
     component:
       css/classy/components/search-results.css: {}
+
+custom-scripts:
+  version: VERSION
+  js:
+    js/field_group_custom.js: {}
+  dependencies:
+    - core/jquery
+
diff --git a/core/themes/claro/js/field_group_custom.js b/core/themes/claro/js/field_group_custom.js
new file mode 100644
index 0000000000..fcb4d363b8
--- /dev/null
+++ b/core/themes/claro/js/field_group_custom.js
@@ -0,0 +1,34 @@
+document.addEventListener('DOMContentLoaded', () => {
+    // Select all labels with the required classes
+    const requiredLabels = document.querySelectorAll('.form-item__label.js-form-required.form-required');
+    
+    requiredLabels.forEach(label => {
+      // Navigate to the closest '.vertical-tabs__pane' which encapsulates the field group content
+      // Navigate to the closest '.horizontal-tabs-pane' which encapsulates the field group content
+      const verticalTabPane = label.closest('.vertical-tabs__pane');
+      const horizontalTabPane = label.closest('.horizontal-tabs-pane');      
+      
+      
+        // Find the corresponding <strong> element in the associated tab menu item
+        let tabId = null;
+        if (verticalTabPane) {
+          tabId = verticalTabPane.id;
+        } else if (horizontalTabPane) {
+          tabId = horizontalTabPane.id;
+        }
+        
+        const menuLink = document.querySelector(`a[href="#${tabId}"]`);
+        
+        if (menuLink) {
+          const parentStrong = menuLink.querySelector('strong.form-required');
+          if (parentStrong) {
+            // Add an asterisk and set color to red
+            parentStrong.innerHTML += ' <span style="color: red;">*</span>';
+          }
+        }
+      
+
+      
+    });
+  });
+  
\ No newline at end of file