diff --git a/client/src/app/instance/search/detail/dynamic-content/dynamic-components/display-detail-renderer.component.html b/client/src/app/instance/search/detail/components/display-detail-renderer.component.html
similarity index 100%
rename from client/src/app/instance/search/detail/dynamic-content/dynamic-components/display-detail-renderer.component.html
rename to client/src/app/instance/search/detail/components/display-detail-renderer.component.html
diff --git a/client/src/app/instance/search/detail/dynamic-content/dynamic-components/display-detail-renderer.component.ts b/client/src/app/instance/search/detail/components/display-detail-renderer.component.ts
similarity index 100%
rename from client/src/app/instance/search/detail/dynamic-content/dynamic-components/display-detail-renderer.component.ts
rename to client/src/app/instance/search/detail/components/display-detail-renderer.component.ts
diff --git a/client/src/app/instance/search/detail/components/index.ts b/client/src/app/instance/search/detail/components/index.ts
index 0dcbf58e5e5f4fdf19dfc73aac0bc8039807a695..1e9bb66c42390e737639655f1e615dda018b26fb 100644
--- a/client/src/app/instance/search/detail/components/index.ts
+++ b/client/src/app/instance/search/detail/components/index.ts
@@ -8,7 +8,9 @@
  */
 
 import { DetailContentComponent } from './detail-content.component';
+import { DisplayDetailRendererComponent } from './display-detail-renderer.component';
 
 export const dummiesComponents = [
-    DetailContentComponent
+    DetailContentComponent,
+    DisplayDetailRendererComponent
 ];
diff --git a/client/src/app/instance/search/detail/dynamic-content/dynamic-components/renderer/index.ts b/client/src/app/instance/search/detail/components/renderer/index.ts
similarity index 100%
rename from client/src/app/instance/search/detail/dynamic-content/dynamic-components/renderer/index.ts
rename to client/src/app/instance/search/detail/components/renderer/index.ts
diff --git a/client/src/app/instance/search/detail/dynamic-content/dynamic-components/display-image.component.html b/client/src/app/instance/search/detail/dynamic-content/dynamic-components/display-image.component.html
new file mode 100644
index 0000000000000000000000000000000000000000..e443e91312cb410532f42a627bbcd2c8a2dcbbbe
--- /dev/null
+++ b/client/src/app/instance/search/detail/dynamic-content/dynamic-components/display-image.component.html
@@ -0,0 +1 @@
+<img [src]="getValue()" alt="Not found" [ngStyle]="getStyle()">
\ No newline at end of file
diff --git a/client/src/app/instance/search/detail/dynamic-content/dynamic-components/display-image.component.ts b/client/src/app/instance/search/detail/dynamic-content/dynamic-components/display-image.component.ts
new file mode 100644
index 0000000000000000000000000000000000000000..dec3191f87881d254d8966a059ef629ca89cad47
--- /dev/null
+++ b/client/src/app/instance/search/detail/dynamic-content/dynamic-components/display-image.component.ts
@@ -0,0 +1,63 @@
+import { Component, Input } from '@angular/core';
+
+import { getHost } from 'src/app/shared/utils';
+import { Attribute, Dataset } from 'src/app/metamodel/models';
+import { AppConfigService } from 'src/app/app-config.service';
+
+@Component({
+    selector: 'app-display-image',
+    templateUrl: 'display-image.component.html'
+})
+export class DisplayImageComponent {
+    @Input() object: any;
+    @Input() attributeList: Attribute[];
+    @Input() dataset: Dataset;
+    @Input() attributeImageId: number;
+    @Input() type: string;
+    @Input() width: string;
+    @Input() height: string;
+
+    constructor(private appConfig: AppConfigService) { }
+
+    /**
+     * Returns source image.
+     *
+     * @return string
+     */
+    getValue(): string {
+        console.log(this.width);
+        if (this.type === 'fits') {
+            return `${this.appConfig.servicesUrl}/fits-to-png/${this.dataset.name}?filename=${this.getPath()}`
+                + `&stretch=linear&pmin=0.25&pmax=99.75&axes=true`;
+        } else if (this.type === 'image') {
+            return `${getHost(this.appConfig.apiUrl)}/dataset/${this.dataset.name}/file-explorer${this.getPath()}`;
+        } else {
+            return this.object[this.getAttributeImage().label] as string;
+        }
+    }
+
+    getPath() {
+        let path = this.object[this.getAttributeImage().label];
+        if (path[0] !== '/') {
+            path = '/' + path;
+        }
+        return path;
+    }
+
+    getAttributeImage() {
+        return this.attributeList.find(attribute => attribute.id === this.attributeImageId);
+    }
+
+    getStyle() {
+        let style = { 
+            "width": '100%'
+        } as any;
+        if (this.width && this.height) {
+            style = {
+                "width": this.width,
+                "height": this.height
+            };
+        }
+        return style;
+    }
+}
diff --git a/client/src/app/instance/search/detail/dynamic-content/dynamic-components/display-object.component.html b/client/src/app/instance/search/detail/dynamic-content/dynamic-components/display-object.component.html
index c8eb0047e77dea7c0c7ab2f0eb82d90987b8c202..825ae5b084383e7edc826bb827468f934a7e4fdd 100644
--- a/client/src/app/instance/search/detail/dynamic-content/dynamic-components/display-object.component.html
+++ b/client/src/app/instance/search/detail/dynamic-content/dynamic-components/display-object.component.html
@@ -1,6 +1,6 @@
 <!-- Accordion families -->
 <accordion [isAnimated]="true">
