diff --git a/src/ui_ng/lib/src/create-edit-rule/create-edit-rule.component.html b/src/ui_ng/lib/src/create-edit-rule/create-edit-rule.component.html
index 773516dcb..c312f8714 100644
--- a/src/ui_ng/lib/src/create-edit-rule/create-edit-rule.component.html
+++ b/src/ui_ng/lib/src/create-edit-rule/create-edit-rule.component.html
@@ -2,145 +2,153 @@
   <h3 class="modal-title">{{headerTitle | translate}}</h3>
   <hbr-inline-alert class="modal-title" (confirmEvt)="confirmCancel($event)"></hbr-inline-alert>
   <div class="modal-body" style="max-height: 85vh;">
-   <clr-alert [hidden]='!deletedLabelCount' [clrAlertType]="'alert-warning'"  [clrAlertSizeSmall]="true" [clrAlertClosable]="false" [(clrAlertClosed)]="alertClosed">
-    <div class="alert-item">
-     <span class="alert-text">{{deletedLabelInfo}}</span>
-     <div class="alert-actions">
-      <a class="alert-action" (click)=" alertClosed = true">{{'REPLICATION.ACKNOWLEDGE' | translate}}</a>
-     </div>
-    </div>
-   </clr-alert>
-    <form [formGroup]="ruleForm"  novalidate>
-     <section class="form-block">
-      <div class="form-group form-group-override">
-       <label class="form-group-label-override required">{{'REPLICATION.NAME' | translate}}</label>
-       <label aria-haspopup="true" role="tooltip" class="tooltip tooltip-validation tooltip-md tooltip-bottom-left"
-              [class.invalid]='(ruleForm.controls.name.touched && ruleForm.controls.name.invalid) || !isRuleNameValid'>
-        <input type="text" id="ruleName" pattern="^[a-z0-9]+(?:[._-][a-z0-9]+)*$" class="inputWidth" required maxlength="255" formControlName="name" #ruleName (keyup)='checkRuleName()' autocomplete="off">
-        <span class="tooltip-content">{{ruleNameTooltip | translate}}</span>
-       </label><span class="spinner spinner-inline spinner-pos" [hidden]="!inNameChecking"></span>
-      </div>
-      <!--Description-->
-      <div class="form-group form-group-override">
-       <label class="form-group-label-override">{{'REPLICATION.DESCRIPTION' | translate}}</label>
-       <textarea type="text" id="ruleDescription" class="inputWidth" row= 3; formControlName="description"></textarea>
-      </div>
-      <!--Projects-->
-      <div class="form-group form-group-override">
-       <label class="form-group-label-override required">{{'REPLICATION.SOURCE_PROJECT' | translate}}</label>
-       <div formArrayName="projects">
-        <div class="projectInput inputWidth" *ngFor="let project of projects.controls; let i= index" [formGroupName]="i" (mouseleave)="leaveInput()">
-         <input *ngIf="!projectId" formControlName="name" type="text" class="inputWidth"  value="name" required
-                pattern="^[a-z0-9]+(?:[._-][a-z0-9]+)*$" (keyup)='handleValidation()' (focus)="focusClear($event)" autocomplete="off">
-         <input *ngIf="projectId" formControlName="name" type="text"  class="inputWidth"  value="name" readonly>
-         <div class="selectBox inputWidth"  [style.display]="selectedProjectList.length ? 'block' : 'none'" >
-          <ul>
-           <li *ngFor="let project of selectedProjectList" (click)="selectedProjectName(project?.name)">{{project?.name}}</li>
-          </ul>
-         </div>
+    <clr-alert [hidden]='!deletedLabelCount' [clrAlertType]="'alert-warning'" [clrAlertSizeSmall]="true" [clrAlertClosable]="false"
+      [(clrAlertClosed)]="alertClosed">
+      <div class="alert-item">
+        <span class="alert-text">{{deletedLabelInfo}}</span>
+        <div class="alert-actions">
+          <a class="alert-action" (click)=" alertClosed = true">{{'REPLICATION.ACKNOWLEDGE' | translate}}</a>
         </div>
