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 853f96ed..851e5eb4 100644
--- a/src/app/configuration/environments/edit-environment/edit-environment.component.html
+++ b/src/app/configuration/environments/edit-environment/edit-environment.component.html
@@ -196,7 +196,7 @@
           formGroupName="{{ it }}"
         >
           <clr-stack-label>
-            {{ t["controls"].template.value }}
+            {{ getVirtualMachineTemplateName(t["controls"].template.value) }}
           </clr-stack-label>
           <clr-stack-content>
             <button
@@ -215,16 +215,16 @@
           <clr-stack-block>
             <clr-stack-label> Limit </clr-stack-label>
             <clr-stack-content>
-                <clr-input-container class="no-margin-top">
-                    <input
-                    clrInput
-                    type="number"
-                    placeholder="Max. count e.g. 10"
-                    name="count"
-                    width="48"
-                    formControlName="count"
-                  />
-                </clr-input-container>
+              <clr-input-container class="no-margin-top">
+                <input
+                  clrInput
+                  type="number"
+                  placeholder="Max. count e.g. 10"
+                  name="count"
+                  width="48"
+                  formControlName="count"
+                />
+              </clr-input-container>
             </clr-stack-content>
           </clr-stack-block>
           <clr-stack-block
@@ -389,7 +389,7 @@ <h4>Template Mappings</h4>
       </thead>
       <tbody>
         <tr *ngFor="let template of env.template_mapping | keyvalue">
-          <td>{{ template.key }}</td>
+          <td>{{ getVirtualMachineTemplateName(template.key) }}</td>
           <td>{{ getTeplateCount(template.key) }}</td>
           <td>
             <table class="table table-compact">
diff --git a/src/app/configuration/environments/edit-environment/edit-environment.component.ts b/src/app/configuration/environments/edit-environment/edit-environment.component.ts
index ad646c16..1c7f2867 100644
--- a/src/app/configuration/environments/edit-environment/edit-environment.component.ts
+++ b/src/app/configuration/environments/edit-environment/edit-environment.component.ts
@@ -1,4 +1,12 @@
-import { Component, OnInit, ViewChild, Input, OnChanges, Output, EventEmitter } from '@angular/core';
+import {
+  Component,
+  OnInit,
+  ViewChild,
+  Input,
+  OnChanges,
+  Output,
+  EventEmitter,
+} from '@angular/core';
 import { ClrWizard } from '@clr/angular';
 import { FormGroup, FormBuilder, Validators, FormArray } from '@angular/forms';
 import { Environment } from 'src/app/data/environment';
