diff --git a/news/4767.bugfix b/news/4767.bugfix
new file mode 100644
index 0000000000..d0e63b937f
--- /dev/null
+++ b/news/4767.bugfix
@@ -0,0 +1 @@
+Convert header class to function. @gomez
diff --git a/src/components/theme/Header/Header.jsx b/src/components/theme/Header/Header.jsx
index 491f92d2ca..2cda868be9 100644
--- a/src/components/theme/Header/Header.jsx
+++ b/src/components/theme/Header/Header.jsx
@@ -1,12 +1,6 @@
-/**
- * Header component.
- * @module components/theme/Header/Header
- */
-
-import React, { Component } from 'react';
 import { Container, Segment } from 'semantic-ui-react';
 import PropTypes from 'prop-types';
-import { connect } from 'react-redux';
+import { useToken } from '@plone/volto/hooks/userSession/useToken';
 
 import {
   Anontools,
@@ -16,65 +10,45 @@ import {
   SearchWidget,
 } from '@plone/volto/components';
 
-/**
- * Header component class.
- * @class Header
- * @extends Component
- */
-class Header extends Component {
-  /**
-   * Property types.
-   * @property {Object} propTypes Property types.
-   * @static
-   */
-  static propTypes = {
-    token: PropTypes.string,
-    pathname: PropTypes.string.isRequired,
-  };
-
-  /**
-   * Default properties.
-   * @property {Object} defaultProps Default properties.
-   * @static
-   */
-  static defaultProps = {
-    token: null,
-  };
+const Header = ({ pathname }) => {
+  const token = useToken();
 
-  /**
-   * Render method.
-   * @method render
-   * @returns {string} Markup for the component.
-   */
-  render() {
-    return (
-      <Segment basic className="header-wrapper" role="banner">
-        <Container>
-          <div className="header">
-            <div className="logo-nav-wrapper">
-              <div className="logo">
-                <Logo />
-              </div>
-              <Navigation pathname={this.props.pathname} />
+  return (
+    <Segment basic className="header-wrapper" role="banner">
+      <Container>
+        <div className="header">
+          <div className="logo-nav-wrapper">
+            <div className="logo">
+              <Logo />
             </div>
-            <div className="tools-search-wrapper">
-              <LanguageSelector />
-              {!this.props.token && (
-                <div className="tools">
-                  <Anontools />
-                </div>
-              )}
-              <div className="search">
-                <SearchWidget />
+            <Navigation pathname={pathname} />
+          </div>
+          <div className="tools-search-wrapper">
+            <LanguageSelector />
+            {!token && (
+              <div className="tools">
+                <Anontools />
               </div>
+            )}
+            <div className="search">
+              <SearchWidget />
             </div>
           </div>
-        </Container>
-      </Segment>
-    );
-  }
-}
+        </div>
+      </Container>
+    </Segment>
+  );
+};
+
+export default Header;
+
+Header.propTypes = {
+  token: PropTypes.string,
+  pathname: PropTypes.string.isRequired,
+  content: PropTypes.objectOf(PropTypes.any),
+};
 
-export default connect((state) => ({
-  token: state.userSession.token,
-}))(Header);
+Header.defaultProps = {
+  token: null,
+  content: null,
+};
diff --git a/src/components/theme/Header/Header.md b/src/components/theme/Header/Header.md
deleted file mode 100644
index b097be635d..0000000000
--- a/src/components/theme/Header/Header.md
+++ /dev/null
@@ -1,27 +0,0 @@
-Header example:
-
-```jsx static
-<Header pathname="" />
-```
-
-Output:
-
-```jsx noeditor
-const { Provider } = require('react-intl-redux');
-const configureStore = require('redux-mock-store').default;
-const store = configureStore()({
-  userSession: {
-    login: {},
-  },
-  intl: {
-    locale: 'en',
-    messages: {},
-  },
-});
-
-<div className={'rsg--pre-42'}>
-  <Provider store={store}>
-    <Header pathname="" />
-  </Provider>
-</div>;
-```
diff --git a/src/components/theme/Header/Header.test.jsx b/src/components/theme/Header/Header.test.jsx
index 8002a8cbba..4144f673bc 100644
--- a/src/components/theme/Header/Header.test.jsx
+++ b/src/components/theme/Header/Header.test.jsx
@@ -39,4 +39,22 @@ describe('Header', () => {
     const json = component.toJSON();
     expect(json).toMatchSnapshot();
   });
+
+  it('renders a header component - auth', () => {
+    const store = mockStore({
+      userSession: { token: '1234567890' },
+      intl: {
+        locale: 'en',
+        messages: {},
+      },
+    });
+
+    const component = renderer.create(
+      <Provider store={store}>
+        <Header pathname="/blog" />
+      </Provider>,
+    );
+    const json = component.toJSON();
+    expect(json).toMatchSnapshot();
+  });
 });
diff --git a/src/components/theme/Header/__snapshots__/Header.test.jsx.snap b/src/components/theme/Header/__snapshots__/Header.test.jsx.snap
index 5cd7084418..43c47d0a58 100644
--- a/src/components/theme/Header/__snapshots__/Header.test.jsx.snap
+++ b/src/components/theme/Header/__snapshots__/Header.test.jsx.snap
@@ -1,5 +1,49 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`Header renders a header component - auth 1`] = `
+<div
+  className="ui basic segment header-wrapper"
+  role="banner"
+>
+  <div
+    className="ui container"
+  >
+    <div
+      className="header"
+    >
+      <div
+        className="logo-nav-wrapper"
+      >
+        <div
+          className="logo"
+        >
+          <div
+            id="logo"
+          />
+        </div>
+        <div
+          id="navigation"
+        />
+      </div>
+      <div
+        className="tools-search-wrapper"
+      >
+        <div
+          id="language-selector"
+        />
+        <div
+          className="search"
+        >
+          <div
+            id="searchwidget"
+          />
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
 exports[`Header renders a header component 1`] = `
 <div
   className="ui basic segment header-wrapper"
diff --git a/src/hooks/userSession/useToken.js b/src/hooks/userSession/useToken.js
new file mode 100644
index 0000000000..2d7d350f8d
--- /dev/null
+++ b/src/hooks/userSession/useToken.js
@@ -0,0 +1,5 @@
+import { useSelector, shallowEqual } from 'react-redux';
+
+export function useToken() {
+  return useSelector((state) => state.userSession.token, shallowEqual);
+}