diff --git a/extensions/arc/src/test/ui/components/radioOptionsGroup.test.ts b/extensions/arc/src/test/ui/components/radioOptionsGroup.test.ts
index 69297eeae1..196b4a8129 100644
--- a/extensions/arc/src/test/ui/components/radioOptionsGroup.test.ts
+++ b/extensions/arc/src/test/ui/components/radioOptionsGroup.test.ts
@@ -52,9 +52,6 @@ describe('radioOptionsGroup', function (): void {
 		const label = radioOptionsGroup.items[0] as azdata.TextComponent;
 		should(label.value).not.be.undefined();
 		label.value!.should.deepEqual(loc.loadingClusterContextsError(loadingError));
-		should(label.CSSStyles).not.be.undefined();
-		should(label.CSSStyles!.color).not.be.undefined();
-		label.CSSStyles!.color.should.equal('Red');
 	});
 
 	describe('getters and setters', async () => {
diff --git a/extensions/arc/src/ui/components/radioOptionsGroup.ts b/extensions/arc/src/ui/components/radioOptionsGroup.ts
index 05b68beefb..a491493ab3 100644
--- a/extensions/arc/src/ui/components/radioOptionsGroup.ts
+++ b/extensions/arc/src/ui/components/radioOptionsGroup.ts
@@ -67,7 +67,7 @@ export class RadioOptionsGroup {
 			this.component().loadingCompletedText = this._loadingCompleteMessage;
 		}
 		catch (e) {
-			const errorLabel = this._modelBuilder.text().withProps({ value: loc.loadingClusterContextsError(e), CSSStyles: { 'color': 'Red' } }).component();
+			const errorLabel = this._modelBuilder.text().withProps({ value: loc.loadingClusterContextsError(e), textType: azdata.TextType.Error }).component();
 			this._divContainer.addItem(errorLabel);
 			this.component().loadingCompletedText = this._loadingCompleteErrorMessage(e);
 		}