diff --git a/CHANGELOG.MD b/CHANGELOG.MD
index d7dcc9ba..ced762d1 100644
--- a/CHANGELOG.MD
+++ b/CHANGELOG.MD
@@ -7,6 +7,7 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 
 ## [Unreleased]
 
+- TMS-1033: Add new optional hero-museum component
 - TMS-1038: Fix theme-mustavalkoinen lang-menu styles
 
 ## [1.54.9] - 2024-04-18
diff --git a/assets/styles/layouts/_hero-museum.scss b/assets/styles/layouts/_hero-museum.scss
new file mode 100644
index 00000000..a8d0df01
--- /dev/null
+++ b/assets/styles/layouts/_hero-museum.scss
@@ -0,0 +1,18 @@
+.hero-museum {
+    height: auto !important;
+
+    &__background-container {
+        @include hero-height;
+    }
+
+    &__inner {
+        position: static;
+        transform: none;
+    }
+
+    h1 {
+        @include from($desktop) {
+            font-size: 4.41rem !important; // sass-lint:disable-line no-important
+        }
+    }
+}
diff --git a/assets/styles/layouts/index.scss b/assets/styles/layouts/index.scss
index b5069e7a..0bf12956 100644
--- a/assets/styles/layouts/index.scss
+++ b/assets/styles/layouts/index.scss
@@ -3,6 +3,7 @@
  */
 
 @import "hero";
+@import "hero-museum";
 @import "icon-links";
 @import "image-banner";
 @import "image-carousel";