@@ -11,7 +19,7 @@ import { RbacService } from 'src/app/data/rbac.service';
 @Component({
   selector: 'edit-environment-wizard',
   templateUrl: './edit-environment.component.html',
-  styleUrls: ['./edit-environment.component.scss']
+  styleUrls: ['./edit-environment.component.scss'],
 })
 export class EditEnvironmentComponent implements OnInit, OnChanges {
   public environmentDetails: FormGroup;
@@ -28,23 +36,53 @@ export class EditEnvironmentComponent implements OnInit, OnChanges {
   public event: EventEmitter<boolean> = new EventEmitter(false);
 
   public env: Environment = new Environment();
+  public virtualMachineTemplateList: Map<string, string> = new Map();
 
   constructor(
     private _fb: FormBuilder,
     private envService: EnvironmentService,
     private vmTemplateService: VmtemplateService,
-    private rbacService: RbacService,
-  ) { }
-
+    private rbacService: RbacService
+  ) {
+    this.rbacService
+      .Grants('virtualmachinetemplates', 'list')
+      .then((allowVMTemplateList: boolean) => {
+        if (!allowVMTemplateList) {
+          console.log('Disallow');
+          return;
+        }
+        vmTemplateService
+          .list()
+          .subscribe((list: VMTemplate[]) =>
+            list.forEach((v) =>
+              this.virtualMachineTemplateList.set(v.id, v.name)
+            )
+          );
+      });
+  }
 
-  @ViewChild("wizard", { static: true }) wizard: ClrWizard;
+  @ViewChild('wizard', { static: true }) wizard: ClrWizard;
 
   public buildEnvironmentDetails(edit: boolean = false) {
     this.environmentDetails = this._fb.group({
-      display_name: [edit ? this.updateEnv.display_name : '', [Validators.required, Validators.minLength(4)]],
+      display_name: [
+        edit ? this.updateEnv.display_name : '',
+        [Validators.required, Validators.minLength(4)],
+      ],
       dnssuffix: [edit ? this.updateEnv.dnssuffix : ''],
-      provider: [edit ? this.updateEnv.provider : '', [Validators.required, Validators.minLength(2)]],
-      ws_endpoint: [edit ? this.updateEnv.ws_endpoint : '', [Validators.required, Validators.pattern(/^(([a-zA-Z0-9]|[a-zA-Z0-9][a-zA-Z0-9\-]*[a-zA-Z0-9])\.)*([A-Za-z0-9]|[A-Za-z0-9][A-Za-z0-9\-]*[A-Za-z0-9])$/)]],
+      provider: [
+        edit ? this.updateEnv.provider : '',
+        [Validators.required, Validators.minLength(2)],
+      ],
+      ws_endpoint: [
+        edit ? this.updateEnv.ws_endpoint : '',
+        [
+          Validators.required,
+          Validators.pattern(
+            /^(([a-zA-Z0-9]|[a-zA-Z0-9][a-zA-Z0-9\-]*[a-zA-Z0-9])\.)*([A-Za-z0-9]|[A-Za-z0-9][A-Za-z0-9\-]*[A-Za-z0-9])$/
+          ),
+        ],
+      ],
     });
   }
 
@@ -53,16 +91,16 @@ export class EditEnvironmentComponent implements OnInit, OnChanges {
       params: this._fb.array([
         this._fb.group({
           key: ['', Validators.required],
-          value: ['', Validators.required]
-        })
-      ])
+          value: ['', Validators.required],
+        }),
+      ]),
     });
   }
 
-  public buildVMTSelection(){
+  public buildVMTSelection() {
     this.templateSelection = this._fb.group({
       vmt_select: ['', [Validators.required]],
-    })
+    });
   }
 
   public buildIpMapping() {
@@ -70,27 +108,30 @@ export class EditEnvironmentComponent implements OnInit, OnChanges {
       mappings: this._fb.array([
         this._fb.group({
           from: ['', Validators.required],
-          to: ['', Validators.required]
-        })
-      ])
+          to: ['', Validators.required],
+        }),
+      ]),
     });
   }
 
   public buildTemplateMapping() {
     this.templateMappings = this._fb.group({
-      templates: this._fb.array([])
+      templates: this._fb.array([]),
     });
   }
 
   public prepareEnvironmentSpecifics() {
     // prepare differs from 'build' in that we are filling out a form with
-    // values from an existing environment 
+    // values from an existing environment
     var envKeys = Object.keys(this.updateEnv.environment_specifics);
     this.environmentSpecifics = this._fb.group({
-      params: this._fb.array([])
+      params: this._fb.array([]),
     });
     for (var i = 0; i < envKeys.length; i++) {
-      this.newEnvironmentSpecific(envKeys[i], this.updateEnv.environment_specifics[envKeys[i]]);
+      this.newEnvironmentSpecific(
+        envKeys[i],
+        this.updateEnv.environment_specifics[envKeys[i]]
+      );
     }
   }
 
