diff --git a/extensions/machine-learning/src/views/externalLanguages/addEditLanguageTab.ts b/extensions/machine-learning/src/views/externalLanguages/addEditLanguageTab.ts
index dc5ee7ac32..01d8ab1494 100644
--- a/extensions/machine-learning/src/views/externalLanguages/addEditLanguageTab.ts
+++ b/extensions/machine-learning/src/views/externalLanguages/addEditLanguageTab.ts
@@ -68,7 +68,7 @@ export class AddEditLanguageTab extends LanguageViewBase {
 	public get updatedData(): LanguageUpdateModel {
 		return {
 			language: {
-				name: this.languageName?.value || '',
+				name: this.languageName?.value as string || '',
 				contents: this._languageUpdateModel.language.contents
 			},
 			content: this.languageView?.updatedContent || this._languageUpdateModel.content,
diff --git a/extensions/machine-learning/src/views/externalLanguages/languageContentView.ts b/extensions/machine-learning/src/views/externalLanguages/languageContentView.ts
index 2efcde0622..28efebf3cc 100644
--- a/extensions/machine-learning/src/views/externalLanguages/languageContentView.ts
+++ b/extensions/machine-learning/src/views/externalLanguages/languageContentView.ts
@@ -146,10 +146,10 @@ export class LanguageContentView extends LanguageViewBase {
 
 	public get updatedContent(): mssql.ExternalLanguageContent {
 		return {
-			pathToExtension: this.extensionFile.value || '',
-			extensionFileName: this.extensionFileName.value || '',
-			parameters: this.parameters.value || '',
-			environmentVariables: this.envVariables.value || '',
+			pathToExtension: this.extensionFile.value as string || '',
+			extensionFileName: this.extensionFileName.value as string || '',
+			parameters: this.parameters.value as string || '',
+			environmentVariables: this.envVariables.value as string || '',
 			isLocalFile: this._isLocalPath || false,
 			platform: this._languageContent?.platform
 		};
diff --git a/extensions/notebook/src/dialog/managePackages/addNewPackageTab.ts b/extensions/notebook/src/dialog/managePackages/addNewPackageTab.ts
index 9b92217785..b26a3f7812 100644
--- a/extensions/notebook/src/dialog/managePackages/addNewPackageTab.ts
+++ b/extensions/notebook/src/dialog/managePackages/addNewPackageTab.ts
@@ -183,7 +183,7 @@ export class AddNewPackageTab {
 
 
 	private async doPackageInstall(): Promise<void> {
-		let packageName = this.newPackagesName.value;
+		let packageName = this.newPackagesName.value as string;
 		let packageVersion = this.newPackagesVersions.value as string;
 		if (!packageName || packageName.length === 0 ||
 			!packageVersion || packageVersion.length === 0) {
diff --git a/extensions/resource-deployment/src/ui/modelViewUtils.ts b/extensions/resource-deployment/src/ui/modelViewUtils.ts
index d6fce5834e..5c3f5e2283 100644
--- a/extensions/resource-deployment/src/ui/modelViewUtils.ts
+++ b/extensions/resource-deployment/src/ui/modelViewUtils.ts
@@ -1252,7 +1252,7 @@ function createAzureSubscriptionComponent(
 	}
 	subscriptionInputInfo.labelComponent = label;
 	context.fieldInfo.subFields!.push({
-		label: label.value!,
+		label: label.value! as string,
 		variableName: context.fieldInfo.subscriptionVariableName
 	});
 	context.onNewInputComponentCreated(context.fieldInfo.subscriptionVariableName || context.fieldInfo.label, {
@@ -1407,7 +1407,7 @@ function createAzureResourceGroupsComponent(
 	}
 	resourceGroupInputInfo.labelComponent = label;
 	context.fieldInfo.subFields!.push({
-		label: label.value!,
+		label: label.value! as string,
 		variableName: context.fieldInfo.resourceGroupVariableName
 	});
 	const rgValueChangedEmitter = new vscode.EventEmitter<void>();
@@ -1517,7 +1517,7 @@ async function processAzureLocationsField(context: AzureLocationsFieldContext):
 	context.fieldInfo.subFields = context.fieldInfo.subFields || [];
 	if (context.fieldInfo.locationVariableName) {
 		context.fieldInfo.subFields!.push({
-			label: label.value!,
+			label: label.value! as string,
 			variableName: context.fieldInfo.locationVariableName
 		});
 		context.onNewInputComponentCreated(context.fieldInfo.locationVariableName, locationInputInfo);
diff --git a/extensions/sql-migration/src/dashboard/sqlServerDashboard.ts b/extensions/sql-migration/src/dashboard/sqlServerDashboard.ts
index 193a55ff6f..6afc1d25d1 100644
--- a/extensions/sql-migration/src/dashboard/sqlServerDashboard.ts
+++ b/extensions/sql-migration/src/dashboard/sqlServerDashboard.ts
@@ -170,14 +170,14 @@ export class DashboardWidget {
 
 		const migrateButton = this.createTaskButton(view, migrateButtonMetadata);
 
-		const points = `•	${loc.PRE_REQ_1}
-•	${loc.PRE_REQ_2}
-•	${loc.PRE_REQ_3}`;
-
 		const preRequisiteListElement = view.modelBuilder.text().withProps({
-			value: points,
+			value: [
+				loc.PRE_REQ_1,
+				loc.PRE_REQ_2,
+				loc.PRE_REQ_3
+			],
 			CSSStyles: {
-				'padding-left': '15px',
+				'padding-left': '30px',
 				'margin-bottom': '5px',
 				'margin-top': '10px'
 			}
diff --git a/src/sql/azdata.d.ts b/src/sql/azdata.d.ts
index e341c2e1da..5b517580ec 100644
--- a/src/sql/azdata.d.ts
+++ b/src/sql/azdata.d.ts
@@ -3434,7 +3434,10 @@ declare module 'azdata' {
 	}
 
 	export interface TextComponentProperties extends ComponentProperties, TitledComponentProperties {
-		value?: string | undefined;
+		/**
+		 * Provide value to be displayed in the text component. An array of value will be displayed as an unordered list.
+		 */
+		value?: string | string[] | undefined;
 		links?: LinkArea[] | undefined;
 		description?: string | undefined;
 		requiredIndicator?: boolean | undefined;
diff --git a/src/sql/azdata.proposed.d.ts b/src/sql/azdata.proposed.d.ts
index 17b07141e1..5699343647 100644
--- a/src/sql/azdata.proposed.d.ts
+++ b/src/sql/azdata.proposed.d.ts
@@ -585,7 +585,9 @@ declare module 'azdata' {
 	 */
 	export enum TextType {
 		Normal = 'Normal',
-		Error = 'Error'
+		Error = 'Error',
+		UnorderedList = 'UnorderedList',
+		OrderedList = 'OrderedList'
 	}
 
 	export interface TextComponentProperties {
@@ -595,7 +597,7 @@ declare module 'azdata' {
 		 */
 		headingLevel?: HeadingLevel;
 		/**
-		 * The type to display the text as - used to determine the color of the text. Default is Normal.
+		 * Sets the type of text box to be displayed
 		 */
 		textType?: TextType;
 	}
diff --git a/src/sql/workbench/api/common/extHostModelView.ts b/src/sql/workbench/api/common/extHostModelView.ts
index 706d2fd395..19dd99c1d0 100644
--- a/src/sql/workbench/api/common/extHostModelView.ts
+++ b/src/sql/workbench/api/common/extHostModelView.ts
@@ -1350,10 +1350,10 @@ class TextComponentWrapper extends ComponentWrapper implements azdata.TextCompon
 		this.properties = {};
 	}
 
-	public get value(): string {
+	public get value(): string | string[] {
 		return this.properties['value'];
 	}
-	public set value(v: string) {
+	public set value(v: string | string[]) {
 		this.setProperty('value', v);
 	}
 
diff --git a/src/sql/workbench/api/common/sqlExtHostTypes.ts b/src/sql/workbench/api/common/sqlExtHostTypes.ts
index 2830c8001e..4e53faf150 100644
--- a/src/sql/workbench/api/common/sqlExtHostTypes.ts
+++ b/src/sql/workbench/api/common/sqlExtHostTypes.ts
@@ -897,5 +897,7 @@ export enum ButtonType {
 
 export enum TextType {
 	Normal = 'Normal',
-	Error = 'Error'
+	Error = 'Error',
+	UnorderedList = 'UnorderedList',
+	OrderedList = 'OrderedList'
 }
diff --git a/src/sql/workbench/browser/modelComponents/text.component.ts b/src/sql/workbench/browser/modelComponents/text.component.ts
index c8fc82aa25..df5cf0ccf0 100644
--- a/src/sql/workbench/browser/modelComponents/text.component.ts
+++ b/src/sql/workbench/browser/modelComponents/text.component.ts
@@ -22,7 +22,9 @@ import { errorForeground } from 'vs/platform/theme/common/colorRegistry';
 
 export enum TextType {
 	Normal = 'Normal',
-	Error = 'Error'
+	Error = 'Error',
+	UnorderedList = 'UnorderedList',
+	OrderedList = 'OrderedList'
 }
 
 const errorTextClass = 'error-text';
@@ -30,16 +32,30 @@ const errorTextClass = 'error-text';
 @Component({
 	selector: 'modelview-text',
 	template: `
-	<div *ngIf="showDiv;else noDiv" style="display:flex;flex-flow:row;align-items:center;" [style.width]="getWidth()" [style.height]="getHeight()">
-		<p [title]="title" [ngStyle]="this.CSSStyles" [attr.role]="ariaRole" [attr.aria-hidden]="ariaHidden"></p>
-		<div #textContainer id="textContainer"></div>
-		<span *ngIf="requiredIndicator" style="color:red;margin-left:5px;">*</span>
-		<div *ngIf="description" tabindex="0" class="modelview-text-tooltip" [attr.aria-label]="description" role="img">
-			<div class="modelview-text-tooltip-content" [innerHTML]="description"></div>
+	<div *ngIf="showList;else noList" [style.display]="display" [style.width]="getWidth()" [style.height]="getHeight()" [title]="title" [attr.role]="ariaRole" [attr.aria-hidden]="ariaHidden" [ngStyle]="this.CSSStyles">
+		<div *ngIf="isUnOrderedList;else orderedlist">
+			<ul style="padding-left:0px">
+				<li *ngFor="let v of value">{{v}}</li>
+			</ul>
 		</div>
+		<ng-template #orderedlist>
+			<ol style="padding-left:0px">
+				<li *ngFor="let v of value">{{v}}</li>
+			</ol>
+		</ng-template>
 	</div>
-	<ng-template #noDiv>
-		<div #textContainer id="textContainer" [style.display]="display" [style.width]="getWidth()" [style.height]="getHeight()" [title]="title" [attr.role]="ariaRole" [attr.aria-hidden]="ariaHidden" [ngStyle]="this.CSSStyles"></div>
+	<ng-template #noList>
+		<div *ngIf="showDiv;else noDiv" style="display:flex;flex-flow:row;align-items:center;" [style.width]="getWidth()" [style.height]="getHeight()">
+			<p [title]="title" [ngStyle]="this.CSSStyles" [attr.role]="ariaRole" [attr.aria-hidden]="ariaHidden"></p>
+			<div #textContainer id="textContainer"></div>
+			<span *ngIf="requiredIndicator" style="color:red;margin-left:5px;">*</span>
+			<div *ngIf="description" tabindex="0" class="modelview-text-tooltip" [attr.aria-label]="description" role="img">
+				<div class="modelview-text-tooltip-content" [innerHTML]="description"></div>
+			</div>
+		</div>
+		<ng-template #noDiv>
+			<div #textContainer id="textContainer" [style.display]="display" [style.width]="getWidth()" [style.height]="getHeight()" [title]="title" [attr.role]="ariaRole" [attr.aria-hidden]="ariaHidden" [ngStyle]="this.CSSStyles"></div>
+		</ng-template>
 	</ng-template>`
 })
 export default class TextComponent extends TitledComponent<azdata.TextComponentProperties> implements IComponent, OnDestroy, AfterViewInit {
@@ -71,12 +87,12 @@ export default class TextComponent extends TitledComponent<azdata.TextComponentP
 		this.layout();
 	}
 
-	public set value(newValue: string) {
-		this.setPropertyFromUI<string>((properties, value) => { properties.value = value; }, newValue);
+	public set value(newValue: string | string[]) {
+		this.setPropertyFromUI<string | string[]>((properties, value) => { properties.value = value; }, newValue);
 	}
 
-	public get value(): string {
-		return this.getPropertyOrDefault<string>((props) => props.value, '');
+	public get value(): string | string[] {
+		return this.getPropertyOrDefault<string | string[]>((props) => props.value, undefined);
 	}
 
 	public set description(newValue: string) {
@@ -104,13 +120,29 @@ export default class TextComponent extends TitledComponent<azdata.TextComponentP
 	}
 
 	public get textType(): azdata.TextType | undefined {
-		return this.getPropertyOrDefault<azdata.TextType | undefined>(props => props.textType, undefined);
+		let textType = this.getPropertyOrDefault<azdata.TextType | undefined>(props => props.textType, undefined);
+		if (!textType && typeof this.value !== 'string') {
+			textType = (this.value) ? TextType.UnorderedList : undefined;
+		}
+		// Throwing an error when a string value is provided for list.
+		if ((textType === TextType.OrderedList || textType === TextType.UnorderedList) && typeof this.value === 'string') {
+			throw new Error(`Invalid type of value provided for the textType ${textType}`);
+		}
+		return textType;
 	}
 
 	public set textType(newValue: azdata.TextType | undefined) {
 		this.setPropertyFromUI<azdata.TextType | undefined>((properties, value) => { properties.textType = value; }, newValue);
 	}
 
+	public get isUnOrderedList(): boolean | undefined {
+		return this.textType === TextType.UnorderedList;
+	}
+
+	public get showList(): boolean | undefined {
+		return (this.textType === TextType.UnorderedList || this.textType === TextType.OrderedList);
+	}
+
 	public override setProperties(properties: { [key: string]: any; }): void {
 		super.setProperties(properties);
 		this.updateText();
@@ -123,6 +155,9 @@ export default class TextComponent extends TitledComponent<azdata.TextComponentP
 	}
 
 	public updateText(): void {
+		if (typeof this.value !== 'string') {
+			return;
+		}
 		DOM.clearNode((<HTMLElement>this.textContainer.nativeElement));
 		const links = this.getPropertyOrDefault<azdata.LinkArea[]>((props) => props.links, []);
 		// The text may contain link placeholders so go through and create those and insert them as needed now
@@ -137,7 +172,7 @@ export default class TextComponent extends TitledComponent<azdata.TextComponentP
 
 			// First insert any text from the start of the current string fragment up to the placeholder
 			let curText = text.slice(0, placeholderIndex);
-			if (curText) {
+			if (curText && typeof text === 'string') {
 				const textElement = this.createTextElement();
 				textElement.innerText = text.slice(0, placeholderIndex);
 				(<HTMLElement>this.textContainer.nativeElement).appendChild(textElement);
@@ -163,7 +198,7 @@ export default class TextComponent extends TitledComponent<azdata.TextComponentP
 		}
 
 		// If we have any text left over now insert that in directly
-		if (text) {
+		if (text && typeof text === 'string') {
 			const textElement = this.createTextElement();
 			textElement.innerText = text;
 			(<HTMLElement>this.textContainer.nativeElement).appendChild(textElement);