diff --git a/projects/common-map/src/fm-map/components/aol/layer-list/layer-list.component.html b/projects/common-map/src/fm-map/components/aol/layer-list/layer-list.component.html
index 5b86864..f3bc475 100644
--- a/projects/common-map/src/fm-map/components/aol/layer-list/layer-list.component.html
+++ b/projects/common-map/src/fm-map/components/aol/layer-list/layer-list.component.html
@@ -11,8 +11,8 @@
               <a title="Transparency 75%" *ngIf="itemLayer.visible" href="#" class="btn btn-light btn-sm" (click)="handleSetOpacity($event,itemLayer,0.75)">75%</a>
               <a title="No transparency" *ngIf="itemLayer.visible" href="#" class="btn btn-light btn-sm" (click)="handleSetOpacity($event,itemLayer,1)">100%</a>
             </span>
-            <a href="#" title="Zoom to extent" class="btn btn-light btn-sm" (click)="handleZoomToExtent($event,itemLayer)"><i class="fa fa-search-plus" aria-hidden="true"></i></a>
-            <span *ngIf="firstLayer(itemLayer)"><a href="#" title="Toggle legend" class="btn btn-light btn-sm" (click)="itemLayer.legendVisible=toggleLegend($event,itemLayer.legendVisible)"><i class="fa fa-bar-chart" aria-hidden="true"></i></a></span>
+            <a href="#" title="Zoom to extent" class="btn btn-light btn-sm" (click)="handleZoomToExtent($event,itemLayer)"><i class="fal fa-search-plus" aria-hidden="true"></i></a>
+            <span *ngIf="firstLayer(itemLayer)"><a href="#" title="Toggle legend" class="btn btn-light btn-sm" (click)="itemLayer.legendVisible=toggleLegend($event,itemLayer.legendVisible)"><i class="fal fa-bar-chart" aria-hidden="true"></i></a></span>
             <span class="float-right"><a href="#" title="Remove overlay" class="btn btn-light btn-sm" (click)="handleDelete($event,itemLayer)"><i class="fas fa-layer-minus" aria-hidden="true"></i></a></span>
           </div>
           <div *ngIf="itemLayer.legendVisible">
diff --git a/projects/common-map/src/fm-map/components/legend/legend.component.html b/projects/common-map/src/fm-map/components/legend/legend.component.html
index faf31ce..905bd19 100644
--- a/projects/common-map/src/fm-map/components/legend/legend.component.html
+++ b/projects/common-map/src/fm-map/components/legend/legend.component.html
@@ -7,7 +7,7 @@
       </div>
     </td>
     <td>
-      <a i18n-title title="more info"><i class="fa fa-info-circle text-primary" (click)="hideHistogramDetails = !hideHistogramDetails"></i></a>
+      <a i18n-title title="more info"><i class="fal fa-info-circle text-primary" (click)="hideHistogramDetails = !hideHistogramDetails"></i></a>
     </td>
     <td colspan="2">
       <div class="title" *ngIf="histogramenabled">
diff --git a/projects/common-map/src/fm-map/components/map-search/map-search.component.html b/projects/common-map/src/fm-map/components/map-search/map-search.component.html
index 1d287ed..d6f0f88 100644
--- a/projects/common-map/src/fm-map/components/map-search/map-search.component.html
+++ b/projects/common-map/src/fm-map/components/map-search/map-search.component.html
@@ -1,5 +1,5 @@
 <ng-template #rt let-r="result" let-t="term">
-  <i class="fa fa-search" aria-hidden="true" style="width:2rem"></i>
+  <i class="fal fa-search" aria-hidden="true" style="width:2rem"></i>
   <ngb-highlight [result]="formatter(r)" [term]="t"></ngb-highlight> 
 </ng-template>
 
@@ -8,11 +8,11 @@
     <form class="form" (ngSubmit)="handleSearch($event)">
       <div class="input-group">
         <div class="input-group-prepend">
