diff --git a/helper/src/components/addonsTab.js b/helper/src/components/addonsTab.js
index 9c2e12729..af3580f58 100644
--- a/helper/src/components/addonsTab.js
+++ b/helper/src/components/addonsTab.js
@@ -2,10 +2,8 @@
 import React from 'react';
 import { TextField,Link, Separator, Dropdown, Slider, Stack, Text, Label, ChoiceGroup, Checkbox, MessageBar, MessageBarType, SpinButton } from '@fluentui/react';
 import { adv_stackstyle, hasError, getError } from './common'
-import { PreviewDialog } from  './previewDialog'
 
-
-export default function ({ tabValues, updateFn, featureFlag, invalidArray }) {
+export default function ({ tabValues, updateFn, featureFlag, invalidArray,showPreviewModal }) {
     const { cluster, addons, net } = tabValues
     const osmFeatureFlag = featureFlag.includes('osm')
     const wiFeatureFlag = featureFlag.includes('workloadId')
@@ -63,13 +61,12 @@ export default function ({ tabValues, updateFn, featureFlag, invalidArray }) {
                 <Checkbox
                 disabled={addons.registry !== "Premium"}
                 checked={addons.acrUntaggedRetentionPolicyEnabled}
-                onChange={(ev, v) => updateFn("acrUntaggedRetentionPolicyEnabled", v)}
+                onChange={(ev, v) => {updateFn("acrUntaggedRetentionPolicyEnabled", v); showPreviewModal(ev,"https://learn.microsoft.com/en-us/azure/container-registry/container-registry-retention-policy"); }}
                 label={<Text>Create untagged image retention policy (<a target="_new" href="https://docs.microsoft.com/azure/container-registry/container-registry-content-trust">docs</a>)
                  </Text>} />
                 <MessageBar styles={{ root: { marginTop: '10px', width: '700px' } }} messageBarType={MessageBarType.warning}>Deleting untagged images will remove them from your ACR after a defined period (<a target="_new" href="https://docs.microsoft.com/en-us/azure/container-registry/container-registry-retention-policy">docs</a>) (*preview)</MessageBar>
                 {addons.acrUntaggedRetentionPolicyEnabled && (
                     <div>
-                    <PreviewDialog previewLink={"https://docs.microsoft.com/azure/container-registry/container-registry-content-trust"} isDialogHidden={addons.acrUntaggedRetentionPolicyEnabled}/>
                     <Stack.Item style={{ marginTop: '10px', marginLeft: "50px"}}>
                         <Slider label="Days to retain untagged images for" min={0} max={365} step={1} defaultValue={addons.acrUntaggedRetentionPolicy} showValue={true}
                             onChange={(v) => updateFn("acrUntaggedRetentionPolicy", v)}
@@ -110,16 +107,12 @@ export default function ({ tabValues, updateFn, featureFlag, invalidArray }) {
                         { key: 'nginx', text: 'Nginx ingress controller' },
                         { key: 'traefik', text: 'Traefik ingress controller' }
                     ]}
-                    onChange={(ev, { key }) => updateFn("ingress", key)}
+                    onChange={(ev, { key }) => {updateFn("ingress", key); key === "warNginx" && showPreviewModal(ev,"https://docs.microsoft.com/en-us/azure/aks/web-app-routing"); }}
                 />
                 {hasError(invalidArray, 'ingress') &&
                     <MessageBar styles={{ root: { marginTop: '20px', marginLeft: '50px', width: '700px' } }} messageBarType={MessageBarType.error}>{getError(invalidArray, 'ingress')}</MessageBar>
                 }
             </Stack.Item>
-            { addons.ingress === "warNginx" &&
-                (
-                <PreviewDialog previewLink={"https://docs.microsoft.com/en-us/azure/aks/web-app-routing"}/>
-                )}
             <Stack.Item align="center" styles={{ root: { maxWidth: '700px', display: (addons.ingress === "none" ? "none" : "block") } }} >
                 <Stack tokens={{ childrenGap: 15 }}>
                     {addons.ingress === "nginx" && false &&
@@ -292,16 +285,12 @@ export default function ({ tabValues, updateFn, featureFlag, invalidArray }) {
                         decrementButtonAriaLabel="Decrease value by 1"
                         styles={{ root: { marginTop: '15px'}}}
                     />
-                    <Checkbox styles={{ root: { marginTop: '10px', marginBottom: '10px'}}} checked={addons.containerLogsV2} onChange={(ev, v) => setContainerLogsV2(v)} label={<Text>Enable the ContainerLogV2 schema (<Link target="_target" href="https://learn.microsoft.com/en-us/azure/azure-monitor/containers/container-insights-logging-v2">docs</Link>)</Text>} />
+
+                    <Checkbox styles={{ root: { marginTop: '10px', marginBottom: '10px'}}} checked={addons.containerLogsV2} onChange={(ev, v) => setContainerLogsV2(v)} label={<Text>Enable the ContainerLogV2 schema (<Link target="_target" href="https://learn.microsoft.com/en-us/azure/azure-monitor/containers/container-insights-logging-v2">docs</Link>) (*preview)</Text>} />
 
                     <MessageBar messageBarType={MessageBarType.warning}>Enable the ContainerLogV2 (successor for ContainerLog) schema for additional data capture and friendlier schema. Disabling this feature will also disable features that are dependent on it (e.g. Basic Logs).</MessageBar>
 
-                    <Checkbox
-                        styles={{ root: { marginTop: '10px', marginBottom: '10px'}}}
-                        checked={addons.containerLogsV2BasicLogs}
-                        onChange={(ev, v) => setContainerLogV2BasicLogs(v)}
-                        label={<Text>Set Basic Logs for ContainerLogV2 (<Link target="_target" href="https://learn.microsoft.com/en-us/azure/azure-monitor/logs/basic-logs-configure?tabs=portal-1%2Cportal-2">docs</Link>)</Text>}
-                    />
+                    <Checkbox styles={{ root: { marginTop: '10px', marginBottom: '10px'}}} checked={addons.containerLogsV2BasicLogs} onChange={(ev, v) => setContainerLogV2BasicLogs(v)} label={<Text>Set Basic Logs for ContainerLogV2 (<Link target="_target" href="https://learn.microsoft.com/en-us/azure/azure-monitor/logs/basic-logs-configure?tabs=portal-1%2Cportal-2">docs</Link>)</Text>} />
                     <MessageBar messageBarType={MessageBarType.warning}>Enable the Basic log data plan to cost optimise on log ingestion at the cost of a lower retention period, some log query operations that are no longer available and no alerts. Enabling Basic Logs for ContainerLogsV2 has a dependency on the ContainerLogsV2 schema and thus enabling this capability will automatically enable ContainerLogsV2. In addition, the ContainerLogsV2 table's retention is fixed at eight days. More information available via the provided docs link.</MessageBar>
 
                     <Checkbox styles={{ root: { marginTop: '10px'}}} checked={addons.createAksMetricAlerts} onChange={(ev, v) => updateFn("createAksMetricAlerts", v)} label={<Text>Create recommended metric alerts, enable you to monitor your system resource when it's running on peak capacity or hitting failure rates (<Link target="_target" href="https://azure.microsoft.com/en-us/updates/ci-recommended-alerts/">docs</Link>) </Text>} />
@@ -520,13 +509,7 @@ export default function ({ tabValues, updateFn, featureFlag, invalidArray }) {
                     KEDA : Enable Kubernetes Event-driven Autoscaling (KEDA) on the AKS Cluster (<a target="_new" href="https://learn.microsoft.com/en-us/azure/aks/keda-deploy-add-on-arm#prerequisites">*preview</a>)
                     (<a target="_new" href="https://docs.microsoft.com/en-us/azure/aks/keda-about">docs</a>)
                 </Label>
-                <Checkbox styles={{ root: { marginLeft: '50px' } }} checked={addons.kedaAddon} onChange={(ev, v) => updateFn("kedaAddon", v, 'https://learn.microsoft.com/azure/aks/keda-deploy-add-on-arm#prerequisites')} label="Install the KEDA AddOn" />
-                {
-                    addons.kedaAddon &&
-                    (
-                        <PreviewDialog previewLink={"https://learn.microsoft.com/azure/aks/keda-deploy-add-on-arm#prerequisites"}/>
-                    )
-                }
+                <Checkbox styles={{ root: { marginLeft: '50px' } }} checked={addons.kedaAddon} onChange={(ev, v) => {updateFn("kedaAddon", v, 'https://learn.microsoft.com/azure/aks/keda-deploy-add-on-arm#prerequisites'); showPreviewModal(ev,"https://learn.microsoft.com/azure/aks/keda-deploy-add-on-arm#prerequisites")}} label="Install the KEDA AddOn" />
             </Stack.Item>
 
             <Separator className="notopmargin" />
@@ -540,12 +523,8 @@ export default function ({ tabValues, updateFn, featureFlag, invalidArray }) {
                   styles={{ root: { marginLeft: '50px' } }}
                   inputProps={{ "data-testid": "addons-asm-Checkbox"}}
                   checked={addons.serviceMeshProfile}
-                  onChange={(ev, v) => updateFn("serviceMeshProfile", v ? "Istio" : "")}
+                  onChange={(ev, v) => { updateFn("serviceMeshProfile", v ? "Istio" : ""); showPreviewModal(ev, "https://learn.microsoft.com/en-us/azure/aks/istio-deploy-addon");}}
                   label="Install the Istio Service Mesh AddOn (Preview)" />
-                {
-                    addons.serviceMeshProfile &&
-                    ( <PreviewDialog previewLink={"https://learn.microsoft.com/en-us/azure/aks/istio-deploy-addon"}/> )
-                }
             </Stack.Item>
 
             <Separator className="notopmargin" />
@@ -556,11 +535,8 @@ export default function ({ tabValues, updateFn, featureFlag, invalidArray }) {
                     (<a target="_new" href="https://learn.microsoft.com/en-us/azure/aks/workload-identity-deploy-cluster">*preview</a>)
                     (<a target="_new" href="https://github.com/Azure/azure-workload-identity">project</a>)
                 </Label>
-                <Checkbox styles={{ root: { marginLeft: '50px' } }} inputProps={{ "data-testid": "addons-workloadIdentity-Checkbox"}} checked={addons.workloadIdentity} onChange={(ev, v) => updateFn("workloadIdentity", v)} label="Install Workload Identity" />
-                {
-                    addons.workloadIdentity &&
-                    ( <PreviewDialog previewLink={"https://learn.microsoft.com/en-us/azure/aks/workload-identity-deploy-cluster"}/> )
-                }
+                <Checkbox styles={{ root: { marginLeft: '50px' } }} inputProps={{ "data-testid": "addons-workloadIdentity-Checkbox"}} checked={addons.workloadIdentity} onChange={(ev, v) => {updateFn("workloadIdentity", v);showPreviewModal(ev,"https://learn.microsoft.com/en-us/azure/aks/workload-identity-deploy-cluster")}} label="Install Workload Identity" />
+
             </Stack.Item>
 
             <Separator className="notopmargin" />
diff --git a/helper/src/components/portalnav.js b/helper/src/components/portalnav.js
index dfd3db693..1d09408e4 100644
--- a/helper/src/components/portalnav.js
+++ b/helper/src/components/portalnav.js
@@ -14,6 +14,7 @@ import AppsTab from './appsTab'
 
 import { appInsights } from '../index.js'
 import { initializeIcons } from '@fluentui/react/lib/Icons';
+import { PreviewDialog } from './previewDialog';
 initializeIcons();
 
 
@@ -118,6 +119,14 @@ export default function PortalNav({ config }) {
   const [tabValues, setTabValues] = useState(initTabValues(selected, defaults, true))
   // Field Selections - Used to keep track of the last FieldSelections monitored by App Insights to prevent logging the same entry continuously
   const [lastAIUpdated, setLastAIUpdated] = useState ({tab: null, field: null})
+  const [show, setShow] = useState(false)
+  const [previewLink, setPreviewLink] = useState("")
+
+  const showPreviewModal = (e,previewLink) => {
+    if (!e.currentTarget.checked) return;
+    setShow(true);
+    setPreviewLink(previewLink)
+  };
 
   function initSelected (currentPreset) {
     return {
@@ -435,6 +444,7 @@ export default function PortalNav({ config }) {
   return (
     <ThemeProvider theme={{ semanticColors, palette }}>
       <main id="mainContent" className="wrapper">
+      <PreviewDialog onClose={ ()=> setShow(false)} show={show} previewLink={previewLink}></PreviewDialog>
         <Header presets={presets} selectedPreset={selected.preset} setPresets={presetChanged} featureFlag={featureFlag} />
 
         <Stack verticalFill styles={{ root: { width: '960px', margin: '0 auto', color: 'grey' } }}>
@@ -451,7 +461,7 @@ export default function PortalNav({ config }) {
               <ClusterTab defaults={defaults} tabValues={tabValues} featureFlag={featureFlag} updateFn={(field, value) => mergeState("cluster", field, value)} invalidArray={invalidArray['cluster']} />
             </PivotItem>
             <PivotItem headerText={tabLabels.addons} itemKey="addons" onRenderItemLink={(a, b) => _customRenderer('addons', a, b)} >
-              <AddonsTab tabValues={tabValues} featureFlag={featureFlag} updateFn={(field, value, previewLink) => mergeState("addons", field, value, previewLink)} invalidArray={invalidArray['addons']} />
+              <AddonsTab tabValues={tabValues} featureFlag={featureFlag} updateFn={(field, value) => mergeState("addons", field, value)} invalidArray={invalidArray['addons']} showPreviewModal={showPreviewModal} />
             </PivotItem>
             <PivotItem headerText={tabLabels.net} itemKey="net" onRenderItemLink={(a, b) => _customRenderer('net', a, b)}>
               <NetworkTab defaults={defaults} tabValues={tabValues} featureFlag={featureFlag} updateFn={(field, value) => mergeState("net", field, value)} invalidArray={invalidArray['net']} />
diff --git a/helper/src/components/previewDialog.js b/helper/src/components/previewDialog.js
index a16354542..37ba6a890 100644
--- a/helper/src/components/previewDialog.js
+++ b/helper/src/components/previewDialog.js
@@ -1,34 +1,28 @@
 import React from "react";
-import { useBoolean } from "@fluentui/react-hooks";
-import { Dialog, DialogType, DialogFooter } from '@fluentui/react/lib/Dialog';
-import { PrimaryButton,DefaultButton } from '@fluentui/react/lib/Button';
+import { Dialog, DialogType, DialogFooter } from "@fluentui/react/lib/Dialog";
+import { PrimaryButton} from "@fluentui/react/lib/Button";
 
-export function PreviewDialog({previewLink}) {
-
-  const [hideDialog, { toggle: toggleHideDialog }] = useBoolean(false);
+export function PreviewDialog({ previewLink, onClose, show}) {
 
   const dialogContentProps = {
     type: DialogType.normal,
-    title: 'Preview Feature',
-    closeButtonAriaLabel: 'Close',
-    subText: `Review the instructions on this page ${previewLink} to enable the feature `,
+    title: "Preview Feature",
+    closeButtonAriaLabel: "Close",
   };
-
-  function _openLink() {
-    window.open(`${previewLink}`, '_blank', 'noreferrer');
-  }
-
+  if(!show){
+    return null;
+}
   return (
-    <div>
-      <Dialog
-      hidden={hideDialog}
-      onDismiss={toggleHideDialog}
-      dialogContentProps={dialogContentProps}>
-      <DialogFooter>
-        <PrimaryButton onClick={toggleHideDialog} text="Close" />
-        <DefaultButton onClick={_openLink} text="Open Link in New Tab" />
-      </DialogFooter>
-      </Dialog>
-    </div>
+    <>
+          <Dialog
+            hidden={false}
+            onDismiss={onClose}
+            dialogContentProps={dialogContentProps} >
+            <div>Review the instructions on this <a href={previewLink} target='_blank' rel="noreferrer" >page</a> to enable the feature</div>
+            <DialogFooter>
+              <PrimaryButton onClick={onClose} text="Close" />
+            </DialogFooter>
+          </Dialog>
+    </>
   );
 }