diff --git a/backend/src/main/java/at/ac/tuwien/sepm/assignment/individual/enums/ERace.java b/backend/src/main/java/at/ac/tuwien/sepm/assignment/individual/enums/ERace.java
new file mode 100644
index 0000000..7636613
--- /dev/null
+++ b/backend/src/main/java/at/ac/tuwien/sepm/assignment/individual/enums/ERace.java
@@ -0,0 +1,8 @@
+package at.ac.tuwien.sepm.assignment.individual.enums;
+
+public enum ERace {
+    ARABIAN,
+    MORGAN,
+    PAINT,
+    APPALOOSA
+}
diff --git a/frontend/wendys-friends/src/app/component/add-horse/add-horse.component.html b/frontend/wendys-friends/src/app/component/add-horse/add-horse.component.html
new file mode 100644
index 0000000..5e603ee
--- /dev/null
+++ b/frontend/wendys-friends/src/app/component/add-horse/add-horse.component.html
@@ -0,0 +1,56 @@
+<div *ngIf="error" class="alert alert-danger alert-dismissible fade show" role="alert">
+  <strong>Error! </strong> {{ errorMessage }}
+  <button type="button" (click)="vanishError()" class="close" data-dismiss="alert" aria-label="Close">
+    <span aria-hidden="true">&times;</span>
+  </button>
+</div>
+
+<div *ngIf="success" class="alert alert-success alert-dismissible fade show" role="alert">
+  <p><strong>Success! </strong> Horse {{ success }} has been successfully added. </p>
+  <button type="button" (click)="vanishAlert()" class="close" data-dismiss="alert" aria-label="Close">
+    <span aria-hidden="true">&times;</span>
+  </button>
+</div>
+
+<div class="container">
+  <h1>Add new horse</h1>
+  <form (ngSubmit)="addHorse()" #horseForm="ngForm">
+    <div class="form-group">
+      <label for="name">Name</label>
+      <input type="text" class="form-control" name="name" [(ngModel)]="horse.name" required>
+    </div>
+
+    <div class="form-group">
+      <label for="description">Description</label>
+      <textarea class="form-control" name="description" [(ngModel)]="horse.description" value=""></textarea>
+    </div>
+
+    <div class="form-group">
+      <label for="score">Score</label>
+      <select class="form-control" name="score" [(ngModel)]="horse.score" required>
+        <option value="1">1</option>
+        <option value="2">2</option>
+        <option value="3">3</option>
+        <option value="4">4</option>
+        <option value="5">5</option>
+      </select>
+    </div>
+
+    <div class="form-group">
+      <label for="race">Race</label>
+      <select class="form-control" name="race" [(ngModel)]="horse.race" required>
+        <option value="ARABIAN">Arabian</option>
+        <option value="MORGAN">Morgan</option>
+        <option value="PAINT">Paint</option>
+        <option value="APPALOOSA">Appaloosa</option>
+      </select>
+    </div>
+
+    <div class="form-group">
+      <label for="birthday">Birthday</label>
+      <input type="date" class="form-control" name="birthday" [(ngModel)]="horse.birthday" required pattern="\d{4}-\d{2}-\d{2}">
+    </div>
+
+    <button type="submit" class="btn btn-success" [disabled]="!horseForm.form.valid" (submit)="addHorse()">Submit</button>
+  </form>
+</div>
\ No newline at end of file
diff --git a/frontend/wendys-friends/src/app/component/add-horse/add-horse.component.scss b/frontend/wendys-friends/src/app/component/add-horse/add-horse.component.scss
new file mode 100644
index 0000000..e69de29
diff --git a/frontend/wendys-friends/src/app/component/add-horse/add-horse.component.ts b/frontend/wendys-friends/src/app/component/add-horse/add-horse.component.ts
new file mode 100644
index 0000000..1ec47ca
--- /dev/null
+++ b/frontend/wendys-friends/src/app/component/add-horse/add-horse.component.ts
@@ -0,0 +1,65 @@
+import { Component, OnInit } from '@angular/core';
+import { Horse } from '../../dto/horse';
+import { HorseService } from '../../service/horse.service';
+
+@Component({
+  selector: 'app-add-horse',
+  templateUrl: './add-horse.component.html',
+  styleUrls: ['./add-horse.component.scss']
+})
+export class AddHorseComponent implements OnInit {
+  error = false;
+  success: string;
+  errorMessage = '';
+  horse: Horse = new Horse(null, null, null, null, null, null, null);
+
+  constructor(private horseService: HorseService) { }
+
+  ngOnInit(): void {}
+
+  /**
+   * Will be called on a click on the success alert close button
+   */
+  public vanishAlert() {
+    this.success = null;
+  }
+
+  /**
+   * Will be called on a click on the error alert close button
+   */
+  public vanishError() {
+    this.errorMessage = null;
+  }
+
+  /**
+   * Creates a new horse and loads it
+   * @param horse
+   */
+  public addHorse() {
+    console.log("POST horse to API")
+    console.log(this.horse);
+    // TODO: Make it possible for the horse to be added with an owner
+    this.horseService.addHorse(this.horse).subscribe(
+      (result: Horse) => {
+        this.success = result.name;
+      },
+      error => {
+        this.defaultServiceErrorHandling(error);
+      }
+    );
+  }
+
+  private defaultServiceErrorHandling(error: any) {
+    console.log(error);
+    this.error = true;
+    if (error.status === 0) {
+      // If status is 0, the backend is probably down
+      this.errorMessage = 'The backend seems not to be reachable';
+    } else if (error.error.message === 'No message available') {
+      // If no detailed error message is provided, fall back to the simple error name
+      this.errorMessage = error.error.error;
+    } else {
+      this.errorMessage = error.error.message;
+    }
+  }
+}