diff --git a/.idea/codeStyles/Project.xml b/.idea/codeStyles/Project.xml
index 71679fe..c8413c9 100644
--- a/.idea/codeStyles/Project.xml
+++ b/.idea/codeStyles/Project.xml
@@ -1,29 +1,5 @@
 <component name="ProjectCodeStyleConfiguration">
   <code_scheme name="Project" version="173">
-    <DBN-PSQL>
-      <case-options enabled="false">
-        <option name="KEYWORD_CASE" value="lower" />
-        <option name="FUNCTION_CASE" value="lower" />
-        <option name="PARAMETER_CASE" value="lower" />
-        <option name="DATATYPE_CASE" value="lower" />
-        <option name="OBJECT_CASE" value="preserve" />
-      </case-options>
-      <formatting-settings enabled="false" />
-    </DBN-PSQL>
-    <DBN-SQL>
-      <case-options enabled="false">
-        <option name="KEYWORD_CASE" value="lower" />
-        <option name="FUNCTION_CASE" value="lower" />
-        <option name="PARAMETER_CASE" value="lower" />
-        <option name="DATATYPE_CASE" value="lower" />
-        <option name="OBJECT_CASE" value="preserve" />
-      </case-options>
-      <formatting-settings enabled="false">
-        <option name="STATEMENT_SPACING" value="one_line" />
-        <option name="CLAUSE_CHOP_DOWN" value="chop_down_if_statement_long" />
-        <option name="ITERATION_ELEMENTS_WRAPPING" value="chop_down_if_not_single" />
-      </formatting-settings>
-    </DBN-SQL>
     <DBN-PSQL>
       <case-options enabled="false">
         <option name="KEYWORD_CASE" value="lower" />
diff --git a/app.js b/app.js
index 0bcb606..825a3ac 100644
--- a/app.js
+++ b/app.js
@@ -7,11 +7,11 @@ var low = require("lowdb");
 var FileSync = require("lowdb/adapters/FileSync");
 var logger = require("morgan");
 var path = require("path");
+var read = require("read-file");
 var uuidv4 = require("uuid/v4");
 var indexRouter = require("./routes/index");
 var updateRouter = require("./routes/update");
 var usersRouter = require("./routes/users");
-var read = require("read-file");
 var app = express();
 var adapter = new FileSync("db.json");
 var db = low(adapter);