-       </div>
-       <label *ngIf="noProjectInfo.length != 0" class="colorRed alertLabel">{{noProjectInfo | translate}}</label>
       </div>
-    
-    <!--images/Filter-->
-      <div class="form-group form-group-override">
-       <label class="form-group-label-override">{{'REPLICATION.SOURCE_IMAGES_FILTER' | translate}}</label>
-       <div formArrayName="filters">
-        <div class="filterSelect" *ngFor="let filter of filters.controls; let i=index">
-         <div [formGroupName]="i">
-          <div class="select floatSetPar">
-           <select formControlName="kind" #selectedValue (change)="filterChange($event, selectedValue.value)"  id="{{i}}" name="{{filterListData[i]?.name}}">
-            <option *ngFor="let opt of filterListData[i]?.options;" value="{{opt}}">{{opt}}</option>
-           </select>
-          </div>
-          <label aria-haspopup="true" role="tooltip" class="tooltip tooltip-validation tooltip-md tooltip-bottom-left"
-                 [class.invalid]='(ruleForm.controls.filters.controls[i].controls.value.dirty || ruleForm.controls.filters.controls[i].controls.value.touched) && ruleForm.controls.filters.controls[i].controls.value.invalid'>
-           <input type="text" #filterValue required size="14" formControlName="value"  [attr.disabled]="(filterListData[i]?.name=='label') ?'' : null">
-           <span class="tooltip-content">{{'TOOLTIP.EMPTY' | translate}}</span>
+    </clr-alert>
+    <form [formGroup]="ruleForm" novalidate>
+      <section class="form-block">
+        <div class="form-group form-group-override">
+          <label class="form-group-label-override required">{{'REPLICATION.NAME' | translate}}</label>
+          <label aria-haspopup="true" role="tooltip" class="tooltip tooltip-validation tooltip-md tooltip-bottom-left" [class.invalid]='(ruleForm.controls.name.touched && ruleForm.controls.name.invalid) || !isRuleNameValid'>
+            <input type="text" id="ruleName" pattern="^[a-z0-9]+(?:[._-][a-z0-9]+)*$" class="inputWidth" required maxlength="255" formControlName="name"
+              #ruleName (keyup)='checkRuleName()' autocomplete="off">
+            <span class="tooltip-content">{{ruleNameTooltip | translate}}</span>
           </label>
-          <div class="arrowSet" [hidden]="!(filterListData[i]?.name=='label')" (click)="openLabelList(selectedValue.value, i, $event)"><clr-icon shape="angle"></clr-icon></div>
-          <clr-icon shape="warning-standard" class="is-solid is-warning" size="14" style="margin-left: -15px;" [hidden]="!deletedLabelCount || !(filterListData[i]?.name=='label')"></clr-icon>
-          <clr-icon shape="times-circle" class="is-solid"  (click)="deleteFilter(i)"></clr-icon>
-          <div *ngIf="!withAdmiral"><hbr-filter-label [projectId]="ruleForm.controls.projects.controls[0]?.value.project_id" [selectedLabelInfo]="filterLabelInfo" [isOpen]="filterListData[i].isOpen" (selectedLabels)="selectedLabelList($event, i)" (closePanelEvent)="filterListData[i].isOpen = false"></hbr-filter-label></div>
-         </div>
+          <span class="spinner spinner-inline spinner-pos" [hidden]="!inNameChecking"></span>
         </div>
