diff --git a/public/components/QueryResults/QueryResults.test.tsx b/public/components/QueryResults/QueryResults.test.tsx
index 336bf0a8..d712dbdd 100644
--- a/public/components/QueryResults/QueryResults.test.tsx
+++ b/public/components/QueryResults/QueryResults.test.tsx
@@ -3,20 +3,20 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-
-import React from "react";
-import "regenerator-runtime";
-import "mutationobserver-shim";
-import "@testing-library/jest-dom/extend-expect";
-import { render, fireEvent, configure } from "@testing-library/react";
-import { mockQueryResults, mockQueries } from "../../../test/mocks/mockData";
-import { MESSAGE_TAB_LABEL } from "../../utils/constants";
-import QueryResults from "./QueryResults";
-import { Tab, ItemIdToExpandedRowMap, ResponseDetail, QueryResult } from "../Main/main";
+import React from 'react';
+import 'regenerator-runtime';
+import 'mutationobserver-shim';
+import '@testing-library/jest-dom/extend-expect';
+import { render, fireEvent, configure } from '@testing-library/react';
+import { mockQueryResults, mockQueries } from '../../../test/mocks/mockData';
+import { MESSAGE_TAB_LABEL } from '../../utils/constants';
+import QueryResults from './QueryResults';
+import { Tab, ItemIdToExpandedRowMap, ResponseDetail, QueryResult } from '../Main/main';
 
 configure({ testIdAttribute: 'data-test-subj' });
 
