diff --git a/apps/red-ui/src/app/modules/file-preview/components/structured-component-management/structured-component-management.component.html b/apps/red-ui/src/app/modules/file-preview/components/structured-component-management/structured-component-management.component.html
index 575c6a236..8ce12b487 100644
--- a/apps/red-ui/src/app/modules/file-preview/components/structured-component-management/structured-component-management.component.html
+++ b/apps/red-ui/src/app/modules/file-preview/components/structured-component-management/structured-component-management.component.html
@@ -3,7 +3,7 @@
     <iqser-popup-filter [primaryFiltersSlug]="'componentLogFilters'" [attr.help-mode-key]="'filter_components'"></iqser-popup-filter>
 </div>
 
-<div *ngIf="componentLogService.all$ | async as components" class="components-container" id="components-view">
+<div class="components-container" id="components-view">
     <div class="component-row">
         <div class="header">
             <div class="component">{{ 'component-management.table-header.component' | translate }}</div>
@@ -12,7 +12,7 @@
         <div class="row-separator"></div>
     </div>
 
-    <div *ngFor="let entry of components" class="component-row">
+    <div *ngFor="let entry of filteredComponents()" class="component-row">
         <redaction-editable-structured-component-value
             #editableComponent
             [entry]="entry"
diff --git a/apps/red-ui/src/app/modules/file-preview/components/structured-component-management/structured-component-management.component.ts b/apps/red-ui/src/app/modules/file-preview/components/structured-component-management/structured-component-management.component.ts
index 293380d6e..d40751f9e 100644
--- a/apps/red-ui/src/app/modules/file-preview/components/structured-component-management/structured-component-management.component.ts
+++ b/apps/red-ui/src/app/modules/file-preview/components/structured-component-management/structured-component-management.component.ts
@@ -1,21 +1,22 @@
-import { Component, effect, Input, OnInit, signal, ViewChildren } from '@angular/core';
+import { Component, computed, effect, Input, OnInit, ViewChildren } from '@angular/core';
 import { List } from '@common-ui/utils';
 import { IconButtonTypes, LoadingService } from '@iqser/common-ui';
 import { ComponentLogEntry, Dictionary, File, IComponentLogEntry, WorkflowFileStatuses } from '@red/domain';
-import { combineLatest, firstValueFrom, Observable } from 'rxjs';
+import { firstValueFrom, map } from 'rxjs';
 import { EditableStructuredComponentValueComponent } from '../editable-structured-component-value/editable-structured-component-value.component';
 import { FilterService, PopupFilterComponent } from '@common-ui/filtering';
 import { ComponentLogFilterService } from '../../services/component-log-filter.service';
-import { AsyncPipe, NgForOf, NgIf } from '@angular/common';
+import { NgForOf } from '@angular/common';
 import { TranslateModule } from '@ngx-translate/core';
 import { FilePreviewStateService } from '../../services/file-preview-state.service';
 import { ComponentLogService } from '@services/entity-services/component-log.service';
