diff --git a/src/app/AppModule.ts b/src/app/AppModule.ts
index d9a089f..cd145c3 100644
--- a/src/app/AppModule.ts
+++ b/src/app/AppModule.ts
@@ -59,6 +59,7 @@
 import { NSInstancesActionComponent } from 'NSInstancesActionComponent';
 import { NsPackagesActionComponent } from 'NsPackagesAction';
 import { NsUpdateComponent } from 'NsUpdateComponent';
+import { OkaPackagesActionComponent } from 'OkaPackagesActionComponent';
 import { PageNotFoundComponent } from 'PageNotFound';
 import { PDUInstancesActionComponent } from 'PDUInstancesActionComponent';
 import { ProjectLinkComponent } from 'ProjectLinkComponent';
@@ -136,7 +137,8 @@
         WarningComponent,
         StartStopRebuildComponent,
         HealingComponent,
-        NSConfigTemplateActionComponent
+        NSConfigTemplateActionComponent,
+        OkaPackagesActionComponent
     ],
     imports: [
         NotifierModule.withConfig(customNotifierOptions),
diff --git a/src/app/k8s/K8sModule.ts b/src/app/k8s/K8sModule.ts
index 14d8165..4b9ff15 100644
--- a/src/app/k8s/K8sModule.ts
+++ b/src/app/k8s/K8sModule.ts
@@ -31,9 +31,17 @@
 import { K8sActionComponent } from 'K8sActionComponent';
 import { K8sAddClusterComponent } from 'K8sAddClusterComponent';
 import { K8sAddRepoComponent } from 'K8sAddRepoComponent';
+import { K8sAppProfileComponent } from 'K8sAppProfileComponent';
+import { K8sAttachProfileComponent } from 'K8sAttachProfileComponent';
 import { K8sClusterComponent } from 'K8sClusterComponent';
 import { K8sComponent } from 'K8sComponent';
+import { K8sInfraConfigAddComponent } from 'K8sInfraConfigAddComponent';
+import { K8sInfraConfigProfileComponent } from 'K8sInfraConfigProfileComponent';
+import { K8sInfraControllerProfileComponent } from 'K8sInfraControllerProfileComponent';
 import { K8sRepositoryComponent } from 'K8sRepositoryComponent';
+import { K8sResourceProfileComponent } from 'K8sResourceProfileComponent';
+import { KSUAddComponent } from 'KSUAddComponent';
+import { KSUComponent } from 'KSUComponent';
 import { LoaderModule } from 'LoaderModule';
 import { Ng2SmartTableModule } from 'ng2-smart-table';
 import { PagePerRowModule } from 'PagePerRowModule';
@@ -59,6 +67,46 @@
         component: K8sClusterComponent
       },
       {
+        path: 'infra-config-profile',
+        data: {
+          breadcrumb: [{ title: 'PAGE.DASHBOARD.DASHBOARD', url: '/' }, { title: 'PAGE.DASHBOARD.PROJECTS', url: '/projects' },
+            projectInfo, { title: 'PAGE.K8S.INFRACONFIG', url: null }]
+        },
+        component: K8sInfraConfigProfileComponent
+      },
+      {
+        path: 'infra-controller-profile',
+        data: {
+          breadcrumb: [{ title: 'PAGE.DASHBOARD.DASHBOARD', url: '/' }, { title: 'PAGE.DASHBOARD.PROJECTS', url: '/projects' },
+            projectInfo, { title: 'PAGE.K8S.INFRACONTROLLER', url: null }]
+        },
+        component: K8sInfraControllerProfileComponent
+      },
+      {
+        path: 'app-profile',
+        data: {
+          breadcrumb: [{ title: 'PAGE.DASHBOARD.DASHBOARD', url: '/' }, { title: 'PAGE.DASHBOARD.PROJECTS', url: '/projects' },
+            projectInfo, { title: 'PAGE.K8S.APP', url: null }]
+        },
+        component: K8sAppProfileComponent
+      },
+      {
+        path: 'resource-profile',
+        data: {
+          breadcrumb: [{ title: 'PAGE.DASHBOARD.DASHBOARD', url: '/' }, { title: 'PAGE.DASHBOARD.PROJECTS', url: '/projects' },
+            projectInfo, { title: 'PAGE.K8S.RESOURCE', url: null }]
+        },
+        component: K8sResourceProfileComponent
+      },
+      {
+        path: 'ksu',
+        data: {
+          breadcrumb: [{ title: 'PAGE.DASHBOARD.DASHBOARD', url: '/' }, { title: 'PAGE.DASHBOARD.PROJECTS', url: '/projects' },
+            projectInfo, { title: 'PAGE.K8S.KSU', url: null }]
+        },
+        component: KSUComponent
+      },
+      {
         path: 'repo',
         data: {
           breadcrumb: [{ title: 'PAGE.DASHBOARD.DASHBOARD', url: '/' }, { title: 'PAGE.DASHBOARD.PROJECTS', url: '/projects' },
@@ -93,7 +141,15 @@
     K8sRepositoryComponent,
     K8sActionComponent,
     K8sAddClusterComponent,
-    K8sAddRepoComponent
+    K8sAddRepoComponent,
+    K8sAttachProfileComponent,
+    K8sInfraConfigProfileComponent,
+    K8sInfraControllerProfileComponent,
+    K8sInfraConfigAddComponent,
+    K8sAppProfileComponent,
+    K8sResourceProfileComponent,
+    KSUComponent,
+    KSUAddComponent
   ],
   providers: [DataService],
   schemas: [CUSTOM_ELEMENTS_SCHEMA]
diff --git a/src/app/k8s/k8s-action/K8sActionComponent.html b/src/app/k8s/k8s-action/K8sActionComponent.html
index c35bb19..ddce99c 100644
--- a/src/app/k8s/k8s-action/K8sActionComponent.html
+++ b/src/app/k8s/k8s-action/K8sActionComponent.html
@@ -16,12 +16,78 @@
 Author: KUMARAN M (kumaran.m@tataelxsi.co.in), RAJESH S (rajesh.s@tataelxsi.co.in), BARATH KUMAR R (barath.r@tataelxsi.co.in)
 -->
 <div class="btn-group list action" role="group">
-  <button type="button" class="btn btn-primary" (click)="infoK8s(getK8sType)" placement="top" container="body"
-    ngbTooltip="{{'INFO' | translate}}">
+  <button *ngIf="getK8sType === 'repo'" type="button" class="btn btn-primary" (click)="infoK8s(getK8sType)"
+    placement="top" container="body" ngbTooltip="{{'INFO' | translate}}">
     <i class="fas fa-info icons list" title="info"></i>
   </button>
-  <button type="button" class="btn btn-primary" (click)="deleteK8s(getK8sType)" placement="top"
-    container="body" ngbTooltip="{{'DELETE' | translate}}">
+  <button *ngIf="(isCluster  || isProfile || isKSU) && getK8sType !== 'repo' && !checkRegister" [disabled]="state != 'CREATED'"
+    type="button" class="btn btn-primary" (click)="deleteK8s()" placement="top" container="body"
+    ngbTooltip="{{'DELETE' | translate}}">
     <i class="far fa-trash-alt icons" title="delete"></i>
   </button>
-</div>
\ No newline at end of file
+  <button *ngIf="(!isCluster  || !isProfile || !isKSU) && getK8sType === 'repo'" type="button" class="btn btn-primary"
+    (click)="deleteK8s()" placement="top" container="body" ngbTooltip="{{'DELETE' | translate}}">
+    <i class="far fa-trash-alt icons" title="delete"></i>
+  </button>
+  <button *ngIf="checkRegister && !isCluster && !isProfile && !isKSU && getK8sType !== 'repo'"
+    [disabled]="state != 'CREATED'" type="button" class="btn btn-primary" (click)="deleteK8s()" placement="top"
+    container="body" ngbTooltip="{{'DEREGISTER' | translate}}">
+    <i class="fas fa-window-close icons" title="deregister"></i>
+  </button>
+  <div *ngIf="isCluster && !isProfile && !isKSU  && getK8sType !== 'repo'" class="btn-group" placement="bottom-right" ngbDropdown
+    display="dynamic" container="body">
+    <button type="button" class="btn btn-primary" [disabled]="state != 'CREATED'" ngbDropdownToggle placement="top" container="body"
+      ngbTooltip="{{'Attach Profile' | translate}}">
+      <i class="fas fa-link"></i>
+    </button>
+    <div class="dropdown-menu list-action-dropdown" ngbDropdownMenu>
+      <button type="button" class="btn btn-primary dropdown-item" placement="left" container="body"
+        (click)="editClusterProfile('infra-config')" ngbTooltip="{{'PAGE.K8S.ATTACHINFRACONFIG' | translate}}">
+        <i class="fa fa-link"></i> {{'PAGE.K8S.ATTACHINFRACONFIG' | translate}}
+      </button>
+      <button type="button" class="btn btn-primary dropdown-item" (click)="editClusterProfile('infra-controller')"
+        placement="left" container="body" ngbTooltip="{{'PAGE.K8S.ATTACHINFRACONTROLLER' | translate}}">
+        <i class="fas fa-link"></i> {{'PAGE.K8S.ATTACHINFRACONTROLLER' | translate}}
+      </button>
+      <button type="button" class="btn btn-primary dropdown-item" placement="left"
+        (click)="editClusterProfile('app-profile')" container="body" ngbTooltip="{{'PAGE.K8S.ATTACHAPP' | translate}}">
+        <i class="fas fa-link"></i> {{'PAGE.K8S.ATTACHAPP' | translate}}
+      </button>
+      <button type="button" class="btn btn-primary dropdown-item" placement="left"
+        (click)="editClusterProfile('resource-profile')" container="body"
+        ngbTooltip="{{'PAGE.K8S.ATTACHRESOURCE' | translate}}">
+        <i class="fas fa-link"></i> {{'PAGE.K8S.ATTACHRESOURCE' | translate}}
+      </button>
+    </div>
+  </div>
+  <div *ngIf="(isProfile || isKSU || isCluster  && getK8sType !== 'repo')" class="btn-group" ngbDropdown display="dynamic" container="body">
+    <button type="button" [disabled]="state != 'CREATED'" class="btn btn-primary dropdown-toggle action-button" ngbDropdownToggle>
+      {{'ACTION' | translate}}
+    </button>
+    <div class="dropdown-menu list-action-dropdown" ngbDropdownMenu>
+      <button *ngIf="isProfile && !KSU && !isCluster" type="button" class="btn btn-primary dropdown-item"
+        placement="left" container="body" (click)="editProfile(getK8sType)" ngbTooltip="{{'PAGE.K8S.EDITPROFILE' | translate}}">
+        <i class="fa fa-edit icons"></i> {{'PAGE.K8S.EDITPROFILE' | translate}}
+      </button>
+      <button *ngIf="isKSU && !isProfile && !isCluster" type="button" class="btn btn-primary dropdown-item"
+        placement="left" (click)="moveKsu()" container="body" ngbTooltip="{{'PAGE.K8S.MOVE' | translate}}">
+        <i class="fas fa-truck-moving"></i> {{'PAGE.K8S.MOVE' | translate}}
+      </button>
+      <button *ngIf="isKSU && !isProfile && !isCluster" type="button" class="btn btn-primary dropdown-item"
+        placement="left" (click)="cloneKsu()" container="body" ngbTooltip="{{'PAGE.K8S.CLONE' | translate}}">
+        <i class="fa fa-clone icons"></i> {{'PAGE.K8S.CLONE' | translate}}
+      </button>
+      <button *ngIf="isKSU && !isProfile && !isCluster" type="button" class="btn btn-primary dropdown-item"
+        placement="left" (click)="editKsu()" container="body" ngbTooltip="{{'EDIT' | translate}}">
+        <i class="fa fa-edit icons"></i> {{'EDIT' | translate}}
+      </button>
+      <button *ngIf="!isKSU && !isProfile && isCluster" type="button" class="btn btn-primary dropdown-item"
+        placement="left" (click)="editCluster('upgrade')" container="body" ngbTooltip="{{'PAGE.K8S.UPGRADE' | translate}}">
+        <i class="fa fa-arrow-up"></i> {{'PAGE.K8S.UPGRADE' | translate}}
+      </button>
+      <button *ngIf="!isKSU && !isProfile && isCluster" type="button" class="btn btn-primary dropdown-item"
+        placement="left" (click)="editCluster('scale')" container="body" ngbTooltip="{{'PAGE.K8S.SCALE' | translate}}">
+        <i class="fas fa-compress-alt"></i> {{'PAGE.K8S.SCALE' | translate}}
+      </button>
+    </div>
+  </div>
\ No newline at end of file
diff --git a/src/app/k8s/k8s-action/K8sActionComponent.ts b/src/app/k8s/k8s-action/K8sActionComponent.ts
index f68eff6..eef33ca 100644
--- a/src/app/k8s/k8s-action/K8sActionComponent.ts
+++ b/src/app/k8s/k8s-action/K8sActionComponent.ts
@@ -7,7 +7,7 @@
 
   http://www.apache.org/licenses/LICENSE-2.0
 
- Unless required by applicable law or agreed to in writing, software
+ Unless required by applicable law or agreed to in  writing, software
  distributed under the License is distributed on an "AS IS" BASIS,
  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  See the License for the specific language governing permissions and
@@ -23,7 +23,11 @@
 import { TranslateService } from '@ngx-translate/core';
 import { MODALCLOSERESPONSEDATA } from 'CommonModel';
 import { DeleteComponent } from 'DeleteComponent';
-import { K8SCLUSTERDATADISPLAY, K8SREPODATADISPLAY } from 'K8sModel';
+import { K8sAddClusterComponent } from 'K8sAddClusterComponent';
+import { K8sAttachProfileComponent } from 'K8sAttachProfileComponent';
+import { K8sInfraConfigAddComponent } from 'K8sInfraConfigAddComponent';
+import { INFRACONFIGPAYLOAD, K8SCLUSTERDATADISPLAY, K8SPayload, K8SREPODATADISPLAY } from 'K8sModel';
+import { KSUAddComponent } from 'KSUAddComponent';
 import { SharedService } from 'SharedService';
 import { ShowInfoComponent } from 'ShowInfoComponent';
 /**
@@ -36,19 +40,34 @@
   styleUrls: ['./K8sActionComponent.scss']
 })
 /** Exporting a class @exports K8sActionComponent */
-export class K8sActionComponent{
+export class K8sActionComponent {
   /** To inject services @public */
   public injector: Injector;
 
   /** To get the value from the Users action via valuePrepareFunction default Property of ng-smarttable @public */
-  public value: K8SCLUSTERDATADISPLAY | K8SREPODATADISPLAY;
+  public value: K8SCLUSTERDATADISPLAY | K8SREPODATADISPLAY | INFRACONFIGPAYLOAD;
 
   /** handle translate @public */
   public translateService: TranslateService;
 
-  /** Contains K8s Type @private */
+  /** Contains K8s Type @public */
   public getK8sType: string;
 
+  /** Check register page @public */
+  public checkRegister = false;
+
+  /** Contains state @public */
+  public state: string;
+
+  /** Check profile or not @public */
+  public isProfile = false;
+
+  /** Check ksu or not @public */
+  public isKSU = false;
+
+  /** Check cluster or not @public */
+  public isCluster = false;
+
   /** Instance of the modal service @private */
   private modalService: NgbModal;
 
@@ -71,10 +90,28 @@
   public ngOnInit(): void {
     this.instanceID = this.value.identifier;
     this.getK8sType = this.value.pageType;
+    this.state = this.value.state;
+    if (sessionStorage.getItem('clusterType') === 'Registered') {
+      this.checkRegister = true;
+    }
+    if (this.getK8sType === 'infra-config' || this.getK8sType === 'infra-controller' || this.getK8sType === 'app-profile' || this.getK8sType === 'resource-profile') {
+      this.isCluster = false;
+      this.isProfile = true;
+      this.isKSU = false;
+    } else if (sessionStorage.getItem('clusterType') === 'Managed') {
+      this.isCluster = true;
+      this.isProfile = false;
+      this.isKSU = false;
+    }
+    if (this.getK8sType === 'k8-ksu') {
+      this.isKSU = true;
+      this.isCluster = false;
+      this.isProfile = false;
+    }
   }
 
   /** Delete User Account @public */
-  public deleteK8s(pageType: string): void {
+  public deleteK8s(): void {
     // eslint-disable-next-line security/detect-non-literal-fs-filename
     const modalRef: NgbModalRef = this.modalService.open(DeleteComponent, { backdrop: 'static' });
     modalRef.result.then((result: MODALCLOSERESPONSEDATA) => {
@@ -83,7 +120,7 @@
       }
     }).catch((): void => {
       // Catch Navigation Error
-  });
+    });
   }
 
   /** Shows information using modalservice @public */
@@ -104,4 +141,96 @@
       titleName: title
     };
   }
+  /** Edit profile @public */
+  public editProfile(editType: string): void {
+    // eslint-disable-next-line security/detect-non-literal-fs-filename
+    const modalRef: NgbModalRef = this.modalService.open(K8sInfraConfigAddComponent, { backdrop: 'static' });
+    modalRef.componentInstance.profileID = this.value.identifier;
+    modalRef.componentInstance.profileType = editType;
+    modalRef.componentInstance.profileName = this.value.name;
+    modalRef.componentInstance.profileDescription = this.value.description;
+    modalRef.result.then((result: MODALCLOSERESPONSEDATA) => {
+      if (result) {
+        this.sharedService.callData();
+      }
+    }).catch((): void => {
+      // Catch Navigation Error
+    });
+  }
+
+  /** Edit cluster @public */
+  public editCluster(editType: string): void {
+    // eslint-disable-next-line security/detect-non-literal-fs-filename
+    const modalRef: NgbModalRef = this.modalService.open(K8sAddClusterComponent, { backdrop: 'static' });
+    modalRef.componentInstance.profileID = this.value.identifier;
+    modalRef.componentInstance.profileType = editType;
+    modalRef.result.then((result: MODALCLOSERESPONSEDATA) => {
+      if (result) {
+        this.sharedService.callData();
+      }
+    }).catch((): void => {
+      // Catch Navigation Error
+    });
+  }
+
+
+  /** Edit profile under cluster @public */
+  public editClusterProfile(editType: string): void {
+    // eslint-disable-next-line security/detect-non-literal-fs-filename
+    const modalRef: NgbModalRef = this.modalService.open(K8sAttachProfileComponent, { backdrop: 'static' });
+    modalRef.componentInstance.profileID = this.value.identifier;
+    modalRef.componentInstance.profileType = editType;
+    modalRef.result.then((result: MODALCLOSERESPONSEDATA) => {
+      if (result) {
+        this.sharedService.callData();
+      }
+    }).catch((): void => {
+      // Catch Navigation Error
+    });
+  }
+
+  /** Move KSU @public */
+  public moveKsu(): void {
+    // eslint-disable-next-line security/detect-non-literal-fs-filename
+    const modalRef: NgbModalRef = this.modalService.open(KSUAddComponent, { backdrop: 'static' });
+    modalRef.componentInstance.profileID = this.value.identifier;
+    modalRef.componentInstance.profileType = 'move';
+    modalRef.result.then((result: MODALCLOSERESPONSEDATA) => {
+      if (result) {
+        this.sharedService.callData();
+      }
+    }).catch((): void => {
+      // Catch Navigation Error
+    });
+  }
+
+  /** Edit KSU @public */
+  public editKsu(): void {
+    // eslint-disable-next-line security/detect-non-literal-fs-filename
+    const modalRef: NgbModalRef = this.modalService.open(KSUAddComponent, { backdrop: 'static' });
+    modalRef.componentInstance.profileID = this.value.identifier;
+    modalRef.componentInstance.profileType = 'edit';
+    modalRef.result.then((result: MODALCLOSERESPONSEDATA) => {
+      if (result) {
+        this.sharedService.callData();
+      }
+    }).catch((): void => {
+      // Catch Navigation Error
+    });
+  }
+
+  /** Clone KSU @public */
+  public cloneKsu(): void {
+    // eslint-disable-next-line security/detect-non-literal-fs-filename
+    const modalRef: NgbModalRef = this.modalService.open(KSUAddComponent, { backdrop: 'static' });
+    modalRef.componentInstance.profileID = this.value.identifier;
+    modalRef.componentInstance.profileType = 'clone';
+    modalRef.result.then((result: MODALCLOSERESPONSEDATA) => {
+      if (result) {
+        this.sharedService.callData();
+      }
+    }).catch((): void => {
+      // Catch Navigation Error
+    });
+  }
 }
diff --git a/src/app/k8s/k8s-add-cluster/K8sAddClusterComponent.html b/src/app/k8s/k8s-add-cluster/K8sAddClusterComponent.html
index 707d8d6..a8d5820 100644
--- a/src/app/k8s/k8s-add-cluster/K8sAddClusterComponent.html
+++ b/src/app/k8s/k8s-add-cluster/K8sAddClusterComponent.html
@@ -17,22 +17,30 @@
 -->
 <form [formGroup]="k8sclusterForm" (ngSubmit)="k8sAddClusterSubmit();">
   <div class="modal-header">
-    <h4 class="modal-title" id="modal-basic-title">{{'PAGE.K8S.NEWK8SCLUSTER' | translate}}</h4>
+    <h4 *ngIf="profileType === 'Register'" class="modal-title" id="modal-basic-title">{{'PAGE.K8S.REGISTERCLUSTER' | translate}}
+    </h4>
+    <h4 *ngIf="profileType === 'Manage'" class="modal-title" id="modal-basic-title">{{'PAGE.K8S.CREATECLUSTER' | translate}}
+    </h4>
+    <h4 *ngIf="profileType === 'upgrade'" class="modal-title" id="modal-basic-title">{{'PAGE.K8S.UPGRADECLUSTER' | translate}}
+    </h4>
+    <h4 *ngIf="profileType === 'scale'" class="modal-title" id="modal-basic-title">{{'PAGE.K8S.SCALECLUSTER' | translate}}</h4>
     <button class="button-xs" type="button" class="close" aria-label="Close" (click)="activeModal.close()">
       <i class="fas fa-times-circle text-danger"></i>
     </button>
   </div>
   <div class="modal-body modal-body-custom-height">
-    <div class="form-group row mb-3">
+    <div class="form-group row mb-3" *ngIf="profileType === 'Manage' || profileType === 'Register'">
       <label class="col-sm-12 col-form-label mandatory-label"
-        [ngClass]="{'text-danger': k8sclusterForm.invalid === true && submitted === true}">{{'MANDATORYCHECK' | translate}}</label>
+        [ngClass]="{'text-danger': k8sclusterForm.invalid === true && submitted === true}">{{'MANDATORYCHECK' |
+        translate}}</label>
       <label class="col-sm-4 col-form-label" for="name">{{'PAGE.K8S.NAME' | translate}}*</label>
       <div class="col-sm-8">
         <input autocomplete="off" class="form-control" placeholder="{{'PAGE.K8S.NAME' | translate}}" type="text"
           formControlName="name" id="name" [ngClass]="{ 'is-invalid': submitted && f.name.errors }" required>
       </div>
     </div>
-    <div class="form-group row mb-3">
+    <div class="form-group row mb-3"
+      *ngIf="profileType === 'Manage' || profileType === 'Register'|| profileType === 'upgrade'">
       <label class="col-sm-4 col-form-label" for="k8s_version">{{'PAGE.K8S.K8SVERSION' | translate}}*</label>
       <div class="col-sm-8">
         <input autocomplete="off" class="form-control" placeholder="{{'PAGE.K8S.K8SVERSION' | translate}}" type="text"
@@ -40,28 +48,28 @@
           required>
       </div>
     </div>
-    <div class="form-group row mb-3">
+    <div class="form-group row mb-3" *ngIf="profileType === 'Manage' || profileType === 'Register'">
       <label class="col-sm-4 col-form-label" for="vim_account">{{'PAGE.K8S.VIMACCOUNT' | translate}}*</label>
       <div class="col-sm-8">
-        <ng-select placeholder="{{'SELECT' | translate}} {{'PAGE.K8S.VIMACCOUNT' | translate}}"
-          [items]="vimAccountSelect" bindLabel="name" bindValue="_id" formControlName="vim_account" id="vimAccountId"
+        <ng-select (change)="getDetailsvim($event)"
+          placeholder="{{'SELECT' | translate}} {{'PAGE.K8S.VIMACCOUNT' | translate}}" [items]="vimAccountSelect"
+          bindLabel="name" bindValue="name" formControlName="vim_account" id="vimAccountId"
           [ngClass]="{ 'is-invalid': submitted && f.vim_account.errors }" required>
         </ng-select>
       </div>
     </div>
-    <div class="form-group row mb-3">
-      <label class="col-sm-4 col-form-label" for="deployment_methods">{{'PAGE.K8S.DEPLOYMENTMETHODS' | translate}}*</label>
+    <div class="form-group row mb-3" *ngIf="profileType === 'Register'">
+      <label class="col-sm-4 col-form-label" for="deployment_methods">{{'PAGE.K8S.DEPLOYMENTMETHODS' |
+        translate}}*</label>
       <div class="col-sm-8">
-        <ng-select placeholder="{{'SELECT' | translate}} {{'PAGE.K8S.DEPLOYMENTMETHODS' | translate}}"
-                   multiple="true"
-                   [items]="deploymentMethodsSelect" bindLabel="title" bindValue="value" formControlName="deployment_methods" id="deploymentMethodsId"
-                   [ngClass]="{ 'is-invalid': submitted && f.deployment_methods.errors }"
-                   [(ngModel)]="selectedDeploymentMethods"
-                   required>
+        <ng-select placeholder="{{'SELECT' | translate}} {{'PAGE.K8S.DEPLOYMENTMETHODS' | translate}}" multiple="true"
+          [items]="deploymentMethodsSelect" bindLabel="title" bindValue="value" formControlName="deployment_methods"
+          id="deploymentMethodsId" [ngClass]="{ 'is-invalid': submitted && f.deployment_methods.errors }"
+          [(ngModel)]="selectedDeploymentMethods" required>
         </ng-select>
       </div>
     </div>
-    <div class="form-group row mb-3">
+    <div class="form-group row mb-3" *ngIf="profileType === 'Manage' || profileType === 'Register'">
       <label class="col-sm-4 col-form-label" for="description">{{'PAGE.K8S.DESCRIPTION' | translate}}*</label>
       <div class="col-sm-8">
         <textarea class="form-control" placeholder="{{'PAGE.K8S.DESCRIPTION' | translate}}" type="text"
@@ -69,7 +77,7 @@
           required></textarea>
       </div>
     </div>
-    <div class="form-group row mb-3">
+    <div class="form-group row mb-3" *ngIf="profileType === 'Register'">
       <label class="col-sm-4 col-form-label" for="nets">{{'PAGE.K8S.NETS' | translate}}*</label>
       <div class="col-sm-8">
         <textarea rows="5" cols="50" class="form-control" placeholder="{{'PAGE.K8S.NETSPLACEHOLDER' | translate}}"
@@ -81,22 +89,58 @@
         </div>
       </div>
     </div>
-    <div class="form-group row mb-3">
+    <div class="form-group row mb-3" *ngIf="profileType === 'Register'">
       <label class="col-sm-4 col-form-label" for="credentials">{{'PAGE.K8S.CREDENTIALS' | translate}}*</label>
       <div class="col-sm-8">
-        <textarea rows="5" cols="50" class="form-control" placeholder="{{'YAMLCONFIG' | translate}}" formControlName="credentials"
-          id="credentials" [ngClass]="{ 'is-invalid': submitted && f.credentials.errors }" required></textarea>
+        <textarea rows="5" cols="50" class="form-control" placeholder="{{'YAMLCONFIG' | translate}}"
+          formControlName="credentials" id="credentials" [ngClass]="{ 'is-invalid': submitted && f.credentials.errors }"
+          required></textarea>
         <div class="fileupload-text mt-1 mb-1">{{'FILEUPLOADLABEL' | translate}}</div>
         <div class="custom-file">
-          <input type="file" #fileInputCredentials class="fileupload custom-file-input" (change)="credentialsFile($event.target.files)"
-            id="customFileCredentials">
+          <input type="file" #fileInputCredentials class="fileupload custom-file-input"
+            (change)="credentialsFile($event.target.files)" id="customFileCredentials">
         </div>
       </div>
     </div>
+    <div class="form-group row mb-3" *ngIf="profileType === 'Manage'">
+      <label class="col-sm-4 col-form-label" for="k8s_version">{{'PAGE.K8S.REGIONNAME' | translate}}</label>
+      <div class="col-sm-8">
+        <input autocomplete="off" class="form-control" placeholder="{{'PAGE.K8S.REGIONNAME' | translate}}" type="text"
+          formControlName="region_name" id="k8s_version"
+          [ngClass]="{ 'is-invalid': submitted && f.region_name.errors }">
+      </div>
+    </div>
+    <div class="form-group row mb-3" *ngIf="profileType === 'Manage'">
+      <label class="col-sm-4 col-form-label" for="k8s_version">{{'PAGE.K8S.RESOURCEGROUP' | translate}}</label>
+      <div class="col-sm-8">
+        <input autocomplete="off" class="form-control" placeholder="{{'PAGE.K8S.RESOURCEGROUP' | translate}}" type="text"
+          formControlName="resource_group" id="k8s_version"
+          [ngClass]="{ 'is-invalid': submitted && f.resource_group.errors }">
+      </div>
+    </div>
+    <div class="form-group row mb-3" *ngIf="profileType === 'Manage' || profileType === 'scale'">
+      <label class="col-sm-4 col-form-label" for="node_count">{{'PAGE.K8S.NODECOUNT' | translate}}*</label>
+      <div class="col-sm-8">
+        <input autocomplete="off" class="form-control" placeholder="{{'PAGE.K8S.NODECOUNT' | translate}}" type="text"
+          formControlName="node_count" id="node_count" [ngClass]="{ 'is-invalid': submitted && f.node_count.errors }"
+          required>
+      </div>
+    </div>
+    <div class="form-group row mb-3" *ngIf="profileType === 'Manage'">
+      <label class="col-sm-4 col-form-label" for="k8s_version">{{'PAGE.K8S.NODESIZE' | translate}}*</label>
+      <div class="col-sm-8">
+        <input autocomplete="off" class="form-control" placeholder="{{'PAGE.K8S.NODESIZE' | translate}}" type="text"
+          formControlName="node_size" id="k8s_version" [ngClass]="{ 'is-invalid': submitted && f.node_size.errors }"
+          required>
+      </div>
+    </div>
   </div>
   <div class="modal-footer">
     <button type="button" class="btn btn-danger" (click)="activeModal.close()">{{'CANCEL' | translate}}</button>
-    <button type="submit" class="btn btn-primary">{{'CREATE' | translate}}</button>
+    <button *ngIf="profileType === 'Manage' || profileType === 'Register'" type="submit"
+      class="btn btn-primary">{{'CREATE' | translate}}</button>
+    <button *ngIf="profileType === 'upgrade' || profileType === 'scale'" type="submit" class="btn btn-primary">{{'APPLY'
+      | translate}}</button>
   </div>
 </form>
 <app-loader [waitingMessage]="message" *ngIf="isLoadingResults"></app-loader>
\ No newline at end of file
diff --git a/src/app/k8s/k8s-add-cluster/K8sAddClusterComponent.ts b/src/app/k8s/k8s-add-cluster/K8sAddClusterComponent.ts
index 8115b6f..bb5dcfa 100644
--- a/src/app/k8s/k8s-add-cluster/K8sAddClusterComponent.ts
+++ b/src/app/k8s/k8s-add-cluster/K8sAddClusterComponent.ts
@@ -19,16 +19,17 @@
  * @file K8sAddClusterComponent.ts.
  */
 import { HttpHeaders } from '@angular/common/http';
-import { Component, ElementRef, Injector, OnInit, ViewChild } from '@angular/core';
-import { FormBuilder, FormGroup, Validators } from '@angular/forms';
+import { Component, ElementRef, Injector, Input, OnInit, ViewChild } from '@angular/core';
+import { AbstractControl, FormBuilder, FormGroup, Validators } from '@angular/forms';
 import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
 import { TranslateService } from '@ngx-translate/core';
 import { NotifierService } from 'angular-notifier';
 import { APIURLHEADER, ERRORDATA, MODALCLOSERESPONSEDATA, TYPESECTION } from 'CommonModel';
 import { environment } from 'environment';
 import * as jsyaml from 'js-yaml';
+import { K8SPayload } from 'K8sModel';
 import { RestService } from 'RestService';
-import { SharedService, isNullOrUndefined } from 'SharedService';
+import { SharedService } from 'SharedService';
 import { VimAccountDetails } from 'VimAccountModel';
 /**
  * Creating Component
@@ -50,6 +51,12 @@
   /** Contains all vim account collections */
   public vimAccountSelect: VimAccountDetails;
 
+  /** Input contains Modal dialog component Instance @public */
+  @Input() public profileType: string;
+
+  /** Input contains Modal dialog component Instance @public */
+  @Input() public profileID: string;
+
   /** Contains all deployment methods */
   public deploymentMethodsSelect: TYPESECTION[] = [];
 
@@ -57,7 +64,7 @@
   public deploymentMethodsSubmit: Map<string, boolean>;
 
   /** Contains all deployment methods selected */