-
-       </div>
-       <clr-icon shape="plus-circle" class="is-solid" [hidden]="isFilterHide" (click)="addNewFilter()" style="margin-top: 11px;"></clr-icon>
-
-      </div>
-      <!--Targets-->
-      <div class="form-group form-group-override">
-       <label class="form-group-label-override  required">{{'DESTINATION.ENDPOINT' | translate}}</label>
-       <div formArrayName="targets">
-        <div class="select endpointSelect pull-left" *ngFor="let target of targets.controls; let i= index" [formGroupName]="i">
-          <select id="ruleTarget" (change)="targetChange($event)"  formControlName="id">
-           <option *ngFor="let target of targetList" value="{{target.id}}">{{target.name}}-{{target.endpoint}}</option>
-          </select>
-         </div>
-       </div>
-       <label *ngIf="noEndpointInfo.length != 0" class="colorRed alertLabel">{{noEndpointInfo | translate}}</label>
-       <span class="alertLabel goLink" *ngIf="noEndpointInfo.length != 0" (click)="goRegistry()">{{'REPLICATION.ENDPOINTS' | translate}}</span>
-       </div>
-
-      <!--Trigger-->
-      <div class="form-group form-group-override">
-       <label class="form-group-label-override">{{'REPLICATION.TRIGGER_MODE' | translate}}</label>
-       <div  formGroupName="trigger">
-        <!--on trigger-->
-        <div class="select floatSetPar">
-         <select id="ruleTrigger" formControlName="kind"  (change)="selectTrigger($event)">
-          <option value="Manual">{{'REPLICATION.MANUAL' | translate}}</option>
-          <option value="Immediate">{{'REPLICATION.IMMEDIATE' | translate}}</option>
-          <option value="Scheduled">{{'REPLICATION.SCHEDULE' | translate}}</option>
-         </select>
+        <!--Description-->
+        <div class="form-group form-group-override">
+          <label class="form-group-label-override">{{'REPLICATION.DESCRIPTION' | translate}}</label>
+          <textarea type="text" id="ruleDescription" class="inputWidth" row=3 formControlName="description"></textarea>
         </div>
-        <!--on push-->
-        <div formGroupName="schedule_param">
-          <div class="select floatSet" [hidden]="!isScheduleOpt">
-           <select name="scheduleType" formControlName="type" (change)="selectSchedule($event)">
-            <option value="Daily">{{'REPLICATION.DAILY' | translate}}</option>
-            <option value="Weekly">{{'REPLICATION.WEEKLY' | translate}}</option>
-           </select>
+        <!--Projects-->
+        <div class="form-group form-group-override">
+          <label class="form-group-label-override required">{{'REPLICATION.SOURCE_PROJECT' | translate}}</label>
+          <div formArrayName="projects">
+            <div class="projectInput inputWidth" *ngFor="let project of projects.controls; let i= index" [formGroupName]="i" (mouseleave)="leaveInput()">
+              <label aria-haspopup="true" role="tooltip" class="tooltip tooltip-validation tooltip-md tooltip-bottom-left" [class.invalid]='noProjectInfo'>
+                <input *ngIf="!projectId" formControlName="name" type="text" class="inputWidth" value="name" required pattern="^[a-z0-9]+(?:[._-][a-z0-9]+)*$"
+                  (keyup)='handleValidation()' (focus)="focusClear($event)" autocomplete="off">
+                <input *ngIf="projectId" formControlName="name" type="text" class="inputWidth" value="name" readonly>
+                <span class="tooltip-content">{{noProjectInfo | translate}}</span>
+              </label>
+              <div class="selectBox inputWidth" [style.display]="selectedProjectList.length ? 'block' : 'none'">
+                <ul>
+                  <li *ngFor="let project of selectedProjectList" (click)="selectedProjectName(project?.name)">{{project?.name}}</li>
+                </ul>
+              </div>
+            </div>
           </div>
-          <!--weekly-->
-          <span [hidden]="!weeklySchedule || !isScheduleOpt">on &nbsp;</span>
-          <div  [hidden]="!weeklySchedule || !isScheduleOpt" class="select floatSet" style="width:104px">
-           <select name="scheduleDay" formControlName="weekday">
-            <option value="1">{{'WEEKLY.MONDAY' | translate}}</option>
-            <option value="2">{{'WEEKLY.TUESDAY' | translate}}</option>
-            <option value="3">{{'WEEKLY.WEDNESDAY' | translate}}</option>
-            <option value="4">{{'WEEKLY.THURSDAY' | translate}}</option>
-            <option value="5">{{'WEEKLY.FRIDAY' | translate}}</option>
-            <option value="6">{{'WEEKLY.SATURDAY' | translate}}</option>
-            <option value="7">{{'WEEKLY.SUNDAY' | translate}}</option>
-           </select>
-          </div>
-          <!--daily/time-->
-          <span [hidden]="!isScheduleOpt">at &nbsp;</span>
-          <input [hidden]="!isScheduleOpt" type="time" formControlName="offtime"  required value="08:00" />
         </div>
