From e69398d7074679dc5bebb97e899a3a3592747a9d Mon Sep 17 00:00:00 2001
From: Michael Zanetti <michael_zanetti@gmx.net>
Date: Sun, 29 Aug 2021 15:30:02 +0200
Subject: [PATCH] Modernize the header visuals

---
 nymea-app/styles/dark/logo-wide.svg           |  75 +++---
 nymea-app/styles/light/logo-wide.svg          |  80 ++++---
 nymea-app/ui/MainMenu.qml                     |   1 +
 nymea-app/ui/MainPage.qml                     | 222 ++++++++++++------
 nymea-app/ui/SettingsPage.qml                 |   1 +
 nymea-app/ui/appsettings/AppSettingsPage.qml  |   1 +
 nymea-app/ui/components/MainViewBase.qml      |   5 +
 nymea-app/ui/components/NymeaHeader.qml       |  19 +-
 .../ui/components/NymeaSwipeDelegate.qml      |  74 ++++--
 nymea-app/ui/components/SettingsPageBase.qml  |   1 +
 .../ClosablesThingsListPage.qml               |   1 +
 .../devicelistpages/GarageThingsListPage.qml  |   1 +
 .../devicelistpages/GenericThingsListPage.qml |   1 +
 .../devicelistpages/LightThingsListPage.qml   |   1 +
 .../devicelistpages/MediaDeviceListPage.qml   |   1 +
 .../PowerSocketsDeviceListPage.qml            |   1 +
 .../devicelistpages/SensorsDeviceListPage.qml |   1 +
 .../SmartMeterDeviceListPage.qml              |   1 +
 .../devicelistpages/WeatherDeviceListPage.qml |   1 +
 nymea-app/ui/magic/ScriptsPage.qml            |   1 +
 nymea-app/ui/mainviews/DashboardView.qml      |   5 +
 nymea-app/ui/mainviews/EnergyView.qml         |  31 ++-
 nymea-app/ui/mainviews/FavoritesView.qml      |   2 +
 nymea-app/ui/mainviews/GaragesView.qml        |   1 +
 nymea-app/ui/mainviews/GroupsView.qml         |   3 +-
 nymea-app/ui/mainviews/ScenesView.qml         |   3 +
 nymea-app/ui/mainviews/ThingsView.qml         |   2 +
 .../ui/mainviews/dashboard/Dashboard.qml      |   8 +
 .../dashboard/DashboardDelegateBase.qml       |   1 +
 .../dashboard/DashboardWebViewDelegate.qml    |   4 +-
 30 files changed, 359 insertions(+), 190 deletions(-)

diff --git a/nymea-app/styles/dark/logo-wide.svg b/nymea-app/styles/dark/logo-wide.svg
index 50afccfd..432ec074 100644
--- a/nymea-app/styles/dark/logo-wide.svg
+++ b/nymea-app/styles/dark/logo-wide.svg
@@ -10,12 +10,12 @@
    xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
    id="Layer_1"
    data-name="Layer 1"
-   viewBox="0 0 285.59808 151.71999"
+   viewBox="0 0 632.82275 151.68896"
    version="1.1"
    sodipodi:docname="logo-wide.svg"
-   width="285.59808"
-   height="151.72"
-   inkscape:version="1.0.1 (1.0.1+r74)">
+   width="632.82275"
+   height="151.689"
+   inkscape:version="1.0.2 (e86c870879, 2021-01-15)">
   <metadata
      id="metadata108">
     <rdf:RDF>
@@ -37,8 +37,8 @@
      guidetolerance="10"
      inkscape:pageopacity="0"
      inkscape:pageshadow="2"
-     inkscape:window-width="1380"
-     inkscape:window-height="873"
+     inkscape:window-width="1464"
+     inkscape:window-height="933"
      id="namedview106"
      showgrid="false"
      lock-margins="true"
@@ -46,13 +46,14 @@
      fit-margin-left="5"
      fit-margin-right="5"
      fit-margin-bottom="5"
-     inkscape:zoom="2.3158153"
-     inkscape:cx="129.50276"
-     inkscape:cy="58.748251"
-     inkscape:window-x="60"
+     inkscape:zoom="0.93224406"
+     inkscape:cx="433.08783"
+     inkscape:cy="37.558497"
+     inkscape:window-x="72"
      inkscape:window-y="27"
      inkscape:window-maximized="1"
-     inkscape:current-layer="Layer_1" />
+     inkscape:current-layer="Layer_1"
+     inkscape:document-rotation="0" />
   <defs
      id="defs69">
     <style
@@ -267,7 +268,8 @@
        x1="369.02579"
        y1="171.88429"
        x2="441.68719"
-       y2="262.58051">
+       y2="262.58051"
+       gradientTransform="translate(0.07830056,-0.01787594)">
       <stop
          offset="0.1296"
          style="stop-color:#7CC099"
@@ -292,7 +294,7 @@
        y1="154.45329"
        x2="918.56207"
        y2="154.45329"
-       gradientTransform="matrix(0.9669,0.2553,-0.2553,0.9669,-399.6603,-163.1002)">
+       gradientTransform="matrix(0.9669,0.2553,-0.2553,0.9669,-399.582,-163.11807)">
       <stop
          offset="0"
          style="stop-color:#DBE6E0"
@@ -308,7 +310,8 @@
        x1="451.01599"
        y1="201.9489"
        x2="442.73761"
-       y2="243.37801">
+       y2="243.37801"
+       gradientTransform="translate(0.07830056,-0.01787594)">
       <stop
          offset="0"
          style="stop-color:#7CC099"
@@ -336,7 +339,8 @@
        x1="457.62369"
        y1="234.5722"
        x2="457.47629"
-       y2="234.5722">
+       y2="234.5722"
+       gradientTransform="translate(0.07830056,-0.01787594)">
       <stop
          offset="0"
          style="stop-color:#DBE6E0"
@@ -352,7 +356,8 @@
        x1="467.88159"
        y1="223.4929"
        x2="457.62369"
-       y2="223.4929">
+       y2="223.4929"
+       gradientTransform="translate(0.07830056,-0.01787594)">
       <stop
          offset="0"
          style="stop-color:#DBE6E0"
@@ -368,7 +373,8 @@
        x1="457.47629"
        y1="235.823"
        x2="452.43719"
-       y2="235.823">
+       y2="235.823"
+       gradientTransform="translate(0.07830056,-0.01787594)">
       <stop
          offset="0"
          style="stop-color:#DBE6E0"
@@ -384,7 +390,8 @@
        x1="452.19159"
        y1="227.27921"
        x2="460.47461"
-       y2="227.27921">
+       y2="227.27921"
+       gradientTransform="translate(0.07830056,-0.01787594)">
       <stop
          offset="0"
          style="stop-color:#6AA583"
@@ -401,7 +408,7 @@
        y1="268.90411"
        x2="455.23529"
        y2="283.95389"
-       gradientTransform="matrix(0.9997,0.0227,-0.0227,0.9997,-36.4014,-7.9207)">
+       gradientTransform="matrix(0.9997,0.0227,-0.0227,0.9997,-36.3231,-7.9385759)">
       <stop
          offset="0"
          style="stop-color:#7CC099"
@@ -418,7 +425,7 @@
        y1="274.66199"
        x2="470.95151"
        y2="274.66199"
-       gradientTransform="matrix(0.9997,0.0227,-0.0227,0.9997,-36.4014,-7.9207)">
+       gradientTransform="matrix(0.9997,0.0227,-0.0227,0.9997,-36.3231,-7.9385759)">
       <stop
          offset="0"
          style="stop-color:#7CC099"
@@ -446,7 +453,8 @@
        x1="415.2153"
        y1="260.93829"
        x2="422.0509"
-       y2="252.7919">
+       y2="252.7919"
+       gradientTransform="translate(0.07830056,-0.01787594)">
       <stop
          offset="0"
          style="stop-color:#4C9E96"
@@ -466,7 +474,8 @@
        x1="425.60641"
        y1="203.1666"
        x2="393.7475"
-       y2="239.4308">
+       y2="239.4308"
+       gradientTransform="translate(0.07830056,-0.01787594)">
       <stop
          offset="0"
          style="stop-color:#7CC099"
@@ -488,7 +497,7 @@
   <title
      id="title71">Artboard 1 copy 5 Kopie 2</title>
   <g
-     transform="matrix(0.99921713,0,0,0.99921713,-364.85552,-162.38673)"
+     transform="matrix(0.99921713,0,0,0.99921713,-364.93376,-162.36887)"
      id="g41">
     <g
        id="g43">
@@ -801,27 +810,27 @@
   </g>
   <path
      class="cls-12"
-     d="m 123.04694,85.32 c 1,-0.25 2.33,-0.52 4,-0.8 a 33.84,33.84 0 0 1 5.74,-0.43 12.37,12.37 0 0 1 4.84,0.83 7.52,7.52 0 0 1 3.08,2.3 8.85,8.85 0 0 1 1.62,3.55 20.81,20.81 0 0 1 0.47,4.56 v 13.72 h -4.37 V 96.27 a 20.35,20.35 0 0 0 -0.31,-3.86 6.48,6.48 0 0 0 -1,-2.58 4,4 0 0 0 -1.88,-1.44 8.41,8.41 0 0 0 -2.91,-0.44 c -0.47,0 -1,0 -1.46,0 l -1.43,0.12 c -0.46,0.05 -0.86,0.1 -1.22,0.17 l -0.78,0.14 v 20.63 h -4.37 z"
+     d="m 162.96869,47.905865 c 2.9505,-0.737624 6.87466,-1.534258 11.80199,-2.360397 a 99.844798,99.844798 0 0 1 16.93585,-1.268714 36.49764,36.49764 0 0 1 14.2804,2.448912 22.187733,22.187733 0 0 1 9.08753,6.786143 26.111893,26.111893 0 0 1 4.7798,10.474262 61.39983,61.39983 0 0 1 1.38674,13.454264 V 117.92114 H 208.34733 V 80.213801 a 60.042602,60.042602 0 0 0 -0.91466,-11.388916 19.119217,19.119217 0 0 0 -2.95049,-7.61228 11.801986,11.801986 0 0 0 -5.54694,-4.248715 24.813675,24.813675 0 0 0 -8.58594,-1.298219 c -1.38673,0 -2.9505,0 -4.30772,0 l -4.21921,0.35406 c -1.35723,0.147525 -2.53743,0.29505 -3.59961,0.501584 l -2.30139,0.41307 V 117.80312 H 163.0277 Z"
      id="path95"
