diff --git a/x-pack/plugins/enterprise_search/public/applications/app_search/components/result_settings/result_settings.tsx b/x-pack/plugins/enterprise_search/public/applications/app_search/components/result_settings/result_settings.tsx
index 38db5c60e98a9d..7f4373835f8d52 100644
--- a/x-pack/plugins/enterprise_search/public/applications/app_search/components/result_settings/result_settings.tsx
+++ b/x-pack/plugins/enterprise_search/public/applications/app_search/components/result_settings/result_settings.tsx
@@ -17,6 +17,8 @@ import { SetAppSearchChrome as SetPageChrome } from '../../../shared/kibana_chro
 import { RESULT_SETTINGS_TITLE } from './constants';
 import { ResultSettingsTable } from './result_settings_table';
 
+import { SampleResponse } from './sample_response';
+
 import { ResultSettingsLogic } from '.';
 
 interface Props {
@@ -40,7 +42,7 @@ export const ResultSettings: React.FC<Props> = ({ engineBreadcrumb }) => {
           <ResultSettingsTable />
         </EuiFlexItem>
         <EuiFlexItem grow={3}>
-          <div>TODO</div>
+          <SampleResponse />
         </EuiFlexItem>
       </EuiFlexGroup>
     </>
diff --git a/x-pack/plugins/enterprise_search/public/applications/app_search/components/result_settings/sample_response/index.ts b/x-pack/plugins/enterprise_search/public/applications/app_search/components/result_settings/sample_response/index.ts
new file mode 100644
index 00000000000000..257ad27fe8748a
--- /dev/null
+++ b/x-pack/plugins/enterprise_search/public/applications/app_search/components/result_settings/sample_response/index.ts
@@ -0,0 +1,8 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+export { SampleResponse } from './sample_response';
diff --git a/x-pack/plugins/enterprise_search/public/applications/app_search/components/result_settings/sample_response/sample_response.test.tsx b/x-pack/plugins/enterprise_search/public/applications/app_search/components/result_settings/sample_response/sample_response.test.tsx
new file mode 100644
index 00000000000000..e6449597307182
--- /dev/null
+++ b/x-pack/plugins/enterprise_search/public/applications/app_search/components/result_settings/sample_response/sample_response.test.tsx
@@ -0,0 +1,19 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import React from 'react';
+
+import { shallow } from 'enzyme';
+
+import { SampleResponse } from './sample_response';
+
+describe('SampleResponse', () => {
+  it('renders', () => {
+    const wrapper = shallow(<SampleResponse />);
+    expect(wrapper.isEmptyRender()).toBe(false);
+  });
+});
diff --git a/x-pack/plugins/enterprise_search/public/applications/app_search/components/result_settings/sample_response/sample_response.tsx b/x-pack/plugins/enterprise_search/public/applications/app_search/components/result_settings/sample_response/sample_response.tsx
new file mode 100644
index 00000000000000..e93bf165a5ac03
--- /dev/null
+++ b/x-pack/plugins/enterprise_search/public/applications/app_search/components/result_settings/sample_response/sample_response.tsx
@@ -0,0 +1,102 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import React from 'react';
+
+import {
+  EuiCodeBlock,
+  EuiFieldSearch,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiPanel,
+  EuiSpacer,
+  EuiTitle,
+} from '@elastic/eui';
+import { i18n } from '@kbn/i18n';
+
+export const SampleResponse: React.FC = () => {
+  return (
+    <EuiPanel hasShadow>
+      <EuiFlexGroup alignItems="center">
+        <EuiFlexItem>
+          <EuiTitle size="s">
+            <h3>
+              {i18n.translate(
+                'xpack.enterpriseSearch.appSearch.engine.resultSettings.sampleResponseTitle',
+                { defaultMessage: 'Sample response' }
+              )}
+            </h3>
+          </EuiTitle>
+        </EuiFlexItem>
+        <EuiFlexItem grow={false}>
+          {/* TODO <QueryPerformance queryPerformanceRating={queryPerformanceRating} /> */}
+        </EuiFlexItem>
+      </EuiFlexGroup>
+      <EuiSpacer />
+      <EuiFieldSearch
+        // TODO onChange={(e) => setQuery(e.target.value || '')}
+        placeholder={i18n.translate(
+          'xpack.enterpriseSearch.appSearch.engine.resultSettings.sampleResponse.inputPlaceholder',
+          { defaultMessage: 'Type a search query to test a response...' }
+        )}
+        data-test-subj="ResultSettingsQuerySampleResponse"
+      />
+      <EuiSpacer />
+      <EuiCodeBlock language="json" whiteSpace="pre-wrap">
+        {/* TODO Replace this static content with dynamic content */}
+        {JSON.stringify(
+          {
+            visitors: {
+              raw: 776218,
+            },
+            nps_image_url: {
+              raw:
+                'https://www.nps.gov/common/uploads/banner_image/imr/homepage/9E7FC0DB-1DD8-B71B-0BC3880DC2250415.jpg',
+            },
+            square_km: {
+              raw: 1366.2,
+            },
+            world_heritage_site: {
+              raw: 'false',
+            },
+            date_established: {
+              raw: '1964-09-12T05:00:00+00:00',
+            },
+            image_url: {
+              raw:
+                'https://storage.googleapis.com/public-demo-assets.swiftype.info/swiftype-dot-com-search-ui-national-parks-demo/9E7FC0DB-1DD8-B71B-0BC3880DC2250415.jpg',
+            },
+            description: {
+              raw:
+                'This landscape was eroded into a maze of canyons, buttes, and mesas by the combined efforts of the Colorado River, Green River, and their tributaries, which divide the park into three districts. The park also contains rock pinnacles and arches, as well as artifacts from Ancient Pueblo peoples.',
+            },
+            location: {
+              raw: '38.2,-109.93',
+            },
+            acres: {
+              raw: '337597.83',
+            },
+            title: {
+              raw: 'Canyonlands',
+            },
+            nps_link: {
+              raw: 'https://www.nps.gov/cany/index.htm',
+            },
+            states: {
+              raw: ['Utah'],
+            },
+            id: {
+              raw: 'park_canyonlands',
+            },
+          },
+          null,
+          2
+        )}
+      </EuiCodeBlock>
+    </EuiPanel>
+  );
+};