diff --git a/uniplanWeb/src/app/core/shared/add-form/add-form.html b/uniplanWeb/src/app/core/shared/add-form/add-form.html
index fa3e7a2..923fca3 100644
--- a/uniplanWeb/src/app/core/shared/add-form/add-form.html
+++ b/uniplanWeb/src/app/core/shared/add-form/add-form.html
@@ -1,4 +1,4 @@
-<h2 mat-dialog-title>{{title}}</h2>
+<h2 mat-dialog-title>{{title()}}</h2>
 <mat-dialog-content>
 
     <ng-content></ng-content>
diff --git a/uniplanWeb/src/app/core/shared/add-form/add-form.ts b/uniplanWeb/src/app/core/shared/add-form/add-form.ts
index de8e117..1c633e5 100644
--- a/uniplanWeb/src/app/core/shared/add-form/add-form.ts
+++ b/uniplanWeb/src/app/core/shared/add-form/add-form.ts
@@ -1,4 +1,4 @@
-import { Component, EventEmitter, Input, Output, ChangeDetectionStrategy } from '@angular/core';
+import { Component, EventEmitter, input, Output, ChangeDetectionStrategy } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import { MatDialogModule, MatDialogRef } from '@angular/material/dialog';
 import { MatInputModule } from '@angular/material/input';
@@ -13,7 +13,7 @@ import { TranslatePipe } from '@ngx-translate/core';
   imports: [MatDialogModule, FormsModule, MatInputModule, TranslatePipe],
 })
 export class AddForm {
-  @Input() title: string = '';
+  title = input<string>('');
 
   @Output() saveClicked = new EventEmitter<void>();
 }
diff --git a/uniplanWeb/src/app/core/shared/delete-form/delete-form.ts b/uniplanWeb/src/app/core/shared/delete-form/delete-form.ts
index a81695a..378de35 100644
--- a/uniplanWeb/src/app/core/shared/delete-form/delete-form.ts
+++ b/uniplanWeb/src/app/core/shared/delete-form/delete-form.ts
@@ -1,4 +1,4 @@
-import { Component, EventEmitter, Input, Output, ChangeDetectionStrategy } from '@angular/core';
+import { Component, EventEmitter, input, Output, ChangeDetectionStrategy } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import { MatDialogModule } from '@angular/material/dialog';
 import { MatInputModule } from '@angular/material/input';
@@ -12,7 +12,7 @@ import { TranslatePipe } from '@ngx-translate/core';
   imports: [MatDialogModule, FormsModule, MatInputModule, TranslatePipe],
 })
 export class DeleteForm {
-  @Input() title: string = '';
+  title = input<string>('');
 
   @Output() deleteClicked = new EventEmitter<void>();
 }
diff --git a/uniplanWeb/src/app/core/shared/edit-form/edit-form.html b/uniplanWeb/src/app/core/shared/edit-form/edit-form.html
index 558d849..14e5161 100644
--- a/uniplanWeb/src/app/core/shared/edit-form/edit-form.html
+++ b/uniplanWeb/src/app/core/shared/edit-form/edit-form.html
@@ -1,4 +1,4 @@
-<h2 mat-dialog-title>{{title}}</h2>
+<h2 mat-dialog-title>{{title()}}</h2>
 <mat-dialog-content>
 
     <ng-content></ng-content>
diff --git a/uniplanWeb/src/app/core/shared/edit-form/edit-form.ts b/uniplanWeb/src/app/core/shared/edit-form/edit-form.ts
index f560f97..f12e045 100644
--- a/uniplanWeb/src/app/core/shared/edit-form/edit-form.ts
+++ b/uniplanWeb/src/app/core/shared/edit-form/edit-form.ts
@@ -1,4 +1,4 @@
-import { Component, EventEmitter, Input, Output, ChangeDetectionStrategy } from '@angular/core';
+import { Component, EventEmitter, input, Output, ChangeDetectionStrategy } from '@angular/core';
 import { MatDialogModule } from '@angular/material/dialog';
 import { TranslatePipe } from '@ngx-translate/core';
 