-  public selectedDeploymentMethods: string[] = ['helm-chart', 'helm-chart-v3', 'juju-bundle'];
+  public selectedDeploymentMethods: string[] = ['helm-chart-v3', 'juju-bundle'];
 
   /** Instance for active modal service @public */
   public activeModal: NgbActiveModal;
@@ -65,9 +72,15 @@
   /** Variable set for twoway bindng @public  */
   public vimAccountId: string;
 
+  /** contains url @public  */
+  public clusterUrl: string;
+
   /** Form submission Add */
   public submitted: boolean = false;
 
+  /** contains payload */
+  public payload: K8SPayload;
+
   /** Check the loading results @public */
   public isLoadingResults: boolean = false;
 
@@ -114,10 +127,6 @@
     this.sharedService = this.injector.get(SharedService);
     this.deploymentMethodsSelect = [
       {
-        title: 'Helm v2',
-        value: 'helm-chart'
-      },
-      {
         title: 'Helm v3',
         value: 'helm-chart-v3'
       },
@@ -148,7 +157,11 @@
       description: ['', [Validators.required]],
       nets: ['', [Validators.required]],
       deployment_methods: ['', [Validators.required]],
-      credentials: ['', [Validators.required]]
+      credentials: ['', [Validators.required]],
+      region_name: [''],
+      resource_group: [''],
+      node_count: ['', [Validators.required]],
+      node_size: ['', [Validators.required]]
     });
   }
 
@@ -167,8 +180,57 @@
     });
   }
 
