diff --git a/src/components/HeroSection/HeroSection.css b/src/components/HeroSection/HeroSection.css
new file mode 100644
index 00000000..783564e2
--- /dev/null
+++ b/src/components/HeroSection/HeroSection.css
@@ -0,0 +1,37 @@
+.section {
+  width: 100%;
+  min-height: calc(100vh - 80px);
+  background-image: url('http://placehold.it/700x300');
+  background-size: cover;
+  background-position: center;
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.content {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.titleWrapper {
+  text-align: center;
+}
+
+.title {
+  font-size: 2em;
+}
+.subTitle {
+  font-size: 1em;
+}
+
+.ctaWrapper {
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+  align-items: center;
+  width: 90vw;
+}
+
diff --git a/src/components/HeroSection/HeroSection.js b/src/components/HeroSection/HeroSection.js
new file mode 100644
index 00000000..e830d48a
--- /dev/null
+++ b/src/components/HeroSection/HeroSection.js
@@ -0,0 +1,32 @@
+import React, { PropTypes } from 'react';
+import { FormattedMessage } from 'react-intl';
+import css from './HeroSection.css';
+
+const HeroSection = props => (
+  <section className={css.section}>
+    <div className={css.content}>
+      <div className={css.titleWrapper}>
+        <div className={css.title}>
+          <FormattedMessage id={'HeroSection.title'} defaultMessage={'Book Studiotime anywhere'} />
+        </div>
+        <div className={css.subTitle}>
+          <FormattedMessage
+            id={'HeroSection.subTitle'}
+            defaultMessage={'The largest online community to rent music studios'}
+          />
+        </div>
+      </div>
+      <div className={css.ctaWrapper}>
+        {props.children}
+      </div>
+    </div>
+  </section>
+);
+
+HeroSection.defaultProps = { children: [] };
+
+const { any } = PropTypes;
+
+HeroSection.propTypes = { children: any };
+
+export default HeroSection;
diff --git a/src/components/HeroSection/HeroSection.test.js b/src/components/HeroSection/HeroSection.test.js
new file mode 100644
index 00000000..e1ab55f1
--- /dev/null
+++ b/src/components/HeroSection/HeroSection.test.js
@@ -0,0 +1,20 @@
+import React from 'react';
+import renderer from 'react-test-renderer';
+import { TestProvider } from '../../util/test-helpers';
+import HeroSection from './HeroSection';
+
+describe('HeroSection', () => {
+  it('matches snapshot', () => {
+    const component = renderer.create(
+      (
+        <TestProvider>
+          <HeroSection params={{ displayName: 'most-awesome-shop' }}>
+            test
+          </HeroSection>
+        </TestProvider>
+      ),
+    );
+    const tree = component.toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+});
diff --git a/src/components/HeroSection/__snapshots__/HeroSection.test.js.snap b/src/components/HeroSection/__snapshots__/HeroSection.test.js.snap
new file mode 100644
index 00000000..4c13bbdd
--- /dev/null
+++ b/src/components/HeroSection/__snapshots__/HeroSection.test.js.snap
@@ -0,0 +1,27 @@
+exports[`HeroSection matches snapshot 1`] = `
+<section
+  className={undefined}>
+  <div
+    className={undefined}>
+    <div
+      className={undefined}>
+      <div
+        className={undefined}>
+        <span>
+          Book Studiotime anywhere
+        </span>
+      </div>
+      <div
+        className={undefined}>
+        <span>
+          The largest online community to rent music studios
+        </span>
+      </div>
+    </div>
+    <div
+      className={undefined}>
+      test
+    </div>
+  </div>
+</section>
+`;
diff --git a/src/components/index.js b/src/components/index.js
index 6629c16f..9314cb18 100644
--- a/src/components/index.js
+++ b/src/components/index.js
@@ -1,6 +1,7 @@
+import HeroSection from './HeroSection/HeroSection';
 import NamedLink from './NamedLink/NamedLink';
 import PageLayout from './PageLayout/PageLayout';
 import RouterProvider from './RouterProvider/RouterProvider';
 import RoutesProvider from './RoutesProvider/RoutesProvider';
 
-export { NamedLink, PageLayout, RouterProvider, RoutesProvider };
+export { HeroSection, NamedLink, PageLayout, RouterProvider, RoutesProvider };
diff --git a/src/translations/en.json b/src/translations/en.json
index e8eb922f..8669a5c4 100644
--- a/src/translations/en.json
+++ b/src/translations/en.json
@@ -1,3 +1,5 @@
 {
-  "landingpage.examplelink": "Show nice studios! (from json)"
+  "landingpage.examplelink": "Show nice studios! (from json)",
+  "HeroSection.title": "Book Studiotime anywhere",
+  "HeroSection.subTitle": "The largest online community to rent music studios"
 }