diff --git a/src/components/theme/CustomCSS/CustomCSS.jsx b/src/components/theme/CustomCSS/CustomCSS.jsx
index 5bd1c52e..1beb9458 100644
--- a/src/components/theme/CustomCSS/CustomCSS.jsx
+++ b/src/components/theme/CustomCSS/CustomCSS.jsx
@@ -2,11 +2,11 @@ import React from 'react';
 import config from '@plone/volto/registry';
 
 const CustomCSS = (props) => {
+  const href = `${config.settings.apiPath}/voltoCustom.css`;
   return (
-    <link
-      rel={'stylesheet'}
-      href={`${config.settings.apiPath}/voltoCustom.css`}
-    />
+    <>
+      <link rel="stylesheet" href={href} />
+    </>
   );
 };
 export default CustomCSS;
diff --git a/src/components/theme/Widgets/TopicsWidget.test.jsx b/src/components/theme/Widgets/TopicsWidget.test.jsx
index 478de267..aee36b02 100644
--- a/src/components/theme/Widgets/TopicsWidget.test.jsx
+++ b/src/components/theme/Widgets/TopicsWidget.test.jsx
@@ -18,12 +18,17 @@ describe('TopicsWidget Component', () => {
       },
     });
 
+    const tags = [
+      { title: 'Environment', token: '1' },
+      { title: 'Climate', token: '2' },
+    ];
+
     const { container } = render(
       <Provider store={store}>
         <Router history={history}>
           <TopicsWidget
-            value={['Value1', 'Value2']}
-            children={''}
+            value={tags}
+            children={(tagTitle) => <span>{tagTitle}</span>}
             className={'test'}
           />
         </Router>
diff --git a/src/customizations/volto/components/manage/Blocks/Image/Edit.jsx b/src/customizations/volto/components/manage/Blocks/Image/Edit.jsx
index 55f2f505..5113d56e 100644
--- a/src/customizations/volto/components/manage/Blocks/Image/Edit.jsx
+++ b/src/customizations/volto/components/manage/Blocks/Image/Edit.jsx
@@ -313,6 +313,7 @@ class Edit extends Component {
                         '@id': data.url,
                         image_field: data.image_field,
                         image_scales: data.image_scales,
+                        data: data,
                       }
                     : undefined
                 }
