diff --git a/src/app/shared/components/color-picker/color-picker.component.html b/src/app/shared/components/color-picker/color-picker.component.html
index a4812b30ef..5bde0805f0 100644
--- a/src/app/shared/components/color-picker/color-picker.component.html
+++ b/src/app/shared/components/color-picker/color-picker.component.html
@@ -3,9 +3,15 @@
   [class.disabled]="disabled"
   (click)="handlePreviewClick($event)"
 >
-  <div class="color-preview" [style.background-color]="selectedColor?.value"></div>
+  <div *ngIf="hasColorField"
+       class="color-preview"
+       [style.background-color]="selectedColor?.value"></div>
+  <div *ngIf="!hasColorField"
+       class="color-preview"
+       [csPopoverTrigger]="popover"
+       [style.background-color]="selectedColor?.value"></div>
 </div>
-<md-form-field [csPopoverTrigger]="popover" class="full-width-input">
+<md-form-field *ngIf="hasColorField" [csPopoverTrigger]="popover" class="full-width-input">
   <input
     mdInput
     [value]="selectedColor?.value.toLowerCase()"
@@ -18,6 +24,7 @@
   <cs-popover #popover>
     <div
       class="color-picker-container mat-elevation-z2"
+      [ngClass]="{'color-picker-no-field': !hasColorField}"
       [style.width.px]="containerWidth"
     >
       <div
diff --git a/src/app/shared/components/color-picker/color-picker.component.scss b/src/app/shared/components/color-picker/color-picker.component.scss
index 37fdee44b8..5a38d74801 100644
--- a/src/app/shared/components/color-picker/color-picker.component.scss
+++ b/src/app/shared/components/color-picker/color-picker.component.scss
@@ -68,3 +68,8 @@ $input-margin: 10px;
   padding: 5px;
   box-sizing: content-box;
 }
+
+.color-picker-no-field {
+  margin-left: 47%;
+  margin-top: 10px;
+}
diff --git a/src/app/shared/components/color-picker/color-picker.component.ts b/src/app/shared/components/color-picker/color-picker.component.ts
index 2d1df446db..1a4b7dbe73 100644
--- a/src/app/shared/components/color-picker/color-picker.component.ts
+++ b/src/app/shared/components/color-picker/color-picker.component.ts
@@ -31,6 +31,7 @@ export class ColorPickerComponent implements OnChanges, ControlValueAccessor {
   @Input() public colors: Array<Color>;
   @Input() public colorsPerLine: number;
   @Input() public containerWidth = 256;
+  @Input() public hasColorField = true;
   @Output() public change = new EventEmitter();
   @ViewChild(PopoverTriggerDirective) public popoverTrigger: PopoverTriggerDirective;
   public colorWidth: number;
diff --git a/src/app/vm/vm-sidebar/color/vm-color.component.html b/src/app/vm/vm-sidebar/color/vm-color.component.html
index 6ecc3ed094..e9c0e29c09 100644
--- a/src/app/vm/vm-sidebar/color/vm-color.component.html
+++ b/src/app/vm/vm-sidebar/color/vm-color.component.html
@@ -1,17 +1,9 @@
-<md-card class="vm-card">
-  <md-card-header>
-    <md-card-title>
-      <h2 class="md-card-title-text">{{ 'VM_PAGE.VM_DETAILS.COLOR' | translate }}</h2>
-    </md-card-title>
-  </md-card-header>
-  <md-card-content>
-    <cs-color-picker
-      *ngIf="colorList"
-      class="color-picker"
-      [colors]="colorList"
-      [ngModel]="color"
-      [disabled]="colorUpdateInProgress"
-      (change)="changeColor($event)"
-    ></cs-color-picker>
-  </md-card-content>
-</md-card>
+<cs-color-picker
+  *ngIf="colorList"
+  class="color-picker"
+  [colors]="colorList"
+  [ngModel]="color"
+  [disabled]="colorUpdateInProgress"
+  [hasColorField]="false"
+  (change)="changeColor($event)"
+></cs-color-picker>
diff --git a/src/app/vm/vm-sidebar/color/vm-color.component.scss b/src/app/vm/vm-sidebar/color/vm-color.component.scss
index 46ce4d7a77..bf8b54eefa 100644
--- a/src/app/vm/vm-sidebar/color/vm-color.component.scss
+++ b/src/app/vm/vm-sidebar/color/vm-color.component.scss
@@ -1,5 +1,5 @@
 .color-picker {
-  margin: -20px 0;
+  margin-bottom: 14px;
   width: 330px;
 }
 
diff --git a/src/app/vm/vm-sidebar/vm-detail/vm-detail.component.html b/src/app/vm/vm-sidebar/vm-detail/vm-detail.component.html
index d37c995f6c..1d660fda56 100644
--- a/src/app/vm/vm-sidebar/vm-detail/vm-detail.component.html
+++ b/src/app/vm/vm-sidebar/vm-detail/vm-detail.component.html
@@ -1,6 +1,5 @@
 <div *ngIf="vm">
   <div>
-    <cs-vm-color [vm]="vm"></cs-vm-color>
 
     <cs-description
       [description]="description"
diff --git a/src/app/vm/vm-sidebar/vm-sidebar.component.html b/src/app/vm/vm-sidebar/vm-sidebar.component.html
index 8860306ced..c7a89805bc 100644
--- a/src/app/vm/vm-sidebar/vm-sidebar.component.html
+++ b/src/app/vm/vm-sidebar/vm-sidebar.component.html
@@ -1,6 +1,10 @@
 <ng-container *ngIf="entity">
   <div class="title-container">
-    <h4 class="details-header">{{ entity.displayName }}</h4>
+    <div class="title-color-container">
+      <cs-vm-color [vm]="entity"></cs-vm-color>
+    </div>
+    <h4 class="details-header ml-1">
+      {{ entity.displayName }}</h4>
     <cs-vm-actions-sidebar [vm]="entity"></cs-vm-actions-sidebar>
   </div>
   <nav md-tab-nav-bar>
diff --git a/src/app/vm/vm-sidebar/vm-sidebar.component.scss b/src/app/vm/vm-sidebar/vm-sidebar.component.scss
index 6c91e46aef..a6f306043c 100644
--- a/src/app/vm/vm-sidebar/vm-sidebar.component.scss
+++ b/src/app/vm/vm-sidebar/vm-sidebar.component.scss
@@ -17,3 +17,7 @@ h4 {
 :host /deep/ .mat-tab-link {
   min-width: 83px !important;
 }
+
+.title-color-container {
+  width: 35px;
+}
diff --git a/src/app/vm/vm-sidebar/vm-sidebar.component.ts b/src/app/vm/vm-sidebar/vm-sidebar.component.ts
index f7aeaf0b25..1123ac0a74 100644
--- a/src/app/vm/vm-sidebar/vm-sidebar.component.ts
+++ b/src/app/vm/vm-sidebar/vm-sidebar.component.ts
@@ -14,6 +14,7 @@ import { EntityDoesNotExistError } from '../../shared/components/sidebar/entity-
   styleUrls: ['vm-sidebar.component.scss']
 })
 export class VmSidebarComponent extends SidebarComponent<VirtualMachine> {
+
   constructor(
     protected vmService: VmService,
     protected notificationService: NotificationService,