-     style="fill:#fafafa;fill-opacity:1" />
+     style="fill:#fafafa;fill-opacity:1;stroke-width:1" />
   <path
      class="cls-12"
-     d="m 153.92694,113.61 a 9,9 0 0 0 1.34,0.45 6.55,6.55 0 0 0 1.62,0.21 6.39,6.39 0 0 0 4,-1.15 11.7,11.7 0 0 0 2.78,-4.07 126.9,126.9 0 0 1 -5.67,-11.63 106.17,106.17 0 0 1 -4.17,-12.81 h 4.7 c 0.35,1.41 0.76,2.93 1.25,4.56 0.49,1.63 1,3.31 1.62,5 0.62,1.69 1.24,3.45 1.92,5.17 0.68,1.72 1.41,3.38 2.17,5 q 1.78,-4.93 3.1,-9.78 1.32,-4.85 2.49,-10 h 4.51 q -1.7,6.92 -3.76,13.28 c -1.38,4.24 -2.86,8.22 -4.46,11.91 a 26,26 0 0 1 -1.95,3.65 11.23,11.23 0 0 1 -2.24,2.51 8.18,8.18 0 0 1 -2.75,1.46 11.8,11.8 0 0 1 -3.45,0.47 10.11,10.11 0 0 1 -1.08,-0.07 c -0.38,-0.05 -0.75,-0.11 -1.11,-0.19 -0.36,-0.08 -0.69,-0.17 -1,-0.26 a 3.68,3.68 0 0 1 -0.64,-0.24 z"
+     d="m 254.08002,131.37541 a 26.554468,26.554468 0 0 0 3.95367,1.32772 19.325751,19.325751 0 0 0 4.7798,0.6196 18.853672,18.853672 0 0 0 11.80199,-3.39307 34.520808,34.520808 0 0 0 8.20238,-12.00852 374.41799,374.41799 0 0 1 -16.72932,-34.314268 313.2542,313.2542 0 0 1 -12.30357,-37.79586 h 13.86734 c 1.03267,4.160201 2.24237,8.644956 3.68812,13.454265 1.44574,4.809309 2.95049,9.766143 4.7798,14.752482 1.82931,4.986339 3.65862,10.179213 5.66495,15.254066 2.00634,5.074854 4.1602,9.972678 6.40258,14.752475 q 5.25188,-14.54594 9.14654,-28.855847 3.89465,-14.309908 7.34674,-29.504965 h 13.30673 q -5.01584,20.417436 -11.09386,39.182593 c -4.07169,12.510105 -8.43842,24.253079 -13.15922,35.140409 a 76.712906,76.712906 0 0 1 -5.75346,10.76931 33.134075,33.134075 0 0 1 -6.60912,7.40575 24.135061,24.135061 0 0 1 -8.11386,4.30772 34.815858,34.815858 0 0 1 -10.17921,1.38674 29.829519,29.829519 0 0 1 -3.18654,-0.20654 c -1.12119,-0.14752 -2.21287,-0.32455 -3.27505,-0.56059 -1.06218,-0.23604 -2.03584,-0.50159 -2.9505,-0.76713 a 10.857827,10.857827 0 0 1 -1.88831,-0.70812 z"
      id="path97"
-     style="fill:#fafafa;fill-opacity:1" />
+     style="fill:#fafafa;fill-opacity:1;stroke-width:1" />
   <path
      class="cls-12"
-     d="m 185.74694,85.32 c 1,-0.25 2.33,-0.52 4,-0.8 a 33.3,33.3 0 0 1 5.71,-0.43 10.78,10.78 0 0 1 3.95,0.64 6.9,6.9 0 0 1 2.68,1.85 c 0.22,-0.15 0.56,-0.37 1,-0.65 a 11.39,11.39 0 0 1 1.74,-0.83 18.69,18.69 0 0 1 2.31,-0.7 11.73,11.73 0 0 1 2.72,-0.31 11.05,11.05 0 0 1 4.61,0.83 6.61,6.61 0 0 1 2.8,2.32 9.27,9.27 0 0 1 1.36,3.57 27.56,27.56 0 0 1 0.35,4.52 v 13.72 h -4.37 V 96.27 a 28.36,28.36 0 0 0 -0.21,-3.72 7.19,7.19 0 0 0 -0.8,-2.58 3.63,3.63 0 0 0 -1.6,-1.53 6,6 0 0 0 -2.6,-0.45 8.42,8.42 0 0 0 -3.53,0.89 12,12 0 0 0 -2,1.09 11.57,11.57 0 0 1 0.45,2.3 23.06,23.06 0 0 1 0.19,3.06 v 13.72 h -4.37 V 96.27 a 26.42,26.42 0 0 0 -0.23,-3.72 7.6,7.6 0 0 0 -0.83,-2.58 3.66,3.66 0 0 0 -1.59,-1.53 5.86,5.86 0 0 0 -2.57,-0.49 c -0.44,0 -0.91,0 -1.41,0 l -1.43,0.12 c -0.45,0.05 -0.87,0.1 -1.25,0.17 l -0.75,0.14 v 20.63 h -4.37 z"
+     d="m 347.96482,47.905865 c 2.95049,-0.737624 6.87465,-1.534258 11.80198,-2.360397 a 98.25153,98.25153 0 0 1 16.84734,-1.268714 31.806351,31.806351 0 0 1 11.65446,1.888318 20.358425,20.358425 0 0 1 7.90733,5.458419 c 0.64911,-0.442574 1.65228,-1.091683 2.9505,-1.917822 a 33.606154,33.606154 0 0 1 5.13386,-2.448913 55.144778,55.144778 0 0 1 6.81565,-2.065348 34.609323,34.609323 0 0 1 8.02535,-0.914654 32.602985,32.602985 0 0 1 13.60178,2.448912 19.502781,19.502781 0 0 1 8.26139,6.845153 27.351102,27.351102 0 0 1 4.01268,10.533272 81.315681,81.315681 0 0 1 1.03267,13.336244 V 117.92114 H 433.11614 V 80.213801 a 83.676078,83.676078 0 0 0 -0.6196,-10.975846 21.214069,21.214069 0 0 0 -2.3604,-7.612281 10.710302,10.710302 0 0 0 -4.72079,-4.514259 17.702978,17.702978 0 0 0 -7.67129,-1.327724 24.84318,24.84318 0 0 0 -10.41525,2.625942 35.405957,35.405957 0 0 0 -5.901,3.216041 34.137243,34.137243 0 0 1 1.32773,6.786142 68.038447,68.038447 0 0 1 0.56059,9.028519 V 117.92114 H 390.42246 V 80.213801 a 77.952115,77.952115 0 0 0 -0.67861,-10.975846 22.423773,22.423773 0 0 0 -2.44892,-7.612281 10.798817,10.798817 0 0 0 -4.69128,-4.514259 17.289909,17.289909 0 0 0 -7.58278,-1.445744 c -1.29822,0 -2.68495,0 -4.1602,0 l -4.21921,0.35406 c -1.32772,0.147525 -2.56693,0.29505 -3.68812,0.501584 l -2.21287,0.41307 V 117.80312 H 347.8468 Z"
      id="path99"
-     style="fill:#fafafa;fill-opacity:1" />
+     style="fill:#fafafa;fill-opacity:1;stroke-width:1" />
   <path
      class="cls-12"
-     d="m 271.19694,84 a 12.82,12.82 0 0 1 4.45,0.68 6.95,6.95 0 0 1 4.48,4.89 14,14 0 0 1 0.47,3.78 v 15.18 c -0.38,0.09 -1,0.25 -1.64,0.35 -0.64,0.1 -1.36,0.22 -2.21,0.31 -0.85,0.09 -1.76,0.18 -2.75,0.26 -0.99,0.08 -2,0.12 -2.94,0.12 a 15.56,15.56 0 0 1 -3.8,-0.43 8.44,8.44 0 0 1 -3,-1.33 6.15,6.15 0 0 1 -2,-2.43 8.42,8.42 0 0 1 -0.7,-3.61 6.94,6.94 0 0 1 0.82,-3.48 6.53,6.53 0 0 1 2.23,-2.35 10.22,10.22 0 0 1 3.29,-1.32 18.12,18.12 0 0 1 3.93,-0.41 12.78,12.78 0 0 1 1.36,0.07 c 0.47,0.05 0.92,0.11 1.34,0.19 l 1.11,0.21 0.66,0.14 V 93.6 a 9.62,9.62 0 0 0 -0.24,-2.14 5,5 0 0 0 -0.84,-1.88 4.35,4.35 0 0 0 -1.67,-1.32 6.54,6.54 0 0 0 -2.75,-0.49 19.17,19.17 0 0 0 -3.73,0.36 11,11 0 0 0 -2.42,0.81 l -0.71,-3.61 a 12.49,12.49 0 0 1 3,-1 24.77,24.77 0 0 1 4.26,-0.33 z m 0.38,21.9 c 1,0 2,0 2.75,-0.07 a 11.93,11.93 0 0 0 2,-0.26 v -7.28 a 5.63,5.63 0 0 0 -1.53,-0.4 16.92,16.92 0 0 0 -2.56,-0.17 15.46,15.46 0 0 0 -2.09,0.15 6.49,6.49 0 0 0 -2,0.58 4.29,4.29 0 0 0 -1.53,1.22 3.21,3.21 0 0 0 -0.61,2.05 3.53,3.53 0 0 0 1.5,3.27 7.85,7.85 0 0 0 4.07,0.91 z"
+     d="m 600.08474,44.01121 a 37.825364,37.825364 0 0 1 13.1297,2.006337 20.50595,20.50595 0 0 1 13.21823,14.427929 41.30695,41.30695 0 0 1 1.38673,11.152876 v 44.788528 c -1.12119,0.26555 -2.9505,0.73763 -4.83881,1.03268 -1.88832,0.29505 -4.01268,0.64911 -6.5206,0.91465 -2.50792,0.26555 -5.19287,0.53109 -8.11386,0.76713 -2.921,0.23604 -5.901,0.35406 -8.67446,0.35406 a 45.909724,45.909724 0 0 1 -11.21189,-1.26871 24.90219,24.90219 0 0 1 -8.85149,-3.92416 18.145553,18.145553 0 0 1 -5.90099,-7.16971 24.84318,24.84318 0 0 1 -2.06535,-10.651288 20.476445,20.476445 0 0 1 2.41941,-10.267728 19.266741,19.266741 0 0 1 6.5796,-6.933666 30.154073,30.154073 0 0 1 9.70714,-3.894656 53.462995,53.462995 0 0 1 11.59545,-1.209703 37.707344,37.707344 0 0 1 4.01267,0.206535 c 1.38674,0.147524 2.71446,0.324554 3.95367,0.560594 l 3.27505,0.619604 1.94733,0.41307 v -3.599606 a 28.383775,28.383775 0 0 0 -0.70812,-6.314062 14.752482,14.752482 0 0 0 -2.47842,-5.546933 12.834659,12.834659 0 0 0 -4.92733,-3.894656 19.296246,19.296246 0 0 0 -8.11386,-1.445743 56.561016,56.561016 0 0 0 -11.00535,1.062179 32.45546,32.45546 0 0 0 -7.14021,2.389902 L 578.66413,47.93537 a 36.8517,36.8517 0 0 1 8.85149,-2.950497 73.083796,73.083796 0 0 1 12.56912,-0.973663 z m 1.12118,64.61587 c 2.9505,0 5.901,0 8.11387,-0.20654 a 35.199422,35.199422 0 0 0 5.90099,-0.76713 V 86.173804 a 16.611295,16.611295 0 0 0 -4.51426,-1.180198 49.922399,49.922399 0 0 0 -7.55327,-0.501585 45.614674,45.614674 0 0 0 -6.16654,0.442575 19.148722,19.148722 0 0 0 -5.90099,1.711288 12.65763,12.65763 0 0 0 -4.51426,3.599605 9.4710934,9.4710934 0 0 0 -1.7998,6.048518 10.415252,10.415252 0 0 0 4.42574,9.648123 23.161397,23.161397 0 0 0 12.00852,2.68495 z"
      id="path101"