-          <button type="button" class="btn btn-outline-secondary" (click)="handleToggleMenu($event)"><i class="fa fa-bars" aria-hidden="true"></i></button>
+          <button type="button" class="btn btn-outline-secondary" (click)="handleToggleMenu($event)"><i class="fal fa-bars" aria-hidden="true"></i></button>
         </div>
         <input #searchText class="form-control" type="text" (focus)="handleFocus($event)" [ngModel]="searchTextLocal" name="searchTextLocal" (ngModelChange)="handleChange($event)" [ngbTypeahead]="search" [resultTemplate]="rt" [inputFormatter]="formatter" (selectItem)="handleSelect($event)" placeholder="Search" i18n-placeholder />
         <div class="input-group-append">
-          <button type="submit" class="btn btn-outline-secondary" [disabled]="disabled"><i class="fa fa-search"></i></button>
+          <button type="submit" class="btn btn-outline-secondary" [disabled]="disabled"><i class="fal fa-search"></i></button>
           <button type="button" class="clear btn btn-outline-secondary" [disabled]="!clearEnabled" (click)="handleClearClick($event)"><i class="fas fa-times"></i></button>
         </div>
       </div>
diff --git a/projects/common-map/src/fm-map/components/selected-item-cropfield/selected-item-cropfield.component.html b/projects/common-map/src/fm-map/components/selected-item-cropfield/selected-item-cropfield.component.html
index b55e5e7..e69a89a 100644
--- a/projects/common-map/src/fm-map/components/selected-item-cropfield/selected-item-cropfield.component.html
+++ b/projects/common-map/src/fm-map/components/selected-item-cropfield/selected-item-cropfield.component.html
@@ -9,7 +9,7 @@
         <div class="card-text"><span>{{areaInHa(item)| number:'1.2-2'}} ha</span>&nbsp;<span>{{item.data.cropTypeName}}</span></div>
         <div class="card-text"><span>{{item.data.startDate|date}}</span> - <span>{{item.data.endDate|date}}</span> </div>
         <ul class="p-0 mt-2">
-          <li *ngIf="item.isEditable"><a href="#" (click)="handleOnEdit(item)"><i class="fa fa-pencil" aria-hidden="true" i18n-title title="Edit"></i>&nbsp;<span i18n>Edit</span></a></li>
+          <li *ngIf="item.isEditable"><a href="#" (click)="handleOnEdit(item)"><i class="fal fa-pencil" aria-hidden="true" i18n-title title="Edit"></i>&nbsp;<span i18n>Edit</span></a></li>
         </ul>
       </div>
     </div>
diff --git a/projects/common-map/src/fm-map/components/selected-item-geotiff/selected-item-geotiff.component.html b/projects/common-map/src/fm-map/components/selected-item-geotiff/selected-item-geotiff.component.html
index cf88938..5359cd2 100644
--- a/projects/common-map/src/fm-map/components/selected-item-geotiff/selected-item-geotiff.component.html
+++ b/projects/common-map/src/fm-map/components/selected-item-geotiff/selected-item-geotiff.component.html
@@ -20,7 +20,7 @@
       </div>
       <div class="card menu-card">
         <ul class="p-0 mt-2">
-          <li *ngIf="item.isEditable"><a href="#" class="mt-1 mr-1" (click)="handleOnEdit(item)"><i class="fa fa-pencil" aria-hidden="true" i18n-title title="Edit"></i>&nbsp;<span i18n>Edit</span></a></li>
+          <li *ngIf="item.isEditable"><a href="#" class="mt-1 mr-1" (click)="handleOnEdit(item)"><i class="fal fa-pencil" aria-hidden="true" i18n-title title="Edit"></i>&nbsp;<span i18n>Edit</span></a></li>
           <ng-container *ngIf="itemTypeService.isLayer(item)">
             <li *ngIf="!getItemLayer(item,itemLayer.layerIndex)"><a   href="#" (click)="handleAddAsLayer(item,itemLayer.layerIndex)"><i class="fas fa-layer-plus" aria-hidden="true" i18n-title title="Add as layer"></i>&nbsp;<span i18n>Add as overlay</span></a></li>
             <li *ngIf="getItemLayer(item,itemLayer.layerIndex)"><a  href="#" (click)="handleRemoveLayer(item,itemLayer.layerIndex)"><i class="fas fa-layer-minus" aria-hidden="true" i18n-title title="Remove overlay"></i>&nbsp;<span i18n>Remove overlay</span></a></li>
