diff --git a/src/app/webapp-common/common-styles.scss b/src/app/webapp-common/common-styles.scss
index 0beaef88..2c46a64f 100644
--- a/src/app/webapp-common/common-styles.scss
+++ b/src/app/webapp-common/common-styles.scss
@@ -823,7 +823,7 @@ button.btn.button-outline-dark {
   grid-template-columns: repeat(auto-fit, 352px);
   grid-gap: 24px;
   padding: 0 24px 24px;
-  justify-content: center;
+  justify-content: space-between;
 
   .load-more {
     display: flex;
diff --git a/src/app/webapp-common/pipelines/edit-pipeline-header/edit-pipeline-header.component.html b/src/app/webapp-common/pipelines/edit-pipeline-header/edit-pipeline-header.component.html
new file mode 100644
index 00000000..6efc757b
--- /dev/null
+++ b/src/app/webapp-common/pipelines/edit-pipeline-header/edit-pipeline-header.component.html
@@ -0,0 +1,51 @@
+<!-- <div class="d-flex justify-content-between header-container align-items-center"
+     [ngClass]="{'archive-mode': isArchived}"> -->
+  <!-- <div class="d-flex-center"> -->
+  <div class="d-flex justify-content-end align-items-center right-buttons">
+    <sm-clear-filters-button
+      *ngIf="!minimizedView"
+      [tableFilters]="tableFilters"
+      (clearTableFilters)="clearTableFilters.emit(tableFilters)"
+    ></sm-clear-filters-button>
+    <sm-menu *ngIf="tableMode !== 'compare'"
+      class="download-btn" buttonClass="al-icon al-ico-download pointer lm" panelClasses="light-theme"
+             [showCart]="false" smTooltip="Download table as CSV" [disabled]="noData" data-id="downloadCSV">
+      <sm-menu-item (itemClicked)="downloadTableAsCSV.emit()" itemLabel="Download on screen items"></sm-menu-item>
+      <sm-menu-item (itemClicked)="downloadFullTableAsCSV.emit()"
+                    [itemLabel]="'Download first '+ (maxDownloadItems$ | async) +' items'"></sm-menu-item>
+    </sm-menu>
+
+    <!-- <mat-form-field *ngIf="tableMode === 'compare'" appearance="outline" class="dark-outline compare-view-select no-bottom">
+      <mat-select [(ngModel)]="compareView" name="compareView" panelClass="dark-outline" (ngModelChange)="compareViewChanged.emit($event)">
+        <mat-option value="scalars">Scalars</mat-option>
+        <mat-option value="plots">Plots</mat-option>
+      </mat-select>
+    </mat-form-field> -->
+
+    <!-- <i class="al-icon al-ico-tune sm-md"
+       *ngIf="tableMode === 'compare' && compareView === 'scalars'"
+       [class.active]="showCompareScalarSettings"
+       (click)="toggleShowCompareSettings.emit()"></i> -->
+
+    <sm-experiment-custom-cols-menu
+      *ngIf="!minimizedView || tableMode === 'compare'"
+      [metricVariants]="metricVariants"
+      [hyperParams]="hyperParams"
+      [tableCols]="tableCols"
+      [isLoading]="isMetricsLoading"
+      [skipValueType]="tableMode === 'compare'"
+      [disabled]="tableMode === 'compare' && metricVariants?.length === 0"
+      (selectedMetricToShow)="selectedMetricToShow.emit($event)"
+      (selectedHyperParamToShow)="selectedHyperParamToShow.emit($event)"
+      (selectedTableColsChanged)="selectedTableColsChanged.emit($event)"
+      (getMetricsToDisplay)="getMetricsToDisplay.emit($event)"
+      (removeColFromList)="removeColFromList.emit($event)"
+      (clearSelection)="clearSelection.emit()"
+    ></sm-experiment-custom-cols-menu>
+    <sm-refresh-button
+      [allowAutoRefresh]="true"
+      (setAutoRefresh)="setAutoRefresh.emit($event)"
+    >
+    </sm-refresh-button>
+  <!-- </div> -->
+<!-- </div> -->
diff --git a/src/app/webapp-common/pipelines/edit-pipeline-header/edit-pipeline-header.component.scss b/src/app/webapp-common/pipelines/edit-pipeline-header/edit-pipeline-header.component.scss
new file mode 100644
index 00000000..d7e78f71
--- /dev/null
+++ b/src/app/webapp-common/pipelines/edit-pipeline-header/edit-pipeline-header.component.scss
@@ -0,0 +1,5 @@
+.right-buttons{
+    display: flex;
+    flex-grow: 1;
+    justify-content: end;
+}
\ No newline at end of file
diff --git a/src/app/webapp-common/pipelines/edit-pipeline-header/edit-pipeline-header.component.ts b/src/app/webapp-common/pipelines/edit-pipeline-header/edit-pipeline-header.component.ts
new file mode 100644
index 00000000..3e4f41a6
--- /dev/null
+++ b/src/app/webapp-common/pipelines/edit-pipeline-header/edit-pipeline-header.component.ts
@@ -0,0 +1,66 @@
+import {Component, EventEmitter, Input, OnInit, Output, TemplateRef} from '@angular/core';
+import {MetricVariantResult} from '~/business-logic/model/projects/metricVariantResult';
+import {ISmCol} from '@common/shared/ui-components/data/table/table.consts';
+import {FilterMetadata} from 'primeng/api/filtermetadata';
+import {BaseEntityHeaderComponent} from '@common/shared/entity-page/base-entity-header/base-entity-header.component';
+import {SelectionEvent} from '@common/experiments/dumb/select-metric-for-custom-col/select-metric-for-custom-col.component';
+import {Option} from '@common/shared/ui-components/inputs/button-toggle/button-toggle.component';
+import {trackByValue} from '@common/shared/utils/forms-track-by';
+import {resourceToIconMap} from '~/features/experiments/experiments.consts';
+import {EntityTypeEnum} from '~/shared/constants/non-common-consts';
+
+
+
+@Component({
+  selector: 'sm-edit-pipeline-header',
+  templateUrl: './edit-pipeline-header.component.html',
+  styleUrls: ['./edit-pipeline-header.component.scss']
+})
+export class EditPipelineHeaderComponent extends BaseEntityHeaderComponent implements OnInit{
+  private _tableCols: any;
+  toggleButtons: Option[];
+  @Input() isArchived: boolean;
+  @Input() metricVariants: Array<MetricVariantResult>;
+  @Input() hyperParams: any[];
+  @Input() minimizedView: boolean;
+  @Input() isMetricsLoading: boolean;
+  @Input() tableFilters: { [s: string]: FilterMetadata };
+  @Input() sharedView: boolean;
+  @Input() showNavbarLinks: boolean;
+  @Input() tableMode: 'table' | 'info' | 'compare';
+  @Input() compareView: 'scalars' | 'plots';
+  @Input() showCompareScalarSettings: boolean;
+  @Input() rippleEffect: boolean;
+  @Input() addButtonTemplate: TemplateRef<any>;
+
+  @Input() set tableCols(tableCols) {
+    this._tableCols = tableCols?.filter(col => col.header !== '');
+  }
+
+  get tableCols() {
+    return this._tableCols;
+  }
+
+  @Output() isArchivedChanged        = new EventEmitter<boolean>();
+  @Output() selectedTableColsChanged = new EventEmitter<ISmCol>();
+  @Output() removeColFromList        = new EventEmitter<ISmCol['id']>();
+  @Output() getMetricsToDisplay      = new EventEmitter();
+  @Output() selectedMetricToShow     = new EventEmitter<SelectionEvent>();
+  @Output() selectedHyperParamToShow = new EventEmitter<{param: string; addCol: boolean}>();
+  @Output() setAutoRefresh = new EventEmitter<boolean>();
+  @Output() toggleShowCompareSettings = new EventEmitter<boolean>();
+  @Output() compareViewChanged = new EventEmitter<'scalars' | 'plots'>();
+  @Output() clearSelection = new EventEmitter();
+  @Output() clearTableFilters = new EventEmitter<{ [s: string]: FilterMetadata }>();
+  @Output() tableModeChanged = new EventEmitter<'table' | 'info' | 'compare'>();
+  protected readonly resourceToIconMap = resourceToIconMap;
+  protected readonly trackByValue = trackByValue;
+
+  ngOnInit(): void {
+    this.toggleButtons = [
+      {label: 'Table view', value: 'table', icon: 'al-ico-table-view'},
+      {label: 'Details view', value: 'info', icon: 'al-ico-experiment-view'},
+      ...(this.entityType === EntityTypeEnum.experiment ? [{label: 'Compare view', value: 'compare', icon: 'al-ico-charts-view'}] : [])
+    ];
+  }
+}
diff --git a/src/app/webapp-common/pipelines/edit-pipeline/edit-pipeline.component.html b/src/app/webapp-common/pipelines/edit-pipeline/edit-pipeline.component.html
new file mode 100644
index 00000000..f9bcb8ae
--- /dev/null
+++ b/src/app/webapp-common/pipelines/edit-pipeline/edit-pipeline.component.html
@@ -0,0 +1,9 @@
+<div class="sm-card-list-layout projects">
+  <sm-edit-pipeline-header
+  >
+  </sm-edit-pipeline-header>
+  <div>
+    <div>Details</div>
+    <div>image</div>
+  </div>
+</div>
\ No newline at end of file
diff --git a/src/app/webapp-common/pipelines/edit-pipeline/edit-pipeline.component.scss b/src/app/webapp-common/pipelines/edit-pipeline/edit-pipeline.component.scss
new file mode 100644
index 00000000..e69de29b
diff --git a/src/app/webapp-common/pipelines/edit-pipeline/edit-pipeline.component.ts b/src/app/webapp-common/pipelines/edit-pipeline/edit-pipeline.component.ts
new file mode 100644
index 00000000..9c76c441
--- /dev/null
+++ b/src/app/webapp-common/pipelines/edit-pipeline/edit-pipeline.component.ts
@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'sm-edit-pipeline',
+  templateUrl: './edit-pipeline.component.html',
+  styleUrls: ['./edit-pipeline.component.scss']
+})
+export class EditPipelineComponent {
+
+}
diff --git a/src/app/webapp-common/pipelines/pipelines-page/pipelines-page.component.html b/src/app/webapp-common/pipelines/pipelines-page/pipelines-page.component.html
index fa730693..44f38376 100644
--- a/src/app/webapp-common/pipelines/pipelines-page/pipelines-page.component.html
+++ b/src/app/webapp-common/pipelines/pipelines-page/pipelines-page.component.html
@@ -1,5 +1,6 @@
+<router-outlet></router-outlet>
 <div class="sm-card-list-layout projects"
