diff --git a/src/app/configuration/environments/edit-environment/edit-environment.component.html b/src/app/configuration/environments/edit-environment/edit-environment.component.html
index c6feb4d0..247eeae9 100644
--- a/src/app/configuration/environments/edit-environment/edit-environment.component.html
+++ b/src/app/configuration/environments/edit-environment/edit-environment.component.html
@@ -1,6 +1,9 @@
-<clr-wizard #wizard clrWizardSize="xl" 
-(clrWizardOnFinish)="saveEnvironment()"
-(clrWizardOnCancel)="close()"
+<clr-wizard
+  #wizard
+  clrWizardSize="xl"
+  (clrWizardOnFinish)="saveEnvironment()"
+  (clrWizardOnCancel)="close()"
+  class="customized"
 >
   <clr-wizard-title>Edit Environment</clr-wizard-title>
 
@@ -11,7 +14,7 @@
 
   <clr-wizard-page
     [clrWizardPageNextDisabled]="!environmentDetails.valid"
-    (clrWizardPageNext)="copyEnvironmentDetails()"    
+    (clrWizardPageNext)="copyEnvironmentDetails()"
   >
     <ng-template clrPageTitle>Basic Information</ng-template>
 
@@ -349,35 +352,51 @@ <h4>Basic Information</h4>
         <ng-container *ngIf="!!updateEnv; else newTemplate">
           <tr>
             <td>Display Name</td>
-            <td *ngIf="env.display_name == uneditedEnv.display_name">{{ env.display_name }}</td>
+            <td *ngIf="env.display_name == uneditedEnv.display_name">
+              {{ env.display_name }}
+            </td>
             <td *ngIf="env.display_name != uneditedEnv.display_name">
-              <span class="del-elem arrow-after">{{ uneditedEnv.display_name }}</span > 
-              <span class="add-elem">{{ env.display_name }}</span >     
-            </td>     
+              <span class="del-elem arrow-after">{{
+                uneditedEnv.display_name
+              }}</span>
+              <span class="add-elem">{{ env.display_name }}</span>
+            </td>
           </tr>
           <tr>
             <td>DNS Suffix</td>
-            <td *ngIf="env.dnssuffix == uneditedEnv.dnssuffix">{{ env.dnssuffix }}</td>
+            <td *ngIf="env.dnssuffix == uneditedEnv.dnssuffix">
+              {{ env.dnssuffix }}
+            </td>
             <td *ngIf="env.dnssuffix != uneditedEnv.dnssuffix">
-              <span class="del-elem arrow-after">{{ uneditedEnv.dnssuffix }}</span > 
-              <span class="add-elem">{{ env.dnssuffix }}</span >  
-            </td>          
+              <span class="del-elem arrow-after">{{
+                uneditedEnv.dnssuffix
+              }}</span>
+              <span class="add-elem">{{ env.dnssuffix }}</span>
+            </td>
           </tr>
           <tr>
             <td>Provider</td>
-            <td *ngIf="env.provider == uneditedEnv.provider">{{ env.provider }}</td>
+            <td *ngIf="env.provider == uneditedEnv.provider">
+              {{ env.provider }}
+            </td>
             <td *ngIf="env.provider != uneditedEnv.provider">
-              <span class="del-elem arrow-after">{{ uneditedEnv.provider }}</span > 
-              <span class="add-elem">{{ env.provider }}</span >
+              <span class="del-elem arrow-after">{{
+                uneditedEnv.provider
+              }}</span>
+              <span class="add-elem">{{ env.provider }}</span>
             </td>
           </tr>
           <tr>
             <td>Websocket Endpoint</td>
-            <td *ngIf="env.ws_endpoint == uneditedEnv.ws_endpoint">{{ env.ws_endpoint }}</td>
+            <td *ngIf="env.ws_endpoint == uneditedEnv.ws_endpoint">
+              {{ env.ws_endpoint }}
+            </td>
             <td *ngIf="env.ws_endpoint != uneditedEnv.ws_endpoint">
-              <span class="del-elem arrow-after">{{ uneditedEnv.ws_endpoint }}</span > 
-              <span class="add-elem">{{ env.ws_endpoint }}</span >
-            </td>          
+              <span class="del-elem arrow-after">{{
+                uneditedEnv.ws_endpoint
+              }}</span>
+              <span class="add-elem">{{ env.ws_endpoint }}</span>
+            </td>
           </tr>
         </ng-container>
         <ng-template #newTemplate>
@@ -396,8 +415,8 @@ <h4>Basic Information</h4>
           <tr>
             <td>Websocket Endpoint</td>
             <td>{{ env.ws_endpoint }}</td>
-          </tr>              
-        </ng-template> 
+          </tr>
+        </ng-template>
       </tbody>
     </table>
 
@@ -411,35 +430,56 @@ <h4>Environment Specifics</h4>
       </thead>
       <tbody>
         <ng-container *ngIf="!!updateEnv; else newTemplate">
-        <tr *ngFor="let item of env.environment_specifics | keyvalue">         
-          <!-- view of unedit value -->
-          <td *ngIf="uneditedEnv.environment_specifics.hasOwnProperty(item.key)">{{ item.key }}</td>
-          <td *ngIf="item.value == uneditedEnv.environment_specifics[item.key]">{{ item.value }}</td>  
-          <!-- view of new key -->
-          <ng-container *ngIf="!uneditedEnv.environment_specifics.hasOwnProperty(item.key)">
-            <td class="add-elem">{{ item.key }}</td>
-            <td class="add-elem">{{ item.value }}</td> 
-          </ng-container> 
-          <!-- view of edit value -->
-          <td *ngIf="uneditedEnv.environment_specifics.hasOwnProperty(item.key) && item.value != uneditedEnv.environment_specifics[item.key]">
-            <span class="del-elem arrow-after">{{ uneditedEnv.environment_specifics[item.key] }}</span > 
-            <span class="add-elem">{{ item.value }}</span > 
-          </td>
-        </tr>
-        <!-- view deleted key -->
-        <tr *ngFor="let item of uneditedEnv.environment_specifics | keyvalue">
-          <ng-container *ngIf="!env.environment_specifics.hasOwnProperty(item.key)">
-            <td class="del-elem">{{ item.key }}</td>       
-            <td class="del-elem">{{ item.value }}</td >  
-          </ng-container> 
-        </tr></ng-container>
+          <tr *ngFor="let item of env.environment_specifics | keyvalue">
+            <!-- view of unedit value -->
+            <td
+              *ngIf="uneditedEnv.environment_specifics.hasOwnProperty(item.key)"
+            >
+              {{ item.key }}
+            </td>
+            <td
+              *ngIf="item.value == uneditedEnv.environment_specifics[item.key]"
+            >
+              {{ item.value }}
+            </td>
+            <!-- view of new key -->
+            <ng-container
+              *ngIf="
+                !uneditedEnv.environment_specifics.hasOwnProperty(item.key)
+              "
+            >
+              <td class="add-elem">{{ item.key }}</td>
+              <td class="add-elem">{{ item.value }}</td>
+            </ng-container>
+            <!-- view of edit value -->
+            <td
+              *ngIf="
+                uneditedEnv.environment_specifics.hasOwnProperty(item.key) &&
+                item.value != uneditedEnv.environment_specifics[item.key]
+              "
+            >
+              <span class="del-elem arrow-after">{{
+                uneditedEnv.environment_specifics[item.key]
+              }}</span>
+              <span class="add-elem">{{ item.value }}</span>
+            </td>
+          </tr>
+          <!-- view deleted key -->
+          <tr *ngFor="let item of uneditedEnv.environment_specifics | keyvalue">
+            <ng-container
+              *ngIf="!env.environment_specifics.hasOwnProperty(item.key)"
+            >
+              <td class="del-elem">{{ item.key }}</td>
+              <td class="del-elem">{{ item.value }}</td>
+            </ng-container>
+          </tr></ng-container
+        >
         <ng-template #newTemplate>
           <tr *ngFor="let item of env.environment_specifics | keyvalue">
             <td>{{ item.key }}</td>