diff --git a/lib/ACF/Fields/HeroMuseumFields.php b/lib/ACF/Fields/HeroMuseumFields.php
new file mode 100644
index 00000000..2d153671
--- /dev/null
+++ b/lib/ACF/Fields/HeroMuseumFields.php
@@ -0,0 +1,223 @@
+<?php
+
+namespace TMS\Theme\Base\ACF\Fields;
+
+use Geniem\ACF\Field;
+use TMS\Theme\Base\Logger;
+
+/**
+ * Class HeroMuseumFields
+ *
+ * @package TMS\Theme\Base\ACF\Fields
+ */
+class HeroMuseumFields extends \Geniem\ACF\Field\Group {
+
+    /**
+     * The constructor for field.
+     *
+     * @param string $label Label.
+     * @param null   $key   Key.
+     * @param null   $name  Name.
+     */
+    public function __construct( $label = '', $key = null, $name = null ) {
+        parent::__construct( $label, $key, $name );
+
+        try {
+            $this->add_fields( $this->sub_fields() );
+        }
+        catch ( \Exception $e ) {
+            ( new Logger() )->error( $e->getMessage(), $e->getTrace() );
+        }
+    }
+
+    /**
+     * This returns all sub fields of the parent groupable.
+     *
+     * @return array
+     * @throws \Geniem\ACF\Exception In case of invalid ACF option.
+     */
+    protected function sub_fields() : array {
+        $strings = [
+            'image'         => [
+                'label'        => 'Kuva',
+                'instructions' => '',
+            ],
+            'title'         => [
+                'label'        => 'Otsikko',
+                'instructions' => '',
+            ],
+            'description'   => [
+                'label'        => 'Kuvaus',
+                'instructions' => '',
+            ],
+            'link'          => [
+                'label'        => 'Painike',
+                'instructions' => '',
+            ],
+            'align'         => [
+                'label'        => 'Tekstin tasaus',
+                'instructions' => '',
+            ],
+            'opening_times' => [
+                'label'  => 'Aukioloajat',
+                'title'  => [
+                    'label'        => 'Otsikko',
+                    'instructions' => '',
+                ],
+                'text'   => [
+                    'label'        => 'Teksti',
+                    'instructions' => '',
+                ],
+                'button' => [
+                    'label'        => 'Painike',
+                    'instructions' => '',
+                ],
+            ],
+            'tickets'       => [
+                'label'  => 'Liput',
+                'title'  => [
+                    'label'        => 'Otsikko',
+                    'instructions' => '',
+                ],
+                'text'   => [
+                    'label'        => 'Teksti',
+                    'instructions' => '',
+                ],
+                'button' => [
+                    'label'        => 'Painike',
+                    'instructions' => '',
+                ],
+                'image'  => [
+                    'label'        => 'Kuva',
+                    'instructions' => '',
+                ],
+            ],
+            'find_us'       => [
+                'label'  => 'Löydä meille',
+                'title'  => [
+                    'label'        => 'Otsikko',
+                    'instructions' => '',
+                ],
+                'text'   => [
+                    'label'        => 'Teksti',
+                    'instructions' => '',
+                ],
+                'button' => [
+                    'label'        => 'Painike',
+                    'instructions' => '',
+                ],
+            ],
+        ];
+
+        $key = $this->get_key();
+
+        $image_field = ( new Field\Image( $strings['image']['label'] ) )
+            ->set_key( "{$key}_image" )
+            ->set_name( 'image' )
+            ->set_return_format( 'id' )
+            ->set_wrapper_width( 50 )
+            ->set_required()
+            ->set_instructions( $strings['image']['instructions'] );
+
+        $title_field = ( new Field\Text( $strings['title']['label'] ) )
+            ->set_key( "{$key}_title" )
+            ->set_name( 'title' )
+            ->set_wrapper_width( 50 )
+            ->set_instructions( $strings['title']['instructions'] );
+
+        $description_field = ( new Field\Textarea( $strings['description']['label'] ) )
+            ->set_key( "{$key}_description" )
+            ->set_name( 'description' )
+            ->set_rows( 4 )
+            ->set_new_lines( 'wpautop' )
+            ->set_wrapper_width( 50 )
+            ->set_instructions( $strings['description']['instructions'] );
+
+        $link_field = ( new Field\Link( $strings['link']['label'] ) )
+            ->set_key( "{$key}_link" )
+            ->set_name( 'link' )
+            ->set_wrapper_width( 40 )
+            ->set_instructions( $strings['link']['instructions'] );
+
+        $opening_times_tab = ( new Field\Group( $strings['opening_times']['label'] ) )
+            ->set_key( "{$key}_opening_times" )
+            ->set_name( 'opening_times' );
+
+        $opening_times_tab->add_fields(
+            $this->get_hero_group_fields( $key, 'opening_times', $strings['opening_times'] )
+        );
+
+        $fields[] = $opening_times_tab;
+
+        $ticket_tab = ( new Field\Group( $strings['tickets']['label'] ) )
+            ->set_key( "{$key}_tickets" )
+            ->set_name( 'tickets' );
+
+        $ticket_image_field = ( new Field\Image( $strings['tickets']['image']['label'] ) )
+            ->set_key( "{$key}_tickets_image" )
+            ->set_name( 'tickets_image' )
+            ->set_return_format( 'id' )
+            ->set_wrapper_width( 50 )
+            ->set_instructions( $strings['tickets']['image']['instructions'] );
+
+        $ticket_tab_fields   = $this->get_hero_group_fields( $key, 'tickets', $strings['tickets'] );
+        $ticket_tab_fields[] = $ticket_image_field;
+
+        $ticket_tab->add_fields( $ticket_tab_fields );
+
+        $find_us_tab = ( new Field\Group( $strings['find_us']['label'] ) )
+            ->set_key( "{$key}_find_us" )
+            ->set_name( 'find_us' );
+
+        $find_us_tab->add_fields(
+            $this->get_hero_group_fields( $key, 'find_us', $strings['find_us'] )
+        );
+
+        return [
+            $image_field,
+            $title_field,
+            $description_field,
+            $link_field,
+            $opening_times_tab,
+            $ticket_tab,
+            $find_us_tab,
+        ];
+    }
+
+    /**
+     * Get hero group fields.
+     *
+     * @param string $key     Layout key.
+     * @param string $group   Group name.
+     * @param array  $strings Field strings.
+     *
+     * @return array
+     * @throws Exception In case of invalid ACF option.
+     */
+    protected function get_hero_group_fields( string $key, string $group, array $strings ) : array {
+        $title_field = ( new Field\Text( $strings['title']['label'] ) )
+            ->set_key( "{$key}_{$group}_title" )
+            ->set_name( "{$group}_title" )
+            ->set_wrapper_width( 50 )
+            ->set_instructions( $strings['title']['instructions'] );
+
+        $text_field = ( new Field\Textarea( $strings['text']['label'] ) )
+            ->set_key( "{$key}_{$group}_text" )
+            ->set_name( "{$group}_text" )
+            ->set_wrapper_width( 50 )
+            ->set_instructions( $strings['text']['instructions'] )
+            ->set_new_lines( 'br' );
+
+        $button_field = ( new Field\Link( $strings['button']['label'] ) )
+            ->set_key( "{$key}_{$group}_button" )
+            ->set_name( "{$group}_button" )
+            ->set_wrapper_width( 50 )
+            ->set_instructions( $strings['button']['instructions'] );
+
+        return [
+            $title_field,
+            $text_field,
+            $button_field,
+        ];
+    }
+}
diff --git a/lib/ACF/Fields/Settings/ThemeColorTab.php b/lib/ACF/Fields/Settings/ThemeColorTab.php
index 73730b9a..01622905 100644
--- a/lib/ACF/Fields/Settings/ThemeColorTab.php
+++ b/lib/ACF/Fields/Settings/ThemeColorTab.php
@@ -35,6 +35,10 @@ class ThemeColorTab extends \Geniem\ACF\Field\Tab {
             'title'        => 'Oletuskuva',
             'instructions' => '',
         ],