-     style="fill:#fafafa;fill-opacity:1" />
+     style="fill:#fafafa;fill-opacity:1;stroke-width:1" />
   <path
      class="cls-12"
-     d="m 230.36694,96.88 a 15.81,15.81 0 0 1 0.94,-5.67 11.75,11.75 0 0 1 2.5,-4 10,10 0 0 1 3.57,-2.4 11.15,11.15 0 0 1 4.13,-0.8 q 4.94,0 7.57,3.08 c 1.75,2.05 2.63,5.18 2.63,9.37 v 0.75 a 7.21,7.21 0 0 1 0,0.83 h -16.78 a 9,9 0 0 0 2.21,5.78 c 1.29,1.31 3.29,2 6,2 a 15.9,15.9 0 0 0 3.88,-0.4 15,15 0 0 0 2.65,-1 l 0.61,3.67 a 14,14 0 0 1 -3.08,1.12 19.58,19.58 0 0 1 -4.53,0.43 14.45,14.45 0 0 1 -5.52,-0.92 10.26,10.26 0 0 1 -3.83,-2.65 10.84,10.84 0 0 1 -2.24,-4 17.17,17.17 0 0 1 -0.71,-5.19 z m 16.78,-2.4 a 7.33,7.33 0 0 0 -1.48,-4.86 5.1,5.1 0 0 0 -4.2,-1.91 5.79,5.79 0 0 0 -2.66,0.59 6.14,6.14 0 0 0 -2,1.53 7.11,7.11 0 0 0 -1.25,2.16 10.73,10.73 0 0 0 -0.58,2.49 z"
+     d="m 479.61597,82.013604 a 46.647348,46.647348 0 0 1 2.77346,-16.729314 34.668333,34.668333 0 0 1 7.37624,-11.801986 29.504964,29.504964 0 0 1 10.53328,-7.081192 32.898035,32.898035 0 0 1 12.18555,-2.360397 q 14.57545,0 22.33525,9.087529 c 5.16337,6.048518 7.75981,15.283572 7.75981,27.646152 v 2.212872 a 21.273079,21.273079 0 0 1 0,2.448912 h -49.50933 a 26.554468,26.554468 0 0 0 6.5206,17.05387 c 3.80614,3.86515 9.70713,5.90099 17.70298,5.90099 a 46.912893,46.912893 0 0 0 11.44792,-1.1802 44.257446,44.257446 0 0 0 7.81882,-2.9505 l 1.7998,10.82833 a 41.30695,41.30695 0 0 1 -9.08753,3.30455 57.77072,57.77072 0 0 1 -13.36575,1.26872 42.634673,42.634673 0 0 1 -16.28674,-2.71446 30.272093,30.272093 0 0 1 -11.3004,-7.81882 31.983381,31.983381 0 0 1 -6.60911,-11.801979 50.660023,50.660023 0 0 1 -2.09485,-15.313077 z M 529.1253,74.932413 A 21.627139,21.627139 0 0 0 524.75856,60.593 a 15.047532,15.047532 0 0 0 -12.39208,-5.635448 17.083374,17.083374 0 0 0 -7.84832,1.740793 18.116048,18.116048 0 0 0 -5.901,4.51426 20.978029,20.978029 0 0 0 -3.68812,6.373072 31.658826,31.658826 0 0 0 -1.71128,7.346736 z"
      id="path103"
-     style="fill:#fafafa;fill-opacity:1" />
+     style="fill:#fafafa;fill-opacity:1;stroke-width:1" />
 </svg>
diff --git a/nymea-app/styles/light/logo-wide.svg b/nymea-app/styles/light/logo-wide.svg
index 387e77ea..bb5dad7c 100644
--- a/nymea-app/styles/light/logo-wide.svg
+++ b/nymea-app/styles/light/logo-wide.svg
@@ -10,12 +10,12 @@
    xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
    id="Layer_1"
    data-name="Layer 1"
-   viewBox="0 0 285.59808 151.71999"
+   viewBox="0 0 627.4837 152.8588"
    version="1.1"
    sodipodi:docname="logo-wide.svg"
-   width="285.59808"
-   height="151.72"
-   inkscape:version="1.0.1 (1.0.1+r74)">
+   width="627.4837"
+   height="152.85881"
+   inkscape:version="1.0.2 (e86c870879, 2021-01-15)">
   <metadata
      id="metadata108">
     <rdf:RDF>
@@ -37,8 +37,8 @@
      guidetolerance="10"
      inkscape:pageopacity="0"
      inkscape:pageshadow="2"
-     inkscape:window-width="1380"
-     inkscape:window-height="873"
+     inkscape:window-width="1464"
+     inkscape:window-height="933"
      id="namedview106"
      showgrid="false"
      lock-margins="true"
@@ -46,13 +46,14 @@
      fit-margin-left="5"
      fit-margin-right="5"
      fit-margin-bottom="5"
-     inkscape:zoom="2.3158153"
-     inkscape:cx="129.50276"
-     inkscape:cy="58.748251"
-     inkscape:window-x="60"
+     inkscape:zoom="0.44479926"
+     inkscape:cx="345.35853"
+     inkscape:cy="-84.130894"
+     inkscape:window-x="72"
      inkscape:window-y="27"
      inkscape:window-maximized="1"
-     inkscape:current-layer="Layer_1" />
+     inkscape:current-layer="Layer_1"
+     inkscape:document-rotation="0" />
   <defs
      id="defs69">
     <style
@@ -267,7 +268,8 @@
        x1="369.02579"
        y1="171.88429"
        x2="441.68719"
-       y2="262.58051">
+       y2="262.58051"
+       gradientTransform="translate(0.07829967,-0.01787472)">
       <stop
          offset="0.1296"
          style="stop-color:#7CC099"
@@ -292,7 +294,7 @@
        y1="154.45329"
        x2="918.56207"
        y2="154.45329"
-       gradientTransform="matrix(0.9669,0.2553,-0.2553,0.9669,-399.6603,-163.1002)">
+       gradientTransform="matrix(0.9669,0.2553,-0.2553,0.9669,-399.582,-163.11807)">
       <stop
          offset="0"
          style="stop-color:#DBE6E0"
@@ -308,7 +310,8 @@
        x1="451.01599"
        y1="201.9489"
        x2="442.73761"
-       y2="243.37801">
+       y2="243.37801"
+       gradientTransform="translate(0.07829967,-0.01787472)">
       <stop
          offset="0"
          style="stop-color:#7CC099"
@@ -336,7 +339,8 @@
        x1="457.62369"
        y1="234.5722"
        x2="457.47629"
-       y2="234.5722">
+       y2="234.5722"
+       gradientTransform="translate(0.07829967,-0.01787472)">
       <stop
          offset="0"
          style="stop-color:#DBE6E0"
@@ -352,7 +356,8 @@
        x1="467.88159"
        y1="223.4929"
        x2="457.62369"
-       y2="223.4929">
+       y2="223.4929"
+       gradientTransform="translate(0.07829967,-0.01787472)">
       <stop
          offset="0"
          style="stop-color:#DBE6E0"
@@ -368,7 +373,8 @@
        x1="457.47629"
        y1="235.823"
        x2="452.43719"
-       y2="235.823">
+       y2="235.823"
+       gradientTransform="translate(0.07829967,-0.01787472)">
       <stop
          offset="0"
          style="stop-color:#DBE6E0"
@@ -384,7 +390,8 @@
        x1="452.19159"
        y1="227.27921"
        x2="460.47461"
-       y2="227.27921">
+       y2="227.27921"
+       gradientTransform="translate(0.07829967,-0.01787472)">
       <stop
          offset="0"
          style="stop-color:#6AA583"
@@ -401,7 +408,7 @@
        y1="268.90411"
        x2="455.23529"
        y2="283.95389"
-       gradientTransform="matrix(0.9997,0.0227,-0.0227,0.9997,-36.4014,-7.9207)">
+       gradientTransform="matrix(0.9997,0.0227,-0.0227,0.9997,-36.3231,-7.9385747)">
       <stop
          offset="0"
          style="stop-color:#7CC099"
@@ -418,7 +425,7 @@
        y1="274.66199"
        x2="470.95151"
        y2="274.66199"
-       gradientTransform="matrix(0.9997,0.0227,-0.0227,0.9997,-36.4014,-7.9207)">
+       gradientTransform="matrix(0.9997,0.0227,-0.0227,0.9997,-36.3231,-7.9385747)">
       <stop
          offset="0"
          style="stop-color:#7CC099"
@@ -446,7 +453,8 @@
        x1="415.2153"
        y1="260.93829"
        x2="422.0509"
-       y2="252.7919">
+       y2="252.7919"
+       gradientTransform="translate(0.07829967,-0.01787472)">
       <stop
          offset="0"
          style="stop-color:#4C9E96"