@@ -12,7 +12,7 @@ import { TranslatePipe } from '@ngx-translate/core';
 
 })
 export class EditForm {
-  @Input() title: string = '';
+  title = input<string>('');
 
   @Output() saveClicked = new EventEmitter<void>();
 }
diff --git a/uniplanWeb/src/app/core/shared/filters-form/filters-form.html b/uniplanWeb/src/app/core/shared/filters-form/filters-form.html
index 7d5f50e..eb0b609 100644
--- a/uniplanWeb/src/app/core/shared/filters-form/filters-form.html
+++ b/uniplanWeb/src/app/core/shared/filters-form/filters-form.html
@@ -4,14 +4,14 @@
     <mat-option value>{{'shared.option-all' | translate}}</mat-option>
 
     @if (isObjectMode()) {
-      @for (option of objectOptions; track option) {
+      @for (option of objectOptions(); track option) {
         <mat-option
           [value]="option.id">
           {{ option.name }}
         </mat-option>
       }
     } @else {
-      @for (option of options; track option) {
+      @for (option of options(); track option) {
         <mat-option [value]="option">
           {{ option }}
         </mat-option>
diff --git a/uniplanWeb/src/app/core/shared/filters-form/filters-form.ts b/uniplanWeb/src/app/core/shared/filters-form/filters-form.ts
index a78b851..61da5a4 100644
--- a/uniplanWeb/src/app/core/shared/filters-form/filters-form.ts
+++ b/uniplanWeb/src/app/core/shared/filters-form/filters-form.ts
@@ -1,5 +1,5 @@
 
-import { Component, EventEmitter, Input, Output, ChangeDetectionStrategy } from '@angular/core';
+import { Component, EventEmitter, input, Output, ChangeDetectionStrategy } from '@angular/core';
 import { MatOptionModule } from '@angular/material/core';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatSelectModule } from '@angular/material/select';
@@ -13,14 +13,16 @@ import { TranslatePipe } from '@ngx-translate/core';
   styleUrl: './filters-form.scss',
   imports: [MatFormFieldModule, MatSelectModule, MatOptionModule, TranslatePipe],
 })
+
 export class FiltersForm {
-  @Input() label = '';
+  label = input<string>('');
 
-  @Input() options: string[] = [];
+  options = input<string[]>([]);
 
-  @Input() objectOptions: { id: string; name: string }[] = [];
+  objectOptions = input<{ id: string; name: string }[]>([]);
 
-  @Input() selected = '';
+  selected = input<string>('');
+  
   @Output() selectionChange = new EventEmitter<string>();
 
   onChange(value: string) {
diff --git a/uniplanWeb/src/app/core/shared/input-filter/input-filter.html b/uniplanWeb/src/app/core/shared/input-filter/input-filter.html
index 6a05b58..b0a8b63 100644
--- a/uniplanWeb/src/app/core/shared/input-filter/input-filter.html
+++ b/uniplanWeb/src/app/core/shared/input-filter/input-filter.html
@@ -1,10 +1,10 @@
 <mat-form-field appearance="outline" class="filter search-input"
     floatLabel="always">
-    <mat-label>{{ label }}</mat-label>
+    <mat-label>{{ label() }}</mat-label>
     <mat-icon matPrefix>search</mat-icon>
     <input
         matInput
         type="text"
-        [value]="searchText"
+        [value]="searchText()"
         (input)="searchTextChange.emit($any($event).target.value)" />
 </mat-form-field>
diff --git a/uniplanWeb/src/app/core/shared/input-filter/input-filter.ts b/uniplanWeb/src/app/core/shared/input-filter/input-filter.ts
index 1f70c70..49074de 100644
--- a/uniplanWeb/src/app/core/shared/input-filter/input-filter.ts
+++ b/uniplanWeb/src/app/core/shared/input-filter/input-filter.ts
@@ -1,18 +1,18 @@
 
-import { Component, EventEmitter, Input, Output, ChangeDetectionStrategy } from '@angular/core';
+import { Component, EventEmitter, input, Output, ChangeDetectionStrategy } from '@angular/core';
 import { MatIconModule } from '@angular/material/icon';
 import { MatFormField, MatInputModule } from '@angular/material/input';
 
 @Component({
   selector: 'app-input-filter',
-  imports: [MatFormField, MatInputModule, MatIconModule],
   standalone: true,
   templateUrl: './input-filter.html',
   changeDetection: ChangeDetectionStrategy.Eager,
   styleUrl: './input-filter.scss',
+  imports: [MatFormField, MatInputModule, MatIconModule],
 })
 export class InputFilter {
-  @Input() label: string = '';
-  @Input() searchText = '';
+  label = input<string>('');
+  searchText = input<string>('');
   @Output() searchTextChange = new EventEmitter<string>();
 }
diff --git a/uniplanWeb/src/app/core/shared/main-panel/main-panel.ts b/uniplanWeb/src/app/core/shared/main-panel/main-panel.ts
index d205b1b..7b0eb84 100644
--- a/uniplanWeb/src/app/core/shared/main-panel/main-panel.ts
+++ b/uniplanWeb/src/app/core/shared/main-panel/main-panel.ts
@@ -18,6 +18,9 @@ import { FacultyService } from '../../../features/faculty/faculty-service';
 
 @Component({
   selector: 'app-main-panel',
+  templateUrl: './main-panel.html',
+  changeDetection: ChangeDetectionStrategy.Eager,
+  styleUrl: './main-panel.scss',
   imports: [
     FacultyOptions,
     MajorOptions,
@@ -27,11 +30,7 @@ import { FacultyService } from '../../../features/faculty/faculty-service';
     StudentOptions,
     StudentTable,
     StudentFilters
-],
-  standalone: true,
-  templateUrl: './main-panel.html',
-  changeDetection: ChangeDetectionStrategy.Eager,
-  styleUrl: './main-panel.scss',
+  ],
 })
 export class MainPanel {
   currentView = 'home';
diff --git a/uniplanWeb/src/app/core/shared/main-panel/table/table.ts b/uniplanWeb/src/app/core/shared/main-panel/table/table.ts
index 94edec0..0cac9cc 100644
--- a/uniplanWeb/src/app/core/shared/main-panel/table/table.ts
+++ b/uniplanWeb/src/app/core/shared/main-panel/table/table.ts
@@ -2,10 +2,9 @@ import { Component, ViewChild, ViewContainerRef, ChangeDetectionStrategy } from
 
 @Component({
   selector: 'app-table',
-  standalone: true,
-  imports: [],
   templateUrl: './table.html',
   changeDetection: ChangeDetectionStrategy.Eager,
   styleUrl: './table.scss',
+  imports: [],
 })
-export class Table {}
+export class Table { }
diff --git a/uniplanWeb/src/app/core/shared/navmenu-component/navmenu-component.ts b/uniplanWeb/src/app/core/shared/navmenu-component/navmenu-component.ts
index d28b20a..40c193e 100644
--- a/uniplanWeb/src/app/core/shared/navmenu-component/navmenu-component.ts
+++ b/uniplanWeb/src/app/core/shared/navmenu-component/navmenu-component.ts
@@ -6,11 +6,10 @@ import { LoginAuthService } from '../../../services/login-auth-service';
 
 @Component({
   selector: 'app-navmenu-component',
-  standalone: true,
-  imports: [CommonModule],
   templateUrl: './navmenu-component.html',
   changeDetection: ChangeDetectionStrategy.Eager,
   styleUrls: ['./navmenu-component.scss'],
+  imports: [CommonModule],
 })
 export class NavmenuComponent implements OnInit {
   isSidebarCollapsed = false;
@@ -19,7 +18,7 @@ export class NavmenuComponent implements OnInit {
   constructor(
     public authService: LoginAuthService,
     public viewService: ViewService
-  ) {}
+  ) { }
 
   ngOnInit(): void {
     this.checkViewport();
diff --git a/uniplanWeb/src/app/features/faculty/faculty-add-form/faculty-add-form.ts b/uniplanWeb/src/app/features/faculty/faculty-add-form/faculty-add-form.ts
index 8b75138..1e653cc 100644
--- a/uniplanWeb/src/app/features/faculty/faculty-add-form/faculty-add-form.ts
+++ b/uniplanWeb/src/app/features/faculty/faculty-add-form/faculty-add-form.ts
@@ -16,6 +16,9 @@ import { TranslatePipe } from '@ngx-translate/core';
 
 @Component({
   selector: 'app-faculty-add-form',
+  templateUrl: './faculty-add-form.html',
+  changeDetection: ChangeDetectionStrategy.Eager,
+  styleUrl: './faculty-add-form.scss',
   imports: [
     MatDialogModule,
     MatFormField,
diff --git a/uniplanWeb/src/app/features/faculty/faculty-options/faculty-options.ts b/uniplanWeb/src/app/features/faculty/faculty-options/faculty-options.ts
index 78bb40f..2fa6474 100644
--- a/uniplanWeb/src/app/features/faculty/faculty-options/faculty-options.ts
+++ b/uniplanWeb/src/app/features/faculty/faculty-options/faculty-options.ts
@@ -1,4 +1,3 @@
-
 import { Component, ChangeDetectionStrategy } from '@angular/core';
 import { MatButtonModule } from '@angular/material/button';
 import { MatIconModule } from '@angular/material/icon';
diff --git a/uniplanWeb/src/app/features/major/major-filters/major-filters.ts b/uniplanWeb/src/app/features/major/major-filters/major-filters.ts
index ae46530..ac52aba 100644
--- a/uniplanWeb/src/app/features/major/major-filters/major-filters.ts
+++ b/uniplanWeb/src/app/features/major/major-filters/major-filters.ts
@@ -1,5 +1,5 @@
 
-import { Component, EventEmitter, Input, Output, ChangeDetectionStrategy } from '@angular/core';
+import { Component, EventEmitter, input, Output, ChangeDetectionStrategy, model } from '@angular/core';
 import { FiltersForm } from '../../../core/shared/filters-form/filters-form';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatInputModule } from '@angular/material/input';
@@ -25,14 +25,14 @@ import { TranslatePipe } from '@ngx-translate/core';
 export class MajorFilters {
   @Input() internalSearchText = '';
 
-  @Input() faculties: { id: string; name: string }[] = [];
+  faculties = input<{ id: string; name: string }[]>([]);
 
-  @Input() types: string[] = [];
-  @Input() subtypes: string[] = [];
+  types = input<string[]>([]);
+  subtypes = input<string[]>([]);
 
-  @Input() selectedFaculty = '';
-  @Input() selectedType = '';
-  @Input() selectedSubtype = '';
+  selectedFaculty = input<string>('');
+  selectedType = input<string>('');
+  selectedSubtype = input<string>('');
 
   @Output() facultyChange = new EventEmitter<string>();
   @Output() typeChange = new EventEmitter<string>();
diff --git a/uniplanWeb/src/app/features/major/major-options/major-options.ts b/uniplanWeb/src/app/features/major/major-options/major-options.ts
index e5a0660..233bebb 100644
--- a/uniplanWeb/src/app/features/major/major-options/major-options.ts
+++ b/uniplanWeb/src/app/features/major/major-options/major-options.ts
@@ -9,18 +9,18 @@ import { AddButton } from '../../../core/shared/add-button/add-button';
 
 @Component({
   selector: 'app-major-options',
+  templateUrl: './major-options.html',
+  changeDetection: ChangeDetectionStrategy.Eager,
+  styleUrl: './major-options.scss',
   imports: [
     MatTableModule,
     MatIconModule,
     MatButtonModule,
     AddButton
-],
-  templateUrl: './major-options.html',
-  changeDetection: ChangeDetectionStrategy.Eager,
-  styleUrl: './major-options.scss',
+  ],
 })
 export class MajorOptions {
-  constructor(private dialog: MatDialog) {}
+  constructor(private dialog: MatDialog) { }
 
   openAddForm() {
     this.dialog.open(MajorAddForm, {
diff --git a/uniplanWeb/src/app/features/major/major-table/major-table.ts b/uniplanWeb/src/app/features/major/major-table/major-table.ts
index b0b40a2..3e1f002 100644
--- a/uniplanWeb/src/app/features/major/major-table/major-table.ts
+++ b/uniplanWeb/src/app/features/major/major-table/major-table.ts
@@ -1,5 +1,5 @@
 
-import { Component, Input, OnInit, ChangeDetectionStrategy } from '@angular/core';
+import { Component, input, OnInit, ChangeDetectionStrategy } from '@angular/core';
 import { MatButtonModule } from '@angular/material/button';
 import { MatIconModule } from '@angular/material/icon';
 import { MatTableModule } from '@angular/material/table';
@@ -31,10 +31,10 @@ export class MajorTable implements OnInit {
   dataSource: MajorElm[] = [];
   facultyMap = new Map<string, string>();
 
-  @Input() searchText = '';
-  @Input() faculty: string = '';
-  @Input() type: string = '';
-  @Input() subtype: string = '';
+  searchText = input<string>('');
+  faculty = input<string>('');
+  type = input<string>('');
+  subtype = input<string>('');
 
   constructor(
     private dialog: MatDialog,
@@ -70,13 +70,13 @@ export class MajorTable implements OnInit {
 
   get filteredMajors(): MajorElm[] {
     return this.dataSource.filter((major) => {
-      const matchesFaculty = !this.faculty || major.facultyId === this.faculty;
-      const matchesType = !this.type || major.courseType === this.type;
+      const matchesFaculty = !this.faculty() || major.facultyId === this.faculty();
+      const matchesType = !this.type() || major.courseType === this.type();
       const matchesSubtype =
-        !this.subtype || major.courseSubtype === this.subtype;
+        !this.subtype() || major.courseSubtype === this.subtype();
       const matchesSearch =
-        !this.searchText ||
-        major.majorName.toLowerCase().includes(this.searchText.toLowerCase());
+        !this.searchText() ||
+        major.majorName.toLowerCase().includes(this.searchText().toLowerCase());
 
       return matchesFaculty && matchesType && matchesSubtype && matchesSearch;
     });
diff --git a/uniplanWeb/src/app/features/student/student-filters/student-filters.html b/uniplanWeb/src/app/features/student/student-filters/student-filters.html
index c753b8d..8e27448 100644
--- a/uniplanWeb/src/app/features/student/student-filters/student-filters.html
+++ b/uniplanWeb/src/app/features/student/student-filters/student-filters.html
@@ -2,17 +2,17 @@
     <app-input-filter
        [label]="'features.name-label' | translate"
         [(searchText)]="internalSearchText"
-        (searchTextChange)="searchTextChange.emit($event)">></app-input-filter>
+        (searchTextChange)="searchTextChange.emit($event)"></app-input-filter>
 
     <app-input-filter
         [label]="'student.faculty-number-label' | translate"
         [(searchText)]="internalSearchFacNum"
-        (searchTextChange)="searchFacNumChange.emit($event)">></app-input-filter>
+        (searchTextChange)="searchFacNumChange.emit($event)"></app-input-filter>
 
     <app-input-filter
         [label]="'features.major-label' | translate"
         [(searchText)]="internalSearchMajor"
-        (searchTextChange)="searchMajorChange.emit($event)">></app-input-filter>
+        (searchTextChange)="searchMajorChange.emit($event)"></app-input-filter>
 
     <app-filters-form
         [label]="'features.study-mode-label' | translate"
diff --git a/uniplanWeb/src/app/features/student/student-filters/student-filters.ts b/uniplanWeb/src/app/features/student/student-filters/student-filters.ts
index 66b8b2b..0dca13f 100644
--- a/uniplanWeb/src/app/features/student/student-filters/student-filters.ts
+++ b/uniplanWeb/src/app/features/student/student-filters/student-filters.ts
@@ -1,4 +1,4 @@
-import { Component, EventEmitter, Input, Output, ChangeDetectionStrategy } from '@angular/core';
+import { Component, EventEmitter, input, model, Output, ChangeDetectionStrategy } from '@angular/core';
 import { InputFilter } from '../../../core/shared/input-filter/input-filter';
 import { FiltersForm } from '../../../core/shared/filters-form/filters-form';
 import { TranslatePipe } from '@ngx-translate/core';
@@ -14,13 +14,13 @@ export class StudentFilters {
   @Input() internalSearchText = '';
   @Output() searchTextChange = new EventEmitter<string>();
 
-  @Input() internalSearchFacNum = '';
+  internalSearchFacNum = model<string>('');
   @Output() searchFacNumChange = new EventEmitter<string>();
 
-  @Input() internalSearchMajor = '';
+  internalSearchMajor = model<string>('');
   @Output() searchMajorChange = new EventEmitter<string>();
 
-  @Input() subtypes: string[] = [];
-  @Input() selectedSubtype = '';
+  subtypes = input<string[]>([]);
+  selectedSubtype = input<string>('');
   @Output() subtypeChange = new EventEmitter<string>();
 }
diff --git a/uniplanWeb/src/app/features/student/student-options/student-options.ts b/uniplanWeb/src/app/features/student/student-options/student-options.ts
index 04b7c24..61ede14 100644
--- a/uniplanWeb/src/app/features/student/student-options/student-options.ts
+++ b/uniplanWeb/src/app/features/student/student-options/student-options.ts
@@ -5,13 +5,13 @@ import { StudentAddForm } from '../student-add-form/student-add-form';
 
 @Component({
   selector: 'app-student-options',
-  imports: [AddButton],
   templateUrl: './student-options.html',
   changeDetection: ChangeDetectionStrategy.Eager,
   styleUrl: './student-options.scss',
+  imports: [AddButton],
 })
 export class StudentOptions {
-  constructor(private dialog: MatDialog) {}
+  constructor(private dialog: MatDialog) { }
 
   openAddForm() {
     this.dialog.open(StudentAddForm, {
diff --git a/uniplanWeb/src/app/features/student/student-table/student-table.html b/uniplanWeb/src/app/features/student/student-table/student-table.html
index e6bc972..bdc175a 100644
--- a/uniplanWeb/src/app/features/student/student-table/student-table.html
+++ b/uniplanWeb/src/app/features/student/student-table/student-table.html
@@ -1,6 +1,5 @@
 <div class="table-wrapper">
-    <table mat-table [dataSource]="dataSourceFilter"
-        class="mat-elevation-z8 table-header">
+    <table mat-table [dataSource]="dataSourceFilter" class="mat-elevation-z8 table-header">
         <ng-container matColumnDef="position">
             <th mat-header-cell *matHeaderCellDef class="col-position"> No.
             </th>
@@ -48,8 +47,7 @@
     </table>
 
     <div class="scrollable-body">
-        <table mat-table [dataSource]="dataSourceFilter"
-            class="mat-elevation-z8 table-body">
+        <table mat-table [dataSource]="dataSourceFilter" class="mat-elevation-z8 table-body">
             <ng-container matColumnDef="position">
                 <td mat-cell *matCellDef="let element" class="col-position">
                     {{element.position}} </td>
@@ -87,12 +85,10 @@
 
             <ng-container matColumnDef="actions">
                 <td mat-cell *matCellDef="let element" class="col-actions">
-                    <button mat-icon-button color="primary"
-                        (click)="onEdit(element)">
+                    <button mat-icon-button color="primary" (click)="onEdit(element)">
                         <mat-icon>edit</mat-icon>
                     </button>
-                    <button mat-icon-button color="warn"
-                        (click)="onDelete(element)">
+                    <button mat-icon-button color="warn" (click)="onDelete(element)">
                         <mat-icon>delete</mat-icon>
                     </button>
                 </td>
@@ -101,4 +97,4 @@
             <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
         </table>
     </div>
-</div>
+</div>
\ No newline at end of file
diff --git a/uniplanWeb/src/app/features/student/student-table/student-table.ts b/uniplanWeb/src/app/features/student/student-table/student-table.ts
index 3bc330c..700665b 100644
--- a/uniplanWeb/src/app/features/student/student-table/student-table.ts
+++ b/uniplanWeb/src/app/features/student/student-table/student-table.ts
@@ -1,9 +1,10 @@
 import {
   Component,
-  Input,
+  input,
   SimpleChanges,
   OnChanges,
   OnInit,
+  effect,
   ChangeDetectionStrategy
 } from '@angular/core';
 import { StudentElm } from '../../../core/interfaces/student-elm';
@@ -119,7 +120,7 @@ export class StudentTable implements OnInit, OnChanges {
   @Input() searchMajor = '';
   @Input() subtype = '';
 
-  @Input() subtypes: string[] = [];
+  subtypes = input<string[]>([]);
 
   displayedColumns: string[] = [
     'position',
@@ -135,25 +136,27 @@ export class StudentTable implements OnInit, OnChanges {
   originalData: StudentElm[] = ELEMENT_STUDENT_DATA;
   dataSourceFilter: StudentElm[] = ELEMENT_STUDENT_DATA;
 
-  ngOnInit(): void {
-    this.subtypes = StudentTable.getFilterOptions(this.originalData).subtypes;
-    this.applyFilters();
-  }
+  constructor() {
+    effect(() => {
+      this.searchText();
+      this.searchMajor();
+      this.searchFacNum();
+      this.subtype();
 
-  ngOnChanges(changes: SimpleChanges): void {
-    this.applyFilters();
+      this.applyFilters();
+    });
   }
 
   applyFilters(): void {
-    const name = this.searchText.toLowerCase();
-    const major = this.searchMajor.toLowerCase();
-    const facNum = this.searchFacNum;
+    const name = this.searchText().toLowerCase();
+    const major = this.searchMajor().toLowerCase();
+    const facNum = this.searchFacNum();
 
     this.dataSourceFilter = this.originalData.filter((student) => {
       const matchName = !name || student.name.toLowerCase().includes(name);
       const matchMajor = !major || student.major.toLowerCase().includes(major);
       const matchFacNum = !facNum || student.facultyNumber.includes(facNum);
-      const matchSubtype = !this.subtype || student.subtype === this.subtype;
+      const matchSubtype = !this.subtype() || student.subtype === this.subtype();
 
       return matchName && matchMajor && matchFacNum && matchSubtype;
     });
diff --git a/uniplanWeb/src/app/layout-component/layout-component.ts b/uniplanWeb/src/app/layout-component/layout-component.ts
index 20f4876..c4ca360 100644
--- a/uniplanWeb/src/app/layout-component/layout-component.ts
+++ b/uniplanWeb/src/app/layout-component/layout-component.ts
@@ -4,10 +4,10 @@ import { MainPanel } from "../core/shared/main-panel/main-panel";
 
 @Component({
   selector: 'app-layout-component',
-  imports: [NavmenuComponent, MainPanel],
   templateUrl: './layout-component.html',
   changeDetection: ChangeDetectionStrategy.Eager,
-  styleUrl: './layout-component.scss'
+  styleUrl: './layout-component.scss',
+  imports: [NavmenuComponent, MainPanel],
 })
 export class LayoutComponent {