diff --git a/src/app/business-logic/model/pipelines/pipeline.ts b/src/app/business-logic/model/pipelines/pipeline.ts
index 63023fc7..de8606ef 100644
--- a/src/app/business-logic/model/pipelines/pipeline.ts
+++ b/src/app/business-logic/model/pipelines/pipeline.ts
@@ -17,6 +17,7 @@ import { PipelinesParameter } from './pipelinesParameter';
 
 interface PipelineNode {
     id?:string;
+    data?: any;
 }
 
 interface PipelineEdge {
diff --git a/src/app/webapp-common/pipelines/edit-pipeline-page/edit-pipeline-page.component.html b/src/app/webapp-common/pipelines/edit-pipeline-page/edit-pipeline-page.component.html
index 80ac33ab..aeb0da35 100644
--- a/src/app/webapp-common/pipelines/edit-pipeline-page/edit-pipeline-page.component.html
+++ b/src/app/webapp-common/pipelines/edit-pipeline-page/edit-pipeline-page.component.html
@@ -3,7 +3,7 @@
   [pipelineData]="selectedPipeline">
 </sm-edit-pipeline-header>
 <div class="edit-pipeline-body">
-  <sm-pipeline-step-info [step]="selectedStep" *ngIf="selectedStep"/>
+  <sm-pipeline-step-info [step]="selectedStep" *ngIf="selectedStep" (stepParamsChanged)="selectedStepParamsChanged($event)"/>
   <!-- <div class="details"><i class="icon no-output-icon i-no-code-dark"></i>&nbsp;DETAILS</div> -->
   <sm-flow-editor *ngIf="selectedPipeline?.flow_display?.nodes?.length" [pipelineData]="selectedPipeline"
     (nodesChangedInReactFlow)="nodesChangedInReactFlow($event)"
diff --git a/src/app/webapp-common/pipelines/edit-pipeline-page/edit-pipeline-page.component.ts b/src/app/webapp-common/pipelines/edit-pipeline-page/edit-pipeline-page.component.ts
index 0c4e29eb..ee7dbb38 100644
--- a/src/app/webapp-common/pipelines/edit-pipeline-page/edit-pipeline-page.component.ts
+++ b/src/app/webapp-common/pipelines/edit-pipeline-page/edit-pipeline-page.component.ts
@@ -1,9 +1,10 @@
+/* eslint-disable no-console */
 import { Component, OnDestroy, OnInit, inject } from '@angular/core';
 import { PipelineAddStepDialogComponent } from '../pipeline-add-step-dialog/pipeline-add-step-dialog.component';
 import { PipelineSettingDialogComponent } from '../pipeline-setting/pipeline-setting.dialog.component';
 import { MatDialog } from '@angular/material/dialog';
 import { Store } from '@ngrx/store';
-import { createPipelineStep, pipelineSettings, getPipelineById, resetPipelines, resetPipelinesSearchQuery, updatePipeline, compilePipeline, runPipeline } from '../pipelines.actions';
+import { createPipelineStep, pipelineSettings, getPipelineById, resetPipelines, resetPipelinesSearchQuery, updatePipeline, compilePipeline, runPipeline, setSelectedPipeline } from '../pipelines.actions';
 import { selectRouterParams } from '@common/core/reducers/router-reducer';
 import { Observable, Subscription, map } from 'rxjs';
 import { Params } from '@angular/router';
@@ -70,7 +71,7 @@ export class EditPipelinePageComponent implements OnInit, OnDestroy  {
   }
 
   compilePipeline () {
-    let requestPayload: PipelinesCompileRequest = {
+    const requestPayload: PipelinesCompileRequest = {
       pipeline_id: this.selectedPipeline.id,
       steps: this.selectedPipeline.flow_display.nodes.map((nodeItem) => {
         return {
@@ -146,8 +147,22 @@ export class EditPipelinePageComponent implements OnInit, OnDestroy  {
   }
 
   public nodeSelected(data) {
+    // eslint-disable-next-line no-console
+    console.log(this.selectedStep);
     this.selectedStep = {...data};
   }
 
+  public selectedStepParamsChanged(changedParams) {
+    const pipelineState = cloneDeep(this.selectedPipeline);
+    pipelineState.flow_display?.nodes.map((node) => {
+      if(node.id === this.selectedStep.id) {
+        node.data.parameters = cloneDeep(changedParams)
+      }
+      return node;
+    });
+    console.log(pipelineState);
+    this.store.dispatch(setSelectedPipeline({data: cloneDeep(pipelineState)}))
+  }
+
 
 }
diff --git a/src/app/webapp-common/pipelines/edit-pipeline-page/pipeline-step-info/pipeline-step-info.component.html b/src/app/webapp-common/pipelines/edit-pipeline-page/pipeline-step-info/pipeline-step-info.component.html
index fdb27d98..caa610aa 100644
--- a/src/app/webapp-common/pipelines/edit-pipeline-page/pipeline-step-info/pipeline-step-info.component.html
+++ b/src/app/webapp-common/pipelines/edit-pipeline-page/pipeline-step-info/pipeline-step-info.component.html
@@ -4,13 +4,12 @@
   </mat-expansion-panel-header>
   <div class="panel-body" *ngIf="step">
     <header *ngIf="step; else controllerHeader">
-      <i
-      class="al-icon lg"
-      [class]="'al-ico-type-' + (step.data.experimentDetails?.type ? (step.data.experimentDetails.type.toString()).replace('_', '-') : 'training')"
-    ></i>
+      <i class="al-icon lg"
+        [class]="'al-ico-type-' + (step.data.experimentDetails?.type ? (step.data.experimentDetails.type.toString()).replace('_', '-') : 'training')"></i>
       <div class="name" [smTooltip]="step.data.name" smShowTooltipIfEllipsis>{{step.data?.name}}</div>
       <div class="d-flex justify-content-between">
-        <div class="status" [class]="step.data.experimentDetails?.status" data-id="infoStepStatus">{{step.data.experimentDetails?.status}}</div>
+        <div class="status" [class]="step.data.experimentDetails?.status" data-id="infoStepStatus">
+          {{step.data.experimentDetails?.status}}</div>
         <sm-id-badge class="ms-1" [id]="step.id" (copied)="copyToClipboard()"></sm-id-badge>
       </div>
     </header>
@@ -22,10 +21,30 @@
     <ng-container>
       <div class="section">
         <div class="header">PARAMETERS</div>
-        <ng-container *ngFor="let section of  step?.data?.parameters">
+        <ng-container *ngFor="let section of  step?.data?.parameters; let index= index">
           <div class="param">
             <div class="key" [smTooltip]="section.name" smShowTooltipIfEllipsis>{{section.name}}</div>
-            <div class="value" [smTooltip]="section.value" smShowTooltipIfEllipsis>{{section.value}}</div>
+            <div class="value">
+              <input [matAutocomplete]="auto" [(ngModel)]="section['value']" placeholder="Parameter" (ngModelChange)="paramsChanged()" name="parameterKey-{{section.name}}-{{index}}"
+                matInput required  #optsInput="ngModel" />
+                <mat-autocomplete #auto="matAutocomplete" class="light-theme" [displayWith]="displayFn"
+                (opened)="setIsAutoCompleteOpen(true)" (closed)="setIsAutoCompleteOpen(false)" autoActiveFirstOption>
+                <mat-option *ngFor="let option of incommingInputOptions; trackBy: trackByValue" 
+                  [value]="option.value"
+                  [smTooltip]="option.label" 
+                  smShowTooltipIfEllipsis 
+                  (onSelectionChange)="paramSelected($event)">
+                  <div [smSearchText]="optsInput.value">{{option.label}}</div>
+                </mat-option>
+                <mat-option disabled style="height: 0; min-height: 0;"></mat-option>
+                
+              </mat-autocomplete>
+            </div>
+
+
+
+
+            <!-- <div class="value" [smTooltip]="section.value" smShowTooltipIfEllipsis>{{section.value}}</div> -->
           </div>
         </ng-container>
       </div>
@@ -34,30 +53,30 @@
         <ng-container *ngIf="(step?.data?.experimentDetails?.last_metrics | keyvalue)?.length > 0; else emptyMsg">
           <ng-container *ngFor="let metric of step?.data?.experimentDetails.last_metrics | keyvalue">
             <div *ngFor="let variant of $any($any(metric.value) | keyvalue) | filterMonitorMetric" class="param">
-              <div class="key" [smTooltip]="$any(variant.value).metric" smShowTooltipIfEllipsis>{{$any(variant.value).metric}}/{{$any(variant.value).variant}}</div>
-              <div class="value" [smTooltip]="$any(variant.value).value" smShowTooltipIfEllipsis>{{$any(variant.value).value}}</div>
+              <div class="key" [smTooltip]="$any(variant.value).metric" smShowTooltipIfEllipsis>
+                {{$any(variant.value).metric}}/{{$any(variant.value).variant}}</div>
+              <div class="value" [smTooltip]="$any(variant.value).value" smShowTooltipIfEllipsis>
+                {{$any(variant.value).value}}</div>
             </div>
           </ng-container>
         </ng-container>
       </div>
-       <div class="section">
+      <div class="section">
         <div class="header">ARTIFACTS</div>
         <ng-container *ngIf="step?.data?.experimentDetails?.execution?.artifacts?.length > 0; else emptyMsg">
-          <div
-            *ngFor="let artifact of step?.data?.experimentDetails?.execution.artifacts; trackBy: trackByFn"
-            class="param"
-          >
+          <div *ngFor="let artifact of step?.data?.experimentDetails?.execution.artifacts; trackBy: trackByFn"
+            class="param">
             <div class="key" [smTooltip]="artifact.key" smShowTooltipIfEllipsis>{{artifact.key}}</div>
             <div class="value">{{(artifact?.content_size | filesize : fileSizeConfigStorage) || ''}}</div>
           </div>
         </ng-container>
       </div>
-       <div class="section">
+      <div class="section">
         <div class="header">MODELS</div>
         <ng-container *ngIf="step?.data?.experimentDetails?.models?.output?.length > 0; else emptyMsg">
           <div *ngFor="let model of step?.data?.experimentDetails?.models?.output" class="param">
-            <div class="key"><a [routerLink]="['/projects', model.model.project.id, 'models', model.model.id]" target="_blank"
-            >{{model.name || model.model.name}}</a></div>
+            <div class="key"><a [routerLink]="['/projects', model.model.project.id, 'models', model.model.id]"
+                target="_blank">{{model.name || model.model.name}}</a></div>
           </div>
         </ng-container>
       </div>
diff --git a/src/app/webapp-common/pipelines/edit-pipeline-page/pipeline-step-info/pipeline-step-info.component.scss b/src/app/webapp-common/pipelines/edit-pipeline-page/pipeline-step-info/pipeline-step-info.component.scss
index 4dc30fc0..96a117ba 100644
--- a/src/app/webapp-common/pipelines/edit-pipeline-page/pipeline-step-info/pipeline-step-info.component.scss
+++ b/src/app/webapp-common/pipelines/edit-pipeline-page/pipeline-step-info/pipeline-step-info.component.scss
@@ -10,7 +10,7 @@
     }
 }
 
-  width: 260px;
+  width: 300px;
   z-index: 1;
   border-radius: 4px;
   background-color: $blue-700;
@@ -51,7 +51,7 @@
       border-bottom: solid 1px $dark-border;
 
       .key {
-        flex: 1 1 0;
+        flex: 0.5 1 0;
         color: $blue-300;
         margin-right: 12px;
         overflow: hidden;
diff --git a/src/app/webapp-common/pipelines/edit-pipeline-page/pipeline-step-info/pipeline-step-info.component.ts b/src/app/webapp-common/pipelines/edit-pipeline-page/pipeline-step-info/pipeline-step-info.component.ts
index 8cce8bc6..bfcef025 100644
--- a/src/app/webapp-common/pipelines/edit-pipeline-page/pipeline-step-info/pipeline-step-info.component.ts
+++ b/src/app/webapp-common/pipelines/edit-pipeline-page/pipeline-step-info/pipeline-step-info.component.ts
@@ -1,4 +1,4 @@
-import {Component, EventEmitter, Input, Output} from '@angular/core';
+import {Component, EventEmitter, Input, Output, ViewChild} from '@angular/core';
 import {Store} from '@ngrx/store';
 import {Artifact} from '~/business-logic/model/tasks/artifact';
 import {
@@ -9,8 +9,12 @@ import {
 import {TaskTypeEnum} from '~/business-logic/model/tasks/taskTypeEnum';
 import {addMessage} from '@common/core/actions/layout.actions';
 import {fileSizeConfigStorage} from '@common/shared/pipes/filesize.pipe';
-import {ICONS, MESSAGES_SEVERITY} from '@common/constants';
+import {ICONS, IOption, MESSAGES_SEVERITY} from '@common/constants';
 import {IExperimentInfo} from '~/features/experiments/shared/experiment-info.model';
+import { MatOptionSelectionChange } from '@angular/material/core';
+import { NgModel } from '@angular/forms';
+import { trackByValue } from '@common/shared/utils/forms-track-by';
+import { cloneDeep } from 'lodash-es';
 
 @Component({
   selector: 'sm-pipeline-step-info',
@@ -24,6 +28,33 @@ export class PipelineStepInfoComponent {
   public fileSizeConfigStorage = fileSizeConfigStorage;
   private _step;
 
+  @Output() deleteStep = new EventEmitter<unknown>();
+  @Output() stepParamsChanged = new EventEmitter<unknown>();
+
+  @Input() set step(step) {
+    this._step = step ? cloneDeep(step) : null;
+  }
+  get step() {
+    return this._step;
+  }
+
+  // for auto complete
+  @ViewChild('optsInput') optsInput: NgModel;
+  public trackByValue = trackByValue;
+  isAutoCompleteOpen: boolean;
+  public incommingInputOptions: { label: string; value: string }[] = [
+    {label: "test", value: "test1"}
+  ];
+  setIsAutoCompleteOpen(focus: boolean) {
+    this.isAutoCompleteOpen = focus;
+  }
+  displayFn(opt: IOption | string) {
+    return typeof opt === 'string' ? opt : opt?.label;
+  }
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  paramSelected($event: MatOptionSelectionChange) {
+    
+  }
   /* @Input() set entity(task: IExperimentInfo) {
     this._entity = task;
     this.controller = task?.type === TaskTypeEnum.Controller;
@@ -31,14 +62,14 @@ export class PipelineStepInfoComponent {
   get entity() {
     return this._entity;
   } */
-  @Output() deleteStep = new EventEmitter<unknown>();
-  @Input() set step(step) {
-    this._step = step ? {...step} : null;
+
+  paramsChanged() {
+    setTimeout(()=> {
+      this.stepParamsChanged.emit(this._step.data.parameters);
+    }, 2000)
   }
 
-  get step() {
-    return this._step;
-  }
+
   @Input() project: string;
 
   constructor(private store: Store) {
@@ -46,6 +77,10 @@ export class PipelineStepInfoComponent {
 
   public deleteClicked() {
     this.deleteStep.emit(this._step);
+    /* setTimeout(() => {
+      // eslint-disable-next-line no-console
+      console.log(this._step);
+    }, 3000) */
   }
 
   trackByFn = (index: number, artifact: Artifact) => artifact.hash || artifact.uri;