-            <td>{{ item.value }}</td>      
-          </tr>                 
-        </ng-template> 
-
+            <td>{{ item.value }}</td>
+          </tr>
+        </ng-template>
       </tbody>
     </table>
 
@@ -454,62 +494,132 @@ <h4>Template Mappings</h4>
       </thead>
       <tbody>
         <ng-container *ngIf="!!updateEnv; else newTemplate">
-          <tr *ngFor="let template of env.template_mapping | keyvalue">         
-          <ng-container *ngIf="!isVMTemplateInUneditedEnv(template.key); else templateCountInUneditedEnv">
-            <td class="add-elem">{{ getVirtualMachineTemplateName(template.key) }}</td>
-            <td class="add-elem">{{ getTemplateCount(template.key) }}</td>          
-          </ng-container>
-         <ng-template #templateCountInUneditedEnv>
-          <td>{{ getVirtualMachineTemplateName(template.key) }}</td>
-          <td *ngIf="getTemplateCount(template.key) == getTemplateUnEditEnvCount(template.key)"> {{ getTemplateCount(template.key) }} </td>
-          <td *ngIf="getTemplateCount(template.key) != getTemplateUnEditEnvCount(template.key)">
-            <span class="del-elem arrow-after">{{ getTemplateUnEditEnvCount(template.key) }}</span > 
-            <span class="add-elem">{{ getTemplateCount(template.key) }}</span >
-          </td>  
-         </ng-template> 
-          <td>
-            <table class="table table-compact">
-              <thead>
-                <tr>
-                  <th>Key</th>
-                  <th>Value</th>
-                </tr>
-              </thead>
-              <tbody>  
-                 <ng-container *ngIf="!isVMTemplateInUneditedEnv(template.key); else templateInUneditedEnv">
-                    <tr *ngFor="let item of template.value | keyvalue">  
-                      <td class="add-elem">{{ item.key }}</td>
-                      <td class="add-elem">{{ item.value }}</td>    
-                    </tr>                  
-                 </ng-container>
-                 <ng-template #templateInUneditedEnv>
-                  <tr *ngFor="let item of template.value | keyvalue">        
-                    <!-- view of unedit value -->
-                    <td *ngIf="uneditedEnv.template_mapping[template.key].hasOwnProperty(item.key)">{{ item.key }}</td>
-                    <td *ngIf="item.value == uneditedEnv.template_mapping[template.key][item.key]">{{ item.value }}</td>  
-                    <!-- view of new key -->
-                    <ng-container *ngIf="!uneditedEnv.template_mapping[template.key].hasOwnProperty(item.key)">
-                      <td class="add-elem">{{ item.key }}</td>
-                      <td class="add-elem">{{ item.value }}</td> 
-                    </ng-container>
-                    <!-- view of edit value -->
-                    <td *ngIf="uneditedEnv.template_mapping[template.key].hasOwnProperty(item.key) && item.value != uneditedEnv.template_mapping[template.key][item.key]">
-                      <span class="del-elem arrow-after">{{ uneditedEnv.template_mapping[template.key][item.key] }}</span > 
-                      <span class="add-elem">{{ item.value }}</span > 
-                    </td>                     
-                  </tr>
-                  <!-- view deleted key -->
-                  <tr *ngFor="let item of uneditedEnv.template_mapping[template.key] | keyvalue">
-                    <ng-container *ngIf="!env.template_mapping[template.key].hasOwnProperty(item.key)">
-                      <td class="del-elem">{{ item.key }}</td>       
-                      <td class="del-elem">{{ item.value }}</td >
-                    </ng-container>                       
+          <tr *ngFor="let template of env.template_mapping | keyvalue">
+            <ng-container
+              *ngIf="
+                !isVMTemplateInUneditedEnv(template.key);
+                else templateCountInUneditedEnv
+              "
+            >
+              <td class="add-elem">
+                {{ getVirtualMachineTemplateName(template.key) }}
+              </td>
+              <td class="add-elem">{{ getTemplateCount(template.key) }}</td>
+            </ng-container>
+            <ng-template #templateCountInUneditedEnv>
+              <td>{{ getVirtualMachineTemplateName(template.key) }}</td>
+              <td
+                *ngIf="
+                  getTemplateCount(template.key) ==
+                  getTemplateUnEditEnvCount(template.key)
+                "
+              >
+                {{ getTemplateCount(template.key) }}
+              </td>
+              <td
+                *ngIf="
+                  getTemplateCount(template.key) !=
+                  getTemplateUnEditEnvCount(template.key)
+                "
+              >
+                <span class="del-elem arrow-after">{{
+                  getTemplateUnEditEnvCount(template.key)
+                }}</span>
+                <span class="add-elem">{{
+                  getTemplateCount(template.key)
+                }}</span>
+              </td>
+            </ng-template>
+            <td>
+              <table class="table table-compact">
+                <thead>
+                  <tr>
+                    <th>Key</th>
+                    <th>Value</th>
                   </tr>
-                 </ng-template>   
-              </tbody>
-            </table>
-          </td>
-        </tr>
+                </thead>
+                <tbody>
+                  <ng-container
+                    *ngIf="
+                      !isVMTemplateInUneditedEnv(template.key);
+                      else templateInUneditedEnv
+                    "
+                  >
+                    <tr *ngFor="let item of template.value | keyvalue">
+                      <td class="add-elem">{{ item.key }}</td>
+                      <td class="add-elem">{{ item.value }}</td>
+                    </tr>
+                  </ng-container>
+                  <ng-template #templateInUneditedEnv>
+                    <tr *ngFor="let item of template.value | keyvalue">
+                      <!-- view of unedit value -->
+                      <td
+                        *ngIf="
+                          uneditedEnv.template_mapping[
+                            template.key
+                          ].hasOwnProperty(item.key)
+                        "
+                      >
+                        {{ item.key }}
+                      </td>
+                      <td
+                        *ngIf="
+                          item.value ==
+                          uneditedEnv.template_mapping[template.key][item.key]
+                        "
+                      >
+                        {{ item.value }}
+                      </td>
+                      <!-- view of new key -->
+                      <ng-container
+                        *ngIf="
+                          !uneditedEnv.template_mapping[
+                            template.key
+                          ].hasOwnProperty(item.key)
+                        "
+                      >
+                        <td class="add-elem">{{ item.key }}</td>
+                        <td class="add-elem">{{ item.value }}</td>
+                      </ng-container>
+                      <!-- view of edit value -->
+                      <td
+                        *ngIf="
+                          uneditedEnv.template_mapping[
+                            template.key
+                          ].hasOwnProperty(item.key) &&
+                          item.value !=
+                            uneditedEnv.template_mapping[template.key][item.key]
+                        "
+                      >
+                        <span class="del-elem arrow-after">{{
+                          uneditedEnv.template_mapping[template.key][item.key]
+                        }}</span>
+                        <span class="add-elem">{{ item.value }}</span>
+                      </td>
+                    </tr>
+                    <!-- view deleted key -->
+                    <tr
+                      *ngFor="
+                        let item of uneditedEnv.template_mapping[template.key]
+                          | keyvalue
+                      "
+                    >
+                      <ng-container
+                        *ngIf="
+                          !env.template_mapping[template.key].hasOwnProperty(
+                            item.key
+                          )
+                        "
+                      >
+                        <td class="del-elem">{{ item.key }}</td>
+                        <td class="del-elem">{{ item.value }}</td>
+                      </ng-container>
+                    </tr>
+                  </ng-template>
+                </tbody>
+              </table>
+            </td>
+          </tr>
         </ng-container>
         <ng-template #newTemplate>
           <tr *ngFor="let template of env.template_mapping | keyvalue">
