diff --git a/CHANGELOG.md b/CHANGELOG.md
index 310fa708..4b838f30 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -6,6 +6,8 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/)
 and this project adheres to [Semantic Versioning](http://semver.org/).
 
 ## [Unreleased]
+### Changed
+- Allow showing detail of every example, simplify examples table ([#159](https://github.com/cucumber/react-components/pull/159))
 
 ## [20.0.2] - 2022-04-14
 ### Fixed
diff --git a/src/components/customise/customRendering.tsx b/src/components/customise/customRendering.tsx
index 238f4a18..0ba73420 100644
--- a/src/components/customise/customRendering.tsx
+++ b/src/components/customise/customRendering.tsx
@@ -1,4 +1,5 @@
 import * as messages from '@cucumber/messages'
+import { Pickle, PickleStep } from '@cucumber/messages'
 import React, { useContext } from 'react'
 
 function mixinStyles<Classes>(
@@ -35,14 +36,12 @@ export interface BackgroundProps {
   background: messages.Background
 }
 
-export type BackgroundClasses = Styles<'steps'>
-
 export type ChildrenProps = Record<string, unknown>
 
 export type ChildrenClasses = Styles<'children'>
 
 export interface DataTableProps {
-  dataTable: messages.DataTable
+  dataTable: messages.DataTable | messages.PickleTable
 }
 
 export type DataTableClasses = Styles<'table'>
@@ -54,7 +53,7 @@ export interface DescriptionProps {
 export type DescriptionClasses = Styles<'content'>
 
 export interface DocStringProps {
-  docString: messages.DocString
+  docString: messages.DocString | messages.PickleDocString
 }
 
 export type DocStringClasses = Styles<'docString'>
@@ -74,7 +73,7 @@ export interface ExamplesTableProps {
   tableBody: readonly messages.TableRow[]
 }
 
-export type ExamplesTableClasses = Styles<'examplesTable' | 'detailRow'>
+export type ExamplesTableClasses = Styles<'examplesTable'>
 
 export interface FeatureProps {
   feature: messages.Feature
@@ -87,6 +86,7 @@ export interface GherkinDocumentProps {
 
 export interface GherkinStepProps {
   step: messages.Step
+  pickleStep?: PickleStep
   hasExamples: boolean
 }
 
@@ -100,6 +100,7 @@ export type KeywordClasses = Styles<'keyword'>
 
 export interface ParameterProps {
   parameterTypeName: string
+  value: string
 }
 
 export type ParameterClasses = Styles<'parameter'>
@@ -116,17 +117,16 @@ export interface ScenarioProps {
   scenario: messages.Scenario
 }
 
-export type ScenarioClasses = Styles<'steps'>
-
 export type StatusIconClasses = Styles<'icon'>
 
-export interface StepListProps {
+export interface GherkinStepsProps {
   steps: readonly messages.Step[]
+  pickle?: Pickle
   hasExamples: boolean
 }
 
 export interface TagsProps {
-  tags: readonly messages.Tag[]
+  tags: readonly messages.Tag[] | readonly messages.PickleTag[]
 }
 
 export type TagsClasses = Styles<'tags' | 'tag'>
@@ -159,7 +159,7 @@ export declare type Customised<Props, Classes = Record<string, string>> =
 
 export interface CustomRenderingSupport {
   Anchor?: Customised<AnchorProps, AnchorClasses>
-  Background?: Customised<BackgroundProps, BackgroundClasses>
+  Background?: Customised<BackgroundProps>
   Attachment?: Customised<AttachmentProps, AttachmentClasses>
   Children?: Customised<ChildrenProps, ChildrenClasses>
   DataTable?: Customised<DataTableProps, DataTableClasses>
@@ -171,13 +171,13 @@ export interface CustomRenderingSupport {
   Feature?: Customised<FeatureProps>
   GherkinDocument?: Customised<GherkinDocumentProps>
   GherkinStep?: Customised<GherkinStepProps>
+  GherkinSteps?: Customised<GherkinStepsProps>
   HookStep?: Customised<HookStepProps>
   Keyword?: Customised<unknown, KeywordClasses>
   Parameter?: Customised<ParameterProps, ParameterClasses>
   Rule?: Customised<RuleProps>
-  Scenario?: Customised<ScenarioProps, ScenarioClasses>
+  Scenario?: Customised<ScenarioProps>
   StatusIcon?: Customised<StatusIconProps, StatusIconClasses>
-  StepList?: Customised<StepListProps>
   Tags?: Customised<TagsProps, TagsClasses>
   Title?: Customised<TitleProps, TitleClasses>
 }
diff --git a/src/components/gherkin/Background.tsx b/src/components/gherkin/Background.tsx
index 59ef0a30..4fb948fe 100644
--- a/src/components/gherkin/Background.tsx
+++ b/src/components/gherkin/Background.tsx
@@ -1,21 +1,13 @@
 import React from 'react'
 
-import {
-  BackgroundClasses,
-  BackgroundProps,
-  DefaultComponent,
-  useCustomRendering,
-} from '../customise'
-import defaultStyles from './Background.module.scss'
+import { BackgroundProps, DefaultComponent, useCustomRendering } from '../customise'
 import { Description } from './Description'
+import { GherkinSteps } from './GherkinSteps'
 import { Keyword } from './Keyword'
-import { StepList } from './StepList'
+import { StepsList } from './StepsList'
 import { Title } from './Title'
 
-const DefaultRenderer: DefaultComponent<BackgroundProps, BackgroundClasses> = ({
-  background,
-  styles,
-}) => {
+const DefaultRenderer: DefaultComponent<BackgroundProps> = ({ background }) => {
   return (
     <section>
       <Title header="h2" id={background.id}>
@@ -23,18 +15,14 @@ const DefaultRenderer: DefaultComponent<BackgroundProps, BackgroundClasses> = ({
         <span>{background.name}</span>
       </Title>
       <Description description={background.description} />
-      <ol className={styles.steps}>
-        <StepList steps={background.steps || []} hasExamples={false} />
-      </ol>
+      <StepsList>
+        <GherkinSteps steps={background.steps || []} hasExamples={false} />
+      </StepsList>
     </section>
   )
 }
 
 export const Background: React.FunctionComponent<BackgroundProps> = (props) => {
-  const ResolvedRenderer = useCustomRendering<BackgroundProps, BackgroundClasses>(
-    'Background',
-    defaultStyles,
-    DefaultRenderer
-  )
+  const ResolvedRenderer = useCustomRendering<BackgroundProps>('Background', {}, DefaultRenderer)
   return <ResolvedRenderer {...props} />
 }
diff --git a/src/components/gherkin/DataTable.module.scss b/src/components/gherkin/DataTable.module.scss
index b76d57fd..d1faf7e1 100644
--- a/src/components/gherkin/DataTable.module.scss
+++ b/src/components/gherkin/DataTable.module.scss
@@ -1,41 +1,5 @@
-@import '../../styles/theming';
-
-@mixin cucumber-table-style {
-  border-collapse: collapse;
-  margin: 0;
-
-  thead tr {
-    border-bottom: 6px solid transparent;
-  }
-
-  tr + tr {
-    border-top: 6px solid transparent;
-  }
-
-  th, td {
-    padding: 0.4em 0.6em;
-    border-width: 2px;
-    border-style: solid;
-    border-top: none;
-    border-bottom: none;
-    border-color: $keywordColor;
-    color: $parameterColor;
-  }
-}
+@import '../../styles/tables';
 
 .table {
   @include cucumber-table-style;
 }
-
-.examplesTable {
-  @include cucumber-table-style;
-
-  th:first-child, td:first-child {
-    border-left: none;
-  }
-}
-
-.detailRow.detailRow {
-  border-top: none;
-}
-
diff --git a/src/components/gherkin/DataTable.tsx b/src/components/gherkin/DataTable.tsx
index e8505e5e..2c68f6e4 100644
--- a/src/components/gherkin/DataTable.tsx
+++ b/src/components/gherkin/DataTable.tsx
@@ -12,7 +12,7 @@ import defaultStyles from './DataTable.module.scss'
 import isNumber from './isNumber'
 
 const TableBody: React.FunctionComponent<{
-  rows: readonly messages.TableRow[]
+  rows: readonly messages.TableRow[] | readonly messages.PickleTableRow[]
 }> = ({ rows }) => {
   return (
     <tbody>
diff --git a/src/components/gherkin/ExampleDetail.module.scss b/src/components/gherkin/ExampleDetail.module.scss
new file mode 100644
index 00000000..522edc73
--- /dev/null
+++ b/src/components/gherkin/ExampleDetail.module.scss
@@ -0,0 +1,24 @@
+@import '../../styles/theming';
+
+.backButton {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    background-color: transparent;
+    color: $anchorColor;
+    font-family: inherit;
+    font-size: inherit;
+    padding: 0;
+    border: 0;
+    margin: 0 0 0.5em 0;
+    cursor: pointer;
+
+    &:hover,
+    &:focus {
+        text-decoration: underline;
+    }
+
+    svg {
+        transform: rotate(45deg);
+    }
+}
diff --git a/src/components/gherkin/ExampleDetail.tsx b/src/components/gherkin/ExampleDetail.tsx
new file mode 100644
index 00000000..1bffbb41
--- /dev/null
+++ b/src/components/gherkin/ExampleDetail.tsx
@@ -0,0 +1,50 @@
+import { Pickle, Scenario } from '@cucumber/messages'
+import { faArrowLeft } from '@fortawesome/free-solid-svg-icons'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import React, { useContext, VoidFunctionComponent } from 'react'
+
+import CucumberQueryContext from '../../CucumberQueryContext'
+import GherkinQueryContext from '../../GherkinQueryContext'
+import { HighLight } from '../app/HighLight'
+import { Description } from './Description'
+import styles from './ExampleDetail.module.scss'
+import { GherkinSteps } from './GherkinSteps'
+import { HookSteps } from './HookSteps'
+import { Keyword } from './Keyword'
+import { StepsList } from './StepsList'
+import { Tags } from './Tags'
+import { Title } from './Title'
+
+export const ExampleDetail: VoidFunctionComponent<{
+  scenario: Scenario
+  pickleId: string
+  onBack: () => void
+}> = ({ scenario, pickleId, onBack }) => {
+  const gherkinQuery = useContext(GherkinQueryContext)
+  const cucumberQuery = useContext(CucumberQueryContext)
+  const pickle: Pickle = gherkinQuery.getPickles().find((item) => item.id === pickleId) as Pickle
+  const beforeHooks = cucumberQuery.getBeforeHookSteps(pickleId)
+  const afterHooks = cucumberQuery.getAfterHookSteps(pickleId)
+  const examplesCount = scenario.examples.flatMap((examples) => examples.tableBody).length
+  return (
+    <>
+      <button className={styles.backButton} onClick={onBack}>
+        <FontAwesomeIcon icon={faArrowLeft} />
+        Back to outline and all {examplesCount} examples
+      </button>
+      <section>
+        <Tags tags={pickle.tags} />
+        <Title header="h2" id={scenario.id}>
+          <Keyword>Example:</Keyword>
+          <HighLight text={pickle.name} />
+        </Title>
+        <Description description={scenario.description} />
+        <StepsList>
+          <HookSteps hookSteps={beforeHooks} />
+          <GherkinSteps steps={scenario.steps || []} pickle={pickle} hasExamples={false} />
+          <HookSteps hookSteps={afterHooks} />
+        </StepsList>
+      </section>
+    </>
+  )
+}
diff --git a/src/components/gherkin/ExamplesContext.ts b/src/components/gherkin/ExamplesContext.ts
new file mode 100644
index 00000000..00a2128a
--- /dev/null
+++ b/src/components/gherkin/ExamplesContext.ts
@@ -0,0 +1,7 @@
+import { createContext } from 'react'
+
+export const ExamplesContext = createContext<{
+  setSelectedExample: (pickleId?: string) => void
+}>({
+  setSelectedExample: () => undefined,
+})
diff --git a/src/components/gherkin/ExamplesTable.module.scss b/src/components/gherkin/ExamplesTable.module.scss
new file mode 100644
index 00000000..9efbcaf9
--- /dev/null
+++ b/src/components/gherkin/ExamplesTable.module.scss
@@ -0,0 +1,14 @@
+@import '../../styles/theming';
+@import '../../styles/tables';
+
+.examplesTable {
+    @include cucumber-table-style;
+
+    th:first-child, td:first-child {
+        border-left: none;
+    }
+
+    tbody tr {
+        cursor: pointer;
+    }
+}
diff --git a/src/components/gherkin/ExamplesTable.tsx b/src/components/gherkin/ExamplesTable.tsx
index 29154432..af2368a4 100644
--- a/src/components/gherkin/ExamplesTable.tsx
+++ b/src/components/gherkin/ExamplesTable.tsx
@@ -1,6 +1,6 @@
 import * as messages from '@cucumber/messages'
 import { getWorstTestStepResult } from '@cucumber/messages'
-import React from 'react'
+import React, { useContext } from 'react'
 
 import CucumberQueryContext from '../../CucumberQueryContext'
 import GherkinQueryContext from '../../GherkinQueryContext'
@@ -11,9 +11,8 @@ import {
   ExamplesTableProps,
   useCustomRendering,
 } from '../customise'
-import { Attachment } from './Attachment'
-import defaultStyles from './DataTable.module.scss'
-import { ErrorMessage } from './ErrorMessage'
+import { ExamplesContext } from './ExamplesContext'
+import defaultStyles from './ExamplesTable.module.scss'
 import isNumber from './isNumber'
 import { StatusIcon } from './StatusIcon'
 
@@ -32,7 +31,11 @@ const DefaultRenderer: DefaultComponent<ExamplesTableProps, ExamplesTableClasses
           ))}
         </tr>
       </thead>
-      <ExamplesTableBody rows={tableBody || []} detailClass={styles.detailRow} />
+      <tbody>
+        {tableBody.map((row, i) => (
+          <ExampleRow row={row} key={i} />
+        ))}
+      </tbody>
     </table>
   )
 }
@@ -46,35 +49,19 @@ export const ExamplesTable: React.FunctionComponent<ExamplesTableProps> = (props
   return <ResolvedRenderer {...props} />
 }
 
-const ExamplesTableBody: React.FunctionComponent<{
-  rows: readonly messages.TableRow[]
-  detailClass?: string
-}> = ({ rows, detailClass }) => {
-  return (
-    <tbody>
-      {rows.map((row, i) => (
-        <RowOrRows row={row} key={i} detailClass={detailClass} />
-      ))}
-    </tbody>
-  )
-}
-
-const RowOrRows: React.FunctionComponent<{
+const ExampleRow: React.FunctionComponent<{
   row: messages.TableRow
-  detailClass?: string
-}> = ({ row, detailClass }) => {
-  const gherkinQuery = React.useContext(GherkinQueryContext)
-  const cucumberQuery = React.useContext(CucumberQueryContext)
-  const uri = React.useContext(UriContext)
+}> = ({ row }) => {
+  const gherkinQuery = useContext(GherkinQueryContext)
+  const cucumberQuery = useContext(CucumberQueryContext)
+  const uri = useContext(UriContext)
+  const { setSelectedExample } = useContext(ExamplesContext)
   const pickleIds = uri ? gherkinQuery.getPickleIds(uri, row.id) : []
   const testStepResult = getWorstTestStepResult(cucumberQuery.getPickleTestStepResults(pickleIds))
 
-  const pickleStepIds = gherkinQuery.getPickleStepIds(row.id)
-  const attachments = cucumberQuery.getPickleStepAttachments(pickleStepIds)
-
   return (
     <>
-      <tr>
+      <tr onClick={() => setSelectedExample(pickleIds[0])}>
         <td>
           <StatusIcon status={testStepResult.status} />
         </td>
@@ -84,40 +71,6 @@ const RowOrRows: React.FunctionComponent<{
           </td>
         ))}
       </tr>
-      <AttachmentAndErrorRow
-        key="row-error"
-        className={detailClass}
-        attachments={attachments}
-        errorMessage={testStepResult.message}
-        colSpan={row.cells.length}
-      />
     </>
   )
 }
-
-interface IAttachmentAndErrorRowProps {
-  attachments: readonly messages.Attachment[]
-  errorMessage: string | undefined
-  colSpan: number
-  className?: string
-}
-
-const AttachmentAndErrorRow: React.FunctionComponent<IAttachmentAndErrorRowProps> = ({
-  attachments,
-  errorMessage,
-  colSpan,
-  className,
-}) => {
-  if (!errorMessage && attachments.length === 0) return null
-  return (
-    <tr className={className}>
-      <td>&nbsp;</td>
-      <td colSpan={colSpan}>
-        {errorMessage && <ErrorMessage message={errorMessage} />}
-        {attachments.map((attachment, i) => (
-          <Attachment key={i} attachment={attachment} />
-        ))}
-      </td>
-    </tr>
-  )
-}
diff --git a/src/components/gherkin/GherkinStep.tsx b/src/components/gherkin/GherkinStep.tsx
index b6ba019e..6862816a 100644
--- a/src/components/gherkin/GherkinStep.tsx
+++ b/src/components/gherkin/GherkinStep.tsx
@@ -1,4 +1,12 @@
-import { getWorstTestStepResult } from '@cucumber/messages'
+import {
+  DataTable,
+  DocString,
+  getWorstTestStepResult,
+  PickleDocString,
+  PickleStep,
+  PickleTable,
+  Step,
+} from '@cucumber/messages'
 import React from 'react'
 
 import CucumberQueryContext from '../../CucumberQueryContext'
@@ -6,19 +14,43 @@ import GherkinQueryContext from '../../GherkinQueryContext'
 import { HighLight } from '../app/HighLight'
 import { DefaultComponent, GherkinStepProps, useCustomRendering } from '../customise'
 import { Attachment } from './Attachment'
-import { DataTable } from './DataTable'
-import { DocString } from './DocString'
+import { DataTable as DataTableComponent } from './DataTable'
+import { DocString as DocStringComponent } from './DocString'
 import { ErrorMessage } from './ErrorMessage'
 import { Keyword } from './Keyword'
 import { Parameter } from './Parameter'
 import { StepItem } from './StepItem'
 import { Title } from './Title'
 
-const DefaultRenderer: DefaultComponent<GherkinStepProps> = ({ step, hasExamples }) => {
+interface RenderableStep {
+  id: string
+  keyword: string
+  text: string
+  dataTable?: DataTable | PickleTable
+  docString?: DocString | PickleDocString
+}
+
+function resolveStep(gherkinStep: Step, pickleStep?: PickleStep): RenderableStep {
+  const step: RenderableStep = { ...gherkinStep }
+  if (pickleStep) {
+    step.text = pickleStep.text
+    step.dataTable = pickleStep.argument?.dataTable
+    step.docString = pickleStep.argument?.docString
+  }
+  return step
+}
+
+const DefaultRenderer: DefaultComponent<GherkinStepProps> = ({
+  step: gherkinStep,
+  pickleStep,
+  hasExamples,
+}) => {
+  const step = resolveStep(gherkinStep, pickleStep)
+
   const gherkinQuery = React.useContext(GherkinQueryContext)
   const cucumberQuery = React.useContext(CucumberQueryContext)
 
-  const pickleStepIds = gherkinQuery.getPickleStepIds(step.id)
+  const pickleStepIds = pickleStep ? [pickleStep.id] : gherkinQuery.getPickleStepIds(step.id)
   const pickleStepTestStepResults = cucumberQuery.getPickleStepTestStepResults(pickleStepIds)
   const testStepResult = getWorstTestStepResult(pickleStepTestStepResults)
   const attachments = cucumberQuery.getPickleStepAttachments(pickleStepIds)
@@ -50,6 +82,7 @@ const DefaultRenderer: DefaultComponent<GherkinStepProps> = ({ step, hasExamples
             stepTextElements.push(
               <Parameter
                 parameterTypeName={argument.parameterTypeName || 'anonymous'}
+                value={arg}
                 key={`param-${index}`}
               >
                 <HighLight text={arg} />
@@ -81,8 +114,8 @@ const DefaultRenderer: DefaultComponent<GherkinStepProps> = ({ step, hasExamples
         <Keyword>{step.keyword.trim()}</Keyword>
         <span>{stepTextElements}</span>
       </Title>
-      {step.dataTable && <DataTable dataTable={step.dataTable} />}
-      {step.docString && <DocString docString={step.docString} />}
+      {step.dataTable && <DataTableComponent dataTable={step.dataTable} />}
+      {step.docString && <DocStringComponent docString={step.docString} />}
       {!hasExamples && testStepResult.message && <ErrorMessage message={testStepResult.message} />}
       {!hasExamples &&
         attachments.map((attachment, i) => <Attachment key={i} attachment={attachment} />)}
diff --git a/src/components/gherkin/GherkinSteps.tsx b/src/components/gherkin/GherkinSteps.tsx
new file mode 100644
index 00000000..12d2d1cf
--- /dev/null
+++ b/src/components/gherkin/GherkinSteps.tsx
@@ -0,0 +1,33 @@
+import React from 'react'
+
+import { DefaultComponent, GherkinStepsProps, useCustomRendering } from '../customise'
+import { GherkinStep } from './GherkinStep'
+
+const DefaultRenderer: DefaultComponent<GherkinStepsProps> = ({ steps, pickle, hasExamples }) => {
+  return (
+    <>
+      {steps.map((step, index) => {
+        const pickleStep = pickle?.steps.find((item) => item.astNodeIds.includes(step.id))
+        return (
+          <li key={index}>
+            <GherkinStep
+              key={index}
+              step={step}
+              pickleStep={pickleStep}
+              hasExamples={hasExamples}
+            />
+          </li>
+        )
+      })}
+    </>
+  )
+}
+
+export const GherkinSteps: React.FunctionComponent<GherkinStepsProps> = (props) => {
+  const ResolvedRenderer = useCustomRendering<GherkinStepsProps>(
+    'GherkinSteps',
+    {},
+    DefaultRenderer
+  )
+  return <ResolvedRenderer {...props} />
+}
diff --git a/src/components/gherkin/HookList.tsx b/src/components/gherkin/HookSteps.tsx
similarity index 81%
rename from src/components/gherkin/HookList.tsx
rename to src/components/gherkin/HookSteps.tsx
index b6f85b62..6a01bab9 100644
--- a/src/components/gherkin/HookList.tsx
+++ b/src/components/gherkin/HookSteps.tsx
@@ -7,7 +7,7 @@ interface IProps {
   hookSteps: readonly messages.TestStep[]
 }
 
-export const HookList: React.FunctionComponent<IProps> = ({ hookSteps }) => {
+export const HookSteps: React.FunctionComponent<IProps> = ({ hookSteps }) => {
   return (
     <>
       {hookSteps.map((step, index) => (
diff --git a/src/components/gherkin/Parameter.tsx b/src/components/gherkin/Parameter.tsx
index 48855ce4..4c50f77e 100644
--- a/src/components/gherkin/Parameter.tsx
+++ b/src/components/gherkin/Parameter.tsx
@@ -10,11 +10,12 @@ import defaultStyles from './Parameter.module.scss'
 
 const DefaultRenderer: DefaultComponent<ParameterProps, ParameterClasses> = ({
   parameterTypeName,
+  value,
   children,
   styles,
 }) => {
   return (
-    <span title={parameterTypeName} className={styles.parameter}>
+    <span title={parameterTypeName} aria-label={value} className={styles.parameter}>
       {children}
     </span>
   )
diff --git a/src/components/gherkin/Scenario.module.scss b/src/components/gherkin/Scenario.module.scss
deleted file mode 100644
index 83491b93..00000000
--- a/src/components/gherkin/Scenario.module.scss
+++ /dev/null
@@ -1,12 +0,0 @@
-.steps {
-  padding: 0;
-  margin: 1em;
-
-  > li {
-    list-style: none;
-  }
-
-  > li + li {
-    margin-top: 0.25em;
-  }
-}
diff --git a/src/components/gherkin/Scenario.spec.tsx b/src/components/gherkin/Scenario.spec.tsx
new file mode 100644
index 00000000..3bc67c0b
--- /dev/null
+++ b/src/components/gherkin/Scenario.spec.tsx
@@ -0,0 +1,109 @@
+import { Envelope, GherkinDocument } from '@cucumber/messages'
+import { screen, within } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import React from 'react'
+
+import examplesTables from '../../../acceptance/examples-tables/examples-tables.feature'
+import { render } from '../../../test-utils'
+import UriContext from '../../UriContext'
+import { EnvelopesWrapper } from '../app/EnvelopesWrapper'
+import { Scenario } from './Scenario'
+
+describe('<Scenario/>', () => {
+  const getStatus = (element: HTMLElement) =>
+    within(element).getAllByRole('img', { hidden: true })[0].dataset.status
+
+  describe('with examples', () => {
+    const envelopes: Envelope[] = examplesTables as Envelope[]
+    const gherkinDocument: GherkinDocument = envelopes.find((env) => env.gherkinDocument)!
+      .gherkinDocument as GherkinDocument
+    const uri = gherkinDocument.uri!
+    const scenario = gherkinDocument.feature!.children[0].scenario!
+
+    beforeEach(() => {
+      render(
+        <EnvelopesWrapper envelopes={envelopes}>
+          <UriContext.Provider value={uri}>
+            <Scenario scenario={scenario} />
+          </UriContext.Provider>
+        </EnvelopesWrapper>
+      )
+    })
+
+    it('should render the outline with worst result for each step', () => {
+      expect(
+        screen.getByRole('heading', { name: 'Scenario Outline: eating cucumbers' })
+      ).toBeVisible()
+      expect(
+        screen.getByRole('heading', { name: 'Given there are <start> cucumbers' })
+      ).toBeVisible()
+      expect(screen.getByRole('heading', { name: 'When I eat <eat> cucumbers' })).toBeVisible()
+      expect(
+        screen.getByRole('heading', { name: 'Then I should have <left> cucumbers' })
+      ).toBeVisible()
+      const [step1, step2, step3] = screen.getAllByRole('listitem')
+      expect(getStatus(step1)).toEqual('PASSED')
+      expect(getStatus(step2)).toEqual('UNDEFINED')
+      expect(getStatus(step3)).toEqual('FAILED')
+    })
+
+    it('should render the results for individual examples - all passed', () => {
+      userEvent.click(within(screen.getAllByRole('table')[0]).getAllByRole('row')[1])
+
+      expect(screen.getByText('@passing')).toBeVisible()
+      expect(screen.getByRole('heading', { name: 'Example: eating cucumbers' })).toBeVisible()
+      expect(screen.getByRole('heading', { name: 'Given there are 12 cucumbers' })).toBeVisible()
+      expect(screen.getByRole('heading', { name: 'When I eat 5 cucumbers' })).toBeVisible()
+      expect(screen.getByRole('heading', { name: 'Then I should have 7 cucumbers' })).toBeVisible()
+      const [step1, step2, step3] = within(
+        screen.getByRole('list', { name: 'Steps' })
+      ).getAllByRole('listitem')
+      expect(getStatus(step1)).toEqual('PASSED')
+      expect(getStatus(step2)).toEqual('PASSED')
+      expect(getStatus(step3)).toEqual('PASSED')
+    })
+
+    it('should render the results for individual examples - one failed', () => {
+      userEvent.click(within(screen.getAllByRole('table')[1]).getAllByRole('row')[1])
+
+      expect(screen.getByText('@failing')).toBeVisible()
+      expect(screen.getByRole('heading', { name: 'Example: eating cucumbers' })).toBeVisible()
+      expect(screen.getByRole('heading', { name: 'Given there are 12 cucumbers' })).toBeVisible()
+      expect(screen.getByRole('heading', { name: 'When I eat 20 cucumbers' })).toBeVisible()
+      expect(screen.getByRole('heading', { name: 'Then I should have 0 cucumbers' })).toBeVisible()
+      const [step1, step2, step3] = within(
+        screen.getByRole('list', { name: 'Steps' })
+      ).getAllByRole('listitem')
+      expect(getStatus(step1)).toEqual('PASSED')
+      expect(getStatus(step2)).toEqual('PASSED')
+      expect(getStatus(step3)).toEqual('FAILED')
+      expect(screen.getByText(/Expected values to be strictly equal/)).toBeVisible()
+    })
+
+    it('should render the results for individual examples - undefined', () => {
+      userEvent.click(within(screen.getAllByRole('table')[2]).getAllByRole('row')[1])
+
+      expect(screen.getByText('@undefined')).toBeVisible()
+      expect(screen.getByRole('heading', { name: 'Example: eating cucumbers' })).toBeVisible()
+      expect(screen.getByRole('heading', { name: 'Given there are 12 cucumbers' })).toBeVisible()
+      expect(screen.getByRole('heading', { name: 'When I eat banana cucumbers' })).toBeVisible()
+      expect(screen.getByRole('heading', { name: 'Then I should have 12 cucumbers' })).toBeVisible()
+      const [step1, step2, step3] = within(
+        screen.getByRole('list', { name: 'Steps' })
+      ).getAllByRole('listitem')
+      expect(getStatus(step1)).toEqual('PASSED')
+      expect(getStatus(step2)).toEqual('UNDEFINED')
+      expect(getStatus(step3)).toEqual('SKIPPED')
+    })
+
+    it('should allow returning to the outline from an example detail', () => {
+      userEvent.click(within(screen.getAllByRole('table')[0]).getAllByRole('row')[1])
+      expect(screen.getByRole('heading', { name: 'Example: eating cucumbers' })).toBeVisible()
+
+      userEvent.click(screen.getByRole('button', { name: 'Back to outline and all 6 examples' }))
+      expect(
+        screen.getByRole('heading', { name: 'Scenario Outline: eating cucumbers' })
+      ).toBeVisible()
+    })
+  })
+})
diff --git a/src/components/gherkin/Scenario.tsx b/src/components/gherkin/Scenario.tsx
index c330c0a5..1902052a 100644
--- a/src/components/gherkin/Scenario.tsx
+++ b/src/components/gherkin/Scenario.tsx
@@ -1,32 +1,41 @@
-import React from 'react'
+import React, { useState } from 'react'
 
 import CucumberQueryContext from '../../CucumberQueryContext'
 import GherkinQueryContext from '../../GherkinQueryContext'
 import UriContext from '../../UriContext'
 import { HighLight } from '../app/HighLight'
-import { DefaultComponent, ScenarioClasses, ScenarioProps, useCustomRendering } from '../customise'
+import { DefaultComponent, ScenarioProps, useCustomRendering } from '../customise'
 import { Description } from './Description'
+import { ExampleDetail } from './ExampleDetail'
 import { Examples } from './Examples'
-import { HookList } from './HookList'
+import { ExamplesContext } from './ExamplesContext'
+import { GherkinSteps } from './GherkinSteps'
+import { HookSteps } from './HookSteps'
 import { Keyword } from './Keyword'
-import defaultStyles from './Scenario.module.scss'
-import { StepList } from './StepList'
+import { StepsList } from './StepsList'
 import { Tags } from './Tags'
 import { Title } from './Title'
 
-const DefaultRenderer: DefaultComponent<ScenarioProps, ScenarioClasses> = ({
-  scenario,
-  styles,
-}) => {
+const DefaultRenderer: DefaultComponent<ScenarioProps> = ({ scenario }) => {
   const examplesList = scenario.examples || []
   const hasExamples = examplesList.length > 0
   const cucumberQuery = React.useContext(CucumberQueryContext)
   const gherkinQuery = React.useContext(GherkinQueryContext)
   const uri = React.useContext(UriContext)
+  const [selectedExample, setSelectedExample] = useState<string>()
   const pickleIds = uri ? gherkinQuery.getPickleIds(uri, scenario.id) : []
   const beforeHooks = cucumberQuery.getBeforeHookSteps(pickleIds[0])
   const afterHooks = cucumberQuery.getAfterHookSteps(pickleIds[0])
 
+  if (selectedExample) {
+    return (
+      <ExampleDetail
+        scenario={scenario}
+        pickleId={selectedExample}
+        onBack={() => setSelectedExample(undefined)}
+      />
+    )
+  }
   return (
     <section>
       <Tags tags={scenario.tags} />
@@ -35,24 +44,23 @@ const DefaultRenderer: DefaultComponent<ScenarioProps, ScenarioClasses> = ({
         <HighLight text={scenario.name} />
       </Title>
       <Description description={scenario.description} />
-      <ol className={styles.steps}>
-        <HookList hookSteps={beforeHooks} />
-        <StepList steps={scenario.steps || []} hasExamples={hasExamples} />
-        <HookList hookSteps={afterHooks} />
-      </ol>
-
-      {examplesList.map((examples, index) => {
-        return <Examples key={index} examples={examples} />
-      })}
+      <StepsList>
+        <HookSteps hookSteps={beforeHooks} />
+        <GherkinSteps steps={scenario.steps || []} hasExamples={hasExamples} />
+        <HookSteps hookSteps={afterHooks} />
+      </StepsList>
+      {hasExamples && (
+        <ExamplesContext.Provider value={{ setSelectedExample }}>
+          {examplesList.map((examples, index) => (
+            <Examples key={index} examples={examples} />
+          ))}
+        </ExamplesContext.Provider>
+      )}
     </section>
   )
 }
 
 export const Scenario: React.FunctionComponent<ScenarioProps> = (props) => {
-  const ResolvedRenderer = useCustomRendering<ScenarioProps, ScenarioClasses>(
-    'Scenario',
-    defaultStyles,
-    DefaultRenderer
-  )
+  const ResolvedRenderer = useCustomRendering<ScenarioProps>('Scenario', {}, DefaultRenderer)
   return <ResolvedRenderer {...props} />
 }
diff --git a/src/components/gherkin/StepItem.tsx b/src/components/gherkin/StepItem.tsx
index 8c845d3a..bb59d3b3 100644
--- a/src/components/gherkin/StepItem.tsx
+++ b/src/components/gherkin/StepItem.tsx
@@ -14,5 +14,3 @@ export const StepItem: React.FunctionComponent<{
     </div>
   )
 }
-
-export default StepItem
diff --git a/src/components/gherkin/StepList.tsx b/src/components/gherkin/StepList.tsx
deleted file mode 100644
index 0e274835..00000000
--- a/src/components/gherkin/StepList.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-import React from 'react'
-
-import { DefaultComponent, StepListProps, useCustomRendering } from '../customise'
-import { GherkinStep } from './GherkinStep'
-
-const DefaultRenderer: DefaultComponent<StepListProps> = ({ steps, hasExamples }) => {
-  return (
-    <>
-      {steps.map((step, index) => (
-        <li key={index}>
-          <GherkinStep key={index} step={step} hasExamples={hasExamples} />
-        </li>
-      ))}
-    </>
-  )
-}
-
-export const StepList: React.FunctionComponent<StepListProps> = (props) => {
-  const ResolvedRenderer = useCustomRendering<StepListProps>('StepList', {}, DefaultRenderer)
-  return <ResolvedRenderer {...props} />
-}
diff --git a/src/components/gherkin/Background.module.scss b/src/components/gherkin/StepsList.module.scss
similarity index 100%
rename from src/components/gherkin/Background.module.scss
rename to src/components/gherkin/StepsList.module.scss
diff --git a/src/components/gherkin/StepsList.tsx b/src/components/gherkin/StepsList.tsx
new file mode 100644
index 00000000..bc7db932
--- /dev/null
+++ b/src/components/gherkin/StepsList.tsx
@@ -0,0 +1,11 @@
+import React, { FunctionComponent } from 'react'
+
+import styles from './StepsList.module.scss'
+
+export const StepsList: FunctionComponent = ({ children }) => {
+  return (
+    <ol aria-label="Steps" className={styles.steps}>
+      {children}
+    </ol>
+  )
+}
diff --git a/src/components/gherkin/Tags.tsx b/src/components/gherkin/Tags.tsx
index 4f0eb9f3..ef4e0d56 100644
--- a/src/components/gherkin/Tags.tsx
+++ b/src/components/gherkin/Tags.tsx
@@ -9,7 +9,7 @@ const DefaultRenderer: DefaultComponent<TagsProps, TagsClasses> = ({ tags, style
     return null
   }
   return (
-    <ul className={styles.tags}>
+    <ul aria-label="Tags" className={styles.tags}>
       {tags.map((tag, index) => (
         <li className={styles.tag} key={index}>
           <HighLight text={tag.name} />
diff --git a/src/components/gherkin/__snapshots__/GherkinStep.spec.tsx.snap b/src/components/gherkin/__snapshots__/GherkinStep.spec.tsx.snap
index 23b82657..41334b42 100644
--- a/src/components/gherkin/__snapshots__/GherkinStep.spec.tsx.snap
+++ b/src/components/gherkin/__snapshots__/GherkinStep.spec.tsx.snap
@@ -62,6 +62,7 @@ exports[`<GherkinStep> renders 1`] = `
               the 
             </span>
             <span
+              aria-label="48"
               title="anonymous"
             >
               <span
diff --git a/src/components/gherkin/__snapshots__/Tags.spec.tsx.snap b/src/components/gherkin/__snapshots__/Tags.spec.tsx.snap
index ed62704a..bdcba3b1 100644
--- a/src/components/gherkin/__snapshots__/Tags.spec.tsx.snap
+++ b/src/components/gherkin/__snapshots__/Tags.spec.tsx.snap
@@ -2,7 +2,9 @@
 
 exports[`Tags renders if we really have some tags 1`] = `
 <DocumentFragment>
-  <ul>
+  <ul
+    aria-label="Tags"
+  >
     <li>
       <span
         class="highlight"
diff --git a/src/components/gherkin/index.ts b/src/components/gherkin/index.ts
index c5913389..d51d15c3 100644
--- a/src/components/gherkin/index.ts
+++ b/src/components/gherkin/index.ts
@@ -11,8 +11,9 @@ export * from './ExamplesTable'
 export * from './Feature'
 export * from './GherkinDocument'
 export * from './GherkinStep'
-export * from './HookList'
+export * from './GherkinSteps'
 export * from './HookStep'
+export * from './HookSteps'
 export * from './Keyword'
 export * from './MDG'
 export * from './Parameter'
@@ -20,6 +21,5 @@ export * from './Rule'
 export * from './Scenario'
 export * from './StatusIcon'
 export * from './StepItem'
-export * from './StepList'
 export * from './Tags'
 export * from './Title'
diff --git a/src/styles/tables.scss b/src/styles/tables.scss
new file mode 100644
index 00000000..de0cb171
--- /dev/null
+++ b/src/styles/tables.scss
@@ -0,0 +1,24 @@
+@import './theming';
+
+@mixin cucumber-table-style {
+    border-collapse: collapse;
+    margin: 0;
+
+    thead tr {
+        border-bottom: 6px solid transparent;
+    }
+
+    tr + tr {
+        border-top: 6px solid transparent;
+    }
+
+    th, td {
+        padding: 0.4em 0.6em;
+        border-width: 2px;
+        border-style: solid;
+        border-top: none;
+        border-bottom: none;
+        border-color: $keywordColor;
+        color: $parameterColor;
+    }
+}