-       </div>
-       <div style="width: 100%;" [hidden]="!isImmediate">
-        <clr-checkbox [clrChecked]="false" id="ruleDeletion" formControlName="replicate_deletion">
-         {{'REPLICATION.DELETE_REMOTE_IMAGES' | translate}}
-        </clr-checkbox>
-       </div>
-       <div  style="width: 100%;" >
-        <clr-checkbox [clrChecked]="true" id="ruleExit" formControlName="replicate_existing_image_now">
-         {{'REPLICATION.REPLICATE_IMMEDIATE' | translate}}
-        </clr-checkbox>
-       </div>
-      </div>
-      <div style="display:block;text-align:center">
-       <span class="spinner spinner-inline" [hidden]="inProgress === false"></span>
-     </div>
-     </section>
+
+        <!--images/Filter-->
+        <div class="form-group form-group-override">
+          <label class="form-group-label-override">{{'REPLICATION.SOURCE_IMAGES_FILTER' | translate}}</label>
+          <div formArrayName="filters">
+            <div class="filterSelect" *ngFor="let filter of filters.controls; let i=index">
+              <div [formGroupName]="i">
+                <div class="select floatSetPar">
+                  <select formControlName="kind" #selectedValue (change)="filterChange($event, selectedValue.value)" id="{{i}}" name="{{filterListData[i]?.name}}">
+                    <option *ngFor="let opt of filterListData[i]?.options;" value="{{opt}}">{{opt}}</option>
+                  </select>
+                </div>
+                <label aria-haspopup="true" role="tooltip" class="tooltip tooltip-validation tooltip-md tooltip-bottom-left" [class.invalid]='(ruleForm.controls.filters.controls[i].controls.value.dirty || ruleForm.controls.filters.controls[i].controls.value.touched) && ruleForm.controls.filters.controls[i].controls.value.invalid'>
+                  <input type="text" #filterValue required size="14" formControlName="value" [attr.disabled]="(filterListData[i]?.name=='label') ?'' : null">
+                  <span class="tooltip-content">{{'TOOLTIP.EMPTY' | translate}}</span>
+                </label>
+                <div class="arrowSet" [hidden]="!(filterListData[i]?.name=='label')" (click)="openLabelList(selectedValue.value, i, $event)">
+                  <clr-icon shape="angle"></clr-icon>
+                </div>
+                <clr-icon shape="warning-standard" class="is-solid is-warning" size="14" style="margin-left: -15px;" [hidden]="!deletedLabelCount || !(filterListData[i]?.name=='label')"></clr-icon>
+                <clr-icon shape="times-circle" class="is-solid" (click)="deleteFilter(i)"></clr-icon>
+                <div *ngIf="!withAdmiral">
+                  <hbr-filter-label [projectId]="ruleForm.controls.projects.controls[0]?.value.project_id" [selectedLabelInfo]="filterLabelInfo"
+                    [isOpen]="filterListData[i].isOpen" (selectedLabels)="selectedLabelList($event, i)" (closePanelEvent)="filterListData[i].isOpen = false"></hbr-filter-label>
+                </div>
+              </div>
+            </div>
+
+          </div>
+          <clr-icon shape="plus-circle" class="is-solid" [hidden]="isFilterHide" (click)="addNewFilter()" style="margin-top: 11px;"></clr-icon>
+
+        </div>
+        <!--Targets-->
+        <div class="form-group form-group-override">
+          <label class="form-group-label-override  required">{{'DESTINATION.ENDPOINT' | translate}}</label>
+          <div formArrayName="targets">
+            <div class="select endpointSelect pull-left" *ngFor="let target of targets.controls; let i= index" [formGroupName]="i">
+              <select id="ruleTarget" (change)="targetChange($event)" formControlName="id">
+                <option *ngFor="let target of targetList" value="{{target.id}}">{{target.name}}-{{target.endpoint}}</option>
+              </select>
+            </div>
+          </div>
+          <label *ngIf="noEndpointInfo.length != 0" class="colorRed alertLabel">{{noEndpointInfo | translate}}</label>
+          <span class="alertLabel goLink" *ngIf="noEndpointInfo.length != 0" (click)="goRegistry()">{{'REPLICATION.ENDPOINTS' | translate}}</span>
+        </div>
+
+        <!--Trigger-->
+        <div class="form-group form-group-override">
+          <label class="form-group-label-override">{{'REPLICATION.TRIGGER_MODE' | translate}}</label>
+          <div formGroupName="trigger">
+            <!--on trigger-->
+            <div class="select floatSetPar">
+              <select id="ruleTrigger" formControlName="kind" (change)="selectTrigger($event)">
+                <option value="Manual">{{'REPLICATION.MANUAL' | translate}}</option>
+                <option value="Immediate">{{'REPLICATION.IMMEDIATE' | translate}}</option>
+                <option value="Scheduled">{{'REPLICATION.SCHEDULE' | translate}}</option>
+              </select>
+            </div>
+            <!--on push-->
+            <div formGroupName="schedule_param">
+              <div class="select floatSet" [hidden]="!isScheduleOpt">
+                <select name="scheduleType" formControlName="type" (change)="selectSchedule($event)">
+                  <option value="Daily">{{'REPLICATION.DAILY' | translate}}</option>
+                  <option value="Weekly">{{'REPLICATION.WEEKLY' | translate}}</option>
+                </select>
+              </div>
+              <!--weekly-->
+              <span [hidden]="!weeklySchedule || !isScheduleOpt">on &nbsp;</span>
+              <div [hidden]="!weeklySchedule || !isScheduleOpt" class="select floatSet" style="width:104px">
+                <select name="scheduleDay" formControlName="weekday">
+                  <option value="1">{{'WEEKLY.MONDAY' | translate}}</option>
+                  <option value="2">{{'WEEKLY.TUESDAY' | translate}}</option>
+                  <option value="3">{{'WEEKLY.WEDNESDAY' | translate}}</option>
+                  <option value="4">{{'WEEKLY.THURSDAY' | translate}}</option>
+                  <option value="5">{{'WEEKLY.FRIDAY' | translate}}</option>
+                  <option value="6">{{'WEEKLY.SATURDAY' | translate}}</option>
+                  <option value="7">{{'WEEKLY.SUNDAY' | translate}}</option>
+                </select>
+              </div>
+              <!--daily/time-->
+              <span [hidden]="!isScheduleOpt">at &nbsp;</span>
+              <input [hidden]="!isScheduleOpt" type="time" formControlName="offtime" required value="08:00" />
+            </div>
+          </div>
+          <div style="width: 100%;" [hidden]="!isImmediate">
+            <clr-checkbox [clrChecked]="false" id="ruleDeletion" formControlName="replicate_deletion">
+              {{'REPLICATION.DELETE_REMOTE_IMAGES' | translate}}
+            </clr-checkbox>
+          </div>
+          <div style="width: 100%;">
+            <clr-checkbox [clrChecked]="true" id="ruleExit" formControlName="replicate_existing_image_now">
+              {{'REPLICATION.REPLICATE_IMMEDIATE' | translate}}
+            </clr-checkbox>
+          </div>
+        </div>
+        <div style="display:block;text-align:center">
+          <span class="spinner spinner-inline" [hidden]="inProgress === false"></span>
+        </div>
+      </section>
     </form>
   </div>
   <div class="modal-footer">
     <button type="button" id="ruleBtnCancel" class="btn btn-outline" [disabled]="this.inProgress" (click)="onCancel()">{{ 'BUTTON.CANCEL' | translate }}</button>
