diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts
index efb5e46..8b17491 100644
--- a/src/app/app-routing.module.ts
+++ b/src/app/app-routing.module.ts
@@ -4,6 +4,7 @@ import {DashboardDemoComponent} from './demo/view/dashboarddemo.component';
 import {FormLayoutDemoComponent} from './demo/view/formlayoutdemo.component';
 import {PanelsDemoComponent} from './demo/view/panelsdemo.component';
 import {OverlaysDemoComponent} from './demo/view/overlaysdemo.component';
+import {MediaDemoComponent} from './demo/view/mediademo.component';
 import {MenusDemoComponent} from './demo/view/menusdemo.component';
 import {MessagesDemoComponent} from './demo/view/messagesdemo.component';
 import {MiscDemoComponent} from './demo/view/miscdemo.component';
@@ -44,6 +45,7 @@ import {PaymentDemoComponent} from './demo/view/menu/paymentdemo.component';
                     {path: 'uikit/tree', component: TreeDemoComponent},
                     {path: 'uikit/panel', component: PanelsDemoComponent},
                     {path: 'uikit/overlay', component: OverlaysDemoComponent},
+                    {path: 'uikit/media', component: MediaDemoComponent},
                     {path: 'uikit/menu', component: MenusDemoComponent,
                         children: [
                             {path:'', component: PersonalDemoComponent},
diff --git a/src/app/app.menu.component.ts b/src/app/app.menu.component.ts
index 84f1128..1f90167 100644
--- a/src/app/app.menu.component.ts
+++ b/src/app/app.menu.component.ts
@@ -48,6 +48,7 @@ export class AppMenuComponent implements OnInit {
                     {label: 'Tree', icon: 'pi pi-fw pi-share-alt', routerLink: ['/uikit/tree']},
                     {label: 'Panel', icon: 'pi pi-fw pi-tablet', routerLink: ['/uikit/panel']},
                     {label: 'Overlay', icon: 'pi pi-fw pi-clone', routerLink: ['/uikit/overlay']},
+                    {label: 'Media', icon: 'pi pi-fw pi-image', routerLink: ['/uikit/media']},
                     {label: 'Menu', icon: 'pi pi-fw pi-bars', routerLink: ['/uikit/menu']},
                     {label: 'Message', icon: 'pi pi-fw pi-comment', routerLink: ['/uikit/message']},
                     {label: 'File', icon: 'pi pi-fw pi-file', routerLink: ['/uikit/file']},
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 42acb76..7d8da52 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -108,6 +108,7 @@ import {ListDemoComponent} from './demo/view/listdemo.component';
 import {TreeDemoComponent} from './demo/view/treedemo.component';
 import {PanelsDemoComponent} from './demo/view/panelsdemo.component';
 import {OverlaysDemoComponent} from './demo/view/overlaysdemo.component';
+import {MediaDemoComponent} from './demo/view/mediademo.component';
 import {MenusDemoComponent} from './demo/view/menusdemo.component';
 import {MessagesDemoComponent} from './demo/view/messagesdemo.component';
 import {MiscDemoComponent} from './demo/view/miscdemo.component';
@@ -268,7 +269,8 @@ FullCalendarModule.registerPlugins([
         SeatDemoComponent,
         PaymentDemoComponent,
         PersonalDemoComponent,
-        ConfirmationDemoComponent
+        ConfirmationDemoComponent,
+        MediaDemoComponent
     ],
     providers: [
         {provide: LocationStrategy, useClass: HashLocationStrategy},
diff --git a/src/app/demo/view/mediademo.component.html b/src/app/demo/view/mediademo.component.html
new file mode 100644
index 0000000..a88aca1
--- /dev/null
+++ b/src/app/demo/view/mediademo.component.html
@@ -0,0 +1,52 @@
+<div class="grid p-fluid">
+    <div class="col-12">
+        <div class="card">
+            <h5>Carousel</h5>
+            <p-carousel [value]="products" [numVisible]="3" [numScroll]="3" [circular]="false" [responsiveOptions]="carouselResponsiveOptions">
+                <ng-template let-product pTemplate="item">
+                        <div class="border-round m-2 text-center p-2 shadow-1" style="border: 1px solid var(--surface-d)">
+                            <div class="my-3">
+                                <img src="assets/demo/images/product/{{product.image}}" [alt]="product.name" class="shadow-4" width="50%"/>
+                            </div>
+                            <div>
+                                <h5 class="mb-1">{{product.name}}</h5>
+                                <h6 class="mt-0 mb-3">${{product.price}}</h6>
+                                <span [class]="'product-badge status-'+product.inventoryStatus.toLowerCase()">{{product.inventoryStatus}}</span>
+                                <div class="my-5">
+                                    <button pButton pRipple icon="pi pi-search" class="mr-2 p-button-rounded"></button>
+                                    <button pButton pRipple icon="pi pi-star-fill" class="mr-2 p-button-rounded p-button-success"></button>
+                                    <button pButton pRipple icon="pi pi-cog" class="p-button-rounded p-button-info"></button>
+                                </div>
+                            </div>
+                        </div>
+                </ng-template>
+            </p-carousel>
+        </div>
+    </div>
+
+    <div class="col-12">
+        <div class="card">
+            <h5>Image</h5>
+            <div class="flex justify-content-center">
+                <p-image src="assets/demo/images/galleria/galleria10.jpg" alt="Image" width="250" [preview]="true"></p-image>
+            </div>
+        </div>
+    </div>
+
+    <div class="col-12">
+        <div class="card">
+            <h5>Galleria</h5>
+            <p-galleria [value]="images" [responsiveOptions]="galleriaResponsiveOptions"
+                        [containerStyle]="{'max-width': '800px', 'margin':'auto'}" [numVisible]="7" [circular]="true">
+                <ng-template pTemplate="item" let-item>
+                    <img [src]="item.itemImageSrc" style="width: 100%; display: block;"/>
+                </ng-template>
+                <ng-template pTemplate="thumbnail" let-item>
+                    <div class="grid nogutter justify-center">
+                        <img [src]="item.thumbnailImageSrc" style="display: block;"/>
+                    </div>
+                </ng-template>
+            </p-galleria>
+        </div>
+    </div>
+</div>
\ No newline at end of file
diff --git a/src/app/demo/view/mediademo.component.ts b/src/app/demo/view/mediademo.component.ts
new file mode 100644
index 0000000..f48d83f
--- /dev/null
+++ b/src/app/demo/view/mediademo.component.ts
@@ -0,0 +1,70 @@
+import {Component, OnInit} from '@angular/core';
+import {ProductService} from '../service/productservice';
+import {PhotoService} from '../service/photoservice';
+import {Product} from '../domain/product';
+
+@Component({
+  selector: 'app-mediademo',
+  templateUrl: './mediademo.component.html',
+  styleUrls: ['../../../assets/demo/badges.scss'],
+  styles:[`
+    :host ::ng-deep .p-carousel-indicators .p-link{
+      border-radius:5px !important;
+    }
+  `]
+})
+export class MediaDemoComponent implements OnInit {
+
+  products: Product[];
+
+  images: any[];
+
+  galleriaResponsiveOptions: any[] = [
+      {
+          breakpoint: '1024px',
+          numVisible: 5
+      },
+      {
+          breakpoint: '960px',
+          numVisible: 4
+      },
+      {
+          breakpoint: '768px',
+          numVisible: 1
+      },
+      {
+          breakpoint: '560px',
+          numVisible: 1
+      }
+  ];
+
+  carouselResponsiveOptions: any[] = [
+      {
+          breakpoint: '1024px',
+          numVisible: 3,
+          numScroll: 3
+      },
+      {
+          breakpoint: '768px',
+          numVisible: 1,
+          numScroll: 1
+      },
+      {
+          breakpoint: '560px',
+          numVisible: 1,
+          numScroll: 1
+      }
+  ];
+
+  constructor(private productService: ProductService, private photoService: PhotoService) {}
+
+  ngOnInit() {
+      this.productService.getProductsSmall().then(products => {
+          this.products = products;
+      });
+
+      this.photoService.getImages().then(images => {
+          this.images = images;
+      });
+  }
+}