diff --git a/npm/ng-packs/packages/feature-management/src/lib/components/feature-management-tab/feature-management-tab.component.html b/npm/ng-packs/packages/feature-management/src/lib/components/feature-management-tab/feature-management-tab.component.html
index 6688fc5511..aaad786e93 100644
--- a/npm/ng-packs/packages/feature-management/src/lib/components/feature-management-tab/feature-management-tab.component.html
+++ b/npm/ng-packs/packages/feature-management/src/lib/components/feature-management-tab/feature-management-tab.component.html
@@ -1,26 +1,23 @@
-<h2>{{ 'AbpFeatureManagement::Menu:FeatureManagement' | abpLocalization }}</h2>
-
-<hr class="my-2" />
 <p class="pt-2 text-wrap">{{ 'AbpFeatureManagement::ManageHostFeaturesText' | abpLocalization }}</p>
 
 <button class="btn btn-primary" type="button" (click)="openFeaturesModal()">
   <i class="me-1 fa fa-cog" aria-hidden="true"></i>
   {{ 'AbpFeatureManagement::ManageHostFeatures' | abpLocalization }}
 </button>
-<ng-container *ngIf="visibleFeatures">
+@if (visibleFeatures) {
   <abp-feature-management
-  *abpReplaceableTemplate="{
-    inputs: {
-      providerName: { value: 'T' },
-      providerKey: { value: providerKey },
-      visible: { value: visibleFeatures, twoWay: true }
-    },
-    outputs: { visibleChange: onVisibleFeaturesChange },
-    componentKey: 'FeatureManagement.FeatureManagementComponent'
-  }"
-  [(visible)]="visibleFeatures"
-  providerName="T"
-  [providerKey]="providerKey"
+    *abpReplaceableTemplate="{
+      inputs: {
+        providerName: { value: 'T' },
+        providerKey: { value: providerKey },
+        visible: { value: visibleFeatures, twoWay: true }
+      },
+      outputs: { visibleChange: onVisibleFeaturesChange },
+      componentKey: 'FeatureManagement.FeatureManagementComponent'
+    }"
+    [(visible)]="visibleFeatures"
+    providerName="T"
+    [providerKey]="providerKey"
   >
