diff --git a/projects/common-map/src/fm-map/components/selected-item-container/selected-item-container.component.ts b/projects/common-map/src/fm-map/components/selected-item-container/selected-item-container.component.ts
index 7dd0d2d..716013f 100644
--- a/projects/common-map/src/fm-map/components/selected-item-container/selected-item-container.component.ts
+++ b/projects/common-map/src/fm-map/components/selected-item-container/selected-item-container.component.ts
@@ -19,12 +19,22 @@ export class SelectedItemContainerComponent {
   @ViewChild(WidgetHostDirective, { static: true }) widgetHost: WidgetHostDirective; 
 
   loadComponent() {
-    var componentFactory: ComponentFactory<AbstractSelectedItemComponent> = this.componentFactoryResolver.resolveComponentFactory(SelectedItemComponent); // default
-    for (var i = 0; i < this.selectedItemComponents.length; i++) {
-      if (this.selectedItemComponents[i]['forItemType'] == this.item.itemType) {
-        componentFactory = this.componentFactoryResolver.resolveComponentFactory(this.selectedItemComponents[i]['constructor'] as any);
+    let componentFactory: ComponentFactory<AbstractSelectedItemComponent> = this.componentFactoryResolver.resolveComponentFactory(SelectedItemComponent); // default
+    let firstComponentWithTypeAndTask = this.selectedItemComponents
+      .find(value => value['forSourceTask'] == this.item.sourceTask &&
+        value['forItemType'] == this.item.itemType
+      );
+
+    if (firstComponentWithTypeAndTask) {
+      componentFactory = this.componentFactoryResolver.resolveComponentFactory(firstComponentWithTypeAndTask['constructor'] as any);
+    } else {
+      let firstComponentWithType = this.selectedItemComponents
+        .find(value => value['forItemType'] == this.item.itemType);
+
+      if (firstComponentWithType) {
+        componentFactory = this.componentFactoryResolver.resolveComponentFactory(firstComponentWithType['constructor'] as any);
       }
-    }    
+    }
     const viewContainerRef = this.widgetHost.viewContainerRef;
     viewContainerRef.clear();
 
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 31b3b12..7d1b3bc 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
@@ -3,11 +3,15 @@
   <div class="card border-0">
     <div class="card-body">
       <div><a href="#" (click)="handleBackToList($event)" i18n>Back</a></div>
-      <h4>Cropfield</h4>
-      <h1>{{item.name}}</h1>
-      <div>{{item.data.cropTypeName}}</div>
-      <div><span>{{item.data.startDate|date}}</span> - <span>{{item.data.endDate|date}}</span> </div>
-      <div class="mt-1"><a href="#" (click)="handleOnEdit(item)" i18n><i class="fa fa-pencil" aria-hidden="true" title="Edit"></i> Edit</a></div>
+      <div class="card menu-card">
+        <h1>Cropfield</h1>
+        <h4>{{item.name}}</h4>
+        <div>{{item.data.cropTypeName}}</div>
+        <div><span>{{item.data.startDate|date}}</span> - <span>{{item.data.endDate|date}}</span> </div>
+        <ul class="p-0 mt-2">
+          <li><a href="#" (click)="handleOnEdit(item)" i18n><i class="fa fa-pencil" aria-hidden="true" title="Edit"></i> Edit</a></li>
+        </ul>
+      </div>
     </div>
     <fm-map-item-list [items]="(items|async)"></fm-map-item-list>
     <fm-map-item-widget-list [item]="item"></fm-map-item-widget-list>
diff --git a/projects/common-map/src/fm-map/components/selected-item-cropfield/selected-item-cropfield.component.scss b/projects/common-map/src/fm-map/components/selected-item-cropfield/selected-item-cropfield.component.scss
index 8c27211..642b42b 100644
--- a/projects/common-map/src/fm-map/components/selected-item-cropfield/selected-item-cropfield.component.scss
+++ b/projects/common-map/src/fm-map/components/selected-item-cropfield/selected-item-cropfield.component.scss
@@ -1,5 +1,7 @@
-@import "../../_theme.scss";
-@import "~bootstrap/scss/bootstrap.scss";
+@import "../../../app/theme.scss";
+@import "node_modules/bootstrap/scss/functions";
+@import "node_modules/bootstrap/scss/variables";
+@import "node_modules/bootstrap/scss/mixins";
 
 .big-icon {
   width: 100%;
@@ -13,6 +15,10 @@
   font-size: 1rem;
 }
 
+.card-body {
+  padding-bottom: unset;
+}
+
 .spacer {
   display: none;
   height: 4rem;
@@ -23,3 +29,11 @@
     display: block;
   }
 }
+
+.menu-card {
+  margin-left: -7px;
+  padding-left: 7px;
+  margin-right: -7px;
+  padding-right: 7px;
+  margin-bottom: 7px;
+}
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 098843c..b2aef5d 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
@@ -3,20 +3,26 @@
   <div class="card border-0">
     <div class="card-body">
       <div class="mb-2"><a href="#" (click)="handleBackToList($event)" i18n>Back</a></div>
-      <h1>{{item.name}}</h1>
-      <div class="legend-container" *ngIf="item?.data.layers;let layers">
-        <div *ngIf="layers.length>1">
-          <select (change)="onLayerChanged($event.target.value)">
-            <option *ngFor="let l of layers;" [value]="l.index">{{l.name}}</option>
-          </select>
-        </div>
-        <fm-map-layer-legend [showTitle]="layers.length==1" [layer]="layers[selectedLayer]" [histogramenabled]="false" histogramunit="ha"></fm-map-layer-legend>
+      <div class="card menu-card">
+        <h1>{{item.name}}</h1>
       </div>
-      <ul class="p-0 mt-2">
-        <!--<li><a href="/api/v1/items/{{item.code}}/file" class="mt-1 mr-1" i18n><i class="fa fa-download" aria-hidden="true" title="Download"></i> Download</a></li>-->
-        <li><a href="#" class="mt-1 mr-1" (click)="handleOnEdit(item)" i18n><i class="fa fa-pencil" aria-hidden="true" title="Edit"></i> Edit</a></li>
-        <li *ngIf="itemTypeService.isLayer(item)"><a href="#" (click)="handleAddAsLayer(item,selectedLayer)" class="mt-1 mr-1" i18n><i class="fa fa-eye" aria-hidden="true" title="Add as layer"></i> Add as overlay</a></li>
-      </ul>      
-    </div>   
+      <div class="legend-container" *ngIf="item?.data.layers;let layers">
+        <div class="card menu-card">
+          <div *ngIf="layers.length>1">
+            <select (change)="onLayerChanged($event.target.value)">
+              <option *ngFor="let l of layers;" [value]="l.index">{{l.name}}</option>
+            </select>
+          </div>
+          <fm-map-layer-legend [showTitle]="layers.length==1" [layer]="layers[selectedLayer]" [histogramenabled]="true"></fm-map-layer-legend>
+        </div>
+      </div>
+      <div class="card menu-card">
+        <ul class="p-0 mt-2">
+          <!--<li><a href="/api/v1/items/{{item.code}}/file" class="mt-1 mr-1" i18n><i class="fa fa-download" aria-hidden="true" title="Download"></i> Download</a></li>-->
+          <li><a href="#" class="mt-1 mr-1" (click)="handleOnEdit(item)" i18n><i class="fa fa-pencil" aria-hidden="true" title="Edit"></i> Edit</a></li>
+          <li *ngIf="itemTypeService.isLayer(item)"><a href="#" (click)="handleAddAsLayer(item,selectedLayer)" class="mt-1 mr-1" i18n><i class="fa fa-eye" aria-hidden="true" title="Add as layer"></i> Add as overlay</a></li>
+        </ul>
+      </div>
+    </div>
   </div>
- </div>
+</div>
diff --git a/projects/common-map/src/fm-map/components/selected-item-shape/selected-item-shape.component.scss b/projects/common-map/src/fm-map/components/selected-item-shape/selected-item-shape.component.scss
index 9b251a3..0697183 100644
--- a/projects/common-map/src/fm-map/components/selected-item-shape/selected-item-shape.component.scss
+++ b/projects/common-map/src/fm-map/components/selected-item-shape/selected-item-shape.component.scss
@@ -39,3 +39,11 @@ li {
     display: block;
   }
 }
+
+.menu-card {
+  margin-left: -7px;
+  padding-left: 7px;
+  margin-right: -7px;
+  padding-right: 7px;
+  margin-bottom: 7px;
+}
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 cf9c138..c92a831 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
@@ -4,6 +4,8 @@
     <div *ngIf="!item.thumbnail" class="big-icon" [style.background-color]="itemTypeService.getColor(item.itemType)">
       <i [ngClass]="itemTypeService.getIcon(item.itemType)"></i>
     </div>
+  </div>
+  <div class="card">
     <div class="card-body">
       <div class="mb-2"><a href="#" (click)="handleBackToList($event)" i18n>Back</a></div>
       <h1 class="card-title">{{item.name}}</h1>
@@ -13,4 +15,4 @@
       <a *ngIf="itemTypeService.isLayer(item)" href="#" (click)="handleAddAsLayer(item)" class="btn btn-outline-secondary" i18n><i class="fa fa-eye" aria-hidden="true" title="Add as layer"></i> Add as overlay</a>
     </div>
   </div>
- </div>
+</div>