diff --git a/src/app/components/home/workspace/hours/hours.component.css b/src/app/components/home/workspace/hours/hours.component.css
index fdb01ab..ebd93e3 100644
--- a/src/app/components/home/workspace/hours/hours.component.css
+++ b/src/app/components/home/workspace/hours/hours.component.css
@@ -1,3 +1,7 @@
-mat-grid-tile {
-  background: lightblue;
+table, th, td {
+	border: 1px solid #cccccc;
+}
+
+tr {
+	margin: 1rem;
 }
diff --git a/src/app/components/home/workspace/hours/hours.component.html b/src/app/components/home/workspace/hours/hours.component.html
index bdd3707..5ed8577 100644
--- a/src/app/components/home/workspace/hours/hours.component.html
+++ b/src/app/components/home/workspace/hours/hours.component.html
@@ -1,10 +1,18 @@
-<p>hours works!</p>
 <ng-container *ngIf="(schedules$ | async) as sched">
-	<mat-grid-list cols="{{schedCols}}" rowHeight="3:1">
-		<ng-container *ngFor="let day of sched">
-			<mat-grid-tile>{{day.name}}</mat-grid-tile>
-			<ng-container *ngFor="let hours of day.horaires">
-			</ng-container>
-		</ng-container>
-	</mat-grid-list>
+	<table border="0" cellspacing="1" cellpadding="1">
+		<thead>
+			<tr>
+				<th></th>
+				<ng-container *ngFor="let day of sched">
+					<th>{{day.name}}</th>
+				</ng-container>
+			</tr>
+		</thead>
+			<tr *ngFor="let i of [].constructor(schedRows); let r = index">
+				<td>{{sched[0].horaires[r].name}}</td>
+				<td *ngFor="let j of [].constructor(schedCols); let s = index" [ngStyle]="{'background-color': sched[s].horaires[r].state? 'green':'red'}" (click)="updateCell(sched[s], sched[s].horaires[r])">
+			</tr>
+	</table>
+
+	<button type="button" (click)="update()">Mise à jour</button>
 </ng-container>
diff --git a/src/app/components/home/workspace/hours/hours.component.ts b/src/app/components/home/workspace/hours/hours.component.ts
index accf9c3..1da7323 100644
--- a/src/app/components/home/workspace/hours/hours.component.ts
+++ b/src/app/components/home/workspace/hours/hours.component.ts
@@ -1,9 +1,9 @@
 import { Component, OnInit } from '@angular/core';
 import { Router } from '@angular/router';
 import { BackendService } from '../../../../services/backend/backend.service';
-import { Scheduler } from '../../../../models/scheduler.model';
+import { Scheduler, Horaire } from '../../../../models/scheduler.model';
 import { ToastrService } from 'ngx-toastr';
-import { Observable } from 'rxjs';
+import { Observable, throwError } from 'rxjs';
 import { catchError, map, startWith } from 'rxjs/operators';
 
 @Component({
@@ -14,6 +14,7 @@ import { catchError, map, startWith } from 'rxjs/operators';
 export class HoursComponent implements OnInit {
 	schedules$:Observable<Scheduler[]>|null=null;
 	schedCols:number = 0;
+	schedRows:number = 0;
 
 	constructor( private bs:BackendService,
 		     private router:Router,
@@ -22,13 +23,30 @@ export class HoursComponent implements OnInit {
 	ngOnInit(): void {
 		this.schedules$ = this.bs.retreiveSchedulers().pipe(
 			map(datas => {
-				console.log("scheduler OK ...", datas);
-				console.log("length: ", Object.keys(datas).length);
-				console.log("horaires ...",datas[0].horaires);
+				//console.log("scheduler OK ...", datas);
+				//console.log("length: ", Object.keys(datas).length);
+				//console.log("horaires ...",datas[0].horaires);
+				//console.log("length: ", Object.keys(datas[0].horaires).length);
 				this.schedCols = Object.keys(datas).length;
+				this.schedRows = Object.keys(datas[0].horaires).length;
 				return datas;
-			}
-		));
+			}),
+			catchError(err => {
+				if(err.status == 401) {
+					console.log("error: ", err);
+					this.router.navigateByUrl("/login");
+				}
+				return throwError(err);
+			})
+		);
 	}
 
+	update(): void {
+
+	}
+
+	updateCell(sched: Scheduler, hour: Horaire): void {
+		console.log("sched: ", sched);
+		console.log("hour: ", hour);
+	}
 }
diff --git a/src/app/models/scheduler.model.ts b/src/app/models/scheduler.model.ts
index e7cd655..8098a3e 100644
--- a/src/app/models/scheduler.model.ts
+++ b/src/app/models/scheduler.model.ts
@@ -1,55 +1,9 @@
 export interface Horaire {
-	h00_00:boolean;	
-	h00_30:boolean;	
-	h01_00:boolean;	
-	h01_30:boolean;	
-	h02_00:boolean;	
-	h02_30:boolean;	
-	h03_00:boolean;	
-	h03_30:boolean;	
-	h04_00:boolean;	
-	h04_30:boolean;	
-	h05_00:boolean;	
-	h05_30:boolean;	
-	h06_00:boolean;	
-	h06_30:boolean;	
-	h07_00:boolean;	
-	h07_30:boolean;	
-	h08_00:boolean;	
-	h08_30:boolean;	
-	h09_00:boolean;	
-	h09_30:boolean;	
-	h10_00:boolean;	
-	h10_30:boolean;	
-	h11_00:boolean;	
-	h11_30:boolean;	
-	h12_00:boolean;	
-	h12_30:boolean;	
-	h13_00:boolean;	
-	h13_30:boolean;	
-	h14_00:boolean;	
-	h14_30:boolean;	
-	h15_00:boolean;	
-	h15_30:boolean;	
-	h16_00:boolean;	
-	h16_30:boolean;	
-	h17_00:boolean;	
-	h17_30:boolean;	
-	h18_00:boolean;	
-	h18_30:boolean;	
-	h19_00:boolean;	
-	h19_30:boolean;	
-	h20_00:boolean;	
-	h20_30:boolean;	
-	h21_00:boolean;	
-	h21_30:boolean;	
-	h22_00:boolean;	
-	h22_30:boolean;	
-	h23_00:boolean;	
-	h23_30:boolean;	
+	name:string;
+	state:boolean;
 }
 
 export interface Scheduler {
 	name:string;
-	horaires:Horaire;
+	horaires:Horaire[];
 }