diff --git a/src/Explorer/Controls/Settings/SettingsComponent.tsx b/src/Explorer/Controls/Settings/SettingsComponent.tsx
index 0094806c6..cc7cc15ba 100644
--- a/src/Explorer/Controls/Settings/SettingsComponent.tsx
+++ b/src/Explorer/Controls/Settings/SettingsComponent.tsx
@@ -16,6 +16,7 @@ import { trace, traceFailure, traceStart, traceSuccess } from "../../../Shared/T
 import { userContext } from "../../../UserContext";
 import { MongoDBCollectionResource, MongoIndex } from "../../../Utils/arm/generatedClients/cosmos/types";
 import * as AutoPilotUtils from "../../../Utils/AutoPilotUtils";
+import { logConsoleError } from "../../../Utils/NotificationConsoleUtils";
 import { CommandButtonComponentProps } from "../../Controls/CommandButton/CommandButtonComponent";
 import { useCommandBar } from "../../Menus/CommandBar/CommandBarComponentAdapter";
 import { SettingsTabV2 } from "../../Tabs/SettingsTabV2";
@@ -109,6 +110,7 @@ export interface SettingsComponentState {
 
   initialNotification: DataModels.Notification;
   selectedTab: SettingsV2TabTypes;
+  offerLoaded: boolean;
 }
 
 export class SettingsComponent extends React.Component<SettingsComponentProps, SettingsComponentState> {
@@ -193,6 +195,7 @@ export class SettingsComponent extends React.Component<SettingsComponentProps, S
 
       initialNotification: undefined,
       selectedTab: SettingsV2TabTypes.ScaleTab,
+      offerLoaded: !!this.offer,
     };
 
     this.saveSettingsButton = {
@@ -214,6 +217,7 @@ export class SettingsComponent extends React.Component<SettingsComponentProps, S
     if (this.isCollectionSettingsTab) {
       this.refreshIndexTransformationProgress();
       this.loadMongoIndexes();
+      this.loadCollectionOffer();
     }
 
     this.setAutoPilotStates();
@@ -368,6 +372,34 @@ export class SettingsComponent extends React.Component<SettingsComponentProps, S
     });
   };
 