-</abp-feature-management>
-</ng-container>
+  </abp-feature-management>
+}
diff --git a/npm/ng-packs/packages/setting-management/config/src/lib/components/email-setting-group/email-setting-group.component.html b/npm/ng-packs/packages/setting-management/config/src/lib/components/email-setting-group/email-setting-group.component.html
index 72ff2b37d1..bc944af045 100644
--- a/npm/ng-packs/packages/setting-management/config/src/lib/components/email-setting-group/email-setting-group.component.html
+++ b/npm/ng-packs/packages/setting-management/config/src/lib/components/email-setting-group/email-setting-group.component.html
@@ -1,93 +1,95 @@
-<h2>{{ 'AbpSettingManagement::Menu:Emailing' | abpLocalization }}</h2>
-
-<hr class="my-2" />
-
-<form *ngIf="form" [formGroup]="form" class="py-2 abp-md-form"  (ngSubmit)="submit()" [validateOnSubmit]="true">
-  <div class="mb-3 form-group">
-    <label class="form-label"
-      >{{ 'AbpSettingManagement::DefaultFromDisplayName' | abpLocalization
-      }}<span class="ms-1">*</span></label
-    >
-    <input type="text" class="form-control" formControlName="defaultFromDisplayName" />
-  </div>
-  <div class="mb-3 form-group">
-    <label class="form-label"
-      >{{ 'AbpSettingManagement::DefaultFromAddress' | abpLocalization
-      }}<span class="ms-1">*</span></label
-    >
-    <input type="text" class="form-control" formControlName="defaultFromAddress" />
-  </div>
-  <div class="mb-3 form-group">
-    <label class="form-label">{{ 'AbpSettingManagement::SmtpHost' | abpLocalization }}</label>
-    <input type="text" class="form-control" formControlName="smtpHost" />
-  </div>
-  <div class="mb-3 form-group">
-    <label class="form-label"
-      >{{ 'AbpSettingManagement::SmtpPort' | abpLocalization }}<span class="ms-1">*</span></label
-    >
-    <input type="number" class="form-control" formControlName="smtpPort" />
-  </div>
-
-  <div class="form-check mb-2">
-    <input
-      type="checkbox"
-      id="smtp-enable-ssl"
-      class="form-check-input"
-      formControlName="smtpEnableSsl"
-    />
-    <label class="form-check-label" for="smtp-enable-ssl">{{
-      'AbpSettingManagement::SmtpEnableSsl' | abpLocalization
-    }}</label>
-  </div>
-  <div class="form-check mb-2">
-    <input
-      type="checkbox"
-      id="smtp-use-default-credentials"
-      class="form-check-input"
-      formControlName="smtpUseDefaultCredentials"
-    />
-    <label class="form-check-label" for="smtp-use-default-credentials">{{
-      'AbpSettingManagement::SmtpUseDefaultCredentials' | abpLocalization
-    }}</label>
-  </div>
-
-  <div
-    [@collapse]="{
-      value: form.get('smtpUseDefaultCredentials')?.value ? 'collapsed' : 'expanded',
-      params: { time: '200ms', easing: 'linear' }
-    }"
-  >
+@if (form) {
+  <form [formGroup]="form" class="py-2 abp-md-form" (ngSubmit)="submit()" [validateOnSubmit]="true">
     <div class="mb-3 form-group">
-      <label class="form-label">{{ 'AbpSettingManagement::SmtpDomain' | abpLocalization }}</label>
-      <input type="text" class="form-control" formControlName="smtpDomain" />
+      <label class="form-label"
+        >{{ 'AbpSettingManagement::DefaultFromDisplayName' | abpLocalization
+        }}<span class="ms-1">*</span></label
+      >
+      <input type="text" class="form-control" formControlName="defaultFromDisplayName" />
     </div>
-
     <div class="mb-3 form-group">
-      <label class="form-label">{{ 'AbpSettingManagement::SmtpUserName' | abpLocalization }}</label>
-      <input type="text" class="form-control" formControlName="smtpUserName" />
+      <label class="form-label"
+        >{{ 'AbpSettingManagement::DefaultFromAddress' | abpLocalization
+        }}<span class="ms-1">*</span></label
+      >
+      <input type="text" class="form-control" formControlName="defaultFromAddress" />
+    </div>
+    <div class="mb-3 form-group">
+      <label class="form-label">{{ 'AbpSettingManagement::SmtpHost' | abpLocalization }}</label>
+      <input type="text" class="form-control" formControlName="smtpHost" />
+    </div>
+    <div class="mb-3 form-group">
+      <label class="form-label"
+        >{{ 'AbpSettingManagement::SmtpPort' | abpLocalization }}<span class="ms-1">*</span></label
+      >
+      <input type="number" class="form-control" formControlName="smtpPort" />
     </div>
 
-    <div class="form-group">
-      <label class="form-label">{{ 'AbpSettingManagement::SmtpPassword' | abpLocalization }}</label>
-      <input type="password" class="form-control" formControlName="smtpPassword" />
+    <div class="form-check mb-2">
+      <input
+        type="checkbox"
+        id="smtp-enable-ssl"
+        class="form-check-input"
+        formControlName="smtpEnableSsl"
+      />
+      <label class="form-check-label" for="smtp-enable-ssl">{{
+        'AbpSettingManagement::SmtpEnableSsl' | abpLocalization
+      }}</label>
+    </div>
+    <div class="form-check mb-2">
+      <input
+        type="checkbox"
+        id="smtp-use-default-credentials"
+        class="form-check-input"
+        formControlName="smtpUseDefaultCredentials"
+      />
+      <label class="form-check-label" for="smtp-use-default-credentials">{{
+        'AbpSettingManagement::SmtpUseDefaultCredentials' | abpLocalization
+      }}</label>
     </div>
-  </div>
 
-  <hr />
+    <div
+      [@collapse]="{
+        value: form.get('smtpUseDefaultCredentials')?.value ? 'collapsed' : 'expanded',
+        params: { time: '200ms', easing: 'linear' }
+      }"
+    >
+      <div class="mb-3 form-group">
+        <label class="form-label">{{ 'AbpSettingManagement::SmtpDomain' | abpLocalization }}</label>
+        <input type="text" class="form-control" formControlName="smtpDomain" />
+      </div>
+
+      <div class="mb-3 form-group">
+        <label class="form-label">{{
+          'AbpSettingManagement::SmtpUserName' | abpLocalization
+        }}</label>
+        <input type="text" class="form-control" formControlName="smtpUserName" />
+      </div>
+
+      <div class="form-group">
+        <label class="form-label">{{
+          'AbpSettingManagement::SmtpPassword' | abpLocalization
+        }}</label>
+        <input type="password" class="form-control" formControlName="smtpPassword" />
+      </div>
+    </div>
 
-  <abp-button buttonType="submit" iconClass="fa fa-save">
-    {{ 'AbpSettingManagement::Save' | abpLocalization }}
-  </abp-button>
-  <button
-    *abpPermission="emailingPolicy"
-    type="button"
-    (click)="openSendEmailModal()"
-    class="btn btn-primary mx-2"
-  >
-    <i class="fa f-send" aria-hidden="true"></i>
-    {{ 'AbpSettingManagement::SendTestEmail' | abpLocalization }}
-  </button>
-</form>
+    <hr />
+
+    <abp-button buttonType="submit" iconClass="fa fa-save">
+      {{ 'AbpSettingManagement::Save' | abpLocalization }}
+    </abp-button>
+    <button
+      *abpPermission="emailingPolicy"
+      type="button"
+      (click)="openSendEmailModal()"
+      class="btn btn-primary mx-2"
+    >
+      <i class="fa f-send" aria-hidden="true"></i>
+      {{ 'AbpSettingManagement::SendTestEmail' | abpLocalization }}
+    </button>
+  </form>
+}
 
 <abp-modal [(visible)]="isEmailTestModalOpen" [options]="modalSize">
   <ng-template #abpHeader>