+
+  /** Contain selected vimAccount details @public */
+  public getDetailsvim(event: VimAccountDetails): void {
+    this.vimAccountId = event._id;
+  }
+
   /** On modal submit k8sAddClusterSubmit will called @public */
   public k8sAddClusterSubmit(): void {
+    if (this.profileType === 'Manage') {
+      this.getFormControl('nets').disable();
+      this.getFormControl('credentials').disable();
+      this.getFormControl('deployment_methods').disable();
+      this.manageCluster();
+    } else if (this.profileType === 'Register') {
+      this.clusterUrl = environment.K8SCREATECLUSTER_URL + '/register';
+      this.getFormControl('region_name').disable();
+      this.getFormControl('resource_group').disable();
+      this.getFormControl('node_count').disable();
+      this.getFormControl('node_size').disable();
+      this.registerCluster();
+    } else if (this.profileType === 'upgrade') {
+      this.clusterUrl = environment.K8SCREATECLUSTER_URL + '/' + this.profileID + '/' + 'upgrade';
+      this.getFormControl('region_name').disable();
+      this.getFormControl('resource_group').disable();
+      this.getFormControl('node_count').disable();
+      this.getFormControl('node_size').disable();
+      this.getFormControl('nets').disable();
+      this.getFormControl('credentials').disable();
+      this.getFormControl('deployment_methods').disable();
+      this.getFormControl('name').disable();
+      this.getFormControl('vim_account').disable();
+      this.getFormControl('description').disable();
+      this.updateCluster();
+    } else if (this.profileType === 'scale') {
+      this.clusterUrl = environment.K8SCREATECLUSTER_URL + '/' + this.profileID + '/' + 'scale';
+      this.getFormControl('region_name').disable();
+      this.getFormControl('resource_group').disable();
+      this.getFormControl('k8s_version').disable();
+      this.getFormControl('node_size').disable();
+      this.getFormControl('nets').disable();
+      this.getFormControl('credentials').disable();
+      this.getFormControl('deployment_methods').disable();
+      this.getFormControl('name').disable();
+      this.getFormControl('vim_account').disable();
+      this.getFormControl('description').disable();
+      this.updateCluster();
+    }
+  }
+
+  /** Register cluster @public */
+  public registerCluster(): void {
     this.submitted = true;
     this.sharedService.cleanForm(this.k8sclusterForm);
     if (this.k8sclusterForm.invalid) {
@@ -177,10 +239,6 @@
     const modalData: MODALCLOSERESPONSEDATA = {
       message: 'Done'
     };
-    const apiURLHeader: APIURLHEADER = {
-      url: environment.K8SCLUSTER_URL,
-      httpOptions: { headers: this.headers }
-    };
     const validJSONCredentails: boolean = this.sharedService.checkJson(this.k8sclusterForm.value.credentials);
     if (validJSONCredentails) {
       this.k8sclusterForm.value.credentials = jsyaml.load(this.k8sclusterForm.value.credentials.toString(), { json: true });
@@ -215,11 +273,65 @@
     // Transform values to json
     this.k8sclusterForm.value.deployment_methods = jsonDMObject;
 
+    this.k8sclusterForm.value.vim_account = this.vimAccountId;
+
+    const apiURLHeader: APIURLHEADER = {
+      url: this.clusterUrl,
+      httpOptions: { headers: this.headers }
+    };
+
     this.isLoadingResults = true;
     this.restService.postResource(apiURLHeader, this.k8sclusterForm.value).subscribe((result: {}) => {
       this.activeModal.close(modalData);
       this.isLoadingResults = false;
       this.notifierService.notify('success', this.k8sclusterForm.value.name +
+        this.translateService.instant('PAGE.K8S.REGISTEREDSUCCESSFULLY'));
+    }, (error: ERRORDATA) => {
+      this.restService.handleError(error, 'post');
+      this.isLoadingResults = false;
+    });
+  }
+
+  /** Manage cluster @public */
+  public manageCluster(): void {
+    this.submitted = true;
+    this.sharedService.cleanForm(this.k8sclusterForm);
+    if (this.k8sclusterForm.invalid) {
+      return;
+    }
+    const modalData: MODALCLOSERESPONSEDATA = {
+      message: 'Done'
+    };
+    const apiURLHeader: APIURLHEADER = {
+      url: environment.K8SCREATECLUSTER_URL,
+      httpOptions: { headers: this.headers }
+    };
+
+    this.isLoadingResults = true;
+    const payload: K8SPayload = {
+      name: this.k8sclusterForm.value.name,
+      vim_account: this.k8sclusterForm.value.vim_account,
+      location: this.k8sclusterForm.value.location,
+      region_name: this.k8sclusterForm.value.region_name,
+      resource_group: this.k8sclusterForm.value.resource_group,
+      k8s_version: this.k8sclusterForm.value.k8s_version,
+      node_size: this.k8sclusterForm.value.node_size,
+      node_count: Number(this.k8sclusterForm.value.node_count),
+      description: this.k8sclusterForm.value.description
+    };
+    if (this.k8sclusterForm.value.region_name === '') {
+      delete payload.region_name;
+    } else if (this.k8sclusterForm.value.resource_group === '') {
+      delete payload.resource_group;
+    }
+    if (this.k8sclusterForm.value.region_name === '' && this.k8sclusterForm.value.resource_group === '') {
+      delete payload.region_name;
+      delete payload.resource_group;
+    }
+    this.restService.postResource(apiURLHeader, payload).subscribe((result: {}) => {
+      this.activeModal.close(modalData);
+      this.isLoadingResults = false;
+      this.notifierService.notify('success', this.k8sclusterForm.value.name +
         this.translateService.instant('PAGE.K8S.CREATEDSUCCESSFULLY'));
     }, (error: ERRORDATA) => {
       this.restService.handleError(error, 'post');
@@ -227,6 +339,42 @@
     });
   }
 
+  /** Update cluster @public */
+  public updateCluster(): void {
+    this.submitted = true;
+    this.sharedService.cleanForm(this.k8sclusterForm);
+    if (this.k8sclusterForm.invalid) {
+      return;
+    }
+    const modalData: MODALCLOSERESPONSEDATA = {
+      message: 'Done'
+    };
+    const apiURLHeader: APIURLHEADER = {
+      url: this.clusterUrl,
+      httpOptions: { headers: this.headers }
+    };
+
+    this.isLoadingResults = true;
+    if (this.profileType === 'upgrade') {
+      this.payload = {
+        k8s_version: this.k8sclusterForm.value.k8s_version
+      };
+    } else if (this.profileType === 'scale') {
+      this.payload = {
+        node_count: this.k8sclusterForm.value.node_count
+      };
+    }
+    this.restService.postResource(apiURLHeader, this.payload).subscribe((result: {}) => {
+      this.activeModal.close(modalData);
+      this.isLoadingResults = false;
+      this.notifierService.notify('success',
+        this.translateService.instant('PAGE.K8S.UPDATEDSUCCESSFULLY'));
+    }, (error: ERRORDATA) => {
+      this.restService.handleError(error, 'post');
+      this.isLoadingResults = false;
+    });
+  }
+
   /** Nets file process @private */
   public netsFile(files: FileList): void {
     if (files && files.length === 1) {
@@ -270,4 +418,10 @@
     this.fileInputCredentialsLabel.nativeElement.innerText = files[0].name;
     this.fileInputCredentials.nativeElement.value = null;
   }
+
+  /** Used to get the AbstractControl of controlName passed @private */
+  private getFormControl(controlName: string): AbstractControl {
+    // eslint-disable-next-line security/detect-object-injection
+    return this.k8sclusterForm.controls[controlName];
+  }
 }
diff --git a/src/app/k8s/k8s-attach-detatch-profile/K8sAttachProfileComponent.html b/src/app/k8s/k8s-attach-detatch-profile/K8sAttachProfileComponent.html
new file mode 100644
index 0000000..c12c4c0
--- /dev/null
+++ b/src/app/k8s/k8s-attach-detatch-profile/K8sAttachProfileComponent.html
@@ -0,0 +1,73 @@
+<!--
+Copyright 2020 TATA ELXSI
+
+Licensed under the Apache License, Version 2.0 (the 'License');
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+  http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+
+Author: SANDHYA JS (sandhya.j@tataelxsi.co.in)
+-->
+<div class="modal-header">
+    <h4 class="modal-title" id="modal-basic-title">{{'PAGE.K8S.ATTACHDETATCHPROFILE' | translate}}</h4>
+    <button class="button-xs" type="button" class="close" aria-label="Close" (click)="activeModal.close()">
+        <i class="fas fa-times-circle text-danger"></i>
+    </button>
+</div>
+<form [formGroup]="attachForm" (ngSubmit)="attachProfile()">
+    <div class="modal-body" *ngIf="checkDetails" formArrayName="infra_config_profiles">
+        <div class="form-group row p-2 bg-light text-white projects-roles-head text-white justify-content-end">
+            <div class="col-4">
+                <button [disabled]="isAttach" type="button" class="btn btn-primary" (click)="addMapping()">
+                    <i class="fas fa-plus-circle"></i> {{'PAGE.K8S.ATTACHPROFILE' | translate}}</button>
+            </div>
+        </div>
+        <label class="col-sm-12 col-form-label mandatory-label ps-2"
+            [ngClass]="{'text-danger': attachForm.invalid === true && submitted === true}">{{'MANDATORYCHECK' |
+            translate}}</label>
+        <div *ngFor="let params of getControls(); let i = index;" [formGroupName]="i">
+            <div class="card bg-light">
+                <div class="card-body">
+                    <div class="form-group row">
+                        <label class="col-sm-3 col-md-3 col-form-label" for="profile_name_{{i}}">{{'PAGE.K8S.PROFILE' |
+                            translate}}*</label>
+                        <div class="col-sm-8 col-md-8">
+                            <ng-select placeholder="{{'SELECT' | translate}}" [items]="userDetails" bindLabel="name"
+                                bindValue="_id" formControlName="profile_name" id="profile_name_{{i}}"
+                                [ngClass]="{ 'is-invalid': submitted && params.controls.profile_name.errors }">
+                                <ng-option *ngFor="let option of userDetails" [value]="option._id">{{ option.name }}</ng-option>
+                            </ng-select>
+                        </div>
+                        <div class="col-sm-1"
+                            *ngIf="profileDetails.infra_config_profiles[i] ? profileDetails.infra_config_profiles[i].profile_name === '' : true">
+                            <button class="button-xs" type="button" class="delete" (click)="removeMapping(i)"
+                                placement="right" ngbTooltip="{{ 'CANCEL' | translate }}">
+                                <i class="fas fa-minus-circle text-danger"></i>
+                            </button>
+                        </div>
+                        <div class="col-sm-1"
+                            *ngIf="profileDetails.infra_config_profiles[i] ? profileDetails.infra_config_profiles[i].profile_name !== '' : false">
+                            <button class="button-xs" type="button" class="delete"
+                                (click)="deleteProfile(profileDetails.infra_config_profiles[i])"
+                                placement="right" ngbTooltip="{{ 'PAGE.K8S.DETATCH' | translate }}">
+                                <i class="fas fa-trash-alt text-danger"></i>
+                            </button>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+    <div class="modal-footer">
+        <button type="button" class="btn btn-danger" (click)="activeModal.close()">{{'CANCEL' | translate}}</button>
+        <button type="submit" class="btn btn-primary">{{'APPLY' | translate}}</button>
+    </div>
+</form>
+<app-loader [waitingMessage]="message" *ngIf="isLoadingResults"></app-loader>
\ No newline at end of file
diff --git a/src/app/k8s/k8s-attach-detatch-profile/K8sAttachProfileComponent.scss b/src/app/k8s/k8s-attach-detatch-profile/K8sAttachProfileComponent.scss
new file mode 100644
index 0000000..0f5abee
--- /dev/null
+++ b/src/app/k8s/k8s-attach-detatch-profile/K8sAttachProfileComponent.scss
@@ -0,0 +1,49 @@
+/*
+ Copyright 2020 TATA ELXSI
+
+ Licensed under the Apache License, Version 2.0 (the 'License');
+ you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+
+ Author: SANDHYA JS (sandhya.j@tataelxsi.co.in)
+*/
+.card{
+   border-radius: 15px;
+   width: auto;
+   height: auto;
+   margin-bottom: 5px;
+ }
+ 
+ .card-body{
+   flex: 1 1 auto;
+   min-height: 1px;
+   padding: 5px;
+ }
+ 
+ .form-group{
+   margin-bottom: 1px;
+ }
+ 
+ .col-sm-1{
+   position: relative;
+   bottom: 10px;
+ }
+ .modal-body .row{
+   margin-bottom: 0px;
+ }
+ .delete{
+   position: absolute;
+   top: 10px !important;
+   left: 3px;
+   border: 0;
+   font-size: 1.3125rem;
+   background-color: transparent;
+ }
\ No newline at end of file
diff --git a/src/app/k8s/k8s-attach-detatch-profile/K8sAttachProfileComponent.ts b/src/app/k8s/k8s-attach-detatch-profile/K8sAttachProfileComponent.ts
new file mode 100644
index 0000000..dcbe4ee
--- /dev/null
+++ b/src/app/k8s/k8s-attach-detatch-profile/K8sAttachProfileComponent.ts
@@ -0,0 +1,321 @@
+/*
+ Copyright 2020 TATA ELXSI
+
+ Licensed under the Apache License, Version 2.0 (the 'License');
+ you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+
+  http://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+
+ Author: SANDHYA JS (sandhya.j@tataelxsi.co.in)
+*/
+/**
+ * @file Attach Profile Component.
+ */
+import { HttpHeaders } from '@angular/common/http';
+import { ChangeDetectorRef, Component, Injector, Input, OnInit } from '@angular/core';
+import { AbstractControl, FormArray, FormBuilder, FormGroup, Validators } from '@angular/forms';
+import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
+import { TranslateService } from '@ngx-translate/core';
+import { NotifierService } from 'angular-notifier';
+import { APIURLHEADER, ERRORDATA, MODALCLOSERESPONSEDATA } from 'CommonModel';
+import { environment } from 'environment';
+import { K8SCreateCLUSTERDATA, K8SPayload, ProfileMap, ProfileMappings } from 'K8sModel';
+import { RestService } from 'RestService';
+/**
+ * Creating Component
+ * @Component takes K8sAttachProfileComponent.html as template url
+ */
+@Component({
+    selector: 'app-k8s-attach-profile',
+    templateUrl: './K8sAttachProfileComponent.html',
+    styleUrls: ['./K8sAttachProfileComponent.scss']
+})
+/** Exporting a class @exports K8sAttachProfileComponent */
+export class K8sAttachProfileComponent implements OnInit {
+    /** To inject services @public */
+    public injector: Injector;
+
+    /** Instance for active modal service @public */
+    public activeModal: NgbActiveModal;
+
+    /** FormGroup user Edit Account added to the form @ html @public */
+    public attachForm: FormGroup;
+
+    /** Form submission Add */
+    public submitted: boolean = false;
+
+    /** Form submission Add */
+    public selectedData: string;
+
+    /** Input contains Modal dialog component Instance @private */
+    @Input() public userTitle: string;
+
+    /** Input contains Modal dialog component Instance @private */
+    @Input() public userID: string;
+
+    /** Contains user details information @public */
+    public userDetails: K8SCreateCLUSTERDATA[];
+
+    /** Contains user details information @public */
+    public filterDetails: K8SCreateCLUSTERDATA[];
+
+    /** Contains user details information @public */
+    public checkDetails: K8SCreateCLUSTERDATA[];
+
+    /** Contains user details information @public */
+    public profileDetails: K8SCreateCLUSTERDATA;
+
+    /** Contains user details information @public */
+    public count: number;
+
+    /** Profile Mapping @public */
+    public profileMap: ProfileMap = {};
+
+    /** Check the loading results @public */
+    public isLoadingResults: boolean = false;
+
+    /** Give the message for the loading @public */
+    public message: string = 'PLEASEWAIT';
+
+    /** Input contains Modal dialog component Instance @public */
+    @Input() public profileType: string;
+
+    /** Input contains Modal dialog component Instance @public */
+    @Input() public profileID: string;
+
+    /** Give the message for the loading @public */
+    public profileUrl: string;
+
+    /** Give the message for the loading @public */
+    public isAttach: boolean = false;
+
+    /** Instance of the rest service @private */
+    private restService: RestService;
+
+    /** FormBuilder instance added to the formBuilder @private */
+    private formBuilder: FormBuilder;
+
+    /** Controls the header form @private */
+    private headers: HttpHeaders;
+
+    /** Notifier service to popup notification @private */
+    private notifierService: NotifierService;
+
+    /** Contains tranlsate instance @private */
+    private translateService: TranslateService;
+
+    /** Profile Form array @private */
+    private attachFormArray: FormArray;
+
+    /** Detect changes for the User Input */
+    private cd: ChangeDetectorRef;
+
+    constructor(injector: Injector) {
+        this.injector = injector;
+        this.formBuilder = this.injector.get(FormBuilder);
+        this.restService = this.injector.get(RestService);
+        this.activeModal = this.injector.get(NgbActiveModal);
+        this.notifierService = this.injector.get(NotifierService);
+        this.translateService = this.injector.get(TranslateService);
+        this.cd = this.injector.get(ChangeDetectorRef);
+    }
+
+    /** Generate primitive params @public */
+    get profileParamsBuilder(): FormGroup {
+        return this.formBuilder.group({
+            profile_name: [null, [Validators.required]]
+        });
+    }
+
+    /** convenience getter for easy access to form fields */
+    get f(): FormGroup['controls'] { return this.attachForm.controls; }
+
+    /** Lifecyle Hooks the trigger before component is instantiate @public */
+    public ngOnInit(): void {
+        this.headers = new HttpHeaders({
+            'Content-Type': 'application/json',
+            Accept: 'application/json',
+            'Cache-Control': 'no-cache, no-store, must-revalidate, max-age=0'
+        });
+        this.initializeForm();
+        this.generateData();
+        this.generateProfile();
+    }
+
+    /** Initializing Form Action  @public */
+    public initializeForm(): void {
+        this.attachForm = this.formBuilder.group({
+            infra_config_profiles: this.formBuilder.array([])
+        });
+    }
+
+    /** Handle FormArray Controls @public */
+    public getControls(): AbstractControl[] {
+        return (this.attachForm.get('infra_config_profiles') as FormArray).controls;
+    }
+
+    /** Fetching the data from server to Load in the smarttable @public */
+    public generateData(): void {
+        if (this.profileID !== '') {
+            this.isLoadingResults = true;
+            if (this.profileType === 'infra-config') {
+                this.profileUrl = environment.K8SCREATECLUSTER_URL + '/' + this.profileID + '/' + 'infra_config_profiles';
+            } else if (this.profileType === 'infra-controller') {
+                this.profileUrl = environment.K8SCREATECLUSTER_URL + '/' + this.profileID + '/' + 'infra_controller_profiles';
+            } else if (this.profileType === 'app-profile') {
+                this.profileUrl = environment.K8SCREATECLUSTER_URL + '/' + this.profileID + '/' + 'app_profiles';
+            } else if (this.profileType === 'resource-profile') {
+                this.profileUrl = environment.K8SCREATECLUSTER_URL + '/' + this.profileID + '/' + 'resource_profiles';
+            }
+            this.restService.getResource(this.profileUrl).subscribe((userDetail: K8SCreateCLUSTERDATA[]): void => {
+                this.checkDetails = userDetail;
+                this.filterDetails = this.checkDetails.filter((itemData: K8SCreateCLUSTERDATA): boolean => itemData.default === false);
+                if (this.filterDetails.length !== 0) {
+                    this.filterDetails.forEach((datas: K8SCreateCLUSTERDATA): void => {
+                        let profileData: ProfileMappings[] = [];
+                        profileData = this.filterDetails.map((item) => ({
+                            name: item.name,
+                            _id: item._id
+                        }));
+                        this.profileDetails = { infra_config_profiles: profileData };
+                    });
+                    this.count = this.profileDetails.infra_config_profiles.length;
+                    this.loadMapping();
+                } else {
+                    this.profileDetails = { infra_config_profiles: [] };
+                }
+                this.isLoadingResults = false;
+            }, (error: ERRORDATA): void => {
+                this.isLoadingResults = false;
+                this.restService.handleError(error, 'get');
+            });
+        }
+    }
+
+    /** Fetching the data from server to Load in the smarttable @public */
+    public generateProfile(): void {
+        this.isLoadingResults = true;
+        if (this.profileType === 'infra-config') {
+            this.profileUrl = environment.K8SINFRACONFIGPROFILE_URL;
+        } else if (this.profileType === 'infra-controller') {
+            this.profileUrl = environment.K8SINFRACONTROLLERPROFILE_URL;
+        } else if (this.profileType === 'app-profile') {
+            this.profileUrl = environment.K8SAPPPROFILE_URL;
+        } else if (this.profileType === 'resource-profile') {
+            this.profileUrl = environment.K8SRESOURCEPROFILE_URL;
+        }
+        this.restService.getResource(this.profileUrl).subscribe((userDetail: K8SCreateCLUSTERDATA[]): void => {
+            this.userDetails = userDetail.filter((itemData: K8SCreateCLUSTERDATA): boolean => itemData.default === false);
+            this.isLoadingResults = false;
+        }, (error: ERRORDATA): void => {
+            this.isLoadingResults = false;
+            this.restService.handleError(error, 'get');
+        });
+    }
+
+    /** Set all profile values to the form @public */
+    public loadMapping(): void {
+        this.profileDetails.infra_config_profiles.forEach((datas: ProfileMappings): void => {
+            this.attachFormArray = this.attachForm.get('infra_config_profiles') as FormArray;
+            const control = this.formBuilder.group({
+                profile_name: [datas._id]
+            });
+            this.attachFormArray.push(control);
+        });
+    }
+
+    /** Remove profile from the list @public */
+    public removeMapping(index: number): void {
+        this.attachFormArray.removeAt(index);
+        this.isAttach = false;
+    }
+
+    /** Submit profile @public */
+    public attachProfile(): void {
+        this.submitted = true;
+        const modalData: MODALCLOSERESPONSEDATA = {
+            message: 'Done'
+        };
+        if (this.attachForm.invalid) { return; }
+        if (this.profileType === 'infra-config') {
+            this.profileUrl = environment.K8SCREATECLUSTER_URL + '/' + this.profileID + '/' + 'infra_config_profiles';
+        } else if (this.profileType === 'infra-controller') {
+            this.profileUrl = environment.K8SCREATECLUSTER_URL + '/' + this.profileID + '/' + 'infra_controller_profiles';
+        } else if (this.profileType === 'app-profile') {
+            this.profileUrl = environment.K8SCREATECLUSTER_URL + '/' + this.profileID + '/' + 'app_profiles';
+        } else if (this.profileType === 'resource-profile') {
+            this.profileUrl = environment.K8SCREATECLUSTER_URL + '/' + this.profileID + '/' + 'resource_profiles';
+        }
+        const apiURLHeader: APIURLHEADER = {
+            url: this.profileUrl
+        };
+        this.profileMap.add_profile = [];
+        this.attachForm.value.infra_config_profiles.forEach((res: ProfileMappings): void => {
+            this.profileMap.add_profile.push({ id: res.profile_name });
+        });
+        this.profileMap.add_profile.splice(0, this.count);
+        if (this.profileMap.add_profile.length !== 0) {
+            if (!this.attachForm.dirty) {
+                this.notifierService.notify('warning', this.translateService.instant('PAGE.TOPOLOGY.DATAEMPTY'));
+                return;
+            }
+            this.isLoadingResults = true;
+            this.restService.patchResource(apiURLHeader, this.profileMap).subscribe((result: {}): void => {
+                this.isLoadingResults = false;
+                this.activeModal.close(modalData);
+                this.notifierService.notify('success', this.translateService.instant('PAGE.K8S.ATTACHEDSUCCESSFULLY'));
+            }, (error: ERRORDATA): void => {
+                this.isLoadingResults = false;
+                this.restService.handleError(error, 'patch');
+            });
+        } else {
+            this.notifierService.notify('error', this.translateService.instant('PAGE.K8S.WARNING'));
+        }
+    }
+
+    /** Add extra mapping and set empty profile @public */
+    public addMapping(): void {
+        this.attachFormArray = this.attachForm.get('infra_config_profiles') as FormArray;
+        this.attachFormArray.push(this.profileParamsBuilder);
+        if ((this.attachFormArray.value.length === this.count + 1) || (this.attachFormArray.value.length === 1)) {
+            this.isAttach = true;
+        }
+    }
+
+    /** Remove profile @public */
+    public deleteProfile(getProfile: ProfileMappings): void {
+        const modalData: MODALCLOSERESPONSEDATA = {
+            message: 'Done'
+        };
+        const removeProfile: ProfileMap = { remove_profile: [] };
+        removeProfile.remove_profile = [{ id: getProfile._id }];
+        if (this.profileType === 'infra-config') {
+            this.profileUrl = environment.K8SCREATECLUSTER_URL + '/' + this.profileID + '/' + 'infra_config_profiles';
+        } else if (this.profileType === 'infra-controller') {
+            this.profileUrl = environment.K8SCREATECLUSTER_URL + '/' + this.profileID + '/' + 'infra_controller_profiles';
+        } else if (this.profileType === 'app-profile') {
+            this.profileUrl = environment.K8SCREATECLUSTER_URL + '/' + this.profileID + '/' + 'app_profiles';
+        } else if (this.profileType === 'resource-profile') {
+            this.profileUrl = environment.K8SCREATECLUSTER_URL + '/' + this.profileID + '/' + 'resource_profiles';
+        }
+        const apiURLHeader: APIURLHEADER = {
+            url: this.profileUrl
+        };
+        this.isLoadingResults = true;
+        this.restService.patchResource(apiURLHeader, removeProfile).subscribe((result: {}): void => {
+            this.isLoadingResults = false;
+            this.activeModal.close(modalData);
+            this.notifierService.notify('success', this.translateService.instant('PAGE.K8S.DETATCHEDSUCCESSFULLY'));
+        }, (error: ERRORDATA): void => {
+            this.isLoadingResults = false;
+            this.restService.handleError(error, 'patch');
+        });
+    }
+}
diff --git a/src/app/k8s/k8s-ksu/ksu-add/KSUAddComponent.html b/src/app/k8s/k8s-ksu/ksu-add/KSUAddComponent.html
new file mode 100644
index 0000000..e75cc7e
--- /dev/null
+++ b/src/app/k8s/k8s-ksu/ksu-add/KSUAddComponent.html
@@ -0,0 +1,126 @@
+<!--
+Copyright 2020 TATA ELXSI
+
+Licensed under the Apache License, Version 2.0 (the 'License');
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+  http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+
+Author: SANDHYA JS (sandhya.j@tataelxsi.co.in)
+-->
+<form [formGroup]="KsuForm" (ngSubmit)="KSUAddSubmit();">
+    <div class="modal-header">
+        <h4 *ngIf="profileType === 'add'" class="modal-title" id="modal-basic-title">{{'PAGE.K8S.ADDKSU' | translate}}</h4>
+        <h4 *ngIf="profileType === 'edit'"class="modal-title" id="modal-basic-title">{{'PAGE.K8S.EDITKSU' | translate}}</h4>
+        <h4 *ngIf="profileType === 'move'"class="modal-title" id="modal-basic-title">{{'PAGE.K8S.MOVE' | translate}}</h4>
+        <h4 *ngIf="profileType === 'clone'"class="modal-title" id="modal-basic-title">{{'PAGE.K8S.CLONE' | translate}}</h4>
+        <button class="button-xs" type="button" class="close" aria-label="Close" (click)="activeModal.close()">
+            <i class="fas fa-times-circle text-danger"></i>
+        </button>
+    </div>
+    <div class="modal-body modal-body-custom-height">
+        <div class="form-group row mb-3" *ngIf="isClone || isKsu">
+            <label class="col-sm-12 col-form-label mandatory-label"
+                [ngClass]="{'text-danger': KsuForm.invalid === true && submitted === true}">{{'MANDATORYCHECK' |
+                translate}}</label>
+            <label class="col-sm-4 col-form-label" for="name">{{'PAGE.K8S.NAME' | translate}}*</label>
+            <div class="col-sm-8">
+                <input autocomplete="off" class="form-control" placeholder="{{'PAGE.K8S.NAME' | translate}}" type="text"
+                    formControlName="name" id="name" [ngClass]="{ 'is-invalid': submitted && f.name.errors }" required>
+            </div>
+        </div>
+        <div class="form-group row mb-3"*ngIf="isKsu">
+            <label class="col-sm-4 col-form-label" for="description">{{'PAGE.K8S.DESCRIPTION' | translate}}*</label>
+            <div class="col-sm-8">
+                <textarea class="form-control" placeholder="{{'PAGE.K8S.DESCRIPTION' | translate}}" type="text"
+                    formControlName="description" id="description"
+                    [ngClass]="{ 'is-invalid': submitted && f.description.errors }" required></textarea>
+            </div>
+        </div>
+        <div class="form-group row mb-3" *ngIf="isClone || isMove || isKsu">
+            <label class="col-sm-4 col-form-label" for="profile_type">{{'PAGE.K8S.PROFILETYPE' | translate}}*</label>
+            <div class="col-sm-8">
+                <ng-select (change)="getprofileDetails($event.value)"
+                    placeholder="{{'SELECT' | translate}} {{'TYPE' | translate}}" [items]="profileSelect"
+                    bindLabel="title" bindValue="value" formControlName="profile_type" id="profile_type"
+                    [ngClass]="{ 'is-invalid': submitted && f.profile_type.errors }" required>
+                </ng-select>
+            </div>
+        </div>
+        <div class="form-group row mb-3" *ngIf="isClone || isMove || isKsu">
+            <label class="col-sm-4 col-form-label" for="id">{{'PAGE.K8S.PROFILENAME' | translate}}*</label>
+            <div class="col-sm-8">
+                <ng-select placeholder=" {{'SELECT' | translate}} {{'NAME' |
+                    translate}}" [items]="profileDetails" bindLabel="name" bindValue="id" formControlName="id" id="id"
+                    [ngClass]="{ 'is-invalid': submitted && f.id.errors }" required>
+                </ng-select>
+            </div>
+        </div>
+        <div class="form-group row p-2 bg-light text-white justify-content-end mb-3"*ngIf="isKsu">
+            <div class="col-4">
+                <button class="button-xs" type="button" class="btn btn-primary" (click)="addOka()">
+                    <i class="fas fa-plus-circle"></i>{{'PAGE.K8S.SELECTOKA' | translate}}</button>
+            </div>
+        </div>
+        <ng-container *ngIf="isKsu">
+            <div formArrayName="oka" *ngFor="let params of getControls(); let i = index;">
+                <div class="form-group row" [formGroupName]="i">
+                    <div class="card bg-light">
+                        <div class="card-body">
+                            <div class="form-group row">
+                                <label class="col-sm-3 col-md-3 col-form-label" for="_id{{i}}">{{'PAGE.K8S.OKA' |
+                                    translate}}</label>
+                                <div class="col-sm-8 col-md-8">
+                                    <ng-select
+                                        placeholder="{{'SELECT' | translate}} {{'PAGE.K8S.OKANAME' | translate}}" [items]="okaDetail" bindLabel="name"
+                                        bindValue="id" formControlName="_id" id="_id{{i}}"
+                                        [ngClass]="{ 'is-invalid': submitted && params.controls._id.errors }">
+                                    </ng-select>
+                                    <div class="fileupload-text mt-1 mb-1">or {{'PAGE.K8S.PATH' | translate}}</div>
+                                <div class="col-sm-8 col-md-8">
+                                    <input autocomplete="off" class="form-control"
+                                        placeholder="{{'PAGE.K8S.PATH' | translate}}" type="text" formControlName="sw_catalog_path"
+                                        id="sw_catalog_path" [ngClass]="{ 'is-invalid': submitted && params.controls.sw_catalog_path.errors }">
+                                </div>
+                                </div>
+                                <label class="col-sm-3 col-md-3 col-form-label"
+                                    for="transformation{{i}}">{{'PAGE.K8S.TRANSFORMFILE' |
+                                    translate}}</label>
+                                <div class="col-sm-8 col-md-8">
+                                    <textarea rows="5" cols="50" class="form-control" placeholder="{{'YAMLCONFIG' | translate}}"
+                                        formControlName="transformation" id="transformation"></textarea>
+                                    <div class="fileupload-text mt-1 mb-1">{{'FILEUPLOADLABEL' | translate}}</div>
+                                    <div class="custom-file">
+                                        <input type="file" #fileInputConfig class="fileupload custom-file-input"
+                                            (change)="configFile($event.target.files)" id="customConfigFile">
+                                    </div>
+                                </div>
+                                <div class="col-sm-1">
+                                    <button class="button-xs" type="button" class="close" (click)="removeMapping(i)"
+                                        placement="right" ngbTooltip="{{ 'CANCEL' | translate }}">
+                                        <i class="fas fa-minus-circle text-danger"></i>
+                                    </button>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </ng-container>
+    </div>
+    <div class="modal-footer">
+        <button type="button" class="btn btn-danger" (click)="activeModal.close()">{{'CANCEL' | translate}}</button>
+        <button *ngIf="profileType === 'add'" type="submit" class="btn btn-primary">{{'CREATE' | translate}}</button>
+        <button *ngIf="profileType === 'edit'" type="submit" class="btn btn-primary">{{'Edit' | translate}}</button>
+        <button *ngIf="profileType === 'move'" type="submit" class="btn btn-primary">{{'Move' | translate}}</button>
+        <button *ngIf="profileType === 'clone'" type="submit" class="btn btn-primary">{{'Clone' | translate}}</button>
+    </div>
+</form>
+<app-loader [waitingMessage]="message" *ngIf="isLoadingResults"></app-loader>
\ No newline at end of file
diff --git a/src/app/k8s/k8s-ksu/ksu-add/KSUAddComponent.scss b/src/app/k8s/k8s-ksu/ksu-add/KSUAddComponent.scss
new file mode 100644
index 0000000..c55461a
--- /dev/null
+++ b/src/app/k8s/k8s-ksu/ksu-add/KSUAddComponent.scss
@@ -0,0 +1,17 @@
+/*
+ Copyright 2020 TATA ELXSI
+
+ Licensed under the Apache License, Version 2.0 (the 'License');
+ you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+
+ Author: SANDHYA JS (sandhya.j@tataelxsi.co.in)
+*/
\ No newline at end of file
diff --git a/src/app/k8s/k8s-ksu/ksu-add/KSUAddComponent.ts b/src/app/k8s/k8s-ksu/ksu-add/KSUAddComponent.ts
new file mode 100644
index 0000000..26f86f1
--- /dev/null
+++ b/src/app/k8s/k8s-ksu/ksu-add/KSUAddComponent.ts
@@ -0,0 +1,481 @@
+/*
+ Copyright 2020 TATA ELXSI
+
+ Licensed under the Apache License, Version 2.0 (the 'License');
+ you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+
+  http://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+
+ Author: SANDHYA JS (sandhya.j@tataelxsi.co.in)
+*/
+/**
+ * @file KSUAddComponent.ts.
+ */
+import { HttpHeaders } from '@angular/common/http';
+import { Component, ElementRef, Injector, Input, OnInit, ViewChild } from '@angular/core';
+import { AbstractControl, FormArray, FormBuilder, FormGroup, Validators } from '@angular/forms';
+import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
+import { TranslateService } from '@ngx-translate/core';
+import { NotifierService } from 'angular-notifier';
+import { APIURLHEADER, ERRORDATA, MODALCLOSERESPONSEDATA, TYPESECTION, URLPARAMS } from 'CommonModel';
+import { environment } from 'environment';
+import * as jsyaml from 'js-yaml';
+import { INFRACONFIGPAYLOAD, KSU, OKA } from 'K8sModel';
+import { RestService } from 'RestService';
+import { isNullOrUndefined, SharedService } from 'SharedService';
+/**
+ * Creating Component
+ * @Component takes KSUAddComponent.html as template url
+ */
+@Component({
+    selector: 'app-ksu-add',
+    templateUrl: './KSUAddComponent.html',
+    styleUrls: ['./KSUAddComponent.scss']
+})
+/** Exporting a class @exports KSUAddComponent */
+export class KSUAddComponent implements OnInit {
+    /** To inject services @public */
+    public injector: Injector;
+
+    /** FormGroup instance added to the form @ html @public */
+    public KsuForm: FormGroup;
+
+    /** Contains all deployment methods */
+    public profileSelect: TYPESECTION[] = [];
+
+    /** Instance for active modal service @public */
+    public activeModal: NgbActiveModal;
+
+    /** Form submission Add */
+    public submitted: boolean = false;
+
+    /** check move action */
+    public isMove: boolean = false;
+
+    /** check clone action */
+    public isClone: boolean = false;
+
+    /** check KSU */
+    public isKsu: boolean = false;
+
+    /** Check the loading results @public */
+    public isLoadingResults: boolean = false;
+
+    /** Give the message for the loading @public */
+    public message: string = 'PLEASEWAIT';
+
+    /** contains url @public */
+    public profileUrl: string;
+
+    /** contains profileData @public */
+    public profileData: {}[] = [];
+
+    /** OKA array @private */
+    private okaArray: FormArray;
+
+    /** contains profile details @public */
+    public profileDetails: {}[];
+
+    /** contains Oka Data @public */
+    public okaData: {}[] = [];
+
+    /** contains OKA details @public */
+    public okaDetail: {}[];
+
+    /** contains payload @public */
+    public payload: INFRACONFIGPAYLOAD | KSU;
+
+    /** oka Form array @private */
+    private okaFormArray: FormArray;
+
+    /** Input contains Modal dialog component Instance @public */
+    @Input() public profileType: string;
+
+    /** Input contains Modal dialog component Instance @public */
+    @Input() public profileID: string;
+
+    /** Element ref for fileInputConfig @public */
+    @ViewChild('fileInputConfig') fileInputConfig: ElementRef<HTMLInputElement>;
+
+    /** Element ref for fileInputConfigLabel @public */
+    @ViewChild('fileInputConfigLabel') fileInputConfigLabel: ElementRef<HTMLLabelElement>;
+
+    /** FormBuilder instance added to the formBuilder @private */
+    private formBuilder: FormBuilder;
+
+    /** Utilizes rest service for any CRUD operations @private */
+    private restService: RestService;
+
+    /** Notifier service to popup notification @private */
+    private notifierService: NotifierService;
+
+    /** Contains tranlsate instance @private */
+    private translateService: TranslateService;
+
+    /** Controls the header form @private */
+    private headers: HttpHeaders;
+
+    /** Contains all methods related to shared @private */
+    private sharedService: SharedService;
+
+    constructor(injector: Injector) {
+        this.injector = injector;
+        this.restService = this.injector.get(RestService);
+        this.activeModal = this.injector.get(NgbActiveModal);
+        this.formBuilder = this.injector.get(FormBuilder);
+        this.notifierService = this.injector.get(NotifierService);
+        this.translateService = this.injector.get(TranslateService);
+        this.sharedService = this.injector.get(SharedService);
+        this.profileSelect = [
+            {
+                title: 'Infra Config Profile',
+                value: 'infra_config_profiles'
+            },
+            {
+                title: 'Infra Controller Profile',
+                value: 'infra_controller_profiles'
+            }, {
+                title: 'App Profile',
+                value: 'app_profiles'
+            }, {
+                title: 'Resource Profile',
+                value: 'resource_profiles'
+            }
+        ];
+    }
+
+    public ngOnInit(): void {
+        /** On Initializing call the methods */
+        this.KsuFormAction();
+        this.headers = new HttpHeaders({
+            Accept: 'application/json',
+            'Content-Type': 'application/json',
+            'Cache-Control': 'no-cache, no-store, must-revalidate, max-age=0'
+        });
+        this.okaDetails();
+        if (this.profileType === 'clone') {
+            this.isClone = true;
+        } else if (this.profileType === 'move') {
+            this.isMove = true;
+        } else if (this.profileType === 'edit') {
+            this.isKsu = true;
+            this.getksuDetails();
+        } else {
+            this.isKsu = true;
+        }
+    }
+
+    /** Generate primitive params @public */
+    get okaParamsBuilder(): FormGroup {
+        return this.formBuilder.group({
+            _id: [null],
+            sw_catalog_path: [null],
+            transformation: [null]
+        });
+    }
+
+
+    /** On modal initializing forms  @public */
+    public KsuFormAction(): void {
+        this.KsuForm = this.formBuilder.group({
+            name: ['', [Validators.required]],
+            description: ['', [Validators.required]],
+            profile_type: [null, [Validators.required]],
+            id: [null, [Validators.required]],
+            oka: this.formBuilder.array([])
+        });
+    }
+
+    /** Handle FormArray Controls @public */
+    public getControls(): AbstractControl[] {
+        return (this.KsuForm.get('oka') as FormArray).controls;
+    }
+
+    /** convenience getter for easy access to form fields */
+    get f(): FormGroup['controls'] { return this.KsuForm.controls; }
+
+    /** Get OKA details @public */
+    public okaDetails(): void {
+        this.isLoadingResults = true;
+        this.restService.getResource(environment.OKAPACKAGES_URL)
+            .subscribe((okaData: []): void => {
+                okaData.forEach((okaDetail: INFRACONFIGPAYLOAD): void => {
+                    const oka: {} = {
+                        name: okaDetail.name,
+                        id: okaDetail._id
+                    };
+                    this.okaData.push(oka);
+                });
+                this.okaDetail = this.okaData;
+                this.isLoadingResults = false;
+            }, (error: ERRORDATA): void => {
+                this.isLoadingResults = false;
+                this.restService.handleError(error, 'get');
+            });
+    }
+
+    /** Get KSU details @public */
+    public getksuDetails(): void {
+        this.restService.getResource(environment.KSU_URL + '/' + this.profileID)
+            .subscribe((ksuData: KSU): void => {
+                this.KsuForm.patchValue({ id: ksuData.profile._id, name: ksuData.name, description: ksuData.description, profile_type: ksuData.profile.profile_type });
+                this.getprofileDetails(this.KsuForm.value.profile_type, ksuData.profile.name);
+                ksuData.oka.forEach((data: OKA): void => {
+                    this.okaArray = this.KsuForm.get('oka') as FormArray;
+                    const transformations: string = JSON.stringify(data.transformation);
+                    if (!isNullOrUndefined(data._id)) {
+                        data.sw_catalog_path = null;
+                    } else if (!isNullOrUndefined(data.sw_catalog_path)) {
+                        data._id = null;
+                    }
+                    const okaFormGroup = this.formBuilder.group({
+                        _id: data._id,
+                        sw_catalog_path: data.sw_catalog_path,
+                        transformation: transformations
+                    });
+                    this.okaArray.push(okaFormGroup);
+                });
+            }, (error: ERRORDATA): void => {
+                this.restService.handleError(error, 'get');
+            });
+    }
+
+
+    /** On modal submit ksuAddSubmit will called @public */
+    public KSUAddSubmit(): void {
+        if (this.profileType === 'move') {
+            this.profileUrl = environment.KSU_URL + '/' + this.profileID + '/move';
+            this.payload = {
+                profile: {
+                    _id: this.KsuForm.value.id,
+                    profile_type: this.KsuForm.value.profile_type
+                }
+            };
+            this.getFormControl('description').disable();
+            this.getFormControl('oka').disable();
+            this.getFormControl('name').disable();
+        } else if (this.profileType === 'clone') {
+            this.getFormControl('description').disable();
+            this.getFormControl('oka').disable();
+            this.profileUrl = environment.KSU_URL + '/' + this.profileID + '/clone';
+            this.payload = {
+                name: this.KsuForm.value.name,
+                profile: {
+                    _id: this.KsuForm.value.id,
+                    profile_type: this.KsuForm.value.profile_type
+                }
+            };
+        } else if (this.profileType === 'edit' || this.profileType === 'add') {
+            this.addEditKSU();
+        }
+        this.submitted = true;
+        this.sharedService.cleanForm(this.KsuForm);
+        if (this.KsuForm.invalid) {
+            return;
+        }
+        if (this.profileType === 'edit') {
+            this.editKSU();
+        } else {
+            this.addKSU();
+        }
+    }
+
+    /** Add/Edit KSU @public */
+    public addEditKSU(): void {
+        this.okaArray = this.KsuForm.get('oka') as FormArray;
+        const transValue = this.okaArray.at(0).get('transformation').value;
+        const validJSON: boolean = this.sharedService.checkJson(transValue);
+        if (validJSON) {
+            for (let i = 0; i < this.okaArray.length; i++) {
+                const formGroup = this.okaArray.at(i) as FormGroup;
+                formGroup.patchValue({
+                    transformation: JSON.parse(transValue)
+                });
+            }
+        } else {
+            const getConfigJson: string = jsyaml.load(transValue, { json: true });
+            for (let i = 0; i < this.okaArray.length; i++) {
+                const formGroup = this.okaArray.at(i) as FormGroup;
+                formGroup.patchValue({
+                    transformation: JSON.parse(getConfigJson)
+                });
+            }
+        }
+        if (this.profileType === 'edit') {
+            this.profileUrl = environment.KSU_URL + '/' + this.profileID;
+            this.payload = {
+                name: this.KsuForm.value.name,
+                description: this.KsuForm.value.description,
+                profile: {
+                    _id: this.KsuForm.value.id,
+                    sw_catalog_path: this.KsuForm.value.sw_catalog_path,
+                    profile_type: this.KsuForm.value.profile_type
+                },
+                oka: this.KsuForm.value.oka
+            };
+        } else {
+            this.profileUrl = environment.KSU_URL;
+            this.payload = {
+                ksus: [{
+                    name: this.KsuForm.value.name,
+                    description: this.KsuForm.value.description,
+                    profile: {
+                        _id: this.KsuForm.value.id,
+                        sw_catalog_path: this.KsuForm.value.sw_catalog_path,
+                        profile_type: this.KsuForm.value.profile_type
+                    },
+                    oka: this.KsuForm.value.oka
+                }]
+            };
+        }
+    }
+    /** Add/move/clone KSU @public */
+    public addKSU(): void {
+        this.isLoadingResults = true;
+        const modalData: MODALCLOSERESPONSEDATA = {
+            message: 'Done'
+        };
+        const apiURLHeader: APIURLHEADER = {
+            url: this.profileUrl,
+            httpOptions: { headers: this.headers }
+        };
+        this.restService.postResource(apiURLHeader, this.payload).subscribe((result: {}) => {
+            this.activeModal.close(modalData);
+            this.isLoadingResults = false;
+            if (this.profileType === 'move') {
+                this.notifierService.notify('success',
+                    this.translateService.instant('PAGE.K8S.MOVEDSUCCESSFULLY'));
+            } else if (this.profileType === 'clone') {
+                this.notifierService.notify('success',
+                    this.translateService.instant('PAGE.K8S.CLONEDSUCCESSFULLY'));
+            } else {
+                this.notifierService.notify('success',
+                    this.translateService.instant('PAGE.K8S.KSUCREATEDSUCCESSFULLY'));
+            }
+        }, (error: ERRORDATA) => {
+            this.restService.handleError(error, 'post');
+            // eslint-disable-next-line @typescript-eslint/no-magic-numbers
+            if (error.error.status === 422 || error.error.status === 400) {
+                this.activeModal.close(modalData);
+            }
+            this.isLoadingResults = false;
+        });
+    }
+
+    /** Edit KSU @public */
+    public editKSU(): void {
+        this.isLoadingResults = true;
+        const modalData: MODALCLOSERESPONSEDATA = {
+            message: 'Done'
+        };
+        const apiURLHeader: APIURLHEADER = {
+            url: this.profileUrl,
+            httpOptions: { headers: this.headers }
+        };
+        this.restService.patchResource(apiURLHeader, this.payload).subscribe((result: {}) => {
+            this.activeModal.close(modalData);
+            this.isLoadingResults = false;
+            this.notifierService.notify('success',
+                this.translateService.instant('PAGE.K8S.KSUEDITEDSUCCESSFULLY'));
+        }, (error: ERRORDATA) => {
+            this.restService.handleError(error, 'post');
+            // eslint-disable-next-line @typescript-eslint/no-magic-numbers
+            if (error.error.status === 422 || error.error.status === 400) {
+                this.activeModal.close(modalData);
+            }
+            this.isLoadingResults = false;
+        });
+    }
+
+    /** Config file process @private */
+    public configFile(files: FileList): void {
+        if (files && files.length === 1) {
+            const fileFormat: string = this.sharedService.fetchFileExtension(files).toLocaleLowerCase();
+            if (fileFormat === 'yaml' || fileFormat === 'yml') {
+                this.sharedService.getFileString(files, 'yaml').then((fileContent: string): void => {
+                    this.okaArray = this.KsuForm.get('oka') as FormArray;
+                    for (let i = 0; i < this.okaArray.length; i++) {
+                        const formGroup = this.okaArray.at(i) as FormGroup;
+                        formGroup.patchValue({
+                            transformation: fileContent // Set the value for the specified key
+                        });
+                    }
+                }).catch((err: string): void => {
+                    if (err === 'typeError') {
+                        this.notifierService.notify('error', this.translateService.instant('YAMLFILETYPEERRROR'));
+                    } else {
+                        this.notifierService.notify('error', this.translateService.instant('ERROR'));
+                    }
+                    this.fileInputConfigLabel.nativeElement.innerText = this.translateService.instant('CHOOSEFILE');
+                    this.fileInputConfig.nativeElement.value = null;
+                });
+            } else if (fileFormat === 'json') {
+                this.sharedService.getFileString(files, 'json').then((fileContent: string): void => {
+                    const getConfigJson: string = jsyaml.load(fileContent, { json: true });
+                    this.KsuForm.get('transformation').setValue(JSON.stringify(getConfigJson));
+                }).catch((err: string): void => {
+                    if (err === 'typeError') {
+                        this.notifierService.notify('error', this.translateService.instant('JSONFILETYPEERRROR'));
+                    } else {
+                        this.notifierService.notify('error', this.translateService.instant('ERROR'));
+                    }
+                    this.fileInputConfigLabel.nativeElement.innerText = this.translateService.instant('CHOOSEFILE');
+                    this.fileInputConfig.nativeElement.value = null;
+                });
+            }
+        } else if (files && files.length > 1) {
+            this.notifierService.notify('error', this.translateService.instant('DROPFILESVALIDATION'));
+        }
+        this.fileInputConfigLabel.nativeElement.innerText = files[0].name;
+        this.fileInputConfig.nativeElement.value = null;
+    }
+    /** Add OKA @public */
+    public addOka(): void {
+        this.okaFormArray = this.KsuForm.get('oka') as FormArray;
+        this.okaFormArray.push(this.okaParamsBuilder);
+    }
+
+    /** Remove OKA @public */
+    public removeMapping(index: number): void {
+        this.okaFormArray.removeAt(index);
+    }
+
+    /** Get profile details @public */
+    public getprofileDetails(event: string, name?: string): void {
+        this.profileData = [];
+        if (event === 'infra_config_profiles') {
+            this.profileUrl = environment.K8SINFRACONFIGPROFILE_URL;
+        } else if (event === 'infra_controller_profiles') {
+            this.profileUrl = environment.K8SINFRACONTROLLERPROFILE_URL;
+        } else if (event === 'app_profiles') {
+            this.profileUrl = environment.K8SAPPPROFILE_URL;
+        } else if (event === 'resource_profiles') {
+            this.profileUrl = environment.K8SRESOURCEPROFILE_URL;
+        }
+        this.restService.getResource(this.profileUrl)
+            .subscribe((profileData: []): void => {
+                profileData.forEach((profileDetail: INFRACONFIGPAYLOAD): void => {
+                    const profile: {} = {
+                        name: profileDetail.name,
+                        id: profileDetail._id
+                    };
+                    this.profileData.push(profile);
+                });
+                this.profileDetails = this.profileData;
+            }, (error: ERRORDATA): void => {
+                this.restService.handleError(error, 'get');
+            });
+    }
+    /** Used to get the AbstractControl of controlName passed @private */
+    private getFormControl(controlName: string): AbstractControl {
+        // eslint-disable-next-line security/detect-object-injection
+        return this.KsuForm.controls[controlName];
+    }
+}
diff --git a/src/app/k8s/k8s-ksu/ksu-details/KSUComponent.html b/src/app/k8s/k8s-ksu/ksu-details/KSUComponent.html
new file mode 100644
index 0000000..de83ac5
--- /dev/null
+++ b/src/app/k8s/k8s-ksu/ksu-details/KSUComponent.html
@@ -0,0 +1,45 @@
+<!--
+Copyright 2020 TATA ELXSI
+
+Licensed under the Apache License, Version 2.0 (the 'License');
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+  http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+
+Author: SANDHYA JS (sandhya.j@tataelxsi.co.in)
+-->
+<div class="d-flex flex-row justify-content-between">
+  <div class="d-flex align-items-center header-style">{{'PAGE.K8S.KSU' | translate}}</div>
+  <span class="button">
+    <button class="btn btn-primary me-2" type="button" placement="top" container="body"
+      ngbTooltip="{{'Create Profile' | translate}}" (click)="addKSU()">
+      <i class="fas fa-plus-circle" aria-hidden="true"></i>&nbsp; {{'PAGE.K8S.ADDKSU' | translate}}
+    </button>
+  </span>
+</div>
+<div class="mt-2 mb-2 list-utilites-actions">
+  <div class="col-auto me-auto">
+    <nav class="custom-items-config">
+      <span><i class="fas fa-clock text-success"></i>{{operationalStateFirstStep}}</span>
+      <span><i class="fas fa-spinner text-warning"></i>{{operationalStateSecondStep}}</span>
+      <span><i class="fas fa-spinner text-danger"></i>{{operationalStateThirdStep}}</span>
+      <span><i class="fas fa-times-circle text-danger"></i>{{operationalStateFourthStep}}</span>
+      <span><i class="fas fa-times-circle text-warning"></i>{{operationalStateFifthStep}}</span>
+    </nav>
+  </div>
+  <page-per-row class="me-2" (pagePerRow)="onChange($event)"></page-per-row>
+  <page-reload></page-reload>
+</div>
+<div class="smarttable-style bg-white mt-1">
+  <ng2-smart-table [ngClass]="checkDataClass" [settings]="settings" [source]="dataSource"
+    (userRowSelect)="onUserRowSelect($event)">
+  </ng2-smart-table>
+</div>
+<app-loader [waitingMessage]="message" *ngIf="isLoadingResults"></app-loader>
\ No newline at end of file
diff --git a/src/app/k8s/k8s-ksu/ksu-details/KSUComponent.scss b/src/app/k8s/k8s-ksu/ksu-details/KSUComponent.scss
new file mode 100644
index 0000000..c55461a
--- /dev/null
+++ b/src/app/k8s/k8s-ksu/ksu-details/KSUComponent.scss
@@ -0,0 +1,17 @@
+/*
+ Copyright 2020 TATA ELXSI
+
+ Licensed under the Apache License, Version 2.0 (the 'License');
+ you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+
+ Author: SANDHYA JS (sandhya.j@tataelxsi.co.in)
+*/
\ No newline at end of file
diff --git a/src/app/k8s/k8s-ksu/ksu-details/KSUComponent.ts b/src/app/k8s/k8s-ksu/ksu-details/KSUComponent.ts
new file mode 100644
index 0000000..2591b4c
--- /dev/null
+++ b/src/app/k8s/k8s-ksu/ksu-details/KSUComponent.ts
@@ -0,0 +1,254 @@
+/*
+ Copyright 2020 TATA ELXSI
+
+ Licensed under the Apache License, Version 2.0 (the 'License');
+ you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+
+  http://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+
+ Author: SANDHYA JS (sandhya.j@tataelxsi.co.in)
+*/
+/**
+ * @file KSUComponent.ts.
+ */
+import { Component, Injector, OnDestroy, OnInit } from '@angular/core';
+import { NgbModal, NgbModalRef } from '@ng-bootstrap/ng-bootstrap';
+import { TranslateService } from '@ngx-translate/core';
+import { CONFIGCONSTANT, ERRORDATA, MODALCLOSERESPONSEDATA } from 'CommonModel';
+import { DataService } from 'DataService';
+import { environment } from 'environment';
+import { K8sActionComponent } from 'K8sActionComponent';
+import { INFRACONFIGPAYLOAD, K8SCreateCLUSTERDATA } from 'K8sModel';
+import { LocalDataSource } from 'ng2-smart-table';
+import { RestService } from 'RestService';
+import { Subscription } from 'rxjs';
+import { SharedService } from 'SharedService';
+import { KSUAddComponent } from '../ksu-add/KSUAddComponent';
+/**
+ * Creating Component
+ * @Component takes KSUComponent.html as template url
+ */
+@Component({
+    selector: 'app-ksu-details',
+    templateUrl: './KSUComponent.html',
+    styleUrls: ['./KSUComponent.scss']
+})
+/** Exporting a class @exports KSUComponent */
+export class KSUComponent implements OnInit, OnDestroy {
+    /** To inject services @public */
+    public injector: Injector;
+
+    /** handle translate @public */
+    public translateService: TranslateService;
+
+    /** Data of smarttable populate through LocalDataSource @public */
+    public dataSource: LocalDataSource = new LocalDataSource();
+
+    /** Columns list of the smart table @public */
+    public columnList: object = {};
+
+    /** Settings for smarttable to populate the table with columns @public */
+    public settings: object = {};
+
+    /** operational State created data @public */
+    public operationalStateFirstStep: string = CONFIGCONSTANT.k8OperationalStateFirstStep;
+
+    /** operational State in creation data @public */
+    public operationalStateSecondStep: string = CONFIGCONSTANT.k8OperationalStateStateSecondStep;
+
+    /** operational State in deletion data @public */
+    public operationalStateThirdStep: string = CONFIGCONSTANT.k8OperationalStateThirdStep;
+
+    /** operational State failed deletion data @public */
+    public operationalStateFourthStep: string = CONFIGCONSTANT.k8OperationalStateFourthStep;
+
+    /** operational State failed creation data @public */
+    public operationalStateFifthStep: string = CONFIGCONSTANT.k8OperationalStateFifthStep;
+
+    /** Check the loading results @public */
+    public isLoadingResults: boolean = true;
+
+    /** Give the message for the loading @public */
+    public message: string = 'PLEASEWAIT';
+
+    /** Class for empty and present data @public */
+    public checkDataClass: string;
+
+    /** Instance of the rest service @private */
+    private restService: RestService;
+
+    /** dataService to pass the data from one component to another @private */
+    private dataService: DataService;
+
+    /** Formation of appropriate Data for LocalDatasource @private */
+    private ksuData: {}[] = [];
+
+    /** Contains all methods related to shared @private */
+    private sharedService: SharedService;
+
+    /** Instance of the modal service @private */
+    private modalService: NgbModal;
+
+    /** Instance of subscriptions @private */
+    private generateDataSub: Subscription;
+
+    constructor(injector: Injector) {
+        this.injector = injector;
+        this.restService = this.injector.get(RestService);
+        this.dataService = this.injector.get(DataService);
+        this.sharedService = this.injector.get(SharedService);
+        this.translateService = this.injector.get(TranslateService);
+        this.modalService = this.injector.get(NgbModal);
+    }
+    /** Lifecyle Hooks the trigger before component is instantiate @public */
+    public ngOnInit(): void {
+        this.generateColumns();
+        this.generateSettings();
+        this.generateData();
+        this.generateDataSub = this.sharedService.dataEvent.subscribe(() => { this.generateData(); });
+    }
+
+    /** smart table Header Colums @public */
+    public generateColumns(): void {
+        this.columnList = {
+            name: { title: this.translateService.instant('NAME'), width: '20%', sortDirection: 'asc' },
+            identifier: { title: this.translateService.instant('IDENTIFIER'), width: '15%' },
+            state: {
+                title: this.translateService.instant('STATE'), width: '15%', type: 'html',
+                filter: {
+                    type: 'list',
+                    config: {
+                        selectText: 'Select',
+                        list: [
+                            { value: this.operationalStateFirstStep, title: this.operationalStateFirstStep },
+                            { value: this.operationalStateSecondStep, title: this.operationalStateSecondStep },
+                            { value: this.operationalStateThirdStep, title: this.operationalStateThirdStep },
+                            { value: this.operationalStateThirdStep, title: this.operationalStateFourthStep },
+                            { value: this.operationalStateThirdStep, title: this.operationalStateFifthStep }
+                        ]
+                    }
+                },
+                valuePrepareFunction: (cell: INFRACONFIGPAYLOAD, row: INFRACONFIGPAYLOAD): string => {
+                    if (row.state === this.operationalStateFirstStep) {
+                        return `<span class="icon-label" title="${row.state}">
+                                 <i class="fas fa-clock text-success"></i>
+                                 </span>`;
+                    } else if (row.state === this.operationalStateSecondStep) {
+                        return `<span class="icon-label" title="${row.state}">
+                                 <i class="fas fa-spinner text-warning"></i>
+                                 </span>`;
+                    } else if (row.state === this.operationalStateThirdStep) {
+                        return `<span class="icon-label" title="${row.state}">
+                                 <i class="fas fa-spinner text-danger"></i>
+                                 </span>`;
+                    } else if (row.state === this.operationalStateFourthStep) {
+                        return `<span class="icon-label" title="${row.state}">
+                                 <i class="fas fa-times-circle text-danger"></i>
+                                 </span>`;
+                    } else if (row.state === this.operationalStateFifthStep) {
+                        return `<span class="icon-label" title="${row.state}">
+                                 <i class="fas fa-times-circle text-warning"></i>
+                                 </span>`;
+                    } else {
+                        return `<span>${row.state}</span>`;
+                    }
+                }
+            },
+            created: { title: this.translateService.instant('CREATED'), width: '10%' },
+            modified: { title: this.translateService.instant('MODIFIED'), width: '10%' },
+            Actions: {
+                name: 'Action', width: '5%', filter: false, sort: false, title: this.translateService.instant('ACTIONS'), type: 'custom',
+                valuePrepareFunction: (cell: INFRACONFIGPAYLOAD, row: INFRACONFIGPAYLOAD): INFRACONFIGPAYLOAD => row,
+                renderComponent: K8sActionComponent
+            }
+        };
+    }
+
+    /** smart table Data Settings @public */
+    public generateSettings(): void {
+        this.settings = {
+            columns: this.columnList,
+            actions: { add: false, edit: false, delete: false, position: 'right' },
+            attr: this.sharedService.tableClassConfig(),
+            pager: this.sharedService.paginationPagerConfig(),
+            noDataMessage: this.translateService.instant('NODATAMSG')
+        };
+    }
+
+    /** smart table listing manipulation @public */
+    public onChange(perPageValue: number): void {
+        this.dataSource.setPaging(1, perPageValue, true);
+    }
+
+    /** smart table listing manipulation @public */
+    public onUserRowSelect(event: MessageEvent): void {
+        Object.assign(event.data, { page: 'k8-ksu' });
+        this.dataService.changeMessage(event.data);
+    }
+
+    /** Compose new KSU @public */
+    public addKSU(): void {
+        // eslint-disable-next-line security/detect-non-literal-fs-filename
+        const modalRef: NgbModalRef = this.modalService.open(KSUAddComponent, { backdrop: 'static' });
+        modalRef.componentInstance.profileType = 'add';
+        modalRef.result.then((result: MODALCLOSERESPONSEDATA) => {
+            if (result) {
+                this.sharedService.callData();
+            }
+        }).catch((): void => {
+            // Catch Navigation Error
+        });
+    }
+
+    /**
+     * Lifecyle hook which get trigger on component destruction
+     */
+    public ngOnDestroy(): void {
+        this.generateDataSub.unsubscribe();
+    }
+
+    /** Generate KSU object from loop and return for the datasource @public */
+    public generateKSUData(ksudata: INFRACONFIGPAYLOAD): INFRACONFIGPAYLOAD {
+        return {
+            name: ksudata.name,
+            identifier: ksudata._id,
+            created: this.sharedService.convertEpochTime(Number(ksudata._admin.created)),
+            modified: this.sharedService.convertEpochTime(Number(ksudata._admin.modified)),
+            description: ksudata.description,
+            pageType: 'k8-ksu',
+            state: ksudata.state
+        };
+    }
+
+    /** Fetching the data from server to Load in the smarttable @protected */
+    protected generateData(): void {
+        this.isLoadingResults = true;
+        this.restService.getResource(environment.KSU_URL).subscribe((kSUData: K8SCreateCLUSTERDATA[]) => {
+            this.ksuData = [];
+            kSUData.forEach((KSUDetail: INFRACONFIGPAYLOAD) => {
+                const ksuDataObj: INFRACONFIGPAYLOAD = this.generateKSUData(KSUDetail);
+                this.ksuData.push(ksuDataObj);
+            });
+            if (this.ksuData.length > 0) {
+                this.checkDataClass = 'dataTables_present';
+            } else {
+                this.checkDataClass = 'dataTables_empty';
+            }
+            this.dataSource.load(this.ksuData).then((data: boolean) => {
+                this.isLoadingResults = false;
+            }).catch(() => {
+                this.isLoadingResults = false;
+            });
+        }, (error: ERRORDATA) => {
+            this.restService.handleError(error, 'get');
+            this.isLoadingResults = false;
+        });
+    }
+}
diff --git a/src/app/k8s/k8s-profile/k8s-app-profile-details/K8sAppProfileComponent.html b/src/app/k8s/k8s-profile/k8s-app-profile-details/K8sAppProfileComponent.html
new file mode 100644
index 0000000..34fb3fc
--- /dev/null
+++ b/src/app/k8s/k8s-profile/k8s-app-profile-details/K8sAppProfileComponent.html
@@ -0,0 +1,45 @@
+<!--
+Copyright 2020 TATA ELXSI
+
+Licensed under the Apache License, Version 2.0 (the 'License');
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+  http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+
+Author: SANDHYA JS (sandhya.j@tataelxsi.co.in)
+-->
+<div class="d-flex flex-row justify-content-between">
+  <div class="d-flex align-items-center header-style">{{'PAGE.K8S.APP' | translate}}</div>
+  <span class="button">
+    <button class="btn btn-primary me-2" type="button" placement="top" container="body"
+      ngbTooltip="{{'Create Profile' | translate}}" (click)="addProfile()">
+      <i class="fas fa-plus-circle" aria-hidden="true"></i>&nbsp; {{'PAGE.K8S.CREATEPROFILE' | translate}}
+    </button>
+  </span>
+</div>
+<div class="mt-2 mb-2 list-utilites-actions">
+  <div class="col-auto me-auto">
+    <nav class="custom-items-config">
+      <span><i class="fas fa-clock text-success"></i>{{operationalStateFirstStep}}</span>
+      <span><i class="fas fa-spinner text-warning"></i>{{operationalStateSecondStep}}</span>
+      <span><i class="fas fa-spinner text-danger"></i>{{operationalStateThirdStep}}</span>
+      <span><i class="fas fa-times-circle text-danger"></i>{{operationalStateFourthStep}}</span>
+      <span><i class="fas fa-times-circle text-warning"></i>{{operationalStateFifthStep}}</span>
+    </nav>
+  </div>
+  <page-per-row class="me-2" (pagePerRow)="onChange($event)"></page-per-row>
+  <page-reload></page-reload>
+</div>
+<div class="smarttable-style bg-white mt-1">
+  <ng2-smart-table [ngClass]="checkDataClass" [settings]="settings" [source]="dataSource"
+    (userRowSelect)="onUserRowSelect($event)">
+  </ng2-smart-table>
+</div>
+<app-loader [waitingMessage]="message" *ngIf="isLoadingResults"></app-loader>
\ No newline at end of file
diff --git a/src/app/k8s/k8s-profile/k8s-app-profile-details/K8sAppProfileComponent.scss b/src/app/k8s/k8s-profile/k8s-app-profile-details/K8sAppProfileComponent.scss
new file mode 100644
index 0000000..c55461a
--- /dev/null
+++ b/src/app/k8s/k8s-profile/k8s-app-profile-details/K8sAppProfileComponent.scss
@@ -0,0 +1,17 @@
+/*
+ Copyright 2020 TATA ELXSI
+
+ Licensed under the Apache License, Version 2.0 (the 'License');
+ you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+
+ Author: SANDHYA JS (sandhya.j@tataelxsi.co.in)
+*/
\ No newline at end of file
diff --git a/src/app/k8s/k8s-profile/k8s-app-profile-details/K8sAppProfileComponent.ts b/src/app/k8s/k8s-profile/k8s-app-profile-details/K8sAppProfileComponent.ts
new file mode 100644
index 0000000..4772c4c
--- /dev/null
+++ b/src/app/k8s/k8s-profile/k8s-app-profile-details/K8sAppProfileComponent.ts
@@ -0,0 +1,254 @@
+/*
+ Copyright 2020 TATA ELXSI
+
+ Licensed under the Apache License, Version 2.0 (the 'License');
+ you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+
+  http://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+
+ Author: SANDHYA JS (sandhya.j@tataelxsi.co.in)
+*/
+/**
+ * @file K8sAppProfileComponent.ts.
+ */
+import { Component, Injector, OnDestroy, OnInit } from '@angular/core';
+import { NgbModal, NgbModalRef } from '@ng-bootstrap/ng-bootstrap';
+import { TranslateService } from '@ngx-translate/core';
+import { CONFIGCONSTANT, ERRORDATA, MODALCLOSERESPONSEDATA } from 'CommonModel';
+import { DataService } from 'DataService';
+import { environment } from 'environment';
+import { K8sActionComponent } from 'K8sActionComponent';
+import { INFRACONFIGPAYLOAD, K8SCreateCLUSTERDATA } from 'K8sModel';
+import { LocalDataSource } from 'ng2-smart-table';
+import { RestService } from 'RestService';
+import { Subscription } from 'rxjs';
+import { SharedService } from 'SharedService';
+import { K8sInfraConfigAddComponent } from '../k8s-infra-config-add/K8sInfraConfigAddComponent';
+/**
+ * Creating Component
+ * @Component takes K8sAppProfileComponent.html as template url
+ */
+@Component({
+    selector: 'app-app-profile',
+    templateUrl: './K8sAppProfileComponent.html',
+    styleUrls: ['./K8sAppProfileComponent.scss']
+})
+/** Exporting a class @exports K8sAppProfileComponent */
+export class K8sAppProfileComponent implements OnInit, OnDestroy {
+    /** To inject services @public */
+    public injector: Injector;
+
+    /** handle translate @public */
+    public translateService: TranslateService;
+
+    /** Data of smarttable populate through LocalDataSource @public */
+    public dataSource: LocalDataSource = new LocalDataSource();
+
+    /** Columns list of the smart table @public */
+    public columnList: object = {};
+
+    /** Settings for smarttable to populate the table with columns @public */
+    public settings: object = {};
+
+    /** operational State created data @public */
+    public operationalStateFirstStep: string = CONFIGCONSTANT.k8OperationalStateFirstStep;
+
+    /** operational State in creation data @public */
+    public operationalStateSecondStep: string = CONFIGCONSTANT.k8OperationalStateStateSecondStep;
+
+    /** operational State in deletion data @public */
+    public operationalStateThirdStep: string = CONFIGCONSTANT.k8OperationalStateThirdStep;
+
+    /** operational State failed deletion data @public */
+    public operationalStateFourthStep: string = CONFIGCONSTANT.k8OperationalStateFourthStep;
+
+    /** operational State failed creation data @public */
+    public operationalStateFifthStep: string = CONFIGCONSTANT.k8OperationalStateFifthStep;
+
+    /** Check the loading results @public */
+    public isLoadingResults: boolean = true;
+
+    /** Give the message for the loading @public */
+    public message: string = 'PLEASEWAIT';
+
+    /** Class for empty and present data @public */
+    public checkDataClass: string;
+
+    /** Instance of the rest service @private */
+    private restService: RestService;
+
+    /** dataService to pass the data from one component to another @private */
+    private dataService: DataService;
+
+    /** Formation of appropriate Data for LocalDatasource @private */
+    private profileData: {}[] = [];
+
+    /** Contains all methods related to shared @private */
+    private sharedService: SharedService;
+
+    /** Instance of the modal service @private */
+    private modalService: NgbModal;
+
+    /** Instance of subscriptions @private */
+    private generateDataSub: Subscription;
+
+    constructor(injector: Injector) {
+        this.injector = injector;
+        this.restService = this.injector.get(RestService);
+        this.dataService = this.injector.get(DataService);
+        this.sharedService = this.injector.get(SharedService);
+        this.translateService = this.injector.get(TranslateService);
+        this.modalService = this.injector.get(NgbModal);
+    }
+    /** Lifecyle Hooks the trigger before component is instantiate @public */
+    public ngOnInit(): void {
+        this.generateColumns();
+        this.generateSettings();
+        this.generateData();
+        this.generateDataSub = this.sharedService.dataEvent.subscribe(() => { this.generateData(); });
+    }
+
+    /** smart table Header Colums @public */
+    public generateColumns(): void {
+        this.columnList = {
+            name: { title: this.translateService.instant('NAME'), width: '20%', sortDirection: 'asc' },
+            identifier: { title: this.translateService.instant('IDENTIFIER'), width: '15%' },
+            state: {
+                title: this.translateService.instant('STATE'), width: '15%', type: 'html',
+                filter: {
+                    type: 'list',
+                    config: {
+                        selectText: 'Select',
+                        list: [
+                            { value: this.operationalStateFirstStep, title: this.operationalStateFirstStep },
+                            { value: this.operationalStateSecondStep, title: this.operationalStateSecondStep },
+                            { value: this.operationalStateThirdStep, title: this.operationalStateThirdStep },
+                            { value: this.operationalStateThirdStep, title: this.operationalStateFourthStep },
+                            { value: this.operationalStateThirdStep, title: this.operationalStateFifthStep }
+                        ]
+                    }
+                },
+                valuePrepareFunction: (cell: INFRACONFIGPAYLOAD, row: INFRACONFIGPAYLOAD): string => {
+                    if (row.state === this.operationalStateFirstStep) {
+                        return `<span class="icon-label" title="${row.state}">
+                                 <i class="fas fa-clock text-success"></i>
+                                 </span>`;
+                    } else if (row.state === this.operationalStateSecondStep) {
+                        return `<span class="icon-label" title="${row.state}">
+                                 <i class="fas fa-spinner text-warning"></i>
+                                 </span>`;
+                    } else if (row.state === this.operationalStateThirdStep) {
+                        return `<span class="icon-label" title="${row.state}">
+                                 <i class="fas fa-spinner text-danger"></i>
+                                 </span>`;
+                    } else if (row.state === this.operationalStateFourthStep) {
+                        return `<span class="icon-label" title="${row.state}">
+                                 <i class="fas fa-times-circle text-danger"></i>
+                                 </span>`;
+                    } else if (row.state === this.operationalStateFifthStep) {
+                        return `<span class="icon-label" title="${row.state}">
+                                 <i class="fas fa-times-circle text-warning"></i>
+                                 </span>`;
+                    } else {
+                        return `<span>${row.state}</span>`;
+                    }
+                }
+            },
+            created: { title: this.translateService.instant('CREATED'), width: '10%' },
+            modified: { title: this.translateService.instant('MODIFIED'), width: '10%' },
+            Actions: {
+                name: 'Action', width: '5%', filter: false, sort: false, title: this.translateService.instant('ACTIONS'), type: 'custom',
+                valuePrepareFunction: (cell: INFRACONFIGPAYLOAD, row: INFRACONFIGPAYLOAD): INFRACONFIGPAYLOAD => row,
+                renderComponent: K8sActionComponent
+            }
+        };
+    }
+
+    /** smart table Data Settings @public */
+    public generateSettings(): void {
+        this.settings = {
+            columns: this.columnList,
+            actions: { add: false, edit: false, delete: false, position: 'right' },
+            attr: this.sharedService.tableClassConfig(),
+            pager: this.sharedService.paginationPagerConfig(),
+            noDataMessage: this.translateService.instant('NODATAMSG')
+        };
+    }
+
+    /** smart table listing manipulation @public */
+    public onChange(perPageValue: number): void {
+        this.dataSource.setPaging(1, perPageValue, true);
+    }
+
+    /** smart table listing manipulation @public */
+    public onUserRowSelect(event: MessageEvent): void {
+        Object.assign(event.data, { page: 'k8-app-profile' });
+        this.dataService.changeMessage(event.data);
+    }
+
+    /** Compose new profile @public */
+    public addProfile(): void {
+        // eslint-disable-next-line security/detect-non-literal-fs-filename
+        const modalRef: NgbModalRef = this.modalService.open(K8sInfraConfigAddComponent, { backdrop: 'static' });
+        modalRef.componentInstance.profileType = 'app-profile';
+        modalRef.result.then((result: MODALCLOSERESPONSEDATA) => {
+            if (result) {
+                this.sharedService.callData();
+            }
+        }).catch((): void => {
+            // Catch Navigation Error
+        });
+    }
+
+    /**
+     * Lifecyle hook which get trigger on component destruction
+     */
+    public ngOnDestroy(): void {
+        this.generateDataSub.unsubscribe();
+    }
+
+    /** Generate profile object from loop and return for the datasource @public */
+    public generateprofileData(profileData: INFRACONFIGPAYLOAD): INFRACONFIGPAYLOAD {
+        return {
+            name: profileData.name,
+            identifier: profileData._id,
+            created: this.sharedService.convertEpochTime(Number(profileData._admin.created)),
+            modified: this.sharedService.convertEpochTime(Number(profileData._admin.modified)),
+            description: profileData.description,
+            pageType: 'app-profile',
+            state: profileData.state
+        };
+    }
+
+    /** Fetching the data from server to Load in the smarttable @protected */
+    protected generateData(): void {
+        this.isLoadingResults = true;
+        this.restService.getResource(environment.K8SAPPPROFILE_URL).subscribe((profileDatas: K8SCreateCLUSTERDATA[]) => {
+            this.profileData = [];
+            profileDatas.forEach((profileData: INFRACONFIGPAYLOAD) => {
+                const profileDataObj: INFRACONFIGPAYLOAD = this.generateprofileData(profileData);
+                this.profileData.push(profileDataObj);
+            });
+            if (this.profileData.length > 0) {
+                this.checkDataClass = 'dataTables_present';
+            } else {
+                this.checkDataClass = 'dataTables_empty';
+            }
+            this.dataSource.load(this.profileData).then((data: boolean) => {
+                this.isLoadingResults = false;
+            }).catch(() => {
+                this.isLoadingResults = false;
+            });
+        }, (error: ERRORDATA) => {
+            this.restService.handleError(error, 'get');
+            this.isLoadingResults = false;
+        });
+    }
+}
diff --git a/src/app/k8s/k8s-profile/k8s-infra-config-add/K8sInfraConfigAddComponent.html b/src/app/k8s/k8s-profile/k8s-infra-config-add/K8sInfraConfigAddComponent.html
new file mode 100644
index 0000000..493cb5b
--- /dev/null
+++ b/src/app/k8s/k8s-profile/k8s-infra-config-add/K8sInfraConfigAddComponent.html
@@ -0,0 +1,52 @@
+<!--
+Copyright 2020 TATA ELXSI
+
+Licensed under the Apache License, Version 2.0 (the 'License');
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+  http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+
+Author: SANDHYA JS (sandhya.j@tataelxsi.co.in)
+-->
+<form [formGroup]="profileForm" (ngSubmit)="profileSubmit();">
+    <div class="modal-header">
+        <h4 *ngIf="isAdd" class="modal-title" id="modal-basic-title">{{'PAGE.K8S.CREATEPROFILE' | translate}}</h4>
+        <h4 *ngIf="isEdit" class="modal-title" id="modal-basic-title">{{'PAGE.K8S.EDITPROFILE' | translate}}</h4>
+        <button class="button-xs" type="button" class="close" aria-label="Close" (click)="activeModal.close()">
+            <i class="fas fa-times-circle text-danger"></i>
+        </button>
+    </div>
+    <div class="modal-body modal-body-custom-height">
+        <div class="form-group row mb-3">
+            <label class="col-sm-12 col-form-label mandatory-label"
+                [ngClass]="{'text-danger': profileForm.invalid === true && submitted === true}">{{'MANDATORYCHECK' |
+                translate}}</label>
+            <label class="col-sm-4 col-form-label" for="name">{{'PAGE.K8S.NAME' | translate}}*</label>
+            <div class="col-sm-8">
+                <input autocomplete="off" class="form-control" placeholder="{{'PAGE.K8S.NAME' | translate}}" type="text"
+                    formControlName="name" id="name" [ngClass]="{ 'is-invalid': submitted && f.name.errors }" required>
+            </div>
+        </div>
+        <div class="form-group row mb-3">
+            <label class="col-sm-4 col-form-label" for="description">{{'PAGE.K8S.DESCRIPTION' | translate}}*</label>
+            <div class="col-sm-8">
+                <textarea class="form-control" placeholder="{{'PAGE.K8S.DESCRIPTION' | translate}}" type="text"
+                    formControlName="description" id="description"
+                    [ngClass]="{ 'is-invalid': submitted && f.description.errors }" required></textarea>
+            </div>
+        </div>
+    </div>
+    <div class="modal-footer">
+        <button type="button" class="btn btn-danger" (click)="activeModal.close()">{{'CANCEL' | translate}}</button>
+        <button *ngIf="isAdd" type="submit" class="btn btn-primary">{{'CREATE' | translate}}</button>
+        <button *ngIf="isEdit" type="submit" class="btn btn-primary">{{'EDIT' | translate}}</button>
+    </div>
+</form>
+<app-loader [waitingMessage]="message" *ngIf="isLoadingResults"></app-loader>
\ No newline at end of file
diff --git a/src/app/k8s/k8s-profile/k8s-infra-config-add/K8sInfraConfigAddComponent.scss b/src/app/k8s/k8s-profile/k8s-infra-config-add/K8sInfraConfigAddComponent.scss
new file mode 100644
index 0000000..c55461a
--- /dev/null
+++ b/src/app/k8s/k8s-profile/k8s-infra-config-add/K8sInfraConfigAddComponent.scss
@@ -0,0 +1,17 @@
+/*
+ Copyright 2020 TATA ELXSI
+
+ Licensed under the Apache License, Version 2.0 (the 'License');
+ you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+
+ Author: SANDHYA JS (sandhya.j@tataelxsi.co.in)
+*/
\ No newline at end of file
diff --git a/src/app/k8s/k8s-profile/k8s-infra-config-add/K8sInfraConfigAddComponent.ts b/src/app/k8s/k8s-profile/k8s-infra-config-add/K8sInfraConfigAddComponent.ts
new file mode 100644
index 0000000..5299323
--- /dev/null
+++ b/src/app/k8s/k8s-profile/k8s-infra-config-add/K8sInfraConfigAddComponent.ts
@@ -0,0 +1,220 @@
+/*
+ Copyright 2020 TATA ELXSI
+
+ Licensed under the Apache License, Version 2.0 (the 'License');
+ you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+
+  http://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+
+ Author: SANDHYA JS (sandhya.j@tataelxsi.co.in)
+*/
+/**
+ * @file K8sInfraConfigAddComponent.ts.
+ */
+import { HttpHeaders } from '@angular/common/http';
+import { Component,Injector, Input, OnInit} from '@angular/core';
+import { FormBuilder, FormGroup, Validators } from '@angular/forms';
+import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
+import { TranslateService } from '@ngx-translate/core';
+import { NotifierService } from 'angular-notifier';
+import { APIURLHEADER, ERRORDATA, MODALCLOSERESPONSEDATA, TYPESECTION, URLPARAMS } from 'CommonModel';
+import { environment } from 'environment';
+import { INFRACONFIGPAYLOAD} from 'K8sModel';
+import { RestService } from 'RestService';
+import { SharedService, isNullOrUndefined } from 'SharedService';
+/**
+ * Creating Component
+ * @Component takes K8sInfraConfigAddComponent.html as template url
+ */
+@Component({
+    selector: 'app-infra-config',
+    templateUrl: './K8sInfraConfigAddComponent.html',
+    styleUrls: ['./K8sInfraConfigAddComponent.scss']
+})
+/** Exporting a class @exports K8sInfraConfigAddComponent */
+export class K8sInfraConfigAddComponent implements OnInit {
+    /** To inject services @public */
+    public injector: Injector;
+
+    /** FormGroup instance added to the form @ html @public */
+    public profileForm: FormGroup;
+
+    /** Instance for active modal service @public */
+    public activeModal: NgbActiveModal;
+
+    /** Form submission Add */
+    public submitted: boolean = false;
+
+    /** Check the loading results @public */
+    public isLoadingResults: boolean = false;
+
+    /** Give the message for the loading @public */
+    public message: string = 'PLEASEWAIT';
+
+    /** profile url @public */
+    public profileUrl: string;
+
+    /** Input contains Modal dialog component Instance @public */
+    @Input() public profileType: string;
+
+    /** Input contains Modal dialog component Instance @public */
+    @Input() public profileID: string;
+
+    /** Input contains Modal dialog component Instance @public */
+    @Input() public profileName: string;
+
+    /** Input contains Modal dialog component Instance @public */
+    @Input() public profileDescription: string;
+
+     /** check Add @public */
+     public isAdd = false;
+
+     /** check Edit @public */
+     public isEdit = false;
+
+    /** FormBuilder instance added to the formBuilder @private */
+    private formBuilder: FormBuilder;
+
+    /** Utilizes rest service for any CRUD operations @private */
+    private restService: RestService;
+
+    /** Notifier service to popup notification @private */
+    private notifierService: NotifierService;
+
+    /** Contains tranlsate instance @private */
+    private translateService: TranslateService;
+
+    /** Controls the header form @private */
+    private headers: HttpHeaders;
+
+    /** Contains all methods related to shared @private */
+    private sharedService: SharedService;
+
+    constructor(injector: Injector) {
+        this.injector = injector;
+        this.restService = this.injector.get(RestService);
+        this.activeModal = this.injector.get(NgbActiveModal);
+        this.formBuilder = this.injector.get(FormBuilder);
+        this.notifierService = this.injector.get(NotifierService);
+        this.translateService = this.injector.get(TranslateService);
+        this.sharedService = this.injector.get(SharedService);
+    }
+
+    public ngOnInit(): void {
+        /** On Initializing call the methods */
+        this.profileFormAction();
+        this.headers = new HttpHeaders({
+            Accept: 'application/json',
+            'Content-Type': 'application/json',
+            'Cache-Control': 'no-cache, no-store, must-revalidate, max-age=0'
+        });
+        if (!isNullOrUndefined(this.profileID)) {
+            this.isEdit = true;
+            this.profileForm.patchValue({ name: this.profileName, description: this.profileDescription });
+        } else {
+            this.isAdd = true;
+        }
+    }
+
+    /** On modal initializing forms  @public */
+    public profileFormAction(): void {
+        this.profileForm = this.formBuilder.group({
+            name: ['', [Validators.required]],
+            default: [null],
+            description: ['', [Validators.required]]
+        });
+    }
+
+    /** convenience getter for easy access to form fields */
+    get f(): FormGroup['controls'] { return this.profileForm.controls; }
+
+    /** On modal submit profileSubmit will called @public */
+    public profileSubmit(): void {
+        this.submitted = true;
+        this.sharedService.cleanForm(this.profileForm);
+        if (this.profileForm.invalid) {
+            return;
+        }
+        if (!isNullOrUndefined(this.profileID)) {
+            this.editProfile(this.profileType);
+        } else {
+            this.addProfile();
+        }
+    }
+    /** Add profile @public */
+    public addProfile(): void {
+        const modalData: MODALCLOSERESPONSEDATA = {
+            message: 'Done'
+        };
+        if (this.profileType === 'infra-config') {
+            this.profileUrl = environment.K8SINFRACONFIGPROFILE_URL;
+        } else if (this.profileType === 'infra-controller') {
+            this.profileUrl = environment.K8SINFRACONTROLLERPROFILE_URL;
+        } else if (this.profileType === 'app-profile') {
+            this.profileUrl = environment.K8SAPPPROFILE_URL;
+        } else if (this.profileType === 'resource-profile') {
+            this.profileUrl = environment.K8SRESOURCEPROFILE_URL;
+        }
+        const apiURLHeader: APIURLHEADER = {
+            url: this.profileUrl,
+            httpOptions: { headers: this.headers }
+        };
+
+        this.isLoadingResults = true;
+        const payload: INFRACONFIGPAYLOAD = {
+            name: this.profileForm.value.name,
+            description: this.profileForm.value.description
+        };
+        this.restService.postResource(apiURLHeader, payload).subscribe((result: {}) => {
+            this.activeModal.close(modalData);
+            this.isLoadingResults = false;
+            this.notifierService.notify('success',
+                this.translateService.instant('PAGE.K8S.PROFILECREATEDSUCCESSFULLY'));
+        }, (error: ERRORDATA) => {
+            this.restService.handleError(error, 'post');
+            this.isLoadingResults = false;
+        });
+    }
+
+    /** Edit profile @public */
+    public editProfile(profileType: string): void {
+        const modalData: MODALCLOSERESPONSEDATA = {
+            message: 'Done'
+        };
+        this.isLoadingResults = true;
+        if (profileType === 'infra-config') {
+            this.profileUrl = environment.K8SINFRACONFIGPROFILE_URL + '/' + this.profileID;
+        } else if (profileType === 'infra-controller') {
+            this.profileUrl = environment.K8SINFRACONTROLLERPROFILE_URL + '/' + this.profileID;
+        } else if (this.profileType === 'app-profile') {
+            this.profileUrl = environment.K8SAPPPROFILE_URL + '/' + this.profileID;
+        } else if (this.profileType === 'resource-profile') {
+            this.profileUrl = environment.K8SRESOURCEPROFILE_URL + '/' + this.profileID;
+        }
+        const apiURLHeader: APIURLHEADER = {
+            url: this.profileUrl,
+            httpOptions: { headers: this.headers }
+        };
+        const payload: INFRACONFIGPAYLOAD = {
+            name: this.profileForm.value.name,
+            description: this.profileForm.value.description
+        };
+
+        this.restService.patchResource(apiURLHeader, payload).subscribe((result: {}) => {
+            this.activeModal.close(modalData);
+            this.isLoadingResults = false;
+            this.notifierService.notify('success',
+                this.translateService.instant('PAGE.K8S.PROFILEEDITEDSUCCESSFULLY'));
+        }, (error: ERRORDATA) => {
+            this.restService.handleError(error, 'post');
+            this.isLoadingResults = false;
+        });
+    }
+}
diff --git a/src/app/k8s/k8s-profile/k8s-infra-config-details/K8sInfraConfigProfileComponent.html b/src/app/k8s/k8s-profile/k8s-infra-config-details/K8sInfraConfigProfileComponent.html
new file mode 100644
index 0000000..81761d5
--- /dev/null
+++ b/src/app/k8s/k8s-profile/k8s-infra-config-details/K8sInfraConfigProfileComponent.html
@@ -0,0 +1,45 @@
+<!--
+Copyright 2020 TATA ELXSI
+
+Licensed under the Apache License, Version 2.0 (the 'License');
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+  http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+
+Author: SANDHYA JS (sandhya.j@tataelxsi.co.in)
+-->
+<div class="d-flex flex-row justify-content-between">
+  <div class="d-flex align-items-center header-style">{{'PAGE.K8S.INFRACONFIG' | translate}}</div>
+  <span class="button">
+    <button class="btn btn-primary me-2" type="button" placement="top" container="body"
+      ngbTooltip="{{'Create Profile' | translate}}" (click)="addProfile()">
+      <i class="fas fa-plus-circle" aria-hidden="true"></i>&nbsp; {{'PAGE.K8S.CREATEPROFILE' | translate}}
+    </button>
+  </span>
+</div>
+<div class="mt-2 mb-2 list-utilites-actions">
+  <div class="col-auto me-auto">
+    <nav class="custom-items-config">
+      <span><i class="fas fa-clock text-success"></i>{{operationalStateFirstStep}}</span>
+      <span><i class="fas fa-spinner text-warning"></i>{{operationalStateSecondStep}}</span>
+      <span><i class="fas fa-spinner text-danger"></i>{{operationalStateThirdStep}}</span>
+      <span><i class="fas fa-times-circle text-danger"></i>{{operationalStateFourthStep}}</span>
+      <span><i class="fas fa-times-circle text-warning"></i>{{operationalStateFifthStep}}</span>
+    </nav>
+  </div>
+  <page-per-row class="me-2" (pagePerRow)="onChange($event)"></page-per-row>
+  <page-reload></page-reload>
+</div>
+<div class="smarttable-style bg-white mt-1">
+  <ng2-smart-table [ngClass]="checkDataClass" [settings]="settings" [source]="dataSource"
+    (userRowSelect)="onUserRowSelect($event)">
+  </ng2-smart-table>
+</div>
+<app-loader [waitingMessage]="message" *ngIf="isLoadingResults"></app-loader>
\ No newline at end of file
diff --git a/src/app/k8s/k8s-profile/k8s-infra-config-details/K8sInfraConfigProfileComponent.scss b/src/app/k8s/k8s-profile/k8s-infra-config-details/K8sInfraConfigProfileComponent.scss
new file mode 100644
index 0000000..c55461a
--- /dev/null
+++ b/src/app/k8s/k8s-profile/k8s-infra-config-details/K8sInfraConfigProfileComponent.scss
@@ -0,0 +1,17 @@
+/*
+ Copyright 2020 TATA ELXSI
+
+ Licensed under the Apache License, Version 2.0 (the 'License');
+ you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+
+ Author: SANDHYA JS (sandhya.j@tataelxsi.co.in)
+*/
\ No newline at end of file
diff --git a/src/app/k8s/k8s-profile/k8s-infra-config-details/K8sInfraConfigProfileComponent.ts b/src/app/k8s/k8s-profile/k8s-infra-config-details/K8sInfraConfigProfileComponent.ts
new file mode 100644
index 0000000..760124b
--- /dev/null
+++ b/src/app/k8s/k8s-profile/k8s-infra-config-details/K8sInfraConfigProfileComponent.ts
@@ -0,0 +1,254 @@
+/*
+ Copyright 2020 TATA ELXSI
+
+ Licensed under the Apache License, Version 2.0 (the 'License');
+ you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+
+  http://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+
+ Author: SANDHYA JS (sandhya.j@tataelxsi.co.in)
+*/
+/**
+ * @file K8sInfraConfigProfileComponent.ts.
+ */
+import { Component, Injector, OnDestroy, OnInit } from '@angular/core';
+import { NgbModal, NgbModalRef } from '@ng-bootstrap/ng-bootstrap';
+import { TranslateService } from '@ngx-translate/core';
+import { CONFIGCONSTANT, ERRORDATA, MODALCLOSERESPONSEDATA } from 'CommonModel';
+import { DataService } from 'DataService';
+import { environment } from 'environment';
+import { K8sActionComponent } from 'K8sActionComponent';
+import { INFRACONFIGPAYLOAD, K8SCreateCLUSTERDATA, K8SCREATEDATADISPLAY } from 'K8sModel';
+import { LocalDataSource } from 'ng2-smart-table';
+import { RestService } from 'RestService';
+import { Subscription } from 'rxjs';
+import { SharedService } from 'SharedService';
+import { K8sInfraConfigAddComponent } from '../k8s-infra-config-add/K8sInfraConfigAddComponent';
+/**
+ * Creating Component
+ * @Component takes K8sInfraConfigProfileComponent.html as template url
+ */
+@Component({
+    selector: 'app-infra-config-profile',
+    templateUrl: './K8sInfraConfigProfileComponent.html',
+    styleUrls: ['./K8sInfraConfigProfileComponent.scss']
+})
+/** Exporting a class @exports K8sInfraConfigProfileComponent */
+export class K8sInfraConfigProfileComponent implements OnInit, OnDestroy {
+    /** To inject services @public */
+    public injector: Injector;
+
+    /** handle translate @public */
+    public translateService: TranslateService;
+
+    /** Data of smarttable populate through LocalDataSource @public */
+    public dataSource: LocalDataSource = new LocalDataSource();
+
+    /** Columns list of the smart table @public */
+    public columnList: object = {};
+
+    /** Settings for smarttable to populate the table with columns @public */
+    public settings: object = {};
+
+    /** operational State created data @public */
+    public operationalStateFirstStep: string = CONFIGCONSTANT.k8OperationalStateFirstStep;
+
+    /** operational State in creation data @public */
+    public operationalStateSecondStep: string = CONFIGCONSTANT.k8OperationalStateStateSecondStep;
+
+    /** operational State in deletion data @public */
+    public operationalStateThirdStep: string = CONFIGCONSTANT.k8OperationalStateThirdStep;
+
+    /** operational State failed deletion data @public */
+    public operationalStateFourthStep: string = CONFIGCONSTANT.k8OperationalStateFourthStep;
+
+    /** operational State failed creation data @public */
+    public operationalStateFifthStep: string = CONFIGCONSTANT.k8OperationalStateFifthStep;
+
+    /** Check the loading results @public */
+    public isLoadingResults: boolean = true;
+
+    /** Give the message for the loading @public */
+    public message: string = 'PLEASEWAIT';
+
+    /** Class for empty and present data @public */
+    public checkDataClass: string;
+
+    /** Instance of the rest service @private */
+    private restService: RestService;
+
+    /** dataService to pass the data from one component to another @private */
+    private dataService: DataService;
+
+    /** Formation of appropriate Data for LocalDatasource @private */
+    private profileData: {}[] = [];
+
+    /** Contains all methods related to shared @private */
+    private sharedService: SharedService;
+
+    /** Instance of the modal service @private */
+    private modalService: NgbModal;
+
+    /** Instance of subscriptions @private */
+    private generateDataSub: Subscription;
+
+    constructor(injector: Injector) {
+        this.injector = injector;
+        this.restService = this.injector.get(RestService);
+        this.dataService = this.injector.get(DataService);
+        this.sharedService = this.injector.get(SharedService);
+        this.translateService = this.injector.get(TranslateService);
+        this.modalService = this.injector.get(NgbModal);
+    }
+    /** Lifecyle Hooks the trigger before component is instantiate @public */
+    public ngOnInit(): void {
+        this.generateColumns();
+        this.generateSettings();
+        this.generateData();
+        this.generateDataSub = this.sharedService.dataEvent.subscribe(() => { this.generateData(); });
+    }
+
+    /** smart table Header Colums @public */
+    public generateColumns(): void {
+        this.columnList = {
+            name: { title: this.translateService.instant('NAME'), width: '20%', sortDirection: 'asc' },
+            identifier: { title: this.translateService.instant('IDENTIFIER'), width: '15%' },
+            state: {
+                title: this.translateService.instant('STATE'), width: '15%', type: 'html',
+                filter: {
+                    type: 'list',
+                    config: {
+                        selectText: 'Select',
+                        list: [
+                            { value: this.operationalStateFirstStep, title: this.operationalStateFirstStep },
+                            { value: this.operationalStateSecondStep, title: this.operationalStateSecondStep },
+                            { value: this.operationalStateThirdStep, title: this.operationalStateThirdStep },
+                            { value: this.operationalStateThirdStep, title: this.operationalStateFourthStep },
+                            { value: this.operationalStateThirdStep, title: this.operationalStateFifthStep }
+                        ]
+                    }
+                },
+                valuePrepareFunction: (cell: INFRACONFIGPAYLOAD, row: INFRACONFIGPAYLOAD): string => {
+                    if (row.state === this.operationalStateFirstStep) {
+                        return `<span class="icon-label" title="${row.state}">
+                                 <i class="fas fa-clock text-success"></i>
+                                 </span>`;
+                    } else if (row.state === this.operationalStateSecondStep) {
+                        return `<span class="icon-label" title="${row.state}">
+                                 <i class="fas fa-spinner text-warning"></i>
+                                 </span>`;
+                    } else if (row.state === this.operationalStateThirdStep) {
+                        return `<span class="icon-label" title="${row.state}">
+                                 <i class="fas fa-spinner text-danger"></i>
+                                 </span>`;
+                    } else if (row.state === this.operationalStateFourthStep) {
+                        return `<span class="icon-label" title="${row.state}">
+                                 <i class="fas fa-times-circle text-danger"></i>
+                                 </span>`;
+                    } else if (row.state === this.operationalStateFifthStep) {
+                        return `<span class="icon-label" title="${row.state}">
+                                 <i class="fas fa-times-circle text-warning"></i>
+                                 </span>`;
+                    } else {
+                        return `<span>${row.state}</span>`;
+                    }
+                }
+            },
+            created: { title: this.translateService.instant('CREATED'), width: '10%' },
+            modified: { title: this.translateService.instant('MODIFIED'), width: '10%' },
+            Actions: {
+                name: 'Action', width: '5%', filter: false, sort: false, title: this.translateService.instant('ACTIONS'), type: 'custom',
+                valuePrepareFunction: (cell: INFRACONFIGPAYLOAD, row: INFRACONFIGPAYLOAD): INFRACONFIGPAYLOAD => row,
+                renderComponent: K8sActionComponent
+            }
+        };
+    }
+
+    /** smart table Data Settings @public */
+    public generateSettings(): void {
+        this.settings = {
+            columns: this.columnList,
+            actions: { add: false, edit: false, delete: false, position: 'right' },
+            attr: this.sharedService.tableClassConfig(),
+            pager: this.sharedService.paginationPagerConfig(),
+            noDataMessage: this.translateService.instant('NODATAMSG')
+        };
+    }
+
+    /** smart table listing manipulation @public */
+    public onChange(perPageValue: number): void {
+        this.dataSource.setPaging(1, perPageValue, true);
+    }
+
+    /** smart table listing manipulation @public */
+    public onUserRowSelect(event: MessageEvent): void {
+        Object.assign(event.data, { page: 'k8-infra-profile' });
+        this.dataService.changeMessage(event.data);
+    }
+
+    /** Compose new profile @public */
+    public addProfile(): void {
+        // eslint-disable-next-line security/detect-non-literal-fs-filename
+        const modalRef: NgbModalRef = this.modalService.open(K8sInfraConfigAddComponent, { backdrop: 'static' });
+        modalRef.componentInstance.profileType = 'infra-config';
+        modalRef.result.then((result: MODALCLOSERESPONSEDATA) => {
+            if (result) {
+                this.sharedService.callData();
+            }
+        }).catch((): void => {
+            // Catch Navigation Error
+        });
+    }
+
+    /**
+     * Lifecyle hook which get trigger on component destruction
+     */
+    public ngOnDestroy(): void {
+        this.generateDataSub.unsubscribe();
+    }
+
+    /** Generate profile object from loop and return for the datasource @public */
+    public generateprofileData(profileData: INFRACONFIGPAYLOAD): INFRACONFIGPAYLOAD {
+        return {
+            name: profileData.name,
+            identifier: profileData._id,
+            created: this.sharedService.convertEpochTime(Number(profileData._admin.created)),
+            modified: this.sharedService.convertEpochTime(Number(profileData._admin.modified)),
+            description: profileData.description,
+            pageType: 'infra-config',
+            state: profileData.state
+        };
+    }
+
+    /** Fetching the data from server to Load in the smarttable @protected */
+    protected generateData(): void {
+        this.isLoadingResults = true;
+        this.restService.getResource(environment.K8SINFRACONFIGPROFILE_URL).subscribe((profileDatas: K8SCreateCLUSTERDATA[]) => {
+            this.profileData = [];
+            profileDatas.forEach((profileData: INFRACONFIGPAYLOAD) => {
+                const profileDataObj: INFRACONFIGPAYLOAD = this.generateprofileData(profileData);
+                this.profileData.push(profileDataObj);
+            });
+            if (this.profileData.length > 0) {
+                this.checkDataClass = 'dataTables_present';
+            } else {
+                this.checkDataClass = 'dataTables_empty';
+            }
+            this.dataSource.load(this.profileData).then((data: boolean) => {
+                this.isLoadingResults = false;
+            }).catch(() => {
+                this.isLoadingResults = false;
+            });
+        }, (error: ERRORDATA) => {
+            this.restService.handleError(error, 'get');
+            this.isLoadingResults = false;
+        });
+    }
+}
diff --git a/src/app/k8s/k8s-profile/k8s-infra-controller-details/K8sInfraControllerProfileComponent.html b/src/app/k8s/k8s-profile/k8s-infra-controller-details/K8sInfraControllerProfileComponent.html
new file mode 100644
index 0000000..592a0cb
--- /dev/null
+++ b/src/app/k8s/k8s-profile/k8s-infra-controller-details/K8sInfraControllerProfileComponent.html
@@ -0,0 +1,45 @@
+<!--
+Copyright 2020 TATA ELXSI
+
+Licensed under the Apache License, Version 2.0 (the 'License');
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+  http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+
+Author: SANDHYA JS (sandhya.j@tataelxsi.co.in)
+-->
+<div class="d-flex flex-row justify-content-between">
+  <div class="d-flex align-items-center header-style">{{'PAGE.K8S.INFRACONTROLLER' | translate}}</div>
+  <span class="button">
+    <button class="btn btn-primary me-2" type="button" placement="top" container="body"
+      ngbTooltip="{{'Create Profile' | translate}}" (click)="addProfile()">
+      <i class="fas fa-plus-circle" aria-hidden="true"></i>&nbsp; {{'PAGE.K8S.CREATEPROFILE' | translate}}
+    </button>
+  </span>
+</div>
+<div class="mt-2 mb-2 list-utilites-actions">
+  <div class="col-auto me-auto">
+    <nav class="custom-items-config">
+      <span><i class="fas fa-clock text-success"></i>{{operationalStateFirstStep}}</span>
+      <span><i class="fas fa-spinner text-warning"></i>{{operationalStateSecondStep}}</span>
+      <span><i class="fas fa-spinner text-danger"></i>{{operationalStateThirdStep}}</span>
+      <span><i class="fas fa-times-circle text-danger"></i>{{operationalStateFourthStep}}</span>
+      <span><i class="fas fa-times-circle text-warning"></i>{{operationalStateFifthStep}}</span>
+    </nav>
+  </div>
+  <page-per-row class="me-2" (pagePerRow)="onChange($event)"></page-per-row>
+  <page-reload></page-reload>
+</div>
+<div class="smarttable-style bg-white mt-1">
+  <ng2-smart-table [ngClass]="checkDataClass" [settings]="settings" [source]="dataSource"
+    (userRowSelect)="onUserRowSelect($event)">
+  </ng2-smart-table>
+</div>
+<app-loader [waitingMessage]="message" *ngIf="isLoadingResults"></app-loader>
\ No newline at end of file
diff --git a/src/app/k8s/k8s-profile/k8s-infra-controller-details/K8sInfraControllerProfileComponent.scss b/src/app/k8s/k8s-profile/k8s-infra-controller-details/K8sInfraControllerProfileComponent.scss
new file mode 100644
index 0000000..c55461a
--- /dev/null
+++ b/src/app/k8s/k8s-profile/k8s-infra-controller-details/K8sInfraControllerProfileComponent.scss
@@ -0,0 +1,17 @@
+/*
+ Copyright 2020 TATA ELXSI
+
+ Licensed under the Apache License, Version 2.0 (the 'License');
+ you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+
+ Author: SANDHYA JS (sandhya.j@tataelxsi.co.in)
+*/
\ No newline at end of file
diff --git a/src/app/k8s/k8s-profile/k8s-infra-controller-details/K8sInfraControllerProfileComponent.ts b/src/app/k8s/k8s-profile/k8s-infra-controller-details/K8sInfraControllerProfileComponent.ts
new file mode 100644
index 0000000..0402acf
--- /dev/null
+++ b/src/app/k8s/k8s-profile/k8s-infra-controller-details/K8sInfraControllerProfileComponent.ts
@@ -0,0 +1,253 @@
+/*
+ Copyright 2020 TATA ELXSI
+
+ Licensed under the Apache License, Version 2.0 (the 'License');
+ you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+
+  http://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+
+ Author: SANDHYA JS (sandhya.j@tataelxsi.co.in)
+*/
+/**
+ * @file K8sInfraConfigProfileComponent.ts.
+ */
+import { Component, Injector, OnDestroy, OnInit } from '@angular/core';
+import { NgbModal, NgbModalRef } from '@ng-bootstrap/ng-bootstrap';
+import { TranslateService } from '@ngx-translate/core';
+import { CONFIGCONSTANT, ERRORDATA, MODALCLOSERESPONSEDATA } from 'CommonModel';
+import { DataService } from 'DataService';
+import { environment } from 'environment';
+import { K8sActionComponent } from 'K8sActionComponent';
+import { INFRACONFIGPAYLOAD, K8SCreateCLUSTERDATA, K8SCREATEDATADISPLAY } from 'K8sModel';
+import { LocalDataSource } from 'ng2-smart-table';
+import { RestService } from 'RestService';
+import { Subscription } from 'rxjs';
+import { SharedService } from 'SharedService';
+import { K8sInfraConfigAddComponent } from '../k8s-infra-config-add/K8sInfraConfigAddComponent';
+/**
+ * Creating Component
+ * @Component takes K8sInfraControllerProfileComponent.html as template url
+ */
+@Component({
+    selector: 'app-infra-controller-profile',
+    templateUrl: './K8sInfraControllerProfileComponent.html',
+    styleUrls: ['./K8sInfraControllerProfileComponent.scss']
+})
+/** Exporting a class @exports K8sInfraControllerProfileComponent */
+export class K8sInfraControllerProfileComponent implements OnInit, OnDestroy {
+    /** To inject services @public */
+    public injector: Injector;
+
+    /** handle translate @public */
+    public translateService: TranslateService;
+
+    /** Data of smarttable populate through LocalDataSource @public */
+    public dataSource: LocalDataSource = new LocalDataSource();
+
+    /** Columns list of the smart table @public */
+    public columnList: object = {};
+
+    /** Settings for smarttable to populate the table with columns @public */
+    public settings: object = {};
+
+    /** operational State created data @public */
+    public operationalStateFirstStep: string = CONFIGCONSTANT.k8OperationalStateFirstStep;
+
+    /** operational State in creation data @public */
+    public operationalStateSecondStep: string = CONFIGCONSTANT.k8OperationalStateStateSecondStep;
+
+    /** operational State in deletion data @public */
+    public operationalStateThirdStep: string = CONFIGCONSTANT.k8OperationalStateThirdStep;
+
+    /** operational State failed deletion data @public */
+    public operationalStateFourthStep: string = CONFIGCONSTANT.k8OperationalStateFourthStep;
+
+    /** operational State failed creation data @public */
+    public operationalStateFifthStep: string = CONFIGCONSTANT.k8OperationalStateFifthStep;
+
+    /** Check the loading results @public */
+    public isLoadingResults: boolean = true;
+
+    /** Give the message for the loading @public */
+    public message: string = 'PLEASEWAIT';
+
+    /** Class for empty and present data @public */
+    public checkDataClass: string;
+
+    /** Instance of the rest service @private */
+    private restService: RestService;
+
+    /** dataService to pass the data from one component to another @private */
+    private dataService: DataService;
+
+    /** Formation of appropriate Data for LocalDatasource @private */
+    private profileData: {}[] = [];
+
+    /** Contains all methods related to shared @private */
+    private sharedService: SharedService;
+
+    /** Instance of the modal service @private */
+    private modalService: NgbModal;
+
+    /** Instance of subscriptions @private */
+    private generateDataSub: Subscription;
+
+    constructor(injector: Injector) {
+        this.injector = injector;
+        this.restService = this.injector.get(RestService);
+        this.dataService = this.injector.get(DataService);
+        this.sharedService = this.injector.get(SharedService);
+        this.translateService = this.injector.get(TranslateService);
+        this.modalService = this.injector.get(NgbModal);
+    }
+    /** Lifecyle Hooks the trigger before component is instantiate @public */
+    public ngOnInit(): void {
+        this.generateColumns();
+        this.generateSettings();
+        this.generateData();
+        this.generateDataSub = this.sharedService.dataEvent.subscribe(() => { this.generateData(); });
+    }
+
+    /** smart table Header Colums @public */
+    public generateColumns(): void {
+        this.columnList = {
+            name: { title: this.translateService.instant('NAME'), width: '20%', sortDirection: 'asc' },
+            identifier: { title: this.translateService.instant('IDENTIFIER'), width: '15%' },
+            state: {
+                title: this.translateService.instant('STATE'), width: '15%', type: 'html',
+                filter: {
+                    type: 'list',
+                    config: {
+                        selectText: 'Select',
+                        list: [
+                            { value: this.operationalStateFirstStep, title: this.operationalStateFirstStep },
+                            { value: this.operationalStateSecondStep, title: this.operationalStateSecondStep },
+                            { value: this.operationalStateThirdStep, title: this.operationalStateThirdStep },
+                            { value: this.operationalStateThirdStep, title: this.operationalStateFourthStep },
+                            { value: this.operationalStateThirdStep, title: this.operationalStateFifthStep }
+                        ]
+                    }
+                },
+                valuePrepareFunction: (cell: INFRACONFIGPAYLOAD, row: INFRACONFIGPAYLOAD): string => {
+                    if (row.state === this.operationalStateFirstStep) {
+                        return `<span class="icon-label" title="${row.state}">
+                                 <i class="fas fa-clock text-success"></i>
+                                 </span>`;
+                    } else if (row.state === this.operationalStateSecondStep) {
+                        return `<span class="icon-label" title="${row.state}">
+                                 <i class="fas fa-spinner text-warning"></i>
+                                 </span>`;
+                    } else if (row.state === this.operationalStateThirdStep) {
+                        return `<span class="icon-label" title="${row.state}">
+                                 <i class="fas fa-spinner text-danger"></i>
+                                 </span>`;
+                    } else if (row.state === this.operationalStateFourthStep) {
+                        return `<span class="icon-label" title="${row.state}">
+                                 <i class="fas fa-times-circle text-danger"></i>
+                                 </span>`;
+                    } else if (row.state === this.operationalStateFifthStep) {
+                        return `<span class="icon-label" title="${row.state}">
+                                 <i class="fas fa-times-circle text-warning"></i>
+                                 </span>`;
+                    } else {
+                        return `<span>${row.state}</span>`;
+                    }
+                }
+            },
+            created: { title: this.translateService.instant('CREATED'), width: '10%' },
+            modified: { title: this.translateService.instant('MODIFIED'), width: '10%' },
+            Actions: {
+                name: 'Action', width: '5%', filter: false, sort: false, title: this.translateService.instant('ACTIONS'), type: 'custom',
+                valuePrepareFunction: (cell: K8SCREATEDATADISPLAY, row: K8SCREATEDATADISPLAY): K8SCREATEDATADISPLAY => row,
+                renderComponent: K8sActionComponent
+            }
+        };
+    }
+
+    /** smart table Data Settings @public */
+    public generateSettings(): void {
+        this.settings = {
+            columns: this.columnList,
+            actions: { add: false, edit: false, delete: false, position: 'right' },
+            attr: this.sharedService.tableClassConfig(),
+            pager: this.sharedService.paginationPagerConfig(),
+            noDataMessage: this.translateService.instant('NODATAMSG')
+        };
+    }
+
+    /** smart table listing manipulation @public */
+    public onChange(perPageValue: number): void {
+        this.dataSource.setPaging(1, perPageValue, true);
+    }
+
+    /** smart table listing manipulation @public */
+    public onUserRowSelect(event: MessageEvent): void {
+        Object.assign(event.data, { page: 'k8-infra-controller' });
+        this.dataService.changeMessage(event.data);
+    }
+
+    /** Compose new Profile @public */
+    public addProfile(): void {
+        // eslint-disable-next-line security/detect-non-literal-fs-filename
+        const modalRef: NgbModalRef = this.modalService.open(K8sInfraConfigAddComponent, { backdrop: 'static' });
+        modalRef.componentInstance.profileType = 'infra-controller';
+        modalRef.result.then((result: MODALCLOSERESPONSEDATA) => {
+            if (result) {
+                this.sharedService.callData();
+            }
+        }).catch((): void => {
+            // Catch Navigation Error
+        });
+    }
+
+    /**
+     * Lifecyle hook which get trigger on component destruction
+     */
+    public ngOnDestroy(): void {
+        this.generateDataSub.unsubscribe();
+    }
+    /** Generate profile object from loop and return for the datasource @public */
+    public generateprofileData(profileData: INFRACONFIGPAYLOAD): INFRACONFIGPAYLOAD {
+        return {
+            name: profileData.name,
+            identifier: profileData._id,
+            created: this.sharedService.convertEpochTime(Number(profileData._admin.created)),
+            modified: this.sharedService.convertEpochTime(Number(profileData._admin.modified)),
+            description: profileData.description,
+            pageType: 'infra-controller',
+            state: profileData.state
+        };
+    }
+
+    /** Fetching the data from server to Load in the smarttable @protected */
+    protected generateData(): void {
+        this.isLoadingResults = true;
+        this.restService.getResource(environment.K8SINFRACONTROLLERPROFILE_URL).subscribe((profileDatas: K8SCreateCLUSTERDATA[]) => {
+            this.profileData = [];
+            profileDatas.forEach((profileData: INFRACONFIGPAYLOAD) => {
+                const profileDataObj: INFRACONFIGPAYLOAD = this.generateprofileData(profileData);
+                this.profileData.push(profileDataObj);
+            });
+            if (this.profileData.length > 0) {
+                this.checkDataClass = 'dataTables_present';
+            } else {
+                this.checkDataClass = 'dataTables_empty';
+            }
+            this.dataSource.load(this.profileData).then((data: boolean) => {
+                this.isLoadingResults = false;
+            }).catch(() => {
+                this.isLoadingResults = false;
+            });
+        }, (error: ERRORDATA) => {
+            this.restService.handleError(error, 'get');
+            this.isLoadingResults = false;
+        });
+    }
+}
diff --git a/src/app/k8s/k8s-profile/k8s-resource-profile/K8sResourceProfileComponent.html b/src/app/k8s/k8s-profile/k8s-resource-profile/K8sResourceProfileComponent.html
new file mode 100644
index 0000000..2e76c13
--- /dev/null
+++ b/src/app/k8s/k8s-profile/k8s-resource-profile/K8sResourceProfileComponent.html
@@ -0,0 +1,45 @@
+<!--
+Copyright 2020 TATA ELXSI
+
+Licensed under the Apache License, Version 2.0 (the 'License');
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+  http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+
+Author: SANDHYA JS (sandhya.j@tataelxsi.co.in)
+-->
+<div class="d-flex flex-row justify-content-between">
+  <div class="d-flex align-items-center header-style">{{'PAGE.K8S.RESOURCE' | translate}}</div>
+  <span class="button">
+    <button class="btn btn-primary me-2" type="button" placement="top" container="body"
+      ngbTooltip="{{'Create Profile' | translate}}" (click)="addProfile()">
+      <i class="fas fa-plus-circle" aria-hidden="true"></i>&nbsp; {{'PAGE.K8S.CREATEPROFILE' | translate}}
+    </button>
+  </span>
+</div>
+<div class="mt-2 mb-2 list-utilites-actions">
+  <div class="col-auto me-auto">
+    <nav class="custom-items-config">
+      <span><i class="fas fa-clock text-success"></i>{{operationalStateFirstStep}}</span>
+      <span><i class="fas fa-spinner text-warning"></i>{{operationalStateSecondStep}}</span>
+      <span><i class="fas fa-spinner text-danger"></i>{{operationalStateThirdStep}}</span>
+      <span><i class="fas fa-times-circle text-danger"></i>{{operationalStateFourthStep}}</span>
+      <span><i class="fas fa-times-circle text-warning"></i>{{operationalStateFifthStep}}</span>
+    </nav>
+  </div>
+  <page-per-row class="me-2" (pagePerRow)="onChange($event)"></page-per-row>
+  <page-reload></page-reload>
+</div>
+<div class="smarttable-style bg-white mt-1">
+  <ng2-smart-table [ngClass]="checkDataClass" [settings]="settings" [source]="dataSource"
+    (userRowSelect)="onUserRowSelect($event)">
+  </ng2-smart-table>
+</div>
+<app-loader [waitingMessage]="message" *ngIf="isLoadingResults"></app-loader>
\ No newline at end of file
diff --git a/src/app/k8s/k8s-profile/k8s-resource-profile/K8sResourceProfileComponent.scss b/src/app/k8s/k8s-profile/k8s-resource-profile/K8sResourceProfileComponent.scss
new file mode 100644
index 0000000..c55461a
--- /dev/null
+++ b/src/app/k8s/k8s-profile/k8s-resource-profile/K8sResourceProfileComponent.scss
@@ -0,0 +1,17 @@
+/*
+ Copyright 2020 TATA ELXSI
+
+ Licensed under the Apache License, Version 2.0 (the 'License');
+ you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+
+ Author: SANDHYA JS (sandhya.j@tataelxsi.co.in)
+*/
\ No newline at end of file
diff --git a/src/app/k8s/k8s-profile/k8s-resource-profile/K8sResourceProfileComponent.ts b/src/app/k8s/k8s-profile/k8s-resource-profile/K8sResourceProfileComponent.ts
new file mode 100644
index 0000000..296b0f6
--- /dev/null
+++ b/src/app/k8s/k8s-profile/k8s-resource-profile/K8sResourceProfileComponent.ts
@@ -0,0 +1,254 @@
+/*
+ Copyright 2020 TATA ELXSI
+
+ Licensed under the Apache License, Version 2.0 (the 'License');
+ you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+
+  http://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+
+ Author: SANDHYA JS (sandhya.j@tataelxsi.co.in)
+*/
+/**
+ * @file K8sInfraConfigProfileComponent.ts.
+ */
+import { Component, Injector, OnDestroy, OnInit } from '@angular/core';
+import { NgbModal, NgbModalRef } from '@ng-bootstrap/ng-bootstrap';
+import { TranslateService } from '@ngx-translate/core';
+import { CONFIGCONSTANT, ERRORDATA, MODALCLOSERESPONSEDATA } from 'CommonModel';
+import { DataService } from 'DataService';
+import { environment } from 'environment';
+import { K8sActionComponent } from 'K8sActionComponent';
+import { INFRACONFIGPAYLOAD, K8SCreateCLUSTERDATA, K8SCREATEDATADISPLAY } from 'K8sModel';
+import { LocalDataSource } from 'ng2-smart-table';
+import { RestService } from 'RestService';
+import { Subscription } from 'rxjs';
+import { SharedService } from 'SharedService';
+import { K8sInfraConfigAddComponent } from '../k8s-infra-config-add/K8sInfraConfigAddComponent';
+/**
+ * Creating Component
+ * @Component takes K8sInfraConfigProfileComponent.html as template url
+ */
+@Component({
+    selector: 'app-resource-profile',
+    templateUrl: './K8sResourceProfileComponent.html',
+    styleUrls: ['./K8sResourceProfileComponent.scss']
+})
+/** Exporting a class @exports K8sResourceProfileComponent */
+export class K8sResourceProfileComponent implements OnInit, OnDestroy {
+    /** To inject services @public */
+    public injector: Injector;
+
+    /** handle translate @public */
+    public translateService: TranslateService;
+
+    /** Data of smarttable populate through LocalDataSource @public */
+    public dataSource: LocalDataSource = new LocalDataSource();
+
+    /** Columns list of the smart table @public */
+    public columnList: object = {};
+
+    /** Settings for smarttable to populate the table with columns @public */
+    public settings: object = {};
+
+    /** operational State created data @public */
+    public operationalStateFirstStep: string = CONFIGCONSTANT.k8OperationalStateFirstStep;
+
+    /** operational State in creation data @public */
+    public operationalStateSecondStep: string = CONFIGCONSTANT.k8OperationalStateStateSecondStep;
+
+    /** operational State in deletion data @public */
+    public operationalStateThirdStep: string = CONFIGCONSTANT.k8OperationalStateThirdStep;
+
+    /** operational State failed deletion data @public */
+    public operationalStateFourthStep: string = CONFIGCONSTANT.k8OperationalStateFourthStep;
+
+    /** operational State failed creation data @public */
+    public operationalStateFifthStep: string = CONFIGCONSTANT.k8OperationalStateFifthStep;
+
+    /** Check the loading results @public */
+    public isLoadingResults: boolean = true;
+
+    /** Give the message for the loading @public */
+    public message: string = 'PLEASEWAIT';
+
+    /** Class for empty and present data @public */
+    public checkDataClass: string;
+
+    /** Instance of the rest service @private */
+    private restService: RestService;
+
+    /** dataService to pass the data from one component to another @private */
+    private dataService: DataService;
+
+    /** Formation of appropriate Data for LocalDatasource @private */
+    private profileData: {}[] = [];
+
+    /** Contains all methods related to shared @private */
+    private sharedService: SharedService;
+
+    /** Instance of the modal service @private */
+    private modalService: NgbModal;
+
+    /** Instance of subscriptions @private */
+    private generateDataSub: Subscription;
+
+    constructor(injector: Injector) {
+        this.injector = injector;
+        this.restService = this.injector.get(RestService);
+        this.dataService = this.injector.get(DataService);
+        this.sharedService = this.injector.get(SharedService);
+        this.translateService = this.injector.get(TranslateService);
+        this.modalService = this.injector.get(NgbModal);
+    }
+    /** Lifecyle Hooks the trigger before component is instantiate @public */
+    public ngOnInit(): void {
+        this.generateColumns();
+        this.generateSettings();
+        this.generateData();
+        this.generateDataSub = this.sharedService.dataEvent.subscribe(() => { this.generateData(); });
+    }
+
+    /** smart table Header Colums @public */
+    public generateColumns(): void {
+        this.columnList = {
+            name: { title: this.translateService.instant('NAME'), width: '20%', sortDirection: 'asc' },
+            identifier: { title: this.translateService.instant('IDENTIFIER'), width: '15%' },
+            state: {
+                title: this.translateService.instant('STATE'), width: '15%', type: 'html',
+                filter: {
+                    type: 'list',
+                    config: {
+                        selectText: 'Select',
+                        list: [
+                            { value: this.operationalStateFirstStep, title: this.operationalStateFirstStep },
+                            { value: this.operationalStateSecondStep, title: this.operationalStateSecondStep },
+                            { value: this.operationalStateThirdStep, title: this.operationalStateThirdStep },
+                            { value: this.operationalStateThirdStep, title: this.operationalStateFourthStep },
+                            { value: this.operationalStateThirdStep, title: this.operationalStateFifthStep }
+                        ]
+                    }
+                },
+                valuePrepareFunction: (cell: INFRACONFIGPAYLOAD, row: INFRACONFIGPAYLOAD): string => {
+                    if (row.state === this.operationalStateFirstStep) {
+                        return `<span class="icon-label" title="${row.state}">
+                                 <i class="fas fa-clock text-success"></i>
+                                 </span>`;
+                    } else if (row.state === this.operationalStateSecondStep) {
+                        return `<span class="icon-label" title="${row.state}">
+                                 <i class="fas fa-spinner text-warning"></i>
+                                 </span>`;
+                    } else if (row.state === this.operationalStateThirdStep) {
+                        return `<span class="icon-label" title="${row.state}">
+                                 <i class="fas fa-spinner text-danger"></i>
+                                 </span>`;
+                    } else if (row.state === this.operationalStateFourthStep) {
+                        return `<span class="icon-label" title="${row.state}">
+                                 <i class="fas fa-times-circle text-danger"></i>
+                                 </span>`;
+                    } else if (row.state === this.operationalStateFifthStep) {
+                        return `<span class="icon-label" title="${row.state}">
+                                 <i class="fas fa-times-circle text-warning"></i>
+                                 </span>`;
+                    } else {
+                        return `<span>${row.state}</span>`;
+                    }
+                }
+            },
+            created: { title: this.translateService.instant('CREATED'), width: '10%' },
+            modified: { title: this.translateService.instant('MODIFIED'), width: '10%' },
+            Actions: {
+                name: 'Action', width: '5%', filter: false, sort: false, title: this.translateService.instant('ACTIONS'), type: 'custom',
+                valuePrepareFunction: (cell: INFRACONFIGPAYLOAD, row: INFRACONFIGPAYLOAD): INFRACONFIGPAYLOAD => row,
+                renderComponent: K8sActionComponent
+            }
+        };
+    }
+
+    /** smart table Data Settings @public */
+    public generateSettings(): void {
+        this.settings = {
+            columns: this.columnList,
+            actions: { add: false, edit: false, delete: false, position: 'right' },
+            attr: this.sharedService.tableClassConfig(),
+            pager: this.sharedService.paginationPagerConfig(),
+            noDataMessage: this.translateService.instant('NODATAMSG')
+        };
+    }
+
+    /** smart table listing manipulation @public */
+    public onChange(perPageValue: number): void {
+        this.dataSource.setPaging(1, perPageValue, true);
+    }
+
+    /** smart table listing manipulation @public */
+    public onUserRowSelect(event: MessageEvent): void {
+        Object.assign(event.data, { page: 'k8-resource-profile' });
+        this.dataService.changeMessage(event.data);
+    }
+
+    /** Compose new Profile @public */
+    public addProfile(): void {
+        // eslint-disable-next-line security/detect-non-literal-fs-filename
+        const modalRef: NgbModalRef = this.modalService.open(K8sInfraConfigAddComponent, { backdrop: 'static' });
+        modalRef.componentInstance.profileType = 'resource-profile';
+        modalRef.result.then((result: MODALCLOSERESPONSEDATA) => {
+            if (result) {
+                this.sharedService.callData();
+            }
+        }).catch((): void => {
+            // Catch Navigation Error
+        });
+    }
+
+    /**
+     * Lifecyle hook which get trigger on component destruction
+     */
+    public ngOnDestroy(): void {
+        this.generateDataSub.unsubscribe();
+    }
+
+    /** Generate profile object from loop and return for the datasource @public */
+    public generateProfileData(profileData: INFRACONFIGPAYLOAD): INFRACONFIGPAYLOAD {
+        return {
+            name: profileData.name,
+            identifier: profileData._id,
+            created: this.sharedService.convertEpochTime(Number(profileData._admin.created)),
+            modified: this.sharedService.convertEpochTime(Number(profileData._admin.modified)),
+            description: profileData.description,
+            pageType: 'resource-profile',
+            state: profileData.state
+        };
+    }
+
+    /** Fetching the data from server to Load in the smarttable @protected */
+    protected generateData(): void {
+        this.isLoadingResults = true;
+        this.restService.getResource(environment.K8SRESOURCEPROFILE_URL).subscribe((profileDatas: K8SCreateCLUSTERDATA[]) => {
+            this.profileData = [];
+            profileDatas.forEach((profileData: INFRACONFIGPAYLOAD) => {
+                const profileDataObj: INFRACONFIGPAYLOAD = this.generateProfileData(profileData);
+                this.profileData.push(profileDataObj);
+            });
+            if (this.profileData.length > 0) {
+                this.checkDataClass = 'dataTables_present';
+            } else {
+                this.checkDataClass = 'dataTables_empty';
+            }
+            this.dataSource.load(this.profileData).then((data: boolean) => {
+                this.isLoadingResults = false;
+            }).catch(() => {
+                this.isLoadingResults = false;
+            });
+        }, (error: ERRORDATA) => {
+            this.restService.handleError(error, 'get');
+            this.isLoadingResults = false;
+        });
+    }
+}
diff --git a/src/app/k8s/k8scluster/K8sClusterComponent.html b/src/app/k8s/k8scluster/K8sClusterComponent.html
index 613e6aa..0bb251e 100644
--- a/src/app/k8s/k8scluster/K8sClusterComponent.html
+++ b/src/app/k8s/k8scluster/K8sClusterComponent.html
@@ -16,27 +16,49 @@
 Author: KUMARAN M (kumaran.m@tataelxsi.co.in), RAJESH S (rajesh.s@tataelxsi.co.in), BARATH KUMAR R (barath.r@tataelxsi.co.in)
 -->
 <div class="d-flex flex-row justify-content-between">
