diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts
index 02972627..92486a39 100644
--- a/src/app/app-routing.module.ts
+++ b/src/app/app-routing.module.ts
@@ -1,7 +1,24 @@
 import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
+import { ListComponent } from './contacts/list/list.component';
+import { AddComponent } from './contacts/add/add.component';
+import { ViewComponent } from './contacts/view/view.component';
+import { EditComponent } from './contacts/edit/edit.component';
 
-const routes: Routes = [];
+const routes: Routes = [
+  {path: "contacts",
+    component: ListComponent
+  },
+  {path: "contacts/add",
+    component: AddComponent
+  },
+  {path: "contacts/:id",
+    component: ViewComponent
+  },
+  {path: "contacts/edit/:id",
+    component: EditComponent
+  }
+];
 
 @NgModule({
   imports: [RouterModule.forRoot(routes)],
diff --git a/src/app/app.component.css b/src/app/app.component.css
index 31d9e249..e69de29b 100644
--- a/src/app/app.component.css
+++ b/src/app/app.component.css
@@ -1,9 +0,0 @@
-:host {
-  display: flex;
-}
-
-.page {
-  flex: 1;
-  display: flex;
-  justify-content: center;
-}
diff --git a/src/app/app.component.html b/src/app/app.component.html
index 17aaa0c6..0df2548d 100644
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -1,4 +1,7 @@
+<div>
+  <h1>{{title}}</h1>
+  </div>
+  <div class="menu">
 <app-menu></app-menu>
-<div class="page">
-  <router-outlet></router-outlet>
 </div>
+<router-outlet/>
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index b82791ab..5b1812c4 100644
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -6,5 +6,5 @@ import { Component } from '@angular/core';
   styleUrls: ['./app.component.css']
 })
 export class AppComponent {
-  title = 'angular-address-book';
+  title = 'Address Book';
 }
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 8207184c..0b5cfc0f 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -4,10 +4,12 @@ import { BrowserModule } from '@angular/platform-browser';
 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
 import { LayoutModule } from './layout/layout.module';
+import { CommonModule } from '@angular/common';
+import { ContactsModule } from './contacts/contacts.module';
 
 @NgModule({
   declarations: [AppComponent],
-  imports: [BrowserModule, AppRoutingModule, LayoutModule],
+  imports: [BrowserModule, AppRoutingModule, LayoutModule, CommonModule, ContactsModule],
   bootstrap: [AppComponent],
 })
 export class AppModule {}
