diff --git a/package.json b/package.json
index eff2daf..49b4762 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "farmmaps-lib-app",
-  "version": "2.0.3",
+  "version": "2.0.4",
   "scripts": {
     "ng": "ng",
     "start": "ng serve",
diff --git a/projects/common/src/fm/common-service.module.ts b/projects/common/src/fm/common-service.module.ts
index 57a82a9..982c4dd 100644
--- a/projects/common/src/fm/common-service.module.ts
+++ b/projects/common/src/fm/common-service.module.ts
@@ -35,6 +35,7 @@ import { PackageService } from './services/package.service';
 import { PackagePreloadStrategy } from './services/package-preload-strategy.service';
 import { SenmlService } from './services/senml-service';
 import { DeviceService } from './services/device.service';
+import { GradientService} from './services/gradient.service';
 
 export {
   FolderService,
@@ -61,7 +62,8 @@ export {
   PackageService,
   SenmlService,
   PackagePreloadStrategy,
-  DeviceService
+  DeviceService,
+  GradientService
 };
 
 @NgModule({
diff --git a/projects/common/src/fm/components/gradient/gradient.component.ts b/projects/common/src/fm/components/gradient/gradient.component.ts
index 986f326..314cbb5 100644
--- a/projects/common/src/fm/components/gradient/gradient.component.ts
+++ b/projects/common/src/fm/components/gradient/gradient.component.ts
@@ -1,6 +1,7 @@
 import { Component, Input, OnInit ,OnChanges, SimpleChanges,ChangeDetectorRef} from '@angular/core';
 import { IItem} from '../../models/item'
 import { IGradientstop } from '../../models/gradient';
+import { GradientService } from '../../common-service.module';
 
 
 
@@ -14,23 +15,12 @@ export class GradientComponent implements OnInit,OnChanges {
   @Input() gradientItem:IItem;
   public gradientStyle:any = {};
 
-  constructor(private ref: ChangeDetectorRef) { }
+  constructor(private ref: ChangeDetectorRef,private gradientService:GradientService) { }
 
   getGradientStyle(item:IItem):any {
     if(item.data && item.data.gradient) {
       let gradient = item.data.gradient as IGradientstop[];
-      let gd = '{ "background": "linear-gradient(to right,';
-      for(var i=0;i<gradient.length;i++) {
-        let gs = gradient[i];
-        if(i>0) gd+=",";
-        gd += `rgba(${gs.color.red},${gs.color.green},${gs.color.blue},${gs.color.alpha/255})`;          
-        gd +=` ${gs.relativestop*100}%`
-      }
-      gradient.forEach((gs) => {
-      });
-      gd+=')"}';
-      
-      return JSON.parse(gd);
+      return this.gradientService.getGradientStyle(gradient);
     }
   }
 
@@ -49,5 +39,4 @@ export class GradientComponent implements OnInit,OnChanges {
       }      
     }
   }
-
 }
diff --git a/projects/common/src/fm/components/package-exists/package-exists.directive.ts b/projects/common/src/fm/components/package-exists/package-exists.directive.ts
new file mode 100644
index 0000000..0b9f4aa
--- /dev/null
+++ b/projects/common/src/fm/components/package-exists/package-exists.directive.ts
@@ -0,0 +1,61 @@
+import {AfterViewInit, Directive, Input, OnDestroy, TemplateRef, ViewContainerRef} from '@angular/core';
+import {Subscription} from 'rxjs';
+import {PackageService} from '../../services/package.service';
+import * as appCommonReducer from '../../reducers/app-common.reducer';
+import {Store} from '@ngrx/store';
+
+@Directive({
+  selector: '[fmPackageExists]',
+})
+export class PackageExistsDirective implements OnDestroy, AfterViewInit {
+
+  @Input()
+  set fmPackageExists(packageIdentifier: string) {
+    this.packageIdentifier = packageIdentifier;
+    this.updateView();
+  }
+
+  @Input()
+  set fmPackageExistsThen(thenTemplate: TemplateRef<any>) {
+    this.thenTemplate = thenTemplate;
+    this.updateView();
+  }
+
+  @Input()
+  set fmPackageExistsElse(thenTemplate: TemplateRef<any>) {
+    this.elseTemplate = thenTemplate;
+    this.updateView();
+  }
+
+  private packageIdentifier: string;
+  private thenTemplate: TemplateRef<any>;
+  private elseTemplate: TemplateRef<any>;
+  private packSub: Subscription;
+
+  constructor(private hostTemplateRef: TemplateRef<any>, private viewContainerRef: ViewContainerRef,
+              private store: Store<appCommonReducer.State>, private packageService: PackageService) {
+    this.thenTemplate = hostTemplateRef;
+    this.packSub = this.store.select(appCommonReducer.SelectGetPackages).subscribe((_) => {
+      this.updateView();
+    });
+  }
+
+  ngAfterViewInit() {
+    this.updateView();
+  }
+
+  updateView() {
+    this.viewContainerRef.clear();
+    if (this.packageService.packageExists(this.packageIdentifier)) {
+      this.viewContainerRef.createEmbeddedView(this.thenTemplate);
+    } else if (this.elseTemplate) {
+      this.viewContainerRef.createEmbeddedView(this.elseTemplate);
+    }
+  }
+
+  ngOnDestroy() {
+    if (this.packSub) {
+      this.packSub.unsubscribe();
+    }
+  }
+}