diff --git a/src/Contracts/ViewModels.ts b/src/Contracts/ViewModels.ts
index a023f2fc4..3450c12aa 100644
--- a/src/Contracts/ViewModels.ts
+++ b/src/Contracts/ViewModels.ts
@@ -15,6 +15,7 @@ import DocumentId from "../Explorer/Tree/DocumentId";
 import StoredProcedure from "../Explorer/Tree/StoredProcedure";
 import Trigger from "../Explorer/Tree/Trigger";
 import UserDefinedFunction from "../Explorer/Tree/UserDefinedFunction";
+import { SelfServeTypes } from "../SelfServe/SelfServeUtils";
 import { UploadDetails } from "../workers/upload/definitions";
 import * as DataModels from "./DataModels";
 import { SubscriptionType } from "./SubscriptionType";
@@ -395,6 +396,7 @@ export interface DataExplorerInputsFrame {
   isAuthWithresourceToken?: boolean;
   defaultCollectionThroughput?: CollectionCreationDefaults;
   flights?: readonly string[];
+  selfServeType?: SelfServeTypes
 }
 
 export interface CollectionCreationDefaults {
diff --git a/src/Explorer/Explorer.ts b/src/Explorer/Explorer.ts
index 0d2e1b64a..3e35c1c4a 100644
--- a/src/Explorer/Explorer.ts
+++ b/src/Explorer/Explorer.ts
@@ -88,6 +88,9 @@ import { stringToBlob } from "../Utils/BlobUtils";
 import { IChoiceGroupProps } from "office-ui-fabric-react";
 import { getErrorMessage, handleError, getErrorStack } from "../Common/ErrorHandlingUtils";
 import { SubscriptionType } from "../Contracts/SubscriptionType";
+import { SelfServeLoadingComponentAdapter } from "../SelfServe/SelfServeLoadingComponentAdapter";
+import { SelfServeTypes } from "../SelfServe/SelfServeUtils";
+import { SelfServeComponentAdapter } from "../SelfServe/SelfServeComponentAdapter";
 
 BindingHandlersRegisterer.registerBindingHandlers();
 // Hold a reference to ComponentRegisterer to prevent transpiler to ignore import
@@ -132,6 +135,7 @@ export default class Explorer {
   public isEnableMongoCapabilityPresent: ko.Computed<boolean>;
   public isServerlessEnabled: ko.Computed<boolean>;
   public isAccountReady: ko.Observable<boolean>;
+  public selfServeType: ko.Observable<SelfServeTypes>;
   public canSaveQueries: ko.Computed<boolean>;
   public features: ko.Observable<any>;
   public serverId: ko.Observable<string>;
@@ -159,6 +163,7 @@ export default class Explorer {
   public selectedNode: ko.Observable<ViewModels.TreeNode>;
   public isRefreshingExplorer: ko.Observable<boolean>;
   private resourceTree: ResourceTreeAdapter;
+  private selfServeComponentAdapter: SelfServeComponentAdapter
 
   // Resource Token
   public resourceTokenDatabaseId: ko.Observable<string>;
@@ -255,6 +260,7 @@ export default class Explorer {
 
   // React adapters
   private commandBarComponentAdapter: CommandBarComponentAdapter;
+  private selfServeLoadingComponentAdapter : SelfServeLoadingComponentAdapter;
   private splashScreenAdapter: SplashScreenComponentAdapter;
   private notificationConsoleComponentAdapter: NotificationConsoleComponentAdapter;
   private dialogComponentAdapter: DialogComponentAdapter;
@@ -297,6 +303,7 @@ export default class Explorer {
       }
     });
     this.isAccountReady = ko.observable<boolean>(false);
+    this.selfServeType = ko.observable<SelfServeTypes>(undefined);
     this._isInitializingNotebooks = false;
     this._isInitializingSparkConnectionInfo = false;
     this.arcadiaToken = ko.observable<string>();
@@ -702,6 +709,7 @@ export default class Explorer {
     });
 
     this.uploadItemsPaneAdapter = new UploadItemsPaneAdapter(this);
+    this.selfServeComponentAdapter = new SelfServeComponentAdapter(this);
 
     this.loadQueryPane = new LoadQueryPane({
       id: "loadquerypane",
@@ -877,6 +885,7 @@ export default class Explorer {
     });
 
     this.commandBarComponentAdapter = new CommandBarComponentAdapter(this);
+    this.selfServeLoadingComponentAdapter = new SelfServeLoadingComponentAdapter();
     this.notificationConsoleComponentAdapter = new NotificationConsoleComponentAdapter(this);
 
     this._initSettings();
@@ -1854,6 +1863,12 @@ export default class Explorer {
 
   public initDataExplorerWithFrameInputs(inputs: ViewModels.DataExplorerInputsFrame): Q.Promise<void> {
     if (inputs != null) {
+      inputs.selfServeType 
+      ? this.selfServeType(inputs.selfServeType) 
+      : this.selfServeType(SelfServeTypes.none);
+      this._setLoadingStatusText("Connecting...", "Welcome to Azure Cosmos DB")
+      this._setConnectingImage()
+      
       const authorizationToken = inputs.authorizationToken || "";
       const masterKey = inputs.masterKey || "";
       const databaseAccount = inputs.databaseAccount || null;
@@ -2985,6 +3000,11 @@ export default class Explorer {
     }
   }
 
+  private _setConnectingImage() {
+    const connectingImage = document.getElementById("explorerConnectingImage");
+    connectingImage.innerHTML="<img src=\"../images/HdeConnectCosmosDB.svg\" >";
+  }
+
   private _openSetupNotebooksPaneForQuickstart(): void {
     const title = "Enable Notebooks (Preview)";
     const description =
diff --git a/src/Main.tsx b/src/Main.tsx
index 92e1619c4..b67b2c263 100644
--- a/src/Main.tsx
+++ b/src/Main.tsx
@@ -126,9 +126,11 @@ const App: React.FunctionComponent = () => {
 
   return (
     <div className="flexContainer">
+      <div id="divSelfServe" data-bind="visible: selfServeType() && selfServeType() !== 'none', react: selfServeComponentAdapter">
+      </div>
       <div id="divExplorer" className="flexContainer hideOverflows" style={{ display: "none" }}>
         {/* Main Command Bar - Start */}
-        <div data-bind="react: commandBarComponentAdapter" />
+        <div data-bind="visible: selfServeType() === 'none', react: commandBarComponentAdapter" />
         {/* Main Command Bar - End */}
         {/* Share url flyout - Start */}
         <div
@@ -196,7 +198,7 @@ const App: React.FunctionComponent = () => {
         </div>
         {/* Share url flyout - End */}
         {/* Collections Tree and Tabs - Begin */}
-        <div className="resourceTreeAndTabs">
+        <div className="resourceTreeAndTabs" data-bind="visible: selfServeType() === 'none'">
           {/* Collections Tree - Start */}
           <div id="resourcetree" data-test="resourceTreeId" className="resourceTree">
             <div className="collectionsTreeWithSplitter">
@@ -303,7 +305,7 @@ const App: React.FunctionComponent = () => {
             data-bind="visible: !isRefreshingExplorer() && tabsManager.openedTabs().length === 0"
           >
             <form className="connectExplorerFormContainer">
-              <div className="connectExplorer" data-bind="react: splashScreenAdapter" />
+              <div className="connectExplorer" data-bind="visible: selfServeType() === 'none', react: splashScreenAdapter" />
             </form>
           </div>
           <div
@@ -317,7 +319,7 @@ const App: React.FunctionComponent = () => {
           role="contentinfo"
           aria-label="Notification console"
           id="explorerNotificationConsole"
-          data-bind="react: notificationConsoleComponentAdapter"
+          data-bind="react: notificationConsoleComponentAdapter, visible: selfServeType() === 'none'"
         />
       </div>
       {/* Explorer Connection - Encryption Token / AAD - Start */}
@@ -373,14 +375,13 @@ const App: React.FunctionComponent = () => {
       {/* Global loader - Start */}
       <div className="splashLoaderContainer" data-bind="visible: isRefreshingExplorer">
         <div className="splashLoaderContentContainer">
-          <p className="connectExplorerContent">
-            <img src={hdeConnectImage} alt="Azure Cosmos DB" />
+          <div className="splashLoaderTitle" data-bind="visible: selfServeType() === undefined, react: selfServeLoadingComponentAdapter">
+          </div>
+          <p className="connectExplorerContent" id="explorerConnectingImage" data-bind="visible: selfServeType() === 'none'">
           </p>
-          <p className="splashLoaderTitle" id="explorerLoadingStatusTitle">
-            Welcome to Azure Cosmos DB
+          <p className="splashLoaderTitle" id="explorerLoadingStatusTitle" data-bind="visible: selfServeType() === 'none'">
           </p>
-          <p className="splashLoaderText" id="explorerLoadingStatusText" role="alert">
-            Connecting...
+          <p className="splashLoaderText" id="explorerLoadingStatusText" role="alert" data-bind="visible: selfServeType() === 'none'">
           </p>
         </div>
       </div>
diff --git a/src/SelfServe/SelfServeComponentAdapter.tsx b/src/SelfServe/SelfServeComponentAdapter.tsx
new file mode 100644
index 000000000..92831de26
--- /dev/null
+++ b/src/SelfServe/SelfServeComponentAdapter.tsx
@@ -0,0 +1,50 @@
+/**
+ * This adapter is responsible to render the React component
+ * If the component signals a change through the callback passed in the properties, it must render the React component when appropriate
+ * and update any knockout observables passed from the parent.
+ */
+import * as ko from "knockout";
+import * as React from "react";
+import { ReactAdapter } from "../Bindings/ReactBindingHandler";
+import Explorer from "../Explorer/Explorer";
+import { Descriptor, SmartUiComponent } from "../Explorer/Controls/SmartUi/SmartUiComponent";
+import { SelfServeTypes } from "./SelfServeUtils";
+import { SqlX } from "./SqlX/SqlX";
+
+export class SelfServeComponentAdapter implements ReactAdapter {
+  public parameters: ko.Observable<number>;
+  public container: Explorer;
+
+  constructor(container: Explorer) {
+    this.container = container;
+    this.parameters = ko.observable(Date.now());
+    this.container.selfServeType.subscribe(() => {this.triggerRender()})
+  }
+
+  private getDescriptor = (selfServeType : SelfServeTypes) : Descriptor => {
+    switch (selfServeType) {
+      case SelfServeTypes.sqlx:
+        return SqlX.toSmartUiDescriptor()
+      default:
+        return undefined;
+    }
+  }
+  
+  public renderComponent(): JSX.Element {
+    const selfServeType = this.container.selfServeType()
+    console.log("type:" + selfServeType)
+    const smartUiDescriptor = this.getDescriptor(selfServeType)
+
+  
+    const element = smartUiDescriptor ?
+      <SmartUiComponent descriptor={smartUiDescriptor} /> :
+      <h1>Invalid self serve type!</h1>
+  
+  
+    return element
+  }
+
+  private triggerRender() {
+    window.requestAnimationFrame(() => this.parameters(Date.now()));
+  }
+}
diff --git a/src/SelfServe/SelfServeLoadingComponentAdapter.tsx b/src/SelfServe/SelfServeLoadingComponentAdapter.tsx
new file mode 100644
index 000000000..c18b176fd
--- /dev/null
+++ b/src/SelfServe/SelfServeLoadingComponentAdapter.tsx
@@ -0,0 +1,25 @@
+/**
+ * This adapter is responsible to render the React component
+ * If the component signals a change through the callback passed in the properties, it must render the React component when appropriate
+ * and update any knockout observables passed from the parent.
+ */
+import * as ko from "knockout";
+import { Spinner, SpinnerSize } from "office-ui-fabric-react";
+import * as React from "react";
+import { ReactAdapter } from "../Bindings/ReactBindingHandler";
+
+export class SelfServeLoadingComponentAdapter implements ReactAdapter {
+  public parameters: ko.Observable<number>;
+
+  constructor() {
+    this.parameters = ko.observable(Date.now());
+  }
+
+  public renderComponent(): JSX.Element {
+    return <Spinner size={SpinnerSize.large} />
+  }
+
+  private triggerRender() {
+    window.requestAnimationFrame(() => this.parameters(Date.now()));
+  }
+}
diff --git a/src/SelfServe/SelfServeUtils.tsx b/src/SelfServe/SelfServeUtils.tsx
index a9ed5ff02..5f474e33d 100644
--- a/src/SelfServe/SelfServeUtils.tsx
+++ b/src/SelfServe/SelfServeUtils.tsx
@@ -197,6 +197,7 @@ const getInput = (value: CommonInputTypes): AnyInput => {
 };
 
 export enum SelfServeTypes {
+  none="none",
   sqlx="sqlx"
 }