diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts
index f715a74..c08a075 100644
--- a/src/app/app-routing.module.ts
+++ b/src/app/app-routing.module.ts
@@ -7,7 +7,7 @@ const routes: Routes = [
   {
     path: 'products',
     loadChildren: () =>
-      import('./products-overview/products-overview.module').then(m => m.ProductsOverviewModule)
+      import('./products/products.module').then(m => m.ProductsModule)
   }
 ];
 
diff --git a/src/app/products-overview/products-overview.component.ts b/src/app/products-overview/products-overview.component.ts
deleted file mode 100644
index 821f586..0000000
--- a/src/app/products-overview/products-overview.component.ts
+++ /dev/null
@@ -1,28 +0,0 @@
-import { Component, OnInit } from '@angular/core';
-import { Product } from "../shared/product";
-import { ProductsService } from "../products/shared/products.service";
-import { Observable, Subscription } from "rxjs";
-
-@Component({
-  selector: 'ov-products-overview',
-  templateUrl: './products-overview.component.html',
-  styleUrls: ['./products-overview.component.scss']
-})
-export class ProductsOverviewComponent implements OnInit {
-  products$: Observable<Product[]>
-
-  query: string;
-
-  constructor(private productsService: ProductsService) {
-    this.products$ = this.productsService.products$;
-  }
-
-  onSearch(query: string): void {
-    this.query = query;
-    this.productsService.get({filter: query});
-  }
-
-  ngOnInit(): void {
-    this.productsService.get();
-  }
-}
diff --git a/src/app/products-overview/products-overview.module.ts b/src/app/products-overview/products-overview.module.ts
deleted file mode 100644
index f4c0ce8..0000000
--- a/src/app/products-overview/products-overview.module.ts
+++ /dev/null
@@ -1,22 +0,0 @@
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { ProductsOverviewComponent } from './products-overview.component';
-import { ProductsModule } from "../products/products.module";
-import { RouterModule, Routes } from "@angular/router";
-
-const routes: Routes = [
-  { path: '', component: ProductsOverviewComponent}
-];
-
-@NgModule({
-  declarations: [
-    ProductsOverviewComponent
-  ],
-  imports: [
-    CommonModule,
-    ProductsModule,
-    RouterModule.forChild(routes)
-  ],
-  exports: [ProductsOverviewComponent]
-})
-export class ProductsOverviewModule { }
diff --git a/src/app/products-overview/products-overview.component.html b/src/app/products/list/products-list.component.html
similarity index 100%
rename from src/app/products-overview/products-overview.component.html
rename to src/app/products/list/products-list.component.html
diff --git a/src/app/products-overview/products-overview.component.scss b/src/app/products/list/products-list.component.scss
similarity index 100%
rename from src/app/products-overview/products-overview.component.scss
rename to src/app/products/list/products-list.component.scss
diff --git a/src/app/products-overview/products-overview.component.spec.ts b/src/app/products/list/products-list.component.spec.ts
similarity index 96%
rename from src/app/products-overview/products-overview.component.spec.ts
rename to src/app/products/list/products-list.component.spec.ts
index d4672e4..2eb402e 100644
--- a/src/app/products-overview/products-overview.component.spec.ts
+++ b/src/app/products/list/products-list.component.spec.ts
@@ -1,5 +1,5 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { ProductsOverviewComponent } from './products-overview.component';
+import { ProductsOverviewComponent } from './products-list.component';
 import { Type } from "@angular/core";
 import { By } from "@angular/platform-browser";
 import { ProductsComponent } from "../products/products.component";
diff --git a/src/app/products/list/products-list.component.ts b/src/app/products/list/products-list.component.ts
new file mode 100644
index 0000000..50f019a
--- /dev/null
+++ b/src/app/products/list/products-list.component.ts
@@ -0,0 +1,32 @@
+import { Component } from '@angular/core';
+import { Product } from "../../shared/product";
+import { ProductsService } from "../shared/products.service";
+import { Observable, Subject } from "rxjs";
+import { distinctUntilChanged, map, startWith, switchMap } from 'rxjs/operators';
+
+@Component({
+  templateUrl: './products-list.component.html',
+  styleUrls: ['./products-list.component.scss']
+})
+export class ProductsListComponent {
+  private readonly searchSubj = new Subject<string>();
+  public readonly products$: Observable<Product[]>
+
+  query: string;
+
+  constructor(private productsService: ProductsService) {
+    const search$ = this.searchSubj.asObservable().pipe(
+      map(s => s.toLowerCase()),
+      distinctUntilChanged(),
+      startWith('')
+    );
+    this.products$ = search$.pipe(
+      switchMap(filter => this.productsService.getFiltered$({filter}))
+    );
+  }
+
+  onSearch(query: string): void {
+    this.searchSubj.next(query);
+  }
+
+}
diff --git a/src/app/products/products.module.ts b/src/app/products/products.module.ts
index a1c894d..1f3e1dc 100644
--- a/src/app/products/products.module.ts
+++ b/src/app/products/products.module.ts
@@ -1,20 +1,26 @@
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
+import { RouterModule, Routes } from '@angular/router';
 import { ProductsComponent } from "./products.component";
 import { ProductComponent } from "./product/product.component";
 import { SharedModule } from "../shared/shared.module";
 import { SearchComponent } from './search/search.component';
 import { FormsModule, ReactiveFormsModule } from "@angular/forms";
 import { ProductsFilterPipe } from './shared/products-filter.pipe';
+import { ProductsListComponent } from './list/products-list.component';
+
+const routes: Routes = [
+  { path: '', component: ProductsListComponent}
+];
 
 @NgModule({
-  declarations: [ProductsComponent, ProductComponent, SearchComponent, ProductsFilterPipe],
+  declarations: [ProductsComponent, ProductsListComponent, ProductComponent, SearchComponent, ProductsFilterPipe],
   imports: [
     CommonModule,
     SharedModule,
     FormsModule,
-    ReactiveFormsModule
+    ReactiveFormsModule,
+    RouterModule.forChild(routes)
   ],
-  exports: [ProductsComponent, SearchComponent, ProductsFilterPipe]
 })
 export class ProductsModule { }
diff --git a/src/app/products/shared/products.service.ts b/src/app/products/shared/products.service.ts
index 7922d74..e6bbc84 100644
--- a/src/app/products/shared/products.service.ts
+++ b/src/app/products/shared/products.service.ts
@@ -1,28 +1,17 @@
 import { Injectable } from '@angular/core';
 import { Product } from "../../shared/product";
-import { Observable, Subject } from "rxjs";
+import { Observable } from "rxjs";
 import { HttpClient } from "@angular/common/http";
 
 @Injectable({
   providedIn: 'root'
 })
 export class ProductsService {
-  products$: Observable<Product[]>;
-  error$: Observable<unknown>;
-
-  private productsSubject = new Subject<Product[]>();
-  private errorSubject = new Subject<unknown>();
 
   constructor(private httpClient: HttpClient) {
-    this.products$ = this.productsSubject.asObservable();
-    this.error$ = this.errorSubject.asObservable();
   }
 
-  get({ filter}: { filter?: string} = {}): void {
-    this.httpClient.get<Product[]>(`/api/products${filter ? `?filter=${filter}` : ''}`)
-      .subscribe(
-        products => this.productsSubject.next(products),
-          error => this.errorSubject.next(error)
-      );
+  getFiltered$({ filter}: { filter?: string} = {}): Observable<Product[]>{
+    return this.httpClient.get<Product[]>(`/api/products${filter ? `?filter=${filter}` : ''}`);
   }
 }