@@ -21,6 +21,7 @@ db.defaults({ users: [] })
 app.cocktails = [];
 read("data/output.csv", "utf8", function (err, buffer) {
     // console.log(buffer);
+    var cocktailList = [];
     var result = buffer.split(/\n|\r|\n\r|\r\n/);
     result = result.map(function (line) {
         line = line.split("\t");
@@ -31,10 +32,12 @@ read("data/output.csv", "utf8", function (err, buffer) {
         line[1] = parseFloat(line[1]);
         line[4] = line[4].substr(0, line[4].length - 2) + "," + line[4].substr(-2) + " \u20AC";
         line[5] = line[5].substr(0, line[5].length - 2) + "," + line[5].substr(-2) + " \u20AC";
+        cocktailList.push(line[3]);
         return line;
     });
     result = result.filter(function (f) { return !!f; });
     app.cocktails = result;
+    app.cocktailList = cocktailList;
 });
 // view engine setup
 app.set("views", path.join(__dirname, "views"));
diff --git a/app.js.map b/app.js.map
index dc6de96..f368729 100644
--- a/app.js.map
+++ b/app.js.map
@@ -1 +1 @@
-{"version":3,"file":"app.js","sourceRoot":"","sources":["app.ts"],"names":[],"mappings":"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"}
\ No newline at end of file
+{"version":3,"file":"app.js","sourceRoot":"","sources":["app.ts"],"names":[],"mappings":"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"}
\ No newline at end of file
diff --git a/app.ts b/app.ts
index 6c22a40..db773f4 100644
--- a/app.ts
+++ b/app.ts
@@ -5,12 +5,12 @@ import * as low from "lowdb";
 import * as FileSync from "lowdb/adapters/FileSync";
 import * as logger from "morgan";
 import * as path from "path";
+import * as read from "read-file";
 import * as uuidv4 from "uuid/v4";
 
 import * as indexRouter from "./routes/index";
 import * as updateRouter from "./routes/update";
 import * as usersRouter from "./routes/users";
-import * as read from "read-file";
 
 const app = express();
 const adapter = new FileSync("db.json")
@@ -26,6 +26,7 @@ app.cocktails = [];
 
 read("data/output.csv", "utf8", (err, buffer) => {
   // console.log(buffer);
+  const cocktailList = [];
   let result = buffer.split(/\n|\r|\n\r|\r\n/);
   result = result.map((line) => {
     line = line.split("\t");
@@ -36,10 +37,12 @@ read("data/output.csv", "utf8", (err, buffer) => {
     line[1] = parseFloat(line[1]);
     line[4] = `${line[4].substr(0, line[4].length - 2)},${line[4].substr(-2)} €`;
     line[5] = `${line[5].substr(0, line[5].length - 2)},${line[5].substr(-2)} €`;
+    cocktailList.push(line[3]);
     return line;
   });
   result = result.filter((f) => !!f);
   app.cocktails = result;
+  app.cocktailList = cocktailList;
 });
 
 
diff --git a/db.json b/db.json
index 47973ec..0c4da37 100644
--- a/db.json
+++ b/db.json
@@ -6,6 +6,58 @@
       "sex": "m",
       "cocktails": [],
       "lastused": 1547169564875
+    },
+    {
+      "id": "fcd183e6-90cf-4f9c-b6d1-1546882d0b1b",
+      "age": 22,
+      "sex": "m",
+      "cocktails": [
+        {
+          "level": 6,
+          "cocktail": "Anne Süß"
+        },
+        {
+          "level": 5,
+          "cocktail": "Melly"
+        },
+        {
+          "level": 4,
+          "cocktail": "Kürbiskern"
+        },
+        {
+          "level": 7,
+          "cocktail": "Zungenkuss"
+        },
+        {
+          "level": 2,
+          "cocktail": "Hurricane"
+        },
+        {
+          "level": 4,
+          "cocktail": "Bellamie"
+        },
+        {
+          "level": 5,
+          "cocktail": "Singapur"
+        },
+        {
+          "level": 4,
+          "cocktail": "Lady Killer"
+        },
+        {
+          "level": 3,
+          "cocktail": "Scotty"
+        },
+        {
+          "level": 4,
+          "cocktail": "Sex on the Beach"
+        },
+        {
+          "level": 5,
+          "cocktail": "Kitzler"
+        }
+      ],
+      "lastused": 1547221929512
     }
   ]
 }
\ No newline at end of file
diff --git a/public/js/custom.ts b/public/js/custom.ts
index 510501a..c1f1419 100644
--- a/public/js/custom.ts
+++ b/public/js/custom.ts
@@ -1,24 +1,96 @@
-const HTTP_BASE = "http://localhost:3000";
 
-function httpGetAsync(theUrl, callback) {
-  const xmlHttp = new XMLHttpRequest();
-  xmlHttp.onreadystatechange = () => {
-    if (xmlHttp.readyState === 4 && xmlHttp.status === 200) {
-      if (!!callback) {
-        callback(xmlHttp.responseText);
+
+const HTTP_BASE = "http://127.0.0.1:3000";
+const tokens = {};
+
+function httpGetAsync(token: string, theUrl, callback = null) {
+  if (!!token && tokens[token]) {
+    clearTimeout(tokens[token]);
+    delete tokens[token];
+  }
+  const t = setTimeout(() => {
+    const xmlHttp = new XMLHttpRequest();
+    xmlHttp.onreadystatechange = () => {
+      if (xmlHttp.readyState === 4 && xmlHttp.status === 200) {
+        if (!!callback) {
+          callback(xmlHttp.responseText);
+        }
       }
-    }
-  };
-  xmlHttp.open("GET", theUrl, true);  // true for asynchronous
-  xmlHttp.send(null);
+    };
+    xmlHttp.open("GET", theUrl, true);  // true for asynchronous
+    xmlHttp.send(null);
+    delete tokens[token];
+  }, 500);
+  if (!!token) {
+    tokens[token] = t;
+  }
+}
+
+function addProgressBarFunctionality(id: string) {
+  const rangediv = document.getElementById(id);
+  rangediv.getElementsByClassName("mdl-progress")[0].addEventListener("mdl-componentupgraded", () => {
+    let value = parseInt(rangediv.dataset.value, 10);
+    setProgress(rangediv, value);
+    rangediv.getElementsByClassName("mdl-list__item-secondary-info")[0].innerHTML = `${value}/7`;
+    rangediv.getElementsByClassName("minus-arrow")[0].addEventListener("click", () => {
+      value = Math.max(1, parseInt(rangediv.dataset.value, 10) - 1);
+      setProgress(rangediv, value);
+      if (!!rangediv.dataset.dosend) {
+        sendCocktail(id, value);
+      }
+    });
+    rangediv.getElementsByClassName("plus-arrow")[0].addEventListener("click", () => {
+      value = Math.min(7, parseInt(rangediv.dataset.value, 10) + 1);
+      setProgress(rangediv, value);
+      if (!!rangediv.dataset.dosend) {
+        sendCocktail(id, value);
+      }
+    });
+  });
+}
+
+function setProgress(rdiv, v) {
+  rdiv.dataset.value = v.toString();
+  rdiv.getElementsByClassName("mdl-progress")[0].MaterialProgress.setProgress(100 * (v - 1 ) / 6);
+  rdiv.getElementsByClassName("mdl-list__item-secondary-info")[0].innerHTML = `${v}/7`;
 }
 
 function sendAge(elem) {
-  console.log(`age: ${elem.value}`);
-  httpGetAsync(`${HTTP_BASE}/update/personal?age=${encodeURI(elem.value)}`, null);
+  httpGetAsync("agetoken", `${HTTP_BASE}/update/personal?age=${encodeURI(elem.value)}`);
 }
 
 function sendSex(elem) {
-  console.log("gender: " + elem.value);
-  httpGetAsync(`${HTTP_BASE}/update/personal?sex=${encodeURI(elem.value)}`, null);
+  httpGetAsync("sextoken", `${HTTP_BASE}/update/personal?sex=${encodeURI(elem.value)}`);
+}
+
+function sendNewCocktail() {
+  const cocktail = document.getElementById("cocktails").value;
+  if (cocktail === "") {
+    return;
+  }
+  const level = document.getElementById("pnew").dataset.value;
+  httpGetAsync(null, `${HTTP_BASE}/update/newcocktail?cocktail=${encodeURI(cocktail)}&level=${encodeURI(level)}`);
+  const elem = document.getElementById(cocktail);
+  if (!!elem) {
+    setProgress(elem, level);
+  } else {
+    const list = document.getElementById("cocktaillist");
+    let NAME = cocktail;
+    let LEVEL = level;
+    list.innerHTML += (`<li class="mdl-list__item mdl-list__item--two-line"><span class="mdl-list__item-primary-content"><i class="material-icons mdl-list__item-avatar">local_bar</i><span>${NAME}</span><span class="mdl-list__item-sub-title"> </span></span><span class="mdl-list__item-secondary-content">
+    <div id="${NAME}" class="mdl-grid" style="width:100px;text-align:center;padding:0;margin:0" data-value=""+LEVEL+"">
+      <div class="mdl-cell" style="width:33.33333333%;margin-right:0px;margin-left:0px"><a class="minus-arrow mdl-list__item-secondary-action" href="#"><i class="material-icons">remove</i></a></div>
+      <div class="mdl-cell" style="width:33.33333333%;margin-right:0px;margin-left:0px">
+        <div class="mdl-progress mdl-js-progress" style="text-align:center"><span class="mdl-list__item-secondary-info"></span></div>
+      </div>
+      <div class="mdl-cell" style="width:33.33333333%;margin-right:0px;margin-left:0px"><a class="plus-arrow mdl-list__item-secondary-action" href="#"><i class="material-icons">add</i></a></div>
+    </div></span></li>`);
+    addProgressBarFunctionality(NAME);
+  }
+}
+
+function sendCocktail(id, value) {
+  const cocktail = id;
+  const level = value;
+  httpGetAsync("updatetoken" + id, `${HTTP_BASE}/update/newcocktail?cocktail=${encodeURI(cocktail)}&level=${encodeURI(level)}`);
 }
diff --git a/routes/index.ts b/routes/index.ts
index d15a048..4107354 100644
--- a/routes/index.ts
+++ b/routes/index.ts
@@ -13,7 +13,7 @@ router.use((req, res, next) => {
 router.get("/", (req, res, next) => {
   const user = req.app.db.get("users").find({id: req.cookies.uid}).value();
   console.log(user);
-  res.render("index", {title: "Liebingscocktails", user, cocktails: req.app.cocktails});
+  res.render("index", {title: "Liebingscocktails", user, cocktails: req.app.cocktails, cocktailList: req.app.cocktailList});
 });
 
 export = router;
diff --git a/routes/update.ts b/routes/update.ts
index 9fdf629..0336ca5 100644
--- a/routes/update.ts
+++ b/routes/update.ts
@@ -13,9 +13,9 @@ router.use((req, res, next) => {
 });
 
 router.get("/personal", (req, res) => {
-  const ageStr = req.param("age", null);
+  const ageStr = req.query.age || null;
   const age = parseInt(ageStr, 10);
-  const sex = req.param("sex", null);
+  const sex = req.query.sex || null;
   const result: {age?: number, sex?: string} = {};
   if (age > 15 && age < 99) {
     result.age = age;
@@ -36,4 +36,35 @@ router.get("/personal", (req, res) => {
   res.send();
 });
 
+
+router.get("/newcocktail", (req, res) => {
+  const db = (req.app as any).db;
+  const levelStr = req.query.level || null;
+  const level = parseInt(levelStr, 10);
+  const cocktail = req.query.cocktail || null;
+  const result: {level?: number, cocktail?: string} = {};
+  if (level > 0 && level < 8) {
+    result.level = level;
+  }
+  if (req.app.cocktailList.indexOf(cocktail) > -1) {
+    result.cocktail = cocktail;
+  }
+  if (!!result.level && !!result.cocktail) {
+    const findRes = db.get("users").find({id: req.cookies.uid}).get("cocktails").find({cocktail});
+    if (!findRes.value()) {
+      db.get("users")
+        .find({id: req.cookies.uid})
+        .get("cocktails")
+        .push(result)
+        .write();
+    } else {
+      findRes
+        .assign(result)
+        .write();
+    }
+  }
+  res.status(204);
+  res.send();
+});
+
 export = router;
diff --git a/views/error.pug b/views/error.pug
index 51ec12c..54cebb2 100644
--- a/views/error.pug
+++ b/views/error.pug
@@ -1,6 +1,13 @@
 extends layout
 
 block content
-  h1= message
-  h2= error.status
-  pre #{error.stack}
+  block content
+    .mdl-grid
+      .mdl-cell--3-offset-desktop
+      .mdl-cell.mdl-cell--6-col.mdl-cell--12-col-tablet
+        .demo-card-square.mdl-card.mdl-shadow--2dp
+          .mdl-card__title.mdl-card--expand
+            h2.mdl-card__title-text= message
+          .mdl-card__supporting-text
+            h2= error.status
+            pre(style="font-size: 70%") #{error.stack}
diff --git a/views/index.pug b/views/index.pug
index f7137f2..8fbd6ad 100644
--- a/views/index.pug
+++ b/views/index.pug
@@ -1,7 +1,7 @@
 extends layout
 
-mixin rangemaker(id)
-  .mdl-grid(style="width:100px;text-align:center;padding:0;margin:0", id=id)
+mixin rangemaker(id, start)
+  .mdl-grid(style="width:100px;text-align:center;padding:0;margin:0", id=id, data-value=(start || "4"), data-dosend=(start !== undefined))
     .mdl-cell(style="width:33.33333333%;margin-right:0px;margin-left:0px")
       a.minus-arrow.mdl-list__item-secondary-action(href='#')
         i.material-icons remove
@@ -12,36 +12,12 @@ mixin rangemaker(id)
       a.plus-arrow.mdl-list__item-secondary-action(href='#')
         i.material-icons add
   script.
-    let m = null;
-    let rangediv = document.getElementById('#{id}');
-    rangediv.getElementsByClassName('mdl-progress')[0].addEventListener('mdl-componentupgraded', function () {
-      m = this.MaterialProgress;
-      this.MaterialProgress.setProgress(100 * 3 / 7);
-    });
-    rangediv.getElementsByClassName('mdl-list__item-secondary-info')[0].innerHTML = "3/7";
-    rangediv.getElementsByClassName('minus-arrow')[0].addEventListener('click', function () {
-      m.setProgress(100);
-    });
+    addProgressBarFunctionality('#{id}')
 
 
 block content
-  style.
-    .demo-card-square.mdl-card {
-      width: 100%;
-    }
-
-    .demo-card-square > .mdl-card__title {
-      color: #fff;
-      background: #795548;
-    }
-
-    .mdl-selectfield__select option {
-      font-family: "Helvetica", "Arial", sans-serif;
-    }
-
-
-  script(src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@0.13.3/dist/tf.min.js", defer)
-  script(src="/js/neuralnet.js", defer)
+  //script(src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@0.13.3/dist/tf.min.js", defer)
+  //script(src="/js/neuralnet.js", defer)
   .mdl-grid
     .mdl-cell--3-offset-desktop
     .mdl-cell.mdl-cell--6-col.mdl-cell--12-col-tablet
@@ -50,7 +26,7 @@ block content
           h2.mdl-card__title-text Über diese Seite
         .mdl-card__supporting-text
           | Auf dieser Website kannst Du Deine Lieblingscocktails speichern und beim nächsten Mal wieder bestellen!
-          h3 Freiwillige Informationen
+          h4 Freiwillige Informationen
           | Du kannst anonym Dein Alter und Geschlecht angeben, um die Cocktails weiter verbessern zu können.
           .form
             .mdl-selectfield.mdl-js-selectfield.mdl-selectfield--floating-label
@@ -76,83 +52,35 @@ block content
         .mdl-card__title.mdl-card--expand
           h2.mdl-card__title-text Lieblingscocktails
         .mdl-card__supporting-text
-          ul.demo-list-two.mdl-list
-            li.mdl-list__item.mdl-list__item--two-line
-              span.mdl-list__item-primary-content
-                i.material-icons.mdl-list__item-avatar local_bar
-                span Bryan Cranston
-                span.mdl-list__item-sub-title 62 Episodes, 62 Episodes, 62 Episodes, 62 Episodes, 62 Episodes, 62 Episodes, 62 Episodes
-              span.mdl-list__item-secondary-content
-                .mdl-grid(style="width:100px;text-align:center;padding:0;margin:0")
-                  .mdl-cell(style="width:33.33333333%;margin-right:0px;margin-left:0px")
-                    a.mdl-list__item-secondary-action(href='#')
-                      i.material-icons remove
-                  .mdl-cell(style="width:33.33333333%;margin-right:0px;margin-left:0px")
-                    #p1.mdl-progress.mdl-js-progress(style="text-align:center")
-                      span.mdl-list__item-secondary-info 6/7
-                  .mdl-cell(style="width:33.33333333%;margin-right:0px;margin-left:0px")
-                    a.mdl-list__item-secondary-action(href='#')
-                      i.material-icons add
-                script.
-                  document.querySelector('#p1').addEventListener('mdl-componentupgraded', function () {
-                    this.MaterialProgress.setProgress(100 * 6 / 7);
-                  });
-            li.mdl-list__item.mdl-list__item--two-line
-              span.mdl-list__item-primary-content
-                i.material-icons.mdl-list__item-avatar local_bar
-                span Aaron Paul
-                span.mdl-list__item-sub-title 62 Episodes
-              span.mdl-list__item-secondary-content
-                .mdl-grid(style="width:100px;text-align:center;padding:0;margin:0")
-                  .mdl-cell(style="width:33.33333333%;margin-right:0px;margin-left:0px")
-                    a.mdl-list__item-secondary-action(href='#')
-                      i.material-icons remove
-                  .mdl-cell(style="width:33.33333333%;margin-right:0px;margin-left:0px")
-                    #p2.mdl-progress.mdl-js-progress(style="text-align:center")
-                      span.mdl-list__item-secondary-info 2/7
-                  .mdl-cell(style="width:33.33333333%;margin-right:0px;margin-left:0px")
-                    a.mdl-list__item-secondary-action(href='#')
-                      i.material-icons add
-                script.
-                  document.querySelector('#p2').addEventListener('mdl-componentupgraded', function () {
-                    this.MaterialProgress.setProgress(100 * 2 / 7);
-                  });
-            li.mdl-list__item.mdl-list__item--two-line
-              span.mdl-list__item-primary-content
-                i.material-icons.mdl-list__item-avatar local_bar
-                span Bob Odenkirk
-                span.mdl-list__item-sub-title 62 Episodes
-              span.mdl-list__item-secondary-content
-                .mdl-grid(style="width:100px;text-align:center;padding:0;margin:0")
-                  .mdl-cell(style="width:33.33333333%;margin-right:0px;margin-left:0px")
-                    a.mdl-list__item-secondary-action(href='#')
-                      i.material-icons remove
-                  .mdl-cell(style="width:33.33333333%;margin-right:0px;margin-left:0px")
-                    #p3.mdl-progress.mdl-js-progress(style="text-align:center")
-                      span.mdl-list__item-secondary-info 5/7
-                  .mdl-cell(style="width:33.33333333%;margin-right:0px;margin-left:0px")
-                    a.mdl-list__item-secondary-action(href='#')
-                      i.material-icons add
-                script.
-                  document.querySelector('#p3').addEventListener('mdl-componentupgraded', function () {
-                    this.MaterialProgress.setProgress(100 * 5 / 7);
-                  });
-            br
-            .form
-              .mdl-grid
-                .mdl-cell--6-col
-                  .mdl-selectfield.mdl-js-selectfield.mdl-selectfield--floating-label
-                    select#gender.mdl-selectfield__select
-                      option(value='')
-                      each val in cocktails
-                        option(value=val[3])= val[2] + " - " + val[3]
-                    label.mdl-selectfield__label(for='gender') New cocktail
-                    span.mdl-selectfield__error Select a value
-                .mdl-cell--3-col
-                  +rangemaker("pnew")
-                .mdl-cell--3-col
-                  button.mdl-button.mdl-js-button.mdl-button--fab.mdl-js-ripple-effect
-                    i.material-icons add
+          #cocktaillist.ul.demo-list-two.mdl-list
+            each cocktail in user.cocktails
+              - index = cocktailList.indexOf(cocktail.cocktail)
+              - cdetails = cocktails[index]
+              li.mdl-list__item.mdl-list__item--two-line
+                span.mdl-list__item-primary-content
+                  i.material-icons.mdl-list__item-avatar local_bar
+                  span= cocktail.cocktail
+                  span.mdl-list__item-sub-title= cdetails[7].replace(/;/g, ', ')
+                span.mdl-list__item-secondary-content
+                  +rangemaker(cocktail.cocktail, cocktail.level)
+          br
+          br
+          br
+          #newcocktail.form
+            .mdl-grid
+              .mdl-cell--6-col
+                .mdl-selectfield.mdl-js-selectfield.mdl-selectfield--floating-label
+                  select#cocktails.mdl-selectfield__select
+                    option(value='')
+                    each val in cocktails
+                      option(value=val[3])= val[2] + " - " + val[3]
+                  label.mdl-selectfield__label(for='cocktails') New cocktail
+                  span.mdl-selectfield__error Select a value
+              .mdl-cell--3-col
+                +rangemaker("pnew")
+              .mdl-cell--3-col
+                button.mdl-button.mdl-js-button.mdl-button--fab.mdl-js-ripple-effect(onclick="sendNewCocktail()")
+                  i.material-icons add
         //.mdl-card__actions.mdl-card--border
         //  a.mdl-button.mdl-button--colored.mdl-js-button.mdl-js-ripple-effect
         //    | View Updates
\ No newline at end of file
diff --git a/views/layout.pug b/views/layout.pug
index 781ed12..bf2f2a8 100644
--- a/views/layout.pug
+++ b/views/layout.pug
@@ -11,7 +11,7 @@ html
     script(defer, type='text/javascript', src='/js/material.min.js')
     script(defer, type='text/javascript', src='/js/mdl-selectfield.min.js')
     script(defer, type='text/javascript', src='/js/getmdl-select.min.js')
-    script(defer, type='text/javascript', src='/js/custom.js')
+    script(type='text/javascript', src='/js/custom.js')
   body
     style.
       .demo-layout-transparent {
@@ -25,6 +25,19 @@ html
         color: white;
       }
 
+      .demo-card-square.mdl-card {
+        width: 100%;
+      }
+
+      .demo-card-square > .mdl-card__title {
+        color: #fff;
+        background: #795548;
+      }
+
+      .mdl-selectfield__select option {
+        font-family: "Helvetica", "Arial", sans-serif;
+      }
+
 
     .demo-layout-transparent.mdl-layout.mdl-js-layout
       header.mdl-layout__header.mdl-layout__header--transparent