diff --git a/data/images/account-settings.svg b/data/images/account-settings.svg
new file mode 100644
index 000000000..8114e55f4
--- /dev/null
+++ b/data/images/account-settings.svg
@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="51px" height="51px" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
+    <title>account-settings</title>
+    <description>Created with Sketch (http://www.bohemiancoding.com/sketch)</description>
+    <defs></defs>
+    <g id="Page 1" fill="rgb(223,223,223)" fill-rule="evenodd">
+        <g id="Group" fill="rgb(0,0,0)">
+            <path d="M42.6990051,13.3120117 L45.6109924,12.1420898 L48.2409973,8.60595703 L44.7319946,5.10107422 L41.1909943,7.73510742 L40.029007,10.6398926 L31.2910004,19.3811035 L34.1450043,21.8679199 L42.6990051,13.3120117 Z M42.6990051,13.3120117" id="Shape" fill="rgb(69,74,82)"></path>
+            <path d="M47.8320007,37.1010742 L32.0090008,23.3190746 L31.4470008,22.8290746 L26.9350007,18.8990746 C27.4830007,16.2210746 28.4720007,9.04007435 24.4750007,5.04507446 C21.8470007,2.41407442 18.3490008,0.965074539 14.629001,0.965074539 C13.7180009,0.965074539 12.8040009,1.05607454 11.9130009,1.23207453 C11.6650009,1.28207453 11.4660009,1.46207453 11.3920009,1.70407453 C11.3190009,1.94407453 11.3840009,2.20707455 11.5620009,2.38407454 L17.5240007,8.34707436 L18.7180008,14.1140746 L13.8480009,18.9820746 L8.08200108,17.7890746 L2.12000118,11.8290746 C1.94000117,11.6500746 1.67900117,11.5850746 1.4380012,11.6580746 C1.19800121,11.7300746 1.01600121,11.9290746 0.967001215,12.1790746 C0.0610011965,16.7530745 1.4870012,21.4480747 4.77900125,24.7420743 C6.73800124,26.7000743 9.79200126,27.7350744 13.6130009,27.7350744 L13.6140009,27.7350744 C15.2170009,27.7350744 16.945001,27.5510744 18.6350008,27.2010744 L36.8050009,48.061075 C38.3050009,49.563075 40.2560008,50.3710749 42.3320008,50.3710749 C44.4080008,50.3710749 46.3610006,49.5630749 47.830001,48.094075 C50.8609924,45.0620117 50.8619995,40.1311035 47.8320007,37.1010742 C47.8320007,37.1010742 50.8619995,40.1311035 47.8320007,37.1010742 L47.8320007,37.1010742 M43.7059937,43.9680176 C42.9479936,44.7270176 41.7209936,44.7270176 40.9629936,43.9690176 L40.9619936,43.9680176 C40.2049936,43.2100176 40.2049936,41.9810176 40.9619936,41.2240176 C41.7199936,40.4680176 42.9479936,40.4680176 43.7059936,41.2260176 L43.7069936,41.2260176 C44.4629974,41.9829102 44.4629974,43.2099609 43.7059937,43.9680176 C43.7059937,43.9680176 44.4629974,43.2099609 43.7059937,43.9680176 L43.7059937,43.9680176" id="Shape" fill="rgb(60,64,73)"></path>
+            <path d="M17.6609955,30.9750977 C16.9689955,30.2830977 15.8469955,30.2830977 15.1539955,30.9750977 L3.53299522,42.5980978 C2.84099525,43.2890978 2.84099525,44.4110978 3.53299522,45.1050978 L8.06699514,49.6410975 C8.75899512,50.3320975 9.88099515,50.3320975 10.574995,49.6410975 L21.8529949,38.3640971 C22.5449949,37.6720971 22.5449949,36.5490971 21.8529949,35.8560972 L17.6609955,30.9750977 L17.6609955,30.9750977 L17.6609955,30.9750977" id="Shape" fill="rgb(69,74,82)"></path>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/data/images/add-contact.svg b/data/images/add-contact.svg
new file mode 100644
index 000000000..d569d2514
--- /dev/null
+++ b/data/images/add-contact.svg
@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="46px" height="51px" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
+    <title>add-contact</title>
+    <description>Created with Sketch (http://www.bohemiancoding.com/sketch)</description>
+    <defs></defs>
+    <g id="Page 1" fill="rgb(223,223,223)" fill-rule="evenodd">
+        <g id="Group" fill="rgb(0,0,0)">
+            <path d="M19.2260132,22.9150391 C25.2990131,22.9150391 30.2390127,17.8580389 30.2390127,11.6430387 C30.2390127,5.42903852 25.3000126,0.372038841 19.2260132,0.372038841 C15.6740131,0.372038841 12.5200133,2.10803878 10.5040131,4.7870388 C10.4590131,4.8220388 10.4080131,4.8460388 10.3690131,4.89103881 C10.2780131,4.99503881 10.2140131,5.11403881 10.1740131,5.23803881 C8.9400131,7.05803886 8.211013,9.26403883 8.211013,11.643039 C8.21099854,17.8580322 13.1520081,22.9150391 19.2260132,22.9150391 C19.2260132,22.9150391 13.1520081,22.9150391 19.2260132,22.9150391 L19.2260132,22.9150391 M19.2260132,2.84802246 C20.9050132,2.84802246 22.4680133,3.35702246 23.7900133,4.22302246 C22.5300133,4.37802246 21.0560133,4.99802244 18.8450131,6.18102241 C16.692013,7.3340224 14.3840132,6.4280224 13.0070133,5.6350224 C14.5660095,3.9239502 16.7730103,2.84802246 19.2260132,2.84802246 C19.2260132,2.84802246 16.7730103,2.84802246 19.2260132,2.84802246 L19.2260132,2.84802246 M11.8380127,7.25305176 C12.9690127,7.93405175 14.6900127,8.72205174 16.6150126,8.72205174 C17.6330127,8.72205174 18.7070127,8.50105174 19.7780128,7.92805171 C23.6890128,5.8360517 24.5100126,5.8920517 26.0400128,6.59305167 C26.1040128,6.62205167 26.1720128,6.62505167 26.2380128,6.64005167 C27.1970128,8.06205172 27.7620129,9.78505165 27.7620129,11.6430515 C27.7620129,16.4940513 23.932013,20.4400514 19.2250132,20.4400514 C14.517013,20.4400514 10.6870131,16.4940513 10.6870131,11.6430515 C10.6879883,10.0429688 11.1099854,8.54699707 11.8380127,7.25305176 C11.8380127,7.25305176 11.1099854,8.54699707 11.8380127,7.25305176 L11.8380127,7.25305176" id="Shape"></path>
+            <path d="M32.7720032,27.5539551 C31.2090032,25.6009551 29.3370032,24.0169551 27.1930032,22.8979549 C27.0190032,22.8079549 26.8100032,22.8329549 26.6620032,22.9589549 C25.1890031,24.221955 23.4120032,25.1009549 21.5480033,25.496955 C20.8120033,25.618955 20.0350033,25.680955 19.2380034,25.680955 C17.8810034,25.680955 16.9260033,25.4979551 16.9240035,25.4979551 C15.0390035,25.1019551 13.2620035,24.2229551 11.7870034,22.958955 C11.6390034,22.832955 11.4300034,22.808955 11.2560034,22.897955 C4.65200329,26.344955 0.586003304,34.1639548 0.382003784,43.8099557 C0.379003784,43.9379557 0.429003783,44.0609557 0.519003779,44.1529557 C0.60800378,44.2459557 0.732003778,44.2979557 0.860003769,44.2979557 L14.9740041,44.2979557 C15.0180041,44.2979557 15.0580041,44.2919557 15.0980041,44.2799557 L23.1580045,44.2799557 C22.4560045,42.7689556 22.0530045,41.0919557 22.0530045,39.3179558 C22.052002,33.1710205 26.769989,28.1109619 32.7720032,27.5539551 C32.7720032,27.5539551 26.769989,28.1109619 32.7720032,27.5539551 L32.7720032,27.5539551" id="Shape"></path>
+            <path d="M35.8389893,30.3830566 C30.3719893,30.3830566 25.9259892,34.8300567 25.9259892,40.2940569 C25.9259892,45.7610569 30.3719893,50.207057 35.8389893,50.207057 C41.3029895,50.207057 45.7519894,45.7610569 45.7519894,40.2940569 C45.7520142,34.8299561 41.303009,30.3830566 35.8389893,30.3830566 L35.8389893,30.3830566 L35.8389893,30.3830566 M35.8389893,48.6779785 C31.2149892,48.6779785 27.453989,44.9169786 27.453989,40.2939787 C27.453989,35.6719785 31.2149889,31.9119787 35.8389893,31.9119787 C40.4609895,31.9119787 44.2209892,35.6719787 44.2209892,40.2939787 C44.2210083,44.9169922 40.4609985,48.6779785 35.8389893,48.6779785 L35.8389893,48.6779785 L35.8389893,48.6779785" id="Shape"></path>
+            <path d="M37.1209874,39.1409912 L37.1209874,35.3059912 C37.1209874,34.9709912 36.8499874,34.6989912 36.5169874,34.6989912 L35.3059875,34.6989912 C34.9749875,34.6989912 34.7019875,34.9709912 34.7019875,35.3059912 L34.7019875,39.1409912 L31.0379875,39.1409912 C30.7019875,39.1409912 30.4319875,39.4119912 30.4319875,39.7469912 L30.4319875,40.8789912 C30.4319875,41.2139912 30.7029875,41.4849912 31.0379875,41.4849912 L34.7019875,41.4849912 L34.7019875,45.3579911 C34.7019875,45.6919911 34.9749875,45.9629911 35.3059875,45.9629911 L36.5169874,45.9629911 C36.8509874,45.9629911 37.1209874,45.6919911 37.1209874,45.3579911 L37.1209874,41.4849912 L40.7869873,41.4849912 C41.1209873,41.4849912 41.3919873,41.2139912 41.3919873,40.8789912 L41.3919873,39.7469912 C41.3930054,39.4110107 41.1210022,39.1409912 40.7869873,39.1409912 L37.1209874,39.1409912 Z M37.1209874,39.1409912" id="Shape"></path>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/data/images/advanced-settings.svg b/data/images/advanced-settings.svg
new file mode 100644
index 000000000..ccef0f4fe
--- /dev/null
+++ b/data/images/advanced-settings.svg
@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="79px" height="79px" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
+    <title>advanced-settings</title>
+    <description>Created with Sketch (http://www.bohemiancoding.com/sketch)</description>
+    <defs></defs>
+    <g id="Page 1" fill="rgb(223,223,223)" fill-rule="evenodd">
+        <g id="Group" fill="rgb(0,0,0)">
+            <path d="M77.0386845,38.7883065 L71.392233,37.998629 C71.2219104,34.1354033 70.388362,30.4270161 68.9173943,26.9457258 L73.6038458,23.410242 C73.9057813,23.1779839 74.1070716,22.8321774 74.1612652,22.4579839 C74.2154588,22.0786291 74.112233,21.6915323 73.8825555,21.3844355 L67.3612653,12.7573389 C67.1315879,12.4528228 66.7883621,12.2541131 66.4090073,12.1973389 C66.0244912,12.1431454 65.6451363,12.2463712 65.3406202,12.4760486 L61.0154589,15.7457259 C58.1509427,13.1031452 54.8786847,11.0283067 51.2606203,9.56766127 L52.0322332,4.03217745 C52.0864267,3.65282261 51.9832009,3.26830647 51.7561041,2.96120973 C51.5264267,2.6566936 51.1832009,2.45798394 50.8064267,2.40120975 L40.1044916,0.914758202 C39.7070723,0.860564654 39.3380401,0.961209812 39.0335239,1.19346789 C38.7290078,1.42056466 38.5302981,1.76637112 38.4735239,2.14572592 L37.7638465,7.28120981 C33.7715883,7.44895174 29.9419113,8.32637111 26.3522338,9.89540339 L23.0877177,5.58314532 C22.6077177,4.94830659 21.7070725,4.82443564 21.0670725,5.301855 L12.4477179,11.8128227 C12.1432018,12.0450808 11.9419115,12.3883066 11.8877179,12.7650808 C11.8335244,13.1444356 11.9367502,13.5289518 12.1664276,13.8360485 L15.2528792,17.9263712 C12.5767503,20.8889518 10.5173952,24.233468 9.11094341,27.8954032 L3.70707218,27.1470161 C3.3251367,27.0928226 2.9457819,27.1960484 2.63868508,27.4231452 C2.3367496,27.6554033 2.13287864,27.9960484 2.08126571,28.3754032 L0.599975382,39.0747578 C0.489007636,39.8644352 1.03868506,40.5921772 1.82836251,40.7005643 L7.0541692,41.4283062 C7.28900791,45.3354031 8.21029827,49.1005644 9.80771767,52.6566929 L5.25804022,56.0941123 C4.6283628,56.5741123 4.49674994,57.4773381 4.98191119,58.1147574 L11.4954594,66.734112 C11.9754594,67.3715314 12.8786852,67.4902411 13.5109433,67.0128217 L17.9548143,63.6605636 C20.8193305,66.1870151 24.1328789,68.202499 27.6425561,69.5599185 L26.8322335,75.4592733 C26.7212657,76.2489507 27.2761045,76.9741121 28.0632012,77.0850798 L38.7625558,78.5715313 C38.827072,78.5818539 38.8967494,78.5870152 38.9638461,78.5870152 C39.6709429,78.5870152 40.2902978,78.0657248 40.3909429,77.3457249 L41.1961042,71.6089505 C44.9793299,71.3895957 48.6335234,70.5224989 52.0838457,69.0257246 L55.769007,73.9031439 C56.2541682,74.5405633 57.157394,74.6566923 57.7896521,74.1844342 L66.4167487,67.678628 C66.7238455,67.4489506 66.9225552,67.1005635 66.9767487,66.7237893 C67.0309422,66.3444345 66.9277164,65.9599183 66.7006197,65.6528216 L63.1728778,60.981854 C65.7122327,58.1766927 67.7070712,54.9947574 69.113523,51.5005636 L75.1522325,52.3392732 C75.9161035,52.4347571 76.6696519,51.8979829 76.7832003,51.1083055 L78.2722326,40.4063704 C78.3779927,39.6272051 77.82844,38.8966734 77.0386845,38.7883065 C77.0386845,38.7883065 77.82844,38.8966734 77.0386845,38.7883065 L77.0386845,38.7883065 M47.570281,50.5303679 C45.1444746,52.3652067 42.2541521,53.3355293 39.2218942,53.3355293 C34.8270556,53.3355293 30.785765,51.3303679 28.1406035,47.8284323 C23.5341519,41.730368 24.7496357,33.0206906 30.8554423,28.4064968 C33.2812487,26.571658 36.1715712,25.6039162 39.2012487,25.6039162 C43.5960872,25.6039162 47.6296358,27.6064969 50.2696358,31.1006907 C54.8812689,37.2012349 53.6734816,45.921308 47.570281,50.5303679 C47.570281,50.5303679 53.6734816,45.921308 47.570281,50.5303679 L47.570281,50.5303679" id="Shape" fill="rgb(70,75,84)"></path>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/data/images/album-icon.svg b/data/images/album-icon.svg
new file mode 100644
index 000000000..abdfa6d9e
--- /dev/null
+++ b/data/images/album-icon.svg
@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="100px" height="100px" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
+    <title>album-icon</title>
+    <description>Created with Sketch (http://www.bohemiancoding.com/sketch)</description>
+    <defs></defs>
+    <g id="Page 1" fill="rgb(223,223,223)" fill-rule="evenodd">
+        <path d="M50,100 C77.6142389,100 100,77.6142389 100,50 C100,22.3857611 77.6142389,0 50,0 C22.3857611,0 0,22.3857611 0,50 C0,77.6142389 22.3857611,100 50,100 Z M50,100" id="Oval 1" fill="rgb(168,183,209)"></path>
+        <path d="M50,58 C54.4182782,58 58,54.4182782 58,50 C58,45.5817218 54.4182782,42 50,42 C45.5817218,42 42,45.5817218 42,50 C42,54.4182782 45.5817218,58 50,58 Z M50,58" id="Oval 2" stroke="rgb(167,167,167)" stroke-width="1" fill="rgb(255,255,255)"></path>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/data/images/apply-checked.svg b/data/images/apply-checked.svg
new file mode 100644
index 000000000..e7d141f7e
--- /dev/null
+++ b/data/images/apply-checked.svg
@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="51px" height="50px" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
+    <title>Slice 1</title>
+    <description>Created with Sketch (http://www.bohemiancoding.com/sketch)</description>
+    <defs></defs>
+    <g id="Page 1" fill="rgb(223,223,223)" fill-rule="evenodd">
+        <g id="Group" fill="rgb(0,0,0)">
+            <path d="M46,0.75402832 L5.24000168,0.75402832 C2.78800178,0.75402832 0.791001797,2.74902833 0.791001797,5.2030282 L0.791001797,44.8820291 C0.791001797,47.3350291 2.78800178,49.3320289 5.24000168,49.3320289 L46,49.3320289 C48.4519999,49.3320289 50.4489999,47.3350289 50.4489999,44.8820291 L50.4489999,5.2030282 C50.4489746,2.74902344 48.4520264,0.75402832 46,0.75402832 L46,0.75402832 L46,0.75402832 M46.5689697,44.881958 C46.5689697,45.197958 46.3149697,45.451958 45.9999697,45.451958 L5.2399714,45.451958 C4.9249714,45.451958 4.67097139,45.197958 4.67097139,44.881958 L4.67097139,5.20295715 C4.67097139,4.88895714 4.9249714,4.63095713 5.2399714,4.63095713 L46,4.63095713 C46.315,4.63095713 46.569,4.88895711 46.569,5.20295715 L46.569,44.881958 L46.569,44.881958 L46.5689697,44.881958" id="Shape" fill="rgb(62,115,0)"></path>
+            <path d="M39.992981,11.0159912 C39.112981,10.3459912 37.857981,10.5139912 37.1889811,11.3919912 L20.0559816,33.827992 L13.6759815,26.2839919 C12.9629815,25.4409919 11.6999816,25.3349919 10.8579814,26.0479919 C10.0139815,26.7619919 9.90898144,28.0239918 10.6219814,28.865992 L18.6079815,38.3099922 C18.9889815,38.7599922 19.5469815,39.0189922 20.1349815,39.0189922 C20.1519815,39.0189922 20.1679815,39.0189922 20.1849815,39.0179922 C20.7899815,39.0029922 21.3569815,38.7139922 21.7249814,38.2329922 L40.3689805,13.8199921 C41.0390015,12.94104 40.8709717,11.6870117 39.992981,11.0159912 C39.992981,11.0159912 40.8709717,11.6870117 39.992981,11.0159912 L39.992981,11.0159912" id="Shape" fill="rgb(62,115,0)"></path>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/data/images/arrow-down-double.svg b/data/images/arrow-down-double.svg
new file mode 100644
index 000000000..8653d24fe
--- /dev/null
+++ b/data/images/arrow-down-double.svg
@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="42px" height="42px" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
+    <title>arrow-up-double</title>
+    <description>Created with Sketch (http://www.bohemiancoding.com/sketch)</description>
+    <defs></defs>
+    <g id="Page 1" fill="rgb(223,223,223)" fill-rule="evenodd">
+        <g id="Group" fill="rgb(0,0,0)">
+            <path d="M2.35400391,38.0279541 L39.5150032,38.0279541 C40.6710032,38.0279541 41.7310033,37.3789541 42.2560031,36.3469541 C42.4830031,35.9079541 42.5930032,35.4279541 42.5930032,34.9499542 C42.5930032,34.3129541 42.3930032,33.6759541 42.0040032,33.1419542 L23.4220024,7.55995345 C22.8430024,6.76095343 21.9170024,6.2909534 20.9320024,6.2909534 C19.9470024,6.2909534 19.0210024,6.7629534 18.4430023,7.55995345 L-0.137997031,33.1419542 C-0.817997038,34.0769542 -0.912997007,35.3199542 -0.388997018,36.3469541 C0.135986328,37.3790283 1.19702148,38.0279541 2.35400391,38.0279541 C2.35400391,38.0279541 1.19702148,38.0279541 2.35400391,38.0279541 L2.35400391,38.0279541" id="Shape" fill="rgb(100,100,100)" transform="translate(-207.065652, -202.840546) rotate(-180) translate(207.065652, 202.840546)"></path>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/data/images/arrow-right-double.svg b/data/images/arrow-right-double.svg
new file mode 100644
index 000000000..5163a76fe
--- /dev/null
+++ b/data/images/arrow-right-double.svg
@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="42px" height="42px" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
+    <title>arrow-right-double</title>
+    <description>Created with Sketch (http://www.bohemiancoding.com/sketch)</description>
+    <defs></defs>
+    <g id="Page 1" fill="rgb(223,223,223)" fill-rule="evenodd">
+        <g id="Group" fill="rgb(0,0,0)">
+            <path d="M7.32121281,41.8181084 L34.5477114,41.8181084 C35.3946701,41.8181084 36.1712932,40.932299 36.5559413,39.5237392 C36.7222559,38.9245553 36.8028488,38.2694112 36.8028488,37.616997 C36.8028488,36.7475662 36.6563162,35.8781353 36.3713102,35.1492876 L22.7569611,0.232836341 C22.3327491,-0.857705628 21.6543029,-1.49920092 20.9326296,-1.49920092 C20.2109563,-1.49920092 19.5325101,-0.854975896 19.1090307,0.232836341 L5.4954153,35.1492876 C4.99720429,36.4254537 4.9276013,38.1220039 5.31151684,39.5237392 C5.69615284,40.9324003 6.47353431,41.8181084 7.32121281,41.8181084 C7.32121281,41.8181084 6.47353431,41.8181084 7.32121281,41.8181084 L7.32121281,41.8181084" id="Shape" fill="rgb(100,100,100)" transform="translate(-213.065652, -198.840546) rotate(-270) translate(213.065652, 198.840546)"></path>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/data/images/arrow-up-double.svg b/data/images/arrow-up-double.svg
new file mode 100644
index 000000000..5cc0c9e07
--- /dev/null
+++ b/data/images/arrow-up-double.svg
@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="42px" height="42px" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
+    <title>arrow-up-double</title>
+    <description>Created with Sketch (http://www.bohemiancoding.com/sketch)</description>
+    <defs></defs>
+    <g id="Page 1" fill="rgb(223,223,223)" fill-rule="evenodd">
+        <g id="Group" fill="rgb(0,0,0)">
+            <path d="M2.35400391,38.0279541 L39.5150032,38.0279541 C40.6710032,38.0279541 41.7310033,37.3789541 42.2560031,36.3469541 C42.4830031,35.9079541 42.5930032,35.4279541 42.5930032,34.9499542 C42.5930032,34.3129541 42.3930032,33.6759541 42.0040032,33.1419542 L23.4220024,7.55995345 C22.8430024,6.76095343 21.9170024,6.2909534 20.9320024,6.2909534 C19.9470024,6.2909534 19.0210024,6.7629534 18.4430023,7.55995345 L-0.137997031,33.1419542 C-0.817997038,34.0769542 -0.912997007,35.3199542 -0.388997018,36.3469541 C0.135986328,37.3790283 1.19702148,38.0279541 2.35400391,38.0279541 C2.35400391,38.0279541 1.19702148,38.0279541 2.35400391,38.0279541 L2.35400391,38.0279541" id="Shape" fill="rgb(100,100,100)"></path>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/data/images/back.svg b/data/images/back.svg
new file mode 100644
index 000000000..3d131d713
--- /dev/null
+++ b/data/images/back.svg
@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="51px" height="51px" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
+    <title>back</title>
+    <description>Created with Sketch (http://www.bohemiancoding.com/sketch)</description>
+    <defs></defs>
+    <g id="Page 1" fill="rgb(223,223,223)" fill-rule="evenodd">
+        <path d="M2,23.6164666 C2,24.3104666 2.331,24.9594667 2.89099997,25.3654666 L22.791999,39.8204665 C23.1939991,40.1134665 23.675999,40.2324665 24.153999,40.2134665 L24.153999,40.2134665 L24.156999,40.2134665 C24.300999,40.2054665 24.442999,40.1924665 24.582999,40.1564665 C24.741999,40.1234665 24.894999,40.0734665 25.044999,39.9974665 C25.768999,39.6294665 26.224999,38.8834665 26.224999,38.0704665 L26.223999,28.6624665 L45.7469997,28.6624665 C48.5349998,28.6624665 50.7919998,26.4044666 50.7919998,23.6154665 C50.7909998,20.8304665 48.5349998,18.5704665 45.7479996,18.5704665 L26.2249989,18.5704665 L26.2239989,14.4574666 L26.2239989,9.16146655 C26.2239989,8.97946655 26.1929989,8.80346654 26.1499989,8.63346655 C26.1369989,8.58446655 26.1219989,8.53646655 26.1069989,8.49046654 C26.0629989,8.35746654 26.0069989,8.23146654 25.9409989,8.11146654 C25.9199989,8.07446653 25.9039989,8.03746653 25.8809989,8.00346653 C25.7969989,7.87046653 25.7009989,7.74446653 25.5909989,7.63346653 C25.5809989,7.62446653 25.5699989,7.61946653 25.5599989,7.61146653 C25.4099989,7.46446653 25.2369989,7.33546653 25.0429989,7.23646653 C24.3189989,6.86746654 23.4479989,6.93346652 22.7909988,7.41246653 L2.8909992,21.8684669 C2.33099365,22.2754022 2,22.9245721 2,23.6164666 C2,23.6164666 2,22.9245721 2,23.6164666 L2,23.6164666" id="Shape" fill="rgb(120,120,120)"></path>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/data/images/cancel.svg b/data/images/cancel.svg
new file mode 100644
index 000000000..1c94702f7
--- /dev/null
+++ b/data/images/cancel.svg
@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="51px" height="50px" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
+    <title>Slice 1</title>
+    <description>Created with Sketch (http://www.bohemiancoding.com/sketch)</description>
+    <defs></defs>
+    <g id="Page 1" fill="rgb(223,223,223)" fill-rule="evenodd">
+        <g id="Group" fill="rgb(0,0,0)">
+            <path d="M45.8870239,0.75402832 L5.1270256,0.75402832 C2.6750257,0.75402832 0.678025723,2.74902833 0.678025723,5.2030282 L0.678025723,44.8820291 C0.678025723,47.3350291 2.6750257,49.3320289 5.1270256,49.3320289 L45.8870239,49.3320289 C48.3390238,49.3320289 50.3360238,47.3350289 50.3360238,44.8820291 L50.3360238,5.2030282 C50.3359985,2.74902344 48.3389893,0.75402832 45.8870239,0.75402832 L45.8870239,0.75402832 L45.8870239,0.75402832 M46.4559937,44.881958 C46.4559937,45.197958 46.2019936,45.451958 45.8869936,45.451958 L5.12699533,45.451958 C4.81199533,45.451958 4.55799532,45.197958 4.55799532,44.881958 L4.55799532,5.20295715 C4.55799532,4.88895714 4.81199533,4.63095713 5.12699533,4.63095713 L45.8869936,4.63095713 C46.2019936,4.63095713 46.4559937,4.88895711 46.4559937,5.20295715 L46.4559937,44.881958 L46.4559937,44.881958 L46.4559937,44.881958" id="Shape" fill="rgb(100,100,100)"></path>
+            <path d="M39.4439697,11.6949463 C38.6629697,10.9139463 37.3969698,10.9139463 36.6159697,11.6949463 L25.4949694,22.8149462 L14.3749695,11.6949463 C13.5939695,10.9139463 12.3279696,10.9139463 11.5469694,11.6949463 C10.7659693,12.4759463 10.7659694,13.7419462 11.5469694,14.5229464 L22.6669693,25.6429462 L11.545969,36.7639465 C10.764969,37.5449466 10.764969,38.8109465 11.545969,39.5919466 C11.936969,39.9829466 12.447969,40.1779466 12.959969,40.1779466 C13.4719691,40.1779466 13.982969,39.9829466 14.3739691,39.5919466 L25.4949694,28.4709463 L36.6159697,39.5919466 C37.0069697,39.9829466 37.5179697,40.1779466 38.0299697,40.1779466 C38.5419697,40.1779466 39.0529697,39.9829466 39.4439697,39.5919466 C40.2249697,38.8109466 40.2249697,37.5449467 39.4439697,36.7639465 L28.3229694,25.6429462 L39.4439697,14.5229464 C40.2260132,13.7419434 40.2260132,12.4770508 39.4439697,11.6949463 C39.4439697,11.6949463 40.2260132,12.4770508 39.4439697,11.6949463 L39.4439697,11.6949463" id="Shape" fill="rgb(100,100,100)"></path>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/data/images/charts.svg b/data/images/charts.svg
new file mode 100644
index 000000000..20c612526
--- /dev/null
+++ b/data/images/charts.svg
@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="51px" height="41px" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
+    <title>charts</title>
+    <description>Created with Sketch (http://www.bohemiancoding.com/sketch)</description>
+    <defs></defs>
+    <g id="Page 1" fill="rgb(223,223,223)" fill-rule="evenodd">
+        <g id="Group" fill="rgb(0,0,0)">
+            <path d="M8.80700684,32.8959961 L13,32.8959961 C14.337,32.8959961 15.4200001,31.8119961 15.4200001,30.4749961 L15.4200001,13.7819953 C15.4200001,12.4449953 14.3370001,11.3619952 13,11.3619952 L8.80700016,11.3619952 C7.47000015,11.3619952 6.38700008,12.4449952 6.38700008,13.7819953 L6.38700008,30.4749961 C6.38702393,31.8120117 7.4699707,32.8959961 8.80700684,32.8959961 C8.80700684,32.8959961 7.4699707,32.8959961 8.80700684,32.8959961 L8.80700684,32.8959961" id="Shape" fill="rgb(169,183,209)"></path>
+            <path d="M22.8070068,32.8959961 L27,32.8959961 C28.337,32.8959961 29.4200001,31.8119961 29.4200001,30.4749961 L29.4200001,22.7819963 C29.4200001,21.4449962 28.3370001,20.3619962 27,20.3619962 L22.8070002,20.3619962 C21.4700001,20.3619962 20.3870001,21.4449961 20.3870001,22.7819963 L20.3870001,30.4749961 C20.3870239,31.8120117 21.4699707,32.8959961 22.8070068,32.8959961 C22.8070068,32.8959961 21.4699707,32.8959961 22.8070068,32.8959961 L22.8070068,32.8959961" id="Shape" fill="rgb(169,183,209)"></path>
+            <path d="M36.8070068,32.8959961 L41,32.8959961 C42.337,32.8959961 43.4200001,31.8119961 43.4200001,30.4749961 L43.4200001,2.7819953 C43.4200001,1.44499528 42.3370001,0.36199522 41,0.36199522 L36.8070002,0.36199522 C35.4700001,0.36199522 34.3870001,1.44499516 34.3870001,2.7819953 L34.3870001,30.4749961 C34.3870239,31.8120117 35.4699707,32.8959961 36.8070068,32.8959961 C36.8070068,32.8959961 35.4699707,32.8959961 36.8070068,32.8959961 L36.8070068,32.8959961" id="Shape" fill="rgb(169,183,209)"></path>
+            <path d="M48.3120117,36.1879883 L2.41998291,36.1879883 C1.31898296,36.1879883 0.427982926,37.0799883 0.427982926,38.1799883 L0.427982926,38.3199883 C0.427982926,39.4209882 1.31998295,40.3119882 2.41998291,40.3119882 L48.3119812,40.3119882 C49.4119812,40.3119882 50.3039812,39.4199882 50.3039812,38.3199883 L50.3039812,38.1799883 C50.3040161,37.0799561 49.4110107,36.1879883 48.3120117,36.1879883 L48.3120117,36.1879883 L48.3120117,36.1879883" id="Shape" fill="rgb(169,183,209)"></path>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/data/images/close.svg b/data/images/close.svg
new file mode 100644
index 000000000..d77d211f3
--- /dev/null
+++ b/data/images/close.svg
@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="44px" height="50px" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
+    <title>close</title>
+    <description>Created with Sketch (http://www.bohemiancoding.com/sketch)</description>
+    <defs></defs>
+    <g id="Page 1" fill="rgb(223,223,223)" fill-rule="evenodd">
+        <g id="Group" fill="rgb(0,0,0)">
+            <path d="M3.35400391,49.7090466 L40.5150032,49.7090466 C41.6710032,49.7090466 42.7310033,49.0600466 43.2560031,48.0280466 C43.4830031,47.5890466 43.5930032,47.1090466 43.5930032,46.6310467 C43.5930032,45.9940466 43.3930032,45.3570466 43.0040032,44.8230467 L24.4220024,19.241046 C23.8430024,18.4420459 22.9170024,17.9720459 21.9320024,17.9720459 C20.9470024,17.9720459 20.0210024,18.4440459 19.4430023,19.241046 L0.862002969,44.8230467 C0.182002962,45.7580467 0.0870029926,47.0010467 0.611002982,48.0280466 C1.13598633,49.0601208 2.19702148,49.7090466 3.35400391,49.7090466 C3.35400391,49.7090466 2.19702148,49.7090466 3.35400391,49.7090466 L3.35400391,49.7090466" id="Shape" fill="rgb(100,100,100)"></path>
+            <path d="M42.1060181,0.655003786 L2.18701935,0.655003786 C1.24001932,0.655003786 0.472019315,1.42300379 0.472019315,2.37100375 L0.472019315,10.1380039 C0.472019315,11.086004 1.24001932,11.8540039 2.18701935,11.8540039 L42.1060181,11.8540039 C43.0540181,11.8540039 43.822018,11.0860039 43.822018,10.1380039 L43.822018,2.37100375 C43.8220215,1.42294812 43.0549927,0.655003786 42.1060181,0.655003786 L42.1060181,0.655003786 L42.1060181,0.655003786" id="Shape" fill="rgb(100,100,100)"></path>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/data/images/collection.svg b/data/images/collection.svg
new file mode 100644
index 000000000..1ab9eb581
--- /dev/null
+++ b/data/images/collection.svg
@@ -0,0 +1,23 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="66px" height="66px" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
+    <title>collection</title>
+    <description>Created with Sketch (http://www.bohemiancoding.com/sketch)</description>
+    <defs></defs>
+    <g id="Page 1" fill="rgb(223,223,223)" fill-rule="evenodd">
+        <g id="g442" fill="rgb(174,183,198)">
+            <path d="M16.5,11 L53.1087508,11 C54.0737508,11 54.8562508,11.7825 54.8562508,12.7475 L54.8562508,15.69625 C54.8562508,16.6625 54.0737508,17.445 53.1087508,17.445 L16.5,17.4450002 C15.535,17.4450002 14.7512499,16.6625002 14.7512499,15.6962501 L14.7512499,12.7475002 C14.7512499,11.7825 15.535,11 16.5,11" id="path444" fill="rgb(175,185,199)"></path>
+        </g>
+        <g id="g442" fill="rgb(0,0,0)">
+            <path d="M16.5,34 L53.1087508,34 C54.0737508,34 54.8562508,34.7825 54.8562508,35.7475 L54.8562508,38.69625 C54.8562508,39.6625 54.0737508,40.445 53.1087508,40.445 L16.5,40.4450002 C15.535,40.4450002 14.7512499,39.6625002 14.7512499,38.6962501 L14.7512499,35.7475002 C14.7512499,34.7825 15.535,34 16.5,34" id="path444" fill="rgb(174,183,198)"></path>
+        </g>
+        <g id="g442" fill="rgb(0,0,0)">
+            <path d="M16.5,46 L53.1087508,46 C54.0737508,46 54.8562508,46.7825 54.8562508,47.7475 L54.8562508,50.69625 C54.8562508,51.6625 54.0737508,52.445 53.1087508,52.445 L16.5,52.4450002 C15.535,52.4450002 14.7512499,51.6625002 14.7512499,50.6962501 L14.7512499,47.7475002 C14.7512499,46.7825 15.535,46 16.5,46" id="path444" fill="rgb(174,183,198)"></path>
+        </g>
+        <g id="g442" fill="rgb(175,185,199)">
+            <path d="M16.5,22 L53.1087508,22 C54.0737508,22 54.8562508,22.7825 54.8562508,23.7475 L54.8562508,26.69625 C54.8562508,27.6625 54.0737508,28.445 53.1087508,28.445 L16.5,28.4450002 C15.535,28.4450002 14.7512499,27.6625002 14.7512499,26.6962501 L14.7512499,23.7475002 C14.7512499,22.7825 15.535,22 16.5,22" id="path444" fill="rgb(189,198,209)"></path>
+        </g>
+        <g id="g438" fill="rgb(0,0,0)">
+            <path d="M62,63.9687508 C60.3075,63.9687508 58.9424999,62.6000008 58.9424999,60.9100008 L58.9424999,41.1200011 L8.79499984,41.1200011 L8.79499984,60.9100008 C8.79499984,62.6000008 7.42374983,63.9687508 5.7349999,63.9687508 C4.04624996,63.9687508 2.67624986,62.6000008 2.67624986,60.9100008 L2.67624986,38.0599999 C2.67624986,36.3699999 4.04624981,35 5.7349999,35 L62.0000012,35 C63.6900012,35 65.0587512,36.3699999 65.0587512,38.0599999 L65.0587512,60.9100008 C65.05875,62.6000008 63.69,63.9687508 62,63.9687508" id="path440" fill="rgb(158,168,186)"></path>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/data/images/configure.svg b/data/images/configure.svg
new file mode 100644
index 000000000..e3886b372
--- /dev/null
+++ b/data/images/configure.svg
@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="51px" height="50px" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
+    <title>configure</title>
+    <description>Created with Sketch (http://www.bohemiancoding.com/sketch)</description>
+    <defs></defs>
+    <g id="Page 1" fill="rgb(223,223,223)" fill-rule="evenodd">
+        <path d="M38.3619998,9.83023646 C38.3619998,5.92523648 36.4219998,2.29423668 33.1729997,0.116236707 C32.9599997,-0.0247632954 32.6889997,-0.038763294 32.4639997,0.081236707 C32.2379997,0.201236704 32.0989997,0.435236709 32.0979997,0.689236687 L32.0979997,1.64323668 L32.0979997,5.93323665 L32.0979997,7.64823668 L29.4719998,11.6482367 L23.89,11.6482367 L21.2640001,7.64823668 L21.2640001,0.689236568 C21.2640001,0.43523656 21.1240001,0.201236563 20.899,0.0812365878 C20.675,-0.0387634095 20.4030001,-0.0237634089 20.1900001,0.116236588 C16.9390001,2.29423656 15,5.9252366 15,9.83023634 C15,14.5302361 19.7350001,18.1702365 21.6830001,19.4672364 L20.108,42.3472356 C20.108,45.9722356 23.0569999,48.9212355 26.6819999,48.9212355 C30.3069999,48.9212355 33.2559998,45.9722356 33.2549999,42.2992352 L31.6799998,19.4672345 C33.6269992,18.1703243 38.3619998,14.5294552 38.3619998,9.83023646 C38.3619998,9.83023646 38.3619998,14.5294552 38.3619998,9.83023646 L38.3619998,9.83023646 M28.2910007,42.3473263 C28.2900007,43.2373263 27.5690007,43.9543263 26.6810006,43.9543263 C25.7920007,43.9533263 25.0740007,43.2343263 25.0720007,42.3473263 C25.0720007,41.4573263 25.7920007,40.7383263 26.6810006,40.7363264 C27.5690005,40.7384396 28.2899936,41.4574337 28.2910007,42.3473263 C28.2920001,42.3473263 28.2899936,42.3473263 28.2910007,42.3473263 C28.2910007,42.3473263 28.2899936,42.3473263 28.2910007,42.3473263 L28.2910007,42.3473263" id="Shape" fill="rgb(69,74,83)"></path>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/data/images/dashboard.svg b/data/images/dashboard.svg
new file mode 100644
index 000000000..54c2571fa
--- /dev/null
+++ b/data/images/dashboard.svg
@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="51px" height="51px" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
+    <title>dashboard</title>
+    <description>Created with Sketch (http://www.bohemiancoding.com/sketch)</description>
+    <defs></defs>
+    <g id="Page 1" fill="rgb(223,223,223)" fill-rule="evenodd">
+        <g id="Group" fill="rgb(0,0,0)">
+            <path d="M25.6019897,3.49902344 C11.98699,3.49902344 0.910989761,14.5770235 0.910989761,28.1920242 C0.910989761,33.9540243 2.93898988,39.5620241 6.62398958,43.9850245 C6.94898957,44.3770244 7.4329896,44.6020244 7.94198954,44.6020244 L43.2639881,44.6020244 C43.7739881,44.6020244 44.2559881,44.3760244 44.5819881,43.9850245 C48.2659881,39.5620246 50.2949879,33.9540243 50.2949879,28.1920242 C50.2949829,14.5769043 39.21698,3.49902344 25.6019897,3.49902344 L25.6019897,3.49902344 L25.6019897,3.49902344 M42.4400024,41.1708984 L8.7630043,41.1708984 C5.90700436,37.4658985 4.3420043,32.8878984 4.3420043,28.1918983 C4.3420043,16.4688988 13.8780046,6.93189812 25.6010051,6.93189812 C37.3260055,6.93189812 46.8630042,16.4688978 46.8630042,28.1918983 C46.8629761,32.8879395 45.2969971,37.4660645 42.4400024,41.1708984 C42.4400024,41.1708984 45.2969971,37.4660645 42.4400024,41.1708984 L42.4400024,41.1708984" id="Shape" fill="rgb(168,182,207)"></path>
+            <path d="M36.0799866,21.4050293 C35.6349866,21.4050293 35.2319866,21.5710293 34.9169866,21.8380293 L34.9119866,21.8340293 L23.7929861,31.0330297 L23.7939861,31.0330297 C22.9419862,31.6120296 22.3829861,32.5890296 22.3829861,33.6960298 C22.3829861,35.4740298 23.8249862,36.9170297 25.6039861,36.9170297 C26.4989861,36.9170297 27.3089861,36.5490297 27.890986,35.9600297 L27.892986,35.9600297 L27.917986,35.9270297 C28.068986,35.7730297 28.198986,35.6020297 28.317986,35.4180297 L37.5019861,24.34103 L37.4979861,24.33903 C37.7429861,24.02903 37.8939861,23.64403 37.8939861,23.2200301 C37.894989,22.2180176 37.0820007,21.4050293 36.0799866,21.4050293 L36.0799866,21.4050293 L36.0799866,21.4050293" id="Shape" fill="rgb(168,182,207)"></path>
+            <path d="M9.35198975,27.4318848 L7.5729897,27.4318848 C7.00498968,27.4318848 6.54398966,27.8918848 6.54398966,28.4608848 C6.54398966,29.0288848 7.00498965,29.4898849 7.5729897,29.4898849 L9.35198975,29.4898849 C9.91998976,29.4898849 10.3809898,29.0288849 10.3809898,28.4608848 C10.381012,27.8920898 9.92001343,27.4318848 9.35198975,27.4318848 L9.35198975,27.4318848 L9.35198975,27.4318848" id="Shape" fill="rgb(182,195,216)"></path>
+            <path d="M13.1270142,14.9970703 C12.7250142,14.5970703 12.0740142,14.5950703 11.6720141,14.9970703 C11.270014,15.3990703 11.2700141,16.0520703 11.6720141,16.4540703 L13.0110141,17.7930703 C13.2120141,17.9940703 13.4770141,18.0950703 13.7400141,18.0950703 C14.0030141,18.0950703 14.2660141,17.9940703 14.4680141,17.7930703 C14.8700141,17.3910703 14.8700141,16.7380704 14.4680141,16.3370703 L13.1270142,14.9970703 L13.1270142,14.9970703 L13.1270142,14.9970703" id="Shape" fill="rgb(182,195,216)"></path>
+            <path d="M25.8250122,12.7929688 C26.3940122,12.7929688 26.8550122,12.3319688 26.8550122,11.7629688 L26.8550122,10.0609688 C26.8550122,9.49196875 26.3940122,9.03096879 25.8250122,9.03096879 C25.2560122,9.03096879 24.7960122,9.49196878 24.7960122,10.0609688 L24.7960122,11.7629688 C24.79599,12.3320312 25.256012,12.7929688 25.8250122,12.7929688 C25.8250122,12.7929688 25.256012,12.7929688 25.8250122,12.7929688 L25.8250122,12.7929688" id="Shape" fill="rgb(182,195,216)"></path>
+            <path d="M38.3519897,15.0209961 L37.0359898,16.3369961 C36.6349898,16.7389961 36.6349898,17.3909961 37.0379898,17.792996 C37.2389898,17.9939961 37.5019897,18.094996 37.7649898,18.094996 C38.0289898,18.094996 38.2919898,17.993996 38.4939897,17.792996 L39.8099897,16.475996 C40.2119897,16.073996 40.2119897,15.4209961 39.8099897,15.019996 C39.4079897,14.618996 38.7550049,14.6169434 38.3519897,15.0209961 C38.3519897,15.0209961 38.7550049,14.6169434 38.3519897,15.0209961 L38.3519897,15.0209961" id="Shape" fill="rgb(182,195,216)"></path>
+            <path d="M43.5960083,27.4331055 L41.7420083,27.4331055 C41.1740083,27.4331055 40.7130083,27.8941055 40.7130083,28.4621055 C40.7130083,29.0311055 41.1740083,29.4911056 41.7420083,29.4911056 L43.5960083,29.4911056 C44.1640083,29.4911056 44.6250083,29.0311055 44.6250083,28.4621055 C44.625,27.894043 44.1640015,27.4331055 43.5960083,27.4331055 L43.5960083,27.4331055 L43.5960083,27.4331055" id="Shape" fill="rgb(182,195,216)"></path>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/data/images/delete.svg b/data/images/delete.svg
new file mode 100644
index 000000000..ec8a35bda
--- /dev/null
+++ b/data/images/delete.svg
@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="70px" height="70px" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
+    <title>delete</title>
+    <description>Created with Sketch (http://www.bohemiancoding.com/sketch)</description>
+    <defs>
+        <path d="M35,67 C52.6731129,67 67,52.6731129 67,35 C67,22.9669417 50.5408787,7.02047947 50.5408787,7.02047947 C50.5408787,7.02047947 40.6400546,3 35,3 C17.3268871,3 3,17.3268871 3,35 C3,52.6731129 17.3268871,67 35,67 Z M35,67" id="path-1"></path>
+    </defs>
+    <g id="Page 1" fill="rgb(223,223,223)" fill-rule="evenodd">
+        <use id="Oval 1" xlink:href="#path-1"></use>
+        <use id="Oval 1-1" stroke="rgb(99,99,99)" stroke-width="5" fill="none" xlink:href="#path-1"></use>
+        <path d="M40.2260666,29.9948845 L40.2260666,13.8649524 C40.2260666,12.4559492 39.054631,11.3119228 37.6151917,11.3119228 L32.3804739,11.3119228 C30.9496798,11.3119228 29.769599,12.4559494 29.769599,13.8649524 L29.769599,29.9948845 L13.9314432,29.9948845 C12.4790359,29.9948845 11.3119228,31.134705 11.3119228,32.5437082 L11.3119228,37.304877 C11.3119228,38.7138802 12.4833585,39.8537007 13.9314432,39.8537007 L29.769599,39.8537007 L29.769599,56.1434594 C29.769599,57.5482566 30.9496799,58.6880772 32.3804739,58.6880772 L37.6151917,58.6880772 C39.0589537,58.6880772 40.2260666,57.5482567 40.2260666,56.1434594 L40.2260666,39.8537007 L56.0728671,39.8537007 C57.5166291,39.8537007 58.6880649,38.7138802 58.6880649,37.304877 L58.6880649,32.5437082 C58.6924655,31.1305811 57.5166935,29.9948845 56.0728671,29.9948845 L40.2260666,29.9948845 Z M40.2260666,29.9948845" id="Shape" fill="rgb(73,73,73)" transform="translate(35, 35) rotate(-45) translate(-35, -35)"></path>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/data/images/downloading.svg b/data/images/downloading.svg
new file mode 100644
index 000000000..cad384b27
--- /dev/null
+++ b/data/images/downloading.svg
@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="52px" height="52px" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
+    <title>downloading</title>
+    <description>Created with Sketch (http://www.bohemiancoding.com/sketch)</description>
+    <defs></defs>
+    <g id="Page 1" fill="rgb(223,223,223)" fill-rule="evenodd">
+        <g id="Group" fill="rgb(0,0,0)">
+            <path d="M48.5140076,27.2529297 C46.9970076,27.2529297 45.7680075,28.4829297 45.7680075,29.9989297 L45.7680075,42.9829299 L7.21500611,42.9829299 L7.21500611,29.9989297 C7.21500611,28.4829297 5.98600614,27.2529297 4.46900606,27.2529297 C2.95300603,27.2529297 1.72300601,28.4829297 1.72300601,29.9989297 L1.72300601,45.7289293 C1.72300601,47.2449293 2.95300603,48.4749293 4.46900606,48.4749293 L48.5140042,48.4749293 C50.0300043,48.4749293 51.2590041,47.2449293 51.2590041,45.7289293 L51.2590041,29.9989297 C51.2590027,28.4829102 50.0289917,27.2529297 48.5140076,27.2529297 L48.5140076,27.2529297 L48.5140076,27.2529297" id="Shape" fill="rgb(152,152,151)"></path>
+            <path d="M25.7441548,39.9986642 C25.9703356,40.3456504 26.3286768,40.5520474 26.7118535,40.5520474 C27.0941433,40.5520474 27.4524846,40.3456504 27.6768914,39.9986642 L35.6597409,27.6437623 C35.9231749,27.2359538 35.9622021,26.6955328 35.757309,26.2468438 C35.5541898,25.7971576 35.1417426,25.5129879 34.6938161,25.5129879 L29.4978682,25.5129879 L29.4978682,9.13384359 C29.4978682,7.40389804 28.2507697,6 26.7118537,6 C25.1729378,6 23.9240654,7.40290102 23.9240654,9.13384359 L23.9240654,25.5129879 L18.7281176,25.5129879 C18.2793041,25.5149821 17.8677438,25.7981547 17.6655117,26.2468438 C17.4615055,26.6955328 17.4978718,27.2369509 17.7621928,27.6437623 L25.7441548,39.9986642 L25.7441548,39.9986642 L25.7441548,39.9986642" id="Shape" fill="rgb(131,166,82)"></path>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/data/images/filter.svg b/data/images/filter.svg
new file mode 100644
index 000000000..cf8f64074
--- /dev/null
+++ b/data/images/filter.svg
@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="50px" height="50px" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
+    <title>filter</title>
+    <description>Created with Sketch (http://www.bohemiancoding.com/sketch)</description>
+    <defs></defs>
+    <g id="Page 1" fill="rgb(223,223,223)" fill-rule="evenodd">
+        <g id="Group" fill="rgb(0,0,0)">
+            <path d="M29.0449829,42.8669434 L26.8129828,45.0699434 L22.750983,41.0619435 C22.429983,40.7459435 22.010983,40.5849435 21.591983,40.5849435 C21.171983,40.5849435 20.752983,40.7449435 20.431983,41.0619435 L16.3719831,45.0699434 L12.3119831,41.0619435 C11.6679831,40.4279435 10.6349831,40.4279435 9.99098301,41.0619435 L6.08898306,44.9169436 L3.68798304,42.5459435 L3.68798304,3.52094197 L29.0449834,3.52094197 L29.0449834,5.11894202 C30.2129834,5.53694203 31.3199835,6.08594203 32.3459835,6.74994206 L32.3459835,1.87094188 C32.3459835,0.958941877 31.6079835,0.220941901 30.6949835,0.220941901 L2.03698254,0.220941901 C1.12598252,0.220941901 0.385982513,0.958941877 0.385982513,1.87094188 L0.385982513,43.2359436 C0.385982513,43.6769436 0.563982517,44.1009436 0.87698251,44.4099436 L4.92898256,48.4119434 C5.57298255,49.0479434 6.60498255,49.0479434 7.24998266,48.4119434 L11.1529828,44.5569434 L15.2119828,48.5649433 C15.8569828,49.1999433 16.8899828,49.2019433 17.5329829,48.5649433 L21.5929828,44.5569434 L25.6549826,48.5649433 C25.9759826,48.8829433 26.3939826,49.0419433 26.8139827,49.0419433 C27.2339827,49.0419433 27.6519827,48.8839433 27.9739826,48.5649433 L31.8579827,44.7309432 C32.1709827,44.4219432 32.3469827,43.9979432 32.3469827,43.5579432 L32.3469827,33.613943 C31.3219827,34.276943 30.2139828,34.828943 29.0459826,35.246943 L29.0459826,42.8669434 L29.0459826,42.8669434 L29.0449829,42.8669434" id="Shape" fill="rgb(99,99,99)"></path>
+            <path d="M37.0369873,20.1810303 C37.0369873,16.1160302 35.2129873,12.4830303 32.3459873,10.03403 C31.3599873,9.19202995 30.2499874,8.48903 29.0449872,7.96202993 C27.4039872,7.24102992 25.5929873,6.83502996 23.685987,6.83502996 C20.306987,6.83502996 17.2299871,8.10102999 14.8789868,10.17003 L11.2319868,10.17003 L8.04698682,10.17003 C7.68198681,10.17003 7.38698679,10.46603 7.38698679,10.83103 C7.38698679,11.19403 7.68198678,11.49103 8.04698682,11.49103 L10.2759869,11.49103 L13.5689869,11.49103 C12.3149869,12.95003 11.3759868,14.68203 10.8419869,16.5880302 L8.10998678,16.5880302 L8.04798678,16.5880302 C7.68298677,16.5880302 7.38798676,16.8840302 7.38798676,17.2470301 C7.38798676,17.5490301 7.59198675,17.7930301 7.86698676,17.8720301 C7.92598676,17.8900301 7.98498676,17.9100301 8.04898676,17.9100301 L10.5479868,17.9100301 C10.4209868,18.6490302 10.3409868,19.4050301 10.3409868,20.18103 C10.3409868,21.19003 10.4619868,22.16703 10.6739868,23.1100299 L8.04898683,23.1100299 C8.02398683,23.1100299 7.99998683,23.1220299 7.97498683,23.1270299 C7.64698682,23.1630299 7.3889868,23.4330299 7.3889868,23.7710299 C7.3889868,24.13603 7.68398679,24.43103 8.04898683,24.43103 L8.27798683,24.43103 L11.0429869,24.43103 C11.7089869,26.41103 12.816987,28.1890299 14.2639869,29.63403 L10.801987,29.63403 L8.04998691,29.63403 C7.6849869,29.63403 7.38998688,29.92903 7.38998688,30.2940301 C7.38998688,30.6570301 7.68498687,30.9540301 8.04998691,30.9540301 L11.8829869,30.9540301 L15.8269869,30.9540301 C18.0339869,32.5670301 20.745987,33.5300301 23.6879869,33.5300301 C25.5949869,33.5300301 27.406987,33.1260301 29.0469871,32.4030301 C30.2519872,31.8760301 31.360987,31.1730301 32.3479872,30.3310301 C35.2130127,27.8809814 37.0369873,24.2459717 37.0369873,20.1810303 C37.0369873,20.1810303 37.0369873,24.2459717 37.0369873,20.1810303 L37.0369873,20.1810303 M29.0449829,28.875 C27.4859829,29.84 25.6549828,30.404 23.6859827,30.4069999 C20.2479827,30.4009999 17.2209826,28.7029999 15.3679829,26.104 L25.2249832,26.104 C26.1349832,26.104 26.8729832,25.3649999 26.8729832,24.4529999 C26.8729832,23.5429999 26.1349832,22.803 25.2249832,22.803 L13.9429836,22.803 C13.9009836,22.803 13.8609836,22.815 13.8179836,22.817 C13.5929836,21.975 13.4609836,21.0939999 13.4579836,20.1810001 C13.4609836,19.2540001 13.5969836,18.3600001 13.8289836,17.5060001 C13.8679836,17.5100001 13.9029836,17.5180001 13.9429836,17.5180001 L25.2249832,17.5180001 C26.1349832,17.5180001 26.8729832,16.7800001 26.8729832,15.8680001 C26.8729832,14.9560001 26.1349832,14.2180002 25.2249832,14.2180002 L15.398983,14.2180002 C17.253983,11.6440003 20.2679829,9.96100018 23.6859827,9.95200036 C25.6559827,9.95800036 27.4869828,10.5240004 29.0449829,11.4870003 C30.3819829,12.3130003 31.5119829,13.4340004 32.345983,14.7650004 C33.331983,16.3360004 33.911983,18.1880005 33.9159831,20.1810003 C33.9119831,22.1750003 33.3319831,24.0280002 32.345983,25.6000005 C31.5120239,26.9300537 30.382019,28.0510254 29.0449829,28.875 C29.0449829,28.875 30.382019,28.0510254 29.0449829,28.875 L29.0449829,28.875" id="Shape" fill="rgb(99,99,99)"></path>
+            <path d="M49.0710449,40.1020508 L37.3900452,28.4140511 L37.3510452,28.3750511 C36.1150452,30.4360512 34.4350453,32.195051 32.432045,33.5120511 L32.460045,33.5410511 L44.0450451,45.1290514 C45.1910451,46.2740514 47.0680451,46.2740514 48.2140452,45.1230514 L49.0700452,44.2710514 C50.2189941,43.125 50.2189941,41.2459717 49.0710449,40.1020508 C49.0710449,40.1020508 50.2189941,41.2459717 49.0710449,40.1020508 L49.0710449,40.1020508" id="Shape" fill="rgb(99,99,99)"></path>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/data/images/forward.svg b/data/images/forward.svg
new file mode 100644
index 000000000..20123c3bc
--- /dev/null
+++ b/data/images/forward.svg
@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="51px" height="51px" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
+    <title>forward</title>
+    <description>Created with Sketch (http://www.bohemiancoding.com/sketch)</description>
+    <defs></defs>
+    <g id="Page 1" fill="rgb(223,223,223)" fill-rule="evenodd">
+        <path d="M50.7929997,23.5983483 C50.7919997,22.9033483 50.4599997,22.2553482 49.9019998,21.8483483 L30.0010007,7.39334835 C29.6000007,7.10034834 29.1180007,6.98134835 28.6410007,7.00234835 L28.6410007,7.00234835 L28.6380007,7.00234835 C28.4940007,7.00834835 28.3510007,7.02134835 28.2110007,7.05834835 C28.0530007,7.09034835 27.8990007,7.14134835 27.7490007,7.21634836 C27.0260007,7.58634836 26.5690007,8.33034832 26.5690007,9.1433484 L26.5690007,18.5523488 L7.046,18.5523488 C4.25900006,18.5513488 2,20.8103487 2,23.5983488 C2.002,26.3843488 4.25900006,28.6433489 7.046,28.6433489 L26.5679994,28.6433489 L26.5689994,32.7563488 L26.5689994,38.0533487 C26.5689994,38.2343487 26.6009994,38.4113487 26.6439994,38.5813487 C26.6549994,38.6303487 26.6699994,38.6773487 26.6859994,38.7243487 C26.7299994,38.8563487 26.7849994,38.9823487 26.8519994,39.1033487 C26.8719994,39.1393487 26.8879994,39.1763487 26.9109994,39.2103487 C26.9959994,39.3433487 27.0909994,39.4703487 27.2019994,39.5813487 C27.2119994,39.5913487 27.2229994,39.5953487 27.2329994,39.6033487 C27.3829994,39.7493487 27.5559994,39.8793487 27.7489993,39.9773487 C28.4749994,40.3473487 29.3449993,40.2803487 30.0029993,39.8013487 L49.9019995,25.3473483 C50.4599919,24.9394127 50.7929997,24.2895104 50.7929997,23.5983483 C50.7929997,23.5983483 50.7929997,24.2895104 50.7929997,23.5983483 L50.7929997,23.5983483" id="Shape" fill="rgb(100,100,100)"></path>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/data/images/green-dot.svg b/data/images/green-dot.svg
new file mode 100644
index 000000000..6b234ccdb
--- /dev/null
+++ b/data/images/green-dot.svg
@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="35px" height="35px" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
+    <title>green-dot</title>
+    <description>Created with Sketch (http://www.bohemiancoding.com/sketch)</description>
+    <defs>
+        <radialGradient cx="50%" cy="50%" fx="50%" fy="50%" r="318.6198%" id="radialGradient-1">
+            <stop stop-color="rgb(161,211,62)" offset="0%"></stop>
+            <stop stop-color="rgb(59,144,30)" offset="100%"></stop>
+        </radialGradient>
+    </defs>
+    <g id="Page 1" fill="rgb(223,223,223)" fill-rule="evenodd">
+        <path d="M17.5,34 C26.6126988,34 34,26.6126988 34,17.5 C34,8.38730118 26.6126988,1 17.5,1 C8.38730118,1 1,8.38730118 1,17.5 C1,26.6126988 8.38730118,34 17.5,34 Z M17.5,34" id="Oval 1" stroke="rgb(255,255,255)" stroke-width="1" fill="url(#radialGradient-1)"></path>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/data/images/info.svg b/data/images/info.svg
new file mode 100644
index 000000000..5230327f1
--- /dev/null
+++ b/data/images/info.svg
@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="71px" height="71px" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
+    <title>info</title>
+    <description>Created with Sketch (http://www.bohemiancoding.com/sketch)</description>
+    <defs></defs>
+    <g id="Page 1" fill="rgb(223,223,223)" fill-rule="evenodd">
+        <path d="M35.5340004,11 C22.0050001,11 11,22.0059996 11,35.5349998 C11,49.0640001 22.0050001,60.0720005 35.5340004,60.0720005 C49.0630007,60.0720005 60.0699997,49.0640001 60.0699997,35.5349998 C60.0699997,22.0059996 49.0630531,11 35.5340004,11 L35.5340004,11 L35.5340004,11 M36.2140541,18.2849731 C39.2040541,18.2849731 41.636054,20.7189732 41.636054,23.7089729 C41.636054,26.6989727 39.2040541,29.1319728 36.2140541,29.1319728 C33.2240541,29.1319728 30.7900543,26.6989727 30.7900543,23.7089729 C30.7900543,20.7189732 33.2240028,18.2849731 36.2140541,18.2849731 C36.2140541,18.2849731 33.2240028,18.2849731 36.2140541,18.2849731 L36.2140541,18.2849731 M43.6360512,50.75 C43.2080512,51.206 42.7490512,51.303 42.4390512,51.303 L29.9860511,51.303 C29.6750511,51.303 29.2150511,51.206 28.7890511,50.75 C28.4580511,50.395 28.290051,49.932 28.290051,49.374 C28.290051,48.807 28.453051,48.3319999 28.7750511,47.9649999 C29.2050511,47.4789999 29.6710511,47.3769999 29.986051,47.3769999 L31.4000511,47.3769999 L31.4000511,36.9980002 L29.986051,36.9980002 C29.675051,36.9980002 29.215051,36.9020002 28.789051,36.4450002 C28.458051,36.0900002 28.290051,35.6270002 28.290051,35.0680003 C28.290051,34.5020003 28.453051,34.0290002 28.775051,33.6620002 C29.205051,33.1740002 29.671051,33.0720003 29.986051,33.0720003 L40.4180511,33.0720003 C40.7550511,33.0720003 41.0270512,33.3440003 41.0270512,33.6790003 L41.0270512,47.3759998 L42.4390511,47.3759998 C42.7540511,47.3759998 43.2210511,47.4779998 43.6480511,47.9639998 C43.9720511,48.3309998 44.1360511,48.8059998 44.1360511,49.3729998 C44.1360512,49.9329834 43.9680214,50.3950195 43.6360512,50.75 C43.6360512,50.75 43.9680214,50.3950195 43.6360512,50.75 L43.6360512,50.75" id="Shape" fill="rgb(99,99,99)"></path>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/data/images/list-add.svg b/data/images/list-add.svg
new file mode 100644
index 000000000..0ddb0e42b
--- /dev/null
+++ b/data/images/list-add.svg
@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="51px" height="51px" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
+    <title>Slice 1</title>
+    <description>Created with Sketch (http://www.bohemiancoding.com/sketch)</description>
+    <defs></defs>
+    <g id="Page 1" fill="rgb(223,223,223)" fill-rule="evenodd">
+        <path d="M25.5,51 C39.5832618,51 51,39.5832618 51,25.5 C51,11.4167382 39.5832618,0 25.5,0 C11.4167382,0 0,11.4167382 0,25.5 C0,39.5832618 11.4167382,51 25.5,51 Z M25.5,51" id="Oval 1" fill="rgb(100,100,100)"></path>
+        <path d="M37.5699999,22.5495001 L28.497,22.5495001 L28.497,13.0554997 C28.497,12.2274997 27.825,11.5554997 26.997,11.5554997 L24.003,11.5554997 C23.175,11.5554997 22.503,12.2274997 22.503,13.0554997 L22.503,22.5495001 L13.4300001,22.5495001 C12.6020001,22.5495001 11.9300001,23.2215001 11.9300001,24.0495001 L11.9300001,26.8565 C11.9300001,27.6845 12.6020001,28.3565 13.4300001,28.3565 L22.503,28.3565 L22.503,37.9445003 C22.503,38.7725003 23.175,39.4445003 24.003,39.4445003 L26.997,39.4445003 C27.825,39.4445003 28.497,38.7725003 28.497,37.9445003 L28.497,28.3565 L37.5699999,28.3565 C38.3979999,28.3565 39.0699999,27.6845 39.0699999,26.8565 L39.0699999,24.0495001 C39.0699999,23.2214972 38.3980029,22.5495001 37.5699999,22.5495001 L37.5699999,22.5495001 L37.5699999,22.5495001" id="Shape" fill="rgb(255,255,255)"></path>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/data/images/list-remove.svg b/data/images/list-remove.svg
new file mode 100644
index 000000000..74ad8f7b8
--- /dev/null
+++ b/data/images/list-remove.svg
@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="51px" height="51px" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
+    <title>list-remove</title>
+    <description>Created with Sketch (http://www.bohemiancoding.com/sketch)</description>
+    <defs></defs>
+    <g id="Page 1" fill="rgb(223,223,223)" fill-rule="evenodd">
+        <path d="M25.5,51 C39.5832618,51 51,39.5832618 51,25.5 C51,11.4167382 39.5832618,0 25.5,0 C11.4167382,0 0,11.4167382 0,25.5 C0,39.5832618 11.4167382,51 25.5,51 Z M25.5,51" id="Oval 1" fill="rgb(100,100,100)"></path>
+        <path d="M37.5705004,22.6930001 L13.4294996,22.6930001 C12.6014996,22.6930001 11.9294996,23.3650001 11.9294996,24.1930001 L11.9294996,27 C11.9294996,27.828 12.6014996,28.5 13.4294996,28.5 L37.5705004,28.5 C38.3985004,28.5 39.0705004,27.828 39.0705004,27 L39.0705004,24.1930001 C39.0705004,23.3649971 38.3985033,22.6930001 37.5705004,22.6930001 L37.5705004,22.6930001 L37.5705004,22.6930001" id="Shape" fill="rgb(255,255,255)"></path>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/data/images/loading-animation.svg b/data/images/loading-animation.svg
new file mode 100644
index 000000000..1898dad9f
--- /dev/null
+++ b/data/images/loading-animation.svg
@@ -0,0 +1,22 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="49px" height="50px" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
+    <title>loading-animation</title>
+    <description>Created with Sketch (http://www.bohemiancoding.com/sketch)</description>
+    <defs></defs>
+    <g id="Page 1" fill="rgb(223,223,223)" fill-rule="evenodd">
+        <g id="Group" fill="rgb(0,0,0)">
+            <path d="M25.0079956,0.757995605 C23.7099956,0.757995605 22.6559956,1.81099558 22.6559956,3.1099956 L22.6559956,10.7559955 C22.6559956,12.0529956 23.7099956,13.1059954 25.0079956,13.1059954 C26.3069956,13.1059954 27.3599956,12.0529954 27.3599956,10.7559955 L27.3599956,3.1099956 C27.3590088,1.81097412 26.3070068,0.757995605 25.0079956,0.757995605 L25.0079956,0.757995605 L25.0079956,0.757995605" id="Shape" fill="rgb(131,130,130)"></path>
+            <path d="M25.0079956,39.3890381 C24.2659956,39.3890381 23.6639956,39.9910381 23.6639956,40.7330381 L23.6639956,48.379038 C23.6639956,49.121038 24.2659956,49.722038 25.0079956,49.722038 C25.7499956,49.722038 26.3519956,49.121038 26.3519956,48.379038 L26.3519956,40.7330381 C26.3519897,39.9899902 25.75,39.3890381 25.0079956,39.3890381 L25.0079956,39.3890381 L25.0079956,39.3890381" id="Shape" fill="rgb(131,130,130)"></path>
+            <path d="M47.6430054,24.9039917 L39.9970055,24.9039917 C39.5330055,24.9039917 39.1580055,25.2789917 39.1580055,25.7419917 C39.1580055,26.2069917 39.5330055,26.5829917 39.9970055,26.5829917 L47.6430054,26.5829917 C48.1070054,26.5829917 48.4830053,26.2069917 48.4830053,25.7419917 C48.4820557,25.2789917 48.105957,24.9039917 47.6430054,24.9039917 L47.6430054,24.9039917 L47.6430054,24.9039917" id="Shape" fill="rgb(131,130,130)"></path>
+            <path d="M11.8660278,25.7420044 C11.8660278,24.7220044 11.0390278,23.8960044 10.0190278,23.8960044 L2.37202799,23.8960044 C1.35202801,23.8960044 0.52502799,24.7220044 0.52502799,25.7420044 C0.52502799,26.7630044 1.35202801,27.5900044 2.37202799,27.5900044 L10.0190278,27.5900044 C11.0390015,27.5900269 11.8660278,26.7639771 11.8660278,25.7420044 C11.8660278,25.7420044 11.8660278,26.7639771 11.8660278,25.7420044 L11.8660278,25.7420044" id="Shape" fill="rgb(131,130,130)"></path>
+            <path d="M15.5809937,5.04998779 C14.9779937,4.00598776 13.6429937,3.64898777 12.5999937,4.25098777 C11.5549937,4.85398775 11.1979938,6.18898773 11.8009937,7.23198771 L15.6229937,13.8539879 C16.0269937,14.5539879 16.7609937,14.9459879 17.5159937,14.9459879 C17.8869937,14.9459879 18.2619937,14.8509879 18.6049937,14.6519879 C19.6489937,14.0499879 20.0059937,12.715988 19.4039937,11.670988 L15.5809937,5.04998779 L15.5809937,5.04998779 L15.5809937,5.04998779" id="Shape" fill="rgb(131,130,130)"></path>
+            <path d="M33.5209961,38.1369629 C33.1959961,37.5749629 32.4779961,37.3829629 31.9149961,37.7069629 C31.3529962,38.0309629 31.1599962,38.7499629 31.4839962,39.3119629 L35.3059962,45.9329627 C35.5249962,46.3099627 35.9189962,46.5209627 36.3259962,46.5209627 C36.5249962,46.5209627 36.7279962,46.4699627 36.9119962,46.3629627 C37.4739962,46.0389627 37.6679962,45.3199627 37.3439962,44.7589627 L33.5209961,38.1369629 L33.5209961,38.1369629 L33.5209961,38.1369629" id="Shape" fill="rgb(131,130,130)"></path>
+            <path d="M4.39801025,16.1699829 L11.0190101,19.9939828 C11.3370101,20.1779828 11.68301,20.2639828 12.0250101,20.2639828 C12.7200101,20.2639828 13.3980101,19.9029828 13.7710102,19.2559828 C14.3290102,18.2919828 13.9980102,17.0609829 13.0350102,16.5039827 L6.41300994,12.6809827 C5.44900995,12.1249827 4.21900994,12.4549827 3.66100985,13.4189827 C3.10300976,14.3829827 3.43597412,15.6140137 4.39801025,16.1699829 C4.39801025,16.1699829 3.43597412,15.6140137 4.39801025,16.1699829 L4.39801025,16.1699829" id="Shape" fill="rgb(131,130,130)"></path>
+            <path d="M45.1129761,36.1879883 L38.4909759,32.3669882 C38.0099759,32.0889882 37.3939759,32.2549882 37.1149758,32.7349882 C36.8379758,33.2169882 37.0019758,33.8349882 37.4839758,34.1119882 L44.1049756,37.9319881 C44.2639756,38.0259881 44.4379756,38.0689881 44.6089756,38.0689881 C44.9569756,38.0689881 45.2949756,37.8869881 45.4819756,37.5649881 C45.7600098,37.0820313 45.5960083,36.467041 45.1129761,36.1879883 C45.1129761,36.1879883 45.5960083,36.467041 45.1129761,36.1879883 L45.1129761,36.1879883" id="Shape" fill="rgb(131,130,130)"></path>
+            <path d="M37.9869995,18.9199829 C38.1009995,18.9199829 38.2159995,18.8909829 38.3219995,18.8299829 L44.9449997,15.0079829 C45.2659997,14.8219829 45.3769997,14.4119829 45.1909997,14.0899829 C45.0049997,13.7699829 44.5929997,13.6579829 44.2729997,13.8439829 L37.6499995,17.6679828 C37.3299996,17.8539828 37.2189995,18.2639828 37.4039995,18.5839828 C37.5289917,18.8010254 37.7559814,18.9199829 37.9869995,18.9199829 C37.9869995,18.9199829 37.7559814,18.9199829 37.9869995,18.9199829 L37.9869995,18.9199829" id="Shape" fill="rgb(131,130,130)"></path>
+            <path d="M13.4799805,32.3980103 C13.0169805,31.5930102 11.9889804,31.3220103 11.1869805,31.7830102 L4.56598067,35.6070101 C3.7629807,36.0700101 3.48798072,37.0970101 3.95098066,37.9000101 C4.26198065,38.4390101 4.82698065,38.7400101 5.40598071,38.7400101 C5.6909807,38.7400101 5.97998071,38.6680101 6.24398071,38.5150101 L12.8649805,34.6910102 C13.6699829,34.2290039 13.9429932,33.2009888 13.4799805,32.3980103 C13.4799805,32.3980103 13.9429932,33.2009888 13.4799805,32.3980103 L13.4799805,32.3980103" id="Shape" fill="rgb(131,130,130)"></path>
+            <path d="M32.2509766,13.1989746 C32.3299766,13.2449746 32.4169766,13.2669746 32.5019765,13.2669746 C32.6759765,13.2669746 32.8459766,13.1749746 32.9389766,13.0139746 L36.7619765,6.39297481 C36.9009765,6.15197481 36.8189765,5.8429748 36.5759765,5.70497479 C36.3359765,5.56497478 36.0269765,5.64797479 35.8879765,5.88897479 L32.0659765,12.5119749 C31.9279785,12.7520142 32.0100098,13.0599976 32.2509766,13.1989746 C32.2509766,13.1989746 32.0100098,13.0599976 32.2509766,13.1989746 L32.2509766,13.1989746" id="Shape" fill="rgb(131,130,130)"></path>
+            <path d="M18.2680054,37.4160156 C17.5460054,36.9980156 16.6220053,37.2460156 16.2040055,37.9690156 L12.3840055,44.5900154 C11.9650055,45.3140154 12.2140055,46.2360154 12.9360055,46.6540153 C13.1750055,46.7930153 13.4340055,46.8570153 13.6910055,46.8570153 C14.2120056,46.8570153 14.7210055,46.5860153 15.0000055,46.1010153 L18.8220056,39.4800155 C19.2379761,38.7580566 18.9899902,37.8320313 18.2680054,37.4160156 C18.2680054,37.4160156 18.9899902,37.8320313 18.2680054,37.4160156 L18.2680054,37.4160156" id="Shape" fill="rgb(131,130,130)"></path>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/data/images/loved.svg b/data/images/loved.svg
new file mode 100644
index 000000000..b83cec8dc
--- /dev/null
+++ b/data/images/loved.svg
@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="51px" height="44px" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
+    <title>loved</title>
+    <description>Created with Sketch (http://www.bohemiancoding.com/sketch)</description>
+    <defs></defs>
+    <g id="Page 1" fill="rgb(223,223,223)" fill-rule="evenodd">
+        <g id="Group" fill="rgb(0,0,0)">
+            <path d="M36.9730225,6.60900879 C33.9960225,6.60900879 31.1390224,8.32700884 29.1350226,11.3220086 C28.3090227,12.5550086 26.9100227,13.2910086 25.3950226,13.2910086 C23.8770226,13.2910086 22.4790227,12.5540086 21.6550226,11.3200086 C19.6530225,8.33100855 16.8030224,6.61500871 13.8350224,6.61500871 C10.0650225,6.61500871 6.24702263,9.4000088 6.24702263,14.7240089 C6.24702263,21.210009 13.2200227,26.6990093 18.3110228,30.7050089 C20.7020228,32.5910089 22.4340229,33.9070088 23.5790229,34.7780088 C24.2490229,35.2890088 24.8330228,35.7340088 25.3620229,36.1450088 C26.4130229,35.3080088 27.706023,34.3290088 29.512023,32.9590087 L32.5240231,30.6710086 C38.340023,26.2510085 44.545023,21.0000091 44.545023,14.6300082 C44.5449829,9.36499023 40.7360229,6.60900879 36.9730225,6.60900879 L36.9730225,6.60900879 L36.9730225,6.60900879" id="Shape" fill="rgb(133,38,31)"></path>
+            <path d="M36.9730225,0.760009766 C32.5670223,0.760009766 28.4710226,2.81500983 25.3950224,6.55600977 C22.3230224,2.81800985 18.2350225,0.766009808 13.8340225,0.766009808 C7.32002258,0.766009808 0.396022797,5.65801001 0.396022797,14.7250094 C0.396022797,24.0520091 8.66702271,30.5620093 14.7070227,35.3150096 C16.9940226,37.1190096 18.6720226,38.3970096 20.0370226,39.4370098 C22.1930225,41.0800098 23.2750225,41.9040098 24.4430227,43.0640099 C24.6950227,43.3180099 25.0350227,43.4580099 25.3940227,43.4580099 C25.7530227,43.4580099 26.0910227,43.3190099 26.3470227,43.0650099 C27.8900227,41.5310099 29.2900228,40.46801 33.0440227,37.62301 L36.0640227,35.33001 C41.0720226,31.52401 50.3940226,24.4390102 50.3940226,14.6330095 C50.3950195,5.62097168 43.4790039,0.760009766 36.9730225,0.760009766 L36.9730225,0.760009766 L36.9730225,0.760009766 M34.4279785,33.1820068 L31.4139786,35.4710069 C28.2769785,37.848007 26.7519784,39.0040069 25.3889785,40.2480068 C24.3949785,39.3600068 23.2869785,38.5170069 21.6719785,37.2870069 C20.3649784,36.2930068 18.6839786,35.0130069 16.3629785,33.1820068 C10.7629786,28.7760067 3.09497881,22.7410069 3.09497881,14.7250061 C3.09497881,7.4120059 8.6279788,3.46500587 13.8329787,3.46500587 C17.8699789,3.46500587 21.6749787,5.69100595 24.2719789,9.56900597 C24.7509789,10.286006 26.0379789,10.286006 26.5159788,9.56900597 C29.1159787,5.68600607 32.9259787,3.45900583 36.9709787,3.45900583 C42.1679788,3.45900583 47.6939783,7.37500572 47.6939783,14.6320062 C47.6950073,22.4439697 40.8480225,28.3040161 34.4279785,33.1820068 C34.4279785,33.1820068 40.8480225,28.3040161 34.4279785,33.1820068 L34.4279785,33.1820068" id="Shape" fill="rgb(98,97,97)"></path>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/data/images/music-settings.svg b/data/images/music-settings.svg
new file mode 100644
index 000000000..27ee94065
--- /dev/null
+++ b/data/images/music-settings.svg
@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="50px" height="50px" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
+    <title>music-settings</title>
+    <description>Created with Sketch (http://www.bohemiancoding.com/sketch)</description>
+    <defs></defs>
+    <g id="Page 1" fill="rgb(223,223,223)" fill-rule="evenodd">
+        <g id="Group" fill="rgb(0,0,0)">
+            <path d="M41.2520142,-0.0439453125 L10.4410133,-0.0439453125 C9.49401331,-0.0439453125 8.72501338,0.724054694 8.72501338,1.67105472 L8.72501338,47.3360556 C8.72501338,48.2830557 9.49401337,49.0520556 10.4410133,49.0520556 L41.2520142,49.0520556 C42.1990142,49.0520556 42.9680141,48.2830556 42.9680141,47.3360556 L42.9680141,1.67105472 C42.9680176,0.724121094 42.1989746,-0.0439453125 41.2520142,-0.0439453125 L41.2520142,-0.0439453125 L41.2520142,-0.0439453125 M39.5360107,45.6188965 L12.1580105,45.6188965 L12.1580105,3.38689804 L39.5360107,3.38689804 L39.5360107,45.6188965 L39.5360107,45.6188965 L39.5360107,45.6188965" id="Shape" fill="rgb(86,91,101)"></path>
+            <path d="M25.8469849,17.5209961 C28.667985,17.5209961 30.9529848,15.232996 30.9529848,12.4149961 C30.9529848,9.59299612 28.6679847,7.30699635 25.8469849,7.30699635 C23.025985,7.30699635 20.7389851,9.59299636 20.7389851,12.4149961 C20.7379761,15.2329102 23.0250244,17.5209961 25.8469849,17.5209961 C25.8469849,17.5209961 23.0250244,17.5209961 25.8469849,17.5209961 L25.8469849,17.5209961 M25.8460083,10.8168945 C26.7290083,10.8168945 27.4440084,11.5318945 27.4440084,12.4148946 C27.4440084,13.2978947 26.7290084,14.0128946 25.8460083,14.0128946 C24.9650083,14.0128946 24.2480083,13.2978947 24.2480083,12.4148946 C24.2480083,11.5318945 24.9650269,10.8168945 25.8460083,10.8168945 C25.8460083,10.8168945 24.9650269,10.8168945 25.8460083,10.8168945 L25.8460083,10.8168945" id="Shape" fill="rgb(68,73,82)"></path>
+            <path d="M25.8469849,42.4350586 C31.4889851,42.4350586 36.061985,37.8610587 36.061985,32.2200584 C36.061985,26.5770583 31.4889851,22.0030584 25.8469849,22.0030584 C20.2039847,22.0030584 15.6309853,26.5770583 15.6309853,32.2200584 C15.6309814,37.8601074 20.2039795,42.4350586 25.8469849,42.4350586 C25.8469849,42.4350586 20.2039795,42.4350586 25.8469849,42.4350586 L25.8469849,42.4350586 M25.8460083,28.7019043 C27.7880083,28.7019043 29.3620083,30.2779043 29.3620083,32.2189043 C29.3620083,34.1599042 27.7890084,35.7349043 25.8460083,35.7349043 C23.9070083,35.7349043 22.3320084,34.1599042 22.3320084,32.2189043 C22.3320084,30.2779043 23.9060059,28.7019043 25.8460083,28.7019043 C25.8460083,28.7019043 23.9060059,28.7019043 25.8460083,28.7019043 L25.8460083,28.7019043" id="Shape" fill="rgb(68,73,82)"></path>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/data/images/new-additions.svg b/data/images/new-additions.svg
new file mode 100644
index 000000000..14473cdde
--- /dev/null
+++ b/data/images/new-additions.svg
@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="38px" height="50px" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
+    <title>Slice 1</title>
+    <description>Created with Sketch (http://www.bohemiancoding.com/sketch)</description>
+    <defs></defs>
+    <g id="Page 1" fill="rgb(223,223,223)" fill-rule="evenodd">
+        <path d="M37.4363787,34.1277825 C37.4743787,33.2827824 37.4123787,32.4857825 37.2483787,31.7077824 C36.9053787,29.7337824 36.1083787,27.6497823 35.2653786,25.4447824 C33.2633786,20.2107822 31.1933786,14.7987825 35.0373786,10.3127824 C35.1743786,10.1537824 35.1963786,9.9247824 35.0933786,9.74178244 C34.9893786,9.55878244 34.7813786,9.45678244 34.5753786,9.49478244 C28.3223789,10.5367825 25.8533785,16.7377825 24.9803784,19.9907827 C22.1093783,14.5227828 20.9243781,8.76178264 20.9243781,0.500782961 C20.9243781,0.320782954 20.8273781,0.153782958 20.6703781,0.0647829712 C20.5143781,-0.0232170283 20.3213781,-0.0222170263 20.1673781,0.0717829714 C15.2333781,3.03278294 14.247378,7.96678295 13.2823779,12.8357829 C13.2823779,17.3827828 12.3623779,20.775783 10.2333779,23.9577827 C9.1373779,19.9527825 6.08737795,17.9197825 3.12937777,15.9477824 C2.35237776,15.4287824 1.5483778,14.8927825 0.800377772,14.3327824 C0.622377769,14.1997824 0.380377785,14.2007824 0.202377782,14.3317824 C0.0243777788,14.4637824 -0.045622214,14.6957824 0.0303777761,14.9037824 C1.42837778,18.7497824 0.959377796,23.2537828 0.506377787,27.6087824 C-0.258622199,34.9477826 -1.04962221,42.5377823 6.91837797,47.4377828 C8.52137801,48.2387828 10.214378,48.8937828 11.950378,49.3827829 C11.995378,49.3957829 12.041378,49.4017829 12.086378,49.4017829 L12.106378,49.4017829 C12.382378,49.4017829 12.606378,49.1777829 12.606378,48.9017829 C12.606378,48.6987829 12.485378,48.5237829 12.3113781,48.4457829 C9.30137806,46.1657829 9.64737802,42.8407829 10.012378,39.3217833 C10.206378,37.4527833 10.406378,35.5327833 10.083378,33.7367833 L10.200378,33.8147833 C11.811378,34.8897833 13.335378,35.9057833 13.6933781,38.0587832 C13.7263781,38.2557832 13.8743781,38.4147832 14.0683781,38.4617832 C14.2633781,38.5107832 14.467378,38.4367832 14.5873781,38.2757832 C16.0393781,36.3387832 16.6593781,34.3317832 16.650378,31.6557833 C17.077378,29.5237834 17.483378,27.4967834 19.1233781,26.1097833 C19.1883781,29.1897832 19.6283781,32.7147833 21.6453781,36.2507831 C21.7493781,36.4317831 21.9523782,36.5347831 22.1603781,36.4957831 C22.3663781,36.4627831 22.5293781,36.3057831 22.5703781,36.1007831 C22.7693781,35.1077831 23.5413781,32.1567831 25.8263782,30.990783 C24.7023782,33.3737829 25.7133782,36.0157831 26.6203782,38.3897831 C27.0463782,39.5017831 27.4473782,40.5517831 27.6163782,41.522783 C27.6883782,41.870783 27.7163782,42.222783 27.7013782,42.6617831 C27.8803782,44.932783 26.5363782,47.0037831 23.7083782,48.8157829 C23.5013782,48.9487829 23.4213782,49.2117829 23.5203782,49.4367829 C23.6013782,49.6227829 23.7833782,49.7367829 23.9783782,49.7367829 C24.0193782,49.7367829 24.0613782,49.7317829 24.1033782,49.7207829 C24.5143782,49.6147829 24.9223782,49.4957829 25.3923782,49.3347829 C33.8493425,45.1077629 37.9013445,39.9698235 37.4363787,34.1277825 C37.4363787,34.1277825 37.9013445,39.9698235 37.4363787,34.1277825 L37.4363787,34.1277825" id="Shape" fill="rgb(168,182,207)"></path>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/data/images/new-releases.svg b/data/images/new-releases.svg
new file mode 100644
index 000000000..9aab37c0e
--- /dev/null
+++ b/data/images/new-releases.svg
@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="50px" height="51px" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
+    <title>new-releases</title>
+    <description>Created with Sketch (http://www.bohemiancoding.com/sketch)</description>
+    <defs></defs>
+    <g id="Page 1" fill="rgb(223,223,223)" fill-rule="evenodd">
+        <g id="Group" fill="rgb(0,0,0)">
+            <path d="M23.0719986,23.0679932 C22.4859986,23.0679932 22.0049986,23.2689932 21.6299986,23.6729932 C21.2531112,24.0790264 21.0259986,24.6789932 20.9439986,25.4719932 L25.2079985,25.4719932 C25.1509985,24.6649932 24.9349985,24.0659932 24.5579985,23.6649932 C24.1843812,23.2675912 23.6869965,23.0679932 23.0719986,23.0679932 L23.0719986,23.0679932 L23.0719986,23.0679932" id="Shape" fill="rgb(131,130,130)"></path>
+            <path d="M49.5009995,22.8950195 C49.4499995,22.3750196 49.1589994,21.9090195 48.7129995,21.6340195 L44.8359994,19.2480196 L46.7349994,15.1130193 C46.9529994,14.6380194 46.9359994,14.0880194 46.6889994,13.6270194 C46.4419994,13.1640194 45.9949994,12.8460194 45.4769994,12.7620194 L40.9829994,12.0430194 L41.1549995,7.49501956 C41.1759995,6.97301954 40.9499995,6.47101951 40.5449994,6.13701952 C40.1409994,5.80501953 39.6039995,5.68301952 39.0949994,5.80301952 L34.6679993,6.86001956 L33.0859993,2.59401977 C32.9029993,2.10401976 32.5029993,1.72501975 32.0029994,1.57301974 C31.5019994,1.42201975 30.9599994,1.51201974 30.5339994,1.81901975 L26.8479993,4.48701973 L23.7529993,1.15101977 C23.3969993,0.766019776 22.8829993,0.571019784 22.3609993,0.622019783 C21.8399993,0.675019782 21.3729993,0.966019794 21.0989993,1.41301979 L18.7139993,5.29001988 L14.5779992,3.39101984 C14.1029992,3.17301984 13.5529992,3.19101983 13.0909992,3.43601984 C12.6299992,3.68101984 12.3099992,4.13001984 12.2269992,4.64801985 L11.5079992,9.14001995 L6.95999934,8.97001995 C6.44299932,8.94301995 5.93499937,9.17501995 5.60299935,9.58101995 C5.27099936,9.98501997 5.14799934,10.52002 5.26899936,11.03002 L6.3239993,15.4580199 L2.05799951,17.0400199 C1.5679995,17.2220199 1.19099953,17.62202 1.03799953,18.1240199 C0.887999523,18.6240199 0.976999529,19.1670199 1.28399954,19.5910199 L3.95199952,23.2770201 L0.614999626,26.3710202 C0.230999622,26.7280201 0.0359996296,27.2430201 0.0869996287,27.7640202 C0.13899963,28.2840201 0.43099964,28.7510201 0.87699965,29.0260201 L4.75299958,31.4110201 L2.85599962,35.5460203 C2.63599962,36.0230203 2.65399962,36.5720204 2.90099962,37.0320203 C3.14699963,37.4950203 3.59499963,37.8150203 4.11199959,37.8980203 L8.60399969,38.6180203 L8.43499969,43.1650202 C8.41499969,43.6880202 8.63999969,44.1900202 9.04399972,44.5220202 C9.44999971,44.8530202 9.98499971,44.9780202 10.4949997,44.8540202 L14.9209998,43.8010202 L16.5039998,48.06702 C16.6849998,48.5570201 17.0859998,48.93402 17.5869997,49.08702 C18.0869997,49.23702 18.6319997,49.14802 19.0549998,48.84102 L22.7409999,46.17302 L25.8359999,49.50902 C26.1539999,49.85302 26.5999999,50.04602 27.0639999,50.04602 C27.1189999,50.04602 27.1719999,50.04202 27.2279999,50.03802 C27.749,49.98502 28.2149999,49.69402 28.4899999,49.24902 L30.8749999,45.3720199 L35.0110001,47.2690199 C35.486,47.4890199 36.036,47.4710199 36.497,47.2250199 C36.959,46.9790199 37.278,46.5300199 37.362,46.0120198 L38.081,41.5200197 L42.6299998,41.6920197 L42.6919998,41.6920197 L42.7059998,41.6920197 C43.6299998,41.6920197 44.3799998,40.9440197 44.3799998,40.0180197 C44.3799998,39.8100197 44.3419998,39.6110197 44.2729998,39.4260197 L43.2659998,35.2030196 L47.5319996,33.6200197 C48.0229996,33.4370197 48.3999996,33.0370197 48.5529997,32.5370198 C48.7029997,32.0370198 48.6129996,31.4940198 48.3059997,31.0680198 L45.6379997,27.3820197 L48.9759997,24.2880196 C49.3580017,23.9320068 49.5540009,23.4160156 49.5009995,22.8950195 C49.5009995,22.8950195 49.5540009,23.4160156 49.5009995,22.8950195 L49.5009995,22.8950195" id="Shape" fill="rgb(157,171,195)"></path>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/data/images/next.svg b/data/images/next.svg
new file mode 100644
index 000000000..1cc396130
--- /dev/null
+++ b/data/images/next.svg
@@ -0,0 +1,57 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="117px" height="117px" xmlns="http://www.w3.org/2000/svg" version="1.1">
+    <title>next</title>
+    <description>Created with Sketch (http://www.bohemiancoding.com/sketch)</description>
+    <defs>
+        <linearGradient id="gradient-1" x1="50%" y1="0%" x2="50%" y2="100%">
+            <stop offset="0%" style="stop-color:rgb(255,255,255); stop-opacity:100"></stop>
+            <stop offset="100%" style="stop-color:rgb(0,0,0); stop-opacity:100"></stop>
+        </linearGradient>
+        <linearGradient id="gradient-2" x1="50%" y1="-38%" x2="50%" y2="100%">
+            <stop offset="0%" style="stop-color:rgb(255,255,255); stop-opacity:100"></stop>
+            <stop offset="100%" style="stop-color:rgb(0,0,0); stop-opacity:100"></stop>
+        </linearGradient>
+        <linearGradient id="gradient-3" x1="50%" y1="0%" x2="50%" y2="100%">
+            <stop offset="0%" style="stop-color:rgb(255,255,255); stop-opacity:100"></stop>
+            <stop offset="100%" style="stop-color:rgb(0,0,0); stop-opacity:100"></stop>
+        </linearGradient>
+        <linearGradient id="gradient-4" x1="86%" y1="56%" x2="146%" y2="61%">
+            <stop offset="0%" style="stop-color:rgb(247,247,247); stop-opacity:100"></stop>
+            <stop offset="100%" style="stop-color:rgb(0,0,0); stop-opacity:100"></stop>
+        </linearGradient>
+        <linearGradient id="gradient-5" x1="50%" y1="0%" x2="50%" y2="100%">
+            <stop offset="0%" style="stop-color:rgb(255,255,255); stop-opacity:100"></stop>
+            <stop offset="100%" style="stop-color:rgb(0,0,0); stop-opacity:100"></stop>
+        </linearGradient>
+        <linearGradient id="gradient-6" x1="86%" y1="56%" x2="146%" y2="61%">
+            <stop offset="0%" style="stop-color:rgb(247,247,247); stop-opacity:100"></stop>
+            <stop offset="100%" style="stop-color:rgb(0,0,0); stop-opacity:100"></stop>
+        </linearGradient>
+        <linearGradient id="gradient-7" x1="50%" y1="0%" x2="50%" y2="100%">
+            <stop offset="0%" style="stop-color:rgb(255,255,255); stop-opacity:100"></stop>
+            <stop offset="100%" style="stop-color:rgb(0,0,0); stop-opacity:100"></stop>
+        </linearGradient>
+        <linearGradient id="gradient-8" x1="50%" y1="0%" x2="50%" y2="100%">
+            <stop offset="0%" style="stop-color:rgb(255,255,255); stop-opacity:100"></stop>
+            <stop offset="100%" style="stop-color:rgb(0,0,0); stop-opacity:100"></stop>
+        </linearGradient>
+        <linearGradient id="gradient-9" x1="50%" y1="0%" x2="50%" y2="100%">
+            <stop offset="0%" style="stop-color:rgb(255,255,255); stop-opacity:100"></stop>
+            <stop offset="100%" style="stop-color:rgb(0,0,0); stop-opacity:100"></stop>
+        </linearGradient>
+    </defs>
+    <g fill="rgb(215,215,215)" id="Page 1">
+        <g stroke="rgb(57,57,57)" stroke-width="1" style="fill:url(#gradient-2)" fill="none" id="Oval 9"></g>
+        <path id="Oval 9" d="M58,96 C79,96 96,79 96,58 C96,37 79,21 58,21 C37,21 21,37 21,58 C21,79 37,96 58,96 Z M58,96" stroke="rgb(57,57,57)" stroke-width="1" style="fill:url(#gradient-2)" fill="none"></path>
+        <path id="Oval 9 decoration" d="" stroke="rgb(57,57,57)" stroke-width="1" style="fill:url(#gradient-2)" fill="none"></path>
+        <g stroke="rgb(150,150,150)" stroke-width="1" style="fill:url(#gradient-4)" fill="none" id="Triangle 10"></g>
+        <path id="Triangle 10" d="M48,46 L64,67 L33,67 L48,46 Z M48,46" stroke="rgb(150,150,150)" stroke-width="1" style="fill:url(#gradient-4)" fill="none"></path>
+        <path id="Triangle 10 decoration" d="" stroke="rgb(150,150,150)" stroke-width="1" style="fill:url(#gradient-4)" fill="none"></path>
+        <g stroke="rgb(150,150,150)" stroke-width="1" style="fill:url(#gradient-6)" fill="none" id="Triangle 10"></g>
+        <path id="Triangle 10" d="M68,46 L84,67 L53,67 L68,46 Z M68,46" stroke="rgb(150,150,150)" stroke-width="1" style="fill:url(#gradient-6)" fill="none"></path>
+        <path id="Triangle 10 decoration" d="" stroke="rgb(150,150,150)" stroke-width="1" style="fill:url(#gradient-6)" fill="none"></path>
+        <g stroke="rgb(150,150,150)" stroke-width="1" fill="rgb(255,254,254)" id="Rectangle 11"></g>
+        <path id="Rectangle 11" d="M79,44 L79,69 L84,69 L84,44 L79,44 Z M79,44" stroke="rgb(150,150,150)" stroke-width="1" fill="rgb(255,254,254)"></path>
+        <path id="Rectangle 11 decoration" d="" stroke="rgb(150,150,150)" stroke-width="1" fill="rgb(255,254,254)"></path>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/data/images/no-artist-image-placeholder.svg b/data/images/no-artist-image-placeholder.svg
new file mode 100644
index 000000000..93bc6ff8f
--- /dev/null
+++ b/data/images/no-artist-image-placeholder.svg
@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="100px" height="100px" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
+    <title>no-artist-image-placeholder</title>
+    <description>Created with Sketch (http://www.bohemiancoding.com/sketch)</description>
+    <defs></defs>
+    <g id="Page 1" fill="rgb(223,223,223)" fill-rule="evenodd">
+        <path d="M50,100 C77.6142389,100 100,77.6142389 100,50 C100,22.3857611 77.6142389,0 50,0 C22.3857611,0 0,22.3857611 0,50 C0,77.6142389 22.3857611,100 50,100 Z M50,100" id="Oval 1" fill="rgb(207,207,207)"></path>
+        <path d="M79.9125514,39.7833549 C79.676346,39.0094911 79.0039365,38.4801975 78.2332518,38.461946 L68.0212481,38.2429279 L65.019543,38.1808728 L62.0178379,38.1133422 L59.4557854,38.062238 L58.255793,38.0348607 L57.6213143,36.1202778 L51.6989383,18.27213 C51.4454917,17.5128673 50.7644615,17 50.0006733,17 C49.236885,17 48.5541308,17.5128673 48.3006841,18.27213 L42.3800321,36.1202778 L41.7438293,38.0348607 L40.5421128,38.062238 L37.9800602,38.1133422 L34.9800793,38.1808728 L31.9800984,38.2429279 L21.7663707,38.461946 C20.9974101,38.4801975 20.3232765,39.0094912 20.0870711,39.7833549 C19.8508658,40.5590439 20.1060365,41.4040886 20.7215499,41.8914038 L36.6300696,54.5287458 L30.8473477,74.5378719 C30.6249353,75.315386 30.8887267,76.1531301 31.5076883,76.6331447 C31.6645838,76.7536047 31.8335483,76.843037 32.0128575,76.903267 C32.0697537,76.9251688 32.1300981,76.9233437 32.1921667,76.93977 C32.3128556,76.9653221 32.4352686,76.9963497 32.5594057,76.9981748 C32.5645781,76.9981748 32.5697505,77 32.5731988,77 C32.6869911,77 32.7990594,76.9707976 32.9128518,76.9470706 C32.9731962,76.9342946 33.0352648,76.93977 33.0938851,76.9178682 C33.269746,76.8612886 33.4369863,76.7791568 33.5921578,76.6641723 L50.0023975,64.7003107 L66.4126372,76.6641723 C66.7212559,76.8886658 67.076426,77 67.4333203,77 C67.8074559,77 68.1815914,76.8795401 68.4988307,76.6331447 C69.1160682,76.151305 69.3798596,75.3099105 69.1574472,74.5378719 L63.3730013,54.5287458 L79.284969,41.8914038 C79.8953985,41.4021957 80.1487981,40.5571279 79.9125514,39.7833549 C79.9125514,39.7833549 80.1487981,40.5571279 79.9125514,39.7833549 L79.9125514,39.7833549" id="Shape" fill="rgb(254,254,254)"></path>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/data/images/not-loved.svg b/data/images/not-loved.svg
new file mode 100644
index 000000000..37e60a2d7
--- /dev/null
+++ b/data/images/not-loved.svg
@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="50px" height="43px" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
+    <title>Slice 1</title>
+    <description>Created with Sketch (http://www.bohemiancoding.com/sketch)</description>
+    <defs></defs>
+    <g id="Page 1" fill="rgb(223,223,223)" fill-rule="evenodd">
+        <path d="M36.5769997,0 C32.1709995,0 28.0739994,2.05500007 24.9989996,5.796 C21.9269996,2.05800009 17.8379998,0.00600004196 13.4379997,0.00600004196 C6.92299986,0.00600004196 0,4.89800024 0,13.9649997 C0,23.2919993 8.27099991,29.8019996 14.3109999,34.5549998 C16.5979998,36.3589998 18.2759998,37.6369998 19.6399999,38.677 C21.7969999,40.3200001 22.8789999,41.1440001 24.046,42.3040001 C24.299,42.5580001 24.638,42.6980001 24.998,42.6980001 C25.357,42.6980001 25.6950001,42.5590001 25.95,42.3050001 C27.493,40.7710001 28.8940001,39.7080002 32.648,36.8630002 L35.6670001,34.5700002 C40.675,30.7640002 49.997,23.6790004 49.997,13.8729997 C49.9979591,4.86102295 43.0829811,0 36.5769997,0 L36.5769997,0 L36.5769997,0 M13.4379616,2.70501709 C17.4739614,2.70501709 21.2789617,4.93101716 23.8759613,8.80901718 C24.3549613,9.52601719 25.6419613,9.52601719 26.1199613,8.80901718 C28.7199612,4.92601728 32.5299611,2.69901705 36.5759616,2.69901705 C41.7729616,2.69901705 47.2979617,6.61501694 47.2979617,13.8720174 C47.2979617,21.6840172 40.4499617,27.5440173 34.0309615,32.4220166 L31.0169616,34.7110167 C27.8799615,37.0880167 26.3549614,38.2440166 24.9919615,39.4880166 C23.9969615,38.6000166 22.8889616,37.7570167 21.2739615,36.5270166 C19.9669615,35.5330166 18.2869616,34.2530167 15.9659615,32.4220166 C10.3659616,28.0160165 2.69796181,21.9810166 2.69796181,13.9650159 C2.6999855,6.65100098 8.23294449,2.70501709 13.4379616,2.70501709 C13.4379616,2.70501709 8.23294449,2.70501709 13.4379616,2.70501709 L13.4379616,2.70501709" id="Shape" fill="rgb(101,101,101)"></path>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/data/images/now-playing-speaker-dark.svg b/data/images/now-playing-speaker-dark.svg
new file mode 100644
index 000000000..02c0f2631
--- /dev/null
+++ b/data/images/now-playing-speaker-dark.svg
@@ -0,0 +1,32 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="54px" height="54px" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
+    <title>now-playing-speaker-dark</title>
+    <description>Created with Sketch (http://www.bohemiancoding.com/sketch)</description>
+    <defs>
+        <linearGradient x1="50%" y1="-39.1231204%" x2="50%" y2="222.072246%" id="linearGradient-1">
+            <stop stop-color="rgb(85,85,85)" offset="0%"></stop>
+            <stop stop-color="rgb(0,0,0)" offset="100%"></stop>
+        </linearGradient>
+        <linearGradient x1="50%" y1="-39.1231204%" x2="50%" y2="222.072246%" id="linearGradient-2">
+            <stop stop-color="rgb(83,83,83)" offset="0%"></stop>
+            <stop stop-color="rgb(0,0,0)" offset="100%"></stop>
+        </linearGradient>
+        <linearGradient x1="50%" y1="-39.1231204%" x2="50%" y2="222.072246%" id="linearGradient-3">
+            <stop stop-color="rgb(87,88,87)" offset="0%"></stop>
+            <stop stop-color="rgb(47,47,47)" offset="45.8253235%"></stop>
+            <stop stop-color="rgb(0,0,0)" offset="100%"></stop>
+        </linearGradient>
+        <linearGradient x1="50%" y1="-39.1231204%" x2="50%" y2="222.072246%" id="linearGradient-4">
+            <stop stop-color="rgb(100,100,100)" offset="0%"></stop>
+            <stop stop-color="rgb(0,0,0)" offset="100%"></stop>
+        </linearGradient>
+    </defs>
+    <g id="Page 1" fill="rgb(223,223,223)" fill-rule="evenodd">
+        <g id="Group" fill="rgb(0,0,0)">
+            <path d="M34.974563,18.947998 C34.045343,19.086998 33.468023,19.7009981 33.686303,20.3189981 L33.681203,20.3199981 C34.182023,21.7209981 34.430903,23.166998 34.425803,24.6099981 C34.430903,26.0639981 34.167743,27.5229982 33.664883,28.9479979 C33.441503,29.5639979 34.031063,30.1759979 34.965383,30.3219978 C35.096963,30.3429978 35.228543,30.3509978 35.360123,30.3509978 C36.144503,30.3509978 36.858503,29.9929978 37.047203,29.4659978 C37.607183,27.8709978 37.888703,26.2399978 37.897883,24.6099979 C37.891763,22.9909979 37.611263,21.3779978 37.055363,19.7979981 C36.8319666,19.1810303 35.90479,18.802002 34.974563,18.947998 C34.974563,18.947998 35.90479,18.802002 34.974563,18.947998 L34.974563,18.947998" id="Shape" fill="url(#linearGradient-1)"></path>
+            <path d="M47.4460925,9.19897461 C47.0360525,8.62297463 45.9997325,8.38197464 45.1388524,8.65097463 C44.2738925,8.91697463 43.9056725,9.59897465 44.3106125,10.1709746 L44.3024525,10.1709746 C47.5735925,14.7489747 49.2035523,19.6799744 49.2035523,24.6209744 C49.2035523,29.5639743 47.5746123,34.4979743 44.3024525,39.0749749 C43.8934325,39.6469749 44.2647125,40.3289748 45.1378325,40.5979749 C45.3765125,40.6689749 45.6253925,40.7039749 45.8671324,40.7029749 C46.5209524,40.7049749 47.1462124,40.4599749 47.4450725,40.0469749 C50.9293924,35.163975 52.6827727,29.8949744 52.6827727,24.6209752 C52.6828064,19.3530273 50.928374,14.0839844 47.4460925,9.19897461 C47.4460925,9.19897461 50.928374,14.0839844 47.4460925,9.19897461 L47.4460925,9.19897461" id="Shape" fill="url(#linearGradient-2)"></path>
+            <path d="M42.8683569,15.4260254 C42.5501169,14.8270254 41.562757,14.5150254 40.6641369,14.7230254 C39.7634769,14.9250254 39.2830569,15.5770254 39.5972169,16.1730254 C41.0211369,18.8780254 41.730037,21.7370256 41.730037,24.6030257 C41.727997,27.4820257 41.004817,30.363026 39.5747771,33.0970262 C39.2616371,33.6910262 39.7420571,34.3460261 40.6488371,34.5490262 C40.8354971,34.5910262 41.025217,34.6110262 41.211877,34.6110262 C41.935057,34.6110262 42.6102971,34.3150262 42.861217,33.8400262 C44.4075371,30.8650263 45.1980369,27.737026 45.197017,24.6030257 C45.1980334,21.4909668 44.4319751,18.3780518 42.8683569,15.4260254 C42.8683569,15.4260254 44.4319751,18.3780518 42.8683569,15.4260254 L42.8683569,15.4260254" id="Shape" fill="url(#linearGradient-3)"></path>
+            <path d="M14.5816932,16.280982 L3.95227371,16.280982 C3.24337372,16.280982 2.66605367,16.845982 2.66605367,17.542982 L2.66605367,32.0439824 C2.66605367,32.7399824 3.24235367,33.3049824 3.95227371,33.3049824 L14.8203734,33.3049824 C18.4699335,36.4019823 24.5399537,41.4649823 26.9451135,42.9769824 C30.0102136,44.9039824 30.4029136,41.6499823 30.4029136,41.6499823 L30.4029136,25.0769824 L30.4029136,24.3079824 L30.4029136,7.73498243 C30.4029285,7.73400879 30.0102185,4.47900391 26.9451135,6.40698242 C24.4869134,7.95198238 18.2006536,13.2089825 14.5816932,16.280982 Z M14.5816932,16.280982" id="Shape" fill="url(#linearGradient-4)"></path>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/data/images/now-playing-speaker.svg b/data/images/now-playing-speaker.svg
new file mode 100644
index 000000000..8ee243440
--- /dev/null
+++ b/data/images/now-playing-speaker.svg
@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="54px" height="54px" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
+    <title>now-playing-speaker</title>
+    <description>Created with Sketch (http://www.bohemiancoding.com/sketch)</description>
+    <defs></defs>
+    <g id="Page 1" fill="rgb(223,223,223)" fill-rule="evenodd">
+        <g id="Group" fill="rgb(0,0,0)">
+            <path d="M34.974563,18.947998 C34.045343,19.086998 33.468023,19.7009981 33.686303,20.3189981 L33.681203,20.3199981 C34.182023,21.7209981 34.430903,23.166998 34.425803,24.6099981 C34.430903,26.0639981 34.167743,27.5229982 33.664883,28.9479979 C33.441503,29.5639979 34.031063,30.1759979 34.965383,30.3219978 C35.096963,30.3429978 35.228543,30.3509978 35.360123,30.3509978 C36.144503,30.3509978 36.858503,29.9929978 37.047203,29.4659978 C37.607183,27.8709978 37.888703,26.2399978 37.897883,24.6099979 C37.891763,22.9909979 37.611263,21.3779978 37.055363,19.7979981 C36.8319666,19.1810303 35.90479,18.802002 34.974563,18.947998 C34.974563,18.947998 35.90479,18.802002 34.974563,18.947998 L34.974563,18.947998" id="Shape" fill="rgb(255,255,255)"></path>
+            <path d="M45.1388524,8.65097463 C44.2738925,8.91697463 43.9056725,9.59897465 44.3106125,10.1709746 C47.5735925,14.7489747 49.2035523,19.6799744 49.2035523,24.6209744 C49.2035523,29.5639743 47.5746123,34.4979743 44.3024525,39.0749749 C43.8934325,39.6469749 44.2647125,40.3289748 45.1378325,40.5979749 C45.3765125,40.6689749 45.6253925,40.7039749 45.8671324,40.7029749 C46.5209524,40.7049749 47.1462124,40.4599749 47.4450725,40.0469749 C50.9293924,35.163975 52.6827727,29.8949744 52.6827727,24.6209752 C52.6828064,19.3530273 50.928374,14.0839844 47.4460925,9.19897461 C47.0360525,8.62297463 45.9997325,8.38197464 45.1388524,8.65097463 Z M45.1388524,8.65097463" id="Shape" fill="rgb(255,255,255)"></path>
+            <path d="M42.8683569,15.4260254 C42.5501169,14.8270254 41.562757,14.5150254 40.6641369,14.7230254 C39.7634769,14.9250254 39.2830569,15.5770254 39.5972169,16.1730254 C41.0211369,18.8780254 41.730037,21.7370256 41.730037,24.6030257 C41.727997,27.4820257 41.004817,30.363026 39.5747771,33.0970262 C39.2616371,33.6910262 39.7420571,34.3460261 40.6488371,34.5490262 C40.8354971,34.5910262 41.025217,34.6110262 41.211877,34.6110262 C41.935057,34.6110262 42.6102971,34.3150262 42.861217,33.8400262 C44.4075371,30.8650263 45.1980369,27.737026 45.197017,24.6030257 C45.1980334,21.4909668 44.4319751,18.3780518 42.8683569,15.4260254 C42.8683569,15.4260254 44.4319751,18.3780518 42.8683569,15.4260254 L42.8683569,15.4260254" id="Shape" fill="rgb(255,255,255)"></path>
+            <path d="M14.5816932,16.280982 L3.95227371,16.280982 C3.24337372,16.280982 2.66605367,16.845982 2.66605367,17.542982 L2.66605367,32.0439824 C2.66605367,32.7399824 3.24235367,33.3049824 3.95227371,33.3049824 L14.8203734,33.3049824 C18.4699335,36.4019823 24.5399537,41.4649823 26.9451135,42.9769824 C30.0102136,44.9039824 30.4029136,41.6499823 30.4029136,41.6499823 L30.4029136,25.0769824 L30.4029136,24.3079824 L30.4029136,7.73498243 C30.4029285,7.73400879 30.0102185,4.47900391 26.9451135,6.40698242 C24.4869134,7.95198238 18.2006536,13.2089825 14.5816932,16.280982 Z M14.5816932,16.280982" id="Shape" fill="rgb(255,255,255)"></path>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/data/images/open-padlock.svg b/data/images/open-padlock.svg
new file mode 100644
index 000000000..404f64a46
--- /dev/null
+++ b/data/images/open-padlock.svg
@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="52px" height="52px" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
+    <title>open-padlock</title>
+    <description>Created with Sketch (http://www.bohemiancoding.com/sketch)</description>
+    <defs></defs>
+    <g id="Page 1" fill="rgb(223,223,223)" fill-rule="evenodd">
+        <g id="Group" fill="rgb(0,0,0)">
+            <path d="M39.5089722,23.8280029 L37.1529722,23.8280029 C37.1629722,23.7290029 37.1819722,23.6340029 37.1819722,23.5330029 L37.1819722,12.4290029 C37.1819722,5.93900308 31.901972,0.658002943 25.4109723,0.658002943 C18.9199726,0.658002943 13.6399724,5.93800315 13.6399724,12.4290029 L13.6399724,13.5100028 C13.6399724,15.1690029 14.9849724,16.5140028 16.6439724,16.5140028 C18.3039723,16.5140028 19.6479723,15.1690027 19.6479723,13.5100028 L19.6479723,12.4290029 C19.6479723,9.25100288 22.2339723,6.66600284 25.4109723,6.66600284 C28.5889723,6.66600284 31.1739723,9.25100288 31.1739723,12.4290029 L31.1739723,23.5330029 C31.1739723,23.6340029 31.1939723,23.7290029 31.2029723,23.8280029 L12.2809714,23.8280029 C10.1169714,23.8280029 8.35597149,25.5900029 8.35597149,27.7530029 L8.35597149,46.4710033 C8.35597149,48.6360033 10.1169715,50.3970034 12.2809714,50.3970034 L39.5089721,50.3970034 C41.6729721,50.3970034 43.433972,48.6360034 43.433972,46.4710033 L43.433972,27.7530029 C43.434021,25.5899658 41.6729736,23.8280029 39.5089722,23.8280029 L39.5089722,23.8280029 L39.5089722,23.8280029 M40.4299927,46.4709473 C40.4299927,46.9799473 40.0169927,47.3929473 39.5089927,47.3929473 L12.280992,47.3929473 C11.772992,47.3929473 11.358992,46.9799473 11.358992,46.4709473 L11.358992,27.7529469 C11.358992,27.2459468 11.772992,26.8319468 12.280992,26.8319468 L39.5089927,26.8319468 C40.0169927,26.8319468 40.4299927,27.2459469 40.4299927,27.7529469 L40.4299927,46.4709473 L40.4299927,46.4709473 L40.4299927,46.4709473" id="Shape" fill="rgb(103,104,103)"></path>
+            <path d="M25.894989,36.1169434 C24.653989,36.1169434 23.6469891,37.1239433 23.6469891,38.3649433 L23.6469891,42.6949432 L28.1429889,42.6949432 L28.1429889,38.3649433 C28.1430054,37.1240234 27.1369934,36.1169434 25.894989,36.1169434 L25.894989,36.1169434 L25.894989,36.1169434" id="Shape" fill="rgb(131,130,130)"></path>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/data/images/open.svg b/data/images/open.svg
new file mode 100644
index 000000000..60e9993cc
--- /dev/null
+++ b/data/images/open.svg
@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="44px" height="50px" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
+    <title>Slice 1</title>
+    <description>Created with Sketch (http://www.bohemiancoding.com/sketch)</description>
+    <defs></defs>
+    <g id="Page 1" fill="rgb(223,223,223)" fill-rule="evenodd">
+        <g id="Group" fill="rgb(0,0,0)">
+            <path d="M3.35400391,32.0279541 L40.5150032,32.0279541 C41.6710032,32.0279541 42.7310033,31.3789541 43.2560031,30.3469541 C43.4830031,29.9079541 43.5930032,29.4279541 43.5930032,28.9499542 C43.5930032,28.3129541 43.3930032,27.6759541 43.0040032,27.1419542 L24.4220024,1.55995345 C23.8430024,0.760953426 22.9170024,0.290953398 21.9320024,0.290953398 C20.9470024,0.290953398 20.0210024,0.762953401 19.4430023,1.55995345 L0.862002969,27.1419542 C0.182002962,28.0769542 0.0870029926,29.3199542 0.611002982,30.3469541 C1.13598633,31.3790283 2.19702148,32.0279541 3.35400391,32.0279541 C3.35400391,32.0279541 2.19702148,32.0279541 3.35400391,32.0279541 L3.35400391,32.0279541" id="Shape" fill="rgb(100,100,100)"></path>
+            <path d="M42.1060181,38.1459961 L2.18701935,38.1459961 C1.24001932,38.1459961 0.472019315,38.9139961 0.472019315,39.8619961 L0.472019315,47.6289963 C0.472019315,48.5769963 1.24001932,49.3449962 2.18701935,49.3449962 L42.1060181,49.3449962 C43.0540181,49.3449962 43.822018,48.5769962 43.822018,47.6289963 L43.822018,39.8619961 C43.8220215,38.9139404 43.0549927,38.1459961 42.1060181,38.1459961 L42.1060181,38.1459961 L42.1060181,38.1459961" id="Shape" fill="rgb(100,100,100)"></path>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/data/images/pause-pressed.svg b/data/images/pause-pressed.svg
new file mode 100644
index 000000000..627d69632
--- /dev/null
+++ b/data/images/pause-pressed.svg
@@ -0,0 +1,46 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="122px" height="122px" xmlns="http://www.w3.org/2000/svg" version="1.1">
+    <title>pause - pressed</title>
+    <description>Created with Sketch (http://www.bohemiancoding.com/sketch)</description>
+    <defs>
+        <linearGradient id="gradient-1" x1="50%" y1="0%" x2="50%" y2="100%">
+            <stop offset="0%" style="stop-color:rgb(255,255,255); stop-opacity:100"></stop>
+            <stop offset="100%" style="stop-color:rgb(0,0,0); stop-opacity:100"></stop>
+        </linearGradient>
+        <linearGradient id="gradient-2" x1="50%" y1="-38%" x2="50%" y2="100%">
+            <stop offset="0%" style="stop-color:rgb(255,255,255); stop-opacity:100"></stop>
+            <stop offset="100%" style="stop-color:rgb(0,0,0); stop-opacity:100"></stop>
+        </linearGradient>
+        <linearGradient id="gradient-3" x1="50%" y1="0%" x2="50%" y2="100%">
+            <stop offset="0%" style="stop-color:rgb(255,255,255); stop-opacity:100"></stop>
+            <stop offset="100%" style="stop-color:rgb(0,0,0); stop-opacity:100"></stop>
+        </linearGradient>
+        <linearGradient id="gradient-4" x1="84%" y1="-65%" x2="86%" y2="372%">
+            <stop offset="0%" style="stop-color:rgb(247,247,247); stop-opacity:100"></stop>
+            <stop offset="100%" style="stop-color:rgb(0,0,0); stop-opacity:100"></stop>
+        </linearGradient>
+        <linearGradient id="gradient-5" x1="50%" y1="0%" x2="50%" y2="100%">
+            <stop offset="0%" style="stop-color:rgb(255,255,255); stop-opacity:100"></stop>
+            <stop offset="100%" style="stop-color:rgb(0,0,0); stop-opacity:100"></stop>
+        </linearGradient>
+        <linearGradient id="gradient-6" x1="84%" y1="-65%" x2="86%" y2="372%">
+            <stop offset="0%" style="stop-color:rgb(247,247,247); stop-opacity:100"></stop>
+            <stop offset="100%" style="stop-color:rgb(0,0,0); stop-opacity:100"></stop>
+        </linearGradient>
+        <linearGradient id="gradient-7" x1="50%" y1="0%" x2="50%" y2="100%">
+            <stop offset="0%" style="stop-color:rgb(255,255,255); stop-opacity:100"></stop>
+            <stop offset="100%" style="stop-color:rgb(0,0,0); stop-opacity:100"></stop>
+        </linearGradient>
+    </defs>
+    <g fill="rgb(215,215,215)" id="Page 1">
+        <g stroke="rgb(57,57,57)" stroke-width="1" style="fill:url(#gradient-2)" fill="none" id="Oval 9"></g>
+        <path id="Oval 9" d="M61,111 C88,111 111,88 111,61 C111,33 88,11 61,11 C33,11 11,33 11,61 C11,88 33,111 61,111 Z M61,111" stroke="rgb(57,57,57)" stroke-width="1" style="fill:url(#gradient-2)" fill="none"></path>
+        <path id="Oval 9 decoration" d="" stroke="rgb(57,57,57)" stroke-width="1" style="fill:url(#gradient-2)" fill="none"></path>
+        <g stroke="rgb(150,150,150)" stroke-width="1" style="fill:url(#gradient-4)" fill="none" id="Rectangle 11"></g>
+        <path id="Rectangle 11" d="M64,41 L64,81 L89,81 L89,41 L64,41 Z M64,41" stroke="rgb(150,150,150)" stroke-width="1" style="fill:url(#gradient-4)" fill="none"></path>
+        <path id="Rectangle 11 decoration" d="" stroke="rgb(150,150,150)" stroke-width="1" style="fill:url(#gradient-4)" fill="none"></path>
+        <g stroke="rgb(150,150,150)" stroke-width="1" style="fill:url(#gradient-6)" fill="none" id="Rectangle 11"></g>
+        <path id="Rectangle 11" d="M32,41 L32,81 L57,81 L57,41 L32,41 Z M32,41" stroke="rgb(150,150,150)" stroke-width="1" style="fill:url(#gradient-6)" fill="none"></path>
+        <path id="Rectangle 11 decoration" d="" stroke="rgb(150,150,150)" stroke-width="1" style="fill:url(#gradient-6)" fill="none"></path>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/data/images/pause-rest.svg b/data/images/pause-rest.svg
new file mode 100644
index 000000000..f79022c7d
--- /dev/null
+++ b/data/images/pause-rest.svg
@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="102px" height="102px" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
+    <title>pause-rest</title>
+    <description>Created with Sketch (http://www.bohemiancoding.com/sketch)</description>
+    <defs>
+        <linearGradient x1="50%" y1="-66.3125%" x2="50%" y2="100%" id="linearGradient-1">
+            <stop stop-color="rgb(254,255,255)" offset="0%"></stop>
+            <stop stop-color="rgb(0,0,0)" offset="100%"></stop>
+        </linearGradient>
+    </defs>
+    <g id="Page 1" fill="rgb(223,223,223)" fill-rule="evenodd">
+        <path d="M51,101 C78.6142389,101 101,78.6142389 101,51 C101,23.3857611 78.6142389,1 51,1 C23.3857611,1 1,23.3857611 1,51 C1,78.6142389 23.3857611,101 51,101 Z M51,101" id="Oval 1" stroke="rgb(167,167,167)" stroke-width="1" fill="url(#linearGradient-1)"></path>
+        <g id="Group" fill="rgb(0,0,0)">
+            <path d="M43.7659912,29.1379395 L35.9979911,29.1379395 C35.0509911,29.1379395 34.2819911,29.9059395 34.2819911,30.8539394 L34.2819911,70.7719387 C34.2819911,71.7199387 35.0509911,72.4889387 35.9979911,72.4889387 L43.7659912,72.4889387 C44.7129912,72.4889387 45.4829912,71.7199387 45.4829912,70.7719387 L45.4829912,30.8539394 C45.4819946,29.9050293 44.7130127,29.1379395 43.7659912,29.1379395 L43.7659912,29.1379395 L43.7659912,29.1379395" id="Shape" fill="rgb(255,255,255)"></path>
+            <path d="M65.0449829,29.1379395 L57.2779827,29.1379395 C56.3299827,29.1379395 55.5609827,29.9059395 55.5609827,30.8539394 L55.5609827,70.7719387 C55.5609827,71.7199387 56.3299827,72.4889387 57.2779827,72.4889387 L65.0449829,72.4889387 C65.9929829,72.4889387 66.7619829,71.7199387 66.7619829,70.7719387 L66.7619829,30.8539394 C66.7620239,29.9050293 65.992981,29.1379395 65.0449829,29.1379395 L65.0449829,29.1379395 L65.0449829,29.1379395" id="Shape" fill="rgb(255,255,255)"></path>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/data/images/pause.svg b/data/images/pause.svg
new file mode 100644
index 000000000..3bb26bfde
--- /dev/null
+++ b/data/images/pause.svg
@@ -0,0 +1,46 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="122px" height="122px" xmlns="http://www.w3.org/2000/svg" version="1.1">
+    <title>pause</title>
+    <description>Created with Sketch (http://www.bohemiancoding.com/sketch)</description>
+    <defs>
+        <linearGradient id="gradient-1" x1="50%" y1="0%" x2="50%" y2="100%">
+            <stop offset="0%" style="stop-color:rgb(255,255,255); stop-opacity:100"></stop>
+            <stop offset="100%" style="stop-color:rgb(0,0,0); stop-opacity:100"></stop>
+        </linearGradient>
+        <linearGradient id="gradient-2" x1="50%" y1="-38%" x2="50%" y2="100%">
+            <stop offset="0%" style="stop-color:rgb(255,255,255); stop-opacity:100"></stop>
+            <stop offset="100%" style="stop-color:rgb(0,0,0); stop-opacity:100"></stop>
+        </linearGradient>
+        <linearGradient id="gradient-3" x1="50%" y1="0%" x2="50%" y2="100%">
+            <stop offset="0%" style="stop-color:rgb(255,255,255); stop-opacity:100"></stop>
+            <stop offset="100%" style="stop-color:rgb(0,0,0); stop-opacity:100"></stop>
+        </linearGradient>
+        <linearGradient id="gradient-4" x1="86%" y1="56%" x2="86%" y2="372%">
+            <stop offset="0%" style="stop-color:rgb(247,247,247); stop-opacity:100"></stop>
+            <stop offset="100%" style="stop-color:rgb(0,0,0); stop-opacity:100"></stop>
+        </linearGradient>
+        <linearGradient id="gradient-5" x1="50%" y1="0%" x2="50%" y2="100%">
+            <stop offset="0%" style="stop-color:rgb(255,255,255); stop-opacity:100"></stop>
+            <stop offset="100%" style="stop-color:rgb(0,0,0); stop-opacity:100"></stop>
+        </linearGradient>
+        <linearGradient id="gradient-6" x1="86%" y1="56%" x2="86%" y2="372%">
+            <stop offset="0%" style="stop-color:rgb(247,247,247); stop-opacity:100"></stop>
+            <stop offset="100%" style="stop-color:rgb(0,0,0); stop-opacity:100"></stop>
+        </linearGradient>
+        <linearGradient id="gradient-7" x1="50%" y1="0%" x2="50%" y2="100%">
+            <stop offset="0%" style="stop-color:rgb(255,255,255); stop-opacity:100"></stop>
+            <stop offset="100%" style="stop-color:rgb(0,0,0); stop-opacity:100"></stop>
+        </linearGradient>
+    </defs>
+    <g fill="rgb(215,215,215)" id="Page 1">
+        <g stroke="rgb(57,57,57)" stroke-width="1" style="fill:url(#gradient-2)" fill="none" id="Oval 9"></g>
+        <path id="Oval 9" d="M61,111 C88,111 111,88 111,61 C111,33 88,11 61,11 C33,11 11,33 11,61 C11,88 33,111 61,111 Z M61,111" stroke="rgb(57,57,57)" stroke-width="1" style="fill:url(#gradient-2)" fill="none"></path>
+        <path id="Oval 9 decoration" d="" stroke="rgb(57,57,57)" stroke-width="1" style="fill:url(#gradient-2)" fill="none"></path>
+        <g stroke="rgb(150,150,150)" stroke-width="1" style="fill:url(#gradient-4)" fill="none" id="Rectangle 11"></g>
+        <path id="Rectangle 11" d="M64,41 L64,81 L89,81 L89,41 L64,41 Z M64,41" stroke="rgb(150,150,150)" stroke-width="1" style="fill:url(#gradient-4)" fill="none"></path>
+        <path id="Rectangle 11 decoration" d="" stroke="rgb(150,150,150)" stroke-width="1" style="fill:url(#gradient-4)" fill="none"></path>
+        <g stroke="rgb(150,150,150)" stroke-width="1" style="fill:url(#gradient-6)" fill="none" id="Rectangle 11"></g>
+        <path id="Rectangle 11" d="M32,41 L32,81 L57,81 L57,41 L32,41 Z M32,41" stroke="rgb(150,150,150)" stroke-width="1" style="fill:url(#gradient-6)" fill="none"></path>
+        <path id="Rectangle 11 decoration" d="" stroke="rgb(150,150,150)" stroke-width="1" style="fill:url(#gradient-6)" fill="none"></path>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/data/images/play-pressed.svg b/data/images/play-pressed.svg
new file mode 100644
index 000000000..be2f72512
--- /dev/null
+++ b/data/images/play-pressed.svg
@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="102px" height="102px" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
+    <title>play-pressed</title>
+    <description>Created with Sketch (http://www.bohemiancoding.com/sketch)</description>
+    <defs>
+        <linearGradient x1="50%" y1="-66.3125%" x2="50%" y2="100%" id="linearGradient-1">
+            <stop stop-color="rgb(254,255,255)" offset="0%"></stop>
+            <stop stop-color="rgb(0,0,0)" offset="100%"></stop>
+        </linearGradient>
+    </defs>
+    <g id="Page 1" fill="rgb(223,223,223)" fill-rule="evenodd">
+        <path d="M51,101 C78.6142389,101 101,78.6142389 101,51 C101,23.3857611 78.6142389,1 51,1 C23.3857611,1 1,23.3857611 1,51 C1,78.6142389 23.3857611,101 51,101 Z M51,101" id="Oval 1" stroke="rgb(167,167,167)" stroke-width="1" fill="url(#linearGradient-1)"></path>
+        <path d="M39.5027446,29.632504 C39.5027446,29.632504 39.4987446,28.6955041 39.5967446,28.136504 C39.8227446,26.8445039 41.0657445,26.223504 42.0107446,26.2195039 C42.6647446,26.2165039 43.2507446,26.5625039 43.8457446,27.0075039 L71.1917453,48.3485035 C71.2517453,48.3975035 71.3087453,48.4475035 71.3637453,48.5015035 C72.3237453,49.4505035 72.5087453,50.4355035 72.4967453,51.0915034 C72.4677453,52.4455034 71.5947453,53.3065033 71.4197453,53.4635034 C61.1937455,61.3805032 44.6857461,74.4415041 44.6857461,74.4415041 C43.699746,75.1585041 42.906746,75.775504 41.995746,75.780504 L41.995746,75.780504 C40.937746,75.783504 40.178746,75.193504 39.821746,74.636504 C39.623746,74.326504 39.514746,73.966504 39.514746,73.599504 L39.5027446,29.632504 L39.5027446,29.632504 L39.5027446,29.632504" id="Shape" fill="rgb(155,155,155)"></path>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/data/images/play-rest.svg b/data/images/play-rest.svg
new file mode 100644
index 000000000..86766b5ac
--- /dev/null
+++ b/data/images/play-rest.svg
@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="102px" height="102px" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
+    <title>play-rest</title>
+    <description>Created with Sketch (http://www.bohemiancoding.com/sketch)</description>
+    <defs>
+        <linearGradient x1="50%" y1="-66.3125%" x2="50%" y2="100%" id="linearGradient-1">
+            <stop stop-color="rgb(255,255,255)" offset="0%"></stop>
+            <stop stop-color="rgb(0,0,0)" offset="100%"></stop>
+        </linearGradient>
+    </defs>
+    <g id="Page 1" fill="rgb(223,223,223)" fill-rule="evenodd">
+        <path d="M51,101 C78.6142389,101 101,78.6142389 101,51 C101,23.3857611 78.6142389,1 51,1 C23.3857611,1 1,23.3857611 1,51 C1,78.6142389 23.3857611,101 51,101 Z M51,101" id="Oval 1" stroke="rgb(167,167,167)" stroke-width="1" fill="url(#linearGradient-1)"></path>
+        <path d="M39.5027446,29.632504 C39.5027446,29.632504 39.4987446,28.6955041 39.5967446,28.136504 C39.8227446,26.8445039 41.0657445,26.223504 42.0107446,26.2195039 C42.6647446,26.2165039 43.2507446,26.5625039 43.8457446,27.0075039 L71.1917453,48.3485035 C71.2517453,48.3975035 71.3087453,48.4475035 71.3637453,48.5015035 C72.3237453,49.4505035 72.5087453,50.4355035 72.4967453,51.0915034 C72.4677453,52.4455034 71.5947453,53.3065033 71.4197453,53.4635034 C61.1937455,61.3805032 44.6857461,74.4415041 44.6857461,74.4415041 C43.699746,75.1585041 42.906746,75.775504 41.995746,75.780504 L41.995746,75.780504 C40.937746,75.783504 40.178746,75.193504 39.821746,74.636504 C39.623746,74.326504 39.514746,73.966504 39.514746,73.599504 L39.5027446,29.632504 L39.5027446,29.632504 L39.5027446,29.632504" id="Shape" fill="rgb(255,255,255)"></path>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/data/images/play.svg b/data/images/play.svg
new file mode 100644
index 000000000..6e6448b02
--- /dev/null
+++ b/data/images/play.svg
@@ -0,0 +1,35 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="122px" height="122px" xmlns="http://www.w3.org/2000/svg" version="1.1">
+    <title>play</title>
+    <description>Created with Sketch (http://www.bohemiancoding.com/sketch)</description>
+    <defs>
+        <linearGradient id="gradient-1" x1="50%" y1="0%" x2="50%" y2="100%">
+            <stop offset="0%" style="stop-color:rgb(255,255,255); stop-opacity:100"></stop>
+            <stop offset="100%" style="stop-color:rgb(0,0,0); stop-opacity:100"></stop>
+        </linearGradient>
+        <linearGradient id="gradient-2" x1="50%" y1="-38%" x2="50%" y2="100%">
+            <stop offset="0%" style="stop-color:rgb(255,255,255); stop-opacity:100"></stop>
+            <stop offset="100%" style="stop-color:rgb(0,0,0); stop-opacity:100"></stop>
+        </linearGradient>
+        <linearGradient id="gradient-3" x1="50%" y1="0%" x2="50%" y2="100%">
+            <stop offset="0%" style="stop-color:rgb(255,255,255); stop-opacity:100"></stop>
+            <stop offset="100%" style="stop-color:rgb(0,0,0); stop-opacity:100"></stop>
+        </linearGradient>
+        <linearGradient id="gradient-4" x1="86%" y1="56%" x2="146%" y2="61%">
+            <stop offset="0%" style="stop-color:rgb(247,247,247); stop-opacity:100"></stop>
+            <stop offset="100%" style="stop-color:rgb(0,0,0); stop-opacity:100"></stop>
+        </linearGradient>
+        <linearGradient id="gradient-5" x1="50%" y1="0%" x2="50%" y2="100%">
+            <stop offset="0%" style="stop-color:rgb(255,255,255); stop-opacity:100"></stop>
+            <stop offset="100%" style="stop-color:rgb(0,0,0); stop-opacity:100"></stop>
+        </linearGradient>
+    </defs>
+    <g fill="rgb(215,215,215)" id="Page 1">
+        <g stroke="rgb(57,57,57)" stroke-width="1" style="fill:url(#gradient-2)" fill="none" id="Oval 9"></g>
+        <path id="Oval 9" d="M61,111 C88,111 111,88 111,61 C111,33 88,11 61,11 C33,11 11,33 11,61 C11,88 33,111 61,111 Z M61,111" stroke="rgb(57,57,57)" stroke-width="1" style="fill:url(#gradient-2)" fill="none"></path>
+        <path id="Oval 9 decoration" d="" stroke="rgb(57,57,57)" stroke-width="1" style="fill:url(#gradient-2)" fill="none"></path>
+        <g stroke="rgb(150,150,150)" stroke-width="1" style="fill:url(#gradient-4)" fill="none" id="Triangle 10"></g>
+        <path id="Triangle 10" d="M68,36 L93,86 L43,86 L68,36 Z M68,36" stroke="rgb(150,150,150)" stroke-width="1" style="fill:url(#gradient-4)" fill="none"></path>
+        <path id="Triangle 10 decoration" d="" stroke="rgb(150,150,150)" stroke-width="1" style="fill:url(#gradient-4)" fill="none"></path>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/data/images/playlist.svg b/data/images/playlist.svg
new file mode 100644
index 000000000..3e45a3e1f
--- /dev/null
+++ b/data/images/playlist.svg
@@ -0,0 +1,20 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="70px" height="70px" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
+    <title>playlist</title>
+    <description>Created with Sketch (http://www.bohemiancoding.com/sketch)</description>
+    <defs></defs>
+    <g id="Page 1" fill="rgb(223,223,223)" fill-rule="evenodd">
+        <g id="g1082" fill="rgb(0,0,0)">
+            <path d="M61.5501904,51.352101 C58.6661418,54.8105374 55.3978562,58.7300984 53.4164226,65.2602608 C53.236809,65.8555755 52.6820531,66.2178879 52.1022877,66.1215151 C51.5270695,66.0214828 51.1053186,65.4859436 51.1064554,64.8601312 C51.1166865,62.6399004 51.241734,60.5660586 51.4736401,58.6922811 L51.4736401,22.9441252 C48.9078941,23.2356829 45.7328256,21.7961927 43.260297,19.2160894 C39.4361189,15.2257736 38.3936779,9.9435764 40.8843958,7.19146556 C41.8063364,6.17772287 43.0977355,5.6434035 44.6187672,5.6434035 C47.0776547,5.6434035 49.8934954,7.04995628 52.1534436,9.40803648 C55.3728468,12.7713201 56.6767506,17.2215411 55.3523843,20.1615162 L55.3523843,47.5106122 C57.0348408,45.1452125 58.9867177,43.6849839 60.7783061,42.3455257 C63.4997932,40.308281 65.4653117,38.838293 65.8370433,34.8845742 C65.8984302,34.2258244 66.4122615,33.7207829 67.0374987,33.7415214 C67.6559151,33.7549403 68.1583784,34.2746207 68.1970295,34.9370303 C68.6346962,42.8554485 65.193618,46.9823941 61.5501904,51.352101" id="path1084" fill="rgb(168,182,207)"></path>
+        </g>
+        <g id="g1086" fill="rgb(182,195,216)">
+            <path d="M3.94898897,38 L36.725527,38 C38.1410417,38 39.2852494,39.0779566 39.2852494,40.4084074 C39.2852494,41.7388583 38.1410416,42.8168148 36.725527,42.8168148 L3.94898897,42.8168148 C2.53494877,42.8168148 1.38779207,41.7388583 1.38779207,40.4084074 C1.38779207,39.0779566 2.53494877,38 3.94898897,38" id="path1088"></path>
+        </g>
+        <g id="g1090" fill="rgb(182,195,216)">
+            <path d="M3.94898897,23 L36.725527,23 C38.1410417,23 39.2852494,24.0779566 39.2852494,25.4084074 C39.2852494,26.7388583 38.1410416,27.8168148 36.725527,27.8168148 L3.94898897,27.8168148 C2.53494877,27.8168148 1.38779207,26.7388583 1.38779207,25.4084074 C1.38779207,24.0779566 2.53494877,23 3.94898897,23" id="path1092"></path>
+        </g>
+        <g id="g1094" fill="rgb(182,195,216)">
+            <path d="M39.3368566,10.774663 C39.3368566,12.1037266 38.1941234,13.1816832 36.7771343,13.1816832 L4.00059623,13.1816832 C2.58655603,13.1816832 1.43939932,12.1037266 1.43939932,10.774663 C1.43939932,9.44559941 2.58655603,8.3662556 4.00059623,8.3662556 L36.7771343,8.3662556 C38.1941234,8.3662556 39.3368566,9.44559941 39.3368566,10.774663" id="path1096"></path>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/data/images/prev.svg b/data/images/prev.svg
new file mode 100644
index 000000000..5583881ad
--- /dev/null
+++ b/data/images/prev.svg
@@ -0,0 +1,57 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="117px" height="117px" xmlns="http://www.w3.org/2000/svg" version="1.1">
+    <title>prev</title>
+    <description>Created with Sketch (http://www.bohemiancoding.com/sketch)</description>
+    <defs>
+        <linearGradient id="gradient-1" x1="50%" y1="0%" x2="50%" y2="100%">
+            <stop offset="0%" style="stop-color:rgb(255,255,255); stop-opacity:100"></stop>
+            <stop offset="100%" style="stop-color:rgb(0,0,0); stop-opacity:100"></stop>
+        </linearGradient>
+        <linearGradient id="gradient-2" x1="50%" y1="-38%" x2="50%" y2="100%">
+            <stop offset="0%" style="stop-color:rgb(255,255,255); stop-opacity:100"></stop>
+            <stop offset="100%" style="stop-color:rgb(0,0,0); stop-opacity:100"></stop>
+        </linearGradient>
+        <linearGradient id="gradient-3" x1="50%" y1="0%" x2="50%" y2="100%">
+            <stop offset="0%" style="stop-color:rgb(255,255,255); stop-opacity:100"></stop>
+            <stop offset="100%" style="stop-color:rgb(0,0,0); stop-opacity:100"></stop>
+        </linearGradient>
+        <linearGradient id="gradient-4" x1="86%" y1="56%" x2="146%" y2="61%">
+            <stop offset="0%" style="stop-color:rgb(247,247,247); stop-opacity:100"></stop>
+            <stop offset="100%" style="stop-color:rgb(0,0,0); stop-opacity:100"></stop>
+        </linearGradient>
+        <linearGradient id="gradient-5" x1="50%" y1="0%" x2="50%" y2="100%">
+            <stop offset="0%" style="stop-color:rgb(255,255,255); stop-opacity:100"></stop>
+            <stop offset="100%" style="stop-color:rgb(0,0,0); stop-opacity:100"></stop>
+        </linearGradient>
+        <linearGradient id="gradient-6" x1="86%" y1="56%" x2="146%" y2="61%">
+            <stop offset="0%" style="stop-color:rgb(247,247,247); stop-opacity:100"></stop>
+            <stop offset="100%" style="stop-color:rgb(0,0,0); stop-opacity:100"></stop>
+        </linearGradient>
+        <linearGradient id="gradient-7" x1="50%" y1="0%" x2="50%" y2="100%">
+            <stop offset="0%" style="stop-color:rgb(255,255,255); stop-opacity:100"></stop>
+            <stop offset="100%" style="stop-color:rgb(0,0,0); stop-opacity:100"></stop>
+        </linearGradient>
+        <linearGradient id="gradient-8" x1="50%" y1="0%" x2="50%" y2="100%">
+            <stop offset="0%" style="stop-color:rgb(255,255,255); stop-opacity:100"></stop>
+            <stop offset="100%" style="stop-color:rgb(0,0,0); stop-opacity:100"></stop>
+        </linearGradient>
+        <linearGradient id="gradient-9" x1="50%" y1="0%" x2="50%" y2="100%">
+            <stop offset="0%" style="stop-color:rgb(255,255,255); stop-opacity:100"></stop>
+            <stop offset="100%" style="stop-color:rgb(0,0,0); stop-opacity:100"></stop>
+        </linearGradient>
+    </defs>
+    <g fill="rgb(215,215,215)" id="Page 1">
+        <g stroke="rgb(57,57,57)" stroke-width="1" style="fill:url(#gradient-2)" fill="none" id="Oval 9"></g>
+        <path id="Oval 9" d="M58,98 C79,98 96,81 96,60 C96,39 79,23 58,23 C37,23 21,39 21,60 C21,81 37,98 58,98 Z M58,98" stroke="rgb(57,57,57)" stroke-width="1" style="fill:url(#gradient-2)" fill="none"></path>
+        <path id="Oval 9 decoration" d="" stroke="rgb(57,57,57)" stroke-width="1" style="fill:url(#gradient-2)" fill="none"></path>
+        <g stroke="rgb(150,150,150)" stroke-width="1" style="fill:url(#gradient-4)" fill="none" id="Triangle 10"></g>
+        <path id="Triangle 10" d="M68,50 L84,71 L53,71 L68,50 Z M68,50" stroke="rgb(150,150,150)" stroke-width="1" style="fill:url(#gradient-4)" fill="none"></path>
+        <path id="Triangle 10 decoration" d="" stroke="rgb(150,150,150)" stroke-width="1" style="fill:url(#gradient-4)" fill="none"></path>
+        <g stroke="rgb(150,150,150)" stroke-width="1" style="fill:url(#gradient-6)" fill="none" id="Triangle 10"></g>
+        <path id="Triangle 10" d="M48,50 L64,71 L33,71 L48,50 Z M48,50" stroke="rgb(150,150,150)" stroke-width="1" style="fill:url(#gradient-6)" fill="none"></path>
+        <path id="Triangle 10 decoration" d="" stroke="rgb(150,150,150)" stroke-width="1" style="fill:url(#gradient-6)" fill="none"></path>
+        <g stroke="rgb(150,150,150)" stroke-width="1" fill="rgb(255,254,254)" id="Rectangle 11"></g>
+        <path id="Rectangle 11" d="M33,48 L33,73 L38,73 L38,48 L33,48 Z M33,48" stroke="rgb(150,150,150)" stroke-width="1" fill="rgb(255,254,254)"></path>
+        <path id="Rectangle 11 decoration" d="" stroke="rgb(150,150,150)" stroke-width="1" fill="rgb(255,254,254)"></path>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/data/images/process-stop.svg b/data/images/process-stop.svg
new file mode 100644
index 000000000..dfd0abecd
--- /dev/null
+++ b/data/images/process-stop.svg
@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="50px" height="45px" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
+    <title>process-stop</title>
+    <description>Created with Sketch (http://www.bohemiancoding.com/sketch)</description>
+    <defs></defs>
+    <g id="Page 1" fill="rgb(223,223,223)" fill-rule="evenodd">
+        <path d="M48.7402084,36.8689988 L29.3422077,2.69300008 C28.3972077,1.02700007 26.6312078,0 24.7172077,0 C22.8012077,0 21.0352078,1.02699995 20.0902079,2.69300008 L0.693208507,36.8689988 C-0.241791495,38.5149988 -0.229791471,40.5349987 0.722208506,42.1719987 C1.67420853,43.8069987 3.4262085,44.8149986 5.31920863,44.8149986 L44.1142068,44.8149986 C46.0082069,44.8149986 47.7582069,43.8069986 48.7112069,42.1719987 C49.6632431,40.5350144 49.6731918,38.5140183 48.7402084,36.8689988 C48.7402084,36.8689988 49.6731918,38.5140183 48.7402084,36.8689988 L48.7402084,36.8689988 M27.3662155,38.5350144 C26.7162155,39.1130144 25.9442155,39.4060144 25.0742155,39.4060144 C24.1932155,39.4060144 23.4142155,39.1170144 22.7562154,38.5470144 C22.0842154,37.9630144 21.7422153,37.1450144 21.7422153,36.1150144 C21.7422153,35.2110144 22.0642153,34.4310144 22.6992153,33.7980145 C23.3332153,33.1640145 24.1192153,32.8420146 25.0352153,32.8420146 C25.9492153,32.8420146 26.7412153,33.1620145 27.3892154,33.7950146 C28.0382154,34.4300146 28.3682154,35.2110146 28.3682154,36.1150145 C28.3672226,37.1299851 28.030217,37.9429734 27.3662155,38.5350144 C27.3662155,38.5350144 28.030217,37.9429734 27.3662155,38.5350144 L27.3662155,38.5350144 M28.227208,16.5289719 L27.3822079,26.2069724 C27.2872079,27.4119724 27.0832079,28.3199723 26.7592079,28.9809723 C26.4022079,29.7099723 25.7792079,30.0969723 24.9562079,30.0969723 C24.1172079,30.0969723 23.4992079,29.7179723 23.1682079,29.0019723 C22.8742079,28.3639723 22.6722079,27.4389724 22.5492079,26.1699723 L21.9192079,16.7509726 C21.8002079,14.8899727 21.7412079,13.5909725 21.7412079,12.7799727 C21.7412079,11.6079726 22.0602079,10.6729726 22.6892079,10.0009726 C23.3242079,9.32297266 24.167208,8.97797263 25.191208,8.97797263 C26.4552081,8.97797263 27.319208,9.43697262 27.761208,10.3409727 C28.1672079,11.1749727 28.3652079,12.3269726 28.3652079,13.8619726 C28.3672226,14.7319748 28.3202255,15.6279709 28.227208,16.5289719 C28.227208,16.5289719 28.3202255,15.6279709 28.227208,16.5289719 L28.227208,16.5289719" id="Shape" fill="rgb(172,51,39)"></path>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/data/images/repeat-1-on-pressed.svg b/data/images/repeat-1-on-pressed.svg
new file mode 100644
index 000000000..8be0e9c14
--- /dev/null
+++ b/data/images/repeat-1-on-pressed.svg
@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="73px" height="54px" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
+    <title>repeat-1-on-pressed</title>
+    <description>Created with Sketch (http://www.bohemiancoding.com/sketch)</description>
+    <defs></defs>
+    <g id="Page 1" fill="rgb(223,223,223)" fill-rule="evenodd">
+        <g id="Group" fill="rgb(93,112,20)">
+            <path d="M34.6940002,18.3170166 L34.6940002,22.7480168 C34.6940002,23.1300168 34.9090002,23.4800168 35.2500002,23.6540169 C35.3956046,23.7283135 35.5550002,23.7650169 35.7130002,23.7650169 C35.9230002,23.7650169 36.1340002,23.6990169 36.3110002,23.5700169 L45.6810001,16.765017 C45.9450001,16.574017 46.1010001,16.267017 46.1010001,15.941017 C46.1010001,15.615017 45.9450001,15.308017 45.6810001,15.117017 L36.3110002,8.3120172 C36.0010002,8.08601721 35.5910002,8.05401722 35.2500002,8.2270172 C34.9074061,8.40082598 34.6940002,8.75101719 34.6940002,9.13401721 L34.6940002,13.5650174 L14.0710011,13.5650174 C8.26900101,13.5650174 3.55000114,18.2850172 3.55000114,24.0860173 L3.55000114,32.0150172 C3.55000114,33.3270173 4.61400115,34.3910172 5.92600107,34.3910172 C7.23800099,34.3910172 8.302001,33.3280172 8.302001,32.0150172 L8.302001,24.0860173 C8.302001,20.9050174 10.8900011,18.3170173 14.072001,18.3170173 L34.6940002,18.3170173 L34.6940002,18.3170173 L34.6940002,18.3170166" id="Shape" fill="rgb(111,128,23)"></path>
+            <path d="M50.5130005,21.7110596 C49.2010005,21.7110596 48.1380005,22.7750596 48.1380005,24.0860596 L48.1380005,32.0150595 C48.1380005,35.1980596 45.5500004,37.7860594 42.3680005,37.7860594 L21.6460004,37.7860594 L21.6460004,33.3530593 C21.6460004,32.9710593 21.4300004,32.6210593 21.0900004,32.4460593 C20.7500004,32.2740593 20.3380004,32.3040593 20.0290004,32.5300593 L10.66,39.3360595 C10.395,39.5270595 10.239,39.8340595 10.239,40.1600595 C10.239,40.4850595 10.395,40.7920595 10.6589999,40.9830595 L20.0289998,47.7900597 C20.2069998,47.9190597 20.4159998,47.9840597 20.6269998,47.9840597 C20.7849998,47.9840597 20.9429998,47.9470597 21.0899998,47.8740597 C21.4299998,47.7000597 21.6459998,47.3490597 21.6459998,46.9660597 L21.6459998,42.5370598 L42.3679999,42.5370598 C48.1690001,42.5370598 52.8889998,37.8160596 52.8889998,32.0160599 L52.8889998,24.08706 C52.8890076,22.7750244 51.8250122,21.7110596 50.5130005,21.7110596 L50.5130005,21.7110596 L50.5130005,21.7110596" id="Shape" fill="rgb(111,128,23)"></path>
+        </g>
+        <path d="M58,20 C62.970563,20 67,15.970563 67,11 C67,6.02943701 62.970563,2 58,2 C53.029437,2 49,6.02943701 49,11 C49,15.970563 53.029437,20 58,20 Z M58,20" id="Oval 1" fill="rgb(93,112,20)"></path>
+        <text id="1" fill="rgb(255,255,255)" font-family="Helvetica" font-size="12" font-weight="bold">
+            <tspan x="54" y="16">1</tspan>
+        </text>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/data/images/repeat-1-on-rest.svg b/data/images/repeat-1-on-rest.svg
new file mode 100644
index 000000000..0647a26d0
--- /dev/null
+++ b/data/images/repeat-1-on-rest.svg
@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="73px" height="54px" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
+    <title>repeat-1-on-rest</title>
+    <description>Created with Sketch (http://www.bohemiancoding.com/sketch)</description>
+    <defs></defs>
+    <g id="Page 1" fill="rgb(223,223,223)" fill-rule="evenodd">
+        <g id="Group">
+            <g fill="rgb(93,112,20)">
+                <path d="M34.6940002,18.3170166 L34.6940002,22.7480168 C34.6940002,23.1300168 34.9090002,23.4800168 35.2500002,23.6540169 C35.3956046,23.7283135 35.5550002,23.7650169 35.7130002,23.7650169 C35.9230002,23.7650169 36.1340002,23.6990169 36.3110002,23.5700169 L45.6810001,16.765017 C45.9450001,16.574017 46.1010001,16.267017 46.1010001,15.941017 C46.1010001,15.615017 45.9450001,15.308017 45.6810001,15.117017 L36.3110002,8.3120172 C36.0010002,8.08601721 35.5910002,8.05401722 35.2500002,8.2270172 C34.9074061,8.40082598 34.6940002,8.75101719 34.6940002,9.13401721 L34.6940002,13.5650174 L14.0710011,13.5650174 C8.26900101,13.5650174 3.55000114,18.2850172 3.55000114,24.0860173 L3.55000114,32.0150172 C3.55000114,33.3270173 4.61400115,34.3910172 5.92600107,34.3910172 C7.23800099,34.3910172 8.302001,33.3280172 8.302001,32.0150172 L8.302001,24.0860173 C8.302001,20.9050174 10.8900011,18.3170173 14.072001,18.3170173 L34.6940002,18.3170173 L34.6940002,18.3170173 L34.6940002,18.3170166" id="Shape" fill="rgb(131,158,25)"></path>
+                <path d="M50.5130005,21.7110596 C49.2010005,21.7110596 48.1380005,22.7750596 48.1380005,24.0860596 L48.1380005,32.0150595 C48.1380005,35.1980596 45.5500004,37.7860594 42.3680005,37.7860594 L21.6460004,37.7860594 L21.6460004,33.3530593 C21.6460004,32.9710593 21.4300004,32.6210593 21.0900004,32.4460593 C20.7500004,32.2740593 20.3380004,32.3040593 20.0290004,32.5300593 L10.66,39.3360595 C10.395,39.5270595 10.239,39.8340595 10.239,40.1600595 C10.239,40.4850595 10.395,40.7920595 10.6589999,40.9830595 L20.0289998,47.7900597 C20.2069998,47.9190597 20.4159998,47.9840597 20.6269998,47.9840597 C20.7849998,47.9840597 20.9429998,47.9470597 21.0899998,47.8740597 C21.4299998,47.7000597 21.6459998,47.3490597 21.6459998,46.9660597 L21.6459998,42.5370598 L42.3679999,42.5370598 C48.1690001,42.5370598 52.8889998,37.8160596 52.8889998,32.0160599 L52.8889998,24.08706 C52.8890076,22.7750244 51.8250122,21.7110596 50.5130005,21.7110596 L50.5130005,21.7110596 L50.5130005,21.7110596" id="Shape" fill="rgb(147,169,28)"></path>
+            </g>
+            <path d="M58,20 C62.970563,20 67,15.970563 67,11 C67,6.02943701 62.970563,2 58,2 C53.029437,2 49,6.02943701 49,11 C49,15.970563 53.029437,20 58,20 Z M58,20" id="Oval 1" fill="rgb(147,169,28)"></path>
+            <text id="1" fill="rgb(254,254,254)" font-family="Helvetica" font-size="12" font-weight="bold">
+                <tspan x="54" y="16">1</tspan>
+            </text>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/data/images/repeat-all-on-pressed.svg b/data/images/repeat-all-on-pressed.svg
new file mode 100644
index 000000000..7aa7cf8ef
--- /dev/null
+++ b/data/images/repeat-all-on-pressed.svg
@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="73px" height="54px" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
+    <title>repeat-all-on-pressed</title>
+    <description>Created with Sketch (http://www.bohemiancoding.com/sketch)</description>
+    <defs></defs>
+    <g id="Page 1" fill="rgb(223,223,223)" fill-rule="evenodd">
+        <g id="Group" fill="rgb(93,112,20)">
+            <path d="M34.6940002,18.3170166 L34.6940002,22.7480168 C34.6940002,23.1300168 34.9090002,23.4800168 35.2500002,23.6540169 C35.3956046,23.7283135 35.5550002,23.7650169 35.7130002,23.7650169 C35.9230002,23.7650169 36.1340002,23.6990169 36.3110002,23.5700169 L45.6810001,16.765017 C45.9450001,16.574017 46.1010001,16.267017 46.1010001,15.941017 C46.1010001,15.615017 45.9450001,15.308017 45.6810001,15.117017 L36.3110002,8.3120172 C36.0010002,8.08601721 35.5910002,8.05401722 35.2500002,8.2270172 C34.9074061,8.40082598 34.6940002,8.75101719 34.6940002,9.13401721 L34.6940002,13.5650174 L14.0710011,13.5650174 C8.26900101,13.5650174 3.55000114,18.2850172 3.55000114,24.0860173 L3.55000114,32.0150172 C3.55000114,33.3270173 4.61400115,34.3910172 5.92600107,34.3910172 C7.23800099,34.3910172 8.302001,33.3280172 8.302001,32.0150172 L8.302001,24.0860173 C8.302001,20.9050174 10.8900011,18.3170173 14.072001,18.3170173 L34.6940002,18.3170173 L34.6940002,18.3170173 L34.6940002,18.3170166" id="Shape" fill="rgb(111,128,23)"></path>
+            <path d="M50.5130005,21.7110596 C49.2010005,21.7110596 48.1380005,22.7750596 48.1380005,24.0860596 L48.1380005,32.0150595 C48.1380005,35.1980596 45.5500004,37.7860594 42.3680005,37.7860594 L21.6460004,37.7860594 L21.6460004,33.3530593 C21.6460004,32.9710593 21.4300004,32.6210593 21.0900004,32.4460593 C20.7500004,32.2740593 20.3380004,32.3040593 20.0290004,32.5300593 L10.66,39.3360595 C10.395,39.5270595 10.239,39.8340595 10.239,40.1600595 C10.239,40.4850595 10.395,40.7920595 10.6589999,40.9830595 L20.0289998,47.7900597 C20.2069998,47.9190597 20.4159998,47.9840597 20.6269998,47.9840597 C20.7849998,47.9840597 20.9429998,47.9470597 21.0899998,47.8740597 C21.4299998,47.7000597 21.6459998,47.3490597 21.6459998,46.9660597 L21.6459998,42.5370598 L42.3679999,42.5370598 C48.1690001,42.5370598 52.8889998,37.8160596 52.8889998,32.0160599 L52.8889998,24.08706 C52.8890076,22.7750244 51.8250122,21.7110596 50.5130005,21.7110596 L50.5130005,21.7110596 L50.5130005,21.7110596" id="Shape" fill="rgb(111,128,23)"></path>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/data/images/repeat-off-pressed.svg b/data/images/repeat-off-pressed.svg
new file mode 100644
index 000000000..2ee1414cb
--- /dev/null
+++ b/data/images/repeat-off-pressed.svg
@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="73px" height="54px" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
+    <title>repeat-off-pressed</title>
+    <description>Created with Sketch (http://www.bohemiancoding.com/sketch)</description>
+    <defs></defs>
+    <g id="Page 1" fill="rgb(223,223,223)" fill-rule="evenodd">
+        <g id="Group" fill="rgb(93,112,20)">
+            <path d="M34.6940002,18.3170166 L34.6940002,22.7480168 C34.6940002,23.1300168 34.9090002,23.4800168 35.2500002,23.6540169 C35.3956046,23.7283135 35.5550002,23.7650169 35.7130002,23.7650169 C35.9230002,23.7650169 36.1340002,23.6990169 36.3110002,23.5700169 L45.6810001,16.765017 C45.9450001,16.574017 46.1010001,16.267017 46.1010001,15.941017 C46.1010001,15.615017 45.9450001,15.308017 45.6810001,15.117017 L36.3110002,8.3120172 C36.0010002,8.08601721 35.5910002,8.05401722 35.2500002,8.2270172 C34.9074061,8.40082598 34.6940002,8.75101719 34.6940002,9.13401721 L34.6940002,13.5650174 L14.0710011,13.5650174 C8.26900101,13.5650174 3.55000114,18.2850172 3.55000114,24.0860173 L3.55000114,32.0150172 C3.55000114,33.3270173 4.61400115,34.3910172 5.92600107,34.3910172 C7.23800099,34.3910172 8.302001,33.3280172 8.302001,32.0150172 L8.302001,24.0860173 C8.302001,20.9050174 10.8900011,18.3170173 14.072001,18.3170173 L34.6940002,18.3170173 L34.6940002,18.3170173 L34.6940002,18.3170166" id="Shape" fill="rgb(79,79,79)"></path>
+            <path d="M50.5130005,21.7110596 C49.2010005,21.7110596 48.1380005,22.7750596 48.1380005,24.0860596 L48.1380005,32.0150595 C48.1380005,35.1980596 45.5500004,37.7860594 42.3680005,37.7860594 L21.6460004,37.7860594 L21.6460004,33.3530593 C21.6460004,32.9710593 21.4300004,32.6210593 21.0900004,32.4460593 C20.7500004,32.2740593 20.3380004,32.3040593 20.0290004,32.5300593 L10.66,39.3360595 C10.395,39.5270595 10.239,39.8340595 10.239,40.1600595 C10.239,40.4850595 10.395,40.7920595 10.6589999,40.9830595 L20.0289998,47.7900597 C20.2069998,47.9190597 20.4159998,47.9840597 20.6269998,47.9840597 C20.7849998,47.9840597 20.9429998,47.9470597 21.0899998,47.8740597 C21.4299998,47.7000597 21.6459998,47.3490597 21.6459998,46.9660597 L21.6459998,42.5370598 L42.3679999,42.5370598 C48.1690001,42.5370598 52.8889998,37.8160596 52.8889998,32.0160599 L52.8889998,24.08706 C52.8890076,22.7750244 51.8250122,21.7110596 50.5130005,21.7110596 L50.5130005,21.7110596 L50.5130005,21.7110596" id="Shape" fill="rgb(77,76,76)"></path>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/data/images/repeat-off-rest.svg b/data/images/repeat-off-rest.svg
new file mode 100644
index 000000000..4f25d0e99
--- /dev/null
+++ b/data/images/repeat-off-rest.svg
@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="73px" height="54px" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
+    <title>repeat-off-rest</title>
+    <description>Created with Sketch (http://www.bohemiancoding.com/sketch)</description>
+    <defs></defs>
+    <g id="Page 1" fill="rgb(223,223,223)" fill-rule="evenodd">
+        <g id="Group" fill="rgb(93,112,20)">
+            <path d="M34.6940002,18.3170166 L34.6940002,22.7480168 C34.6940002,23.1300168 34.9090002,23.4800168 35.2500002,23.6540169 C35.3956046,23.7283135 35.5550002,23.7650169 35.7130002,23.7650169 C35.9230002,23.7650169 36.1340002,23.6990169 36.3110002,23.5700169 L45.6810001,16.765017 C45.9450001,16.574017 46.1010001,16.267017 46.1010001,15.941017 C46.1010001,15.615017 45.9450001,15.308017 45.6810001,15.117017 L36.3110002,8.3120172 C36.0010002,8.08601721 35.5910002,8.05401722 35.2500002,8.2270172 C34.9074061,8.40082598 34.6940002,8.75101719 34.6940002,9.13401721 L34.6940002,13.5650174 L14.0710011,13.5650174 C8.26900101,13.5650174 3.55000114,18.2850172 3.55000114,24.0860173 L3.55000114,32.0150172 C3.55000114,33.3270173 4.61400115,34.3910172 5.92600107,34.3910172 C7.23800099,34.3910172 8.302001,33.3280172 8.302001,32.0150172 L8.302001,24.0860173 C8.302001,20.9050174 10.8900011,18.3170173 14.072001,18.3170173 L34.6940002,18.3170173 L34.6940002,18.3170173 L34.6940002,18.3170166" id="Shape" fill="rgb(96,96,96)"></path>
+            <path d="M50.5130005,21.7110596 C49.2010005,21.7110596 48.1380005,22.7750596 48.1380005,24.0860596 L48.1380005,32.0150595 C48.1380005,35.1980596 45.5500004,37.7860594 42.3680005,37.7860594 L21.6460004,37.7860594 L21.6460004,33.3530593 C21.6460004,32.9710593 21.4300004,32.6210593 21.0900004,32.4460593 C20.7500004,32.2740593 20.3380004,32.3040593 20.0290004,32.5300593 L10.66,39.3360595 C10.395,39.5270595 10.239,39.8340595 10.239,40.1600595 C10.239,40.4850595 10.395,40.7920595 10.6589999,40.9830595 L20.0289998,47.7900597 C20.2069998,47.9190597 20.4159998,47.9840597 20.6269998,47.9840597 C20.7849998,47.9840597 20.9429998,47.9470597 21.0899998,47.8740597 C21.4299998,47.7000597 21.6459998,47.3490597 21.6459998,46.9660597 L21.6459998,42.5370598 L42.3679999,42.5370598 C48.1690001,42.5370598 52.8889998,37.8160596 52.8889998,32.0160599 L52.8889998,24.08706 C52.8890076,22.7750244 51.8250122,21.7110596 50.5130005,21.7110596 L50.5130005,21.7110596 L50.5130005,21.7110596" id="Shape" fill="rgb(96,96,96)"></path>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/data/images/resolvers-settings.svg b/data/images/resolvers-settings.svg
new file mode 100644
index 000000000..b05bd27c9
--- /dev/null
+++ b/data/images/resolvers-settings.svg
@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="51px" height="51px" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
+    <title>resolvers-settings</title>
+    <description>Created with Sketch (http://www.bohemiancoding.com/sketch)</description>
+    <defs></defs>
+    <g id="Page 1" fill="rgb(223,223,223)" fill-rule="evenodd">
+        <g id="Group" fill="rgb(0,0,0)">
+            <path d="M30.7369995,38.2019958 L30.7369995,37.8139958 L31.5539995,36.9979959 L30.1959994,35.4479959 C28.3459994,36.3969959 26.2559994,36.9409959 24.0399993,36.9409959 C16.5589994,36.9409959 10.4739993,30.8559959 10.4739993,23.3769958 C10.4739993,15.8959959 16.5589994,9.81099582 24.0399993,9.81099582 C31.5199993,9.81099582 37.6059993,15.8959959 37.6059993,23.3769958 C37.6059993,27.0799959 36.1109993,30.4389956 33.6939994,32.8919961 L34.7809994,34.3919961 L35.5209994,33.6529961 L36.2579994,33.6529961 L43.0589995,42.7109957 C47.5029992,38.2059956 50.2519993,32.022996 50.2519993,25.194995 C50.2519993,11.4169951 39.0819992,0.244994223 25.3019986,0.244994223 C11.5219979,0.244994223 0.350998342,11.4159938 0.350998342,25.194995 C0.350998342,38.9729949 11.5219979,50.1439944 25.3019986,50.1439944 C29.8009986,50.1439944 34.0089983,48.9359944 37.6529984,46.8529945 C34.5770035,43.026001 30.7369995,38.2019958 30.7369995,38.2019958 L30.7369995,38.2019958 L30.7369995,38.2019958" id="Shape" fill="rgb(92,92,92)"></path>
+            <path d="M15.2649994,23.3769989 C15.2649994,28.2149987 19.2019994,32.1499987 24.039999,32.1499987 C28.8789992,32.1499987 32.8149986,28.2149987 32.8149986,23.3769989 C32.8149986,18.5379987 28.8789985,14.6009989 24.039999,14.6009989 C19.2020035,14.602005 15.2649994,18.5379944 15.2649994,23.3769989 C15.2649994,23.3769989 15.2649994,18.5379944 15.2649994,23.3769989 L15.2649994,23.3769989" id="Shape" fill="rgb(71,71,71)"></path>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/data/images/search-box-dismiss.svg b/data/images/search-box-dismiss.svg
new file mode 100644
index 000000000..2983d3925
--- /dev/null
+++ b/data/images/search-box-dismiss.svg
@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="82px" height="82px" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
+    <title>search-box-dismiss</title>
+    <description>Created with Sketch (http://www.bohemiancoding.com/sketch)</description>
+    <defs></defs>
+    <g id="Page 1" fill="rgb(223,223,223)" fill-rule="evenodd">
+        <path d="M41,71 C57.5685433,71 71,57.5685433 71,41 C71,24.4314567 57.5685433,11 41,11 C24.4314567,11 11,24.4314567 11,41 C11,57.5685433 24.4314567,71 41,71 Z M41,71" id="Oval 1" fill="rgb(152,152,152)"></path>
+        <path d="M62.5728671,35.9948845 L46.7260666,35.9948845 L46.7260666,19.8649524 C46.7260666,18.4559492 45.554631,17.3119228 44.1151917,17.3119228 L38.8804739,17.3119228 C37.4496798,17.3119228 36.269599,18.4559494 36.269599,19.8649524 L36.269599,35.9948845 L20.4314432,35.9948845 C18.9790359,35.9948845 17.8119228,37.134705 17.8119228,38.5437082 L17.8119228,43.304877 C17.8119228,44.7138802 18.9833585,45.8537007 20.4314432,45.8537007 L36.269599,45.8537007 L36.269599,62.1434594 C36.269599,63.5482566 37.4496799,64.6880772 38.8804739,64.6880772 L44.1151917,64.6880772 C45.5589537,64.6880772 46.7260666,63.5482567 46.7260666,62.1434594 L46.7260666,45.8537007 L62.5728671,45.8537007 C64.0166291,45.8537007 65.1880649,44.7138802 65.1880649,43.304877 L65.1880649,38.5437082 C65.1924655,37.1305811 64.0166935,35.9948845 62.5728671,35.9948845 L62.5728671,35.9948845 L62.5728671,35.9948845" id="Shape" fill="rgb(254,254,254)" transform="translate(41.5, 41) rotate(-45) translate(-41.5, -41)"></path>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/data/images/seek-and-volume-knob-pressed.svg b/data/images/seek-and-volume-knob-pressed.svg
new file mode 100644
index 000000000..5d8a90876
--- /dev/null
+++ b/data/images/seek-and-volume-knob-pressed.svg
@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="42px" height="42px" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
+    <title>seek-and-volume-knob-pressed</title>
+    <description>Created with Sketch (http://www.bohemiancoding.com/sketch)</description>
+    <defs>
+        <linearGradient x1="50%" y1="-61.8847656%" x2="50%" y2="100%" id="linearGradient-1">
+            <stop stop-color="rgb(255,255,255)" offset="0%"></stop>
+            <stop stop-color="rgb(0,0,0)" offset="100%"></stop>
+        </linearGradient>
+    </defs>
+    <g id="Page 1" fill="rgb(223,223,223)" fill-rule="evenodd">
+        <path d="M21,41 C32.0456955,41 41,32.0456955 41,21 C41,9.95430446 32.0456955,1 21,1 C9.95430446,1 1,9.95430446 1,21 C1,32.0456955 9.95430446,41 21,41 Z M21,41" id="Oval 1" stroke="rgb(167,167,167)" stroke-width="1" fill="url(#linearGradient-1)"></path>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/data/images/seek-and-volume-knob-rest.svg b/data/images/seek-and-volume-knob-rest.svg
new file mode 100644
index 000000000..1ffb5cc2f
--- /dev/null
+++ b/data/images/seek-and-volume-knob-rest.svg
@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="42px" height="42px" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
+    <title>seek-and-volume-knob-rest</title>
+    <description>Created with Sketch (http://www.bohemiancoding.com/sketch)</description>
+    <defs>
+        <linearGradient x1="50%" y1="-61.8847656%" x2="50%" y2="193.261719%" id="linearGradient-1">
+            <stop stop-color="rgb(254,255,255)" offset="0%"></stop>
+            <stop stop-color="rgb(0,0,0)" offset="100%"></stop>
+        </linearGradient>
+    </defs>
+    <g id="Page 1" fill="rgb(223,223,223)" fill-rule="evenodd">
+        <path d="M21,41 C32.0456955,41 41,32.0456955 41,21 C41,9.95430446 32.0456955,1 21,1 C9.95430446,1 1,9.95430446 1,21 C1,32.0456955 9.95430446,41 21,41 Z M21,41" id="Oval 1" stroke="rgb(167,167,167)" stroke-width="1" fill="url(#linearGradient-1)"></path>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/data/images/shuffle-off-pressed.svg b/data/images/shuffle-off-pressed.svg
new file mode 100644
index 000000000..5ea2288a9
--- /dev/null
+++ b/data/images/shuffle-off-pressed.svg
@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="60px" height="60px" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
+    <title>shuffle-off-pressed</title>
+    <description>Created with Sketch (http://www.bohemiancoding.com/sketch)</description>
+    <defs></defs>
+    <g id="Page 1" fill="rgb(223,223,223)" fill-rule="evenodd">
+        <g id="Group" fill="rgb(0,0,0)">
+            <path d="M9.77301025,22.2530518 L18.6990099,22.2530518 C18.7240099,22.2530518 20.0540099,22.2830518 21.2910099,23.5430517 C21.9390099,21.8940517 22.7850099,20.4870517 23.7580099,19.3010516 C21.9980099,17.9400517 20.0720098,17.4490516 18.6990099,17.4490516 L9.77301025,17.4490516 C8.44701028,17.4490516 7.3710103,18.5230516 7.3710103,19.8510516 C7.37097168,21.1779785 8.44702148,22.2530518 9.77301025,22.2530518 C9.77301025,22.2530518 8.44702148,22.2530518 9.77301025,22.2530518 L9.77301025,22.2530518" id="Shape" fill="rgb(79,79,79)"></path>
+            <path d="M34.4860229,22.2530518 L40.7650228,22.2530518 L40.7650228,26.7340517 C40.7650228,27.1210517 40.9830227,27.4750517 41.3270227,27.6510517 C41.4740227,27.7260517 41.6350227,27.7630517 41.7940227,27.7630517 C42.0080227,27.7630517 42.2200227,27.6970517 42.3990228,27.5660517 L51.8750226,20.6830518 C52.1420226,20.4900518 52.3000226,20.1810518 52.3000226,19.8510518 C52.3000226,19.5210517 52.1420226,19.2110518 51.8750226,19.0180518 L42.3990228,12.1350519 C42.0870228,11.9070519 41.6700228,11.8740519 41.3270227,12.0500519 C40.9820227,12.2260519 40.7650228,12.5810519 40.7650228,12.9680519 L40.7650228,17.4480519 L34.4840226,17.4480519 C32.0310225,17.4490519 28.0760226,18.6740518 25.5990224,22.558052 C25.5680224,22.608052 25.5370224,22.657052 25.5070224,22.707052 C25.1980224,23.205052 24.9150224,23.745052 24.6630224,24.332052 C24.6490224,24.363052 24.6370224,24.394052 24.6240224,24.425052 C23.9210224,26.085052 23.4560224,28.1010522 23.3660224,30.5470522 C23.1040224,37.662052 19.1100223,38.0240525 18.6980222,38.0390524 L9.77202253,38.0390524 C8.44602255,38.0390524 7.37002258,39.1150523 7.37002258,40.4420525 C7.37002258,41.7690526 8.44602255,42.8440524 9.77202253,42.8440524 L18.6980222,42.8440524 C20.9870222,42.8440524 24.8210223,41.4770524 26.8430226,36.9660526 C26.8550226,36.9380526 26.8680226,36.9090526 26.8800226,36.8810526 C27.1070226,36.3670526 27.3080226,35.8140526 27.4830226,35.2160527 C27.4980226,35.1620527 27.5130226,35.1080527 27.5290226,35.0530527 C27.5990226,34.7990527 27.6650226,34.5380527 27.7260226,34.2700527 C27.7380226,34.2160527 27.7510226,34.1640527 27.7630226,34.1090527 C27.8290226,33.7970527 27.8890226,33.4750527 27.9410226,33.1420527 C27.9500226,33.0810527 27.9590226,33.0170527 27.9660226,32.9550527 C28.0070226,32.6800527 28.0410226,32.3950527 28.0700226,32.1050526 C28.0790226,32.0100526 28.0890226,31.9160526 28.0970226,31.8190526 C28.1280226,31.4630526 28.1550226,31.0990526 28.1680226,30.7210526 C28.1760226,30.5230526 28.1880226,30.3320526 28.2010226,30.1430526 L28.2010226,30.1430526 C28.7319946,22.618042 33.9110107,22.2679443 34.4860229,22.2530518 C34.4860229,22.2530518 33.9110107,22.2679443 34.4860229,22.2530518 L34.4860229,22.2530518" id="Shape" fill="rgb(79,79,79)"></path>
+            <path d="M51.8759766,39.6109619 L42.3999767,32.727962 C42.0879767,32.499962 41.6709768,32.467962 41.3279767,32.643962 C40.9829767,32.818962 40.7659767,33.172962 40.7659767,33.561962 L40.7659767,38.0409621 L34.4889768,38.0409621 C34.3479768,38.0409621 32.3989769,38.0049621 30.6999767,36.4059621 C30.1629767,38.1379621 29.4189767,39.6089622 28.5399767,40.8469621 C30.6059766,42.3149621 32.8719764,42.8449621 34.4869767,42.845962 L40.7659765,42.845962 L40.7659765,47.3259621 C40.7659765,47.7139621 40.9839765,48.0669621 41.3279765,48.2429621 C41.4749765,48.3179621 41.6359765,48.3549621 41.7949765,48.3549621 C42.0089765,48.3549621 42.2209765,48.2899621 42.3999765,48.1589621 L51.8759763,41.2759622 C52.1429763,41.0829622 52.3009763,40.7719622 52.3009763,40.4429622 C52.3009763,40.1139622 52.1430054,39.8050537 51.8759766,39.6109619 C51.8759766,39.6109619 52.1430054,39.8050537 51.8759766,39.6109619 L51.8759766,39.6109619" id="Shape" fill="rgb(76,76,76)"></path>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/data/images/shuffle-off-rest.svg b/data/images/shuffle-off-rest.svg
new file mode 100644
index 000000000..76713def5
--- /dev/null
+++ b/data/images/shuffle-off-rest.svg
@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="60px" height="60px" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
+    <title>shuffle-off-rest</title>
+    <description>Created with Sketch (http://www.bohemiancoding.com/sketch)</description>
+    <defs></defs>
+    <g id="Page 1" fill="rgb(223,223,223)" fill-rule="evenodd">
+        <g id="Group" fill="rgb(0,0,0)">
+            <path d="M9.77301025,22.2530518 L18.6990099,22.2530518 C18.7240099,22.2530518 20.0540099,22.2830518 21.2910099,23.5430517 C21.9390099,21.8940517 22.7850099,20.4870517 23.7580099,19.3010516 C21.9980099,17.9400517 20.0720098,17.4490516 18.6990099,17.4490516 L9.77301025,17.4490516 C8.44701028,17.4490516 7.3710103,18.5230516 7.3710103,19.8510516 C7.37097168,21.1779785 8.44702148,22.2530518 9.77301025,22.2530518 C9.77301025,22.2530518 8.44702148,22.2530518 9.77301025,22.2530518 L9.77301025,22.2530518" id="Shape" fill="rgb(95,95,95)"></path>
+            <path d="M34.4860229,22.2530518 L40.7650228,22.2530518 L40.7650228,26.7340517 C40.7650228,27.1210517 40.9830227,27.4750517 41.3270227,27.6510517 C41.4740227,27.7260517 41.6350227,27.7630517 41.7940227,27.7630517 C42.0080227,27.7630517 42.2200227,27.6970517 42.3990228,27.5660517 L51.8750226,20.6830518 C52.1420226,20.4900518 52.3000226,20.1810518 52.3000226,19.8510518 C52.3000226,19.5210517 52.1420226,19.2110518 51.8750226,19.0180518 L42.3990228,12.1350519 C42.0870228,11.9070519 41.6700228,11.8740519 41.3270227,12.0500519 C40.9820227,12.2260519 40.7650228,12.5810519 40.7650228,12.9680519 L40.7650228,17.4480519 L34.4840226,17.4480519 C32.0310225,17.4490519 28.0760226,18.6740518 25.5990224,22.558052 C25.5680224,22.608052 25.5370224,22.657052 25.5070224,22.707052 C25.1980224,23.205052 24.9150224,23.745052 24.6630224,24.332052 C24.6490224,24.363052 24.6370224,24.394052 24.6240224,24.425052 C23.9210224,26.085052 23.4560224,28.1010522 23.3660224,30.5470522 C23.1040224,37.662052 19.1100223,38.0240525 18.6980222,38.0390524 L9.77202253,38.0390524 C8.44602255,38.0390524 7.37002258,39.1150523 7.37002258,40.4420525 C7.37002258,41.7690526 8.44602255,42.8440524 9.77202253,42.8440524 L18.6980222,42.8440524 C20.9870222,42.8440524 24.8210223,41.4770524 26.8430226,36.9660526 C26.8550226,36.9380526 26.8680226,36.9090526 26.8800226,36.8810526 C27.1070226,36.3670526 27.3080226,35.8140526 27.4830226,35.2160527 C27.4980226,35.1620527 27.5130226,35.1080527 27.5290226,35.0530527 C27.5990226,34.7990527 27.6650226,34.5380527 27.7260226,34.2700527 C27.7380226,34.2160527 27.7510226,34.1640527 27.7630226,34.1090527 C27.8290226,33.7970527 27.8890226,33.4750527 27.9410226,33.1420527 C27.9500226,33.0810527 27.9590226,33.0170527 27.9660226,32.9550527 C28.0070226,32.6800527 28.0410226,32.3950527 28.0700226,32.1050526 C28.0790226,32.0100526 28.0890226,31.9160526 28.0970226,31.8190526 C28.1280226,31.4630526 28.1550226,31.0990526 28.1680226,30.7210526 C28.1760226,30.5230526 28.1880226,30.3320526 28.2010226,30.1430526 L28.2010226,30.1430526 C28.7319946,22.618042 33.9110107,22.2679443 34.4860229,22.2530518 C34.4860229,22.2530518 33.9110107,22.2679443 34.4860229,22.2530518 L34.4860229,22.2530518" id="Shape" fill="rgb(96,96,96)"></path>
+            <path d="M51.8759766,39.6109619 L42.3999767,32.727962 C42.0879767,32.499962 41.6709768,32.467962 41.3279767,32.643962 C40.9829767,32.818962 40.7659767,33.172962 40.7659767,33.561962 L40.7659767,38.0409621 L34.4889768,38.0409621 C34.3479768,38.0409621 32.3989769,38.0049621 30.6999767,36.4059621 C30.1629767,38.1379621 29.4189767,39.6089622 28.5399767,40.8469621 C30.6059766,42.3149621 32.8719764,42.8449621 34.4869767,42.845962 L40.7659765,42.845962 L40.7659765,47.3259621 C40.7659765,47.7139621 40.9839765,48.0669621 41.3279765,48.2429621 C41.4749765,48.3179621 41.6359765,48.3549621 41.7949765,48.3549621 C42.0089765,48.3549621 42.2209765,48.2899621 42.3999765,48.1589621 L51.8759763,41.2759622 C52.1429763,41.0829622 52.3009763,40.7719622 52.3009763,40.4429622 C52.3009763,40.1139622 52.1430054,39.8050537 51.8759766,39.6109619 C51.8759766,39.6109619 52.1430054,39.8050537 51.8759766,39.6109619 L51.8759766,39.6109619" id="Shape" fill="rgb(95,95,95)"></path>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/data/images/shuffle-on-pressed.svg b/data/images/shuffle-on-pressed.svg
new file mode 100644
index 000000000..bbf0b356a
--- /dev/null
+++ b/data/images/shuffle-on-pressed.svg
@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="60px" height="60px" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
+    <title>shuffle-on-pressed</title>
+    <description>Created with Sketch (http://www.bohemiancoding.com/sketch)</description>
+    <defs></defs>
+    <g id="Page 1" fill="rgb(223,223,223)" fill-rule="evenodd">
+        <g id="Group" fill="rgb(0,0,0)">
+            <path d="M9.77301025,22.2530518 L18.6990099,22.2530518 C18.7240099,22.2530518 20.0540099,22.2830518 21.2910099,23.5430517 C21.9390099,21.8940517 22.7850099,20.4870517 23.7580099,19.3010516 C21.9980099,17.9400517 20.0720098,17.4490516 18.6990099,17.4490516 L9.77301025,17.4490516 C8.44701028,17.4490516 7.3710103,18.5230516 7.3710103,19.8510516 C7.37097168,21.1779785 8.44702148,22.2530518 9.77301025,22.2530518 C9.77301025,22.2530518 8.44702148,22.2530518 9.77301025,22.2530518 L9.77301025,22.2530518" id="Shape" fill="rgb(107,131,17)"></path>
+            <path d="M34.4860229,22.2530518 L40.7650228,22.2530518 L40.7650228,26.7340517 C40.7650228,27.1210517 40.9830227,27.4750517 41.3270227,27.6510517 C41.4740227,27.7260517 41.6350227,27.7630517 41.7940227,27.7630517 C42.0080227,27.7630517 42.2200227,27.6970517 42.3990228,27.5660517 L51.8750226,20.6830518 C52.1420226,20.4900518 52.3000226,20.1810518 52.3000226,19.8510518 C52.3000226,19.5210517 52.1420226,19.2110518 51.8750226,19.0180518 L42.3990228,12.1350519 C42.0870228,11.9070519 41.6700228,11.8740519 41.3270227,12.0500519 C40.9820227,12.2260519 40.7650228,12.5810519 40.7650228,12.9680519 L40.7650228,17.4480519 L34.4840226,17.4480519 C32.0310225,17.4490519 28.0760226,18.6740518 25.5990224,22.558052 C25.5680224,22.608052 25.5370224,22.657052 25.5070224,22.707052 C25.1980224,23.205052 24.9150224,23.745052 24.6630224,24.332052 C24.6490224,24.363052 24.6370224,24.394052 24.6240224,24.425052 C23.9210224,26.085052 23.4560224,28.1010522 23.3660224,30.5470522 C23.1040224,37.662052 19.1100223,38.0240525 18.6980222,38.0390524 L9.77202253,38.0390524 C8.44602255,38.0390524 7.37002258,39.1150523 7.37002258,40.4420525 C7.37002258,41.7690526 8.44602255,42.8440524 9.77202253,42.8440524 L18.6980222,42.8440524 C20.9870222,42.8440524 24.8210223,41.4770524 26.8430226,36.9660526 C26.8550226,36.9380526 26.8680226,36.9090526 26.8800226,36.8810526 C27.1070226,36.3670526 27.3080226,35.8140526 27.4830226,35.2160527 C27.4980226,35.1620527 27.5130226,35.1080527 27.5290226,35.0530527 C27.5990226,34.7990527 27.6650226,34.5380527 27.7260226,34.2700527 C27.7380226,34.2160527 27.7510226,34.1640527 27.7630226,34.1090527 C27.8290226,33.7970527 27.8890226,33.4750527 27.9410226,33.1420527 C27.9500226,33.0810527 27.9590226,33.0170527 27.9660226,32.9550527 C28.0070226,32.6800527 28.0410226,32.3950527 28.0700226,32.1050526 C28.0790226,32.0100526 28.0890226,31.9160526 28.0970226,31.8190526 C28.1280226,31.4630526 28.1550226,31.0990526 28.1680226,30.7210526 C28.1760226,30.5230526 28.1880226,30.3320526 28.2010226,30.1430526 L28.2010226,30.1430526 C28.7319946,22.618042 33.9110107,22.2679443 34.4860229,22.2530518 C34.4860229,22.2530518 33.9110107,22.2679443 34.4860229,22.2530518 L34.4860229,22.2530518" id="Shape" fill="rgb(107,131,17)"></path>
+            <path d="M51.8759766,39.6109619 L42.3999767,32.727962 C42.0879767,32.499962 41.6709768,32.467962 41.3279767,32.643962 C40.9829767,32.818962 40.7659767,33.172962 40.7659767,33.561962 L40.7659767,38.0409621 L34.4889768,38.0409621 C34.3479768,38.0409621 32.3989769,38.0049621 30.6999767,36.4059621 C30.1629767,38.1379621 29.4189767,39.6089622 28.5399767,40.8469621 C30.6059766,42.3149621 32.8719764,42.8449621 34.4869767,42.845962 L40.7659765,42.845962 L40.7659765,47.3259621 C40.7659765,47.7139621 40.9839765,48.0669621 41.3279765,48.2429621 C41.4749765,48.3179621 41.6359765,48.3549621 41.7949765,48.3549621 C42.0089765,48.3549621 42.2209765,48.2899621 42.3999765,48.1589621 L51.8759763,41.2759622 C52.1429763,41.0829622 52.3009763,40.7719622 52.3009763,40.4429622 C52.3009763,40.1139622 52.1430054,39.8050537 51.8759766,39.6109619 C51.8759766,39.6109619 52.1430054,39.8050537 51.8759766,39.6109619 L51.8759766,39.6109619" id="Shape" fill="rgb(107,131,17)"></path>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/data/images/shuffle-on-rest.svg b/data/images/shuffle-on-rest.svg
new file mode 100644
index 000000000..f1bf338d9
--- /dev/null
+++ b/data/images/shuffle-on-rest.svg
@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="60px" height="60px" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
+    <title>shuffle-on-rest</title>
+    <description>Created with Sketch (http://www.bohemiancoding.com/sketch)</description>
+    <defs></defs>
+    <g id="Page 1" fill="rgb(223,223,223)" fill-rule="evenodd">
+        <g id="Group" fill="rgb(0,0,0)">
+            <path d="M9.77301025,22.2530518 L18.6990099,22.2530518 C18.7240099,22.2530518 20.0540099,22.2830518 21.2910099,23.5430517 C21.9390099,21.8940517 22.7850099,20.4870517 23.7580099,19.3010516 C21.9980099,17.9400517 20.0720098,17.4490516 18.6990099,17.4490516 L9.77301025,17.4490516 C8.44701028,17.4490516 7.3710103,18.5230516 7.3710103,19.8510516 C7.37101015,21.1779785 8.44702148,22.2530518 9.77301025,22.2530518 C9.77301025,22.2530518 8.44702148,22.2530518 9.77301025,22.2530518 L9.77301025,22.2530518" id="Shape" fill="rgb(120,144,26)"></path>
+            <path d="M34.4860229,22.2530518 L40.7650228,22.2530518 L40.7650228,26.7340517 C40.7650228,27.1210517 40.9830227,27.4750517 41.3270227,27.6510517 C41.4740227,27.7260517 41.6350227,27.7630517 41.7940227,27.7630517 C42.0080227,27.7630517 42.2200227,27.6970517 42.3990228,27.5660517 L51.8750226,20.6830518 C52.1420226,20.4900518 52.3000226,20.1810518 52.3000226,19.8510518 C52.3000226,19.5210517 52.1420226,19.2110518 51.8750226,19.0180518 L42.3990228,12.1350519 C42.0870228,11.9070519 41.6700228,11.8740519 41.3270227,12.0500519 C40.9820227,12.2260519 40.7650228,12.5810519 40.7650228,12.9680519 L40.7650228,17.4480519 L34.4840226,17.4480519 C32.0310225,17.4490519 28.0760226,18.6740518 25.5990224,22.558052 C25.5680224,22.608052 25.5370224,22.657052 25.5070224,22.707052 C25.1980224,23.205052 24.9150224,23.745052 24.6630224,24.332052 C24.6490224,24.363052 24.6370224,24.394052 24.6240224,24.425052 C23.9210224,26.085052 23.4560224,28.1010522 23.3660224,30.5470522 C23.1040224,37.662052 19.1100223,38.0240525 18.6980222,38.0390524 L9.77202253,38.0390524 C8.44602255,38.0390524 7.37002258,39.1150523 7.37002258,40.4420525 C7.37002258,41.7690526 8.44602255,42.8440524 9.77202253,42.8440524 L18.6980222,42.8440524 C20.9870222,42.8440524 24.8210223,41.4770524 26.8430226,36.9660526 C26.8550226,36.9380526 26.8680226,36.9090526 26.8800226,36.8810526 C27.1070226,36.3670526 27.3080226,35.8140526 27.4830226,35.2160527 C27.4980226,35.1620527 27.5130226,35.1080527 27.5290226,35.0530527 C27.5990226,34.7990527 27.6650226,34.5380527 27.7260226,34.2700527 C27.7380226,34.2160527 27.7510226,34.1640527 27.7630226,34.1090527 C27.8290226,33.7970527 27.8890226,33.4750527 27.9410226,33.1420527 C27.9500226,33.0810527 27.9590226,33.0170527 27.9660226,32.9550527 C28.0070226,32.6800527 28.0410226,32.3950527 28.0700226,32.1050526 C28.0790226,32.0100526 28.0890226,31.9160526 28.0970226,31.8190526 C28.1280226,31.4630526 28.1550226,31.0990526 28.1680226,30.7210526 C28.1760226,30.5230526 28.1880226,30.3320526 28.2010226,30.1430526 L28.2010226,30.1430526 C28.7319946,22.618042 33.9110107,22.2679443 34.4860229,22.2530518 C34.4860229,22.2530518 33.9110107,22.2679443 34.4860229,22.2530518 L34.4860229,22.2530518" id="Shape" fill="rgb(120,144,26)"></path>
+            <path d="M51.8759766,39.6109619 L42.3999767,32.727962 C42.0879767,32.499962 41.6709768,32.467962 41.3279767,32.643962 C40.9829767,32.818962 40.7659767,33.172962 40.7659767,33.561962 L40.7659767,38.0409621 L34.4889768,38.0409621 C34.3479768,38.0409621 32.3989769,38.0049621 30.6999767,36.4059621 C30.1629767,38.1379621 29.4189767,39.6089622 28.5399767,40.8469621 C30.6059766,42.3149621 32.8719764,42.8449621 34.4869767,42.845962 L40.7659765,42.845962 L40.7659765,47.3259621 C40.7659765,47.7139621 40.9839765,48.0669621 41.3279765,48.2429621 C41.4749765,48.3179621 41.6359765,48.3549621 41.7949765,48.3549621 C42.0089765,48.3549621 42.2209765,48.2899621 42.3999765,48.1589621 L51.8759763,41.2759622 C52.1429763,41.0829622 52.3009763,40.7719622 52.3009763,40.4429622 C52.3009763,40.1139622 52.1430054,39.8050537 51.8759766,39.6109619 C51.8759766,39.6109619 52.1430054,39.8050537 51.8759766,39.6109619 L51.8759766,39.6109619" id="Shape" fill="rgb(120,144,26)"></path>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/data/images/sipplugin-add.svg b/data/images/sipplugin-add.svg
new file mode 100644
index 000000000..0585f3a7e
--- /dev/null
+++ b/data/images/sipplugin-add.svg
@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="60px" height="60px" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
+    <title>sipplugin-add</title>
+    <description>Created with Sketch (http://www.bohemiancoding.com/sketch)</description>
+    <defs></defs>
+    <g id="Page 1" fill="rgb(223,223,223)" fill-rule="evenodd">
+        <path d="M30,60 C46.5685433,60 60,46.5685433 60,30 C60,13.4314567 46.5685433,0 30,0 C13.4314567,0 0,13.4314567 0,30 C0,46.5685433 13.4314567,60 30,60 Z M30,60" id="Oval 1" fill="rgb(94,94,94)"></path>
+        <path d="M34.1402321,26.4080257 L34.1402321,14.8322088 C34.1402321,13.8210227 33.3242652,13 32.3216195,13 L28.6753614,13 C27.6787375,13 26.8567488,13.8210228 26.8567488,14.8322088 L26.8567488,26.4080257 L15.8246346,26.4080257 C14.812956,26.4080257 14,27.22603 14,28.2372161 L14,31.6541194 C14,32.6653056 14.8159669,33.4833098 15.8246346,33.4833098 L26.8567488,33.4833098 L26.8567488,45.1738281 C26.8567488,46.1819957 27.6787376,47 28.6753614,47 L32.3216195,47 C33.3272762,47 34.1402321,46.1819957 34.1402321,45.1738281 L34.1402321,33.4833098 L45.1783677,33.4833098 C46.1840244,33.4833098 46.9999914,32.6653056 46.9999914,31.6541194 L46.9999914,28.2372161 C47.0030567,27.2230705 46.1840693,26.4080257 45.1783677,26.4080257 L34.1402321,26.4080257 Z M34.1402321,26.4080257" id="Shape" fill="rgb(254,254,254)"></path>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/data/images/sipplugin-remove.svg b/data/images/sipplugin-remove.svg
new file mode 100644
index 000000000..d994888c7
--- /dev/null
+++ b/data/images/sipplugin-remove.svg
@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="60px" height="60px" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
+    <title>sipplugin-remove</title>
+    <description>Created with Sketch (http://www.bohemiancoding.com/sketch)</description>
+    <defs></defs>
+    <g id="Page 1" fill="rgb(223,223,223)" fill-rule="evenodd">
+        <path d="M30,60 C46.5685433,60 60,46.5685433 60,30 C60,13.4314567 46.5685433,0 30,0 C13.4314567,0 0,13.4314567 0,30 C0,46.5685433 13.4314567,60 30,60 Z M30,60" id="Oval 1" fill="rgb(94,94,94)"></path>
+        <path d="M42.0705004,27.0965 L17.9294996,27.0965 C17.1014996,27.0965 16.4294996,27.7685 16.4294996,28.5965 L16.4294996,31.4035 C16.4294996,32.2315 17.1014996,32.9035 17.9294996,32.9035 L42.0705004,32.9035 C42.8985004,32.9035 43.5705004,32.2315 43.5705004,31.4035 L43.5705004,28.5965 C43.5705004,27.7684971 42.8985033,27.0965 42.0705004,27.0965 L42.0705004,27.0965 L42.0705004,27.0965" id="Shape" fill="rgb(255,255,255)"></path>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/data/images/station.svg b/data/images/station.svg
new file mode 100644
index 000000000..64e2ea6ce
--- /dev/null
+++ b/data/images/station.svg
@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="65px" height="65px" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
+    <title>station</title>
+    <description>Created with Sketch (http://www.bohemiancoding.com/sketch)</description>
+    <defs></defs>
+    <g id="Page 1" fill="rgb(223,223,223)" fill-rule="evenodd">
+        <path d="M61.821934,23.8658403 L34.7205264,23.8658403 L43.7497617,6.06399576 C45.0702623,5.97554713 46.1191884,4.88551118 46.1191884,3.54134096 C46.1191884,2.13737466 44.9818137,1 43.5790931,1 C42.1763724,1 41.0377521,2.13737466 41.0377521,3.54134096 C41.0377521,4.04213465 41.19098,4.50680137 41.4413769,4.90170587 L31.8228992,23.8658398 L30.9421501,23.8658398 L22.5694278,9.42255184 C22.9132563,8.98653746 23.1275263,8.44463382 23.1275263,7.84791695 C23.1275263,6.44395065 21.9913974,5.30657599 20.587431,5.30657599 C19.1847103,5.30657599 18.0498273,6.44395065 18.0498273,7.84791695 C18.0498273,9.08619784 18.9392966,10.1164375 20.1140439,10.3394277 L27.9560743,23.8658396 L4.26056096,23.8658396 C3.07086457,23.8658396 2.10540409,24.8300543 2.10540409,26.018505 L2.10540409,60.8473346 C2.10540409,62.037031 3.0708645,63 4.26056096,63 L61.8219364,63 C63.0128786,63 63.9758475,62.0370311 63.9758475,60.8473346 L63.9758475,26.018505 C63.9758475,24.8300543 63.0128786,23.8658396 61.8219364,23.8658396" id="Path" fill="rgb(168,182,207)"></path>
+        <path d="M14.4493761,42.4725 C15.0156261,42.47 15.4718761,42.01125 15.4718761,41.4462501 C15.4718761,40.8787501 15.0156261,40.41875 14.4468761,40.4175 C13.8818761,40.4175 13.4231261,40.87875 13.4231261,41.4462501 C13.4231261,42.01125 13.8818761,42.4700001 14.4493761,42.4725 M14.4493761,47.0437501 C15.0156261,47.0437501 15.4718761,46.5850001 15.4718761,46.0212501 C15.4718761,45.4550001 15.0156261,44.9937501 14.4468761,44.9937501 C13.8818761,44.9937501 13.4231261,45.455 13.4231261,46.0212501 C13.4231261,46.5850001 13.8818761,47.0437501 14.4493761,47.0437501 M16.7356261,40.1837502 C17.300626,40.1837502 17.760626,39.7250002 17.760626,39.1600002 C17.760626,38.5937502 17.300626,38.1337502 16.7356261,38.1337502 C16.1706261,38.1337502 15.711876,38.5937502 15.711876,39.1600002 C15.711876,39.7250002 16.1706261,40.1837502 16.7356261,40.1837502 M16.7356261,44.7575001 C17.300626,44.7575001 17.760626,44.2975001 17.760626,43.7337501 C17.760626,43.1662501 17.300626,42.7075001 16.7356261,42.7075001 C16.1706261,42.7075001 15.711876,43.1662501 15.711876,43.7337501 C15.711876,44.2987501 16.1706261,44.7575001 16.7356261,44.7575001 M16.7356261,49.33125 C17.300626,49.33125 17.760626,48.8725 17.760626,48.305 C17.760626,47.74 17.300626,47.28125 16.7356261,47.28 C16.1706261,47.28 15.711876,47.74 15.711876,48.305 C15.711876,48.8725 16.1706261,49.33125 16.7356261,49.33125 M19.020626,42.4462501 C19.590626,42.4462501 20.046876,41.9887501 20.046876,41.4225001 C20.046876,40.8550001 19.590626,40.3975001 19.020626,40.3975001 C18.455626,40.3975001 17.998126,40.8550001 17.998126,41.4225001 C17.998126,41.9887501 18.455626,42.4462501 19.020626,42.4462501 M20.046876,46.02125 C20.046876,45.455 19.590626,44.99375 19.020626,44.99375 C18.455626,44.99375 17.998126,45.455 17.998126,46.02125 C17.998126,46.585 18.455626,47.04375 19.020626,47.04375 C19.590626,47.04375 20.046876,46.585 20.046876,46.02125 M19.0206261,51.6412501 C19.590626,51.6400002 20.0468763,51.1824999 20.0468763,50.6162499 C20.0468763,50.0487499 19.5881261,49.5899997 19.0206261,49.5899997 C18.4556262,49.5899997 17.9981261,50.0487498 17.9981261,50.6149997 C17.9981261,51.1824997 18.4556261,51.6399997 19.0206261,51.6412497 M21.3106262,40.1837492 C21.8756262,40.1837492 22.3343762,39.7249992 22.3343762,39.1599992 C22.3343762,38.5937492 21.8756262,38.1337493 21.3081262,38.1337493 C20.7431262,38.1337493 20.2831262,38.5937493 20.2831262,39.1599992 C20.2831262,39.7249992 20.7431262,40.1837492 21.3106262,40.1837492 M21.3106262,44.7574991 C21.8756262,44.7574991 22.3343762,44.2974991 22.3343762,43.7337491 C22.3343762,43.1662491 21.8756262,42.7074992 21.3081263,42.7074992 C20.7431263,42.7074992 20.2831263,43.1662492 20.2831263,43.7337491 C20.2831263,44.2987491 20.7431263,44.7574991 21.3106263,44.7574991 M21.3106263,49.331249 C21.8756263,49.331249 22.3343763,48.872499 22.3343763,48.3049991 C22.3343763,47.7399991 21.8756263,47.2812491 21.3081263,47.2799991 C20.7431264,47.2799991 20.2831264,47.7399991 20.2831264,48.3049991 C20.2831264,48.8724991 20.7431264,49.331249 21.3106264,49.331249 M23.6193764,37.8499985 C24.1856264,37.8499985 24.6431264,37.3924985 24.6431264,36.8262485 C24.6431264,36.2587485 24.1856264,35.7999985 23.6193764,35.7999985 C23.0531264,35.7999985 22.5931264,36.2587486 22.5931264,36.8262485 C22.5931264,37.3924985 23.0531264,37.8499985 23.6193764,37.8499985 M23.6193764,42.4462486 C24.1856264,42.4462486 24.6431264,41.9887486 24.6431264,41.4224986 C24.6431264,40.8549986 24.1856264,40.3974986 23.6193764,40.3974986 C23.0531264,40.3974986 22.5931264,40.8549986 22.5931264,41.4224986 C22.5931264,41.9887486 23.0531264,42.4462486 23.6193764,42.4462486 M23.6193764,47.0449985 C24.1856261,47.0437501 24.6431257,46.585 24.6431257,46.02125 C24.6431257,45.4549999 24.1856261,44.99375 23.619376,44.99375 C23.053126,44.99375 22.593126,45.455 22.593126,46.02125 C22.593126,46.585 23.053126,47.04375 23.619376,47.045 M23.619376,51.6400002 C24.185626,51.6400002 24.643126,51.1825002 24.643126,50.6150002 C24.643126,50.0487502 24.185626,49.5900002 23.619376,49.5900002 C23.053126,49.5900002 22.593126,50.0487502 22.593126,50.6150002 C22.593126,51.1825002 23.053126,51.6400002 23.619376,51.6400002 M25.8818759,44.7575001 C26.4518759,44.7575001 26.909376,44.2975001 26.909376,43.7337501 C26.909376,43.1662501 26.451876,42.7075001 25.8818759,42.7075001 C25.316876,42.7075001 24.8581259,43.1662501 24.8581259,43.7337501 C24.8581259,44.2987501 25.316876,44.7575001 25.8818759,44.7575001 M25.8818759,49.33125 C26.4518759,49.33125 26.909376,48.8725 26.909376,48.305 C26.909376,47.74 26.451876,47.28125 25.8818759,47.28 C25.316876,47.28 24.8581259,47.74 24.8581259,48.305 C24.8581259,48.8725 25.316876,49.33125 25.8818759,49.33125 M25.9056259,38.1112502 C25.338126,38.1112502 24.8818759,38.5687502 24.879376,39.1362502 C24.879376,39.7025002 25.338126,40.1612502 25.9056259,40.1612502 C26.471876,40.1612502 26.929376,39.7025002 26.929376,39.1362502 C26.929376,38.5687502 26.4706259,38.1112502 25.9056259,38.1112502 M28.1693759,47.0437501 C28.7381259,47.0437501 29.196876,46.5850001 29.196876,46.0212501 C29.196876,45.4550001 28.7381259,44.9937501 28.1693759,44.9937501 C27.6043759,44.9937501 27.1443759,45.455 27.1443759,46.0212501 C27.1443759,46.5850001 27.6043759,47.0437501 28.1693759,47.0437501 M28.1918759,40.3975002 C27.6281259,40.3975002 27.1681259,40.8550002 27.1681259,41.4225002 C27.1681259,41.9887502 27.6281259,42.4462502 28.1918759,42.4462502 C28.7606259,42.4462502 29.2168759,41.9887502 29.2168759,41.4225002 C29.2168759,40.8550002 28.7581259,40.3975002 28.1918759,40.3975002 M19.0206261,35.845 C18.4556262,35.845 17.9981261,36.30375 17.9981261,36.8725 C17.9981261,37.43875 18.4556261,37.8975 19.0206261,37.8975 C19.5906261,37.8975 20.0468761,37.43875 20.0468761,36.8725 C20.0468761,36.3025 19.5906261,35.845 19.0206261,35.845 M33.0406258,43.7337501 C33.0406258,44.3843893 32.9876847,45.0226659 32.885873,45.644503 C31.9736976,51.2158133 27.1386109,55.4675002 21.3081262,55.4675002 C14.8281262,55.4675002 9.57437609,50.2137501 9.57437609,43.7337501 C9.57437609,37.2525002 14.8281262,32 21.3081262,32 C27.7893761,32 33.0406258,37.2525002 33.0406258,43.7337501 Z M33.0406258,43.7337501" id="path2520" fill="rgb(255,255,255)"></path>
+        <g id="g2512" fill="rgb(255,255,255)">
+            <path d="M47.5,41.2337501 C48.35875,42.0925001 49.5,42.5637501 50.715,42.5637501 C51.9287501,42.5637501 53.07125,42.0925001 53.9300001,41.2325 C54.78625,40.3737501 55.2625,39.2312501 55.2625,38.0175002 C55.2625,36.8025 54.7887498,35.66 53.9300001,34.8012502 C53.0712497,33.9424999 51.92875,33.4700001 50.715,33.4700001 C49.5,33.4700001 48.35875,33.9424999 47.5,34.8012502 C45.7275,36.5750001 45.7275,39.4600001 47.5,41.2337501 M50.715,32.6075001 C52.1600001,32.6075001 53.5187501,33.1700001 54.5412502,34.19125 C55.5650002,35.2125 56.1262502,36.5725 56.1262502,38.0175002 C56.1262502,39.4625002 55.5625002,40.8212502 54.5412502,41.8437503 C53.5187501,42.8662503 52.1600002,43.4287503 50.715,43.4287503 C49.2687501,43.4287503 47.91125,42.8662503 46.8900001,41.8437503 C44.7800002,39.7337503 44.7800002,36.3012503 46.8900001,34.19125 C47.9112501,33.1700001 49.2687501,32.6075001 50.715,32.6075001" id="path2514"></path>
+        </g>
+        <g id="g2508" fill="rgb(255,255,255)">
+            <path d="M51.875,36.2337501 C52.475,36.8337501 52.65,37.6925002 52.415,38.4500001 L53.4387501,40.3425 C53.53,40.5100001 53.50125,40.7200001 53.365,40.8550001 C53.2287499,40.98875 53.02125,41.0175 52.8525,40.9275002 L50.96625,39.9012501 C50.20625,40.1375 49.34625,39.965 48.7437499,39.3625001 C47.8812501,38.4987502 47.8812501,37.0962501 48.7437499,36.2337501 C49.60875,35.3700001 51.01125,35.3687501 51.875,36.2337501" id="path2510"></path>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/data/images/subscribe-off.svg b/data/images/subscribe-off.svg
new file mode 100644
index 000000000..61a3dffe7
--- /dev/null
+++ b/data/images/subscribe-off.svg
@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="70px" height="70px" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
+    <title>subscribe-off</title>
+    <description>Created with Sketch (http://www.bohemiancoding.com/sketch)</description>
+    <defs></defs>
+    <g id="Page 1" fill="rgb(223,223,223)" fill-rule="evenodd">
+        <g id="g868" fill="rgb(0,0,0)">
+            <path d="M46.85,19.2219983 C46.85,34.4357978 34.5369999,46.8173989 19.4030006,46.8173989 L19.4030006,53.3637991 C38.1448001,53.3637971 53.3935997,38.0449979 53.3935997,19.2219983 L46.85,19.2219983 L46.85,19.2219983 L46.85,19.2219983 M35.2916006,19.2275983 C35.2916006,23.5073982 33.6368006,27.5267983 30.6310006,30.542398 C27.6308008,33.557998 23.6408006,35.221198 19.3918008,35.221198 L19.3918008,41.7647977 C31.767801,41.7647977 41.8338017,31.6525976 41.8338017,19.2275983 L35.2916019,19.2275983 L35.2916019,19.2275983 L35.2916006,19.2275983 M23.9194004,19.2569983 C21.4176005,19.2569983 19.3890003,21.2897983 19.3890003,23.7915984 C19.3890003,26.2961985 21.4176003,28.3247983 23.9194004,28.3247983 C26.4226004,28.3247983 28.4526003,26.2961983 28.4526003,23.7915984 C28.4526003,21.2897985 26.4226002,19.2569983 23.9194004,19.2569983 M34.6126004,69.2859991 C15.5712007,69.2859991 0.137600422,53.8495991 0.137600422,34.8109991 C0.137600422,15.7681988 15.5712007,0.335999146 34.6126004,0.335999146 C53.652601,0.335999146 69.0876004,15.7681988 69.0876004,34.8109991 C69.0876004,53.8495991 53.652601,69.2859991 34.6126004,69.2859991" id="path870" fill="rgb(152,152,151)"></path>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/data/images/subscribe-on.svg b/data/images/subscribe-on.svg
new file mode 100644
index 000000000..677a0c0ce
--- /dev/null
+++ b/data/images/subscribe-on.svg
@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="70px" height="70px" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
+    <title>subscribe-on</title>
+    <description>Created with Sketch (http://www.bohemiancoding.com/sketch)</description>
+    <defs></defs>
+    <g id="Page 1" fill="rgb(223,223,223)" fill-rule="evenodd">
+        <g id="g868" fill="rgb(0,0,0)">
+            <path d="M46.85,19.2219983 C46.85,34.4357978 34.5369999,46.8173989 19.4030006,46.8173989 L19.4030006,53.3637991 C38.1448001,53.3637971 53.3935997,38.0449979 53.3935997,19.2219983 L46.85,19.2219983 L46.85,19.2219983 L46.85,19.2219983 M35.2916006,19.2275983 C35.2916006,23.5073982 33.6368006,27.5267983 30.6310006,30.542398 C27.6308008,33.557998 23.6408006,35.221198 19.3918008,35.221198 L19.3918008,41.7647977 C31.767801,41.7647977 41.8338017,31.6525976 41.8338017,19.2275983 L35.2916019,19.2275983 L35.2916019,19.2275983 L35.2916006,19.2275983 M23.9194004,19.2569983 C21.4176005,19.2569983 19.3890003,21.2897983 19.3890003,23.7915984 C19.3890003,26.2961985 21.4176003,28.3247983 23.9194004,28.3247983 C26.4226004,28.3247983 28.4526003,26.2961983 28.4526003,23.7915984 C28.4526003,21.2897985 26.4226002,19.2569983 23.9194004,19.2569983 M34.6126004,69.2859991 C15.5712007,69.2859991 0.137600422,53.8495991 0.137600422,34.8109991 C0.137600422,15.7681988 15.5712007,0.335999146 34.6126004,0.335999146 C53.652601,0.335999146 69.0876004,15.7681988 69.0876004,34.8109991 C69.0876004,53.8495991 53.652601,69.2859991 34.6126004,69.2859991" id="path870" fill="rgb(238,128,51)"></path>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/data/images/supercollection.svg b/data/images/supercollection.svg
new file mode 100644
index 000000000..80dc8d1ee
--- /dev/null
+++ b/data/images/supercollection.svg
@@ -0,0 +1,34 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="62px" height="62px" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
+    <title>supercollection</title>
+    <description>Created with Sketch (http://www.bohemiancoding.com/sketch)</description>
+    <defs></defs>
+    <g id="Page 1" fill="rgb(223,223,223)" fill-rule="evenodd">
+        <g id="Group">
+            <g id="g2720" fill="rgb(0,0,0)">
+                <path d="M7.59259259,44.0737501 C5.39131948,44.0737501 3.60763874,42.3237501 3.60763874,40.1612499 C3.60763874,38.00375 5.39131933,36.25 7.59259259,36.25 C9.79131944,36.25 11.5762731,38.00375 11.5762731,40.1612499 C11.5762731,42.3237501 9.79131944,44.0737501 7.59259259,44.0737501" id="path2722" fill="rgb(168,182,207)"></path>
+            </g>
+            <g id="g2724" fill="rgb(0,0,0)">
+                <path d="M13.7037037,0.174999714 C15.9024306,0.174999714 17.6848381,1.92624974 17.6848381,4.08749986 C17.6848381,6.24749947 15.9024306,8 13.7037037,8 C11.5024306,8 9.71874985,6.24749947 9.71874985,4.08749986 C9.71874985,1.92624974 11.5024306,0.174999714 13.7037037,0.174999714" id="path2726" fill="rgb(168,182,207)"></path>
+            </g>
+            <g id="g2728" fill="rgb(0,0,0)">
+                <path d="M19.8148148,10.9330886 L18.269213,13.7618386 C17.9152778,14.4093385 17.0953705,14.6555885 16.430787,14.3055885 C15.7712961,13.9593386 15.5217593,13.1505887 15.8756943,12.5005885 L17.4251156,9.67183852 C17.6670138,9.22558853 18.1355323,8.96808849 18.6206017,8.96808849 C18.8370369,8.96808849 19.0572916,9.02058849 19.2622684,9.1280885 C19.9217593,9.47558859 20.1700232,10.2843386 19.8148148,10.9330886" id="path2730" fill="rgb(168,182,207)"></path>
+            </g>
+            <g id="g2744" fill="rgb(0,0,0)">
+                <path d="M16.7592593,38.0503815 L13.5929398,36.3316315 C12.9347222,35.9741315 12.6953704,35.1628815 13.0607639,34.5203815 C13.3077546,34.0803815 13.7711806,33.8316315 14.2486111,33.8316315 C14.4701389,33.8316315 14.6967593,33.8853815 14.9042824,33.9978815 L18.0706019,35.7191314 C18.7288195,36.0753814 18.9668981,36.8853815 18.6040509,37.5316315 C18.2412037,38.1753815 17.4136574,38.4091315 16.7592593,38.0503815" id="path2746" fill="rgb(168,182,207)"></path>
+            </g>
+            <g id="g2748" fill="rgb(0,0,0)">
+                <path d="M50.625,52.2087509 C50.4111111,52.2087509 50.1997685,52.2337509 49.9947917,52.2725009 C48.7050926,52.5137509 47.6840279,53.4850009 47.3784723,54.7287509 C47.3135416,54.9775008 47.2753472,55.233751 47.2753472,55.4987509 C47.2753472,57.313751 48.7789351,58.7912506 50.625,58.7912506 C52.4736111,58.7912506 53.9771989,57.313751 53.9771989,55.4987509 C53.9771989,53.6850009 52.4736111,52.2087509 50.625,52.2087509 M31.7734952,30.3175003 C31.5621526,29.4187503 31.0859951,28.6200002 30.4252313,28.0050003 C30.2966433,27.8850003 30.156597,27.7775003 30.0140044,27.6700002 C29.2221063,27.0850003 28.2519674,26.7262503 27.1914349,26.7262503 C26.9546294,26.7262503 26.7292821,26.7625002 26.5064812,26.7937503 C25.5032405,26.9387502 24.5993053,27.3812503 23.9041665,28.0450003 C23.254861,28.6687503 22.7863424,29.4725003 22.5864583,30.3775004 C22.5164351,30.6925004 22.4744212,31.0175004 22.4744212,31.3537504 C22.4744212,32.6437503 23.0206018,33.8112504 23.8901619,34.6512504 C24.5216434,35.2600004 25.3237268,35.6975004 26.2225694,35.8825004 C26.5344907,35.9462504 26.8591434,35.9812504 27.1914351,35.9812504 C27.7847221,35.9812504 28.3487267,35.8612504 28.8719907,35.6637504 C30.0445602,35.2212504 30.9917823,34.3387505 31.5010417,33.2162505 C31.7582176,32.6462505 31.9046297,32.0175005 31.9046297,31.3537505 C31.9046297,30.9962505 31.8537037,30.6525005 31.7734954,30.3175005 M31.2680556,8.44125118 C31.8791667,9.0875012 32.7449074,9.50000118 33.7137732,9.50000118 C34.0868056,9.50000118 34.4407407,9.42500118 34.7768519,9.31375118 C36.1021991,8.87500116 37.0659722,7.65625121 37.0659722,6.20875122 C37.0659722,4.39375119 35.559838,2.91750135 33.7137733,2.91750135 C31.8677084,2.91750135 30.3615743,4.39375134 30.3615743,6.20875122 C30.3615743,7.07375118 30.7078706,7.8537512 31.2680558,8.44125124 M50.625,61.4550007 C47.2829861,61.4550007 44.5584492,58.7850008 44.5584492,55.4987509 C44.5584492,54.4512509 44.8385418,53.4687509 45.3236113,52.6112509 L31.4857635,38.3537508 C30.2291663,39.1012507 28.7612263,39.5362507 27.1914349,39.5362507 C22.5928238,39.5362507 18.854861,35.8662506 18.854861,31.3537507 C18.854861,26.8437507 22.5928241,23.1725006 27.1914349,23.1725006 C27.2767359,23.1725006 27.3543979,23.1812506 27.4422451,23.1837506 L30.5334488,11.2725003 C28.8057868,10.2212503 27.6446756,8.34750038 27.6446756,6.20875013 C27.6446756,2.9237501 30.3692127,0.253750205 33.713773,0.253750205 C36.6355271,0.253750205 39.0818062,2.29291001 39.6522293,4.99964754 C39.7345264,5.39015911 39.7777777,5.79456629 39.7777777,6.20875013 C39.7777777,9.38499999 37.2314814,11.9800003 34.0409721,12.1487499 L30.9484954,24.0612496 C33.6590277,25.4112497 35.5229166,28.1712497 35.5229166,31.3537498 C35.5229166,33.0374998 35.002199,34.6049998 34.1097221,35.9062497 L47.9488423,50.1624994 C48.7560183,49.7687494 49.6637729,49.5424994 50.6249997,49.5424994 C53.9721062,49.5424994 56.6940972,52.2137495 56.6940972,55.4987492 C56.6940975,58.7850008 53.9721067,61.4550007 50.625,61.4550007 Z M50.625,61.4550007" id="path2750" fill="rgb(168,182,207)"></path>
+            </g>
+            <g id="g2716" fill="rgb(168,182,207)">
+                <path d="M50.3703704,44.0725002 C48.1690973,44.0725002 46.3866899,42.3225002 46.3866899,40.16 C46.3866899,38.0025001 48.1690973,36.25 50.3703704,36.25 C52.5703704,36.25 54.3540509,38.0024999 54.3540509,40.16 C54.3540509,42.3225002 52.5703704,44.0725002 50.3703704,44.0725002" id="path2718"></path>
+            </g>
+            <g id="g2740" fill="rgb(168,182,207)">
+                <path d="M43.4953704,36.0539821 L40.3481483,37.8164821 C39.6975694,38.1802321 38.8687499,37.9577321 38.4957175,37.3202322 C38.1265046,36.6789821 38.3518519,35.8664821 39.0011574,35.5002322 L42.1445604,33.7377322 C42.3609955,33.6189822 42.5888891,33.5627322 42.820602,33.5627322 C43.2891206,33.5627322 43.7474539,33.8052322 43.9982641,34.2364822 C44.3700231,34.8752321 44.1421297,35.6889822 43.4953704,36.0539821" id="path2742"></path>
+            </g>
+            <g id="g2728" fill="rgb(0,0,0)">
+                <path d="M23.8703704,17.9330886 L22.3247685,20.7618386 C21.9708334,21.4093385 21.150926,21.6555885 20.4863426,21.3055885 C19.8268517,20.9593386 19.5773148,20.1505887 19.9312499,19.5005885 L21.4806712,16.6718385 C21.7225693,16.2255885 22.1910879,15.9680885 22.6761573,15.9680885 C22.8925925,15.9680885 23.1128471,16.0205885 23.317824,16.1280885 C23.9773148,16.4755886 24.2255787,17.2843386 23.8703704,17.9330886" id="path2730" fill="rgb(168,182,207)"></path>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/data/images/uploading.svg b/data/images/uploading.svg
new file mode 100644
index 000000000..ec238b7bb
--- /dev/null
+++ b/data/images/uploading.svg
@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="52px" height="52px" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
+    <title>uploading</title>
+    <description>Created with Sketch (http://www.bohemiancoding.com/sketch)</description>
+    <defs></defs>
+    <g id="Page 1" fill="rgb(223,223,223)" fill-rule="evenodd">
+        <g id="Group" fill="rgb(0,0,0)">
+            <path d="M48.5140076,27.2529297 C46.9970076,27.2529297 45.7680075,28.4829297 45.7680075,29.9989297 L45.7680075,42.9829299 L7.21500611,42.9829299 L7.21500611,29.9989297 C7.21500611,28.4829297 5.98600614,27.2529297 4.46900606,27.2529297 C2.95300603,27.2529297 1.72300601,28.4829297 1.72300601,29.9989297 L1.72300601,45.7289293 C1.72300601,47.2449293 2.95300603,48.4749293 4.46900606,48.4749293 L48.5140042,48.4749293 C50.0300043,48.4749293 51.2590041,47.2449293 51.2590041,45.7289293 L51.2590041,29.9989297 C51.2590027,28.4829102 50.0289917,27.2529297 48.5140076,27.2529297 L48.5140076,27.2529297 L48.5140076,27.2529297" id="Shape" fill="rgb(152,152,151)"></path>
+            <path d="M25.5474076,39.7359029 C25.7681677,40.0745732 26.117921,40.2760237 26.4919145,40.2760237 C26.8650424,40.2760237 27.2147957,40.0745732 27.4338244,39.7359029 L35.2253576,27.6770974 C35.4824782,27.2790624 35.5205702,26.7515931 35.3205875,26.3136572 C35.1223363,25.8747482 34.7197737,25.5973889 34.2825821,25.5973889 L29.2111599,25.5973889 L29.2111599,9.61078556 C29.2111599,7.92229972 27.9939492,6.55204737 26.4919147,6.55204737 C24.9898803,6.55204737 23.7709383,7.9213266 23.7709383,9.61078556 L23.7709383,25.5973889 L18.699516,25.5973889 C18.2614587,25.5993352 17.8597619,25.8757214 17.6623764,26.3136572 C17.4632594,26.751593 17.4987542,27.2800355 17.7567405,27.6770974 L25.5474076,39.7359029 L25.5474076,39.7359029 L25.5474076,39.7359029" id="Shape" fill="rgb(237,149,52)"></path>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/data/images/volume-icon-full.svg b/data/images/volume-icon-full.svg
new file mode 100644
index 000000000..56b640fb8
--- /dev/null
+++ b/data/images/volume-icon-full.svg
@@ -0,0 +1,19 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="54px" height="44px" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
+    <title>volume-icon-full</title>
+    <description>Created with Sketch (http://www.bohemiancoding.com/sketch)</description>
+    <defs>
+        <linearGradient x1="50%" y1="-39.1231204%" x2="50%" y2="222.072246%" id="linearGradient-1">
+            <stop stop-color="rgb(254,255,255)" offset="0%"></stop>
+            <stop stop-color="rgb(0,0,0)" offset="100%"></stop>
+        </linearGradient>
+    </defs>
+    <g id="Page 1" fill="rgb(223,223,223)" fill-rule="evenodd">
+        <g id="Group" fill="rgb(0,0,0)">
+            <path d="M34.974563,14.947998 C34.045343,15.086998 33.468023,15.7009981 33.686303,16.3189981 L33.681203,16.3199981 C34.182023,17.7209981 34.430903,19.166998 34.425803,20.6099981 C34.430903,22.0639981 34.167743,23.5229982 33.664883,24.9479979 C33.441503,25.5639979 34.031063,26.1759979 34.965383,26.3219978 C35.096963,26.3429978 35.228543,26.3509978 35.360123,26.3509978 C36.144503,26.3509978 36.858503,25.9929978 37.047203,25.4659978 C37.607183,23.8709978 37.888703,22.2399978 37.897883,20.6099979 C37.891763,18.9909979 37.611263,17.3779978 37.055363,15.7979981 C36.8319666,15.1810303 35.90479,14.802002 34.974563,14.947998 C34.974563,14.947998 35.90479,14.802002 34.974563,14.947998 L34.974563,14.947998" id="Shape" fill="url(#linearGradient-1)"></path>
+            <path d="M47.4460925,5.19897461 C47.0360525,4.62297463 45.9997325,4.38197464 45.1388524,4.65097463 C44.2738925,4.91697463 43.9056725,5.59897465 44.3106125,6.17097461 L44.3024525,6.17097461 C47.5735925,10.7489747 49.2035523,15.6799744 49.2035523,20.6209744 C49.2035523,25.5639743 47.5746123,30.4979743 44.3024525,35.0749749 C43.8934325,35.6469749 44.2647125,36.3289748 45.1378325,36.5979749 C45.3765125,36.6689749 45.6253925,36.7039749 45.8671324,36.7029749 C46.5209524,36.7049749 47.1462124,36.4599749 47.4450725,36.0469749 C50.9293924,31.163975 52.6827727,25.8949744 52.6827727,20.6209752 C52.6828064,15.3530273 50.928374,10.0839844 47.4460925,5.19897461 C47.4460925,5.19897461 50.928374,10.0839844 47.4460925,5.19897461 L47.4460925,5.19897461" id="Shape" fill="url(#linearGradient-1)"></path>
+            <path d="M42.8683569,11.4260254 C42.5501169,10.8270254 41.562757,10.5150254 40.6641369,10.7230254 C39.7634769,10.9250254 39.2830569,11.5770254 39.5972169,12.1730254 C41.0211369,14.8780254 41.730037,17.7370256 41.730037,20.6030257 C41.727997,23.4820257 41.004817,26.363026 39.5747771,29.0970262 C39.2616371,29.6910262 39.7420571,30.3460261 40.6488371,30.5490262 C40.8354971,30.5910262 41.025217,30.6110262 41.211877,30.6110262 C41.935057,30.6110262 42.6102971,30.3150262 42.861217,29.8400262 C44.4075371,26.8650263 45.1980369,23.737026 45.197017,20.6030257 C45.1980334,17.4909668 44.4319751,14.3780518 42.8683569,11.4260254 C42.8683569,11.4260254 44.4319751,14.3780518 42.8683569,11.4260254 L42.8683569,11.4260254" id="Shape" fill="url(#linearGradient-1)"></path>
+            <path d="M26.9451135,2.40698242 C24.4869134,3.95198238 18.2006536,9.20898247 14.5816932,12.280982 L3.95227371,12.280982 C3.24337372,12.280982 2.66605367,12.845982 2.66605367,13.542982 L2.66605367,28.0439824 C2.66605367,28.7399824 3.24235367,29.3049824 3.95227371,29.3049824 L14.8203734,29.3049824 C18.4699335,32.4019823 24.5399537,37.4649823 26.9451135,38.9769824 C30.0102136,40.9039824 30.4029136,37.6499823 30.4029136,37.6499823 L30.4029136,21.0769824 L30.4029136,20.3079824 L30.4029136,3.73498243 C30.4029285,3.73400879 30.0102185,0.479003906 26.9451135,2.40698242 C26.9451135,2.40698242 30.0102185,0.479003906 26.9451135,2.40698242 L26.9451135,2.40698242" id="Shape" fill="url(#linearGradient-1)"></path>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/data/images/volume-icon-muted.svg b/data/images/volume-icon-muted.svg
new file mode 100644
index 000000000..4edc5ff73
--- /dev/null
+++ b/data/images/volume-icon-muted.svg
@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="43px" height="44px" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
+    <title>volume-icon-muted</title>
+    <description>Created with Sketch (http://www.bohemiancoding.com/sketch)</description>
+    <defs>
+        <linearGradient x1="50%" y1="-39.1231204%" x2="50%" y2="222.072246%" id="linearGradient-1">
+            <stop stop-color="rgb(254,255,255)" offset="0%"></stop>
+            <stop stop-color="rgb(0,0,0)" offset="100%"></stop>
+        </linearGradient>
+    </defs>
+    <g id="Page 1" fill="rgb(223,223,223)" fill-rule="evenodd">
+        <g id="Group" fill="rgb(0,0,0)">
+            <path d="M26.9451135,2.40698242 C24.4869134,3.95198238 18.2006536,9.20898247 14.5816932,12.280982 L3.95227371,12.280982 C3.24337372,12.280982 2.66605367,12.845982 2.66605367,13.542982 L2.66605367,28.0439824 C2.66605367,28.7399824 3.24235367,29.3049824 3.95227371,29.3049824 L14.8203734,29.3049824 C18.4699335,32.4019823 24.5399537,37.4649823 26.9451135,38.9769824 C30.0102136,40.9039824 30.4029136,37.6499823 30.4029136,37.6499823 L30.4029136,21.0769824 L30.4029136,20.3079824 L30.4029136,3.73498243 C30.4029285,3.73400879 30.0102185,0.479003906 26.9451135,2.40698242 C26.9451135,2.40698242 30.0102185,0.479003906 26.9451135,2.40698242 L26.9451135,2.40698242" id="Shape" fill="url(#linearGradient-1)"></path>
+        </g>
+    </g>
+</svg>
\ No newline at end of file