diff --git a/CHANGELOG.md b/CHANGELOG.md
index 753049e1..49cded68 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -4,8 +4,16 @@ All notable changes to this project will be documented in this file. Dates are d
 
 Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
+#### [0.3.1](https://github.com/eea/volto-eea-website-theme/compare/0.3.0...0.3.1)
+
+- feat(banner): add banner header [`#14`](https://github.com/eea/volto-eea-website-theme/pull/14)
+- change(accordion): use remix icons for accordion title [`95df1c2`](https://github.com/eea/volto-eea-website-theme/commit/95df1c286ed474877c842f069e153e0e22410f08)
+
 #### [0.3.0](https://github.com/eea/volto-eea-website-theme/compare/0.2.0...0.3.0)
 
+> 11 March 2022
+
+- Release [`#12`](https://github.com/eea/volto-eea-website-theme/pull/12)
 - [Feature #147188] comments design according to EEA Design System [`#13`](https://github.com/eea/volto-eea-website-theme/pull/13)
 - Use inPageNavigation component from design-system [`#11`](https://github.com/eea/volto-eea-website-theme/pull/11)
 - remove uneeded import [`69c8a24`](https://github.com/eea/volto-eea-website-theme/commit/69c8a2475dd0e4cfb0c319be6ba03882373abe56)
diff --git a/package.json b/package.json
index 8bb40834..d5d88df0 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-eea-website-theme",
-  "version": "0.3.0",
+  "version": "0.3.1",
   "description": "@eeacms/volto-eea-website-theme: Volto add-on",
   "main": "src/index.js",
   "author": "European Environment Agency: IDM2 A-Team",
diff --git a/src/components/theme/Banner.jsx b/src/components/theme/Banner.jsx
new file mode 100644
index 00000000..598b3444
--- /dev/null
+++ b/src/components/theme/Banner.jsx
@@ -0,0 +1,166 @@
+import React, { useMemo } from 'react';
+import { compose } from 'redux';
+import { connect } from 'react-redux';
+import { Container, Icon, Button, Grid } from 'semantic-ui-react';
+import { Toast } from '@plone/volto/components';
+import { injectLazyLibs } from '@plone/volto/helpers/Loadable/Loadable';
+
+const notifyUser = (content, toast) => {
+  return toast.info(<Toast info title="Bookmark page" content={content} />, {
+    autoClose: 5000,
+  });
+};
+
+const addBookmark = (url, title, toast) => {
+  if (!url && window) {
+    url = window.location;
+  }
+  if (!title && document) {
+    title = document.title;
+  }
+  let browser = navigator.userAgent.toLowerCase();
+  if (window.sidebar && window.sidebar.addPanel) {
+    // Mozilla, Firefox, Netscape
+    window.sidebar.addPanel(title, url, '');
+  } else if (window.external) {
+    // IE or chrome
+    if (browser.indexOf('chrome') === -1 && window.external.AddFavorite) {
+      // ie
+      window.external.AddFavorite(url, title);
+    } else {
+      // chrome
+      notifyUser(
+        'Please Press CTRL+D (or Command+D for macs) to bookmark this page',
+        toast,
+      );
+    }
+  } else if (window.opera && window.print) {
+    // Opera - automatically adds to sidebar if rel=sidebar in the tag
+    return true;
+  } else if (browser.indexOf('konqueror') !== -1) {
+    // Konqueror
+    notifyUser('Please press CTRL+B to bookmark this page.', toast);
+  } else if (browser.indexOf('webkit') !== -1) {
+    // safari
+    notifyUser(
+      'Please press CTRL+B (or Command+D for macs) to bookmark this page.',
+      toast,
+    );
+  } else {
+    notifyUser(
+      'Your browser cannot add bookmarks using this link. Please add this link manually.',
+      toast,
+    );
+  }
+};
+
+const Banner = ({ content, moment, toastify }) => {
+  const image = content.image;
+  const publishingDate = useMemo(
+    () => (content['effective'] ? moment.default(content['effective']) : null),
+    [content, moment],
+  );
+  const modificationDate = useMemo(
+    () => (content['modified'] ? moment.default(content['modified']) : null),
+    [content, moment],
+  );
+
+  return (
+    <div className="eea banner">
+      <div
+        className="image"
+        style={image ? { backgroundImage: `url(${image.download})` } : {}}
+      ></div>
+      <div className="gradient">
+        <Container>
+          <Banner.Content
+            actions={
+              <>
+                <Banner.Action
+                  icon="bookmark outline"
+                  title="Bookmark"
+                  className="bookmark"
+                  onClick={() => {
+                    addBookmark(
+                      content['@id'],
+                      content['title'],
+                      toastify.toast,
+                    );
+                  }}
+                />
+                <Banner.Action
+                  icon="download"
+                  title="Download"
+                  className="download"
+                  onClick={() => {
+                    window.print();
+                  }}
+                />
+              </>
+            }
+          >
+            <Banner.Title>{content['title']}</Banner.Title>
+            <Banner.Metadata>
+              <span>{content['@type']} | </span>
+              {publishingDate && (
+                <span
+                  title={`Published on ${publishingDate.format(
+                    'dddd, MMMM Do YYYY, h:mm:ss a',
+                  )}`}
+                >
+                  {publishingDate.format('ddd hA')} |{' '}
+                </span>
+              )}
+              {modificationDate && (
+                <span
+                  title={`Modified on ${modificationDate.format(
+                    'dddd, MMMM Do YYYY, h:mm:ss a',
+                  )}`}
+                >
+                  {modificationDate.format('ddd hA')} |{' '}
+                </span>
+              )}
+              <span>5 min read</span>
+            </Banner.Metadata>
+          </Banner.Content>
+        </Container>
+      </div>
+    </div>
+  );
+};
+
+Banner.Action = function ({ id, title, icon, onClick, className }) {
+  return (
+    <div className="action">
+      <Button className={className} basic inverted onClick={onClick}>
+        <Icon name={icon}></Icon>
+        <span className="mobile hidden">{title}</span>
+      </Button>
+    </div>
+  );
+};
+
+Banner.Content = ({ children, actions }) => {
+  return (
+    <div className="content">
+      <Grid>
+        <Grid.Column mobile={10} tablet={9} computer={9}>
+          {children}
+        </Grid.Column>
+        <Grid.Column mobile={2} tablet={3} computer={3} className="actions">
+          {actions}
+        </Grid.Column>
+      </Grid>
+    </div>
+  );
+};
+
+Banner.Title = ({ children }) => <p className="title">{children}</p>;
+Banner.Metadata = ({ children }) => <p className="metadata">{children}</p>;
+
+export default compose(
+  injectLazyLibs(['toastify', 'moment']),
+  connect((state) => ({
+    content: state.content.data,
+  })),
+)(Banner);
diff --git a/src/customizations/volto/components/theme/Breadcrumbs/Breadcrumbs.jsx b/src/customizations/volto/components/theme/Breadcrumbs/Breadcrumbs.jsx
index 750c2bfe..fbce4fc6 100644
--- a/src/customizations/volto/components/theme/Breadcrumbs/Breadcrumbs.jsx
+++ b/src/customizations/volto/components/theme/Breadcrumbs/Breadcrumbs.jsx
@@ -8,11 +8,13 @@ import { useDispatch, useSelector } from 'react-redux';
 
 import { getBaseUrl, hasApiExpander } from '@plone/volto/helpers';
 import { getBreadcrumbs } from '@plone/volto/actions';
-import EEABreadcrumbs from '@eeacms/volto-eea-design-system/ui/Breadcrumbs/Breadcrumbs.jsx';
+import EEABreadcrumbs from '@eeacms/volto-eea-design-system/ui/Breadcrumbs/Breadcrumbs';
+import Banner from '@eeacms/volto-eea-website-theme/components/theme/Banner';
 
-const Breadcrumbs = ({ pathname }) => {
+const Breadcrumbs = (props) => {
   const dispatch = useDispatch();
   const { items = [], root = '/' } = useSelector((state) => state?.breadcrumbs);
+  const { pathname } = props;
 
   const sections = items.map((item) => ({
     title: item.title,
@@ -27,12 +29,15 @@ const Breadcrumbs = ({ pathname }) => {
   }, [dispatch, pathname]);
 
   return (
-    <EEABreadcrumbs
-      pathname={pathname}
-      sections={sections}
-      root={root}
-      icon="right chevron"
-    />
+    <>
+      <EEABreadcrumbs
+        pathname={pathname}
+        sections={sections}
+        root={root}
+        icon="right chevron"
+      />
+      <Banner {...props} />
+    </>
   );
 };
 
diff --git a/src/index.js b/src/index.js
index 28a5aacd..27ac3c75 100644
--- a/src/index.js
+++ b/src/index.js
@@ -9,7 +9,7 @@ const applyConfig = (config) => {
 
   // Apply accordion block customization
   if (config.blocks.blocksConfig.accordion) {
-    config.blocks.blocksConfig.accordion.semanticIcon = 'dropdown';
+    config.blocks.blocksConfig.accordion.semanticIcon = 'ri-arrow-down-s-line';
   }
   // apply inPage navigation
   config.settings.appExtras = [