diff --git a/src/app/demo/view/documentation.component.ts b/src/app/demo/view/documentation.component.ts
index 07bd07d..6547bd6 100755
--- a/src/app/demo/view/documentation.component.ts
+++ b/src/app/demo/view/documentation.component.ts
@@ -1,6 +1,7 @@
 import {Component} from '@angular/core';
 
 @Component({
-    templateUrl: './documentation.component.html'
+    templateUrl: './documentation.component.html',
+    styleUrls: ['../../../assets/demo/documentation.scss']
 })
 export class DocumentationComponent {}
diff --git a/src/app/demo/view/iconsdemo.component.ts b/src/app/demo/view/iconsdemo.component.ts
index 02216cb..b03f26d 100644
--- a/src/app/demo/view/iconsdemo.component.ts
+++ b/src/app/demo/view/iconsdemo.component.ts
@@ -3,7 +3,8 @@ import { IconService } from '../service/iconservice';
 
 @Component({
   selector: 'app-iconsdemo',
-  templateUrl: './iconsdemo.component.html'
+  templateUrl: './iconsdemo.component.html',
+  styleUrls: ['../../../assets/demo/documentation.scss']
 })
 export class IconsDemoComponent implements OnInit {
 
diff --git a/src/app/demo/view/listdemo.component.ts b/src/app/demo/view/listdemo.component.ts
index 8506908..ef5681f 100644
--- a/src/app/demo/view/listdemo.component.ts
+++ b/src/app/demo/view/listdemo.component.ts
@@ -5,6 +5,7 @@ import {ProductService} from '../service/productservice';
 
 @Component({
     templateUrl: './listdemo.component.html',
+    styleUrls: ['../../../assets/demo/badges.scss']
 })
 export class ListDemoComponent implements OnInit {
 
diff --git a/src/app/demo/view/tabledemo.component.ts b/src/app/demo/view/tabledemo.component.ts
index 33a5491..142a49d 100644
--- a/src/app/demo/view/tabledemo.component.ts
+++ b/src/app/demo/view/tabledemo.component.ts
@@ -10,6 +10,7 @@ import { MessageService, ConfirmationService } from 'primeng/api'
 @Component({
     templateUrl: './tabledemo.component.html',
     providers: [MessageService, ConfirmationService],
+    styleUrls: ['../../../assets/demo/badges.scss'],
     styles: [`
         :host ::ng-deep  .p-frozen-column {
             font-weight: bold;
diff --git a/src/app/pages/app.crud.component.ts b/src/app/pages/app.crud.component.ts
index f498d63..82a5b56 100644
--- a/src/app/pages/app.crud.component.ts
+++ b/src/app/pages/app.crud.component.ts
@@ -5,7 +5,8 @@ import {ConfirmationService, MessageService} from 'primeng/api';
 
 @Component({
     templateUrl: './app.crud.component.html',
-    providers: [MessageService, ConfirmationService]
+    providers: [MessageService, ConfirmationService],
+    styleUrls: ['../../assets/demo/badges.scss']
 })
 export class AppCrudComponent implements OnInit {
 
diff --git a/src/assets/demo/documentation.scss b/src/assets/demo/documentation.scss
index 2e3697e..260e77f 100644
--- a/src/assets/demo/documentation.scss
+++ b/src/assets/demo/documentation.scss
@@ -25,4 +25,4 @@ i:not([class~="pi"]) {
     font-weight: 600;
     margin: 0 2px;
     display: inline-flex;
-}
\ No newline at end of file
+}
diff --git a/src/styles.scss b/src/styles.scss
index 6f96a8c..b99d124 100644
--- a/src/styles.scss
+++ b/src/styles.scss
@@ -7,5 +7,4 @@
 @import "../node_modules/@fullcalendar/daygrid/main.min.css";
 @import "../node_modules/@fullcalendar/timegrid/main.min.css";
 @import "assets/demo/flags/flags.css";
-@import "assets/demo/badges.scss";
-@import "assets/demo/documentation.scss";
\ No newline at end of file
+@import "assets/demo/documentation.scss";