-  <div class="d-flex align-items-center header-style">{{'PAGE.K8S.REGISTERK8CLUSTER' | translate}}</div>
-  <span class="button">
-    <button class="btn btn-primary" type="button" placement="top" container="body" ngbTooltip="{{'PAGE.K8S.ADDK8CLUSTER' | translate}}"
-      (click)="addK8sCluster()">
-      <i class="fas fa-plus-circle" aria-hidden="true"></i>&nbsp; {{'PAGE.K8S.ADDK8CLUSTER' | translate}}
+  <div class="d-flex align-items-center header-style">
+    <div class="switches-container justify-content-start">
+      <input type="radio" id="switchRegister" name="switchPlan" (change)="onChangeEvent($event.target.value)"
+        value="Registered" checked="checked" />
+      <input type="radio" id="switchManage" name="switchPlan" (change)="onChangeEvent($event.target.value)"
+        value="Managed" />
+      <label for="switchRegister">{{'PAGE.K8S.REGISTERED' | translate}}</label>
+      <label for="switchManage">{{'PAGE.K8S.MANAGED' | translate}}</label>
+      <div class="switch-wrapper">
+        <div class="switch">
+          <div>{{'PAGE.K8S.REGISTERED' | translate}}</div>
+          <div>{{'PAGE.K8S.MANAGED' | translate}}</div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <span class="button justify-content-end">
+    <button *ngIf="isCluster === 'Registered'" class="btn btn-primary me-2" type="button" placement="top"
+      container="body" ngbTooltip="{{'PAGE.K8S.REGISTERCLUSTER' | translate}}" (click)="addK8sCluster()">
+      <i class="fas fa-plus-circle" aria-hidden="true"></i>&nbsp; {{'PAGE.K8S.REGISTERCLUSTER' | translate}}
+    </button>
+    <button *ngIf="isCluster === 'Managed'" class="btn btn-primary me-2" type="button" placement="top" container="body"
+      ngbTooltip="{{'Create Cluster' | translate}}" (click)="addK8sCluster()">
+      <i class="fas fa-plus-circle" aria-hidden="true"></i>&nbsp; {{'PAGE.K8S.CREATECLUSTER' | translate}}
     </button>
   </span>
 </div>
 <div class="mt-2 mb-2 list-utilites-actions">
   <div class="col-auto me-auto">
     <nav class="custom-items-config">