@@ -527,13 +637,12 @@ <h4>Template Mappings</h4>
                   <tr *ngFor="let item of template.value | keyvalue">
                     <td>{{ item.key }}</td>
                     <td>{{ item.value }}</td>
-                  </tr>  
+                  </tr>
                 </tbody>
               </table>
             </td>
-          </tr>               
-        </ng-template> 
-
+          </tr>
+        </ng-template>
       </tbody>
     </table>
 
@@ -547,35 +656,50 @@ <h4>IP Mappings</h4>
       </thead>
       <tbody>
         <ng-container *ngIf="!!updateEnv; else newTemplate">
-          <tr *ngFor="let item of env.ip_translation_map | keyvalue">         
-          <!-- view of unedit value -->
-          <td *ngIf="uneditedEnv.ip_translation_map.hasOwnProperty(item.key)">{{ item.key }}</td>
-          <td *ngIf="item.value == uneditedEnv.ip_translation_map[item.key]">{{ item.value }}</td>  
-          <!-- view of new key -->
-          <ng-container *ngIf="!uneditedEnv.ip_translation_map.hasOwnProperty(item.key)">
-            <td class="add-elem">{{ item.key }}</td>
-            <td class="add-elem">{{ item.value }}</td> 
-          </ng-container>          
-          <!-- view of edit value -->
-          <td *ngIf="uneditedEnv.ip_translation_map.hasOwnProperty(item.key) && item.value != uneditedEnv.ip_translation_map[item.key]">
-            <span class="del-elem arrow-after">{{ uneditedEnv.ip_translation_map[item.key] }}</span > 
-            <span class="add-elem">{{ item.value }}</span > 
-          </td>
-        </tr>
-        <!-- view deleted key -->
-        <tr *ngFor="let item of uneditedEnv.ip_translation_map | keyvalue">
-          <ng-container *ngIf="!env.ip_translation_map.hasOwnProperty(item.key)">
-            <td class="del-elem">{{ item.key }}</td>       
-            <td class="del-elem">{{ item.value }}</td > 
-          </ng-container>            
-        </tr>
+          <tr *ngFor="let item of env.ip_translation_map | keyvalue">
+            <!-- view of unedit value -->
+            <td *ngIf="uneditedEnv.ip_translation_map.hasOwnProperty(item.key)">
+              {{ item.key }}
+            </td>
+            <td *ngIf="item.value == uneditedEnv.ip_translation_map[item.key]">
+              {{ item.value }}
+            </td>
+            <!-- view of new key -->
+            <ng-container
+              *ngIf="!uneditedEnv.ip_translation_map.hasOwnProperty(item.key)"
+            >
+              <td class="add-elem">{{ item.key }}</td>
+              <td class="add-elem">{{ item.value }}</td>
+            </ng-container>
+            <!-- view of edit value -->
+            <td
+              *ngIf="
+                uneditedEnv.ip_translation_map.hasOwnProperty(item.key) &&
+                item.value != uneditedEnv.ip_translation_map[item.key]
+              "
+            >
+              <span class="del-elem arrow-after">{{
+                uneditedEnv.ip_translation_map[item.key]
+              }}</span>
+              <span class="add-elem">{{ item.value }}</span>
+            </td>
+          </tr>
+          <!-- view deleted key -->
+          <tr *ngFor="let item of uneditedEnv.ip_translation_map | keyvalue">
+            <ng-container
+              *ngIf="!env.ip_translation_map.hasOwnProperty(item.key)"
+            >
+              <td class="del-elem">{{ item.key }}</td>
+              <td class="del-elem">{{ item.value }}</td>
+            </ng-container>
+          </tr>
         </ng-container>
         <ng-template #newTemplate>
           <tr *ngFor="let item of env.ip_translation_map | keyvalue">
             <td>{{ item.key }}</td>
             <td>{{ item.value }}</td>
-          </tr>              
-        </ng-template> 
+          </tr>
+        </ng-template>
       </tbody>
     </table>
   </clr-wizard-page>
diff --git a/src/app/configuration/vmtemplates/edit-vmtemplate/edit-vmtemplate.component.html b/src/app/configuration/vmtemplates/edit-vmtemplate/edit-vmtemplate.component.html
index 9cf52726..267f818d 100644
--- a/src/app/configuration/vmtemplates/edit-vmtemplate/edit-vmtemplate.component.html
+++ b/src/app/configuration/vmtemplates/edit-vmtemplate/edit-vmtemplate.component.html
@@ -1,200 +1,316 @@
-<clr-wizard #wizard clrWizardSize="xl" [clrWizardDisableStepnav]="false">
-    <clr-wizard-title>Edit VM Template</clr-wizard-title>
+<clr-wizard
+  #wizard
+  clrWizardSize="xl"
+  [clrWizardDisableStepnav]="false"
+  class="customized"
+>
+  <clr-wizard-title>Edit VM Template</clr-wizard-title>
 
-    <clr-wizard-button [clrWizardButtonDisabled]="buttonsDisabled" [type]="'cancel'">Cancel</clr-wizard-button>
-    <clr-wizard-button [clrWizardButtonDisabled]="buttonsDisabled" [type]="'previous'">Previous</clr-wizard-button>
-    <clr-wizard-button [clrWizardButtonDisabled]="buttonsDisabled" [type]="'next'">Next</clr-wizard-button>
-    <clr-wizard-button [clrWizardButtonDisabled]="buttonsDisabled" [type]="'finish'">Finish</clr-wizard-button>
+  <clr-wizard-button
+    [clrWizardButtonDisabled]="buttonsDisabled"
+    [type]="'cancel'"
+    >Cancel</clr-wizard-button
+  >
+  <clr-wizard-button
+    [clrWizardButtonDisabled]="buttonsDisabled"
+    [type]="'previous'"
+    >Previous</clr-wizard-button
+  >
+  <clr-wizard-button [clrWizardButtonDisabled]="buttonsDisabled" [type]="'next'"
+    >Next</clr-wizard-button
+  >
+  <clr-wizard-button
+    [clrWizardButtonDisabled]="buttonsDisabled"
+    [type]="'finish'"
+    >Finish</clr-wizard-button
+  >
 
-    <clr-wizard-page [clrWizardPageNextDisabled]="!templateDetails.valid">
-        <ng-template clrPageTitle>Basic Information</ng-template>
+  <clr-wizard-page [clrWizardPageNextDisabled]="!templateDetails.valid">
+    <ng-template clrPageTitle>Basic Information</ng-template>
 
-        <form clrForm [formGroup]="templateDetails">
-            <clr-input-container>
-                <label>Name</label>
-                <input clrInput type="text" placeholder="name" name="name" formControlName="name" required />
-                <clr-control-error *clrIfError="'required'">Template name is required</clr-control-error>
-                <clr-control-error *clrIfError="'minlength'">Template name must be longer than 4
-                    characters</clr-control-error>
-            </clr-input-container>
-            <clr-input-container>
-                <label>Image</label>
-                <input clrInput type="text" placeholder="image" name="image" formControlName="image" required />
-                <clr-control-error *clrIfError="'required'">Image is required</clr-control-error>
-            </clr-input-container>
-        </form>
-    </clr-wizard-page>
-    <clr-wizard-page [clrWizardPageNextDisabled]="!configMap.valid">
-        <ng-template clrPageTitle>Config Map</ng-template>
+    <form clrForm [formGroup]="templateDetails">
+      <clr-input-container>
+        <label>Name</label>
+        <input
+          clrInput
+          type="text"
+          placeholder="name"
+          name="name"
+          formControlName="name"
+          required
+        />
+        <clr-control-error *clrIfError="'required'"
+          >Template name is required</clr-control-error
+        >
+        <clr-control-error *clrIfError="'minlength'"
+          >Template name must be longer than 4 characters</clr-control-error
+        >
+      </clr-input-container>
+      <clr-input-container>
+        <label>Image</label>
+        <input
+          clrInput
+          type="text"
+          placeholder="image"
+          name="image"
+          formControlName="image"
+          required
+        />
+        <clr-control-error *clrIfError="'required'"
+          >Image is required</clr-control-error
+        >
+      </clr-input-container>
+    </form>
+  </clr-wizard-page>
+  <clr-wizard-page [clrWizardPageNextDisabled]="!configMap.valid">
+    <ng-template clrPageTitle>Config Map</ng-template>
 