@@ -323,7 +324,9 @@ class Edit extends Component {
                     ? // Backwards compat in the case that the block is storing the full server URL
                       (() => {
                         if (data.size === 'l')
-                          return `${flattenToAppURL(data.url)}/@@images/image`;
+                          return `${flattenToAppURL(
+                            data.url,
+                          )}/@@images/image/large`;
                         if (data.size === 'm')
                           return `${flattenToAppURL(
                             data.url,
@@ -332,7 +335,9 @@ class Edit extends Component {
                           return `${flattenToAppURL(
                             data.url,
                           )}/@@images/image/mini`;
-                        return `${flattenToAppURL(data.url)}/@@images/image`;
+                        return `${flattenToAppURL(
+                          data.url,
+                        )}/@@images/image/large`;
                       })()
                     : data.url
                 }
diff --git a/src/customizations/volto/components/manage/Blocks/Image/View.jsx b/src/customizations/volto/components/manage/Blocks/Image/View.jsx
index d42fed1f..9e501266 100644
--- a/src/customizations/volto/components/manage/Blocks/Image/View.jsx
+++ b/src/customizations/volto/components/manage/Blocks/Image/View.jsx
@@ -76,6 +76,7 @@ export const View = (props) => {
                               '@id': data.url,
                               image_field: data.image_field,
                               image_scales: data.image_scales,
+                              data: data,
                             }
                           : undefined
                       }
@@ -88,7 +89,7 @@ export const View = (props) => {
                               if (data.size === 'l')
                                 return `${flattenToAppURL(
                                   data.url,
-                                )}/@@images/image`;
+                                )}/@@images/image/large`;
                               if (data.size === 'm')
                                 return `${flattenToAppURL(
                                   data.url,
@@ -99,7 +100,7 @@ export const View = (props) => {
                                 )}/@@images/image/mini`;
                               return `${flattenToAppURL(
                                 data.url,
-                              )}/@@images/image`;
+                              )}/@@images/image/large`;
                             })()
                           : data.url
                       }
diff --git a/src/customizations/volto/components/manage/Blocks/Image/schema.js b/src/customizations/volto/components/manage/Blocks/Image/schema.js
index 63bc6d84..864130ba 100644
--- a/src/customizations/volto/components/manage/Blocks/Image/schema.js
+++ b/src/customizations/volto/components/manage/Blocks/Image/schema.js
@@ -95,10 +95,12 @@ export function ImageSchema({ formData, intl }) {
       align: {
         title: intl.formatMessage(messages.Align),
         widget: 'align',
+        default: 'center',
       },
       size: {
         title: intl.formatMessage(messages.size),
         widget: 'image_size',
+        default: 'l',
       },
       href: {
         title: intl.formatMessage(messages.LinkTo),
diff --git a/src/customizations/volto/components/theme/Header/Header.jsx b/src/customizations/volto/components/theme/Header/Header.jsx
index 5f439935..3b9d4c44 100644
--- a/src/customizations/volto/components/theme/Header/Header.jsx
+++ b/src/customizations/volto/components/theme/Header/Header.jsx
@@ -9,16 +9,10 @@ import { connect, useDispatch, useSelector } from 'react-redux';
 
 import { withRouter } from 'react-router-dom';
 import { UniversalLink } from '@plone/volto/components';
-import {
-  getBaseUrl,
-  hasApiExpander,
-  flattenToAppURL,
-} from '@plone/volto/helpers';
+import { getBaseUrl, hasApiExpander } from '@plone/volto/helpers';
 import { getNavigation } from '@plone/volto/actions';
 import { Header, Logo } from '@eeacms/volto-eea-design-system/ui';
 import { usePrevious } from '@eeacms/volto-eea-design-system/helpers';
-import { find } from 'lodash';
-import globeIcon from '@eeacms/volto-eea-design-system/../theme/themes/eea/assets/images/Header/global-line.svg';
 import eeaFlag from '@eeacms/volto-eea-design-system/../theme/themes/eea/assets/images/Header/eea.png';
 
 import config from '@plone/volto/registry';
@@ -26,6 +20,9 @@ import { compose } from 'recompose';
 import { BodyClass } from '@plone/volto/helpers';
 
 import cx from 'classnames';
+import loadable from '@loadable/component';
+
+const LazyLanguageSwitcher = loadable(() => import('./LanguageSwitcher'));
 
 function removeTrailingSlash(path) {
   return path.replace(/\/+$/, '');
@@ -35,11 +32,6 @@ function removeTrailingSlash(path) {
  * EEA Specific Header component.
  */
 const EEAHeader = ({ pathname, token, items, history, subsite }) => {
-  const currentLang = useSelector((state) => state.intl.locale);
-  const translations = useSelector(
-    (state) => state.content.data?.['@components']?.translations?.items,
-  );
-
   const router_pathname = useSelector((state) => {
     return removeTrailingSlash(state.router?.location?.pathname) || '';
   });
@@ -61,31 +53,25 @@ const EEAHeader = ({ pathname, token, items, history, subsite }) => {
   const { eea } = config.settings;
   const headerOpts = eea.headerOpts || {};
   const headerSearchBox = eea.headerSearchBox || [];
-  const { logo, logoWhite } = headerOpts || {};
+  const { logo, logoWhite } = headerOpts;
   const width = useSelector((state) => state.screen?.width);
   const dispatch = useDispatch();
   const previousToken = usePrevious(token);
-  const [language, setLanguage] = React.useState(
-    currentLang || eea.defaultLanguage,
-  );
 
   React.useEffect(() => {
-    const { settings } = config;
     const base_url = getBaseUrl(pathname);
+    const { settings } = config;
+
+    // Check if navigation data needs to be fetched based on the API expander availability
     if (!hasApiExpander('navigation', base_url)) {
       dispatch(getNavigation(base_url, settings.navDepth));
     }
-  }, [pathname, dispatch]);
 
-  React.useEffect(() => {
+    // Additional check for token changes
     if (token !== previousToken) {
-      const { settings } = config;
-      const base = getBaseUrl(pathname);
-      if (!hasApiExpander('navigation', base)) {
-        dispatch(getNavigation(base, settings.navDepth));
-      }
+      dispatch(getNavigation(base_url, settings.navDepth));
     }
-  }, [token, dispatch, pathname, previousToken]);
+  }, [pathname, token, dispatch, previousToken]);
 
   return (
     <Header menuItems={items}>
@@ -155,50 +141,7 @@ const EEAHeader = ({ pathname, token, items, history, subsite }) => {
         {config.settings.isMultilingual &&
           config.settings.supportedLanguages.length > 1 &&
           config.settings.hasLanguageDropdown && (
-            <Header.TopDropdownMenu
-              id="language-switcher"
-              className="item"
-              text={`${language.toUpperCase()}`}
-              mobileText={`${language.toUpperCase()}`}
-              icon={
-                <Image
-                  src={globeIcon}
-                  alt="language dropdown globe icon"
-                ></Image>
-              }
-              viewportWidth={width}
-            >
-              <ul
-                className="wrapper language-list"
-                role="listbox"
-                aria-label="language switcher"
-              >
-                {eea.languages.map((item, index) => (
-                  <Dropdown.Item
-                    as="li"
-                    key={index}
-                    text={
-                      <span>
-                        {item.name}
-                        <span className="country-code">
-                          {item.code.toUpperCase()}
-                        </span>
-                      </span>
-                    }
-                    onClick={() => {
-                      const translation = find(translations, {
-                        language: item.code,
-                      });
-                      const to = translation
-                        ? flattenToAppURL(translation['@id'])
-                        : `/${item.code}`;
-                      setLanguage(item.code);
-                      history.push(to);
-                    }}
-                  ></Dropdown.Item>
-                ))}
-              </ul>
-            </Header.TopDropdownMenu>
+            <LazyLanguageSwitcher width={width} history={history} />
           )}
       </Header.TopHeader>
       <Header.Main
diff --git a/src/customizations/volto/components/theme/Header/Header.test.jsx b/src/customizations/volto/components/theme/Header/Header.test.jsx
index 196599c5..f7bfafef 100644
--- a/src/customizations/volto/components/theme/Header/Header.test.jsx
+++ b/src/customizations/volto/components/theme/Header/Header.test.jsx
@@ -1,19 +1,33 @@
 import React from 'react';
-import renderer from 'react-test-renderer';
-import { render, fireEvent } from '@testing-library/react';
+import { render, fireEvent, getByText } from '@testing-library/react';
+import '@testing-library/jest-dom/extend-expect';
 import configureStore from 'redux-mock-store';
 import { Router } from 'react-router-dom';
 import { createMemoryHistory } from 'history';
 import { Provider } from 'react-intl-redux';
 import config from '@plone/volto/registry';
-
+import { waitFor } from '@testing-library/react';
 import Header from './Header';
 
 const mockStore = configureStore();
 let history = createMemoryHistory();
 
+const item = {
+  '@id': 'en',
+  description: 'Description of item',
+  items: [],
+  review_state: 'published',
+  title: 'Test english article',
+};
+
+jest.mock('@plone/volto/helpers/Loadable/Loadable');
+beforeAll(
+  async () =>
+    await require('@plone/volto/helpers/Loadable/Loadable').__setLoadables(),
+);
+
 describe('Header', () => {
-  it('renders a header component', () => {
+  it('renders a header component with homepage_inverse_view layout', () => {
     const store = mockStore({
       userSession: { token: null },
       intl: {
@@ -21,7 +35,7 @@ describe('Header', () => {
         messages: {},
       },
       navigation: {
-        items: ['en'],
+        items: [item],
       },
       content: {
         data: {
@@ -38,22 +52,23 @@ describe('Header', () => {
     config.settings = {
       ...config.settings,
       eea: {
+        ...config.settings.eea,
         headerOpts: undefined,
+        logoTargetUrl: '/',
       },
     };
 
-    const component = renderer.create(
+    const { container } = render(
       <Provider store={store}>
         <Router history={history}>
           <Header pathname="/home" />
         </Router>
       </Provider>,
     );
-    const json = component.toJSON();
-    expect(json).toMatchSnapshot();
+    expect(container).toMatchSnapshot();
   });
 
-  it('renders a header component', () => {
+  it('renders a header component with homepage_view layout and translations', async () => {
     const store = mockStore({
       userSession: { token: null },
       intl: {
@@ -61,47 +76,7 @@ describe('Header', () => {
         messages: {},
       },
       navigation: {
-        items: ['en'],
-      },
-      content: {
-        data: {
-          layout: 'homepage_inverse_view',
-        },
-      },
-      router: {
-        location: {
-          pathname: '/home/',
-        },
-      },
-    });
-
-    config.settings = {
-      ...config.settings,
-      eea: {
-        headerOpts: {},
-      },
-    };
-
-    const component = renderer.create(
-      <Provider store={store}>
-        <Router history={history}>
-          <Header pathname="/blog" />
-        </Router>
-      </Provider>,
-    );
-    const json = component.toJSON();
-    expect(json).toMatchSnapshot();
-  });
-
-  it('renders a header component', () => {
-    const store = mockStore({
-      userSession: { token: null },
-      intl: {
-        locale: undefined,
-        messages: {},
-      },
-      navigation: {
-        items: ['en'],
+        items: [item],
       },
       content: {
         data: {
@@ -123,6 +98,7 @@ describe('Header', () => {
     config.settings = {
       ...config.settings,
       eea: {
+        ...config.settings.eea,
         headerOpts: {
           partnerLinks: {
             links: [{ href: '/link1', title: 'link 1' }],
@@ -145,6 +121,9 @@ describe('Header', () => {
     );
 
     fireEvent.click(container.querySelector('.content'));
+    await waitFor(() => {
+      expect(container.querySelector('.country-code')).not.toBeNull();
+    });
     fireEvent.keyDown(container.querySelector('.content'), { keyCode: 37 });
     fireEvent.keyDown(container.querySelector('.content a'), { keyCode: 37 });
     fireEvent.keyDown(container.querySelector('a[href="/link1"]'), {
@@ -152,7 +131,7 @@ describe('Header', () => {
     });
     fireEvent.click(container.querySelector('.country-code'));
 
-    // expect(getByText('da')).toBeInTheDocument();
+    expect(getByText(container, 'RO')).toBeInTheDocument();
 
     rerender(
       <Provider store={{ ...store, userSession: { token: '1234' } }}>
@@ -163,15 +142,15 @@ describe('Header', () => {
     );
   });
 
-  it('renders a header component', () => {
+  it('renders a header component with a subsite', async () => {
     const store = mockStore({
       userSession: { token: null },
       intl: {
-        locale: undefined,
+        locale: 'en',
         messages: {},
       },
       navigation: {
-        items: ['en'],
+        items: [item],
       },
       content: {
         data: {
@@ -179,6 +158,7 @@ describe('Header', () => {
           '@components': {
             subsite: {
               '@type': 'Subsite',
+              '@id': 'http://localhost:8080/Plone/subsite',
               title: 'Home Page',
               subsite_logo: {
                 scales: {
@@ -205,6 +185,7 @@ describe('Header', () => {
     config.settings = {
       ...config.settings,
       eea: {
+        ...config.settings.eea,
         headerOpts: {
           partnerLinks: {
             links: [{ href: '/link1', title: 'link 1' }],
@@ -227,6 +208,9 @@ describe('Header', () => {
     );
 
     fireEvent.click(container.querySelector('.content'));
+    await waitFor(() => {
+      expect(container.querySelector('.country-code')).not.toBeNull();
+    });
     fireEvent.keyDown(container.querySelector('.content'), { keyCode: 37 });
     fireEvent.keyDown(container.querySelector('.content a'), { keyCode: 37 });
     fireEvent.keyDown(container.querySelector('a[href="/link1"]'), {
@@ -234,7 +218,7 @@ describe('Header', () => {
     });
     fireEvent.click(container.querySelector('.country-code'));
 
-    // expect(getByText('da')).toBeInTheDocument();
+    expect(getByText(container, 'RO')).toBeInTheDocument();
 
     rerender(
       <Provider store={{ ...store, userSession: { token: '1234' } }}>
@@ -245,17 +229,17 @@ describe('Header', () => {
     );
   });
 
-  it('renders a header component', () => {
+  it('renders a header component with a subsite and two children', async () => {
     const store = mockStore({
       userSession: { token: null },
       intl: {
-        locale: undefined,
+        locale: 'en',
         messages: {},
       },
       navigation: {
         items: [
           { url: '/test1', title: 'test 1', nav_title: 'Test 1', items: [] },
-          { url: undefined, title: 'test 2', items: [] },
+          { url: '/test2', title: 'test 2', items: [] },
         ],
       },
       content: {
@@ -264,6 +248,7 @@ describe('Header', () => {
           '@components': {
             subsite: {
               '@type': 'Subsite',
+              '@id': 'http://localhost:8080/Plone/subsite',
               title: 'Home Page',
               subsite_logo: undefined,
             },
@@ -283,6 +268,7 @@ describe('Header', () => {
     config.settings = {
       ...config.settings,
       eea: {
+        ...config.settings.eea,
         headerOpts: {
           partnerLinks: {
             links: [{ href: '/link1', title: 'link 1' }],
@@ -305,6 +291,9 @@ describe('Header', () => {
     );
 
     fireEvent.click(container.querySelector('.content'));
+    await waitFor(() => {
+      expect(container.querySelector('.country-code')).not.toBeNull();
+    });
     fireEvent.keyDown(container.querySelector('.content'), { keyCode: 37 });
     fireEvent.keyDown(container.querySelector('.content a'), { keyCode: 37 });
     fireEvent.keyDown(container.querySelector('a[href="/link1"]'), {
@@ -313,7 +302,7 @@ describe('Header', () => {
     fireEvent.click(container.querySelector('.country-code'));
     fireEvent.click(container.querySelector('a[href="/test1"]'));
 
-    // expect(getByText('da')).toBeInTheDocument();
+    expect(getByText(container, 'RO')).toBeInTheDocument();
 
     rerender(
       <Provider store={{ ...store, userSession: { token: '1234' } }}>
diff --git a/src/customizations/volto/components/theme/Header/LanguageSwitcher.jsx b/src/customizations/volto/components/theme/Header/LanguageSwitcher.jsx
new file mode 100644
index 00000000..347e4dba
--- /dev/null
+++ b/src/customizations/volto/components/theme/Header/LanguageSwitcher.jsx
@@ -0,0 +1,71 @@
+import React from 'react';
+import { useSelector } from 'react-redux';
+import { Dropdown, Image } from 'semantic-ui-react';
+import { flattenToAppURL } from '@plone/volto/helpers';
+import { find } from 'lodash';
+import globeIcon from '@eeacms/volto-eea-design-system/../theme/themes/eea/assets/images/Header/global-line.svg';
+import config from '@plone/volto/registry';
+import { Header } from '@eeacms/volto-eea-design-system/ui';
+
+/**
+ * LanguageSwitcher component.
+ * Provides a dropdown menu for language selection, changing the application's
+ * language and navigating to the corresponding translated URL.
+ *
+ * @param {Object} props - The component props.
+ * @param {number} props.width - The viewport width to adjust the dropdown display.
+ * @param {Object} props.history - The history object from React Router for navigation.
+ */
+const LanguageSwitcher = ({ width, history }) => {
+  const currentLang = useSelector((state) => state.intl.locale);
+  const translations = useSelector(
+    (state) => state.content.data?.['@components']?.translations?.items,
+  );
+  const { eea } = config.settings;
+
+  const [language, setLanguage] = React.useState(
+    currentLang || eea.defaultLanguage,
+  );
+
+  return (
+    <Header.TopDropdownMenu
+      id="language-switcher"
+      className="item"
+      text={`${language.toUpperCase()}`}
+      mobileText={`${language.toUpperCase()}`}
+      icon={<Image src={globeIcon} alt="language dropdown globe icon"></Image>}
+      viewportWidth={width}
+    >
+      <ul
+        className="wrapper language-list"
+        role="listbox"
+        aria-label="language switcher"
+      >
+        {eea.languages.map((item, index) => (
+          <Dropdown.Item
+            as="li"
+            key={index}
+            text={
+              <span>
+                {item.name}
+                <span className="country-code">{item.code.toUpperCase()}</span>
+              </span>
+            }
+            onClick={() => {
+              const translation = find(translations, {
+                language: item.code,
+              });
+              const to = translation
+                ? flattenToAppURL(translation['@id'])
+                : `/${item.code}`;
+              setLanguage(item.code);
+              history.push(to);
+            }}
+          ></Dropdown.Item>
+        ))}
+      </ul>
+    </Header.TopDropdownMenu>
+  );
+};
+
+export default LanguageSwitcher;
diff --git a/src/customizations/volto/components/theme/Header/__snapshots__/Header.test.jsx.snap b/src/customizations/volto/components/theme/Header/__snapshots__/Header.test.jsx.snap
index 8faead67..05d532b5 100644
--- a/src/customizations/volto/components/theme/Header/__snapshots__/Header.test.jsx.snap
+++ b/src/customizations/volto/components/theme/Header/__snapshots__/Header.test.jsx.snap
@@ -1,309 +1,145 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Header renders a header component 1`] = `
-<header
-  aria-label="Site"
-  className="eea header"
->
-  <div
-    className="top bar"
+exports[`Header renders a header component with homepage_inverse_view layout 1`] = `
+<div>
+  <header
+    aria-label="Site"
+    class="eea header"
   >
     <div
