diff --git a/src/app/widget-modules/components/application-frame/navigation/filter/filter.component.ts b/src/app/widget-modules/components/application-frame/navigation/filter/filter.component.ts
index cb53f30..69e9bce 100644
--- a/src/app/widget-modules/components/application-frame/navigation/filter/filter.component.ts
+++ b/src/app/widget-modules/components/application-frame/navigation/filter/filter.component.ts
@@ -2,6 +2,7 @@ import {Component, DestroyRef, inject} from '@angular/core';
 import {takeUntilDestroyed} from '@angular/core/rxjs-interop';
 import {ActivatedRoute, Params, Router} from '@angular/router';
 import {FormsModule, ReactiveFormsModule} from '@angular/forms';
+import {FilterStoreService} from '../../../../../services/filter-store.service';
 
 @Component({
   selector: 'app-filter',
@@ -12,6 +13,7 @@ import {FormsModule, ReactiveFormsModule} from '@angular/forms';
 export class FilterComponent {
   private router = inject(Router);
   private destroyRef = inject(DestroyRef);
+  private filterStore = inject(FilterStoreService);
 
   public value = '';
 
@@ -20,11 +22,13 @@ export class FilterComponent {
 
     activatedRoute.queryParams.pipe(takeUntilDestroyed(this.destroyRef)).subscribe((params: Params) => {
       const typedParams = params as {q: string};
-      if (typedParams.q) this.value = typedParams.q;
+      this.value = typedParams.q ?? '';
+      this.filterStore.updateSongFilter({q: this.value});
     });
   }
 
   public async valueChange(text: string): Promise<void> {
+    this.filterStore.updateSongFilter({q: text});
     const route = this.router.createUrlTree(['songs'], {
       queryParams: {q: text},
       queryParamsHandling: 'merge',