diff --git a/projects/common-map/src/fm-map/components/selected-item-shape/selected-item-shape.component.html b/projects/common-map/src/fm-map/components/selected-item-shape/selected-item-shape.component.html
index f1da0c0..de44b67 100644
--- a/projects/common-map/src/fm-map/components/selected-item-shape/selected-item-shape.component.html
+++ b/projects/common-map/src/fm-map/components/selected-item-shape/selected-item-shape.component.html
@@ -19,7 +19,7 @@
       </div>
       <div class="card menu-card">
         <ul class="p-0 mt-2">
-          <li *ngIf="item.isEditable"><a href="#" class="mt-1 mr-1" (click)="handleOnEdit(item)" ><i class="fa fa-pencil" aria-hidden="true" i18n-title title="Edit"></i>&nbsp;<span i18n>Edit</span></a></li>
+          <li *ngIf="item.isEditable"><a href="#" class="mt-1 mr-1" (click)="handleOnEdit(item)" ><i class="fal fa-pencil" aria-hidden="true" i18n-title title="Edit"></i>&nbsp;<span i18n>Edit</span></a></li>
           <ng-container *ngIf="itemTypeService.isLayer(item)">
             <li *ngIf="!getItemLayer(item,itemLayer.layerIndex)"><a   href="#" (click)="handleAddAsLayer(item,itemLayer.layerIndex)" ><i class="fas fa-layer-olus" aria-hidden="true" i18n-title title="Add as layer"></i>&nbsp;<span i18n>Add as overlay</span></a></li>
             <li *ngIf="getItemLayer(item,itemLayer.layerIndex)"><a  href="#" (click)="handleRemoveLayer(item,itemLayer.layerIndex)" ><i class="fas fa-layer-minus" aria-hidden="true" i18n-title title="Remove overlay"></i>&nbsp;<span i18n>Remove overlay</span></a></li>
diff --git a/projects/common-map/src/fm-map/components/selected-item-temporal/selected-item-temporal.component.html b/projects/common-map/src/fm-map/components/selected-item-temporal/selected-item-temporal.component.html
index 89a5276..7563cfe 100644
--- a/projects/common-map/src/fm-map/components/selected-item-temporal/selected-item-temporal.component.html
+++ b/projects/common-map/src/fm-map/components/selected-item-temporal/selected-item-temporal.component.html
@@ -13,12 +13,12 @@
           <div class="d-flex justify-content-between">
             <div *ngIf="hasPrevious()">
               <button type="button" class="btn btn-link p-0" (click)="handlePreviousTemporal($event)">
-                <i class="fa fa-arrow-circle-left" aria-hidden="true" i18n-title title="Previous"></i>&nbsp;{{ previousDate() | date:'shortDate'}}
+                <i class="fal fa-arrow-circle-left" aria-hidden="true" i18n-title title="Previous"></i>&nbsp;{{ previousDate() | date:'shortDate'}}
               </button>
             </div>
             <div *ngIf="hasNext()">
               <button type="button" class="btn btn-link p-0" (click)="handleNextTemporal($event)">
-                {{ nextDate()| date:'shortDate' }}&nbsp;<i class="fa fa-arrow-circle-right" aria-hidden="true" i18n-title title="Next"></i>
+                {{ nextDate()| date:'shortDate' }}&nbsp;<i class="fal fa-arrow-circle-right" aria-hidden="true" i18n-title title="Next"></i>
               </button>
             </div>
           </div>
@@ -35,12 +35,12 @@
       </div>
       <div class="card menu-card">
         <ul class="p-0 mt-2">
