diff --git a/package.json b/package.json
index 49328f4..49ae669 100644
--- a/package.json
+++ b/package.json
@@ -3,12 +3,15 @@
   "version": "0.0.0",
   "scripts": {
     "ng": "ng",
-    "start": "concurrently \"ng serve\" \"nodemon ./server/bin/www\"",
+    "start": "concurrently \"ng serve\" \"DEBUG=HHFSBRS:* nodemon ./server/bin/www\"",
     "build": "ng build",
     "test": "ng test",
     "lint": "ng lint",
     "e2e": "ng e2e"
   },
+  "nodemonConfig": {
+    "ignore": ["*.json"]
+  },
   "private": true,
   "dependencies": {
     "@angular/animations": "~8.2.11",
diff --git a/server/.gitignore b/server/.gitignore
new file mode 100644
index 0000000..2c1117b
--- /dev/null
+++ b/server/.gitignore
@@ -0,0 +1 @@
+secret.js
\ No newline at end of file
diff --git a/server/database/confirmations.json b/server/database/confirmations.json
index b4f5feb..9e26dfe 100644
--- a/server/database/confirmations.json
+++ b/server/database/confirmations.json
@@ -1 +1 @@
-{"i6bxw12wk2k5lzpk":{"number":32,"timestamp":1572855599882,"message":"Henl"}}
\ No newline at end of file
+{}
\ No newline at end of file
diff --git a/server/database/data.json b/server/database/data.json
index 954efb3..2e8b000 100644
--- a/server/database/data.json
+++ b/server/database/data.json
@@ -1 +1 @@
-[false,false,false,true,false,false,false,false,false,false,false,false,true,false,false,false,false,false,false,true,false,false,false,false,true,false,false,false,false,false,false,true,false,false,false,false,false,true,false,false,false,false,false,false,false,false,false,false,false,true,false,false,false,false,false,false,false,false,false,true,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,true,false,false,false,false,false,false,false,false,false,false,false,false,false]
+[false,false,false,true,false,true,false,false,false,false,false,false,true,false,false,false,false,false,false,true,false,false,false,false,true,false,false,false,false,false,false,true,false,false,false,false,false,true,false,false,false,false,false,false,false,false,false,false,false,true,false,false,false,false,false,false,false,false,false,true,false,false,false,false,false,false,false,false,false,false,false,false,false,false,true,false,false,false,false,false,false,false,false,false,false,false,true,false,false,false,false,false,false,false,false,false,false,false,false,false]
\ No newline at end of file
diff --git a/server/routes/mail.js b/server/routes/mail.js
index d298485..8f79396 100644
--- a/server/routes/mail.js
+++ b/server/routes/mail.js
@@ -8,11 +8,11 @@ const secret = require('../secret');
 var router = express.Router();
 const confirmationsPath = '../database/confirmations.json';
 const transporter = nodemailer.createTransport({
-  host: "smtp.office365.com",
-  port: 587,
-  secure: false, // upgrade later with STARTTLS
+  host: "jobbel.nl",
+  port: 465,
+  secure: true, // upgrade later with STARTTLS
   auth: {
-    user: "heerenlandencollege@gmail.com",
+    user: "job",
     pass: secret
   }
 });
@@ -61,7 +61,7 @@ router.post('/', (req, res, _next) => {
   //   `,
 
   var mailOptions = {
-    from: 'Surprise box team van Het Heerenlanden',
+    from: 'Het Surprise box team van Het Heerenlanden <job@jobbel.nl>',
     to: req.body.email,
     subject: `Aanvraag voor surprise box ${req.body.number}`,
     html: `
@@ -81,10 +81,10 @@ router.post('/', (req, res, _next) => {
       `
   };
 
-  transporter.sendMail(mailOptions, function(error, info){
+  transporter.sendMail(mailOptions, (error, info) => {
     if (error) {
       // Notify the front-end
-      res.json({result: {success: false, data: err}});
+      res.json({result: {success: false, data: error}});
     } else {
 
       // Add the user's data to the database identified by the id.
@@ -101,7 +101,7 @@ router.post('/', (req, res, _next) => {
         }
       })
       // Notify the front-end
-      res.json({result: {success: true, data: reply}});
+      res.json({result: {success: true, data: info}});
     }
   });
 });
@@ -119,18 +119,46 @@ router.get('/validate/:id', (req, res, _next) => {
 
     // send success result
     // res.json({result: {success: true, data: data[id].number}});
-    res.render('validate-success', {number: data[id].number})
 
-    // Delete the record
-    delete data[id];
-    writeJsonFile(confirmationsPath, data);
+    var mailOptions = {
+      from: 'HHFSBRS <job@jobbel.nl>',
+      to: 'job@jobbel.nl',
+      subject: `Aanvraag voor surprise box ${data[id].number}`,
+      html: `
+          <html>
+            <body>
+              <p>Beste Simone,</p>
+              <p>
+                ${data[id].name} heeft surprise box ${data[id].number} aangevraagd op ${new Date(data[id].timestamp).toUTCString()}.
+                Het bericht luidt: ${data[id].message}
+              </p>
 
-    // Process the email to doemiddag.hetheerenlanden@cvo-av.nl
-    // And set the corresponding records in data.json to 'Gereserveerd'
+              <p>Met vriendelijk groet,<br> het computersysteem van Job en Arne</p>
+            </body>
+          </html>
+        `
+    };
 
-    let boxes = readJsonFile('../database/data.json');
-    boxes[Number(data[id].number)] = true;
-    writeJsonFile('../database/data.json', boxes);
+    transporter.sendMail(mailOptions, (error, info) => {
+      if (error) {
+        // Notify the front-end
+        res.json({result: {success: false, data: error}});
+      } else {
+
+        // And set the corresponding records in data.json to 'Gereserveerd'
+        let boxes = readJsonFile('../database/data.json');
+        boxes[Number(data[id].number) - 1] = true;
+        console.log(boxes);
+        writeJsonFile('../database/data.json', boxes);
+
+        res.render('validate-success', {number: data[id].number})
+
+        // Delete the record
+        delete data[id];
+        writeJsonFile(confirmationsPath, data);
+
+      }
+    });
 
   } else {
     // Else if the id is found but the time is expired
diff --git a/server/sendmail.js b/server/sendmail.js
deleted file mode 100644
index b9b98a8..0000000
--- a/server/sendmail.js
+++ /dev/null
@@ -1,38 +0,0 @@
-const nodemailer = require('nodemailer');
-const secret = require('./secret');
-
-const transporter = nodemailer.createTransport({
-  host: "smtp.gmail.com",
-  port: 587,
-  secure: false, // upgrade later with STARTTLS
-  auth: {
-    user: "heerenlandencollege@gmail.com",
-    pass: secret
-  }
-});
-
-var mailOptions = {
-  from: 'Surprise box team van Het Heerenlanden',
-  to: 'aardtaart1@gmail.com',
-  subject: `Aanvraag voor surprise box `,
-  html: `
-      <html>
-        <body>
-          <p>Beste ,</p>
-          <p>
-            Deze email is verzonden omdat u surprise box  voor de kerstmarkt van Het Heerenlanden heeft aangevraagd.<br>
-            Om uw aanvraag te bevestigen, moet u om de volgende link klikken:<br>
-            <a href='http://localhost:3000/mail/validate/'>http://localhost:3000/mail/validate/</a><br>
-            Deze link verloopt na één uur.
-          </p>
-
-          <p>Met vriendelijk groet,<br> het surprise box team van Het Heerenlanden</p>
-        </body>
-      </html>
-    `
-};
-
-transporter.sendMail(mailOptions, function(error, info){
-  if (error) console.log(error)
-  console.log(info)
-});
diff --git a/src/app/app.component.html b/src/app/app.component.html
index f455580..d1f3e2c 100644
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -1,7 +1,10 @@
     <nav>
         <!-- nav here -->
-        <span>Surprise box reserveren</span>
-        <a routerLink="login"><fa-icon [icon]="faSignInAlt"></fa-icon></a>
+        <span><a routerLink="">Surprise box reserveren</a></span>
+        <a *ngIf="!loggedIn" routerLink="login">
+            <fa-icon [icon]="faSignInAlt"></fa-icon>
+            <span>Log in</span>
+        </a>
     </nav>
     <main>
         <div class="overlay" *ngIf="form.visible"></div>
diff --git a/src/app/app.component.scss b/src/app/app.component.scss
index 8271b68..b9aaf78 100644
--- a/src/app/app.component.scss
+++ b/src/app/app.component.scss
@@ -26,7 +26,7 @@ nav {
     color: white;
     background-color: rgba(0,0,0,0.25);
     position: relative;
-    span {
+    span > a {
         font-family: 'Staatliches', cursive;
         position: absolute;
         top: 50%;
@@ -36,7 +36,7 @@ nav {
         width: max-content;
     }
     a {
-        text-decoration: none;
+        // text-decoration: none;
         color: white;
         cursor: pointer;
         position: absolute;
@@ -47,10 +47,15 @@ nav {
         fa-icon {
             padding: 5px;
         }
+        span {
+            display: none;
+        }
     }
     @media screen and (min-width: 600px) {
-        a::after {
-            content: "Login";
+        a {
+            span {
+                display: inline;
+            }
         }
     }
 }
@@ -58,7 +63,7 @@ nav {
 main {
     padding: 16px;
     margin: 20px;
-    height: min-content;
+    min-height: calc(100vh - 64px - 72px);
     border-radius: 1em;
     background-color: #ffffff;
     text-align: center;
diff --git a/src/app/components/form/form.component.html b/src/app/components/form/form.component.html
index 3193ec4..be22f07 100644
--- a/src/app/components/form/form.component.html
+++ b/src/app/components/form/form.component.html
@@ -3,9 +3,7 @@
   <fa-icon (click)="formService.hideForm()" [icon]="faTimes"></fa-icon>
 
   <form *ngIf="!submitted" [formGroup]="form" (ngSubmit)="onSubmit()">
-
-    <h4>Formulier voor surpise box {{ number }}</h4>
-
+    <span class="header">Formulier voor surpise box {{ number }}</span>
     <label for="name">Naam: </label>
     <input type="text" formControlName="name"><br>
 
@@ -20,7 +18,7 @@
   </form>
 
   <div *ngIf="submitted">
-    <h4>Uw aanvraag is ingediend</h4>
+    <span class="header">Uw aanvraag is ingediend</span>
     <p>Check uw mailbox om uw aanvrag te valideren. Als u de mail niet kan vinden, check dan ook uw spam.</p>
   </div>
 
diff --git a/src/app/components/form/form.component.scss b/src/app/components/form/form.component.scss
index 72536e1..e58b2e7 100644
--- a/src/app/components/form/form.component.scss
+++ b/src/app/components/form/form.component.scss
@@ -1,16 +1,39 @@
 .container {
   background: white;
-  position: absolute;
+  position: fixed;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
-  padding-bottom: 20px;
+  padding: 3em 2em 1em 2em;
+  border-radius: 0.5em;
+
+  span.header {
+    position: absolute;
+    font-weight: bold;
+    text-decoration: underline;
+    top: 0.6em;
+    left: 1em;
+    width: calc(100% - 50px);
+  }
+
+  form {
+    label {
+      float: left;
+      margin: 5px;
+    }
+    textarea, input {
+      border: 1px solid grey;
+      border-radius: 3px;
+      padding: 0.25em;
+      margin: 5px;
+      float: right;
+    }
+  }
 
   fa-icon {
-    position: relative;
-    float: right;
-    padding-right: 10px;
-    padding-top: 10px;
+    position: absolute;
     cursor: pointer;
+    top: 0.6em;
+    right: 1em;
   }
 }
diff --git a/src/app/components/home/home.component.html b/src/app/components/home/home.component.html
index 6cfc113..d126dc0 100644
--- a/src/app/components/home/home.component.html
+++ b/src/app/components/home/home.component.html
@@ -10,8 +10,9 @@
             Je kan je box op 28 november ophalen en betalen.
         </p>
         <div>
-            <span *ngIf="loggedIn" (click)="logout()">Log uit</span>
-            <div class="container" *ngIf="!loggedIn && (data | async) as data">
+
+            <span class="logout" *ngIf="loggedIn" (click)="logout()">Log uit</span>
+            <div class="container" *ngIf="!loggedIn && data">
               <div *ngFor="let item of data.result.data; let i = index">
                 <!-- [href]="item ? '' : ('mailto:doemiddag.hetheerenlanden@cvo-av.nl?subject=Reservatie Surprise box ' + (i + 1))" -->
                 <a [class]="item && 'disabled'" (click)="!item && form.showForm(i + 1)">
@@ -23,8 +24,8 @@
               </div>
             </div>
 
-            <div class="container" *ngIf="loggedIn && (data | async) as data">
-              <div *ngFor="let item of data.data; let i = index">
+            <div class="container" *ngIf="loggedIn">
+              <div *ngFor="let item of data.result.data; let i = index">
                 <button (click)="updateItem(i)">{{ i + 1 }}. {{ item ? 'Gereserveerd' : 'Niet gereserveerd' }}</button>
               </div>
             </div>
diff --git a/src/app/components/home/home.component.scss b/src/app/components/home/home.component.scss
index bda9e1f..bcba20c 100644
--- a/src/app/components/home/home.component.scss
+++ b/src/app/components/home/home.component.scss
@@ -88,4 +88,10 @@
             }
 
         }
+        span.logout {
+            border: 1px solid grey;
+            border-radius: 3px;
+            padding: 0.25em;
+            margin: 5px;
+        }
     }
diff --git a/src/app/components/home/home.component.ts b/src/app/components/home/home.component.ts
index 58c5268..8e4bb2d 100644
--- a/src/app/components/home/home.component.ts
+++ b/src/app/components/home/home.component.ts
@@ -1,5 +1,4 @@
 import { Component, OnInit } from '@angular/core';
-import { Observable } from 'rxjs';
 import { ApiData, DataService } from 'src/app/services/data.service';
 import { Router } from '@angular/router';
 import { faGift } from '@fortawesome/free-solid-svg-icons';
@@ -14,7 +13,7 @@ export class HomeComponent implements OnInit {
 
   faGift = faGift;
 
-  data: Observable<ApiData>;
+  data: ApiData;
   loggedIn: boolean;
 
   constructor(
@@ -24,7 +23,7 @@ export class HomeComponent implements OnInit {
   ) { }
 
   ngOnInit() {
-    this.data = this.dataService.getData();
+    this.dataService.getData().subscribe(res => this.data = res);
 
     const username = localStorage.getItem('username');
     const password = localStorage.getItem('password');
@@ -35,7 +34,7 @@ export class HomeComponent implements OnInit {
     const username = localStorage.getItem('username');
     const password = localStorage.getItem('password');
 
-    this.dataService.update(index, username, password).subscribe(res => this.data = this.dataService.getData());
+    this.dataService.update(index, username, password).subscribe(res => this.dataService.getData().subscribe(res2 => this.data = res2));
   }
 
   logout() {
diff --git a/src/app/components/login/login.component.html b/src/app/components/login/login.component.html
index 3c70198..b2cb2bd 100644
--- a/src/app/components/login/login.component.html
+++ b/src/app/components/login/login.component.html
@@ -1,9 +1,12 @@
+<h3>Login</h3>
 <div class="alert" *ngIf="alert">
   De combinatie van de gebruikersnaam en wachtwoord is niet herkend.
 </div>
 
 <form [formGroup]="form" (ngSubmit)="onSubmit()">
-  <input formControlName="username" type="text">
-  <input formControlName="password" type="password">
+  <label for="username">Gebruikersnaam:</label><br>
+  <input formControlName="username" type="text"><br>
+  <label for="password">Wachtwoord:</label><br>
+  <input formControlName="password" type="password"><br>
   <input type="submit" value="Login!">
 </form>
diff --git a/src/app/components/login/login.component.scss b/src/app/components/login/login.component.scss
index e69de29..43e3fa8 100644
--- a/src/app/components/login/login.component.scss
+++ b/src/app/components/login/login.component.scss
@@ -0,0 +1,8 @@
+form {
+    textarea, input {
+      border: 1px solid grey;
+      border-radius: 3px;
+      padding: 0.25em;
+      margin: 5px;
+    }
+  }
\ No newline at end of file