-        <button class="btn btn-table btn-link" (click)="newConfigMapping()">
-            <cds-icon shape="plus"></cds-icon> New Mapping
-        </button>
-        <table class="table table-compact" [formGroup]="configMap">
-            <thead>
-                <tr>
-                    <th class="left">Key</th>
-                    <th class="left">Value</th>
-                    <th>&nbsp;</th>
-                </tr>
-            </thead>
-            <tbody formArrayName="mappings">
-                <ng-container *ngFor="let m of configMap['controls'].mappings['controls']; let i = index">
-                    <tr formGroupName="{{i}}">
-                        <td>
-                            <clr-input-container class="table-input">
-                                <input clrInput type="text" placeholder="key" formControlName="key" />
-                                <clr-control-error *clrIfError="'required'">Key is required</clr-control-error>
-                            </clr-input-container>
-                        </td>
-                        <td>
-                            <clr-input-container class="table-input">
-                                <input clrInput type="text" placeholder="value" formControlName="value" />
-                                <clr-control-error *clrIfError="'required'">Value is required</clr-control-error>
-                            </clr-input-container>
-                        </td>
-                        <td>
-                            <button class="btn btn-table btn-link" (click)="deleteConfigMapping(i)">Delete</button>
-                        </td>
-                    </tr>
-                </ng-container>
-            </tbody>
-        </table>
-        <ng-container *ngIf="configMap && !configMap.valid">
-            <span class="clr-subtext">All mappings must have key and value filled out. Complete, or remove, any entries
-                that do not.</span>
+    <button class="btn btn-table btn-link" (click)="newConfigMapping()">
+      <cds-icon shape="plus"></cds-icon> New Mapping
+    </button>
+    <table class="table table-compact" [formGroup]="configMap">
+      <thead>
+        <tr>
+          <th class="left">Key</th>
+          <th class="left">Value</th>
+          <th>&nbsp;</th>
+        </tr>
+      </thead>
+      <tbody formArrayName="mappings">
+        <ng-container
+          *ngFor="
+            let m of configMap['controls'].mappings['controls'];
+            let i = index
+          "
+        >
+          <tr formGroupName="{{ i }}">
+            <td>
+              <clr-input-container class="table-input">
+                <input
+                  clrInput
+                  type="text"
+                  placeholder="key"
+                  formControlName="key"
+                />
+                <clr-control-error *clrIfError="'required'"
+                  >Key is required</clr-control-error
+                >
+              </clr-input-container>
+            </td>
+            <td>
+              <clr-input-container class="table-input">
+                <input
+                  clrInput
+                  type="text"
+                  placeholder="value"
+                  formControlName="value"
+                />
+                <clr-control-error *clrIfError="'required'"
+                  >Value is required</clr-control-error
+                >
+              </clr-input-container>
+            </td>
+            <td>
+              <button
+                class="btn btn-table btn-link"
+                (click)="deleteConfigMapping(i)"
+              >
+                Delete
+              </button>
+            </td>
+          </tr>
         </ng-container>
-    </clr-wizard-page>
+      </tbody>
+    </table>
+    <ng-container *ngIf="configMap && !configMap.valid">
+      <span class="clr-subtext"
+        >All mappings must have key and value filled out. Complete, or remove,
+        any entries that do not.</span
+      >
+    </ng-container>
+  </clr-wizard-page>
 
-    <clr-wizard-page>
-        <ng-template clrPageTitle>Services</ng-template>
-        <app-vmtemplate-service-form [cloudConfig]="cloudConfig"></app-vmtemplate-service-form>
-    </clr-wizard-page>
+  <clr-wizard-page>
+    <ng-template clrPageTitle>Services</ng-template>
+    <app-vmtemplate-service-form
+      [cloudConfig]="cloudConfig"
+    ></app-vmtemplate-service-form>
+  </clr-wizard-page>
 
+  <clr-wizard-page
+    (clrWizardPageOnLoad)="copyTemplate()"
+    [clrWizardPagePreventDefaultNext]="true"
+    (clrWizardPageFinish)="saveTemplate()"
+  >
+    <ng-template clrPageTitle>Confirmation</ng-template>
+    <alert #alert></alert>
+    <p>Confirm the following details before finalizing</p>
+    <h4>Basic Information</h4>
+    <table class="table table-compact">
+      <thead>
+        <tr>
+          <th>Option</th>
+          <th>Value</th>
+        </tr>
+      </thead>
+      <tbody>
+        <ng-container *ngIf="!!this.editTemplate; else newTemplate">
+          <tr>
+            <td>Name</td>
+            <td *ngIf="template.name == uneditedTemplate.name">
+              {{ template.name }}
+            </td>
+            <td *ngIf="template.name != uneditedTemplate.name">
+              <span class="del-elem arrow-after">{{
+                uneditedTemplate.name
+              }}</span>
+              <span class="add-elem">{{ template.name }}</span>
+            </td>
+          </tr>
+          <tr>
+            <td>Image</td>
+            <td *ngIf="template.image == uneditedTemplate.image">
+              {{ template.image }}
+            </td>
+            <td *ngIf="template.image != uneditedTemplate.image">
+              <span class="del-elem arrow-after">{{
+                uneditedTemplate.image
+              }}</span>
+              <span class="add-elem">{{ template.image }}</span>
+            </td>
+          </tr>
+        </ng-container>
+        <ng-template #newTemplate>
+          <tr>
+            <td>Name</td>
+            <td>{{ template.name }}</td>
+          </tr>
+          <tr>
+            <td>Image</td>
+            <td>{{ template.image }}</td>
+          </tr>
+        </ng-template>
+      </tbody>
+    </table>
 