-      <span><i class="fas fa-clock text-warning"></i>{{operationalStateFirstStep}}</span>
-      <span><i class="fas fa-check-circle text-success"></i>{{operationalStateSecondStep}}</span>
-      <span><i class="fas fa-times-circle text-danger"></i>{{operationalStateThirdStep}}</span>
+      <span><i class="fas fa-clock text-success"></i>{{operationalStateFirstStep}}</span>
+      <span><i class="fas fa-spinner text-warning"></i>{{operationalStateSecondStep}}</span>
+      <span><i class="fas fa-spinner text-danger"></i>{{operationalStateThirdStep}}</span>
+      <span><i class="fas fa-times-circle text-danger"></i>{{operationalStateFourthStep}}</span>
+      <span><i class="fas fa-times-circle text-warning"></i>{{operationalStateFifthStep}}</span>
     </nav>
   </div>
   <page-per-row class="me-2" (pagePerRow)="onChange($event)"></page-per-row>
   <page-reload></page-reload>
 </div>
 <div class="smarttable-style bg-white mt-1">
-  <ng2-smart-table [ngClass]="checkDataClass" [settings]="settings" [source]="dataSource" (userRowSelect)="onUserRowSelect($event)">
+  <ng2-smart-table [ngClass]="checkDataClass" [settings]="settings" [source]="dataSource"
+    (userRowSelect)="onUserRowSelect($event)">
   </ng2-smart-table>
 </div>
 <app-loader [waitingMessage]="message" *ngIf="isLoadingResults"></app-loader>
