diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts
index 8204efc..2a2797f 100644
--- a/src/app/app-routing.module.ts
+++ b/src/app/app-routing.module.ts
@@ -29,7 +29,16 @@ import {LocationCreateComponent} from "./location/location-create/location-creat
 import {ScheduleListComponent} from "./schedule/schedule-list/schedule-list.component";
 import {ScheduleCreateComponent} from "./schedule/schedule-create/schedule-create.component";
 import {ScheduleDetailComponent} from "./schedule/schedule-detail/schedule-detail.component";
-
+import { CatListComponent } from './pet/cat/cat-list/cat-list.component';
+import { CatCreateComponent } from './pet/cat/cat-create/cat-create.component';
+import { CatDetailComponent } from './pet/cat/cat-detail/cat-detail.component';
+import { CatEditComponent } from './pet/cat/cat-edit/cat-edit.component';
+import { CatDeleteComponent } from './pet/cat/cat-delete/cat-delete.component';
+import { DogListComponent } from './pet/dog/dog-list/dog-list.component';
+import { DogCreateComponent } from './pet/dog/dog-create/dog-create.component';
+import { DogDetailComponent } from './pet/dog/dog-detail/dog-detail.component';
+import { DogEditComponent } from './pet/dog/dog-edit/dog-edit.component';
+import { DogDeleteComponent } from './pet/dog/dog-delete/dog-delete.component';
 
 const routes: Routes = [
   { path: 'users/create', component: UserRegisterComponent},
@@ -58,6 +67,16 @@ const routes: Routes = [
   { path: 'role/create', component:RoleCreateComponent },
   { path: 'role/:id/delete', component:RoleDeleteComponent },
   { path: 'role/:id', component:RoleDetailComponent },
+  { path: 'cats', component: CatListComponent, canActivate: [LoggedInGuard]},
+  { path: 'cats/create', component: CatCreateComponent, canActivate: [LoggedInGuard]},
+  { path: 'cats/:id', component: CatDetailComponent, canActivate: [LoggedInGuard]},
+  { path: 'cats/:id/edit', component: CatEditComponent, canActivate: [LoggedInGuard]},
+  { path: 'cats/:id/delete', component: CatDeleteComponent, canActivate: [LoggedInGuard]},
+  { path: 'dogs', component: DogListComponent, canActivate: [LoggedInGuard]},
+  { path: 'dogs/create', component: DogCreateComponent, canActivate: [LoggedInGuard]},
+  { path: 'dogs/:id', component: DogDetailComponent, canActivate: [LoggedInGuard]},
+  { path: 'dogs/:id/edit', component: DogEditComponent, canActivate: [LoggedInGuard]},
+  { path: 'dogs/:id/delete', component: DogDeleteComponent, canActivate: [LoggedInGuard]},
   { path: 'about', component: AboutComponent},
   { path: '404', component: NotFoundComponent},
   { path: '', redirectTo: 'about', pathMatch: 'full'},
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index ff31e7d..e70a2af 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -51,7 +51,20 @@ import {ScheduleListComponent} from './schedule/schedule-list/schedule-list.comp
 import {ScheduleSearchComponent} from './schedule/schedule-search/schedule-search.component';
 import {ScheduleCreateComponent} from "./schedule/schedule-create/schedule-create.component";
 import {ScheduleDetailComponent} from "./schedule/schedule-detail/schedule-detail.component";
-
+import { CatListComponent } from './pet/cat/cat-list/cat-list.component';
+import { CatService } from './pet/cat/cat.service';
+import { DogService } from './pet/dog/dog.service';
+import { CatCreateComponent } from './pet/cat/cat-create/cat-create.component';
+import { CatDetailComponent } from './pet/cat/cat-detail/cat-detail.component';
+import { CatEditComponent } from './pet/cat/cat-edit/cat-edit.component';
+import { CatDeleteComponent } from './pet/cat/cat-delete/cat-delete.component';
+import { CatSearchComponent } from './pet/cat/cat-search/cat-search.component';
+import { DogListComponent } from './pet/dog/dog-list/dog-list.component';
+import { DogCreateComponent } from './pet/dog/dog-create/dog-create.component';
+import { DogDetailComponent } from './pet/dog/dog-detail/dog-detail.component';
+import { DogDeleteComponent } from './pet/dog/dog-delete/dog-delete.component';
+import { DogEditComponent } from './pet/dog/dog-edit/dog-edit.component';
+import { DogSearchComponent } from './pet/dog/dog-search/dog-search.component';
 
 @NgModule({
   declarations: [
@@ -88,7 +101,19 @@ import {ScheduleDetailComponent} from "./schedule/schedule-detail/schedule-detai
     ShelterDetailComponent,
     LocationListComponent,
     LocationSearchComponent,
-    LocationCreateComponent
+    LocationCreateComponent,
+    CatListComponent,
+    CatCreateComponent,
+    CatDetailComponent,
+    CatDeleteComponent,
+    CatEditComponent,
+    CatSearchComponent,
+    DogListComponent,
+    DogCreateComponent,
+    DogDetailComponent,
+    DogDeleteComponent,
+    DogEditComponent,
+    DogSearchComponent,
   ],
   imports: [
     BrowserModule,
@@ -108,7 +133,7 @@ import {ScheduleDetailComponent} from "./schedule/schedule-detail/schedule-detai
     { provide: HTTP_INTERCEPTORS, useClass: AuthInterceptor, multi: true },
     { provide: HTTP_INTERCEPTORS, useClass: HttpErrorInterceptor, multi: true },
     AuthenticationBasicService, LoggedInGuard, UserService, ScheduleService, ShelterService, LocationService,
-    provideAnimationsAsync()
+    CatService, DogService, provideAnimationsAsync()
   ],
   bootstrap: [AppComponent]
 })
diff --git a/src/app/navbar/navbar.component.html b/src/app/navbar/navbar.component.html
index f50626a..d891f16 100644
--- a/src/app/navbar/navbar.component.html
+++ b/src/app/navbar/navbar.component.html
@@ -1,5 +1,5 @@
 <nav class="navbar navbar-expand-lg navbar-light bg-light">
-  <a class="navbar-brand ms-3" [routerLink]="['/about']"><b>Angular</b>Template</a>
+  <a class="navbar-brand ms-3" [routerLink]="['/about']"><b>MyPets</b>GEIADE</a>
   <button class="navbar-toggler" type="button" (click)="isCollapsed = !isCollapsed"
           [attr.aria-expanded]="!isCollapsed" aria-controls="navbarContent" aria-label="Toggle navigation">
     <span class="navbar-toggler-icon"></span>
@@ -67,6 +67,16 @@
              [routerLink]="['/locations/create']"><span class="fas fa-user-circle"></span> Create</a>
         </div>
       </li>
+      <li class="nav-item" *ngIf="isRole('user')" ngbDropdown>
+        <a class="nav-link dropdown-toggle" id="petsDropdown" role="button"
+           aria-haspopup="true" aria-expanded="false" ngbDropdownToggle>Pets</a>
+        <div class="dropdown-menu" aria-labelledby="petsDropdown" ngbDropdownMenu>
+          <a class="dropdown-item" [routerLinkActive]="'active'" [routerLinkActiveOptions]="{ exact: true }"
+             [routerLink]="['/dogs']"><span class="fas fa-paw"></span> Dogs</a>
+          <a class="dropdown-item" [routerLinkActive]="'active'" [routerLinkActiveOptions]="{ exact: true }"
+             [routerLink]="['/cats']"><span class="fas fa-heart"></span> Cats</a>
+        </div>
+      </li>
     </ul>
     <ul class="navbar-nav ms-auto me-3" app-login-navbar></ul>
   </div>
diff --git a/src/app/pet/cat/cat-create/cat-create.component.css b/src/app/pet/cat/cat-create/cat-create.component.css
new file mode 100644
index 0000000..72f16bc
--- /dev/null
+++ b/src/app/pet/cat/cat-create/cat-create.component.css
@@ -0,0 +1,4 @@
+.form-error {
+    color: red;
+    font-size: x-small;
+}
\ No newline at end of file
diff --git a/src/app/pet/cat/cat-create/cat-create.component.html b/src/app/pet/cat/cat-create/cat-create.component.html
new file mode 100644
index 0000000..906d1fd
--- /dev/null
+++ b/src/app/pet/cat/cat-create/cat-create.component.html
@@ -0,0 +1,198 @@
+<form
+  id="cat-form"
+  (ngSubmit)="onSubmit()"
+  #form="ngForm"
+  [formGroup]="catForm"
+>
+  <fieldset>
+    <div class="row">
+      <div class="form-group mb-3 col-6">
+        <label class="control-label required-label" for="name">Name</label>
+          <input
+            id="name"
+            name="name"
+            formControlName="name"
+            type="text"
+            class="form-control"
+            [(ngModel)]="cat.name"
+          />
+        <div class="form-error" *ngIf="name.errors?.['required']">
+          Name is required
+        </div>
+      </div>
+
+      <div class="form-group mb-3 col-6">
+        <label class="control-label required-label" for="chip">Chip</label>
+          <input
+            id="chip"
+            name="chip"
+            formControlName="chip"
+            type="text"
+            class="form-control"
+            [(ngModel)]="cat.chip"
+          />
+        <div class="form-error" *ngIf="chip.errors?.['required']">
+          Chip is required
+        </div>
+      </div>
+
+      <div class="form-group mb-3 col-6">
+        <label class="control-label required-label" for="dateOfBirth">Date of birth</label>
+          <input
+            id="dateOfBirth"
+            name="dateOfBirth"
+            formControlName="dateOfBirth"
+            type="date"
+            class="form-control"
+            [(ngModel)]="cat.dateOfBirth"
+          />
+        <div class="form-error" *ngIf="dateOfBirth.errors?.['required']">
+          Date of birth is required
+        </div>
+        <div
+          class="form-error"
+          *ngIf="dateOfBirth.errors?.['invalidDate'] && !dateOfBirth.errors?.['required']"
+        >
+          Invalid date
+        </div>
+      </div>
+
+      <div class="form-group mb-3 col-6">
+        <label class="control-label required-label" for="colour">Colour</label>
+          <input
+            id="colour"
+            name="colour"
+            formControlName="colour"
+            type="color"
+            class="form-control"
+            [(ngModel)]="cat.colour"
+          />
+        <div class="form-error" *ngIf="colour.errors?.['required']">
+          Colour is required
+        </div>
+        <div
+          class="form-error"
+          *ngIf="colour.errors?.['invalidColour'] && !colour.errors?.['required']"
+        >
+          Invalid date
+        </div>
+      </div>
+
+      <div class="form-group mb-3 col-6">
+        <label class="control-label required-label" for="size">Size</label>
+          <select
+            id="size"
+            name="size"
+            formControlName="size"
+            class="form-control"
+            [(ngModel)]="cat.size"
+          >
+          <option value="1">Small</option>
+          <option value="2">Average</option>
+          <option value="3">Large</option>
+          <option value="4">Extra Large</option>
+        </select>
+        <div class="form-error" *ngIf="size.errors?.['required']">
+          Size is required
+        </div>
+        <div
+          class="form-error"
+          *ngIf="size.errors?.['invalidNumber'] && !size.errors?.['required']"
+        >
+          Size is invalid
+        </div>
+      </div>
+
+      <div class="form-group mb-3 col-6">
+        <label class="control-label required-label" for="sex">Sex</label>
+          <select
+            id="sex"
+            name="sex"
+            formControlName="sex"
+            class="form-control"
+            [(ngModel)]="cat.sex"
+          >
+          <option value="male">Male</option>
+          <option value="female">Female</option>
+        </select>
+        <div class="form-error" *ngIf="sex.errors?.['required']">
+          Sex is required
+        </div>
+        <div
+          class="form-error"
+          *ngIf="sex.errors?.['invalidSex'] && !sex.errors?.['required']"
+        >
+          Sex is invalid
+        </div>
+      </div>
+
+      <div class="form-group mb-3 col-6">
+        <label class="control-label required-label" for="name">Race</label>
+          <input
+            id="race"
+            name="race"
+            formControlName="race"
+            type="text"
+            class="form-control"
+            [(ngModel)]="cat.race"
+          />
+        <div class="form-error" *ngIf="race.errors?.['required']">
+          Race is required
+        </div>
+      </div>
+
+      <div class="form-group mb-3 col-6">
+        <label class="control-label required-label" for="dangerous">Dangerous</label>
+          <input
+            id="dangerous"
+            name="dangerous"
+            formControlName="dangerous"
+            type="checkbox"
+            clasS="ms-3"
+            [(ngModel)]="cat.dangerous"
+          />
+      </div>
+
+      <div class="form-group mb-3 col-6">
+        <label class="control-label required-label" for="meowingLevel">Meowing Level</label>
+        <select
+          id="meowingLevel"
+          name="meowingLevel"
+          formControlName="meowingLevel"
+          class="form-control"
+          [(ngModel)]="cat.meowingLevel"
+        >
+          <option value="1">No meowing</option>
+          <option value="2">Low meowing</option>
+          <option value="3">Average meowing</option>
+          <option value="4">Loud meowing</option>
+        </select>
+        <div class="form-error" *ngIf="meowingLevel.errors?.['required']">
+          Meowing level is required
+        </div>
+      </div>
+
+    </div>
+
+    <!-- Save and back buttons -->
+    <div class="form-group fa-pull-right mt-3">
+      <button
+        id="listBtn"
+        type="button"
+        [routerLink]="['/cats']"
+        class="btn btn-outline-primary pull-right"
+      >
+        Back
+      </button>
+      <button
+        id="submit"
+        type="submit"
+        [disabled]="!form.form.valid"
+        class="btn btn-success ms-3"
+      >
+        <i class="fa fa-plus-circle me-2"></i>
+        Create
+      </button>
+    </div>
+  </fieldset>
+</form>
diff --git a/src/app/pet/cat/cat-create/cat-create.component.ts b/src/app/pet/cat/cat-create/cat-create.component.ts
new file mode 100644
index 0000000..2102a8a
--- /dev/null
+++ b/src/app/pet/cat/cat-create/cat-create.component.ts
@@ -0,0 +1,156 @@
+import {Component, OnInit} from '@angular/core';
+import {Router} from "@angular/router";
+import {CatService} from "../cat.service";
+import {Cat} from "../cat";
+import {AbstractControl, FormControl, FormGroup, ValidationErrors, ValidatorFn, Validators} from "@angular/forms";
+import {PagedResourceCollection} from "@lagoshny/ngx-hateoas-client";
+
+@Component({
+  selector: 'app-cat-create',
+  templateUrl: './cat-create.component.html',
+  styleUrls: ['./cat-create.component.css']
+})
+export class CatCreateComponent implements OnInit{
+
+  closeResult = '';
+  public isModalSaved: boolean = false;
+  public cats: Cat[] = [];
+  public cat: Cat;
+  public catForm: FormGroup;
+
+  constructor(
+    private router: Router,
+    private catService: CatService,
+  ) {}
+
+  ngOnInit(): void {
+    this.cat = new Cat();
+    this.catForm = new FormGroup({
+      chip: new FormControl(this.cat.chip, [
+        Validators.required,
+      ]),
+      name: new FormControl(this.cat.name, [
+        Validators.required,
+      ]),
+      dateOfBirth: new FormControl(this.cat.dateOfBirth, [
+        Validators.required,
+        this.dateValidator(),
+      ]),
+      colour: new FormControl(this.cat.colour, [
+        Validators.required,
+        this.colourValidator(),
+      ]),
+      size: new FormControl(this.cat.size, [
+        Validators.required,
+        this.numberValidator(),
+      ]),
+      sex: new FormControl(this.cat.sex, [
+        Validators.required,
+        this.sexValidator(),
+      ]),
+      race: new FormControl(this.cat.race, [
+        Validators.required,
+      ]),
+      dangerous: new FormControl(this.cat.dangerous, []),
+      meowingLevel: new FormControl(this.cat.meowingLevel, [
+        Validators.required,
+      ]),
+    });
+    this.loadCatList();
+  }
+
+  loadCatList() {
+    this.catService
+      .getPage({
+        sort: { name: 'ASC' },
+      })
+      .subscribe((cats: PagedResourceCollection<Cat>) => {
+        this.cats = cats.resources.sort((a, b) =>
+          a.chip.localeCompare(b.chip)
+        );
+      });
+  }
+
+  dateValidator(): ValidatorFn {
+    return (control: AbstractControl): ValidationErrors | null => {
+      const dateValue = control.value;
+      const isValidDate = !isNaN(Date.parse(dateValue));
+      return isValidDate ? null : { invalidDate: { value: control.value } };
+    };
+  }
+
+  colourValidator(): ValidatorFn {
+    const hexColorRe: RegExp = /^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/;
+    return (control: AbstractControl): ValidationErrors | null => {
+      const isValidColour = hexColorRe.test(control.value);
+      return isValidColour ? null : { invalidColour: { value: control.value } };
+    };
+  }
+
+  numberValidator(): ValidatorFn {
+    return (control: AbstractControl): ValidationErrors | null => {
+      const numberValue = control.value;
+      const isValidNumber = !isNaN(numberValue) && numberValue > 0;
+      return isValidNumber ? null : { invalidNumber: { value: control.value } };
+    };
+  }
+
+  sexValidator(): ValidatorFn {
+    const validSexes = ['male', 'female'];
+    return (control: AbstractControl): ValidationErrors | null => {
+      const isValidSex = control.value !== null && control.value !== undefined && validSexes.includes(control.value.toLowerCase());
+      return isValidSex ? null : { invalidSex: { value: control.value } };
+    };
+  }
+
+  get chip() {
+    return this.catForm.get('chip');
+  }
+
+  get name() {
+    return this.catForm.get('name');
+  }
+
+  get dateOfBirth() {
+    return this.catForm.get('dateOfBirth');
+  }
+
+  get adopted() {
+    return this.catForm.get('adopted');
+  }
+
+  get colour() {
+    return this.catForm.get('colour');
+  }
+
+  get size() {
+    return this.catForm.get('size');
+  }
+
+  get sex() {
+    return this.catForm.get('sex');
+  }
+
+  get race() {
+    return this.catForm.get('race');
+  }
+
+  get dangerous() {
+    return this.catForm.get('dangerous');
+  }
+
+  get meowingLevel() {
+    return this.catForm.get('meowingLevel');
+  }
+
+  onSubmit(): void {
+    this.cat.adopted = false;
+    this.catService
+      .createResource({ body: this.cat })
+      .subscribe((cat: Cat) => {
+        const uri = (cat as any).uri;
+        this.router.navigate([uri]).then();
+      });
+  }
+
+}
diff --git a/src/app/pet/cat/cat-delete/cat-delete.component.html b/src/app/pet/cat/cat-delete/cat-delete.component.html
new file mode 100644
index 0000000..3a3ade3
--- /dev/null
+++ b/src/app/pet/cat/cat-delete/cat-delete.component.html
@@ -0,0 +1,16 @@
+<div class="panel panel-warning">
+    <div class="panel-heading">
+      <div class="panel-title">
+        <h1>Are you sure you want to delete this record?</h1>
+      </div>
+    </div>
+    <div class="panel-body">
+      <div class="text-center">
+        <button id="deleteBtn" type="button" (click)="delete()"
+                class="btn btn-outline-danger m-1">Delete</button>
+        <button id="listBtn" type="button" [routerLink]="['/cats', cat.id]"
+                class="btn btn-outline-primary m-1">Cancel</button>
+      </div>
+    </div>
+  </div>
+  
\ No newline at end of file
diff --git a/src/app/pet/cat/cat-delete/cat-delete.component.ts b/src/app/pet/cat/cat-delete/cat-delete.component.ts
new file mode 100644
index 0000000..3929b77
--- /dev/null
+++ b/src/app/pet/cat/cat-delete/cat-delete.component.ts
@@ -0,0 +1,31 @@
+import { Component, OnInit } from '@angular/core';
+import { ActivatedRoute, Router } from '@angular/router';
+import { Cat } from '../cat';
+import { CatService } from '../cat.service';
+
+@Component({
+  selector: 'app-cat-delete',
+  templateUrl: './cat-delete.component.html'
+})
+export class CatDeleteComponent implements OnInit {
+  public cat: Cat = new Cat();
+  private id: string;
+
+  constructor(private route: ActivatedRoute,
+              private router: Router,
+              private catService: CatService) {
+  }
+
+  ngOnInit(): void {
+    this.id = this.route.snapshot.paramMap.get('id');
+    this.catService.getResource(this.id).subscribe(
+      cat => this.cat = cat);
+  }
+
+  delete(): void {
+    this.catService.deleteResource(this.cat).subscribe(
+      () => {
+        this.router.navigate(['cats']);
+      });
+  }
+}
diff --git a/src/app/pet/cat/cat-detail/cat-detail.component.html b/src/app/pet/cat/cat-detail/cat-detail.component.html
new file mode 100644
index 0000000..d8a9458
--- /dev/null
+++ b/src/app/pet/cat/cat-detail/cat-detail.component.html
@@ -0,0 +1,63 @@
+<div class="card mb-4">
+    <div class="card-block">
+      <h1 class="card-title col-md-12 px-4 pt-3 text-xxl">{{cat.name}}</h1>
+      <div class="card-body row m-1">
+        <div class="col-md-4 mb-5">
+          <h6 class="card-subtitle text-muted">Chip</h6>
+          <p class="card-text">{{cat.chip}}</p>
+        </div>
+        <div class="col-md-4 mb-5">
+            <h6 class="card-subtitle text-muted">Date of birth</h6>
+            <p class="card-text">{{cat.dateOfBirth}}</p>
+        </div>
+        <div class="col-md-4 mb-5">
+            <h6 class="card-subtitle text-muted">Colour</h6>
+            <div style="width: 100%; height: 24px; background-color: {{cat.colour}}; border: 1px solid;"></div>
+        </div>
+        <div class="col-md-4 mb-5">
+            <h6 class="card-subtitle text-muted">Size</h6>
+            <p class="card-text" *ngIf="cat.size === 1">Small</p>
+            <p class="card-text" *ngIf="cat.size === 2">Average</p>
+            <p class="card-text" *ngIf="cat.size === 3">Large</p>
+            <p class="card-text" *ngIf="cat.size === 4">Extra Large</p>
+        </div>
+        <div class="col-md-4 mb-5">
+            <h6 class="card-subtitle text-muted">Sex</h6>
+            <p class="card-text" *ngIf="cat.sex === 'male'">Male</p>
+            <p class="card-text" *ngIf="cat.sex === 'female'">Female</p>
+        </div>
+        <div class="col-md-4 mb-5">
+            <h6 class="card-subtitle text-muted">Race</h6>
+            <p class="card-text">{{cat.race}}</p>
+        </div>
+        <div class="col-md-4">
+            <h6 class="card-subtitle text-muted">Dangerous</h6>
+            <i class="fa fa-check text-success" *ngIf="cat.dangerous === true"></i>
+            <i class="fa fa-xmark text-danger" *ngIf="cat.dangerous === false"></i>
+        </div>
+        <div class="col-md-4">
+            <h6 class="card-subtitle text-muted">Adopted</h6>
+            <i class="fa fa-check text-success" *ngIf="cat.adopted === true"></i>
+            <i class="fa fa-xmark text-danger" *ngIf="cat.adopted === false"></i>
+        </div>
+        <div class="col-md-4">
+            <h6 class="card-subtitle text-muted">Meowing level</h6>
+            <p class="card-text" *ngIf="cat.meowingLevel === 1">No meowing</p>
+            <p class="card-text" *ngIf="cat.meowingLevel === 2">Low meowing</p>
+            <p class="card-text" *ngIf="cat.meowingLevel === 3">Average meowing</p>
+            <p class="card-text" *ngIf="cat.meowingLevel === 4">Loud meowing</p>
+        </div>
+      </div>
+      <div class="card-footer text-right">
+        <button id="listBtn" type="button" [routerLink]="['/cats']"
+                class="btn m-1 btn-outline-primary">Cat List
+        </button>
+        <button id="editBtn" type="button" [routerLink]="['edit']"
+                class="btn m-1 btn-outline-success">Edit
+        </button>
+        <button id="deleteBtn" type="button" [routerLink]="['delete']"
+                class="btn m-1 btn-outline-danger">Delete
+        </button>
+      </div>
+    </div>
+  </div>
\ No newline at end of file
diff --git a/src/app/pet/cat/cat-detail/cat-detail.component.ts b/src/app/pet/cat/cat-detail/cat-detail.component.ts
new file mode 100644
index 0000000..21703a7
--- /dev/null
+++ b/src/app/pet/cat/cat-detail/cat-detail.component.ts
@@ -0,0 +1,25 @@
+import { Component, OnInit } from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
+import { CatService } from '../cat.service';
+import { Cat } from '../cat';
+
+@Component({
+  selector: 'app-cat-detail',
+  templateUrl: './cat-detail.component.html'
+})
+export class CatDetailComponent implements OnInit {
+  public cat: Cat = new Cat();
+
+  constructor(private route: ActivatedRoute,
+              private catService: CatService) {
+  }
+
+  ngOnInit(): void {
+    const id = this.route.snapshot.paramMap.get('id');
+    this.catService.getResource(id).subscribe(
+      cat => {
+        this.cat = cat;
+      });
+  }
+
+}
diff --git a/src/app/pet/cat/cat-edit/cat-edit.component.html b/src/app/pet/cat/cat-edit/cat-edit.component.html
new file mode 100644
index 0000000..15c80f8
--- /dev/null
+++ b/src/app/pet/cat/cat-edit/cat-edit.component.html
@@ -0,0 +1,198 @@
+<form
+  id="cat-form"
+  (ngSubmit)="onSubmit()"
+  #form="ngForm"
+  [formGroup]="catForm"
+>
+  <fieldset>
+    <div class="row">
+      <div class="form-group mb-3 col-6">
+        <label class="control-label required-label" for="name">Name</label>
+          <input
+            id="name"
+            name="name"
+            formControlName="name"
+            type="text"
+            class="form-control"
+            [(ngModel)]="cat.name"
+          />
+        <div class="form-error" *ngIf="name.errors?.['required']">
+          Name is required
+        </div>
+      </div>
+
+      <div class="form-group mb-3 col-6">
+        <label class="control-label required-label" for="chip">Chip</label>
+          <input
+            id="chip"
+            name="chip"
+            formControlName="chip"
+            type="text"
+            class="form-control"
+            [(ngModel)]="cat.chip"
+          />
+        <div class="form-error" *ngIf="chip.errors?.['required']">
+          Chip is required
+        </div>
+      </div>
+
+      <div class="form-group mb-3 col-6">
+        <label class="control-label required-label" for="dateOfBirth">Date of birth</label>
+          <input
+            id="dateOfBirth"
+            name="dateOfBirth"
+            formControlName="dateOfBirth"
+            type="date"
+            class="form-control"
+            [(ngModel)]="cat.dateOfBirth"
+          />
+        <div class="form-error" *ngIf="dateOfBirth.errors?.['required']">
+          Date of birth is required
+        </div>
+        <div
+          class="form-error"
+          *ngIf="dateOfBirth.errors?.['invalidDate'] && !dateOfBirth.errors?.['required']"
+        >
+          Invalid date
+        </div>
+      </div>
+
+      <div class="form-group mb-3 col-6">
+        <label class="control-label required-label" for="colour">Colour</label>
+          <input
+            id="colour"
+            name="colour"
+            formControlName="colour"
+            type="color"
+            class="form-control"
+            [(ngModel)]="cat.colour"
+          />
+        <div class="form-error" *ngIf="colour.errors?.['required']">
+          Colour is required
+        </div>
+        <div
+          class="form-error"
+          *ngIf="colour.errors?.['invalidColour'] && !colour.errors?.['required']"
+        >
+          Invalid date
+        </div>
+      </div>
+
+      <div class="form-group mb-3 col-6">
+        <label class="control-label required-label" for="size">Size</label>
+          <select
+            id="size"
+            name="size"
+            formControlName="size"
+            class="form-control"
+            [(ngModel)]="cat.size"
+          >
+          <option value="1">Small</option>
+          <option value="2">Average</option>
+          <option value="3">Large</option>
+          <option value="4">Extra Large</option>
+        </select>
+        <div class="form-error" *ngIf="size.errors?.['required']">
+          Size is required
+        </div>
+        <div
+          class="form-error"
+          *ngIf="size.errors?.['invalidNumber'] && !size.errors?.['required']"
+        >
+          Size is invalid
+        </div>
+      </div>
+
+      <div class="form-group mb-3 col-6">
+        <label class="control-label required-label" for="sex">Sex</label>
+          <select
+            id="sex"
+            name="sex"
+            formControlName="sex"
+            class="form-control"
+            [(ngModel)]="cat.sex"
+          >
+          <option value="male">Male</option>
+          <option value="female">Female</option>
+        </select>
+        <div class="form-error" *ngIf="sex.errors?.['required']">
+          Sex is required
+        </div>
+        <div
+          class="form-error"
+          *ngIf="sex.errors?.['invalidSex'] && !sex.errors?.['required']"
+        >
+          Sex is invalid
+        </div>
+      </div>
+
+      <div class="form-group mb-3 col-6">
+        <label class="control-label required-label" for="name">Race</label>
+          <input
+            id="race"
+            name="race"
+            formControlName="race"
+            type="text"
+            class="form-control"
+            [(ngModel)]="cat.race"
+          />
+        <div class="form-error" *ngIf="race.errors?.['required']">
+          Race is required
+        </div>
+      </div>
+
+      <div class="form-group mb-3 col-6">
+        <label class="control-label required-label" for="dangerous">Dangerous</label>
+          <input
+            id="dangerous"
+            name="dangerous"
+            formControlName="dangerous"
+            type="checkbox"
+            clasS="ms-3"
+            [(ngModel)]="cat.dangerous"
+          />
+      </div>
+
+      <div class="form-group mb-3 col-6">
+        <label class="control-label required-label" for="meowingLevel">Meowing Level</label>
+        <select
+          id="meowingLevel"
+          name="meowingLevel"
+          formControlName="meowingLevel"
+          class="form-control"
+          [(ngModel)]="cat.meowingLevel"
+        >
+          <option value="1">No meowing</option>
+          <option value="2">Low meowing</option>
+          <option value="3">Average meowing</option>
+          <option value="4">Loud meowing</option>
+        </select>
+        <div class="form-error" *ngIf="meowingLevel.errors?.['required']">
+          Meowing level is required
+        </div>
+      </div>
+
+    </div>
+
+    <!-- Save and back buttons -->
+    <div class="form-group fa-pull-right mt-3">
+      <button
+        id="listBtn"
+        type="button"
+        [routerLink]="['..']"
+        class="btn btn-outline-primary pull-right"
+      >
+        Back
+      </button>
+      <button
+        id="submit"
+        type="submit"
+        [disabled]="!form.form.valid"
+        class="btn btn-success ms-3"
+      >
+        <i class="fa fa-floppy-disk me-2"></i>
+        Edit
+      </button>
+    </div>
+  </fieldset>
+</form>
diff --git a/src/app/pet/cat/cat-edit/cat-edit.component.ts b/src/app/pet/cat/cat-edit/cat-edit.component.ts
new file mode 100644
index 0000000..3d73822
--- /dev/null
+++ b/src/app/pet/cat/cat-edit/cat-edit.component.ts
@@ -0,0 +1,139 @@
+import { Component, OnInit } from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
+import { Router } from '@angular/router';
+import { Cat } from '../cat';
+import { CatService } from '../cat.service';
+import { AbstractControl, FormControl, FormGroup, ValidationErrors, ValidatorFn, Validators } from '@angular/forms';
+
+@Component({
+  selector: 'app-cat-edit',
+  templateUrl: './cat-edit.component.html'
+})
+export class CatEditComponent implements OnInit {
+  public cat: Cat = new Cat();
+  public catForm: FormGroup;
+
+  constructor(private route: ActivatedRoute,
+              private router: Router,
+              private catService: CatService) {
+  }
+
+  ngOnInit(): void {
+    const id = this.route.snapshot.paramMap.get('id');
+    this.catService.getResource(id).subscribe(
+      (cat: Cat) => this.cat = cat );
+      this.catForm = new FormGroup({
+        chip: new FormControl(this.cat.chip, [
+          Validators.required,
+        ]),
+        name: new FormControl(this.cat.name, [
+          Validators.required,
+        ]),
+        dateOfBirth: new FormControl(this.cat.dateOfBirth, [
+          Validators.required,
+          this.dateValidator(),
+        ]),
+        colour: new FormControl(this.cat.colour, [
+          Validators.required,
+          this.colourValidator(),
+        ]),
+        size: new FormControl(this.cat.size, [
+          Validators.required,
+          this.numberValidator(),
+        ]),
+        sex: new FormControl(this.cat.sex, [
+          Validators.required,
+          this.sexValidator(),
+        ]),
+        race: new FormControl(this.cat.race, [
+          Validators.required,
+        ]),
+        dangerous: new FormControl(this.cat.dangerous, []),
+        meowingLevel: new FormControl(this.cat.meowingLevel, [
+          Validators.required,
+        ]),
+      });
+  }
+
+  
+  dateValidator(): ValidatorFn {
+    return (control: AbstractControl): ValidationErrors | null => {
+      const dateValue = control.value;
+      const isValidDate = !isNaN(Date.parse(dateValue));
+      return isValidDate ? null : { invalidDate: { value: control.value } };
+    };
+  }
+
+  colourValidator(): ValidatorFn {
+    const hexColorRe: RegExp = /^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/;
+    return (control: AbstractControl): ValidationErrors | null => {
+      const isValidColour = hexColorRe.test(control.value);
+      return isValidColour ? null : { invalidColour: { value: control.value } };
+    };
+  }
+
+  numberValidator(): ValidatorFn {
+    return (control: AbstractControl): ValidationErrors | null => {
+      const numberValue = control.value;
+      const isValidNumber = !isNaN(numberValue) && numberValue > 0;
+      return isValidNumber ? null : { invalidNumber: { value: control.value } };
+    };
+  }
+
+  sexValidator(): ValidatorFn {
+    const validSexes = ['male', 'female'];
+    return (control: AbstractControl): ValidationErrors | null => {
+      const isValidSex = control.value !== null && control.value !== undefined && validSexes.includes(control.value.toLowerCase());
+      return isValidSex ? null : { invalidSex: { value: control.value } };
+    };
+  }
+
+  get chip() {
+    return this.catForm.get('chip');
+  }
+
+  get name() {
+    return this.catForm.get('name');
+  }
+
+  get dateOfBirth() {
+    return this.catForm.get('dateOfBirth');
+  }
+
+  get adopted() {
+    return this.catForm.get('adopted');
+  }
+
+  get colour() {
+    return this.catForm.get('colour');
+  }
+
+  get size() {
+    return this.catForm.get('size');
+  }
+
+  get sex() {
+    return this.catForm.get('sex');
+  }
+
+  get race() {
+    return this.catForm.get('race');
+  }
+
+  get dangerous() {
+    return this.catForm.get('dangerous');
+  }
+
+  get meowingLevel() {
+    return this.catForm.get('meowingLevel');
+  }
+
+
+  onSubmit(): void {
+    this.catService.patchResource(this.cat).subscribe(
+      (patchedCat: Cat) => {
+          this.router.navigate(['cats', patchedCat.id]);
+      });
+  }
+
+}
diff --git a/src/app/pet/cat/cat-list/cat-list.component.html b/src/app/pet/cat/cat-list/cat-list.component.html
new file mode 100644
index 0000000..aa39cb8
--- /dev/null
+++ b/src/app/pet/cat/cat-list/cat-list.component.html
@@ -0,0 +1,57 @@
+<div class="w-full d-flex" style="font-size: xx-large;">
+  <i class="fa fa-heart me-3"></i>
+  <p class="mt-2">Cats</p>
+</div>
+<div class="d-flex w-full justify-content-end mb-3">
+  <app-cat-search (emitResults)="detail($event)"></app-cat-search>
+  <button
+        id="createCat"
+        type="button"
+        [routerLink]="['/cats/create']"
+        class="btn btn-success ms-3"
+      >
+        <i class="fa fa-plus-circle me-2"></i>
+        Create
+  </button>
+</div>
+<div class="card mb-1" *ngFor="let cat of cats">
+    <div class="card-block row m-1 col-12">
+      <div class="card-body row align-items-center">
+        <div class="col-3 mt-1">
+          <h6 class="card-subtitle text-muted">Chip</h6>
+          <p class="card-text">{{cat.chip}}</p>
+        </div>
+        <div class="col-3 mt-1">
+          <h6 class="card-subtitle text-muted">Name</h6>
+          <p class="card-text">{{cat.name}}</p>
+        </div>
+        <div class="col-3 mt-1">
+          <h6 class="card-subtitle text-muted">Date of birth</h6>
+          <p class="card-text">{{cat.dateOfBirth}}</p>
+        </div>
+        <div class="col-3 mt-1 d-flex justify-content-end">
+          <button
+            id="seeCat"
+            type="button"
+            [routerLink]="['/cats', cat.id]"
+            class="btn btn-primary ms-3"
+          >
+            <i class="fa fa-eye"></i>
+          </button>
+          <button
+            id="seeCat"
+            type="button"
+            [routerLink]="['/cats/' + cat.id + '/edit']"
+            class="btn btn-secondary ms-3"
+          >
+            <i class="fa fa-pencil"></i>
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+  
+  <ngb-pagination class="d-flex justify-content-center"
+                  [(page)]="page" [pageSize]="pageSize" [collectionSize]="totalCats"
+                  (pageChange)="changePage()"></ngb-pagination>
+  
\ No newline at end of file
diff --git a/src/app/pet/cat/cat-list/cat-list.component.ts b/src/app/pet/cat/cat-list/cat-list.component.ts
new file mode 100644
index 0000000..53fb9ed
--- /dev/null
+++ b/src/app/pet/cat/cat-list/cat-list.component.ts
@@ -0,0 +1,49 @@
+import {Component, OnInit} from '@angular/core';
+import {Cat} from "../cat";
+import {Router} from "@angular/router";
+import {CatService} from "../cat.service";
+import {PagedResourceCollection} from "@lagoshny/ngx-hateoas-client";
+
+@Component({
+  selector: 'app-cat-list',
+  templateUrl: './cat-list.component.html',
+})
+export class CatListComponent implements OnInit {
+  public cats: Cat[] = [];
+  public pageSize = 5;
+  public page = 1;
+  public totalCats = 0;
+
+  constructor(
+    public router: Router,
+    private catService: CatService,
+  ) {}
+
+  ngOnInit(): void {
+    this.catService
+      .getPage({
+        pageParams: { size: this.pageSize },
+        sort: { name: 'ASC' },
+      })
+      .subscribe((page: PagedResourceCollection<Cat>) => {
+        this.cats = page.resources;
+        this.totalCats = page.totalElements;
+      });
+  }
+
+  changePage(): void {
+    this.catService
+      .getPage({
+        pageParams: { page: this.page - 1, size: this.pageSize },
+        sort: { name: 'ASC' },
+      })
+      .subscribe(
+        (page: PagedResourceCollection<Cat>) => (this.cats = page.resources)
+      );
+  }
+
+  detail(cat: Cat): void {
+    this.router.navigate(['/cats', cat.id]);
+  }
+
+}
diff --git a/src/app/pet/cat/cat-search/cat-search.component.html b/src/app/pet/cat/cat-search/cat-search.component.html
new file mode 100644
index 0000000..ac312ae
--- /dev/null
+++ b/src/app/pet/cat/cat-search/cat-search.component.html
@@ -0,0 +1,12 @@
+<div class="col form-group">
+    <input id="typeahead-http" type="text" class="form-control" [resultTemplate]="rt"
+           [class.is-invalid]="searchFailed" [ngbTypeahead]="autocomplete" placeholder="Search cats"
+           [class.loading]="searching" (selectItem)="select($event.item)"/>
+    <div class="invalid-feedback" *ngIf="searchFailed">Sorry, suggestions could not be loaded.</div>
+  </div>
+  
+  <ng-template #rt let-r="result" let-t="term">
+    <div class="row"><ngb-highlight [result]="r.id" [term]="t"></ngb-highlight></div>
+    <div class="row"><small>{{r.name}} - {{r.chip}}</small></div>
+  </ng-template>
+  
\ No newline at end of file
diff --git a/src/app/pet/cat/cat-search/cat-search.component.ts b/src/app/pet/cat/cat-search/cat-search.component.ts
new file mode 100644
index 0000000..b4cff73
--- /dev/null
+++ b/src/app/pet/cat/cat-search/cat-search.component.ts
@@ -0,0 +1,42 @@
+import { Component, EventEmitter, Output } from '@angular/core';
+import { Observable, of, OperatorFunction } from 'rxjs';
+import { catchError, debounceTime, distinctUntilChanged, map, switchMap, tap } from 'rxjs/operators';
+import { ResourceCollection } from '@lagoshny/ngx-hateoas-client';
+import { Cat } from '../cat';
+import { CatService } from '../cat.service';
+
+@Component({
+  selector: 'app-cat-search',
+  templateUrl: './cat-search.component.html'
+})
+
+export class CatSearchComponent {
+  @Output() emitResults: EventEmitter<Cat> = new EventEmitter();
+  searchFailed = false;
+  searching = false;
+
+  constructor(private catService: CatService) {
+  }
+
+  autocomplete: OperatorFunction<string, readonly Cat[]> = (text$: Observable<string>) =>
+    text$.pipe(
+      debounceTime(500),
+      distinctUntilChanged(),
+      tap(() => this.searching = true),
+      switchMap(term => term.length < 3 ? of([]) :
+        this.catService.findByIdContaining(term).pipe(
+          map((collection: ResourceCollection<Cat>) => collection.resources),
+          tap(() => this.searchFailed = false),
+          catchError(() => {
+            this.searchFailed = true;
+            return of([]);
+          })
+        )
+      ),
+      tap(() => this.searching = false )
+    )
+
+  select(item: any): void {
+    this.emitResults.emit(item as Cat);
+  }
+}
diff --git a/src/app/pet/cat/cat.service.ts b/src/app/pet/cat/cat.service.ts
new file mode 100644
index 0000000..e920968
--- /dev/null
+++ b/src/app/pet/cat/cat.service.ts
@@ -0,0 +1,28 @@
+import { Injectable } from "@angular/core";
+import { PetService } from "../pet.service";
+import { Cat } from "./cat";
+import { ResourceCollection } from "@lagoshny/ngx-hateoas-client";
+import { Observable, forkJoin, map, merge, reduce } from "rxjs";
+
+@Injectable({providedIn: 'root'})
+export class CatService extends PetService<Cat> {
+
+    constructor() {
+        super(Cat);
+    }
+
+    public findByIdContaining(query: string): Observable<ResourceCollection<Cat>> {
+        let res1 = this.searchCollection('findByName', { params: { name: query } });
+        let res2 = this.searchCollection('findByChip', { params: { chip: query } });
+        return forkJoin([res1, res2]).pipe(
+            map(([result1, result2]) => {
+                const combinedResources = [...result1.resources, ...result2.resources];
+                return {
+                  ...result1,
+                  resources: combinedResources,
+                } as ResourceCollection<Cat>;
+              })
+        );;
+    }
+
+}
\ No newline at end of file
diff --git a/src/app/pet/cat/cat.ts b/src/app/pet/cat/cat.ts
new file mode 100644
index 0000000..d0f3ed7
--- /dev/null
+++ b/src/app/pet/cat/cat.ts
@@ -0,0 +1,9 @@
+import { HateoasResource } from "@lagoshny/ngx-hateoas-client";
+import { Pet } from '../pet';
+
+@HateoasResource('cats')
+export class Cat extends Pet {
+
+    meowingLevel: number;
+
+}
\ No newline at end of file
diff --git a/src/app/pet/dog/dog-create/dog-create.component.css b/src/app/pet/dog/dog-create/dog-create.component.css
new file mode 100644
index 0000000..72f16bc
--- /dev/null
+++ b/src/app/pet/dog/dog-create/dog-create.component.css
@@ -0,0 +1,4 @@
+.form-error {
+    color: red;
+    font-size: x-small;
+}
\ No newline at end of file
diff --git a/src/app/pet/dog/dog-create/dog-create.component.html b/src/app/pet/dog/dog-create/dog-create.component.html
new file mode 100644
index 0000000..1d290a6
--- /dev/null
+++ b/src/app/pet/dog/dog-create/dog-create.component.html
@@ -0,0 +1,198 @@
+<form
+  id="dog-form"
+  (ngSubmit)="onSubmit()"
+  #form="ngForm"
+  [formGroup]="dogForm"
+>
+  <fieldset>
+    <div class="row">
+      <div class="form-group mb-3 col-6">
+        <label class="control-label required-label" for="name">Name</label>
+          <input
+            id="name"
+            name="name"
+            formControlName="name"
+            type="text"
+            class="form-control"
+            [(ngModel)]="dog.name"
+          />
+        <div class="form-error" *ngIf="name.errors?.['required']">
+          Name is required
+        </div>
+      </div>
+
+      <div class="form-group mb-3 col-6">
+        <label class="control-label required-label" for="chip">Chip</label>
+          <input
+            id="chip"
+            name="chip"
+            formControlName="chip"
+            type="text"
+            class="form-control"
+            [(ngModel)]="dog.chip"
+          />
+        <div class="form-error" *ngIf="chip.errors?.['required']">
+          Chip is required
+        </div>
+      </div>
+
+      <div class="form-group mb-3 col-6">
+        <label class="control-label required-label" for="dateOfBirth">Date of birth</label>
+          <input
+            id="dateOfBirth"
+            name="dateOfBirth"
+            formControlName="dateOfBirth"
+            type="date"
+            class="form-control"
+            [(ngModel)]="dog.dateOfBirth"
+          />
+        <div class="form-error" *ngIf="dateOfBirth.errors?.['required']">
+          Date of birth is required
+        </div>
+        <div
+          class="form-error"
+          *ngIf="dateOfBirth.errors?.['invalidDate'] && !dateOfBirth.errors?.['required']"
+        >
+          Invalid date
+        </div>
+      </div>
+
+      <div class="form-group mb-3 col-6">
+        <label class="control-label required-label" for="colour">Colour</label>
+          <input
+            id="colour"
+            name="colour"
+            formControlName="colour"
+            type="color"
+            class="form-control"
+            [(ngModel)]="dog.colour"
+          />
+        <div class="form-error" *ngIf="colour.errors?.['required']">
+          Colour is required
+        </div>
+        <div
+          class="form-error"
+          *ngIf="colour.errors?.['invalidColour'] && !colour.errors?.['required']"
+        >
+          Invalid date
+        </div>
+      </div>
+
+      <div class="form-group mb-3 col-6">
+        <label class="control-label required-label" for="size">Size</label>
+          <select
+            id="size"
+            name="size"
+            formControlName="size"
+            class="form-control"
+            [(ngModel)]="dog.size"
+          >
+          <option value="1">Small</option>
+          <option value="2">Average</option>
+          <option value="3">Large</option>
+          <option value="4">Extra Large</option>
+        </select>
+        <div class="form-error" *ngIf="size.errors?.['required']">
+          Size is required
+        </div>
+        <div
+          class="form-error"
+          *ngIf="size.errors?.['invalidNumber'] && !size.errors?.['required']"
+        >
+          Size is invalid
+        </div>
+      </div>
+
+      <div class="form-group mb-3 col-6">
+        <label class="control-label required-label" for="sex">Sex</label>
+          <select
+            id="sex"
+            name="sex"
+            formControlName="sex"
+            class="form-control"
+            [(ngModel)]="dog.sex"
+          >
+          <option value="male">Male</option>
+          <option value="female">Female</option>
+        </select>
+        <div class="form-error" *ngIf="sex.errors?.['required']">
+          Sex is required
+        </div>
+        <div
+          class="form-error"
+          *ngIf="sex.errors?.['invalidSex'] && !sex.errors?.['required']"
+        >
+          Sex is invalid
+        </div>
+      </div>
+
+      <div class="form-group mb-3 col-6">
+        <label class="control-label required-label" for="name">Race</label>
+          <input
+            id="race"
+            name="race"
+            formControlName="race"
+            type="text"
+            class="form-control"
+            [(ngModel)]="dog.race"
+          />
+        <div class="form-error" *ngIf="race.errors?.['required']">
+          Race is required
+        </div>
+      </div>
+
+      <div class="form-group mb-3 col-6">
+        <label class="control-label required-label" for="dangerous">Dangerous</label>
+          <input
+            id="dangerous"
+            name="dangerous"
+            formControlName="dangerous"
+            type="checkbox"
+            clasS="ms-3"
+            [(ngModel)]="dog.dangerous"
+          />
+      </div>
+
+      <div class="form-group mb-3 col-6">
+        <label class="control-label required-label" for="barkingLevel">Barking Level</label>
+        <select
+          id="barkingLevel"
+          name="barkingLevel"
+          formControlName="barkingLevel"
+          class="form-control"
+          [(ngModel)]="dog.barkingLevel"
+        >
+          <option value="1">No barking</option>
+          <option value="2">Low barking</option>
+          <option value="3">Average barking</option>
+          <option value="4">Loud barking</option>
+        </select>
+        <div class="form-error" *ngIf="barkingLevel.errors?.['required']">
+          Barking level is required
+        </div>
+      </div>
+
+    </div>
+
+    <!-- Save and back buttons -->
+    <div class="form-group fa-pull-right mt-3">
+      <button
+        id="listBtn"
+        type="button"
+        [routerLink]="['/dogs']"
+        class="btn btn-outline-primary pull-right"
+      >
+        Back
+      </button>
+      <button
+        id="submit"
+        type="submit"
+        [disabled]="!form.form.valid"
+        class="btn btn-success ms-3"
+      >
+        <i class="fa fa-plus-circle me-2"></i>
+        Create
+      </button>
+    </div>
+  </fieldset>
+</form>
diff --git a/src/app/pet/dog/dog-create/dog-create.component.ts b/src/app/pet/dog/dog-create/dog-create.component.ts
new file mode 100644
index 0000000..a6fdbf0
--- /dev/null
+++ b/src/app/pet/dog/dog-create/dog-create.component.ts
@@ -0,0 +1,156 @@
+import {Component, OnInit} from '@angular/core';
+import {Router} from "@angular/router";
+import {DogService} from "../dog.service";
+import {Dog} from "../dog";
+import {AbstractControl, FormControl, FormGroup, ValidationErrors, ValidatorFn, Validators} from "@angular/forms";
+import {PagedResourceCollection} from "@lagoshny/ngx-hateoas-client";
+
+@Component({
+  selector: 'app-dog-create',
+  templateUrl: './dog-create.component.html',
+  styleUrls: ['./dog-create.component.css']
+})
+export class DogCreateComponent implements OnInit{
+
+  closeResult = '';
+  public isModalSaved: boolean = false;
+  public dogs: Dog[] = [];
+  public dog: Dog;
+  public dogForm: FormGroup;
+
+  constructor(
+    private router: Router,
+    private dogService: DogService,
+  ) {}
+
+  ngOnInit(): void {
+    this.dog = new Dog();
+    this.dogForm = new FormGroup({
+      chip: new FormControl(this.dog.chip, [
+        Validators.required,
+      ]),
+      name: new FormControl(this.dog.name, [
+        Validators.required,
+      ]),
+      dateOfBirth: new FormControl(this.dog.dateOfBirth, [
+        Validators.required,
+        this.dateValidator(),
+      ]),
+      colour: new FormControl(this.dog.colour, [
+        Validators.required,
+        this.colourValidator(),
+      ]),
+      size: new FormControl(this.dog.size, [
+        Validators.required,
+        this.numberValidator(),
+      ]),
+      sex: new FormControl(this.dog.sex, [
+        Validators.required,
+        this.sexValidator(),
+      ]),
+      race: new FormControl(this.dog.race, [
+        Validators.required,
+      ]),
+      dangerous: new FormControl(this.dog.dangerous, []),
+      barkingLevel: new FormControl(this.dog.barkingLevel, [
+        Validators.required,
+      ]),
+    });
+    this.loadDogList();
+  }
+
+  loadDogList() {
+    this.dogService
+      .getPage({
+        sort: { name: 'ASC' },
+      })
+      .subscribe((dogs: PagedResourceCollection<Dog>) => {
+        this.dogs = dogs.resources.sort((a, b) =>
+          a.chip.localeCompare(b.chip)
+        );
+      });
+  }
+
+  dateValidator(): ValidatorFn {
+    return (control: AbstractControl): ValidationErrors | null => {
+      const dateValue = control.value;
+      const isValidDate = !isNaN(Date.parse(dateValue));
+      return isValidDate ? null : { invalidDate: { value: control.value } };
+    };
+  }
+
+  colourValidator(): ValidatorFn {
+    const hexColorRe: RegExp = /^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/;
+    return (control: AbstractControl): ValidationErrors | null => {
+      const isValidColour = hexColorRe.test(control.value);
+      return isValidColour ? null : { invalidColour: { value: control.value } };
+    };
+  }
+
+  numberValidator(): ValidatorFn {
+    return (control: AbstractControl): ValidationErrors | null => {
+      const numberValue = control.value;
+      const isValidNumber = !isNaN(numberValue) && numberValue > 0;
+      return isValidNumber ? null : { invalidNumber: { value: control.value } };
+    };
+  }
+
+  sexValidator(): ValidatorFn {
+    const validSexes = ['male', 'female'];
+    return (control: AbstractControl): ValidationErrors | null => {
+      const isValidSex = control.value !== null && control.value !== undefined && validSexes.includes(control.value.toLowerCase());
+      return isValidSex ? null : { invalidSex: { value: control.value } };
+    };
+  }
+
+  get chip() {
+    return this.dogForm.get('chip');
+  }
+
+  get name() {
+    return this.dogForm.get('name');
+  }
+
+  get dateOfBirth() {
+    return this.dogForm.get('dateOfBirth');
+  }
+
+  get adopted() {
+    return this.dogForm.get('adopted');
+  }
+
+  get colour() {
+    return this.dogForm.get('colour');
+  }
+
+  get size() {
+    return this.dogForm.get('size');
+  }
+
+  get sex() {
+    return this.dogForm.get('sex');
+  }
+
+  get race() {
+    return this.dogForm.get('race');
+  }
+
+  get dangerous() {
+    return this.dogForm.get('dangerous');
+  }
+
+  get barkingLevel() {
+    return this.dogForm.get('barkingLevel');
+  }
+
+  onSubmit(): void {
+    this.dog.adopted = false;
+    this.dogService
+      .createResource({ body: this.dog })
+      .subscribe((dog: Dog) => {
+        const uri = (dog as any).uri;
+        this.router.navigate([uri]).then();
+      });
+  }
+
+}
diff --git a/src/app/pet/dog/dog-delete/dog-delete.component.html b/src/app/pet/dog/dog-delete/dog-delete.component.html
new file mode 100644
index 0000000..ee8f0b6
--- /dev/null
+++ b/src/app/pet/dog/dog-delete/dog-delete.component.html
@@ -0,0 +1,16 @@
+<div class="panel panel-warning">
+    <div class="panel-heading">
+      <div class="panel-title">
+        <h1>Are you sure you want to delete this record?</h1>
+      </div>
+    </div>
+    <div class="panel-body">
+      <div class="text-center">
+        <button id="deleteBtn" type="button" (click)="delete()"
+                class="btn btn-outline-danger m-1">Delete</button>
+        <button id="listBtn" type="button" [routerLink]="['/dogs', dog.id]"
+                class="btn btn-outline-primary m-1">Cancel</button>
+      </div>
+    </div>
+  </div>
+  
\ No newline at end of file
diff --git a/src/app/pet/dog/dog-delete/dog-delete.component.ts b/src/app/pet/dog/dog-delete/dog-delete.component.ts
new file mode 100644
index 0000000..2417326
--- /dev/null
+++ b/src/app/pet/dog/dog-delete/dog-delete.component.ts
@@ -0,0 +1,31 @@
+import { Component, OnInit } from '@angular/core';
+import { ActivatedRoute, Router } from '@angular/router';
+import { Dog } from '../dog';
+import { DogService } from '../dog.service';
+
+@Component({
+  selector: 'app-dog-delete',
+  templateUrl: './dog-delete.component.html'
+})
+export class DogDeleteComponent implements OnInit {
+  public dog: Dog = new Dog();
+  private id: string;
+
+  constructor(private route: ActivatedRoute,
+              private router: Router,
+              private dogService: DogService) {
+  }
+
+  ngOnInit(): void {
+    this.id = this.route.snapshot.paramMap.get('id');
+    this.dogService.getResource(this.id).subscribe(
+      dog => this.dog = dog);
+  }
+
+  delete(): void {
+    this.dogService.deleteResource(this.dog).subscribe(
+      () => {
+        this.router.navigate(['dogs']);
+      });
+  }
+}
diff --git a/src/app/pet/dog/dog-detail/dog-detail.component.html b/src/app/pet/dog/dog-detail/dog-detail.component.html
new file mode 100644
index 0000000..393202d
--- /dev/null
+++ b/src/app/pet/dog/dog-detail/dog-detail.component.html
@@ -0,0 +1,63 @@
+<div class="card mb-4">
+    <div class="card-block">
+      <h1 class="card-title col-md-12 px-4 pt-3 text-xxl">{{dog.name}}</h1>
+      <div class="card-body row m-1">
+        <div class="col-md-4 mb-5">
+          <h6 class="card-subtitle text-muted">Chip</h6>
+          <p class="card-text">{{dog.chip}}</p>
+        </div>
+        <div class="col-md-4 mb-5">
+            <h6 class="card-subtitle text-muted">Date of birth</h6>
+            <p class="card-text">{{dog.dateOfBirth}}</p>
+        </div>
+        <div class="col-md-4 mb-5">
+            <h6 class="card-subtitle text-muted">Colour</h6>
+            <div style="width: 100%; height: 24px; background-color: {{dog.colour}}; border: 1px solid;"></div>
+        </div>
+        <div class="col-md-4 mb-5">
+            <h6 class="card-subtitle text-muted">Size</h6>
+            <p class="card-text" *ngIf="dog.size === 1">Small</p>
+            <p class="card-text" *ngIf="dog.size === 2">Average</p>
+            <p class="card-text" *ngIf="dog.size === 3">Large</p>
+            <p class="card-text" *ngIf="dog.size === 4">Extra Large</p>
+        </div>
+        <div class="col-md-4 mb-5">
+            <h6 class="card-subtitle text-muted">Sex</h6>
+            <p class="card-text" *ngIf="dog.sex === 'male'">Male</p>
+            <p class="card-text" *ngIf="dog.sex === 'female'">Female</p>
+        </div>
+        <div class="col-md-4 mb-5">
+            <h6 class="card-subtitle text-muted">Race</h6>
+            <p class="card-text">{{dog.race}}</p>
+        </div>
+        <div class="col-md-4">
+            <h6 class="card-subtitle text-muted">Dangerous</h6>
+            <i class="fa fa-check text-success" *ngIf="dog.dangerous === true"></i>
+            <i class="fa fa-xmark text-danger" *ngIf="dog.dangerous === false"></i>
+        </div>
+        <div class="col-md-4">
+            <h6 class="card-subtitle text-muted">Adopted</h6>
+            <i class="fa fa-check text-success" *ngIf="dog.adopted === true"></i>
+            <i class="fa fa-xmark text-danger" *ngIf="dog.adopted === false"></i>
+        </div>
+        <div class="col-md-4">
+            <h6 class="card-subtitle text-muted">Barking level</h6>
+            <p class="card-text" *ngIf="dog.barkingLevel === 1">No barking</p>
+            <p class="card-text" *ngIf="dog.barkingLevel === 2">Low barking</p>
+            <p class="card-text" *ngIf="dog.barkingLevel === 3">Average barking</p>
+            <p class="card-text" *ngIf="dog.barkingLevel === 4">Loud barking</p>
+        </div>
+      </div>
+      <div class="card-footer text-right">
+        <button id="listBtn" type="button" [routerLink]="['/dogs']"
+                class="btn m-1 btn-outline-primary">Dog List
+        </button>
+        <button id="editBtn" type="button" [routerLink]="['edit']"
+                class="btn m-1 btn-outline-success">Edit
+        </button>
+        <button id="deleteBtn" type="button" [routerLink]="['delete']"
+                class="btn m-1 btn-outline-danger">Delete
+        </button>
+      </div>
+    </div>
+  </div>
\ No newline at end of file
diff --git a/src/app/pet/dog/dog-detail/dog-detail.component.ts b/src/app/pet/dog/dog-detail/dog-detail.component.ts
new file mode 100644
index 0000000..6e0bb88
--- /dev/null
+++ b/src/app/pet/dog/dog-detail/dog-detail.component.ts
@@ -0,0 +1,25 @@
+import { Component, OnInit } from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
+import { DogService } from '../dog.service';
+import { Dog } from '../dog';
+
+@Component({
+  selector: 'app-dog-detail',
+  templateUrl: './dog-detail.component.html'
+})
+export class DogDetailComponent implements OnInit {
+  public dog: Dog = new Dog();
+
+  constructor(private route: ActivatedRoute,
+              private dogService: DogService) {
+  }
+
+  ngOnInit(): void {
+    const id = this.route.snapshot.paramMap.get('id');
+    this.dogService.getResource(id).subscribe(
+      dog => {
+        this.dog = dog;
+      });
+  }
+
+}
diff --git a/src/app/pet/dog/dog-edit/dog-edit.component.html b/src/app/pet/dog/dog-edit/dog-edit.component.html
new file mode 100644
index 0000000..7472239
--- /dev/null
+++ b/src/app/pet/dog/dog-edit/dog-edit.component.html
@@ -0,0 +1,198 @@
+<form
+  id="dog-form"
+  (ngSubmit)="onSubmit()"
+  #form="ngForm"
+  [formGroup]="dogForm"
+>
+  <fieldset>
+    <div class="row">
+      <div class="form-group mb-3 col-6">
+        <label class="control-label required-label" for="name">Name</label>
+          <input
+            id="name"
+            name="name"
+            formControlName="name"
+            type="text"
+            class="form-control"
+            [(ngModel)]="dog.name"
+          />
+        <div class="form-error" *ngIf="name.errors?.['required']">
+          Name is required
+        </div>
+      </div>
+
+      <div class="form-group mb-3 col-6">
+        <label class="control-label required-label" for="chip">Chip</label>
+          <input
+            id="chip"
+            name="chip"
+            formControlName="chip"
+            type="text"
+            class="form-control"
+            [(ngModel)]="dog.chip"
+          />
+        <div class="form-error" *ngIf="chip.errors?.['required']">
+          Chip is required
+        </div>
+      </div>
+
+      <div class="form-group mb-3 col-6">
+        <label class="control-label required-label" for="dateOfBirth">Date of birth</label>
+          <input
+            id="dateOfBirth"
+            name="dateOfBirth"
+            formControlName="dateOfBirth"
+            type="date"
+            class="form-control"
+            [(ngModel)]="dog.dateOfBirth"
+          />
+        <div class="form-error" *ngIf="dateOfBirth.errors?.['required']">
+          Date of birth is required
+        </div>
+        <div
+          class="form-error"
+          *ngIf="dateOfBirth.errors?.['invalidDate'] && !dateOfBirth.errors?.['required']"
+        >
+          Invalid date
+        </div>
+      </div>
+
+      <div class="form-group mb-3 col-6">
+        <label class="control-label required-label" for="colour">Colour</label>
+          <input
+            id="colour"
+            name="colour"
+            formControlName="colour"
+            type="color"
+            class="form-control"
+            [(ngModel)]="dog.colour"
+          />
+        <div class="form-error" *ngIf="colour.errors?.['required']">
+          Colour is required
+        </div>
+        <div
+          class="form-error"
+          *ngIf="colour.errors?.['invalidColour'] && !colour.errors?.['required']"
+        >
+          Invalid date
+        </div>
+      </div>
+
+      <div class="form-group mb-3 col-6">
+        <label class="control-label required-label" for="size">Size</label>
+          <select
+            id="size"
+            name="size"
+            formControlName="size"
+            class="form-control"
+            [(ngModel)]="dog.size"
+          >
+          <option value="1">Small</option>
+          <option value="2">Average</option>
+          <option value="3">Large</option>
+          <option value="4">Extra Large</option>
+        </select>
+        <div class="form-error" *ngIf="size.errors?.['required']">
+          Size is required
+        </div>
+        <div
+          class="form-error"
+          *ngIf="size.errors?.['invalidNumber'] && !size.errors?.['required']"
+        >
+          Size is invalid
+        </div>
+      </div>
+
+      <div class="form-group mb-3 col-6">
+        <label class="control-label required-label" for="sex">Sex</label>
+          <select
+            id="sex"
+            name="sex"
+            formControlName="sex"
+            class="form-control"
+            [(ngModel)]="dog.sex"
+          >
+          <option value="male">Male</option>
+          <option value="female">Female</option>
+        </select>
+        <div class="form-error" *ngIf="sex.errors?.['required']">
+          Sex is required
+        </div>
+        <div
+          class="form-error"
+          *ngIf="sex.errors?.['invalidSex'] && !sex.errors?.['required']"
+        >
+          Sex is invalid
+        </div>
+      </div>
+
+      <div class="form-group mb-3 col-6">
+        <label class="control-label required-label" for="name">Race</label>
+          <input
+            id="race"
+            name="race"
+            formControlName="race"
+            type="text"
+            class="form-control"
+            [(ngModel)]="dog.race"
+          />
+        <div class="form-error" *ngIf="race.errors?.['required']">
+          Race is required
+        </div>
+      </div>
+
+      <div class="form-group mb-3 col-6">
+        <label class="control-label required-label" for="dangerous">Dangerous</label>
+          <input
+            id="dangerous"
+            name="dangerous"
+            formControlName="dangerous"
+            type="checkbox"
+            clasS="ms-3"
+            [(ngModel)]="dog.dangerous"
+          />
+      </div>
+
+      <div class="form-group mb-3 col-6">
+        <label class="control-label required-label" for="barkingLevel">Barking Level</label>
+        <select
+          id="barkingLevel"
+          name="barkingLevel"
+          formControlName="barkingLevel"
+          class="form-control"
+          [(ngModel)]="dog.barkingLevel"
+        >
+          <option value="1">No barking</option>
+          <option value="2">Low barking</option>
+          <option value="3">Average barking</option>
+          <option value="4">Loud barking</option>
+        </select>
+        <div class="form-error" *ngIf="barkingLevel.errors?.['required']">
+          Barking level is required
+        </div>
+      </div>
+
+    </div>
+
+    <!-- Save and back buttons -->
+    <div class="form-group fa-pull-right mt-3">
+      <button
+        id="listBtn"
+        type="button"
+        [routerLink]="['..']"
+        class="btn btn-outline-primary pull-right"
+      >
+        Back
+      </button>
+      <button
+        id="submit"
+        type="submit"
+        [disabled]="!form.form.valid"
+        class="btn btn-success ms-3"
+      >
+        <i class="fa fa-floppy-disk me-2"></i>
+        Edit
+      </button>
+    </div>
+  </fieldset>
+</form>
diff --git a/src/app/pet/dog/dog-edit/dog-edit.component.ts b/src/app/pet/dog/dog-edit/dog-edit.component.ts
new file mode 100644
index 0000000..bec45db
--- /dev/null
+++ b/src/app/pet/dog/dog-edit/dog-edit.component.ts
@@ -0,0 +1,139 @@
+import { Component, OnInit } from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
+import { Router } from '@angular/router';
+import { Dog } from '../dog';
+import { DogService } from '../dog.service';
+import { AbstractControl, FormControl, FormGroup, ValidationErrors, ValidatorFn, Validators } from '@angular/forms';
+
+@Component({
+  selector: 'app-dog-edit',
+  templateUrl: './dog-edit.component.html'
+})
+export class DogEditComponent implements OnInit {
+  public dog: Dog = new Dog();
+  public dogForm: FormGroup;
+
+  constructor(private route: ActivatedRoute,
+              private router: Router,
+              private dogService: DogService) {
+  }
+
+  ngOnInit(): void {
+    const id = this.route.snapshot.paramMap.get('id');
+    this.dogService.getResource(id).subscribe(
+      (dog: Dog) => this.dog = dog );
+      this.dogForm = new FormGroup({
+        chip: new FormControl(this.dog.chip, [
+          Validators.required,
+        ]),
+        name: new FormControl(this.dog.name, [
+          Validators.required,
+        ]),
+        dateOfBirth: new FormControl(this.dog.dateOfBirth, [
+          Validators.required,
+          this.dateValidator(),
+        ]),
+        colour: new FormControl(this.dog.colour, [
+          Validators.required,
+          this.colourValidator(),
+        ]),
+        size: new FormControl(this.dog.size, [
+          Validators.required,
+          this.numberValidator(),
+        ]),
+        sex: new FormControl(this.dog.sex, [
+          Validators.required,
+          this.sexValidator(),
+        ]),
+        race: new FormControl(this.dog.race, [
+          Validators.required,
+        ]),
+        dangerous: new FormControl(this.dog.dangerous, []),
+        barkingLevel: new FormControl(this.dog.barkingLevel, [
+          Validators.required,
+        ]),
+      });
+  }
+
+  
+  dateValidator(): ValidatorFn {
+    return (control: AbstractControl): ValidationErrors | null => {
+      const dateValue = control.value;
+      const isValidDate = !isNaN(Date.parse(dateValue));
+      return isValidDate ? null : { invalidDate: { value: control.value } };
+    };
+  }
+
+  colourValidator(): ValidatorFn {
+    const hexColorRe: RegExp = /^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/;
+    return (control: AbstractControl): ValidationErrors | null => {
+      const isValidColour = hexColorRe.test(control.value);
+      return isValidColour ? null : { invalidColour: { value: control.value } };
+    };
+  }
+
+  numberValidator(): ValidatorFn {
+    return (control: AbstractControl): ValidationErrors | null => {
+      const numberValue = control.value;
+      const isValidNumber = !isNaN(numberValue) && numberValue > 0;
+      return isValidNumber ? null : { invalidNumber: { value: control.value } };
+    };
+  }
+
+  sexValidator(): ValidatorFn {
+    const validSexes = ['male', 'female'];
+    return (control: AbstractControl): ValidationErrors | null => {
+      const isValidSex = control.value !== null && control.value !== undefined && validSexes.includes(control.value.toLowerCase());
+      return isValidSex ? null : { invalidSex: { value: control.value } };
+    };
+  }
+
+  get chip() {
+    return this.dogForm.get('chip');
+  }
+
+  get name() {
+    return this.dogForm.get('name');
+  }
+
+  get dateOfBirth() {
+    return this.dogForm.get('dateOfBirth');
+  }
+
+  get adopted() {
+    return this.dogForm.get('adopted');
+  }
+
+  get colour() {
+    return this.dogForm.get('colour');
+  }
+
+  get size() {
+    return this.dogForm.get('size');
+  }
+
+  get sex() {
+    return this.dogForm.get('sex');
+  }
+
+  get race() {
+    return this.dogForm.get('race');
+  }
+
+  get dangerous() {
+    return this.dogForm.get('dangerous');
+  }
+
+  get barkingLevel() {
+    return this.dogForm.get('barkingLevel');
+  }
+
+
+  onSubmit(): void {
+    this.dogService.patchResource(this.dog).subscribe(
+      (patchedDog: Dog) => {
+          this.router.navigate(['dogs', patchedDog.id]);
+      });
+  }
+
+}
diff --git a/src/app/pet/dog/dog-list/dog-list.component.html b/src/app/pet/dog/dog-list/dog-list.component.html
new file mode 100644
index 0000000..717a80a
--- /dev/null
+++ b/src/app/pet/dog/dog-list/dog-list.component.html
@@ -0,0 +1,57 @@
+<div class="w-full d-flex" style="font-size: xx-large;">
+  <i class="fa fa-paw me-3"></i>
+  <p class="mt-2">Dogs</p>
+</div>
+<div class="d-flex w-full justify-content-end mb-3">
+  <app-dog-search (emitResults)="detail($event)"></app-dog-search>
+  <button
+        id="createDog"
+        type="button"
+        [routerLink]="['/dogs/create']"
+        class="btn btn-success ms-3"
+      >
+        <i class="fa fa-plus-circle me-2"></i>
+        Create
+  </button>
+</div>
+<div class="card mb-1" *ngFor="let dog of dogs">
+    <div class="card-block row m-1 col-12">
+      <div class="card-body row align-items-center">
+        <div class="col-3 mt-1">
+          <h6 class="card-subtitle text-muted">Chip</h6>
+          <p class="card-text">{{dog.chip}}</p>
+        </div>
+        <div class="col-3 mt-1">
+          <h6 class="card-subtitle text-muted">Name</h6>
+          <p class="card-text">{{dog.name}}</p>
+        </div>
+        <div class="col-3 mt-1">
+          <h6 class="card-subtitle text-muted">Date of birth</h6>
+          <p class="card-text">{{dog.dateOfBirth}}</p>
+        </div>
+        <div class="col-3 mt-1 d-flex justify-content-end">
+          <button
+            id="seeDog"
+            type="button"
+            [routerLink]="['/dogs', dog.id]"
+            class="btn btn-primary ms-3"
+          >
+            <i class="fa fa-eye"></i>
+          </button>
+          <button
+            id="seeDog"
+            type="button"
+            [routerLink]="['/dogs/' + dog.id + '/edit']"
+            class="btn btn-secondary ms-3"
+          >
+            <i class="fa fa-pencil"></i>
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+  
+  <ngb-pagination class="d-flex justify-content-center"
+                  [(page)]="page" [pageSize]="pageSize" [collectionSize]="totalDogs"
+                  (pageChange)="changePage()"></ngb-pagination>
+  
\ No newline at end of file
diff --git a/src/app/pet/dog/dog-list/dog-list.component.ts b/src/app/pet/dog/dog-list/dog-list.component.ts
new file mode 100644
index 0000000..d1edc63
--- /dev/null
+++ b/src/app/pet/dog/dog-list/dog-list.component.ts
@@ -0,0 +1,49 @@
+import {Component, OnInit} from '@angular/core';
+import {Dog} from "../dog";
+import {Router} from "@angular/router";
+import {DogService} from "../dog.service";
+import {PagedResourceCollection} from "@lagoshny/ngx-hateoas-client";
+
+@Component({
+  selector: 'app-dog-list',
+  templateUrl: './dog-list.component.html',
+})
+export class DogListComponent implements OnInit {
+  public dogs: Dog[] = [];
+  public pageSize = 5;
+  public page = 1;
+  public totalDogs = 0;
+
+  constructor(
+    public router: Router,
+    private dogService: DogService,
+  ) {}
+
+  ngOnInit(): void {
+    this.dogService
+      .getPage({
+        pageParams: { size: this.pageSize },
+        sort: { name: 'ASC' },
+      })
+      .subscribe((page: PagedResourceCollection<Dog>) => {
+        this.dogs = page.resources;
+        this.totalDogs = page.totalElements;
+      });
+  }
+
+  changePage(): void {
+    this.dogService
+      .getPage({
+        pageParams: { page: this.page - 1, size: this.pageSize },
+        sort: { name: 'ASC' },
+      })
+      .subscribe(
+        (page: PagedResourceCollection<Dog>) => (this.dogs = page.resources)
+      );
+  }
+
+  detail(dog: Dog): void {
+    this.router.navigate(['/dogs', dog.id]);
+  }
+
+}
diff --git a/src/app/pet/dog/dog-search/dog-search.component.html b/src/app/pet/dog/dog-search/dog-search.component.html
new file mode 100644
index 0000000..910bb08
--- /dev/null
+++ b/src/app/pet/dog/dog-search/dog-search.component.html
@@ -0,0 +1,12 @@
+<div class="col form-group">
+    <input id="typeahead-http" type="text" class="form-control" [resultTemplate]="rt"
+           [class.is-invalid]="searchFailed" [ngbTypeahead]="autocomplete" placeholder="Search dogs"
+           [class.loading]="searching" (selectItem)="select($event.item)"/>
+    <div class="invalid-feedback" *ngIf="searchFailed">Sorry, suggestions could not be loaded.</div>
+  </div>
+  
+  <ng-template #rt let-r="result" let-t="term">
+    <div class="row"><ngb-highlight [result]="r.id" [term]="t"></ngb-highlight></div>
+    <div class="row"><small>{{r.name}} - {{r.chip}}</small></div>
+  </ng-template>
+  
\ No newline at end of file
diff --git a/src/app/pet/dog/dog-search/dog-search.component.ts b/src/app/pet/dog/dog-search/dog-search.component.ts
new file mode 100644
index 0000000..3774ca8
--- /dev/null
+++ b/src/app/pet/dog/dog-search/dog-search.component.ts
@@ -0,0 +1,42 @@
+import { Component, EventEmitter, Output } from '@angular/core';
+import { Observable, of, OperatorFunction } from 'rxjs';
+import { catchError, debounceTime, distinctUntilChanged, map, switchMap, tap } from 'rxjs/operators';
+import { ResourceCollection } from '@lagoshny/ngx-hateoas-client';
+import { Dog } from '../dog';
+import { DogService } from '../dog.service';
+
+@Component({
+  selector: 'app-dog-search',
+  templateUrl: './dog-search.component.html'
+})
+
+export class DogSearchComponent {
+  @Output() emitResults: EventEmitter<Dog> = new EventEmitter();
+  searchFailed = false;
+  searching = false;
+
+  constructor(private dogService: DogService) {
+  }
+
+  autocomplete: OperatorFunction<string, readonly Dog[]> = (text$: Observable<string>) =>
+    text$.pipe(
+      debounceTime(500),
+      distinctUntilChanged(),
+      tap(() => this.searching = true),
+      switchMap(term => term.length < 3 ? of([]) :
+        this.dogService.findByIdContaining(term).pipe(
+          map((collection: ResourceCollection<Dog>) => collection.resources),
+          tap(() => this.searchFailed = false),
+          catchError(() => {
+            this.searchFailed = true;
+            return of([]);
+          })
+        )
+      ),
+      tap(() => this.searching = false )
+    )
+
+  select(item: any): void {
+    this.emitResults.emit(item as Dog);
+  }
+}
diff --git a/src/app/pet/dog/dog.service.ts b/src/app/pet/dog/dog.service.ts
new file mode 100644
index 0000000..fbafecd
--- /dev/null
+++ b/src/app/pet/dog/dog.service.ts
@@ -0,0 +1,28 @@
+import { Injectable } from "@angular/core";
+import { PetService } from "../pet.service";
+import { Dog } from "./dog";
+import { Observable, forkJoin, map } from "rxjs";
+import { ResourceCollection } from "@lagoshny/ngx-hateoas-client";
+
+@Injectable({providedIn: 'root'})
+export class DogService extends PetService<Dog> {
+
+    constructor() {
+        super(Dog);
+    }
+
+    public findByIdContaining(query: string): Observable<ResourceCollection<Dog>> {
+        let res1 = this.searchCollection('findByName', { params: { name: query } });
+        let res2 = this.searchCollection('findByChip', { params: { chip: query } });
+        return forkJoin([res1, res2]).pipe(
+            map(([result1, result2]) => {
+                const combinedResources = [...result1.resources, ...result2.resources];
+                return {
+                  ...result1,
+                  resources: combinedResources,
+                } as ResourceCollection<Dog>;
+              })
+        );;
+    }
+
+}
\ No newline at end of file
diff --git a/src/app/pet/dog/dog.ts b/src/app/pet/dog/dog.ts
new file mode 100644
index 0000000..545e33a
--- /dev/null
+++ b/src/app/pet/dog/dog.ts
@@ -0,0 +1,9 @@
+import { HateoasResource } from "@lagoshny/ngx-hateoas-client";
+import { Pet } from '../pet';
+
+@HateoasResource('dogs')
+export class Dog extends Pet {
+
+    barkingLevel: number;
+
+}
\ No newline at end of file
diff --git a/src/app/pet/pet.service.ts b/src/app/pet/pet.service.ts
new file mode 100644
index 0000000..34cda86
--- /dev/null
+++ b/src/app/pet/pet.service.ts
@@ -0,0 +1,20 @@
+import { Observable } from 'rxjs/internal/Observable';
+import { HateoasResourceOperation, ResourceCollection } from '@lagoshny/ngx-hateoas-client';
+import {Pet} from "./pet";
+
+// We don't make pet available directly, we will inject the Cat and Dog services which extend this one.
+// This is correct since in the API the Cat 
+export class PetService<T extends Pet> extends HateoasResourceOperation<T> {
+
+  constructor(resourceType: { new (): T }) {
+    super(resourceType);
+  }
+
+  public findByChip(query: string): Observable<ResourceCollection<T>> {
+    return this.searchCollection('findByChip', { params: { text: query } });
+  }
+
+  public findByName(query: string): Observable<ResourceCollection<T>> {
+    return this.searchCollection('findByName', { params: { text: query } });
+  }
+}
diff --git a/src/app/pet/pet.ts b/src/app/pet/pet.ts
new file mode 100644
index 0000000..aaeb127
--- /dev/null
+++ b/src/app/pet/pet.ts
@@ -0,0 +1,27 @@
+import { HateoasResource, Resource } from "@lagoshny/ngx-hateoas-client";
+
+@HateoasResource('pets')
+export class Pet extends Resource {
+
+    uri: string;
+    chip: string;
+    name: string;
+    dateOfBirth: Date;
+    adopted: boolean;
+    colour: string;
+    size: number;
+    sex: string;
+    race: string;
+    dangerous: boolean;
+
+    constructor(values: object = {}) {
+        super();
+        Object.assign(this as any, values);
+    }
+
+    public get id(): string {
+        let uriArray = this.uri.split('/');
+        return uriArray.pop();
+    }
+
+}
\ No newline at end of file
diff --git a/src/favicon.ico b/src/favicon.ico
index 997406a..eaa0d19 100644
Binary files a/src/favicon.ico and b/src/favicon.ico differ
diff --git a/src/index.html b/src/index.html
index c3afbed..1bf9b3a 100644
--- a/src/index.html
+++ b/src/index.html
@@ -2,7 +2,7 @@
 <html lang="en">
 <head>
   <meta charset="utf-8">
-  <title>Angular Template</title>
+  <title>MyPets GEIADE</title>
   <base href="/">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="icon" type="image/x-icon" href="favicon.ico">