@@ -466,7 +474,8 @@
        x1="425.60641"
        y1="203.1666"
        x2="393.7475"
-       y2="239.4308">
+       y2="239.4308"
+       gradientTransform="translate(0.07829967,-0.01787472)">
       <stop
          offset="0"
          style="stop-color:#7CC099"
@@ -488,7 +497,7 @@
   <title
      id="title71">Artboard 1 copy 5 Kopie 2</title>
   <g
-     transform="matrix(0.99921713,0,0,0.99921713,-364.85552,-162.38673)"
+     transform="matrix(0.99921713,0,0,0.99921713,-364.93376,-162.36887)"
      id="g41">
     <g
        id="g43">
@@ -801,22 +810,27 @@
   </g>
   <path
      class="cls-12"
-     d="m 123.04694,85.32 c 1,-0.25 2.33,-0.52 4,-0.8 a 33.84,33.84 0 0 1 5.74,-0.43 12.37,12.37 0 0 1 4.84,0.83 7.52,7.52 0 0 1 3.08,2.3 8.85,8.85 0 0 1 1.62,3.55 20.81,20.81 0 0 1 0.47,4.56 v 13.72 h -4.37 V 96.27 a 20.35,20.35 0 0 0 -0.31,-3.86 6.48,6.48 0 0 0 -1,-2.58 4,4 0 0 0 -1.88,-1.44 8.41,8.41 0 0 0 -2.91,-0.44 c -0.47,0 -1,0 -1.46,0 l -1.43,0.12 c -0.46,0.05 -0.86,0.1 -1.22,0.17 l -0.78,0.14 v 20.63 h -4.37 z"
-     id="path95" />
+     d="m 122.9687,44.751323 c 3.1705,-0.792624 7.38725,-1.648658 12.68198,-2.536396 a 107.28953,107.28953 0 0 1 18.19863,-1.363313 39.219015,39.219015 0 0 1 15.3452,2.63151 23.842117,23.842117 0 0 1 9.76512,7.292138 28.058875,28.058875 0 0 1 5.1362,11.255255 65.977987,65.977987 0 0 1 1.49014,14.457454 V 119.98716 H 171.73091 V 79.468236 a 64.51956,64.51956 0 0 0 -0.98286,-12.238109 20.544803,20.544803 0 0 0 -3.17049,-8.179875 12.681978,12.681978 0 0 0 -5.96053,-4.565512 26.663858,26.663858 0 0 0 -9.22614,-1.395017 c -1.49013,0 -3.17049,0 -4.62892,0 l -4.53381,0.380459 c -1.45843,0.158524 -2.72662,0.31705 -3.868,0.538984 l -2.47299,0.443869 v 65.407295 h -13.85506 z"
+     id="path95"
+     style="stroke-width:1" />
   <path
      class="cls-12"
-     d="m 153.92694,113.61 a 9,9 0 0 0 1.34,0.45 6.55,6.55 0 0 0 1.62,0.21 6.39,6.39 0 0 0 4,-1.15 11.7,11.7 0 0 0 2.78,-4.07 126.9,126.9 0 0 1 -5.67,-11.63 106.17,106.17 0 0 1 -4.17,-12.81 h 4.7 c 0.35,1.41 0.76,2.93 1.25,4.56 0.49,1.63 1,3.31 1.62,5 0.62,1.69 1.24,3.45 1.92,5.17 0.68,1.72 1.41,3.38 2.17,5 q 1.78,-4.93 3.1,-9.78 1.32,-4.85 2.49,-10 h 4.51 q -1.7,6.92 -3.76,13.28 c -1.38,4.24 -2.86,8.22 -4.46,11.91 a 26,26 0 0 1 -1.95,3.65 11.23,11.23 0 0 1 -2.24,2.51 8.18,8.18 0 0 1 -2.75,1.46 11.8,11.8 0 0 1 -3.45,0.47 10.11,10.11 0 0 1 -1.08,-0.07 c -0.38,-0.05 -0.75,-0.11 -1.11,-0.19 -0.36,-0.08 -0.69,-0.17 -1,-0.26 a 3.68,3.68 0 0 1 -0.64,-0.24 z"
-     id="path97" />
+     d="m 220.87357,134.44461 a 28.534449,28.534449 0 0 0 4.24846,1.42672 20.766738,20.766738 0 0 0 5.1362,0.6658 20.259459,20.259459 0 0 0 12.68198,-3.64607 37.094784,37.094784 0 0 0 8.81397,-12.9039 402.33574,402.33574 0 0 1 -17.9767,-36.872856 336.61139,336.61139 0 0 1 -13.22096,-40.614032 h 14.90132 c 1.10967,4.470397 2.40958,9.289548 3.96312,14.457454 1.55354,5.167906 3.1705,10.494336 5.1362,15.852471 1.9657,5.358136 3.93141,10.938206 6.08735,16.391456 2.15594,5.45325 4.4704,10.716271 6.87997,15.852467 q 5.64348,-15.630532 9.82853,-31.00743 4.18506,-15.376897 7.89453,-31.704943 h 14.29893 q -5.38983,21.93982 -11.92105,42.104165 c -4.37529,13.442895 -9.06762,26.061458 -14.14041,37.760588 a 82.432854,82.432854 0 0 1 -6.18247,11.5723 35.604651,35.604651 0 0 1 -7.1019,7.95795 25.934644,25.934644 0 0 1 -8.71886,4.62892 37.411833,37.411833 0 0 1 -10.93821,1.49013 32.053698,32.053698 0 0 1 -3.42413,-0.22194 c -1.20479,-0.15852 -2.37787,-0.34875 -3.51925,-0.60239 -1.14138,-0.25364 -2.18764,-0.53898 -3.17049,-0.82433 a 11.667419,11.667419 0 0 1 -2.02912,-0.76092 z"
+     id="path97"
+     style="stroke-width:1" />
   <path
      class="cls-12"
-     d="m 185.74694,85.32 c 1,-0.25 2.33,-0.52 4,-0.8 a 33.3,33.3 0 0 1 5.71,-0.43 10.78,10.78 0 0 1 3.95,0.64 6.9,6.9 0 0 1 2.68,1.85 c 0.22,-0.15 0.56,-0.37 1,-0.65 a 11.39,11.39 0 0 1 1.74,-0.83 18.69,18.69 0 0 1 2.31,-0.7 11.73,11.73 0 0 1 2.72,-0.31 11.05,11.05 0 0 1 4.61,0.83 6.61,6.61 0 0 1 2.8,2.32 9.27,9.27 0 0 1 1.36,3.57 27.56,27.56 0 0 1 0.35,4.52 v 13.72 h -4.37 V 96.27 a 28.36,28.36 0 0 0 -0.21,-3.72 7.19,7.19 0 0 0 -0.8,-2.58 3.63,3.63 0 0 0 -1.6,-1.53 6,6 0 0 0 -2.6,-0.45 8.42,8.42 0 0 0 -3.53,0.89 12,12 0 0 0 -2,1.09 11.57,11.57 0 0 1 0.45,2.3 23.06,23.06 0 0 1 0.19,3.06 v 13.72 h -4.37 V 96.27 a 26.42,26.42 0 0 0 -0.23,-3.72 7.6,7.6 0 0 0 -0.83,-2.58 3.66,3.66 0 0 0 -1.59,-1.53 5.86,5.86 0 0 0 -2.57,-0.49 c -0.44,0 -0.91,0 -1.41,0 l -1.43,0.12 c -0.45,0.05 -0.87,0.1 -1.25,0.17 l -0.75,0.14 v 20.63 h -4.37 z"
-     id="path99" />
+     d="m 321.7587,44.751323 c 3.17049,-0.792624 7.38725,-1.648658 12.68197,-2.536396 a 105.57746,105.57746 0 0 1 18.10352,-1.363313 34.177929,34.177929 0 0 1 12.52346,2.029117 21.876411,21.876411 0 0 1 8.49693,5.865414 c 0.6975,-0.475574 1.77547,-1.173083 3.17049,-2.060821 a 36.111931,36.111931 0 0 1 5.51666,-2.63151 59.256539,59.256539 0 0 1 7.32384,-2.219346 37.189899,37.189899 0 0 1 8.62374,-0.982854 35.033963,35.033963 0 0 1 14.61599,2.63151 20.956968,20.956968 0 0 1 8.87738,7.355548 29.390483,29.390483 0 0 1 4.31187,11.318665 87.378821,87.378821 0 0 1 1.10967,14.330634 V 119.98716 H 413.25916 V 79.468236 a 89.915219,89.915219 0 0 0 -0.6658,-11.79424 22.795854,22.795854 0 0 0 -2.5364,-8.179875 11.508894,11.508894 0 0 0 -5.07279,-4.850856 19.022966,19.022966 0 0 0 -8.24328,-1.426723 26.695563,26.695563 0 0 0 -11.19185,2.821741 38.045932,38.045932 0 0 0 -6.34098,3.455838 36.682619,36.682619 0 0 1 1.42672,7.292137 73.1116,73.1116 0 0 1 0.60239,9.701713 V 119.98716 H 367.38211 V 79.468236 a 83.764464,83.764464 0 0 0 -0.72921,-11.79424 24.095757,24.095757 0 0 0 -2.63151,-8.179875 11.604009,11.604009 0 0 0 -5.04109,-4.850856 18.579097,18.579097 0 0 0 -8.14817,-1.553542 c -1.39502,0 -2.88515,0 -4.47039,0 l -4.53381,0.380459 c -1.42672,0.158524 -2.75833,0.31705 -3.96312,0.538984 l -2.37787,0.443869 v 65.407295 h -13.85506 z"
+     id="path99"
+     style="stroke-width:1" />
   <path
      class="cls-12"