@@ -99,20 +140,28 @@ export class EditEnvironmentComponent implements OnInit, OnChanges {
     // values from an existing environment
     var templateKeys = Object.keys(this.updateEnv.template_mapping);
     this.templateMappings = this._fb.group({
-      templates: this._fb.array([])
-    })
+      templates: this._fb.array([]),
+    });
 
     for (var i = 0; i < templateKeys.length; i++) {
       var newGroup = this._fb.group({
         template: [templateKeys[i], Validators.required],
-        count: [this.updateEnv.count_capacity[templateKeys[i]], [Validators.required, Validators.pattern(/-?\d+/)]],
-        params: this._fb.array([])
+        count: [
+          this.updateEnv.count_capacity[templateKeys[i]],
+          [Validators.required, Validators.pattern(/-?\d+/)],
+        ],
+        params: this._fb.array([]),
       });
-      var paramKeys = Object.keys(this.updateEnv.template_mapping[templateKeys[i]]);
+      var paramKeys = Object.keys(
+        this.updateEnv.template_mapping[templateKeys[i]]
+      );
       for (var j = 0; j < paramKeys.length; j++) {
         var newParam = this._fb.group({
           key: [paramKeys[j], Validators.required],
-          value: [this.updateEnv.template_mapping[templateKeys[i]][paramKeys[j]], Validators.required] // yuck
+          value: [
+            this.updateEnv.template_mapping[templateKeys[i]][paramKeys[j]],
+            Validators.required,
+          ], // yuck
         });
         (newGroup.get('params') as FormArray).push(newParam);
       }
@@ -125,10 +174,13 @@ export class EditEnvironmentComponent implements OnInit, OnChanges {
     // values from an existing environment
     var ipKeys = Object.keys(this.updateEnv.ip_translation_map);
     this.ipMapping = this._fb.group({
-      mappings: this._fb.array([])
+      mappings: this._fb.array([]),
     });
     for (var i = 0; i < ipKeys.length; i++) {
-      this.newIpMapping(ipKeys[i], this.updateEnv.ip_translation_map[ipKeys[i]]);
+      this.newIpMapping(
+        ipKeys[i],
+        this.updateEnv.ip_translation_map[ipKeys[i]]
+      );
     }
   }
 
@@ -158,41 +210,51 @@ export class EditEnvironmentComponent implements OnInit, OnChanges {
 
   ngOnInit() {
     this._build();
-    this.rbacService.Grants("virtualmachinetemplates", "list").then((listVmTemplates: boolean) => {
-      if(listVmTemplates) {
-        this.refreshVMTemplates();
-      }
-    })
+    this.rbacService
+      .Grants('virtualmachinetemplates', 'list')
+      .then((listVmTemplates: boolean) => {
+        if (listVmTemplates) {
+          this.refreshVMTemplates();
+        }
+      });
   }
 
-  private refreshVMTemplates(){
-    this.vmTemplateService.list()
-    .subscribe(
-      (vm: VMTemplate[]) => this.VMTemplates = vm
-    )
+  private refreshVMTemplates() {
+    this.vmTemplateService
+      .list()
+      .subscribe((vm: VMTemplate[]) => (this.VMTemplates = vm));
   }
 
-  public getValidVMTemplates(){
+  public getValidVMTemplates() {
     let vmtList = this.VMTemplates;
-    let selectedVMTs = []
-    for (var i = 0; i < (this.templateMappings.get('templates') as FormArray).length; i++) { // i = index of template
-      selectedVMTs.push(this.templateMappings.get(['templates', i, 'template']).value);
+    let selectedVMTs = [];
+    for (
+      var i = 0;
+      i < (this.templateMappings.get('templates') as FormArray).length;
+      i++
+    ) {
+      // i = index of template
+      selectedVMTs.push(
+        this.templateMappings.get(['templates', i, 'template']).value
+      );
     }
 
-    vmtList = vmtList.filter(obj => {return !selectedVMTs.includes(obj.id)});
+    vmtList = vmtList.filter((obj) => {
+      return !selectedVMTs.includes(obj.id);
+    });
 
     let selectionValid = false;
 
-    vmtList.forEach(vmt => {
-      if(vmt.id == this.templateSelection.get('vmt_select').value){
-          selectionValid = true;
+    vmtList.forEach((vmt) => {
+      if (vmt.id == this.templateSelection.get('vmt_select').value) {
+        selectionValid = true;
       }
     });
 
-    if(!selectionValid && vmtList.length > 0){
+    if (!selectionValid && vmtList.length > 0) {
       this.templateSelection.get('vmt_select').setValue(vmtList[0]?.id);
     }
-    
+
     return vmtList;
   }
 
@@ -201,7 +263,7 @@ export class EditEnvironmentComponent implements OnInit, OnChanges {
     this.buildEnvironmentSpecifics();
     this.buildIpMapping();
     this.buildTemplateMapping();
-    this.buildVMTSelection()
+    this.buildVMTSelection();
   }
 
   private _prepare() {
@@ -232,7 +294,7 @@ export class EditEnvironmentComponent implements OnInit, OnChanges {
   public newIpMapping(from: string = '', to: string = '') {
     var newGroup = this._fb.group({
       from: [from, Validators.required],
-      to: [to, Validators.required]
+      to: [to, Validators.required],
     });
     (this.ipMapping.get('mappings') as FormArray).push(newGroup);
   }
@@ -243,9 +305,17 @@ export class EditEnvironmentComponent implements OnInit, OnChanges {
 
   public copyIpMapping() {
     this.env.ip_translation_map = {};
-    for (var i = 0; i < (this.ipMapping.get('mappings') as FormArray).length; i++) {
-      var from = (this.ipMapping.get(['mappings', i]) as FormGroup).get('from').value;
-      var to = (this.ipMapping.get(['mappings', i]) as FormGroup).get('to').value;
+    for (
+      var i = 0;
+      i < (this.ipMapping.get('mappings') as FormArray).length;
+      i++
+    ) {
+      var from = (this.ipMapping.get(['mappings', i]) as FormGroup).get(
+        'from'
+      ).value;
+      var to = (this.ipMapping.get(['mappings', i]) as FormGroup).get(
+        'to'
+      ).value;
       this.env.ip_translation_map[from] = to;
     }
   }
@@ -253,7 +323,7 @@ export class EditEnvironmentComponent implements OnInit, OnChanges {
   public newEnvironmentSpecific(key: string = '', value: string = '') {
     var newGroup = this._fb.group({
       key: [key, Validators.required],
-      value: [value, Validators.required]
+      value: [value, Validators.required],
     });
     (this.environmentSpecifics.get('params') as FormArray).push(newGroup);
   }
@@ -265,22 +335,33 @@ export class EditEnvironmentComponent implements OnInit, OnChanges {
   public copyEnvironmentSpecifics() {
     // replace existing kv map
     this.env.environment_specifics = {};
-    for (var i = 0; i < (this.environmentSpecifics.get('params') as FormArray).length; i++) {
-      var key = (this.environmentSpecifics.get(['params', i]) as FormGroup).get('key').value;
-      var value = (this.environmentSpecifics.get(['params', i]) as FormGroup).get('value').value;
+    for (
+      var i = 0;
+      i < (this.environmentSpecifics.get('params') as FormArray).length;
+      i++
+    ) {
+      var key = (this.environmentSpecifics.get(['params', i]) as FormGroup).get(
+        'key'
+      ).value;
+      var value = (
+        this.environmentSpecifics.get(['params', i]) as FormGroup
+      ).get('value').value;
       this.env.environment_specifics[key] = value;
     }
   }
 
-  public hasTemplateSelection(){
-    return this.templateSelection.get('vmt_select').value != ""; 
+  public hasTemplateSelection() {
+    return this.templateSelection.get('vmt_select').value != '';
   }
 
   public newTemplateMapping() {
     var newGroup = this._fb.group({
-      template: [this.templateSelection.get('vmt_select').value, Validators.required],
+      template: [
+        this.templateSelection.get('vmt_select').value,
+        Validators.required,
+      ],
       count: [0, [Validators.required, Validators.pattern(/-?\d+/)]],
-      params: this._fb.array([])
+      params: this._fb.array([]),
     });
     (this.templateMappings.get('templates') as FormArray).push(newGroup);
   }
@@ -289,24 +370,44 @@ export class EditEnvironmentComponent implements OnInit, OnChanges {
     (this.templateMappings.get('templates') as FormArray).removeAt(index);
   }
 
-  public getTeplateCount(vmt: string){
-    if(!this.env.count_capacity){
+  public getTeplateCount(vmt: string) {
+    if (!this.env.count_capacity) {
       return 0;
     }
-    return this.env.count_capacity[vmt] ?? 0
+    return this.env.count_capacity[vmt] ?? 0;
   }
 
   public copyTemplateMapping() {
     this.env.template_mapping = {};
     this.env.count_capacity = {};
     // naïve solution, using nested for loop. gross, but gets the job done.
-    for (var i = 0; i < (this.templateMappings.get('templates') as FormArray).length; i++) { // i = index of template
-      var template = this.templateMappings.get(['templates', i, 'template']).value;
+    for (
+      var i = 0;
+      i < (this.templateMappings.get('templates') as FormArray).length;
+      i++
+    ) {
+      // i = index of template
+      var template = this.templateMappings.get([
+        'templates',
+        i,
+        'template',
+      ]).value;
       var count = this.templateMappings.get(['templates', i, 'count']).value;
       var templateMap = {};
-      for (var j = 0; j < (this.templateMappings.get(['templates', i, 'params']) as FormArray).length; j++) { // j = index of param
-        var key = this.templateMappings.get(['templates', i, 'params', j]).get('key').value;
-        var value = this.templateMappings.get(['templates', i, 'params', j]).get('value').value;
+      for (
+        var j = 0;
+        j <
+        (this.templateMappings.get(['templates', i, 'params']) as FormArray)
+          .length;
+        j++
+      ) {
+        // j = index of param
+        var key = this.templateMappings
+          .get(['templates', i, 'params', j])
+          .get('key').value;
+        var value = this.templateMappings
+          .get(['templates', i, 'params', j])
+          .get('value').value;
         templateMap[key] = value;
       }
       this.env.template_mapping[template] = templateMap;
@@ -317,32 +418,41 @@ export class EditEnvironmentComponent implements OnInit, OnChanges {
   public newTemplateParameter(templateIndex: number) {
     var newParam = this._fb.group({
       key: ['', Validators.required],
-      value: ['', Validators.required]
+      value: ['', Validators.required],
     });
-    ((this.templateMappings.get('templates') as FormArray).at(templateIndex).get('params') as FormArray).push(newParam);
+    (
+      (this.templateMappings.get('templates') as FormArray)
+        .at(templateIndex)
+        .get('params') as FormArray
+    ).push(newParam);
   }
 
-  public deleteTemplateParameter(templateIndex: number, parameterIndex: number) {
-    ((this.templateMappings.get("templates") as FormArray).at(templateIndex).get("params") as FormArray).removeAt(parameterIndex);
+  public deleteTemplateParameter(
+    templateIndex: number,
+    parameterIndex: number
+  ) {
+    (
+      (this.templateMappings.get('templates') as FormArray)
+        .at(templateIndex)
+        .get('params') as FormArray
+    ).removeAt(parameterIndex);
   }
 
   public saveEnvironment() {
     if (this.updateEnv) {
       this.env.name = this.updateEnv.name;
-      this.envService.update(this.env)
-        .subscribe(
-          (s: ServerResponse) => {
-            this.event.next(true);
-          }
-        )
+      this.envService.update(this.env).subscribe((s: ServerResponse) => {
+        this.event.next(true);
+      });
     } else {
-      this.envService.add(this.env)
-        .subscribe(
-          (s: ServerResponse) => {
-            this.event.next(true);
-          }
-        )
+      this.envService.add(this.env).subscribe((s: ServerResponse) => {
+        this.event.next(true);
+      });
       this.env = new Environment();
     }
   }
+
+  getVirtualMachineTemplateName(template: any) {
+    return this.virtualMachineTemplateList.get(template as string) ?? template;
+  }
 }
diff --git a/src/app/configuration/environments/environment-detail/environment-detail.component.html b/src/app/configuration/environments/environment-detail/environment-detail.component.html
index 13a48ebf..01a5bde8 100644
--- a/src/app/configuration/environments/environment-detail/environment-detail.component.html
+++ b/src/app/configuration/environments/environment-detail/environment-detail.component.html
@@ -1,74 +1,99 @@
 <div [clrLoading]="loading">
-    <clr-stack-view *ngIf="currentEnvironment; else noContent">
+  <clr-stack-view *ngIf="currentEnvironment; else noContent">
+    <clr-stack-block>
+      <clr-stack-label>Basic Information</clr-stack-label>
+      <clr-stack-block>
+        <clr-stack-label class="stackbox-header">Option</clr-stack-label>
+        <clr-stack-content class="stackbox-header">Value</clr-stack-content>
+      </clr-stack-block>
+      <clr-stack-block>
+        <clr-stack-label>DNS Suffix</clr-stack-label>
+        <clr-stack-content>{{
+          currentEnvironment.dnssuffix
+        }}</clr-stack-content>
+      </clr-stack-block>
+      <clr-stack-block>
+        <clr-stack-label>Websocket Endpoint</clr-stack-label>
+        <clr-stack-content>{{
+          currentEnvironment.ws_endpoint
+        }}</clr-stack-content>
+      </clr-stack-block>
+    </clr-stack-block>
+    <clr-stack-block>
+      <clr-stack-label>Environment Specifics</clr-stack-label>
+      <clr-stack-block>
+        <clr-stack-label class="stackbox-header">Key</clr-stack-label>
+        <clr-stack-content class="stackbox-header">Value</clr-stack-content>
+      </clr-stack-block>
+      <clr-stack-block
+        *ngFor="let item of currentEnvironment.environment_specifics | keyvalue"
+      >
+        <clr-stack-label>{{ item.key }}</clr-stack-label>
+        <clr-stack-content>{{ item.value }}</clr-stack-content>
+      </clr-stack-block>
+    </clr-stack-block>
+    <clr-stack-block [(clrSbExpanded)]="templateMappingsExpanded">
+      <clr-stack-label>Template Mappings</clr-stack-label>
+      <clr-stack-content>
+        <button
+          class="btn btn-sm btn-link btn-link-stack"
+          (click)="expandAll($event)"
+        >
+          Expand All
+        </button>
+        <button
+          class="btn btn-sm btn-link btn-link-stack"
+          (click)="collapseAll($event)"
+        >
+          Collapse All
+        </button>
+      </clr-stack-content>
+      <clr-stack-block
+        *ngFor="
+          let template of currentEnvironment.template_mapping | keyvalue;
+          let i = index
+        "
+        [(clrSbExpanded)]="stackBoxExpanded[i]"
+      >
+        <clr-stack-label>{{
+          getVirtualMachineTemplateName(template.key)
+        }}</clr-stack-label>
+        (Limit: {{ getLimit(template.key) }})
         <clr-stack-block>
-            <clr-stack-label>Basic Information</clr-stack-label>
-            <clr-stack-block>
-                <clr-stack-label class="stackbox-header">Option</clr-stack-label>
-                <clr-stack-content class="stackbox-header">Value</clr-stack-content>
-            </clr-stack-block>
-            <clr-stack-block>
-                <clr-stack-label>DNS Suffix</clr-stack-label>
-                <clr-stack-content>{{ currentEnvironment.dnssuffix }}</clr-stack-content>
-            </clr-stack-block>
-            <clr-stack-block>
-                <clr-stack-label>Websocket Endpoint</clr-stack-label>
-                <clr-stack-content>{{ currentEnvironment.ws_endpoint }}</clr-stack-content>
-            </clr-stack-block>
+          <clr-stack-label class="stackbox-header">Key</clr-stack-label>
+          <clr-stack-content class="stackbox-header">Value</clr-stack-content>
         </clr-stack-block>
-        <clr-stack-block>
-            <clr-stack-label>Environment Specifics</clr-stack-label>
-            <clr-stack-block>
-                <clr-stack-label class="stackbox-header">Key</clr-stack-label>
-                <clr-stack-content class="stackbox-header">Value</clr-stack-content>
-            </clr-stack-block>
-            <clr-stack-block *ngFor="let item of currentEnvironment.environment_specifics | keyvalue">
-                <clr-stack-label>{{ item.key }}</clr-stack-label>
-                <clr-stack-content>{{ item.value }}</clr-stack-content>
-            </clr-stack-block>
-        </clr-stack-block>
-        <clr-stack-block [(clrSbExpanded)]="templateMappingsExpanded">
-            <clr-stack-label>Template Mappings</clr-stack-label>
-            <clr-stack-content>
-                <button class="btn btn-sm btn-link btn-link-stack" (click)="expandAll($event)">
-                    Expand All
-                </button>
-                <button class="btn btn-sm btn-link btn-link-stack" (click)="collapseAll($event)">
-                    Collapse All
-                </button>
-            </clr-stack-content>
-            <clr-stack-block *ngFor="let template of currentEnvironment.template_mapping | keyvalue; let i = index" [(clrSbExpanded)]="stackBoxExpanded[i]">
-                <clr-stack-label>{{ template.key }}</clr-stack-label>
-                (Limit: {{ getLimit(template.key) }})
-                <clr-stack-block>
-                    <clr-stack-label class="stackbox-header">Key</clr-stack-label>
-                    <clr-stack-content class="stackbox-header">Value</clr-stack-content>
-                </clr-stack-block>
-                <clr-stack-block *ngFor="let item of template.value | keyvalue">
-                    <clr-stack-label>{{ item.key }}</clr-stack-label>
-                    <clr-stack-content>{{ item.value }}</clr-stack-content>
-                </clr-stack-block>
-            </clr-stack-block>
-        </clr-stack-block>
-        <clr-stack-block *ngIf="currentEnvironment.ip_translation_map && !isEmpty(currentEnvironment.ip_translation_map)">
-            <clr-stack-label>IP Mappings</clr-stack-label>
-            <clr-stack-block>
-                <clr-stack-label class="stackbox-header">From</clr-stack-label>
-                <clr-stack-content class="stackbox-header">To</clr-stack-content>
-            </clr-stack-block>
-            <clr-stack-block *ngFor="let item of currentEnvironment.ip_translation_map | keyvalue">
-                <clr-stack-label>{{ item.key }}</clr-stack-label>
-                <clr-stack-content>{{ item.value }}</clr-stack-content>
-            </clr-stack-block>
+        <clr-stack-block *ngFor="let item of template.value | keyvalue">
+          <clr-stack-label>{{ item.key }}</clr-stack-label>
+          <clr-stack-content>{{ item.value }}</clr-stack-content>
         </clr-stack-block>
-    </clr-stack-view>
+      </clr-stack-block>
+    </clr-stack-block>
+    <clr-stack-block
+      *ngIf="
+        currentEnvironment.ip_translation_map &&
+        !isEmpty(currentEnvironment.ip_translation_map)
+      "
+    >
+      <clr-stack-label>IP Mappings</clr-stack-label>
+      <clr-stack-block>
+        <clr-stack-label class="stackbox-header">From</clr-stack-label>
+        <clr-stack-content class="stackbox-header">To</clr-stack-content>
+      </clr-stack-block>
+      <clr-stack-block
+        *ngFor="let item of currentEnvironment.ip_translation_map | keyvalue"
+      >
+        <clr-stack-label>{{ item.key }}</clr-stack-label>
+        <clr-stack-content>{{ item.value }}</clr-stack-content>
+      </clr-stack-block>
+    </clr-stack-block>
+  </clr-stack-view>
 
-    <ng-template #noContent>
-        <clr-alert [clrAlertType]="'warning'" [clrAlertClosable]="false">
-            <clr-alert-item>
-                <span class="alert-text">
-                    No content available!
-                </span>
-            </clr-alert-item>
-        </clr-alert>
-    </ng-template>
-</div>
\ No newline at end of file
+  <ng-template #noContent>
+    <clr-alert [clrAlertType]="'warning'" [clrAlertClosable]="false">
+      <clr-alert-item>
+        <span class="alert-text"> No content available! </span>
+      </clr-alert-item>
+    </clr-alert>
+  </ng-template>
+</div>
diff --git a/src/app/configuration/environments/environment-detail/environment-detail.component.ts b/src/app/configuration/environments/environment-detail/environment-detail.component.ts
index ab765bc9..79aae051 100644
--- a/src/app/configuration/environments/environment-detail/environment-detail.component.ts
+++ b/src/app/configuration/environments/environment-detail/environment-detail.component.ts
@@ -1,11 +1,14 @@
 import { Component, OnInit, Input } from '@angular/core';
 import { Environment } from 'src/app/data/environment';
 import { EnvironmentService } from 'src/app/data/environment.service';
+import { RbacService } from 'src/app/data/rbac.service';
+import { VMTemplate } from 'src/app/data/vmtemplate';
+import { VmtemplateService } from 'src/app/data/vmtemplate.service';
 
 @Component({
   selector: 'environment-detail',
   templateUrl: './environment-detail.component.html',
-  styleUrls: ['./environment-detail.component.scss']
+  styleUrls: ['./environment-detail.component.scss'],
 })
 export class EnvironmentDetailComponent implements OnInit {
   @Input() id: string;
@@ -15,15 +18,39 @@ export class EnvironmentDetailComponent implements OnInit {
   public templateMappingsExpanded: boolean = false;
   public currentEnvironment: Environment;
 
-  constructor(public environmentService: EnvironmentService) {}
+  public virtualMachineTemplateList: Map<string, string> = new Map();
+
+  constructor(
+    public environmentService: EnvironmentService,
+    public rbacService: RbacService,
+    public vmTemplateService: VmtemplateService
+  ) {
+    this.rbacService
+      .Grants('virtualmachinetemplates', 'list')
+      .then((allowVMTemplateList: boolean) => {
+        if (!allowVMTemplateList) {
+          console.log("Disallow")
+          return;
+        }
+        vmTemplateService
+          .list()
+          .subscribe((list: VMTemplate[]) =>
+            list.forEach((v) =>
+              this.virtualMachineTemplateList.set(v.id, v.name)
+            )
+          );
+      });
+  }
 
   ngOnInit() {
     this.loading = true;
     // Make the server call
     this.environmentService.get(this.id).subscribe((e: Environment) => {
       // initialize two-way binding variables for stack block state
-      const templateMappingsCount: number = Object.keys(e.template_mapping).length;
-      for(let i = 0; i < templateMappingsCount; ++i) {
+      const templateMappingsCount: number = Object.keys(
+        e.template_mapping
+      ).length;
+      for (let i = 0; i < templateMappingsCount; ++i) {
         this.stackBoxExpanded.push(false);
       }
 
@@ -35,7 +62,7 @@ export class EnvironmentDetailComponent implements OnInit {
   expandAll(event: Event) {
     event.stopPropagation();
     this.templateMappingsExpanded = true;
-    for(let i = 0; i < this.stackBoxExpanded.length; ++i) {
+    for (let i = 0; i < this.stackBoxExpanded.length; ++i) {
       this.stackBoxExpanded[i] = true;
     }
   }
@@ -43,7 +70,7 @@ export class EnvironmentDetailComponent implements OnInit {
   collapseAll(event: Event) {
     event.stopPropagation();
     this.templateMappingsExpanded = false;
-    for(let i = 0; i < this.stackBoxExpanded.length; ++i) {
+    for (let i = 0; i < this.stackBoxExpanded.length; ++i) {
       this.stackBoxExpanded[i] = false;
     }
   }
@@ -52,10 +79,14 @@ export class EnvironmentDetailComponent implements OnInit {
     return Object.keys(object).length == 0;
   }
 
-  getLimit(vmt: string){
-    if(!this.currentEnvironment.count_capacity){
-      return 0
+  getLimit(vmt: string) {
+    if (!this.currentEnvironment.count_capacity) {
+      return 0;
     }
     return this.currentEnvironment.count_capacity[vmt] ?? 0;
   }
+
+  getVirtualMachineTemplateName(template: any) {
+    return this.virtualMachineTemplateList.get(template as string) ?? template;
+  }
 }