\ No newline at end of file
diff --git a/src/app/k8s/k8scluster/K8sClusterComponent.scss b/src/app/k8s/k8scluster/K8sClusterComponent.scss
index 021d205..d194553 100644
--- a/src/app/k8s/k8scluster/K8sClusterComponent.scss
+++ b/src/app/k8s/k8scluster/K8sClusterComponent.scss
@@ -14,4 +14,89 @@
  limitations under the License.
 
  Author: KUMARAN M (kumaran.m@tataelxsi.co.in), RAJESH S (rajesh.s@tataelxsi.co.in), BARATH KUMAR R (barath.r@tataelxsi.co.in)
-*/
\ No newline at end of file
+*/
+.switches-container {
+   border-bottom: 1px solid #5f5f5f;
+   background-color: #054c8c;
+   border-radius: 2px;
+   width: 230px;
+   position: relative;
+   display: block;
+   padding: 0;
+   line-height: 2em;
+   border-radius: 3rem;
+   margin-left: auto;
+   margin-right: auto;
+   height: 36px;
+}
+
+.switches-container input {
+   visibility: hidden;
+   position: absolute;
+   top: 0;
+}
+
+.switches-container label {
+   width: 50%;
+   padding: 0;
+   margin: 0;
+   text-align: center;
+   cursor: pointer;
+   color: white;
+   font-size: 0.875rem;
+   font-weight: 400;
+}
+
+.switch-wrapper {
+   position: absolute;
+   top: 0;
+   bottom: 0;
+   width: 50%;
+   padding: 0.15rem;
+   z-index: 3;
+   transition: transform 0.5s cubic-bezier(0.77, 0, 0.175, 1);
+}
+
+.switch {
+   border-radius: 3rem;
+   background: white;
+   height: 100%;
+   width: 110px;
+   margin-top: 1px;
+   margin-right: 1px;
+}
+
+.switch div {
+   width: 100%;
+   text-align: center;
+   opacity: 0;
+   display: block;
+   color: #054c8c;
+   font-size: 0.875rem;
+   font-weight: 400;
+   transition: opacity 0.2s cubic-bezier(0.77, 0, 0.175, 1) 0.125s;
+   will-change: opacity;
+   position: absolute;
+   top: 0;
+   left: 0;
+}
+
+/* slide the switch box from right to left */
+.switches-container input:nth-of-type(1):checked ~ .switch-wrapper {
+   transform: translateX(0%);
+}
+
+/* slide the switch box from left to right */
+.switches-container input:nth-of-type(2):checked ~ .switch-wrapper {
+   transform: translateX(100%);
+}
+
+/* toggle the switch box labels - first checkbox:checked - show first switch div */
+.switches-container input:nth-of-type(1):checked ~ .switch-wrapper .switch div:nth-of-type(1) {
+   opacity: 1;
+}
+
+/* toggle the switch box labels - second checkbox:checked - show second switch div */
+.switches-container input:nth-of-type(2):checked ~ .switch-wrapper .switch div:nth-of-type(2) {
+   opacity: 1;
+}
diff --git a/src/app/k8s/k8scluster/K8sClusterComponent.ts b/src/app/k8s/k8scluster/K8sClusterComponent.ts
index 88a4fb6..ee98ed5 100644
--- a/src/app/k8s/k8scluster/K8sClusterComponent.ts
+++ b/src/app/k8s/k8scluster/K8sClusterComponent.ts
@@ -26,7 +26,7 @@
 import { environment } from 'environment';
 import { K8sActionComponent } from 'K8sActionComponent';
 import { K8sAddClusterComponent } from 'K8sAddClusterComponent';
-import { K8SCLUSTERDATA, K8SCLUSTERDATADISPLAY } from 'K8sModel';
+import { K8SCLUSTERDATA, K8SCLUSTERDATADISPLAY, K8SCREATEDATADISPLAY } from 'K8sModel';
 import { LocalDataSource } from 'ng2-smart-table';
 import { RestService } from 'RestService';
 import { Subscription } from 'rxjs';
@@ -66,15 +66,27 @@
   /** Class for empty and present data @public */
   public checkDataClass: string;
 
-  /** operational State init data @public */
+  /** operational State created data @public */
   public operationalStateFirstStep: string = CONFIGCONSTANT.k8OperationalStateFirstStep;
 
-  /** operational State running data @public */
+  /** operational State in creation data @public */
   public operationalStateSecondStep: string = CONFIGCONSTANT.k8OperationalStateStateSecondStep;
 
-  /** operational State failed data @public */
+  /** operational State in deletion data @public */
   public operationalStateThirdStep: string = CONFIGCONSTANT.k8OperationalStateThirdStep;
 
+  /** operational State failed deletion data @public */
+  public operationalStateFourthStep: string = CONFIGCONSTANT.k8OperationalStateFourthStep;
+
+  /** operational State failed creation data @public */
+  public operationalStateFifthStep: string = CONFIGCONSTANT.k8OperationalStateFifthStep;
+
+  /** cluster Type @public */
+  public isCluster: string = 'Registered';
+
+  /** cluster  @public */
+  public clusterUrl: string;
+
   /** Instance of the rest service @private */
   private restService: RestService;
 
@@ -107,6 +119,7 @@
     this.generateSettings();
     this.generateData();
     this.generateDataSub = this.sharedService.dataEvent.subscribe(() => { this.generateData(); });
+    sessionStorage.setItem('clusterType', this.isCluster);
   }
 
   /** smart table Header Colums @public */
@@ -115,8 +128,8 @@
       name: { title: this.translateService.instant('NAME'), width: '20%', sortDirection: 'asc' },
       identifier: { title: this.translateService.instant('IDENTIFIER'), width: '20%' },
       version: { title: this.translateService.instant('K8VERSION'), width: '10%' },
-      operationalState: {
-        title: this.translateService.instant('OPERATIONALSTATE'), width: '15%', type: 'html',
+      state: {
+        title: this.translateService.instant('STATE'), width: '15%', type: 'html',
         filter: {
           type: 'list',
           config: {
@@ -124,25 +137,35 @@
             list: [
               { value: this.operationalStateFirstStep, title: this.operationalStateFirstStep },
               { value: this.operationalStateSecondStep, title: this.operationalStateSecondStep },
-              { value: this.operationalStateThirdStep, title: this.operationalStateThirdStep }
+              { value: this.operationalStateThirdStep, title: this.operationalStateThirdStep },
+              { value: this.operationalStateThirdStep, title: this.operationalStateFourthStep },
+              { value: this.operationalStateThirdStep, title: this.operationalStateFifthStep }
             ]
           }
         },
         valuePrepareFunction: (cell: K8SCLUSTERDATADISPLAY, row: K8SCLUSTERDATADISPLAY): string => {
-          if (row.operationalState === this.operationalStateFirstStep) {
-            return `<span class="icon-label" title="${row.operationalState}">
-                        <i class="fas fa-clock text-warning"></i>
-                        </span>`;
-          } else if (row.operationalState === this.operationalStateSecondStep) {
-            return `<span class="icon-label" title="${row.operationalState}">
-                        <i class="fas fa-check-circle text-success"></i>
-                        </span>`;
-          } else if (row.operationalState === this.operationalStateThirdStep) {
-            return `<span class="icon-label" title="${row.operationalState}">
-                        <i class="fas fa-times-circle text-danger"></i>
-                        </span>`;
+          if (row.state === this.operationalStateFirstStep) {
+            return `<span class="icon-label" title="${row.state}">
+                         <i class="fas fa-clock text-success"></i>
+                         </span>`;
+          } else if (row.state === this.operationalStateSecondStep) {
+            return `<span class="icon-label" title="${row.state}">
+                         <i class="fas fa-spinner text-warning"></i>
+                         </span>`;
+          } else if (row.state === this.operationalStateThirdStep) {
+            return `<span class="icon-label" title="${row.state}">
+                         <i class="fas fa-spinner text-danger"></i>
+                         </span>`;
+          } else if (row.state === this.operationalStateFourthStep) {
+            return `<span class="icon-label" title="${row.state}">
+                         <i class="fas fa-times-circle text-danger"></i>
+                         </span>`;
+          } else if (row.state === this.operationalStateFifthStep) {
+            return `<span class="icon-label" title="${row.state}">
+                         <i class="fas fa-times-circle text-warning"></i>
+                         </span>`;
           } else {
-            return `<span>${row.operationalState}</span>`;
+            return `<span>${row.state}</span>`;
           }
         }
       },
@@ -182,13 +205,19 @@
   public addK8sCluster(): void {
     // eslint-disable-next-line security/detect-non-literal-fs-filename
     const modalRef: NgbModalRef = this.modalService.open(K8sAddClusterComponent, { backdrop: 'static' });
+
+    if (this.isCluster === 'Registered') {
+      modalRef.componentInstance.profileType = 'Register';
+    } else {
+      modalRef.componentInstance.profileType = 'Manage';
+    }
     modalRef.result.then((result: MODALCLOSERESPONSEDATA) => {
       if (result) {
         this.sharedService.callData();
       }
     }).catch((): void => {
       // Catch Navigation Error
-  });
+    });
   }
 
   /**
@@ -202,6 +231,7 @@
   public generateK8sclusterData(k8sClusterdata: K8SCLUSTERDATA): K8SCLUSTERDATADISPLAY {
     return {
       name: k8sClusterdata.name,
+      state: k8sClusterdata.state,
       identifier: k8sClusterdata._id,
       operationalState: k8sClusterdata._admin.operationalState,
       version: k8sClusterdata.k8s_version,
@@ -211,10 +241,28 @@
     };
   }
 
+  /** Change event @public */
+  public onChangeEvent(value: string): void {
+    if (value === 'Managed') {
+      this.isCluster = 'Managed';
+    } else {
+      this.isCluster = 'Registered';
+    }
+    sessionStorage.setItem('clusterType', value);
+    this.generateColumns();
+    this.generateSettings();
+    this.generateData();
+  }
+
   /** Fetching the data from server to Load in the smarttable @protected */
   protected generateData(): void {
     this.isLoadingResults = true;
-    this.restService.getResource(environment.K8SCLUSTER_URL).subscribe((k8sClusterDatas: K8SCLUSTERDATA[]) => {
+    if (this.isCluster === 'Registered') {
+      this.clusterUrl = environment.K8SCREATECLUSTER_URL + '?created=false';
+    } else {
+      this.clusterUrl = environment.K8SCREATECLUSTER_URL + '?created=true';
+    }
+    this.restService.getResource(this.clusterUrl).subscribe((k8sClusterDatas: K8SCLUSTERDATA[]) => {
       this.k8sClusterData = [];
       k8sClusterDatas.forEach((k8sClusterdata: K8SCLUSTERDATA) => {
         const k8sClusterDataObj: K8SCLUSTERDATADISPLAY = this.generateK8sclusterData(k8sClusterdata);
diff --git a/src/app/packages/PackagesModule.ts b/src/app/packages/PackagesModule.ts
index 1cd7e81..e2f6af8 100644
--- a/src/app/packages/PackagesModule.ts
+++ b/src/app/packages/PackagesModule.ts
@@ -38,6 +38,7 @@
 import { NSComposerComponent } from 'NSComposer';
 import { NSConfigTemplateComponent } from 'NSCONFIGTEMPLATE';
 import { NSPackagesComponent } from 'NSPackages';
+import { OKAPackageComponent } from 'OkaPackageComponent';
 import { PackagesComponent } from 'Packages';
 import { PagePerRowModule } from 'PagePerRowModule';
 import { PageReloadModule } from 'PageReloadModule';
@@ -111,6 +112,14 @@
                         projectInfo, { title: 'PAGE.DASHBOARD.NSCONFIGTEMPLATE', url: null }]
                 },
                 component: NSConfigTemplateComponent
+            },
+            {
+                path: 'oka',
+                data: {
+                    breadcrumb: [{ title: 'PAGE.DASHBOARD.DASHBOARD', url: '/' }, { title: 'PAGE.DASHBOARD.PROJECTS', url: '/projects' },
+                        projectInfo, { title: 'PAGE.K8S.OKAPACKAGES', url: null }]
+                },
+                component: OKAPackageComponent
             }
         ]
     }
@@ -124,7 +133,7 @@
         CodemirrorModule, TranslateModule, RouterModule.forChild(routes), NgbModule, NgSelectModule,
         PagePerRowModule, SidebarModule.forRoot(), LoaderModule, PageReloadModule],
     declarations: [PackagesComponent, NSPackagesComponent, VNFPackagesComponent, NetsliceTemplateComponent,
-        DragDirective, ShowContentComponent, NSComposerComponent, VNFComposerComponent, EditPackagesComponent, ClonePackageComponent, NSConfigTemplateComponent],
+        DragDirective, ShowContentComponent, NSComposerComponent, VNFComposerComponent, EditPackagesComponent, ClonePackageComponent, NSConfigTemplateComponent, OKAPackageComponent],
     providers: [DataService],
     schemas: [CUSTOM_ELEMENTS_SCHEMA]
 })
diff --git a/src/app/packages/oka-packages/OKAPackageComponent.html b/src/app/packages/oka-packages/OKAPackageComponent.html
new file mode 100644
index 0000000..8858311
--- /dev/null
+++ b/src/app/packages/oka-packages/OKAPackageComponent.html
@@ -0,0 +1,44 @@
+<!--
+Copyright 2020 TATA ELXSI
+
+Licensed under the Apache License, Version 2.0 (the 'License');
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+
+Author: SANDHYA JS (sandhya.j@tataelxsi.co.in)
+-->
+<div class="d-flex flex-row justify-content-between">
+    <div class="d-flex align-items-center header-style">OKA {{'PACKAGES' | translate}}</div>
+    <span class="button">
+        <button class="btn btn-primary" type="button" placement="top" container="body" ngbTooltip="{{'Compose a new OKA' | translate}}"
+            (click)="composeOKAPackage()">
+            <i class="fas fa-plus-circle" aria-hidden="true"></i>&nbsp; {{'PAGE.K8S.COMPOSENEWOKA' | translate}}
+        </button>
+    </span>
+</div>
+<div class="mt-2 mb-2 list-utilites-actions">
+    <div class="col-auto me-auto">
+        <nav class="custom-items-config">
+            <span><i class="fas fa-clock text-success"></i>{{operationalStateFirstStep}}</span>
+            <span><i class="fas fa-spinner text-warning"></i>{{operationalStateSecondStep}}</span>
+            <span><i class="fas fa-spinner text-danger"></i>{{operationalStateThirdStep}}</span>
+            <span><i class="fas fa-times-circle text-danger"></i>{{operationalStateFourthStep}}</span>
+            <span><i class="fas fa-times-circle text-warning"></i>{{operationalStateFifthStep}}</span>
+        </nav>
+    </div>
+    <page-per-row class="me-2" (pagePerRow)="onChange($event)"></page-per-row>
+    <page-reload></page-reload>
+</div>
+<div class="smarttable-style bg-white mt-1">
+    <ng2-smart-table [ngClass]="checkDataClass" [settings]="settings" [source]="dataSource" (userRowSelect)="onUserRowSelect($event)">
+    </ng2-smart-table>
+</div>
+<app-loader [waitingMessage]="message" *ngIf="isLoadingResults"></app-loader>
\ No newline at end of file
diff --git a/src/app/packages/oka-packages/OKAPackageComponent.scss b/src/app/packages/oka-packages/OKAPackageComponent.scss
new file mode 100644
index 0000000..c55461a
--- /dev/null
+++ b/src/app/packages/oka-packages/OKAPackageComponent.scss
@@ -0,0 +1,17 @@
+/*
+ Copyright 2020 TATA ELXSI
+
+ Licensed under the Apache License, Version 2.0 (the 'License');
+ you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+
+ Author: SANDHYA JS (sandhya.j@tataelxsi.co.in)
+*/
\ No newline at end of file
diff --git a/src/app/packages/oka-packages/OKAPackageComponent.ts b/src/app/packages/oka-packages/OKAPackageComponent.ts
new file mode 100644
index 0000000..061b090
--- /dev/null
+++ b/src/app/packages/oka-packages/OKAPackageComponent.ts
@@ -0,0 +1,269 @@
+/*
+ Copyright 2020 TATA ELXSI
+
+ Licensed under the Apache License, Version 2.0 (the 'License');
+ you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+
+ Author: SANDHYA JS (sandhya.j@tataelxsi.co.in)
+*/
+/**
+ * @file OKA Package details Component.
+ */
+import { Component, Injector, OnInit } from '@angular/core';
+import { NgbModal, NgbModalRef } from '@ng-bootstrap/ng-bootstrap';
+import { TranslateService } from '@ngx-translate/core';
+import { CONFIGCONSTANT, ERRORDATA, MODALCLOSERESPONSEDATA } from 'CommonModel';
+import { ComposePackages } from 'ComposePackages';
+import { DataService } from 'DataService';
+import { environment } from 'environment';
+import { LocalDataSource } from 'ng2-smart-table';
+import { OkaPackagesActionComponent } from 'OkaPackagesActionComponent';
+import { RestService } from 'RestService';
+import { Subscription } from 'rxjs';
+import { SharedService } from 'SharedService';
+import { VNFD, VNFData } from 'VNFDModel';
+
+/**
+ * Creating component
+ * @Component takes OKAPackageComponent.html as template url
+ */
+@Component({
+    selector: 'app-oka-packages',
+    templateUrl: './OKAPackageComponent.html',
+    styleUrls: ['./OKAPackageComponent.scss']
+})
+/** Exporting a class @exports OKAPackageComponent */
+export class OKAPackageComponent implements OnInit {
+    /** To inject services @public */
+    public injector: Injector;
+
+    /** Data of smarttable populate through LocalDataSource @public */
+    public dataSource: LocalDataSource = new LocalDataSource();
+
+    /** handle translate @public */
+    public translateService: TranslateService;
+
+    /** Columns list of the smart table @public */
+    public columnLists: object = {};
+
+    /** Settings for smarttable to populate the table with columns @public */
+    public settings: object = {};
+
+    /** operational State created data @public */
+    public operationalStateFirstStep: string = CONFIGCONSTANT.k8OperationalStateFirstStep;
+
+    /** operational State in creation data @public */
+    public operationalStateSecondStep: string = CONFIGCONSTANT.k8OperationalStateStateSecondStep;
+
+    /** operational State in deletion data @public */
+    public operationalStateThirdStep: string = CONFIGCONSTANT.k8OperationalStateThirdStep;
+
+    /** operational State failed deletion data @public */
+    public operationalStateFourthStep: string = CONFIGCONSTANT.k8OperationalStateFourthStep;
+
+    /** operational State failed creation data @public */
+    public operationalStateFifthStep: string = CONFIGCONSTANT.k8OperationalStateFifthStep;
+
+    /** Check the loading results @public */
+    public isLoadingResults: boolean = true;
+
+    /** Give the message for the loading @public */
+    public message: string = 'PLEASEWAIT';
+
+    /** Class for empty and present data @public */
+    public checkDataClass: string;
+
+    /** Instance of the rest service @private */
+    private restService: RestService;
+
+    /** dataService to pass the data from one component to another @private */
+    private dataService: DataService;
+
+    /** Formation of appropriate Data for LocalDatasource @private */
+    private okaData: VNFData[] = [];
+
+    /** Contains all methods related to shared @private */
+    private sharedService: SharedService;
+
+    /** Instance of the modal service @private */
+    private modalService: NgbModal;
+
+    /** Instance of subscriptions @private */
+    private generateDataSub: Subscription;
+
+    constructor(injector: Injector) {
+        this.injector = injector;
+        this.restService = this.injector.get(RestService);
+        this.dataService = this.injector.get(DataService);
+        this.sharedService = this.injector.get(SharedService);
+        this.translateService = this.injector.get(TranslateService);
+        this.modalService = this.injector.get(NgbModal);
+    }
+
+    /**
+     * Lifecyle Hooks the trigger before component is instantiate
+     */
+    public ngOnInit(): void {
+        this.generateColumns();
+        this.generateSettings();
+        this.generateData();
+        this.generateDataSub = this.sharedService.dataEvent.subscribe((): void => { this.generateData(); });
+    }
+
+    /** smart table Header Colums @public */
+    public generateColumns(): void {
+        this.columnLists = {
+            name: { title: this.translateService.instant('NAME'), width: '15%', sortDirection: 'asc' },
+            identifier: { title: this.translateService.instant('IDENTIFIER'), width: '20%' },
+            state: {
+                title: this.translateService.instant('STATE'), width: '15%', type: 'html',
+                filter: {
+                    type: 'list',
+                    config: {
+                        selectText: 'Select',
+                        list: [
+                            { value: this.operationalStateFirstStep, title: this.operationalStateFirstStep },
+                            { value: this.operationalStateSecondStep, title: this.operationalStateSecondStep },
+                            { value: this.operationalStateThirdStep, title: this.operationalStateThirdStep },
+                            { value: this.operationalStateThirdStep, title: this.operationalStateFourthStep },
+                            { value: this.operationalStateThirdStep, title: this.operationalStateFifthStep }
+                        ]
+                    }
+                },
+                valuePrepareFunction: (cell: VNFD, row: VNFD): string => {
+                    if (row.state === this.operationalStateFirstStep) {
+                        return `<span class="icon-label" title="${row.state}">
+                                 <i class="fas fa-clock text-success"></i>
+                                 </span>`;
+                    } else if (row.state === this.operationalStateSecondStep) {
+                        return `<span class="icon-label" title="${row.state}">
+                                 <i class="fas fa-spinner text-warning"></i>
+                                 </span>`;
+                    } else if (row.state === this.operationalStateThirdStep) {
+                        return `<span class="icon-label" title="${row.state}">
+                                 <i class="fas fa-spinner text-danger"></i>
+                                 </span>`;
+                    } else if (row.state === this.operationalStateFourthStep) {
+                        return `<span class="icon-label" title="${row.state}">
+                                 <i class="fas fa-times-circle text-danger"></i>
+                                 </span>`;
+                    } else if (row.state === this.operationalStateFifthStep) {
+                        return `<span class="icon-label" title="${row.state}">
+                                 <i class="fas fa-times-circle text-warning"></i>
+                                 </span>`;
+                    } else {
+                        return `<span>${row.state}</span>`;
+                    }
+                }
+            },
+            usageState: { title: this.translateService.instant('USAGESTATE'), width: '15%' },
+            created: { title: this.translateService.instant('CREATED'), width: '15%' },
+            Actions: {
+                name: 'Action', width: '10%', filter: false, sort: false, type: 'custom',
+                title: this.translateService.instant('ACTIONS'),
+                valuePrepareFunction: (cell: VNFData, row: VNFData): VNFData => row, renderComponent: OkaPackagesActionComponent
+            }
+        };
+    }
+
+    /** smart table Data Settings @public */
+    public generateSettings(): void {
+        this.settings = {
+            edit: {
+                editButtonContent: '<i class="fa fa-edit" title="Edit"></i>',
+                confirmSave: true
+            },
+            delete: {
+                deleteButtonContent: '<i class="far fa-trash-alt" title="delete"></i>',
+                confirmDelete: true
+            },
+            columns: this.columnLists,
+            actions: {
+                add: false,
+                edit: false,
+                delete: false,
+                position: 'right'
+            },
+            attr: this.sharedService.tableClassConfig(),
+            pager: this.sharedService.paginationPagerConfig(),
+            noDataMessage: this.translateService.instant('NODATAMSG')
+        };
+    }
+
+    /** smart table listing manipulation @public */
+    public onChange(perPageValue: number): void {
+        this.dataSource.setPaging(1, perPageValue, true);
+    }
+
+    /** OnUserRowSelect Function @public */
+    public onUserRowSelect(event: MessageEvent): void {
+        Object.assign(event.data, { page: 'oka-packages' });
+        this.dataService.changeMessage(event.data);
+    }
+
+    /** Generate okaData object from loop and return for the datasource @public */
+    public generateokaData(okadpackagedata: VNFD): VNFData {
+        return {
+            name: okadpackagedata.name,
+            identifier: okadpackagedata._id,
+            onboardingState: okadpackagedata._admin.onboardingState,
+            usageState: okadpackagedata._admin.usageState,
+            created: this.sharedService.convertEpochTime(Number(okadpackagedata._admin.created)),
+            state: okadpackagedata.state
+        };
+    }
+    /** Handle compose new oka package method  @public */
+    public composeOKAPackage(): void {
+        // eslint-disable-next-line security/detect-non-literal-fs-filename
+        const modalRef: NgbModalRef = this.modalService.open(ComposePackages, { backdrop: 'static' });
+        modalRef.componentInstance.params = { page: 'oka-packages' };
+        modalRef.result.then((result: MODALCLOSERESPONSEDATA) => {
+            if (result) {
+                this.sharedService.callData();
+            }
+        }).catch((): void => {
+            // Catch Navigation Error
+        });
+    }
+
+    /**
+     * Lifecyle hook which get trigger on component destruction
+     */
+    public ngOnDestroy(): void {
+        this.generateDataSub.unsubscribe();
+    }
+
+    /** Fetching the data from server to Load in the smarttable @protected */
+    protected generateData(): void {
+        this.isLoadingResults = true;
+        this.restService.getResource(environment.OKAPACKAGES_URL).subscribe((okadPackageData: VNFD[]): void => {
+            this.okaData = [];
+            okadPackageData.forEach((okadpackagedata: VNFD): void => {
+                const okaDataObj: VNFData = this.generateokaData(okadpackagedata);
+                this.okaData.push(okaDataObj);
+            });
+            if (this.okaData.length > 0) {
+                this.checkDataClass = 'dataTables_present';
+            } else {
+                this.checkDataClass = 'dataTables_empty';
+            }
+            this.dataSource.load(this.okaData).then((data: boolean): void => {
+                this.isLoadingResults = false;
+            }).catch((): void => {
+                this.isLoadingResults = false;
+            });
+        }, (error: ERRORDATA): void => {
+            this.restService.handleError(error, 'get');
+            this.isLoadingResults = false;
+        });
+    }
+}
diff --git a/src/app/utilities/compose-packages/ComposePackages.html b/src/app/utilities/compose-packages/ComposePackages.html
index 03ec3b7..048e8cd 100644
--- a/src/app/utilities/compose-packages/ComposePackages.html
+++ b/src/app/utilities/compose-packages/ComposePackages.html
@@ -17,11 +17,16 @@
 -->
 <form [formGroup]="packagesForm" (ngSubmit)="createPackages()" autocomplete="off">
   <div class="modal-header">
-    <h4 class="modal-title" *ngIf="!template" id="modal-basic-title">{{'CREATEPACKAGE' | translate}}</h4>
+    <h4 class="modal-title" *ngIf="params.page === 'vnf-packages' || params.page === 'ns-packages'"
+      id="modal-basic-title">{{'CREATEPACKAGE' | translate}}</h4>
     <h4 class="modal-title" *ngIf="params.page === 'ns-config-template'" id="modal-basic-title">
       {{'PAGE.NSCONFIGTEMPLATE.CREATENSCONFIGTEMPLATE' | translate}}</h4>
     <h4 class="modal-title" *ngIf="params.page === 'ns-config-template-edit'" id="modal-basic-title">
       {{'PAGE.NSCONFIGTEMPLATE.EDITNSCONFIGTEMPLATE' | translate}}</h4>
+    <h4 class="modal-title" *ngIf="params.page === 'oka-packages'" id="modal-basic-title">
+      {{'Create New OKA' | translate}}</h4>
+    <h4 class="modal-title" *ngIf="params.page === 'oka-packages-edit'" id="modal-basic-title">
+      {{'Edit OKA' | translate}}</h4>
     <button class="button-xs" type="button" class="close" (click)="activeModal.close()">
       <i class="fas fa-times-circle text-danger"></i>
     </button>
@@ -31,7 +36,8 @@
       <label class="col-sm-12 col-form-label mandatory-label"
         [ngClass]="{'text-danger': packagesForm.invalid === true && submitted === true}">{{'MANDATORYCHECK' |
         translate}}</label>
-      <label class="col-sm-6 col-form-label" *ngIf="!template else configtemplate">{{'PACKAGE' | translate}} {{'NAME' | translate}}*</label>
+      <label class="col-sm-6 col-form-label" *ngIf="!template else configtemplate">{{'PACKAGE' | translate}} {{'NAME' |
+        translate}}*</label>
       <ng-template #configtemplate>
         <label class="col-sm-6 col-form-label">{{'NAME' | translate}}*</label>
       </ng-template>
@@ -40,6 +46,14 @@
           [ngClass]="{ 'is-invalid': submitted && f.name.errors }" required>
       </div>
     </div>
