diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts
index 1bbc9d8..07ab528 100644
--- a/src/app/app-routing.module.ts
+++ b/src/app/app-routing.module.ts
@@ -1,6 +1,5 @@
 import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
-import {VehicleListComponent} from "./features/vehicle/page/vehicle-list/vehicle-list.component";
 import {LayoutComponent} from "./layout/layout.component";
 import {VehicleViewComponent} from "./features/vehicle/page/vehicle-view/vehicle-view.component";
 
@@ -24,7 +23,15 @@ const routes: Routes = [
         path:'vehicle',
         loadChildren: () => import('./features/vehicle/vehicle.module').then(m => m.VehicleModule)
       },
-     {
+      {
+        path:'contact',
+        loadChildren: () => import('./features/contact/contact.module').then(m => m.ContactModule)
+      },
+      {
+        path:'problem',
+        loadChildren: () => import('./features/problem/problem.module').then(m => m.ProblemModule)
+      },
+      {
         path:'service',
         loadChildren: () => import('./features/service/service.module').then(m => m.ServiceModule)
       },
diff --git a/src/app/features/contact/contact.module.ts b/src/app/features/contact/contact.module.ts
new file mode 100644
index 0000000..af23967
--- /dev/null
+++ b/src/app/features/contact/contact.module.ts
@@ -0,0 +1,30 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import {RouterModule, Routes} from "@angular/router";
+import {ContactListComponent} from "./page/contact-list/contact-list.component";
+import {ContactEditComponent} from "./page/contact-edit/contact-edit.component";
+import {ContactViewComponent} from "./page/contact-view/contact-view.component";
+
+const routes: Routes=[
+  {
+    path: "",
+    component:ContactListComponent
+  },
+  {
+    path: "edit",
+    component: ContactEditComponent
+  },
+  {
+    path: "view",
+    component: ContactViewComponent
+  }
+]
+
+@NgModule({
+  declarations: [],
+  imports: [
+    CommonModule,
+    RouterModule.forChild(routes)
+  ]
+})
+export class ContactModule { }
diff --git a/src/app/features/contact/page/contact-edit/contact-edit.component.html b/src/app/features/contact/page/contact-edit/contact-edit.component.html
new file mode 100644
index 0000000..65be22a
--- /dev/null
+++ b/src/app/features/contact/page/contact-edit/contact-edit.component.html
@@ -0,0 +1,18 @@
+<div>
+  <div>
+    <label>Nom</label>
+    <input [(ngModel)]="contact.lastname" type="text" pInputText />
+    <br>
+    <label>Prénom</label>
+    <input [(ngModel)]="contact.firstname" type="text" pInputText />
+
+    <label>Téléphone</label>
+    <input [(ngModel)]="contact.phone" type="text" pInputText />
+    <label>Email</label>
+    <input [(ngModel)]="contact.mail" type="text" pInputText />
+  </div>
+
+  <button (click)="save()" pButton type="button" label="Enregistrer"></button>
+
+</div>
+
diff --git a/src/app/features/contact/page/contact-edit/contact-edit.component.scss b/src/app/features/contact/page/contact-edit/contact-edit.component.scss
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/features/contact/page/contact-edit/contact-edit.component.spec.ts b/src/app/features/contact/page/contact-edit/contact-edit.component.spec.ts
new file mode 100644
index 0000000..1875134
--- /dev/null
+++ b/src/app/features/contact/page/contact-edit/contact-edit.component.spec.ts
@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ContactEditComponent } from './contact-edit.component';
+
+describe('ContactEditComponent', () => {
+  let component: ContactEditComponent;
+  let fixture: ComponentFixture<ContactEditComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [ContactEditComponent]
+    })
+    .compileComponents();
+    
+    fixture = TestBed.createComponent(ContactEditComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/features/contact/page/contact-edit/contact-edit.component.ts b/src/app/features/contact/page/contact-edit/contact-edit.component.ts
new file mode 100644
index 0000000..b71f3de
--- /dev/null
+++ b/src/app/features/contact/page/contact-edit/contact-edit.component.ts
@@ -0,0 +1,35 @@
+import {Component, OnInit} from '@angular/core';
+import {ButtonDirective} from "primeng/button";
+import {FormsModule} from "@angular/forms";
+import {InputTextModule} from "primeng/inputtext";
+import {ContactServiceService} from "../../service/contact.service.service";
+import {Router} from "@angular/router";
+
+@Component({
+  selector: 'app-contact-edit',
+  standalone: true,
+    imports: [
+        ButtonDirective,
+        FormsModule,
+        InputTextModule
+    ],
+  templateUrl: './contact-edit.component.html',
+  styleUrl: './contact-edit.component.scss'
+})
+export class ContactEditComponent implements OnInit{
+  contact:any={}
+
+  constructor(private contactService: ContactServiceService,private router: Router) {}
+  ngOnInit() {
+  }
+
+  save() {
+    this.contactService.create(this.contact).subscribe( {
+      next: (res)=>{
+        if(res.success){
+          this.router.navigateByUrl("/app/contact").then();
+        }
+      }
+    })
+  }
+}
diff --git a/src/app/features/contact/page/contact-list/contact-list.component.html b/src/app/features/contact/page/contact-list/contact-list.component.html
new file mode 100644
index 0000000..806edcc
--- /dev/null
+++ b/src/app/features/contact/page/contact-list/contact-list.component.html
@@ -0,0 +1,30 @@
+
+<div style="text-align: right; margin-bottom :10px">
+  <button (click)="edit()" pButton type="button" label="Ajouter un contact"></button>
+</div>
+
+<p-table [value]="contacts" [tableStyle]="{'min-width': '50rem'}">
+  <ng-template pTemplate="header">
+    <tr>
+      <th>Nom</th>
+      <th>Prénom</th>
+      <th>Téléphone</th>
+      <th>Email</th>
+      <th>Actions</th>
+    </tr>
+  </ng-template>
+  <ng-template pTemplate="body" let-contact>
+    <tr>
+      <td>{{contact.lastname}}</td>
+      <td>{{contact.firstname}}</td>
+      <td>{{contact.phone}}</td>
+      <td>{{contact.mail}}</td>
+      <td>
+        <i class="pi pi-pencil" style="margin-right: 10px"></i>
+        <i class="pi pi-trash" style="margin-right: 10px"></i>
+        <i class="pi pi-eye" style="margin-right: 10px"></i>
+      </td>
+    </tr>
+  </ng-template>
+</p-table>
+
diff --git a/src/app/features/contact/page/contact-list/contact-list.component.scss b/src/app/features/contact/page/contact-list/contact-list.component.scss
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/features/contact/page/contact-list/contact-list.component.spec.ts b/src/app/features/contact/page/contact-list/contact-list.component.spec.ts
new file mode 100644
index 0000000..910a800
--- /dev/null
+++ b/src/app/features/contact/page/contact-list/contact-list.component.spec.ts
@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ContactListComponent } from './contact-list.component';
+
+describe('ContactListComponent', () => {
+  let component: ContactListComponent;
+  let fixture: ComponentFixture<ContactListComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [ContactListComponent]
+    })
+    .compileComponents();
+    
+    fixture = TestBed.createComponent(ContactListComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/features/contact/page/contact-list/contact-list.component.ts b/src/app/features/contact/page/contact-list/contact-list.component.ts
new file mode 100644
index 0000000..ff9754a
--- /dev/null
+++ b/src/app/features/contact/page/contact-list/contact-list.component.ts
@@ -0,0 +1,41 @@
+import {Component, OnInit} from '@angular/core';
+import {ButtonDirective} from "primeng/button";
+import {PrimeTemplate} from "primeng/api";
+import {TableModule} from "primeng/table";
+import {ContactServiceService} from "../../service/contact.service.service";
+import {Router} from "@angular/router";
+
+@Component({
+  selector: 'app-contact-list',
+  standalone: true,
+    imports: [
+        ButtonDirective,
+        PrimeTemplate,
+        TableModule
+    ],
+  templateUrl: './contact-list.component.html',
+  styleUrl: './contact-list.component.scss'
+})
+export class ContactListComponent implements OnInit{
+  contacts: any[]=[]
+
+  constructor(private contactService: ContactServiceService,private router: Router) {
+  }
+  ngOnInit() {
+    this.getServices()
+  }
+  getServices() {
+    this.contactService.getAll().subscribe({
+      next: (res) => {
+        if (res.success) {
+          this.contacts = res.data;
+        }
+      }
+    })
+  }
+  edit(): void{
+    this.router.navigateByUrl('/app/contact/edit').then()
+  }
+}
+
+
diff --git a/src/app/features/contact/page/contact-view/contact-view.component.html b/src/app/features/contact/page/contact-view/contact-view.component.html
new file mode 100644
index 0000000..f50ab5c
--- /dev/null
+++ b/src/app/features/contact/page/contact-view/contact-view.component.html
@@ -0,0 +1 @@
+<p>contact-view works!</p>
diff --git a/src/app/features/contact/page/contact-view/contact-view.component.scss b/src/app/features/contact/page/contact-view/contact-view.component.scss
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/features/contact/page/contact-view/contact-view.component.spec.ts b/src/app/features/contact/page/contact-view/contact-view.component.spec.ts
new file mode 100644
index 0000000..adfa576
--- /dev/null
+++ b/src/app/features/contact/page/contact-view/contact-view.component.spec.ts
@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ContactViewComponent } from './contact-view.component';
+
+describe('ContactViewComponent', () => {
+  let component: ContactViewComponent;
+  let fixture: ComponentFixture<ContactViewComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [ContactViewComponent]
+    })
+    .compileComponents();
+    
+    fixture = TestBed.createComponent(ContactViewComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/features/contact/page/contact-view/contact-view.component.ts b/src/app/features/contact/page/contact-view/contact-view.component.ts
new file mode 100644
index 0000000..f0bdcb9
--- /dev/null
+++ b/src/app/features/contact/page/contact-view/contact-view.component.ts
@@ -0,0 +1,12 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-contact-view',
+  standalone: true,
+  imports: [],
+  templateUrl: './contact-view.component.html',
+  styleUrl: './contact-view.component.scss'
+})
+export class ContactViewComponent {
+
+}
diff --git a/src/app/features/contact/service/contact.service.service.spec.ts b/src/app/features/contact/service/contact.service.service.spec.ts
new file mode 100644
index 0000000..c5ccaad
--- /dev/null
+++ b/src/app/features/contact/service/contact.service.service.spec.ts
@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { ContactServiceService } from './contact.service.service';
+
+describe('ContactServiceService', () => {
+  let service: ContactServiceService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(ContactServiceService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});
diff --git a/src/app/features/contact/service/contact.service.service.ts b/src/app/features/contact/service/contact.service.service.ts
new file mode 100644
index 0000000..cb60b36
--- /dev/null
+++ b/src/app/features/contact/service/contact.service.service.ts
@@ -0,0 +1,45 @@
+import { Injectable } from '@angular/core';
+import {HttpClient} from "@angular/common/http";
+import {Observable} from "rxjs";
+import {apiRoute} from "../../../core/routes/api.route";
+
+
+@Injectable({
+  providedIn: 'root'
+})
+export class ContactServiceService {
+  url:string="contact";
+
+  constructor(private http: HttpClient) { }
+
+  //getAll :
+  getAll():Observable<any>{
+    return this.http.get<any>(apiRoute+this.url);
+}
+
+//getById :
+
+  getById(id:string):Observable<any>{
+    return this.http.get<any>(apiRoute+this.url+"/"+id)
+  }
+
+
+//create :
+
+  create(contact: any):Observable<any>{
+    return this.http.post<any>(apiRoute+this.url,contact)
+  }
+
+
+//update :
+update(contact: any):Observable<any>{
+    return this.http.put<any>(apiRoute+this.url+"/"+contact.id,contact)
+}
+
+//delete :
+
+  delete(id:string):Observable<any>{
+    return this.http.delete<any>(apiRoute+this.url+"/"+id)
+  }
+
+}
diff --git a/src/app/features/error/error.module.ts b/src/app/features/error/error.module.ts
new file mode 100644
index 0000000..d4b3183
--- /dev/null
+++ b/src/app/features/error/error.module.ts
@@ -0,0 +1,12 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+
+
+@NgModule({
+  declarations: [],
+  imports: [
+    CommonModule
+  ]
+})
+export class ErrorModule { }
diff --git a/src/app/features/problem/page/problem-edit/problem-edit.component.html b/src/app/features/problem/page/problem-edit/problem-edit.component.html
new file mode 100644
index 0000000..1d1c207
--- /dev/null
+++ b/src/app/features/problem/page/problem-edit/problem-edit.component.html
@@ -0,0 +1,15 @@
+<div>
+  <div>
+    <label>Description</label>
+    <input [(ngModel)]="problem.description" type="text" pInputText />
+    <br>
+    <label>Date</label>
+    <input [(ngModel)]="problem.date" type="text" pInputText />
+
+    <label>Statut</label>
+    <input [(ngModel)]="problem.status" type="text" pInputText />
+  </div>
+
+  <button (click)="save()" pButton type="button" label="Enregistrer"></button>
+
+</div>
diff --git a/src/app/features/problem/page/problem-edit/problem-edit.component.scss b/src/app/features/problem/page/problem-edit/problem-edit.component.scss
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/features/problem/page/problem-edit/problem-edit.component.spec.ts b/src/app/features/problem/page/problem-edit/problem-edit.component.spec.ts
new file mode 100644
index 0000000..269772a
--- /dev/null
+++ b/src/app/features/problem/page/problem-edit/problem-edit.component.spec.ts
@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ProblemEditComponent } from './problem-edit.component';
+
+describe('ProblemEditComponent', () => {
+  let component: ProblemEditComponent;
+  let fixture: ComponentFixture<ProblemEditComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [ProblemEditComponent]
+    })
+    .compileComponents();
+    
+    fixture = TestBed.createComponent(ProblemEditComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/features/problem/page/problem-edit/problem-edit.component.ts b/src/app/features/problem/page/problem-edit/problem-edit.component.ts
new file mode 100644
index 0000000..457c1d7
--- /dev/null
+++ b/src/app/features/problem/page/problem-edit/problem-edit.component.ts
@@ -0,0 +1,38 @@
+import {Component, OnInit} from '@angular/core';
+import {ButtonDirective} from "primeng/button";
+import {PrimeTemplate} from "primeng/api";
+import {TableModule} from "primeng/table";
+import {InputTextModule} from "primeng/inputtext";
+import {FormsModule, ReactiveFormsModule} from "@angular/forms";
+import {ProblemServiceService} from "../../service/problem.service.service";
+import {Router} from "@angular/router";
+
+@Component({
+  selector: 'app-problem-edit',
+  standalone: true,
+  imports: [
+    ButtonDirective,
+    PrimeTemplate,
+    TableModule,
+    InputTextModule,
+    ReactiveFormsModule,
+    FormsModule
+  ],
+  templateUrl: './problem-edit.component.html',
+  styleUrl: './problem-edit.component.scss'
+})
+export class ProblemEditComponent implements  OnInit{
+  problem:any={}
+
+  constructor(private problemService: ProblemServiceService, private router: Router) {
+  }
+ngOnInit() {
+}
+save():void{
+    this.problemService.create(this.problem).subscribe({
+      next: (res)=>{
+        this.router.navigateByUrl("app/problem").then();
+      }
+    })
+}
+}
diff --git a/src/app/features/problem/page/problem-list/problem-list.component.html b/src/app/features/problem/page/problem-list/problem-list.component.html
new file mode 100644
index 0000000..6728d18
--- /dev/null
+++ b/src/app/features/problem/page/problem-list/problem-list.component.html
@@ -0,0 +1,28 @@
+
+<div style="text-align: right; margin-bottom :10px">
+  <button (click)="edit()" pButton type="button" label="Ajouter un problème"></button>
+</div>
+
+<p-table [value]="problems" [tableStyle]="{'min-width': '50rem'}">
+  <ng-template pTemplate="header">
+    <tr>
+      <th>Description</th>
+      <th>Date</th>
+      <th>Statut</th>
+      <th>Actions</th>
+    </tr>
+  </ng-template>
+  <ng-template pTemplate="body" let-problems>
+    <tr>
+      <td>{{problems.description}}</td>
+      <td>{{problems.date}}</td>
+      <td>{{problems.status}}</td>
+      <td>
+        <i class="pi pi-pencil" style="margin-right: 10px"></i>
+        <i class="pi pi-trash" style="margin-right: 10px"></i>
+        <i class="pi pi-eye" style="margin-right: 10px"></i>
+      </td>
+    </tr>
+  </ng-template>
+</p-table>
+
diff --git a/src/app/features/problem/page/problem-list/problem-list.component.scss b/src/app/features/problem/page/problem-list/problem-list.component.scss
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/features/problem/page/problem-list/problem-list.component.spec.ts b/src/app/features/problem/page/problem-list/problem-list.component.spec.ts
new file mode 100644
index 0000000..0be2e85
--- /dev/null
+++ b/src/app/features/problem/page/problem-list/problem-list.component.spec.ts
@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ProblemListComponent } from './problem-list.component';
+
+describe('ProblemListComponent', () => {
+  let component: ProblemListComponent;
+  let fixture: ComponentFixture<ProblemListComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [ProblemListComponent]
+    })
+    .compileComponents();
+    
+    fixture = TestBed.createComponent(ProblemListComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/features/problem/page/problem-list/problem-list.component.ts b/src/app/features/problem/page/problem-list/problem-list.component.ts
new file mode 100644
index 0000000..6e1c6f9
--- /dev/null
+++ b/src/app/features/problem/page/problem-list/problem-list.component.ts
@@ -0,0 +1,39 @@
+import {Component, OnInit} from '@angular/core';
+import {ButtonDirective} from "primeng/button";
+import {PrimeTemplate} from "primeng/api";
+import {TableModule} from "primeng/table";
+import {ProblemServiceService} from "../../service/problem.service.service";
+import {Router} from "@angular/router";
+
+@Component({
+  selector: 'app-problem-list',
+  standalone: true,
+    imports: [
+        ButtonDirective,
+        PrimeTemplate,
+        TableModule
+    ],
+  templateUrl: './problem-list.component.html',
+  styleUrl: './problem-list.component.scss'
+})
+export class ProblemListComponent implements OnInit{
+  problems:any[]=[]
+  constructor(private problemService: ProblemServiceService,private router: Router) {
+  }
+  ngOnInit() {
+    this.getProblems()
+  }
+
+  getProblems():void{
+    this.problemService.getAll().subscribe({
+      next: (res)=>{
+        if(res.success){
+          this.problems=res.data
+        }
+      }
+    })
+  }
+  edit():void{
+    this.router.navigateByUrl("app/problem/edit").then()
+  }
+}
diff --git a/src/app/features/problem/page/problem-view/problem-view.component.html b/src/app/features/problem/page/problem-view/problem-view.component.html
new file mode 100644
index 0000000..9fea102
--- /dev/null
+++ b/src/app/features/problem/page/problem-view/problem-view.component.html
@@ -0,0 +1 @@
+<p>problem-view works!</p>
diff --git a/src/app/features/problem/page/problem-view/problem-view.component.scss b/src/app/features/problem/page/problem-view/problem-view.component.scss
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/features/problem/page/problem-view/problem-view.component.spec.ts b/src/app/features/problem/page/problem-view/problem-view.component.spec.ts
new file mode 100644
index 0000000..292e95b
--- /dev/null
+++ b/src/app/features/problem/page/problem-view/problem-view.component.spec.ts
@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ProblemViewComponent } from './problem-view.component';
+
+describe('ProblemViewComponent', () => {
+  let component: ProblemViewComponent;
+  let fixture: ComponentFixture<ProblemViewComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [ProblemViewComponent]
+    })
+    .compileComponents();
+    
+    fixture = TestBed.createComponent(ProblemViewComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/features/problem/page/problem-view/problem-view.component.ts b/src/app/features/problem/page/problem-view/problem-view.component.ts
new file mode 100644
index 0000000..b1a35c1
--- /dev/null
+++ b/src/app/features/problem/page/problem-view/problem-view.component.ts
@@ -0,0 +1,12 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-problem-view',
+  standalone: true,
+  imports: [],
+  templateUrl: './problem-view.component.html',
+  styleUrl: './problem-view.component.scss'
+})
+export class ProblemViewComponent {
+
+}
diff --git a/src/app/features/problem/problem.module.ts b/src/app/features/problem/problem.module.ts
new file mode 100644
index 0000000..a3d7186
--- /dev/null
+++ b/src/app/features/problem/problem.module.ts
@@ -0,0 +1,31 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import {ProblemListComponent} from "./page/problem-list/problem-list.component";
+import {ProblemEditComponent} from "./page/problem-edit/problem-edit.component";
+import {ProblemViewComponent} from "./page/problem-view/problem-view.component";
+import {RouterModule, Routes} from "@angular/router";
+
+const routes : Routes=[
+  {
+    path: '',
+    component: ProblemListComponent
+  },
+  {
+    path: 'edit',
+    component: ProblemEditComponent
+  },
+  {
+    path: 'view',
+    component: ProblemViewComponent
+  }
+]
+
+
+@NgModule({
+  declarations: [],
+  imports: [
+    CommonModule,
+    RouterModule.forChild(routes)
+  ]
+})
+export class ProblemModule { }
diff --git a/src/app/features/problem/service/problem.service.service.spec.ts b/src/app/features/problem/service/problem.service.service.spec.ts
new file mode 100644
index 0000000..58e5a56
--- /dev/null
+++ b/src/app/features/problem/service/problem.service.service.spec.ts
@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { ProblemServiceService } from './problem.service.service';
+
+describe('ProblemServiceService', () => {
+  let service: ProblemServiceService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(ProblemServiceService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});
diff --git a/src/app/features/problem/service/problem.service.service.ts b/src/app/features/problem/service/problem.service.service.ts
new file mode 100644
index 0000000..a889000
--- /dev/null
+++ b/src/app/features/problem/service/problem.service.service.ts
@@ -0,0 +1,49 @@
+import { Injectable } from '@angular/core';
+import {Observable} from "rxjs";
+import {apiRoute} from "../../../core/routes/api.route";
+import {HttpClient} from "@angular/common/http";
+
+@Injectable({
+  providedIn: 'root'
+})
+export class ProblemServiceService {
+  url="problem"
+
+  constructor(private http: HttpClient) { }
+
+  //getAll :
+
+  getAll(): Observable<any>{
+    return this.http.get<any>(apiRoute+this.url);
+  }
+
+
+  //getById :
+
+  getById(id: string): Observable<any>{
+    return this.http.get<any>(apiRoute+this.url+"/"+id);
+  }
+
+
+  //create :
+
+  create(problem: any): Observable<any>{
+    return this.http.post<any>(apiRoute+this.url,problem);
+  }
+
+
+  //update :
+
+  update(problem: any): Observable<any>{
+    return this.http.put<any>(apiRoute+this.url+"/"+problem.id,problem);
+  }
+
+
+  //delete :
+
+  delete(id: string): Observable<any>{
+    return this.http.delete<any>(apiRoute+this.url+"/"+id);
+  }
+
+
+}
diff --git a/src/app/features/vehicle/page/vehicle-edit/vehicle-edit.component.html b/src/app/features/vehicle/page/vehicle-edit/vehicle-edit.component.html
index 7843fbb..39f8e85 100644
--- a/src/app/features/vehicle/page/vehicle-edit/vehicle-edit.component.html
+++ b/src/app/features/vehicle/page/vehicle-edit/vehicle-edit.component.html
@@ -1,15 +1,15 @@
 <div>
   <div>
-    <label>Marque</label>
+    <label>Marque</label><br>
     <input [(ngModel)]="vehicle.mark" type="text" pInputText />
-    <br>
-    <label>Modele</label>
+    <br><br>
+    <label>Modele</label><br>
     <input [(ngModel)]="vehicle.model" type="text" pInputText />
-
-    <label>Matricule</label>
+    <br><br>
+    <label>Matricule</label><br>
     <input [(ngModel)]="vehicle.matricule" type="text" pInputText />
   </div>
-
+  <br><br>
   <button (click)="save()" pButton type="button" label="Enregistrer"></button>
 
 </div>
diff --git a/src/app/features/vehicle/page/vehicle-edit/vehicle-edit.component.ts b/src/app/features/vehicle/page/vehicle-edit/vehicle-edit.component.ts
index aefcfa6..f8e6739 100644
--- a/src/app/features/vehicle/page/vehicle-edit/vehicle-edit.component.ts
+++ b/src/app/features/vehicle/page/vehicle-edit/vehicle-edit.component.ts
@@ -1,6 +1,6 @@
 import { Component, OnInit } from '@angular/core';
 import {VehicleService} from "../../service/vehicle.service";
-import {Router} from "@angular/router";
+import {ActivatedRoute, Router} from "@angular/router";
 
 @Component({
   selector: 'app-vehicle-edit',
@@ -10,16 +10,45 @@ import {Router} from "@angular/router";
 export class VehicleEditComponent implements OnInit {
 
   vehicle : any = {};
+  id: string = "0";
 
   constructor(private vehicleService: VehicleService,
+              private activatedRoute : ActivatedRoute,
               private router: Router) { }
 
   ngOnInit(): void {
+    this.id = this.activatedRoute.snapshot.params['id'];
+
+    if(this.id && this.id != "0"){
+      this.getById();
+    }
 
   }
 
-  save() {
-    this.vehicleService.create(this.vehicle).subscribe( {
+  getById(): void{
+    this.vehicleService.getById(this.id).subscribe({
+      next :(res)=>{
+        if(res.success){
+          this.vehicle = res.data;
+        }
+      },
+      error:(err)=>{
+
+      }
+    })
+  }
+
+  save(): void {
+
+    if(this.id == "0"){
+      this.create(this.vehicle);
+    }else {
+      this.update(this.vehicle);
+    }
+  }
+
+  create(vehicle: any): void{
+    this.vehicleService.create(vehicle).subscribe( {
       next: (res)=>{
         if(res.success){
           this.router.navigateByUrl("/app/vehicle").then();
@@ -27,4 +56,15 @@ export class VehicleEditComponent implements OnInit {
       }
     })
   }
+
+  update(vehicle: any): void {
+    this.vehicleService.update(vehicle).subscribe( {
+      next: (res)=>{
+        if(res.success){
+          this.router.navigateByUrl("/app/vehicle").then();
+        }
+      }
+    })
+  }
+
 }
diff --git a/src/app/features/vehicle/page/vehicle-list/vehicle-list.component.html b/src/app/features/vehicle/page/vehicle-list/vehicle-list.component.html
index dcc67d1..4beac20 100644
--- a/src/app/features/vehicle/page/vehicle-list/vehicle-list.component.html
+++ b/src/app/features/vehicle/page/vehicle-list/vehicle-list.component.html
@@ -1,6 +1,18 @@
 
+<div>
+  <div style="display: inline-flex">
+    <div style="">
+      Recherche <br>
+
+      <input type="text" pInputText [(ngModel)]="searchTerm" (ngModelChange)="search()" />
+    </div>
+
+    <div style="margin-left: 10px">Filtre pard ta</div>
+  </div>
+</div>
+
 <div style="text-align: right; margin-bottom :10px">
-  <button (click)="edit()" pButton type="button" label="Ajouter un véhicule"></button>
+  <button (click)="edit('0')" pButton type="button" label="Ajouter un véhicule"></button>
 </div>
 
 <p-table [value]="vehicles" [tableStyle]="{'min-width': '50rem'}">
@@ -9,18 +21,18 @@
       <th>Marque</th>
       <th>Modèle</th>
       <th>Matricule</th>
-      <th></th>
+      <th>Actions</th>
     </tr>
   </ng-template>
-  <ng-template pTemplate="body" let-product>
+  <ng-template pTemplate="body" let-vehicle>
     <tr>
-      <td>{{product.mark}}</td>
-      <td>{{product.model}}</td>
-      <td>{{product.matricule}}</td>
+      <td>{{vehicle.mark}}</td>
+      <td>{{vehicle.model}}</td>
+      <td>{{vehicle.matricule}}</td>
       <td>
-        <i class="pi pi-pencil" style="margin-right: 10px"></i>
-        <i class="pi pi-trash" style="margin-right: 10px"></i>
-        <i class="pi pi-eye" style="margin-right: 10px"></i>
+        <i (click)="edit(product._id)" class="pi pi-pencil" style="margin-right: 10px"></i>
+        <i (click)="delete(product._id)" class="pi pi-trash" style="margin-right: 10px"></i>
+        <i (click)="view(product._id)" class="pi pi-eye" style="margin-right: 10px"></i>
       </td>
     </tr>
   </ng-template>
diff --git a/src/app/features/vehicle/page/vehicle-list/vehicle-list.component.ts b/src/app/features/vehicle/page/vehicle-list/vehicle-list.component.ts
index 62b6d85..b6fcc3b 100644
--- a/src/app/features/vehicle/page/vehicle-list/vehicle-list.component.ts
+++ b/src/app/features/vehicle/page/vehicle-list/vehicle-list.component.ts
@@ -8,6 +8,13 @@ import {VehicleService} from "../../service/vehicle.service";
   styleUrls: ['./vehicle-list.component.scss']
 })
 export class VehicleListComponent implements OnInit {
+
+  //1. filter
+  searchTerm : string =  "";
+  params : any = {};
+
+  //2. table
+
   vehicles: any[] = [];
 
   constructor(private router: Router,
@@ -15,11 +22,16 @@ export class VehicleListComponent implements OnInit {
   }
 
   ngOnInit(): void {
-    this.getServices();
+    this.params.search = "";
+    this.params.fields = ["matricule", "mark", "model"];
+    this.params.page = 1;
+    this.params.limit = 5;
+    this.getVehicles();
   }
 
-  getServices() {
-    this.vehicleService.getAll().subscribe({
+  getVehicles() {
+
+    this.vehicleService.getAll(this.params).subscribe({
       next: (res) => {
         if (res.success) {
           this.vehicles = res.data;
@@ -28,16 +40,27 @@ export class VehicleListComponent implements OnInit {
     })
   }
 
-  edit(): void {
-    /*
-      let vehicle : any = {};
-      vehicle.model = "RangeRoger";
-      vehicle.mark = "Sport";
-      vehicle.matricule = "535353";
-
-      this.vehicles.push(vehicle);
-  */
-    this.router.navigateByUrl('/app/vehicle/edit').then();
+  edit(_id: string): void {
+    this.router.navigateByUrl('/app/vehicle/edit/'+_id).then();
+  }
+  view(_id: string): void {
+    this.router.navigateByUrl('/app/vehicle/view/'+_id).then();
   }
 
+  protected readonly visualViewport = visualViewport;
+
+  delete(_id: string): void {
+    this.vehicleService.delete(_id).subscribe({
+      next: (res)=>{
+        if(res.success){
+          this.getVehicles();
+        }
+      }
+    })
+  }
+
+  search() {
+    this.params.search = this.searchTerm;
+    this.getVehicles()
+  }
 }
diff --git a/src/app/features/vehicle/page/vehicle-view/vehicle-view.component.html b/src/app/features/vehicle/page/vehicle-view/vehicle-view.component.html
index e5a89af..6922491 100644
--- a/src/app/features/vehicle/page/vehicle-view/vehicle-view.component.html
+++ b/src/app/features/vehicle/page/vehicle-view/vehicle-view.component.html
@@ -1 +1,14 @@
-<p>vehicle-view works!</p>
+<div>
+  <div>
+    <label>Marque</label><br>
+    <strong>{{vehicle.mark }}</strong>
+    <br><br>
+    <label>Modele</label><br>
+    {{vehicle.model}}
+    <br><br>
+    <label>Matricule</label><br>
+    {{vehicle.matricule}}
+  </div>
+  <br><br>
+
+</div>
diff --git a/src/app/features/vehicle/page/vehicle-view/vehicle-view.component.ts b/src/app/features/vehicle/page/vehicle-view/vehicle-view.component.ts
index 4fdb71a..96e0031 100644
--- a/src/app/features/vehicle/page/vehicle-view/vehicle-view.component.ts
+++ b/src/app/features/vehicle/page/vehicle-view/vehicle-view.component.ts
@@ -1,4 +1,6 @@
-import { Component, OnInit } from '@angular/core';
+import {ChangeDetectorRef, Component, OnInit} from '@angular/core';
+import {VehicleService} from "../../service/vehicle.service";
+import {ActivatedRoute, Router} from "@angular/router";
 
 @Component({
   selector: 'app-vehicle-view',
@@ -6,10 +8,39 @@ import { Component, OnInit } from '@angular/core';
   styleUrls: ['./vehicle-view.component.scss']
 })
 export class VehicleViewComponent implements OnInit {
+  vehicle : any = {};
+  id: string = "0";
 
-  constructor() { }
+  constructor(private vehicleService: VehicleService,
+              private activatedRoute : ActivatedRoute,
+              private  cdr: ChangeDetectorRef,
+              private router: Router) { }
 
   ngOnInit(): void {
+    this.id = this.activatedRoute.snapshot.params['id'];
+
+    if(this.id && this.id != "0"){
+      this.getById();
+    }
+
   }
 
+  getById(): void{
+    this.vehicleService.getById(this.id).subscribe({
+      next :(res)=>{
+        if(res.success){
+          this.vehicle = res.data;
+          this.cdr.detectChanges();
+        }
+      },
+      error:(err)=>{
+
+      }
+    })
+  }
+
+
+
+
+
 }
diff --git a/src/app/features/vehicle/service/vehicle.service.ts b/src/app/features/vehicle/service/vehicle.service.ts
index a33962b..5dc1146 100644
--- a/src/app/features/vehicle/service/vehicle.service.ts
+++ b/src/app/features/vehicle/service/vehicle.service.ts
@@ -10,8 +10,8 @@ export class VehicleService {
   url: string = "vehicle"
   constructor(private http: HttpClient) { }
 
-  getAll():Observable<any>{
-    return this.http.get<any>(apiRoute+this.url);
+  getAll(params:any):Observable<any>{
+    return this.http.get<any>(apiRoute+this.url, {params});
   }
 
   getById(id: string):Observable<any> {
@@ -23,7 +23,7 @@ export class VehicleService {
   }
 
   update(vehicle: any):Observable<any>{
-    return this.http.put<any>(apiRoute+this.url+ "/"+vehicle.id,vehicle);
+    return this.http.put<any>(apiRoute+this.url+ "/"+vehicle._id,vehicle);
   }
 
   delete(id: string):Observable<any>{
diff --git a/src/app/features/vehicle/vehicle.module.ts b/src/app/features/vehicle/vehicle.module.ts
index e4e316b..da8f94b 100644
--- a/src/app/features/vehicle/vehicle.module.ts
+++ b/src/app/features/vehicle/vehicle.module.ts
@@ -15,11 +15,11 @@ const routes: Routes = [
     component: VehicleListComponent
   },
   {
-    path: 'edit',
+    path: 'edit/:id',
     component: VehicleEditComponent
   },
   {
-    path:'view',
+    path:'view/:id',
     component:VehicleViewComponent
   }
 ]
diff --git a/src/app/layout/layout.component.html b/src/app/layout/layout.component.html
index 69c6b3c..1e3aabb 100644
--- a/src/app/layout/layout.component.html
+++ b/src/app/layout/layout.component.html
@@ -12,31 +12,33 @@
     <div class="spacer"></div>
 
 
-    <!-- service -->
-    <a routerLink="/app/service"><span><i class="pi-compass"></i>Service</span></a>
-    <div class="spacer"></div>
+  <!-- service -->
+  <a routerLink="/app/service"><span><i class="pi-compass"></i>Service</span></a>
+  <div class="spacer"></div>
 
-
-    <span>Carburant</span>
-    <div class="spacer"></div>
-    <span><a routerLink="/app/problem">Problème</a></span>
-    <div class="spacer"></div>
-    <span>Bon de travaux</span>
-    <div class="spacer"></div>
-    <span>Rapelle</span>
-    <div class="spacer"></div>
-    <span>Calendrier</span>
-    <div class="spacer"></div>
-    <span><a routerLink="/app/contact">Contact</a></span>
-    <div class="spacer"></div>
-    <span>Utilisateur</span>
+  <span>Carburant</span>
+  <div class="spacer"></div>
+  <span><a routerLink="/app/problem">Problème</a></span>
+  <div class="spacer"></div>
+  <span>Bon de travaux</span>
+  <div class="spacer"></div>
+  <span>Rapelle</span>
+  <div class="spacer"></div>
+  <span>Calendrier</span>
+  <div class="spacer"></div>
+  <span><a routerLink="/app/contact">Contact</a></span>
+  <div class="spacer"></div>
+  <span>Utilisateur</span>
+  <div class="spacer"></div>
+  <span>Place</span>
+  <div class="spacer"></div>
 </div>
 
 <div role="main" style="margin-top: 120px; padding: 20px">
 
-    <div class="container">
-        <router-outlet></router-outlet>
-    </div>
+  <div class="container">
+    <router-outlet></router-outlet>
+  </div>