-      className="ui container"
+      class="top bar"
     >
       <div
-        className="item header-top-item official-union"
+        class="ui container"
       >
-        <img
-          alt="European Union flag"
-          className="ui image"
-          src="eea.png"
-        />
         <div
-          aria-expanded={false}
-          aria-label="An official website of the European Union | How do you know?"
-          className="ui dropdown"
-          onBlur={[Function]}
-          onChange={[Function]}
-          onClick={[Function]}
-          onFocus={[Function]}
-          onKeyDown={[Function]}
-          onMouseDown={[Function]}
-          role="listbox"
-          tabIndex={0}
+          class="item header-top-item official-union"
         >
-          <div
-            className="divider text mobile-sr-only"
-          >
-            An official website of the European Union | How do you know?
-          </div>
-          <i
-            aria-hidden="true"
-            className="chevron down icon"
-            onClick={[Function]}
+          <img
+            alt="European Union flag"
+            class="ui image"
+            src="eea.png"
           />
           <div
-            className="menu transition"
-            role="option"
+            aria-expanded="false"
+            aria-label="An official website of the European Union | How do you know?"
+            class="ui dropdown"
+            role="listbox"
+            tabindex="0"
           >
             <div
-              className="content"
-              onClick={[Function]}
-              onKeyDown={[Function]}
-              role="presentation"
-              tabIndex={0}
+              class="divider text mobile-sr-only"
             >