diff --git a/src/app/contacts/add/add.component.css b/src/app/contacts/add/add.component.css
new file mode 100644
index 00000000..e69de29b
diff --git a/src/app/contacts/add/add.component.html b/src/app/contacts/add/add.component.html
new file mode 100644
index 00000000..bea0f755
--- /dev/null
+++ b/src/app/contacts/add/add.component.html
@@ -0,0 +1,26 @@
+<div>
+  <h2>Add a contact</h2>
+  <form [formGroup]="contactForm" (ngSubmit)="addContact()">
+    <div>
+      <label for="firstName">First Name</label>
+      <input type="text" id="firstName" formControlName="firstName" />
+    </div>
+    <div>
+      <label for="lastName">LastName</label>
+      <input type="text" id="lastName" formControlName="lastName" />
+    </div>
+    <div>
+      <label for="street">Street</label>
+      <input type="text" id="street" formControlName="street" />
+    </div>
+    <div>
+      <label for="city">City</label>
+      <input type="text" id="city" formControlName="city" />
+    </div>
+    <div>
+      <label for="email">Email</label>
+      <input type="text" id="email" formControlName="email" />
+    </div>
+    <button type="submit">Add Contact</button>
+  </form>
+</div>
\ No newline at end of file
diff --git a/src/app/contacts/add/add.component.ts b/src/app/contacts/add/add.component.ts
new file mode 100644
index 00000000..a6964f94
--- /dev/null
+++ b/src/app/contacts/add/add.component.ts
@@ -0,0 +1,32 @@
+import { Component, inject } from '@angular/core';
+import { FormBuilder, FormGroup, Validators } from '@angular/forms';
+import { Router } from '@angular/router';
+import { ContactServiceService } from 'src/app/services/contact-service.service';
+
+@Component({
+  selector: 'app-add',
+  templateUrl: './add.component.html',
+  styleUrl: './add.component.css'
+})
+
+export class AddComponent {
+  contactForm: FormGroup
+  formBuilder = inject(FormBuilder)
+  contactService = inject(ContactServiceService)
+  router = inject(Router)
+
+  constructor() {
+    this.contactForm = this.formBuilder.group({
+      firstName: ["", Validators.required],
+      lastName: ["", Validators.required],
+      street: ["", Validators.required],
+      city: ["", Validators.required],
+      email: ["", Validators.required],
+    })
+  }
+
+  addContact() {
+    this.contactService.addContact(this.contactForm.value)
+    this.router.navigate(['contacts'])
+  }
+}
\ No newline at end of file
diff --git a/src/app/contacts/contacts.module.ts b/src/app/contacts/contacts.module.ts
new file mode 100644
index 00000000..a722e0d8
--- /dev/null
+++ b/src/app/contacts/contacts.module.ts
@@ -0,0 +1,31 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { AddComponent } from './add/add.component';
+import { ViewComponent } from './view/view.component';
+import { ListComponent } from './list/list.component';
+import { EditComponent } from './edit/edit.component';
+import { RouterModule } from '@angular/router';
+import { ReactiveFormsModule } from '@angular/forms';
+
+
+
+@NgModule({
+  declarations: [
+    AddComponent,
+    ViewComponent,
+    ListComponent,
+    EditComponent
+  ],
+  imports: [
+    CommonModule, 
+    RouterModule, 
+    ReactiveFormsModule
+  ],
+  exports: [
+    AddComponent,
+    ViewComponent,
+    ListComponent,
+    EditComponent
+  ]
+})
+export class ContactsModule { }
diff --git a/src/app/contacts/data/contacts.ts b/src/app/contacts/data/contacts.ts
new file mode 100644
index 00000000..29780030
--- /dev/null
+++ b/src/app/contacts/data/contacts.ts
@@ -0,0 +1,36 @@
+import { Contact } from "../models/contact";
+
+export const CONTACTS: Contact[] = [
+    {
+        id: 1,
+        firstName: "Dayne",
+        lastName: "Strosin",
+        email: "Salma_Hintz32@hotmail.com",
+        street: "South Street",
+        city: "New Mercedes"
+    },
+     {
+        id: 2,
+        firstName: "Murray",
+        lastName: "Torphy",
+        email: "Eugene25@hotmail.com",
+        street: "Hill Road",
+        city: "Runolfsdottirport"
+    },
+     {
+        id: 3,
+        firstName: "Trevion",
+        lastName: "Yost",
+        email: "Jayda.Ratke2@hotmail.com",
+        street: "Hilpert Bypass",
+        city: "Johnstonstad"
+    },
+     {
+        id: 4,
+        firstName: "Khalid",
+        lastName: "Cummings",
+        email: "Oliver17@hotmail.com",
+        street: "Renner Drives",
+        city: "Fort Winonafurt"
+    }
+] 
\ No newline at end of file
diff --git a/src/app/contacts/edit/edit.component.css b/src/app/contacts/edit/edit.component.css
new file mode 100644
index 00000000..e69de29b
diff --git a/src/app/contacts/edit/edit.component.html b/src/app/contacts/edit/edit.component.html
new file mode 100644
index 00000000..bc39d540
--- /dev/null
+++ b/src/app/contacts/edit/edit.component.html
@@ -0,0 +1,26 @@
+<div>
+  <h2>Edit a contact</h2>
+  <form [formGroup]="contactForm" (ngSubmit)="editContact()">
+    <div>
+      <label for="firstName">First Name</label>
+      <input type="text" id="firstName" formControlName="firstName" />
+    </div>
+    <div>
+      <label for="lastName">LastName</label>
+      <input type="text" id="lastName" formControlName="lastName" />
+    </div>
+    <div>
+      <label for="street">Street</label>
+      <input type="text" id="street" formControlName="street" />
+    </div>
+    <div>
+      <label for="city">City</label>
+      <input type="text" id="city" formControlName="city" />
+    </div>
+    <div>
+      <label for="email">Email</label>
+      <input type="text" id="email" formControlName="email" />
+    </div>
+    <button type="submit">Done</button>
+  </form>
+</div>
\ No newline at end of file
diff --git a/src/app/contacts/edit/edit.component.ts b/src/app/contacts/edit/edit.component.ts
new file mode 100644
index 00000000..b0829152
--- /dev/null
+++ b/src/app/contacts/edit/edit.component.ts
@@ -0,0 +1,34 @@
+import { Component, inject } from '@angular/core';
+import { FormBuilder, FormGroup, Validators } from '@angular/forms';
+import { ActivatedRoute, Router } from '@angular/router';
+import { ContactServiceService } from 'src/app/services/contact-service.service';
+
+@Component({
+  selector: 'app-edit',
+  templateUrl: './edit.component.html',
+  styleUrl: './edit.component.css'
+})
+export class EditComponent {
+    contactForm: FormGroup
+    formBuilder = inject(FormBuilder)
+    contactService = inject(ContactServiceService)
+    router = inject(Router)
+    route = inject(ActivatedRoute)
+    id = this.route.snapshot.paramMap.get('id')
+  
+    constructor() {
+      this.contactForm = this.formBuilder.group({
+        firstName: ["", Validators.required],
+        lastName: ["", Validators.required],
+        street: ["", Validators.required],
+        city: ["", Validators.required],
+        email: ["", Validators.required],
+      })
+    }
+  
+    editContact() {
+
+      this.contactService.editContact(this.contactForm.value , Number(this.id))
+      this.router.navigate(['contacts'])
+    }
+}
diff --git a/src/app/contacts/list/list.component.css b/src/app/contacts/list/list.component.css
new file mode 100644
index 00000000..fe21271d
--- /dev/null
+++ b/src/app/contacts/list/list.component.css
@@ -0,0 +1,7 @@
+.contact {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 10px;
+  border-bottom: 1px solid #ccc;
+}
\ No newline at end of file
diff --git a/src/app/contacts/list/list.component.html b/src/app/contacts/list/list.component.html
new file mode 100644
index 00000000..7a6351d2
--- /dev/null
+++ b/src/app/contacts/list/list.component.html
@@ -0,0 +1,13 @@
+<h2 class="contacts">Contacts</h2>
+@if (contacts.length <= 0) {
+    <p> No contacts in your list </p>
+} @else {
+    @for (contact of contacts; track $index) {
+        <div class="contact">
+            <span class="name">
+                {{contact.firstName}} {{contact.lastName}}
+            </span>
+            <span><a routerLink="/contacts/{{contact.id}}"> Link</a></span>
+        </div>
+    }
+}
\ No newline at end of file
diff --git a/src/app/contacts/list/list.component.ts b/src/app/contacts/list/list.component.ts
new file mode 100644
index 00000000..ccf9c76a
--- /dev/null
+++ b/src/app/contacts/list/list.component.ts
@@ -0,0 +1,14 @@
+import { Component, inject } from '@angular/core';
+import { ContactServiceService } from 'src/app/services/contact-service.service';
+import { Contact } from '../models/contact';
+
+@Component({
+  selector: 'app-list',
+  templateUrl: './list.component.html',
+  styleUrl: './list.component.css'
+})
+export class ListComponent {
+  contactService = inject(ContactServiceService)
+
+  contacts: Contact[] = this.contactService.getAllContacts()
+}
diff --git a/src/app/contacts/models/contact.ts b/src/app/contacts/models/contact.ts
new file mode 100644
index 00000000..36a6fb18
--- /dev/null
+++ b/src/app/contacts/models/contact.ts
@@ -0,0 +1,8 @@
+export interface Contact {
+    id: number;
+    firstName: string;
+    lastName: string;
+    email: string;
+    street: string;
+    city: string;
+}
\ No newline at end of file
diff --git a/src/app/contacts/view/view.component.css b/src/app/contacts/view/view.component.css
new file mode 100644
index 00000000..e69de29b
diff --git a/src/app/contacts/view/view.component.html b/src/app/contacts/view/view.component.html
new file mode 100644
index 00000000..2471c401
--- /dev/null
+++ b/src/app/contacts/view/view.component.html
@@ -0,0 +1,15 @@
+@if (this.contact === null) {
+    <div>
+        <p>
+            <strong>Contact not available</strong>
+        </p>
+    </div>
+} @else {
+    <div>
+    <article>
+        <h2> {{contact.firstName}} {{contact.lastName}}</h2>
+        <p>Address: {{contact.street}}, {{contact.city}} </p>
+        <p>Email: {{contact.email}}</p>
+        <p><a routerLink="/contacts/edit/{{contact.id}}">Edit</a></p>
+    </article>
+    </div>}
\ No newline at end of file
diff --git a/src/app/contacts/view/view.component.ts b/src/app/contacts/view/view.component.ts
new file mode 100644
index 00000000..ff65a1b3
--- /dev/null
+++ b/src/app/contacts/view/view.component.ts
@@ -0,0 +1,17 @@
+import { Component, inject } from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
+import { ContactServiceService } from 'src/app/services/contact-service.service';
+import { Contact } from '../models/contact';
+
+@Component({
+  selector: 'app-view',
+  templateUrl: './view.component.html',
+  styleUrl: './view.component.css'
+})
+export class ViewComponent {
+  contactService = inject(ContactServiceService)
+  route = inject(ActivatedRoute)
+
+  id = this.route.snapshot.paramMap.get('id')
+  contact: Contact | null = this.contactService.getContactById(Number(this.id))
+}
diff --git a/src/app/layout/menu/menu.component.html b/src/app/layout/menu/menu.component.html
index 7c5ec7a2..aed3259d 100644
--- a/src/app/layout/menu/menu.component.html
+++ b/src/app/layout/menu/menu.component.html
@@ -1,5 +1,5 @@
 <h2>Menu</h2>
 <ul>