-    <clr-wizard-page (clrWizardPageOnLoad)="copyTemplate()" [clrWizardPagePreventDefaultNext]="true"
-        (clrWizardPageFinish)="saveTemplate()">
-        <ng-template clrPageTitle>Confirmation</ng-template>
-        <alert #alert></alert>
-        <p>Confirm the following details before finalizing</p>
-        <h4>Basic Information</h4>
-        <table class="table table-compact">
-            <thead>
-                <tr>
-                    <th>Option</th>
-                    <th>Value</th>
-                </tr>
-            </thead>
-            <tbody>
-                <ng-container *ngIf="!!this.editTemplate; else newTemplate">
-                    <tr>
-                        <td>Name</td>                   
-                            <td *ngIf="template.name == uneditedTemplate.name">{{ template.name }}</td>
-                            <td *ngIf="template.name != uneditedTemplate.name">
-                        <span class="del-elem arrow-after">{{ uneditedTemplate.name }}</span > 
-                        <span class="add-elem">{{ template.name }}</span >     
-                        </td> 
-                    </tr>
-                    <tr>
-                        <td>Image</td>
-                        <td *ngIf="template.image == uneditedTemplate.image">{{ template.image }}</td>
-                        <td *ngIf="template.image != uneditedTemplate.image">
-                        <span class="del-elem arrow-after">{{ uneditedTemplate.image }}</span > 
-                        <span class="add-elem">{{ template.image }}</span >     
-                        </td>  
-                    </tr>
-                </ng-container>
-                    <ng-template #newTemplate>
-                        <tr>
-                            <td>Name</td>
-                            <td>{{ template.name }}</td>
-                        </tr>
-                        <tr>
-                            <td>Image</td>
-                            <td>{{ template.image }}</td>
-                        </tr>                        
-                    </ng-template> 
-               
-            </tbody>
-        </table>
-
-        <h4>Config Map</h4>
-        <table class="table table-compact">
-            <thead>
-                <tr>
-                    <th>Key</th>
-                    <th>Value</th>
-                </tr>
-            </thead>
-            <tbody>
-                <tr *ngFor="let item of template.config_map | keyvalue">
-                    <ng-container *ngIf="item.key === cloudConfigKey && cloudConfig.cloudConfigYaml.length > 0">
-                        <td>{{ item.key }}<br><clr-signpost>
-                                <clr-signpost-content *clrIfOpen>
-                                    <h3>Cloud Config</h3>
-                                    <p>This is the resulting Cloud Config from the previous step. It is put together
-                                        based on the Order in
-                                        which the Services are put in the List</p>
-                                </clr-signpost-content>
-                            </clr-signpost></td>
-                        <td>
-                            <markdown [data]="cloudConfig.cloudConfigYaml | language: 'yaml'"></markdown>
-                        </td>
-                    </ng-container>
-                    <ng-container *ngIf="item.key === vmServiceKey">
-                        <td>{{ item.key }}</td>                        
-                        <td>
-                            <table class="table table-compact">
-                                <th>Name</th>
-                                <th>Port</th>
-                                <th>Tab</th>
-                                <tbody>
-                                    <tr *ngFor="let interface of cloudConfig.vmServices | keyvalue">
-                                        <td>{{ interface.value.name }}</td>                                     
-                                        <td>
-                                            {{ interface.value.hasWebinterface ? interface.value.port : "-" }}
-                                        </td>
-                                        <td>{{ interface.value.hasOwnTab ? interface.value.hasOwnTab : "-" }}</td>
-                                    </tr>
-                                </tbody>
-                            </table>
-                        </td>
-                    </ng-container>
-                    <ng-container *ngIf="!!this.editTemplate; else newTemplate">
-                        <ng-container *ngIf="item.key !== cloudConfigKey && item.key !== vmServiceKey">
-                            <!-- view of unedit value -->
-                            <td *ngIf="uneditedTemplate.config_map.hasOwnProperty(item.key)">{{ item.key }}</td>
-                            <td *ngIf="item.value == uneditedTemplate.config_map[item.key]">{{ item.value }}</td>  
-                            <!-- view of new key  -->
-                            <ng-container *ngIf="!uneditedTemplate.config_map.hasOwnProperty(item.key)">
-                                <td class="add-elem">{{ item.key }}</td>
-                                <td class="add-elem">{{ item.value }}</td> 
-                            </ng-container> 
-                            <!-- view of edit value -->
-                            <td *ngIf="uneditedTemplate.config_map.hasOwnProperty(item.key) && item.value != uneditedTemplate.config_map[item.key]">
-                                <span class="del-elem arrow-after">{{ uneditedTemplate.config_map[item.key] }}</span > 
-                                <span class="add-elem">{{ item.value }}</span > 
-                            </td>                            
-                        </ng-container>
-                    </ng-container>
-                    <ng-template #newTemplate>
-                        <td>{{ item.key }}</td>
-                        <td>{{ item.value }}</td>                        
-                    </ng-template>                         
-                </tr> 
-                <ng-container *ngIf="!!this.editTemplate">
-                    <!-- view deleted key -->
-                    <tr *ngFor="let item of uneditedTemplate.config_map | keyvalue">
-                        <ng-container *ngIf="item.key !== cloudConfigKey && item.key !== vmServiceKey">
-                            <ng-container *ngIf="!template.config_map.hasOwnProperty(item.key)">
-                                <td class="del-elem">{{ item.key }}</td>       
-                                <td class="del-elem">{{ item.value }}</td >  
-                            </ng-container>
-                        </ng-container>
-                    </tr>
-                </ng-container>
-               
-            </tbody>
-        </table>
-    </clr-wizard-page>
-</clr-wizard>
\ No newline at end of file
+    <h4>Config Map</h4>
+    <table class="table table-compact">
+      <thead>
+        <tr>
+          <th>Key</th>
+          <th>Value</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr *ngFor="let item of template.config_map | keyvalue">
+          <ng-container
+            *ngIf="
+              item.key === cloudConfigKey &&
+              cloudConfig.cloudConfigYaml.length > 0
+            "
+          >
+            <td>
+              {{ item.key }}<br /><clr-signpost>
+                <clr-signpost-content *clrIfOpen>
+                  <h3>Cloud Config</h3>
+                  <p>
+                    This is the resulting Cloud Config from the previous step.
+                    It is put together based on the Order in which the Services
+                    are put in the List
+                  </p>
+                </clr-signpost-content>
+              </clr-signpost>
+            </td>
+            <td>
+              <markdown
+                [data]="cloudConfig.cloudConfigYaml | language : 'yaml'"
+              ></markdown>
+            </td>
+          </ng-container>
+          <ng-container *ngIf="item.key === vmServiceKey">
+            <td>{{ item.key }}</td>
+            <td>
+              <table class="table table-compact">
+                <th>Name</th>
+                <th>Port</th>
+                <th>Tab</th>
+                <tbody>
+                  <tr
+                    *ngFor="let interface of cloudConfig.vmServices | keyvalue"
+                  >
+                    <td>{{ interface.value.name }}</td>
+                    <td>
+                      {{
+                        interface.value.hasWebinterface
+                          ? interface.value.port
+                          : "-"
+                      }}
+                    </td>
+                    <td>
+                      {{
+                        interface.value.hasOwnTab
+                          ? interface.value.hasOwnTab
+                          : "-"
+                      }}
+                    </td>
+                  </tr>
+                </tbody>
+              </table>
+            </td>
+          </ng-container>
+          <ng-container *ngIf="!!this.editTemplate; else newTemplate">
+            <ng-container
+              *ngIf="item.key !== cloudConfigKey && item.key !== vmServiceKey"
+            >
+              <!-- view of unedit value -->
+              <td *ngIf="uneditedTemplate.config_map.hasOwnProperty(item.key)">
+                {{ item.key }}
+              </td>
+              <td *ngIf="item.value == uneditedTemplate.config_map[item.key]">
+                {{ item.value }}
+              </td>
+              <!-- view of new key  -->
+              <ng-container
+                *ngIf="!uneditedTemplate.config_map.hasOwnProperty(item.key)"
+              >
+                <td class="add-elem">{{ item.key }}</td>
+                <td class="add-elem">{{ item.value }}</td>
+              </ng-container>
+              <!-- view of edit value -->
+              <td
+                *ngIf="
+                  uneditedTemplate.config_map.hasOwnProperty(item.key) &&
+                  item.value != uneditedTemplate.config_map[item.key]
+                "
+              >
+                <span class="del-elem arrow-after">{{
+                  uneditedTemplate.config_map[item.key]
+                }}</span>
+                <span class="add-elem">{{ item.value }}</span>
+              </td>
+            </ng-container>
+          </ng-container>
+          <ng-template #newTemplate>
+            <td>{{ item.key }}</td>
+            <td>{{ item.value }}</td>
+          </ng-template>
+        </tr>
+        <ng-container *ngIf="!!this.editTemplate">
+          <!-- view deleted key -->
+          <tr *ngFor="let item of uneditedTemplate.config_map | keyvalue">
+            <ng-container
+              *ngIf="item.key !== cloudConfigKey && item.key !== vmServiceKey"
+            >
+              <ng-container
+                *ngIf="!template.config_map.hasOwnProperty(item.key)"
+              >
+                <td class="del-elem">{{ item.key }}</td>
+                <td class="del-elem">{{ item.value }}</td>
+              </ng-container>
+            </ng-container>
+          </tr>
+        </ng-container>
+      </tbody>
+    </table>
+  </clr-wizard-page>
+</clr-wizard>
diff --git a/src/app/course/course-wizard/course-wizard.component.html b/src/app/course/course-wizard/course-wizard.component.html
index 3c139ae0..03ed2746 100644
--- a/src/app/course/course-wizard/course-wizard.component.html
+++ b/src/app/course/course-wizard/course-wizard.component.html
@@ -3,6 +3,7 @@
   clrWizardSize="xl"
   (clrWizardOnFinish)="whenFinish()"
   (clrWizardOnCancel)="doCancel()"