-              <p>
-                All official European Union website addresses are in the
-                 
-                <b>
-                  europa.eu
-                </b>
-                 domain.
-              </p>
-              <a
-                href="https://europa.eu/european-union/contact/institutions-bodies_en"
-                onKeyDown={[Function]}
-                rel="noopener"
-                target="_blank"
-              >
-                See all EU institutions and bodies
-              </a>
+              An official website of the European Union | How do you know?
             </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-  <div
-    className="main bar transparency"
-  >
-    <div
-      className="ui container main-bar-container"
-    >
-      <div
-        className="ui grid"
-      >
-        <div
-          className="four wide computer eight wide mobile eight wide tablet column"
-        >
-          <div>
-            <a
-              className="logo"
-              href=""
-              onClick={[Function]}
-            >
-              <img
-                className="ui image eea-logo"
-              />
-            </a>
-          </div>
-        </div>
-        <div
-          className="eight wide computer four wide mobile four wide tablet column"
-        >
-          <div
-            className="main-menu inverted"
-          >
-            <nav
-              aria-label="Main"
+            <i
+              aria-hidden="true"
+              class="chevron down icon"
+            />
+            <div
+              class="menu transition"
+              role="option"
             >
-              <ul
-                className="ui text eea-main-menu tablet or lower hidden menu"
-                id="navigation"
+              <div
+                class="content"
+                role="presentation"
+                tabindex="0"
               >
