diff --git a/src/app/components/edit-item/edit-item.component.ts b/src/app/components/edit-item/edit-item.component.ts
index 299bc56..f33a41d 100644
--- a/src/app/components/edit-item/edit-item.component.ts
+++ b/src/app/components/edit-item/edit-item.component.ts
@@ -58,7 +58,6 @@ export class EditItemComponent implements OnInit {
   }
 
   ngOnInit(): void {
-    console.log(this.appointment);
     let date = new Date(this.appointment.startDate);
     this.testForm = new FormGroup({
       title: new FormControl(this.appointment.title, Validators.required),
diff --git a/src/app/components/new-item/new-item.component.html b/src/app/components/new-item/new-item.component.html
index 64e300b..31cb940 100644
--- a/src/app/components/new-item/new-item.component.html
+++ b/src/app/components/new-item/new-item.component.html
@@ -1,4 +1,4 @@
-<form [formGroup]="testForm">
+<form [formGroup]="appointmentForm">
   <tui-input formControlName="title">
     Titel
     <input
@@ -8,7 +8,7 @@
     />
   </tui-input>
   <div
-    *ngIf="testForm.get('title').value == ''"
+    *ngIf="appointmentForm.get('title').value == ''"
     tuiGroup
     class="group"
     [collapsed]="true">
@@ -25,7 +25,7 @@
   <br>
   <div class="toolbar">
     <tui-combo-box
-      [formControl]="control"
+      [formControl]="customerControl"
       [stringify]="stringify"
       tuiTextfieldSize="m">
       Klant
@@ -43,18 +43,17 @@
       type="button">
     </button>
   </div>
+
   <br>
   <div
     tuiGroup
-    class="group"
-  >
+    class="group">
     <div>
       <tui-input-date
         formControlName="date"
         tuiTextfieldSize="m"
         class="tui-space_vertical-4"
-        [tuiTextfieldLabelOutside]="false"
-      >
+        [tuiTextfieldLabelOutside]="false">
         Datum
       </tui-input-date>
     </div>
@@ -72,12 +71,38 @@
         formControlName="endTime"
         tuiTextfieldSize="m"
         class="tui-space_top-2"
-        [tuiTextfieldLabelOutside]="false"
-      >
+        [tuiTextfieldLabelOutside]="false">
         Tot
       </tui-input-time>
     </div>
   </div>
+  <span *ngIf="appointmentForm.get('endTime')?.errors?.['endTimeInvalid']">
+      	<tui-error [error]="timeError"/>
+    </span>
+  <br>
+  <ng-container *ngIf="appointments.length > 0">
+    <h3>Geplande afspraken die dag:</h3>
+    <div class="appointments-container">
+      <div *ngFor="let appointment of appointments" class="appointment-object">
+        <span class="title">{{ appointment.title }}</span>
+        <span class="name">
+        <tui-icon
+          icon="@tui.user"
+          [style.font-size.rem]="1"
+          [style.color]="'var(--tui-background-accent-1)'"/>
+          {{ appointment.customer.firstName }} {{ appointment.customer.lastName }}</span>
+        <span class="time">
+        <tui-icon
+          icon="@tui.clock"
+          [style.font-size.rem]="1"
+          [style.color]="'var(--tui-background-accent-1)'"/>
+          {{ getFormattedTime(appointment.startHour, appointment.startMinute) }} -
+          {{ getFormattedTime(appointment.endHour, appointment.endMinute) }}
+    </span>
+      </div>
+    </div>
+  </ng-container>
+
   <br>
   <tui-textarea formControlName="notes">Notities</tui-textarea>
 </form>
@@ -95,42 +120,35 @@
     <tui-input
       formControlName="firstName"
       tuiTextfieldSize="m"
-      [tuiTextfieldCleaner]="true"
-    >
+      [tuiTextfieldCleaner]="true">
       Voornaam
       <input
         tuiTextfieldLegacy
         type="text"
-        formControlName="firstName"
-      />
+        formControlName="firstName"/>
     </tui-input>
     <br>
-
     <tui-input
       formControlName="lastName"
       tuiTextfieldSize="m"
-      [tuiTextfieldCleaner]="true"
-    >
+      [tuiTextfieldCleaner]="true">
       Achternaam
       <input
         tuiTextfieldLegacy
         type="text"
-        formControlName="lastName"
-      />
+        formControlName="lastName"/>
     </tui-input>
     <br>
     <tui-input
       formControlName="email"
       tuiTextfieldSize="m"
-      [tuiTextfieldCleaner]="true"
-    >
+      [tuiTextfieldCleaner]="true">
       Email
       <input
         tuiTextfieldLegacy
         autocomplete="email"
         type="email"
-        formControlName="email"
-      />
+        formControlName="email"/>
     </tui-input>
     <br>
     <button
@@ -142,8 +160,7 @@
       type="button">
       <tui-icon
         icon="@tui.plus"
-        [style.height.rem]="1"
-      />
+        [style.height.rem]="1"/>
       Klant toevoegen
     </button>
   </form>
diff --git a/src/app/components/new-item/new-item.component.scss b/src/app/components/new-item/new-item.component.scss
index 92d5777..37a07cc 100644
--- a/src/app/components/new-item/new-item.component.scss
+++ b/src/app/components/new-item/new-item.component.scss
@@ -13,3 +13,48 @@
   justify-content: center;
 
 }
+
+[tuiAppearance][data-appearance='custom'] {
+  background: #526ed3;
+  color: white;
+  margin-right: 8px;
+}
+
+.appointments-container {
+  display: flex;
+  gap: 5px; /* Ruimte tussen de objecten */
+  overflow-x: auto; /* Alleen horizontaal scrollen als nodig */
+  white-space: nowrap; /* Voorkomt dat items naar een nieuwe regel springen */
+  padding-bottom: 5px; /* Ruimte voor scrollbar */
+}
+
+.appointment-object {
+  background-color: #f5f5f5;
+  padding: 5px;
+  border-radius: 3px;
+  box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1);
+  min-width: 120px;
+  text-align: left;
+  font-size: 12px;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  flex-shrink: 0; /* Voorkomt dat items kleiner worden bij weinig ruimte */
+}
+
+
+/* Optioneel: Specifieke styling voor de tekstregels */
+.name {
+  color: #555;
+}
+
+.title {
+  font-weight: bold;
+}
+
+.time {
+  font-size: 11px;
+  color: #777;
+}
+
+
diff --git a/src/app/components/new-item/new-item.component.ts b/src/app/components/new-item/new-item.component.ts
index 089d7f4..93f6557 100644
--- a/src/app/components/new-item/new-item.component.ts
+++ b/src/app/components/new-item/new-item.component.ts
@@ -1,7 +1,7 @@
 import {Component, EventEmitter, Input, OnInit, Output} from '@angular/core';
 import {NgForOf, NgIf} from "@angular/common";
 import {FormControl, FormGroup, ReactiveFormsModule, Validators} from "@angular/forms";
-import {TuiButton, TuiGroup, TuiIcon} from "@taiga-ui/core";
+import {TuiButton, TuiError, TuiGroup, TuiIcon} from "@taiga-ui/core";
 import {
   TuiComboBoxModule,
   TuiInputDateModule,
@@ -11,7 +11,7 @@ import {
   TuiTextfieldControllerModule
 } from "@taiga-ui/legacy";
 import {Appointment} from '../../models/appointment';
-import {TuiDay} from '@taiga-ui/cdk';
+import {TuiDay, TuiTime, TuiValidationError} from '@taiga-ui/cdk';
 import {AppointmentService} from '../../services/appointment.service';
 import {
   TuiButtonLoading,
@@ -22,6 +22,7 @@ import {
 import {Customer} from '../../models/customer';
 import {CustomerService} from '../../services/customer.service';
 import {ModalComponent} from '../modal/modal.component';
+import {timeAfterStartValidator} from '../../models/validators/time-after-start-validator';
 
 @Component({
   selector: 'app-new-item',
@@ -42,42 +43,65 @@ import {ModalComponent} from '../modal/modal.component';
     TuiFilterByInputPipe,
     ModalComponent,
     TuiIcon,
-    TuiButtonLoading
+    TuiButtonLoading,
+    TuiError
   ],
   templateUrl: './new-item.component.html',
   styleUrl: './new-item.component.scss'
 })
 export class NewItemComponent implements OnInit {
 
-  @Input() testForm: FormGroup;
+  @Input() appointmentForm: FormGroup;
+  @Input() appointments: Appointment[];
   quickActions = ['Knippen', 'Kleuren', 'Knippen + Kleuren']
   waiting: boolean = false;
   protected value: TuiDay | null = null;
   @Output() appointmentAddedEvent = new EventEmitter();
   showNewCustomer = false;
   customerForm: FormGroup;
+  today: Date;
+  timeError = new TuiValidationError('Begintijd moet voor de eindtijd liggen.');
+
 
   constructor(private appointmentService: AppointmentService, private customerService: CustomerService) {
   }
 
   ngOnInit(): void {
     this.getCustomers()
+    this.today = new Date();
     this.customerForm = new FormGroup({
       firstName: new FormControl('', Validators.required),
       lastName: new FormControl('', Validators.required),
       email: new FormControl('', Validators.required),
     })
+    this.appointmentForm.get('startTime').setValue(new TuiTime(this.today.getHours(), this.today.getMinutes()), Validators.required)
+    this.appointmentForm.get('endTime').setValue(new TuiTime(this.getEndTime().getHours(), this.getEndTime().getMinutes()), [Validators.required, timeAfterStartValidator('startTime')])
+    this.appointments.sort((a, b) => {
+      return a.startHour - b.startHour || a.startMinute - b.startMinute;
+    });
+  }
+
+  getEndTime(): Date {
+    const endTime = new Date(this.today); // Kopieer startTime
+    endTime.setMinutes(endTime.getMinutes() + 30); // 30 minuten toevoegen
+
+    // Controleer of de dag nog steeds hetzelfde is
+    if (endTime.getDate() !== this.today.getDate()) {
+      endTime.setHours(23, 59, 59, 999); // Zet naar 23:59:59 als het overloopt
+    }
+
+    return endTime;
   }
 
   registerAppointment() {
-    const title = this.testForm.get('title').value
-    const description = this.testForm.get('notes').value
-    const startTime = this.testForm.get('startTime').value
-    const endTime = this.testForm.get('endTime').value
-    let date = this.testForm.get('date').value
+    const title = this.appointmentForm.get('title').value
+    const description = this.appointmentForm.get('notes').value
+    const startTime = this.appointmentForm.get('startTime').value
+    const endTime = this.appointmentForm.get('endTime').value
+    let date = this.appointmentForm.get('date').value
     let correctDate = new Date(date.year, date.month, date.day, startTime.hours, startTime.minutes);
 
-    const customer = this.control.value;
+    const customer = this.customerControl.value;
 
     const appointment = new Appointment(title, description, startTime.hours, startTime.minutes, endTime.hours, endTime.minutes, correctDate, customer)
     this.waiting = true
@@ -88,15 +112,15 @@ export class NewItemComponent implements OnInit {
   }
 
   formIsValid() {
-    return this.testForm.valid ? 'active' : 'disabled'
+    return this.appointmentForm.valid && this.customerControl.valid ? 'active' : 'disabled'
   }
 
   addAction(action: string) {
-    this.testForm.get('title').setValue(`${action} `)
+    this.appointmentForm.get('title').setValue(`${action} `)
   }
 
-  protected readonly control = new FormControl<Customer | null>(
-    null,
+  protected readonly customerControl = new FormControl<Customer | null>(
+    null, Validators.required
   );
 
   toggleCustomerModal() {
@@ -125,4 +149,8 @@ export class NewItemComponent implements OnInit {
       this.items = response;
     })
   }
+
+  getFormattedTime(hour: number, minute: number): string {
+    return `${hour.toString().padStart(2, '0')}:${minute.toString().padStart(2, '0')}`;
+  }
 }
diff --git a/src/app/interceptors/auth-interceptor.ts b/src/app/interceptors/auth-interceptor.ts
index 4c087f9..e3dbf1e 100644
--- a/src/app/interceptors/auth-interceptor.ts
+++ b/src/app/interceptors/auth-interceptor.ts
@@ -1,5 +1,5 @@
-import { HttpInterceptorFn } from '@angular/common/http';
-import { inject } from '@angular/core';
+import {HttpInterceptorFn} from '@angular/common/http';
+import {inject} from '@angular/core';
 import {AuthService} from '../services/auth.service';
 
 const excludedUrls = ['/auth/login'];
diff --git a/src/app/models/appointment.ts b/src/app/models/appointment.ts
index ddc9a61..b0bde88 100644
--- a/src/app/models/appointment.ts
+++ b/src/app/models/appointment.ts
@@ -22,8 +22,6 @@ export class Appointment {
     this.startDate = date;
     this.customer = customer;
 
-    console.log(this)
-
     // Bereken de totale duur in minuten
     this.durationInMinutes = (endHour * 60 + endMinute) - (startHour * 60 + startMinute);
   }
diff --git a/src/app/models/user-dto.ts b/src/app/models/user-dto.ts
index 9596a7b..c85512c 100644
--- a/src/app/models/user-dto.ts
+++ b/src/app/models/user-dto.ts
@@ -1,8 +1,8 @@
 export class UserDto {
-  username:string
-  fullName:string
-  email:string
-  token:string
+  username: string
+  fullName: string
+  email: string
+  token: string
 
   constructor() {
   }
diff --git a/src/app/models/validators/time-after-start-validator.ts b/src/app/models/validators/time-after-start-validator.ts
new file mode 100644
index 0000000..923d79d
--- /dev/null
+++ b/src/app/models/validators/time-after-start-validator.ts
@@ -0,0 +1,18 @@
+import {AbstractControl, ValidationErrors, ValidatorFn} from '@angular/forms';
+
+export function timeAfterStartValidator(startTimeField: string): ValidatorFn {
+  return (control: AbstractControl): ValidationErrors | null => {
+    const startTime = control.parent?.get(startTimeField)?.value;
+    const endTime = control.value;
+
+    if (!startTime || !endTime) {
+      return null; // Niet valideren als een van beide leeg is
+    }
+
+    // Omzetten naar Date-objecten voor vergelijking
+    const start = new Date(`1970-01-01T${startTime}:00`);
+    const end = new Date(`1970-01-01T${endTime}:00`);
+
+    return end > start ? null : {endTimeInvalid: true};
+  };
+}
diff --git a/src/app/pages/agenda/agenda.component.html b/src/app/pages/agenda/agenda.component.html
index ee4d62a..d94ae96 100644
--- a/src/app/pages/agenda/agenda.component.html
+++ b/src/app/pages/agenda/agenda.component.html
@@ -74,7 +74,8 @@
 </div>
 
 <app-modal title="Nieuwe afspraak" (close)="closeNewItemModal()" *ngIf="isModalOpen">
-  <app-new-item [testForm]="appointmentForm" (appointmentAddedEvent)="registerAppointment($event)"></app-new-item>
+  <app-new-item [appointments]="appointments" [appointmentForm]="appointmentForm"
+                (appointmentAddedEvent)="registerAppointment($event)"></app-new-item>
 </app-modal>
 
 <app-modal title="{{selectedAppointment.title}}" (close)="selectedAppointment = undefined"
diff --git a/src/app/pages/agenda/agenda.component.ts b/src/app/pages/agenda/agenda.component.ts
index d01ac4e..7fdd6d8 100644
--- a/src/app/pages/agenda/agenda.component.ts
+++ b/src/app/pages/agenda/agenda.component.ts
@@ -17,6 +17,7 @@ import {DetailsComponent} from '../../components/details/details.component';
 import {DateFormatter} from '../../utils/date-formatter';
 import {WeekDay} from '../../models/week-day';
 import {NewItemComponent} from '../../components/new-item/new-item.component';
+import {timeAfterStartValidator} from '../../models/validators/time-after-start-validator';
 
 @Component({
   selector: 'app-agenda',
@@ -52,7 +53,7 @@ export class AgendaComponent implements OnInit {
     title: new FormControl('', Validators.required),
     notes: new FormControl(''),
     startTime: new FormControl(new TuiTime(this.today.getHours(), this.today.getMinutes()), Validators.required),
-    endTime: new FormControl(new TuiTime(this.getHours(), this.getMinutes()), Validators.required),
+    endTime: new FormControl(new TuiTime(this.getHours(), this.getMinutes()), [Validators.required, timeAfterStartValidator('startTime')]),
     date: new FormControl(new TuiDay(this.selectedDate.getFullYear(), this.selectedDate.getMonth(), this.selectedDate.getDate()), Validators.required),
   });
 
@@ -90,7 +91,7 @@ export class AgendaComponent implements OnInit {
       title: new FormControl('', Validators.required),
       notes: new FormControl(''),
       startTime: new FormControl(new TuiTime(this.today.getHours(), this.today.getMinutes()), Validators.required),
-      endTime: new FormControl(new TuiTime(this.getEndTime().getHours(), this.getEndTime().getMinutes()), Validators.required),
+      endTime: new FormControl(new TuiTime(this.getEndTime().getHours(), this.getEndTime().getMinutes()), [Validators.required, timeAfterStartValidator('startTime')]),
       date: new FormControl(new TuiDay(this.selectedDate.getFullYear(), this.selectedDate.getMonth(), this.selectedDate.getDate()), Validators.required),
     });
   }
@@ -109,7 +110,6 @@ export class AgendaComponent implements OnInit {
 
   getHours() {
     let hours = this.today.getHours()
-    console.log(hours)
     if (hours > 23) {
       return 23
     }
diff --git a/src/app/pages/home/home.component.html b/src/app/pages/home/home.component.html
index 6532c47..f948abc 100644
--- a/src/app/pages/home/home.component.html
+++ b/src/app/pages/home/home.component.html
@@ -23,7 +23,7 @@
       <tui-avatar src="{{getInitials()}}"/>
       <ng-template #dropdownContent>
         <div class="dropdown">
-          <h3>{{fullName}}</h3>
+          <h3>{{ fullName }}</h3>
           <button
             size="m"
             tuiButton
diff --git a/src/app/pages/home/home.component.scss b/src/app/pages/home/home.component.scss
index f383df7..3b716e6 100644
--- a/src/app/pages/home/home.component.scss
+++ b/src/app/pages/home/home.component.scss
@@ -52,11 +52,11 @@ tui-avatar {
   margin-bottom: 8px;
 }
 
-.t-content{
+.t-content {
   margin-right: 24px;
 }
 
-button{
+button {
   background: transparent;
   border: none;
 }
diff --git a/src/app/pages/klanten/klanten.component.scss b/src/app/pages/klanten/klanten.component.scss
index cf10c6d..3c9a9de 100644
--- a/src/app/pages/klanten/klanten.component.scss
+++ b/src/app/pages/klanten/klanten.component.scss
@@ -18,25 +18,25 @@ h2 {
 }
 
 .styled-table {
-  width: 100%;               /* Tabel breedte */
-  border-collapse: collapse;  /* Verwijdert dubbele randen */
-  margin: 20px 0;            /* Ruimte rondom de tabel */
+  width: 100%; /* Tabel breedte */
+  border-collapse: collapse; /* Verwijdert dubbele randen */
+  margin: 20px 0; /* Ruimte rondom de tabel */
   font-size: 16px;
-  text-align: left;          /* Tekst uitlijning */
+  text-align: left; /* Tekst uitlijning */
   box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* Zachte schaduw */
-  border-radius: 10px;       /* Afgeronde hoeken */
-  overflow: hidden;          /* Hoeken correct afronden */
+  border-radius: 10px; /* Afgeronde hoeken */
+  overflow: hidden; /* Hoeken correct afronden */
 }
 
 .styled-table thead {
   background-color: #868383; /* Blauwe kopregel */
-  color: #ffffff;           /* Witte tekst */
+  color: #ffffff; /* Witte tekst */
   //text-transform: uppercase; /* Hoofdletters */
   font-weight: bold;
 }
 
 .styled-table th, .styled-table td {
-  padding: 12px 15px;        /* Ruimte binnen de cellen */
+  padding: 12px 15px; /* Ruimte binnen de cellen */
 }
 
 .styled-table tbody tr {
diff --git a/src/app/pages/login/login.component.html b/src/app/pages/login/login.component.html
index 17a6b01..0bc2b4a 100644
--- a/src/app/pages/login/login.component.html
+++ b/src/app/pages/login/login.component.html
@@ -12,7 +12,7 @@
         <label tuiLabel>Wachtwoord</label>
         <input formControlName="password" type="password" placeholder="Voer je wachtwoord in" tuiTextfield/>
       </tui-textfield>
-      <tui-error [error]="computedError" />
+      <tui-error [error]="computedError"/>
       <footer>
         <button tuiButton class="custom-button" type="submit" [disabled]="form.invalid" (click)="login()">
           Inloggen
diff --git a/src/app/pages/login/login.component.scss b/src/app/pages/login/login.component.scss
index 74ccb57..455527a 100644
--- a/src/app/pages/login/login.component.scss
+++ b/src/app/pages/login/login.component.scss
@@ -6,7 +6,7 @@
   /* Adjust as needed */
 }
 
-tui-error{
+tui-error {
   text-align: center;
 }
 
diff --git a/src/app/services/appointment.service.ts b/src/app/services/appointment.service.ts
index 0bb0ff6..5afcd08 100644
--- a/src/app/services/appointment.service.ts
+++ b/src/app/services/appointment.service.ts
@@ -7,6 +7,7 @@ import {Appointment} from '../models/appointment';
 })
 export class AppointmentService {
   baseApi = "http://localhost:8080/api/appointments";
+
   // baseApi = "https://api.melvanveen.nl/api/appointments";
 
   constructor(private http: HttpClient) {
diff --git a/src/app/services/auth.service.ts b/src/app/services/auth.service.ts
index 4757e1d..202716f 100644
--- a/src/app/services/auth.service.ts
+++ b/src/app/services/auth.service.ts
@@ -1,7 +1,7 @@
-import { Injectable } from '@angular/core';
-import { HttpClient } from '@angular/common/http';
-import { JwtHelperService } from '@auth0/angular-jwt';
-import { Observable } from 'rxjs';
+import {Injectable} from '@angular/core';
+import {HttpClient} from '@angular/common/http';
+import {JwtHelperService} from '@auth0/angular-jwt';
+import {Observable} from 'rxjs';
 import {jwtDecode} from 'jwt-decode';
 
 @Injectable({
@@ -12,10 +12,11 @@ export class AuthService {
   // baseApi = "https://api.melvanveen.nl/api/auth/login";
   jwtHelper = new JwtHelperService();
 
-  constructor(private http: HttpClient) {}
+  constructor(private http: HttpClient) {
+  }
 
   login(username: string, password: string): Observable<any> {
-    return this.http.post(this.baseApi, { username, password });
+    return this.http.post(this.baseApi, {username, password});
   }
 
   isAuthenticated(): boolean {
diff --git a/src/app/services/customer.service.ts b/src/app/services/customer.service.ts
index f83b141..d174c9c 100644
--- a/src/app/services/customer.service.ts
+++ b/src/app/services/customer.service.ts
@@ -8,6 +8,7 @@ import {Observable} from 'rxjs';
 })
 export class CustomerService {
   baseApi = "http://localhost:8080/api/customers";
+
   // baseApi = "https://api.melvanveen.nl/api/customers";
 
 
diff --git a/src/app/utils/date-formatter.ts b/src/app/utils/date-formatter.ts
index 5601cba..9dd9316 100644
--- a/src/app/utils/date-formatter.ts
+++ b/src/app/utils/date-formatter.ts
@@ -7,7 +7,6 @@ export class DateFormatter {
 
   static getHours(date: Date) {
     let hours = date.getHours()
-    console.log(hours)
     if (hours > 23) {
       return 23
     }