+  class="customized"
 >
   <clr-wizard-title> {{ wizardTitle }} </clr-wizard-title>
 
@@ -40,7 +41,13 @@
     ></vmset>
   </clr-wizard-page>
 
-  <clr-wizard-page (clrWizardPageNext)="saveCourseWizard()" [clrWizardPageNextDisabled]="dragScenarios.length == 0 && editCategories.length == 0" *ngIf="wizardCourse=='edit'">
+  <clr-wizard-page
+    (clrWizardPageNext)="saveCourseWizard()"
+    [clrWizardPageNextDisabled]="
+      dragScenarios.length == 0 && editCategories.length == 0
+    "
+    *ngIf="wizardCourse == 'edit'"
+  >
     <ng-template clrPageTitle>Scenarios</ng-template>
     <ng-container *ngIf="listScenarios">
       <button
@@ -108,7 +115,10 @@
     </ng-container>
   </clr-wizard-page>
 
-  <clr-wizard-page (clrWizardPageNext)="saveCourseWizard()"  *ngIf="wizardCourse=='create'">
+  <clr-wizard-page
+    (clrWizardPageNext)="saveCourseWizard()"
+    *ngIf="wizardCourse == 'create'"
+  >
     <ng-template clrPageTitle>Scenarios</ng-template>
     <ng-container *ngIf="listScenarios">
       <button
@@ -176,7 +186,11 @@
     </ng-container>
   </clr-wizard-page>
 
-  <clr-wizard-page [clrWizardPageNextDisabled]="dragScenarios.length == 0 && editCategories.length == 0">
+  <clr-wizard-page
+    [clrWizardPageNextDisabled]="
+      dragScenarios.length == 0 && editCategories.length == 0
+    "
+  >
     <ng-template clrPageTitle>Dynamic Scenario</ng-template>
     <ng-container>
       <p>
@@ -270,7 +284,10 @@
             <clr-control-error *clrIfError="'required'"
               >Query required.</clr-control-error
             >
-            <clr-control-error *clrIfError="'pattern'">Query shouldn't be empty or have non-latin letter</clr-control-error>
+            <clr-control-error *clrIfError="'pattern'"
+              >Query shouldn't be empty or have non-latin
+              letter</clr-control-error
+            >
           </clr-input-container>
           <div class="col-md-2">
             <button
@@ -296,8 +313,7 @@
       </clr-datagrid>
     </ng-container>
   </clr-wizard-page>
-  <clr-wizard-page 
-    (clrWizardPageOnLoad)="updateFinalPageWizard()" >
+  <clr-wizard-page (clrWizardPageOnLoad)="updateFinalPageWizard()">
     <ng-template clrPageTitle>Finalize</ng-template>
     <p>Confirm the following details before finishing</p>
     <h4>Course</h4>
@@ -311,86 +327,112 @@ <h4>Course</h4>
       <tbody>
         <tr>
           <td>Name</td>
-            <ng-container *ngIf="wizardCourse == 'create'">
-              <td>{{course.name}} </td>
-            </ng-container>
-            <ng-container *ngIf="wizardCourse == 'edit'">            
-              <td *ngIf="selectedCourse.name == editSelectedCourse.name">
-                {{ selectedCourse.name }}
-              </td>
-              <td *ngIf="selectedCourse.name != editSelectedCourse.name">
-                <span class="del-elem">{{
-                  selectedCourse.name
-                }}</span>
-                <cds-icon shape="arrow" direction="right"></cds-icon>
-               <span class="add-elem">{{ editSelectedCourse.name }}</span>
-               </td>
-            </ng-container>  
-          
+          <ng-container *ngIf="wizardCourse == 'create'">
+            <td>{{ course.name }}</td>
+          </ng-container>
+          <ng-container *ngIf="wizardCourse == 'edit'">
+            <td *ngIf="selectedCourse.name == editSelectedCourse.name">
+              {{ selectedCourse.name }}
+            </td>
+            <td *ngIf="selectedCourse.name != editSelectedCourse.name">
+              <span class="del-elem">{{ selectedCourse.name }}</span>
+              <cds-icon shape="arrow" direction="right"></cds-icon>
+              <span class="add-elem">{{ editSelectedCourse.name }}</span>
+            </td>
+          </ng-container>
         </tr>
 
         <tr>
-          <td>Description</td>          
+          <td>Description</td>
           <ng-container *ngIf="wizardCourse == 'create'">
-            <td>{{course.description}} </td>
+            <td>{{ course.description }}</td>
           </ng-container>
-          <ng-container *ngIf="wizardCourse == 'edit'">            
-            <td *ngIf="selectedCourse.description == editSelectedCourse.description">
+          <ng-container *ngIf="wizardCourse == 'edit'">
+            <td
+              *ngIf="
+                selectedCourse.description == editSelectedCourse.description
+              "
+            >
               {{ selectedCourse.description }}
             </td>
-            <td *ngIf="selectedCourse.description != editSelectedCourse.description">
-              <span class="del-elem">{{
-                selectedCourse.description
-              }}</span>
+            <td
+              *ngIf="
+                selectedCourse.description != editSelectedCourse.description
+              "
+            >
+              <span class="del-elem">{{ selectedCourse.description }}</span>
               <cds-icon shape="arrow" direction="right"></cds-icon>
-             <span class="add-elem">{{ editSelectedCourse.description }}</span>
-             </td>
-          </ng-container>  
-         
+              <span class="add-elem">{{ editSelectedCourse.description }}</span>
+            </td>
+          </ng-container>
         </tr>
         <tr>
-          <td>Keepalive Duration</td>          
+          <td>Keepalive Duration</td>
           <ng-container *ngIf="wizardCourse == 'create'">
-            <td>{{course.keepalive_duration}} </td>
+            <td>{{ course.keepalive_duration }}</td>
           </ng-container>
-          <ng-container *ngIf="wizardCourse == 'edit'">            
-            <td *ngIf="selectedCourse.keepalive_duration == editSelectedCourse.keepalive_duration">
+          <ng-container *ngIf="wizardCourse == 'edit'">
+            <td
+              *ngIf="
+                selectedCourse.keepalive_duration ==
+                editSelectedCourse.keepalive_duration
+              "
+            >
               {{ selectedCourse.keepalive_duration }}
             </td>
-            <td *ngIf="selectedCourse.keepalive_duration != editSelectedCourse.keepalive_duration">
+            <td
+              *ngIf="
+                selectedCourse.keepalive_duration !=
+                editSelectedCourse.keepalive_duration
+              "
+            >
               <span class="del-elem">{{
                 selectedCourse.keepalive_duration
               }}</span>
               <cds-icon shape="arrow" direction="right"></cds-icon>
