diff --git a/modules/tide_landing_page/config/install/field.field.node.landing_page.field_landing_page_hero_theme.yml b/modules/tide_landing_page/config/install/field.field.node.landing_page.field_landing_page_hero_theme.yml
index 087e8ca17..6a6628c5a 100644
--- a/modules/tide_landing_page/config/install/field.field.node.landing_page.field_landing_page_hero_theme.yml
+++ b/modules/tide_landing_page/config/install/field.field.node.landing_page.field_landing_page_hero_theme.yml
@@ -10,9 +10,9 @@ id: node.landing_page.field_landing_page_hero_theme
 field_name: field_landing_page_hero_theme
 entity_type: node
 bundle: landing_page
-label: Here image theme
+label: Hero image theme
 description: 'If your hero image is mostly dark, apply the dark theme. This changes how the page title is displayed.'
-required: false
+required: true
 translatable: false
 default_value: {  }
 default_value_callback: ''
diff --git a/modules/tide_landing_page/tests/behat/features/fields.feature b/modules/tide_landing_page/tests/behat/features/fields.feature
index 53568ea26..1ea3e80b2 100644
--- a/modules/tide_landing_page/tests/behat/features/fields.feature
+++ b/modules/tide_landing_page/tests/behat/features/fields.feature
@@ -27,6 +27,7 @@ Feature: Fields for Landing Page content type
     And I should see text matching "Call to action banner"
     And I should see text matching "No Hero Banner with CTA added yet."
     And I should see the button "Add Hero banner with CTA" in the "content" region
+    And I should see a "select#edit-field-landing-page-hero-theme" element
 
     And the "#edit-field-landing-page-hero-logo" element should contain "Logo"
     And I should see an "input#edit-field-landing-page-hero-logo-entity-browser-entity-browser-open-modal" element
@@ -34,6 +35,7 @@ Feature: Fields for Landing Page content type
     And I select the radio button "Corner graphics"
     And the "#edit-field-bottom-graphical-image" element should contain "Bottom Corner Graphic"
     And I should see an "input#edit-field-bottom-graphical-image-entity-browser-target" element
+    And I should see a "select#edit-field-landing-page-hero-theme" element
 
     And I click on the horizontal tab "Header extras"
     And I should see text matching "Header components"
@@ -156,6 +158,7 @@ Feature: Fields for Landing Page content type
     And I should see text matching "Call to action banner"
     And I should see text matching "No Hero Banner with CTA added yet."
     And I should see the button "Add Hero banner with CTA" in the "content" region
+    And I should see a "select#edit-field-landing-page-hero-theme" element
 
     And the "#edit-field-landing-page-hero-logo" element should contain "Logo"
     And I should see an "input#edit-field-landing-page-hero-logo-entity-browser-entity-browser-open-modal" element
@@ -163,6 +166,7 @@ Feature: Fields for Landing Page content type
     And I select the radio button "Corner graphics"
     And the "#edit-field-bottom-graphical-image" element should contain "Bottom Corner Graphic"
     And I should see an "input#edit-field-bottom-graphical-image-entity-browser-target" element
+    And I should see a "select#edit-field-landing-page-hero-theme" element
 
     And I click on the horizontal tab "Header extras"
     And I should see text matching "Header components"
@@ -300,3 +304,47 @@ Feature: Fields for Landing Page content type
     # This field can be "seen" but not visible.
     And I see field "field_landing_page_component[0][subform][field_customise][value]"
     And save screenshot
+
+ @api @javascript
+  Scenario: Selecting Corner graphics value from header style.
+    Given I am logged in as a user with the "editor" role
+    When I visit "node/add/landing_page"
+    And I click on the horizontal tab "Customised Header"
+    Then I should see an "#edit-header-style-options-corner" element
+    And I select "corner" from "edit-header-style-options-corner"
+    Then I should see an "#edit-field-landing-page-hero-theme" element
+    And I should see text matching "Light"
+    And save screenshot
+
+ @api @javascript
+  Scenario: Selecting Default appearance value from header style.
+    Given I am logged in as a user with the "editor" role
+    When I visit "node/add/landing_page"
+    And I click on the horizontal tab "Customised Header"
+    Then I should see an "#edit-header-style-options-default" element
+    And I select "corner" from "edit-header-style-options-default"
+    Then I should see an "#edit-field-landing-page-hero-theme" element
+    And I should see text matching "Light"
+    And save screenshot
+
+@api @javascript
+  Scenario: Selecting Full-width background image value from header style.
+    Given I am logged in as a user with the "editor" role
+    When I visit "node/add/landing_page"
+    And I click on the horizontal tab "Customised Header"
+    Then I should see an "#edit-header-style-options-fullwidtht" element
+    And I select "corner" from "edit-header-style-options-fullwidth"
+    Then I should see an "#edit-field-landing-page-hero-theme" element
+    And I should see text matching "Dark"
+    And save screenshot
+
+@api @javascript
+  Scenario: Selecting Call to action banner value from header style.
+    Given I am logged in as a user with the "editor" role
+    When I visit "node/add/landing_page"
+    And I click on the horizontal tab "Customised Header"
+    Then I should see an "#edit-header-style-options-cta" element
+    And I select "corner" from "edit-header-style-options-cta"
+    Then I should see an "#edit-field-landing-page-hero-theme" element
+    And I should see text matching "Light"
+    And save screenshot
diff --git a/modules/tide_landing_page/tide_landing_page.install b/modules/tide_landing_page/tide_landing_page.install
index de73d8b3d..39e7e8f5f 100644
--- a/modules/tide_landing_page/tide_landing_page.install
+++ b/modules/tide_landing_page/tide_landing_page.install
@@ -203,3 +203,24 @@ function tide_landing_page_update_10107() {
   $tide_update_helper = \Drupal::service('tide_core.entity_update_helper');
   $tide_update_helper->revert('field_config', 'paragraph.key_journeys.field_paragraph_title');
 }