-     d="m 271.19694,84 a 12.82,12.82 0 0 1 4.45,0.68 6.95,6.95 0 0 1 4.48,4.89 14,14 0 0 1 0.47,3.78 v 15.18 c -0.38,0.09 -1,0.25 -1.64,0.35 -0.64,0.1 -1.36,0.22 -2.21,0.31 -0.85,0.09 -1.76,0.18 -2.75,0.26 -0.99,0.08 -2,0.12 -2.94,0.12 a 15.56,15.56 0 0 1 -3.8,-0.43 8.44,8.44 0 0 1 -3,-1.33 6.15,6.15 0 0 1 -2,-2.43 8.42,8.42 0 0 1 -0.7,-3.61 6.94,6.94 0 0 1 0.82,-3.48 6.53,6.53 0 0 1 2.23,-2.35 10.22,10.22 0 0 1 3.29,-1.32 18.12,18.12 0 0 1 3.93,-0.41 12.78,12.78 0 0 1 1.36,0.07 c 0.47,0.05 0.92,0.11 1.34,0.19 l 1.11,0.21 0.66,0.14 V 93.6 a 9.62,9.62 0 0 0 -0.24,-2.14 5,5 0 0 0 -0.84,-1.88 4.35,4.35 0 0 0 -1.67,-1.32 6.54,6.54 0 0 0 -2.75,-0.49 19.17,19.17 0 0 0 -3.73,0.36 11,11 0 0 0 -2.42,0.81 l -0.71,-3.61 a 12.49,12.49 0 0 1 3,-1 24.77,24.77 0 0 1 4.26,-0.33 z m 0.38,21.9 c 1,0 2,0 2.75,-0.07 a 11.93,11.93 0 0 0 2,-0.26 v -7.28 a 5.63,5.63 0 0 0 -1.53,-0.4 16.92,16.92 0 0 0 -2.56,-0.17 15.46,15.46 0 0 0 -2.09,0.15 6.49,6.49 0 0 0 -2,0.58 4.29,4.29 0 0 0 -1.53,1.22 3.21,3.21 0 0 0 -0.61,2.05 3.53,3.53 0 0 0 1.5,3.27 7.85,7.85 0 0 0 4.07,0.91 z"
-     id="path101" />
+     d="m 592.67744,40.56627 a 40.645738,40.645738 0 0 1 14.10869,2.155936 22.034935,22.034935 0 0 1 14.20382,15.503717 44.386921,44.386921 0 0 1 1.49014,11.984469 V 118.3385 c -1.20479,0.28534 -3.1705,0.79262 -5.19962,1.10967 -2.02911,0.31705 -4.31187,0.69751 -7.00679,0.98285 -2.69492,0.28534 -5.58007,0.57069 -8.71886,0.82433 -3.13879,0.25364 -6.34099,0.38046 -9.32125,0.38046 a 49.332892,49.332892 0 0 1 -12.04788,-1.36332 26.758972,26.758972 0 0 1 -9.51148,-4.21675 19.49854,19.49854 0 0 1 -6.34099,-7.7043 26.695563,26.695563 0 0 1 -2.21935,-11.445486 22.003231,22.003231 0 0 1 2.59981,-11.03332 20.703328,20.703328 0 0 1 7.0702,-7.450662 32.402452,32.402452 0 0 1 10.43093,-4.185052 57.449357,57.449357 0 0 1 12.46004,-1.299903 40.518917,40.518917 0 0 1 4.31187,0.221935 c 1.49013,0.158524 2.91685,0.348754 4.24846,0.602394 l 3.51925,0.665803 2.09253,0.443869 v -3.868003 a 30.500156,30.500156 0 0 0 -0.76092,-6.784857 15.852472,15.852472 0 0 0 -2.66321,-5.96053 13.791651,13.791651 0 0 0 -5.29473,-4.185052 20.735033,20.735033 0 0 0 -8.71886,-1.553543 60.778377,60.778377 0 0 0 -11.82594,1.141378 34.875437,34.875437 0 0 0 -7.6726,2.568101 l -2.25105,-11.445484 a 39.599474,39.599474 0 0 1 9.51148,-3.170495 78.533143,78.533143 0 0 1 13.50631,-1.046263 z m 1.20479,69.43383 c 3.17049,0 6.34098,0 8.71886,-0.22194 a 37.823997,37.823997 0 0 0 6.34099,-0.82433 V 85.872634 a 17.849883,17.849883 0 0 0 -4.85086,-1.268198 53.644764,53.644764 0 0 0 -8.11647,-0.538984 49.015843,49.015843 0 0 0 -6.62633,0.475574 20.576509,20.576509 0 0 0 -6.34099,1.838887 13.601421,13.601421 0 0 0 -4.85086,3.868003 10.177287,10.177287 0 0 0 -1.93399,6.499513 11.191845,11.191845 0 0 0 4.75574,10.367521 24.888381,24.888381 0 0 0 12.90391,2.88515 z"
+     id="path101"
+     style="stroke-width:1" />
   <path
      class="cls-12"
-     d="m 230.36694,96.88 a 15.81,15.81 0 0 1 0.94,-5.67 11.75,11.75 0 0 1 2.5,-4 10,10 0 0 1 3.57,-2.4 11.15,11.15 0 0 1 4.13,-0.8 q 4.94,0 7.57,3.08 c 1.75,2.05 2.63,5.18 2.63,9.37 v 0.75 a 7.21,7.21 0 0 1 0,0.83 h -16.78 a 9,9 0 0 0 2.21,5.78 c 1.29,1.31 3.29,2 6,2 a 15.9,15.9 0 0 0 3.88,-0.4 15,15 0 0 0 2.65,-1 l 0.61,3.67 a 14,14 0 0 1 -3.08,1.12 19.58,19.58 0 0 1 -4.53,0.43 14.45,14.45 0 0 1 -5.52,-0.92 10.26,10.26 0 0 1 -3.83,-2.65 10.84,10.84 0 0 1 -2.24,-4 17.17,17.17 0 0 1 -0.71,-5.19 z m 16.78,-2.4 a 7.33,7.33 0 0 0 -1.48,-4.86 5.1,5.1 0 0 0 -4.2,-1.91 5.79,5.79 0 0 0 -2.66,0.59 6.14,6.14 0 0 0 -2,1.53 7.11,7.11 0 0 0 -1.25,2.16 10.73,10.73 0 0 0 -0.58,2.49 z"
-     id="path103" />
+     d="m 463.22616,81.402237 a 50.125516,50.125516 0 0 1 2.98026,-17.976703 37.253309,37.253309 0 0 1 7.92624,-12.681977 31.704943,31.704943 0 0 1 11.31866,-7.609187 35.351012,35.351012 0 0 1 13.09414,-2.536395 q 15.66224,0 24.00065,9.765123 c 5.54836,6.499513 8.3384,16.42316 8.3384,29.707531 v 2.377872 a 22.859265,22.859265 0 0 1 0,2.63151 h -53.2009 a 28.534449,28.534449 0 0 0 7.00679,18.325459 c 4.08994,4.15334 10.43093,6.34099 19.02297,6.34099 a 50.41086,50.41086 0 0 0 12.30152,-1.2682 47.557415,47.557415 0 0 0 8.4018,-3.1705 l 1.93401,11.63572 a 44.386921,44.386921 0 0 1 -9.76512,3.55095 62.078279,62.078279 0 0 1 -14.36235,1.36331 45.813643,45.813643 0 0 1 -17.50112,-2.91685 32.529272,32.529272 0 0 1 -12.143,-8.40181 34.368159,34.368159 0 0 1 -7.1019,-12.681978 54.437388,54.437388 0 0 1 -2.25105,-16.454865 z m 53.20089,-7.609186 a 23.239724,23.239724 0 0 0 -4.69233,-15.408603 16.169521,16.169521 0 0 0 -13.31608,-6.055644 18.357163,18.357163 0 0 0 -8.43351,1.870592 19.466836,19.466836 0 0 0 -6.34099,4.850856 22.542215,22.542215 0 0 0 -3.96312,6.848268 34.019404,34.019404 0 0 0 -1.83889,7.894531 z"
+     id="path103"
+     style="stroke-width:1" />
 </svg>
