diff --git a/projects/ngxpert/hot-toast/src/lib/components/animated-icon/animated-icon.component.html b/projects/ngxpert/hot-toast/src/lib/components/animated-icon/animated-icon.component.html
index ee912ad..76836f6 100644
--- a/projects/ngxpert/hot-toast/src/lib/components/animated-icon/animated-icon.component.html
+++ b/projects/ngxpert/hot-toast/src/lib/components/animated-icon/animated-icon.component.html
@@ -1,3 +1,3 @@
-<div class="hot-toast-animated-icon" [style.color]="iconTheme?.primary">
+<div class="hot-toast-animated-icon" [style.color]="iconTheme()?.primary">
   <ng-content></ng-content>
 </div>
diff --git a/projects/ngxpert/hot-toast/src/lib/components/animated-icon/animated-icon.component.ts b/projects/ngxpert/hot-toast/src/lib/components/animated-icon/animated-icon.component.ts
index a8054e5..cf16ba2 100644
--- a/projects/ngxpert/hot-toast/src/lib/components/animated-icon/animated-icon.component.ts
+++ b/projects/ngxpert/hot-toast/src/lib/components/animated-icon/animated-icon.component.ts
@@ -1,4 +1,4 @@
-import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
+import { ChangeDetectionStrategy, Component, input } from '@angular/core';
 import { IconTheme } from '../../hot-toast.model';
 
 @Component({
@@ -8,5 +8,5 @@ import { IconTheme } from '../../hot-toast.model';
   standalone: true,
 })
 export class AnimatedIconComponent {
-  @Input() iconTheme: IconTheme;
+  iconTheme = input<IconTheme>();
 }
