diff --git a/client/package-lock.json b/client/package-lock.json
index 62180ff455f46a279eb847a03daee8b39a805456..4ac1e548394674f07bb5aca2f08f9f32304e626b 100644
--- a/client/package-lock.json
+++ b/client/package-lock.json
@@ -6473,6 +6473,14 @@
       "resolved": "https://registry.npmjs.org/ngx-bootstrap/-/ngx-bootstrap-4.1.1.tgz",
       "integrity": "sha512-2vbjMXxzFX6hz929474It6yI3LyFLm9V4vkLGlCGuhyPWi4G5kuLl3j5Wrj1CsBG9+Cz9xQM9JT6gZnkXBgaTw=="
     },
+    "ngx-ui-loader": {
+      "version": "7.2.2",
+      "resolved": "https://registry.npmjs.org/ngx-ui-loader/-/ngx-ui-loader-7.2.2.tgz",
+      "integrity": "sha512-zmwKSypGuzwyOrGpRS/p5FO5avmbCmDWcBJM11JgJyykB50/W+KbuoOm7dFP9kYMccr2JbUAkWosztNMhY3t1Q==",
+      "requires": {
+        "tslib": "^1.9.0"
+      }
+    },
     "nice-try": {
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/nice-try/-/nice-try-1.0.5.tgz",
diff --git a/client/package.json b/client/package.json
index ff594db61bf24a11491201d268bd78c18bf0714c..2622bef13ef027d4d86be9099c65157250f8f12d 100644
--- a/client/package.json
+++ b/client/package.json
@@ -30,6 +30,7 @@
     "jquery": "^3.4.0",
     "ng2-ace-editor": "^0.3.9",
     "ngx-bootstrap": "^4.1.1",
+    "ngx-ui-loader": "^7.2.2",
     "rxjs": "~6.3.3",
     "tslib": "^1.9.0",
     "zone.js": "~0.8.26"
diff --git a/client/src/app/app-routing.module.ts b/client/src/app/app-routing.module.ts
index cc7a7a734593c909efbf6ad1b9f226d8d21b00b8..278de4a288e4100e4de5673af5ee1cbdb09adc65 100644
--- a/client/src/app/app-routing.module.ts
+++ b/client/src/app/app-routing.module.ts
@@ -15,8 +15,8 @@ const routes: Routes = [
   { path: '', redirectTo: '/programs', pathMatch: 'full' },
 
   {path: 'programs', component: ProgramDisplayerComponent},
-  {path: 'kata-displayer/:id/:title/:language/:sensei', component: KataDisplayerComponent},
-  {path: 'kata/:prgtitle/:sensei/:prid/:id', component: KataComponent},
+  {path: 'kata-displayer/:id', component: KataDisplayerComponent},
+  {path: 'kata/:prid/:id', component: KataComponent},
   {path: 'program_create', component: ProgramCreateComponent},
   {path: 'kata_create/:id/:language', component: KataCreateComponent},
 ];
diff --git a/client/src/app/app.component.scss b/client/src/app/app.component.scss
index fa0c94c1baf8409832553585c9115f7ee67ee9cf..aa5cce1e7a0284e9aa9b6cf8697998884213c00b 100644
--- a/client/src/app/app.component.scss
+++ b/client/src/app/app.component.scss
@@ -1 +1,2 @@
 body{display:inline-block}
+
diff --git a/client/src/app/app.module.ts b/client/src/app/app.module.ts
index 2a35e61593dd2d878c7b7774b493a2d9dfe90d27..2336699b930afd66328a1f880dca213a8c360936 100644
--- a/client/src/app/app.module.ts
+++ b/client/src/app/app.module.ts
@@ -18,6 +18,8 @@ import {KataCreateComponent} from './kata-create/kata-create.component';
 import {ProgramCreateComponent} from './program-create/program-create.component';
 import {FormsModule} from '@angular/forms';
 import {HttpClientModule} from '@angular/common/http';
+import {RNotFoundComponent} from './rnot-found/rnot-found.component';
+import {NgxUiLoaderModule} from 'ngx-ui-loader';
 
 
 @NgModule({
@@ -30,7 +32,8 @@ import {HttpClientModule} from '@angular/common/http';
     ProgramDisplayerComponent,
     KataComponent,
     KataCreateComponent,
-    ProgramCreateComponent
+    ProgramCreateComponent,
+    RNotFoundComponent
   ],
   imports: [
 
@@ -46,7 +49,8 @@ import {HttpClientModule} from '@angular/common/http';
     RouterModule,
     AceEditorModule,
     FormsModule,
-    HttpClientModule
+    HttpClientModule,
+    NgxUiLoaderModule
 
   ],
   providers: [],
diff --git a/client/src/app/fetch-kata-show-case.service.ts b/client/src/app/fetch-kata-show-case.service.ts
index e92d827f823ade9c98fdaa38ac2a106de3c5e4c1..a1c59936dac17929202ae82b22351e4eb900b8eb 100644
--- a/client/src/app/fetch-kata-show-case.service.ts
+++ b/client/src/app/fetch-kata-show-case.service.ts
@@ -11,7 +11,7 @@ export class FetchKataShowCaseService {
   constructor(private http: HttpClient) {
   }
 
-  getKatasDetails(program: number) {
+  getKatasDetails(program: string) {
     return this.http.get('http://localhost:7000/program/getkatas/details/' + program + '');
   }
 }
diff --git a/client/src/app/fetch-kata.service.ts b/client/src/app/fetch-kata.service.ts
index 1ff94d5670f150677b70e47b9d9cca78cf436c1e..4373e26a31378cac0724625b270b8c050fee0346 100644
--- a/client/src/app/fetch-kata.service.ts
+++ b/client/src/app/fetch-kata.service.ts
@@ -7,7 +7,7 @@ import {HttpClient} from '@angular/common/http';
 })
 export class FetchKataService {
 
-  getKata(programID: number, kataID: number) {
+  getKata(programID: string, kataID: string) {
     return this.http.get('http://localhost:7000/program/getkata/' + programID + '/' + kataID + '');
   }
 
diff --git a/client/src/app/fetch-program-id.service.spec.ts b/client/src/app/fetch-program-id.service.spec.ts
new file mode 100644
index 0000000000000000000000000000000000000000..3fb956b17c6e459681647bec02ef881b33f80ddf
--- /dev/null
+++ b/client/src/app/fetch-program-id.service.spec.ts
@@ -0,0 +1,12 @@
+import { TestBed } from '@angular/core/testing';
+
+import { FetchProgramIdService } from './fetch-program-id.service';
+
+describe('FetchProgramIdService', () => {
+  beforeEach(() => TestBed.configureTestingModule({}));
+
+  it('should be created', () => {
+    const service: FetchProgramIdService = TestBed.get(FetchProgramIdService);
+    expect(service).toBeTruthy();
+  });
+});
diff --git a/client/src/app/fetch-program-id.service.ts b/client/src/app/fetch-program-id.service.ts
new file mode 100644
index 0000000000000000000000000000000000000000..894ff3404f3476289aff33f5efe93ccd743cd56d
--- /dev/null
+++ b/client/src/app/fetch-program-id.service.ts
@@ -0,0 +1,15 @@
+import {Injectable} from '@angular/core';
+import {HttpClient} from '@angular/common/http';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class FetchProgramIdService {
+
+  getDetails(id: string) {
+    return this.http.get('http://localhost:7000/program/getdetails/' + id + '');
+  }
+
+  constructor(private http: HttpClient) {
+  }
+}
diff --git a/client/src/app/kata-displayer/kata-displayer.component.html b/client/src/app/kata-displayer/kata-displayer.component.html
index 77cb659c0e7f2a30d6d532b646b866d2e979e624..000edee89ea5afc3e33ba85ccd164c2d06926632 100644
--- a/client/src/app/kata-displayer/kata-displayer.component.html
+++ b/client/src/app/kata-displayer/kata-displayer.component.html
@@ -1,11 +1,15 @@
-<div class="container" *ngIf="katas">
-  <input type="button" value="Create" routerLink="/kata_create/{{idProgram}}/{{programLanguage}}"/>
-  <span class="title">{{programTitle}}
-    <br>
+<div *ngIf="!error" class="d-flex justify-content-center" style="margin-top:2%">
+
+  <div class="container">
+    <span *ngIf="inforreceived">
+    <span class="title">{{programTitle}}
+      <br>
     <span class="subtitle">{{programSensei}} <span class="language"> {{programLanguage}}</span>
+    </span>
+      <input type="button" value="Create" routerLink="/kata_create/{{idProgram}}/{{programLanguage}}"/>
   </span>
-  </span>
-
+    </span>
+    <span *ngIf="katas">
   <div class="d-flex justify-content-start" style="margin-top:2%">
     <div class="d-flex flex-row">
       <span *ngFor="let kata of katas">
@@ -13,7 +17,7 @@
         <div class="card" style="width: 18rem;">
         <div class="card-body">
           <h5 class="card-title"><a class="title"
-                                    routerLink="/kata/{{programTitle}}/{{programSensei}}/{{idProgram}}/{{kata.id}}">{{kata.title}}</a></h5>
+                                    routerLink="/kata/{{idProgram}}/{{kata.id}}">{{kata.title}}</a></h5>
           <br/>
           <h6 class="card-subtitle mb-2 text-muted">{{kata.difficulty}} </h6>
           <span style="float: right;">{{kata.status}}</span>
@@ -26,4 +30,13 @@
       </span>
     </div>
   </div>
+  </span>
+  </div>
+
+  <span *ngIf="!katas || !inforreceived"><ngx-ui-loader></ngx-ui-loader></span>
+</div>
+
+<div *ngIf="error">
+  <app-rnot-found></app-rnot-found>
 </div>
+
diff --git a/client/src/app/kata-displayer/kata-displayer.component.ts b/client/src/app/kata-displayer/kata-displayer.component.ts
index b9375f9cdc7a52cfdb576556fbee14eabf06b646..dfd3115346d12abac64d7022d2a29ec0931c434e 100644
--- a/client/src/app/kata-displayer/kata-displayer.component.ts
+++ b/client/src/app/kata-displayer/kata-displayer.component.ts
@@ -1,8 +1,10 @@
 import {Component, OnInit} from '@angular/core';
 import {KataShowCase} from './kataShowCase';
-import {ActivatedRoute} from '@angular/router';
+import {ActivatedRoute, Router} from '@angular/router';
 import {Location} from '@angular/common';
 import {FetchKataShowCaseService} from '../fetch-kata-show-case.service';
+import {FetchProgramIdService} from '../fetch-program-id.service';
+import {NgxUiLoaderService} from 'ngx-ui-loader';
 
 @Component({
   selector: 'app-kata-displayer',
@@ -12,24 +14,41 @@ import {FetchKataShowCaseService} from '../fetch-kata-show-case.service';
 export class KataDisplayerComponent implements OnInit {
 
   katas: KataShowCase[];
-  idProgram: number;
+  idProgram: string;
   programTitle: string;
   programLanguage: string;
   programSensei: string;
+  error = false;
+
+  inforreceived = false;
 
   constructor(
     private route: ActivatedRoute,
     private location: Location,
-    private fetchKataShowCaseService: FetchKataShowCaseService
+    private fetchKataShowCaseService: FetchKataShowCaseService,
+    private fetchProgramDetailsService: FetchProgramIdService,
+    private ngxLoader: NgxUiLoaderService
   ) {
   }
 
   getKatas(): void {
-    this.idProgram = +this.route.snapshot.paramMap.get('id');
-    this.programSensei = this.route.snapshot.paramMap.get('sensei');
-    this.programLanguage = this.route.snapshot.paramMap.get('language');
-    this.programTitle = this.route.snapshot.paramMap.get('title');
-    this.fetchKataShowCaseService.getKatasDetails(this.idProgram).subscribe((data: KataShowCase[]) => this.katas = data);
+    this.idProgram = this.route.snapshot.paramMap.get('id');
+    this.ngxLoader.start();
+    this.fetchProgramDetailsService.getDetails(this.idProgram).subscribe((data: string[]) => {
+      this.programTitle = data[0];
+      this.programLanguage = data[1];
+      this.programSensei = data[2];
+      this.inforreceived = true;
+      this.fetchKataShowCaseService.getKatasDetails(this.idProgram).subscribe((datas: KataShowCase[]) => {
+        this.katas = datas;
+        this.ngxLoader.stop();
+      });
+    }, (error1 => {
+      if (error1.status === 404) {
+        this.error = true;
+        this.ngxLoader.stop();
+      }
+    }));
   }
 
   ngOnInit() {
diff --git a/client/src/app/kata/kata.component.html b/client/src/app/kata/kata.component.html
index cc8b5b79fb7b35b969e1731e5da5cb80a0a26a1b..26f4e523459977e6e507e8f46a8be221f28fcd83 100644
--- a/client/src/app/kata/kata.component.html
+++ b/client/src/app/kata/kata.component.html
@@ -1,13 +1,15 @@
-<div *ngIf="kata" class="d-flex justify-content-center" style="margin-top:2%">
+<div *ngIf="!error" class="d-flex justify-content-center" style="margin-top:2%">
+  <span *ngIf="katareceived">
   <div class="d-flex flex-column">
-    <div class="p-2 title">{{kata.title}} <a routerLink="/kata-displayer/{{programID}}/{{kata.title}}/{{kata.language}}/{{programSensei}}">- {{programTitle}}</a>
+    <div class="p-2 title">{{kata.title}} <a routerLink="/kata-displayer/{{programID}}">- {{programTitle}}</a>
       <br><span class="subtitle">{{programSensei}} <span class="language"> {{kata.language}}</span></span></div>
 
 
     <div class="p-2 "><label class="header">rules :</label></div>
     <div class="p-2 ">
       <textarea disabled style="text-align: justify">{{kata.rules}}</textarea>
-      <app-terminal-code style="margin-left: 20px;" [code]="kata.canva" [type]="kata.language" (new)="OnNewEvent($event)"></app-terminal-code>
+      <app-terminal-code style="margin-left: 20px;" [code]="kata.canva" [type]="kata.language"
+                         (new)="OnNewEvent($event)"></app-terminal-code>
     </div>
 
     <div class="p-2">
@@ -19,11 +21,16 @@
     <div class="p-2">
 
       <button (click)="compile(kata.language,kata.canva,kata.cassert)" class="code">TRY MY SOLUTION</button>
-      <button  style="margin-right: 10px" class="code">SURRENDER</button>
+      <button style="margin-right: 10px" class="code">SURRENDER</button>
     </div>
   </div>
+    </span>
+  <span *ngIf="!katareceived"><ngx-ui-loader></ngx-ui-loader></span>
+</div>
 
 
+<div *ngIf="error">
+  <app-rnot-found></app-rnot-found>
 </div>
 
 
diff --git a/client/src/app/kata/kata.component.ts b/client/src/app/kata/kata.component.ts
index 766ee5b644dd2947e71fc01a27cf6d4dc02b1121..0c2d97eeb5ab0a1e600b5324438e3855028f1a20 100644
--- a/client/src/app/kata/kata.component.ts
+++ b/client/src/app/kata/kata.component.ts
@@ -1,10 +1,11 @@
 import {Component, OnInit} from '@angular/core';
-import {ActivatedRoute} from '@angular/router';
+import {ActivatedRoute, Router} from '@angular/router';
 import {Location} from '@angular/common';
 import {FetchKataService} from '../fetch-kata.service';
 import {Kata} from './kata';
-import * as $ from 'jquery';
 import {CompilationService} from '../compilation.service';
+import {FetchProgramIdService} from '../fetch-program-id.service';
+import {NgxUiLoaderService} from 'ngx-ui-loader';
 
 @Component({
   selector: 'app-kata',
@@ -14,31 +15,50 @@ import {CompilationService} from '../compilation.service';
 export class KataComponent implements OnInit {
 
   kata: Kata;
-  idKata: number;
+  idKata: string;
   status = 2;
   result = '';
-  programID: number;
-
+  programID: string;
   programTitle: string;
   programSensei: string;
+  error = false;
+
+  katareceived = false;
 
   constructor(
     private route: ActivatedRoute,
     private location: Location,
     private fetchKataService: FetchKataService,
-    private compilationService: CompilationService
+    private compilationService: CompilationService,
+    private fetchProgramDetailsService: FetchProgramIdService,
+    private ngxLoader: NgxUiLoaderService
   ) {
   }
 
   getKata(): void {
-    this.idKata = +this.route.snapshot.paramMap.get('id');
-    this.programID = +this.route.snapshot.paramMap.get('prid');
-    this.programSensei = this.route.snapshot.paramMap.get('sensei');
-    this.programTitle = this.route.snapshot.paramMap.get('prgtitle');
-    this.fetchKataService.getKata(this.programID, this.idKata).subscribe((data: Kata) => {
-      this.kata = data;
+    this.ngxLoader.start();
+    this.programID = this.route.snapshot.paramMap.get('prid');
+    this.fetchProgramDetailsService.getDetails(this.programID).subscribe((data: string[]) => {
+      this.idKata = this.route.snapshot.paramMap.get('id');
+      this.programSensei = data[2];
+      this.programTitle = data[0];
+      this.fetchKataService.getKata(this.programID, this.idKata).subscribe((datas: Kata) => {
+          this.kata = datas;
+          this.ngxLoader.stop();
+          this.katareceived = true;
+        },
+        (error1 => {
+          if (error1.status === 404) {
+            this.ngxLoader.stop();
+            this.error = true;
+          }
+        }));
+    }, error1 => {
+      if (error1.status === 404) {
+        this.ngxLoader.stop();
+        this.error = true;
+      }
     });
-
   }
 
   OnNewEvent(event: any): void {
diff --git a/client/src/app/languages_canvas.ts b/client/src/app/languages_canvas.ts
index 059d8a0ac8f3f345616f00de0201827606156c8e..feb2c781f3139b869d07b105aa3c6bc227a4c54f 100644
--- a/client/src/app/languages_canvas.ts
+++ b/client/src/app/languages_canvas.ts
@@ -9,7 +9,7 @@ export class Canva {
 export const LANG: Canva[] = [
   {
     id: 'python', assertCanva: 'from assertpy import assert_that\nimport sample as m' + '\n\n' +
-      '# Example : assert_that(m.yourfunction(someValues)).is_equal_to(targetedValues)', codeCanva: '# Write your code here'
+      '# Example : \n# assert_that(m.yourfunction(someValues)).is_equal_to(targetedValues)', codeCanva: '# Write your code here'
   },
   {
     id: 'java', assertCanva: 'import static org.junit.Assert.*;\n' +
@@ -17,7 +17,7 @@ export const LANG: Canva[] = [
       'public class Main {\n' +
       '\n' +
       '    public static void main(String[] args) {\n' +
-      '       // Example : assertEquals(Kata.yourfunction(someValues,targetedValues))' +
+      '       // Example : \n// assertEquals(Kata.yourfunction(someValues,targetedValues))' +
       '    }\n' +
       '}', codeCanva: 'public class Kata {\n' +
       '\n' +
diff --git a/client/src/app/program-create/program-create.component.html b/client/src/app/program-create/program-create.component.html
index f8b250a2f8fdd9ccdbe5990f2d9fc92dbf88c392..965078ae41acc11dbb7d46dde9cefb5c6e8d0b50 100644
--- a/client/src/app/program-create/program-create.component.html
+++ b/client/src/app/program-create/program-create.component.html
@@ -8,15 +8,16 @@
     <div class="p-2"><label>Tags</label><input type="text" [(ngModel)]="programTags" placeholder=" arrays,writeable,.."/></div>
     <div class="p-2">
 
-        <input type="button" (click)="createProgram(false)" value="CREATE"/>
-        <input type="button" (click)="createProgram(true)" style="float:right" value="CREATE + NEW KATA"/>
+        <input type="button" (click)="createProgram(false)" class="button" value="CREATE"/>
+        <input type="button" (click)="createProgram(true)" class="button" style="float:right" value="CREATE + NEW KATA"/>
+
     </div>
+
+      <div class="p-2">
+        <input type="button" class="button" style="float:right" value="addad + NEW KATA"/>
+      </div>
     </fieldset>
   </div>
 </div>
-<!-- Material input -->
-<div class="md-form">
-  <i class="fas fa-envelope prefix"></i>
-  <input type="text" id="inputIconEx1" class="form-control">
-  <label for="inputIconEx1">E-mail address</label>
-</div>
+
+
diff --git a/client/src/app/program-create/program-create.component.scss b/client/src/app/program-create/program-create.component.scss
index cf83ab195df81e7130d8591dbee99a63cc5a39b4..3ca9d28a701233ef7282408f2cbbeaf374a8af3d 100644
--- a/client/src/app/program-create/program-create.component.scss
+++ b/client/src/app/program-create/program-create.component.scss
@@ -25,7 +25,7 @@ select {
 label{
   margin-top:.4em;
 }
-
+/*
 input[type=button]{
 
   background-color: rgba(63, 67, 77, 1);
@@ -36,7 +36,7 @@ input[type=button]{
 
 }:focus{
   outline:none;
- }
+ }*/
 
 textarea{
   padding: .6em 1.4em .5em .8em;
diff --git a/client/src/app/program-displayer/program-displayer.component.html b/client/src/app/program-displayer/program-displayer.component.html
index 538a48e93fefbf7f532f14b6e06f945463bc97cc..c71dce0abfd2a79d7a25d07430b0c6ff6c072f5b 100644
--- a/client/src/app/program-displayer/program-displayer.component.html
+++ b/client/src/app/program-displayer/program-displayer.component.html
@@ -1,13 +1,11 @@
-<div class="d-flex justify-content-center"  *ngIf="programs" style="margin-top:2%">
-  <div class="d-flex flex-column">
-    <div class="p-2" style="width:200px"></div>
-    <div class="p-2"><h1>Tous les programmes disponibles : </h1></div>
-
-    <div class="p-2" >
-  <span  *ngFor="let program of programs">
+<div class="d-flex justify-content-center" style="margin-top:2%">
+  <div *ngIf="programs" class="d-flex flex-column">
+    <div class="p-2"><h1>All available programs</h1></div>
+    <div class="p-2">
+  <span *ngFor="let program of programs">
       <div class="card" style="width: 18rem;">
         <div class="card-body">
-          <a routerLink="/kata-displayer/{{program.programID}}/{{program.title}}/{{program.language}}/{{program.sensei}}">
+          <a routerLink="/kata-displayer/{{program.programID}}">
             <h5 class="card-title">{{program.title}}</h5></a>
           <h6 class="card-subtitle mb-2 text-muted"><a class="sensei" href="">{{program.sensei}} </a>
             <a href=""><span class="language">{{program.language}}</span></a></h6>
@@ -22,4 +20,10 @@
   </span>
     </div>
   </div>
+  <div class="d-flex flex-column" *ngIf="programReceivedFailed">
+    <div class="p-2">
+      <h1>Oops.. no program available ..</h1>
+    </div>
+    <h2><a routerLink="/program_create">Create a new program</a></h2>
+  </div>
 </div>
diff --git a/client/src/app/program-displayer/program-displayer.component.ts b/client/src/app/program-displayer/program-displayer.component.ts
index 54c239a3747b3e646d7d7babb278b045a642b946..fff044fd0268ee455d125f07aaabca4eafbf54fa 100644
--- a/client/src/app/program-displayer/program-displayer.component.ts
+++ b/client/src/app/program-displayer/program-displayer.component.ts
@@ -11,12 +11,20 @@ export class ProgramDisplayerComponent implements OnInit {
 
 
   programs: Program[];
+  programReceivedFailed = false;
 
   constructor(private fetchProgramService: FetchProgramService) {
   }
 
   getProgram(): void {
-    this.fetchProgramService.getPrograms().subscribe((data: Program[]) => this.programs = data);
+    this.fetchProgramService.getPrograms().subscribe((data: Program[]) => {
+      this.programs = data;
+
+    }, error1 => {
+      if (error1.status === 404) {
+        this.programReceivedFailed = true;
+      }
+    });
   }
 
   ngOnInit() {
diff --git a/client/src/app/rnot-found/rnot-found.component.css b/client/src/app/rnot-found/rnot-found.component.css
new file mode 100644
index 0000000000000000000000000000000000000000..8b137891791fe96927ad78e64b0aad7bded08bdc
--- /dev/null
+++ b/client/src/app/rnot-found/rnot-found.component.css
@@ -0,0 +1 @@
+
diff --git a/client/src/app/rnot-found/rnot-found.component.html b/client/src/app/rnot-found/rnot-found.component.html
new file mode 100644
index 0000000000000000000000000000000000000000..c28773ee2a059ac0b0b35c4898bc1ceaa9cce62a
--- /dev/null
+++ b/client/src/app/rnot-found/rnot-found.component.html
@@ -0,0 +1,2 @@
+<span class="NOTFOUND">SERVER ERROR: 404 NOT FOUND</span>
+
diff --git a/client/src/app/rnot-found/rnot-found.component.spec.ts b/client/src/app/rnot-found/rnot-found.component.spec.ts
new file mode 100644
index 0000000000000000000000000000000000000000..9b1d2803d5e65621ffce7df6a77a7e3130b980db
--- /dev/null
+++ b/client/src/app/rnot-found/rnot-found.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { RNotFoundComponent } from './rnot-found.component';
+
+describe('RNotFoundComponent', () => {
+  let component: RNotFoundComponent;
+  let fixture: ComponentFixture<RNotFoundComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ RNotFoundComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(RNotFoundComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/client/src/app/rnot-found/rnot-found.component.ts b/client/src/app/rnot-found/rnot-found.component.ts
new file mode 100644
index 0000000000000000000000000000000000000000..c25c95fe769d6a886cf25a419c93fa37827c5e3c
--- /dev/null
+++ b/client/src/app/rnot-found/rnot-found.component.ts
@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-rnot-found',
+  templateUrl: './rnot-found.component.html',
+  styleUrls: ['./rnot-found.component.css']
+})
+export class RNotFoundComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}
diff --git a/client/src/styles.scss b/client/src/styles.scss
index 7e7239a2eeea2a25f548d2e04302921d28c2a27e..126847dcd56caf69e93ae2323d7dbcff1ad064cd 100644
--- a/client/src/styles.scss
+++ b/client/src/styles.scss
@@ -1,4 +1,28 @@
 /* You can add global styles to this file, and also import other style files */
 
-html, body { height: 100%; }
-body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; }
+html, body {
+  height: 100%;
+  --color-cloud: rgba(236, 240, 241, 1);
+  --color-dark-blue: rgba(43, 47, 57, 1);
+  --color-light-blue: rgba(63, 67, 77, 1);
+}
+
+body {
+  margin: 0;
+  font-family: Roboto, "Helvetica Neue", sans-serif;
+}
+
+.NOTFOUND {
+  color: rgba(83, 87, 97, 1);
+  font-size: 50px;
+}
+
+.button {
+  background-color: var(--color-light-blue) ;
+  border: 0;
+  padding: .4em .7em .4em .7em;
+  border-radius: .4em;
+  color: var(--color-cloud);
+  border:3px solid var(--color-cloud);
+
+}
diff --git a/tests/serveur_compilation/server_rest/src/main/java/LiveDB.java b/tests/serveur_compilation/server_rest/src/main/java/LiveDB.java
index 334fe38ff8104a1fc70a004fd13eb3f46bc02069..2d8063ca68214f7d5b14668a8289e1b9bb96a63b 100644
--- a/tests/serveur_compilation/server_rest/src/main/java/LiveDB.java
+++ b/tests/serveur_compilation/server_rest/src/main/java/LiveDB.java
@@ -60,4 +60,18 @@ public class LiveDB extends ProgramsDataBase {
         return ktsc;
     }
 
+    public ArrayList<String> getProgramDetailsByID(String id){
+        ArrayList<String> infos = new ArrayList<>();
+
+        for (Program p : this.programs)
+            if(p.getId().equals(id)){
+                infos.add(p.getTitle());
+                infos.add(p.getLanguage());
+                infos.add(p.getSensei());
+                break;
+            }
+
+        return infos;
+    }
+
 }
\ No newline at end of file
diff --git a/tests/serveur_compilation/server_rest/src/main/java/ProgramsDataBase.java b/tests/serveur_compilation/server_rest/src/main/java/ProgramsDataBase.java
index fdd800aa856550ded904d8821df1e384285c7123..f0ece141928330037e3ac090d576d52dd302316e 100644
--- a/tests/serveur_compilation/server_rest/src/main/java/ProgramsDataBase.java
+++ b/tests/serveur_compilation/server_rest/src/main/java/ProgramsDataBase.java
@@ -6,4 +6,5 @@ public abstract class ProgramsDataBase {
     public abstract ArrayList<ProgramShowCase> getProgramsDetails();
     public abstract Kata getProgramKata(String programID, String kataID);
     public abstract ArrayList<KataShowCase> getProgramKatasDetails(String programID);
+    public abstract ArrayList<String> getProgramDetailsByID(String id);
 }
diff --git a/tests/serveur_compilation/server_rest/src/main/java/app.java b/tests/serveur_compilation/server_rest/src/main/java/app.java
index 7e406b846374273ec46a0c856fc01d2c99004ddb..a30622df207525a986be370534baa6983b50d856 100644
--- a/tests/serveur_compilation/server_rest/src/main/java/app.java
+++ b/tests/serveur_compilation/server_rest/src/main/java/app.java
@@ -5,6 +5,7 @@ import java.io.*;
 import java.net.ConnectException;
 import java.net.HttpURLConnection;
 import java.net.URL;
+import java.util.ArrayList;
 
 public class app {
 
@@ -66,15 +67,33 @@ public class app {
         });
 
         app.get("/program/getdetails", ctx -> {
-            ctx.json(db.getProgramsDetails());
+            ArrayList<ProgramShowCase> prgsc = db.getProgramsDetails();
+            if (prgsc.size() == 0)
+                ctx.status(404);
+            else
+                ctx.json(prgsc);
         });
 
         app.get("/program/getkatas/details/:id", ctx -> {
-            ctx.json(db.getProgramKatasDetails(ctx.pathParam("id")));
+            ArrayList<KataShowCase> ktsc = db.getProgramKatasDetails(ctx.pathParam("id"));
+            ctx.json(ktsc);
         });
 
         app.get("/program/getkata/:prid/:id", ctx -> {
-            ctx.json(db.getProgramKata(ctx.pathParam("prid"),ctx.pathParam("id")));
+
+            Kata kata = db.getProgramKata(ctx.pathParam("prid"), ctx.pathParam("id"));
+            if (kata.getId() == null)
+                ctx.status(404);
+            else
+                ctx.json(kata);
+        });
+
+        app.get("program/getdetails/:id", ctx -> {
+            ArrayList<String> s = db.getProgramDetailsByID(ctx.pathParam("id"));
+            if (s.size() == 0)
+                ctx.status(404);
+            else
+                ctx.json(s);
         });
 
     }
diff --git a/tests/serveur_compilation/server_rest/target/classes/LiveDB.class b/tests/serveur_compilation/server_rest/target/classes/LiveDB.class
index e7abcb7ca81754ed034a5c3e5f1f504b1f140e3f..ab6ebb636dbde39b1bc15d10352aff1beab6f9e2 100644
Binary files a/tests/serveur_compilation/server_rest/target/classes/LiveDB.class and b/tests/serveur_compilation/server_rest/target/classes/LiveDB.class differ
diff --git a/tests/serveur_compilation/server_rest/target/classes/ProgramsDataBase.class b/tests/serveur_compilation/server_rest/target/classes/ProgramsDataBase.class
index bcfdd67e6dde0c9b6d912f6e36b8665e556f522d..4f73f058ad7f7eb5a64a9773bbba0c50cc4f7ed6 100644
Binary files a/tests/serveur_compilation/server_rest/target/classes/ProgramsDataBase.class and b/tests/serveur_compilation/server_rest/target/classes/ProgramsDataBase.class differ
diff --git a/tests/serveur_compilation/server_rest/target/classes/app.class b/tests/serveur_compilation/server_rest/target/classes/app.class
index b6aa526cb48f6549b6af307f8969b230ef95c720..1c9802a0ba2547a05908d5756ebce45a16bfac3e 100644
Binary files a/tests/serveur_compilation/server_rest/target/classes/app.class and b/tests/serveur_compilation/server_rest/target/classes/app.class differ