diff --git a/src/app/components/contact-list/contact-list.html b/src/app/components/contact-list/contact-list.html
new file mode 100644
index 0000000..c23bd7c
--- /dev/null
+++ b/src/app/components/contact-list/contact-list.html
@@ -0,0 +1,11 @@
+<div class="contact-list">
+    <div class="contact-list__container">
+        <h2>{{strings.constacts|upperfirst}}</h2>
+        <app-contact-search-bar (contactSearch)="filter=$event"/>
+        <app-counter 
+            [count]="(this.contacts$|async)?.length ?? 0"
+            item="{{strings.constacts}}"
+        />
+        <app-contact-list-table [contactList]="(this.contacts$|async)|contactsFilter:filter"/>
+    </div>
+</div>
\ No newline at end of file
diff --git a/src/app/components/contact-list/contact-list.scss b/src/app/components/contact-list/contact-list.scss
new file mode 100644
index 0000000..e565b83
--- /dev/null
+++ b/src/app/components/contact-list/contact-list.scss
@@ -0,0 +1,7 @@
+.contact-list {
+    padding: 2rem;
+    &__container {
+        max-width: 800px;
+        margin: 4rem auto 0 auto;
+    }
+}
diff --git a/src/app/components/contact-list/contact-list.spec.ts b/src/app/components/contact-list/contact-list.spec.ts
new file mode 100644
index 0000000..ff26213
--- /dev/null
+++ b/src/app/components/contact-list/contact-list.spec.ts
@@ -0,0 +1,32 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ContactList } from './contact-list';
+import { ContactService } from '../../pages/main/contact.service';
+import { of } from 'rxjs';
+import { STRINGS_INJECTOR } from '../../app.config';
+import { strings } from '../../strings';
+
+describe('ContactList', () => {
+  let component: ContactList;
+  let fixture: ComponentFixture<ContactList>;
+  let contactService: jasmine.SpyObj<ContactService>;
+
+  beforeEach(async () => {
+    contactService = jasmine.createSpyObj(ContactService.name, ['getAll']);
+    await TestBed.configureTestingModule({
+      imports: [ContactList],
+      providers: [
+        { provide: ContactService, useValue: contactService },
+        { provide: STRINGS_INJECTOR, useValue: strings },
+      ],
+    }).compileComponents();
+    contactService.getAll.and.returnValue(of([]));
+    fixture = TestBed.createComponent(ContactList);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/components/contact-list/contact-list.ts b/src/app/components/contact-list/contact-list.ts
new file mode 100644
index 0000000..ecb40d4
--- /dev/null
+++ b/src/app/components/contact-list/contact-list.ts
@@ -0,0 +1,28 @@
+import { Component, inject, OnInit } from '@angular/core';
+import { STRINGS_INJECTOR } from '../../app.config';
+import { UpperfirstPipe } from "../../pipes/upperfirst-pipe";
+import { ContactSearchBar } from "../contact-search-bar/contact-search-bar";
+import { ContactListTable } from "../contact-list-table/contact-list-table";
+import { ContactService } from '../../pages/main/contact.service';
+import { AsyncPipe } from '@angular/common';
+import { Counter } from "../counter/counter";
+import { ContactsFilterPipe } from "../../pipes/contacts-filter-pipe";
+
+@Component({
+  selector: 'app-contact-list',
+  imports: [AsyncPipe, UpperfirstPipe, ContactSearchBar, ContactListTable, Counter, ContactsFilterPipe],
+  templateUrl: './contact-list.html',
+  styleUrl: './contact-list.scss',
+})
+export class ContactList implements OnInit{
+  
+  private readonly contactService = inject(ContactService);
+  protected readonly strings = inject(STRINGS_INJECTOR);
+  protected contacts$ = this.contactService.contacts$;
+  protected filter = '';
+
+  ngOnInit(): void {
+    this.contactService.getAll().subscribe();
+  }
+
+}