diff --git a/src/composer/src/app/app.module.ts b/src/composer/src/app/app.module.ts
index d05a0eb..0083051 100644
--- a/src/composer/src/app/app.module.ts
+++ b/src/composer/src/app/app.module.ts
@@ -25,6 +25,7 @@ import { MatTooltipModule } from '@angular/material/tooltip'
 import { MatCheckboxModule } from '@angular/material/checkbox'
 import { MatMenuModule } from '@angular/material/menu'
 import { MatStepperModule } from '@angular/material/stepper'
+import { MatAutocompleteModule } from '@angular/material/autocomplete'
 
 import { RepoSearchComponent, DialogDetails, DialogAddCustom } from './core/components/repo-search/repo-search.component'
 import { HeaderComponent } from './core/components/header/header.component'
@@ -66,6 +67,7 @@ import { GlobalDialogComponent } from './core/components/dialogs/global-dialog/g
 
 import { CodemirrorModule } from '@ctrl/ngx-codemirror';
 import { RecipeComponent, DialogPublishRecipe, DialogRecipeDetails } from './core/components/recipe/recipe.component';
+import { BuildDialogComponent } from './core/components/dialogs/build-dialog/build-dialog.component';
 
 export function getHighlightLanguages() {
   return {
@@ -102,7 +104,8 @@ export function getHighlightLanguages() {
     GlobalDialogComponent,
     RecipeComponent,
     DialogPublishRecipe,
-    DialogRecipeDetails
+    DialogRecipeDetails,
+    BuildDialogComponent
   ],
   imports: [
     BrowserModule,
@@ -124,6 +127,7 @@ export function getHighlightLanguages() {
     MatCheckboxModule,
     MatMenuModule,
     MatStepperModule,
+    MatAutocompleteModule,
     DragDropModule,
     HighlightModule,
     FlexLayoutModule,
diff --git a/src/composer/src/app/core/components/canvas/jsplumb/node/node.component.html b/src/composer/src/app/core/components/canvas/jsplumb/node/node.component.html
index 4b975b1..58a3f8f 100644
--- a/src/composer/src/app/core/components/canvas/jsplumb/node/node.component.html
+++ b/src/composer/src/app/core/components/canvas/jsplumb/node/node.component.html
@@ -28,6 +28,9 @@
     <button mat-icon-button aria-label="Remove" (click)="removeService()">
       <mat-icon>delete</mat-icon>
     </button>
+    <button mat-icon-button aria-label="Build" (click)="buildDialogOpen()">
+      <span class="material-icons">build</span>
+    </button>
     <button mat-icon-button aria-label="Manage" (click)="manageProjectService()">
       <mat-icon>create</mat-icon>
     </button>
diff --git a/src/composer/src/app/core/components/canvas/jsplumb/node/node.component.ts b/src/composer/src/app/core/components/canvas/jsplumb/node/node.component.ts
index 445e7a8..36b7e5d 100644
--- a/src/composer/src/app/core/components/canvas/jsplumb/node/node.component.ts
+++ b/src/composer/src/app/core/components/canvas/jsplumb/node/node.component.ts
@@ -6,6 +6,7 @@ import { RestService } from 'src/app/core/services/rest.service'
 import { MatDialog } from '@angular/material/dialog'
 import { ManageProjectDialogComponent } from '../../../dialogs/manage-project-dialog/manage-project-dialog.component'
 import { ConfirmDialogComponent } from '../../../dialogs/confirm-dialog/confirm-dialog.component'
+import { BuildDialogComponent } from '../../../dialogs/build-dialog/build-dialog.component'
 import * as ProjectActions from './../../../../store/project.actions'
 import { NodeService } from '../node.service'
 import { EventEmitterService } from 'src/app/core/services/event-emitter.service'
@@ -126,6 +127,14 @@ export class NodeComponent implements AfterViewInit, OnDestroy {
       })
   }
 
+  buildDialogOpen() {
+    this.dialog.open(BuildDialogComponent, {
+      width: '50%',
+      minWidth: '740px',
+      data: this.currentService,
+    })
+  }
+
   ngOnDestroy() {
     this.unSubscribe$.next(true)
     this.unSubscribe$.complete()
diff --git a/src/composer/src/app/core/components/dialogs/build-dialog/build-dialog.component.html b/src/composer/src/app/core/components/dialogs/build-dialog/build-dialog.component.html
new file mode 100644
index 0000000..df35c9a
--- /dev/null
+++ b/src/composer/src/app/core/components/dialogs/build-dialog/build-dialog.component.html
@@ -0,0 +1,62 @@
+<h1 mat-dialog-title><span>Build Config</span></h1>
+<mat-dialog-content>
+  <mat-tab-group animationDuration="0ms">
+    <mat-tab label="General">
+      <form [formGroup]="formGeneral" fxLayout="column">
+        <mat-form-field appearance="outline">
+          <mat-label>Build</mat-label>
+          <input matInput formControlName="build" />
+        </mat-form-field>
+
+        <mat-form-field appearance="outline">
+          <mat-label>Context</mat-label>
+          <input matInput formControlName="context" />
+        </mat-form-field>
+
+        <mat-form-field appearance="outline">
+          <mat-label>Dockerfile</mat-label>
+          <input matInput formControlName="dockerfile" />
+        </mat-form-field>
+
+        <mat-form-field appearance="outline">
+          <mat-label>Network</mat-label>
+          <input matInput formControlName="network" />
+        </mat-form-field>
+
+        <mat-form-field appearance="outline">
+          <mat-label>SHM size</mat-label>
+          <input matInput formControlName="shm_size" />
+        </mat-form-field>
+  
+        <mat-form-field appearance="outline">
+          <mat-label>Target</mat-label>
+          <input matInput formControlName="target" />
+        </mat-form-field>
+      </form>
+    </mat-tab>
+    <mat-tab label="Arguments">
+      <h2 mat-dialog-title>Arguments</h2>
+      <key-value #args [keyValueArray]="currentArgs"></key-value>
+    </mat-tab>
+    
+    <mat-tab label="Cache from">
+      <h2 mat-dialog-title>Cache from</h2>
+      <key-value #cache_from [keyValueArray]="currentCacheFrom"></key-value>
+    </mat-tab>
+
+    <mat-tab label="Labels">
+      <h2 mat-dialog-title>Labels</h2>
+      <key-value #labels [keyValueArray]="currentLabels"></key-value>
+    </mat-tab>
+  </mat-tab-group>
+</mat-dialog-content>
+
+<mat-dialog-actions class="dialog-actions">
+  <check-circle></check-circle>
+  <button mat-button (click)="dialogRef.close()">
+    Cancel
+  </button>
+  <button mat-raised-button color="success" (click)="onSave()" [disabled]="formGeneral.invalid">
+    Save
+  </button>
+</mat-dialog-actions>
diff --git a/src/composer/src/app/core/components/dialogs/build-dialog/build-dialog.component.scss b/src/composer/src/app/core/components/dialogs/build-dialog/build-dialog.component.scss
new file mode 100644
index 0000000..e69de29
diff --git a/src/composer/src/app/core/components/dialogs/build-dialog/build-dialog.component.spec.ts b/src/composer/src/app/core/components/dialogs/build-dialog/build-dialog.component.spec.ts
new file mode 100644
index 0000000..689e821
--- /dev/null
+++ b/src/composer/src/app/core/components/dialogs/build-dialog/build-dialog.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { BuildDialogComponent } from './build-dialog.component';
+
+describe('BuildDialogComponent', () => {
+  let component: BuildDialogComponent;
+  let fixture: ComponentFixture<BuildDialogComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ BuildDialogComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(BuildDialogComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/composer/src/app/core/components/dialogs/build-dialog/build-dialog.component.ts b/src/composer/src/app/core/components/dialogs/build-dialog/build-dialog.component.ts
new file mode 100644
index 0000000..9c45b5c
--- /dev/null
+++ b/src/composer/src/app/core/components/dialogs/build-dialog/build-dialog.component.ts
@@ -0,0 +1,64 @@
+import { Component, OnInit, ViewChild, Inject } from '@angular/core'
+import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog'
+import { FormControl, Validators, FormGroup, FormBuilder, AbstractControl } from '@angular/forms'
+import { KeyValueComponent } from '../../common/key-value/key-value/key-value.component'
+import { Service, Project, Volume, ServicePort, Network } from '../../../store/models'
+import { CheckCircleComponent } from '../../widgets/check-circle/check-circle.component'
+import { Store } from '@ngrx/store'
+import * as ProjectActions from './../../../store/project.actions'
+import { EventEmitterService } from 'src/app/core/services/event-emitter.service'
+
+@Component({
+  selector: 'app-build-dialog',
+  templateUrl: './build-dialog.component.html',
+  styleUrls: ['./build-dialog.component.scss']
+})
+export class BuildDialogComponent implements OnInit {
+  @ViewChild(CheckCircleComponent) checkCircle: CheckCircleComponent
+  @ViewChild('args') args: KeyValueComponent
+  @ViewChild('cache_from') cache_from: KeyValueComponent
+  @ViewChild('labels') labels: KeyValueComponent
+
+  formGeneral: FormGroup
+  currentArgs: [] = []
+  currentCacheFrom: [] = []
+  currentLabels: [] = []
+  constructor(public dialogRef: MatDialogRef<BuildDialogComponent>, private formBuilder: FormBuilder, @Inject(MAT_DIALOG_DATA) public data: Service, private store: Store, private eventEmitterService: EventEmitterService,) { }
+
+  ngOnInit(): void {
+    this.formGeneral = this.formBuilder.group({
+      build: new FormControl(''),
+      context: new FormControl(''),
+      dockerfile: new FormControl(''),
+      network: new FormControl(''),
+      shm_size: new FormControl(''),
+      target: new FormControl(''),
+    })
+
+    if (this.data.build) {
+      this.data.build.labels.forEach(val => this.currentLabels.push(val))
+      this.data.build.cache_from.forEach(val => this.currentCacheFrom.push(val))
+      this.data.build.args.forEach(val => this.currentArgs.push(val))
+
+      let fields = Object.keys(this.data.build).reduce((acc, key) => {
+        if(this.data.build[key]) acc[key] = this.data.build[key]
+        return acc
+      }, {})
+  
+      this.formGeneral.patchValue(fields)
+    }
+  }
+
+  onSave() {
+    const fields = {
+      ...this.formGeneral.getRawValue(),
+      args: this.args.getKeyValuePaies(),
+      cache_from: this.cache_from.getKeyValuePaies(),
+      labels: this.labels.getKeyValuePaies()
+    }
+    this.store.dispatch(ProjectActions.UpdateService({data: {...this.data, build: fields}}))
+    this.checkCircle.showCircle()
+    this.eventEmitterService.broadcast('save:project', {})
+  }
+
+}
diff --git a/src/composer/src/app/core/components/dialogs/manage-project-dialog/manage-project-dialog.component.html b/src/composer/src/app/core/components/dialogs/manage-project-dialog/manage-project-dialog.component.html
index 04fe385..8746030 100644
--- a/src/composer/src/app/core/components/dialogs/manage-project-dialog/manage-project-dialog.component.html
+++ b/src/composer/src/app/core/components/dialogs/manage-project-dialog/manage-project-dialog.component.html
@@ -10,15 +10,12 @@
 
         <mat-form-field appearance="fill">
           <mat-label>Tag</mat-label>
-          <mat-select formControlName="tag">
-              <mat-option *ngFor="let tag of tags" [value]="tag">
-                {{ tag }}
-              </mat-option>
-              <mat-option *ngIf="isLoading">
-                <app-spinner></app-spinner>
-              </mat-option>
-              <button *ngIf="nextTagPage" mat-button color="primary" class="tag-select__upload-button" (click)="getTags()">Load more</button>
-          </mat-select>
+          <input type="text" matInput formControlName="tag" [matAutocomplete]="auto" (onEnter)="getTags()" (change)="getTags()">
+          <mat-autocomplete #auto="matAutocomplete" >
+            <mat-option *ngFor="let tag of tags" [value]="tag">
+              {{ tag }}
+            </mat-option>
+          </mat-autocomplete>
         </mat-form-field>
 
         <mat-form-field fxFill appearance="outline">
diff --git a/src/composer/src/app/core/components/dialogs/manage-project-dialog/manage-project-dialog.component.ts b/src/composer/src/app/core/components/dialogs/manage-project-dialog/manage-project-dialog.component.ts
index 1ead06e..3fdefc8 100644
--- a/src/composer/src/app/core/components/dialogs/manage-project-dialog/manage-project-dialog.component.ts
+++ b/src/composer/src/app/core/components/dialogs/manage-project-dialog/manage-project-dialog.component.ts
@@ -65,7 +65,7 @@ export class ManageProjectDialogComponent implements OnInit, OnDestroy {
   ) {
     this.serviceName = this.data.name
     this.formGeneral = this.formBuilder.group({
-      image: new FormControl({ value: this.data.image, disabled: true }, Validators.required),
+      image: new FormControl( this.data.image, Validators.required),
       name: new FormControl('', [Validators.required, this.serviceNameAlreadyExistsValidator]),
       tag: new FormControl('', [Validators.required]),
       restart: new FormControl('', [Validators.required]),
@@ -78,6 +78,11 @@ export class ManageProjectDialogComponent implements OnInit, OnDestroy {
       networks: new FormControl(),
     })
 
+    this.formGeneral.get('image').valueChanges.pipe(takeUntil(this.unSubscribe$)).subscribe((value)=> {
+      if (!value) this.formGeneral.get('tag').disable()
+      else if (value && this.formGeneral.get('tag').disabled) this.formGeneral.get('tag').enable()
+    })
+
     this.project = this.store.select('project')
 
     const sub = this.project.pipe(takeUntil(this.unSubscribe$)).subscribe((v) => {
@@ -152,15 +157,11 @@ export class ManageProjectDialogComponent implements OnInit, OnDestroy {
   getTags(): void {
     this.isLoading = true
     this.rest
-      .getRepoTags(this.formGeneral.get('image').value, this.nextTagPage)
+      .getRepoTags(this.formGeneral.get('image').value, this.nextTagPage, this.formGeneral.get('tag').value)
       .pipe(takeUntil(this.unSubscribe$))
-      .subscribe(({ results, next }) => {
-        next ? this.nextTagPage++ : (this.nextTagPage = null)
+      .subscribe(({ results }) => {
 
-        results.forEach(({ name }) => {
-          const index = this.tags.findIndex((prevName) => name === prevName)
-          index === -1 ? this.tags.push(name) : ''
-        })
+        this.tags = results.map(({name}) => name)
 
         this.isLoading = false
       })
diff --git a/src/composer/src/app/core/components/repo-search/dialog-add-custom.html b/src/composer/src/app/core/components/repo-search/dialog-add-custom.html
index 6b06bf3..aeb83df 100644
--- a/src/composer/src/app/core/components/repo-search/dialog-add-custom.html
+++ b/src/composer/src/app/core/components/repo-search/dialog-add-custom.html
@@ -9,8 +9,13 @@
     <mat-label>Tag</mat-label>
     <input matInput [(ngModel)]="tag" />
   </mat-form-field>
+
+  <mat-form-field appearance="fill">
+    <mat-label>Service name</mat-label>
+    <input matInput required [(ngModel)]="serviceName" />
+  </mat-form-field>
 </div>
 
 <div mat-dialog-actions fxLayoutAlign="end">
-  <button mat-raised-button (click)="addProject()" cdkFocusInitial>Add</button>
+  <button mat-raised-button [disabled]="!serviceName" (click)="addProject()" cdkFocusInitial>Add</button>
 </div>
diff --git a/src/composer/src/app/core/components/repo-search/repo-search.component.ts b/src/composer/src/app/core/components/repo-search/repo-search.component.ts
index 9a90dec..92fe07f 100644
--- a/src/composer/src/app/core/components/repo-search/repo-search.component.ts
+++ b/src/composer/src/app/core/components/repo-search/repo-search.component.ts
@@ -94,7 +94,7 @@ export class RepoSearchComponent implements OnInit, OnDestroy {
           shm_size: null,
           stdin_open: null,
           tty: null,
-          name: `${data['name']}_${postfix}`,
+          name: data['serviceName'] ? `${data['serviceName']}_${postfix}` : `${data['name']}_${postfix}`,
           container_name: null,
           deploy: null,
           image: imageName,
@@ -250,9 +250,10 @@ export class DialogAddCustom {
   @Output() onAddProject = new EventEmitter()
   imageName: string
   tag: string
+  serviceName: string
   constructor(public dialogRef: MatDialogRef<DialogDetails>) {}
 
   addProject() {
-    this.onAddProject.emit({name: this.imageName, tag: this.tag})
+    this.onAddProject.emit({name: this.imageName, tag: this.tag, serviceName: this.serviceName})
   }
 }
diff --git a/src/composer/src/app/core/services/rest.service.ts b/src/composer/src/app/core/services/rest.service.ts
index fba4994..c6d1c28 100644
--- a/src/composer/src/app/core/services/rest.service.ts
+++ b/src/composer/src/app/core/services/rest.service.ts
@@ -38,8 +38,8 @@ export class RestService {
     return this.http.get(`${baseDetailUrl}/?r=${repoName}`, httpOptions).pipe(map(this.extractData))
   }
 
-  getRepoTags(repoName: string, pageNumber: number): Observable<any> {
-    return this.http.get(`${baseTagsUrl}/?r=${repoName}&page=${pageNumber}`, httpOptions).pipe(map(this.extractData))
+  getRepoTags(repoName: string, pageNumber: number, searchSubStr: string): Observable<any> {
+    return this.http.get(`${baseTagsUrl}/?r=${repoName}&s=${searchSubStr}&page=${pageNumber}`, httpOptions).pipe(map(this.extractData))
   }
 
   generateCode(data: object): Observable<any> {