+
+/**
+ * Set field `field_landing_page_hero_theme` to mandatory.
+ */
+function tide_landing_page_update_10108() {
+  $bundles = [
+    'landing_page',
+    'publication',
+    'publication_page',
+  ];
+
+  foreach ($bundles as $bundle) {
+    $field = FieldConfig::loadByName('node', $bundle, 'field_landing_page_hero_theme');
+    if (!empty($field)) {
+      $field->setLabel('Hero image theme');
+      $field->setRequired(TRUE);
+      $field->setDefaultValue('light');
+      $field->save();
+    }
+  }
+}
diff --git a/modules/tide_landing_page/tide_landing_page.module b/modules/tide_landing_page/tide_landing_page.module
index fe1d0196b..6b9007d56 100644
--- a/modules/tide_landing_page/tide_landing_page.module
+++ b/modules/tide_landing_page/tide_landing_page.module
@@ -5,6 +5,8 @@
  * Tide Landing Page module functionality.
  */
 
+use Drupal\Core\Ajax\AjaxResponse;
+use Drupal\Core\Ajax\InvokeCommand;
 use Drupal\Core\Cache\Cache;
 use Drupal\Core\Field\WidgetBase;
 use Drupal\Core\Form\FormStateInterface;
@@ -371,6 +373,34 @@ function tide_landing_page_field_widget_single_element_paragraphs_form_alter(&$e
   }
 }
 
+/**
+ * Function to set value to Hero image theme.
+ *
+ * @param array $form
+ *   The form.
+ * @param Drupal\Core\Form\FormStateInterface $form_state
+ *   The form state.
+ *
+ * @return Drupal\Core\Ajax\AjaxResponse
+ *   The response.
+ */
+function tide_landing_page_set_value_hero_image_theme(array $form, FormStateInterface $form_state): AjaxResponse {
+  $response = new AjaxResponse();
+  $value = $form_state->getValue('_header_style_options');
+  if ($value === 'fullwidth') {
+    return $response->addCommand(new InvokeCommand(
+      '#edit-field-landing-page-hero-theme',
+      'val',
+      ['dark']
+    ));
+  }
+  return $response->addCommand(new InvokeCommand(
+    '#edit-field-landing-page-hero-theme',
+    'val',
+    ['light']
+  ));
+}
+
 /**
  * Node form #process callback.
  *
@@ -405,14 +435,18 @@ function _tide_landing_page_form_node_form_process(array $form, FormStateInterfa
       'corner' => t('Corner graphics'),
       'cta' => t('Call to action banner'),
     ],
+    '#ajax' => [
+      'callback' => 'tide_landing_page_set_value_hero_image_theme',
+    ],
   ];
-
-  $form['field_landing_page_hero_image']['#states']['visible'] = [
+  $form['field_landing_page_hero_image']['widget']['field_landing_page_hero_theme']['#states']['disabled'] = [
     ':input[name="_header_style_options"]' => [
+      ['value' => 'default'],
       ['value' => 'fullwidth'],
       ['value' => 'cta'],
     ],
   ];
+
   $form['field_graphical_image']['#states']['visible'] = [
     ':input[name="_header_style_options"]' => ['value' => 'corner'],
   ];
diff --git a/modules/tide_publication/tide_publication.module b/modules/tide_publication/tide_publication.module
index 7dd65b6e5..47d35b5dd 100644
--- a/modules/tide_publication/tide_publication.module
+++ b/modules/tide_publication/tide_publication.module
@@ -128,11 +128,8 @@ function _tide_publication_form_node_form_process(array $form, FormStateInterfac
     ],
   ];
 
-  $form['field_landing_page_hero_image']['#states']['visible'] = [
-    ':input[name="_header_style_options"]' => [
-      ['value' => 'fullwidth'],
-      ['value' => 'cta'],
-    ],
+  $form['field_landing_page_hero_image']['widget']['field_landing_page_hero_theme']['#states']['enabled'] = [
+    ':input[name="_header_style_options"]' => ['value' => 'corner'],
   ];
 
   // Determine the initial value of Header style.