-             <span class="add-elem">{{ editSelectedCourse.keepalive_duration }}</span>
-             </td>
-          </ng-container>  
+              <span class="add-elem">{{
+                editSelectedCourse.keepalive_duration
+              }}</span>
+            </td>
+          </ng-container>
         </tr>
         <tr>
-          <td>Pause Duration</td>          
+          <td>Pause Duration</td>
           <ng-container *ngIf="wizardCourse == 'create'">
-            <td>{{course.pause_duration}} </td>
+            <td>{{ course.pause_duration }}</td>
           </ng-container>
-          <ng-container *ngIf="wizardCourse == 'edit'">            
-            <td *ngIf="selectedCourse.pause_duration == editSelectedCourse.pause_duration">
+          <ng-container *ngIf="wizardCourse == 'edit'">
+            <td
+              *ngIf="
+                selectedCourse.pause_duration ==
+                editSelectedCourse.pause_duration
+              "
+            >
               {{ selectedCourse.pause_duration }}
             </td>
-            <td *ngIf="selectedCourse.pause_duration != editSelectedCourse.pause_duration">
-              <span class="del-elem">{{
-                selectedCourse.pause_duration
-              }}</span>
+            <td
+              *ngIf="
+                selectedCourse.pause_duration !=
+                editSelectedCourse.pause_duration
+              "
+            >
+              <span class="del-elem">{{ selectedCourse.pause_duration }}</span>
               <cds-icon shape="arrow" direction="right"></cds-icon>
-             <span class="add-elem">{{ editSelectedCourse.pause_duration }}</span>
-             </td>
-          </ng-container>  
-        </tr>       
+              <span class="add-elem">{{
+                editSelectedCourse.pause_duration
+              }}</span>
+            </td>
+          </ng-container>
+        </tr>
         <tr>
           <td>Scenario</td>
           <td>
             <ng-container *ngFor="let s of selectedCourse.scenarios">
-              <span class="label" *ngIf="isScenarioInList(s, editSelectedCourse.scenarios)">{{
-                s.name
-              }}</span>
+              <span
+                class="label"
+                *ngIf="isScenarioInList(s, editSelectedCourse.scenarios)"
+                >{{ s.name }}</span
+              >
               <span
                 class="label del-elem"
                 *ngIf="!isScenarioInList(s, editSelectedCourse.scenarios)"
@@ -411,58 +453,66 @@ <h4>Course</h4>
           <td>
             <ng-container *ngIf="wizardCourse == 'create'">
               <span class="label" *ngFor="let categorie of course.categories"
-              >{{ categorie }}
-            </span>
+                >{{ categorie }}
+              </span>
             </ng-container>
             <ng-container *ngIf="wizardCourse == 'edit'">
-              <span class="label" *ngFor="let categorie of selectedCourse.categories"
-              >{{ categorie }}
-            </span>
+              <span
+                class="label"
+                *ngFor="let categorie of selectedCourse.categories"
+                >{{ categorie }}
+              </span>
             </ng-container>
           </td>
         </tr>
       </tbody>
     </table>
     <h4>VM Information</h4>
-      <table class="table table-compact">
-        <thead>
-          <tr>
-            <th>VM Name</th>
-            <th>VM Template</th>
+    <table class="table table-compact">
+      <thead>
+        <tr>
+          <th>VM Name</th>
+          <th>VM Template</th>
+        </tr>
+      </thead>
+      <tbody>
+        <ng-container
+          *ngFor="let i of editSelectedCourse.virtualmachines | keyvalue"
+        >
+          <tr *ngFor="let q of showVM(i.value) | keyvalue">
+            <!-- view of unedit value -->
+            <ng-container *ngIf="getSelectedCourseVM(i.key, q.key) != 0">
+              <td>{{ q.key }}</td>
+            </ng-container>
+            <ng-container *ngIf="getSelectedCourseVM(i.key, q.key) == q.value">
+              <td>{{ q.value }}</td>
+            </ng-container>
+            <!-- view of new key -->
+            <ng-container *ngIf="getSelectedCourseVM(i.key, q.key) === 0">
+              <td class="add-elem">{{ q.key }}</td>
+              <td class="add-elem">{{ q.value }}</td>
+            </ng-container>
+            <!-- view of edit value (delete VM and create VM with the same VM Name) -->
+            <ng-container *ngIf="isEditedVM(i.key, q.key, q.value)">
+              <td class="add-elem">{{ q.value }}</td>
+            </ng-container>
           </tr>
-        </thead>
-        <tbody>
-          <ng-container *ngFor="let i of editSelectedCourse.virtualmachines | keyvalue">          
-              <tr *ngFor="let q of showVM(i.value) | keyvalue">
-                <!-- view of unedit value -->
-                <ng-container *ngIf="getSelectedCourseVM(i.key, q.key) != 0">                  
-                  <td>{{ q.key }}</td> 
-                </ng-container>   
-                <ng-container *ngIf="getSelectedCourseVM(i.key, q.key) == q.value">
-                  <td> {{ q.value }}</td>
-                </ng-container>               
-                <!-- view of new key -->
-                <ng-container *ngIf="getSelectedCourseVM(i.key, q.key) === 0">
-                  <td class="add-elem">{{ q.key }}</td>
-                  <td class="add-elem">{{ q.value }}</td> 
-                </ng-container>   
-                <!-- view of edit value (delete VM and create VM with the same VM Name) -->
-                <ng-container *ngIf="isEditedVM(i.key, q.key, q.value)"> 
-                  <td class=" add-elem"> {{ q.value }}</td>                 
-                </ng-container>                        
-            </tr>  
-         </ng-container>
-          <!-- view deleted key -->
-         <ng-container *ngFor="let i of selectedCourse.virtualmachines | keyvalue">    
+        </ng-container>
+        <!-- view deleted key -->
+        <ng-container
+          *ngFor="let i of selectedCourse.virtualmachines | keyvalue"
+        >
           <tr *ngFor="let q of showVM(i.value) | keyvalue">
-            <ng-container *ngIf="getEditSelectedCourseVM(i.key, q.key) != q.value">
-              <td class="del-elem">{{ q.key }}</td>       
-              <td class="del-elem">{{ q.value }}</td >  
-            </ng-container> 
-          </tr>  
-         </ng-container> 
-        </tbody>
-      </table>
+            <ng-container
+              *ngIf="getEditSelectedCourseVM(i.key, q.key) != q.value"
+            >
+              <td class="del-elem">{{ q.key }}</td>
+              <td class="del-elem">{{ q.value }}</td>
+            </ng-container>
+          </tr>
+        </ng-container>
+      </tbody>
+    </table>
   </clr-wizard-page>
 </clr-wizard>
 <add-scenario
diff --git a/src/app/event/new-scheduled-event/new-scheduled-event.component.html b/src/app/event/new-scheduled-event/new-scheduled-event.component.html
index 33561c21..ef457723 100644
--- a/src/app/event/new-scheduled-event/new-scheduled-event.component.html
+++ b/src/app/event/new-scheduled-event/new-scheduled-event.component.html
@@ -4,6 +4,7 @@
   clrWizardSize="xl"
   (clrWizardOnFinish)="save()"
   (clrWizardOnCancel)="close()"
+  class="customized"
 >
   <clr-wizard-title>New Scheduled Event</clr-wizard-title>
 
@@ -163,7 +164,8 @@
       <ng-template clrPageTitle>Event Times</ng-template>
       <div class="clr-row">
         <div class="clr-col">
-          Start Time: {{ se.start_time ? (se.start_time | date : 'long') : '' }} <br />
+          Start Time:
+          {{ se.start_time ? (se.start_time | date : "long") : "" }} <br />
           <clr-signpost>
             <button class="btn btn-link" clrSignpostTrigger>
               Set Start Time
