Turn on feature flag

Comment change
Update throughput settings tab with new elasticity properties (#1461 )
2025-12-23 19:01:28 +00:00 · 2023-06-19 17:50:19 -07:00 · 2023-06-19 17:49:48 -07:00 · 2023-06-16 15:54:29 -07:00 · 2023-06-16 00:25:23 -07:00 · 2023-06-08 18:32:42 -07:00
126 changed files with 23490 additions and 2365 deletions
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -92,11 +92,11 @@ jobs:
          name: dist
          path: dist/
      - name: Upload build to preview blob storage
-        run: az storage blob upload-batch -d '$web' -s 'dist' --account-name cosmosexplorerpreview --destination-path "${{github.event.pull_request.head.sha || github.sha}}" --account-key="${PREVIEW_STORAGE_KEY}"
+        run: az storage blob upload-batch -d '$web' -s 'dist' --account-name cosmosexplorerpreview --destination-path "${{github.event.pull_request.head.sha || github.sha}}" --account-key="${PREVIEW_STORAGE_KEY}" --overwrite true
        env:
          PREVIEW_STORAGE_KEY: ${{ secrets.PREVIEW_STORAGE_KEY }}
      - name: Upload preview config to blob storage
-        run: az storage blob upload -c '$web' -f ./preview/config.json --account-name cosmosexplorerpreview --name "${{github.event.pull_request.head.sha || github.sha}}/config.json" --account-key="${PREVIEW_STORAGE_KEY}"
+        run: az storage blob upload -c '$web' -f ./preview/config.json --account-name cosmosexplorerpreview --name "${{github.event.pull_request.head.sha || github.sha}}/config.json" --account-key="${PREVIEW_STORAGE_KEY}" --overwrite true
        env:
          PREVIEW_STORAGE_KEY: ${{ secrets.PREVIEW_STORAGE_KEY }}
  endtoendemulator:
@@ -182,7 +182,7 @@ jobs:
        with:
          name: dist
      - run: cp ./configs/prod.json config.json
-      - run: nuget sources add -Name "ADO" -Source "$NUGET_SOURCE" -UserName "vimeng@microsoft.com" -Password "$AZURE_DEVOPS_PAT"
+      - run: nuget sources add -Name "ADO" -Source "$NUGET_SOURCE" -UserName "jawelton@microsoft.com" -Password "$AZURE_DEVOPS_PAT"
      - run: nuget pack -Version "2.0.0-github-${GITHUB_SHA}"
      - run: nuget push -SkipDuplicate -Source "$NUGET_SOURCE" -ApiKey Az *.nupkg
      - uses: actions/upload-artifact@v2
@@ -207,7 +207,7 @@ jobs:
          name: dist
      - run: cp ./configs/mpac.json config.json
      - run: sed -i 's/Azure.Cosmos.DB.Data.Explorer/Azure.Cosmos.DB.Data.Explorer.MPAC/g' DataExplorer.nuspec
-      - run: nuget sources add -Name "ADO" -Source "$NUGET_SOURCE" -UserName "vimeng@microsoft.com" -Password "$AZURE_DEVOPS_PAT"
+      - run: nuget sources add -Name "ADO" -Source "$NUGET_SOURCE" -UserName "jawelton@microsoft.com" -Password "$AZURE_DEVOPS_PAT"
      - run: nuget pack -Version "2.0.0-github-${GITHUB_SHA}"
      - run: nuget push -SkipDuplicate -Source "$NUGET_SOURCE" -ApiKey Az *.nupkg
      - uses: actions/upload-artifact@v2
--- a/SECURITY.md
+++ b/SECURITY.md
@@ -0,0 +1,41 @@
+<!-- BEGIN MICROSOFT SECURITY.MD V0.0.7 BLOCK -->
+
+## Security
+
+Microsoft takes the security of our software products and services seriously, which includes all source code repositories managed through our GitHub organizations, which include [Microsoft](https://github.com/Microsoft), [Azure](https://github.com/Azure), [DotNet](https://github.com/dotnet), [AspNet](https://github.com/aspnet), [Xamarin](https://github.com/xamarin), and [our GitHub organizations](https://opensource.microsoft.com/).
+
+If you believe you have found a security vulnerability in any Microsoft-owned repository that meets [Microsoft's definition of a security vulnerability](https://aka.ms/opensource/security/definition), please report it to us as described below.
+
+## Reporting Security Issues
+
+**Please do not report security vulnerabilities through public GitHub issues.**
+
+Instead, please report them to the Microsoft Security Response Center (MSRC) at [https://msrc.microsoft.com/create-report](https://aka.ms/opensource/security/create-report).
+
+If you prefer to submit without logging in, send email to [secure@microsoft.com](mailto:secure@microsoft.com).  If possible, encrypt your message with our PGP key; please download it from the [Microsoft Security Response Center PGP Key page](https://aka.ms/opensource/security/pgpkey).
+
+You should receive a response within 24 hours. If for some reason you do not, please follow up via email to ensure we received your original message. Additional information can be found at [microsoft.com/msrc](https://aka.ms/opensource/security/msrc). 
+
+Please include the requested information listed below (as much as you can provide) to help us better understand the nature and scope of the possible issue:
+
+  * Type of issue (e.g. buffer overflow, SQL injection, cross-site scripting, etc.)
+  * Full paths of source file(s) related to the manifestation of the issue
+  * The location of the affected source code (tag/branch/commit or direct URL)
+  * Any special configuration required to reproduce the issue
+  * Step-by-step instructions to reproduce the issue
+  * Proof-of-concept or exploit code (if possible)
+  * Impact of the issue, including how an attacker might exploit the issue
+
+This information will help us triage your report more quickly.
+
+If you are reporting for a bug bounty, more complete reports can contribute to a higher bounty award. Please visit our [Microsoft Bug Bounty Program](https://aka.ms/opensource/security/bounty) page for more details about our active programs.
+
+## Preferred Languages
+
+We prefer all communications to be in English.
+
+## Policy
+
+Microsoft follows the principle of [Coordinated Vulnerability Disclosure](https://aka.ms/opensource/security/cvd).
+
+<!-- END MICROSOFT SECURITY.MD BLOCK -->
--- a/images/Copilot.svg
+++ b/images/Copilot.svg
@@ -0,0 +1,35 @@
+<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="40" height="40" fill="white"/>
+<path d="M17 3.73926L20 4.04436V12.6862L15.2 13.8013L13.6 15.9967V19.4479C13.6 21.7669 14.8545 23.9045 16.879 25.0353L21.4036 27.5626L13.6 31.69L10.3559 32.1523L7.27902 30.4337C5.25445 29.3028 4 27.1652 4 24.8462V14.7591C4 12.4395 5.25512 10.3015 7.28055 9.17085L16.3174 4.12639L16.3121 4.13012L17 3.73926Z" fill="url(#paint0_radial_420_101763)"/>
+<path d="M17 3.73926L20 4.04436V12.6862L15.2 13.8013L13.6 15.9967V19.4479C13.6 21.7669 14.8545 23.9045 16.879 25.0353L21.4036 27.5626L13.6 31.69L10.3559 32.1523L7.27902 30.4337C5.25445 29.3028 4 27.1652 4 24.8462V14.7591C4 12.4395 5.25512 10.3015 7.28055 9.17085L16.3174 4.12639L16.3121 4.13012L17 3.73926Z" fill="url(#paint1_linear_420_101763)"/>
+<path d="M26.399 15.001L34.399 19.801L35.999 21.401V24.8452C35.999 27.1642 34.7446 29.3018 32.72 30.4327L23.12 35.7949C21.1804 36.8784 18.8177 36.8784 16.878 35.7949L7.27804 30.4327C7.09146 30.3284 6.91141 30.2157 6.73828 30.095L7.278 30.3965C9.21762 31.4799 11.5803 31.4799 13.52 30.3965L23.12 25.0342C25.1445 23.9033 26.399 21.7657 26.399 19.4467V15.001Z" fill="url(#paint2_radial_420_101763)"/>
+<path d="M26.399 15.001L34.399 19.801L35.999 21.401V24.8452C35.999 27.1642 34.7446 29.3018 32.72 30.4327L23.12 35.7949C21.1804 36.8784 18.8177 36.8784 16.878 35.7949L7.27804 30.4327C7.09146 30.3284 6.91141 30.2157 6.73828 30.095L7.278 30.3965C9.21762 31.4799 11.5803 31.4799 13.52 30.3965L23.12 25.0342C25.1445 23.9033 26.399 21.7657 26.399 19.4467V15.001Z" fill="url(#paint3_linear_420_101763)"/>
+<path d="M32.7191 9.17053L23.119 3.8117C21.1802 2.72943 18.819 2.72943 16.8802 3.8117L16.3151 4.1271C14.6239 5.31737 13.5996 7.26472 13.5996 9.36025V16.0461L16.8802 14.2149C18.819 13.1326 21.1802 13.1326 23.119 14.2149L32.7191 19.5737C34.6984 20.6786 35.9421 22.7456 35.9977 25.0039C35.999 24.9514 35.9996 24.8987 35.9996 24.8459V14.7588C35.9996 12.4392 34.7445 10.3011 32.7191 9.17053Z" fill="url(#paint4_radial_420_101763)"/>
+<path d="M32.7191 9.17053L23.119 3.8117C21.1802 2.72943 18.819 2.72943 16.8802 3.8117L16.3151 4.1271C14.6239 5.31737 13.5996 7.26472 13.5996 9.36025V16.0461L16.8802 14.2149C18.819 13.1326 21.1802 13.1326 23.119 14.2149L32.7191 19.5737C34.6984 20.6786 35.9421 22.7456 35.9977 25.0039C35.999 24.9514 35.9996 24.8987 35.9996 24.8459V14.7588C35.9996 12.4392 34.7445 10.3011 32.7191 9.17053Z" fill="url(#paint5_linear_420_101763)"/>
+<defs>
+<radialGradient id="paint0_radial_420_101763" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(17.5054 12.8837) rotate(112.544) scale(23.4519 19.3067)">
+<stop offset="0.206732" stop-color="#45D586"/>
+<stop offset="0.875628" stop-color="#128245"/>
+</radialGradient>
+<linearGradient id="paint1_linear_420_101763" x1="15.0625" y1="29.6174" x2="13.787" y2="27.2436" gradientUnits="userSpaceOnUse">
+<stop offset="0.9999" stop-color="#0F773F"/>
+<stop offset="1" stop-color="#0078D4" stop-opacity="0"/>
+</linearGradient>
+<radialGradient id="paint2_radial_420_101763" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(10.899 27.5214) rotate(-3.9995) scale(24.6197 15.4594)">
+<stop offset="0.140029" stop-color="#FBFF47"/>
+<stop offset="0.952721" stop-color="#54B228"/>
+</radialGradient>
+<linearGradient id="paint3_linear_420_101763" x1="30.8932" y1="18.5508" x2="29.5491" y2="20.8921" gradientUnits="userSpaceOnUse">
+<stop offset="0.9999" stop-color="#27770B"/>
+<stop offset="1" stop-color="#8C66BA" stop-opacity="0"/>
+</linearGradient>
+<radialGradient id="paint4_radial_420_101763" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(30.632 19.3878) rotate(-138.33) scale(22.8015 13.0047)">
+<stop stop-color="#95FEA0"/>
+<stop offset="0.839255" stop-color="#10B7B7"/>
+</radialGradient>
+<linearGradient id="paint5_linear_420_101763" x1="13.5996" y1="11.7134" x2="16.2131" y2="11.7134" gradientUnits="userSpaceOnUse">
+<stop offset="0.9999" stop-color="#0A7B7B"/>
+<stop offset="1" stop-color="#436DCD" stop-opacity="0"/>
+</linearGradient>
+</defs>
+</svg>
--- a/images/YoutubePlaceholder.svg
+++ b/images/YoutubePlaceholder.svg
@@ -0,0 +1,3 @@
+<svg width="334" height="154" viewBox="0 0 334 154" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="0.5" y="0.5" width="333" height="153" fill="#F3F2F1" stroke="#E1DFDD"/>
+</svg>
--- a/images/imgarrowlefticon.svg
+++ b/images/imgarrowlefticon.svg
@@ -1,5 +1,5 @@
 <?xml version="1.0" ?>
 <!DOCTYPE svg  PUBLIC '-//W3C//DTD SVG 1.1//EN'  'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'>
 <svg enable-background="new 0 0 256 256" height="256px" id="Layer_1" version="1.1" viewBox="0 0 256 256" width="256px" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-<path stroke="white" stroke-width="0.5" fill="#b5a3a3" d="M179.199,38.399c0,1.637-0.625,3.274-1.875,4.524l-85.076,85.075l85.076,85.075c2.5,2.5,2.5,6.55,0,9.05s-6.55,2.5-9.05,0  l-89.601-89.6c-2.5-2.5-2.5-6.551,0-9.051l89.601-89.6c2.5-2.5,6.55-2.5,9.05,0C178.574,35.124,179.199,36.762,179.199,38.399z"/>
+<path stroke="white" stroke-width="0.5" fill="#000" d="M179.199,38.399c0,1.637-0.625,3.274-1.875,4.524l-85.076,85.075l85.076,85.075c2.5,2.5,2.5,6.55,0,9.05s-6.55,2.5-9.05,0  l-89.601-89.6c-2.5-2.5-2.5-6.551,0-9.051l89.601-89.6c2.5-2.5,6.55-2.5,9.05,0C178.574,35.124,179.199,36.762,179.199,38.399z"/>
 </svg>
--- a/jest.config.js
+++ b/jest.config.js
@@ -18,7 +18,8 @@ module.exports = {
  // clearMocks: false,

  // Indicates whether the coverage information should be collected while executing the test
-  collectCoverage: true,
+
+  collectCoverage: process.env.skipCodeCoverage === "true" ? false : true,

  // An array of glob patterns indicating a set of files for which coverage information should be collected
  collectCoverageFrom: ["src/**/*.{js,jsx,ts,tsx}"],
@@ -36,7 +37,7 @@ module.exports = {
  coverageThreshold: {
    global: {
      branches: 25,
-      functions: 25,
+      functions: 24,
      lines: 28,
      statements: 28,
    },
--- a/less/documentDB.less
+++ b/less/documentDB.less
@@ -2576,6 +2576,10 @@ a:link {
 .querydropdown.placeholderVisible {
  font-style: italic;
 }
+.querydropdown.placeholderVisible::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
+  color: #767474;
+  opacity: 1; 
+}

 .querydropdown:hover {
  background-color: @AccentLow;
@@ -3087,3 +3091,4 @@ a:link {
  background: white;
  height: 100%;
 }
+
--- a/less/resourceTree.less
+++ b/less/resourceTree.less
@@ -5,12 +5,17 @@
  overflow: auto;

  .databaseHeader {
+    padding: 1px;
    font-size: 14px;
  }

  .collectionHeader {
    font-size: 12px;
  }
+
+  .loadMoreHeader {
+    color: RGB(5, 99, 193);
+  }
 }

 .notebookResourceTree {
@@ -24,5 +29,3 @@
    pointer-events: none;
  }
 }
-
-
--- a/package.json
+++ b/package.json
@@ -212,7 +212,7 @@
    "strict:find": "node ./strict-null-checks/find.js",
    "strict:add": "node ./strict-null-checks/auto-add.js",
    "compile:fullStrict": "tsc -p ./tsconfig.json --strictNullChecks",
-    "generateARMClients": "npx ts-node --compiler-options '{\"module\":\"commonjs\"}' utils/armClientGenerator/generator.ts"
+    "generateARMClients": "npx ts-node utils/armClientGenerator/generator.ts"
  },
  "repository": {
    "type": "git",
--- a/sampleData/queryCopilotSampleData.json
+++ b/sampleData/queryCopilotSampleData.json
--- a/sampleData/sqlSampleData.json
+++ b/sampleData/sqlSampleData.json
--- a/src/Common/CollapsedResourceTree.tsx
+++ b/src/Common/CollapsedResourceTree.tsx
@@ -36,7 +36,7 @@ export const CollapsedResourceTree: FunctionComponent<CollapsedResourceTreeProps
            id="collapseToggleLeftPaneButton"
            role="button"
            tabIndex={0}
-            aria-label="Expand Tree"
+            aria-label={getApiShortDisplayName() + `Expand tree`}
            onClick={toggleLeftPaneExpanded}
            onKeyPress={onKeyPressToggleLeftPaneExpanded}
            ref={focusButton}
--- a/src/Common/Constants.ts
+++ b/src/Common/Constants.ts
@@ -141,7 +141,7 @@ export class Queries {
  public static UnlimitedPageOption: string = "unlimited";
  public static itemsPerPage: number = 100;
  public static unlimitedItemsPerPage: number = 100; // TODO: Figure out appropriate value so it works for accounts with a large number of partitions
-
+  public static containersPerPage: number = 50;
  public static QueryEditorMinHeightRatio: number = 0.1;
  public static QueryEditorMaxHeightRatio: number = 0.4;
  public static readonly DefaultMaxDegreeOfParallelism = 6;
@@ -428,3 +428,91 @@ export class JunoEndpoints {
  public static readonly Prod = "https://tools.cosmos.azure.com";
  public static readonly Stage = "https://tools-staging.cosmos.azure.com";
 }
+
+export const QueryCopilotSampleDatabaseId = "CopilotSampleDb";
+export const QueryCopilotSampleContainerId = "SampleContainer";
+
+export const QueryCopilotSampleContainerSchema = {
+  product: {
+    sampleData: {
+      id: "de6fadec-0384-43c8-93ea-16c0170b5460",
+      name: "Premium Phone Mini (Red)",
+      price: 652.04,
+      category: "Electronics",
+      description:
+        "This Premium Phone Mini (Red) is designed by the company under agreement with the FCC, so we'd give it a pass in either direction, but no one should be using this handset without a compatible handset. All in all, this phone is one of the most affordable Android handsets out there at $100. Check them out.\n\n9. HTC One M9 4",
+      stock: 74,
+      countryOfOrigin: "Mexico",
+      firstAvailable: "2018-07-07 17:42:28",
+      priceHistory: [592.81],
+      customerRatings: [
+        { username: "dannyhowell", stars: 1, date: "2022-03-12 17:01:23", verifiedUser: true },
+        { username: "lindsay26", stars: 1, date: "2022-12-29 07:18:20", verifiedUser: false },
+        { username: "smithmiguel", stars: 3, date: "2022-09-08 11:43:27", verifiedUser: false },
+        { username: "julie07", stars: 3, date: "2021-03-14 23:54:10", verifiedUser: true },
+        { username: "kelly93", stars: 3, date: "2022-11-05 12:45:43", verifiedUser: false },
+        { username: "katherinereynolds", stars: 2, date: "2022-09-14 11:49:36", verifiedUser: false },
+        { username: "chandlerkenneth", stars: 1, date: "2022-01-14 12:14:43", verifiedUser: true },
+      ],
+      rareProperty: true,
+    },
+    schema: {
+      properties: {
+        id: {
+          type: "string",
+        },
+        name: {
+          type: "string",
+        },
+        price: {
+          type: "number",
+        },
+        category: {
+          type: "string",
+        },
+        description: {
+          type: "string",
+        },
+        stock: {
+          type: "number",
+        },
+        countryOfOrigin: {
+          type: "string",
+        },
+        firstAvailable: {
+          type: "string",
+        },
+        priceHistory: {
+          items: {
+            type: "number",
+          },
+          type: "array",
+        },
+        customerRatings: {
+          items: {
+            properties: {
+              username: {
+                type: "string",
+              },
+              stars: {
+                type: "number",
+              },
+              date: {
+                type: "string",
+              },
+              verifiedUser: {
+                type: "boolean",
+              },
+            },
+            type: "object",
+          },
+          type: "array",
+        },
+        rareProperty: {
+          type: "boolean",
+        },
+      },
+      type: "object",
+    },
+  },
+};
--- a/src/Common/EntityValue.tsx
+++ b/src/Common/EntityValue.tsx
@@ -55,7 +55,6 @@ export const EntityValue: FunctionComponent<TableEntityProps> = ({
      label={entityValueLabel && entityValueLabel}
      className="addEntityTextField"
      id="entityValueId"
-      autoFocus
      disabled={isEntityValueDisable}
      type={entityValueType}
      placeholder={entityValuePlaceholder}
--- a/src/Common/EnvironmentUtility.test.ts
+++ b/src/Common/EnvironmentUtility.test.ts
@@ -0,0 +1,14 @@
+import * as EnvironmentUtility from "./EnvironmentUtility";
+
+describe("Environment Utility Test", () => {
+  it("Test sample URI with /", () => {
+    const uri = "test/";
+    expect(EnvironmentUtility.normalizeArmEndpoint(uri)).toEqual(uri);
+  });
+
+  it("Test sample URI without /", () => {
+    const uri = "test";
+    const expectedResult = "test/";
+    expect(EnvironmentUtility.normalizeArmEndpoint(uri)).toEqual(expectedResult);
+  });
+});
--- a/src/Common/OfferUtility.test.ts
+++ b/src/Common/OfferUtility.test.ts
@@ -1,6 +1,6 @@
-import * as OfferUtility from "./OfferUtility";
-import { SDKOfferDefinition, Offer } from "../Contracts/DataModels";
 import { OfferResponse } from "@azure/cosmos";
+import { Offer, SDKOfferDefinition } from "../Contracts/DataModels";
+import * as OfferUtility from "./OfferUtility";

 describe("parseSDKOfferResponse", () => {
  it("manual throughput", () => {
@@ -31,6 +31,26 @@ describe("parseSDKOfferResponse", () => {
    expect(OfferUtility.parseSDKOfferResponse(mockResponse)).toEqual(expectedResult);
  });

+  it("offerContent not defined", () => {
+    const mockOfferDefinition = {
+      id: "test",
+    } as SDKOfferDefinition;
+
+    const mockResponse = {
+      resource: mockOfferDefinition,
+    } as OfferResponse;
+
+    expect(OfferUtility.parseSDKOfferResponse(mockResponse)).toEqual(undefined);
+  });
+
+  it("offerDefinition is null", () => {
+    const mockResponse = {
+      resource: undefined,
+    } as OfferResponse;
+
+    expect(OfferUtility.parseSDKOfferResponse(mockResponse)).toEqual(undefined);
+  });
+
  it("autoscale throughput", () => {
    const mockOfferDefinition = {
      content: {
--- a/src/Common/ResourceTreeContainer.tsx
+++ b/src/Common/ResourceTreeContainer.tsx
@@ -51,7 +51,7 @@ export const ResourceTreeContainer: FunctionComponent<ResourceTreeContainerProps
                role="button"
                data-bind="click: onRefreshResourcesClick, clickBubble: false, event: { keypress: onRefreshDatabasesKeyPress }"
                tabIndex={0}
-                aria-label="Refresh tree"
+                aria-label={getApiShortDisplayName() + `Refresh tree`}
                title="Refresh tree"
              >
                <img className="refreshcol" src={refreshImg} alt="Refresh Tree" />
@@ -63,7 +63,7 @@ export const ResourceTreeContainer: FunctionComponent<ResourceTreeContainerProps
                onClick={toggleLeftPaneExpanded}
                onKeyPress={onKeyPressToggleLeftPaneExpanded}
                tabIndex={0}
-                aria-label="Collapse Tree"
+                aria-label={getApiShortDisplayName() + `Collapse Tree`}
                title="Collapse Tree"
                ref={focusButton}
              >
--- a/src/Common/TableEntity.tsx
+++ b/src/Common/TableEntity.tsx
@@ -137,15 +137,16 @@ export const TableEntity: FunctionComponent<TableEntityProps> = ({
        />
        {!isEntityValueDisable && (
          <TooltipHost content="Edit property" id="editTooltip">
+            <div tabIndex={0}>
              <Image
                {...imageProps}
                src={EditIcon}
                alt="editEntity"
-              id="editEntity"
                onClick={onEditEntity}
                tabIndex={0}
                onKeyPress={handleKeyPress}
              />
+            </div>
          </TooltipHost>
        )}
        {isDeleteOptionVisible && userContext.apiType !== "Cassandra" && (
--- a/src/Common/UrlUtility.test.ts
+++ b/src/Common/UrlUtility.test.ts
@@ -0,0 +1,49 @@
+import * as UrlUtility from "./UrlUtility";
+
+describe("parseDocumentsPath", () => {
+  it("empty resource path", () => {
+    const resourcePath = "";
+
+    expect(UrlUtility.parseDocumentsPath(resourcePath)).toEqual({});
+  });
+
+  it("resourcePath does not begin or end with /", () => {
+    const resourcePath = "localhost/portal/home";
+    const expectedResult = {
+      type: "home",
+      objectBody: {
+        id: "portal",
+        self: "/localhost/portal/home/",
+      },
+    };
+
+    expect(UrlUtility.parseDocumentsPath(resourcePath)).toEqual(expectedResult);
+  });
+
+  it("resourcePath length is even", () => {
+    const resourcePath = "/localhost/portal/src/home/";
+    const expectedResult = {
+      type: "src",
+      objectBody: {
+        id: "home",
+        self: resourcePath,
+      },
+    };
+
+    expect(UrlUtility.parseDocumentsPath(resourcePath)).toEqual(expectedResult);
+  });
+
+  it("createUri", () => {
+    const baseUri = "http://foo.com/bar/";
+    const relativeUri = "/index.html";
+    const expectedUri = "http://foo.com/bar/index.html";
+
+    expect(UrlUtility.createUri(baseUri, relativeUri)).toEqual(expectedUri);
+  });
+
+  it("should throw an error if baseUri is empty", () => {
+    expect(() => {
+      UrlUtility.createUri("", "/home");
+    }).toThrow("baseUri is null or empty");
+  });
+});
--- a/src/Common/dataAccess/readCollectionOffer.ts
+++ b/src/Common/dataAccess/readCollectionOffer.ts
@@ -96,6 +96,14 @@ const readCollectionOfferWithARM = async (databaseId: string, collectionId: stri
        ? parseInt(resource.minimumThroughput)
        : resource.minimumThroughput;
    const autoscaleSettings = resource.autoscaleSettings;
+    const instantMaximumThroughput: number =
+      typeof resource.instantMaximumThroughput === "string"
+        ? parseInt(resource.instantMaximumThroughput)
+        : resource.instantMaximumThroughput;
+    const softAllowedMaximumThroughput: number =
+      typeof resource.softAllowedMaximumThroughput === "string"
+        ? parseInt(resource.softAllowedMaximumThroughput)
+        : resource.softAllowedMaximumThroughput;

    if (autoscaleSettings) {
      return {
@@ -104,6 +112,8 @@ const readCollectionOfferWithARM = async (databaseId: string, collectionId: stri
        manualThroughput: undefined,
        minimumThroughput,
        offerReplacePending: resource.offerReplacePending === "true",
+        instantMaximumThroughput,
+        softAllowedMaximumThroughput,
      };
    }

@@ -113,6 +123,8 @@ const readCollectionOfferWithARM = async (databaseId: string, collectionId: stri
      manualThroughput: resource.throughput,
      minimumThroughput,
      offerReplacePending: resource.offerReplacePending === "true",
+      instantMaximumThroughput,
+      softAllowedMaximumThroughput,
    };
  }

--- a/src/Common/dataAccess/readCollections.ts
+++ b/src/Common/dataAccess/readCollections.ts
@@ -1,3 +1,4 @@
+import { Queries } from "Common/Constants";
 import { AuthType } from "../../AuthType";
 import * as DataModels from "../../Contracts/DataModels";
 import { userContext } from "../../UserContext";
@@ -31,6 +32,35 @@ export async function readCollections(databaseId: string): Promise<DataModels.Co
  }
 }

+export async function readCollectionsWithPagination(
+  databaseId: string,
+  continuationToken?: string
+): Promise<DataModels.CollectionsWithPagination> {
+  const clearMessage = logConsoleProgress(`Querying containers for database ${databaseId}`);
+  try {
+    const sdkResponse = await client()
+      .database(databaseId)
+      .containers.query(
+        { query: "SELECT * FROM c" },
+        {
+          continuationToken,
+          maxItemCount: Queries.containersPerPage,
+        }
+      )
+      .fetchNext();
+    const collectionsWithPagination: DataModels.CollectionsWithPagination = {
+      collections: sdkResponse.resources as DataModels.Collection[],
+      continuationToken: sdkResponse.continuationToken,
+    };
+    return collectionsWithPagination;
+  } catch (error) {
+    handleError(error, "ReadCollections", `Error while querying containers for database ${databaseId}`);
+    throw error;
+  } finally {
+    clearMessage();
+  }
+}
+
 async function readCollectionsWithARM(databaseId: string): Promise<DataModels.Collection[]> {
  let rpResponse;

--- a/src/Common/dataAccess/readDatabaseOffer.ts
+++ b/src/Common/dataAccess/readDatabaseOffer.ts
@@ -68,6 +68,14 @@ const readDatabaseOfferWithARM = async (databaseId: string): Promise<Offer> => {
        ? parseInt(resource.minimumThroughput)
        : resource.minimumThroughput;
    const autoscaleSettings = resource.autoscaleSettings;
+    const instantMaximumThroughput: number =
+      typeof resource.instantMaximumThroughput === "string"
+        ? parseInt(resource.instantMaximumThroughput)
+        : resource.instantMaximumThroughput;
+    const softAllowedMaximumThroughput: number =
+      typeof resource.softAllowedMaximumThroughput === "string"
+        ? parseInt(resource.softAllowedMaximumThroughput)
+        : resource.softAllowedMaximumThroughput;

    if (autoscaleSettings) {
      return {
@@ -76,6 +84,8 @@ const readDatabaseOfferWithARM = async (databaseId: string): Promise<Offer> => {
        manualThroughput: undefined,
        minimumThroughput,
        offerReplacePending: resource.offerReplacePending === "true",
+        instantMaximumThroughput,
+        softAllowedMaximumThroughput,
      };
    }

@@ -85,6 +95,8 @@ const readDatabaseOfferWithARM = async (databaseId: string): Promise<Offer> => {
      manualThroughput: resource.throughput,
      minimumThroughput,
      offerReplacePending: resource.offerReplacePending === "true",
+      instantMaximumThroughput,
+      softAllowedMaximumThroughput,
    };
  }

--- a/src/Common/dataAccess/readStoredProcedures.ts
+++ b/src/Common/dataAccess/readStoredProcedures.ts
@@ -1,8 +1,9 @@
 import { Resource, StoredProcedureDefinition } from "@azure/cosmos";
+import { CloudError, SqlStoredProcedureListResult } from "Utils/arm/generatedClients/cosmos/types";
 import { AuthType } from "../../AuthType";
 import { userContext } from "../../UserContext";
-import { listSqlStoredProcedures } from "../../Utils/arm/generatedClients/cosmos/sqlResources";
 import { logConsoleProgress } from "../../Utils/NotificationConsoleUtils";
+import { listSqlStoredProcedures } from "../../Utils/arm/generatedClients/cosmos/sqlResources";
 import { client } from "../CosmosClient";
 import { handleError } from "../ErrorHandlingUtils";

@@ -24,7 +25,13 @@ export async function readStoredProcedures(
        databaseId,
        collectionId
      );
-      return rpResponse?.value?.map((sproc) => sproc.properties?.resource as StoredProcedureDefinition & Resource);
+      const listResult = rpResponse as SqlStoredProcedureListResult;
+      if (listResult) {
+        return listResult?.value?.map((sproc) => sproc.properties?.resource as StoredProcedureDefinition & Resource);
+      }
+
+      const cloudError = rpResponse as CloudError;
+      throw new Error(cloudError?.error?.message);
    }

    const response = await client()
--- a/src/Contracts/DataModels.ts
+++ b/src/Contracts/DataModels.ts
@@ -156,6 +156,11 @@ export interface Collection extends Resource {
  requestSchema?: () => void;
 }

+export interface CollectionsWithPagination {
+  continuationToken?: string;
+  collections?: Collection[];
+}
+
 export interface Database extends Resource {
  collections?: Collection[];
 }
@@ -237,6 +242,8 @@ export interface Offer {
  minimumThroughput: number | undefined;
  offerDefinition?: SDKOfferDefinition;
  offerReplacePending: boolean;
+  instantMaximumThroughput?: number;
+  softAllowedMaximumThroughput?: number;
 }

 export interface SDKOfferDefinition extends Resource {
--- a/src/Contracts/ViewModels.ts
+++ b/src/Contracts/ViewModels.ts
@@ -87,13 +87,13 @@ export interface Database extends TreeNode {
  isDatabaseExpanded: ko.Observable<boolean>;
  isDatabaseShared: ko.Computed<boolean>;
  isSampleDB?: boolean;
-
+  collectionsContinuationToken?: string;
  selectedSubnodeKind: ko.Observable<CollectionTabKind>;

  expandDatabase(): Promise<void>;
  collapseDatabase(): void;

-  loadCollections(): Promise<void>;
+  loadCollections(restart?: boolean): Promise<void>;
  findCollectionWithId(collectionId: string): Collection;
  openAddCollection(database: Database, event: MouseEvent): void;
  onSettingsClick: () => void;
--- a/src/Explorer/ContextMenuButtonFactory.tsx
+++ b/src/Explorer/ContextMenuButtonFactory.tsx
@@ -11,9 +11,9 @@ import DeleteTriggerIcon from "../../images/DeleteTrigger.svg";
 import DeleteUDFIcon from "../../images/DeleteUDF.svg";
 import HostedTerminalIcon from "../../images/Hosted-Terminal.svg";
 import * as ViewModels from "../Contracts/ViewModels";
-import { useSidePanel } from "../hooks/useSidePanel";
 import { userContext } from "../UserContext";
 import { getCollectionName, getDatabaseName } from "../Utils/APITypeUtils";
+import { useSidePanel } from "../hooks/useSidePanel";
 import { TreeNodeMenuItem } from "./Controls/TreeComponent/TreeComponent";
 import Explorer from "./Explorer";
 import { useNotebook } from "./Notebook/useNotebook";
@@ -152,7 +152,7 @@ export const createStoreProcedureContextMenuItems = (
    {
      iconSrc: DeleteSprocIcon,
      onClick: () => storedProcedure.delete(),
-      label: "Delete Store Procedure",
+      label: "Delete Stored Procedure",
    },
  ];
 };
--- a/src/Explorer/Controls/Accordion/AccordionComponent.tsx
+++ b/src/Explorer/Controls/Accordion/AccordionComponent.tsx
@@ -73,7 +73,7 @@ export class AccordionItemComponent extends React.Component<AccordionItemCompone
      <img
        className="expandCollapseIcon"
        src={this.state.isExpanded ? TriangleDownIcon : TriangleRightIcon}
-        alt="Hide"
+        alt={this.state.isExpanded ? `${this.props.title} hide` : `${this.props.title} expand`}
        tabIndex={0}
        role="button"
      />
--- a/src/Explorer/Controls/NotebookGallery/InfoComponent/InfoComponent.tsx
+++ b/src/Explorer/Controls/NotebookGallery/InfoComponent/InfoComponent.tsx
@@ -1,5 +1,5 @@
+import { HoverCard, HoverCardType, Icon, Label, Link, Stack } from "@fluentui/react";
 import * as React from "react";
-import { Icon, Label, Stack, HoverCard, HoverCardType, Link } from "@fluentui/react";
 import { CodeOfConductEndpoints } from "../../../../Common/Constants";
 import "./InfoComponent.less";

@@ -41,7 +41,7 @@ export class InfoComponent extends React.Component<InfoComponentProps> {
  public render(): JSX.Element {
    return (
      <HoverCard plainCardProps={{ onRenderPlainCard: this.onHover }} instantOpenOnClick type={HoverCardType.plain}>
-        <div className="infoPanelMain">
+        <div className="infoPanelMain" tabIndex={0}>
          <Icon className="infoIconMain" iconName="Help" styles={{ root: { verticalAlign: "middle" } }} />
          <Label className="infoLabelMain">Help</Label>
        </div>
--- a/src/Explorer/Controls/NotebookGallery/InfoComponent/snapshots/InfoComponent.test.tsx.snap
+++ b/src/Explorer/Controls/NotebookGallery/InfoComponent/snapshots/InfoComponent.test.tsx.snap
@@ -12,6 +12,7 @@ exports[`InfoComponent renders 1`] = `
 >
  <div
    className="infoPanelMain"
+    tabIndex={0}
  >
    <Icon
      className="infoIconMain"
--- a/src/Explorer/Controls/Settings/SettingsRenderUtils.test.tsx
+++ b/src/Explorer/Controls/Settings/SettingsRenderUtils.test.tsx
@@ -1,46 +1,29 @@
 import { shallow } from "enzyme";
 import React from "react";
-import { IColumn, Text } from "@fluentui/react";
 import {
-  getAutoPilotV3SpendElement,
-  getEstimatedSpendingElement,
-  manualToAutoscaleDisclaimerElement,
-  ttlWarning,
-  indexingPolicynUnsavedWarningMessage,
-  updateThroughputBeyondLimitWarningMessage,
-  updateThroughputDelayedApplyWarningMessage,
-  getThroughputApplyDelayedMessage,
-  getThroughputApplyShortDelayMessage,
-  getThroughputApplyLongDelayMessage,
-  getToolTipContainer,
-  conflictResolutionCustomToolTip,
-  changeFeedPolicyToolTip,
-  conflictResolutionLwwTooltip,
-  mongoIndexingPolicyDisclaimer,
-  mongoIndexingPolicyAADError,
-  mongoIndexTransformationRefreshingMessage,
-  renderMongoIndexTransformationRefreshMessage,
-  ManualEstimatedSpendingDisplayProps,
  PriceBreakdown,
+  changeFeedPolicyToolTip,
+  conflictResolutionCustomToolTip,
+  conflictResolutionLwwTooltip,
+  getEstimatedSpendingElement,
  getRuPriceBreakdown,
+  getThroughputApplyDelayedMessage,
+  getThroughputApplyLongDelayMessage,
+  getThroughputApplyShortDelayMessage,
+  getToolTipContainer,
+  indexingPolicynUnsavedWarningMessage,
+  manualToAutoscaleDisclaimerElement,
+  mongoIndexTransformationRefreshingMessage,
+  mongoIndexingPolicyAADError,
+  mongoIndexingPolicyDisclaimer,
+  renderMongoIndexTransformationRefreshMessage,
+  ttlWarning,
+  updateThroughputDelayedApplyWarningMessage,
 } from "./SettingsRenderUtils";

 class SettingsRenderUtilsTestComponent extends React.Component {
  public render(): JSX.Element {
-    const estimatedSpendingColumns: IColumn[] = [
-      { key: "costType", name: "", fieldName: "costType", minWidth: 100, maxWidth: 200, isResizable: true },
-      { key: "hourly", name: "Hourly", fieldName: "hourly", minWidth: 100, maxWidth: 200, isResizable: true },
-      { key: "daily", name: "Daily", fieldName: "daily", minWidth: 100, maxWidth: 200, isResizable: true },
-      { key: "monthly", name: "Monthly", fieldName: "monthly", minWidth: 100, maxWidth: 200, isResizable: true },
-    ];
-    const estimatedSpendingItems: ManualEstimatedSpendingDisplayProps[] = [
-      {
-        costType: <Text>Current Cost</Text>,
-        hourly: <Text>$ 1.02</Text>,
-        daily: <Text>$ 24.48</Text>,
-        monthly: <Text>$ 744.6</Text>,
-      },
-    ];
+    const costElement: JSX.Element = <></>;
    const priceBreakdown: PriceBreakdown = {
      hourlyPrice: 1.02,
      dailyPrice: 24.48,
@@ -52,17 +35,11 @@ class SettingsRenderUtilsTestComponent extends React.Component {

    return (
      <>
-        {getAutoPilotV3SpendElement(1000, false)}
-        {getAutoPilotV3SpendElement(undefined, false)}
-        {getAutoPilotV3SpendElement(1000, true)}
-        {getAutoPilotV3SpendElement(undefined, true)}
-
-        {getEstimatedSpendingElement(estimatedSpendingColumns, estimatedSpendingItems, 1000, 2, priceBreakdown, false)}
+        {getEstimatedSpendingElement(costElement, 1000, 2, priceBreakdown, false)}

        {manualToAutoscaleDisclaimerElement}
        {ttlWarning}
        {indexingPolicynUnsavedWarningMessage}
-        {updateThroughputBeyondLimitWarningMessage}
        {updateThroughputDelayedApplyWarningMessage}

        {getThroughputApplyDelayedMessage(false, 1000, "RU/s", "sampleDb", "sampleCollection", 2000)}
--- a/src/Explorer/Controls/Settings/SettingsRenderUtils.tsx
+++ b/src/Explorer/Controls/Settings/SettingsRenderUtils.tsx
@@ -1,10 +1,7 @@
 import {
-  DetailsList,
-  DetailsListLayoutMode,
  DetailsRow,
  ICheckboxStyles,
  IChoiceGroupStyles,
-  IColumn,
  IDetailsColumnStyles,
  IDetailsListStyles,
  IDetailsRowProps,
@@ -20,7 +17,6 @@ import {
  Link,
  MessageBar,
  MessageBarType,
-  SelectionMode,
  Spinner,
  SpinnerSize,
  Stack,
@@ -28,8 +24,7 @@ import {
 } from "@fluentui/react";
 import * as React from "react";
 import { StyleConstants, Urls } from "../../../Common/Constants";
-import { AutopilotDocumentation, hoursInAMonth } from "../../../Shared/Constants";
-import * as AutoPilotUtils from "../../../Utils/AutoPilotUtils";
+import { hoursInAMonth } from "../../../Shared/Constants";
 import {
  computeRUUsagePriceHourly,
  estimatedCostDisclaimer,
@@ -103,6 +98,10 @@ export const checkBoxAndInputStackProps: Partial<IStackProps> = {
  tokens: { childrenGap: 10 },
 };

+export const relaxedSpacingStackProps: Partial<IStackProps> = {
+  tokens: { childrenGap: 20 },
+};
+
 export const toolTipLabelStackTokens: IStackTokens = {
  childrenGap: 6,
 };
@@ -174,41 +173,6 @@ export function onRenderRow(props: IDetailsRowProps): JSX.Element {
  return <DetailsRow {...props} styles={transparentDetailsRowStyles} />;
 }

-export const getAutoPilotV3SpendElement = (
-  maxAutoPilotThroughputSet: number,
-  isDatabaseThroughput: boolean,
-  requestUnitsUsageCostElement?: JSX.Element
-): JSX.Element => {
-  if (!maxAutoPilotThroughputSet) {
-    return <></>;
-  }
-
-  const resource: string = isDatabaseThroughput ? "database" : "container";
-  return (
-    <>
-      <Text>
-        Your {resource} throughput will automatically scale from{" "}
-        <b>
-          {AutoPilotUtils.getMinRUsBasedOnUserInput(maxAutoPilotThroughputSet)} RU/s (10% of max RU/s) -{" "}
-          {maxAutoPilotThroughputSet} RU/s
-        </b>{" "}
-        based on usage.
-        <br />
-      </Text>
-      {requestUnitsUsageCostElement}
-      <Text>
-        After the first {AutoPilotUtils.getStorageBasedOnUserInput(maxAutoPilotThroughputSet)} GB of data stored, the
-        max RU/s will be automatically upgraded based on the new storage value.
-        <Link href={AutopilotDocumentation.Url} target="_blank">
-          {" "}
-          Learn more
-        </Link>
-        .
-      </Text>
-    </>
-  );
-};
-
 export const getRuPriceBreakdown = (
  throughput: number,
  serverId: string,
@@ -238,8 +202,7 @@ export const getRuPriceBreakdown = (
 };

 export const getEstimatedSpendingElement = (
-  estimatedSpendingColumns: IColumn[],
-  estimatedSpendingItems: EstimatedSpendingDisplayProps[],
+  costElement: JSX.Element,
  throughput: number,
  numberOfRegions: number,
  priceBreakdown: PriceBreakdown,
@@ -247,22 +210,25 @@ export const getEstimatedSpendingElement = (
 ): JSX.Element => {
  const ruRange: string = isAutoscale ? throughput / 10 + " RU/s - " : "";
  return (
-    <Stack {...addMongoIndexStackProps} styles={mediumWidthStackStyles}>
-      <DetailsList
-        disableSelectionZone
-        items={estimatedSpendingItems}
-        columns={estimatedSpendingColumns}
-        selectionMode={SelectionMode.none}
-        layoutMode={DetailsListLayoutMode.justified}
-        onRenderRow={onRenderRow}
-      />
-      <Text id="throughputSpendElement">
-        ({"regions: "} {numberOfRegions}, {ruRange}
-        {throughput} RU/s, {priceBreakdown.currencySign}
-        {priceBreakdown.pricePerRu}/RU)
-      </Text>
-      <Text>
-        <em>{estimatedCostDisclaimer}</em>
+    <Stack>
+      <Text style={{ fontWeight: 600 }}>Cost estimate*</Text>
+      {costElement}
+      <Text style={{ fontWeight: 600, marginTop: 15 }}>How we calculate this</Text>
+      <Stack id="throughputSpendElement" style={{ marginTop: 5 }}>
+        <span>
+          {numberOfRegions} region{numberOfRegions > 1 && <span>s</span>}
+        </span>
+        <span>
+          {ruRange}
+          {throughput} RU/s
+        </span>
+        <span>
+          {priceBreakdown.currencySign}
+          {priceBreakdown.pricePerRu}/RU
+        </span>
+      </Stack>
+      <Text style={{ marginTop: 15 }}>
+        <em>*{estimatedCostDisclaimer}</em>
      </Text>
    </Stack>
  );
@@ -293,14 +259,6 @@ export const indexingPolicynUnsavedWarningMessage: JSX.Element = (
  </Text>
 );

-export const updateThroughputBeyondLimitWarningMessage: JSX.Element = (
-  <Text styles={infoAndToolTipTextStyle} id="updateThroughputBeyondLimitWarningMessage">
-    You are about to request an increase in throughput beyond the pre-allocated capacity. The service will scale out and
-    increase throughput for the selected container. This operation will take 1-3 business days to complete. You can
-    track the status of this request in Notifications.
-  </Text>
-);
-
 export const updateThroughputDelayedApplyWarningMessage: JSX.Element = (
  <Text styles={infoAndToolTipTextStyle} id="updateThroughputDelayedApplyWarningMessage">
    You are about to request an increase in throughput beyond the pre-allocated capacity. This operation will take some
@@ -308,6 +266,61 @@ export const updateThroughputDelayedApplyWarningMessage: JSX.Element = (
  </Text>
 );

+export const getUpdateThroughputBeyondInstantLimitMessage = (instantMaximumThroughput: number): JSX.Element => {
+  return (
+    <Text styles={infoAndToolTipTextStyle} id="updateThroughputDelayedApplyWarningMessage">
+      Scaling up will take 4-6 hours as it exceeds what Azure Cosmos DB can instantly support currently based on your
+      number of physical partitions. You can increase your throughput to {instantMaximumThroughput} instantly or proceed
+      with this value and wait until the scale-up is completed.
+    </Text>
+  );
+};
+
+export const getUpdateThroughputBeyondSupportLimitMessage = (
+  instantMaximumThroughput: number,
+  maximumThroughput: number
+): JSX.Element => {
+  return (
+    <>
+      <Text styles={infoAndToolTipTextStyle} id="updateThroughputDelayedApplyWarningMessage">
+        Your request to increase throughput exceeds the pre-allocated capacity which may take longer than expected.
+        There are three options you can choose from to proceed:
+      </Text>
+      <ol style={{ fontSize: 14, color: "windowtext", marginTop: "5px" }}>
+        <li>You can instantly scale up to {instantMaximumThroughput} RU/s.</li>
+        {instantMaximumThroughput < maximumThroughput && (
+          <li>You can asynchronously scale up to any value under {maximumThroughput} RU/s in 4-6 hours.</li>
+        )}
+        <li>
+          Your current quota max is {maximumThroughput} RU/s. To go over this limit, you must request a quota increase
+          and the Azure Cosmos DB team will review.
+          <Link
+            href="https://learn.microsoft.com/en-us/azure/cosmos-db/nosql/create-support-request-quota-increase"
+            target="_blank"
+          >
+            Learn more
+          </Link>
+        </li>
+      </ol>
+    </>
+  );
+};
+
+export const getUpdateThroughputBelowMinimumMessage = (minimum: number): JSX.Element => {
+  return (
+    <Text styles={infoAndToolTipTextStyle}>
+      You are not able to lower throughput below your current minimum of {minimum} RU/s. For more information on this
+      limit, please refer to our service quote documentation.
+      <Link
+        href="https://learn.microsoft.com/en-us/azure/cosmos-db/concepts-limits#minimum-throughput-limits"
+        target="_blank"
+      >
+        Learn more
+      </Link>
+    </Text>
+  );
+};
+
 export const saveThroughputWarningMessage: JSX.Element = (
  <Text styles={infoAndToolTipTextStyle}>
    Your bill will be affected as you update your throughput settings. Please review the updated cost estimate below
@@ -499,7 +512,11 @@ export const getTextFieldStyles = (current: isDirtyTypes, baseline: isDirtyTypes
  },
 });

-export const getChoiceGroupStyles = (current: isDirtyTypes, baseline: isDirtyTypes): Partial<IChoiceGroupStyles> => ({
+export const getChoiceGroupStyles = (
+  current: isDirtyTypes,
+  baseline: isDirtyTypes,
+  isHorizontal?: boolean
+): Partial<IChoiceGroupStyles> => ({
  flexContainer: [
    {
      selectors: {
@@ -516,6 +533,8 @@ export const getChoiceGroupStyles = (current: isDirtyTypes, baseline: isDirtyTyp
          padding: "2px 5px",
        },
      },
+      display: isHorizontal ? "inline-flex" : "default",
+      columnGap: isHorizontal ? "30px" : "default",
    },
  ],
 });
--- a/src/Explorer/Controls/Settings/SettingsSubComponents/ScaleComponent.test.tsx
+++ b/src/Explorer/Controls/Settings/SettingsSubComponents/ScaleComponent.test.tsx
@@ -3,7 +3,6 @@ import ko from "knockout";
 import React from "react";
 import * as Constants from "../../../../Common/Constants";
 import * as DataModels from "../../../../Contracts/DataModels";
-import * as SharedConstants from "../../../../Shared/Constants";
 import { updateUserContext } from "../../../../UserContext";
 import Explorer from "../../../Explorer";
 import { throughputUnit } from "../SettingsRenderUtils";
@@ -12,7 +11,6 @@ import { ScaleComponent, ScaleComponentProps } from "./ScaleComponent";
 import { ThroughputInputAutoPilotV3Component } from "./ThroughputInputComponents/ThroughputInputAutoPilotV3Component";

 describe("ScaleComponent", () => {
-  const nonNationalCloudContainer = new Explorer();
  const targetThroughput = 6000;

  const baseProps: ScaleComponentProps = {
@@ -125,11 +123,4 @@ describe("ScaleComponent", () => {
    scaleComponent = new ScaleComponent(newProps);
    expect(scaleComponent.canThroughputExceedMaximumValue()).toEqual(true);
  });
-
-  it("getThroughputWarningMessage", () => {
-    const throughputBeyondLimit = SharedConstants.CollectionCreation.DefaultCollectionRUs1Million + 1000;
-    const newProps = { ...baseProps, container: nonNationalCloudContainer, throughput: throughputBeyondLimit };
-    const scaleComponent = new ScaleComponent(newProps);
-    expect(scaleComponent.getThroughputWarningMessage().props.id).toEqual("updateThroughputBeyondLimitWarningMessage");
-  });
 });
--- a/src/Explorer/Controls/Settings/SettingsSubComponents/ScaleComponent.tsx
+++ b/src/Explorer/Controls/Settings/SettingsSubComponents/ScaleComponent.tsx
@@ -1,7 +1,7 @@
-import { Label, Link, MessageBar, MessageBarType, Stack, Text, TextField } from "@fluentui/react";
+import { Link, MessageBar, MessageBarType, Stack, Text, TextField } from "@fluentui/react";
 import * as React from "react";
 import * as Constants from "../../../../Common/Constants";
-import { configContext, Platform } from "../../../../ConfigContext";
+import { Platform, configContext } from "../../../../ConfigContext";
 import * as DataModels from "../../../../Contracts/DataModels";
 import * as ViewModels from "../../../../Contracts/ViewModels";
 import * as SharedConstants from "../../../../Shared/Constants";
@@ -15,7 +15,6 @@ import {
  subComponentStackProps,
  throughputUnit,
  titleAndInputStackProps,
-  updateThroughputBeyondLimitWarningMessage,
 } from "../SettingsRenderUtils";
 import { hasDatabaseSharedThroughput } from "../SettingsUtils";
 import { ThroughputInputAutoPilotV3Component } from "./ThroughputInputComponents/ThroughputInputAutoPilotV3Component";
@@ -68,16 +67,6 @@ export class ScaleComponent extends React.Component<ScaleComponentProps> {
    return !!enableAutoScaleCapability;
  };

-  private getStorageCapacityTitle = (): JSX.Element => {
-    const capacity: string = this.props.isFixedContainer ? "Fixed" : "Unlimited";
-    return (
-      <Stack {...titleAndInputStackProps}>
-        <Label>Storage capacity</Label>
-        <Text>{capacity}</Text>
-      </Stack>
-    );
-  };
-
  public getMaxRUs = (): number => {
    if (userContext.isTryCosmosDBSubscription) {
      return Constants.TryCosmosExperience.maxRU;
@@ -131,18 +120,6 @@ export class ScaleComponent extends React.Component<ScaleComponentProps> {
    return undefined;
  };

-  public getThroughputWarningMessage = (): JSX.Element => {
-    const throughputExceedsBackendLimits: boolean =
-      this.canThroughputExceedMaximumValue() &&
-      this.props.throughput > SharedConstants.CollectionCreation.DefaultCollectionRUs1Million;
-
-    if (throughputExceedsBackendLimits && !this.props.isFixedContainer) {
-      return updateThroughputBeyondLimitWarningMessage;
-    }
-
-    return undefined;
-  };
-
  public getLongDelayMessage = (): JSX.Element => {
    const matches: string[] = this.props.initialNotification?.description.match(
      `Throughput update for (.*) ${throughputUnit}`
@@ -188,9 +165,10 @@ export class ScaleComponent extends React.Component<ScaleComponentProps> {
      spendAckChecked={false}
      onScaleSaveableChange={this.props.onScaleSaveableChange}
      onScaleDiscardableChange={this.props.onScaleDiscardableChange}
-      getThroughputWarningMessage={this.getThroughputWarningMessage}
      usageSizeInKB={this.props.collection?.usageSizeInKB()}
      throughputError={this.props.throughputError}
+      instantMaximumThroughput={this.offer?.instantMaximumThroughput}
+      softAllowedMaximumThroughput={this.offer?.softAllowedMaximumThroughput}
    />
  );

@@ -229,12 +207,7 @@ export class ScaleComponent extends React.Component<ScaleComponentProps> {
        {this.getInitialNotificationElement() && (
          <MessageBar messageBarType={MessageBarType.warning}>{this.getInitialNotificationElement()}</MessageBar>
        )}
-        {!this.isAutoScaleEnabled() && (
-          <Stack {...subComponentStackProps}>
-            {this.getThroughputInputComponent()}
-            {!this.props.database && this.getStorageCapacityTitle()}
-          </Stack>
-        )}
+        {!this.isAutoScaleEnabled() && <Stack {...subComponentStackProps}>{this.getThroughputInputComponent()}</Stack>}

        {/* TODO: Replace link with call to the Azure Support blade */}
        {this.isAutoScaleEnabled() && (
--- a/src/Explorer/Controls/Settings/SettingsSubComponents/SubSettingsComponent.tsx
+++ b/src/Explorer/Controls/Settings/SettingsSubComponents/SubSettingsComponent.tsx
@@ -311,8 +311,15 @@ export class SubSettingsComponent extends React.Component<SubSettingsComponentPr
      )}

      {userContext.apiType === "SQL" && this.isLargePartitionKeyEnabled() && (
-        <Text>Large {this.partitionKeyName.toLowerCase()} has been enabled</Text>
+        <Text>Large {this.partitionKeyName.toLowerCase()} has been enabled.</Text>
      )}
+
+      {userContext.apiType === "SQL" &&
+        (this.isHierarchicalPartitionedContainer() ? (
+          <Text>Hierarchically partitioned container.</Text>
+        ) : (
+          <Text>Non-hierarchically partitioned container.</Text>
+        ))}
    </Stack>
  );

@@ -330,6 +337,7 @@ export class SubSettingsComponent extends React.Component<SubSettingsComponentPr
  };

  public isLargePartitionKeyEnabled = (): boolean => this.props.collection.partitionKey?.version >= 2;
+  public isHierarchicalPartitionedContainer = (): boolean => this.props.collection.partitionKey?.kind === "MultiHash";

  public render(): JSX.Element {
    return (
--- a/src/Explorer/Controls/Settings/SettingsSubComponents/ThroughputInputComponents/ThroughputInputAutoPilotV3Component.test.tsx
+++ b/src/Explorer/Controls/Settings/SettingsSubComponents/ThroughputInputComponents/ThroughputInputAutoPilotV3Component.test.tsx
@@ -42,7 +42,8 @@ describe("ThroughputInputAutoPilotV3Component", () => {
    onScaleDiscardableChange: () => {
      return;
    },
-    getThroughputWarningMessage: () => undefined,
+    instantMaximumThroughput: 5000,
+    softAllowedMaximumThroughput: 1000000,
  };

  it("throughput input visible", () => {
--- a/src/Explorer/Controls/Settings/SettingsSubComponents/ThroughputInputComponents/ThroughputInputAutoPilotV3Component.tsx
+++ b/src/Explorer/Controls/Settings/SettingsSubComponents/ThroughputInputComponents/ThroughputInputAutoPilotV3Component.tsx
@@ -3,10 +3,14 @@ import {
  ChoiceGroup,
  FontIcon,
  IChoiceGroupOption,
-  IColumn,
+  IProgressIndicatorStyles,
+  ISeparatorStyles,
  Label,
  Link,
  MessageBar,
+  MessageBarType,
+  ProgressIndicator,
+  Separator,
  Stack,
  Text,
  TextField,
@@ -23,24 +27,24 @@ import { autoPilotThroughput1K } from "../../../../../Utils/AutoPilotUtils";
 import { calculateEstimateNumber, usageInGB } from "../../../../../Utils/PricingUtils";
 import { Int32 } from "../../../../Panes/Tables/Validators/EntityPropertyValidationCommon";
 import {
-  AutoscaleEstimatedSpendingDisplayProps,
+  PriceBreakdown,
  checkBoxAndInputStackProps,
-  getAutoPilotV3SpendElement,
  getChoiceGroupStyles,
  getEstimatedSpendingElement,
  getRuPriceBreakdown,
  getTextFieldStyles,
  getToolTipContainer,
-  ManualEstimatedSpendingDisplayProps,
+  getUpdateThroughputBelowMinimumMessage,
+  getUpdateThroughputBeyondInstantLimitMessage,
+  getUpdateThroughputBeyondSupportLimitMessage,
  manualToAutoscaleDisclaimerElement,
  messageBarStyles,
  noLeftPaddingCheckBoxStyle,
-  PriceBreakdown,
+  relaxedSpacingStackProps,
  saveThroughputWarningMessage,
  titleAndInputStackProps,
-  transparentDetailsHeaderStyle,
 } from "../../SettingsRenderUtils";
-import { getSanitizedInputValue, IsComponentDirtyResult, isDirty } from "../../SettingsUtils";
+import { IsComponentDirtyResult, getSanitizedInputValue, isDirty } from "../../SettingsUtils";
 import { ToolTipLabelComponent } from "../ToolTipLabelComponent";

 export interface ThroughputInputAutoPilotV3Props {
@@ -73,9 +77,10 @@ export interface ThroughputInputAutoPilotV3Props {
  onMaxAutoPilotThroughputChange: (newThroughput: number) => void;
  onScaleSaveableChange: (isScaleSaveable: boolean) => void;
  onScaleDiscardableChange: (isScaleDiscardable: boolean) => void;
-  getThroughputWarningMessage: () => JSX.Element;
  usageSizeInKB: number;
  throughputError?: string;
+  instantMaximumThroughput: number;
+  softAllowedMaximumThroughput: number;
 }

 interface ThroughputInputAutoPilotV3State {
@@ -127,7 +132,10 @@ export class ThroughputInputAutoPilotV3Component extends React.Component<
      } else if (this.props.isAutoPilotSelected) {
        if (isDirty(this.props.maxAutoPilotThroughput, this.props.maxAutoPilotThroughputBaseline)) {
          isDiscardable = true;
-          if (AutoPilotUtils.isValidAutoPilotThroughput(this.props.maxAutoPilotThroughput)) {
+          if (
+            this.props.maxAutoPilotThroughput <= this.props.softAllowedMaximumThroughput &&
+            AutoPilotUtils.isValidAutoPilotThroughput(this.props.maxAutoPilotThroughput)
+          ) {
            isSaveable = true;
          }
        }
@@ -186,7 +194,15 @@ export class ThroughputInputAutoPilotV3Component extends React.Component<

    let estimatedSpend: JSX.Element;

-    if (!this.props.isAutoPilotSelected) {
+    if (this.props.isAutoPilotSelected) {
+      estimatedSpend = this.getEstimatedAutoscaleSpendElement(
+        this.props.maxAutoPilotThroughputBaseline,
+        userContext.portalEnv,
+        regions,
+        multimaster,
+        isDirty ? this.props.maxAutoPilotThroughput : undefined
+      );
+    } else {
      estimatedSpend = this.getEstimatedManualSpendElement(
        // if migrating from autoscale to manual, we use the autoscale RUs value as that is what will be set...
        this.overrideWithAutoPilotSettings() ? this.props.maxAutoPilotThroughput : this.props.throughputBaseline,
@@ -195,14 +211,6 @@ export class ThroughputInputAutoPilotV3Component extends React.Component<
        multimaster,
        isDirty ? this.props.throughput : undefined
      );
-    } else {
-      estimatedSpend = this.getEstimatedAutoscaleSpendElement(
-        this.props.maxAutoPilotThroughputBaseline,
-        userContext.portalEnv,
-        regions,
-        multimaster,
-        isDirty ? this.props.maxAutoPilotThroughput : undefined
-      );
    }
    return estimatedSpend;
  };
@@ -215,52 +223,8 @@ export class ThroughputInputAutoPilotV3Component extends React.Component<
    newThroughput?: number
  ): JSX.Element => {
    const prices: PriceBreakdown = getRuPriceBreakdown(throughput, serverId, numberOfRegions, isMultimaster, true);
-    const estimatedSpendingColumns: IColumn[] = [
-      {
-        key: "costType",
-        name: "",
-        fieldName: "costType",
-        minWidth: 100,
-        maxWidth: 200,
-        isResizable: true,
-        styles: transparentDetailsHeaderStyle,
-      },
-      {
-        key: "minPerMonth",
-        name: "Min Per Month",
-        fieldName: "minPerMonth",
-        minWidth: 100,
-        maxWidth: 200,
-        isResizable: true,
-        styles: transparentDetailsHeaderStyle,
-      },
-      {
-        key: "maxPerMonth",
-        name: "Max Per Month",
-        fieldName: "maxPerMonth",
-        minWidth: 100,
-        maxWidth: 200,
-        isResizable: true,
-        styles: transparentDetailsHeaderStyle,
-      },
-    ];
-    const estimatedSpendingItems: AutoscaleEstimatedSpendingDisplayProps[] = [
-      {
-        costType: <Text>Current Cost</Text>,
-        minPerMonth: (
-          <Text>
-            {prices.currencySign} {calculateEstimateNumber(prices.monthlyPrice / 10)}
-          </Text>
-        ),
-        maxPerMonth: (
-          <Text>
-            {prices.currencySign} {calculateEstimateNumber(prices.monthlyPrice)}
-          </Text>
-        ),
-      },
-    ];

-    if (newThroughput) {
+    const newThroughputCostElement = (): JSX.Element => {
      const newPrices: PriceBreakdown = getRuPriceBreakdown(
        newThroughput,
        serverId,
@@ -268,39 +232,42 @@ export class ThroughputInputAutoPilotV3Component extends React.Component<
        isMultimaster,
        true
      );
-      estimatedSpendingItems.unshift({
-        costType: (
-          <Text>
-            <b>Updated Cost</b>
+      return (
+        <div>
+          <Text style={{ fontWeight: 600 }}>Updated cost per month</Text>
+          <Stack horizontal style={{ marginTop: 5, marginBottom: 10 }}>
+            <Text style={{ width: "50%" }}>
+              {newPrices.currencySign} {calculateEstimateNumber(newPrices.monthlyPrice / 10)} min
            </Text>
-        ),
-        minPerMonth: (
-          <Text>
-            <b>
-              {newPrices.currencySign} {calculateEstimateNumber(newPrices.monthlyPrice / 10)}
-            </b>
+            <Text style={{ width: "50%" }}>
+              {newPrices.currencySign} {calculateEstimateNumber(newPrices.monthlyPrice)} max
            </Text>
-        ),
-        maxPerMonth: (
-          <Text>
-            <b>
-              {newPrices.currencySign} {calculateEstimateNumber(newPrices.monthlyPrice)}
-            </b>
-          </Text>
-        ),
-      });
-    }
-
-    return getEstimatedSpendingElement(
-      estimatedSpendingColumns,
-      estimatedSpendingItems,
-      newThroughput ?? throughput,
-      numberOfRegions,
-      prices,
-      true
+          </Stack>
+        </div>
      );
    };

+    const costElement = (): JSX.Element => {
+      const prices: PriceBreakdown = getRuPriceBreakdown(throughput, serverId, numberOfRegions, isMultimaster, true);
+      return (
+        <Stack {...checkBoxAndInputStackProps} style={{ marginTop: 15 }}>
+          {newThroughput && newThroughputCostElement()}
+          <Text style={{ fontWeight: 600 }}>Current cost per month</Text>
+          <Stack horizontal style={{ marginTop: 5 }}>
+            <Text style={{ width: "50%" }}>
+              {prices.currencySign} {calculateEstimateNumber(prices.monthlyPrice / 10)} min
+            </Text>
+            <Text style={{ width: "50%" }}>
+              {prices.currencySign} {calculateEstimateNumber(prices.monthlyPrice)} max
+            </Text>
+          </Stack>
+        </Stack>
+      );
+    };
+
+    return getEstimatedSpendingElement(costElement(), newThroughput ?? throughput, numberOfRegions, prices, true);
+  };
+
  private getEstimatedManualSpendElement = (
    throughput: number,
    serverId: string,
@@ -309,124 +276,57 @@ export class ThroughputInputAutoPilotV3Component extends React.Component<
    newThroughput?: number
  ): JSX.Element => {
    const prices: PriceBreakdown = getRuPriceBreakdown(throughput, serverId, numberOfRegions, isMultimaster, false);
-    const estimatedSpendingColumns: IColumn[] = [
-      {
-        key: "costType",
-        name: "",
-        fieldName: "costType",
-        minWidth: 100,
-        maxWidth: 200,
-        isResizable: true,
-        styles: transparentDetailsHeaderStyle,
-      },
-      {
-        key: "hourly",
-        name: "Hourly",
-        fieldName: "hourly",
-        minWidth: 100,
-        maxWidth: 200,
-        isResizable: true,
-        styles: transparentDetailsHeaderStyle,
-      },
-      {
-        key: "daily",
-        name: "Daily",
-        fieldName: "daily",
-        minWidth: 100,
-        maxWidth: 200,
-        isResizable: true,
-        styles: transparentDetailsHeaderStyle,
-      },
-      {
-        key: "monthly",
-        name: "Monthly",
-        fieldName: "monthly",
-        minWidth: 100,
-        maxWidth: 200,
-        isResizable: true,
-        styles: transparentDetailsHeaderStyle,
-      },
-    ];
-    const estimatedSpendingItems: ManualEstimatedSpendingDisplayProps[] = [
-      {
-        costType: <Text>Current Cost</Text>,
-        hourly: (
-          <Text>
-            {prices.currencySign} {calculateEstimateNumber(prices.hourlyPrice)}
-          </Text>
-        ),
-        daily: (
-          <Text>
-            {prices.currencySign} {calculateEstimateNumber(prices.dailyPrice)}
-          </Text>
-        ),
-        monthly: (
-          <Text>
-            {prices.currencySign} {calculateEstimateNumber(prices.monthlyPrice)}
-          </Text>
-        ),
-      },
-    ];

-    if (newThroughput) {
+    const newThroughputCostElement = (): JSX.Element => {
      const newPrices: PriceBreakdown = getRuPriceBreakdown(
        newThroughput,
        serverId,
        numberOfRegions,
        isMultimaster,
-        false
+        true
      );
-      estimatedSpendingItems.unshift({
-        costType: (
-          <Text>
-            <b>Updated Cost</b>
+      return (
+        <div>
+          <Text style={{ fontWeight: 600 }}>Updated cost per month</Text>
+          <Stack horizontal style={{ marginTop: 5, marginBottom: 10 }}>
+            <Text style={{ width: "33%" }}>
+              {newPrices.currencySign} {calculateEstimateNumber(newPrices.hourlyPrice)}/hr
            </Text>
-        ),
-        hourly: (
-          <Text>
-            <b>
-              {newPrices.currencySign} {calculateEstimateNumber(newPrices.hourlyPrice)}
-            </b>
+            <Text style={{ width: "33%" }}>
+              {newPrices.currencySign} {calculateEstimateNumber(newPrices.dailyPrice)}/day
            </Text>
-        ),
-        daily: (
-          <Text>
-            <b>
-              {newPrices.currencySign} {calculateEstimateNumber(newPrices.dailyPrice)}
-            </b>
+            <Text style={{ width: "33%" }}>
+              {newPrices.currencySign} {calculateEstimateNumber(newPrices.monthlyPrice)}/mo
            </Text>
-        ),
-        monthly: (
-          <Text>
-            <b>
-              {newPrices.currencySign} {calculateEstimateNumber(newPrices.monthlyPrice)}
-            </b>
-          </Text>
-        ),
-      });
-    }
-
-    return getEstimatedSpendingElement(
-      estimatedSpendingColumns,
-      estimatedSpendingItems,
-      newThroughput ?? throughput,
-      numberOfRegions,
-      prices,
-      false
+          </Stack>
+        </div>
      );
    };

-  private getAutoPilotUsageCost = (): JSX.Element => {
-    if (!this.props.maxAutoPilotThroughput) {
-      return <></>;
-    }
-    return getAutoPilotV3SpendElement(
-      this.props.maxAutoPilotThroughput,
-      false /* isDatabaseThroughput */,
-      !this.props.isEmulator ? this.getRequestUnitsUsageCost() : <></>
+    const costElement = (): JSX.Element => {
+      const prices: PriceBreakdown = getRuPriceBreakdown(throughput, serverId, numberOfRegions, isMultimaster, true);
+      return (
+        <Stack {...checkBoxAndInputStackProps} style={{ marginTop: 15 }}>
+          {newThroughput && newThroughputCostElement()}
+          <Text style={{ fontWeight: 600 }}>Current cost per month</Text>
+          <Stack horizontal style={{ marginTop: 5 }}>
+            <Text style={{ width: "33%" }}>
+              {prices.currencySign} {calculateEstimateNumber(prices.hourlyPrice)}/hr
+            </Text>
+            <Text style={{ width: "33%" }}>
+              {prices.currencySign} {calculateEstimateNumber(prices.dailyPrice)}/day
+            </Text>
+            <Text style={{ width: "33%" }}>
+              {prices.currencySign} {calculateEstimateNumber(prices.monthlyPrice)}/mo
+            </Text>
+          </Stack>
+        </Stack>
      );
    };

+    return getEstimatedSpendingElement(costElement(), newThroughput ?? throughput, numberOfRegions, prices, false);
+  };
+
  private onAutoPilotThroughputChange = (
    event: React.FormEvent<HTMLInputElement | HTMLTextAreaElement>,
    newValue?: string
@@ -511,7 +411,7 @@ export class ThroughputInputAutoPilotV3Component extends React.Component<
          onChange={this.onChoiceGroupChange}
          required={this.props.showAsMandatory}
          ariaLabelledBy={labelId}
-          styles={getChoiceGroupStyles(this.props.wasAutopilotOriginallySet, this.props.isAutoPilotSelected)}
+          styles={getChoiceGroupStyles(this.props.wasAutopilotOriginallySet, this.props.isAutoPilotSelected, true)}
        />
      </Stack>
    );
@@ -520,16 +420,164 @@ export class ThroughputInputAutoPilotV3Component extends React.Component<
  private onSpendAckChecked = (ev?: React.FormEvent<HTMLElement | HTMLInputElement>, checked?: boolean): void =>
    this.setState({ spendAckChecked: checked });

-  private renderAutoPilotInput = (): JSX.Element => (
+  private getStorageCapacityTitle = (): JSX.Element => {
+    const capacity: string = this.props.isFixed ? "Fixed" : "Unlimited";
+    return (
+      <Stack {...titleAndInputStackProps}>
+        <Label>Storage capacity</Label>
+        <Text>{capacity}</Text>
+      </Stack>
+    );
+  };
+
+  private thoughputRangeSeparatorStyles: Partial<ISeparatorStyles> = {
+    root: [
+      {
+        selectors: {
+          "::before": {
+            backgroundColor: "rgb(200, 200, 200)",
+            height: "3px",
+            marginTop: "-1px",
+          },
+        },
+      },
+    ],
+  };
+
+  private currentThroughputValue = (): number => {
+    return this.props.isAutoPilotSelected
+      ? this.props.maxAutoPilotThroughput
+      : this.overrideWithAutoPilotSettings()
+      ? this.props.maxAutoPilotThroughputBaseline
+      : this.props.throughput;
+  };
+
+  private getCurrentRuRange = (): "below" | "instant" | "delayed" | "requireSupport" => {
+    if (this.currentThroughputValue() < this.props.minimum) {
+      return "below";
+    }
+    if (
+      this.currentThroughputValue() >= this.props.minimum &&
+      this.currentThroughputValue() <= this.props.instantMaximumThroughput
+    ) {
+      return "instant";
+    }
+    if (this.currentThroughputValue() > this.props.softAllowedMaximumThroughput) {
+      return "requireSupport";
+    }
+
+    return "delayed";
+  };
+
+  private getRuThermometerStyles = (): Partial<IProgressIndicatorStyles> => ({
+    progressBar: [
+      {
+        backgroundColor:
+          this.getCurrentRuRange() === "instant"
+            ? "rgb(0, 120, 212)"
+            : this.getCurrentRuRange() === "delayed"
+            ? "rgb(255 216 109)"
+            : "rgb(251, 217, 203)",
+      },
+    ],
+  });
+
+  private getRuThermometerPercentValue = (): number => {
+    let percentValue: number;
+    const currentRus = this.currentThroughputValue();
+
+    switch (this.getCurrentRuRange()) {
+      case "below":
+        percentValue = 0;
+        break;
+      case "instant": {
+        const percentOfInstantRange: number = currentRus / this.props.instantMaximumThroughput;
+        percentValue = percentOfInstantRange * 0.34;
+        break;
+      }
+      case "delayed": {
+        const adjustedMax = this.props.softAllowedMaximumThroughput - this.props.instantMaximumThroughput;
+        const adjustedRus = currentRus - this.props.instantMaximumThroughput;
+        const percentOfDelayedRange = adjustedRus / adjustedMax;
+        const adjustedPercent = percentOfDelayedRange * 0.66;
+        percentValue = adjustedPercent + 0.34;
+        break;
+      }
+      default:
+        // over maximum
+        percentValue = 1;
+    }
+    return percentValue;
+  };
+
+  private getRUThermometer = (): JSX.Element => (
+    <Stack>
+      <Stack horizontal>
+        <Stack.Item style={{ width: "34%" }}>
+          <span>{this.props.minimum.toLocaleString()}</span>
+        </Stack.Item>
+        <Stack.Item style={{ width: "66%" }}>
+          <span style={{ float: "left", transform: "translateX(-50%)" }}>
+            {this.props.instantMaximumThroughput.toLocaleString()}
+          </span>
+          <span style={{ float: "right" }}>{this.props.softAllowedMaximumThroughput.toLocaleString()}</span>
+        </Stack.Item>
+      </Stack>
+      <ProgressIndicator
+        barHeight={20}
+        percentComplete={this.getRuThermometerPercentValue()}
+        styles={this.getRuThermometerStyles()}
+      />
+      <Stack horizontal>
+        <Stack.Item style={{ width: "34%", paddingRight: "5px" }}>
+          <Separator styles={this.thoughputRangeSeparatorStyles}>Instant</Separator>
+        </Stack.Item>
+        <Stack.Item style={{ width: "66%", paddingLeft: "5px" }}>
+          <Separator styles={this.thoughputRangeSeparatorStyles}>4-6 hrs</Separator>
+        </Stack.Item>
+      </Stack>
+    </Stack>
+  );
+
+  private showThroughputWarning = (): boolean => {
+    return (
+      this.currentThroughputValue() > this.props.instantMaximumThroughput ||
+      this.currentThroughputValue() < this.props.minimum
+    );
+  };
+
+  private getThroughputWarningMessageText = (): JSX.Element => {
+    switch (this.getCurrentRuRange()) {
+      case "below":
+        return getUpdateThroughputBelowMinimumMessage(this.props.minimum);
+      case "delayed":
+        return getUpdateThroughputBeyondInstantLimitMessage(this.props.instantMaximumThroughput);
+      case "requireSupport":
+        return getUpdateThroughputBeyondSupportLimitMessage(
+          this.props.instantMaximumThroughput,
+          this.props.softAllowedMaximumThroughput
+        );
+      default:
+        return <></>;
+    }
+  };
+
+  private getThroughputWarningMessageBar = (): JSX.Element => {
+    const isSevereWarning: boolean =
+      this.currentThroughputValue() > this.props.softAllowedMaximumThroughput ||
+      this.currentThroughputValue() < this.props.minimum;
+    return (
+      <MessageBar messageBarType={isSevereWarning ? MessageBarType.severeWarning : MessageBarType.warning}>
+        {this.getThroughputWarningMessageText()}
+      </MessageBar>
+    );
+  };
+
+  private getThroughputTextField = (): JSX.Element => (
    <>
-      <Text>
-        Provision maximum RU/s required by this resource. Estimate your required RU/s with
-        <Link target="_blank" href="https://cosmos.azure.com/capacitycalculator/">
-          {` capacity calculator`}
-        </Link>
-      </Text>
+      {this.props.isAutoPilotSelected ? (
        <TextField
-        label="Max RU/s"
+          label="Maximum RU/s required by this resource"
          required
          type="number"
          id="autopilotInput"
@@ -540,31 +588,15 @@ export class ThroughputInputAutoPilotV3Component extends React.Component<
          value={this.overrideWithProvisionedThroughputSettings() ? "" : this.props.maxAutoPilotThroughput?.toString()}
          onChange={this.onAutoPilotThroughputChange}
          min={autoPilotThroughput1K}
-        errorMessage={this.props.throughputError}
+          onGetErrorMessage={(value: string) => {
+            const sanitizedValue = getSanitizedInputValue(value);
+            return sanitizedValue % 1000
+              ? "Throughput value must be in increments of 1000"
+              : this.props.throughputError;
+          }}
+          validateOnLoad={false}
        />
-      {!this.overrideWithProvisionedThroughputSettings() && this.getAutoPilotUsageCost()}
-      {this.minRUperGBSurvey()}
-      {this.props.spendAckVisible && (
-        <Checkbox
-          id="spendAckCheckBox"
-          styles={noLeftPaddingCheckBoxStyle}
-          label={this.props.spendAckText}
-          checked={this.state.spendAckChecked}
-          onChange={this.onSpendAckChecked}
-        />
-      )}
-      {this.props.isFixed && <p>When using a collection with fixed storage capacity, you can set up to 10,000 RU/s.</p>}
-    </>
-  );
-
-  private renderThroughputInput = (): JSX.Element => (
-    <Stack {...titleAndInputStackProps}>
-      <Text>
-        Estimate your required throughput with
-        <Link target="_blank" href="https://cosmos.azure.com/capacitycalculator/">
-          {` capacity calculator`} <FontIcon iconName="NavigateExternalInline" />
-        </Link>
-      </Text>
+      ) : (
        <TextField
          required
          type="number"
@@ -582,23 +614,51 @@ export class ThroughputInputAutoPilotV3Component extends React.Component<
          min={this.props.minimum}
          errorMessage={this.props.throughputError}
        />
+      )}
+    </>
+  );
+
+  private renderThroughputComponent = (): JSX.Element => (
+    <Stack horizontal>
+      <Stack.Item style={{ width: "70%", maxWidth: "700px" }}>
+        <Stack {...relaxedSpacingStackProps} style={{ paddingRight: "50px" }}>
+          {this.getThroughputTextField()}
+          {this.props.instantMaximumThroughput && (
+            <Stack>
+              {this.getRUThermometer()}
+              {this.showThroughputWarning() && this.getThroughputWarningMessageBar()}
+            </Stack>
+          )}
+          {this.props.isAutoPilotSelected ? (
+            <Text style={{ marginTop: "40px" }}>
+              Based on usage, your {this.props.collectionName ? "container" : "database"} throughput will scale from{" "}
+              <b>
+                {AutoPilotUtils.getMinRUsBasedOnUserInput(this.props.maxAutoPilotThroughput)} RU/s (10% of max RU/s) -{" "}
+                {this.props.maxAutoPilotThroughput} RU/s
+              </b>
+              <br />
+            </Text>
+          ) : (
+            <>
              {this.state.exceedFreeTierThroughput && (
                <MessageBar
                  messageBarIconProps={{ iconName: "WarningSolid", className: "messageBarWarningIcon" }}
                  styles={messageBarStyles}
+                  style={{ marginTop: "40px" }}
                >
                  {`Billing will apply if you provision more than ${SharedConstants.FreeTierLimits.RU} RU/s of manual throughput, or if the resource scales beyond ${SharedConstants.FreeTierLimits.RU} RU/s with autoscale.`}
                </MessageBar>
              )}
-      {this.props.getThroughputWarningMessage() && (
-        <MessageBar
-          messageBarIconProps={{ iconName: "InfoSolid", className: "messageBarInfoIcon" }}
-          styles={messageBarStyles}
-        >
-          {this.props.getThroughputWarningMessage()}
-        </MessageBar>
+            </>
+          )}
+          {!this.overrideWithProvisionedThroughputSettings() && (
+            <Text>
+              Estimate your required RU/s with
+              <Link target="_blank" href="https://cosmos.azure.com/capacitycalculator/">
+                {` capacity calculator`} <FontIcon iconName="NavigateExternalInline" />
+              </Link>
+            </Text>
          )}
-      {!this.props.isEmulator && this.getRequestUnitsUsageCost()}
          {this.minRUperGBSurvey()}
          {this.props.spendAckVisible && (
            <Checkbox
@@ -609,8 +669,17 @@ export class ThroughputInputAutoPilotV3Component extends React.Component<
              onChange={this.onSpendAckChecked}
            />
          )}
-      <br />
-      {this.props.isFixed && <p>When using a collection with fixed storage capacity, you can set up to 10,000 RU/s.</p>}
+          {this.props.isFixed && (
+            <p>When using a collection with fixed storage capacity, you can set up to 10,000 RU/s.</p>
+          )}
+          {this.props.collectionName && (
+            <Stack.Item style={{ marginTop: "40px" }}>{this.getStorageCapacityTitle()}</Stack.Item>
+          )}
+        </Stack>
+      </Stack.Item>
+      <Stack.Item style={{ width: "30%", maxWidth: "300px" }}>
+        {!this.props.isEmulator ? this.getRequestUnitsUsageCost() : <></>}
+      </Stack.Item>
    </Stack>
  );

@@ -640,7 +709,7 @@ export class ThroughputInputAutoPilotV3Component extends React.Component<
        {this.renderWarningMessage()}
        {this.renderThroughputModeChoices()}

-        {this.props.isAutoPilotSelected ? this.renderAutoPilotInput() : this.renderThroughputInput()}
+        {this.renderThroughputComponent()}
      </Stack>
    );
  }
--- a/src/Explorer/Controls/Settings/SettingsSubComponents/ThroughputInputComponents/snapshots/ThroughputInputAutoPilotV3Component.test.tsx.snap
+++ b/src/Explorer/Controls/Settings/SettingsSubComponents/ThroughputInputComponents/snapshots/ThroughputInputAutoPilotV3Component.test.tsx.snap
--- a/src/Explorer/Controls/Settings/SettingsSubComponents/snapshots/ConflictResolutionComponent.test.tsx.snap
+++ b/src/Explorer/Controls/Settings/SettingsSubComponents/snapshots/ConflictResolutionComponent.test.tsx.snap
@@ -28,6 +28,8 @@ exports[`ConflictResolutionComponent Path text field displayed 1`] = `
      Object {
        "flexContainer": Array [
          Object {
+            "columnGap": "default",
+            "display": "default",
            "selectors": Object {
              ".ms-ChoiceField-field.is-checked::after": Object {
                "borderColor": undefined,
@@ -100,6 +102,8 @@ exports[`ConflictResolutionComponent Sproc text field displayed 1`] = `
      Object {
        "flexContainer": Array [
          Object {
+            "columnGap": "default",
+            "display": "default",
            "selectors": Object {
              ".ms-ChoiceField-field.is-checked::after": Object {
                "borderColor": "",
--- a/src/Explorer/Controls/Settings/SettingsSubComponents/snapshots/ScaleComponent.test.tsx.snap
+++ b/src/Explorer/Controls/Settings/SettingsSubComponents/snapshots/ScaleComponent.test.tsx.snap
@@ -39,7 +39,6 @@ exports[`ScaleComponent renders with correct initial notification 1`] = `
      canExceedMaximumValue={true}
      collectionName="test"
      databaseName="test"
-      getThroughputWarningMessage={[Function]}
      isAutoPilotSelected={false}
      isEmulator={false}
      isEnabled={true}
@@ -60,20 +59,6 @@ exports[`ScaleComponent renders with correct initial notification 1`] = `
      usageSizeInKB={100}
      wasAutopilotOriginallySet={true}
    />
-    <Stack
-      tokens={
-        Object {
-          "childrenGap": 5,
-        }
-      }
-    >
-      <StyledLabelBase>
-        Storage capacity
-      </StyledLabelBase>
-      <Text>
-        Unlimited
-      </Text>
-    </Stack>
  </Stack>
 </Stack>
 `;
--- a/src/Explorer/Controls/Settings/SettingsSubComponents/snapshots/SubSettingsComponent.test.tsx.snap
+++ b/src/Explorer/Controls/Settings/SettingsSubComponents/snapshots/SubSettingsComponent.test.tsx.snap
@@ -40,6 +40,8 @@ exports[`SubSettingsComponent analyticalTimeToLive hidden 1`] = `
        Object {
          "flexContainer": Array [
            Object {
+              "columnGap": "default",
+              "display": "default",
              "selectors": Object {
                ".ms-ChoiceField-field.is-checked::after": Object {
                  "borderColor": "",
@@ -106,6 +108,8 @@ exports[`SubSettingsComponent analyticalTimeToLive hidden 1`] = `
      Object {
        "flexContainer": Array [
          Object {
+            "columnGap": "default",
+            "display": "default",
            "selectors": Object {
              ".ms-ChoiceField-field.is-checked::after": Object {
                "borderColor": "",
@@ -168,6 +172,8 @@ exports[`SubSettingsComponent analyticalTimeToLive hidden 1`] = `
        Object {
          "flexContainer": Array [
            Object {
+              "columnGap": "default",
+              "display": "default",
              "selectors": Object {
                ".ms-ChoiceField-field.is-checked::after": Object {
                  "borderColor": "",
@@ -218,7 +224,10 @@ exports[`SubSettingsComponent analyticalTimeToLive hidden 1`] = `
    <Text>
      Large 
      partition key
-       has been enabled
+       has been enabled.
+    </Text>
+    <Text>
+      Non-hierarchically partitioned container.
    </Text>
  </Stack>
 </Stack>
@@ -264,6 +273,8 @@ exports[`SubSettingsComponent analyticalTimeToLiveSeconds hidden 1`] = `
        Object {
          "flexContainer": Array [
            Object {
+              "columnGap": "default",
+              "display": "default",
              "selectors": Object {
                ".ms-ChoiceField-field.is-checked::after": Object {
                  "borderColor": "",
@@ -330,6 +341,8 @@ exports[`SubSettingsComponent analyticalTimeToLiveSeconds hidden 1`] = `
      Object {
        "flexContainer": Array [
          Object {
+            "columnGap": "default",
+            "display": "default",
            "selectors": Object {
              ".ms-ChoiceField-field.is-checked::after": Object {
                "borderColor": "",
@@ -382,6 +395,8 @@ exports[`SubSettingsComponent analyticalTimeToLiveSeconds hidden 1`] = `
        Object {
          "flexContainer": Array [
            Object {
+              "columnGap": "default",
+              "display": "default",
              "selectors": Object {
                ".ms-ChoiceField-field.is-checked::after": Object {
                  "borderColor": undefined,
@@ -445,6 +460,8 @@ exports[`SubSettingsComponent analyticalTimeToLiveSeconds hidden 1`] = `
        Object {
          "flexContainer": Array [
            Object {
+              "columnGap": "default",
+              "display": "default",
              "selectors": Object {
                ".ms-ChoiceField-field.is-checked::after": Object {
                  "borderColor": "",
@@ -495,7 +512,10 @@ exports[`SubSettingsComponent analyticalTimeToLiveSeconds hidden 1`] = `
    <Text>
      Large 
      partition key
-       has been enabled
+       has been enabled.
+    </Text>
+    <Text>
+      Non-hierarchically partitioned container.
    </Text>
  </Stack>
 </Stack>
@@ -541,6 +561,8 @@ exports[`SubSettingsComponent changeFeedPolicy hidden 1`] = `
        Object {
          "flexContainer": Array [
            Object {
+              "columnGap": "default",
+              "display": "default",
              "selectors": Object {
                ".ms-ChoiceField-field.is-checked::after": Object {
                  "borderColor": "",
@@ -607,6 +629,8 @@ exports[`SubSettingsComponent changeFeedPolicy hidden 1`] = `
      Object {
        "flexContainer": Array [
          Object {
+            "columnGap": "default",
+            "display": "default",
            "selectors": Object {
              ".ms-ChoiceField-field.is-checked::after": Object {
                "borderColor": "",
@@ -659,6 +683,8 @@ exports[`SubSettingsComponent changeFeedPolicy hidden 1`] = `
        Object {
          "flexContainer": Array [
            Object {
+              "columnGap": "default",
+              "display": "default",
              "selectors": Object {
                ".ms-ChoiceField-field.is-checked::after": Object {
                  "borderColor": "",
@@ -734,7 +760,10 @@ exports[`SubSettingsComponent changeFeedPolicy hidden 1`] = `
    <Text>
      Large 
      partition key
-       has been enabled
+       has been enabled.
+    </Text>
+    <Text>
+      Non-hierarchically partitioned container.
    </Text>
  </Stack>
 </Stack>
@@ -780,6 +809,8 @@ exports[`SubSettingsComponent renders 1`] = `
        Object {
          "flexContainer": Array [
            Object {
+              "columnGap": "default",
+              "display": "default",
              "selectors": Object {
                ".ms-ChoiceField-field.is-checked::after": Object {
                  "borderColor": "",
@@ -846,6 +877,8 @@ exports[`SubSettingsComponent renders 1`] = `
      Object {
        "flexContainer": Array [
          Object {
+            "columnGap": "default",
+            "display": "default",
            "selectors": Object {
              ".ms-ChoiceField-field.is-checked::after": Object {
                "borderColor": "",
@@ -898,6 +931,8 @@ exports[`SubSettingsComponent renders 1`] = `
        Object {
          "flexContainer": Array [
            Object {
+              "columnGap": "default",
+              "display": "default",
              "selectors": Object {
                ".ms-ChoiceField-field.is-checked::after": Object {
                  "borderColor": "",
@@ -986,6 +1021,8 @@ exports[`SubSettingsComponent renders 1`] = `
        Object {
          "flexContainer": Array [
            Object {
+              "columnGap": "default",
+              "display": "default",
              "selectors": Object {
                ".ms-ChoiceField-field.is-checked::after": Object {
                  "borderColor": "",
@@ -1036,7 +1073,10 @@ exports[`SubSettingsComponent renders 1`] = `
    <Text>
      Large 
      partition key
-       has been enabled
+       has been enabled.
+    </Text>
+    <Text>
+      Non-hierarchically partitioned container.
    </Text>
  </Stack>
 </Stack>
@@ -1082,6 +1122,8 @@ exports[`SubSettingsComponent timeToLiveSeconds hidden 1`] = `
        Object {
          "flexContainer": Array [
            Object {
+              "columnGap": "default",
+              "display": "default",
              "selectors": Object {
                ".ms-ChoiceField-field.is-checked::after": Object {
                  "borderColor": undefined,
@@ -1123,6 +1165,8 @@ exports[`SubSettingsComponent timeToLiveSeconds hidden 1`] = `
      Object {
        "flexContainer": Array [
          Object {
+            "columnGap": "default",
+            "display": "default",
            "selectors": Object {
              ".ms-ChoiceField-field.is-checked::after": Object {
                "borderColor": "",
@@ -1175,6 +1219,8 @@ exports[`SubSettingsComponent timeToLiveSeconds hidden 1`] = `
        Object {
          "flexContainer": Array [
            Object {
+              "columnGap": "default",
+              "display": "default",
              "selectors": Object {
                ".ms-ChoiceField-field.is-checked::after": Object {
                  "borderColor": "",
@@ -1263,6 +1309,8 @@ exports[`SubSettingsComponent timeToLiveSeconds hidden 1`] = `
        Object {
          "flexContainer": Array [
            Object {
+              "columnGap": "default",
+              "display": "default",
              "selectors": Object {
                ".ms-ChoiceField-field.is-checked::after": Object {
                  "borderColor": "",
@@ -1313,7 +1361,10 @@ exports[`SubSettingsComponent timeToLiveSeconds hidden 1`] = `
    <Text>
      Large 
      partition key
-       has been enabled
+       has been enabled.
+    </Text>
+    <Text>
+      Non-hierarchically partitioned container.
    </Text>
  </Stack>
 </Stack>
--- a/src/Explorer/Controls/Settings/snapshots/SettingsRenderUtils.test.tsx.snap
+++ b/src/Explorer/Controls/Settings/snapshots/SettingsRenderUtils.test.tsx.snap
@@ -2,154 +2,60 @@

 exports[`SettingsUtils functions render 1`] = `
 <Fragment>
-  <Text>
-    Your 
-    container
-     throughput will automatically scale from
-     
-    <b>
-      100
-       RU/s (10% of max RU/s) -
-       
-      1000
-       RU/s
-    </b>
-     
-    based on usage.
-    <br />
-  </Text>
-  <Text>
-    After the first 
-    10
-     GB of data stored, the max RU/s will be automatically upgraded based on the new storage value.
-    <StyledLinkBase
-      href="https://aka.ms/cosmos-autoscale-info"
-      target="_blank"
+  <Stack>
+    <Text
+      style={
+        Object {
+          "fontWeight": 600,
+        }
+      }
    >
-       
-      Learn more
-    </StyledLinkBase>
-    .
+      Cost estimate*
    </Text>
-  <Text>
-    Your 
-    database
-     throughput will automatically scale from
-     
-    <b>
-      100
-       RU/s (10% of max RU/s) -
-       
-      1000
-       RU/s
-    </b>
-     
-    based on usage.
-    <br />
-  </Text>
-  <Text>
-    After the first 
-    10
-     GB of data stored, the max RU/s will be automatically upgraded based on the new storage value.
-    <StyledLinkBase
-      href="https://aka.ms/cosmos-autoscale-info"
-      target="_blank"
+    <Text
+      style={
+        Object {
+          "fontWeight": 600,
+          "marginTop": 15,
+        }
+      }
    >
-       
-      Learn more
-    </StyledLinkBase>
-    .
+      How we calculate this
    </Text>
    <Stack
-    styles={
-      Object {
-        "root": Object {
-          "width": 600,
-        },
-      }
-    }
-    tokens={
-      Object {
-        "childrenGap": 10,
-      }
-    }
-  >
-    <StyledWithViewportComponent
-      columns={
-        Array [
-          Object {
-            "fieldName": "costType",
-            "isResizable": true,
-            "key": "costType",
-            "maxWidth": 200,
-            "minWidth": 100,
-            "name": "",
-          },
-          Object {
-            "fieldName": "hourly",
-            "isResizable": true,
-            "key": "hourly",
-            "maxWidth": 200,
-            "minWidth": 100,
-            "name": "Hourly",
-          },
-          Object {
-            "fieldName": "daily",
-            "isResizable": true,
-            "key": "daily",
-            "maxWidth": 200,
-            "minWidth": 100,
-            "name": "Daily",
-          },
-          Object {
-            "fieldName": "monthly",
-            "isResizable": true,
-            "key": "monthly",
-            "maxWidth": 200,
-            "minWidth": 100,
-            "name": "Monthly",
-          },
-        ]
-      }
-      disableSelectionZone={true}
-      items={
-        Array [
-          Object {
-            "costType": <Text>
-              Current Cost
-            </Text>,
-            "daily": <Text>
-              $ 24.48
-            </Text>,
-            "hourly": <Text>
-              $ 1.02
-            </Text>,
-            "monthly": <Text>
-              $ 744.6
-            </Text>,
-          },
-        ]
-      }
-      layoutMode={1}
-      onRenderRow={[Function]}
-      selectionMode={0}
-    />
-    <Text
      id="throughputSpendElement"
+      style={
+        Object {
+          "marginTop": 5,
+        }
+      }
    >
-      (
-      regions: 
-       
+      <span>
        2
-      , 
+         region
+        <span>
+          s
+        </span>
+      </span>
+      <span>
        1000
-       RU/s, 
+         RU/s
+      </span>
+      <span>
        ¥
        0.00051
-      /RU)
-    </Text>
-    <Text>
+        /RU
+      </span>
+    </Stack>
+    <Text
+      style={
+        Object {
+          "marginTop": 15,
+        }
+      }
+    >
      <em>
+        *
        This cost is an estimate and may vary based on the regions where your account is deployed and potential discounts applied to your account
      </em>
    </Text>
@@ -205,19 +111,6 @@ exports[`SettingsUtils functions render 1`] = `
  >
    You have not saved the latest changes made to your indexing policy. Please click save to confirm the changes.
  </Text>
-  <Text
-    id="updateThroughputBeyondLimitWarningMessage"
-    styles={
-      Object {
-        "root": Object {
-          "color": "windowtext",
-          "fontSize": 14,
-        },
-      }
-    }
-  >
-    You are about to request an increase in throughput beyond the pre-allocated capacity. The service will scale out and increase throughput for the selected container. This operation will take 1-3 business days to complete. You can track the status of this request in Notifications.
-  </Text>
  <Text
    id="updateThroughputDelayedApplyWarningMessage"
    styles={
--- a/src/Explorer/Controls/Tabs/TabComponent.tsx
+++ b/src/Explorer/Controls/Tabs/TabComponent.tsx
@@ -46,10 +46,13 @@ export class TabComponent extends React.Component<TabComponentProps> {
      }

      let className = "toggleSwitch";
+      let ariaselected;
      if (index === this.props.currentTabIndex) {
        className += " selectedToggle";
+        ariaselected = true;
      } else {
        className += " unselectedToggle";
+        ariaselected = false;
      }

      return (
@@ -57,9 +60,10 @@ export class TabComponent extends React.Component<TabComponentProps> {
          <AccessibleElement
            as="span"
            className={className}
-            role="presentation"
+            role="tab"
            onActivated={() => this.setActiveTab(index)}
            aria-label={`Select tab: ${tab.title}`}
+            aria-selected={ariaselected}
          >
            {tab.title}
          </AccessibleElement>
@@ -77,7 +81,11 @@ export class TabComponent extends React.Component<TabComponentProps> {

    return (
      <div className="tabComponentContainer">
-        {!this.props.hideHeader && <div className="tabs tabSwitch">{this.renderTabTitles()}</div>}
+        {!this.props.hideHeader && (
+          <div className="tabs tabSwitch" role="tablist">
+            {this.renderTabTitles()}
+          </div>
+        )}
        <div className={className}>{currentTabContent.render()}</div>
      </div>
    );
--- a/src/Explorer/Controls/ThroughputInput/ThroughputInput.test.tsx
+++ b/src/Explorer/Controls/ThroughputInput/ThroughputInput.test.tsx
@@ -23,12 +23,12 @@ describe("ThroughputInput Pane", () => {
  });

  it("should switch mode properly", () => {
-    wrapper.find('[aria-label="Manual mode"]').simulate("change");
+    wrapper.find('[aria-label="Manual database throughput"]').simulate("change");
    expect(wrapper.find('[aria-label="Throughput header"]').at(0).text()).toBe(
      "Container throughput (400 - unlimited RU/s)"
    );

-    wrapper.find('[aria-label="Autoscale mode"]').simulate("change");
+    wrapper.find('[aria-label="Autoscale database throughput"]').simulate("change");
    expect(wrapper.find('[aria-label="Throughput header"]').at(0).text()).toBe("Container throughput (autoscale)");
  });
 });
--- a/src/Explorer/Controls/ThroughputInput/ThroughputInput.tsx
+++ b/src/Explorer/Controls/ThroughputInput/ThroughputInput.tsx
@@ -185,10 +185,11 @@ export const ThroughputInput: FunctionComponent<ThroughputInputProps> = ({
      </Stack>

      <Stack horizontal verticalAlign="center">
+        <div role="radiogroup">
          <input
            id="Autoscale-input"
            className="throughputInputRadioBtn"
-          aria-label="Autoscale mode"
+            aria-label="Autoscale database throughput"
            aria-required={true}
            checked={isAutoscaleSelected}
            type="radio"
@@ -203,7 +204,7 @@ export const ThroughputInput: FunctionComponent<ThroughputInputProps> = ({
          <input
            id="Manual-input"
            className="throughputInputRadioBtn"
-          aria-label="Manual mode"
+            aria-label="Manual database throughput"
            checked={!isAutoscaleSelected}
            type="radio"
            aria-required={true}
@@ -214,6 +215,7 @@ export const ThroughputInput: FunctionComponent<ThroughputInputProps> = ({
          <label className="throughputInputRadioBtnLabel" htmlFor="Manual-input">
            Manual
          </label>
+        </div>
      </Stack>

      {isAutoscaleSelected && (
@@ -248,7 +250,7 @@ export const ThroughputInput: FunctionComponent<ThroughputInputProps> = ({
            step={AutoPilotUtils.autoPilotIncrementStep}
            min={AutoPilotUtils.autoPilotThroughput1K}
            value={throughput.toString()}
-            aria-label="Max request units per second"
+            ariaLabel={`${isDatabase ? "Database" : getCollectionName()} max RU/s`}
            required={true}
            errorMessage={throughputError}
          />
--- a/src/Explorer/Controls/ThroughputInput/snapshots/ThroughputInput.test.tsx.snap
+++ b/src/Explorer/Controls/ThroughputInput/snapshots/ThroughputInput.test.tsx.snap
@@ -653,14 +653,17 @@ exports[`ThroughputInput Pane should render Default properly 1`] = `
    >
      <div
        className="ms-Stack css-58"
+      >
+        <div
+          key=".0:$.0"
+          role="radiogroup"
        >
          <input
-          aria-label="Autoscale mode"
+            aria-label="Autoscale database throughput"
            aria-required={true}
            checked={true}
            className="throughputInputRadioBtn"
            id="Autoscale-input"
-          key=".0:$.0"
            onChange={[Function]}
            role="radio"
            tabIndex={0}
@@ -669,17 +672,15 @@ exports[`ThroughputInput Pane should render Default properly 1`] = `
          <label
            className="throughputInputRadioBtnLabel"
            htmlFor="Autoscale-input"
-          key=".0:$.1"
          >
            Autoscale
          </label>
          <input
-          aria-label="Manual mode"
+            aria-label="Manual database throughput"
            aria-required={true}
            checked={false}
            className="throughputInputRadioBtn"
            id="Manual-input"
-          key=".0:$.2"
            onChange={[Function]}
            role="radio"
            tabIndex={0}
@@ -688,11 +689,11 @@ exports[`ThroughputInput Pane should render Default properly 1`] = `
          <label
            className="throughputInputRadioBtnLabel"
            htmlFor="Manual-input"
-          key=".0:$.3"
          >
            Manual
          </label>
        </div>
+      </div>
    </Stack>
    <Stack
      className="throughputInputSpacing"
@@ -1639,7 +1640,7 @@ exports[`ThroughputInput Pane should render Default properly 1`] = `
          </div>
        </Stack>
        <StyledTextFieldBase
-          aria-label="Max request units per second"
+          ariaLabel="Container max RU/s"
          errorMessage=""
          id="autoscaleRUValueField"
          key=".0:$.2"
@@ -1662,7 +1663,7 @@ exports[`ThroughputInput Pane should render Default properly 1`] = `
          value="4000"
        >
          <TextFieldBase
-            aria-label="Max request units per second"
+            ariaLabel="Container max RU/s"
            deferredValidationTime={200}
            errorMessage=""
            id="autoscaleRUValueField"
@@ -1960,6 +1961,7 @@ exports[`ThroughputInput Pane should render Default properly 1`] = `
                >
                  <input
                    aria-invalid={false}
+                    aria-label="Container max RU/s"
                    className="ms-TextField-field field-64"
                    id="autoscaleRUValueField"
                    min={1000}
--- a/src/Explorer/Controls/TreeComponent/TreeComponent.tsx
+++ b/src/Explorer/Controls/TreeComponent/TreeComponent.tsx
@@ -195,7 +195,7 @@ export class TreeNodeComponent extends React.Component<TreeNodeComponentProps, T
        </div>
        {node.children && (
          <AnimateHeight duration={TreeNodeComponent.transitionDurationMS} height={this.state.isExpanded ? "auto" : 0}>
-            <div className="nodeChildren" data-test={node.label}>
+            <div className="nodeChildren" data-test={node.label} role="group">
              {TreeNodeComponent.getSortedChildren(node).map((childNode: TreeNode) => (
                <TreeNodeComponent
                  key={`${childNode.label}-${generation + 1}-${childNode.timestamp}`}
--- a/src/Explorer/Controls/TreeComponent/snapshots/TreeComponent.test.tsx.snap
+++ b/src/Explorer/Controls/TreeComponent/snapshots/TreeComponent.test.tsx.snap
@@ -100,6 +100,7 @@ exports[`TreeNodeComponent does not render children by default 1`] = `
    <div
      className="nodeChildren"
      data-test="label"
+      role="group"
    >
      <TreeNodeComponent
        generation={3}
@@ -251,6 +252,7 @@ exports[`TreeNodeComponent renders a simple node (sorted children, expanded) 1`]
    <div
      className="nodeChildren"
      data-test="label"
+      role="group"
    >
      <TreeNodeComponent
        generation={13}
@@ -352,6 +354,7 @@ exports[`TreeNodeComponent renders loading icon 1`] = `
    <div
      className="nodeChildren"
      data-test="label"
+      role="group"
    />
  </AnimateHeight>
 </div>
@@ -465,6 +468,7 @@ exports[`TreeNodeComponent renders sorted children, expanded, leaves and parents
    <div
      className="nodeChildren"
      data-test="label"
+      role="group"
    >
      <TreeNodeComponent
        generation={13}
@@ -594,6 +598,7 @@ exports[`TreeNodeComponent renders unsorted children by default 1`] = `
    <div
      className="nodeChildren"
      data-test="label"
+      role="group"
    >
      <TreeNodeComponent
        generation={3}
--- a/src/Explorer/Controls/TreeComponent/treeComponent.less
+++ b/src/Explorer/Controls/TreeComponent/treeComponent.less
@@ -3,7 +3,7 @@
 .treeComponent {
  .nodeItem {
    &:focus {
-      outline: 1px dashed @AccentMedium;
+      outline: 2px @AccentMedium;
    }

    .treeNodeHeader {
--- a/src/Explorer/DataSamples/ContainerSampleGenerator.ts
+++ b/src/Explorer/DataSamples/ContainerSampleGenerator.ts
@@ -22,10 +22,17 @@ export class ContainerSampleGenerator {
  /**
   * Factory function to load the json data file
   */
-  public static async createSampleGeneratorAsync(container: Explorer): Promise<ContainerSampleGenerator> {
+  public static async createSampleGeneratorAsync(
+    container: Explorer,
+    isCopilot?: boolean
+  ): Promise<ContainerSampleGenerator> {
    const generator = new ContainerSampleGenerator(container);
    let dataFileContent: any;
-    if (userContext.apiType === "Gremlin") {
+    if (isCopilot) {
+      dataFileContent = await import(
+        /* webpackChunkName: "queryCopilotSampleData" */ "../../../sampleData/queryCopilotSampleData.json"
+      );
+    } else if (userContext.apiType === "Gremlin") {
      dataFileContent = await import(
        /* webpackChunkName: "gremlinSampleJsonData" */ "../../../sampleData/gremlinSampleData.json"
      );
--- a/src/Explorer/Explorer.tsx
+++ b/src/Explorer/Explorer.tsx
@@ -577,7 +577,7 @@ export default class Explorer {
    try {
      await Promise.all(
        databasesToLoad.map(async (database: ViewModels.Database) => {
-          await database.loadCollections();
+          await database.loadCollections(true);
          const isNewDatabase: boolean = _.some(newDatabases, (db: ViewModels.Database) => db.id() === database.id());
          if (isNewDatabase) {
            database.expandDatabase();
--- a/src/Explorer/Graph/GraphExplorerComponent/D3ForceGraph.ts
+++ b/src/Explorer/Graph/GraphExplorerComponent/D3ForceGraph.ts
@@ -729,6 +729,7 @@ export class D3ForceGraph implements GraphRenderer {
    var iconGroup = newNodes
      .append("g")
      .attr("class", "iconContainer")
+      .attr("role", "group")
      .attr("tabindex", 0)
      .attr("aria-label", (d: D3Node) => {
        return this.retrieveNodeCaption(d);
--- a/src/Explorer/Graph/GraphExplorerComponent/GraphExplorer.tsx
+++ b/src/Explorer/Graph/GraphExplorerComponent/GraphExplorer.tsx
@@ -6,9 +6,9 @@ import * as React from "react";
 import LoadGraphIcon from "../../../../images/LoadGraph.png";
 import LoadingIndicatorIcon from "../../../../images/LoadingIndicator_3Squares.gif";
 import * as Constants from "../../../Common/Constants";
+import { getErrorMessage } from "../../../Common/ErrorHandlingUtils";
 import { queryDocuments } from "../../../Common/dataAccess/queryDocuments";
 import { queryDocumentsPage } from "../../../Common/dataAccess/queryDocumentsPage";
-import { getErrorMessage } from "../../../Common/ErrorHandlingUtils";
 import * as DataModels from "../../../Contracts/DataModels";
 import * as ViewModels from "../../../Contracts/ViewModels";
 import { InputProperty } from "../../../Contracts/ViewModels";
@@ -182,7 +182,8 @@ export class GraphExplorer extends React.Component<GraphExplorerProps, GraphExpl
  public static readonly WITHOUT_STEP_ARGS_MAX_CHARS = 10000; // maximums char size of the without() step parameter
  public static readonly ROOT_LIST_PAGE_SIZE = 100;
  private static readonly MAX_LATEST_QUERIES = 10;
-  private static readonly MAX_RESULT_SIZE = 10000;
+  // TODO This prevents loading too much data in GraphExplorer and d3. A better is to cap the size of the result, rather than the number of items in the array.
+  private static readonly MAX_RESULT_SIZE = 100_000;

  private static readonly TAB_INDEX_JSON = 0;
  private static readonly TAB_INDEX_GRAPH = 1;
--- a/src/Explorer/Graph/GraphExplorerComponent/GraphVizComponent.tsx
+++ b/src/Explorer/Graph/GraphExplorerComponent/GraphVizComponent.tsx
@@ -40,6 +40,7 @@ export class GraphVizComponent extends React.Component<GraphVizComponentProps> {
            {/* svg load more icon inlined as-is here: remove the style="fill:#374649;" so we can override it */}
            <svg
              role="img"
+              aria-label="graph"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              xmlnsXlink="http://www.w3.org/1999/xlink"
@@ -135,6 +136,7 @@ export class GraphVizComponent extends React.Component<GraphVizComponentProps> {
          <g id="triangleRight">
            <svg
              role="img"
+              aria-label="graph"
              version="1.1"
              id="Layer_1"
              xmlns="http://www.w3.org/2000/svg"
--- a/src/Explorer/Graph/GraphExplorerComponent/GremlinClient.ts
+++ b/src/Explorer/Graph/GraphExplorerComponent/GremlinClient.ts
@@ -31,7 +31,7 @@ export class GremlinClient {
  public client: GremlinSimpleClient;
  public pendingResults: Map<string, PendingResultData>; // public for testing purposes
  private maxResultSize: number;
-  private static readonly PENDING_REQUEST_TIMEOUT_MS = 6 /* minutes */ * 60 /* seconds */ * 1000 /* ms */;
+  private static readonly PENDING_REQUEST_TIMEOUT_MS = 1 /* hour */ * 3_600 /* seconds */ * 1_000 /* ms */;
  private static readonly TIMEOUT_ERROR_MSG = `Pending request timed out (${GremlinClient.PENDING_REQUEST_TIMEOUT_MS} ms)`;
  private static readonly LOG_AREA = "GremlinClient";

--- a/src/Explorer/Graph/GraphExplorerComponent/MiddlePaneComponent.tsx
+++ b/src/Explorer/Graph/GraphExplorerComponent/MiddlePaneComponent.tsx
@@ -17,19 +17,21 @@ export class MiddlePaneComponent extends React.Component<MiddlePaneComponentProp
      <div className="middlePane">
        <div className="graphTitle">
          <span className="paneTitle">Graph</span>
-          <span
+          <button
+            style={{ border: "none", background: "none" }}
            className="graphExpandCollapseBtn pull-right"
            onClick={this.props.toggleExpandGraph}
            role="button"
            aria-expanded={this.props.isTabsContentExpanded}
-            aria-name="View graph in full screen"
-            tabIndex={0}
+            aria-label={
+              this.props.isTabsContentExpanded ? "Collapse graph to minimized view" : "View graph in full screen"
+            }
          >
            <img
              src={this.props.isTabsContentExpanded ? CollapseArrowIcon : ExpandIcon}
              alt={this.props.isTabsContentExpanded ? "collapse graph content" : "expand graph content"}
            />
-          </span>
+          </button>
        </div>
        <div className="maingraphContainer">
          <GraphVizComponent forceGraphParams={this.props.graphVizProps.forceGraphParams} />
--- a/src/Explorer/Graph/NewVertexComponent/NewVertexComponent.test.tsx
+++ b/src/Explorer/Graph/NewVertexComponent/NewVertexComponent.test.tsx
@@ -107,11 +107,11 @@ describe("New Vertex Component", () => {
  it("should call onTypeChange method on type dropdown change", () => {
    const DOWN_ARROW = { keyCode: 40 };
    const onTypeChange = jest.fn();
-    const dropdown = screen.getByRole("listbox");
+    const dropdown = screen.getByRole("combobox");
    dropdown.onclick = onTypeChange();
    dropdown.onkeydown = onTypeChange();

-    fireEvent.keyDown(screen.getByRole("listbox"), DOWN_ARROW);
+    fireEvent.keyDown(screen.getByRole("combobox"), DOWN_ARROW);
    fireEvent.click(screen.getByText(/number/));
    expect(onTypeChange).toHaveBeenCalled();
  });
--- a/src/Explorer/Graph/NewVertexComponent/NewVertexComponent.tsx
+++ b/src/Explorer/Graph/NewVertexComponent/NewVertexComponent.tsx
@@ -145,6 +145,7 @@ export const NewVertexComponent: FunctionComponent<INewVertexComponentProps> = (
                    type="text"
                    id="propertyKeyNewVertexPane"
                    componentRef={input}
+                    aria-required="true"
                    placeholder="Key"
                    autoComplete="off"
                    aria-label={`Enter value for propery ${index + 1}`}
@@ -152,6 +153,8 @@ export const NewVertexComponent: FunctionComponent<INewVertexComponentProps> = (
                    onChange={(event: React.ChangeEvent<HTMLInputElement>) => onKeyChange(event, index)}
                  />
                </div>
+                <span className="mandatoryStar">*&nbsp;</span>
+
                <div className="valueCol">
                  <TextField
                    className="edgeInput"
@@ -165,7 +168,7 @@ export const NewVertexComponent: FunctionComponent<INewVertexComponentProps> = (
                </div>
                <div>
                  <Dropdown
-                    role="listbox"
+                    role="combobox"
                    placeholder="Select an option"
                    defaultSelectedKey={data.values[0].type}
                    style={{ width: 100 }}
--- a/src/Explorer/Menus/CommandBar/CommandBarComponentButtonFactory.test.ts
+++ b/src/Explorer/Menus/CommandBar/CommandBarComponentButtonFactory.test.ts
@@ -25,7 +25,7 @@ describe("CommandBarComponentButtonFactory tests", () => {
      updateUserContext({
        databaseAccount: {
          properties: {
-            capabilities: [{ name: "EnableTable" }],
+            capabilities: [{ name: "EnableMongo" }],
          },
        } as DatabaseAccount,
      });
@@ -38,6 +38,38 @@ describe("CommandBarComponentButtonFactory tests", () => {
      );
      expect(enableAzureSynapseLinkBtn).toBeDefined();
    });
+
+    it("Button should not be visible for Tables API", () => {
+      updateUserContext({
+        databaseAccount: {
+          properties: {
+            capabilities: [{ name: "EnableTable" }],
+          },
+        } as DatabaseAccount,
+      });
+
+      const buttons = CommandBarComponentButtonFactory.createStaticCommandBarButtons(mockExplorer, selectedNodeState);
+      const enableAzureSynapseLinkBtn = buttons.find(
+        (button) => button.commandButtonLabel === enableAzureSynapseLinkBtnLabel
+      );
+      expect(enableAzureSynapseLinkBtn).toBeUndefined();
+    });
+
+    it("Button should not be visible for Cassandra API", () => {
+      updateUserContext({
+        databaseAccount: {
+          properties: {
+            capabilities: [{ name: "EnableCassandra" }],
+          },
+        } as DatabaseAccount,
+      });
+
+      const buttons = CommandBarComponentButtonFactory.createStaticCommandBarButtons(mockExplorer, selectedNodeState);
+      const enableAzureSynapseLinkBtn = buttons.find(
+        (button) => button.commandButtonLabel === enableAzureSynapseLinkBtnLabel
+      );
+      expect(enableAzureSynapseLinkBtn).toBeUndefined();
+    });
  });

  describe("Enable notebook button", () => {
--- a/src/Explorer/Menus/CommandBar/CommandBarComponentButtonFactory.tsx
+++ b/src/Explorer/Menus/CommandBar/CommandBarComponentButtonFactory.tsx
@@ -51,12 +51,14 @@ export function createStaticCommandBarButtons(
  const buttons: CommandButtonComponentProps[] = [];

  buttons.push(newCollectionBtn);
-
+  if (userContext.apiType !== "Tables" && userContext.apiType !== "Cassandra") {
    const addSynapseLink = createOpenSynapseLinkDialogButton(container);
+
    if (addSynapseLink) {
      buttons.push(createDivider());
      buttons.push(addSynapseLink);
    }
+  }

  if (userContext.apiType !== "Tables") {
    newCollectionBtn.children = [createNewCollectionGroup(container)];
@@ -202,6 +204,7 @@ export function createControlCommandBarButtons(container: Explorer): CommandButt
  if (showOpenFullScreen) {
    const label = "Open Full Screen";
    const fullScreenButton: CommandButtonComponentProps = {
+      id: "openFullScreenBtn",
      iconSrc: OpenInTabIcon,
      iconAlt: label,
      onCommandClick: () => {
--- a/src/Explorer/Menus/NotificationConsole/NotificationConsoleComponent.tsx
+++ b/src/Explorer/Menus/NotificationConsole/NotificationConsoleComponent.tsx
@@ -147,12 +147,9 @@ export class NotificationConsoleComponent extends React.Component<
            <div className="notificationConsoleControls">
              <Dropdown
                label="Filter:"
-                role="combobox"
                selectedKey={this.state.selectedFilter}
                options={NotificationConsoleComponent.FilterOptions}
                onChange={this.onFilterSelected.bind(this)}
-                aria-labelledby="consoleFilterLabel"
-                aria-label={this.state.selectedFilter}
              />
              <span className="consoleSplitter" />
              <span
--- a/src/Explorer/Menus/NotificationConsole/snapshots/NotificationConsoleComponent.test.tsx.snap
+++ b/src/Explorer/Menus/NotificationConsole/snapshots/NotificationConsoleComponent.test.tsx.snap
@@ -112,8 +112,6 @@ exports[`NotificationConsoleComponent renders the console 1`] = `
        className="notificationConsoleControls"
      >
        <Dropdown
-          aria-label="All"
-          aria-labelledby="consoleFilterLabel"
          label="Filter:"
          onChange={[Function]}
          options={
@@ -136,7 +134,6 @@ exports[`NotificationConsoleComponent renders the console 1`] = `
              },
            ]
          }
-          role="combobox"
          selectedKey="All"
        />
        <span
@@ -278,8 +275,6 @@ exports[`NotificationConsoleComponent renders the console 2`] = `
        className="notificationConsoleControls"
      >
        <Dropdown
-          aria-label="All"
-          aria-labelledby="consoleFilterLabel"
          label="Filter:"
          onChange={[Function]}
          options={
@@ -302,7 +297,6 @@ exports[`NotificationConsoleComponent renders the console 2`] = `
              },
            ]
          }
-          role="combobox"
          selectedKey="All"
        />
        <span
--- a/src/Explorer/Notebook/NotebookComponent/InMemoryContentProviderUtils.test.ts
+++ b/src/Explorer/Notebook/NotebookComponent/InMemoryContentProviderUtils.test.ts
@@ -0,0 +1,23 @@
+import * as InMemoryContentProviderUtils from "./ContentProviders/InMemoryContentProviderUtils";
+
+describe("fromContentUri", () => {
+  it("fromContentUri should return valid result", () => {
+    const contentUri = "memory://resource/path";
+    const result = "resource";
+
+    expect(InMemoryContentProviderUtils.fromContentUri(contentUri)).toEqual(result);
+  });
+
+  it("fromContentUri should return undefined on invalid input", () => {
+    const contentUri = "invalid";
+
+    expect(InMemoryContentProviderUtils.fromContentUri(contentUri)).toEqual(undefined);
+  });
+
+  it("toContentUri should return valid result", () => {
+    const path = "resource/path";
+    const result = "memory://resource/path";
+
+    expect(InMemoryContentProviderUtils.toContentUri(path)).toEqual(result);
+  });
+});
--- a/src/Explorer/Panes/AddCollectionPanel.tsx
+++ b/src/Explorer/Panes/AddCollectionPanel.tsx
@@ -57,7 +57,7 @@ const SharedDatabaseDefault: DataModels.IndexingPolicy = {
  ],
 };

-const AllPropertiesIndexed: DataModels.IndexingPolicy = {
+export const AllPropertiesIndexed: DataModels.IndexingPolicy = {
  indexingMode: "consistent",
  automatic: true,
  includedPaths: [
@@ -274,6 +274,7 @@ export class AddCollectionPanel extends React.Component<AddCollectionPanelProps,
            </Stack>

            <Stack horizontal verticalAlign="center">
+              <div role="radiogroup">
                <input
                  className="panelRadioBtn"
                  checked={this.state.createNewDatabase}
@@ -300,6 +301,7 @@ export class AddCollectionPanel extends React.Component<AddCollectionPanelProps,
                  onChange={this.onUseExistingDatabaseRadioBtnChange.bind(this)}
                />
                <span className="panelRadioBtnLabel">Use existing</span>
+              </div>
            </Stack>

            {this.state.createNewDatabase && (
@@ -401,6 +403,7 @@ export class AddCollectionPanel extends React.Component<AddCollectionPanelProps,
                content={`Unique identifier for the ${getCollectionName().toLocaleLowerCase()} and used for id-based routing through REST and all SDKs.`}
              >
                <Icon
+                  role="button"
                  iconName="Info"
                  className="panelInfoIcon"
                  tabIndex={0}
@@ -631,18 +634,18 @@ export class AddCollectionPanel extends React.Component<AddCollectionPanelProps,
              {userContext.apiType === "SQL" && (
                <Stack className="panelGroupSpacing">
                  <DefaultButton
-                    styles={{ root: { padding: 0, width: 250, height: 30 }, label: { fontSize: 12 } }}
+                    styles={{ root: { padding: 0, width: 200, height: 30 }, label: { fontSize: 12 } }}
                    hidden={this.state.useHashV1}
                    disabled={this.state.subPartitionKeys.length >= Constants.BackendDefaults.maxNumMultiHashPartition}
                    onClick={() => this.setState({ subPartitionKeys: [...this.state.subPartitionKeys, ""] })}
                  >
-                    Add hierarchical partition key (preview)
+                    Add hierarchical partition key
                  </DefaultButton>
                  {this.state.subPartitionKeys.length > 0 && (
                    <Text variant="small">
                      <Icon iconName="InfoSolid" className="removeIcon" tabIndex={0} /> This feature allows you to
-                      partition your data with up to three levels of keys for better data distribution. Requires preview
-                      version of .NET V3 or Java V4 SDK.{" "}
+                      partition your data with up to three levels of keys for better data distribution. Requires .NET
+                      V3, Java V4 SDK, or preview JavaScript V3 SDK.{" "}
                      <Link href="https://aka.ms/cosmos-hierarchical-partitioning" target="_blank">
                        Learn more
                      </Link>
@@ -795,13 +798,14 @@ export class AddCollectionPanel extends React.Component<AddCollectionPanelProps,
                    iconName="Info"
                    className="panelInfoIcon"
                    tabIndex={0}
-                    ariaLabel='Enable analytical store capability to perform near real-time analytics on your operational data, without
-        impacting the performance of transactional workloads.{" "}'
+                    ariaLabel="Enable analytical store capability to perform near real-time analytics on your operational data, without
+        impacting the performance of transactional workloads."
                  />
                </TooltipHost>
              </Stack>

              <Stack horizontal verticalAlign="center">
+                <div role="radiogroup">
                  <input
                    className="panelRadioBtn"
                    checked={this.state.enableAnalyticalStore}
@@ -831,6 +835,7 @@ export class AddCollectionPanel extends React.Component<AddCollectionPanelProps,
                    onChange={this.onDisableAnalyticalStoreRadioBtnChange.bind(this)}
                  />
                  <span className="panelRadioBtnLabel">Off</span>
+                </div>
              </Stack>

              {!this.isSynapseLinkEnabled() && (
@@ -979,7 +984,7 @@ export class AddCollectionPanel extends React.Component<AddCollectionPanelProps,
  private getPartitionKeyPlaceHolder(index?: number): string {
    switch (userContext.apiType) {
      case "Mongo":
-        return "e.g., address.zipCode";
+        return "e.g., categoryId";
      case "Gremlin":
        return "e.g., /address";
      case "SQL":
@@ -1111,7 +1116,7 @@ export class AddCollectionPanel extends React.Component<AddCollectionPanelProps,
      return userContext.apiType === "SQL" ? "/pk" : "pk";
    }
    if (this.props.isQuickstart) {
-      return userContext.apiType === "SQL" ? "/address" : "address";
+      return userContext.apiType === "SQL" ? "/categoryId" : "categoryId";
    }
    return "";
  }
--- a/src/Explorer/Panes/PanelInfoErrorComponent.tsx
+++ b/src/Explorer/Panes/PanelInfoErrorComponent.tsx
@@ -48,7 +48,7 @@ export const PanelInfoErrorComponent: React.FunctionComponent<PanelInfoErrorProp
          )}
        </Text>
        {showErrorDetails && (
-          <a className="paneErrorLink" role="link" onClick={expandConsole} tabIndex={0} onKeyPress={expandConsole}>
+          <a className="paneErrorLink" role="button" onClick={expandConsole} tabIndex={0} onKeyPress={expandConsole}>
            More details
          </a>
        )}
--- a/src/Explorer/Panes/SaveQueryPane/SaveQueryPane.tsx
+++ b/src/Explorer/Panes/SaveQueryPane/SaveQueryPane.tsx
@@ -4,11 +4,11 @@ import React, { FunctionComponent, useState } from "react";
 import { Areas, SavedQueries } from "../../../Common/Constants";
 import { getErrorMessage, getErrorStack } from "../../../Common/ErrorHandlingUtils";
 import { Query } from "../../../Contracts/DataModels";
-import { useSidePanel } from "../../../hooks/useSidePanel";
-import { useTabs } from "../../../hooks/useTabs";
 import { Action } from "../../../Shared/Telemetry/TelemetryConstants";
 import { traceFailure, traceStart, traceSuccess } from "../../../Shared/Telemetry/TelemetryProcessor";
 import { logConsoleError } from "../../../Utils/NotificationConsoleUtils";
+import { useSidePanel } from "../../../hooks/useSidePanel";
+import { useTabs } from "../../../hooks/useTabs";
 import Explorer from "../../Explorer";
 import { NewQueryTab } from "../../Tabs/QueryTab/QueryTab";
 import { useDatabases } from "../../useDatabases";
@@ -16,9 +16,13 @@ import { RightPaneForm, RightPaneFormProps } from "../RightPaneForm/RightPaneFor

 interface SaveQueryPaneProps {
  explorer: Explorer;
+  queryToSave?: string;
 }

-export const SaveQueryPane: FunctionComponent<SaveQueryPaneProps> = ({ explorer }: SaveQueryPaneProps): JSX.Element => {
+export const SaveQueryPane: FunctionComponent<SaveQueryPaneProps> = ({
+  explorer,
+  queryToSave,
+}: SaveQueryPaneProps): JSX.Element => {
  const closeSidePanel = useSidePanel((state) => state.closeSidePanel);
  const [isLoading, { setTrue: setLoadingTrue, setFalse: setLoadingFalse }] = useBoolean(false);
  const [formError, setFormError] = useState<string>("");
@@ -36,7 +40,7 @@ export const SaveQueryPane: FunctionComponent<SaveQueryPaneProps> = ({ explorer
    }

    const queryTab = useTabs.getState().activeTab as NewQueryTab;
-    const query: string = queryTab && queryTab.iTabAccessor.onSaveClickEvent();
+    const query: string = queryToSave || queryTab?.iTabAccessor.onSaveClickEvent();

    if (!queryName || queryName.length === 0) {
      setFormError("No query name specified");
@@ -62,8 +66,8 @@ export const SaveQueryPane: FunctionComponent<SaveQueryPaneProps> = ({ explorer
    try {
      await explorer.queriesClient.saveQuery(queryParam);
      setLoadingFalse();
-      queryTab.tabTitle(queryParam.queryName);
-      queryTab.tabPath(`${queryTab.collection.databaseId}>${queryTab.collection.id()}>${queryParam.queryName}`);
+      queryTab?.tabTitle(queryParam.queryName);
+      queryTab?.tabPath(`${queryTab.collection.databaseId}>${queryTab.collection.id()}>${queryParam.queryName}`);
      traceSuccess(
        Action.SaveQuery,
        {
--- a/src/Explorer/Panes/SettingsPane/SettingsPane.tsx
+++ b/src/Explorer/Panes/SettingsPane/SettingsPane.tsx
@@ -21,6 +21,11 @@ export const SettingsPane: FunctionComponent = () => {
  const [customItemPerPage, setCustomItemPerPage] = useState<number>(
    LocalStorageUtility.getEntryNumber(StorageKey.CustomItemPerPage) || 0
  );
+  const [containerPaginationEnabled, setContainerPaginationEnabled] = useState<boolean>(
+    LocalStorageUtility.hasItem(StorageKey.ContainerPaginationEnabled)
+      ? LocalStorageUtility.getEntryString(StorageKey.ContainerPaginationEnabled) === "true"
+      : false
+  );
  const [crossPartitionQueryEnabled, setCrossPartitionQueryEnabled] = useState<boolean>(
    LocalStorageUtility.hasItem(StorageKey.IsCrossPartitionQueryEnabled)
      ? LocalStorageUtility.getEntryString(StorageKey.IsCrossPartitionQueryEnabled) === "true"
@@ -50,6 +55,7 @@ export const SettingsPane: FunctionComponent = () => {
      isCustomPageOptionSelected() ? customItemPerPage : Constants.Queries.unlimitedItemsPerPage
    );
    LocalStorageUtility.setEntryNumber(StorageKey.CustomItemPerPage, customItemPerPage);
+    LocalStorageUtility.setEntryString(StorageKey.ContainerPaginationEnabled, containerPaginationEnabled.toString());
    LocalStorageUtility.setEntryString(StorageKey.IsCrossPartitionQueryEnabled, crossPartitionQueryEnabled.toString());
    LocalStorageUtility.setEntryNumber(StorageKey.MaxDegreeOfParellism, maxDegreeOfParallelism);

@@ -185,6 +191,25 @@ export const SettingsPane: FunctionComponent = () => {
            </div>
          </div>
        )}
+        <div className="settingsSection">
+          <div className="settingsSectionPart">
+            <div className="settingsSectionLabel">
+              Enable container pagination
+              <InfoTooltip>
+                Load 50 containers at a time. Currently, containers are not pulled in alphanumeric order.
+              </InfoTooltip>
+            </div>
+            <Checkbox
+              styles={{
+                label: { padding: 0 },
+              }}
+              className="padding"
+              ariaLabel="Enable container pagination"
+              checked={containerPaginationEnabled}
+              onChange={() => setContainerPaginationEnabled(!containerPaginationEnabled)}
+            />
+          </div>
+        </div>
        {shouldShowCrossPartitionOption && (
          <div className="settingsSection">
            <div className="settingsSectionPart">
--- a/src/Explorer/Panes/SettingsPane/snapshots/SettingsPane.test.tsx.snap
+++ b/src/Explorer/Panes/SettingsPane/snapshots/SettingsPane.test.tsx.snap
@@ -97,6 +97,35 @@ exports[`Settings Pane should render Default properly 1`] = `
        </div>
      </div>
    </div>
+    <div
+      className="settingsSection"
+    >
+      <div
+        className="settingsSectionPart"
+      >
+        <div
+          className="settingsSectionLabel"
+        >
+          Enable container pagination
+          <InfoTooltip>
+            Load 50 containers at a time. Currently, containers are not pulled in alphanumeric order.
+          </InfoTooltip>
+        </div>
+        <StyledCheckboxBase
+          ariaLabel="Enable container pagination"
+          checked={false}
+          className="padding"
+          onChange={[Function]}
+          styles={
+            Object {
+              "label": Object {
+                "padding": 0,
+              },
+            }
+          }
+        />
+      </div>
+    </div>
    <div
      className="settingsSection"
    >
@@ -182,6 +211,35 @@ exports[`Settings Pane should render Gremlin properly 1`] = `
  <div
    className="paneMainContent"
  >
+    <div
+      className="settingsSection"
+    >
+      <div
+        className="settingsSectionPart"
+      >
+        <div
+          className="settingsSectionLabel"
+        >
+          Enable container pagination
+          <InfoTooltip>
+            Load 50 containers at a time. Currently, containers are not pulled in alphanumeric order.
+          </InfoTooltip>
+        </div>
+        <StyledCheckboxBase
+          ariaLabel="Enable container pagination"
+          checked={false}
+          className="padding"
+          onChange={[Function]}
+          styles={
+            Object {
+              "label": Object {
+                "padding": 0,
+              },
+            }
+          }
+        />
+      </div>
+    </div>
    <div
      className="settingsSection"
    >
--- a/src/Explorer/Panes/snapshots/AddCollectionPanel.test.tsx.snap
+++ b/src/Explorer/Panes/snapshots/AddCollectionPanel.test.tsx.snap
@@ -41,6 +41,9 @@ exports[`AddCollectionPanel should render Default properly 1`] = `
      <Stack
        horizontal={true}
        verticalAlign="center"
+      >
+        <div
+          role="radiogroup"
        >
          <input
            aria-checked={true}
@@ -75,6 +78,7 @@ exports[`AddCollectionPanel should render Default properly 1`] = `
          >
            Use existing
          </span>
+        </div>
      </Stack>
      <Stack
        className="panelGroupSpacing"
@@ -168,6 +172,7 @@ exports[`AddCollectionPanel should render Default properly 1`] = `
            ariaLabel="Unique identifier for the container and used for id-based routing through REST and all SDKs."
            className="panelInfoIcon"
            iconName="Info"
+            role="button"
            tabIndex={0}
          />
        </StyledTooltipHostBase>
@@ -234,6 +239,29 @@ exports[`AddCollectionPanel should render Default properly 1`] = `
        type="text"
        value=""
      />
+      <Stack
+        className="panelGroupSpacing"
+      >
+        <CustomizedDefaultButton
+          disabled={false}
+          hidden={false}
+          onClick={[Function]}
+          styles={
+            Object {
+              "label": Object {
+                "fontSize": 12,
+              },
+              "root": Object {
+                "height": 30,
+                "padding": 0,
+                "width": 200,
+              },
+            }
+          }
+        >
+          Add hierarchical partition key
+        </CustomizedDefaultButton>
+      </Stack>
    </Stack>
    <Stack>
      <Stack
@@ -308,7 +336,7 @@ exports[`AddCollectionPanel should render Default properly 1`] = `
          directionalHint={4}
        >
          <Icon
-            ariaLabel="Enable analytical store capability to perform near real-time analytics on your operational data, without impacting the performance of transactional workloads.{\\" \\"}"
+            ariaLabel="Enable analytical store capability to perform near real-time analytics on your operational data, without impacting the performance of transactional workloads."
            className="panelInfoIcon"
            iconName="Info"
            tabIndex={0}
@@ -318,6 +346,9 @@ exports[`AddCollectionPanel should render Default properly 1`] = `
      <Stack
        horizontal={true}
        verticalAlign="center"
+      >
+        <div
+          role="radiogroup"
        >
          <input
            aria-checked={false}
@@ -355,6 +386,7 @@ exports[`AddCollectionPanel should render Default properly 1`] = `
          >
            Off
          </span>
+        </div>
      </Stack>
      <Stack
        className="panelGroupSpacing"
--- a/src/Explorer/QueryCopilot/CopilotCarousel.test.tsx
+++ b/src/Explorer/QueryCopilot/CopilotCarousel.test.tsx
@@ -0,0 +1,11 @@
+import { shallow } from "enzyme";
+import React from "react";
+import Explorer from "../Explorer";
+import { QueryCopilotCarousel } from "./CopilotCarousel";
+
+describe("Query Copilot Carousel snapshot test", () => {
+  it("should render when isOpen is true", () => {
+    const wrapper = shallow(<QueryCopilotCarousel isOpen={true} explorer={new Explorer()} />);
+    expect(wrapper).toMatchSnapshot();
+  });
+});
--- a/src/Explorer/QueryCopilot/CopilotCarousel.tsx
+++ b/src/Explorer/QueryCopilot/CopilotCarousel.tsx
@@ -0,0 +1,277 @@
+import {
+  DefaultButton,
+  ISeparatorStyles,
+  IconButton,
+  Image,
+  Link,
+  Modal,
+  PrimaryButton,
+  Separator,
+  Spinner,
+  Stack,
+  Text,
+} from "@fluentui/react";
+import { QueryCopilotSampleDatabaseId, StyleConstants } from "Common/Constants";
+import { handleError } from "Common/ErrorHandlingUtils";
+import { createCollection } from "Common/dataAccess/createCollection";
+import * as DataModels from "Contracts/DataModels";
+import { ContainerSampleGenerator } from "Explorer/DataSamples/ContainerSampleGenerator";
+import Explorer from "Explorer/Explorer";
+import { AllPropertiesIndexed } from "Explorer/Panes/AddCollectionPanel";
+import { PromptCard } from "Explorer/QueryCopilot/PromptCard";
+import { useDatabases } from "Explorer/useDatabases";
+import { useCarousel } from "hooks/useCarousel";
+import { ReactTabKind, useTabs } from "hooks/useTabs";
+import React, { useState } from "react";
+import YoutubePlaceholder from "../../../images/YoutubePlaceholder.svg";
+
+interface QueryCopilotCarouselProps {
+  isOpen: boolean;
+  explorer: Explorer;
+}
+
+const separatorStyles: Partial<ISeparatorStyles> = {
+  root: {
+    selectors: {
+      "::before": {
+        background: StyleConstants.BaseMedium,
+      },
+    },
+    padding: "16px 0",
+    height: 1,
+  },
+};
+
+export const QueryCopilotCarousel: React.FC<QueryCopilotCarouselProps> = ({
+  isOpen,
+  explorer,
+}: QueryCopilotCarouselProps): JSX.Element => {
+  const [page, setPage] = useState<number>(1);
+  const [isCreatingDatabase, setIsCreatingDatabase] = useState<boolean>(false);
+  const [spinnerText, setSpinnerText] = useState<string>("");
+  const [selectedPrompt, setSelectedPrompt] = useState<number>(1);
+
+  const getHeaderText = (): string => {
+    switch (page) {
+      case 1:
+        return "What exactly is copilot?";
+      case 2:
+        return "Setting up your Sample database";
+      case 3:
+        return "Sample prompts to help you";
+      default:
+        return "";
+    }
+  };
+
+  const getQueryCopilotInitialInput = (): string => {
+    switch (selectedPrompt) {
+      case 1:
+        return "Write a query to return all records in this table";
+      case 2:
+        return "Write a query to return all records in this table created in the last thirty days";
+      case 3:
+        return 'Write a query to return all records in this table created in the last thirty days which also have the record owner as "Contoso"';
+      default:
+        return "";
+    }
+  };
+
+  const createSampleDatabase = async (): Promise<void> => {
+    const database = useDatabases.getState().findDatabaseWithId(QueryCopilotSampleDatabaseId);
+    if (database) {
+      return;
+    }
+
+    try {
+      setIsCreatingDatabase(true);
+      setSpinnerText("Setting up your database...");
+      const params: DataModels.CreateCollectionParams = {
+        createNewDatabase: true,
+        collectionId: "SampleContainer",
+        databaseId: QueryCopilotSampleDatabaseId,
+        databaseLevelThroughput: true,
+        autoPilotMaxThroughput: 1000,
+        offerThroughput: undefined,
+        indexingPolicy: AllPropertiesIndexed,
+        partitionKey: {
+          paths: ["/categoryId"],
+          kind: "Hash",
+          version: 2,
+        },
+      };
+      await createCollection(params);
+      await explorer.refreshAllDatabases();
+      const database = useDatabases.getState().findDatabaseWithId(QueryCopilotSampleDatabaseId);
+      await database.loadCollections();
+      const collection = database.findCollectionWithId("SampleContainer");
+
+      setSpinnerText("Adding sample data set...");
+      const sampleGenerator = await ContainerSampleGenerator.createSampleGeneratorAsync(explorer, true);
+      await sampleGenerator.populateContainerAsync(collection);
+      await database.expandDatabase();
+      collection.expandCollection();
+      useDatabases.getState().updateDatabase(database);
+    } catch (error) {
+      //TODO: show error in UI
+      handleError(error, "QueryCopilotCreateSampleDB");
+      throw error;
+    } finally {
+      setIsCreatingDatabase(false);
+      setSpinnerText("");
+    }
+  };
+
+  const getContent = (): JSX.Element => {
+    switch (page) {
+      case 1:
+        return (
+          <Stack style={{ marginTop: 8 }}>
+            <Text style={{ fontSize: 13 }}>
+              A couple of lines about copilot and the background about it. The idea is to have some text to give context
+              to the user.
+            </Text>
+            <Text style={{ fontSize: 14, fontWeight: 600, marginTop: 16 }}>How do you use copilot</Text>
+            <Text style={{ fontSize: 13, marginTop: 8 }}>
+              To generate queries , just describe the query you want and copilot will generate the query for you.Watch
+              this video to learn more about how to use copilot.
+            </Text>
+            <Image src={YoutubePlaceholder} style={{ margin: "16px auto" }} />
+            <Text style={{ fontSize: 14, fontWeight: 600 }}>What is copilot good at</Text>
+            <Text style={{ fontSize: 13, marginTop: 8 }}>
+              A couple of lines about what copilot can do and its capablites with a link to{" "}
+              <Link href="" target="_blank">
+                documentation
+              </Link>{" "}
+              if possible.
+            </Text>
+            <Text style={{ fontSize: 14, fontWeight: 600, marginTop: 16 }}>What are its limitations</Text>
+            <Text style={{ fontSize: 13, marginTop: 8 }}>
+              A couple of lines about what copilot cant do and its limitations.{" "}
+              <Link href="" target="_blank">
+                Link to documentation
+              </Link>
+            </Text>
+            <Text style={{ fontSize: 14, fontWeight: 600, marginTop: 16 }}>Disclaimer</Text>
+            <Text style={{ fontSize: 13, marginTop: 8 }}>
+              AI-generated content can have mistakes. Make sure it&apos;s accurate and appropriate before using it.{" "}
+              <Link href="" target="_blank">
+                Read preview terms
+              </Link>
+            </Text>
+          </Stack>
+        );
+      case 2:
+        return (
+          <Stack style={{ marginTop: 8 }}>
+            <Text style={{ fontSize: 13 }}>
+              Before you get started, we need to configure your sample database for you. Here is a summary of the
+              database being created for your reference. Configuration values can be updated using the settings icon in
+              the query builder.
+            </Text>
+            <Text style={{ fontSize: 13, fontWeight: 600, marginTop: 24 }}>Database Id</Text>
+            <Text style={{ fontSize: 13 }}>CopilotSampleDb</Text>
+            <Text style={{ fontSize: 13, fontWeight: 600, marginTop: 16 }}>Database throughput (autoscale)</Text>
+            <Text style={{ fontSize: 13 }}>Autoscale</Text>
+            <Text style={{ fontSize: 13, fontWeight: 600, marginTop: 16 }}>Database Max RU/s</Text>
+            <Text>1000</Text>
+            <Text style={{ fontSize: 10, marginTop: 8 }}>
+              Your database throughput will automatically scale from{" "}
+              <strong>100 RU/s (10% of max RU/s) - 1000 RU/s</strong> based on usage.
+            </Text>
+            <Text style={{ fontSize: 10, marginTop: 8 }}>
+              Estimated monthly cost (USD): <strong>$8.76 - $87.60</strong> (1 region, 100 - 1000 RU/s, $0.00012/RU)
+            </Text>
+            <Text style={{ fontSize: 13, fontWeight: 600, marginTop: 16 }}>Container Id</Text>
+            <Text style={{ fontSize: 13 }}>SampleContainer</Text>
+            <Text style={{ fontSize: 13, fontWeight: 600, marginTop: 16 }}>Partition key</Text>
+            <Text style={{ fontSize: 13 }}>categoryId</Text>
+          </Stack>
+        );
+      case 3:
+        return (
+          <Stack>
+            <Text>To help you get started, here are some sample prompts to get you started</Text>
+            <Stack tokens={{ childrenGap: 12 }} style={{ marginTop: 16 }}>
+              <PromptCard
+                header="Write a query to return all records in this table"
+                description="This is a basic query which returns all records in the table "
+                onSelect={() => setSelectedPrompt(1)}
+                isSelected={selectedPrompt === 1}
+              />
+              <PromptCard
+                header="Write a query to return all records in this table created in the last thirty days"
+                description="This builds on the previous query which returns all records in the table which were inserted in the last thirty days. You can also modify this query to return records based upon creation date"
+                onSelect={() => setSelectedPrompt(2)}
+                isSelected={selectedPrompt === 2}
+              />
+              <PromptCard
+                header='Write a query to return all records in this table created in the last thirty days which also have the record owner as "Contoso"'
+                description='This builds on the previous query which returns all records in the table which were inserted in the last thirty days but which has the record owner as "contoso"'
+                onSelect={() => setSelectedPrompt(3)}
+                isSelected={selectedPrompt === 3}
+              />
+            </Stack>
+            <Text style={{ fontSize: 13, marginTop: 32 }}>
+              Interested in learning more about how to write effective prompts. Please read this article for more
+              information.
+            </Text>
+            <Text style={{ fontSize: 13, marginTop: 16 }}>
+              You can also access these prompts by selecting the Samples prompts button in the query builder page.
+            </Text>
+            <Text style={{ fontSize: 13, marginTop: 16 }}>
+              Don&apos;t like any of the prompts? Just click Get Started and write your own prompt.
+            </Text>
+          </Stack>
+        );
+      default:
+        return <></>;
+    }
+  };
+
+  return (
+    <Modal styles={{ main: { width: 880 } }} isOpen={isOpen && page < 4}>
+      <Stack style={{ padding: 16 }}>
+        <Stack horizontal horizontalAlign="space-between">
+          <Text variant="xLarge">{getHeaderText()}</Text>
+          <IconButton
+            iconProps={{ iconName: "Cancel" }}
+            onClick={() => useCarousel.getState().setShowCopilotCarousel(false)}
+          />
+        </Stack>
+        {getContent()}
+        <Separator styles={separatorStyles} />
+        <Stack horizontal horizontalAlign="start" verticalAlign="center">
+          {page !== 1 && (
+            <DefaultButton
+              text="Previous"
+              style={{ marginRight: 8 }}
+              onClick={() => setPage(page - 1)}
+              disabled={isCreatingDatabase}
+            />
+          )}
+          <PrimaryButton
+            text={page === 3 ? "Get started" : "Next"}
+            onClick={async () => {
+              if (page === 3) {
+                useCarousel.getState().setShowCopilotCarousel(false);
+                useTabs.getState().setQueryCopilotTabInitialInput(getQueryCopilotInitialInput());
+                useTabs.getState().openAndActivateReactTab(ReactTabKind.QueryCopilot);
+                return;
+              }
+
+              if (page === 2) {
+                await createSampleDatabase();
+              }
+
+              setPage(page + 1);
+            }}
+            disabled={isCreatingDatabase}
+          />
+          {isCreatingDatabase && <Spinner style={{ marginLeft: 8 }} />}
+          {isCreatingDatabase && <Text style={{ marginLeft: 8, color: "#0078D4" }}>{spinnerText}</Text>}
+        </Stack>
+      </Stack>
+    </Modal>
+  );
+};
--- a/src/Explorer/QueryCopilot/PromptCard.test.tsx
+++ b/src/Explorer/QueryCopilot/PromptCard.test.tsx
@@ -0,0 +1,19 @@
+import { shallow } from "enzyme";
+import React from "react";
+import { PromptCard } from "./PromptCard";
+
+describe("Prompt card snapshot test", () => {
+  it("should render properly if isSelected is true", () => {
+    const wrapper = shallow(
+      <PromptCard header="TestHeader" description="TestDescription" isSelected={true} onSelect={() => undefined} />
+    );
+    expect(wrapper).toMatchSnapshot();
+  });
+
+  it("should render properly if isSelected is false", () => {
+    const wrapper = shallow(
+      <PromptCard header="TestHeader" description="TestDescription" isSelected={false} onSelect={() => undefined} />
+    );
+    expect(wrapper).toMatchSnapshot();
+  });
+});
--- a/src/Explorer/QueryCopilot/PromptCard.tsx
+++ b/src/Explorer/QueryCopilot/PromptCard.tsx
@@ -0,0 +1,48 @@
+import { ChoiceGroup, Stack, Text } from "@fluentui/react";
+import React from "react";
+
+interface PromptCardProps {
+  header: string;
+  description: string;
+  isSelected: boolean;
+  onSelect: () => void;
+}
+
+export const PromptCard: React.FC<PromptCardProps> = ({
+  header,
+  description,
+  isSelected,
+  onSelect,
+}: PromptCardProps): JSX.Element => {
+  return (
+    <Stack
+      horizontal
+      style={{
+        padding: "16px 0 16px 16px ",
+        boxSizing: "border-box",
+        width: 650,
+        height: 100,
+        border: "1px solid #F3F2F1",
+        boxShadow: "0px 1.6px 3.6px rgba(0, 0, 0, 0.132), 0px 0.3px 0.9px rgba(0, 0, 0, 0.108)",
+      }}
+    >
+      <Stack.Item grow={1}>
+        <Stack horizontal>
+          <div>
+            <Text style={{ fontSize: 13, color: "#00A2AD", background: "#F8FFF0" }}>Prompt</Text>
+          </div>
+          <Text style={{ fontSize: 13, marginLeft: 16 }}>{header}</Text>
+        </Stack>
+        <Text style={{ fontSize: 10, marginTop: 16 }}>{description}</Text>
+      </Stack.Item>
+      <Stack.Item style={{ marginLeft: 16 }}>
+        <ChoiceGroup
+          styles={{ flexContainer: { width: 36 } }}
+          options={[{ key: "selected", text: "" }]}
+          selectedKey={isSelected ? "selected" : ""}
+          onChange={onSelect}
+        />
+      </Stack.Item>
+    </Stack>
+  );
+};
--- a/src/Explorer/QueryCopilot/QueryCopilotFeedbackModal.tsx
+++ b/src/Explorer/QueryCopilot/QueryCopilotFeedbackModal.tsx
@@ -0,0 +1,105 @@
+import {
+  Checkbox,
+  ChoiceGroup,
+  DefaultButton,
+  IconButton,
+  Link,
+  Modal,
+  PrimaryButton,
+  Stack,
+  Text,
+  TextField,
+} from "@fluentui/react";
+import { submitFeedback } from "Explorer/QueryCopilot/QueryCopilotUtilities";
+import { useQueryCopilot } from "hooks/useQueryCopilot";
+import React from "react";
+
+export const QueryCopilotFeedbackModal: React.FC = (): JSX.Element => {
+  const {
+    generatedQuery,
+    userPrompt,
+    likeQuery,
+    showFeedbackModal,
+    closeFeedbackModal,
+    setHideFeedbackModalForLikedQueries,
+  } = useQueryCopilot();
+  const [isContactAllowed, setIsContactAllowed] = React.useState<boolean>(true);
+  const [description, setDescription] = React.useState<string>("");
+  const [doNotShowAgainChecked, setDoNotShowAgainChecked] = React.useState<boolean>(false);
+  return (
+    <Modal isOpen={showFeedbackModal}>
+      <Stack style={{ padding: 24 }}>
+        <Stack horizontal horizontalAlign="space-between">
+          <Text style={{ fontSize: 20, fontWeight: 600, marginBottom: 20 }}>Send feedback to Microsoft</Text>
+          <IconButton iconProps={{ iconName: "Cancel" }} onClick={() => closeFeedbackModal()} />
+        </Stack>
+        <Text style={{ fontSize: 14, marginBottom: 14 }}>Your feedback will help improve the experience.</Text>
+        <TextField
+          styles={{ root: { marginBottom: 14 } }}
+          label="Description"
+          required
+          placeholder="Provide more details"
+          value={description}
+          onChange={(_, newValue) => setDescription(newValue)}
+          multiline
+          rows={3}
+        />
+        <TextField
+          styles={{ root: { marginBottom: 14 } }}
+          label="Query generated"
+          defaultValue={generatedQuery}
+          readOnly
+        />
+        <ChoiceGroup
+          styles={{
+            root: {
+              marginBottom: 14,
+            },
+            flexContainer: {
+              selectors: {
+                ".ms-ChoiceField-field::before": { marginTop: 4 },
+                ".ms-ChoiceField-field::after": { marginTop: 4 },
+                ".ms-ChoiceFieldLabel": { paddingLeft: 6 },
+              },
+            },
+          }}
+          label="May we contact you about your feedback?"
+          options={[
+            { key: "yes", text: "Yes, you may contact me." },
+            { key: "no", text: "No, do not contact me." },
+          ]}
+          selectedKey={isContactAllowed ? "yes" : "no"}
+          onChange={(_, option) => setIsContactAllowed(option.key === "yes")}
+        ></ChoiceGroup>
+        <Text style={{ fontSize: 12, marginBottom: 14 }}>
+          By pressing submit, your feedback will be used to improve Microsoft products and services. IT admins for your
+          organization will be able to view and manage your feedback data.{" "}
+          <Link href="" target="_blank">
+            Privacy statement
+          </Link>
+        </Text>
+        {likeQuery && (
+          <Checkbox
+            styles={{ label: { paddingLeft: 0 }, root: { marginBottom: 14 } }}
+            label="Don't show me this next time"
+            checked={doNotShowAgainChecked}
+            onChange={(_, checked) => setDoNotShowAgainChecked(checked)}
+          />
+        )}
+        <Stack horizontal horizontalAlign="end">
+          <PrimaryButton
+            styles={{ root: { marginRight: 8 } }}
+            onClick={() => {
+              closeFeedbackModal();
+              setHideFeedbackModalForLikedQueries(doNotShowAgainChecked);
+              submitFeedback({ generatedQuery, likeQuery, description, userPrompt });
+            }}
+          >
+            Submit
+          </PrimaryButton>
+          <DefaultButton onClick={() => closeFeedbackModal()}>Cancel</DefaultButton>
+        </Stack>
+      </Stack>
+    </Modal>
+  );
+};
--- a/src/Explorer/QueryCopilot/QueryCopilotTab.test.tsx
+++ b/src/Explorer/QueryCopilot/QueryCopilotTab.test.tsx
@@ -0,0 +1,13 @@
+import { shallow } from "enzyme";
+import React from "react";
+import Explorer from "../Explorer";
+import { QueryCopilotTab } from "./QueryCopilotTab";
+
+describe("Query copilot tab snapshot test", () => {
+  it("should render with initial input", () => {
+    const wrapper = shallow(
+      <QueryCopilotTab initialInput="Write a query to return all records in this table" explorer={new Explorer()} />
+    );
+    expect(wrapper).toMatchSnapshot();
+  });
+});
--- a/src/Explorer/QueryCopilot/QueryCopilotTab.tsx
+++ b/src/Explorer/QueryCopilot/QueryCopilotTab.tsx
@@ -0,0 +1,275 @@
+/* eslint-disable no-console */
+import { FeedOptions } from "@azure/cosmos";
+import {
+  Callout,
+  CommandBarButton,
+  DirectionalHint,
+  IconButton,
+  Image,
+  Link,
+  Separator,
+  Spinner,
+  Stack,
+  Text,
+  TextField,
+} from "@fluentui/react";
+import {
+  QueryCopilotSampleContainerId,
+  QueryCopilotSampleContainerSchema,
+  QueryCopilotSampleDatabaseId,
+} from "Common/Constants";
+import { getErrorMessage, handleError } from "Common/ErrorHandlingUtils";
+import { shouldEnableCrossPartitionKey } from "Common/HeadersUtility";
+import { MinimalQueryIterator } from "Common/IteratorUtilities";
+import { queryDocuments } from "Common/dataAccess/queryDocuments";
+import { queryDocumentsPage } from "Common/dataAccess/queryDocumentsPage";
+import { QueryResults } from "Contracts/ViewModels";
+import { CommandButtonComponentProps } from "Explorer/Controls/CommandButton/CommandButtonComponent";
+import { EditorReact } from "Explorer/Controls/Editor/EditorReact";
+import Explorer from "Explorer/Explorer";
+import { useCommandBar } from "Explorer/Menus/CommandBar/CommandBarComponentAdapter";
+import { SaveQueryPane } from "Explorer/Panes/SaveQueryPane/SaveQueryPane";
+import { submitFeedback } from "Explorer/QueryCopilot/QueryCopilotUtilities";
+import { QueryResultSection } from "Explorer/Tabs/QueryTab/QueryResultSection";
+import { queryPagesUntilContentPresent } from "Utils/QueryUtils";
+import { useQueryCopilot } from "hooks/useQueryCopilot";
+import { useSidePanel } from "hooks/useSidePanel";
+import React, { useState } from "react";
+import SplitterLayout from "react-splitter-layout";
+import CopilotIcon from "../../../images/Copilot.svg";
+import ExecuteQueryIcon from "../../../images/ExecuteQuery.svg";
+import SaveQueryIcon from "../../../images/save-cosmos.svg";
+
+interface QueryCopilotTabProps {
+  initialInput: string;
+  explorer: Explorer;
+}
+
+interface GenerateSQLQueryResponse {
+  apiVersion: string;
+  sql: string;
+  explanation: string;
+  generateStart: string;
+  generateEnd: string;
+}
+
+export const QueryCopilotTab: React.FC<QueryCopilotTabProps> = ({
+  initialInput,
+  explorer,
+}: QueryCopilotTabProps): JSX.Element => {
+  const hideFeedbackModalForLikedQueries = useQueryCopilot((state) => state.hideFeedbackModalForLikedQueries);
+  const [userInput, setUserInput] = useState<string>(initialInput || "");
+  const [generatedQuery, setGeneratedQuery] = useState<string>("");
+  const [query, setQuery] = useState<string>("");
+  const [selectedQuery, setSelectedQuery] = useState<string>("");
+  const [isGeneratingQuery, setIsGeneratingQuery] = useState<boolean>(false);
+  const [isExecuting, setIsExecuting] = useState<boolean>(false);
+  const [likeQuery, setLikeQuery] = useState<boolean>();
+  const [showCallout, setShowCallout] = useState<boolean>(false);
+  const [queryIterator, setQueryIterator] = useState<MinimalQueryIterator>();
+  const [queryResults, setQueryResults] = useState<QueryResults>();
+  const [errorMessage, setErrorMessage] = useState<string>("");
+
+  const generateSQLQuery = async (): Promise<void> => {
+    try {
+      setIsGeneratingQuery(true);
+      const payload = {
+        containerSchema: QueryCopilotSampleContainerSchema,
+        userPrompt: userInput,
+      };
+      const response = await fetch("https://copilotorchestrater.azurewebsites.net/generateSQLQuery", {
+        method: "POST",
+        headers: {
+          "content-type": "application/json",
+        },
+        body: JSON.stringify(payload),
+      });
+
+      const generateSQLQueryResponse: GenerateSQLQueryResponse = await response?.json();
+      if (generateSQLQueryResponse?.sql) {
+        let query = `-- **Prompt:** ${userInput}\r\n`;
+        if (generateSQLQueryResponse.explanation) {
+          query += `-- **Explanation of query:** ${generateSQLQueryResponse.explanation}\r\n`;
+        }
+        query += generateSQLQueryResponse.sql;
+        setQuery(query);
+        setGeneratedQuery(generateSQLQueryResponse.sql);
+      }
+    } catch (error) {
+      handleError(error, "executeNaturalLanguageQuery");
+      throw error;
+    } finally {
+      setIsGeneratingQuery(false);
+    }
+  };
+
+  const onExecuteQueryClick = async (): Promise<void> => {
+    const queryToExecute = selectedQuery || query;
+    const queryIterator = queryDocuments(QueryCopilotSampleDatabaseId, QueryCopilotSampleContainerId, queryToExecute, {
+      enableCrossPartitionQuery: shouldEnableCrossPartitionKey(),
+    } as FeedOptions);
+    setQueryIterator(queryIterator);
+
+    setTimeout(async () => {
+      await queryDocumentsPerPage(0, queryIterator);
+    }, 100);
+  };
+
+  const queryDocumentsPerPage = async (firstItemIndex: number, queryIterator: MinimalQueryIterator): Promise<void> => {
+    try {
+      setIsExecuting(true);
+      const queryResults: QueryResults = await queryPagesUntilContentPresent(
+        firstItemIndex,
+        async (firstItemIndex: number) =>
+          queryDocumentsPage(QueryCopilotSampleContainerId, queryIterator, firstItemIndex)
+      );
+
+      setQueryResults(queryResults);
+      setErrorMessage("");
+    } catch (error) {
+      const errorMessage = getErrorMessage(error);
+      setErrorMessage(errorMessage);
+      handleError(errorMessage, "executeQueryCopilotTab");
+    } finally {
+      setIsExecuting(false);
+    }
+  };
+
+  const getCommandbarButtons = (): CommandButtonComponentProps[] => {
+    const executeQueryBtnLabel = selectedQuery ? "Execute Selection" : "Execute Query";
+    const executeQueryBtn = {
+      iconSrc: ExecuteQueryIcon,
+      iconAlt: executeQueryBtnLabel,
+      onCommandClick: () => onExecuteQueryClick(),
+      commandButtonLabel: executeQueryBtnLabel,
+      ariaLabel: executeQueryBtnLabel,
+      hasPopup: false,
+    };
+
+    const saveQueryBtn = {
+      iconSrc: SaveQueryIcon,
+      iconAlt: "Save Query",
+      onCommandClick: () =>
+        useSidePanel.getState().openSidePanel("Save Query", <SaveQueryPane explorer={explorer} queryToSave={query} />),
+      commandButtonLabel: "Save Query",
+      ariaLabel: "Save Query",
+      hasPopup: false,
+    };
+
+    return [executeQueryBtn, saveQueryBtn];
+  };
+
+  React.useEffect(() => {
+    useCommandBar.getState().setContextButtons(getCommandbarButtons());
+  }, [query, selectedQuery]);
+
+  React.useEffect(() => {
+    if (initialInput) {
+      generateSQLQuery();
+    }
+  }, []);
+
+  return (
+    <Stack className="tab-pane" style={{ padding: 24, width: "100%", height: "100%" }}>
+      <Stack horizontal verticalAlign="center">
+        <Image src={CopilotIcon} />
+        <Text style={{ marginLeft: 8, fontWeight: 600, fontSize: 16 }}>Copilot</Text>
+      </Stack>
+      <Stack horizontal verticalAlign="center" style={{ marginTop: 16, width: "100%" }}>
+        <TextField
+          value={userInput}
+          onChange={(_, newValue) => setUserInput(newValue)}
+          style={{ lineHeight: 30 }}
+          styles={{ root: { width: "90%" } }}
+          disabled={isGeneratingQuery}
+        />
+        <IconButton
+          iconProps={{ iconName: "Send" }}
+          disabled={isGeneratingQuery}
+          style={{ marginLeft: 8 }}
+          onClick={() => generateSQLQuery()}
+        />
+        {isGeneratingQuery && <Spinner style={{ marginLeft: 8 }} />}
+      </Stack>
+      <Text style={{ marginTop: 8, marginBottom: 24, fontSize: 12 }}>
+        AI-generated content can have mistakes. Make sure it&apos;s accurate and appropriate before using it.{" "}
+        <Link href="" target="_blank">
+          Read preview terms
+        </Link>
+      </Text>
+
+      <Stack style={{ backgroundColor: "#FFF8F0", padding: "2px 8px" }} horizontal verticalAlign="center">
+        <Text style={{ fontWeight: 600, fontSize: 12 }}>Provide feedback on the query generated</Text>
+        {showCallout && !hideFeedbackModalForLikedQueries && (
+          <Callout
+            style={{ padding: 8 }}
+            target="#likeBtn"
+            onDismiss={() => {
+              setShowCallout(false);
+              submitFeedback({ generatedQuery, likeQuery, description: "", userPrompt: userInput });
+            }}
+            directionalHint={DirectionalHint.topCenter}
+          >
+            <Text>
+              Thank you. Need to give{" "}
+              <Link
+                onClick={() => {
+                  setShowCallout(false);
+                  useQueryCopilot.getState().openFeedbackModal(generatedQuery, true, userInput);
+                }}
+              >
+                more feedback?
+              </Link>
+            </Text>
+          </Callout>
+        )}
+        <IconButton
+          id="likeBtn"
+          style={{ marginLeft: 20 }}
+          iconProps={{ iconName: likeQuery === true ? "LikeSolid" : "Like" }}
+          onClick={() => {
+            setLikeQuery(true);
+            setShowCallout(true);
+          }}
+        />
+        <IconButton
+          style={{ margin: "0 10px" }}
+          iconProps={{ iconName: likeQuery === false ? "DislikeSolid" : "Dislike" }}
+          onClick={() => {
+            setLikeQuery(false);
+            setShowCallout(false);
+            useQueryCopilot.getState().openFeedbackModal(generatedQuery, false, userInput);
+          }}
+        />
+        <Separator vertical style={{ color: "#EDEBE9" }} />
+        <CommandBarButton iconProps={{ iconName: "Copy" }} style={{ margin: "0 10px", backgroundColor: "#FFF8F0" }}>
+          Copy code
+        </CommandBarButton>
+        <CommandBarButton iconProps={{ iconName: "Delete" }} style={{ backgroundColor: "#FFF8F0" }}>
+          Delete code
+        </CommandBarButton>
+      </Stack>
+      <Stack className="tabPaneContentContainer">
+        <SplitterLayout vertical={true} primaryIndex={0} primaryMinSize={100} secondaryMinSize={200}>
+          <EditorReact
+            language={"sql"}
+            content={query}
+            isReadOnly={false}
+            ariaLabel={"Editing Query"}
+            lineNumbers={"on"}
+            onContentChanged={(newQuery: string) => setQuery(newQuery)}
+            onContentSelected={(selectedQuery: string) => setSelectedQuery(selectedQuery)}
+          />
+          <QueryResultSection
+            isMongoDB={false}
+            queryEditorContent={selectedQuery || query}
+            error={errorMessage}
+            queryResults={queryResults}
+            isExecuting={isExecuting}
+            executeQueryDocumentsPage={(firstItemIndex: number) => queryDocumentsPerPage(firstItemIndex, queryIterator)}
+          />
+        </SplitterLayout>
+      </Stack>
+    </Stack>
+  );
+};
--- a/src/Explorer/QueryCopilot/QueryCopilotUtilities.ts
+++ b/src/Explorer/QueryCopilot/QueryCopilotUtilities.ts
@@ -0,0 +1,36 @@
+import { QueryCopilotSampleContainerSchema } from "Common/Constants";
+import { handleError } from "Common/ErrorHandlingUtils";
+
+interface FeedbackParams {
+  likeQuery: boolean;
+  generatedQuery: string;
+  userPrompt: string;
+  description?: string;
+  contact?: string;
+}
+
+export const submitFeedback = async (params: FeedbackParams): Promise<void> => {
+  try {
+    const { likeQuery, generatedQuery, userPrompt, description, contact } = params;
+    const payload = {
+      containerSchema: QueryCopilotSampleContainerSchema,
+      like: likeQuery ? "like" : "dislike",
+      generatedSql: generatedQuery,
+      userPrompt,
+      description: description || "",
+      contact: contact || "",
+    };
+
+    const response = await fetch("https://copilotorchestrater.azurewebsites.net/feedback", {
+      method: "POST",
+      headers: {
+        "content-type": "application/json",
+      },
+      body: JSON.stringify(payload),
+    });
+    // eslint-disable-next-line no-console
+    console.log(response);
+  } catch (error) {
+    handleError(error, "copilotSubmitFeedback");
+  }
+};
--- a/src/Explorer/QueryCopilot/snapshots/CopilotCarousel.test.tsx.snap
+++ b/src/Explorer/QueryCopilot/snapshots/CopilotCarousel.test.tsx.snap
@@ -0,0 +1,198 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Query Copilot Carousel snapshot test should render when isOpen is true 1`] = `
+<Modal
+  isOpen={true}
+  styles={
+    Object {
+      "main": Object {
+        "width": 880,
+      },
+    }
+  }
+>
+  <Stack
+    style={
+      Object {
+        "padding": 16,
+      }
+    }
+  >
+    <Stack
+      horizontal={true}
+      horizontalAlign="space-between"
+    >
+      <Text
+        variant="xLarge"
+      >
+        What exactly is copilot?
+      </Text>
+      <CustomizedIconButton
+        iconProps={
+          Object {
+            "iconName": "Cancel",
+          }
+        }
+        onClick={[Function]}
+      />
+    </Stack>
+    <Stack
+      style={
+        Object {
+          "marginTop": 8,
+        }
+      }
+    >
+      <Text
+        style={
+          Object {
+            "fontSize": 13,
+          }
+        }
+      >
+        A couple of lines about copilot and the background about it. The idea is to have some text to give context to the user.
+      </Text>
+      <Text
+        style={
+          Object {
+            "fontSize": 14,
+            "fontWeight": 600,
+            "marginTop": 16,
+          }
+        }
+      >
+        How do you use copilot
+      </Text>
+      <Text
+        style={
+          Object {
+            "fontSize": 13,
+            "marginTop": 8,
+          }
+        }
+      >
+        To generate queries , just describe the query you want and copilot will generate the query for you.Watch this video to learn more about how to use copilot.
+      </Text>
+      <Image
+        src=""
+        style={
+          Object {
+            "margin": "16px auto",
+          }
+        }
+      />
+      <Text
+        style={
+          Object {
+            "fontSize": 14,
+            "fontWeight": 600,
+          }
+        }
+      >
+        What is copilot good at
+      </Text>
+      <Text
+        style={
+          Object {
+            "fontSize": 13,
+            "marginTop": 8,
+          }
+        }
+      >
+        A couple of lines about what copilot can do and its capablites with a link to
+         
+        <StyledLinkBase
+          href=""
+          target="_blank"
+        >
+          documentation
+        </StyledLinkBase>
+         
+        if possible.
+      </Text>
+      <Text
+        style={
+          Object {
+            "fontSize": 14,
+            "fontWeight": 600,
+            "marginTop": 16,
+          }
+        }
+      >
+        What are its limitations
+      </Text>
+      <Text
+        style={
+          Object {
+            "fontSize": 13,
+            "marginTop": 8,
+          }
+        }
+      >
+        A couple of lines about what copilot cant do and its limitations.
+         
+        <StyledLinkBase
+          href=""
+          target="_blank"
+        >
+          Link to documentation
+        </StyledLinkBase>
+      </Text>
+      <Text
+        style={
+          Object {
+            "fontSize": 14,
+            "fontWeight": 600,
+            "marginTop": 16,
+          }
+        }
+      >
+        Disclaimer
+      </Text>
+      <Text
+        style={
+          Object {
+            "fontSize": 13,
+            "marginTop": 8,
+          }
+        }
+      >
+        AI-generated content can have mistakes. Make sure it's accurate and appropriate before using it.
+         
+        <StyledLinkBase
+          href=""
+          target="_blank"
+        >
+          Read preview terms
+        </StyledLinkBase>
+      </Text>
+    </Stack>
+    <Separator
+      styles={
+        Object {
+          "root": Object {
+            "height": 1,
+            "padding": "16px 0",
+            "selectors": Object {
+              "::before": Object {
+                "background": undefined,
+              },
+            },
+          },
+        }
+      }
+    />
+    <Stack
+      horizontal={true}
+      horizontalAlign="start"
+      verticalAlign="center"
+    >
+      <CustomizedPrimaryButton
+        disabled={false}
+        onClick={[Function]}
+        text="Next"
+      />
+    </Stack>
+  </Stack>
+</Modal>
+`;
--- a/src/Explorer/QueryCopilot/snapshots/PromptCard.test.tsx.snap
+++ b/src/Explorer/QueryCopilot/snapshots/PromptCard.test.tsx.snap
@@ -0,0 +1,171 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Prompt card snapshot test should render properly if isSelected is false 1`] = `
+<Stack
+  horizontal={true}
+  style={
+    Object {
+      "border": "1px solid #F3F2F1",
+      "boxShadow": "0px 1.6px 3.6px rgba(0, 0, 0, 0.132), 0px 0.3px 0.9px rgba(0, 0, 0, 0.108)",
+      "boxSizing": "border-box",
+      "height": 100,
+      "padding": "16px 0 16px 16px ",
+      "width": 650,
+    }
+  }
+>
+  <StackItem
+    grow={1}
+  >
+    <Stack
+      horizontal={true}
+    >
+      <div>
+        <Text
+          style={
+            Object {
+              "background": "#F8FFF0",
+              "color": "#00A2AD",
+              "fontSize": 13,
+            }
+          }
+        >
+          Prompt
+        </Text>
+      </div>
+      <Text
+        style={
+          Object {
+            "fontSize": 13,
+            "marginLeft": 16,
+          }
+        }
+      >
+        TestHeader
+      </Text>
+    </Stack>
+    <Text
+      style={
+        Object {
+          "fontSize": 10,
+          "marginTop": 16,
+        }
+      }
+    >
+      TestDescription
+    </Text>
+  </StackItem>
+  <StackItem
+    style={
+      Object {
+        "marginLeft": 16,
+      }
+    }
+  >
+    <StyledChoiceGroup
+      onChange={[Function]}
+      options={
+        Array [
+          Object {
+            "key": "selected",
+            "text": "",
+          },
+        ]
+      }
+      selectedKey=""
+      styles={
+        Object {
+          "flexContainer": Object {
+            "width": 36,
+          },
+        }
+      }
+    />
+  </StackItem>
+</Stack>
+`;
+
+exports[`Prompt card snapshot test should render properly if isSelected is true 1`] = `
+<Stack
+  horizontal={true}
+  style={
+    Object {
+      "border": "1px solid #F3F2F1",
+      "boxShadow": "0px 1.6px 3.6px rgba(0, 0, 0, 0.132), 0px 0.3px 0.9px rgba(0, 0, 0, 0.108)",
+      "boxSizing": "border-box",
+      "height": 100,
+      "padding": "16px 0 16px 16px ",
+      "width": 650,
+    }
+  }
+>
+  <StackItem
+    grow={1}
+  >
+    <Stack
+      horizontal={true}
+    >
+      <div>
+        <Text
+          style={
+            Object {
+              "background": "#F8FFF0",
+              "color": "#00A2AD",
+              "fontSize": 13,
+            }
+          }
+        >
+          Prompt
+        </Text>
+      </div>
+      <Text
+        style={
+          Object {
+            "fontSize": 13,
+            "marginLeft": 16,
+          }
+        }
+      >
+        TestHeader
+      </Text>
+    </Stack>
+    <Text
+      style={
+        Object {
+          "fontSize": 10,
+          "marginTop": 16,
+        }
+      }
+    >
+      TestDescription
+    </Text>
+  </StackItem>
+  <StackItem
+    style={
+      Object {
+        "marginLeft": 16,
+      }
+    }
+  >
+    <StyledChoiceGroup
+      onChange={[Function]}
+      options={
+        Array [
+          Object {
+            "key": "selected",
+            "text": "",
+          },
+        ]
+      }
+      selectedKey="selected"
+      styles={
+        Object {
+          "flexContainer": Object {
+            "width": 36,
+          },
+        }
+      }
+    />
+  </StackItem>
+</Stack>
+`;
--- a/src/Explorer/QueryCopilot/snapshots/QueryCopilotTab.test.tsx.snap
+++ b/src/Explorer/QueryCopilot/snapshots/QueryCopilotTab.test.tsx.snap
@@ -0,0 +1,211 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Query copilot tab snapshot test should render with initial input 1`] = `
+<Stack
+  className="tab-pane"
+  style={
+    Object {
+      "height": "100%",
+      "padding": 24,
+      "width": "100%",
+    }
+  }
+>
+  <Stack
+    horizontal={true}
+    verticalAlign="center"
+  >
+    <Image
+      src=""
+    />
+    <Text
+      style={
+        Object {
+          "fontSize": 16,
+          "fontWeight": 600,
+          "marginLeft": 8,
+        }
+      }
+    >
+      Copilot
+    </Text>
+  </Stack>
+  <Stack
+    horizontal={true}
+    style={
+      Object {
+        "marginTop": 16,
+        "width": "100%",
+      }
+    }
+    verticalAlign="center"
+  >
+    <StyledTextFieldBase
+      disabled={false}
+      onChange={[Function]}
+      style={
+        Object {
+          "lineHeight": 30,
+        }
+      }
+      styles={
+        Object {
+          "root": Object {
+            "width": "90%",
+          },
+        }
+      }
+      value="Write a query to return all records in this table"
+    />
+    <CustomizedIconButton
+      disabled={false}
+      iconProps={
+        Object {
+          "iconName": "Send",
+        }
+      }
+      onClick={[Function]}
+      style={
+        Object {
+          "marginLeft": 8,
+        }
+      }
+    />
+  </Stack>
+  <Text
+    style={
+      Object {
+        "fontSize": 12,
+        "marginBottom": 24,
+        "marginTop": 8,
+      }
+    }
+  >
+    AI-generated content can have mistakes. Make sure it's accurate and appropriate before using it.
+     
+    <StyledLinkBase
+      href=""
+      target="_blank"
+    >
+      Read preview terms
+    </StyledLinkBase>
+  </Text>
+  <Stack
+    horizontal={true}
+    style={
+      Object {
+        "backgroundColor": "#FFF8F0",
+        "padding": "2px 8px",
+      }
+    }
+    verticalAlign="center"
+  >
+    <Text
+      style={
+        Object {
+          "fontSize": 12,
+          "fontWeight": 600,
+        }
+      }
+    >
+      Provide feedback on the query generated
+    </Text>
+    <CustomizedIconButton
+      iconProps={
+        Object {
+          "iconName": "Like",
+        }
+      }
+      id="likeBtn"
+      onClick={[Function]}
+      style={
+        Object {
+          "marginLeft": 20,
+        }
+      }
+    />
+    <CustomizedIconButton
+      iconProps={
+        Object {
+          "iconName": "Dislike",
+        }
+      }
+      onClick={[Function]}
+      style={
+        Object {
+          "margin": "0 10px",
+        }
+      }
+    />
+    <Separator
+      style={
+        Object {
+          "color": "#EDEBE9",
+        }
+      }
+      vertical={true}
+    />
+    <CustomizedCommandBarButton
+      iconProps={
+        Object {
+          "iconName": "Copy",
+        }
+      }
+      style={
+        Object {
+          "backgroundColor": "#FFF8F0",
+          "margin": "0 10px",
+        }
+      }
+    >
+      Copy code
+    </CustomizedCommandBarButton>
+    <CustomizedCommandBarButton
+      iconProps={
+        Object {
+          "iconName": "Delete",
+        }
+      }
+      style={
+        Object {
+          "backgroundColor": "#FFF8F0",
+        }
+      }
+    >
+      Delete code
+    </CustomizedCommandBarButton>
+  </Stack>
+  <Stack
+    className="tabPaneContentContainer"
+  >
+    <t
+      customClassName=""
+      onDragEnd={null}
+      onDragStart={null}
+      onSecondaryPaneSizeChange={null}
+      percentage={false}
+      primaryIndex={0}
+      primaryMinSize={100}
+      secondaryMinSize={200}
+      vertical={true}
+    >
+      <EditorReact
+        ariaLabel="Editing Query"
+        content=""
+        isReadOnly={false}
+        language="sql"
+        lineNumbers="on"
+        onContentChanged={[Function]}
+        onContentSelected={[Function]}
+      />
+      <QueryResultSection
+        error=""
+        executeQueryDocumentsPage={[Function]}
+        isExecuting={false}
+        isMongoDB={false}
+        queryEditorContent=""
+      />
+    </t>
+  </Stack>
+</Stack>
+`;
--- a/src/Explorer/Quickstart/Tutorials/MongoQuickstartTutorial.tsx
+++ b/src/Explorer/Quickstart/Tutorials/MongoQuickstartTutorial.tsx
@@ -1,4 +1,4 @@
-import { Link, Stack, TeachingBubble, Text } from "@fluentui/react";
+import { DirectionalHint, Link, Stack, TeachingBubble, Text } from "@fluentui/react";
 import { ReactTabKind, useTabs } from "hooks/useTabs";
 import { useTeachingBubble } from "hooks/useTeachingBubble";
 import React from "react";
@@ -18,6 +18,11 @@ export const MongoQuickstartTutorial: React.FC = (): JSX.Element => {
    return <></>;
  }

+  let totalSteps = 9;
+  if (userContext.isTryCosmosDBSubscription) {
+    totalSteps = 10;
+  }
+
  switch (step) {
    case 1:
      return isSampleDBExpanded ? (
@@ -33,7 +38,7 @@ export const MongoQuickstartTutorial: React.FC = (): JSX.Element => {
            },
          }}
          onDismiss={() => onDimissTeachingBubble()}
-          footerContent="Step 1 of 8"
+          footerContent={"Step 1 of " + totalSteps}
        >
          Start viewing and working with your data by opening Documents under Data
        </TeachingBubble>
@@ -55,7 +60,7 @@ export const MongoQuickstartTutorial: React.FC = (): JSX.Element => {
            onClick: () => setStep(1),
          }}
          onDismiss={() => onDimissTeachingBubble()}
-          footerContent="Step 2 of 8"
+          footerContent={"Step 2 of " + totalSteps}
        >
          View documents here using the documents window. You can also use your favorite MongoDB tools and drivers to do
          so.
@@ -78,7 +83,7 @@ export const MongoQuickstartTutorial: React.FC = (): JSX.Element => {
            onClick: () => setStep(2),
          }}
          onDismiss={() => onDimissTeachingBubble()}
-          footerContent="Step 3 of 8"
+          footerContent={"Step 3 of " + totalSteps}
        >
          Add new document by copy / pasting JSON or uploading a JSON. You can also use your favorite MongoDB tools and
          drivers to do so.
@@ -99,7 +104,7 @@ export const MongoQuickstartTutorial: React.FC = (): JSX.Element => {
            onClick: () => setStep(3),
          }}
          onDismiss={() => onDimissTeachingBubble()}
-          footerContent="Step 4 of 8"
+          footerContent={"Step 4 of " + totalSteps}
        >
          Query your data using the filter function. Azure Cosmos DB for MongoDB provides comprehensive support for
          MongoDB query language constructs. You can also use your favorite MongoDB tools and drivers to do so.
@@ -120,7 +125,7 @@ export const MongoQuickstartTutorial: React.FC = (): JSX.Element => {
            onClick: () => setStep(4),
          }}
          onDismiss={() => onDimissTeachingBubble()}
-          footerContent="Step 5 of 8"
+          footerContent={"Step 5 of " + totalSteps}
        >
          Change throughput provisioned to your collection according to your needs
        </TeachingBubble>
@@ -140,7 +145,7 @@ export const MongoQuickstartTutorial: React.FC = (): JSX.Element => {
            onClick: () => setStep(5),
          }}
          onDismiss={() => onDimissTeachingBubble()}
-          footerContent="Step 6 of 8"
+          footerContent={"Step 6 of " + totalSteps}
        >
          Use the indexing policy editor to create and edit your indexes.
        </TeachingBubble>
@@ -160,12 +165,54 @@ export const MongoQuickstartTutorial: React.FC = (): JSX.Element => {
            onClick: () => setStep(6),
          }}
          onDismiss={() => onDimissTeachingBubble()}
-          footerContent="Step 7 of 8"
+          footerContent={"Step 7 of " + totalSteps}
        >
          Visualize your data, store queries in an interactive document
        </TeachingBubble>
      );
    case 8:
+      return (
+        <TeachingBubble
+          headline="Launch full screen"
+          target={"#openFullScreenBtn"}
+          hasCloseButton
+          primaryButtonProps={{
+            text: "Next",
+            onClick: () => (userContext.isTryCosmosDBSubscription ? setStep(9) : setStep(10)),
+          }}
+          secondaryButtonProps={{
+            text: "Previous",
+            onClick: () => setStep(7),
+          }}
+          onDismiss={() => onDimissTeachingBubble()}
+          footerContent={"Step 8 of " + totalSteps}
+        >
+          This will open a new tab in your browser to use Cosmos DB Explorer. Using the provided URLs you can share
+          read-write or read-only access with other people.
+        </TeachingBubble>
+      );
+    case 9:
+      return (
+        <TeachingBubble
+          headline="Boost your experience"
+          target={"#freeTierTeachingBubble"}
+          hasCloseButton
+          primaryButtonProps={{
+            text: "Next",
+            onClick: () => setStep(10),
+          }}
+          secondaryButtonProps={{
+            text: "Previous",
+            onClick: () => setStep(8),
+          }}
+          calloutProps={{ directionalHint: DirectionalHint.leftCenter }}
+          onDismiss={() => onDimissTeachingBubble()}
+          footerContent={"Step 9 of " + totalSteps}
+        >
+          Unlock everything Azure Cosmos DB has to offer When you&apos;re ready, upgrade to production.
+        </TeachingBubble>
+      );
+    case 10:
      return (
        <TeachingBubble
          headline="Congratulations!"
@@ -180,10 +227,10 @@ export const MongoQuickstartTutorial: React.FC = (): JSX.Element => {
          }}
          secondaryButtonProps={{
            text: "Previous",
-            onClick: () => setStep(7),
+            onClick: () => (userContext.isTryCosmosDBSubscription ? setStep(9) : setStep(8)),
          }}
          onDismiss={() => onDimissTeachingBubble()}
-          footerContent="Step 8 of 8"
+          footerContent={"Step " + totalSteps + " of " + totalSteps}
        >
          <Stack>
            <Text style={{ color: "white" }}>
--- a/src/Explorer/Quickstart/Tutorials/SQLQuickstartTutorial.tsx
+++ b/src/Explorer/Quickstart/Tutorials/SQLQuickstartTutorial.tsx
@@ -1,4 +1,4 @@
-import { Link, Stack, TeachingBubble, Text } from "@fluentui/react";
+import { DirectionalHint, Link, Stack, TeachingBubble, Text } from "@fluentui/react";
 import { ReactTabKind, useTabs } from "hooks/useTabs";
 import { useTeachingBubble } from "hooks/useTeachingBubble";
 import React from "react";
@@ -17,6 +17,10 @@ export const SQLQuickstartTutorial: React.FC = (): JSX.Element => {
  if (userContext.apiType !== "SQL") {
    return <></>;
  }
+  let totalSteps = 8;
+  if (userContext.isTryCosmosDBSubscription) {
+    totalSteps = 9;
+  }

  switch (step) {
    case 1:
@@ -33,7 +37,7 @@ export const SQLQuickstartTutorial: React.FC = (): JSX.Element => {
            },
          }}
          onDismiss={() => onDimissTeachingBubble()}
-          footerContent="Step 1 of 7"
+          footerContent={"Step 1 of " + totalSteps}
        >
          Start viewing and working with your data by opening Items under Data
        </TeachingBubble>
@@ -55,7 +59,7 @@ export const SQLQuickstartTutorial: React.FC = (): JSX.Element => {
            onClick: () => setStep(1),
          }}
          onDismiss={() => onDimissTeachingBubble()}
-          footerContent="Step 2 of 7"
+          footerContent={"Step 2 of " + totalSteps}
        >
          View item here using the items window. Additionally you can also filter items to be reviewed with the filter
          function
@@ -78,7 +82,7 @@ export const SQLQuickstartTutorial: React.FC = (): JSX.Element => {
            onClick: () => setStep(2),
          }}
          onDismiss={() => onDimissTeachingBubble()}
-          footerContent="Step 3 of 7"
+          footerContent={"Step 3 of " + totalSteps}
        >
          Add new item by copy / pasting JSON; or uploading a JSON
        </TeachingBubble>
@@ -98,7 +102,7 @@ export const SQLQuickstartTutorial: React.FC = (): JSX.Element => {
            onClick: () => setStep(3),
          }}
          onDismiss={() => onDimissTeachingBubble()}
-          footerContent="Step 4 of 7"
+          footerContent={"Step 4 of " + totalSteps}
        >
          Query your data using either the filter function or new query.
        </TeachingBubble>
@@ -118,7 +122,7 @@ export const SQLQuickstartTutorial: React.FC = (): JSX.Element => {
            onClick: () => setStep(4),
          }}
          onDismiss={() => onDimissTeachingBubble()}
-          footerContent="Step 5 of 7"
+          footerContent={"Step 5 of " + totalSteps}
        >
          Change throughput provisioned to your container according to your needs
        </TeachingBubble>
@@ -138,12 +142,54 @@ export const SQLQuickstartTutorial: React.FC = (): JSX.Element => {
            onClick: () => setStep(5),
          }}
          onDismiss={() => onDimissTeachingBubble()}
-          footerContent="Step 6 of 7"
+          footerContent={"Step 6 of " + totalSteps}
        >
          Visualize your data, store queries in an interactive document
        </TeachingBubble>
      );
    case 7:
+      return (
+        <TeachingBubble
+          headline="Launch full screen"
+          target={"#openFullScreenBtn"}
+          hasCloseButton
+          primaryButtonProps={{
+            text: "Next",
+            onClick: () => (userContext.isTryCosmosDBSubscription ? setStep(8) : setStep(9)),
+          }}
+          secondaryButtonProps={{
+            text: "Previous",
+            onClick: () => setStep(6),
+          }}
+          onDismiss={() => onDimissTeachingBubble()}
+          footerContent={"Step 7 of " + totalSteps}
+        >
+          This will open a new tab in your browser to use Cosmos DB Explorer. Using the provided URLs you can share
+          read-write or read-only access with other people.
+        </TeachingBubble>
+      );
+    case 8:
+      return (
+        <TeachingBubble
+          headline="Boost your experience"
+          target={"#freeTierTeachingBubble"}
+          hasCloseButton
+          primaryButtonProps={{
+            text: "Next",
+            onClick: () => setStep(9),
+          }}
+          secondaryButtonProps={{
+            text: "Previous",
+            onClick: () => setStep(7),
+          }}
+          calloutProps={{ directionalHint: DirectionalHint.leftCenter }}
+          onDismiss={() => onDimissTeachingBubble()}
+          footerContent={"Step 8 of " + totalSteps}
+        >
+          Unlock everything Azure Cosmos DB has to offer When you&apos;re ready, upgrade to production.
+        </TeachingBubble>
+      );
+    case 9:
      return (
        <TeachingBubble
          headline="Congratulations!"
@@ -158,10 +204,10 @@ export const SQLQuickstartTutorial: React.FC = (): JSX.Element => {
          }}
          secondaryButtonProps={{
            text: "Previous",
-            onClick: () => setStep(6),
+            onClick: () => (userContext.isTryCosmosDBSubscription ? setStep(8) : setStep(7)),
          }}
          onDismiss={() => onDimissTeachingBubble()}
-          footerContent="Step 7 of 7"
+          footerContent={"Step " + totalSteps + " of " + totalSteps}
        >
          <Stack>
            <Text style={{ color: "white" }}>
--- a/src/Explorer/SplashScreen/SplashScreen.tsx
+++ b/src/Explorer/SplashScreen/SplashScreen.tsx
@@ -14,19 +14,21 @@ import {
 import { sendMessage } from "Common/MessageHandler";
 import { MessageTypes } from "Contracts/ExplorerContracts";
 import { TerminalKind } from "Contracts/ViewModels";
+import { SplashScreenButton } from "Explorer/SplashScreen/SplashScreenButton";
+import { Action } from "Shared/Telemetry/TelemetryConstants";
+import { traceOpen } from "Shared/Telemetry/TelemetryProcessor";
 import { useCarousel } from "hooks/useCarousel";
 import { usePostgres } from "hooks/usePostgres";
 import { ReactTabKind, useTabs } from "hooks/useTabs";
 import * as React from "react";
-import { Action } from "Shared/Telemetry/TelemetryConstants";
-import { traceOpen } from "Shared/Telemetry/TelemetryProcessor";
 import ConnectIcon from "../../../images/Connect_color.svg";
 import ContainersIcon from "../../../images/Containers.svg";
+import CopilotIcon from "../../../images/Copilot.svg";
 import LinkIcon from "../../../images/Link_blue.svg";
-import NotebookIcon from "../../../images/notebook/Notebook-resource.svg";
 import NotebookColorIcon from "../../../images/Notebooks.svg";
 import PowerShellIcon from "../../../images/PowerShell.svg";
 import QuickStartIcon from "../../../images/Quickstart_Lightning.svg";
+import NotebookIcon from "../../../images/notebook/Notebook-resource.svg";
 import CollectionIcon from "../../../images/tree-collection.svg";
 import * as Constants from "../../Common/Constants";
 import { userContext } from "../../UserContext";
@@ -54,10 +56,6 @@ export interface SplashScreenProps {
 }

 export class SplashScreen extends React.Component<SplashScreenProps> {
-  private static readonly dataModelingUrl = "https://docs.microsoft.com/azure/cosmos-db/modeling-data";
-  private static readonly throughputEstimatorUrl = "https://cosmos.azure.com/capacitycalculator";
-  private static readonly failoverUrl = "https://docs.microsoft.com/azure/cosmos-db/high-availability";
-
  private readonly container: Explorer;
  private subscriptions: Array<{ dispose: () => void }>;

@@ -108,25 +106,52 @@ export class SplashScreen extends React.Component<SplashScreenProps> {
    this.setState({});
  };

-  public render(): JSX.Element {
-    const mainItems = this.createMainItems();
-
+  private getSplashScreenButtons = (): JSX.Element => {
+    if (userContext.features.enableCopilot && userContext.apiType === "SQL") {
+      return (
+        <Stack style={{ width: "66%", cursor: "pointer", margin: "40px auto" }} tokens={{ childrenGap: 16 }}>
+          <Stack horizontal tokens={{ childrenGap: 16 }}>
+            <SplashScreenButton
+              imgSrc={QuickStartIcon}
+              title={"Launch quick start"}
+              description={"Launch a quick start tutorial to get started with sample data"}
+              onClick={() => {
+                this.container.onNewCollectionClicked({ isQuickstart: true });
+                traceOpen(Action.LaunchQuickstart, { apiType: userContext.apiType });
+              }}
+            />
+            <SplashScreenButton
+              imgSrc={ContainersIcon}
+              title={`New ${getCollectionName()}`}
+              description={"Create a new container for storage and throughput"}
+              onClick={() => {
+                this.container.onNewCollectionClicked();
+                traceOpen(Action.NewContainerHomepage, { apiType: userContext.apiType });
+              }}
+            />
+          </Stack>
+          <Stack horizontal tokens={{ childrenGap: 16 }}>
+            <SplashScreenButton
+              imgSrc={CopilotIcon}
+              title={"Query faster with Copilot"}
+              description={
+                "Copilot is your AI buddy that helps you write Azure Cosmos DB queries like a pro. Try it using our sample data set now!"
+              }
+              onClick={() => useTabs.getState().openAndActivateReactTab(ReactTabKind.QueryCopilot)}
+            />
+            <SplashScreenButton
+              imgSrc={ConnectIcon}
+              title={"Connect"}
+              description={"Prefer using your own choice of tooling? Find the connection string you need to connect"}
+              onClick={() => useTabs.getState().openAndActivateReactTab(ReactTabKind.Connect)}
+            />
+          </Stack>
+        </Stack>
+      );
+    }
+
+    const mainItems = this.createMainItems();
    return (
-      <div className="connectExplorerContainer">
-        <form className="connectExplorerFormContainer">
-          <div className="splashScreenContainer">
-            <div className="splashScreen">
-              <div className="title">
-                {userContext.apiType === "Postgres"
-                  ? "Welcome to Azure Cosmos DB for PostgreSQL"
-                  : "Welcome to Azure Cosmos DB"}
-                <FeaturePanelLauncher />
-              </div>
-              <div className="subtitle">
-                {userContext.apiType === "Postgres"
-                  ? "Get started with our sample datasets, documentation, and additional tools."
-                  : "Globally distributed, multi-model database service for any scale"}
-              </div>
      <div className="mainButtonsContainer">
        {userContext.apiType === "Postgres" &&
          usePostgres.getState().showPostgreTeachingBubble &&
@@ -151,8 +176,8 @@ export class SplashScreen extends React.Component<SplashScreenProps> {
                },
              }}
            >
-                      Welcome! If you are new to Cosmos DB PGSQL and need help with getting started, here is where you
-                      can find sample data, query.
+              Welcome! If you are new to Cosmos DB PGSQL and need help with getting started, here is where you can find
+              sample data, query.
            </TeachingBubble>
          )}
        {mainItems.map((item) => (
@@ -212,6 +237,34 @@ export class SplashScreen extends React.Component<SplashScreenProps> {
          </TeachingBubble>
        )}
      </div>
+    );
+  };
+
+  public render(): JSX.Element {
+    return (
+      <div className="connectExplorerContainer">
+        <form className="connectExplorerFormContainer">
+          <div className="splashScreenContainer">
+            <div className="splashScreen">
+              <div
+                className="title"
+                aria-label={
+                  userContext.apiType === "Postgres"
+                    ? "Welcome to Azure Cosmos DB for PostgreSQL"
+                    : "Welcome to Azure Cosmos DB"
+                }
+              >
+                {userContext.apiType === "Postgres"
+                  ? "Welcome to Azure Cosmos DB for PostgreSQL"
+                  : "Welcome to Azure Cosmos DB"}
+                <FeaturePanelLauncher />
+              </div>
+              <div className="subtitle">
+                {userContext.apiType === "Postgres"
+                  ? "Get started with our sample datasets, documentation, and additional tools."
+                  : "Globally distributed, multi-model database service for any scale"}
+              </div>
+              {this.getSplashScreenButtons()}
              {useCarousel.getState().showCoachMark && (
                <Coachmark
                  target="#quickstartDescription"
@@ -241,7 +294,7 @@ export class SplashScreen extends React.Component<SplashScreenProps> {
                </Coachmark>
              )}
              {userContext.apiType === "Postgres" ? (
-                <Stack horizontal style={{ margin: "0 auto", width: "84%" }} tokens={{ childrenGap: 32 }}>
+                <Stack horizontal style={{ margin: "0 auto", width: "84%" }} tokens={{ childrenGap: 16 }}>
                  <Stack style={{ width: "33%" }}>
                    <Text
                      variant="large"
@@ -528,7 +581,7 @@ export class SplashScreen extends React.Component<SplashScreenProps> {
              >
                {item.title}
              </Link>
-              <Image src={LinkIcon} />
+              <Image src={LinkIcon} alt=" " />
            </Stack>
            <Text>{item.description}</Text>
          </Stack>
@@ -563,7 +616,17 @@ export class SplashScreen extends React.Component<SplashScreenProps> {
  }

  private getLearningResourceItems(): JSX.Element {
-    let items: { link: string; title: string; description: string }[];
+    interface item {
+      link: string;
+      title: string;
+      description: string;
+    }
+    const cdbLiveTv: item = {
+      link: "https://developer.azurecosmosdb.com/tv",
+      title: "Learn the Fundamentals",
+      description: "Watch Azure Cosmos DB Live TV show introductory and how to videos.",
+    };
+    let items: item[];
    switch (userContext.apiType) {
      case "SQL":
      case "Postgres":
@@ -573,11 +636,7 @@ export class SplashScreen extends React.Component<SplashScreenProps> {
            title: "Get Started using an SDK",
            description: "Learn about the Azure Cosmos DB SDK.",
          },
-          {
-            link: "https://aka.ms/msl-complex-queries",
-            title: "Master Complex Queries",
-            description: "Learn how to author complex queries.",
-          },
+          cdbLiveTv,
          {
            link: "https://aka.ms/msl-move-data",
            title: "Migrate Your Data",
@@ -597,11 +656,7 @@ export class SplashScreen extends React.Component<SplashScreenProps> {
            title: "Getting Started Guide",
            description: "Learn the basics to get started.",
          },
-          {
-            link: "http://aka.ms/mongodotnet",
-            title: "Build a web API",
-            description: "Create a web API with the.NET SDK.",
-          },
+          cdbLiveTv,
        ];
        break;
      case "Cassandra":
@@ -611,11 +666,7 @@ export class SplashScreen extends React.Component<SplashScreenProps> {
            title: "Create a Container",
            description: "Get to know the create a container options.",
          },
-          {
-            link: "https://aka.ms/cassandraserverdiagnostics",
-            title: "Run Server Diagnostics",
-            description: "Learn how to run server diagnostics.",
-          },
+          cdbLiveTv,
          {
            link: "https://aka.ms/Cassandrathroughput",
            title: "Provision Throughput",
@@ -635,11 +686,7 @@ export class SplashScreen extends React.Component<SplashScreenProps> {
            title: "Import Graph Data",
            description: "Learn Bulk ingestion data using BulkExecutor",
          },
-          {
-            link: "https://aka.ms/graphoptimize",
-            title: "Optimize your Queries",
-            description: "Learn how to evaluate your Gremlin queries",
-          },
+          cdbLiveTv,
        ];
        break;
      case "Tables":
@@ -654,11 +701,7 @@ export class SplashScreen extends React.Component<SplashScreenProps> {
            title: "Build a Java App",
            description: "Create a Azure Cosmos DB for Table app with Java SDK ",
          },
-          {
-            link: "https://aka.ms/tablenodejs",
-            title: "Build a Node.js App",
-            description: "Create a Azure Cosmos DB for Table app with Node.js SDK",
-          },
+          cdbLiveTv,
        ];
        break;
    }
--- a/src/Explorer/SplashScreen/SplashScreenButton.tsx
+++ b/src/Explorer/SplashScreen/SplashScreenButton.tsx
@@ -0,0 +1,50 @@
+import { Stack, Text } from "@fluentui/react";
+import React from "react";
+import { KeyCodes } from "../../Common/Constants";
+
+interface SplashScreenButtonProps {
+  imgSrc: string;
+  title: string;
+  description: string;
+  onClick: () => void;
+}
+
+export const SplashScreenButton: React.FC<SplashScreenButtonProps> = ({
+  imgSrc,
+  title,
+  description,
+  onClick,
+}: SplashScreenButtonProps): JSX.Element => {
+  return (
+    <Stack
+      horizontal
+      style={{
+        border: "1px solid #949494",
+        boxSizing: "border-box",
+        boxShadow: "0 4px 4px rgba(0, 0, 0, 0.25)",
+        borderRadius: 4,
+        padding: "32px 16px",
+        backgroundColor: "#ffffff",
+        width: "100%",
+        minHeight: 150,
+      }}
+      onClick={onClick}
+      onKeyPress={(event: React.KeyboardEvent) => {
+        if (event.charCode === KeyCodes.Space || event.charCode === KeyCodes.Enter) {
+          onClick();
+          event.stopPropagation();
+        }
+      }}
+      tabIndex={0}
+      role="button"
+    >
+      <div>
+        <img src={imgSrc} />
+      </div>
+      <Stack style={{ marginLeft: 16 }}>
+        <Text style={{ fontSize: 18, fontWeight: 600 }}>{title}</Text>
+        <Text style={{ fontSize: 13 }}>{description}</Text>
+      </Stack>
+    </Stack>
+  );
+};
--- a/src/Explorer/Tabs/MongoShellTab/MongoShellTabComponent.tsx
+++ b/src/Explorer/Tabs/MongoShellTab/MongoShellTabComponent.tsx
@@ -1,6 +1,6 @@
 import React, { Component } from "react";
 import * as Constants from "../../../Common/Constants";
-import { configContext, Platform } from "../../../ConfigContext";
+import { configContext } from "../../../ConfigContext";
 import * as ViewModels from "../../../Contracts/ViewModels";
 import { Action, ActionModifiers } from "../../../Shared/Telemetry/TelemetryConstants";
 import * as TelemetryProcessor from "../../../Shared/Telemetry/TelemetryProcessor";
@@ -9,6 +9,8 @@ import { isInvalidParentFrameOrigin, isReadyMessage } from "../../../Utils/Messa
 import { logConsoleError, logConsoleInfo, logConsoleProgress } from "../../../Utils/NotificationConsoleUtils";
 import Explorer from "../../Explorer";
 import TabsBase from "../TabsBase";
+import { getMongoShellOrigin } from "./getMongoShellOrigin";
+import { getMongoShellUrl } from "./getMongoShellUrl";

 //eslint-disable-next-line
 class MessageType {
@@ -47,7 +49,6 @@ export default class MongoShellTabComponent extends Component<
  IMongoShellTabComponentProps,
  IMongoShellTabComponentStates
 > {
-  private _runtimeEndpoint: string;
  private _logTraces: Map<string, number>;

  constructor(props: IMongoShellTabComponentProps) {
@@ -55,7 +56,7 @@ export default class MongoShellTabComponent extends Component<
    this._logTraces = new Map();

    this.state = {
-      url: this.getURL(),
+      url: getMongoShellUrl(),
    };

    props.onMongoShellTabAccessor({
@@ -65,22 +66,6 @@ export default class MongoShellTabComponent extends Component<
    window.addEventListener("message", this.handleMessage.bind(this), false);
  }

-  public getURL(): string {
-    const { databaseAccount: account } = userContext;
-    const resourceId = account?.id;
-    const accountName = account?.name;
-    const mongoEndpoint = account?.properties?.mongoEndpoint || account?.properties?.documentEndpoint;
-
-    this._runtimeEndpoint = configContext.platform === Platform.Hosted ? configContext.BACKEND_ENDPOINT : "";
-    const extensionEndpoint: string = configContext.BACKEND_ENDPOINT || this._runtimeEndpoint || "";
-    let baseUrl = "/content/mongoshell/dist/";
-    if (userContext.portalEnv === "localhost") {
-      baseUrl = "/content/mongoshell/";
-    }
-
-    return `${extensionEndpoint}${baseUrl}index.html?resourceId=${resourceId}&accountName=${accountName}&mongoEndpoint=${mongoEndpoint}`;
-  }
-
  //eslint-disable-next-line
  public setContentFocus(event: React.SyntheticEvent<HTMLIFrameElement, Event>): void {}

@@ -136,6 +121,7 @@ export default class MongoShellTabComponent extends Component<
    const collectionId = this.props.collection.id();
    const apiEndpoint = configContext.BACKEND_ENDPOINT;
    const encryptedAuthToken: string = userContext.accessToken;
+    const targetOrigin = getMongoShellOrigin();

    shellIframe.contentWindow.postMessage(
      {
@@ -151,7 +137,7 @@ export default class MongoShellTabComponent extends Component<
          apiEndpoint: apiEndpoint,
        },
      },
-      configContext.BACKEND_ENDPOINT
+      targetOrigin
    );
  }

--- a/src/Explorer/Tabs/MongoShellTab/getMongoShellOrigin.test.ts
+++ b/src/Explorer/Tabs/MongoShellTab/getMongoShellOrigin.test.ts
@@ -0,0 +1,86 @@
+import { extractFeatures } from "Platform/Hosted/extractFeatures";
+import { configContext } from "../../../ConfigContext";
+import { updateUserContext } from "../../../UserContext";
+import { getMongoShellOrigin } from "./getMongoShellOrigin";
+
+describe("getMongoShellOrigin", () => {
+  (window as { origin: string }).origin = "window_origin";
+
+  beforeEach(() => {
+    updateUserContext({
+      features: extractFeatures(
+        new URLSearchParams({
+          "feature.enableLegacyMongoShellV1": "false",
+          "feature.enableLegacyMongoShellV2": "false",
+          "feature.enableLegacyMongoShellV1Debug": "false",
+          "feature.enableLegacyMongoShellV2Debug": "false",
+          "feature.loadLegacyMongoShellFromBE": "false",
+        })
+      ),
+    });
+  });
+
+  it("should return  by default", () => {
+    expect(getMongoShellOrigin()).toBe(window.origin);
+  });
+
+  it("should return window.origin when enableLegacyMongoShellV1", () => {
+    updateUserContext({
+      features: extractFeatures(
+        new URLSearchParams({
+          "feature.enableLegacyMongoShellV1": "true",
+        })
+      ),
+    });
+
+    expect(getMongoShellOrigin()).toBe(window.origin);
+  });
+
+  it("should return window.origin when enableLegacyMongoShellV2===true", () => {
+    updateUserContext({
+      features: extractFeatures(
+        new URLSearchParams({
+          "feature.enableLegacyMongoShellV2": "true",
+        })
+      ),
+    });
+
+    expect(getMongoShellOrigin()).toBe(window.origin);
+  });
+
+  it("should return window.origin when enableLegacyMongoShellV1Debug===true", () => {
+    updateUserContext({
+      features: extractFeatures(
+        new URLSearchParams({
+          "feature.enableLegacyMongoShellV1Debug": "true",
+        })
+      ),
+    });
+
+    expect(getMongoShellOrigin()).toBe(window.origin);
+  });
+
+  it("should return window.origin when enableLegacyMongoShellV2Debug===true", () => {
+    updateUserContext({
+      features: extractFeatures(
+        new URLSearchParams({
+          "feature.enableLegacyMongoShellV2Debug": "true",
+        })
+      ),
+    });
+
+    expect(getMongoShellOrigin()).toBe(window.origin);
+  });
+
+  it("should return BACKEND_ENDPOINT when loadLegacyMongoShellFromBE===true", () => {
+    updateUserContext({
+      features: extractFeatures(
+        new URLSearchParams({
+          "feature.loadLegacyMongoShellFromBE": "true",
+        })
+      ),
+    });
+
+    expect(getMongoShellOrigin()).toBe(configContext.BACKEND_ENDPOINT);
+  });
+});
--- a/src/Explorer/Tabs/MongoShellTab/getMongoShellOrigin.ts
+++ b/src/Explorer/Tabs/MongoShellTab/getMongoShellOrigin.ts
@@ -0,0 +1,10 @@
+import { configContext } from "../../../ConfigContext";
+import { userContext } from "../../../UserContext";
+
+export function getMongoShellOrigin(): string {
+  if (userContext.features.loadLegacyMongoShellFromBE === true) {
+    return configContext.BACKEND_ENDPOINT;
+  }
+
+  return window.origin;
+}
--- a/src/Explorer/Tabs/MongoShellTab/getMongoShellUrl.test.ts
+++ b/src/Explorer/Tabs/MongoShellTab/getMongoShellUrl.test.ts
@@ -0,0 +1,206 @@
+import { extractFeatures } from "Platform/Hosted/extractFeatures";
+import { Platform, configContext, resetConfigContext, updateConfigContext } from "../../../ConfigContext";
+import { updateUserContext, userContext } from "../../../UserContext";
+import { getExtensionEndpoint, getMongoShellUrl } from "./getMongoShellUrl";
+
+const mongoBackendEndpoint = "https://localhost:1234";
+
+describe("getMongoShellUrl", () => {
+  let queryString = "";
+
+  beforeEach(() => {
+    resetConfigContext();
+
+    updateConfigContext({
+      BACKEND_ENDPOINT: mongoBackendEndpoint,
+      platform: Platform.Hosted,
+    });
+
+    updateUserContext({
+      subscriptionId: "fakeSubscriptionId",
+      resourceGroup: "fakeResourceGroup",
+      databaseAccount: {
+        id: "fakeId",
+        name: "fakeName",
+        location: "fakeLocation",
+        type: "fakeType",
+        kind: "fakeKind",
+        properties: {
+          documentEndpoint: "fakeDocumentEndpoint",
+          tableEndpoint: "fakeTableEndpoint",
+          gremlinEndpoint: "fakeGremlinEndpoint",
+          cassandraEndpoint: "fakeCassandraEndpoint",
+        },
+      },
+      features: extractFeatures(
+        new URLSearchParams({
+          "feature.enableLegacyMongoShellV1": "false",
+          "feature.enableLegacyMongoShellV2": "false",
+          "feature.enableLegacyMongoShellV1Debug": "false",
+          "feature.enableLegacyMongoShellV2Debug": "false",
+          "feature.loadLegacyMongoShellFromBE": "false",
+        })
+      ),
+      portalEnv: "prod",
+    });
+
+    queryString = `resourceId=${userContext.databaseAccount.id}&accountName=${userContext.databaseAccount.name}&mongoEndpoint=${userContext.databaseAccount.properties.documentEndpoint}`;
+  });
+
+  it("should return /mongoshell/indexv2.html by default ", () => {
+    expect(getMongoShellUrl()).toBe(`/mongoshell/indexv2.html?${queryString}`);
+  });
+
+  it("should return /mongoshell/indexv2.html when portalEnv==localhost ", () => {
+    updateUserContext({
+      portalEnv: "localhost",
+    });
+
+    expect(getMongoShellUrl()).toBe(`/mongoshell/indexv2.html?${queryString}`);
+  });
+
+  it("should return /mongoshell/index.html when enableLegacyMongoShellV1===true", () => {
+    updateUserContext({
+      features: extractFeatures(
+        new URLSearchParams({
+          "feature.enableLegacyMongoShellV1": "true",
+        })
+      ),
+    });
+
+    expect(getMongoShellUrl()).toBe(`/mongoshell/index.html?${queryString}`);
+  });
+
+  it("should return /mongoshell/index.html when enableLegacyMongoShellV2===true", () => {
+    updateUserContext({
+      features: extractFeatures(
+        new URLSearchParams({
+          "feature.enableLegacyMongoShellV2": "true",
+        })
+      ),
+    });
+
+    expect(getMongoShellUrl()).toBe(`/mongoshell/indexv2.html?${queryString}`);
+  });
+
+  it("should return /mongoshell/index.html when enableLegacyMongoShellV1Debug===true", () => {
+    updateUserContext({
+      features: extractFeatures(
+        new URLSearchParams({
+          "feature.enableLegacyMongoShellV1Debug": "true",
+        })
+      ),
+    });
+
+    expect(getMongoShellUrl()).toBe(`/mongoshell/debug/index.html?${queryString}`);
+  });
+
+  it("should return /mongoshell/index.html when enableLegacyMongoShellV2Debug===true", () => {
+    updateUserContext({
+      features: extractFeatures(
+        new URLSearchParams({
+          "feature.enableLegacyMongoShellV2Debug": "true",
+        })
+      ),
+    });
+
+    expect(getMongoShellUrl()).toBe(`/mongoshell/debug/indexv2.html?${queryString}`);
+  });
+
+  describe("loadLegacyMongoShellFromBE===true", () => {
+    beforeEach(() => {
+      resetConfigContext();
+      updateConfigContext({
+        BACKEND_ENDPOINT: mongoBackendEndpoint,
+        platform: Platform.Hosted,
+      });
+
+      updateUserContext({
+        features: extractFeatures(
+          new URLSearchParams({
+            "feature.loadLegacyMongoShellFromBE": "true",
+          })
+        ),
+      });
+    });
+
+    it("should return /mongoshell/index.html", () => {
+      const endpoint = getExtensionEndpoint(configContext.platform, configContext.BACKEND_ENDPOINT);
+      expect(getMongoShellUrl()).toBe(`${endpoint}/content/mongoshell/debug/index.html?${queryString}`);
+    });
+
+    it("configContext.platform !== Platform.Hosted, should return /mongoshell/indexv2.html", () => {
+      updateConfigContext({
+        platform: Platform.Portal,
+      });
+
+      const endpoint = getExtensionEndpoint(configContext.platform, configContext.BACKEND_ENDPOINT);
+      expect(getMongoShellUrl()).toBe(`${endpoint}/content/mongoshell/debug/index.html?${queryString}`);
+    });
+
+    it("configContext.BACKEND_ENDPOINT !== '' and configContext.platform !== Platform.Hosted, should return /mongoshell/indexv2.html", () => {
+      resetConfigContext();
+      updateConfigContext({
+        platform: Platform.Portal,
+        BACKEND_ENDPOINT: mongoBackendEndpoint,
+      });
+
+      const endpoint = getExtensionEndpoint(configContext.platform, configContext.BACKEND_ENDPOINT);
+      expect(getMongoShellUrl()).toBe(`${endpoint}/content/mongoshell/debug/index.html?${queryString}`);
+    });
+
+    it("configContext.BACKEND_ENDPOINT === '' and configContext.platform === Platform.Hosted, should return /mongoshell/indexv2.html ", () => {
+      resetConfigContext();
+      updateConfigContext({
+        platform: Platform.Hosted,
+      });
+
+      const endpoint = getExtensionEndpoint(configContext.platform, configContext.BACKEND_ENDPOINT);
+      expect(getMongoShellUrl()).toBe(`${endpoint}/content/mongoshell/debug/index.html?${queryString}`);
+    });
+
+    it("configContext.BACKEND_ENDPOINT === '' and configContext.platform !== Platform.Hosted, should return /mongoshell/indexv2.html", () => {
+      resetConfigContext();
+      updateConfigContext({
+        platform: Platform.Portal,
+      });
+
+      const endpoint = getExtensionEndpoint(configContext.platform, configContext.BACKEND_ENDPOINT);
+      expect(getMongoShellUrl()).toBe(`${endpoint}/content/mongoshell/debug/index.html?${queryString}`);
+    });
+  });
+});
+
+describe("getExtensionEndpoint", () => {
+  it("when platform === Platform.Hosted, backendEndpoint is undefined ", () => {
+    expect(getExtensionEndpoint(Platform.Hosted, undefined)).toBe("");
+  });
+
+  it("when platform === Platform.Hosted, backendEndpoint === ''", () => {
+    expect(getExtensionEndpoint(Platform.Hosted, "")).toBe("");
+  });
+
+  it("when platform === Platform.Hosted, backendEndpoint === null", () => {
+    expect(getExtensionEndpoint(Platform.Hosted, null)).toBe("");
+  });
+
+  it("when platform === Platform.Hosted, backendEndpoint != '' ", () => {
+    expect(getExtensionEndpoint(Platform.Hosted, "foo")).toBe("foo");
+  });
+
+  it("when platform === Platform.Portal, backendEndpoint is udefined ", () => {
+    expect(getExtensionEndpoint(Platform.Portal, undefined)).toBe("");
+  });
+
+  it("when platform === Platform.Portal, backendEndpoint === '' ", () => {
+    expect(getExtensionEndpoint(Platform.Portal, "")).toBe("");
+  });
+
+  it("when platform === Platform.Portal, backendEndpoint === null", () => {
+    expect(getExtensionEndpoint(Platform.Portal, null)).toBe("");
+  });
+
+  it("when platform !== Platform.Portal, backendEndpoint != '' ", () => {
+    expect(getExtensionEndpoint(Platform.Portal, "foo")).toBe("foo");
+  });
+});
--- a/src/Explorer/Tabs/MongoShellTab/getMongoShellUrl.ts
+++ b/src/Explorer/Tabs/MongoShellTab/getMongoShellUrl.ts
@@ -0,0 +1,45 @@
+import { configContext, Platform } from "../../../ConfigContext";
+import { userContext } from "../../../UserContext";
+
+export function getMongoShellUrl(): string {
+  const { databaseAccount: account } = userContext;
+  const resourceId = account?.id;
+  const accountName = account?.name;
+  const mongoEndpoint = account?.properties?.mongoEndpoint || account?.properties?.documentEndpoint;
+  const queryString = `resourceId=${resourceId}&accountName=${accountName}&mongoEndpoint=${mongoEndpoint}`;
+
+  if (userContext.features.enableLegacyMongoShellV1 === true) {
+    return `/mongoshell/index.html?${queryString}`;
+  }
+
+  if (userContext.features.enableLegacyMongoShellV1Debug === true) {
+    return `/mongoshell/debug/index.html?${queryString}`;
+  }
+
+  if (userContext.features.enableLegacyMongoShellV2 === true) {
+    return `/mongoshell/indexv2.html?${queryString}`;
+  }
+
+  if (userContext.features.enableLegacyMongoShellV2Debug === true) {
+    return `/mongoshell/debug/indexv2.html?${queryString}`;
+  }
+
+  if (userContext.portalEnv === "localhost") {
+    return `/mongoshell/indexv2.html?${queryString}`;
+  }
+
+  if (userContext.features.loadLegacyMongoShellFromBE === true) {
+    const extensionEndpoint: string = getExtensionEndpoint(configContext.platform, configContext.BACKEND_ENDPOINT);
+    return `${extensionEndpoint}/content/mongoshell/debug/index.html?${queryString}`;
+  }
+
+  return `/mongoshell/indexv2.html?${queryString}`;
+}
+
+export function getExtensionEndpoint(platform: string, backendEndpoint: string): string {
+  const runtimeEndpoint = platform === Platform.Hosted ? backendEndpoint : "";
+
+  const extensionEndpoint: string = backendEndpoint || runtimeEndpoint || "";
+
+  return extensionEndpoint;
+}
--- a/src/Explorer/Tabs/QueryTab/QueryResultSection.tsx
+++ b/src/Explorer/Tabs/QueryTab/QueryResultSection.tsx
@@ -0,0 +1,495 @@
+import {
+  DetailsList,
+  DetailsListLayoutMode,
+  IColumn,
+  Pivot,
+  PivotItem,
+  SelectionMode,
+  Stack,
+  Text,
+} from "@fluentui/react";
+import { HttpHeaders, NormalizedEventKey } from "Common/Constants";
+import MongoUtility from "Common/MongoUtility";
+import { InfoTooltip } from "Common/Tooltip/InfoTooltip";
+import { QueryMetrics } from "Contracts/DataModels";
+import { EditorReact } from "Explorer/Controls/Editor/EditorReact";
+import { IDocument } from "Explorer/Tabs/QueryTab/QueryTabComponent";
+import { userContext } from "UserContext";
+import { useNotificationConsole } from "hooks/useNotificationConsole";
+import React from "react";
+import DownloadQueryMetrics from "../../../../images/DownloadQuery.svg";
+import QueryEditorNext from "../../../../images/Query-Editor-Next.svg";
+import RunQuery from "../../../../images/RunQuery.png";
+import InfoColor from "../../../../images/info_color.svg";
+import { QueryResults } from "../../../Contracts/ViewModels";
+
+interface QueryResultProps {
+  isMongoDB: boolean;
+  queryEditorContent: string;
+  error: string;
+  isExecuting: boolean;
+  queryResults: QueryResults;
+  executeQueryDocumentsPage: (firstItemIndex: number) => Promise<void>;
+}
+
+export const QueryResultSection: React.FC<QueryResultProps> = ({
+  isMongoDB,
+  queryEditorContent,
+  error,
+  queryResults,
+  isExecuting,
+  executeQueryDocumentsPage,
+}: QueryResultProps): JSX.Element => {
+  const queryMetrics = React.useRef(queryResults?.headers?.[HttpHeaders.queryMetrics]);
+
+  React.useEffect(() => {
+    const latestQueryMetrics = queryResults?.headers?.[HttpHeaders.queryMetrics];
+    if (latestQueryMetrics && Object.keys(latestQueryMetrics).length > 0) {
+      queryMetrics.current = latestQueryMetrics;
+    }
+  }, [queryResults]);
+
+  const onRender = (item: IDocument): JSX.Element => (
+    <>
+      <InfoTooltip>{`${item.toolTip}`}</InfoTooltip>
+      <Text style={{ paddingLeft: 10, margin: 0 }}>{`${item.metric}`}</Text>
+    </>
+  );
+  const columns: IColumn[] = [
+    {
+      key: "column2",
+      name: "METRIC",
+      minWidth: 200,
+      data: String,
+      fieldName: "metric",
+      onRender,
+    },
+    {
+      key: "column3",
+      name: "VALUE",
+      minWidth: 200,
+      data: String,
+      fieldName: "value",
+    },
+  ];
+  const maybeSubQuery = queryEditorContent && /.*\(.*SELECT.*\)/i.test(queryEditorContent);
+  const queryResultsString = queryResults
+    ? isMongoDB
+      ? MongoUtility.tojson(queryResults.documents, undefined, false)
+      : JSON.stringify(queryResults.documents, undefined, 4)
+    : "";
+
+  const onErrorDetailsClick = (): boolean => {
+    useNotificationConsole.getState().expandConsole();
+
+    return false;
+  };
+
+  const onErrorDetailsKeyPress = (event: React.KeyboardEvent<HTMLAnchorElement>): boolean => {
+    if (event.key === NormalizedEventKey.Space || event.key === NormalizedEventKey.Enter) {
+      onErrorDetailsClick();
+      return false;
+    }
+
+    return true;
+  };
+
+  const onDownloadQueryMetricsCsvClick = (): boolean => {
+    downloadQueryMetricsCsvData();
+    return false;
+  };
+
+  const onDownloadQueryMetricsCsvKeyPress = (event: React.KeyboardEvent<HTMLAnchorElement>): boolean => {
+    if (event.key === NormalizedEventKey.Space || NormalizedEventKey.Enter) {
+      downloadQueryMetricsCsvData();
+      return false;
+    }
+
+    return true;
+  };
+
+  const downloadQueryMetricsCsvData = (): void => {
+    const csvData: string = generateQueryMetricsCsvData();
+    if (!csvData) {
+      return;
+    }
+
+    if (navigator.msSaveBlob) {
+      // for IE and Edge
+      navigator.msSaveBlob(
+        new Blob([csvData], { type: "data:text/csv;charset=utf-8" }),
+        "PerPartitionQueryMetrics.csv"
+      );
+    } else {
+      const downloadLink: HTMLAnchorElement = document.createElement("a");
+      downloadLink.href = "data:text/csv;charset=utf-8," + encodeURI(csvData);
+      downloadLink.target = "_self";
+      downloadLink.download = "QueryMetricsPerPartition.csv";
+
+      // for some reason, FF displays the download prompt only when
+      // the link is added to the dom so we add and remove it
+      document.body.appendChild(downloadLink);
+      downloadLink.click();
+      downloadLink.remove();
+    }
+  };
+
+  const getAggregatedQueryMetrics = (): QueryMetrics => {
+    const aggregatedQueryMetrics = {
+      documentLoadTime: 0,
+      documentWriteTime: 0,
+      indexHitDocumentCount: 0,
+      outputDocumentCount: 0,
+      outputDocumentSize: 0,
+      indexLookupTime: 0,
+      retrievedDocumentCount: 0,
+      retrievedDocumentSize: 0,
+      vmExecutionTime: 0,
+      runtimeExecutionTimes: {
+        queryEngineExecutionTime: 0,
+        systemFunctionExecutionTime: 0,
+        userDefinedFunctionExecutionTime: 0,
+      },
+      totalQueryExecutionTime: 0,
+    } as QueryMetrics;
+
+    if (queryMetrics.current) {
+      Object.keys(queryMetrics.current).forEach((partitionKeyRangeId) => {
+        const queryMetricsPerPartition = queryMetrics.current[partitionKeyRangeId];
+        if (!queryMetricsPerPartition) {
+          return;
+        }
+        aggregatedQueryMetrics.documentLoadTime += queryMetricsPerPartition.documentLoadTime?.totalMilliseconds() || 0;
+        aggregatedQueryMetrics.documentWriteTime +=
+          queryMetricsPerPartition.documentWriteTime?.totalMilliseconds() || 0;
+        aggregatedQueryMetrics.indexHitDocumentCount += queryMetricsPerPartition.indexHitDocumentCount || 0;
+        aggregatedQueryMetrics.outputDocumentCount += queryMetricsPerPartition.outputDocumentCount || 0;
+        aggregatedQueryMetrics.outputDocumentSize += queryMetricsPerPartition.outputDocumentSize || 0;
+        aggregatedQueryMetrics.indexLookupTime += queryMetricsPerPartition.indexLookupTime?.totalMilliseconds() || 0;
+        aggregatedQueryMetrics.retrievedDocumentCount += queryMetricsPerPartition.retrievedDocumentCount || 0;
+        aggregatedQueryMetrics.retrievedDocumentSize += queryMetricsPerPartition.retrievedDocumentSize || 0;
+        aggregatedQueryMetrics.vmExecutionTime += queryMetricsPerPartition.vmExecutionTime?.totalMilliseconds() || 0;
+        aggregatedQueryMetrics.totalQueryExecutionTime +=
+          queryMetricsPerPartition.totalQueryExecutionTime?.totalMilliseconds() || 0;
+        aggregatedQueryMetrics.runtimeExecutionTimes.queryEngineExecutionTime +=
+          queryMetricsPerPartition.runtimeExecutionTimes?.queryEngineExecutionTime?.totalMilliseconds() || 0;
+        aggregatedQueryMetrics.runtimeExecutionTimes.systemFunctionExecutionTime +=
+          queryMetricsPerPartition.runtimeExecutionTimes?.systemFunctionExecutionTime?.totalMilliseconds() || 0;
+        aggregatedQueryMetrics.runtimeExecutionTimes.userDefinedFunctionExecutionTime +=
+          queryMetricsPerPartition.runtimeExecutionTimes?.userDefinedFunctionExecutionTime?.totalMilliseconds() || 0;
+      });
+    }
+
+    return aggregatedQueryMetrics;
+  };
+
+  const generateQueryMetricsCsvData = (): string => {
+    if (queryMetrics.current) {
+      let csvData =
+        [
+          "Partition key range id",
+          "Retrieved document count",
+          "Retrieved document size (in bytes)",
+          "Output document count",
+          "Output document size (in bytes)",
+          "Index hit document count",
+          "Index lookup time (ms)",
+          "Document load time (ms)",
+          "Query engine execution time (ms)",
+          "System function execution time (ms)",
+          "User defined function execution time (ms)",
+          "Document write time (ms)",
+        ].join(",") + "\n";
+
+      Object.keys(queryMetrics.current).forEach((partitionKeyRangeId) => {
+        const queryMetricsPerPartition = queryMetrics.current[partitionKeyRangeId];
+        csvData +=
+          [
+            partitionKeyRangeId,
+            queryMetricsPerPartition.retrievedDocumentCount,
+            queryMetricsPerPartition.retrievedDocumentSize,
+            queryMetricsPerPartition.outputDocumentCount,
+            queryMetricsPerPartition.outputDocumentSize,
+            queryMetricsPerPartition.indexHitDocumentCount,
+            queryMetricsPerPartition.indexLookupTime?.totalMilliseconds(),
+            queryMetricsPerPartition.documentLoadTime?.totalMilliseconds(),
+            queryMetricsPerPartition.runtimeExecutionTimes?.queryEngineExecutionTime?.totalMilliseconds(),
+            queryMetricsPerPartition.runtimeExecutionTimes?.systemFunctionExecutionTime?.totalMilliseconds(),
+            queryMetricsPerPartition.runtimeExecutionTimes?.userDefinedFunctionExecutionTime?.totalMilliseconds(),
+            queryMetricsPerPartition.documentWriteTime?.totalMilliseconds(),
+          ].join(",") + "\n";
+      });
+
+      return csvData;
+    }
+
+    return undefined;
+  };
+
+  const onFetchNextPageClick = async (): Promise<void> => {
+    const { firstItemIndex, itemCount } = queryResults;
+    await executeQueryDocumentsPage(firstItemIndex + itemCount - 1);
+  };
+
+  const generateQueryStatsItems = (): IDocument[] => {
+    const items: IDocument[] = [
+      {
+        metric: "Request Charge",
+        value: `${queryResults.requestCharge} RUs`,
+        toolTip: "Request Charge",
+      },
+      {
+        metric: "Showing Results",
+        value: queryResults.itemCount > 0 ? `${queryResults.firstItemIndex} - ${queryResults.lastItemIndex}` : `0 - 0`,
+        toolTip: "Showing Results",
+      },
+    ];
+
+    if (userContext.apiType === "SQL") {
+      const aggregatedQueryMetrics = getAggregatedQueryMetrics();
+      items.push(
+        {
+          metric: "Retrieved document count",
+          value: aggregatedQueryMetrics.retrievedDocumentCount?.toString() || "",
+          toolTip: "Total number of retrieved documents",
+        },
+        {
+          metric: "Retrieved document size",
+          value: `${aggregatedQueryMetrics.retrievedDocumentSize?.toString() || 0} bytes`,
+          toolTip: "Total size of retrieved documents in bytes",
+        },
+        {
+          metric: "Output document count",
+          value: aggregatedQueryMetrics.outputDocumentCount?.toString() || "",
+          toolTip: "Number of output documents",
+        },
+        {
+          metric: "Output document size",
+          value: `${aggregatedQueryMetrics.outputDocumentSize?.toString() || 0} bytes`,
+          toolTip: "Total size of output documents in bytes",
+        },
+        {
+          metric: "Index hit document count",
+          value: aggregatedQueryMetrics.indexHitDocumentCount?.toString() || "",
+          toolTip: "Total number of documents matched by the filter",
+        },
+        {
+          metric: "Index lookup time",
+          value: `${aggregatedQueryMetrics.indexLookupTime?.toString() || 0} ms`,
+          toolTip: "Time spent in physical index layer",
+        },
+        {
+          metric: "Document load time",
+          value: `${aggregatedQueryMetrics.documentLoadTime?.toString() || 0} ms`,
+          toolTip: "Time spent in loading documents",
+        },
+        {
+          metric: "Query engine execution time",
+          value: `${aggregatedQueryMetrics.runtimeExecutionTimes?.queryEngineExecutionTime?.toString() || 0} ms`,
+          toolTip:
+            "Time spent by the query engine to execute the query expression (excludes other execution times like load documents or write results)",
+        },
+        {
+          metric: "System function execution time",
+          value: `${aggregatedQueryMetrics.runtimeExecutionTimes?.systemFunctionExecutionTime?.toString() || 0} ms`,
+          toolTip: "Total time spent executing system (built-in) functions",
+        },
+        {
+          metric: "User defined function execution time",
+          value: `${
+            aggregatedQueryMetrics.runtimeExecutionTimes?.userDefinedFunctionExecutionTime?.toString() || 0
+          } ms`,
+          toolTip: "Total time spent executing user-defined functions",
+        },
+        {
+          metric: "Document write time",
+          value: `${aggregatedQueryMetrics.documentWriteTime.toString() || 0} ms`,
+          toolTip: "Time spent to write query result set to response buffer",
+        }
+      );
+    }
+
+    if (queryResults.roundTrips) {
+      items.push({
+        metric: "Round Trips",
+        value: queryResults.roundTrips?.toString(),
+        toolTip: "Number of round trips",
+      });
+    }
+
+    if (queryResults.activityId) {
+      items.push({
+        metric: "Activity id",
+        value: queryResults.activityId,
+        toolTip: "",
+      });
+    }
+
+    return items;
+  };
+
+  return (
+    <Stack style={{ height: "100%" }}>
+      {isMongoDB && queryEditorContent.length === 0 && (
+        <div className="mongoQueryHelper">
+          Start by writing a Mongo query, for example: <strong>{"{'id':'foo'}"}</strong> or{" "}
+          <strong>
+            {"{ "}
+            {" }"}
+          </strong>{" "}
+          to get all the documents.
+        </div>
+      )}
+      {maybeSubQuery && (
+        <div className="warningErrorContainer" aria-live="assertive">
+          <div className="warningErrorContent">
+            <span>
+              <img className="paneErrorIcon" src={InfoColor} alt="Error" />
+            </span>
+            <span className="warningErrorDetailsLinkContainer">
+              We have detected you may be using a subquery. Non-correlated subqueries are not currently supported.
+              <a href="https://docs.microsoft.com/en-us/azure/cosmos-db/sql-query-subquery">
+                Please see Cosmos sub query documentation for further information
+              </a>
+            </span>
+          </div>
+        </div>
+      )}
+      {/* <!-- Query Errors Tab - Start--> */}
+      {error && (
+        <div className="active queryErrorsHeaderContainer">
+          <span className="queryErrors" data-toggle="tab">
+            Errors
+          </span>
+        </div>
+      )}
+      {/* <!-- Query Errors Tab - End --> */}
+      {/* <!-- Query Results & Errors Content Container - Start--> */}
+      <div className="queryResultErrorContentContainer">
+        {!queryResults && !error && !isExecuting && (
+          <div className="queryEditorWatermark">
+            <p>
+              <img src={RunQuery} alt="Execute Query Watermark" />
+            </p>
+            <p className="queryEditorWatermarkText">Execute a query to see the results</p>
+          </div>
+        )}
+        {(queryResults || !!error) && (
+          <div className="queryResultsErrorsContent">
+            {!error && (
+              <Pivot aria-label="Successful execution" style={{ height: "100%" }}>
+                <PivotItem
+                  headerText="Results"
+                  headerButtonProps={{
+                    "data-order": 1,
+                    "data-title": "Results",
+                  }}
+                  style={{ height: "100%" }}
+                >
+                  <div className="result-metadata">
+                    <span>
+                      <span>
+                        {queryResults.itemCount > 0
+                          ? `${queryResults.firstItemIndex} - ${queryResults.lastItemIndex}`
+                          : `0 - 0`}
+                      </span>
+                    </span>
+                    {queryResults.hasMoreResults && (
+                      <>
+                        <span className="queryResultDivider">|</span>
+                        <span className="queryResultNextEnable">
+                          <a onClick={() => onFetchNextPageClick()}>
+                            <span>Load more</span>
+                            <img className="queryResultnextImg" src={QueryEditorNext} alt="Fetch next page" />
+                          </a>
+                        </span>
+                      </>
+                    )}
+                  </div>
+                  {queryResults && queryResultsString?.length > 0 && !error && (
+                    <div
+                      style={{
+                        paddingBottom: "100px",
+                        height: "100%",
+                      }}
+                    >
+                      <EditorReact
+                        language={"json"}
+                        content={queryResultsString}
+                        isReadOnly={true}
+                        ariaLabel={"Query results"}
+                      />
+                    </div>
+                  )}
+                </PivotItem>
+                <PivotItem
+                  headerText="Query Stats"
+                  headerButtonProps={{
+                    "data-order": 2,
+                    "data-title": "Query Stats",
+                  }}
+                  style={{ height: "100%", overflowY: "scroll" }}
+                >
+                  {queryResults && !error && (
+                    <div className="queryMetricsSummaryContainer">
+                      <div className="queryMetricsSummary">
+                        <h5>Query Statistics</h5>
+                        <DetailsList
+                          items={generateQueryStatsItems()}
+                          columns={columns}
+                          selectionMode={SelectionMode.none}
+                          layoutMode={DetailsListLayoutMode.justified}
+                          compact={true}
+                        />
+                      </div>
+                      {userContext.apiType === "SQL" && (
+                        <div className="downloadMetricsLinkContainer">
+                          <a
+                            id="downloadMetricsLink"
+                            role="button"
+                            tabIndex={0}
+                            onClick={() => onDownloadQueryMetricsCsvClick()}
+                            onKeyPress={(event: React.KeyboardEvent<HTMLAnchorElement>) =>
+                              onDownloadQueryMetricsCsvKeyPress(event)
+                            }
+                          >
+                            <img
+                              className="downloadCsvImg"
+                              src={DownloadQueryMetrics}
+                              alt="download query metrics csv"
+                            />
+                            <span>Per-partition query metrics (CSV)</span>
+                          </a>
+                        </div>
+                      )}
+                    </div>
+                  )}
+                </PivotItem>
+              </Pivot>
+            )}
+            {/* <!-- Query Errors Content - Start--> */}
+            {!!error && (
+              <div className="tab-pane active">
+                <div className="errorContent">
+                  <span className="errorMessage">{error}</span>
+                  <span className="errorDetailsLink">
+                    <a
+                      onClick={() => onErrorDetailsClick()}
+                      onKeyPress={(event: React.KeyboardEvent<HTMLAnchorElement>) => onErrorDetailsKeyPress(event)}
+                      id="error-display"
+                      tabIndex={0}
+                      aria-label="Error details link"
+                    >
+                      More details
+                    </a>
+                  </span>
+                </div>
+              </div>
+            )}
+            {/* <!-- Query Errors Content - End--> */}
+          </div>
+        )}
+      </div>
+    </Stack>
+  );
+};
--- a/src/Explorer/Tabs/QueryTab/QueryTabComponent.tsx
+++ b/src/Explorer/Tabs/QueryTab/QueryTabComponent.tsx
@@ -1,30 +1,22 @@
-import { DetailsList, DetailsListLayoutMode, IColumn, Pivot, PivotItem, SelectionMode, Text } from "@fluentui/react";
+import { FeedOptions } from "@azure/cosmos";
+import { QueryResultSection } from "Explorer/Tabs/QueryTab/QueryResultSection";
 import React, { Fragment } from "react";
 import SplitterLayout from "react-splitter-layout";
 import "react-splitter-layout/lib/index.css";
-import DownloadQueryMetrics from "../../../../images/DownloadQuery.svg";
 import ExecuteQueryIcon from "../../../../images/ExecuteQuery.svg";
-import InfoColor from "../../../../images/info_color.svg";
-import QueryEditorNext from "../../../../images/Query-Editor-Next.svg";
-import RunQuery from "../../../../images/RunQuery.png";
 import SaveQueryIcon from "../../../../images/save-cosmos.svg";
-import * as Constants from "../../../Common/Constants";
 import { NormalizedEventKey } from "../../../Common/Constants";
-import { queryDocuments } from "../../../Common/dataAccess/queryDocuments";
-import { queryDocumentsPage } from "../../../Common/dataAccess/queryDocumentsPage";
 import { getErrorMessage } from "../../../Common/ErrorHandlingUtils";
 import * as HeadersUtility from "../../../Common/HeadersUtility";
 import { MinimalQueryIterator } from "../../../Common/IteratorUtilities";
 import { queryIterator } from "../../../Common/MongoProxyClient";
-import MongoUtility from "../../../Common/MongoUtility";
-import { Splitter } from "../../../Common/Splitter";
-import { InfoTooltip } from "../../../Common/Tooltip/InfoTooltip";
+import { queryDocuments } from "../../../Common/dataAccess/queryDocuments";
+import { queryDocumentsPage } from "../../../Common/dataAccess/queryDocumentsPage";
 import * as DataModels from "../../../Contracts/DataModels";
 import * as ViewModels from "../../../Contracts/ViewModels";
-import { useNotificationConsole } from "../../../hooks/useNotificationConsole";
-import { useSidePanel } from "../../../hooks/useSidePanel";
 import { userContext } from "../../../UserContext";
 import * as QueryUtils from "../../../Utils/QueryUtils";
+import { useSidePanel } from "../../../hooks/useSidePanel";
 import { CommandButtonComponentProps } from "../../Controls/CommandButton/CommandButtonComponent";
 import { EditorReact } from "../../Controls/Editor/EditorReact";
 import Explorer from "../../Explorer";
@@ -43,7 +35,6 @@ export interface IDocument {
  metric: string;
  value: string;
  toolTip: string;
-  isQueryMetricsEnabled: boolean;
 }

 export interface ITabAccessor {
@@ -74,30 +65,13 @@ export interface IQueryTabComponentProps {
 }

 interface IQueryTabStates {
-  queryMetrics: Map<string, DataModels.QueryMetrics>;
-  aggregatedQueryMetrics: DataModels.QueryMetrics;
-  activityId: string;
-  roundTrips: number;
  toggleState: ToggleState;
-  isQueryMetricsEnabled: boolean;
-  showingDocumentsDisplayText: string;
-  requestChargeDisplayText: string;
-  initialEditorContent: string;
  sqlQueryEditorContent: string;
  selectedContent: string;
-  _executeQueryButtonTitle: string;
-  sqlStatementToExecute: string;
-  queryResults: string;
-  statusMessge: string;
-  statusIcon: string;
-  allResultsMetadata: ViewModels.QueryResultsMetadata[];
+  queryResults: ViewModels.QueryResults;
  error: string;
-  isTemplateReady: boolean;
-  _isSaveQueriesEnabled: boolean;
  isExecutionError: boolean;
  isExecuting: boolean;
-  columns: IColumn[];
-  items: IDocument[];
 }

 export default class QueryTabComponent extends React.Component<IQueryTabComponentProps, IQueryTabStates> {
@@ -105,90 +79,39 @@ export default class QueryTabComponent extends React.Component<IQueryTabComponen
  public executeQueryButton: Button;
  public saveQueryButton: Button;
  public splitterId: string;
-  public splitter: Splitter;
  public isPreferredApiMongoDB: boolean;
-  public resultsDisplay: string;
-  protected monacoSettings: ViewModels.MonacoEditorSettings;
-  protected _iterator: MinimalQueryIterator;
-  private _resourceTokenPartitionKey: string;
-  _partitionKey: DataModels.PartitionKey;
-  public maybeSubQuery: boolean;
  public isCloseClicked: boolean;
-  public allItems: IDocument[];
-  public defaultQueryText: string;
+  private _iterator: MinimalQueryIterator;

  constructor(props: IQueryTabComponentProps) {
    super(props);
-    const columns: IColumn[] = [
-      {
-        key: "column2",
-        name: "METRIC",
-        minWidth: 200,
-        data: String,
-        fieldName: "metric",
-        onRender: this.onRenderColumnItem,
-      },
-      {
-        key: "column3",
-        name: "VALUE",
-        minWidth: 200,
-        data: String,
-        fieldName: "value",
-      },
-    ];
-
-    if (this.props.isPreferredApiMongoDB) {
-      this.defaultQueryText = props.queryText;
-    } else {
-      this.defaultQueryText = props.queryText !== void 0 ? props.queryText : "SELECT * FROM c";
-    }

    this.state = {
-      queryMetrics: new Map(),
-      aggregatedQueryMetrics: undefined,
-      activityId: "",
-      roundTrips: undefined,
      toggleState: ToggleState.Result,
-      isQueryMetricsEnabled: userContext.apiType === "SQL" || false,
-      showingDocumentsDisplayText: this.resultsDisplay,
-      requestChargeDisplayText: "",
-      initialEditorContent: this.defaultQueryText,
-      sqlQueryEditorContent: this.defaultQueryText,
+      sqlQueryEditorContent: props.queryText || "SELECT * FROM c",
      selectedContent: "",
-      _executeQueryButtonTitle: "Execute Query",
-      sqlStatementToExecute: this.defaultQueryText,
-      queryResults: "",
-      statusMessge: "",
-      statusIcon: "",
-      allResultsMetadata: [],
+      queryResults: undefined,
      error: "",
-      isTemplateReady: false,
-      _isSaveQueriesEnabled: userContext.apiType === "SQL" || userContext.apiType === "Gremlin",
      isExecutionError: this.props.isExecutionError,
      isExecuting: false,
-      columns: columns,
-      items: [],
    };
    this.isCloseClicked = false;
    this.splitterId = this.props.tabId + "_splitter";
    this.queryEditorId = `queryeditor${this.props.tabId}`;
-    this._partitionKey = props.partitionKey;
    this.isPreferredApiMongoDB = this.props.isPreferredApiMongoDB;
-    this.monacoSettings = new ViewModels.MonacoEditorSettings(this.props.monacoEditorSetting, false);

    this.executeQueryButton = {
      enabled: !!this.state.sqlQueryEditorContent && this.state.sqlQueryEditorContent.length > 0,
      visible: true,
    };
-    const sql = this.state.sqlQueryEditorContent;
-    this.maybeSubQuery = sql && /.*\(.*SELECT.*\)/i.test(sql);

+    const isSaveQueryBtnEnabled = userContext.apiType === "SQL" || userContext.apiType === "Gremlin";
    this.saveQueryButton = {
-      enabled: this.state._isSaveQueriesEnabled,
-      visible: this.state._isSaveQueriesEnabled,
+      enabled: isSaveQueryBtnEnabled,
+      visible: isSaveQueryBtnEnabled,
    };

-    this._buildCommandBarOptions();
+    this.props.tabsBaseInstance.updateNavbarWithTabsButtons();
    props.onTabAccessor({
      onTabClickEvent: this.onTabClick.bind(this),
      onSaveClickEvent: this.getCurrentEditorQuery.bind(this),
@@ -196,165 +119,6 @@ export default class QueryTabComponent extends React.Component<IQueryTabComponen
    });
  }

-  public onRenderColumnItem(item: IDocument): JSX.Element {
-    if (item.toolTip !== "") {
-      return (
-        <>
-          <InfoTooltip>{`${item.toolTip}`}</InfoTooltip>
-          <Text style={{ paddingLeft: 10, margin: 0 }}>{`${item.metric}`}</Text>
-        </>
-      );
-    } else {
-      return undefined;
-    }
-  }
-
-  public generateDetailsList(): IDocument[] {
-    const items: IDocument[] = [];
-    const allItems: IDocument[] = [
-      {
-        metric: "Request Charge",
-        value: this.state.requestChargeDisplayText,
-        toolTip: "Request Charge",
-        isQueryMetricsEnabled: true,
-      },
-      {
-        metric: "Showing Results",
-        value: this.state.showingDocumentsDisplayText,
-        toolTip: "Showing Results",
-        isQueryMetricsEnabled: true,
-      },
-      {
-        metric: "Retrieved document count",
-        value:
-          this.state.aggregatedQueryMetrics.retrievedDocumentCount !== undefined
-            ? this.state.aggregatedQueryMetrics.retrievedDocumentCount.toString()
-            : "",
-        toolTip: "Total number of retrieved documents",
-        isQueryMetricsEnabled: this.state.isQueryMetricsEnabled,
-      },
-      {
-        metric: "Retrieved document size",
-        value:
-          this.state.aggregatedQueryMetrics.retrievedDocumentSize !== undefined
-            ? this.state.aggregatedQueryMetrics.retrievedDocumentSize.toString() + " bytes"
-            : "",
-        toolTip: "Total size of retrieved documents in bytes",
-        isQueryMetricsEnabled: this.state.isQueryMetricsEnabled,
-      },
-      {
-        metric: "Output document count",
-        value:
-          this.state.aggregatedQueryMetrics.outputDocumentCount !== undefined
-            ? this.state.aggregatedQueryMetrics.outputDocumentCount.toString()
-            : "",
-        toolTip: "Number of output documents",
-        isQueryMetricsEnabled: this.state.isQueryMetricsEnabled,
-      },
-      {
-        metric: "Output document size",
-        value:
-          this.state.aggregatedQueryMetrics.outputDocumentSize !== undefined
-            ? this.state.aggregatedQueryMetrics.outputDocumentSize.toString() + " bytes"
-            : "",
-        toolTip: "Total size of output documents in bytes",
-        isQueryMetricsEnabled: this.state.isQueryMetricsEnabled,
-      },
-      {
-        metric: "Index hit document count",
-        value:
-          this.state.aggregatedQueryMetrics.indexHitDocumentCount !== undefined
-            ? this.state.aggregatedQueryMetrics.indexHitDocumentCount.toString()
-            : "",
-        toolTip: "Total number of documents matched by the filter",
-        isQueryMetricsEnabled: this.state.isQueryMetricsEnabled,
-      },
-      {
-        metric: "Index lookup time",
-        value:
-          this.state.aggregatedQueryMetrics.indexLookupTime !== undefined
-            ? this.state.aggregatedQueryMetrics.indexLookupTime.toString() + " ms"
-            : "",
-        toolTip: "Time spent in physical index layer",
-        isQueryMetricsEnabled: this.state.isQueryMetricsEnabled,
-      },
-      {
-        metric: "Document load time",
-        value:
-          this.state.aggregatedQueryMetrics.documentLoadTime !== undefined
-            ? this.state.aggregatedQueryMetrics.documentLoadTime.toString() + " ms"
-            : "",
-        toolTip: "Time spent in loading documents",
-        isQueryMetricsEnabled: this.state.isQueryMetricsEnabled,
-      },
-      {
-        metric: "Query engine execution time",
-        value:
-          this.state.aggregatedQueryMetrics.runtimeExecutionTimes.queryEngineExecutionTime !== undefined
-            ? this.state.aggregatedQueryMetrics.runtimeExecutionTimes.queryEngineExecutionTime.toString() + " ms"
-            : "",
-        toolTip:
-          "Time spent by the query engine to execute the query expression (excludes other execution times like load documents or write results)",
-        isQueryMetricsEnabled: this.state.isQueryMetricsEnabled,
-      },
-      {
-        metric: "System function execution time",
-        value:
-          this.state.aggregatedQueryMetrics.runtimeExecutionTimes.systemFunctionExecutionTime !== undefined
-            ? this.state.aggregatedQueryMetrics.runtimeExecutionTimes.systemFunctionExecutionTime.toString() + " ms"
-            : "",
-        toolTip: "Total time spent executing system (built-in) functions",
-        isQueryMetricsEnabled: this.state.isQueryMetricsEnabled,
-      },
-      {
-        metric: "User defined function execution time",
-        value:
-          this.state.aggregatedQueryMetrics.runtimeExecutionTimes.userDefinedFunctionExecutionTime !== undefined
-            ? this.state.aggregatedQueryMetrics.runtimeExecutionTimes.userDefinedFunctionExecutionTime.toString() +
-              " ms"
-            : "",
-        toolTip: "Total time spent executing user-defined functions",
-        isQueryMetricsEnabled: this.state.isQueryMetricsEnabled,
-      },
-      {
-        metric: "Document write time",
-        value:
-          this.state.aggregatedQueryMetrics.documentWriteTime !== undefined
-            ? this.state.aggregatedQueryMetrics.documentWriteTime.toString() + " ms"
-            : "",
-        toolTip: "Time spent to write query result set to response buffer",
-        isQueryMetricsEnabled: this.state.isQueryMetricsEnabled,
-      },
-      {
-        metric: "Round Trips",
-        value: this.state.roundTrips ? this.state.roundTrips.toString() : "",
-        toolTip: "",
-        isQueryMetricsEnabled: true,
-      },
-      {
-        metric: "Activity id",
-        value: this.state.activityId ? this.state.activityId : "",
-        toolTip: "",
-        isQueryMetricsEnabled: true,
-      },
-    ];
-
-    allItems.forEach((item) => {
-      if (item.metric === "Round Trips" || item.metric === "Activity id") {
-        if (item.metric === "Round Trips" && this.state.roundTrips !== undefined) {
-          items.push(item);
-        } else if (item.metric === "Activity id" && this.state.activityId !== undefined) {
-          items.push(item);
-        }
-      } else {
-        if (item.isQueryMetricsEnabled) {
-          items.push(item);
-        }
-      }
-    });
-    return items;
-  }
-
  public onCloseClick(isClicked: boolean): void {
    this.isCloseClicked = isClicked;
  }
@@ -372,14 +136,6 @@ export default class QueryTabComponent extends React.Component<IQueryTabComponen
  }

  public onExecuteQueryClick = async (): Promise<void> => {
-    const sqlStatement = this.state.selectedContent || this.state.sqlQueryEditorContent;
-
-    this.setState({
-      sqlStatementToExecute: sqlStatement,
-      allResultsMetadata: [],
-      queryResults: "",
-    });
-
    this._iterator = undefined;
    setTimeout(async () => {
      await this._executeQueryDocumentsPage(0);
@@ -396,31 +152,6 @@ export default class QueryTabComponent extends React.Component<IQueryTabComponen
      .openSidePanel("Open Saved Queries", <BrowseQueriesPane explorer={this.props.collection.container} />);
  };

-  public async onFetchNextPageClick(): Promise<void> {
-    const allResultsMetadata = (this.state.allResultsMetadata && this.state.allResultsMetadata) || [];
-    const metadata: ViewModels.QueryResultsMetadata = allResultsMetadata[allResultsMetadata.length - 1];
-    const firstResultIndex: number = (metadata && Number(metadata.firstItemIndex)) || 1;
-    const itemCount: number = (metadata && Number(metadata.itemCount)) || 0;
-
-    await this._executeQueryDocumentsPage(firstResultIndex + itemCount - 1);
-  }
-
-  //eslint-disable-next-line
-  public onErrorDetailsClick = (): boolean => {
-    useNotificationConsole.getState().expandConsole();
-
-    return false;
-  };
-
-  public onErrorDetailsKeyPress = (event: React.KeyboardEvent<HTMLAnchorElement>): boolean => {
-    if (event.key === NormalizedEventKey.Space || event.key === NormalizedEventKey.Enter) {
-      this.onErrorDetailsClick();
-      return false;
-    }
-
-    return true;
-  };
-
  public toggleResult(): void {
    this.setState({
      toggleState: ToggleState.Result,
@@ -452,54 +183,30 @@ export default class QueryTabComponent extends React.Component<IQueryTabComponen
    focusElement && focusElement.focus();
  }

-  public isResultToggled(): boolean {
-    return this.state.toggleState === ToggleState.Result;
-  }
-
-  public isMetricsToggled(): boolean {
-    return this.state.toggleState === ToggleState.QueryMetrics;
-  }
-
-  public onDownloadQueryMetricsCsvClick = (): boolean => {
-    this._downloadQueryMetricsCsvData();
-    return false;
-  };
-
-  public onDownloadQueryMetricsCsvKeyPress = (event: React.KeyboardEvent<HTMLAnchorElement>): boolean => {
-    if (event.key === NormalizedEventKey.Space || NormalizedEventKey.Enter) {
-      this._downloadQueryMetricsCsvData();
-      return false;
-    }
-
-    return true;
-  };
-
-  //eslint-disable-next-line
-  private async _executeQueryDocumentsPage(firstItemIndex: number): Promise<any> {
-    this.setState({
-      error: "",
-      roundTrips: undefined,
-    });
-
+  private async _executeQueryDocumentsPage(firstItemIndex: number): Promise<void> {
    if (this._iterator === undefined) {
-      if (this.isPreferredApiMongoDB) {
-        this._initIteratorMongo();
-      } else {
-        this._initIterator();
-      }
+      this._iterator = this.props.isPreferredApiMongoDB
+        ? queryIterator(
+            this.props.collection.databaseId,
+            this.props.viewModelcollection,
+            this.state.selectedContent || this.state.sqlQueryEditorContent
+          )
+        : queryDocuments(
+            this.props.collection.databaseId,
+            this.props.collection.id(),
+            this.state.selectedContent || this.state.sqlQueryEditorContent,
+            { enableCrossPartitionQuery: HeadersUtility.shouldEnableCrossPartitionKey() } as FeedOptions
+          );
    }

    await this._queryDocumentsPage(firstItemIndex);
  }

  private async _queryDocumentsPage(firstItemIndex: number): Promise<void> {
-    let results: string;
-
    this.props.tabsBaseInstance.isExecutionError(false);
    this.setState({
      isExecutionError: false,
    });
-    this._resetAggregateQueryMetrics();

    const queryDocuments = async (firstItemIndex: number) =>
      await queryDocumentsPage(this.props.collection && this.props.collection.id(), this._iterator, firstItemIndex);
@@ -513,44 +220,7 @@ export default class QueryTabComponent extends React.Component<IQueryTabComponen
        firstItemIndex,
        queryDocuments
      );
-      const allResultsMetadata = (this.state.allResultsMetadata && this.state.allResultsMetadata) || [];
-      const metadata: ViewModels.QueryResultsMetadata = allResultsMetadata[allResultsMetadata.length - 1];
-      const resultsMetadata: ViewModels.QueryResultsMetadata = {
-        hasMoreResults: queryResults.hasMoreResults,
-        itemCount: queryResults.itemCount,
-        firstItemIndex: queryResults.firstItemIndex,
-        lastItemIndex: queryResults.lastItemIndex,
-      };
-      this.state.allResultsMetadata.push(resultsMetadata);
-
-      this.setState({
-        activityId: queryResults.activityId,
-        roundTrips: queryResults.roundTrips,
-      });
-
-      const documents = queryResults.documents;
-      if (this.isPreferredApiMongoDB) {
-        results = MongoUtility.tojson(documents, undefined, false);
-      } else {
-        results = this.props.tabsBaseInstance.renderObjectForEditor(documents, undefined, 4);
-      }
-
-      const resultsDisplay: string =
-        queryResults.itemCount > 0 ? `${queryResults.firstItemIndex} - ${queryResults.lastItemIndex}` : `0 - 0`;
-
-      this.setState({
-        showingDocumentsDisplayText: resultsDisplay,
-        requestChargeDisplayText: `${queryResults.requestCharge} RUs`,
-        queryResults: results,
-      });
-
-      this._updateQueryMetricsMap(queryResults.headers[Constants.HttpHeaders.queryMetrics]);
-
-      if (queryResults.itemCount === 0 && metadata !== undefined && metadata.itemCount >= 0) {
-        // we let users query for the next page because the SDK sometimes specifies there are more elements
-        // even though there aren't any so we should not update the prior query results.
-        return;
-      }
+      this.setState({ queryResults });
    } catch (error) {
      this.props.tabsBaseInstance.isExecutionError(true);
      this.setState({
@@ -571,228 +241,10 @@ export default class QueryTabComponent extends React.Component<IQueryTabComponen
    }
  }

-  private _updateQueryMetricsMap(metricsMap: { [partitionKeyRange: string]: DataModels.QueryMetrics }): void {
-    if (!metricsMap) {
-      this.allItems = this.generateDetailsList();
-      this.setState({
-        items: this.allItems,
-      });
-      return;
-    }
-
-    Object.keys(metricsMap).forEach((key: string) => {
-      this.state.queryMetrics.set(key, metricsMap[key]);
-    });
-
-    this._aggregateQueryMetrics(this.state.queryMetrics);
-    this.allItems = this.generateDetailsList();
-    this.setState({
-      items: this.allItems,
-    });
-  }
-
-  private _aggregateQueryMetrics(metricsMap: Map<string, DataModels.QueryMetrics>): DataModels.QueryMetrics {
-    if (!metricsMap) {
-      return undefined;
-    }
-
-    const aggregatedMetrics: DataModels.QueryMetrics = this.state.aggregatedQueryMetrics;
-    metricsMap.forEach((queryMetrics) => {
-      if (queryMetrics) {
-        aggregatedMetrics.documentLoadTime =
-          this._normalize(queryMetrics.documentLoadTime.totalMilliseconds()) +
-          this._normalize(aggregatedMetrics.documentLoadTime);
-        aggregatedMetrics.documentWriteTime =
-          this._normalize(queryMetrics.documentWriteTime.totalMilliseconds()) +
-          this._normalize(aggregatedMetrics.documentWriteTime);
-        aggregatedMetrics.indexHitDocumentCount =
-          this._normalize(queryMetrics.indexHitDocumentCount) +
-          this._normalize(aggregatedMetrics.indexHitDocumentCount);
-        aggregatedMetrics.outputDocumentCount =
-          this._normalize(queryMetrics.outputDocumentCount) + this._normalize(aggregatedMetrics.outputDocumentCount);
-        aggregatedMetrics.outputDocumentSize =
-          this._normalize(queryMetrics.outputDocumentSize) + this._normalize(aggregatedMetrics.outputDocumentSize);
-        aggregatedMetrics.indexLookupTime =
-          this._normalize(queryMetrics.indexLookupTime.totalMilliseconds()) +
-          this._normalize(aggregatedMetrics.indexLookupTime);
-        aggregatedMetrics.retrievedDocumentCount =
-          this._normalize(queryMetrics.retrievedDocumentCount) +
-          this._normalize(aggregatedMetrics.retrievedDocumentCount);
-        aggregatedMetrics.retrievedDocumentSize =
-          this._normalize(queryMetrics.retrievedDocumentSize) +
-          this._normalize(aggregatedMetrics.retrievedDocumentSize);
-        aggregatedMetrics.vmExecutionTime =
-          this._normalize(queryMetrics.vmExecutionTime.totalMilliseconds()) +
-          this._normalize(aggregatedMetrics.vmExecutionTime);
-        aggregatedMetrics.totalQueryExecutionTime =
-          this._normalize(queryMetrics.totalQueryExecutionTime.totalMilliseconds()) +
-          this._normalize(aggregatedMetrics.totalQueryExecutionTime);
-
-        aggregatedMetrics.runtimeExecutionTimes.queryEngineExecutionTime =
-          this._normalize(queryMetrics.runtimeExecutionTimes.queryEngineExecutionTime.totalMilliseconds()) +
-          this._normalize(aggregatedMetrics.runtimeExecutionTimes.queryEngineExecutionTime);
-        aggregatedMetrics.runtimeExecutionTimes.systemFunctionExecutionTime =
-          this._normalize(queryMetrics.runtimeExecutionTimes.systemFunctionExecutionTime.totalMilliseconds()) +
-          this._normalize(aggregatedMetrics.runtimeExecutionTimes.systemFunctionExecutionTime);
-        aggregatedMetrics.runtimeExecutionTimes.userDefinedFunctionExecutionTime =
-          this._normalize(queryMetrics.runtimeExecutionTimes.userDefinedFunctionExecutionTime.totalMilliseconds()) +
-          this._normalize(aggregatedMetrics.runtimeExecutionTimes.userDefinedFunctionExecutionTime);
-      }
-    });
-
-    return aggregatedMetrics;
-  }
-
-  public _downloadQueryMetricsCsvData(): void {
-    const csvData: string = this._generateQueryMetricsCsvData();
-    if (!csvData) {
-      return;
-    }
-
-    if (navigator.msSaveBlob) {
-      // for IE and Edge
-      navigator.msSaveBlob(
-        new Blob([csvData], { type: "data:text/csv;charset=utf-8" }),
-        "PerPartitionQueryMetrics.csv"
-      );
-    } else {
-      const downloadLink: HTMLAnchorElement = document.createElement("a");
-      downloadLink.href = "data:text/csv;charset=utf-8," + encodeURI(csvData);
-      downloadLink.target = "_self";
-      downloadLink.download = "QueryMetricsPerPartition.csv";
-
-      // for some reason, FF displays the download prompt only when
-      // the link is added to the dom so we add and remove it
-      document.body.appendChild(downloadLink);
-      downloadLink.click();
-      downloadLink.remove();
-    }
-  }
-
-  protected _initIterator(): void {
-    const options = QueryTabComponent.getIteratorOptions();
-    if (this._resourceTokenPartitionKey) {
-      options.partitionKey = this._resourceTokenPartitionKey;
-    }
-
-    this._iterator = queryDocuments(
-      this.props.collection.databaseId,
-      this.props.collection.id(),
-      this.state.sqlStatementToExecute,
-      options
-    );
-  }
-
-  protected _initIteratorMongo(): Promise<MinimalQueryIterator> {
-    //eslint-disable-next-line
-    const options: any = {};
-    options.enableCrossPartitionQuery = HeadersUtility.shouldEnableCrossPartitionKey();
-    this._iterator = queryIterator(
-      this.props.collection.databaseId,
-      this.props.viewModelcollection,
-      this.state.sqlStatementToExecute
-    );
-    const mongoPromise: Promise<MinimalQueryIterator> = new Promise((resolve) => {
-      resolve(this._iterator);
-    });
-    return mongoPromise;
-  }
-
-  //eslint-disable-next-line
-  public static getIteratorOptions(collection?: ViewModels.Collection): any {
-    //eslint-disable-next-line
-    const options: any = {};
-    options.enableCrossPartitionQuery = HeadersUtility.shouldEnableCrossPartitionKey();
-    return options;
-  }
-
-  private _normalize(value: number): number {
-    if (!value) {
-      return 0;
-    }
-
-    return value;
-  }
-
-  private _resetAggregateQueryMetrics(): void {
-    this.setState({
-      aggregatedQueryMetrics: {
-        clientSideMetrics: {},
-        documentLoadTime: undefined,
-        documentWriteTime: undefined,
-        indexHitDocumentCount: undefined,
-        outputDocumentCount: undefined,
-        outputDocumentSize: undefined,
-        indexLookupTime: undefined,
-        retrievedDocumentCount: undefined,
-        retrievedDocumentSize: undefined,
-        vmExecutionTime: undefined,
-        queryPreparationTimes: undefined,
-        runtimeExecutionTimes: {
-          queryEngineExecutionTime: undefined,
-          systemFunctionExecutionTime: undefined,
-          userDefinedFunctionExecutionTime: undefined,
-        },
-        totalQueryExecutionTime: undefined,
-      },
-    });
-  }
-
-  private _generateQueryMetricsCsvData(): string {
-    if (!this.state.queryMetrics) {
-      return undefined;
-    }
-
-    const queryMetrics = this.state.queryMetrics;
-    let csvData = "";
-    const columnHeaders: string =
-      [
-        "Partition key range id",
-        "Retrieved document count",
-        "Retrieved document size (in bytes)",
-        "Output document count",
-        "Output document size (in bytes)",
-        "Index hit document count",
-        "Index lookup time (ms)",
-        "Document load time (ms)",
-        "Query engine execution time (ms)",
-        "System function execution time (ms)",
-        "User defined function execution time (ms)",
-        "Document write time (ms)",
-      ].join(",") + "\n";
-    csvData = csvData + columnHeaders;
-    queryMetrics.forEach((queryMetric, partitionKeyRangeId) => {
-      const partitionKeyRangeData: string =
-        [
-          partitionKeyRangeId,
-          queryMetric.retrievedDocumentCount,
-          queryMetric.retrievedDocumentSize,
-          queryMetric.outputDocumentCount,
-          queryMetric.outputDocumentSize,
-          queryMetric.indexHitDocumentCount,
-          queryMetric.indexLookupTime && queryMetric.indexLookupTime.totalMilliseconds(),
-          queryMetric.documentLoadTime && queryMetric.documentLoadTime.totalMilliseconds(),
-          queryMetric.runtimeExecutionTimes &&
-            queryMetric.runtimeExecutionTimes.queryEngineExecutionTime &&
-            queryMetric.runtimeExecutionTimes.queryEngineExecutionTime.totalMilliseconds(),
-          queryMetric.runtimeExecutionTimes &&
-            queryMetric.runtimeExecutionTimes.systemFunctionExecutionTime &&
-            queryMetric.runtimeExecutionTimes.systemFunctionExecutionTime.totalMilliseconds(),
-          queryMetric.runtimeExecutionTimes &&
-            queryMetric.runtimeExecutionTimes.userDefinedFunctionExecutionTime &&
-            queryMetric.runtimeExecutionTimes.userDefinedFunctionExecutionTime.totalMilliseconds(),
-          queryMetric.documentWriteTime && queryMetric.documentWriteTime.totalMilliseconds(),
-        ].join(",") + "\n";
-      csvData = csvData + partitionKeyRangeData;
-    });
-
-    return csvData;
-  }
-
  protected getTabsButtons(): CommandButtonComponentProps[] {
    const buttons: CommandButtonComponentProps[] = [];
    if (this.executeQueryButton.visible) {
-      const label = this.state._executeQueryButtonTitle;
+      const label = this.state.selectedContent?.length > 0 ? "Execute Selection" : "Execute Query";
      buttons.push({
        iconSrc: ExecuteQueryIcon,
        iconAlt: label,
@@ -820,10 +272,6 @@ export default class QueryTabComponent extends React.Component<IQueryTabComponen
    return buttons;
  }

-  private _buildCommandBarOptions(): void {
-    this.props.tabsBaseInstance.updateNavbarWithTabsButtons();
-  }
-
  public onChangeContent(newContent: string): void {
    this.setState({
      sqlQueryEditorContent: newContent,
@@ -848,13 +296,11 @@ export default class QueryTabComponent extends React.Component<IQueryTabComponen
  public onSelectedContent(selectedContent: string): void {
    if (selectedContent.trim().length > 0) {
      this.setState({
-        selectedContent: selectedContent,
-        _executeQueryButtonTitle: "Execute Selection",
+        selectedContent,
      });
    } else {
      this.setState({
        selectedContent: "",
-        _executeQueryButtonTitle: "Execute Query",
      });
    }
    useCommandBar.getState().setContextButtons(this.getTabsButtons());
@@ -874,7 +320,7 @@ export default class QueryTabComponent extends React.Component<IQueryTabComponen
                <div className="queryEditor" style={{ height: "100%" }}>
                  <EditorReact
                    language={"sql"}
-                    content={this.state.initialEditorContent}
+                    content={this.state.sqlQueryEditorContent}
                    isReadOnly={false}
                    ariaLabel={"Editing Query"}
                    lineNumbers={"on"}
@@ -883,174 +329,14 @@ export default class QueryTabComponent extends React.Component<IQueryTabComponen
                  />
                </div>
              </Fragment>
-              <Fragment>
-                {this.isPreferredApiMongoDB && this.state.sqlQueryEditorContent.length === 0 && (
-                  <div className="mongoQueryHelper">
-                    Start by writing a Mongo query, for example: <strong>{"{'id':'foo'}"}</strong> or{" "}
-                    <strong>
-                      {"{ "}
-                      {" }"}
-                    </strong>{" "}
-                    to get all the documents.
-                  </div>
-                )}
-                {this.maybeSubQuery && (
-                  <div className="warningErrorContainer" aria-live="assertive">
-                    <div className="warningErrorContent">
-                      <span>
-                        <img className="paneErrorIcon" src={InfoColor} alt="Error" />
-                      </span>
-                      <span className="warningErrorDetailsLinkContainer">
-                        We have detected you may be using a subquery. Non-correlated subqueries are not currently
-                        supported.
-                        <a href="https://docs.microsoft.com/en-us/azure/cosmos-db/sql-query-subquery">
-                          Please see Cosmos sub query documentation for further information
-                        </a>
-                      </span>
-                    </div>
-                  </div>
-                )}
-                {/* <!-- Query Errors Tab - Start--> */}
-                {!!this.state.error && (
-                  <div className="active queryErrorsHeaderContainer">
-                    <span className="queryErrors" data-toggle="tab">
-                      Errors
-                    </span>
-                  </div>
-                )}
-                {/* <!-- Query Errors Tab - End --> */}
-                {/* <!-- Query Results & Errors Content Container - Start--> */}
-                <div className="queryResultErrorContentContainer">
-                  {this.state.allResultsMetadata.length === 0 &&
-                    !this.state.error &&
-                    !this.state.queryResults &&
-                    !this.props.tabsBaseInstance.isExecuting() && (
-                      <div className="queryEditorWatermark">
-                        <p>
-                          <img src={RunQuery} alt="Execute Query Watermark" />
-                        </p>
-                        <p className="queryEditorWatermarkText">Execute a query to see the results</p>
-                      </div>
-                    )}
-                  {(this.state.allResultsMetadata.length > 0 || !!this.state.error || this.state.queryResults) && (
-                    <div className="queryResultsErrorsContent">
-                      {!this.state.error && (
-                        <Pivot aria-label="Successful execution" style={{ height: "100%" }}>
-                          <PivotItem
-                            headerText="Results"
-                            headerButtonProps={{
-                              "data-order": 1,
-                              "data-title": "Results",
-                            }}
-                            style={{ height: "100%" }}
-                          >
-                            <div className="result-metadata">
-                              <span>
-                                <span>{this.state.showingDocumentsDisplayText}</span>
-                              </span>
-                              {this.state.allResultsMetadata[this.state.allResultsMetadata.length - 1]
-                                .hasMoreResults && (
-                                <>
-                                  <span className="queryResultDivider">|</span>
-                                  <span className="queryResultNextEnable">
-                                    <a onClick={this.onFetchNextPageClick.bind(this)}>
-                                      <span>Load more</span>
-                                      <img className="queryResultnextImg" src={QueryEditorNext} alt="Fetch next page" />
-                                    </a>
-                                  </span>
-                                </>
-                              )}
-                            </div>
-                            {this.state.queryResults &&
-                              this.state.queryResults.length > 0 &&
-                              this.state.allResultsMetadata.length > 0 &&
-                              !this.state.error && (
-                                <div
-                                  style={{
-                                    paddingBottom: "100px",
-                                    height: "100%",
-                                  }}
-                                >
-                                  <EditorReact
-                                    language={"json"}
-                                    content={this.state.queryResults}
-                                    isReadOnly={true}
-                                    ariaLabel={"Query results"}
+              <QueryResultSection
+                isMongoDB={this.props.isPreferredApiMongoDB}
+                queryEditorContent={this.state.sqlQueryEditorContent}
+                error={this.state.error}
+                queryResults={this.state.queryResults}
+                isExecuting={this.state.isExecuting}
+                executeQueryDocumentsPage={(firstItemIndex: number) => this._executeQueryDocumentsPage(firstItemIndex)}
              />
-                                </div>
-                              )}
-                          </PivotItem>
-                          <PivotItem
-                            headerText="Query Stats"
-                            headerButtonProps={{
-                              "data-order": 2,
-                              "data-title": "Query Stats",
-                            }}
-                            style={{ height: "100%", overflowY: "scroll" }}
-                          >
-                            {this.state.allResultsMetadata.length > 0 && !this.state.error && (
-                              <div className="queryMetricsSummaryContainer">
-                                <div className="queryMetricsSummary">
-                                  <h5>Query Statistics</h5>
-                                  <DetailsList
-                                    items={this.state.items}
-                                    columns={this.state.columns}
-                                    selectionMode={SelectionMode.none}
-                                    layoutMode={DetailsListLayoutMode.justified}
-                                    compact={true}
-                                  />
-                                </div>
-                                {this.state.isQueryMetricsEnabled && (
-                                  <div className="downloadMetricsLinkContainer">
-                                    <a
-                                      id="downloadMetricsLink"
-                                      role="button"
-                                      tabIndex={0}
-                                      onClick={() => this.onDownloadQueryMetricsCsvClick()}
-                                      onKeyPress={(event: React.KeyboardEvent<HTMLAnchorElement>) =>
-                                        this.onDownloadQueryMetricsCsvKeyPress(event)
-                                      }
-                                    >
-                                      <img
-                                        className="downloadCsvImg"
-                                        src={DownloadQueryMetrics}
-                                        alt="download query metrics csv"
-                                      />
-                                      <span>Per-partition query metrics (CSV)</span>
-                                    </a>
-                                  </div>
-                                )}
-                              </div>
-                            )}
-                          </PivotItem>
-                        </Pivot>
-                      )}
-                      {/* <!-- Query Errors Content - Start--> */}
-                      {!!this.state.error && (
-                        <div className="tab-pane active">
-                          <div className="errorContent">
-                            <span className="errorMessage">{this.state.error}</span>
-                            <span className="errorDetailsLink">
-                              <a
-                                onClick={() => this.onErrorDetailsClick()}
-                                onKeyPress={(event: React.KeyboardEvent<HTMLAnchorElement>) =>
-                                  this.onErrorDetailsKeyPress(event)
-                                }
-                                id="error-display"
-                                tabIndex={0}
-                                aria-label="Error details link"
-                              >
-                                More details
-                              </a>
-                            </span>
-                          </div>
-                        </div>
-                      )}
-                      {/* <!-- Query Errors Content - End--> */}
-                    </div>
-                  )}
-                </div>
-              </Fragment>
            </SplitterLayout>
          </div>
        </div>
--- a/src/Explorer/Tabs/QueryTablesTab.html
+++ b/src/Explorer/Tabs/QueryTablesTab.html
@@ -134,6 +134,7 @@
            data-bind="click: selectQueryOptions, event: { keydown: onselectQueryOptionsKeyDown }"
            tabindex="0"
            role="button"
+            href=""
          >
            <span>Choose Columns... </span>
          </a>
--- a/src/Explorer/Tabs/Tabs.tsx
+++ b/src/Explorer/Tabs/Tabs.tsx
@@ -3,14 +3,15 @@ import { sendMessage } from "Common/MessageHandler";
 import { MessageTypes } from "Contracts/ExplorerContracts";
 import { CollectionTabKind } from "Contracts/ViewModels";
 import Explorer from "Explorer/Explorer";
+import { QueryCopilotTab } from "Explorer/QueryCopilot/QueryCopilotTab";
 import { SplashScreen } from "Explorer/SplashScreen/SplashScreen";
 import { ConnectTab } from "Explorer/Tabs/ConnectTab";
 import { PostgresConnectTab } from "Explorer/Tabs/PostgresConnectTab";
 import { QuickstartTab } from "Explorer/Tabs/QuickstartTab";
+import { userContext } from "UserContext";
 import { useTeachingBubble } from "hooks/useTeachingBubble";
 import ko from "knockout";
 import React, { MutableRefObject, useEffect, useRef, useState } from "react";
-import { userContext } from "UserContext";
 import loadingIcon from "../../../images/circular_loader_black_16x16.gif";
 import errorIcon from "../../../images/close-black.svg";
 import { useObservable } from "../../hooks/useObservable";
@@ -68,6 +69,13 @@ function TabNav({ tab, active, tabKind }: { tab?: Tab; active: boolean; tabKind?
  const focusTab = useRef<HTMLLIElement>() as MutableRefObject<HTMLLIElement>;
  const tabId = tab ? tab.tabId : "connect";

+  const getReactTabTitle = (): ko.Observable<string> => {
+    if (tabKind === ReactTabKind.QueryCopilot) {
+      return ko.observable("Query");
+    }
+    return ko.observable(ReactTabKind[tabKind]);
+  };
+
  useEffect(() => {
    if (active && focusTab.current) {
      focusTab.current.focus();
@@ -92,6 +100,7 @@ function TabNav({ tab, active, tabKind }: { tab?: Tab; active: boolean; tabKind?
        }
      }}
      className={active ? "active tabList" : "tabList"}
+      style={active ? { fontWeight: "bolder" } : {}}
      title={useObservable(tab?.tabPath || ko.observable(""))}
      aria-selected={active}
      aria-expanded={active}
@@ -101,7 +110,6 @@ function TabNav({ tab, active, tabKind }: { tab?: Tab; active: boolean; tabKind?
      ref={focusTab}
    >
      <span className="tabNavContentContainer">
-        <a data-toggle="tab" href={"#" + tabId} tabIndex={-1}>
        <div className="tab_Content">
          <span className="statusIconContainer" style={{ width: tabKind === ReactTabKind.Home ? 0 : 18 }}>
            {useObservable(tab?.isExecutionError || ko.observable(false)) && <ErrorIcon tab={tab} active={active} />}
@@ -109,14 +117,13 @@ function TabNav({ tab, active, tabKind }: { tab?: Tab; active: boolean; tabKind?
              <img className="loadingIcon" title="Loading" src={loadingIcon} alt="Loading" />
            )}
          </span>
-            <span className="tabNavText">{useObservable(tab?.tabTitle || ko.observable(ReactTabKind[tabKind]))}</span>
+          <span className="tabNavText">{useObservable(tab?.tabTitle || getReactTabTitle())}</span>
          {tabKind !== ReactTabKind.Home && (
            <span className="tabIconSection">
              <CloseButton tab={tab} active={active} hovering={hovering} tabKind={tabKind} />
            </span>
          )}
        </div>
-        </a>
      </span>
    </li>
  );
@@ -212,6 +219,8 @@ const getReactTabContent = (activeReactTab: ReactTabKind, explorer: Explorer): J
      return <SplashScreen explorer={explorer} />;
    case ReactTabKind.Quickstart:
      return <QuickstartTab explorer={explorer} />;
+    case ReactTabKind.QueryCopilot:
+      return <QueryCopilotTab initialInput={useTabs.getState().queryCopilotTabInitialInput} explorer={explorer} />;
    default:
      throw Error(`Unsupported tab kind ${ReactTabKind[activeReactTab]}`);
  }
--- a/src/Explorer/Tree/Database.tsx
+++ b/src/Explorer/Tree/Database.tsx
@@ -3,7 +3,7 @@ import React from "react";
 import * as _ from "underscore";
 import { AuthType } from "../../AuthType";
 import * as Constants from "../../Common/Constants";
-import { readCollections } from "../../Common/dataAccess/readCollections";
+import { readCollections, readCollectionsWithPagination } from "../../Common/dataAccess/readCollections";
 import { readDatabaseOffer } from "../../Common/dataAccess/readDatabaseOffer";
 import { getErrorMessage, getErrorStack } from "../../Common/ErrorHandlingUtils";
 import * as Logger from "../../Common/Logger";
@@ -13,6 +13,7 @@ import * as ViewModels from "../../Contracts/ViewModels";
 import { useSidePanel } from "../../hooks/useSidePanel";
 import { useTabs } from "../../hooks/useTabs";
 import { IJunoResponse, JunoClient } from "../../Juno/JunoClient";
+import * as StorageUtility from "../../Shared/StorageUtility";
 import { Action, ActionModifiers } from "../../Shared/Telemetry/TelemetryConstants";
 import * as TelemetryProcessor from "../../Shared/Telemetry/TelemetryProcessor";
 import { userContext } from "../../UserContext";
@@ -38,6 +39,7 @@ export default class Database implements ViewModels.Database {
  public selectedSubnodeKind: ko.Observable<ViewModels.CollectionTabKind>;
  public junoClient: JunoClient;
  public isSampleDB: boolean;
+  public collectionsContinuationToken?: string;
  private isOfferRead: boolean;

  constructor(container: Explorer, data: DataModels.Database) {
@@ -140,7 +142,11 @@ export default class Database implements ViewModels.Database {
    }

    await this.loadOffer();
-    await this.loadCollections();
+
+    if (this.collections()?.length === 0) {
+      await this.loadCollections(true);
+    }
+
    this.isDatabaseExpanded(true);
    TelemetryProcessor.trace(Action.ExpandTreeNode, ActionModifiers.Mark, {
      description: "Database node",
@@ -162,9 +168,31 @@ export default class Database implements ViewModels.Database {
    });
  }

-  public async loadCollections(): Promise<void> {
+  public async loadCollections(restart = false) {
    const collectionVMs: Collection[] = [];
-    const collections: DataModels.Collection[] = await readCollections(this.id());
+    let collections: DataModels.Collection[] = [];
+    if (restart) {
+      this.collectionsContinuationToken = undefined;
+    }
+    const containerPaginationEnabled =
+      StorageUtility.LocalStorageUtility.getEntryString(StorageUtility.StorageKey.ContainerPaginationEnabled) ===
+      "true";
+    if (containerPaginationEnabled) {
+      const collectionsWithPagination: DataModels.CollectionsWithPagination = await readCollectionsWithPagination(
+        this.id(),
+        this.collectionsContinuationToken
+      );
+
+      if (collectionsWithPagination.collections?.length === Constants.Queries.containersPerPage) {
+        this.collectionsContinuationToken = collectionsWithPagination.continuationToken;
+      } else {
+        this.collectionsContinuationToken = undefined;
+      }
+      collections = collectionsWithPagination.collections;
+    } else {
+      collections = await readCollections(this.id());
+    }
+
    // TODO Remove
    // This is a hack to make Mongo collections read via ARM have a SQL-ish partitionKey property
    if (userContext.apiType === "Mongo" && userContext.authType === AuthType.AAD) {
@@ -199,7 +227,9 @@ export default class Database implements ViewModels.Database {

    //merge collections
    this.addCollectionsToList(collectionVMs);
+    if (!containerPaginationEnabled || restart) {
      this.deleteCollectionsFromList(deltaCollections.toDelete);
+    }

    useDatabases.getState().updateDatabase(this);
  }
--- a/src/Explorer/Tree/ResourceTree.tsx
+++ b/src/Explorer/Tree/ResourceTree.tsx
@@ -479,6 +479,18 @@ export const ResourceTree: React.FC<ResourceTreeProps> = ({ container }: Resourc
          databaseNode.children.push(buildCollectionNode(database, collection))
        );

+      if (database.collectionsContinuationToken) {
+        const loadMoreNode: TreeNode = {
+          label: "load more",
+          className: "loadMoreHeader",
+          onClick: async () => {
+            await database.loadCollections();
+            useDatabases.getState().updateDatabase(database);
+          },
+        };
+        databaseNode.children.push(loadMoreNode);
+      }
+
      database.collections.subscribe((collections: ViewModels.Collection[]) => {
        collections.forEach((collection: ViewModels.Collection) =>
          databaseNode.children.push(buildCollectionNode(database, collection))
--- a/src/Main.tsx
+++ b/src/Main.tsx
@@ -1,13 +1,13 @@
 // CSS Dependencies
 import { initializeIcons } from "@fluentui/react";
-import "bootstrap/dist/css/bootstrap.css";
 import { QuickstartCarousel } from "Explorer/Quickstart/QuickstartCarousel";
 import { MongoQuickstartTutorial } from "Explorer/Quickstart/Tutorials/MongoQuickstartTutorial";
 import { SQLQuickstartTutorial } from "Explorer/Quickstart/Tutorials/SQLQuickstartTutorial";
+import { userContext } from "UserContext";
+import "bootstrap/dist/css/bootstrap.css";
 import { useCarousel } from "hooks/useCarousel";
 import React, { useState } from "react";
 import ReactDOM from "react-dom";
-import { userContext } from "UserContext";
 import "../externals/jquery-ui.min.css";
 import "../externals/jquery-ui.min.js";
 import "../externals/jquery-ui.structure.min.css";
@@ -16,19 +16,21 @@ import "../externals/jquery.dataTables.min.css";
 import "../externals/jquery.typeahead.min.css";
 import "../externals/jquery.typeahead.min.js";
 // Image Dependencies
+import { QueryCopilotCarousel } from "Explorer/QueryCopilot/CopilotCarousel";
+import { QueryCopilotFeedbackModal } from "Explorer/QueryCopilot/QueryCopilotFeedbackModal";
 import "../images/CosmosDB_rgb_ui_lighttheme.ico";
-import "../images/favicon.ico";
 import hdeConnectImage from "../images/HdeConnectCosmosDB.svg";
+import "../images/favicon.ico";
+import "../less/TableStyles/CustomizeColumns.less";
+import "../less/TableStyles/EntityEditor.less";
+import "../less/TableStyles/fulldatatables.less";
+import "../less/TableStyles/queryBuilder.less";
 import "../less/documentDB.less";
 import "../less/forms.less";
 import "../less/infobox.less";
 import "../less/menus.less";
 import "../less/messagebox.less";
 import "../less/resourceTree.less";
-import "../less/TableStyles/CustomizeColumns.less";
-import "../less/TableStyles/EntityEditor.less";
-import "../less/TableStyles/fulldatatables.less";
-import "../less/TableStyles/queryBuilder.less";
 import "../less/tree.less";
 import { CollapsedResourceTree } from "./Common/CollapsedResourceTree";
 import { ResourceTreeContainer } from "./Common/ResourceTreeContainer";
@@ -50,16 +52,17 @@ import "./Explorer/Panes/PanelComponent.less";
 import { SidePanel } from "./Explorer/Panes/PanelContainerComponent";
 import "./Explorer/SplashScreen/SplashScreen.less";
 import { Tabs } from "./Explorer/Tabs/Tabs";
-import { useConfig } from "./hooks/useConfig";
-import { useKnockoutExplorer } from "./hooks/useKnockoutExplorer";
 import "./Libs/jquery";
 import "./Shared/appInsights";
+import { useConfig } from "./hooks/useConfig";
+import { useKnockoutExplorer } from "./hooks/useKnockoutExplorer";

 initializeIcons();

 const App: React.FunctionComponent = () => {
  const [isLeftPaneExpanded, setIsLeftPaneExpanded] = useState<boolean>(true);
  const isCarouselOpen = useCarousel((state) => state.shouldOpen);
+  const isCopilotCarouselOpen = useCarousel((state) => state.showCopilotCarousel);

  const config = useConfig();
  const explorer = useKnockoutExplorer(config?.platform);
@@ -80,6 +83,7 @@ const App: React.FunctionComponent = () => {
  return (
    <div className="flexContainer">
      <div id="divExplorer" className="flexContainer hideOverflows">
+        <div id="freeTierTeachingBubble"> </div>
        {/* Main Command Bar - Start */}
        <CommandBar container={explorer} />
        {/* Collections Tree and Tabs - Begin */}
@@ -121,6 +125,8 @@ const App: React.FunctionComponent = () => {
      {<QuickstartCarousel isOpen={isCarouselOpen} />}
      {<SQLQuickstartTutorial />}
      {<MongoQuickstartTutorial />}
+      {<QueryCopilotCarousel isOpen={isCopilotCarouselOpen} explorer={explorer} />}
+      {<QueryCopilotFeedbackModal />}
    </div>
  );
 };
--- a/src/Platform/Hosted/extractFeatures.ts
+++ b/src/Platform/Hosted/extractFeatures.ts
@@ -30,6 +30,12 @@ export type Features = {
  readonly mongoProxyAPIs?: string;
  readonly enableThroughputCap: boolean;
  readonly enableHierarchicalKeys: boolean;
+  readonly enableLegacyMongoShellV1: boolean;
+  readonly enableLegacyMongoShellV1Debug: boolean;
+  readonly enableLegacyMongoShellV2: boolean;
+  readonly enableLegacyMongoShellV2Debug: boolean;
+  readonly loadLegacyMongoShellFromBE: boolean;
+  readonly enableCopilot: boolean;

  // can be set via both flight and feature flag
  autoscaleDefault: boolean;
@@ -92,6 +98,13 @@ export function extractFeatures(given = new URLSearchParams(window.location.sear
    notebooksDownBanner: "true" === get("notebooksDownBanner"),
    enableThroughputCap: "true" === get("enablethroughputcap"),
    enableHierarchicalKeys: "true" === get("enablehierarchicalkeys"),
+    enableLegacyMongoShellV1: "true" === get("enablelegacymongoshellv1"),
+    enableLegacyMongoShellV1Debug: "true" === get("enablelegacymongoshellv1debug"),
+    enableLegacyMongoShellV2: "true" === get("enablelegacymongoshellv2"),
+    enableLegacyMongoShellV2Debug: "true" === get("enablelegacymongoshellv2debug"),
+    loadLegacyMongoShellFromBE: "true" === get("loadlegacymongoshellfrombe"),
+    enableCopilot: true,
+    // enableCopilot: "true" === get("enablecopilot"),
  };
 }

--- a/src/Shared/StorageUtility.ts
+++ b/src/Shared/StorageUtility.ts
@@ -4,6 +4,7 @@ import * as SessionStorageUtility from "./SessionStorageUtility";
 export { LocalStorageUtility, SessionStorageUtility };
 export enum StorageKey {
  ActualItemPerPage,
+  ContainerPaginationEnabled,
  CustomItemPerPage,
  DatabaseAccountId,
  EncryptedKeyToken,
--- a/src/Utils/AuthorizationUtils.ts
+++ b/src/Utils/AuthorizationUtils.ts
@@ -49,7 +49,7 @@ export function getMsalInstance() {
      cacheLocation: "localStorage",
    },
    auth: {
-      authority: `${configContext.AAD_ENDPOINT}common`,
+      authority: `${configContext.AAD_ENDPOINT}organizations`,
      clientId: "203f1145-856a-4232-83d4-a43568fba23d",
    },
  };
--- a/src/Utils/MessageValidation.ts
+++ b/src/Utils/MessageValidation.ts
@@ -21,6 +21,23 @@ function isValidOrigin(allowedOrigins: ReadonlyArray<string>, event: MessageEven
  return false;
 }

+export function shouldProcessMessage(event: MessageEvent): boolean {
+  if (typeof event.data !== "object") {
+    return false;
+  }
+  if (event.data["signature"] !== "pcIframe") {
+    return false;
+  }
+  if (!("data" in event.data)) {
+    return false;
+  }
+  if (typeof event.data["data"] !== "object") {
+    return false;
+  }
+
+  return true;
+}
+
 export function isReadyMessage(event: MessageEvent): boolean {
  if (!event?.data?.kind && !event?.data?.data) {
    return false;
--- a/src/Utils/NetworkUtility.ts
+++ b/src/Utils/NetworkUtility.ts
@@ -10,7 +10,7 @@ const PortalIPs: { [key: string]: string[] } = {
  usnat: ["7.28.202.68"],
 };

-export const getNetworkSettingsWarningMessage = (clientIpAddress: string): string => {
+export const getNetworkSettingsWarningMessage = (): string => {
  const accountProperties = userContext.databaseAccount?.properties;

  if (!accountProperties) {
@@ -40,13 +40,7 @@ export const getNetworkSettingsWarningMessage = (clientIpAddress: string): strin
    if (numberOfMatches !== portalIPs.length) {
      return "The Network settings for this account are preventing access from Data Explorer. Please allow access from Azure Portal to proceed.";
    }
-
-    return "";
-  } else {
-    if (!clientIpAddress || ipRules.some((ipRule) => ipRule.ipAddressOrRange === clientIpAddress)) {
-      return "";
  }

-    return "The Network settings for this account are preventing access from Data Explorer. Please add your current IP to the firewall rules to proceed.";
-  }
+  return "";
 };
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
Victor Meng	66a00c67ca	Turn on feature flag	2023-06-19 17:50:19 -07:00
Victor Meng	8eccbd2806	Comment change	2023-06-19 17:49:48 -07:00
vchske	4617fa9364	Update throughput settings tab with new elasticity properties (#1461 ) * Adding RU thermometer to settings throughput tab * Finalizing RU thermometer on throughput settings * Updated snapshot * Fixing formatting * Fixing lint errors * Rerun prettier * Fixing Offer properties * Fixing Types * Updating ARM clients, and enabling new elasticity properties * Updating snapshots * Updating an issue caused by updating ARM client * Latest changes based on feedback * Fixing lint and unit tests * Minor fix * Minor text change * Changed some formatting	2023-06-16 15:54:29 -07:00
victor-meng	a282ad9242	integrate copilot UI with backend (#1478 )	2023-06-16 00:25:23 -07:00
microsoft-github-policy-service[bot]	b954b14f56	Microsoft mandatory file (#1276 ) Co-authored-by: microsoft-github-policy-service[bot] <77245923+microsoft-github-policy-service[bot]@users.noreply.github.com>	2023-06-08 18:32:42 -07:00
vchske	ed9c7dbb6b	Text fix based on feedback (#1471 )	2023-06-06 17:25:17 -07:00
victor-meng	aadbb50e7d	Implement query copilot UI (#1452 )	2023-06-06 11:43:53 -07:00
bogercraig	abff435e88	Hierarchical Partitioning - Expose container type and hashkey version for all containers. (#1458 ) * Able to find needed data without RP calls. Quick test blurb on settings page for SQL accounts. * Added hierarchical partition message for SQL accounts. * Rearranging import to match master and bypass auto formatting. * Update snapshot tests with new partition hierarchy message. * Updating formatting --------- Co-authored-by: Craig Boger <craig.boger@microsoft.com>	2023-05-24 15:42:42 -04:00
sindhuba	d1c4059320	Fix gremlin timeout (#1457 ) * Increase Gremlin request timeout from 6min to 1hr * Increase query MAX_RESULT_SIZE limit from 10k to 100k. * Run npm format --------- Co-authored-by: Laurent Nguyen <laurent.nguyen@microsoft.com>	2023-05-23 13:49:40 -07:00
sunghyunkang1111	9b214a3171	Remove preview tag for hierarchical_partition_key (#1447 ) * Remove preview tag for hierarchical_partition_key	2023-05-18 14:28:53 -05:00
MokireddySampath	ba66aa939b	Defect 2280249 (#1432 ) * autoscale and manual radiobuutton fixes * alt text attribute for images * Revert "alt text attribute for images" This reverts commit `5a660551c6`. * alt text for decorative images * sev2 accessibilitydefects in data explorer * Commit to my local branch * role has been added to graphic tag * Update TableEntity.tsx * Update ThroughputInput.tsx * Update ThroughputInput.test.tsx.snap * Update TreeComponent.tsx * Update TableEntity.tsx * Update AddCollectionPanel.tsx * Update AddCollectionPanel.tsx * Update AddCollectionPanel.tsx * Update AddCollectionPanel.tsx * Update AddCollectionPanel.tsx * Update SplashScreen.tsx * Update TreeComponent.test.tsx.snap * Update TreeComponent.test.tsx.snap	2023-05-09 23:42:04 +05:30
MokireddySampath	f9af595eee	2276949test (#1433 ) * autoscale and manual radiobuutton fixes * alt text attribute for images * Revert "alt text attribute for images" This reverts commit `5a660551c6`. * alt text for decorative images * sev2 accessibilitydefects in data explorer * Commit to my local branch * Autofocus removed * Update TableEntity.tsx * Update TableEntity.tsx * Update TableEntity.tsx * Update ThroughputInput.tsx * Update ThroughputInput.test.tsx.snap * Update TreeComponent.tsx * Update TreeComponent.test.tsx.snap * Update AddCollectionPanel.tsx * Update SplashScreen.tsx	2023-05-09 23:33:05 +05:30
MokireddySampath	7ce8c7a5a1	anchor link removed, since interactive elements cannot be nested (#1434 ) * anchor link removed, since interactive elements cannot be nested * Update Tabs.tsx	2023-05-09 23:32:36 +05:30
MokireddySampath	9ad3f589cc	aria required and asterisk has been added to indicate mandatory input for new vertex key input (#1435 )	2023-05-09 23:32:09 +05:30
MokireddySampath	9267b2cc18	role has been corrected to combobox for the dropdown (#1438 )	2023-05-09 23:29:56 +05:30
MokireddySampath	c7d1b2dcdb	Defect2280542 (#1441 ) * Changes made for the screenreader to readout the label and suffix associated with the input * Added an empty href to restore the chactristics of link in high contrast mode * Update SubSettingsComponent.tsx * Update SubSettingsComponent.tsx * Update SubSettingsComponent.tsx * Update SubSettingsComponent.tsx * Update SubSettingsComponent.test.tsx.snap * Update SubSettingsComponent.test.tsx.snap * Update SubSettingsComponent.test.tsx.snap	2023-05-09 23:29:25 +05:30
MokireddySampath	a526410e44	Defect 2280429 (#1416 ) * autoscale and manual radiobuutton fixes * alt text attribute for images * Revert "alt text attribute for images" This reverts commit `5a660551c6`. * alt text for decorative images * sev2 accessibilitydefects in data explorer * Revert "sev2 accessibilitydefects in data explorer" This reverts commit `b84d5b572c`. * Sev2 accessibilitydefects * Revert "Sev2 accessibilitydefects" This reverts commit `a4e60f106c`. * accessibilitydefects-data explorer * Accessibility sev-2 defects-2 * corrections for 2278347,2278096 and fix for 2264174 * corrections for 2278347,2278096 and fix for 2264174 * fix for defect 2276938 * wrong aria attibute used * refresh, expand, collapse tree does not have proper label for screenreader * wrong role is assigned to anchor link * descriptive alt added for iconspresent for DATA and NOTEBOOK accordion headers * Update CollapsedResourceTree.tsx * Update ResourceTreeContainer.tsx * Update ResourceTreeContainer.tsx * Update TableEntity.tsx * Update treeComponent.less * Update MiddlePaneComponent.tsx * Update PanelInfoErrorComponent.tsx	2023-04-25 21:04:29 +05:30
MokireddySampath	58cb85156c	Defect 2278539 (#1415 ) * autoscale and manual radiobuutton fixes * alt text attribute for images * Revert "alt text attribute for images" This reverts commit `5a660551c6`. * alt text for decorative images * sev2 accessibilitydefects in data explorer * Revert "sev2 accessibilitydefects in data explorer" This reverts commit `b84d5b572c`. * Sev2 accessibilitydefects * Revert "Sev2 accessibilitydefects" This reverts commit `a4e60f106c`. * accessibilitydefects-data explorer * Accessibility sev-2 defects-2 * corrections for 2278347,2278096 and fix for 2264174 * corrections for 2278347,2278096 and fix for 2264174 * fix for defect 2276938 * wrong aria attibute used * refresh, expand, collapse tree does not have proper label for screenreader * wrong role is assigned to anchor link * Update MiddlePaneComponent.tsx * Update treeComponent.less * Update CollapsedResourceTree.tsx * Update ResourceTreeContainer.tsx * Update TableEntity.tsx * Update ResourceTreeContainer.tsx	2023-04-25 21:04:12 +05:30
MokireddySampath	dd5ccade2b	Defect 2280418 (#1414 ) * autoscale and manual radiobuutton fixes * alt text attribute for images * Revert "alt text attribute for images" This reverts commit `5a660551c6`. * alt text for decorative images * sev2 accessibilitydefects in data explorer * Revert "sev2 accessibilitydefects in data explorer" This reverts commit `b84d5b572c`. * Sev2 accessibilitydefects * Revert "Sev2 accessibilitydefects" This reverts commit `a4e60f106c`. * accessibilitydefects-data explorer * Accessibility sev-2 defects-2 * corrections for 2278347,2278096 and fix for 2264174 * corrections for 2278347,2278096 and fix for 2264174 * fix for defect 2276938 * wrong aria attibute used * refresh, expand, collapse tree does not have proper label for screenreader * Update treeComponent.less * Update TableEntity.tsx * Update MiddlePaneComponent.tsx	2023-04-25 21:03:51 +05:30
MokireddySampath	38ebef6c02	Defect 2276941 (#1413 ) * autoscale and manual radiobuutton fixes * alt text attribute for images * Revert "alt text attribute for images" This reverts commit `5a660551c6`. * alt text for decorative images * sev2 accessibilitydefects in data explorer * Revert "sev2 accessibilitydefects in data explorer" This reverts commit `b84d5b572c`. * Sev2 accessibilitydefects * Revert "Sev2 accessibilitydefects" This reverts commit `a4e60f106c`. * accessibilitydefects-data explorer * Accessibility sev-2 defects-2 * corrections for 2278347,2278096 and fix for 2264174 * corrections for 2278347,2278096 and fix for 2264174 * fix for defect 2276938 * wrong aria attibute used * aria-label for table max RU/s input element is not defined properly * Update TableEntity.tsx * Update treeComponent.less * Update MiddlePaneComponent.tsx	2023-04-25 21:03:35 +05:30
MokireddySampath	7ad5862e8f	Defect 2280272 (#1412 ) * autoscale and manual radiobuutton fixes * alt text attribute for images * Revert "alt text attribute for images" This reverts commit `5a660551c6`. * alt text for decorative images * sev2 accessibilitydefects in data explorer * Revert "sev2 accessibilitydefects in data explorer" This reverts commit `b84d5b572c`. * Sev2 accessibilitydefects * Revert "Sev2 accessibilitydefects" This reverts commit `a4e60f106c`. * accessibilitydefects-data explorer * Accessibility sev-2 defects-2 * corrections for 2278347,2278096 and fix for 2264174 * corrections for 2278347,2278096 and fix for 2264174 * fix for defect 2276938 * wrong aria attibute used * Update treeComponent.less	2023-04-25 21:03:12 +05:30
sindhuba	755b732532	Remove Enable Azure synapse link for Cassandra (#1427 )	2023-04-10 10:18:57 -07:00
sindhuba	1b5a9b83ff	Remove Enable Azure Synapse link button for Tables API (#1425 )	2023-04-07 08:47:23 -07:00
Armando Trejo Oliver	fb8871cfbf	Load Legacy Mongo Shell V2 by default (#1424 ) - Load Legacy Mongo Shell V2 by default - Add/Keep feature flags to load from portal BE and V1 - Skip code coverage if skipCodeCoverage environment variable is set to "true"	2023-04-06 10:13:05 -07:00
Armando Trejo Oliver	874cec26fc	Fix CORS issue using Mongo Shell from new origin (#1422 ) * Fix CORS issue using Mongo Shell from new origin * Add unit tests for getMongoShellOrigin and getMongoShellUrl * Fix lint errors	2023-04-04 18:19:18 -07:00
Armando Trejo Oliver	9d2d0e4754	Add feature flags to test Legacy Mongo Shell (#1421 ) Add feature flags to test Legacy Mongo Shell	2023-04-04 10:28:42 -07:00
MokireddySampath	c7c894d6d9	Sampath accessibility sev 2 2 (#1404 ) * autoscale and manual radiobuutton fixes * alt text attribute for images * Revert "alt text attribute for images" This reverts commit `5a660551c6`. * alt text for decorative images * sev2 accessibilitydefects in data explorer * Revert "sev2 accessibilitydefects in data explorer" This reverts commit `b84d5b572c`. * Sev2 accessibilitydefects * Revert "Sev2 accessibilitydefects" This reverts commit `a4e60f106c`. * accessibilitydefects-data explorer * Accessibility sev-2 defects-2 * corrections for 2278347,2278096 and fix for 2264174 * color for placeholder changed to 767474, margin is set to accommodate height between treeheader elements * padding added for databaseheader, removed margin and restored padding to treenodeheader	2023-04-03 22:11:40 +05:30
Asier Isayas	547954c3dc	Lazy loading containers (#1411 ) Co-authored-by: Asier Isayas <aisayas@microsoft.com>	2023-03-30 14:53:36 -07:00
sindhuba	7f220bf8be	Add additional teaching bubbles in Quickstart (#1407 ) * Add additional teaching bubbles in Quickstart * Run npm format * Fix lint error * Add unit tests * Add Mongo teaching bubbles for Try CosmosDB and Launch full screen * Add additional tests for UrlUtility * Run npm format * Add tests for Notebook Utils	2023-03-27 15:33:55 -07:00
jawelton74	1ee6abf890	Change AAD endpoint from /common to /organizations. (#1408 )	2023-03-27 10:47:04 -07:00
MokireddySampath	72c3605dbe	Sampath accessibility sev 2 (#1400 ) * autoscale and manual radiobuutton fixes * alt text attribute for images * Revert "alt text attribute for images" This reverts commit `5a660551c6`. * alt text for decorative images * sev2 accessibilitydefects in data explorer * Revert "sev2 accessibilitydefects in data explorer" This reverts commit `b84d5b572c`. * Sev2 accessibilitydefects * Revert "Sev2 accessibilitydefects" This reverts commit `a4e60f106c`. * accessibilitydefects-data explorer * Remove extra white space --------- Co-authored-by: Victor Meng <vimeng@microsoft.com>	2023-03-14 23:49:21 +05:30
MokireddySampath	a7a38807df	Defect2236159 (#1396 ) * autoscale and manual radiobuutton fixes * alt text attribute for images * Revert "alt text attribute for images" This reverts commit `5a660551c6`. * alt text for decorative images	2023-02-28 09:11:52 +05:30
sindhuba	1285ffc440	Refresh collection automatically when container is created using Quickstart pop up (#1394 ) * Quickstart Refresh collection automatically when container is created * Fix unit tests * Fix unit tests and address comments * Minor fixes in message handler * Minor changes to fix tsconfig.strict.json * Resolve npm compile:strict errors by fixing the code implementation * Remove cache refresh code in configureHosted function * Fix spacing * Run npm format	2023-02-24 10:58:36 -08:00
jawelton74	b4bca3d41a	Updates user to use for nuget push. (#1393 )	2023-02-16 17:51:57 -08:00
jawelton74	2a47e4311c	Set overwrite to true for both blob uploads to storage. (#1392 )	2023-02-16 16:23:24 -08:00
bogercraig	49d9f489d8	Users/bogercraig/add cdb live show link (#1391 ) * Exchanged links on DE home page with link to the Azure Cosmos DB Live TV show. * Adding back accidentally removed terminating , * Added cdb TV to Postgres quick start splash page. * Removing cdb tv description from next steps and moved up. * Moved cdb tv to the tips and learn more column on postgres getting started page. * Shortening postgrest cdb tv line. * Removing link from PG since only 1 episode so far for PG. * Adding terminating comma back. Formatting. * Consolidating Cosmos DB Live TV to a single variable. * Updating prettier formatting.	2023-02-15 09:24:55 -05:00
sindhuba	31cc129aa7	Update address sample data for SQL and Mongo (#1389 )	2023-02-07 18:34:10 -08:00
MokireddySampath	99af4acca4	autoscale and manual radiobuutton fixes (#1387 )	2023-02-07 11:48:45 +05:30
victor-meng	80dd161a6f	Remove networking warning message for sql, gremlin, and tables api (#1388 )	2023-02-06 12:51:04 -08:00