+        'use_hero_museum' => [
+            'title'        => 'Ota käyttöön museosivustojen hero',
+            'instructions' => 'Tällä valinnalla saat otettua käyttöön museosivustojen heron etusivulle.',
+        ],
     ];
 
     /**
@@ -86,21 +90,28 @@ public function sub_fields( $key ) : void {
             );
 
             $color_theme_select = ( new Field\Select( $this->strings['color_selection']['title'] ) )
-                ->set_key( $key . '_theme_color' )
+                ->set_key( "{$key}_theme_color" )
                 ->set_name( 'theme_color' )
                 ->set_choices( $theme_colors )
                 ->set_default_value( $theme_default_color )
                 ->set_instructions( $this->strings['color_selection']['instructions'] );
 
             $image_field = ( new Field\Image( $this->strings['default_image']['title'] ) )
-                ->set_key( "${key}_default_image" )
+                ->set_key( "{$key}_default_image" )
                 ->set_name( 'default_image' )
                 ->set_return_format( 'id' )
                 ->set_instructions( $this->strings['default_image']['instructions'] );
 
+            $use_hero_museum = ( new Field\TrueFalse( $this->strings['use_hero_museum']['title'] ) )
+                ->set_key( "{$key}_use_hero_museum" )
+                ->set_name( 'use_hero_museum' )
+                ->use_ui()
+                ->set_instructions( $this->strings['use_hero_museum']['instructions'] );
+
             $this->add_fields( [
                 $color_theme_select,
                 $image_field,
+                $use_hero_museum,
             ] );
         }
         catch ( \Exception $e ) {
diff --git a/lib/ACF/FrontPageGroup.php b/lib/ACF/FrontPageGroup.php
index 15382527..cc1433a3 100644
--- a/lib/ACF/FrontPageGroup.php
+++ b/lib/ACF/FrontPageGroup.php
@@ -12,6 +12,7 @@
 use TMS\Theme\Base\ACF\Layouts;
 use TMS\Theme\Base\Logger;
 use TMS\Theme\Base\PostType;
+use TMS\Theme\Base\Settings;
 
 /**
  * Class FrontPageGroup
@@ -130,6 +131,11 @@ protected function get_components_field( string $key ) : Field\FlexibleContent {
             $components_field->add_layout( new $component_layout( $key ) );
         }
 
+        // Add Museum hero to components if settings field is turned on
+        if ( ! empty( Settings::get_setting( 'use_hero_museum' ) ) ) {
+            $components_field->add_layout( new Layouts\HeroMuseumLayout( $key ) );
+        }
+
         return $components_field;
     }
 }
diff --git a/lib/ACF/Layouts/HeroMuseumLayout.php b/lib/ACF/Layouts/HeroMuseumLayout.php
new file mode 100644
index 00000000..d9a85d82
--- /dev/null
+++ b/lib/ACF/Layouts/HeroMuseumLayout.php
@@ -0,0 +1,57 @@
+<?php
+
+namespace TMS\Theme\Base\ACF\Layouts;
+
+use Geniem\ACF\Exception;
+use TMS\Theme\Base\ACF\Fields\HeroMuseumFields;
+use TMS\Theme\Base\Logger;
+
+/**
+ * Class HeroMuseumLayout
+ *
+ * @package TMS\Theme\Base\ACF\Layouts
+ */
+class HeroMuseumLayout extends BaseLayout {
+
+    /**
+     * Layout key
+     */
+    const KEY = '_hero_museum';
+
+    /**
+     * Create the layout
+     *
+     * @param string $key Key from the flexible content.
+     */
+    public function __construct( string $key ) {
+        parent::__construct(
+            'Hero - museosivustot',
+            $key . self::KEY,
+            'hero_museum'
+        );
+
+        $this->add_layout_fields();
+    }
+
+    /**
+     * Add layout fields
+     *
+     * @return void
+     */
+    private function add_layout_fields() : void {
+        $fields = new HeroMuseumFields(
+            $this->get_label(),
+            $this->get_key(),
+            $this->get_name()
+        );
+
+        try {
+            $this->add_fields(
+                $this->filter_layout_fields( $fields->get_fields(), $this->get_key(), self::KEY )
+            );
+        }
+        catch ( Exception $e ) {
+            ( new Logger() )->error( $e->getMessage(), $e->getTrace() );
+        }
+    }
+}
diff --git a/lib/Formatters/HeroMuseumFormatter.php b/lib/Formatters/HeroMuseumFormatter.php
new file mode 100644
index 00000000..7cc5690b
--- /dev/null
+++ b/lib/Formatters/HeroMuseumFormatter.php
@@ -0,0 +1,70 @@
+<?php
+namespace TMS\Theme\Base\Formatters;
+
+/**
+ * Class HeroMuseumFormatter
+ *
+ * @package TMS\Theme\Base\Formatters
+ */
+class HeroMuseumFormatter implements \TMS\Theme\Base\Interfaces\Formatter {
+
+    /**
+     * Define formatter name
+     */
+    const NAME = 'HeroMuseum';
+
+    /**
+     * Hooks
+     */
+    public function hooks() : void {
+        \add_filter(
+            'tms/acf/layout/hero_museum/data',
+            [ $this, 'format' ],
+            30
+        );
+    }
+
+    /**
+     * Format layout data
+     *
+     * @param array $layout ACF Layout data.
+     *
+     * @return array
+     */
+    public function format( array $layout ) : array {
+        $opening_times = [
+            'title' => $layout['opening_times']['opening_times_title'] ?? false,
+            'text'  => $layout['opening_times']['opening_times_text'] ?? false,
+            'link'  => $layout['opening_times']['opening_times_button'] ?? false,
+        ];
+
+        if ( ! empty( $opening_times['title'] ) || ! empty( $opening_times['text'] ) ) {
+            $layout['columns'][] = $opening_times;
+        }
+
+        $tickets = [
+            'title' => $layout['tickets']['tickets_title'] ?? false,
+            'text'  => $layout['tickets']['tickets_text'] ?? false,
+            'logo'  => $layout['tickets']['tickets_image'] ?? false,
+            'link'  => $layout['tickets']['tickets_button'] ?? false,
+        ];
+
+        if ( ! empty( $tickets['title'] ) || ! empty( $tickets['text'] ) ) {
+            $layout['columns'][] = $tickets;
+        }
+
+        $find_us = [
+            'title' => $layout['find_us']['find_us_title'] ?? false,
+            'text'  => $layout['find_us']['find_us_text'] ?? false,
+            'link'  => $layout['find_us']['find_us_button'] ?? false,
+        ];
+
+        if ( ! empty( $find_us['title'] ) || ! empty( $find_us['text'] ) ) {
+            $layout['columns'][] = $find_us;
+        }
+
+        $layout['button_classes'] = 'is-primary';
+
+        return $layout;
+    }
+}
diff --git a/partials/layouts/layout-hero-museum.dust b/partials/layouts/layout-hero-museum.dust
new file mode 100644
index 00000000..0de88855
--- /dev/null
+++ b/partials/layouts/layout-hero-museum.dust
@@ -0,0 +1,65 @@
+<section {?anchor}id="{anchor|attr}"{/anchor} class="hero-museum">
+    <div class="hero-museum__background-container is-relative image has-width-100 {container_class|attr}">
+        <div
+            class="hero-museum__background is-absolute has-top-0 has-bottom-0 has-right-0 has-left-0 has-background-cover" {@inlinebg id=image size="fullhd" /}></div>
+        </div>
+
+    <div class="hero-museum__inner">
+        <div class="container">
+            <div class="columns">
+                <div class="column">
+                    <div class="is-center p-8 pr-8-tablet pl-8-tablet pr-2 pl-2 has-text-centered">
+                        {?title}
+                            <h1 class="h1 mt-0 mr-auto mb-5 ml-auto no-hyphens has-text-secondary-invert">
+                                {title|html}
+                            </h1>
+                        {/title}
+
+                        {?description}
+                            <div class="h3 mb-6 has-text-secondary-invert keep-vertical-spacing">
+                                {description|kses}
+                            </div>
+                        {/description}
+
+                        {?link}
+                            <div class="button-container">
+                                {>"ui/button-link" link=link classes=button_classes icon="chevron-right" icon_classes="icon--medium" /}
+                            </div>
+                        {/link}
+                    </div>
+                </div>
+            </div>
+
+            {?columns}
+                <div class="columns is-centered is-multiline pr-6 pl-6 pr-9-desktop pl-9-desktop has-background-white has-border-primary has-border-1 ml-4-tablet mr-4-tablet ml-3 mr-3">
+                    {#columns}
+                        <div class="column is-6 is-4-desktop has-text-centered">
+                            <div class="is-flex is-flex-direction-column has-height-100 p-6">
+                                <p class="h3 mt-0 mb-3">
+                                    {title|html}
+                                </p>
+
+                                <p class="mt-0 mb-0 is-family-secondary has-text-large has-text-black">
+                                    {text|kses}
+                                </p>
+
+                                {?logo}
+                                    <div class="image-container">
+                                        {@image id=logo size="objectfit-image" /}
+                                    </div>
+                                {/logo}
+
+                                {?link}
+                                    <div class="button-container mt-auto">
+                                        {>"ui/button-link" link=link classes="mt-4 is-primary" icon="chevron-right" icon_classes="icon--medium" /}
+                                    </div>
+                                {/link}
+                            </div>
+                        </div>
+                    {/columns}
+                </div>
+            {/columns}
+
+        </div>
+    </div>
+</section>