-    <accordion-group *ngFor="let family of outputFamilyList" #ag [isOpen]="true" class="pl-2">
+    <accordion-group *ngFor="let family of getOutputFamilyList()" #ag [isOpen]="true" class="pl-2">
         <button class="btn btn-link btn-block clearfix pb-2" accordion-heading>
             <span class="pull-left float-left text-primary">
                 {{ family.label }}
diff --git a/client/src/app/instance/search/detail/dynamic-content/dynamic-components/display-object.component.ts b/client/src/app/instance/search/detail/dynamic-content/dynamic-components/display-object.component.ts
index cc0881797a897f4e30c5450c0947abcf91753576..aeefb7d73bed7850cec789da74dc0bd97a4592fc 100644
--- a/client/src/app/instance/search/detail/dynamic-content/dynamic-components/display-object.component.ts
+++ b/client/src/app/instance/search/detail/dynamic-content/dynamic-components/display-object.component.ts
@@ -35,8 +35,14 @@ export class DisplayObjectComponent {
 
     constructor(protected store: Store<{}>) { }
 
+    getOutputFamilyList() {
+        return this.outputFamilyList.filter(family => this.getOutputCategoryListByFamily(family.id).length > 0);
+    }
+
     getOutputCategoryListByFamily(idOutputFamily: number): OutputCategory[] {
-        return this.outputCategoryList.filter(outputCategory => outputCategory.id_output_family === idOutputFamily);
+        return this.outputCategoryList
+            .filter(outputCategory => outputCategory.id_output_family === idOutputFamily)
+            .filter(outputCategory => this.getAttributeListByOutputCategory(outputCategory.id).length > 0);
     }
 
     getAttributeListByOutputCategory(idOutputCategory: number): Attribute[] {
diff --git a/client/src/app/instance/search/detail/dynamic-content/dynamic-components/display-value-by-attribute.component.html b/client/src/app/instance/search/detail/dynamic-content/dynamic-components/display-value-by-attribute.component.html
new file mode 100644
index 0000000000000000000000000000000000000000..035011ce7f1480265a082c3227754ce09bbe4a74
--- /dev/null
+++ b/client/src/app/instance/search/detail/dynamic-content/dynamic-components/display-value-by-attribute.component.html
@@ -0,0 +1 @@
+{{ object[getAttributeById().label] }}
\ No newline at end of file
diff --git a/client/src/app/instance/search/detail/dynamic-content/dynamic-components/display-value-by-attribute.component.ts b/client/src/app/instance/search/detail/dynamic-content/dynamic-components/display-value-by-attribute.component.ts
new file mode 100644
index 0000000000000000000000000000000000000000..e606b4b13c3deaf9be693c56c18c1bc334a1bdc8
--- /dev/null
+++ b/client/src/app/instance/search/detail/dynamic-content/dynamic-components/display-value-by-attribute.component.ts
@@ -0,0 +1,17 @@
+import { Component, Input } from '@angular/core';
+
+import { Attribute } from 'src/app/metamodel/models';
+
+@Component({
+    selector: 'app-display-value-by-attribute',
+    templateUrl: 'display-value-by-attribute.component.html'
+})
+export class DisplayValueByAttributeComponent {
+    @Input() object: any;
+    @Input() attributeList: Attribute[];
+    @Input() attributeId: number;
+
+    getAttributeById() {
+        return this.attributeList.find(attribute => attribute.id === this.attributeId);
+    }
+}
diff --git a/client/src/app/instance/search/detail/dynamic-content/dynamic-components/index.ts b/client/src/app/instance/search/detail/dynamic-content/dynamic-components/index.ts
index ce5f3daf3ba6b2612ee2399df204fa53fda8707c..12808868e3bef38990963089e46ca98af6539b43 100644
--- a/client/src/app/instance/search/detail/dynamic-content/dynamic-components/index.ts
+++ b/client/src/app/instance/search/detail/dynamic-content/dynamic-components/index.ts
@@ -8,15 +8,17 @@
  */
 
 import { DisplayObjectComponent } from './display-object.component';
+import { DisplayValueByAttributeComponent } from './display-value-by-attribute.component';
 import { DisplayRaDecComponent } from './display-ra-dec.component';
 import { DisplaySpectraComponent } from './display-spectra.component';
+import { DisplayImageComponent } from './display-image.component';
 import { SpectraGraphComponent } from './spectra-graph/spectra-graph.component';
-import { DisplayDetailRendererComponent } from './display-detail-renderer.component';
 
 export const dynamicComponents = [
     DisplayObjectComponent,
+    DisplayValueByAttributeComponent,
     DisplayRaDecComponent,
     DisplaySpectraComponent,
-    SpectraGraphComponent,
-    DisplayDetailRendererComponent
+    DisplayImageComponent,
+    SpectraGraphComponent
 ];