-          <li *ngIf="item.isEditable"><a href="#" class="mt-1 mr-1" (click)="handleOnEdit(item)"><i class="fa fa-pencil" aria-hidden="true" i18n-title title="Edit"></i>&nbsp;<span i18n>Edit</span></a></li>
+          <li *ngIf="item.isEditable"><a href="#" class="mt-1 mr-1" (click)="handleOnEdit(item)"><i class="fal fa-pencil" aria-hidden="true" i18n-title title="Edit"></i>&nbsp;<span i18n>Edit</span></a></li>
           <ng-container *ngIf="itemTypeService.isLayer(item)">
             <li *ngIf="!getItemLayer(item,itemLayer.layerIndex)"><a   href="#" (click)="handleAddAsLayer(item,itemLayer.layerIndex)"><i class="fas fa-layer-plus" aria-hidden="true" i18n-title title="Add as layer"></i>&nbsp;<span i18n>Add as overlay</span></a></li>
             <li *ngIf="getItemLayer(item,itemLayer.layerIndex)"><a  href="#" (click)="handleRemoveLayer(item,itemLayer.layerIndex)"><i class="fas fa-layer-minus" aria-hidden="true" i18n-title title="Remove overlay"></i>&nbsp;<span i18n>Remove overlay</span></a></li>
           </ng-container>
-          <li><a href="#" (click)="handleGoToChart(item)"><i class="fa fa-line-chart" aria-hidden="true" i18m-title title="Show chart"></i>&nbsp;<span i18n>Show chart</span></a></li>
+          <li><a href="#" (click)="handleGoToChart(item)"><i class="fal fa-line-chart" aria-hidden="true" i18m-title title="Show chart"></i>&nbsp;<span i18n>Show chart</span></a></li>
         </ul>
       </div>
     </div>
diff --git a/projects/common-map/src/fm-map/components/selected-item/selected-item.component.html b/projects/common-map/src/fm-map/components/selected-item/selected-item.component.html
index 3e33097..0fa8c06 100644
--- a/projects/common-map/src/fm-map/components/selected-item/selected-item.component.html
+++ b/projects/common-map/src/fm-map/components/selected-item/selected-item.component.html
@@ -11,8 +11,8 @@
       <h1 class="card-title">{{item.name}}</h1>
       <div class="card menu-card">
         <ul class="p-0 mt-2">
-          <li *ngIf="itemTypeService.hasViewer(item)"><a href="#" (click)="handleOnView(item)" class="btn btn-outline-secondary"><i class="fa fa-eye" aria-hidden="true" title="View"></i>&nbsp;<span i18n>View</span></a></li>
-          <li *ngIf="item.isEditable"><a href="#" (click)="handleOnEdit(item)"><i class="fa fa-pencil" aria-hidden="true" title="Edit"></i> <span i18n>Edit</span></a></li>
+          <li *ngIf="itemTypeService.hasViewer(item)"><a href="#" (click)="handleOnView(item)" class="btn btn-outline-secondary"><i class="fal fa-eye" aria-hidden="true" title="View"></i>&nbsp;<span i18n>View</span></a></li>
+          <li *ngIf="item.isEditable"><a href="#" (click)="handleOnEdit(item)"><i class="fal fa-pencil" aria-hidden="true" title="Edit"></i> <span i18n>Edit</span></a></li>
           <ng-container *ngIf="itemTypeService.isLayer(item)">
             <li *ngIf="!getItemLayer(item)"><a href="#" (click)="handleAddAsLayer(item)"><i class="fas fa-layer-plus" aria-hidden="true" i18n-title title="Add as layer"></i>&nbsp;<span i18n>Add as overlay</span></a></li>
             <li  *ngIf="getItemLayer(item)"><a href="#" (click)="handleRemoveLayer(item)"><i class="fas fa-layer-minus" aria-hidden="true" i18n-title title="Remove overlay"></i>&nbsp;<span i18n>Remove overlay</span></a></li>