-                <li
-                  aria-expanded={false}
-                  className="item"
-                  onClick={[Function]}
+                <p>
+                  All official European Union website addresses are in the
+                   
+                  <b>
+                    europa.eu
+                  </b>
+                   domain.
+                </p>
+                <a
+                  href="https://europa.eu/european-union/contact/institutions-bodies_en"
+                  rel="noopener"
+                  target="_blank"
                 >
-                  <a
-                    href="/"
-                    onClick={[Function]}
-                  />
-                </li>
-              </ul>
-            </nav>
-            <button
-              aria-expanded={false}
-              className="search-action"
-              onClick={[Function]}
-            >
-              <img
-                alt="Global search"
-                className="ui image"
-                src="search-line.svg"
-              />
-            </button>
-            <button
-              aria-expanded={false}
-              className="burger-action mobile "
-              onClick={[Function]}
-            >
-              <img
-                alt="Menu navigation"
-                className="ui image"
-                src="menu-line.svg"
-              />
-            </button>
+                  See all EU institutions and bodies
+                </a>
+              </div>
+            </div>
           </div>
         </div>
       </div>
     </div>
-  </div>
-</header>
-`;
-
-exports[`Header renders a header component 2`] = `
-<header
-  aria-label="Site"
-  className="eea header"
->
-  <div
-    className="top bar"
-  >
     <div