+    <div class="form-group row mb-3" *ngIf="oka">
+      <label class="col-sm-6 col-form-label" for="description">{{'PAGE.K8S.DESCRIPTION' | translate}}*</label>
+      <div class="col-sm-6">
+        <textarea class="form-control" placeholder="{{'PAGE.K8S.DESCRIPTION' | translate}}" type="text"
+          formControlName="description" id="description" [ngClass]="{ 'is-invalid': submitted && f.description.errors }"
+          required></textarea>
+      </div>
+    </div>
     <div class="form-group row mb-3" *ngIf="template">
       <label class="col-sm-6 col-form-label">{{'NSD' | translate}} {{'NAME' | translate}}*</label>
       <div class="col-sm-6">
@@ -61,12 +75,30 @@
         </div>
       </div>
     </div>
+    <div class="form-group row mb-3" *ngIf="oka">
+      <label class="col-sm-6 col-form-label">{{'PACKAGE' | translate}}*</label>
+      <div class="col-sm-6">
+        <label for="fileInput" class="custom-file-upload" *ngIf="this.params.page === 'oka-packages-edit'">
+          <input type="file" #fileInput class="fileupload custom-file-input" formControlName="package"
+            (change)="onFileDropped($event.target.files)" id="customFile">
+          <span>{{ selectedFileName }}</span>
+          <i class="fas fa-upload"></i>
+        </label>
+        <div class="custom-file" *ngIf="this.params.page === 'oka-packages'">
+          <input type="file" #fileInput class="fileupload custom-file-input" formControlName="package"
+            (change)="onFileDropped($event.target.files)" id="customFile">
+        </div>
+        <small class="text-info">{{'PAGE.K8S.UPLOADCONFIGGZLABEL' | translate}}</small>
+      </div>
+    </div>
   </div>
   <div class="modal-footer">
     <button type="button" class="btn btn-danger" (click)="activeModal.close()">{{'CANCEL' | translate}}</button>
-    <button type="submit" class="btn btn-primary">{{'CREATE' | translate}}</button>
-    <button *ngIf="params.page === 'ns-config-template-edit'" type="submit" class="btn btn-primary">{{'EDIT' |
-      translate}}</button>
+    <button
+      *ngIf="params.page === 'ns-config-template' || params.page === 'oka-packages' || params.page === 'vnf-packages' || params.page === 'ns-packages'"
+      type="submit" class="btn btn-primary">{{'CREATE' | translate}}</button>
+    <button *ngIf="params.page === 'ns-config-template-edit' || params.page === 'oka-packages-edit'" type="submit"
+      class="btn btn-primary">{{'Edit' | translate}}</button>
   </div>
 </form>
 <app-loader [waitingMessage]="message" *ngIf="isLoadingResults"></app-loader>
\ No newline at end of file
diff --git a/src/app/utilities/compose-packages/ComposePackages.scss b/src/app/utilities/compose-packages/ComposePackages.scss
index 021d205..e44771c 100644
--- a/src/app/utilities/compose-packages/ComposePackages.scss
+++ b/src/app/utilities/compose-packages/ComposePackages.scss
@@ -14,4 +14,34 @@
  limitations under the License.
 
  Author: KUMARAN M (kumaran.m@tataelxsi.co.in), RAJESH S (rajesh.s@tataelxsi.co.in), BARATH KUMAR R (barath.r@tataelxsi.co.in)
-*/
\ No newline at end of file
+*/
+@import "../../../assets/scss/mixins/mixin";
+@import "../../../assets/scss/variable";
+
+.custom-file-upload {
+   display: flex;
+   position: relative;
+   cursor: pointer;
+   overflow: hidden;
+   padding: 8px 12px;
+   color: $primary;
+   border: 1px solid;
+   border: 1px solid;
+   border-color: #054c8c;
+   border-radius: 4px;
+   width: 100%;
+}
+
+.custom-file-upload input[type="file"] {
+   position: absolute;
+   left: 0;
+   top: 0;
+   opacity: 0;
+   cursor: pointer;
+}
+
+.custom-file-upload span {
+   color: $primary;
+   width: 100%;
+   align-items: center;
+}
diff --git a/src/app/utilities/compose-packages/ComposePackages.ts b/src/app/utilities/compose-packages/ComposePackages.ts
index 0dff17a..17adaa0 100644
--- a/src/app/utilities/compose-packages/ComposePackages.ts
+++ b/src/app/utilities/compose-packages/ComposePackages.ts
@@ -34,6 +34,7 @@
 import * as pako from 'pako';
 import { RestService } from 'RestService';
 import { SharedService, isNullOrUndefined } from 'SharedService';
+import { VNFD } from 'VNFDModel';
 
 /** This is added globally by the tar.js library */
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -77,6 +78,9 @@
   /** contains NSD name @public */
   public nsName: {}[] = [];
 
+  /** set the ns archieve file @public */
+  public okafile: File;
+
   /** contains NSD details @public */
   public nsdDetails: {}[];
 
@@ -92,12 +96,30 @@
   /** Check if template or not @public */
   public template = false;
 
+  /** Check if template or not @public */
+  public oka = false;
+
+  /** Check if template or not @public */
+  public package_name: string;
+
+  /** Element ref for fileInputConfigLabel @public */
+  @ViewChild('fileInput') fileInput: ElementRef<HTMLInputElement>;
+
+  /** Element ref for fileInputConfigLabel @public */
+  @ViewChild('fileInputLabel') fileInputLabel: ElementRef<HTMLLabelElement>;
+
   /** Data of NS config @public */
   public details: NSConfigData;
 
+  /** Data of OKA packages @public */
+  public packageData: VNFD;
+
   /** Data of NF packages @public */
   public nsConfigData: NSConfigData[] = [];
 
+  /** Contains selected file name @public */
+  public selectedFileName: string = 'Choose file...';
+
   /** Element ref for fileInputConfig @public */
   @ViewChild('fileInputConfig') fileInputConfig: ElementRef<HTMLInputElement>;
 
@@ -156,14 +178,34 @@
     this.initializeForm();
     if (this.params.page === 'ns-config-template') {
       this.template = true;
+      this.oka = false;
       this.getNsdPackageDetails();
+      this.getFormControl('description').disable();
     } else if (this.params.page === 'ns-config-template-edit') {
       this.template = true;
+      this.oka = false;
       this.getNsdPackageDetails();
       this.getFormControl('nsdId').disable();
-    } else {
+      this.getFormControl('description').disable();
+    } else if (this.params.page === 'oka-packages') {
+      this.oka = true;
+      this.template = false;
       this.getFormControl('nsdId').disable();
       this.getFormControl('config').disable();
+    } else if (this.params.page === 'oka-packages-edit') {
+      this.oka = true;
+      this.template = false;
+      this.addNullValueForInvalidFiles();
+      this.packagesForm.value.package = '';
+      this.getOkaDetails();
+      this.getFormControl('nsdId').disable();
+      this.getFormControl('config').disable();
+    } else {
+      this.oka = false;
+      this.template = false;
+      this.getFormControl('nsdId').disable();
+      this.getFormControl('config').disable();
+      this.getFormControl('description').disable();
     }
   }
 