diff --git a/projects/common-map/src/fm-map/effects/map.effects.ts b/projects/common-map/src/fm-map/effects/map.effects.ts
index a8f69f7..6d57b9a 100644
--- a/projects/common-map/src/fm-map/effects/map.effects.ts
+++ b/projects/common-map/src/fm-map/effects/map.effects.ts
@@ -59,7 +59,7 @@ export class MapEffects {
         image: new style.Icon({
             anchor: [0.5, 1],
             scale: 0.05,
-          src: this.featureIconService$.getIconImageDataUrl("fa fa-file-o")
+          src: this.featureIconService$.getIconImageDataUrl("fal fa-file")
         }),
         stroke: new style.Stroke({
           color: 'red',
diff --git a/projects/common/src/fm/components/app/app.component.html b/projects/common/src/fm/components/app/app.component.html
index dc37080..71c79e2 100644
--- a/projects/common/src/fm/components/app/app.component.html
+++ b/projects/common/src/fm/components/app/app.component.html
@@ -1,7 +1,7 @@
 <div class="app fullscreen" (click)="handleClick($event)" [ngClass]="{'fullscreen' :(fullScreen|async),'pagemode':(isPageMode|async),'appmode':!(isPageMode|async)}">
   <nav class="navbar navbar-light navbar-expand bg-light navigation-clean">
     <div class="header-logo pageonly"><router-outlet name="header-logo"></router-outlet></div> 
-    <button type="button" class="btn btn-outline-secondary apponly" (click)="handleToggleMenu($event)"><i class="fa fa-bars" aria-hidden="true"></i></button>
+    <button type="button" class="btn btn-outline-secondary apponly" (click)="handleToggleMenu($event)"><i class="fal fa-bars" aria-hidden="true"></i></button>
     <router-outlet name="menu" class="ml-4"></router-outlet>
     <div class="collapse navbar-collapse pageonly">      
       <a class="btn btn-primary ml-auto" role="button" [routerLink]="['/map']">
@@ -19,7 +19,7 @@
       <div class="body">
         <div class="d-flex flex-row">
           <div class="mt-2 mb-2 flex-grow-1 logo" (click)="handleHome($event)"><router-outlet name="side-panel-logo"></router-outlet></div>
-          <div class="mt-2 mb-2 ml-2"><button type="button" class="btn btn-outline-secondary" (click)="handleToggleMenu($event)"><i class="fa fa-times" aria-hidden="true"></i></button></div>
+          <div class="mt-2 mb-2 ml-2"><button type="button" class="btn btn-outline-secondary" (click)="handleToggleMenu($event)"><i class="fal fa-times" aria-hidden="true"></i></button></div>
         </div>
         <div class="d-flex flex-column cards"> 
             <router-outlet name="side-panel-menu"></router-outlet>          
diff --git a/projects/common/src/fm/components/resumable-file-upload/resumable-file-upload.component.html b/projects/common/src/fm/components/resumable-file-upload/resumable-file-upload.component.html
index a062114..d329ca4 100644
--- a/projects/common/src/fm/components/resumable-file-upload/resumable-file-upload.component.html
+++ b/projects/common/src/fm/components/resumable-file-upload/resumable-file-upload.component.html
@@ -4,14 +4,14 @@
       <div class="card-header  p-3 bg-primary text-white">
         <span *ngIf="uploadService.isUploading">Uploading files (<span>{{uploadService.totalProgress | number:'1.1-1'}}</span> %)</span>
         <span *ngIf="uploadService.isUploading == false">Uploaded <span>{{uploadService.files.length}}</span> files</span>
-        <span title="Cancel" class="fa fa-times pull-right" (click)="uploadService.close()"></span><span title="Minimize" class="fa fa-chevron-down pull-right" (click)="uploadService.toggleMinimize()" [ngClass]="{'fa-chevron-down': uploadService.isMinimized == false, 'fa-chevron-up':uploadService.isMinimized}"></span>
+        <span title="Cancel" class="fal fa-times float-right" (click)="uploadService.close()"></span><span title="Minimize" class="fal fa-chevron-down float-right" (click)="uploadService.toggleMinimize()" [ngClass]="{'fal-chevron-down': uploadService.isMinimized == false, 'fal-chevron-up':uploadService.isMinimized}"></span>
       </div>
       <div [ngClass]="{'minimized': uploadService.isMinimized }">
         <div class="card-block p-3">
           <ul class="list-unstyled">
             <li *ngFor="let file of uploadService.files" class="upload-file busy" [ngClass]="{'done': file.success,'busy':file.success == false,'error': file.error }">
-              <div *ngIf="file.success == false"><span class="file-name" [attr.title]="file?.fileName">{{file.fileName}}</span><span class="fa fa-times" title="Cancel" (click)="uploadService.cancelFile(file)"></span><span class="fa fa-check"></span></div>
-              <div *ngIf="file.success"><a href="#" (click)="handleUploadedFileClick($event,file)" class="file-name" [attr.title]="file?.fileName">{{file.fileName}}</a><span class="fa fa-check"></span></div>
+              <div *ngIf="file.success == false"><span class="file-name" [attr.title]="file?.fileName">{{file.fileName}}</span><span class="fal fa-times" title="Cancel" (click)="uploadService.cancelFile(file)"></span><span class="fal fa-check"></span></div>
+              <div *ngIf="file.success"><a href="#" (click)="handleUploadedFileClick($event,file)" class="file-name" [attr.title]="file?.fileName">{{file.fileName}}</a><span class="fal fa-check"></span></div>
               <div class="progress-container"><div class="progress-bar" [style.width]="file.progress+'%'"></div></div>
               <div class="errormessage">{{file.errorMessage}}</div>
             </li>
diff --git a/projects/common/src/fm/components/side-panel/side-panel.component.html b/projects/common/src/fm/components/side-panel/side-panel.component.html
index 7f6f944..9cbfbf8 100644
--- a/projects/common/src/fm/components/side-panel/side-panel.component.html
+++ b/projects/common/src/fm/components/side-panel/side-panel.component.html
@@ -1,6 +1,6 @@
 <div class="side-panel hidden" [ngClass]="{'hidden':!visible,'collapsed':collapsed,'resizeable':(resizeable && mobile),'resizing':resizing,'left':left}" [ngStyle]="{'top':top}">
   <div *ngIf="collapsable" class="arrow rounded-right p-2" (click)="handleToggleClick($event)">
-    <i class="fa fa-chevron-left" aria-hidden="true"></i>
+    <i class="fal fa-chevron-left" aria-hidden="true"></i>
   </div>
   <div  draggable="true" class="resizegrip" (dragstart)="handleStartGripDrag($event)" (touchstart)="handleStartGripDrag($event)" (dragend)="handleEndGripDrag()" (touchend)="handleEndGripDrag()" (drag)="handleGripDrag($event)" (touchmove)="handleGripDrag($event)">
     <div></div>
diff --git a/projects/common/src/fm/components/tag-input/tag-input.component.html b/projects/common/src/fm/components/tag-input/tag-input.component.html
index f5a7795..99ce84b 100644
--- a/projects/common/src/fm/components/tag-input/tag-input.component.html
+++ b/projects/common/src/fm/components/tag-input/tag-input.component.html
@@ -1,3 +1,3 @@
-<div class="tags">
-  <span class="tag rounded bg-primary text-white" *ngFor="let tag of tags;"><span>{{tag}}</span> <i (click)="handleDeleteTag(tag)" class="fa fa-times" aria-hidden="true"></i></span><input type="text" #taginput (blur)="handleAddTag($event)" (keyup)="handleCheckAddTag($event)" [(ngModel)]="tag" [ngbTypeahead]="findTag" (selectItem)="handleSelect($event)" placeholder="New tag"/>
-</div>
+<div class="tags">
+  <span class="tag rounded bg-primary text-white" *ngFor="let tag of tags;"><span>{{tag}}</span> <i (click)="handleDeleteTag(tag)" class="fal fa-times" aria-hidden="true"></i></span><input type="text" #taginput (blur)="handleAddTag($event)" (keyup)="handleCheckAddTag($event)" [(ngModel)]="tag" [ngbTypeahead]="findTag" (selectItem)="handleSelect($event)" placeholder="New tag"/>
+</div>
diff --git a/projects/common/src/fm/components/timespan/timespan.component.html b/projects/common/src/fm/components/timespan/timespan.component.html
index babee09..4255ac0 100644
--- a/projects/common/src/fm/components/timespan/timespan.component.html
+++ b/projects/common/src/fm/components/timespan/timespan.component.html
@@ -1,34 +1,34 @@
-<div class="timespan p-1" (window:resize)="handleResize($event)">
-   <div (click)="handleClick()">{{caption}}</div>
-   <ng-template #popoverContent let-caption="popoverCaption">{{caption}}</ng-template>
-   <div class="popover-anchor" [style.left.px] = "startPopoverLeft" [ngbPopover]="popoverContent" #popoverStart="ngbPopover">&nbsp;</div>
-   <div class="popover-anchor" [style.left.px] = "endPopoverLeft" [ngbPopover]="popoverContent" #popoverEnd="ngbPopover">&nbsp;</div>
-   <div class="collapsed clearfix" [ngClass]="{'collapsed':collapsed}">
-     <!-- <div class="clearfix">
-        <select class="form-control float-right" [value]="unitScale">
-            <option value="0">Millisecond</option>
-            <option value="1">Second</option>
-            <option value="2">Minute</option>
-            <option value="3">Hour</option>
-            <option value="4">Day</option>
-            <option value="5">Week</option>
-            <option value="6">Month</option>
-            <option value="6">Quarter</option>
-            <option value="8">Year</option>
-          </select>      
-     </div> -->
-     <div class="timeline" (window:mousemove)="handleMouseMove($event)" (window:touchmove)="handleMouseMove($event)" (window:mouseup)="handleMouseUp($event)" (window:touchend)="handleMouseUp($event)" (wheel)="handleMouseWheel($event)" [style.height.px]="height">
-        <canvas #timeLine (mousedown)="handleViewPanMouseDown($event)" (touchstart)="handleViewPanMouseDown($event)" (mousemove)="handleCanvasMouseMove($event)" (mouseleave)="handleCanvasMouseLeave($event)">
-        </canvas>
-        <div class="control-container"  [style.margin-left.px]="marginLeft" [style.height.px]="lineHeight" >
-            <div class="leftGrip rounded-left" (mousedown)="handleLeftGripMouseDown($event)" (touchstart)="handleLeftGripMouseDown($event)"   (mouseenter)="handleLeftGripMouseEnter($event)" (mouseleave)="handleLeftGripMouseLeave($event)"><i class="fa fa-ellipsis-v" aria-hidden="true"></i></div>
-            <div class="range" [style.width.px]="rangeWidth" (mousedown)="handleRangeGripMouseDown($event)" (touchstart)="handleRangeGripMouseDown($event)" (mouseenter)="handleRangeGripMouseEnter($event)"></div>
-            <div class="rightGrip rounded-right" (mousedown)="handleRightGripMouseDown($event)" (touchstart)="handleRightGripMouseDown($event)" (mouseenter)="handleRightGripMouseEnter($event)" (mouseleave)="handleRightGripMouseLeave($event)"><i class="fa fa-ellipsis-v" aria-hidden="true"></i></div>
-        </div>
-     </div>
-     <!-- <div>
-         <div class="btn btn-primary" (click)="handleZoomIn()">+</div>
-         <div class="btn btn-primary" (click)="handleZoomOut()">-</div>
-     </div> -->
-   </div>
-</div>
+<div class="timespan p-1" (window:resize)="handleResize($event)">
+   <div (click)="handleClick()">{{caption}}</div>
+   <ng-template #popoverContent let-caption="popoverCaption">{{caption}}</ng-template>
+   <div class="popover-anchor" [style.left.px] = "startPopoverLeft" [ngbPopover]="popoverContent" #popoverStart="ngbPopover">&nbsp;</div>
+   <div class="popover-anchor" [style.left.px] = "endPopoverLeft" [ngbPopover]="popoverContent" #popoverEnd="ngbPopover">&nbsp;</div>
+   <div class="collapsed clearfix" [ngClass]="{'collapsed':collapsed}">
+     <!-- <div class="clearfix">
+        <select class="form-control float-right" [value]="unitScale">
+            <option value="0">Millisecond</option>
+            <option value="1">Second</option>
+            <option value="2">Minute</option>
+            <option value="3">Hour</option>
+            <option value="4">Day</option>
+            <option value="5">Week</option>
+            <option value="6">Month</option>
+            <option value="6">Quarter</option>
+            <option value="8">Year</option>
+          </select>      
+     </div> -->
+     <div class="timeline" (window:mousemove)="handleMouseMove($event)" (window:touchmove)="handleMouseMove($event)" (window:mouseup)="handleMouseUp($event)" (window:touchend)="handleMouseUp($event)" (wheel)="handleMouseWheel($event)" [style.height.px]="height">
+        <canvas #timeLine (mousedown)="handleViewPanMouseDown($event)" (touchstart)="handleViewPanMouseDown($event)" (mousemove)="handleCanvasMouseMove($event)" (mouseleave)="handleCanvasMouseLeave($event)">
+        </canvas>
+        <div class="control-container"  [style.margin-left.px]="marginLeft" [style.height.px]="lineHeight" >
+            <div class="leftGrip rounded-left" (mousedown)="handleLeftGripMouseDown($event)" (touchstart)="handleLeftGripMouseDown($event)"   (mouseenter)="handleLeftGripMouseEnter($event)" (mouseleave)="handleLeftGripMouseLeave($event)"><i class="fal fa-ellipsis-v" aria-hidden="true"></i></div>
+            <div class="range" [style.width.px]="rangeWidth" (mousedown)="handleRangeGripMouseDown($event)" (touchstart)="handleRangeGripMouseDown($event)" (mouseenter)="handleRangeGripMouseEnter($event)"></div>
+            <div class="rightGrip rounded-right" (mousedown)="handleRightGripMouseDown($event)" (touchstart)="handleRightGripMouseDown($event)" (mouseenter)="handleRightGripMouseEnter($event)" (mouseleave)="handleRightGripMouseLeave($event)"><i class="fal fa-ellipsis-v" aria-hidden="true"></i></div>
+        </div>
+     </div>
+     <!-- <div>
+         <div class="btn btn-primary" (click)="handleZoomIn()">+</div>
+         <div class="btn btn-primary" (click)="handleZoomOut()">-</div>
+     </div> -->
+   </div>
+</div>
diff --git a/projects/common/src/fm/services/itemtype.service.ts b/projects/common/src/fm/services/itemtype.service.ts
index 598bb96..e4d1616 100644
--- a/projects/common/src/fm/services/itemtype.service.ts
+++ b/projects/common/src/fm/services/itemtype.service.ts
@@ -14,7 +14,7 @@ export class ItemTypeService {
     }
 
      getIcon(itemType: string) {
-       var icon = "fa fa-file-o";
+       var icon = "fal fa-file";
        if (this.itemTypes[itemType]) icon = this.itemTypes[itemType].icon;
        return icon;
      }
diff --git a/src/app/menu/menu.component.html b/src/app/menu/menu.component.html
index bdf6379..376b781 100644
--- a/src/app/menu/menu.component.html
+++ b/src/app/menu/menu.component.html
@@ -13,7 +13,7 @@
     </div>    
     <div class="card menu-card">
       <ul class="navbar-nav">
-        <li class="nav-item py-0" *fm-haspackage="'vnd.farmmaps.package.agriroute'"><a [routerLinkActive]="['active']" [routerLink]="['/agrirouter']" class="nav-link"><span><i class="fa fa-plug" aria-hidden="true"></i> <span i18n>agrirouter</span></span></a></li>
+        <li class="nav-item py-0" *fm-haspackage="'vnd.farmmaps.package.agriroute'"><a [routerLinkActive]="['active']" [routerLink]="['/agrirouter']" class="nav-link"><span><i class="fal fa-plug" aria-hidden="true"></i> <span i18n>agrirouter</span></span></a></li>
       </ul>
     </div> 
 </div>