diff --git a/packages/core/src/layout/ContentHeader/ContentHeader.js b/packages/core/src/layout/ContentHeader/ContentHeader.js
deleted file mode 100644
index dac44354a4..0000000000
--- a/packages/core/src/layout/ContentHeader/ContentHeader.js
+++ /dev/null
@@ -1,102 +0,0 @@
-/*
- * Copyright 2020 Spotify AB
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-import React, { Component, Fragment } from 'react';
-import { Typography, withStyles } from '@material-ui/core';
-import Helmet from 'react-helmet';
-// import FavoriteButton from 'shared/components/layout/FavoriteButton';
-
-const styles = theme => ({
-  container: {
-    width: '100%',
-    display: 'flex',
-    flexDirection: 'row',
-    flexWrap: 'wrap',
-    justifyContent: 'flex-end',
-    alignItems: 'center',
-  },
-  leftItemsBox: {
-    flex: '1 1 auto',
-    marginBottom: theme.spacing(1),
-    minWidth: 0,
-    overflow: 'visible',
-  },
-  rightItemsBox: {
-    flex: '0 1 auto',
-    display: 'flex',
-    flexDirection: 'row',
-    flexWrap: 'wrap',
-    alignItems: 'center',
-    marginLeft: theme.spacing(1),
-    marginBottom: theme.spacing(1),
-    minWidth: 0,
-    overflow: 'visible',
-  },
-  description: {},
-  title: {
-    display: 'inline-flex',
-  },
-});
-
-class ContentHeader extends Component {
-  static defaultProps = {
-    favoriteable: true,
-    title: 'Unknown page',
-    titleComponent: undefined,
-  };
-
-  render() {
-    const {
-      title,
-      description,
-      /* favoriteable,*/ children,
-      classes,
-    } = this.props;
-    const TitleComponent = this.props.titleComponent;
-    const renderedTitle =
-      TitleComponent !== undefined ? (
-        <TitleComponent />
-      ) : (
-        <Typography
-          variant="h4"
-          className={classes.title}
-          data-testid="header-title"
-        >
-          {title}
-        </Typography>
-      );
-
-    return (
-      <Fragment>
-        <Helmet title={title} />
-        <div className={classes.container}>
-          <div className={classes.leftItemsBox}>
-            {renderedTitle}
-            {/* favoriteable && <FavoriteButton /> */}
-            {description && (
-              <Typography className={classes.description} variant="body2">
-                {description}
-              </Typography>
-            )}
-          </div>
-          <div className={classes.rightItemsBox}>{children}</div>
-        </div>
-      </Fragment>
-    );
-  }
-}
-
-export default withStyles(styles)(ContentHeader);
diff --git a/packages/core/src/layout/ContentHeader/ContentHeader.test.tsx b/packages/core/src/layout/ContentHeader/ContentHeader.test.tsx
new file mode 100644
index 0000000000..50b4f921ac
--- /dev/null
+++ b/packages/core/src/layout/ContentHeader/ContentHeader.test.tsx
@@ -0,0 +1,49 @@
+/*
+ * Copyright 2020 Spotify AB
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React from 'react';
+import { render } from '@testing-library/react';
+import ContentHeader from './ContentHeader';
+import { wrapInThemedTestApp } from '../../testUtils';
+
+jest.mock('react-helmet', () => {
+  return ({ defaultTitle }) => <div>defaultTitle: {defaultTitle}</div>;
+});
+
+describe('<ContentHeader/>', () => {
+  it('should render with title', () => {
+    const rendered = render(
+      wrapInThemedTestApp(<ContentHeader title="Title" />),
+    );
+    rendered.getByText('Title');
+  });
+
+  it('should render with titleComponent', () => {
+    const title = 'Custom title';
+    const titleComponent = () => <h1>{title}</h1>;
+    const rendered = render(
+      wrapInThemedTestApp(<ContentHeader titleComponent={titleComponent} />),
+    );
+    rendered.getByText(title);
+  });
+
+  it('should render with description', () => {
+    const rendered = render(
+      wrapInThemedTestApp(<ContentHeader description="description" />),
+    );
+    rendered.getByText('description');
+  });
+});
diff --git a/packages/core/src/layout/ContentHeader/ContentHeader.tsx b/packages/core/src/layout/ContentHeader/ContentHeader.tsx
new file mode 100644
index 0000000000..0f83f54c25
--- /dev/null
+++ b/packages/core/src/layout/ContentHeader/ContentHeader.tsx
@@ -0,0 +1,109 @@
+/*
+ * Copyright 2020 Spotify AB
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/**
+ * TODO favoriteable capability
+ */
+
+import React, { ComponentType, Fragment, FC } from 'react';
+import { Typography, makeStyles } from '@material-ui/core';
+import Helmet from 'react-helmet';
+import { BackstageTheme } from '../../theme/theme';
+
+const useStyles = makeStyles<BackstageTheme>(theme => ({
+  container: {
+    width: '100%',
+    display: 'flex',
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+    justifyContent: 'flex-end',
+    alignItems: 'center',
+  },
+  leftItemsBox: {
+    flex: '1 1 auto',
+    marginBottom: theme.spacing(1),
+    minWidth: 0,
+    overflow: 'visible',
+  },
+  rightItemsBox: {
+    flex: '0 1 auto',
+    display: 'flex',
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+    alignItems: 'center',
+    marginLeft: theme.spacing(1),
+    marginBottom: theme.spacing(1),
+    minWidth: 0,
+    overflow: 'visible',
+  },
+  description: {},
+  title: {
+    display: 'inline-flex',
+  },
+}));
+
+type DefaultTitleProps = {
+  title?: string;
+  className: string;
+};
+
+const DefaultTitle: FC<DefaultTitleProps> = ({
+  title = 'Unknown page',
+  className,
+}) => (
+  <Typography variant="h4" className={className} data-testid="header-title">
+    {title}
+  </Typography>
+);
+
+type ContentHeaderProps = {
+  title?: DefaultTitleProps['title'];
+  titleComponent?: ComponentType;
+  description?: string;
+};
+
+const ContentHeader: FC<ContentHeaderProps> = ({
+  description,
+  title,
+  titleComponent: TitleComponent = undefined,
+  children,
+}) => {
+  const classes = useStyles();
+
+  const renderedTitle = TitleComponent ? (
+    <TitleComponent />
+  ) : (
+    <DefaultTitle title={title} className={classes.title} />
+  );
+  return (
+    <Fragment>
+      <Helmet title={title} />
+      <div className={classes.container}>
+        <div className={classes.leftItemsBox}>
+          {renderedTitle}
+          {description && (
+            <Typography className={classes.description} variant="body2">
+              {description}
+            </Typography>
+          )}
+        </div>
+        <div className={classes.rightItemsBox}>{children}</div>
+      </div>
+    </Fragment>
+  );
+};
+
+export default ContentHeader;