-      className="ui container"
+      class="main bar transparency"
     >
       <div
-        className="item header-top-item official-union"
+        class="ui container main-bar-container"
       >
-        <img
-          alt="European Union flag"
-          className="ui image"
-          src="eea.png"
-        />
         <div
-          aria-expanded={false}
-          aria-label="An official website of the European Union | How do you know?"
-          className="ui dropdown"
-          onBlur={[Function]}
-          onChange={[Function]}
-          onClick={[Function]}
-          onFocus={[Function]}
-          onKeyDown={[Function]}
-          onMouseDown={[Function]}
-          role="listbox"
-          tabIndex={0}
+          class="ui grid"
         >
           <div
-            className="divider text mobile-sr-only"
-          >
-            An official website of the European Union | How do you know?
-          </div>
-          <i
-            aria-hidden="true"
-            className="chevron down icon"
-            onClick={[Function]}
-          />
-          <div
-            className="menu transition"
-            role="option"
+            class="four wide computer eight wide mobile eight wide tablet column"
           >
-            <div
-              className="content"
-              onClick={[Function]}
-              onKeyDown={[Function]}
-              role="presentation"
-              tabIndex={0}
-            >
-              <p>
-                All official European Union website addresses are in the
-                 
-                <b>
-                  europa.eu
-                </b>
-                 domain.
-              </p>
+            <div>
               <a