+import { toSignal } from '@angular/core/rxjs-interop';
 
 @Component({
     selector: 'redaction-structured-component-management',
     templateUrl: './structured-component-management.component.html',
     styleUrls: ['./structured-component-management.component.scss'],
-    imports: [PopupFilterComponent, NgIf, AsyncPipe, TranslateModule, NgForOf, EditableStructuredComponentValueComponent],
+    imports: [PopupFilterComponent, TranslateModule, NgForOf, EditableStructuredComponentValueComponent],
 })
 export class StructuredComponentManagementComponent implements OnInit {
     protected readonly iconButtonTypes = IconButtonTypes;
@@ -23,6 +24,12 @@ export class StructuredComponentManagementComponent implements OnInit {
     @Input() dictionaries: Dictionary[];
     @ViewChildren('editableComponent') editableComponents: List<EditableStructuredComponentValueComponent>;
 
+    readonly filteredComponents = computed(() => this.#filteredComponents);
+    readonly #displayedComponents = toSignal(this.componentLogService.all$);
+    readonly #filterModel = toSignal(
+        this._filterService.getFilterModels$('componentLogFilters').pipe(map(filters => (filters ? [...filters] : []))),
+    );
+
     constructor(
         private readonly _loadingService: LoadingService,
         private readonly _componentLogFilterService: ComponentLogFilterService,
@@ -40,6 +47,13 @@ export class StructuredComponentManagementComponent implements OnInit {
         return this.file.workflowStatus !== WorkflowFileStatuses.APPROVED;
     }
 
+    get #filteredComponents() {
+        if (this.#filterModel() && this.#displayedComponents()) {
+            return this._componentLogFilterService.filterComponents(this.#displayedComponents(), this.#filterModel());
+        }
+        return this.#displayedComponents();
+    }
+
     async ngOnInit(): Promise<void> {
         await this.#loadData();
     }
diff --git a/apps/red-ui/src/app/modules/file-preview/services/component-log-filter.service.ts b/apps/red-ui/src/app/modules/file-preview/services/component-log-filter.service.ts
index 8f58531d7..05cc59d7f 100644
--- a/apps/red-ui/src/app/modules/file-preview/services/component-log-filter.service.ts
+++ b/apps/red-ui/src/app/modules/file-preview/services/component-log-filter.service.ts
@@ -1,15 +1,19 @@
-import { Injectable } from '@angular/core';
+import { inject, Injectable } from '@angular/core';
 import { ComponentLogEntry } from '@red/domain';
-import { INestedFilter, NestedFilter } from '@common-ui/filtering';
+import { IFilterGroup, INestedFilter, keyChecker, NestedFilter } from '@common-ui/filtering';
+import { TranslateService } from '@ngx-translate/core';
+import { sortArray } from '@utils/sorters/custom-sort';
 
 @Injectable()
 export class ComponentLogFilterService {
+    readonly #translateService = inject(TranslateService);
+
     filterGroups(entities: ComponentLogEntry[]) {
         const allDistinctComponentLogs = new Set<string>();
 
         entities?.forEach(entry => allDistinctComponentLogs.add(entry.name));
 
-        const componentLogFilters = [...allDistinctComponentLogs].map(
+        const componentLogFilters = sortArray([...allDistinctComponentLogs]).map(
             id =>
                 new NestedFilter({
                     id: id,
@@ -21,7 +25,9 @@ export class ComponentLogFilterService {
             {
                 slug: 'componentLogFilters',
                 filters: componentLogFilters,
-            },
+                checker: keyChecker('name'),
+                filterceptionPlaceholder: this.#translateService.instant('component-management.filter.search-placeholder'),
+            } as IFilterGroup,
         ];
     }
 
diff --git a/apps/red-ui/src/assets/i18n/redact/de.json b/apps/red-ui/src/assets/i18n/redact/de.json
index 729a985e0..21262e9aa 100644
--- a/apps/red-ui/src/assets/i18n/redact/de.json
+++ b/apps/red-ui/src/assets/i18n/redact/de.json
@@ -560,6 +560,9 @@
       "undo": "Zurücksetzen"
     },
     "components": "Komponenten",
+    "filter": {
+      "search-placeholder": "Suche nach Komponente..."
+    },
     "table-header": {
       "component": "Komponente",
       "value": "Wert"
diff --git a/apps/red-ui/src/assets/i18n/redact/en.json b/apps/red-ui/src/assets/i18n/redact/en.json
index 5ad618d8a..be2d24c2d 100644
--- a/apps/red-ui/src/assets/i18n/redact/en.json
+++ b/apps/red-ui/src/assets/i18n/redact/en.json
@@ -560,6 +560,9 @@
       "undo": "Undo"
     },
     "components": "Components",
+    "filter": {
+      "search-placeholder": "Search by component..."
+    },
     "table-header": {
       "component": "Component",
       "value": "Value"
diff --git a/apps/red-ui/src/assets/i18n/scm/de.json b/apps/red-ui/src/assets/i18n/scm/de.json
index 92fb5c9ef..672e93d8a 100644
--- a/apps/red-ui/src/assets/i18n/scm/de.json
+++ b/apps/red-ui/src/assets/i18n/scm/de.json
@@ -560,6 +560,9 @@
       "undo": "Zurücksetzen"
     },
     "components": "Komponenten",
+    "filter": {
+      "search-placeholder": "Suche nach Komponente..."
+    },
     "table-header": {
       "component": "Komponente",
       "value": "Wert"
diff --git a/apps/red-ui/src/assets/i18n/scm/en.json b/apps/red-ui/src/assets/i18n/scm/en.json
index 86bafda91..a90fa21d7 100644
--- a/apps/red-ui/src/assets/i18n/scm/en.json
+++ b/apps/red-ui/src/assets/i18n/scm/en.json
@@ -560,6 +560,9 @@
       "undo": "Undo"
     },
     "components": "Components",
+    "filter": {
+      "search-placeholder": "Search by component..."
+    },
     "table-header": {
       "component": "Component",
       "value": "Value"