diff --git a/react/src/components/ResourceGroupSelect.tsx b/react/src/components/ResourceGroupSelect.tsx
index 9669e35860..47346c0dbb 100644
--- a/react/src/components/ResourceGroupSelect.tsx
+++ b/react/src/components/ResourceGroupSelect.tsx
@@ -15,6 +15,7 @@ const ResourceGroupSelect: React.FC<ResourceGroupSelectProps> = ({
   projectId,
   autoSelectDefault,
   filter,
+  loading,
   ...selectProps
 }) => {
   const baiRequestWithPromise = useBaiSignedRequestWithPromise();
@@ -110,7 +111,7 @@ const ResourceGroupSelect: React.FC<ResourceGroupSelectProps> = ({
           });
         }
       }}
-      loading={isPendingLoading}
+      loading={isPendingLoading || loading}
       {...selectProps}
     >
       {_.map(resourceGroups, (resourceGroup, idx) => {
diff --git a/react/src/index.tsx b/react/src/index.tsx
index 9d1b7f58f6..2e9fef26a0 100644
--- a/react/src/index.tsx
+++ b/react/src/index.tsx
@@ -210,6 +210,15 @@ customElements.define(
 customElements.define(
   'backend-ai-react-resource-group-select',
   reactToWebComponent((props) => {
+    const [value, setValue] = React.useState(props.value || '');
+
+    React.useEffect(() => {
+      if (props.value !== value) {
+        setValue(props.value || '');
+      }
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [props.value]);
+
     return (
       <DefaultProviders {...props}>
         <Flex direction="column" align="stretch" style={{ minWidth: 200 }}>
@@ -219,9 +228,11 @@ customElements.define(
               style={{ margin: 0 }}
             >
               <ResourceGroupSelect
-                autoSelectDefault
                 size="large"
+                value={value}
+                loading={value !== props.value || value === ''}
                 onChange={(value) => {
+                  setValue(value);
                   props.dispatchEvent('change', value);
                 }}
               />
diff --git a/src/components/backend-ai-resource-broker.ts b/src/components/backend-ai-resource-broker.ts
index c0df0efa26..e285eb585c 100644
--- a/src/components/backend-ai-resource-broker.ts
+++ b/src/components/backend-ai-resource-broker.ts
@@ -575,7 +575,10 @@ export default class BackendAiResourceBroker extends BackendAIPage {
           using: { cpu: 0, mem: 0 },
           remaining: { cpu: 0, mem: 0 },
         };
-      } else if (this.scaling_groups.length === 0) {
+      } else if (
+        this.scaling_groups.length === 0 ||
+        resourcePresetInfo.scaling_groups[this.scaling_group] === undefined
+      ) {
         this.aggregate_updating = false;
         return Promise.resolve(false);
       }
diff --git a/src/components/backend-ai-resource-monitor.ts b/src/components/backend-ai-resource-monitor.ts
index ff94230fe1..5bbddb4c16 100644
--- a/src/components/backend-ai-resource-monitor.ts
+++ b/src/components/backend-ai-resource-monitor.ts
@@ -662,13 +662,15 @@ export default class BackendAiResourceMonitor extends BackendAIPage {
       <div id="scaling-group-select-box" class="layout horizontal center-justified ${
         this.direction
       }">
-      <backend-ai-react-resource-group-select @change=${({ detail: value }) => {
-        this.updateScalingGroup(true, {
-          target: {
-            value,
-          },
-        });
-      }}/>
+      <backend-ai-react-resource-group-select 
+        value=${this.scaling_group}
+        @change=${({ detail: value }) => {
+          this.updateScalingGroup(true, {
+            target: {
+              value,
+            },
+          });
+        }}/>
       </div>
       <div class="layout ${this.direction}-card flex wrap">
         <div id="resource-gauges" class="layout ${this.direction} ${