-                href="https://europa.eu/european-union/contact/institutions-bodies_en"
-                onKeyDown={[Function]}
-                rel="noopener"
-                target="_blank"
+                class="logo"
+                href="/"
               >
-                See all EU institutions and bodies
+                <img
+                  class="ui image eea-logo"
+                />
               </a>
             </div>
           </div>
-        </div>
-      </div>
-    </div>
-  </div>
-  <div
-    className="main bar "
-  >
-    <div
-      className="ui container main-bar-container"
-    >
-      <div
-        className="ui grid"
-      >
-        <div
-          className="four wide computer eight wide mobile eight wide tablet column"
-        >
-          <div>
-            <a
-              className="logo"
-              href=""
-              onClick={[Function]}
-            >
-              <img
-                className="ui image eea-logo"
-              />
-            </a>
-          </div>
-        </div>
-        <div
-          className="eight wide computer four wide mobile four wide tablet column"
-        >
           <div
-            className="main-menu"
+            class="eight wide computer four wide mobile four wide tablet column"
           >
-            <nav
-              aria-label="Main"
+            <div
+              class="main-menu inverted"
             >
-              <ul
-                className="ui text eea-main-menu tablet or lower hidden menu"
-                id="navigation"
+              <nav
+                aria-label="Main"
               >
-                <li
-                  aria-expanded={false}
-                  className="item"
-                  onClick={[Function]}
+                <ul
+                  class="ui text eea-main-menu tablet or lower hidden menu"
+                  id="navigation"
                 >
-                  <a
-                    href="/"
-                    onClick={[Function]}
-                  />
-                </li>
-              </ul>
-            </nav>
-            <button
-              aria-expanded={false}
-              className="search-action"
-              onClick={[Function]}
-            >
-              <img
-                alt="Global search"
-                className="ui image"
-                src="search-line.svg"
-              />
-            </button>
-            <button
-              aria-expanded={false}
-              className="burger-action mobile "
-              onClick={[Function]}
-            >
-              <img
-                alt="Menu navigation"
-                className="ui image"
-                src="menu-line.svg"
-              />
-            </button>
+                  <li
+                    aria-expanded="false"
+                    class="item"
+                  >
+                    <a
+                      href="/"
+                      title="Test english article"
+                    >
+                      Test english article
+                    </a>
+                  </li>
+                </ul>
+              </nav>
+              <button
+                aria-expanded="false"
+                class="search-action"
+              >
+                <img
+                  alt="Global search"
+                  class="ui image"
+                  src="search-line.svg"
+                />
+              </button>
+              <button
+                aria-expanded="false"
+                class="burger-action mobile "
+              >
+                <img
+                  alt="Menu navigation"
+                  class="ui image"
+                  src="menu-line.svg"
+                />
+              </button>
+            </div>
           </div>
         </div>
       </div>
     </div>