+  private async loadCollectionOffer() {
+    try {
+      this.props.settingsTab.isExecuting(true);
+      await this.collection.loadOffer();
+      this.props.settingsTab.tabTitle(this.collection.offer() ? "Settings" : "Scale & Settings");
+      this.setState({ offerLoaded: true });
+    } catch (error) {
+      this.props.settingsTab.isExecutionError(true);
+      const errorMessage = getErrorMessage(error);
+      traceFailure(
+        Action.Tab,
+        {
+          databaseName: this.collection.databaseId,
+          collectionName: this.collection.id(),
+
+          dataExplorerArea: Constants.Areas.Tab,
+          tabTitle: this.props.settingsTab.tabTitle,
+          error: errorMessage,
+          errorStack: getErrorStack(error),
+        },
+        this.props.settingsTab.onLoadStartKey
+      );
+      logConsoleError(`Error while fetching container settings for container ${this.collection.id()}: ${errorMessage}`);
+    } finally {
+      this.props.settingsTab.isExecuting(false);
+    }
+  }
+
   private getMongoIndexesToSave = (): MongoIndex[] => {
     let finalIndexes: MongoIndex[] = [];
     this.state.currentMongoIndexes?.map((mongoIndex: MongoIndex, index: number) => {
@@ -905,6 +937,10 @@ export class SettingsComponent extends React.Component<SettingsComponentProps, S
       );
     }
 
+    if (!this.state.offerLoaded) {
+      return <></>;
+    }
+
     const subSettingsComponentProps: SubSettingsComponentProps = {
       collection: this.collection,
       isAnalyticalStorageEnabled: this.isAnalyticalStorageEnabled,
diff --git a/src/Explorer/Controls/Settings/SettingsComponentAdapter.tsx b/src/Explorer/Controls/Settings/SettingsComponentAdapter.tsx
deleted file mode 100644
index 6fd2cff07..000000000
--- a/src/Explorer/Controls/Settings/SettingsComponentAdapter.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-import ko from "knockout";
-import * as React from "react";
-import { ReactAdapter } from "../../../Bindings/ReactBindingHandler";
-import { SettingsComponent, SettingsComponentProps } from "./SettingsComponent";
-
-export class SettingsComponentAdapter implements ReactAdapter {
-  public parameters: ko.Computed<boolean>;
-
-  constructor(private props: SettingsComponentProps) {}
-
-  public renderComponent(): JSX.Element {
-    return this.parameters() ? <SettingsComponent {...this.props} /> : <></>;
-  }
-}
diff --git a/src/Explorer/Tabs/SettingsTabV2.tsx b/src/Explorer/Tabs/SettingsTabV2.tsx
index 1221a53f7..e0f5358af 100644
--- a/src/Explorer/Tabs/SettingsTabV2.tsx
+++ b/src/Explorer/Tabs/SettingsTabV2.tsx
@@ -1,139 +1,23 @@
-import ko from "knockout";
-import * as Constants from "../../Common/Constants";
-import { getErrorMessage, getErrorStack } from "../../Common/ErrorHandlingUtils";
-import * as DataModels from "../../Contracts/DataModels";
+import React from "react";
 import * as ViewModels from "../../Contracts/ViewModels";
-import { Action } from "../../Shared/Telemetry/TelemetryConstants";
-import { traceFailure } from "../../Shared/Telemetry/TelemetryProcessor";
-import { logConsoleError } from "../../Utils/NotificationConsoleUtils";
-import { SettingsComponentProps } from "../Controls/Settings/SettingsComponent";
-import { SettingsComponentAdapter } from "../Controls/Settings/SettingsComponentAdapter";
+import { SettingsComponent } from "../Controls/Settings/SettingsComponent";
 import TabsBase from "./TabsBase";
 
 export class SettingsTabV2 extends TabsBase {
-  public readonly html = '<div style="height: 100%" data-bind="react:settingsComponentAdapter"></div>';
-  public settingsComponentAdapter: SettingsComponentAdapter;
-
-  constructor(options: ViewModels.TabOptions) {
-    super(options);
-    const props: SettingsComponentProps = {
-      settingsTab: this,
-    };
-    this.settingsComponentAdapter = new SettingsComponentAdapter(props);
+  public render(): JSX.Element {
+    return <SettingsComponent settingsTab={this} />;
   }
 }
 
 export class CollectionSettingsTabV2 extends SettingsTabV2 {
-  private notificationRead: ko.Observable<boolean>;
-  private notification: DataModels.Notification;
-  private offerRead: ko.Observable<boolean>;
-
-  constructor(options: ViewModels.TabOptions) {
-    super(options);
-
-    this.tabId = "SettingsV2-" + this.tabId;
-    this.notificationRead = ko.observable(false);
-    this.offerRead = ko.observable(false);
-    this.settingsComponentAdapter.parameters = ko.computed<boolean>(() => {
-      if (this.notificationRead() && this.offerRead()) {
-        this.pendingNotification(this.notification);
-        this.notification = undefined;
-        this.offerRead(false);
-        this.notificationRead(false);
-        return true;
-      }
-      return false;
-    });
-  }
-
-  public async onActivate(): Promise<void> {
-    try {
-      this.isExecuting(true);
-
-      const collection: ViewModels.Collection = this.collection as ViewModels.Collection;
-      await collection.loadOffer();
-      // passed in options and set by parent as "Settings" by default
-      this.tabTitle(collection.offer() ? "Settings" : "Scale & Settings");
-
-      const data: DataModels.Notification = await collection.getPendingThroughputSplitNotification();
-      this.notification = data;
-      this.notificationRead(true);
-    } catch (error) {
-      const errorMessage = getErrorMessage(error);
-      this.notification = undefined;
-      this.notificationRead(true);
-      traceFailure(
-        Action.Tab,
-        {
-          databaseName: this.collection.databaseId,
-          collectionName: this.collection.id(),
-
-          dataExplorerArea: Constants.Areas.Tab,
-          tabTitle: this.tabTitle,
-          error: errorMessage,
-          errorStack: getErrorStack(error),
-        },
-        this.onLoadStartKey
-      );
-      logConsoleError(`Error while fetching container settings for container ${this.collection.id()}: ${errorMessage}`);
-      throw error;
-    } finally {
-      this.offerRead(true);
-      this.isExecuting(false);
-    }
-
+  public onActivate(): void {
     super.onActivate();
     this.collection.selectedSubnodeKind(ViewModels.CollectionTabKind.CollectionSettingsV2);
   }
 }
 
 export class DatabaseSettingsTabV2 extends SettingsTabV2 {
-  private notificationRead: ko.Observable<boolean>;
-  private notification: DataModels.Notification;
-
-  constructor(options: ViewModels.TabOptions) {
-    super(options);
-    this.tabId = "DatabaseSettingsV2-" + this.tabId;
-    this.notificationRead = ko.observable(false);
-    this.settingsComponentAdapter.parameters = ko.computed<boolean>(() => {
-      if (this.notificationRead()) {
-        this.pendingNotification(this.notification);
-        this.notification = undefined;
-        this.notificationRead(false);
-        return true;
-      }
-      return false;
-    });
-  }
-
-  public async onActivate(): Promise<void> {
-    try {
-      this.isExecuting(true);
-
-      const data: DataModels.Notification = await this.database.getPendingThroughputSplitNotification();
-      this.notification = data;
-      this.notificationRead(true);
-    } catch (error) {
-      const errorMessage = getErrorMessage(error);
-      this.notification = undefined;
-      this.notificationRead(true);
-      traceFailure(
-        Action.Tab,
-        {
-          databaseName: this.database.id(),
-          dataExplorerArea: Constants.Areas.Tab,
-          tabTitle: this.tabTitle,
-          error: errorMessage,
-          errorStack: getErrorStack(error),
-        },
-        this.onLoadStartKey
-      );
-      logConsoleError(`Error while fetching database settings for database ${this.database.id()}: ${errorMessage}`);
-      throw error;
-    } finally {
-      this.isExecuting(false);
-    }
-
+  public onActivate(): void {
     super.onActivate();
     this.database.selectedSubnodeKind(ViewModels.CollectionTabKind.DatabaseSettingsV2);
   }