-  <li><a>Contacts list</a></li>
-  <li><a>Add new contact</a></li>
+  <li><a routerLink="/contacts">Contacts list</a></li>
+  <li><a routerLink="/contacts/add">Add new contact</a></li>
 </ul>
diff --git a/src/app/services/contact-service.service.ts b/src/app/services/contact-service.service.ts
new file mode 100644
index 00000000..ccfb08df
--- /dev/null
+++ b/src/app/services/contact-service.service.ts
@@ -0,0 +1,36 @@
+import { Injectable } from '@angular/core';
+import { Contact } from '../contacts/models/contact';
+import { CONTACTS } from '../contacts/data/contacts';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class ContactServiceService {
+  private contacts: Contact[] = CONTACTS
+  private currentId: number = this.contacts.length
+  
+  public getContactById(id: number | null): Contact | null {
+    const contact = this.contacts.find((contact) => contact.id === id)
+    if(!contact) {
+      return null
+    }
+    return contact
+  }
+
+  public getAllContacts(): Contact[] {
+    return this.contacts
+  }
+
+  public addContact(contact: Contact) {
+    this.currentId++
+    this.contacts.push({...contact, id: this.currentId})
+  }
+
+  public editContact(contact: Contact, id: number) {
+    console.log(contact)
+    console.log(id)
+    this.contacts = this.contacts.map(item => item.id === id ? contact : item)
+    console.log(this.contacts)
+  }
+ 
+}
diff --git a/src/index.html b/src/index.html
index b0e9832d..9c4b888c 100644
--- a/src/index.html
+++ b/src/index.html
@@ -2,7 +2,7 @@
 <html lang="en">
 <head>
   <meta charset="utf-8">
-  <title>AngularAddressBook</title>
+  <title>Adress Book</title>
   <base href="/">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="icon" type="image/x-icon" href="favicon.ico">