diff --git a/src/Explorer/Tabs/QueryTab/QueryTabComponent.tsx b/src/Explorer/Tabs/QueryTab/QueryTabComponent.tsx
index 5d661213b..327f25a38 100644
--- a/src/Explorer/Tabs/QueryTab/QueryTabComponent.tsx
+++ b/src/Explorer/Tabs/QueryTab/QueryTabComponent.tsx
@@ -2,7 +2,11 @@ import { DetailsList, DetailsListLayoutMode, IColumn, Pivot, PivotItem, Selectio
 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";
@@ -927,7 +931,7 @@ export default class QueryTabComponent extends React.Component<IQueryTabComponen
                   <div className="warningErrorContainer" aria-live="assertive">
                     <div className="warningErrorContent">
                       <span>
-                        <img className="paneErrorIcon" src="images/info_color.svg" alt="Error" />
+                        <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
@@ -956,7 +960,7 @@ export default class QueryTabComponent extends React.Component<IQueryTabComponen
                     !this.props.tabsBaseInstance.isExecuting() && (
                       <div className="queryEditorWatermark">
                         <p>
-                          <img src="images/RunQuery.png" alt="Execute Query Watermark" />
+                          <img src={RunQuery} alt="Execute Query Watermark" />
                         </p>
                         <p className="queryEditorWatermarkText">Execute a query to see the results</p>
                       </div>
@@ -982,11 +986,7 @@ export default class QueryTabComponent extends React.Component<IQueryTabComponen
                                 <span className="queryResultNextEnable">
                                   <a onClick={this.onFetchNextPageClick}>
                                     <span>Load more</span>
-                                    <img
-                                      className="queryResultnextImg"
-                                      src="images/Query-Editor-Next.svg"
-                                      alt="Fetch next page"
-                                    />
+                                    <img className="queryResultnextImg" src={QueryEditorNext} alt="Fetch next page" />
                                   </a>
                                 </span>
                               )}
@@ -1043,7 +1043,7 @@ export default class QueryTabComponent extends React.Component<IQueryTabComponen
                                     >
                                       <img
                                         className="downloadCsvImg"
-                                        src="images/DownloadQuery.svg"
+                                        src={DownloadQueryMetrics}
                                         alt="download query metrics csv"
                                       />
                                       <span>Per-partition query metrics (CSV)</span>
diff --git a/src/Platform/Hosted/Components/ConnectExplorer.tsx b/src/Platform/Hosted/Components/ConnectExplorer.tsx
index e7a4cbecc..3639bd113 100644
--- a/src/Platform/Hosted/Components/ConnectExplorer.tsx
+++ b/src/Platform/Hosted/Components/ConnectExplorer.tsx
@@ -1,9 +1,11 @@
-import * as React from "react";
 import { useBoolean } from "@fluentui/react-hooks";
-import { HttpHeaders } from "../../../Common/Constants";
-import { GenerateTokenResponse } from "../../../Contracts/DataModels";
-import { configContext } from "../../../ConfigContext";
+import * as React from "react";
+import ErrorImage from "../../../../images/error.svg";
+import ConnectImage from "../../../../images/HdeConnectCosmosDB.svg";
 import { AuthType } from "../../../AuthType";
+import { HttpHeaders } from "../../../Common/Constants";
+import { configContext } from "../../../ConfigContext";
+import { GenerateTokenResponse } from "../../../Contracts/DataModels";
 import { isResourceTokenConnectionString } from "../Helpers/ResourceTokenUtils";
 
 interface Props {
@@ -28,7 +30,7 @@ export const ConnectExplorer: React.FunctionComponent<Props> = ({
       <div className="connectExplorerFormContainer">
         <div className="connectExplorer">
           <p className="connectExplorerContent">
-            <img src="images/HdeConnectCosmosDB.svg" alt="Azure Cosmos DB" />
+            <img src={ConnectImage} alt="Azure Cosmos DB" />
           </p>
           <p className="welcomeText">Welcome to Azure Cosmos DB</p>
           {isFormVisible ? (
@@ -68,7 +70,7 @@ export const ConnectExplorer: React.FunctionComponent<Props> = ({
                   }}
                 />
                 <span className="errorDetailsInfoTooltip" style={{ display: "none" }}>
-                  <img className="errorImg" src="images/error.svg" alt="Error notification" />
+                  <img className="errorImg" src={ErrorImage} alt="Error notification" />
                   <span className="errorDetails"></span>
                 </span>
               </p>