diff --git a/src/Explorer/Controls/Query/IndexAdvisorComponent.tsx b/src/Explorer/Controls/Query/IndexAdvisorComponent.tsx
new file mode 100644
index 000000000..389443b7d
--- /dev/null
+++ b/src/Explorer/Controls/Query/IndexAdvisorComponent.tsx
@@ -0,0 +1,46 @@
+import {
+  Checkbox,
+  CheckboxVisibility,
+  DetailsHeader,
+  DetailsList,
+  IDetailsHeaderProps,
+  IDetailsListCheckboxProps,
+  IRenderFunction,
+  Stack,
+  Text
+} from "@fluentui/react";
+import React from "react";
+
+interface IndexAdvisorComponentProps { };
+
+export const IndexAdvisorComponent: React.FC = (): JSX.Element => {
+
+  const onRenderCheckbox = (props: IDetailsListCheckboxProps, _defaultRender?: IRenderFunction<IDetailsListCheckboxProps>) => {
+    return <Checkbox {...props} />;
+  };
+
+  const onRenderDetailsHeader = (props: IDetailsHeaderProps, _defaultRender?: IRenderFunction<IDetailsHeaderProps>) => {
+    return <DetailsHeader {...props} ariaLabelForSelectAllCheckbox="Select all" />;
+  };
+
+  return (
+    <Stack>
+      <Text>
+        Here is an analysis on the indexes utilized for executing this query.
+        Based on the analysis, Cosmos DB recommends adding the selected index(es) to your indexing policy to
+        optimize your query performance.
+      </Text>
+      <Text>Indexes analysis</Text>
+      <DetailsList
+        items={[]}
+        groups={[]}
+        columns={[]}
+        onRenderCheckbox={onRenderCheckbox}
+        checkboxVisibility={CheckboxVisibility.always}
+        onRenderDetailsHeader={onRenderDetailsHeader}
+        groupProps={{
+          showEmptyGroups: true,
+        }}/>
+    </Stack>
+  );
+};
\ No newline at end of file
diff --git a/src/Explorer/Tabs/QueryTab/QueryTabComponent.tsx b/src/Explorer/Tabs/QueryTab/QueryTabComponent.tsx
index 95ac41b93..661ec7c60 100644
--- a/src/Explorer/Tabs/QueryTab/QueryTabComponent.tsx
+++ b/src/Explorer/Tabs/QueryTab/QueryTabComponent.tsx
@@ -195,7 +195,10 @@ export default class QueryTabComponent extends React.Component<IQueryTabComponen
             this.props.collection.databaseId,
             this.props.collection.id(),
             this.state.selectedContent || this.state.sqlQueryEditorContent,
-            { enableCrossPartitionQuery: HeadersUtility.shouldEnableCrossPartitionKey() } as FeedOptions
+            {
+              enableCrossPartitionQuery: HeadersUtility.shouldEnableCrossPartitionKey(),
+              populateIndexMetrics: userContext.apiType === "SQL",
+            } as FeedOptions
           );
     }