-    <button type="submit" id="ruleBtnOk" class="btn btn-primary"  (click)="onSubmit()" [disabled]="!ruleForm.valid || !isValid || !hasFormChange()">{{ 'BUTTON.SAVE' | translate }}</button>
+    <button type="submit" id="ruleBtnOk" class="btn btn-primary" (click)="onSubmit()" [disabled]="!ruleForm.valid || !isValid || !hasFormChange()">{{ 'BUTTON.SAVE' | translate }}</button>
   </div>
-</clr-modal>
+</clr-modal>
\ No newline at end of file
diff --git a/src/ui_ng/src/i18n/lang/en-us-lang.json b/src/ui_ng/src/i18n/lang/en-us-lang.json
index b23d42bcf..8f70a20db 100644
--- a/src/ui_ng/src/i18n/lang/en-us-lang.json
+++ b/src/ui_ng/src/i18n/lang/en-us-lang.json
@@ -367,7 +367,7 @@
         "JOB_PLACEHOLDER": "We couldn't find any replication jobs!",
         "JOB_LOG_VIEWER": "View Replication Job Log",
         "NO_ENDPOINT_INFO": "Please add an endpoint first",
-        "NO_PROJECT_INFO": "Please add a project name first",
+        "NO_PROJECT_INFO": "This project is not exist",
         "SOURCE_IMAGES_FILTER": "Source images filter",
         "SCHEDULE": "Scheduled",
         "MANUAL": "Manual",