-function renderSQLQueryResults(mockQueryResults: ResponseDetail<QueryResult>[],
+function renderSQLQueryResults(
+  mockQueryResults: ResponseDetail<QueryResult>[],
   mockQueries: string[] = [],
   mockSearchQuery: string = '',
   onSelectedTabIdChange: (tab: Tab) => void,
@@ -26,12 +26,12 @@ function renderSQLQueryResults(mockQueryResults: ResponseDetail<QueryResult>[],
   getJdbc: (queries: string[]) => void,
   getCsv: (queries: string[]) => void,
   getText: (queries: string[]) => void,
-  setIsResultFullScreen: (isFullScreen: boolean) => void) {
-
+  setIsResultFullScreen: (isFullScreen: boolean) => void
+) {
   return {
     ...render(
       <QueryResults
-        language='SQL'
+        language="SQL"
         queries={mockQueries}
         queryResults={mockQueryResults}
         queryResultsJDBC={''}
@@ -53,23 +53,27 @@ function renderSQLQueryResults(mockQueryResults: ResponseDetail<QueryResult>[],
         getText={getText}
         isResultFullScreen={false}
         setIsResultFullScreen={setIsResultFullScreen}
+        asyncLoadingStatus="SUCCESS"
+        asyncQueryError=""
+        selectedDatasource={[{ label: 'OpenSearch' }]}
+        cancelAsyncQuery={() => {}}
       />
     ),
   };
 }
 
-describe("<QueryResults /> spec", () => {
-  it("renders the component with no data", async () => {
-    (window as any).HTMLElement.prototype.scrollBy = function () { };
+describe('<QueryResults /> spec', () => {
+  it('renders the component with no data', async () => {
+    (window as any).HTMLElement.prototype.scrollBy = function () {};
     expect(document.body.children[0]).toMatchSnapshot();
   });
 });
 
-describe("<QueryResults with data/> spec", () => {
+describe('<QueryResults with data/> spec', () => {
   const onSelectedTabIdChange = jest.fn();
   const onQueryChange = jest.fn();
   const updateExpandedMap = jest.fn();
-  const mockSearchQuery = "";
+  const mockSearchQuery = '';
   const getRawResponse = jest.fn();
   const getJdbc = jest.fn();
   const getCsv = jest.fn();
@@ -77,10 +81,26 @@ describe("<QueryResults with data/> spec", () => {
   const setIsResultFullScreen = jest.fn();
   (window as any).HTMLElement.prototype.scrollBy = jest.fn();
 
-  it("renders the component with mock query results", async () => {
-    const { getAllByRole, getByText, getAllByText, getAllByTestId, getAllByLabelText } =
-      renderSQLQueryResults(mockQueryResults, mockQueries, mockSearchQuery, onSelectedTabIdChange, onQueryChange,
-        updateExpandedMap, getRawResponse, getJdbc, getCsv, getText, setIsResultFullScreen);
+  it('renders the component with mock query results', async () => {
+    const {
+      getAllByRole,
+      getByText,
+      getAllByText,
+      getAllByTestId,
+      getAllByLabelText,
+    } = renderSQLQueryResults(
+      mockQueryResults,
+      mockQueries,
+      mockSearchQuery,
+      onSelectedTabIdChange,
+      onQueryChange,
+      updateExpandedMap,
+      getRawResponse,
+      getJdbc,
+      getCsv,
+      getText,
+      setIsResultFullScreen
+    );
 
     expect(document.body.children[0]).toMatchSnapshot();
 
@@ -101,16 +121,27 @@ describe("<QueryResults with data/> spec", () => {
     // It tests pagination
     await fireEvent.click(getAllByLabelText('Page 2 of 2')[0]);
     await fireEvent.click(getAllByText('Rows per page', { exact: false })[0]);
-    expect(getByText("10 rows"));
-    expect(getByText("20 rows"));
-    expect(getByText("50 rows"));
-    expect(getByText("100 rows"));
-    await fireEvent.click(getByText("20 rows"));
+    expect(getByText('10 rows'));
+    expect(getByText('20 rows'));
+    expect(getByText('50 rows'));
+    expect(getByText('100 rows'));
+    await fireEvent.click(getByText('20 rows'));
   });
 
-  it("renders the component to test tabs down arrow", async () => {
-    const { getAllByTestId } = renderSQLQueryResults(mockQueryResults, mockQueries, mockSearchQuery, onSelectedTabIdChange,
-      onQueryChange, updateExpandedMap, getRawResponse, getJdbc, getCsv, getText, setIsResultFullScreen);
+  it('renders the component to test tabs down arrow', async () => {
+    const { getAllByTestId } = renderSQLQueryResults(
+      mockQueryResults,
+      mockQueries,
+      mockSearchQuery,
+      onSelectedTabIdChange,
+      onQueryChange,
+      updateExpandedMap,
+      getRawResponse,
+      getJdbc,
+      getCsv,
+      getText,
+      setIsResultFullScreen
+    );
 
     expect(document.body.children[0]).toMatchSnapshot();
 
@@ -118,11 +149,10 @@ describe("<QueryResults with data/> spec", () => {
     expect(getAllByTestId('slide-down'));
     await fireEvent.click(getAllByTestId('slide-down')[0]);
   });
-
 });
 
-
-function renderPPLQueryResults(mockQueryResults: ResponseDetail<QueryResult>[],
+function renderPPLQueryResults(
+  mockQueryResults: ResponseDetail<QueryResult>[],
   mockQueries: string[] = [],
   mockSearchQuery: string = '',
   onSelectedTabIdChange: (tab: Tab) => void,
@@ -132,12 +162,12 @@ function renderPPLQueryResults(mockQueryResults: ResponseDetail<QueryResult>[],
   getJdbc: (queries: string[]) => void,
   getCsv: (queries: string[]) => void,
   getText: (queries: string[]) => void,
-  setIsResultFullScreen: (isFullScreen: boolean) => void) {
-
+  setIsResultFullScreen: (isFullScreen: boolean) => void
+) {
   return {
     ...render(
       <QueryResults
-        language='PPL'
+        language="PPL"
         queries={mockQueries}
         queryResults={mockQueryResults}
         queryResultsJDBC={''}
@@ -159,24 +189,28 @@ function renderPPLQueryResults(mockQueryResults: ResponseDetail<QueryResult>[],
         getText={getText}
         isResultFullScreen={false}
         setIsResultFullScreen={setIsResultFullScreen}
+        asyncLoadingStatus="SUCCESS"
+        asyncQueryError=""
+        selectedDatasource={[{ label: 'OpenSearch' }]}
+        cancelAsyncQuery={() => {}}
       />
     ),
   };
 }
 
-describe("<QueryResults /> spec", () => {
-  it("renders the component with no data", async () => {
-    (window as any).HTMLElement.prototype.scrollBy = function () { };
+describe('<QueryResults /> spec', () => {
+  it('renders the component with no data', async () => {
+    (window as any).HTMLElement.prototype.scrollBy = function () {};
 
     expect(document.body.children[0]).toMatchSnapshot();
   });
 });
 
-describe("<QueryResults with data/> spec", () => {
+describe('<QueryResults with data/> spec', () => {
   const onSelectedTabIdChange = jest.fn();
   const onQueryChange = jest.fn();
   const updateExpandedMap = jest.fn();
-  const mockSearchQuery = "";
+  const mockSearchQuery = '';
   const getRawResponse = jest.fn();
   const getJdbc = jest.fn();
   const getCsv = jest.fn();
@@ -184,10 +218,26 @@ describe("<QueryResults with data/> spec", () => {
   const setIsResultFullScreen = jest.fn();
   (window as any).HTMLElement.prototype.scrollBy = jest.fn();
 
-  it("renders the component with mock query results", async () => {
-    const { getAllByRole, getByText, getAllByText, getAllByTestId, getAllByLabelText } =
-      renderPPLQueryResults(mockQueryResults, mockQueries, mockSearchQuery, onSelectedTabIdChange, onQueryChange,
-        updateExpandedMap, getRawResponse, getJdbc, getCsv, getText, setIsResultFullScreen);
+  it('renders the component with mock query results', async () => {
+    const {
+      getAllByRole,
+      getByText,
+      getAllByText,
+      getAllByTestId,
+      getAllByLabelText,
+    } = renderPPLQueryResults(
+      mockQueryResults,
+      mockQueries,
+      mockSearchQuery,
+      onSelectedTabIdChange,
+      onQueryChange,
+      updateExpandedMap,
+      getRawResponse,
+      getJdbc,
+      getCsv,
+      getText,
+      setIsResultFullScreen
+    );
 
     expect(document.body.children[0]).toMatchSnapshot();
 
@@ -208,16 +258,27 @@ describe("<QueryResults with data/> spec", () => {
     // It tests pagination
     await fireEvent.click(getAllByLabelText('Page 2 of 2')[0]);
     await fireEvent.click(getAllByText('Rows per page', { exact: false })[0]);
-    expect(getByText("10 rows"));
-    expect(getByText("20 rows"));
-    expect(getByText("50 rows"));
-    expect(getByText("100 rows"));
-    await fireEvent.click(getByText("20 rows"));
+    expect(getByText('10 rows'));
+    expect(getByText('20 rows'));
+    expect(getByText('50 rows'));
+    expect(getByText('100 rows'));
+    await fireEvent.click(getByText('20 rows'));
   });
 
-  it("renders the component to test tabs down arrow", async () => {
-    const { getAllByTestId } = renderPPLQueryResults(mockQueryResults, mockQueries, mockSearchQuery, onSelectedTabIdChange,
-      onQueryChange, updateExpandedMap, getRawResponse, getJdbc, getCsv, getText, setIsResultFullScreen);
+  it('renders the component to test tabs down arrow', async () => {
+    const { getAllByTestId } = renderPPLQueryResults(
+      mockQueryResults,
+      mockQueries,
+      mockSearchQuery,
+      onSelectedTabIdChange,
+      onQueryChange,
+      updateExpandedMap,
+      getRawResponse,
+      getJdbc,
+      getCsv,
+      getText,
+      setIsResultFullScreen
+    );
 
     expect(document.body.children[0]).toMatchSnapshot();
 
@@ -225,5 +286,4 @@ describe("<QueryResults with data/> spec", () => {
     expect(getAllByTestId('slide-down'));
     await fireEvent.click(getAllByTestId('slide-down')[0]);
   });
-
 });
diff --git a/public/components/QueryResults/QueryResults.tsx b/public/components/QueryResults/QueryResults.tsx
index f17cc0ee..55f4f2ce 100644
--- a/public/components/QueryResults/QueryResults.tsx
+++ b/public/components/QueryResults/QueryResults.tsx
@@ -45,7 +45,7 @@ import {
   ResponseDetail,
   Tab,
 } from '../Main/main';
-import { AsyncQueryBody } from './AsyncQueryBody';
+import { AsyncQueryBody } from './async_query_body';
 import QueryResultsBody from './QueryResultsBody';
 
 interface QueryResultsProps {
diff --git a/public/components/QueryResults/__snapshots__/QueryResults.test.tsx.snap b/public/components/QueryResults/__snapshots__/QueryResults.test.tsx.snap
index 5c99ca41..44fc7d0c 100644
--- a/public/components/QueryResults/__snapshots__/QueryResults.test.tsx.snap
+++ b/public/components/QueryResults/__snapshots__/QueryResults.test.tsx.snap
@@ -328,6 +328,52 @@ exports[`<QueryResults with data/> spec renders the component to test tabs down
             </div>
           </div>
         </div>
+        <div
+          class="euiFlexItem euiFlexItem--flexGrowZero"
+        >
+          <div
+            class="download-container"
+          >
+            <div
+              class="euiPopover euiPopover--anchorDownLeft download-button-container"
+              id="singlePanel"
+            >
+              <div
+                class="euiPopover__anchor"
+              >
+                <button
+                  class="euiButton euiButton--primary euiButton--small"
+                  type="button"
+                >
+                  <span
+                    class="euiButtonContent euiButtonContent--iconRight euiButton__content"
+                  >
+                    <svg
+                      aria-hidden="true"
+                      class="euiIcon euiIcon--medium euiIcon--inherit euiButtonContent__icon"
+                      focusable="false"
+                      height="16"
+                      role="img"
+                      viewBox="0 0 16 16"
+                      width="16"
+                      xmlns="http://www.w3.org/2000/svg"
+                    >
+                      <path
+                        d="M13.069 5.157 8.384 9.768a.546.546 0 0 1-.768 0L2.93 5.158a.552.552 0 0 0-.771 0 .53.53 0 0 0 0 .759l4.684 4.61c.641.631 1.672.63 2.312 0l4.684-4.61a.53.53 0 0 0 0-.76.552.552 0 0 0-.771 0Z"
+                        fill-rule="non-zero"
+                      />
+                    </svg>
+                    <span
+                      class="euiButton__text"
+                    >
+                      Download
+                    </span>
+                  </span>
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
       </div>
       <div
         class="sql-console-results-container"
@@ -9736,6 +9782,47 @@ exports[`<QueryResults with data/> spec renders the component with mock query re
             </div>
           </div>
         </div>
+        <div
+          class="euiFlexItem euiFlexItem--flexGrowZero"
+        >
+          <div
+            class="download-container"
+          >
+            <div
+              class="euiPopover euiPopover--anchorDownLeft download-button-container"
+              id="singlePanel"
+            >
+              <div
+                class="euiPopover__anchor"
+              >
+                <button
+                  class="euiButton euiButton--primary euiButton--small"
+                  type="button"
+                >
+                  <span
+                    class="euiButtonContent euiButtonContent--iconRight euiButton__content"
+                  >
+                    <svg
+                      aria-hidden="true"
+                      class="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonContent__icon"
+                      focusable="false"
+                      height="16"
+                      role="img"
+                      viewBox="0 0 16 16"
+                      width="16"
+                      xmlns="http://www.w3.org/2000/svg"
+                    />
+                    <span
+                      class="euiButton__text"
+                    >
+                      Download
+                    </span>
+                  </span>
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
       </div>
       <div
         class="sql-console-results-container"
diff --git a/public/components/QueryResults/AsyncQueryBody.tsx b/public/components/QueryResults/async_query_body.tsx
similarity index 100%
rename from public/components/QueryResults/AsyncQueryBody.tsx
rename to public/components/QueryResults/async_query_body.tsx