diff --git a/projects/ngxpert/hot-toast/src/lib/components/hot-toast-container/hot-toast-container.component.ts b/projects/ngxpert/hot-toast/src/lib/components/hot-toast-container/hot-toast-container.component.ts
index 45e9414..b065c8c 100644
--- a/projects/ngxpert/hot-toast/src/lib/components/hot-toast-container/hot-toast-container.component.ts
+++ b/projects/ngxpert/hot-toast/src/lib/components/hot-toast-container/hot-toast-container.component.ts
@@ -1,4 +1,4 @@
-import { Component, ChangeDetectionStrategy, ChangeDetectorRef, Input, QueryList, ViewChildren } from '@angular/core';
+import { Component, ChangeDetectionStrategy, ChangeDetectorRef, QueryList, ViewChildren, Input } from '@angular/core';
 import { Subject } from 'rxjs';
 import {
   HotToastClose,
@@ -66,18 +66,19 @@ export class HotToastContainerComponent {
     const visibleToasts = this.getVisibleToasts(position);
     const index = visibleToasts.findIndex((toast) => toast.id === toastId);
     const offset =
-    index !== -1
-    ? visibleToasts.slice(...(this.defaultConfig.reverseOrder ? [index + 1] : [0, index])).reduce((acc, t, i) => {
-      const toastsAfter = visibleToasts.length - 1 - i;
-      return this.defaultConfig.visibleToasts !== 0 && i < visibleToasts.length - this.defaultConfig.visibleToasts
-      ? 0
-      : acc +
-      (this.defaultConfig.stacking === 'vertical' || this.isShowingAllToasts
-        ? t.height || 0
-        : toastsAfter * HOT_TOAST_DEPTH_SCALE + HOT_TOAST_DEPTH_SCALE_ADD) +
-        HOT_TOAST_MARGIN;
-      }, 0)
-      : 0;
+      index !== -1
+        ? visibleToasts.slice(...(this.defaultConfig.reverseOrder ? [index + 1] : [0, index])).reduce((acc, t, i) => {
+            const toastsAfter = visibleToasts.length - 1 - i;
+            return this.defaultConfig.visibleToasts !== 0 &&
+              i < visibleToasts.length - this.defaultConfig.visibleToasts
+              ? 0
+              : acc +
+                  (this.defaultConfig.stacking === 'vertical' || this.isShowingAllToasts
+                    ? t.height || 0
+                    : toastsAfter * HOT_TOAST_DEPTH_SCALE + HOT_TOAST_DEPTH_SCALE_ADD) +
+                  HOT_TOAST_MARGIN;
+          }, 0)
+        : 0;
     return offset;
   }
 
@@ -189,7 +190,7 @@ export class HotToastContainerComponent {
 
   closeToast(id?: string) {
     if (id) {
-      const comp = this.hotToastComponentList.find((item) => item.toast.id === id);
+      const comp = this.hotToastComponentList.find((item) => item.toast().id === id);
       if (comp) {
         comp.close();
         this.cdr.markForCheck();
diff --git a/projects/ngxpert/hot-toast/src/lib/components/hot-toast-group-item/hot-toast-group-item.component.html b/projects/ngxpert/hot-toast/src/lib/components/hot-toast-group-item/hot-toast-group-item.component.html
index 24954d2..7e5b9d0 100644
--- a/projects/ngxpert/hot-toast/src/lib/components/hot-toast-group-item/hot-toast-group-item.component.html
+++ b/projects/ngxpert/hot-toast/src/lib/components/hot-toast-group-item/hot-toast-group-item.component.html
@@ -1,7 +1,7 @@
 <div
   class="hot-toast-bar-base-container"
   [ngStyle]="containerPositionStyle"
-  [ngClass]="'hot-toast-theme-' + toast.theme"
+  [ngClass]="'hot-toast-theme-' + toast().theme"
   [style.--hot-toast-scale]="scale"
   [style.--hot-toast-translate-y]="translateY"
 >
@@ -10,34 +10,34 @@
       class="hot-toast-bar-base"
       #hotToastBarBase
       [ngStyle]="toastBarBaseStylesSignal()"
-      [ngClass]="toast.className"
+      [ngClass]="toast().className"
       [style.--hot-toast-animation-state]="isManualClose ? 'running' : 'paused'"
-      [style.--hot-toast-exit-animation-state]="isShowingAllToasts ? 'paused' : 'running'"
+      [style.--hot-toast-exit-animation-state]="isShowingAllToasts() ? 'paused' : 'running'"
       [style.--hot-toast-exit-animation-delay]="exitAnimationDelay"
-      [attr.aria-live]="toast.ariaLive"
-      [attr.role]="toast.role"
+      [attr.aria-live]="toast().ariaLive"
+      [attr.role]="toast().role"
     >
       <div class="hot-toast-icon" aria-hidden="true">
-        @if (toast.icon !== undefined) { @if (isIconString) {
-        <hot-toast-animated-icon [iconTheme]="toast.iconTheme">{{ toast.icon }}</hot-toast-animated-icon>
+        @if (toast().icon !== undefined) { @if (isIconString) {
+        <hot-toast-animated-icon [iconTheme]="toast().iconTheme">{{ toast().icon }}</hot-toast-animated-icon>
         } @else {
         <div>
-          <ng-container *dynamicView="toast.icon"></ng-container>
+          <ng-container *dynamicView="toast().icon"></ng-container>
         </div>
         } } @else {
-        <hot-toast-indicator [theme]="toast.iconTheme" [type]="toast.type"></hot-toast-indicator>
+        <hot-toast-indicator [theme]="toast().iconTheme" [type]="toast().type"></hot-toast-indicator>
         }
       </div>
       <div class="hot-toast-message">
-        <ng-container *dynamicView="toast.message; context: context; injector: toastComponentInjector"></ng-container>
+        <ng-container *dynamicView="toast().message; context: context; injector: toastComponentInjector"></ng-container>
       </div>
-      @if (toast.dismissible) {
+      @if (toast().dismissible) {
       <button
         (click)="close()"
         type="button"
         class="hot-toast-close-btn"
         aria-label="Close"
-        [ngStyle]="toast.closeStyle"
+        [ngStyle]="toast().closeStyle"
       ></button>
       }
     </div>
diff --git a/projects/ngxpert/hot-toast/src/lib/components/hot-toast-group-item/hot-toast-group-item.component.ts b/projects/ngxpert/hot-toast/src/lib/components/hot-toast-group-item/hot-toast-group-item.component.ts
index 688a7cc..031aaa0 100644
--- a/projects/ngxpert/hot-toast/src/lib/components/hot-toast-group-item/hot-toast-group-item.component.ts
+++ b/projects/ngxpert/hot-toast/src/lib/components/hot-toast-group-item/hot-toast-group-item.component.ts
@@ -2,11 +2,8 @@ import {
   ChangeDetectionStrategy,
   Component,
   ElementRef,
-  EventEmitter,
   Injector,
-  Input,
   NgZone,
-  Output,
   Renderer2,
   SimpleChanges,
   ViewChild,
@@ -16,6 +13,9 @@ import {
   OnDestroy,
   signal,
   ChangeDetectorRef,
+  input,
+  output,
+  effect,
 } from '@angular/core';
 import { NgClass, NgStyle } from '@angular/common';
 import { AnimatedIconComponent } from '../animated-icon/animated-icon.component';
@@ -34,40 +34,17 @@ import { animate } from '../../utils';
   imports: [NgClass, NgStyle, AnimatedIconComponent, IndicatorComponent, DynamicViewDirective],
 })
 export class HotToastGroupItemComponent implements OnChanges, OnInit, AfterViewInit, OnDestroy {
-  private _toast: Toast<unknown>;
-  @Input()
-  set toast(value: Toast<unknown>) {
-    this._toast = value;
-    const top = value.position.includes('top');
-    const enterAnimation = `hotToastEnterAnimation${
-      top ? 'Negative' : 'Positive'
-    } ${ENTER_ANIMATION_DURATION}ms cubic-bezier(0.21, 1.02, 0.73, 1) forwards`;
-
-    this.toastBarBaseStylesSignal.set({ ...value.style, animation: enterAnimation });
-  }
-  get toast() {
-    return this._toast;
-  }
-  @Input() offset = 0;
-  @Input() defaultConfig: ToastConfig;
-  @Input() toastRef: CreateHotToastRef<unknown>;
-
-  private _toastsAfter = 0;
-  get toastsAfter() {
-    return this._toastsAfter;
-  }
-  @Input()
-  set toastsAfter(value) {
-    this._toastsAfter = value;
-  }
-
-  @Input() isShowingAllToasts = false;
-
-  @Output() height = new EventEmitter<number>();
-  @Output() beforeClosed = new EventEmitter();
-  @Output() afterClosed = new EventEmitter<HotToastClose>();
-  @Output() showAllToasts = new EventEmitter<boolean>();
-  @Output() toggleGroup = new EventEmitter<HotToastGroupEvent>();
+  toast = input<Toast<unknown>>();
+  toastsAfter = input(0);
+  offset = input(0);
+  defaultConfig = input<ToastConfig>();
+  toastRef = input<CreateHotToastRef<unknown>>();
+  isShowingAllToasts = input(false);
+  height = output<number>();
+  beforeClosed = output();
+  afterClosed = output<HotToastClose>();
+  showAllToasts = output<boolean>();
+  toggleGroup = output<HotToastGroupEvent>();
 
   @ViewChild('hotToastBarBase', { static: true }) protected toastBarBase: ElementRef<HTMLElement>;
 
@@ -84,43 +61,52 @@ export class HotToastGroupItemComponent implements OnChanges, OnInit, AfterViewI
     protected renderer: Renderer2,
     protected ngZone: NgZone,
     private cdr: ChangeDetectorRef
-  ) {}
+  ) {
+
+    effect(() => {
+      const {position,style} = this.toast();
+      const top = position.includes('top');
+      const enterAnimation = `hotToastEnterAnimation${top ? 'Negative' : 'Positive'
+        } ${ENTER_ANIMATION_DURATION}ms cubic-bezier(0.21, 1.02, 0.73, 1) forwards`;
+      this.toastBarBaseStylesSignal.set({ ...style, animation: enterAnimation });
+    });
+  }
 
   get toastBarBaseHeight() {
     return this.toastBarBase.nativeElement.offsetHeight;
   }
 
   get scale() {
-    return this.defaultConfig.stacking !== 'vertical' && !this.isShowingAllToasts
-      ? this.toastsAfter * -HOT_TOAST_DEPTH_SCALE + 1
+    return this.defaultConfig().stacking !== 'vertical' && !this.isShowingAllToasts()
+      ? this.toastsAfter() * -HOT_TOAST_DEPTH_SCALE + 1
       : 1;
   }
 
   get translateY() {
-    return this.offset * (this.top ? 1 : -1) + 'px';
+    return this.offset() * (this.top ? 1 : -1) + 'px';
   }
 
   get exitAnimationDelay() {
-    return this.toast.duration + 'ms';
+    return this.toast().duration + 'ms';
   }
 
   get top() {
-    return this.toast.position.includes('top');
+    return this.toast().position.includes('top');
   }
 
   get containerPositionStyle() {
     const verticalStyle = this.top ? { top: 0 } : { bottom: 0 };
     const transform = `translateY(var(--hot-toast-translate-y)) scale(var(--hot-toast-scale))`;
 
-    const horizontalStyle = this.toast.position.includes('left')
-      ? {
-          left: 0,
-        }
-      : this.toast.position.includes('right')
+    const horizontalStyle = this.toast().position.includes('left')
       ? {
+        left: 0,
+      }
+      : this.toast().position.includes('right')
+        ? {
           right: 0,
         }
-      : {
+        : {
           left: 0,
           right: 0,
           justifyContent: 'center',
@@ -133,14 +119,14 @@ export class HotToastGroupItemComponent implements OnChanges, OnInit, AfterViewI
   }
 
   get isIconString() {
-    return typeof this.toast.icon === 'string';
+    return typeof this.toast().icon === 'string';
   }
 
   get groupChildrenToastRefs() {
-    return this.toastRef.groupRefs;
+    return this.toastRef().groupRefs;
   }
   set groupChildrenToastRefs(value: CreateHotToastRef<unknown>[]) {
-    (this.toastRef as { groupRefs: CreateHotToastRef<unknown>[] }).groupRefs = value;
+    (this.toastRef() as { groupRefs: CreateHotToastRef<unknown>[] }).groupRefs = value;
   }
 
   get groupChildrenToasts() {
@@ -152,7 +138,7 @@ export class HotToastGroupItemComponent implements OnChanges, OnInit, AfterViewI
   }
 
   get isExpanded() {
-    return this.toastRef.groupExpanded;
+    return this.toastRef().groupExpanded;
   }
 
   ngOnChanges(changes: SimpleChanges): void {
@@ -164,18 +150,18 @@ export class HotToastGroupItemComponent implements OnChanges, OnInit, AfterViewI
   }
 
   ngOnInit() {
-    if (isTemplateRef(this.toast.message)) {
-      this.context = { $implicit: this.toastRef };
+    if (isTemplateRef(this.toast().message)) {
+      this.context = { $implicit: this.toastRef() };
     }
-    if (isComponent(this.toast.message)) {
+    if (isComponent(this.toast().message)) {
       this.toastComponentInjector = Injector.create({
         providers: [
           {
             provide: HotToastRef,
-            useValue: this.toastRef,
+            useValue: this.toastRef(),
           },
         ],
-        parent: this.toast.injector || this.injector,
+        parent: this.toast().injector || this.injector,
       });
     }
 
@@ -199,16 +185,15 @@ export class HotToastGroupItemComponent implements OnChanges, OnInit, AfterViewI
         this.renderer.listen(nativeElement, 'animationend', (event: AnimationEvent) => {
           if (this.isEnterAnimation(event)) {
             this.ngZone.run(() => {
-              if (this.toast.autoClose) {
-                const exitAnimation = `hotToastExitAnimation${
-                  this.top ? 'Negative' : 'Positive'
-                } ${EXIT_ANIMATION_DURATION}ms forwards cubic-bezier(0.06, 0.71, 0.55, 1) var(--hot-toast-exit-animation-delay) var(--hot-toast-exit-animation-state)`;
-                this.toastBarBaseStylesSignal.set({ ...this.toast.style, animation: exitAnimation });
+              if (this.toast().autoClose) {
+                const exitAnimation = `hotToastExitAnimation${this.top ? 'Negative' : 'Positive'
+                  } ${EXIT_ANIMATION_DURATION}ms forwards cubic-bezier(0.06, 0.71, 0.55, 1) var(--hot-toast-exit-animation-delay) var(--hot-toast-exit-animation-state)`;
+                this.toastBarBaseStylesSignal.set({ ...this.toast().style, animation: exitAnimation });
               }
             });
           }
           if (this.isExitAnimation(event)) {
-            this.ngZone.run(() => this.afterClosed.emit({ dismissedByAction: this.isManualClose, id: this.toast.id }));
+            this.ngZone.run(() => this.afterClosed.emit({ dismissedByAction: this.isManualClose, id: this.toast().id }));
           }
         })
       );
@@ -227,9 +212,8 @@ export class HotToastGroupItemComponent implements OnChanges, OnInit, AfterViewI
   }
 
   softClose() {
-    const exitAnimation = `hotToastExitSoftAnimation${
-      this.top ? 'Negative' : 'Positive'
-    } ${EXIT_ANIMATION_DURATION}ms forwards cubic-bezier(0.06, 0.71, 0.55, 1)`;
+    const exitAnimation = `hotToastExitSoftAnimation${this.top ? 'Negative' : 'Positive'
+      } ${EXIT_ANIMATION_DURATION}ms forwards cubic-bezier(0.06, 0.71, 0.55, 1)`;
 
     const nativeElement = this.toastBarBase.nativeElement;
 
@@ -237,9 +221,8 @@ export class HotToastGroupItemComponent implements OnChanges, OnInit, AfterViewI
     this.softClosed = true;
   }
   softOpen() {
-    const softEnterAnimation = `hotToastEnterSoftAnimation${
-      top ? 'Negative' : 'Positive'
-    } ${ENTER_ANIMATION_DURATION}ms cubic-bezier(0.21, 1.02, 0.73, 1) forwards`;
+    const softEnterAnimation = `hotToastEnterSoftAnimation${top ? 'Negative' : 'Positive'
+      } ${ENTER_ANIMATION_DURATION}ms cubic-bezier(0.21, 1.02, 0.73, 1) forwards`;
 
     const nativeElement = this.toastBarBase.nativeElement;
 
@@ -251,10 +234,9 @@ export class HotToastGroupItemComponent implements OnChanges, OnInit, AfterViewI
     this.isManualClose = true;
     this.cdr.markForCheck();
 
-    const exitAnimation = `hotToastExitAnimation${
-      this.top ? 'Negative' : 'Positive'
-    } ${EXIT_ANIMATION_DURATION}ms forwards cubic-bezier(0.06, 0.71, 0.55, 1)`;
-    this.toastBarBaseStylesSignal.set({ ...this.toast.style, animation: exitAnimation });
+    const exitAnimation = `hotToastExitAnimation${this.top ? 'Negative' : 'Positive'
+      } ${EXIT_ANIMATION_DURATION}ms forwards cubic-bezier(0.06, 0.71, 0.55, 1)`;
+    this.toastBarBaseStylesSignal.set({ ...this.toast().style, animation: exitAnimation });
   }
 
   handleMouseEnter() {
@@ -280,7 +262,7 @@ export class HotToastGroupItemComponent implements OnChanges, OnInit, AfterViewI
   }
 
   private setToastAttributes() {
-    const toastAttributes: Record<string, string> = this.toast.attributes;
+    const toastAttributes: Record<string, string> = this.toast().attributes;
     for (const [key, value] of Object.entries(toastAttributes)) {
       this.renderer.setAttribute(this.toastBarBase.nativeElement, key, value);
     }
diff --git a/projects/ngxpert/hot-toast/src/lib/components/hot-toast/hot-toast.component.html b/projects/ngxpert/hot-toast/src/lib/components/hot-toast/hot-toast.component.html
index df8911b..01ad1c4 100644
--- a/projects/ngxpert/hot-toast/src/lib/components/hot-toast/hot-toast.component.html
+++ b/projects/ngxpert/hot-toast/src/lib/components/hot-toast/hot-toast.component.html
@@ -1,7 +1,7 @@
 <div
   class="hot-toast-bar-base-container"
   [ngStyle]="containerPositionStyle"
-  [ngClass]="'hot-toast-theme-' + toast.theme"
+  [ngClass]="'hot-toast-theme-' + toast().theme"
   [style.--hot-toast-scale]="scale"
   [style.--hot-toast-translate-y]="translateY"
 >
@@ -15,45 +15,45 @@
       class="hot-toast-bar-base"
       #hotToastBarBase
       [ngStyle]="toastBarBaseStylesSignal()"
-      [ngClass]="toast.className"
+      [ngClass]="toast().className"
       [style.--hot-toast-animation-state]="isManualClose ? 'running' : 'paused'"
-      [style.--hot-toast-exit-animation-state]="isShowingAllToasts ? 'paused' : 'running'"
+      [style.--hot-toast-exit-animation-state]="isShowingAllToasts() ? 'paused' : 'running'"
       [style.--hot-toast-exit-animation-delay]="exitAnimationDelay"
-      [attr.aria-live]="toast.ariaLive"
-      [attr.role]="toast.role"
+      [attr.aria-live]="toast().ariaLive"
+      [attr.role]="toast().role"
     >
       <div class="hot-toast-icon" aria-hidden="true">
-        @if (toast.icon !== undefined) { @if (isIconString) {
-        <hot-toast-animated-icon [iconTheme]="toast.iconTheme">{{ toast.icon }}</hot-toast-animated-icon>
+        @if (toast().icon !== undefined) { @if (isIconString) {
+        <hot-toast-animated-icon [iconTheme]="toast().iconTheme">{{ toast().icon }}</hot-toast-animated-icon>
         } @else {
         <div>
-          <ng-container *dynamicView="toast.icon"></ng-container>
+          <ng-container *dynamicView="toast().icon"></ng-container>
         </div>
         } } @else {
-        <hot-toast-indicator [theme]="toast.iconTheme" [type]="toast.type"></hot-toast-indicator>
+        <hot-toast-indicator [theme]="toast().iconTheme" [type]="toast().type"></hot-toast-indicator>
         }
       </div>
 
       <div class="hot-toast-message">
-        <ng-container *dynamicView="toast.message; context: context; injector: toastComponentInjector"></ng-container>
+        <ng-container *dynamicView="toast().message; context: context; injector: toastComponentInjector"></ng-container>
       </div>
 
-      @if (toast.group?.expandAndCollapsible && toast.group?.children && visibleToasts.length > 0) {
+      @if (toast().group?.expandAndCollapsible && toast().group?.children && visibleToasts.length > 0) {
       <button
         (click)="toggleToastGroup()"
         type="button"
         class="hot-toast-group-btn"
         [class.expanded]="isExpanded"
         [attr.aria-label]="isExpanded ? 'Collapse' : 'Expand'"
-        [ngStyle]="toast.group.btnStyle"
+        [ngStyle]="toast().group.btnStyle"
       ></button>
-      } @if (toast.dismissible) {
+      } @if (toast().dismissible) {
       <button
         (click)="close()"
         type="button"
         class="hot-toast-close-btn"
         aria-label="Close"
-        [ngStyle]="toast.closeStyle"
+        [ngStyle]="toast().closeStyle"
       ></button>
       }
     </div>
@@ -61,17 +61,17 @@
     <div
       role="list"
       class="hot-toast-bar-base-group"
-      [ngClass]="toast.group?.className"
+      [ngClass]="toast().group?.className"
       [style.--hot-toast-group-height]="groupHeight + 'px'"
     >
       @for (item of groupChildrenToasts; track item.id) {
       <hot-toast-group-item
         [toast]="item"
         [offset]="calculateOffset(item.id)"
-        [toastRef]="toastRef.groupRefs[$index]"
+        [toastRef]="toastRef().groupRefs[$index]"
         [toastsAfter]="(item.autoClose ? groupChildrenToasts.length : visibleToasts.length) - 1 - $index"
-        [defaultConfig]="defaultConfig"
-        [isShowingAllToasts]="isShowingAllToasts"
+        [defaultConfig]="defaultConfig()"
+        [isShowingAllToasts]="isShowingAllToasts()"
         (height)="updateHeight($event, item)"
         (beforeClosed)="beforeClosedGroupItem(item)"
         (afterClosed)="afterClosedGroupItem($event)"
diff --git a/projects/ngxpert/hot-toast/src/lib/components/hot-toast/hot-toast.component.ts b/projects/ngxpert/hot-toast/src/lib/components/hot-toast/hot-toast.component.ts
index 4d1a9d0..7b115e3 100644
--- a/projects/ngxpert/hot-toast/src/lib/components/hot-toast/hot-toast.component.ts
+++ b/projects/ngxpert/hot-toast/src/lib/components/hot-toast/hot-toast.component.ts
@@ -5,18 +5,19 @@ import {
   Component,
   DoCheck,
   ElementRef,
-  EventEmitter,
   Injector,
-  Input,
   NgZone,
   OnChanges,
   OnDestroy,
   OnInit,
-  Output,
   Renderer2,
   signal,
   SimpleChanges,
   ViewChild,
+  input,
+  output,
+  effect,
+  untracked,
 } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { DynamicViewDirective, isComponent, isTemplateRef } from '@ngneat/overview';
@@ -37,53 +38,18 @@ import { HotToastGroupItemComponent } from '../hot-toast-group-item/hot-toast-gr
   imports: [CommonModule, DynamicViewDirective, IndicatorComponent, AnimatedIconComponent, HotToastGroupItemComponent],
 })
 export class HotToastComponent implements OnInit, AfterViewInit, OnDestroy, OnChanges, DoCheck {
-  private _toast: Toast<unknown>;
-  @Input()
-  set toast(value: Toast<unknown>) {
-    this._toast = value;
-    const top = value.position.includes('top');
-    const enterAnimation = `hotToastEnterAnimation${
-      top ? 'Negative' : 'Positive'
-    } ${ENTER_ANIMATION_DURATION}ms cubic-bezier(0.21, 1.02, 0.73, 1) forwards`;
-
-    this.toastBarBaseStylesSignal.set({ ...value.style, animation: enterAnimation });
-  }
-  get toast() {
-    return this._toast;
-  }
-  @Input() offset = 0;
-  @Input() defaultConfig: ToastConfig;
-  @Input() toastRef: CreateHotToastRef<unknown>;
-
-  private _toastsAfter = 0;
-  get toastsAfter() {
-    return this._toastsAfter;
-  }
-  @Input()
-  set toastsAfter(value) {
-    this._toastsAfter = value;
-    if (this.defaultConfig?.visibleToasts > 0) {
-      if (this.toast.autoClose) {
-        // if (value >= this.defaultConfig?.visibleToasts) {
-        //   this.close();
-        // }
-      } else {
-        if (value >= this.defaultConfig?.visibleToasts) {
-          this.softClose();
-        } else if (this.softClosed) {
-          this.softOpen();
-        }
-      }
-    }
-  }
-
-  @Input() isShowingAllToasts = false;
-
-  @Output() height = new EventEmitter<number>();
-  @Output() beforeClosed = new EventEmitter();
-  @Output() afterClosed = new EventEmitter<HotToastClose>();
-  @Output() showAllToasts = new EventEmitter<boolean>();
-  @Output() toggleGroup = new EventEmitter<HotToastGroupEvent>();
+  toast = input<Toast<unknown>>();
+  offset = input(0);
+  toastsAfter = input(0);
+  defaultConfig = input<ToastConfig>();
+  toastRef = input<CreateHotToastRef<unknown>>();
+  isShowingAllToasts = input(false);
+
+  height = output<number>();
+  beforeClosed = output();
+  afterClosed = output<HotToastClose>();
+  showAllToasts = output<boolean>();
+  toggleGroup = output<HotToastGroupEvent>();
 
   @ViewChild('hotToastBarBase', { static: true }) private toastBarBase: ElementRef<HTMLElement>;
 
@@ -102,43 +68,71 @@ export class HotToastComponent implements OnInit, AfterViewInit, OnDestroy, OnCh
     private renderer: Renderer2,
     private ngZone: NgZone,
     private cdr: ChangeDetectorRef
-  ) {}
+  ) {
+    effect(() => {
+      const {position,style} = this.toast();
+      const top = position.includes('top');
+      const enterAnimation = `hotToastEnterAnimation${top ? 'Negative' : 'Positive'
+        } ${ENTER_ANIMATION_DURATION}ms cubic-bezier(0.21, 1.02, 0.73, 1) forwards`;
+
+      this.toastBarBaseStylesSignal.set({ ...style, animation: enterAnimation });
+    });
+
+    effect(() => {
+      const toastsAfter = this.toastsAfter()
+      const defaultConfig = untracked(this.defaultConfig);
+      const toast = untracked(this.toast);
+      if (defaultConfig?.visibleToasts > 0) {
+        if (toast.autoClose) {
+          // if (value >= this.defaultConfig?.visibleToasts) {
+          //   this.close();
+          // }
+        } else {
+          if (toastsAfter >= defaultConfig?.visibleToasts) {
+            this.softClose();
+          } else if (this.softClosed) {
+            this.softOpen();
+          }
+        }
+      }
+    })
+  }
 
   get toastBarBaseHeight() {
     return this.toastBarBase.nativeElement.offsetHeight;
   }
 
   get scale() {
-    return this.defaultConfig.stacking !== 'vertical' && !this.isShowingAllToasts
-      ? this.toastsAfter * -HOT_TOAST_DEPTH_SCALE + 1
+    return this.defaultConfig().stacking !== 'vertical' && !this.isShowingAllToasts()
+      ? this.toastsAfter() * -HOT_TOAST_DEPTH_SCALE + 1
       : 1;
   }
 
   get translateY() {
-    return this.offset * (this.top ? 1 : -1) + 'px';
+    return this.offset() * (this.top ? 1 : -1) + 'px';
   }
 
   get exitAnimationDelay() {
-    return this.toast.duration + 'ms';
+    return this.toast().duration + 'ms';
   }
 
   get top() {
-    return this.toast.position.includes('top');
+    return this.toast().position.includes('top');
   }
 
   get containerPositionStyle() {
     const verticalStyle = this.top ? { top: 0 } : { bottom: 0 };
     const transform = `translateY(var(--hot-toast-translate-y)) scale(var(--hot-toast-scale))`;
 
-    const horizontalStyle = this.toast.position.includes('left')
-      ? {
-          left: 0,
-        }
-      : this.toast.position.includes('right')
+    const horizontalStyle = this.toast().position.includes('left')
       ? {
+        left: 0,
+      }
+      : this.toast().position.includes('right')
+        ? {
           right: 0,
         }
-      : {
+        : {
           left: 0,
           right: 0,
           justifyContent: 'center',
@@ -151,7 +145,7 @@ export class HotToastComponent implements OnInit, AfterViewInit, OnDestroy, OnCh
   }
 
   get isIconString() {
-    return typeof this.toast.icon === 'string';
+    return typeof this.toast().icon === 'string';
   }
 
   get groupChildrenToastRefs() {
@@ -161,7 +155,7 @@ export class HotToastComponent implements OnInit, AfterViewInit, OnDestroy, OnCh
     this.groupRefs = value;
 
     // maybe below will prevent execution in ngDoCheck?
-    (this.toastRef as { groupRefs: CreateHotToastRef<unknown>[] }).groupRefs = value;
+    (this.toastRef() as { groupRefs: CreateHotToastRef<unknown>[] }).groupRefs = value;
   }
 
   get groupChildrenToasts() {
@@ -170,7 +164,7 @@ export class HotToastComponent implements OnInit, AfterViewInit, OnDestroy, OnCh
 
   get groupHeight() {
     return this.visibleToasts
-      .slice(-this.defaultConfig.visibleToasts)
+      .slice(-this.defaultConfig().visibleToasts)
       .map((t) => t.height)
       .reduce((prev, curr) => prev + curr, 0);
   }
@@ -180,14 +174,14 @@ export class HotToastComponent implements OnInit, AfterViewInit, OnDestroy, OnCh
   }
 
   ngDoCheck() {
-    if (this.toastRef.groupRefs.length !== this.groupRefs.length) {
-      this.groupRefs = this.toastRef.groupRefs.slice();
+    if (this.toastRef().groupRefs.length !== this.groupRefs.length) {
+      this.groupRefs = this.toastRef().groupRefs.slice();
       this.cdr.markForCheck();
 
       this.emiHeightWithGroup(this.isExpanded);
     }
-    if (this.toastRef.groupExpanded !== this.isExpanded) {
-      this.isExpanded = this.toastRef.groupExpanded;
+    if (this.toastRef().groupExpanded !== this.isExpanded) {
+      this.isExpanded = this.toastRef().groupExpanded;
       this.cdr.markForCheck();
 
       this.emiHeightWithGroup(this.isExpanded);
@@ -201,18 +195,18 @@ export class HotToastComponent implements OnInit, AfterViewInit, OnDestroy, OnCh
   }
 
   ngOnInit() {
-    if (isTemplateRef(this.toast.message)) {
-      this.context = { $implicit: this.toastRef };
+    if (isTemplateRef(this.toast().message)) {
+      this.context = { $implicit: this.toastRef() };
     }
-    if (isComponent(this.toast.message)) {
+    if (isComponent(this.toast().message)) {
       this.toastComponentInjector = Injector.create({
         providers: [
           {
             provide: HotToastRef,
-            useValue: this.toastRef,
+            useValue: this.toastRef(),
           },
         ],
-        parent: this.toast.injector || this.injector,
+        parent: this.toast().injector || this.injector,
       });
     }
 
@@ -236,16 +230,15 @@ export class HotToastComponent implements OnInit, AfterViewInit, OnDestroy, OnCh
         this.renderer.listen(nativeElement, 'animationend', (event: AnimationEvent) => {
           if (this.isEnterAnimation(event)) {
             this.ngZone.run(() => {
-              if (this.toast.autoClose) {
-                const exitAnimation = `hotToastExitAnimation${
-                  this.top ? 'Negative' : 'Positive'
-                } ${EXIT_ANIMATION_DURATION}ms forwards cubic-bezier(0.06, 0.71, 0.55, 1) var(--hot-toast-exit-animation-delay) var(--hot-toast-exit-animation-state)`;
-                this.toastBarBaseStylesSignal.set({ ...this.toast.style, animation: exitAnimation });
+              if (this.toast().autoClose) {
+                const exitAnimation = `hotToastExitAnimation${this.top ? 'Negative' : 'Positive'
+                  } ${EXIT_ANIMATION_DURATION}ms forwards cubic-bezier(0.06, 0.71, 0.55, 1) var(--hot-toast-exit-animation-delay) var(--hot-toast-exit-animation-state)`;
+                this.toastBarBaseStylesSignal.set({ ...this.toast().style, animation: exitAnimation });
               }
             });
           }
           if (this.isExitAnimation(event)) {
-            this.ngZone.run(() => this.afterClosed.emit({ dismissedByAction: this.isManualClose, id: this.toast.id }));
+            this.ngZone.run(() => this.afterClosed.emit({ dismissedByAction: this.isManualClose, id: this.toast().id }));
           }
         })
       );
@@ -264,9 +257,8 @@ export class HotToastComponent implements OnInit, AfterViewInit, OnDestroy, OnCh
   }
 
   softClose() {
-    const exitAnimation = `hotToastExitSoftAnimation${
-      this.top ? 'Negative' : 'Positive'
-    } ${EXIT_ANIMATION_DURATION}ms forwards cubic-bezier(0.06, 0.71, 0.55, 1)`;
+    const exitAnimation = `hotToastExitSoftAnimation${this.top ? 'Negative' : 'Positive'
+      } ${EXIT_ANIMATION_DURATION}ms forwards cubic-bezier(0.06, 0.71, 0.55, 1)`;
 
     const nativeElement = this.toastBarBase.nativeElement;
 
@@ -279,9 +271,8 @@ export class HotToastComponent implements OnInit, AfterViewInit, OnDestroy, OnCh
   }
 
   softOpen() {
-    const softEnterAnimation = `hotToastEnterSoftAnimation${
-      top ? 'Negative' : 'Positive'
-    } ${ENTER_ANIMATION_DURATION}ms cubic-bezier(0.21, 1.02, 0.73, 1) forwards`;
+    const softEnterAnimation = `hotToastEnterSoftAnimation${top ? 'Negative' : 'Positive'
+      } ${ENTER_ANIMATION_DURATION}ms cubic-bezier(0.21, 1.02, 0.73, 1) forwards`;
 
     const nativeElement = this.toastBarBase.nativeElement;
 
@@ -293,11 +284,10 @@ export class HotToastComponent implements OnInit, AfterViewInit, OnDestroy, OnCh
     this.isManualClose = true;
     this.cdr.markForCheck();
 
-    const exitAnimation = `hotToastExitAnimation${
-      this.top ? 'Negative' : 'Positive'
-    } ${EXIT_ANIMATION_DURATION}ms forwards cubic-bezier(0.06, 0.71, 0.55, 1)`;
+    const exitAnimation = `hotToastExitAnimation${this.top ? 'Negative' : 'Positive'
+      } ${EXIT_ANIMATION_DURATION}ms forwards cubic-bezier(0.06, 0.71, 0.55, 1)`;
 
-    this.toastBarBaseStylesSignal.set({ ...this.toast.style, animation: exitAnimation });
+    this.toastBarBaseStylesSignal.set({ ...this.toast().style, animation: exitAnimation });
   }
 
   handleMouseEnter() {
@@ -323,7 +313,7 @@ export class HotToastComponent implements OnInit, AfterViewInit, OnDestroy, OnCh
   }
 
   private setToastAttributes() {
-    const toastAttributes: Record<string, string> = this.toast.attributes;
+    const toastAttributes: Record<string, string> = this.toast().attributes;
     for (const [key, value] of Object.entries(toastAttributes)) {
       this.renderer.setAttribute(this.toastBarBase.nativeElement, key, value);
     }
@@ -334,11 +324,12 @@ export class HotToastComponent implements OnInit, AfterViewInit, OnDestroy, OnCh
     const index = visibleToasts.findIndex((toast) => toast.id === toastId);
     const offset =
       index !== -1
-        ? visibleToasts.slice(...(this.defaultConfig.reverseOrder ? [index + 1] : [0, index])).reduce((acc, t, i) => {
-            return this.defaultConfig.visibleToasts !== 0 && i < visibleToasts.length - this.defaultConfig.visibleToasts
-              ? 0
-              : acc + (t.height || 0);
-          }, 0)
+        ? visibleToasts.slice(...(this.defaultConfig().reverseOrder ? [index + 1] : [0, index])).reduce((acc, t, i) => {
+          return this.defaultConfig().visibleToasts !== 0 &&
+            i < visibleToasts.length - this.defaultConfig().visibleToasts
+            ? 0
+            : acc + (t.height || 0);
+        }, 0)
         : 0;
     return offset;
   }
@@ -371,7 +362,7 @@ export class HotToastComponent implements OnInit, AfterViewInit, OnDestroy, OnCh
     this.toggleGroup.emit({
       byAction: true,
       event,
-      id: this.toast.id,
+      id: this.toast().id,
     });
     this.emiHeightWithGroup(event === 'expand');
   }
diff --git a/projects/ngxpert/hot-toast/src/lib/components/indicator/icons/checkmark/checkmark.component.html b/projects/ngxpert/hot-toast/src/lib/components/indicator/icons/checkmark/checkmark.component.html
index 211b6e5..7026eed 100644
--- a/projects/ngxpert/hot-toast/src/lib/components/indicator/icons/checkmark/checkmark.component.html
+++ b/projects/ngxpert/hot-toast/src/lib/components/indicator/icons/checkmark/checkmark.component.html
@@ -1,5 +1,5 @@
 <div
   class="hot-toast-checkmark-icon"
-  [style.--check-primary]="theme?.primary"
-  [style.--check-secondary]="theme?.secondary"
+  [style.--check-primary]="theme()?.primary"
+  [style.--check-secondary]="theme()?.secondary"
 ></div>
diff --git a/projects/ngxpert/hot-toast/src/lib/components/indicator/icons/checkmark/checkmark.component.ts b/projects/ngxpert/hot-toast/src/lib/components/indicator/icons/checkmark/checkmark.component.ts
index 3e66369..adc12b4 100644
--- a/projects/ngxpert/hot-toast/src/lib/components/indicator/icons/checkmark/checkmark.component.ts
+++ b/projects/ngxpert/hot-toast/src/lib/components/indicator/icons/checkmark/checkmark.component.ts
@@ -1,4 +1,4 @@
-import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
+import { ChangeDetectionStrategy, Component, input } from '@angular/core';
 import { IconTheme } from '../../../../hot-toast.model';
 
 @Component({
@@ -8,5 +8,5 @@ import { IconTheme } from '../../../../hot-toast.model';
   standalone: true,
 })
 export class CheckMarkComponent {
-  @Input() theme: IconTheme;
+  theme = input<IconTheme>();
 }
diff --git a/projects/ngxpert/hot-toast/src/lib/components/indicator/icons/error/error.component.html b/projects/ngxpert/hot-toast/src/lib/components/indicator/icons/error/error.component.html
index 93a00cd..ddd3ffa 100644
--- a/projects/ngxpert/hot-toast/src/lib/components/indicator/icons/error/error.component.html
+++ b/projects/ngxpert/hot-toast/src/lib/components/indicator/icons/error/error.component.html
@@ -1,5 +1,5 @@
 <div
   class="hot-toast-error-icon"
-  [style.--error-primary]="theme?.primary"
-  [style.--error-secondary]="theme?.secondary"
+  [style.--error-primary]="theme()?.primary"
+  [style.--error-secondary]="theme()?.secondary"
 ></div>
diff --git a/projects/ngxpert/hot-toast/src/lib/components/indicator/icons/error/error.component.ts b/projects/ngxpert/hot-toast/src/lib/components/indicator/icons/error/error.component.ts
index e40168a..c3473da 100644
--- a/projects/ngxpert/hot-toast/src/lib/components/indicator/icons/error/error.component.ts
+++ b/projects/ngxpert/hot-toast/src/lib/components/indicator/icons/error/error.component.ts
@@ -1,4 +1,4 @@
-import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
+import { ChangeDetectionStrategy, Component, input } from '@angular/core';
 import { IconTheme } from '../../../../hot-toast.model';
 
 @Component({
@@ -8,5 +8,5 @@ import { IconTheme } from '../../../../hot-toast.model';
   standalone: true,
 })
 export class ErrorComponent {
-  @Input() theme: IconTheme;
+  theme = input<IconTheme>();
 }
diff --git a/projects/ngxpert/hot-toast/src/lib/components/indicator/icons/info/info.component.html b/projects/ngxpert/hot-toast/src/lib/components/indicator/icons/info/info.component.html
index 6f26b44..8f84815 100644
--- a/projects/ngxpert/hot-toast/src/lib/components/indicator/icons/info/info.component.html
+++ b/projects/ngxpert/hot-toast/src/lib/components/indicator/icons/info/info.component.html
@@ -1,5 +1,5 @@
 <div
   class="hot-toast-info-icon"
-  [style.--warn-primary]="theme?.primary"
-  [style.--warn-secondary]="theme?.secondary"
+  [style.--warn-primary]="theme()?.primary"
+  [style.--warn-secondary]="theme()?.secondary"
 ></div>
diff --git a/projects/ngxpert/hot-toast/src/lib/components/indicator/icons/info/info.component.ts b/projects/ngxpert/hot-toast/src/lib/components/indicator/icons/info/info.component.ts
index cd83de9..dcfe195 100644
--- a/projects/ngxpert/hot-toast/src/lib/components/indicator/icons/info/info.component.ts
+++ b/projects/ngxpert/hot-toast/src/lib/components/indicator/icons/info/info.component.ts
@@ -1,4 +1,4 @@
-import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
+import { ChangeDetectionStrategy, Component, input } from '@angular/core';
 import { IconTheme } from '../../../../hot-toast.model';
 
 @Component({
@@ -8,5 +8,5 @@ import { IconTheme } from '../../../../hot-toast.model';
   standalone: true,
 })
 export class InfoComponent {
-  @Input() theme: IconTheme;
+  theme = input<IconTheme>();
 }
diff --git a/projects/ngxpert/hot-toast/src/lib/components/indicator/icons/loader/loader.component.html b/projects/ngxpert/hot-toast/src/lib/components/indicator/icons/loader/loader.component.html
index 7954708..7d94a11 100644
--- a/projects/ngxpert/hot-toast/src/lib/components/indicator/icons/loader/loader.component.html
+++ b/projects/ngxpert/hot-toast/src/lib/components/indicator/icons/loader/loader.component.html
@@ -1,4 +1,4 @@
 <div
   class="hot-toast-loader-icon"
-  [ngStyle]="{ 'border-color': theme?.primary, 'border-right-color': theme?.secondary }"
+  [ngStyle]="{ 'border-color': theme()?.primary, 'border-right-color': theme()?.secondary }"
 ></div>
diff --git a/projects/ngxpert/hot-toast/src/lib/components/indicator/icons/loader/loader.component.ts b/projects/ngxpert/hot-toast/src/lib/components/indicator/icons/loader/loader.component.ts
index 583efd0..ac89aad 100644
--- a/projects/ngxpert/hot-toast/src/lib/components/indicator/icons/loader/loader.component.ts
+++ b/projects/ngxpert/hot-toast/src/lib/components/indicator/icons/loader/loader.component.ts
@@ -1,4 +1,4 @@
-import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
+import { ChangeDetectionStrategy, Component, input } from '@angular/core';
 import { CommonModule } from '@angular/common';
 
 import { IconTheme } from '../../../../hot-toast.model';
@@ -11,5 +11,5 @@ import { IconTheme } from '../../../../hot-toast.model';
   imports: [CommonModule],
 })
 export class LoaderComponent {
-  @Input() theme: IconTheme;
+  theme = input<IconTheme>();
 }
diff --git a/projects/ngxpert/hot-toast/src/lib/components/indicator/icons/warning/warning.component.html b/projects/ngxpert/hot-toast/src/lib/components/indicator/icons/warning/warning.component.html
index bc92a1a..efbf992 100644
--- a/projects/ngxpert/hot-toast/src/lib/components/indicator/icons/warning/warning.component.html
+++ b/projects/ngxpert/hot-toast/src/lib/components/indicator/icons/warning/warning.component.html
@@ -1,5 +1,5 @@
 <div
   class="hot-toast-warning-icon"
-  [style.--warn-primary]="theme?.primary"
-  [style.--warn-secondary]="theme?.secondary"
+  [style.--warn-primary]="theme()?.primary"
+  [style.--warn-secondary]="theme()?.secondary"
 ></div>
diff --git a/projects/ngxpert/hot-toast/src/lib/components/indicator/icons/warning/warning.component.ts b/projects/ngxpert/hot-toast/src/lib/components/indicator/icons/warning/warning.component.ts
index 3ea61e6..f1ef63d 100644
--- a/projects/ngxpert/hot-toast/src/lib/components/indicator/icons/warning/warning.component.ts
+++ b/projects/ngxpert/hot-toast/src/lib/components/indicator/icons/warning/warning.component.ts
@@ -1,4 +1,4 @@
-import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
+import { ChangeDetectionStrategy, Component, input } from '@angular/core';
 import { IconTheme } from '../../../../hot-toast.model';
 
 @Component({
@@ -8,5 +8,5 @@ import { IconTheme } from '../../../../hot-toast.model';
   standalone: true,
 })
 export class WarningComponent {
-  @Input() theme: IconTheme;
+  theme = input<IconTheme>();
 }
diff --git a/projects/ngxpert/hot-toast/src/lib/components/indicator/indicator.component.html b/projects/ngxpert/hot-toast/src/lib/components/indicator/indicator.component.html
index bfa1c22..2298f2f 100644
--- a/projects/ngxpert/hot-toast/src/lib/components/indicator/indicator.component.html
+++ b/projects/ngxpert/hot-toast/src/lib/components/indicator/indicator.component.html
@@ -1,25 +1,25 @@
-@if (type !== 'blank') {
+@if (type() !== 'blank') {
 <div class="hot-toast-indicator-wrapper">
-  @if (type === 'loading') {
-  <hot-toast-loader [theme]="theme"></hot-toast-loader>
-  } @if (type !== 'loading') {
+  @if (type() === 'loading') {
+  <hot-toast-loader [theme]="theme()"></hot-toast-loader>
+  } @if (type() !== 'loading') {
   <div class="hot-toast-status-wrapper">
     <div>
-      @switch (type) { @case ('error') {
+      @switch (type()) { @case ('error') {
       <div>
-        <hot-toast-error [theme]="theme"></hot-toast-error>
+        <hot-toast-error [theme]="theme()"></hot-toast-error>
       </div>
       } @case ('success') {
       <div>
-        <hot-toast-checkmark [theme]="theme"></hot-toast-checkmark>
+        <hot-toast-checkmark [theme]="theme()"></hot-toast-checkmark>
       </div>
       } @case ('warning') {
       <div>
-        <hot-toast-warning [theme]="theme"></hot-toast-warning>
+        <hot-toast-warning [theme]="theme()"></hot-toast-warning>
       </div>
       } @case ('info') {
       <div>
-        <hot-toast-info [theme]="theme"></hot-toast-info>
+        <hot-toast-info [theme]="theme()"></hot-toast-info>
       </div>
       } }
     </div>
diff --git a/projects/ngxpert/hot-toast/src/lib/components/indicator/indicator.component.ts b/projects/ngxpert/hot-toast/src/lib/components/indicator/indicator.component.ts
index ea1c42c..6556ae1 100644
--- a/projects/ngxpert/hot-toast/src/lib/components/indicator/indicator.component.ts
+++ b/projects/ngxpert/hot-toast/src/lib/components/indicator/indicator.component.ts
@@ -1,4 +1,4 @@
-import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
+import { ChangeDetectionStrategy, Component, input } from '@angular/core';
 
 import { IconTheme, ToastType } from '../../hot-toast.model';
 import { LoaderComponent } from './icons/loader/loader.component';
@@ -15,6 +15,6 @@ import { InfoComponent } from './icons/info/info.component';
   imports: [LoaderComponent, ErrorComponent, CheckMarkComponent, WarningComponent, InfoComponent],
 })
 export class IndicatorComponent {
-  @Input() theme: IconTheme;
-  @Input() type: ToastType;
+  theme = input<IconTheme>();
+  type = input<ToastType>();
 }
diff --git a/src/app/shared/components/button-group/button-group.component.html b/src/app/shared/components/button-group/button-group.component.html
index 5a29603..20dc3a5 100644
--- a/src/app/shared/components/button-group/button-group.component.html
+++ b/src/app/shared/components/button-group/button-group.component.html
@@ -1,5 +1,5 @@
 <div class="inline-flex rounded-md shadow-sm" role="group">
-  @for (button of buttons; track button; let isFirst = $first; let isLast = $last) {
+  @for (button of buttons(); track button; let isFirst = $first; let isLast = $last) {
   <button
     class="inline-flex items-center text-sm font-semibold py-2 px-2 shadow-small-button inline-flex items-center hover:bg-gray-50 active:translate-y-0.5 active:shadow-button-active active:bg-toast-100 transform"
     [class.rounded-s-md]="isFirst"
@@ -7,8 +7,8 @@
     [ngClass]="{
       'rounded-l-md': isFirst,
       'rounded-r-md': isLast,
-      'bg-toast-100 border border-toast-300': button.value === selectedValue,
-      'bg-white': button.value !== selectedValue
+      'bg-toast-100 border border-toast-300': button.value === selectedValue(),
+      'bg-white': button.value !== selectedValue()
     }"
     (click)="button.onClick()"
   >
diff --git a/src/app/shared/components/button-group/button-group.component.ts b/src/app/shared/components/button-group/button-group.component.ts
index ae84b17..1e71c2a 100644
--- a/src/app/shared/components/button-group/button-group.component.ts
+++ b/src/app/shared/components/button-group/button-group.component.ts
@@ -1,4 +1,4 @@
-import { Component, Input } from '@angular/core';
+import { Component, input } from '@angular/core';
 import { NgClass } from '@angular/common';
 
 export type ButtonGroupItem = {
@@ -10,13 +10,13 @@ export type ButtonGroupItem = {
 };
 
 @Component({
-    selector: 'app-button-group',
-    templateUrl: './button-group.component.html',
-    styleUrls: ['./button-group.component.scss'],
-    standalone: true,
-    imports: [NgClass],
+  selector: 'app-button-group',
+  templateUrl: './button-group.component.html',
+  styleUrls: ['./button-group.component.scss'],
+  standalone: true,
+  imports: [NgClass],
 })
 export class ButtonGroupComponent {
-  @Input() buttons: ButtonGroupItem[] = [];
-  @Input() selectedValue: string;
+  buttons = input<ButtonGroupItem[]>([]);
+  selectedValue = input<string>();
 }
diff --git a/src/app/shared/components/code/code.component.html b/src/app/shared/components/code/code.component.html
index 22b4c33..ad34d54 100644
--- a/src/app/shared/components/code/code.component.html
+++ b/src/app/shared/components/code/code.component.html
@@ -1,5 +1,5 @@
-<div [ngClass]="containerClass">
-  <pre class="language-{{ language }}" data-prismjs-copy="📋" data-prismjs-copy-success="✅">
-    <code class="language-{{ language }}" #code [innerHTML]="snippet"> </code>
+<div [ngClass]="containerClass()">
+  <pre class="language-{{ language() }}" data-prismjs-copy="📋" data-prismjs-copy-success="✅">
+    <code class="language-{{ language() }}" #code [innerHTML]="snippet()"> </code>
   </pre>
 </div>
diff --git a/src/app/shared/components/code/code.component.ts b/src/app/shared/components/code/code.component.ts
index f88107a..8734bde 100644
--- a/src/app/shared/components/code/code.component.ts
+++ b/src/app/shared/components/code/code.component.ts
@@ -1,18 +1,18 @@
-import { Component, ElementRef, Input, OnChanges, ViewChild } from '@angular/core';
+import { Component, ElementRef, OnChanges, ViewChild, input } from '@angular/core';
 import { CodeHighlightService } from 'src/app/core/services/code-highlight.service';
 import { NgClass } from '@angular/common';
 
 @Component({
-    selector: 'app-code',
-    templateUrl: './code.component.html',
-    styleUrls: ['./code.component.scss'],
-    standalone: true,
-    imports: [NgClass],
+  selector: 'app-code',
+  templateUrl: './code.component.html',
+  styleUrls: ['./code.component.scss'],
+  standalone: true,
+  imports: [NgClass],
 })
 export class CodeComponent implements OnChanges {
-  @Input() language = 'typescript';
-  @Input() containerClass: string;
-  @Input() snippet: string;
+  language = input('typescript');
+  containerClass = input<string>();
+  snippet = input<string>();
 
   @ViewChild('code') codeTemplateRef: ElementRef<HTMLElement>;
 
diff --git a/src/app/shared/components/emoji-button/emoji-button.component.html b/src/app/shared/components/emoji-button/emoji-button.component.html
index a446c84..c2d4739 100644
--- a/src/app/shared/components/emoji-button/emoji-button.component.html
+++ b/src/app/shared/components/emoji-button/emoji-button.component.html
@@ -1,20 +1,20 @@
-<div class="relative emoji-btn-wrapper" [class.translate-x-link]="btnId && showLink">
+<div class="relative emoji-btn-wrapper" [class.translate-x-link]="btnId() && showLink()">
   <small class="text-sm opacity-25 hover:opacity-100 absolute top-2 emoji-link px-2"
-    >@if (btnId && showLink) {
-    <a [href]="'#' + btnId">🔗</a>
+    >@if (btnId() && showLink()) {
+    <a [href]="'#' + btnId()">🔗</a>
     }</small
   >
   <button
     style="transition: all 100ms ease-in-out"
     class="rounded bg-white text-sm font-semibold py-2 px-2 shadow-small-button inline-flex items-center hover:bg-gray-50 active:translate-y-0.5 active:shadow-button-active active:bg-toast-100 transform {{
-      className
+      className()
     }}"
     (click)="btnClick.emit()"
-    [id]="btnId"
-    [disabled]="disabled"
+    [id]="btnId()"
+    [disabled]="disabled()"
   >
     <span>
-      {{ emoji }}
+      {{ emoji() }}
     </span>
     <div class="flex-1 px-3">
       <ng-content></ng-content>
diff --git a/src/app/shared/components/emoji-button/emoji-button.component.ts b/src/app/shared/components/emoji-button/emoji-button.component.ts
index 3a48320..b77f2fc 100644
--- a/src/app/shared/components/emoji-button/emoji-button.component.ts
+++ b/src/app/shared/components/emoji-button/emoji-button.component.ts
@@ -1,16 +1,16 @@
-import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { Component, input, output } from '@angular/core';
 
 @Component({
-    selector: 'app-emoji-button',
-    templateUrl: './emoji-button.component.html',
-    styleUrls: ['./emoji-button.component.scss'],
-    standalone: true,
+  selector: 'app-emoji-button',
+  templateUrl: './emoji-button.component.html',
+  styleUrls: ['./emoji-button.component.scss'],
+  standalone: true,
 })
 export class EmojiButtonComponent {
-  @Input() emoji: string;
-  @Input() className: string;
-  @Input() btnId: string;
-  @Output() btnClick = new EventEmitter();
-  @Input() showLink = false;
-  @Input() disabled = false;
+  emoji = input<string>();
+  className = input<string>();
+  btnId = input<string>();
+  btnClick = output();
+  showLink = input(false);
+  disabled = input(false);
 }