diff --git a/src/ui_ng/src/i18n/lang/es-es-lang.json b/src/ui_ng/src/i18n/lang/es-es-lang.json
index 0e816b77e..e9734c6cd 100644
--- a/src/ui_ng/src/i18n/lang/es-es-lang.json
+++ b/src/ui_ng/src/i18n/lang/es-es-lang.json
@@ -367,7 +367,7 @@
         "JOB_PLACEHOLDER": "We couldn't find any replication jobs!",
         "JOB_LOG_VIEWER": "View Replication Job Log",
         "NO_ENDPOINT_INFO": "Please add an endpoint first",
-        "NO_PROJECT_INFO": "Please add a project name first",
+        "NO_PROJECT_INFO": "This project is not exist",
         "SOURCE_IMAGES_FILTER": "Source images filter",
         "SCHEDULE": "Scheduled",
         "MANUAL": "Manual",
diff --git a/src/ui_ng/src/i18n/lang/fr-fr-lang.json b/src/ui_ng/src/i18n/lang/fr-fr-lang.json
index 9620f807a..09a7ce89e 100644
--- a/src/ui_ng/src/i18n/lang/fr-fr-lang.json
+++ b/src/ui_ng/src/i18n/lang/fr-fr-lang.json
@@ -347,7 +347,7 @@
         "JOB_PLACEHOLDER": "Nous n'avons trouvé aucun travail de réplication !",
         "JOB_LOG_VIEWER": "Afficher les logs des travaux de réplication",
         "NO_ENDPOINT_INFO": "Please add an endpoint first",
-        "NO_PROJECT_INFO": "Please add a project name first",
+        "NO_PROJECT_INFO": "This project is not exist",
         "SOURCE_IMAGES_FILTER": "Source images filter",
         "SCHEDULE": "Scheduled",
         "MANUAL": "Manual",
diff --git a/src/ui_ng/src/i18n/lang/zh-cn-lang.json b/src/ui_ng/src/i18n/lang/zh-cn-lang.json
index 84f631c50..15304f08a 100644
--- a/src/ui_ng/src/i18n/lang/zh-cn-lang.json
+++ b/src/ui_ng/src/i18n/lang/zh-cn-lang.json
@@ -367,7 +367,7 @@
         "JOB_PLACEHOLDER": "未发现任何复制任务!",
         "JOB_LOG_VIEWER": "查看复制任务日志",
         "NO_ENDPOINT_INFO": "请先添加一个目标",
-        "NO_PROJECT_INFO": "请先添加一个项目名称",
+        "NO_PROJECT_INFO": "此项目不存在",
         "SOURCE_IMAGES_FILTER": "源镜像过滤器",
         "SCHEDULE": "定时",
         "MANUAL": "手动",