-     [class.in-empty-state]="!(((projectsList$ | async)?.length !== 0 && (!allExamples || (showExamples$ | async))) || searching)">
+[class.in-empty-state]="!(((projectsList$ | async)?.length !== 0 && (!allExamples || (showExamples$ | async))) || searching)">
   <sm-projects-header
     (orderByChanged)="orderByChanged($event)"
     [sortByField]="projectsOrderBy$ | async"
diff --git a/src/app/webapp-common/pipelines/pipelines.module.ts b/src/app/webapp-common/pipelines/pipelines.module.ts
index 87d42f9c..a0e6da26 100644
--- a/src/app/webapp-common/pipelines/pipelines.module.ts
+++ b/src/app/webapp-common/pipelines/pipelines.module.ts
@@ -9,6 +9,16 @@ import {merge} from 'lodash-es';
 import {PipelinesRouterModule} from '@common/pipelines/pipelines.route';
 import {PipelineCardComponent} from '@common/pipelines/pipeline-card/pipeline-card.component';
 import {ButtonToggleComponent} from '@common/shared/ui-components/inputs/button-toggle/button-toggle.component';
+import { EditPipelineComponent } from './edit-pipeline/edit-pipeline.component';
+import { EditPipelineHeaderComponent } from './edit-pipeline-header/edit-pipeline-header.component';
+import {ClearFiltersButtonComponent} from '@common/shared/components/clear-filters-button/clear-filters-button.component';
+import {MenuComponent} from '@common/shared/ui-components/panel/menu/menu.component';
+import {MenuItemComponent} from '@common/shared/ui-components/panel/menu-item/menu-item.component';
+import {MAT_FORM_FIELD_DEFAULT_OPTIONS} from '@angular/material/form-field';
+// import { ExperimentCustomColsMenuComponent } from '@common/experiments/dumb/experiment-custom-cols-menu/experiment-custom-cols-menu.component';
+import { RefreshButtonComponent } from '@common/shared/components/refresh-button/refresh-button.component';
+import { ExperimentSharedModule } from '~/features/experiments/shared/experiment-shared.module';
+import { LabeledFormFieldDirective } from "../shared/directive/labeled-form-field.directive";
 
 
 export const pipelinesSyncedKeys = [
@@ -39,21 +49,30 @@ const getPipelineConfig = () => ({
 
 
 @NgModule({
-  declarations: [
-    PipelinesPageComponent,
-  ],
-  imports: [
-    CommonModule,
-    CommonProjectsModule,
-    ProjectsSharedModule,
-    PipelinesRouterModule,
-    StoreModule.forFeature('projects', projectsReducer, PIPELINES_CONFIG_TOKEN),
-    PipelineCardComponent,
-    ButtonToggleComponent,
-  ],
-  exports: [PipelinesPageComponent],
-  providers: [
-    {provide: PIPELINES_CONFIG_TOKEN, useFactory: getPipelineConfig},
-  ]
+    declarations: [
+        PipelinesPageComponent,
+        EditPipelineComponent,
+        EditPipelineHeaderComponent,
+    ],
+    exports: [PipelinesPageComponent, EditPipelineComponent],
+    providers: [
+        { provide: PIPELINES_CONFIG_TOKEN, useFactory: getPipelineConfig },
+        { provide: MAT_FORM_FIELD_DEFAULT_OPTIONS, useValue: { floatLabel: 'always' } },
+    ],
+    imports: [
+        CommonModule,
+        CommonProjectsModule,
+        ProjectsSharedModule,
+        PipelinesRouterModule,
+        StoreModule.forFeature('projects', projectsReducer, PIPELINES_CONFIG_TOKEN),
+        PipelineCardComponent,
+        ButtonToggleComponent,
+        ClearFiltersButtonComponent,
+        MenuComponent,
+        MenuItemComponent,
+        ExperimentSharedModule,
+        RefreshButtonComponent,
+        LabeledFormFieldDirective
+    ]
 })
 export class PipelinesModule { }
diff --git a/src/app/webapp-common/pipelines/pipelines.route.ts b/src/app/webapp-common/pipelines/pipelines.route.ts
index a67014c9..6acdb3bc 100644
--- a/src/app/webapp-common/pipelines/pipelines.route.ts
+++ b/src/app/webapp-common/pipelines/pipelines.route.ts
@@ -2,16 +2,23 @@ import {FeaturesEnum} from '~/business-logic/model/users/featuresEnum';
 import {NgModule} from '@angular/core';
 import {RouterModule, Routes} from '@angular/router';
 import {PipelinesPageComponent} from '@common/pipelines/pipelines-page/pipelines-page.component';
+import { EditPipelineComponent} from '@common/pipelines/edit-pipeline/edit-pipeline.component';
 import {CrumbTypeEnum} from '@common/layout/breadcrumbs/breadcrumbs.component';
 
-const routes = [{
-  path: '',
-  component: PipelinesPageComponent,
-  data: {search: true, features: FeaturesEnum.Pipelines, staticBreadcrumb:[[{
-      name: 'PIPELINES',
-      type: CrumbTypeEnum.Feature
-    }]]},
-}] as Routes;
+const routes = [  {
+    path: '',
+    component: PipelinesPageComponent,
+    data: {
+      search: true,
+      features: FeaturesEnum.Pipelines,
+      staticBreadcrumb: [[{
+        name: 'PIPELINES',
+        type: CrumbTypeEnum.Feature
+      }]]
+    },
+    
+    
+  },{ path: ':id/edit', component: EditPipelineComponent }] as Routes;
 
 @NgModule({
   imports: [