diff --git a/locales/en.json b/locales/en.json
index 2889d7c..9367764 100644
--- a/locales/en.json
+++ b/locales/en.json
@@ -31,7 +31,9 @@
 		"day": "Day",
 		"pay": "Pay",
 		"payment": "Payment method",
-		"creditCard": "Credit card"
+		"creditCard": "Credit card",
+		"chooseDepartment": "Choose your department",
+		"chooseSandwich": "Choose your sandwich"
 	},
 	"login": {
 		"title": "Login",
diff --git a/locales/fr.json b/locales/fr.json
index 3e19a57..ed404e9 100644
--- a/locales/fr.json
+++ b/locales/fr.json
@@ -31,7 +31,9 @@
 		"day": "Jour",
 		"pay": "Payer",
 		"payment": "Mode de paiement",
-		"creditCard": "CB"
+		"creditCard": "CB",
+		"chooseDepartment": "Choisissez votre département",
+		"chooseSandwich": "Choisissez votre sandwiche"
 	},
 	"login": {
 		"title": "Se connecter",
diff --git a/public/javascripts/index.js b/public/javascripts/index.js
index fd3ecb6..e393aa4 100644
--- a/public/javascripts/index.js
+++ b/public/javascripts/index.js
@@ -1,37 +1,52 @@
-const orderAction = document.getElementById("order-action");
-const rmButton = document.getElementById("remove-order");
+const orders = document.getElementById("orders");
+const sandwich = document.getElementById("sandwich");
+const day = document.getElementById("day");
 const locals = {
-    order: document.querySelector("#order1>h2").innerHTML.replace(" 1", ""),
-    sandwich: document.querySelector("label[for='sandwich1']").innerHTML,
-    day: document.querySelector("label[for='day1']").innerHTML
+    sandwich: document.querySelector("#oderCreator label").innerHTML,
+    date: document.querySelector("label[for=day]").innerHTML
 };
-const [min, max] = [document.getElementById("day1").min, document.getElementById("day1").max];
 
 function lastOrderId() {
-    let list = document.querySelectorAll("div.order h2");
-    return parseInt(list[list.length-1].innerText.replace(locals.order+" ", ""));
+    if (orders.lastChild)
+        return parseInt(orders.lastChild.id.replace("order", ""));
+    return 0;
 }
 
-document.getElementById("add-order").addEventListener("click", () => {
+document.getElementById("addOrder").addEventListener("click", () => {
+    if (!sandwich.value || !day.value)
+        return;
+
     let id = lastOrderId() + 1;
-    orderAction.insertAdjacentHTML("beforebegin", `<div id="order${id}" class="order">
-    <h2>${locals.order} ${id}</h2>
-    <div class="field">
+
+    //ToDo submit button check
+
+    orders.insertAdjacentHTML("beforeend", `<div id="order${id}" class="row">
+    <div class="input-field col s6">
+        <input id="sandwich${id}" type="text" name="sandwiches[${id}]" value="${sandwich.value}" readonly required>
         <label for="sandwich${id}">${locals.sandwich}</label>
-        <span class="list_arrow"><input id="sandwich${id}" type="list" list="sandwich-list" name="sandwiches[${id}]" autocomplete="off" required></span>
     </div>
-    <div class="field">
-        <label for="day${id}">${locals.day}</label>
-        <input id="da${id}y" type="date" min="${min}" max="${max}" name="dates[${id}]" required>
+    <div class="input-field col s6">
+        <input id="date${id}" type="date" name="dates[${id}]" value="${day.value}" readonly required>
+        <label for="date${id}">${locals.day}</label>
     </div>
+    <a class="btn-floating btn-large waves-effect waves-light red"><i class="material-icons">remove</i></a>
 </div>`);
-    document.getElementById("order"+lastOrderId()).scrollIntoView({behavior: "smooth"});
-    rmButton.classList.remove("hide");
+
+    sandwich.selectedIndex = 0;
+    day.value = "";
+
+    let order = document.getElementById("order"+id);
+    order.querySelector("a").addEventListener("click", () => {
+        order.remove();
+        if (lastOrderId() === 0) {
+            sandwich.required = true;
+            day.required = true;
+        }
+    });
+
+    document.getElementById("order"+id).scrollIntoView({behavior: "smooth"});
 });
 
-rmButton.addEventListener("click", () => {
-    let id = lastOrderId();
-    document.getElementById("order"+id).remove();
-    if (id === 2)
-        rmButton.classList.add("hide");
+document.querySelector("form").addEventListener("submit", () => {
+    return lastOrderId();
 });
diff --git a/public/javascripts/layout.js b/public/javascripts/layout.js
index 0e6bc79..7dbd804 100644
--- a/public/javascripts/layout.js
+++ b/public/javascripts/layout.js
@@ -23,7 +23,7 @@ dark.addEventListener("click", () => {
 });
 
 document.addEventListener("DOMContentLoaded", function() {
-    M.Sidenav.init(document.querySelectorAll(".sidenav"));
+    M.AutoInit();
 });
 
 function cb(token) {
diff --git a/views/index.pug b/views/index.pug
index 57752db..4f1787b 100644
--- a/views/index.pug
+++ b/views/index.pug
@@ -1,49 +1,55 @@
 extends layout
 
 block content
-  div.card
-    h1= title
-    p=__("index.welcome")
-    form#order(action="/order" method="POST")
-      div.field
-        label(for="department")=__("department")+":"
-        +list("department", "department-list", "department", user ? user.DepartmentName : "", "off", true)
-        datalist#department-list
-          each department in departments
-            option(value=department.name)
+  div.container
+    h4.center=__("index.welcome")
+    div.row
+      form#order.col.s12(action="/order" method="POST")
+        div.row
+          div.input-field.col.s12
+            select(name="department" required)
+              option(value="" disabled selected hidden)=__("index.chooseDepartment")
+              each department in departments
+                option(value=department.name)=department.name
+            label=__("department")+":"
 
-      div.field
-        label(for="firstname")=__("firstName")+":"
-        input#firstname(type="text" name="firstName" value=user ? user.firstName : "" required)
-      div.field
-        label(for="lastname")=__("lastName")+":"
-        input#lastname(type="text" name="lastName" value=user ? user.lastName : "" required)
+        div.row
+          div.input-field.col.s6
+            input#firstname(type="text" name="firstName" value=user ? user.firstName : "" required)
+            label(for="firstname")=__("firstName")+":"
+          div.input-field.col.s6
+            input#lastname(type="text" name="lastName" value=user ? user.lastName : "" required)
+            label(for="lastname")=__("lastName")+":"
 
-      div#order1.order
-        h2=__("order")+" 1"
-        div.field
-          label(for="sandwich1")=__("sandwich")+":"
-          +list("sandwich1", "sandwich-list", "sandwiches[1]", "", "off", true)
-        div.field
-          label(for="day1")=__("index.day")+":"
-          input#day1(type="date" min=date.firstDate ? date.firstDate : "" max=date.lastDate ? date.lastDate : "" name="dates[1]" required)
+        div#oderCreator.row
+          h5=__("order")
+          div.input-field.col.s6
+            select#sandwich
+              option(value="" disabled selected hidden)=__("index.chooseSandwich")
+              each sandwich in sandwiches
+                option(value=sandwich.name)=sandwich.name
+            label=__("sandwich")+":"
+          div.input-field.col.s6
+            input#day(type="date" min=date.firstDate ? date.firstDate : "" max=date.lastDate ? date.lastDate : "")
+            label(for="day")=__("index.day")+":"
+          a#addOrder.btn-floating.btn-large.waves-effect.waves-light.blue: i.material-icons add
 
-      div#order-action
-        a#add-order +
-        a#remove-order.hide -
+        div#orders
 
-      h3=__("index.payment")
-      div.field.buttons
-        label(for="lyf_pay") LyfPay
-        input#lyf_pay(type="radio" name="payment" value="lyfPay" checked)
-        label(for="credit_card")=__("index.creditCard")
-        input#credit_card(type="radio" name="payment" value="creditCard")
+        div.row
+          h5=__("index.payment")
+            div.col.s12
+              p
+                label
+                  input(type="radio" name="payment" value="lyfPay" checked)
+                  span LyfPay
+              p
+                label
+                  input(type="radio" name="payment" value="creditCard")
+                  span=__("index.creditCard")
 
-      div.field
-        +submit(value=__("index.pay"))
-
-      datalist#sandwich-list
-        each sandwich in sandwiches
-          option(value=sandwich.name)
+        div.row.center
+          div.input-field.col.s12
+            +submit(__("index.pay"))
 
   script(src="/javascripts/index.js")
diff --git a/views/layout.pug b/views/layout.pug
index 57aa2b3..912f7cd 100644
--- a/views/layout.pug
+++ b/views/layout.pug
@@ -6,7 +6,7 @@ html
     title= title
     link(rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons")
     link(rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css")
-    link(rel="stylesheet" href="/stylesheets/style.css")
+    //link(rel="stylesheet" href="/stylesheets/style.css")
     meta(name="viewport" content="width=device-width, initial-scale=1.0")
   body
     mixin nav
@@ -31,72 +31,72 @@ html
       ul#mobile-nav.sidenav
         +nav
 
-    div.hide
-      block content
+    block content
 
-    div#more
-      a=__("layout.about")
-      a=__("contact")
+    .hide
+      div#more
+        a=__("layout.about")
+        a=__("contact")
 
-    div#dark.hide
-    div#about.popup.card.hide
-      h1=__("layout.about")
-      p=__("layout.aboutDescription")
-      div.images
-        div
-          img(src="/images/logoBio.png")
-          p=__("layout.bio")
-        div
-          img(src="/images/logoChimie.png")
-          p=__("layout.chemistry")
-        div
-          img(src="/images/logoGC.png")
-          p=__("layout.GC")
-        div
-          img(src="/images/logoGCGP.png")
-          p=__("layout.GCPD")
-        div
-          img(src="/images/logoGEA.png")
-          p=__("layout.GEA")
-        div
-          img(src="/images/logoInfo.png")
-          p=__("layout.IT")
-      p.before-link=__("layout.made")
-        a(href="https://www.linkedin.com/in/florian-charlaix" target="_blank") Florian Charlaix
-      p.before-link=__("layout.powered")
-        a(href="https://sapinet.fr" target="_blank") Sapinet
-    div#contact.popup.card.hide
-      h1=__("contact")
-      form(action="/contact" method="POST")
-        div.cont
+      div#dark.hide
+      div#about.popup.card.hide
+        h1=__("layout.about")
+        p=__("layout.aboutDescription")
+        div.images
+          div
+            img(src="/images/logoBio.png")
+            p=__("layout.bio")
+          div
+            img(src="/images/logoChimie.png")
+            p=__("layout.chemistry")
+          div
+            img(src="/images/logoGC.png")
+            p=__("layout.GC")
+          div
+            img(src="/images/logoGCGP.png")
+            p=__("layout.GCPD")
+          div
+            img(src="/images/logoGEA.png")
+            p=__("layout.GEA")
+          div
+            img(src="/images/logoInfo.png")
+            p=__("layout.IT")
+        p.before-link=__("layout.made")
+          a(href="https://www.linkedin.com/in/florian-charlaix" target="_blank") Florian Charlaix
+        p.before-link=__("layout.powered")
+          a(href="https://sapinet.fr" target="_blank") Sapinet
+      div#contact.popup.card.hide
+        h1=__("contact")
+        form(action="/contact" method="POST")
+          div.cont
+            div.field
+              label(for="firstNameContact")="* "+__("firstName")
+              input#firstNameContact(type="text" name="firstName" value=user?user.firstName:"" required)
+            div.field
+              label(for="lastNameContact")="* "+__("lastName")
+              input#lastNameContact(type="text" name="lastName" value=user ? user.lastName : "" required)
+          div.cont
+            div.field
+              label(for="emailContact")="* "+__("email")
+              input#emailContact(type="email" name="email" value=user ? user.email : "" required)
+            div.field
+              label(for="phoneNumberContact")=__("layout.phoneNumber")
+              input#phoneNumberContact(type="tel" name="phoneNumber")
           div.field
-            label(for="firstNameContact")="* "+__("firstName")
-            input#firstNameContact(type="text" name="firstName" value=user?user.firstName:"" required)
+            label(for="subjectContact")="* "+__("layout.subject")
+            +list("subjectContact", "subjectContactList", "subject", "", "off", true)
+            datalist#subjectContactList
+              option(value=__("layout.commandEdit"))
+              option(value=__("layout.commandRemove"))
+              option(value=__("layout.question"))
+              option(value=__("layout.profile"))
+              option(value=__("layout.other"))
+          p=__("layout.warnMessage")
+          div.field.message
+            label(for="messageContact")=__("layout.message")
+            textarea#messageContact(name="message" required)
           div.field
-            label(for="lastNameContact")="* "+__("lastName")
-            input#lastNameContact(type="text" name="lastName" value=user ? user.lastName : "" required)
-        div.cont
-          div.field
-            label(for="emailContact")="* "+__("email")
-            input#emailContact(type="email" name="email" value=user ? user.email : "" required)
-          div.field
-            label(for="phoneNumberContact")=__("layout.phoneNumber")
-            input#phoneNumberContact(type="tel" name="phoneNumber")
-        div.field
-          label(for="subjectContact")="* "+__("layout.subject")
-          +list("subjectContact", "subjectContactList", "subject", "", "off", true)
-          datalist#subjectContactList
-            option(value=__("layout.commandEdit"))
-            option(value=__("layout.commandRemove"))
-            option(value=__("layout.question"))
-            option(value=__("layout.profile"))
-            option(value=__("layout.other"))
-        p=__("layout.warnMessage")
-        div.field.message
-          label(for="messageContact")=__("layout.message")
-          textarea#messageContact(name="message" required)
-        div.field
-          +submit(value=__("send"))
+            +submit(value=__("send"))
 
     script(src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js")
     script(src="/javascripts/layout.js")
diff --git a/views/mixin.pug b/views/mixin.pug
index 2fa7ff4..a8af50a 100644
--- a/views/mixin.pug
+++ b/views/mixin.pug
@@ -1,6 +1,7 @@
 mixin submit(value)
     div.recaptcha.recaptcha-cb
-        input(type="submit" value!=value)
+        button.btn.waves-effect.waves-light(type="submit" name="action")=value
+            i.material-icons.right send
 
 mixin list(id, list, name, value="", autocomplete="on", required=false)
     span.list_arrow