-  </div>
-</header>
+  </header>
+</div>
 `;
diff --git a/src/customizations/volto/components/theme/Image/Image.jsx b/src/customizations/volto/components/theme/Image/Image.jsx
new file mode 100644
index 00000000..be5e6409
--- /dev/null
+++ b/src/customizations/volto/components/theme/Image/Image.jsx
@@ -0,0 +1,119 @@
+import PropTypes from 'prop-types';
+import cx from 'classnames';
+import { flattenToAppURL, flattenScales } from '@plone/volto/helpers';
+
+/**
+ * Determines the image scale name based on the provided data.
+ *
+ * @param {object} data - The data object containing the image size information.
+ * @param {string} [data.size] - The size of the image, can be 'l', 'm', or 's'.
+ * @returns {string} The name of the image scale, either 'large', 'preview', or 'mini'.
+ */
+const imageScaleName = (data) => {
+  if (!data) return 'large';
+  if (data.size === 'l') return 'large';
+  if (data.size === 'm') return 'preview';
+  if (data.size === 's') return 'mini';
+  return 'large';
+};
+
+/**
+ * Image component
+ * @param {object} item - Context item that has the image field (can also be a catalog brain or summary)
+ * @param {string} imageField - Key of the image field inside the item, or inside the image_scales object of the item if it is a catalog brain or summary
+ * @param {string} src - URL of the image to be used if the item field is not available
+ * @param {string} alt - Alternative text for the image
+ * @param {boolean} loading - (default: eager) set to `lazy` to lazy load the image
+ * @param {boolean} responsive - (default: false) set to `true` to add the `responsive` class to the image
+ * @param {string} className - Additional classes to add to the image
+ */
+export default function Image({
+  item,
+  imageField,
+  src,
+  alt = '',
+  loading = 'eager',
+  responsive = false,
+  className = '',
+  ...imageProps
+}) {
+  if (!item && !src) return null;
+
+  // TypeScript hints for editor autocomplete :)
+  /** @type {React.ImgHTMLAttributes<HTMLImageElement>} */
+  const attrs = {};
+
+  if (!item && src) {
+    attrs.src = src;
+    attrs.className = cx(className, { responsive });
+  } else {
+    const isFromRealObject = !item.image_scales;
+    const imageFieldWithDefault = imageField || item.image_field || 'image';
+
+    const image = isFromRealObject
+      ? flattenScales(item['@id'], item[imageFieldWithDefault])
+      : flattenScales(
+          item['@id'],
+          item.image_scales[imageFieldWithDefault]?.[0],
+        );
+
+    if (!image) return null;
+
+    const isSvg = image['content-type'] === 'image/svg+xml';
+    // In case `base_path` is present (`preview_image_link`) use it as base path
+    const basePath = image.base_path || item['@id'];
+    const relativeBasePath = flattenToAppURL(basePath);
+    const selectedScale = imageScaleName(item.data);
+
+    attrs.src = `${relativeBasePath}/${image.download}`;
+    attrs.width = image.width;
+    attrs.height = image.height;
+    attrs.className = cx(className, { responsive });
+
+    if (!isSvg && image.scales && Object.keys(image.scales).length > 0) {
+      const filteredScales = [
+        'mini',
+        'preview',
+        'large',
+        item.data?.align === 'full' ? 'huge' : undefined,
+      ]
+        .map((key) => image.scales[key])
+        .filter(Boolean);
+      const imageScale = image.scales[selectedScale];
+      if (imageScale) {
+        // set default image size, width and height to the selected scale
+        attrs.width = imageScale.width;
+        attrs.height = imageScale.height;
+        attrs.src = `${relativeBasePath}/${imageScale.download}`;
+      }
+
+      attrs.srcSet = filteredScales
+        .map((scale) => `${relativeBasePath}/${scale.download} ${scale.width}w`)
+        .join(', ');
+    }
+  }
+
+  if (loading === 'lazy') {
+    attrs.loading = 'lazy';
+    attrs.decoding = 'async';
+  } else {
+    attrs.fetchpriority = 'high';
+  }
+
+  return <img {...attrs} alt={alt} {...imageProps} />;
+}
+
+Image.propTypes = {
+  item: PropTypes.shape({
+    '@id': PropTypes.string,
+    image_field: PropTypes.string,
+    image_scales: PropTypes.object,
+    image: PropTypes.object,
+  }),
+  imageField: PropTypes.string,
+  src: PropTypes.string,
+  alt: PropTypes.string.isRequired,
+  loading: PropTypes.string,
+  responsive: PropTypes.bool,
+  className: PropTypes.string,
+};
diff --git a/src/customizations/volto/components/theme/Image/README.md b/src/customizations/volto/components/theme/Image/README.md
new file mode 100644
index 00000000..487690cc
--- /dev/null
+++ b/src/customizations/volto/components/theme/Image/README.md
@@ -0,0 +1,3 @@
+Customized Image component to restrict the image scales passed to srcset.
+Right now we could select the small size and yet on FHD displays the image served
+would be the huge scale.
diff --git a/src/index.js b/src/index.js
index 049f8229..d0aa5817 100644
--- a/src/index.js
+++ b/src/index.js
@@ -194,6 +194,18 @@ const applyConfig = (config) => {
   if (config.blocks.blocksConfig.image) {
     config.blocks.blocksConfig.image.schemaEnhancer =
       addStylingFieldsetSchemaEnhancerImagePosition;
+    config.blocks.blocksConfig.image.getSizes = function (data) {
+      if (data.size === 'm' || data.size === 's') return undefined;
+
+      if (data.align === 'left' || data.align === 'right') {
+        if (data.size === 'l') return '400px';
+        if (data.size === 'm') return '200px';
+        if (data.size === 's') return '200px';
+      }
+      if (data.size === 'l') {
+        return '(max-width: 600px) 400px, (max-width: 1440px) 800px, 100vw';
+      }
+    };
   }
 
   // Set Languages in nextcloud-video-block