@@ -189,7 +191,8 @@
 
       <div class="clr-row">
         <div class="clr-col">
-          End Time: {{ se.end_time ? (se.end_time | date : 'long') : '' }} <br />
+          End Time: {{ se.end_time ? (se.end_time | date : "long") : "" }}
+          <br />
           <clr-signpost>
             <button class="btn btn-link" clrSignpostTrigger>
               Set End Time
@@ -271,7 +274,9 @@
       <p>
         <i> All times are in {{ tz }} (browser detected) </i>
       </p>
-      <ng-container *ngIf="se.start_time && se.end_time && se.start_time >= se.end_time">
+      <ng-container
+        *ngIf="se.start_time && se.end_time && se.start_time >= se.end_time"
+      >
         <clr-alert
           [clrAlertSizeSmall]="true"
           [clrAlertType]="'danger'"
diff --git a/src/app/scenario/scenario-wizard/scenario-wizard.component.html b/src/app/scenario/scenario-wizard/scenario-wizard.component.html
index 409fc82d..571b36d2 100644
--- a/src/app/scenario/scenario-wizard/scenario-wizard.component.html
+++ b/src/app/scenario/scenario-wizard/scenario-wizard.component.html
@@ -4,6 +4,7 @@
   clrWizardSize="xl"
   (clrWizardOnFinish)="finishScenario()"
   (clrWizardOnCancel)="doCancel()"
+  class="customized"
 >
   <clr-wizard-title>{{ wizardTitle }} </clr-wizard-title>
 
@@ -485,5 +486,3 @@ <h3 class="modal-title">Delete VM Set</h3>
     </button>
   </div>
 </clr-modal>
-
-
diff --git a/src/styles.scss b/src/styles.scss
index d5fc8d5e..f08dd3a3 100644
--- a/src/styles.scss
+++ b/src/styles.scss
@@ -2,87 +2,95 @@
 @import "../node_modules/@clr/ui/src/main.scss";
 
 .row {
-    @extend .clr-row;
+  @extend .clr-row;
 }
 
 .col {
-    @extend .clr-col;
+  @extend .clr-col;
 }
 
 .col-10 {
-    @extend .clr-col-10;
+  @extend .clr-col-10;
 }
 
 /* added because of the edit step stack view improperly rendering at 55vh */
 .modal .stack-view {
-    height: unset !important;
+  height: unset !important;
 }
 
 /* created compact stack view */
 clr-stack-view.compact {
-    .stack-view .stack-block-label {
-        line-height: 1rem;
-    }
+  .stack-view .stack-block-label {
+    line-height: 1rem;
+  }
 }
 
 .clr-accordion-inner-content {
-    padding: 0rem !important;
+  padding: 0rem !important;
 }
 
 /* Dragula Stuff */
 /* in-flight clone */
 .gu-mirror {
-    position: fixed !important;
-    margin: 0 !important;
-    z-index: 9999 !important;
-    opacity: 0.8;
-    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
-    filter: alpha(opacity=80);
-    pointer-events: none;
-  }
-  /* high-performance display:none; helper */
-  .gu-hide {
-    left: -9999px !important;
-  }
-  /* added to mirrorContainer (default = body) while dragging */
-  .gu-unselectable {
-    -webkit-user-select: none !important;
-    -moz-user-select: none !important;
-    -ms-user-select: none !important;
-    user-select: none !important;
-  }
-  /* added to the source element while its mirror is dragged */
-  .gu-transit {
-    opacity: 0.2;
-    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=20)";
-    filter: alpha(opacity=20);
-  }
+  position: fixed !important;
+  margin: 0 !important;
+  z-index: 9999 !important;
+  opacity: 0.8;
+  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
+  filter: alpha(opacity=80);
+  pointer-events: none;
+}
+/* high-performance display:none; helper */
+.gu-hide {
+  left: -9999px !important;
+}
+/* added to mirrorContainer (default = body) while dragging */
+.gu-unselectable {
+  -webkit-user-select: none !important;
+  -moz-user-select: none !important;
+  -ms-user-select: none !important;
+  user-select: none !important;
+}
+/* added to the source element while its mirror is dragged */
+.gu-transit {
+  opacity: 0.2;
+  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=20)";
+  filter: alpha(opacity=20);
+}
 
-  .table-input {
-    margin-top: 0 !important;
+.table-input {
+  margin-top: 0 !important;
 }
 
 .btn-table {
-    line-height: unset;
-    height: unset;
-    margin: 0 0 0 0;
+  line-height: unset;
+  height: unset;
+  margin: 0 0 0 0;
 }
 
 // .clr_select_disabled > div.datagrid-row-master > div:first-child {
 //     display: none;
 // }
 
-clr-datagrid.clr_disable_selection div.datagrid-row-master > div:first-child  {
-    display: none;
+clr-datagrid.clr_disable_selection div.datagrid-row-master > div:first-child {
+  display: none;
 }
 
 .modal-body-wrapper {
-    width: 100%;
-    margin-bottom: auto;
+  width: 100%;
+  margin-bottom: auto;
 }
 
 /* added because the modal-body is improperly rendering at 70vh,
 overflows the modal and hence displays an unneeded scrollbar */
 .modal-body {
-    min-height: unset !important;
-}
\ No newline at end of file
+  min-height: unset !important;
+}
+
+// let's improve the user experience for hovering on stepnav-links within a wizard
+.clr-wizard.customized .clr-wizard-stepnav-item {
+  &:hover .clr-wizard-stepnav-link {
+    background-color: $clr-global-selection-color;
+    color: $clr-color-action-800;
+  }
+}
diff --git a/src/theme.scss b/src/theme.scss
index ab4efa92..b17f7b40 100644
--- a/src/theme.scss
+++ b/src/theme.scss
@@ -1,21 +1,20 @@
 header {
-    // background-image: linear-gradient(45deg,#64c89f,#97a39e)!important;
-    background-color: #000 !important;
+  // background-image: linear-gradient(45deg,#64c89f,#97a39e)!important;
+  background-color: #000 !important;
 }
 
-
 .header-nav > .nav-link {
-    &:hover {
-        opacity: 1 !important;
-    }
+  &:hover {
+    opacity: 1 !important;
+  }
 
-    &.active {
-        background: rgba(204, 204, 204, 0.25) !important;
-    }
+  &.active {
+    background: rgba(204, 204, 204, 0.25) !important;
+  }
 }
 
 .datagrid-footer {
-    border: 0 !important;
+  border: 0 !important;
 }
 
 $clr-table-borderwidth: 0;
@@ -36,10 +35,6 @@ $clr-table-bgcolor: #fafafa;
 // e65c3c
 // 3fc5f0
 
-
-
-
-
 $clr-color-hue: 195;
 $clr-color-action-50: hsl($clr-color-hue, 87%, 88%);
 $clr-color-action-100: hsl($clr-color-hue, 86%, 84%);
@@ -94,6 +89,11 @@ $clr-color-warning-1000: hsl($clr-warning-hue, 67%, 42%);
 
 $clr-global-borderradius: 0rem;
 
-$clr-font: Montserrat, 'Avenir Next', Arial, sans-serif;
+$clr-font: Montserrat, "Avenir Next", Arial, sans-serif;
+
+$clr-altFont: Barlow, Arial, sans-serif;
+
+$clr-global-selection-color: hsl(201, 29%, 88%) !default;
 
-$clr-altFont: Barlow, Arial, sans-serif; 
\ No newline at end of file
+// The text color on hovering a button of clarity class type btn-link
+$clr-color-action-800: hsl(198, 100%, 24%) !default;