diff --git a/EnvelopeGenerator.GeneratorAPI/ClientApp/envelope-generator-ui/src/app/components/envelope-table/envelope-table.component.html b/EnvelopeGenerator.GeneratorAPI/ClientApp/envelope-generator-ui/src/app/components/envelope-table/envelope-table.component.html
index af46cd56..f3e30cc5 100644
--- a/EnvelopeGenerator.GeneratorAPI/ClientApp/envelope-generator-ui/src/app/components/envelope-table/envelope-table.component.html
+++ b/EnvelopeGenerator.GeneratorAPI/ClientApp/envelope-generator-ui/src/app/components/envelope-table/envelope-table.component.html
@@ -3,11 +3,11 @@
     <input matInput (keyup)="applyFilter($event)" placeholder="Ex. ium" #input>
 </mat-form-field>
 
-<table #table mat-table [dataSource]="dataSource" class="mat-elevation-z8">
+<table #table mat-table [dataSource]="dataSource" class="mat-elevation-z8" matSort>
 
     @for (colId of displayedColumns; track colId) {
     <ng-container matColumnDef="{{colId}}">
-        <th mat-header-cell *matHeaderCellDef> {{schema[colId].header}} </th>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{schema[colId].header}} </th>
         <td mat-cell *matCellDef="let element"> {{schema[colId].field(element)}} </td>
     </ng-container>
     }
@@ -27,22 +27,7 @@
     </ng-container>
 
     <!-- Expanded Content Column - The detail row is made up of this one column that spans across all columns -->
-    <ng-container matColumnDef="expandedDetail">
-        <td mat-cell *matCellDef="let element" [attr.colspan]="columnsToDisplayWithExpand.length">
-            <div class="example-element-detail" [@detailExpand]="element == expandedElement ? 'expanded' : 'collapsed'">
-                <div class="example-element-diagram">
-                    <div class="example-element-position"> {{"element.position"}} </div>
-                    <div class="example-element-symbol"> {{"element.symbol"}} </div>
-                    <div class="example-element-name"> {{"element.name"}} </div>
-                    <div class="example-element-weight"> {{"element.weight"}} </div>
-                </div>
-                <div class="example-element-description">
-                    {{"element.description"}}
-                    <span class="example-element-description-attribution"> -- Wikipedia </span>
-                </div>
-            </div>
-        </td>
-    </ng-container>
+
 
     <tr mat-header-row *matHeaderRowDef="columnsToDisplayWithExpand"></tr>
     <tr mat-row *matRowDef="let element; columns: columnsToDisplayWithExpand;" class="example-element-row"
diff --git a/EnvelopeGenerator.GeneratorAPI/ClientApp/envelope-generator-ui/src/app/components/envelope-table/envelope-table.component.ts b/EnvelopeGenerator.GeneratorAPI/ClientApp/envelope-generator-ui/src/app/components/envelope-table/envelope-table.component.ts
index f48de529..b0e1ef84 100644
--- a/EnvelopeGenerator.GeneratorAPI/ClientApp/envelope-generator-ui/src/app/components/envelope-table/envelope-table.component.ts
+++ b/EnvelopeGenerator.GeneratorAPI/ClientApp/envelope-generator-ui/src/app/components/envelope-table/envelope-table.component.ts
@@ -5,15 +5,15 @@ import { CommonModule } from '@angular/common'
 import { MatIconModule } from '@angular/material/icon';
 import { MatButtonModule } from '@angular/material/button';
 import { animate, state, style, transition, trigger } from '@angular/animations';
-
 import { MatInputModule } from '@angular/material/input';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import {MatPaginator, MatPaginatorModule} from '@angular/material/paginator';
+import {MatSort, MatSortModule} from '@angular/material/sort';
 
 @Component({
   selector: 'app-envelope-table',
   standalone: true,
-  imports: [MatTableModule, CommonModule, MatTableModule, MatButtonModule, MatIconModule, MatFormFieldModule, MatInputModule, MatTableModule, MatPaginator, MatPaginatorModule],
+  imports: [MatTableModule, CommonModule, MatTableModule, MatButtonModule, MatIconModule, MatFormFieldModule, MatInputModule, MatTableModule, MatPaginator, MatPaginatorModule, MatSort, MatSortModule],
   templateUrl: './envelope-table.component.html',
   animations: [
     trigger('detailExpand', [
@@ -61,6 +61,8 @@ export class EnvelopeTableComponent implements AfterViewInit  {
 
   @ViewChild(MatPaginator) paginator!: MatPaginator;
 
+  @ViewChild(MatSort) sort!: MatSort;
+
   dataSource = new MatTableDataSource();
 
   constructor(private erService: EnvelopeReceiverService) {
@@ -75,6 +77,7 @@ export class EnvelopeTableComponent implements AfterViewInit  {
   async ngAfterViewInit() {
     this.dataSource.paginator = this.paginator;
     this.dataSource.data = await this.erService.getEnvelopeReceiverAsync(this.options);
+    this.dataSource.sort = this.sort;
   }
  
   public updateTable() {
@@ -87,9 +90,10 @@ export class EnvelopeTableComponent implements AfterViewInit  {
 
   applyFilter(event: Event) {
     const filterValue = (event.target as HTMLInputElement).value;
+    this.dataSource.filter = filterValue.trim().toLowerCase();
 
-    this.dataSource.filter = "test82";
-
-    console.log(this.dataSource.filteredData)
+    if (this.dataSource.paginator) {
+      this.dataSource.paginator.firstPage();
+    }
   }
 }
\ No newline at end of file