diff --git a/nymea-app/ui/MainMenu.qml b/nymea-app/ui/MainMenu.qml
index 65b7e57c..d56f720b 100644
--- a/nymea-app/ui/MainMenu.qml
+++ b/nymea-app/ui/MainMenu.qml
@@ -43,6 +43,7 @@ Drawer {
 
                 RowLayout {
                     Layout.margins: Style.margins
+                    spacing: Style.bigMargins
                     Image {
                         Layout.preferredHeight: Style.hugeIconSize
                         sourceSize.height: Style.hugeIconSize
diff --git a/nymea-app/ui/MainPage.qml b/nymea-app/ui/MainPage.qml
index 5cb53b68..a22e64a2 100644
--- a/nymea-app/ui/MainPage.qml
+++ b/nymea-app/ui/MainPage.qml
@@ -35,6 +35,7 @@ import QtQuick.Layouts 1.2
 import QtQuick.Window 2.3
 import Qt.labs.settings 1.0
 import Qt.labs.folderlistmodel 2.2
+import QtGraphicalEffects 1.0
 import Nymea 1.0
 import "components"
 import "delegates"
@@ -51,33 +52,63 @@ Page {
 
         PlatformHelper.vibrate(PlatformHelper.HapticsFeedbackSelection)
         d.configOverlay = configComponent.createObject(contentContainer)
-        mainHeader.menuOpen = false;
     }
 
-    header: ToolBar {
+    header: Item {
         id: mainHeader
-        RowLayout {
-            anchors.fill: parent
+        height: 0
+
+        HeaderButton {
+            id: menuButton
+            imageSource: "../images/navigation-menu.svg"
+            anchors { left: parent.left; top: parent.top }
+            onClicked: {
+                if (d.configOverlay != null) {
+                    d.configOverlay.destroy();
+                }
+                app.mainMenu.open()
+            }
+        }
+
+
+//        Label {
+//            anchors { left: parent.left; right: parent.right; verticalCenter: parent.verticalCenter }
+//            horizontalAlignment: Text.AlignHCenter
+//            leftPadding: Math.max(menuButton.width, additionalIcons.width)
+//            rightPadding: leftPadding
+//            elide: Text.ElideRight
+//            font: Style.bigFont
+//            text: d.configOverlay !== null ?
+//                      qsTr("Configure main view")
+//                    : swipeView.currentItem.item.title.length > 0 ? swipeView.currentItem.item.title : filteredContentModel.modelData(swipeView.currentIndex, "displayName")
+//        }
+
+
+        Row {
+            id: additionalIcons
+            anchors { right: parent.right; top: parent.top }
+            visible: !d.configOverlay
+            width: visible ? implicitWidth : 0
 
             HeaderButton {
-                imageSource: "../images/navigation-menu.svg"
-                color: Style.headerForegroundColor
-                onClicked: {
-                    if (d.configOverlay != null) {
-                        d.configOverlay.destroy();
-                    }
-                    app.mainMenu.open()
+                imageSource: "../images/system-update.svg"
+                color: Style.accentColor
+                visible: updatesModel.count > 0 || engine.systemController.updateRunning
+                onClicked: pageStack.push(Qt.resolvedUrl("system/SystemUpdatePage.qml"))
+                RotationAnimation on rotation {
+                    from: 0
+                    to: 360
+                    duration: 2000
+                    loops: Animation.Infinite
+                    running: engine.systemController.updateRunning
+                    onStopped: icon.rotation = 0;
+                }
+                PackagesFilterModel {
+                    id: updatesModel
+                    packages: engine.systemController.packages
+                    updatesOnly: true
                 }
             }
-
-            Label {
-                Layout.fillWidth: true
-                color: Style.headerForegroundColor
-                text: d.configOverlay !== null ?
-                           qsTr("Configure main view")
-                         : swipeView.currentItem.item.title.length > 0 ? swipeView.currentItem.item.title : filteredContentModel.modelData(swipeView.currentIndex, "displayName")
-            }
-
             Repeater {
                 model: swipeView.currentItem.item.hasOwnProperty("headerButtons") ? swipeView.currentItem.item.headerButtons : 0
                 delegate: HeaderButton {
@@ -88,7 +119,6 @@ Page {
                 }
             }
         }
-
     }
 
     Connections {
@@ -204,71 +234,115 @@ Page {
         filterRoleName: "name"
     }
 
-    ColumnLayout {
-        id: mainColumn
+
+    Item {
+        id: contentContainer
         anchors.fill: parent
-        spacing: 0
+        clip: true
+//        visible: false
 
-        InfoPane {
-            Layout.fillWidth: true
-            shown: updatesModel.count > 0 || engine.systemController.updateRunning
-            text: engine.systemController.updateRunning ? qsTr("System update in progress...") : qsTr("%n system update(s) available", "", updatesModel.count)
-            imageSource: "../images/system-update.svg"
-            rotatingIcon: engine.systemController.updateRunning
-            onClicked: pageStack.push(Qt.resolvedUrl("system/SystemUpdatePage.qml"))
+        property int headerSize: 48
 
-            PackagesFilterModel {
-                id: updatesModel
-                packages: engine.systemController.packages
-                updatesOnly: true
-            }
-        }
+        readonly property int scrollOffset: swipeView.currentItem.item.contentY
+        readonly property int headerBlurSize: Math.min(headerSize, scrollOffset * 2)
 
-        Item {
-            id: contentContainer
-            Layout.fillWidth: true
-            Layout.fillHeight: true
-            clip: true
 
-            SwipeView {
-                id: swipeView
-                anchors.fill: parent
-                opacity: d.configOverlay === null ? 1 : 0
-                Behavior on opacity { NumberAnimation { duration: 200; easing.type: Easing.InOutQuad } }
+        SwipeView {
+            id: swipeView
+            anchors.fill: parent
+            opacity: d.configOverlay === null ? 1 : 0
+            Behavior on opacity { NumberAnimation { duration: 200; easing.type: Easing.InOutQuad } }
 
-                Repeater {
-                    model: d.configOverlay != null ? null : filteredContentModel
 
-                    delegate: Loader {
-                        width: swipeView.width
-                        height: swipeView.height
-                        clip: true
-                        source: "mainviews/" + model.source + ".qml"
+
+            Repeater {
+                model: d.configOverlay != null ? null : filteredContentModel
+
+                delegate: Loader {
+                    id: mainViewLoader
+                    width: swipeView.width
+                    height: swipeView.height
+                    clip: true
+                    source: "mainviews/" + model.source + ".qml"
+
+                    Binding {
+                        target: mainViewLoader.item
+                        property: "isCurrentItem"
+                        value: swipeView.currentIndex === index
+                    }
+
+                    Image {
+                        source: "qrc:/styles/%1/logo-wide.svg".arg(styleController.currentStyle)
+                        anchors {
+                            top: parent.top;
+                            topMargin: -contentContainer.scrollOffset + (contentContainer.headerSize - height) / 2
+                            horizontalCenter: parent.horizontalCenter;
+                        }
+                        fillMode: Image.PreserveAspectFit
+                        height: 28
                     }
-                }
-            }
 
-            ColumnLayout {
-                anchors { left: parent.left; right: parent.right; verticalCenter: parent.verticalCenter; margins: app.margins }
-                spacing: app.margins
-                visible: engine.thingManager.fetchingData
-                BusyIndicator {
-                    Layout.alignment: Qt.AlignHCenter
-                    running: parent.visible
-                }
-                Label {
-                    text: qsTr("Loading data...")
-                    font.pixelSize: app.largeFont
-                    Layout.fillWidth: true
-                    wrapMode: Text.WordWrap
-                    horizontalAlignment: Text.AlignHCenter
                 }
             }
         }
 
+        ColumnLayout {
+            anchors { left: parent.left; right: parent.right; verticalCenter: parent.verticalCenter; margins: app.margins }
+            spacing: app.margins
+            visible: engine.thingManager.fetchingData
+            BusyIndicator {
+                Layout.alignment: Qt.AlignHCenter
+                running: parent.visible
+            }
+            Label {
+                text: qsTr("Loading data...")
+                font.pixelSize: app.largeFont
+                Layout.fillWidth: true
+                wrapMode: Text.WordWrap
+                horizontalAlignment: Text.AlignHCenter
+            }
+        }
     }
+
+    ShaderEffectSource {
+        id: headerBlurSource
+        width: contentContainer.width
+        height: contentContainer.headerBlurSize
+        sourceItem: contentContainer
+        sourceRect: Qt.rect(0, 0, contentContainer.width, contentContainer.headerBlurSize)
+        visible: false
+    }
+
+    FastBlur {
+        anchors {
+            left: parent.left;
+            top: parent.top;
+            right: parent.right;
+        }
+        height: contentContainer.headerBlurSize
+        radius: 40
+        transparentBorder: true
+        source: headerBlurSource
+    }
+
+    Rectangle {
+        id: headerOpacityMask
+        anchors {
+            left: parent.left
+            top: parent.top
+            right: parent.right
+        }
+        height:  contentContainer.headerBlurSize
+
+        gradient: Gradient {
+            GradientStop { position: 0.1; color: Style.backgroundColor }
+            GradientStop { position: 0.6; color: Qt.rgba(Style.backgroundColor.r, Style.backgroundColor.g, Style.backgroundColor.b, 0.3) }
+            GradientStop { position: 1; color: "transparent" }
+        }
+    }
+
     footer: Item {
-        readonly property bool shown: tabsRepeater.count > 1 || mainHeader.menuOpen || d.configOverlay
+        readonly property bool shown: tabsRepeater.count > 1 || d.configOverlay
         implicitHeight: shown ? 64 + (app.landscape ? -20 : 0) : 0
         Behavior on implicitHeight { NumberAnimation { duration: 200; easing.type: Easing.InOutQuad }}
 
@@ -279,7 +353,7 @@ Page {
             Material.elevation: 3
             position: TabBar.Footer
 
-            opacity: (!mainHeader.menuOpen && !d.configOverlay) ? 1 : 0
+            opacity: d.configOverlay ? 0 : 1
             Behavior on opacity { NumberAnimation { duration: 200; easing.type: Easing.InOutQuad } }
 
             Repeater {
@@ -305,7 +379,7 @@ Page {
             Material.elevation: 3
             position: TabBar.Footer
 
-            opacity: mainHeader.menuOpen || d.configOverlay ? 1 : 0
+            opacity: d.configOverlay ? 1 : 0
             Behavior on opacity { NumberAnimation { duration: 200; easing.type: Easing.InOutQuad } }
             visible: opacity > 0
 
@@ -517,7 +591,7 @@ Page {
                     BigTile {
                         id: dndTile
                         anchors.fill: parent
-//                        anchors.margins: app.margins / 2
+                        //                        anchors.margins: app.margins / 2
                         Material.elevation: 2
 
                         leftPadding: 0
diff --git a/nymea-app/ui/SettingsPage.qml b/nymea-app/ui/SettingsPage.qml
index e234abfd..d03cd7b1 100644
--- a/nymea-app/ui/SettingsPage.qml
+++ b/nymea-app/ui/SettingsPage.qml
@@ -46,6 +46,7 @@ Page {
     Flickable {
         anchors.fill: parent
         contentHeight: layout.implicitHeight + (layout.isGrid ? app.margins * 2 : 0)
+        clip: true
 
         GridLayout {
             id: layout
diff --git a/nymea-app/ui/appsettings/AppSettingsPage.qml b/nymea-app/ui/appsettings/AppSettingsPage.qml
index 1a1ba0ef..e5dc6cdc 100644
--- a/nymea-app/ui/appsettings/AppSettingsPage.qml
+++ b/nymea-app/ui/appsettings/AppSettingsPage.qml
@@ -46,6 +46,7 @@ Page {
     Flickable {
         anchors.fill: parent
         contentHeight: layout.implicitHeight
+        clip: true
 
         GridLayout {
             id: layout
diff --git a/nymea-app/ui/components/MainViewBase.qml b/nymea-app/ui/components/MainViewBase.qml
index 718070e0..799b7d65 100644
--- a/nymea-app/ui/components/MainViewBase.qml
+++ b/nymea-app/ui/components/MainViewBase.qml
@@ -41,6 +41,11 @@ Item {
 
     property string title: ""
 
+    property bool isCurrentItem: false
+
+    property int topMargin: 40
+    property int contentY: 0 // Relative to topMargin
+
     property var headerButtons: []
 
     // Prevent scroll events to swipe left/right in case they fall through the grid
diff --git a/nymea-app/ui/components/NymeaHeader.qml b/nymea-app/ui/components/NymeaHeader.qml
index 95892ade..503d72c6 100644
--- a/nymea-app/ui/components/NymeaHeader.qml
+++ b/nymea-app/ui/components/NymeaHeader.qml
@@ -36,7 +36,7 @@ import Nymea 1.0
 
 Item {
     id: root
-    implicitHeight: toolBar.implicitHeight + infoPane.height
+    implicitHeight: layout.implicitHeight + infoPane.height
     property string text
     property alias backButtonVisible: backButton.visible
     property alias menuButtonVisible: menuButton.visible
@@ -59,14 +59,10 @@ Item {
         }
     }
 
-    ToolBar {
-        id: toolBar
-        Material.elevation: 3
-        anchors { left: parent.left; top: parent.top; right: parent.right }
 
         RowLayout {
             id: layout
-            anchors { fill: parent; leftMargin: app.margins; rightMargin: app.margins }
+            anchors { left: parent.left; top: parent.top; right: parent.right }
 
             HeaderButton {
                 id: menuButton
@@ -85,16 +81,17 @@ Item {
             Label {
                 id: label
                 Layout.fillWidth: true
+                Layout.maximumWidth: layout.width - x * 2
                 Layout.fillHeight: true
                 verticalAlignment: Text.AlignVCenter
-                font.pixelSize: app.mediumFont
+                horizontalAlignment: Text.AlignHCenter
                 elide: Text.ElideRight
                 text: root.text
-                visible: text.length > 0
-                color: Style.headerForegroundColor
+//                visible: text.length > 0
+                font: Style.bigFont
             }
         }
-    }
+
 
     Pane {
         id: infoPane
@@ -108,7 +105,7 @@ Item {
         visible: height > 0
         height: shown ? contentRow.implicitHeight : 0
         Behavior on height { NumberAnimation {} }
-        anchors { left: parent.left; top: toolBar.bottom; right: parent.right }
+        anchors { left: parent.left; top: layout.bottom; right: parent.right }
 
         padding: 0
         contentItem: Rectangle {
diff --git a/nymea-app/ui/components/NymeaSwipeDelegate.qml b/nymea-app/ui/components/NymeaSwipeDelegate.qml
index a955ed4a..581fa968 100644
--- a/nymea-app/ui/components/NymeaSwipeDelegate.qml
+++ b/nymea-app/ui/components/NymeaSwipeDelegate.qml
@@ -86,6 +86,11 @@ SwipeDelegate {
         property var finalContextOptions: root.contextOptions.concat(d.deleteContextOption)
     }
 
+    background: Item {
+        // SwipeDelegate has a background set to cover the swipe items. However, that messes with gradient backgrounds
+        // So we're removing the background and need to clip the swipe items instead
+    }
+
     contentItem: RowLayout {
         id: innerLayout
         spacing: app.margins
@@ -192,34 +197,57 @@ SwipeDelegate {
         }
     }
 
-    swipe.right: Row {
-        height: root.height
-        anchors.right: parent.right
-        width: height * d.finalContextOptions.count
-        Repeater {
-            model: d.finalContextOptions
+    swipe.right: swipeComponent
 
-            delegate: MouseArea {
-                height: root.height
-                width: height
-                property var entry: d.finalContextOptions[index]
-                visible: entry.hasOwnProperty("visible") ? entry.visible : true
-                Rectangle {
-                    anchors.fill: parent
-                    color: entry.hasOwnProperty("backgroundColor") ? entry.backgroundColor : "transparent"
+    Component {
+        id: swipeComponent
+        Item {
+            height: parent.height
+            width: height * d.finalContextOptions.length
+            anchors.right: parent.right
+            Item {
+                anchors {
+                    top: parent.top
+                    right: parent.right
+                    bottom: parent.bottom
                 }
+                width: parent.width * -swipe.position
+                clip: true
 
-                ColorIcon {
-                    anchors.fill: parent
-                    anchors.margins: app.margins
-                    name: entry.icon
-                    color: entry.hasOwnProperty("foregroundColor") ? entry.foregroundColor : Style.iconColor
-                }
-                onClicked: {
-                    swipe.close();
-                    entry.callback()
+                Row {
+                    anchors {
+                        top: parent.top
+                        right: parent.right
+                        bottom: parent.bottom
+                    }
+                    Repeater {
+                        model: d.finalContextOptions
+
+                        delegate: MouseArea {
+                            height: root.height
+                            width: height
+                            property var entry: d.finalContextOptions[index]
+                            visible: entry.hasOwnProperty("visible") ? entry.visible : true
+                            Rectangle {
+                                anchors.fill: parent
+                                color: entry.hasOwnProperty("backgroundColor") ? entry.backgroundColor : "transparent"
+                            }
+
+                            ColorIcon {
+                                anchors.fill: parent
+                                anchors.margins: app.margins
+                                name: entry.icon
+                                color: entry.hasOwnProperty("foregroundColor") ? entry.foregroundColor : Style.iconColor
+                            }
+                            onClicked: {
+                                swipe.close();
+                                entry.callback()
+                            }
+                        }
+                    }
                 }
             }
+
         }
     }
 
diff --git a/nymea-app/ui/components/SettingsPageBase.qml b/nymea-app/ui/components/SettingsPageBase.qml
index 285f99f9..9c7215f6 100644
--- a/nymea-app/ui/components/SettingsPageBase.qml
+++ b/nymea-app/ui/components/SettingsPageBase.qml
@@ -50,6 +50,7 @@ Page {
         anchors.fill: parent
         contentHeight: contentColumn.height + app.margins
         interactive: contentHeight > height
+        clip: true
 
         ScrollBar.vertical: ScrollBar {}
 
diff --git a/nymea-app/ui/devicelistpages/ClosablesThingsListPage.qml b/nymea-app/ui/devicelistpages/ClosablesThingsListPage.qml
index 3ed3c549..09bcaffd 100644
--- a/nymea-app/ui/devicelistpages/ClosablesThingsListPage.qml
+++ b/nymea-app/ui/devicelistpages/ClosablesThingsListPage.qml
@@ -84,6 +84,7 @@ ThingsListPageBase {
         anchors.fill: parent
         contentHeight: contentGrid.implicitHeight
         topMargin: app.margins / 2
+        clip: true
 
         GridLayout {
             id: contentGrid
diff --git a/nymea-app/ui/devicelistpages/GarageThingsListPage.qml b/nymea-app/ui/devicelistpages/GarageThingsListPage.qml
index ea2c0809..919c1843 100644
--- a/nymea-app/ui/devicelistpages/GarageThingsListPage.qml
+++ b/nymea-app/ui/devicelistpages/GarageThingsListPage.qml
@@ -57,6 +57,7 @@ ThingsListPageBase {
         anchors.fill: parent
         contentHeight: contentGrid.implicitHeight
         topMargin: app.margins / 2
+        clip: true
 
         GridLayout {
             id: contentGrid
diff --git a/nymea-app/ui/devicelistpages/GenericThingsListPage.qml b/nymea-app/ui/devicelistpages/GenericThingsListPage.qml
index ea2c0809..919c1843 100644
--- a/nymea-app/ui/devicelistpages/GenericThingsListPage.qml
+++ b/nymea-app/ui/devicelistpages/GenericThingsListPage.qml
@@ -57,6 +57,7 @@ ThingsListPageBase {
         anchors.fill: parent
         contentHeight: contentGrid.implicitHeight
         topMargin: app.margins / 2
+        clip: true
 
         GridLayout {
             id: contentGrid
diff --git a/nymea-app/ui/devicelistpages/LightThingsListPage.qml b/nymea-app/ui/devicelistpages/LightThingsListPage.qml
index 040bb43e..884dbe39 100644
--- a/nymea-app/ui/devicelistpages/LightThingsListPage.qml
+++ b/nymea-app/ui/devicelistpages/LightThingsListPage.qml
@@ -75,6 +75,7 @@ ThingsListPageBase {
         anchors.fill: parent
         contentHeight: contentGrid.implicitHeight
         topMargin: app.margins / 2
+        clip: true
 
         GridLayout {
             id: contentGrid
diff --git a/nymea-app/ui/devicelistpages/MediaDeviceListPage.qml b/nymea-app/ui/devicelistpages/MediaDeviceListPage.qml
index 6f4f1695..a31b9492 100644
--- a/nymea-app/ui/devicelistpages/MediaDeviceListPage.qml
+++ b/nymea-app/ui/devicelistpages/MediaDeviceListPage.qml
@@ -48,6 +48,7 @@ ThingsListPageBase {
         anchors.fill: parent
         contentHeight: contentGrid.implicitHeight
         topMargin: app.margins / 2
+        clip: true
 
         GridLayout {
             id: contentGrid
diff --git a/nymea-app/ui/devicelistpages/PowerSocketsDeviceListPage.qml b/nymea-app/ui/devicelistpages/PowerSocketsDeviceListPage.qml
index faface99..c2ac46b6 100644
--- a/nymea-app/ui/devicelistpages/PowerSocketsDeviceListPage.qml
+++ b/nymea-app/ui/devicelistpages/PowerSocketsDeviceListPage.qml
@@ -51,6 +51,7 @@ ThingsListPageBase {
         anchors.fill: parent
         contentHeight: contentGrid.implicitHeight
         topMargin: app.margins / 2
+        clip: true
 
         GridLayout {
             id: contentGrid
diff --git a/nymea-app/ui/devicelistpages/SensorsDeviceListPage.qml b/nymea-app/ui/devicelistpages/SensorsDeviceListPage.qml
index 078d8d8b..196b3a01 100644
--- a/nymea-app/ui/devicelistpages/SensorsDeviceListPage.qml
+++ b/nymea-app/ui/devicelistpages/SensorsDeviceListPage.qml
@@ -47,6 +47,7 @@ ThingsListPageBase {
         anchors.fill: parent
         contentHeight: contentGrid.implicitHeight
         topMargin: app.margins / 2
+        clip: true
 
         GridLayout {
             id: contentGrid
diff --git a/nymea-app/ui/devicelistpages/SmartMeterDeviceListPage.qml b/nymea-app/ui/devicelistpages/SmartMeterDeviceListPage.qml
index 898cc0a5..018591d9 100644
--- a/nymea-app/ui/devicelistpages/SmartMeterDeviceListPage.qml
+++ b/nymea-app/ui/devicelistpages/SmartMeterDeviceListPage.qml
@@ -47,6 +47,7 @@ ThingsListPageBase {
         anchors.fill: parent
         contentHeight: contentGrid.implicitHeight
         topMargin: app.margins / 2
+        clip: true
 
         GridLayout {
             id: contentGrid
diff --git a/nymea-app/ui/devicelistpages/WeatherDeviceListPage.qml b/nymea-app/ui/devicelistpages/WeatherDeviceListPage.qml
index 8bf463a5..f0654c8b 100644
--- a/nymea-app/ui/devicelistpages/WeatherDeviceListPage.qml
+++ b/nymea-app/ui/devicelistpages/WeatherDeviceListPage.qml
@@ -48,6 +48,7 @@ ThingsListPageBase {
         anchors.fill: parent
         contentHeight: contentGrid.implicitHeight
         topMargin: app.margins / 2
+        clip: true
 
         GridLayout {
             id: contentGrid
diff --git a/nymea-app/ui/magic/ScriptsPage.qml b/nymea-app/ui/magic/ScriptsPage.qml
index b5b14ee1..43f41e29 100644
--- a/nymea-app/ui/magic/ScriptsPage.qml
+++ b/nymea-app/ui/magic/ScriptsPage.qml
@@ -81,6 +81,7 @@ Page {
 
         EmptyViewPlaceholder {
             anchors.centerIn: parent
+            width: parent.width - app.margins * 2
             title: qsTr("No scripts are installed yet.")
             text: qsTr("Press \"Add script\" to get started.")
             imageSource: "../images/script.svg"
diff --git a/nymea-app/ui/mainviews/DashboardView.qml b/nymea-app/ui/mainviews/DashboardView.qml
index d2047cfe..e33d7384 100644
--- a/nymea-app/ui/mainviews/DashboardView.qml
+++ b/nymea-app/ui/mainviews/DashboardView.qml
@@ -41,6 +41,8 @@ import "dashboard"
 MainViewBase {
     id: root
 
+    contentY: dashboard.contentY
+
     headerButtons: [
         {
             iconSource: "/ui/images/configure.svg",
@@ -85,6 +87,9 @@ MainViewBase {
     Dashboard {
         id: dashboard
         anchors.fill: parent
+        anchors.topMargin: root.topMargin
+
         model: dashboardModel
+        dashboardVisible: root.isCurrentItem
     }
 }
diff --git a/nymea-app/ui/mainviews/EnergyView.qml b/nymea-app/ui/mainviews/EnergyView.qml
index 8805af14..317906df 100644
--- a/nymea-app/ui/mainviews/EnergyView.qml
+++ b/nymea-app/ui/mainviews/EnergyView.qml
@@ -40,6 +40,8 @@ import "../delegates"
 MainViewBase {
     id: root
 
+    contentY: flickable.contentY + topMargin
+
     ThingsProxy {
         id: energyMeters
         engine: _engine
@@ -61,10 +63,12 @@ MainViewBase {
 
 
     Flickable {
+        id: flickable
         anchors.fill: parent
         anchors.margins: app.margins / 2
         contentHeight: energyGrid.childrenRect.height
         visible: energyMeters.count > 0
+        topMargin: root.topMargin
 
 
         GridLayout {
@@ -85,10 +89,24 @@ MainViewBase {
                 visible: consumers.count > 0
             }
 
+            SmartMeterChart {
+                Layout.fillWidth: true
+                Layout.preferredHeight: width * .7
+                backgroundColor: Style.tileBackgroundColor
+                backgroundRoundness: Style.cornerRadius
+                rootMeter: root.rootMeter
+                meters: producers
+                title: qsTr("Total produced energy")
+                stateName: "totalEnergyProduced"
+                readonly property State totalProducedState: rootMeter ? rootMeter.stateByName("totalEnergyProduced") : null
+                visible: (rootMeterTotalEnergyState && rootMeterTotalEnergyState.value > 0) || producers.count > 0
+            }
+
             ChartView {
                 id: chartView
                 Layout.fillWidth: true
 //                Layout.preferredWidth: energyGrid.width / energyGrid.columns
+                Layout.columnSpan: energyGrid.columns
                 Layout.preferredHeight: width * .7
                 legend.alignment: Qt.AlignBottom
                 legend.font.pixelSize: app.smallFont
@@ -431,21 +449,8 @@ MainViewBase {
                             scrollMouseArea.scrollRightLimited(10)
                         }
                     }
-
                 }
             }
-
-            SmartMeterChart {
-                Layout.fillWidth: true
-                Layout.preferredHeight: width * .7
-                backgroundColor: Style.tileBackgroundColor
-                backgroundRoundness: Style.cornerRadius
-                rootMeter: root.rootMeter
-                meters: producers
-                title: qsTr("Total produced energy")
-                stateName: "totalEnergyProduced"
-                visible: root.rootMeter || producers.count > 0
-            }
         }
     }
 
diff --git a/nymea-app/ui/mainviews/FavoritesView.qml b/nymea-app/ui/mainviews/FavoritesView.qml
index 284972a4..c819349c 100644
--- a/nymea-app/ui/mainviews/FavoritesView.qml
+++ b/nymea-app/ui/mainviews/FavoritesView.qml
@@ -38,6 +38,7 @@ import "../delegates"
 
 MainViewBase {
     id: root
+    contentY: gridView.contentY - gridView.originY + topMargin
 
     property bool editMode: false
 
@@ -51,6 +52,7 @@ MainViewBase {
         id: gridView
         anchors.fill: parent
         anchors.margins: app.margins / 2
+        topMargin: root.topMargin
         readonly property int minTileWidth: 172
         readonly property int tilesPerRow: root.width / minTileWidth
 
diff --git a/nymea-app/ui/mainviews/GaragesView.qml b/nymea-app/ui/mainviews/GaragesView.qml
index 48c89bc7..7b6a3b5f 100644
--- a/nymea-app/ui/mainviews/GaragesView.qml
+++ b/nymea-app/ui/mainviews/GaragesView.qml
@@ -50,6 +50,7 @@ MainViewBase {
     SwipeView {
         id: swipeView
         anchors.fill: parent
+        anchors.topMargin: root.topMargin
         anchors.bottomMargin: pageIndicator.visible ? pageIndicator.height : 0
 
         Repeater {
diff --git a/nymea-app/ui/mainviews/GroupsView.qml b/nymea-app/ui/mainviews/GroupsView.qml
index 70aa0270..bb0f280d 100644
--- a/nymea-app/ui/mainviews/GroupsView.qml
+++ b/nymea-app/ui/mainviews/GroupsView.qml
@@ -37,12 +37,13 @@ import "../components"
 
 MainViewBase {
     id: root
+    contentY: groupsGridView.contentY - groupsGridView.originY + topMargin
 
     GridView {
         id: groupsGridView
         anchors.fill: parent
         anchors.margins: app.margins / 2
-
+        topMargin: root.topMargin
 
         readonly property int minTileWidth: 172
         readonly property int tilesPerRow: root.width / minTileWidth
diff --git a/nymea-app/ui/mainviews/ScenesView.qml b/nymea-app/ui/mainviews/ScenesView.qml
index 814106df..7ed31e94 100644
--- a/nymea-app/ui/mainviews/ScenesView.qml
+++ b/nymea-app/ui/mainviews/ScenesView.qml
@@ -38,10 +38,13 @@ import "../components"
 MainViewBase {
     id: root
 
+    contentY: interfacesGridView.contentY - interfacesGridView.originY + topMargin
+
     GridView {
         id: interfacesGridView
         anchors.fill: parent
         anchors.margins: app.margins / 2
+        topMargin: root.topMargin
 
         readonly property int minTileWidth: 172
         readonly property int tilesPerRow: root.width / minTileWidth
diff --git a/nymea-app/ui/mainviews/ThingsView.qml b/nymea-app/ui/mainviews/ThingsView.qml
index a076232d..15f122a4 100644
--- a/nymea-app/ui/mainviews/ThingsView.qml
+++ b/nymea-app/ui/mainviews/ThingsView.qml
@@ -38,6 +38,7 @@ import "../delegates"
 
 MainViewBase {
     id: root
+    contentY: interfacesGridView.contentY - interfacesGridView.originY + topMargin
 
     InterfacesSortModel {
         id: mainModel
@@ -55,6 +56,7 @@ MainViewBase {
         id: interfacesGridView
         anchors.fill: parent
         anchors.margins: app.margins / 2
+        topMargin: root.topMargin
         model: mainModel
 
         readonly property int minTileWidth: 172
diff --git a/nymea-app/ui/mainviews/dashboard/Dashboard.qml b/nymea-app/ui/mainviews/dashboard/Dashboard.qml
index 3303aa1c..e3e9a4e5 100644
--- a/nymea-app/ui/mainviews/dashboard/Dashboard.qml
+++ b/nymea-app/ui/mainviews/dashboard/Dashboard.qml
@@ -42,6 +42,9 @@ Item {
 
     property var model: null
     property bool editMode: false
+    property bool dashboardVisible: false
+
+    property int contentY: flickable.contentY - flickable.originY
 
     function addItem(index) {
         if (index === undefined) {
@@ -125,6 +128,11 @@ Item {
                         property: "editMode"
                         value: root.editMode
                     }
+                    Binding {
+                        target: loader.item
+                        property: "dashboardVisible"
+                        value: root.dashboardVisible
+                    }
                     Binding {
                         target: loader.item
                         property: "bottomClip"
diff --git a/nymea-app/ui/mainviews/dashboard/DashboardDelegateBase.qml b/nymea-app/ui/mainviews/dashboard/DashboardDelegateBase.qml
index 27850f0e..b233c867 100644
--- a/nymea-app/ui/mainviews/dashboard/DashboardDelegateBase.qml
+++ b/nymea-app/ui/mainviews/dashboard/DashboardDelegateBase.qml
@@ -50,6 +50,7 @@ Item {
 
     property bool editMode: false
 
+    property bool dashboardVisible: false
     property int topClip: 0
     property int bottomClip: 0
 
diff --git a/nymea-app/ui/mainviews/dashboard/DashboardWebViewDelegate.qml b/nymea-app/ui/mainviews/dashboard/DashboardWebViewDelegate.qml
index 3fee6313..d15b9115 100644
--- a/nymea-app/ui/mainviews/dashboard/DashboardWebViewDelegate.qml
+++ b/nymea-app/ui/mainviews/dashboard/DashboardWebViewDelegate.qml
@@ -69,7 +69,7 @@ DashboardDelegateBase {
         // clever in resizing and hding...
         property bool needsHack: ["android", "ios", "osx"].indexOf(Qt.platform.os) >= 0
         property bool webViewVisible: !needsHack ||
-                     (!app.mainMenu.visible && !root.editMode && root.topClip < root.height && root.bottomClip < height && !pageStack.busy)
+                     (!app.mainMenu.visible && !root.editMode && root.topClip < root.height && root.bottomClip < height && !pageStack.busy && root.dashboardVisible)
 
         property int topClip: needsHack ? root.topClip : 0
         property int bottomClip: needsHack ? root.bottomClip : 0
@@ -134,7 +134,7 @@ DashboardDelegateBase {
             visible: !parent.webViewVisible
 
             ColorIcon {
-                anchors.horizontalCenter: parent.horizontalCenter
+                Layout.alignment: Qt.AlignHCenter
                 size: Style.largeIconSize
                 name: "stock_website"
                 color: Style.accentColor