diff --git a/dashboard/sharedComponents/sidebar/sideBar.component.html b/dashboard/sharedComponents/sidebar/sideBar.component.html
index 473332ce..a6a0e84c 100644
--- a/dashboard/sharedComponents/sidebar/sideBar.component.html
+++ b/dashboard/sharedComponents/sidebar/sideBar.component.html
@@ -1,6 +1,11 @@
 <aside id="sidebar_main">
   <a *ngIf= "showHeader" class="sidebar_main_header uk-text-center" [href]="headerUrl"
      [class.uk-disabled]="(!headerUrl)">
+    <img  *ngIf="properties.environment =='beta' || properties.environment =='development'" class="badge"
+          [src]="'assets/common-assets/'+(properties.environment =='beta'?'beta_flag.svg':'prototype_flag.svg')"
+          [alt]="properties.environment">
+
+
     <img *ngIf="headerLogoUrl" class="logo " [src]="headerLogoUrl">
     <div *ngIf="!headerLogoUrl" class="portalLogo logo" ></div>
   </a>
@@ -14,7 +19,11 @@
             [title]="item.title"
             [class.submenu_trigger]="item.items.length > 1">
           <a *ngIf="item.items.length <= 1" [routerLink]="(item.route && !isTheActiveMenuItem(item))?item.route:null" [queryParams]=item.params>
-            <span *ngIf="item.icon" class="menu_icon"><i class="material-icons">{{item.icon}}</i></span>
+            <span *ngIf="item.icon" class="menu_icon">
+              <span  *ngIf="item.icon.indexOf('<svg')!=-1" [innerHTML]="satinizeHTML(item.icon)"></span>
+              <img *ngIf="item.icon.indexOf('<svg') ==-1" [src]="item.icon">
+            </span>
+            <span *ngIf="!item.icon" class="menu_icon"><i class="material-icons">donut_large</i></span>
             <span class="menu_title">{{item.title}}</span>
           </a>
           <ng-template [ngIf]="item.items.length > 1">
diff --git a/dashboard/sharedComponents/sidebar/sideBar.component.ts b/dashboard/sharedComponents/sidebar/sideBar.component.ts
index 0d4fff04..836d175e 100644
--- a/dashboard/sharedComponents/sidebar/sideBar.component.ts
+++ b/dashboard/sharedComponents/sidebar/sideBar.component.ts
@@ -1,6 +1,8 @@
 import { Component, Input, OnInit} from '@angular/core';
 import {MenuItem} from "../../../sharedComponents/menu";
 import {Router} from "@angular/router";
+import {DomSanitizer} from "@angular/platform-browser";
+import {properties} from "../../../../../environments/environment";
 
 @Component({
   selector: 'dashboard-sidebar',
@@ -16,8 +18,10 @@ export class SideBarComponent implements OnInit {
   @Input() activeItem: string = '';
   @Input() activeSubItem: string = '';
   @Input() showSearch = false;
-
-  constructor(private router: Router) {}
+  properties;
+  constructor(private router: Router, private sanitizer: DomSanitizer) {
+    this.properties = properties;
+  }
 
   ngOnInit(): void {}
 
@@ -33,4 +37,8 @@ export class SideBarComponent implements OnInit {
       return MenuItem.isTheActiveMenu(item,this.router.url.split('?')[0])
     }
   }
+
+  satinizeHTML(html){
+    return this.sanitizer.bypassSecurityTrustHtml(html);
+  }
 }