diff --git a/.github/workflows/main.yml b/.github/workflows/main.yml
index 21f9af2..a3edd7e 100644
--- a/.github/workflows/main.yml
+++ b/.github/workflows/main.yml
@@ -36,9 +36,11 @@ jobs:
         # that will run `ngcc` compiler accordingly.
         if: steps.npm-cache.outputs.cache-hit != 'true'
         run: npm ci
-        
+
       - name: Test library
         run: npm run test:ngx-loading-buttons
 
       - name: Build library
         run: npm run build:ngx-loading-buttons
+      - name: Build playground
+        run: npm run build
diff --git a/package.json b/package.json
index b4ceae5..2d351ab 100644
--- a/package.json
+++ b/package.json
@@ -4,7 +4,7 @@
   "scripts": {
     "ng": "ng",
     "start": "ng serve",
-    "build": "ng build",
+    "build": "ng build ngx-loading-buttons-playground",
     "build:ngx-loading-buttons": "ng-packagr -p projects/ngx-loading-buttons/ng-package.json && cd projects/ngx-loading-buttons && npm run build",
     "test:ngx-loading-buttons": "ng test ngx-loading-buttons",
     "watch": "ng build --watch --configuration development"
@@ -41,4 +41,4 @@
     "ng-packagr": "^17.0.0",
     "typescript": "~5.2.2"
   }
-}
\ No newline at end of file
+}
diff --git a/projects/ngx-loading-buttons-playground/src/favicon.ico b/projects/ngx-loading-buttons-playground/src/favicon.ico
index 997406a..57614f9 100644
Binary files a/projects/ngx-loading-buttons-playground/src/favicon.ico and b/projects/ngx-loading-buttons-playground/src/favicon.ico differ
diff --git a/projects/ngx-loading-buttons/src/lib/mat-basic-spinner.directive.spec.ts b/projects/ngx-loading-buttons/src/lib/mat-basic-spinner.directive.spec.ts
index 8f8b5cd..8deb123 100644
--- a/projects/ngx-loading-buttons/src/lib/mat-basic-spinner.directive.spec.ts
+++ b/projects/ngx-loading-buttons/src/lib/mat-basic-spinner.directive.spec.ts
@@ -8,7 +8,10 @@ describe('MatBasicSpinnerDirective', () => {
 
   beforeEach(() => {
     fixture = TestBed.configureTestingModule({
-      declarations: [AppComponent, MatBasicSpinnerDirective]
+      imports: [
+        MatBasicSpinnerDirective
+      ],
+      declarations: [AppComponent]
     })
     .createComponent(AppComponent);
 
diff --git a/projects/ngx-loading-buttons/src/lib/mat-basic-spinner.directive.ts b/projects/ngx-loading-buttons/src/lib/mat-basic-spinner.directive.ts
index 42355c8..3410cf4 100644
--- a/projects/ngx-loading-buttons/src/lib/mat-basic-spinner.directive.ts
+++ b/projects/ngx-loading-buttons/src/lib/mat-basic-spinner.directive.ts
@@ -1,7 +1,8 @@
 import { Directive, HostBinding, Input } from '@angular/core';
 
 @Directive({
-  selector: '[mtBasicSpinner]'
+  selector: '[mtBasicSpinner]',
+  standalone: true,
 })
 export class MatBasicSpinnerDirective {
   @Input() hideText = false
diff --git a/projects/ngx-loading-buttons/src/lib/mat-glow/mat-glow.directive.spec.ts b/projects/ngx-loading-buttons/src/lib/mat-glow/mat-glow.directive.spec.ts
index 5bd9efb..a2cea45 100644
--- a/projects/ngx-loading-buttons/src/lib/mat-glow/mat-glow.directive.spec.ts
+++ b/projects/ngx-loading-buttons/src/lib/mat-glow/mat-glow.directive.spec.ts
@@ -3,12 +3,15 @@ import { AppComponent } from 'projects/ngx-loading-buttons-playground/src/app/ap
 import { MatGlowDirective } from './mat-glow.directive';
 
 describe('MatGlowDirective', () => {
-  
+
   let fixture: ComponentFixture<AppComponent>;
 
   beforeEach(() => {
     fixture = TestBed.configureTestingModule({
-      declarations: [AppComponent, MatGlowDirective]
+      imports: [
+        MatGlowDirective
+      ],
+      declarations: [AppComponent]
     })
     .createComponent(AppComponent);
 
diff --git a/projects/ngx-loading-buttons/src/lib/mat-glow/mat-glow.directive.ts b/projects/ngx-loading-buttons/src/lib/mat-glow/mat-glow.directive.ts
index 75cf08c..b587d12 100644
--- a/projects/ngx-loading-buttons/src/lib/mat-glow/mat-glow.directive.ts
+++ b/projects/ngx-loading-buttons/src/lib/mat-glow/mat-glow.directive.ts
@@ -1,7 +1,8 @@
 import { Directive, HostBinding, Input } from '@angular/core';
 
 @Directive({
-  selector: '[mtGlow]'
+  selector: '[mtGlow]',
+  standalone: true,
 })
 export class MatGlowDirective {
 
@@ -9,7 +10,7 @@ export class MatGlowDirective {
   @Input() mtGlow = false;
   @Input() hideText = false;
 
-  @Input("class")  
+  @Input("class")
   @HostBinding('class')
   get elementClass(): string {
     document.documentElement.style.setProperty('--glow-color', this.glowColor);
diff --git a/projects/ngx-loading-buttons/src/lib/ngx-loading-buttons.module.ts b/projects/ngx-loading-buttons/src/lib/ngx-loading-buttons.module.ts
index 92416b1..9c16338 100644
--- a/projects/ngx-loading-buttons/src/lib/ngx-loading-buttons.module.ts
+++ b/projects/ngx-loading-buttons/src/lib/ngx-loading-buttons.module.ts
@@ -3,9 +3,9 @@ import { MatBasicSpinnerDirective } from './mat-basic-spinner.directive';
 import { MatGlowDirective } from './mat-glow/mat-glow.directive';
 
 @NgModule({
-  declarations: [
-    MatBasicSpinnerDirective,
-    MatGlowDirective
+  imports: [
+    MatGlowDirective,
+    MatBasicSpinnerDirective
   ],
   exports: [
     MatBasicSpinnerDirective,