diff --git a/LICENSE.md b/LICENSE.md
new file mode 100644
index 00000000..d775f588
--- /dev/null
+++ b/LICENSE.md
@@ -0,0 +1,22 @@
+
+The MIT License (MIT)
+
+Copyright (c) 2019 
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
diff --git a/README.md b/README.md
new file mode 100644
index 00000000..6e59756b
--- /dev/null
+++ b/README.md
@@ -0,0 +1,45 @@
+<img src="/images/logo.svg" width="228"/>
+
+# Greg
+
+![badge-release](https://img.shields.io/github/v/release/strukturart/feedolin?include_prereleases&style=plastic)
+[![badge-bhackers](https://img.shields.io/badge/bHackers-bHackerStore-orange)](https://store.bananahackers.net/#feedolin)
+![badge-downloads](https://img.shields.io/github/downloads/strukturart/feedolin/total)
+
+An easy to use calendar for KaiOs
+
+## How to install
+
+The app is not available through the https://www.kaiostech.com/store/ They are only accepting apps that are monetized using <a href="https://developer.kaiostech.com/submit-to-kaistore">KaiAds SDK</a>, and that's something I'm not interested in integrating.
+For this reason, you have to side-load (upload) the app to your phone if you want to use it.
+Martin Kaptein wrote a comprehensive, <a href="https://www.martinkaptein.com/blog/sideloading-and-deploying-apps-to-kai-os/">step-by-step article</a> that you can use to side-load the app. If you prefer a video, this one on YouTube walks you through the process.
+The Developer Portal also contains a guide, and if nothing seems to work, you can <a href="https://discord.com/invite/rQ93zEu">ask for help on Discord</a>.
+You can download the latest version from the Releases page.
+The app is not auto-updating. To update it, you have to follow the same steps you took when installing it.
+
+## How to use
+
+## to do
+
+## Donation
+
+If you use the app often, please donate an amount to me.
+<br>
+
+<table class="border-0"> 
+  <tr class="border-0" >
+    <td valign="top" class="border-0">
+        <div>
+            <a href="https://paypal.me/strukturart?locale.x=de_DE" target="_blank">
+                <img src="/images/paypal.png" width="120px">
+            </a>
+        </div>
+    </td>
+    <td valign="top" class="border-0">
+        <div>
+            <div>Bitcoin</div>
+            <img src="/images/bitcoin_rcv.png" width="120px">
+        </div>
+    </td>
+  </tr>
+ </table>
diff --git a/application/assets/css/grid.css b/application/assets/css/grid.css
new file mode 100644
index 00000000..f7c5b6c3
--- /dev/null
+++ b/application/assets/css/grid.css
@@ -0,0 +1,577 @@
+/* G R I D */
+
+.grid-col-1 {
+    min-width: 10px;
+    max-width: 10px;
+}
+
+.grid-col-2 {
+    min-width: 20px;
+    max-width: 20px;
+}
+
+.grid-col-3 {
+    min-width: 30px;
+    max-width: 30px;
+}
+
+.grid-col-4 {
+    min-width: 40px;
+    max-width: 40px;
+}
+
+.grid-col-5 {
+    min-width: 50px;
+    max-width: 50px;
+}
+
+.grid-col-6 {
+    min-width: 60px;
+    max-width: 60px;
+}
+
+.grid-col-7 {
+    min-width: 70px;
+    max-width: 70px;
+}
+
+.grid-col-8 {
+    min-width: 80px;
+    max-width: 80px;
+}
+
+.grid-col-9 {
+    min-width: 90px;
+    max-width: 90px;
+}
+
+.grid-col-10 {
+    min-width: 100px;
+    max-width: 100px;
+}
+
+.grid-col-11 {
+    min-width: 110px;
+    max-width: 110px;
+}
+
+.grid-col-12 {
+    min-width: 120px;
+    max-width: 120px;
+}
+
+.grid-col-13 {
+    min-width: 130px;
+    max-width: 130px;
+}
+
+.grid-col-14 {
+    min-width: 140px;
+    max-width: 140px;
+}
+
+.grid-col-15 {
+    min-width: 150px;
+    max-width: 150px;
+}
+
+.grid-col-16 {
+    min-width: 160px;
+    max-width: 160px;
+}
+
+.grid-col-17 {
+    min-width: 170px;
+    max-width: 170px;
+}
+
+.grid-col-18 {
+    min-width: 180px;
+    max-width: 180px;
+}
+
+.grid-col-19 {
+    min-width: 190px;
+    max-width: 190px;
+}
+
+.grid-col-20 {
+    min-width: 200px;
+    max-width: 200px;
+}
+
+.grid-col-21 {
+    min-width: 210px;
+    max-width: 210px;
+}
+
+.grid-col-22 {
+    min-width: 220px;
+    max-width: 220px;
+}
+
+.grid-col-23 {
+    min-width: 230px;
+    max-width: 230px;
+}
+
+.grid-col-24 {
+    min-width: 240px;
+    max-width: 240px;
+}
+
+.grid-col-25 {
+    min-width: 250px;
+    max-width: 250px;
+}
+
+.grid-col-26 {
+    min-width: 260px;
+    max-width: 260px;
+}
+
+.grid-col-27 {
+    min-width: 270px;
+    max-width: 270px;
+}
+
+.grid-col-28 {
+    min-width: 280px;
+    max-width: 280px;
+}
+
+.grid-col-29 {
+    min-width: 290px;
+    max-width: 290px;
+}
+
+.grid-col-30 {
+    min-width: 300px;
+    max-width: 300px;
+}
+
+.grid-col-31 {
+    min-width: 310px;
+    max-width: 310px;
+}
+
+.grid-col-32 {
+    min-width: 320px;
+    max-width: 320px;
+}
+
+.grid-col-33 {
+    min-width: 330px;
+    max-width: 330px;
+}
+
+.grid-col-34 {
+    min-width: 340px;
+    max-width: 340px;
+}
+
+.grid-col-35 {
+    min-width: 350px;
+    max-width: 350px;
+}
+
+.grid-col-36 {
+    min-width: 360px;
+    max-width: 360px;
+}
+
+.grid-col-37 {
+    min-width: 370px;
+    max-width: 370px;
+}
+
+.grid-col-38 {
+    min-width: 380px;
+    max-width: 380px;
+}
+
+.grid-col-39 {
+    min-width: 390px;
+    max-width: 390px;
+}
+
+.grid-col-40 {
+    min-width: 400px;
+    max-width: 400px;
+}
+
+.grid-col-41 {
+    min-width: 410px;
+    max-width: 410px;
+}
+
+.grid-col-42 {
+    min-width: 420px;
+    max-width: 420px;
+}
+
+.grid-col-43 {
+    min-width: 430px;
+    max-width: 430px;
+}
+
+.grid-col-44 {
+    min-width: 440px;
+    max-width: 440px;
+}
+
+.grid-col-45 {
+    min-width: 450px;
+    max-width: 450px;
+}
+
+.grid-col-46 {
+    min-width: 460px;
+    max-width: 460px;
+}
+
+.grid-col-47 {
+    min-width: 470px;
+    max-width: 470px;
+}
+
+.grid-col-48 {
+    min-width: 480px;
+    max-width: 480px;
+}
+
+.grid-col-49 {
+    min-width: 490px;
+    max-width: 490px;
+}
+
+.grid-col-50 {
+    min-width: 500px;
+    max-width: 500px;
+}
+
+.grid-col-51 {
+    min-width: 510px;
+    max-width: 510px;
+}
+
+.grid-col-52 {
+    min-width: 520px;
+    max-width: 520px;
+}
+
+.grid-col-53 {
+    min-width: 530px;
+    max-width: 530px;
+}
+
+.grid-col-54 {
+    min-width: 540px;
+    max-width: 540px;
+}
+
+.grid-col-55 {
+    min-width: 550px;
+    max-width: 550px;
+}
+
+.grid-col-56 {
+    min-width: 560px;
+    max-width: 560px;
+}
+
+.grid-col-57 {
+    min-width: 570px;
+    max-width: 570px;
+}
+
+.grid-col-58 {
+    min-width: 580px;
+    max-width: 580px;
+}
+
+.grid-col-59 {
+    min-width: 590px;
+    max-width: 590px;
+}
+
+.grid-col-60 {
+    min-width: 600px;
+    max-width: 600px;
+}
+
+.grid-col-61 {
+    min-width: 610px;
+    max-width: 610px;
+}
+
+.grid-col-62 {
+    min-width: 620px;
+    max-width: 620px;
+}
+
+.grid-col-63 {
+    min-width: 630px;
+    max-width: 630px;
+}
+
+.grid-col-64 {
+    min-width: 640px;
+    max-width: 640px;
+}
+
+.grid-col-65 {
+    min-width: 650px;
+    max-width: 650px;
+}
+
+.grid-col-66 {
+    min-width: 660px;
+    max-width: 660px;
+}
+
+.grid-col-67 {
+    min-width: 670px;
+    max-width: 670px;
+}
+
+.grid-col-68 {
+    min-width: 680px;
+    max-width: 680px;
+}
+
+.grid-col-69 {
+    min-width: 690px;
+    max-width: 690px;
+}
+
+.grid-col-70 {
+    min-width: 700px;
+    max-width: 700px;
+}
+
+.grid-col-71 {
+    min-width: 710px;
+    max-width: 710px;
+}
+
+.grid-col-72 {
+    min-width: 720px;
+    max-width: 720px;
+}
+
+.grid-col-73 {
+    min-width: 730px;
+    max-width: 730px;
+}
+
+.grid-col-74 {
+    min-width: 740px;
+    max-width: 740px;
+}
+
+.grid-col-75 {
+    min-width: 750px;
+    max-width: 750px;
+}
+
+.grid-col-76 {
+    min-width: 760px;
+    max-width: 760px;
+}
+
+.grid-col-77 {
+    min-width: 770px;
+    max-width: 770px;
+}
+
+.grid-col-78 {
+    min-width: 780px;
+    max-width: 780px;
+}
+
+.grid-col-79 {
+    min-width: 790px;
+    max-width: 790px;
+}
+
+.grid-col-80 {
+    min-width: 800px;
+    max-width: 800px;
+}
+
+.grid-col-81 {
+    min-width: 810px;
+    max-width: 810px;
+}
+
+.grid-col-82 {
+    min-width: 820px;
+    max-width: 820px;
+}
+
+.grid-col-83 {
+    min-width: 830px;
+    max-width: 830px;
+}
+
+.grid-col-84 {
+    min-width: 840px;
+    max-width: 840px;
+}
+
+.grid-col-85 {
+    min-width: 850px;
+    max-width: 850px;
+}
+
+.grid-col-86 {
+    min-width: 860px;
+    max-width: 860px;
+}
+
+.grid-col-87 {
+    min-width: 870px;
+    max-width: 870px;
+}
+
+.grid-col-88 {
+    min-width: 880px;
+    max-width: 880px;
+}
+
+.grid-col-88 {
+    min-width: 880px;
+    max-width: 880px;
+}
+
+.grid-col-89 {
+    min-width: 890px;
+    max-width: 890px;
+}
+
+.grid-col-90 {
+    min-width: 900px;
+    max-width: 900px;
+}
+
+.grid-col-91 {
+    min-width: 910px;
+    max-width: 910px;
+}
+
+.grid-col-92 {
+    min-width: 920px;
+    max-width: 920px;
+}
+
+.grid-col-93 {
+    min-width: 930px;
+    max-width: 930px;
+}
+
+.grid-col-94 {
+    min-width: 940px;
+    max-width: 940px;
+}
+
+.grid-col-95 {
+    min-width: 950px;
+    max-width: 950px;
+}
+
+.grid-col-96 {
+    min-width: 960px;
+    max-width: 960px;
+}
+
+.text-center {
+    text-align: center;
+}
+
+.flex {
+    display: -webkit-flex;
+    display: flex;
+    -webkit-flex-direction: row;
+    flex-direction: row;
+    -webkit-flex-wrap: wrap;
+    flex-wrap: wrap;
+}
+
+.flex-column {
+    -webkit-flex-direction: column;
+    -ms-flex-direction: column;
+    flex-direction: column;
+}
+
+.justify-content-start {
+    -webkit-align-items: flex-start;
+    align-items: flex-start;
+}
+
+.justify-content-end {
+    -webkit-justify-content: flex-end;
+    justify-content: flex-end;
+}
+
+.algin-item-start {
+    -webkit-align-items: flex-start;
+    align-items: flex-start;
+}
+
+.algin-item-end {
+    -webkit-align-items: flex-end;
+    align-items: flex-end;
+}
+
+.align-item-center {
+    -webkit-align-items: center;
+    -ms-flex-align: center;
+    align-items: center;
+}
+
+.justify-content-spacebetween {
+    -webkit-justify-content: space-between;
+    justify-content: space-between;
+}
+
+.justify-content-spacearound {
+    -webkit-justify-content: space-around;
+    -ms-flex-pack: distribute;
+    justify-content: space-around;
+    -webkit-align-content: space-around;
+    -ms-flex-line-pack: distribute;
+    align-content: space-around;
+}
+
+.justify-content-center {
+    -webkit-justify-content: center;
+    -ms-flex-pack: center;
+    justify-content: center;
+}
+
+.width-100 {
+    min-width: 100vw;
+    max-width: 100vw;
+}
+
+.height-100 {
+    min-height: 100vh;
+}
+
+.width-50 {
+    min-width: 50%;
+}
+
+.width-30 {
+    min-width: 30%;
+    max-width: 30%;
+}
+
+.center {
+    transform: translate(50%, -0%);
+}
+
+.block {
+    display: block;
+}
\ No newline at end of file
diff --git a/application/assets/css/main.css b/application/assets/css/main.css
new file mode 100644
index 00000000..01b12ccf
--- /dev/null
+++ b/application/assets/css/main.css
@@ -0,0 +1,596 @@
+/*GENERAL*/
+
+:root {
+  --color-one: black;
+  --color-two: yellow;
+  --color-three: silver;
+  --color-four: rgb(190, 185, 185);
+  --color-five: rgb(38, 38, 38);
+  --color-seven: gainsboro;
+}
+
+@font-face {
+  font-family: "Lato-Regular";
+  src: url("../fonts/Lato-Regular.ttf");
+}
+
+*,
+*:before,
+*:after {
+  border: 0px;
+  padding: 0px;
+  margin: 0px;
+  box-sizing: border-box;
+
+  /* Careful, this breaks the word wherever it is without a hyphen */
+  overflow-wrap: break-word;
+  word-wrap: break-word;
+
+  /* Adds a hyphen where the word breaks */
+  -webkit-hyphens: auto;
+  -ms-hyphens: auto;
+  -moz-hyphens: auto;
+  hyphens: auto;
+}
+
+:focus {
+  outline: none;
+  background: var(--color-four);
+}
+
+::-moz-focus-inner {
+  border: 0;
+}
+
+.debug {
+  outline: 1px solid red;
+}
+html,
+body {
+  font-family: "Lato-Regular";
+  font-weight: 100;
+  position: relative;
+  margin: 0px;
+  padding: 0px;
+  font-size: 1rem;
+  line-height: 1.4rem;
+  max-height: 100%;
+  max-width: 100%;
+  height: 100%;
+  width: 100%;
+  max-width: 100vw;
+  overflow: hidden;
+  background: white;
+}
+
+h1 {
+  font-size: 1rem;
+}
+
+h2 {
+  font-size: 1rem;
+}
+
+h3 {
+  font-size: 1rem;
+}
+
+img {
+  max-width: 90vw;
+  height: auto;
+  display: block;
+}
+
+img[src=""] {
+  display: none;
+}
+
+img[src=" "] {
+  display: none;
+}
+
+button {
+  font-size: 1rem;
+  background: silver;
+  padding: 5px;
+  width: 100vw;
+  margin: 0 0 5px 0;
+  color: black;
+}
+
+button:focus {
+  background: silver;
+  color: white;
+}
+
+textarea {
+  height: 30px;
+  width: 90%;
+  padding: 3px;
+  border: 1px solid silver;
+}
+
+input {
+  width: 90%;
+  height: 30px;
+  padding: 3px;
+  border: 1px solid silver;
+}
+
+label {
+  display: block;
+  width: 100%;
+}
+.input-parent {
+  padding: 5px;
+}
+div#intro {
+  position: fixed;
+  background: black;
+  z-index: 100000;
+  min-width: 100%;
+  height: 100%;
+  display: none;
+}
+
+div#intro img {
+  width: 100px;
+  height: auto;
+  position: absolute;
+  top: 100px;
+  left: 50%;
+  margin-left: -50px;
+  animation-name: intro;
+  animation-duration: 2s;
+  animation-delay: 1s;
+  animation-iteration-count: 1;
+  animation-fill-mode: forwards;
+}
+
+@keyframes intro {
+  from {
+    transform: translateY(0px);
+  }
+  to {
+    transform: translateY(-50px);
+  }
+}
+
+div#intro div#version {
+  position: absolute;
+  text-align: center;
+  color: white;
+  z-index: 2000;
+  font-size: 0.7rem;
+  display: none;
+}
+
+div#intro div#intro-message {
+  position: absolute;
+  top: 190px;
+  text-align: center;
+  color: white;
+  z-index: 2000;
+  font-size: 0.8rem;
+}
+
+div#intro div#loading-progress {
+  position: absolute;
+  top: 220px;
+
+  height: 10px;
+  width: 200px;
+}
+
+div#intro div#loading-progress div {
+  height: 10px;
+  width: 200px;
+}
+
+div#intro div#loading-progress div div {
+  width: 0%;
+  height: 10px;
+  background-color: rgb(180, 128, 128);
+}
+
+/*///////////////////////////
+///TOAST////////////////*/
+
+div#toast {
+  position: fixed;
+  height: auto;
+  overflow: none;
+  background: black;
+  color: white;
+  z-index: 10;
+  min-width: 100%;
+  padding: 5px;
+  top: 0px;
+
+  transition: all 0.5s ease-in-out;
+  transform-origin: left top;
+  transform: translate(0px, -100px);
+}
+
+/*///////////////////////////
+///VIEWS////////////////*/
+
+div#calendar {
+}
+
+div#calendar div.calendar-head {
+}
+
+div#calendar div.calendar-head div {
+  width: 13%;
+  font-size: 0.8rem;
+  text-align: center;
+}
+
+div#calendar div.calendar-body div {
+  width: 100%;
+}
+
+div#calendar div#calendar-body div {
+  min-width: 13%;
+  font-size: 0.8rem;
+  text-align: center;
+}
+
+div#calendar div#calendar-body div div.today {
+  background: pink;
+}
+
+div#calendar div#calendar-body div div.event {
+  background: green;
+}
+
+div#add-edit-event {
+  display: none;
+  position: absolute;
+  z-index: 2;
+  top: 0;
+  height: 92vh;
+  overflow: hidden;
+}
+
+div#list-view {
+  position: absolute;
+  z-index: 4;
+  top: 0;
+  display: none;
+  padding: 5px;
+  height: 92vh;
+  overflow: hidden;
+}
+
+div#list-view article {
+  margin: 0 0 10px 0;
+}
+
+div#options {
+  display: none;
+  background: white;
+  position: fixed;
+  top: 0;
+  z-index: 5;
+}
+
+div#options ul li {
+  background: var(--color-three);
+  color: white;
+  padding: 5px;
+  margin: 0 0 5px 0;
+}
+
+div#options ul li:focus {
+  background: rgb(92, 90, 90);
+}
+
+/*/////////////////
+///BOTTOM BAR////
+////////////////*/
+
+div#bottom-bar {
+  position: fixed;
+  z-index: 2000;
+  bottom: 10px;
+  left: 0px;
+  height: 18px;
+  z-index: 6;
+  background: black;
+  min-width: 100vw;
+}
+
+div#bottom-bar div#inner {
+  position: relative;
+}
+
+div#bottom-bar div {
+  background: black;
+  color: white;
+  padding: 2px;
+  font-size: 0.8rem;
+  text-align: center;
+}
+
+div#bottom-bar div#button-center {
+  background: black;
+  color: white;
+  padding: 2px;
+  width: 32%;
+  text-align: center;
+}
+
+div#bottom-bar div#button-left {
+  background: black;
+  color: white;
+  padding: 2px;
+  width: 32%;
+  text-align: left;
+  width: 32%;
+}
+
+div#bottom-bar div#button-right {
+  background: black;
+  color: white;
+  padding: 2px;
+  width: 32%;
+  text-align: right;
+}
+
+/*/////////////////
+///TOP-BAR///////*/
+
+div#top-bar {
+  position: fixed;
+  top: 0px;
+  left: 0px;
+  height: 18px;
+  z-index: 4;
+  background: black;
+  min-width: 100vw;
+  display: none;
+}
+
+div#top-bar img {
+  margin: 3px 0 0 5px;
+  max-height: 15px;
+  color: white;
+}
+
+div#top-bar div#inner {
+  position: relative;
+}
+
+div#top-bar div {
+  background: black;
+  color: white;
+  padding: 2px;
+}
+
+div#top-bar div#button-center {
+  background: black;
+  color: white;
+  padding: 2px;
+  width: 30%;
+  text-align: center;
+}
+
+div#top-bar div#button-left {
+  background: black;
+  color: white;
+  padding: 2px;
+  width: 20px;
+  text-align: left;
+  width: 30%;
+}
+
+div#top-bar div#button-right {
+  background: black;
+  color: white;
+  padding: 2px;
+  width: 30%;
+  text-align: right;
+}
+
+/*INTRO*/
+
+div#message-box {
+  display: block;
+  position: fixed;
+  top: 0px;
+  left: 0px;
+  min-width: 100%;
+  height: 100%;
+  background: black;
+  color: white;
+  z-index: 5;
+
+  display: none;
+}
+
+div#message-box div {
+  margin: 100px 0 0 0;
+  animation-name: colorAnimation;
+  animation-duration: 2s;
+  animation-timing-function: ease-out;
+  animation-fill-mode: forwards;
+  animation-iteration-count: infinite;
+  max-width: 70%;
+  text-align: center;
+}
+
+div#count {
+  font-size: 8px;
+  color: white !important;
+  position: fixed;
+  bottom: 15px;
+}
+
+/*AUDIO-PLAYER*/
+
+div#audio-player {
+  background: var(--color-four);
+  z-index: 3;
+  position: fixed;
+  display: none;
+}
+
+div#audio-player div#audio-title {
+  background: black;
+  color: white;
+  font-size: 1.2rem;
+  max-width: 60%;
+  padding: 5px;
+  position: fixed;
+  top: 0;
+  left: 0;
+}
+
+div#audio-player div#image {
+  background-size: cover;
+  min-height: 100vh;
+}
+
+div#audio-player div#background-pattern {
+  min-width: 100vw;
+}
+
+div#audio-player div#background-pattern div {
+  width: 45px;
+  height: 45px;
+  margin: 0px;
+}
+
+div#audio-player div#progress-bar {
+  height: 10px;
+  position: fixed;
+  bottom: 30px;
+  z-index: 5;
+}
+
+div#audio-player div#progress-bar div {
+  height: 5px;
+  background: var(--color-six);
+}
+
+/*
+ SETTINGS
+ */
+
+div#top {
+  position: fixed;
+  top: 0;
+}
+
+div#settings {
+  display: none;
+  height: 92vh;
+  width: 100%;
+  padding: 0px 0 50px 0;
+  overflow: hidden;
+  position: absolute;
+  top: 0px;
+  z-index: 3;
+  background: rgb(231, 231, 231);
+}
+
+div#settings div#text {
+  margin: 0 0 20px 0;
+}
+div#settings h2 {
+  padding: 0 10px 0 10px;
+}
+
+div#settings div.input-parent {
+  padding: 10px 10px 20px 10px;
+}
+
+div#settings div.input-parent:focus {
+  padding: 10px 10px 20px 10px;
+  background: rgb(179, 179, 179);
+}
+
+div#settings label {
+  min-width: 80%;
+  height: 30px;
+  margin: 5px 5px 0 0;
+}
+
+div#settings div#input-wrapper {
+  margin: 0 0 0px 0;
+}
+
+div#settings input {
+  width: 90%;
+  height: 30px;
+  font-size: 1rem;
+  border: 2px solid rgb(32, 32, 32);
+  margin: 10px 0 10px 0;
+  padding: 3px;
+  display: block;
+}
+
+div#settings input:focus {
+  outline: 1px solid rgb(36, 35, 35);
+  background: rgb(255, 240, 240);
+}
+
+#goodbye {
+  position: fixed;
+  z-index: 50000;
+  left: 0;
+  top: 0;
+  background: black;
+  color: white;
+  font-size: 18px;
+  padding: 70px 5px 5px 5px;
+  display: none;
+}
+
+#ciao {
+  padding: 5px;
+  text-align: center;
+  display: none;
+}
+
+#ciao ul {
+  margin: 20px 0 0px 0;
+}
+
+#ciao ul li {
+  margin: 0 0 0px 0;
+  font-size: 14px;
+  list-style: none;
+}
+
+#ciao ul li:first-child {
+  color: yellow;
+  margin: 0 0 5px 0;
+}
+
+#donation {
+  padding: 5px;
+  text-align: center;
+  display: none;
+}
+
+.overscrolling {
+  /* Start the shake animation and make the animation last for 0.5 seconds */
+  animation: jump 0.5s;
+
+  /* When the animation is finished, start again */
+
+  animation-iteration-count: 1;
+}
+
+@keyframes jump {
+  0% {
+    transform: translateY(0);
+  }
+
+  100% {
+    transform: translateY(-30px);
+  }
+}
diff --git a/application/assets/css/qr-reader.css b/application/assets/css/qr-reader.css
new file mode 100644
index 00000000..2e71c0da
--- /dev/null
+++ b/application/assets/css/qr-reader.css
@@ -0,0 +1,78 @@
+div#qr-screen {
+    top: 0;
+    left: 0;
+    position: fixed;
+    z-index: 200000;
+    display: block;
+    min-height: 100vh;
+    min-width: 100vw;
+    z-index: 2000000000000;
+    display: none;
+}
+
+#video {
+    bottom: 0;
+    height: auto;
+    min-height: 100%;
+    min-width: 100%;
+    position: fixed;
+    right: 0;
+    width: auto;
+}
+
+#startDecoding {
+    background: #0095dd;
+    border-radius: 40px;
+    color: #fff;
+    font-family: Arial, sans;
+    font-size: 20px;
+    left: 50%;
+    margin: -30px 0 0 -95px;
+    padding: 20px;
+    position: fixed;
+    text-align: center;
+    top: 50%;
+    width: 150px;
+}
+
+#corner-nw,
+#corner-no,
+#corner-so,
+#corner-sw {
+    border: #fff 6px solid;
+    height: 30px;
+    position: fixed;
+    width: 30px;
+}
+
+#corner-nw {
+    border-bottom: 0;
+    border-right: 0;
+    border-top-left-radius: 20px;
+    left: 20px;
+    top: 20px;
+}
+
+#corner-no {
+    border-bottom: 0;
+    border-left: 0;
+    border-top-right-radius: 20px;
+    right: 20px;
+    top: 20px;
+}
+
+#corner-so {
+    border-bottom-right-radius: 20px;
+    border-left: 0;
+    border-top: 0;
+    bottom: 20px;
+    right: 20px;
+}
+
+#corner-sw {
+    border-bottom-left-radius: 20px;
+    border-right: 0;
+    border-top: 0;
+    bottom: 20px;
+    left: 20px;
+}
\ No newline at end of file
diff --git a/application/assets/fonts/Lato-Regular.ttf b/application/assets/fonts/Lato-Regular.ttf
new file mode 100644
index 00000000..33eba8b1
Binary files /dev/null and b/application/assets/fonts/Lato-Regular.ttf differ
diff --git a/application/assets/fonts/icons/100.svg b/application/assets/fonts/icons/100.svg
new file mode 100644
index 00000000..b988bc3b
--- /dev/null
+++ b/application/assets/fonts/icons/100.svg
@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 44.1 (41455) - http://www.bohemiancoding.com/sketch -->
+    <title>100</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round">
+        <g id="Artboard-4" transform="translate(-92.000000, -819.000000)" stroke="#333333" stroke-width="2">
+            <g id="322" transform="translate(92.000000, 819.000000)">
+                <path d="M3,7 L8,3 C8,3 3,13.5 3,17" id="1" stroke-linejoin="round"></path>
+                <path d="M12.4358982,3 C10.9358982,3.5 9.93589818,6 9.43589818,8 C8.93589818,10 8.34414647,13 10.9358982,13 C14.5276499,13 14.0276499,5 14.0276499,5" id="0"></path>
+                <path d="M19.4358982,3 C17.9358982,3.5 16.9358982,6 16.4358982,8 C15.9358982,10 15.3441465,13 17.9358982,13 C21.5276499,13 21.0276499,5 21.0276499,5" id="0"></path>
+                <path d="M7,17 C7,17 12,15 18,16" id="Line-1"></path>
+                <path d="M19,19 C10.5,18.1020408 4,21 4,21" id="Line-2" stroke-linejoin="round"></path>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/application/assets/fonts/icons/accessibility.svg b/application/assets/fonts/icons/accessibility.svg
new file mode 100644
index 00000000..0749fbf5
--- /dev/null
+++ b/application/assets/fonts/icons/accessibility.svg
@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 44.1 (41455) - http://www.bohemiancoding.com/sketch -->
+    <title>accessibility</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard-4" transform="translate(-92.000000, -907.000000)">
+            <g id="362" transform="translate(92.000000, 907.000000)">
+                <circle id="Circle" stroke="#333333" stroke-width="2" cx="12" cy="12" r="10"></circle>
+                <circle id="Head" fill="#333333" cx="12" cy="7" r="2"></circle>
+                <path d="M7.5,10 C7.5,10 9.03405762,11 12,11 C14.9659424,11 16.5,9.99584961 16.5,9.99584961" id="Arms" stroke="#333333" stroke-width="2" stroke-linecap="round"></path>
+                <path d="M10,18 C10,18 11.1715543,15.3137829 11.5,14 C11.8284457,12.6862171 11.5,11 11.5,11 L12.5,11 C12.5,11 12.294965,13.1798598 12.5,14 C12.8392358,15.3569432 14,18 14,18" id="Legs" stroke="#333333" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/application/assets/fonts/icons/add.svg b/application/assets/fonts/icons/add.svg
new file mode 100644
index 00000000..1855e215
--- /dev/null
+++ b/application/assets/fonts/icons/add.svg
@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 44.1 (41455) - http://www.bohemiancoding.com/sketch -->
+    <title>add</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard-4" transform="translate(-92.000000, -115.000000)">
+            <g id="2" transform="translate(92.000000, 115.000000)">
+                <circle id="Circle" stroke="#333333" stroke-width="2" cx="12" cy="12" r="10"></circle>
+                <path d="M13,11 L13,7.99539757 C13,7.4556644 12.5522847,7 12,7 C11.4438648,7 11,7.44565467 11,7.99539757 L11,11 L7.99539757,11 C7.4556644,11 7,11.4477153 7,12 C7,12.5561352 7.44565467,13 7.99539757,13 L11,13 L11,16.0046024 C11,16.5443356 11.4477153,17 12,17 C12.5561352,17 13,16.5543453 13,16.0046024 L13,13 L16.0046024,13 C16.5443356,13 17,12.5522847 17,12 C17,11.4438648 16.5543453,11 16.0046024,11 L13,11 Z" id="Add" fill="#333333"></path>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/application/assets/fonts/icons/airdrop.svg b/application/assets/fonts/icons/airdrop.svg
new file mode 100644
index 00000000..717cc60f
--- /dev/null
+++ b/application/assets/fonts/icons/airdrop.svg
@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 44.1 (41455) - http://www.bohemiancoding.com/sketch -->
+    <title>airdrop</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard-4" transform="translate(-884.000000, -423.000000)">
+            <g id="160" transform="translate(884.000000, 423.000000)">
+                <path d="M17.4369971,19.1727208 C19.601945,17.5291218 21,14.9278275 21,12 C21,7.02943725 16.9705627,3 12,3 C7.02943725,3 3,7.02943725 3,12 C3,14.9318445 4.40189385,17.5362591 6.57191804,19.1794803" id="3" stroke="#333333" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
+                <path d="M15.775673,16.6633323 C17.1326432,15.5632992 18,13.8829406 18,12 C18,8.6862915 15.3137085,6 12,6 C8.6862915,6 6,8.6862915 6,12 C6,13.8858968 6.87008239,15.568575 8.23072187,16.6685092" id="2" stroke="#333333" stroke-width="2" stroke-linecap="round"></path>
+                <path d="M14.0961356,14.1462114 C14.6538098,13.6014687 15,12.8411629 15,12 C15,10.3431458 13.6568542,9 12,9 C10.3431458,9 9,10.3431458 9,12 C9,12.840157 9.34536273,13.5996503 9.90186476,14.1442563" id="1" stroke="#333333" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
+                <ellipse id="0" fill="#333333" cx="12" cy="12.0183973" rx="1" ry="1.00183973"></ellipse>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/application/assets/fonts/icons/airplay-audio.svg b/application/assets/fonts/icons/airplay-audio.svg
new file mode 100644
index 00000000..6ee63b1e
--- /dev/null
+++ b/application/assets/fonts/icons/airplay-audio.svg
@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 44.1 (41455) - http://www.bohemiancoding.com/sketch -->
+    <title>airplay-audio</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard-4" transform="translate(-796.000000, -423.000000)" fill="#333333">
+            <g id="158" transform="translate(796.000000, 423.000000)">
+                <path d="M4.98310243,19.1248288 C3.14165118,17.3111002 2,14.7888735 2,12 C2,6.4771525 6.4771525,2 12,2 C17.5228475,2 22,6.4771525 22,12 C22,14.7888735 20.8583488,17.3111002 19.0168976,19.1248288 L17.7061531,17.6071247 C19.1248701,16.1635092 20,14.1839534 20,12 C20,7.581722 16.418278,4 12,4 C7.581722,4 4,7.581722 4,12 C4,14.1839534 4.87512988,16.1635092 6.29384687,17.6071247 L4.98310243,19.1248288 Z M6.94996964,16.8474036 C5.74228051,15.5895525 5,13.8814607 5,12 C5,8.13400675 8.13400675,5 12,5 C15.8659932,5 19,8.13400675 19,12 C19,13.8814607 18.2577195,15.5895525 17.0500304,16.8474036 L15.734764,15.3244636 C16.5217867,14.4409376 17,13.2763152 17,12 C17,9.23857625 14.7614237,7 12,7 C9.23857625,7 7,9.23857625 7,12 C7,13.2763152 7.47821329,14.4409376 8.26523602,15.3244636 L6.94996964,16.8474036 Z M8.92592029,14.5594607 C8.34779754,13.8658545 8,12.9735435 8,12 C8,9.790861 9.790861,8 12,8 C14.209139,8 16,9.790861 16,12 C16,12.9735435 15.6522025,13.8658545 15.0740797,14.5594607 L13.7303617,13.0035767 C13.9018142,12.7085964 14,12.3657645 14,12 C14,10.8954305 13.1045695,10 12,10 C10.8954305,10 10,10.8954305 10,12 C10,12.3657645 10.0981858,12.7085964 10.2696383,13.0035767 L8.92592029,14.5594607 Z" id="audio" fill-rule="nonzero"></path>
+                <polygon id="Arrow" stroke="#333333" stroke-width="2" stroke-linejoin="round" points="12 15 17 21 7 21"></polygon>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/application/assets/fonts/icons/airplay-video.svg b/application/assets/fonts/icons/airplay-video.svg
new file mode 100644
index 00000000..581515b2
--- /dev/null
+++ b/application/assets/fonts/icons/airplay-video.svg
@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 44.1 (41455) - http://www.bohemiancoding.com/sketch -->
+    <title>airplay-video</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard-4" transform="translate(-752.000000, -423.000000)" fill="#333333">
+            <g id="157" transform="translate(752.000000, 423.000000)">
+                <path d="M19.1632285,17.9958742 C20.7455119,17.9132011 22,16.5984601 22,14.9914698 L22,7.0085302 C22,5.35043647 20.6598453,4 19.0049107,4 L4.99508929,4 C3.33899222,4 2,5.34829734 2,7.0085302 L2,14.9914698 C2,16.5963573 3.25552676,17.9130154 4.83678095,17.9958629 L6.5,16 L4.99508929,16 C4.4481604,16 4,15.5484013 4,14.9914698 L4,7.0085302 C4,6.4497782 4.44667411,6 4.99508929,6 L19.0049107,6 C19.5518396,6 20,6.45159872 20,7.0085302 L20,14.9914698 C20,15.5502218 19.5533259,16 19.0049107,16 L17.5,16 L19.1632285,17.9958742 Z" id="Screen" fill-rule="nonzero"></path>
+                <polygon id="Arrow" stroke="#333333" stroke-width="2" stroke-linejoin="round" points="12 14 17 20 7 20"></polygon>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/application/assets/fonts/icons/airpods.svg b/application/assets/fonts/icons/airpods.svg
new file mode 100644
index 00000000..0748780a
--- /dev/null
+++ b/application/assets/fonts/icons/airpods.svg
@@ -0,0 +1,23 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 44.1 (41455) - http://www.bohemiancoding.com/sketch -->
+    <title>airpods</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard-4" transform="translate(-180.000000, -643.000000)" stroke="#333333">
+            <g id="244" transform="translate(180.000000, 643.000000)">
+                <g id="Left" transform="translate(1.000000, 2.000000)">
+                    <path d="M6,8 C6,8 5,9.5 3,9 C1,8.5 0,6 0,6 L0,3 C0,3 0.896249403,7.60199647e-16 4,0 C9,0 9,5 9,8 L9,18.9938347 C9,19.5495244 8.55733967,20 8.00104344,20 L6.99895656,20 C6.44724809,20 6,19.544239 6,18.9975267 L6,8 Z" id="Body" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
+                    <path d="M1,1 L2.19645262,2.59527016 C2.36409721,2.81879628 2.5,3.2157526 2.5,3.49538898 L2.5,5.50461102 C2.5,5.7782068 2.36157227,6.18457031 2.19645262,6.40472984 L1,8" id="Speaker" stroke-width="2"></path>
+                    <path d="M7,17.5 L8,17.5" id="Tip"></path>
+                </g>
+                <g id="Right" transform="translate(18.500000, 12.000000) scale(-1, 1) translate(-18.500000, -12.000000) translate(14.000000, 2.000000)">
+                    <path d="M6,8 C6,8 5,9.5 3,9 C1,8.5 0,6 0,6 L0,3 C0,3 0.896249403,7.60199647e-16 4,0 C9,0 9,5 9,8 L9,18.9938347 C9,19.5495244 8.55733967,20 8.00104344,20 L6.99895656,20 C6.44724809,20 6,19.544239 6,18.9975267 L6,8 Z" id="Body" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
+                    <path d="M1,1 L2.19645262,2.59527016 C2.36409721,2.81879628 2.5,3.2157526 2.5,3.49538898 L2.5,5.50461102 C2.5,5.7782068 2.36157227,6.18457031 2.19645262,6.40472984 L1,8" id="Speaker" stroke-width="2"></path>
+                    <path d="M7,17.5 L8,17.5" id="Tip"></path>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/application/assets/fonts/icons/alarm.svg b/application/assets/fonts/icons/alarm.svg
new file mode 100644
index 00000000..a9cc714e
--- /dev/null
+++ b/application/assets/fonts/icons/alarm.svg
@@ -0,0 +1,19 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 44.1 (41455) - http://www.bohemiancoding.com/sketch -->
+    <title>alarm</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard-4" transform="translate(-180.000000, -687.000000)">
+            <g id="264" transform="translate(180.000000, 687.000000)">
+                <path d="M13.6686291,3.1385935 C14.4613033,1.85521598 15.8807785,1 17.5,1 C19.9852814,1 22,3.01471863 22,5.5 C22,6.62544421 21.5868467,7.6543913 20.9039359,8.44344549 C20.5744613,7.80091205 20.1774803,7.19870588 19.7223546,6.64618894 C19.8997913,6.30285146 20,5.91312823 20,5.5 C20,4.11928813 18.8807119,3 17.5,3 C16.8141835,3 16.1928663,3.27615418 15.7411799,3.72333095 C15.0822457,3.45733534 14.3884822,3.25950971 13.6686291,3.1385935 Z" id="Right-Bell" fill="#333333" fill-rule="nonzero"></path>
+                <path d="M2,3.1385935 C2.79267429,1.85521598 4.21214942,1 5.83137094,1 C8.31665231,1 10.3313709,3.01471863 10.3313709,5.5 C10.3313709,6.62544421 9.91821765,7.6543913 9.23530685,8.44344549 C8.90583229,7.80091205 8.50885119,7.19870588 8.05372552,6.64618894 C8.23116222,6.30285146 8.33137094,5.91312823 8.33137094,5.5 C8.33137094,4.11928813 7.21208281,3 5.83137094,3 C5.14555445,3 4.52423723,3.27615418 4.07255086,3.72333095 C3.41361662,3.45733534 2.71985318,3.25950971 2,3.1385935 Z" id="Left-Bell" fill="#333333" fill-rule="nonzero" transform="translate(6.165685, 4.721723) scale(-1, 1) translate(-6.165685, -4.721723) "></path>
+                <circle id="Faec" stroke="#333333" stroke-width="2" cx="12" cy="13" r="8"></circle>
+                <path d="M17,20 L19,22" id="Right-Leg" stroke="#333333" stroke-width="2" stroke-linecap="round"></path>
+                <path d="M7,20 L5,22" id="Left-Leg" stroke="#333333" stroke-width="2" stroke-linecap="round"></path>
+                <polyline id="Hands" stroke="#333333" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" points="12 9 12 13 15 13"></polyline>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/application/assets/fonts/icons/albums.svg b/application/assets/fonts/icons/albums.svg
new file mode 100644
index 00000000..860630db
--- /dev/null
+++ b/application/assets/fonts/icons/albums.svg
@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 44.1 (41455) - http://www.bohemiancoding.com/sketch -->
+    <title>albums</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard-4" transform="translate(-312.000000, -511.000000)">
+            <g id="187" transform="translate(312.000000, 511.000000)">
+                <rect id="Album" stroke="#333333" stroke-width="2" x="4" y="6" width="16" height="16" rx="1"></rect>
+                <path d="M16,10.9699569 L16,15.0009084 L16,16.4966223 C16,17.3250494 15.3342028,17.9966223 14.5,17.9966223 C13.6715729,17.9966223 13,17.330825 13,16.4966223 C13,15.6681951 13.6657972,14.9966223 14.5,14.9966223 L15,14.9966223 L15,12.1262761 L11,12.8925039 L11,16.5234614 L11,17.5417282 C11,18.3701554 10.3342028,19.0417282 9.5,19.0417282 C8.67157288,19.0417282 8,18.375931 8,17.5417282 C8,16.7133011 8.66579723,16.0417282 9.5,16.0417282 L10,16.0417282 L10,12.0385583 L10,11.0227163 C10,10.4684619 10.4315052,9.93649206 10.990778,9.82935949 L15.009222,9.05959867 C15.5564136,8.95478034 16,9.32204645 16,9.87337475 L16,10.9699569 Z" id="Note" fill="#333333"></path>
+                <path d="M5,3.5 C5,3.22385763 5.21990657,3 5.49826741,3 L18.5017326,3 C18.7769181,3 19,3.23193359 19,3.5 C19,3.77614237 18.7800934,4 18.5017326,4 L5.49826741,4 C5.22308192,4 5,3.76806641 5,3.5 Z M6,1.5 C6,1.22385763 6.22900057,1 6.50034732,1 L17.4996527,1 C17.7759869,1 18,1.23193359 18,1.5 C18,1.77614237 17.7709994,2 17.4996527,2 L6.50034732,2 C6.22401312,2 6,1.76806641 6,1.5 Z" id="Albums" fill="#333333"></path>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/application/assets/fonts/icons/alert.svg b/application/assets/fonts/icons/alert.svg
new file mode 100644
index 00000000..b57bcac1
--- /dev/null
+++ b/application/assets/fonts/icons/alert.svg
@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 44.1 (41455) - http://www.bohemiancoding.com/sketch -->
+    <title>alert</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard-4" transform="translate(-48.000000, -467.000000)">
+            <g id="161" transform="translate(48.000000, 467.000000)">
+                <path d="M12,1.96027114 L22.7098475,21 L1.29015252,21 L12,1.96027114 Z" id="Triangle-2" stroke="#333333" stroke-width="2" stroke-linejoin="round"></path>
+                <path d="M12,17.75 C12.6903559,17.75 13.25,17.1903559 13.25,16.5 C13.25,15.8096441 12.6903559,15.25 12,15.25 C11.3096441,15.25 10.75,15.8096441 10.75,16.5 C10.75,17.1903559 11.3096441,17.75 12,17.75 Z" id="Dot" fill="#333333"></path>
+                <rect id="Line" fill="#333333" x="11" y="9" width="2" height="5" rx="1"></rect>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/application/assets/fonts/icons/align-bottom.svg b/application/assets/fonts/icons/align-bottom.svg
new file mode 100644
index 00000000..9c747119
--- /dev/null
+++ b/application/assets/fonts/icons/align-bottom.svg
@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 44.1 (41455) - http://www.bohemiancoding.com/sketch -->
+    <title>align-bottom</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard-4" transform="translate(-884.000000, -1090.000000)" stroke="#333333" stroke-width="2">
+            <g id="Extras" transform="translate(48.000000, 1046.000000)">
+                <g id="align-bottom" transform="translate(836.000000, 44.000000)">
+                    <path d="M21,21 L3,21" id="Bottom" stroke-linecap="round" stroke-linejoin="round"></path>
+                    <rect id="Item-2" x="14" y="8" width="4" height="10" rx="1"></rect>
+                    <rect id="Item-1" x="6" y="3" width="4" height="15" rx="1"></rect>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/application/assets/fonts/icons/align-distribute-bottom.svg b/application/assets/fonts/icons/align-distribute-bottom.svg
new file mode 100644
index 00000000..b506a251
--- /dev/null
+++ b/application/assets/fonts/icons/align-distribute-bottom.svg
@@ -0,0 +1,19 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 44.1 (41455) - http://www.bohemiancoding.com/sketch -->
+    <title>align-distribute-bottom</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard-4" transform="translate(-180.000000, -1134.000000)" stroke="#333333" stroke-width="2">
+            <g id="Extras" transform="translate(48.000000, 1046.000000)">
+                <g id="distribute-bottom" transform="translate(132.000000, 88.000000)">
+                    <rect id="Item-2" x="7" y="6" width="10" height="4" rx="1"></rect>
+                    <rect id="Item-1" x="5" y="14" width="14" height="4" rx="1"></rect>
+                    <path d="M21,18 L3,18.0000296" id="Bottom-Bottom" stroke-linecap="round"></path>
+                    <path d="M21,10 L3,10" id="Top-Bottom" stroke-linecap="round"></path>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/application/assets/fonts/icons/align-distribute-h.svg b/application/assets/fonts/icons/align-distribute-h.svg
new file mode 100644
index 00000000..f41fdbbd
--- /dev/null
+++ b/application/assets/fonts/icons/align-distribute-h.svg
@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 44.1 (41455) - http://www.bohemiancoding.com/sketch -->
+    <title>align-distribute-h</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard-4" transform="translate(-796.000000, -687.000000)" stroke="#333333" stroke-width="2">
+            <g id="278" transform="translate(796.000000, 687.000000)">
+                <rect id="Item-2" x="14" y="7" width="4" height="10" rx="1"></rect>
+                <rect id="Item-1" x="6" y="5" width="4" height="14" rx="1"></rect>
+                <path d="M8,3 L8,5 M8,19 L8,21" id="Left-Centre" stroke-linecap="round"></path>
+                <path d="M16,3 L16,7 M16,17 L16,21" id="Right-Centre" stroke-linecap="round"></path>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/application/assets/fonts/icons/align-distribute-left.svg b/application/assets/fonts/icons/align-distribute-left.svg
new file mode 100644
index 00000000..3382bda4
--- /dev/null
+++ b/application/assets/fonts/icons/align-distribute-left.svg
@@ -0,0 +1,19 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 44.1 (41455) - http://www.bohemiancoding.com/sketch -->
+    <title>align-distribute-left</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard-4" transform="translate(-48.000000, -1134.000000)" stroke="#333333" stroke-width="2">
+            <g id="Extras" transform="translate(48.000000, 1046.000000)">
+                <g id="distribute-left" transform="translate(0.000000, 88.000000)">
+                    <rect id="Item-2" x="14" y="7" width="4" height="10" rx="1"></rect>
+                    <rect id="Item-1" x="6" y="5" width="4" height="14" rx="1"></rect>
+                    <path d="M6,3 L6,21" id="Left-Left" stroke-linecap="round"></path>
+                    <path d="M14.0004883,3 L14,21" id="Right-Left" stroke-linecap="round"></path>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/application/assets/fonts/icons/align-distribute-right.svg b/application/assets/fonts/icons/align-distribute-right.svg
new file mode 100644
index 00000000..86a4f101
--- /dev/null
+++ b/application/assets/fonts/icons/align-distribute-right.svg
@@ -0,0 +1,19 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 44.1 (41455) - http://www.bohemiancoding.com/sketch -->
+    <title>align-distribute-right</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard-4" transform="translate(-92.000000, -1134.000000)" stroke="#333333" stroke-width="2">
+            <g id="Extras" transform="translate(48.000000, 1046.000000)">
+                <g id="distribute-right" transform="translate(44.000000, 88.000000)">
+                    <rect id="Item-2" x="14" y="7" width="4" height="10" rx="1"></rect>
+                    <rect id="Item-1" x="6" y="5" width="4" height="14" rx="1"></rect>
+                    <path d="M10,3 L10,21" id="Left-Right" stroke-linecap="round"></path>
+                    <path d="M18.0004883,3 L18,21" id="Right-Right" stroke-linecap="round"></path>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/application/assets/fonts/icons/align-distribute-top.svg b/application/assets/fonts/icons/align-distribute-top.svg
new file mode 100644
index 00000000..6f0a6afa
--- /dev/null
+++ b/application/assets/fonts/icons/align-distribute-top.svg
@@ -0,0 +1,19 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 44.1 (41455) - http://www.bohemiancoding.com/sketch -->
+    <title>align-distribute-top</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard-4" transform="translate(-136.000000, -1134.000000)" stroke="#333333" stroke-width="2">
+            <g id="Extras" transform="translate(48.000000, 1046.000000)">
+                <g id="distribute-top" transform="translate(88.000000, 88.000000)">
+                    <rect id="Item-2" x="7" y="6" width="10" height="4" rx="1"></rect>
+                    <rect id="Item-1" x="5" y="14" width="14" height="4" rx="1"></rect>
+                    <path d="M21,14.015625 L3,14.0156546" id="Bottom-Top" stroke-linecap="round"></path>
+                    <path d="M21,6.0078125 L3,6.0078125" id="Top-Top" stroke-linecap="round"></path>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/application/assets/fonts/icons/align-distribute-v.svg b/application/assets/fonts/icons/align-distribute-v.svg
new file mode 100644
index 00000000..6f225ca3
--- /dev/null
+++ b/application/assets/fonts/icons/align-distribute-v.svg
@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 44.1 (41455) - http://www.bohemiancoding.com/sketch -->
+    <title>align-distribute-v</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard-4" transform="translate(-840.000000, -687.000000)" stroke="#333333" stroke-width="2">
+            <g id="279" transform="translate(840.000000, 687.000000)">
+                <rect id="Item-2" x="7" y="6" width="10" height="4" rx="1"></rect>
+                <rect id="Item-1" x="5" y="14" width="14" height="4" rx="1"></rect>
+                <path d="M21,16.015625 L19,16.015625 M5,16 L3,16.015625" id="Centre-Bottom" stroke-linecap="round"></path>
+                <path d="M21,8 L17,8 M7,8 L3,8.0078125" id="Centre-Top" stroke-linecap="round"></path>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/application/assets/fonts/icons/align-horizontal.svg b/application/assets/fonts/icons/align-horizontal.svg
new file mode 100644
index 00000000..a953e9fa
--- /dev/null
+++ b/application/assets/fonts/icons/align-horizontal.svg
@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 44.1 (41455) - http://www.bohemiancoding.com/sketch -->
+    <title>align-horizontal</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard-4" transform="translate(-752.000000, -687.000000)" stroke="#333333" stroke-width="2">
+            <g id="277" transform="translate(752.000000, 687.000000)">
+                <g id="centre" transform="translate(12.000000, 12.000000) rotate(90.000000) translate(-12.000000, -12.000000) translate(4.000000, 3.000000)">
+                    <path d="M8,0 L8,3 M8,7 L8,11 M8,15 L8,18" id="Centre" stroke-linecap="round" stroke-linejoin="round"></path>
+                    <rect id="Item-2" x="3" y="3" width="10" height="4" rx="1"></rect>
+                    <rect id="Item-1" x="0" y="11" width="16" height="4" rx="1"></rect>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/application/assets/fonts/icons/align-left.svg b/application/assets/fonts/icons/align-left.svg
new file mode 100644
index 00000000..527f5ed9
--- /dev/null
+++ b/application/assets/fonts/icons/align-left.svg
@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 44.1 (41455) - http://www.bohemiancoding.com/sketch -->
+    <title>align-left</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard-4" transform="translate(-708.000000, -687.000000)" stroke="#333333" stroke-width="2">
+            <g id="276" transform="translate(708.000000, 687.000000)">
+                <path d="M3,3 L3,21" id="Left" stroke-linecap="round" stroke-linejoin="round"></path>
+                <rect id="Item-2" x="6" y="6" width="10" height="4" rx="1"></rect>
+                <rect id="Item-1" x="6" y="14" width="15" height="4" rx="1"></rect>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/application/assets/fonts/icons/align-right.svg b/application/assets/fonts/icons/align-right.svg
new file mode 100644
index 00000000..cff52150
--- /dev/null
+++ b/application/assets/fonts/icons/align-right.svg
@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 44.1 (41455) - http://www.bohemiancoding.com/sketch -->
+    <title>align-right</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard-4" transform="translate(-796.000000, -1090.000000)" stroke="#333333" stroke-width="2">
+            <g id="Extras" transform="translate(48.000000, 1046.000000)">
+                <g id="align-right" transform="translate(748.000000, 44.000000)">
+                    <path d="M21,3 L21,21" id="Right" stroke-linecap="round" stroke-linejoin="round"></path>
+                    <rect id="Item-2" x="8" y="6" width="10" height="4" rx="1"></rect>
+                    <rect id="Item-1" x="3" y="14" width="15" height="4" rx="1"></rect>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/application/assets/fonts/icons/align-top.svg b/application/assets/fonts/icons/align-top.svg
new file mode 100644
index 00000000..63888e9e
--- /dev/null
+++ b/application/assets/fonts/icons/align-top.svg
@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 44.1 (41455) - http://www.bohemiancoding.com/sketch -->
+    <title>align-top</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard-4" transform="translate(-840.000000, -1090.000000)" stroke="#333333" stroke-width="2">
+            <g id="Extras" transform="translate(48.000000, 1046.000000)">
+                <g id="align-top" transform="translate(792.000000, 44.000000)">
+                    <path d="M21,3 L3,3" id="Top" stroke-linecap="round" stroke-linejoin="round"></path>
+                    <rect id="Item-2" x="14" y="6" width="4" height="10" rx="1"></rect>
+                    <rect id="Item-1" x="6" y="6" width="4" height="15" rx="1"></rect>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/application/assets/fonts/icons/align-vertical.svg b/application/assets/fonts/icons/align-vertical.svg
new file mode 100644
index 00000000..44e5679c
--- /dev/null
+++ b/application/assets/fonts/icons/align-vertical.svg
@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 44.1 (41455) - http://www.bohemiancoding.com/sketch -->
+    <title>align-vertical</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard-4" transform="translate(-664.000000, -687.000000)" stroke="#333333" stroke-width="2">
+            <g id="275" transform="translate(664.000000, 687.000000)">
+                <path d="M12,3 L12,6 M12,10 L12,14 M12,18 L12,21" id="Centre" stroke-linecap="round" stroke-linejoin="round"></path>
+                <rect id="Item-2" x="7" y="6" width="10" height="4" rx="1"></rect>
+                <rect id="Item-1" x="4" y="14" width="16" height="4" rx="1"></rect>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/application/assets/fonts/icons/anchor.svg b/application/assets/fonts/icons/anchor.svg
new file mode 100644
index 00000000..bf1b5356
--- /dev/null
+++ b/application/assets/fonts/icons/anchor.svg
@@ -0,0 +1,19 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 44.1 (41455) - http://www.bohemiancoding.com/sketch -->
+    <title>anchor</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard-4" transform="translate(-840.000000, -203.000000)" stroke="#333333" stroke-width="2">
+            <g id="59" transform="translate(840.000000, 203.000000)">
+                <circle id="Oval-60" cx="12" cy="5" r="2"></circle>
+                <path d="M12,7 L12,21.1421356" id="Path-139"></path>
+                <path d="M9,11 L15.0207973,11" id="Path-140" stroke-linecap="round"></path>
+                <path d="M4,15 C5.56983294,18.4677886 7.94582125,21 12,21 C16.0565604,21 18.4315035,18.4710658 20,15" id="Oval-61" stroke-linecap="round" stroke-linejoin="round"></path>
+                <polygon id="Path-142" stroke-linecap="round" stroke-linejoin="round" points="20.5 17 20 15 18 15.5"></polygon>
+                <polygon id="Path-142" stroke-linecap="round" stroke-linejoin="round" transform="translate(4.750000, 16.000000) scale(-1, 1) translate(-4.750000, -16.000000) " points="6 17 5.5 15 3.5 15.5"></polygon>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/application/assets/fonts/icons/archive.svg b/application/assets/fonts/icons/archive.svg
new file mode 100644
index 00000000..34c5678d
--- /dev/null
+++ b/application/assets/fonts/icons/archive.svg
@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 44.1 (41455) - http://www.bohemiancoding.com/sketch -->
+    <title>archive</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard-4" transform="translate(-312.000000, -335.000000)">
+            <g id="107" transform="translate(312.000000, 335.000000)">
+                <path d="M2,5 C2,3.89694404 2.89113798,3 3.99339768,3 L20.0066023,3 C21.1097387,3 22,3.89379466 22,5 L22,7 L2,7 L2,5 Z" id="Lid" stroke="#333333" stroke-width="2" stroke-linejoin="round"></path>
+                <path d="M3,7 L21,7 L21,18.9975267 C21,20.1037736 20.1073512,21 18.9991283,21 L5.00087166,21 C3.89677125,21 3,20.0974995 3,18.9975267 L3,7 Z" id="Box" stroke="#333333" stroke-width="2"></path>
+                <rect id="Handle" fill="#333333" x="8" y="10" width="8" height="2" rx="1"></rect>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/application/assets/fonts/icons/arrow-down-left.svg b/application/assets/fonts/icons/arrow-down-left.svg
new file mode 100644
index 00000000..06346191
--- /dev/null
+++ b/application/assets/fonts/icons/arrow-down-left.svg
@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 44.1 (41455) - http://www.bohemiancoding.com/sketch -->
+    <title>arrow-down-left</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round">
+        <g id="Artboard-4" transform="translate(-708.000000, -1046.000000)" stroke="#333333" stroke-width="2">
+            <g id="Extras" transform="translate(48.000000, 1046.000000)">
+                <g id="down-left" transform="translate(660.000000, 0.000000)">
+                    <path d="M19,5 L6,18" id="Line"></path>
+                    <polyline id="Head" stroke-linejoin="round" transform="translate(11.000000, 13.000000) scale(1, -1) translate(-11.000000, -13.000000) " points="5 19 5 7 17 7"></polyline>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/application/assets/fonts/icons/arrow-down-right.svg b/application/assets/fonts/icons/arrow-down-right.svg
new file mode 100644
index 00000000..a4271179
--- /dev/null
+++ b/application/assets/fonts/icons/arrow-down-right.svg
@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 44.1 (41455) - http://www.bohemiancoding.com/sketch -->
+    <title>arrow-down-right</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round">
+        <g id="Artboard-4" transform="translate(-620.000000, -1046.000000)" stroke="#333333" stroke-width="2">
+            <g id="Extras" transform="translate(48.000000, 1046.000000)">
+                <g id="down-right" transform="translate(572.000000, 0.000000)">
+                    <path d="M18,5 L5,18" id="Line" transform="translate(11.500000, 11.500000) scale(-1, 1) translate(-11.500000, -11.500000) "></path>
+                    <polyline id="Head-" stroke-linejoin="round" transform="translate(13.000000, 13.000000) scale(-1, -1) translate(-13.000000, -13.000000) " points="7 19 7 7 19 7"></polyline>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/application/assets/fonts/icons/arrow-down.svg b/application/assets/fonts/icons/arrow-down.svg
new file mode 100644
index 00000000..88fd8935
--- /dev/null
+++ b/application/assets/fonts/icons/arrow-down.svg
@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 44.1 (41455) - http://www.bohemiancoding.com/sketch -->
+    <title>arrow-down</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round">
+        <g id="Artboard-4" transform="translate(-532.000000, -1046.000000)" stroke="#333333" stroke-width="2">
+            <g id="Extras" transform="translate(48.000000, 1046.000000)">
+                <g id="down" transform="translate(484.000000, 0.000000)">
+                    <path d="M12,3 L12,20" id="Line"></path>
+                    <polyline id="Head" stroke-linejoin="round" transform="translate(12.000000, 17.000000) scale(-1, -1) translate(-12.000000, -17.000000) " points="4 21 12 13 20 21"></polyline>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/application/assets/fonts/icons/arrow-left.svg b/application/assets/fonts/icons/arrow-left.svg
new file mode 100644
index 00000000..ef479bd9
--- /dev/null
+++ b/application/assets/fonts/icons/arrow-left.svg
@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 44.1 (41455) - http://www.bohemiancoding.com/sketch -->
+    <title>arrow-left</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round">
+        <g id="Artboard-4" transform="translate(-444.000000, -1046.000000)" stroke="#333333" stroke-width="2">
+            <g id="Extras" transform="translate(48.000000, 1046.000000)">
+                <g id="left" transform="translate(396.000000, 0.000000)">
+                    <path d="M4,12 L21,12" id="Line"></path>
+                    <polyline id="Head" stroke-linejoin="round" transform="translate(7.000000, 12.000000) scale(-1, 1) translate(-7.000000, -12.000000) " points="3 4 11 12 3 20"></polyline>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/application/assets/fonts/icons/arrow-right.svg b/application/assets/fonts/icons/arrow-right.svg
new file mode 100644
index 00000000..285d1a3d
--- /dev/null
+++ b/application/assets/fonts/icons/arrow-right.svg
@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 44.1 (41455) - http://www.bohemiancoding.com/sketch -->
+    <title>arrow-right</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round">
+        <g id="Artboard-4" transform="translate(-884.000000, -159.000000)" stroke="#333333" stroke-width="2">
+            <g id="40" transform="translate(884.000000, 159.000000)">
+                <path d="M3,12 L20,12" id="Line"></path>
+                <polyline id="Head" stroke-linejoin="round" points="13 4 21 12 13 20"></polyline>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/application/assets/fonts/icons/arrow-up-left.svg b/application/assets/fonts/icons/arrow-up-left.svg
new file mode 100644
index 00000000..c4f94be1
--- /dev/null
+++ b/application/assets/fonts/icons/arrow-up-left.svg
@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 44.1 (41455) - http://www.bohemiancoding.com/sketch -->
+    <title>arrow-up-left</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round">
+        <g id="Artboard-4" transform="translate(-664.000000, -1046.000000)" stroke="#333333" stroke-width="2">
+            <g id="Extras" transform="translate(48.000000, 1046.000000)">
+                <g id="up-left" transform="translate(616.000000, 0.000000)">
+                    <path d="M19,6 L6,19" id="Line" transform="translate(12.500000, 12.500000) scale(-1, 1) translate(-12.500000, -12.500000) "></path>
+                    <polyline id="Head" stroke-linejoin="round" transform="translate(11.000000, 11.000000) scale(1, -1) translate(-11.000000, -11.000000) " points="5 5 5 17 17 17"></polyline>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/application/assets/fonts/icons/arrow-up-right.svg b/application/assets/fonts/icons/arrow-up-right.svg
new file mode 100644
index 00000000..467a0d4e
--- /dev/null
+++ b/application/assets/fonts/icons/arrow-up-right.svg
@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 44.1 (41455) - http://www.bohemiancoding.com/sketch -->
+    <title>arrow-up-right</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round">
+        <g id="Artboard-4" transform="translate(-576.000000, -1046.000000)" stroke="#333333" stroke-width="2">
+            <g id="Extras" transform="translate(48.000000, 1046.000000)">
+                <g id="up-right" transform="translate(528.000000, 0.000000)">
+                    <path d="M18,6 L5,19" id="Line"></path>
+                    <polyline id="Head" stroke-linejoin="round" transform="translate(13.000000, 11.000000) scale(-1, -1) translate(-13.000000, -11.000000) " points="7 5 7 17 19 17"></polyline>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/application/assets/fonts/icons/arrow-up.svg b/application/assets/fonts/icons/arrow-up.svg
new file mode 100644
index 00000000..8585e27f
--- /dev/null
+++ b/application/assets/fonts/icons/arrow-up.svg
@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 44.1 (41455) - http://www.bohemiancoding.com/sketch -->
+    <title>arrow-up</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round">
+        <g id="Artboard-4" transform="translate(-488.000000, -1046.000000)" stroke="#333333" stroke-width="2">
+            <g id="Extras" transform="translate(48.000000, 1046.000000)">
+                <g id="up" transform="translate(440.000000, 0.000000)">
+                    <path d="M12,4 L12,21" id="Line"></path>
+                    <polyline id="Head" stroke-linejoin="round" transform="translate(12.000000, 7.000000) scale(-1, 1) translate(-12.000000, -7.000000) " points="4 11 12 3 20 11"></polyline>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/application/assets/fonts/icons/atom.svg b/application/assets/fonts/icons/atom.svg
new file mode 100644
index 00000000..1784c276
--- /dev/null
+++ b/application/assets/fonts/icons/atom.svg
@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 44.1 (41455) - http://www.bohemiancoding.com/sketch -->
+    <title>atom</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard-4" transform="translate(-708.000000, -335.000000)">
+            <g id="115" transform="translate(708.000000, 335.000000)">
+                <circle id="Centre" fill="#333333" cx="12" cy="12" r="2"></circle>
+                <ellipse id="Oval-47" stroke="#333333" stroke-width="2" cx="12" cy="12" rx="4" ry="11"></ellipse>
+                <ellipse id="Oval-47" stroke="#333333" stroke-width="2" transform="translate(12.000000, 12.000000) rotate(-60.000000) translate(-12.000000, -12.000000) " cx="12" cy="12" rx="4" ry="11"></ellipse>
+                <ellipse id="Oval-47" stroke="#333333" stroke-width="2" transform="translate(12.000000, 12.000000) scale(1, -1) rotate(-60.000000) translate(-12.000000, -12.000000) " cx="12" cy="12" rx="4" ry="11"></ellipse>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/application/assets/fonts/icons/avocado.svg b/application/assets/fonts/icons/avocado.svg
new file mode 100644
index 00000000..dd18e8fd
--- /dev/null
+++ b/application/assets/fonts/icons/avocado.svg
@@ -0,0 +1,20 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 44.1 (41455) - http://www.bohemiancoding.com/sketch -->
+    <title>avocado</title>
+    <desc>Created with Sketch.</desc>
+    <defs>
+        <path d="M12,22 C15.8659932,22 19,18.9066946 19,15.0909091 C19,13 17.5,10 17,8.05003561 C16.0707221,4.42591783 14.5,2 12,2 C9.5,2 7.93175743,4.41624797 7,8.05003561 C6.5,10 5,13 5,15.0909091 C5,18.9066946 8.13400675,22 12,22 Z" id="path-1"></path>
+    </defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard-4" transform="translate(-136.000000, -819.000000)">
+            <g id="323" transform="translate(136.000000, 819.000000)">
+                <circle id="Stone" fill="#333333" cx="12" cy="15" r="3"></circle>
+                <g id="Body" stroke-width="2" stroke="#333333">
+                    <path stroke-opacity="0.246376812" d="M12,21 C15.3166135,21 18,18.3514626 18,15.0909091 C18,14.3678728 17.7788086,13.4195126 17.3340012,12.1104027 C17.2333337,11.8141287 17.124405,11.5071603 16.9801387,11.1101821 C16.2325747,9.05310829 16.2034859,8.96978285 16.0313372,8.29841521 C15.1258613,4.76712363 13.7559531,3 12,3 C10.2420227,3 8.87565492,4.76121044 7.96866277,8.29841521 C7.79651408,8.96978285 7.76742526,9.05310829 7.01986133,11.1101821 C6.87559498,11.5071603 6.7666663,11.8141287 6.66599877,12.1104027 C6.22119142,13.4195126 6,14.3678728 6,15.0909091 C6,18.3514626 8.68338655,21 12,21 Z"></path>
+                    <use xlink:href="#path-1"></use>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/application/assets/fonts/icons/back-alt.svg b/application/assets/fonts/icons/back-alt.svg
new file mode 100644
index 00000000..0f6899c0
--- /dev/null
+++ b/application/assets/fonts/icons/back-alt.svg
@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 44.1 (41455) - http://www.bohemiancoding.com/sketch -->
+    <title>back-alt</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard-4" transform="translate(-444.000000, -1090.000000)" stroke="#333333" stroke-width="2">
+            <g id="Extras" transform="translate(48.000000, 1046.000000)">
+                <g id="back" transform="translate(396.000000, 44.000000)">
+                    <circle id="Circle" cx="12" cy="12" r="10"></circle>
+                    <polyline id="Arrow" stroke-linecap="round" stroke-linejoin="round" transform="translate(11.500000, 12.000000) scale(-1, 1) translate(-11.500000, -12.000000) " points="10 9 13 12 10 15"></polyline>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/application/assets/fonts/icons/backpack.svg b/application/assets/fonts/icons/backpack.svg
new file mode 100644
index 00000000..7730dbe2
--- /dev/null
+++ b/application/assets/fonts/icons/backpack.svg
@@ -0,0 +1,20 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 44.1 (41455) - http://www.bohemiancoding.com/sketch -->
+    <title>backpack</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard-4" transform="translate(-180.000000, -775.000000)">
+            <g id="304" transform="translate(180.000000, 775.000000)">
+                <path d="M4,10.9907535 C4,6.57758222 7.59071231,3 12,3 L12,3 C16.418278,3 20,6.57559919 20,10.9907535 L20,21.0092049 C20,22.1086907 19.1054862,23 18.0059397,23 L5.99406028,23 C4.8927712,23 4,22.1017876 4,21.0092049 L4,10.9907535 Z" id="Backpack" stroke="#333333" stroke-width="2"></path>
+                <rect id="Front-Pocket" stroke="#333333" stroke-width="2" x="7" y="14" width="10" height="9" rx="1"></rect>
+                <rect id="Right-Pocket" fill="#333333" x="20" y="15" width="2" height="6" rx="1"></rect>
+                <rect id="Left-Pocket" fill="#333333" x="2" y="15" width="2" height="6" rx="1"></rect>
+                <rect id="Pocket" fill="#333333" x="7" y="17" width="10" height="1"></rect>
+                <polygon id="Label" stroke="#333333" stroke-width="2" fill="#333333" stroke-linecap="round" stroke-linejoin="round" points="12 7 11 8 12 9 13 8"></polygon>
+                <path d="M9.52460577,2.5 L14.4753942,2.5 C14.331086,1.12530889 13.5473124,0.5 12,0.5 C10.4526876,0.5 9.668914,1.12530889 9.52460577,2.5 Z" id="Handle" stroke="#333333"></path>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/application/assets/fonts/icons/badge-star.svg b/application/assets/fonts/icons/badge-star.svg
new file mode 100644
index 00000000..763d0861
--- /dev/null
+++ b/application/assets/fonts/icons/badge-star.svg
@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 44.1 (41455) - http://www.bohemiancoding.com/sketch -->
+    <title>badge-star</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard-4" transform="translate(-312.000000, -379.000000)">
+            <g id="126" transform="translate(312.000000, 379.000000)">
+                <circle id="Circle" stroke="#333333" stroke-width="2" cx="12" cy="12" r="8"></circle>
+                <path d="M9.85640646,4 L6.14359354,6.14359354 L4,9.85640646 L4,14.1435935 L6.14359354,17.8564065 L9.85640646,20 L14.1435935,20 L17.8564065,17.8564065 L20,14.1435935 L20,9.85640646 L17.8564065,6.14359354 L14.1435935,4 L9.85640646,4 Z M9.67542648,3.32457352 L12,1 L14.3245735,3.32457352 L17.5,2.47372056 L18.350853,5.64914704 L21.5262794,6.5 L20.6754265,9.67542648 L23,12 L20.6754265,14.3245735 L21.5262794,17.5 L18.350853,18.350853 L17.5,21.5262794 L14.3245735,20.6754265 L12,23 L9.67542648,20.6754265 L6.5,21.5262794 L5.64914704,18.350853 L2.47372056,17.5 L3.32457352,14.3245735 L1,12 L3.32457352,9.67542648 L2.47372056,6.5 L5.64914704,5.64914704 L6.5,2.47372056 L9.67542648,3.32457352 Z" id="Points" fill="#333333"></path>
+                <polygon id="Star" stroke="#333333" stroke-width="2" stroke-linejoin="round" points="12 13.9877997 9.64885899 15.236068 10.1094902 12.6142639 8.19577393 10.763932 10.8316007 10.3918363 12 8 13.1683993 10.3918363 15.8042261 10.763932 13.8905098 12.6142639 14.351141 15.236068"></polygon>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/application/assets/fonts/icons/badge-tick.svg b/application/assets/fonts/icons/badge-tick.svg
new file mode 100644
index 00000000..0268ead6
--- /dev/null
+++ b/application/assets/fonts/icons/badge-tick.svg
@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 44.1 (41455) - http://www.bohemiancoding.com/sketch -->
+    <title>badge-tick</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard-4" transform="translate(-356.000000, -379.000000)">
+            <g id="127" transform="translate(356.000000, 379.000000)">
+                <circle id="Circle" stroke="#333333" stroke-width="2" cx="12" cy="12" r="8"></circle>
+                <path d="M9.85640646,4 L6.14359354,6.14359354 L4,9.85640646 L4,14.1435935 L6.14359354,17.8564065 L9.85640646,20 L14.1435935,20 L17.8564065,17.8564065 L20,14.1435935 L20,9.85640646 L17.8564065,6.14359354 L14.1435935,4 L9.85640646,4 Z M9.67542648,3.32457352 L12,1 L14.3245735,3.32457352 L17.5,2.47372056 L18.350853,5.64914704 L21.5262794,6.5 L20.6754265,9.67542648 L23,12 L20.6754265,14.3245735 L21.5262794,17.5 L18.350853,18.350853 L17.5,21.5262794 L14.3245735,20.6754265 L12,23 L9.67542648,20.6754265 L6.5,21.5262794 L5.64914704,18.350853 L2.47372056,17.5 L3.32457352,14.3245735 L1,12 L3.32457352,9.67542648 L2.47372056,6.5 L5.64914704,5.64914704 L6.5,2.47372056 L9.67542648,3.32457352 Z" id="Points" fill="#333333"></path>
+                <polyline id="Tick" stroke="#333333" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" points="9 12 11 14 15 10"></polyline>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/application/assets/fonts/icons/bag.svg b/application/assets/fonts/icons/bag.svg
new file mode 100644
index 00000000..0b2ff02f
--- /dev/null
+++ b/application/assets/fonts/icons/bag.svg
@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 44.1 (41455) - http://www.bohemiancoding.com/sketch -->
+    <title>bag</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard-4" transform="translate(-620.000000, -291.000000)">
+            <g id="94" transform="translate(620.000000, 291.000000)">
+                <rect id="Bag" stroke="#333333" stroke-width="2" x="4" y="7" width="16" height="16" rx="1"></rect>
+                <rect id="Fold" fill="#333333" x="4" y="18" width="16" height="2"></rect>
+                <path d="M16,10 L16,5 C16,2.790861 14.209139,1 12,1 C9.790861,1 8,2.790861 8,5 L8,10" id="Handle" stroke="#333333" stroke-width="2" stroke-linecap="round"></path>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/application/assets/fonts/icons/balloon.svg b/application/assets/fonts/icons/balloon.svg
new file mode 100644
index 00000000..a4ed3c86
--- /dev/null
+++ b/application/assets/fonts/icons/balloon.svg
@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 44.1 (41455) - http://www.bohemiancoding.com/sketch -->
+    <title>balloon</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard-4" transform="translate(-444.000000, -731.000000)" stroke="#333333" stroke-width="2">
+            <g id="290" transform="translate(444.000000, 731.000000)">
+                <path d="M12,16 C15.3137085,16 18,10.6862568 18,7.24 C18,3.79374316 15.3137085,1 12,1 C8.6862915,1 6,3.79374316 6,7.24 C6,10.6862568 8.6862915,16 12,16 Z" id="Balloon"></path>
+                <path d="M12,4 C10.3431458,4 9,5.34314575 9,7" id="Highlight" stroke-linecap="round" stroke-linejoin="round"></path>
+                <polygon id="Knot" stroke-linecap="round" stroke-linejoin="round" points="12 17 11 18 13 18"></polygon>
+                <path d="M12,18.5 C12,20 12,22 14,23" id="String" stroke-linecap="round"></path>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/application/assets/fonts/icons/barcode.svg b/application/assets/fonts/icons/barcode.svg
new file mode 100644
index 00000000..45945461
--- /dev/null
+++ b/application/assets/fonts/icons/barcode.svg
@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 44.1 (41455) - http://www.bohemiancoding.com/sketch -->
+    <title>barcode</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard-4" transform="translate(-224.000000, -599.000000)" fill="#333333">
+            <g id="225" transform="translate(224.000000, 599.000000)">
+                <path d="M2,3.99339768 C2,3.44475929 2.44386482,3 3,3 C3.55228475,3 4,3.44494629 4,3.99339768 L4,20.0066023 C4,20.5552407 3.55613518,21 3,21 C2.44771525,21 2,20.5550537 2,20.0066023 L2,3.99339768 Z M20,3.99339768 C20,3.44475929 20.4438648,3 21,3 C21.5522847,3 22,3.44494629 22,3.99339768 L22,20.0066023 C22,20.5552407 21.5561352,21 21,21 C20.4477153,21 20,20.5550537 20,20.0066023 L20,3.99339768 Z M15,4.00748397 C15,3.45106594 15.4438648,3 16,3 C16.5522847,3 17,3.44892021 17,4.00748397 L17,16.992516 C17,17.5489341 16.5561352,18 16,18 C15.4477153,18 15,17.5510798 15,16.992516 L15,4.00748397 Z M10,4.00748397 C10,3.45106594 10.4438648,3 11,3 C11.5522847,3 12,3.44892021 12,4.00748397 L12,16.992516 C12,17.5489341 11.5561352,18 11,18 C10.4477153,18 10,17.5510798 10,16.992516 L10,4.00748397 Z M5,3.49907684 C5,3.22344431 5.23193359,3 5.5,3 C5.77614237,3 6,3.2236826 6,3.49907684 L6,17.5009232 C6,17.7765557 5.76806641,18 5.5,18 C5.22385763,18 5,17.7763174 5,17.5009232 L5,3.49907684 Z M13,3.49907684 C13,3.22344431 13.2319336,3 13.5,3 C13.7761424,3 14,3.2236826 14,3.49907684 L14,17.5009232 C14,17.7765557 13.7680664,18 13.5,18 C13.2238576,18 13,17.7763174 13,17.5009232 L13,3.49907684 Z M18,3.49907684 C18,3.22344431 18.2319336,3 18.5,3 C18.7761424,3 19,3.2236826 19,3.49907684 L19,17.5009232 C19,17.7765557 18.7680664,18 18.5,18 C18.2238576,18 18,17.7763174 18,17.5009232 L18,3.49907684 Z M7,4.00748397 C7,3.45106594 7.44386482,3 8,3 C8.55228475,3 9,3.44892021 9,4.00748397 L9,16.992516 C9,17.5489341 8.55613518,18 8,18 C7.44771525,18 7,17.5510798 7,16.992516 L7,4.00748397 Z M5,19 L9,19 L9,20 L5,20 L5,19 Z M11,19 L13,19 L13,20 L11,20 L11,19 Z M14,19 L19,19 L19,20 L14,20 L14,19 Z" id="Barcode"></path>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/application/assets/fonts/icons/basket.svg b/application/assets/fonts/icons/basket.svg
new file mode 100644
index 00000000..bdb12100
--- /dev/null
+++ b/application/assets/fonts/icons/basket.svg
@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 44.1 (41455) - http://www.bohemiancoding.com/sketch -->
+    <title>basket</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard-4" transform="translate(-356.000000, -599.000000)">
+            <g id="228" transform="translate(356.000000, 599.000000)">
+                <rect id="Top" stroke="#333333" stroke-width="2" x="2" y="9" width="20" height="4" rx="1"></rect>
+                <path d="M3.5,13 L5.25875327,20.0350131 C5.39199016,20.5679606 5.94748943,21 6.49850233,21 L17.5014977,21 C18.0529553,21 18.6075287,20.5698853 18.7412467,20.0350131 L20.5,13" id="Body" stroke="#333333" stroke-width="2"></path>
+                <path d="M10,15.4904785 C10,15.2195947 10.2319336,15 10.5,15 C10.7761424,15 11,15.2150574 11,15.4904785 L11,18.5095215 C11,18.7804053 10.7680664,19 10.5,19 C10.2238576,19 10,18.7849426 10,18.5095215 L10,15.4904785 Z M13,15.4904785 C13,15.2195947 13.2319336,15 13.5,15 C13.7761424,15 14,15.2150574 14,15.4904785 L14,18.5095215 C14,18.7804053 13.7680664,19 13.5,19 C13.2238576,19 13,18.7849426 13,18.5095215 L13,15.4904785 Z M16,15.495389 C16,15.2217932 16.2319336,15 16.5,15 C16.7761424,15 17,15.2157526 17,15.495389 L17,17.504611 C17,17.7782068 16.7680664,18 16.5,18 C16.2238576,18 16,17.7842474 16,17.504611 L16,15.495389 Z M7,15.495389 C7,15.2217932 7.23193359,15 7.5,15 C7.77614237,15 8,15.2157526 8,15.495389 L8,17.504611 C8,17.7782068 7.76806641,18 7.5,18 C7.22385763,18 7,17.7842474 7,17.504611 L7,15.495389 Z" id="Gaps" fill="#333333"></path>
+                <path d="M11.5,9 L17,3" id="Handle" stroke="#333333" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/application/assets/fonts/icons/battery-000.svg b/application/assets/fonts/icons/battery-000.svg
new file mode 100644
index 00000000..ec920ca4
--- /dev/null
+++ b/application/assets/fonts/icons/battery-000.svg
@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 44.1 (41455) - http://www.bohemiancoding.com/sketch -->
+    <title>battery-000</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard-4" transform="translate(-488.000000, -247.000000)">
+            <g id="71" transform="translate(488.000000, 247.000000)">
+                <rect id="Body" stroke="#333333" stroke-width="2" x="1" y="7" width="20" height="10" rx="1"></rect>
+                <circle id="Terminal" fill="#333333" cx="22" cy="12" r="2"></circle>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/application/assets/fonts/icons/battery-025.svg b/application/assets/fonts/icons/battery-025.svg
new file mode 100644
index 00000000..f3cc249d
--- /dev/null
+++ b/application/assets/fonts/icons/battery-025.svg
@@ -0,0 +1,23 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 44.1 (41455) - http://www.bohemiancoding.com/sketch -->
+    <title>battery-025</title>
+    <desc>Created with Sketch.</desc>
+    <defs>
+        <linearGradient x1="3.061617e-15%" y1="50%" x2="100%" y2="50%" id="linearGradient-1">
+            <stop stop-color="#333333" stop-opacity="0.199048913" offset="0%"></stop>
+            <stop stop-color="#333333" stop-opacity="0.249660326" offset="100%"></stop>
+        </linearGradient>
+    </defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard-4" transform="translate(-92.000000, -1090.000000)">
+            <g id="Extras" transform="translate(48.000000, 1046.000000)">
+                <g id="battery-low" transform="translate(44.000000, 44.000000)">
+                    <rect id="Body" stroke="#333333" stroke-width="2" x="1" y="7" width="20" height="10" rx="1"></rect>
+                    <circle id="Terminal" fill="#333333" cx="22" cy="12" r="2"></circle>
+                    <rect id="Level" fill="url(#linearGradient-1)" x="3" y="9" width="4" height="6"></rect>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/application/assets/fonts/icons/battery-050.svg b/application/assets/fonts/icons/battery-050.svg
new file mode 100644
index 00000000..f505ce00
--- /dev/null
+++ b/application/assets/fonts/icons/battery-050.svg
@@ -0,0 +1,23 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 44.1 (41455) - http://www.bohemiancoding.com/sketch -->
+    <title>battery-050</title>
+    <desc>Created with Sketch.</desc>
+    <defs>
+        <linearGradient x1="3.061617e-15%" y1="50%" x2="100%" y2="50%" id="linearGradient-1">
+            <stop stop-color="#333333" stop-opacity="0.199048913" offset="0%"></stop>
+            <stop stop-color="#333333" stop-opacity="0.298743207" offset="100%"></stop>
+        </linearGradient>
+    </defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard-4" transform="translate(-136.000000, -1090.000000)">
+            <g id="Extras" transform="translate(48.000000, 1046.000000)">
+                <g id="battery-mid" transform="translate(88.000000, 44.000000)">
+                    <rect id="Body" stroke="#333333" stroke-width="2" x="1" y="7" width="20" height="10" rx="1"></rect>
+                    <circle id="Terminal" fill="#333333" cx="22" cy="12" r="2"></circle>
+                    <rect id="Level" fill="url(#linearGradient-1)" x="3" y="9" width="8" height="6"></rect>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/application/assets/fonts/icons/battery-075.svg b/application/assets/fonts/icons/battery-075.svg
new file mode 100644
index 00000000..d148b330
--- /dev/null
+++ b/application/assets/fonts/icons/battery-075.svg
@@ -0,0 +1,23 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 44.1 (41455) - http://www.bohemiancoding.com/sketch -->
+    <title>battery-075</title>
+    <desc>Created with Sketch.</desc>
+    <defs>
+        <linearGradient x1="3.061617e-15%" y1="50%" x2="98.4853316%" y2="50%" id="linearGradient-1">
+            <stop stop-color="#333333" stop-opacity="0.199926404" offset="0%"></stop>
+            <stop stop-color="#333333" stop-opacity="0.346835371" offset="100%"></stop>
+        </linearGradient>
+    </defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard-4" transform="translate(-180.000000, -1090.000000)">
+            <g id="Extras" transform="translate(48.000000, 1046.000000)">
+                <g id="battery-high" transform="translate(132.000000, 44.000000)">
+                    <rect id="Body" stroke="#333333" stroke-width="2" x="1" y="7" width="20" height="10" rx="1"></rect>
+                    <circle id="Terminal" fill="#333333" cx="22" cy="12" r="2"></circle>
+                    <rect id="Level" fill="url(#linearGradient-1)" x="3" y="9" width="12" height="6"></rect>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/application/assets/fonts/icons/battery-100.svg b/application/assets/fonts/icons/battery-100.svg
new file mode 100644
index 00000000..9f645d37
--- /dev/null
+++ b/application/assets/fonts/icons/battery-100.svg
@@ -0,0 +1,23 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 44.1 (41455) - http://www.bohemiancoding.com/sketch -->
+    <title>battery-100</title>
+    <desc>Created with Sketch.</desc>
+    <defs>
+        <linearGradient x1="3.061617e-15%" y1="50%" x2="100%" y2="50%" id="linearGradient-1">
+            <stop stop-color="#333333" stop-opacity="0.199048913" offset="0%"></stop>
+            <stop stop-color="#333333" stop-opacity="0.400192482" offset="100%"></stop>
+        </linearGradient>
+    </defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard-4" transform="translate(-224.000000, -1090.000000)">
+            <g id="Extras" transform="translate(48.000000, 1046.000000)">
+                <g id="battery-full" transform="translate(176.000000, 44.000000)">
+                    <rect id="Body" stroke="#333333" stroke-width="2" x="1" y="7" width="20" height="10" rx="1"></rect>
+                    <circle id="Terminal" fill="#333333" cx="22" cy="12" r="2"></circle>
+                    <rect id="Level" fill="url(#linearGradient-1)" x="3" y="9" width="16" height="6"></rect>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/application/assets/fonts/icons/bauble.svg b/application/assets/fonts/icons/bauble.svg
new file mode 100644
index 00000000..b34b7afc
--- /dev/null
+++ b/application/assets/fonts/icons/bauble.svg
@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 44.1 (41455) - http://www.bohemiancoding.com/sketch -->
+    <title>bauble</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard-4" transform="translate(-136.000000, -555.000000)">
+            <g id="203" transform="translate(136.000000, 555.000000)">
+                <circle id="Bauble" stroke="#333333" stroke-width="2" cx="12" cy="15" r="8"></circle>
+                <path d="M12,19 L12,19 C14.209139,19 16,17.209139 16,15" id="Highlight" stroke="#333333" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
+                <path d="M12,7 L12,1" id="String" stroke="#333333" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
+                <rect id="Top" fill="#333333" x="9" y="4" width="6" height="4" rx="2"></rect>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/application/assets/fonts/icons/bell-1.svg b/application/assets/fonts/icons/bell-1.svg
new file mode 100644
index 00000000..1b741a29
--- /dev/null
+++ b/application/assets/fonts/icons/bell-1.svg
@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 44.1 (41455) - http://www.bohemiancoding.com/sketch -->
+    <title>bell-1</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard-4" transform="translate(-840.000000, -247.000000)">
+            <g id="79" transform="translate(840.000000, 247.000000)">
+                <rect id="Base" fill="#333333" x="0" y="18" width="24" height="2" rx="1"></rect>
+                <path d="M22,16 C21.4104337,10.9871312 18,7 12,7 C6,7 2.60236046,10.9413006 2,16 C4.10236046,15.9413006 20.4104337,15.9871312 22,16 Z" id="Body" stroke="#333333" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
+                <path d="M13,5 L13,6 L11,6 L11,5 L9.99077797,5 C9.44358641,5 9,4.55613518 9,4 C9,3.44771525 9.45097518,3 9.99077797,3 L14.009222,3 C14.5564136,3 15,3.44386482 15,4 C15,4.55228475 14.5490248,5 14.009222,5 L13,5 Z" id="Ding" fill="#333333"></path>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/application/assets/fonts/icons/bell.svg b/application/assets/fonts/icons/bell.svg
new file mode 100644
index 00000000..2f559e65
--- /dev/null
+++ b/application/assets/fonts/icons/bell.svg
@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 44.1 (41455) - http://www.bohemiancoding.com/sketch -->
+    <title>bell</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard-4" transform="translate(-884.000000, -291.000000)">
+            <g id="100" transform="translate(884.000000, 291.000000)">
+                <path d="M9,21 C9,22.6568542 10.3431458,24 12,24 C13.6568542,24 15,22.6568542 15,21 L9,21 Z" id="Ding" fill="#333333"></path>
+                <path d="M4.29289321,15.2928932 C5.96179386,13.6239926 6,13.5001465 6,10 C6,5.72810928 8.08620121,3 12,3 C15.9137988,3 18,5.72810928 18,10 L17.9999994,10.0212457 C17.9999347,11.5350211 18.1040732,12.4589418 18.5288785,13.5051137 C18.8010848,14.1754789 19.1866334,14.7724198 19.7071068,15.2928932 C21.1098059,16.6955923 20.725738,19 19,19 L4.99999999,19 C3.27426205,19 2.8901941,16.6955923 4.29289321,15.2928932 Z" id="Body" stroke="#333333" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/application/assets/fonts/icons/black-hole.svg b/application/assets/fonts/icons/black-hole.svg
new file mode 100644
index 00000000..9c3efcdd
--- /dev/null
+++ b/application/assets/fonts/icons/black-hole.svg
@@ -0,0 +1,25 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 44.1 (41455) - http://www.bohemiancoding.com/sketch -->
+    <title>black-hole</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round">
+        <g id="Artboard-4" transform="translate(-884.000000, -819.000000)" stroke="#333333" stroke-width="2">
+            <g id="340" transform="translate(884.000000, 819.000000)">
+                <path d="M12,11.974256 C12,8.40414075 10.4744072,5.19816026 8,3" id="Oval-192"></path>
+                <path d="M11.0917382,20.4756148 C11.0917382,16.9054995 9.56614538,13.6995191 7.09173821,11.5013588" id="Oval-192" transform="translate(9.091738, 15.988487) rotate(-120.000000) translate(-9.091738, -15.988487) "></path>
+                <path d="M13.4756148,21.3953898 C13.4756148,17.8252745 11.950022,14.619294 9.47561481,12.4211338" id="Oval-192" transform="translate(11.475615, 16.908262) rotate(-150.000000) translate(-11.475615, -16.908262) "></path>
+                <path d="M17.9884868,19.3953898 C17.9884868,15.8252745 16.462894,12.619294 13.9884868,10.4211338" id="Oval-192" transform="translate(15.988487, 14.908262) rotate(-210.000000) translate(-15.988487, -14.908262) "></path>
+                <path d="M18.9082618,17.0115132 C18.9082618,13.4413979 17.382669,10.2354174 14.9082618,8.03725718" id="Oval-192" transform="translate(16.908262, 12.524385) rotate(-240.000000) translate(-16.908262, -12.524385) "></path>
+                <path d="M16.9082618,12.4986412 C16.9082618,8.92852594 15.382669,5.72254545 12.9082618,3.52438519" id="Oval-192" transform="translate(14.908262, 8.011513) rotate(-300.000000) translate(-14.908262, -8.011513) "></path>
+                <path d="M14.5243852,11.5788662 C14.5243852,8.00875095 12.9987924,4.80277046 10.5243852,2.6046102" id="Oval-192" transform="translate(12.524385, 7.091738) rotate(-330.000000) translate(-12.524385, -7.091738) "></path>
+                <path d="M9.48712801,18.487128 C9.48712801,14.9170127 7.96153517,11.7110323 5.48712801,9.51287199" id="Oval-192" transform="translate(7.487128, 14.000000) rotate(-90.000000) translate(-7.487128, -14.000000) "></path>
+                <path d="M18.487128,14.487128 C18.487128,10.9170127 16.9615352,7.71103225 14.487128,5.51287199" id="Oval-192" transform="translate(16.487128, 10.000000) scale(-1, -1) rotate(-90.000000) translate(-16.487128, -10.000000) "></path>
+                <path d="M10.0115132,13.5788662 C10.0115132,10.008751 8.48592036,6.80277046 6.0115132,4.6046102" id="Oval-192" transform="translate(8.011513, 9.091738) rotate(-30.000000) translate(-8.011513, -9.091738) "></path>
+                <path d="M9.09173821,15.9627428 C9.09173821,12.3926276 7.56614538,9.18664707 5.09173821,6.9884868" id="Oval-192" transform="translate(7.091738, 11.475615) rotate(-60.000000) translate(-7.091738, -11.475615) "></path>
+                <path d="M16,21 C16,17.4298847 14.4744072,14.1981603 12,12" id="Oval-192" transform="translate(14.000000, 16.500000) scale(-1, -1) translate(-14.000000, -16.500000) "></path>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/application/assets/fonts/icons/bluetooth-connected.svg b/application/assets/fonts/icons/bluetooth-connected.svg
new file mode 100644
index 00000000..d18ea1cc
--- /dev/null
+++ b/application/assets/fonts/icons/bluetooth-connected.svg
@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 44.1 (41455) - http://www.bohemiancoding.com/sketch -->
+    <title>bluetooth-connected</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard-4" transform="translate(-400.000000, -423.000000)">
+            <g id="149" transform="translate(400.000000, 423.000000)">
+                <path d="M15.616237,10.2881775 L18.6401844,7.76822128 C19.1199385,7.36842617 19.1199385,6.63157383 18.6401844,6.23177872 L12.6401844,1.23177872 C11.9888575,0.689006285 11,1.15216235 11,2 L11,8.12601749 C11.3196199,8.043753 11.6547004,8 12,8 C12.3452996,8 12.6803801,8.043753 13,8.12601749 L13,2 L11.3598156,2.76822128 L17.3598156,7.76822128 L17.3598156,6.23177872 L14.3353608,8.75215771 C14.8818518,9.14580446 15.3249784,9.67397891 15.616237,10.2881775 Z M9.66463919,15.2478423 L6.6401844,17.7682213 C6.2159075,18.1217854 5.5853428,18.0644613 5.23177872,17.6401844 C4.87821464,17.2159075 4.9355387,16.5853428 5.3598156,16.2317787 L8.38376301,13.7118225 C8.67502157,14.3260211 9.11814817,14.8541955 9.66463919,15.2478423 Z M13,15.8739825 L13,22 L11.3598156,21.2317787 L17.3598156,16.2317787 L17.3598156,17.7682213 L14.3353608,15.2478423 C14.8818518,14.8541955 15.3249784,14.3260211 15.616237,13.7118225 L18.6401844,16.2317787 C19.1199385,16.6315738 19.1199385,17.3684262 18.6401844,17.7682213 L12.6401844,22.7682213 C11.9888575,23.3109937 11,22.8478376 11,22 L11,15.8739825 C11.3196199,15.956247 11.6547004,16 12,16 C12.3452996,16 12.6803801,15.956247 13,15.8739825 Z M8.38376301,10.2881775 L5.3598156,7.76822128 C4.9355387,7.4146572 4.87821464,6.7840925 5.23177872,6.3598156 C5.5853428,5.9355387 6.2159075,5.87821464 6.6401844,6.23177872 L9.66463919,8.75215771 C9.11814817,9.14580446 8.67502157,9.67397891 8.38376301,10.2881775 Z" id="Bluetooth" fill="#333333" fill-rule="nonzero" opacity="0.75"></path>
+                <path d="M3.99997493,13.9981014 C2.8953985,13.9981014 1.99996239,13.1026653 1.99996239,11.9980888 C1.99996239,10.8935124 2.8953985,9.99807631 3.99997493,9.99807631 C5.10455135,9.99807631 5.99998746,10.8935124 5.99998746,11.9980888 C5.99998746,13.1026653 5.10455135,13.9981014 3.99997493,13.9981014 Z M19.9999749,13.9981014 C18.8953985,13.9981014 17.9999624,13.1026653 17.9999624,11.9980888 C17.9999624,10.8935124 18.8953985,9.99807631 19.9999749,9.99807631 C21.1045513,9.99807631 21.9999875,10.8935124 21.9999875,11.9980888 C21.9999875,13.1026653 21.1045513,13.9981014 19.9999749,13.9981014 Z M11.9999749,13.9981014 C10.8953985,13.9981014 9.99996239,13.1026653 9.99996239,11.9980888 C9.99996239,10.8935124 10.8953985,9.99807631 11.9999749,9.99807631 C13.1045513,9.99807631 13.9999875,10.8935124 13.9999875,11.9980888 C13.9999875,13.1026653 13.1045513,13.9981014 11.9999749,13.9981014 Z" id="Dots" stroke="#333333" stroke-width="2"></path>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/application/assets/fonts/icons/bluetooth-off.svg b/application/assets/fonts/icons/bluetooth-off.svg
new file mode 100644
index 00000000..1002d97b
--- /dev/null
+++ b/application/assets/fonts/icons/bluetooth-off.svg
@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 44.1 (41455) - http://www.bohemiancoding.com/sketch -->
+    <title>bluetooth-off</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard-4" transform="translate(-444.000000, -423.000000)">
+            <g id="150" transform="translate(444.000000, 423.000000)">
+                <path d="M11,7.17639148 L11,2 C11,1.15216235 11.9888575,0.689006285 12.6401844,1.23177872 L18.6401844,6.23177872 C19.1199385,6.63157383 19.1199385,7.36842617 18.6401844,7.76822128 L16.8974751,9.22047902 C16.7657289,8.7289506 16.5070107,8.26436997 16.1213203,7.87867966 C16.006359,7.76371829 15.8843887,7.66003758 15.756785,7.56763753 L17.3598156,6.23177872 L17.3598156,7.76822128 L11.3598156,2.76822128 L13,2 L13,7.17083433 C12.6369586,7.29886903 12.2936337,7.49887208 11.9921905,7.77084348 C11.6950737,7.50277543 11.3572687,7.30462476 11,7.17639148 Z M13,16.8447846 L13,22 L11.3598156,21.2317787 L17.3598156,16.2317787 L17.3598156,17.7682213 L15.7667933,16.4407027 C15.8907689,16.350146 16.009368,16.2488916 16.1213203,16.1369392 C16.5103538,15.7479058 16.7702045,15.2786084 16.9008724,14.7823521 L18.6401844,16.2317787 C19.1199385,16.6315738 19.1199385,17.3684262 18.6401844,17.7682213 L12.6401844,22.7682213 C11.9888575,23.3109937 11,22.8478376 11,22 L11,16.8392274 C11.3572687,16.7109941 11.6950737,16.5128435 11.9921905,16.2447754 C12.2936337,16.5167468 12.6369586,16.7167499 13,16.8447846 Z M7.08977479,9.20985394 L5.3598156,7.76822128 C4.9355387,7.4146572 4.87821464,6.7840925 5.23177872,6.3598156 C5.5853428,5.9355387 6.2159075,5.87821464 6.6401844,6.23177872 L8.23596727,7.56159778 C8.10532503,7.6555128 7.98053365,7.76120676 7.86306076,7.87867966 C7.48015063,8.26158978 7.22238864,8.722257 7.08977479,9.20985394 Z M8.22592522,16.4467706 L6.6401844,17.7682213 C6.2159075,18.1217854 5.5853428,18.0644613 5.23177872,17.6401844 C4.87821464,17.2159075 4.9355387,16.5853428 5.3598156,16.2317787 L7.08633633,14.7930114 C7.21790564,15.2853271 7.47681378,15.7506923 7.86306076,16.1369392 C7.97752026,16.2513987 8.0989276,16.3546759 8.22592522,16.4467706 Z" id="Bluetooth" fill="#333333" fill-rule="nonzero" opacity="0.75"></path>
+                <path d="M14,10 L10,14" id="Path-82" stroke="#333333" stroke-width="2" stroke-linecap="round"></path>
+                <path d="M14,10 L10,14" id="Path-82" stroke="#333333" stroke-width="2" stroke-linecap="round" transform="translate(12.000000, 12.000000) scale(-1, 1) translate(-12.000000, -12.000000) "></path>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/application/assets/fonts/icons/bluetooth.svg b/application/assets/fonts/icons/bluetooth.svg
new file mode 100644
index 00000000..058e7b5c
--- /dev/null
+++ b/application/assets/fonts/icons/bluetooth.svg
@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 44.1 (41455) - http://www.bohemiancoding.com/sketch -->
+    <title>bluetooth</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
+        <g id="Artboard-4" transform="translate(-356.000000, -423.000000)" stroke-width="2" stroke="#333333">
+            <g id="148" transform="translate(356.000000, 423.000000)">
+                <polyline id="Bluetooth" points="6 17 18 7 12 2 12 22 18 17 6 7"></polyline>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/application/assets/fonts/icons/boat.svg b/application/assets/fonts/icons/boat.svg
new file mode 100644
index 00000000..b0156843
--- /dev/null
+++ b/application/assets/fonts/icons/boat.svg
@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 44.1 (41455) - http://www.bohemiancoding.com/sketch -->
+    <title>boat</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard-4" transform="translate(-225.000000, -335.000000)">
+            <g id="105" transform="translate(225.000000, 335.000000)">
+                <path d="M3,18 L21,18 C21,18 20,22 13,22 L1,22 L3,18 Z" id="Boat" stroke="#333333" stroke-width="2" stroke-linejoin="round"></path>
+                <rect id="Mast" fill="#333333" x="10" y="1" width="2" height="17" rx="1"></rect>
+                <polyline id="Right-Sail" stroke="#333333" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" transform="translate(15.500000, 8.519202) scale(-1, 1) translate(-15.500000, -8.519202) " points="19 15.0384045 11 15.0384048 20 2"></polyline>
+                <polyline id="Left-Sail" stroke="#333333" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" points="10.0152028 15.0384048 5 15.0384048 11 2"></polyline>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/application/assets/fonts/icons/book.svg b/application/assets/fonts/icons/book.svg
new file mode 100644
index 00000000..f06bd8ee
--- /dev/null
+++ b/application/assets/fonts/icons/book.svg
@@ -0,0 +1,20 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 44.1 (41455) - http://www.bohemiancoding.com/sketch -->
+    <title>book</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round">
+        <g id="Artboard-4" transform="translate(-884.000000, -203.000000)" stroke="#333333">
+            <g id="60" transform="translate(884.000000, 203.000000)">
+                <path d="M2,5.0068455 C2,3.80374257 3.03799922,2.9787234 4.20752254,3.27110423 L12,5.21922356 L12,21.2807764 L3.72245134,19.2113896 C2.74224228,18.9663373 2,18.0067797 2,16.9931549 L2,5.0068455 Z M12,5.21922364 L19.7924774,3.27110423 C20.9604115,2.97912072 22,3.80328805 22,5.00684547 L22,16.9931545 C22,18.0066201 21.2590506,18.9660137 20.2775487,19.2113892 L12,21.2807762 L12,5.21922364 Z" id="Pages" stroke-width="2" stroke-linejoin="round"></path>
+                <path d="M5,8 L9,9" id="Path-144" stroke-linejoin="round"></path>
+                <path d="M5,11 L9,12" id="Path-144" stroke-linejoin="round"></path>
+                <path d="M5,14 L9,15" id="Path-144" stroke-linejoin="round"></path>
+                <path d="M15,9 L19,8" id="Path-148"></path>
+                <path d="M15,12 L19,11" id="Path-148"></path>
+                <path d="M15,15 L19,14" id="Path-148"></path>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/application/assets/fonts/icons/bookmark.svg b/application/assets/fonts/icons/bookmark.svg
new file mode 100644
index 00000000..00f80ca7
--- /dev/null
+++ b/application/assets/fonts/icons/bookmark.svg
@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 44.1 (41455) - http://www.bohemiancoding.com/sketch -->
+    <title>bookmark</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linejoin="round">
+        <g id="Artboard-4" transform="translate(-752.000000, -511.000000)" stroke="#333333" stroke-width="2">
+            <g id="197" transform="translate(752.000000, 511.000000)">
+                <path d="M6,4.99508929 C6,3.8932319 6.90195036,3 8.0085302,3 L15.9914698,3 C17.1007504,3 18,3.8926228 18,4.99508929 L18,20.0066023 C18,20.5552407 17.6246731,20.7497821 17.1657257,20.4438171 L12,17 L6.83427429,20.4438171 C6.37351732,20.7509885 6,20.5550537 6,20.0066023 L6,4.99508929 Z" id="Bookmark"></path>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/application/assets/fonts/icons/box-open.svg b/application/assets/fonts/icons/box-open.svg
new file mode 100644
index 00000000..bddcd831
--- /dev/null
+++ b/application/assets/fonts/icons/box-open.svg
@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 44.1 (41455) - http://www.bohemiancoding.com/sketch -->
+    <title>box-open</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard-4" transform="translate(-840.000000, -291.000000)">
+            <g id="99" transform="translate(840.000000, 291.000000)">
+                <rect id="Box" stroke="#333333" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" x="4" y="7" width="16" height="14"></rect>
+                <path d="M10,17.5 L11,17 C11,17 11.7721018,16.5 12,16.5 C12.5,16.5 13,17 13,17 L14,16 L14,16.5 L14,20 L10,20 L10,17.5 Z" id="Tape" fill="#333333" opacity="0.349999994"></path>
+                <path d="M5,7 L11,4" id="Left-Lid" stroke="#333333" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
+                <path d="M14,7 L19,3" id="Right-Lid" stroke="#333333" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" transform="translate(16.500000, 5.000000) scale(-1, 1) translate(-16.500000, -5.000000) "></path>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/application/assets/fonts/icons/box.svg b/application/assets/fonts/icons/box.svg
new file mode 100644
index 00000000..6fb764fc
--- /dev/null
+++ b/application/assets/fonts/icons/box.svg
@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 44.1 (41455) - http://www.bohemiancoding.com/sketch -->
+    <title>box</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard-4" transform="translate(-136.000000, -643.000000)">
+            <g id="243" transform="translate(136.000000, 643.000000)">
+                <rect id="Box" stroke="#333333" stroke-width="2" stroke-linejoin="round" x="3" y="7" width="18" height="14" rx="2"></rect>
+                <path d="M3,9 L3,8 C3,7.44771525 3.31387329,6.68612671 3.70591205,6.29408795 L6.29408795,3.70591205 C6.68395241,3.31604759 7.4556644,3 7.99539757,3 L16.0046024,3 C16.5543453,3 17.3138733,3.31387329 17.7059121,3.70591205 L20.2940879,6.29408795 C20.6839524,6.68395241 21,7.44386482 21,8 L21,9" id="Top" stroke="#333333" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
+                <polygon id="Tape" fill="#333333" opacity="0.300000012" points="10.5 4 13.5 4 14 6 14 12 13 11 12.5 12 12 11 11 12 10 12.5 10 6"></polygon>
+                <path d="M12,4 L12,6" id="Gap" stroke="#333333" opacity="0.75"></path>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/application/assets/fonts/icons/briefcase.svg b/application/assets/fonts/icons/briefcase.svg
new file mode 100644
index 00000000..4365dfef
--- /dev/null
+++ b/application/assets/fonts/icons/briefcase.svg
@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 44.1 (41455) - http://www.bohemiancoding.com/sketch -->
+    <title>briefcase</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard-4" transform="translate(-136.000000, -379.000000)">
+            <g id="122" transform="translate(136.000000, 379.000000)">
+                <rect id="Bag" stroke="#333333" stroke-width="2" x="1" y="6" width="22" height="16" rx="1"></rect>
+                <path d="M8,6.00189865 L8,3.99810135 C8,2.89458045 8.90195036,2 10.0085302,2 L13.9914698,2 C15.1007504,2 16,2.88670635 16,3.99810135 L16,6.00189865" id="Handle" stroke="#333333" stroke-width="2"></path>
+                <path d="M23,9 C23,9 22.9999992,14.0311289 17.9688711,14.0311289 C12.937743,14.0311289 9.00000019,14.0311289 4.99081969,14.0311289 C0.981639191,14.0311289 1,9 1,9" id="Flap" stroke="#333333" stroke-width="2" stroke-linejoin="round"></path>
+                <path d="M16,11.990778 C16,11.4435864 16.4438648,11 17,11 C17.5522847,11 18,11.4509752 18,11.990778 L18,16.009222 C18,16.5564136 17.5561352,17 17,17 C16.4477153,17 16,16.5490248 16,16.009222 L16,11.990778 Z M6,11.990778 C6,11.4435864 6.44386482,11 7,11 C7.55228475,11 8,11.4509752 8,11.990778 L8,16.009222 C8,16.5564136 7.55613518,17 7,17 C6.44771525,17 6,16.5490248 6,16.009222 L6,11.990778 Z" id="Clips" fill="#333333"></path>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/application/assets/fonts/icons/brightness-full.svg b/application/assets/fonts/icons/brightness-full.svg
new file mode 100644
index 00000000..35a0f5f4
--- /dev/null
+++ b/application/assets/fonts/icons/brightness-full.svg
@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 44.1 (41455) - http://www.bohemiancoding.com/sketch -->
+    <title>brightness-full</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard-4" transform="translate(-48.000000, -1090.000000)" stroke="#333333" stroke-width="2">
+            <g id="Extras" transform="translate(48.000000, 1046.000000)">
+                <g id="brghtness-full" transform="translate(0.000000, 44.000000)">
+                    <circle id="Sun" cx="12" cy="12" r="4"></circle>
+                    <path d="M12,5 L12,2 M16.9497475,7.05025253 L19.0710678,4.92893219 M19,12 L22,12 M16.9497475,16.9497475 L19.0710678,19.0710678 M12,19 L12,22 M7.05025253,16.9497475 L4.92893219,19.0710678 M5,12 L2,12 M7.05025253,7.05025253 L4.92893219,4.92893219" id="Rays" stroke-linecap="round"></path>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/application/assets/fonts/icons/brightness-low.svg b/application/assets/fonts/icons/brightness-low.svg
new file mode 100644
index 00000000..fc3d62d5
--- /dev/null
+++ b/application/assets/fonts/icons/brightness-low.svg
@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 44.1 (41455) - http://www.bohemiancoding.com/sketch -->
+    <title>brightness-low</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard-4" transform="translate(-884.000000, -1046.000000)" stroke="#333333" stroke-width="2">
+            <g id="Extras" transform="translate(48.000000, 1046.000000)">
+                <g id="brightness-low" transform="translate(836.000000, 0.000000)">
+                    <circle id="Sun" cx="12" cy="12" r="4"></circle>
+                    <path d="M12,5 L12,4 M16.9497475,7.05025253 L17.6568542,6.34314575 M19,12 L20,12 M16.9497475,16.9497475 L17.6568542,17.6568542 M12,19 L12,20 M7.05025253,16.9497475 L6.34314575,17.6568542 M5,12 L4,12 M7.05025253,7.05025253 L6.34314575,6.34314575" id="Rays" stroke-linecap="round"></path>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/application/assets/fonts/icons/brightness-mid.svg b/application/assets/fonts/icons/brightness-mid.svg
new file mode 100644
index 00000000..8e293f9a
--- /dev/null
+++ b/application/assets/fonts/icons/brightness-mid.svg
@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 44.1 (41455) - http://www.bohemiancoding.com/sketch -->
+    <title>brightness-mid</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard-4" transform="translate(-620.000000, -203.000000)" stroke="#333333" stroke-width="2">
+            <g id="54" transform="translate(620.000000, 203.000000)">
+                <circle id="Sun" cx="12" cy="12" r="4"></circle>
+                <path d="M12,5 L12,3 M16.9497475,7.05025253 L18.363961,5.63603897 M19,12 L21,12 M16.9497475,16.9497475 L18.363961,18.363961 M12,19 L12,21 M7.05025253,16.9497475 L5.63603897,18.363961 M5,12 L3,12 M7.05025253,7.05025253 L5.63603897,5.63603897" id="Rays" stroke-linecap="round" stroke-linejoin="round"></path>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/application/assets/fonts/icons/brush.svg b/application/assets/fonts/icons/brush.svg
new file mode 100644
index 00000000..60c5953e
--- /dev/null
+++ b/application/assets/fonts/icons/brush.svg
@@ -0,0 +1,19 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 44.1 (41455) - http://www.bohemiancoding.com/sketch -->
+    <title>brush</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard-4" transform="translate(-488.000000, -687.000000)" stroke="#333333">
+            <g id="271" transform="translate(488.000000, 687.000000)">
+                <g id="brush" transform="translate(12.697261, 12.197291) rotate(-315.000000) translate(-12.697261, -12.197291) translate(9.697261, -1.302709)">
+                    <g id="Group-7">
+                        <path d="M3,0.5 C1,0.5 1,15.5 1,15.5 C1,15.5 2,15 3,15 C4,15 5,15.5 5,15.5 C5,15.5 5,0.5 3,0.5 Z" id="Path-208" stroke-width="2" stroke-linejoin="round"></path>
+                        <path d="M1,26 C4,26 6,23 6,21 C6,19.5 5,18 3,18 C1,18 9.18485099e-17,19 0,21 C0,23 1.5,23 1,26 Z" id="Oval-150" stroke-width="2"></path>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/application/assets/fonts/icons/bulb.svg b/application/assets/fonts/icons/bulb.svg
new file mode 100644
index 00000000..a90b5f3a
--- /dev/null
+++ b/application/assets/fonts/icons/bulb.svg
@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 44.1 (41455) - http://www.bohemiancoding.com/sketch -->
+    <title>bulb</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard-4" transform="translate(-92.000000, -335.000000)">
+            <g id="102" transform="translate(92.000000, 335.000000)">
+                <path d="M9,18 L15,18 C15,14.5 19,14 19,9 C19,5.13400675 15.8659932,2 12,2 C8.13400675,2 5,5.13400675 5,9 C5,14 9,15 9,18 Z" id="Glass" stroke="#333333" stroke-width="2" stroke-linejoin="round"></path>
+                <path d="M9,20.5 C9,20.2238576 9.22788048,20 9.49100518,20 L14.5089948,20 C14.7801695,20 15,20.2319336 15,20.5 C15,20.7761424 14.7721195,21 14.5089948,21 L9.49100518,21 C9.21983051,21 9,20.7680664 9,20.5 Z M10,22.5 C10,22.2238576 10.2150574,22 10.4904785,22 L13.5095215,22 C13.7804053,22 14,22.2319336 14,22.5 C14,22.7761424 13.7849426,23 13.5095215,23 L10.4904785,23 C10.2195947,23 10,22.7680664 10,22.5 Z" id="Screw" fill="#333333"></path>
+                <path d="M11,13 L11,18 L13,18 L13,13 L14,13 C15.1045695,13 16,12.1045695 16,11 C16,9.8954305 15.1045695,9 14,9 C12.8954305,9 12,9.8954305 12,11 C12,9.8954305 11.1045695,9 10,9 C8.8954305,9 8,9.8954305 8,11 C8,12.1045695 8.8954305,13 10,13 L11,13 Z" id="Filament" fill="#333333" opacity="0.5"></path>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/application/assets/fonts/icons/burger.svg b/application/assets/fonts/icons/burger.svg
new file mode 100644
index 00000000..75392e33
--- /dev/null
+++ b/application/assets/fonts/icons/burger.svg
@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 44.1 (41455) - http://www.bohemiancoding.com/sketch -->
+    <title>burger</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard-4" transform="translate(-48.000000, -423.000000)">
+            <g id="141" transform="translate(48.000000, 423.000000)">
+                <path d="M22,22 C22,18 22,18 12,18 C2,18 2,18 2,22 C4,22 20,22 22,22 Z" id="bun-botty" stroke="#333333" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" transform="translate(12.000000, 20.000000) scale(1, -1) translate(-12.000000, -20.000000) "></path>
+                <rect id="burger" fill="#333333" x="1" y="13" width="22" height="3" rx="1.5"></rect>
+                <path d="M2,11 C2,11 3,12 4,12 C5,12 5,11 6,11 C7,11 7,12 8,12 C9,12 9,11 10,11 C11,11 11,12 12,12 C13,12 13,11 14,11 C15,11 15,12 16,12 C17,12 17,11 18,11 C19,11 19,12 20,12 C21,12 22,11 22,11" id="lettuce" stroke="#333333" stroke-width="2" opacity="0.899999976" stroke-linecap="round" stroke-linejoin="round"></path>
+                <path d="M6.5,5 C6.22385763,5 6,4.77614237 6,4.5 C6,4.22385763 6.22385763,4 6.5,4 C6.77614237,4 7,4.22385763 7,4.5 C7,4.77614237 6.77614237,5 6.5,5 Z M8.5,6 C8.22385763,6 8,5.77614237 8,5.5 C8,5.22385763 8.22385763,5 8.5,5 C8.77614237,5 9,5.22385763 9,5.5 C9,5.77614237 8.77614237,6 8.5,6 Z M9.5,4 C9.22385763,4 9,3.77614237 9,3.5 C9,3.22385763 9.22385763,3 9.5,3 C9.77614237,3 10,3.22385763 10,3.5 C10,3.77614237 9.77614237,4 9.5,4 Z M11.5,5 C11.2238576,5 11,4.77614237 11,4.5 C11,4.22385763 11.2238576,4 11.5,4 C11.7761424,4 12,4.22385763 12,4.5 C12,4.77614237 11.7761424,5 11.5,5 Z M14.5,4 C14.2238576,4 14,3.77614237 14,3.5 C14,3.22385763 14.2238576,3 14.5,3 C14.7761424,3 15,3.22385763 15,3.5 C15,3.77614237 14.7761424,4 14.5,4 Z M16.5,6 C16.2238576,6 16,5.77614237 16,5.5 C16,5.22385763 16.2238576,5 16.5,5 C16.7761424,5 17,5.22385763 17,5.5 C17,5.77614237 16.7761424,6 16.5,6 Z M17.5,4 C17.2238576,4 17,3.77614237 17,3.5 C17,3.22385763 17.2238576,3 17.5,3 C17.7761424,3 18,3.22385763 18,3.5 C18,3.77614237 17.7761424,4 17.5,4 Z" id="seeds" fill="#333333" opacity="0.5"></path>
+                <path d="M22,8 C22,2 18,2 12,2 C6,2 2,2 2,8 C4,8 20,8 22,8 Z" id="bun-top" stroke="#333333" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/application/assets/fonts/icons/cake.svg b/application/assets/fonts/icons/cake.svg
new file mode 100644
index 00000000..700f8ff8
--- /dev/null
+++ b/application/assets/fonts/icons/cake.svg
@@ -0,0 +1,19 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 44.1 (41455) - http://www.bohemiancoding.com/sketch -->
+    <title>cake</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard-4" transform="translate(-356.000000, -731.000000)" stroke="#333333" stroke-width="2">
+            <g id="288" transform="translate(356.000000, 731.000000)">
+                <path d="M21,8 L21,18.0044225 C21,18.5542648 20.6142426,19.2216766 20.1210938,19.4638672 C20.1210938,19.4638672 18,21 12,21 C6,21 3.87890625,19.4638672 3.87890625,19.4638672 C3.39349973,19.2076804 3,18.555163 3,18.0044225 L3,8" id="Cake" stroke-linecap="round" stroke-linejoin="round"></path>
+                <ellipse id="Top" stroke-linecap="round" stroke-linejoin="round" cx="12" cy="8" rx="9" ry="3"></ellipse>
+                <path d="M3,12 C3,12 4,15.5 5.5,15.5 C7,15.5 7,14.5 8.5,14.5 C10,14.5 10.4793094,17.0104162 12,17 C13.5206906,16.9895838 13.9998573,14.5102041 15.5,14.5 C17.0001427,14.4897959 16.9996908,15.5000832 18.5,15.5 C20.0003092,15.4999168 21,12 21,12" id="Icing"></path>
+                <path d="M8,7.02493781 L8,2" id="Candle-3" stroke-linecap="round"></path>
+                <path d="M12,8.02493781 L12,3" id="Candle-2" stroke-linecap="round"></path>
+                <path d="M16,7.02493781 L16,2" id="Candle-1" stroke-linecap="round"></path>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/application/assets/fonts/icons/calculator-alt.svg b/application/assets/fonts/icons/calculator-alt.svg
new file mode 100644
index 00000000..168bee76
--- /dev/null
+++ b/application/assets/fonts/icons/calculator-alt.svg
@@ -0,0 +1,19 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 44.1 (41455) - http://www.bohemiancoding.com/sketch -->
+    <title>calculator-alt</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard-4" transform="translate(-664.000000, -599.000000)">
+            <g id="236" transform="translate(664.000000, 599.000000)">
+                <rect id="Body" stroke="#333333" stroke-width="2" x="3" y="3" width="18" height="18" rx="2"></rect>
+                <path d="M8,7 L8,5.49769878 C8,5.21484375 7.77614237,5 7.5,5 C7.23193359,5 7,5.22282734 7,5.49769878 L7,7 L5.49769878,7 C5.21484375,7 5,7.22385763 5,7.5 C5,7.76806641 5.22282734,8 5.49769878,8 L7,8 L7,9.50230122 C7,9.78515625 7.22385763,10 7.5,10 C7.76806641,10 8,9.77717266 8,9.50230122 L8,8 L9.50230122,8 C9.78515625,8 10,7.77614237 10,7.5 C10,7.23193359 9.77717266,7 9.50230122,7 L8,7 Z" id="Add" fill="#333333"></path>
+                <path d="M8,16 L8,14.4976988 C8,14.2148438 7.77614237,14 7.5,14 C7.23193359,14 7,14.2228273 7,14.4976988 L7,16 L5.49769878,16 C5.21484375,16 5,16.2238576 5,16.5 C5,16.7680664 5.22282734,17 5.49769878,17 L7,17 L7,18.5023012 C7,18.7851562 7.22385763,19 7.5,19 C7.76806641,19 8,18.7771727 8,18.5023012 L8,17 L9.50230122,17 C9.78515625,17 10,16.7761424 10,16.5 C10,16.2319336 9.77717266,16 9.50230122,16 L8,16 Z" id="Multiply" fill="#333333" transform="translate(7.500000, 16.500000) rotate(-45.000000) translate(-7.500000, -16.500000) "></path>
+                <rect id="Minus" fill="#333333" transform="translate(16.500000, 7.500000) rotate(-90.000000) translate(-16.500000, -7.500000) " x="16" y="5" width="1" height="5" rx="0.5"></rect>
+                <path d="M14.4976988,16 C14.2228273,16 14,15.7680664 14,15.5 C14,15.2238576 14.2148438,15 14.4976988,15 L18.5023012,15 C18.7771727,15 19,15.2319336 19,15.5 C19,15.7761424 18.7851562,16 18.5023012,16 L14.4976988,16 Z M14.4976988,18 C14.2228273,18 14,17.7680664 14,17.5 C14,17.2238576 14.2148438,17 14.4976988,17 L18.5023012,17 C18.7771727,17 19,17.2319336 19,17.5 C19,17.7761424 18.7851562,18 18.5023012,18 L14.4976988,18 Z" id="Equal" fill="#333333"></path>
+                <path d="M13,11 L13,3 L11,3 L11,11 L3,11 L3,13 L11,13 L11,21 L13,21 L13,13 L21,13 L21,11 L13,11 Z" id="Centre" fill="#333333"></path>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/application/assets/fonts/icons/calculator.svg b/application/assets/fonts/icons/calculator.svg
new file mode 100644
index 00000000..0ccb040e
--- /dev/null
+++ b/application/assets/fonts/icons/calculator.svg
@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 44.1 (41455) - http://www.bohemiancoding.com/sketch -->
+    <title>calculator</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard-4" transform="translate(-708.000000, -599.000000)">
+            <g id="235" transform="translate(708.000000, 599.000000)">
+                <rect id="Body" stroke="#333333" stroke-width="2" x="4" y="3" width="16" height="18" rx="2"></rect>
+                <path d="M7,6.49538898 C7,6.2217932 7.22765279,6 7.50964952,6 L16.4903505,6 C16.7718221,6 17,6.2157526 17,6.49538898 L17,8.50461102 C17,8.7782068 16.7723472,9 16.4903505,9 L7.50964952,9 C7.22817786,9 7,8.7842474 7,8.50461102 L7,6.49538898 Z M7,10.5046844 C7,10.2259549 7.2157526,10 7.49538898,10 L9.50461102,10 C9.7782068,10 10,10.214035 10,10.5046844 L10,11.4953156 C10,11.7740451 9.7842474,12 9.50461102,12 L7.49538898,12 C7.2217932,12 7,11.785965 7,11.4953156 L7,10.5046844 Z M7,13.5046844 C7,13.2259549 7.2157526,13 7.49538898,13 L9.50461102,13 C9.7782068,13 10,13.214035 10,13.5046844 L10,14.4953156 C10,14.7740451 9.7842474,15 9.50461102,15 L7.49538898,15 C7.2217932,15 7,14.785965 7,14.4953156 L7,13.5046844 Z M7,16.5046844 C7,16.2259549 7.2157526,16 7.49538898,16 L9.50461102,16 C9.7782068,16 10,16.214035 10,16.5046844 L10,17.4953156 C10,17.7740451 9.7842474,18 9.50461102,18 L7.49538898,18 C7.2217932,18 7,17.785965 7,17.4953156 L7,16.5046844 Z M11,10.5046844 C11,10.2259549 11.2157526,10 11.495389,10 L13.504611,10 C13.7782068,10 14,10.214035 14,10.5046844 L14,11.4953156 C14,11.7740451 13.7842474,12 13.504611,12 L11.495389,12 C11.2217932,12 11,11.785965 11,11.4953156 L11,10.5046844 Z M11,13.5046844 C11,13.2259549 11.2157526,13 11.495389,13 L13.504611,13 C13.7782068,13 14,13.214035 14,13.5046844 L14,14.4953156 C14,14.7740451 13.7842474,15 13.504611,15 L11.495389,15 C11.2217932,15 11,14.785965 11,14.4953156 L11,13.5046844 Z M11,16.5046844 C11,16.2259549 11.2157526,16 11.495389,16 L13.504611,16 C13.7782068,16 14,16.214035 14,16.5046844 L14,17.4953156 C14,17.7740451 13.7842474,18 13.504611,18 L11.495389,18 C11.2217932,18 11,17.785965 11,17.4953156 L11,16.5046844 Z M15,10.5046844 C15,10.2259549 15.214035,10 15.5046844,10 L16.4953156,10 C16.7740451,10 17,10.214035 17,10.5046844 L17,11.4953156 C17,11.7740451 16.785965,12 16.4953156,12 L15.5046844,12 C15.2259549,12 15,11.785965 15,11.4953156 L15,10.5046844 Z M15,13.5046844 C15,13.2259549 15.214035,13 15.5046844,13 L16.4953156,13 C16.7740451,13 17,13.214035 17,13.5046844 L17,14.4953156 C17,14.7740451 16.785965,15 16.4953156,15 L15.5046844,15 C15.2259549,15 15,14.785965 15,14.4953156 L15,13.5046844 Z M15,16.5046844 C15,16.2259549 15.214035,16 15.5046844,16 L16.4953156,16 C16.7740451,16 17,16.214035 17,16.5046844 L17,17.4953156 C17,17.7740451 16.785965,18 16.4953156,18 L15.5046844,18 C15.2259549,18 15,17.785965 15,17.4953156 L15,16.5046844 Z" id="Buttons" fill="#333333"></path>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/application/assets/fonts/icons/calendar.svg b/application/assets/fonts/icons/calendar.svg
new file mode 100644
index 00000000..15232872
--- /dev/null
+++ b/application/assets/fonts/icons/calendar.svg
@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 44.1 (41455) - http://www.bohemiancoding.com/sketch -->
+    <title>calendar</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard-4" transform="translate(-312.000000, -247.000000)">
+            <g id="67" transform="translate(312.000000, 247.000000)">
+                <path d="M1,4.99420208 C1,3.34054993 2.34308127,2 4.00138694,2 L19.9986131,2 C21.6562333,2 23,3.34331197 23,4.99420208 L23,19.0057979 C23,20.6594501 21.6569187,22 19.9986131,22 L4.00138694,22 C2.3437667,22 1,20.656688 1,19.0057979 L1,4.99420208 Z M3,7.00684547 L3,18.9931545 C3,19.5500512 3.44475929,20 3.99339768,20 L20.0066023,20 C20.5550537,20 21,19.5492199 21,18.9931545 L21,7.00684547 C21,6.44994876 20.5552407,6 20.0066023,6 L3.99339768,6 C3.44494629,6 3,6.45078007 3,7.00684547 Z" id="Base" fill="#333333"></path>
+                <polyline id="1" stroke="#333333" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" points="8 12 10 10 10 16"></polyline>
+                <polyline id="1" stroke="#333333" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" points="13 12 15 10 15 16"></polyline>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/application/assets/fonts/icons/camera-flip.svg b/application/assets/fonts/icons/camera-flip.svg
new file mode 100644
index 00000000..492f1c7f
--- /dev/null
+++ b/application/assets/fonts/icons/camera-flip.svg
@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 44.1 (41455) - http://www.bohemiancoding.com/sketch -->
+    <title>camera-flip</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard-4" transform="translate(-796.000000, -467.000000)">
+            <g id="178" transform="translate(796.000000, 467.000000)">
+                <path d="M5.58578644,6 L8.58578644,3 L15.4142136,3 L18.4142136,6 L20,6 C21.6580002,6 23,7.34240412 23,9.00276013 L23,17.9972399 C23,19.6524215 21.6572639,21 20.0092049,21 L3.99079514,21 C2.336848,21 1,19.6565662 1,17.9972399 L1,9.00276013 C1,7.34261395 2.33719763,6 4,6 L5.58578644,6 Z" id="Body" stroke="#333333" stroke-width="2" stroke-linejoin="round"></path>
+                <path d="M17,13 L18.009222,13 C18.5490248,13 18.7314226,13.3581032 18.4001155,13.799846 L16.5998845,16.200154 C16.3389292,16.5480944 15.9549287,16.6219918 15.6414764,16.4263383 C15.6294885,16.439074 15.6174346,16.4517469 15.6053152,16.4643563 L15.480061,16.2943685 C15.4523296,16.2655657 15.4256196,16.2341595 15.4001155,16.200154 L13.5998845,13.799846 C13.26623,13.3549733 13.4435864,13 13.990778,13 L15,13 C15,11.3431458 13.6568542,10 12,10 C11.6398532,10 11.2945287,10.063462 10.9745993,10.1798133 L9.75848525,8.52937284 C10.4326883,8.19067465 11.1940769,8 12,8 C14.7614237,8 17,10.2385763 17,13 Z M7,13 L5.99077797,13 C5.44358641,13 5.26622999,12.6450267 5.5998845,12.200154 L7.4001155,9.79984599 C7.73142256,9.35810325 8.26622999,9.35497332 8.5998845,9.79984599 L10.4001155,12.200154 C10.7314226,12.6418968 10.5490248,13 10.009222,13 L9,13 C9,14.6568542 10.3431458,16 12,16 C12.3865382,16 12.7560021,15.9268963 13.0953203,15.7937604 L14.3219683,17.4292911 C13.6281291,17.7937722 12.8381481,18 12,18 C9.23857625,18 7,15.7614237 7,13 Z" id="Arrow" fill="#333333"></path>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/application/assets/fonts/icons/camera.svg b/application/assets/fonts/icons/camera.svg
new file mode 100644
index 00000000..b1fb9ae8
--- /dev/null
+++ b/application/assets/fonts/icons/camera.svg
@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 44.1 (41455) - http://www.bohemiancoding.com/sketch -->
+    <title>camera</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard-4" transform="translate(-400.000000, -115.000000)" stroke="#333333" stroke-width="2">
+            <g id="9" transform="translate(400.000000, 115.000000)">
+                <path d="M5.58578644,6 L8.58578644,3 L15.4142136,3 L18.4142136,6 L20,6 C21.6580002,6 23,7.34240412 23,9.00276013 L23,17.9972399 C23,19.6524215 21.6572639,21 20.0092049,21 L3.99079514,21 C2.336848,21 1,19.6565662 1,17.9972399 L1,9.00276013 C1,7.34261395 2.33719763,6 4,6 L5.58578644,6 Z" id="Body" stroke-linejoin="round"></path>
+                <circle id="Lens" cx="12" cy="13" r="4"></circle>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/application/assets/fonts/icons/candle.svg b/application/assets/fonts/icons/candle.svg
new file mode 100644
index 00000000..8e03c42c
--- /dev/null
+++ b/application/assets/fonts/icons/candle.svg
@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 44.1 (41455) - http://www.bohemiancoding.com/sketch -->
+    <title>candle</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard-4" transform="translate(-224.000000, -555.000000)">
+            <g id="205" transform="translate(224.000000, 555.000000)">
+                <path d="M9,9.9955775 C9,9.44573523 9.45097518,9.07516253 9.99077797,9.16512966 L14.009222,9.83487034 C14.5564136,9.92606893 15,10.4556644 15,10.9953976 L15,19.0046024 C15,19.5543453 14.5490248,20 14.009222,20 L9.99077797,20 C9.44358641,20 9,19.555163 9,19.0044225 L9,9.9955775 Z" id="Candle" stroke="#333333" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
+                <rect id="Wax" fill="#333333" x="12" y="10" width="1" height="4" rx="0.5"></rect>
+                <path d="M4.83659172,21.2548876 C4.37455487,20.5618323 4.66712976,20 5.50524116,20 L18.4947588,20 C19.3260806,20 19.6238153,20.5642771 19.1634083,21.2548876 L18,23 L6,23 L4.83659172,21.2548876 Z" id="Base" stroke="#333333" stroke-width="2" stroke-linejoin="round"></path>
+                <path d="M12,7 C13.1045695,7 14,6 14,5 C14,3.5 12,3 12,1 C11,1 10,3.8954305 10,5 C10,6.1045695 10.8954305,7 12,7 Z" id="Flame" stroke="#333333" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/application/assets/fonts/icons/candy-cane.svg b/application/assets/fonts/icons/candy-cane.svg
new file mode 100644
index 00000000..b6eef3da
--- /dev/null
+++ b/application/assets/fonts/icons/candy-cane.svg
@@ -0,0 +1,22 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 44.1 (41455) - http://www.bohemiancoding.com/sketch -->
+    <title>candy-cane</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard-4" transform="translate(-180.000000, -555.000000)" stroke="#333333">
+            <g id="204" transform="translate(180.000000, 555.000000)">
+                <path d="M16.9999998,7.00086237 L16.9999998,7.00000618 L17,7.00087166 L17,20.9991283 C17,22.1047241 16.1078829,23 15,23 C13.8945707,23 13,22.1067965 13,20.9991283 L13,7.00087166 L13.0000002,7.00086237 L13,7 C13,5.8954305 12.1045695,5 11,5 C9.8954305,5 9,5.8954305 9,7 L9,9 C9,10.1045695 8.1045695,11 7,11 C5.8954305,11 5,10.1045695 5,9 L5,7 C5,3.6862915 7.6862915,1 11,1 C14.3137085,1 17,3.6862915 17,7 L16.9999998,7.00086237 Z" id="Cane" stroke-width="2" fill-rule="nonzero"></path>
+                <path d="M14,20 L16.0615528,17.9384472" id="Path-143" stroke-linecap="square"></path>
+                <path d="M14,16 L16.0615528,13.9384472" id="Path-143" stroke-linecap="square"></path>
+                <path d="M14,12 L16.0615528,9.93844719" id="Path-143" stroke-linecap="square"></path>
+                <path d="M14,8 L16.0615528,5.93844719" id="Path-143" stroke-linecap="square"></path>
+                <path d="M6,9 L8.06155281,6.93844719" id="Path-143" stroke-linecap="square" transform="translate(7.030776, 7.969224) scale(-1, 1) translate(-7.030776, -7.969224) "></path>
+                <path d="M13,5 L14,3" id="Path-143" stroke-linecap="square"></path>
+                <path d="M10.5,4 L10.5,2" id="Path-145" stroke-linecap="square"></path>
+                <path d="M8.5,5.5 L7,3.5" id="Path-145" stroke-linecap="square"></path>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/application/assets/fonts/icons/candy-corn.svg b/application/assets/fonts/icons/candy-corn.svg
new file mode 100644
index 00000000..70509210
--- /dev/null
+++ b/application/assets/fonts/icons/candy-corn.svg
@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 44.1 (41455) - http://www.bohemiancoding.com/sketch -->
+    <title>candy-corn</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard-4" transform="translate(-356.000000, -467.000000)">
+            <g id="168" transform="translate(356.000000, 467.000000)">
+                <path d="M9.58690373,4.34351809 C10.7424395,1.45527444 13.2624894,1.45968638 14.415837,4.3436502 L19.8163669,17.8477611 C20.6949807,20.044749 19.3661914,22 16.9905224,22 L7.00947762,22 C4.64339363,22 3.30798586,20.0375749 4.18414495,17.847629 L9.58690373,4.34351809 Z" id="Body" stroke="#333333" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
+                <path d="M8,7 L4.5,15 C4.5,15 7,16 12,16 C17,16 19.5,15 19.5,15 L15.5,7 C15.5,7 15,8 12,8 C9,8 8,7 8,7 Z" id="Mid-Stripe" fill="#333333" opacity="0.200000003"></path>
+                <path d="M4,21 L4.5,15 C4.5,15 7,16 12,16 C17,16 19.5,15 19.5,15 L20,21 L4,21 Z" id="Bottom-Stripe" fill="#333333" opacity="0.100000001"></path>
+                <path d="M9.5,17 C8.67157288,17 8,16.3284271 8,15.5 C8,14.6715729 8.67157288,14 9.5,14 C10.3284271,14 11,14.6715729 11,15.5 C11,16.3284271 10.3284271,17 9.5,17 Z M14.5,17 C13.6715729,17 13,16.3284271 13,15.5 C13,14.6715729 13.6715729,14 14.5,14 C15.3284271,14 16,14.6715729 16,15.5 C16,16.3284271 15.3284271,17 14.5,17 Z" id="eyes" fill="#333333"></path>
+                <path d="M10.4904785,18 C10.2195947,18 10.0167618,18.214035 10.0657282,18.4841442 C10.0657282,18.4841442 10,20 12,20 C14,20 13.9342718,18.4841442 13.9342718,18.4841442 C13.9705725,18.2167587 13.7849426,18 13.5095215,18 L10.4904785,18 Z" id="mouth" fill="#333333"></path>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/application/assets/fonts/icons/candy.svg b/application/assets/fonts/icons/candy.svg
new file mode 100644
index 00000000..5167ad2e
--- /dev/null
+++ b/application/assets/fonts/icons/candy.svg
@@ -0,0 +1,19 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 44.1 (41455) - http://www.bohemiancoding.com/sketch -->
+    <title>candy</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard-4" transform="translate(-840.000000, -555.000000)" stroke="#333333" stroke-width="2">
+            <g id="219" transform="translate(839.000000, 554.000000)">
+                <g id="Group-4" transform="translate(13.000000, 13.000000) rotate(-45.000000) translate(-13.000000, -13.000000) translate(2.000000, 7.000000)">
+                    <circle id="Candy" cx="11" cy="6" r="6"></circle>
+                    <polyline id="Right-Wrapper" stroke-linejoin="round" points="16.5751474 4.00464222 21.5751474 1.00464222 20.5751474 3.00464222 21.5751474 4.50464222 20.5751474 6.00464222 21.5751474 7.50464222 20.5751474 9.00464222 21.5751474 11.0046422 16.5751474 8.00464222"></polyline>
+                    <polyline id="Left-Wrapper" stroke-linejoin="round" transform="translate(2.924853, 6.004642) scale(-1, 1) translate(-2.924853, -6.004642) " points="0.424852643 4.00464222 5.42485264 1.00464222 4.42485264 3.00464222 5.42485264 4.50464222 4.42485264 6.00464222 5.42485264 7.50464222 4.42485264 9.00464222 5.42485264 11.0046422 0.424852643 8.00464222"></polyline>
+                    <path d="M11,9 C12.5,9 14,7.5 14,6" id="Highlight" stroke-linecap="round"></path>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/application/assets/fonts/icons/caps.svg b/application/assets/fonts/icons/caps.svg
new file mode 100644
index 00000000..1cc2d8ad
--- /dev/null
+++ b/application/assets/fonts/icons/caps.svg
@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 44.1 (41455) - http://www.bohemiancoding.com/sketch -->
+    <title>caps</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linejoin="round">
+        <g id="Artboard-4" transform="translate(-136.000000, -731.000000)" stroke="#333333" stroke-width="2">
+            <g id="283" transform="translate(136.000000, 731.000000)">
+                <path d="M12,2 L21,11 L16,11 L16,13.9906311 C16,14.5566468 15.5536144,15 15.0029699,15 L8.99703014,15 C8.45303631,15 8,14.5480902 8,13.9906311 L8,11 L3,11 L12,2 Z M8,19.0093689 C8,18.4519098 8.45303631,18 8.99703014,18 L15.0029699,18 C15.5536144,18 16,18.4433532 16,19.0093689 L16,20.9906311 C16,21.5480902 15.5469637,22 15.0029699,22 L8.99703014,22 C8.4463856,22 8,21.5566468 8,20.9906311 L8,19.0093689 Z" id="Arrow"></path>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/application/assets/fonts/icons/car.svg b/application/assets/fonts/icons/car.svg
new file mode 100644
index 00000000..55eb197e
--- /dev/null
+++ b/application/assets/fonts/icons/car.svg
@@ -0,0 +1,19 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 44.1 (41455) - http://www.bohemiancoding.com/sketch -->
+    <title>car</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard-4" transform="translate(-576.000000, -731.000000)">
+            <g id="293" transform="translate(576.000000, 731.000000)">
+                <path d="M2.4428885,9.83566725 C2.75057268,9.37414097 3.44494629,9 3.99339768,9 L20.0066023,9 C20.5552407,9 21.2452393,9.36785889 21.5571115,9.83566725 L21.8947051,10.3420576 C22.5051426,11.2577139 23,12.8982606 23,13.9979131 L23,17.009222 C23,17.5564136 22.5621443,18.0995398 22.019805,18.2072006 C22.019805,18.2072006 19.1352752,19 12,19 C4.8647248,19 1.95442469,18.2023649 1.95442469,18.2023649 C1.42731049,18.0906019 1,17.5490248 1,17.009222 L1,13.9979131 C1,12.8944962 1.49438214,11.2584268 2.10529494,10.3420576 L2.4428885,9.83566725 Z" id="Body" stroke="#333333" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
+                <path d="M8.5,14 C9.5,14 14.5,14 15.5,14 C16.5,14 17.5,15 17.5,15.5 C17.5,16 17,17 16.5,17 C16,17 8,17 7.5,17 C7,17 6.5,16 6.5,15.5 C6.5,15 7.5,14 8.5,14 Z" id="Grill" fill="#333333"></path>
+                <path d="M19.1718043,15.1997033 C18.3559629,15.3435581 17.5391028,14.5783486 17.3472964,13.49056 C17.1554899,12.4027714 17.6613702,11.4043271 18.4772116,11.2604723 C19.2930531,11.1166174 20.1099131,11.8818269 20.3017196,12.9696155 C20.4935261,14.0574041 19.9876458,15.0558484 19.1718043,15.1997033 Z M4.82718722,15.1997033 C4.01134576,15.0558484 3.50546546,14.0574041 3.69727194,12.9696155 C3.88907842,11.8818269 4.70593847,11.1166174 5.52177993,11.2604723 C6.33762138,11.4043271 6.84350168,12.4027714 6.6516952,13.49056 C6.45988872,14.5783486 5.64302867,15.3435581 4.82718722,15.1997033 Z" id="Headlights" fill="#333333"></path>
+                <path d="M20,18 L24,17 L24,21.0001925 C24,21.5523709 23.5566468,22 22.9906311,22 L21.0093689,22 C20.4519098,22 20,21.5566468 20,20.9906311 L20,18 Z M0,17 L4,19 L4,21.0010434 C4,21.5527519 3.55664682,22 2.9906311,22 L1.0093689,22 C0.451909848,22 0,21.5562834 0,21.0001925 L0,17 Z" id="Wheels" fill="#333333"></path>
+                <path d="M3.80243218,4.9878391 C3.91154587,4.44227063 4.42796135,3.90046024 4.97678638,3.78301489 C4.97678638,3.78301489 8,3 12,3 C16,3 19.0470428,3.78792572 19.0470428,3.78792572 C19.5733465,3.90505111 20.0887433,4.44371665 20.1975678,4.9878391 L21,9 L3,9 L3.80243218,4.9878391 Z" id="Windscreen" stroke="#333333" stroke-width="2"></path>
+                <path d="M24,8.5 C24,9.5 22.5,10 21,10 C21,8.5 21.5,7 22.5,7 C23.5,7 24,7.5 24,8.5 Z M0,8.5 C0,7.5 0.5,7 1.5,7 C2.5,7 3,8.5 3,10 C1.5,10 0,9.5 0,8.5 Z" id="Mirros" fill="#333333"></path>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/application/assets/fonts/icons/card.svg b/application/assets/fonts/icons/card.svg
new file mode 100644
index 00000000..9d1b06aa
--- /dev/null
+++ b/application/assets/fonts/icons/card.svg
@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 44.1 (41455) - http://www.bohemiancoding.com/sketch -->
+    <title>card</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard-4" transform="translate(-796.000000, -247.000000)">
+            <g id="78" transform="translate(796.000000, 247.000000)">
+                <rect id="Card" stroke="#333333" stroke-width="2" stroke-linejoin="round" x="2" y="4" width="20" height="16" rx="1"></rect>
+                <rect id="Magnetic-Strip" fill="#333333" x="2" y="7" width="20" height="2"></rect>
+                <path d="M5,11 L13,11 L13,13 L5,13 L5,11 Z M15,11 L19,11 L19,12 L15,12 L15,11 Z M16,12 L19,12 L19,13 L16,13 L16,12 Z" id="Info" fill="#333333" opacity="0.5"></path>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/application/assets/fonts/icons/cart.svg b/application/assets/fonts/icons/cart.svg
new file mode 100644
index 00000000..30720529
--- /dev/null
+++ b/application/assets/fonts/icons/cart.svg
@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 44.1 (41455) - http://www.bohemiancoding.com/sketch -->
+    <title>cart</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard-4" transform="translate(-400.000000, -599.000000)">
+            <g id="229" transform="translate(400.000000, 599.000000)">
+                <path d="M19,22 C17.8954305,22 17,21.1045695 17,20 C17,18.8954305 17.8954305,18 19,18 C20.1045695,18 21,18.8954305 21,20 C21,21.1045695 20.1045695,22 19,22 Z M9,22 C7.8954305,22 7,21.1045695 7,20 C7,18.8954305 7.8954305,18 9,18 C10.1045695,18 11,18.8954305 11,20 C11,21.1045695 10.1045695,22 9,22 Z" id="Wheels" fill="#333333"></path>
+                <polyline id="Frame" stroke="#333333" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" points="20 16 8 16 4 4 2 4"></polyline>
+                <polyline id="Body" stroke="#333333" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" points="7.5 13 20 13 22 6 5 6"></polyline>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/application/assets/fonts/icons/cast.svg b/application/assets/fonts/icons/cast.svg
new file mode 100644
index 00000000..dfd1a776
--- /dev/null
+++ b/application/assets/fonts/icons/cast.svg
@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 44.1 (41455) - http://www.bohemiancoding.com/sketch -->
+    <title>cast</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard-4" transform="translate(-576.000000, -775.000000)">
+            <g id="313" transform="translate(576.000000, 775.000000)">
+                <path d="M14,21 C14,20.3198705 13.9477705,19.6519398 13.8471036,19 L20.1079605,19 C20.6000638,19 21,18.4774101 21,17.8264982 L21,6.17350177 C21,5.52281095 20.5995081,5 20.1079605,5 L3.8920395,5 C3.3999362,5 3,5.52258989 3,6.17350177 L3,8.15289636 C2.34806024,8.05222948 1.68012954,8 1,8 L1,6.38159099 C1,4.5152872 2.22486399,3 3.74189208,3 L20.2581079,3 C21.7741705,3 23,4.5150181 23,6.38159099 L23,17.618409 C23,19.4847128 21.775136,21 20.2581079,21 L14,21 Z M13.3730012,17 C12.0929649,13.0375969 8.96240308,9.90703508 5,8.62699876 L5,7 L19,7 L19,17 L13.3730012,17 Z" id="Screen" fill="#333333" fill-rule="nonzero"></path>
+                <path d="M2.0093689,21 C1.45190985,21 1,20.5496864 1,19.9906311 L1,18 C3,18 4,19 4,21 L2.0093689,21 Z" id="0" fill="#333333"></path>
+                <path d="M1,15 C4.5,15 7,17.5 7,21" id="1" stroke="#333333" stroke-width="2"></path>
+                <path d="M1,11 C6.5,11 11,15.5 11,21" id="2" stroke="#333333" stroke-width="2"></path>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/application/assets/fonts/icons/castle.svg b/application/assets/fonts/icons/castle.svg
new file mode 100644
index 00000000..301d8a07
--- /dev/null
+++ b/application/assets/fonts/icons/castle.svg
@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 44.1 (41455) - http://www.bohemiancoding.com/sketch -->
+    <title>castle</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard-4" transform="translate(-664.000000, -775.000000)">
+            <g id="315" transform="translate(664.000000, 775.000000)">
+                <path d="M4,3 L7,3 L7,5 L10,5 L10,3 L14,3 L14,5 L17,5 L16.9812012,3 L20,3 L20,7 L19,9 L19,19.9975267 C19,20.5511774 18.5500512,21 17.9931545,21 L6.00684547,21 C5.45078007,21 5,20.544239 5,19.9975267 L5,9 L4,7 L4,3 Z" id="Walls" stroke="#333333" stroke-width="2" stroke-linejoin="round"></path>
+                <path d="M10,16.9979131 C10,15.8944962 10.8877296,15 12,15 L12,15 C13.1045695,15 14,15.8982606 14,16.9979131 L14,21 L10,21 L10,16.9979131 Z" id="Door" stroke="#333333" stroke-width="2"></path>
+                <path d="M8,10.9989566 C8,10.4472481 8.44386482,10 9,10 C9.55228475,10 10,10.4426603 10,10.9989566 L10,13 L8,13 L8,10.9989566 Z M11,10.9989566 C11,10.4472481 11.4438648,10 12,10 C12.5522847,10 13,10.4426603 13,10.9989566 L13,13 L11,13 L11,10.9989566 Z M14,10.9989566 C14,10.4472481 14.4438648,10 15,10 C15.5522847,10 16,10.4426603 16,10.9989566 L16,13 L14,13 L14,10.9989566 Z" id="Windows" fill="#333333"></path>
+                <rect id="Shadow" fill="#333333" opacity="0.200000003" x="4" y="7" width="16" height="2"></rect>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/application/assets/fonts/icons/cd.svg b/application/assets/fonts/icons/cd.svg
new file mode 100644
index 00000000..77a7aeb4
--- /dev/null
+++ b/application/assets/fonts/icons/cd.svg
@@ -0,0 +1,23 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 44.1 (41455) - http://www.bohemiancoding.com/sketch -->
+    <title>cd</title>
+    <desc>Created with Sketch.</desc>
+    <defs>
+        <linearGradient x1="6.68334961%" y1="4.94689941%" x2="93.1610107%" y2="94.2169189%" id="linearGradient-1">
+            <stop stop-color="#333333" stop-opacity="0" offset="0%"></stop>
+            <stop stop-color="#333333" stop-opacity="0" offset="28.0527827%"></stop>
+            <stop stop-color="#333333" stop-opacity="0.251188859" offset="49.658143%"></stop>
+            <stop stop-color="#333333" stop-opacity="0" offset="70.1285382%"></stop>
+            <stop stop-color="#333333" stop-opacity="0" offset="100%"></stop>
+        </linearGradient>
+    </defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard-4" transform="translate(-708.000000, -423.000000)">
+            <g id="156" transform="translate(708.000000, 423.000000)">
+                <path d="M12,22 C6.4771525,22 2,17.5228475 2,12 C2,6.4771525 6.4771525,2 12,2 C17.5228475,2 22,6.4771525 22,12 C22,17.5228475 17.5228475,22 12,22 Z M12,14 C13.1045695,14 14,13.1045695 14,12 C14,10.8954305 13.1045695,10 12,10 C10.8954305,10 10,10.8954305 10,12 C10,13.1045695 10.8954305,14 12,14 Z" id="Base" stroke="#333333" stroke-width="2"></path>
+                <path d="M3,12 C3,7.02943725 7.02943725,3 12,3 C16.9705627,3 21,7.02943725 21,12 C21,16.9705627 16.9705627,21 12,21 C7.02943725,21 3,16.9705627 3,12 Z M14,12 C14,10.8954305 13.1045695,10 12,10 C10.8954305,10 10,10.8954305 10,12 C10,13.1045695 10.8954305,14 12,14 C13.1045695,14 14,13.1045695 14,12 Z" id="reflection" fill="url(#linearGradient-1)" fill-rule="nonzero"></path>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/application/assets/fonts/icons/chart-pie.svg b/application/assets/fonts/icons/chart-pie.svg
new file mode 100644
index 00000000..45d49ff8
--- /dev/null
+++ b/application/assets/fonts/icons/chart-pie.svg
@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 44.1 (41455) - http://www.bohemiancoding.com/sketch -->
+    <title>chart-pie</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
+        <g id="Artboard-4" transform="translate(-488.000000, -291.000000)" stroke="#333333" stroke-width="2">
+            <g id="91" transform="translate(485.000000, 288.000000)">
+                <g id="Group-2" transform="translate(15.353553, 14.646447) rotate(-315.000000) translate(-15.353553, -14.646447) translate(5.353553, 4.146447)">
+                    <path d="M2.93106996,3.92679506 C1.12016966,5.73660772 1.77635684e-15,8.23748904 1.77635684e-15,11 C1.77635684e-15,16.5228475 4.4771525,21 10,21 C15.5228475,21 20,16.5228475 20,11 C20,8.23966441 18.8815938,5.74054658 17.0732068,3.93107182 L10.0104122,11 L2.93106996,3.92679506 Z" id="Pie"></path>
+                    <path d="M4.73763737,1.49499676 C6.26620244,0.547206672 8.06919774,2.73558953e-13 10,2.73558953e-13 C11.9308021,2.73558953e-13 13.7337973,0.547206602 15.2623623,1.49499657 L10,6.7573595 L4.73763737,1.49499676 Z" id="Slice"></path>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/application/assets/fonts/icons/chart.svg b/application/assets/fonts/icons/chart.svg
new file mode 100644
index 00000000..d4528574
--- /dev/null
+++ b/application/assets/fonts/icons/chart.svg
@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 44.1 (41455) - http://www.bohemiancoding.com/sketch -->
+    <title>chart</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard-4" transform="translate(-400.000000, -203.000000)">
+            <g id="49" transform="translate(400.000000, 203.000000)">
+                <polyline id="Axis" stroke="#333333" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" points="3 3 3 21.006249 21.0246733 21.006249"></polyline>
+                <path d="M6,19 L6,12.5047388 C6,11.6736945 6.66579723,11 7.5,11 L7.5,11 C8.32842712,11 9,11.6683155 9,12.5047388 L9,19 L6,19 Z" id="Bar-1" fill="#333333"></path>
+                <path d="M11,19 L11,5.49309635 C11,4.66848201 11.6657972,4 12.5,4 L12.5,4 C13.3284271,4 14,4.66388585 14,5.49309635 L14,19 L11,19 Z" id="Bar-2" fill="#333333"></path>
+                <path d="M16,19 L16,8.49554521 C16,7.6695784 16.6657972,7 17.5,7 L17.5,7 C18.3284271,7 19,7.67955446 19,8.49554521 L19,19 L16,19 Z" id="Bar-3" fill="#333333"></path>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/application/assets/fonts/icons/chat-typing.svg b/application/assets/fonts/icons/chat-typing.svg
new file mode 100644
index 00000000..15cfa00d
--- /dev/null
+++ b/application/assets/fonts/icons/chat-typing.svg
@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 44.1 (41455) - http://www.bohemiancoding.com/sketch -->
+    <title>chat-typing</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard-4" transform="translate(-136.000000, -599.000000)">
+            <g id="223" transform="translate(136.000000, 599.000000)">
+                <path d="M12.4142136,18 L9,21.4142136 L5.58578644,18 L3.99895656,18 C2.89547708,18 2,17.0970743 2,15.9975267 L2,6.00247329 C2,4.89859975 2.89058031,4 3.99339768,4 L20.0066023,4 C21.1082892,4 22,4.90415942 22,6.00247329 L22,15.9975267 C22,17.1024207 21.1070219,18 20.0024554,18 L12.4142136,18 Z" id="Body" stroke="#333333" stroke-width="2" stroke-linejoin="round"></path>
+                <path d="M8,12 C7.44771525,12 7,11.5522847 7,11 C7,10.4477153 7.44771525,10 8,10 C8.55228475,10 9,10.4477153 9,11 C9,11.5522847 8.55228475,12 8,12 Z M12,12 C11.4477153,12 11,11.5522847 11,11 C11,10.4477153 11.4477153,10 12,10 C12.5522847,10 13,10.4477153 13,11 C13,11.5522847 12.5522847,12 12,12 Z M16,12 C15.4477153,12 15,11.5522847 15,11 C15,10.4477153 15.4477153,10 16,10 C16.5522847,10 17,10.4477153 17,11 C17,11.5522847 16.5522847,12 16,12 Z" id="Dots" fill="#333333"></path>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/application/assets/fonts/icons/chat.svg b/application/assets/fonts/icons/chat.svg
new file mode 100644
index 00000000..d7dad778
--- /dev/null
+++ b/application/assets/fonts/icons/chat.svg
@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 44.1 (41455) - http://www.bohemiancoding.com/sketch -->
+    <title>chat</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard-4" transform="translate(-664.000000, -115.000000)">
+            <g id="15" transform="translate(664.000000, 115.000000)">
+                <path d="M12.4142136,18 L9,21.4142136 L5.58578644,18 L3.99895656,18 C2.89547708,18 2,17.0970743 2,15.9975267 L2,6.00247329 C2,4.89859975 2.89058031,4 3.99339768,4 L20.0066023,4 C21.1082892,4 22,4.90415942 22,6.00247329 L22,15.9975267 C22,17.1024207 21.1070219,18 20.0024554,18 L12.4142136,18 Z" id="Rectangle-406" stroke="#333333" stroke-width="2" stroke-linejoin="round"></path>
+                <path d="M6,9 C6,8.44771525 6.45576096,8 7.00247329,8 L16.9975267,8 C17.5511774,8 18,8.44386482 18,9 C18,9.55228475 17.544239,10 16.9975267,10 L7.00247329,10 C6.44882258,10 6,9.55613518 6,9 Z M6,13 C6,12.4477153 6.45576096,12 7.00247329,12 L16.9975267,12 C17.5511774,12 18,12.4438648 18,13 C18,13.5522847 17.544239,14 16.9975267,14 L7.00247329,14 C6.44882258,14 6,13.5561352 6,13 Z" id="Combined-Shape" fill="#333333"></path>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/application/assets/fonts/icons/chats.svg b/application/assets/fonts/icons/chats.svg
new file mode 100644
index 00000000..53d78a05
--- /dev/null
+++ b/application/assets/fonts/icons/chats.svg
@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 44.1 (41455) - http://www.bohemiancoding.com/sketch -->
+    <title>chats</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard-4" transform="translate(-180.000000, -599.000000)">
+            <g id="224" transform="translate(180.000000, 599.000000)">
+                <path d="M15.2928932,22.7071068 C15.6834175,23.0976311 16.3165825,23.0976311 16.7071068,22.7071068 L19.4142136,20 L20,20 C21.5522847,20 23,18.5522847 23,17 L23,11 C23,9.44771525 21.5522847,8 20,8 L20,10 C20.4477153,10 21,10.5522847 21,11 L21,17 C21,17.4477153 20.4477153,18 20,18 L19,18 C18.7347835,18 18.4804296,18.1053568 18.2928932,18.2928932 L16,20.5857864 L13.7071068,18.2928932 C13.5195704,18.1053568 13.2652165,18 13,18 L8,18 C7.55228475,18 7,17.4477153 7,17 L5,15.5 L5,17 C5,18.5522847 6.44771525,20 8,20 L10.3877551,20 L11.9259259,20 C12.4492636,20 12.6510872,20 12.7804477,20 L15.2928932,22.7071068 Z" id="Reply" fill="#333333" fill-rule="nonzero"></path>
+                <path d="M4.00042708,10 C4.0010501,9.99858629 4.00193647,10 4,10 L4.00042708,10 Z M11.4142136,12 L8,15.4142136 L4.58578644,12 L4,12 C2.89736015,12 2,11.1011825 2,10.0029699 L2,3.99703014 C2,2.8917406 2.90000582,2 4.00684547,2 L15.9931545,2 C17.0980352,2 18,2.89728733 18,3.99703014 L18,10.0029699 C18,11.1030865 17.1041196,12 16.009222,12 L11.4142136,12 Z" id="Message" stroke="#333333" stroke-width="2" stroke-linejoin="round"></path>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/application/assets/fonts/icons/checkbox-off.svg b/application/assets/fonts/icons/checkbox-off.svg
new file mode 100644
index 00000000..b6ae9ab3
--- /dev/null
+++ b/application/assets/fonts/icons/checkbox-off.svg
@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 44.1 (41455) - http://www.bohemiancoding.com/sketch -->
+    <title>checkbox-off</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard-4" transform="translate(-576.000000, -1090.000000)" stroke="#333333" stroke-width="2">
+            <g id="Extras" transform="translate(48.000000, 1046.000000)">
+                <g id="checkbox" transform="translate(528.000000, 44.000000)">
+                    <rect id="Box" x="3" y="3" width="18" height="18" rx="2"></rect>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/application/assets/fonts/icons/checkbox-on-alt.svg b/application/assets/fonts/icons/checkbox-on-alt.svg
new file mode 100644
index 00000000..77358ce9
--- /dev/null
+++ b/application/assets/fonts/icons/checkbox-on-alt.svg
@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 44.1 (41455) - http://www.bohemiancoding.com/sketch -->
+    <title>checkbox-on-alt</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard-4" transform="translate(-620.000000, -1090.000000)" fill="#333333">
+            <g id="Extras" transform="translate(48.000000, 1046.000000)">
+                <g id="checkbox-alt" transform="translate(572.000000, 44.000000)">
+                    <path d="M2,4.99420208 C2,3.34054993 3.34331197,2 4.99420208,2 L19.0057979,2 C20.6594501,2 22,3.34331197 22,4.99420208 L22,19.0057979 C22,20.6594501 20.656688,22 19.0057979,22 L4.99420208,22 C3.34054993,22 2,20.656688 2,19.0057979 L2,4.99420208 Z M8.76822128,12.3598156 C8.4146572,11.9355387 7.7840925,11.8782146 7.3598156,12.2317787 C6.9355387,12.5853428 6.87821464,13.2159075 7.23177872,13.6401844 L9.73177872,16.6401844 C10.1557881,17.1489956 10.9483569,17.1124967 11.3238078,16.5668692 L16.8394176,8.55125944 C17.1524908,8.09628295 17.0374555,7.47365564 16.582479,7.16058242 C16.1275025,6.8475092 15.5048752,6.96254453 15.191802,7.41752102 L10.4238576,14.3465792 L8.76822128,12.3598156 Z" id="Box"></path>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/application/assets/fonts/icons/checkbox-on.svg b/application/assets/fonts/icons/checkbox-on.svg
new file mode 100644
index 00000000..3a186475
--- /dev/null
+++ b/application/assets/fonts/icons/checkbox-on.svg
@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 44.1 (41455) - http://www.bohemiancoding.com/sketch -->
+    <title>checkbox-on</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard-4" transform="translate(-180.000000, -511.000000)" stroke="#333333" stroke-width="2">
+            <g id="184" transform="translate(180.000000, 511.000000)">
+                <rect id="Box" x="3" y="3" width="18" height="18" rx="2"></rect>
+                <polyline id="Tick" stroke-linecap="round" stroke-linejoin="round" points="8 13 10.5 16 16.0156098 7.98439023"></polyline>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/application/assets/fonts/icons/christmas-pudding.svg b/application/assets/fonts/icons/christmas-pudding.svg
new file mode 100644
index 00000000..3c997972
--- /dev/null
+++ b/application/assets/fonts/icons/christmas-pudding.svg
@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 44.1 (41455) - http://www.bohemiancoding.com/sketch -->
+    <title>christmas-pudding</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard-4" transform="translate(-796.000000, -555.000000)" stroke="#333333" stroke-width="2">
+            <g id="218" transform="translate(796.000000, 555.000000)">
+                <path d="M8.39841904,4.74956956 C5.22063485,6.13873231 3,9.31003762 3,13 C3,17.9705627 7.02943725,22 12,22 L12,22 C16.9705627,22 21,17.9705627 21,13 C21,9.49540718 18.9968733,6.45866966 16.0730932,4.97226064" id="Pudding"></path>
+                <path d="M3,11 C3,11 5,10 5.5,11 C6,12 6,14 8,14 C10,14 9,10 11,10 C13,10 12,15 14.5,15 C17,15 15.5,10 17.5,10 C19.5,10 18.5,12 21,12" id="Icing"></path>
+                <path d="M14,6 C12.8954305,6 12,5.1045695 12,4 C12,2.8954305 12.8954305,2 14,2 C15.1045695,2 16,2.8954305 16,4 C16,5.1045695 15.1045695,6 14,6 Z M10,5 C8.8954305,5 8,4.1045695 8,3 C8,1.8954305 8.8954305,1 10,1 C11.1045695,1 12,1.8954305 12,3 C12,4.1045695 11.1045695,5 10,5 Z" id="Berries"></path>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/application/assets/fonts/icons/christmas-tree.svg b/application/assets/fonts/icons/christmas-tree.svg
new file mode 100644
index 00000000..bc8a818e
--- /dev/null
+++ b/application/assets/fonts/icons/christmas-tree.svg
@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 44.1 (41455) - http://www.bohemiancoding.com/sketch -->
+    <title>christmas-tree</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
+        <g id="Artboard-4" transform="translate(-48.000000, -555.000000)" stroke="#333333" stroke-width="2">
+            <g id="201" transform="translate(48.000000, 555.000000)">
+                <path d="M12,1 L8,7 C8,7 9,8 12,8 C15,8 16,7 16,7 L12,1 Z" id="Top"></path>
+                <path d="M15,8 L18,13 C18,13 16,14 12,14 C8,14 6,13 6,13 L9,8 L15,8 Z" id="Mid"></path>
+                <path d="M17,14 L20,19 C20,19 19,20 12,20 C5,20 4,19 4,19 L7,14 L17,14 Z" id="Bottom"></path>
+                <rect id="Trunk" x="10" y="20" width="4" height="3"></rect>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/application/assets/fonts/icons/circle-cross.svg b/application/assets/fonts/icons/circle-cross.svg
new file mode 100644
index 00000000..ade5f1e4
--- /dev/null
+++ b/application/assets/fonts/icons/circle-cross.svg
@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 44.1 (41455) - http://www.bohemiancoding.com/sketch -->
+    <title>circle-cross</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard-4" transform="translate(-356.000000, -1134.000000)">
+            <g id="Extras" transform="translate(48.000000, 1046.000000)">
+                <g id="no" transform="translate(308.000000, 88.000000)">
+                    <circle id="Circle" stroke="#333333" stroke-width="2" cx="12" cy="12" r="10"></circle>
+                    <path d="M13,11 L13,7.99539757 C13,7.4556644 12.5522847,7 12,7 C11.4438648,7 11,7.44565467 11,7.99539757 L11,11 L7.99539757,11 C7.4556644,11 7,11.4477153 7,12 C7,12.5561352 7.44565467,13 7.99539757,13 L11,13 L11,16.0046024 C11,16.5443356 11.4477153,17 12,17 C12.5561352,17 13,16.5543453 13,16.0046024 L13,13 L16.0046024,13 C16.5443356,13 17,12.5522847 17,12 C17,11.4438648 16.5543453,11 16.0046024,11 L13,11 Z" id="x" fill="#333333" transform="translate(12.000000, 12.000000) rotate(-45.000000) translate(-12.000000, -12.000000) "></path>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/application/assets/fonts/icons/circle-tick.svg b/application/assets/fonts/icons/circle-tick.svg
new file mode 100644
index 00000000..cb681c9c
--- /dev/null
+++ b/application/assets/fonts/icons/circle-tick.svg
@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 44.1 (41455) - http://www.bohemiancoding.com/sketch -->
+    <title>circle-tick</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard-4" transform="translate(-400.000000, -1134.000000)" stroke="#333333" stroke-width="2">
+            <g id="Extras" transform="translate(48.000000, 1046.000000)">
+                <g id="yes" transform="translate(352.000000, 88.000000)">
+                    <circle id="Circle" cx="12" cy="12" r="10"></circle>
+                    <polyline id="Tick" stroke-linecap="round" stroke-linejoin="round" points="8.5 12.5 10.5 14.5 15.5 9.5"></polyline>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/application/assets/fonts/icons/city.svg b/application/assets/fonts/icons/city.svg
new file mode 100644
index 00000000..a35ef930
--- /dev/null
+++ b/application/assets/fonts/icons/city.svg
@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 44.1 (41455) - http://www.bohemiancoding.com/sketch -->
+    <title>city</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard-4" transform="translate(-708.000000, -775.000000)">
+            <g id="316" transform="translate(708.000000, 775.000000)">
+                <path d="M4,2.99180311 C4,2.44404538 4.4463114,2 4.99754465,2 L12.0024554,2 C12.553384,2 13,2.45530558 13,2.99180311 L13,22 L4.99754465,22 C4.44661595,22 4,21.5446944 4,21.0081969 L4,2.99180311 Z" id="Left-Building" stroke="#333333" stroke-width="2" stroke-linejoin="round"></path>
+                <path d="M13,11.0024733 C13,10.4488226 13.3964068,9.77348185 13.8724014,9.50148493 L19.1275986,6.49851507 C19.6094126,6.2231928 20,6.44463086 20,7.00087166 L20,20.9991283 C20,21.5518945 19.5621186,22 18.9970707,22 L13,22 L13,11.0024733 Z" id="Right-Building" stroke="#333333" stroke-width="2" stroke-linejoin="round"></path>
+                <path d="M6,4.49047852 C6,4.21959471 6.23193359,4 6.5,4 C6.77614237,4 7,4.21505737 7,4.49047852 L7,7.50952148 C7,7.78040529 6.76806641,8 6.5,8 C6.22385763,8 6,7.78494263 6,7.50952148 L6,4.49047852 Z M6,9.49047852 C6,9.21959471 6.23193359,9 6.5,9 C6.77614237,9 7,9.21505737 7,9.49047852 L7,12.5095215 C7,12.7804053 6.76806641,13 6.5,13 C6.22385763,13 6,12.7849426 6,12.5095215 L6,9.49047852 Z M6,14.4904785 C6,14.2195947 6.23193359,14 6.5,14 C6.77614237,14 7,14.2150574 7,14.4904785 L7,17.5095215 C7,17.7804053 6.76806641,18 6.5,18 C6.22385763,18 6,17.7849426 6,17.5095215 L6,14.4904785 Z M8,4.49047852 C8,4.21959471 8.23193359,4 8.5,4 C8.77614237,4 9,4.21505737 9,4.49047852 L9,7.50952148 C9,7.78040529 8.76806641,8 8.5,8 C8.22385763,8 8,7.78494263 8,7.50952148 L8,4.49047852 Z M8,9.49047852 C8,9.21959471 8.23193359,9 8.5,9 C8.77614237,9 9,9.21505737 9,9.49047852 L9,12.5095215 C9,12.7804053 8.76806641,13 8.5,13 C8.22385763,13 8,12.7849426 8,12.5095215 L8,9.49047852 Z M8,14.4904785 C8,14.2195947 8.23193359,14 8.5,14 C8.77614237,14 9,14.2150574 9,14.4904785 L9,17.5095215 C9,17.7804053 8.76806641,18 8.5,18 C8.22385763,18 8,17.7849426 8,17.5095215 L8,14.4904785 Z M10,4.49047852 C10,4.21959471 10.2319336,4 10.5,4 C10.7761424,4 11,4.21505737 11,4.49047852 L11,7.50952148 C11,7.78040529 10.7680664,8 10.5,8 C10.2238576,8 10,7.78494263 10,7.50952148 L10,4.49047852 Z M10,9.49047852 C10,9.21959471 10.2319336,9 10.5,9 C10.7761424,9 11,9.21505737 11,9.49047852 L11,12.5095215 C11,12.7804053 10.7680664,13 10.5,13 C10.2238576,13 10,12.7849426 10,12.5095215 L10,9.49047852 Z M10,14.4904785 C10,14.2195947 10.2319336,14 10.5,14 C10.7761424,14 11,14.2150574 11,14.4904785 L11,17.5095215 C11,17.7804053 10.7680664,18 10.5,18 C10.2238576,18 10,17.7849426 10,17.5095215 L10,14.4904785 Z M7,19.9989566 C7,19.4472481 7.44266033,19 7.99895656,19 L9.00104344,19 C9.55275191,19 10,19.4426603 10,19.9989566 L10,22 L7,22 L7,19.9989566 Z" id="Left-Windows" fill="#333333"></path>
+                <path d="M15,16.5046844 C15,16.2259549 15.2319336,16 15.5,16 C15.7761424,16 16,16.214035 16,16.5046844 L16,17.4953156 C16,17.7740451 15.7680664,18 15.5,18 C15.2238576,18 15,17.785965 15,17.4953156 L15,16.5046844 Z M17,16.5046844 C17,16.2259549 17.2319336,16 17.5,16 C17.7761424,16 18,16.214035 18,16.5046844 L18,17.4953156 C18,17.7740451 17.7680664,18 17.5,18 C17.2238576,18 17,17.785965 17,17.4953156 L17,16.5046844 Z M15,13.5046844 C15,13.2259549 15.2319336,13 15.5,13 C15.7761424,13 16,13.214035 16,13.5046844 L16,14.4953156 C16,14.7740451 15.7680664,15 15.5,15 C15.2238576,15 15,14.785965 15,14.4953156 L15,13.5046844 Z M15,11.5 C15,11.2238576 15.2319336,11 15.5,11 C15.7761424,11 16,11.2319336 16,11.5 C16,11.7761424 15.7680664,12 15.5,12 C15.2238576,12 15,11.7680664 15,11.5 Z M17,13.5046844 C17,13.2259549 17.2319336,13 17.5,13 C17.7761424,13 18,13.214035 18,13.5046844 L18,14.4953156 C18,14.7740451 17.7680664,15 17.5,15 C17.2238576,15 17,14.785965 17,14.4953156 L17,13.5046844 Z M17,10.5046844 C17,10.2259549 17.2319336,10 17.5,10 C17.7761424,10 18,10.214035 18,10.5046844 L18,11.4953156 C18,11.7740451 17.7680664,12 17.5,12 C17.2238576,12 17,11.785965 17,11.4953156 L17,10.5046844 Z M15,19.9989566 C15,19.4472481 15.4426603,19 15.9989566,19 L17.0010434,19 C17.5527519,19 18,19.4426603 18,19.9989566 L18,22 L15,22 L15,19.9989566 Z" id="Right-Windows" fill="#333333"></path>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/application/assets/fonts/icons/classic-mac.svg b/application/assets/fonts/icons/classic-mac.svg
new file mode 100644
index 00000000..5ec8034f
--- /dev/null
+++ b/application/assets/fonts/icons/classic-mac.svg
@@ -0,0 +1,19 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 44.1 (41455) - http://www.bohemiancoding.com/sketch -->
+    <title>classic-mac</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard-4" transform="translate(-576.000000, -291.000000)">
+            <g id="93" transform="translate(576.000000, 291.000000)">
+                <rect id="Body" stroke="#333333" stroke-width="2" x="4" y="1" width="16" height="19" rx="1"></rect>
+                <path d="M5,20 L19,20 L19,22.0010434 C19,22.5527519 18.5500512,23 17.9931545,23 L6.00684547,23 C5.45078007,23 5,22.5573397 5,22.0010434 L5,20 Z" id="Base" stroke="#333333" stroke-width="2"></path>
+                <path d="M6.5,3.5 L17.5,3.5 L17.5,12.5 L6.5,12.5 L6.5,3.5 Z" id="Screen" stroke="#333333" stroke-linejoin="round"></path>
+                <rect id="Disk-Drive" fill="#333333" x="13" y="15" width="4" height="1"></rect>
+                <rect id="Light" fill="#333333" x="6" y="16" width="2" height="1"></rect>
+                <path d="M9,5 L10,5 L10,7 L9,7 L9,5 Z M11,8 L12,8 L12,9 L11,9 L11,8 Z M12,5 L13,5 L13,9 L12,9 L12,5 Z M9,9 L10,9 L10,10 L9,10 L9,9 Z M10,10 L14,10 L14,11 L10,11 L10,10 Z M14,9 L15,9 L15,10 L14,10 L14,9 Z M14,5 L15,5 L15,7 L14,7 L14,5 Z" id="Happy-Mac" fill="#333333" opacity="0.5"></path>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/application/assets/fonts/icons/clock.svg b/application/assets/fonts/icons/clock.svg
new file mode 100644
index 00000000..33175496
--- /dev/null
+++ b/application/assets/fonts/icons/clock.svg
@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 44.1 (41455) - http://www.bohemiancoding.com/sketch -->
+    <title>clock</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard-4" transform="translate(-488.000000, -159.000000)" stroke="#333333" stroke-width="2">
+            <g id="31" transform="translate(488.000000, 159.000000)">
+                <path d="M12,21 C16.9705627,21 21,16.9705627 21,12 C21,7.02943725 16.9705627,3 12,3 C7.02943725,3 3,7.02943725 3,12 C3,16.9705627 7.02943725,21 12,21 Z" id="Face"></path>
+                <polyline id="Hands" stroke-linecap="round" stroke-linejoin="round" points="16 12 12 12 12 7"></polyline>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/application/assets/fonts/icons/cloud-download.svg b/application/assets/fonts/icons/cloud-download.svg
new file mode 100644
index 00000000..e71b686b
--- /dev/null
+++ b/application/assets/fonts/icons/cloud-download.svg
@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 44.1 (41455) - http://www.bohemiancoding.com/sketch -->
+    <title>cloud-download</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round">
+        <g id="Artboard-4" transform="translate(-356.000000, -775.000000)" stroke="#333333" stroke-width="2">
+            <g id="308" transform="translate(356.000000, 775.000000)">
+                <path d="M8,17 L5,17 L5,17 C2.790861,17 1,15.209139 1,13 C1,10.790861 2.790861,9 5,9 C5.35840468,9 5.70579988,9.04713713 6.03632437,9.13555013 C6.01233106,8.92702603 6,8.71495305 6,8.5 C6,5.46243388 8.46243388,3 11.5,3 C14.0673313,3 16.2238156,4.7590449 16.8299648,7.1376465 C17.2052921,7.04765874 17.5970804,7 18,7 C20.7614237,7 23,9.23857625 23,12 C23,14.7614237 20.7614237,17 18,17 L16,17" id="Cloud" stroke-linejoin="round"></path>
+                <path d="M12,13 L12,21" id="Line"></path>
+                <polyline id="Head" stroke-linejoin="round" points="15 20 12 23 9 20"></polyline>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/application/assets/fonts/icons/cloud-error-alt.svg b/application/assets/fonts/icons/cloud-error-alt.svg
new file mode 100644
index 00000000..9d6714a2
--- /dev/null
+++ b/application/assets/fonts/icons/cloud-error-alt.svg
@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 44.1 (41455) - http://www.bohemiancoding.com/sketch -->
+    <title>cloud-error-alt</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard-4" transform="translate(-444.000000, -775.000000)">
+            <g id="310" transform="translate(444.000000, 775.000000)">
+                <path d="M7,18 L5,18 C2.790861,18 1,16.209139 1,14 C1,11.790861 2.790861,10 5,10 C5.35840468,10 5.70579988,10.0471371 6.03632437,10.1355501 C6.01233106,9.92702603 6,9.71495305 6,9.5 C6,6.46243388 8.46243388,4 11.5,4 C14.0673313,4 16.2238156,5.7590449 16.8299648,8.1376465 C17.2052921,8.04765874 17.5970804,8 18,8 C20.7614237,8 23,10.2385763 23,13 C23,15.7614237 20.7614237,18 18,18 L17,18" id="Cloud" stroke="#333333" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
+                <circle id="Dot" fill="#333333" cx="12" cy="21" r="1"></circle>
+                <path d="M12,19 C11.4477153,19 10.9504098,18.5536886 10.8891617,18.0024554 L10.1999615,11.7996535 C10.0895258,10.8057323 10.8094597,10 11.8127441,10 L12.1872559,10 C13.1884068,10 13.9112567,10.79869 13.8000385,11.7996535 L13.1108383,18.0024554 C13.049624,18.553384 12.5561352,19 12,19 L12,19 Z" id="Line" fill="#333333"></path>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/application/assets/fonts/icons/cloud-error.svg b/application/assets/fonts/icons/cloud-error.svg
new file mode 100644
index 00000000..36b4952d
--- /dev/null
+++ b/application/assets/fonts/icons/cloud-error.svg
@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 44.1 (41455) - http://www.bohemiancoding.com/sketch -->
+    <title>cloud-error</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
+        <g id="Artboard-4" transform="translate(-400.000000, -775.000000)" stroke="#333333" stroke-width="2">
+            <g id="309" transform="translate(400.000000, 775.000000)">
+                <path d="M7,18 L5,18 C2.790861,18 1,16.209139 1,14 C1,11.790861 2.790861,10 5,10 C5.35840468,10 5.70579988,10.0471371 6.03632437,10.1355501 C6.01233106,9.92702603 6,9.71495305 6,9.5 C6,6.46243388 8.46243388,4 11.5,4 C14.0673313,4 16.2238156,5.7590449 16.8299648,8.1376465 C17.2052921,8.04765874 17.5970804,8 18,8 C20.7614237,8 23,10.2385763 23,13 C23,15.7614237 20.7614237,18 18,18 L17,18" id="Cloud"></path>
+                <path d="M9,21 L15,15" id="Path-238"></path>
+                <path d="M9,21 L15,15" id="Path-238" transform="translate(12.000000, 18.000000) scale(-1, 1) translate(-12.000000, -18.000000) "></path>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/application/assets/fonts/icons/cloud-upload.svg b/application/assets/fonts/icons/cloud-upload.svg
new file mode 100644
index 00000000..025a4f63
--- /dev/null
+++ b/application/assets/fonts/icons/cloud-upload.svg
@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 44.1 (41455) - http://www.bohemiancoding.com/sketch -->
+    <title>cloud-upload</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round">
+        <g id="Artboard-4" transform="translate(-312.000000, -775.000000)" stroke="#333333" stroke-width="2">
+            <g id="307" transform="translate(312.000000, 775.000000)">
+                <path d="M8,18 L5,18 L5,18 C2.790861,18 1,16.209139 1,14 C1,11.790861 2.790861,10 5,10 C5.35840468,10 5.70579988,10.0471371 6.03632437,10.1355501 C6.01233106,9.92702603 6,9.71495305 6,9.5 C6,6.46243388 8.46243388,4 11.5,4 C14.0673313,4 16.2238156,5.7590449 16.8299648,8.1376465 C17.2052921,8.04765874 17.5970804,8 18,8 C20.7614237,8 23,10.2385763 23,13 C23,15.7614237 20.7614237,18 18,18 L16,18" id="Cloud" stroke-linejoin="round"></path>
+                <path d="M12,13 L12,21" id="Line"></path>
+                <polyline id="Head" stroke-linejoin="round" transform="translate(12.000000, 12.500000) scale(1, -1) translate(-12.000000, -12.500000) " points="15 11 12 14 9 11"></polyline>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/application/assets/fonts/icons/cloud.svg b/application/assets/fonts/icons/cloud.svg
new file mode 100644
index 00000000..083ddb4b
--- /dev/null
+++ b/application/assets/fonts/icons/cloud.svg
@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 44.1 (41455) - http://www.bohemiancoding.com/sketch -->
+    <title>cloud</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
+        <g id="Artboard-4" transform="translate(-48.000000, -247.000000)" stroke="#333333" stroke-width="2">
+            <g id="61" transform="translate(48.000000, 247.000000)">
+                <path d="M5,19 C2.790861,19 1,17.209139 1,15 C1,12.790861 2.790861,11 5,11 C5.35840468,11 5.70579988,11.0471371 6.03632437,11.1355501 C6.01233106,10.927026 6,10.714953 6,10.5 C6,7.46243388 8.46243388,5 11.5,5 C14.0673313,5 16.2238156,6.7590449 16.8299648,9.1376465 C17.2052921,9.04765874 17.5970804,9 18,9 C20.7614237,9 23,11.2385763 23,14 C23,16.7614237 20.7614237,19 18,19 L5,19 Z" id="Combined-Shape"></path>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/application/assets/fonts/icons/coffee.svg b/application/assets/fonts/icons/coffee.svg
new file mode 100644
index 00000000..721754b8
--- /dev/null
+++ b/application/assets/fonts/icons/coffee.svg
@@ -0,0 +1,19 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 44.1 (41455) - http://www.bohemiancoding.com/sketch -->
+    <title>coffee</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard-4" transform="translate(-532.000000, -247.000000)" stroke="#333333" stroke-width="2">
+            <g id="72" transform="translate(532.000000, 247.000000)">
+                <ellipse id="Rim" cx="11" cy="9" rx="9" ry="3"></ellipse>
+                <path d="M2,9 C2,17 8,19 8,19 L14,19 C14,19 20,17 20,9" id="Body" stroke-linejoin="round"></path>
+                <path d="M20,11 C20,11 23.5,10.5 23,14 C22.5,17.5 18,16 18,16" id="Handle"></path>
+                <path d="M7,2 C7,3 6,4 6,5 C6,6 7,7 7,8" id="Steam" opacity="0.5" stroke-linecap="round" stroke-linejoin="round"></path>
+                <path d="M11,2 C11,3 10,4 10,5 C10,6 11,7 11,8" id="Steam" opacity="0.5" stroke-linecap="round" stroke-linejoin="round"></path>
+                <path d="M15,2 C15,3 14,4 14,5 C14,6 15,7 15,8" id="Steam" opacity="0.5" stroke-linecap="round" stroke-linejoin="round"></path>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/application/assets/fonts/icons/coffin.svg b/application/assets/fonts/icons/coffin.svg
new file mode 100644
index 00000000..e8649e55
--- /dev/null
+++ b/application/assets/fonts/icons/coffin.svg
@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 44.1 (41455) - http://www.bohemiancoding.com/sketch -->
+    <title>coffin</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard-4" transform="translate(-400.000000, -467.000000)">
+            <g id="169" transform="translate(400.000000, 467.000000)">
+                <polygon id="Body" stroke="#333333" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" points="8 1 16 1 19 8 15 23 9 23 5 8"></polygon>
+                <path d="M13,8 L13,5.99539757 C13,5.4556644 12.5522847,5 12,5 C11.4438648,5 11,5.44565467 11,5.99539757 L11,8 L8.99703014,8 C8.45303631,8 8,8.44771525 8,9 C8,9.55613518 8.4463856,10 8.99703014,10 L11,10 L11,14.0046024 C11,14.5443356 11.4477153,15 12,15 C12.5561352,15 13,14.5543453 13,14.0046024 L13,10 L15.0029699,10 C15.5469637,10 16,9.55228475 16,9 C16,8.44386482 15.5536144,8 15.0029699,8 L13,8 Z" id="cross" fill="#333333"></path>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/application/assets/fonts/icons/coin-dollar.svg b/application/assets/fonts/icons/coin-dollar.svg
new file mode 100644
index 00000000..b003507d
--- /dev/null
+++ b/application/assets/fonts/icons/coin-dollar.svg
@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 44.1 (41455) - http://www.bohemiancoding.com/sketch -->
+    <title>coin-dollar</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard-4" transform="translate(-576.000000, -1134.000000)">
+            <g id="Extras" transform="translate(48.000000, 1046.000000)">
+                <g id="dollar-coin" transform="translate(528.000000, 88.000000)">
+                    <circle id="Coin" stroke="#333333" stroke-width="2" cx="12" cy="12" r="10"></circle>
+                    <circle id="Inset" stroke="#333333" cx="12" cy="12" r="7.5"></circle>
+                    <path d="M11.618978,8.592 C11.618978,8.331 11.825978,8.124 12.086978,8.124 C12.347978,8.124 12.554978,8.331 12.554978,8.592 L12.554978,8.718 C13.040978,8.79 13.472978,8.934 13.859978,9.15 C14.030978,9.249 14.183978,9.42 14.183978,9.69 C14.183978,10.032 13.913978,10.293 13.571978,10.293 C13.463978,10.293 13.355978,10.266 13.256978,10.212 C13.004978,10.077 12.752978,9.969 12.509978,9.906 L12.509978,11.274 C13.877978,11.643 14.462978,12.201 14.462978,13.209 C14.462978,14.217 13.688978,14.865 12.554978,14.991 L12.554978,15.468 C12.554978,15.729 12.347978,15.936 12.086978,15.936 C11.825978,15.936 11.618978,15.729 11.618978,15.468 L11.618978,14.982 C10.979978,14.901 10.376978,14.676 9.84597803,14.352 C9.65697803,14.235 9.53997803,14.055 9.53997803,13.812 C9.53997803,13.461 9.80997803,13.2 10.160978,13.2 C10.277978,13.2 10.403978,13.245 10.511978,13.317 C10.889978,13.56 11.249978,13.731 11.663978,13.821 L11.663978,12.39 C10.367978,12.039 9.72897803,11.544 9.72897803,10.473 C9.72897803,9.483 10.484978,8.817 11.618978,8.7 L11.618978,8.592 Z M13.148978,13.281 C13.148978,12.984 12.995978,12.786 12.509978,12.615 L12.509978,13.866 C12.932978,13.803 13.148978,13.605 13.148978,13.281 Z M11.042978,10.392 C11.042978,10.671 11.168978,10.86 11.663978,11.04 L11.663978,9.825 C11.231978,9.888 11.042978,10.104 11.042978,10.392 Z" id="Dollar-Sign" fill="#333333"></path>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/application/assets/fonts/icons/coin-pound.svg b/application/assets/fonts/icons/coin-pound.svg
new file mode 100644
index 00000000..2acff461
--- /dev/null
+++ b/application/assets/fonts/icons/coin-pound.svg
@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 44.1 (41455) - http://www.bohemiancoding.com/sketch -->
+    <title>coin-pound</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard-4" transform="translate(-532.000000, -1134.000000)">
+            <g id="Extras" transform="translate(48.000000, 1046.000000)">
+                <g id="pound-coin" transform="translate(484.000000, 88.000000)">
+                    <circle id="Coin" stroke="#333333" stroke-width="2" cx="12" cy="12" r="10"></circle>
+                    <circle id="Inset" stroke="#333333" cx="12" cy="12" r="7.5"></circle>
+                    <path d="M9.486,14.496 C9.486,14.775 9.711,15 10.044,15 L13.815,15 C14.148,15 14.418,14.739 14.418,14.406 C14.418,14.073 14.148,13.803 13.815,13.803 L11.628,13.803 L11.628,12.597 L13.158,12.597 C13.473,12.597 13.734,12.345 13.734,12.03 C13.734,11.715 13.473,11.454 13.158,11.454 L11.628,11.454 L11.628,10.761 C11.628,10.473 11.718,10.239 11.862,10.095 C11.997,9.96 12.159,9.897 12.375,9.897 C12.672,9.897 12.888,10.014 13.122,10.257 C13.212,10.347 13.374,10.464 13.617,10.464 C13.995,10.464 14.301,10.167 14.301,9.789 C14.301,9.564 14.211,9.42 14.085,9.294 C13.689,8.889 13.158,8.61 12.357,8.61 C11.664,8.61 11.133,8.817 10.764,9.186 C10.413,9.537 10.224,10.077 10.224,10.725 L10.224,11.454 L10.062,11.454 C9.747,11.454 9.486,11.715 9.486,12.03 C9.486,12.345 9.747,12.597 10.062,12.597 L10.224,12.597 L10.224,13.866 L9.864,13.983 C9.621,14.064 9.486,14.271 9.486,14.496 Z" id="Pound-Sign" fill="#333333"></path>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/application/assets/fonts/icons/comet.svg b/application/assets/fonts/icons/comet.svg
new file mode 100644
index 00000000..ba423e6c
--- /dev/null
+++ b/application/assets/fonts/icons/comet.svg
@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 44.1 (41455) - http://www.bohemiancoding.com/sketch -->
+    <title>comet</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard-4" transform="translate(-796.000000, -819.000000)" stroke="#333333" stroke-width="2">
+            <g id="338" transform="translate(796.000000, 819.000000)">
+                <path d="M6.82895334,6.8287656 L6.80549426,12.4941599 M6.7934752,15.3967777 L6.78934064,16.3952791 C6.78934064,19.98513 9.70047674,22.8962661 13.2903276,22.8962661 C16.8801785,22.8962661 19.7893406,19.98513 19.7893406,16.3952791 C19.7893406,16.3952791 19.7834225,15.844139 19.7742176,15.0109287 M19.7420226,12.1619803 C19.7233323,10.5498551 19.7029335,8.87383688 19.6885635,7.92505585 M19.6885635,5.09662873 L19.6885635,3.68241517" id="Outer" stroke-linecap="round" stroke-linejoin="round" transform="translate(13.289341, 13.289341) rotate(-45.000000) translate(-13.289341, -13.289341) "></path>
+                <circle id="Comet" cx="15.5" cy="15.5" r="2.5"></circle>
+                <path d="M13.0622577,10.0622577 L5,2" id="3" stroke-linecap="round"></path>
+                <path d="M6,9 L2,5" id="2" stroke-linecap="round"></path>
+                <path d="M10,13 L8,11" id="1" stroke-linecap="round"></path>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/application/assets/fonts/icons/command.svg b/application/assets/fonts/icons/command.svg
new file mode 100644
index 00000000..bc6acdb6
--- /dev/null
+++ b/application/assets/fonts/icons/command.svg
@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 44.1 (41455) - http://www.bohemiancoding.com/sketch -->
+    <title>command</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard-4" transform="translate(-884.000000, -687.000000)" stroke="#333333" stroke-width="2">
+            <g id="280" transform="translate(884.000000, 687.000000)">
+                <path d="M15,18 C15,19.6568542 16.3431458,21 18,21 C19.6568542,21 21,19.6568542 21,18 C21,16.3431458 19.6568542,15 18,15 L6,15 C4.34314575,15 3,16.3431458 3,18 C3,19.6568542 4.34314575,21 6,21 C7.65685425,21 9,19.6568542 9,18.0104121 L9,6 C9,4.34314575 7.65685425,3 6,3 C4.34314575,3 3,4.34314575 3,6 C3,7.65685425 4.34314575,9 6,9 L18,9 C19.6568542,9 21,7.65685425 21,6 C21,4.34314575 19.6568542,3 18,3 C16.3431458,3 15,4.34314575 15,6 L15,18 Z" id="Oval-151"></path>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/application/assets/fonts/icons/compass.svg b/application/assets/fonts/icons/compass.svg
new file mode 100644
index 00000000..d6397435
--- /dev/null
+++ b/application/assets/fonts/icons/compass.svg
@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 44.1 (41455) - http://www.bohemiancoding.com/sketch -->
+    <title>compass</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard-4" transform="translate(-444.000000, -291.000000)">
+            <g id="90" transform="translate(444.000000, 291.000000)">
+                <g id="arrow" transform="translate(12.000000, 12.000000) rotate(-45.000000) translate(-12.000000, -12.000000) translate(9.000000, 5.000000)">
+                    <polygon id="Path-17" stroke="#333333" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" points="3 0 0 7 3 14 6 7"></polygon>
+                    <polygon id="Rectangle-24" fill="#333333" points="2 2 4 2 6 7 0 7"></polygon>
+                </g>
+                <circle id="Circle" stroke="#333333" stroke-width="2" cx="12" cy="12" r="10"></circle>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/application/assets/fonts/icons/controller.svg b/application/assets/fonts/icons/controller.svg
new file mode 100644
index 00000000..247eebcc
--- /dev/null
+++ b/application/assets/fonts/icons/controller.svg
@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 44.1 (41455) - http://www.bohemiancoding.com/sketch -->
+    <title>controller</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard-4" transform="translate(-664.000000, -511.000000)">
+            <g id="195" transform="translate(664.000000, 511.000000)">
+                <path d="M6,11 C3.23857625,11 1,13.2385763 1,16 C1,18.7614237 3.23857625,21 6,21 C7.63581783,21 9.08815986,20.2144467 10.0003662,19 L13.9996338,19 C14.9118401,20.2144467 16.3641822,21 18,21 C20.7614237,21 23,18.7614237 23,16 C23,13.2385763 20.7614237,11 18,11 L6,11 Z" id="Body" stroke="#333333" stroke-width="2"></path>
+                <path d="M18,15 C17.4477153,15 17,14.5522847 17,14 C17,13.4477153 17.4477153,13 18,13 C18.5522847,13 19,13.4477153 19,14 C19,14.5522847 18.5522847,15 18,15 Z M20,17 C19.4477153,17 19,16.5522847 19,16 C19,15.4477153 19.4477153,15 20,15 C20.5522847,15 21,15.4477153 21,16 C21,16.5522847 20.5522847,17 20,17 Z M16,17 C15.4477153,17 15,16.5522847 15,16 C15,15.4477153 15.4477153,15 16,15 C16.5522847,15 17,15.4477153 17,16 C17,16.5522847 16.5522847,17 16,17 Z M18,19 C17.4477153,19 17,18.5522847 17,18 C17,17.4477153 17.4477153,17 18,17 C18.5522847,17 19,17.4477153 19,18 C19,18.5522847 18.5522847,19 18,19 Z" id="Buttons" fill="#333333"></path>
+                <path d="M7,15 L7,13.990778 C7,13.4509752 6.55228475,13 6,13 C5.44386482,13 5,13.4435864 5,13.990778 L5,15 L3.99077797,15 C3.45097518,15 3,15.4477153 3,16 C3,16.5561352 3.44358641,17 3.99077797,17 L5,17 L5,18.009222 C5,18.5490248 5.44771525,19 6,19 C6.55613518,19 7,18.5564136 7,18.009222 L7,17 L8.00922203,17 C8.54902482,17 9,16.5522847 9,16 C9,15.4438648 8.55641359,15 8.00922203,15 L7,15 Z" id="Arrows" fill="#333333"></path>
+                <path d="M12,11 L12,10.0010434 C12,8.89589766 11.1017394,8 10.0020869,8 L7.49857602,8 C6.67093534,8 6,7.33420277 6,6.5 L6,6.5 C6,5.67157288 6.67955446,5 7.49554521,5 L15.9914698,5 C17.1007504,5 18,4.10529494 18,3 L18,3" id="Cable" stroke="#333333" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/application/assets/fonts/icons/copy.svg b/application/assets/fonts/icons/copy.svg
new file mode 100644
index 00000000..e29f8fe1
--- /dev/null
+++ b/application/assets/fonts/icons/copy.svg
@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 44.1 (41455) - http://www.bohemiancoding.com/sketch -->
+    <title>copy</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard-4" transform="translate(-92.000000, -247.000000)">
+            <g id="62" transform="translate(92.000000, 247.000000)">
+                <path d="M7,6.00748397 C7,4.89985206 7.89485293,4 9.00222974,4 L15.4089735,4 L20,8.58542907 L20,19.0044225 C20,20.1067204 19.1072771,21 18.0044225,21 L8.9955775,21 C7.890372,21 7,20.1003052 7,18.992516 L7,6.00748397 Z" id="Front-Page" stroke="#333333" stroke-width="2" stroke-linejoin="round"></path>
+                <path d="M16.8277126,4 L13.4084678,0.58492406 C13.0334655,0.210378892 12.5251274,0 11.9951172,0 L5.9964216,0 C4.34595783,0 3,1.34576814 3,3.00087166 L3,15.9991283 C3,17.6605333 4.34483505,19 6.00247329,19 L10.5,19 L6,19 L6,16.9999973 C5.44748653,16.9986752 5,16.5545406 5,15.9991283 L5,3.00087166 C5,2.4481055 5.4527598,2 5.9964216,2 L11.9951172,2 L13.9975586,4 L16.8277126,4 Z" id="Back-Page" fill="#333333" fill-rule="nonzero"></path>
+                <polyline id="Curl" stroke="#333333" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" points="13 7 13 11 17 11"></polyline>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/application/assets/fonts/icons/crop.svg b/application/assets/fonts/icons/crop.svg
new file mode 100644
index 00000000..8f28303a
--- /dev/null
+++ b/application/assets/fonts/icons/crop.svg
@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 44.1 (41455) - http://www.bohemiancoding.com/sketch -->
+    <title>crop</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard-4" transform="translate(-312.000000, -687.000000)" fill-rule="nonzero" fill="#333333">
+            <g id="267" transform="translate(312.000000, 687.000000)">
+                <path d="M6,3 L6,7 C6,7.55228475 6.44771525,8 7,8 C7.55228475,8 8,7.55228475 8,7 L8,3 C8,2.44771525 7.55228475,2 7,2 C6.44771525,2 6,2.44771525 6,3 Z M8,9 L6,9 L6,17.0078106 C6,17.560286 6.44801283,18.0080802 7.00048816,18.0078105 L21.0004882,17.9999999 C21.5527728,17.9997303 22.0002695,17.5517965 21.9999999,16.9995118 C21.9997303,16.4472272 21.5517965,15.9997305 20.9995118,16.0000001 L8,16.0073223 L8,9 Z" id="Left"></path>
+                <path d="M18,21 L18,19 L16,19 L16,21 C16,21.5522847 16.4477153,22 17,22 C17.5522847,22 18,21.5522847 18,21 Z M16,17 C16,17.5522847 16.4477153,18 17,18 C17.5522847,18 18,17.5522847 18,17 L18,7 C18,6.44771525 17.5522847,6 17,6 L3,6 C2.44771525,6 2,6.44771525 2,7 C2,7.55228475 2.44771525,8 3,8 L16,8 L16,17 Z" id="Right"></path>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/application/assets/fonts/icons/cross.svg b/application/assets/fonts/icons/cross.svg
new file mode 100644
index 00000000..14b7ab2a
--- /dev/null
+++ b/application/assets/fonts/icons/cross.svg
@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 44.1 (41455) - http://www.bohemiancoding.com/sketch -->
+    <title>cross</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round">
+        <g id="Artboard-4" transform="translate(-312.000000, -115.000000)" stroke="#333333" stroke-width="2">
+            <g id="7" transform="translate(312.000000, 115.000000)">
+                <path d="M19,5 L5,19" id="Path-14"></path>
+                <path d="M19,5 L5,19" id="Path-14" transform="translate(12.000000, 12.000000) scale(-1, 1) translate(-12.000000, -12.000000) "></path>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/application/assets/fonts/icons/crown.svg b/application/assets/fonts/icons/crown.svg
new file mode 100644
index 00000000..52e8f464
--- /dev/null
+++ b/application/assets/fonts/icons/crown.svg
@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 44.1 (41455) - http://www.bohemiancoding.com/sketch -->
+    <title>crown</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard-4" transform="translate(-136.000000, -423.000000)" stroke="#333333" stroke-width="2">
+            <g id="143" transform="translate(136.000000, 423.000000)">
+                <path d="M16,21 L3,10 L4.82251334,20.0238234 C4.92053652,20.5629508 5.45003997,21 6.00704959,21 L17.9957886,21 C18.5519667,21 19.0837176,20.555163 19.1803248,20.0238234 L21.0028382,10 L8,21" id="Edges" stroke-linecap="round" stroke-linejoin="round"></path>
+                <polyline id="Mid" stroke-linejoin="round" points="19 21 12 6 5 21"></polyline>
+                <path d="M21.5,10 C20.6715729,10 20,9.32842712 20,8.5 C20,7.67157288 20.6715729,7 21.5,7 C22.3284271,7 23,7.67157288 23,8.5 C23,9.32842712 22.3284271,10 21.5,10 Z M2.5,10 C1.67157288,10 1,9.32842712 1,8.5 C1,7.67157288 1.67157288,7 2.5,7 C3.32842712,7 4,7.67157288 4,8.5 C4,9.32842712 3.32842712,10 2.5,10 Z M12,6 C10.8954305,6 10,5.1045695 10,4 C10,2.8954305 10.8954305,2 12,2 C13.1045695,2 14,2.8954305 14,4 C14,5.1045695 13.1045695,6 12,6 Z" id="Jewels"></path>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/application/assets/fonts/icons/cutlery.svg b/application/assets/fonts/icons/cutlery.svg
new file mode 100644
index 00000000..13c55179
--- /dev/null
+++ b/application/assets/fonts/icons/cutlery.svg
@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 44.1 (41455) - http://www.bohemiancoding.com/sketch -->
+    <title>cutlery</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard-4" transform="translate(-136.000000, -775.000000)" fill-rule="nonzero" fill="#333333">
+            <g id="303" transform="translate(136.000000, 775.000000)">
+                <path d="M6.49691952,0.208122692 C6.80425333,0.074116772 7.14364742,7.84068858e-14 7.5,4.57411886e-14 C7.8532183,1.35576557e-14 8.19065301,0.0742123517 8.49691952,0.208122692 C8.80425333,0.074116772 9.14364742,8.46940321e-14 9.5,6.75015599e-14 C10.872827,-7.26795328e-16 12,1.12062984 12,2.50264359 L12,7 C12,8.65668024 11.6642436,9.73856188 10.9649859,10.9039915 C10.9205298,10.978085 10.7720298,11.220585 10.7429859,11.2689915 C10.5380212,11.6105993 10.5,11.7214944 10.5,12 C10.5,12.6882583 10.55373,14.0527112 10.6469734,15.8641764 C10.664138,16.1976388 10.6824521,16.5425289 10.7017619,16.8967581 C10.746337,17.7144673 10.794122,18.5443804 10.8419076,19.3431802 C10.8586314,19.6227415 10.8741571,19.8783865 10.8880843,20.1047195 C10.9023901,20.3360943 10.9023901,20.3360943 10.9058292,20.3908871 C11.0249242,22.3663724 9.47788483,24 7.5,24 C5.51693703,24 3.97406319,22.3656884 4.09448895,20.3857212 C4.09760993,20.3360943 4.09760993,20.3360943 4.11191567,20.1047195 C4.12584286,19.8783865 4.14136862,19.6227415 4.15809243,19.3431802 C4.20587796,18.5443804 4.25366301,17.7144673 4.29823808,16.8967581 C4.31754787,16.5425289 4.33586201,16.1976388 4.35302665,15.8641764 C4.44626996,14.0527112 4.5,12.6882583 4.5,12 C4.5,11.7214944 4.46197882,11.6105993 4.25701415,11.2689915 C4.22797024,11.220585 4.07947024,10.978085 4.03501415,10.9039915 C3.33575637,9.73856188 3,8.65668024 3,7 L3,2.50264359 C3,1.11824284 4.11790737,1.15578661e-13 5.5,0 C5.8532183,-2.98429123e-14 6.19065301,0.0742123517 6.49691952,0.208122692 Z M5,7 C5,10 6.5,10 6.5,12 C6.5,14 6.09054623,20.5112415 6.09054623,20.5112415 C6.04053893,21.3334601 6.66579723,22 7.5,22 C8.32842712,22 8.9590829,21.3344635 8.90945377,20.5112415 C8.90945377,20.5112415 8.5,14 8.5,12 C8.5,10 10,10 10,7 L10,2.50264359 C10,2.2250412 9.76806641,2 9.5,2 C9.22385763,2 9,2.21484375 9,2.49769878 L9,6.50230122 C9,6.77717266 8.76806641,7 8.5,7 C8.22385763,7 8,6.78515625 8,6.50230122 L8,2.49769878 C8,2.22282734 7.76806641,2 7.5,2 C7.22385763,2 7,2.21484375 7,2.49769878 L7,6.50230122 C7,6.77717266 6.76806641,7 6.5,7 C6.22385763,7 6,6.78515625 6,6.50230122 L6,2.49769878 C6,2.22282734 5.76806641,2 5.5,2 C5.22385763,2 5,2.22143126 5,2.50264359 L5,7 Z" id="Fork"></path>
+                <path d="M17.4496076,21.999182 C17.4662897,21.999726 17.4830884,22 17.5,22 L17.5,24 L17.3974865,24 L17.3974865,22 C17.4149739,22 17.4323487,21.999726 17.4496076,21.999182 Z M17.1689647,2.86829415 C15.8367791,4.06726118 15,6.32656486 15,10 C15,10.5804628 15.2553237,11.0911101 15.7071068,11.5428932 C15.9957794,11.8315659 16.2855186,12.0247253 16.4472136,12.1055728 C16.8183468,12.2911394 17.0363252,12.6866234 16.9950372,13.0995037 L16.2435131,20.614745 C16.1666228,21.3836472 16.6859342,21.9742808 17.4496076,21.999182 C18.2703287,21.9733131 18.8286921,21.3367964 18.7461375,20.5112503 L18,13 L18,2.29842421 C17.7187271,2.43758745 17.439413,2.62489067 17.1689647,2.86829415 Z M14.2534387,20.4157376 L14.9433449,13.5166756 C14.7356971,13.3645346 14.5144181,13.1786317 14.2928932,12.9571068 C13.4946763,12.1588899 13,11.1695372 13,10 C13,5.79843514 14.0382209,2.99523882 15.8310353,1.38170585 C16.975302,0.351865792 18.148188,0 19,0 C19.5522847,0 20,0.44771525 20,1 L19.9950372,12.9004963 L20.7362119,20.3122429 C20.9298795,22.2489195 19.5515016,23.8621247 17.6456983,23.9916178 C17.5807747,23.9960291 17.515239,23.9987186 17.4491325,23.9996403 C17.4319554,23.9998798 17.4147399,24 17.3974865,24 C17.3451226,24 17.2948152,23.9969153 17.2465643,23.9909881 C16.0662096,23.8459931 16.116517,22 17.3974865,22 L17.5,22 C18.7828563,22 18.8314224,23.8514353 17.6456983,23.9916178 C17.5990432,23.9971336 17.5504771,24 17.5,24 C17.4830066,24 17.4660505,23.9998798 17.4491325,23.9996403 C17.3809756,23.9986755 17.3134366,23.9957736 17.2465643,23.9909881 C15.4026452,23.8590339 14.065522,22.2949043 14.2534387,20.4157376 Z" id="Knife"></path>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/application/assets/fonts/icons/delete.svg b/application/assets/fonts/icons/delete.svg
new file mode 100644
index 00000000..fa8ac98a
--- /dev/null
+++ b/application/assets/fonts/icons/delete.svg
@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 44.1 (41455) - http://www.bohemiancoding.com/sketch -->
+    <title>delete</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard-4" transform="translate(-224.000000, -159.000000)">
+            <g id="25" transform="translate(224.000000, 159.000000)">
+                <path d="M5,7 L5,20.0081158 C5,21.1082031 5.89706013,22 7.00585866,22 L16.9941413,22 C18.1019465,22 19,21.1066027 19,20.0081158 L19,7" id="Body" stroke="#333333" stroke-width="2"></path>
+                <path d="M9,10.9970301 C9,10.4463856 9.44386482,10 10,10 C10.5522847,10 11,10.4530363 11,10.9970301 L11,17.0029699 C11,17.5536144 10.5561352,18 10,18 C9.44771525,18 9,17.5469637 9,17.0029699 L9,10.9970301 Z M13,10.9970301 C13,10.4463856 13.4438648,10 14,10 C14.5522847,10 15,10.4530363 15,10.9970301 L15,17.0029699 C15,17.5536144 14.5561352,18 14,18 C13.4477153,18 13,17.5469637 13,17.0029699 L13,10.9970301 Z" id="Dents" fill="#333333"></path>
+                <rect id="Lid" fill="#333333" x="2" y="4" width="20" height="2" rx="1"></rect>
+                <path d="M9,5 L9,2.99895656 C9,2.44724809 9.45097518,2 9.99077797,2 L14.009222,2 C14.5564136,2 15,2.44266033 15,2.99895656 L15,5" id="Handle" stroke="#333333" stroke-width="2" stroke-linejoin="round"></path>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/application/assets/fonts/icons/desktop.svg b/application/assets/fonts/icons/desktop.svg
new file mode 100644
index 00000000..200efd13
--- /dev/null
+++ b/application/assets/fonts/icons/desktop.svg
@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 44.1 (41455) - http://www.bohemiancoding.com/sketch -->
+    <title>desktop</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard-4" transform="translate(-180.000000, -159.000000)">
+            <g id="24" transform="translate(180.000000, 159.000000)">
+                <polygon id="stand" stroke="#333333" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" points="10 17 8 21 16 21 14 17"></polygon>
+                <rect id="screen" stroke="#333333" stroke-width="2" x="2" y="3" width="20" height="14" rx="1"></rect>
+                <rect id="bottom" fill="#333333" x="2" y="15" width="20" height="2"></rect>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/application/assets/fonts/icons/dial.svg b/application/assets/fonts/icons/dial.svg
new file mode 100644
index 00000000..beaab3d9
--- /dev/null
+++ b/application/assets/fonts/icons/dial.svg
@@ -0,0 +1,21 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 44.1 (41455) - http://www.bohemiancoding.com/sketch -->
+    <title>dial</title>
+    <desc>Created with Sketch.</desc>
+    <defs>
+        <linearGradient x1="100%" y1="50%" x2="0%" y2="51.8187661%" id="linearGradient-1">
+            <stop stop-color="#373737" stop-opacity="0.35" offset="0%"></stop>
+            <stop stop-color="#333333" stop-opacity="0" offset="100%"></stop>
+        </linearGradient>
+    </defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard-4" transform="translate(-620.000000, -379.000000)">
+            <g id="133" transform="translate(620.000000, 379.000000)">
+                <path d="M12,18 L21,18 C22,18 23,17 23,16 C23,10.6553849 18.0751322,5 12,5 C5.92486775,5 1,9.94218743 1,16 C1,17 2,18 3,18 C4,18 12,18 12,18 Z" id="Body" stroke="#333333" stroke-width="2" stroke-linejoin="round"></path>
+                <path d="M12,18 C12,18 15.1836567,11.5 16.4574228,9.35586045 C15.1836567,8.49962716 13.6501754,8 12,8 C7.581722,8 4,11.581722 4,16 C4,16.6973947 4.25691426,18.0188615 4.25691426,18.0188615 L12,18 Z" id="Gradient" fill="url(#linearGradient-1)"></path>
+                <path d="M11.8120157,16.9727855 C11.7715245,17.1314282 11.75,17.297656 11.75,17.4689111 C11.75,18.5734806 12.6454305,19.4689111 13.75,19.4689111 C14.8545695,19.4689111 15.75,18.5734806 15.75,17.4689111 C15.75,17.297656 15.7284755,17.1314282 15.6879843,16.9727855 L14.75,9.46891109 C14.75,8.91662634 14.3022847,8.46891109 13.75,8.46891109 C13.1977153,8.46891109 12.75,8.91662634 12.75,9.46891109 L11.8120157,16.9727855 Z" id="Needle" fill="#333333" transform="translate(13.750000, 13.968911) rotate(-330.000000) translate(-13.750000, -13.968911) "></path>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/application/assets/fonts/icons/diamond.svg b/application/assets/fonts/icons/diamond.svg
new file mode 100644
index 00000000..83cee58b
--- /dev/null
+++ b/application/assets/fonts/icons/diamond.svg
@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 44.1 (41455) - http://www.bohemiancoding.com/sketch -->
+    <title>diamond</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard-4" transform="translate(-576.000000, -379.000000)">
+            <g id="132" transform="translate(576.000000, 379.000000)">
+                <polygon id="Body" stroke="#333333" stroke-width="2" stroke-linejoin="round" points="12 20 21.0113578 7.98864223 18 4 6 4 3 8"></polygon>
+                <rect id="Top" fill="#333333" x="3" y="7" width="18" height="2"></rect>
+                <polygon id="Mid" stroke="#333333" stroke-width="2" stroke-linejoin="round" points="7.96887113 8.03112887 12 18 16.5 8.03112887 13 4 11 4"></polygon>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/application/assets/fonts/icons/divide.svg b/application/assets/fonts/icons/divide.svg
new file mode 100644
index 00000000..c4a63cf4
--- /dev/null
+++ b/application/assets/fonts/icons/divide.svg
@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 44.1 (41455) - http://www.bohemiancoding.com/sketch -->
+    <title>divide</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard-4" transform="translate(-444.000000, -643.000000)" fill="#333333">
+            <g id="250" transform="translate(444.000000, 643.000000)">
+                <rect id="Line" transform="translate(12.000000, 12.000000) rotate(-90.000000) translate(-12.000000, -12.000000) " x="11" y="4" width="2" height="16" rx="1"></rect>
+                <path d="M12,8.5 C11.1715729,8.5 10.5,7.82842712 10.5,7 C10.5,6.17157288 11.1715729,5.5 12,5.5 C12.8284271,5.5 13.5,6.17157288 13.5,7 C13.5,7.82842712 12.8284271,8.5 12,8.5 Z M12,18.5 C11.1715729,18.5 10.5,17.8284271 10.5,17 C10.5,16.1715729 11.1715729,15.5 12,15.5 C12.8284271,15.5 13.5,16.1715729 13.5,17 C13.5,17.8284271 12.8284271,18.5 12,18.5 Z" id="Dots"></path>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/application/assets/fonts/icons/document.svg b/application/assets/fonts/icons/document.svg
new file mode 100644
index 00000000..b785d818
--- /dev/null
+++ b/application/assets/fonts/icons/document.svg
@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 44.1 (41455) - http://www.bohemiancoding.com/sketch -->
+    <title>document</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linejoin="round">
+        <g id="Artboard-4" transform="translate(-752.000000, -115.000000)" stroke="#333333" stroke-width="2">
+            <g id="17" transform="translate(752.000000, 115.000000)">
+                <path d="M5,5.00087166 C5,3.89808444 5.89821103,3 6.9964216,3 L14.4089735,3 L19,7.58542907 L19,18.9975267 C19,20.1021477 18.0978553,21 16.9975267,21 L7.00247329,21 C5.89622639,21 5,20.1073512 5,18.9991283 L5,5.00087166 Z" id="Page"></path>
+                <polyline id="Curl" stroke-linecap="round" points="12 6 12 10 16 10"></polyline>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/application/assets/fonts/icons/donut.svg b/application/assets/fonts/icons/donut.svg
new file mode 100644
index 00000000..66e0ce98
--- /dev/null
+++ b/application/assets/fonts/icons/donut.svg
@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 44.1 (41455) - http://www.bohemiancoding.com/sketch -->
+    <title>donut</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard-4" transform="translate(-92.000000, -423.000000)">
+            <g id="142" transform="translate(92.000000, 423.000000)">
+                <path d="M21.5583303,9.05186053 C20.300184,4.96799577 16.4966983,2 12,2 C6.4771525,2 2,6.4771525 2,12 C2,17.5228475 6.4771525,22 12,22 C13.7496148,22 15.3942841,21.5506749 16.8249099,20.7611227 C15.7520807,20.3039611 15,19.2398095 15,18 C15,17.9432668 15.0015748,17.8869014 15.0046831,17.8309451 C13.8370451,17.4204339 13,16.3079681 13,15 C13,14.942125 13.0016388,14.8846328 13.0048726,14.8275673 C12.6907178,14.9392192 12.3524569,15 12,15 C10.3431458,15 9,13.6568542 9,12 C9,10.3431458 10.3431458,9 12,9 C13.3230719,9 14.4461003,9.8564883 14.8448847,11.0452645 C15.486762,10.4053018 16.4381607,10 17.5,10 C17.8955627,10 18.275799,10.056246 18.6304168,10.1599163 C19.1793094,9.45409338 20.0366251,9 21,9 C21.190794,9 21.3774281,9.01781083 21.5583303,9.05186053 Z" id="donut" stroke="#333333" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
+                <path d="M6.5,7 C6.22385763,7 6,6.77614237 6,6.5 C6,6.22385763 6.22385763,6 6.5,6 C6.77614237,6 7,6.22385763 7,6.5 C7,6.77614237 6.77614237,7 6.5,7 Z M7.5,9 C7.22385763,9 7,8.77614237 7,8.5 C7,8.22385763 7.22385763,8 7.5,8 C7.77614237,8 8,8.22385763 8,8.5 C8,8.77614237 7.77614237,9 7.5,9 Z M9.5,5 C9.22385763,5 9,4.77614237 9,4.5 C9,4.22385763 9.22385763,4 9.5,4 C9.77614237,4 10,4.22385763 10,4.5 C10,4.77614237 9.77614237,5 9.5,5 Z M11.5,7 C11.2238576,7 11,6.77614237 11,6.5 C11,6.22385763 11.2238576,6 11.5,6 C11.7761424,6 12,6.22385763 12,6.5 C12,6.77614237 11.7761424,7 11.5,7 Z M14.5,5 C14.2238576,5 14,4.77614237 14,4.5 C14,4.22385763 14.2238576,4 14.5,4 C14.7761424,4 15,4.22385763 15,4.5 C15,4.77614237 14.7761424,5 14.5,5 Z M15.5,8 C15.2238576,8 15,7.77614237 15,7.5 C15,7.22385763 15.2238576,7 15.5,7 C15.7761424,7 16,7.22385763 16,7.5 C16,7.77614237 15.7761424,8 15.5,8 Z M18.5,9 C18.2238576,9 18,8.77614237 18,8.5 C18,8.22385763 18.2238576,8 18.5,8 C18.7761424,8 19,8.22385763 19,8.5 C19,8.77614237 18.7761424,9 18.5,9 Z M12.5,18 C12.2238576,18 12,17.7761424 12,17.5 C12,17.2238576 12.2238576,17 12.5,17 C12.7761424,17 13,17.2238576 13,17.5 C13,17.7761424 12.7761424,18 12.5,18 Z M9.5,17 C9.22385763,17 9,16.7761424 9,16.5 C9,16.2238576 9.22385763,16 9.5,16 C9.77614237,16 10,16.2238576 10,16.5 C10,16.7761424 9.77614237,17 9.5,17 Z M5.5,17 C5.22385763,17 5,16.7761424 5,16.5 C5,16.2238576 5.22385763,16 5.5,16 C5.77614237,16 6,16.2238576 6,16.5 C6,16.7761424 5.77614237,17 5.5,17 Z M5.5,14 C5.22385763,14 5,13.7761424 5,13.5 C5,13.2238576 5.22385763,13 5.5,13 C5.77614237,13 6,13.2238576 6,13.5 C6,13.7761424 5.77614237,14 5.5,14 Z M10.5,20 C10.2238576,20 10,19.7761424 10,19.5 C10,19.2238576 10.2238576,19 10.5,19 C10.7761424,19 11,19.2238576 11,19.5 C11,19.7761424 10.7761424,20 10.5,20 Z M7.5,12 C7.22385763,12 7,11.7761424 7,11.5 C7,11.2238576 7.22385763,11 7.5,11 C7.77614237,11 8,11.2238576 8,11.5 C8,11.7761424 7.77614237,12 7.5,12 Z M4.5,11 C4.22385763,11 4,10.7761424 4,10.5 C4,10.2238576 4.22385763,10 4.5,10 C4.77614237,10 5,10.2238576 5,10.5 C5,10.7761424 4.77614237,11 4.5,11 Z M17.5,6 C17.2238576,6 17,5.77614237 17,5.5 C17,5.22385763 17.2238576,5 17.5,5 C17.7761424,5 18,5.22385763 18,5.5 C18,5.77614237 17.7761424,6 17.5,6 Z" id="sugar" fill="#333333" opacity="0.5"></path>
+                <path d="M20.5,13 C20.2238576,13 20,12.7761424 20,12.5 C20,12.2238576 20.2238576,12 20.5,12 C20.7761424,12 21,12.2238576 21,12.5 C21,12.7761424 20.7761424,13 20.5,13 Z M22.5,22 C22.2238576,22 22,21.7761424 22,21.5 C22,21.2238576 22.2238576,21 22.5,21 C22.7761424,21 23,21.2238576 23,21.5 C23,21.7761424 22.7761424,22 22.5,22 Z M17,15 C16.4477153,15 16,14.5522847 16,14 C16,13.4477153 16.4477153,13 17,13 C17.5522847,13 18,13.4477153 18,14 C18,14.5522847 17.5522847,15 17,15 Z M22,18 C21.4477153,18 21,17.5522847 21,17 C21,16.4477153 21.4477153,16 22,16 C22.5522847,16 23,16.4477153 23,17 C23,17.5522847 22.5522847,18 22,18 Z M18.5,19 C18.2238576,19 18,18.7761424 18,18.5 C18,18.2238576 18.2238576,18 18.5,18 C18.7761424,18 19,18.2238576 19,18.5 C19,18.7761424 18.7761424,19 18.5,19 Z" id="crumbs" fill="#333333"></path>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/application/assets/fonts/icons/download.svg b/application/assets/fonts/icons/download.svg
new file mode 100644
index 00000000..fa745561
--- /dev/null
+++ b/application/assets/fonts/icons/download.svg
@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 44.1 (41455) - http://www.bohemiancoding.com/sketch -->
+    <title>download</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round">
+        <g id="Artboard-4" transform="translate(-180.000000, -291.000000)" stroke="#333333" stroke-width="2">
+            <g id="84" transform="translate(180.000000, 291.000000)">
+                <path d="M12,3 L12,15" id="Line"></path>
+                <polyline id="Head" stroke-linejoin="round" transform="translate(12.000000, 14.000000) rotate(-270.000000) translate(-12.000000, -14.000000) " points="9 8 15 14 9 20"></polyline>
+                <path d="M3,18 L3,20.0590859 C3,20.6127331 3.44494889,21.0615528 3.99340349,21.0615528 L20.0067018,21.0615528 C20.5553434,21.0615528 21.0001052,20.6098102 21.0001051,20.0590859 L21.0001049,18" id="Container" stroke-linejoin="round"></path>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/application/assets/fonts/icons/dribbble.svg b/application/assets/fonts/icons/dribbble.svg
new file mode 100644
index 00000000..48634ac0
--- /dev/null
+++ b/application/assets/fonts/icons/dribbble.svg
@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 44.1 (41455) - http://www.bohemiancoding.com/sketch -->
+    <title>dribbble</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard-4" transform="translate(-180.000000, -907.000000)" stroke="#333333" stroke-width="2">
+            <g id="364" transform="translate(180.000000, 907.000000)">
+                <circle id="Ball" cx="12" cy="12" r="10"></circle>
+                <path d="M8,3 C8,3 11,5.5 13.5,10.5 C16,15.5 16.5,21 16.5,21" id="3"></path>
+                <path d="M2,10.5 C2,10.5 6.5,11.2499858 12,9.5 C17.5,7.75001416 19,5 19,5" id="2"></path>
+                <path d="M22,13 C22,13 18,11 13,12.5 C8,14 5,19 5,19" id="1"></path>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/application/assets/fonts/icons/edit.svg b/application/assets/fonts/icons/edit.svg
new file mode 100644
index 00000000..7c84d877
--- /dev/null
+++ b/application/assets/fonts/icons/edit.svg
@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 44.1 (41455) - http://www.bohemiancoding.com/sketch -->
+    <title>edit</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard-4" transform="translate(-48.000000, -203.000000)" stroke="#333333" stroke-width="2">
+            <g id="41" transform="translate(48.000000, 203.000000)">
+                <path d="M3,21.0000003 L3,17 L15.8898356,4.11016442 C17.0598483,2.9401517 18.9638992,2.94723715 20.1306896,4.11402752 L19.9181432,3.90148112 C21.0902894,5.07362738 21.0882407,6.97202708 19.9174652,8.1377941 L7,21.0000003 L3,21.0000003 Z" id="Pencil" stroke-linecap="round" stroke-linejoin="round"></path>
+                <path d="M14.5,5.5 L18.5,9.5" id="Eraser"></path>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/application/assets/fonts/icons/egg-timer.svg b/application/assets/fonts/icons/egg-timer.svg
new file mode 100644
index 00000000..81ab5474
--- /dev/null
+++ b/application/assets/fonts/icons/egg-timer.svg
@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 44.1 (41455) - http://www.bohemiancoding.com/sketch -->
+    <title>egg-timer</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard-4" transform="translate(-488.000000, -863.000000)">
+            <g id="351" transform="translate(488.000000, 863.000000)">
+                <rect id="Top" fill="#333333" x="3" y="1" width="18" height="3" rx="1.5"></rect>
+                <rect id="Bottom" fill="#333333" x="3" y="20" width="18" height="3" rx="1.5"></rect>
+                <path d="M6,3 C7,3 17,3 18,3 C18,3.14742588 17.9908674,3.29095201 17.9910923,3.43154396 C18,9 13,9.07371294 13,12 C13,15 18,15 18,21 C17,21 7,21 6,21 C6,15 11,15 11,12 C11,9 6,8 6,3 Z" id="Glass" stroke="#333333" stroke-width="2"></path>
+                <path d="M7,6 L17,6 L13,12 L13,20 C13,20 11.1414197,20.5656786 11,20 C10.8585803,19.4343214 11,12 11,12 L7,6 Z" id="Sand" fill="#333333" opacity="0.200000003"></path>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/application/assets/fonts/icons/emoji-angry.svg b/application/assets/fonts/icons/emoji-angry.svg
new file mode 100644
index 00000000..0774b39a
--- /dev/null
+++ b/application/assets/fonts/icons/emoji-angry.svg
@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 44.1 (41455) - http://www.bohemiancoding.com/sketch -->
+    <title>emoji-angry</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard-4" transform="translate(-48.000000, -687.000000)">
+            <g id="261" transform="translate(48.000000, 687.000000)">
+                <path d="M12,23 C5.92486775,23 1,18.0751322 1,12 C1,5.92486775 5.92486775,1 12,1 C18.0751322,1 23,5.92486775 23,12 C23,18.0751322 18.0751322,23 12,23 Z M12,21 C16.9705627,21 21,16.9705627 21,12 C21,7.02943725 16.9705627,3 12,3 C7.02943725,3 3,7.02943725 3,12 C3,16.9705627 7.02943725,21 12,21 Z" id="Face" fill="#333333"></path>
+                <path d="M9,17 C9.5,17.5 10,18 12,18 C14,18 14.5,17.5 15,17" id="Mouth" stroke="#333333" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" transform="translate(12.000000, 17.500000) scale(1, -1) translate(-12.000000, -17.500000) "></path>
+                <path d="M8.5,15 C7.67157288,15 7,14.3284271 7,13.5 C7,12.6715729 7.67157288,12 8.5,12 C9.32842712,12 10,12.6715729 10,13.5 C10,14.3284271 9.32842712,15 8.5,15 Z M15.5,15 C14.6715729,15 14,14.3284271 14,13.5 C14,12.6715729 14.6715729,12 15.5,12 C16.3284271,12 17,12.6715729 17,13.5 C17,14.3284271 16.3284271,15 15.5,15 Z" id="Eyes" fill="#333333"></path>
+                <path d="M14,13 L18,11" id="Right-Eyebrow" stroke="#333333" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
+                <path d="M6,13 L10,11" id="Left-Eyebrow" stroke="#333333" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" transform="translate(8.000000, 12.000000) scale(-1, 1) translate(-8.000000, -12.000000) "></path>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/application/assets/fonts/icons/emoji-happy.svg b/application/assets/fonts/icons/emoji-happy.svg
new file mode 100644
index 00000000..e1feba24
--- /dev/null
+++ b/application/assets/fonts/icons/emoji-happy.svg
@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 44.1 (41455) - http://www.bohemiancoding.com/sketch -->
+    <title>emoji-happy</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard-4" transform="translate(-884.000000, -643.000000)">
+            <g id="260" transform="translate(884.000000, 643.000000)">
+                <path d="M12,23 C5.92486775,23 1,18.0751322 1,12 C1,5.92486775 5.92486775,1 12,1 C18.0751322,1 23,5.92486775 23,12 C23,18.0751322 18.0751322,23 12,23 Z M12,21 C16.9705627,21 21,16.9705627 21,12 C21,7.02943725 16.9705627,3 12,3 C7.02943725,3 3,7.02943725 3,12 C3,16.9705627 7.02943725,21 12,21 Z" id="Face" fill="#333333"></path>
+                <path d="M7.11357013,12.9759199 C7.05084708,12.4369342 7.4556644,12 7.99539757,12 L16.0046024,12 C16.5543453,12 16.9690583,12.4437166 16.8840639,12.9878391 C16.8840639,12.9878391 17,17 12,17 C7,17 7.11357013,12.9759199 7.11357013,12.9759199 Z" id="Mouth" stroke="#333333" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
+                <path d="M17,8.5 C17,7.75 16.5,7 15.5,7 C14.5,7 14,7.75 14,8.5" id="Right-Eye" stroke="#333333" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
+                <path d="M10,8.5 C10,7.75 9.5,7 8.5,7 C7.5,7 7,7.75 7,8.5" id="Left-Eye" stroke="#333333" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/application/assets/fonts/icons/emoji-sad.svg b/application/assets/fonts/icons/emoji-sad.svg
new file mode 100644
index 00000000..2ae1dc3f
--- /dev/null
+++ b/application/assets/fonts/icons/emoji-sad.svg
@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 44.1 (41455) - http://www.bohemiancoding.com/sketch -->
+    <title>emoji-sad</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard-4" transform="translate(-136.000000, -1046.000000)">
+            <g id="Extras" transform="translate(48.000000, 1046.000000)">
+                <g id="emoji-sad" transform="translate(88.000000, 0.000000)">
+                    <path d="M12,23 C5.92486775,23 1,18.0751322 1,12 C1,5.92486775 5.92486775,1 12,1 C18.0751322,1 23,5.92486775 23,12 C23,18.0751322 18.0751322,23 12,23 Z M12,21 C16.9705627,21 21,16.9705627 21,12 C21,7.02943725 16.9705627,3 12,3 C7.02943725,3 3,7.02943725 3,12 C3,16.9705627 7.02943725,21 12,21 Z" id="Face" fill="#333333"></path>
+                    <path d="M9,14 C9,15 10,16 12,16 C14,16 15,15 15,14" id="Mouth" stroke="#333333" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" transform="translate(12.000000, 15.000000) scale(1, -1) translate(-12.000000, -15.000000) "></path>
+                    <path d="M8.5,11 C7.67157288,11 7,10.3284271 7,9.5 C7,8.67157288 7.67157288,8 8.5,8 C9.32842712,8 10,8.67157288 10,9.5 C10,10.3284271 9.32842712,11 8.5,11 Z M15.5,11 C14.6715729,11 14,10.3284271 14,9.5 C14,8.67157288 14.6715729,8 15.5,8 C16.3284271,8 17,8.67157288 17,9.5 C17,10.3284271 16.3284271,11 15.5,11 Z" id="Eyes" fill="#333333"></path>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/application/assets/fonts/icons/emoji-shocked.svg b/application/assets/fonts/icons/emoji-shocked.svg
new file mode 100644
index 00000000..3c6d69b0
--- /dev/null
+++ b/application/assets/fonts/icons/emoji-shocked.svg
@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 44.1 (41455) - http://www.bohemiancoding.com/sketch -->
+    <title>emoji-shocked</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard-4" transform="translate(-840.000000, -643.000000)">
+            <g id="259" transform="translate(840.000000, 643.000000)">
+                <path d="M12,23 C5.92486775,23 1,18.0751322 1,12 C1,5.92486775 5.92486775,1 12,1 C18.0751322,1 23,5.92486775 23,12 C23,18.0751322 18.0751322,23 12,23 Z M12,21 C16.9705627,21 21,16.9705627 21,12 C21,7.02943725 16.9705627,3 12,3 C7.02943725,3 3,7.02943725 3,12 C3,16.9705627 7.02943725,21 12,21 Z" id="Face" fill="#333333"></path>
+                <path d="M8.5,12 C7.67157288,12 7,11.3284271 7,10.5 C7,9.67157288 7.67157288,9 8.5,9 C9.32842712,9 10,9.67157288 10,10.5 C10,11.3284271 9.32842712,12 8.5,12 Z M15.5,12 C14.6715729,12 14,11.3284271 14,10.5 C14,9.67157288 14.6715729,9 15.5,9 C16.3284271,9 17,9.67157288 17,10.5 C17,11.3284271 16.3284271,12 15.5,12 Z" id="Eyes" fill="#333333"></path>
+                <path d="M15.5,6.5 C16.5,6.5 17,7 17.5,7.5" id="Right-Eyebrow" stroke="#333333" stroke-linecap="round" stroke-linejoin="round"></path>
+                <path d="M6.5,6.5 C7.5,6.5 8,7 8.5,7.5" id="Left-Eyebrow" stroke="#333333" stroke-linecap="round" stroke-linejoin="round" transform="translate(7.500000, 7.000000) scale(-1, 1) translate(-7.500000, -7.000000) "></path>
+                <path d="M9,17.5 C9,18.5170615 15,18.5 15,17.5 C15,16.5 15.5,14 12,14 C8.5,14 9,16.4829385 9,17.5 Z" id="Mouth" stroke="#333333" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/application/assets/fonts/icons/emoji.svg b/application/assets/fonts/icons/emoji.svg
new file mode 100644
index 00000000..ce7f68e4
--- /dev/null
+++ b/application/assets/fonts/icons/emoji.svg
@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 44.1 (41455) - http://www.bohemiancoding.com/sketch -->
+    <title>emoji</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard-4" transform="translate(-224.000000, -115.000000)">
+            <g id="5" transform="translate(224.000000, 115.000000)">
+                <path d="M12,23 C5.92486775,23 1,18.0751322 1,12 C1,5.92486775 5.92486775,1 12,1 C18.0751322,1 23,5.92486775 23,12 C23,18.0751322 18.0751322,23 12,23 Z M12,21 C16.9705627,21 21,16.9705627 21,12 C21,7.02943725 16.9705627,3 12,3 C7.02943725,3 3,7.02943725 3,12 C3,16.9705627 7.02943725,21 12,21 Z" id="Face" fill="#333333"></path>
+                <path d="M9,14 C9,15 10,16 12,16 C14,16 15,15 15,14" id="Mouth" stroke="#333333" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
+                <path d="M8.5,11 C7.67157288,11 7,10.3284271 7,9.5 C7,8.67157288 7.67157288,8 8.5,8 C9.32842712,8 10,8.67157288 10,9.5 C10,10.3284271 9.32842712,11 8.5,11 Z M15.5,11 C14.6715729,11 14,10.3284271 14,9.5 C14,8.67157288 14.6715729,8 15.5,8 C16.3284271,8 17,8.67157288 17,9.5 C17,10.3284271 16.3284271,11 15.5,11 Z" id="Eyes" fill="#333333"></path>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/application/assets/fonts/icons/eraser.svg b/application/assets/fonts/icons/eraser.svg
new file mode 100644
index 00000000..d2b6de68
--- /dev/null
+++ b/application/assets/fonts/icons/eraser.svg
@@ -0,0 +1,25 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 44.1 (41455) - http://www.bohemiancoding.com/sketch -->
+    <title>eraser</title>
+    <desc>Created with Sketch.</desc>
+    <defs>
+        <linearGradient x1="1.41638472e-14%" y1="50%" x2="100%" y2="50%" id="linearGradient-1">
+            <stop stop-color="#333333" offset="0%"></stop>
+            <stop stop-color="#333333" stop-opacity="0.24779212" offset="100%"></stop>
+        </linearGradient>
+    </defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard-4" transform="translate(-444.000000, -687.000000)">
+            <g id="270" transform="translate(444.000000, 687.000000)">
+                <g id="eraser" transform="translate(12.013721, 12.903735) rotate(-315.000000) translate(-12.013721, -12.903735) translate(6.513721, 2.403735)">
+                    <g id="Group-7" transform="translate(1.000000, 1.000000)">
+                        <path d="M0,1.99742191 C0,0.894276248 0.895857811,0 1.9973917,0 L7.0026083,0 C8.10573727,0 9,0.893397331 9,1.99188419 L9,13.992516 C9,14.5489341 8.68612671,15.3138733 8.29408795,15.7059121 L5.70591205,18.2940879 C5.31604759,18.6839524 4.55628335,19 4.00019251,19 L2.0048815,19 C0.897616023,19 0,18.1090746 0,17.0025781 L0,1.99742191 Z" id="Rectangle-194" stroke="#333333" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
+                        <rect id="Rectangle-195" fill="#333333" x="0" y="0" width="9" height="8"></rect>
+                    </g>
+                </g>
+                <path d="M9,21 L20,21 C20.5522847,21 21,20.5522847 21,20 C21,19.4477153 20.5522847,19 20,19 L9,19 C8.44771525,19 8,19.4477153 8,20 C8,20.5522847 8.44771525,21 9,21 Z" id="Line" fill="url(#linearGradient-1)" fill-rule="nonzero"></path>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/application/assets/fonts/icons/eye-closed.svg b/application/assets/fonts/icons/eye-closed.svg
new file mode 100644
index 00000000..9c1890d3
--- /dev/null
+++ b/application/assets/fonts/icons/eye-closed.svg
@@ -0,0 +1,21 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 44.1 (41455) - http://www.bohemiancoding.com/sketch -->
+    <title>eye-closed</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round">
+        <g id="Artboard-4" transform="translate(-796.000000, -1046.000000)" stroke="#333333" stroke-width="2">
+            <g id="Extras" transform="translate(48.000000, 1046.000000)">
+                <g id="eye-closed" transform="translate(760.000000, 12.000000) scale(1, -1) translate(-760.000000, -12.000000) translate(748.000000, 0.000000)">
+                    <path d="M2,14 C2,14 5,7 12,7 C19,7 22,14 22,14" id="Eye" stroke-linejoin="round"></path>
+                    <path d="M12,7 L12,5" id="Path-81"></path>
+                    <path d="M18,8.5 L19,7" id="Path-81"></path>
+                    <path d="M21,12 L22.5,11" id="Path-81"></path>
+                    <path d="M1.5,12 L3,11" id="Path-81" transform="translate(2.250000, 11.500000) scale(1, -1) translate(-2.250000, -11.500000) "></path>
+                    <path d="M5,8.5 L6,7" id="Path-81" transform="translate(5.500000, 7.750000) scale(-1, 1) translate(-5.500000, -7.750000) "></path>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/application/assets/fonts/icons/eye-dropper.svg b/application/assets/fonts/icons/eye-dropper.svg
new file mode 100644
index 00000000..c22e644c
--- /dev/null
+++ b/application/assets/fonts/icons/eye-dropper.svg
@@ -0,0 +1,20 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 44.1 (41455) - http://www.bohemiancoding.com/sketch -->
+    <title>eye-dropper</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard-4" transform="translate(-400.000000, -687.000000)">
+            <g id="269" transform="translate(399.000000, 687.000000)">
+                <g id="eyedropper" transform="translate(12.900820, 12.100832) rotate(-315.000000) translate(-12.900820, -12.100832) translate(8.900820, -0.899168)">
+                    <g id="Group-7" transform="translate(-1.000000, 0.000000)">
+                        <path d="M2,2.99686968 C2,1.34174426 3.34651712,0 5,0 L5,0 C6.65685425,0 8,1.34739093 8,2.99686968 L8,9 L2,9 L2,2.99686968 Z" id="Rectangle-194" fill="#333333"></path>
+                        <rect id="Rectangle-195" fill="#333333" x="0" y="6" width="10" height="3" rx="1.5"></rect>
+                        <path d="M2,8 L2,20.9931545 C2,21.5492199 2.36785889,22.2609406 2.80394495,22.5948381 C2.80394495,22.5948381 5,24 5,25.5 C5,24 7.19605505,22.5948381 7.19605505,22.5948381 C7.64006159,22.2663181 8,21.5500512 8,20.9931545 L8,8" id="Path-207" stroke="#333333" stroke-width="2" stroke-linejoin="round"></path>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/application/assets/fonts/icons/eye.svg b/application/assets/fonts/icons/eye.svg
new file mode 100644
index 00000000..44f196f5
--- /dev/null
+++ b/application/assets/fonts/icons/eye.svg
@@ -0,0 +1,20 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 44.1 (41455) - http://www.bohemiancoding.com/sketch -->
+    <title>eye</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard-4" transform="translate(-268.000000, -203.000000)" stroke="#333333" stroke-width="2">
+            <g id="46" transform="translate(268.000000, 203.000000)">
+                <path d="M2,12 C2,12 5,5 12,5 C19,5 22,12 22,12 C22,12 19,19 12,19 C5,19 2,12 2,12 Z" id="Eye" stroke-linejoin="round"></path>
+                <circle id="Iris" cx="12" cy="12" r="3"></circle>
+                <path d="M12,5 L12,3" id="Path-81" stroke-linecap="round"></path>
+                <path d="M18,6.5 L19,5" id="Path-81" stroke-linecap="round"></path>
+                <path d="M21,10 L22.5,9" id="Path-81" stroke-linecap="round"></path>
+                <path d="M1.5,10 L3,9" id="Path-81" stroke-linecap="round" transform="translate(2.250000, 9.500000) scale(1, -1) translate(-2.250000, -9.500000) "></path>
+                <path d="M5,6.5 L6,5" id="Path-81" stroke-linecap="round" transform="translate(5.500000, 5.750000) scale(-1, 1) translate(-5.500000, -5.750000) "></path>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/application/assets/fonts/icons/facebook.svg b/application/assets/fonts/icons/facebook.svg
new file mode 100644
index 00000000..772796c2
--- /dev/null
+++ b/application/assets/fonts/icons/facebook.svg
@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 44.1 (41455) - http://www.bohemiancoding.com/sketch -->
+    <title>facebook</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linejoin="round">
+        <g id="Artboard-4" transform="translate(-796.000000, -863.000000)" stroke="#333333" stroke-width="2">
+            <g id="358" transform="translate(796.000000, 863.000000)">
+                <path d="M18,1.5 C18,1.5 16.4999664,1 15.5,1 C12,1 9,3 9,6 L9,9 L6.0093689,9 C5.45190985,9 5,9.44335318 5,10.0093689 L5,11.9906311 C5,12.5480902 5.44335318,13 6.0093689,13 L9,13 L9,22.0046024 C9,22.5543453 9.44335318,23 10.0093689,23 L11.9906311,23 C12.5480902,23 13,22.5443356 13,22.0046024 L13,13 L15.9906311,13 C16.5480902,13 17.1070175,12.5719299 17.2420721,12.0317116 L17.7579279,9.96828842 C17.8916206,9.43351749 17.5562834,9 17.0001925,9 L13,9 L13,7 C13,5.8954305 13.8938998,5 15.0048815,5 L18,5 L18,1.5 Z" id="f"></path>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/application/assets/fonts/icons/factory.svg b/application/assets/fonts/icons/factory.svg
new file mode 100644
index 00000000..c977971d
--- /dev/null
+++ b/application/assets/fonts/icons/factory.svg
@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 44.1 (41455) - http://www.bohemiancoding.com/sketch -->
+    <title>factory</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
+        <g id="Artboard-4" transform="translate(-620.000000, -775.000000)" stroke="#333333" stroke-width="2">
+            <g id="314" transform="translate(620.000000, 775.000000)">
+                <path d="M5.50104344,3 C6.05275191,3 6.52520066,3.4463114 6.55632566,3.99754465 L7.00817871,12 L12.0085449,8 L12.0081787,12 L17.0081787,8 L17.0081787,12 L22.0081787,8 L22.0006282,20.0014977 C22.0002812,20.5529553 21.5490746,21 21.0052288,21 L3.99477117,21 C3.44537422,21 3,20.5536886 3,20.0024554 L3,12.9975446 C3,12.446616 3.02479508,11.5536886 3.05541915,11.0024554 L3.44458085,3.99754465 C3.475188,3.44661595 3.94266033,3 4.49895656,3 L5.50104344,3 Z M7,16 L7,17 L8,17 L8,16 L7,16 Z M12,16 L12,17 L13,17 L13,16 L12,16 Z M17,16 L17,17 L18,17 L18,16 L17,16 Z" id="Combined-Shape"></path>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/application/assets/fonts/icons/fairy-light.svg b/application/assets/fonts/icons/fairy-light.svg
new file mode 100644
index 00000000..0e3e5551
--- /dev/null
+++ b/application/assets/fonts/icons/fairy-light.svg
@@ -0,0 +1,24 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 44.1 (41455) - http://www.bohemiancoding.com/sketch -->
+    <title>fairy-light</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard-4" transform="translate(-268.000000, -555.000000)">
+            <g id="206" transform="translate(268.000000, 555.000000)">
+                <path d="M1,3 C1,3 3,4 6,4 C9,4 10.0056811,3 12.0028405,3 C14,3 15,4 18,4 C21,4 23.0056811,3 23.0056811,3" id="String" stroke="#333333" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
+                <path d="M12,3 L12,6" id="Wire" stroke="#333333" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
+                <path d="M12,8 L12,12" id="Filament" stroke="#333333" stroke-width="2" opacity="0.5" stroke-linecap="round" stroke-linejoin="round"></path>
+                <path d="M10,5.99895656 C10,5.44724809 10.4433532,5 11.0093689,5 L12.9906311,5 C13.5480902,5 14,5.44266033 14,5.99895656 L14,8 L10,8 L10,5.99895656 Z" id="Top" fill="#333333"></path>
+                <path d="M12,21 C13.6666667,21 17,14.6923882 17,12 C17,9.30761184 14.7614237,7 12,7 C9.23857625,7 7,9.30761184 7,12 C7,14.6923882 10.3333333,21 12,21 Z" id="Glass" stroke="#333333" stroke-width="2"></path>
+                <path d="M18,21 L19.5,22.5" id="Path-149" stroke="#333333" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
+                <path d="M4.5,21 L6,22.5" id="Path-149" stroke="#333333" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" transform="translate(5.250000, 21.750000) scale(-1, 1) translate(-5.250000, -21.750000) "></path>
+                <path d="M3,13 L1,13" id="Path-150" stroke="#333333" stroke-width="2" stroke-linecap="round"></path>
+                <path d="M23,13 L21,13" id="Path-150" stroke="#333333" stroke-width="2" stroke-linecap="round"></path>
+                <path d="M22,18 L20,17" id="Path-150" stroke="#333333" stroke-width="2" stroke-linecap="round"></path>
+                <path d="M4,18 L2,17" id="Path-150" stroke="#333333" stroke-width="2" stroke-linecap="round" transform="translate(3.000000, 17.500000) scale(-1, 1) translate(-3.000000, -17.500000) "></path>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/application/assets/fonts/icons/filter-alt.svg b/application/assets/fonts/icons/filter-alt.svg
new file mode 100644
index 00000000..5549eeb7
--- /dev/null
+++ b/application/assets/fonts/icons/filter-alt.svg
@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 44.1 (41455) - http://www.bohemiancoding.com/sketch -->
+    <title>filter-alt</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
+        <g id="Artboard-4" transform="translate(-752.000000, -291.000000)" stroke="#333333" stroke-width="2">
+            <g id="97" transform="translate(752.000000, 291.000000)">
+                <path d="M3,3 L10,12 L10.8891617,20.0024554 C10.950376,20.553384 11.4438648,21 12,21 L12,21 C12.5522847,21 13.0495902,20.5528042 13.1108383,20.0004786 L14,11.9821656 L21,3 L3,3 Z" id="Funnel"></path>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/application/assets/fonts/icons/filter-ios.svg b/application/assets/fonts/icons/filter-ios.svg
new file mode 100644
index 00000000..fbacf805
--- /dev/null
+++ b/application/assets/fonts/icons/filter-ios.svg
@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 44.1 (41455) - http://www.bohemiancoding.com/sketch -->
+    <title>filter-ios</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard-4" transform="translate(-796.000000, -291.000000)">
+            <g id="98" transform="translate(796.000000, 291.000000)">
+                <circle id="Circle" stroke="#333333" stroke-width="2" cx="12" cy="12" r="10"></circle>
+                <path d="M6,9 C6,8.44771525 6.45576096,8 7.00247329,8 L16.9975267,8 C17.5511774,8 18,8.44386482 18,9 C18,9.55228475 17.544239,10 16.9975267,10 L7.00247329,10 C6.44882258,10 6,9.55613518 6,9 Z M8,13 C8,12.4477153 8.45303631,12 8.99703014,12 L15.0029699,12 C15.5536144,12 16,12.4438648 16,13 C16,13.5522847 15.5469637,14 15.0029699,14 L8.99703014,14 C8.4463856,14 8,13.5561352 8,13 Z M10,17 C10,16.4477153 10.4433532,16 11.0093689,16 L12.9906311,16 C13.5480902,16 14,16.4438648 14,17 C14,17.5522847 13.5566468,18 12.9906311,18 L11.0093689,18 C10.4519098,18 10,17.5561352 10,17 Z" id="Lines" fill="#333333"></path>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/application/assets/fonts/icons/filter.svg b/application/assets/fonts/icons/filter.svg
new file mode 100644
index 00000000..92e9d706
--- /dev/null
+++ b/application/assets/fonts/icons/filter.svg
@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 44.1 (41455) - http://www.bohemiancoding.com/sketch -->
+    <title>filter</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard-4" transform="translate(-444.000000, -247.000000)" fill="#333333">
+            <g id="70" transform="translate(444.000000, 247.000000)">
+                <path d="M8.82929429,17 L20.0066023,17 C20.5552407,17 21,17.4438648 21,18 C21,18.5522847 20.5550537,19 20.0066023,19 L8.82929429,19 C8.41745788,20.1651924 7.30621883,21 6,21 C4.34314575,21 3,19.6568542 3,18 C3,16.3431458 4.34314575,15 6,15 C7.30621883,15 8.41745788,15.8348076 8.82929429,17 Z M9.17070571,13 L3.99339768,13 C3.44475929,13 3,12.5561352 3,12 C3,11.4477153 3.44494629,11 3.99339768,11 L9.17070571,11 C9.58254212,9.83480763 10.6937812,9 12,9 C13.3062188,9 14.4174579,9.83480763 14.8292943,11 L20.0066023,11 C20.5552407,11 21,11.4438648 21,12 C21,12.5522847 20.5550537,13 20.0066023,13 L14.8292943,13 C14.4174579,14.1651924 13.3062188,15 12,15 C10.6937812,15 9.58254212,14.1651924 9.17070571,13 Z M15.1659641,6.98648118 C15.1124525,6.99537358 15.05751,7 15.0014977,7 L3.99850233,7 C3.44704472,7 3,6.55613518 3,6 C3,5.44771525 3.44748943,5 3.99850233,5 L15.0014977,5 C15.0575314,5 15.1124871,5.00458274 15.1660053,5.01340035 C15.5740343,3.84121344 16.6887792,3 18,3 C19.6568542,3 21,4.34314575 21,6 C21,7.65685425 19.6568542,9 18,9 C16.688735,9 15.5739592,8.15872988 15.1659641,6.98648118 Z M18,7 C18.5522847,7 19,6.55228475 19,6 C19,5.44771525 18.5522847,5 18,5 C17.4477153,5 17,5.44771525 17,6 C17,6.55228475 17.4477153,7 18,7 Z M12,13 C12.5522847,13 13,12.5522847 13,12 C13,11.4477153 12.5522847,11 12,11 C11.4477153,11 11,11.4477153 11,12 C11,12.5522847 11.4477153,13 12,13 Z M6,19 C6.55228475,19 7,18.5522847 7,18 C7,17.4477153 6.55228475,17 6,17 C5.44771525,17 5,17.4477153 5,18 C5,18.5522847 5.44771525,19 6,19 Z" id="Combined-Shape"></path>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/application/assets/fonts/icons/filters.svg b/application/assets/fonts/icons/filters.svg
new file mode 100644
index 00000000..277a5780
--- /dev/null
+++ b/application/assets/fonts/icons/filters.svg
@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 44.1 (41455) - http://www.bohemiancoding.com/sketch -->
+    <title>filters</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard-4" transform="translate(-840.000000, -467.000000)" fill="#333333">
+            <g id="179" transform="translate(840.000000, 467.000000)">
+                <circle id="Filter-1" opacity="0.25" cx="12" cy="8" r="6"></circle>
+                <circle id="Filter-2" opacity="0.5" cx="8" cy="16" r="6"></circle>
+                <circle id="Filter-3" opacity="0.75" cx="16" cy="16" r="6"></circle>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/application/assets/fonts/icons/finder.svg b/application/assets/fonts/icons/finder.svg
new file mode 100644
index 00000000..7a2e1e1e
--- /dev/null
+++ b/application/assets/fonts/icons/finder.svg
@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 44.1 (41455) - http://www.bohemiancoding.com/sketch -->
+    <title>finder</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard-4" transform="translate(-840.000000, -379.000000)">
+            <g id="138" transform="translate(840.000000, 379.000000)">
+                <rect id="Rectangle-87" stroke="#333333" stroke-width="2" x="2" y="3" width="20" height="18" rx="2"></rect>
+                <polygon id="Face" fill="#333333" opacity="0.100000001" points="13 4.5 11 13 13 13 14 20 22 20 22 4"></polygon>
+                <path d="M14,3 C14,3 11,9 11,13 L13,13 C13,17 14,21 14,21" id="Nose" stroke="#333333" stroke-width="2" stroke-linejoin="round"></path>
+                <path d="M6,8.0093689 C6,7.45190985 6.44386482,7 7,7 C7.55228475,7 8,7.44335318 8,8.0093689 L8,9.9906311 C8,10.5480902 7.55613518,11 7,11 C6.44771525,11 6,10.5566468 6,9.9906311 L6,8.0093689 Z M16,8.0093689 C16,7.45190985 16.4438648,7 17,7 C17.5522847,7 18,7.44335318 18,8.0093689 L18,9.9906311 C18,10.5480902 17.5561352,11 17,11 C16.4477153,11 16,10.5566468 16,9.9906311 L16,8.0093689 Z" id="Eyes" fill="#333333"></path>
+                <path d="M7,15 C7,15 8,17 12,17 C16,17 17,15 17,15" id="Smile" stroke="#333333" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/application/assets/fonts/icons/fingerprint.svg b/application/assets/fonts/icons/fingerprint.svg
new file mode 100644
index 00000000..806d1842
--- /dev/null
+++ b/application/assets/fonts/icons/fingerprint.svg
@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 44.1 (41455) - http://www.bohemiancoding.com/sketch -->
+    <title>fingerprint</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round">
+        <g id="Artboard-4" transform="translate(-312.000000, -599.000000)" stroke="#333333" stroke-width="2">
+            <g id="227" transform="translate(312.000000, 599.000000)">
+                <path d="M20.5,15.5 C20.5,15.5 21,14 21,12 C21,11.163846 20.8859735,10.3543243 20.672622,9.58613647 M19.5084398,7.03602414 C17.8972498,4.60385304 15.1359249,3 12,3 M9.47876122,3.35792388 C5.73536732,4.44817614 3,7.90464844 3,12" id="Oval-132"></path>
+                <path d="M16,19.5 C17,17.5 18,15.5 18,12 C18,8.6862915 15.3137085,6 12,6 C9.77321215,6 7.82974961,7.35472248 6.79438716,9.00207658 M6,11.5 C6,14.5 4,15 4,15" id="Oval-132"></path>
+                <path d="M11,21 C13.1636329,18.8363671 14.2869753,16.6727342 14.7451616,14.5091013 M15,12 C15,10.3431458 13.6568542,9 12,9 C10.3431458,9 9,10.3431458 9,12 C9,16 5.5,18 5.5,18" id="Oval-132"></path>
+                <path d="M12,12 C12,13.2189376 11.2906347,15.4427169 11.2906347,15.4427169 M10.0204534,17.6619834 C9.45282336,18.451229 8.77438551,19.2256145 8,20" id="Path-169" stroke-linejoin="round"></path>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/application/assets/fonts/icons/flag-uk.svg b/application/assets/fonts/icons/flag-uk.svg
new file mode 100644
index 00000000..51c15ed5
--- /dev/null
+++ b/application/assets/fonts/icons/flag-uk.svg
@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 44.1 (41455) - http://www.bohemiancoding.com/sketch -->
+    <title>flag-uk</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard-4" transform="translate(-620.000000, -1134.000000)">
+            <g id="Extras" transform="translate(48.000000, 1046.000000)">
+                <g id="uk-flag" transform="translate(572.000000, 88.000000)">
+                    <rect id="Flag" stroke="#333333" stroke-width="2" x="1" y="4" width="22" height="16" rx="2"></rect>
+                    <path d="M13,11 L23,11 L23,13 L13,13 L13,19 L11,19 L11,13 L1,13 L1,11 L11,11 L11,5 L13,5 L13,11 Z M14,10 L21,5 L22,5 L15,10 L14,10 Z M15,14 L16,14 L23,19 L22,19 L15,14 Z M2,19 L9,14 L10,14 L3,19 L2,19 Z M9,10 L8,10 L1,5 L2,5 L9,10 Z" id="red" fill="#333333" opacity="0.75"></path>
+                    <path d="M14,5 L19.75,5 L14,9 L14,5 Z M22,6.375 L22,10 L17,10 L22,6.375 Z M14,19 L14,15 L19.75,19 L14,19 Z M22,17.625 L17,14 L22,14 L22,17.625 Z M2,14 L7.75,14 L2,18 L2,14 Z M10,15.375 L10,19 L5,19 L10,15.375 Z M10,5 L10,9 L4.25,5 L10,5 Z M2,6.375 L7,10 L2,10 L2,6.375 Z" id="blue" fill="#333333" opacity="0.5"></path>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/application/assets/fonts/icons/flag.svg b/application/assets/fonts/icons/flag.svg
new file mode 100644
index 00000000..5762aa63
--- /dev/null
+++ b/application/assets/fonts/icons/flag.svg
@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 44.1 (41455) - http://www.bohemiancoding.com/sketch -->
+    <title>flag</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard-4" transform="translate(-48.000000, -335.000000)">
+            <g id="101" transform="translate(48.000000, 335.000000)">
+                <rect id="Pole" fill="#333333" x="3" y="1" width="2" height="22" rx="1"></rect>
+                <path d="M4,4 C4,4 7,3 9,3 C11,3 13,4 15,4 C17,4 20,3 20,3 L20,14 C20,14 17,15 15,15 C13,15 11,14 9,14 C7,14 4,15 4,15 L4,4 Z" id="Flag" stroke="#333333" stroke-width="2" stroke-linejoin="round" transform="translate(12.000000, 9.000000) scale(-1, 1) translate(-12.000000, -9.000000) "></path>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/application/assets/fonts/icons/flame.svg b/application/assets/fonts/icons/flame.svg
new file mode 100644
index 00000000..54c7e8b1
--- /dev/null
+++ b/application/assets/fonts/icons/flame.svg
@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 44.1 (41455) - http://www.bohemiancoding.com/sketch -->
+    <title>flame</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
+        <g id="Artboard-4" transform="translate(-532.000000, -819.000000)" stroke="#333333">
+            <g id="332" transform="translate(532.000000, 819.000000)">
+                <path d="M9.5,13 C7,16.5 11,21 11,21 L13,21 C13,21 16.5,16.5 14,16.5 C11.5,16.5 10,16.5 9.5,13 Z" id="Centre" fill="#333333" opacity="0.449999988"></path>
+                <path d="M12,22 C15.8659932,22 19,18.8659932 19,15 C19,13.7555985 18.5,10.5 16.5,9 C16.5,11 15,14.5 13,13 C11,11.5 15.5,4.5 9,2 C10,9 5,10 5,15 C5,18.8659932 8.13400675,22 12,22 Z" id="Flame" stroke-width="2"></path>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/application/assets/fonts/icons/flash-auto.svg b/application/assets/fonts/icons/flash-auto.svg
new file mode 100644
index 00000000..5d06bf32
--- /dev/null
+++ b/application/assets/fonts/icons/flash-auto.svg
@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 44.1 (41455) - http://www.bohemiancoding.com/sketch -->
+    <title>flash-auto</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard-4" transform="translate(-48.000000, -511.000000)" stroke="#333333" stroke-width="2">
+            <g id="181" transform="translate(48.000000, 511.000000)">
+                <polygon id="Lightning-Bolt" fill="#333333" stroke-linecap="round" stroke-linejoin="round" points="9 22 11 13 6 13 15 2 13 11 18 11"></polygon>
+                <polyline id="Arrow" stroke-linecap="round" stroke-linejoin="round" points="14 22 22 12 22 22"></polyline>
+                <path d="M22,20 L16,20" id="Line"></path>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/application/assets/fonts/icons/flash-off.svg b/application/assets/fonts/icons/flash-off.svg
new file mode 100644
index 00000000..51c24371
--- /dev/null
+++ b/application/assets/fonts/icons/flash-off.svg
@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 44.1 (41455) - http://www.bohemiancoding.com/sketch -->
+    <title>flash-off</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard-4" transform="translate(-92.000000, -511.000000)">
+            <g id="182" transform="translate(92.000000, 511.000000)">
+                <path d="M14.2985711,10 L18,10 C18.8436265,10 19.3081735,10.9803069 18.7739573,11.6332378 L16.7573553,14.0979736 L14.2985711,10 Z M12.7205424,19.031856 L9.7739573,22.6332378 C9.10692015,23.4485054 7.79530372,22.811361 8.02381294,21.7830695 L9.73934203,14.0631886 L12.7205424,19.031856 Z M9.70142886,14 L6,14 C5.15637345,14 4.69182649,13.0196931 5.2260427,12.3667622 L7.24264471,9.90202642 L9.70142886,14 Z M11.2794576,4.96814404 L14.2260427,1.36676221 C14.8930799,0.551494583 16.2046963,1.18863896 15.9761871,2.21693046 L14.260658,9.93681138 L11.2794576,4.96814404 Z" id="Lightning-Bolt" fill="#333333" fill-rule="nonzero"></path>
+                <path d="M6,2 L18,22 L6,2 Z" id="Line" stroke="#333333" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/application/assets/fonts/icons/flash-on.svg b/application/assets/fonts/icons/flash-on.svg
new file mode 100644
index 00000000..882fa4be
--- /dev/null
+++ b/application/assets/fonts/icons/flash-on.svg
@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 44.1 (41455) - http://www.bohemiancoding.com/sketch -->
+    <title>flash-on</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
+        <g id="Artboard-4" transform="translate(-884.000000, -467.000000)" stroke="#333333" stroke-width="2" fill="#333333">
+            <g id="180" transform="translate(884.000000, 467.000000)">
+                <polygon id="Lightning-Bolt" points="9 22 11 13 6 13 15 2 13 11 18 11"></polygon>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/application/assets/fonts/icons/flashlight.svg b/application/assets/fonts/icons/flashlight.svg
new file mode 100644
index 00000000..01865a09
--- /dev/null
+++ b/application/assets/fonts/icons/flashlight.svg
@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 44.1 (41455) - http://www.bohemiancoding.com/sketch -->
+    <title>flashlight</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard-4" transform="translate(-576.000000, -643.000000)">
+            <g id="253" transform="translate(576.000000, 643.000000)">
+                <path d="M6.5998845,6.79984599 C6.26857744,6.35810325 6,5.55664682 6,4.9906311 L6,3.0093689 C6,2.45190985 6.45576096,2 7.00247329,2 L16.9975267,2 C17.5511774,2 18,2.44335318 18,3.0093689 L18,4.9906311 C18,5.54809015 17.73377,6.35497332 17.4001155,6.79984599 L15.5998845,9.20015401 C15.2685774,9.64189675 15,10.455761 15,11.0024733 L15,20.9975267 C15,21.5511774 14.5490248,22 14.009222,22 L9.99077797,22 C9.44358641,22 9,21.544239 9,20.9975267 L9,11.0024733 C9,10.4488226 8.73377001,9.64502668 8.4001155,9.20015401 L6.5998845,6.79984599 Z" id="Body" stroke="#333333" stroke-width="2" stroke-linejoin="round"></path>
+                <path d="M6,6 L18,6" id="Top" stroke="#333333" stroke-width="2"></path>
+                <path d="M9,10 L15,10" id="Mid" stroke="#333333" stroke-width="2"></path>
+                <rect id="Switch" fill="#333333" x="11" y="13" width="2" height="4" rx="1"></rect>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/application/assets/fonts/icons/flower 2.svg b/application/assets/fonts/icons/flower 2.svg
new file mode 100644
index 00000000..f59a3190
--- /dev/null
+++ b/application/assets/fonts/icons/flower 2.svg	
@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 44.1 (41455) - http://www.bohemiancoding.com/sketch -->
+    <title>flower 2</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard-4" transform="translate(-884.000000, -335.000000)" stroke="#333333" stroke-width="2">
+            <g id="119" transform="translate(884.000000, 335.000000)">
+                <path d="M8.02711188,6.53178862 C8.25894986,4.54326722 9.94925025,3 12,3 C14.0507498,3 15.7410501,4.54326722 15.9728881,6.53178862 C17.9357262,6.13779274 19.9257921,7.26846813 20.5595086,9.21884705 C21.1932252,11.169226 20.2478224,13.253693 18.428268,14.0886709 C19.4095307,15.8336894 18.9491587,18.0757525 17.2900673,19.2811529 C15.6309759,20.4865534 13.3563844,20.2315576 12,18.759081 C10.6436156,20.2315576 8.36902413,20.4865534 6.70993273,19.2811529 C5.05084133,18.0757525 4.5904693,15.8336894 5.57173199,14.0886709 C3.75217763,13.253693 2.80677483,11.169226 3.44049135,9.21884705 C4.07420788,7.26846813 6.06427376,6.13779274 8.02711188,6.53178862 Z M12,15 C13.6568542,15 15,13.6568542 15,12 C15,10.3431458 13.6568542,9 12,9 C10.3431458,9 9,10.3431458 9,12 C9,13.6568542 10.3431458,15 12,15 Z" id="Petals"></path>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/application/assets/fonts/icons/flower.svg b/application/assets/fonts/icons/flower.svg
new file mode 100644
index 00000000..a5863135
--- /dev/null
+++ b/application/assets/fonts/icons/flower.svg
@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 44.1 (41455) - http://www.bohemiancoding.com/sketch -->
+    <title>flower</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard-4" transform="translate(-840.000000, -335.000000)">
+            <g id="118" transform="translate(840.000000, 335.000000)">
+                <path d="M9.00258131,5.8744071 C9.06841478,4.2757993 10.3852179,3 12,3 C13.6147821,3 14.9315852,4.2757993 14.9974187,5.8744071 C16.5381287,5.44302148 18.1584005,6.30113204 18.6573956,7.83688104 C19.1563907,9.37263003 18.349948,11.0192279 16.8499253,11.5758363 C17.736303,12.9078331 17.4208829,14.7139739 16.1144968,15.663119 C14.8081106,16.612264 12.9928985,16.3541182 12,15.0995133 C11.0071015,16.3541182 9.19188936,16.612264 7.88550323,15.663119 C6.57911711,14.7139739 6.26369699,12.9078331 7.15007468,11.5758363 C5.65005197,11.0192279 4.84360929,9.37263003 5.34260439,7.83688104 C5.84159948,6.30113204 7.46187127,5.44302148 9.00258131,5.8744071 Z M12,12 C13.1584073,12 14.097482,11.1045695 14.097482,10 C14.097482,8.8954305 13.1584073,8 12,8 C10.8415927,8 9.90251803,8.8954305 9.90251803,10 C9.90251803,11.1045695 10.8415927,12 12,12 Z" id="Petals" stroke="#333333" stroke-width="2"></path>
+                <rect id="Stem" fill="#333333" x="11" y="15" width="2" height="7" rx="1"></rect>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/application/assets/fonts/icons/folder.svg b/application/assets/fonts/icons/folder.svg
new file mode 100644
index 00000000..11183b89
--- /dev/null
+++ b/application/assets/fonts/icons/folder.svg
@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 44.1 (41455) - http://www.bohemiancoding.com/sketch -->
+    <title>folder</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard-4" transform="translate(-708.000000, -115.000000)">
+            <g id="16" transform="translate(708.000000, 115.000000)">
+                <path d="M11.5857864,17 L3.99754465,17 C2.89670181,17 2,16.099013 2,15.0046024 L2,6.99539757 C2,5.89385529 2.89217541,5 3.99339768,5 L20.0066023,5 C21.1085926,5 22,5.89626364 22,6.99850233 L22,18.0014977 C22,19.102094 21.1044506,20 20.009222,20 L14.5857864,20 L11.5857864,17 Z" id="Rectangle-406" stroke="#333333" stroke-width="2" stroke-linejoin="round" transform="translate(12.000000, 12.500000) scale(1, -1) translate(-12.000000, -12.500000) "></path>
+                <path d="M3,5 C3,4.44771525 3.4454627,4 3.99871095,4 L12.5,4 L10.5,6 L3.99594209,6 C3.44589846,6 3,5.55613518 3,5 L3,5 Z" id="Rectangle-409" fill="#333333"></path>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/application/assets/fonts/icons/forward.svg b/application/assets/fonts/icons/forward.svg
new file mode 100644
index 00000000..a26ce78e
--- /dev/null
+++ b/application/assets/fonts/icons/forward.svg
@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 44.1 (41455) - http://www.bohemiancoding.com/sketch -->
+    <title>forward</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard-4" transform="translate(-488.000000, -335.000000)" fill-rule="nonzero" fill="#333333">
+            <g id="110" transform="translate(488.000000, 335.000000)">
+                <path d="M15,7 L15,11 L8,11 L4,12.0296054 L8,12.999579 L15,12.999579 L15,17 L20,12.0296054 L15,7 Z M8,14.999579 C7.8412119,14.999579 7.68298879,14.9806689 7.52867301,14.9432484 L3.52867301,13.9732748 C1.50511572,13.4825756 1.48497509,10.6117833 3.50144833,10.0927403 L7.50144833,9.06313495 C7.66431677,9.02121239 7.83182262,9 8,9 L13,9 L13,7 C13,5.21534246 15.1601689,4.32430411 16.4183819,5.58996706 L21.4183819,10.6195724 C22.1971312,11.4029328 22.1933821,12.6692764 21.4100081,13.448012 L16.4100081,18.4184066 C15.1483725,19.6725719 13,18.7789478 13,17 L13,14.999579 L8,14.999579 Z" id="Path-36"></path>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/application/assets/fonts/icons/fullscreen-exit.svg b/application/assets/fonts/icons/fullscreen-exit.svg
new file mode 100644
index 00000000..f048df24
--- /dev/null
+++ b/application/assets/fonts/icons/fullscreen-exit.svg
@@ -0,0 +1,20 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 44.1 (41455) - http://www.bohemiancoding.com/sketch -->
+    <title>fullscreen-exit</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linejoin="round">
+        <g id="Artboard-4" transform="translate(-400.000000, -1046.000000)" stroke="#333333" stroke-width="2">
+            <g id="Extras" transform="translate(48.000000, 1046.000000)">
+                <g id="exit-fullscreen" transform="translate(352.000000, 0.000000)">
+                    <rect id="Screen" x="6" y="8" width="12" height="8"></rect>
+                    <polyline id="Arrow-4" stroke-linecap="round" transform="translate(2.500000, 18.500000) scale(-1, -1) translate(-2.500000, -18.500000) " points="4 20 1 20 1 17"></polyline>
+                    <polyline id="Arrow-3" stroke-linecap="round" transform="translate(21.500000, 18.500000) scale(-1, 1) translate(-21.500000, -18.500000) " points="23 20 23 17 20 17"></polyline>
+                    <polyline id="Arrow-2" stroke-linecap="round" transform="translate(21.500000, 5.500000) scale(-1, -1) translate(-21.500000, -5.500000) " points="23 7 23 4 20 4"></polyline>
+                    <polyline id="Arrow-1" stroke-linecap="round" transform="translate(2.500000, 5.500000) scale(-1, 1) translate(-2.500000, -5.500000) " points="4 7 1 7 1 4"></polyline>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/application/assets/fonts/icons/fullscreen.svg b/application/assets/fonts/icons/fullscreen.svg
new file mode 100644
index 00000000..ec82d480
--- /dev/null
+++ b/application/assets/fonts/icons/fullscreen.svg
@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 44.1 (41455) - http://www.bohemiancoding.com/sketch -->
+    <title>fullscreen</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard-4" transform="translate(-576.000000, -159.000000)" stroke="#333333" stroke-width="2">
+            <g id="33" transform="translate(576.000000, 159.000000)">
+                <rect id="Screen" x="1" y="4" width="22" height="16" rx="1"></rect>
+                <polyline id="Path-42" stroke-linecap="round" stroke-linejoin="round" points="20 10 20 7 17 7"></polyline>
+                <polyline id="Path-42" stroke-linecap="round" stroke-linejoin="round" points="7 17 4 17 4 14"></polyline>
+                <polyline id="Path-42" stroke-linecap="round" stroke-linejoin="round" transform="translate(18.500000, 15.500000) scale(1, -1) translate(-18.500000, -15.500000) " points="20 17 20 14 17 14"></polyline>
+                <polyline id="Path-42" stroke-linecap="round" stroke-linejoin="round" transform="translate(5.500000, 8.500000) scale(1, -1) translate(-5.500000, -8.500000) " points="7 10 4 10 4 7"></polyline>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/application/assets/fonts/icons/gas.svg b/application/assets/fonts/icons/gas.svg
new file mode 100644
index 00000000..f151805f
--- /dev/null
+++ b/application/assets/fonts/icons/gas.svg
@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 44.1 (41455) - http://www.bohemiancoding.com/sketch -->
+    <title>gas</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard-4" transform="translate(-400.000000, -863.000000)" stroke="#333333" stroke-width="2">
+            <g id="349" transform="translate(400.000000, 863.000000)">
+                <path d="M3,3.99079514 C3,2.89130934 3.90195036,2 5.0085302,2 L12.9914698,2 C14.1007504,2 15,2.89821238 15,3.99079514 L15,21.0081969 C15,21.5559546 14.544239,22 13.9975267,22 L4.00247329,22 C3.44882258,22 3,21.5446944 3,21.0081969 L3,3.99079514 Z" id="Pump"></path>
+                <rect id="Display" stroke-linecap="round" stroke-linejoin="round" x="6" y="5" width="6" height="4"></rect>
+                <path d="M15,12 L15.9989566,12 C17.1041023,12 18,12.8958578 18,13.9973917 L18,19.4936024 C18,20.3255628 18.6657972,21 19.5,21 L19.5,21 C20.3284271,21 21,20.3242162 21,19.4951143 L21,12.0090332 L22,10 L22,6 L19.5,2" id="Pipe" stroke-linecap="round" stroke-linejoin="round"></path>
+                <rect id="Handle" fill="#F2E2E4" x="19" y="6" width="3" height="5" rx="1.5"></rect>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/application/assets/fonts/icons/gears.svg b/application/assets/fonts/icons/gears.svg
new file mode 100644
index 00000000..8725810a
--- /dev/null
+++ b/application/assets/fonts/icons/gears.svg
@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 44.1 (41455) - http://www.bohemiancoding.com/sketch -->
+    <title>gears</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard-4" transform="translate(-444.000000, -863.000000)">
+            <g id="350" transform="translate(444.000000, 863.000000)">
+                <path d="M18,6 L18,18" id="3-4" stroke="#333333" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
+                <path d="M12,6 L12,18" id="1-2" stroke="#333333" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
+                <path d="M6,6 L6,10.0020869 C6,11.1055038 6.90195036,12 8.0085302,12 L18,12" id="Reverse" stroke="#333333" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
+                <path d="M18,4 C17.4477153,4 17,3.55228475 17,3 C17,2.44771525 17.4477153,2 18,2 C18.5522847,2 19,2.44771525 19,3 C19,3.55228475 18.5522847,4 18,4 Z M18,22 C17.4477153,22 17,21.5522847 17,21 C17,20.4477153 17.4477153,20 18,20 C18.5522847,20 19,20.4477153 19,21 C19,21.5522847 18.5522847,22 18,22 Z M12,4 C11.4477153,4 11,3.55228475 11,3 C11,2.44771525 11.4477153,2 12,2 C12.5522847,2 13,2.44771525 13,3 C13,3.55228475 12.5522847,4 12,4 Z M12,22 C11.4477153,22 11,21.5522847 11,21 C11,20.4477153 11.4477153,20 12,20 C12.5522847,20 13,20.4477153 13,21 C13,21.5522847 12.5522847,22 12,22 Z M6,4 C5.44771525,4 5,3.55228475 5,3 C5,2.44771525 5.44771525,2 6,2 C6.55228475,2 7,2.44771525 7,3 C7,3.55228475 6.55228475,4 6,4 Z" id="Gears" fill="#333333" opacity="0.5"></path>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/application/assets/fonts/icons/gender-female.svg b/application/assets/fonts/icons/gender-female.svg
new file mode 100644
index 00000000..edfc1a58
--- /dev/null
+++ b/application/assets/fonts/icons/gender-female.svg
@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 44.1 (41455) - http://www.bohemiancoding.com/sketch -->
+    <title>gender-female</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard-4" transform="translate(-224.000000, -731.000000)" stroke="#333333" stroke-width="2">
+            <g id="285" transform="translate(224.000000, 731.000000)">
+                <circle id="Head" cx="12" cy="3" r="2"></circle>
+                <path d="M5,15 L8.50148493,8.87240137 C8.7768072,8.3905874 9.45097518,8 9.99077797,8 L14.009222,8 C14.5564136,8 15.2265182,8.39640677 15.4985151,8.87240137 L19,15" id="Arms" stroke-linecap="round" stroke-linejoin="round"></path>
+                <path d="M11.6416982,8 L7.24439644,17.594113 C7.08412696,17.9437919 7.12036587,18 7.50276013,18 L16.4972399,18 C16.8758516,18 16.9141679,17.9400715 16.7556036,17.594113 L12.3583018,8 L11.6416982,8 Z" id="Skirt"></path>
+                <path d="M14,18 L14,23" id="Right-Leg" stroke-linecap="round"></path>
+                <path d="M10,18 L10,23" id="Path-214" stroke-linecap="round"></path>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/application/assets/fonts/icons/gender-male.svg b/application/assets/fonts/icons/gender-male.svg
new file mode 100644
index 00000000..4fe19e7d
--- /dev/null
+++ b/application/assets/fonts/icons/gender-male.svg
@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 44.1 (41455) - http://www.bohemiancoding.com/sketch -->
+    <title>gender-male</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard-4" transform="translate(-180.000000, -731.000000)" stroke="#333333" stroke-width="2">
+            <g id="284" transform="translate(180.000000, 731.000000)">
+                <circle id="Head" cx="12" cy="3" r="2"></circle>
+                <path d="M7,15 L7.85884537,8.98808242 C7.93680292,8.44237957 8.45303631,8 8.99703014,8 L15.0029699,8 C15.5536144,8 16.068734,8.44677132 16.1518785,8.98721009 L17,14.5" id="Arms" stroke-linecap="round" stroke-linejoin="round"></path>
+                <rect id="Body" x="10" y="8" width="4" height="9"></rect>
+                <path d="M14,16 L14,23" id="Right-Leg" stroke-linecap="round"></path>
+                <path d="M10,15 L10,23" id="Left-Leg" stroke-linecap="round"></path>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/application/assets/fonts/icons/gender-symbol-female.svg b/application/assets/fonts/icons/gender-symbol-female.svg
new file mode 100644
index 00000000..5b05091b
--- /dev/null
+++ b/application/assets/fonts/icons/gender-symbol-female.svg
@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 44.1 (41455) - http://www.bohemiancoding.com/sketch -->
+    <title>gender-symbol-female</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard-4" transform="translate(-664.000000, -731.000000)" stroke="#333333" stroke-width="2">
+            <g id="295" transform="translate(664.000000, 731.000000)">
+                <circle id="Circle" cx="12" cy="8" r="6"></circle>
+                <path d="M12,14 L12,22" id="Line" stroke-linecap="round"></path>
+                <path d="M9,19 L15,19" id="Cross" stroke-linecap="round" stroke-linejoin="round"></path>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/application/assets/fonts/icons/gender-symbol-male.svg b/application/assets/fonts/icons/gender-symbol-male.svg
new file mode 100644
index 00000000..2e51b645
--- /dev/null
+++ b/application/assets/fonts/icons/gender-symbol-male.svg
@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 44.1 (41455) - http://www.bohemiancoding.com/sketch -->
+    <title>gender-symbol-male</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard-4" transform="translate(-620.000000, -731.000000)" stroke="#333333" stroke-width="2">
+            <g id="294" transform="translate(620.000000, 731.000000)">
+                <circle id="Circle" cx="10" cy="14" r="6"></circle>
+                <polyline id="Head" stroke-linecap="round" stroke-linejoin="round" points="15 4 20 4 20 9"></polyline>
+                <path d="M20,4 L14,10" id="Line"></path>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/application/assets/fonts/icons/gender-symbol-uni.svg b/application/assets/fonts/icons/gender-symbol-uni.svg
new file mode 100644
index 00000000..3af5473e
--- /dev/null
+++ b/application/assets/fonts/icons/gender-symbol-uni.svg
@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 44.1 (41455) - http://www.bohemiancoding.com/sketch -->
+    <title>gender-symbol-uni</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard-4" transform="translate(-708.000000, -731.000000)" stroke="#333333" stroke-width="2">
+            <g id="296" transform="translate(708.000000, 731.000000)">
+                <circle id="Circle" cx="11" cy="10" r="6"></circle>
+                <polyline id="Head" stroke-linecap="round" stroke-linejoin="round" points="15 1 20 1 20 6"></polyline>
+                <path d="M20,1 L15,6" id="Line"></path>
+                <path d="M11,16 L11,23" id="Line" stroke-linecap="round"></path>
+                <path d="M8,20 L14,20" id="Cross" stroke-linecap="round" stroke-linejoin="round"></path>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/application/assets/fonts/icons/gender-unisex.svg b/application/assets/fonts/icons/gender-unisex.svg
new file mode 100644
index 00000000..f84edae3
--- /dev/null
+++ b/application/assets/fonts/icons/gender-unisex.svg
@@ -0,0 +1,20 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 44.1 (41455) - http://www.bohemiancoding.com/sketch -->
+    <title>gender-unisex</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard-4" transform="translate(-268.000000, -731.000000)">
+            <g id="286" transform="translate(268.000000, 731.000000)">
+                <circle id="Head" stroke="#333333" stroke-width="2" cx="12" cy="3" r="2"></circle>
+                <path d="M5,15 L8.50148493,8.87240137 C8.7768072,8.3905874 9.44266033,8 9.99895656,8" id="Left-Arm" stroke="#333333" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
+                <path d="M14,8 L15,8 C15.5522847,8 16.068734,8.44677132 16.1518785,8.98721009 L17,14.5" id="Right-Arm" stroke="#333333" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
+                <path d="M14,18 L14,23" id="Right-Leg`" stroke="#333333" stroke-width="2" stroke-linecap="round"></path>
+                <path d="M10,18 L10,23" id="Left-Leg" stroke="#333333" stroke-width="2" stroke-linecap="round"></path>
+                <polyline id="Body" stroke="#333333" stroke-width="2" points="13 8 14 8 14 18 13 18"></polyline>
+                <path d="M11,7 L10,7 C10,7 10.1514332,8.55995811 9.93311061,9.0451195 L6.08807849,17.5896353 C5.79029432,18.2513779 6.27434257,19 7,19 L11,19 L11,17 L8.54658561,17 L10.9983876,11.551551 L11,7 Z" id="Skirt" fill="#333333" fill-rule="nonzero"></path>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/application/assets/fonts/icons/ghost.svg b/application/assets/fonts/icons/ghost.svg
new file mode 100644
index 00000000..cd2c5151
--- /dev/null
+++ b/application/assets/fonts/icons/ghost.svg
@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 44.1 (41455) - http://www.bohemiancoding.com/sketch -->
+    <title>ghost</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard-4" transform="translate(-268.000000, -467.000000)">
+            <g id="166" transform="translate(268.000000, 467.000000)">
+                <path d="M20,15.6631043 C20,18.1652331 20,20.4948065 20,20.4948065 C20,21.0589658 19.6519857,21.2215886 19.2226884,20.8781507 L18.2773116,20.1218493 C17.8476143,19.7780914 17.1519857,19.7784114 16.7226884,20.1218493 L15.7773116,20.8781507 C15.3476143,21.2219086 14.625859,21.2505727 14.1643327,20.9428885 L12.8356673,20.0571115 C12.3678589,19.7452393 11.625859,19.7494273 11.1643327,20.0571115 L9.83566725,20.9428885 C9.36785889,21.2547607 8.65198573,21.2215886 8.22268838,20.8781507 L7.27731162,20.1218493 C6.84761429,19.7780914 6.15198573,19.7784114 5.72268838,20.1218493 L4.77731162,20.8781507 C4.34761429,21.2219086 4,21.0481841 4,20.4908409 C4,20.4908409 4,18.3378686 4,15.6631043 C2.81520747,15.1875381 1,14.1841204 1,12.5 C1,10.5947419 3.03280467,10.7222885 4,10.8908022 C4,10.5881803 4,10.2905141 4,10 C4,5.581722 7.581722,2 12,2 C16.418278,2 20,5.581722 20,10 C20,10.2177859 20,10.5222486 20,10.8908022 C20.9671953,10.7222885 23,10.5947419 23,12.5 C23,14.1841204 21.1847925,15.1875381 20,15.6631043 Z" id="spoopy" stroke="#333333" stroke-width="2" stroke-linejoin="round"></path>
+                <path d="M9.5,11 C8.67157288,11 8,10.3284271 8,9.5 C8,8.67157288 8.67157288,8 9.5,8 C10.3284271,8 11,8.67157288 11,9.5 C11,10.3284271 10.3284271,11 9.5,11 Z M12,14 C11.4477153,14 11,13.5522847 11,13 C11,12.4477153 11.4477153,12 12,12 C12.5522847,12 13,12.4477153 13,13 C13,13.5522847 12.5522847,14 12,14 Z M14.5,11 C13.6715729,11 13,10.3284271 13,9.5 C13,8.67157288 13.6715729,8 14.5,8 C15.3284271,8 16,8.67157288 16,9.5 C16,10.3284271 15.3284271,11 14.5,11 Z" id="Face" fill="#333333"></path>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/application/assets/fonts/icons/gift.svg b/application/assets/fonts/icons/gift.svg
new file mode 100644
index 00000000..56c215dd
--- /dev/null
+++ b/application/assets/fonts/icons/gift.svg
@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 44.1 (41455) - http://www.bohemiancoding.com/sketch -->
+    <title>gift</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard-4" transform="translate(-48.000000, -291.000000)">
+            <g id="81" transform="translate(48.000000, 291.000000)">
+                <rect id="Lid" stroke="#333333" stroke-width="2" stroke-linejoin="round" x="3" y="9" width="18" height="4" rx="1"></rect>
+                <rect id="Body" stroke="#333333" stroke-width="2" stroke-linejoin="round" x="4" y="13" width="16" height="8" rx="1"></rect>
+                <rect id="Ribbon" fill="#333333" x="11" y="10" width="2" height="10"></rect>
+                <path d="M12,9 L12,6 C12,4.34314575 13.3431458,3 15,3 C16.6568542,3 18,4.34314575 18,6 C18,7.65685425 16.6568542,9 15,9 L12,9 Z" id="Right-Bow" stroke="#333333" stroke-width="2"></path>
+                <path d="M6,9 L6,6 C6,4.34314575 7.34314575,3 9,3 C10.6568542,3 12,4.34314575 12,6 C12,7.65685425 10.6568542,9 9,9 L6,9 Z" id="Left-Bow" stroke="#333333" stroke-width="2" transform="translate(9.000000, 6.000000) scale(-1, 1) translate(-9.000000, -6.000000) "></path>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/application/assets/fonts/icons/gingerbread-house.svg b/application/assets/fonts/icons/gingerbread-house.svg
new file mode 100644
index 00000000..bc7f4afa
--- /dev/null
+++ b/application/assets/fonts/icons/gingerbread-house.svg
@@ -0,0 +1,19 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 44.1 (41455) - http://www.bohemiancoding.com/sketch -->
+    <title>gingerbread-house</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard-4" transform="translate(-48.000000, -599.000000)">
+            <g id="221" transform="translate(48.000000, 599.000000)">
+                <path d="M3.47400693,3.92864127 C3.76450488,2.86348211 4.89451376,2 5.99406028,2 L18.0059397,2 C19.1072288,2 20.235405,2.86315155 20.5259931,3.92864127 L22.4740069,11.0713587 C22.7645049,12.1365179 22.1103261,13 21.008845,13 L2.991155,13 C1.89147046,13 1.23540497,12.1368484 1.52599307,11.0713587 L3.47400693,3.92864127 Z" id="Roof" stroke="#333333" stroke-width="2"></path>
+                <path d="M3,13 L21,13 L21,21.0024554 C21,21.553384 20.5550537,22 20.0066023,22 L3.99339768,22 C3.44475929,22 3,21.5536886 3,21.0024554 L3,13 Z" id="Walls" stroke="#333333" stroke-width="2"></path>
+                <path d="M10,17.9979131 C10,16.8944962 10.8877296,16 12,16 L12,16 C13.1045695,16 14,16.8982606 14,17.9979131 L14,22 L10,22 L10,17.9979131 Z" id="Door" stroke="#333333" stroke-width="2"></path>
+                <path d="M2,6 C4,6 4,4 4,4 C4,4 4,6 6,6 C8,6 8,4 8,4 C8,4 8,6 10,6 C12,6 12,4 12,4 C12,4 12,6 14,6 C16,6 16,4 16,4 C16,4 16,6 18,6 C20,6 20,4 20,4 C20,4 20,6 22,6" id="Icing" stroke="#333333" stroke-linejoin="round"></path>
+                <path d="M2,8 C2,8 2,10 4,10 C6,10 6,8 6,8 C6,8 6,10 8,10 C10,10 10,8 10,8 C10,8 10,10 12,10 C14,10 14,8 14,8 C14,8 14,10 16,10 C18,10 18,8 18,8 C18,8 18,10 20,10 C22,10 22,8 22,8" id="Icing" stroke="#333333" stroke-linejoin="round"></path>
+                <path d="M17,16.9989566 C17,16.4472481 17.4438648,16 18,16 C18.5522847,16 19,16.4426603 19,16.9989566 L19,19 L17,19 L17,16.9989566 Z M5,16.9989566 C5,16.4472481 5.44386482,16 6,16 C6.55228475,16 7,16.4426603 7,16.9989566 L7,19 L5,19 L5,16.9989566 Z" id="Windows" fill="#333333"></path>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/application/assets/fonts/icons/gingerbread-man.svg b/application/assets/fonts/icons/gingerbread-man.svg
new file mode 100644
index 00000000..0aac607a
--- /dev/null
+++ b/application/assets/fonts/icons/gingerbread-man.svg
@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 44.1 (41455) - http://www.bohemiancoding.com/sketch -->
+    <title>gingerbread-man</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard-4" transform="translate(-620.000000, -555.000000)">
+            <g id="214" transform="translate(620.000000, 555.000000)">
+                <path d="M7.95983499,15.6183274 L7.95983499,15.035153 L3.93254166,13.956043 C2.60014248,13.5990277 1.8072212,12.2377584 2.16706714,10.894795 C2.52442167,9.56112978 3.90337814,8.77184771 5.22663688,9.12641382 L8.48690488,10 L8.99951255,10 C7.7853431,9.08777121 7,7.63559896 7,6 C7,3.23857625 9.23857625,1 12,1 C14.7614237,1 17,3.23857625 17,6 C17,7.63559896 16.2146569,9.08777121 15.0004875,10 L15.616473,10 L18.876741,9.12641382 C20.2091402,8.76939854 21.5764648,9.55183171 21.9363108,10.894795 C22.2936653,12.2284603 21.494095,13.6014768 20.1708362,13.956043 L16.040165,15.062853 L16.040165,15.6046067 L19.1987447,18.7631864 C20.1735208,19.7379625 20.1790833,21.3128242 19.195966,22.2959415 C18.2196552,23.2722523 16.6395816,23.2750911 15.6632108,22.2987203 L12.3644905,19 L11.6492302,19 L8.35050991,22.2987203 C7.37413915,23.2750911 5.79406548,23.2722523 4.81775475,22.2959415 C3.83463736,21.3128242 3.84019993,19.7379625 4.814976,18.7631864 L7.95983499,15.6183274 Z" id="Body" stroke="#333333" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
+                <path d="M10.5,7.5 C10.5,7.5 10.5555556,8.5 12,8.5 C13.4444444,8.5 13.5,7.5 13.5,7.5" id="Smile" stroke="#333333" stroke-linecap="round" stroke-linejoin="round"></path>
+                <path d="M10,6 C9.44771525,6 9,5.55228475 9,5 C9,4.44771525 9.44771525,4 10,4 C10.5522847,4 11,4.44771525 11,5 C11,5.55228475 10.5522847,6 10,6 Z M14,6 C13.4477153,6 13,5.55228475 13,5 C13,4.44771525 13.4477153,4 14,4 C14.5522847,4 15,4.44771525 15,5 C15,5.55228475 14.5522847,6 14,6 Z" id="Eyes" fill="#333333"></path>
+                <path d="M12,13 C11.4477153,13 11,12.5522847 11,12 C11,11.4477153 11.4477153,11 12,11 C12.5522847,11 13,11.4477153 13,12 C13,12.5522847 12.5522847,13 12,13 Z M12,17 C11.4477153,17 11,16.5522847 11,16 C11,15.4477153 11.4477153,15 12,15 C12.5522847,15 13,15.4477153 13,16 C13,16.5522847 12.5522847,17 12,17 Z" id="Buttons" fill="#333333"></path>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/application/assets/fonts/icons/glass-beer.svg b/application/assets/fonts/icons/glass-beer.svg
new file mode 100644
index 00000000..6b4889b9
--- /dev/null
+++ b/application/assets/fonts/icons/glass-beer.svg
@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 44.1 (41455) - http://www.bohemiancoding.com/sketch -->
+    <title>glass-beer</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard-4" transform="translate(-752.000000, -643.000000)" stroke="#333333" stroke-width="2">
+            <g id="257" transform="translate(752.000000, 643.000000)">
+                <path d="M17,5 L17,18.992516 C17,19.5489341 16.6575356,20.2780914 16.1969355,20.5784829 C16.1969355,20.5784829 15,22 10,22 C5,22 3.80306453,20.5784829 3.80306453,20.5784829 C3.35954423,20.2589956 3,19.5510798 3,18.992516 L3,5" id="Glass" stroke-linecap="round" stroke-linejoin="round"></path>
+                <ellipse id="Rim" cx="10" cy="5" rx="7" ry="2"></ellipse>
+                <path d="M6,10 L6,18 L6,10 Z M10,10 L10,18 L10,10 Z M14,10 L14,18 L14,10 Z" id="Indents" opacity="0.5" stroke-linecap="round" stroke-linejoin="round"></path>
+                <path d="M18,8 L20,8 C21.1045695,8 22,8.89185942 22,10.0095882 L22,16.0402874 C22,17.1501523 21.1122013,18.0498756 19.9998445,18.0498756 L17.9996891,18.0498756" id="Handle"></path>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/application/assets/fonts/icons/glass-cocktail.svg b/application/assets/fonts/icons/glass-cocktail.svg
new file mode 100644
index 00000000..4bb849cc
--- /dev/null
+++ b/application/assets/fonts/icons/glass-cocktail.svg
@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 44.1 (41455) - http://www.bohemiancoding.com/sketch -->
+    <title>glass-cocktail</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard-4" transform="translate(-356.000000, -291.000000)">
+            <g id="88" transform="translate(356.000000, 291.000000)">
+                <ellipse id="Rim" stroke="#333333" stroke-width="2" cx="12" cy="3" rx="9" ry="2"></ellipse>
+                <path d="M5.68083792,4.5 L2.6000061,4.5 L11,12 L11,21.0046024 C11,21.5543453 10.5621186,22.0625545 10.0119176,22.1411546 L4.50342274,22.9280825 C4.22539004,22.9678014 4,23.2319336 4,23.5 C4,23.7761424 4.22618103,24 4.4963932,24 L19.5036068,24 C19.7777572,24 20,23.7680664 20,23.5 C20,23.2238576 19.782828,22.9689754 19.4965773,22.9280825 L13.9880824,22.1411546 C13.4423796,22.0631971 13,21.5443356 13,21.0046024 L13,12 L21.3999939,4.5 L18.2861911,4.5 L13.4920651,8.69602724 C12.6593993,9.42481255 11.3160734,9.43083241 10.4796486,8.69896045 L5.68083792,4.5 Z" id="Body" fill="#333333"></path>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/application/assets/fonts/icons/glass-high-ball.svg b/application/assets/fonts/icons/glass-high-ball.svg
new file mode 100644
index 00000000..f5b356f1
--- /dev/null
+++ b/application/assets/fonts/icons/glass-high-ball.svg
@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 44.1 (41455) - http://www.bohemiancoding.com/sketch -->
+    <title>glass-high-ball</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard-4" transform="translate(-312.000000, -291.000000)">
+            <g id="87" transform="translate(312.000000, 291.000000)">
+                <path d="M5,3 L19,3 L19,20.991212 C19,22.6529197 17.6576211,24 15.9966488,24 L8.00335124,24 C6.34464615,24 5,22.6544098 5,20.991212 L5,3 Z M7,3 L7,19.0049107 C7,20.1073772 7.89525812,21 8.99961498,21 L15.000385,21 C16.1125667,21 17,20.1067681 17,19.0049107 L17,3 L7,3 Z" id="Body" fill="#333333"></path>
+                <ellipse id="Rim" stroke="#333333" stroke-width="2" cx="12" cy="3" rx="6" ry="2"></ellipse>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/application/assets/fonts/icons/glass-tumbler.svg b/application/assets/fonts/icons/glass-tumbler.svg
new file mode 100644
index 00000000..7feecc27
--- /dev/null
+++ b/application/assets/fonts/icons/glass-tumbler.svg
@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 44.1 (41455) - http://www.bohemiancoding.com/sketch -->
+    <title>glass-tumbler</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard-4" transform="translate(-268.000000, -291.000000)">
+            <g id="86" transform="translate(268.000000, 291.000000)">
+                <path d="M3,8 L21,8 L21,18.9966488 C21,20.6553538 19.6470745,22 18.0074602,22 L5.99253976,22 C4.33980569,22 3,20.6576211 3,18.9966488 L3,8 Z M5,8 L5,17.007983 C5,18.0998238 5.89805351,19 7.00585866,19 L16.9941413,19 C18.1029399,19 19,18.1081436 19,17.007983 L19,8 L5,8 Z" id="Body" fill="#333333"></path>
+                <ellipse id="Rim" stroke="#333333" stroke-width="2" cx="12" cy="8" rx="8" ry="2"></ellipse>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/application/assets/fonts/icons/glass-wine.svg b/application/assets/fonts/icons/glass-wine.svg
new file mode 100644
index 00000000..3a9ae364
--- /dev/null
+++ b/application/assets/fonts/icons/glass-wine.svg
@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 44.1 (41455) - http://www.bohemiancoding.com/sketch -->
+    <title>glass-wine</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard-4" transform="translate(-400.000000, -291.000000)">
+            <g id="89" transform="translate(400.000000, 291.000000)">
+                <ellipse id="Rim" stroke="#333333" stroke-width="2" cx="12" cy="3" rx="7" ry="2"></ellipse>
+                <path d="M11,13 L11,21.0024554 C11,21.553384 10.5562834,22.0887433 10.0121609,22.1975678 L6.49769878,22.9004602 C6.22282734,22.9554345 6,23.2319336 6,23.5 L6,23.5 C6,23.7761424 6.22900057,24 6.50034732,24 L17.4996527,24 C17.7759869,24 18,23.7680664 18,23.5 L18,23.5 C18,23.2238576 17.7851562,22.9570312 17.5023012,22.9004602 L13.9878391,22.1975678 C13.4422706,22.0884541 13,21.5536886 13,21.0024554 L13,13 L11,13 Z" id="Stem" fill="#333333"></path>
+                <path d="M5,3 C5,7 4.99999996,13 12,13 C19,13 19,7 19,3" id="Body" stroke="#333333" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/application/assets/fonts/icons/glasses.svg b/application/assets/fonts/icons/glasses.svg
new file mode 100644
index 00000000..cb6048f4
--- /dev/null
+++ b/application/assets/fonts/icons/glasses.svg
@@ -0,0 +1,19 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 44.1 (41455) - http://www.bohemiancoding.com/sketch -->
+    <title>glasses</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard-4" transform="translate(-664.000000, -863.000000)">
+            <g id="355" transform="translate(664.000000, 863.000000)">
+                <path d="M14.1830584,11.9785957 C14.0165308,10.8858475 14.7682399,10 15.8796349,10 L19.8834322,10 C20.9869531,10 21.9405145,10.8896751 21.9607896,11.9939156 C21.9607896,11.9939156 22.3815335,15 20.8815335,16 C19.3815335,17 17.3815335,17 15.8815335,16 C14.3815335,15 14.1830584,11.9785957 14.1830584,11.9785957 Z" id="Right-Lens" stroke="#333333" stroke-width="2"></path>
+                <path d="M2.02308527,11.9785957 C1.85655766,10.8858475 2.60826672,10 3.71966172,10 L7.72345901,10 C8.82697992,10 9.78054131,10.8896751 9.80081642,11.9939156 C9.80081642,11.9939156 10.2215604,15 8.72156036,16 C7.22156036,17 5.22156036,17 3.72156036,16 C2.22156036,15 2.02308527,11.9785957 2.02308527,11.9785957 Z" id="Left-Lens" stroke="#333333" stroke-width="2" transform="translate(5.927579, 13.375000) scale(-1, 1) translate(-5.927579, -13.375000) "></path>
+                <path d="M10,11 C10,11 11,10.5 12,10.5 C13,10.5 14,11 14,11" id="Bridge" stroke="#333333" stroke-width="2"></path>
+                <path d="M22,10 L23,10 L17.7721119,5.64342655 C17.3456863,5.28807188 16.6875,5.3125 16.2892435,5.71075654 L15,7" id="Right-Arm" stroke="#333333" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
+                <path d="M8,10 L9,10 L3.77211186,5.64342655 C3.34568626,5.28807188 2.6875,5.3125 2.28924346,5.71075654 L1,7" id="Left-Arm" stroke="#333333" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" transform="translate(5.000000, 7.696720) scale(-1, 1) translate(-5.000000, -7.696720) "></path>
+                <path d="M19.5,12 L16.5,14 L16.2441411,12.9765644 C16.1093057,12.4372228 16.4575639,12 16.9935975,12 L19.5,12 Z M7.30496255,12 L4.30496255,14 L4.04910365,12.9765644 C3.91426824,12.4372228 4.26252642,12 4.79856005,12 L7.30496255,12 Z" id="Highlight" fill="#333333" opacity="0.200000003"></path>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/application/assets/fonts/icons/globe-2.svg b/application/assets/fonts/icons/globe-2.svg
new file mode 100644
index 00000000..d2ae2610
--- /dev/null
+++ b/application/assets/fonts/icons/globe-2.svg
@@ -0,0 +1,22 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 44.1 (41455) - http://www.bohemiancoding.com/sketch -->
+    <title>globe-2</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard-4" transform="translate(-268.000000, -687.000000)" stroke="#333333">
+            <g id="266" transform="translate(265.000000, 686.000000)">
+                <path d="M15.7033666,3.125 C9.90437676,3.125 5.20336663,7.82601013 5.20336663,13.625 C5.20336663,19.4239899 9.90437676,24.125 15.7033666,24.125 L15.7033666,24.125" id="holder" stroke-linecap="round" transform="translate(10.453367, 13.625000) rotate(-30.000000) translate(-10.453367, -13.625000) "></path>
+                <polyline id="stand" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" points="15 22 15 24 12 24 18 24"></polyline>
+                <g id="globe" transform="translate(15.298198, 11.401194) rotate(-30.000000) translate(-15.298198, -11.401194) translate(7.298198, 2.901194)" stroke-width="2">
+                    <circle id="Circle" cx="8" cy="8" r="8"></circle>
+                    <path d="M8,3.01980663e-14 C8,3.01980663e-14 4,3 4,8 C4,13 8,16.0078106 8,16.0078106" id="1"></path>
+                    <path d="M8,-7.10542736e-15 L8,8.0039053 L8,16.0078106" id="2"></path>
+                    <path d="M12,-7.10542736e-15 C12,-7.10542736e-15 8,3 8,8 C8,13 12,16.0078106 12,16.0078106" id="3" transform="translate(10.000000, 8.003905) scale(-1, 1) translate(-10.000000, -8.003905) "></path>
+                    <path d="M-5.19584376e-14,8 L16,8" id="Mid"></path>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/application/assets/fonts/icons/globe.svg b/application/assets/fonts/icons/globe.svg
new file mode 100644
index 00000000..dc98f60a
--- /dev/null
+++ b/application/assets/fonts/icons/globe.svg
@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 44.1 (41455) - http://www.bohemiancoding.com/sketch -->
+    <title>globe</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard-4" transform="translate(-224.000000, -687.000000)" stroke="#333333" stroke-width="2">
+            <g id="265" transform="translate(224.000000, 687.000000)">
+                <circle id="Circle" cx="12" cy="12" r="10"></circle>
+                <path d="M12,2 C12,2 17,4 17,12.0031245 C17,20.006249 12,22.006249 12,22.006249" id="3"></path>
+                <path d="M12,2 L12,22.006249" id="2"></path>
+                <path d="M7,2 C7,2 12,4 12,12.0031245 C12,20.006249 7,22.006249 7,22.006249" id="1" transform="translate(9.500000, 12.003125) scale(-1, 1) translate(-9.500000, -12.003125) "></path>
+                <path d="M2,12 L22,12" id="Mid"></path>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/application/assets/fonts/icons/graduation-cap.svg b/application/assets/fonts/icons/graduation-cap.svg
new file mode 100644
index 00000000..ec4dbeb7
--- /dev/null
+++ b/application/assets/fonts/icons/graduation-cap.svg
@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 44.1 (41455) - http://www.bohemiancoding.com/sketch -->
+    <title>graduation-cap</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard-4" transform="translate(-796.000000, -511.000000)">
+            <g id="198" transform="translate(796.000000, 511.000000)">
+                <path d="M1.79652125,10.8982606 C0.804329959,10.402165 0.805987179,9.59700641 1.79652125,9.10173938 L11.0980496,4.45097518 C11.5961831,4.20190847 12.3992615,4.19963074 12.9019504,4.45097518 L22.2034788,9.10173938 C23.19567,9.59783502 23.1940128,10.4029936 22.2034788,10.8982606 L12.9019504,15.5490248 C12.4038169,15.7980915 11.6007385,15.8003693 11.0980496,15.5490248 L1.79652125,10.8982606 Z" id="Top" stroke="#333333" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
+                <path d="M6,12.5 L6,17.9986199 C6,18.5516669 6.42708635,19.1307325 6.96172553,19.2785558 C6.96172553,19.2785558 9,20 12,20 C15,20 17.0583801,19.2732544 17.0583801,19.2732544 C17.5784224,19.1223402 18,18.5532287 18,17.9986199 L18,12.5" id="Rim" stroke="#333333" stroke-width="2"></path>
+                <ellipse id="Centre" fill="#333333" cx="12" cy="10" rx="2" ry="1"></ellipse>
+                <polyline id="Ribbon" stroke="#333333" stroke-linejoin="round" points="12 10 21.5 11 21.5 16"></polyline>
+                <polygon id="Tassel" stroke="#333333" stroke-width="2" stroke-linejoin="round" points="21.5 16 21 18 22 18"></polygon>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/application/assets/fonts/icons/graph.svg b/application/assets/fonts/icons/graph.svg
new file mode 100644
index 00000000..267fdb77
--- /dev/null
+++ b/application/assets/fonts/icons/graph.svg
@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 44.1 (41455) - http://www.bohemiancoding.com/sketch -->
+    <title>graph</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
+        <g id="Artboard-4" transform="translate(-444.000000, -203.000000)" stroke-width="2" stroke="#333333">
+            <g id="50" transform="translate(444.000000, 203.000000)">
+                <polyline id="Axis" points="3 3 3 21.006249 21.0246733 21.006249"></polyline>
+                <polyline id="Line" points="6 18 11 12 14 13 19 7"></polyline>
+                <polygon id="Head" points="20 9 20 6 17 6"></polygon>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/application/assets/fonts/icons/gravestone.svg b/application/assets/fonts/icons/gravestone.svg
new file mode 100644
index 00000000..2095b463
--- /dev/null
+++ b/application/assets/fonts/icons/gravestone.svg
@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 44.1 (41455) - http://www.bohemiancoding.com/sketch -->
+    <title>gravestone</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard-4" transform="translate(-488.000000, -467.000000)">
+            <g id="171" transform="translate(488.000000, 467.000000)">
+                <path d="M4,21 L2.88305092,10.9474583 L2.88305092,10.9474583 C2.39535536,6.55819827 5.56375708,2.58073446 9.95248561,2.06441346 L10.0519425,2.05271265 C14.9938182,1.47131551 19.4011229,5.01122888 19.8947051,9.94705057 L21,21" id="Gravestone" stroke="#333333" stroke-width="2" stroke-linejoin="round"></path>
+                <polyline id="Ground" stroke="#333333" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" points="2 21.5 3.5 22 5.5 21.25 8 22 11 21.25 13.5 22 15 21 16.5 22 20 21.25 22 22"></polyline>
+                <path d="M6.74453807,15.0419407 L6.74453807,11.7299407 C6.74453807,11.4719407 6.94853807,11.2679407 7.20653807,11.2679407 L8.66453807,11.2679407 C9.19853807,11.2679407 9.61253807,11.4179407 9.88853807,11.6939407 C10.1225381,11.9279407 10.2485381,12.2579407 10.2485381,12.6539407 L10.2485381,12.6659407 C10.2485381,13.3259407 9.91853807,13.7339407 9.40853807,13.9439407 L10.0505381,14.7239407 C10.1405381,14.8379407 10.2005381,14.9339407 10.2005381,15.0779407 C10.2005381,15.3359407 9.98453807,15.5039407 9.76253807,15.5039407 C9.55253807,15.5039407 9.41453807,15.4019407 9.30653807,15.2639407 L8.40653807,14.1239407 L7.66853807,14.1239407 L7.66853807,15.0419407 C7.66853807,15.2999407 7.46453807,15.5039407 7.20653807,15.5039407 C6.94853807,15.5039407 6.74453807,15.2999407 6.74453807,15.0419407 Z M7.66853807,13.3079407 L8.60453807,13.3079407 C9.05453807,13.3079407 9.31253807,13.0679407 9.31253807,12.7139407 L9.31253807,12.7019407 C9.31253807,12.3059407 9.03653807,12.1019407 8.58653807,12.1019407 L7.66853807,12.1019407 L7.66853807,13.3079407 Z M11.1245381,15.0419407 C11.1245381,15.2999407 11.3285381,15.5039407 11.5865381,15.5039407 C11.8445381,15.5039407 12.0485381,15.2999407 12.0485381,15.0419407 L12.0485381,11.6939407 C12.0485381,11.4359407 11.8445381,11.2319407 11.5865381,11.2319407 C11.3285381,11.2319407 11.1245381,11.4359407 11.1245381,11.6939407 L11.1245381,15.0419407 Z M13.0985381,15.0419407 L13.0985381,11.7299407 C13.0985381,11.4719407 13.3025381,11.2679407 13.5605381,11.2679407 L14.8145381,11.2679407 C15.8165381,11.2679407 16.4225381,11.8619407 16.4225381,12.7199407 L16.4225381,12.7319407 C16.4225381,13.7039407 15.6665381,14.2079407 14.7245381,14.2079407 L14.0225381,14.2079407 L14.0225381,15.0419407 C14.0225381,15.2999407 13.8185381,15.5039407 13.5605381,15.5039407 C13.3025381,15.5039407 13.0985381,15.2999407 13.0985381,15.0419407 Z M14.0225381,13.3859407 L14.7545381,13.3859407 C15.2165381,13.3859407 15.4865381,13.1099407 15.4865381,12.7499407 L15.4865381,12.7379407 C15.4865381,12.3239407 15.1985381,12.1019407 14.7365381,12.1019407 L14.0225381,12.1019407 L14.0225381,13.3859407 Z" id="RIP" fill="#333333" opacity="0.75" transform="translate(11.583538, 13.367941) rotate(-5.000000) translate(-11.583538, -13.367941) "></path>
+                <polyline id="Crack" stroke="#333333" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" points="13 2.5 12 4.5 13.5 5.5 12 8"></polyline>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/application/assets/fonts/icons/grid.svg b/application/assets/fonts/icons/grid.svg
new file mode 100644
index 00000000..352bdac7
--- /dev/null
+++ b/application/assets/fonts/icons/grid.svg
@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 44.1 (41455) - http://www.bohemiancoding.com/sketch -->
+    <title>grid</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard-4" transform="translate(-752.000000, -203.000000)">
+            <g id="57" transform="translate(752.000000, 203.000000)">
+                <rect id="Box" stroke="#333333" stroke-width="2" x="3" y="3" width="18" height="18" rx="1"></rect>
+                <path d="M6,6.99980749 C6,6.44762906 6.44371665,6 6.99980749,6 L10.0001925,6 C10.5523709,6 11,6.44371665 11,6.99980749 L11,10.0001925 C11,10.5523709 10.5562834,11 10.0001925,11 L6.99980749,11 C6.44762906,11 6,10.5562834 6,10.0001925 L6,6.99980749 Z M13,6.99980749 C13,6.44762906 13.4437166,6 13.9998075,6 L17.0001925,6 C17.5523709,6 18,6.44371665 18,6.99980749 L18,10.0001925 C18,10.5523709 17.5562834,11 17.0001925,11 L13.9998075,11 C13.4476291,11 13,10.5562834 13,10.0001925 L13,6.99980749 Z M13,13.9998075 C13,13.4476291 13.4437166,13 13.9998075,13 L17.0001925,13 C17.5523709,13 18,13.4437166 18,13.9998075 L18,17.0001925 C18,17.5523709 17.5562834,18 17.0001925,18 L13.9998075,18 C13.4476291,18 13,17.5562834 13,17.0001925 L13,13.9998075 Z M6,13.9998075 C6,13.4476291 6.44371665,13 6.99980749,13 L10.0001925,13 C10.5523709,13 11,13.4437166 11,13.9998075 L11,17.0001925 C11,17.5523709 10.5562834,18 10.0001925,18 L6.99980749,18 C6.44762906,18 6,17.5562834 6,17.0001925 L6,13.9998075 Z" id="Items" fill="#333333"></path>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/application/assets/fonts/icons/hammer.svg b/application/assets/fonts/icons/hammer.svg
new file mode 100644
index 00000000..ff42837e
--- /dev/null
+++ b/application/assets/fonts/icons/hammer.svg
@@ -0,0 +1,20 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 44.1 (41455) - http://www.bohemiancoding.com/sketch -->
+    <title>hammer</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard-4" transform="translate(-48.000000, -643.000000)">
+            <g id="241" transform="translate(43.000000, 639.000000)">
+                <g id="hammer" transform="translate(15.702796, 15.502784) rotate(-315.000000) translate(-15.702796, -15.502784) translate(7.202796, 2.502784)">
+                    <g id="Group-6" transform="translate(1.000000, 2.000000)">
+                        <path d="M6.5,14 L9.5,14 L9.95023012,23.0046024 C9.97771727,23.5543453 9.55664682,24 8.9906311,24 L7.0093689,24 C6.45190985,24 6.02278322,23.5443356 6.04976988,23.0046024 L6.5,14 Z" id="Rectangle-185" stroke="#333333" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
+                        <rect id="Rectangle-186" fill="#333333" x="7" y="8" width="2" height="6"></rect>
+                        <path d="M8,8 C8,6 6.5,5 4.5,5 C2.5,5 0.5,7.5 0.5,7.5 C0.5,7.5 0.5,3 6.5,1 C7.99883632,0.500387892 10,1 10,1 C10,1 10.5,2 11,2 C11.5,2 12,1 12,1 L15,1 L15,6 L12,6 C12,6 12,5 11,5 C10,5 8,5 8,8 Z" id="Path-176" stroke="#333333" stroke-width="2" stroke-linejoin="round"></path>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/application/assets/fonts/icons/hashtag-alt.svg b/application/assets/fonts/icons/hashtag-alt.svg
new file mode 100644
index 00000000..77a3a024
--- /dev/null
+++ b/application/assets/fonts/icons/hashtag-alt.svg
@@ -0,0 +1,19 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 44.1 (41455) - http://www.bohemiancoding.com/sketch -->
+    <title>hashtag-alt</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round">
+        <g id="Artboard-4" transform="translate(-488.000000, -1134.000000)" stroke="#333333" stroke-width="2">
+            <g id="Extras" transform="translate(48.000000, 1046.000000)">
+                <g id="hashtag" transform="translate(440.000000, 88.000000)">
+                    <path d="M11,3 L7,21" id="Path-294"></path>
+                    <path d="M17,3 L13,21" id="Path-294"></path>
+                    <path d="M4,15 L18.5,15" id="Path-295"></path>
+                    <path d="M5.5,9 L20,9" id="Path-295"></path>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/application/assets/fonts/icons/hashtag.svg b/application/assets/fonts/icons/hashtag.svg
new file mode 100644
index 00000000..8aa53313
--- /dev/null
+++ b/application/assets/fonts/icons/hashtag.svg
@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 44.1 (41455) - http://www.bohemiancoding.com/sketch -->
+    <title>hashtag</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard-4" transform="translate(-136.000000, -907.000000)" stroke="#333333" stroke-width="2" fill-rule="nonzero">
+            <g id="363" transform="translate(136.000000, 907.000000)">
+                <path d="M13.6532122,11 L14.8581385,11 L13.8752663,9.81571146 L13.6532122,11 Z M13.2782122,13 L13.1252663,13.8157115 L14.1081385,13 L13.2782122,13 Z M11.3467878,13 L10.1418615,13 L11.1247337,14.1842885 L11.3467878,13 Z M11.7217878,11 L11.8747337,10.1842885 L10.8918615,11 L11.7217878,11 Z M11.7217878,11 L13.6532122,11 L13.2782122,13 L11.3467878,13 L11.7217878,11 Z M12.4717878,7 L14.4033206,7 L15.0476259,3.56613908 C15.2872406,2.48787263 16.3555945,1.80801111 17.4338609,2.04762588 C18.5121274,2.28724065 19.1919889,3.35559446 18.9590592,4.40121899 L18.4717878,7 L20,7 C21.1045695,7 22,7.8954305 22,9 C22,10.1045695 21.1045695,11 20,11 L17.7217878,11 L17.3467878,13 L18.5,13 C19.6045695,13 20.5,13.8954305 20.5,15 C20.5,16.1045695 19.6045695,17 18.5,17 L16.5966794,17 L15.9523741,20.4338609 C15.7127594,21.5121274 14.6444055,22.1919889 13.5661391,21.9523741 C12.4878726,21.7127594 11.8080111,20.6444055 12.0409408,19.598781 L12.5282122,17 L10.5966794,17 L9.95237412,20.4338609 C9.71275935,21.5121274 8.64440554,22.1919889 7.56613908,21.9523741 C6.48787263,21.7127594 5.80801111,20.6444055 6.04094075,19.598781 L6.52821219,17 L5,17 C3.8954305,17 3,16.1045695 3,15 C3,13.8954305 3.8954305,13 5,13 L7.27821219,13 L7.65321219,11 L6.5,11 C5.3954305,11 4.5,10.1045695 4.5,9 C4.5,7.8954305 5.3954305,7 6.5,7 L8.4033206,7 L9.04762588,3.56613908 C9.28724065,2.48787263 10.3555945,1.80801111 11.4338609,2.04762588 C12.5121274,2.28724065 13.1919889,3.35559446 12.9590592,4.40121899 L12.4717878,7 Z" id="Combined-Shape"></path>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/application/assets/fonts/icons/headphones.svg b/application/assets/fonts/icons/headphones.svg
new file mode 100644
index 00000000..ec15d0ef
--- /dev/null
+++ b/application/assets/fonts/icons/headphones.svg
@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 44.1 (41455) - http://www.bohemiancoding.com/sketch -->
+    <title>headphones</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard-4" transform="translate(-180.000000, -247.000000)">
+            <g id="64" transform="translate(180.000000, 247.000000)">
+                <rect id="Right-Ear" fill="#333333" x="15" y="13" width="4" height="9" rx="2"></rect>
+                <rect id="Left-Ear" fill="#333333" x="5" y="13" width="4" height="9" rx="2"></rect>
+                <path d="M21,18 L21,13 C21,7 17,3 12,3 C7,3 3.00000009,7 3,13 C3,13.1247005 3.00000009,18 3.00000009,18" id="Arm" stroke="#333333" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/application/assets/fonts/icons/health.svg b/application/assets/fonts/icons/health.svg
new file mode 100644
index 00000000..e816d25c
--- /dev/null
+++ b/application/assets/fonts/icons/health.svg
@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 44.1 (41455) - http://www.bohemiancoding.com/sketch -->
+    <title>health</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard-4" transform="translate(-180.000000, -467.000000)">
+            <g id="164" transform="translate(180.000000, 467.000000)">
+                <rect id="Frame" stroke="#333333" stroke-width="2" x="3" y="3" width="18" height="18" rx="2"></rect>
+                <path d="M14,10 L14,7.00247329 C14,6.45576096 13.5480902,6 12.9906311,6 L11.0093689,6 C10.4433532,6 10,6.44882258 10,7.00247329 L10,10 L7.00247329,10 C6.45576096,10 6,10.4519098 6,11.0093689 L6,12.9906311 C6,13.5566468 6.44882258,14 7.00247329,14 L10,14 L10,16.9975267 C10,17.544239 10.4519098,18 11.0093689,18 L12.9906311,18 C13.5566468,18 14,17.5511774 14,16.9975267 L14,14 L16.9975267,14 C17.544239,14 18,13.5480902 18,12.9906311 L18,11.0093689 C18,10.4433532 17.5511774,10 16.9975267,10 L14,10 Z" id="Cross" fill="#333333"></path>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/application/assets/fonts/icons/heart-filled.svg b/application/assets/fonts/icons/heart-filled.svg
new file mode 100644
index 00000000..62457e59
--- /dev/null
+++ b/application/assets/fonts/icons/heart-filled.svg
@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 44.1 (41455) - http://www.bohemiancoding.com/sketch -->
+    <title>heart-filled</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard-4" transform="translate(-48.000000, -1046.000000)" fill-rule="nonzero" fill="#333333">
+            <g id="Extras" transform="translate(48.000000, 1046.000000)">
+                <g id="heart">
+                    <path d="M12.0174466,21 L20.9041801,11.3556763 C22.6291961,9.13778099 22.2795957,5.90145416 20.1233257,4.12713796 C17.9670557,2.35282175 14.8206518,2.71241362 13.0956358,4.93030888 L12.0174465,6.5 L10.9043642,4.93030888 C9.17934824,2.71241362 6.0329443,2.35282175 3.87667432,4.12713796 C1.72040435,5.90145416 1.37080391,9.13778099 3.09581989,11.3556763 L12.0174466,21 Z"></path>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/application/assets/fonts/icons/heart-tick.svg b/application/assets/fonts/icons/heart-tick.svg
new file mode 100644
index 00000000..4b7d79d5
--- /dev/null
+++ b/application/assets/fonts/icons/heart-tick.svg
@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 44.1 (41455) - http://www.bohemiancoding.com/sketch -->
+    <title>heart-tick</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linejoin="round">
+        <g id="Artboard-4" transform="translate(-224.000000, -907.000000)" stroke="#333333" stroke-width="2">
+            <g id="365" transform="translate(224.000000, 907.000000)">
+                <path d="M12.0174466,21 L20.9041801,11.3556763 C22.6291961,9.13778099 22.2795957,5.90145416 20.1233257,4.12713796 C17.9670557,2.35282175 14.8206518,2.71241362 13.0956358,4.93030888 L12.0174465,6.5 L10.9043642,4.93030888 C9.17934824,2.71241362 6.0329443,2.35282175 3.87667432,4.12713796 C1.72040435,5.90145416 1.37080391,9.13778099 3.09581989,11.3556763 L12.0174466,21 Z" id="Heart" fill-rule="nonzero"></path>
+                <polyline id="Tick" stroke-linecap="round" points="17 8 12 13 9.5 10.5"></polyline>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/application/assets/fonts/icons/heartbeat.svg b/application/assets/fonts/icons/heartbeat.svg
new file mode 100644
index 00000000..7e52251a
--- /dev/null
+++ b/application/assets/fonts/icons/heartbeat.svg
@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 44.1 (41455) - http://www.bohemiancoding.com/sketch -->
+    <title>heartbeat</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard-4" transform="translate(-180.000000, -819.000000)">
+            <g id="324" transform="translate(180.000000, 819.000000)">
+                <path d="M2,15 C0.8954305,15 0,14.1045695 0,13 C0,11.8954305 0.8954305,11 2,11 C3.1045695,11 4,11.8954305 4,13 C4,14.1045695 3.1045695,15 2,15 Z M22,15 C20.8954305,15 20,14.1045695 20,13 C20,11.8954305 20.8954305,11 22,11 C23.1045695,11 24,11.8954305 24,13 C24,14.1045695 23.1045695,15 22,15 Z" id="Ends" fill="#333333"></path>
+                <polyline id="Line" stroke="#333333" stroke-width="2" stroke-linejoin="round" points="2 13 7 13 10 4 14 18 17 13 22 13"></polyline>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/application/assets/fonts/icons/help.svg b/application/assets/fonts/icons/help.svg
new file mode 100644
index 00000000..44745a1f
--- /dev/null
+++ b/application/assets/fonts/icons/help.svg
@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 44.1 (41455) - http://www.bohemiancoding.com/sketch -->
+    <title>help</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard-4" transform="translate(-400.000000, -247.000000)">
+            <g id="69" transform="translate(400.000000, 247.000000)">
+                <circle id="Circle" stroke="#333333" stroke-width="2" cx="12" cy="12" r="10"></circle>
+                <path d="M12.016,14.544 C12.384,14.544 12.64,14.256 12.704,13.904 L12.768,13.168 C14.544,12.864 16,11.952 16,9.936 L16,9.904 C16,7.904 14.48,6.656 12.24,6.656 C10.768,6.656 9.696,7.184 8.848,7.984 C8.624,8.176 8.528,8.432 8.528,8.672 C8.528,9.152 8.928,9.552 9.424,9.552 C9.648,9.552 9.856,9.456 10.016,9.328 C10.656,8.752 11.344,8.448 12.192,8.448 C13.344,8.448 14.032,9.072 14.032,9.968 L14.032,10 C14.032,11.008 13.2,11.584 11.696,11.728 C11.264,11.776 11.008,12.096 11.072,12.528 L11.232,13.904 C11.28,14.272 11.552,14.544 11.92,14.544 L12.016,14.544 Z M10.784,16.816 L10.784,16.976 C10.784,17.6 11.264,18.08 11.92,18.08 C12.576,18.08 13.056,17.6 13.056,16.976 L13.056,16.816 C13.056,16.192 12.576,15.712 11.92,15.712 C11.264,15.712 10.784,16.192 10.784,16.816 Z" id="?" fill="#333333"></path>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/application/assets/fonts/icons/holdall.svg b/application/assets/fonts/icons/holdall.svg
new file mode 100644
index 00000000..6deda322
--- /dev/null
+++ b/application/assets/fonts/icons/holdall.svg
@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 44.1 (41455) - http://www.bohemiancoding.com/sketch -->
+    <title>holdall</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard-4" transform="translate(-224.000000, -379.000000)">
+            <g id="124" transform="translate(224.000000, 379.000000)">
+                <path d="M1,11.999615 C1,10.3458159 2.34308897,9 3.99079514,9 L20.0092049,9 C21.6640573,9 23,10.3382343 23,11.999615 L23,18.000385 C23,19.6541841 21.656911,21 20.0092049,21 L3.99079514,21 C2.33594272,21 1,19.6617657 1,18.000385 L1,11.999615 Z" id="Bag" stroke="#333333" stroke-width="2"></path>
+                <path d="M16,12 L16,7 C16,4.790861 14.209139,3 12,3 C9.790861,3 8,4.790861 8,7 L8,12" id="Handle" stroke="#333333" stroke-width="2" stroke-linecap="round"></path>
+                <path d="M18,9 L20,9 L20,21 L18,21 L18,9 Z M4,9 L6,9 L6,21 L4,21 L4,9 Z" id="Straps" fill="#333333"></path>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/application/assets/fonts/icons/holly.svg b/application/assets/fonts/icons/holly.svg
new file mode 100644
index 00000000..2e48d299
--- /dev/null
+++ b/application/assets/fonts/icons/holly.svg
@@ -0,0 +1,22 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 44.1 (41455) - http://www.bohemiancoding.com/sketch -->
+    <title>holly</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard-4" transform="translate(-752.000000, -555.000000)" stroke="#333333" stroke-width="2">
+            <g id="217" transform="translate(751.000000, 555.000000)">
+                <g id="Left-Leaf" transform="translate(7.779591, 14.764475) rotate(-345.000000) translate(-7.779591, -14.764475) translate(2.779591, 6.264475)" stroke-linecap="round">
+                    <path d="M5,1.86517468e-14 C5,3 -8.8817842e-15,5 -8.8817842e-15,5 C-8.8817842e-15,5 2,6.75 2,8.5 C2,10.25 -8.8817842e-15,12 -8.8817842e-15,12 C-8.8817842e-15,12 5,15 5,17 C5,15 10,12 10,12 C10,12 8,10.1624373 8,8.5 C8,6.6624373 10,5 10,5 C10,5 5,3 5,1.86517468e-14 Z" id="Path-161" stroke-linejoin="round"></path>
+                    <path d="M5,9 L5,1" id="Path-162"></path>
+                </g>
+                <g id="Right-Leaf" transform="translate(18.279591, 14.764475) scale(-1, 1) rotate(-345.000000) translate(-18.279591, -14.764475) translate(13.279591, 6.264475)" stroke-linecap="round">
+                    <path d="M5,1.77635684e-14 C5,3 -1.0658141e-14,5 -1.0658141e-14,5 C-1.0658141e-14,5 2,6.75 2,8.5 C2,10.25 -1.0658141e-14,12 -1.0658141e-14,12 C-1.0658141e-14,12 5,15 5,17 C5,15 10,12 10,12 C10,12 8,10.1624373 8,8.5 C8,6.6624373 10,5 10,5 C10,5 5,3 5,1.77635684e-14 Z" id="Path-161" stroke-linejoin="round"></path>
+                    <path d="M5,9 L5,1" id="Path-162"></path>
+                </g>
+                <path d="M10.5,6 C9.11928813,6 8,4.88071187 8,3.5 C8,2.11928813 9.11928813,1 10.5,1 C11.8807119,1 13,2.11928813 13,3.5 C13,4.88071187 11.8807119,6 10.5,6 Z M15.5,6 C14.1192881,6 13,4.88071187 13,3.5 C13,2.11928813 14.1192881,1 15.5,1 C16.8807119,1 18,2.11928813 18,3.5 C18,4.88071187 16.8807119,6 15.5,6 Z" id="Berries"></path>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/application/assets/fonts/icons/home.svg b/application/assets/fonts/icons/home.svg
new file mode 100644
index 00000000..1997844d
--- /dev/null
+++ b/application/assets/fonts/icons/home.svg
@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 44.1 (41455) - http://www.bohemiancoding.com/sketch -->
+    <title>home</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
+        <g id="Artboard-4" transform="translate(-620.000000, -159.000000)" stroke="#333333" stroke-width="2">
+            <g id="34" transform="translate(620.000000, 159.000000)">
+                <path d="M1,11 L12,2 C12,2 22.9999989,11.0000005 23,11" id="Roof"></path>
+                <path d="M3,10 C3,10 3,10.4453982 3,10.9968336 L3,20.0170446 C3,20.5675806 3.43788135,21.0138782 4.00292933,21.0138781 L8.99707067,21.0138779 C9.55097324,21.0138779 10,20.5751284 10,20.0089602 L10,15.0049177 C10,14.449917 10.4433532,14 11.0093689,14 L12.9906311,14 C13.5480902,14 14,14.4387495 14,15.0049177 L14,20.0089602 C14,20.5639609 14.4378817,21.0138779 15.0029302,21.0138779 L19.9970758,21.0138781 C20.5509789,21.0138782 21.000006,20.56848 21.000006,20.0170446 L21.0000057,10" id="Walls"></path>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/application/assets/fonts/icons/homekit.svg b/application/assets/fonts/icons/homekit.svg
new file mode 100644
index 00000000..0e1c81ee
--- /dev/null
+++ b/application/assets/fonts/icons/homekit.svg
@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 44.1 (41455) - http://www.bohemiancoding.com/sketch -->
+    <title>homekit</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard-4" transform="translate(-48.000000, -907.000000)" stroke="#333333" stroke-width="2">
+            <g id="361" transform="translate(48.000000, 907.000000)">
+                <path d="M2.69498562,11.0040174 L4,10.9864409 L4,20.000385 C4,20.5574808 4.44271433,21 4.99508929,21 L19.0049107,21 C19.5552337,21 20,20.5559323 20,20.0084645 L20,11.0404053 L21.4271769,11.0404053 L20,9.73355354 L20,6 L19,6 L19,8.74437789 L12.1122564,2.90703363 C12.0708145,2.87191177 11.9508167,2.87313979 11.908132,2.91063658 L2.69498562,11.0040174 Z" id="Home"></path>
+                <path d="M12,5.31707778 L6,10.4599349 L6,19 L18,19 L18,10.4599349 L12,5.31707778 Z" id="1" stroke-opacity="0.49756567"></path>
+                <path d="M12,7.9501674 L8,11.3798793 L8,17 L16,17 L16,11.3798793 L12,7.9501674 Z" id="2" stroke-opacity="0.248103487"></path>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/application/assets/fonts/icons/ice-pop.svg b/application/assets/fonts/icons/ice-pop.svg
new file mode 100644
index 00000000..7637ea57
--- /dev/null
+++ b/application/assets/fonts/icons/ice-pop.svg
@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 44.1 (41455) - http://www.bohemiancoding.com/sketch -->
+    <title>ice-pop</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard-4" transform="translate(-356.000000, -203.000000)" stroke="#333333">
+            <g id="48" transform="translate(356.000000, 203.000000)">
+                <path d="M7,7.50027192 C7,4.46255562 9.46861471,2 12.5,2 L12.5,2 C15.5375661,2 18,4.46014829 18,7.50027192 L18,15.0081158 C18,16.1082031 17.0998238,17 16.007983,17 L8.99201702,17 C7.8918564,17 7,16.1066027 7,15.0081158 L7,7.50027192 Z" id="Lolly" stroke-width="2"></path>
+                <path d="M11,17 L14,17 L14,20.5 L14,20.5 C14,21.3284271 13.3284271,22 12.5,22 L12.5,22 L12.5,22 C11.6715729,22 11,21.3284271 11,20.5 L11,17 Z" id="Stick" stroke-width="2"></path>
+                <path d="M12.5,4.5 C12.5,4.5 11.4174805,4.38916016 10.4492188,5.36328125 C9.48095703,6.33740234 9.5,7.5 9.5,7.5" id="Highlight" stroke-linecap="round" stroke-linejoin="round"></path>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/application/assets/fonts/icons/ice-skate.svg b/application/assets/fonts/icons/ice-skate.svg
new file mode 100644
index 00000000..79efc87f
--- /dev/null
+++ b/application/assets/fonts/icons/ice-skate.svg
@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 44.1 (41455) - http://www.bohemiancoding.com/sketch -->
+    <title>ice-skate</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard-4" transform="translate(-708.000000, -555.000000)">
+            <g id="216" transform="translate(708.000000, 555.000000)">
+                <path d="M23.5,21.5 L4.5,21.5 C2.29128628,21.5 0.5,20.2046438 0.5,18 C0.5,15.790861 2.29323768,14.5 4.5,14.5" id="Skate" stroke="#333333" stroke-linecap="round" stroke-linejoin="round"></path>
+                <rect id="Trim" stroke="#333333" stroke-width="2" x="14" y="3" width="9" height="3" rx="1"></rect>
+                <path d="M7,14.5 C7,12.5670034 8.56147182,11 10.5089165,11 L13.0018986,11 C14.1054196,11 15,10.1061002 15,8.9951185 L15,6 L22,6 L22,15.9914698 C22,17.1007504 21.1066027,18 20.0081158,18 L10.4979027,18 C8.56606439,18 7,16.4290634 7,14.5 L7,14.5 Z" id="Boot" stroke="#333333" stroke-width="2" stroke-linecap="square"></path>
+                <path d="M20.5,13 C18.5670034,13 17,14.5670034 17,16.5" id="Heel" stroke="#333333" stroke-width="2" opacity="0.5" stroke-linecap="square"></path>
+                <path d="M11,19 L12,19 L12,22 L11,22 L11,19 Z M18,19 L19,19 L19,22 L18,22 L18,19 Z" id="Supports" fill="#333333"></path>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/application/assets/fonts/icons/im-with-her.svg b/application/assets/fonts/icons/im-with-her.svg
new file mode 100644
index 00000000..4efc46fa
--- /dev/null
+++ b/application/assets/fonts/icons/im-with-her.svg
@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 44.1 (41455) - http://www.bohemiancoding.com/sketch -->
+    <title>im-with-her</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard-4" transform="translate(-708.000000, -467.000000)">
+            <g id="176" transform="translate(708.000000, 467.000000)">
+                <path d="M8,9 L8,3.99339768 C8,3.44494629 7.55641359,3 7.00922203,3 L2.99077797,3 C2.45097518,3 2,3.44475929 2,3.99339768 L2,20.0066023 C2,20.5550537 2.44358641,21 2.99077797,21 L7.00922203,21 C7.54902482,21 8,20.5552407 8,20.0066023 L8,15 L14,15 L14,20.0066023 C14,20.5550537 14.4435864,21 14.990778,21 L19.009222,21 C19.5490248,21 20,20.5552407 20,20.0066023 L20,3.99339768 C20,3.44494629 19.5564136,3 19.009222,3 L14.990778,3 C14.4509752,3 14,3.44475929 14,3.99339768 L14,9 L8,9 Z" id="H" fill="#333333" opacity="0.5"></path>
+                <path d="M2,9 L14,9 L14,3.99077797 C14,3.44358641 14.3203148,3.32031476 14.7062149,3.7062149 L23,12 L14.7062149,20.2937851 C14.3161832,20.6838168 14,20.5490248 14,20.009222 L14,15 L2,15 L2,9 Z" id="Arrow" fill="#000000"></path>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/application/assets/fonts/icons/inbox-full.svg b/application/assets/fonts/icons/inbox-full.svg
new file mode 100644
index 00000000..f9561fec
--- /dev/null
+++ b/application/assets/fonts/icons/inbox-full.svg
@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 44.1 (41455) - http://www.bohemiancoding.com/sketch -->
+    <title>inbox-full</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard-4" transform="translate(-356.000000, -1046.000000)">
+            <g id="Extras" transform="translate(48.000000, 1046.000000)">
+                <g id="inbox-full" transform="translate(308.000000, 0.000000)">
+                    <path d="M8.33239655,14.5996284 C8.96421673,16.0457106 10.3945001,17 12,17 C13.6054999,17 15.0357833,16.0457106 15.6676034,14.5996284 L15.9295922,14 L22,14 L22,20.009222 C22,21.1092551 21.1067838,22 20.0066023,22 L3.99339768,22 C2.89446021,22 2,21.1033032 2,20.009222 L2,14 L8.07040776,14 L8.33239655,14.5996284 Z" id="Front" stroke="#333333" stroke-width="2" stroke-linejoin="round"></path>
+                    <path d="M2,15.5000001 L2,13.0001355 L5.63085938,3.9134128 C5.83473011,3.40319837 6.44341249,2.98958785 7.00723108,2.98958785 L17.0497215,2.98958785 C17.6059998,2.98958785 18.223735,3.40698372 18.4260932,3.91341276 L22.0569525,13.000135 L22,15" id="Back" stroke="#333333" stroke-width="2" stroke-linejoin="round"></path>
+                    <path d="M6,9 L18,9 L18,10 L6,10 L6,9 Z M5,11 L19,11 L19,12 L5,12 L5,11 Z M7,7 L17,7 L17,8 L7,8 L7,7 Z M8,5 L16,5 L16,6 L8,6 L8,5 Z" id="Papers" fill="#333333"></path>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/application/assets/fonts/icons/inbox.svg b/application/assets/fonts/icons/inbox.svg
new file mode 100644
index 00000000..f1db689b
--- /dev/null
+++ b/application/assets/fonts/icons/inbox.svg
@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 44.1 (41455) - http://www.bohemiancoding.com/sketch -->
+    <title>inbox</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linejoin="round">
+        <g id="Artboard-4" transform="translate(-444.000000, -159.000000)" stroke="#333333" stroke-width="2">
+            <g id="30" transform="translate(444.000000, 159.000000)">
+                <path d="M8.33239655,14.5996284 C8.96421673,16.0457106 10.3945001,17 12,17 C13.6054999,17 15.0357833,16.0457106 15.6676034,14.5996284 L15.9295922,14 L22,14 L22,20.009222 C22,21.1092551 21.1067838,22 20.0066023,22 L3.99339768,22 C2.89446021,22 2,21.1033032 2,20.009222 L2,14 L8.07040776,14 L8.33239655,14.5996284 Z" id="Front"></path>
+                <path d="M2,15.5000001 L2,13.0001355 L5.63085938,3.9134128 C5.83473011,3.40319837 6.44341249,2.98958785 7.00723108,2.98958785 L17.0497215,2.98958785 C17.6059998,2.98958785 18.223735,3.40698372 18.4260932,3.91341276 L22.0569525,13.000135 L22,15" id="Back"></path>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/application/assets/fonts/icons/infinity.svg b/application/assets/fonts/icons/infinity.svg
new file mode 100644
index 00000000..35b05aeb
--- /dev/null
+++ b/application/assets/fonts/icons/infinity.svg
@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 44.1 (41455) - http://www.bohemiancoding.com/sketch -->
+    <title>infinity</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard-4" transform="translate(-664.000000, -643.000000)" stroke="#333333" stroke-width="2">
+            <g id="255" transform="translate(664.000000, 643.000000)">
+                <path d="M2,12 C2,9.5 3.5,8 6,8 C11,8 13,16 18,16 C20.5,16 22,14.5 22,12 C22,9.5 20.5,8 18,8 C13,8 11,16 6,16 C3.5,16 2,14.5 2,12 Z" id="Path-186"></path>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/application/assets/fonts/icons/info.svg b/application/assets/fonts/icons/info.svg
new file mode 100644
index 00000000..27da3b4b
--- /dev/null
+++ b/application/assets/fonts/icons/info.svg
@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 44.1 (41455) - http://www.bohemiancoding.com/sketch -->
+    <title>info</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard-4" transform="translate(-356.000000, -247.000000)">
+            <g id="68" transform="translate(356.000000, 247.000000)">
+                <circle id="Circle" stroke="#333333" stroke-width="2" cx="12" cy="12" r="10"></circle>
+                <path d="M12,9.5 C12.8284271,9.5 13.5,8.82842712 13.5,8 C13.5,7.17157288 12.8284271,6.5 12,6.5 C11.1715729,6.5 10.5,7.17157288 10.5,8 C10.5,8.82842712 11.1715729,9.5 12,9.5 Z" id="Dot" fill="#333333"></path>
+                <rect id="Line" fill="#333333" x="11" y="11" width="2" height="7" rx="1"></rect>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/application/assets/fonts/icons/inspect.svg b/application/assets/fonts/icons/inspect.svg
new file mode 100644
index 00000000..2264b679
--- /dev/null
+++ b/application/assets/fonts/icons/inspect.svg
@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 44.1 (41455) - http://www.bohemiancoding.com/sketch -->
+    <title>inspect</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard-4" transform="translate(-576.000000, -511.000000)">
+            <g id="193" transform="translate(576.000000, 511.000000)">
+                <circle id="Outer" stroke="#333333" stroke-width="2" cx="12" cy="12" r="8"></circle>
+                <circle id="Centre" stroke="#333333" stroke-width="2" cx="12" cy="12" r="2"></circle>
+                <path d="M11,1.99077797 C11,1.44358641 11.4438648,1 12,1 C12.5522847,1 13,1.45097518 13,1.99077797 L13,6.00922203 C13,6.55641359 12.5561352,7 12,7 C11.4477153,7 11,6.54902482 11,6.00922203 L11,1.99077797 Z M11,17.990778 C11,17.4435864 11.4438648,17 12,17 C12.5522847,17 13,17.4509752 13,17.990778 L13,22.009222 C13,22.5564136 12.5561352,23 12,23 C11.4477153,23 11,22.5490248 11,22.009222 L11,17.990778 Z M1.99077797,13 C1.44358641,13 1,12.5561352 1,12 C1,11.4477153 1.45097518,11 1.99077797,11 L6.00922203,11 C6.55641359,11 7,11.4438648 7,12 C7,12.5522847 6.54902482,13 6.00922203,13 L1.99077797,13 Z M17.990778,13 C17.4435864,13 17,12.5561352 17,12 C17,11.4477153 17.4509752,11 17.990778,11 L22.009222,11 C22.5564136,11 23,11.4438648 23,12 C23,12.5522847 22.5490248,13 22.009222,13 L17.990778,13 Z" id="Lines" fill="#333333"></path>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/application/assets/fonts/icons/instagram.svg b/application/assets/fonts/icons/instagram.svg
new file mode 100644
index 00000000..5eacda93
--- /dev/null
+++ b/application/assets/fonts/icons/instagram.svg
@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 44.1 (41455) - http://www.bohemiancoding.com/sketch -->
+    <title>instagram</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard-4" transform="translate(-708.000000, -863.000000)">
+            <g id="356" transform="translate(708.000000, 863.000000)">
+                <path d="M11.9968631,3.00315476 C9.55259199,3.00315476 9.24610244,3.01351517 8.28615675,3.05731471 C7.32821168,3.10100706 6.67396957,3.2531622 6.10150326,3.47566097 C5.50967369,3.70562637 5.00776535,4.01336632 4.50739321,4.51370273 C4.00705679,5.01407487 3.69931685,5.51598321 3.46935145,6.10781278 C3.24685268,6.68027909 3.09469754,7.3345212 3.05100518,8.29246627 C3.00720565,9.25241197 2.99684524,9.55890152 2.99684524,12.0031726 C2.99684524,14.447408 3.00720565,14.7538976 3.05100518,15.7138433 C3.09469754,16.6717883 3.24685268,17.3260304 3.46935145,17.8984967 C3.69931685,18.4903263 4.00705679,18.9922347 4.50739321,19.4926068 C5.00776535,19.9929432 5.50967369,20.3006831 6.10150326,20.5306843 C6.67396957,20.7531473 7.32821168,20.9053025 8.28615675,20.9489948 C9.24610244,20.9927944 9.55259199,21.0031548 11.9968631,21.0031548 C14.4410985,21.0031548 14.747588,20.9927944 15.7075337,20.9489948 C16.6654788,20.9053025 17.3197209,20.7531473 17.8921872,20.5306843 C18.4840168,20.3006831 18.9859251,19.9929432 19.4862973,19.4926068 C19.9866337,18.9922347 20.2943736,18.4903263 20.5243748,17.8984967 C20.7468378,17.3260304 20.8989929,16.6717883 20.9426853,15.7138433 C20.9864848,14.7538976 20.9968452,14.447408 20.9968452,12.0031726 C20.9968452,9.55890152 20.9864848,9.25241197 20.9426853,8.29246627 C20.8989929,7.3345212 20.7468378,6.68027909 20.5243748,6.10781278 C20.2943736,5.51598321 19.9866337,5.01407487 19.4862973,4.51370273 C18.9859251,4.01336632 18.4840168,3.70562637 17.8921872,3.47566097 C17.3197209,3.2531622 16.6654788,3.10100706 15.7075337,3.05731471 C14.747588,3.01351517 14.4410985,3.00315476 11.9968631,3.00315476 Z" id="Body" stroke="#333333" stroke-width="2"></path>
+                <circle id="Lens" stroke="#333333" stroke-width="2" cx="12" cy="12" r="4"></circle>
+                <circle id="Flash" fill="#333333" cx="17.25" cy="6.75" r="1.25"></circle>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/application/assets/fonts/icons/ipod.svg b/application/assets/fonts/icons/ipod.svg
new file mode 100644
index 00000000..05e1526f
--- /dev/null
+++ b/application/assets/fonts/icons/ipod.svg
@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 44.1 (41455) - http://www.bohemiancoding.com/sketch -->
+    <title>ipod</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard-4" transform="translate(-136.000000, -291.000000)" stroke="#333333">
+            <g id="83" transform="translate(136.000000, 291.000000)">
+                <rect id="Body" stroke-width="2" stroke-linejoin="round" x="5" y="2" width="14" height="20" rx="1"></rect>
+                <rect id="Screen" opacity="0.5" x="7.5" y="4.5" width="9" height="6" rx="1"></rect>
+                <circle id="Click-Wheel" stroke-width="2" cx="12" cy="16" r="3"></circle>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/application/assets/fonts/icons/key-2.svg b/application/assets/fonts/icons/key-2.svg
new file mode 100644
index 00000000..3a35cdab
--- /dev/null
+++ b/application/assets/fonts/icons/key-2.svg
@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 44.1 (41455) - http://www.bohemiancoding.com/sketch -->
+    <title>key-2</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard-4" transform="translate(-488.000000, -379.000000)" fill="#333333">
+            <g id="130" transform="translate(487.000000, 378.000000)">
+                <path d="M13.7779099,18.227963 C13.781029,18.2279357 13.784152,18.2279221 13.7872788,18.2279221 L15.768541,18.2279221 C16.326,18.2279221 16.7779099,18.6717869 16.7779099,19.2279221 C16.7779099,19.7802068 16.3345567,20.2279221 15.768541,20.2279221 L13.7872788,20.2279221 C13.7841524,20.2279221 13.7810295,20.2279081 13.7779099,20.2278802 L13.7779099,22.227963 C13.781029,22.2279357 13.784152,22.2279221 13.7872788,22.2279221 L15.768541,22.2279221 C16.326,22.2279221 16.7779099,22.6717869 16.7779099,23.2279221 C16.7779099,23.7802068 16.3345567,24.2279221 15.768541,24.2279221 L13.7872788,24.2279221 C13.7841524,24.2279221 13.7810295,24.2279081 13.7779099,24.2278802 L13.7779099,24.2294197 C13.7779099,24.7808773 13.334045,25.2279221 12.7779099,25.2279221 C12.2256251,25.2279221 11.7779099,24.7804326 11.7779099,24.2294197 L11.7779099,13.2264244 C11.7779099,13.1991814 11.7789931,13.1721933 11.7811197,13.1455012 C8.94182723,12.6707464 6.77790985,10.2020392 6.77790985,7.22792206 C6.77790985,3.91421356 9.46420136,1.22792206 12.7779099,1.22792206 C16.0916184,1.22792206 18.7779099,3.91421356 18.7779099,7.22792206 C18.7779099,10.2020501 16.6139766,12.6707644 13.7746689,13.1455064 C13.7768157,13.1721984 13.7779099,13.1991849 13.7779099,13.2264244 L13.7779099,18.227963 Z M12.7779099,3.22785866 C10.5687358,3.22785866 8.77784645,5.01874805 8.77784645,7.22792206 C8.77784645,9.43709608 10.5687358,11.2279855 12.7779099,11.2279855 C14.9870839,11.2279855 16.7779733,9.43709608 16.7779733,7.22792206 C16.7779733,5.01874805 14.9870839,3.22785866 12.7779099,3.22785866 Z" id="Old-Key" transform="translate(12.777910, 13.227922) rotate(-315.000000) translate(-12.777910, -13.227922) "></path>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/application/assets/fonts/icons/key.svg b/application/assets/fonts/icons/key.svg
new file mode 100644
index 00000000..550d0d7c
--- /dev/null
+++ b/application/assets/fonts/icons/key.svg
@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 44.1 (41455) - http://www.bohemiancoding.com/sketch -->
+    <title>key</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
+        <g id="Artboard-4" transform="translate(-444.000000, -379.000000)" stroke="#333333" stroke-width="2">
+            <g id="129" transform="translate(444.000000, 379.000000)">
+                <path d="M9.5294225,11.7666792 L9.46896211,3.87804726 L12.2399087,1.10710068 L14.9409179,3.80810992 L13.4417591,6.05684815 L14.8559727,8.17816849 L13.3070898,10.5014928 L13.5841657,11.7773104 C15.9234805,12.6224212 17.5421295,14.8588183 17.5421295,17.4208092 C17.5421295,20.7345177 14.855838,23.4208092 11.5421295,23.4208092 C8.22842102,23.4208092 5.54212952,20.7345177 5.54212952,17.4208092 C5.54212952,14.8428024 7.17989311,12.601574 9.5294225,11.7666792 Z M11.5730212,19.7847702 C12.125306,19.7847702 12.5730212,19.337055 12.5730212,18.7847702 C12.5730212,18.2324855 12.125306,17.7847702 11.5730212,17.7847702 C11.0207365,17.7847702 10.5730212,18.2324855 10.5730212,18.7847702 C10.5730212,19.337055 11.0207365,19.7847702 11.5730212,19.7847702 Z" id="Key" transform="translate(11.542130, 12.471062) scale(1, -1) rotate(-45.000000) translate(-11.542130, -12.471062) "></path>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/application/assets/fonts/icons/keypad.svg b/application/assets/fonts/icons/keypad.svg
new file mode 100644
index 00000000..e22bb848
--- /dev/null
+++ b/application/assets/fonts/icons/keypad.svg
@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 44.1 (41455) - http://www.bohemiancoding.com/sketch -->
+    <title>keypad</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard-4" transform="translate(-356.000000, -511.000000)" stroke="#333333" stroke-width="2">
+            <g id="188" transform="translate(356.000000, 511.000000)">
+                <path d="M5,6 C3.8954305,6 3,5.1045695 3,4 C3,2.8954305 3.8954305,2 5,2 C6.1045695,2 7,2.8954305 7,4 C7,5.1045695 6.1045695,6 5,6 Z M5,14 C3.8954305,14 3,13.1045695 3,12 C3,10.8954305 3.8954305,10 5,10 C6.1045695,10 7,10.8954305 7,12 C7,13.1045695 6.1045695,14 5,14 Z M5,22 C3.8954305,22 3,21.1045695 3,20 C3,18.8954305 3.8954305,18 5,18 C6.1045695,18 7,18.8954305 7,20 C7,21.1045695 6.1045695,22 5,22 Z M12,6 C10.8954305,6 10,5.1045695 10,4 C10,2.8954305 10.8954305,2 12,2 C13.1045695,2 14,2.8954305 14,4 C14,5.1045695 13.1045695,6 12,6 Z M12,14 C10.8954305,14 10,13.1045695 10,12 C10,10.8954305 10.8954305,10 12,10 C13.1045695,10 14,10.8954305 14,12 C14,13.1045695 13.1045695,14 12,14 Z M12,22 C10.8954305,22 10,21.1045695 10,20 C10,18.8954305 10.8954305,18 12,18 C13.1045695,18 14,18.8954305 14,20 C14,21.1045695 13.1045695,22 12,22 Z M19,6 C17.8954305,6 17,5.1045695 17,4 C17,2.8954305 17.8954305,2 19,2 C20.1045695,2 21,2.8954305 21,4 C21,5.1045695 20.1045695,6 19,6 Z M19,14 C17.8954305,14 17,13.1045695 17,12 C17,10.8954305 17.8954305,10 19,10 C20.1045695,10 21,10.8954305 21,12 C21,13.1045695 20.1045695,14 19,14 Z M19,22 C17.8954305,22 17,21.1045695 17,20 C17,18.8954305 17.8954305,18 19,18 C20.1045695,18 21,18.8954305 21,20 C21,21.1045695 20.1045695,22 19,22 Z" id="Buttons"></path>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/application/assets/fonts/icons/knob.svg b/application/assets/fonts/icons/knob.svg
new file mode 100644
index 00000000..c2fceb45
--- /dev/null
+++ b/application/assets/fonts/icons/knob.svg
@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 44.1 (41455) - http://www.bohemiancoding.com/sketch -->
+    <title>knob</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard-4" transform="translate(-532.000000, -863.000000)">
+            <g id="352" transform="translate(532.000000, 863.000000)">
+                <circle id="knob" stroke="#333333" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" transform="translate(12.000000, 13.000000) rotate(-360.000000) translate(-12.000000, -13.000000) " cx="12" cy="13" r="8"></circle>
+                <rect id="line" fill="#333333" transform="translate(14.000000, 9.535898) rotate(-330.000000) translate(-14.000000, -9.535898) " x="13" y="7.53589838" width="2" height="4" rx="1"></rect>
+                <path d="M12,3 C11.4477153,3 11,2.55228475 11,2 C11,1.44771525 11.4477153,1 12,1 C12.5522847,1 13,1.44771525 13,2 C13,2.55228475 12.5522847,3 12,3 Z M17,4.33974596 C16.5217074,4.06360359 16.3578322,3.45201318 16.6339746,2.97372056 C16.910117,2.49542793 17.5217074,2.33155278 18,2.60769515 C18.4782926,2.88383753 18.6421678,3.49542793 18.3660254,3.97372056 C18.089883,4.45201318 17.4782926,4.61588834 17,4.33974596 Z M20.660254,8 C20.3841117,7.52170738 20.5479868,6.91011697 21.0262794,6.6339746 C21.5045721,6.35783222 22.1161625,6.52170738 22.3923048,7 C22.6684472,7.47829262 22.5045721,8.08988303 22.0262794,8.3660254 C21.5479868,8.64216778 20.9363964,8.47829262 20.660254,8 Z M22,13 C22,12.4477153 22.4477153,12 23,12 C23.5522847,12 24,12.4477153 24,13 C24,13.5522847 23.5522847,14 23,14 C22.4477153,14 22,13.5522847 22,13 Z M20.660254,18 C20.9363964,17.5217074 21.5479868,17.3578322 22.0262794,17.6339746 C22.5045721,17.910117 22.6684472,18.5217074 22.3923048,19 C22.1161625,19.4782926 21.5045721,19.6421678 21.0262794,19.3660254 C20.5479868,19.089883 20.3841117,18.4782926 20.660254,18 Z M3.33974596,18 C3.61588834,18.4782926 3.45201318,19.089883 2.97372056,19.3660254 C2.49542793,19.6421678 1.88383753,19.4782926 1.60769515,19 C1.33155278,18.5217074 1.49542793,17.910117 1.97372056,17.6339746 C2.45201318,17.3578322 3.06360359,17.5217074 3.33974596,18 Z M2,13 C2,13.5522847 1.55228475,14 1,14 C0.44771525,14 1.39800648e-16,13.5522847 3.83475851e-17,13 C-6.31054776e-17,12.4477153 0.44771525,12 1,12 C1.55228475,12 2,12.4477153 2,13 Z M3.33974596,8 C3.06360359,8.47829262 2.45201318,8.64216778 1.97372056,8.3660254 C1.49542793,8.08988303 1.33155278,7.47829262 1.60769515,7 C1.88383753,6.52170738 2.49542793,6.35783222 2.97372056,6.6339746 C3.45201318,6.91011697 3.61588834,7.52170738 3.33974596,8 Z M7,4.33974596 C6.52170738,4.61588834 5.91011697,4.45201318 5.6339746,3.97372056 C5.35783222,3.49542793 5.52170738,2.88383753 6,2.60769515 C6.47829262,2.33155278 7.08988303,2.49542793 7.3660254,2.97372056 C7.64216778,3.45201318 7.47829262,4.06360359 7,4.33974596 Z" id="points" fill="#333333" opacity="0.5"></path>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/application/assets/fonts/icons/laptop.svg b/application/assets/fonts/icons/laptop.svg
new file mode 100644
index 00000000..fa46433d
--- /dev/null
+++ b/application/assets/fonts/icons/laptop.svg
@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 44.1 (41455) - http://www.bohemiancoding.com/sketch -->
+    <title>laptop</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard-4" transform="translate(-136.000000, -159.000000)">
+            <g id="23" transform="translate(136.000000, 159.000000)">
+                <path d="M3,17 L3,6.99539757 C3,5.89148214 3.89423523,5 5.00087166,5 L18.9991283,5 C20.1010492,5 21,5.90024417 21,6.99539757 L21,17 L3,17 Z" id="Screen" stroke="#333333" stroke-width="2"></path>
+                <path d="M0,16 L24,16 L24,17.5 C24,18.3284271 23.3330537,19 22.4986925,19 L1.50130749,19 C0.672158257,19 0,18.3342028 0,17.5 L0,16 Z M19,17.5 C19,17.7680664 19.2238576,18 19.5,18 C19.7680664,18 20,17.7761424 20,17.5 C20,17.2319336 19.7761424,17 19.5,17 C19.2319336,17 19,17.2238576 19,17.5 Z" id="Base" fill="#333333"></path>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/application/assets/fonts/icons/layers.svg b/application/assets/fonts/icons/layers.svg
new file mode 100644
index 00000000..987c8c5e
--- /dev/null
+++ b/application/assets/fonts/icons/layers.svg
@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 44.1 (41455) - http://www.bohemiancoding.com/sketch -->
+    <title>layers</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard-4" transform="translate(-620.000000, -643.000000)">
+            <g id="254" transform="translate(620.000000, 643.000000)">
+                <path d="M19.459126,14 L21.4856429,15.1258427 C22.1714524,15.506848 22.1714524,16.493152 21.4856429,16.8741573 L12.4856429,21.8741573 C12.1836204,22.0419476 11.8163796,22.0419476 11.5143571,21.8741573 L2.51435707,16.8741573 C1.82854764,16.493152 1.82854764,15.506848 2.51435707,15.1258427 L4.54087397,14 L6.6,15.1439589 L5.05912603,16 L12,19.8560411 L18.940874,16 L17.4,15.1439589 L19.459126,14 Z" id="Bottom" fill="#333333" fill-rule="nonzero" opacity="0.400000006"></path>
+                <path d="M16.9811747,10.9112782 L17.9524605,9.16296361 L21.4856429,11.1258427 C22.1714524,11.506848 22.1714524,12.493152 21.4856429,12.8741573 L12.4856429,17.8741573 C12.1836204,18.0419476 11.8163796,18.0419476 11.5143571,17.8741573 L2.51435707,12.8741573 C1.82854764,12.493152 1.82854764,11.506848 2.51435707,11.1258427 L6.10996461,9.12828298 L7.08125047,10.8765975 L5.05912603,12 L12,15.8560411 L18.940874,12 L16.9811747,10.9112782 Z" id="Mid" fill="#333333" fill-rule="nonzero" opacity="0.699999988"></path>
+                <polygon id="Top" stroke="#333333" stroke-width="2" stroke-linejoin="round" points="12 3 3 8 12 13 21 8"></polygon>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/application/assets/fonts/icons/leaf.svg b/application/assets/fonts/icons/leaf.svg
new file mode 100644
index 00000000..c63c4c57
--- /dev/null
+++ b/application/assets/fonts/icons/leaf.svg
@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 44.1 (41455) - http://www.bohemiancoding.com/sketch -->
+    <title>leaf</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round">
+        <g id="Artboard-4" transform="translate(-796.000000, -335.000000)" stroke="#333333" stroke-width="2">
+            <g id="117" transform="translate(796.000000, 335.000000)">
+                <path d="M5,19 C3,7 9,3 21,3 C21,15 17,21 5,19 Z" id="Leaf" stroke-linejoin="round"></path>
+                <path d="M3,21 L16,8" id="Stem" stroke-linejoin="round"></path>
+                <polyline id="Thingy-1" points="9 11 9 15 13 15"></polyline>
+                <polyline id="Thingy-2" points="12 8 12 12 16 12"></polyline>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/application/assets/fonts/icons/library.svg b/application/assets/fonts/icons/library.svg
new file mode 100644
index 00000000..97d3f6d9
--- /dev/null
+++ b/application/assets/fonts/icons/library.svg
@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 44.1 (41455) - http://www.bohemiancoding.com/sketch -->
+    <title>library</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard-4" transform="translate(-92.000000, -687.000000)">
+            <g id="262" transform="translate(92.000000, 687.000000)">
+                <path d="M1,21 L23,21 L24,23 L0,23 L1,21 Z M2.5,18 L21.5,18 L22.5,20 L1.5,20 L2.5,18 Z" id="Base" fill="#333333"></path>
+                <path d="M11,11 L13,11 L13,18 L11,18 L11,11 Z M15,11 L17,11 L17,18 L15,18 L15,11 Z M3,11 L5,11 L5,18 L3,18 L3,11 Z M19,11 L21,11 L21,18 L19,18 L19,11 Z M7,11 L9,11 L9,18 L7,18 L7,11 Z" id="Columns" fill="#333333"></path>
+                <circle id="Badge" fill="#333333" cx="12" cy="6" r="1"></circle>
+                <polygon id="Roof" stroke="#333333" stroke-width="2" stroke-linejoin="round" points="12 2 2 9 22 9"></polygon>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/application/assets/fonts/icons/life-ring.svg b/application/assets/fonts/icons/life-ring.svg
new file mode 100644
index 00000000..a83a214f
--- /dev/null
+++ b/application/assets/fonts/icons/life-ring.svg
@@ -0,0 +1,19 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 44.1 (41455) - http://www.bohemiancoding.com/sketch -->
+    <title>life-ring</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard-4" transform="translate(-268.000000, -335.000000)">
+            <g id="106" transform="translate(268.000000, 335.000000)">
+                <path d="M12,21 C7.02943725,21 3,16.9705627 3,12 C3,7.02943725 7.02943725,3 12,3 C16.9705627,3 21,7.02943725 21,12 C21,16.9705627 16.9705627,21 12,21 Z M12,16 C14.209139,16 16,14.209139 16,12 C16,9.790861 14.209139,8 12,8 C9.790861,8 8,9.790861 8,12 C8,14.209139 9.790861,16 12,16 Z" id="Ring" stroke="#333333" stroke-width="2"></path>
+                <path d="M9,3.5 L15,3.5 L13,9 L11,9 L9,3.5 Z M9,20.5 L11,15 L13,15 L15,20.5 L9,20.5 Z M20.5,15 L15,13 L15,11 L20.5,9 L20.5,15 Z M3.5,15 L3.5,9 L9,11 L9,13 L3.5,15 Z" id="Stripes" fill="#333333"></path>
+                <path d="M13,2.99999999 C13,2.99999999 18,-2.73803717e-08 21,2.99999995 C24,5.99999992 21,10.9999999 21,10.9999999" id="Path-30" stroke="#333333"></path>
+                <path d="M1.66666654,3.00000009 C1.66666654,3.00000009 6.66666671,7.53285236e-08 9.66666671,3.00000005 C12.6666667,6.00000003 9.66666654,10.9999998 9.66666654,10.9999998" id="Path-30" stroke="#333333" transform="translate(6.333333, 6.333333) scale(-1, 1) translate(-6.333333, -6.333333) "></path>
+                <path d="M13,14.3333333 C13,14.3333333 18,11.3333333 21,14.3333333 C24,17.3333333 21,22.3333333 21,22.3333333" id="Path-30" stroke="#333333" transform="translate(17.666667, 17.666667) scale(1, -1) translate(-17.666667, -17.666667) "></path>
+                <path d="M1.6666665,14.3333336 C1.6666665,14.3333336 6.66666667,11.3333337 9.66666667,14.3333337 C12.6666667,17.3333336 9.66666667,22.3333334 9.66666667,22.3333334" id="Path-30" stroke="#333333" transform="translate(6.333333, 17.666667) scale(-1, -1) translate(-6.333333, -17.666667) "></path>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/application/assets/fonts/icons/lighthouse.svg b/application/assets/fonts/icons/lighthouse.svg
new file mode 100644
index 00000000..c83756a9
--- /dev/null
+++ b/application/assets/fonts/icons/lighthouse.svg
@@ -0,0 +1,26 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 44.1 (41455) - http://www.bohemiancoding.com/sketch -->
+    <title>lighthouse</title>
+    <desc>Created with Sketch.</desc>
+    <defs>
+        <linearGradient x1="3.061617e-15%" y1="50%" x2="100%" y2="50%" id="linearGradient-1">
+            <stop stop-color="#333333" stop-opacity="0.504132699" offset="0%"></stop>
+            <stop stop-color="#333333" stop-opacity="0" offset="100%"></stop>
+        </linearGradient>
+    </defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard-4" transform="translate(-180.000000, -335.000000)">
+            <g id="104" transform="translate(180.000000, 335.000000)">
+                <rect id="Base" fill="#333333" x="4" y="22" width="16" height="2" rx="1"></rect>
+                <polyline id="Body" stroke="#333333" stroke-width="2" stroke-linejoin="round" points="7 23 9 10 9 5.00000019 12 2 15 5 15 10 17 23"></polyline>
+                <circle id="Tip" fill="#333333" cx="12" cy="1" r="1"></circle>
+                <path d="M9,15 C9,15 10.5,15 12,15 C13.5,15 15,15 15,15" id="Bottom-Stripe" stroke="#333333" stroke-width="2" opacity="0.5"></path>
+                <path d="M8,19 C8,19 10.25,19 12.5,19 C14.75,19 17,19 17,19" id="Top-Stripe" stroke="#333333" stroke-width="2" opacity="0.5"></path>
+                <rect id="Light" stroke="#333333" stroke-width="2" fill-opacity="0.2" fill="#333333" x="9" y="6" width="6" height="4"></rect>
+                <polygon id="Right-Ray" fill="url(#linearGradient-1)" points="14 7 24 6 24 10 14 9"></polygon>
+                <polygon id="Left-Ray" fill="url(#linearGradient-1)" transform="translate(5.000000, 8.000000) scale(-1, 1) translate(-5.000000, -8.000000) " points="0 7 10 6 10 10 0 9"></polygon>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/application/assets/fonts/icons/link-break.svg b/application/assets/fonts/icons/link-break.svg
new file mode 100644
index 00000000..e30b1f5f
--- /dev/null
+++ b/application/assets/fonts/icons/link-break.svg
@@ -0,0 +1,23 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 44.1 (41455) - http://www.bohemiancoding.com/sketch -->
+    <title>link-break</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
+        <g id="Artboard-4" transform="translate(-92.000000, -291.000000)" stroke="#333333" stroke-width="2">
+            <g id="82" transform="translate(89.000000, 287.000000)">
+                <g id="Group" transform="translate(15.500000, 16.000000) rotate(45.000000) translate(-15.500000, -16.000000) translate(5.000000, 5.000000)">
+                    <path d="M14,9 L14,4 C14,1.790861 12.209139,5.68434189e-14 10,5.68434189e-14 C7.790861,5.68434189e-14 6,1.790861 6,4 L6,7" id="Combined-Shape"></path>
+                    <path d="M6,13 L6,18 C6,20.209139 7.790861,22 10,22 C12.209139,22 14,20.209139 14,18 L14,15" id="Combined-Shape"></path>
+                    <path d="M19,12 L21,12" id="Path-11"></path>
+                    <path d="M0,10 L2,10" id="Path-11"></path>
+                    <path d="M17,15 L18,16" id="Path-11"></path>
+                    <path d="M2,13 L3,14" id="Path-11" transform="translate(2.500000, 13.500000) scale(-1, 1) translate(-2.500000, -13.500000) "></path>
+                    <path d="M17,9 L18,8" id="Path-11"></path>
+                    <path d="M2,7 L3,6" id="Path-11" transform="translate(2.500000, 6.500000) scale(-1, 1) translate(-2.500000, -6.500000) "></path>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/application/assets/fonts/icons/link.svg b/application/assets/fonts/icons/link.svg
new file mode 100644
index 00000000..72fb0cfe
--- /dev/null
+++ b/application/assets/fonts/icons/link.svg
@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 44.1 (41455) - http://www.bohemiancoding.com/sketch -->
+    <title>link</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
+        <g id="Artboard-4" transform="translate(-884.000000, -247.000000)" stroke="#333333" stroke-width="2">
+            <g id="80" transform="translate(884.000000, 247.000000)">
+                <g id="Group" transform="translate(12.000000, 12.000000) rotate(45.000000) translate(-12.000000, -12.000000) translate(8.000000, 1.000000)">
+                    <path d="M4,13 C6.209139,13 8,11.209139 8,9 L8,4 C8,1.790861 6.209139,1.13686838e-13 4,1.13686838e-13 C1.790861,1.13686838e-13 -1.13686838e-13,1.790861 -1.13686838e-13,4 L-1.13686838e-13,7" id="Combined-Shape"></path>
+                    <path d="M4,9 C1.790861,9 -1.13686838e-13,10.790861 -1.13686838e-13,13 L-1.13686838e-13,18 C-1.13686838e-13,20.209139 1.790861,22 4,22 C6.209139,22 8,20.209139 8,18 L8,15" id="Combined-Shape"></path>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/application/assets/fonts/icons/list.svg b/application/assets/fonts/icons/list.svg
new file mode 100644
index 00000000..50e7c576
--- /dev/null
+++ b/application/assets/fonts/icons/list.svg
@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 44.1 (41455) - http://www.bohemiancoding.com/sketch -->
+    <title>list</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard-4" transform="translate(-752.000000, -1046.000000)" stroke="#333333">
+            <g id="Extras" transform="translate(48.000000, 1046.000000)">
+                <g id="list" transform="translate(704.000000, 0.000000)">
+                    <path d="M7.5,7 C7.5,7.27759576 7.72452386,7.5 8.00684547,7.5 L19.9931545,7.5 C20.2743191,7.5 20.5,7.27572555 20.5,7 C20.5,6.72240424 20.2754761,6.5 19.9931545,6.5 L8.00684547,6.5 C7.72568093,6.5 7.5,6.72427445 7.5,7 Z M7.5,12 C7.5,12.2775958 7.72452386,12.5 8.00684547,12.5 L19.9931545,12.5 C20.2743191,12.5 20.5,12.2757255 20.5,12 C20.5,11.7224042 20.2754761,11.5 19.9931545,11.5 L8.00684547,11.5 C7.72568093,11.5 7.5,11.7242745 7.5,12 Z M7.5,17 C7.5,17.2775958 7.72452386,17.5 8.00684547,17.5 L19.9931545,17.5 C20.2743191,17.5 20.5,17.2757255 20.5,17 C20.5,16.7224042 20.2754761,16.5 19.9931545,16.5 L8.00684547,16.5 C7.72568093,16.5 7.5,16.7242745 7.5,17 Z M4,7.5 C4.27614237,7.5 4.5,7.27614237 4.5,7 C4.5,6.72385763 4.27614237,6.5 4,6.5 C3.72385763,6.5 3.5,6.72385763 3.5,7 C3.5,7.27614237 3.72385763,7.5 4,7.5 Z M4,12.5 C4.27614237,12.5 4.5,12.2761424 4.5,12 C4.5,11.7238576 4.27614237,11.5 4,11.5 C3.72385763,11.5 3.5,11.7238576 3.5,12 C3.5,12.2761424 3.72385763,12.5 4,12.5 Z M4,17.5 C4.27614237,17.5 4.5,17.2761424 4.5,17 C4.5,16.7238576 4.27614237,16.5 4,16.5 C3.72385763,16.5 3.5,16.7238576 3.5,17 C3.5,17.2761424 3.72385763,17.5 4,17.5 Z" id="Combined-Shape"></path>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/application/assets/fonts/icons/location.svg b/application/assets/fonts/icons/location.svg
new file mode 100644
index 00000000..8bd2d248
--- /dev/null
+++ b/application/assets/fonts/icons/location.svg
@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 44.1 (41455) - http://www.bohemiancoding.com/sketch -->
+    <title>location</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linejoin="round">
+        <g id="Artboard-4" transform="translate(-312.000000, -159.000000)" stroke-width="2" stroke="#333333">
+            <g id="27" transform="translate(312.000000, 159.000000)">
+                <polygon id="Path-34" points="21 3 2 11 11 13 13 22.0178344"></polygon>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/application/assets/fonts/icons/lock-open.svg b/application/assets/fonts/icons/lock-open.svg
new file mode 100644
index 00000000..329f1bf3
--- /dev/null
+++ b/application/assets/fonts/icons/lock-open.svg
@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 44.1 (41455) - http://www.bohemiancoding.com/sketch -->
+    <title>lock-open</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard-4" transform="translate(-620.000000, -335.000000)">
+            <g id="113" transform="translate(620.000000, 335.000000)">
+                <rect id="Body" stroke="#333333" stroke-width="2" x="3" y="10" width="18" height="12" rx="1"></rect>
+                <path d="M13,16.7324356 L13,18 C13,18.5522847 12.5522847,19 12,19 C11.4477153,19 11,18.5522847 11,18 L11,16.7324356 C10.4021986,16.3866262 10,15.7402824 10,15 C10,13.8954305 10.8954305,13 12,13 C13.1045695,13 14,13.8954305 14,15 C14,15.7402824 13.5978014,16.3866262 13,16.7324356 Z" id="Keyhole" fill="#333333"></path>
+                <path d="M17,6 C17,3.23857625 14.7614237,1 12,1 C9.23857625,1 7,3.23857625 7,6 L7,9" id="Lock" stroke="#333333" stroke-width="2" stroke-linecap="round"></path>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/application/assets/fonts/icons/lock-round-open.svg b/application/assets/fonts/icons/lock-round-open.svg
new file mode 100644
index 00000000..21515dc2
--- /dev/null
+++ b/application/assets/fonts/icons/lock-round-open.svg
@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 44.1 (41455) - http://www.bohemiancoding.com/sketch -->
+    <title>lock-round-open</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard-4" transform="translate(-488.000000, -1090.000000)">
+            <g id="Extras" transform="translate(48.000000, 1046.000000)">
+                <g id="round-lock-opened" transform="translate(440.000000, 44.000000)">
+                    <circle id="Body" stroke="#333333" stroke-width="2" cx="12" cy="15" r="7"></circle>
+                    <path d="M13,15.7324356 L13,17 C13,17.5522847 12.5522847,18 12,18 C11.4477153,18 11,17.5522847 11,17 L11,15.7324356 C10.4021986,15.3866262 10,14.7402824 10,14 C10,12.8954305 10.8954305,12 12,12 C13.1045695,12 14,12.8954305 14,14 C14,14.7402824 13.5978014,15.3866262 13,15.7324356 Z" id="Keyhole" fill="#333333"></path>
+                    <path d="M16,5 C16,2.790861 14.209139,1 12,1 C9.790861,1 8,2.790861 8,5 L8,9" id="Lock" stroke="#333333" stroke-width="2" stroke-linecap="round"></path>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/application/assets/fonts/icons/lock-round.svg b/application/assets/fonts/icons/lock-round.svg
new file mode 100644
index 00000000..0fea2506
--- /dev/null
+++ b/application/assets/fonts/icons/lock-round.svg
@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 44.1 (41455) - http://www.bohemiancoding.com/sketch -->
+    <title>lock-round</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard-4" transform="translate(-268.000000, -379.000000)">
+            <g id="125" transform="translate(268.000000, 379.000000)">
+                <circle id="Body" stroke="#333333" stroke-width="2" cx="12" cy="15" r="7"></circle>
+                <path d="M13,15.7324356 L13,17 C13,17.5522847 12.5522847,18 12,18 C11.4477153,18 11,17.5522847 11,17 L11,15.7324356 C10.4021986,15.3866262 10,14.7402824 10,14 C10,12.8954305 10.8954305,12 12,12 C13.1045695,12 14,12.8954305 14,14 C14,14.7402824 13.5978014,15.3866262 13,15.7324356 Z" id="Keyhole" fill="#333333"></path>
+                <path d="M16,9 L16,6 C16,3.790861 14.209139,2 12,2 C9.790861,2 8,3.790861 8,6 L8,9" id="Lock" stroke="#333333" stroke-width="2" stroke-linecap="round"></path>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/application/assets/fonts/icons/lock.svg b/application/assets/fonts/icons/lock.svg
new file mode 100644
index 00000000..ca6e2dab
--- /dev/null
+++ b/application/assets/fonts/icons/lock.svg
@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 44.1 (41455) - http://www.bohemiancoding.com/sketch -->
+    <title>lock</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard-4" transform="translate(-840.000000, -159.000000)">
+            <g id="39" transform="translate(840.000000, 159.000000)">
+                <rect id="Body" stroke="#333333" stroke-width="2" x="3" y="10" width="18" height="12" rx="1"></rect>
+                <path d="M13,16.7324356 L13,18 C13,18.5522847 12.5522847,19 12,19 C11.4477153,19 11,18.5522847 11,18 L11,16.7324356 C10.4021986,16.3866262 10,15.7402824 10,15 C10,13.8954305 10.8954305,13 12,13 C13.1045695,13 14,13.8954305 14,15 C14,15.7402824 13.5978014,16.3866262 13,16.7324356 Z" id="Keyhole" fill="#333333"></path>
+                <path d="M17,10 L17,7 C17,4.23857625 14.7614237,2 12,2 C9.23857625,2 7,4.23857625 7,7 L7,10" id="Lock" stroke="#333333" stroke-width="2"></path>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/application/assets/fonts/icons/london-eye.svg b/application/assets/fonts/icons/london-eye.svg
new file mode 100644
index 00000000..2f976f5a
--- /dev/null
+++ b/application/assets/fonts/icons/london-eye.svg
@@ -0,0 +1,20 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 44.1 (41455) - http://www.bohemiancoding.com/sketch -->
+    <title>london-eye</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard-4" transform="translate(-752.000000, -775.000000)">
+            <g id="317" transform="translate(747.000000, 770.000000)">
+                <circle id="Wheel" stroke="#333333" stroke-width="2" cx="17" cy="17" r="9"></circle>
+                <path d="M17,8 C16.1715729,8 15.5,7.32842712 15.5,6.5 C15.5,5.67157288 16.1715729,5 17,5 C17.8284271,5 18.5,5.67157288 18.5,6.5 C18.5,7.32842712 17.8284271,8 17,8 Z M27.5,18.5 C26.6715729,18.5 26,17.8284271 26,17 C26,16.1715729 26.6715729,15.5 27.5,15.5 C28.3284271,15.5 29,16.1715729 29,17 C29,17.8284271 28.3284271,18.5 27.5,18.5 Z M6.5,18.5 C5.67157288,18.5 5,17.8284271 5,17 C5,16.1715729 5.67157288,15.5 6.5,15.5 C7.32842712,15.5 8,16.1715729 8,17 C8,17.8284271 7.32842712,18.5 6.5,18.5 Z M17,29 C16.1715729,29 15.5,28.3284271 15.5,27.5 C15.5,26.6715729 16.1715729,26 17,26 C17.8284271,26 18.5,26.6715729 18.5,27.5 C18.5,28.3284271 17.8284271,29 17,29 Z M10.636039,10.636039 C10.0502525,11.2218254 9.10050506,11.2218254 8.51471863,10.636039 C7.92893219,10.0502525 7.92893219,9.10050506 8.51471863,8.51471863 C9.10050506,7.92893219 10.0502525,7.92893219 10.636039,8.51471863 C11.2218254,9.10050506 11.2218254,10.0502525 10.636039,10.636039 Z M25.4852814,10.636039 C24.8994949,11.2218254 23.9497475,11.2218254 23.363961,10.636039 C22.7781746,10.0502525 22.7781746,9.10050506 23.363961,8.51471863 C23.9497475,7.92893219 24.8994949,7.92893219 25.4852814,8.51471863 C26.0710678,9.10050506 26.0710678,10.0502525 25.4852814,10.636039 Z M10.636039,25.4852814 C10.0502525,26.0710678 9.10050506,26.0710678 8.51471863,25.4852814 C7.92893219,24.8994949 7.92893219,23.9497475 8.51471863,23.363961 C9.10050506,22.7781746 10.0502525,22.7781746 10.636039,23.363961 C11.2218254,23.9497475 11.2218254,24.8994949 10.636039,25.4852814 Z M25.4852814,25.4852814 C24.8994949,26.0710678 23.9497475,26.0710678 23.363961,25.4852814 C22.7781746,24.8994949 22.7781746,23.9497475 23.363961,23.363961 C23.9497475,22.7781746 24.8994949,22.7781746 25.4852814,23.363961 C26.0710678,23.9497475 26.0710678,24.8994949 25.4852814,25.4852814 Z" id="Pods" fill="#333333"></path>
+                <polyline id="Legs" stroke="#333333" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" points="12 28 17 17 22 28"></polyline>
+                <path d="M17,9 L17,25" id="Path-245" stroke="#333333" opacity="0.200000003"></path>
+                <path d="M9,17 L25,17" id="Path-245" stroke="#333333" opacity="0.200000003"></path>
+                <path d="M23,11 L11,23" id="Path-245" stroke="#333333" opacity="0.200000003"></path>
+                <path d="M11,11 L23,23" id="Path-245" stroke="#333333" opacity="0.200000003"></path>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/application/assets/fonts/icons/loo-roll.svg b/application/assets/fonts/icons/loo-roll.svg
new file mode 100644
index 00000000..42926029
--- /dev/null
+++ b/application/assets/fonts/icons/loo-roll.svg
@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 44.1 (41455) - http://www.bohemiancoding.com/sketch -->
+    <title>loo-roll</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard-4" transform="translate(-400.000000, -731.000000)">
+            <g id="289" transform="translate(400.000000, 731.000000)">
+                <ellipse id="Top" stroke="#333333" stroke-width="2" cx="10" cy="6" rx="8" ry="3"></ellipse>
+                <path d="M18,6 L18,8 M10,21 C4.5,21 2.84513798,19.5150497 2.84513798,19.5150497 C2.37838116,19.2305956 2,18.5525106 2,18.0014977 L2,6" id="Curve" stroke="#333333" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
+                <ellipse id="Hole" fill="#333333" cx="10" cy="6" rx="3" ry="1"></ellipse>
+                <path d="M10,9 L20.0044225,9 C20.5542648,9 21,9.45576096 21,10.0024733 L21,19.9975267 C21,20.5511774 20.555163,21 20.0044225,21 L10,21" id="Paper" stroke="#333333" stroke-width="2"></path>
+                <path d="M9,10 L9,21" id="Tear" stroke="#333333" stroke-width="2" opacity="0.5" stroke-linecap="round" stroke-dasharray="1,2"></path>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/application/assets/fonts/icons/magic-hat.svg b/application/assets/fonts/icons/magic-hat.svg
new file mode 100644
index 00000000..9bae09e1
--- /dev/null
+++ b/application/assets/fonts/icons/magic-hat.svg
@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 44.1 (41455) - http://www.bohemiancoding.com/sketch -->
+    <title>magic-hat</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard-4" transform="translate(-708.000000, -379.000000)">
+            <g id="135" transform="translate(708.000000, 379.000000)">
+                <rect id="Rim" fill="#333333" x="2" y="6" width="20" height="2" rx="1"></rect>
+                <path d="M7,7 L17,7 L18.7176907,19.0238352 C18.8736058,20.1152409 18.1029399,21 16.9941413,21 L7.00585866,21 C5.89805351,21 5.12662623,20.1136164 5.28230926,19.0238352 L7,7 Z" id="Hat" stroke="#333333" stroke-width="2"></path>
+                <rect id="Ribbon" fill="#333333" x="7" y="10" width="10" height="2"></rect>
+                <path d="M13,0.497698784 L13,1.00630944 C13,1.55738551 13.4448904,2 13.9936906,2 L14.5023012,2 C14.7771727,2 15,2.23193359 15,2.5 C15,2.77614237 14.7851562,3 14.5023012,3 L13.9936906,3 C13.4426145,3 13,3.44489042 13,3.99369056 L13,4.50230122 C13,4.77717266 12.7680664,5 12.5,5 C12.2238576,5 12,4.78515625 12,4.50230122 L12,3.99369056 C12,3.44261449 11.5551096,3 11.0063094,3 L10.4976988,3 C10.2228273,3 10,2.76806641 10,2.5 C10,2.22385763 10.2148438,2 10.4976988,2 L11.0063094,2 C11.5573855,2 12,1.55510958 12,1.00630944 L12,0.497698784 C12,0.222827336 12.2319336,0 12.5,0 C12.7761424,0 13,0.21484375 13,0.497698784 Z M18,5 C17.4477153,5 17,4.55228475 17,4 C17,3.44771525 17.4477153,3 18,3 C18.5522847,3 19,3.44771525 19,4 C19,4.55228475 18.5522847,5 18,5 Z M7,2.49538898 L7,2.501056 C7,2.77131733 7.22338484,3 7.498944,3 L7.50461102,3 C7.7782068,3 8,3.23193359 8,3.5 C8,3.77614237 7.7842474,4 7.50461102,4 L7.498944,4 C7.22868267,4 7,4.22338484 7,4.498944 L7,4.50461102 C7,4.7782068 6.76806641,5 6.5,5 C6.22385763,5 6,4.7842474 6,4.50461102 L6,4.498944 C6,4.22868267 5.77661516,4 5.501056,4 L5.49538898,4 C5.2217932,4 5,3.76806641 5,3.5 C5,3.22385763 5.2157526,3 5.49538898,3 L5.501056,3 C5.77131733,3 6,2.77661516 6,2.501056 L6,2.49538898 C6,2.2217932 6.23193359,2 6.5,2 C6.77614237,2 7,2.2157526 7,2.49538898 Z" id="Sparkles" fill="#333333"></path>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/application/assets/fonts/icons/magic-wand.svg b/application/assets/fonts/icons/magic-wand.svg
new file mode 100644
index 00000000..09a46bca
--- /dev/null
+++ b/application/assets/fonts/icons/magic-wand.svg
@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 44.1 (41455) - http://www.bohemiancoding.com/sketch -->
+    <title>magic-wand</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard-4" transform="translate(-664.000000, -379.000000)">
+            <g id="134" transform="translate(664.000000, 379.000000)">
+                <rect id="Wand" stroke="#333333" stroke-width="2" transform="translate(9.981477, 14.003305) rotate(-315.000000) translate(-9.981477, -14.003305) " x="7.98147698" y="2.70503199" width="4" height="22.5965469" rx="1"></rect>
+                <path d="M12,9 L15,12" id="Tip" stroke="#333333" stroke-width="2"></path>
+                <path d="M22,0.497698784 L22,1.00630944 C22,1.55738551 22.4448904,2 22.9936906,2 L23.5023012,2 C23.7771727,2 24,2.23193359 24,2.5 C24,2.77614237 23.7851562,3 23.5023012,3 L22.9936906,3 C22.4426145,3 22,3.44489042 22,3.99369056 L22,4.50230122 C22,4.77717266 21.7680664,5 21.5,5 C21.2238576,5 21,4.78515625 21,4.50230122 L21,3.99369056 C21,3.44261449 20.5551096,3 20.0063094,3 L19.4976988,3 C19.2228273,3 19,2.76806641 19,2.5 C19,2.22385763 19.2148438,2 19.4976988,2 L20.0063094,2 C20.5573855,2 21,1.55510958 21,1.00630944 L21,0.497698784 C21,0.222827336 21.2319336,0 21.5,0 C21.7761424,0 22,0.21484375 22,0.497698784 Z M23,10 C22.4477153,10 22,9.55228475 22,9 C22,8.44771525 22.4477153,8 23,8 C23.5522847,8 24,8.44771525 24,9 C24,9.55228475 23.5522847,10 23,10 Z M12.5,3 C11.6715729,3 11,2.32842712 11,1.5 C11,0.671572875 11.6715729,0 12.5,0 C13.3284271,0 14,0.671572875 14,1.5 C14,2.32842712 13.3284271,3 12.5,3 Z M21,12.495389 L21,12.501056 C21,12.7713173 21.2233848,13 21.498944,13 L21.504611,13 C21.7782068,13 22,13.2319336 22,13.5 C22,13.7761424 21.7842474,14 21.504611,14 L21.498944,14 C21.2286827,14 21,14.2233848 21,14.498944 L21,14.504611 C21,14.7782068 20.7680664,15 20.5,15 C20.2238576,15 20,14.7842474 20,14.504611 L20,14.498944 C20,14.2286827 19.7766152,14 19.501056,14 L19.495389,14 C19.2217932,14 19,13.7680664 19,13.5 C19,13.2238576 19.2157526,13 19.495389,13 L19.501056,13 C19.7713173,13 20,12.7766152 20,12.501056 L20,12.495389 C20,12.2217932 20.2319336,12 20.5,12 C20.7761424,12 21,12.2157526 21,12.495389 Z M8,4.49538898 L8,4.501056 C8,4.77131733 8.22338484,5 8.498944,5 L8.50461102,5 C8.7782068,5 9,5.23193359 9,5.5 C9,5.77614237 8.7842474,6 8.50461102,6 L8.498944,6 C8.22868267,6 8,6.22338484 8,6.498944 L8,6.50461102 C8,6.7782068 7.76806641,7 7.5,7 C7.22385763,7 7,6.7842474 7,6.50461102 L7,6.498944 C7,6.22868267 6.77661516,6 6.501056,6 L6.49538898,6 C6.2217932,6 6,5.76806641 6,5.5 C6,5.22385763 6.2157526,5 6.49538898,5 L6.501056,5 C6.77131733,5 7,4.77661516 7,4.501056 L7,4.49538898 C7,4.2217932 7.23193359,4 7.5,4 C7.77614237,4 8,4.2157526 8,4.49538898 Z" id="Sparkles" fill="#333333"></path>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/application/assets/fonts/icons/mail-open.svg b/application/assets/fonts/icons/mail-open.svg
new file mode 100644
index 00000000..425eb965
--- /dev/null
+++ b/application/assets/fonts/icons/mail-open.svg
@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 44.1 (41455) - http://www.bohemiancoding.com/sketch -->
+    <title>mail-open</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linejoin="round">
+        <g id="Artboard-4" transform="translate(-400.000000, -159.000000)" stroke="#333333" stroke-width="2">
+            <g id="29" transform="translate(400.000000, 159.000000)">
+                <path d="M2,8.99850233 C2,8.08392663 2.5859285,7.0863017 3.38430372,6.64526039 L12.0537788,1.85603778 L20.6133954,6.63849442 C21.4121677,7.08478707 22,8.0847229 22,8.99850233 L22,20.0014977 C22,21.10406 21.1085244,22 20.0066023,22 L3.99339768,22 C2.89140744,22 2,21.1037364 2,20.0014977 L2,8.99850233 Z" id="Envelope"></path>
+                <polyline id="Fold" stroke-linecap="round" points="6 11 12 16 18 11"></polyline>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/application/assets/fonts/icons/mail.svg b/application/assets/fonts/icons/mail.svg
new file mode 100644
index 00000000..6294b00e
--- /dev/null
+++ b/application/assets/fonts/icons/mail.svg
@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 44.1 (41455) - http://www.bohemiancoding.com/sketch -->
+    <title>mail</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linejoin="round">
+        <g id="Artboard-4" transform="translate(-356.000000, -159.000000)" stroke="#333333" stroke-width="2">
+            <g id="80" transform="translate(356.000000, 159.000000)">
+                <rect id="Envelope" x="2" y="5" width="20" height="15" rx="1"></rect>
+                <polyline id="Fold" stroke-linecap="round" points="6 9 12 14 18 9"></polyline>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/application/assets/fonts/icons/mallet.svg b/application/assets/fonts/icons/mallet.svg
new file mode 100644
index 00000000..7aa8664a
--- /dev/null
+++ b/application/assets/fonts/icons/mallet.svg
@@ -0,0 +1,21 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 44.1 (41455) - http://www.bohemiancoding.com/sketch -->
+    <title>mallet</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard-4" transform="translate(-92.000000, -643.000000)">
+            <g id="242" transform="translate(86.000000, 642.000000)">
+                <g id="mallet" transform="translate(15.702796, 15.402808) rotate(-315.000000) translate(-15.702796, -15.402808) translate(7.202796, 2.402808)">
+                    <g>
+                        <path d="M7,1.49125692 C7,0.667658464 7.66579723,0 8.5,0 C9.32842712,0 10,0.6688281 10,1.49125692 L10,24.5087431 C10,25.3323415 9.33420277,26 8.5,26 C7.67157288,26 7,25.3311719 7,24.5087431 L7,1.49125692 Z M7,3 L7,11 L10,11 L10,3 L7,3 Z" id="Combined-Shape" fill="#333333"></path>
+                        <path d="M1,3.99703014 C1,3.4463856 1.44892021,3 2.00748397,3 L14.992516,3 C15.5489341,3 16,3.45303631 16,3.99703014 L16,10.0029699 C16,10.5536144 15.5510798,11 14.992516,11 L2.00748397,11 C1.45106594,11 1,10.5469637 1,10.0029699 L1,3.99703014 Z" id="Rectangle-186" stroke="#333333" stroke-width="2"></path>
+                        <rect id="Rectangle-187" fill="#333333" x="14" y="1" width="3" height="12" rx="1.5"></rect>
+                        <rect id="Rectangle-187" fill="#333333" x="0" y="1" width="3" height="12" rx="1.5"></rect>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/application/assets/fonts/icons/map-pin.svg b/application/assets/fonts/icons/map-pin.svg
new file mode 100644
index 00000000..7e2561b3
--- /dev/null
+++ b/application/assets/fonts/icons/map-pin.svg
@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 44.1 (41455) - http://www.bohemiancoding.com/sketch -->
+    <title>map-pin</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard-4" transform="translate(-268.000000, -159.000000)" stroke="#333333" stroke-width="2">
+            <g id="26" transform="translate(268.000000, 159.000000)">
+                <path d="M12,23 C12,23 20,15 20,9 C20,4.581722 16.418278,1 12,1 C7.581722,1 4,4.581722 4,9 C4,15 12,23 12,23 Z" id="Pin" stroke-linejoin="round"></path>
+                <circle id="Hole" cx="12" cy="9" r="3"></circle>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/application/assets/fonts/icons/map.svg b/application/assets/fonts/icons/map.svg
new file mode 100644
index 00000000..1fcaa6e1
--- /dev/null
+++ b/application/assets/fonts/icons/map.svg
@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 44.1 (41455) - http://www.bohemiancoding.com/sketch -->
+    <title>map</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
+        <g id="Artboard-4" transform="translate(-268.000000, -423.000000)" stroke="#333333" stroke-width="2">
+            <g id="146" transform="translate(268.000000, 423.000000)">
+                <polygon id="Left" points="3 3 9 5 9 21 3 19"></polygon>
+                <polygon id="Mid" fill-opacity="0.194491621" fill="#333333" transform="translate(12.000000, 12.000000) scale(-1, 1) translate(-12.000000, -12.000000) " points="9 3 15 5 15 21 9 19"></polygon>
+                <polygon id="Right" points="15 3 21 5 21 21 15 19"></polygon>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/application/assets/fonts/icons/megaphone.svg b/application/assets/fonts/icons/megaphone.svg
new file mode 100644
index 00000000..b5c8ae2d
--- /dev/null
+++ b/application/assets/fonts/icons/megaphone.svg
@@ -0,0 +1,19 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 44.1 (41455) - http://www.bohemiancoding.com/sketch -->
+    <title>megaphone</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard-4" transform="translate(-356.000000, -863.000000)">
+            <g id="348" transform="translate(356.000000, 863.000000)">
+                <rect id="End" fill="#333333" x="17" y="3" width="3" height="16" rx="1.5"></rect>
+                <circle id="Inner" fill="#333333" cx="20" cy="11" r="2"></circle>
+                <path d="M6.5,8 C4.5,8 3,9.56700338 3,11.5 C3,13.4329966 4.56700338,15 6.5,15 C7.5,15 12.5,15 18.5,18 C18.5,15.5 18.5,6.5 18.5,4 C12.5,8 7.5,8 6.5,8 Z" id="Body" stroke="#333333" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
+                <path d="M6.5,8 L6.5,15" id="1" stroke="#333333"></path>
+                <path d="M9.5,8 L9.5,15" id="2" stroke="#333333"></path>
+                <path d="M8,16 L9.5,20.5" id="Handl" stroke="#333333" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"></path>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/application/assets/fonts/icons/menu.svg b/application/assets/fonts/icons/menu.svg
new file mode 100644
index 00000000..9cd570ea
--- /dev/null
+++ b/application/assets/fonts/icons/menu.svg
@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 44.1 (41455) - http://www.bohemiancoding.com/sketch -->
+    <title>menu</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard-4" transform="translate(-180.000000, -203.000000)" stroke="#333333">
+            <g id="44" transform="translate(180.000000, 203.000000)">
+                <path d="M3.5,7 C3.5,7.27910535 3.72002141,7.5 3.99339768,7.5 L20.0066023,7.5 C20.2782464,7.5 20.5,7.27680164 20.5,7 C20.5,6.72089465 20.2799786,6.5 20.0066023,6.5 L3.99339768,6.5 C3.72175357,6.5 3.5,6.72319836 3.5,7 Z M3.5,12 C3.5,12.2791054 3.72002141,12.5 3.99339768,12.5 L20.0066023,12.5 C20.2782464,12.5 20.5,12.2768016 20.5,12 C20.5,11.7208946 20.2799786,11.5 20.0066023,11.5 L3.99339768,11.5 C3.72175357,11.5 3.5,11.7231984 3.5,12 Z M3.5,17 C3.5,17.2791054 3.72002141,17.5 3.99339768,17.5 L20.0066023,17.5 C20.2782464,17.5 20.5,17.2768016 20.5,17 C20.5,16.7208946 20.2799786,16.5 20.0066023,16.5 L3.99339768,16.5 C3.72175357,16.5 3.5,16.7231984 3.5,17 Z" id="Combined-Shape"></path>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/application/assets/fonts/icons/mic.svg b/application/assets/fonts/icons/mic.svg
new file mode 100644
index 00000000..5d440d95
--- /dev/null
+++ b/application/assets/fonts/icons/mic.svg
@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 44.1 (41455) - http://www.bohemiancoding.com/sketch -->
+    <title>mic</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard-4" transform="translate(-576.000000, -247.000000)">
+            <g id="73" transform="translate(576.000000, 247.000000)">
+                <rect id="Mic" stroke="#333333" stroke-width="2" x="9" y="2" width="6" height="12" rx="3"></rect>
+                <path d="M18,8.02514648 L18,11.0011767 C18,14.3142353 15.3069658,17 12,17 L12,17 C8.6862915,17 6,14.3225826 6,10.9935314 L6,7.99499512 L6,7.99499512" id="Stand" stroke="#333333" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
+                <path d="M11,21.0004057 L7.4955775,21.0004057 C6.94483697,21.0004057 6.5,21.4480301 6.5,22.0002028 C6.5,22.5562252 6.94573523,23 7.4955775,23 L11,23 L13,23.0002028 L16.5044225,23 C17.055163,23 17.5,22.5523756 17.5,22.0002028 C17.5,21.4441805 17.0542648,21.0004057 16.5044225,21.0004057 L13,21.0004057 L13,17.0016228 L11,17.0016228 L11,21.0004057 Z" id="Base" fill="#333333"></path>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/application/assets/fonts/icons/minus.svg b/application/assets/fonts/icons/minus.svg
new file mode 100644
index 00000000..3411999d
--- /dev/null
+++ b/application/assets/fonts/icons/minus.svg
@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 44.1 (41455) - http://www.bohemiancoding.com/sketch -->
+    <title>minus</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard-4" transform="translate(-356.000000, -643.000000)" fill="#333333">
+            <g id="248" transform="translate(356.000000, 643.000000)">
+                <rect id="Minus" transform="translate(12.000000, 12.000000) rotate(-90.000000) translate(-12.000000, -12.000000) " x="11" y="4" width="2" height="16" rx="1"></rect>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/application/assets/fonts/icons/mitten.svg b/application/assets/fonts/icons/mitten.svg
new file mode 100644
index 00000000..40dce333
--- /dev/null
+++ b/application/assets/fonts/icons/mitten.svg
@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 44.1 (41455) - http://www.bohemiancoding.com/sketch -->
+    <title>mitten</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard-4" transform="translate(-664.000000, -555.000000)" stroke="#333333" stroke-width="2">
+            <g id="215" transform="translate(664.000000, 555.000000)">
+                <rect id="Trim" x="4" y="18" width="15" height="4" rx="2"></rect>
+                <path d="M16,8.46108246 L16,6.99668583 C16,4.24157855 13.7614237,2 11,2 C8.24419519,2 6,4.23709245 6,6.99668583 L6,18 L16,18 L16,15.5321503 L20.2309588,11.3011915 C21.2074375,10.3247128 21.2051601,8.74407768 20.2288494,7.76776695 C19.245732,6.78464956 17.6705706,6.79051183 16.6954249,7.76565759 L16,8.46108246 Z" id="Mitten" stroke-linecap="round" stroke-linejoin="round"></path>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/application/assets/fonts/icons/mobile-data.svg b/application/assets/fonts/icons/mobile-data.svg
new file mode 100644
index 00000000..6d17b187
--- /dev/null
+++ b/application/assets/fonts/icons/mobile-data.svg
@@ -0,0 +1,20 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 44.1 (41455) - http://www.bohemiancoding.com/sketch -->
+    <title>mobile-data</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard-4" transform="translate(-488.000000, -511.000000)">
+            <g id="191" transform="translate(488.000000, 511.000000)">
+                <polyline id="Mast" stroke="#333333" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" points="5 23 12 8 19 23"></polyline>
+                <circle id="Tip" fill="#333333" cx="12" cy="7" r="2"></circle>
+                <path d="M12,9 L12,23" id="Mast-Leg" stroke="#333333" stroke-width="2" stroke-linecap="round"></path>
+                <path d="M19,23 L8,16 L19,23 Z" id="Mast-Support" stroke="#333333"></path>
+                <path d="M16,23 L5,16 L16,23 Z" id="Mast-Support" stroke="#333333" transform="translate(10.500000, 19.500000) scale(-1, 1) translate(-10.500000, -19.500000) "></path>
+                <path d="M7.28846879,3.28456761 C6.48158342,4.3063776 6,5.59694888 6,7 C6,8.41311382 6.48851603,9.71212861 7.30587991,10.7373762 M16.7342585,10.6864699 C17.5274514,9.66928573 18,8.38982768 18,7 C18,5.59877562 17.5196698,4.30973837 16.7146812,3.28856008" id="Radio-Waves-1" stroke="#333333" stroke-width="2" stroke-linecap="round"></path>
+                <path d="M2.74593423,1.05091292 C1.64106815,2.76603232 1,4.80815142 1,7 C1,9.22931821 1.6631736,11.3037439 2.80300299,13.0367593 M21.2161707,13.0075063 C22.3442601,11.2804208 23,9.21678853 23,7 C23,4.79436429 22.3508416,2.74034764 21.2331613,1.01858654" id="Radio-Waves-2" stroke="#333333" stroke-width="2" stroke-linecap="round"></path>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/application/assets/fonts/icons/money-note.svg b/application/assets/fonts/icons/money-note.svg
new file mode 100644
index 00000000..6617e85e
--- /dev/null
+++ b/application/assets/fonts/icons/money-note.svg
@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 44.1 (41455) - http://www.bohemiancoding.com/sketch -->
+    <title>money-note</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard-4" transform="translate(-532.000000, -599.000000)" stroke="#333333" stroke-width="2">
+            <g id="232" transform="translate(532.000000, 599.000000)">
+                <path d="M2,7.00247329 C2,6.44882258 2.45530558,6 2.99180311,6 L21.0081969,6 C21.5559546,6 22,6.45576096 22,7.00247329 L22,16.9975267 C22,17.5511774 21.5446944,18 21.0081969,18 L2.99180311,18 C2.44404538,18 2,17.544239 2,16.9975267 L2,7.00247329 Z M12,14 C13.1045695,14 14,13.1045695 14,12 C14,10.8954305 13.1045695,10 12,10 C10.8954305,10 10,10.8954305 10,12 C10,13.1045695 10.8954305,14 12,14 Z" id="Body" stroke-linejoin="round"></path>
+                <path d="M18,7 C18,8.5 19.5,10 21,10" id="Corner-4"></path>
+                <path d="M3,7 C3,8.5 4.5,10 6,10" id="Corner-3" transform="translate(4.500000, 8.500000) scale(-1, 1) translate(-4.500000, -8.500000) "></path>
+                <path d="M18,14 C18,15.5 19.5,17 21,17" id="Corner-2" transform="translate(19.500000, 15.500000) scale(1, -1) translate(-19.500000, -15.500000) "></path>
+                <path d="M3,14 C3,15.5 4.5,17 6,17" id="Corner-1" transform="translate(4.500000, 15.500000) scale(-1, -1) translate(-4.500000, -15.500000) "></path>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/application/assets/fonts/icons/money-notes.svg b/application/assets/fonts/icons/money-notes.svg
new file mode 100644
index 00000000..17f0f350
--- /dev/null
+++ b/application/assets/fonts/icons/money-notes.svg
@@ -0,0 +1,24 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 44.1 (41455) - http://www.bohemiancoding.com/sketch -->
+    <title>money-notes</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard-4" transform="translate(-576.000000, -599.000000)" stroke="#333333" stroke-width="2">
+            <g id="233" transform="translate(576.000000, 599.000000)">
+                <g id="Group-5" transform="translate(11.708656, 8.176566) rotate(-15.000000) translate(-11.708656, -8.176566) translate(1.208656, 5.176566)">
+                    <path d="M-1.4321877e-13,4.74401339 L-1.4321877e-13,1.00608322 C-1.4321877e-13,0.450438802 0.455305576,6.83897383e-14 0.99180311,6.83897383e-14 L19.0081969,6.83897383e-14 C19.5559546,6.83897383e-14 20,0.45114915 20,1.00587566 L20,4.53235134 L20.0034103,5.36363682" id="Body" stroke-linejoin="round"></path>
+                    <path d="M16,1 C16,2.5 17.5,4 19,4" id="Corner" opacity="0.5"></path>
+                </g>
+                <g id="Group-5" transform="translate(2.000000, 8.000000)">
+                    <path d="M0,1.00247329 C0,0.448822582 0.455305576,0 0.99180311,0 L19.0081969,0 C19.5559546,0 20,0.455760956 20,1.00247329 L20,10.9975267 C20,11.5511774 19.5446944,12 19.0081969,12 L0.99180311,12 C0.444045377,12 0,11.544239 0,10.9975267 L0,1.00247329 Z M10,8 C11.1045695,8 12,7.1045695 12,6 C12,4.8954305 11.1045695,4 10,4 C8.8954305,4 8,4.8954305 8,6 C8,7.1045695 8.8954305,8 10,8 Z" id="Body" stroke-linejoin="round"></path>
+                    <path d="M16,1 C16,2.5 17.5,4 19,4" id="Corner-4"></path>
+                    <path d="M1,1 C1,2.5 2.5,4 4,4" id="Corner-3" transform="translate(2.500000, 2.500000) scale(-1, 1) translate(-2.500000, -2.500000) "></path>
+                    <path d="M16,8 C16,9.5 17.5,11 19,11" id="Corner-2" transform="translate(17.500000, 9.500000) scale(1, -1) translate(-17.500000, -9.500000) "></path>
+                    <path d="M1,8 C1,9.5 2.5,11 4,11" id="Corner-1" transform="translate(2.500000, 9.500000) scale(-1, -1) translate(-2.500000, -9.500000) "></path>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/application/assets/fonts/icons/money-stack.svg b/application/assets/fonts/icons/money-stack.svg
new file mode 100644
index 00000000..5d396f5f
--- /dev/null
+++ b/application/assets/fonts/icons/money-stack.svg
@@ -0,0 +1,28 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 44.1 (41455) - http://www.bohemiancoding.com/sketch -->
+    <title>money-stack</title>
+    <desc>Created with Sketch.</desc>
+    <defs>
+        <linearGradient x1="50%" y1="0%" x2="50%" y2="14.4287109%" id="linearGradient-1">
+            <stop stop-color="#333333" stop-opacity="0" offset="0%"></stop>
+            <stop stop-color="#333333" offset="100%"></stop>
+        </linearGradient>
+    </defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard-4" transform="translate(-620.000000, -599.000000)">
+            <g id="234" transform="translate(620.000000, 599.000000)">
+                <path d="M22,14 L22,16.9975267 C22,17.5511774 21.5446944,18 21.0081969,18 L16,18 M8,18 L2.99180311,18 C2.44404538,18 2,17.544239 2,16.9975267 L2,14" id="Bottom" stroke="#333333" stroke-width="2"></path>
+                <path d="M22,17 L22,19.9975267 C22,20.5511774 21.5446944,21 21.0081969,21 L16,21 M8,21 L2.99180311,21 C2.44404538,21 2,20.544239 2,19.9975267 L2,17" id="Mid" stroke="#333333" stroke-width="2"></path>
+                <path d="M8.04052734,15 L2.99747024,15 C2.44658264,15 2,14.544239 2,13.9975267 L2,4.00247329 L2,4.00247329 C2,3.44882258 2.45519573,3 3.00005039,3 L8.05615234,3 M15.9989014,3 L21.0090406,3 C21.5563324,3 22,3.45576096 22,4.00247329 L22,13.9975267 C22,14.5511774 21.5486945,15 21.0084964,15 L15.9956055,15" id="Top" stroke="#333333" stroke-width="2" stroke-linejoin="round"></path>
+                <path d="M18,4 C18,5.5 19.5,7 21,7" id="Corner-4" stroke="#333333" stroke-width="2"></path>
+                <path d="M3,4 C3,5.5 4.5,7 6,7" id="Corner-3" stroke="#333333" stroke-width="2" transform="translate(4.500000, 5.500000) scale(-1, 1) translate(-4.500000, -5.500000) "></path>
+                <path d="M18,11 C18,12.5 19.5,14 21,14" id="Corner-2" stroke="#333333" stroke-width="2" transform="translate(19.500000, 12.500000) scale(1, -1) translate(-19.500000, -12.500000) "></path>
+                <path d="M3,11 C3,12.5 4.5,14 6,14" id="Corner-1" stroke="#333333" stroke-width="2" transform="translate(4.500000, 12.500000) scale(-1, -1) translate(-4.500000, -12.500000) "></path>
+                <rect id="Strap" stroke="#333333" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" x="8" y="2" width="8" height="20"></rect>
+                <circle id="Seal" fill="#333333" cx="12" cy="8" r="2"></circle>
+                <rect id="Tint" fill="url(#linearGradient-1)" opacity="0.25" x="2" y="15" width="20" height="6"></rect>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/application/assets/fonts/icons/monitor.svg b/application/assets/fonts/icons/monitor.svg
new file mode 100644
index 00000000..0b357ddc
--- /dev/null
+++ b/application/assets/fonts/icons/monitor.svg
@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 44.1 (41455) - http://www.bohemiancoding.com/sketch -->
+    <title>monitor</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard-4" transform="translate(-180.000000, -423.000000)">
+            <g id="144" transform="translate(180.000000, 423.000000)">
+                <path d="M11,20 L6.00684547,20 C5.44994876,20 5,20.4477153 5,21 C5,21.5561352 5.45078007,22 6.00684547,22 L17.9931545,22 C18.5500512,22 19,21.5522847 19,21 C19,20.4438648 18.5492199,20 17.9931545,20 L13,20 L13,18 L11,18 L11,20 Z" id="Stand" fill="#333333"></path>
+                <rect id="screen" stroke="#333333" stroke-width="2" x="2" y="4" width="20" height="14" rx="1"></rect>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/application/assets/fonts/icons/moon.svg b/application/assets/fonts/icons/moon.svg
new file mode 100644
index 00000000..a8649d54
--- /dev/null
+++ b/application/assets/fonts/icons/moon.svg
@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 44.1 (41455) - http://www.bohemiancoding.com/sketch -->
+    <title>moon</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
+        <g id="Artboard-4" transform="translate(-664.000000, -203.000000)" stroke="#333333" stroke-width="2">
+            <g id="55" transform="translate(664.000000, 203.000000)">
+                <path d="M10.2606454,4.99132455 C9.44426893,6.15767823 9,7.54423175 9,9 C9,12.8659932 12.1340068,16 16,16 C16.7713361,16 17.5244505,15.8755937 18.2389763,15.6345631 L21.1235221,14.6615206 L19.3778653,17.1555331 C17.7047464,19.5459111 14.9739035,21 12,21 C7.02943725,21 3,16.9705627 3,12 C3,8.10853649 5.49230528,4.69467553 9.12175642,3.47035451 L12.0063022,2.49731207 L10.2606454,4.99132455 Z" id="Combined-Shape"></path>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/application/assets/fonts/icons/more-h.svg b/application/assets/fonts/icons/more-h.svg
new file mode 100644
index 00000000..276854df
--- /dev/null
+++ b/application/assets/fonts/icons/more-h.svg
@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 44.1 (41455) - http://www.bohemiancoding.com/sketch -->
+    <title>more-h</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard-4" transform="translate(-444.000000, -115.000000)" fill="#333333">
+            <g id="10" transform="translate(444.000000, 115.000000)">
+                <path d="M10,12 C10,10.8954305 10.8877296,10 12,10 C13.1045695,10 14,10.8877296 14,12 C14,13.1045695 13.1122704,14 12,14 C10.8954305,14 10,13.1122704 10,12 Z M17,12 C17,10.8954305 17.8877296,10 19,10 C20.1045695,10 21,10.8877296 21,12 C21,13.1045695 20.1122704,14 19,14 C17.8954305,14 17,13.1122704 17,12 Z M3,12 C3,10.8954305 3.88772964,10 5,10 C6.1045695,10 7,10.8877296 7,12 C7,13.1045695 6.11227036,14 5,14 C3.8954305,14 3,13.1122704 3,12 Z" id="Combined-Shape"></path>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/application/assets/fonts/icons/more-v.svg b/application/assets/fonts/icons/more-v.svg
new file mode 100644
index 00000000..db955d62
--- /dev/null
+++ b/application/assets/fonts/icons/more-v.svg
@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 44.1 (41455) - http://www.bohemiancoding.com/sketch -->
+    <title>more-v</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard-4" transform="translate(-268.000000, -1046.000000)" fill="#333333">
+            <g id="Extras" transform="translate(48.000000, 1046.000000)">
+                <g id="more-vertical" transform="translate(220.000000, 0.000000)">
+                    <path d="M10,12 C10,10.8954305 10.8877296,10 12,10 C13.1045695,10 14,10.8877296 14,12 C14,13.1045695 13.1122704,14 12,14 C10.8954305,14 10,13.1122704 10,12 Z M10,5 C10,3.8954305 10.8877296,3 12,3 C13.1045695,3 14,3.88772964 14,5 C14,6.1045695 13.1122704,7 12,7 C10.8954305,7 10,6.11227036 10,5 Z M10,19 C10,17.8954305 10.8877296,17 12,17 C13.1045695,17 14,17.8877296 14,19 C14,20.1045695 13.1122704,21 12,21 C10.8954305,21 10,20.1122704 10,19 Z" id="Dots"></path>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/application/assets/fonts/icons/move.svg b/application/assets/fonts/icons/move.svg
new file mode 100644
index 00000000..3bb66829
--- /dev/null
+++ b/application/assets/fonts/icons/move.svg
@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 44.1 (41455) - http://www.bohemiancoding.com/sketch -->
+    <title>move</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard-4" transform="translate(-356.000000, -687.000000)" stroke="#333333" stroke-width="2">
+            <g id="268" transform="translate(356.000000, 687.000000)">
+                <path d="M12,3 L14,5 L10,5 L12,3 Z M12,21 L10,19 L14,19 L12,21 Z M3,12 L5,10 L5,14 L3,12 Z M21,12 L19,14 L19,10 L21,12 Z" id="Arrows" stroke-linecap="round" stroke-linejoin="round"></path>
+                <path d="M12,5 L12,19.0415946" id="Path-206"></path>
+                <path d="M5,12 L19,12" id="Path-206"></path>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/application/assets/fonts/icons/mug.svg b/application/assets/fonts/icons/mug.svg
new file mode 100644
index 00000000..62bd75dd
--- /dev/null
+++ b/application/assets/fonts/icons/mug.svg
@@ -0,0 +1,19 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 44.1 (41455) - http://www.bohemiancoding.com/sketch -->
+    <title>mug</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard-4" transform="translate(-884.000000, -555.000000)" stroke="#333333" stroke-width="2">
+            <g id="220" transform="translate(884.000000, 555.000000)">
+                <path d="M17,7 L17,19.0014977 C17,19.5529553 16.6575356,20.2780914 16.1969355,20.5784829 C16.1969355,20.5784829 15,22 10,22 C5,22 3.80306453,20.5784829 3.80306453,20.5784829 C3.35954423,20.2589956 3,19.5525106 3,19.0014977 L3,7" id="Body" stroke-linecap="round" stroke-linejoin="round"></path>
+                <ellipse id="Rim" cx="10" cy="7" rx="7" ry="2"></ellipse>
+                <path d="M17,11 C17,11 17.5,9 19.5,9 C21.5,9 22,10.5 22,12 C22,15 17,17 17,17" id="Handle"></path>
+                <path d="M6,2 C6,3.25 5,3.25 5,4.5 C5,5.75 6,5.75 6,7" id="Path-8" opacity="0.5" stroke-linecap="round" stroke-linejoin="round"></path>
+                <path d="M10,2 C10,3.25 9,3.25 9,4.5 C9,5.75 10,5.75 10,7" id="Path-8" opacity="0.5" stroke-linecap="round" stroke-linejoin="round"></path>
+                <path d="M14,2 C14,3.25 13,3.25 13,4.5 C13,5.75 14,5.75 14,7" id="Path-8" opacity="0.5" stroke-linecap="round" stroke-linejoin="round"></path>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/application/assets/fonts/icons/multiply.svg b/application/assets/fonts/icons/multiply.svg
new file mode 100644
index 00000000..77aa1d22
--- /dev/null
+++ b/application/assets/fonts/icons/multiply.svg
@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 44.1 (41455) - http://www.bohemiancoding.com/sketch -->
+    <title>multiply</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round">
+        <g id="Artboard-4" transform="translate(-400.000000, -643.000000)" stroke="#333333" stroke-width="2">
+            <g id="249" transform="translate(400.000000, 643.000000)">
+                <path d="M7,7 L17,17" id="Path-182"></path>
+                <path d="M7,7 L17,17" id="Path-182" transform="translate(12.000000, 12.000000) scale(-1, 1) translate(-12.000000, -12.000000) "></path>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/application/assets/fonts/icons/music.svg b/application/assets/fonts/icons/music.svg
new file mode 100644
index 00000000..bf2271ba
--- /dev/null
+++ b/application/assets/fonts/icons/music.svg
@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 44.1 (41455) - http://www.bohemiancoding.com/sketch -->
+    <title>music</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard-4" transform="translate(-752.000000, -159.000000)" stroke="#333333" stroke-width="2">
+            <g id="37" transform="translate(752.000000, 159.000000)">
+                <path d="M20,16.5 L20,1.99810135 C20,1.52153048 19.7030695,1.27919 19.2351281,1.37277828 L8.15710418,3.58838307 C7.53739194,3.71232551 7,4.36865504 7,4.99810135 L7,17 L4.5,17 C3.12168932,17 2,18.1208193 2,19.5 C2,20.8783107 3.12081929,22 4.5,22 C5.87831068,22 7,20.8791807 7,19.5 L7,9.7801961 L20,7.1801961 L20,14 L17.5,14 C16.1216893,14 15,15.1208193 15,16.5 C15,17.8783107 16.1208193,19 17.5,19 C18.8783107,19 20,17.8791807 20,16.5 Z" id="Combined-Shape"></path>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/application/assets/fonts/icons/negative.svg b/application/assets/fonts/icons/negative.svg
new file mode 100644
index 00000000..0e2a9270
--- /dev/null
+++ b/application/assets/fonts/icons/negative.svg
@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 44.1 (41455) - http://www.bohemiancoding.com/sketch -->
+    <title>negative</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round">
+        <g id="Artboard-4" transform="translate(-532.000000, -643.000000)" stroke="#333333" stroke-width="2">
+            <g id="252" transform="translate(532.000000, 643.000000)">
+                <path d="M8,6 L16,18" id="Line" transform="translate(12.000000, 12.000000) scale(-1, 1) translate(-12.000000, -12.000000) "></path>
+                <path d="M14,16 L20,16" id="Minus"></path>
+                <path d="M7,5 L7,11" id="Plus"></path>
+                <path d="M4,8 L10,8" id="Plus"></path>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/application/assets/fonts/icons/new.svg b/application/assets/fonts/icons/new.svg
new file mode 100644
index 00000000..87b631b2
--- /dev/null
+++ b/application/assets/fonts/icons/new.svg
@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 44.1 (41455) - http://www.bohemiancoding.com/sketch -->
+    <title>new</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard-4" transform="translate(-92.000000, -203.000000)" stroke="#333333" stroke-width="2">
+            <g id="42" transform="translate(92.000000, 203.000000)">
+                <path d="M7,20.0000003 L7,16 L17.8893663,5.11063365 C19.0596382,3.94036178 20.9543008,3.94158745 22.1210495,5.11320627 L21.8872816,4.87846259 C23.0541037,6.05015528 23.044079,7.95592095 21.8823924,9.11760756 L11,20.0000003 L7,20.0000003 Z" id="Pencil" stroke-linecap="round" stroke-linejoin="round"></path>
+                <path d="M16.5,6.5 L20.5,10.5" id="Eraser"></path>
+                <path d="M1,20 L4,20" id="Line" stroke-linecap="round" stroke-linejoin="round"></path>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/application/assets/fonts/icons/newspaper.svg b/application/assets/fonts/icons/newspaper.svg
new file mode 100644
index 00000000..c028e222
--- /dev/null
+++ b/application/assets/fonts/icons/newspaper.svg
@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 44.1 (41455) - http://www.bohemiancoding.com/sketch -->
+    <title>newspaper</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard-4" transform="translate(-400.000000, -379.000000)">
+            <g id="128" transform="translate(400.000000, 379.000000)">
+                <path d="M4,12 L4,5.99791312 C4,4.89449617 4.8926228,4 5.99508929,4 L20.0049107,4 C21.1067681,4 22,4.89706013 22,6.00585866 L22,17.9941413 C22,19.1019465 21.1073772,20 20.0049107,20 L2.5,20" id="Front-Page" stroke="#333333" stroke-width="2"></path>
+                <path d="M4,6 L4,18.5017548 C4,19.3292128 3.33420277,20 2.5,20 L2.5,20 C1.67157288,20 1,19.3247509 1,18.5017548 L1,7.49824524 C1,6.67078724 1.66579723,6 2.5,6 L4,6 Z" id="Fold" stroke="#333333" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
+                <rect id="Title" stroke="#333333" x="7.5" y="7.5" width="11" height="1" rx="0.5"></rect>
+                <path d="M7,11 L12,11 L12,16 L7,16 L7,11 Z M13,11.5 C13,11.2238576 13.2278805,11 13.4910052,11 L18.5089948,11 C18.7801695,11 19,11.2319336 19,11.5 C19,11.7761424 18.7721195,12 18.5089948,12 L13.4910052,12 C13.2198305,12 13,11.7680664 13,11.5 Z M13,13.5 C13,13.2238576 13.2278805,13 13.4910052,13 L18.5089948,13 C18.7801695,13 19,13.2319336 19,13.5 C19,13.7761424 18.7721195,14 18.5089948,14 L13.4910052,14 C13.2198305,14 13,13.7680664 13,13.5 Z M13,15.5 C13,15.2238576 13.2278805,15 13.4910052,15 L18.5089948,15 C18.7801695,15 19,15.2319336 19,15.5 C19,15.7761424 18.7721195,16 18.5089948,16 L13.4910052,16 C13.2198305,16 13,15.7680664 13,15.5 Z" id="Content" fill="#333333" opacity="0.5"></path>
+                <rect id="Crease" fill="#333333" opacity="0.200000003" x="4" y="17.5" width="18" height="2"></rect>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/application/assets/fonts/icons/next.svg b/application/assets/fonts/icons/next.svg
new file mode 100644
index 00000000..91d5e5c2
--- /dev/null
+++ b/application/assets/fonts/icons/next.svg
@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 44.1 (41455) - http://www.bohemiancoding.com/sketch -->
+    <title>next</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linejoin="round">
+        <g id="Artboard-4" transform="translate(-620.000000, -115.000000)" stroke="#333333" stroke-width="2">
+            <g id="14" transform="translate(620.000000, 115.000000)">
+                <path d="M11,10.8333333 L1,5 L1,19 L11,13.1666667 L11,10.8333333 Z" id="Combined-Shape"></path>
+                <polygon id="Triangle-1" points="11 19 11 5 23 12"></polygon>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/application/assets/fonts/icons/night-shift.svg b/application/assets/fonts/icons/night-shift.svg
new file mode 100644
index 00000000..a338f9c3
--- /dev/null
+++ b/application/assets/fonts/icons/night-shift.svg
@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 44.1 (41455) - http://www.bohemiancoding.com/sketch -->
+    <title>night-shift</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard-4" transform="translate(-840.000000, -423.000000)">
+            <g id="159" transform="translate(840.000000, 423.000000)">
+                <path d="M17,12 C17,14.7614237 14.7614237,17 12,17 C9.23857625,17 7,14.7614237 7,12 C7,9.23857625 9.23857625,7 12,7 C14.7614237,7 17,9.23857625 17,12 Z M9,12 C9,13.6568542 10.3431458,15 12,15 C13.6568542,15 15,13.6568542 15,12 C15,10.3431458 13.6568542,9 12,9 C10.3431458,9 9,10.3431458 9,12 Z" id="Sun" fill="#333333" fill-rule="nonzero"></path>
+                <path d="M11,10.5 C11,9.11928813 12.1192881,8 13.5,8 C14.8807119,8 16,9.11928813 16,10.5 C16,11.8807119 14.8807119,13 13.5,13 C12.1192881,13 11,11.8807119 11,10.5 Z" id="Moon" fill="#333333"></path>
+                <path d="M12,5 L12,3 M16.9497475,7.05025253 L18.363961,5.63603897 M19,12 L21,12 M16.9497475,16.9497475 L18.363961,18.363961 M12,19 L12,21 M7.05025253,16.9497475 L5.63603897,18.363961 M5,12 L3,12 M7.05025253,7.05025253 L5.63603897,5.63603897" id="Rays" stroke="#333333" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/application/assets/fonts/icons/nintendo-switch-controller.svg b/application/assets/fonts/icons/nintendo-switch-controller.svg
new file mode 100644
index 00000000..b1fb60a4
--- /dev/null
+++ b/application/assets/fonts/icons/nintendo-switch-controller.svg
@@ -0,0 +1,25 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 44.1 (41455) - http://www.bohemiancoding.com/sketch -->
+    <title>nintendo-switch-controller</title>
+    <desc>Created with Sketch.</desc>
+    <defs>
+        <rect id="path-1" x="10" y="6" width="4" height="12"></rect>
+    </defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard-4" transform="translate(-268.000000, -775.000000)">
+            <g id="306" transform="translate(268.000000, 775.000000)">
+                <rect id="Body" stroke="#333333" stroke-width="2" x="5" y="6" width="14" height="12" rx="2"></rect>
+                <path d="M4,8 C4,8 1,13 1,16.5 C1,20 5,19.5 5,17 C5,14.5 4,8 4,8 Z" id="Left-Handle" fill="#333333"></path>
+                <path d="M22,8 C22,8 19,13 19,16.5 C19,20 23,19.5 23,17 C23,14.5 22,8 22,8 Z" id="Right-Handle" fill="#333333" transform="translate(21.000000, 13.500000) scale(-1, 1) translate(-21.000000, -13.500000) "></path>
+                <path d="M6.5,13 C6.22385763,13 6,12.7761424 6,12.5 C6,12.2238576 6.22385763,12 6.5,12 C6.77614237,12 7,12.2238576 7,12.5 C7,12.7761424 6.77614237,13 6.5,13 Z M7.5,14 C7.22385763,14 7,13.7761424 7,13.5 C7,13.2238576 7.22385763,13 7.5,13 C7.77614237,13 8,13.2238576 8,13.5 C8,13.7761424 7.77614237,14 7.5,14 Z M8.5,13 C8.22385763,13 8,12.7761424 8,12.5 C8,12.2238576 8.22385763,12 8.5,12 C8.77614237,12 9,12.2238576 9,12.5 C9,12.7761424 8.77614237,13 8.5,13 Z M7.5,12 C7.22385763,12 7,11.7761424 7,11.5 C7,11.2238576 7.22385763,11 7.5,11 C7.77614237,11 8,11.2238576 8,11.5 C8,11.7761424 7.77614237,12 7.5,12 Z" id="Left-Buttons" fill="#333333"></path>
+                <path d="M15.5,10 C15.2238576,10 15,9.77614237 15,9.5 C15,9.22385763 15.2238576,9 15.5,9 C15.7761424,9 16,9.22385763 16,9.5 C16,9.77614237 15.7761424,10 15.5,10 Z M16.5,11 C16.2238576,11 16,10.7761424 16,10.5 C16,10.2238576 16.2238576,10 16.5,10 C16.7761424,10 17,10.2238576 17,10.5 C17,10.7761424 16.7761424,11 16.5,11 Z M17.5,10 C17.2238576,10 17,9.77614237 17,9.5 C17,9.22385763 17.2238576,9 17.5,9 C17.7761424,9 18,9.22385763 18,9.5 C18,9.77614237 17.7761424,10 17.5,10 Z M16.5,9 C16.2238576,9 16,8.77614237 16,8.5 C16,8.22385763 16.2238576,8 16.5,8 C16.7761424,8 17,8.22385763 17,8.5 C17,8.77614237 16.7761424,9 16.5,9 Z" id="Right-Buttons" fill="#333333"></path>
+                <path d="M16.5,14 C15.9477153,14 15.5,13.5522847 15.5,13 C15.5,12.4477153 15.9477153,12 16.5,12 C17.0522847,12 17.5,12.4477153 17.5,13 C17.5,13.5522847 17.0522847,14 16.5,14 Z M7.5,10 C6.94771525,10 6.5,9.55228475 6.5,9 C6.5,8.44771525 6.94771525,8 7.5,8 C8.05228475,8 8.5,8.44771525 8.5,9 C8.5,9.55228475 8.05228475,10 7.5,10 Z" id="Combined-Shape" fill="#333333"></path>
+                <g id="Centre">
+                    <use fill-opacity="0.2" fill="#333333" fill-rule="evenodd" xlink:href="#path-1"></use>
+                    <rect stroke="#333333" stroke-width="1" x="9.5" y="5.5" width="5" height="13"></rect>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/application/assets/fonts/icons/nintendo-switch.svg b/application/assets/fonts/icons/nintendo-switch.svg
new file mode 100644
index 00000000..2db0f5b6
--- /dev/null
+++ b/application/assets/fonts/icons/nintendo-switch.svg
@@ -0,0 +1,23 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 44.1 (41455) - http://www.bohemiancoding.com/sketch -->
+    <title>nintendo-switch</title>
+    <desc>Created with Sketch.</desc>
+    <defs>
+        <rect id="path-1" x="6" y="6" width="12" height="12"></rect>
+    </defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard-4" transform="translate(-224.000000, -775.000000)">
+            <g id="305" transform="translate(224.000000, 775.000000)">
+                <rect id="Body" stroke="#333333" stroke-width="2" x="1" y="6" width="22" height="12" rx="2"></rect>
+                <g id="Screen">
+                    <use fill-opacity="0.199247056" fill="#333333" fill-rule="evenodd" xlink:href="#path-1"></use>
+                    <rect stroke="#333333" stroke-width="1" x="5.5" y="5.5" width="13" height="13"></rect>
+                </g>
+                <path d="M2.5,13 C2.22385763,13 2,12.7761424 2,12.5 C2,12.2238576 2.22385763,12 2.5,12 C2.77614237,12 3,12.2238576 3,12.5 C3,12.7761424 2.77614237,13 2.5,13 Z M3.5,14 C3.22385763,14 3,13.7761424 3,13.5 C3,13.2238576 3.22385763,13 3.5,13 C3.77614237,13 4,13.2238576 4,13.5 C4,13.7761424 3.77614237,14 3.5,14 Z M4.5,13 C4.22385763,13 4,12.7761424 4,12.5 C4,12.2238576 4.22385763,12 4.5,12 C4.77614237,12 5,12.2238576 5,12.5 C5,12.7761424 4.77614237,13 4.5,13 Z M3.5,12 C3.22385763,12 3,11.7761424 3,11.5 C3,11.2238576 3.22385763,11 3.5,11 C3.77614237,11 4,11.2238576 4,11.5 C4,11.7761424 3.77614237,12 3.5,12 Z" id="Left-Buttons" fill="#333333"></path>
+                <path d="M19.5,10 C19.2238576,10 19,9.77614237 19,9.5 C19,9.22385763 19.2238576,9 19.5,9 C19.7761424,9 20,9.22385763 20,9.5 C20,9.77614237 19.7761424,10 19.5,10 Z M20.5,11 C20.2238576,11 20,10.7761424 20,10.5 C20,10.2238576 20.2238576,10 20.5,10 C20.7761424,10 21,10.2238576 21,10.5 C21,10.7761424 20.7761424,11 20.5,11 Z M21.5,10 C21.2238576,10 21,9.77614237 21,9.5 C21,9.22385763 21.2238576,9 21.5,9 C21.7761424,9 22,9.22385763 22,9.5 C22,9.77614237 21.7761424,10 21.5,10 Z M20.5,9 C20.2238576,9 20,8.77614237 20,8.5 C20,8.22385763 20.2238576,8 20.5,8 C20.7761424,8 21,8.22385763 21,8.5 C21,8.77614237 20.7761424,9 20.5,9 Z" id="Right-Buttons" fill="#333333"></path>
+                <path d="M20.5,14 C19.9477153,14 19.5,13.5522847 19.5,13 C19.5,12.4477153 19.9477153,12 20.5,12 C21.0522847,12 21.5,12.4477153 21.5,13 C21.5,13.5522847 21.0522847,14 20.5,14 Z M3.5,10 C2.94771525,10 2.5,9.55228475 2.5,9 C2.5,8.44771525 2.94771525,8 3.5,8 C4.05228475,8 4.5,8.44771525 4.5,9 C4.5,9.55228475 4.05228475,10 3.5,10 Z" id="Sticks" fill="#333333"></path>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/application/assets/fonts/icons/no.svg b/application/assets/fonts/icons/no.svg
new file mode 100644
index 00000000..284ffeb0
--- /dev/null
+++ b/application/assets/fonts/icons/no.svg
@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 44.1 (41455) - http://www.bohemiancoding.com/sketch -->
+    <title>no</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard-4" transform="translate(-312.000000, -863.000000)" stroke="#333333" stroke-width="2">
+            <g id="347" transform="translate(312.000000, 863.000000)">
+                <circle id="Circle" cx="12" cy="12" r="9"></circle>
+                <path d="M18,18 L6,6" id="Line"></path>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/application/assets/fonts/icons/notification.svg b/application/assets/fonts/icons/notification.svg
new file mode 100644
index 00000000..e0efc04d
--- /dev/null
+++ b/application/assets/fonts/icons/notification.svg
@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 44.1 (41455) - http://www.bohemiancoding.com/sketch -->
+    <title>notification</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard-4" transform="translate(-664.000000, -335.000000)">
+            <g id="114" transform="translate(664.000000, 335.000000)">
+                <path d="M20,12 L20,18.0018986 C20,19.1054196 19.1054862,20 18.0059397,20 L5.99406028,20 C4.8927712,20 4,19.1054862 4,18.0059397 L4,5.99406028 L4,5.99406028 C4,4.8927712 4.88670635,4 5.99810135,4 L12,4" id="Icon" stroke="#333333" stroke-width="2" stroke-linecap="round"></path>
+                <circle id="Badge" fill="#333333" cx="18" cy="6" r="4"></circle>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/application/assets/fonts/icons/option.svg b/application/assets/fonts/icons/option.svg
new file mode 100644
index 00000000..f0612d56
--- /dev/null
+++ b/application/assets/fonts/icons/option.svg
@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 44.1 (41455) - http://www.bohemiancoding.com/sketch -->
+    <title>option</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
+        <g id="Artboard-4" transform="translate(-48.000000, -731.000000)" stroke="#333333" stroke-width="2">
+            <g id="281" transform="translate(48.000000, 731.000000)">
+                <polyline id="Alt" points="2 8 7 8 13 16 22 16"></polyline>
+                <path d="M12,8 L22,8" id="Path"></path>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/application/assets/fonts/icons/paperclip.svg b/application/assets/fonts/icons/paperclip.svg
new file mode 100644
index 00000000..f2d1535f
--- /dev/null
+++ b/application/assets/fonts/icons/paperclip.svg
@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 44.1 (41455) - http://www.bohemiancoding.com/sketch -->
+    <title>paperclip</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard-4" transform="translate(-224.000000, -247.000000)" fill="#333333">
+            <g id="65" transform="translate(223.000000, 246.000000)">
+                <path d="M14,10.4146471 L14,16.7577745 L14,18.6242371 L14,20.4906997 C14,21.876548 12.8903379,23 11.5,23 C10.1192881,23 9,21.8876343 9,20.4906996 L9,15.8788873 L9,12.2361065 L9,7.009763 C9,4.79523205 10.7953562,3 13,3 C15.209139,3 17,4.7877996 17,7.009763 L17,12.2361065 L17,17.9975267 C17,18.544239 17.4477153,19 18,19 C18.5561352,19 19,18.5511774 19,17.9975267 L19,7 C19,3.6862915 16.3137085,1 13,1 C9.6862915,1 7,3.6862915 7,7 L7,21 L7.02746439,21 C7.27618653,23.2499752 9.18372317,25 11.5,25 C13.8162768,25 15.7238135,23.2499752 15.9725356,21 L16,21 L16,7 C16,5.34314575 14.6568542,4 13,4 C11.3431458,4 10,5.34314575 10,7 L10,17.9975267 C10,18.544239 10.4477153,19 11,19 C11.5561352,19 12,18.5511774 12,17.9975267 L12,10.4146471 L12,6.99980749 C12,6.44762906 12.4438648,6 13,6 C13.5522847,6 14,6.44371665 14,6.99980749 L14,10.4146471 Z" id="Combined-Shape" transform="translate(13.000000, 13.000000) scale(1, -1) rotate(-315.000000) translate(-13.000000, -13.000000) "></path>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/application/assets/fonts/icons/party-popper.svg b/application/assets/fonts/icons/party-popper.svg
new file mode 100644
index 00000000..4cd480ca
--- /dev/null
+++ b/application/assets/fonts/icons/party-popper.svg
@@ -0,0 +1,19 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 44.1 (41455) - http://www.bohemiancoding.com/sketch -->
+    <title>party-popper</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard-4" transform="translate(-532.000000, -731.000000)">
+            <g id="292" transform="translate(532.000000, 731.000000)">
+                <path d="M16,17 L5.47390664,21.5671526 C2.45075148,22.9107771 1.08724134,21.553707 2.4328474,18.5260934 L7,8" id="Body" stroke="#333333" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
+                <path d="M11.5184001,14.3381155 C15.0257109,14.3381155 17.8372032,13.5356435 17.8372032,12.5021418 C17.8372032,11.4686401 15.0257109,10.5954748 11.5184001,10.5954748 C8.01108921,10.5954748 5.16785199,11.4332934 5.16785199,12.4667951 C5.16785199,13.5002968 8.01108921,14.3381155 11.5184001,14.3381155 Z" id="Rim" stroke="#333333" stroke-width="2" transform="translate(11.502528, 12.466795) rotate(-315.000000) translate(-11.502528, -12.466795) "></path>
+                <path d="M9,12.5 C9,12.5 12,7.75 10,3" id="Streamer-1" stroke="#333333" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
+                <path d="M12,15 C12.9522223,13.7303703 15.717899,13.2667204 17.9946146,13.3532263 C19.3043236,13.4029899 20.4522223,13.6348148 21,14" id="Streamer-2" stroke="#333333" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
+                <path d="M16,10 C16,10 13.6638302,6.16808491 15,5.5 C16,5 18,7.5 19,8 C20,8.5 17.5,4 18.5,3 C19.5,2 22,5 22,5" id="Streamer-3" stroke="#333333" stroke-width="2" stroke-linecap="round"></path>
+                <path d="M22,12 C21.4477153,12 21,11.5522847 21,11 C21,10.4477153 21.4477153,10 22,10 C22.5522847,10 23,10.4477153 23,11 C23,11.5522847 22.5522847,12 22,12 Z M19,19 C18.4477153,19 18,18.5522847 18,18 C18,17.4477153 18.4477153,17 19,17 C19.5522847,17 20,17.4477153 20,18 C20,18.5522847 19.5522847,19 19,19 Z M22.5,17 C22.2238576,17 22,16.7761424 22,16.5 C22,16.2238576 22.2238576,16 22.5,16 C22.7761424,16 23,16.2238576 23,16.5 C23,16.7761424 22.7761424,17 22.5,17 Z M22.5,2 C22.2238576,2 22,1.77614237 22,1.5 C22,1.22385763 22.2238576,1 22.5,1 C22.7761424,1 23,1.22385763 23,1.5 C23,1.77614237 22.7761424,2 22.5,2 Z M7.5,6 C7.22385763,6 7,5.77614237 7,5.5 C7,5.22385763 7.22385763,5 7.5,5 C7.77614237,5 8,5.22385763 8,5.5 C8,5.77614237 7.77614237,6 7.5,6 Z M14,3 C13.4477153,3 13,2.55228475 13,2 C13,1.44771525 13.4477153,1 14,1 C14.5522847,1 15,1.44771525 15,2 C15,2.55228475 14.5522847,3 14,3 Z M4.70001221,5 C4.14772746,5 3.70001221,4.55228475 3.70001221,4 C3.70001221,3.44771525 4.14772746,3 4.70001221,3 C5.25229696,3 5.70001221,3.44771525 5.70001221,4 C5.70001221,4.55228475 5.25229696,5 4.70001221,5 Z" id="Confetti" fill="#333333"></path>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/application/assets/fonts/icons/paste.svg b/application/assets/fonts/icons/paste.svg
new file mode 100644
index 00000000..b52a463c
--- /dev/null
+++ b/application/assets/fonts/icons/paste.svg
@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 44.1 (41455) - http://www.bohemiancoding.com/sketch -->
+    <title>paste</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard-4" transform="translate(-136.000000, -247.000000)">
+            <g id="63" transform="translate(136.000000, 247.000000)">
+                <path d="M8.38318339,5 L7.00247329,5 C6.45576096,5 6,5.45106594 6,6.00748397 L6,18.992516 C6,19.5510798 6.44882258,20 7.00247329,20 L16.9975267,20 C17.544239,20 18,19.5489341 18,18.992516 L18,6.00748397 C18,5.44892021 17.5511774,5 16.9975267,5 L15.6168166,5 L17,5 L17,5.5 C17,5.77614237 16.7723472,6 16.4903505,6 L7.50964952,6 C7.22817786,6 7,5.76806641 7,5.5 L7,5 L8.38318339,5 Z M9,3 C9,1.34314575 10.3431458,0 12,0 C13.6568542,0 15,1.34314575 15,3 L16.9905224,3 C18.652611,3 20,4.3360431 20,6.00012207 L20,18.9998779 C20,20.6567996 18.6633689,22 16.9905224,22 L7.00947762,22 C5.34738902,22 4,20.6639569 4,18.9998779 L4,6.00012207 C4,4.3432004 5.33663106,3 7.00947762,3 L9,3 Z M12,4 C12.5522847,4 13,3.55228475 13,3 C13,2.44771525 12.5522847,2 12,2 C11.4477153,2 11,2.44771525 11,3 C11,3.55228475 11.4477153,4 12,4 Z" id="Combined-Shape" fill="#333333"></path>
+                <path d="M9,9 L15.0207973,9" id="Path-153" stroke="#333333" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
+                <path d="M9,13 L15.0207973,13" id="Path-153" stroke="#333333" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
+                <path d="M9,17 L15.0207973,17" id="Path-153" stroke="#333333" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/application/assets/fonts/icons/pause.svg b/application/assets/fonts/icons/pause.svg
new file mode 100644
index 00000000..4f3dd48c
--- /dev/null
+++ b/application/assets/fonts/icons/pause.svg
@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 44.1 (41455) - http://www.bohemiancoding.com/sketch -->
+    <title>pause</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard-4" transform="translate(-576.000000, -115.000000)" stroke="#333333" stroke-width="2">
+            <g id="13" transform="translate(576.000000, 115.000000)">
+                <path d="M5,3.99339768 C5,3.44475929 5.44371665,3 5.99980749,3 L9.00019251,3 C9.55237094,3 10,3.44494629 10,3.99339768 L10,20.0066023 C10,20.5552407 9.55628335,21 9.00019251,21 L5.99980749,21 C5.44762906,21 5,20.5550537 5,20.0066023 L5,3.99339768 Z M14,3.99339768 C14,3.44475929 14.4437166,3 14.9998075,3 L18.0001925,3 C18.5523709,3 19,3.44494629 19,3.99339768 L19,20.0066023 C19,20.5552407 18.5562834,21 18.0001925,21 L14.9998075,21 C14.4476291,21 14,20.5550537 14,20.0066023 L14,3.99339768 Z" id="Combined-Shape"></path>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/application/assets/fonts/icons/peach.svg b/application/assets/fonts/icons/peach.svg
new file mode 100644
index 00000000..e52ea892
--- /dev/null
+++ b/application/assets/fonts/icons/peach.svg
@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 44.1 (41455) - http://www.bohemiancoding.com/sketch -->
+    <title>peach</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
+        <g id="Artboard-4" transform="translate(-48.000000, -819.000000)" stroke="#333333" stroke-width="2">
+            <g id="321" transform="translate(48.000000, 819.000000)">
+                <path d="M15,12 C15.5,10 14.5,4 8.5,4 C5.5,4 3,6.5 3,11 C3,16.5 11,21 12,21 C13,21 21,16.5 21,11 C21,6.5 18,4 15.5,4 C13.5,4 12.5,5 12.5,5" id="Body"></path>
+                <path d="M12,4 C12,4 12.5,1.5 11,1" id="Stem"></path>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/application/assets/fonts/icons/pen-tool.svg b/application/assets/fonts/icons/pen-tool.svg
new file mode 100644
index 00000000..e23470f1
--- /dev/null
+++ b/application/assets/fonts/icons/pen-tool.svg
@@ -0,0 +1,19 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 44.1 (41455) - http://www.bohemiancoding.com/sketch -->
+    <title>pen-tool</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard-4" transform="translate(-532.000000, -687.000000)" stroke="#333333" stroke-width="2">
+            <g id="272" transform="translate(531.000000, 687.000000)">
+                <g id="pen-tool" transform="translate(12.474344, 12.574381) rotate(-315.000000) translate(-12.474344, -12.574381) translate(5.474344, 2.074381)">
+                    <path d="M7,22.5 C7,22.5 12,11 13,10 C12,9 10,3 10,3 L4,3 C4,3 2,9 1,10 C2,11 7,22.5 7,22.5 Z" id="Path-208" stroke-linecap="round" stroke-linejoin="round"></path>
+                    <rect id="Rectangle-194" stroke-linecap="round" stroke-linejoin="round" x="3" y="0" width="8" height="3"></rect>
+                    <path d="M7,21 L7,10" id="Path-209"></path>
+                    <circle id="Oval-150" cx="7" cy="10" r="1"></circle>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/application/assets/fonts/icons/percent.svg b/application/assets/fonts/icons/percent.svg
new file mode 100644
index 00000000..62b4e4e7
--- /dev/null
+++ b/application/assets/fonts/icons/percent.svg
@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 44.1 (41455) - http://www.bohemiancoding.com/sketch -->
+    <title>percent</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard-4" transform="translate(-488.000000, -643.000000)" stroke="#333333" stroke-width="2">
+            <g id="251" transform="translate(488.000000, 643.000000)">
+                <path d="M8,6 L16,18" id="Line" stroke-linecap="round" transform="translate(12.000000, 12.000000) scale(-1, 1) translate(-12.000000, -12.000000) "></path>
+                <path d="M16,18 C14.8954305,18 14,17.1045695 14,16 C14,14.8954305 14.8954305,14 16,14 C17.1045695,14 18,14.8954305 18,16 C18,17.1045695 17.1045695,18 16,18 Z M8,10 C6.8954305,10 6,9.1045695 6,8 C6,6.8954305 6.8954305,6 8,6 C9.1045695,6 10,6.8954305 10,8 C10,9.1045695 9.1045695,10 8,10 Z" id="Dots"></path>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/application/assets/fonts/icons/personal-hotspot.svg b/application/assets/fonts/icons/personal-hotspot.svg
new file mode 100644
index 00000000..d16445d1
--- /dev/null
+++ b/application/assets/fonts/icons/personal-hotspot.svg
@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 44.1 (41455) - http://www.bohemiancoding.com/sketch -->
+    <title>personal-hotspot</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard-4" transform="translate(-444.000000, -511.000000)" fill-rule="nonzero" fill="#333333">
+            <g id="190" transform="translate(444.000000, 511.000000)">
+                <path d="M8.16542774,15 L13.0033142,15 C16.3122652,15 19,12.3121494 19,9 C19,5.69029169 16.3135769,3 13.0033142,3 L6.99668583,3 C3.68773478,3 1,5.68785059 1,9 C1,11.2192709 2.20785732,13.1600426 4.00173952,14.1979828 C4.00058067,14.1321792 4,14.0661818 4,14 C4,13.2617154 4.07211803,12.5467889 4.21286136,11.8680284 C3.46503873,11.1407385 3,10.1237823 3,9 C3,6.7924008 4.79232357,5 6.99668583,5 L13.0033142,5 C15.2083626,5 17,6.79421744 17,9 C17,11.2075992 15.2076764,13 13.0033142,13 L8.17515752,13 C8.06393981,13.2996598 8,13.6329932 8,14 C8,14.3670068 8.06024721,14.7003402 8.16542774,15 Z" id="Ring-2"></path>
+                <path d="M15.8230855,8 L10.9966858,8 C7.68773478,8 5,10.6878506 5,14 C5,17.3097083 7.68642314,20 10.9966858,20 L17.0033142,20 C20.3122652,20 23,17.3121494 23,14 C23,11.7805399 21.7919368,9.83962653 19.9978018,8.80175177 C19.9992537,8.86564308 20,8.93170203 20,9 C20,9.93084534 19.8613643,10.5844193 19.6873316,11.0381509 C20.4933607,11.7704414 21,12.8270295 21,14 C21,16.2075992 19.2076764,18 17.0033142,18 L10.9966858,18 C8.79163742,18 7,16.2057826 7,14 C7,11.7924008 8.79232357,10 10.9966858,10 L15.869781,10 C15.9488907,9.67822114 16,9.33911057 16,9 C16,8.59807621 15.9282032,8.26794919 15.8230855,8 Z" id="Ring-1"></path>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/application/assets/fonts/icons/phone-alt.svg b/application/assets/fonts/icons/phone-alt.svg
new file mode 100644
index 00000000..e79231af
--- /dev/null
+++ b/application/assets/fonts/icons/phone-alt.svg
@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 44.1 (41455) - http://www.bohemiancoding.com/sketch -->
+    <title>phone-alt</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
+        <g id="Artboard-4" transform="translate(-136.000000, -511.000000)" stroke="#333333" stroke-width="2">
+            <g id="183" transform="translate(136.000000, 511.000000)">
+                <path d="M15.8303475,4.04479665 C15.9381433,3.50181004 15.6178094,2.87821702 15.1078273,2.67786626 C15.1078273,2.67786626 14.025529,2.06163243 12.025529,2.06163243 C10.025529,2.06163243 6.52552899,5.56163243 6.52552899,13.0616324 C6.52552899,20.5616324 10.025529,24.0616324 12.025529,24.0616324 C14.025529,24.0616324 15.1078273,23.4453986 15.1078273,23.4453986 C15.6146599,23.2334504 15.9116778,22.6338827 15.7703536,22.1029147 L14.8894616,18.7933209 C14.7485321,18.2638357 14.1888771,17.867131 13.6335439,17.9076863 L12.5262713,17.9885493 C11.9735766,18.028912 11.4451953,17.6219845 11.3562518,17.0719233 C11.3562518,17.0719233 11.025529,15.5820248 11.025529,13.0616324 C11.025529,10.5412401 11.3562518,9.05134155 11.3562518,9.05134155 C11.449741,8.5047403 11.9781656,8.09131254 12.5269727,8.12729869 L13.9863959,8.2229954 C14.539478,8.25926187 15.0763124,7.84300808 15.183021,7.30549744 L15.8303475,4.04479665 Z" id="Path-120" transform="translate(11.188368, 13.061632) rotate(-45.000000) translate(-11.188368, -13.061632) "></path>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/application/assets/fonts/icons/phone.svg b/application/assets/fonts/icons/phone.svg
new file mode 100644
index 00000000..5c87c494
--- /dev/null
+++ b/application/assets/fonts/icons/phone.svg
@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 44.1 (41455) - http://www.bohemiancoding.com/sketch -->
+    <title>phone</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard-4" transform="translate(-796.000000, -115.000000)">
+            <g id="18" transform="translate(796.000000, 115.000000)">
+                <rect id="Body" stroke="#333333" stroke-width="2" stroke-linejoin="round" x="6" y="2" width="12" height="20" rx="1"></rect>
+                <rect id="Speaker" fill="#333333" x="10" y="4" width="4" height="1" rx="0.5"></rect>
+                <circle id="Home" fill="#333333" cx="12" cy="19" r="1"></circle>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/application/assets/fonts/icons/photo-contrast.svg b/application/assets/fonts/icons/photo-contrast.svg
new file mode 100644
index 00000000..498d71b4
--- /dev/null
+++ b/application/assets/fonts/icons/photo-contrast.svg
@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 44.1 (41455) - http://www.bohemiancoding.com/sketch -->
+    <title>photo-contrast</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard-4" transform="translate(-752.000000, -731.000000)">
+            <g id="297" transform="translate(752.000000, 731.000000)">
+                <circle id="Circle" stroke="#333333" stroke-width="2" cx="12" cy="12" r="9"></circle>
+                <path d="M12,21 C12,20 12,6.5 12,3 C7.02943725,3 3,7.02943725 3,12 C3,16.9705627 7.02943725,21 12,21 Z" id="Dark" fill="#333333"></path>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/application/assets/fonts/icons/photo-exposure.svg b/application/assets/fonts/icons/photo-exposure.svg
new file mode 100644
index 00000000..81d33ea4
--- /dev/null
+++ b/application/assets/fonts/icons/photo-exposure.svg
@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 44.1 (41455) - http://www.bohemiancoding.com/sketch -->
+    <title>photo-exposure</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard-4" transform="translate(-796.000000, -731.000000)">
+            <g id="298" transform="translate(796.000000, 731.000000)">
+                <rect id="Box" stroke="#333333" stroke-width="2" stroke-linecap="round" x="3" y="4" width="18" height="16" rx="2"></rect>
+                <polygon id="Dark" fill="#333333" points="4 5 20 5 4 19"></polygon>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/application/assets/fonts/icons/photo-saturation.svg b/application/assets/fonts/icons/photo-saturation.svg
new file mode 100644
index 00000000..ab6265b1
--- /dev/null
+++ b/application/assets/fonts/icons/photo-saturation.svg
@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 44.1 (41455) - http://www.bohemiancoding.com/sketch -->
+    <title>photo-saturation</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard-4" transform="translate(-48.000000, -775.000000)">
+            <g id="301" transform="translate(48.000000, 775.000000)">
+                <rect id="Photo" stroke="#333333" stroke-width="2" stroke-linecap="round" x="3" y="4" width="18" height="16" rx="2"></rect>
+                <rect id="1" fill="#333333" opacity="0.149999991" x="12" y="5" width="4" height="14"></rect>
+                <rect id="2" fill="#333333" opacity="0.299999982" x="8" y="5" width="4" height="14"></rect>
+                <rect id="3" fill="#333333" opacity="0.449999988" x="4" y="5" width="4" height="14"></rect>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/application/assets/fonts/icons/photo-sharpen.svg b/application/assets/fonts/icons/photo-sharpen.svg
new file mode 100644
index 00000000..649e31fe
--- /dev/null
+++ b/application/assets/fonts/icons/photo-sharpen.svg
@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 44.1 (41455) - http://www.bohemiancoding.com/sketch -->
+    <title>photo-sharpen</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
+        <g id="Artboard-4" transform="translate(-884.000000, -731.000000)" stroke-width="2" stroke="#333333">
+            <g id="300" transform="translate(884.000000, 731.000000)">
+                <polygon id="Triangle-5" points="12 4 22 20 2 20"></polygon>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/application/assets/fonts/icons/photo-straighten.svg b/application/assets/fonts/icons/photo-straighten.svg
new file mode 100644
index 00000000..06fdaa62
--- /dev/null
+++ b/application/assets/fonts/icons/photo-straighten.svg
@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 44.1 (41455) - http://www.bohemiancoding.com/sketch -->
+    <title>photo-straighten</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard-4" transform="translate(-840.000000, -731.000000)">
+            <g id="299" transform="translate(840.000000, 731.000000)">
+                <path d="M21.4914935,10 L21.9061903,7.6481376 C22.1931088,6.02094165 21.1055227,4.46670981 19.4775296,4.17965071 L7.6481376,2.09380973 C6.02094165,1.80689119 4.46670981,2.89447732 4.17965071,4.5224704 L3.21381445,10 L5.24466768,10 L6.14926622,4.86976675 C6.24447191,4.32982844 6.76116793,3.96826628 7.30084124,4.06342524 L19.1302332,6.14926622 C19.6701716,6.24447191 20.0317337,6.76116793 19.9365748,7.30084124 L19.4606402,10 L21.4914935,10 Z M20.7861855,14 L19.8203493,19.4775296 C19.5332902,21.1055227 17.9790583,22.1931088 16.3518624,21.9061903 L4.5224704,19.8203493 C2.89447732,19.5332902 1.80689119,17.9790583 2.09380973,16.3518624 L2.50850653,14 L4.53935976,14 L4.06342524,16.6991588 C3.96826628,17.2388321 4.32982844,17.7555281 4.86976675,17.8507338 L16.6991588,19.9365748 C17.2388321,20.0317337 17.7555281,19.6701716 17.8507338,19.1302332 L18.7553323,14 L20.7861855,14 Z" id="Photo" fill="#333333" fill-rule="nonzero"></path>
+                <path d="M1,12 L23.0056811,12" id="Line" stroke="#333333" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" stroke-dasharray="2,3"></path>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/application/assets/fonts/icons/photo-vignette.svg b/application/assets/fonts/icons/photo-vignette.svg
new file mode 100644
index 00000000..2e182280
--- /dev/null
+++ b/application/assets/fonts/icons/photo-vignette.svg
@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 44.1 (41455) - http://www.bohemiancoding.com/sketch -->
+    <title>photo-vignette</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard-4" transform="translate(-92.000000, -775.000000)">
+            <g id="302" transform="translate(92.000000, 775.000000)">
+                <path d="M3,5.99406028 C3,4.8927712 3.8926228,4 4.99508929,4 L19.0049107,4 C20.1067681,4 21,4.89451376 21,5.99406028 L21,18.0059397 C21,19.1072288 20.1073772,20 19.0049107,20 L4.99508929,20 C3.8932319,20 3,19.1054862 3,18.0059397 L3,5.99406028 Z M12,19 C15.8659932,19 19,15.8659932 19,12 C19,8.13400675 15.8659932,5 12,5 C8.13400675,5 5,8.13400675 5,12 C5,15.8659932 8.13400675,19 12,19 Z" id="1" fill="#333333" opacity="0.400000006"></path>
+                <path d="M12,19 C8.13400675,19 5,15.8659932 5,12 C5,8.13400675 8.13400675,5 12,5 C15.8659932,5 19,8.13400675 19,12 C19,15.8659932 15.8659932,19 12,19 Z M12,17 C14.7614237,17 17,14.7614237 17,12 C17,9.23857625 14.7614237,7 12,7 C9.23857625,7 7,9.23857625 7,12 C7,14.7614237 9.23857625,17 12,17 Z" id="2" fill="#333333" opacity="0.200000003"></path>
+                <path d="M12,17 C9.23857625,17 7,14.7614237 7,12 C7,9.23857625 9.23857625,7 12,7 C14.7614237,7 17,9.23857625 17,12 C17,14.7614237 14.7614237,17 12,17 Z M12,15 C13.6568542,15 15,13.6568542 15,12 C15,10.3431458 13.6568542,9 12,9 C10.3431458,9 9,10.3431458 9,12 C9,13.6568542 10.3431458,15 12,15 Z" id="3" fill="#333333" opacity="0.100000001"></path>
+                <rect id="Photo" stroke="#333333" stroke-width="2" stroke-linecap="round" x="3" y="4" width="18" height="16" rx="2"></rect>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/application/assets/fonts/icons/photo.svg b/application/assets/fonts/icons/photo.svg
new file mode 100644
index 00000000..9c2cdc17
--- /dev/null
+++ b/application/assets/fonts/icons/photo.svg
@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 44.1 (41455) - http://www.bohemiancoding.com/sketch -->
+    <title>photo</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard-4" transform="translate(-664.000000, -159.000000)">
+            <g id="35" transform="translate(664.000000, 159.000000)">
+                <rect id="Frame" stroke="#333333" stroke-width="2" x="1" y="4" width="22" height="16" rx="1"></rect>
+                <circle id="Sun" fill="#333333" cx="6" cy="9" r="2"></circle>
+                <path d="M21,10 C20,10 17,10 14,12 C11,14 11,17 11,18" id="Large-Hill" stroke="#333333" stroke-width="2" stroke-linejoin="round"></path>
+                <path d="M4,18 C4,17 5,15 7.5,14 C10,13 13,13 13,13" id="Small-Hill" stroke="#333333" stroke-width="2" stroke-linejoin="round"></path>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/application/assets/fonts/icons/photos.svg b/application/assets/fonts/icons/photos.svg
new file mode 100644
index 00000000..fe80cdb5
--- /dev/null
+++ b/application/assets/fonts/icons/photos.svg
@@ -0,0 +1,23 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 44.1 (41455) - http://www.bohemiancoding.com/sketch -->
+    <title>photos</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard-4" transform="translate(-224.000000, -863.000000)" fill="#333333">
+            <g id="345" transform="translate(224.000000, 863.000000)">
+                <g id="Group-7" transform="translate(1.000000, 1.000000)">
+                    <rect id="Path" opacity="0.600000024" transform="translate(6.706857, 6.706842) scale(-1, 1) rotate(-315.000000) translate(-6.706857, -6.706842) " x="3.7068573" y="1.70684204" width="6" height="10" rx="3"></rect>
+                    <rect id="Path" opacity="0.400000006" transform="translate(5.000000, 11.000000) rotate(-90.000000) translate(-5.000000, -11.000000) " x="2" y="6" width="6" height="10" rx="3"></rect>
+                    <rect id="Path" opacity="0.200000003" transform="translate(6.706857, 15.206842) scale(-1, -1) rotate(-315.000000) translate(-6.706857, -15.206842) " x="3.7068573" y="10.206842" width="6" height="10" rx="3"></rect>
+                    <rect id="Path" opacity="0.400000006" x="8" y="12" width="6" height="10" rx="3"></rect>
+                    <rect id="Path" opacity="0.600000024" transform="translate(15.306848, 15.206842) scale(1, -1) rotate(-315.000000) translate(-15.306848, -15.206842) " x="12.3068481" y="10.206842" width="6" height="10" rx="3"></rect>
+                    <rect id="Path" transform="translate(15.306848, 6.706842) rotate(-315.000000) translate(-15.306848, -6.706842) " x="12.3068481" y="1.70684204" width="6" height="10" rx="3"></rect>
+                    <rect id="Path" opacity="0.800000012" x="8" y="0" width="6" height="10" rx="3"></rect>
+                    <rect id="Path" opacity="0.800000012" transform="translate(17.000000, 11.000000) rotate(-270.000000) translate(-17.000000, -11.000000) " x="14" y="6" width="6" height="10" rx="3"></rect>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/application/assets/fonts/icons/piggy-bank.svg b/application/assets/fonts/icons/piggy-bank.svg
new file mode 100644
index 00000000..03ecf0b7
--- /dev/null
+++ b/application/assets/fonts/icons/piggy-bank.svg
@@ -0,0 +1,20 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 44.1 (41455) - http://www.bohemiancoding.com/sketch -->
+    <title>piggy-bank</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard-4" transform="translate(-488.000000, -775.000000)">
+            <g id="311" transform="translate(488.000000, 775.000000)">
+                <path d="M10,18 L8.89410734,20.5804162 C8.6779601,21.0847598 8.08828831,21.3235521 7.5804162,21.1058927 L5.9195838,20.3941073 C5.41524023,20.1779601 5.1416599,19.5750203 5.31640625,19.0507812 L5.68359375,17.9492188 C5.86095428,17.4171371 6,16.5 5.59159748,15.9902274 C4.59012035,14.7401725 4,13.1840239 4,11.5 C4,7.35786438 7.581722,4 12,4 C12.694035,4 13.3653951,4.08215734 14.0042485,4.23677429 M18.3769217,7.00999439 C18.8497679,7.60959483 19.2303855,8.27910278 19.5,9 M19.5,14 C19.2513988,14.7122766 18.9774125,15.4052454 18.5,16 C18,16.5 18.1390457,17.4171371 18.3164062,17.9492188 L18.6835938,19.0507812 C18.8583401,19.5750203 18.5847598,20.1779601 18.0804162,20.3941073 L16.4195838,21.1058927 C15.9117117,21.3235521 15.3220399,21.0847598 15.1058927,20.5804162 L14,18" id="Pig" stroke="#333333" stroke-width="2"></path>
+                <circle id="Eye" fill="#333333" cx="16" cy="9" r="1"></circle>
+                <path d="M8.98893545,18.4506198 C9.91836622,18.8048544 10.9348745,19 12,19 L12,19 C13.0664552,19 14.0841717,18.8043669 15.0145449,18.4492924" id="Tummy" stroke="#333333" stroke-width="2" stroke-linecap="round"></path>
+                <path d="M19.5,9 L20.5,9 C21.3284271,9 22,9.67432225 22,10.5001649 L22,12.4998351 C22,13.3283533 21.3342028,14 20.5,14 L19.5,14" id="Snout" stroke="#333333" stroke-width="2" stroke-linecap="round"></path>
+                <path d="M10.9889297,7.10227837 C9.02062679,7.50648122 7.47425299,9.0673877 7.09140992,11.0433962" id="Highlight" stroke="#333333" stroke-width="2" stroke-linecap="round"></path>
+                <path d="M18.3800049,7 C17.5,6 17,5 18,3 C15.5,2 14,4.23999023 14,4.23999023" id="Ear" stroke="#333333" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
+                <path d="M5,7.5 C4.5,7 3,6.5 2,7 C1,7.5 1,9 2,9.5 C3,10 4,9.5 4,8 C4,6.5 2.5,5.5 1,5" id="Tail" stroke="#333333" stroke-width="2" stroke-linecap="round"></path>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/application/assets/fonts/icons/plane.svg b/application/assets/fonts/icons/plane.svg
new file mode 100644
index 00000000..3769cc12
--- /dev/null
+++ b/application/assets/fonts/icons/plane.svg
@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 44.1 (41455) - http://www.bohemiancoding.com/sketch -->
+    <title>plane</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linejoin="round">
+        <g id="Artboard-4" transform="translate(-224.000000, -423.000000)" stroke="#333333" stroke-width="2">
+            <g id="145" transform="translate(224.000000, 423.000000)">
+                <path d="M10,5.00684547 C10,4.45078007 10.2150574,3.61437988 10.5229301,3.14021301 C10.5229301,3.14021301 11,2 12,2 C13,2 13.4770699,3.14021301 13.4770699,3.14021301 C13.7658762,3.61506025 14,4.44994876 14,5.00684547 L14,16.9931545 C14,17.5492199 13.8009205,18.398159 13.5561352,18.8877296 L12,22 L10.4438648,18.8877296 C10.1987251,18.3974501 10,17.5500512 10,16.9931545 L10,5.00684547 Z" id="Body"></path>
+                <polyline id="Left-Wing" points="10 8 1 13 1 15 10 13"></polyline>
+                <polyline id="Right-Wing" transform="translate(18.500000, 11.500000) scale(-1, 1) translate(-18.500000, -11.500000) " points="23 8 14 13 14 15 23 13"></polyline>
+                <polyline id="Rear-Right-Wing" points="14 17 18 21 18 22 12 21"></polyline>
+                <polyline id="Rear-Left-Wing" transform="translate(9.000000, 19.500000) scale(-1, 1) translate(-9.000000, -19.500000) " points="8 17 12 21 12 22 6 21"></polyline>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/application/assets/fonts/icons/planet.svg b/application/assets/fonts/icons/planet.svg
new file mode 100644
index 00000000..d6c4081c
--- /dev/null
+++ b/application/assets/fonts/icons/planet.svg
@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 44.1 (41455) - http://www.bohemiancoding.com/sketch -->
+    <title>planet</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard-4" transform="translate(-752.000000, -819.000000)">
+            <g id="337" transform="translate(752.000000, 819.000000)">
+                <circle id="Planet" stroke="#333333" stroke-width="2" cx="12" cy="12" r="7"></circle>
+                <path d="M5.24591211,10.4212846 C2.66195812,10.7872541 1,11.3583388 1,12 C1,13.1045695 5.92486775,14 12,14 L12,14 C18.0751322,14 23,13.1045695 23,12 C23,11.3592967 21.3430003,10.7889594 18.7656541,10.422925" id="Ring" stroke="#333333" stroke-width="2" transform="translate(12.000000, 12.210642) rotate(-15.000000) translate(-12.000000, -12.210642) "></path>
+                <path d="M10,10 C9.44771525,10 9,9.55228475 9,9 C9,8.44771525 9.44771525,8 10,8 C10.5522847,8 11,8.44771525 11,9 C11,9.55228475 10.5522847,10 10,10 Z M12.5,9 C12.2238576,9 12,8.77614237 12,8.5 C12,8.22385763 12.2238576,8 12.5,8 C12.7761424,8 13,8.22385763 13,8.5 C13,8.77614237 12.7761424,9 12.5,9 Z M11.5,11 C11.2238576,11 11,10.7761424 11,10.5 C11,10.2238576 11.2238576,10 11.5,10 C11.7761424,10 12,10.2238576 12,10.5 C12,10.7761424 11.7761424,11 11.5,11 Z" id="Craters" fill="#333333" opacity="0.5"></path>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/application/assets/fonts/icons/plant.svg b/application/assets/fonts/icons/plant.svg
new file mode 100644
index 00000000..677defdb
--- /dev/null
+++ b/application/assets/fonts/icons/plant.svg
@@ -0,0 +1,25 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 44.1 (41455) - http://www.bohemiancoding.com/sketch -->
+    <title>plant</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard-4" transform="translate(-752.000000, -335.000000)">
+            <g id="116" transform="translate(752.000000, 335.000000)">
+                <rect id="Stem" fill="#333333" x="11" y="2" width="2" height="20" rx="1"></rect>
+                <g id="Right-Leaf" transform="translate(13.000000, 13.000000)" stroke="#333333" stroke-linecap="round" stroke-linejoin="round">
+                    <path d="M0,8 C0,2 2,0 8,0 C8,6 6,8 0,8 Z" id="Path-39" stroke-width="2"></path>
+                    <path d="M0,8 L5,3" id="Path-43"></path>
+                </g>
+                <g id="Left-Leaf" transform="translate(3.000000, 8.000000)" stroke="#333333" stroke-linecap="round" stroke-linejoin="round">
+                    <path d="M0,8 C0,2 2,0 8,0 C8,6 6,8 0,8 Z" id="Path-39" stroke-width="2" transform="translate(4.000000, 4.000000) scale(-1, 1) translate(-4.000000, -4.000000) "></path>
+                    <path d="M3,8 L8,3" id="Path-43" transform="translate(5.500000, 5.500000) scale(-1, 1) translate(-5.500000, -5.500000) "></path>
+                </g>
+                <g id="smol-leaf" transform="translate(13.000000, 4.000000)" stroke="#333333" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                    <path d="M0,6 C0,2 2,0 6,0 C6,4 4,6 0,6 Z" id="Path-39"></path>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/application/assets/fonts/icons/play.svg b/application/assets/fonts/icons/play.svg
new file mode 100644
index 00000000..38bd2197
--- /dev/null
+++ b/application/assets/fonts/icons/play.svg
@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 44.1 (41455) - http://www.bohemiancoding.com/sketch -->
+    <title>play</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linejoin="round">
+        <g id="Artboard-4" transform="translate(-532.000000, -115.000000)" stroke-width="2" stroke="#333333">
+            <g id="12" transform="translate(532.000000, 115.000000)">
+                <polygon id="Triangle-1" points="5 21 5 3 21 12"></polygon>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/application/assets/fonts/icons/playlist.svg b/application/assets/fonts/icons/playlist.svg
new file mode 100644
index 00000000..ebeb58c7
--- /dev/null
+++ b/application/assets/fonts/icons/playlist.svg
@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 44.1 (41455) - http://www.bohemiancoding.com/sketch -->
+    <title>playlist</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard-4" transform="translate(-268.000000, -511.000000)">
+            <g id="186" transform="translate(268.000000, 511.000000)">
+                <path d="M15,19.5 L15,9.71922359 L19.8208875,8.51400171 C20.4425158,8.35859463 21,7.64491617 21,7.00189865 L21,2.99810135 C21,2.54055298 20.7475351,2.34389263 20.3059588,2.45428671 L16.1791125,3.48599829 C15.5574842,3.64140537 15,4.35508383 15,4.99810135 L15,17 L12.5,17 C11.1216893,17 10,18.1208193 10,19.5 C10,20.8783107 11.1208193,22 12.5,22 C13.8783107,22 15,20.8791807 15,19.5 Z" id="Note" stroke="#333333" stroke-width="2"></path>
+                <path d="M2,6 C2,5.44771525 2.4556644,5 2.99539757,5 L11.0046024,5 C11.5543453,5 12,5.44386482 12,6 C12,6.55228475 11.5443356,7 11.0046024,7 L2.99539757,7 C2.44565467,7 2,6.55613518 2,6 Z M2,10 C2,9.44771525 2.4556644,9 2.99539757,9 L11.0046024,9 C11.5543453,9 12,9.44386482 12,10 C12,10.5522847 11.5443356,11 11.0046024,11 L2.99539757,11 C2.44565467,11 2,10.5561352 2,10 Z M2,14 C2,13.4477153 2.45303631,13 2.99703014,13 L9.00296986,13 C9.5536144,13 10,13.4438648 10,14 C10,14.5522847 9.54696369,15 9.00296986,15 L2.99703014,15 C2.4463856,15 2,14.5561352 2,14 Z M2,18 C2,17.4477153 2.44371665,17 2.99980749,17 L6.00019251,17 C6.55237094,17 7,17.4438648 7,18 C7,18.5522847 6.55628335,19 6.00019251,19 L2.99980749,19 C2.44762906,19 2,18.5561352 2,18 Z" id="List" fill="#333333"></path>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/application/assets/fonts/icons/plug-socket-aus.svg b/application/assets/fonts/icons/plug-socket-aus.svg
new file mode 100644
index 00000000..0aa192bd
--- /dev/null
+++ b/application/assets/fonts/icons/plug-socket-aus.svg
@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 44.1 (41455) - http://www.bohemiancoding.com/sketch -->
+    <title>plug-socket-aus</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard-4" transform="translate(-444.000000, -819.000000)">
+            <g id="330" transform="translate(444.000000, 819.000000)">
+                <rect id="Body" stroke="#333333" stroke-width="2" x="3" y="3" width="18" height="18" rx="2"></rect>
+                <path d="M11,7 L13,7 L13,11 L11,11 L11,7 Z M7,14 L8.73205081,13 L10.7320508,16.4641016 L9,17.4641016 L7,14 Z M14.7320508,17.4641016 L13,16.4641016 L15,13 L16.7320508,14 L14.7320508,17.4641016 Z" id="Socket" fill="#333333"></path>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/application/assets/fonts/icons/plug-socket-eu.svg b/application/assets/fonts/icons/plug-socket-eu.svg
new file mode 100644
index 00000000..d039de28
--- /dev/null
+++ b/application/assets/fonts/icons/plug-socket-eu.svg
@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 44.1 (41455) - http://www.bohemiancoding.com/sketch -->
+    <title>plug-socket-eu</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard-4" transform="translate(-400.000000, -819.000000)">
+            <g id="329" transform="translate(400.000000, 819.000000)">
+                <rect id="Body" stroke="#333333" stroke-width="2" x="3" y="3" width="18" height="18" rx="2"></rect>
+                <circle id="Inset" fill="#333333" opacity="0.200000003" cx="12" cy="12" r="6"></circle>
+                <path d="M14.5,13.5 C13.6715729,13.5 13,12.8284271 13,12 C13,11.1715729 13.6715729,10.5 14.5,10.5 C15.3284271,10.5 16,11.1715729 16,12 C16,12.8284271 15.3284271,13.5 14.5,13.5 Z M9.5,13.5 C8.67157288,13.5 8,12.8284271 8,12 C8,11.1715729 8.67157288,10.5 9.5,10.5 C10.3284271,10.5 11,11.1715729 11,12 C11,12.8284271 10.3284271,13.5 9.5,13.5 Z" id="Socket" fill="#333333"></path>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/application/assets/fonts/icons/plug-socket-uk.svg b/application/assets/fonts/icons/plug-socket-uk.svg
new file mode 100644
index 00000000..f66dc7a8
--- /dev/null
+++ b/application/assets/fonts/icons/plug-socket-uk.svg
@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 44.1 (41455) - http://www.bohemiancoding.com/sketch -->
+    <title>plug-socket-uk</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard-4" transform="translate(-312.000000, -819.000000)">
+            <g id="327" transform="translate(312.000000, 819.000000)">
+                <rect id="Body" stroke="#333333" stroke-width="2" x="3" y="3" width="18" height="18" rx="2"></rect>
+                <path d="M11,8 L13,8 L13,11 L11,11 L11,8 Z M7,16 L7,14 L10,14 L10,16 L7,16 Z M14,16 L14,14 L17,14 L17,16 L14,16 Z" id="sockets" fill="#333333"></path>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/application/assets/fonts/icons/plug-socket-us.svg b/application/assets/fonts/icons/plug-socket-us.svg
new file mode 100644
index 00000000..c05cfea3
--- /dev/null
+++ b/application/assets/fonts/icons/plug-socket-us.svg
@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 44.1 (41455) - http://www.bohemiancoding.com/sketch -->
+    <title>plug-socket-us</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard-4" transform="translate(-356.000000, -819.000000)">
+            <g id="328" transform="translate(356.000000, 819.000000)">
+                <rect id="Body" stroke="#333333" stroke-width="2" x="3" y="3" width="18" height="18" rx="2"></rect>
+                <path d="M8,8 L10,8 L10,12 L8,12 L8,8 Z M14,8 L16,8 L16,12 L14,12 L14,8 Z M14,16 L14,17 L10,17 C10,17 10,16.2280074 10,16 C10,14.8954305 10.8954305,14 12,14 C13.1045695,14 14,14.8954305 14,16 Z" id="Socket" fill="#333333"></path>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/application/assets/fonts/icons/plug.svg b/application/assets/fonts/icons/plug.svg
new file mode 100644
index 00000000..aa438327
--- /dev/null
+++ b/application/assets/fonts/icons/plug.svg
@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 44.1 (41455) - http://www.bohemiancoding.com/sketch -->
+    <title>plug</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard-4" transform="translate(-620.000000, -819.000000)" stroke="#333333" stroke-width="2">
+            <g id="334" transform="translate(620.000000, 819.000000)">
+                <path d="M9,7 L9,3" id="Pin-1" stroke-linecap="round"></path>
+                <path d="M13,7 L13,3" id="Pin-2" stroke-linecap="round"></path>
+                <path d="M11,16 C11,17.5 11.5,19 13,20 C14.5,21 16,21 18,21" id="Cable" stroke-linecap="round"></path>
+                <path d="M11,15 C13.7614237,15 16,12.7614237 16,10 C16,8.83768953 16,7 16,7 L6,7 L6,10 C6,12.7614237 8.23857625,15 11,15 Z" id="Plug" stroke-linejoin="round"></path>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/application/assets/fonts/icons/plus.svg b/application/assets/fonts/icons/plus.svg
new file mode 100644
index 00000000..34cda85c
--- /dev/null
+++ b/application/assets/fonts/icons/plus.svg
@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 44.1 (41455) - http://www.bohemiancoding.com/sketch -->
+    <title>plus</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard-4" transform="translate(-312.000000, -643.000000)" fill="#333333">
+            <g id="247" transform="translate(312.000000, 643.000000)">
+                <path d="M13,11 L13,5.00087166 C13,4.44463086 12.5522847,4 12,4 C11.4438648,4 11,4.4481055 11,5.00087166 L11,11 L5.00087166,11 C4.44463086,11 4,11.4477153 4,12 C4,12.5561352 4.4481055,13 5.00087166,13 L11,13 L11,18.9991283 C11,19.5553691 11.4477153,20 12,20 C12.5561352,20 13,19.5518945 13,18.9991283 L13,13 L18.9991283,13 C19.5553691,13 20,12.5522847 20,12 C20,11.4438648 19.5518945,11 18.9991283,11 L13,11 Z" id="Add"></path>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/application/assets/fonts/icons/podcasts.svg b/application/assets/fonts/icons/podcasts.svg
new file mode 100644
index 00000000..0ca79621
--- /dev/null
+++ b/application/assets/fonts/icons/podcasts.svg
@@ -0,0 +1,26 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 44.1 (41455) - http://www.bohemiancoding.com/sketch -->
+    <title>podcasts</title>
+    <desc>Created with Sketch.</desc>
+    <defs>
+        <linearGradient x1="50%" y1="0%" x2="50%" y2="97.3333865%" id="linearGradient-1">
+            <stop stop-color="#333333" offset="0%"></stop>
+            <stop stop-color="#333333" stop-opacity="0.247310915" offset="100%"></stop>
+        </linearGradient>
+        <linearGradient x1="50%" y1="0%" x2="50%" y2="97.8635204%" id="linearGradient-2">
+            <stop stop-color="#333333" offset="0%"></stop>
+            <stop stop-color="#333333" stop-opacity="0.250707654" offset="100%"></stop>
+        </linearGradient>
+    </defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard-4" transform="translate(-532.000000, -775.000000)">
+            <g id="312" transform="translate(532.000000, 775.000000)">
+                <path d="M9.32918137,15.9750882 C9.14737952,14.8842771 9.89826062,14 10.9979131,14 L13.0020869,14 C14.1055038,14 14.8534426,14.8793447 14.6708186,15.9750882 L13.6633817,22.0197096 C13.5731485,22.561109 13.0573397,23 12.5010434,23 L11.4989566,23 C10.9472481,23 10.4276519,22.5659113 10.3366183,22.0197096 L9.32918137,15.9750882 Z" id="Body" fill="#333333"></path>
+                <circle id="Head" fill="#333333" cx="12" cy="10" r="3"></circle>
+                <path d="M16.3851456,13.8501206 C17.4222377,12.6991612 18,11.4167199 18,10 C18,6.74089158 15.2591084,4 12,4 C8.74089158,4 6,6.74089158 6,10 C6,11.4186069 6.57916224,12.7027674 7.61838071,13.8540306 C7.80341316,14.0590125 8.11958231,14.0751848 8.32456427,13.8901523 C8.52954623,13.7051199 8.5457185,13.3889507 8.36068606,13.1839688 C7.47616718,12.2040844 7,11.148292 7,10 C7,7.29317633 9.29317633,5 12,5 C14.7068237,5 17,7.29317633 17,10 C17,11.1466944 16.5249958,12.2010466 15.6422459,13.1807178 C15.4573954,13.3858639 15.4738483,13.7020185 15.6789944,13.886869 C15.8841405,14.0717195 16.2002951,14.0552666 16.3851456,13.8501206 Z" id="2" fill="url(#linearGradient-1)" fill-rule="nonzero"></path>
+                <path d="M17.5678226,18.3077078 C20.3159646,16.4626239 22,13.3733223 22,10 C22,4.4771525 17.5228475,0 12,0 C6.4771525,0 2,4.4771525 2,10 C2,13.3762414 3.68696556,16.4678678 6.43901638,18.3122954 C6.89779529,18.6197696 7.51896613,18.4971129 7.82644029,18.0383339 C8.13391444,17.579555 8.0112577,16.9583842 7.55247879,16.65091 C5.34877306,15.1739839 4,12.7021478 4,10 C4,5.581722 7.581722,2 12,2 C16.418278,2 20,5.581722 20,10 C20,12.699815 18.6535741,15.1697843 16.4529947,16.6472384 C15.9944687,16.9550897 15.8723227,17.5763611 16.180174,18.0348871 C16.4880252,18.4934131 17.1092967,18.6155591 17.5678226,18.3077078 Z" id="1" fill="url(#linearGradient-2)" fill-rule="nonzero"></path>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/application/assets/fonts/icons/pokeball.svg b/application/assets/fonts/icons/pokeball.svg
new file mode 100644
index 00000000..8393f83c
--- /dev/null
+++ b/application/assets/fonts/icons/pokeball.svg
@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 44.1 (41455) - http://www.bohemiancoding.com/sketch -->
+    <title>pokeball</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard-4" transform="translate(-268.000000, -247.000000)">
+            <g id="66" transform="translate(268.000000, 247.000000)">
+                <circle id="Body" stroke="#333333" stroke-width="2" cx="12" cy="12" r="10"></circle>
+                <path d="M14.8292943,12 C17.3089272,12 19.8023152,12 22,12 C22,6.4771525 17.5228475,2 12,2 C6.4771525,2 2,6.4771525 2,12 C3.31957718,12 5.99348631,12 9.17070571,12 C9.06015422,11.6872211 9,11.3506354 9,11 C9,9.34314575 10.3431458,8 12,8 C13.6568542,8 15,9.34314575 15,11 C15,11.3506354 14.9398458,11.6872211 14.8292943,12 Z" id="Tint" fill="#333333" opacity="0.200000003"></path>
+                <path d="M3,11 L9,11 L9,13 L3,13 L3,11 Z M15,11 L21,11 L21,13 L15,13 L15,11 Z" id="Mid" fill="#333333"></path>
+                <circle id="button" stroke="#333333" stroke-width="2" cx="12" cy="12" r="3"></circle>
+                <circle id="button-centre" fill="#333333" cx="12" cy="12" r="1"></circle>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/application/assets/fonts/icons/polaroids.svg b/application/assets/fonts/icons/polaroids.svg
new file mode 100644
index 00000000..70ccc174
--- /dev/null
+++ b/application/assets/fonts/icons/polaroids.svg
@@ -0,0 +1,22 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 44.1 (41455) - http://www.bohemiancoding.com/sketch -->
+    <title>polaroids</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard-4" transform="translate(-884.000000, -379.000000)">
+            <g id="140" transform="translate(884.000000, 379.000000)">
+                <g id="2" transform="translate(0.068124, 1.974212)" fill="#333333">
+                    <path d="M3.93187648,2.60283088 L2.09644494,3.09350651 L3.93187648,9.94343026 L3.93187648,17.4076278 L0.230395558,3.59351294 C-0.0541723055,2.53149121 0.577347276,1.43952472 1.64224814,1.15418539 L3.93187648,0.540681329 L3.93187648,2.60283088 Z" id="Frame"></path>
+                </g>
+                <g id="1" transform="translate(6.000000, 2.000000)">
+                    <path d="M0,1.99079514 C0,0.891309342 0.892622799,0 1.99508929,0 L16.0049107,0 C17.1067681,0 18,0.898212381 18,1.99079514 L18,18.0092049 C18,19.1086907 17.1073772,20 16.0049107,20 L1.99508929,20 C0.893231902,20 0,19.1017876 0,18.0092049 L0,1.99079514 Z M2,2 L2,16 L16,16 L16,2 L2,2 Z" id="Frame" fill="#333333"></path>
+                    <circle id="Sun" fill="#333333" cx="6" cy="6" r="2"></circle>
+                    <path d="M15,8 C14,8 12.5,8.5 11,10 C9.5,11.5 9,14 9,15" id="Big-Hill" stroke="#333333" stroke-width="2" stroke-linejoin="round"></path>
+                    <path d="M4,15 C4,14 4.5,12 7,11 C9.5,10 11,10.5 11,10.5" id="Little-Hill" stroke="#333333" stroke-width="2" stroke-linejoin="round"></path>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/application/assets/fonts/icons/poop.svg b/application/assets/fonts/icons/poop.svg
new file mode 100644
index 00000000..42032a1e
--- /dev/null
+++ b/application/assets/fonts/icons/poop.svg
@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 44.1 (41455) - http://www.bohemiancoding.com/sketch -->
+    <title>poop</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
+        <g id="Artboard-4" transform="translate(-224.000000, -467.000000)" stroke="#333333" stroke-width="2">
+            <g id="165" transform="translate(224.000000, 467.000000)">
+                <path d="M17,16 L18.5150489,16 C19.8915697,16 21.0074602,17.1096621 21.0074602,18.5 L21.0074602,18.5 C21.0074602,19.8807119 19.8805463,21 18.5025627,21 L5.49743726,21 C4.11402057,21 2.99452393,19.8903379 2.99700998,18.5 L2.99700998,18.5 C2.99947881,17.1192881 4.12295463,16 5.50806964,16 L12,16 L7.50738893,16 C6.12259626,16 5,14.8903379 5,13.5 L5,13.5 C5,12.1192881 6.10966206,11 7.5,11 L10,11 C10,11 8,10.5 8,8 C8,5.5 13,3 13,3 C13,3 11,4 12,6 C13,8 15,7 15,9 C15,11 13,11 13,11 L16.4902248,11 C17.8763354,11 19,12.1096621 19,13.5 L19,13.5 C19,14.8807119 17.8830509,16 17,16 L17,16 Z" id="💩"></path>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/application/assets/fonts/icons/power.svg b/application/assets/fonts/icons/power.svg
new file mode 100644
index 00000000..d10600d1
--- /dev/null
+++ b/application/assets/fonts/icons/power.svg
@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 44.1 (41455) - http://www.bohemiancoding.com/sketch -->
+    <title>power</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round">
+        <g id="Artboard-4" transform="translate(-708.000000, -203.000000)" stroke="#333333" stroke-width="2">
+            <g id="56" transform="translate(708.000000, 203.000000)">
+                <path d="M8.0419548,6.04615725 C5.62763156,7.42332452 4,10.0215854 4,13 C4,17.418278 7.581722,21 12,21 L12,21 C16.418278,21 20,17.418278 20,13 C20,10.0407857 18.3932858,7.45683963 16.0046386,6.07294293" id="Circle" stroke-linejoin="round"></path>
+                <path d="M12,3 L12,12" id="Line"></path>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/application/assets/fonts/icons/previous.svg b/application/assets/fonts/icons/previous.svg
new file mode 100644
index 00000000..865fa898
--- /dev/null
+++ b/application/assets/fonts/icons/previous.svg
@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 44.1 (41455) - http://www.bohemiancoding.com/sketch -->
+    <title>previous</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linejoin="round">
+        <g id="Artboard-4" transform="translate(-312.000000, -1046.000000)" stroke="#333333" stroke-width="2">
+            <g id="Extras" transform="translate(48.000000, 1046.000000)">
+                <g id="previous" transform="translate(276.000000, 12.000000) scale(-1, 1) translate(-276.000000, -12.000000) translate(264.000000, 0.000000)">
+                    <path d="M11,10.8333333 L1,5 L1,19 L11,13.1666667 L11,10.8333333 Z" id="Combined-Shape"></path>
+                    <polygon id="Triangle-1" points="11 19 11 5 23 12"></polygon>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/application/assets/fonts/icons/printer.svg b/application/assets/fonts/icons/printer.svg
new file mode 100644
index 00000000..dbcfdd92
--- /dev/null
+++ b/application/assets/fonts/icons/printer.svg
@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 44.1 (41455) - http://www.bohemiancoding.com/sketch -->
+    <title>printer</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard-4" transform="translate(-136.000000, -335.000000)">
+            <g id="103" transform="translate(136.000000, 335.000000)">
+                <path d="M6.01757812,18 L4.99596383,18 C3.89362344,18 3,17.1125667 3,16.000385 L3,9.99961498 L3,9.99961498 C3,8.89525812 3.8926228,8 4.99508929,8 L19.0049107,8 C20.1067681,8 21,8.88743329 21,9.99961498 L21,16.000385 C21,17.1047419 20.1024307,18 18.9913592,18 L18.0616455,18" id="Body" stroke="#333333" stroke-width="2"></path>
+                <path d="M6,3.99980749 C6,3.44762906 6.45576096,3 7.00247329,3 L16.9975267,3 C17.5511774,3 18,3.44371665 18,3.99980749 L18,8 L6,8 L6,3.99980749 Z" id="Feed" stroke="#333333" stroke-width="2"></path>
+                <path d="M6,14 L18,14 L18,19.9970707 C18,20.5509732 17.544239,21 16.9975267,21 L7.00247329,21 C6.44882258,21 6,20.5621186 6,19.9970707 L6,14 Z" id="Paper" stroke="#333333" stroke-width="2"></path>
+                <path d="M9,16 L15,16 L15,17 L9,17 L9,16 Z M9,18 L15,18 L15,19 L9,19 L9,18 Z" id="Lines" fill="#333333"></path>
+                <path d="M7,12 C6.44771525,12 6,11.5522847 6,11 C6,10.4477153 6.44771525,10 7,10 C7.55228475,10 8,10.4477153 8,11 C8,11.5522847 7.55228475,12 7,12 Z M10,12 C9.44771525,12 9,11.5522847 9,11 C9,10.4477153 9.44771525,10 10,10 C10.5522847,10 11,10.4477153 11,11 C11,11.5522847 10.5522847,12 10,12 Z" id="Lights" fill="#333333" opacity="0.5"></path>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/application/assets/fonts/icons/pumpkin.svg b/application/assets/fonts/icons/pumpkin.svg
new file mode 100644
index 00000000..346bc6b3
--- /dev/null
+++ b/application/assets/fonts/icons/pumpkin.svg
@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 44.1 (41455) - http://www.bohemiancoding.com/sketch -->
+    <title>pumpkin</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard-4" transform="translate(-312.000000, -467.000000)" stroke="#333333" stroke-width="2">
+            <g id="167" transform="translate(312.000000, 467.000000)">
+                <path d="M6,6 C6.62934235,6 7.80110576,6.5 8.5,6.5 C9.45309003,6.5 9.91308594,6 11.956543,6 C14,6 14.5156466,6.5 15.5,6.5 C16.1944843,6.5 17.3743592,6 18,6 C21,6 23,10 23,14 C23,18 20,22 17,22 C16.3685694,22 15.7013832,21.5 15,21.5 C14.0284271,21.5 13.5,22 11.9786377,22 C10.4572754,22 10.0603147,21.5 9,21.5 C8.42221649,21.5 7.52692126,22 7,22 C4,22 1,18 1,14 C1,10 3,6 6,6 Z" id="Body"></path>
+                <path d="M9,16 L15,16 C15,17 14,18 12,18 C10,18 9,17 9,16 Z M16.5,10 L18,12 L15,12 L16.5,10 Z M7.5,10 L9,12 L6,12 L7.5,10 Z" id="Face" stroke-linecap="round" stroke-linejoin="round"></path>
+                <path d="M10,6 C10,2 14,1 14,2 C14,2.5 13.0828446,2.81268644 13,4 C12.9088088,5.30693618 13.5,6 13.5,6" id="what-is-this-called" stroke-linecap="round"></path>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/application/assets/fonts/icons/purse.svg b/application/assets/fonts/icons/purse.svg
new file mode 100644
index 00000000..18e8d742
--- /dev/null
+++ b/application/assets/fonts/icons/purse.svg
@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 44.1 (41455) - http://www.bohemiancoding.com/sketch -->
+    <title>purse</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard-4" transform="translate(-180.000000, -379.000000)" stroke="#333333" stroke-width="2">
+            <g id="123" transform="translate(180.000000, 379.000000)">
+                <path d="M2.62905137,11.7557236 C2.93809337,10.2105137 4.41764103,9 5.99406028,9 L18.0059397,9 C19.5796617,9 21.0637463,10.2197117 21.3709486,11.7557236 L22.5902127,17.8520441 C22.9292461,19.5472108 21.7344705,21 20.0092049,21 L3.99079514,21 C2.26364956,21 1.07247762,19.5385924 1.40978728,17.8520441 L2.62905137,11.7557236 Z" id="Bag"></path>
+                <path d="M16,12 L16,7 C16,4.790861 14.209139,3 12,3 C9.790861,3 8,4.790861 8,7 L8,12" id="Handle" stroke-linecap="round"></path>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/application/assets/fonts/icons/puzzle.svg b/application/assets/fonts/icons/puzzle.svg
new file mode 100644
index 00000000..c4d839ec
--- /dev/null
+++ b/application/assets/fonts/icons/puzzle.svg
@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 44.1 (41455) - http://www.bohemiancoding.com/sketch -->
+    <title>puzzle</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
+        <g id="Artboard-4" transform="translate(-796.000000, -775.000000)" stroke="#333333" stroke-width="2">
+            <g id="318" transform="translate(796.000000, 775.000000)">
+                <path d="M6,7.99547146 C6,6.893403 6.89106354,6 8.00520578,6 C8.00520578,6 8.5,6 9,6 C9.5,6 10.5,6 10.5,5.5 C10.5,5 9.5,4.5 9.5,3.5 C9.5,2.5 10.5,2 12,2 C13.5,2 14.5,2.5 14.5,3.5 C14.5,4.5 13.5,5 13.5,5.5 C13.5,6 14.5,6 15,6 C15.5,6 17.9915933,6 17.9915933,6 C19.1008057,6 20,6.89948106 20,8.0054406 C20,8.0054406 20,8.52685547 20,9.01342773 C20,9.5 20,10.5 19.5,10.5 C19,10.5 18.5,9.5 17.5,9.5 C16.5,9.5 16,10.5 16,12 C16,13.5 16.5,14.5 17.5,14.5 C18.5,14.5 19,13.5 19.5,13.5 C20,13.5 20,14.5 20,15 C20,15.5 20,17.9915933 20,17.9915933 C20,19.1008057 19.0993512,20 17.9915933,20 L15,20 C14.5,20 13.5,20 13.5,19.5 C13.5,19 14.5,18.5 14.5,17.5 C14.5,16.5 13.5,16 12,16 C10.5,16 9.5,16.5 9.5,17.5 C9.5,18.5 10.5,19 10.5,19.5 C10.5,20 9.5,20 9,20 C8.5,20 8.00520578,20 8.00520578,20 C6.89776121,20 6,19.0993512 6,17.9915933 C6,17.9915933 6,15.5 6,15 C6,14.5 5.7310045,13.5 5.5,13.5 C4.94132665,13.5 4.5,14.5 3.5,14.5 C2.5,14.5 2,13.5 2,12 C2,10.5 2.5,9.5 3.5,9.5 C4.5,9.5 5.35135223,10.5 5.5,10.5 C6,10.5 6,9.5402832 6,9.0201416 C6,8.5 6,7.99547146 6,7.99547146 Z" id="Combined-Shape"></path>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/application/assets/fonts/icons/qr-code.svg b/application/assets/fonts/icons/qr-code.svg
new file mode 100644
index 00000000..d658e421
--- /dev/null
+++ b/application/assets/fonts/icons/qr-code.svg
@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 44.1 (41455) - http://www.bohemiancoding.com/sketch -->
+    <title>qr-code</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard-4" transform="translate(-268.000000, -599.000000)">
+            <g id="226" transform="translate(268.000000, 599.000000)">
+                <path d="M3,3 L8,3 L8,8 L3,8 L3,3 Z M16,3 L21,3 L21,8 L16,8 L16,3 Z M3,16 L8,16 L8,21 L3,21 L3,16 Z" id="Squares" stroke="#333333" stroke-width="2" stroke-linejoin="round"></path>
+                <path d="M12,2.99980749 C12,2.44371665 11.5522847,2 11,2 C10.4438648,2 10,2.44762906 10,2.99980749 L10,6.00019251 C10,6.55628335 10.4477153,7 11,7 C11.5561352,7 12,6.55237094 12,6.00019251 L12,5 L12.9906311,5 C13.5566468,5 14,4.55228475 14,4 C14,3.44386482 13.5480902,3 12.9906311,3 L12,3 Z M21.7085674,21.7071699 C21.5281317,21.8880972 21.2782056,22 21.0001925,22 L17.9998075,22 C17.4476291,22 17,21.5561352 17,21 C17,20.4477153 17.4437166,20 17.9998075,20 L20,20 L20,17.9998075 C20,17.4476291 20.4438648,17 21,17 C21.5522847,17 22,17.4437166 22,17.9998075 L22,21.0001925 C22,21.2762499 21.8890594,21.5261759 21.7086132,21.7071005 Z M10.0000105,18.0046821 C10.0000035,18.0062435 10,18.0078058 10,18.0093689 L10,19.9906311 C10,20.5566468 10.4477153,21 11,21 C11.5561352,21 12,20.5480902 12,19.9906311 L12,19 L14,19 L14,21.0001925 C14,21.5562834 14.4477153,22 15,22 C15.5561352,22 16,21.5523709 16,21.0001925 L16,17.9998075 C16,17.7233097 15.8893137,17.4745935 15.7101221,17.2943891 C15.5304624,17.1109439 15.2827903,17 15.009222,17 L10.990778,17 C10.4509752,17 10,17.4477153 10,18 C10,18.0015632 10.0000035,18.0031255 10.0000105,18.0046869 Z M10.2898779,15.7056109 C10.1106863,15.5254065 10,15.2766903 10,15.0001925 L10,12 L8.99077797,12 C8.44358641,12 8,11.5561352 8,11 C8,10.4477153 8.45097518,10 8.99077797,10 L12,10 L12,7.99980749 C12,7.44762906 12.4438648,7 13,7 C13.5522847,7 14,7.44371665 14,7.99980749 L14,11.0001925 C14,11.2747557 13.8902571,11.5234696 13.7115371,11.7041566 C13.5267675,11.888094 13.2790959,12 13.009222,12 L12,12 L12,14 L15.009222,14 C15.5564136,14 16,14.4438648 16,15 C16,15.5522847 15.5490248,16 15.009222,16 L10.990778,16 C10.7172097,16 10.4695376,15.8890561 10.2902463,15.7086052 Z M2,11 C2,10.4477153 2.44335318,10 3.0093689,10 L4.9906311,10 C5.54809015,10 6,10.4438648 6,11 C6,11.5522847 5.55664682,12 4.9906311,12 L3.0093689,12 C2.45190985,12 2,11.5561352 2,11 Z M6,13 C6,12.4477153 6.44386482,12 7,12 C7.55228475,12 8,12.4438648 8,13 C8,13.5522847 7.55613518,14 7,14 C6.44771525,14 6,13.5561352 6,13 Z M17,15 C17,14.4477153 17.4438648,14 18,14 C18.5522847,14 19,14.4438648 19,15 C19,15.5522847 18.5561352,16 18,16 C17.4477153,16 17,15.5561352 17,15 Z M17,18 C17,17.4477153 17.4438648,17 18,17 C18.5522847,17 19,17.4438648 19,18 C19,18.5522847 18.5561352,19 18,19 C17.4477153,19 17,18.5561352 17,18 Z M20,15 C20,14.4477153 20.4438648,14 21,14 C21.5522847,14 22,14.4438648 22,15 C22,15.5522847 21.5561352,16 21,16 C20.4477153,16 20,15.5561352 20,15 Z M15,11 C15,10.4477153 15.4433532,10 16.0093689,10 L17.9906311,10 C18.5480902,10 19,10.4438648 19,11 C19,11.5522847 18.5566468,12 17.9906311,12 L16.0093689,12 C15.4519098,12 15,11.5561352 15,11 Z" id="Lines/Dots" fill="#333333"></path>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/application/assets/fonts/icons/queue.svg b/application/assets/fonts/icons/queue.svg
new file mode 100644
index 00000000..41b2130b
--- /dev/null
+++ b/application/assets/fonts/icons/queue.svg
@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 44.1 (41455) - http://www.bohemiancoding.com/sketch -->
+    <title>queue</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard-4" transform="translate(-664.000000, -467.000000)" stroke="#333333">
+            <g id="175" transform="translate(664.000000, 467.000000)">
+                <path d="M7.5,7 C7.5,7.27759576 7.72452386,7.5 8.00684547,7.5 L19.9931545,7.5 C20.2743191,7.5 20.5,7.27572555 20.5,7 C20.5,6.72240424 20.2754761,6.5 19.9931545,6.5 L8.00684547,6.5 C7.72568093,6.5 7.5,6.72427445 7.5,7 Z M7.5,12 C7.5,12.2775958 7.72452386,12.5 8.00684547,12.5 L19.9931545,12.5 C20.2743191,12.5 20.5,12.2757255 20.5,12 C20.5,11.7224042 20.2754761,11.5 19.9931545,11.5 L8.00684547,11.5 C7.72568093,11.5 7.5,11.7242745 7.5,12 Z M7.5,17 C7.5,17.2775958 7.72452386,17.5 8.00684547,17.5 L19.9931545,17.5 C20.2743191,17.5 20.5,17.2757255 20.5,17 C20.5,16.7224042 20.2754761,16.5 19.9931545,16.5 L8.00684547,16.5 C7.72568093,16.5 7.5,16.7242745 7.5,17 Z M4,7.5 C4.27614237,7.5 4.5,7.27614237 4.5,7 C4.5,6.72385763 4.27614237,6.5 4,6.5 C3.72385763,6.5 3.5,6.72385763 3.5,7 C3.5,7.27614237 3.72385763,7.5 4,7.5 Z M4,12.5 C4.27614237,12.5 4.5,12.2761424 4.5,12 C4.5,11.7238576 4.27614237,11.5 4,11.5 C3.72385763,11.5 3.5,11.7238576 3.5,12 C3.5,12.2761424 3.72385763,12.5 4,12.5 Z M4,17.5 C4.27614237,17.5 4.5,17.2761424 4.5,17 C4.5,16.7238576 4.27614237,16.5 4,16.5 C3.72385763,16.5 3.5,16.7238576 3.5,17 C3.5,17.2761424 3.72385763,17.5 4,17.5 Z" id="Combined-Shape"></path>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/application/assets/fonts/icons/radar.svg b/application/assets/fonts/icons/radar.svg
new file mode 100644
index 00000000..40adbf71
--- /dev/null
+++ b/application/assets/fonts/icons/radar.svg
@@ -0,0 +1,33 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 44.1 (41455) - http://www.bohemiancoding.com/sketch -->
+    <title>radar</title>
+    <desc>Created with Sketch.</desc>
+    <defs>
+        <linearGradient x1="100%" y1="50%" x2="18.0695603%" y2="50%" id="linearGradient-1">
+            <stop stop-color="#333333" stop-opacity="0" offset="0%"></stop>
+            <stop stop-color="#333333" stop-opacity="0" offset="25.4064096%"></stop>
+            <stop stop-color="#333333" offset="100%"></stop>
+        </linearGradient>
+        <linearGradient x1="100%" y1="50%" x2="15.9469039%" y2="50%" id="linearGradient-2">
+            <stop stop-color="#333333" stop-opacity="0" offset="0%"></stop>
+            <stop stop-color="#333333" stop-opacity="0" offset="26.1865829%"></stop>
+            <stop stop-color="#333333" offset="100%"></stop>
+        </linearGradient>
+        <linearGradient x1="100%" y1="50%" x2="18.0695603%" y2="50%" id="linearGradient-3">
+            <stop stop-color="#333333" stop-opacity="0" offset="0%"></stop>
+            <stop stop-color="#333333" stop-opacity="0" offset="31.4995241%"></stop>
+            <stop stop-color="#333333" offset="100%"></stop>
+        </linearGradient>
+    </defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard-4" transform="translate(-136.000000, -687.000000)">
+            <g id="263" transform="translate(136.000000, 687.000000)">
+                <path d="M19.7697421,19.793872 C21.8263932,17.743554 23.0042666,14.964888 23.0042666,12.0021333 C23.0042666,5.92582286 18.0784437,1 12.0021333,1 C5.92582286,1 1,5.92582286 1,12.0021333 C1,14.9836136 2.19288257,17.778316 4.27256029,19.8316075 L5.67771641,18.4083942 C3.97485721,16.7271403 3,14.4432307 3,12.0021333 C3,7.03039236 7.03039236,3 12.0021333,3 C16.9738742,3 21.0042666,7.03039236 21.0042666,12.0021333 C21.0042666,14.4279167 20.0416901,16.6986857 18.357711,18.3774794 L19.7697421,19.793872 Z" id="3" fill="url(#linearGradient-1)" fill-rule="nonzero"></path>
+                <path d="M16.7359425,16.8097155 C18.0155724,15.549605 18.75,13.8321577 18.75,12 C18.75,8.27207794 15.7279221,5.25 12,5.25 C8.27207794,5.25 5.25,8.27207794 5.25,12 C5.25,13.8202401 5.97486047,15.5274871 7.23982721,16.7857347 L8.29765918,15.7222539 C7.31291524,14.7427406 6.75,13.4169194 6.75,12 C6.75,9.10050506 9.10050506,6.75 12,6.75 C14.8994949,6.75 17.25,9.10050506 17.25,12 C17.25,13.4261829 16.6796435,14.7599524 15.6834652,15.7409352 L16.7359425,16.8097155 Z" id="2" fill="url(#linearGradient-2)" fill-rule="nonzero"></path>
+                <path d="M13.42447,13.44032 L14.1095752,14.1330011 C14.6750102,13.5737503 15,12.8113989 15,12 C15,10.3431458 13.6568542,9 12,9 C10.3431458,9 9,10.3431458 9,12 C9,12.824788 9.33582591,13.5985481 9.91776039,14.1596969 L10.5863788,13.466312 C10.2851192,12.9965602 10,12.3825991 10,12 C10,10.8954305 10.8954305,10 12,10 C13.1045695,10 14,10.8954305 14,12 C14,12.3698813 13.7199196,12.9718614 13.42447,13.44032 Z" id="1" fill="url(#linearGradient-3)" fill-rule="nonzero"></path>
+                <path d="M5,19.0827625 L12,12.0827625" id="Line" stroke="#333333" stroke-width="2" stroke-linecap="round" stroke-linejoin="bevel"></path>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/application/assets/fonts/icons/rainbow.svg b/application/assets/fonts/icons/rainbow.svg
new file mode 100644
index 00000000..404de82d
--- /dev/null
+++ b/application/assets/fonts/icons/rainbow.svg
@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 44.1 (41455) - http://www.bohemiancoding.com/sketch -->
+    <title>rainbow</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round">
+        <g id="Artboard-4" transform="translate(-180.000000, -863.000000)" stroke="#333333" stroke-width="2">
+            <g id="344" transform="translate(180.000000, 863.000000)">
+                <path d="M23,17 C23,10.9248678 18.0751322,6 12,6 C5.92486775,6 1,10.9248678 1,17" id="1"></path>
+                <path d="M20,17 C20,12.581722 16.418278,9 12,9 C7.581722,9 4,12.581722 4,17" id="2" opacity="0.75"></path>
+                <path d="M17,17 C17,14.2385763 14.7614237,12 12,12 C9.23857625,12 7,14.2385763 7,17" id="3" opacity="0.5"></path>
+                <path d="M14,17 C14,15.8954305 13.1045695,15 12,15 C10.8954305,15 10,15.8954305 10,17" id="4" opacity="0.25"></path>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/application/assets/fonts/icons/receipt-print.svg b/application/assets/fonts/icons/receipt-print.svg
new file mode 100644
index 00000000..f9cfae44
--- /dev/null
+++ b/application/assets/fonts/icons/receipt-print.svg
@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <defs>
+        <linearGradient x1="50%" y1="0%" x2="50%" y2="22.4697537%" id="linearGradient-1">
+            <stop stop-color="#333333" stop-opacity="0.246886322" offset="0%"></stop>
+            <stop stop-color="#333333" stop-opacity="0" offset="100%"></stop>
+        </linearGradient>
+    </defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard-4" transform="translate(-488.000000, -599.000000)">
+            <g id="231" transform="translate(488.000000, 599.000000)">
+                <polygon id="Paper" stroke="#333333" stroke-width="2" fill="url(#linearGradient-1)" stroke-linecap="round" stroke-linejoin="round" points="5 3 19 3 19 21 18 20 16 21 14 20 12 21 10 20 8 21 6 20 5 21"></polygon>
+                <path d="M7,9.5 C7,9.22385763 7.21505737,9 7.49047852,9 L10.5095215,9 C10.7804053,9 11,9.23193359 11,9.5 C11,9.77614237 10.7849426,10 10.5095215,10 L7.49047852,10 C7.21959471,10 7,9.76806641 7,9.5 Z M7,11.5 C7,11.2238576 7.22788048,11 7.49100518,11 L12.5089948,11 C12.7801695,11 13,11.2319336 13,11.5 C13,11.7761424 12.7721195,12 12.5089948,12 L7.49100518,12 C7.21983051,12 7,11.7680664 7,11.5 Z M7,13.5 C7,13.2238576 7.2157526,13 7.49538898,13 L9.50461102,13 C9.7782068,13 10,13.2319336 10,13.5 C10,13.7761424 9.7842474,14 9.50461102,14 L7.49538898,14 C7.2217932,14 7,13.7680664 7,13.5 Z M7,15.5 C7,15.2238576 7.21484375,15 7.49769878,15 L11.5023012,15 C11.7771727,15 12,15.2319336 12,15.5 C12,15.7761424 11.7851562,16 11.5023012,16 L7.49769878,16 C7.22282734,16 7,15.7680664 7,15.5 Z M15,9.5 C15,9.22385763 15.214035,9 15.5046844,9 L16.4953156,9 C16.7740451,9 17,9.23193359 17,9.5 C17,9.77614237 16.785965,10 16.4953156,10 L15.5046844,10 C15.2259549,10 15,9.76806641 15,9.5 Z M15,11.5 C15,11.2238576 15.214035,11 15.5046844,11 L16.4953156,11 C16.7740451,11 17,11.2319336 17,11.5 C17,11.7761424 16.785965,12 16.4953156,12 L15.5046844,12 C15.2259549,12 15,11.7680664 15,11.5 Z M15,13.5 C15,13.2238576 15.214035,13 15.5046844,13 L16.4953156,13 C16.7740451,13 17,13.2319336 17,13.5 C17,13.7761424 16.785965,14 16.4953156,14 L15.5046844,14 C15.2259549,14 15,13.7680664 15,13.5 Z M15,15.5 C15,15.2238576 15.214035,15 15.5046844,15 L16.4953156,15 C16.7740451,15 17,15.2319336 17,15.5 C17,15.7761424 16.785965,16 16.4953156,16 L15.5046844,16 C15.2259549,16 15,15.7680664 15,15.5 Z" id="Info" fill="#333333" opacity="0.75999999" transform="translate(12.000000, 12.500000) scale(-1, -1) translate(-12.000000, -12.500000) "></path>
+                <path d="M5,7 L4.00104344,7 C2.89589766,7 2,6.11227036 2,5 L2,5 L2,5 C2,3.8954305 2.89821238,3 3.99079514,3 L20.0092049,3 C21.1086907,3 22,3.88772964 22,5 L22,5 C22,6.1045695 21.0961289,7 20.0098978,7 L19.0410156,7" id="Slot" stroke="#333333" stroke-width="2"></path>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/application/assets/fonts/icons/receipt.svg b/application/assets/fonts/icons/receipt.svg
new file mode 100644
index 00000000..9c89424f
--- /dev/null
+++ b/application/assets/fonts/icons/receipt.svg
@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 44.1 (41455) - http://www.bohemiancoding.com/sketch -->
+    <title>receipt</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard-4" transform="translate(-444.000000, -599.000000)">
+            <g id="230" transform="translate(444.000000, 599.000000)">
+                <polygon id="Paper" stroke="#333333" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" points="5 3 6 4 8 3 10 4 12 3 14 4 16 3 18 4 19 3 19 21 18 20 16 21 14 20 12 21 10 20 8 21 6 20 5 21"></polygon>
+                <path d="M7,8.5 C7,8.22385763 7.21505737,8 7.49047852,8 L10.5095215,8 C10.7804053,8 11,8.23193359 11,8.5 C11,8.77614237 10.7849426,9 10.5095215,9 L7.49047852,9 C7.21959471,9 7,8.76806641 7,8.5 Z M7,10.5 C7,10.2238576 7.22788048,10 7.49100518,10 L12.5089948,10 C12.7801695,10 13,10.2319336 13,10.5 C13,10.7761424 12.7721195,11 12.5089948,11 L7.49100518,11 C7.21983051,11 7,10.7680664 7,10.5 Z M7,12.5 C7,12.2238576 7.2157526,12 7.49538898,12 L9.50461102,12 C9.7782068,12 10,12.2319336 10,12.5 C10,12.7761424 9.7842474,13 9.50461102,13 L7.49538898,13 C7.2217932,13 7,12.7680664 7,12.5 Z M7,14.5 C7,14.2238576 7.21484375,14 7.49769878,14 L11.5023012,14 C11.7771727,14 12,14.2319336 12,14.5 C12,14.7761424 11.7851562,15 11.5023012,15 L7.49769878,15 C7.22282734,15 7,14.7680664 7,14.5 Z M15,8.5 C15,8.22385763 15.214035,8 15.5046844,8 L16.4953156,8 C16.7740451,8 17,8.23193359 17,8.5 C17,8.77614237 16.785965,9 16.4953156,9 L15.5046844,9 C15.2259549,9 15,8.76806641 15,8.5 Z M15,10.5 C15,10.2238576 15.214035,10 15.5046844,10 L16.4953156,10 C16.7740451,10 17,10.2319336 17,10.5 C17,10.7761424 16.785965,11 16.4953156,11 L15.5046844,11 C15.2259549,11 15,10.7680664 15,10.5 Z M15,12.5 C15,12.2238576 15.214035,12 15.5046844,12 L16.4953156,12 C16.7740451,12 17,12.2319336 17,12.5 C17,12.7761424 16.785965,13 16.4953156,13 L15.5046844,13 C15.2259549,13 15,12.7680664 15,12.5 Z M15,14.5 C15,14.2238576 15.214035,14 15.5046844,14 L16.4953156,14 C16.7740451,14 17,14.2319336 17,14.5 C17,14.7761424 16.785965,15 16.4953156,15 L15.5046844,15 C15.2259549,15 15,14.7680664 15,14.5 Z" id="Info" fill="#333333" opacity="0.75999999"></path>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/application/assets/fonts/icons/redo-alt.svg b/application/assets/fonts/icons/redo-alt.svg
new file mode 100644
index 00000000..b2e23bcf
--- /dev/null
+++ b/application/assets/fonts/icons/redo-alt.svg
@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 44.1 (41455) - http://www.bohemiancoding.com/sketch -->
+    <title>redo-alt</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round">
+        <g id="Artboard-4" transform="translate(-400.000000, -1090.000000)" stroke="#333333" stroke-width="2">
+            <g id="Extras" transform="translate(48.000000, 1046.000000)">
+                <g id="redo" transform="translate(352.000000, 44.000000)">
+                    <path d="M13.8275862,19 C16.6842315,19 19,16.7614237 19,14 C19,11.2385763 16.6842315,9 13.8275862,9 L4,9" id="Line" transform="translate(11.500000, 14.000000) scale(-1, 1) translate(-11.500000, -14.000000) "></path>
+                    <polyline id="Head" stroke-linejoin="round" transform="translate(17.500000, 9.000000) scale(-1, 1) translate(-17.500000, -9.000000) " points="19.9974713 4 15 8.99873531 20 14"></polyline>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/application/assets/fonts/icons/redo.svg b/application/assets/fonts/icons/redo.svg
new file mode 100644
index 00000000..43668e35
--- /dev/null
+++ b/application/assets/fonts/icons/redo.svg
@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 44.1 (41455) - http://www.bohemiancoding.com/sketch -->
+    <title>redo</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard-4" transform="translate(-180.000000, -1046.000000)" fill="#333333">
+            <g id="Extras" transform="translate(48.000000, 1046.000000)">
+                <g id="redo" transform="translate(132.000000, 0.000000)">
+                    <path d="M11,19 C11.5522847,19 12,19.4477153 12,20 C12,20.5522847 11.5522847,21 11,21 C10.9940429,21 10.9880979,20.9999479 10.9821656,20.9998442 C6.01980239,20.990358 2,16.9646166 2,12 C2,7.02943725 6.02943725,3 11,3 C15.9705627,3 20,7.02943725 20,12 L18,12 C18,8.13400675 14.8659932,5 11,5 C7.13400675,5 4,8.13400675 4,12 C4,15.8659932 7.13400675,19 11,19 Z M15,12 L23,12 L19,16 L15,12 Z" id="Arrow"></path>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/application/assets/fonts/icons/refresh.svg b/application/assets/fonts/icons/refresh.svg
new file mode 100644
index 00000000..9caa9be4
--- /dev/null
+++ b/application/assets/fonts/icons/refresh.svg
@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 44.1 (41455) - http://www.bohemiancoding.com/sketch -->
+    <title>refresh</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard-4" transform="translate(-224.000000, -1046.000000)" fill="#333333">
+            <g id="Extras" transform="translate(48.000000, 1046.000000)">
+                <g id="refresh" transform="translate(176.000000, 0.000000)">
+                    <path d="M20.9995201,13.0312796 L20.9999519,13.0312796 C20.9830843,17.9874565 16.960132,22 12,22 C7.02943725,22 3,17.9705627 3,13 C3,8.0398348 7.01259713,4.01686187 11.9688198,4.00005287 L11.9688198,6.00006796 C8.11716976,6.01686496 5,9.14440548 5,13 C5,16.8659932 8.13400675,20 12,20 C15.8555614,20 18.9830812,16.8828839 18.9999316,13.0312796 L19.0004799,13.0312796 C19.0001607,13.0208922 19,13.0104649 19,13 C19,12.4477153 19.4477153,12 20,12 C20.5522847,12 21,12.4477153 21,13 C21,13.0104649 20.9998393,13.0208922 20.9995201,13.0312796 Z M12,9 L12,1 L16,5 L12,9 Z" id="Arrow"></path>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/application/assets/fonts/icons/reindeer.svg b/application/assets/fonts/icons/reindeer.svg
new file mode 100644
index 00000000..9df6baf7
--- /dev/null
+++ b/application/assets/fonts/icons/reindeer.svg
@@ -0,0 +1,22 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 44.1 (41455) - http://www.bohemiancoding.com/sketch -->
+    <title>reindeer</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard-4" transform="translate(-576.000000, -555.000000)">
+            <g id="213" transform="translate(576.000000, 555.000000)">
+                <path d="M18,16 L18,16 C19.1045695,16 21,14.1045695 21,13 C21,11.8954305 20.1045695,12 19,12 C18.646115,12 18.3136971,12.0919116 18.0253154,12.2531655" id="Right-Ear" stroke="#333333" stroke-width="2"></path>
+                <path d="M6.03811324,12.2901794 C5.73549324,12.1060506 5.38013134,12 5,12 C3.8954305,12 3,11.8954305 3,13 C3,14.1045695 4.8954305,16 6,16 L6,16" id="Left-Ear" stroke="#333333" stroke-width="2"></path>
+                <path d="M12,21 C15,21 18,18.3137085 18,15 C18,11.6862915 15.3137085,9 12,9 C8.6862915,9 6,11.6862915 6,15 C6,18.3137085 9,21 12,21 Z" id="Head" stroke="#333333" stroke-width="2"></path>
+                <circle id="A-Very-Shiny-Nose" fill="#333333" cx="12" cy="21" r="3"></circle>
+                <path d="M14,17 C13.4477153,17 13,16.5522847 13,16 C13,15.4477153 13.4477153,15 14,15 C14.5522847,15 15,15.4477153 15,16 C15,16.5522847 14.5522847,17 14,17 Z M10,17 C9.44771525,17 9,16.5522847 9,16 C9,15.4477153 9.44771525,15 10,15 C10.5522847,15 11,15.4477153 11,16 C11,16.5522847 10.5522847,17 10,17 Z" id="Eyes" fill="#333333"></path>
+                <path d="M15,11 L18.1122704,9.44386482 C18.6025499,9.19872505 19,8.56211865 19,7.99707067 L19,2" id="Right-Antler" stroke="#333333" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
+                <path d="M15,3 L15,3.99895656 C15,5.10410234 15.8877296,6 17,6 L19,6 L21,6 C22.1045695,6 23,5.1061002 23,3.9951185 L23,1" id="Right-Antler" stroke="#333333" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
+                <path d="M5,11 L8.11227036,9.44386482 C8.6025499,9.19872505 9,8.56211865 9,7.99707067 L9,2" id="Left-Antler" stroke="#333333" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" transform="translate(7.000000, 6.500000) scale(-1, 1) translate(-7.000000, -6.500000) "></path>
+                <path d="M1,3 L1,3.99895656 C1,5.10410234 1.88772964,6 3,6 L5,6 L7,6 C8.1045695,6 9,5.1061002 9,3.9951185 L9,1" id="Left-Antler" stroke="#333333" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" transform="translate(5.000000, 3.500000) scale(-1, 1) translate(-5.000000, -3.500000) "></path>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/application/assets/fonts/icons/remove.svg b/application/assets/fonts/icons/remove.svg
new file mode 100644
index 00000000..ed6e174e
--- /dev/null
+++ b/application/assets/fonts/icons/remove.svg
@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 44.1 (41455) - http://www.bohemiancoding.com/sketch -->
+    <title>remove</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard-4" transform="translate(-92.000000, -1046.000000)">
+            <g id="Extras" transform="translate(48.000000, 1046.000000)">
+                <g id="minus" transform="translate(44.000000, 0.000000)">
+                    <circle id="Circle" stroke="#333333" stroke-width="2" cx="12" cy="12" r="10"></circle>
+                    <rect id="Minus" fill="#333333" x="7" y="11" width="10" height="2" rx="1"></rect>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/application/assets/fonts/icons/repeat.svg b/application/assets/fonts/icons/repeat.svg
new file mode 100644
index 00000000..94e1ecdb
--- /dev/null
+++ b/application/assets/fonts/icons/repeat.svg
@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 44.1 (41455) - http://www.bohemiancoding.com/sketch -->
+    <title>repeat</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard-4" transform="translate(-620.000000, -467.000000)">
+            <g id="174" transform="translate(620.000000, 467.000000)">
+                <path d="M16.5547002,9.83205029 C15.8901455,10.2750868 15,9.79869538 15,9 L15,5 C15,4.20130462 15.8901455,3.72491322 16.5547002,4.16794971 L19.5547002,6.16794971 C20.1484333,6.56377175 20.1484333,7.43622825 19.5547002,7.83205029 L16.5547002,9.83205029 Z" id="Right-Arrow" fill="#333333" fill-rule="nonzero"></path>
+                <path d="M7.4452998,19.8320503 L4.4452998,17.8320503 C3.85156673,17.4362282 3.85156673,16.5637718 4.4452998,16.1679497 L7.4452998,14.1679497 C8.10985453,13.7249132 9,14.2013046 9,15 L9,19 C9,19.7986954 8.10985453,20.2750868 7.4452998,19.8320503 Z" id="Left-Arrow" fill="#333333" fill-rule="nonzero"></path>
+                <path d="M3,12 C3,9.23857625 5.23533061,7 7.99367318,7 L18,7 M21,12 C21,14.7614237 18.7661779,17 16.0049709,17 L7,17" id="Lines" stroke="#333333" stroke-width="2" stroke-linecap="round"></path>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/application/assets/fonts/icons/reply-all.svg b/application/assets/fonts/icons/reply-all.svg
new file mode 100644
index 00000000..afa9859f
--- /dev/null
+++ b/application/assets/fonts/icons/reply-all.svg
@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 44.1 (41455) - http://www.bohemiancoding.com/sketch -->
+    <title>reply-all</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard-4" transform="translate(-444.000000, -335.000000)">
+            <g id="110" transform="translate(444.000000, 335.000000)">
+                <polyline id="Path-37" stroke="#333333" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" points="7 5 1 11 7 17"></polyline>
+                <path d="M12,6 L7,11.0296054 L12,16 L12,11.999579 L17,11.999579 C20,11.999579 21,13.9583764 21,17 C23,13.9583764 21,10 17,10 L12,10 L12,6 Z M14,8 L17,8 C22.5007525,8 25.5952407,13.6517611 22.6711036,18.0988234 C21.5803123,19.7577116 19,18.9853804 19,17 C19,14.6641564 18.5225201,13.999579 17,13.999579 L14,13.999579 L14,16 C14,17.7789478 11.8516275,18.6725719 10.5899919,17.4184066 L5.58999192,12.448012 C4.80661789,11.6692764 4.8028688,10.4029328 5.58161814,9.61957244 L10.5816181,4.58996706 C11.8398311,3.32430411 14,4.21534246 14,6 L14,8 Z" id="Path-36" fill="#333333" fill-rule="nonzero"></path>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/application/assets/fonts/icons/reply.svg b/application/assets/fonts/icons/reply.svg
new file mode 100644
index 00000000..435b8d33
--- /dev/null
+++ b/application/assets/fonts/icons/reply.svg
@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 44.1 (41455) - http://www.bohemiancoding.com/sketch -->
+    <title>reply</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard-4" transform="translate(-400.000000, -335.000000)" fill-rule="nonzero" fill="#333333">
+            <g id="109" transform="translate(400.000000, 335.000000)">
+                <path d="M9,6 L4,11.0296054 L9,16 L9,11.999579 L15,11.999579 C18,11.999579 19,13.9583764 19,17 C21,13.9583764 19,10 15,10 L9,10 L9,6 Z M11,8 L15,8 C20.5007525,8 23.5952407,13.6517611 20.6711036,18.0988234 C19.5803123,19.7577116 17,18.9853804 17,17 C17,14.6641564 16.5225201,13.999579 15,13.999579 L11,13.999579 L11,16 C11,17.7789478 8.85162753,18.6725719 7.58999192,17.4184066 L2.58999192,12.448012 C1.80661789,11.6692764 1.8028688,10.4029328 2.58161814,9.61957244 L7.58161814,4.58996706 C8.83983111,3.32430411 11,4.21534246 11,6 L11,8 Z" id="Path-36"></path>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/application/assets/fonts/icons/robot.svg b/application/assets/fonts/icons/robot.svg
new file mode 100644
index 00000000..4d1a35a0
--- /dev/null
+++ b/application/assets/fonts/icons/robot.svg
@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 44.1 (41455) - http://www.bohemiancoding.com/sketch -->
+    <title>robot</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard-4" transform="translate(-532.000000, -335.000000)">
+            <g id="111" transform="translate(532.000000, 335.000000)">
+                <rect id="Face" stroke="#333333" stroke-width="2" x="1" y="7" width="22" height="14" rx="2"></rect>
+                <path d="M13,3.73243561 L13,7 L11,7 L11,3.73243561 C10.4021986,3.38662619 10,2.74028236 10,2 C10,0.8954305 10.8954305,0 12,0 C13.1045695,0 14,0.8954305 14,2 C14,2.74028236 13.5978014,3.38662619 13,3.73243561 Z" id="Antenna" fill="#333333"></path>
+                <path d="M18,14 C16.8954305,14 16,13.1045695 16,12 C16,10.8954305 16.8954305,10 18,10 C19.1045695,10 20,10.8954305 20,12 C20,13.1045695 19.1045695,14 18,14 Z M6,14 C4.8954305,14 4,13.1045695 4,12 C4,10.8954305 4.8954305,10 6,10 C7.1045695,10 8,10.8954305 8,12 C8,13.1045695 7.1045695,14 6,14 Z" id="Eyes" fill="#333333"></path>
+                <path d="M10,15 C10,16.1045695 10.8954305,17 12,17 L12,17 C13.1045695,17 14,16.1045695 14,15" id="Mouth" stroke="#333333" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/application/assets/fonts/icons/rocket.svg b/application/assets/fonts/icons/rocket.svg
new file mode 100644
index 00000000..5a1e418e
--- /dev/null
+++ b/application/assets/fonts/icons/rocket.svg
@@ -0,0 +1,26 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 44.1 (41455) - http://www.bohemiancoding.com/sketch -->
+    <title>rocket</title>
+    <desc>Created with Sketch.</desc>
+    <defs>
+        <linearGradient x1="50%" y1="0%" x2="50%" y2="99.7847577%" id="linearGradient-1">
+            <stop stop-color="#333333" offset="0%"></stop>
+            <stop stop-color="#333333" stop-opacity="0" offset="100%"></stop>
+        </linearGradient>
+    </defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard-4" transform="translate(-48.000000, -863.000000)">
+            <g id="341" transform="translate(48.000000, 863.000000)">
+                <path d="M10,7.00684547 C10,6.45078007 10.2131486,5.61633253 10.4820251,5.13235474 L12.0179749,2.36764526 C12.28419,1.88845802 12.7131486,1.88366747 12.9820251,2.36764526 L14.5179749,5.13235474 C14.78419,5.61154198 15,6.44994876 15,7.00684547 L15,20 L10,20 L10,7.00684547 Z" id="Body" stroke="#333333" stroke-width="2" stroke-linejoin="round"></path>
+                <polygon id="Bottom" fill="#333333" fill-rule="nonzero" points="10 20 15 20 15 18 10 18"></polygon>
+                <polygon id="Right-Wing-Bottom" fill="#333333" fill-rule="nonzero" points="15 19 21 19 21 17 15 17"></polygon>
+                <path d="M15,8 C15,12 21,13 21,18 C21,18.5 21,19 21,19 L15,19 C15,19 15,9 15,8 Z" id="Right-Wing" stroke="#333333" stroke-width="2" fill-opacity="0.200000003" fill="#333333" stroke-linejoin="round"></path>
+                <polygon id="Left-Wing-Bottom" fill="#333333" fill-rule="nonzero" points="4 19 10 19 10 17 4 17"></polygon>
+                <path d="M4,8 C4,12 10,13 10,18 C10,18.5 10,19 10,19 L4,19 C4,19 4,9 4,8 Z" id="Left-Wing-Bottom" stroke="#333333" stroke-width="2" fill-opacity="0.200000003" fill="#333333" stroke-linejoin="round" transform="translate(7.000000, 13.500000) scale(-1, 1) translate(-7.000000, -13.500000) "></path>
+                <path d="M12.5,8 C12.2238576,8 12,7.77614237 12,7.5 C12,7.22385763 12.2238576,7 12.5,7 C12.7761424,7 13,7.22385763 13,7.5 C13,7.77614237 12.7761424,8 12.5,8 Z M12.5,10 C12.2238576,10 12,9.77614237 12,9.5 C12,9.22385763 12.2238576,9 12.5,9 C12.7761424,9 13,9.22385763 13,9.5 C13,9.77614237 12.7761424,10 12.5,10 Z M12.5,12 C12.2238576,12 12,11.7761424 12,11.5 C12,11.2238576 12.2238576,11 12.5,11 C12.7761424,11 13,11.2238576 13,11.5 C13,11.7761424 12.7761424,12 12.5,12 Z" id="Windows" fill="#333333"></path>
+                <polygon id="Engine" fill="url(#linearGradient-1)" opacity="0.5" points="11 20 14 20 13.5 24 11.5 24"></polygon>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/application/assets/fonts/icons/rosette.svg b/application/assets/fonts/icons/rosette.svg
new file mode 100644
index 00000000..05445871
--- /dev/null
+++ b/application/assets/fonts/icons/rosette.svg
@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 44.1 (41455) - http://www.bohemiancoding.com/sketch -->
+    <title>rosette</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard-4" transform="translate(-312.000000, -423.000000)" stroke="#333333" stroke-width="2">
+            <g id="147" transform="translate(312.000000, 423.000000)">
+                <circle id="Medal" cx="12" cy="9" r="7"></circle>
+                <polygon id="Star" stroke-linejoin="round" points="12 10.4908497 10.2366442 11.427051 10.5821176 9.46069791 9.14683045 8.07294902 11.1237005 7.79387722 12 6 12.8762995 7.79387722 14.8531695 8.07294902 13.4178824 9.46069791 13.7633558 11.427051"></polygon>
+                <path d="M6.37415189,13.1660576 L3,19.0102601 L7.09807621,17.9121839 L8.19615242,22.0102601 L11.670574,15.9923854 C9.50050287,15.8918514 7.58849733,14.8032107 6.37415189,13.1660576 Z M12.3256662,15.9925585 L15.7999878,22.0102601 L16.898064,17.9121839 L20.9961402,19.0102601 L17.6236772,13.1689828 C16.4085228,14.8054524 14.4959957,15.8931678 12.3256662,15.9925585 Z" id="Ribbons" stroke-linecap="round" stroke-linejoin="round"></path>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/application/assets/fonts/icons/rotation-lock-off.svg b/application/assets/fonts/icons/rotation-lock-off.svg
new file mode 100644
index 00000000..79a1a040
--- /dev/null
+++ b/application/assets/fonts/icons/rotation-lock-off.svg
@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 44.1 (41455) - http://www.bohemiancoding.com/sketch -->
+    <title>rotation-lock-off</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard-4" transform="translate(-532.000000, -1090.000000)">
+            <g id="Extras" transform="translate(48.000000, 1046.000000)">
+                <g id="rotation-lock" transform="translate(484.000000, 44.000000)">
+                    <path d="M21,12 L19,12 C19,7.581722 15.418278,4 11,4 C6.581722,4 3,7.581722 3,12 C3,16.418278 6.581722,20 11,20 C13.4637309,20 15.6673408,18.8862894 17.1348489,17.1348489 L18.5534769,18.5534769 C16.7200083,20.6648956 14.0159193,22 11,22 C5.4771525,22 1,17.5228475 1,12 C1,6.4771525 5.4771525,2 11,2 C16.5228475,2 21,6.4771525 21,12 Z M16,12 L24,12 L20,16 L16,12 Z" id="Arrow" fill="#333333"></path>
+                    <rect id="Body" stroke="#333333" stroke-width="2" x="9" y="12" width="4" height="3" rx="1"></rect>
+                    <path d="M12.5,9 L12.5,12.5 L9.5,12.5 L9.5,9 C9.5,8.17157288 10.1715729,7.5 11,7.5 C11.8284271,7.5 12.5,8.17157288 12.5,9 Z" id="Lock" stroke="#333333"></path>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/application/assets/fonts/icons/rotation-lock-on.svg b/application/assets/fonts/icons/rotation-lock-on.svg
new file mode 100644
index 00000000..44c33624
--- /dev/null
+++ b/application/assets/fonts/icons/rotation-lock-on.svg
@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 44.1 (41455) - http://www.bohemiancoding.com/sketch -->
+    <title>rotation-lock-on</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard-4" transform="translate(-92.000000, -467.000000)">
+            <g id="162" transform="translate(92.000000, 467.000000)">
+                <path d="M21,12 L19,12 C19,7.581722 15.418278,4 11,4 C6.581722,4 3,7.581722 3,12 C3,16.418278 6.581722,20 11,20 C13.4637309,20 15.6673408,18.8862894 17.1348489,17.1348489 L18.5534769,18.5534769 C16.7200083,20.6648956 14.0159193,22 11,22 C5.4771525,22 1,17.5228475 1,12 C1,6.4771525 5.4771525,2 11,2 C16.5228475,2 21,6.4771525 21,12 Z M16,12 L24,12 L20,16 L16,12 Z" id="Arrow" fill="#333333"></path>
+                <rect id="Body" stroke="#333333" stroke-width="2" x="9" y="12" width="4" height="3" rx="1"></rect>
+                <path d="M9.5,12.5 L9.5,10 C9.5,9.17157288 10.1715729,8.5 11,8.5 C11.8284271,8.5 12.5,9.17157288 12.5,10 L12.5,12.5 L9.5,12.5 Z" id="Lock" stroke="#333333"></path>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/application/assets/fonts/icons/santa-hat.svg b/application/assets/fonts/icons/santa-hat.svg
new file mode 100644
index 00000000..4dd73a19
--- /dev/null
+++ b/application/assets/fonts/icons/santa-hat.svg
@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 44.1 (41455) - http://www.bohemiancoding.com/sketch -->
+    <title>santa-hat</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard-4" transform="translate(-92.000000, -555.000000)" stroke="#333333" stroke-width="2">
+            <g id="202" transform="translate(92.000000, 555.000000)">
+                <rect id="Rim" x="3" y="15" width="18" height="5" rx="2"></rect>
+                <path d="M6,15 C6,15 6.5,5 12,3.5 C17.5,2 19,7.5 19,7.5 C19,7.5 15,6.5 15,9.5 C15,12.5 18,15 18,15 L6,15 Z" id="Hat" stroke-linecap="round" stroke-linejoin="round"></path>
+                <circle id="Bobble" cx="20.5" cy="9.5" r="2.5"></circle>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/application/assets/fonts/icons/save.svg b/application/assets/fonts/icons/save.svg
new file mode 100644
index 00000000..09e8e293
--- /dev/null
+++ b/application/assets/fonts/icons/save.svg
@@ -0,0 +1,19 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 44.1 (41455) - http://www.bohemiancoding.com/sketch -->
+    <title>save</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard-4" transform="translate(-532.000000, -291.000000)">
+            <g id="92" transform="translate(532.000000, 291.000000)">
+                <path d="M3,4.99508929 C3,3.8932319 3.89706013,3 5.00585866,3 L15.9931545,3 C16.5492199,3 17.3138733,3.31387329 17.7059121,3.70591205 L20.2940879,6.29408795 C20.6839524,6.68395241 21,7.44994876 21,8.00684547 L21,18.9941413 C21,20.1019465 20.1073772,21 19.0049107,21 L4.99508929,21 C3.8932319,21 3,20.1073772 3,19.0049107 L3,4.99508929 Z" id="Body" stroke="#333333" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
+                <path d="M7,15.0029293 C7,14.4490268 7.4556644,14 7.99539757,14 L16.0046024,14 C16.5543453,14 17,14.4378814 17,15.0029293 L17,21 L7,21 L7,15.0029293 Z" id="Label" stroke="#333333" stroke-width="2"></path>
+                <path d="M9,16 L15,16 L15,17 L9,17 L9,16 Z M9,18 L15,18 L15,19 L9,19 L9,18 Z" id="Lines" fill="#333333" opacity="0.5"></path>
+                <rect id="Hole" fill="#333333" x="12" y="5" width="1" height="2"></rect>
+                <rect id="Tape" fill="#333333" x="7" y="4" width="2" height="5"></rect>
+                <rect id="Slider" stroke="#333333" stroke-width="2" x="7" y="3" width="8" height="6" rx="1"></rect>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/application/assets/fonts/icons/scales-2.svg b/application/assets/fonts/icons/scales-2.svg
new file mode 100644
index 00000000..1294f227
--- /dev/null
+++ b/application/assets/fonts/icons/scales-2.svg
@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 44.1 (41455) - http://www.bohemiancoding.com/sketch -->
+    <title>scales-2</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard-4" transform="translate(-268.000000, -819.000000)">
+            <g id="326" transform="translate(268.000000, 819.000000)">
+                <path d="M16,5 L19,5 C20.6568542,5 21.8329211,6.33663106 21.6285025,7.97197986 L20.3714975,18.0280201 C20.1663251,19.6693993 18.6633689,21 16.9905224,21 L7.00947762,21 C5.34738902,21 3.83292112,19.6633689 3.62850252,18.0280201 L2.37149748,7.97197986 L2.37149748,7.97197986 C2.16632509,6.33060071 3.33993861,5 5.00111064,5 L8.03759766,5" id="Scales" stroke="#333333" stroke-width="2"></path>
+                <circle id="Centre" fill="#333333" cx="12" cy="6" r="1"></circle>
+                <path d="M12,8 C14.209139,8 16,8.209139 16,6 C16,3.790861 14.209139,2 12,2 C9.790861,2 8,3.790861 8,6 C8,8.209139 9.790861,8 12,8 Z" id="Dial" stroke="#333333" stroke-width="2"></path>
+                <polygon id="needle" fill="#333333" points="12 5 10 4 11 6"></polygon>
+                <path d="M6.08033091,13.2355853 C5.77557849,12.1689518 6.36385945,11.0005176 7.40593286,10.6215818 L8.7279006,10.1408662 C9.99850193,9.67882939 10.9682161,10.3898848 10.8932206,11.7398041 L10.6122166,16.7978769 C10.5659966,17.6298373 9.8627306,18.3042745 9.02852783,18.3042745 C8.20010071,18.3042745 7.34395752,17.6582784 7.11412654,16.85387 L6.08033091,13.2355853 Z M17.8059736,13.2355853 L16.772178,16.85387 C16.542347,17.6582784 15.6862038,18.3042745 14.8577767,18.3042745 C14.0235739,18.3042745 13.320308,17.6298373 13.274088,16.7978769 L12.9930839,11.7398041 C12.9180884,10.3898848 13.8878026,9.67882939 15.1584039,10.1408662 L16.4803717,10.6215818 C17.5224451,11.0005176 18.1107261,12.1689518 17.8059736,13.2355853 Z" id="Feet" fill="#333333" opacity="0.200000003"></path>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/application/assets/fonts/icons/scales.svg b/application/assets/fonts/icons/scales.svg
new file mode 100644
index 00000000..648e040b
--- /dev/null
+++ b/application/assets/fonts/icons/scales.svg
@@ -0,0 +1,21 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 44.1 (41455) - http://www.bohemiancoding.com/sketch -->
+    <title>scales</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard-4" transform="translate(-224.000000, -819.000000)">
+            <g id="325" transform="translate(224.000000, 819.000000)">
+                <path d="M5,19 C7.209139,19 9,17.209139 9,15 C7.5,15 2,15 1,15 C1,17.209139 2.790861,19 5,19 Z" id="Left" fill="#333333"></path>
+                <path d="M19,15 C21.209139,15 23,13.209139 23,11 C21.5,11 16,11 15,11 C15,13.209139 16.790861,15 19,15 Z" id="Right" fill="#333333"></path>
+                <rect id="Centre" stroke="#333333" stroke-width="2" x="10" y="2" width="4" height="4" rx="2"></rect>
+                <path d="M5,6 L10.004003,4.57028486 M14.0447031,3.41579912 L19,2" id="Arms" stroke="#333333" stroke-width="2" stroke-linecap="round"></path>
+                <path d="M12,6 L12,21" id="Stand" stroke="#333333" stroke-width="2"></path>
+                <polyline id="Path-260" stroke="#333333" stroke-linecap="round" stroke-linejoin="round" points="8.5 15 5 6 1.5 15"></polyline>
+                <polyline id="Path-260" stroke="#333333" stroke-linecap="round" stroke-linejoin="round" points="22.5 11 19 2 15.5 11"></polyline>
+                <path d="M4,22 C4,21.4477153 4.44371665,21 4.99980749,21 L9,21 L9,21 C9,20.4477153 9.45516821,20 9.99998991,20 L14.0557962,20 C14.6080754,20 15.0557861,20.453186 15.0557861,21 L15.0557861,21 L18.9994645,21 C19.552045,21 20,21.4438648 20,22 L20,23 L4,23 L4,22 Z" id="Base" fill="#333333"></path>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/application/assets/fonts/icons/screwdriver.svg b/application/assets/fonts/icons/screwdriver.svg
new file mode 100644
index 00000000..eccbcb4f
--- /dev/null
+++ b/application/assets/fonts/icons/screwdriver.svg
@@ -0,0 +1,19 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 44.1 (41455) - http://www.bohemiancoding.com/sketch -->
+    <title>screwdriver</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard-4" transform="translate(-752.000000, -599.000000)">
+            <g id="237" transform="translate(751.000000, 599.000000)">
+                <g id="screwdriver" transform="translate(12.203723, 12.803699) rotate(-315.000000) translate(-12.203723, -12.803699) translate(10.203723, -1.196301)">
+                    <g transform="translate(-1.000000, 0.000000)">
+                        <polygon id="Rectangle-185" fill="#333333" points="2 15 4 15 4 24 5 25 4 28 2 28 1 25 2 24"></polygon>
+                        <path d="M0,15 L6,15 L6,13 L5,11.5 L6,10 L6,3.00032973 C6,1.34329338 4.65348288,0 3,0 L3,0 C1.34314575,0 0,1.3486445 0,3.00032973 L0,10 L1,11.5 L0,13 L0,15 Z" id="Path-176" stroke="#333333" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/application/assets/fonts/icons/search.svg b/application/assets/fonts/icons/search.svg
new file mode 100644
index 00000000..a5a50de3
--- /dev/null
+++ b/application/assets/fonts/icons/search.svg
@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 44.1 (41455) - http://www.bohemiancoding.com/sketch -->
+    <title>search</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard-4" transform="translate(-136.000000, -115.000000)" stroke="#333333" stroke-width="2">
+            <g id="3" transform="translate(136.000000, 115.000000)">
+                <circle id="Glass" cx="10" cy="10" r="7"></circle>
+                <path d="M15,15 L21,21" id="Handle" stroke-linecap="round" stroke-linejoin="round"></path>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/application/assets/fonts/icons/selection-rect.svg b/application/assets/fonts/icons/selection-rect.svg
new file mode 100644
index 00000000..ea162672
--- /dev/null
+++ b/application/assets/fonts/icons/selection-rect.svg
@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 44.1 (41455) - http://www.bohemiancoding.com/sketch -->
+    <title>selection-rect</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round">
+        <g id="Artboard-4" transform="translate(-576.000000, -687.000000)" stroke="#333333" stroke-width="2">
+            <g id="273" transform="translate(576.000000, 687.000000)">
+                <path d="M8,4 L16,4 M19,4 L19.9989566,4 C21.1041023,4 22,4.88991509 22,5.99790166 L22,7.02050781 M22,10 L22,14 M22,17 L22,17.9989566 C22,19.1041023 21.0993358,20 20.0006631,20 L19.0515137,20 M16,20 L8,20 M5,20 L4.00104344,20 C2.89589766,20 2,19.0999011 2,17.9989566 L2,17 M2,14 L2,10 M2,7 L2,6.00104344 L2,6.00104344 C2,4.89589766 2.90009892,4 4.00104344,4 L5,4" id="Selection"></path>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/application/assets/fonts/icons/selection-round.svg b/application/assets/fonts/icons/selection-round.svg
new file mode 100644
index 00000000..6609e683
--- /dev/null
+++ b/application/assets/fonts/icons/selection-round.svg
@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 44.1 (41455) - http://www.bohemiancoding.com/sketch -->
+    <title>selection-round</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-dasharray="4,3">
+        <g id="Artboard-4" transform="translate(-620.000000, -687.000000)" stroke="#333333" stroke-width="2">
+            <g id="274" transform="translate(620.000000, 687.000000)">
+                <circle id="Selection" cx="12" cy="12" r="9"></circle>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/application/assets/fonts/icons/send.svg b/application/assets/fonts/icons/send.svg
new file mode 100644
index 00000000..73d0c057
--- /dev/null
+++ b/application/assets/fonts/icons/send.svg
@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 44.1 (41455) - http://www.bohemiancoding.com/sketch -->
+    <title>send</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard-4" transform="translate(-356.000000, -335.000000)" stroke="#333333" stroke-width="2">
+            <g id="108" transform="translate(356.000000, 335.000000)">
+                <polygon id="Wings" stroke-linejoin="round" points="21 4 3 14 12.5 15 20 20"></polygon>
+                <polyline id="Bottom" fill="#333333" stroke-linejoin="round" points="12 15 12 19 14.5 16.5"></polyline>
+                <path d="M12,15 L20.5,5" id="Fold"></path>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/application/assets/fonts/icons/server.svg b/application/assets/fonts/icons/server.svg
new file mode 100644
index 00000000..1eff456b
--- /dev/null
+++ b/application/assets/fonts/icons/server.svg
@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 44.1 (41455) - http://www.bohemiancoding.com/sketch -->
+    <title>server</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard-4" transform="translate(-796.000000, -643.000000)">
+            <g id="258" transform="translate(796.000000, 643.000000)">
+                <ellipse id="Top" stroke="#333333" stroke-width="2" cx="12" cy="6" rx="9" ry="3"></ellipse>
+                <path d="M3,10.5 C3,12.1568542 7.02943725,13.5 12,13.5 L12,13.5 C16.9705627,13.5 21,12.1568542 21,10.5" id="Mid" stroke="#333333"></path>
+                <path d="M3,14.5 C3,16.1568542 7.02943725,17.5 12,17.5 C16.9705627,17.5 21,16.1568542 21,14.5" id="Bottom" stroke="#333333"></path>
+                <path d="M3,5.98958785 L3,19 C3,20.6568542 7.02943725,22 12,22 C16.9705627,22 21,20.6568542 21,19 L21,5.98958785" id="Body" stroke="#333333" stroke-width="2"></path>
+                <path d="M18.5,11 C18.2238576,11 18,10.7761424 18,10.5 C18,10.2238576 18.2238576,10 18.5,10 C18.7761424,10 19,10.2238576 19,10.5 C19,10.7761424 18.7761424,11 18.5,11 Z M18.5,15 C18.2238576,15 18,14.7761424 18,14.5 C18,14.2238576 18.2238576,14 18.5,14 C18.7761424,14 19,14.2238576 19,14.5 C19,14.7761424 18.7761424,15 18.5,15 Z M18.5,19 C18.2238576,19 18,18.7761424 18,18.5 C18,18.2238576 18.2238576,18 18.5,18 C18.7761424,18 19,18.2238576 19,18.5 C19,18.7761424 18.7761424,19 18.5,19 Z" id="Lights" fill="#333333"></path>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/application/assets/fonts/icons/settings.svg b/application/assets/fonts/icons/settings.svg
new file mode 100644
index 00000000..ad53e373
--- /dev/null
+++ b/application/assets/fonts/icons/settings.svg
@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 44.1 (41455) - http://www.bohemiancoding.com/sketch -->
+    <title>settings</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linejoin="round">
+        <g id="Artboard-4" transform="translate(-796.000000, -159.000000)" stroke="#333333" stroke-width="2">
+            <g id="38" transform="translate(796.000000, 159.000000)">
+                <path d="M7.20852293,4.3800958 C8.05442158,3.84706631 8.99528987,3.45099725 10,3.22301642 L10,1.99980749 C10,1.44762906 10.4433532,1 11.0093689,1 L12.9906311,1 C13.5480902,1 14,1.44371665 14,1.99980749 L14,3.22301642 C15.0047101,3.45099725 15.9455784,3.84706631 16.7914771,4.3800958 L17.6569904,3.5145825 C18.0474395,3.12413339 18.6774591,3.12110988 19.0776926,3.52134344 L20.4786566,4.92230738 C20.8728396,5.31649045 20.8786331,5.94979402 20.4854175,6.34300963 L19.6199042,7.20852293 C20.1529337,8.05442158 20.5490027,8.99528987 20.7769836,10 L22.0001925,10 C22.5523709,10 23,10.4433532 23,11.0093689 L23,12.9906311 C23,13.5480902 22.5562834,14 22.0001925,14 L20.7769836,14 C20.5490027,15.0047101 20.1529337,15.9455784 19.6199042,16.7914771 L20.4854175,17.6569904 C20.8758666,18.0474395 20.8788901,18.6774591 20.4786566,19.0776926 L19.0776926,20.4786566 C18.6835095,20.8728396 18.050206,20.8786331 17.6569904,20.4854175 L16.7914771,19.6199042 C15.9455784,20.1529337 15.0047101,20.5490027 14,20.7769836 L14,22.0001925 C14,22.5523709 13.5566468,23 12.9906311,23 L11.0093689,23 C10.4519098,23 10,22.5562834 10,22.0001925 L10,20.7769836 C8.99528987,20.5490027 8.05442158,20.1529337 7.20852293,19.6199042 L6.34300963,20.4854175 C5.95256051,20.8758666 5.32254093,20.8788901 4.92230738,20.4786566 L3.52134344,19.0776926 C3.12716036,18.6835095 3.12136689,18.050206 3.5145825,17.6569904 L4.3800958,16.7914771 C3.84706631,15.9455784 3.45099725,15.0047101 3.22301642,14 L1.99980749,14 C1.44762906,14 1,13.5566468 1,12.9906311 L1,11.0093689 C1,10.4519098 1.44371665,10 1.99980749,10 L3.22301642,10 C3.45099725,8.99528987 3.84706631,8.05442158 4.3800958,7.20852293 L3.5145825,6.34300963 C3.12413339,5.95256051 3.12110988,5.32254093 3.52134344,4.92230738 L4.92230738,3.52134344 C5.31649045,3.12716036 5.94979402,3.12136689 6.34300963,3.5145825 L7.20852293,4.3800958 Z M12,16 C14.209139,16 16,14.209139 16,12 C16,9.790861 14.209139,8 12,8 C9.790861,8 8,9.790861 8,12 C8,14.209139 9.790861,16 12,16 Z" id="Combined-Shape"></path>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/application/assets/fonts/icons/share.svg b/application/assets/fonts/icons/share.svg
new file mode 100644
index 00000000..d5dc4203
--- /dev/null
+++ b/application/assets/fonts/icons/share.svg
@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 44.1 (41455) - http://www.bohemiancoding.com/sketch -->
+    <title>share</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round">
+        <g id="Artboard-4" transform="translate(-312.000000, -203.000000)" stroke="#333333" stroke-width="2">
+            <g id="47" transform="translate(312.000000, 203.000000)">
+                <path d="M20,15 L20,18.0026083 C20,19.1057373 19.1073772,20 18.0049107,20 L5.99508929,20 C4.8932319,20 4,19.1073772 4,18.0049107 L4,5.99508929 C4,4.8932319 4.89585781,4 5.9973917,4 L9,4" id="Box"></path>
+                <polyline id="Head" stroke-linejoin="round" points="13 4 20.0207973 4 20.0207973 11.0191059"></polyline>
+                <path d="M19,5 L12,12" id="Line" stroke-linejoin="round"></path>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/application/assets/fonts/icons/shield.svg b/application/assets/fonts/icons/shield.svg
new file mode 100644
index 00000000..45c20f19
--- /dev/null
+++ b/application/assets/fonts/icons/shield.svg
@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 44.1 (41455) - http://www.bohemiancoding.com/sketch -->
+    <title>shield</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linejoin="round">
+        <g id="Artboard-4" transform="translate(-840.000000, -775.000000)" stroke="#333333" stroke-width="2">
+            <g id="319" transform="translate(840.000000, 775.000000)">
+                <path d="M3,6 C6,6 8,5 12,2 C16,5 18,6 21,6 C21,20 12,22 12,22 C12,22 3,20 3,6 Z" id="Shield"></path>
+                <polyline id="Tick" stroke-linecap="round" points="9 12 11 14 15 10"></polyline>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/application/assets/fonts/icons/shift.svg b/application/assets/fonts/icons/shift.svg
new file mode 100644
index 00000000..f9feef60
--- /dev/null
+++ b/application/assets/fonts/icons/shift.svg
@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 44.1 (41455) - http://www.bohemiancoding.com/sketch -->
+    <title>shift</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linejoin="round">
+        <g id="Artboard-4" transform="translate(-92.000000, -731.000000)" stroke="#333333" stroke-width="2">
+            <g id="282" transform="translate(92.000000, 731.000000)">
+                <path d="M12,4 L3,13 L8,13 L8,18.9970707 C8,19.5509732 8.45303631,20 8.99703014,20 L15.0029699,20 C15.5536144,20 16,19.5621186 16,18.9970707 L16,13 L21,13 L12,4 Z" id="Arrow"></path>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/application/assets/fonts/icons/shooting-star.svg b/application/assets/fonts/icons/shooting-star.svg
new file mode 100644
index 00000000..d57bc247
--- /dev/null
+++ b/application/assets/fonts/icons/shooting-star.svg
@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 44.1 (41455) - http://www.bohemiancoding.com/sketch -->
+    <title>shooting-star</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard-4" transform="translate(-840.000000, -819.000000)" stroke="#333333" stroke-width="2">
+            <g id="339" transform="translate(840.000000, 819.000000)">
+                <polygon id="Star-2" stroke-linejoin="round" transform="translate(16.693763, 7.419206) rotate(-15.000000) translate(-16.693763, -7.419206) " points="16.6937631 10.3966631 13.7548368 11.9417481 14.3161218 8.66920561 11.9384805 6.35157815 15.2242999 5.87412064 16.6937631 2.89666312 18.1632262 5.87412064 21.4490456 6.35157815 19.0714044 8.66920561 19.6326893 11.9417481"></polygon>
+                <path d="M12.5,14.5 C12.5,14.5 11.3218878,15.5753763 10.5,16.5 C8.5,18.75 7.5,21 7.5,21" id="3" stroke-linecap="round"></path>
+                <path d="M11.5,11 C11.5,11 9,12 6,15.5 C3,19 2,22 2,22" id="2" stroke-linecap="round"></path>
+                <path d="M9,8 C9,8 7.5,8.5 5.5,10 C3.5,11.5 2,13.5 2,13.5" id="1" stroke-linecap="round"></path>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/application/assets/fonts/icons/shuffle.svg b/application/assets/fonts/icons/shuffle.svg
new file mode 100644
index 00000000..c13511f1
--- /dev/null
+++ b/application/assets/fonts/icons/shuffle.svg
@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 44.1 (41455) - http://www.bohemiancoding.com/sketch -->
+    <title>shuffle</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard-4" transform="translate(-576.000000, -467.000000)">
+            <g id="173" transform="translate(576.000000, 467.000000)">
+                <path d="M2,7 C2,7 3,7 4,7 C10,7 12,17 18.0069431,17 L20,17" id="Bottom-Line" stroke="#333333" stroke-width="2" stroke-linecap="round"></path>
+                <path d="M2,7 C2,7 2.99832958,7 4,7 C10,7 12.0069431,17 18.0069431,17 L21,17" id="Top-Line" stroke="#333333" stroke-width="2" stroke-linecap="round" transform="translate(11.500000, 12.000000) scale(1, -1) translate(-11.500000, -12.000000) "></path>
+                <path d="M19.5547002,9.83205029 C18.8901455,10.2750868 18,9.79869538 18,9 L18,5 C18,4.20130462 18.8901455,3.72491322 19.5547002,4.16794971 L22.5547002,6.16794971 C23.1484333,6.56377175 23.1484333,7.43622825 22.5547002,7.83205029 L19.5547002,9.83205029 Z" id="Top-Arrow" fill="#333333" fill-rule="nonzero"></path>
+                <path d="M19.5547002,19.8320503 C18.8901455,20.2750868 18,19.7986954 18,19 L18,15 C18,14.2013046 18.8901455,13.7249132 19.5547002,14.1679497 L22.5547002,16.1679497 C23.1484333,16.5637718 23.1484333,17.4362282 22.5547002,17.8320503 L19.5547002,19.8320503 Z" id="Bottom-Arrow" fill="#333333" fill-rule="nonzero"></path>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/application/assets/fonts/icons/sidebar.svg b/application/assets/fonts/icons/sidebar.svg
new file mode 100644
index 00000000..b26fdd15
--- /dev/null
+++ b/application/assets/fonts/icons/sidebar.svg
@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 44.1 (41455) - http://www.bohemiancoding.com/sketch -->
+    <title>sidebar</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard-4" transform="translate(-532.000000, -423.000000)">
+            <g id="152" transform="translate(532.000000, 423.000000)">
+                <rect id="Window" stroke="#333333" stroke-width="2" x="2" y="4" width="20" height="16" rx="2"></rect>
+                <rect id="Sidebar" fill="#333333" x="9" y="4" width="2" height="16"></rect>
+                <path d="M4,7 L8,7 L8,8 L4,8 L4,7 Z M4,10 L8,10 L8,11 L4,11 L4,10 Z M4,13 L8,13 L8,14 L4,14 L4,13 Z M4,16 L8,16 L8,17 L4,17 L4,16 Z" id="Lines" fill="#333333" opacity="0.5"></path>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/application/assets/fonts/icons/siri.svg b/application/assets/fonts/icons/siri.svg
new file mode 100644
index 00000000..f0cf394e
--- /dev/null
+++ b/application/assets/fonts/icons/siri.svg
@@ -0,0 +1,24 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 44.1 (41455) - http://www.bohemiancoding.com/sketch -->
+    <title>siri</title>
+    <desc>Created with Sketch.</desc>
+    <defs>
+        <circle id="path-1" cx="12" cy="12" r="10"></circle>
+    </defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard-4" transform="translate(-796.000000, -379.000000)">
+            <g id="137" transform="translate(796.000000, 379.000000)">
+                <mask id="mask-2" fill="white">
+                    <use xlink:href="#path-1"></use>
+                </mask>
+                <use id="Oval-72" stroke="#333333" stroke-width="2" xlink:href="#path-1"></use>
+                <path d="M2.5,15 C2.5,15 3.75,14 6.5,14 C9.25,14 12,18 16.5,18 C21,18 23,16.5 23,16.5" id="Path-64" stroke="#333333" stroke-width="2" mask="url(#mask-2)"></path>
+                <path d="M0.5,17 C0.5,17 3,18 6.5,18 C10,18 12.5,12 17.5,12 C22.5,12 24,14.5 24,14.5" id="Path-65" stroke="#333333" stroke-width="2" mask="url(#mask-2)"></path>
+                <path d="M-2,15 C5.5,15 5,10.5 15,10 C25,9.5 33,13.5 33,13.5" id="Path-66" stroke="#333333" stroke-width="2" opacity="0.200000003" mask="url(#mask-2)"></path>
+                <path d="M2,24 C5,24 10.5,18.5 17,18.5 C23.5,18.5 27.5,23.5 27.5,23.5" id="Path-67" stroke="#333333" stroke-width="2" opacity="0.449999988" mask="url(#mask-2)"></path>
+                <path d="M-5.5,12.5 C-5.5,12.5 -2,10 4.5,10 C11,10 11.5,15 18,15 C24.5,15 27,12.5 27,12.5" id="Path-68" stroke="#333333" stroke-width="2" opacity="0.400000006" mask="url(#mask-2)"></path>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/application/assets/fonts/icons/skull.svg b/application/assets/fonts/icons/skull.svg
new file mode 100644
index 00000000..daa2ee2e
--- /dev/null
+++ b/application/assets/fonts/icons/skull.svg
@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 44.1 (41455) - http://www.bohemiancoding.com/sketch -->
+    <title>skull</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard-4" transform="translate(-224.000000, -203.000000)">
+            <g id="45" transform="translate(224.000000, 203.000000)">
+                <path d="M5,18.4428864 C2.94418487,16.5265543 2,14.6424291 2,12 C2,6.4771525 6.4771525,2 12,2 C17.5228475,2 22,6.4771525 22,12 C22,14.6304949 21.0513446,16.5193524 19,18.4412879 L19,19.9906311 C19,21.1001341 18.1053043,22 16.9975267,22 L7.00247329,22 C5.90061247,22 5,21.0975072 5,19.9906311 L5,18.4428864 Z" id="head" stroke="#333333" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
+                <path d="M11.1055728,14.5527864 C11.4740971,13.8157379 12.5259029,13.8157379 12.8944272,14.5527864 L13.8944272,16.5527864 C14.2268777,17.2176875 13.743382,18 13,18 L11,18 C10.256618,18 9.77312226,17.2176875 10.1055728,16.5527864 L11.1055728,14.5527864 Z" id="nose" fill="#333333" fill-rule="nonzero"></path>
+                <path d="M8,20.0093689 C8,19.4519098 8.44386482,19 9,19 C9.55228475,19 10,19.4433532 10,20.0093689 L10,21.9906311 C10,22.5480902 9.55613518,23 9,23 C8.44771525,23 8,22.5566468 8,21.9906311 L8,20.0093689 Z M11,20.0093689 C11,19.4519098 11.4438648,19 12,19 C12.5522847,19 13,19.4433532 13,20.0093689 L13,21.9906311 C13,22.5480902 12.5561352,23 12,23 C11.4477153,23 11,22.5566468 11,21.9906311 L11,20.0093689 Z M14,20.0093689 C14,19.4519098 14.4438648,19 15,19 C15.5522847,19 16,19.4433532 16,20.0093689 L16,21.9906311 C16,22.5480902 15.5561352,23 15,23 C14.4477153,23 14,22.5566468 14,21.9906311 L14,20.0093689 Z" id="teeth" fill="#333333"></path>
+                <path d="M17,14 C17.5522847,14 18,13.5522847 18,13 C18,12.4477153 17.5522847,12 17,12 C16.4477153,12 16,12.4477153 16,13 C16,13.5522847 16.4477153,14 17,14 Z M7,14 C7.55228475,14 8,13.5522847 8,13 C8,12.4477153 7.55228475,12 7,12 C6.44771525,12 6,12.4477153 6,13 C6,13.5522847 6.44771525,14 7,14 Z" id="eyes" stroke="#333333" stroke-width="2"></path>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/application/assets/fonts/icons/smart-home.svg b/application/assets/fonts/icons/smart-home.svg
new file mode 100644
index 00000000..79d38265
--- /dev/null
+++ b/application/assets/fonts/icons/smart-home.svg
@@ -0,0 +1,19 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 44.1 (41455) - http://www.bohemiancoding.com/sketch -->
+    <title>smart-home</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard-4" transform="translate(-444.000000, -1134.000000)">
+            <g id="Extras" transform="translate(48.000000, 1046.000000)">
+                <g id="smart-home" transform="translate(396.000000, 88.000000)">
+                    <path d="M2.69498562,11.0040174 L4,10.9864409 L4,20.000385 C4,20.5574808 4.44271433,21 4.99508929,21 L19.0049107,21 C19.5552337,21 20,20.5559323 20,20.0084645 L20,11.0404053 L21.4271769,11.0404053 L20,9.73355354 L20,6 L19,6 L19,8.74437789 L12.1122564,2.90703363 C12.0708145,2.87191177 11.9508167,2.87313979 11.908132,2.91063658 L2.69498562,11.0040174 Z" id="Home" stroke="#333333" stroke-width="2"></path>
+                    <circle id="0" fill="#333333" cx="7" cy="18" r="1"></circle>
+                    <path d="M10,18 C10,16.3431458 8.65685425,15 7,15" id="1" stroke="#333333" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
+                    <path d="M13,18 C13,14.6862915 10.3137085,12 7,12" id="2" stroke="#333333" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/application/assets/fonts/icons/snapchat.svg b/application/assets/fonts/icons/snapchat.svg
new file mode 100644
index 00000000..a535f63a
--- /dev/null
+++ b/application/assets/fonts/icons/snapchat.svg
@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 44.1 (41455) - http://www.bohemiancoding.com/sketch -->
+    <title>snapchat</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard-4" transform="translate(-840.000000, -863.000000)" stroke="#333333" stroke-width="2">
+            <g id="359" transform="translate(840.000000, 863.000000)">
+                <path d="M12.1262113,21 C12.0746421,21 12.0240375,20.9985071 11.973376,20.9960381 L11.9732626,20.9960381 C11.9409822,20.9985645 11.9072269,21 11.8734715,21 C10.6886296,21 9.92814098,20.4558944 9.19278449,19.9296462 C8.68497892,19.5665263 8.20582285,19.2236755 7.64122883,19.1285317 C7.36573962,19.0823665 7.09155524,19.0589394 6.8265614,19.0589394 C6.34916402,19.0589394 5.97252217,19.1335271 5.69754354,19.1879607 C5.53046864,19.2210342 5.38631336,19.2494568 5.27676441,19.2494568 C5.16233655,19.2494568 5.03832102,19.224422 4.98442589,19.0380388 C4.93756549,18.8765756 4.90369666,18.7201654 4.87113265,18.5688654 C4.78711298,18.1795049 4.72748795,17.9400089 4.56625642,17.9149741 C2.6870751,17.6212167 2.14920171,17.2206021 2.02927086,16.9363764 C2.01230808,16.8957235 2.00266369,16.8550132 2.00033769,16.8147048 C1.99426739,16.7054932 2.07068501,16.6090862 2.17728391,16.5914584 C5.06606283,16.1099973 6.36153153,13.1216655 6.4153132,12.9947688 C6.41678822,12.9912662 6.41831998,12.9878785 6.41990847,12.9843759 C6.59674122,12.6217154 6.63134757,12.3069426 6.52316019,12.0489001 C6.32493958,11.5760519 5.67836822,11.3681939 5.25038417,11.2307895 C5.14565742,11.1972566 5.04637692,11.1655611 4.96808715,11.1342676 C4.11404792,10.7925077 4.04296308,10.4417904 4.07654826,10.2629866 C4.13379056,9.95837703 4.53596168,9.74609775 4.86126134,9.74609775 C4.95044359,9.74609775 5.02896028,9.76211775 5.094996,9.79329644 C5.47918317,9.97548799 5.82547356,10.0677609 6.12422277,10.0677609 C6.53700273,10.0677609 6.71718265,9.89217254 6.73919456,9.86914738 C6.72869919,9.67128036 6.71570763,9.46462818 6.70243241,9.25137278 C6.6163704,7.86905974 6.5097715,6.1514178 6.94184025,5.17098269 C8.2368551,2.23208895 10.983124,2.00378968 11.7939336,2.00378968 C11.8146974,2.00378968 12.1494145,2.00017226 12.1494145,2.00017226 L12.1974096,2 C13.0100914,2 15.7623171,2.2287012 17.0580694,5.16920269 C17.4902516,6.15015458 17.3833691,7.869232 17.2971936,9.25051149 L17.2936195,9.31057211 C17.2817059,9.50292687 17.2701326,9.68988422 17.2604882,9.86886029 C17.2811385,9.89016286 17.4468519,10.0516834 17.821111,10.0661531 L17.8215081,10.0661531 C18.1059042,10.0551286 18.4327924,9.96337251 18.791507,9.79329644 C18.8966309,9.74362872 19.0133847,9.7331784 19.0928659,9.7331784 C19.2142717,9.7331784 19.3373228,9.75695001 19.4394966,9.80007193 L19.4456804,9.8026558 C19.7358631,9.90669963 19.9259144,10.1125479 19.929999,10.3276408 C19.9337433,10.5301587 19.7810216,10.8346535 19.0316523,11.1342676 C18.9539866,11.1651592 18.8547061,11.1970843 18.7495822,11.2307895 C18.3211443,11.3684236 17.6747432,11.5760519 17.476636,12.0488427 C17.3683919,12.3067129 17.403055,12.6213135 17.5797743,12.9841462 C17.5813628,12.9876488 17.5831782,12.9910365 17.5845398,12.9947688 C17.6382647,13.1215507 18.9325988,16.1090212 21.8226258,16.5910565 C21.9293381,16.6088565 22.0055288,16.7051487 21.9996855,16.8144751 C21.997246,16.8554151 21.9874314,16.8966996 21.9701282,16.9367783 C21.8509349,17.2189943 21.3135154,17.6190922 19.4336533,17.9130792 C19.2800805,17.9369657 19.2205689,18.1394836 19.1288905,18.5642145 C19.095589,18.7187873 19.0618336,18.870604 19.0153703,19.0302872 C18.9753745,19.16884 18.89005,19.2336665 18.7465187,19.2336665 L18.7231453,19.2336665 C18.6235244,19.2336665 18.481922,19.2156368 18.3024796,19.1799794 C17.9842147,19.1169904 17.6273722,19.0589394 17.173405,19.0589394 C16.9082977,19.0589394 16.6339431,19.0823665 16.3582837,19.1285317 C15.7943138,19.2236755 15.3154414,19.5658373 14.8086002,19.9284978 C14.0717687,20.4558944 13.3113935,21 12.1262113,21" id="spoopy" transform="translate(12.000000, 11.500000) scale(-1, 1) translate(-12.000000, -11.500000) "></path>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/application/assets/fonts/icons/snowflake-2.svg b/application/assets/fonts/icons/snowflake-2.svg
new file mode 100644
index 00000000..09bb46e9
--- /dev/null
+++ b/application/assets/fonts/icons/snowflake-2.svg
@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 44.1 (41455) - http://www.bohemiancoding.com/sketch -->
+    <title>snowflake-2</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard-4" transform="translate(-884.000000, -511.000000)">
+            <g id="200" transform="translate(884.000000, 511.000000)">
+                <path d="M13,9.6 L13,7.41421356 L15.7071068,4.70710678 C16.0976311,4.31658249 16.0976311,3.68341751 15.7071068,3.29289322 C15.3165825,2.90236893 14.6834175,2.90236893 14.2928932,3.29289322 L13,4.58578644 L13,3 C13,2.44771525 12.5522847,2 12,2 C11.4477153,2 11,2.44771525 11,3 L11,4.58578644 L9.70710678,3.29289322 C9.31658249,2.90236893 8.68341751,2.90236893 8.29289322,3.29289322 C7.90236893,3.68341751 7.90236893,4.31658249 8.29289322,4.70710678 L11,7.41421356 L11,7.41421356 L11,9.6 L12,9 L13,9.6 Z M13,14.4 L13,16.5857864 L15.7071068,19.2928932 C16.0976311,19.6834175 16.0976311,20.3165825 15.7071068,20.7071068 C15.3165825,21.0976311 14.6834175,21.0976311 14.2928932,20.7071068 L13,19.4142136 L13,21 C13,21.5522847 12.5522847,22 12,22 C11.4477153,22 11,21.5522847 11,21 L11,19.4142136 L9.70710678,20.7071068 C9.31658249,21.0976311 8.68341751,21.0976311 8.29289322,20.7071068 C7.90236893,20.3165825 7.90236893,19.6834175 8.29289322,19.2928932 L11,16.5857864 L11,14.4 L12,15 L13,14.4 Z" id="Combined-Shape" fill="#333333" fill-rule="nonzero"></path>
+                <path d="M13,9.61284993 L13,7.41421356 L15.7071068,4.70710678 C16.0976311,4.31658249 16.0976311,3.68341751 15.7071068,3.29289322 C15.3165825,2.90236893 14.6834175,2.90236893 14.2928932,3.29289322 L13,4.58578644 L13,3 C13,2.44771525 12.5522847,2 12,2 C11.4477153,2 11,2.44771525 11,3 L11,4.58578644 L9.70710678,3.29289322 C9.31658249,2.90236893 8.68341751,2.90236893 8.29289322,3.29289322 C7.90236893,3.68341751 7.90236893,4.31658249 8.29289322,4.70710678 L11,7.41421356 L11,7.41421356 L11,9.69059892 L12.0490381,9.08493649 L13,9.61284993 Z M13,14.3094011 L13,16.5857864 L15.7071068,19.2928932 C16.0976311,19.6834175 16.0976311,20.3165825 15.7071068,20.7071068 C15.3165825,21.0976311 14.6834175,21.0976311 14.2928932,20.7071068 L13,19.4142136 L13,21 C13,21.5522847 12.5522847,22 12,22 C11.4477153,22 11,21.5522847 11,21 L11,19.4142136 L9.70710678,20.7071068 C9.31658249,21.0976311 8.68341751,21.0976311 8.29289322,20.7071068 C7.90236893,20.3165825 7.90236893,19.6834175 8.29289322,19.2928932 L11,16.5857864 L11,14.3871501 L11.9509619,14.9150635 L13,14.3094011 Z" id="Combined-Shape" fill="#333333" fill-rule="nonzero" transform="translate(12.000000, 12.000000) rotate(-60.000000) translate(-12.000000, -12.000000) "></path>
+                <path d="M13,9.69059892 L13,7.41421356 L15.7071068,4.70710678 C16.0976311,4.31658249 16.0976311,3.68341751 15.7071068,3.29289322 C15.3165825,2.90236893 14.6834175,2.90236893 14.2928932,3.29289322 L13,4.58578644 L13,3 C13,2.44771525 12.5522847,2 12,2 C11.4477153,2 11,2.44771525 11,3 L11,4.58578644 L9.70710678,3.29289322 C9.31658249,2.90236893 8.68341751,2.90236893 8.29289322,3.29289322 C7.90236893,3.68341751 7.90236893,4.31658249 8.29289322,4.70710678 L11,7.41421356 L11,7.41421356 L11,9.61284993 L11.9509619,9.08493649 L13,9.69059892 Z M13,14.3871501 L13,16.5857864 L15.7071068,19.2928932 C16.0976311,19.6834175 16.0976311,20.3165825 15.7071068,20.7071068 C15.3165825,21.0976311 14.6834175,21.0976311 14.2928932,20.7071068 L13,19.4142136 L13,21 C13,21.5522847 12.5522847,22 12,22 C11.4477153,22 11,21.5522847 11,21 L11,19.4142136 L9.70710678,20.7071068 C9.31658249,21.0976311 8.68341751,21.0976311 8.29289322,20.7071068 C7.90236893,20.3165825 7.90236893,19.6834175 8.29289322,19.2928932 L11,16.5857864 L11,14.3094011 L12.0490381,14.9150635 L13,14.3871501 Z" id="Combined-Shape" fill="#333333" fill-rule="nonzero" transform="translate(12.000000, 12.000000) rotate(-120.000000) translate(-12.000000, -12.000000) "></path>
+                <polygon id="Polygon" stroke="#333333" stroke-width="2" points="12 9 14.5 10.5 14.5 13.5 12 15 9.5 13.5 9.5 10.5"></polygon>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/application/assets/fonts/icons/snowflake.svg b/application/assets/fonts/icons/snowflake.svg
new file mode 100644
index 00000000..9c9d3be7
--- /dev/null
+++ b/application/assets/fonts/icons/snowflake.svg
@@ -0,0 +1,29 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 44.1 (41455) - http://www.bohemiancoding.com/sketch -->
+    <title>snowflake</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round">
+        <g id="Artboard-4" transform="translate(-840.000000, -511.000000)" stroke="#333333" stroke-width="2">
+            <g id="199" transform="translate(840.000000, 511.000000)">
+                <g id="Group-3" transform="translate(10.000000, 3.000000)">
+                    <path d="M2,16 L2,2" id="Path-133"></path>
+                    <polyline id="Path-134" stroke-linejoin="round" transform="translate(2.000000, 17.000000) scale(1, -1) translate(-2.000000, -17.000000) " points="0 16 2 18 4 16"></polyline>
+                    <polyline id="Path-134" stroke-linejoin="round" points="0 0 2 2 4 1.11022302e-16"></polyline>
+                </g>
+                <g id="Group-3" transform="translate(12.000000, 11.292893) rotate(-45.000000) translate(-12.000000, -11.292893) translate(10.500000, 1.792893)">
+                    <path d="M1,18.4852814 L1,1.51471863" id="Path-133"></path>
+                </g>
+                <g id="Group-3" transform="translate(12.353553, 11.646447) scale(-1, 1) rotate(-45.000000) translate(-12.353553, -11.646447) translate(11.353553, 2.146447)">
+                    <path d="M1,18.4852814 L1,1.51471863" id="Path-133"></path>
+                </g>
+                <g id="Group-3" transform="translate(12.000000, 12.000000) rotate(-90.000000) translate(-12.000000, -12.000000) translate(10.000000, 3.000000)">
+                    <path d="M2,16 L2,2" id="Path-133"></path>
+                    <polyline id="Path-134" stroke-linejoin="round" transform="translate(2.000000, 17.000000) scale(1, -1) translate(-2.000000, -17.000000) " points="0 16 2 18 4 16"></polyline>
+                    <polyline id="Path-134" stroke-linejoin="round" points="0 0 2 2 4 1.11022302e-16"></polyline>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/application/assets/fonts/icons/snowglobe.svg b/application/assets/fonts/icons/snowglobe.svg
new file mode 100644
index 00000000..76b63934
--- /dev/null
+++ b/application/assets/fonts/icons/snowglobe.svg
@@ -0,0 +1,19 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 44.1 (41455) - http://www.bohemiancoding.com/sketch -->
+    <title>snowglobe</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard-4" transform="translate(-444.000000, -555.000000)">
+            <g id="210" transform="translate(444.000000, 555.000000)">
+                <path d="M18.045844,17.6670058 C19.8604614,16.0204639 21,13.6433087 21,11 C21,6.02943725 16.9705627,2 12,2 C7.02943725,2 3,6.02943725 3,11 C3,13.6733982 4.1656296,16.0745489 6.01638659,17.7229501" id="Globe" stroke="#333333" stroke-width="2" stroke-linecap="round"></path>
+                <rect id="Base" stroke="#333333" stroke-width="2" x="3" y="18" width="18" height="4" rx="2"></rect>
+                <path d="M9,13.5193752 L12.5,10.7193752 L16,13.5193752 L16,18 L9,18 L9,13.5193752 Z" id="House" stroke="#333333" stroke-width="2" stroke-linejoin="round"></path>
+                <path d="M11,15.5046844 C11,15.2259549 11.2319336,15 11.5,15 L11.5,15 C11.7761424,15 12,15.214035 12,15.5046844 L12,17 L11,17 L11,15.5046844 Z" id="Door" fill="#333333"></path>
+                <rect id="Window" fill="#333333" x="13" y="15" width="1" height="1" rx="0.5"></rect>
+                <path d="M12.5,5 C12.2238576,5 12,4.77614237 12,4.5 C12,4.22385763 12.2238576,4 12.5,4 C12.7761424,4 13,4.22385763 13,4.5 C13,4.77614237 12.7761424,5 12.5,5 Z M15.5,4 C15.2238576,4 15,3.77614237 15,3.5 C15,3.22385763 15.2238576,3 15.5,3 C15.7761424,3 16,3.22385763 16,3.5 C16,3.77614237 15.7761424,4 15.5,4 Z M9.5,7 C9.22385763,7 9,6.77614237 9,6.5 C9,6.22385763 9.22385763,6 9.5,6 C9.77614237,6 10,6.22385763 10,6.5 C10,6.77614237 9.77614237,7 9.5,7 Z M15.5,8 C15.2238576,8 15,7.77614237 15,7.5 C15,7.22385763 15.2238576,7 15.5,7 C15.7761424,7 16,7.22385763 16,7.5 C16,7.77614237 15.7761424,8 15.5,8 Z M5.5,10 C5.22385763,10 5,9.77614237 5,9.5 C5,9.22385763 5.22385763,9 5.5,9 C5.77614237,9 6,9.22385763 6,9.5 C6,9.77614237 5.77614237,10 5.5,10 Z M11.5,11 C11.2238576,11 11,10.7761424 11,10.5 C11,10.2238576 11.2238576,10 11.5,10 C11.7761424,10 12,10.2238576 12,10.5 C12,10.7761424 11.7761424,11 11.5,11 Z M12.5,8 C12.2238576,8 12,7.77614237 12,7.5 C12,7.22385763 12.2238576,7 12.5,7 C12.7761424,7 13,7.22385763 13,7.5 C13,7.77614237 12.7761424,8 12.5,8 Z M16.5,12 C16.2238576,12 16,11.7761424 16,11.5 C16,11.2238576 16.2238576,11 16.5,11 C16.7761424,11 17,11.2238576 17,11.5 C17,11.7761424 16.7761424,12 16.5,12 Z M18.5,10 C18.2238576,10 18,9.77614237 18,9.5 C18,9.22385763 18.2238576,9 18.5,9 C18.7761424,9 19,9.22385763 19,9.5 C19,9.77614237 18.7761424,10 18.5,10 Z M16.5,15 C16.2238576,15 16,14.7761424 16,14.5 C16,14.2238576 16.2238576,14 16.5,14 C16.7761424,14 17,14.2238576 17,14.5 C17,14.7761424 16.7761424,15 16.5,15 Z M12.5,14 C12.2238576,14 12,13.7761424 12,13.5 C12,13.2238576 12.2238576,13 12.5,13 C12.7761424,13 13,13.2238576 13,13.5 C13,13.7761424 12.7761424,14 12.5,14 Z M8.5,11 C8.22385763,11 8,10.7761424 8,10.5 C8,10.2238576 8.22385763,10 8.5,10 C8.77614237,10 9,10.2238576 9,10.5 C9,10.7761424 8.77614237,11 8.5,11 Z M6.5,13 C6.22385763,13 6,12.7761424 6,12.5 C6,12.2238576 6.22385763,12 6.5,12 C6.77614237,12 7,12.2238576 7,12.5 C7,12.7761424 6.77614237,13 6.5,13 Z M7.5,16 C7.22385763,16 7,15.7761424 7,15.5 C7,15.2238576 7.22385763,15 7.5,15 C7.77614237,15 8,15.2238576 8,15.5 C8,15.7761424 7.77614237,16 7.5,16 Z M6.5,6 C6.22385763,6 6,5.77614237 6,5.5 C6,5.22385763 6.22385763,5 6.5,5 C6.77614237,5 7,5.22385763 7,5.5 C7,5.77614237 6.77614237,6 6.5,6 Z" id="snow" fill="#333333" opacity="0.5"></path>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/application/assets/fonts/icons/snowman.svg b/application/assets/fonts/icons/snowman.svg
new file mode 100644
index 00000000..7fe010a6
--- /dev/null
+++ b/application/assets/fonts/icons/snowman.svg
@@ -0,0 +1,22 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 44.1 (41455) - http://www.bohemiancoding.com/sketch -->
+    <title>snowman</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard-4" transform="translate(-532.000000, -555.000000)">
+            <g id="212" transform="translate(532.000000, 555.000000)">
+                <path d="M8.34913277,10.0262929 C6.34030756,11.2566231 5,13.4717887 5,16 C5,19.8659932 8.13400675,23 12,23 L12,23 C15.8659932,23 19,19.8659932 19,16 C19,13.4357121 17.6211682,11.1934677 15.5644653,9.97422745" id="Body" stroke="#333333" stroke-width="2"></path>
+                <circle id="Head" stroke="#333333" stroke-width="2" cx="12" cy="6" r="5"></circle>
+                <path d="M10.5,7.5 C10.5,7.5 10.5555556,8.5 12,8.5 C13.4444444,8.5 13.5,7.5 13.5,7.5" id="Smile" stroke="#333333" stroke-linecap="round" stroke-linejoin="round"></path>
+                <path d="M12,16 C11.4477153,16 11,15.5522847 11,15 C11,14.4477153 11.4477153,14 12,14 C12.5522847,14 13,14.4477153 13,15 C13,15.5522847 12.5522847,16 12,16 Z M12,20 C11.4477153,20 11,19.5522847 11,19 C11,18.4477153 11.4477153,18 12,18 C12.5522847,18 13,18.4477153 13,19 C13,19.5522847 12.5522847,20 12,20 Z" id="Buttons" fill="#333333"></path>
+                <path d="M10,6 C9.44771525,6 9,5.55228475 9,5 C9,4.44771525 9.44771525,4 10,4 C10.5522847,4 11,4.44771525 11,5 C11,5.55228475 10.5522847,6 10,6 Z M14,6 C13.4477153,6 13,5.55228475 13,5 C13,4.44771525 13.4477153,4 14,4 C14.5522847,4 15,4.44771525 15,5 C15,5.55228475 14.5522847,6 14,6 Z" id="Eyes" fill="#333333"></path>
+                <path d="M16,14 L22,8" id="Right-Arm" stroke="#333333" stroke-width="2" stroke-linecap="round"></path>
+                <polyline id="Right-Hand" stroke="#333333" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" points="20 7 20 10 23 10"></polyline>
+                <path d="M2,14 L8,8" id="Left-Arm" stroke="#333333" stroke-width="2" stroke-linecap="round" transform="translate(5.000000, 11.000000) scale(-1, 1) translate(-5.000000, -11.000000) "></path>
+                <polyline id="Left-Hand" stroke="#333333" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" transform="translate(2.500000, 8.500000) scale(-1, 1) translate(-2.500000, -8.500000) " points="1 7 1 10 4 10"></polyline>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/application/assets/fonts/icons/song.svg b/application/assets/fonts/icons/song.svg
new file mode 100644
index 00000000..448f32f6
--- /dev/null
+++ b/application/assets/fonts/icons/song.svg
@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 44.1 (41455) - http://www.bohemiancoding.com/sketch -->
+    <title>song</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard-4" transform="translate(-224.000000, -511.000000)" stroke="#333333" stroke-width="2">
+            <g id="185" transform="translate(224.000000, 511.000000)">
+                <path d="M11,19.5 L11,9.71922359 L15.8208875,8.51400171 C16.4425158,8.35859463 17,7.64491617 17,7.00189865 L17,2.99810135 C17,2.54055298 16.7475351,2.34389263 16.3059588,2.45428671 L12.1791125,3.48599829 C11.5574842,3.64140537 11,4.35508383 11,4.99810135 L11,17 L8.5,17 C7.12168932,17 6,18.1208193 6,19.5 C6,20.8783107 7.12081929,22 8.5,22 C9.87831068,22 11,20.8791807 11,19.5 Z" id="Note"></path>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/application/assets/fonts/icons/sound.svg b/application/assets/fonts/icons/sound.svg
new file mode 100644
index 00000000..89063336
--- /dev/null
+++ b/application/assets/fonts/icons/sound.svg
@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 44.1 (41455) - http://www.bohemiancoding.com/sketch -->
+    <title>sound</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard-4" transform="translate(-268.000000, -863.000000)" fill="#333333">
+            <g id="346" transform="translate(268.000000, 863.000000)">
+                <path d="M2,11.0093689 C2,10.4519098 2.44386482,10 3,10 C3.55228475,10 4,10.4433532 4,11.0093689 L4,12.9906311 C4,13.5480902 3.55613518,14 3,14 C2.44771525,14 2,13.5566468 2,12.9906311 L2,11.0093689 Z M5,9.99077797 C5,9.44358641 5.44386482,9 6,9 C6.55228475,9 7,9.45097518 7,9.99077797 L7,14.009222 C7,14.5564136 6.55613518,15 6,15 C5.44771525,15 5,14.5490248 5,14.009222 L5,9.99077797 Z M8,7.00247329 C8,6.44882258 8.44386482,6 9,6 C9.55228475,6 10,6.45576096 10,7.00247329 L10,16.9975267 C10,17.5511774 9.55613518,18 9,18 C8.44771525,18 8,17.544239 8,16.9975267 L8,7.00247329 Z M11,5.00087166 C11,4.4481055 11.4438648,4 12,4 C12.5522847,4 13,4.44463086 13,5.00087166 L13,18.9991283 C13,19.5518945 12.5561352,20 12,20 C11.4477153,20 11,19.5553691 11,18.9991283 L11,5.00087166 Z M14,8.99703014 C14,8.4463856 14.4438648,8 15,8 C15.5522847,8 16,8.45303631 16,8.99703014 L16,15.0029699 C16,15.5536144 15.5561352,16 15,16 C14.4477153,16 14,15.5469637 14,15.0029699 L14,8.99703014 Z M17,7.00247329 C17,6.44882258 17.4438648,6 18,6 C18.5522847,6 19,6.45576096 19,7.00247329 L19,16.9975267 C19,17.5511774 18.5561352,18 18,18 C17.4477153,18 17,17.544239 17,16.9975267 L17,7.00247329 Z M20,9.99077797 C20,9.44358641 20.4438648,9 21,9 C21.5522847,9 22,9.45097518 22,9.99077797 L22,14.009222 C22,14.5564136 21.5561352,15 21,15 C20.4477153,15 20,14.5490248 20,14.009222 L20,9.99077797 Z" id="Combined-Shape"></path>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/application/assets/fonts/icons/spanner-alt.svg b/application/assets/fonts/icons/spanner-alt.svg
new file mode 100644
index 00000000..1aad60cf
--- /dev/null
+++ b/application/assets/fonts/icons/spanner-alt.svg
@@ -0,0 +1,20 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 44.1 (41455) - http://www.bohemiancoding.com/sketch -->
+    <title>spanner-alt</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard-4" transform="translate(-884.000000, -599.000000)" stroke="#333333">
+            <g id="240" transform="translate(882.000000, 597.000000)">
+                <g id="spanner-alt" transform="translate(13.685029, 14.385041) rotate(-315.000000) translate(-13.685029, -14.385041) translate(8.685029, 0.385041)">
+                    <g id="wrench">
+                        <path d="M3,0.430000007 C1.23409522,1.20155663 4.4408921e-15,2.96363728 4.4408921e-15,5.01395632 C4.4408921e-15,7.77538007 2.23857625,10.0139563 5,10.0139563 C7.76142375,10.0139563 10,7.77538007 10,5.01395632 C10,2.96363728 8.76590478,1.20155663 7,0.430000007 L7,4.43000001 C7,4.43000001 5.34396362,5.43000001 5,5.43000001 C4.65603638,5.43000001 3,4.43000001 3,4.43000001 L3,0.430000007 Z" id="Combined-Shape" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" transform="translate(5.000000, 5.221978) rotate(-360.000000) translate(-5.000000, -5.221978) "></path>
+                        <path d="M5,27 C2.790861,27 1,25.209139 1,23 C1,20.790861 2.790861,19 5,19 C7.209139,19 9,20.790861 9,23 C9,25.209139 7.209139,27 5,27 Z M3,20 L3,21 L2,21 L1,23 L2,25 L3,25 L3,26 L5,27 L7,26 L7,25 L8,25 L9,23 L8,21 L7,21 L7,20 L5,19 L3,20 Z" id="Combined-Shape" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" transform="translate(5.000000, 23.000000) scale(-1, -1) translate(-5.000000, -23.000000) "></path>
+                        <polygon id="Combined-Shape" stroke-width="2" points="3 10 7 10 7 19 3 19"></polygon>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/application/assets/fonts/icons/spanner.svg b/application/assets/fonts/icons/spanner.svg
new file mode 100644
index 00000000..880b4e35
--- /dev/null
+++ b/application/assets/fonts/icons/spanner.svg
@@ -0,0 +1,20 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 44.1 (41455) - http://www.bohemiancoding.com/sketch -->
+    <title>spanner</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard-4" transform="translate(-840.000000, -599.000000)" stroke="#333333">
+            <g id="239" transform="translate(838.000000, 597.000000)">
+                <g id="spanner" transform="translate(13.635041, 14.335053) rotate(-315.000000) translate(-13.635041, -14.335053) translate(8.635041, 0.335053)">
+                    <g id="wrench">
+                        <path d="M3,0.430000007 C1.23409522,1.20155663 4.4408921e-15,2.96363728 4.4408921e-15,5.01395632 C4.4408921e-15,7.77538007 2.23857625,10.0139563 5,10.0139563 C7.76142375,10.0139563 10,7.77538007 10,5.01395632 C10,2.96363728 8.76590478,1.20155663 7,0.430000007 L7,4.43000001 C7,4.43000001 5.34396362,5.43000001 5,5.43000001 C4.65603638,5.43000001 3,4.43000001 3,4.43000001 L3,0.430000007 Z" id="Combined-Shape" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" transform="translate(5.000000, 5.221978) rotate(-360.000000) translate(-5.000000, -5.221978) "></path>
+                        <path d="M3,17 C1.23409522,17.7715566 7.10542736e-15,19.5336373 7.10542736e-15,21.5839563 C7.10542736e-15,24.3453801 2.23857625,26.5839563 5,26.5839563 C7.76142375,26.5839563 10,24.3453801 10,21.5839563 C10,19.5336373 8.76590478,17.7715566 7,17 L7,20.5839563 L5,21.5839563 L3,20.5839563 L3,17 Z" id="Combined-Shape" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" transform="translate(5.000000, 21.791978) scale(-1, -1) translate(-5.000000, -21.791978) "></path>
+                        <polygon id="Combined-Shape" stroke-width="2" points="3 10 7 10 7 17 3 17"></polygon>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/application/assets/fonts/icons/sparkle.svg b/application/assets/fonts/icons/sparkle.svg
new file mode 100644
index 00000000..09358a52
--- /dev/null
+++ b/application/assets/fonts/icons/sparkle.svg
@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 44.1 (41455) - http://www.bohemiancoding.com/sketch -->
+    <title>sparkle</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
+        <g id="Artboard-4" transform="translate(-488.000000, -731.000000)" stroke="#333333" stroke-width="2">
+            <g id="291" transform="translate(488.000000, 731.000000)">
+                <path d="M10,9 C11.5,10.5 14,11 14,11 C14,11 11.5,11.5 10,13 C8.5,14.5 8,19 8,19 C8,19 7.5,14.5 6,13 C4.5,11.5 2,11 2,11 C2,11 4.5,10.5 6,9 C7.5,7.5 8,3 8,3 C8,3 8.5,7.5 10,9 Z M19.6666667,4.75 C20.5416667,5.6875 22,6 22,6 C22,6 20.5416667,6.3125 19.6666667,7.25 C18.7916667,8.1875 18.5,11 18.5,11 C18.5,11 18.2083333,8.1875 17.3333333,7.25 C16.4583333,6.3125 15,6 15,6 C15,6 16.4583333,5.6875 17.3333333,4.75 C18.2083333,3.8125 18.5,1 18.5,1 C18.5,1 18.7916667,3.8125 19.6666667,4.75 Z M17,17 C17.75,17.75 19,18 19,18 C19,18 17.75,18.25 17,19 C16.25,19.75 16,22 16,22 C16,22 15.75,19.75 15,19 C14.25,18.25 13,18 13,18 C13,18 14.25,17.75 15,17 C15.75,16.25 16,14 16,14 C16,14 16.25,16.25 17,17 Z" id="Sparkles"></path>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/application/assets/fonts/icons/speaker.svg b/application/assets/fonts/icons/speaker.svg
new file mode 100644
index 00000000..0211130f
--- /dev/null
+++ b/application/assets/fonts/icons/speaker.svg
@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 44.1 (41455) - http://www.bohemiancoding.com/sketch -->
+    <title>speaker</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard-4" transform="translate(-92.000000, -599.000000)">
+            <g id="222" transform="translate(92.000000, 599.000000)">
+                <rect id="Body" stroke="#333333" stroke-width="2" x="4" y="2" width="16" height="21" rx="2"></rect>
+                <circle id="Big-Speaker" stroke="#333333" stroke-width="2" cx="12" cy="16" r="4"></circle>
+                <circle id="Big-Speaker-Centre" fill="#333333" cx="12" cy="16" r="1"></circle>
+                <circle id="smol-speaker" stroke="#333333" stroke-width="2" cx="12" cy="7" r="2"></circle>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/application/assets/fonts/icons/stamp.svg b/application/assets/fonts/icons/stamp.svg
new file mode 100644
index 00000000..35d48e85
--- /dev/null
+++ b/application/assets/fonts/icons/stamp.svg
@@ -0,0 +1,20 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 44.1 (41455) - http://www.bohemiancoding.com/sketch -->
+    <title>stamp</title>
+    <desc>Created with Sketch.</desc>
+    <defs>
+        <linearGradient x1="0%" y1="100%" x2="100%" y2="0%" id="linearGradient-1">
+            <stop stop-color="#333333" stop-opacity="0" offset="0%"></stop>
+            <stop stop-color="#333333" stop-opacity="0.247480752" offset="100%"></stop>
+        </linearGradient>
+    </defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard-4" transform="translate(-136.000000, -467.000000)">
+            <g id="163" transform="translate(136.000000, 467.000000)">
+                <path d="M3,3 L3,2.00246167 C3,1.44881738 3.44494629,1 3.99339768,1 L5,1 C5,1.55228475 5.44771525,2 6,2 C6.55228475,2 7,1.55228475 7,1 L9,1 C9,1.55228475 9.44771525,2 10,2 C10.5522847,2 11,1.55228475 11,1 L13,1 C13,1.55228475 13.4477153,2 14,2 C14.5522847,2 15,1.55228475 15,1 L17,1 C17,1.55228475 17.4477153,2 18,2 C18.5522847,2 19,1.55228475 19,1 L20.0066023,1 C20.5552407,1 21,1.43945834 21,2.00246167 L21,3 C20.4477153,3 20,3.44771525 20,4 C20,4.55228475 20.4477153,5 21,5 L21,7 C20.4477153,7 20,7.44771525 20,8 C20,8.55228475 20.4477153,9 21,9 L21,11 C20.4477153,11 20,11.4477153 20,12 C20,12.5522847 20.4477153,13 21,13 L21,15 C20.4477153,15 20,15.4477153 20,16 C20,16.5522847 20.4477153,17 21,17 L21,19 C20.4477153,19 20,19.4477153 20,20 C20,20.5522847 20.4477153,21 21,21 L21,21.9975383 C21,22.5511826 20.5550537,23 20.0066023,23 L19,23 C19,22.4477153 18.5522847,22 18,22 C17.4477153,22 17,22.4477153 17,23 L15,23 C15,22.4477153 14.5522847,22 14,22 C13.4477153,22 13,22.4477153 13,23 L11,23 C11,22.4477153 10.5522847,22 10,22 C9.44771525,22 9,22.4477153 9,23 L7,23 C7,22.4477153 6.55228475,22 6,22 C5.44771525,22 5,22.4477153 5,23 L3.99339768,23 C3.44475929,23 3,22.5605417 3,21.9975383 L3,21 C3.55228475,21 4,20.5522847 4,20 C4,19.4477153 3.55228475,19 3,19 L3,17 C3.55228475,17 4,16.5522847 4,16 C4,15.4477153 3.55228475,15 3,15 L3,13 C3.55228475,13 4,12.5522847 4,12 C4,11.4477153 3.55228475,11 3,11 L3,9 C3.55228475,9 4,8.55228475 4,8 C4,7.44771525 3.55228475,7 3,7 L3,5 C3.55228475,5 4,4.55228475 4,4 C4,3.44771525 3.55228475,3 3,3 Z M6,5.00087166 L6,18.9991283 C6,19.5553691 6.44882258,20 7.00247329,20 L16.9975267,20 C17.544239,20 18,19.5518945 18,18.9991283 L18,5.00087166 C18,4.44463086 17.5511774,4 16.9975267,4 L7.00247329,4 C6.45576096,4 6,4.4481055 6,5.00087166 Z" id="Edge" fill="#333333"></path>
+                <rect id="Centre" fill="url(#linearGradient-1)" x="8" y="6" width="8" height="12"></rect>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/application/assets/fonts/icons/star-filled.svg b/application/assets/fonts/icons/star-filled.svg
new file mode 100644
index 00000000..3490c443
--- /dev/null
+++ b/application/assets/fonts/icons/star-filled.svg
@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 44.1 (41455) - http://www.bohemiancoding.com/sketch -->
+    <title>star-filled</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard-4" transform="translate(-840.000000, -1046.000000)" fill-rule="nonzero" fill="#333333">
+            <g id="Extras" transform="translate(48.000000, 1046.000000)">
+                <g id="star-filled" transform="translate(792.000000, 0.000000)">
+                    <path d="M7.64061498,22.0514158 C6.17336022,22.8227973 4.45849536,21.576875 4.73871608,19.9430628 L5.57128453,15.0888163 L2.04446797,11.6510198 C0.857433933,10.4939476 1.51245402,8.47800301 3.15289472,8.23963302 L8.02683534,7.53140799 L10.2065278,3.11486858 C10.9401552,1.62837714 13.0598448,1.62837714 13.7934722,3.11486858 L15.9731647,7.53140799 L20.8471053,8.23963302 C22.487546,8.47800301 23.1425661,10.4939476 21.955532,11.6510198 L18.4287155,15.0888163 L19.2612839,19.9430628 C19.5415046,21.576875 17.8266398,22.8227973 16.359385,22.0514158 L12,19.7595515 L7.64061498,22.0514158 Z" id="Star-1"></path>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/application/assets/fonts/icons/star.svg b/application/assets/fonts/icons/star.svg
new file mode 100644
index 00000000..5ba8f61e
--- /dev/null
+++ b/application/assets/fonts/icons/star.svg
@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 44.1 (41455) - http://www.bohemiancoding.com/sketch -->
+    <title>star</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linejoin="round">
+        <g id="Artboard-4" transform="translate(-488.000000, -203.000000)" stroke="#333333" stroke-width="2">
+            <g id="51" transform="translate(488.000000, 203.000000)">
+                <path d="M12,18.6297757 L5.3818017,22.1091685 L6.64576511,14.7396964 L1.29153021,9.52060725 L8.69090085,8.44541576 L12,1.74044854 L15.3090991,8.44541576 L22.7084698,9.52060725 L17.3542349,14.7396964 L18.6181983,22.1091685 L12,18.6297757 Z" id="Star-1"></path>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/application/assets/fonts/icons/stocking.svg b/application/assets/fonts/icons/stocking.svg
new file mode 100644
index 00000000..d0041042
--- /dev/null
+++ b/application/assets/fonts/icons/stocking.svg
@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 44.1 (41455) - http://www.bohemiancoding.com/sketch -->
+    <title>stocking</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard-4" transform="translate(-356.000000, -555.000000)" stroke="#333333" stroke-width="2">
+            <g id="208" transform="translate(356.000000, 555.000000)">
+                <path d="M17.0007556,6 L9.00075564,6 L9.00075564,12.7352385 L5.94277262,14.5700283 C4.04845155,15.7066209 3.4341913,18.163662 4.57078394,20.057983 C5.70737658,21.9523041 8.1644176,22.5665643 10.0587387,21.4299717 L15.0587387,18.4299717 C16.2635603,17.7070787 17.0007556,16.4050514 17.0007556,15 L17.0007556,6 Z" id="Sock" fill-rule="nonzero"></path>
+                <path d="M16.6288875,13.1860478 C16.2747059,13.0654318 15.8949941,13 15.5,13 C13.5670034,13 12,14.5670034 12,16.5 C12,17.6443123 12.5491574,18.6603619 13.3983072,19.298984" id="Heel" opacity="0.5"></path>
+                <rect id="Top" x="7" y="2" width="12" height="4" rx="2"></rect>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/application/assets/fonts/icons/store.svg b/application/assets/fonts/icons/store.svg
new file mode 100644
index 00000000..e3528051
--- /dev/null
+++ b/application/assets/fonts/icons/store.svg
@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 44.1 (41455) - http://www.bohemiancoding.com/sketch -->
+    <title>store</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round">
+        <g id="Artboard-4" transform="translate(-532.000000, -511.000000)" stroke="#333333" stroke-width="2">
+            <g id="192" transform="translate(532.000000, 511.000000)">
+                <path d="M4,15 L4,19.015959 C4,20.1232006 4.89451376,21.0196346 5.99406028,21.0182053 L18.0059397,21.0025919 C19.1072288,21.0011605 20,20.1017394 20,19.0020869 L20,15" id="Walls" stroke-linejoin="round"></path>
+                <path d="M4.5,12 C5.88071187,12 7,10.8807119 7,9.5 M22,9.5 L20.2951069,3.95909739 C20.1321239,3.42940253 19.5553691,3 18.9991283,3 L5.00087166,3 C4.4481055,3 3.86877441,3.42648315 3.70489311,3.95909739 L2,9.5 C2,10.8807119 3.11928813,12 4.5,12 M9.5,12 C10.8807119,12 12,10.8807119 12,9.5 M7,9.5 C7,10.8807119 8.11928813,12 9.5,12 M14.5,12 C15.8807119,12 17,10.8807119 17,9.5 M12,9.5 C12,10.8807119 13.1192881,12 14.5,12 M19.5,12 C20.8807119,12 22,10.8807119 22,9.5 M17,9.5 C17,10.8807119 18.1192881,12 19.5,12" id="Canopy"></path>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/application/assets/fonts/icons/succulent.svg b/application/assets/fonts/icons/succulent.svg
new file mode 100644
index 00000000..774b5e21
--- /dev/null
+++ b/application/assets/fonts/icons/succulent.svg
@@ -0,0 +1,19 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 44.1 (41455) - http://www.bohemiancoding.com/sketch -->
+    <title>succulent</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard-4" transform="translate(-884.000000, -775.000000)" stroke="#333333" stroke-width="2">
+            <g id="320" transform="translate(884.000000, 775.000000)">
+                <polygon id="Pot" stroke-linecap="round" stroke-linejoin="round" points="4 13 6 22 18 22 20 13"></polygon>
+                <path d="M9,13 C5,7 12,4 12,4 C12,4 19,7 15,13" id="Leaf" stroke-linejoin="round"></path>
+                <path d="M16,8.00017693 C16.115406,4.92286942 20.5,5.00017693 20.5,5.00017693 C20.5,5.00017693 23,9.00017693 18,13.0001769" id="Leaf" stroke-linejoin="round"></path>
+                <path d="M3,8.00017693 C3.11540597,4.92286942 7.5,5.00017693 7.5,5.00017693 C7.5,5.00017693 10,9.00017693 5,13.0001769" id="Leaf" stroke-linejoin="round" transform="translate(5.562500, 9.000088) scale(-1, 1) translate(-5.562500, -9.000088) "></path>
+                <path d="M6,5.5 C6,4 8,3 8,3 C8,3 10,4 10,5.5" id="Leaf"></path>
+                <path d="M14,5.5 C14,4 16,3 16,3 C16,3 18,4 18,5.5" id="Leaf"></path>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/application/assets/fonts/icons/suitcase.svg b/application/assets/fonts/icons/suitcase.svg
new file mode 100644
index 00000000..74aa914d
--- /dev/null
+++ b/application/assets/fonts/icons/suitcase.svg
@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 44.1 (41455) - http://www.bohemiancoding.com/sketch -->
+    <title>suitcase</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard-4" transform="translate(-664.000000, -291.000000)" stroke="#333333">
+            <g id="95" transform="translate(664.000000, 291.000000)">
+                <rect id="Bag" stroke-width="2" x="1" y="7" width="22" height="14" rx="1"></rect>
+                <path d="M8,7.00189865 L8,4.99810135 C8,3.89458045 8.90195036,3 10.0085302,3 L13.9914698,3 C15.1007504,3 16,3.88670635 16,4.99810135 L16,7.00189865" id="Handle" stroke-width="2"></path>
+                <path d="M18.5,7.5 L18.5,20.5 L19.5,20.5 L19.5,7.5 L18.5,7.5 Z M4.5,7.5 L4.5,20.5 L5.5,20.5 L5.5,7.5 L4.5,7.5 Z" id="Straps"></path>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/application/assets/fonts/icons/sunrise.svg b/application/assets/fonts/icons/sunrise.svg
new file mode 100644
index 00000000..3b432c11
--- /dev/null
+++ b/application/assets/fonts/icons/sunrise.svg
@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 44.1 (41455) - http://www.bohemiancoding.com/sketch -->
+    <title>sunrise</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard-4" transform="translate(-664.000000, -819.000000)" stroke="#333333" stroke-width="2">
+            <g id="335" transform="translate(664.000000, 819.000000)">
+                <path d="M15.0030155,20.642404 C15.623583,19.9376971 16,19.012807 16,18 C16,15.790861 14.209139,14 12,14 C9.790861,14 8,15.790861 8,18 C8,19.0135675 8.37698243,19.9390859 8.99838271,20.6439909" id="Sun"></path>
+                <path d="M12,11 L12,10 M16.9497475,13.0502525 L17.6568542,12.3431458 M19,18 L20,18 M5,18 L4,18 M7.05025253,13.0502525 L6.34314575,12.3431458" id="Rays" stroke-linecap="round"></path>
+                <path d="M2,21 L22,21" id="Horizon" stroke-linecap="round"></path>
+                <path d="M12,2 L12,5" id="Line" stroke-linecap="round"></path>
+                <polyline id="Head" stroke-linecap="round" stroke-linejoin="round" points="10 4 12 6 14 4"></polyline>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/application/assets/fonts/icons/sunset.svg b/application/assets/fonts/icons/sunset.svg
new file mode 100644
index 00000000..9c3dac54
--- /dev/null
+++ b/application/assets/fonts/icons/sunset.svg
@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 44.1 (41455) - http://www.bohemiancoding.com/sketch -->
+    <title>sunset</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard-4" transform="translate(-708.000000, -819.000000)" stroke="#333333" stroke-width="2">
+            <g id="336" transform="translate(708.000000, 819.000000)">
+                <path d="M15.0030155,20.642404 C15.623583,19.9376971 16,19.012807 16,18 C16,15.790861 14.209139,14 12,14 C9.790861,14 8,15.790861 8,18 C8,19.0135675 8.37698243,19.9390859 8.99838271,20.6439909" id="Sun"></path>
+                <path d="M12,11 L12,10 M16.9497475,13.0502525 L17.6568542,12.3431458 M19,18 L20,18 M5,18 L4,18 M7.05025253,13.0502525 L6.34314575,12.3431458" id="Rays" stroke-linecap="round"></path>
+                <path d="M2,21 L22,21" id="Horizon" stroke-linecap="round"></path>
+                <path d="M12,3 L12,6" id="Line" stroke-linecap="round"></path>
+                <polyline id="Head" stroke-linecap="round" stroke-linejoin="round" transform="translate(12.000000, 3.000000) scale(1, -1) translate(-12.000000, -3.000000) " points="10 2 12 4 14 2"></polyline>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/application/assets/fonts/icons/switch.svg b/application/assets/fonts/icons/switch.svg
new file mode 100644
index 00000000..70328e25
--- /dev/null
+++ b/application/assets/fonts/icons/switch.svg
@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 44.1 (41455) - http://www.bohemiancoding.com/sketch -->
+    <title>switch</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard-4" transform="translate(-532.000000, -203.000000)" stroke="#333333" stroke-width="2">
+            <g id="52" transform="translate(532.000000, 203.000000)">
+                <rect id="Base" x="1" y="6" width="22" height="12" rx="6"></rect>
+                <circle id="Knob" cx="17" cy="12" r="3"></circle>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/application/assets/fonts/icons/sync.svg b/application/assets/fonts/icons/sync.svg
new file mode 100644
index 00000000..61c86cbb
--- /dev/null
+++ b/application/assets/fonts/icons/sync.svg
@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 44.1 (41455) - http://www.bohemiancoding.com/sketch -->
+    <title>sync</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard-4" transform="translate(-268.000000, -115.000000)" fill="#333333">
+            <g id="6" transform="translate(268.000000, 115.000000)">
+                <path d="M3.0778693,10.8108091 C3.65980479,6.40232883 7.43257416,3 12,3 C14.7398171,3 17.1936911,4.22426776 18.8444094,6.15559061 L21,4 L21,10 L15,10 L17.4245823,7.57541768 C16.1409482,6.00355604 14.1876707,5 12,5 C8.47352809,5 5.55611852,7.60770586 5.07088886,11 L5.05999756,11 C5.05999756,11.5522847 4.61228231,12 4.05999756,12 C3.50771281,12 3.05999756,11.5522847 3.05999756,11 L3.05492878,11 C3.05714381,10.9799625 3.05942463,10.9599448 3.06177101,10.9399471 C3.06436925,10.8960803 3.06979526,10.8529744 3.0778693,10.8108091 Z M20.9221307,13.1891909 C20.3401952,17.5976712 16.5674258,21 12,21 C9.26018292,21 6.8063089,19.7757322 5.15559061,17.8444094 L3,20 L3,14 L9,14 L6.57541768,16.4245823 C7.85905176,17.996444 9.81232934,19 12,19 C15.5264719,19 18.4438815,16.3922941 18.9291111,13 L18.9400024,13 C18.9400024,12.4477153 19.3877177,12 19.9400024,12 C20.4922872,12 20.9400024,12.4477153 20.9400024,13 L20.9450712,13 C20.9428562,13.0200375 20.9405754,13.0400552 20.938229,13.0600529 C20.9356308,13.1039197 20.9302047,13.1470256 20.9221307,13.1891909 Z" id="Combined-Shape"></path>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/application/assets/fonts/icons/tablet.svg b/application/assets/fonts/icons/tablet.svg
new file mode 100644
index 00000000..ed60e743
--- /dev/null
+++ b/application/assets/fonts/icons/tablet.svg
@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 44.1 (41455) - http://www.bohemiancoding.com/sketch -->
+    <title>tablet</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard-4" transform="translate(-840.000000, -115.000000)">
+            <g id="19" transform="translate(840.000000, 115.000000)">
+                <rect id="Body" stroke="#333333" stroke-width="2" stroke-linejoin="round" x="3" y="1" width="18" height="22" rx="1"></rect>
+                <rect id="Camera" fill="#333333" x="11.5" y="3" width="1" height="1" rx="0.5"></rect>
+                <circle id="Home" fill="#333333" cx="12" cy="20" r="1"></circle>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/application/assets/fonts/icons/tabs.svg b/application/assets/fonts/icons/tabs.svg
new file mode 100644
index 00000000..27e1155a
--- /dev/null
+++ b/application/assets/fonts/icons/tabs.svg
@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 44.1 (41455) - http://www.bohemiancoding.com/sketch -->
+    <title>tabs</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard-4" transform="translate(-488.000000, -423.000000)">
+            <g id="151" transform="translate(488.000000, 423.000000)">
+                <rect id="Front" stroke="#333333" stroke-width="2" x="3" y="7" width="14" height="14" rx="2"></rect>
+                <path d="M6.17230767,4 C6.58585372,2.83445779 7.69793704,2 9.00585866,2 L18.9941413,2 C20.6544979,2 22,3.34504186 22,5.00585866 L22,14.9941413 C22,16.3017685 21.1657409,17.414108 20,17.8277078 L20,5.17350177 C20,4.52472533 19.4750951,4 18.8264982,4 L6.17230767,4 Z" id="Back" fill="#333333" fill-rule="nonzero"></path>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/application/assets/fonts/icons/tag.svg b/application/assets/fonts/icons/tag.svg
new file mode 100644
index 00000000..897be30a
--- /dev/null
+++ b/application/assets/fonts/icons/tag.svg
@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 44.1 (41455) - http://www.bohemiancoding.com/sketch -->
+    <title>tag</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard-4" transform="translate(-136.000000, -203.000000)">
+            <g id="43" transform="translate(136.000000, 203.000000)">
+                <circle id="Hole" fill="#333333" cx="16" cy="8" r="2"></circle>
+                <path d="M21.0000005,3 L21.0000005,10.0029699 C21.0000005,10.5536144 20.6826549,11.3173456 20.2951675,11.704833 L11.4155384,20.5844616 C10.6337581,21.3662419 9.37225335,21.3722534 8.58817587,20.5881759 L3.41182436,15.4118241 C2.63209548,14.6320952 2.63895277,13.3610475 3.41553865,12.5844616 L12.2951667,3.70483296 C12.6844351,3.31556446 13.4530359,3 13.9970298,3 L21.0000005,3 Z" id="Tag" stroke="#333333" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/application/assets/fonts/icons/team.svg b/application/assets/fonts/icons/team.svg
new file mode 100644
index 00000000..33e1793f
--- /dev/null
+++ b/application/assets/fonts/icons/team.svg
@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 44.1 (41455) - http://www.bohemiancoding.com/sketch -->
+    <title>team</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard-4" transform="translate(-752.000000, -467.000000)" stroke="#333333" stroke-width="2">
+            <g id="177" transform="translate(752.000000, 467.000000)">
+                <path d="M12,11 C9.790861,11 8,9.209139 8,7 C8,4.790861 9.790861,3 12,3 C14.209139,3 16,4.790861 16,7 C16,9.209139 14.209139,11 12,11 Z M6,21 C3.790861,21 2,19.209139 2,17 C2,14.790861 3.790861,13 6,13 C8.209139,13 10,14.790861 10,17 C10,19.209139 8.209139,21 6,21 Z M18,21 C15.790861,21 14,19.209139 14,17 C14,14.790861 15.790861,13 18,13 C20.209139,13 22,14.790861 22,17 C22,19.209139 20.209139,21 18,21 Z" id="heads"></path>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/application/assets/fonts/icons/terminal.svg b/application/assets/fonts/icons/terminal.svg
new file mode 100644
index 00000000..07aacb92
--- /dev/null
+++ b/application/assets/fonts/icons/terminal.svg
@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 44.1 (41455) - http://www.bohemiancoding.com/sketch -->
+    <title>terminal</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard-4" transform="translate(-752.000000, -379.000000)">
+            <g id="136" transform="translate(752.000000, 379.000000)">
+                <rect id="Screen" stroke="#333333" stroke-width="2" x="2" y="4" width="20" height="16" rx="2"></rect>
+                <polyline id="Arrow" stroke="#333333" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" points="6 8 8 10 6 12"></polyline>
+                <rect id="Cursor" fill="#333333" x="10" y="11" width="6" height="2" rx="1"></rect>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/application/assets/fonts/icons/the-monster.svg b/application/assets/fonts/icons/the-monster.svg
new file mode 100644
index 00000000..f631f5ec
--- /dev/null
+++ b/application/assets/fonts/icons/the-monster.svg
@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 44.1 (41455) - http://www.bohemiancoding.com/sketch -->
+    <title>the-monster</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard-4" transform="translate(-532.000000, -467.000000)">
+            <g id="172" transform="translate(532.000000, 467.000000)">
+                <path d="M4,5.99810135 C4,4.89458045 4.89451376,4 5.99406028,4 L18.0059397,4 C19.1072288,4 20,4.88670635 20,5.99810135 L20,12 L19,14 L19,18.9940809 C19,20.1019194 18.1029399,21 16.9941413,21 L7.00585866,21 C5.89805351,21 5,20.1134452 5,18.9940809 L5,14 L4,12 L4,5.99810135 Z" id="Head" stroke="#333333" stroke-width="2" stroke-linejoin="round"></path>
+                <rect id="Mouth" fill="#333333" x="10" y="17" width="4" height="1" rx="0.5"></rect>
+                <path d="M9.5,16 C8.67157288,16 8,15.3284271 8,14.5 C8,13.6715729 8.67157288,13 9.5,13 C10.3284271,13 11,13.6715729 11,14.5 C11,15.3284271 10.3284271,16 9.5,16 Z M14.5,16 C13.6715729,16 13,15.3284271 13,14.5 C13,13.6715729 13.6715729,13 14.5,13 C15.3284271,13 16,13.6715729 16,14.5 C16,15.3284271 15.3284271,16 14.5,16 Z" id="eyes" fill="#333333"></path>
+                <path d="M12,9 L12,8 L11,8 L11,9 L10,9 L10,8 L9,8 L9,9 L8,9 L8,8 L7,8 L7,9 L4.4963932,9 C4.22618103,9 4,9.22385763 4,9.5 C4,9.76806641 4.22224281,10 4.4963932,10 L7,10 L7,11 L8,11 L8,10 L9,10 L9,11 L10,11 L10,10 L11,10 L11,11 L12,11 L12,10 L14,10 L14,11 L15,11 L15,10 L16,10 L16,11 L17,11 L17,10 L19.5036068,10 C19.773819,10 20,9.77614237 20,9.5 C20,9.23193359 19.7777572,9 19.5036068,9 L17,9 L17,8 L16,8 L16,9 L15,9 L15,8 L14,8 L14,9 L12,9 Z" id="Stitches" fill="#333333" opacity="0.75"></path>
+                <path d="M3,5 C3,3.8954305 3.8926228,3 4.99508929,3 L19.0049107,3 C20.1067681,3 21,3.88772964 21,5 L21,7 L20,6 L18,8 L16,6 L14,8 L12,6 L10,8 L8,6 L6,8 L4,6 L3,7 L3,5 Z" id="Hair" fill="#333333"></path>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/application/assets/fonts/icons/thermometer-high.svg b/application/assets/fonts/icons/thermometer-high.svg
new file mode 100644
index 00000000..9b5deee6
--- /dev/null
+++ b/application/assets/fonts/icons/thermometer-high.svg
@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 44.1 (41455) - http://www.bohemiancoding.com/sketch -->
+    <title>thermometer-high</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard-4" transform="translate(-664.000000, -1090.000000)">
+            <g id="Extras" transform="translate(48.000000, 1046.000000)">
+                <g id="thermometer-high" transform="translate(616.000000, 44.000000)">
+                    <path d="M14,14.7577745 L14,3.50840855 C14,2.11541748 12.8807119,1 11.5,1 C10.1096621,1 9,2.12305276 9,3.50840855 L9,14.7577745 C7.79401426,15.5650359 7,16.9397919 7,18.5 C7,20.9852814 9.01471863,23 11.5,23 C13.9852814,23 16,20.9852814 16,18.5 C16,16.9397919 15.2059857,15.5650359 14,14.7577745 Z" id="Termometer" stroke="#333333" stroke-width="2"></path>
+                    <path d="M12,16.0500091 L12,3.4963932 C12,3.22618103 11.7761424,3 11.5,3 C11.2319336,3 11,3.22224281 11,3.4963932 L11,16.0500091 C9.85887984,16.2816442 9,17.290521 9,18.5 C9,19.8807119 10.1192881,21 11.5,21 C12.8807119,21 14,19.8807119 14,18.5 C14,17.290521 13.1411202,16.2816442 12,16.0500091 Z" id="Level" fill="#333333"></path>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/application/assets/fonts/icons/thermometer-low.svg b/application/assets/fonts/icons/thermometer-low.svg
new file mode 100644
index 00000000..64505282
--- /dev/null
+++ b/application/assets/fonts/icons/thermometer-low.svg
@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 44.1 (41455) - http://www.bohemiancoding.com/sketch -->
+    <title>thermometer-low</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard-4" transform="translate(-708.000000, -1090.000000)">
+            <g id="Extras" transform="translate(48.000000, 1046.000000)">
+                <g id="thermometer-low" transform="translate(660.000000, 44.000000)">
+                    <path d="M14,14.7577745 L14,3.50840855 C14,2.11541748 12.8807119,1 11.5,1 C10.1096621,1 9,2.12305276 9,3.50840855 L9,14.7577745 C7.79401426,15.5650359 7,16.9397919 7,18.5 C7,20.9852814 9.01471863,23 11.5,23 C13.9852814,23 16,20.9852814 16,18.5 C16,16.9397919 15.2059857,15.5650359 14,14.7577745 Z" id="Thermometer" stroke="#333333" stroke-width="2"></path>
+                    <path d="M12,16.0500091 L12,14.4976988 C12,14.2148438 11.7761424,14 11.5,14 C11.2319336,14 11,14.2228273 11,14.4976988 L11,16.0500091 C9.85887984,16.2816442 9,17.290521 9,18.5 C9,19.8807119 10.1192881,21 11.5,21 C12.8807119,21 14,19.8807119 14,18.5 C14,17.290521 13.1411202,16.2816442 12,16.0500091 Z" id="Level" fill="#333333"></path>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/application/assets/fonts/icons/thermometer.svg b/application/assets/fonts/icons/thermometer.svg
new file mode 100644
index 00000000..0d463371
--- /dev/null
+++ b/application/assets/fonts/icons/thermometer.svg
@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 44.1 (41455) - http://www.bohemiancoding.com/sketch -->
+    <title>thermometer</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard-4" transform="translate(-400.000000, -555.000000)">
+            <g id="208" transform="translate(400.000000, 555.000000)">
+                <path d="M14,14.7577745 L14,3.50840855 C14,2.11541748 12.8807119,1 11.5,1 C10.1096621,1 9,2.12305276 9,3.50840855 L9,14.7577745 C7.79401426,15.5650359 7,16.9397919 7,18.5 C7,20.9852814 9.01471863,23 11.5,23 C13.9852814,23 16,20.9852814 16,18.5 C16,16.9397919 15.2059857,15.5650359 14,14.7577745 Z" id="Thermometer" stroke="#333333" stroke-width="2"></path>
+                <path d="M12,16.0500091 L12,9.50964952 C12,9.22765279 11.7761424,9 11.5,9 C11.2319336,9 11,9.22817786 11,9.50964952 L11,16.0500091 C9.85887984,16.2816442 9,17.290521 9,18.5 C9,19.8807119 10.1192881,21 11.5,21 C12.8807119,21 14,19.8807119 14,18.5 C14,17.290521 13.1411202,16.2816442 12,16.0500091 Z" id="Level" fill="#333333"></path>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/application/assets/fonts/icons/thumbs-down.svg b/application/assets/fonts/icons/thumbs-down.svg
new file mode 100644
index 00000000..cccb1024
--- /dev/null
+++ b/application/assets/fonts/icons/thumbs-down.svg
@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 44.1 (41455) - http://www.bohemiancoding.com/sketch -->
+    <title>thumbs-down</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round">
+        <g id="Artboard-4" transform="translate(-752.000000, -1090.000000)" stroke="#333333" stroke-width="2">
+            <g id="Extras" transform="translate(48.000000, 1046.000000)">
+                <g id="thumbs-down" transform="translate(704.000000, 44.000000)">
+                    <path d="M6,16 C6,18.5 6.5,21 8,21 L16.9938335,21 C17.5495239,21 18.1819788,20.5956028 18.4072817,20.0949295 L20.8562951,14.6526776 C21.7640882,12.6353595 20.7154925,11 18.5092545,11 L15.5,11 C15.5,11 18.5,5 15,5 C12.5,5 11.5,11 8,11 C6.5,11 6,13.5 6,16 Z" id="Hand" stroke-linejoin="round" transform="translate(13.591488, 13.000000) scale(1, -1) translate(-13.591488, -13.000000) "></path>
+                    <path d="M4,4.5 C4,4.5 3,7 3,10 C3,13 4,15.5 4,15.5" id="Sleeve" transform="translate(3.500000, 10.000000) scale(1, -1) translate(-3.500000, -10.000000) "></path>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/application/assets/fonts/icons/thumbs-up.svg b/application/assets/fonts/icons/thumbs-up.svg
new file mode 100644
index 00000000..287ebb79
--- /dev/null
+++ b/application/assets/fonts/icons/thumbs-up.svg
@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 44.1 (41455) - http://www.bohemiancoding.com/sketch -->
+    <title>thumbs-up</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round">
+        <g id="Artboard-4" transform="translate(-708.000000, -643.000000)" stroke="#333333" stroke-width="2">
+            <g id="256" transform="translate(708.000000, 643.000000)">
+                <path d="M6,14 C6,16.5 6.5,19 8,19 L16.9938335,19 C17.5495239,19 18.1819788,18.5956028 18.4072817,18.0949295 L20.8562951,12.6526776 C21.7640882,10.6353595 20.7154925,9 18.5092545,9 L15.5,9 C15.5,9 18.5,3 15,3 C12.5,3 11.5,9 8,9 C6.5,9 6,11.5 6,14 Z" id="Hand" stroke-linejoin="round"></path>
+                <path d="M4,8.5 C4,8.5 3,11 3,14 C3,17 4,19.5 4,19.5" id="Sleeve"></path>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/application/assets/fonts/icons/tick.svg b/application/assets/fonts/icons/tick.svg
new file mode 100644
index 00000000..438dc61e
--- /dev/null
+++ b/application/assets/fonts/icons/tick.svg
@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 44.1 (41455) - http://www.bohemiancoding.com/sketch -->
+    <title>tick</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
+        <g id="Artboard-4" transform="translate(-356.000000, -115.000000)" stroke="#333333" stroke-width="2">
+            <g id="8" transform="translate(356.000000, 115.000000)">
+                <polyline id="Path-14" transform="translate(12.500000, 12.000000) scale(-1, 1) translate(-12.500000, -12.000000) " points="21 13 16 18 4 6"></polyline>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/application/assets/fonts/icons/ticket.svg b/application/assets/fonts/icons/ticket.svg
new file mode 100644
index 00000000..2070bc35
--- /dev/null
+++ b/application/assets/fonts/icons/ticket.svg
@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 44.1 (41455) - http://www.bohemiancoding.com/sketch -->
+    <title>ticket</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard-4" transform="translate(-708.000000, -511.000000)">
+            <g id="196" transform="translate(708.000000, 511.000000)">
+                <path d="M14.2675644,19 L2.991155,19 C1.89147046,19 1,18.1029399 1,16.9941413 L1,13.7324356 C1.59780137,13.3866262 2,12.7402824 2,12 C2,11.2597176 1.59780137,10.6133738 1,10.2675644 L1,7.00585866 C1,5.89805351 1.88967395,5 2.991155,5 L14.2675644,5 C14.6133738,5.59780137 15.2597176,6 16,6 C16.7402824,6 17.3866262,5.59780137 17.7324356,5 L21.008845,5 C22.1085295,5 23,5.89706013 23,7.00585866 L23,10.2675644 C22.4021986,10.6133738 22,11.2597176 22,12 C22,12.7402824 22.4021986,13.3866262 23,13.7324356 L23,16.9941413 C23,18.1019465 22.1103261,19 21.008845,19 L17.7324356,19 C17.3866262,18.4021986 16.7402824,18 16,18 C15.2597176,18 14.6133738,18.4021986 14.2675644,19 Z" id="Ticket" stroke="#333333" stroke-width="2" stroke-linejoin="round"></path>
+                <path d="M15,6.99895656 C15,6.44724809 15.4438648,6 16,6 C16.5522847,6 17,6.44266033 17,6.99895656 L17,8.00104344 C17,8.55275191 16.5561352,9 16,9 C15.4477153,9 15,8.55733967 15,8.00104344 L15,6.99895656 Z M15,11.0093689 C15,10.4519098 15.4438648,10 16,10 C16.5522847,10 17,10.4433532 17,11.0093689 L17,12.9906311 C17,13.5480902 16.5561352,14 16,14 C15.4477153,14 15,13.5566468 15,12.9906311 L15,11.0093689 Z M15,15.9989566 C15,15.4472481 15.4438648,15 16,15 C16.5522847,15 17,15.4426603 17,15.9989566 L17,17.0010434 C17,17.5527519 16.5561352,18 16,18 C15.4477153,18 15,17.5573397 15,17.0010434 L15,15.9989566 Z" id="Rip" fill="#333333"></path>
+                <path d="M4,9 C4,8.44771525 4.45303631,8 4.99703014,8 L11.0029699,8 C11.5536144,8 12,8.44386482 12,9 C12,9.55228475 11.5469637,10 11.0029699,10 L4.99703014,10 C4.4463856,10 4,9.55613518 4,9 Z M4,12 C4,11.4477153 4.44335318,11 5.0093689,11 L6.9906311,11 C7.54809015,11 8,11.4438648 8,12 C8,12.5522847 7.55664682,13 6.9906311,13 L5.0093689,13 C4.45190985,13 4,12.5561352 4,12 Z" id="Info" fill="#333333" opacity="0.5"></path>
+                <rect id="Info" fill="#333333" opacity="0.200000003" x="4" y="15" width="9" height="1" rx="0.5"></rect>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/application/assets/fonts/icons/time-machine.svg b/application/assets/fonts/icons/time-machine.svg
new file mode 100644
index 00000000..ebe9177b
--- /dev/null
+++ b/application/assets/fonts/icons/time-machine.svg
@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 44.1 (41455) - http://www.bohemiancoding.com/sketch -->
+    <title>time-machine</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
+        <g id="Artboard-4" transform="translate(-620.000000, -863.000000)" stroke="#333333" stroke-width="2">
+            <g id="354" transform="translate(620.000000, 863.000000)">
+                <path d="M6.63582585,18.3637479 C8.26452234,19.9925528 10.5146102,21 13,21 L13,21 C17.9705627,21 22,16.9705627 22,12 C22,7.02943725 17.9705627,3 13,3 C8.02943725,3 4,7.02943725 4,12" id="Line"></path>
+                <polygon id="Arrow" fill="#333333" points="1.5 11 7.5 11 4.5 14"></polygon>
+                <polyline id="Hands" points="13 7 13 12 15.5 14.5"></polyline>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/application/assets/fonts/icons/timer.svg b/application/assets/fonts/icons/timer.svg
new file mode 100644
index 00000000..a90713cd
--- /dev/null
+++ b/application/assets/fonts/icons/timer.svg
@@ -0,0 +1,24 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 44.1 (41455) - http://www.bohemiancoding.com/sketch -->
+    <title>timer</title>
+    <desc>Created with Sketch.</desc>
+    <defs>
+        <linearGradient x1="50%" y1="100%" x2="50%" y2="7.77745661%" id="linearGradient-1">
+            <stop stop-color="#373737" stop-opacity="0.35" offset="0%"></stop>
+            <stop stop-color="#333333" stop-opacity="0" offset="100%"></stop>
+        </linearGradient>
+    </defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard-4" transform="translate(-488.000000, -115.000000)">
+            <g id="11" transform="translate(488.000000, 115.000000)">
+                <path d="M12,22 C16.9705627,22 21,17.9705627 21,13 C21,8.02943725 16.9705627,4 12,4 C7.02943725,4 3,8.02943725 3,13 C3,17.9705627 7.02943725,22 12,22 Z" id="Base" stroke="#333333" stroke-width="2"></path>
+                <path d="M12,11 C12,9.37715382 12,7.17278908 12,6 C15.8659932,6 19,9.13400675 19,13 C19,14.9317726 18.2174903,16.6807802 16.9521533,17.9473404 C16.0965019,17.2010459 14.5298558,15.6165551 13.3871678,14.4407549 C13.7649574,14.0769307 14,13.5659139 14,13 C14,11.8954305 13.1045695,11 12,11 Z" id="Gradient" fill="url(#linearGradient-1)"></path>
+                <path d="M12,15 C10.8954305,15 10,14.1045695 10,13 C10,11.8954305 10.8954305,11 12,11 C13.1045695,11 14,11.8954305 14,13 C14,14.1045695 13.1045695,15 12,15 Z" id="Middle" fill="#333333"></path>
+                <path d="M13,14 L16,17" id="Hand" stroke="#333333" stroke-width="2" stroke-linecap="round"></path>
+                <path d="M11,2 L13,2 L13,5 L11,5 L11,2 Z M9,1.5 C9,1.22385763 9.22788048,1 9.49100518,1 L14.5089948,1 C14.7801695,1 15,1.23193359 15,1.5 C15,1.77614237 14.7721195,2 14.5089948,2 L9.49100518,2 C9.21983051,2 9,1.76806641 9,1.5 Z" id="Top" fill="#333333"></path>
+                <rect id="Button" fill="#333333" transform="translate(19.767767, 5.767767) rotate(-315.000000) translate(-19.767767, -5.767767) " x="18.767767" y="4.26776695" width="2" height="3" rx="1"></rect>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/application/assets/fonts/icons/trash-full.svg b/application/assets/fonts/icons/trash-full.svg
new file mode 100644
index 00000000..1b01c860
--- /dev/null
+++ b/application/assets/fonts/icons/trash-full.svg
@@ -0,0 +1,29 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 44.1 (41455) - http://www.bohemiancoding.com/sketch -->
+    <title>trash-full</title>
+    <desc>Created with Sketch.</desc>
+    <defs>
+        <linearGradient x1="50%" y1="1.45687181%" x2="50%" y2="100%" id="linearGradient-1">
+            <stop stop-color="#333333" stop-opacity="0" offset="0%"></stop>
+            <stop stop-color="#333333" offset="100%"></stop>
+        </linearGradient>
+    </defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard-4" transform="translate(-620.000000, -423.000000)">
+            <g id="154" transform="translate(620.000000, 423.000000)">
+                <polygon id="Gradient" fill="url(#linearGradient-1)" opacity="0.5" points="3 5 21.0069431 5 17.5 20.5 6.48864223 20.5"></polygon>
+                <ellipse id="Rim" stroke="#333333" stroke-width="2" cx="12" cy="5" rx="9" ry="2"></ellipse>
+                <path d="M3,5 L5.63214111,19.0380859 C5.83530397,20.1216212 6.90196064,21 8.00855308,21 L15.9915836,21 C17.1008769,21 18.165703,20.1165509 18.3679956,19.0371329 L21.0001367,4.99222774" id="Body" stroke="#333333" stroke-width="2"></path>
+                <path d="M7,6 C7,7 5,9.04138127 3.95861873,9.04138127" id="Path-85" stroke="#333333"></path>
+                <path d="M12,7 C12,8 6,14 5,14" id="Path-87" stroke="#333333"></path>
+                <path d="M18,7 C18,8.5 7.5,19 6,19" id="Path-89" stroke="#333333"></path>
+                <path d="M10,21 C11.5,21 20.0124922,12.5 20.0124922,10.9875078" id="Path-91" stroke="#333333"></path>
+                <path d="M17.5,6.5 C17.5,7.5 19.5,9.5 20.5,9.5" id="Path-86" stroke="#333333"></path>
+                <path d="M12,7 C12,8 18,14 19,14" id="Path-88" stroke="#333333"></path>
+                <path d="M6,7 C6,8.5 16.5,19.0104121 18.0104121,19.0104121" id="Path-90" stroke="#333333"></path>
+                <path d="M14,21 C12.5,21 4,12.5 4,11" id="Path-92" stroke="#333333"></path>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/application/assets/fonts/icons/trash.svg b/application/assets/fonts/icons/trash.svg
new file mode 100644
index 00000000..63791cd5
--- /dev/null
+++ b/application/assets/fonts/icons/trash.svg
@@ -0,0 +1,23 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 44.1 (41455) - http://www.bohemiancoding.com/sketch -->
+    <title>trash</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard-4" transform="translate(-576.000000, -423.000000)" stroke="#333333">
+            <g id="153" transform="translate(576.000000, 423.000000)">
+                <ellipse id="Rim" stroke-width="2" cx="12" cy="5" rx="9" ry="2"></ellipse>
+                <path d="M3,5 L5.63214111,19.0380859 C5.83530397,20.1216212 6.90196064,21 8.00855308,21 L15.9915836,21 C17.1008769,21 18.165703,20.1165509 18.3679956,19.0371329 L21.0001367,4.99222774" id="Body" stroke-width="2"></path>
+                <path d="M7,6 C7,7 5,9.04138127 3.95861873,9.04138127" id="Path-85"></path>
+                <path d="M12,7 C12,8 6,14 5,14" id="Path-87"></path>
+                <path d="M18,7 C18,8.5 7.5,19 6,19" id="Path-89"></path>
+                <path d="M10,21 C11.5,21 20.0124922,12.5 20.0124922,10.9875078" id="Path-91"></path>
+                <path d="M17.5,6.5 C17.5,7.5 19.5,9.5 20.5,9.5" id="Path-86"></path>
+                <path d="M12,7 C12,8 18,14 19,14" id="Path-88"></path>
+                <path d="M6,7 C6,8.5 16.5,19.0104121 18.0104121,19.0104121" id="Path-90"></path>
+                <path d="M14,21 C12.5,21 4,12.5 4,11" id="Path-92"></path>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/application/assets/fonts/icons/trophy.svg b/application/assets/fonts/icons/trophy.svg
new file mode 100644
index 00000000..f5d6090a
--- /dev/null
+++ b/application/assets/fonts/icons/trophy.svg
@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 44.1 (41455) - http://www.bohemiancoding.com/sketch -->
+    <title>trophy</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard-4" transform="translate(-532.000000, -379.000000)">
+            <g id="131" transform="translate(532.000000, 379.000000)">
+                <path d="M6,3 L18,3 L18,6.02514648 L18,9.00117666 C18,12.3142353 15.3069658,15 12,15 C8.6862915,15 6,12.3225826 6,8.99353135 L6,5.99499512 L6,3 Z" id="Body" stroke="#333333" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
+                <path d="M13,19.0016228 L15.0029699,19.0016228 C15.5536144,19.0016228 16,19.4453976 16,20.0014199 C16,20.0014876 16,20.0015552 16,20.0016228 L17.9931545,20.0016228 C18.5492199,20.0016228 19,20.4453976 19,21.0014199 C19,21.5535927 18.5500512,22.0012171 17.9931545,22.0012171 L6.00684547,22.0012171 C5.45078007,22.0012171 5,21.5574423 5,21.0014199 C5,20.4492472 5.44994876,20.0016228 6.00684547,20.0016228 L8.00000002,20.0016228 C8.00000001,20.0015552 8,20.0014876 8,20.0014199 C8,19.4492472 8.45303631,19.0016228 8.99703014,19.0016228 L11,19.0016228 L11,15.0016228 L13,15.0016228 L13,19.0016228 Z" id="Base" fill="#333333"></path>
+                <path d="M18,5 C18,5 20.5,5 21,5 C21.5,5 22,5.5 22,6 C22,6.5 22,11 17,11" id="Right-Handle" stroke="#333333" stroke-width="2" stroke-linejoin="round"></path>
+                <path d="M3,5 C3,5 5.5,5 6,5 C6.5,5 7,5.5 7,6 C7,6.5 7,11 2,11" id="Left-Handle" stroke="#333333" stroke-width="2" stroke-linejoin="round" transform="translate(4.500000, 8.000000) scale(-1, 1) translate(-4.500000, -8.000000) "></path>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/application/assets/fonts/icons/truck-fast.svg b/application/assets/fonts/icons/truck-fast.svg
new file mode 100644
index 00000000..56f192cf
--- /dev/null
+++ b/application/assets/fonts/icons/truck-fast.svg
@@ -0,0 +1,21 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 44.1 (41455) - http://www.bohemiancoding.com/sketch -->
+    <title>truck-fast</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard-4" transform="translate(-224.000000, -643.000000)">
+            <g id="245" transform="translate(224.000000, 643.000000)">
+                <path d="M4,16 L4.90949295,5.9955775 C4.95947862,5.44573523 5.44748943,5 5.99850233,5 L17.0014977,5 C17.5529553,5 17.9595603,5.44483697 17.909493,5.9955775 L17,16" id="Body" stroke="#333333" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
+                <path d="M18,7 L20.9951185,7 C22.102384,7 22.9004602,7.89585781 22.7780676,8.9973917 L22,16 L23,16 L21,16 M17,16 L10,16 M6,16 L3,16" id="Cab" stroke="#333333" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
+                <path d="M17,9.99895656 C17,9.44724809 17.4433532,9 18.0093689,9 L19.9906311,9 C20.5480902,9 20.9262233,9.44266033 20.8362813,9.9823122 L20.6637187,11.0176878 C20.5732994,11.5602038 20.0424361,12 19.5064025,12 L17.9935975,12 C17.4448488,12 17,11.5573397 17,11.0010434 L17,9.99895656 Z" id="Window" fill="#333333"></path>
+                <path d="M6.03112887,5 L2,5" id="Wind-4" stroke="#333333" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
+                <path d="M8.03112887,8 L4,8" id="Wind-3" stroke="#333333" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
+                <path d="M6.03112887,12 L2,12" id="Wind-2" stroke="#333333" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
+                <circle id="Wind-1" fill="#333333" cx="1" cy="8" r="1"></circle>
+                <path d="M8,19 C6.8954305,19 6,18.1045695 6,17 C6,15.8954305 6.8954305,15 8,15 C9.1045695,15 10,15.8954305 10,17 C10,18.1045695 9.1045695,19 8,19 Z M19,19 C17.8954305,19 17,18.1045695 17,17 C17,15.8954305 17.8954305,15 19,15 C20.1045695,15 21,15.8954305 21,17 C21,18.1045695 20.1045695,19 19,19 Z" id="Wheels" stroke="#333333" stroke-width="2"></path>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/application/assets/fonts/icons/truck.svg b/application/assets/fonts/icons/truck.svg
new file mode 100644
index 00000000..bb18d018
--- /dev/null
+++ b/application/assets/fonts/icons/truck.svg
@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 44.1 (41455) - http://www.bohemiancoding.com/sketch -->
+    <title>truck</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard-4" transform="translate(-268.000000, -643.000000)">
+            <g id="246" transform="translate(268.000000, 643.000000)">
+                <path d="M3,16 L3,5.9955775 C3,5.44573523 3.44748943,5 3.99850233,5 L15.0014977,5 C15.5529553,5 16,5.44483697 16,5.9955775 L16,16" id="Body" stroke="#333333" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
+                <path d="M17,7 L19.2170509,7.0026083 C20.3243164,7.0026083 21.1223927,7.89846611 21,9 L21,16 L22,16 L20,16 M16,16 L9,16 M5,16 L2,16" id="Cap" stroke="#333333" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
+                <path d="M16,9.99895656 C16,9.44724809 16.4426603,9 16.9989566,9 L18.0010434,9 C18.5527519,9 19,9.44266033 19,9.99895656 L19,11.0010434 C19,11.5527519 18.5573397,12 18.0010434,12 L16.9989566,12 C16.4472481,12 16,11.5573397 16,11.0010434 L16,9.99895656 Z" id="Window" fill="#333333"></path>
+                <path d="M7,19 C5.8954305,19 5,18.1045695 5,17 C5,15.8954305 5.8954305,15 7,15 C8.1045695,15 9,15.8954305 9,17 C9,18.1045695 8.1045695,19 7,19 Z M18,19 C16.8954305,19 16,18.1045695 16,17 C16,15.8954305 16.8954305,15 18,15 C19.1045695,15 20,15.8954305 20,17 C20,18.1045695 19.1045695,19 18,19 Z" id="Wheels" stroke="#333333" stroke-width="2"></path>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/application/assets/fonts/icons/tv.svg b/application/assets/fonts/icons/tv.svg
new file mode 100644
index 00000000..45c2dbd1
--- /dev/null
+++ b/application/assets/fonts/icons/tv.svg
@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 44.1 (41455) - http://www.bohemiancoding.com/sketch -->
+    <title>tv</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard-4" transform="translate(-576.000000, -203.000000)" stroke="#333333" stroke-width="2">
+            <g id="53" transform="translate(576.000000, 203.000000)">
+                <rect id="screen" x="2" y="4" width="20" height="13" rx="1"></rect>
+                <path d="M12,17 L12,20" id="Base"></path>
+                <path d="M8,20 L16,20" id="Stand" stroke-linecap="round" stroke-linejoin="round"></path>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/application/assets/fonts/icons/twitter.svg b/application/assets/fonts/icons/twitter.svg
new file mode 100644
index 00000000..51083264
--- /dev/null
+++ b/application/assets/fonts/icons/twitter.svg
@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 44.1 (41455) - http://www.bohemiancoding.com/sketch -->
+    <title>twitter</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linejoin="round">
+        <g id="Artboard-4" transform="translate(-752.000000, -863.000000)" stroke="#333333" stroke-width="2" fill-rule="nonzero">
+            <g id="357" transform="translate(752.000000, 863.000000)">
+                <path d="M19.9648,8.50524978 C19.9648,8.33039473 20,7.5 20,7 C20.8565952,6.49511161 21.1936988,5.41413699 21.5,4.4786058 C20.694526,4.94918272 19.7605169,5.09519202 18.8416,5.27358196 C17.5696662,3.94200114 15.5485755,3.61609205 13.9116394,4.4786058 C12.2747034,5.34111954 11.42902,7.17755314 11.8488,8.9581401 C8.54951659,8.79529613 5.47558062,7.26104056 3.392,4.73720229 C2.30289821,6.58313971 2.85919031,8.94463962 4.6624,10.1301415 C4.00939296,10.1110867 3.3706235,9.9376538 2.8,9.6244796 L2.8,9.6756759 C2.80053451,11.5987608 4.17740119,13.2551124 6.092,13.6359064 C5.48789568,13.7981121 4.85406447,13.8218232 4.2392,13.7052183 C4.77675834,15.3509216 6.31725965,16.4783121 8.0728,16.5107754 C6.61978803,17.6350713 4.82484761,18.2454066 2.9768,18.2435732 C2.65032286,18.2429561 2.32416325,18.2234944 2,18.1852882 C3.87650876,19.3708972 6.05993072,19.999777 8.2896,19.9968495 C15.8368,20 19.9648,13.8438421 19.9648,8.50524978 Z" id="birb"></path>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/application/assets/fonts/icons/undo-alt.svg b/application/assets/fonts/icons/undo-alt.svg
new file mode 100644
index 00000000..cbd663de
--- /dev/null
+++ b/application/assets/fonts/icons/undo-alt.svg
@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 44.1 (41455) - http://www.bohemiancoding.com/sketch -->
+    <title>undo-alt</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round">
+        <g id="Artboard-4" transform="translate(-708.000000, -291.000000)" stroke="#333333" stroke-width="2">
+            <g id="96" transform="translate(708.000000, 291.000000)">
+                <path d="M15,19 C17.7614237,19 20,16.7614237 20,14 C20,11.2385763 17.7614237,9 15,9 L5.5,9" id="Line"></path>
+                <polyline id="Head" stroke-linejoin="round" points="9.02493781 4 4 9.02493781 9.02748045 14.0524183"></polyline>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/application/assets/fonts/icons/undo.svg b/application/assets/fonts/icons/undo.svg
new file mode 100644
index 00000000..5349635b
--- /dev/null
+++ b/application/assets/fonts/icons/undo.svg
@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 44.1 (41455) - http://www.bohemiancoding.com/sketch -->
+    <title>undo</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard-4" transform="translate(-180.000000, -115.000000)" fill="#333333">
+            <g id="4" transform="translate(180.000000, 115.000000)">
+                <path d="M10,19 C10.5522847,19 11,19.4477153 11,20 C11,20.5522847 10.5522847,21 10,21 C9.99404288,21 9.98809793,20.9999479 9.98216558,20.9998442 C5.01980239,20.990358 1,16.9646166 1,12 C1,7.02943725 5.02943725,3 10,3 C14.9705627,3 19,7.02943725 19,12 L17,12 C17,8.13400675 13.8659932,5 10,5 C6.13400675,5 3,8.13400675 3,12 C3,15.8659932 6.13400675,19 10,19 Z M14,12 L22,12 L18,16 L14,12 Z" id="Arrow" transform="translate(11.500000, 12.000000) scale(-1, 1) translate(-11.500000, -12.000000) "></path>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/application/assets/fonts/icons/upload.svg b/application/assets/fonts/icons/upload.svg
new file mode 100644
index 00000000..a4f9ea1b
--- /dev/null
+++ b/application/assets/fonts/icons/upload.svg
@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 44.1 (41455) - http://www.bohemiancoding.com/sketch -->
+    <title>upload</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round">
+        <g id="Artboard-4" transform="translate(-224.000000, -291.000000)" stroke="#333333" stroke-width="2">
+            <g id="85" transform="translate(224.000000, 291.000000)">
+                <path d="M12,9 L12,21" id="Line"></path>
+                <polyline id="Head" stroke-linejoin="round" transform="translate(12.000000, 10.000000) scale(1, -1) translate(-12.000000, -10.000000) " points="18 7 12 13 6 7"></polyline>
+                <path d="M3,3 L3,5.05908592 C3,5.6127331 3.44494889,6.06155281 3.99340349,6.06155281 L20.0067018,6.06155281 C20.5553434,6.06155281 21.0001052,5.60981015 21.0001051,5.05908592 L21.0001049,3" id="Container" stroke-linejoin="round" transform="translate(12.000053, 4.530776) scale(1, -1) translate(-12.000053, -4.530776) "></path>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/application/assets/fonts/icons/user-add.svg b/application/assets/fonts/icons/user-add.svg
new file mode 100644
index 00000000..bb8e1522
--- /dev/null
+++ b/application/assets/fonts/icons/user-add.svg
@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 44.1 (41455) - http://www.bohemiancoding.com/sketch -->
+    <title>user-add</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard-4" transform="translate(-136.000000, -863.000000)">
+            <g id="343" transform="translate(136.000000, 863.000000)">
+                <path d="M14.2571621,15 L7,15 C4.20063223,15 2.390348,16.1679253 1.5255785,18.0896353 C1.07423388,19.0926234 0.949016905,20.1108713 0.995546634,20.9698816 C0.998604759,21.0263393 1.0014872,21.0632937 1.00496281,21.0995037 C1.0599172,21.6490476 1.54995985,22.0499916 2.09950372,21.9950372 C2.64904758,21.9400828 3.04999158,21.4500401 2.99503719,20.9004963 C2.99555422,20.9071205 2.99399879,20.8871791 2.99261905,20.8617069 C2.96185588,20.2937714 3.05021139,19.575276 3.34942151,18.9103647 C3.890902,17.7070747 4.98686778,17 7,17 L12.0070975,17 L13.2070325,17 C13.4170071,16.2576107 13.7789623,15.5790321 14.2571621,15 Z" id="Body" fill="#333333" fill-rule="nonzero"></path>
+                <path d="M19,18 L19,16.4976988 C19,16.2228273 18.7680664,16 18.5,16 C18.2238576,16 18,16.2148438 18,16.4976988 L18,18 L16.4976988,18 C16.2148438,18 16,18.2238576 16,18.5 C16,18.7680664 16.2228273,19 16.4976988,19 L18,19 L18,20.5023012 C18,20.7771727 18.2319336,21 18.5,21 C18.7761424,21 19,20.7851562 19,20.5023012 L19,19 L20.5023012,19 C20.7851562,19 21,18.7761424 21,18.5 C21,18.2319336 20.7771727,18 20.5023012,18 L19,18 Z M18.5,23 C16.0147186,23 14,20.9852814 14,18.5 C14,16.0147186 16.0147186,14 18.5,14 C20.9852814,14 23,16.0147186 23,18.5 C23,20.9852814 20.9852814,23 18.5,23 Z" id="Add" fill="#333333"></path>
+                <circle id="Head" stroke="#333333" stroke-width="2" cx="12" cy="8" r="5"></circle>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/application/assets/fonts/icons/user-delete.svg b/application/assets/fonts/icons/user-delete.svg
new file mode 100644
index 00000000..916ca95a
--- /dev/null
+++ b/application/assets/fonts/icons/user-delete.svg
@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 44.1 (41455) - http://www.bohemiancoding.com/sketch -->
+    <title>user-delete</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard-4" transform="translate(-268.000000, -1134.000000)">
+            <g id="Extras" transform="translate(48.000000, 1046.000000)">
+                <g id="delete-user" transform="translate(220.000000, 88.000000)">
+                    <path d="M14.2571621,15 L7,15 C4.20063223,15 2.390348,16.1679253 1.5255785,18.0896353 C1.07423388,19.0926234 0.949016905,20.1108713 0.995546634,20.9698816 C0.998604759,21.0263393 1.0014872,21.0632937 1.00496281,21.0995037 C1.0599172,21.6490476 1.54995985,22.0499916 2.09950372,21.9950372 C2.64904758,21.9400828 3.04999158,21.4500401 2.99503719,20.9004963 C2.99555422,20.9071205 2.99399879,20.8871791 2.99261905,20.8617069 C2.96185588,20.2937714 3.05021139,19.575276 3.34942151,18.9103647 C3.890902,17.7070747 4.98686778,17 7,17 L12.0070975,17 L13.2070325,17 C13.4170071,16.2576107 13.7789623,15.5790321 14.2571621,15 Z" id="Body" fill="#333333" fill-rule="nonzero"></path>
+                    <path d="M19.2071068,18.5 L20.2693942,17.4377126 C20.4694029,17.2377039 20.4630291,16.9274952 20.267767,16.732233 C20.0782154,16.5426815 19.7566508,16.5362424 19.5622874,16.7306058 L18.5,17.7928932 L17.4377126,16.7306058 C17.2377039,16.5305971 16.9274952,16.5369709 16.732233,16.732233 C16.5426815,16.9217846 16.5362424,17.2433492 16.7306058,17.4377126 L17.7928932,18.5 L16.7306058,19.5622874 C16.5305971,19.7622961 16.5369709,20.0725048 16.732233,20.267767 C16.9217846,20.4573185 17.2433492,20.4637576 17.4377126,20.2693942 L18.5,19.2071068 L19.5622874,20.2693942 C19.7622961,20.4694029 20.0725048,20.4630291 20.267767,20.267767 C20.4573185,20.0782154 20.4637576,19.7566508 20.2693942,19.5622874 L19.2071068,18.5 Z M18.5,23 C16.0147186,23 14,20.9852814 14,18.5 C14,16.0147186 16.0147186,14 18.5,14 C20.9852814,14 23,16.0147186 23,18.5 C23,20.9852814 20.9852814,23 18.5,23 Z" id="x" fill="#333333"></path>
+                    <circle id="Head" stroke="#333333" stroke-width="2" cx="12" cy="8" r="5"></circle>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/application/assets/fonts/icons/user-remove.svg b/application/assets/fonts/icons/user-remove.svg
new file mode 100644
index 00000000..115598f2
--- /dev/null
+++ b/application/assets/fonts/icons/user-remove.svg
@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 44.1 (41455) - http://www.bohemiancoding.com/sketch -->
+    <title>user-remove</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard-4" transform="translate(-312.000000, -1134.000000)">
+            <g id="Extras" transform="translate(48.000000, 1046.000000)">
+                <g id="remove-user" transform="translate(264.000000, 88.000000)">
+                    <path d="M14.2571621,15 L7,15 C4.20063223,15 2.390348,16.1679253 1.5255785,18.0896353 C1.07423388,19.0926234 0.949016905,20.1108713 0.995546634,20.9698816 C0.998604759,21.0263393 1.0014872,21.0632937 1.00496281,21.0995037 C1.0599172,21.6490476 1.54995985,22.0499916 2.09950372,21.9950372 C2.64904758,21.9400828 3.04999158,21.4500401 2.99503719,20.9004963 C2.99555422,20.9071205 2.99399879,20.8871791 2.99261905,20.8617069 C2.96185588,20.2937714 3.05021139,19.575276 3.34942151,18.9103647 C3.890902,17.7070747 4.98686778,17 7,17 L12.0070975,17 L13.2070325,17 C13.4170071,16.2576107 13.7789623,15.5790321 14.2571621,15 Z" id="Body" fill="#333333" fill-rule="nonzero"></path>
+                    <path d="M18.5,23 C16.0147186,23 14,20.9852814 14,18.5 C14,16.0147186 16.0147186,14 18.5,14 C20.9852814,14 23,16.0147186 23,18.5 C23,20.9852814 20.9852814,23 18.5,23 Z M16.4976988,19 L20.5023012,19 C20.7851562,19 21,18.7761424 21,18.5 C21,18.2319336 20.7771727,18 20.5023012,18 L16.4976988,18 C16.2148438,18 16,18.2238576 16,18.5 C16,18.7680664 16.2228273,19 16.4976988,19 Z" id="-" fill="#333333"></path>
+                    <circle id="Head" stroke="#333333" stroke-width="2" cx="12" cy="8" r="5"></circle>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/application/assets/fonts/icons/user.svg b/application/assets/fonts/icons/user.svg
new file mode 100644
index 00000000..fc546045
--- /dev/null
+++ b/application/assets/fonts/icons/user.svg
@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 44.1 (41455) - http://www.bohemiancoding.com/sketch -->
+    <title>user</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard-4" transform="translate(-532.000000, -159.000000)" stroke="#333333" stroke-width="2">
+            <g id="32" transform="translate(532.000000, 159.000000)">
+                <path d="M2,21 C2,21 1.5,16 7,16 C12.5,16 11.512498,16 17.006249,16 C22.5,16 22.0062485,21 22.0062485,21" id="Body" stroke-linecap="round" stroke-linejoin="round"></path>
+                <circle id="Head" cx="12" cy="8" r="5"></circle>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/application/assets/fonts/icons/users.svg b/application/assets/fonts/icons/users.svg
new file mode 100644
index 00000000..a004a751
--- /dev/null
+++ b/application/assets/fonts/icons/users.svg
@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 44.1 (41455) - http://www.bohemiancoding.com/sketch -->
+    <title>users</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard-4" transform="translate(-92.000000, -863.000000)">
+            <g id="342" transform="translate(92.000000, 863.000000)">
+                <path d="M8.27455269,11.9477557 C5.85692935,11.5963698 4,9.51503944 4,7 C4,4.23857625 6.23857625,2 9,2 C10.373942,2 11.6184509,2.55416948 12.5221996,3.45118158 C11.8469348,3.70680858 11.2215328,4.06387931 10.664592,4.50379553 C10.1883045,4.18555118 9.61582114,4 9,4 C7.34314575,4 6,5.34314575 6,7 C6,8.3069749 6.83577432,9.41874424 8.00202365,9.83000873 C8.00067709,9.88650926 8,9.94317556 8,10 C8,10.6759052 8.09579644,11.329436 8.27455269,11.9477557 Z M8.67363116,13 L5,13 C2.85717375,13 1.39436214,13.9752077 0.605572809,15.5527864 C0.148670182,16.4665917 -7.10542736e-14,17.3586127 -7.10542736e-14,18 C-7.10542736e-14,18.5522847 0.44771525,19 1,19 C1.55228475,19 2,18.5522847 2,18 C2,17.9269061 2.01176795,17.7621548 2.04889392,17.539399 C2.11167338,17.1627222 2.22417415,16.7877197 2.39442719,16.4472136 C2.85563786,15.5247923 3.64282625,15 5,15 L10.1010173,15 C9.51513298,14.4258795 9.02972955,13.7496048 8.67363116,13 Z" id="Behind" fill="#333333" fill-rule="nonzero"></path>
+                <path d="M7,21 C7,21 7,17 11,17 C15,17 14.9937515,17 19,17 C23.0062485,17 23.0062485,21 23.0062485,21" id="Body" stroke="#333333" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
+                <circle id="Head" stroke="#333333" stroke-width="2" cx="15" cy="10" r="4"></circle>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/application/assets/fonts/icons/video.svg b/application/assets/fonts/icons/video.svg
new file mode 100644
index 00000000..df9eaaa2
--- /dev/null
+++ b/application/assets/fonts/icons/video.svg
@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 44.1 (41455) - http://www.bohemiancoding.com/sketch -->
+    <title>video</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linejoin="round">
+        <g id="Artboard-4" transform="translate(-708.000000, -159.000000)" stroke="#333333" stroke-width="2">
+            <g id="36" transform="translate(708.000000, 159.000000)">
+                <rect id="Body" stroke-linecap="round" x="1" y="5" width="17" height="14" rx="1"></rect>
+                <polyline id="Lens" points="18 9.5 23 7 23 17 18 14.5"></polyline>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/application/assets/fonts/icons/vinyl.svg b/application/assets/fonts/icons/vinyl.svg
new file mode 100644
index 00000000..53eae87a
--- /dev/null
+++ b/application/assets/fonts/icons/vinyl.svg
@@ -0,0 +1,25 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 44.1 (41455) - http://www.bohemiancoding.com/sketch -->
+    <title>vinyl</title>
+    <desc>Created with Sketch.</desc>
+    <defs>
+        <linearGradient x1="6.68334961%" y1="4.94689941%" x2="93.1610107%" y2="94.2169189%" id="linearGradient-1">
+            <stop stop-color="#333333" stop-opacity="0" offset="0%"></stop>
+            <stop stop-color="#333333" stop-opacity="0" offset="28.0527827%"></stop>
+            <stop stop-color="#333333" offset="49.658143%"></stop>
+            <stop stop-color="#333333" stop-opacity="0" offset="70.1285382%"></stop>
+            <stop stop-color="#333333" stop-opacity="0" offset="100%"></stop>
+        </linearGradient>
+    </defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard-4" transform="translate(-664.000000, -423.000000)">
+            <g id="155" transform="translate(664.000000, 423.000000)">
+                <circle id="Base" stroke="#333333" stroke-width="2" cx="12" cy="12" r="10"></circle>
+                <circle id="Centre" fill="#333333" cx="12" cy="12" r="1"></circle>
+                <circle id="Label" fill="#333333" opacity="0.300000012" cx="12" cy="12" r="4"></circle>
+                <path d="M4,12 C4,7.581722 7.581722,4 12,4 C16.418278,4 20,7.581722 20,12 C20,16.418278 16.418278,20 12,20 C7.581722,20 4,16.418278 4,12 Z M19,12 C19,8.13400675 15.8659932,5 12,5 C8.13400675,5 5,8.13400675 5,12 C5,15.8659932 8.13400675,19 12,19 C15.8659932,19 19,15.8659932 19,12 Z M6,12 C6,8.6862915 8.6862915,6 12,6 C15.3137085,6 18,8.6862915 18,12 C18,15.3137085 15.3137085,18 12,18 C8.6862915,18 6,15.3137085 6,12 Z M17,12 C17,9.23857625 14.7614237,7 12,7 C9.23857625,7 7,9.23857625 7,12 C7,14.7614237 9.23857625,17 12,17 C14.7614237,17 17,14.7614237 17,12 Z" id="Grooves" fill="url(#linearGradient-1)" fill-rule="nonzero" opacity="0.5"></path>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/application/assets/fonts/icons/voicemail.svg b/application/assets/fonts/icons/voicemail.svg
new file mode 100644
index 00000000..3d80788c
--- /dev/null
+++ b/application/assets/fonts/icons/voicemail.svg
@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 44.1 (41455) - http://www.bohemiancoding.com/sketch -->
+    <title>voicemail</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard-4" transform="translate(-400.000000, -511.000000)">
+            <g id="189" transform="translate(400.000000, 511.000000)">
+                <path d="M5.5,16 C3.01471863,16 1,13.9852814 1,11.5 C1,9.01471863 3.01471863,7 5.5,7 C7.98528137,7 10,9.01471863 10,11.5 C10,13.9852814 7.98528137,16 5.5,16 Z M18.5,16 C16.0147186,16 14,13.9852814 14,11.5 C14,9.01471863 16.0147186,7 18.5,7 C20.9852814,7 23,9.01471863 23,11.5 C23,13.9852814 20.9852814,16 18.5,16 Z" id="Circles" stroke="#333333" stroke-width="2"></path>
+                <rect id="Line" fill="#333333" x="5.5" y="15" width="13" height="2"></rect>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/application/assets/fonts/icons/volume-down.svg b/application/assets/fonts/icons/volume-down.svg
new file mode 100644
index 00000000..fc08979c
--- /dev/null
+++ b/application/assets/fonts/icons/volume-down.svg
@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 44.1 (41455) - http://www.bohemiancoding.com/sketch -->
+    <title>volume-down</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round">
+        <g id="Artboard-4" transform="translate(-48.000000, -159.000000)" stroke="#333333" stroke-width="2">
+            <g id="21" transform="translate(48.000000, 159.000000)">
+                <path d="M2,8.99703014 C2,8.4463856 2.44335318,8 3.0093689,8 L6,8 L12,4 L12,20 L6,16 L3.0093689,16 C2.45190985,16 2,15.5469637 2,15.0029699 L2,8.99703014 Z" id="Speaker" stroke-linejoin="round"></path>
+                <path d="M16,8 C16,8 18,9.5 18,12 C18,14.5 16,16 16,16" id="Sound-Wave-1"></path>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/application/assets/fonts/icons/volume-mute.svg b/application/assets/fonts/icons/volume-mute.svg
new file mode 100644
index 00000000..f7efe259
--- /dev/null
+++ b/application/assets/fonts/icons/volume-mute.svg
@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 44.1 (41455) - http://www.bohemiancoding.com/sketch -->
+    <title>volume-mute</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round">
+        <g id="Artboard-4" transform="translate(-92.000000, -159.000000)" stroke="#333333" stroke-width="2">
+            <g id="22" transform="translate(92.000000, 159.000000)">
+                <path d="M2,8.99703014 C2,8.4463856 2.44335318,8 3.0093689,8 L6,8 L12,4 L12,20 L6,16 L3.0093689,16 C2.45190985,16 2,15.5469637 2,15.0029699 L2,8.99703014 Z" id="Speaker" stroke-linejoin="round"></path>
+                <path d="M16,15 L22,9" id="Path-28"></path>
+                <path d="M16.0000002,15 L22.0249378,9" id="Path-28" transform="translate(19.012469, 12.000000) scale(-1, 1) translate(-19.012469, -12.000000) "></path>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/application/assets/fonts/icons/volume-up.svg b/application/assets/fonts/icons/volume-up.svg
new file mode 100644
index 00000000..e7ed3d28
--- /dev/null
+++ b/application/assets/fonts/icons/volume-up.svg
@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 44.1 (41455) - http://www.bohemiancoding.com/sketch -->
+    <title>volume-up</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round">
+        <g id="Artboard-4" transform="translate(-884.000000, -115.000000)" stroke="#333333" stroke-width="2">
+            <g id="20" transform="translate(884.000000, 115.000000)">
+                <path d="M2,8.99703014 C2,8.4463856 2.44335318,8 3.0093689,8 L6,8 L12,4 L12,20 L6,16 L3.0093689,16 C2.45190985,16 2,15.5469637 2,15.0029699 L2,8.99703014 Z" id="Speaker" stroke-linejoin="round"></path>
+                <path d="M16,8 C16,8 18,9.5 18,12 C18,14.5 16,16 16,16" id="Sound-Wave-1"></path>
+                <path d="M16.0734116,20 C19.3093571,18.9698098 22.0000001,15.5773201 22.0000001,12 C22.0000001,8.43619491 19.2903975,5.04132966 16.0734116,4" id="Sound-Wave-2"></path>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/application/assets/fonts/icons/wallet-2.svg b/application/assets/fonts/icons/wallet-2.svg
new file mode 100644
index 00000000..76293363
--- /dev/null
+++ b/application/assets/fonts/icons/wallet-2.svg
@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 44.1 (41455) - http://www.bohemiancoding.com/sketch -->
+    <title>wallet-2</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard-4" transform="translate(-92.000000, -379.000000)">
+            <g id="121" transform="translate(92.000000, 379.000000)">
+                <path d="M16,7 L20.9940809,7 C22.1019194,7 23,7.89706013 23,9.00585866 L23,18.9941413 C23,20.1019465 22.1103261,21 21.008845,21 L2.991155,21 C1.89147046,21 1,20.1029399 1,18.9941413 L1,9.00585866 L1,9.00585866 C1,7.89805351 1.88655484,7 3.00591905,7 L8,7" id="Body" stroke="#333333" stroke-width="2"></path>
+                <path d="M16.5,5.5 L17,6 L17,5 L16.5,5.5 Z M15,4 L19.5095215,4 C20.3368834,4 21,4.68353133 21,5.5 L21,7 L15,7 L15,4 Z M7.5,5.5 L7,5 L7,6 L7.5,5.5 Z M9,7 L2,7 L2,5.5 C2,4.67226765 2.66175899,4 3.49769878,4 L9,4 L9,7 Z" id="Fold" stroke="#333333" stroke-width="2"></path>
+                <path d="M9,3 L15,3 L15,10.9942017 C15,12.6542582 13.6534829,14 12,14 L12,14 C10.3431458,14 9,12.6511841 9,10.9942017 L9,3 Z" id="Clip" stroke="#333333" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
+                <circle id="Popper" fill="#333333" cx="12" cy="11" r="1"></circle>
+                <rect id="Crease" fill="#333333" opacity="0.5" x="10" y="4" width="4" height="3"></rect>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/application/assets/fonts/icons/wallet.svg b/application/assets/fonts/icons/wallet.svg
new file mode 100644
index 00000000..612fc039
--- /dev/null
+++ b/application/assets/fonts/icons/wallet.svg
@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 44.1 (41455) - http://www.bohemiancoding.com/sketch -->
+    <title>wallet</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard-4" transform="translate(-48.000000, -379.000000)">
+            <g id="120" transform="translate(48.000000, 379.000000)">
+                <path d="M21,17.9997559 L21,18.9987937 C21,20.1040294 20.1090746,21 19.0025781,21 L3.99742191,21 C2.89427625,21 2,20.1029399 2,18.9941413 L2,7 L2,7 L19.0025781,7 C20.1057238,7 21,7.9037256 21,8.99456116 L21,10.0673828" id="Body" stroke="#333333" stroke-width="2"></path>
+                <path d="M14,14 C14,12.3431458 15.3390201,11 17.0016655,11 L22,11 L22,17 L17.0016655,17 C15.3438914,17 14,15.6534829 14,14 L14,14 Z" id="Clip" stroke="#333333" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
+                <circle id="Popper" fill="#333333" cx="17" cy="14" r="1"></circle>
+                <path d="M2,5.5 C2,4.6733323 2.67213849,4 3.4963932,4 L18.5036068,4 C19.3314489,4 20,4.68092191 20,5.5 L20,7 L3.4963932,7 C2.6685511,7 2,6.31907809 2,5.5 Z" id="Fold" stroke="#333333" stroke-width="2"></path>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/application/assets/fonts/icons/watch-apple.svg b/application/assets/fonts/icons/watch-apple.svg
new file mode 100644
index 00000000..ad240761
--- /dev/null
+++ b/application/assets/fonts/icons/watch-apple.svg
@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 44.1 (41455) - http://www.bohemiancoding.com/sketch -->
+    <title>watch-apple</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard-4" transform="translate(-664.000000, -247.000000)" stroke="#333333">
+            <g id="75" transform="translate(664.000000, 247.000000)">
+                <path d="M8.80243218,1.9878391 C8.91154587,1.44227063 9.45097518,1 9.99077797,1 L14.009222,1 C14.5564136,1 15.0887433,1.44371665 15.1975678,1.9878391 L16,6 L8,6 L8.80243218,1.9878391 Z M8.80243218,22.0121609 L8,18 L16,18 L15.1975678,22.0121609 C15.0887433,22.5562834 14.5564136,23 14.009222,23 L9.99077797,23 C9.45097518,23 8.91154587,22.5577294 8.80243218,22.0121609 Z" id="Strap" stroke-width="2" stroke-linejoin="round"></path>
+                <rect id="Body" stroke-width="2" x="6" y="6" width="12" height="12" rx="3"></rect>
+                <rect id="Screen" opacity="0.5" x="8.5" y="8.5" width="7" height="7" rx="1"></rect>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/application/assets/fonts/icons/watch-classic.svg b/application/assets/fonts/icons/watch-classic.svg
new file mode 100644
index 00000000..f71c9bf7
--- /dev/null
+++ b/application/assets/fonts/icons/watch-classic.svg
@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 44.1 (41455) - http://www.bohemiancoding.com/sketch -->
+    <title>watch-classic</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard-4" transform="translate(-752.000000, -247.000000)" stroke="#333333" stroke-width="2">
+            <g id="77" transform="translate(752.000000, 247.000000)">
+                <path d="M8.39241339,18 L8,18 L8.80243218,22.0121609 C8.91154587,22.5577294 9.45097518,23 9.99077797,23 L14.009222,23 C14.5564136,23 15.0887433,22.5562834 15.1975678,22.0121609 L16,18 L15.6075866,18 C14.5540438,18.6348198 13.3196681,19 12,19 C10.6803319,19 9.44595619,18.6348198 8.39241339,18 Z M15.6075866,6 L16,6 L15.1975678,1.9878391 C15.0887433,1.44371665 14.5564136,1 14.009222,1 L9.99077797,1 C9.45097518,1 8.91154587,1.44227063 8.80243218,1.9878391 L8,6 L8.39241339,6 C9.44595619,5.36518017 10.6803319,5 12,5 C13.3196681,5 14.5540438,5.36518017 15.6075866,6 Z" id="Strap" stroke-linejoin="round"></path>
+                <circle id="Body" cx="12" cy="12" r="7"></circle>
+                <polyline id="Hands" opacity="0.5" stroke-linecap="round" stroke-linejoin="round" points="12 8 12 12 15 12"></polyline>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/application/assets/fonts/icons/watch-smart.svg b/application/assets/fonts/icons/watch-smart.svg
new file mode 100644
index 00000000..1c2c4262
--- /dev/null
+++ b/application/assets/fonts/icons/watch-smart.svg
@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 44.1 (41455) - http://www.bohemiancoding.com/sketch -->
+    <title>watch-smart</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard-4" transform="translate(-708.000000, -247.000000)" stroke="#333333">
+            <g id="76" transform="translate(708.000000, 247.000000)">
+                <path d="M8.39241339,18 L8,18 L8.80243218,22.0121609 C8.91154587,22.5577294 9.45097518,23 9.99077797,23 L14.009222,23 C14.5564136,23 15.0887433,22.5562834 15.1975678,22.0121609 L16,18 L15.6075866,18 C14.5540438,18.6348198 13.3196681,19 12,19 C10.6803319,19 9.44595619,18.6348198 8.39241339,18 Z M15.6075866,6 L16,6 L15.1975678,1.9878391 C15.0887433,1.44371665 14.5564136,1 14.009222,1 L9.99077797,1 C9.45097518,1 8.91154587,1.44227063 8.80243218,1.9878391 L8,6 L8.39241339,6 C9.44595619,5.36518017 10.6803319,5 12,5 C13.3196681,5 14.5540438,5.36518017 15.6075866,6 Z" id="Strap" stroke-width="2" stroke-linejoin="round"></path>
+                <circle id="Body" stroke-width="2" cx="12" cy="12" r="7"></circle>
+                <circle id="Screen" opacity="0.5" cx="12" cy="12" r="4.5"></circle>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/application/assets/fonts/icons/water-drop.svg b/application/assets/fonts/icons/water-drop.svg
new file mode 100644
index 00000000..20ad183b
--- /dev/null
+++ b/application/assets/fonts/icons/water-drop.svg
@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 44.1 (41455) - http://www.bohemiancoding.com/sketch -->
+    <title>water-drop</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
+        <g id="Artboard-4" transform="translate(-488.000000, -819.000000)" stroke="#333333" stroke-width="2">
+            <g id="331" transform="translate(488.000000, 819.000000)">
+                <path d="M12,22 C15.8659932,22 19,18.8659932 19,15 C19,10 12,2 12,2 C12,2 5,10 5,15 C5,18.8659932 8.13400675,22 12,22 Z" id="Drop"></path>
+                <path d="M12,19 L12,19 C14.209139,19 16,17.209139 16,15" id="Highlight"></path>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/application/assets/fonts/icons/wifi-01.svg b/application/assets/fonts/icons/wifi-01.svg
new file mode 100644
index 00000000..8df0ae46
--- /dev/null
+++ b/application/assets/fonts/icons/wifi-01.svg
@@ -0,0 +1,19 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 44.1 (41455) - http://www.bohemiancoding.com/sketch -->
+    <title>wifi-01</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard-4" transform="translate(-356.000000, -1090.000000)">
+            <g id="Extras" transform="translate(48.000000, 1046.000000)">
+                <g id="wifi-1" transform="translate(308.000000, 44.000000)">
+                    <circle id="0" fill="#333333" cx="12" cy="19.5" r="1.5"></circle>
+                    <path d="M16.2374836,15.7522084 C15.1521071,14.6694493 13.6542327,14 12,14 C10.3371761,14 8.83233881,14.6764209 7.74563922,15.7691117" id="1" stroke="#333333" stroke-width="2" opacity="0.400000006" stroke-linecap="round" stroke-linejoin="round"></path>
+                    <path d="M19.7973964,12.2410945 C17.805288,10.2391654 15.0473553,9 12,9 C8.95750451,9 6.20350923,10.2352162 4.21214033,12.2315225" id="2" stroke="#333333" stroke-width="2" opacity="0.300000012" stroke-linecap="round" stroke-linejoin="round"></path>
+                    <path d="M23.0164048,8.39655662 C20.1474472,5.67186502 16.2689661,4 12,4 C7.7372404,4 3.86383121,5.66700723 0.996114792,8.38467932" id="3" stroke="#333333" stroke-width="2" opacity="0.200000003" stroke-linecap="round" stroke-linejoin="round"></path>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/application/assets/fonts/icons/wifi-02.svg b/application/assets/fonts/icons/wifi-02.svg
new file mode 100644
index 00000000..0afb2b9f
--- /dev/null
+++ b/application/assets/fonts/icons/wifi-02.svg
@@ -0,0 +1,19 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 44.1 (41455) - http://www.bohemiancoding.com/sketch -->
+    <title>wifi-02</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard-4" transform="translate(-312.000000, -1090.000000)">
+            <g id="Extras" transform="translate(48.000000, 1046.000000)">
+                <g id="wifi-2" transform="translate(264.000000, 44.000000)">
+                    <circle id="0" fill="#333333" cx="12" cy="19.5" r="1.5"></circle>
+                    <path d="M16.2374836,15.7522084 C15.1521071,14.6694493 13.6542327,14 12,14 C10.3371761,14 8.83233881,14.6764209 7.74563922,15.7691117" id="1" stroke="#333333" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
+                    <path d="M19.7973964,12.2410945 C17.805288,10.2391654 15.0473553,9 12,9 C8.95750451,9 6.20350923,10.2352162 4.21214033,12.2315225" id="3" stroke="#333333" stroke-width="2" opacity="0.300000012" stroke-linecap="round" stroke-linejoin="round"></path>
+                    <path d="M23.0164048,8.39655662 C20.1474472,5.67186502 16.2689661,4 12,4 C7.7372404,4 3.86383121,5.66700723 0.996114792,8.38467932" id="2" stroke="#333333" stroke-width="2" opacity="0.200000003" stroke-linecap="round" stroke-linejoin="round"></path>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/application/assets/fonts/icons/wifi-03.svg b/application/assets/fonts/icons/wifi-03.svg
new file mode 100644
index 00000000..8ed42cd7
--- /dev/null
+++ b/application/assets/fonts/icons/wifi-03.svg
@@ -0,0 +1,19 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 44.1 (41455) - http://www.bohemiancoding.com/sketch -->
+    <title>wifi-03</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard-4" transform="translate(-268.000000, -1090.000000)">
+            <g id="Extras" transform="translate(48.000000, 1046.000000)">
+                <g id="wifi-3" transform="translate(220.000000, 44.000000)">
+                    <circle id="0" fill="#333333" cx="12" cy="19.5" r="1.5"></circle>
+                    <path d="M16.2374836,15.7522084 C15.1521071,14.6694493 13.6542327,14 12,14 C10.3371761,14 8.83233881,14.6764209 7.74563922,15.7691117" id="1" stroke="#333333" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
+                    <path d="M19.7973964,12.2410945 C17.805288,10.2391654 15.0473553,9 12,9 C8.95750451,9 6.20350923,10.2352162 4.21214033,12.2315225" id="2" stroke="#333333" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
+                    <path d="M23.0164048,8.39655662 C20.1474472,5.67186502 16.2689661,4 12,4 C7.7372404,4 3.86383121,5.66700723 0.996114792,8.38467932" id="3" stroke="#333333" stroke-width="2" opacity="0.200000003" stroke-linecap="round" stroke-linejoin="round"></path>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/application/assets/fonts/icons/wifi-04.svg b/application/assets/fonts/icons/wifi-04.svg
new file mode 100644
index 00000000..e3b1f44a
--- /dev/null
+++ b/application/assets/fonts/icons/wifi-04.svg
@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 44.1 (41455) - http://www.bohemiancoding.com/sketch -->
+    <title>wifi-04</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard-4" transform="translate(-620.000000, -247.000000)">
+            <g id="74" transform="translate(620.000000, 247.000000)">
+                <circle id="o" fill="#333333" cx="12" cy="19.5" r="1.5"></circle>
+                <path d="M16.2374836,15.7522084 C15.1521071,14.6694493 13.6542327,14 12,14 C10.3371761,14 8.83233881,14.6764209 7.74563922,15.7691117" id="1" stroke="#333333" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
+                <path d="M19.7973964,12.2410945 C17.805288,10.2391654 15.0473553,9 12,9 C8.95750451,9 6.20350923,10.2352162 4.21214033,12.2315225" id="2" stroke="#333333" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
+                <path d="M23.0164048,8.39655662 C20.1474472,5.67186502 16.2689661,4 12,4 C7.7372404,4 3.86383121,5.66700723 0.996114792,8.38467932" id="3" stroke="#333333" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/application/assets/fonts/icons/wifi-error.svg b/application/assets/fonts/icons/wifi-error.svg
new file mode 100644
index 00000000..21daa2e2
--- /dev/null
+++ b/application/assets/fonts/icons/wifi-error.svg
@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 44.1 (41455) - http://www.bohemiancoding.com/sketch -->
+    <title>wifi-error</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard-4" transform="translate(-620.000000, -511.000000)">
+            <g id="194" transform="translate(620.000000, 511.000000)">
+                <circle id="0" fill="#333333" cx="12" cy="19.5" r="1.5"></circle>
+                <path d="M16.2374836,15.7522084 C15.1521071,14.6694493 13.6542327,14 12,14 C10.3371761,14 8.83233881,14.6764209 7.74563922,15.7691117" id="1" stroke="#333333" stroke-width="2" opacity="0.200000003" stroke-linecap="round" stroke-linejoin="round"></path>
+                <path d="M19.7973964,12.2410945 C17.805288,10.2391654 15.0473553,9 12,9 C8.95750451,9 6.20350923,10.2352162 4.21214033,12.2315225" id="2" stroke="#333333" stroke-width="2" opacity="0.200000003" stroke-linecap="round" stroke-linejoin="round"></path>
+                <path d="M23.0164048,8.39655662 C20.1474472,5.67186502 16.2689661,4 12,4 C7.7372404,4 3.86383121,5.66700723 0.996114792,8.38467932" id="3" stroke="#333333" stroke-width="2" opacity="0.200000003" stroke-linecap="round" stroke-linejoin="round"></path>
+                <path d="M12,15 C11.4477153,15 10.9240398,14.5556326 10.8329211,14.0225875 L9.16707888,4.27740028 C9.07480376,3.73759027 9.43963623,3.20176057 9.97576904,3.11856312 C9.97576904,3.11856312 10,3 12,3 C14,3 14.024231,3.11856312 14.024231,3.11856312 C14.5631333,3.2187612 14.9240398,3.74435519 14.8329211,4.27740028 L13.1670789,14.0225875 C13.0748038,14.5623975 12.5561352,15 12,15 L12,15 Z" id="Exclamation-Point" fill="#333333"></path>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/application/assets/fonts/icons/wind.svg b/application/assets/fonts/icons/wind.svg
new file mode 100644
index 00000000..e9f6001f
--- /dev/null
+++ b/application/assets/fonts/icons/wind.svg
@@ -0,0 +1,19 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 44.1 (41455) - http://www.bohemiancoding.com/sketch -->
+    <title>wind</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round">
+        <g id="Artboard-4" transform="translate(-576.000000, -819.000000)" stroke="#333333" stroke-width="2">
+            <g id="333" transform="translate(576.000000, 819.000000)">
+                <path d="M2,10 L11,10" id="Path-264"></path>
+                <path d="M17.2806829,16.0223426 C17.6295596,16.6078012 18.2689783,17 19,17 C20.1045695,17 21,16.1045695 21,15 C21,13.8954305 20.1045695,13 19,13 L5,13" id="Oval-185"></path>
+                <path d="M9.28068294,19.0223426 C9.62955958,19.6078012 10.2689783,20 11,20 C12.1045695,20 13,19.1045695 13,18 C13,16.8954305 12.1045695,16 11,16 L3,16" id="Oval-185"></path>
+                <path d="M14,10 L18,10" id="Path-264"></path>
+                <path d="M21,10 L22,10" id="Path-264"></path>
+                <path d="M4,7 L17,7 C18.1045695,7 19,6.1045695 19,5 C19,3.8954305 18.1045695,3 17,3 C16.2489103,3 15.594522,3.41402768 15.2526119,4.02630619" id="Oval-186"></path>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/application/assets/fonts/icons/window.svg b/application/assets/fonts/icons/window.svg
new file mode 100644
index 00000000..d70ec947
--- /dev/null
+++ b/application/assets/fonts/icons/window.svg
@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 44.1 (41455) - http://www.bohemiancoding.com/sketch -->
+    <title>window</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard-4" transform="translate(-796.000000, -203.000000)">
+            <g id="58" transform="translate(796.000000, 203.000000)">
+                <rect id="Window" stroke="#333333" stroke-width="2" x="1" y="3" width="22" height="18" rx="1"></rect>
+                <rect id="Title" fill="#333333" x="1" y="7" width="22" height="1"></rect>
+                <path d="M3.5,6 C3.22385763,6 3,5.77614237 3,5.5 C3,5.22385763 3.22385763,5 3.5,5 C3.77614237,5 4,5.22385763 4,5.5 C4,5.77614237 3.77614237,6 3.5,6 Z M5.5,6 C5.22385763,6 5,5.77614237 5,5.5 C5,5.22385763 5.22385763,5 5.5,5 C5.77614237,5 6,5.22385763 6,5.5 C6,5.77614237 5.77614237,6 5.5,6 Z M7.5,6 C7.22385763,6 7,5.77614237 7,5.5 C7,5.22385763 7.22385763,5 7.5,5 C7.77614237,5 8,5.22385763 8,5.5 C8,5.77614237 7.77614237,6 7.5,6 Z" id="Controls" fill="#333333"></path>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/application/assets/fonts/icons/witch-hat.svg b/application/assets/fonts/icons/witch-hat.svg
new file mode 100644
index 00000000..1d24a07b
--- /dev/null
+++ b/application/assets/fonts/icons/witch-hat.svg
@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 44.1 (41455) - http://www.bohemiancoding.com/sketch -->
+    <title>witch-hat</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard-4" transform="translate(-444.000000, -467.000000)" stroke="#333333">
+            <g id="170" transform="translate(444.000000, 467.000000)">
+                <path d="M4.00697389,18.6259534 C2.14300376,18.9842742 1,19.4678677 1,20 C1,21.1045695 5.92486775,22 12,22 L12,22 C18.0751322,22 23,21.1045695 23,20 C23,19.4713519 21.8719151,18.990609 20.0295469,18.6330079" id="Rim" stroke-width="2" stroke-linecap="round"></path>
+                <polyline id="Hat" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" points="2 20 4 20 12 2 20 20 22 20"></polyline>
+                <path d="M6,16 C6,16 6.73021321,16.7232613 10.021147,16.9395921 M14.0465686,16.9356599 C17.2853567,16.7146433 18,16 18,16" id="Strap" stroke-width="3"></path>
+                <rect id="Buckle" stroke-width="2" x="10" y="15" width="4" height="4" rx="1"></rect>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/application/assets/fonts/icons/wooly-hat.svg b/application/assets/fonts/icons/wooly-hat.svg
new file mode 100644
index 00000000..1f4ec9e1
--- /dev/null
+++ b/application/assets/fonts/icons/wooly-hat.svg
@@ -0,0 +1,20 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 44.1 (41455) - http://www.bohemiancoding.com/sketch -->
+    <title>wooly-hat</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard-4" transform="translate(-488.000000, -555.000000)" stroke="#333333">
+            <g id="211" transform="translate(488.000000, 555.000000)">
+                <rect id="Rim" stroke-width="2" x="2" y="17" width="20" height="5" rx="2"></rect>
+                <path d="M10.0079806,7.22980908 C5.54848439,8.32383562 4,13.1123115 4,17 L20,17 L20,17 C20,13.1177952 18.4558809,8.33734243 14.0108728,7.2344606" id="Hat" stroke-width="2"></path>
+                <path d="M11.5,8 C11.5,8 11,8 10.5,11.5 C10,15 10,18 10,18" id="Path-154" opacity="0.5"></path>
+                <path d="M14,8 C14,8 13.5,8 13,11.5 C12.5,15 12.5,17 12.5,17" id="Path-154" opacity="0.5" transform="translate(13.250000, 12.500000) scale(-1, 1) translate(-13.250000, -12.500000) "></path>
+                <path d="M13.5,7.5 C13.5,7.5 15,8.5 16,11.5 C17,14.5 17,17 17,17" id="Path-155" opacity="0.5"></path>
+                <path d="M7,7.5 C7,7.5 8.5,8.5 9.5,11.5 C10.5,14.5 10.5,17 10.5,17" id="Path-155" opacity="0.5" transform="translate(8.750000, 12.250000) scale(-1, 1) translate(-8.750000, -12.250000) "></path>
+                <circle id="Bobble" stroke-width="2" cx="12" cy="5" r="3"></circle>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/application/assets/fonts/icons/wreath.svg b/application/assets/fonts/icons/wreath.svg
new file mode 100644
index 00000000..7df454ec
--- /dev/null
+++ b/application/assets/fonts/icons/wreath.svg
@@ -0,0 +1,19 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 44.1 (41455) - http://www.bohemiancoding.com/sketch -->
+    <title>wreath</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard-4" transform="translate(-312.000000, -555.000000)">
+            <g id="207" transform="translate(312.000000, 555.000000)">
+                <path d="M19.6816765,15.6920188 C20.5179645,14.3257866 21,12.719186 21,11 C21,9.95546497 20.5,9 20,8 C19.5,7 19.5669644,6.00530036 18.8593651,5.17313384 C17.8499725,3.98604564 16,3.5 15,3 C14,2.5 13.0677912,2 12,2 C10.9413063,2 9.94346255,2.66424304 9,3 C8.05653745,3.33575696 6.16593141,3.97231386 5.15267701,5.15900119 C4.43750165,5.99658901 4.37106609,6.93891883 4,8 C3.62893391,9.06108117 3,9.95857558 3,11 C3,12.6967749 3.46954988,14.2838805 4.28579907,15.6384663" id="Outer" stroke="#333333" stroke-width="2"></path>
+                <path d="M12,15 C12.5840571,15 12.9997815,14.7249901 13.5,14.5 C14.0002185,14.2750099 14.4796602,14.1748499 14.818677,13.838144 C15.186751,13.4725789 15.2956884,12.9854612 15.5,12.5 C15.7043116,12.0145388 16,11.54977 16,11 C16,10.6552591 15.582007,9.81915276 15.5,9.5 C15.417993,9.18084724 15.3362011,8.68641672 14.8484269,8.19171421 C14.4902843,7.82848456 13.9748326,7.70565915 13.5,7.5 C13.0251674,7.29434085 12.5643788,7 12,7 C11.4325545,7 10.9889891,7.28694517 10.5,7.5 C10.0110109,7.71305483 9.54424849,7.80544116 9.19782594,8.14555976 C8.82866661,8.5080014 8.70701879,9.01759759 8.5,9.5 C8.29298121,9.98240241 8,10.4403496 8,11 C8,11.5757115 8.2810416,12.0053961 8.5,12.5 C8.7189584,12.9946039 8.81643691,13.4694282 9.1558736,13.8126408 C9.5480009,14.2091301 9.97098346,14.2943916 10.5,14.5 C11.0290165,14.7056084 11.4891246,15 12,15 Z" id="Inner" stroke="#333333" stroke-width="2"></path>
+                <path d="M14,17.5 L18.1508441,15.7704816 C19.1721047,15.3449564 20,15.8867064 20,16.9981014 L20,21.0018986 C20,22.1054196 19.1657257,22.6523857 18.1508441,22.2295184 L14,20.5" id="Right-Bow" stroke="#333333" stroke-width="2" stroke-linejoin="round"></path>
+                <path d="M4,17.5 L8.15084407,15.7468944 C9.17210469,15.3155658 10,15.8563903 10,16.972522 L10,20.993383 C10,22.101607 9.16572571,22.6523857 8.15084407,22.2295184 L4,20.5" id="Left-Bow" stroke="#333333" stroke-width="2" stroke-linejoin="round" transform="translate(7.000000, 18.985279) scale(-1, 1) translate(-7.000000, -18.985279) "></path>
+                <path d="M10,18.4989566 C10,17.9472481 10.430191,17.3633728 10.9578888,17.2091479 C10.9578888,17.2091479 11.5,17 12,17 C12.5,17 13.0421112,17.2091479 13.0421112,17.2091479 C13.5711386,17.3697811 14,17.9426603 14,18.4989566 L14,19.5010434 C14,20.0527519 13.569809,20.6366272 13.0421112,20.7908521 C13.0421112,20.7908521 12.5,21 12,21 C11.5,21 10.9578888,20.7908521 10.9578888,20.7908521 C10.4288614,20.6302189 10,20.0573397 10,19.5010434 L10,18.4989566 Z" id="Bow-Middle" stroke="#333333" stroke-width="2"></path>
+                <path d="M11,4.5 C11,3.94771525 11.4438648,3.5 12,3.5 C12.5522847,3.5 13,3.94386482 13,4.5 C13,5.05228475 12.5561352,5.5 12,5.5 C11.4477153,5.5 11,5.05613518 11,4.5 Z M15.5,6.5 C15.5,5.94771525 15.9438648,5.5 16.5,5.5 C17.0522847,5.5 17.5,5.94386482 17.5,6.5 C17.5,7.05228475 17.0561352,7.5 16.5,7.5 C15.9477153,7.5 15.5,7.05613518 15.5,6.5 Z M6.5,6.5 C6.5,5.94771525 6.94386482,5.5 7.5,5.5 C8.05228475,5.5 8.5,5.94386482 8.5,6.5 C8.5,7.05228475 8.05613518,7.5 7.5,7.5 C6.94771525,7.5 6.5,7.05613518 6.5,6.5 Z M15.5,15.5 C15.5,14.9477153 15.9438648,14.5 16.5,14.5 C17.0522847,14.5 17.5,14.9438648 17.5,15.5 C17.5,16.0522847 17.0561352,16.5 16.5,16.5 C15.9477153,16.5 15.5,16.0561352 15.5,15.5 Z M6.5,15.5 C6.5,14.9477153 6.94386482,14.5 7.5,14.5 C8.05228475,14.5 8.5,14.9438648 8.5,15.5 C8.5,16.0522847 8.05613518,16.5 7.5,16.5 C6.94771525,16.5 6.5,16.0561352 6.5,15.5 Z M4.5,11 C4.5,10.4477153 4.94386482,10 5.5,10 C6.05228475,10 6.5,10.4438648 6.5,11 C6.5,11.5522847 6.05613518,12 5.5,12 C4.94771525,12 4.5,11.5561352 4.5,11 Z M17.5,11 C17.5,10.4477153 17.9438648,10 18.5,10 C19.0522847,10 19.5,10.4438648 19.5,11 C19.5,11.5522847 19.0561352,12 18.5,12 C17.9477153,12 17.5,11.5561352 17.5,11 Z" id="Deocrations" fill="#333333" opacity="0.300000012"></path>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/application/assets/fonts/icons/wrench.svg b/application/assets/fonts/icons/wrench.svg
new file mode 100644
index 00000000..0c0b54c5
--- /dev/null
+++ b/application/assets/fonts/icons/wrench.svg
@@ -0,0 +1,20 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 44.1 (41455) - http://www.bohemiancoding.com/sketch -->
+    <title>wrench</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard-4" transform="translate(-796.000000, -599.000000)">
+            <g id="238" transform="translate(794.000000, 598.000000)">
+                <g id="wrench" transform="translate(13.427934, 13.607927) rotate(-315.000000) translate(-13.427934, -13.607927) translate(8.427934, 0.607927)">
+                    <g>
+                        <path d="M3,-4.44028495e-14 C1.23409522,0.771556622 0,2.53363728 0,4.58395631 C0,7.34538006 2.23857625,9.58395631 5,9.58395631 C7.76142375,9.58395631 10,7.34538006 10,4.58395631 C10,2.53363728 8.76590478,0.771556622 7,-4.41530493e-14 L7,4.00922203 C7,4.55641359 6.55664682,5 5.9906311,5 L5,5 C3.8954305,5 3,4.10173938 3,3.00208688 L3,-4.6598142e-14 Z" id="Combined-Shape" stroke="#333333" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
+                        <path d="M3,10 L7,10 L7.81190765,22.1786147 C7.91578819,23.7368228 6.74220338,25 5.17569184,25 L4.82430816,25 C3.26448583,25 2.08353944,23.7469084 2.18809235,22.1786147 L3,10 Z" id="Combined-Shape" stroke="#333333" stroke-width="2"></path>
+                        <circle id="Oval-137" fill="#333333" cx="5" cy="22" r="1"></circle>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/application/assets/fonts/icons/yin-yang.svg b/application/assets/fonts/icons/yin-yang.svg
new file mode 100644
index 00000000..bfd71143
--- /dev/null
+++ b/application/assets/fonts/icons/yin-yang.svg
@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 44.1 (41455) - http://www.bohemiancoding.com/sketch -->
+    <title>yin-yang</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard-4" transform="translate(-576.000000, -863.000000)" fill="#333333">
+            <g id="353" transform="translate(576.000000, 863.000000)">
+                <path d="M12,21 C9.51471863,21 7.5,18.9852814 7.5,16.5 C7.5,14.0147186 9.51471863,12 12,12 C14.4852814,12 16.5,9.98528137 16.5,7.5 C16.5,5.01471863 14.4852814,3 12,3 C7.02943725,3 3,7.02943725 3,12 C3,16.9705627 7.02943725,21 12,21 Z M12,23 C5.92486775,23 1,18.0751322 1,12 C1,5.92486775 5.92486775,1 12,1 C18.0751322,1 23,5.92486775 23,12 C23,18.0751322 18.0751322,23 12,23 Z M12,9 C11.1715729,9 10.5,8.32842712 10.5,7.5 C10.5,6.67157288 11.1715729,6 12,6 C12.8284271,6 13.5,6.67157288 13.5,7.5 C13.5,8.32842712 12.8284271,9 12,9 Z M12,18 C12.8284271,18 13.5,17.3284271 13.5,16.5 C13.5,15.6715729 12.8284271,15 12,15 C11.1715729,15 10.5,15.6715729 10.5,16.5 C10.5,17.3284271 11.1715729,18 12,18 Z" id="Combined-Shape"></path>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/application/assets/fonts/icons/youtube.svg b/application/assets/fonts/icons/youtube.svg
new file mode 100644
index 00000000..b3a48daf
--- /dev/null
+++ b/application/assets/fonts/icons/youtube.svg
@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 44.1 (41455) - http://www.bohemiancoding.com/sketch -->
+    <title>youtube</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard-4" transform="translate(-884.000000, -863.000000)">
+            <g id="360" transform="translate(884.000000, 863.000000)">
+                <path d="M22.7803123,7.45167123 C22.7803123,7.45167123 22.565363,5.88403768 21.9056968,5.19370343 C21.0691174,4.28765226 20.1313956,4.28315352 19.7013677,4.23012626 C16.6227892,4 12.0047599,4 12.0047599,4 L11.995197,4 C11.995197,4 7.37727544,4 4.29858926,4.23012626 C3.86853982,4.28315352 2.93116256,4.28765226 2.09428166,5.19370343 C1.43465857,5.88403768 1.22001077,7.45167123 1.22001077,7.45167123 C1.22001077,7.45167123 1,9.29259225 1,11.133491 L1,12.8593377 C1,14.7002142 1.22001077,16.541113 1.22001077,16.541113 C1.22001077,16.541113 1.43465857,18.1087688 2.09428166,18.799103 C2.93116256,19.7051765 4.03046258,19.6765137 4.52008615,19.7714772 C6.28010769,19.9459928 12,20 12,20 C12,20 16.6227892,19.9928065 19.7013677,19.7627025 C20.1313956,19.7096529 21.0691174,19.7051765 21.9056968,18.799103 C22.565363,18.1087688 22.7803123,16.541113 22.7803123,16.541113 C22.7803123,16.541113 23,14.7002142 23,12.8593377 L23,11.133491 C23,9.29259225 22.7803123,7.45167123 22.7803123,7.45167123 L22.7803123,7.45167123 Z" id="Badge" stroke="#333333" stroke-width="2"></path>
+                <polygon id="Play" fill="#333333" points="9.5010681 15 9.5 9 15.77226 12.010453"></polygon>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/application/assets/fonts/icons/zoom-in.svg b/application/assets/fonts/icons/zoom-in.svg
new file mode 100644
index 00000000..125430d7
--- /dev/null
+++ b/application/assets/fonts/icons/zoom-in.svg
@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 44.1 (41455) - http://www.bohemiancoding.com/sketch -->
+    <title>zoom-in</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard-4" transform="translate(-312.000000, -731.000000)" stroke="#333333" stroke-width="2">
+            <g id="287" transform="translate(312.000000, 731.000000)">
+                <circle id="Glass" cx="10" cy="10" r="7"></circle>
+                <path d="M15.5,15.5 L21,21" id="Handle" stroke-linecap="round" stroke-linejoin="round"></path>
+                <path d="M10,7 L10,13.0207973" id="Plus" stroke-linecap="round" stroke-linejoin="round"></path>
+                <path d="M7,10 L13,10" id="Plus" stroke-linecap="round"></path>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/application/assets/fonts/icons/zoom-out.svg b/application/assets/fonts/icons/zoom-out.svg
new file mode 100644
index 00000000..b7a96778
--- /dev/null
+++ b/application/assets/fonts/icons/zoom-out.svg
@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 44.1 (41455) - http://www.bohemiancoding.com/sketch -->
+    <title>zoom-out</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard-4" transform="translate(-224.000000, -1134.000000)" stroke="#333333" stroke-width="2">
+            <g id="Extras" transform="translate(48.000000, 1046.000000)">
+                <g id="zoom-out" transform="translate(176.000000, 88.000000)">
+                    <circle id="Glass" cx="10" cy="10" r="7"></circle>
+                    <path d="M15.5,15.5 L21,21" id="Handle" stroke-linecap="round" stroke-linejoin="round"></path>
+                    <path d="M7,10 L13,10" id="Minus" stroke-linecap="round"></path>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/application/assets/image/podcast.png b/application/assets/image/podcast.png
new file mode 100644
index 00000000..ac53d44d
Binary files /dev/null and b/application/assets/image/podcast.png differ
diff --git a/application/assets/image/youtube.png b/application/assets/image/youtube.png
new file mode 100644
index 00000000..71051ffa
Binary files /dev/null and b/application/assets/image/youtube.png differ
diff --git a/application/assets/js/helper.js b/application/assets/js/helper.js
new file mode 100644
index 00000000..d06a91e9
--- /dev/null
+++ b/application/assets/js/helper.js
@@ -0,0 +1,374 @@
+"use strict";
+
+function hashCode(str) {
+  var hash = 0;
+  for (var i = 0; i < str.length; i++) {
+    hash = ~~((hash << 5) - hash + str.charCodeAt(i));
+  }
+  return hash;
+}
+
+function intToRGB(i) {
+  var c = (i & 0x00ffffff).toString(16).toUpperCase();
+
+  return "00000".substring(0, 6 - c.length) + c;
+}
+
+function getRandomInteger(min, max) {
+  min = Math.ceil(min);
+  max = Math.floor(max);
+  return Math.floor(Math.random() * (max - min)) + min;
+}
+
+function notify(param_title, param_text, param_silent, requireInteraction) {
+  var options = {
+    body: param_text,
+    silent: param_silent,
+    requireInteraction: requireInteraction,
+  };
+
+  // Let's check if the browser supports notifications
+  if (!("Notification" in window)) {
+    alert("This browser does not support desktop notification");
+  }
+
+  // Let's check whether notification permissions have already been granted
+  else if (Notification.permission === "granted") {
+    // If it's okay let's create a notification
+    var notification = new Notification(param_title, options);
+  }
+
+  // Otherwise, we need to ask the user for permission
+  else if (Notification.permission !== "denied") {
+    Notification.requestPermission().then(function (permission) {
+      // If the user accepts, let's create a notification
+      if (permission === "granted") {
+        var notification = new Notification(param_title, options, action);
+
+        document.addEventListener("visibilitychange", function () {
+          if (document.visibilityState === "visible") {
+            // The tab has become visible so clear the now-stale Notification.
+            notification.close();
+
+            toaster("yes", 2000);
+          }
+        });
+      }
+    });
+  }
+}
+
+function share(url) {
+  var activity = new MozActivity({
+    name: "share",
+    data: {
+      type: "url",
+      url: url,
+    },
+  });
+
+  activity.onsuccess = function () {};
+
+  activity.onerror = function () {
+    console.log("The activity encounter en error: " + this.error);
+  };
+}
+
+//check if internet connection
+function check_iconnection() {
+  function updateOfflineStatus() {
+    toaster("Your Browser is offline", 15000);
+    return false;
+  }
+
+  window.addEventListener("offline", updateOfflineStatus);
+}
+
+function delete_file(filename) {
+  var sdcard = navigator.getDeviceStorages("sdcard");
+  var request = sdcard[1].delete(filename);
+
+  request.onsuccess = function () {
+    //toaster("File deleted", 2000);
+  };
+
+  request.onerror = function () {
+    //toaster("Unable to delete the file: " + this.error, 2000);
+  };
+}
+
+function get_file(filename) {
+  var sdcard = navigator.getDeviceStorages("sdcard");
+  var request = sdcard[1].get(filename);
+
+  request.onsuccess = function () {
+    var file = this.result;
+    //alert("Get the file: " + file.name);
+  };
+
+  request.onerror = function () {
+    //alert("Unable to get the file: " + this.error);
+  };
+}
+
+function write_file(data, filename) {
+  var sdcard = navigator.getDeviceStorages("sdcard");
+  var file = new Blob([data], {
+    type: "text/plain",
+  });
+  var request = sdcard[1].addNamed(file, filename);
+
+  request.onsuccess = function () {
+    var name = this.result;
+    //toaster('File "' + name + '" successfully wrote on the sdcard storage area', 2000);
+  };
+
+  // An error typically occur if a file with the same name already exist
+  request.onerror = function () {
+    toaster("Unable to write the file: " + this.error, 2000);
+  };
+}
+
+function add_source(url, limit, categorie, channel) {
+  let sdcard = navigator.getDeviceStorages("sdcard");
+  let request = sdcard[1].get("rss-reader.json");
+
+  request.onsuccess = function () {
+    let fileget = this.result;
+    let reader = new FileReader();
+
+    reader.addEventListener("loadend", function (event) {
+      let data;
+      //check if json valid
+      try {
+        data = JSON.parse(event.target.result);
+      } catch (e) {
+        toaster("Json is not valid", 2000);
+        return false;
+      }
+
+      data.push({
+        categorie: categorie,
+        url: url,
+        limit: limit,
+        channel: channel,
+      });
+
+      let extData = JSON.stringify(data);
+
+      var request_del = sdcard[1].delete("rss-reader.json");
+
+      request_del.onsuccess = function () {
+        //toaster('File successfully removed.', 2000);
+
+        let file = new Blob([extData], {
+          type: "application/json",
+        });
+        let requestAdd = sdcard[1].addNamed(file, "rss-reader.json");
+
+        requestAdd.onsuccess = function () {
+          toaster(
+            "<br><br>the rss feed <br>has been successfully added to your list.",
+            3000
+          );
+        };
+
+        requestAdd.onerror = function () {
+          toaster("Unable to write the file: " + this.error);
+        };
+      };
+
+      request_del.onerror = function () {
+        //toaster('Unable to remove the file: ' + this.error);
+      };
+    });
+
+    reader.readAsText(fileget);
+  };
+
+  request.onerror = function () {
+    toaster(this.error, 3000);
+  };
+}
+
+const helper = (() => {
+  function validate(url) {
+    var pattern = /(ftp|http|https):\/\/(\w+:{0,1}\w*@)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%@!\-\/]))?/;
+    if (pattern.test(url)) {
+      return true;
+    }
+    return false;
+  }
+
+  let getManifest = function (callback) {
+    if (!navigator.mozApps) {
+      //let t = document.getElementById("kaisos-ads");
+      //t.remove();
+      return false;
+    }
+    let self = navigator.mozApps.getSelf();
+    self.onsuccess = function () {
+      callback(self.result);
+    };
+    self.onerror = function () {};
+  };
+
+  let queue = [];
+  let timeout;
+  let toaster = function (text, time) {
+    queue.push({ text: text, time: time });
+    if (queue.length === 1) {
+      toast_q(text, time);
+    }
+  };
+
+  //bottom bar
+  let bottom_bar = function (left, center, right) {
+    document.querySelector("div#bottom-bar div#button-left").textContent = left;
+    document.querySelector(
+      "div#bottom-bar div#button-center"
+    ).textContent = center;
+    document.querySelector(
+      "div#bottom-bar div#button-right"
+    ).textContent = right;
+
+    if (left == "" && center == "" && right == "") {
+      document.querySelector("div#bottom-bar").style.display = "none";
+    } else {
+      document.querySelector("div#bottom-bar").style.display = "block";
+    }
+  };
+
+  //top bar
+  let top_bar = function (left, center, right) {
+    document.querySelector("div#top-bar div.button-left").innerHTML = left;
+    document.querySelector(
+      "div#top-bar div.button-center"
+    ).textContent = center;
+    document.querySelector("div#top-bar div.button-right").textContent = right;
+
+    if (left == "" && center == "" && right == "") {
+      document.querySelector("div#top-bar").style.display = "none";
+    } else {
+      document.querySelector("div#top-bar").style.display = "block";
+    }
+  };
+
+  let add_script = function (script) {
+    document.body.appendChild(document.createElement("script")).src = script;
+  };
+
+  let toast_q = function (text, time) {
+    var x = document.querySelector("div#toast");
+    x.innerHTML = queue[0].text;
+
+    x.style.transform = "translate(0px, 0px)";
+
+    timeout = setTimeout(function () {
+      timeout = null;
+      x.style.transform = "translate(0px, -100px)";
+      queue = queue.slice(1);
+      if (queue.length > 0) {
+        setTimeout(() => {
+          toast_q(text, time);
+        }, 1000);
+      }
+    }, time);
+  };
+
+  let lock;
+  let screenlock = function (stat) {
+    if (typeof window.navigator.requestWakeLock === "undefined") {
+      return false;
+    }
+    if (stat == "lock") {
+      lock = window.navigator.requestWakeLock("screen");
+      lock.onsuccess = function () {};
+      lock.onerror = function () {
+        alert("An error occurred: " + this.error.name);
+      };
+    }
+
+    if (stat == "unlock") {
+      if (lock.topic == "screen") {
+        lock.unlock();
+      }
+    }
+  };
+
+  //filesize
+  function formatFileSize(bytes, decimalPoint) {
+    if (bytes || bytes > 0 || bytes != undefined || bytes != NaN) {
+      var k = 1000,
+        dm = decimalPoint || 2,
+        sizes = ["Bytes", "KB", "MB", "GB", "TB", "PB", "EB", "ZB", "YB"],
+        i = Math.floor(Math.log(bytes) / Math.log(k));
+      return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + " " + sizes[i];
+    }
+  }
+
+  //goodbye
+
+  let goodbye = function () {
+    document.getElementById("goodbye").style.display = "block";
+    bottom_bar("", "", "");
+
+    if (localStorage.clickcount) {
+      localStorage.clickcount = Number(localStorage.clickcount) + 1;
+    } else {
+      localStorage.clickcount = 1;
+    }
+
+    if (localStorage.clickcount == 300000) {
+      message();
+    } else {
+      document.getElementById("ciao").style.display = "block";
+      setTimeout(function () {
+        window.close();
+      }, 4000);
+    }
+
+    function message() {
+      document.getElementById("donation").style.display = "block";
+      setTimeout(function () {
+        localStorage.clickcount = 1;
+
+        window.close();
+      }, 6000);
+    }
+  };
+
+  //delete file
+  function deleteFile(storage, path, notification) {
+    let sdcard = navigator.getDeviceStorages("sdcard");
+
+    let requestDel = sdcard[storage].delete(path);
+
+    requestDel.onsuccess = function () {
+      if (notification == "notification") {
+        helper.toaster(
+          'File "' +
+            name +
+            '" successfully deleted frome the sdcard storage area'
+        );
+      }
+    };
+
+    requestDel.onerror = function () {
+      helper.toaster("Unable to delete the file: " + this.error);
+    };
+  }
+
+  return {
+    getManifest,
+    toaster,
+    add_script,
+    deleteFile,
+    goodbye,
+    screenlock,
+    validate,
+    formatFileSize,
+    top_bar,
+    bottom_bar,
+  };
+})();
diff --git a/application/assets/js/mustache.js b/application/assets/js/mustache.js
new file mode 100644
index 00000000..fbfc33d0
--- /dev/null
+++ b/application/assets/js/mustache.js
@@ -0,0 +1,778 @@
+// This file has been generated from mustache.mjs
+(function(global, factory) {
+    typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
+        typeof define === 'function' && define.amd ? define(factory) :
+        (global = global || self, global.Mustache = factory());
+}(this, (function() {
+    'use strict';
+
+    /*!
+     * mustache.js - Logic-less {{mustache}} templates with JavaScript
+     * http://github.com/janl/mustache.js
+     */
+
+    var objectToString = Object.prototype.toString;
+    var isArray = Array.isArray || function isArrayPolyfill(object) {
+        return objectToString.call(object) === '[object Array]';
+    };
+
+    function isFunction(object) {
+        return typeof object === 'function';
+    }
+
+    /**
+     * More correct typeof string handling array
+     * which normally returns typeof 'object'
+     */
+    function typeStr(obj) {
+        return isArray(obj) ? 'array' : typeof obj;
+    }
+
+    function escapeRegExp(string) {
+        return string.replace(/[\-\[\]{}()*+?.,\\\^$|#\s]/g, '\\$&');
+    }
+
+    /**
+     * Null safe way of checking whether or not an object,
+     * including its prototype, has a given property
+     */
+    function hasProperty(obj, propName) {
+        return obj != null && typeof obj === 'object' && (propName in obj);
+    }
+
+    /**
+     * Safe way of detecting whether or not the given thing is a primitive and
+     * whether it has the given property
+     */
+    function primitiveHasOwnProperty(primitive, propName) {
+        return (
+            primitive != null &&
+            typeof primitive !== 'object' &&
+            primitive.hasOwnProperty &&
+            primitive.hasOwnProperty(propName)
+        );
+    }
+
+    // Workaround for https://issues.apache.org/jira/browse/COUCHDB-577
+    // See https://github.com/janl/mustache.js/issues/189
+    var regExpTest = RegExp.prototype.test;
+
+    function testRegExp(re, string) {
+        return regExpTest.call(re, string);
+    }
+
+    var nonSpaceRe = /\S/;
+
+    function isWhitespace(string) {
+        return !testRegExp(nonSpaceRe, string);
+    }
+
+    var entityMap = {
+        '&': '&amp;',
+        '<': '&lt;',
+        '>': '&gt;',
+        '"': '&quot;',
+        "'": '&#39;',
+        '/': '&#x2F;',
+        '`': '&#x60;',
+        '=': '&#x3D;'
+    };
+
+    function escapeHtml(string) {
+        return String(string).replace(/[&<>"'`=\/]/g, function fromEntityMap(s) {
+            return entityMap[s];
+        });
+    }
+
+    var whiteRe = /\s*/;
+    var spaceRe = /\s+/;
+    var equalsRe = /\s*=/;
+    var curlyRe = /\s*\}/;
+    var tagRe = /#|\^|\/|>|\{|&|=|!/;
+
+    /**
+     * Breaks up the given `template` string into a tree of tokens. If the `tags`
+     * argument is given here it must be an array with two string values: the
+     * opening and closing tags used in the template (e.g. [ "<%", "%>" ]). Of
+     * course, the default is to use mustaches (i.e. mustache.tags).
+     *
+     * A token is an array with at least 4 elements. The first element is the
+     * mustache symbol that was used inside the tag, e.g. "#" or "&". If the tag
+     * did not contain a symbol (i.e. {{myValue}}) this element is "name". For
+     * all text that appears outside a symbol this element is "text".
+     *
+     * The second element of a token is its "value". For mustache tags this is
+     * whatever else was inside the tag besides the opening symbol. For text tokens
+     * this is the text itself.
+     *
+     * The third and fourth elements of the token are the start and end indices,
+     * respectively, of the token in the original template.
+     *
+     * Tokens that are the root node of a subtree contain two more elements: 1) an
+     * array of tokens in the subtree and 2) the index in the original template at
+     * which the closing tag for that section begins.
+     *
+     * Tokens for partials also contain two more elements: 1) a string value of
+     * indendation prior to that tag and 2) the index of that tag on that line -
+     * eg a value of 2 indicates the partial is the third tag on this line.
+     */
+    function parseTemplate(template, tags) {
+        if (!template)
+            return [];
+        var lineHasNonSpace = false;
+        var sections = []; // Stack to hold section tokens
+        var tokens = []; // Buffer to hold the tokens
+        var spaces = []; // Indices of whitespace tokens on the current line
+        var hasTag = false; // Is there a {{tag}} on the current line?
+        var nonSpace = false; // Is there a non-space char on the current line?
+        var indentation = ''; // Tracks indentation for tags that use it
+        var tagIndex = 0; // Stores a count of number of tags encountered on a line
+
+        // Strips all whitespace tokens array for the current line
+        // if there was a {{#tag}} on it and otherwise only space.
+        function stripSpace() {
+            if (hasTag && !nonSpace) {
+                while (spaces.length)
+                    delete tokens[spaces.pop()];
+            } else {
+                spaces = [];
+            }
+
+            hasTag = false;
+            nonSpace = false;
+        }
+
+        var openingTagRe, closingTagRe, closingCurlyRe;
+
+        function compileTags(tagsToCompile) {
+            if (typeof tagsToCompile === 'string')
+                tagsToCompile = tagsToCompile.split(spaceRe, 2);
+
+            if (!isArray(tagsToCompile) || tagsToCompile.length !== 2)
+                throw new Error('Invalid tags: ' + tagsToCompile);
+
+            openingTagRe = new RegExp(escapeRegExp(tagsToCompile[0]) + '\\s*');
+            closingTagRe = new RegExp('\\s*' + escapeRegExp(tagsToCompile[1]));
+            closingCurlyRe = new RegExp('\\s*' + escapeRegExp('}' + tagsToCompile[1]));
+        }
+
+        compileTags(tags || mustache.tags);
+
+        var scanner = new Scanner(template);
+
+        var start, type, value, chr, token, openSection;
+        while (!scanner.eos()) {
+            start = scanner.pos;
+
+            // Match any text between tags.
+            value = scanner.scanUntil(openingTagRe);
+
+            if (value) {
+                for (var i = 0, valueLength = value.length; i < valueLength; ++i) {
+                    chr = value.charAt(i);
+
+                    if (isWhitespace(chr)) {
+                        spaces.push(tokens.length);
+                        indentation += chr;
+                    } else {
+                        nonSpace = true;
+                        lineHasNonSpace = true;
+                        indentation += ' ';
+                    }
+
+                    tokens.push(['text', chr, start, start + 1]);
+                    start += 1;
+
+                    // Check for whitespace on the current line.
+                    if (chr === '\n') {
+                        stripSpace();
+                        indentation = '';
+                        tagIndex = 0;
+                        lineHasNonSpace = false;
+                    }
+                }
+            }
+
+            // Match the opening tag.
+            if (!scanner.scan(openingTagRe))
+                break;
+
+            hasTag = true;
+
+            // Get the tag type.
+            type = scanner.scan(tagRe) || 'name';
+            scanner.scan(whiteRe);
+
+            // Get the tag value.
+            if (type === '=') {
+                value = scanner.scanUntil(equalsRe);
+                scanner.scan(equalsRe);
+                scanner.scanUntil(closingTagRe);
+            } else if (type === '{') {
+                value = scanner.scanUntil(closingCurlyRe);
+                scanner.scan(curlyRe);
+                scanner.scanUntil(closingTagRe);
+                type = '&';
+            } else {
+                value = scanner.scanUntil(closingTagRe);
+            }
+
+            // Match the closing tag.
+            if (!scanner.scan(closingTagRe))
+                throw new Error('Unclosed tag at ' + scanner.pos);
+
+            if (type == '>') {
+                token = [type, value, start, scanner.pos, indentation, tagIndex, lineHasNonSpace];
+            } else {
+                token = [type, value, start, scanner.pos];
+            }
+            tagIndex++;
+            tokens.push(token);
+
+            if (type === '#' || type === '^') {
+                sections.push(token);
+            } else if (type === '/') {
+                // Check section nesting.
+                openSection = sections.pop();
+
+                if (!openSection)
+                    throw new Error('Unopened section "' + value + '" at ' + start);
+
+                if (openSection[1] !== value)
+                    throw new Error('Unclosed section "' + openSection[1] + '" at ' + start);
+            } else if (type === 'name' || type === '{' || type === '&') {
+                nonSpace = true;
+            } else if (type === '=') {
+                // Set the tags for the next time around.
+                compileTags(value);
+            }
+        }
+
+        stripSpace();
+
+        // Make sure there are no open sections when we're done.
+        openSection = sections.pop();
+
+        if (openSection)
+            throw new Error('Unclosed section "' + openSection[1] + '" at ' + scanner.pos);
+
+        return nestTokens(squashTokens(tokens));
+    }
+
+    /**
+     * Combines the values of consecutive text tokens in the given `tokens` array
+     * to a single token.
+     */
+    function squashTokens(tokens) {
+        var squashedTokens = [];
+
+        var token, lastToken;
+        for (var i = 0, numTokens = tokens.length; i < numTokens; ++i) {
+            token = tokens[i];
+
+            if (token) {
+                if (token[0] === 'text' && lastToken && lastToken[0] === 'text') {
+                    lastToken[1] += token[1];
+                    lastToken[3] = token[3];
+                } else {
+                    squashedTokens.push(token);
+                    lastToken = token;
+                }
+            }
+        }
+
+        return squashedTokens;
+    }
+
+    /**
+     * Forms the given array of `tokens` into a nested tree structure where
+     * tokens that represent a section have two additional items: 1) an array of
+     * all tokens that appear in that section and 2) the index in the original
+     * template that represents the end of that section.
+     */
+    function nestTokens(tokens) {
+        var nestedTokens = [];
+        var collector = nestedTokens;
+        var sections = [];
+
+        var token, section;
+        for (var i = 0, numTokens = tokens.length; i < numTokens; ++i) {
+            token = tokens[i];
+
+            switch (token[0]) {
+                case '#':
+                case '^':
+                    collector.push(token);
+                    sections.push(token);
+                    collector = token[4] = [];
+                    break;
+                case '/':
+                    section = sections.pop();
+                    section[5] = token[2];
+                    collector = sections.length > 0 ? sections[sections.length - 1][4] : nestedTokens;
+                    break;
+                default:
+                    collector.push(token);
+            }
+        }
+
+        return nestedTokens;
+    }
+
+    /**
+     * A simple string scanner that is used by the template parser to find
+     * tokens in template strings.
+     */
+    function Scanner(string) {
+        this.string = string;
+        this.tail = string;
+        this.pos = 0;
+    }
+
+    /**
+     * Returns `true` if the tail is empty (end of string).
+     */
+    Scanner.prototype.eos = function eos() {
+        return this.tail === '';
+    };
+
+    /**
+     * Tries to match the given regular expression at the current position.
+     * Returns the matched text if it can match, the empty string otherwise.
+     */
+    Scanner.prototype.scan = function scan(re) {
+        var match = this.tail.match(re);
+
+        if (!match || match.index !== 0)
+            return '';
+
+        var string = match[0];
+
+        this.tail = this.tail.substring(string.length);
+        this.pos += string.length;
+
+        return string;
+    };
+
+    /**
+     * Skips all text until the given regular expression can be matched. Returns
+     * the skipped string, which is the entire tail if no match can be made.
+     */
+    Scanner.prototype.scanUntil = function scanUntil(re) {
+        var index = this.tail.search(re),
+            match;
+
+        switch (index) {
+            case -1:
+                match = this.tail;
+                this.tail = '';
+                break;
+            case 0:
+                match = '';
+                break;
+            default:
+                match = this.tail.substring(0, index);
+                this.tail = this.tail.substring(index);
+        }
+
+        this.pos += match.length;
+
+        return match;
+    };
+
+    /**
+     * Represents a rendering context by wrapping a view object and
+     * maintaining a reference to the parent context.
+     */
+    function Context(view, parentContext) {
+        this.view = view;
+        this.cache = {
+            '.': this.view
+        };
+        this.parent = parentContext;
+    }
+
+    /**
+     * Creates a new context using the given view with this context
+     * as the parent.
+     */
+    Context.prototype.push = function push(view) {
+        return new Context(view, this);
+    };
+
+    /**
+     * Returns the value of the given name in this context, traversing
+     * up the context hierarchy if the value is absent in this context's view.
+     */
+    Context.prototype.lookup = function lookup(name) {
+        var cache = this.cache;
+
+        var value;
+        if (cache.hasOwnProperty(name)) {
+            value = cache[name];
+        } else {
+            var context = this,
+                intermediateValue, names, index, lookupHit = false;
+
+            while (context) {
+                if (name.indexOf('.') > 0) {
+                    intermediateValue = context.view;
+                    names = name.split('.');
+                    index = 0;
+
+                    /**
+                     * Using the dot notion path in `name`, we descend through the
+                     * nested objects.
+                     *
+                     * To be certain that the lookup has been successful, we have to
+                     * check if the last object in the path actually has the property
+                     * we are looking for. We store the result in `lookupHit`.
+                     *
+                     * This is specially necessary for when the value has been set to
+                     * `undefined` and we want to avoid looking up parent contexts.
+                     *
+                     * In the case where dot notation is used, we consider the lookup
+                     * to be successful even if the last "object" in the path is
+                     * not actually an object but a primitive (e.g., a string, or an
+                     * integer), because it is sometimes useful to access a property
+                     * of an autoboxed primitive, such as the length of a string.
+                     **/
+                    while (intermediateValue != null && index < names.length) {
+                        if (index === names.length - 1)
+                            lookupHit = (
+                                hasProperty(intermediateValue, names[index]) ||
+                                primitiveHasOwnProperty(intermediateValue, names[index])
+                            );
+
+                        intermediateValue = intermediateValue[names[index++]];
+                    }
+                } else {
+                    intermediateValue = context.view[name];
+
+                    /**
+                     * Only checking against `hasProperty`, which always returns `false` if
+                     * `context.view` is not an object. Deliberately omitting the check
+                     * against `primitiveHasOwnProperty` if dot notation is not used.
+                     *
+                     * Consider this example:
+                     * ```
+                     * Mustache.render("The length of a football field is {{#length}}{{length}}{{/length}}.", {length: "100 yards"})
+                     * ```
+                     *
+                     * If we were to check also against `primitiveHasOwnProperty`, as we do
+                     * in the dot notation case, then render call would return:
+                     *
+                     * "The length of a football field is 9."
+                     *
+                     * rather than the expected:
+                     *
+                     * "The length of a football field is 100 yards."
+                     **/
+                    lookupHit = hasProperty(context.view, name);
+                }
+
+                if (lookupHit) {
+                    value = intermediateValue;
+                    break;
+                }
+
+                context = context.parent;
+            }
+
+            cache[name] = value;
+        }
+
+        if (isFunction(value))
+            value = value.call(this.view);
+
+        return value;
+    };
+
+    /**
+     * A Writer knows how to take a stream of tokens and render them to a
+     * string, given a context. It also maintains a cache of templates to
+     * avoid the need to parse the same template twice.
+     */
+    function Writer() {
+        this.templateCache = {
+            _cache: {},
+            set: function set(key, value) {
+                this._cache[key] = value;
+            },
+            get: function get(key) {
+                return this._cache[key];
+            },
+            clear: function clear() {
+                this._cache = {};
+            }
+        };
+    }
+
+    /**
+     * Clears all cached templates in this writer.
+     */
+    Writer.prototype.clearCache = function clearCache() {
+        if (typeof this.templateCache !== 'undefined') {
+            this.templateCache.clear();
+        }
+    };
+
+    /**
+     * Parses and caches the given `template` according to the given `tags` or
+     * `mustache.tags` if `tags` is omitted,  and returns the array of tokens
+     * that is generated from the parse.
+     */
+    Writer.prototype.parse = function parse(template, tags) {
+        var cache = this.templateCache;
+        var cacheKey = template + ':' + (tags || mustache.tags).join(':');
+        var isCacheEnabled = typeof cache !== 'undefined';
+        var tokens = isCacheEnabled ? cache.get(cacheKey) : undefined;
+
+        if (tokens == undefined) {
+            tokens = parseTemplate(template, tags);
+            isCacheEnabled && cache.set(cacheKey, tokens);
+        }
+        return tokens;
+    };
+
+    /**
+     * High-level method that is used to render the given `template` with
+     * the given `view`.
+     *
+     * The optional `partials` argument may be an object that contains the
+     * names and templates of partials that are used in the template. It may
+     * also be a function that is used to load partial templates on the fly
+     * that takes a single argument: the name of the partial.
+     *
+     * If the optional `config` argument is given here, then it should be an
+     * object with a `tags` attribute or an `escape` attribute or both.
+     * If an array is passed, then it will be interpreted the same way as
+     * a `tags` attribute on a `config` object.
+     *
+     * The `tags` attribute of a `config` object must be an array with two
+     * string values: the opening and closing tags used in the template (e.g.
+     * [ "<%", "%>" ]). The default is to mustache.tags.
+     *
+     * The `escape` attribute of a `config` object must be a function which
+     * accepts a string as input and outputs a safely escaped string.
+     * If an `escape` function is not provided, then an HTML-safe string
+     * escaping function is used as the default.
+     */
+    Writer.prototype.render = function render(template, view, partials, config) {
+        var tags = this.getConfigTags(config);
+        var tokens = this.parse(template, tags);
+        var context = (view instanceof Context) ? view : new Context(view, undefined);
+        return this.renderTokens(tokens, context, partials, template, config);
+    };
+
+    /**
+     * Low-level method that renders the given array of `tokens` using
+     * the given `context` and `partials`.
+     *
+     * Note: The `originalTemplate` is only ever used to extract the portion
+     * of the original template that was contained in a higher-order section.
+     * If the template doesn't use higher-order sections, this argument may
+     * be omitted.
+     */
+    Writer.prototype.renderTokens = function renderTokens(tokens, context, partials, originalTemplate, config) {
+        var buffer = '';
+
+        var token, symbol, value;
+        for (var i = 0, numTokens = tokens.length; i < numTokens; ++i) {
+            value = undefined;
+            token = tokens[i];
+            symbol = token[0];
+
+            if (symbol === '#') value = this.renderSection(token, context, partials, originalTemplate, config);
+            else if (symbol === '^') value = this.renderInverted(token, context, partials, originalTemplate, config);
+            else if (symbol === '>') value = this.renderPartial(token, context, partials, config);
+            else if (symbol === '&') value = this.unescapedValue(token, context);
+            else if (symbol === 'name') value = this.escapedValue(token, context, config);
+            else if (symbol === 'text') value = this.rawValue(token);
+
+            if (value !== undefined)
+                buffer += value;
+        }
+
+        return buffer;
+    };
+
+    Writer.prototype.renderSection = function renderSection(token, context, partials, originalTemplate, config) {
+        var self = this;
+        var buffer = '';
+        var value = context.lookup(token[1]);
+
+        // This function is used to render an arbitrary template
+        // in the current context by higher-order sections.
+        function subRender(template) {
+            return self.render(template, context, partials, config);
+        }
+
+        if (!value) return;
+
+        if (isArray(value)) {
+            for (var j = 0, valueLength = value.length; j < valueLength; ++j) {
+                buffer += this.renderTokens(token[4], context.push(value[j]), partials, originalTemplate, config);
+            }
+        } else if (typeof value === 'object' || typeof value === 'string' || typeof value === 'number') {
+            buffer += this.renderTokens(token[4], context.push(value), partials, originalTemplate, config);
+        } else if (isFunction(value)) {
+            if (typeof originalTemplate !== 'string')
+                throw new Error('Cannot use higher-order sections without the original template');
+
+            // Extract the portion of the original template that the section contains.
+            value = value.call(context.view, originalTemplate.slice(token[3], token[5]), subRender);
+
+            if (value != null)
+                buffer += value;
+        } else {
+            buffer += this.renderTokens(token[4], context, partials, originalTemplate, config);
+        }
+        return buffer;
+    };
+
+    Writer.prototype.renderInverted = function renderInverted(token, context, partials, originalTemplate, config) {
+        var value = context.lookup(token[1]);
+
+        // Use JavaScript's definition of falsy. Include empty arrays.
+        // See https://github.com/janl/mustache.js/issues/186
+        if (!value || (isArray(value) && value.length === 0))
+            return this.renderTokens(token[4], context, partials, originalTemplate, config);
+    };
+
+    Writer.prototype.indentPartial = function indentPartial(partial, indentation, lineHasNonSpace) {
+        var filteredIndentation = indentation.replace(/[^ \t]/g, '');
+        var partialByNl = partial.split('\n');
+        for (var i = 0; i < partialByNl.length; i++) {
+            if (partialByNl[i].length && (i > 0 || !lineHasNonSpace)) {
+                partialByNl[i] = filteredIndentation + partialByNl[i];
+            }
+        }
+        return partialByNl.join('\n');
+    };
+
+    Writer.prototype.renderPartial = function renderPartial(token, context, partials, config) {
+        if (!partials) return;
+        var tags = this.getConfigTags(config);
+
+        var value = isFunction(partials) ? partials(token[1]) : partials[token[1]];
+        if (value != null) {
+            var lineHasNonSpace = token[6];
+            var tagIndex = token[5];
+            var indentation = token[4];
+            var indentedValue = value;
+            if (tagIndex == 0 && indentation) {
+                indentedValue = this.indentPartial(value, indentation, lineHasNonSpace);
+            }
+            var tokens = this.parse(indentedValue, tags);
+            return this.renderTokens(tokens, context, partials, indentedValue, config);
+        }
+    };
+
+    Writer.prototype.unescapedValue = function unescapedValue(token, context) {
+        var value = context.lookup(token[1]);
+        if (value != null)
+            return value;
+    };
+
+    Writer.prototype.escapedValue = function escapedValue(token, context, config) {
+        var escape = this.getConfigEscape(config) || mustache.escape;
+        var value = context.lookup(token[1]);
+        if (value != null)
+            return (typeof value === 'number' && escape === mustache.escape) ? String(value) : escape(value);
+    };
+
+    Writer.prototype.rawValue = function rawValue(token) {
+        return token[1];
+    };
+
+    Writer.prototype.getConfigTags = function getConfigTags(config) {
+        if (isArray(config)) {
+            return config;
+        } else if (config && typeof config === 'object') {
+            return config.tags;
+        } else {
+            return undefined;
+        }
+    };
+
+    Writer.prototype.getConfigEscape = function getConfigEscape(config) {
+        if (config && typeof config === 'object' && !isArray(config)) {
+            return config.escape;
+        } else {
+            return undefined;
+        }
+    };
+
+    var mustache = {
+        name: 'mustache.js',
+        version: '4.1.0',
+        tags: ['{{', '}}'],
+        clearCache: undefined,
+        escape: undefined,
+        parse: undefined,
+        render: undefined,
+        Scanner: undefined,
+        Context: undefined,
+        Writer: undefined,
+        /**
+         * Allows a user to override the default caching strategy, by providing an
+         * object with set, get and clear methods. This can also be used to disable
+         * the cache by setting it to the literal `undefined`.
+         */
+        set templateCache(cache) {
+            defaultWriter.templateCache = cache;
+        },
+        /**
+         * Gets the default or overridden caching object from the default writer.
+         */
+        get templateCache() {
+            return defaultWriter.templateCache;
+        }
+    };
+
+    // All high-level mustache.* functions use this writer.
+    var defaultWriter = new Writer();
+
+    /**
+     * Clears all cached templates in the default writer.
+     */
+    mustache.clearCache = function clearCache() {
+        return defaultWriter.clearCache();
+    };
+
+    /**
+     * Parses and caches the given template in the default writer and returns the
+     * array of tokens it contains. Doing this ahead of time avoids the need to
+     * parse templates on the fly as they are rendered.
+     */
+    mustache.parse = function parse(template, tags) {
+        return defaultWriter.parse(template, tags);
+    };
+
+    /**
+     * Renders the `template` with the given `view`, `partials`, and `config`
+     * using the default writer.
+     */
+    mustache.render = function render(template, view, partials, config) {
+        if (typeof template !== 'string') {
+            throw new TypeError('Invalid template! Template should be a "string" ' +
+                'but "' + typeStr(template) + '" was given as the first ' +
+                'argument for mustache#render(template, view, partials)');
+        }
+
+        return defaultWriter.render(template, view, partials, config);
+    };
+
+    // Export the escaping function so that the user may override it.
+    // See https://github.com/janl/mustache.js/issues/244
+    mustache.escape = escapeHtml;
+
+    // Export these mainly for testing, but also for advanced usage.
+    mustache.Scanner = Scanner;
+    mustache.Context = Context;
+    mustache.Writer = Writer;
+
+    return mustache;
+
+})));
\ No newline at end of file
diff --git a/application/icons/icon-112-112.png b/application/icons/icon-112-112.png
new file mode 100644
index 00000000..7f19c498
Binary files /dev/null and b/application/icons/icon-112-112.png differ
diff --git a/application/icons/icon-112-112.svg b/application/icons/icon-112-112.svg
new file mode 100644
index 00000000..e5cbd0a4
--- /dev/null
+++ b/application/icons/icon-112-112.svg
@@ -0,0 +1,50 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   height="112"
+   width="112"
+   id="svg14"
+   xml:space="preserve"
+   enable-background="new 0 0 1000 1000"
+   viewBox="0 0 112 112"
+   y="0px"
+   x="0px"
+   version="1.1"
+   sodipodi:docname="icon-112-112.svg"
+   inkscape:version="1.1.1 (eb90963e84, 2021-10-02)"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:dc="http://purl.org/dc/elements/1.1/"><sodipodi:namedview
+   pagecolor="#ffffff"
+   bordercolor="#666666"
+   borderopacity="1"
+   objecttolerance="10"
+   gridtolerance="10"
+   guidetolerance="10"
+   inkscape:pageopacity="0"
+   inkscape:pageshadow="2"
+   inkscape:window-width="1665"
+   inkscape:window-height="971"
+   id="namedview10"
+   showgrid="false"
+   inkscape:zoom="2.5189401"
+   inkscape:cx="73.840581"
+   inkscape:cy="52.799985"
+   inkscape:window-x="26"
+   inkscape:window-y="23"
+   inkscape:window-maximized="0"
+   inkscape:current-layer="svg14"
+   inkscape:pagecheckerboard="0" /><defs
+   id="defs18" />
+<metadata
+   id="metadata2"> Svg Vector Icons : http://www.onlinewebfonts.com/icon <rdf:RDF><cc:Work
+     rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
+       rdf:resource="http://purl.org/dc/dcmitype/StillImage" /></cc:Work></rdf:RDF></metadata>
+
+<path
+   d="m 53.421524,5.9820349 c -0.23456,0.0156 -0.92263,0.0625 -1.52468,0.10947 -8.92916,0.68806 -17.60029,3.84689 -25.02041,9.1089901 -10.57112,7.4983 -17.8661297,18.76531 -20.1257897,31.08004 -0.56296,3.04936 -0.74279,5.137 -0.75061,8.44439 0,2.83043 0.0625,3.81561 0.39876,6.33329 1.18065,8.79623 4.9649897,17.27189 10.8369697,24.28543 8.18636,9.75796 19.7583,16.020875 32.19813,17.428275 3.78434,0.42221 8.43657,0.34403 12.23655,-0.20329 20.1727,-2.916445 36.73308,-18.577645 40.572146,-38.351595 0.53951,-2.78352 0.78189,-5.46539 0.77407,-8.63204 0,-3.15101 -0.2502,-5.7156 -0.81316,-8.56167 -1.55596,-7.7876 -4.933706,-14.76986 -10.203636,-21.11097 -1.08682,-1.31357 -4.4724,-4.69132 -5.77815,-5.77815 -5.36375,-4.46458 -11.14972,-7.55303 -17.63157,-9.42956 -2.70533,-0.7818901 -5.61395,-1.3292101 -8.79623,-1.6576101 -1.56378,-0.15637 -6.91971,-0.13292 -8.52258,0.0391 -5.98926,0.64896 -11.11062,2.1345501 -16.30236,4.7147801 -4.74606,2.3613 -8.70241,5.21519 -12.47893,8.98389 -5.24646,5.23865 -8.97607,11.22791 -11.25136,18.06161 -1.5637797,4.70696 -2.2518397,8.93698 -2.2518397,13.87851 0,3.065 0.17984,5.11354 0.69588,7.97525 1.6654197,9.16373 6.4662097,17.95996 13.4171897,24.57473 10.62586,10.11763 25.02823,14.605655 39.17258,12.21309 7.49049,-1.26666 14.68385,-4.48022 20.70439,-9.24973 3.28392,-2.60369 6.45057,-5.92671 8.85097,-9.28101 4.47239,-6.27074 7.15427,-13.23736 7.99871,-20.79821 0.179826,-1.5716 0.250196,-5.98145 0.11728,-7.52958 -0.2893,-3.58105 -0.92263,-6.81806 -1.97035,-10.00817 -3.34648,-10.26618 -10.39129,-18.99205 -19.88341,-24.63728 -1.08682,-0.64897 -3.77652,-2.01727 -4.96499,-2.53332 -8.60076,-3.71396 -18.1007,-4.58968 -27.1315,-2.50986 -17.52993,4.05018 -31.07222,18.53074 -33.62118,35.92775 -0.32057,2.1971 -0.4144,3.83907 -0.36748,6.59913 0.0391,2.51768 0.11728,3.6045 0.40658,5.47321 1.07119,6.85716 3.82343,13.31555 8.04562,18.92169 1.27448,1.68888 2.24402,2.79134 4.02673,4.58186 1.73579,1.72797 2.83825,2.70533 4.46458,3.94853 8.77278,6.68514 19.7583,9.75014 30.57181,8.50694 12.46329,-1.42304 23.79284,-8.40529 30.76728,-18.95296 3.7296,-5.64523 5.91107,-11.77523 6.62259,-18.60893 0.13292,-1.31357 0.13292,-5.97362 0,-7.27155 -0.53951,-5.09009 -1.83744,-9.6485 -4.00327,-14.01143 -0.33621,-0.67242 -0.71152,-1.39176 -0.8288,-1.60287 -1.47777,-2.59587 -2.87734,-4.62878 -4.57404,-6.6695 -1.04773,-1.25884 -3.33866,-3.58887 -4.61314,-4.69915 -9.16372,-7.95962 -20.9155,-11.52502 -32.67509,-9.91434 -14.56657,1.99382 -27.20969,11.89252 -32.58908,25.52082 -1.42303,3.61232 -2.28311,7.43575 -2.60369,11.54066 -0.17201,2.26748 -0.0156,5.94235 0.36749,8.35838 1.68888,10.83697 8.06126,20.69657 17.38918,26.91258 2.48641,1.6576 5.30902,3.11191 8.09254,4.15964 4.80861,1.8218 9.5234,2.63496 14.69949,2.5255 2.08764,-0.0469 2.86953,-0.10165 4.53495,-0.33621 7.02917,-0.97736 13.6674,-3.83125 19.23444,-8.27238 2.29875,-1.83743 4.56622,-4.09708 6.4193,-6.41929 7.40448,-9.26537 10.05508,-21.37681 7.14645,-32.61254 -3.75306,-14.47274 -16.01306,-25.73193 -30.75946,-28.26524 -3.65142,-0.62551 -7.80324,-0.7037 -11.38429,-0.21893 -13.6283,1.85307 -25.26279,10.92297 -30.32942,23.64428 -2.25184,5.64523 -2.99463,11.87688 -2.15019,17.98342 0.80534,5.81725 3.26047,11.75178 6.82588,16.49783 2.25965,3.01027 4.90243,5.65305 7.82669,7.81106 4.06582,3.01809 8.91352,5.26993 13.69086,6.34893 2.91644,0.65679 5.09009,0.89136 8.28019,0.89136 3.91726,0 7.27937,-0.52387 10.99334,-1.72798 7.87361,-2.54113 14.75422,-7.76414 19.33609,-14.66821 5.75469,-8.67114 7.34192,-19.17189 4.37856,-28.9924 -1.04772,-3.44813 -2.88516,-7.18555 -5.01189,-10.1489 -2.58023,-3.58887 -5.84853,-6.73988 -9.49212,-9.14027 -4.5975,-3.04154 -9.58595,-4.90244 -15.00443,-5.60614 -2.83043,-0.3753 -6.6695,-0.32839 -9.54685,0.10165 -11.07935,1.67324 -20.97805,8.81969 -26.0134,18.77312 -2.62715,5.19174 -3.88598,10.96207 -3.58105,16.43528 0.25021,4.62096 1.26666,8.62422 3.21356,12.65877 2.33784,4.85552 5.67651,8.96043 10.07071,12.36946 3.8078,2.96336 8.58513,5.19955 13.30773,6.23947 2.59587,0.57077 4.40985,0.76624 7.15428,0.76624 3.94071,0 6.90407,-0.47695 10.50857,-1.66542 6.53658,-2.17364 12.26,-6.29419 16.42746,-11.85341 3.39339,-4.51932 5.48103,-9.67195 6.22383,-15.325 0.16419,-1.29012 0.23456,-4.95717 0.11728,-6.30202 -0.48477,-5.36375 -2.18147,-10.23491 -5.14482,-14.76986 -1.68888,-2.57241 -4.22219,-5.3872 -6.56786,-7.30283 -6.43494,-5.24647 -14.41801,-7.89707 -22.29944,-7.40448 -8.06126,0.50823 -15.29372,3.77652 -20.96241,9.47648 -2.58805,2.59587 -4.48803,5.28556 -6.09872,8.61641 -1.61851,3.35429 -2.56459,6.77114 -2.89299,10.45383 -0.10946,1.29794 -0.0938,4.15965 0.0391,5.44976 0.23456,2.32221 0.64896,4.24565 1.36048,6.4193 3.5185,10.62585 12.81514,18.74185 23.77721,20.76694 3.20574,0.59423 6.70078,0.67242 9.77359,0.23457 8.60077,-1.23539 16.30236,-6.06745 21.13443,-13.26082 2.87735,-4.28474 4.53495,-9.0308 4.91025,-14.09744 0.10165,-1.29011 0.0547,-4.01108 -0.086,-5.19955 -0.64115,-5.39503 -2.87735,-10.68841 -6.2942,-14.89496 -4.44894,-5.47322 -10.52421,-9.16373 -17.27972,-10.50857 -1.79052,-0.35967 -2.95553,-0.48477 -5.00408,-0.53169 -2.02509,-0.0469 -3.59668,0.0625 -5.39503,0.36749 -12.45547,2.1111 -22.2838,12.19745 -23.84757,24.47309 -0.17984,1.39176 -0.23457,4.02672 -0.1251,5.44194 0.45349,5.48885 2.53331,10.64931 6.08308,15.08261 0.8288,1.03991 2.90081,3.13537 3.94854,3.99544 4.38639,3.62015 9.75014,5.85635 15.25463,6.35675 1.21974,0.11729 3.93289,0.11729 5.05881,0.008 8.30365,-0.82098 15.74722,-5.30119 20.36036,-12.23654 2.3222,-3.49504 3.69051,-7.14645 4.23783,-11.33737 0.19547,-1.43086 0.18765,-4.69915 0,-6.09873 -0.40659,-3.01026 -1.10246,-5.36375 -2.35349,-7.99089 -1.30574,-2.72879 -2.97117,-5.06663 -5.19955,-7.30283 -3.54195,-3.54977 -7.73287,-5.92671 -12.53366,-7.09954 -3.7687,-0.93045 -7.95961,-0.96954 -11.74395,-0.1251 -6.90407,1.54813 -13.01843,5.9658 -16.66985,12.04107 -3.25265,5.41066 -4.3082,11.78305 -2.94772,17.85049 1.8609,8.30365 8.13164,15.27809 16.28673,18.10852 6.24728,2.17365 13.01061,1.72016 18.94513,-1.25101 6.93535,-3.47159 11.82215,-9.98471 13.08099,-17.40483 1.2432,-7.3732 -1.21193,-14.82459 -6.6695,-20.21961 -3.04936,-3.00245 -6.98226,-5.20738 -11.03244,-6.16128 -5.50449,-1.30575 -11.11844,-0.58642 -16.11471,2.04855 -0.98518,0.52386 -2.33784,1.39958 -3.40121,2.21274 -1.00081,0.75843 -3.04154,2.78352 -3.86252,3.82343 -4.33948,5.51231 -5.83289,12.29909 -4.14401,18.89823 1.44649,5.64523 5.3012,10.64149 10.50075,13.60484 9.46866,5.40285 21.33772,2.94772 27.92122,-5.78596 2.03291,-2.69752 3.26828,-5.55923 3.87816,-8.99171 0.23456,-1.3214 0.29712,-4.20656 0.11728,-5.5905 -0.39876,-3.03373 -1.44649,-5.91107 -3.08064,-8.44439 -1.56377,-2.43167 -3.97981,-4.80861 -6.46621,-6.37239 -0.91481,-0.57859 -2.83825,-1.51686 -3.83125,-1.87653 -6.13,-2.21274 -12.79168,-1.3683 -18.13979,2.29094 -1.18847,0.81316 -1.88435,1.39176 -2.89299,2.40039 -3.12755,3.12755 -5.05099,7.04481 -5.5905,11.37647 -0.11728,0.97736 -0.0938,3.36212 0.0391,4.4333 0.64897,4.99626 3.40121,9.63286 7.55303,12.72913 2.6897,2.00946 5.86416,3.26048 9.21064,3.6436 1.17283,0.13292 4.02672,0.0469 5.09009,-0.14856 3.94854,-0.74279 7.22464,-2.45513 10.00816,-5.25428 1.18848,-1.18065 2.01727,-2.24402 2.83826,-3.62796 2.76006,-4.65223 3.16664,-10.34438 1.11028,-15.27027 -2.42385,-5.78597 -7.77197,-9.8987 -13.90979,-10.70404 -1.32139,-0.17202 -3.95635,-0.11729 -5.17609,0.11728 -3.59669,0.68024 -6.7086,2.34566 -9.24192,4.96499 -5.76251,5.95016 -6.20037,14.78549 -1.05554,21.15788 0.61769,0.76625 1.93126,2.0329 2.74442,2.6506 2.07982,1.57159 4.44112,2.60369 7.02135,3.065 1.14156,0.20329 3.50286,0.24239 4.60532,0.0782 5.99708,-0.89135 10.8526,-4.92589 12.65877,-10.53203 2.03291,-6.32547 -0.7037,-13.27645 -6.57568,-16.74022 -3.71397,-2.18146 -8.23328,-2.56459 -12.18181,-1.02427 -4.2222,1.64196 -7.34975,5.11355 -8.48348,9.41393 -0.42222,1.62632 -0.49259,3.87816 -0.1642,5.52013 1.04773,5.19173 5.01972,9.18718 10.27401,10.32091 0.67242,0.14074 1.05554,0.17202 2.40039,0.17202 1.39176,0.008 1.71233,-0.0156 2.45513,-0.17983 6.7946,-1.4465 11.15753,-7.91271 9.65631,-14.31637 -1.08682,-4.66787 -5.05099,-8.2411 -9.79705,-8.83533 -1.07901,-0.14074 -2.66624,-0.0547 -3.72961,0.18765 -2.15019,0.49259 -3.98762,1.5325 -5.5123,3.11191 -0.86008,0.89136 -1.34485,1.5716 -1.87654,2.61151 -0.74279,1.46995 -1.079,2.87735 -1.079,4.52713 0,1.68106 0.30494,2.95554 1.05555,4.44894 0.49259,0.97736 0.9539,1.63415 1.75143,2.46295 1.42303,1.48558 3.01808,2.37694 5.19955,2.91644 0.2893,0.0704 0.93045,0.10164 1.95472,0.10164 1.39176,-0.008 1.58723,-0.0235 2.27529,-0.21111 3.16665,-0.86007 5.60614,-3.08845 6.60695,-6.02835 0.6177,-1.80616 0.57078,-4.08927 -0.11728,-5.80161 -0.64897,-1.61069 -1.8218,-3.08063 -3.21356,-4.02672 -2.88516,-1.95472 -6.73205,-1.89217 -9.46866,0.17202 -3.63578,2.7366 -4.11273,7.76414 -1.04773,10.89169 0.96172,0.97736 1.986,1.58723 3.24484,1.93127 0.93826,0.2502 2.43167,0.2502 3.30738,0 2.16583,-0.6177 3.80779,-2.12674 4.48022,-4.12055 0.2502,-0.75062 0.33621,-1.986 0.19547,-2.82262 -0.42222,-2.42385 -2.58805,-4.37857 -5.01972,-4.54277 -2.34566,-0.15637 -4.4724,1.30576 -5.11355,3.5185 -0.17983,0.63333 -0.17201,1.68106 0.0313,2.32221 0.56296,1.77488 2.02509,2.89298 3.79216,2.89298 1.00081,0 1.68105,-0.26584 2.40821,-0.93045 1.55596,-1.42303 1.27448,-3.88598 -0.54732,-4.7226 -0.47695,-0.21893 -1.4074,-0.23456 -1.81398,-0.0234 -0.94608,0.48477 -1.36049,1.4934 -0.94608,2.29875 0.39094,0.75843 1.43867,0.93044 1.86871,0.29711 0.23456,-0.34403 0.21893,-0.4144 -0.11729,-0.46913 -0.52386,-0.0938 -0.55514,-0.11728 -0.53168,-0.35967 0.008,-0.13292 0.086,-0.31275 0.1642,-0.39876 0.21893,-0.24239 0.81316,-0.17202 1.14155,0.13292 0.67243,0.63333 0.58642,1.57941 -0.21111,2.28311 -1.16501,1.02428 -2.97899,0.54732 -3.7296,-0.98518 -0.23457,-0.46913 -0.25802,-0.58641 -0.25802,-1.22756 0,-0.62551 0.0313,-0.75843 0.24238,-1.21193 0.62551,-1.29793 1.80616,-2.0329 3.26829,-2.0329 1.93126,0 3.55759,1.35266 4.00327,3.33866 0.48477,2.1971 -0.95391,4.51149 -3.33085,5.35593 -0.43785,0.14856 -0.6646,0.17983 -1.60286,0.17983 -0.98518,0 -1.14938,-0.0234 -1.68888,-0.21111 -1.96254,-0.68806 -3.40903,-2.34566 -3.79216,-4.34729 -0.59423,-3.08846 1.48559,-6.18474 4.74606,-7.06827 0.5395,-0.14074 0.84444,-0.17201 1.71233,-0.17201 1.25884,0.008 1.93127,0.16419 3.01027,0.69588 3.49504,1.70451 4.99627,5.98926 3.33084,9.47648 -0.42221,0.88353 -0.86789,1.51686 -1.56377,2.22056 -1.78271,1.80616 -4.36293,2.68187 -6.85716,2.33002 -3.75306,-0.51604 -6.8337,-3.58886 -7.38102,-7.3341 -0.13292,-0.87572 -0.0547,-2.43949 0.14856,-3.23702 0.87572,-3.34648 3.4794,-5.93453 6.86498,-6.81806 2.75224,-0.71934 5.49667,-0.22675 7.99871,1.43867 0.81316,0.5395 2.08764,1.79834 2.63496,2.59587 0.86789,1.26666 1.47777,2.76006 1.71233,4.17528 0.14856,0.93045 0.10947,2.73661 -0.0782,3.59668 -0.43003,1.92345 -1.33702,3.63578 -2.68969,5.05882 -1.39176,1.45431 -2.9008,2.41603 -4.75388,3.0259 -2.15019,0.69588 -4.74606,0.68024 -6.91188,-0.0625 -3.94072,-1.33703 -6.88844,-4.62096 -7.77979,-8.68677 -0.17201,-0.78971 -0.24238,-2.99463 -0.1251,-3.84689 0.28148,-1.9469 1.04773,-3.79997 2.25184,-5.44976 0.24238,-0.32839 0.8288,-0.98517 1.30575,-1.45431 1.71233,-1.69669 3.7296,-2.79916 6.18473,-3.36993 0.8679,-0.20329 1.06337,-0.21893 2.61933,-0.21893 1.6576,-0.008 1.86089,0.0156 3.11973,0.31275 1.15719,0.28148 2.76006,0.96954 3.82343,1.64197 1.82962,1.16501 3.58105,3.065 4.66005,5.03535 0.64115,1.18847 1.18847,2.89299 1.38394,4.35512 0.13292,1.03209 0.0547,3.28393 -0.15638,4.23001 -0.5004,2.26748 -1.57159,4.38639 -3.12755,6.16128 -2.00163,2.29874 -4.90243,3.95635 -7.99871,4.58186 -0.76625,0.15637 -1.1181,0.17983 -2.60368,0.17983 -1.86872,-0.008 -2.48641,-0.086 -3.92508,-0.5004 -2.36912,-0.68025 -4.32384,-1.82181 -6.15346,-3.60451 -5.95016,-5.77033 -5.9658,-14.8715 -0.0391,-20.79039 2.35348,-2.3613 5.30902,-3.87035 8.70241,-4.44112 0.97736,-0.1642 3.62014,-0.18766 4.50367,-0.0391 2.95554,0.50823 5.24647,1.46213 7.4123,3.09628 4.40203,3.33084 6.84933,8.59294 6.42711,13.85505 -0.30493,3.8547 -1.86871,7.30283 -4.58967,10.11762 -2.63497,2.73661 -5.83289,4.42549 -9.61723,5.09009 -0.81316,0.14856 -1.30575,0.17984 -2.64278,0.17984 -2.18146,0.008 -3.53413,-0.20329 -5.5514,-0.86008 -0.93826,-0.30493 -2.72879,-1.14156 -3.59668,-1.67324 -3.16665,-1.93908 -5.80161,-5.02754 -7.18555,-8.42093 -2.64278,-6.47403 -1.1181,-13.77686 3.94071,-18.87477 0.53951,-0.5395 1.25884,-1.20411 1.60287,-1.47777 2.73661,-2.15801 5.73906,-3.4403 9.24192,-3.95635 1.17283,-0.17201 3.6045,-0.17201 4.83206,0 4.32384,0.60987 8.09254,2.5255 11.18882,5.68432 2.89298,2.96336 4.7226,6.70078 5.27774,10.78224 0.13292,0.94608 0.13292,3.64359 0,4.61313 -0.62551,4.68351 -3.02591,9.09336 -6.64605,12.20527 -8.02998,6.91971 -19.76612,6.55222 -27.40516,-0.8679 -3.3543,-3.25264 -5.39503,-7.1699 -6.12218,-11.75177 -0.19548,-1.23538 -0.19548,-4.33947 0,-5.60613 0.70369,-4.58968 2.78352,-8.63204 6.12218,-11.90033 3.29956,-3.23702 7.30283,-5.25429 11.91597,-6.01272 1.40739,-0.23457 4.12054,-0.2893 5.59049,-0.11728 2.78352,0.32839 5.06664,1.01645 7.54522,2.28311 7.38102,3.75306 12.12708,11.35301 12.11926,19.42209 0,3.52631 -0.76625,6.66168 -2.40039,9.87524 -1.1181,2.18929 -2.38476,3.91726 -4.19874,5.73124 -3.81561,3.82343 -8.52258,6.09091 -13.92542,6.72423 -1.49341,0.17202 -4.31602,0.11729 -5.84852,-0.1251 -8.71023,-1.35266 -16.02088,-7.46703 -18.89041,-15.81759 -0.39876,-1.14937 -0.74279,-2.54895 -0.9539,-3.8547 -0.23457,-1.46213 -0.2893,-4.35512 -0.10947,-5.89544 0.61769,-5.40284 2.94772,-10.17236 6.88061,-14.12089 2.98681,-2.98681 6.5835,-5.137 10.59458,-6.31765 3.79216,-1.11028 7.85797,-1.27448 11.79087,-0.46913 6.51312,1.33702 12.35382,5.34029 16.06779,11.01679 2.15019,3.29957 3.47159,7.03699 3.88598,10.98553 0.10165,0.96954 0.10165,3.51849 0,4.54276 -0.84444,8.67114 -6.23164,16.36492 -14.26945,20.38382 -7.42793,3.71396 -16.02088,3.65923 -23.49572,-0.14856 -6.86498,-3.48722 -12.06453,-9.99252 -13.84724,-17.311 -0.51604,-2.12673 -0.71151,-3.81561 -0.71933,-6.05963 -0.0156,-3.55758 0.6646,-6.88843 2.05636,-10.14108 3.33866,-7.77978 10.23491,-13.67522 18.53074,-15.84886 3.46377,-0.90699 7.10736,-1.11028 10.75096,-0.58642 8.14727,1.16501 15.411,5.92671 19.90686,13.04971 1.86871,2.95553 3.24483,6.57567 3.81561,10.0238 0.46131,2.76006 0.47695,5.87979 0.0391,8.58512 -1.6576,10.37565 -9.20282,19.15626 -19.42209,22.6122 -6.2942,2.12673 -13.04189,2.00945 -19.39082,-0.33621 -1.88435,-0.69588 -4.44894,-2.02509 -6.21601,-3.22138 -9.12463,-6.16127 -14.13653,-16.78713 -12.90115,-27.38171 1.55596,-13.3781 12.43984,-24.3558 26.03687,-26.27143 2.68969,-0.3753 5.85634,-0.3753 8.48348,0.008 6.84933,0.98518 13.0888,4.19092 17.98342,9.22628 4.92589,5.06663 7.88924,11.36864 8.6164,18.32745 0.14856,1.43085 0.1251,4.69914 -0.0469,6.09872 -0.85225,7.0839 -3.92507,13.39374 -8.96043,18.44473 -5.43412,5.44976 -12.25218,8.67114 -19.93813,9.43739 -1.5716,0.15637 -5.02754,0.10946 -6.5835,-0.0782 -7.46703,-0.93045 -14.22254,-4.28475 -19.49246,-9.67195 -3.57323,-3.65142 -6.08309,-7.74069 -7.65468,-12.44766 -1.19629,-3.57322 -1.68106,-6.85715 -1.58723,-10.64931 0.11728,-4.78515 1.21192,-9.10117 3.40903,-13.44847 1.68887,-3.34648 3.74524,-6.13782 6.51312,-8.83533 8.46785,-8.28019 20.376,-11.50157 31.7681,-8.59294 3.55759,0.90699 7.16209,2.49422 10.24273,4.52713 7.06826,4.65223 12.23654,11.74395 14.34764,19.68793 1.20411,4.53495 1.41522,9.33574 0.61769,13.93324 -1.17283,6.73205 -4.37857,12.94024 -9.28882,17.9756 -10.59458,10.83696 -26.67802,13.72995 -40.27504,7.22464 -10.7666,-5.14482 -18.39782,-15.40319 -20.00851,-26.8813 -0.2893,-2.10328 -0.34403,-3.01809 -0.29712,-5.41066 0.0469,-2.7757 0.25021,-4.5115 0.80535,-6.94317 0.90699,-4.00326 2.60368,-7.96743 4.91807,-11.49375 5.78597,-8.79623 15.23899,-14.81677 25.52864,-16.25544 3.72178,-0.51605 7.40447,-0.47695 11.02461,0.11728 5.89544,0.96954 11.48593,3.38557 16.34146,7.06045 1.4934,1.13373 2.40821,1.93908 3.95635,3.4794 3.03372,3.03372 5.19955,6.05963 7.06826,9.8596 2.05637,4.19874 3.19792,8.30365 3.59669,12.99498 0.14074,1.6185 0.0625,5.32465 -0.14856,6.94316 -1.07119,8.26455 -4.67569,15.60648 -10.57113,21.54101 -7.65467,7.70159 -18.06942,11.82214 -28.64836,11.33737 -5.54358,-0.2502 -10.30528,-1.46995 -15.24681,-3.90944 -4.06582,-2.00163 -7.19337,-4.24565 -10.4382,-7.4983 -3.04155,-3.04155 -5.24647,-6.05963 -7.11518,-9.74232 -4.01109,-7.88143 -5.10573,-16.42747 -3.20574,-24.98132 1.55596,-7.03699 5.34029,-13.7534 10.7275,-19.04678 6.7086,-6.59914 15.12171,-10.4773 24.57473,-11.33738 1.76707,-0.15637 5.74688,-0.11728 7.42793,0.0782 6.13782,0.72716 11.75178,2.6897 16.8966,5.91889 3.67487,2.30657 7.16991,5.38721 9.85178,8.67114 7.32629,8.99171 10.34438,20.18052 8.42875,31.27551 -2.82261,16.36491 -16.20071,29.74301 -32.87056,32.87056 -2.81479,0.52387 -4.08927,0.63333 -7.54521,0.63333 -3.1041,-0.008 -3.92508,-0.0625 -6.33329,-0.43786 -11.29828,-1.76707 -21.68175,-8.46784 -28.17924,-18.15543 -2.73661,-4.08928 -4.7617,-8.73369 -5.86416,-13.48757 -1.60287,-6.88061 -1.29011,-14.27727 0.89917,-21.04841 1.25884,-3.90162 3.36994,-8.10036 5.72342,-11.37647 5.65305,-7.85015 13.63612,-13.55012 22.84676,-16.29454 5.60614,-1.67324 11.39993,-2.12674 17.4361,-1.36831 5.77033,0.71934 11.81432,2.89299 17.00606,6.11437 5.23083,3.24483 9.89088,7.74069 13.32337,12.86205 2.76788,4.12837 4.96498,9.17154 6.02053,13.77686 0.79752,3.49504 1.06337,5.85634 1.05555,9.46084 0,2.51768 -0.0704,3.54977 -0.38313,5.76252 -1.53249,10.70404 -7.26374,20.54019 -16.06779,27.55372 -6.81024,5.4263 -14.94969,8.69459 -23.73029,9.50776 -1.4074,0.13291 -5.98144,0.13291 -7.38884,0 -10.3522,-0.96172 -19.72703,-5.27774 -27.23315,-12.52584 -7.36538,-7.11519 -12.08017,-16.50566 -13.22172,-26.34962 -0.4144,-3.51068 -0.35967,-7.59995 0.14856,-11.06371 0.92262,-6.33329 3.2761,-12.43202 6.92752,-17.91305 3.51068,-5.27774 8.24892,-9.91434 13.65176,-13.34683 10.0238,-6.3802 21.89286,-8.5851201 33.44916,-6.22382 13.83159,2.83043 25.83357,12.07234 32.17468,24.77802 2.53331,5.07445 3.956346,10.07071 4.550586,15.91142 0.13292,1.36048 0.13292,6.30983 0,7.6625 -0.60988,6.07526 -2.165826,11.36082 -4.871166,16.59947 -6.5053,12.61185 -18.68711,21.80685 -32.63599,24.637275 -5.21519,1.05555 -10.64149,1.20411 -15.9896,0.43786 -6.7477,-0.97736 -13.44065,-3.549765 -19.31263,-7.427925 -5.4263,-3.58105 -10.14109,-8.31147 -13.72995,-13.76123 -3.4794,-5.29337 -5.8797997,-11.27482 -6.9431597,-17.31881 -0.53951,-3.05718 -0.7037,-5.30902 -0.64897,-8.79624 0.0391,-2.58023 0.13292,-3.78433 0.44568,-5.86415 2.11109,-13.90197 10.6023897,-26.35744 23.0656797,-33.83229 5.44194,-3.26829 11.67359,-5.4966701 17.86614,-6.3880201 2.64278,-0.38313 3.44031,-0.43004 6.9588,-0.43004 2.67406,0 3.62014,0.0235 4.61314,0.13292 6.216,0.68025 11.48593,2.18929 16.81058,4.8242501 5.051,2.49422 9.21064,5.48103 13.22173,9.49212 1.82962,1.83743 3.18228,3.37775 4.58968,5.24646 4.93371,6.56786 8.108166,14.13653 9.234086,22.01014 0.35185,2.44731 0.39876,3.24484 0.39876,6.64605 -0.008,3.46376 -0.0547,4.20656 -0.43003,6.80242 -2.69751,18.38218 -16.396186,34.13722 -34.637626,39.844995 -4.33166,1.35267 -8.76496,2.09546 -13.253,2.21274 l -1.87653,0.0469 -0.0235,0.69588 -0.0235,0.69588 1.74361,-0.0469 c 7.81106,-0.22675 15.13735,-2.1111 22.08051,-5.68433 8.89006,-4.566215 16.4431,-11.767405 21.36117,-20.368165 3.534126,-6.19256 5.598316,-12.7135 6.317656,-19.97724 0.17201,-1.72015 0.19547,-6.35674 0.0469,-8.05344 -0.47696,-5.32466 -1.66542,-10.17236 -3.65142,-14.89496 -5.293376,-12.59621 -15.669026,-22.66693 -28.531076,-27.6944701 -4.26911,-1.66542 -8.89006,-2.75224 -13.61267,-3.1901 -1.2432,-0.11728 -5.68432,-0.21893 -6.68514,-0.14856 z"
+   id="path121"
+   style="fill:#000000;stroke:none;stroke-width:0.00781886" /></svg>
diff --git a/application/icons/icon-56-56.png b/application/icons/icon-56-56.png
new file mode 100644
index 00000000..62ff6b3c
Binary files /dev/null and b/application/icons/icon-56-56.png differ
diff --git a/application/icons/icon-56-56.svg b/application/icons/icon-56-56.svg
new file mode 100644
index 00000000..eaa31f27
--- /dev/null
+++ b/application/icons/icon-56-56.svg
@@ -0,0 +1,54 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   height="56"
+   width="56"
+   id="svg14"
+   xml:space="preserve"
+   enable-background="new 0 0 1000 1000"
+   viewBox="0 0 56 56"
+   y="0px"
+   x="0px"
+   version="1.1"
+   sodipodi:docname="icon-56-56.svg"
+   inkscape:version="1.1.1 (eb90963e84, 2021-10-02)"
+   inkscape:export-filename="/home/strukturart/Desktop/Pages/rss-reader/application/icons/icon-56-56.png"
+   inkscape:export-xdpi="96"
+   inkscape:export-ydpi="96"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:dc="http://purl.org/dc/elements/1.1/"><sodipodi:namedview
+   pagecolor="#ffffff"
+   bordercolor="#666666"
+   borderopacity="1"
+   objecttolerance="10"
+   gridtolerance="10"
+   guidetolerance="10"
+   inkscape:pageopacity="0"
+   inkscape:pageshadow="2"
+   inkscape:window-width="1551"
+   inkscape:window-height="991"
+   id="namedview10"
+   showgrid="false"
+   inkscape:zoom="2.4448394"
+   inkscape:cx="60.944699"
+   inkscape:cy="17.588068"
+   inkscape:window-x="26"
+   inkscape:window-y="23"
+   inkscape:window-maximized="0"
+   inkscape:current-layer="svg14"
+   inkscape:document-rotation="0"
+   inkscape:pagecheckerboard="false" /><defs
+   id="defs18" />
+<metadata
+   id="metadata2"> Svg Vector Icons : http://www.onlinewebfonts.com/icon <rdf:RDF><cc:Work
+     rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
+       rdf:resource="http://purl.org/dc/dcmitype/StillImage" /></cc:Work></rdf:RDF></metadata>
+
+<path
+   d="m 26.041068,2.0478106 c -0.121968,0.00836 -0.479765,0.0325 -0.792834,0.056922 -4.64317,0.3577977 -9.152162,2.0003873 -13.010632,4.736687 C 6.7406087,10.740543 2.9472032,16.59939 1.7721873,23.00306 c -0.2927511,1.585668 -0.3862584,2.671244 -0.3903256,4.391082 0,1.471834 0.0325,1.984128 0.2073596,3.293322 0.6139352,4.574048 2.5817944,8.981398 5.6352295,12.628441 4.2569122,5.07414 10.2743332,8.330867 16.7430492,9.062713 1.96786,0.219551 4.387024,0.178899 6.363017,-0.105709 10.489818,-1.516554 19.101234,-9.660388 21.097545,-19.942855 0.28055,-1.447432 0.406585,-2.842009 0.402518,-4.488665 0,-1.638532 -0.130103,-2.97212 -0.422844,-4.45208 C 50.598633,19.339748 48.8422,15.708973 46.101834,12.411592 45.536686,11.728535 43.776186,9.9721021 43.097195,9.4069449 40.308041,7.0853644 37.299335,5.4793699 33.928765,4.50357 32.521995,4.0969851 31.009508,3.8123775 29.354717,3.641613 28.541557,3.56027 25.756461,3.572527 24.922974,3.661949 21.80855,3.9994202 19.14544,4.7719184 16.445736,6.1136411 c -2.467961,1.2278796 -4.52526,2.711906 -6.4890526,4.6716309 -2.7281654,2.724107 -4.6675639,5.838521 -5.8507235,9.392049 -0.8131604,2.447625 -1.1709581,4.647237 -1.1709581,7.21683 0,1.593802 0.093517,2.659052 0.3618648,4.147145 0.8660148,4.765139 3.362427,9.339195 6.9769434,12.778879 5.525453,5.261173 13.014699,7.594955 20.369776,6.350807 3.895056,-0.658656 7.635607,-2.329715 10.76629,-4.809868 1.707655,-1.353915 3.354311,-3.081887 4.602517,-4.826127 2.325648,-3.260795 3.720225,-6.883436 4.159338,-10.815087 0.09351,-0.817228 0.130102,-3.110357 0.06101,-3.915383 C 50.082309,24.442367 49.752972,22.759115 49.20816,21.100266 47.467987,15.761836 43.804675,11.224385 38.868772,8.2888597 38.303624,7.9513978 36.90498,7.2398789 36.286968,6.9715307 31.814572,5.0402665 26.874592,4.5848944 22.178568,5.6664031 13.063001,7.772499 6.0209927,15.302397 4.6955386,24.34885 c -0.1667066,1.142498 -0.2154939,1.99632 -0.191091,3.431559 0.020336,1.309195 0.061007,1.874343 0.2114175,2.846076 0.5570136,3.565719 1.9881857,6.924088 4.183731,9.839287 0.6627317,0.878216 1.1668909,1.451498 2.0938949,2.382569 0.90261,0.898552 1.475901,1.406779 2.32159,2.053242 4.561845,3.476279 10.274332,5.070081 15.89736,4.423618 6.480928,-0.739979 12.372295,-4.370764 15.999012,-9.855555 1.939399,-2.935525 3.073762,-6.12313 3.443751,-9.676657 0.06909,-0.683058 0.06909,-3.10629 0,-3.781214 -0.28054,-2.64685 -0.955473,-5.017227 -2.081702,-7.285953 C 46.39867,18.376159 46.203512,18.002111 46.142524,17.892326 45.374083,16.542478 44.646305,15.485363 43.764022,14.424181 43.2192,13.769593 42.027906,12.557972 41.365184,11.980623 36.600036,7.8416126 30.489108,5.9875964 24.374113,6.8251597 16.799485,7.8619484 10.22505,13.009277 7.4277619,20.096005 c -0.7399704,1.87841 -1.1872175,3.866596 -1.3539149,6.001153 -0.089422,1.179092 -0.00836,3.090021 0.1911003,4.346361 0.878207,5.635229 4.1918557,10.762233 9.0423767,13.994557 1.292936,0.861957 2.760703,1.618205 4.208134,2.163027 2.500479,0.94733 4.952172,1.370174 7.643742,1.313253 1.085576,-0.02442 1.492161,-0.05284 2.358175,-0.174832 3.655179,-0.508227 7.107064,-1.992244 10.001927,-4.301641 1.195352,-0.955465 2.374435,-2.130481 3.338043,-3.338034 3.850336,-4.817992 5.228644,-11.115954 3.716157,-16.958543 C 44.621911,15.615475 38.246702,9.7606847 30.578558,8.4433557 28.679821,8.1180952 26.520871,8.077433 24.658721,8.3295126 17.571992,9.2931112 11.522053,14.009471 8.8873947,20.624558 c -1.1709581,2.935525 -1.5572073,6.175984 -1.1180945,9.351397 0.418777,3.024974 1.6954439,6.110928 3.5494518,8.578879 1.175034,1.565342 2.549275,2.939592 4.069897,4.061754 2.114221,1.569409 4.635036,2.740367 7.119256,3.301457 1.516545,0.341529 2.64685,0.463497 4.305699,0.463497 2.036982,0 3.78528,-0.272406 5.716554,-0.898543 4.094281,-1.321396 7.672202,-4.03736 10.054771,-7.627482 2.992447,-4.509001 3.817809,-9.969399 2.276861,-15.076066 C 44.316968,20.986423 43.361504,19.042957 42.255602,17.50201 40.913879,15.635801 39.214368,13.99727 37.31969,12.749063 34.928986,11.167463 32.33499,10.199798 29.517375,9.8338655 28.04555,9.6387074 26.04923,9.663101 24.553012,9.8867013 18.791738,10.756783 13.644408,14.47294 11.026019,19.64874 c -1.3661168,2.699704 -2.0207142,5.700276 -1.8621511,8.546351 0.1301116,2.402905 0.6586645,4.484608 1.6710601,6.582569 1.215678,2.524873 2.951784,4.65943 5.236779,6.432131 1.980051,1.540948 4.464271,2.703772 6.92003,3.244526 1.349848,0.296809 2.29312,0.398451 3.720225,0.398451 2.049174,0 3.590122,-0.248013 5.464465,-0.866015 3.399022,-1.130305 6.375209,-3.272987 8.542294,-6.163792 1.764567,-2.350051 2.850133,-5.029419 3.236392,-7.969011 0.08534,-0.670857 0.121977,-2.577728 0.06101,-3.277054 -0.25208,-2.789155 -1.134363,-5.322162 -2.675311,-7.680337 -0.878226,-1.337656 -2.195545,-2.801346 -3.415291,-3.797482 -3.346177,-2.728166 -7.49738,-4.106473 -11.595729,-3.850327 -4.191865,0.264272 -7.952743,1.963792 -10.900469,4.927778 -1.34578,1.349847 -2.333782,2.748491 -3.171336,4.48053 -0.84163,1.744241 -1.333588,3.521 -1.504362,5.436005 -0.05692,0.674923 -0.04875,2.163017 0.02034,2.833883 0.121977,1.207544 0.337462,2.207738 0.707452,3.338033 1.829622,5.525454 6.663883,9.74578 12.364159,10.798828 1.666993,0.309001 3.484414,0.349664 5.082283,0.121977 4.472406,-0.642405 8.477238,-3.155086 10.989919,-6.895637 1.496228,-2.228073 2.358176,-4.696024 2.553334,-7.330682 0.05284,-0.670857 0.02851,-2.08576 -0.04476,-2.703772 -0.333404,-2.805413 -1.496228,-5.557972 -3.272987,-7.745383 -2.313456,-2.846076 -5.4726,-4.765148 -8.985474,-5.464465 -0.931071,-0.187034 -1.536881,-0.252089 -2.602121,-0.276483 -1.053048,-0.02442 -1.870275,0.0325 -2.805422,0.191091 -6.476851,1.097777 -11.587586,6.342691 -12.400755,12.726025 -0.09351,0.72372 -0.121978,2.093904 -0.06509,2.829816 0.23582,2.85421 1.317329,5.537646 3.163211,7.842967 0.430978,0.540754 1.50842,1.630397 2.053241,2.077635 2.280928,1.882477 5.070082,3.045301 7.932426,3.305515 0.634261,0.06101 2.045107,0.06101 2.630581,0.0037 4.317901,-0.426911 8.188564,-2.756626 10.587401,-6.363008 1.207554,-1.81743 1.919063,-3.716166 2.20368,-5.895443 0.101642,-0.744047 0.09757,-2.443558 0,-3.171345 -0.211427,-1.565342 -0.573282,-2.789154 -1.223822,-4.155271 -0.678991,-1.41897 -1.545006,-2.634648 -2.703762,-3.797472 -1.841815,-1.845882 -4.021101,-3.081896 -6.517513,-3.691764 -1.959734,-0.483833 -4.139011,-0.504169 -6.10687,-0.06509 -3.590123,0.805026 -6.769593,3.102222 -8.668329,6.261366 -1.691386,2.813548 -2.240266,6.127188 -1.532814,9.282274 0.967666,4.3179 4.228451,7.944608 8.469104,9.416442 3.248593,1.130296 6.765525,0.894476 9.851488,-0.65053 3.606382,-1.805229 6.147523,-5.192059 6.802121,-9.05052 0.646463,-3.834077 -0.630204,-7.708807 -3.468145,-10.51422 -1.585668,-1.561275 -3.630785,-2.707839 -5.736881,-3.203873 -2.862335,-0.678991 -5.781591,-0.304934 -8.379654,1.065249 -0.512294,0.272415 -1.215687,0.727787 -1.768634,1.150632 -0.520428,0.394383 -1.581601,1.447431 -2.008512,1.988185 -2.256534,2.866402 -3.033109,6.395536 -2.154892,9.827095 0.752181,2.935516 2.756635,5.533579 5.460397,7.074527 4.923711,2.80948 11.095628,1.532814 14.519053,-3.008706 1.057115,-1.402711 1.699511,-2.890805 2.016646,-4.675698 0.121978,-0.687125 0.154505,-2.187411 0.06101,-2.907064 -0.207359,-1.577534 -0.752171,-3.073762 -1.601936,-4.391091 -0.813161,-1.264465 -2.069501,-2.500479 -3.362436,-3.31364 -0.475699,-0.300876 -1.475893,-0.788776 -1.992244,-0.9758 -3.187605,-1.150631 -6.651692,-0.711518 -9.432711,1.191285 -0.618003,0.422844 -0.979858,0.72372 -1.504353,1.248206 -1.626331,1.62633 -2.626515,3.663312 -2.907065,5.915779 -0.06101,0.508227 -0.04875,1.748299 0.02034,2.305321 0.337471,2.598054 1.768634,5.009084 3.927584,6.619155 1.398645,1.044914 3.049368,1.695444 4.789542,1.894669 0.609877,0.06909 2.093894,0.02442 2.64685,-0.07726 2.053241,-0.386258 3.75682,-1.276667 5.204251,-2.732233 0.618012,-0.613935 1.048981,-1.166891 1.475892,-1.886544 1.435239,-2.419164 1.646657,-5.379082 0.577349,-7.94055 -1.260407,-3.008706 -4.041427,-5.14733 -7.233099,-5.566107 -0.687125,-0.08942 -2.057308,-0.06101 -2.69157,0.06101 -1.870275,0.353731 -3.488471,1.219745 -4.8058,2.581795 -2.996514,3.094088 -3.2242,7.688471 -0.548889,11.00212 0.321193,0.39845 1.004261,1.057106 1.427105,1.378308 1.081509,0.817228 2.309388,1.353924 3.651111,1.593802 0.593609,0.105709 1.821479,0.126045 2.394761,0.04067 3.118491,-0.463506 5.643364,-2.561468 6.582569,-5.476667 1.057115,-3.289246 -0.365923,-6.903771 -3.419358,-8.704923 -1.931264,-1.134364 -4.281305,-1.333589 -6.334547,-0.532621 -2.195545,0.853823 -3.821875,2.659043 -4.411417,4.89525 -0.219552,0.845689 -0.256147,2.016647 -0.08534,2.87047 0.544822,2.699704 2.610256,4.777339 5.342488,5.366881 0.349663,0.07317 0.548889,0.08942 1.248206,0.08942 0.72372,0.0037 0.890418,-0.0084 1.276667,-0.09351 3.533201,-0.752181 5.801927,-4.114617 5.021294,-7.444526 -0.565148,-2.427298 -2.626523,-4.285372 -5.094475,-4.594373 -0.561081,-0.07317 -1.386443,-0.02842 -1.939398,0.09757 -1.118104,0.256147 -2.073568,0.796901 -2.866402,1.618196 -0.447247,0.463506 -0.699327,0.817228 -0.9758,1.357982 -0.386249,0.764382 -0.561081,1.496228 -0.561081,2.354118 0,0.874149 0.158563,1.53688 0.548879,2.313446 0.256147,0.508235 0.496034,0.849765 0.910754,1.280734 0.73997,0.772507 1.569399,1.236014 2.703762,1.516554 0.150438,0.03659 0.483833,0.05284 1.016462,0.05284 0.723711,-0.0037 0.825362,-0.01216 1.183151,-0.109776 1.646656,-0.447238 2.915198,-1.606004 3.435617,-3.13475 0.321202,-0.939205 0.296809,-2.126423 -0.06101,-3.01684 -0.337471,-0.837554 -0.947339,-1.601928 -1.671059,-2.093895 -1.500286,-1.016462 -3.500673,-0.983934 -4.923711,0.08942 -1.890602,1.423047 -2.138624,4.037369 -0.544812,5.663699 0.500092,0.508227 1.032712,0.825362 1.68731,1.004261 0.4879,0.130102 1.264474,0.130102 1.719846,0 1.126229,-0.321202 1.980052,-1.105911 2.329715,-2.142691 0.130102,-0.390325 0.174832,-1.032721 0.101642,-1.467767 -0.219552,-1.260398 -1.345781,-2.27686 -2.610255,-2.362243 -1.219746,-0.08134 -2.325648,0.678991 -2.659052,1.829623 -0.09351,0.329328 -0.08942,0.874149 0.01625,1.207553 0.292742,0.922937 1.053048,1.504353 1.971926,1.504353 0.520419,0 0.874149,-0.138237 1.252274,-0.483833 0.809093,-0.739979 0.662722,-2.020713 -0.284608,-2.455759 -0.248022,-0.113843 -0.731855,-0.121977 -0.943272,-0.01216 -0.491967,0.252089 -0.707461,0.776574 -0.491967,1.195351 0.203292,0.394393 0.748114,0.483833 0.971733,0.154506 0.121977,-0.178899 0.113843,-0.215485 -0.06101,-0.243946 -0.272406,-0.04875 -0.288674,-0.06101 -0.276473,-0.187033 0.0037,-0.06909 0.04476,-0.16263 0.08534,-0.207359 0.113843,-0.126036 0.422844,-0.08942 0.593609,0.06908 0.349663,0.329328 0.304934,0.821295 -0.109776,1.187218 -0.60581,0.532629 -1.549082,0.284607 -1.939399,-0.512294 -0.121977,-0.243945 -0.134179,-0.304934 -0.134179,-0.638329 0,-0.325269 0.01625,-0.394383 0.126045,-0.630203 0.32527,-0.674924 0.939205,-1.057115 1.699511,-1.057115 1.004261,0 1.849949,0.703384 2.081702,1.736106 0.25208,1.142497 -0.496025,2.345983 -1.732039,2.785087 -0.227686,0.07726 -0.345596,0.09352 -0.833496,0.09352 -0.512293,0 -0.597666,-0.01216 -0.878216,-0.109776 -1.02052,-0.357797 -1.772692,-1.219745 -1.971927,-2.260601 -0.308991,-1.605994 0.772508,-3.216065 2.467961,-3.675504 0.280541,-0.07317 0.439104,-0.08942 0.890418,-0.08942 0.654597,0.0037 1.004251,0.08543 1.565341,0.361865 1.817422,0.88635 2.598054,3.114414 1.732039,4.927778 -0.219561,0.45943 -0.451305,0.788766 -0.813169,1.154689 -0.927004,0.939205 -2.268727,1.394577 -3.56572,1.211611 -1.9516,-0.268339 -3.553527,-1.866208 -3.838144,-3.813741 -0.06909,-0.455372 -0.02841,-1.268533 0.07726,-1.683243 0.455372,-1.740173 1.809287,-3.085963 3.569787,-3.545402 1.431172,-0.374047 2.858277,-0.11791 4.159337,0.748114 0.422844,0.280541 1.085576,0.935138 1.370184,1.349848 0.451305,0.658664 0.76844,1.435239 0.890408,2.171152 0.07726,0.483832 0.05692,1.423037 -0.04067,1.870275 -0.223619,1.000194 -0.695251,1.890611 -1.398645,2.630591 -0.723711,0.756239 -1.50842,1.25634 -2.472018,1.573476 -1.118104,0.361855 -2.467951,0.353721 -3.59418,-0.0325 -2.049175,-0.69526 -3.581998,-2.402905 -4.045495,-4.517126 -0.08942,-0.410652 -0.126044,-1.557217 -0.06509,-2.000387 0.146371,-1.012395 0.544813,-1.975994 1.170959,-2.833884 0.126035,-0.170764 0.430969,-0.512293 0.67899,-0.756238 0.890418,-0.882284 1.939399,-1.455566 3.216066,-1.752366 0.451305,-0.105718 0.552946,-0.113843 1.362049,-0.113843 0.861957,-0.0037 0.967666,0.0084 1.622263,0.16263 0.601743,0.146371 1.435239,0.50416 1.988186,0.853823 0.951406,0.60581 1.86215,1.593802 2.423231,2.61839 0.333395,0.618002 0.618002,1.504352 0.719653,2.264658 0.06909,0.536688 0.02851,1.707646 -0.08134,2.199613 -0.260204,1.179092 -0.817227,2.280928 -1.626321,3.203864 -1.040855,1.195352 -2.549275,2.057309 -4.159337,2.382578 -0.398451,0.08134 -0.581417,0.09351 -1.353924,0.09351 -0.971724,-0.0037 -1.292926,-0.04476 -2.04104,-0.260214 -1.231947,-0.353722 -2.2484,-0.94733 -3.199797,-1.874343 -3.094097,-3.000572 -3.102232,-7.733191 -0.02034,-10.811011 1.223813,-1.227879 2.760694,-2.012588 4.52526,-2.309388 0.508227,-0.08543 1.882477,-0.09758 2.341917,-0.02034 1.53688,0.264281 2.728165,0.760306 3.854394,1.610071 2.289062,1.732039 3.561661,4.468339 3.34211,7.204629 -0.158564,2.004454 -0.971733,3.797482 -2.386637,5.261182 -1.370183,1.423038 -3.033099,2.301254 -5.000958,2.64685 -0.422845,0.07726 -0.678991,0.09351 -1.374251,0.09351 -1.134363,0.0037 -1.837748,-0.105708 -2.886738,-0.447237 -0.48789,-0.158573 -1.41897,-0.593609 -1.870275,-0.870082 -1.646657,-1.008328 -3.01684,-2.614332 -3.736484,-4.378899 -1.374251,-3.366494 -0.581417,-7.163976 2.049165,-9.814893 0.28055,-0.280541 0.654597,-0.626137 0.833496,-0.768441 1.423038,-1.122161 2.984312,-1.78896 4.805801,-2.057299 0.609877,-0.08942 1.874342,-0.08942 2.51268,0 2.2484,0.317136 4.208125,1.313253 5.818196,2.955851 1.504353,1.540939 2.45575,3.484405 2.744425,5.606769 0.06909,0.491958 0.06909,1.894669 0,2.398829 -0.325261,2.435433 -1.573476,4.728552 -3.455944,6.346748 -4.175606,3.598257 -10.2784,3.407166 -14.250713,-0.451305 -1.744231,-1.691377 -2.805414,-3.728359 -3.183538,-6.110928 -0.101641,-0.642396 -0.101641,-2.256534 0,-2.915198 0.365923,-2.386637 1.447432,-4.488665 3.183538,-6.188176 1.715779,-1.683252 3.797482,-2.732233 6.196319,-3.126616 0.731846,-0.121978 2.142682,-0.150438 2.907055,-0.06101 1.447441,0.170765 2.634658,0.528553 3.923517,1.187218 3.838144,1.95159 6.306096,5.903568 6.302029,10.099501 0,1.83369 -0.398451,3.464078 -1.248206,5.135137 -0.581417,1.13843 -1.240082,2.036973 -2.183344,2.980245 -1.984119,1.988186 -4.431753,3.167278 -7.241234,3.496606 -0.776574,0.08942 -2.244332,0.06101 -3.041233,-0.06509 -4.529328,-0.703394 -8.330867,-3.882864 -9.823028,-8.225158 -0.20736,-0.597676 -0.386249,-1.325464 -0.496025,-2.004455 -0.121977,-0.760306 -0.150438,-2.264659 -0.05692,-3.065627 0.321194,-2.80949 1.532814,-5.289642 3.577921,-7.342875 1.55314,-1.553149 3.423416,-2.671244 5.509185,-3.285188 1.971927,-0.57734 4.086157,-0.662732 6.131264,-0.243945 3.38683,0.69525 6.423997,2.776952 8.355261,5.728736 1.118104,1.71578 1.805229,3.659246 2.020714,5.712487 0.05284,0.50416 0.05284,1.829614 0,2.362243 -0.439104,4.509001 -3.240459,8.509766 -7.420123,10.599593 -3.862529,1.931264 -8.330867,1.902804 -12.217799,-0.07726 -3.569786,-1.813363 -6.273558,-5.196117 -7.200571,-9.001733 -0.268339,-1.105902 -0.36999,-1.984119 -0.374057,-3.15101 -0.0084,-1.849949 0.345596,-3.581988 1.069317,-5.273374 1.736106,-4.045485 5.322161,-7.111121 9.635994,-8.241417 1.801162,-0.471632 3.695831,-0.57735 5.59051,-0.304944 4.236585,0.605811 8.013731,3.081896 10.351581,6.785862 0.971732,1.53688 1.687309,3.419357 1.984118,5.212385 0.239888,1.435239 0.248022,3.057502 0.02034,4.464271 -0.861948,5.395342 -4.785465,9.961265 -10.099492,11.75836 -3.273005,1.105917 -6.781812,1.044928 -10.08326,-0.174817 -0.979867,-0.361856 -2.313455,-1.053048 -3.232324,-1.675118 -4.744821,-3.203863 -7.351009,-8.729317 -6.708613,-14.238512 0.809102,-6.956616 6.468725,-12.665036 13.539185,-13.661162 1.398644,-0.195158 3.045301,-0.195158 4.411417,0.0037 3.561661,0.512294 6.806188,2.179286 9.351396,4.797676 2.561468,2.634648 4.102416,5.911702 4.480531,9.530286 0.07726,0.744046 0.06509,2.443557 -0.02442,3.171336 -0.443171,3.683638 -2.041041,6.96476 -4.65943,9.591274 -2.825749,2.833883 -6.371142,4.509001 -10.367849,4.907451 -0.817228,0.08134 -2.614323,0.05692 -3.423416,-0.04067 -3.882865,-0.48382 -7.395739,-2.228051 -10.136097,-5.029406 -1.858083,-1.898746 -3.163211,-4.025168 -3.980439,-6.472793 -0.622079,-1.858074 -0.8741583,-3.56572 -0.8253618,-5.537646 0.061007,-2.488287 0.6301948,-4.73262 1.7727018,-6.993212 0.878216,-1.740173 1.947523,-3.191671 3.38682,-4.594383 4.403292,-4.305707 10.595536,-5.9808249 16.51944,-4.468338 1.849949,0.471641 3.724292,1.297002 5.326228,2.354117 3.675495,2.419155 6.363008,6.106861 7.460776,10.237738 0.626146,2.358176 0.735922,4.854588 0.321203,7.245291 -0.609868,3.500673 -2.276861,6.728931 -4.830195,9.347329 -5.509185,5.63523 -13.87258,7.139583 -20.943048,3.756811 C 13.286434,41.217108 9.3181874,35.882745 8.4806334,29.914121 8.3301953,28.820411 8.3017345,28.344712 8.3261281,27.100573 8.3505496,25.6572 8.4562398,24.75459 8.7449052,23.490125 9.2165459,21.408422 10.098829,19.347047 11.302307,17.513366 14.311021,12.939309 19.226598,9.8086269 24.57722,9.0605223 c 1.935331,-0.2683483 3.850336,-0.2480218 5.732804,0.061007 3.065636,0.5041686 5.9727,1.7605087 8.497573,3.6714367 0.776575,0.589551 1.252274,1.008328 2.057309,1.809297 1.577534,1.577543 2.703763,3.151009 3.675495,5.127003 1.069317,2.183343 1.662926,4.3179 1.870285,6.757391 0.07317,0.84163 0.0325,2.768827 -0.07726,3.610449 -0.557014,4.297574 -2.431356,8.115382 -5.496993,11.201345 -3.980439,4.004832 -9.396107,6.147523 -14.897167,5.895444 C 23.056608,47.063783 20.580522,46.429521 18.01091,45.160979 15.896689,44.120133 14.270359,42.953242 12.58304,41.261856 11.00144,39.680255 9.8548746,38.110846 8.8831418,36.195842 6.7973817,32.097493 6.2281665,27.653548 7.2161587,23.205536 8.025252,19.5463 9.9931206,16.053761 12.794467,13.301202 16.282938,9.8696434 20.65776,7.8529969 25.573346,7.4057592 c 0.918879,-0.081343 2.988379,-0.061007 3.862529,0.040671 3.191671,0.3781242 6.110937,1.3986442 8.786239,3.0778288 1.910937,1.199419 3.728368,2.801355 5.122936,4.509001 3.809683,4.675688 5.379082,10.493884 4.382956,16.263283 -1.467758,8.509766 -8.424384,15.466382 -17.092713,17.092713 -1.4637,0.272415 -2.126422,0.329336 -3.923517,0.329336 -1.614138,-0.0037 -2.04104,-0.0325 -3.293313,-0.227686 C 17.543346,47.572028 12.143937,44.087624 8.7652316,39.05007 7.3422032,36.923648 6.2891552,34.508541 5.715873,32.036523 4.8823768,28.458602 5.0450163,24.612333 6.1834372,21.091333 6.8380346,19.062485 7.9358119,16.879142 9.1596151,15.175563 12.099217,11.093475 16.25042,8.1294888 21.039952,6.7023931 23.95515,5.8323019 26.967923,5.5964815 30.106741,5.9908743 c 3.00058,0.3740476 6.143456,1.5043528 8.84316,3.1794703 2.720031,1.6873094 5.143263,4.0251584 6.928156,6.6882764 1.439306,2.146749 2.581804,4.769206 3.130683,7.163977 0.414719,1.817421 0.552956,3.0453 0.548889,4.919643 0,1.309195 -0.03659,1.845882 -0.199226,2.996514 -0.796901,5.566106 -3.777146,10.680908 -8.35526,14.327952 -3.541335,2.821682 -7.773854,4.521202 -12.339776,4.944046 -0.731845,0.06909 -3.110347,0.06909 -3.842202,0 C 19.438024,49.710652 14.563101,47.466319 10.65991,43.697298 6.8299096,39.997409 4.3782175,35.114351 3.7846087,29.995483 3.5691149,28.169927 3.5975756,26.043505 3.861866,24.242343 4.3416317,20.94903 5.5654442,17.777684 7.4641805,14.927551 9.289736,12.183117 11.75362,9.7720783 14.56311,7.987185 19.775496,4.6694781 25.947412,3.5229136 31.95669,4.7507932 c 7.192446,1.471825 13.433485,6.2776258 16.730866,12.8845968 1.31732,2.638706 2.057299,5.236769 2.3663,8.273945 0.06909,0.707452 0.06909,3.281112 0,3.984506 -0.317126,3.159144 -1.126228,5.907636 -2.532997,8.631734 -3.382772,6.558175 -9.717319,11.339582 -16.970745,12.811407 -2.711906,0.548889 -5.533588,0.626137 -8.314608,0.227686 C 19.726699,51.056442 16.246362,49.718786 13.192927,47.70214 10.371245,45.839989 7.9195526,43.380172 6.0533442,40.546289 4.2440573,37.79373 2.9958419,34.683373 2.4428954,31.540498 2.162355,29.950763 2.0769727,28.779804 2.1054335,26.966441 c 0.020336,-1.341713 0.069086,-1.96785 0.2317532,-3.049359 1.097768,-7.229031 5.5132522,-13.705891 11.9941703,-17.592813 2.829807,-1.699511 6.070275,-2.858277 9.290398,-3.3217742 1.374251,-0.1992253 1.788961,-0.2236189 3.618584,-0.2236189 1.390509,0 1.882477,0.012164 2.398837,0.069086 3.232325,0.3537305 5.972692,1.1384304 8.741519,2.5086138 2.626515,1.2969933 4.789542,2.8501427 6.875302,4.9359025 0.951406,0.955474 1.654791,1.756432 2.386636,2.728165 2.565535,3.415291 4.216259,7.351009 4.801743,11.445291 0.182956,1.272609 0.20735,1.687319 0.20735,3.455953 -0.0037,1.801162 -0.02841,2.187411 -0.223619,3.537268 -1.402702,9.558746 -8.526025,17.751377 -18.011591,20.71942 -2.252467,0.703394 -4.557788,1.089643 -6.89157,1.150632 l -0.975791,0.02442 -0.01216,0.361856 -0.01216,0.361865 0.906686,-0.02442 c 4.061754,-0.11791 7.871428,-1.097777 11.481877,-2.95586 4.622843,-2.374435 8.550428,-6.119054 11.107829,-10.591459 1.837747,-3.220133 2.911122,-6.61103 3.285188,-10.388176 0.08942,-0.894485 0.101641,-3.305515 0.02442,-4.187798 C 53.082807,23.160806 52.464804,20.640001 51.432083,18.184241 48.679524,11.634201 43.284172,6.397422 36.595895,3.7830996 34.375965,2.9170754 31.97306,2.3519275 29.517301,2.1242414 28.870838,2.0632342 26.56145,2.0103984 26.041022,2.0469842 Z"
+   id="path119"
+   style="fill:#000000;stroke:none;stroke-width:0.00406581" /></svg>
diff --git a/application/icons/intro.svg b/application/icons/intro.svg
new file mode 100644
index 00000000..5028caff
--- /dev/null
+++ b/application/icons/intro.svg
@@ -0,0 +1,2813 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   height="61.133114"
+   width="52.141792"
+   id="svg14"
+   xml:space="preserve"
+   enable-background="new 0 0 1000 1000"
+   viewBox="0 0 52.141792 61.133114"
+   y="0px"
+   x="0px"
+   version="1.1"
+   sodipodi:docname="intro.svg"
+   inkscape:version="1.1 (c4e8f9e, 2021-05-24)"
+   inkscape:export-filename="/home/strukturart/Desktop/Pages/rss-reader/images/logo.png"
+   inkscape:export-xdpi="171.42857"
+   inkscape:export-ydpi="171.42857"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:ns1="https://launchpad.net/jessyink"><sodipodi:namedview
+   pagecolor="#000000"
+   bordercolor="#666666"
+   borderopacity="1"
+   objecttolerance="10"
+   gridtolerance="10"
+   guidetolerance="10"
+   inkscape:pageopacity="0"
+   inkscape:pageshadow="2"
+   inkscape:window-width="1848"
+   inkscape:window-height="1016"
+   id="namedview10"
+   showgrid="false"
+   inkscape:zoom="9.5732953"
+   inkscape:cx="21.988249"
+   inkscape:cy="30.867114"
+   inkscape:window-x="72"
+   inkscape:window-y="27"
+   inkscape:window-maximized="1"
+   inkscape:current-layer="g2262"
+   inkscape:document-rotation="0"
+   inkscape:pagecheckerboard="false"
+   fit-margin-top="0"
+   fit-margin-left="0"
+   fit-margin-right="0"
+   fit-margin-bottom="0" /><defs
+   id="defs18" />
+<metadata
+   id="metadata2"> Svg Vector Icons : http://www.onlinewebfonts.com/icon <rdf:RDF><cc:Work
+     rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
+       rdf:resource="http://purl.org/dc/dcmitype/StillImage" /></cc:Work></rdf:RDF></metadata>
+
+<text
+   xml:space="preserve"
+   style="font-size:13.3333px;line-height:25px;font-family:Arial;-inkscape-font-specification:Arial;letter-spacing:0px;word-spacing:0px;fill:none;stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+   x="6.4129987"
+   y="-50.58881"
+   id="text2162"><tspan
+     sodipodi:role="line"
+     id="tspan2160"
+     x="6.4129987"
+     y="-50.58881" /></text><script
+   id="JessyInk"
+   ns1:version="1.5.5">// Copyright 2008, 2009 Hannes Hochreiner
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+//
+// You should have received a copy of the GNU General Public License
+// along with this program.  If not, see http://www.gnu.org/licenses/.
+
+// Set onload event handler.
+window.onload = jessyInkInit;
+
+// Creating a namespace dictionary. The standard Inkscape namespaces are taken from inkex.py.
+var NSS = new Object();
+NSS['sodipodi']='http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd';
+NSS['cc']='http://web.resource.org/cc/';
+NSS['svg']='http://www.w3.org/2000/svg';
+NSS['dc']='http://purl.org/dc/elements/1.1/';
+NSS['rdf']='http://www.w3.org/1999/02/22-rdf-syntax-ns#';
+NSS['inkscape']='http://www.inkscape.org/namespaces/inkscape';
+NSS['xlink']='http://www.w3.org/1999/xlink';
+NSS['xml']='http://www.w3.org/XML/1998/namespace';
+NSS['jessyink']='https://launchpad.net/jessyink';
+
+// Keycodes.
+var LEFT_KEY = 37; // cursor left keycode
+var UP_KEY = 38; // cursor up keycode
+var RIGHT_KEY = 39; // cursor right keycode
+var DOWN_KEY = 40; // cursor down keycode
+var PAGE_UP_KEY = 33; // page up keycode
+var PAGE_DOWN_KEY = 34; // page down keycode
+var HOME_KEY = 36; // home keycode
+var END_KEY = 35; // end keycode
+var ENTER_KEY = 13; // next slide
+var SPACE_KEY = 32;
+var ESCAPE_KEY = 27;
+
+// Presentation modes.
+var SLIDE_MODE = 1;
+var INDEX_MODE = 2;
+var DRAWING_MODE = 3;
+
+// Mouse handler actions.
+var MOUSE_UP = 1;
+var MOUSE_DOWN = 2;
+var MOUSE_MOVE = 3;
+var MOUSE_WHEEL = 4;
+
+// Parameters.
+var ROOT_NODE = document.getElementsByTagNameNS(NSS[&quot;svg&quot;], &quot;svg&quot;)[0];
+var HEIGHT = 0;
+var WIDTH = 0;
+var INDEX_COLUMNS_DEFAULT = 4;
+var INDEX_COLUMNS = INDEX_COLUMNS_DEFAULT;
+var INDEX_OFFSET = 0;
+var STATE_START = -1;
+var STATE_END = -2;
+var BACKGROUND_COLOR = null;
+var slides = new Array();
+
+// Initialisation.
+var currentMode = SLIDE_MODE;
+var masterSlide = null;
+var activeSlide = 0;
+var activeEffect = 0;
+var timeStep = 30; // 40 ms equal 25 frames per second.
+var lastFrameTime = null;
+var processingEffect = false;
+var transCounter = 0;
+var effectArray = 0;
+var defaultTransitionInDict = new Object();
+defaultTransitionInDict[&quot;name&quot;] = &quot;appear&quot;;
+var defaultTransitionOutDict = new Object();
+defaultTransitionOutDict[&quot;name&quot;] = &quot;appear&quot;;
+var jessyInkInitialised = false;
+
+// Initialise char and key code dictionaries.
+var charCodeDictionary = getDefaultCharCodeDictionary();
+var keyCodeDictionary = getDefaultKeyCodeDictionary();
+
+// Initialise mouse handler dictionary.
+var mouseHandlerDictionary = getDefaultMouseHandlerDictionary();
+
+var progress_bar_visible = false;
+var timer_elapsed = 0;
+var timer_start = timer_elapsed;
+var timer_duration = 15; // 15 minutes
+
+var history_counter = 0;
+var history_original_elements = new Array();
+var history_presentation_elements = new Array();
+
+var mouse_original_path = null;
+var mouse_presentation_path = null;
+var mouse_last_x = -1;
+var mouse_last_y = -1;
+var mouse_min_dist_sqr = 3 * 3;
+var path_colour = &quot;red&quot;;
+var path_width_default = 3;
+var path_width = path_width_default;
+var path_paint_width = path_width;
+
+var number_of_added_slides = 0;
+
+/** Initialisation function.
+ *  The whole presentation is set-up in this function.
+ */
+function jessyInkInit()
+{
+    // Make sure we only execute this code once. Double execution can occur if the onload event handler is set
+    // in the main svg tag as well (as was recommended in earlier versions). Executing this function twice does
+    // not lead to any problems, but it takes more time.
+    if (jessyInkInitialised)
+        return;
+
+    // Making the presentation scalable.
+    var VIEWBOX = ROOT_NODE.getAttribute(&quot;viewBox&quot;);
+
+    if (VIEWBOX)
+    {
+        WIDTH = ROOT_NODE.viewBox.animVal.width;
+        HEIGHT = ROOT_NODE.viewBox.animVal.height;
+    }
+    else
+    {
+        HEIGHT = parseFloat(ROOT_NODE.getAttribute(&quot;height&quot;));
+        WIDTH = parseFloat(ROOT_NODE.getAttribute(&quot;width&quot;));
+        ROOT_NODE.setAttribute(&quot;viewBox&quot;, &quot;0 0 &quot; + WIDTH + &quot; &quot; + HEIGHT);
+    }
+
+    ROOT_NODE.setAttribute(&quot;width&quot;, &quot;100%&quot;);
+    ROOT_NODE.setAttribute(&quot;height&quot;, &quot;100%&quot;);
+
+    // Setting the background color.
+    var namedViews = document.getElementsByTagNameNS(NSS[&quot;sodipodi&quot;], &quot;namedview&quot;);
+
+    for (var counter = 0; counter &lt; namedViews.length; counter++)
+    {
+        if (namedViews[counter].hasAttribute(&quot;id&quot;) &amp;&amp; namedViews[counter].hasAttribute(&quot;pagecolor&quot;))
+        {
+            if (namedViews[counter].getAttribute(&quot;id&quot;) == &quot;base&quot;)
+            {
+                BACKGROUND_COLOR = namedViews[counter].getAttribute(&quot;pagecolor&quot;);
+                var newAttribute = &quot;background-color:&quot; + BACKGROUND_COLOR + &quot;;&quot;;
+
+                if (ROOT_NODE.hasAttribute(&quot;style&quot;))
+                    newAttribute += ROOT_NODE.getAttribute(&quot;style&quot;);
+
+                ROOT_NODE.setAttribute(&quot;style&quot;, newAttribute);
+            }
+        }
+    }
+
+    // Defining clip-path.
+    var defsNodes = document.getElementsByTagNameNS(NSS[&quot;svg&quot;], &quot;defs&quot;);
+
+    if (defsNodes.length &gt; 0)
+    {
+        var existingClipPath = document.getElementById(&quot;jessyInkSlideClipPath&quot;);
+
+        if (!existingClipPath)
+        {
+            var rectNode = document.createElementNS(NSS[&quot;svg&quot;], &quot;rect&quot;);
+            var clipPath = document.createElementNS(NSS[&quot;svg&quot;], &quot;clipPath&quot;);
+
+            rectNode.setAttribute(&quot;x&quot;, 0);
+            rectNode.setAttribute(&quot;y&quot;, 0);
+            rectNode.setAttribute(&quot;width&quot;, WIDTH);
+            rectNode.setAttribute(&quot;height&quot;, HEIGHT);
+
+            clipPath.setAttribute(&quot;id&quot;, &quot;jessyInkSlideClipPath&quot;);
+            clipPath.setAttribute(&quot;clipPathUnits&quot;, &quot;userSpaceOnUse&quot;);
+
+            clipPath.appendChild(rectNode);
+            defsNodes[0].appendChild(clipPath);
+        }
+    }
+
+    // Making a list of the slide and finding the master slide.
+    var nodes = document.getElementsByTagNameNS(NSS[&quot;svg&quot;], &quot;g&quot;);
+    var tempSlides = new Array();
+    var existingJessyInkPresentationLayer = null;
+
+    for (var counter = 0; counter &lt; nodes.length; counter++)
+    {
+        if (nodes[counter].getAttributeNS(NSS[&quot;inkscape&quot;], &quot;groupmode&quot;) &amp;&amp; (nodes[counter].getAttributeNS(NSS[&quot;inkscape&quot;], &quot;groupmode&quot;) == &quot;layer&quot;))
+        {
+            if (nodes[counter].getAttributeNS(NSS[&quot;inkscape&quot;], &quot;label&quot;) &amp;&amp; nodes[counter].getAttributeNS(NSS[&quot;jessyink&quot;], &quot;masterSlide&quot;) == &quot;masterSlide&quot;)
+                masterSlide = nodes[counter];
+            else if (nodes[counter].getAttributeNS(NSS[&quot;inkscape&quot;], &quot;label&quot;) &amp;&amp; nodes[counter].getAttributeNS(NSS[&quot;jessyink&quot;], &quot;presentationLayer&quot;) == &quot;presentationLayer&quot;)
+                existingJessyInkPresentationLayer = nodes[counter];
+            else
+                tempSlides.push(nodes[counter].getAttribute(&quot;id&quot;));
+        }
+        else if (nodes[counter].getAttributeNS(NSS['jessyink'], 'element'))
+        {
+            handleElement(nodes[counter]);
+        }
+    }
+
+    // Hide master slide set default transitions.
+    if (masterSlide)
+    {
+        masterSlide.style.display = &quot;none&quot;;
+
+        if (masterSlide.hasAttributeNS(NSS[&quot;jessyink&quot;], &quot;transitionIn&quot;))
+            defaultTransitionInDict = propStrToDict(masterSlide.getAttributeNS(NSS[&quot;jessyink&quot;], &quot;transitionIn&quot;));
+
+        if (masterSlide.hasAttributeNS(NSS[&quot;jessyink&quot;], &quot;transitionOut&quot;))
+            defaultTransitionOutDict = propStrToDict(masterSlide.getAttributeNS(NSS[&quot;jessyink&quot;], &quot;transitionOut&quot;));
+    }
+
+    if (existingJessyInkPresentationLayer != null)
+    {
+        existingJessyInkPresentationLayer.parentNode.removeChild(existingJessyInkPresentationLayer);
+    }
+
+    // Set start slide.
+    var hashObj = new LocationHash(window.location.hash);
+
+    activeSlide = hashObj.slideNumber;
+    activeEffect = hashObj.effectNumber;
+
+    if (activeSlide &lt; 0)
+        activeSlide = 0;
+    else if (activeSlide &gt;= tempSlides.length)
+        activeSlide = tempSlides.length - 1;
+
+    var originalNode = document.getElementById(tempSlides[counter]);
+
+    var JessyInkPresentationLayer = document.createElementNS(NSS[&quot;svg&quot;], &quot;g&quot;);
+    JessyInkPresentationLayer.setAttributeNS(NSS[&quot;inkscape&quot;], &quot;groupmode&quot;, &quot;layer&quot;);
+    JessyInkPresentationLayer.setAttributeNS(NSS[&quot;inkscape&quot;], &quot;label&quot;, &quot;JessyInk Presentation Layer&quot;);
+    JessyInkPresentationLayer.setAttributeNS(NSS[&quot;jessyink&quot;], &quot;presentationLayer&quot;, &quot;presentationLayer&quot;);
+    JessyInkPresentationLayer.setAttribute(&quot;id&quot;, &quot;jessyink_presentation_layer&quot;);
+    JessyInkPresentationLayer.style.display = &quot;inherit&quot;;
+    ROOT_NODE.appendChild(JessyInkPresentationLayer);
+
+    // Gathering all the information about the transitions and effects of the slides, set the background
+    // from the master slide and substitute the auto-texts.
+    for (var counter = 0; counter &lt; tempSlides.length; counter++)
+    {
+        var originalNode = document.getElementById(tempSlides[counter]);
+        originalNode.style.display = &quot;none&quot;;
+        var node = suffixNodeIds(originalNode.cloneNode(true), &quot;_&quot; + counter);
+        JessyInkPresentationLayer.appendChild(node);
+        slides[counter] = new Object();
+        slides[counter][&quot;original_element&quot;] = originalNode;
+        slides[counter][&quot;element&quot;] = node;
+
+        // Set build in transition.
+        slides[counter][&quot;transitionIn&quot;] = new Object();
+
+        var dict;
+
+        if (node.hasAttributeNS(NSS[&quot;jessyink&quot;], &quot;transitionIn&quot;))
+            dict = propStrToDict(node.getAttributeNS(NSS[&quot;jessyink&quot;], &quot;transitionIn&quot;));
+        else
+            dict = defaultTransitionInDict;
+
+        slides[counter][&quot;transitionIn&quot;][&quot;name&quot;] = dict[&quot;name&quot;];
+        slides[counter][&quot;transitionIn&quot;][&quot;options&quot;] = new Object();
+
+        for (key in dict)
+            if (key != &quot;name&quot;)
+                slides[counter][&quot;transitionIn&quot;][&quot;options&quot;][key] = dict[key];
+
+        // Set build out transition.
+        slides[counter][&quot;transitionOut&quot;] = new Object();
+
+        if (node.hasAttributeNS(NSS[&quot;jessyink&quot;], &quot;transitionOut&quot;))
+            dict = propStrToDict(node.getAttributeNS(NSS[&quot;jessyink&quot;], &quot;transitionOut&quot;));
+        else
+            dict = defaultTransitionOutDict;
+
+        slides[counter][&quot;transitionOut&quot;][&quot;name&quot;] = dict[&quot;name&quot;];
+        slides[counter][&quot;transitionOut&quot;][&quot;options&quot;] = new Object();
+
+        for (key in dict)
+            if (key != &quot;name&quot;)
+                slides[counter][&quot;transitionOut&quot;][&quot;options&quot;][key] = dict[key];
+
+        // Copy master slide content.
+        if (masterSlide)
+        {
+            var clonedNode = suffixNodeIds(masterSlide.cloneNode(true), &quot;_&quot; + counter);
+            clonedNode.removeAttributeNS(NSS[&quot;inkscape&quot;], &quot;groupmode&quot;);
+            clonedNode.removeAttributeNS(NSS[&quot;inkscape&quot;], &quot;label&quot;);
+            clonedNode.style.display = &quot;inherit&quot;;
+
+            node.insertBefore(clonedNode, node.firstChild);
+        }
+
+        // Setting clip path.
+        node.setAttribute(&quot;clip-path&quot;, &quot;url(#jessyInkSlideClipPath)&quot;);
+
+        // Substitute auto texts.
+        substituteAutoTexts(node, node.getAttributeNS(NSS[&quot;inkscape&quot;], &quot;label&quot;), counter + 1, tempSlides.length);
+
+        node.removeAttributeNS(NSS[&quot;inkscape&quot;], &quot;groupmode&quot;);
+        node.removeAttributeNS(NSS[&quot;inkscape&quot;], &quot;label&quot;);
+
+        // Set effects.
+        var tempEffects = new Array();
+        var groups = new Object();
+
+        for (var IOCounter = 0; IOCounter &lt;= 1; IOCounter++)
+        {
+            var propName = &quot;&quot;;
+            var dir = 0;
+
+            if (IOCounter == 0)
+            {
+                propName = &quot;effectIn&quot;;
+                dir = 1;
+            }
+            else if (IOCounter == 1)
+            {
+                propName = &quot;effectOut&quot;;
+                dir = -1;
+            }
+
+            var effects = getElementsByPropertyNS(node, NSS[&quot;jessyink&quot;], propName);
+
+            for (var effectCounter = 0; effectCounter &lt; effects.length; effectCounter++)
+            {
+                var element = document.getElementById(effects[effectCounter]);
+                var dict = propStrToDict(element.getAttributeNS(NSS[&quot;jessyink&quot;], propName));
+
+                // Put every element that has an effect associated with it, into its own group.
+                // Unless of course, we already put it into its own group.
+                if (!(groups[element.id]))
+                {
+                    var newGroup = document.createElementNS(NSS[&quot;svg&quot;], &quot;g&quot;);
+
+                    element.parentNode.insertBefore(newGroup, element);
+                    newGroup.appendChild(element.parentNode.removeChild(element));
+                    groups[element.id] = newGroup;
+                }
+
+                var effectDict = new Object();
+
+                effectDict[&quot;effect&quot;] = dict[&quot;name&quot;];
+                effectDict[&quot;dir&quot;] = dir;
+                effectDict[&quot;element&quot;] = groups[element.id];
+
+                for (var option in dict)
+                {
+                    if ((option != &quot;name&quot;) &amp;&amp; (option != &quot;order&quot;))
+                    {
+                        if (!effectDict[&quot;options&quot;])
+                            effectDict[&quot;options&quot;] = new Object();
+
+                        effectDict[&quot;options&quot;][option] = dict[option];
+                    }
+                }
+
+                if (!tempEffects[dict[&quot;order&quot;]])
+                    tempEffects[dict[&quot;order&quot;]] = new Array();
+
+                tempEffects[dict[&quot;order&quot;]][tempEffects[dict[&quot;order&quot;]].length] = effectDict;
+            }
+        }
+
+        // Make invisible, but keep in rendering tree to ensure that bounding box can be calculated.
+        node.setAttribute(&quot;opacity&quot;,0);
+        node.style.display = &quot;inherit&quot;;
+
+        // Create a transform group.
+        var transformGroup = document.createElementNS(NSS[&quot;svg&quot;], &quot;g&quot;);
+
+        // Add content to transform group.
+        while (node.firstChild)
+            transformGroup.appendChild(node.firstChild);
+
+        // Transfer the transform attribute from the node to the transform group.
+        if (node.getAttribute(&quot;transform&quot;))
+        {
+            transformGroup.setAttribute(&quot;transform&quot;, node.getAttribute(&quot;transform&quot;));
+            node.removeAttribute(&quot;transform&quot;);
+        }
+
+        // Create a view group.
+        var viewGroup = document.createElementNS(NSS[&quot;svg&quot;], &quot;g&quot;);
+
+        viewGroup.appendChild(transformGroup);
+        slides[counter][&quot;viewGroup&quot;] = node.appendChild(viewGroup);
+
+        // Insert background.
+        if (BACKGROUND_COLOR != null)
+        {
+            var rectNode = document.createElementNS(NSS[&quot;svg&quot;], &quot;rect&quot;);
+
+            rectNode.setAttribute(&quot;x&quot;, 0);
+            rectNode.setAttribute(&quot;y&quot;, 0);
+            rectNode.setAttribute(&quot;width&quot;, WIDTH);
+            rectNode.setAttribute(&quot;height&quot;, HEIGHT);
+            rectNode.setAttribute(&quot;id&quot;, &quot;jessyInkBackground&quot; + counter);
+            rectNode.setAttribute(&quot;fill&quot;, BACKGROUND_COLOR);
+
+            slides[counter][&quot;viewGroup&quot;].insertBefore(rectNode, slides[counter][&quot;viewGroup&quot;].firstChild);
+        }
+
+        // Set views.
+        var tempViews = new Array();
+        var views = getElementsByPropertyNS(node, NSS[&quot;jessyink&quot;], &quot;view&quot;);
+        var matrixOld = (new matrixSVG()).fromElements(1, 0, 0, 0, 1, 0, 0, 0, 1);
+
+        // Set initial view even if there are no other views.
+        slides[counter][&quot;viewGroup&quot;].setAttribute(&quot;transform&quot;, matrixOld.toAttribute());
+        slides[counter].initialView = matrixOld.toAttribute();
+
+        for (var viewCounter = 0; viewCounter &lt; views.length; viewCounter++)
+        {
+            var element = document.getElementById(views[viewCounter]);
+            var dict = propStrToDict(element.getAttributeNS(NSS[&quot;jessyink&quot;], &quot;view&quot;));
+
+            if (dict[&quot;order&quot;] == 0)
+            {
+                matrixOld = pointMatrixToTransformation(rectToMatrix(element)).mult((new matrixSVG()).fromSVGMatrix(slides[counter].viewGroup.getScreenCTM()).inv().mult((new matrixSVG()).fromSVGMatrix(element.parentNode.getScreenCTM())).inv());
+                slides[counter].initialView = matrixOld.toAttribute();
+            }
+            else
+            {
+                var effectDict = new Object();
+
+                effectDict[&quot;effect&quot;] = dict[&quot;name&quot;];
+                effectDict[&quot;dir&quot;] = 1;
+                effectDict[&quot;element&quot;] = slides[counter][&quot;viewGroup&quot;];
+                effectDict[&quot;order&quot;] = dict[&quot;order&quot;];
+
+                for (var option in dict)
+                {
+                    if ((option != &quot;name&quot;) &amp;&amp; (option != &quot;order&quot;))
+                    {
+                        if (!effectDict[&quot;options&quot;])
+                            effectDict[&quot;options&quot;] = new Object();
+
+                        effectDict[&quot;options&quot;][option] = dict[option];
+                    }
+                }
+
+                effectDict[&quot;options&quot;][&quot;matrixNew&quot;] = pointMatrixToTransformation(rectToMatrix(element)).mult((new matrixSVG()).fromSVGMatrix(slides[counter].viewGroup.getScreenCTM()).inv().mult((new matrixSVG()).fromSVGMatrix(element.parentNode.getScreenCTM())).inv());
+
+                tempViews[dict[&quot;order&quot;]] = effectDict;
+            }
+
+            // Remove element.
+            element.parentNode.removeChild(element);
+        }
+
+        // Consolidate view array and append it to the effect array.
+        if (tempViews.length &gt; 0)
+        {
+            for (var viewCounter = 0; viewCounter &lt; tempViews.length; viewCounter++)
+            {
+                if (tempViews[viewCounter])
+                {
+                    tempViews[viewCounter][&quot;options&quot;][&quot;matrixOld&quot;] = matrixOld;
+                    matrixOld = tempViews[viewCounter][&quot;options&quot;][&quot;matrixNew&quot;];
+
+                    if (!tempEffects[tempViews[viewCounter][&quot;order&quot;]])
+                        tempEffects[tempViews[viewCounter][&quot;order&quot;]] = new Array();
+
+                    tempEffects[tempViews[viewCounter][&quot;order&quot;]][tempEffects[tempViews[viewCounter][&quot;order&quot;]].length] = tempViews[viewCounter];
+                }
+            }
+        }
+
+        // Set consolidated effect array.
+        if (tempEffects.length &gt; 0)
+        {
+            slides[counter][&quot;effects&quot;] = new Array();
+
+            for (var effectCounter = 0; effectCounter &lt; tempEffects.length; effectCounter++)
+            {
+                if (tempEffects[effectCounter])
+                    slides[counter][&quot;effects&quot;][slides[counter][&quot;effects&quot;].length] = tempEffects[effectCounter];
+            }
+        }
+
+        node.setAttribute(&quot;onmouseover&quot;, &quot;if ((currentMode == INDEX_MODE) &amp;&amp; ( activeSlide != &quot; + counter + &quot;)) { indexSetActiveSlide(&quot; + counter + &quot;); };&quot;);
+
+        // Set visibility for initial state.
+        if (counter == activeSlide)
+        {
+            node.style.display = &quot;inherit&quot;;
+            node.setAttribute(&quot;opacity&quot;,1);
+        }
+        else
+        {
+            node.style.display = &quot;none&quot;;
+            node.setAttribute(&quot;opacity&quot;,0);
+        }
+    }
+
+    // Set key handler.
+    var jessyInkObjects = document.getElementsByTagNameNS(NSS[&quot;svg&quot;], &quot;g&quot;);
+
+    for (var counter = 0; counter &lt; jessyInkObjects.length; counter++)
+    {
+        var elem = jessyInkObjects[counter];
+
+        if (elem.getAttributeNS(NSS[&quot;jessyink&quot;], &quot;customKeyBindings&quot;))
+        {
+            if (elem.getCustomKeyBindings != undefined)
+                keyCodeDictionary = elem.getCustomKeyBindings();
+
+            if (elem.getCustomCharBindings != undefined)
+                charCodeDictionary = elem.getCustomCharBindings();
+        }
+    }
+
+    // Set mouse handler.
+    var jessyInkMouseHandler = document.getElementsByTagNameNS(NSS[&quot;jessyink&quot;], &quot;mousehandler&quot;);
+
+    for (var counter = 0; counter &lt; jessyInkMouseHandler.length; counter++)
+    {
+        var elem = jessyInkMouseHandler[counter];
+
+        if (elem.getMouseHandler != undefined)
+        {
+            var tempDict = elem.getMouseHandler();
+
+            for (mode in tempDict)
+            {
+                if (!mouseHandlerDictionary[mode])
+                    mouseHandlerDictionary[mode] = new Object();
+
+                for (handler in tempDict[mode])
+                    mouseHandlerDictionary[mode][handler] = tempDict[mode][handler];
+            }
+        }
+    }
+
+    // Check effect number.
+    if ((activeEffect &lt; 0) || (!slides[activeSlide].effects))
+    {
+        activeEffect = 0;
+    }
+    else if (activeEffect &gt; slides[activeSlide].effects.length)
+    {
+        activeEffect = slides[activeSlide].effects.length;
+    }
+
+    createProgressBar(JessyInkPresentationLayer);
+    hideProgressBar();
+    setProgressBarValue(activeSlide);
+    setTimeIndicatorValue(0);
+    setInterval(&quot;updateTimer()&quot;, 1000);
+    setSlideToState(activeSlide, activeEffect);
+    jessyInkInitialised = true;
+}
+
+/** Function to substitute the auto-texts.
+ *
+ *  @param node the node
+ *  @param slideName name of the slide the node is on
+ *  @param slideNumber number of the slide the node is on
+ *  @param numberOfSlides number of slides in the presentation
+ */
+function substituteAutoTexts(node, slideName, slideNumber, numberOfSlides)
+{
+    var texts = node.getElementsByTagNameNS(NSS[&quot;svg&quot;], &quot;tspan&quot;);
+
+    for (var textCounter = 0; textCounter &lt; texts.length; textCounter++)
+    {
+        if (texts[textCounter].getAttributeNS(NSS[&quot;jessyink&quot;], &quot;autoText&quot;) == &quot;slideNumber&quot;)
+            texts[textCounter].firstChild.nodeValue = slideNumber;
+        else if (texts[textCounter].getAttributeNS(NSS[&quot;jessyink&quot;], &quot;autoText&quot;) == &quot;numberOfSlides&quot;)
+            texts[textCounter].firstChild.nodeValue = numberOfSlides;
+        else if (texts[textCounter].getAttributeNS(NSS[&quot;jessyink&quot;], &quot;autoText&quot;) == &quot;slideTitle&quot;)
+            texts[textCounter].firstChild.nodeValue = slideName;
+    }
+}
+
+/** Convenience function to get an element depending on whether it has a property with a particular name.
+ *    This function emulates some dearly missed XPath functionality.
+ *
+ *  @param node the node
+ *  @param namespace namespace of the attribute
+ *  @param name attribute name
+ */
+function getElementsByPropertyNS(node, namespace, name)
+{
+    var elems = new Array();
+
+    if (node.getAttributeNS(namespace, name))
+        elems.push(node.getAttribute(&quot;id&quot;));
+
+    for (var counter = 0; counter &lt; node.childNodes.length; counter++)
+    {
+        if (node.childNodes[counter].nodeType == 1)
+            elems = elems.concat(getElementsByPropertyNS(node.childNodes[counter], namespace, name));
+    }
+
+    return elems;
+}
+
+/** Function to dispatch the next effect, if there is none left, change the slide.
+ *
+ *  @param dir direction of the change (1 = forwards, -1 = backwards)
+ */
+function dispatchEffects(dir)
+{
+    if (slides[activeSlide][&quot;effects&quot;] &amp;&amp; (((dir == 1) &amp;&amp; (activeEffect &lt; slides[activeSlide][&quot;effects&quot;].length)) || ((dir == -1) &amp;&amp; (activeEffect &gt; 0))))
+    {
+        processingEffect = true;
+
+        if (dir == 1)
+        {
+            effectArray = slides[activeSlide][&quot;effects&quot;][activeEffect];
+            activeEffect += dir;
+        }
+        else if (dir == -1)
+        {
+            activeEffect += dir;
+            effectArray = slides[activeSlide][&quot;effects&quot;][activeEffect];
+        }
+
+        transCounter = 0;
+        startTime = (new Date()).getTime();
+        lastFrameTime = null;
+        effect(dir);
+    }
+    else if (((dir == 1) &amp;&amp; (activeSlide &lt; (slides.length - 1))) || (((dir == -1) &amp;&amp; (activeSlide &gt; 0))))
+    {
+        changeSlide(dir);
+    }
+}
+
+/** Function to skip effects and directly either put the slide into start or end state or change slides.
+ *
+ *  @param dir direction of the change (1 = forwards, -1 = backwards)
+ */
+function skipEffects(dir)
+{
+    if (slides[activeSlide][&quot;effects&quot;] &amp;&amp; (((dir == 1) &amp;&amp; (activeEffect &lt; slides[activeSlide][&quot;effects&quot;].length)) || ((dir == -1) &amp;&amp; (activeEffect &gt; 0))))
+    {
+        processingEffect = true;
+
+        if (slides[activeSlide][&quot;effects&quot;] &amp;&amp; (dir == 1))
+            activeEffect = slides[activeSlide][&quot;effects&quot;].length;
+        else
+            activeEffect = 0;
+
+        if (dir == 1)
+            setSlideToState(activeSlide, STATE_END);
+        else
+            setSlideToState(activeSlide, STATE_START);
+
+        processingEffect = false;
+    }
+    else if (((dir == 1) &amp;&amp; (activeSlide &lt; (slides.length - 1))) || (((dir == -1) &amp;&amp; (activeSlide &gt; 0))))
+    {
+        changeSlide(dir);
+    }
+}
+
+/** Function to change between slides.
+ *
+ *  @param dir direction (1 = forwards, -1 = backwards)
+ */
+function changeSlide(dir)
+{
+    processingEffect = true;
+    effectArray = new Array();
+
+    effectArray[0] = new Object();
+    if (dir == 1)
+    {
+        effectArray[0][&quot;effect&quot;] = slides[activeSlide][&quot;transitionOut&quot;][&quot;name&quot;];
+        effectArray[0][&quot;options&quot;] = slides[activeSlide][&quot;transitionOut&quot;][&quot;options&quot;];
+        effectArray[0][&quot;dir&quot;] = -1;
+    }
+    else if (dir == -1)
+    {
+        effectArray[0][&quot;effect&quot;] = slides[activeSlide][&quot;transitionIn&quot;][&quot;name&quot;];
+        effectArray[0][&quot;options&quot;] = slides[activeSlide][&quot;transitionIn&quot;][&quot;options&quot;];
+        effectArray[0][&quot;dir&quot;] = 1;
+    }
+    effectArray[0][&quot;element&quot;] = slides[activeSlide][&quot;element&quot;];
+
+    activeSlide += dir;
+    setProgressBarValue(activeSlide);
+
+    effectArray[1] = new Object();
+
+    if (dir == 1)
+    {
+        effectArray[1][&quot;effect&quot;] = slides[activeSlide][&quot;transitionIn&quot;][&quot;name&quot;];
+        effectArray[1][&quot;options&quot;] = slides[activeSlide][&quot;transitionIn&quot;][&quot;options&quot;];
+        effectArray[1][&quot;dir&quot;] = 1;
+    }
+    else if (dir == -1)
+    {
+        effectArray[1][&quot;effect&quot;] = slides[activeSlide][&quot;transitionOut&quot;][&quot;name&quot;];
+        effectArray[1][&quot;options&quot;] = slides[activeSlide][&quot;transitionOut&quot;][&quot;options&quot;];
+        effectArray[1][&quot;dir&quot;] = -1;
+    }
+
+    effectArray[1][&quot;element&quot;] = slides[activeSlide][&quot;element&quot;];
+
+    if (slides[activeSlide][&quot;effects&quot;] &amp;&amp; (dir == -1))
+        activeEffect = slides[activeSlide][&quot;effects&quot;].length;
+    else
+        activeEffect = 0;
+
+    if (dir == -1)
+        setSlideToState(activeSlide, STATE_END);
+    else
+        setSlideToState(activeSlide, STATE_START);
+
+    transCounter = 0;
+    startTime = (new Date()).getTime();
+    lastFrameTime = null;
+    effect(dir);
+}
+
+/** Function to toggle between index and slide mode.
+*/
+function toggleSlideIndex()
+{
+    var suspendHandle = ROOT_NODE.suspendRedraw(500);
+
+    if (currentMode == SLIDE_MODE)
+    {
+        hideProgressBar();
+        INDEX_OFFSET = -1;
+        indexSetPageSlide(activeSlide);
+        currentMode = INDEX_MODE;
+    }
+    else if (currentMode == INDEX_MODE)
+    {
+        for (var counter = 0; counter &lt; slides.length; counter++)
+        {
+            slides[counter][&quot;element&quot;].setAttribute(&quot;transform&quot;,&quot;scale(1)&quot;);
+
+            if (counter == activeSlide)
+            {
+                slides[counter][&quot;element&quot;].style.display = &quot;inherit&quot;;
+                slides[counter][&quot;element&quot;].setAttribute(&quot;opacity&quot;,1);
+                activeEffect = 0;
+            }
+            else
+            {
+                slides[counter][&quot;element&quot;].setAttribute(&quot;opacity&quot;,0);
+                slides[counter][&quot;element&quot;].style.display = &quot;none&quot;;
+            }
+        }
+        currentMode = SLIDE_MODE;
+        setSlideToState(activeSlide, STATE_START);
+        setProgressBarValue(activeSlide);
+
+        if (progress_bar_visible)
+        {
+            showProgressBar();
+        }
+    }
+
+    ROOT_NODE.unsuspendRedraw(suspendHandle);
+    ROOT_NODE.forceRedraw();
+}
+
+/** Function to run an effect.
+ *
+ *  @param dir direction in which to play the effect (1 = forwards, -1 = backwards)
+ */
+function effect(dir)
+{
+    var done = true;
+
+    var suspendHandle = ROOT_NODE.suspendRedraw(200);
+
+    for (var counter = 0; counter &lt; effectArray.length; counter++)
+    {
+        if (effectArray[counter][&quot;effect&quot;] == &quot;fade&quot;)
+            done &amp;= fade(parseInt(effectArray[counter][&quot;dir&quot;]) * dir, effectArray[counter][&quot;element&quot;], transCounter, effectArray[counter][&quot;options&quot;]);
+        else if (effectArray[counter][&quot;effect&quot;] == &quot;appear&quot;)
+            done &amp;= appear(parseInt(effectArray[counter][&quot;dir&quot;]) * dir, effectArray[counter][&quot;element&quot;], transCounter, effectArray[counter][&quot;options&quot;]);
+        else if (effectArray[counter][&quot;effect&quot;] == &quot;pop&quot;)
+            done &amp;= pop(parseInt(effectArray[counter][&quot;dir&quot;]) * dir, effectArray[counter][&quot;element&quot;], transCounter, effectArray[counter][&quot;options&quot;]);
+        else if (effectArray[counter][&quot;effect&quot;] == &quot;view&quot;)
+            done &amp;= view(parseInt(effectArray[counter][&quot;dir&quot;]) * dir, effectArray[counter][&quot;element&quot;], transCounter, effectArray[counter][&quot;options&quot;]);
+    }
+
+    ROOT_NODE.unsuspendRedraw(suspendHandle);
+    ROOT_NODE.forceRedraw();
+
+    if (!done)
+    {
+        var currentTime = (new Date()).getTime();
+        var timeDiff = 1;
+
+        transCounter = currentTime - startTime;
+
+        if (lastFrameTime != null)
+        {
+            timeDiff = timeStep - (currentTime - lastFrameTime);
+
+            if (timeDiff &lt;= 0)
+                timeDiff = 1;
+        }
+
+        lastFrameTime = currentTime;
+
+        window.setTimeout(&quot;effect(&quot; + dir + &quot;)&quot;, timeDiff);
+    }
+    else
+    {
+        window.location.hash = (activeSlide + 1) + '_' + activeEffect;
+        processingEffect = false;
+    }
+}
+
+/** Function to display the index sheet.
+ *
+ *  @param offsetNumber offset number
+ */
+function displayIndex(offsetNumber)
+{
+    var offsetX = 0;
+    var offsetY = 0;
+
+    if (offsetNumber &lt; 0)
+        offsetNumber = 0;
+    else if (offsetNumber &gt;= slides.length)
+        offsetNumber = slides.length - 1;
+
+    for (var counter = 0; counter &lt; slides.length; counter++)
+    {
+        if ((counter &lt; offsetNumber) || (counter &gt; offsetNumber + INDEX_COLUMNS * INDEX_COLUMNS - 1))
+        {
+            slides[counter][&quot;element&quot;].setAttribute(&quot;opacity&quot;,0);
+            slides[counter][&quot;element&quot;].style.display = &quot;none&quot;;
+        }
+        else
+        {
+            offsetX = ((counter - offsetNumber) % INDEX_COLUMNS) * WIDTH;
+            offsetY = Math.floor((counter - offsetNumber) / INDEX_COLUMNS) * HEIGHT;
+
+            slides[counter][&quot;element&quot;].setAttribute(&quot;transform&quot;,&quot;scale(&quot;+1/INDEX_COLUMNS+&quot;) translate(&quot;+offsetX+&quot;,&quot;+offsetY+&quot;)&quot;);
+            slides[counter][&quot;element&quot;].style.display = &quot;inherit&quot;;
+            slides[counter][&quot;element&quot;].setAttribute(&quot;opacity&quot;,0.5);
+        }
+
+        setSlideToState(counter, STATE_END);
+    }
+
+    //do we need to save the current offset?
+    if (INDEX_OFFSET != offsetNumber)
+        INDEX_OFFSET = offsetNumber;
+}
+
+/** Function to set the active slide in the slide view.
+ *
+ *  @param nbr index of the active slide
+ */
+function slideSetActiveSlide(nbr)
+{
+    if (nbr &gt;= slides.length)
+        nbr = slides.length - 1;
+    else if (nbr &lt; 0)
+        nbr = 0;
+
+    slides[activeSlide][&quot;element&quot;].setAttribute(&quot;opacity&quot;,0);
+    slides[activeSlide][&quot;element&quot;].style.display = &quot;none&quot;;
+
+    activeSlide = parseInt(nbr);
+
+    setSlideToState(activeSlide, STATE_START);
+    slides[activeSlide][&quot;element&quot;].style.display = &quot;inherit&quot;;
+    slides[activeSlide][&quot;element&quot;].setAttribute(&quot;opacity&quot;,1);
+
+    activeEffect = 0;
+    setProgressBarValue(nbr);
+}
+
+/** Function to set the active slide in the index view.
+ *
+ *  @param nbr index of the active slide
+ */
+function indexSetActiveSlide(nbr)
+{
+    if (nbr &gt;= slides.length)
+        nbr = slides.length - 1;
+    else if (nbr &lt; 0)
+        nbr = 0;
+
+    slides[activeSlide][&quot;element&quot;].setAttribute(&quot;opacity&quot;,0.5);
+
+    activeSlide = parseInt(nbr);
+    window.location.hash = (activeSlide + 1) + '_0';
+
+    slides[activeSlide][&quot;element&quot;].setAttribute(&quot;opacity&quot;,1);
+}
+
+/** Function to set the page and active slide in index view.
+ *
+ *  @param nbr index of the active slide
+ *
+ *  NOTE: To force a redraw,
+ *  set INDEX_OFFSET to -1 before calling indexSetPageSlide().
+ *
+ *  This is necessary for zooming (otherwise the index might not
+ *  get redrawn) and when switching to index mode.
+ *
+ *  INDEX_OFFSET = -1
+ *  indexSetPageSlide(activeSlide);
+ */
+function indexSetPageSlide(nbr)
+{
+    if (nbr &gt;= slides.length)
+        nbr = slides.length - 1;
+    else if (nbr &lt; 0)
+        nbr = 0;
+
+    //calculate the offset
+    var offset = nbr - nbr % (INDEX_COLUMNS * INDEX_COLUMNS);
+
+    if (offset &lt; 0)
+        offset = 0;
+
+    //if different from kept offset, then record and change the page
+    if (offset != INDEX_OFFSET)
+    {
+        INDEX_OFFSET = offset;
+        displayIndex(INDEX_OFFSET);
+    }
+
+    //set the active slide
+    indexSetActiveSlide(nbr);
+}
+
+/** Event handler for key press.
+ *
+ *  @param e the event
+ */
+function keydown(e)
+{
+    if (!e)
+        e = window.event;
+
+    code = e.keyCode || e.charCode;
+
+    if (!processingEffect &amp;&amp; keyCodeDictionary[currentMode] &amp;&amp; keyCodeDictionary[currentMode][code])
+        return keyCodeDictionary[currentMode][code]();
+    else
+        document.onkeypress = keypress;
+}
+// Set event handler for key down.
+document.onkeydown = keydown;
+
+/** Event handler for key press.
+ *
+ *  @param e the event
+ */
+function keypress(e)
+{
+    document.onkeypress = null;
+
+    if (!e)
+        e = window.event;
+
+    str = String.fromCharCode(e.keyCode || e.charCode);
+
+    if (!processingEffect &amp;&amp; charCodeDictionary[currentMode] &amp;&amp; charCodeDictionary[currentMode][str])
+        return charCodeDictionary[currentMode][str]();
+}
+
+/** Function to supply the default char code dictionary.
+ *
+ * @returns default char code dictionary
+ */
+function getDefaultCharCodeDictionary()
+{
+    var charCodeDict = new Object();
+
+    charCodeDict[SLIDE_MODE] = new Object();
+    charCodeDict[INDEX_MODE] = new Object();
+    charCodeDict[DRAWING_MODE] = new Object();
+
+    charCodeDict[SLIDE_MODE][&quot;i&quot;] = function () { return toggleSlideIndex(); };
+    charCodeDict[SLIDE_MODE][&quot;d&quot;] = function () { return slideSwitchToDrawingMode(); };
+    charCodeDict[SLIDE_MODE][&quot;D&quot;] = function () { return slideQueryDuration(); };
+    charCodeDict[SLIDE_MODE][&quot;n&quot;] = function () { return slideAddSlide(activeSlide); };
+    charCodeDict[SLIDE_MODE][&quot;p&quot;] = function () { return slideToggleProgressBarVisibility(); };
+    charCodeDict[SLIDE_MODE][&quot;t&quot;] = function () { return slideResetTimer(); };
+    charCodeDict[SLIDE_MODE][&quot;e&quot;] = function () { return slideUpdateExportLayer(); };
+
+    charCodeDict[DRAWING_MODE][&quot;d&quot;] = function () { return drawingSwitchToSlideMode(); };
+    charCodeDict[DRAWING_MODE][&quot;0&quot;] = function () { return drawingResetPathWidth(); };
+    charCodeDict[DRAWING_MODE][&quot;1&quot;] = function () { return drawingSetPathWidth(1.0); };
+    charCodeDict[DRAWING_MODE][&quot;3&quot;] = function () { return drawingSetPathWidth(3.0); };
+    charCodeDict[DRAWING_MODE][&quot;5&quot;] = function () { return drawingSetPathWidth(5.0); };
+    charCodeDict[DRAWING_MODE][&quot;7&quot;] = function () { return drawingSetPathWidth(7.0); };
+    charCodeDict[DRAWING_MODE][&quot;9&quot;] = function () { return drawingSetPathWidth(9.0); };
+    charCodeDict[DRAWING_MODE][&quot;b&quot;] = function () { return drawingSetPathColour(&quot;blue&quot;); };
+    charCodeDict[DRAWING_MODE][&quot;c&quot;] = function () { return drawingSetPathColour(&quot;cyan&quot;); };
+    charCodeDict[DRAWING_MODE][&quot;g&quot;] = function () { return drawingSetPathColour(&quot;green&quot;); };
+    charCodeDict[DRAWING_MODE][&quot;k&quot;] = function () { return drawingSetPathColour(&quot;black&quot;); };
+    charCodeDict[DRAWING_MODE][&quot;m&quot;] = function () { return drawingSetPathColour(&quot;magenta&quot;); };
+    charCodeDict[DRAWING_MODE][&quot;o&quot;] = function () { return drawingSetPathColour(&quot;orange&quot;); };
+    charCodeDict[DRAWING_MODE][&quot;r&quot;] = function () { return drawingSetPathColour(&quot;red&quot;); };
+    charCodeDict[DRAWING_MODE][&quot;w&quot;] = function () { return drawingSetPathColour(&quot;white&quot;); };
+    charCodeDict[DRAWING_MODE][&quot;y&quot;] = function () { return drawingSetPathColour(&quot;yellow&quot;); };
+    charCodeDict[DRAWING_MODE][&quot;z&quot;] = function () { return drawingUndo(); };
+
+    charCodeDict[INDEX_MODE][&quot;i&quot;] = function () { return toggleSlideIndex(); };
+    charCodeDict[INDEX_MODE][&quot;-&quot;] = function () { return indexDecreaseNumberOfColumns(); };
+    charCodeDict[INDEX_MODE][&quot;=&quot;] = function () { return indexIncreaseNumberOfColumns(); };
+    charCodeDict[INDEX_MODE][&quot;+&quot;] = function () { return indexIncreaseNumberOfColumns(); };
+    charCodeDict[INDEX_MODE][&quot;0&quot;] = function () { return indexResetNumberOfColumns(); };
+
+    return charCodeDict;
+}
+
+/** Function to supply the default key code dictionary.
+ *
+ * @returns default key code dictionary
+ */
+function getDefaultKeyCodeDictionary()
+{
+    var keyCodeDict = new Object();
+
+    keyCodeDict[SLIDE_MODE] = new Object();
+    keyCodeDict[INDEX_MODE] = new Object();
+    keyCodeDict[DRAWING_MODE] = new Object();
+
+    keyCodeDict[SLIDE_MODE][LEFT_KEY] = function() { return dispatchEffects(-1); };
+    keyCodeDict[SLIDE_MODE][RIGHT_KEY] = function() { return dispatchEffects(1); };
+    keyCodeDict[SLIDE_MODE][UP_KEY] = function() { return skipEffects(-1); };
+    keyCodeDict[SLIDE_MODE][DOWN_KEY] = function() { return skipEffects(1); };
+    keyCodeDict[SLIDE_MODE][PAGE_UP_KEY] = function() { return dispatchEffects(-1); };
+    keyCodeDict[SLIDE_MODE][PAGE_DOWN_KEY] = function() { return dispatchEffects(1); };
+    keyCodeDict[SLIDE_MODE][HOME_KEY] = function() { return slideSetActiveSlide(0); };
+    keyCodeDict[SLIDE_MODE][END_KEY] = function() { return slideSetActiveSlide(slides.length - 1); };
+    keyCodeDict[SLIDE_MODE][SPACE_KEY] = function() { return dispatchEffects(1); };
+
+    keyCodeDict[INDEX_MODE][LEFT_KEY] = function() { return indexSetPageSlide(activeSlide - 1); };
+    keyCodeDict[INDEX_MODE][RIGHT_KEY] = function() { return indexSetPageSlide(activeSlide + 1); };
+    keyCodeDict[INDEX_MODE][UP_KEY] = function() { return indexSetPageSlide(activeSlide - INDEX_COLUMNS); };
+    keyCodeDict[INDEX_MODE][DOWN_KEY] = function() { return indexSetPageSlide(activeSlide + INDEX_COLUMNS); };
+    keyCodeDict[INDEX_MODE][PAGE_UP_KEY] = function() { return indexSetPageSlide(activeSlide - INDEX_COLUMNS * INDEX_COLUMNS); };
+    keyCodeDict[INDEX_MODE][PAGE_DOWN_KEY] = function() { return indexSetPageSlide(activeSlide + INDEX_COLUMNS * INDEX_COLUMNS); };
+    keyCodeDict[INDEX_MODE][HOME_KEY] = function() { return indexSetPageSlide(0); };
+    keyCodeDict[INDEX_MODE][END_KEY] = function() { return indexSetPageSlide(slides.length - 1); };
+    keyCodeDict[INDEX_MODE][ENTER_KEY] = function() { return toggleSlideIndex(); };
+
+    keyCodeDict[DRAWING_MODE][ESCAPE_KEY] = function () { return drawingSwitchToSlideMode(); };
+
+    return keyCodeDict;
+}
+
+/** Function to handle all mouse events.
+ *
+ *    @param    evnt    event
+ *    @param    action    type of event (e.g. mouse up, mouse wheel)
+ */
+function mouseHandlerDispatch(evnt, action)
+{
+    if (!evnt)
+        evnt = window.event;
+
+    var retVal = true;
+
+    if (!processingEffect &amp;&amp; mouseHandlerDictionary[currentMode] &amp;&amp; mouseHandlerDictionary[currentMode][action])
+    {
+        var subRetVal = mouseHandlerDictionary[currentMode][action](evnt);
+
+        if (subRetVal != null &amp;&amp; subRetVal != undefined)
+            retVal = subRetVal;
+    }
+
+    if (evnt.preventDefault &amp;&amp; !retVal)
+        evnt.preventDefault();
+
+    evnt.returnValue = retVal;
+
+    return retVal;
+}
+
+// Set mouse event handler.
+document.onmousedown = function(e) { return mouseHandlerDispatch(e, MOUSE_DOWN); };
+document.onmouseup = function(e) { return mouseHandlerDispatch(e, MOUSE_UP); };
+document.onmousemove = function(e) { return mouseHandlerDispatch(e, MOUSE_MOVE); };
+
+// Moz
+if (window.addEventListener)
+{
+    window.addEventListener('DOMMouseScroll', function(e) { return mouseHandlerDispatch(e, MOUSE_WHEEL); }, false);
+}
+
+// Opera Safari OK - may not work in IE
+window.onmousewheel = function(e) { return mouseHandlerDispatch(e, MOUSE_WHEEL); };
+
+/** Function to supply the default mouse handler dictionary.
+ *
+ * @returns default mouse handler dictionary
+ */
+function getDefaultMouseHandlerDictionary()
+{
+    var mouseHandlerDict = new Object();
+
+    mouseHandlerDict[SLIDE_MODE] = new Object();
+    mouseHandlerDict[INDEX_MODE] = new Object();
+    mouseHandlerDict[DRAWING_MODE] = new Object();
+
+    mouseHandlerDict[SLIDE_MODE][MOUSE_DOWN] = function(evnt) { return dispatchEffects(1); };
+    mouseHandlerDict[SLIDE_MODE][MOUSE_WHEEL] = function(evnt) { return slideMousewheel(evnt); };
+
+    mouseHandlerDict[INDEX_MODE][MOUSE_DOWN] = function(evnt) { return toggleSlideIndex(); };
+
+    mouseHandlerDict[DRAWING_MODE][MOUSE_DOWN] = function(evnt) { return drawingMousedown(evnt); };
+    mouseHandlerDict[DRAWING_MODE][MOUSE_UP] = function(evnt) { return drawingMouseup(evnt); };
+    mouseHandlerDict[DRAWING_MODE][MOUSE_MOVE] = function(evnt) { return drawingMousemove(evnt); };
+
+    return mouseHandlerDict;
+}
+
+/** Function to switch from slide mode to drawing mode.
+*/
+function slideSwitchToDrawingMode()
+{
+    currentMode = DRAWING_MODE;
+
+    var tempDict;
+
+    if (ROOT_NODE.hasAttribute(&quot;style&quot;))
+        tempDict = propStrToDict(ROOT_NODE.getAttribute(&quot;style&quot;));
+    else
+        tempDict = new Object();
+
+    tempDict[&quot;cursor&quot;] = &quot;crosshair&quot;;
+    ROOT_NODE.setAttribute(&quot;style&quot;, dictToPropStr(tempDict));
+}
+
+/** Function to switch from drawing mode to slide mode.
+*/
+function drawingSwitchToSlideMode()
+{
+    currentMode = SLIDE_MODE;
+
+    var tempDict;
+
+    if (ROOT_NODE.hasAttribute(&quot;style&quot;))
+        tempDict = propStrToDict(ROOT_NODE.getAttribute(&quot;style&quot;));
+    else
+        tempDict = new Object();
+
+    tempDict[&quot;cursor&quot;] = &quot;auto&quot;;
+    ROOT_NODE.setAttribute(&quot;style&quot;, dictToPropStr(tempDict));
+}
+
+/** Function to decrease the number of columns in index mode.
+*/
+function indexDecreaseNumberOfColumns()
+{
+    if (INDEX_COLUMNS &gt;= 3)
+    {
+        INDEX_COLUMNS -= 1;
+        INDEX_OFFSET = -1
+            indexSetPageSlide(activeSlide);
+    }
+}
+
+/** Function to increase the number of columns in index mode.
+*/
+function indexIncreaseNumberOfColumns()
+{
+    if (INDEX_COLUMNS &lt; 7)
+    {
+        INDEX_COLUMNS += 1;
+        INDEX_OFFSET = -1
+            indexSetPageSlide(activeSlide);
+    }
+}
+
+/** Function to reset the number of columns in index mode.
+*/
+function indexResetNumberOfColumns()
+{
+    if (INDEX_COLUMNS != INDEX_COLUMNS_DEFAULT)
+    {
+        INDEX_COLUMNS = INDEX_COLUMNS_DEFAULT;
+        INDEX_OFFSET = -1
+            indexSetPageSlide(activeSlide);
+    }
+}
+
+/** Function to reset path width in drawing mode.
+*/
+function drawingResetPathWidth()
+{
+    path_width = path_width_default;
+    set_path_paint_width();
+}
+
+/** Function to set path width in drawing mode.
+ *
+ * @param width new path width
+ */
+function drawingSetPathWidth(width)
+{
+    path_width = width;
+    set_path_paint_width();
+}
+
+/** Function to set path colour in drawing mode.
+ *
+ * @param colour new path colour
+ */
+function drawingSetPathColour(colour)
+{
+    path_colour = colour;
+}
+
+/** Function to query the duration of the presentation from the user in slide mode.
+*/
+function slideQueryDuration()
+{
+    var new_duration = prompt(&quot;Length of presentation in minutes?&quot;, timer_duration);
+
+    if ((new_duration != null) &amp;&amp; (new_duration != ''))
+    {
+        timer_duration = new_duration;
+    }
+
+    updateTimer();
+}
+
+/** Function to add new slide in slide mode.
+ *
+ * @param afterSlide after which slide to insert the new one
+ */
+function slideAddSlide(afterSlide)
+{
+    addSlide(afterSlide);
+    slideSetActiveSlide(afterSlide + 1);
+    updateTimer();
+}
+
+/** Function to toggle the visibility of the progress bar in slide mode.
+*/
+function slideToggleProgressBarVisibility()
+{
+    if (progress_bar_visible)
+    {
+        progress_bar_visible = false;
+        hideProgressBar();
+    }
+    else
+    {
+        progress_bar_visible = true;
+        showProgressBar();
+    }
+}
+
+/** Function to reset the timer in slide mode.
+*/
+function slideResetTimer()
+{
+    timer_start = timer_elapsed;
+    updateTimer();
+}
+
+/** Convenience function to pad a string with zero in front up to a certain length.
+ */
+function padString(str, len)
+{
+    var outStr = str;
+
+    while (outStr.length &lt; len)
+    {
+        outStr = '0' + outStr;
+    }
+
+    return outStr;
+}
+
+/** Function to update the export layer.
+ */
+function slideUpdateExportLayer()
+{
+    // Suspend redraw since we are going to mess with the slides.
+    var suspendHandle = ROOT_NODE.suspendRedraw(2000);
+
+    var tmpActiveSlide = activeSlide;
+    var tmpActiveEffect = activeEffect;
+    var exportedLayers = new Array();
+
+    for (var counterSlides = 0; counterSlides &lt; slides.length; counterSlides++)
+    {
+        var exportNode;
+
+        setSlideToState(counterSlides, STATE_START);
+
+        var maxEffect = 0;
+
+        if (slides[counterSlides].effects)
+        {
+            maxEffect = slides[counterSlides].effects.length;
+        }
+
+        exportNode = slides[counterSlides].element.cloneNode(true);
+        exportNode.setAttributeNS(NSS[&quot;inkscape&quot;], &quot;groupmode&quot;, &quot;layer&quot;);
+        exportNode.setAttributeNS(NSS[&quot;inkscape&quot;], &quot;label&quot;, &quot;slide_&quot; + padString((counterSlides + 1).toString(), slides.length.toString().length) + &quot;_effect_&quot; + padString(&quot;0&quot;, maxEffect.toString().length));
+
+        exportedLayers.push(exportNode);
+
+        if (slides[counterSlides][&quot;effects&quot;])
+        {
+            for (var counter = 0; counter &lt; slides[counterSlides][&quot;effects&quot;].length; counter++)
+            {
+                for (var subCounter = 0; subCounter &lt; slides[counterSlides][&quot;effects&quot;][counter].length; subCounter++)
+                {
+                    var effect = slides[counterSlides][&quot;effects&quot;][counter][subCounter];
+                    if (effect[&quot;effect&quot;] == &quot;fade&quot;)
+                        fade(parseInt(effect[&quot;dir&quot;]), effect[&quot;element&quot;], STATE_END, effect[&quot;options&quot;]);
+                    else if (effect[&quot;effect&quot;] == &quot;appear&quot;)
+                        appear(parseInt(effect[&quot;dir&quot;]), effect[&quot;element&quot;], STATE_END, effect[&quot;options&quot;]);
+                    else if (effect[&quot;effect&quot;] == &quot;pop&quot;)
+                        pop(parseInt(effect[&quot;dir&quot;]), effect[&quot;element&quot;], STATE_END, effect[&quot;options&quot;]);
+                    else if (effect[&quot;effect&quot;] == &quot;view&quot;)
+                        view(parseInt(effect[&quot;dir&quot;]), effect[&quot;element&quot;], STATE_END, effect[&quot;options&quot;]);
+                }
+
+                var layerName = &quot;slide_&quot; + padString((counterSlides + 1).toString(), slides.length.toString().length) + &quot;_effect_&quot; + padString((counter + 1).toString(), maxEffect.toString().length);
+                exportNode = slides[counterSlides].element.cloneNode(true);
+                exportNode.setAttributeNS(NSS[&quot;inkscape&quot;], &quot;groupmode&quot;, &quot;layer&quot;);
+                exportNode.setAttributeNS(NSS[&quot;inkscape&quot;], &quot;label&quot;, layerName);
+                exportNode.setAttribute(&quot;id&quot;, layerName);
+
+                exportedLayers.push(exportNode);
+            }
+        }
+    }
+
+    activeSlide = tmpActiveSlide;
+    activeEffect = tmpActiveEffect;
+    setSlideToState(activeSlide, activeEffect);
+
+    // Copy image.
+    var newDoc = document.documentElement.cloneNode(true);
+
+    // Delete viewbox form new imag and set width and height.
+    newDoc.removeAttribute('viewbox');
+    newDoc.setAttribute('width', WIDTH);
+    newDoc.setAttribute('height', HEIGHT);
+
+    // Delete all layers and script elements.
+    var nodesToBeRemoved = new Array();
+
+    for (var childCounter = 0; childCounter &lt;  newDoc.childNodes.length; childCounter++)
+    {
+        var child = newDoc.childNodes[childCounter];
+
+        if (child.nodeType == 1)
+        {
+            if ((child.nodeName.toUpperCase() == 'G') || (child.nodeName.toUpperCase() == 'SCRIPT'))
+            {
+                nodesToBeRemoved.push(child);
+            }
+        }
+    }
+
+    for (var ndCounter = 0; ndCounter &lt; nodesToBeRemoved.length; ndCounter++)
+    {
+        var nd = nodesToBeRemoved[ndCounter];
+
+        // Before removing the node, check whether it contains any definitions.
+        var defs = nd.getElementsByTagNameNS(NSS[&quot;svg&quot;], &quot;defs&quot;);
+
+        for (var defsCounter = 0; defsCounter &lt; defs.length; defsCounter++)
+        {
+            if (defs[defsCounter].id)
+            {
+                newDoc.appendChild(defs[defsCounter].cloneNode(true));
+            }
+        }
+
+        // Remove node.
+        nd.parentNode.removeChild(nd);
+    }
+
+    // Set current layer.
+    if (exportedLayers[0])
+    {
+        var namedView;
+
+        for (var nodeCounter = 0; nodeCounter &lt; newDoc.childNodes.length; nodeCounter++)
+        {
+            if ((newDoc.childNodes[nodeCounter].nodeType == 1) &amp;&amp; (newDoc.childNodes[nodeCounter].getAttribute('id') == 'base'))
+            {
+                namedView = newDoc.childNodes[nodeCounter];
+            }
+        }
+
+        if (namedView)
+        {
+            namedView.setAttributeNS(NSS['inkscape'], 'current-layer', exportedLayers[0].getAttributeNS(NSS['inkscape'], 'label'));
+        }
+    }
+
+    // Add exported layers.
+    while (exportedLayers.length &gt; 0)
+    {
+        var nd = exportedLayers.pop();
+
+        nd.setAttribute(&quot;opacity&quot;,1);
+        nd.style.display = &quot;inherit&quot;;
+
+        newDoc.appendChild(nd);
+    }
+
+    // Serialise the new document.
+  window.location = 'data:application/svg+xml;base64;charset=utf-8,' + window.btoa(unescape(encodeURIComponent((new XMLSerializer()).serializeToString(newDoc))));
+
+    // Unsuspend redraw.
+    ROOT_NODE.unsuspendRedraw(suspendHandle);
+    ROOT_NODE.forceRedraw();
+}
+
+/** Function to undo last drawing operation.
+*/
+function drawingUndo()
+{
+    mouse_presentation_path = null;
+    mouse_original_path = null;
+
+    if (history_presentation_elements.length &gt; 0)
+    {
+        var p = history_presentation_elements.pop();
+        var parent = p.parentNode.removeChild(p);
+
+        p = history_original_elements.pop();
+        parent = p.parentNode.removeChild(p);
+    }
+}
+
+/** Event handler for mouse down in drawing mode.
+ *
+ *  @param e the event
+ */
+function drawingMousedown(e)
+{
+    var value = 0;
+
+    if (e.button)
+        value = e.button;
+    else if (e.which)
+        value = e.which;
+
+    if (value == 1)
+    {
+        history_counter++;
+
+        var p = calcCoord(e);
+
+        mouse_last_x = e.clientX;
+        mouse_last_y = e.clientY;
+        mouse_original_path = document.createElementNS(NSS[&quot;svg&quot;], &quot;path&quot;);
+        mouse_original_path.setAttribute(&quot;stroke&quot;, path_colour);
+        mouse_original_path.setAttribute(&quot;stroke-width&quot;, path_paint_width);
+        mouse_original_path.setAttribute(&quot;fill&quot;, &quot;none&quot;);
+        mouse_original_path.setAttribute(&quot;id&quot;, &quot;path &quot; + Date());
+        mouse_original_path.setAttribute(&quot;d&quot;, &quot;M&quot; + p.x + &quot;,&quot; + p.y);
+        slides[activeSlide][&quot;original_element&quot;].appendChild(mouse_original_path);
+        history_original_elements.push(mouse_original_path);
+
+        mouse_presentation_path = document.createElementNS(NSS[&quot;svg&quot;], &quot;path&quot;);
+        mouse_presentation_path.setAttribute(&quot;stroke&quot;, path_colour);
+        mouse_presentation_path.setAttribute(&quot;stroke-width&quot;, path_paint_width);
+        mouse_presentation_path.setAttribute(&quot;fill&quot;, &quot;none&quot;);
+        mouse_presentation_path.setAttribute(&quot;id&quot;, &quot;path &quot; + Date() + &quot; presentation copy&quot;);
+        mouse_presentation_path.setAttribute(&quot;d&quot;, &quot;M&quot; + p.x + &quot;,&quot; + p.y);
+
+        if (slides[activeSlide][&quot;viewGroup&quot;])
+            slides[activeSlide][&quot;viewGroup&quot;].appendChild(mouse_presentation_path);
+        else
+            slides[activeSlide][&quot;element&quot;].appendChild(mouse_presentation_path);
+
+        history_presentation_elements.push(mouse_presentation_path);
+
+        return false;
+    }
+
+    return true;
+}
+
+/** Event handler for mouse up in drawing mode.
+ *
+ *  @param e the event
+ */
+function drawingMouseup(e)
+{
+    if(!e)
+        e = window.event;
+
+    if (mouse_presentation_path != null)
+    {
+        var p = calcCoord(e);
+        var d = mouse_presentation_path.getAttribute(&quot;d&quot;);
+        d += &quot; L&quot; + p.x + &quot;,&quot; + p.y;
+        mouse_presentation_path.setAttribute(&quot;d&quot;, d);
+        mouse_presentation_path = null;
+        mouse_original_path.setAttribute(&quot;d&quot;, d);
+        mouse_original_path = null;
+
+        return false;
+    }
+
+    return true;
+}
+
+/** Event handler for mouse move in drawing mode.
+ *
+ *  @param e the event
+ */
+function drawingMousemove(e)
+{
+    if(!e)
+        e = window.event;
+
+    var dist = (mouse_last_x - e.clientX) * (mouse_last_x - e.clientX) + (mouse_last_y - e.clientY) * (mouse_last_y - e.clientY);
+
+    if (mouse_presentation_path == null)
+    {
+        return true;
+    }
+
+    if (dist &gt;= mouse_min_dist_sqr)
+    {
+        var p = calcCoord(e);
+        var d = mouse_presentation_path.getAttribute(&quot;d&quot;);
+        d += &quot; L&quot; + p.x + &quot;,&quot; + p.y;
+        mouse_presentation_path.setAttribute(&quot;d&quot;, d);
+        mouse_original_path.setAttribute(&quot;d&quot;, d);
+        mouse_last_x = e.clientX;
+        mouse_last_y = e.clientY;
+    }
+
+    return false;
+}
+
+/** Event handler for mouse wheel events in slide mode.
+ *  based on http://adomas.org/javascript-mouse-wheel/
+ *
+ *  @param e the event
+ */
+function slideMousewheel(e)
+{
+    var delta = 0;
+
+    if (!e)
+        e = window.event;
+
+    if (e.wheelDelta)
+    { // IE Opera
+        delta = e.wheelDelta/120;
+    }
+    else if (e.detail)
+    { // MOZ
+        delta = -e.detail/3;
+    }
+
+    if (delta &gt; 0)
+        skipEffects(-1);
+    else if (delta &lt; 0)
+        skipEffects(1);
+
+    if (e.preventDefault)
+        e.preventDefault();
+
+    e.returnValue = false;
+}
+
+/** Event handler for mouse wheel events in index mode.
+ *  based on http://adomas.org/javascript-mouse-wheel/
+ *
+ *  @param e the event
+ */
+function indexMousewheel(e)
+{
+    var delta = 0;
+
+    if (!e)
+        e = window.event;
+
+    if (e.wheelDelta)
+    { // IE Opera
+        delta = e.wheelDelta/120;
+    }
+    else if (e.detail)
+    { // MOZ
+        delta = -e.detail/3;
+    }
+
+    if (delta &gt; 0)
+        indexSetPageSlide(activeSlide - INDEX_COLUMNS * INDEX_COLUMNS);
+    else if (delta &lt; 0)
+        indexSetPageSlide(activeSlide + INDEX_COLUMNS * INDEX_COLUMNS);
+
+    if (e.preventDefault)
+        e.preventDefault();
+
+    e.returnValue = false;
+}
+
+/** Function to set the path paint width.
+*/
+function set_path_paint_width()
+{
+    var svgPoint1 = document.documentElement.createSVGPoint();
+    var svgPoint2 = document.documentElement.createSVGPoint();
+
+    svgPoint1.x = 0.0;
+    svgPoint1.y = 0.0;
+    svgPoint2.x = 1.0;
+    svgPoint2.y = 0.0;
+
+    var matrix = slides[activeSlide][&quot;element&quot;].getTransformToElement(ROOT_NODE);
+
+    if (slides[activeSlide][&quot;viewGroup&quot;])
+        matrix = slides[activeSlide][&quot;viewGroup&quot;].getTransformToElement(ROOT_NODE);
+
+    svgPoint1 = svgPoint1.matrixTransform(matrix);
+    svgPoint2 = svgPoint2.matrixTransform(matrix);
+
+    path_paint_width = path_width / Math.sqrt((svgPoint2.x - svgPoint1.x) * (svgPoint2.x - svgPoint1.x) + (svgPoint2.y - svgPoint1.y) * (svgPoint2.y - svgPoint1.y));
+}
+
+/** The view effect.
+ *
+ *  @param dir direction the effect should be played (1 = forwards, -1 = backwards)
+ *  @param element the element the effect should be applied to
+ *  @param time the time that has elapsed since the beginning of the effect
+ *  @param options a dictionary with additional options (e.g. length of the effect); for the view effect the options need to contain the old and the new matrix.
+ */
+function view(dir, element, time, options)
+{
+    var length = 250;
+    var fraction;
+
+    if (!options[&quot;matrixInitial&quot;])
+    {
+        var tempString = slides[activeSlide][&quot;viewGroup&quot;].getAttribute(&quot;transform&quot;);
+
+        if (tempString)
+            options[&quot;matrixInitial&quot;] = (new matrixSVG()).fromAttribute(tempString);
+        else
+            options[&quot;matrixInitial&quot;] = (new matrixSVG()).fromSVGElements(1, 0, 0, 1, 0, 0);
+    }
+
+    if ((time == STATE_END) || (time == STATE_START))
+        fraction = 1;
+    else
+    {
+        if (options &amp;&amp; options[&quot;length&quot;])
+            length = options[&quot;length&quot;];
+
+        fraction = time / length;
+    }
+
+    if (dir == 1)
+    {
+        if (fraction &lt;= 0)
+        {
+            element.setAttribute(&quot;transform&quot;, options[&quot;matrixInitial&quot;].toAttribute());
+        }
+        else if (fraction &gt;= 1)
+        {
+            element.setAttribute(&quot;transform&quot;, options[&quot;matrixNew&quot;].toAttribute());
+
+            set_path_paint_width();
+
+            options[&quot;matrixInitial&quot;] = null;
+            return true;
+        }
+        else
+        {
+            element.setAttribute(&quot;transform&quot;, options[&quot;matrixInitial&quot;].mix(options[&quot;matrixNew&quot;], fraction).toAttribute());
+        }
+    }
+    else if (dir == -1)
+    {
+        if (fraction &lt;= 0)
+        {
+            element.setAttribute(&quot;transform&quot;, options[&quot;matrixInitial&quot;].toAttribute());
+        }
+        else if (fraction &gt;= 1)
+        {
+            element.setAttribute(&quot;transform&quot;, options[&quot;matrixOld&quot;].toAttribute());
+            set_path_paint_width();
+
+            options[&quot;matrixInitial&quot;] = null;
+            return true;
+        }
+        else
+        {
+            element.setAttribute(&quot;transform&quot;, options[&quot;matrixInitial&quot;].mix(options[&quot;matrixOld&quot;], fraction).toAttribute());
+        }
+    }
+
+    return false;
+}
+
+/** The fade effect.
+ *
+ *  @param dir direction the effect should be played (1 = forwards, -1 = backwards)
+ *  @param element the element the effect should be applied to
+ *  @param time the time that has elapsed since the beginning of the effect
+ *  @param options a dictionary with additional options (e.g. length of the effect)
+ */
+function fade(dir, element, time, options)
+{
+    var length = 250;
+    var fraction;
+
+    if ((time == STATE_END) || (time == STATE_START))
+        fraction = 1;
+    else
+    {
+        if (options &amp;&amp; options[&quot;length&quot;])
+            length = options[&quot;length&quot;];
+
+        fraction = time / length;
+    }
+
+    if (dir == 1)
+    {
+        if (fraction &lt;= 0)
+        {
+            element.style.display = &quot;none&quot;;
+            element.setAttribute(&quot;opacity&quot;, 0);
+        }
+        else if (fraction &gt;= 1)
+        {
+            element.style.display = &quot;inherit&quot;;
+            element.setAttribute(&quot;opacity&quot;, 1);
+            return true;
+        }
+        else
+        {
+            element.style.display = &quot;inherit&quot;;
+            element.setAttribute(&quot;opacity&quot;, fraction);
+        }
+    }
+    else if (dir == -1)
+    {
+        if (fraction &lt;= 0)
+        {
+            element.style.display = &quot;inherit&quot;;
+            element.setAttribute(&quot;opacity&quot;, 1);
+        }
+        else if (fraction &gt;= 1)
+        {
+            element.setAttribute(&quot;opacity&quot;, 0);
+            element.style.display = &quot;none&quot;;
+            return true;
+        }
+        else
+        {
+            element.style.display = &quot;inherit&quot;;
+            element.setAttribute(&quot;opacity&quot;, 1 - fraction);
+        }
+    }
+    return false;
+}
+
+/** The appear effect.
+ *
+ *  @param dir direction the effect should be played (1 = forwards, -1 = backwards)
+ *  @param element the element the effect should be applied to
+ *  @param time the time that has elapsed since the beginning of the effect
+ *  @param options a dictionary with additional options (e.g. length of the effect)
+ */
+function appear(dir, element, time, options)
+{
+    if (dir == 1)
+    {
+        element.style.display = &quot;inherit&quot;;
+        element.setAttribute(&quot;opacity&quot;,1);
+    }
+    else if (dir == -1)
+    {
+        element.style.display = &quot;none&quot;;
+        element.setAttribute(&quot;opacity&quot;,0);
+    }
+    return true;
+}
+
+/** The pop effect.
+ *
+ *  @param dir direction the effect should be played (1 = forwards, -1 = backwards)
+ *  @param element the element the effect should be applied to
+ *  @param time the time that has elapsed since the beginning of the effect
+ *  @param options a dictionary with additional options (e.g. length of the effect)
+ */
+function pop(dir, element, time, options)
+{
+    var length = 500;
+    var fraction;
+
+    if ((time == STATE_END) || (time == STATE_START))
+        fraction = 1;
+    else
+    {
+        if (options &amp;&amp; options[&quot;length&quot;])
+            length = options[&quot;length&quot;];
+
+        fraction = time / length;
+    }
+
+    if (dir == 1)
+    {
+        if (fraction &lt;= 0)
+        {
+            element.setAttribute(&quot;opacity&quot;, 0);
+            element.setAttribute(&quot;transform&quot;, &quot;scale(0)&quot;);
+            element.style.display = &quot;none&quot;;
+        }
+        else if (fraction &gt;= 1)
+        {
+            element.setAttribute(&quot;opacity&quot;, 1);
+            element.removeAttribute(&quot;transform&quot;);
+            element.style.display = &quot;inherit&quot;;
+            return true;
+        }
+        else
+        {
+            element.style.display = &quot;inherit&quot;;
+            var opacityFraction = fraction * 3;
+            if (opacityFraction &gt; 1)
+                opacityFraction = 1;
+            element.setAttribute(&quot;opacity&quot;, opacityFraction);
+            var offsetX = WIDTH * (1.0 - fraction) / 2.0;
+            var offsetY = HEIGHT * (1.0 - fraction) / 2.0;
+            element.setAttribute(&quot;transform&quot;, &quot;translate(&quot; + offsetX + &quot;,&quot; + offsetY + &quot;) scale(&quot; + fraction + &quot;)&quot;);
+        }
+    }
+    else if (dir == -1)
+    {
+        if (fraction &lt;= 0)
+        {
+            element.setAttribute(&quot;opacity&quot;, 1);
+            element.setAttribute(&quot;transform&quot;, &quot;scale(1)&quot;);
+            element.style.display = &quot;inherit&quot;;
+        }
+        else if (fraction &gt;= 1)
+        {
+            element.setAttribute(&quot;opacity&quot;, 0);
+            element.removeAttribute(&quot;transform&quot;);
+            element.style.display = &quot;none&quot;;
+            return true;
+        }
+        else
+        {
+            element.setAttribute(&quot;opacity&quot;, 1 - fraction);
+            element.setAttribute(&quot;transform&quot;, &quot;scale(&quot; + 1 - fraction + &quot;)&quot;);
+            element.style.display = &quot;inherit&quot;;
+        }
+    }
+    return false;
+}
+
+/** Function to set a slide either to the start or the end state.
+ *
+ *  @param slide the slide to use
+ *  @param state the state into which the slide should be set
+ */
+function setSlideToState(slide, state)
+{
+    slides[slide][&quot;viewGroup&quot;].setAttribute(&quot;transform&quot;, slides[slide].initialView);
+
+    if (slides[slide][&quot;effects&quot;])
+    {
+        if (state == STATE_END)
+        {
+            for (var counter = 0; counter &lt; slides[slide][&quot;effects&quot;].length; counter++)
+            {
+                for (var subCounter = 0; subCounter &lt; slides[slide][&quot;effects&quot;][counter].length; subCounter++)
+                {
+                    var effect = slides[slide][&quot;effects&quot;][counter][subCounter];
+                    if (effect[&quot;effect&quot;] == &quot;fade&quot;)
+                        fade(effect[&quot;dir&quot;], effect[&quot;element&quot;], STATE_END, effect[&quot;options&quot;]);
+                    else if (effect[&quot;effect&quot;] == &quot;appear&quot;)
+                        appear(effect[&quot;dir&quot;], effect[&quot;element&quot;], STATE_END, effect[&quot;options&quot;]);
+                    else if (effect[&quot;effect&quot;] == &quot;pop&quot;)
+                        pop(effect[&quot;dir&quot;], effect[&quot;element&quot;], STATE_END, effect[&quot;options&quot;]);
+                    else if (effect[&quot;effect&quot;] == &quot;view&quot;)
+                        view(effect[&quot;dir&quot;], effect[&quot;element&quot;], STATE_END, effect[&quot;options&quot;]);
+                }
+            }
+        }
+        else if (state == STATE_START)
+        {
+            for (var counter = slides[slide][&quot;effects&quot;].length - 1; counter &gt;= 0; counter--)
+            {
+                for (var subCounter = 0; subCounter &lt; slides[slide][&quot;effects&quot;][counter].length; subCounter++)
+                {
+                    var effect = slides[slide][&quot;effects&quot;][counter][subCounter];
+                    if (effect[&quot;effect&quot;] == &quot;fade&quot;)
+                        fade(parseInt(effect[&quot;dir&quot;]) * -1, effect[&quot;element&quot;], STATE_START, effect[&quot;options&quot;]);
+                    else if (effect[&quot;effect&quot;] == &quot;appear&quot;)
+                        appear(parseInt(effect[&quot;dir&quot;]) * -1, effect[&quot;element&quot;], STATE_START, effect[&quot;options&quot;]);
+                    else if (effect[&quot;effect&quot;] == &quot;pop&quot;)
+                        pop(parseInt(effect[&quot;dir&quot;]) * -1, effect[&quot;element&quot;], STATE_START, effect[&quot;options&quot;]);
+                    else if (effect[&quot;effect&quot;] == &quot;view&quot;)
+                        view(parseInt(effect[&quot;dir&quot;]) * -1, effect[&quot;element&quot;], STATE_START, effect[&quot;options&quot;]);
+                }
+            }
+        }
+        else
+        {
+            setSlideToState(slide, STATE_START);
+
+            for (var counter = 0; counter &lt; slides[slide][&quot;effects&quot;].length &amp;&amp; counter &lt; state; counter++)
+            {
+                for (var subCounter = 0; subCounter &lt; slides[slide][&quot;effects&quot;][counter].length; subCounter++)
+                {
+                    var effect = slides[slide][&quot;effects&quot;][counter][subCounter];
+                    if (effect[&quot;effect&quot;] == &quot;fade&quot;)
+                        fade(effect[&quot;dir&quot;], effect[&quot;element&quot;], STATE_END, effect[&quot;options&quot;]);
+                    else if (effect[&quot;effect&quot;] == &quot;appear&quot;)
+                        appear(effect[&quot;dir&quot;], effect[&quot;element&quot;], STATE_END, effect[&quot;options&quot;]);
+                    else if (effect[&quot;effect&quot;] == &quot;pop&quot;)
+                        pop(effect[&quot;dir&quot;], effect[&quot;element&quot;], STATE_END, effect[&quot;options&quot;]);
+                    else if (effect[&quot;effect&quot;] == &quot;view&quot;)
+                        view(effect[&quot;dir&quot;], effect[&quot;element&quot;], STATE_END, effect[&quot;options&quot;]);
+                }
+            }
+        }
+    }
+
+    window.location.hash = (activeSlide + 1) + '_' + activeEffect;
+}
+
+/** Convenience function to translate a attribute string into a dictionary.
+ *
+ *    @param str the attribute string
+ *  @return a dictionary
+ *  @see dictToPropStr
+ */
+function propStrToDict(str)
+{
+    var list = str.split(&quot;;&quot;);
+    var obj = new Object();
+
+    for (var counter = 0; counter &lt; list.length; counter++)
+    {
+        var subStr = list[counter];
+        var subList = subStr.split(&quot;:&quot;);
+        if (subList.length == 2)
+        {
+            obj[subList[0]] = subList[1];
+        }
+    }
+
+    return obj;
+}
+
+/** Convenience function to translate a dictionary into a string that can be used as an attribute.
+ *
+ *  @param dict the dictionary to convert
+ *  @return a string that can be used as an attribute
+ *  @see propStrToDict
+ */
+function dictToPropStr(dict)
+{
+    var str = &quot;&quot;;
+
+    for (var key in dict)
+    {
+        str += key + &quot;:&quot; + dict[key] + &quot;;&quot;;
+    }
+
+    return str;
+}
+
+/** Sub-function to add a suffix to the ids of the node and all its children.
+ *
+ *    @param node the node to change
+ *    @param suffix the suffix to add
+ *    @param replace dictionary of replaced ids
+ *  @see suffixNodeIds
+ */
+function suffixNoneIds_sub(node, suffix, replace)
+{
+    if (node.nodeType == 1)
+    {
+        if (node.getAttribute(&quot;id&quot;))
+        {
+            var id = node.getAttribute(&quot;id&quot;)
+                replace[&quot;#&quot; + id] = id + suffix;
+            node.setAttribute(&quot;id&quot;, id + suffix);
+        }
+
+        if ((node.nodeName == &quot;use&quot;) &amp;&amp; (node.getAttributeNS(NSS[&quot;xlink&quot;], &quot;href&quot;)) &amp;&amp; (replace[node.getAttribute(NSS[&quot;xlink&quot;], &quot;href&quot;)]))
+            node.setAttribute(NSS[&quot;xlink&quot;], &quot;href&quot;, node.getAttribute(NSS[&quot;xlink&quot;], &quot;href&quot;) + suffix);
+
+        if (node.childNodes)
+        {
+            for (var counter = 0; counter &lt; node.childNodes.length; counter++)
+                suffixNoneIds_sub(node.childNodes[counter], suffix, replace);
+        }
+    }
+}
+
+/** Function to add a suffix to the ids of the node and all its children.
+ *
+ *    @param node the node to change
+ *    @param suffix the suffix to add
+ *  @return the changed node
+ *  @see suffixNodeIds_sub
+ */
+function suffixNodeIds(node, suffix)
+{
+    var replace = new Object();
+
+    suffixNoneIds_sub(node, suffix, replace);
+
+    return node;
+}
+
+/** Function to build a progress bar.
+ *
+ *  @param parent node to attach the progress bar to
+ */
+function createProgressBar(parent_node)
+{
+    var g = document.createElementNS(NSS[&quot;svg&quot;], &quot;g&quot;);
+    g.setAttribute(&quot;clip-path&quot;, &quot;url(#jessyInkSlideClipPath)&quot;);
+    g.setAttribute(&quot;id&quot;, &quot;layer_progress_bar&quot;);
+    g.setAttribute(&quot;style&quot;, &quot;display: none;&quot;);
+
+    var rect_progress_bar = document.createElementNS(NSS[&quot;svg&quot;], &quot;rect&quot;);
+    rect_progress_bar.setAttribute(&quot;style&quot;, &quot;marker: none; fill: rgb(128, 128, 128); stroke: none;&quot;);
+    rect_progress_bar.setAttribute(&quot;id&quot;, &quot;rect_progress_bar&quot;);
+    rect_progress_bar.setAttribute(&quot;x&quot;, 0);
+    rect_progress_bar.setAttribute(&quot;y&quot;, 0.99 * HEIGHT);
+    rect_progress_bar.setAttribute(&quot;width&quot;, 0);
+    rect_progress_bar.setAttribute(&quot;height&quot;, 0.01 * HEIGHT);
+    g.appendChild(rect_progress_bar);
+
+    var circle_timer_indicator = document.createElementNS(NSS[&quot;svg&quot;], &quot;circle&quot;);
+    circle_timer_indicator.setAttribute(&quot;style&quot;, &quot;marker: none; fill: rgb(255, 0, 0); stroke: none;&quot;);
+    circle_timer_indicator.setAttribute(&quot;id&quot;, &quot;circle_timer_indicator&quot;);
+    circle_timer_indicator.setAttribute(&quot;cx&quot;, 0.005 * HEIGHT);
+    circle_timer_indicator.setAttribute(&quot;cy&quot;, 0.995 * HEIGHT);
+    circle_timer_indicator.setAttribute(&quot;r&quot;, 0.005 * HEIGHT);
+    g.appendChild(circle_timer_indicator);
+
+    parent_node.appendChild(g);
+}
+
+/** Function to hide the progress bar.
+ *
+ */
+function hideProgressBar()
+{
+    var progress_bar = document.getElementById(&quot;layer_progress_bar&quot;);
+
+    if (!progress_bar)
+    {
+        return;
+    }
+
+    progress_bar.setAttribute(&quot;style&quot;, &quot;display: none;&quot;);
+}
+
+/** Function to show the progress bar.
+ *
+ */
+function showProgressBar()
+{
+    var progress_bar = document.getElementById(&quot;layer_progress_bar&quot;);
+
+    if (!progress_bar)
+    {
+        return;
+    }
+
+    progress_bar.setAttribute(&quot;style&quot;, &quot;display: inherit;&quot;);
+}
+
+/** Set progress bar value.
+ *
+ *    @param value the current slide number
+ *
+ */
+function setProgressBarValue(value)
+{
+    var rect_progress_bar = document.getElementById(&quot;rect_progress_bar&quot;);
+
+    if (!rect_progress_bar)
+    {
+        return;
+    }
+
+    if (value &lt; 1)
+    {
+        // First slide, assumed to be the title of the presentation
+        var x = 0;
+        var w = 0.01 * HEIGHT;
+    }
+    else if (value &gt;= slides.length - 1)
+    {
+        // Last slide, assumed to be the end of the presentation
+        var x = WIDTH - 0.01 * HEIGHT;
+        var w = 0.01 * HEIGHT;
+    }
+    else
+    {
+        value -= 1;
+        value /= (slides.length - 2);
+
+        var x = WIDTH * value;
+        var w = WIDTH / (slides.length - 2);
+    }
+
+    rect_progress_bar.setAttribute(&quot;x&quot;, x);
+    rect_progress_bar.setAttribute(&quot;width&quot;, w);
+}
+
+/** Set time indicator.
+ *
+ *    @param value the percentage of time elapse so far between 0.0 and 1.0
+ *
+ */
+function setTimeIndicatorValue(value)
+{
+    var circle_timer_indicator = document.getElementById(&quot;circle_timer_indicator&quot;);
+
+    if (!circle_timer_indicator)
+    {
+        return;
+    }
+
+    if (value &lt; 0.0)
+    {
+        value = 0.0;
+    }
+
+    if (value &gt; 1.0)
+    {
+        value = 1.0;
+    }
+
+    var cx = (WIDTH - 0.01 * HEIGHT) * value + 0.005 * HEIGHT;
+    circle_timer_indicator.setAttribute(&quot;cx&quot;, cx);
+}
+
+/** Update timer.
+ *
+ */
+function updateTimer()
+{
+    timer_elapsed += 1;
+    setTimeIndicatorValue((timer_elapsed - timer_start) / (60 * timer_duration));
+}
+
+/** Convert screen coordinates to document coordinates.
+ *
+ *  @param e event with screen coordinates
+ *
+ *  @return coordinates in SVG file coordinate system
+ */
+function calcCoord(e)
+{
+    var svgPoint = document.documentElement.createSVGPoint();
+    svgPoint.x = e.clientX + window.pageXOffset;
+    svgPoint.y = e.clientY + window.pageYOffset;
+
+    var matrix = slides[activeSlide][&quot;element&quot;].getScreenCTM();
+
+    if (slides[activeSlide][&quot;viewGroup&quot;])
+        matrix = slides[activeSlide][&quot;viewGroup&quot;].getScreenCTM();
+
+    svgPoint = svgPoint.matrixTransform(matrix.inverse());
+    return svgPoint;
+}
+
+/** Add slide.
+ *
+ *    @param after_slide after which slide the new slide should be inserted into the presentation
+ */
+function addSlide(after_slide)
+{
+    number_of_added_slides++;
+
+    var g = document.createElementNS(NSS[&quot;svg&quot;], &quot;g&quot;);
+    g.setAttribute(&quot;clip-path&quot;, &quot;url(#jessyInkSlideClipPath)&quot;);
+    g.setAttribute(&quot;id&quot;, &quot;Whiteboard &quot; + Date() + &quot; presentation copy&quot;);
+    g.setAttribute(&quot;style&quot;, &quot;display: none;&quot;);
+
+    var new_slide = new Object();
+    new_slide[&quot;element&quot;] = g;
+
+    // Set build in transition.
+    new_slide[&quot;transitionIn&quot;] = new Object();
+    var dict = defaultTransitionInDict;
+    new_slide[&quot;transitionIn&quot;][&quot;name&quot;] = dict[&quot;name&quot;];
+    new_slide[&quot;transitionIn&quot;][&quot;options&quot;] = new Object();
+
+    for (key in dict)
+        if (key != &quot;name&quot;)
+            new_slide[&quot;transitionIn&quot;][&quot;options&quot;][key] = dict[key];
+
+    // Set build out transition.
+    new_slide[&quot;transitionOut&quot;] = new Object();
+    dict = defaultTransitionOutDict;
+    new_slide[&quot;transitionOut&quot;][&quot;name&quot;] = dict[&quot;name&quot;];
+    new_slide[&quot;transitionOut&quot;][&quot;options&quot;] = new Object();
+
+    for (key in dict)
+        if (key != &quot;name&quot;)
+            new_slide[&quot;transitionOut&quot;][&quot;options&quot;][key] = dict[key];
+
+    // Copy master slide content.
+    if (masterSlide)
+    {
+        var clonedNode = suffixNodeIds(masterSlide.cloneNode(true), &quot;_&quot; + Date() + &quot; presentation_copy&quot;);
+        clonedNode.removeAttributeNS(NSS[&quot;inkscape&quot;], &quot;groupmode&quot;);
+        clonedNode.removeAttributeNS(NSS[&quot;inkscape&quot;], &quot;label&quot;);
+        clonedNode.style.display = &quot;inherit&quot;;
+
+        g.appendChild(clonedNode);
+    }
+
+    // Substitute auto texts.
+    substituteAutoTexts(g, &quot;Whiteboard &quot; + number_of_added_slides, &quot;W&quot; + number_of_added_slides, slides.length);
+
+    g.setAttribute(&quot;onmouseover&quot;, &quot;if ((currentMode == INDEX_MODE) &amp;&amp; ( activeSlide != &quot; + (after_slide + 1) + &quot;)) { indexSetActiveSlide(&quot; + (after_slide + 1) + &quot;); };&quot;);
+
+    // Create a transform group.
+    var transformGroup = document.createElementNS(NSS[&quot;svg&quot;], &quot;g&quot;);
+
+    // Add content to transform group.
+    while (g.firstChild)
+        transformGroup.appendChild(g.firstChild);
+
+    // Transfer the transform attribute from the node to the transform group.
+    if (g.getAttribute(&quot;transform&quot;))
+    {
+        transformGroup.setAttribute(&quot;transform&quot;, g.getAttribute(&quot;transform&quot;));
+        g.removeAttribute(&quot;transform&quot;);
+    }
+
+    // Create a view group.
+    var viewGroup = document.createElementNS(NSS[&quot;svg&quot;], &quot;g&quot;);
+
+    viewGroup.appendChild(transformGroup);
+    new_slide[&quot;viewGroup&quot;] = g.appendChild(viewGroup);
+
+    // Insert background.
+    if (BACKGROUND_COLOR != null)
+    {
+        var rectNode = document.createElementNS(NSS[&quot;svg&quot;], &quot;rect&quot;);
+
+        rectNode.setAttribute(&quot;x&quot;, 0);
+        rectNode.setAttribute(&quot;y&quot;, 0);
+        rectNode.setAttribute(&quot;width&quot;, WIDTH);
+        rectNode.setAttribute(&quot;height&quot;, HEIGHT);
+        rectNode.setAttribute(&quot;id&quot;, &quot;jessyInkBackground&quot; + Date());
+        rectNode.setAttribute(&quot;fill&quot;, BACKGROUND_COLOR);
+
+        new_slide[&quot;viewGroup&quot;].insertBefore(rectNode, new_slide[&quot;viewGroup&quot;].firstChild);
+    }
+
+    // Set initial view even if there are no other views.
+    var matrixOld = (new matrixSVG()).fromElements(1, 0, 0, 0, 1, 0, 0, 0, 1);
+
+    new_slide[&quot;viewGroup&quot;].setAttribute(&quot;transform&quot;, matrixOld.toAttribute());
+    new_slide.initialView = matrixOld.toAttribute();
+
+    // Insert slide
+    var node = slides[after_slide][&quot;element&quot;];
+    var next_node = node.nextSibling;
+    var parent_node = node.parentNode;
+
+    if (next_node)
+    {
+        parent_node.insertBefore(g, next_node);
+    }
+    else
+    {
+        parent_node.appendChild(g);
+    }
+
+    g = document.createElementNS(NSS[&quot;svg&quot;], &quot;g&quot;);
+    g.setAttributeNS(NSS[&quot;inkscape&quot;], &quot;groupmode&quot;, &quot;layer&quot;);
+    g.setAttributeNS(NSS[&quot;inkscape&quot;], &quot;label&quot;, &quot;Whiteboard &quot; + number_of_added_slides);
+    g.setAttribute(&quot;clip-path&quot;, &quot;url(#jessyInkSlideClipPath)&quot;);
+    g.setAttribute(&quot;id&quot;, &quot;Whiteboard &quot; + Date());
+    g.setAttribute(&quot;style&quot;, &quot;display: none;&quot;);
+
+    new_slide[&quot;original_element&quot;] = g;
+
+    node = slides[after_slide][&quot;original_element&quot;];
+    next_node = node.nextSibling;
+    parent_node = node.parentNode;
+
+    if (next_node)
+    {
+        parent_node.insertBefore(g, next_node);
+    }
+    else
+    {
+        parent_node.appendChild(g);
+    }
+
+    before_new_slide = slides.slice(0, after_slide + 1);
+    after_new_slide = slides.slice(after_slide + 1);
+    slides = before_new_slide.concat(new_slide, after_new_slide);
+
+    //resetting the counter attributes on the slides that follow the new slide...
+    for (var counter = after_slide+2; counter &lt; slides.length; counter++)
+    {
+        slides[counter][&quot;element&quot;].setAttribute(&quot;onmouseover&quot;, &quot;if ((currentMode == INDEX_MODE) &amp;&amp; ( activeSlide != &quot; + counter + &quot;)) { indexSetActiveSlide(&quot; + counter + &quot;); };&quot;);
+    }
+}
+
+/** Convenience function to obtain a transformation matrix from a point matrix.
+ *
+ *    @param mPoints Point matrix.
+ *    @return A transformation matrix.
+ */
+function pointMatrixToTransformation(mPoints)
+{
+    mPointsOld = (new matrixSVG()).fromElements(0, WIDTH, WIDTH, 0, 0, HEIGHT, 1, 1, 1);
+
+    return mPointsOld.mult(mPoints.inv());
+}
+
+/** Convenience function to obtain a matrix with three corners of a rectangle.
+ *
+ *    @param rect an svg rectangle
+ *    @return a matrixSVG containing three corners of the rectangle
+ */
+function rectToMatrix(rect)
+{
+    rectWidth = rect.getBBox().width;
+    rectHeight = rect.getBBox().height;
+    rectX = rect.getBBox().x;
+    rectY = rect.getBBox().y;
+    rectXcorr = 0;
+    rectYcorr = 0;
+
+    scaleX = WIDTH / rectWidth;
+    scaleY = HEIGHT / rectHeight;
+
+    if (scaleX &gt; scaleY)
+    {
+        scaleX = scaleY;
+        rectXcorr -= (WIDTH / scaleX - rectWidth) / 2;
+        rectWidth = WIDTH / scaleX;
+    }
+    else
+    {
+        scaleY = scaleX;
+        rectYcorr -= (HEIGHT / scaleY - rectHeight) / 2;
+        rectHeight = HEIGHT / scaleY;
+    }
+
+    if (rect.transform.baseVal.numberOfItems &lt; 1)
+    {
+        mRectTrans = (new matrixSVG()).fromElements(1, 0, 0, 0, 1, 0, 0, 0, 1);
+    }
+    else
+    {
+        mRectTrans = (new matrixSVG()).fromSVGMatrix(rect.transform.baseVal.consolidate().matrix);
+    }
+
+    newBasePoints = (new matrixSVG()).fromElements(rectX, rectX, rectX, rectY, rectY, rectY, 1, 1, 1);
+    newVectors = (new matrixSVG()).fromElements(rectXcorr, rectXcorr + rectWidth, rectXcorr + rectWidth, rectYcorr, rectYcorr, rectYcorr + rectHeight, 0, 0, 0);
+
+    return mRectTrans.mult(newBasePoints.add(newVectors));
+}
+
+/** Function to handle JessyInk elements.
+ *
+ *    @param    node    Element node.
+ */
+function handleElement(node)
+{
+    if (node.getAttributeNS(NSS['jessyink'], 'element') == 'core.video')
+    {
+        var url;
+        var width;
+        var height;
+        var x;
+        var y;
+        var transform;
+
+        var tspans = node.getElementsByTagNameNS(&quot;http://www.w3.org/2000/svg&quot;, &quot;tspan&quot;);
+
+        for (var tspanCounter = 0; tspanCounter &lt; tspans.length; tspanCounter++)
+        {
+            if (tspans[tspanCounter].getAttributeNS(&quot;https://launchpad.net/jessyink&quot;, &quot;video&quot;) == &quot;url&quot;)
+            {
+                url = tspans[tspanCounter].firstChild.nodeValue;
+            }
+        }
+
+        var rects = node.getElementsByTagNameNS(&quot;http://www.w3.org/2000/svg&quot;, &quot;rect&quot;);
+
+        for (var rectCounter = 0; rectCounter &lt; rects.length; rectCounter++)
+        {
+            if (rects[rectCounter].getAttributeNS(&quot;https://launchpad.net/jessyink&quot;, &quot;video&quot;) == &quot;rect&quot;)
+            {
+                x = rects[rectCounter].getAttribute(&quot;x&quot;);
+                y = rects[rectCounter].getAttribute(&quot;y&quot;);
+                width = rects[rectCounter].getAttribute(&quot;width&quot;);
+                height = rects[rectCounter].getAttribute(&quot;height&quot;);
+                transform = rects[rectCounter].getAttribute(&quot;transform&quot;);
+            }
+        }
+
+        for (var childCounter = 0; childCounter &lt; node.childNodes.length; childCounter++)
+        {
+            if (node.childNodes[childCounter].nodeType == 1)
+            {
+                if (node.childNodes[childCounter].style)
+                {
+                    node.childNodes[childCounter].style.display = 'none';
+                }
+                else
+                {
+                    node.childNodes[childCounter].setAttribute(&quot;style&quot;, &quot;display: none;&quot;);
+                }
+            }
+        }
+
+        var foreignNode = document.createElementNS(&quot;http://www.w3.org/2000/svg&quot;, &quot;foreignObject&quot;);
+        foreignNode.setAttribute(&quot;x&quot;, x);
+        foreignNode.setAttribute(&quot;y&quot;, y);
+        foreignNode.setAttribute(&quot;width&quot;, width);
+        foreignNode.setAttribute(&quot;height&quot;, height);
+        foreignNode.setAttribute(&quot;transform&quot;, transform);
+
+        var videoNode = document.createElementNS(&quot;http://www.w3.org/1999/xhtml&quot;, &quot;video&quot;);
+        videoNode.setAttribute(&quot;src&quot;, url);
+
+        foreignNode.appendChild(videoNode);
+        node.appendChild(foreignNode);
+    }
+}
+
+/** Class processing the location hash.
+ *
+ *    @param str location hash
+ */
+function LocationHash(str)
+{
+    this.slideNumber = 0;
+    this.effectNumber = 0;
+
+    str = str.substr(1, str.length - 1);
+
+    var parts = str.split('_');
+
+    // Try to extract slide number.
+    if (parts.length &gt;= 1)
+    {
+        try
+        {
+            var slideNumber = parseInt(parts[0]);
+
+            if (!isNaN(slideNumber))
+            {
+                this.slideNumber = slideNumber - 1;
+            }
+        }
+        catch (e)
+        {
+        }
+    }
+
+    // Try to extract effect number.
+    if (parts.length &gt;= 2)
+    {
+        try
+        {
+            var effectNumber = parseInt(parts[1]);
+
+            if (!isNaN(effectNumber))
+            {
+                this.effectNumber = effectNumber;
+            }
+        }
+        catch (e)
+        {
+        }
+    }
+}
+
+/** Class representing an svg matrix.
+*/
+function matrixSVG()
+{
+    this.e11 = 0; // a
+    this.e12 = 0; // c
+    this.e13 = 0; // e
+    this.e21 = 0; // b
+    this.e22 = 0; // d
+    this.e23 = 0; // f
+    this.e31 = 0;
+    this.e32 = 0;
+    this.e33 = 0;
+}
+
+/** Constructor function.
+ *
+ *    @param a element a (i.e. 1, 1) as described in the svg standard.
+ *    @param b element b (i.e. 2, 1) as described in the svg standard.
+ *    @param c element c (i.e. 1, 2) as described in the svg standard.
+ *    @param d element d (i.e. 2, 2) as described in the svg standard.
+ *    @param e element e (i.e. 1, 3) as described in the svg standard.
+ *    @param f element f (i.e. 2, 3) as described in the svg standard.
+ */
+matrixSVG.prototype.fromSVGElements = function(a, b, c, d, e, f)
+{
+    this.e11 = a;
+    this.e12 = c;
+    this.e13 = e;
+    this.e21 = b;
+    this.e22 = d;
+    this.e23 = f;
+    this.e31 = 0;
+    this.e32 = 0;
+    this.e33 = 1;
+
+    return this;
+}
+
+/** Constructor function.
+ *
+ *    @param matrix an svg matrix as described in the svg standard.
+ */
+matrixSVG.prototype.fromSVGMatrix = function(m)
+{
+    this.e11 = m.a;
+    this.e12 = m.c;
+    this.e13 = m.e;
+    this.e21 = m.b;
+    this.e22 = m.d;
+    this.e23 = m.f;
+    this.e31 = 0;
+    this.e32 = 0;
+    this.e33 = 1;
+
+    return this;
+}
+
+/** Constructor function.
+ *
+ *    @param e11 element 1, 1 of the matrix.
+ *    @param e12 element 1, 2 of the matrix.
+ *    @param e13 element 1, 3 of the matrix.
+ *    @param e21 element 2, 1 of the matrix.
+ *    @param e22 element 2, 2 of the matrix.
+ *    @param e23 element 2, 3 of the matrix.
+ *    @param e31 element 3, 1 of the matrix.
+ *    @param e32 element 3, 2 of the matrix.
+ *    @param e33 element 3, 3 of the matrix.
+ */
+matrixSVG.prototype.fromElements = function(e11, e12, e13, e21, e22, e23, e31, e32, e33)
+{
+    this.e11 = e11;
+    this.e12 = e12;
+    this.e13 = e13;
+    this.e21 = e21;
+    this.e22 = e22;
+    this.e23 = e23;
+    this.e31 = e31;
+    this.e32 = e32;
+    this.e33 = e33;
+
+    return this;
+}
+
+/** Constructor function.
+ *
+ *    @param attrString string value of the &quot;transform&quot; attribute (currently only &quot;matrix&quot; is accepted)
+ */
+matrixSVG.prototype.fromAttribute = function(attrString)
+{
+    str = attrString.substr(7, attrString.length - 8);
+
+    str = str.trim();
+
+    strArray = str.split(&quot;,&quot;);
+
+    // Opera does not use commas to separate the values of the matrix, only spaces.
+    if (strArray.length != 6)
+        strArray = str.split(&quot; &quot;);
+
+    this.e11 = parseFloat(strArray[0]);
+    this.e21 = parseFloat(strArray[1]);
+    this.e31 = 0;
+    this.e12 = parseFloat(strArray[2]);
+    this.e22 = parseFloat(strArray[3]);
+    this.e32 = 0;
+    this.e13 = parseFloat(strArray[4]);
+    this.e23 = parseFloat(strArray[5]);
+    this.e33 = 1;
+
+    return this;
+}
+
+/** Output function
+ *
+ *    @return a string that can be used as the &quot;transform&quot; attribute.
+ */
+matrixSVG.prototype.toAttribute = function()
+{
+    return &quot;matrix(&quot; + this.e11 + &quot;, &quot; + this.e21 + &quot;, &quot; + this.e12 + &quot;, &quot; + this.e22 + &quot;, &quot; + this.e13 + &quot;, &quot; + this.e23 + &quot;)&quot;;
+}
+
+/** Matrix nversion.
+ *
+ *    @return the inverse of the matrix
+ */
+matrixSVG.prototype.inv = function()
+{
+    out = new matrixSVG();
+
+    det = this.e11 * (this.e33 * this.e22 - this.e32 * this.e23) - this.e21 * (this.e33 * this.e12 - this.e32 * this.e13) + this.e31 * (this.e23 * this.e12 - this.e22 * this.e13);
+
+    out.e11 =  (this.e33 * this.e22 - this.e32 * this.e23) / det;
+    out.e12 = -(this.e33 * this.e12 - this.e32 * this.e13) / det;
+    out.e13 =  (this.e23 * this.e12 - this.e22 * this.e13) / det;
+    out.e21 = -(this.e33 * this.e21 - this.e31 * this.e23) / det;
+    out.e22 =  (this.e33 * this.e11 - this.e31 * this.e13) / det;
+    out.e23 = -(this.e23 * this.e11 - this.e21 * this.e13) / det;
+    out.e31 =  (this.e32 * this.e21 - this.e31 * this.e22) / det;
+    out.e32 = -(this.e32 * this.e11 - this.e31 * this.e12) / det;
+    out.e33 =  (this.e22 * this.e11 - this.e21 * this.e12) / det;
+
+    return out;
+}
+
+/** Matrix multiplication.
+ *
+ *    @param op another svg matrix
+ *    @return this * op
+ */
+matrixSVG.prototype.mult = function(op)
+{
+    out = new matrixSVG();
+
+    out.e11 = this.e11 * op.e11 + this.e12 * op.e21 + this.e13 * op.e31;
+    out.e12 = this.e11 * op.e12 + this.e12 * op.e22 + this.e13 * op.e32;
+    out.e13 = this.e11 * op.e13 + this.e12 * op.e23 + this.e13 * op.e33;
+    out.e21 = this.e21 * op.e11 + this.e22 * op.e21 + this.e23 * op.e31;
+    out.e22 = this.e21 * op.e12 + this.e22 * op.e22 + this.e23 * op.e32;
+    out.e23 = this.e21 * op.e13 + this.e22 * op.e23 + this.e23 * op.e33;
+    out.e31 = this.e31 * op.e11 + this.e32 * op.e21 + this.e33 * op.e31;
+    out.e32 = this.e31 * op.e12 + this.e32 * op.e22 + this.e33 * op.e32;
+    out.e33 = this.e31 * op.e13 + this.e32 * op.e23 + this.e33 * op.e33;
+
+    return out;
+}
+
+/** Matrix addition.
+ *
+ *    @param op another svg matrix
+ *    @return this + op
+ */
+matrixSVG.prototype.add = function(op)
+{
+    out = new matrixSVG();
+
+    out.e11 = this.e11 + op.e11;
+    out.e12 = this.e12 + op.e12;
+    out.e13 = this.e13 + op.e13;
+    out.e21 = this.e21 + op.e21;
+    out.e22 = this.e22 + op.e22;
+    out.e23 = this.e23 + op.e23;
+    out.e31 = this.e31 + op.e31;
+    out.e32 = this.e32 + op.e32;
+    out.e33 = this.e33 + op.e33;
+
+    return out;
+}
+
+/** Matrix mixing.
+ *
+ *    @param op another svg matrix
+ *    @parma contribOp contribution of the other matrix (0 &lt;= contribOp &lt;= 1)
+ *    @return (1 - contribOp) * this + contribOp * op
+ */
+matrixSVG.prototype.mix = function(op, contribOp)
+{
+    contribThis = 1.0 - contribOp;
+    out = new matrixSVG();
+
+    out.e11 = contribThis * this.e11 + contribOp * op.e11;
+    out.e12 = contribThis * this.e12 + contribOp * op.e12;
+    out.e13 = contribThis * this.e13 + contribOp * op.e13;
+    out.e21 = contribThis * this.e21 + contribOp * op.e21;
+    out.e22 = contribThis * this.e22 + contribOp * op.e22;
+    out.e23 = contribThis * this.e23 + contribOp * op.e23;
+    out.e31 = contribThis * this.e31 + contribOp * op.e31;
+    out.e32 = contribThis * this.e32 + contribOp * op.e32;
+    out.e33 = contribThis * this.e33 + contribOp * op.e33;
+
+    return out;
+}
+
+/** Trimming function for strings.
+*/
+String.prototype.trim = function()
+{
+    return this.replace(/^\s+|\s+$/g, '');
+}
+
+/** SVGElement.getTransformToElement polyfill */
+SVGElement.prototype.getTransformToElement = SVGElement.prototype.getTransformToElement || function(elem) {
+    return elem.getScreenCTM().inverse().multiply(this.getScreenCTM());
+};
+</script><g
+   inkscape:groupmode="layer"
+   id="layer1"
+   inkscape:label="Layer 1"
+   transform="translate(-1.9291032,-4.8085106)" /><g
+   id="g2262"
+   transform="translate(-2.7035756,-4.8085106)"><text
+     xml:space="preserve"
+     style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:13.3333px;line-height:25px;font-family:'Bree Serif';-inkscape-font-specification:'Bree Serif, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-east-asian:normal;letter-spacing:0px;word-spacing:0px;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+     x="15.243647"
+     y="58.154465"
+     id="text2166"><tspan
+       sodipodi:role="line"
+       id="tspan2164"
+       x="15.243647"
+       y="58.154465"
+       style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:13.3333px;font-family:'Bree Serif';-inkscape-font-specification:'Bree Serif';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-east-asian:normal;fill:#ffffff;fill-opacity:1;stroke:none">greg</tspan></text><path
+     d="m 27.245716,7.4173738 c -0.09289,0.00625 -0.365369,0.024752 -0.603782,0.043296 -3.535937,0.2724699 -6.969696,1.5233641 -9.908055,3.6071582 -4.186162,2.96933 -7.0749812,7.431055 -7.9698032,12.307674 -0.222933,1.207553 -0.2941448,2.034253 -0.297242,3.343979 0,1.120845 0.024759,1.510975 0.1579049,2.507975 0.4675419,3.483306 1.9661383,6.839655 4.2914383,9.617009 3.241792,3.864151 7.824272,6.344261 12.750433,6.901594 1.49861,0.167193 3.340884,0.136237 4.845667,-0.08053 7.988371,-1.154904 14.546274,-7.356734 16.066549,-15.187207 0.213642,-1.102272 0.309624,-2.164292 0.30653,-3.41828 0,-1.247798 -0.09908,-2.263377 -0.322014,-3.390418 -0.616159,-3.08383 -1.953749,-5.848809 -4.040638,-8.359881 C 42.09233,14.789578 40.751641,13.45199 40.234562,13.021609 38.110521,11.253636 35.819277,10.030607 33.252474,9.2875069 32.181168,8.9778791 31.029362,8.7611354 29.769169,8.6310998 c -0.619252,-0.061926 -2.740191,-0.052641 -3.374931,0.015482 -2.371744,0.2569866 -4.399805,0.8452844 -6.455732,1.8670522 -1.879433,0.935079 -3.446142,2.065219 -4.941642,3.557622 -2.077598,2.074498 -3.554516,4.44625 -4.455529,7.152384 -0.6192546,1.863949 -0.8917245,3.539029 -0.8917245,5.495873 0,1.213737 0.071211,2.024964 0.2755668,3.158195 0.6595047,3.628829 2.5606107,7.112143 5.3131927,9.73158 4.207837,4.006572 9.911171,5.783828 15.512325,4.836376 2.966217,-0.501589 5.814796,-1.774161 8.198914,-3.662892 1.300434,-1.031055 2.554425,-2.346976 3.504981,-3.675274 1.771073,-2.483202 2.833084,-5.241977 3.167489,-8.236067 0.07119,-0.622352 0.09907,-2.36865 0.04646,-2.981714 -0.114586,-1.418046 -0.36538,-2.699907 -0.780282,-3.963179 -1.325209,-4.065396 -4.114936,-7.520837 -7.873816,-9.756342 -0.430374,-0.256995 -1.495492,-0.798837 -1.966132,-1.003193 -3.40589,-1.470726 -7.167869,-1.8175151 -10.744055,-0.993908 -6.941842,1.603869 -12.304577,7.338167 -13.313961,14.227369 -0.126951,0.870051 -0.164107,1.520267 -0.145528,2.613256 0.01548,0.996991 0.04645,1.42737 0.161012,2.167387 0.424187,2.715418 1.514066,5.27294 3.186057,7.49297 0.504689,0.66879 0.888628,1.105367 1.594577,1.814414 0.68737,0.684279 1.123954,1.07131 1.767974,1.563619 3.474027,2.647304 7.824274,3.861041 12.106425,3.368734 4.935447,-0.563522 9.421939,-3.32848 12.183814,-7.505349 1.476913,-2.235513 2.340784,-4.662989 2.622536,-7.369135 0.05264,-0.520177 0.05264,-2.365546 0,-2.87953 -0.213635,-2.015668 -0.727621,-3.8208 -1.585287,-5.54851 -0.133136,-0.266278 -0.281762,-0.551139 -0.328204,-0.634736 -0.585191,-1.027964 -1.139427,-1.832994 -1.811323,-2.641121 -0.414892,-0.498492 -1.322099,-1.421181 -1.826797,-1.860849 -3.628828,-3.15201 -8.282518,-4.563912 -12.939315,-3.926081 -5.768334,0.78955 -10.775003,4.709432 -12.905248,10.106227 -0.563527,1.430474 -0.904111,2.944555 -1.031061,4.570102 -0.06812,0.897914 -0.0061,2.353157 0.145529,3.309906 0.668793,4.291431 3.19225,8.195838 6.886102,10.657375 0.984621,0.656402 2.102367,1.232303 3.20465,1.647204 1.904192,0.72143 3.771244,1.043447 5.820975,1.000101 0.826709,-0.01857 1.136343,-0.04024 1.795836,-0.133143 2.783548,-0.387035 5.412287,-1.51718 7.616824,-3.275861 0.910306,-0.727614 1.808225,-1.622445 2.542046,-2.542032 2.932161,-3.669084 3.981798,-8.465205 2.829986,-12.91454 -1.486212,-5.731195 -6.341163,-10.189827 -12.180726,-11.193013 -1.445966,-0.247705 -3.090069,-0.278669 -4.508173,-0.0867 -5.396795,0.733816 -10.004045,4.325492 -12.010429,9.36312 -0.891727,2.23551 -1.185867,4.703236 -0.851466,7.121428 0.318905,2.303613 1.291135,4.653692 2.703042,6.533125 0.894818,1.192066 1.941357,2.238607 3.09936,3.093178 1.610059,1.195153 3.529749,2.086876 5.421568,2.514165 1.154913,0.260084 2.015675,0.352974 3.278949,0.352974 1.551239,0 2.882635,-0.207447 4.353359,-0.684276 3.117947,-1.006282 5.84266,-3.074589 7.657082,-5.808603 2.278857,-3.43376 2.907391,-7.592053 1.733902,-11.480969 -0.414886,-1.365456 -1.14252,-2.845468 -1.984697,-4.018951 -1.021781,-1.421195 -2.316025,-2.668993 -3.758881,-3.619546 -1.820601,-1.204447 -3.796029,-1.941356 -5.941746,-2.220027 -1.120835,-0.148613 -2.641106,-0.130037 -3.780541,0.04026 -4.387409,0.662602 -8.307294,3.492595 -10.301288,7.434143 -1.040352,2.055929 -1.538848,4.340971 -1.418095,6.508356 0.09908,1.829897 0.501593,3.415194 1.272566,5.012864 0.925785,1.922784 2.247897,3.548332 3.987988,4.898304 1.5079,1.173487 3.399711,2.05902 5.269859,2.470818 1.027974,0.226031 1.746304,0.303436 2.833084,0.303436 1.56053,0 2.733998,-0.188874 4.161403,-0.659506 2.588471,-0.860765 4.854949,-2.492499 6.505252,-4.693945 1.343783,-1.789648 2.170481,-3.830096 2.464628,-6.068693 0.06499,-0.510881 0.09289,-1.963035 0.04647,-2.495596 -0.191985,-2.124028 -0.863872,-4.053012 -2.037362,-5.848848 -0.668789,-1.018674 -1.671983,-2.133333 -2.600867,-2.891916 -2.548227,-2.077597 -5.709526,-3.127228 -8.830566,-2.932168 -3.192248,0.201256 -6.056294,1.495501 -8.301089,3.752679 -1.024867,1.027965 -1.777259,2.093078 -2.415093,3.412086 -0.640928,1.328298 -1.015583,2.681369 -1.145623,4.139718 -0.0433,0.513985 -0.03716,1.647208 0.01546,2.158107 0.09288,0.919589 0.256985,1.681271 0.538755,2.542037 1.393316,4.207824 5.074786,7.421755 9.415747,8.223686 1.269477,0.235316 2.653524,0.266279 3.87034,0.09288 3.405892,-0.489211 6.455726,-2.402698 8.369222,-5.251263 1.139422,-1.696765 1.795835,-3.576202 1.944451,-5.582589 0.04024,-0.510882 0.02175,-1.58838 -0.03402,-2.059007 -0.253886,-2.136427 -1.139422,-4.232613 -2.492497,-5.898397 -1.761773,-2.167395 -4.16758,-3.628833 -6.842757,-4.16139 -0.709047,-0.14243 -1.17039,-0.191974 -1.981616,-0.21055 -0.80193,-0.01857 -1.424277,0.02475 -2.136434,0.145531 -4.932334,0.835988 -8.824353,4.830178 -9.443601,9.691317 -0.0712,0.55114 -0.09289,1.59459 -0.0495,2.155011 0.179575,2.173583 1.003186,4.217119 2.408891,5.972698 0.328201,0.411814 1.148718,1.241608 1.563621,1.582202 1.737006,1.433567 3.861047,2.319097 6.040826,2.517264 0.483008,0.04641 1.557426,0.04641 2.003281,0.0038 3.288242,-0.325108 6.235895,-2.099269 8.062696,-4.845663 0.919587,-1.384034 1.461433,-2.829993 1.678167,-4.489594 0.07737,-0.566623 0.0743,-1.860855 0,-2.415089 -0.161012,-1.1923 -0.436581,-2.124276 -0.931984,-3.164621 -0.517069,-1.080713 -1.176581,-2.006497 -2.059014,-2.89203 -1.402623,-1.405721 -3.062217,-2.346987 -4.963326,-2.81143 -1.492416,-0.368453 -3.152011,-0.383936 -4.650606,-0.04954 -2.734007,0.613061 -5.155283,2.362461 -6.601249,4.768257 -1.288048,2.142628 -1.706044,4.666075 -1.167288,7.068787 0.736907,3.288237 3.220113,6.05012 6.449522,7.170961 2.473917,0.860769 5.152197,0.681175 7.502263,-0.4954 2.746395,-1.374744 4.681564,-3.953939 5.180061,-6.892303 0.492304,-2.919802 -0.479929,-5.870543 -2.641116,-8.006972 -1.207547,-1.188985 -2.76497,-2.062133 -4.368844,-2.439876 -2.179764,-0.517076 -4.40289,-0.232219 -6.381409,0.811223 -0.39013,0.207452 -0.925786,0.554231 -1.346889,0.876244 -0.396305,0.300337 -1.204436,1.102268 -1.529544,1.514076 -1.718438,2.182873 -2.309824,4.870428 -1.641025,7.48368 0.572802,2.235521 2.099268,4.214031 4.158289,5.387516 3.749579,2.139523 8.449717,1.167304 11.056785,-2.291245 0.805032,-1.068209 1.294232,-2.201442 1.535746,-3.560703 0.09289,-0.523273 0.117658,-1.665791 0.04643,-2.213833 -0.157913,-1.201398 -0.572809,-2.340815 -1.219933,-3.344012 -0.619246,-0.962933 -1.576004,-1.904202 -2.560616,-2.523466 -0.362262,-0.229115 -1.123941,-0.600671 -1.51717,-0.7431 -2.42748,-0.876239 -5.065497,-0.541845 -7.183347,0.90721 -0.47063,0.322016 -0.746206,0.551134 -1.145623,0.950558 -1.238499,1.238504 -2.000192,2.789744 -2.213832,4.505077 -0.04642,0.38703 -0.03715,1.331386 0.01544,1.75558 0.256999,1.978517 1.34688,3.814601 2.990991,5.040731 1.06513,0.795731 2.322214,1.291139 3.647415,1.442859 0.464435,0.05265 1.594571,0.01857 2.015673,-0.05886 1.56361,-0.294146 2.860948,-0.972224 3.963235,-2.080694 0.470622,-0.467537 0.798833,-0.888633 1.123935,-1.436675 1.092984,-1.84228 1.253991,-4.096368 0.439674,-6.047013 -0.959825,-2.291223 -3.077694,-3.919862 -5.508267,-4.238784 -0.523273,-0.06812 -1.566716,-0.04645 -2.049717,0.04645 -1.42429,0.269379 -2.656611,0.928877 -3.659804,1.966129 -2.281952,2.356268 -2.455343,5.855051 -0.417997,8.378506 0.244609,0.303447 0.764776,0.805034 1.086794,1.049639 0.823597,0.622352 1.75868,1.031059 2.780456,1.21374 0.452043,0.08053 1.387122,0.09598 1.823697,0.03094 2.374833,-0.352968 4.297628,-1.950647 5.012868,-4.170674 0.805032,-2.504858 -0.278671,-5.257439 -2.603967,-6.629089 -1.470734,-0.863863 -3.260376,-1.015579 -4.823989,-0.40561 -1.671989,0.650214 -2.910497,2.024952 -3.359458,3.727912 -0.167197,0.644021 -0.195063,1.53575 -0.06498,2.185966 0.414903,2.055923 1.987808,3.638117 4.068494,4.087077 0.266276,0.05582 0.417991,0.06814 0.950557,0.06814 0.551136,0.0037 0.678086,-0.0063 0.97222,-0.0712 2.690666,-0.572812 4.418391,-3.133432 3.823903,-5.669275 -0.430383,-1.848469 -2.000191,-3.263469 -3.879624,-3.498788 -0.427287,-0.05579 -1.05584,-0.02172 -1.476928,0.0743 -0.851474,0.195063 -1.5791,0.606866 -2.182873,1.232315 -0.340576,0.35297 -0.532546,0.622347 -0.743105,1.034147 -0.294145,0.582099 -0.427283,1.139428 -0.427283,1.792742 0,0.665707 0.120756,1.170397 0.417996,1.761785 0.195063,0.387035 0.377755,0.647122 0.693569,0.97532 0.563515,0.588298 1.195156,0.941262 2.059017,1.154913 0.114566,0.02802 0.368459,0.04024 0.77407,0.04024 0.551132,-0.0037 0.628548,-0.0094 0.90101,-0.08364 1.253985,-0.34059 2.22003,-1.223021 2.616355,-2.387218 0.244601,-0.71523 0.226031,-1.619352 -0.04647,-2.297444 -0.25698,-0.637838 -0.721414,-1.219936 -1.272557,-1.594583 -1.142514,-0.774066 -2.665885,-0.749298 -3.749581,0.0681 -1.439767,1.083687 -1.628638,3.074609 -0.414898,4.313105 0.380837,0.387032 0.786456,0.628541 1.284947,0.764777 0.371558,0.0991 0.962952,0.0991 1.309732,0 0.857655,-0.244602 1.507882,-0.842181 1.774164,-1.631726 0.09907,-0.297246 0.133127,-0.786454 0.07738,-1.117758 -0.167201,-0.959851 -1.024868,-1.733916 -1.987795,-1.79894 -0.928885,-0.06189 -1.771073,0.51708 -2.024977,1.393326 -0.07118,0.250795 -0.06813,0.66569 0.01243,0.919586 0.222932,0.70285 0.80194,1.145622 1.501705,1.145622 0.396308,0 0.665687,-0.105271 0.953639,-0.368453 0.616158,-0.563522 0.504688,-1.538848 -0.216742,-1.870152 -0.188863,-0.08666 -0.557336,-0.09288 -0.718332,-0.0093 -0.374653,0.191965 -0.538753,0.59139 -0.374653,0.910303 0.154812,0.300331 0.569712,0.368453 0.740018,0.117658 0.09288,-0.136239 0.08666,-0.164108 -0.04648,-0.185778 -0.20744,-0.03718 -0.219835,-0.04643 -0.210546,-0.142418 0.0037,-0.05264 0.03402,-0.123859 0.06504,-0.157915 0.08664,-0.09599 0.322022,-0.06813 0.452067,0.05263 0.266273,0.250792 0.232211,0.625443 -0.08363,0.904113 -0.461341,0.405607 -1.179678,0.216733 -1.476924,-0.39014 -0.09287,-0.185766 -0.102179,-0.232214 -0.102179,-0.486109 0,-0.247691 0.01246,-0.300342 0.096,-0.479924 0.247687,-0.513979 0.715222,-0.805026 1.294232,-0.805026 0.764773,0 1.4088,0.535657 1.585289,1.322107 0.191981,0.870046 -0.377748,1.786548 -1.319016,2.120949 -0.173387,0.05881 -0.263176,0.07118 -0.634734,0.07118 -0.390128,0 -0.455149,-0.0093 -0.668781,-0.08363 -0.777169,-0.272477 -1.349982,-0.928881 -1.501709,-1.721533 -0.235309,-1.223022 0.588307,-2.449145 1.87944,-2.799029 0.213652,-0.05582 0.334408,-0.06811 0.678083,-0.06811 0.498511,0.004 0.764785,0.06505 1.192068,0.275576 1.384028,0.674987 1.978509,2.371738 1.319015,3.752678 -0.167194,0.349884 -0.343684,0.600668 -0.61926,0.879344 -0.705955,0.71523 -1.72772,1.062019 -2.71542,0.92269 -1.486206,-0.204359 -2.70615,-1.421192 -2.922878,-2.904303 -0.05262,-0.34679 -0.02177,-0.966039 0.05881,-1.281855 0.346789,-1.325205 1.377857,-2.350075 2.718529,-2.699945 1.089892,-0.28486 2.176682,-0.08979 3.167491,0.569707 0.322011,0.213642 0.826702,0.712147 1.043439,1.02796 0.343694,0.501594 0.585208,1.092988 0.678083,1.653416 0.05883,0.368442 0.04324,1.083684 -0.03094,1.424279 -0.170295,0.761686 -0.529463,1.439762 -1.065109,2.00328 -0.551141,0.575915 -1.148722,0.956755 -1.882548,1.198258 -0.851461,0.275578 -1.879429,0.269372 -2.737091,-0.02475 -1.56053,-0.529463 -2.727819,-1.829895 -3.080796,-3.439959 -0.06812,-0.312725 -0.09598,-1.185869 -0.0495,-1.523361 0.111477,-0.770967 0.414907,-1.504786 0.891729,-2.158106 0.09597,-0.130041 0.3282,-0.390123 0.517081,-0.5759 0.67808,-0.671897 1.476912,-1.108465 2.449144,-1.334494 0.34368,-0.08052 0.421096,-0.08666 1.037249,-0.08666 0.656408,-0.0039 0.736916,0.0063 1.235417,0.123849 0.458246,0.11146 1.092971,0.383934 1.514077,0.650216 0.724517,0.461349 1.418092,1.21374 1.845375,1.994003 0.253893,0.470626 0.47063,1.145621 0.54804,1.724613 0.05266,0.408712 0.0217,1.300436 -0.06189,1.675079 -0.198157,0.897925 -0.622345,1.737017 -1.2385,2.439863 -0.792654,0.910302 -1.941368,1.566716 -3.167489,1.814411 -0.303431,0.0619 -0.442768,0.07119 -1.031051,0.07119 -0.740011,-0.0037 -0.984622,-0.03403 -1.554333,-0.198156 -0.938162,-0.269386 -1.71223,-0.721438 -2.436762,-1.427388 -2.356265,-2.285046 -2.362462,-5.889103 -0.01544,-8.232979 0.931977,-0.935079 2.102366,-1.532658 3.446148,-1.758686 0.387035,-0.06504 1.43357,-0.07428 1.783451,-0.01542 1.170387,0.201258 2.077597,0.579001 2.935259,1.226122 1.743205,1.319014 2.712334,3.402804 2.54514,5.486592 -0.120757,1.526469 -0.739999,2.891919 -1.817508,4.006577 -1.043441,1.083689 -2.309828,1.752489 -3.808421,2.015676 -0.322008,0.05882 -0.517067,0.07118 -1.046539,0.07118 -0.863861,0.0037 -1.39951,-0.08053 -2.198348,-0.340588 -0.37153,-0.120751 -1.080579,-0.452048 -1.424252,-0.662598 -1.253981,-0.767871 -2.297423,-1.990889 -2.845462,-3.334681 -1.04654,-2.563682 -0.442769,-5.455597 1.560518,-7.474363 0.213648,-0.213647 0.498503,-0.476829 0.634738,-0.585197 1.083694,-0.854573 2.272663,-1.362361 3.659794,-1.566714 0.464431,-0.06813 1.427377,-0.06813 1.913494,0 1.71223,0.241505 3.204633,1.000101 4.43075,2.250987 1.145623,1.173483 1.870158,2.653507 2.089987,4.269766 0.05264,0.374636 0.05264,1.44286 0,1.826785 -0.247692,1.854681 -1.198259,3.600967 -2.631826,4.833285 -3.179875,2.740195 -7.827374,2.594681 -10.852428,-0.343687 -1.328299,-1.288044 -2.136424,-2.839276 -2.424382,-4.653697 -0.07738,-0.489208 -0.07738,-1.718428 0,-2.220013 0.27866,-1.817507 1.102275,-3.418278 2.424378,-4.71253 1.306628,-1.281855 2.891914,-2.080688 4.718718,-2.381027 0.557333,-0.09288 1.631729,-0.114566 2.213827,-0.04644 1.102276,0.130045 2.00639,0.402516 2.98791,0.904113 2.922881,1.486211 4.802313,4.495783 4.799217,7.69114 0,1.396418 -0.303433,2.638013 -0.95056,3.910585 -0.442766,0.866961 -0.944353,1.551238 -1.662692,2.26957 -1.510983,1.514072 -3.374943,2.411995 -5.514458,2.662783 -0.591389,0.06813 -1.709139,0.04646 -2.316014,-0.0495 -3.449302,-0.535645 -6.34432,-2.956935 -7.480651,-6.263749 -0.157913,-0.455156 -0.294144,-1.009377 -0.377744,-1.526461 -0.09288,-0.578999 -0.114569,-1.724616 -0.04332,-2.334586 0.244613,-2.139521 1.167306,-4.028252 2.724717,-5.591865 1.182771,-1.182776 2.607061,-2.034249 4.195442,-2.501783 1.501701,-0.439674 3.111753,-0.504696 4.669178,-0.185781 2.579192,0.529463 4.892112,2.114752 6.362837,4.362649 0.851475,1.306616 1.374754,2.786642 1.538848,4.350256 0.04024,0.383944 0.04024,1.393324 0,1.798935 -0.334404,3.433765 -2.46773,6.480494 -5.650689,8.071979 -2.941464,1.470722 -6.344267,1.449051 -9.304291,-0.05884 -2.718558,-1.380896 -4.777577,-3.956997 -5.483533,-6.855115 -0.204348,-0.842173 -0.281755,-1.510973 -0.284851,-2.399606 -0.0063,-1.408797 0.263185,-2.727814 0.814319,-4.01586 1.322104,-3.080788 4.053016,-5.415379 7.338159,-6.27614 1.371648,-0.359168 2.814508,-0.439671 4.257366,-0.232224 3.226317,0.461344 6.102751,2.346981 7.883115,5.167682 0.740006,1.170388 1.284951,2.603961 1.510976,3.969418 0.18268,1.092983 0.188871,2.328395 0.01544,3.399708 -0.656409,4.108749 -3.644305,7.585858 -7.691129,8.954416 -2.492498,0.842177 -5.164579,0.795728 -7.678751,-0.133143 -0.746191,-0.27567 -1.761765,-0.802036 -2.461521,-1.275772 -3.613343,-2.439858 -5.598048,-6.647692 -5.10884,-10.843134 0.616158,-5.297719 4.926174,-9.64488 10.310587,-10.403471 1.065111,-0.148621 2.319107,-0.148621 3.359451,0.0037 2.712325,0.390131 5.183158,1.659601 7.121424,3.653598 1.950647,2.006385 3.124134,4.501977 3.412087,7.257654 0.05882,0.566624 0.0495,1.860863 -0.01853,2.4151 -0.337487,2.805224 -1.554324,5.303909 -3.548325,7.304097 -2.151903,2.158096 -4.851853,3.433763 -7.895482,3.737204 -0.622358,0.06188 -1.990905,0.04324 -2.607065,-0.03096 -2.956935,-0.368467 -5.63211,-1.696764 -7.718995,-3.830088 -1.415036,-1.446041 -2.408936,-3.065384 -3.031277,-4.929341 -0.473731,-1.415018 -0.665695,-2.715457 -0.628544,-4.217147 0.04645,-1.89492 0.479924,-3.604059 1.349973,-5.325592 0.668795,-1.325199 1.483119,-2.43057 2.579197,-3.498782 3.353264,-3.278946 8.068881,-4.554613 12.580138,-3.402805 1.40881,0.359171 2.836189,0.987716 4.056112,1.792742 2.799038,1.842285 4.845668,4.650599 5.681655,7.796416 0.476829,1.795835 0.560428,3.696954 0.244607,5.517547 -0.464437,2.665891 -1.733909,5.124332 -3.678364,7.11833 -4.195426,4.291336 -10.564457,5.436961 -15.948866,2.860855 -4.263563,-2.037361 -7.285525,-6.099672 -7.923354,-10.644997 -0.114567,-0.832895 -0.136231,-1.195158 -0.117658,-2.142624 0.01856,-1.099165 0.09908,-1.786539 0.318919,-2.749484 0.35917,-1.585289 1.031057,-3.155096 1.947556,-4.551515 2.291238,-3.483309 6.034626,-5.867431 10.109317,-6.437145 1.473819,-0.204355 2.932164,-0.188877 4.365736,0.04644 2.334589,0.383934 4.548421,1.340684 6.471206,2.795931 0.591392,0.448962 0.953655,0.767878 1.566716,1.377844 1.201354,1.201349 2.059017,2.399608 2.799022,3.904396 0.814325,1.662702 1.266372,3.28824 1.424295,5.146002 0.05582,0.640924 0.02477,2.10856 -0.05882,2.749487 -0.424196,3.272759 -1.85157,6.180164 -4.18616,8.530229 -3.031251,3.049819 -7.15549,4.681559 -11.344725,4.489588 -2.195297,-0.09929 -4.08093,-0.58231 -6.037765,-1.548345 -1.610067,-0.792802 -2.848574,-1.681436 -4.133521,-2.969473 -1.204465,-1.204514 -2.07761,-2.399675 -2.817615,-3.858014 -1.588389,-3.121044 -2.021868,-6.505263 -1.269468,-9.892586 0.616163,-2.786647 2.114746,-5.446342 4.248076,-7.542517 2.656601,-2.613255 5.98819,-4.148999 9.73158,-4.489588 0.699757,-0.06193 2.275758,-0.04644 2.941453,0.03097 2.430571,0.287951 4.653709,1.065117 6.691044,2.343872 1.455244,0.913402 2.839278,2.133332 3.901294,3.433764 2.901205,3.560717 4.096361,7.991476 3.337779,12.385083 -1.117755,6.480495 -6.415478,11.778204 -13.016723,13.016717 -1.11465,0.207449 -1.619351,0.250796 -2.987906,0.250796 -1.229217,-0.0037 -1.554324,-0.02475 -2.507972,-0.173396 -4.474124,-0.699943 -8.585976,-3.353453 -11.158968,-7.189733 -1.083703,-1.619347 -1.885633,-3.458528 -2.322208,-5.34106 -0.63473,-2.724716 -0.510885,-5.653793 0.356073,-8.335168 0.498499,-1.545036 1.334494,-3.207728 2.266465,-4.505063 2.238608,-3.108661 5.399893,-5.365837 9.047307,-6.452631 2.220025,-0.6626 4.514368,-0.842185 6.904678,-0.541846 2.28505,0.284855 4.678464,1.145621 6.734384,2.421286 2.07142,1.284945 3.916795,3.065306 5.276051,5.093358 1.096078,1.634834 1.966129,3.631927 2.384131,5.455627 0.315812,1.384032 0.421089,2.319109 0.41799,3.746494 0,0.996997 -0.02801,1.405713 -0.15172,2.281945 -0.606869,4.238805 -2.876438,8.133907 -6.362825,10.911259 -2.696863,2.148818 -5.92007,3.443065 -9.397194,3.76507 -0.55732,0.05264 -2.368635,0.05264 -2.925971,0 -4.099478,-0.380951 -7.811903,-2.090089 -10.784319,-4.960329 -2.916697,-2.81763 -4.783752,-6.536248 -5.235804,-10.434456 -0.164101,-1.39022 -0.142426,-3.009571 0.05884,-4.381218 0.36536,-2.50798 1.297333,-4.923072 2.743296,-7.093557 1.390223,-2.089986 3.266564,-3.926074 5.406086,-5.285333 3.969416,-2.5265551 8.669559,-3.3997058 13.245852,-2.4646322 5.477291,1.1208502 10.230069,4.7806412 12.741148,9.8120782 1.003191,2.009483 1.566716,3.987998 1.802031,6.30091 0.05266,0.538755 0.05266,2.49869 0,3.034347 -0.241523,2.405789 -0.857674,4.49887 -1.928993,6.573378 -2.576094,4.994276 -7.400075,8.635488 -12.923819,9.756343 -2.065214,0.41799 -4.214032,0.476826 -6.331882,0.173387 C 22.437296,44.739636 19.786904,43.720969 17.461606,42.185227 15.312787,40.767125 13.445737,38.893876 12.024552,36.73578 10.646708,34.639601 9.6961604,32.270965 9.2750644,29.877551 9.061417,28.666899 8.9963984,27.775184 9.0180746,26.394238 c 0.015481,-1.021773 0.052628,-1.4986 0.1764892,-2.322208 0.8359862,-5.505168 4.1985402,-10.437521 9.1339982,-13.397557 2.154999,-1.2942398 4.622725,-2.1766815 7.07498,-2.529647 1.046534,-0.1517195 1.362355,-0.1703022 2.755679,-0.1703022 1.058916,0 1.433571,0.00936 1.826799,0.05263 2.461532,0.2693694 4.54841,0.8669562 6.656967,1.9103948 2.000192,0.9877094 3.647411,2.1704864 5.2358,3.7588774 0.724531,0.727629 1.260181,1.33759 1.817511,2.077599 1.953755,2.600819 3.210839,5.598003 3.656702,8.71596 0.139334,0.969131 0.157907,1.284946 0.157907,2.631827 -0.0037,1.371642 -0.0217,1.66579 -0.170286,2.69375 -1.068199,7.279286 -6.492863,13.518276 -13.716466,15.778554 -1.715337,0.535657 -3.470913,0.829801 -5.248177,0.876241 l -0.7431,0.01857 -0.0093,0.275568 -0.0093,0.275565 0.690465,-0.01857 c 3.093178,-0.08977 5.994381,-0.83599 8.743884,-2.250982 3.520467,-1.80827 6.511464,-4.659924 8.459018,-8.065837 1.39951,-2.452247 2.216918,-5.034526 2.50178,-7.910962 0.06815,-0.681202 0.07741,-2.517283 0.01857,-3.189177 -0.188934,-2.108376 -0.659558,-4.02806 -1.446011,-5.898205 C 44.485785,14.718267 40.377035,10.730269 35.283677,8.739368 33.593115,8.0798589 31.763218,7.6494772 29.893069,7.4760868 c -0.492301,-0.046468 -2.250987,-0.0867 -2.64732,-0.058861 z"
+     id="path43"
+     style="fill:#f53dfb;stroke:none;stroke-width:0.00309623;fill-opacity:1" /></g></svg>
diff --git a/application/index.html b/application/index.html
new file mode 100644
index 00000000..f5952259
--- /dev/null
+++ b/application/index.html
@@ -0,0 +1,155 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+    <title>greg</title>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1" />
+    <link rel="stylesheet" href="assets/css/main.css" />
+    <link rel="stylesheet" href="assets/css/grid.css" />
+    <link rel="stylesheet" href="assets/css/qr-reader.css" />
+</head>
+
+<body>
+    <div id="wrapper">
+        <div id="toast" class="width-100"></div>
+        <div id="intro" class="width-100 height-100">
+            <img src="icons/intro.svg">
+            <div class="width-100" id="version"></div>
+            <div class="width-100" id="intro-message"></div>
+            <div class="width-100 flex justify-content-spacearound" id="loading-progress">
+                <div>
+                    <div></div>
+                </div>
+            </div>
+        </div>
+
+
+        <div id="qr-screen">
+            <video id="video"></video>
+            <div id="corner-nw"></div>
+            <div id="corner-no"></div>
+            <div id="corner-so"></div>
+            <div id="corner-sw"></div>
+            <div id="startDecoding" hidden>Start Scanning</div>
+        </div>
+        <!---------------->
+        <!--news-feed-->
+        <!---------------->
+
+
+        <div class="width-100 height-100">
+            <div id="calendar" class="page">
+                <h3 class="card-header" id="monthAndYear"></h3>
+                <div class="calendar-head flex">
+                    <div>Sun</div>
+                    <div>Mon</div>
+                    <div>Tue</div>
+                    <div>Wed</div>
+                    <div>Thu</div>
+                    <div>Fri</div>
+                    <div>Sat</div>
+                </div>
+    
+                <div id="calendar-body">
+    
+                </div>
+                
+            </div>
+            <div id="settings" class="page">   
+            </div>
+
+            <div id="add-edit-event" class="page width-100">
+                <div class="item input-parent" tabindex="0">
+                    <label for="event-title"><strong>Title</strong></label>
+                    <input placeholder="" type="text" id="event-title" />
+                </div>
+
+                <div class="item input-parent" tabindex="1">
+                    <label for="event-location"><strong>Location</strong></label>
+                    <input placeholder="" type="text" id="event-location" />
+                </div>
+
+                <div class="item input-parent" tabindex="2">
+                    <label for="date"><strong>Date</strong></label>
+                    <input placeholder="" type="text" id="event-date" />
+                </div>
+                
+                <div class="item input-parent" tabindex="3">
+                    <label for="time"><strong>Time</strong></label>
+                    <input placeholder="" type="text" id="event-time" />
+                    </div>
+
+                <div class="item input-parent" tabindex="4">
+                    <label for="description"><strong>Description</strong></label>
+                    <textarea placeholder="" type="text" id="event-description"></textarea>
+                </div>
+                <button tabindex="5" id="save-event" class="item">save</button>
+            </div>
+            <script id="template" type="x-tmpl-mustache">
+            
+            {{#data}}
+            <article data-fdate={{date}} class="item">
+            <h2>{{title}}</h2>
+            <div>{{date}},{{time}}</div>
+            <div>{{description}}</div>
+            </article>
+            {{/data}}
+            </script>
+
+            <div class="page width-100" id="list-view">
+            </div>
+
+
+
+            <div id="bottom-bar">
+                <div class="inner flex justify-content-spacebetween width-100">
+                    <div id="button-left"></div>
+                    <div id="button-center"></div>
+                    <div id="button-right"></div>
+                </div>
+            </div>
+
+            <div id="options" class="width-100 height-100">
+                
+                    <button class="item" data-function="unread" tabindex="0">mark as unread</button>
+                    <button class="item" data-function="sleepmode" tabindex="1">activate sleep mode</button>
+                    <button class="item" data-function="audio-player" tabindex="2">open audioplayer</button>
+                    <button class="item" data-function="volume" tabindex="3">volume</button>
+                    <button class="item" data-function="share" tabindex="4">share</button>
+               
+
+            </div>
+
+           
+        </div>
+     
+    </div>
+
+
+
+
+
+    <div id="goodbye" class="flex justify-content-center align-item-center width-100 height-100">
+        <div id="donation">
+            please support my work, <br />make a donation<br />
+            <br>paypal.me/strukturart<br>
+            Thank you!
+        </div>
+        <div id="ciao">
+            Goodbye<br />
+            <br />
+            <ul>
+                <li>Thank you</li>
+                <li>for using feedolin</li>
+            </ul>
+        </div>
+    </div>
+
+</body>
+
+<script src="assets/js/mustache.js"></script>
+<script src="assets/js/helper.js"></script>
+<script src="index.js"></script>
+
+</html>
\ No newline at end of file
diff --git a/application/index.js b/application/index.js
new file mode 100644
index 00000000..75defbc4
--- /dev/null
+++ b/application/index.js
@@ -0,0 +1,426 @@
+"use strict";
+
+let status = {
+  view: "month",
+  selected_day: "",
+  visible: "",
+};
+
+let events;
+
+if (localStorage.getItem("events") != null) {
+  events = JSON.parse(localStorage.getItem("events"));
+} else {
+  events = [];
+}
+
+document.addEventListener("DOMContentLoaded", function () {
+  let today = new Date();
+  let currentMonth = today.getMonth();
+  let currentYear = today.getFullYear();
+  let currentDay = today.getDate();
+  //let selectYear = document.getElementById("year");
+  //let selectMonth = document.getElementById("month");
+  let months = [
+    "Jan",
+    "Feb",
+    "Mar",
+    "Apr",
+    "May",
+    "Jun",
+    "Jul",
+    "Aug",
+    "Sep",
+    "Oct",
+    "Nov",
+    "Dec",
+  ];
+
+  let jump_to_today = function () {
+    let currentMonth = today.getMonth();
+    let currentYear = today.getFullYear();
+    showCalendar(currentMonth, currentYear);
+    document.querySelectorAll(".item")[currentDay - 1].focus();
+    document.querySelectorAll(".item")[currentDay - 1].classList.add("today");
+    status.selected_day = document.activeElement.getAttribute("data-date");
+  };
+
+  function next() {
+    currentYear = currentMonth === 11 ? currentYear + 1 : currentYear;
+    currentMonth = (currentMonth + 1) % 12;
+    showCalendar(currentMonth, currentYear);
+  }
+
+  function previous() {
+    currentYear = currentMonth === 0 ? currentYear - 1 : currentYear;
+    currentMonth = currentMonth === 0 ? 11 : currentMonth - 1;
+    showCalendar(currentMonth, currentYear);
+  }
+
+  function jump() {
+    //currentYear = parseInt(selectYear.value);
+    //currentMonth = parseInt(selectMonth.value);
+    showCalendar(currentMonth, currentYear);
+  }
+
+  let event_check = function (date) {
+    let f;
+
+    for (let t = 0; t < events.length; t++) {
+      f = false;
+
+      if (date === events[t].date) {
+        f = true;
+        t = 1000;
+      }
+    }
+    return f;
+  };
+
+  let monthAndYear = document.getElementById("monthAndYear");
+  showCalendar(currentMonth, currentYear);
+  jump_to_today();
+
+  //////////////
+  //BUILD CALENDAR
+  //////////////
+
+  function showCalendar(month, year) {
+    //let month_year = months[month] + " " + year;
+
+    helper.bottom_bar("view", "select", "options");
+
+    let firstDay = new Date(year, month).getDay();
+    let daysInMonth = 32 - new Date(year, month, 32).getDate();
+
+    let tbl = document.getElementById("calendar-body"); // body of the calendar
+
+    // clearing all previous cells
+    tbl.innerHTML = "";
+
+    // filing data about month and in the page via DOM.
+    monthAndYear.innerHTML = months[month] + " " + year;
+    //selectYear.value = year;
+    //selectMonth.value = month;
+
+    // creating all cells
+    let date = 1;
+    for (let i = 0; i < 6; i++) {
+      // creates a table row
+      let row = document.createElement("div");
+      row.classList.add("flex");
+      row.classList.add("width-100");
+
+      //creating individual cells, filing them up with data.
+      for (let j = 0; j < 7; j++) {
+        if (i === 0 && j < firstDay) {
+          let cell = document.createElement("div");
+          let cellText = document.createTextNode("");
+          cell.appendChild(cellText);
+          row.appendChild(cell);
+        } else if (date > daysInMonth) {
+          break;
+        } else {
+          let cell = document.createElement("div");
+          let cellText = document.createTextNode(date);
+          // color today's date
+          cell.appendChild(cellText);
+          cell.setAttribute("tabindex", date - 1);
+          let p = currentYear + "-" + (currentMonth + 1) + "-" + date;
+          cell.setAttribute("data-date", p);
+          if (event_check(p)) {
+            cell.classList.add("event");
+          }
+
+          cell.classList.add("item");
+          row.appendChild(cell);
+          date++;
+        }
+      }
+
+      tbl.appendChild(row);
+    }
+
+    document.querySelectorAll(".item")[0].focus();
+    status.seleted_day = document.activeElement.getAttribute("data-date");
+    console.log(status.selected_day);
+  }
+
+  /////////////////
+  ///NAVIGATION
+  /////////////////
+
+  let nav = function (move) {
+    console.log(console.log(JSON.stringify(status)));
+    const currentIndex = document.activeElement.tabIndex;
+    const next = currentIndex + move;
+    let items;
+
+    if (status.view == "month") {
+      items = document.querySelectorAll(".item");
+    }
+    if (status.view == "add-edit-event" || status.view == "list-view") {
+      if (
+        document.activeElement.parentNode.classList.contains("input-parent")
+      ) {
+        document.activeElement.parentNode.focus();
+      }
+
+      let b = document.activeElement.parentNode;
+      items = b.querySelectorAll(".item");
+    }
+
+    const targetElement = items[next];
+    targetElement.focus();
+
+    if (status.view == "month") {
+      status.selected_day = targetElement.getAttribute("data-date");
+    }
+    console.log(status.selected_day);
+  };
+
+  ///////////////
+  //STORE EVENTS//
+  ///////////////
+
+  let store_event = function () {
+    let event = {
+      id: today.getTime() / 1000,
+      title: document.getElementById("event-title").value,
+      date: document.getElementById("event-date").value,
+      time: document.getElementById("event-time").value,
+      description: document.getElementById("event-description").value,
+    };
+
+    events.push(event);
+    localStorage.setItem("events", JSON.stringify(events));
+    status.view = "month";
+    router();
+  };
+
+  let set_tabindex = function () {
+    document.querySelectorAll("article").forEach(function (i, p) {
+      i.setAttribute("tabindex", p);
+    });
+  };
+
+  ////////////////////
+  ////BUILD EVENT-LIST
+  ///////////////////
+
+  function renderHello(arr) {
+    var template = document.getElementById("template").innerHTML;
+    var rendered = Mustache.render(template, {
+      data: arr,
+    });
+    document.getElementById("list-view").innerHTML = rendered;
+    set_tabindex();
+  }
+
+  renderHello(events);
+
+  ///////////////////
+  ///ROUTER
+  /////////////////
+
+  const month = document.getElementById("calendar");
+  const add_edit_event = document.getElementById("add-edit-event");
+  const list_view = document.getElementById("list-view");
+
+  const pages = document.querySelectorAll(".page");
+
+  let router = function (view) {
+    pages.forEach(function (index) {
+      index.style.display = "none";
+    });
+
+    if (view == "view") {
+      if (status.view == "month") {
+        status.view = "list-view";
+      } else {
+        status.view = "month";
+      }
+    }
+
+    if (status.view == "add-edit-event") {
+      document.getElementById(
+        "event-date"
+      ).value = document.activeElement.getAttribute("data-date");
+      add_edit_event.style.display = "block";
+      add_edit_event.querySelectorAll(".item")[0].focus();
+      helper.bottom_bar("", "edit", "");
+      return true;
+    }
+
+    if (status.view == "month") {
+      month.style.display = "block";
+    }
+    if (status.view == "list-view") {
+      console.log(status.selected_day);
+
+      list_view.style.display = "block";
+      renderHello(events);
+
+      document.querySelectorAll("[data-fdate]").forEach(function (e) {
+        if (e.getAttribute("data-fdate") == status.selected_day) {
+          e.focus();
+        }
+      });
+    }
+  };
+
+  //////////////////////////////
+  ////KEYPAD HANDLER////////////
+  //////////////////////////////
+
+  let longpress = false;
+  const longpress_timespan = 1000;
+  let timeout;
+
+  function repeat_action(param) {
+    switch (param.key) {
+      case "0":
+        break;
+    }
+  }
+
+  //////////////
+  ////LONGPRESS
+  /////////////
+
+  function longpress_action(param) {
+    switch (param.key) {
+      case "0":
+        break;
+    }
+  }
+
+  ///////////////
+  ////SHORTPRESS
+  //////////////
+
+  function shortpress_action(param) {
+    switch (param.key) {
+      case "*":
+        jump_to_today();
+
+        break;
+
+      case "ArrowUp":
+        if (status.view == "month") {
+          nav(-7);
+        }
+        if (status.view == "add-edit-event" || status.view == "list-view") {
+          nav(-1);
+        }
+        break;
+      case "ArrowDown":
+        if (status.view == "month") {
+          nav(+7);
+        }
+        if (status.view == "add-edit-event" || status.view == "list-view") {
+          nav(+1);
+        }
+
+        break;
+      case "ArrowRight":
+        nav(1);
+        break;
+      case "ArrowLeft":
+        nav(-1);
+        break;
+
+      case "1":
+        previous();
+        break;
+      case "3":
+        next();
+        break;
+
+      case "SoftLeft":
+      case "Control":
+        router("view");
+        break;
+
+      case "Enter":
+        if (document.activeElement.classList.contains("input-parent")) {
+          document.activeElement.children[1].focus();
+          return true;
+        }
+        if (status.view == "month") {
+          status.view = "add-edit-event";
+          router();
+        }
+
+        if (document.activeElement.id == "save-event") {
+          store_event();
+        }
+        break;
+
+      case "Backspace":
+        if (status.view == "add-edit-event") {
+          status.view = "month";
+          router();
+        }
+
+        break;
+    }
+  }
+
+  /////////////////////////////////
+  ////shortpress / longpress logic
+  ////////////////////////////////
+
+  function handleKeyDown(evt) {
+    if (evt.key === "Backspace") {
+      evt.preventDefault();
+    }
+
+    if (evt.key === "EndCall") {
+      evt.preventDefault();
+      helper.goodbye();
+    }
+    if (!evt.repeat) {
+      longpress = false;
+      timeout = setTimeout(() => {
+        longpress = true;
+        longpress_action(evt);
+      }, longpress_timespan);
+    }
+
+    if (evt.repeat) {
+      if (evt.key == "Backspace") evt.preventDefault(); // Disable close app by holding backspace
+
+      longpress = false;
+      repeat_action(evt);
+    }
+  }
+
+  function handleKeyUp(evt) {
+    evt.preventDefault();
+
+    if (evt.key == "Backspace") evt.preventDefault(); // Disable close app by holding backspace
+
+    if (
+      evt.key == "Backspace" &&
+      status.window_status != "article-list" &&
+      document.activeElement.tagName == "INPUT"
+    ) {
+      evt.preventDefault();
+    }
+
+    clearTimeout(timeout);
+    if (!longpress) {
+      shortpress_action(evt);
+    }
+  }
+
+  document.addEventListener("keydown", handleKeyDown);
+  document.addEventListener("keyup", handleKeyUp);
+
+  document.addEventListener("visibilitychange", function () {
+    setTimeout(function () {
+      status.visible = document.visibilityState;
+    }, 1000);
+  });
+});
diff --git a/application/manifest.webapp b/application/manifest.webapp
new file mode 100644
index 00000000..92a409fa
--- /dev/null
+++ b/application/manifest.webapp
@@ -0,0 +1,83 @@
+{
+	"version": "1.1.0",
+	"name": "pingoi",
+	"description": "pingoi",
+	"launch_path": "/index.html",
+	"type": "privileged",
+	"fullscreen": "true",
+
+
+
+	"icons": {
+		"56": "/icons/icon-56-56.png",
+		"112": "/icons/icon-112-112.png"
+	},
+	
+	"developer": 
+	{
+		"name": "strukturart",
+		"url": "https://strukturart.com"
+	},
+
+
+  "dependencies": {
+    "ads-sdk": "1.5.0"
+  },
+
+  "locales": {
+    "en-US": {
+      "name": "pingoi",
+      "subtitle": "pingoi",
+      "description": "pingoi"
+    }
+  },
+  "default_locale": "en-US",
+
+
+
+	"permissions": 
+	{
+		"mobiledata": {},
+		"wifidata": {},
+		"calllog": {},
+
+		"device-storage:sdcard": {
+			"description": "Read/Write from/to sd-card",
+			"access": "readwrite"
+		},
+
+		"video-capture": {
+			"description": "Reading Codes using the Camera"
+			},
+
+
+		"audio-channel-normal" : {
+      		"description" : "Needed to play this app's audio content on the normal channel"
+    	},
+		"audio-channel-content" : {
+			"description" : "Needed to play this app's audio content on the content channel"
+		},
+		"desktop-notification" : {
+			"description" : "Needed to fire system notifications"
+		},
+
+		"volumemanager":{},		
+		"browser": {},
+		"spatialnavigation-app-manage": {
+		"navigator.spatialNavigationEnabled": false
+		},
+
+		"systemXHR": {
+		"description": "Required to load remote content"
+		}
+
+
+
+ 
+	}
+
+
+
+
+ 
+}
diff --git a/build/greg-omnisd.zip b/build/greg-omnisd.zip
new file mode 100755
index 00000000..fb78008d
Binary files /dev/null and b/build/greg-omnisd.zip differ
diff --git a/build/greg.zip b/build/greg.zip
new file mode 100644
index 00000000..56769f43
Binary files /dev/null and b/build/greg.zip differ
diff --git a/images/bitcoin_rcv.png b/images/bitcoin_rcv.png
new file mode 100644
index 00000000..8ae52bd0
Binary files /dev/null and b/images/bitcoin_rcv.png differ
diff --git a/images/helper.svg b/images/helper.svg
new file mode 100644
index 00000000..cc45399e
--- /dev/null
+++ b/images/helper.svg
@@ -0,0 +1,177 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="210mm"
+   height="297mm"
+   viewBox="0 0 210 297"
+   version="1.1"
+   id="svg5"
+   inkscape:version="1.1 (c4e8f9e, 2021-05-24)"
+   sodipodi:docname="helper.svg"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <sodipodi:namedview
+     id="namedview7"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:document-units="mm"
+     showgrid="false"
+     inkscape:zoom="1.258186"
+     inkscape:cx="437.53466"
+     inkscape:cy="360.43954"
+     inkscape:window-width="1848"
+     inkscape:window-height="1016"
+     inkscape:window-x="72"
+     inkscape:window-y="27"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="layer1" />
+  <defs
+     id="defs2" />
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1">
+    <g
+       id="g36468"
+       transform="translate(-3.9701166)" />
+    <g
+       id="g40007"
+       transform="translate(-54.422206,-6.8865453)">
+      <rect
+         style="fill:#000000;fill-opacity:0.840622;stroke-width:0"
+         id="rect846-4"
+         width="19.231627"
+         height="57.116074"
+         x="98.764572"
+         y="67.383987"
+         ry="9.0306015"
+         transform="translate(-3.9701166)" />
+      <path
+         sodipodi:type="star"
+         style="fill:#ffffff;fill-opacity:0.840622;stroke:none;stroke-width:0;stroke-opacity:1"
+         id="path39602"
+         inkscape:flatsided="true"
+         sodipodi:sides="3"
+         sodipodi:cx="228.15875"
+         sodipodi:cy="143.90282"
+         sodipodi:r1="29.247404"
+         sodipodi:r2="14.623703"
+         sodipodi:arg1="2.6106809"
+         sodipodi:arg2="3.6578785"
+         inkscape:rounded="0"
+         inkscape:randomized="0"
+         d="m 202.93738,158.71136 25.00749,-44.05517 25.64914,43.68471 z"
+         transform="matrix(0.16924242,0,0,0.16924242,65.778031,51.213509)"
+         inkscape:transform-center-x="-0.018108823"
+         inkscape:transform-center-y="-1.2217625" />
+      <path
+         sodipodi:type="star"
+         style="fill:#ffffff;fill-opacity:0.840622;stroke:none;stroke-width:0;stroke-opacity:1"
+         id="path39602-6"
+         inkscape:flatsided="true"
+         sodipodi:sides="3"
+         sodipodi:cx="228.15875"
+         sodipodi:cy="143.90282"
+         sodipodi:r1="29.247404"
+         sodipodi:r2="14.623703"
+         sodipodi:arg1="2.6106809"
+         sodipodi:arg2="3.6578785"
+         inkscape:rounded="0"
+         inkscape:randomized="0"
+         transform="matrix(-0.16924242,0,0,-0.16924242,143.0425,140.3708)"
+         inkscape:transform-center-x="0.018111144"
+         inkscape:transform-center-y="1.2217626"
+         d="m 202.93738,158.71136 25.00749,-44.05517 25.64914,43.68471 z" />
+      <g
+         id="g36461">
+        <rect
+           style="fill:#000000;fill-opacity:0.840622;stroke:none;stroke-width:0;stroke-opacity:1"
+           id="rect36112"
+           width="48.524792"
+           height="6.8343964"
+           x="80.147873"
+           y="92.377975"
+           ry="3.4171982" />
+        <text
+           xml:space="preserve"
+           style="font-size:4.7736px;line-height:8.95055px;font-family:Arial;-inkscape-font-specification:'Arial, Normal';letter-spacing:0px;word-spacing:0px;fill:none;stroke:#000000;stroke-width:0.358022px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+           x="85.996483"
+           y="97.475723"
+           id="text26274"><tspan
+             sodipodi:role="line"
+             id="tspan26272"
+             style="fill:#ffffff;fill-opacity:0.840622;stroke:none;stroke-width:0.358022px;stroke-opacity:1"
+             x="85.996483"
+             y="97.475723">select next article</tspan></text>
+      </g>
+    </g>
+    <g
+       id="g40019"
+       transform="translate(-58.292462,-5.3713672)">
+      <g
+         id="g36468-3"
+         transform="translate(56.335258,-1.0701979)">
+        <rect
+           style="fill:#000000;fill-opacity:0.840622;stroke-width:0"
+           id="rect846-4-8"
+           width="19.231627"
+           height="57.116074"
+           x="98.764572"
+           y="67.383987"
+           ry="9.0306015" />
+        <text
+           xml:space="preserve"
+           style="font-size:12.7247px;line-height:23.858px;font-family:Arial;-inkscape-font-specification:'Arial, Normal';letter-spacing:0px;word-spacing:0px;fill:none;stroke:none;stroke-width:0.954344px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+           x="104.98535"
+           y="80.655098"
+           id="text12902-6"><tspan
+             sodipodi:role="line"
+             id="tspan12900-0"
+             style="fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:0.954344px;stroke-opacity:1"
+             x="104.98535"
+             y="80.655098">2</tspan></text>
+        <text
+           xml:space="preserve"
+           style="font-size:12.7247px;line-height:23.858px;font-family:Arial;-inkscape-font-specification:'Arial, Normal';letter-spacing:0px;word-spacing:0px;fill:none;stroke:none;stroke-width:0.954344px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+           x="104.83263"
+           y="121.76143"
+           id="text12902-9-4"><tspan
+             sodipodi:role="line"
+             id="tspan12900-6-8"
+             style="fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:0.954344px;stroke-opacity:1"
+             x="104.83263"
+             y="121.76143">5</tspan></text>
+      </g>
+      <g
+         id="g36461-8"
+         transform="translate(60.305375,-1.0701979)">
+        <rect
+           style="fill:#000000;fill-opacity:0.840622;stroke:none;stroke-width:0;stroke-opacity:1"
+           id="rect36112-8"
+           width="48.524792"
+           height="6.8343964"
+           x="80.147873"
+           y="92.377975"
+           ry="3.4171982" />
+        <text
+           xml:space="preserve"
+           style="font-size:4.7736px;line-height:8.95055px;font-family:Arial;-inkscape-font-specification:'Arial, Normal';letter-spacing:0px;word-spacing:0px;fill:none;stroke:#000000;stroke-width:0.358022px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+           x="83.408058"
+           y="97.475723"
+           id="text26274-9"><tspan
+             sodipodi:role="line"
+             id="tspan26272-7"
+             style="fill:#ffffff;fill-opacity:0.840622;stroke:none;stroke-width:0.358022px;stroke-opacity:1"
+             x="83.408058"
+             y="97.475723">select next  channel</tspan></text>
+      </g>
+    </g>
+  </g>
+</svg>
diff --git a/images/image-1.png b/images/image-1.png
new file mode 100755
index 00000000..d757706c
Binary files /dev/null and b/images/image-1.png differ
diff --git a/images/image-2.png b/images/image-2.png
new file mode 100755
index 00000000..f6cc51a1
Binary files /dev/null and b/images/image-2.png differ
diff --git a/images/image-3.png b/images/image-3.png
new file mode 100755
index 00000000..280c1476
Binary files /dev/null and b/images/image-3.png differ
diff --git a/images/image-4.png b/images/image-4.png
new file mode 100755
index 00000000..b604fa2d
Binary files /dev/null and b/images/image-4.png differ
diff --git a/images/image-5.png b/images/image-5.png
new file mode 100644
index 00000000..e5fc5408
Binary files /dev/null and b/images/image-5.png differ
diff --git a/images/image-6.png b/images/image-6.png
new file mode 100755
index 00000000..775db424
Binary files /dev/null and b/images/image-6.png differ
diff --git a/images/kaios-marketing-banner.png b/images/kaios-marketing-banner.png
new file mode 100644
index 00000000..2ea0bf33
Binary files /dev/null and b/images/kaios-marketing-banner.png differ
diff --git a/images/logo.svg b/images/logo.svg
new file mode 100644
index 00000000..5a3ddf3e
--- /dev/null
+++ b/images/logo.svg
@@ -0,0 +1,2820 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   height="61.133114"
+   width="52.141792"
+   id="svg14"
+   xml:space="preserve"
+   enable-background="new 0 0 1000 1000"
+   viewBox="0 0 52.141792 61.133114"
+   y="0px"
+   x="0px"
+   version="1.1"
+   sodipodi:docname="logo.svg"
+   inkscape:version="1.1 (c4e8f9e, 2021-05-24)"
+   inkscape:export-filename="/home/strukturart/Desktop/Pages/rss-reader/images/logo.png"
+   inkscape:export-xdpi="171.42857"
+   inkscape:export-ydpi="171.42857"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:ns1="https://launchpad.net/jessyink"><sodipodi:namedview
+   pagecolor="#ffffff"
+   bordercolor="#666666"
+   borderopacity="1"
+   objecttolerance="10"
+   gridtolerance="10"
+   guidetolerance="10"
+   inkscape:pageopacity="0"
+   inkscape:pageshadow="2"
+   inkscape:window-width="1848"
+   inkscape:window-height="1016"
+   id="namedview10"
+   showgrid="false"
+   inkscape:zoom="9.5732953"
+   inkscape:cx="21.988249"
+   inkscape:cy="30.867114"
+   inkscape:window-x="72"
+   inkscape:window-y="27"
+   inkscape:window-maximized="1"
+   inkscape:current-layer="g2262"
+   inkscape:document-rotation="0"
+   inkscape:pagecheckerboard="false"
+   fit-margin-top="0"
+   fit-margin-left="0"
+   fit-margin-right="0"
+   fit-margin-bottom="0" /><defs
+   id="defs18" />
+<metadata
+   id="metadata2"> Svg Vector Icons : http://www.onlinewebfonts.com/icon <rdf:RDF><cc:Work
+     rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
+       rdf:resource="http://purl.org/dc/dcmitype/StillImage" /></cc:Work></rdf:RDF></metadata>
+
+<text
+   xml:space="preserve"
+   style="font-size:13.3333px;line-height:25px;font-family:Arial;-inkscape-font-specification:Arial;letter-spacing:0px;word-spacing:0px;fill:none;stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+   x="6.4129987"
+   y="-50.58881"
+   id="text2162"><tspan
+     sodipodi:role="line"
+     id="tspan2160"
+     x="6.4129987"
+     y="-50.58881" /></text><script
+   id="JessyInk"
+   ns1:version="1.5.5">// Copyright 2008, 2009 Hannes Hochreiner
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+//
+// You should have received a copy of the GNU General Public License
+// along with this program.  If not, see http://www.gnu.org/licenses/.
+
+// Set onload event handler.
+window.onload = jessyInkInit;
+
+// Creating a namespace dictionary. The standard Inkscape namespaces are taken from inkex.py.
+var NSS = new Object();
+NSS['sodipodi']='http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd';
+NSS['cc']='http://web.resource.org/cc/';
+NSS['svg']='http://www.w3.org/2000/svg';
+NSS['dc']='http://purl.org/dc/elements/1.1/';
+NSS['rdf']='http://www.w3.org/1999/02/22-rdf-syntax-ns#';
+NSS['inkscape']='http://www.inkscape.org/namespaces/inkscape';
+NSS['xlink']='http://www.w3.org/1999/xlink';
+NSS['xml']='http://www.w3.org/XML/1998/namespace';
+NSS['jessyink']='https://launchpad.net/jessyink';
+
+// Keycodes.
+var LEFT_KEY = 37; // cursor left keycode
+var UP_KEY = 38; // cursor up keycode
+var RIGHT_KEY = 39; // cursor right keycode
+var DOWN_KEY = 40; // cursor down keycode
+var PAGE_UP_KEY = 33; // page up keycode
+var PAGE_DOWN_KEY = 34; // page down keycode
+var HOME_KEY = 36; // home keycode
+var END_KEY = 35; // end keycode
+var ENTER_KEY = 13; // next slide
+var SPACE_KEY = 32;
+var ESCAPE_KEY = 27;
+
+// Presentation modes.
+var SLIDE_MODE = 1;
+var INDEX_MODE = 2;
+var DRAWING_MODE = 3;
+
+// Mouse handler actions.
+var MOUSE_UP = 1;
+var MOUSE_DOWN = 2;
+var MOUSE_MOVE = 3;
+var MOUSE_WHEEL = 4;
+
+// Parameters.
+var ROOT_NODE = document.getElementsByTagNameNS(NSS[&quot;svg&quot;], &quot;svg&quot;)[0];
+var HEIGHT = 0;
+var WIDTH = 0;
+var INDEX_COLUMNS_DEFAULT = 4;
+var INDEX_COLUMNS = INDEX_COLUMNS_DEFAULT;
+var INDEX_OFFSET = 0;
+var STATE_START = -1;
+var STATE_END = -2;
+var BACKGROUND_COLOR = null;
+var slides = new Array();
+
+// Initialisation.
+var currentMode = SLIDE_MODE;
+var masterSlide = null;
+var activeSlide = 0;
+var activeEffect = 0;
+var timeStep = 30; // 40 ms equal 25 frames per second.
+var lastFrameTime = null;
+var processingEffect = false;
+var transCounter = 0;
+var effectArray = 0;
+var defaultTransitionInDict = new Object();
+defaultTransitionInDict[&quot;name&quot;] = &quot;appear&quot;;
+var defaultTransitionOutDict = new Object();
+defaultTransitionOutDict[&quot;name&quot;] = &quot;appear&quot;;
+var jessyInkInitialised = false;
+
+// Initialise char and key code dictionaries.
+var charCodeDictionary = getDefaultCharCodeDictionary();
+var keyCodeDictionary = getDefaultKeyCodeDictionary();
+
+// Initialise mouse handler dictionary.
+var mouseHandlerDictionary = getDefaultMouseHandlerDictionary();
+
+var progress_bar_visible = false;
+var timer_elapsed = 0;
+var timer_start = timer_elapsed;
+var timer_duration = 15; // 15 minutes
+
+var history_counter = 0;
+var history_original_elements = new Array();
+var history_presentation_elements = new Array();
+
+var mouse_original_path = null;
+var mouse_presentation_path = null;
+var mouse_last_x = -1;
+var mouse_last_y = -1;
+var mouse_min_dist_sqr = 3 * 3;
+var path_colour = &quot;red&quot;;
+var path_width_default = 3;
+var path_width = path_width_default;
+var path_paint_width = path_width;
+
+var number_of_added_slides = 0;
+
+/** Initialisation function.
+ *  The whole presentation is set-up in this function.
+ */
+function jessyInkInit()
+{
+    // Make sure we only execute this code once. Double execution can occur if the onload event handler is set
+    // in the main svg tag as well (as was recommended in earlier versions). Executing this function twice does
+    // not lead to any problems, but it takes more time.
+    if (jessyInkInitialised)
+        return;
+
+    // Making the presentation scalable.
+    var VIEWBOX = ROOT_NODE.getAttribute(&quot;viewBox&quot;);
+
+    if (VIEWBOX)
+    {
+        WIDTH = ROOT_NODE.viewBox.animVal.width;
+        HEIGHT = ROOT_NODE.viewBox.animVal.height;
+    }
+    else
+    {
+        HEIGHT = parseFloat(ROOT_NODE.getAttribute(&quot;height&quot;));
+        WIDTH = parseFloat(ROOT_NODE.getAttribute(&quot;width&quot;));
+        ROOT_NODE.setAttribute(&quot;viewBox&quot;, &quot;0 0 &quot; + WIDTH + &quot; &quot; + HEIGHT);
+    }
+
+    ROOT_NODE.setAttribute(&quot;width&quot;, &quot;100%&quot;);
+    ROOT_NODE.setAttribute(&quot;height&quot;, &quot;100%&quot;);
+
+    // Setting the background color.
+    var namedViews = document.getElementsByTagNameNS(NSS[&quot;sodipodi&quot;], &quot;namedview&quot;);
+
+    for (var counter = 0; counter &lt; namedViews.length; counter++)
+    {
+        if (namedViews[counter].hasAttribute(&quot;id&quot;) &amp;&amp; namedViews[counter].hasAttribute(&quot;pagecolor&quot;))
+        {
+            if (namedViews[counter].getAttribute(&quot;id&quot;) == &quot;base&quot;)
+            {
+                BACKGROUND_COLOR = namedViews[counter].getAttribute(&quot;pagecolor&quot;);
+                var newAttribute = &quot;background-color:&quot; + BACKGROUND_COLOR + &quot;;&quot;;
+
+                if (ROOT_NODE.hasAttribute(&quot;style&quot;))
+                    newAttribute += ROOT_NODE.getAttribute(&quot;style&quot;);
+
+                ROOT_NODE.setAttribute(&quot;style&quot;, newAttribute);
+            }
+        }
+    }
+
+    // Defining clip-path.
+    var defsNodes = document.getElementsByTagNameNS(NSS[&quot;svg&quot;], &quot;defs&quot;);
+
+    if (defsNodes.length &gt; 0)
+    {
+        var existingClipPath = document.getElementById(&quot;jessyInkSlideClipPath&quot;);
+
+        if (!existingClipPath)
+        {
+            var rectNode = document.createElementNS(NSS[&quot;svg&quot;], &quot;rect&quot;);
+            var clipPath = document.createElementNS(NSS[&quot;svg&quot;], &quot;clipPath&quot;);
+
+            rectNode.setAttribute(&quot;x&quot;, 0);
+            rectNode.setAttribute(&quot;y&quot;, 0);
+            rectNode.setAttribute(&quot;width&quot;, WIDTH);
+            rectNode.setAttribute(&quot;height&quot;, HEIGHT);
+
+            clipPath.setAttribute(&quot;id&quot;, &quot;jessyInkSlideClipPath&quot;);
+            clipPath.setAttribute(&quot;clipPathUnits&quot;, &quot;userSpaceOnUse&quot;);
+
+            clipPath.appendChild(rectNode);
+            defsNodes[0].appendChild(clipPath);
+        }
+    }
+
+    // Making a list of the slide and finding the master slide.
+    var nodes = document.getElementsByTagNameNS(NSS[&quot;svg&quot;], &quot;g&quot;);
+    var tempSlides = new Array();
+    var existingJessyInkPresentationLayer = null;
+
+    for (var counter = 0; counter &lt; nodes.length; counter++)
+    {
+        if (nodes[counter].getAttributeNS(NSS[&quot;inkscape&quot;], &quot;groupmode&quot;) &amp;&amp; (nodes[counter].getAttributeNS(NSS[&quot;inkscape&quot;], &quot;groupmode&quot;) == &quot;layer&quot;))
+        {
+            if (nodes[counter].getAttributeNS(NSS[&quot;inkscape&quot;], &quot;label&quot;) &amp;&amp; nodes[counter].getAttributeNS(NSS[&quot;jessyink&quot;], &quot;masterSlide&quot;) == &quot;masterSlide&quot;)
+                masterSlide = nodes[counter];
+            else if (nodes[counter].getAttributeNS(NSS[&quot;inkscape&quot;], &quot;label&quot;) &amp;&amp; nodes[counter].getAttributeNS(NSS[&quot;jessyink&quot;], &quot;presentationLayer&quot;) == &quot;presentationLayer&quot;)
+                existingJessyInkPresentationLayer = nodes[counter];
+            else
+                tempSlides.push(nodes[counter].getAttribute(&quot;id&quot;));
+        }
+        else if (nodes[counter].getAttributeNS(NSS['jessyink'], 'element'))
+        {
+            handleElement(nodes[counter]);
+        }
+    }
+
+    // Hide master slide set default transitions.
+    if (masterSlide)
+    {
+        masterSlide.style.display = &quot;none&quot;;
+
+        if (masterSlide.hasAttributeNS(NSS[&quot;jessyink&quot;], &quot;transitionIn&quot;))
+            defaultTransitionInDict = propStrToDict(masterSlide.getAttributeNS(NSS[&quot;jessyink&quot;], &quot;transitionIn&quot;));
+
+        if (masterSlide.hasAttributeNS(NSS[&quot;jessyink&quot;], &quot;transitionOut&quot;))
+            defaultTransitionOutDict = propStrToDict(masterSlide.getAttributeNS(NSS[&quot;jessyink&quot;], &quot;transitionOut&quot;));
+    }
+
+    if (existingJessyInkPresentationLayer != null)
+    {
+        existingJessyInkPresentationLayer.parentNode.removeChild(existingJessyInkPresentationLayer);
+    }
+
+    // Set start slide.
+    var hashObj = new LocationHash(window.location.hash);
+
+    activeSlide = hashObj.slideNumber;
+    activeEffect = hashObj.effectNumber;
+
+    if (activeSlide &lt; 0)
+        activeSlide = 0;
+    else if (activeSlide &gt;= tempSlides.length)
+        activeSlide = tempSlides.length - 1;
+
+    var originalNode = document.getElementById(tempSlides[counter]);
+
+    var JessyInkPresentationLayer = document.createElementNS(NSS[&quot;svg&quot;], &quot;g&quot;);
+    JessyInkPresentationLayer.setAttributeNS(NSS[&quot;inkscape&quot;], &quot;groupmode&quot;, &quot;layer&quot;);
+    JessyInkPresentationLayer.setAttributeNS(NSS[&quot;inkscape&quot;], &quot;label&quot;, &quot;JessyInk Presentation Layer&quot;);
+    JessyInkPresentationLayer.setAttributeNS(NSS[&quot;jessyink&quot;], &quot;presentationLayer&quot;, &quot;presentationLayer&quot;);
+    JessyInkPresentationLayer.setAttribute(&quot;id&quot;, &quot;jessyink_presentation_layer&quot;);
+    JessyInkPresentationLayer.style.display = &quot;inherit&quot;;
+    ROOT_NODE.appendChild(JessyInkPresentationLayer);
+
+    // Gathering all the information about the transitions and effects of the slides, set the background
+    // from the master slide and substitute the auto-texts.
+    for (var counter = 0; counter &lt; tempSlides.length; counter++)
+    {
+        var originalNode = document.getElementById(tempSlides[counter]);
+        originalNode.style.display = &quot;none&quot;;
+        var node = suffixNodeIds(originalNode.cloneNode(true), &quot;_&quot; + counter);
+        JessyInkPresentationLayer.appendChild(node);
+        slides[counter] = new Object();
+        slides[counter][&quot;original_element&quot;] = originalNode;
+        slides[counter][&quot;element&quot;] = node;
+
+        // Set build in transition.
+        slides[counter][&quot;transitionIn&quot;] = new Object();
+
+        var dict;
+
+        if (node.hasAttributeNS(NSS[&quot;jessyink&quot;], &quot;transitionIn&quot;))
+            dict = propStrToDict(node.getAttributeNS(NSS[&quot;jessyink&quot;], &quot;transitionIn&quot;));
+        else
+            dict = defaultTransitionInDict;
+
+        slides[counter][&quot;transitionIn&quot;][&quot;name&quot;] = dict[&quot;name&quot;];
+        slides[counter][&quot;transitionIn&quot;][&quot;options&quot;] = new Object();
+
+        for (key in dict)
+            if (key != &quot;name&quot;)
+                slides[counter][&quot;transitionIn&quot;][&quot;options&quot;][key] = dict[key];
+
+        // Set build out transition.
+        slides[counter][&quot;transitionOut&quot;] = new Object();
+
+        if (node.hasAttributeNS(NSS[&quot;jessyink&quot;], &quot;transitionOut&quot;))
+            dict = propStrToDict(node.getAttributeNS(NSS[&quot;jessyink&quot;], &quot;transitionOut&quot;));
+        else
+            dict = defaultTransitionOutDict;
+
+        slides[counter][&quot;transitionOut&quot;][&quot;name&quot;] = dict[&quot;name&quot;];
+        slides[counter][&quot;transitionOut&quot;][&quot;options&quot;] = new Object();
+
+        for (key in dict)
+            if (key != &quot;name&quot;)
+                slides[counter][&quot;transitionOut&quot;][&quot;options&quot;][key] = dict[key];
+
+        // Copy master slide content.
+        if (masterSlide)
+        {
+            var clonedNode = suffixNodeIds(masterSlide.cloneNode(true), &quot;_&quot; + counter);
+            clonedNode.removeAttributeNS(NSS[&quot;inkscape&quot;], &quot;groupmode&quot;);
+            clonedNode.removeAttributeNS(NSS[&quot;inkscape&quot;], &quot;label&quot;);
+            clonedNode.style.display = &quot;inherit&quot;;
+
+            node.insertBefore(clonedNode, node.firstChild);
+        }
+
+        // Setting clip path.
+        node.setAttribute(&quot;clip-path&quot;, &quot;url(#jessyInkSlideClipPath)&quot;);
+
+        // Substitute auto texts.
+        substituteAutoTexts(node, node.getAttributeNS(NSS[&quot;inkscape&quot;], &quot;label&quot;), counter + 1, tempSlides.length);
+
+        node.removeAttributeNS(NSS[&quot;inkscape&quot;], &quot;groupmode&quot;);
+        node.removeAttributeNS(NSS[&quot;inkscape&quot;], &quot;label&quot;);
+
+        // Set effects.
+        var tempEffects = new Array();
+        var groups = new Object();
+
+        for (var IOCounter = 0; IOCounter &lt;= 1; IOCounter++)
+        {
+            var propName = &quot;&quot;;
+            var dir = 0;
+
+            if (IOCounter == 0)
+            {
+                propName = &quot;effectIn&quot;;
+                dir = 1;
+            }
+            else if (IOCounter == 1)
+            {
+                propName = &quot;effectOut&quot;;
+                dir = -1;
+            }
+
+            var effects = getElementsByPropertyNS(node, NSS[&quot;jessyink&quot;], propName);
+
+            for (var effectCounter = 0; effectCounter &lt; effects.length; effectCounter++)
+            {
+                var element = document.getElementById(effects[effectCounter]);
+                var dict = propStrToDict(element.getAttributeNS(NSS[&quot;jessyink&quot;], propName));
+
+                // Put every element that has an effect associated with it, into its own group.
+                // Unless of course, we already put it into its own group.
+                if (!(groups[element.id]))
+                {
+                    var newGroup = document.createElementNS(NSS[&quot;svg&quot;], &quot;g&quot;);
+
+                    element.parentNode.insertBefore(newGroup, element);
+                    newGroup.appendChild(element.parentNode.removeChild(element));
+                    groups[element.id] = newGroup;
+                }
+
+                var effectDict = new Object();
+
+                effectDict[&quot;effect&quot;] = dict[&quot;name&quot;];
+                effectDict[&quot;dir&quot;] = dir;
+                effectDict[&quot;element&quot;] = groups[element.id];
+
+                for (var option in dict)
+                {
+                    if ((option != &quot;name&quot;) &amp;&amp; (option != &quot;order&quot;))
+                    {
+                        if (!effectDict[&quot;options&quot;])
+                            effectDict[&quot;options&quot;] = new Object();
+
+                        effectDict[&quot;options&quot;][option] = dict[option];
+                    }
+                }
+
+                if (!tempEffects[dict[&quot;order&quot;]])
+                    tempEffects[dict[&quot;order&quot;]] = new Array();
+
+                tempEffects[dict[&quot;order&quot;]][tempEffects[dict[&quot;order&quot;]].length] = effectDict;
+            }
+        }
+
+        // Make invisible, but keep in rendering tree to ensure that bounding box can be calculated.
+        node.setAttribute(&quot;opacity&quot;,0);
+        node.style.display = &quot;inherit&quot;;
+
+        // Create a transform group.
+        var transformGroup = document.createElementNS(NSS[&quot;svg&quot;], &quot;g&quot;);
+
+        // Add content to transform group.
+        while (node.firstChild)
+            transformGroup.appendChild(node.firstChild);
+
+        // Transfer the transform attribute from the node to the transform group.
+        if (node.getAttribute(&quot;transform&quot;))
+        {
+            transformGroup.setAttribute(&quot;transform&quot;, node.getAttribute(&quot;transform&quot;));
+            node.removeAttribute(&quot;transform&quot;);
+        }
+
+        // Create a view group.
+        var viewGroup = document.createElementNS(NSS[&quot;svg&quot;], &quot;g&quot;);
+
+        viewGroup.appendChild(transformGroup);
+        slides[counter][&quot;viewGroup&quot;] = node.appendChild(viewGroup);
+
+        // Insert background.
+        if (BACKGROUND_COLOR != null)
+        {
+            var rectNode = document.createElementNS(NSS[&quot;svg&quot;], &quot;rect&quot;);
+
+            rectNode.setAttribute(&quot;x&quot;, 0);
+            rectNode.setAttribute(&quot;y&quot;, 0);
+            rectNode.setAttribute(&quot;width&quot;, WIDTH);
+            rectNode.setAttribute(&quot;height&quot;, HEIGHT);
+            rectNode.setAttribute(&quot;id&quot;, &quot;jessyInkBackground&quot; + counter);
+            rectNode.setAttribute(&quot;fill&quot;, BACKGROUND_COLOR);
+
+            slides[counter][&quot;viewGroup&quot;].insertBefore(rectNode, slides[counter][&quot;viewGroup&quot;].firstChild);
+        }
+
+        // Set views.
+        var tempViews = new Array();
+        var views = getElementsByPropertyNS(node, NSS[&quot;jessyink&quot;], &quot;view&quot;);
+        var matrixOld = (new matrixSVG()).fromElements(1, 0, 0, 0, 1, 0, 0, 0, 1);
+
+        // Set initial view even if there are no other views.
+        slides[counter][&quot;viewGroup&quot;].setAttribute(&quot;transform&quot;, matrixOld.toAttribute());
+        slides[counter].initialView = matrixOld.toAttribute();
+
+        for (var viewCounter = 0; viewCounter &lt; views.length; viewCounter++)
+        {
+            var element = document.getElementById(views[viewCounter]);
+            var dict = propStrToDict(element.getAttributeNS(NSS[&quot;jessyink&quot;], &quot;view&quot;));
+
+            if (dict[&quot;order&quot;] == 0)
+            {
+                matrixOld = pointMatrixToTransformation(rectToMatrix(element)).mult((new matrixSVG()).fromSVGMatrix(slides[counter].viewGroup.getScreenCTM()).inv().mult((new matrixSVG()).fromSVGMatrix(element.parentNode.getScreenCTM())).inv());
+                slides[counter].initialView = matrixOld.toAttribute();
+            }
+            else
+            {
+                var effectDict = new Object();
+
+                effectDict[&quot;effect&quot;] = dict[&quot;name&quot;];
+                effectDict[&quot;dir&quot;] = 1;
+                effectDict[&quot;element&quot;] = slides[counter][&quot;viewGroup&quot;];
+                effectDict[&quot;order&quot;] = dict[&quot;order&quot;];
+
+                for (var option in dict)
+                {
+                    if ((option != &quot;name&quot;) &amp;&amp; (option != &quot;order&quot;))
+                    {
+                        if (!effectDict[&quot;options&quot;])
+                            effectDict[&quot;options&quot;] = new Object();
+
+                        effectDict[&quot;options&quot;][option] = dict[option];
+                    }
+                }
+
+                effectDict[&quot;options&quot;][&quot;matrixNew&quot;] = pointMatrixToTransformation(rectToMatrix(element)).mult((new matrixSVG()).fromSVGMatrix(slides[counter].viewGroup.getScreenCTM()).inv().mult((new matrixSVG()).fromSVGMatrix(element.parentNode.getScreenCTM())).inv());
+
+                tempViews[dict[&quot;order&quot;]] = effectDict;
+            }
+
+            // Remove element.
+            element.parentNode.removeChild(element);
+        }
+
+        // Consolidate view array and append it to the effect array.
+        if (tempViews.length &gt; 0)
+        {
+            for (var viewCounter = 0; viewCounter &lt; tempViews.length; viewCounter++)
+            {
+                if (tempViews[viewCounter])
+                {
+                    tempViews[viewCounter][&quot;options&quot;][&quot;matrixOld&quot;] = matrixOld;
+                    matrixOld = tempViews[viewCounter][&quot;options&quot;][&quot;matrixNew&quot;];
+
+                    if (!tempEffects[tempViews[viewCounter][&quot;order&quot;]])
+                        tempEffects[tempViews[viewCounter][&quot;order&quot;]] = new Array();
+
+                    tempEffects[tempViews[viewCounter][&quot;order&quot;]][tempEffects[tempViews[viewCounter][&quot;order&quot;]].length] = tempViews[viewCounter];
+                }
+            }
+        }
+
+        // Set consolidated effect array.
+        if (tempEffects.length &gt; 0)
+        {
+            slides[counter][&quot;effects&quot;] = new Array();
+
+            for (var effectCounter = 0; effectCounter &lt; tempEffects.length; effectCounter++)
+            {
+                if (tempEffects[effectCounter])
+                    slides[counter][&quot;effects&quot;][slides[counter][&quot;effects&quot;].length] = tempEffects[effectCounter];
+            }
+        }
+
+        node.setAttribute(&quot;onmouseover&quot;, &quot;if ((currentMode == INDEX_MODE) &amp;&amp; ( activeSlide != &quot; + counter + &quot;)) { indexSetActiveSlide(&quot; + counter + &quot;); };&quot;);
+
+        // Set visibility for initial state.
+        if (counter == activeSlide)
+        {
+            node.style.display = &quot;inherit&quot;;
+            node.setAttribute(&quot;opacity&quot;,1);
+        }
+        else
+        {
+            node.style.display = &quot;none&quot;;
+            node.setAttribute(&quot;opacity&quot;,0);
+        }
+    }
+
+    // Set key handler.
+    var jessyInkObjects = document.getElementsByTagNameNS(NSS[&quot;svg&quot;], &quot;g&quot;);
+
+    for (var counter = 0; counter &lt; jessyInkObjects.length; counter++)
+    {
+        var elem = jessyInkObjects[counter];
+
+        if (elem.getAttributeNS(NSS[&quot;jessyink&quot;], &quot;customKeyBindings&quot;))
+        {
+            if (elem.getCustomKeyBindings != undefined)
+                keyCodeDictionary = elem.getCustomKeyBindings();
+
+            if (elem.getCustomCharBindings != undefined)
+                charCodeDictionary = elem.getCustomCharBindings();
+        }
+    }
+
+    // Set mouse handler.
+    var jessyInkMouseHandler = document.getElementsByTagNameNS(NSS[&quot;jessyink&quot;], &quot;mousehandler&quot;);
+
+    for (var counter = 0; counter &lt; jessyInkMouseHandler.length; counter++)
+    {
+        var elem = jessyInkMouseHandler[counter];
+
+        if (elem.getMouseHandler != undefined)
+        {
+            var tempDict = elem.getMouseHandler();
+
+            for (mode in tempDict)
+            {
+                if (!mouseHandlerDictionary[mode])
+                    mouseHandlerDictionary[mode] = new Object();
+
+                for (handler in tempDict[mode])
+                    mouseHandlerDictionary[mode][handler] = tempDict[mode][handler];
+            }
+        }
+    }
+
+    // Check effect number.
+    if ((activeEffect &lt; 0) || (!slides[activeSlide].effects))
+    {
+        activeEffect = 0;
+    }
+    else if (activeEffect &gt; slides[activeSlide].effects.length)
+    {
+        activeEffect = slides[activeSlide].effects.length;
+    }
+
+    createProgressBar(JessyInkPresentationLayer);
+    hideProgressBar();
+    setProgressBarValue(activeSlide);
+    setTimeIndicatorValue(0);
+    setInterval(&quot;updateTimer()&quot;, 1000);
+    setSlideToState(activeSlide, activeEffect);
+    jessyInkInitialised = true;
+}
+
+/** Function to substitute the auto-texts.
+ *
+ *  @param node the node
+ *  @param slideName name of the slide the node is on
+ *  @param slideNumber number of the slide the node is on
+ *  @param numberOfSlides number of slides in the presentation
+ */
+function substituteAutoTexts(node, slideName, slideNumber, numberOfSlides)
+{
+    var texts = node.getElementsByTagNameNS(NSS[&quot;svg&quot;], &quot;tspan&quot;);
+
+    for (var textCounter = 0; textCounter &lt; texts.length; textCounter++)
+    {
+        if (texts[textCounter].getAttributeNS(NSS[&quot;jessyink&quot;], &quot;autoText&quot;) == &quot;slideNumber&quot;)
+            texts[textCounter].firstChild.nodeValue = slideNumber;
+        else if (texts[textCounter].getAttributeNS(NSS[&quot;jessyink&quot;], &quot;autoText&quot;) == &quot;numberOfSlides&quot;)
+            texts[textCounter].firstChild.nodeValue = numberOfSlides;
+        else if (texts[textCounter].getAttributeNS(NSS[&quot;jessyink&quot;], &quot;autoText&quot;) == &quot;slideTitle&quot;)
+            texts[textCounter].firstChild.nodeValue = slideName;
+    }
+}
+
+/** Convenience function to get an element depending on whether it has a property with a particular name.
+ *    This function emulates some dearly missed XPath functionality.
+ *
+ *  @param node the node
+ *  @param namespace namespace of the attribute
+ *  @param name attribute name
+ */
+function getElementsByPropertyNS(node, namespace, name)
+{
+    var elems = new Array();
+
+    if (node.getAttributeNS(namespace, name))
+        elems.push(node.getAttribute(&quot;id&quot;));
+
+    for (var counter = 0; counter &lt; node.childNodes.length; counter++)
+    {
+        if (node.childNodes[counter].nodeType == 1)
+            elems = elems.concat(getElementsByPropertyNS(node.childNodes[counter], namespace, name));
+    }
+
+    return elems;
+}
+
+/** Function to dispatch the next effect, if there is none left, change the slide.
+ *
+ *  @param dir direction of the change (1 = forwards, -1 = backwards)
+ */
+function dispatchEffects(dir)
+{
+    if (slides[activeSlide][&quot;effects&quot;] &amp;&amp; (((dir == 1) &amp;&amp; (activeEffect &lt; slides[activeSlide][&quot;effects&quot;].length)) || ((dir == -1) &amp;&amp; (activeEffect &gt; 0))))
+    {
+        processingEffect = true;
+
+        if (dir == 1)
+        {
+            effectArray = slides[activeSlide][&quot;effects&quot;][activeEffect];
+            activeEffect += dir;
+        }
+        else if (dir == -1)
+        {
+            activeEffect += dir;
+            effectArray = slides[activeSlide][&quot;effects&quot;][activeEffect];
+        }
+
+        transCounter = 0;
+        startTime = (new Date()).getTime();
+        lastFrameTime = null;
+        effect(dir);
+    }
+    else if (((dir == 1) &amp;&amp; (activeSlide &lt; (slides.length - 1))) || (((dir == -1) &amp;&amp; (activeSlide &gt; 0))))
+    {
+        changeSlide(dir);
+    }
+}
+
+/** Function to skip effects and directly either put the slide into start or end state or change slides.
+ *
+ *  @param dir direction of the change (1 = forwards, -1 = backwards)
+ */
+function skipEffects(dir)
+{
+    if (slides[activeSlide][&quot;effects&quot;] &amp;&amp; (((dir == 1) &amp;&amp; (activeEffect &lt; slides[activeSlide][&quot;effects&quot;].length)) || ((dir == -1) &amp;&amp; (activeEffect &gt; 0))))
+    {
+        processingEffect = true;
+
+        if (slides[activeSlide][&quot;effects&quot;] &amp;&amp; (dir == 1))
+            activeEffect = slides[activeSlide][&quot;effects&quot;].length;
+        else
+            activeEffect = 0;
+
+        if (dir == 1)
+            setSlideToState(activeSlide, STATE_END);
+        else
+            setSlideToState(activeSlide, STATE_START);
+
+        processingEffect = false;
+    }
+    else if (((dir == 1) &amp;&amp; (activeSlide &lt; (slides.length - 1))) || (((dir == -1) &amp;&amp; (activeSlide &gt; 0))))
+    {
+        changeSlide(dir);
+    }
+}
+
+/** Function to change between slides.
+ *
+ *  @param dir direction (1 = forwards, -1 = backwards)
+ */
+function changeSlide(dir)
+{
+    processingEffect = true;
+    effectArray = new Array();
+
+    effectArray[0] = new Object();
+    if (dir == 1)
+    {
+        effectArray[0][&quot;effect&quot;] = slides[activeSlide][&quot;transitionOut&quot;][&quot;name&quot;];
+        effectArray[0][&quot;options&quot;] = slides[activeSlide][&quot;transitionOut&quot;][&quot;options&quot;];
+        effectArray[0][&quot;dir&quot;] = -1;
+    }
+    else if (dir == -1)
+    {
+        effectArray[0][&quot;effect&quot;] = slides[activeSlide][&quot;transitionIn&quot;][&quot;name&quot;];
+        effectArray[0][&quot;options&quot;] = slides[activeSlide][&quot;transitionIn&quot;][&quot;options&quot;];
+        effectArray[0][&quot;dir&quot;] = 1;
+    }
+    effectArray[0][&quot;element&quot;] = slides[activeSlide][&quot;element&quot;];
+
+    activeSlide += dir;
+    setProgressBarValue(activeSlide);
+
+    effectArray[1] = new Object();
+
+    if (dir == 1)
+    {
+        effectArray[1][&quot;effect&quot;] = slides[activeSlide][&quot;transitionIn&quot;][&quot;name&quot;];
+        effectArray[1][&quot;options&quot;] = slides[activeSlide][&quot;transitionIn&quot;][&quot;options&quot;];
+        effectArray[1][&quot;dir&quot;] = 1;
+    }
+    else if (dir == -1)
+    {
+        effectArray[1][&quot;effect&quot;] = slides[activeSlide][&quot;transitionOut&quot;][&quot;name&quot;];
+        effectArray[1][&quot;options&quot;] = slides[activeSlide][&quot;transitionOut&quot;][&quot;options&quot;];
+        effectArray[1][&quot;dir&quot;] = -1;
+    }
+
+    effectArray[1][&quot;element&quot;] = slides[activeSlide][&quot;element&quot;];
+
+    if (slides[activeSlide][&quot;effects&quot;] &amp;&amp; (dir == -1))
+        activeEffect = slides[activeSlide][&quot;effects&quot;].length;
+    else
+        activeEffect = 0;
+
+    if (dir == -1)
+        setSlideToState(activeSlide, STATE_END);
+    else
+        setSlideToState(activeSlide, STATE_START);
+
+    transCounter = 0;
+    startTime = (new Date()).getTime();
+    lastFrameTime = null;
+    effect(dir);
+}
+
+/** Function to toggle between index and slide mode.
+*/
+function toggleSlideIndex()
+{
+    var suspendHandle = ROOT_NODE.suspendRedraw(500);
+
+    if (currentMode == SLIDE_MODE)
+    {
+        hideProgressBar();
+        INDEX_OFFSET = -1;
+        indexSetPageSlide(activeSlide);
+        currentMode = INDEX_MODE;
+    }
+    else if (currentMode == INDEX_MODE)
+    {
+        for (var counter = 0; counter &lt; slides.length; counter++)
+        {
+            slides[counter][&quot;element&quot;].setAttribute(&quot;transform&quot;,&quot;scale(1)&quot;);
+
+            if (counter == activeSlide)
+            {
+                slides[counter][&quot;element&quot;].style.display = &quot;inherit&quot;;
+                slides[counter][&quot;element&quot;].setAttribute(&quot;opacity&quot;,1);
+                activeEffect = 0;
+            }
+            else
+            {
+                slides[counter][&quot;element&quot;].setAttribute(&quot;opacity&quot;,0);
+                slides[counter][&quot;element&quot;].style.display = &quot;none&quot;;
+            }
+        }
+        currentMode = SLIDE_MODE;
+        setSlideToState(activeSlide, STATE_START);
+        setProgressBarValue(activeSlide);
+
+        if (progress_bar_visible)
+        {
+            showProgressBar();
+        }
+    }
+
+    ROOT_NODE.unsuspendRedraw(suspendHandle);
+    ROOT_NODE.forceRedraw();
+}
+
+/** Function to run an effect.
+ *
+ *  @param dir direction in which to play the effect (1 = forwards, -1 = backwards)
+ */
+function effect(dir)
+{
+    var done = true;
+
+    var suspendHandle = ROOT_NODE.suspendRedraw(200);
+
+    for (var counter = 0; counter &lt; effectArray.length; counter++)
+    {
+        if (effectArray[counter][&quot;effect&quot;] == &quot;fade&quot;)
+            done &amp;= fade(parseInt(effectArray[counter][&quot;dir&quot;]) * dir, effectArray[counter][&quot;element&quot;], transCounter, effectArray[counter][&quot;options&quot;]);
+        else if (effectArray[counter][&quot;effect&quot;] == &quot;appear&quot;)
+            done &amp;= appear(parseInt(effectArray[counter][&quot;dir&quot;]) * dir, effectArray[counter][&quot;element&quot;], transCounter, effectArray[counter][&quot;options&quot;]);
+        else if (effectArray[counter][&quot;effect&quot;] == &quot;pop&quot;)
+            done &amp;= pop(parseInt(effectArray[counter][&quot;dir&quot;]) * dir, effectArray[counter][&quot;element&quot;], transCounter, effectArray[counter][&quot;options&quot;]);
+        else if (effectArray[counter][&quot;effect&quot;] == &quot;view&quot;)
+            done &amp;= view(parseInt(effectArray[counter][&quot;dir&quot;]) * dir, effectArray[counter][&quot;element&quot;], transCounter, effectArray[counter][&quot;options&quot;]);
+    }
+
+    ROOT_NODE.unsuspendRedraw(suspendHandle);
+    ROOT_NODE.forceRedraw();
+
+    if (!done)
+    {
+        var currentTime = (new Date()).getTime();
+        var timeDiff = 1;
+
+        transCounter = currentTime - startTime;
+
+        if (lastFrameTime != null)
+        {
+            timeDiff = timeStep - (currentTime - lastFrameTime);
+
+            if (timeDiff &lt;= 0)
+                timeDiff = 1;
+        }
+
+        lastFrameTime = currentTime;
+
+        window.setTimeout(&quot;effect(&quot; + dir + &quot;)&quot;, timeDiff);
+    }
+    else
+    {
+        window.location.hash = (activeSlide + 1) + '_' + activeEffect;
+        processingEffect = false;
+    }
+}
+
+/** Function to display the index sheet.
+ *
+ *  @param offsetNumber offset number
+ */
+function displayIndex(offsetNumber)
+{
+    var offsetX = 0;
+    var offsetY = 0;
+
+    if (offsetNumber &lt; 0)
+        offsetNumber = 0;
+    else if (offsetNumber &gt;= slides.length)
+        offsetNumber = slides.length - 1;
+
+    for (var counter = 0; counter &lt; slides.length; counter++)
+    {
+        if ((counter &lt; offsetNumber) || (counter &gt; offsetNumber + INDEX_COLUMNS * INDEX_COLUMNS - 1))
+        {
+            slides[counter][&quot;element&quot;].setAttribute(&quot;opacity&quot;,0);
+            slides[counter][&quot;element&quot;].style.display = &quot;none&quot;;
+        }
+        else
+        {
+            offsetX = ((counter - offsetNumber) % INDEX_COLUMNS) * WIDTH;
+            offsetY = Math.floor((counter - offsetNumber) / INDEX_COLUMNS) * HEIGHT;
+
+            slides[counter][&quot;element&quot;].setAttribute(&quot;transform&quot;,&quot;scale(&quot;+1/INDEX_COLUMNS+&quot;) translate(&quot;+offsetX+&quot;,&quot;+offsetY+&quot;)&quot;);
+            slides[counter][&quot;element&quot;].style.display = &quot;inherit&quot;;
+            slides[counter][&quot;element&quot;].setAttribute(&quot;opacity&quot;,0.5);
+        }
+
+        setSlideToState(counter, STATE_END);
+    }
+
+    //do we need to save the current offset?
+    if (INDEX_OFFSET != offsetNumber)
+        INDEX_OFFSET = offsetNumber;
+}
+
+/** Function to set the active slide in the slide view.
+ *
+ *  @param nbr index of the active slide
+ */
+function slideSetActiveSlide(nbr)
+{
+    if (nbr &gt;= slides.length)
+        nbr = slides.length - 1;
+    else if (nbr &lt; 0)
+        nbr = 0;
+
+    slides[activeSlide][&quot;element&quot;].setAttribute(&quot;opacity&quot;,0);
+    slides[activeSlide][&quot;element&quot;].style.display = &quot;none&quot;;
+
+    activeSlide = parseInt(nbr);
+
+    setSlideToState(activeSlide, STATE_START);
+    slides[activeSlide][&quot;element&quot;].style.display = &quot;inherit&quot;;
+    slides[activeSlide][&quot;element&quot;].setAttribute(&quot;opacity&quot;,1);
+
+    activeEffect = 0;
+    setProgressBarValue(nbr);
+}
+
+/** Function to set the active slide in the index view.
+ *
+ *  @param nbr index of the active slide
+ */
+function indexSetActiveSlide(nbr)
+{
+    if (nbr &gt;= slides.length)
+        nbr = slides.length - 1;
+    else if (nbr &lt; 0)
+        nbr = 0;
+
+    slides[activeSlide][&quot;element&quot;].setAttribute(&quot;opacity&quot;,0.5);
+
+    activeSlide = parseInt(nbr);
+    window.location.hash = (activeSlide + 1) + '_0';
+
+    slides[activeSlide][&quot;element&quot;].setAttribute(&quot;opacity&quot;,1);
+}
+
+/** Function to set the page and active slide in index view.
+ *
+ *  @param nbr index of the active slide
+ *
+ *  NOTE: To force a redraw,
+ *  set INDEX_OFFSET to -1 before calling indexSetPageSlide().
+ *
+ *  This is necessary for zooming (otherwise the index might not
+ *  get redrawn) and when switching to index mode.
+ *
+ *  INDEX_OFFSET = -1
+ *  indexSetPageSlide(activeSlide);
+ */
+function indexSetPageSlide(nbr)
+{
+    if (nbr &gt;= slides.length)
+        nbr = slides.length - 1;
+    else if (nbr &lt; 0)
+        nbr = 0;
+
+    //calculate the offset
+    var offset = nbr - nbr % (INDEX_COLUMNS * INDEX_COLUMNS);
+
+    if (offset &lt; 0)
+        offset = 0;
+
+    //if different from kept offset, then record and change the page
+    if (offset != INDEX_OFFSET)
+    {
+        INDEX_OFFSET = offset;
+        displayIndex(INDEX_OFFSET);
+    }
+
+    //set the active slide
+    indexSetActiveSlide(nbr);
+}
+
+/** Event handler for key press.
+ *
+ *  @param e the event
+ */
+function keydown(e)
+{
+    if (!e)
+        e = window.event;
+
+    code = e.keyCode || e.charCode;
+
+    if (!processingEffect &amp;&amp; keyCodeDictionary[currentMode] &amp;&amp; keyCodeDictionary[currentMode][code])
+        return keyCodeDictionary[currentMode][code]();
+    else
+        document.onkeypress = keypress;
+}
+// Set event handler for key down.
+document.onkeydown = keydown;
+
+/** Event handler for key press.
+ *
+ *  @param e the event
+ */
+function keypress(e)
+{
+    document.onkeypress = null;
+
+    if (!e)
+        e = window.event;
+
+    str = String.fromCharCode(e.keyCode || e.charCode);
+
+    if (!processingEffect &amp;&amp; charCodeDictionary[currentMode] &amp;&amp; charCodeDictionary[currentMode][str])
+        return charCodeDictionary[currentMode][str]();
+}
+
+/** Function to supply the default char code dictionary.
+ *
+ * @returns default char code dictionary
+ */
+function getDefaultCharCodeDictionary()
+{
+    var charCodeDict = new Object();
+
+    charCodeDict[SLIDE_MODE] = new Object();
+    charCodeDict[INDEX_MODE] = new Object();
+    charCodeDict[DRAWING_MODE] = new Object();
+
+    charCodeDict[SLIDE_MODE][&quot;i&quot;] = function () { return toggleSlideIndex(); };
+    charCodeDict[SLIDE_MODE][&quot;d&quot;] = function () { return slideSwitchToDrawingMode(); };
+    charCodeDict[SLIDE_MODE][&quot;D&quot;] = function () { return slideQueryDuration(); };
+    charCodeDict[SLIDE_MODE][&quot;n&quot;] = function () { return slideAddSlide(activeSlide); };
+    charCodeDict[SLIDE_MODE][&quot;p&quot;] = function () { return slideToggleProgressBarVisibility(); };
+    charCodeDict[SLIDE_MODE][&quot;t&quot;] = function () { return slideResetTimer(); };
+    charCodeDict[SLIDE_MODE][&quot;e&quot;] = function () { return slideUpdateExportLayer(); };
+
+    charCodeDict[DRAWING_MODE][&quot;d&quot;] = function () { return drawingSwitchToSlideMode(); };
+    charCodeDict[DRAWING_MODE][&quot;0&quot;] = function () { return drawingResetPathWidth(); };
+    charCodeDict[DRAWING_MODE][&quot;1&quot;] = function () { return drawingSetPathWidth(1.0); };
+    charCodeDict[DRAWING_MODE][&quot;3&quot;] = function () { return drawingSetPathWidth(3.0); };
+    charCodeDict[DRAWING_MODE][&quot;5&quot;] = function () { return drawingSetPathWidth(5.0); };
+    charCodeDict[DRAWING_MODE][&quot;7&quot;] = function () { return drawingSetPathWidth(7.0); };
+    charCodeDict[DRAWING_MODE][&quot;9&quot;] = function () { return drawingSetPathWidth(9.0); };
+    charCodeDict[DRAWING_MODE][&quot;b&quot;] = function () { return drawingSetPathColour(&quot;blue&quot;); };
+    charCodeDict[DRAWING_MODE][&quot;c&quot;] = function () { return drawingSetPathColour(&quot;cyan&quot;); };
+    charCodeDict[DRAWING_MODE][&quot;g&quot;] = function () { return drawingSetPathColour(&quot;green&quot;); };
+    charCodeDict[DRAWING_MODE][&quot;k&quot;] = function () { return drawingSetPathColour(&quot;black&quot;); };
+    charCodeDict[DRAWING_MODE][&quot;m&quot;] = function () { return drawingSetPathColour(&quot;magenta&quot;); };
+    charCodeDict[DRAWING_MODE][&quot;o&quot;] = function () { return drawingSetPathColour(&quot;orange&quot;); };
+    charCodeDict[DRAWING_MODE][&quot;r&quot;] = function () { return drawingSetPathColour(&quot;red&quot;); };
+    charCodeDict[DRAWING_MODE][&quot;w&quot;] = function () { return drawingSetPathColour(&quot;white&quot;); };
+    charCodeDict[DRAWING_MODE][&quot;y&quot;] = function () { return drawingSetPathColour(&quot;yellow&quot;); };
+    charCodeDict[DRAWING_MODE][&quot;z&quot;] = function () { return drawingUndo(); };
+
+    charCodeDict[INDEX_MODE][&quot;i&quot;] = function () { return toggleSlideIndex(); };
+    charCodeDict[INDEX_MODE][&quot;-&quot;] = function () { return indexDecreaseNumberOfColumns(); };
+    charCodeDict[INDEX_MODE][&quot;=&quot;] = function () { return indexIncreaseNumberOfColumns(); };
+    charCodeDict[INDEX_MODE][&quot;+&quot;] = function () { return indexIncreaseNumberOfColumns(); };
+    charCodeDict[INDEX_MODE][&quot;0&quot;] = function () { return indexResetNumberOfColumns(); };
+
+    return charCodeDict;
+}
+
+/** Function to supply the default key code dictionary.
+ *
+ * @returns default key code dictionary
+ */
+function getDefaultKeyCodeDictionary()
+{
+    var keyCodeDict = new Object();
+
+    keyCodeDict[SLIDE_MODE] = new Object();
+    keyCodeDict[INDEX_MODE] = new Object();
+    keyCodeDict[DRAWING_MODE] = new Object();
+
+    keyCodeDict[SLIDE_MODE][LEFT_KEY] = function() { return dispatchEffects(-1); };
+    keyCodeDict[SLIDE_MODE][RIGHT_KEY] = function() { return dispatchEffects(1); };
+    keyCodeDict[SLIDE_MODE][UP_KEY] = function() { return skipEffects(-1); };
+    keyCodeDict[SLIDE_MODE][DOWN_KEY] = function() { return skipEffects(1); };
+    keyCodeDict[SLIDE_MODE][PAGE_UP_KEY] = function() { return dispatchEffects(-1); };
+    keyCodeDict[SLIDE_MODE][PAGE_DOWN_KEY] = function() { return dispatchEffects(1); };
+    keyCodeDict[SLIDE_MODE][HOME_KEY] = function() { return slideSetActiveSlide(0); };
+    keyCodeDict[SLIDE_MODE][END_KEY] = function() { return slideSetActiveSlide(slides.length - 1); };
+    keyCodeDict[SLIDE_MODE][SPACE_KEY] = function() { return dispatchEffects(1); };
+
+    keyCodeDict[INDEX_MODE][LEFT_KEY] = function() { return indexSetPageSlide(activeSlide - 1); };
+    keyCodeDict[INDEX_MODE][RIGHT_KEY] = function() { return indexSetPageSlide(activeSlide + 1); };
+    keyCodeDict[INDEX_MODE][UP_KEY] = function() { return indexSetPageSlide(activeSlide - INDEX_COLUMNS); };
+    keyCodeDict[INDEX_MODE][DOWN_KEY] = function() { return indexSetPageSlide(activeSlide + INDEX_COLUMNS); };
+    keyCodeDict[INDEX_MODE][PAGE_UP_KEY] = function() { return indexSetPageSlide(activeSlide - INDEX_COLUMNS * INDEX_COLUMNS); };
+    keyCodeDict[INDEX_MODE][PAGE_DOWN_KEY] = function() { return indexSetPageSlide(activeSlide + INDEX_COLUMNS * INDEX_COLUMNS); };
+    keyCodeDict[INDEX_MODE][HOME_KEY] = function() { return indexSetPageSlide(0); };
+    keyCodeDict[INDEX_MODE][END_KEY] = function() { return indexSetPageSlide(slides.length - 1); };
+    keyCodeDict[INDEX_MODE][ENTER_KEY] = function() { return toggleSlideIndex(); };
+
+    keyCodeDict[DRAWING_MODE][ESCAPE_KEY] = function () { return drawingSwitchToSlideMode(); };
+
+    return keyCodeDict;
+}
+
+/** Function to handle all mouse events.
+ *
+ *    @param    evnt    event
+ *    @param    action    type of event (e.g. mouse up, mouse wheel)
+ */
+function mouseHandlerDispatch(evnt, action)
+{
+    if (!evnt)
+        evnt = window.event;
+
+    var retVal = true;
+
+    if (!processingEffect &amp;&amp; mouseHandlerDictionary[currentMode] &amp;&amp; mouseHandlerDictionary[currentMode][action])
+    {
+        var subRetVal = mouseHandlerDictionary[currentMode][action](evnt);
+
+        if (subRetVal != null &amp;&amp; subRetVal != undefined)
+            retVal = subRetVal;
+    }
+
+    if (evnt.preventDefault &amp;&amp; !retVal)
+        evnt.preventDefault();
+
+    evnt.returnValue = retVal;
+
+    return retVal;
+}
+
+// Set mouse event handler.
+document.onmousedown = function(e) { return mouseHandlerDispatch(e, MOUSE_DOWN); };
+document.onmouseup = function(e) { return mouseHandlerDispatch(e, MOUSE_UP); };
+document.onmousemove = function(e) { return mouseHandlerDispatch(e, MOUSE_MOVE); };
+
+// Moz
+if (window.addEventListener)
+{
+    window.addEventListener('DOMMouseScroll', function(e) { return mouseHandlerDispatch(e, MOUSE_WHEEL); }, false);
+}
+
+// Opera Safari OK - may not work in IE
+window.onmousewheel = function(e) { return mouseHandlerDispatch(e, MOUSE_WHEEL); };
+
+/** Function to supply the default mouse handler dictionary.
+ *
+ * @returns default mouse handler dictionary
+ */
+function getDefaultMouseHandlerDictionary()
+{
+    var mouseHandlerDict = new Object();
+
+    mouseHandlerDict[SLIDE_MODE] = new Object();
+    mouseHandlerDict[INDEX_MODE] = new Object();
+    mouseHandlerDict[DRAWING_MODE] = new Object();
+
+    mouseHandlerDict[SLIDE_MODE][MOUSE_DOWN] = function(evnt) { return dispatchEffects(1); };
+    mouseHandlerDict[SLIDE_MODE][MOUSE_WHEEL] = function(evnt) { return slideMousewheel(evnt); };
+
+    mouseHandlerDict[INDEX_MODE][MOUSE_DOWN] = function(evnt) { return toggleSlideIndex(); };
+
+    mouseHandlerDict[DRAWING_MODE][MOUSE_DOWN] = function(evnt) { return drawingMousedown(evnt); };
+    mouseHandlerDict[DRAWING_MODE][MOUSE_UP] = function(evnt) { return drawingMouseup(evnt); };
+    mouseHandlerDict[DRAWING_MODE][MOUSE_MOVE] = function(evnt) { return drawingMousemove(evnt); };
+
+    return mouseHandlerDict;
+}
+
+/** Function to switch from slide mode to drawing mode.
+*/
+function slideSwitchToDrawingMode()
+{
+    currentMode = DRAWING_MODE;
+
+    var tempDict;
+
+    if (ROOT_NODE.hasAttribute(&quot;style&quot;))
+        tempDict = propStrToDict(ROOT_NODE.getAttribute(&quot;style&quot;));
+    else
+        tempDict = new Object();
+
+    tempDict[&quot;cursor&quot;] = &quot;crosshair&quot;;
+    ROOT_NODE.setAttribute(&quot;style&quot;, dictToPropStr(tempDict));
+}
+
+/** Function to switch from drawing mode to slide mode.
+*/
+function drawingSwitchToSlideMode()
+{
+    currentMode = SLIDE_MODE;
+
+    var tempDict;
+
+    if (ROOT_NODE.hasAttribute(&quot;style&quot;))
+        tempDict = propStrToDict(ROOT_NODE.getAttribute(&quot;style&quot;));
+    else
+        tempDict = new Object();
+
+    tempDict[&quot;cursor&quot;] = &quot;auto&quot;;
+    ROOT_NODE.setAttribute(&quot;style&quot;, dictToPropStr(tempDict));
+}
+
+/** Function to decrease the number of columns in index mode.
+*/
+function indexDecreaseNumberOfColumns()
+{
+    if (INDEX_COLUMNS &gt;= 3)
+    {
+        INDEX_COLUMNS -= 1;
+        INDEX_OFFSET = -1
+            indexSetPageSlide(activeSlide);
+    }
+}
+
+/** Function to increase the number of columns in index mode.
+*/
+function indexIncreaseNumberOfColumns()
+{
+    if (INDEX_COLUMNS &lt; 7)
+    {
+        INDEX_COLUMNS += 1;
+        INDEX_OFFSET = -1
+            indexSetPageSlide(activeSlide);
+    }
+}
+
+/** Function to reset the number of columns in index mode.
+*/
+function indexResetNumberOfColumns()
+{
+    if (INDEX_COLUMNS != INDEX_COLUMNS_DEFAULT)
+    {
+        INDEX_COLUMNS = INDEX_COLUMNS_DEFAULT;
+        INDEX_OFFSET = -1
+            indexSetPageSlide(activeSlide);
+    }
+}
+
+/** Function to reset path width in drawing mode.
+*/
+function drawingResetPathWidth()
+{
+    path_width = path_width_default;
+    set_path_paint_width();
+}
+
+/** Function to set path width in drawing mode.
+ *
+ * @param width new path width
+ */
+function drawingSetPathWidth(width)
+{
+    path_width = width;
+    set_path_paint_width();
+}
+
+/** Function to set path colour in drawing mode.
+ *
+ * @param colour new path colour
+ */
+function drawingSetPathColour(colour)
+{
+    path_colour = colour;
+}
+
+/** Function to query the duration of the presentation from the user in slide mode.
+*/
+function slideQueryDuration()
+{
+    var new_duration = prompt(&quot;Length of presentation in minutes?&quot;, timer_duration);
+
+    if ((new_duration != null) &amp;&amp; (new_duration != ''))
+    {
+        timer_duration = new_duration;
+    }
+
+    updateTimer();
+}
+
+/** Function to add new slide in slide mode.
+ *
+ * @param afterSlide after which slide to insert the new one
+ */
+function slideAddSlide(afterSlide)
+{
+    addSlide(afterSlide);
+    slideSetActiveSlide(afterSlide + 1);
+    updateTimer();
+}
+
+/** Function to toggle the visibility of the progress bar in slide mode.
+*/
+function slideToggleProgressBarVisibility()
+{
+    if (progress_bar_visible)
+    {
+        progress_bar_visible = false;
+        hideProgressBar();
+    }
+    else
+    {
+        progress_bar_visible = true;
+        showProgressBar();
+    }
+}
+
+/** Function to reset the timer in slide mode.
+*/
+function slideResetTimer()
+{
+    timer_start = timer_elapsed;
+    updateTimer();
+}
+
+/** Convenience function to pad a string with zero in front up to a certain length.
+ */
+function padString(str, len)
+{
+    var outStr = str;
+
+    while (outStr.length &lt; len)
+    {
+        outStr = '0' + outStr;
+    }
+
+    return outStr;
+}
+
+/** Function to update the export layer.
+ */
+function slideUpdateExportLayer()
+{
+    // Suspend redraw since we are going to mess with the slides.
+    var suspendHandle = ROOT_NODE.suspendRedraw(2000);
+
+    var tmpActiveSlide = activeSlide;
+    var tmpActiveEffect = activeEffect;
+    var exportedLayers = new Array();
+
+    for (var counterSlides = 0; counterSlides &lt; slides.length; counterSlides++)
+    {
+        var exportNode;
+
+        setSlideToState(counterSlides, STATE_START);
+
+        var maxEffect = 0;
+
+        if (slides[counterSlides].effects)
+        {
+            maxEffect = slides[counterSlides].effects.length;
+        }
+
+        exportNode = slides[counterSlides].element.cloneNode(true);
+        exportNode.setAttributeNS(NSS[&quot;inkscape&quot;], &quot;groupmode&quot;, &quot;layer&quot;);
+        exportNode.setAttributeNS(NSS[&quot;inkscape&quot;], &quot;label&quot;, &quot;slide_&quot; + padString((counterSlides + 1).toString(), slides.length.toString().length) + &quot;_effect_&quot; + padString(&quot;0&quot;, maxEffect.toString().length));
+
+        exportedLayers.push(exportNode);
+
+        if (slides[counterSlides][&quot;effects&quot;])
+        {
+            for (var counter = 0; counter &lt; slides[counterSlides][&quot;effects&quot;].length; counter++)
+            {
+                for (var subCounter = 0; subCounter &lt; slides[counterSlides][&quot;effects&quot;][counter].length; subCounter++)
+                {
+                    var effect = slides[counterSlides][&quot;effects&quot;][counter][subCounter];
+                    if (effect[&quot;effect&quot;] == &quot;fade&quot;)
+                        fade(parseInt(effect[&quot;dir&quot;]), effect[&quot;element&quot;], STATE_END, effect[&quot;options&quot;]);
+                    else if (effect[&quot;effect&quot;] == &quot;appear&quot;)
+                        appear(parseInt(effect[&quot;dir&quot;]), effect[&quot;element&quot;], STATE_END, effect[&quot;options&quot;]);
+                    else if (effect[&quot;effect&quot;] == &quot;pop&quot;)
+                        pop(parseInt(effect[&quot;dir&quot;]), effect[&quot;element&quot;], STATE_END, effect[&quot;options&quot;]);
+                    else if (effect[&quot;effect&quot;] == &quot;view&quot;)
+                        view(parseInt(effect[&quot;dir&quot;]), effect[&quot;element&quot;], STATE_END, effect[&quot;options&quot;]);
+                }
+
+                var layerName = &quot;slide_&quot; + padString((counterSlides + 1).toString(), slides.length.toString().length) + &quot;_effect_&quot; + padString((counter + 1).toString(), maxEffect.toString().length);
+                exportNode = slides[counterSlides].element.cloneNode(true);
+                exportNode.setAttributeNS(NSS[&quot;inkscape&quot;], &quot;groupmode&quot;, &quot;layer&quot;);
+                exportNode.setAttributeNS(NSS[&quot;inkscape&quot;], &quot;label&quot;, layerName);
+                exportNode.setAttribute(&quot;id&quot;, layerName);
+
+                exportedLayers.push(exportNode);
+            }
+        }
+    }
+
+    activeSlide = tmpActiveSlide;
+    activeEffect = tmpActiveEffect;
+    setSlideToState(activeSlide, activeEffect);
+
+    // Copy image.
+    var newDoc = document.documentElement.cloneNode(true);
+
+    // Delete viewbox form new imag and set width and height.
+    newDoc.removeAttribute('viewbox');
+    newDoc.setAttribute('width', WIDTH);
+    newDoc.setAttribute('height', HEIGHT);
+
+    // Delete all layers and script elements.
+    var nodesToBeRemoved = new Array();
+
+    for (var childCounter = 0; childCounter &lt;  newDoc.childNodes.length; childCounter++)
+    {
+        var child = newDoc.childNodes[childCounter];
+
+        if (child.nodeType == 1)
+        {
+            if ((child.nodeName.toUpperCase() == 'G') || (child.nodeName.toUpperCase() == 'SCRIPT'))
+            {
+                nodesToBeRemoved.push(child);
+            }
+        }
+    }
+
+    for (var ndCounter = 0; ndCounter &lt; nodesToBeRemoved.length; ndCounter++)
+    {
+        var nd = nodesToBeRemoved[ndCounter];
+
+        // Before removing the node, check whether it contains any definitions.
+        var defs = nd.getElementsByTagNameNS(NSS[&quot;svg&quot;], &quot;defs&quot;);
+
+        for (var defsCounter = 0; defsCounter &lt; defs.length; defsCounter++)
+        {
+            if (defs[defsCounter].id)
+            {
+                newDoc.appendChild(defs[defsCounter].cloneNode(true));
+            }
+        }
+
+        // Remove node.
+        nd.parentNode.removeChild(nd);
+    }
+
+    // Set current layer.
+    if (exportedLayers[0])
+    {
+        var namedView;
+
+        for (var nodeCounter = 0; nodeCounter &lt; newDoc.childNodes.length; nodeCounter++)
+        {
+            if ((newDoc.childNodes[nodeCounter].nodeType == 1) &amp;&amp; (newDoc.childNodes[nodeCounter].getAttribute('id') == 'base'))
+            {
+                namedView = newDoc.childNodes[nodeCounter];
+            }
+        }
+
+        if (namedView)
+        {
+            namedView.setAttributeNS(NSS['inkscape'], 'current-layer', exportedLayers[0].getAttributeNS(NSS['inkscape'], 'label'));
+        }
+    }
+
+    // Add exported layers.
+    while (exportedLayers.length &gt; 0)
+    {
+        var nd = exportedLayers.pop();
+
+        nd.setAttribute(&quot;opacity&quot;,1);
+        nd.style.display = &quot;inherit&quot;;
+
+        newDoc.appendChild(nd);
+    }
+
+    // Serialise the new document.
+  window.location = 'data:application/svg+xml;base64;charset=utf-8,' + window.btoa(unescape(encodeURIComponent((new XMLSerializer()).serializeToString(newDoc))));
+
+    // Unsuspend redraw.
+    ROOT_NODE.unsuspendRedraw(suspendHandle);
+    ROOT_NODE.forceRedraw();
+}
+
+/** Function to undo last drawing operation.
+*/
+function drawingUndo()
+{
+    mouse_presentation_path = null;
+    mouse_original_path = null;
+
+    if (history_presentation_elements.length &gt; 0)
+    {
+        var p = history_presentation_elements.pop();
+        var parent = p.parentNode.removeChild(p);
+
+        p = history_original_elements.pop();
+        parent = p.parentNode.removeChild(p);
+    }
+}
+
+/** Event handler for mouse down in drawing mode.
+ *
+ *  @param e the event
+ */
+function drawingMousedown(e)
+{
+    var value = 0;
+
+    if (e.button)
+        value = e.button;
+    else if (e.which)
+        value = e.which;
+
+    if (value == 1)
+    {
+        history_counter++;
+
+        var p = calcCoord(e);
+
+        mouse_last_x = e.clientX;
+        mouse_last_y = e.clientY;
+        mouse_original_path = document.createElementNS(NSS[&quot;svg&quot;], &quot;path&quot;);
+        mouse_original_path.setAttribute(&quot;stroke&quot;, path_colour);
+        mouse_original_path.setAttribute(&quot;stroke-width&quot;, path_paint_width);
+        mouse_original_path.setAttribute(&quot;fill&quot;, &quot;none&quot;);
+        mouse_original_path.setAttribute(&quot;id&quot;, &quot;path &quot; + Date());
+        mouse_original_path.setAttribute(&quot;d&quot;, &quot;M&quot; + p.x + &quot;,&quot; + p.y);
+        slides[activeSlide][&quot;original_element&quot;].appendChild(mouse_original_path);
+        history_original_elements.push(mouse_original_path);
+
+        mouse_presentation_path = document.createElementNS(NSS[&quot;svg&quot;], &quot;path&quot;);
+        mouse_presentation_path.setAttribute(&quot;stroke&quot;, path_colour);
+        mouse_presentation_path.setAttribute(&quot;stroke-width&quot;, path_paint_width);
+        mouse_presentation_path.setAttribute(&quot;fill&quot;, &quot;none&quot;);
+        mouse_presentation_path.setAttribute(&quot;id&quot;, &quot;path &quot; + Date() + &quot; presentation copy&quot;);
+        mouse_presentation_path.setAttribute(&quot;d&quot;, &quot;M&quot; + p.x + &quot;,&quot; + p.y);
+
+        if (slides[activeSlide][&quot;viewGroup&quot;])
+            slides[activeSlide][&quot;viewGroup&quot;].appendChild(mouse_presentation_path);
+        else
+            slides[activeSlide][&quot;element&quot;].appendChild(mouse_presentation_path);
+
+        history_presentation_elements.push(mouse_presentation_path);
+
+        return false;
+    }
+
+    return true;
+}
+
+/** Event handler for mouse up in drawing mode.
+ *
+ *  @param e the event
+ */
+function drawingMouseup(e)
+{
+    if(!e)
+        e = window.event;
+
+    if (mouse_presentation_path != null)
+    {
+        var p = calcCoord(e);
+        var d = mouse_presentation_path.getAttribute(&quot;d&quot;);
+        d += &quot; L&quot; + p.x + &quot;,&quot; + p.y;
+        mouse_presentation_path.setAttribute(&quot;d&quot;, d);
+        mouse_presentation_path = null;
+        mouse_original_path.setAttribute(&quot;d&quot;, d);
+        mouse_original_path = null;
+
+        return false;
+    }
+
+    return true;
+}
+
+/** Event handler for mouse move in drawing mode.
+ *
+ *  @param e the event
+ */
+function drawingMousemove(e)
+{
+    if(!e)
+        e = window.event;
+
+    var dist = (mouse_last_x - e.clientX) * (mouse_last_x - e.clientX) + (mouse_last_y - e.clientY) * (mouse_last_y - e.clientY);
+
+    if (mouse_presentation_path == null)
+    {
+        return true;
+    }
+
+    if (dist &gt;= mouse_min_dist_sqr)
+    {
+        var p = calcCoord(e);
+        var d = mouse_presentation_path.getAttribute(&quot;d&quot;);
+        d += &quot; L&quot; + p.x + &quot;,&quot; + p.y;
+        mouse_presentation_path.setAttribute(&quot;d&quot;, d);
+        mouse_original_path.setAttribute(&quot;d&quot;, d);
+        mouse_last_x = e.clientX;
+        mouse_last_y = e.clientY;
+    }
+
+    return false;
+}
+
+/** Event handler for mouse wheel events in slide mode.
+ *  based on http://adomas.org/javascript-mouse-wheel/
+ *
+ *  @param e the event
+ */
+function slideMousewheel(e)
+{
+    var delta = 0;
+
+    if (!e)
+        e = window.event;
+
+    if (e.wheelDelta)
+    { // IE Opera
+        delta = e.wheelDelta/120;
+    }
+    else if (e.detail)
+    { // MOZ
+        delta = -e.detail/3;
+    }
+
+    if (delta &gt; 0)
+        skipEffects(-1);
+    else if (delta &lt; 0)
+        skipEffects(1);
+
+    if (e.preventDefault)
+        e.preventDefault();
+
+    e.returnValue = false;
+}
+
+/** Event handler for mouse wheel events in index mode.
+ *  based on http://adomas.org/javascript-mouse-wheel/
+ *
+ *  @param e the event
+ */
+function indexMousewheel(e)
+{
+    var delta = 0;
+
+    if (!e)
+        e = window.event;
+
+    if (e.wheelDelta)
+    { // IE Opera
+        delta = e.wheelDelta/120;
+    }
+    else if (e.detail)
+    { // MOZ
+        delta = -e.detail/3;
+    }
+
+    if (delta &gt; 0)
+        indexSetPageSlide(activeSlide - INDEX_COLUMNS * INDEX_COLUMNS);
+    else if (delta &lt; 0)
+        indexSetPageSlide(activeSlide + INDEX_COLUMNS * INDEX_COLUMNS);
+
+    if (e.preventDefault)
+        e.preventDefault();
+
+    e.returnValue = false;
+}
+
+/** Function to set the path paint width.
+*/
+function set_path_paint_width()
+{
+    var svgPoint1 = document.documentElement.createSVGPoint();
+    var svgPoint2 = document.documentElement.createSVGPoint();
+
+    svgPoint1.x = 0.0;
+    svgPoint1.y = 0.0;
+    svgPoint2.x = 1.0;
+    svgPoint2.y = 0.0;
+
+    var matrix = slides[activeSlide][&quot;element&quot;].getTransformToElement(ROOT_NODE);
+
+    if (slides[activeSlide][&quot;viewGroup&quot;])
+        matrix = slides[activeSlide][&quot;viewGroup&quot;].getTransformToElement(ROOT_NODE);
+
+    svgPoint1 = svgPoint1.matrixTransform(matrix);
+    svgPoint2 = svgPoint2.matrixTransform(matrix);
+
+    path_paint_width = path_width / Math.sqrt((svgPoint2.x - svgPoint1.x) * (svgPoint2.x - svgPoint1.x) + (svgPoint2.y - svgPoint1.y) * (svgPoint2.y - svgPoint1.y));
+}
+
+/** The view effect.
+ *
+ *  @param dir direction the effect should be played (1 = forwards, -1 = backwards)
+ *  @param element the element the effect should be applied to
+ *  @param time the time that has elapsed since the beginning of the effect
+ *  @param options a dictionary with additional options (e.g. length of the effect); for the view effect the options need to contain the old and the new matrix.
+ */
+function view(dir, element, time, options)
+{
+    var length = 250;
+    var fraction;
+
+    if (!options[&quot;matrixInitial&quot;])
+    {
+        var tempString = slides[activeSlide][&quot;viewGroup&quot;].getAttribute(&quot;transform&quot;);
+
+        if (tempString)
+            options[&quot;matrixInitial&quot;] = (new matrixSVG()).fromAttribute(tempString);
+        else
+            options[&quot;matrixInitial&quot;] = (new matrixSVG()).fromSVGElements(1, 0, 0, 1, 0, 0);
+    }
+
+    if ((time == STATE_END) || (time == STATE_START))
+        fraction = 1;
+    else
+    {
+        if (options &amp;&amp; options[&quot;length&quot;])
+            length = options[&quot;length&quot;];
+
+        fraction = time / length;
+    }
+
+    if (dir == 1)
+    {
+        if (fraction &lt;= 0)
+        {
+            element.setAttribute(&quot;transform&quot;, options[&quot;matrixInitial&quot;].toAttribute());
+        }
+        else if (fraction &gt;= 1)
+        {
+            element.setAttribute(&quot;transform&quot;, options[&quot;matrixNew&quot;].toAttribute());
+
+            set_path_paint_width();
+
+            options[&quot;matrixInitial&quot;] = null;
+            return true;
+        }
+        else
+        {
+            element.setAttribute(&quot;transform&quot;, options[&quot;matrixInitial&quot;].mix(options[&quot;matrixNew&quot;], fraction).toAttribute());
+        }
+    }
+    else if (dir == -1)
+    {
+        if (fraction &lt;= 0)
+        {
+            element.setAttribute(&quot;transform&quot;, options[&quot;matrixInitial&quot;].toAttribute());
+        }
+        else if (fraction &gt;= 1)
+        {
+            element.setAttribute(&quot;transform&quot;, options[&quot;matrixOld&quot;].toAttribute());
+            set_path_paint_width();
+
+            options[&quot;matrixInitial&quot;] = null;
+            return true;
+        }
+        else
+        {
+            element.setAttribute(&quot;transform&quot;, options[&quot;matrixInitial&quot;].mix(options[&quot;matrixOld&quot;], fraction).toAttribute());
+        }
+    }
+
+    return false;
+}
+
+/** The fade effect.
+ *
+ *  @param dir direction the effect should be played (1 = forwards, -1 = backwards)
+ *  @param element the element the effect should be applied to
+ *  @param time the time that has elapsed since the beginning of the effect
+ *  @param options a dictionary with additional options (e.g. length of the effect)
+ */
+function fade(dir, element, time, options)
+{
+    var length = 250;
+    var fraction;
+
+    if ((time == STATE_END) || (time == STATE_START))
+        fraction = 1;
+    else
+    {
+        if (options &amp;&amp; options[&quot;length&quot;])
+            length = options[&quot;length&quot;];
+
+        fraction = time / length;
+    }
+
+    if (dir == 1)
+    {
+        if (fraction &lt;= 0)
+        {
+            element.style.display = &quot;none&quot;;
+            element.setAttribute(&quot;opacity&quot;, 0);
+        }
+        else if (fraction &gt;= 1)
+        {
+            element.style.display = &quot;inherit&quot;;
+            element.setAttribute(&quot;opacity&quot;, 1);
+            return true;
+        }
+        else
+        {
+            element.style.display = &quot;inherit&quot;;
+            element.setAttribute(&quot;opacity&quot;, fraction);
+        }
+    }
+    else if (dir == -1)
+    {
+        if (fraction &lt;= 0)
+        {
+            element.style.display = &quot;inherit&quot;;
+            element.setAttribute(&quot;opacity&quot;, 1);
+        }
+        else if (fraction &gt;= 1)
+        {
+            element.setAttribute(&quot;opacity&quot;, 0);
+            element.style.display = &quot;none&quot;;
+            return true;
+        }
+        else
+        {
+            element.style.display = &quot;inherit&quot;;
+            element.setAttribute(&quot;opacity&quot;, 1 - fraction);
+        }
+    }
+    return false;
+}
+
+/** The appear effect.
+ *
+ *  @param dir direction the effect should be played (1 = forwards, -1 = backwards)
+ *  @param element the element the effect should be applied to
+ *  @param time the time that has elapsed since the beginning of the effect
+ *  @param options a dictionary with additional options (e.g. length of the effect)
+ */
+function appear(dir, element, time, options)
+{
+    if (dir == 1)
+    {
+        element.style.display = &quot;inherit&quot;;
+        element.setAttribute(&quot;opacity&quot;,1);
+    }
+    else if (dir == -1)
+    {
+        element.style.display = &quot;none&quot;;
+        element.setAttribute(&quot;opacity&quot;,0);
+    }
+    return true;
+}
+
+/** The pop effect.
+ *
+ *  @param dir direction the effect should be played (1 = forwards, -1 = backwards)
+ *  @param element the element the effect should be applied to
+ *  @param time the time that has elapsed since the beginning of the effect
+ *  @param options a dictionary with additional options (e.g. length of the effect)
+ */
+function pop(dir, element, time, options)
+{
+    var length = 500;
+    var fraction;
+
+    if ((time == STATE_END) || (time == STATE_START))
+        fraction = 1;
+    else
+    {
+        if (options &amp;&amp; options[&quot;length&quot;])
+            length = options[&quot;length&quot;];
+
+        fraction = time / length;
+    }
+
+    if (dir == 1)
+    {
+        if (fraction &lt;= 0)
+        {
+            element.setAttribute(&quot;opacity&quot;, 0);
+            element.setAttribute(&quot;transform&quot;, &quot;scale(0)&quot;);
+            element.style.display = &quot;none&quot;;
+        }
+        else if (fraction &gt;= 1)
+        {
+            element.setAttribute(&quot;opacity&quot;, 1);
+            element.removeAttribute(&quot;transform&quot;);
+            element.style.display = &quot;inherit&quot;;
+            return true;
+        }
+        else
+        {
+            element.style.display = &quot;inherit&quot;;
+            var opacityFraction = fraction * 3;
+            if (opacityFraction &gt; 1)
+                opacityFraction = 1;
+            element.setAttribute(&quot;opacity&quot;, opacityFraction);
+            var offsetX = WIDTH * (1.0 - fraction) / 2.0;
+            var offsetY = HEIGHT * (1.0 - fraction) / 2.0;
+            element.setAttribute(&quot;transform&quot;, &quot;translate(&quot; + offsetX + &quot;,&quot; + offsetY + &quot;) scale(&quot; + fraction + &quot;)&quot;);
+        }
+    }
+    else if (dir == -1)
+    {
+        if (fraction &lt;= 0)
+        {
+            element.setAttribute(&quot;opacity&quot;, 1);
+            element.setAttribute(&quot;transform&quot;, &quot;scale(1)&quot;);
+            element.style.display = &quot;inherit&quot;;
+        }
+        else if (fraction &gt;= 1)
+        {
+            element.setAttribute(&quot;opacity&quot;, 0);
+            element.removeAttribute(&quot;transform&quot;);
+            element.style.display = &quot;none&quot;;
+            return true;
+        }
+        else
+        {
+            element.setAttribute(&quot;opacity&quot;, 1 - fraction);
+            element.setAttribute(&quot;transform&quot;, &quot;scale(&quot; + 1 - fraction + &quot;)&quot;);
+            element.style.display = &quot;inherit&quot;;
+        }
+    }
+    return false;
+}
+
+/** Function to set a slide either to the start or the end state.
+ *
+ *  @param slide the slide to use
+ *  @param state the state into which the slide should be set
+ */
+function setSlideToState(slide, state)
+{
+    slides[slide][&quot;viewGroup&quot;].setAttribute(&quot;transform&quot;, slides[slide].initialView);
+
+    if (slides[slide][&quot;effects&quot;])
+    {
+        if (state == STATE_END)
+        {
+            for (var counter = 0; counter &lt; slides[slide][&quot;effects&quot;].length; counter++)
+            {
+                for (var subCounter = 0; subCounter &lt; slides[slide][&quot;effects&quot;][counter].length; subCounter++)
+                {
+                    var effect = slides[slide][&quot;effects&quot;][counter][subCounter];
+                    if (effect[&quot;effect&quot;] == &quot;fade&quot;)
+                        fade(effect[&quot;dir&quot;], effect[&quot;element&quot;], STATE_END, effect[&quot;options&quot;]);
+                    else if (effect[&quot;effect&quot;] == &quot;appear&quot;)
+                        appear(effect[&quot;dir&quot;], effect[&quot;element&quot;], STATE_END, effect[&quot;options&quot;]);
+                    else if (effect[&quot;effect&quot;] == &quot;pop&quot;)
+                        pop(effect[&quot;dir&quot;], effect[&quot;element&quot;], STATE_END, effect[&quot;options&quot;]);
+                    else if (effect[&quot;effect&quot;] == &quot;view&quot;)
+                        view(effect[&quot;dir&quot;], effect[&quot;element&quot;], STATE_END, effect[&quot;options&quot;]);
+                }
+            }
+        }
+        else if (state == STATE_START)
+        {
+            for (var counter = slides[slide][&quot;effects&quot;].length - 1; counter &gt;= 0; counter--)
+            {
+                for (var subCounter = 0; subCounter &lt; slides[slide][&quot;effects&quot;][counter].length; subCounter++)
+                {
+                    var effect = slides[slide][&quot;effects&quot;][counter][subCounter];
+                    if (effect[&quot;effect&quot;] == &quot;fade&quot;)
+                        fade(parseInt(effect[&quot;dir&quot;]) * -1, effect[&quot;element&quot;], STATE_START, effect[&quot;options&quot;]);
+                    else if (effect[&quot;effect&quot;] == &quot;appear&quot;)
+                        appear(parseInt(effect[&quot;dir&quot;]) * -1, effect[&quot;element&quot;], STATE_START, effect[&quot;options&quot;]);
+                    else if (effect[&quot;effect&quot;] == &quot;pop&quot;)
+                        pop(parseInt(effect[&quot;dir&quot;]) * -1, effect[&quot;element&quot;], STATE_START, effect[&quot;options&quot;]);
+                    else if (effect[&quot;effect&quot;] == &quot;view&quot;)
+                        view(parseInt(effect[&quot;dir&quot;]) * -1, effect[&quot;element&quot;], STATE_START, effect[&quot;options&quot;]);
+                }
+            }
+        }
+        else
+        {
+            setSlideToState(slide, STATE_START);
+
+            for (var counter = 0; counter &lt; slides[slide][&quot;effects&quot;].length &amp;&amp; counter &lt; state; counter++)
+            {
+                for (var subCounter = 0; subCounter &lt; slides[slide][&quot;effects&quot;][counter].length; subCounter++)
+                {
+                    var effect = slides[slide][&quot;effects&quot;][counter][subCounter];
+                    if (effect[&quot;effect&quot;] == &quot;fade&quot;)
+                        fade(effect[&quot;dir&quot;], effect[&quot;element&quot;], STATE_END, effect[&quot;options&quot;]);
+                    else if (effect[&quot;effect&quot;] == &quot;appear&quot;)
+                        appear(effect[&quot;dir&quot;], effect[&quot;element&quot;], STATE_END, effect[&quot;options&quot;]);
+                    else if (effect[&quot;effect&quot;] == &quot;pop&quot;)
+                        pop(effect[&quot;dir&quot;], effect[&quot;element&quot;], STATE_END, effect[&quot;options&quot;]);
+                    else if (effect[&quot;effect&quot;] == &quot;view&quot;)
+                        view(effect[&quot;dir&quot;], effect[&quot;element&quot;], STATE_END, effect[&quot;options&quot;]);
+                }
+            }
+        }
+    }
+
+    window.location.hash = (activeSlide + 1) + '_' + activeEffect;
+}
+
+/** Convenience function to translate a attribute string into a dictionary.
+ *
+ *    @param str the attribute string
+ *  @return a dictionary
+ *  @see dictToPropStr
+ */
+function propStrToDict(str)
+{
+    var list = str.split(&quot;;&quot;);
+    var obj = new Object();
+
+    for (var counter = 0; counter &lt; list.length; counter++)
+    {
+        var subStr = list[counter];
+        var subList = subStr.split(&quot;:&quot;);
+        if (subList.length == 2)
+        {
+            obj[subList[0]] = subList[1];
+        }
+    }
+
+    return obj;
+}
+
+/** Convenience function to translate a dictionary into a string that can be used as an attribute.
+ *
+ *  @param dict the dictionary to convert
+ *  @return a string that can be used as an attribute
+ *  @see propStrToDict
+ */
+function dictToPropStr(dict)
+{
+    var str = &quot;&quot;;
+
+    for (var key in dict)
+    {
+        str += key + &quot;:&quot; + dict[key] + &quot;;&quot;;
+    }
+
+    return str;
+}
+
+/** Sub-function to add a suffix to the ids of the node and all its children.
+ *
+ *    @param node the node to change
+ *    @param suffix the suffix to add
+ *    @param replace dictionary of replaced ids
+ *  @see suffixNodeIds
+ */
+function suffixNoneIds_sub(node, suffix, replace)
+{
+    if (node.nodeType == 1)
+    {
+        if (node.getAttribute(&quot;id&quot;))
+        {
+            var id = node.getAttribute(&quot;id&quot;)
+                replace[&quot;#&quot; + id] = id + suffix;
+            node.setAttribute(&quot;id&quot;, id + suffix);
+        }
+
+        if ((node.nodeName == &quot;use&quot;) &amp;&amp; (node.getAttributeNS(NSS[&quot;xlink&quot;], &quot;href&quot;)) &amp;&amp; (replace[node.getAttribute(NSS[&quot;xlink&quot;], &quot;href&quot;)]))
+            node.setAttribute(NSS[&quot;xlink&quot;], &quot;href&quot;, node.getAttribute(NSS[&quot;xlink&quot;], &quot;href&quot;) + suffix);
+
+        if (node.childNodes)
+        {
+            for (var counter = 0; counter &lt; node.childNodes.length; counter++)
+                suffixNoneIds_sub(node.childNodes[counter], suffix, replace);
+        }
+    }
+}
+
+/** Function to add a suffix to the ids of the node and all its children.
+ *
+ *    @param node the node to change
+ *    @param suffix the suffix to add
+ *  @return the changed node
+ *  @see suffixNodeIds_sub
+ */
+function suffixNodeIds(node, suffix)
+{
+    var replace = new Object();
+
+    suffixNoneIds_sub(node, suffix, replace);
+
+    return node;
+}
+
+/** Function to build a progress bar.
+ *
+ *  @param parent node to attach the progress bar to
+ */
+function createProgressBar(parent_node)
+{
+    var g = document.createElementNS(NSS[&quot;svg&quot;], &quot;g&quot;);
+    g.setAttribute(&quot;clip-path&quot;, &quot;url(#jessyInkSlideClipPath)&quot;);
+    g.setAttribute(&quot;id&quot;, &quot;layer_progress_bar&quot;);
+    g.setAttribute(&quot;style&quot;, &quot;display: none;&quot;);
+
+    var rect_progress_bar = document.createElementNS(NSS[&quot;svg&quot;], &quot;rect&quot;);
+    rect_progress_bar.setAttribute(&quot;style&quot;, &quot;marker: none; fill: rgb(128, 128, 128); stroke: none;&quot;);
+    rect_progress_bar.setAttribute(&quot;id&quot;, &quot;rect_progress_bar&quot;);
+    rect_progress_bar.setAttribute(&quot;x&quot;, 0);
+    rect_progress_bar.setAttribute(&quot;y&quot;, 0.99 * HEIGHT);
+    rect_progress_bar.setAttribute(&quot;width&quot;, 0);
+    rect_progress_bar.setAttribute(&quot;height&quot;, 0.01 * HEIGHT);
+    g.appendChild(rect_progress_bar);
+
+    var circle_timer_indicator = document.createElementNS(NSS[&quot;svg&quot;], &quot;circle&quot;);
+    circle_timer_indicator.setAttribute(&quot;style&quot;, &quot;marker: none; fill: rgb(255, 0, 0); stroke: none;&quot;);
+    circle_timer_indicator.setAttribute(&quot;id&quot;, &quot;circle_timer_indicator&quot;);
+    circle_timer_indicator.setAttribute(&quot;cx&quot;, 0.005 * HEIGHT);
+    circle_timer_indicator.setAttribute(&quot;cy&quot;, 0.995 * HEIGHT);
+    circle_timer_indicator.setAttribute(&quot;r&quot;, 0.005 * HEIGHT);
+    g.appendChild(circle_timer_indicator);
+
+    parent_node.appendChild(g);
+}
+
+/** Function to hide the progress bar.
+ *
+ */
+function hideProgressBar()
+{
+    var progress_bar = document.getElementById(&quot;layer_progress_bar&quot;);
+
+    if (!progress_bar)
+    {
+        return;
+    }
+
+    progress_bar.setAttribute(&quot;style&quot;, &quot;display: none;&quot;);
+}
+
+/** Function to show the progress bar.
+ *
+ */
+function showProgressBar()
+{
+    var progress_bar = document.getElementById(&quot;layer_progress_bar&quot;);
+
+    if (!progress_bar)
+    {
+        return;
+    }
+
+    progress_bar.setAttribute(&quot;style&quot;, &quot;display: inherit;&quot;);
+}
+
+/** Set progress bar value.
+ *
+ *    @param value the current slide number
+ *
+ */
+function setProgressBarValue(value)
+{
+    var rect_progress_bar = document.getElementById(&quot;rect_progress_bar&quot;);
+
+    if (!rect_progress_bar)
+    {
+        return;
+    }
+
+    if (value &lt; 1)
+    {
+        // First slide, assumed to be the title of the presentation
+        var x = 0;
+        var w = 0.01 * HEIGHT;
+    }
+    else if (value &gt;= slides.length - 1)
+    {
+        // Last slide, assumed to be the end of the presentation
+        var x = WIDTH - 0.01 * HEIGHT;
+        var w = 0.01 * HEIGHT;
+    }
+    else
+    {
+        value -= 1;
+        value /= (slides.length - 2);
+
+        var x = WIDTH * value;
+        var w = WIDTH / (slides.length - 2);
+    }
+
+    rect_progress_bar.setAttribute(&quot;x&quot;, x);
+    rect_progress_bar.setAttribute(&quot;width&quot;, w);
+}
+
+/** Set time indicator.
+ *
+ *    @param value the percentage of time elapse so far between 0.0 and 1.0
+ *
+ */
+function setTimeIndicatorValue(value)
+{
+    var circle_timer_indicator = document.getElementById(&quot;circle_timer_indicator&quot;);
+
+    if (!circle_timer_indicator)
+    {
+        return;
+    }
+
+    if (value &lt; 0.0)
+    {
+        value = 0.0;
+    }
+
+    if (value &gt; 1.0)
+    {
+        value = 1.0;
+    }
+
+    var cx = (WIDTH - 0.01 * HEIGHT) * value + 0.005 * HEIGHT;
+    circle_timer_indicator.setAttribute(&quot;cx&quot;, cx);
+}
+
+/** Update timer.
+ *
+ */
+function updateTimer()
+{
+    timer_elapsed += 1;
+    setTimeIndicatorValue((timer_elapsed - timer_start) / (60 * timer_duration));
+}
+
+/** Convert screen coordinates to document coordinates.
+ *
+ *  @param e event with screen coordinates
+ *
+ *  @return coordinates in SVG file coordinate system
+ */
+function calcCoord(e)
+{
+    var svgPoint = document.documentElement.createSVGPoint();
+    svgPoint.x = e.clientX + window.pageXOffset;
+    svgPoint.y = e.clientY + window.pageYOffset;
+
+    var matrix = slides[activeSlide][&quot;element&quot;].getScreenCTM();
+
+    if (slides[activeSlide][&quot;viewGroup&quot;])
+        matrix = slides[activeSlide][&quot;viewGroup&quot;].getScreenCTM();
+
+    svgPoint = svgPoint.matrixTransform(matrix.inverse());
+    return svgPoint;
+}
+
+/** Add slide.
+ *
+ *    @param after_slide after which slide the new slide should be inserted into the presentation
+ */
+function addSlide(after_slide)
+{
+    number_of_added_slides++;
+
+    var g = document.createElementNS(NSS[&quot;svg&quot;], &quot;g&quot;);
+    g.setAttribute(&quot;clip-path&quot;, &quot;url(#jessyInkSlideClipPath)&quot;);
+    g.setAttribute(&quot;id&quot;, &quot;Whiteboard &quot; + Date() + &quot; presentation copy&quot;);
+    g.setAttribute(&quot;style&quot;, &quot;display: none;&quot;);
+
+    var new_slide = new Object();
+    new_slide[&quot;element&quot;] = g;
+
+    // Set build in transition.
+    new_slide[&quot;transitionIn&quot;] = new Object();
+    var dict = defaultTransitionInDict;
+    new_slide[&quot;transitionIn&quot;][&quot;name&quot;] = dict[&quot;name&quot;];
+    new_slide[&quot;transitionIn&quot;][&quot;options&quot;] = new Object();
+
+    for (key in dict)
+        if (key != &quot;name&quot;)
+            new_slide[&quot;transitionIn&quot;][&quot;options&quot;][key] = dict[key];
+
+    // Set build out transition.
+    new_slide[&quot;transitionOut&quot;] = new Object();
+    dict = defaultTransitionOutDict;
+    new_slide[&quot;transitionOut&quot;][&quot;name&quot;] = dict[&quot;name&quot;];
+    new_slide[&quot;transitionOut&quot;][&quot;options&quot;] = new Object();
+
+    for (key in dict)
+        if (key != &quot;name&quot;)
+            new_slide[&quot;transitionOut&quot;][&quot;options&quot;][key] = dict[key];
+
+    // Copy master slide content.
+    if (masterSlide)
+    {
+        var clonedNode = suffixNodeIds(masterSlide.cloneNode(true), &quot;_&quot; + Date() + &quot; presentation_copy&quot;);
+        clonedNode.removeAttributeNS(NSS[&quot;inkscape&quot;], &quot;groupmode&quot;);
+        clonedNode.removeAttributeNS(NSS[&quot;inkscape&quot;], &quot;label&quot;);
+        clonedNode.style.display = &quot;inherit&quot;;
+
+        g.appendChild(clonedNode);
+    }
+
+    // Substitute auto texts.
+    substituteAutoTexts(g, &quot;Whiteboard &quot; + number_of_added_slides, &quot;W&quot; + number_of_added_slides, slides.length);
+
+    g.setAttribute(&quot;onmouseover&quot;, &quot;if ((currentMode == INDEX_MODE) &amp;&amp; ( activeSlide != &quot; + (after_slide + 1) + &quot;)) { indexSetActiveSlide(&quot; + (after_slide + 1) + &quot;); };&quot;);
+
+    // Create a transform group.
+    var transformGroup = document.createElementNS(NSS[&quot;svg&quot;], &quot;g&quot;);
+
+    // Add content to transform group.
+    while (g.firstChild)
+        transformGroup.appendChild(g.firstChild);
+
+    // Transfer the transform attribute from the node to the transform group.
+    if (g.getAttribute(&quot;transform&quot;))
+    {
+        transformGroup.setAttribute(&quot;transform&quot;, g.getAttribute(&quot;transform&quot;));
+        g.removeAttribute(&quot;transform&quot;);
+    }
+
+    // Create a view group.
+    var viewGroup = document.createElementNS(NSS[&quot;svg&quot;], &quot;g&quot;);
+
+    viewGroup.appendChild(transformGroup);
+    new_slide[&quot;viewGroup&quot;] = g.appendChild(viewGroup);
+
+    // Insert background.
+    if (BACKGROUND_COLOR != null)
+    {
+        var rectNode = document.createElementNS(NSS[&quot;svg&quot;], &quot;rect&quot;);
+
+        rectNode.setAttribute(&quot;x&quot;, 0);
+        rectNode.setAttribute(&quot;y&quot;, 0);
+        rectNode.setAttribute(&quot;width&quot;, WIDTH);
+        rectNode.setAttribute(&quot;height&quot;, HEIGHT);
+        rectNode.setAttribute(&quot;id&quot;, &quot;jessyInkBackground&quot; + Date());
+        rectNode.setAttribute(&quot;fill&quot;, BACKGROUND_COLOR);
+
+        new_slide[&quot;viewGroup&quot;].insertBefore(rectNode, new_slide[&quot;viewGroup&quot;].firstChild);
+    }
+
+    // Set initial view even if there are no other views.
+    var matrixOld = (new matrixSVG()).fromElements(1, 0, 0, 0, 1, 0, 0, 0, 1);
+
+    new_slide[&quot;viewGroup&quot;].setAttribute(&quot;transform&quot;, matrixOld.toAttribute());
+    new_slide.initialView = matrixOld.toAttribute();
+
+    // Insert slide
+    var node = slides[after_slide][&quot;element&quot;];
+    var next_node = node.nextSibling;
+    var parent_node = node.parentNode;
+
+    if (next_node)
+    {
+        parent_node.insertBefore(g, next_node);
+    }
+    else
+    {
+        parent_node.appendChild(g);
+    }
+
+    g = document.createElementNS(NSS[&quot;svg&quot;], &quot;g&quot;);
+    g.setAttributeNS(NSS[&quot;inkscape&quot;], &quot;groupmode&quot;, &quot;layer&quot;);
+    g.setAttributeNS(NSS[&quot;inkscape&quot;], &quot;label&quot;, &quot;Whiteboard &quot; + number_of_added_slides);
+    g.setAttribute(&quot;clip-path&quot;, &quot;url(#jessyInkSlideClipPath)&quot;);
+    g.setAttribute(&quot;id&quot;, &quot;Whiteboard &quot; + Date());
+    g.setAttribute(&quot;style&quot;, &quot;display: none;&quot;);
+
+    new_slide[&quot;original_element&quot;] = g;
+
+    node = slides[after_slide][&quot;original_element&quot;];
+    next_node = node.nextSibling;
+    parent_node = node.parentNode;
+
+    if (next_node)
+    {
+        parent_node.insertBefore(g, next_node);
+    }
+    else
+    {
+        parent_node.appendChild(g);
+    }
+
+    before_new_slide = slides.slice(0, after_slide + 1);
+    after_new_slide = slides.slice(after_slide + 1);
+    slides = before_new_slide.concat(new_slide, after_new_slide);
+
+    //resetting the counter attributes on the slides that follow the new slide...
+    for (var counter = after_slide+2; counter &lt; slides.length; counter++)
+    {
+        slides[counter][&quot;element&quot;].setAttribute(&quot;onmouseover&quot;, &quot;if ((currentMode == INDEX_MODE) &amp;&amp; ( activeSlide != &quot; + counter + &quot;)) { indexSetActiveSlide(&quot; + counter + &quot;); };&quot;);
+    }
+}
+
+/** Convenience function to obtain a transformation matrix from a point matrix.
+ *
+ *    @param mPoints Point matrix.
+ *    @return A transformation matrix.
+ */
+function pointMatrixToTransformation(mPoints)
+{
+    mPointsOld = (new matrixSVG()).fromElements(0, WIDTH, WIDTH, 0, 0, HEIGHT, 1, 1, 1);
+
+    return mPointsOld.mult(mPoints.inv());
+}
+
+/** Convenience function to obtain a matrix with three corners of a rectangle.
+ *
+ *    @param rect an svg rectangle
+ *    @return a matrixSVG containing three corners of the rectangle
+ */
+function rectToMatrix(rect)
+{
+    rectWidth = rect.getBBox().width;
+    rectHeight = rect.getBBox().height;
+    rectX = rect.getBBox().x;
+    rectY = rect.getBBox().y;
+    rectXcorr = 0;
+    rectYcorr = 0;
+
+    scaleX = WIDTH / rectWidth;
+    scaleY = HEIGHT / rectHeight;
+
+    if (scaleX &gt; scaleY)
+    {
+        scaleX = scaleY;
+        rectXcorr -= (WIDTH / scaleX - rectWidth) / 2;
+        rectWidth = WIDTH / scaleX;
+    }
+    else
+    {
+        scaleY = scaleX;
+        rectYcorr -= (HEIGHT / scaleY - rectHeight) / 2;
+        rectHeight = HEIGHT / scaleY;
+    }
+
+    if (rect.transform.baseVal.numberOfItems &lt; 1)
+    {
+        mRectTrans = (new matrixSVG()).fromElements(1, 0, 0, 0, 1, 0, 0, 0, 1);
+    }
+    else
+    {
+        mRectTrans = (new matrixSVG()).fromSVGMatrix(rect.transform.baseVal.consolidate().matrix);
+    }
+
+    newBasePoints = (new matrixSVG()).fromElements(rectX, rectX, rectX, rectY, rectY, rectY, 1, 1, 1);
+    newVectors = (new matrixSVG()).fromElements(rectXcorr, rectXcorr + rectWidth, rectXcorr + rectWidth, rectYcorr, rectYcorr, rectYcorr + rectHeight, 0, 0, 0);
+
+    return mRectTrans.mult(newBasePoints.add(newVectors));
+}
+
+/** Function to handle JessyInk elements.
+ *
+ *    @param    node    Element node.
+ */
+function handleElement(node)
+{
+    if (node.getAttributeNS(NSS['jessyink'], 'element') == 'core.video')
+    {
+        var url;
+        var width;
+        var height;
+        var x;
+        var y;
+        var transform;
+
+        var tspans = node.getElementsByTagNameNS(&quot;http://www.w3.org/2000/svg&quot;, &quot;tspan&quot;);
+
+        for (var tspanCounter = 0; tspanCounter &lt; tspans.length; tspanCounter++)
+        {
+            if (tspans[tspanCounter].getAttributeNS(&quot;https://launchpad.net/jessyink&quot;, &quot;video&quot;) == &quot;url&quot;)
+            {
+                url = tspans[tspanCounter].firstChild.nodeValue;
+            }
+        }
+
+        var rects = node.getElementsByTagNameNS(&quot;http://www.w3.org/2000/svg&quot;, &quot;rect&quot;);
+
+        for (var rectCounter = 0; rectCounter &lt; rects.length; rectCounter++)
+        {
+            if (rects[rectCounter].getAttributeNS(&quot;https://launchpad.net/jessyink&quot;, &quot;video&quot;) == &quot;rect&quot;)
+            {
+                x = rects[rectCounter].getAttribute(&quot;x&quot;);
+                y = rects[rectCounter].getAttribute(&quot;y&quot;);
+                width = rects[rectCounter].getAttribute(&quot;width&quot;);
+                height = rects[rectCounter].getAttribute(&quot;height&quot;);
+                transform = rects[rectCounter].getAttribute(&quot;transform&quot;);
+            }
+        }
+
+        for (var childCounter = 0; childCounter &lt; node.childNodes.length; childCounter++)
+        {
+            if (node.childNodes[childCounter].nodeType == 1)
+            {
+                if (node.childNodes[childCounter].style)
+                {
+                    node.childNodes[childCounter].style.display = 'none';
+                }
+                else
+                {
+                    node.childNodes[childCounter].setAttribute(&quot;style&quot;, &quot;display: none;&quot;);
+                }
+            }
+        }
+
+        var foreignNode = document.createElementNS(&quot;http://www.w3.org/2000/svg&quot;, &quot;foreignObject&quot;);
+        foreignNode.setAttribute(&quot;x&quot;, x);
+        foreignNode.setAttribute(&quot;y&quot;, y);
+        foreignNode.setAttribute(&quot;width&quot;, width);
+        foreignNode.setAttribute(&quot;height&quot;, height);
+        foreignNode.setAttribute(&quot;transform&quot;, transform);
+
+        var videoNode = document.createElementNS(&quot;http://www.w3.org/1999/xhtml&quot;, &quot;video&quot;);
+        videoNode.setAttribute(&quot;src&quot;, url);
+
+        foreignNode.appendChild(videoNode);
+        node.appendChild(foreignNode);
+    }
+}
+
+/** Class processing the location hash.
+ *
+ *    @param str location hash
+ */
+function LocationHash(str)
+{
+    this.slideNumber = 0;
+    this.effectNumber = 0;
+
+    str = str.substr(1, str.length - 1);
+
+    var parts = str.split('_');
+
+    // Try to extract slide number.
+    if (parts.length &gt;= 1)
+    {
+        try
+        {
+            var slideNumber = parseInt(parts[0]);
+
+            if (!isNaN(slideNumber))
+            {
+                this.slideNumber = slideNumber - 1;
+            }
+        }
+        catch (e)
+        {
+        }
+    }
+
+    // Try to extract effect number.
+    if (parts.length &gt;= 2)
+    {
+        try
+        {
+            var effectNumber = parseInt(parts[1]);
+
+            if (!isNaN(effectNumber))
+            {
+                this.effectNumber = effectNumber;
+            }
+        }
+        catch (e)
+        {
+        }
+    }
+}
+
+/** Class representing an svg matrix.
+*/
+function matrixSVG()
+{
+    this.e11 = 0; // a
+    this.e12 = 0; // c
+    this.e13 = 0; // e
+    this.e21 = 0; // b
+    this.e22 = 0; // d
+    this.e23 = 0; // f
+    this.e31 = 0;
+    this.e32 = 0;
+    this.e33 = 0;
+}
+
+/** Constructor function.
+ *
+ *    @param a element a (i.e. 1, 1) as described in the svg standard.
+ *    @param b element b (i.e. 2, 1) as described in the svg standard.
+ *    @param c element c (i.e. 1, 2) as described in the svg standard.
+ *    @param d element d (i.e. 2, 2) as described in the svg standard.
+ *    @param e element e (i.e. 1, 3) as described in the svg standard.
+ *    @param f element f (i.e. 2, 3) as described in the svg standard.
+ */
+matrixSVG.prototype.fromSVGElements = function(a, b, c, d, e, f)
+{
+    this.e11 = a;
+    this.e12 = c;
+    this.e13 = e;
+    this.e21 = b;
+    this.e22 = d;
+    this.e23 = f;
+    this.e31 = 0;
+    this.e32 = 0;
+    this.e33 = 1;
+
+    return this;
+}
+
+/** Constructor function.
+ *
+ *    @param matrix an svg matrix as described in the svg standard.
+ */
+matrixSVG.prototype.fromSVGMatrix = function(m)
+{
+    this.e11 = m.a;
+    this.e12 = m.c;
+    this.e13 = m.e;
+    this.e21 = m.b;
+    this.e22 = m.d;
+    this.e23 = m.f;
+    this.e31 = 0;
+    this.e32 = 0;
+    this.e33 = 1;
+
+    return this;
+}
+
+/** Constructor function.
+ *
+ *    @param e11 element 1, 1 of the matrix.
+ *    @param e12 element 1, 2 of the matrix.
+ *    @param e13 element 1, 3 of the matrix.
+ *    @param e21 element 2, 1 of the matrix.
+ *    @param e22 element 2, 2 of the matrix.
+ *    @param e23 element 2, 3 of the matrix.
+ *    @param e31 element 3, 1 of the matrix.
+ *    @param e32 element 3, 2 of the matrix.
+ *    @param e33 element 3, 3 of the matrix.
+ */
+matrixSVG.prototype.fromElements = function(e11, e12, e13, e21, e22, e23, e31, e32, e33)
+{
+    this.e11 = e11;
+    this.e12 = e12;
+    this.e13 = e13;
+    this.e21 = e21;
+    this.e22 = e22;
+    this.e23 = e23;
+    this.e31 = e31;
+    this.e32 = e32;
+    this.e33 = e33;
+
+    return this;
+}
+
+/** Constructor function.
+ *
+ *    @param attrString string value of the &quot;transform&quot; attribute (currently only &quot;matrix&quot; is accepted)
+ */
+matrixSVG.prototype.fromAttribute = function(attrString)
+{
+    str = attrString.substr(7, attrString.length - 8);
+
+    str = str.trim();
+
+    strArray = str.split(&quot;,&quot;);
+
+    // Opera does not use commas to separate the values of the matrix, only spaces.
+    if (strArray.length != 6)
+        strArray = str.split(&quot; &quot;);
+
+    this.e11 = parseFloat(strArray[0]);
+    this.e21 = parseFloat(strArray[1]);
+    this.e31 = 0;
+    this.e12 = parseFloat(strArray[2]);
+    this.e22 = parseFloat(strArray[3]);
+    this.e32 = 0;
+    this.e13 = parseFloat(strArray[4]);
+    this.e23 = parseFloat(strArray[5]);
+    this.e33 = 1;
+
+    return this;
+}
+
+/** Output function
+ *
+ *    @return a string that can be used as the &quot;transform&quot; attribute.
+ */
+matrixSVG.prototype.toAttribute = function()
+{
+    return &quot;matrix(&quot; + this.e11 + &quot;, &quot; + this.e21 + &quot;, &quot; + this.e12 + &quot;, &quot; + this.e22 + &quot;, &quot; + this.e13 + &quot;, &quot; + this.e23 + &quot;)&quot;;
+}
+
+/** Matrix nversion.
+ *
+ *    @return the inverse of the matrix
+ */
+matrixSVG.prototype.inv = function()
+{
+    out = new matrixSVG();
+
+    det = this.e11 * (this.e33 * this.e22 - this.e32 * this.e23) - this.e21 * (this.e33 * this.e12 - this.e32 * this.e13) + this.e31 * (this.e23 * this.e12 - this.e22 * this.e13);
+
+    out.e11 =  (this.e33 * this.e22 - this.e32 * this.e23) / det;
+    out.e12 = -(this.e33 * this.e12 - this.e32 * this.e13) / det;
+    out.e13 =  (this.e23 * this.e12 - this.e22 * this.e13) / det;
+    out.e21 = -(this.e33 * this.e21 - this.e31 * this.e23) / det;
+    out.e22 =  (this.e33 * this.e11 - this.e31 * this.e13) / det;
+    out.e23 = -(this.e23 * this.e11 - this.e21 * this.e13) / det;
+    out.e31 =  (this.e32 * this.e21 - this.e31 * this.e22) / det;
+    out.e32 = -(this.e32 * this.e11 - this.e31 * this.e12) / det;
+    out.e33 =  (this.e22 * this.e11 - this.e21 * this.e12) / det;
+
+    return out;
+}
+
+/** Matrix multiplication.
+ *
+ *    @param op another svg matrix
+ *    @return this * op
+ */
+matrixSVG.prototype.mult = function(op)
+{
+    out = new matrixSVG();
+
+    out.e11 = this.e11 * op.e11 + this.e12 * op.e21 + this.e13 * op.e31;
+    out.e12 = this.e11 * op.e12 + this.e12 * op.e22 + this.e13 * op.e32;
+    out.e13 = this.e11 * op.e13 + this.e12 * op.e23 + this.e13 * op.e33;
+    out.e21 = this.e21 * op.e11 + this.e22 * op.e21 + this.e23 * op.e31;
+    out.e22 = this.e21 * op.e12 + this.e22 * op.e22 + this.e23 * op.e32;
+    out.e23 = this.e21 * op.e13 + this.e22 * op.e23 + this.e23 * op.e33;
+    out.e31 = this.e31 * op.e11 + this.e32 * op.e21 + this.e33 * op.e31;
+    out.e32 = this.e31 * op.e12 + this.e32 * op.e22 + this.e33 * op.e32;
+    out.e33 = this.e31 * op.e13 + this.e32 * op.e23 + this.e33 * op.e33;
+
+    return out;
+}
+
+/** Matrix addition.
+ *
+ *    @param op another svg matrix
+ *    @return this + op
+ */
+matrixSVG.prototype.add = function(op)
+{
+    out = new matrixSVG();
+
+    out.e11 = this.e11 + op.e11;
+    out.e12 = this.e12 + op.e12;
+    out.e13 = this.e13 + op.e13;
+    out.e21 = this.e21 + op.e21;
+    out.e22 = this.e22 + op.e22;
+    out.e23 = this.e23 + op.e23;
+    out.e31 = this.e31 + op.e31;
+    out.e32 = this.e32 + op.e32;
+    out.e33 = this.e33 + op.e33;
+
+    return out;
+}
+
+/** Matrix mixing.
+ *
+ *    @param op another svg matrix
+ *    @parma contribOp contribution of the other matrix (0 &lt;= contribOp &lt;= 1)
+ *    @return (1 - contribOp) * this + contribOp * op
+ */
+matrixSVG.prototype.mix = function(op, contribOp)
+{
+    contribThis = 1.0 - contribOp;
+    out = new matrixSVG();
+
+    out.e11 = contribThis * this.e11 + contribOp * op.e11;
+    out.e12 = contribThis * this.e12 + contribOp * op.e12;
+    out.e13 = contribThis * this.e13 + contribOp * op.e13;
+    out.e21 = contribThis * this.e21 + contribOp * op.e21;
+    out.e22 = contribThis * this.e22 + contribOp * op.e22;
+    out.e23 = contribThis * this.e23 + contribOp * op.e23;
+    out.e31 = contribThis * this.e31 + contribOp * op.e31;
+    out.e32 = contribThis * this.e32 + contribOp * op.e32;
+    out.e33 = contribThis * this.e33 + contribOp * op.e33;
+
+    return out;
+}
+
+/** Trimming function for strings.
+*/
+String.prototype.trim = function()
+{
+    return this.replace(/^\s+|\s+$/g, '');
+}
+
+/** SVGElement.getTransformToElement polyfill */
+SVGElement.prototype.getTransformToElement = SVGElement.prototype.getTransformToElement || function(elem) {
+    return elem.getScreenCTM().inverse().multiply(this.getScreenCTM());
+};
+</script><g
+   inkscape:groupmode="layer"
+   id="layer1"
+   inkscape:label="Layer 1"
+   transform="translate(-1.9291032,-4.8085106)" /><g
+   id="g2262"
+   transform="translate(-2.7035756,-4.8085106)"><rect
+     style="fill:#000000;fill-opacity:1;stroke-width:0"
+     id="rect6447"
+     width="52.156384"
+     height="61.238483"
+     x="2.826216"
+     y="4.6880445"
+     ry="2.41682" /><text
+     xml:space="preserve"
+     style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:13.3333px;line-height:25px;font-family:'Bree Serif';-inkscape-font-specification:'Bree Serif, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-east-asian:normal;letter-spacing:0px;word-spacing:0px;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+     x="15.243647"
+     y="58.154465"
+     id="text2166"><tspan
+       sodipodi:role="line"
+       id="tspan2164"
+       x="15.243647"
+       y="58.154465"
+       style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:13.3333px;font-family:'Bree Serif';-inkscape-font-specification:'Bree Serif';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-east-asian:normal;fill:#ffffff;fill-opacity:1;stroke:none">greg</tspan></text><path
+     d="m 27.245716,7.4173738 c -0.09289,0.00625 -0.365369,0.024752 -0.603782,0.043296 -3.535937,0.2724699 -6.969696,1.5233641 -9.908055,3.6071582 -4.186162,2.96933 -7.0749812,7.431055 -7.9698032,12.307674 -0.222933,1.207553 -0.2941448,2.034253 -0.297242,3.343979 0,1.120845 0.024759,1.510975 0.1579049,2.507975 0.4675419,3.483306 1.9661383,6.839655 4.2914383,9.617009 3.241792,3.864151 7.824272,6.344261 12.750433,6.901594 1.49861,0.167193 3.340884,0.136237 4.845667,-0.08053 7.988371,-1.154904 14.546274,-7.356734 16.066549,-15.187207 0.213642,-1.102272 0.309624,-2.164292 0.30653,-3.41828 0,-1.247798 -0.09908,-2.263377 -0.322014,-3.390418 -0.616159,-3.08383 -1.953749,-5.848809 -4.040638,-8.359881 C 42.09233,14.789578 40.751641,13.45199 40.234562,13.021609 38.110521,11.253636 35.819277,10.030607 33.252474,9.2875069 32.181168,8.9778791 31.029362,8.7611354 29.769169,8.6310998 c -0.619252,-0.061926 -2.740191,-0.052641 -3.374931,0.015482 -2.371744,0.2569866 -4.399805,0.8452844 -6.455732,1.8670522 -1.879433,0.935079 -3.446142,2.065219 -4.941642,3.557622 -2.077598,2.074498 -3.554516,4.44625 -4.455529,7.152384 -0.6192546,1.863949 -0.8917245,3.539029 -0.8917245,5.495873 0,1.213737 0.071211,2.024964 0.2755668,3.158195 0.6595047,3.628829 2.5606107,7.112143 5.3131927,9.73158 4.207837,4.006572 9.911171,5.783828 15.512325,4.836376 2.966217,-0.501589 5.814796,-1.774161 8.198914,-3.662892 1.300434,-1.031055 2.554425,-2.346976 3.504981,-3.675274 1.771073,-2.483202 2.833084,-5.241977 3.167489,-8.236067 0.07119,-0.622352 0.09907,-2.36865 0.04646,-2.981714 -0.114586,-1.418046 -0.36538,-2.699907 -0.780282,-3.963179 -1.325209,-4.065396 -4.114936,-7.520837 -7.873816,-9.756342 -0.430374,-0.256995 -1.495492,-0.798837 -1.966132,-1.003193 -3.40589,-1.470726 -7.167869,-1.8175151 -10.744055,-0.993908 -6.941842,1.603869 -12.304577,7.338167 -13.313961,14.227369 -0.126951,0.870051 -0.164107,1.520267 -0.145528,2.613256 0.01548,0.996991 0.04645,1.42737 0.161012,2.167387 0.424187,2.715418 1.514066,5.27294 3.186057,7.49297 0.504689,0.66879 0.888628,1.105367 1.594577,1.814414 0.68737,0.684279 1.123954,1.07131 1.767974,1.563619 3.474027,2.647304 7.824274,3.861041 12.106425,3.368734 4.935447,-0.563522 9.421939,-3.32848 12.183814,-7.505349 1.476913,-2.235513 2.340784,-4.662989 2.622536,-7.369135 0.05264,-0.520177 0.05264,-2.365546 0,-2.87953 -0.213635,-2.015668 -0.727621,-3.8208 -1.585287,-5.54851 -0.133136,-0.266278 -0.281762,-0.551139 -0.328204,-0.634736 -0.585191,-1.027964 -1.139427,-1.832994 -1.811323,-2.641121 -0.414892,-0.498492 -1.322099,-1.421181 -1.826797,-1.860849 -3.628828,-3.15201 -8.282518,-4.563912 -12.939315,-3.926081 -5.768334,0.78955 -10.775003,4.709432 -12.905248,10.106227 -0.563527,1.430474 -0.904111,2.944555 -1.031061,4.570102 -0.06812,0.897914 -0.0061,2.353157 0.145529,3.309906 0.668793,4.291431 3.19225,8.195838 6.886102,10.657375 0.984621,0.656402 2.102367,1.232303 3.20465,1.647204 1.904192,0.72143 3.771244,1.043447 5.820975,1.000101 0.826709,-0.01857 1.136343,-0.04024 1.795836,-0.133143 2.783548,-0.387035 5.412287,-1.51718 7.616824,-3.275861 0.910306,-0.727614 1.808225,-1.622445 2.542046,-2.542032 2.932161,-3.669084 3.981798,-8.465205 2.829986,-12.91454 -1.486212,-5.731195 -6.341163,-10.189827 -12.180726,-11.193013 -1.445966,-0.247705 -3.090069,-0.278669 -4.508173,-0.0867 -5.396795,0.733816 -10.004045,4.325492 -12.010429,9.36312 -0.891727,2.23551 -1.185867,4.703236 -0.851466,7.121428 0.318905,2.303613 1.291135,4.653692 2.703042,6.533125 0.894818,1.192066 1.941357,2.238607 3.09936,3.093178 1.610059,1.195153 3.529749,2.086876 5.421568,2.514165 1.154913,0.260084 2.015675,0.352974 3.278949,0.352974 1.551239,0 2.882635,-0.207447 4.353359,-0.684276 3.117947,-1.006282 5.84266,-3.074589 7.657082,-5.808603 2.278857,-3.43376 2.907391,-7.592053 1.733902,-11.480969 -0.414886,-1.365456 -1.14252,-2.845468 -1.984697,-4.018951 -1.021781,-1.421195 -2.316025,-2.668993 -3.758881,-3.619546 -1.820601,-1.204447 -3.796029,-1.941356 -5.941746,-2.220027 -1.120835,-0.148613 -2.641106,-0.130037 -3.780541,0.04026 -4.387409,0.662602 -8.307294,3.492595 -10.301288,7.434143 -1.040352,2.055929 -1.538848,4.340971 -1.418095,6.508356 0.09908,1.829897 0.501593,3.415194 1.272566,5.012864 0.925785,1.922784 2.247897,3.548332 3.987988,4.898304 1.5079,1.173487 3.399711,2.05902 5.269859,2.470818 1.027974,0.226031 1.746304,0.303436 2.833084,0.303436 1.56053,0 2.733998,-0.188874 4.161403,-0.659506 2.588471,-0.860765 4.854949,-2.492499 6.505252,-4.693945 1.343783,-1.789648 2.170481,-3.830096 2.464628,-6.068693 0.06499,-0.510881 0.09289,-1.963035 0.04647,-2.495596 -0.191985,-2.124028 -0.863872,-4.053012 -2.037362,-5.848848 -0.668789,-1.018674 -1.671983,-2.133333 -2.600867,-2.891916 -2.548227,-2.077597 -5.709526,-3.127228 -8.830566,-2.932168 -3.192248,0.201256 -6.056294,1.495501 -8.301089,3.752679 -1.024867,1.027965 -1.777259,2.093078 -2.415093,3.412086 -0.640928,1.328298 -1.015583,2.681369 -1.145623,4.139718 -0.0433,0.513985 -0.03716,1.647208 0.01546,2.158107 0.09288,0.919589 0.256985,1.681271 0.538755,2.542037 1.393316,4.207824 5.074786,7.421755 9.415747,8.223686 1.269477,0.235316 2.653524,0.266279 3.87034,0.09288 3.405892,-0.489211 6.455726,-2.402698 8.369222,-5.251263 1.139422,-1.696765 1.795835,-3.576202 1.944451,-5.582589 0.04024,-0.510882 0.02175,-1.58838 -0.03402,-2.059007 -0.253886,-2.136427 -1.139422,-4.232613 -2.492497,-5.898397 -1.761773,-2.167395 -4.16758,-3.628833 -6.842757,-4.16139 -0.709047,-0.14243 -1.17039,-0.191974 -1.981616,-0.21055 -0.80193,-0.01857 -1.424277,0.02475 -2.136434,0.145531 -4.932334,0.835988 -8.824353,4.830178 -9.443601,9.691317 -0.0712,0.55114 -0.09289,1.59459 -0.0495,2.155011 0.179575,2.173583 1.003186,4.217119 2.408891,5.972698 0.328201,0.411814 1.148718,1.241608 1.563621,1.582202 1.737006,1.433567 3.861047,2.319097 6.040826,2.517264 0.483008,0.04641 1.557426,0.04641 2.003281,0.0038 3.288242,-0.325108 6.235895,-2.099269 8.062696,-4.845663 0.919587,-1.384034 1.461433,-2.829993 1.678167,-4.489594 0.07737,-0.566623 0.0743,-1.860855 0,-2.415089 -0.161012,-1.1923 -0.436581,-2.124276 -0.931984,-3.164621 -0.517069,-1.080713 -1.176581,-2.006497 -2.059014,-2.89203 -1.402623,-1.405721 -3.062217,-2.346987 -4.963326,-2.81143 -1.492416,-0.368453 -3.152011,-0.383936 -4.650606,-0.04954 -2.734007,0.613061 -5.155283,2.362461 -6.601249,4.768257 -1.288048,2.142628 -1.706044,4.666075 -1.167288,7.068787 0.736907,3.288237 3.220113,6.05012 6.449522,7.170961 2.473917,0.860769 5.152197,0.681175 7.502263,-0.4954 2.746395,-1.374744 4.681564,-3.953939 5.180061,-6.892303 0.492304,-2.919802 -0.479929,-5.870543 -2.641116,-8.006972 -1.207547,-1.188985 -2.76497,-2.062133 -4.368844,-2.439876 -2.179764,-0.517076 -4.40289,-0.232219 -6.381409,0.811223 -0.39013,0.207452 -0.925786,0.554231 -1.346889,0.876244 -0.396305,0.300337 -1.204436,1.102268 -1.529544,1.514076 -1.718438,2.182873 -2.309824,4.870428 -1.641025,7.48368 0.572802,2.235521 2.099268,4.214031 4.158289,5.387516 3.749579,2.139523 8.449717,1.167304 11.056785,-2.291245 0.805032,-1.068209 1.294232,-2.201442 1.535746,-3.560703 0.09289,-0.523273 0.117658,-1.665791 0.04643,-2.213833 -0.157913,-1.201398 -0.572809,-2.340815 -1.219933,-3.344012 -0.619246,-0.962933 -1.576004,-1.904202 -2.560616,-2.523466 -0.362262,-0.229115 -1.123941,-0.600671 -1.51717,-0.7431 -2.42748,-0.876239 -5.065497,-0.541845 -7.183347,0.90721 -0.47063,0.322016 -0.746206,0.551134 -1.145623,0.950558 -1.238499,1.238504 -2.000192,2.789744 -2.213832,4.505077 -0.04642,0.38703 -0.03715,1.331386 0.01544,1.75558 0.256999,1.978517 1.34688,3.814601 2.990991,5.040731 1.06513,0.795731 2.322214,1.291139 3.647415,1.442859 0.464435,0.05265 1.594571,0.01857 2.015673,-0.05886 1.56361,-0.294146 2.860948,-0.972224 3.963235,-2.080694 0.470622,-0.467537 0.798833,-0.888633 1.123935,-1.436675 1.092984,-1.84228 1.253991,-4.096368 0.439674,-6.047013 -0.959825,-2.291223 -3.077694,-3.919862 -5.508267,-4.238784 -0.523273,-0.06812 -1.566716,-0.04645 -2.049717,0.04645 -1.42429,0.269379 -2.656611,0.928877 -3.659804,1.966129 -2.281952,2.356268 -2.455343,5.855051 -0.417997,8.378506 0.244609,0.303447 0.764776,0.805034 1.086794,1.049639 0.823597,0.622352 1.75868,1.031059 2.780456,1.21374 0.452043,0.08053 1.387122,0.09598 1.823697,0.03094 2.374833,-0.352968 4.297628,-1.950647 5.012868,-4.170674 0.805032,-2.504858 -0.278671,-5.257439 -2.603967,-6.629089 -1.470734,-0.863863 -3.260376,-1.015579 -4.823989,-0.40561 -1.671989,0.650214 -2.910497,2.024952 -3.359458,3.727912 -0.167197,0.644021 -0.195063,1.53575 -0.06498,2.185966 0.414903,2.055923 1.987808,3.638117 4.068494,4.087077 0.266276,0.05582 0.417991,0.06814 0.950557,0.06814 0.551136,0.0037 0.678086,-0.0063 0.97222,-0.0712 2.690666,-0.572812 4.418391,-3.133432 3.823903,-5.669275 -0.430383,-1.848469 -2.000191,-3.263469 -3.879624,-3.498788 -0.427287,-0.05579 -1.05584,-0.02172 -1.476928,0.0743 -0.851474,0.195063 -1.5791,0.606866 -2.182873,1.232315 -0.340576,0.35297 -0.532546,0.622347 -0.743105,1.034147 -0.294145,0.582099 -0.427283,1.139428 -0.427283,1.792742 0,0.665707 0.120756,1.170397 0.417996,1.761785 0.195063,0.387035 0.377755,0.647122 0.693569,0.97532 0.563515,0.588298 1.195156,0.941262 2.059017,1.154913 0.114566,0.02802 0.368459,0.04024 0.77407,0.04024 0.551132,-0.0037 0.628548,-0.0094 0.90101,-0.08364 1.253985,-0.34059 2.22003,-1.223021 2.616355,-2.387218 0.244601,-0.71523 0.226031,-1.619352 -0.04647,-2.297444 -0.25698,-0.637838 -0.721414,-1.219936 -1.272557,-1.594583 -1.142514,-0.774066 -2.665885,-0.749298 -3.749581,0.0681 -1.439767,1.083687 -1.628638,3.074609 -0.414898,4.313105 0.380837,0.387032 0.786456,0.628541 1.284947,0.764777 0.371558,0.0991 0.962952,0.0991 1.309732,0 0.857655,-0.244602 1.507882,-0.842181 1.774164,-1.631726 0.09907,-0.297246 0.133127,-0.786454 0.07738,-1.117758 -0.167201,-0.959851 -1.024868,-1.733916 -1.987795,-1.79894 -0.928885,-0.06189 -1.771073,0.51708 -2.024977,1.393326 -0.07118,0.250795 -0.06813,0.66569 0.01243,0.919586 0.222932,0.70285 0.80194,1.145622 1.501705,1.145622 0.396308,0 0.665687,-0.105271 0.953639,-0.368453 0.616158,-0.563522 0.504688,-1.538848 -0.216742,-1.870152 -0.188863,-0.08666 -0.557336,-0.09288 -0.718332,-0.0093 -0.374653,0.191965 -0.538753,0.59139 -0.374653,0.910303 0.154812,0.300331 0.569712,0.368453 0.740018,0.117658 0.09288,-0.136239 0.08666,-0.164108 -0.04648,-0.185778 -0.20744,-0.03718 -0.219835,-0.04643 -0.210546,-0.142418 0.0037,-0.05264 0.03402,-0.123859 0.06504,-0.157915 0.08664,-0.09599 0.322022,-0.06813 0.452067,0.05263 0.266273,0.250792 0.232211,0.625443 -0.08363,0.904113 -0.461341,0.405607 -1.179678,0.216733 -1.476924,-0.39014 -0.09287,-0.185766 -0.102179,-0.232214 -0.102179,-0.486109 0,-0.247691 0.01246,-0.300342 0.096,-0.479924 0.247687,-0.513979 0.715222,-0.805026 1.294232,-0.805026 0.764773,0 1.4088,0.535657 1.585289,1.322107 0.191981,0.870046 -0.377748,1.786548 -1.319016,2.120949 -0.173387,0.05881 -0.263176,0.07118 -0.634734,0.07118 -0.390128,0 -0.455149,-0.0093 -0.668781,-0.08363 -0.777169,-0.272477 -1.349982,-0.928881 -1.501709,-1.721533 -0.235309,-1.223022 0.588307,-2.449145 1.87944,-2.799029 0.213652,-0.05582 0.334408,-0.06811 0.678083,-0.06811 0.498511,0.004 0.764785,0.06505 1.192068,0.275576 1.384028,0.674987 1.978509,2.371738 1.319015,3.752678 -0.167194,0.349884 -0.343684,0.600668 -0.61926,0.879344 -0.705955,0.71523 -1.72772,1.062019 -2.71542,0.92269 -1.486206,-0.204359 -2.70615,-1.421192 -2.922878,-2.904303 -0.05262,-0.34679 -0.02177,-0.966039 0.05881,-1.281855 0.346789,-1.325205 1.377857,-2.350075 2.718529,-2.699945 1.089892,-0.28486 2.176682,-0.08979 3.167491,0.569707 0.322011,0.213642 0.826702,0.712147 1.043439,1.02796 0.343694,0.501594 0.585208,1.092988 0.678083,1.653416 0.05883,0.368442 0.04324,1.083684 -0.03094,1.424279 -0.170295,0.761686 -0.529463,1.439762 -1.065109,2.00328 -0.551141,0.575915 -1.148722,0.956755 -1.882548,1.198258 -0.851461,0.275578 -1.879429,0.269372 -2.737091,-0.02475 -1.56053,-0.529463 -2.727819,-1.829895 -3.080796,-3.439959 -0.06812,-0.312725 -0.09598,-1.185869 -0.0495,-1.523361 0.111477,-0.770967 0.414907,-1.504786 0.891729,-2.158106 0.09597,-0.130041 0.3282,-0.390123 0.517081,-0.5759 0.67808,-0.671897 1.476912,-1.108465 2.449144,-1.334494 0.34368,-0.08052 0.421096,-0.08666 1.037249,-0.08666 0.656408,-0.0039 0.736916,0.0063 1.235417,0.123849 0.458246,0.11146 1.092971,0.383934 1.514077,0.650216 0.724517,0.461349 1.418092,1.21374 1.845375,1.994003 0.253893,0.470626 0.47063,1.145621 0.54804,1.724613 0.05266,0.408712 0.0217,1.300436 -0.06189,1.675079 -0.198157,0.897925 -0.622345,1.737017 -1.2385,2.439863 -0.792654,0.910302 -1.941368,1.566716 -3.167489,1.814411 -0.303431,0.0619 -0.442768,0.07119 -1.031051,0.07119 -0.740011,-0.0037 -0.984622,-0.03403 -1.554333,-0.198156 -0.938162,-0.269386 -1.71223,-0.721438 -2.436762,-1.427388 -2.356265,-2.285046 -2.362462,-5.889103 -0.01544,-8.232979 0.931977,-0.935079 2.102366,-1.532658 3.446148,-1.758686 0.387035,-0.06504 1.43357,-0.07428 1.783451,-0.01542 1.170387,0.201258 2.077597,0.579001 2.935259,1.226122 1.743205,1.319014 2.712334,3.402804 2.54514,5.486592 -0.120757,1.526469 -0.739999,2.891919 -1.817508,4.006577 -1.043441,1.083689 -2.309828,1.752489 -3.808421,2.015676 -0.322008,0.05882 -0.517067,0.07118 -1.046539,0.07118 -0.863861,0.0037 -1.39951,-0.08053 -2.198348,-0.340588 -0.37153,-0.120751 -1.080579,-0.452048 -1.424252,-0.662598 -1.253981,-0.767871 -2.297423,-1.990889 -2.845462,-3.334681 -1.04654,-2.563682 -0.442769,-5.455597 1.560518,-7.474363 0.213648,-0.213647 0.498503,-0.476829 0.634738,-0.585197 1.083694,-0.854573 2.272663,-1.362361 3.659794,-1.566714 0.464431,-0.06813 1.427377,-0.06813 1.913494,0 1.71223,0.241505 3.204633,1.000101 4.43075,2.250987 1.145623,1.173483 1.870158,2.653507 2.089987,4.269766 0.05264,0.374636 0.05264,1.44286 0,1.826785 -0.247692,1.854681 -1.198259,3.600967 -2.631826,4.833285 -3.179875,2.740195 -7.827374,2.594681 -10.852428,-0.343687 -1.328299,-1.288044 -2.136424,-2.839276 -2.424382,-4.653697 -0.07738,-0.489208 -0.07738,-1.718428 0,-2.220013 0.27866,-1.817507 1.102275,-3.418278 2.424378,-4.71253 1.306628,-1.281855 2.891914,-2.080688 4.718718,-2.381027 0.557333,-0.09288 1.631729,-0.114566 2.213827,-0.04644 1.102276,0.130045 2.00639,0.402516 2.98791,0.904113 2.922881,1.486211 4.802313,4.495783 4.799217,7.69114 0,1.396418 -0.303433,2.638013 -0.95056,3.910585 -0.442766,0.866961 -0.944353,1.551238 -1.662692,2.26957 -1.510983,1.514072 -3.374943,2.411995 -5.514458,2.662783 -0.591389,0.06813 -1.709139,0.04646 -2.316014,-0.0495 -3.449302,-0.535645 -6.34432,-2.956935 -7.480651,-6.263749 -0.157913,-0.455156 -0.294144,-1.009377 -0.377744,-1.526461 -0.09288,-0.578999 -0.114569,-1.724616 -0.04332,-2.334586 0.244613,-2.139521 1.167306,-4.028252 2.724717,-5.591865 1.182771,-1.182776 2.607061,-2.034249 4.195442,-2.501783 1.501701,-0.439674 3.111753,-0.504696 4.669178,-0.185781 2.579192,0.529463 4.892112,2.114752 6.362837,4.362649 0.851475,1.306616 1.374754,2.786642 1.538848,4.350256 0.04024,0.383944 0.04024,1.393324 0,1.798935 -0.334404,3.433765 -2.46773,6.480494 -5.650689,8.071979 -2.941464,1.470722 -6.344267,1.449051 -9.304291,-0.05884 -2.718558,-1.380896 -4.777577,-3.956997 -5.483533,-6.855115 -0.204348,-0.842173 -0.281755,-1.510973 -0.284851,-2.399606 -0.0063,-1.408797 0.263185,-2.727814 0.814319,-4.01586 1.322104,-3.080788 4.053016,-5.415379 7.338159,-6.27614 1.371648,-0.359168 2.814508,-0.439671 4.257366,-0.232224 3.226317,0.461344 6.102751,2.346981 7.883115,5.167682 0.740006,1.170388 1.284951,2.603961 1.510976,3.969418 0.18268,1.092983 0.188871,2.328395 0.01544,3.399708 -0.656409,4.108749 -3.644305,7.585858 -7.691129,8.954416 -2.492498,0.842177 -5.164579,0.795728 -7.678751,-0.133143 -0.746191,-0.27567 -1.761765,-0.802036 -2.461521,-1.275772 -3.613343,-2.439858 -5.598048,-6.647692 -5.10884,-10.843134 0.616158,-5.297719 4.926174,-9.64488 10.310587,-10.403471 1.065111,-0.148621 2.319107,-0.148621 3.359451,0.0037 2.712325,0.390131 5.183158,1.659601 7.121424,3.653598 1.950647,2.006385 3.124134,4.501977 3.412087,7.257654 0.05882,0.566624 0.0495,1.860863 -0.01853,2.4151 -0.337487,2.805224 -1.554324,5.303909 -3.548325,7.304097 -2.151903,2.158096 -4.851853,3.433763 -7.895482,3.737204 -0.622358,0.06188 -1.990905,0.04324 -2.607065,-0.03096 -2.956935,-0.368467 -5.63211,-1.696764 -7.718995,-3.830088 -1.415036,-1.446041 -2.408936,-3.065384 -3.031277,-4.929341 -0.473731,-1.415018 -0.665695,-2.715457 -0.628544,-4.217147 0.04645,-1.89492 0.479924,-3.604059 1.349973,-5.325592 0.668795,-1.325199 1.483119,-2.43057 2.579197,-3.498782 3.353264,-3.278946 8.068881,-4.554613 12.580138,-3.402805 1.40881,0.359171 2.836189,0.987716 4.056112,1.792742 2.799038,1.842285 4.845668,4.650599 5.681655,7.796416 0.476829,1.795835 0.560428,3.696954 0.244607,5.517547 -0.464437,2.665891 -1.733909,5.124332 -3.678364,7.11833 -4.195426,4.291336 -10.564457,5.436961 -15.948866,2.860855 -4.263563,-2.037361 -7.285525,-6.099672 -7.923354,-10.644997 -0.114567,-0.832895 -0.136231,-1.195158 -0.117658,-2.142624 0.01856,-1.099165 0.09908,-1.786539 0.318919,-2.749484 0.35917,-1.585289 1.031057,-3.155096 1.947556,-4.551515 2.291238,-3.483309 6.034626,-5.867431 10.109317,-6.437145 1.473819,-0.204355 2.932164,-0.188877 4.365736,0.04644 2.334589,0.383934 4.548421,1.340684 6.471206,2.795931 0.591392,0.448962 0.953655,0.767878 1.566716,1.377844 1.201354,1.201349 2.059017,2.399608 2.799022,3.904396 0.814325,1.662702 1.266372,3.28824 1.424295,5.146002 0.05582,0.640924 0.02477,2.10856 -0.05882,2.749487 -0.424196,3.272759 -1.85157,6.180164 -4.18616,8.530229 -3.031251,3.049819 -7.15549,4.681559 -11.344725,4.489588 -2.195297,-0.09929 -4.08093,-0.58231 -6.037765,-1.548345 -1.610067,-0.792802 -2.848574,-1.681436 -4.133521,-2.969473 -1.204465,-1.204514 -2.07761,-2.399675 -2.817615,-3.858014 -1.588389,-3.121044 -2.021868,-6.505263 -1.269468,-9.892586 0.616163,-2.786647 2.114746,-5.446342 4.248076,-7.542517 2.656601,-2.613255 5.98819,-4.148999 9.73158,-4.489588 0.699757,-0.06193 2.275758,-0.04644 2.941453,0.03097 2.430571,0.287951 4.653709,1.065117 6.691044,2.343872 1.455244,0.913402 2.839278,2.133332 3.901294,3.433764 2.901205,3.560717 4.096361,7.991476 3.337779,12.385083 -1.117755,6.480495 -6.415478,11.778204 -13.016723,13.016717 -1.11465,0.207449 -1.619351,0.250796 -2.987906,0.250796 -1.229217,-0.0037 -1.554324,-0.02475 -2.507972,-0.173396 -4.474124,-0.699943 -8.585976,-3.353453 -11.158968,-7.189733 -1.083703,-1.619347 -1.885633,-3.458528 -2.322208,-5.34106 -0.63473,-2.724716 -0.510885,-5.653793 0.356073,-8.335168 0.498499,-1.545036 1.334494,-3.207728 2.266465,-4.505063 2.238608,-3.108661 5.399893,-5.365837 9.047307,-6.452631 2.220025,-0.6626 4.514368,-0.842185 6.904678,-0.541846 2.28505,0.284855 4.678464,1.145621 6.734384,2.421286 2.07142,1.284945 3.916795,3.065306 5.276051,5.093358 1.096078,1.634834 1.966129,3.631927 2.384131,5.455627 0.315812,1.384032 0.421089,2.319109 0.41799,3.746494 0,0.996997 -0.02801,1.405713 -0.15172,2.281945 -0.606869,4.238805 -2.876438,8.133907 -6.362825,10.911259 -2.696863,2.148818 -5.92007,3.443065 -9.397194,3.76507 -0.55732,0.05264 -2.368635,0.05264 -2.925971,0 -4.099478,-0.380951 -7.811903,-2.090089 -10.784319,-4.960329 -2.916697,-2.81763 -4.783752,-6.536248 -5.235804,-10.434456 -0.164101,-1.39022 -0.142426,-3.009571 0.05884,-4.381218 0.36536,-2.50798 1.297333,-4.923072 2.743296,-7.093557 1.390223,-2.089986 3.266564,-3.926074 5.406086,-5.285333 3.969416,-2.5265551 8.669559,-3.3997058 13.245852,-2.4646322 5.477291,1.1208502 10.230069,4.7806412 12.741148,9.8120782 1.003191,2.009483 1.566716,3.987998 1.802031,6.30091 0.05266,0.538755 0.05266,2.49869 0,3.034347 -0.241523,2.405789 -0.857674,4.49887 -1.928993,6.573378 -2.576094,4.994276 -7.400075,8.635488 -12.923819,9.756343 -2.065214,0.41799 -4.214032,0.476826 -6.331882,0.173387 C 22.437296,44.739636 19.786904,43.720969 17.461606,42.185227 15.312787,40.767125 13.445737,38.893876 12.024552,36.73578 10.646708,34.639601 9.6961604,32.270965 9.2750644,29.877551 9.061417,28.666899 8.9963984,27.775184 9.0180746,26.394238 c 0.015481,-1.021773 0.052628,-1.4986 0.1764892,-2.322208 0.8359862,-5.505168 4.1985402,-10.437521 9.1339982,-13.397557 2.154999,-1.2942398 4.622725,-2.1766815 7.07498,-2.529647 1.046534,-0.1517195 1.362355,-0.1703022 2.755679,-0.1703022 1.058916,0 1.433571,0.00936 1.826799,0.05263 2.461532,0.2693694 4.54841,0.8669562 6.656967,1.9103948 2.000192,0.9877094 3.647411,2.1704864 5.2358,3.7588774 0.724531,0.727629 1.260181,1.33759 1.817511,2.077599 1.953755,2.600819 3.210839,5.598003 3.656702,8.71596 0.139334,0.969131 0.157907,1.284946 0.157907,2.631827 -0.0037,1.371642 -0.0217,1.66579 -0.170286,2.69375 -1.068199,7.279286 -6.492863,13.518276 -13.716466,15.778554 -1.715337,0.535657 -3.470913,0.829801 -5.248177,0.876241 l -0.7431,0.01857 -0.0093,0.275568 -0.0093,0.275565 0.690465,-0.01857 c 3.093178,-0.08977 5.994381,-0.83599 8.743884,-2.250982 3.520467,-1.80827 6.511464,-4.659924 8.459018,-8.065837 1.39951,-2.452247 2.216918,-5.034526 2.50178,-7.910962 0.06815,-0.681202 0.07741,-2.517283 0.01857,-3.189177 -0.188934,-2.108376 -0.659558,-4.02806 -1.446011,-5.898205 C 44.485785,14.718267 40.377035,10.730269 35.283677,8.739368 33.593115,8.0798589 31.763218,7.6494772 29.893069,7.4760868 c -0.492301,-0.046468 -2.250987,-0.0867 -2.64732,-0.058861 z"
+     id="path43"
+     style="fill:#f53dfb;fill-opacity:1;stroke:none;stroke-width:0.00309623" /></g></svg>
diff --git a/images/paypal.png b/images/paypal.png
new file mode 100644
index 00000000..3a6eb7fc
Binary files /dev/null and b/images/paypal.png differ
diff --git a/images/views.png b/images/views.png
new file mode 100644
index 00000000..b2d6a203
Binary files /dev/null and b/images/views.png differ