diff --git a/angular.json b/angular.json
index 7a4f1ef7..be4c78d3 100644
--- a/angular.json
+++ b/angular.json
@@ -94,5 +94,8 @@
         }
       }
     }
+  },
+  "cli": {
+    "analytics": false
   }
 }
diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts
index 02972627..bf53a337 100644
--- a/src/app/app-routing.module.ts
+++ b/src/app/app-routing.module.ts
@@ -1,7 +1,23 @@
 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';
 
-const routes: Routes = [];
+const routes: Routes = [
+  {
+    path: "contacts",
+    component: ListComponent,
+  },
+  {
+    path: "contacts/add",
+    component: AddComponent,
+  },
+  {
+    path: "contacts/:id",
+    component: ViewComponent,
+  },
+];
 
 @NgModule({
   imports: [RouterModule.forRoot(routes)],
diff --git a/src/app/app.component.html b/src/app/app.component.html
index 17aaa0c6..7a501beb 100644
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -1,3 +1,4 @@
+
 <app-menu></app-menu>
 <div class="page">
   <router-outlet></router-outlet>
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 8207184c..bd50b77f 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 { ContactsModule } from './contacts/contacts.module';
+import { CommonModule } from '@angular/common';
 
 @NgModule({
   declarations: [AppComponent],
-  imports: [BrowserModule, AppRoutingModule, LayoutModule],
+  imports: [BrowserModule, AppRoutingModule, CommonModule, LayoutModule, ContactsModule],
   bootstrap: [AppComponent],
 })
 export class AppModule {}
diff --git a/src/app/contact.service.ts b/src/app/contact.service.ts
new file mode 100644
index 00000000..b1d14e40
--- /dev/null
+++ b/src/app/contact.service.ts
@@ -0,0 +1,28 @@
+import { Injectable } from '@angular/core';
+import {Contact} from "./contacts/models/contact";
+import {CONTACTS} from "./contacts/data/contacts";
+
+@Injectable({
+  providedIn: 'root'
+})
+export class ContactsService {
+  private currentId: number = 1;
+  private contacts: Contact[] = CONTACTS;
+
+  public getContactById(id: number): Contact | null {
+    const contact = this.contacts.find(c => c.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});
+  }
+}
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..88f56a46
--- /dev/null
+++ b/src/app/contacts/add/add.component.html
@@ -0,0 +1,18 @@
+<div>
+  <h2>Add a car</h2>
+  <form [formGroup]="contactForm" (ngSubmit)="addContact()">
+    <div>
+      <label for="name">Name</label>
+      <input type="text" id="name" formControlName="name" />
+    </div>
+    <div>
+      <label for="phone">Phone</label>
+      <input type="text" id="phone" formControlName="phone" />
+    </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..267da6f8
--- /dev/null
+++ b/src/app/contacts/add/add.component.ts
@@ -0,0 +1,30 @@
+import { Component, inject } from '@angular/core';
+import { FormGroup, Validators } from '@angular/forms';
+import { FormBuilder } from '@angular/forms';
+import { ContactsService } from '../../contact.service';
+import { Router } from '@angular/router';
+
+@Component({
+  selector: 'app-add',
+  templateUrl: './add.component.html',
+  styleUrl: './add.component.css'
+})
+export class AddComponent {
+  contactForm: FormGroup;
+  formBuilder = inject(FormBuilder);
+  contactService = inject(ContactsService); 
+  router = inject(Router);
+
+  constructor() {
+    this.contactForm = this.formBuilder.group({
+      name: ["", Validators.required],
+      phone: ["", Validators.required],
+      email: ["", Validators.required],
+    });
+  }
+
+  addContact() {
+    this.contactService.addContact(this.contactForm.value);
+    this.router.navigate(['contacts']);
+  }
+}
diff --git a/src/app/contacts/contacts.module.ts b/src/app/contacts/contacts.module.ts
new file mode 100644
index 00000000..89e3e4e3
--- /dev/null
+++ b/src/app/contacts/contacts.module.ts
@@ -0,0 +1,28 @@
+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 { Router, RouterModule } from '@angular/router';
+import { ReactiveFormsModule } from '@angular/forms';
+
+
+
+
+@NgModule({
+  declarations: [
+    AddComponent,
+    ViewComponent,
+    ListComponent,
+  ],
+  imports: [
+    CommonModule,
+    RouterModule,
+    ReactiveFormsModule
+  ],
+  exports: [
+    AddComponent,
+    ViewComponent,
+    ListComponent],
+})
+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..dc9453c5
--- /dev/null
+++ b/src/app/contacts/data/contacts.ts
@@ -0,0 +1,16 @@
+import { Contact } from "../models/contact"
+
+export const CONTACTS: Contact[] = [
+    {
+        id: 1,
+        name: "Isabell Tran",
+        phone: "123-456-7890",
+        email: "isabell@experis.no",
+    },
+    {
+        id: 2,
+        name: "Hans Jakob Håland",
+        phone: "987-654-3210",
+        email: "hans@experis.no",
+    },
+];
\ No newline at end of file
diff --git a/src/app/contacts/list/list.component.css b/src/app/contacts/list/list.component.css
new file mode 100644
index 00000000..e69de29b
diff --git a/src/app/contacts/list/list.component.html b/src/app/contacts/list/list.component.html
new file mode 100644
index 00000000..666e5b0e
--- /dev/null
+++ b/src/app/contacts/list/list.component.html
@@ -0,0 +1,21 @@
+<h2>Contacts List Page</h2>
+<table>
+  <thead>
+    <tr>
+      <th>Id</th>
+      <th>Name</th>
+      <th>Phone</th>
+      <th>Email</th>
+      <th>Link</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr *ngFor="let contact of contacts">
+      <td>{{contact.id}}</td>
+      <td>{{contact.name}}</td>
+      <td>{{contact.phone}}</td>
+      <td>{{contact.email}}</td>
+      <td><a routerLink="/contacts/{{ contact.id }}">Link</a></td>
+    </tr>
+  </tbody>
+</table>
\ 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..02483544
--- /dev/null
+++ b/src/app/contacts/list/list.component.ts
@@ -0,0 +1,14 @@
+import { Component } from '@angular/core';
+import { inject } from '@angular/core';
+import { ContactsService } from '../../contact.service';
+import { Contact } from '../models/contact';
+
+@Component({
+  selector: 'app-list',
+  templateUrl: './list.component.html',
+  styleUrl: './list.component.css'
+})
+export class ListComponent {
+  contactService = inject(ContactsService);
+  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..7e492179
--- /dev/null
+++ b/src/app/contacts/models/contact.ts
@@ -0,0 +1,6 @@
+export interface Contact {
+    id: number;
+    name: string;
+    phone: string;
+    email: string;
+}
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..9da4fb0d
--- /dev/null
+++ b/src/app/contacts/view/view.component.html
@@ -0,0 +1,12 @@
+<ng-container *ngIf="contact === null; else elseBlock">
+  <div>
+    <p><strong>Contact not available</strong></p>
+  </div>
+</ng-container>
+<ng-template #elseBlock>
+  <div>
+    <h1>{{contact?.name}} </h1>
+    <p> Phone: {{contact?.phone}}<br>
+        Email: {{contact?.email}}</p>
+  </div>
+</ng-template>
\ 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..fc12b7e4
--- /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 { ContactsService } from '../../contact.service';
+import { Contact } from '../models/contact';
+
+@Component({
+  selector: 'app-view',
+  templateUrl: './view.component.html',
+  styleUrl: './view.component.css'
+})
+export class ViewComponent {
+  contactService = inject(ContactsService);
+  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..95fe5dc8 100644
--- a/src/app/layout/menu/menu.component.html
+++ b/src/app/layout/menu/menu.component.html
@@ -1,5 +1,6 @@
 <h2>Menu</h2>
 <ul>
-  <li><a>Contacts list</a></li>
-  <li><a>Add new contact</a></li>
+  <li><a routerLink="/">Home</a></li>
+  <li><a routerLink="/contacts">Contacts</a></li>
+  <li><a routerLink="/contacts/add">Add new contact</a></li>
 </ul>