@@ -172,15 +214,17 @@
     this.packagesForm = this.formBuilder.group({
       name: ['', [Validators.required]],
       nsdId: [null, [Validators.required]],
-      config: [null]
+      config: [null],
+      description: ['', [Validators.required]],
+      package: ['']
     });
   }
 
   /** Get NSD Package details @public */
   public getNsdPackageDetails(): void {
-    this.restService.getResource(environment.NSDESCRIPTORSCONTENT_URL)
-      .subscribe((nsdPackageData: NSDDetails[]): void => {
-        nsdPackageData.forEach((nsData: NSDDetails): void => {
+    this.restService.getResource(environment.OKAPACKAGES_URL)
+      .subscribe((nsdPackageData: []): void => {
+        nsdPackageData.forEach((nsData: VNFD): void => {
           const names: {} = {
             nsName: nsData.name,
             nsId: nsData._id
@@ -196,6 +240,23 @@
       });
   }
 
+  /** Get NSD Package details @public */
+  public getOkaDetails(): void {
+    this.addNullValueForInvalidFiles();
+    this.restService.getResource(environment.OKAPACKAGES_URL + '/' + this.params.id)
+      .subscribe((nsdPackageData: VNFD): void => {
+        this.packageData = nsdPackageData;
+        this.packagesForm.value.package = '';
+        this.package_name = nsdPackageData.name;
+        const package_file = nsdPackageData._admin.storage.zipfile;
+        this.selectedFileName = package_file;
+        this.packagesForm.patchValue({ name: this.package_name, description: nsdPackageData.description });
+        this.fileInput.nativeElement.value = null;
+      }, (error: ERRORDATA): void => {
+        this.restService.handleError(error, 'get');
+      });
+  }
+
   /** Get the NSD Content List & patch value in edit form @public */
   public getNSConfigDetails(URL: string, name: {}[]): void {
     this.restService.getResource(URL).subscribe((content: NSConfigData): void => {
@@ -226,6 +287,7 @@
     this.modalData = {
       message: 'Done'
     };
+    this.addNullValueForInvalidFiles();
     this.sharedService.cleanForm(this.packagesForm);
     if (!this.packagesForm.invalid) {
       this.isLoadingResults = true;
@@ -247,6 +309,29 @@
           this.isLoadingResults = false;
           this.notifierService.notify('error', this.translateService.instant('ERROR'));
         }
+      } else if (this.oka) {
+        try {
+          this.headers = new HttpHeaders({
+            Accept: 'application/json',
+            'Cache-Control': 'no-cache, no-store, must-revalidate, max-age=0'
+          });
+          if (this.params.page === 'oka-packages') {
+            const apiURLHeader: APIURLHEADER = {
+              url: environment.OKAPACKAGES_URL,
+              httpOptions: { headers: this.headers }
+            };
+            this.saveFileData(apiURLHeader);
+          } else {
+            const apiURLHeader: APIURLHEADER = {
+              url: environment.OKAPACKAGES_URL + '/' + this.params.id,
+              httpOptions: { headers: this.headers }
+            };
+            this.editFileData(apiURLHeader);
+          }
+        } catch (e) {
+          this.isLoadingResults = false;
+          this.notifierService.notify('error', this.translateService.instant('ERROR'));
+        }
       } else {
         try {
           this.headers = new HttpHeaders({
@@ -351,6 +436,68 @@
       this.restService.handleError(error, 'post');
     });
   }
+
+  /** Drag and drop feature and fetchind the details of files  @public */
+  public onFileDropped(files: FileList): void {
+    if (files && files.length === 1) {
+      const file: File = files[0];
+      if (this.sharedService.vaildataFileInfo(file, 'gz')) {
+        this.removeValidationDragDropFiles();
+        this.okafile = file;
+        this.selectedFileName = '';
+        if (this.params.page === 'oka-packages-edit') {
+          this.selectedFileName = files[0].name;
+        } else {
+          this.fileInputLabel.nativeElement.innerText = files[0].name;
+          this.fileInput.nativeElement.value = null;
+        }
+      } else {
+        this.notifierService.notify('error', this.translateService.instant('GZFILETYPEERRROR'));
+        this.addNullValueForInvalidFiles();
+      }
+    } else if (files && files.length > 1) {
+      this.notifierService.notify('error', this.translateService.instant('DROPFILESVALIDATION'));
+    }
+  }
+
+  /** Add Null value for invalid Files @public */
+  public addNullValueForInvalidFiles(): void {
+    this.getFormControl('package').setValue('');
+  }
+
+  /** Remove validation after drag drop Files @public */
+  public removeValidationDragDropFiles(): void {
+    this.getFormControl('package').setValidators([]);
+    this.getFormControl('package').updateValueAndValidity();
+  }
+
+
+  /** Post the droped files and reload the page @public */
+  public saveFileData(urlHeader: APIURLHEADER): void {
+    this.isLoadingResults = true;
+    this.packagesForm.value.package = this.okafile;
+    this.restService.postResource(urlHeader, this.toFormData(this.packagesForm.value)).subscribe((result: {}): void => {
+      this.activeModal.close(this.modalData);
+      this.isLoadingResults = false;
+      this.notifierService.notify('success', this.translateService.instant('OKA Package Created Successfully'));
+    }, (error: ERRORDATA): void => {
+      this.restService.handleError(error, 'post');
+      this.isLoadingResults = false;
+    });
+  }
+
+  /** Post the droped files and reload the page @public */
+  public editFileData(urlHeader: APIURLHEADER): void {
+    this.isLoadingResults = true;
+    this.restService.patchResource(urlHeader, this.toFormData(this.packagesForm.value)).subscribe((result: {}): void => {
+      this.activeModal.close(this.modalData);
+      this.isLoadingResults = false;
+      this.notifierService.notify('success', this.translateService.instant('OKA Package Edited Successfully'));
+    }, (error: ERRORDATA): void => {
+      this.restService.handleError(error, 'post');
+      this.isLoadingResults = false;
+    });
+  }
   /** Config file process @private */
   public configFile(files: FileList): void {
     if (files && files.length === 1) {
@@ -453,6 +600,55 @@
     return jsyaml.dump(packageYaml, { sortKeys: true });
   }
 
+  /** Form data @private */
+  private toFormData<T>(formValue: T): FormData {
+    const formData: FormData = new FormData();
+    for (const key of Object.keys(formValue)) {
+      // eslint-disable-next-line security/detect-object-injection
+      const value: string = formValue[key];
+      if (key === 'name') {
+        if (this.params.page === 'oka-packages') {
+          if (!isNullOrUndefined(this.packagesForm.value.name)) {
+            formData.append(key, this.packagesForm.value.name);
+          }
+        } else if (this.params.page === 'oka-packages-edit') {
+          if (this.package_name.localeCompare(this.packagesForm.value.name) === 0) {
+            delete this.packagesForm.value.name;
+          } else {
+            formData.append(key, this.packagesForm.value.name);
+          }
+        }
+        else {
+          formData.append(key, '');
+        }
+      } else if (key === 'description') {
+        if (this.params.page === 'oka-packages') {
+          if (!isNullOrUndefined(this.packagesForm.value.description)) {
+            formData.append(key, this.packagesForm.value.description);
+          }
+        } else if (this.params.page === 'oka-packages-edit') {
+          if (this.packageData.description.localeCompare(this.packagesForm.value.description) === 0) {
+            delete this.packagesForm.value.description;
+          } else {
+            formData.append(key, this.packagesForm.value.description);
+          }
+        }
+        else {
+          formData.append(key, '');
+        }
+      } else if (key === 'package') {
+        if (!isNullOrUndefined(this.okafile)) {
+          formData.append(key, this.okafile);
+        } else {
+          delete this.packagesForm.value.package;
+        }
+      } else {
+        formData.append(key, value);
+      }
+    }
+    return formData;
+  }
+
   /** Used to get the AbstractControl of controlName passed @private */
   private getFormControl(controlName: string): AbstractControl {
     // eslint-disable-next-line security/detect-object-injection
diff --git a/src/app/utilities/delete/DeleteComponent.html b/src/app/utilities/delete/DeleteComponent.html
index 513bc21..81cece0 100644
--- a/src/app/utilities/delete/DeleteComponent.html
+++ b/src/app/utilities/delete/DeleteComponent.html
@@ -16,9 +16,14 @@
 Author: KUMARAN M (kumaran.m@tataelxsi.co.in), RAJESH S (rajesh.s@tataelxsi.co.in), BARATH KUMAR R (barath.r@tataelxsi.co.in)
 -->
 <div class="modal-header">
-  <h4 class="modal-title" id="modal-basic-title">
-    {{'DELETE' | translate}}
+  <h4 *ngIf="isRegisterPage; else Delete" class="modal-title" id="modal-basic-title">
+    {{'DEREGISTER' | translate}}
   </h4>
+  <ng-template #Delete>
+    <h4 class="modal-title" id="modal-basic-title">
+      {{'DELETE' | translate}}
+    </h4>
+  </ng-template>
   <button class="button-xs" type="button" class="close" aria-label="Close" (click)="activeModal.close()">
     <i class="fas fa-times-circle text-danger"></i>
   </button>
diff --git a/src/app/utilities/delete/DeleteComponent.ts b/src/app/utilities/delete/DeleteComponent.ts
index 445c511..c709672 100644
--- a/src/app/utilities/delete/DeleteComponent.ts
+++ b/src/app/utilities/delete/DeleteComponent.ts
@@ -56,7 +56,13 @@
   public isLoadingResults: Boolean = false;
 
   /** Check the page @public */
-  public isPage: Boolean = false;
+  public isPage = false;
+
+  /** Check the register page @public */
+  public isRegisterPage = false;
+
+  /** contain page @public */
+  public page: string;
 
   /** Number of instances @public */
   // eslint-disable-next-line @typescript-eslint/no-magic-numbers
@@ -114,6 +120,9 @@
       if (data.identifier !== undefined || data.identifier !== '' || data.identifier !== null) {
         this.id = data.identifier;
       }
+      if (sessionStorage.getItem('clusterType') === 'Registered') {
+        this.isRegisterPage = true;
+      }
       if (!isNullOrUndefined(this.params)) {
         if (this.params.page === 'instantiateNS') {
           this.isPage = true;
@@ -122,6 +131,10 @@
         } else if (this.params.page === 'ns-instance') {
           this.createDeleteUrl(data);
           this.isPage = false;
+        } else {
+          this.createTitleandID(data);
+          this.createDeleteUrl(data);
+          this.isPage = false;
         }
       } else {
         this.createTitleandID(data);
@@ -147,6 +160,7 @@
     }
   }
   /** Generate Delete url from data @public */
+  // eslint-disable-next-line complexity
   public createDeleteUrl(data: DELETEPARAMS): void {
     this.deleteURL = '';
     if (!isNullOrUndefined(this.params)) {
@@ -193,9 +207,6 @@
     } else if (data.page === 'sdn-controller') {
       this.deleteURL = environment.SDNCONTROLLER_URL;
       this.notifyMessage = 'DELETEDSUCCESSFULLY';
-    } else if (data.page === 'k8-cluster') {
-      this.deleteURL = environment.K8SCLUSTER_URL;
-      this.notifyMessage = 'DELETEDSUCCESSFULLY';
     } else if (data.page === 'k8-repo') {
       this.deleteURL = environment.K8REPOS_URL;
       this.notifyMessage = 'DELETEDSUCCESSFULLY';
@@ -205,6 +216,23 @@
     } else if (data.page === 'ns-config-template') {
       this.deleteURL = environment.NSCONFIGTEMPLATE_URL;
       this.notifyMessage = 'DELETEDSUCCESSFULLY';
+    } else if (data.page === 'k8-infra-profile') {
+      this.deleteURL = environment.K8SINFRACONFIGPROFILE_URL;
+    } else if (data.page === 'k8-infra-controller') {
+      this.deleteURL = environment.K8SINFRACONTROLLERPROFILE_URL;
+    } else if (data.page === 'k8-app-profile') {
+      this.deleteURL = environment.K8SAPPPROFILE_URL;
+    } else if (data.page === 'k8-resource-profile') {
+      this.deleteURL = environment.K8SRESOURCEPROFILE_URL;
+    } else if (data.page === 'oka-packages') {
+      this.deleteURL = environment.OKAPACKAGES_URL;
+    } else if (data.page === 'k8-ksu') {
+      this.deleteURL = environment.KSU_URL;
+    } else if (data.page === 'k8-cluster') {
+      this.page = data.page;
+      if (sessionStorage.getItem('clusterType') === 'Managed' || sessionStorage.getItem('clusterType') === 'Registered') {
+        this.deleteURL = environment.K8SCREATECLUSTER_URL;
+      }
     }
   }
   /** Generate Data function @public */
@@ -217,6 +245,8 @@
     if (this.forceDelete) {
       deletingURl = this.deleteURL + '/' + this.id + '?FORCE=true';
       this.notifyMessage = 'DELETEDSUCCESSFULLY';
+    } else if (this.page === 'k8-cluster' && sessionStorage.getItem('clusterType') === 'Registered') {
+      deletingURl = this.deleteURL + '/' + this.id + '/deregister';
     } else {
       deletingURl = this.deleteURL + '/' + this.id;
     }
diff --git a/src/app/utilities/oka-packages-action/OkaPackagesActionComponent.html b/src/app/utilities/oka-packages-action/OkaPackagesActionComponent.html
new file mode 100644
index 0000000..ca48eb6
--- /dev/null
+++ b/src/app/utilities/oka-packages-action/OkaPackagesActionComponent.html
@@ -0,0 +1,28 @@
+<!--
+Copyright 2020 TATA ELXSI
+
+Licensed under the Apache License, Version 2.0 (the 'License');
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+  http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+
+Author: SANDHYA JS (sandhya.j@tataelxsi.co.in)
+-->
+<div class="btn-group list action" role="group">
+    <button [disabled]="state != 'CREATED'" type="button" class="btn btn-primary" (click)="deleteoka()" placement="top" container="body"
+      ngbTooltip="{{'DELETE' | translate}}">
+      <i class="far fa-trash-alt icons"></i>
+    </button>
+    <button [disabled]="state != 'CREATED'" type="button" class="btn btn-primary" (click)="okaEdit()" placement="top" container="body"
+      ngbTooltip="{{'EDIT' | translate}}">
+      <i class="far fa-edit icons"></i>
+    </button>
+  </div>
+  <app-loader [waitingMessage]="message" *ngIf="isLoadingDownloadResult"></app-loader>
\ No newline at end of file
diff --git a/src/app/utilities/oka-packages-action/OkaPackagesActionComponent.scss b/src/app/utilities/oka-packages-action/OkaPackagesActionComponent.scss
new file mode 100644
index 0000000..c55461a
--- /dev/null
+++ b/src/app/utilities/oka-packages-action/OkaPackagesActionComponent.scss
@@ -0,0 +1,17 @@
+/*
+ Copyright 2020 TATA ELXSI
+
+ Licensed under the Apache License, Version 2.0 (the 'License');
+ you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+
+ Author: SANDHYA JS (sandhya.j@tataelxsi.co.in)
+*/
\ No newline at end of file
diff --git a/src/app/utilities/oka-packages-action/OkaPackagesActionComponent.ts b/src/app/utilities/oka-packages-action/OkaPackagesActionComponent.ts
new file mode 100644
index 0000000..7fef0d9
--- /dev/null
+++ b/src/app/utilities/oka-packages-action/OkaPackagesActionComponent.ts
@@ -0,0 +1,103 @@
+/*
+ Copyright 2020 TATA ELXSI
+
+ Licensed under the Apache License, Version 2.0 (the 'License');
+ you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+
+  http://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+
+ Author: SANDHYA JS (sandhya.j@tataelxsi.co.in)
+*/
+/**
+ * @file okapackageAction Component
+ */
+import { Component, Injector } from '@angular/core';
+import { NgbModal, NgbModalRef } from '@ng-bootstrap/ng-bootstrap';
+import { MODALCLOSERESPONSEDATA } from 'CommonModel';
+import { ComposePackages } from 'ComposePackages';
+import { DeleteComponent } from 'DeleteComponent';
+import { SharedService } from 'SharedService';
+import { VNFData } from 'VNFDModel';
+
+/**
+ * Creating component
+ * @Component takes OkaPackagesActionComponent.html as template url
+ */
+@Component({
+    templateUrl: './OkaPackagesActionComponent.html',
+    styleUrls: ['./OkaPackagesActionComponent.scss']
+})
+/** Exporting a class @exports OkaPackagesActionComponent */
+export class OkaPackagesActionComponent {
+    /** To get the value from the vnfpackage via valuePrepareFunction default Property of ng-smarttable @public */
+    public value: VNFData;
+
+    /** To inject services @public */
+    public injector: Injector;
+
+    /** Check the loading results for loader status @public */
+    public isLoadingDownloadResult: boolean = false;
+
+    /** Give the message for the loading @public */
+    public message: string = 'PLEASEWAIT';
+
+    /** Contains state @public */
+    public state: string;
+
+    /** Instance of the modal service @private */
+    private modalService: NgbModal;
+
+    /** Variables holds oka ID @private */
+    private okaID: string;
+
+    /** Contains all methods related to shared @private */
+    private sharedService: SharedService;
+
+    constructor(injector: Injector) {
+        this.injector = injector;
+        this.sharedService = this.injector.get(SharedService);
+        this.modalService = this.injector.get(NgbModal);
+    }
+
+    /**
+     * Lifecyle Hooks the trigger before component is instantiate
+     */
+    public ngOnInit(): void {
+        this.okaID = this.value.identifier;
+        this.state = this.value.state;
+    }
+
+    /** Delete NS Config oka @public */
+    public deleteoka(): void {
+        // eslint-disable-next-line security/detect-non-literal-fs-filename
+        const modalRef: NgbModalRef = this.modalService.open(DeleteComponent, { backdrop: 'static' });
+        modalRef.result.then((result: MODALCLOSERESPONSEDATA) => {
+            if (result) {
+                this.sharedService.callData();
+            }
+        }).catch((): void => {
+            // Catch Navigation Error
+        });
+    }
+
+    /** Set instance for oka Edit @public */
+    public okaEdit(): void {
+        // eslint-disable-next-line security/detect-non-literal-fs-filename
+        const modalRef: NgbModalRef = this.modalService.open(ComposePackages, { backdrop: 'static' });
+        modalRef.componentInstance.params = { id: this.okaID, page: 'oka-packages-edit' };
+        modalRef.result.then((result: MODALCLOSERESPONSEDATA) => {
+            if (result) {
+                this.sharedService.callData();
+            }
+        }).catch((): void => {
+            // Catch Navigation Error
+        });
+    }
+}
diff --git a/src/assets/i18n/de.json b/src/assets/i18n/de.json
index 87aaf98..727432c 100644
--- a/src/assets/i18n/de.json
+++ b/src/assets/i18n/de.json
@@ -53,6 +53,7 @@
     "CREATEDDATE": "Erstellungsdatum",
     "OPERATIONALSTATUS": "Betriebs Status",
     "OPERATIONALSTATE": "Betriebszustand",
+    "STATE": "Staat",
     "CONFIGSTATUS": "Konfigurations Status",
     "DETAILEDSTATUS": "Detaillierter Status",
     "NSDNAME": "Nsd name",
@@ -199,6 +200,7 @@
     "DAY1OPERATION": "Tag-1 Operation",
     "SELECTVDU": "Wählen VDU",
     "DATE": "Datum",
+    "DEREGISTER": "Abmelden",
     "PAGE": {
         "DASHBOARD": {
             "DASHBOARD": "Instrumententafel",
@@ -496,7 +498,6 @@
             "MENUK8S": "K8s",
             "MENUK8SCLUSTER": "K8s Clusters",
             "MENUK8SREPO": "K8s Repos",
-            "REGISTERK8CLUSTER": "Geregistreerde K8s-clusters",
             "ADDK8CLUSTER": "K8s-cluster toevoegen",
             "K8SCLUSTERDETAILS": "K8s Clusterdetails",
             "REGISTERK8REPO": "Geregistreerde K8s-repository",
@@ -514,7 +515,63 @@
             "CREDENTIALS": "Inloggegevens",
             "NEWK8SREPO": "Nieuwe K8s Repository",
             "TYPE": "Type",
-            "URL": "URL"
+            "URL": "URL",
+            "REGISTERED": "Eingetragen",
+            "MANAGED": "Gelang es",
+            "REGISTERK8CLUSTER": "Registrierte K8s-Cluster",
+            "MANAGEK8CLUSTER": "Verwaltete K8s-Cluster",
+            "REGISTERCLUSTER": "Cluster registrieren",
+            "CREATECLUSTER": "Cluster erstellen",
+            "UPGRADECLUSTER": "Cluster aktualisieren",
+            "SCALECLUSTER": "Scale-Cluster",
+            "REGIONNAME": "Regionsname",
+            "RESOURCEGROUP": "Ressourcengruppe",
+            "NODECOUNT": "Knotenanzahl",
+            "NODESIZE": "Knotengröße",
+            "ATTACHDETATCHPROFILE": "Trennprofil anhängen",
+            "ATTACHPROFILE": "Profil anhängen",
+            "PROFILE": "Profil",
+            "DETATCH": "Ablösen",
+            "ATTACHINFRACONFIG": "Hängen Sie das Infra-Konfigurationsprofil an",
+            "ATTACHINFRACONTROLLER": "Hängen Sie das Infra-Controller-Profil an",
+            "ATTACHAPP": "App-Profil anhängen",
+            "ATTACHRESOURCE": "Ressourcenprofil anhängen",
+            "MOVE": "Bewegen",
+            "CLONE": "Klonen",
+            "EDITPROFILE": "Profil bearbeiten",
+            "UPGRADE": "Aktualisierung",
+            "SCALE": "Skala",
+            "PROFILETYPE": "Profil Typ",
+            "PROFILENAME": "Profil Name",
+            "SELECTOKA": "Wählen Sie OKA",
+            "OKANAME": "OKA-Name",
+            "TRANSFORMFILE": "Datei transformieren",
+            "ADDKSU": "KSU hinzufügen",
+            "EDITKSU": "KSU bearbeiten",
+            "KSU": "KSU",
+            "INFRACONFIG": "Infra-Konfigurationsprofil",
+            "INFRACONTROLLER": "Infra Controller Profil",
+            "APP": "App-Profil",
+            "RESOURCE": "Ressourcenprofil",
+            "CREATEPROFILE": "Profil erstellen",
+            "COMPOSENEWOKA": "Einen neuen OKA verfassen",
+            "OKAPACKAGES": "OKA-Pakete",
+            "CREATENEWOKA": "NEW OKA erstellen",
+            "EDIT OKA": "OKA bearbeiten",
+            "UPDATEDSUCCESSFULLY": "K8s erfolgreich aktualisiert",
+            "ATTACHEDSUCCESSFULLY": "Profil erfolgreich angehängt",
+            "DETATCHEDSUCCESSFULLY": "Profil erfolgreich abgetrennt",
+            "PROFILECREATEDSUCCESSFULLY": "Profil erfolgreich erstellt",
+            "WARNING": "Bitte geben Sie mindestens eine Profilzuordnung an, um fortzufahren",
+            "KSUCREATEDSUCCESSFULLY": "KSU erfolgreich erstellt",
+            "KSUEDITEDSUCCESSFULLY": "KSU erfolgreich editiert",
+            "MOVEDSUCCESSFULLY": "Erfolgreich verschoben",
+            "CLONEDSUCCESSFULLY": "Erfolgreich geklont",
+            "PROFILEEDITEDSUCCESSFULLY": "Profil erfolgreich editiert",
+            "UPLOADCONFIGGZLABEL": "Bitte laden Sie die Datei im tar.gz-Format hoch",
+            "REGISTEREDSUCCESSFULLY": "K8s Erfolgreich registriert",
+            "OKA": "OKA",
+            "PATH": "SW-Katalogpfad"
         },
         "OSMREPO": {
             "MENUOSMREPO": "OSM-Repositorys",
diff --git a/src/assets/i18n/en.json b/src/assets/i18n/en.json
index 99fbb15..34f99c9 100644
--- a/src/assets/i18n/en.json
+++ b/src/assets/i18n/en.json
@@ -53,6 +53,7 @@
     "CREATEDDATE": "Creation Date",
     "OPERATIONALSTATUS": "Operational Status",
     "OPERATIONALSTATE": "Operational State",
+    "STATE": "State",
     "CONFIGSTATUS": "Config Status",
     "DETAILEDSTATUS": "Detailed Status",
     "NSDNAME": "Nsd name",
@@ -199,6 +200,7 @@
     "DAY1OPERATION": "Day1 operation",
     "SELECTVDU": "Select VDU",
     "DATE": "Date",
+    "DEREGISTER": "Deregister",
     "PAGE": {
         "DASHBOARD": {
             "DASHBOARD": "Dashboard",
@@ -496,7 +498,6 @@
             "MENUK8S": "K8s",
             "MENUK8SCLUSTER": "K8s Clusters",
             "MENUK8SREPO": "K8s Repos",
-            "REGISTERK8CLUSTER": "Registered K8s clusters",
             "ADDK8CLUSTER": "Add K8s Cluster",
             "K8SCLUSTERDETAILS": "K8s Cluster Details",
             "REGISTERK8REPO": "Registered K8s repository",
@@ -514,7 +515,63 @@
             "CREDENTIALS": "Credentials",
             "NEWK8SREPO": "New K8s Repository",
             "TYPE": "Type",
-            "URL": "URL"
+            "URL": "URL",
+            "REGISTERED": "Registered",
+            "MANAGED": "Managed",
+            "REGISTERK8CLUSTER": "Registered K8s clusters",
+            "MANAGEK8CLUSTER": "Managed K8s clusters",
+            "REGISTERCLUSTER": "Register Cluster",
+            "CREATECLUSTER": "Create Cluster",
+            "UPGRADECLUSTER": "Upgrade Cluster",
+            "SCALECLUSTER": "Scale Cluster",
+            "REGIONNAME": "Region Name",
+            "RESOURCEGROUP": "Resource Group",
+            "NODECOUNT": "Node Count",
+            "NODESIZE": "Node Size",
+            "ATTACHDETATCHPROFILE": "Attach Detatch Profile",
+            "ATTACHPROFILE": "Attach Profile",
+            "PROFILE": "Profile",
+            "DETATCH": "Detatch",
+            "ATTACHINFRACONFIG": "Attach Infra Config Profile",
+            "ATTACHINFRACONTROLLER": "Attach Infra Controller Profile",
+            "ATTACHAPP": "Attach App Profile",
+            "ATTACHRESOURCE": "Attach Resource Profile",
+            "MOVE": "Move",
+            "CLONE": "Clone",
+            "EDITPROFILE": "Edit Profile",
+            "UPGRADE": "Upgrade",
+            "SCALE": "Scale",
+            "PROFILETYPE": "Profile Type",
+            "PROFILENAME": "Profile Name",
+            "SELECTOKA": "Select OKA",
+            "OKANAME": "OKA Name",
+            "TRANSFORMFILE": "Transform File",
+            "ADDKSU": "Add KSU",
+            "EDITKSU": "Edit KSU",
+            "KSU": "KSU",
+            "INFRACONFIG": "Infra Config Profile",
+            "INFRACONTROLLER": "Infra Controller Profile",
+            "APP": "App Profile",
+            "RESOURCE": "Resource Profile",
+            "CREATEPROFILE": "Create Profile",
+            "COMPOSENEWOKA": "Compose a New OKA",
+            "OKAPACKAGES": "OKA Packages",
+            "CREATENEWOKA": "Create NEW OKA",
+            "EDIT OKA": "Edit OKA",
+            "UPDATEDSUCCESSFULLY": "K8s Updated Successfully",
+            "ATTACHEDSUCCESSFULLY": "Profile Attached Successfully",
+            "DETATCHEDSUCCESSFULLY": "Profile Detatched Successfully",
+            "PROFILECREATEDSUCCESSFULLY": "Profile Created Successfully",
+            "WARNING": "Please provide at least one profile mapping to continue",
+            "KSUCREATEDSUCCESSFULLY": "KSU Created Successfully",
+            "KSUEDITEDSUCCESSFULLY": "KSU Edited Successfully",
+            "MOVEDSUCCESSFULLY": "Moved Successfully",
+            "CLONEDSUCCESSFULLY": "Cloned Successfully",
+            "PROFILEEDITEDSUCCESSFULLY": "Profile Edited Successfully",
+            "UPLOADCONFIGGZLABEL": "Please upload file with tar.gz format",
+            "REGISTEREDSUCCESSFULLY": "K8s Registered Successfully",
+            "OKA": "OKA",
+            "PATH": "SW Catalog Path"
         },
         "OSMREPO": {
             "MENUOSMREPO": "OSM Repositories",
diff --git a/src/assets/i18n/es.json b/src/assets/i18n/es.json
index 34619a6..1f08c66 100644
--- a/src/assets/i18n/es.json
+++ b/src/assets/i18n/es.json
@@ -54,6 +54,7 @@
     "OPERATIONALSTATUS": "Estado operativo",
     "OPERATIONALSTATE": "Estado operacional",
     "CONFIGSTATUS": "Estado de configuración",
+    "STATE": "Estado",
     "DETAILEDSTATUS": "Estado detallado",
     "NSDNAME": "Nombre nsd",
     "NSTNAME": "Nst name",
@@ -199,6 +200,7 @@
     "DAY1OPERATION": "Operación día 1",
     "SELECTVDU": "Seleccionar VDU",
     "DATE": "Fecha",
+    "DEREGISTER": "Darse de baja",
     "PAGE": {
         "DASHBOARD": {
             "DASHBOARD": "Tablero",
@@ -496,7 +498,6 @@
             "MENUK8S": "K8s",
             "MENUK8SCLUSTER": "Clusters K8s",
             "MENUK8SREPO": "K8s Repos",
-            "REGISTERK8CLUSTER": "Grupos de K8 registrados",
             "ADDK8CLUSTER": "Agregar clúster K8s",
             "K8SCLUSTERDETAILS": "Detalles del clúster K8s",
             "REGISTERK8REPO": "Repositorio K8 registrado",
@@ -514,7 +515,63 @@
             "CREDENTIALS": "Credenciales",
             "NEWK8SREPO": "Nuevo repositorio K8s",
             "TYPE": "Tipo",
-            "URL": "URL"
+            "URL": "URL",
+            "REGISTERED": "Registrado",
+            "MANAGED": "Gestionado",
+            "REGISTERK8CLUSTER": "Agrupaciones K8s registradas",
+            "MANAGEK8CLUSTER": "Clústeres K8s gestionados",
+            "REGISTERCLUSTER": "Registro Cluster",
+            "CREATECLUSTER": "Crear clúster",
+            "UPGRADECLUSTER": "Clúster de actualización",
+            "SCALECLUSTER": "Escala Cluster",
+            "REGIONNAME": "Nombre de la región",
+            "RESOURCEGROUP": "Grupo de recursos",
+            "NODECOUNT": "Recuento de nodos",
+            "NODESIZE": "Tamaño del nodo",
+            "ATTACHDETATCHPROFILE": "Adjuntar Desmontar Perfil",
+            "ATTACHPROFILE": "Adjuntar perfil",
+            "PROFILE": "Perfil",
+            "DETATCH": "Detatch",
+            "ATTACHINFRACONFIG": "Adjuntar perfil Infra Config",
+            "ATTACHINFRACONTROLLER": "Adjuntar perfil de controlador Infra",
+            "ATTACHAPP": "Adjuntar perfil de aplicación",
+            "ATTACHRESOURCE": "Adjuntar perfil de recursos",
+            "MOVE": "Mover",
+            "CLONE": "Clon",
+            "EDITPROFILE": "Editar perfil",
+            "UPGRADE": "Actualizar",
+            "SCALE": "Escala",
+            "PROFILETYPE": "Tipo de perfil",
+            "PROFILENAME": "Nombre del perfil",
+            "SELECTOKA": "Seleccione OKA",
+            "OKANAME": "OKA Nombre",
+            "TRANSFORMFILE": "Transformar archivo",
+            "ADDKSU": "Añadir KSU",
+            "EDITKSU": "Editar KSU",
+            "KSU": "KSU",
+            "INFRACONFIG": "Perfil Infra Config",
+            "INFRACONTROLLER": "Perfil del controlador Infra",
+            "APP": "Perfil de la aplicación",
+            "RESOURCE": "Perfil de los recursos",
+            "CREATEPROFILE": "Crear perfil",
+            "COMPOSENEWOKA": "Componer un nuevo OKA",
+            "OKAPACKAGES": "Paquetes OKA",
+            "CREATENEWOKA": "Crear NUEVO OKA",
+            "EDIT OKA": "Editar OKA",
+            "UPDATEDSUCCESSFULLY": "K8s Actualizado con éxito",
+            "ATTACHEDSUCCESSFULLY": "Perfil adjuntado correctamente",
+            "DETATCHEDSUCCESSFULLY": "Perfil eliminado con éxito",
+            "PROFILECREATEDSUCCESSFULLY": "Perfil creado con éxito",
+            "WARNING": "Por favor, proporcione al menos un mapeo de perfil para continuar",
+            "KSUCREATEDSUCCESSFULLY": "KSU creada con éxito",
+            "KSUEDITEDSUCCESSFULLY": "KSU Editado con éxito",
+            "MOVEDSUCCESSFULLY": "Movido con éxito",
+            "CLONEDSUCCESSFULLY": "Clonado con éxito",
+            "PROFILEEDITEDSUCCESSFULLY": "Perfil editado correctamente",
+            "UPLOADCONFIGGZLABEL": "Por favor, cargue el archivo con formato tar.gz",
+            "REGISTEREDSUCCESSFULLY": "K8s Registrado con éxito",
+            "OKA": "OKA",
+            "PATH": "Ruta del catálogo SW"
         },
         "OSMREPO": {
             "MENUOSMREPO": "Repositorios OSM",
diff --git a/src/assets/i18n/pt.json b/src/assets/i18n/pt.json
index 75eb921..2dfe108 100644
--- a/src/assets/i18n/pt.json
+++ b/src/assets/i18n/pt.json
@@ -53,6 +53,7 @@
     "CREATEDDATE": "Data de criação",
     "OPERATIONALSTATUS": "Estado operacional",
     "OPERATIONALSTATE": "Estado operacional",
+    "STATE": "Estado",
     "CONFIGSTATUS": "Status da configuração",
     "DETAILEDSTATUS": "Status detalhado",
     "NSDNAME": "Nome nsd",
@@ -199,6 +200,7 @@
     "DAY1OPERATION": "Operação dia 1",
     "SELECTVDU": "Selecione VDU",
     "DATE": "Data",
+    "DEREGISTER": "Cancelar registro",
     "PAGE": {
         "DASHBOARD": {
             "DASHBOARD": "painel de controle",
@@ -514,7 +516,62 @@
             "CREDENTIALS": "Credenciais",
             "NEWK8SREPO": "Novo Repositório do K8s",
             "TYPE": "Tipo",
-            "URL": "URL"
+            "URL": "URL",
+            "REGISTERED": "Registado",
+            "MANAGED": "Gerido",
+            "MANAGEK8CLUSTER": "Clusters K8s geridos",
+            "REGISTERCLUSTER": "Cluster de registo",
+            "CREATECLUSTER": "Criar cluster",
+            "UPGRADECLUSTER": "Cluster de atualização",
+            "SCALECLUSTER": "Agregado de escalas",
+            "REGIONNAME": "Nome da região",
+            "RESOURCEGROUP": "Grupo de recursos",
+            "NODECOUNT": "Contagem de nós",
+            "NODESIZE": "Tamanho do nó",
+            "ATTACHDETATCHPROFILE": "Anexar Destacar Perfil",
+            "ATTACHPROFILE": "Anexar perfil",
+            "PROFILE": "Perfil",
+            "DETATCH": "Destacamento",
+            "ATTACHINFRACONFIG": "Anexar perfil de configuração de infra-estruturas",
+            "ATTACHINFRACONTROLLER": "Anexar perfil de controlador de infravermelhos",
+            "ATTACHAPP": "Anexar perfil da aplicação",
+            "ATTACHRESOURCE": "Anexar perfil de recurso",
+            "MOVE": "Mover",
+            "CLONE": "Clone",
+            "EDITPROFILE": "Editar perfil",
+            "UPGRADE": "Atualização",
+            "SCALE": "Escala",
+            "PROFILETYPE": "Tipo de perfil",
+            "PROFILENAME": "Nome do perfil",
+            "SELECTOKA": "Selecionar OKA",
+            "OKANAME": "Nome OKA",
+            "TRANSFORMFILE": "Transformar ficheiro",
+            "ADDKSU": "Adicionar KSU",
+            "EDITKSU": "Editar KSU",
+            "KSU": "KSU",
+            "INFRACONFIG": "Perfil de configuração de infra-estruturas",
+            "INFRACONTROLLER": "Perfil do Infra Controlador",
+            "APP": "Perfil da aplicação",
+            "RESOURCE": "Perfil do recurso",
+            "CREATEPROFILE": "Criar perfil",
+            "COMPOSENEWOKA": "Compor um novo OKA",
+            "OKAPACKAGES": "Pacotes OKA",
+            "CREATENEWOKA": "Criar NOVO OKA",
+            "EDIT OKA": "Editar OKA",
+            "UPDATEDSUCCESSFULLY": "K8s Atualizado com sucesso",
+            "ATTACHEDSUCCESSFULLY": "Perfil anexado com sucesso",
+            "DETATCHEDSUCCESSFULLY": "Perfil destacado com sucesso",
+            "PROFILECREATEDSUCCESSFULLY": "Perfil criado com sucesso",
+            "WARNING": "Forneça pelo menos um mapeamento de perfil para continuar",
+            "KSUCREATEDSUCCESSFULLY": "KSU criada com sucesso",
+            "KSUEDITEDSUCCESSFULLY": "KSU editado com sucesso",
+            "MOVEDSUCCESSFULLY": "Movido com sucesso",
+            "CLONEDSUCCESSFULLY": "Clonado com sucesso",
+            "PROFILEEDITEDSUCCESSFULLY": "Perfil editado com sucesso",
+            "UPLOADCONFIGGZLABEL": "Carregue o ficheiro no formato tar.gz",
+            "REGISTEREDSUCCESSFULLY": "K8s registado com sucesso",
+            "OKA": "OKA",
+            "PATH": "Caminho do Catálogo SW"
         },
         "OSMREPO": {
             "MENUOSMREPO": "Repositórios OSM",
diff --git a/src/environments/environment.prod.ts b/src/environments/environment.prod.ts
index 5168356..fc19af5 100644
--- a/src/environments/environment.prod.ts
+++ b/src/environments/environment.prod.ts
@@ -42,6 +42,12 @@
 const ASSETS_PATH: string = 'assets/';
 /** OSM Version @constant */
 const OSM_VERSION: string = 'osm/version';
+/** OSM Create cluster url @constant */
+const OSM_CLUSTER_ENDPOINT: string = 'osm/k8scluster/v1/';
+/** OSM OKA url @constant */
+const OSM_OKA_ENDPOINT: string = 'osm/oka/v1/';
+/** OSM KSU url @constant */
+const OSM_KSU_ENDPOINT: string = 'osm/ksu/v1/';
 /** Grafana End-Point @constant */
 // eslint-disable-next-line @microsoft/sdl/no-insecure-url
 const GRAFANA_ENDPOINT: string = 'http://' + window.location.hostname + ':3000';
@@ -80,5 +86,12 @@
     DOMAIN_URL: OSM_ADMIN_ENDPOINT + 'domains',
     OSM_VERSION_URL: OSM_VERSION,
     OSMREPOS_URL: OSM_ADMIN_ENDPOINT + 'osmrepos',
-    NSCONFIGTEMPLATE_URL: OSM_NSD_ENDPOINT + 'ns_config_template'
+    NSCONFIGTEMPLATE_URL: OSM_NSD_ENDPOINT + 'ns_config_template',
+    K8SCREATECLUSTER_URL: OSM_CLUSTER_ENDPOINT + 'clusters',
+    K8SINFRACONFIGPROFILE_URL: OSM_CLUSTER_ENDPOINT + 'infra_config_profiles',
+    K8SINFRACONTROLLERPROFILE_URL: OSM_CLUSTER_ENDPOINT + 'infra_controller_profiles',
+    K8SAPPPROFILE_URL: OSM_CLUSTER_ENDPOINT + 'app_profiles',
+    K8SRESOURCEPROFILE_URL: OSM_CLUSTER_ENDPOINT + 'resource_profiles',
+    OKAPACKAGES_URL: OSM_OKA_ENDPOINT + 'oka_packages',
+    KSU_URL: OSM_KSU_ENDPOINT + 'ksus'
 };
diff --git a/src/environments/environment.ts b/src/environments/environment.ts
index de8ae5c..1e4f45c 100644
--- a/src/environments/environment.ts
+++ b/src/environments/environment.ts
@@ -42,6 +42,12 @@
 const ASSETS_PATH: string = 'assets/';
 /** OSM Version @constant */
 const OSM_VERSION: string = 'osm/version';
+/** OSM Create cluster url @constant */
+const OSM_CLUSTER_ENDPOINT: string = 'osm/k8scluster/v1/';
+/** OSM OKA url @constant */
+const OSM_OKA_ENDPOINT: string = 'osm/oka/v1/';
+/** OSM KSU url @constant */
+const OSM_KSU_ENDPOINT: string = 'osm/ksu/v1/';
 /** Grafana End-Point @constant */
 // eslint-disable-next-line @microsoft/sdl/no-insecure-url
 const GRAFANA_ENDPOINT: string = 'http://' + window.location.hostname + ':3000';
@@ -80,5 +86,12 @@
     DOMAIN_URL: OSM_ADMIN_ENDPOINT + 'domains',
     OSM_VERSION_URL: OSM_VERSION,
     OSMREPOS_URL: OSM_ADMIN_ENDPOINT + 'osmrepos',
-    NSCONFIGTEMPLATE_URL: OSM_NSD_ENDPOINT + 'ns_config_template'
+    NSCONFIGTEMPLATE_URL: OSM_NSD_ENDPOINT + 'ns_config_template',
+    K8SCREATECLUSTER_URL: OSM_CLUSTER_ENDPOINT + 'clusters',
+    K8SINFRACONFIGPROFILE_URL: OSM_CLUSTER_ENDPOINT + 'infra_config_profiles',
+    K8SINFRACONTROLLERPROFILE_URL: OSM_CLUSTER_ENDPOINT + 'infra_controller_profiles',
+    K8SAPPPROFILE_URL: OSM_CLUSTER_ENDPOINT + 'app_profiles',
+    K8SRESOURCEPROFILE_URL: OSM_CLUSTER_ENDPOINT + 'resource_profiles',
+    OKAPACKAGES_URL: OSM_OKA_ENDPOINT + 'oka_packages',
+    KSU_URL: OSM_KSU_ENDPOINT + 'ksus'
 };
diff --git a/src/models/CommonModel.ts b/src/models/CommonModel.ts
index 271b297..0b85878 100644
--- a/src/models/CommonModel.ts
+++ b/src/models/CommonModel.ts
@@ -70,9 +70,11 @@
     sdnOperationalStateFirstStep = 'PROCESSING',
     sdnOperationalStateStateSecondStep = 'ENABLED',
     sdnOperationalStateThirdStep = 'ERROR',
-    k8OperationalStateFirstStep = 'PROCESSING',
-    k8OperationalStateStateSecondStep = 'ENABLED',
-    k8OperationalStateThirdStep = 'ERROR',
+    k8OperationalStateFirstStep = 'CREATED',
+    k8OperationalStateStateSecondStep = 'IN_CREATION',
+    k8OperationalStateThirdStep = 'IN_DELETION',
+    k8OperationalStateFourthStep = 'FAILED_DELETION',
+    k8OperationalStateFifthStep = 'FAILED_CREATION',
     done = 'done',
     close = 'close',
     userActive = 'active',
diff --git a/src/models/K8sModel.ts b/src/models/K8sModel.ts
index 4e83483..307cb34 100644
--- a/src/models/K8sModel.ts
+++ b/src/models/K8sModel.ts
@@ -31,6 +31,7 @@
     vim_account: string;
     _admin: Admin;
     _id: string;
+    state?: string;
 }
 /** Interface for K8SCLUSTERDATA */
 export interface K8SREPODATA {
@@ -44,7 +45,7 @@
     _id: string;
 }
 /** Interface for the Credentials */
-interface Credentials{
+interface Credentials {
     apiVersion: string;
     clusters: Clusters[];
     contexts: Contexts[];
@@ -64,7 +65,7 @@
     server: string;
 }
 /** Interface for the Contexts */
-interface Contexts{
+interface Contexts {
     context: Context;
     name: string;
 }
@@ -74,7 +75,7 @@
     user: string;
 }
 /** Interface for the Users */
-interface Users{
+interface Users {
     name: string;
     user: User;
 }
@@ -84,16 +85,16 @@
     'client-key-data': string;
 }
 /** Interface for the K8SCLUSTERDATA nets */
-interface Nets{
+interface Nets {
     net1: string;
 }
 /** Interface for the K8SCLUSTERDATA _admin */
-interface Admin{
+export interface Admin {
     created: string;
-    current_operation: number;
-    'helm-chart': HelmChart;
-    'juju-bundle': JujuBundle;
-    operationalState: string;
+    current_operation?: number;
+    'helm-chart'?: HelmChart;
+    'juju-bundle'?: JujuBundle;
+    operationalState?: string;
     modified: string;
 }
 /** Interface for the K8SCLUSTERDATA _admin Helm chart */
@@ -106,7 +107,7 @@
     error_msg: string;
 }
 /** Interface for the K8SCLUSTERDATA Return to Display */
-export interface K8SCLUSTERDATADISPLAY{
+export interface K8SCLUSTERDATADISPLAY {
     name: string;
     identifier: string;
     operationalState: string;
@@ -114,6 +115,9 @@
     created: string;
     modified: string;
     pageType: string;
+    description?: string;
+    default?: boolean;
+    state?: string;
 }
 /** Interface for the K8SCLUSTERDATA Return to Display */
 export interface K8SREPODATADISPLAY {
@@ -124,4 +128,102 @@
     created: string;
     modified: string;
     pageType: string;
+    description?: string;
+    default?: boolean;
+    state?: string;
+}
+
+/** Interface for the Create cluster */
+export interface K8SCreateCLUSTERDATA {
+    _id?: string,
+    description?: string,
+    k8s_version?: string,
+    location?: string,
+    name?: string,
+    node_count?: number,
+    'node_size/node_type'?: string,
+    vim_account?: string
+    _admin?: Admin;
+    infra_config_profiles?: ProfileMappings[];
+    default?: boolean;
+}
+
+/** Interface for the K8SCLUSTERDATA */
+export interface K8SCREATEDATADISPLAY {
+    name: string;
+    identifier: string;
+    version: string;
+    created: string;
+    modified: string;
+    default?: boolean;
+    description?: string;
+}
+
+/** Interface for the Profile payload */
+export interface INFRACONFIGPAYLOAD {
+    name?: string;
+    _id?: string,
+    description?: string;
+    identifier?: string;
+    pageType?: string
+    _admin?: Admin;
+    created?: string;
+    modified?: string;
+    ksus?: KSU[];
+    state?: string;
+}
+
+/** Interface for the KSU */
+export interface KSU {
+    name?: string;
+    description?: string;
+    profile?: PROFILE;
+    oka?: OKA[];
+}
+
+/** Interface for Project */
+export interface PROFILE {
+    _id?: string;
+    sw_catalog_path?: string;
+    profile_type?: string;
+    name?: string;
+}
+
+/** Interface for OKA */
+export interface OKA {
+    _id?: string;
+    sw_catalog_path?: string;
+    transformation?: {};
+}
+
+
+/** Interface for the K8S payload */
+export interface K8SPayload {
+    name?: string;
+    location?: string;
+    vim_account?: string;
+    description?: string;
+    k8s_version?: string;
+    node_count?: number;
+    region_name?: string;
+    resource_group?: string;
+    'node_size'?: string;
+}
+
+/** Interface for Profile Mappings */
+export interface ProfileMappings {
+    _id?: string;
+    name?: string;
+    profile_name?: string;
+}
+
+/** Interface for profile mappings */
+export interface ProfileMap {
+    add_profile?: ProjectRoleMappings[];
+    remove_profile?: ProjectRoleMappings[];
+}
+
+/** Interface for ProfileMappings */
+export interface ProjectRoleMappings {
+    id?: string;
 }
diff --git a/src/models/MenuModel.ts b/src/models/MenuModel.ts
index 9ec1472..1e60f28 100644
--- a/src/models/MenuModel.ts
+++ b/src/models/MenuModel.ts
@@ -74,6 +74,16 @@
             {
                 liClass: '',
                 anchorTagClass: 'link',
+                routerLink: '/packages/oka',
+                routerLinkActive: childActiveClass,
+                routerLinkActiveOptions: false,
+                icon: 'fas fa-box-open',
+                menuName: 'PAGE.K8S.OKAPACKAGES',
+                isChildExists: false
+            },
+            {
+                liClass: '',
+                anchorTagClass: 'link',
                 routerLink: '/packages/netslice',
                 routerLinkActive: childActiveClass,
                 routerLinkActiveOptions: false,
@@ -210,6 +220,56 @@
                 icon: 'fas fa-flag',
                 menuName: 'PAGE.K8S.MENUK8SREPO',
                 isChildExists: false
+            },
+            {
+                liClass: '',
+                anchorTagClass: 'link',
+                routerLink: '/k8s/infra-config-profile',
+                routerLinkActive: childActiveClass,
+                routerLinkActiveOptions: false,
+                icon: 'fas fa-list-alt',
+                menuName: 'PAGE.K8S.INFRACONFIG',
+                isChildExists: false
+            },
+            {
+                liClass: '',
+                anchorTagClass: 'link',
+                routerLink: '/k8s/infra-controller-profile',
+                routerLinkActive: childActiveClass,
+                routerLinkActiveOptions: false,
+                icon: 'fas fa-gamepad',
+                menuName: 'PAGE.K8S.INFRACONTROLLER',
+                isChildExists: false
+            },
+            {
+                liClass: '',
+                anchorTagClass: 'link',
+                routerLink: '/k8s/app-profile',
+                routerLinkActive: childActiveClass,
+                routerLinkActiveOptions: false,
+                icon: 'fas fa-film',
+                menuName: 'PAGE.K8S.APP',
+                isChildExists: false
+            },
+            {
+                liClass: '',
+                anchorTagClass: 'link',
+                routerLink: '/k8s/resource-profile',
+                routerLinkActive: childActiveClass,
+                routerLinkActiveOptions: false,
+                icon: 'fas fa-archive',
+                menuName: 'PAGE.K8S.RESOURCE',
+                isChildExists: false
+            },
+            {
+                liClass: '',
+                anchorTagClass: 'link',
+                routerLink: '/k8s/ksu',
+                routerLinkActive: childActiveClass,
+                routerLinkActiveOptions: false,
+                icon: 'fas fa-anchor',
+                menuName: 'PAGE.K8S.KSU',
+                isChildExists: false
             }
         ]
     },
diff --git a/src/models/VNFDModel.ts b/src/models/VNFDModel.ts
index 9072431..cb9c6b9 100644
--- a/src/models/VNFDModel.ts
+++ b/src/models/VNFDModel.ts
@@ -84,6 +84,8 @@
     _links?: string;
     'vnf-configuration'?: VNFCONFIG[];
     kdu?: [];
+    name?: string;
+    state?: string;
 }
 /** Interface for DF */
 export interface VNFCONFIG {
@@ -267,11 +269,15 @@
     identifier?: string;
     id?: string;
     name?: string;
-    description: string;
-    version: string;
+    description?: string;
+    version?: string;
     'type'?: string;
     productName?: string;
     provider?: string;
+    onboardingState?: string;
+    usageState?: string;
+    created?: string;
+    state?: string;
 }
 
 /** Interface for the Tick */
diff --git a/src/services/RestService.ts b/src/services/RestService.ts
index e333627..ea1a5c3 100644
--- a/src/services/RestService.ts
+++ b/src/services/RestService.ts
@@ -28,6 +28,7 @@
 import { APIURLHEADER, ERRORDATA } from 'CommonModel';
 import * as HttpStatus from 'http-status-codes';
 import { Observable } from 'rxjs';
+import { isNullOrUndefined } from 'SharedService';
 
 /**
  * An Injectable is a class adorned with the @Injectable decorator function.
@@ -136,43 +137,41 @@
      * @param method The http request method.
      */
     public handleError(err: ERRORDATA, method?: string): void {
-        if (err.error.status === HttpStatus.UNAUTHORIZED) {
-            if (method !== 'get') {
-                if (err.error.detail !== 'Expired Token or Authorization HTTP header' &&
-                    err.error.detail !== 'Invalid Token or Authorization HTTP header') {
-                    this.notifierService.notify('error', err.error.detail !== undefined ?
-                        err.error.detail : this.translateService.instant('HTTPERROR.401'));
+        const errStatus = {
+            400: this.translateService.instant('HTTPERROR.400'),
+            401: this.translateService.instant('HTTPERROR.401'),
+            404: this.translateService.instant('HTTPERROR.404'),
+            409: this.translateService.instant('HTTPERROR.409'),
+            500: this.translateService.instant('HTTPERROR.500'),
+            502: this.translateService.instant('HTTPERROR.502'),
+            503: this.translateService.instant('HTTPERROR.503'),
+            504: this.translateService.instant('HTTPERROR.504')
+        };
+        if (!this.isNullOrUndefined(err)) {
+            if (err.error.status === HttpStatus.UNAUTHORIZED) {
+                if (!this.isNullOrUndefined(method)) {
+                    if (method !== 'get') {
+                        if (err.error.detail !== 'Expired Token or Authorization HTTP header' &&
+                            err.error.detail !== 'Invalid Token or Authorization HTTP header') {
+                            this.notifierService.notify('error', err.error.detail !== undefined ?
+                                err.error.detail : this.translateService.instant('HTTPERROR.401'));
+                        }
+                        this.activeModal.dismissAll();
+                    }
                 }
+            } else if (err.error.status === HttpStatus.CONFLICT) {
+                this.notifierService.notify('error', err.error.detail !== undefined ?
+                    err.error.detail : this.translateService.instant('HTTPERROR.409'));
+                if (sessionStorage.getItem('usertype') !== 'change_password') {
+                    this.activeModal.dismissAll();
+                }
+            } else if (!isNullOrUndefined(errStatus[err.error.status])) {
+                this.notifierService.notify('error', err.error.detail !== undefined ?
+                    err.error.detail : errStatus[err.error.status]);
             } else {
-                this.notifierService.notify('error', err?.error?.detail !== undefined ?
-                    err?.error?.detail : this.translateService.instant('HTTPERROR.401'));
+                this.notifierService.notify('error', err.error.detail !== undefined ?
+                    err.error.detail : this.translateService.instant('ERROR'));
             }
-            this.activeModal.dismissAll();
-        } else if (err.error.status === HttpStatus.BAD_REQUEST) {
-            this.notifierService.notify('error', err.error.detail !== undefined ?
-                err.error.detail : this.translateService.instant('HTTPERROR.400'));
-        } else if (err.error.status === HttpStatus.NOT_FOUND) {
-            this.notifierService.notify('error', err.error.detail !== undefined ?
-                err.error.detail : this.translateService.instant('HTTPERROR.404'));
-        } else if (err.error.status === HttpStatus.CONFLICT) {
-            this.notifierService.notify('error', err.error.detail !== undefined ?
-                err.error.detail : this.translateService.instant('HTTPERROR.409'));
-            if (sessionStorage.getItem('usertype') !== 'change_password') {
-                this.activeModal.dismissAll();
-            }
-            this.activeModal.dismissAll();
-        } else if (err.error.status === HttpStatus.INTERNAL_SERVER_ERROR) {
-            this.notifierService.notify('error', err.error.detail !== undefined ?
-                err.error.detail : this.translateService.instant('HTTPERROR.500'));
-        } else if (err.error.status === HttpStatus.BAD_GATEWAY) {
-            this.notifierService.notify('error', this.translateService.instant('HTTPERROR.502'));
-        } else if (err.error.status === HttpStatus.SERVICE_UNAVAILABLE) {
-            this.notifierService.notify('error', this.translateService.instant('HTTPERROR.503'));
-        } else if (err.error.status === HttpStatus.GATEWAY_TIMEOUT) {
-            this.notifierService.notify('error', this.translateService.instant('HTTPERROR.504'));
-        } else {
-            this.notifierService.notify('error', err.error.detail !== undefined ?
-                err.error.detail : this.translateService.instant('ERROR'));
         }
     }
 
diff --git a/src/services/SharedService.ts b/src/services/SharedService.ts
index 61c3367..4b7bc76 100644
--- a/src/services/SharedService.ts
+++ b/src/services/SharedService.ts
@@ -483,8 +483,8 @@
         return 0;
     };
 
-    /** Method to validate file extension and size @private */
-    private vaildataFileInfo(fileInfo: File, fileType: string): boolean {
+    /** Method to validate file extension and size @public */
+    public vaildataFileInfo(fileInfo: File, fileType: string): boolean {
         const extension: string = fileInfo.name.substring(fileInfo.name.lastIndexOf('.') + 1);
         const packageSize: number = CONSTANTNUMBER.oneMB * environment.packageSize;
         if (fileType === 'yaml' && (extension.toLowerCase() === 'yaml' || extension.toLowerCase() === 'yml')
diff --git a/tsconfig.json b/tsconfig.json
index 1a46126..29b63f5 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -160,7 +160,17 @@
         "HealingComponent": ["src/app/utilities/healing/HealingComponent"],
         "NSCONFIGTEMPLATE": ["src/app/packages/ns-config-template/NSConfigTemplateComponent"],
         "NSCONFIGTEMPLATEACTION" :["src/app/utilities/ns-config-template-action/NSConfigTemplateActionComponent"],
-        "NSCONFIGTEMPLATEMODEL": ["src/models/NSConfigtemplateModel"]
+        "NSCONFIGTEMPLATEMODEL": ["src/models/NSConfigtemplateModel"],
+        "K8sAttachProfileComponent": ["src/app/k8s/k8s-attach-detatch-profile/K8sAttachProfileComponent"],
+        "K8sAppProfileComponent": ["src/app/k8s/k8s-profile/k8s-app-profile-details/K8sAppProfileComponent"],
+        "K8sInfraConfigProfileComponent": ["src/app/k8s/k8s-profile/k8s-infra-config-details/K8sInfraConfigProfileComponent"],
+        "K8sInfraConfigAddComponent": ["src/app/k8s/k8s-profile/k8s-infra-config-add/K8sInfraConfigAddComponent"],
+        "K8sInfraControllerProfileComponent": ["src/app/k8s/k8s-profile/k8s-infra-controller-details/K8sInfraControllerProfileComponent"],
+        "K8sResourceProfileComponent": ["src/app/k8s/k8s-profile/k8s-resource-profile/K8sResourceProfileComponent"],
+        "KSUComponent": ["src/app/k8s/k8s-ksu/ksu-details/KSUComponent"],
+        "KSUAddComponent": ["src/app/k8s/k8s-ksu/ksu-add/KSUAddComponent"],
+        "OkaPackageComponent": ["src/app/packages/oka-packages/OKAPackageComponent"],
+        "OkaPackagesActionComponent": ["src/app/utilities/oka-packages-action/OkaPackagesActionComponent"],
       },
       "useDefineForClassFields": false
     }