diff --git a/CHANGELOG.md b/CHANGELOG.md
index 1214d55a..e308623e 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -12,6 +12,7 @@ and this project adheres to [Semantic Versioning](http://semver.org/).
 ### Added
 - Include duration for each test step ([#396](https://github.com/cucumber/react-components/pull/396))
 - Include pass rate in execution summary ([#397](https://github.com/cucumber/react-components/pull/397))
+- Add new `<Report/>` component ([#410](https://github.com/cucumber/react-components/pull/410))
 
 ### Changed
 - Render a more test case-centric report ([#396](https://github.com/cucumber/react-components/pull/396))
diff --git a/src/components/app/Report.module.scss b/src/components/app/Report.module.scss
new file mode 100644
index 00000000..d414738c
--- /dev/null
+++ b/src/components/app/Report.module.scss
@@ -0,0 +1,5 @@
+.layout {
+  > section:not(:last-child) {
+    margin-bottom: 1.5em;
+  }
+}
diff --git a/src/components/app/Report.stories.tsx b/src/components/app/Report.stories.tsx
new file mode 100644
index 00000000..835c98c8
--- /dev/null
+++ b/src/components/app/Report.stories.tsx
@@ -0,0 +1,37 @@
+import { Envelope } from '@cucumber/messages'
+import { Story } from '@ladle/react'
+import React from 'react'
+
+import examplesTablesSample from '../../../acceptance/examples-tables/examples-tables.js'
+import globalHooksSample from '../../../acceptance/global-hooks/global-hooks.js'
+import { EnvelopesProvider } from './EnvelopesProvider.js'
+import { InMemorySearchProvider } from './InMemorySearchProvider.js'
+import { Report } from './Report.js'
+
+type TemplateArgs = {
+  envelopes: readonly Envelope[]
+}
+
+const Template: Story<TemplateArgs> = ({ envelopes }) => {
+  return (
+    <EnvelopesProvider envelopes={envelopes}>
+      <InMemorySearchProvider>
+        <Report />
+      </InMemorySearchProvider>
+    </EnvelopesProvider>
+  )
+}
+
+export default {
+  title: 'App/Report',
+}
+
+export const Default = Template.bind({})
+Default.args = {
+  envelopes: examplesTablesSample,
+} as TemplateArgs
+
+export const WithGlobalHooks = Template.bind({})
+WithGlobalHooks.args = {
+  envelopes: globalHooksSample,
+} as TemplateArgs
diff --git a/src/components/app/Report.tsx b/src/components/app/Report.tsx
new file mode 100644
index 00000000..f7f5d7d4
--- /dev/null
+++ b/src/components/app/Report.tsx
@@ -0,0 +1,20 @@
+import React, { FC } from 'react'
+
+import { ExecutionSummary } from './ExecutionSummary.js'
+import { FilteredDocuments } from './FilteredDocuments.js'
+import styles from './Report.module.scss'
+import { SearchBar } from './SearchBar.js'
+
+export const Report: FC = () => {
+  return (
+    <article className={styles.layout}>
+      <section>
+        <ExecutionSummary />
+        <SearchBar />
+      </section>
+      <section>
+        <FilteredDocuments />
+      </section>
+    </article>
+  )
+}
diff --git a/src/components/app/index.ts b/src/components/app/index.ts
index bae27ae0..69014e14 100644
--- a/src/components/app/index.ts
+++ b/src/components/app/index.ts
@@ -8,6 +8,7 @@ export * from './HighLight.js'
 export * from './InMemorySearchProvider.js'
 export * from './NoMatchResult.js'
 export * from './QueriesProvider.js'
+export * from './Report.js'
 export * from './SearchBar.js'
 export * from './StatusesSummary.js'
 export * from './UrlSearchProvider.js'