Qt5 qml gui - POC update (#263)R7602

* Adding qt5/qml2 UI proof of concept

* Code cleanup

* Minor cleanup

* Apply coding style by clang-format -style=WebKit

For better diff tracking, I applied coding style once more.

* Removed useless QtQuick.Controls dependency

* QML2 : Minor work around POIs

* QML2 : Use real POIs icons

* More minor work around POIs.

This commit adds a draft of POI display, and the possibility to set a POI as destination.
Also sets the current position to wherever we clicked on the map, to simulate routing using the Demo vehicle

* Renamed default skin to 'modern'

This will allow us to easily create other skins and make the skin to load configurable

* Added town search capability

* Resize the QNavitQuick object when exiting the menu

* Minor work on the qml2 gui

* Implemented street search

* Disabled virtual keyboard until it's ready

* More modular default country code

* Block draw operations when displaying the menu

* Removed useless QML ressources

47 files changed, 2091 insertions, 199 deletions

diff --git a/navit/gui/qt5_qml/CMakeLists.txt b/navit/gui/qt5_qml/CMakeLists.txt
index c91a2d394..052a112f4 100644
--- a/navit/gui/qt5_qml/CMakeLists.txt
+++ b/navit/gui/qt5_qml/CMakeLists.txt
@@ -5,4 +5,4 @@ set(CMAKE_AUTOMOC ON)
 
 qt5_add_resources(GUI_QT5_QML_QRC "gui_qt5_qml.qrc")
 
-module_add_library(gui_qt5_qml gui_qt5_qml.cpp ${GUI_QT5_QML_QRC} backend.cpp qml_map.cpp qml_poi.cpp)
+module_add_library(gui_qt5_qml gui_qt5_qml.cpp ${GUI_QT5_QML_QRC} backend.cpp qml_map.cpp qml_poi.cpp qml_search.cpp proxy.c)
\ No newline at end of file
diff --git a/navit/gui/qt5_qml/backend.cpp b/navit/gui/qt5_qml/backend.cpp
index 89e92ffa9..14cdd4ddf 100644
--- a/navit/gui/qt5_qml/backend.cpp
+++ b/navit/gui/qt5_qml/backend.cpp
@@ -1,135 +1,463 @@
+#include <glib.h>
+
 #include "item.h"
 #include "attr.h"
 #include "navit.h"
+#include "xmlconfig.h" // for NAVIT_OBJECT
+#include "layout.h"
 #include "map.h"
-#include "glib.h"
 #include "transform.h"
 #include "backend.h"
 
 #include "qml_map.h"
 #include "qml_poi.h"
+#include "qml_search.h"
 
 #include "mapset.h"
 
 #include <QQmlContext>
 
+#include "search.h"
+
+extern "C" {
+#include "proxy.h"
+}
 
 Backend::Backend(QObject * parent):QObject(parent)
 {
 }
 
-void
- Backend::showMenu(struct point *p)
+/**
+ * @brief Set some variables and display the main menu
+ * @param struct point *p the point coordinate where we clicked on the screen
+ * @returns nothing
+ */
+void Backend::showMenu(struct point *p)
 {
-	struct coord co;
+        struct coord co;
+
+        transform_reverse(navit_get_trans(nav), p, &co);
+        dbg(lvl_debug, "Point 0x%x 0x%x\n", co.x, co.y);
+        dbg(lvl_debug, "Screen coord : %d %d\n", p->x, p->y);
+        transform_to_geo(transform_get_projection(navit_get_trans(nav)), &co, &(this->g));
+        dbg(lvl_debug, "%f %f\n", this->g.lat, this->g.lng);
+        dbg(lvl_debug, "%p %p\n", nav, &c);
+        this->c.pro = transform_get_projection(navit_get_trans(nav));
+        this->c.x = co.x;
+        this->c.y = co.y;
+        dbg(lvl_debug, "c : %x %x\n", this->c.x, this->c.y);
 
-	transform_reverse(navit_get_trans(nav), p, &co);
-	dbg(lvl_debug, "Point 0x%x 0x%x\n", co.x, co.y);
-	dbg(lvl_debug, "Screen coord : %d %d\n", p->x, p->y);
-	transform_to_geo(transform_get_projection(navit_get_trans(nav)), &co, &(this->g));
-	dbg(lvl_debug, "%f %f\n", this->g.lat, this->g.lng);
-	dbg(lvl_debug, "%p %p\n", nav, &c);
-	this->c.pro = transform_get_projection(navit_get_trans(nav));
-	this->c.x = co.x;
-	this->c.y = co.y;
-	dbg(lvl_debug, "c : %x %x\n", this->c.x, this->c.y);
+        // As a test, set the Demo vehicle position to wherever we just clicked
+        navit_set_position(this->nav, &c);
+        navit_block(this->nav, 1);
+        emit displayMenu("MainMenu.qml");
+}
+
+/**
+ * @brief update the private m_maps list. Expected to be called from QML
+ * @param none
+ * @returns nothing
+ */ 
+void Backend::get_maps()
+{
+        struct attr attr, on, off, description, type, data, active;
+        char * label;
+        bool is_active;
+        struct attr_iter * iter;
+        _maps.clear();
 
-	emit displayMenu();
+        iter = navit_attr_iter_new();
+        on.type = off.type = attr_active;
+        on.u.num = 1;
+        off.u.num = 0;
+        while (navit_get_attr(this->nav, attr_map, &attr, iter)) {
+                if (map_get_attr(attr.u.map, attr_description, &description, NULL)) {
+                        label = g_strdup(description.u.str);
+                } else {
+                        if (!map_get_attr(attr.u.map, attr_type, &type, NULL))
+                                type.u.str = "";
+                        if (!map_get_attr(attr.u.map, attr_data, &data, NULL))
+                                data.u.str = "";
+                        label = g_strdup_printf("%s:%s", type.u.str, data.u.str);
+                }
+                is_active = false;
+                if (map_get_attr(attr.u.map, attr_active, &active, NULL)) {
+                        if (active.u.num == 1) {
+                                is_active = true;
+                        }
+                }
+                _maps.append(new MapObject(label, is_active));
+        }
+        emit mapsChanged();
 }
 
-void
- Backend::list_maps(int cause)
+/**
+ * @brief set a pointer to the struct navit * for local use
+ * @param none
+ * @returns nothing
+ */ 
+void Backend::set_navit(struct navit *nav)
 {
-	struct attr attr, on, off, description, type, data, active;
-	char * label;
-	bool is_active;
-	struct attr_iter * iter;
-	QList < QObject * >dataList;
-
-	iter = navit_attr_iter_new();
-	on.type = off.type = attr_active;
-	on.u.num = 1;
-	off.u.num = 0;
-	while (navit_get_attr(this->nav, attr_map, &attr, iter)) {
-		if (map_get_attr(attr.u.map, attr_description, &description, NULL)) {
-			label = g_strdup(description.u.str);
-		} else {
-			if (!map_get_attr(attr.u.map, attr_type, &type, NULL))
-				type.u.str = "";
-			if (!map_get_attr(attr.u.map, attr_data, &data, NULL))
-				data.u.str = "";
-			label = g_strdup_printf("%s:%s", type.u.str, data.u.str);
-		}
-		is_active = false;
-		if (map_get_attr(attr.u.map, attr_active, &active, NULL)) {
-			if (active.u.num == 1) {
-				is_active = true;
-			}
-		}
-		dataList.append(new MapObject(label, is_active));
-	}
-
-	this->engine->rootContext()->setContextProperty("maps", QVariant::fromValue(dataList));
-
-}
-
-void
- Backend::set_navit(struct navit *nav)
+        this->nav = nav;
+}
+
+/**
+ * @brief set a pointer to the QQmlApplicationEngine * for local use
+ * @param none
+ * @returns nothing
+ */ 
+void Backend::set_engine(QQmlApplicationEngine * engine)
 {
-	this->nav = nav;
+        this->engine = engine;
 }
 
-void
- Backend::set_engine(QQmlApplicationEngine * engine)
+/**
+ * @brief apply search filters on one specific item
+ * @param struct item * the item to filter
+ * @returns 0 if the item should be discarded, 1 otherwise
+ */ 
+int Backend::filter_pois(struct item *item)
 {
-	this->engine = engine;
+        enum item_type *types;
+        enum item_type type=item->type;
+        if (type >= type_line)
+                return 0;
+        return 1;
 }
 
-void
- Backend::get_pois()
+/**
+ * @brief update the private m_pois list. Expected to be called from QML
+ * @param none
+ * @returns nothing
+ */ 
+void Backend::get_pois()
 {
+        struct map_selection * sel, * selm;
+        struct coord c, center;
+        struct mapset_handle * h;
+        struct map * m;
+        struct map_rect * mr;
+        struct item * item;
+        enum projection pro = this->c.pro;
+        int idist, dist;
+        _pois.clear();
+        dist = 10000;
+        sel = map_selection_rect_new(&(this->c), dist * transform_scale(abs(this->c.y) + dist * 1.5), 18);
+        center.x = this->c.x;
+        center.y = this->c.y;
+
+        dbg(lvl_debug, "center is at %x, %x\n", center.x, center.y);
+
+        h = mapset_open(navit_get_mapset(this->nav));
+        while ((m = mapset_next(h, 1))) {
+                selm = map_selection_dup_pro(sel, pro, map_projection(m));
+                mr = map_rect_new(m, selm);
+                dbg(lvl_debug, "mr=%p\n", mr);
+                if (mr) {
+                        while ((item = map_rect_get_item(mr))) {
+                                if ( filter_pois(item) &&
+                                                item_coord_get_pro(item, &c, 1, pro) &&
+                                                coord_rect_contains(&sel->u.c_rect, &c)  &&
+                                                (idist=transform_distance(pro, &center, &c)) < dist) {
+
+                                        struct attr attr;
+                                        char * label;
+                                        char * icon = get_icon(this->nav, item);
+                                        struct pcoord item_coord;
+                                        item_coord.pro = transform_get_projection(navit_get_trans(nav));
+                                        item_coord.x = c.x;
+                                        item_coord.y = c.y;
+
+                                        idist = transform_distance(pro, &center, &c);
+                                        if (item_attr_get(item, attr_label, &attr)) {
+                                                label = map_convert_string(item->map, attr.u.str);
+                                                if (icon) {
+                                                        _pois.append(new PoiObject(label, item_to_name(item->type), idist, icon, item_coord));
+                                                }
+                                        }
+                                }
+                        }
+                        map_rect_destroy(mr);
+                }
+                map_selection_destroy(selm);
+        }
+        map_selection_destroy(sel);
+        mapset_close(h);
+        emit poisChanged();
+}
+
+/**
+ * @brief get the POIs as a QList
+ * @param none
+ * @returns the pois QList
+ */ 
+QQmlListProperty<QObject> Backend::getPois(){
+        return QQmlListProperty<QObject>(this, _pois);
+}
+
+/**
+ * @brief get the maps as a QList
+ * @param none
+ * @returns the maps QList
+ */ 
+QQmlListProperty<QObject> Backend::getMaps(){
+        return QQmlListProperty<QObject>(this, _maps);
+}
+
+/**
+ * @brief get the search results as a QList
+ * @param none
+ * @returns the search results QList
+ */ 
+QQmlListProperty<QObject> Backend::getSearchResults(){
+        return QQmlListProperty<QObject>(this, _search_results);
+}
+
+/**
+ * @brief get the active POI. Used when displaying the relevant menu
+ * @param none
+ * @returns the active POI
+ */ 
+PoiObject * Backend::activePoi() {
+        dbg(lvl_debug, "name : %s\n", m_activePoi->name().toUtf8().data());
+        dbg(lvl_debug, "type : %s\n", m_activePoi->type().toLatin1().data());
+        return m_activePoi;
+}
+
+void Backend::block_draw(){
+        navit_block(this->nav, 1);
+        dbg(lvl_debug, "Draw operations blocked per UI request\n");
+}
+
+/**
+ * @brief set the canvas size to use when drawing the map
+ * @param int width
+ * @param int height
+ * @returns nothing
+ */ 
+void Backend::resize(int width, int height){
+        // If we need to resize the canvas, it means that something (the main map,
+        // or a menu item) wants to display a map. Ensure that draw operations
+        // are not blocked then.
+        navit_block(this->nav, -1);
+        navit_handle_resize(nav, width, height);
+}
+
+/**
+ * @brief set the active POI. Used when clicking on a POI list to display one single POI
+ * @param int index the index of the POI in the m_pois list
+ * @returns nothing
+ */ 
+void Backend::setActivePoi(int index) {
+        struct pcoord c;
+        m_activePoi = (PoiObject *)_pois.at(index);
+        c = m_activePoi->coords();
+        resize(320, 240);
+        navit_set_center(this->nav, &c, 1);
+        emit activePoiChanged();
+}
 
-	struct map_selection * sel, * selm;
-	struct coord c, center;
-	struct mapset_handle * h;
-	struct map * m;
-	struct map_rect * mr;
-	struct item * item;
-	enum projection pro = this->c.pro;
-	int idist, dist;
-
-	QList < QObject * >dataList;
-
-	sel = map_selection_rect_new(&(this->c), dist * transform_scale(abs(this->c.y) + dist * 1.5), 18);
-	center.x = this->c.x;
-	center.y = this->c.y;
-
-	dbg(lvl_debug, "center is at %x, %x\n", center.x, center.y);
-
-	h = mapset_open(navit_get_mapset(this->nav));
-	while ((m = mapset_next(h, 1))) {
-		selm = map_selection_dup_pro(sel, pro, map_projection(m));
-		mr = map_rect_new(m, selm);
-		dbg(lvl_debug, "mr=%p\n", mr);
-		if (mr) {
-			while ((item = map_rect_get_item(mr))) {
-				struct attr
-				    attr;
-				char *
-				    label;
-				idist = transform_distance(pro, &center, &c);
-				if (item_attr_get(item, attr_label, &attr)) {
-					label = map_convert_string(item->map, attr.u.str);
-					dataList.append(new PoiObject(label, true, idist));
-				}
-			}
-			map_rect_destroy(mr);
-		}
-		map_selection_destroy(selm);
-	}
-	map_selection_destroy(sel);
-	mapset_close(h);
-
-	this->engine->rootContext()->setContextProperty("pois", QVariant::fromValue(dataList));
+/**
+ * @brief returns the icon (xpm) absolute path
+ * @param none
+ * @returns the icon (xpm) absolute path as a QString
+ */ 
+QString Backend::get_icon_path(){
+        return QString(g_strjoin(NULL,"file://",getenv("NAVIT_SHAREDIR"),"/xpm/",NULL));
+}
+
+/**
+ * @brief set the destination using the currently active POI's coordinates
+ * @param none
+ * @returns nothing
+ */ 
+void Backend::setActivePoiAsDestination(){
+        struct pcoord c;
+        c = m_activePoi->coords();
+        dbg(lvl_debug, "Destination : %s c=%d:0x%x,0x%x\n",
+                        m_activePoi->name().toUtf8().data(),
+                        c.pro, c.x, c.y);
+        navit_set_destination(this->nav, &c,  m_activePoi->name().toUtf8().data(), 1);
+        emit hideMenu();
+}
+
+/**
+ * @brief save the search result for the next search step
+ * @param int index the index of the result in the m_search_results list
+ * @returns nothing
+ */ 
+void Backend::searchValidateResult(int index){
+        SearchObject * r = (SearchObject *)_search_results.at(index);
+        dbg(lvl_debug, "Saving %s [%i] %x %x\n", 
+                        r->name().toUtf8().data(),
+                        index, r->getCoords()->x, r->getCoords()->y);
+        if (_search_context == attr_country_all) {
+                _current_country = g_strdup(r->name().toUtf8().data());
+                _current_town = NULL;
+                _current_street = NULL;
+        } else if (_search_context == attr_town_name) {
+                _current_town = g_strdup(r->name().toUtf8().data());
+                _current_street = NULL;
+        } else if (_search_context == attr_street_name) {
+                _current_street = g_strdup(r->name().toUtf8().data());
+        } else {
+                dbg(lvl_error, "Unknown search context for '%s'\n", r->name().toUtf8().data());
+        }
+        // navit_set_center(this->nav, r->getCoords(), 1);
+        emit displayMenu("destination_address.qml");
+}
+
+/**
+ * @brief get the icon that matches the country currently used for searches
+ * @param none
+ * @returns an absolute path for the country icon
+ */ 
+QString Backend::get_country_icon(char * country_iso_code){
+//        if ( country_iso_code == "" ) {
+//                country_iso_code = _country_iso2;
+//        }
+        return QString(g_strjoin(NULL,"file://",getenv("NAVIT_SHAREDIR"),"/xpm/",country_iso_code,".svg",NULL));
+}
+
+
+static struct search_param {
+        struct navit *nav;
+        struct mapset *ms;
+        struct search_list *sl;
+        struct attr attr;
+        int partial;
+        void *entry_country, *entry_postal, *entry_city, *entry_district;
+        void *entry_street, *entry_number;
+} search_param;
+
+/**
+  * @brief set the default country
+  * @param none
+  * returns nothing
+  */
+void Backend::set_default_country(){
+        _current_country = "Germany";
+        _country_iso2 = "DE";
+}
+
+
+/**
+ * @brief update the current search results according to new inputs. Currently only works to search for towns
+ * @param QString text the text to search for
+ * @returns nothing
+ */ 
+void Backend::updateSearch(QString text){
+        struct search_list_result *res;
+        struct attr search_attr;
+
+        if (search == NULL){
+                search=&search_param;
+                dbg(lvl_debug, "search = %p\n", search);
+                search->nav=this->nav;
+                search->ms=navit_get_mapset(this->nav);
+                search->sl=search_list_new(search->ms);
+                search->partial = 1;
+                if ( _country_iso2 == NULL ){
+                        set_default_country();
+                }
+                dbg(lvl_debug,"attempting to use country '%s'\n", _country_iso2);
+                search_attr.type=attr_country_iso2;
+                search_attr.u.str=_country_iso2;
+                search_list_search(search->sl, &search_attr, 0);
+
+                while((res=search_list_get_result(search->sl)));
+        }
+
+        _search_results.clear();
+        //  search->attr.type=attr_country_all;
+        //  search->attr.type=attr_town_postal;
+        //  search->attr.type=attr_town_name;
+        //  search->attr.type=attr_street_name;
+
+//        search->attr.type=attr_town_name;
+//        search->attr.u.str="Oberhaching";
+//        search_list_search(search->sl, &search->attr, search->partial);
+//        while((res=search_list_get_result(search->sl)));
+
+        search->attr.u.str = text.toUtf8().data();
+        dbg(lvl_error, "searching for %s partial %d\n", search->attr.u.str, search->partial);
+
+        search->attr.type = _search_context;
+        search_list_search(search->sl, &search->attr, search->partial);
+        int count = 0;
+        while((res=search_list_get_result(search->sl))) {
+                if ( _search_context == attr_country_all && res->country) {
+                        char * label;
+                        label = g_strdup(res->country->name);
+                        dbg(lvl_debug, "country result %s\n", label);
+                        _search_results.append(
+                                        new SearchObject(label, get_country_icon(res->country->flag) , res->c)
+                                        );
+                }
+                if ( _search_context == attr_town_name && res->town) {
+                        char * label;
+                        label = g_strdup(res->town->common.town_name);
+                        dbg(lvl_debug, "town result %s\n", label);
+                        _search_results.append(
+                                        new SearchObject(label, "icons/bigcity.png", res->c)
+                                        );
+                }
+                if (res->street) {
+                        char * label;
+                        label = g_strdup(res->street->name);
+                        dbg(lvl_debug, "street result %s\n", label);
+                        _search_results.append(
+                                        new SearchObject(label, "icons/smallcity.png", res->c)
+                                        );
+                }
+                if (count ++ > 50) {
+                        break;
+                }
+        }
+        emit searchResultsChanged();
+}
+
+void Backend::setSearchContext(QString text){
+        if (text == "country") {
+                _search_context = attr_country_all;
+        } else if (text == "town") {
+                _search_context = attr_town_name;
+        } else if (text == "street") {
+                _search_context = attr_street_name;
+        } else {
+                dbg(lvl_error, "Unhandled search context '%s'\n", text.toUtf8().data());
+        }
+               
+}
+
+QString Backend::currentCountry() {
+        if (_current_country == NULL) {
+                set_default_country();
+        }
+        dbg(lvl_debug, "Current country : %s/%s\n", _country_iso2, _current_country);
+        return QString(_current_country);
+}
+
+QString Backend::currentCountryIso2() {
+        if (_country_iso2 == NULL) {
+                set_default_country();
+        }
+        dbg(lvl_debug, "Current country : %s/%s\n", _country_iso2, _current_country);
+        return QString(_country_iso2);
+}
+
+QString Backend::currentTown() {
+        if (_current_town == NULL) {
+                _current_town = "Enter City";
+        }
+        dbg(lvl_debug, "Current town : %s\n", _current_town);
+        return QString(_current_town);
+}
 
+QString Backend::currentStreet() {
+        if (_current_street == NULL) {
+                _current_street = "Enter Street";
+        }
+        dbg(lvl_debug, "Current street : %s\n", _current_street);
+        return QString(_current_street);
 }
diff --git a/navit/gui/qt5_qml/backend.h b/navit/gui/qt5_qml/backend.h
index 6ff5a7825..a164918e6 100644
--- a/navit/gui/qt5_qml/backend.h
+++ b/navit/gui/qt5_qml/backend.h
@@ -4,34 +4,89 @@
 #include <QObject>
 #include <QDebug>
 #include <QQmlApplicationEngine>
+#include <QQmlListProperty>
+
+#include "qml_map.h"
+#include "qml_poi.h"
 
 #include "coord.h"
+#include "item.h"
+#include "attr.h"
 
 class Backend : public QObject
 {
     Q_OBJECT
+    Q_PROPERTY(QQmlListProperty<QObject> pois READ getPois NOTIFY poisChanged)
+    Q_PROPERTY(QQmlListProperty<QObject> maps READ getMaps NOTIFY mapsChanged)
+    Q_PROPERTY(PoiObject * activePoi READ activePoi NOTIFY activePoiChanged)
+    Q_PROPERTY(QQmlListProperty<QObject> searchresults READ getSearchResults NOTIFY searchResultsChanged)
+    // Search properties
+    Q_PROPERTY(QString currentCountry READ currentCountry NOTIFY currentCountryChanged)
+    Q_PROPERTY(QString currentCountryIso2 READ currentCountryIso2 NOTIFY currentCountryIso2Changed)
+    Q_PROPERTY(QString currentTown READ currentTown NOTIFY currentTownChanged)
+    Q_PROPERTY(QString currentStreet READ currentStreet NOTIFY currentStreetChanged)
+
 public:
     explicit Backend(QObject *parent = 0);
 
-    QString text() const;
     void showMenu(struct point* p);
     void set_navit(struct navit* nav);
     void set_engine(QQmlApplicationEngine* engine);
 
+    QList < PoiObject * > pois;
+    QQmlListProperty<QObject> getPois();
+    QList < MapObject * > maps;
+    QQmlListProperty<QObject> getMaps();
+    PoiObject * activePoi();
+    QQmlListProperty<QObject> getSearchResults();
+    QString currentCountry();
+    QString currentCountryIso2();
+    QString currentTown();
+    QString currentStreet();
+
 signals:
-    void displayMenu();
+    void displayMenu(QString source);
+    void hideMenu();
+    void poisChanged();
+    void activePoiChanged();
+    void mapsChanged();
+    void searchResultsChanged();
+    void currentCountryChanged();
+    void currentCountryIso2Changed();
+    void currentTownChanged();
+    void currentStreetChanged();
 
 public slots:
-    void list_maps(int cause);
+    void get_maps();
     void get_pois();
+    QString get_icon_path();
+    QString get_country_icon(char * country_iso_code);
+    void setActivePoi(int index);
+    void setActivePoiAsDestination();
+    void updateSearch(QString text);
+    void searchValidateResult(int index);
+    void resize(int width, int height);
+    void setSearchContext(QString text);
+    void block_draw();
 
 private:
     struct navit *nav;
     struct point *p;
     struct coord_geo g;
     struct pcoord c;
+    int filter_pois(struct item *item);
     QQmlApplicationEngine* engine;
-
+    QList<QObject *> _pois;
+    QList<QObject *> _maps;
+    PoiObject * m_activePoi;
+    QList<QObject *> _search_results;
+    void set_default_country();
+    char * _country_iso2;
+    char * _current_country;
+    char * _current_town;
+    char * _current_street;
+    struct search_param *search;
+    enum attr_type _search_context;
 };
 
 #endif // BACKEND_H
diff --git a/navit/gui/qt5_qml/editor/gui_qt5_qml.qml b/navit/gui/qt5_qml/editor/gui_qt5_qml.qml
new file mode 100644
index 000000000..f8c2daa4a
--- /dev/null
+++ b/navit/gui/qt5_qml/editor/gui_qt5_qml.qml
@@ -0,0 +1,59 @@
+import QtQuick 2.7
+import QtQuick.Controls 2.0
+import QtQuick.Layouts 1.0
+
+ApplicationWindow {
+    id: applicationWindow
+    visible: true
+    width: 800
+    height: 480
+    title: qsTr("Navit Stub")
+
+    MouseArea {
+        id: mouseArea
+        z: -1
+        anchors.fill: parent
+        onClicked: {
+            mainMenu.source = "skins/modern/menu.qml"
+            mainMenu.state = 'visible'
+            console.log("showing menu")
+        }
+
+        Image {
+            id: image
+            anchors.left: parent.left
+            anchors.rightMargin: 0
+            anchors.bottom: parent.bottom
+            anchors.bottomMargin: 0
+            source: "map.png"
+        }
+
+    }
+
+    Loader {
+        id: mainMenu
+        width: parent.width
+        height: parent.height
+        x: parent.width
+        opacity: 0
+
+        states: [
+            State {
+                name: "visible"
+                PropertyChanges {
+                    target: mainMenu
+                    x: 0
+                    opacity: 1
+                }
+            }
+        ]
+        transitions: [
+            Transition {
+                NumberAnimation {
+                    properties: "x,y,opacity";duration: 300
+                }
+            }
+        ]
+    }
+
+}
diff --git a/navit/gui/qt5_qml/editor/main.cpp b/navit/gui/qt5_qml/editor/main.cpp
index 34614e747..9089c5a29 100644
--- a/navit/gui/qt5_qml/editor/main.cpp
+++ b/navit/gui/qt5_qml/editor/main.cpp
@@ -7,7 +7,7 @@ int main(int argc, char *argv[])
     QGuiApplication app(argc, argv);
 
     QQmlApplicationEngine engine;
-    engine.load(QUrl(QLatin1String("qrc:/main.qml")));
+    engine.load(QUrl(QLatin1String("qrc:/gui_qt5_qml.qml")));
 
     return app.exec();
 }
diff --git a/navit/gui/qt5_qml/editor/qml.qrc b/navit/gui/qt5_qml/editor/qml.qrc
index 32df95b82..61cd75d03 100644
--- a/navit/gui/qt5_qml/editor/qml.qrc
+++ b/navit/gui/qt5_qml/editor/qml.qrc
@@ -1,27 +1,37 @@
 <RCC>
     <qresource prefix="/">
-        <file>main.qml</file>
-        <file>skins/menu.qml</file>
-        <file>skins/MainMenu.qml</file>
-        <file>skins/navit.svg</file>
         <file>map.png</file>
-        <file>skins/MainButton.qml</file>
-        <file>skins/settings.qml</file>
-        <file>skins/maps.qml</file>
-        <file>skins/pois.qml</file>
-        <file>skins/icons/appbar.home.variant.svg</file>
-        <file>skins/icons/appbar.rocket.svg</file>
-        <file>skins/icons/appbar.power.svg</file>
-        <file>skins/icons/appbar.cog.svg</file>
-        <file>skins/icons/appbar.layer.svg</file>
-        <file>skins/icons/appbar.layer.delete.svg</file>
-        <file>skins/icons/appbar.map.svg</file>
-        <file>skins/icons/appbar.information.circle.svg</file>
-        <file>skins/icons/appbar.chevron.up.svg</file>
-        <file>skins/icons/appbar.chevron.down.svg</file>
-        <file>skins/icons/appbar.fullscreen.box.svg</file>
-        <file>skins/icons/appbar.transit.car.svg</file>
-        <file>skins/icons/appbar.location.checkin.svg</file>
-        <file>skins/icons/appbar.cogs.svg</file>
+        <file>skins/modern/main.qml</file>
+        <file>skins/modern/menu.qml</file>
+        <file>skins/modern/MainMenu.qml</file>
+        <file>skins/modern/navit.svg</file>
+        <file>skins/modern/MainButton.qml</file>
+        <file>skins/modern/settings.qml</file>
+        <file>skins/modern/maps.qml</file>
+        <file>skins/modern/pois.qml</file>
+        <file>skins/modern/icons/appbar.home.variant.svg</file>
+        <file>skins/modern/icons/appbar.rocket.svg</file>
+        <file>skins/modern/icons/appbar.power.svg</file>
+        <file>skins/modern/icons/appbar.cog.svg</file>
+        <file>skins/modern/icons/appbar.layer.svg</file>
+        <file>skins/modern/icons/appbar.layer.delete.svg</file>
+        <file>skins/modern/icons/appbar.map.svg</file>
+        <file>skins/modern/icons/appbar.information.circle.svg</file>
+        <file>skins/modern/icons/appbar.chevron.up.svg</file>
+        <file>skins/modern/icons/appbar.chevron.down.svg</file>
+        <file>skins/modern/icons/appbar.fullscreen.box.svg</file>
+        <file>skins/modern/icons/appbar.transit.car.svg</file>
+        <file>skins/modern/icons/appbar.location.checkin.svg</file>
+        <file>skins/modern/icons/appbar.cogs.svg</file>
+        <file>skins/modern/icons/bigcity.png</file>
+        <file>skins/modern/poi.qml</file>
+        <file>skins/modern/search.qml</file>
+        <file>skins/modern/destination.qml</file>
+        <file>skins/modern/icons/appbar.city.svg</file>
+        <file>skins/modern/icons/appbar.location.svg</file>
+        <file>skins/modern/icons/appbar.timer.rewind.svg</file>
+        <file>skins/modern/icons/appbar.book.list.svg</file>
+        <file>skins/modern/icons/smallcity.png</file>
+        <file>skins/modern/destination_address.qml</file>
     </qresource>
 </RCC>
diff --git a/navit/gui/qt5_qml/gui_qt5_qml.cpp b/navit/gui/qt5_qml/gui_qt5_qml.cpp
index 14f08bdb4..1b4062d33 100644
--- a/navit/gui/qt5_qml/gui_qt5_qml.cpp
+++ b/navit/gui/qt5_qml/gui_qt5_qml.cpp
@@ -235,7 +235,7 @@ gui_qt5_qml_set_graphics(struct gui_priv* gui_priv, struct graphics* gra)
     if (gui_priv->loader != NULL) {
         dbg(lvl_debug, "navit_loader found\n");
         /* load our root window into the loader component */
-        gui_priv->loader->setProperty("source", "qrc:///main.qml");
+        gui_priv->loader->setProperty("source", "qrc:///skins/modern/main.qml");
     }
 
     transform_get_size(trans, &gui_priv->w, &gui_priv->h);
diff --git a/navit/gui/qt5_qml/gui_qt5_qml.qml b/navit/gui/qt5_qml/gui_qt5_qml.qml
deleted file mode 100644
index 679013319..000000000
--- a/navit/gui/qt5_qml/gui_qt5_qml.qml
+++ /dev/null
@@ -1,23 +0,0 @@
-import com.navit.graphics_qt5 1.0
-import QtQuick 2.2
-import QtQuick.Window 2.0
-
-Rectangle {
-   width: 200
-   height: 100
-   color: "red"
-
-   Text {
-       anchors.centerIn: parent
-       text: "Hello, World!"
-   }
-   QNavitQuick {
-        id: navit1
-	width: 300
-	height: 300
-        focus: true
-        Component.onCompleted: {
-            navit1.setGraphicContext(graphics_qt5_context)
-        }
-    }
-}
diff --git a/navit/gui/qt5_qml/gui_qt5_qml.qrc b/navit/gui/qt5_qml/gui_qt5_qml.qrc
index 32df95b82..61cd75d03 100644
--- a/navit/gui/qt5_qml/gui_qt5_qml.qrc
+++ b/navit/gui/qt5_qml/gui_qt5_qml.qrc
@@ -1,27 +1,37 @@
 <RCC>
     <qresource prefix="/">
-        <file>main.qml</file>
-        <file>skins/menu.qml</file>
-        <file>skins/MainMenu.qml</file>
-        <file>skins/navit.svg</file>
         <file>map.png</file>
-        <file>skins/MainButton.qml</file>
-        <file>skins/settings.qml</file>
-        <file>skins/maps.qml</file>
-        <file>skins/pois.qml</file>
-        <file>skins/icons/appbar.home.variant.svg</file>
-        <file>skins/icons/appbar.rocket.svg</file>
-        <file>skins/icons/appbar.power.svg</file>
-        <file>skins/icons/appbar.cog.svg</file>
-        <file>skins/icons/appbar.layer.svg</file>
-        <file>skins/icons/appbar.layer.delete.svg</file>
-        <file>skins/icons/appbar.map.svg</file>
-        <file>skins/icons/appbar.information.circle.svg</file>
-        <file>skins/icons/appbar.chevron.up.svg</file>
-        <file>skins/icons/appbar.chevron.down.svg</file>
-        <file>skins/icons/appbar.fullscreen.box.svg</file>
-        <file>skins/icons/appbar.transit.car.svg</file>
-        <file>skins/icons/appbar.location.checkin.svg</file>
-        <file>skins/icons/appbar.cogs.svg</file>
+        <file>skins/modern/main.qml</file>
+        <file>skins/modern/menu.qml</file>
+        <file>skins/modern/MainMenu.qml</file>
+        <file>skins/modern/navit.svg</file>
+        <file>skins/modern/MainButton.qml</file>
+        <file>skins/modern/settings.qml</file>
+        <file>skins/modern/maps.qml</file>
+        <file>skins/modern/pois.qml</file>
+        <file>skins/modern/icons/appbar.home.variant.svg</file>
+        <file>skins/modern/icons/appbar.rocket.svg</file>
+        <file>skins/modern/icons/appbar.power.svg</file>
+        <file>skins/modern/icons/appbar.cog.svg</file>
+        <file>skins/modern/icons/appbar.layer.svg</file>
+        <file>skins/modern/icons/appbar.layer.delete.svg</file>
+        <file>skins/modern/icons/appbar.map.svg</file>
+        <file>skins/modern/icons/appbar.information.circle.svg</file>
+        <file>skins/modern/icons/appbar.chevron.up.svg</file>
+        <file>skins/modern/icons/appbar.chevron.down.svg</file>
+        <file>skins/modern/icons/appbar.fullscreen.box.svg</file>
+        <file>skins/modern/icons/appbar.transit.car.svg</file>
+        <file>skins/modern/icons/appbar.location.checkin.svg</file>
+        <file>skins/modern/icons/appbar.cogs.svg</file>
+        <file>skins/modern/icons/bigcity.png</file>
+        <file>skins/modern/poi.qml</file>
+        <file>skins/modern/search.qml</file>
+        <file>skins/modern/destination.qml</file>
+        <file>skins/modern/icons/appbar.city.svg</file>
+        <file>skins/modern/icons/appbar.location.svg</file>
+        <file>skins/modern/icons/appbar.timer.rewind.svg</file>
+        <file>skins/modern/icons/appbar.book.list.svg</file>
+        <file>skins/modern/icons/smallcity.png</file>
+        <file>skins/modern/destination_address.qml</file>
     </qresource>
 </RCC>
diff --git a/navit/gui/qt5_qml/proxy.c b/navit/gui/qt5_qml/proxy.c
new file mode 100644
index 000000000..6a3546716
--- /dev/null
+++ b/navit/gui/qt5_qml/proxy.c
@@ -0,0 +1,70 @@
+#include <glib.h>
+
+#include "item.h"
+#include "attr.h"
+#include "navit.h"
+#include "xmlconfig.h" // for NAVIT_OBJECT
+#include "layout.h"
+#include "map.h"
+#include "transform.h"
+#include "debug.h"
+#include "search.h"
+
+
+char * get_icon(struct navit *nav, struct item *item)
+{
+
+    struct attr layout;
+    struct attr icon_src;
+    GList *layer;
+    navit_get_attr(nav, attr_layout, &layout, NULL);
+    layer=layout.u.layout->layers;
+
+    while(layer) {
+        GList *itemgra=((struct layer *)layer->data)->itemgras;
+        while(itemgra) {
+            GList *types=((struct itemgra *)itemgra->data)->type;
+            while(types) {
+                if((long)types->data==item->type) { 
+                    GList *element=((struct itemgra *)itemgra->data)->elements;
+                    while(element) {
+                        struct element * el=element->data;
+                        if(el->type==element_icon) {
+                            char *src;
+                            char *icon;
+                            struct graphics_image *img;
+                            if(item_is_custom_poi(*item)) {
+                                struct map_rect *mr=map_rect_new(item->map, NULL);
+                                item=map_rect_get_item_byid(mr, item->id_hi, item->id_lo);
+                                if(item_attr_get(item, attr_icon_src, &icon_src)) {
+                                    src=el->u.icon.src;
+                                    if(!src || !src[0])
+                                        src="%s";
+                                    icon=g_strdup_printf(src,map_convert_string_tmp(item->map,icon_src.u.str));
+                                }
+                                else {
+                                    icon=g_strdup(el->u.icon.src);
+                                }
+                            }
+                            else {
+                                icon=g_strdup(el->u.icon.src);
+                            }
+                            icon[strlen(icon)-3]='s';
+                            icon[strlen(icon)-2]='v';
+                            icon[strlen(icon)-1]='g';
+                            return icon;
+                            // FIXME
+                            g_free(icon);
+                        }
+                        element=g_list_next(element);
+                    }
+                }
+                types=g_list_next(types);
+            }
+            itemgra=g_list_next(itemgra);
+        }
+        layer=g_list_next(layer);
+    }
+    return "unknown.svg";
+}
+
diff --git a/navit/gui/qt5_qml/proxy.h b/navit/gui/qt5_qml/proxy.h
new file mode 100644
index 000000000..16e74f55c
--- /dev/null
+++ b/navit/gui/qt5_qml/proxy.h
@@ -0,0 +1 @@
+char * get_icon(struct navit *nav, struct item *item);
diff --git a/navit/gui/qt5_qml/qml_poi.cpp b/navit/gui/qt5_qml/qml_poi.cpp
index 0036739fc..6a4c16884 100644
--- a/navit/gui/qt5_qml/qml_poi.cpp
+++ b/navit/gui/qt5_qml/qml_poi.cpp
@@ -8,10 +8,12 @@ PoiObject::PoiObject(QObject *parent)
 
 PoiObject::PoiObject(
     const QString &name,
-    const bool &active,
-    const int idist,
+    const QString &type,
+    const int distance,
+    const QString &icon,
+    struct pcoord &coords,
     QObject *parent)
-    : QObject(parent), m_name(name), m_active(active)
+    : QObject(parent), m_name(name), m_type(type), m_icon(icon), m_coords(coords)
 {
 }
 
@@ -28,22 +30,22 @@ void PoiObject::setName(const QString &name)
     }
 }
 
-bool PoiObject::active() const
+QString PoiObject::type() const
 {
-    return m_active;
+    return m_type;
 }
 
-void PoiObject::setActive(const bool &active)
+void PoiObject::setType(const QString &type)
 {
-    if (active != m_active) {
-        m_active = active;
-        emit activeChanged();
+    if (type != m_type) {
+        m_type = type;
+        emit typeChanged();
     }
 }
 
-int PoiObject::distance() const
+float PoiObject::distance() const
 {
-    return m_distance;
+    return m_distance/1000;
 }
 
 void PoiObject::setDistance(const int distance)
@@ -53,3 +55,21 @@ void PoiObject::setDistance(const int distance)
         emit distanceChanged();
     }
 }
+
+void PoiObject::setIcon(const QString &icon)
+{
+    if (icon != m_icon) {
+        m_icon = icon;
+        emit iconChanged();
+    }
+}
+
+QString PoiObject::icon() const
+{
+    return m_icon;
+}
+
+struct pcoord PoiObject::coords() const
+{
+    return m_coords;
+}
\ No newline at end of file
diff --git a/navit/gui/qt5_qml/qml_poi.h b/navit/gui/qt5_qml/qml_poi.h
index f890b0cd1..328244372 100644
--- a/navit/gui/qt5_qml/qml_poi.h
+++ b/navit/gui/qt5_qml/qml_poi.h
@@ -2,37 +2,49 @@
 #define POIOBJECT_H
 
 #include <QObject>
+#include "coord.h"
 
 class PoiObject : public QObject
 {
     Q_OBJECT
 
     Q_PROPERTY(QString name READ name WRITE setName NOTIFY nameChanged)
-    Q_PROPERTY(bool active READ active WRITE setActive NOTIFY activeChanged)
+    Q_PROPERTY(QString type READ type WRITE setType NOTIFY typeChanged)
     Q_PROPERTY(int distance READ distance WRITE setDistance NOTIFY distanceChanged)
+    Q_PROPERTY(QString icon READ icon WRITE setIcon NOTIFY iconChanged)
+    Q_PROPERTY(struct pcoord coords NOTIFY coordsChanged)
 
 public:
     PoiObject(QObject *parent=0);
-    PoiObject(const QString &name, const bool &active, const int distance, QObject *parent=0);
-
+    PoiObject(const QString &name, const QString &type, const int distance, const QString &icon, struct pcoord &coords, QObject *parent=0);
     QString name() const;
     void setName(const QString &name);
 
-    bool active() const;
-    void setActive(const bool &active);
+    QString type() const;
+    void setType(const QString &type);
 
-    int distance() const;
+    float distance() const;
     void setDistance(const int distance);
 
+    QString icon() const;
+    void setIcon(const QString &icon);
+
+    struct pcoord coords() const;
+//    void setcoords(const struct pcoord &c);
+
 signals:
     void nameChanged();
-    void activeChanged();
+    void typeChanged();
     void distanceChanged();
+    void iconChanged();
+//    void coordsChanged();
 
 private:
+    struct pcoord m_coords;
     QString m_name;
-    bool m_active;
+    QString m_type;
     int m_distance;
+    QString m_icon;
 };
 
 #endif // POIOBJECT_H
diff --git a/navit/gui/qt5_qml/qml_search.cpp b/navit/gui/qt5_qml/qml_search.cpp
new file mode 100644
index 000000000..0a82e37d3
--- /dev/null
+++ b/navit/gui/qt5_qml/qml_search.cpp
@@ -0,0 +1,42 @@
+#include "qml_search.h"
+
+SearchObject::SearchObject(QObject *parent)
+    : QObject(parent)
+{
+}
+
+SearchObject::SearchObject(const QString &name, const QString &icon, struct pcoord *c, QObject *parent)
+    : QObject(parent), m_name(name), m_icon(icon), m_c(c)
+{
+}
+
+QString SearchObject::name() const
+{
+    return m_name;
+}
+
+void SearchObject::setName(const QString &name)
+{
+    if (name != m_name) {
+        m_name = name;
+        emit nameChanged();
+    }
+}
+
+QString SearchObject::icon() const
+{
+    return m_icon;
+}
+
+void SearchObject::setIcon(const QString &icon)
+{
+    if (icon != m_icon) {
+        m_icon = icon;
+        emit iconChanged();
+    }
+}
+
+struct pcoord * SearchObject::getCoords() const
+{
+    return m_c;
+}
diff --git a/navit/gui/qt5_qml/qml_search.h b/navit/gui/qt5_qml/qml_search.h
new file mode 100644
index 000000000..656d85f3c
--- /dev/null
+++ b/navit/gui/qt5_qml/qml_search.h
@@ -0,0 +1,34 @@
+#ifndef SEARCHOBJECT_H
+#define SEARCHOBJECT_H
+
+#include <QObject>
+
+class SearchObject : public QObject
+{
+    Q_OBJECT
+
+    Q_PROPERTY(QString name READ name WRITE setName NOTIFY nameChanged)
+    Q_PROPERTY(QString icon READ icon WRITE setIcon NOTIFY iconChanged)
+
+public:
+    SearchObject(QObject *parent=0);
+    SearchObject(const QString &name, const QString &icon, struct pcoord *c, QObject *parent=0);
+
+    QString name() const;
+    void setName(const QString &name);
+
+    QString icon() const;
+    void setIcon(const QString &icon);
+    struct pcoord * getCoords() const;
+
+signals:
+    void nameChanged();
+    void iconChanged();
+
+private:
+    QString m_name;
+    QString m_icon;
+    struct pcoord *m_c;
+};
+
+#endif // SEARCHOBJECT_H
diff --git a/navit/gui/qt5_qml/skins/modern/MainButton.qml b/navit/gui/qt5_qml/skins/modern/MainButton.qml
new file mode 100644
index 000000000..18a41dd8d
--- /dev/null
+++ b/navit/gui/qt5_qml/skins/modern/MainButton.qml
@@ -0,0 +1,72 @@
+import QtQuick 2.2
+import QtQuick.Layouts 1.0
+
+Rectangle {
+    id: container
+
+    signal clicked
+    property string text: "Button"
+    property string icon: "icons/appbar.home.variant.svg"
+
+    smooth: true;
+    width: 200;
+    height: 80
+    color: "#35322f"
+    radius: 2
+    border.width: 1
+
+    MouseArea { id: mr; anchors.fill: parent; onClicked: container.clicked() }
+
+    Text {
+        id: txtItem;
+        color: "#ffffff"
+        text: container.text
+        font.pointSize: 18
+        anchors.left: rectangle.right
+        anchors.leftMargin: 8
+        anchors.verticalCenter: parent.verticalCenter
+        z: 1
+    }
+
+    Rectangle {
+        id: rectangle
+        width: container.height
+        height: container.height
+        color: "#35322f"
+        radius: 2
+        border.width: 1
+        anchors.verticalCenter: parent.verticalCenter
+
+        Image {
+            id: imgItem;
+            width: parent.width;
+            height: parent.height;
+            source: container.icon
+            smooth: true
+            scale: 1
+            anchors.verticalCenter: parent.verticalCenter
+            anchors.left: parent.left
+            // anchors.leftMargin: 8
+            // sourceSize.width: parent.width
+            // sourceSize.height: parent.height
+            fillMode: Image.PreserveAspectFit
+        }
+    }
+
+    states: [
+        State {
+            name: "Pressed"; when: mr.pressed == true
+            PropertyChanges {
+                target: txtItem;
+                opacity: 0.6;
+                color: "#84ca43";
+            }
+        }
+    ]
+
+    transitions: Transition {
+        NumberAnimation { properties: "scale"; easing.type: "OutExpo"; duration: 200 }
+    }
+
+}
+
diff --git a/navit/gui/qt5_qml/skins/modern/MainMenu.qml b/navit/gui/qt5_qml/skins/modern/MainMenu.qml
new file mode 100644
index 000000000..748a5ab0f
--- /dev/null
+++ b/navit/gui/qt5_qml/skins/modern/MainMenu.qml
@@ -0,0 +1,64 @@
+import QtQuick 2.2
+import QtQuick.Layouts 1.0
+
+GridLayout {
+    id: gridLayout
+    anchors.fill: parent
+    columnSpacing: 4
+    rowSpacing: 4
+    rows: 3
+    columns: 2
+
+    MainButton {
+        text: "Where To?"
+        Layout.fillHeight: true
+        Layout.fillWidth: true
+        icon: "icons/appbar.rocket.svg"
+        onClicked: {
+            menucontent.source = "destination.qml"
+        }
+    }
+
+    MainButton {
+        text: "My position"
+        Layout.fillHeight: true
+        Layout.fillWidth: true
+        icon: "icons/appbar.location.checkin.svg"
+    }
+
+    MainButton {
+        text: "Around Me"
+        Layout.fillHeight: true
+        Layout.fillWidth: true
+        icon: "icons/appbar.information.circle.svg"
+        onClicked: {
+            menucontent.source = "pois.qml"
+        }
+    }
+
+    MainButton {
+        text: "Settings"
+        Layout.fillHeight: true
+        Layout.fillWidth: true
+        icon: "icons/appbar.cog.svg"
+        onClicked: {
+            menucontent.source = "settings.qml"
+        }
+    }
+
+    MainButton {
+        text: "My route"
+        Layout.fillHeight: true
+        Layout.fillWidth: true
+        icon: "icons/appbar.book.list.svg"
+    }
+
+    MainButton {
+        text: "Quit"
+        Layout.fillHeight: true
+        Layout.fillWidth: true
+        icon: "icons/appbar.power.svg"
+        onClicked: Qt.quit()
+    }
+
+}
diff --git a/navit/gui/qt5_qml/skins/modern/destination.qml b/navit/gui/qt5_qml/skins/modern/destination.qml
new file mode 100644
index 000000000..affd65026
--- /dev/null
+++ b/navit/gui/qt5_qml/skins/modern/destination.qml
@@ -0,0 +1,42 @@
+import QtQuick 2.0
+import QtQuick.Layouts 1.0
+
+GridLayout {
+    id: gridLayout
+    anchors.fill: parent
+    columnSpacing: 4
+    rowSpacing: 4
+    rows: 4
+    columns: 1
+
+    MainButton {
+        text: "Address lookup"
+        Layout.fillHeight: true
+        Layout.fillWidth: true
+        icon: "icons/appbar.city.svg"
+        onClicked: {
+            menucontent.source = "destination_address.qml"
+        }
+    }
+
+    MainButton {
+        text: "Go Home"
+        Layout.fillHeight: true
+        Layout.fillWidth: true
+    }
+
+    MainButton {
+        text: "Bookmarks"
+        Layout.fillHeight: true
+        Layout.fillWidth: true
+        icon: "icons/appbar.location.svg"
+    }
+
+    MainButton {
+        text: "Previous destinations"
+        Layout.fillHeight: true
+        Layout.fillWidth: true
+        icon: "icons/appbar.timer.rewind.svg"
+    }
+
+}
diff --git a/navit/gui/qt5_qml/skins/modern/destination_address.qml b/navit/gui/qt5_qml/skins/modern/destination_address.qml
new file mode 100644
index 000000000..35d11a68c
--- /dev/null
+++ b/navit/gui/qt5_qml/skins/modern/destination_address.qml
@@ -0,0 +1,45 @@
+import QtQuick 2.0
+import QtQuick.Layouts 1.0
+
+GridLayout {
+    id: gridLayout
+    anchors.fill: parent
+    columnSpacing: 4
+    rowSpacing: 4
+    rows: 3
+    columns: 1
+
+    MainButton {
+        id: townSearchButton
+        height: 100
+        text: backend.currentTown
+        Layout.fillWidth: true
+        onClicked: {
+            backend.setSearchContext('town')
+            menucontent.source = "search.qml"
+        }
+    }
+
+    MainButton {
+        id: streetSearchButton
+        height: 100
+        text: backend.currentStreet
+        Layout.fillWidth: true
+        onClicked: {
+            backend.setSearchContext('street')
+            menucontent.source = "search.qml"
+        }
+    }
+
+    MainButton {
+        id: countrySearchButton
+        height: 100
+        text: backend.currentCountry
+        icon: backend.get_icon_path() + 'country_' + backend.currentCountryIso2 + ".svg"
+        Layout.fillWidth: true
+        onClicked: {
+            backend.setSearchContext('country')
+            menucontent.source = "search.qml"
+        }
+    }
+}
diff --git a/navit/gui/qt5_qml/skins/modern/icons/appbar.book.list.svg b/navit/gui/qt5_qml/skins/modern/icons/appbar.book.list.svg
new file mode 100644
index 000000000..9dda725d2
--- /dev/null
+++ b/navit/gui/qt5_qml/skins/modern/icons/appbar.book.list.svg
@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" baseProfile="full" width="76" height="76" viewBox="0 0 76.00 76.00" enable-background="new 0 0 76.00 76.00" xml:space="preserve">
+	<path fill="#ffffff" fill-opacity="1" stroke-width="0.2" stroke-linejoin="round" d="M 22,19L 24,19L 24,57L 22,57L 22,19 Z M 26,57L 26,19.0001L 53.9999,19.0001L 53.9999,57L 26,57 Z M 30,24L 30,27L 50,27L 50,24L 30,24 Z M 30,32L 30,35L 33,35L 33,32L 30,32 Z M 36,32L 36,35L 49,35L 49,32L 36,32 Z M 30,40L 30,43L 33,43L 33,40L 30,40 Z M 36,40L 36,43L 48,43L 48,40L 36,40 Z M 30,48L 30,51L 33,51L 33,48L 30,48 Z M 36,48L 36,51L 50,51L 50,48L 36,48 Z "/>
+</svg>
diff --git a/navit/gui/qt5_qml/skins/modern/icons/appbar.chevron.down.svg b/navit/gui/qt5_qml/skins/modern/icons/appbar.chevron.down.svg
new file mode 100644
index 000000000..3917fc7cd
--- /dev/null
+++ b/navit/gui/qt5_qml/skins/modern/icons/appbar.chevron.down.svg
@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" baseProfile="full" width="76" height="76" viewBox="0 0 76.00 76.00" enable-background="new 0 0 76.00 76.00" xml:space="preserve">
+	<path fill="#ffffff" fill-opacity="1" stroke-width="0.2" stroke-linejoin="round" d="M 37.8516,39.5833L 52.1016,24.9375L 52.1016,35.2292L 37.8516,50.2708L 23.6016,35.2292L 23.6016,24.9375L 37.8516,39.5833 Z "/>
+</svg>
diff --git a/navit/gui/qt5_qml/skins/modern/icons/appbar.chevron.up.svg b/navit/gui/qt5_qml/skins/modern/icons/appbar.chevron.up.svg
new file mode 100644
index 000000000..b737d9773
--- /dev/null
+++ b/navit/gui/qt5_qml/skins/modern/icons/appbar.chevron.up.svg
@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" baseProfile="full" width="76" height="76" viewBox="0 0 76.00 76.00" enable-background="new 0 0 76.00 76.00" xml:space="preserve">
+	<path fill="#ffffff" fill-opacity="1" stroke-width="0.2" stroke-linejoin="round" d="M 37.8516,35.625L 34.6849,38.7917L 23.6016,50.2708L 23.6016,39.9792L 37.8516,24.9375L 52.1016,39.9792L 52.1016,50.2708L 41.0182,38.7917L 37.8516,35.625 Z "/>
+</svg>
diff --git a/navit/gui/qt5_qml/skins/modern/icons/appbar.city.svg b/navit/gui/qt5_qml/skins/modern/icons/appbar.city.svg
new file mode 100644
index 000000000..f66893f7e
--- /dev/null
+++ b/navit/gui/qt5_qml/skins/modern/icons/appbar.city.svg
@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" baseProfile="full" width="76" height="76" viewBox="0 0 76.00 76.00" enable-background="new 0 0 76.00 76.00" xml:space="preserve">
+	<path fill="#ffffff" fill-opacity="1" stroke-width="0.2" stroke-linejoin="round" d="M 44.3333,30.0833L 57,30.0833L 57,57L 44.3333,57L 44.3333,30.0833 Z M 46.3125,35.2292L 46.3125,38L 49.0833,38L 49.0833,35.2292L 46.3125,35.2292 Z M 52.25,35.2292L 52.25,38L 55.0208,38L 55.0208,35.2292L 52.25,35.2292 Z M 46.3125,39.9792L 46.3125,42.75L 49.0833,42.75L 49.0833,39.9792L 46.3125,39.9792 Z M 52.25,39.9792L 52.25,42.75L 55.0208,42.75L 55.0208,39.9792L 52.25,39.9792 Z M 46.3125,44.7292L 46.3125,47.5L 49.0833,47.5L 49.0833,44.7292L 46.3125,44.7292 Z M 52.25,44.7292L 52.25,47.5L 55.0208,47.5L 55.0208,44.7292L 52.25,44.7292 Z M 46.3125,49.4792L 46.3125,52.25L 49.0833,52.25L 49.0833,49.4792L 46.3125,49.4792 Z M 52.25,49.4792L 52.25,52.25L 55.0208,52.25L 55.0208,49.4792L 52.25,49.4792 Z M 23.75,25.3333L 25.3333,22.1667L 26.9167,22.1667L 26.9167,18.2084L 28.5,18.2084L 28.5,22.1667L 31.6667,22.1667L 31.6667,18.2084L 33.25,18.2084L 33.25,22.1667L 34.8333,22.1667L 36.4167,25.3333L 36.4167,34.8334L 38.7917,34.8333L 41.1667,37.2083L 41.1667,57L 19,57L 19,37.2083L 21.375,34.8333L 23.75,34.8334L 23.75,25.3333 Z M 25.7291,27.3125L 25.7291,30.0834L 28.1041,30.0834L 28.1041,27.3125L 25.7291,27.3125 Z M 32.0625,27.3125L 32.0625,30.0834L 34.4375,30.0834L 34.4375,27.3125L 32.0625,27.3125 Z M 25.7291,32.0625L 25.7291,34.8334L 28.1041,34.8334L 28.1041,32.0625L 25.7291,32.0625 Z M 32.0625,32.0625L 32.0625,34.8334L 34.4375,34.8334L 34.4375,32.0625L 32.0625,32.0625 Z M 30.875,39.9792L 28.8958,39.9792L 28.8958,42.75L 30.875,42.75L 30.875,39.9792 Z M 24.5416,39.9792L 24.5416,42.75L 26.9166,42.75L 26.9166,39.9792L 24.5416,39.9792 Z M 36.0208,39.9792L 33.25,39.9792L 33.25,42.75L 36.0208,42.75L 36.0208,39.9792 Z M 30.875,44.7292L 28.8958,44.7292L 28.8958,47.5L 30.875,47.5L 30.875,44.7292 Z M 26.9166,44.7292L 24.5416,44.7292L 24.5416,47.5L 26.9166,47.5L 26.9166,44.7292 Z M 36.0208,44.7292L 33.25,44.7292L 33.25,47.5L 36.0208,47.5L 36.0208,44.7292 Z M 30.875,49.4792L 28.8958,49.4792L 28.8958,52.25L 30.875,52.25L 30.875,49.4792 Z M 26.9166,49.4792L 24.5416,49.4792L 24.5417,52.25L 26.9167,52.25L 26.9166,49.4792 Z M 36.0208,49.4792L 33.25,49.4792L 33.25,52.25L 36.0208,52.25L 36.0208,49.4792 Z "/>
+</svg>
diff --git a/navit/gui/qt5_qml/skins/modern/icons/appbar.cog.svg b/navit/gui/qt5_qml/skins/modern/icons/appbar.cog.svg
new file mode 100644
index 000000000..4ef1ef8c2
--- /dev/null
+++ b/navit/gui/qt5_qml/skins/modern/icons/appbar.cog.svg
@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" baseProfile="full" width="76" height="76" viewBox="0 0 76.00 76.00" enable-background="new 0 0 76.00 76.00" xml:space="preserve">
+	<path fill="#ffffff" fill-opacity="1" stroke-width="0.2" stroke-linejoin="round" d="M 27.5314,21.8628L 33.0126,19.4224L 34.7616,23.3507C 36.6693,22.9269 38.6044,22.8903 40.4668,23.2026L 42.0083,19.1868L 47.6098,21.337L 46.0683,25.3528C 47.6612,26.3669 49.0747,27.6889 50.2088,29.2803L 54.1371,27.5313L 56.5776,33.0126L 52.6493,34.7616C 53.0731,36.6693 53.1097,38.6043 52.7974,40.4668L 56.8131,42.0083L 54.6629,47.6097L 50.6472,46.0683C 49.6331,47.6613 48.3111,49.0748 46.7197,50.2089L 48.4686,54.1372L 42.9874,56.5776L 41.2384,52.6493C 39.3307,53.0731 37.3957,53.1097 35.5333,52.7974L 33.9918,56.8131L 28.3903,54.6629L 29.9318,50.6472C 28.3388,49.6331 26.9252,48.3111 25.7911,46.7196L 21.8628,48.4686L 19.4224,42.9873L 23.3507,41.2383C 22.9269,39.3307 22.8903,37.3957 23.2026,35.5332L 19.1869,33.9918L 21.3371,28.3903L 25.3528,29.9318C 26.3669,28.3388 27.6889,26.9252 29.2804,25.7911L 27.5314,21.8628 Z M 34.3394,29.7781C 29.7985,31.7998 27.7564,37.1198 29.7781,41.6606C 31.7998,46.2015 37.1198,48.2436 41.6606,46.2219C 46.2015,44.2002 48.2436,38.8802 46.2219,34.3394C 44.2002,29.7985 38.8802,27.7564 34.3394,29.7781 Z "/>
+</svg>
diff --git a/navit/gui/qt5_qml/skins/modern/icons/appbar.cogs.svg b/navit/gui/qt5_qml/skins/modern/icons/appbar.cogs.svg
new file mode 100644
index 000000000..e3fdaa4ce
--- /dev/null
+++ b/navit/gui/qt5_qml/skins/modern/icons/appbar.cogs.svg
@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" baseProfile="full" width="76" height="76" viewBox="0 0 76.00 76.00" enable-background="new 0 0 76.00 76.00" xml:space="preserve">
+	<path fill="#ffffff" fill-opacity="1" stroke-width="0.2" stroke-linejoin="round" d="M 32.6227,68.9728C 33.1208,70.2446 33.7077,71.4719 34.3757,72.6471C 35.567,72.7702 36.7761,72.8333 38,72.8333C 40.6447,72.8333 43.2205,72.5386 45.6965,71.9802C 42.2807,68.5449 40.1698,63.8107 40.1698,58.5835C 40.1698,48.0901 48.6764,39.5835 59.1698,39.5835C 64.2047,39.5835 68.7822,41.5419 72.182,44.7385C 72.6094,42.5584 72.8333,40.3053 72.8333,38C 72.8333,36.442 72.731,34.908 72.5328,33.4041C 70.4772,32.3109 68.2718,31.4621 65.9554,30.8963L 65.6219,22.7367C 63.5664,22.3692 61.4511,22.1741 59.2916,22.1671L 57.491,30.1322C 54.2845,30.3184 51.2204,31.0348 48.3848,32.1949L 43.318,25.7887C 41.3995,26.7177 39.5749,27.8102 37.8622,29.0479L 41.0883,36.5527C 38.6742,38.5364 36.5919,40.9091 34.9373,43.575L 27.0703,41.3697C 26.073,43.2256 25.2319,45.178 24.5646,47.2093L 31.5867,51.385C 30.9883,53.6844 30.6698,56.0968 30.6698,58.5835L 30.746,60.6839L 23.0854,63.5239C 23.3743,65.6539 23.8474,67.7255 24.4881,69.7219L 32.6227,68.9728 Z M 27.0669,37.1755L 34.9338,39.3807C 35.9312,37.5248 36.7723,35.5724 37.4395,33.5412L 30.4175,29.3654C 31.0159,27.066 31.3344,24.6537 31.3344,22.1669L 31.2581,20.0665L 38.9187,17.2265C 38.6299,15.0965 38.1568,13.0249 37.5161,11.0285L 29.3815,11.7776C 28.4787,9.47258 27.2844,7.31377 25.8439,5.34655C 22.7943,6.48232 19.9467,8.03307 17.3698,9.93015C 20.1557,13.2359 21.8344,17.5054 21.8344,22.1669C 21.8344,32.5019 13.5826,40.9096 3.30816,41.1611C 3.60321,44.4411 4.35293,47.59 5.49381,50.5444C 8.34489,50.2806 11.0742,49.5968 13.6194,48.5555L 18.6861,54.9617C 20.6046,54.0327 22.4293,52.9403 24.142,51.7025L 20.9158,44.1977C 23.3299,42.2141 25.4123,39.8414 27.0669,37.1755 Z "/>
+</svg>
diff --git a/navit/gui/qt5_qml/skins/modern/icons/appbar.fullscreen.box.svg b/navit/gui/qt5_qml/skins/modern/icons/appbar.fullscreen.box.svg
new file mode 100644
index 000000000..13e6840e5
--- /dev/null
+++ b/navit/gui/qt5_qml/skins/modern/icons/appbar.fullscreen.box.svg
@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" baseProfile="full" width="76" height="76" viewBox="0 0 76.00 76.00" enable-background="new 0 0 76.00 76.00" xml:space="preserve">
+	<path fill="#ffffff" fill-opacity="1" stroke-width="0.2" stroke-linejoin="round" d="M 19,57L 19,19L 57,19L 57,57L 19,57 Z M 24,29L 47,29L 47,52L 52,52L 52,24L 24,24L 24,29 Z M 24,34L 24,52L 42,52L 42,34L 24,34 Z "/>
+</svg>
diff --git a/navit/gui/qt5_qml/skins/modern/icons/appbar.home.variant.svg b/navit/gui/qt5_qml/skins/modern/icons/appbar.home.variant.svg
new file mode 100644
index 000000000..ea951fd19
--- /dev/null
+++ b/navit/gui/qt5_qml/skins/modern/icons/appbar.home.variant.svg
@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" baseProfile="full" width="76.0106" height="76.0106" viewBox="0 0 76.01 76.01" enable-background="new 0 0 76.01 76.01" xml:space="preserve">
+	<path fill="#ffffff" fill-opacity="1" stroke-width="0.2" stroke-linejoin="round" d="M 24.0033,56.0078L 24.0033,38.0053L 22.0031,40.0056L 19.0027,35.0049L 38.0053,20.0028L 45.0063,25.5299L 45.0063,21.753L 49.0068,21.0029L 49.0068,28.6882L 57.008,35.0049L 54.0075,40.0056L 52.0073,38.0053L 52.0073,56.0078L 24.0033,56.0078 Z M 38.0053,26.9204L 27.0038,36.005L 27.0038,53.0074L 38.0045,53.0075L 38.0045,41.0061L 46.0058,41.0061L 46.0059,53.0075L 49.0068,53.0074L 49.0068,36.005L 38.0053,26.9204 Z M 30.004,41.0057L 35.0049,41.0057L 35.0049,47.0066L 30.004,47.0066L 30.004,41.0057 Z "/>
+</svg>
diff --git a/navit/gui/qt5_qml/skins/modern/icons/appbar.information.circle.svg b/navit/gui/qt5_qml/skins/modern/icons/appbar.information.circle.svg
new file mode 100644
index 000000000..031bd37f5
--- /dev/null
+++ b/navit/gui/qt5_qml/skins/modern/icons/appbar.information.circle.svg
@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" baseProfile="full" width="76" height="76" viewBox="0 0 76.00 76.00" enable-background="new 0 0 76.00 76.00" xml:space="preserve">
+	<path fill="#ffffff" fill-opacity="1" stroke-width="0.2" stroke-linejoin="round" d="M 38,19C 48.4934,19 57,27.5066 57,38C 57,48.4934 48.4934,57 38,57C 27.5066,57 19,48.4934 19,38C 19,27.5066 27.5066,19 38,19 Z M 33.25,33.25L 33.25,36.4167L 36.4166,36.4167L 36.4166,47.5L 33.25,47.5L 33.25,50.6667L 44.3333,50.6667L 44.3333,47.5L 41.1666,47.5L 41.1666,36.4167L 41.1666,33.25L 33.25,33.25 Z M 38.7917,25.3333C 37.48,25.3333 36.4167,26.3967 36.4167,27.7083C 36.4167,29.02 37.48,30.0833 38.7917,30.0833C 40.1033,30.0833 41.1667,29.02 41.1667,27.7083C 41.1667,26.3967 40.1033,25.3333 38.7917,25.3333 Z "/>
+</svg>
diff --git a/navit/gui/qt5_qml/skins/modern/icons/appbar.layer.delete.svg b/navit/gui/qt5_qml/skins/modern/icons/appbar.layer.delete.svg
new file mode 100644
index 000000000..ddbeb21ca
--- /dev/null
+++ b/navit/gui/qt5_qml/skins/modern/icons/appbar.layer.delete.svg
@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" baseProfile="full" width="76.0106" height="76.0106" viewBox="0 0 76.01 76.01" enable-background="new 0 0 76.01 76.01" xml:space="preserve">
+	<path fill="#ffffff" fill-opacity="1" stroke-width="0.2" stroke-linejoin="round" d="M 18.5088,44.0374L 21.8676,40.6786L 27.4655,46.2765L 33.0634,40.6786L 36.4222,44.0374L 30.8243,49.6353L 36.4222,55.2332L 33.0634,58.592L 27.4655,52.994L 21.8676,58.592L 18.5088,55.2332L 24.1068,49.6353L 18.5088,44.0374 Z M 57.0079,38.0053L 38.0053,47.5066L 36.7482,46.8781L 39.5889,44.0374L 35.2559,39.7977L 38.0053,41.1724L 50.6737,34.8382L 57.0079,38.0053 Z M 19.0026,38.0053L 25.3369,34.8382L 32.3326,38.3361L 29.8968,40.7719L 28.1098,42.5589L 25.7193,41.3636L 21.8676,37.6052L 20.6459,38.8269L 19.0026,38.0053 Z M 38.0053,19.0027L 57.0079,28.504L 38.0053,38.0053L 19.0026,28.504L 38.0053,19.0027 Z M 57.0079,47.5066L 38.0053,57.008L 37.8778,56.9442L 39.5889,55.2332L 33.9909,49.6353L 34.6367,48.9895L 38.0053,50.6738L 50.6737,44.3395L 57.0079,47.5066 Z "/>
+</svg>
diff --git a/navit/gui/qt5_qml/skins/modern/icons/appbar.layer.svg b/navit/gui/qt5_qml/skins/modern/icons/appbar.layer.svg
new file mode 100644
index 000000000..9eb28235c
--- /dev/null
+++ b/navit/gui/qt5_qml/skins/modern/icons/appbar.layer.svg
@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" baseProfile="full" width="76.0106" height="76.0106" viewBox="0 0 76.01 76.01" enable-background="new 0 0 76.01 76.01" xml:space="preserve">
+	<path fill="#ffffff" fill-opacity="1" stroke-width="0.2" stroke-linejoin="round" d="M 57.0079,38.0053L 38.0053,47.5066L 19.0027,38.0053L 25.3369,34.8382L 38.0053,41.1724L 50.6737,34.8382L 57.0079,38.0053 Z M 38.0053,19.0027L 57.0079,28.504L 38.0053,38.0053L 19.0026,28.504L 38.0053,19.0027 Z M 57.0079,47.5066L 38.0053,57.008L 19.0026,47.5066L 25.3369,44.3395L 38.0053,50.6737L 50.6737,44.3395L 57.0079,47.5066 Z "/>
+</svg>
diff --git a/navit/gui/qt5_qml/skins/modern/icons/appbar.location.checkin.svg b/navit/gui/qt5_qml/skins/modern/icons/appbar.location.checkin.svg
new file mode 100644
index 000000000..3b21754c6
--- /dev/null
+++ b/navit/gui/qt5_qml/skins/modern/icons/appbar.location.checkin.svg
@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" baseProfile="full" width="76" height="76" viewBox="0 0 76.00 76.00" enable-background="new 0 0 76.00 76.00" xml:space="preserve">
+	<path fill="#ffffff" fill-opacity="1" stroke-linejoin="round" d="M 38,19C 42.9706,19 47,23.0294 47,28C 47,30.5642 45.9276,32.878 38,49C 30.0724,32.878 29,30.5642 29,28C 29,23.0294 33.0294,19 38,19 Z M 38,24C 35.7909,24 34,25.7909 34,28C 34,30.2092 35.7909,32 38,32C 40.2091,32 42,30.2092 42,28C 42,25.7909 40.2091,24 38,24 Z M 19,57L 24,42L 31.5,42L 33.5,46L 27.6641,46L 25.3324,53L 50.6676,53L 48.3359,46L 42.5,46L 44.5,42L 52,42L 57,57L 19,57 Z "/>
+</svg>
diff --git a/navit/gui/qt5_qml/skins/modern/icons/appbar.location.svg b/navit/gui/qt5_qml/skins/modern/icons/appbar.location.svg
new file mode 100644
index 000000000..fff6bf3e1
--- /dev/null
+++ b/navit/gui/qt5_qml/skins/modern/icons/appbar.location.svg
@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" baseProfile="full" width="76" height="76" viewBox="0 0 76.00 76.00" enable-background="new 0 0 76.00 76.00" xml:space="preserve">
+	<path fill="#ffffff" fill-opacity="1" stroke-width="0.2" stroke-linejoin="round" d="M 26.9167,13.8542L 50.6666,13.8542L 50.6667,39.5833L 26.9167,63.3333L 26.9167,13.8542 Z "/>
+</svg>
diff --git a/navit/gui/qt5_qml/skins/modern/icons/appbar.map.svg b/navit/gui/qt5_qml/skins/modern/icons/appbar.map.svg
new file mode 100644
index 000000000..241f71e59
--- /dev/null
+++ b/navit/gui/qt5_qml/skins/modern/icons/appbar.map.svg
@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" baseProfile="full" width="76" height="76" viewBox="0 0 76.00 76.00" enable-background="new 0 0 76.00 76.00" xml:space="preserve">
+	<path fill="#ffffff" fill-opacity="1" stroke-width="0.2" stroke-linejoin="round" d="M 27.7083,23.75L 38.7917,26.9167L 48.2917,20.5833L 62,24L 62,51L 48.2917,47.5L 38.7917,53.8333L 27.7083,50.6667L 16,55.5L 16,28.5L 27.7083,23.75 Z M 27,46.25L 27,29L 20,31.75L 20,49L 27,46.25 Z M 49,25.5L 49,42.75L 58,45.25L 58,28L 49,25.5 Z M 39,31.5L 39,49L 48,43L 48,25.5L 39,31.5 Z M 28,28.75L 28,46L 38,48.5L 38,31.75L 28,28.75 Z "/>
+</svg>
diff --git a/navit/gui/qt5_qml/skins/modern/icons/appbar.power.svg b/navit/gui/qt5_qml/skins/modern/icons/appbar.power.svg
new file mode 100644
index 000000000..d3f865c0d
--- /dev/null
+++ b/navit/gui/qt5_qml/skins/modern/icons/appbar.power.svg
@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" baseProfile="full" width="76" height="76" viewBox="0 0 76.00 76.00" enable-background="new 0 0 76.00 76.00" xml:space="preserve">
+	<path fill="#ffffff" fill-opacity="1" stroke-width="0.2" stroke-linejoin="round" d="M 36.4167,36.4167L 36.4167,17.4167L 41.1667,17.4167L 41.1667,36.4167L 36.4167,36.4167 Z M 57,39.5833C 57,50.0767 48.4934,58.5833 38,58.5833C 27.5066,58.5833 19,50.0767 19,39.5833C 19,30.7301 25.0552,23.2911 33.25,21.1819L 33.25,27.8374C 28.6079,29.7165 25.3333,34.2675 25.3333,39.5833C 25.3333,46.5789 31.0044,52.25 38,52.25C 44.9956,52.25 50.6667,46.5789 50.6667,39.5833C 50.6667,34.8949 48.1194,30.8014 44.3333,28.6113L 44.3333,21.6645C 51.7129,24.2728 57,31.3106 57,39.5833 Z "/>
+</svg>
diff --git a/navit/gui/qt5_qml/skins/modern/icons/appbar.rocket.svg b/navit/gui/qt5_qml/skins/modern/icons/appbar.rocket.svg
new file mode 100644
index 000000000..a8c5c273a
--- /dev/null
+++ b/navit/gui/qt5_qml/skins/modern/icons/appbar.rocket.svg
@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" baseProfile="full" width="76" height="76" viewBox="0 0 76.00 76.00" enable-background="new 0 0 76.00 76.00" xml:space="preserve">
+	<path fill="#ffffff" fill-opacity="1" stroke-width="0.2" stroke-linejoin="round" d="M 38,19C 39.4823,20.6344 43,26.1259 43,41L 47,46L 47,55L 43,50L 33,50L 29,55L 29,46L 33,41C 33,26.1259 36.0177,20.6344 38,19 Z M 38,57.5L 35,51L 41,51L 38,57.5 Z M 38,27L 36.1552,27.4612L 35.6203,30.5949L 38,30L 40.2918,30.573L 39.6953,27.4238L 38,27 Z "/>
+</svg>
diff --git a/navit/gui/qt5_qml/skins/modern/icons/appbar.timer.rewind.svg b/navit/gui/qt5_qml/skins/modern/icons/appbar.timer.rewind.svg
new file mode 100644
index 000000000..a02cff6b7
--- /dev/null
+++ b/navit/gui/qt5_qml/skins/modern/icons/appbar.timer.rewind.svg
@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" baseProfile="full" width="76" height="76" viewBox="0 0 76.00 76.00" enable-background="new 0 0 76.00 76.00" xml:space="preserve">
+	<path fill="#ffffff" fill-opacity="1" stroke-width="0.2" stroke-linejoin="round" d="M 53.8333,41.1667C 53.8333,49.9112 46.7445,57 38,57C 29.2555,57 22.1667,49.9112 22.1667,41.1667C 22.1667,32.9565 28.4156,26.2059 36.4167,25.4115L 36.4167,23.75L 31.6667,23.75L 31.6667,19L 44.3333,19L 44.3333,23.75L 39.5833,23.75L 39.5833,25.4115C 42.7678,25.7277 45.6747,26.9874 48.0205,28.907L 49.1629,27.7646L 46.9237,25.5254L 50.2825,22.1667L 57,28.8842L 53.6412,32.2429L 51.4021,30.0038L 50.2597,31.1462C 52.4932,33.8756 53.8333,37.3647 53.8333,41.1667 Z M 26.2296,39.5834L 30.0833,39.5834L 30.0833,42.75L 26.2296,42.75C 26.9347,48.0419 31.1248,52.232 36.4166,52.9371L 36.4166,49.0833L 39.5833,49.0833L 39.5833,52.9371C 44.8752,52.232 49.0653,48.0419 49.7703,42.75L 45.9166,42.75L 45.9166,39.5834L 49.7703,39.5834C 49.0652,34.2915 44.8751,30.1014 39.5833,29.3964L 39.5833,33.25L 36.4166,33.25L 36.4166,29.3964C 31.1248,30.1014 26.9347,34.2915 26.2296,39.5834 Z M 38,38C 39.7488,38 41.1666,39.4178 41.1666,41.1667C 41.1666,42.9156 39.7488,44.3334 38,44.3334L 31.6666,49.0834L 34.8333,41.1667C 34.8333,39.4178 36.2511,38 38,38 Z M 19.7917,33.25L 19.7917,26.938C 17.2963,30.5244 15.8333,34.883 15.8333,39.5833C 15.8333,51.8257 25.7577,61.75 38,61.75L 42.3542,61.75C 54.3778,61.75 64.1249,51.8257 64.125,39.5835C 64.125,54.0119 52.4284,65.7083 38,65.7083C 23.5716,65.7083 11.875,54.0118 11.875,39.5833C 11.875,33.9832 13.6371,28.7946 16.637,24.5417L 11.0833,24.5417L 15.0417,20.5834L 23.75,20.5833L 23.75,29.2917L 19.7917,33.25 Z "/>
+</svg>
diff --git a/navit/gui/qt5_qml/skins/modern/icons/appbar.transit.car.svg b/navit/gui/qt5_qml/skins/modern/icons/appbar.transit.car.svg
new file mode 100644
index 000000000..8ea1a7c5d
--- /dev/null
+++ b/navit/gui/qt5_qml/skins/modern/icons/appbar.transit.car.svg
@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" baseProfile="full" width="76" height="76" viewBox="0 0 76.00 76.00" enable-background="new 0 0 76.00 76.00" xml:space="preserve">
+	<path fill="#ffffff" fill-opacity="1" stroke-width="0.2" stroke-linejoin="round" d="M 17.4167,50.6667C 16.5422,50.6667 15.8333,49.9578 15.8333,49.0833L 15.8333,39.5834C 15.8333,37.0877 17.2768,34.9292 19.3745,33.8972L 25.3333,19L 26.9167,19L 30.0833,19L 45.9167,19L 49.0833,19L 50.6667,19L 56.6255,33.8972C 58.7231,34.9292 60.1666,37.0877 60.1666,39.5834L 60.1667,49.0833C 60.1667,49.9578 59.4578,50.6667 58.5833,50.6667L 57,50.6667L 57,53.8333C 57,55.5822 55.5822,57 53.8333,57C 52.0844,57 50.6667,55.5822 50.6667,53.8333L 50.6667,50.6667L 25.3333,50.6667L 25.3333,53.8333C 25.3333,55.5822 23.9156,57 22.1667,57C 20.4178,57 19,55.5822 19,53.8333L 19,50.6667L 17.4167,50.6667 Z M 24.3833,33.25L 51.6166,33.25L 47.8166,23.75L 28.1833,23.75L 24.3833,33.25 Z M 24.1458,36.0209C 22.3969,36.0209 20.5833,37.8344 20.5833,39.5833C 20.5833,41.3322 22.3969,43.1458 24.1458,43.1458C 25.8947,43.1458 27.7083,41.3323 27.7083,39.5834C 27.7083,37.8345 25.8947,36.0209 24.1458,36.0209 Z M 51.8542,36.0208C 50.1053,36.0208 48.2917,37.8344 48.2917,39.5833C 48.2917,41.3322 50.1053,43.1458 51.8542,43.1458C 53.6031,43.1458 55.4167,41.3322 55.4167,39.5833C 55.4167,37.8344 53.6031,36.0208 51.8542,36.0208 Z "/>
+</svg>
diff --git a/navit/gui/qt5_qml/skins/modern/icons/bigcity.png b/navit/gui/qt5_qml/skins/modern/icons/bigcity.png
new file mode 100644
index 000000000..cdc265d02
--- /dev/null
+++ b/navit/gui/qt5_qml/skins/modern/icons/bigcity.png
diff --git a/navit/gui/qt5_qml/skins/modern/icons/smallcity.png b/navit/gui/qt5_qml/skins/modern/icons/smallcity.png
new file mode 100644
index 000000000..4b8d354ee
--- /dev/null
+++ b/navit/gui/qt5_qml/skins/modern/icons/smallcity.png
diff --git a/navit/gui/qt5_qml/main.qml b/navit/gui/qt5_qml/skins/modern/main.qml
index 6dee2c28b..0654e68d3 100644
--- a/navit/gui/qt5_qml/main.qml
+++ b/navit/gui/qt5_qml/skins/modern/main.qml
@@ -1,18 +1,31 @@
 import com.navit.graphics_qt5 1.0
 import QtQuick 2.2
-// import QtQuick.Controls 1.2
 
 Rectangle {
     width: 800
     height: 480
+
 	Connections {
 		target: backend
+        onHideMenu: {
+               hideMainMenu()
+        }
 		onDisplayMenu: {
-			mainMenu.source = "skins/menu.qml"
+            mainMenu.submenu = source
 			mainMenu.state = 'visible'
-			console.log("showing menu")
-		}
+            console.log("showing menu with submenu " + mainMenu.submenu)
+            mainMenu.source = '' // Needed when switching submenus from the code to refresh the menu
+            mainMenu.source = "menu.qml"
+        }
 	}
+
+    function hideMainMenu(){
+            mainMenu.source = ''
+            mainMenu.state = 'default'
+            backend.resize(navit1.width, navit1.height);
+            console.log("hiding menu window size " + navit1.width + " x " + navit1.height)
+     }
+
 	color: "black"
 	id: container
 
@@ -20,9 +33,10 @@ Rectangle {
 		id: navit1
 		width: parent.width
 		height: parent.height
-		focus: true
+        // focus: true
 		opacity: 0;
 		Component.onCompleted: {
+            console.log(width + "x" + height)
 			navit1.setGraphicContext(graphics_qt5_context);
 			navit1.opacity = 1;
 		}
@@ -38,7 +52,8 @@ Rectangle {
 		width: parent.width
 		height: parent.height
 		x: parent.width
-		opacity: 0
+        opacity: 0
+        property string submenu
 
 		states: [
 			State {
diff --git a/navit/gui/qt5_qml/skins/modern/maps.qml b/navit/gui/qt5_qml/skins/modern/maps.qml
new file mode 100644
index 000000000..2eab6798d
--- /dev/null
+++ b/navit/gui/qt5_qml/skins/modern/maps.qml
@@ -0,0 +1,45 @@
+import QtQuick 2.0
+
+ListView {
+    id: list
+    model: backend.maps
+    delegate: Item {
+        height: 64
+        width: parent.width;
+        Rectangle {
+            color: "#1e1b18"
+            height: parent.height;
+            width: parent.width;
+            border.width: 1
+
+            Image {
+                id: image1
+                height: parent.height - 4;
+                source : active ? "icons/appbar.layer.svg" : "icons/appbar.layer.delete.svg"
+                opacity: active ? 1 : 0.1
+            }
+
+            Text {
+                text: name
+                color: "#ffffff"
+                anchors.verticalCenter: parent.verticalCenter
+                anchors.left: image1.right
+                anchors.leftMargin: 8
+            }
+
+            MouseArea {
+                id: mouse_area1
+                z: 1
+                hoverEnabled: false
+                anchors.fill: parent
+
+                onClicked:{
+                    list.currentIndex = index
+                    console.log("test " + index);
+                }
+            }
+        }
+    }
+
+    Component.onCompleted: backend.get_maps()
+}
diff --git a/navit/gui/qt5_qml/skins/modern/menu.qml b/navit/gui/qt5_qml/skins/modern/menu.qml
new file mode 100644
index 000000000..ee51f68a2
--- /dev/null
+++ b/navit/gui/qt5_qml/skins/modern/menu.qml
@@ -0,0 +1,61 @@
+import QtQuick.Layouts 1.0
+import QtQuick 2.2
+
+Item {
+    Rectangle {
+        id: menuArea
+        color: "#1e1b18"
+        width: parent.width
+        y: topBar.height
+        height: parent.height - ( topBar.height + bottomBar.height )
+        
+        Loader {
+            id: menucontent
+            width: parent.width
+            height: parent.height
+            Component.onCompleted: {
+                console.log("submenu : " + mainMenu.submenu)
+                menucontent.source = mainMenu.submenu
+            }
+        }
+    }
+
+    Rectangle {
+        id: bottomBar
+        width: parent.width
+        height: 64
+        color: "#1e1b18"
+        anchors.bottom: parent.bottom
+        anchors.bottomMargin: 0
+
+        MainButton {
+            id: mainButton3
+            x: 380
+            y: 220
+            width: 260
+            height: 56
+            radius: 1
+            text: "Map"
+            anchors.right: parent.right
+            anchors.rightMargin: 4
+            anchors.bottom: parent.bottom
+            anchors.bottomMargin: 4
+            Layout.fillHeight: true
+            Layout.fillWidth: true
+            icon: "icons/appbar.map.svg"
+            onClicked: {
+                 container.hideMainMenu()
+            }
+
+        }
+    }
+
+    Rectangle {
+        id: topBar
+        width: parent.width
+        height: 80
+        color: "#1e1b18"
+        anchors.top: parent.top
+    }
+
+}
diff --git a/navit/gui/qt5_qml/skins/modern/navit.svg b/navit/gui/qt5_qml/skins/modern/navit.svg
new file mode 100644
index 000000000..591d9ee57
--- /dev/null
+++ b/navit/gui/qt5_qml/skins/modern/navit.svg
@@ -0,0 +1,393 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:xlink="http://www.w3.org/1999/xlink"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="22"
+   height="22"
+   id="svg2"
+   sodipodi:version="0.32"
+   inkscape:version="0.48.4 r9939"
+   version="1.0"
+   sodipodi:docname="navit.svg"
+   inkscape:output_extension="org.inkscape.output.svg.inkscape"
+   inkscape:export-filename="/home/jeff/projets/navit/navit.png"
+   inkscape:export-xdpi="90"
+   inkscape:export-ydpi="90">
+  <defs
+     id="defs4">
+    <linearGradient
+       inkscape:collect="always"
+       id="linearGradient3376">
+      <stop
+         style="stop-color:#000000;stop-opacity:1;"
+         offset="0"
+         id="stop3378" />
+      <stop
+         style="stop-color:#000000;stop-opacity:0;"
+         offset="1"
+         id="stop3380" />
+    </linearGradient>
+    <linearGradient
+       id="linearGradient3365">
+      <stop
+         style="stop-color:#ffffff;stop-opacity:0.61904764;"
+         offset="0"
+         id="stop3367" />
+      <stop
+         style="stop-color:#ffffff;stop-opacity:0;"
+         offset="1"
+         id="stop3369" />
+    </linearGradient>
+    <linearGradient
+       inkscape:collect="always"
+       id="linearGradient3328">
+      <stop
+         style="stop-color:#ffffff;stop-opacity:1;"
+         offset="0"
+         id="stop3330" />
+      <stop
+         style="stop-color:#ffffff;stop-opacity:0;"
+         offset="1"
+         id="stop3332" />
+    </linearGradient>
+    <linearGradient
+       id="linearGradient3320">
+      <stop
+         style="stop-color:#116cbf;stop-opacity:1;"
+         offset="0"
+         id="stop3322" />
+      <stop
+         id="stop3354"
+         offset="0.08"
+         style="stop-color:#116cbf;stop-opacity:1;" />
+      <stop
+         id="stop3352"
+         offset="0.4893617"
+         style="stop-color:#1a6cb6;stop-opacity:1;" />
+      <stop
+         style="stop-color:#329eff;stop-opacity:1;"
+         offset="1"
+         id="stop3324" />
+    </linearGradient>
+    <linearGradient
+       id="linearGradient3308">
+      <stop
+         style="stop-color:#062643;stop-opacity:1;"
+         offset="0"
+         id="stop3310" />
+      <stop
+         style="stop-color:#0d5799;stop-opacity:1;"
+         offset="1"
+         id="stop3312" />
+    </linearGradient>
+    <linearGradient
+       id="linearGradient3235">
+      <stop
+         style="stop-color:#c17d11;stop-opacity:1;"
+         offset="0"
+         id="stop3237" />
+      <stop
+         style="stop-color:#e9cb14;stop-opacity:1;"
+         offset="1"
+         id="stop3239" />
+    </linearGradient>
+    <linearGradient
+       id="linearGradient3227">
+      <stop
+         style="stop-color:#76650c;stop-opacity:1;"
+         offset="0"
+         id="stop3229" />
+      <stop
+         style="stop-color:#76650c;stop-opacity:0;"
+         offset="1"
+         id="stop3231" />
+    </linearGradient>
+    <inkscape:perspective
+       sodipodi:type="inkscape:persp3d"
+       inkscape:vp_x="15.556349 : 133.02972 : 1"
+       inkscape:vp_y="0 : 1000 : 0"
+       inkscape:vp_z="744.09448 : 526.18109 : 1"
+       inkscape:persp3d-origin="372.04724 : 350.78739 : 1"
+       id="perspective10" />
+    <linearGradient
+       inkscape:collect="always"
+       xlink:href="#linearGradient3235"
+       id="linearGradient3241"
+       x1="64"
+       y1="115.11359"
+       x2="64"
+       y2="17.40102"
+       gradientUnits="userSpaceOnUse"
+       gradientTransform="matrix(0.15819674,0,0,0.15819674,1.9928719,0.69315656)" />
+    <linearGradient
+       inkscape:collect="always"
+       xlink:href="#linearGradient3308"
+       id="linearGradient3314"
+       x1="-7.7781754"
+       y1="4.2563133"
+       x2="43.133514"
+       y2="4.2563133"
+       gradientUnits="userSpaceOnUse" />
+    <linearGradient
+       inkscape:collect="always"
+       xlink:href="#linearGradient3320"
+       id="linearGradient3326"
+       x1="7.6363606"
+       y1="87.731171"
+       x2="58.391151"
+       y2="38.450466"
+       gradientUnits="userSpaceOnUse"
+       gradientTransform="matrix(0.15669503,0.02174581,-0.02174581,0.15669503,4.357122,0.76802046)" />
+    <linearGradient
+       inkscape:collect="always"
+       xlink:href="#linearGradient3227"
+       id="linearGradient3340"
+       gradientUnits="userSpaceOnUse"
+       x1="63"
+       y1="106.75"
+       x2="92"
+       y2="29.25" />
+    <linearGradient
+       inkscape:collect="always"
+       xlink:href="#linearGradient3328"
+       id="linearGradient3342"
+       gradientUnits="userSpaceOnUse"
+       x1="71"
+       y1="69.5"
+       x2="87.25"
+       y2="33.5" />
+    <linearGradient
+       inkscape:collect="always"
+       xlink:href="#linearGradient3365"
+       id="linearGradient3371"
+       x1="-1.5"
+       y1="86.5"
+       x2="73.5"
+       y2="40"
+       gradientUnits="userSpaceOnUse"
+       gradientTransform="matrix(0.15819674,0,0,0.15819674,1.9928719,0.69315656)" />
+    <linearGradient
+       inkscape:collect="always"
+       xlink:href="#linearGradient3376"
+       id="linearGradient3382"
+       x1="62.147858"
+       y1="67.453751"
+       x2="11.016594"
+       y2="24.242672"
+       gradientUnits="userSpaceOnUse" />
+    <filter
+       inkscape:collect="always"
+       id="filter3424">
+      <feGaussianBlur
+         inkscape:collect="always"
+         stdDeviation="0.90523025"
+         id="feGaussianBlur3426" />
+    </filter>
+  </defs>
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0.0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="11.313708"
+     inkscape:cx="16.894586"
+     inkscape:cy="27.303943"
+     inkscape:document-units="px"
+     inkscape:current-layer="layer2"
+     showgrid="false"
+     inkscape:window-width="1280"
+     inkscape:window-height="948"
+     inkscape:window-x="0"
+     inkscape:window-y="24"
+     showborder="true"
+     inkscape:window-maximized="1" />
+  <metadata
+     id="metadata7">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:label="Calque 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     style="display:inline">
+    <rect
+       style="fill:url(#linearGradient3241);fill-opacity:1;stroke:#43350f;stroke-width:0.79098374;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none"
+       id="rect2403"
+       width="18.792814"
+       height="15.381022"
+       x="2.7210562"
+       y="3.1272359"
+       rx="1.5819675"
+       ry="1.5819675" />
+  </g>
+  <g
+     inkscape:groupmode="layer"
+     id="layer2"
+     inkscape:label="lignes"
+     style="display:inline">
+    <g
+       id="g3336"
+       transform="matrix(0.15819674,0,0,0.15819674,5.1568068,0.69315656)">
+      <path
+         sodipodi:nodetypes="cczzczc"
+         id="path3223"
+         d="m 92,27 8,-4 c 0,0 -32.803776,29.787015 -21.5,41.25 11.303776,11.462985 5.61873,46.35859 -6,46.25 L 19,110 C 39.916667,101.41667 73.874441,83.136394 61,66.25 48.125559,49.363606 92,27 92,27 z"
+         style="fill:url(#linearGradient3340);fill-opacity:1;stroke:none"
+         inkscape:connector-curvature="0" />
+      <path
+         sodipodi:nodetypes="czc"
+         id="path3244"
+         d="M 49.5,110 C 60.666667,104.16667 83.256846,86.358298 72,70.5 60.743153,54.641702 77.5,38.5 92.5,29"
+         style="fill:none;stroke:url(#linearGradient3342);stroke-width:1.5;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:9, 9;stroke-dashoffset:0"
+         inkscape:connector-curvature="0" />
+    </g>
+  </g>
+  <g
+     inkscape:groupmode="layer"
+     id="layer4"
+     inkscape:label="bulle"
+     style="display:none">
+    <path
+       sodipodi:type="arc"
+       style="fill:url(#linearGradient3314);fill-opacity:1;stroke:#1f3157;stroke-width:5.30526352;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0"
+       id="path3305"
+       sodipodi:cx="17.67767"
+       sodipodi:cy="4.2563133"
+       sodipodi:rx="25.455845"
+       sodipodi:ry="25.455845"
+       d="m 43.133514,4.2563133 a 25.455845,25.455845 0 1 1 -50.9116894,0 25.455845,25.455845 0 1 1 50.9116894,0 z"
+       transform="matrix(1.3194444,0,0,1.3194444,18.394598,29.399489)" />
+  </g>
+  <g
+     inkscape:groupmode="layer"
+     id="layer3"
+     inkscape:label="rose des vents"
+     style="display:none">
+    <g
+       id="g3256"
+       transform="matrix(0.7071068,0.7071068,-0.7071068,0.7071068,36.903806,-19.093669)"
+       style="opacity:0.5">
+      <path
+         transform="translate(67.5,7)"
+         d="m -25.999999,61.185085 -5.673657,-27.511429 -27.511429,-5.673655 27.511429,-5.673657 5.673655,-27.5114293 5.673657,27.5114293 27.5114293,5.673655 -27.5114293,5.673657 z"
+         inkscape:randomized="0"
+         inkscape:rounded="0"
+         inkscape:flatsided="false"
+         sodipodi:arg2="2.3561945"
+         sodipodi:arg1="1.5707963"
+         sodipodi:r2="8.0237608"
+         sodipodi:r1="33.185085"
+         sodipodi:cy="28"
+         sodipodi:cx="-26"
+         sodipodi:sides="4"
+         id="path3258"
+         style="fill:#167bd9;fill-opacity:1;stroke:none"
+         sodipodi:type="star" />
+      <path
+         transform="translate(67.5,7)"
+         d="m -25.999999,61.185085 6.826343,-33.011429 -40.011429,-0.173655 33.011429,6.826343 0.173655,-40.0114293 -6.826343,33.0114293 40.0114293,0.173655 -33.0114293,-6.826343 z"
+         inkscape:randomized="0"
+         inkscape:rounded="0"
+         inkscape:flatsided="false"
+         sodipodi:arg2="0.025433549"
+         sodipodi:arg1="1.5707963"
+         sodipodi:r2="6.8285527"
+         sodipodi:r1="33.185085"
+         sodipodi:cy="28"
+         sodipodi:cx="-26"
+         sodipodi:sides="4"
+         id="path3260"
+         style="fill:#c3dff9;fill-opacity:1;stroke:none"
+         sodipodi:type="star" />
+    </g>
+    <g
+       id="g3252">
+      <path
+         transform="translate(67.5,7)"
+         d="m -25.999999,61.185085 -5.673657,-27.511429 -27.511429,-5.673655 27.511429,-5.673657 5.673655,-27.5114293 5.673657,27.5114293 27.5114293,5.673655 -27.5114293,5.673657 z"
+         inkscape:randomized="0"
+         inkscape:rounded="0"
+         inkscape:flatsided="false"
+         sodipodi:arg2="2.3561945"
+         sodipodi:arg1="1.5707963"
+         sodipodi:r2="8.0237608"
+         sodipodi:r1="33.185085"
+         sodipodi:cy="28"
+         sodipodi:cx="-26"
+         sodipodi:sides="4"
+         id="path3248"
+         style="fill:#167bd9;fill-opacity:1;stroke:none"
+         sodipodi:type="star" />
+      <path
+         transform="translate(67.5,7)"
+         d="m -25.999999,61.185085 6.826343,-33.011429 -40.011429,-0.173655 33.011429,6.826343 0.173655,-40.0114293 -6.826343,33.0114293 40.0114293,0.173655 -33.0114293,-6.826343 z"
+         inkscape:randomized="0"
+         inkscape:rounded="0"
+         inkscape:flatsided="false"
+         sodipodi:arg2="0.025433549"
+         sodipodi:arg1="1.5707963"
+         sodipodi:r2="6.8285527"
+         sodipodi:r1="33.185085"
+         sodipodi:cy="28"
+         sodipodi:cx="-26"
+         sodipodi:sides="4"
+         id="path3250"
+         style="fill:#c3dff9;fill-opacity:1;stroke:none"
+         sodipodi:type="star" />
+    </g>
+  </g>
+  <g
+     inkscape:groupmode="layer"
+     id="layer6"
+     inkscape:label="ondes"
+     style="display:inline">
+    <path
+       sodipodi:type="spiral"
+       style="fill:none;stroke:url(#linearGradient3382);stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;filter:url(#filter3424)"
+       id="path3374"
+       sodipodi:cx="14.142136"
+       sodipodi:cy="19.812662"
+       sodipodi:expansion="1"
+       sodipodi:revolution="7"
+       sodipodi:radius="54.341515"
+       sodipodi:argument="-17.841497"
+       sodipodi:t0="0"
+       d="m 14.142136,19.812662 c 0.622964,0.987625 -1.02395,1.327003 -1.641498,1.035408 -1.673515,-0.790205 -1.44576,-3.111369 -0.429317,-4.318403 1.818177,-2.1591 5.16668,-1.702115 6.995307,0.176773 2.683583,2.757343 1.972982,7.252372 -0.782863,9.672211 C 14.610657,29.603916 8.9345884,28.6291 5.934649,24.989699 2.1595315,20.409885 3.4032379,13.538342 7.9296913,9.9636782 13.411833,5.6342815 21.486273,7.1492634 25.632617,12.56481 30.51894,18.946845 28.731319,28.228517 22.425395,32.944641 15.144955,38.389593 4.6532955,36.328487 -0.63134024,29.131329 -6.6360792,20.95346 -4.300928,9.2499464 3.7880618,3.3976889 12.862686,-3.1676594 25.779376,-0.55807441 32.198606,8.4231809 39.325168,18.394077 36.440869,32.524914 26.567024,39.51063 15.700216,47.198863 0.35449515,44.039641 -7.1973295,33.272958 -15.447588,21.510513 -12.013284,4.9493376 -0.35356778,-3.1683003 12.304301,-11.980865 30.081381,-8.2713528 38.764595,4.2815513 48.13969,17.834674 44.154872,36.828022 30.708654,46.076619 16.260416,56.014427 -3.9494981,51.754222 -13.763319,37.414588 -24.263992,22.071347 -19.728335,0.64462208 -4.4951973,-9.7342896 11.742953,-20.797954 34.386694,-15.98679 45.330585,0.1399218 56.957348,17.272902 51.870631,41.133834 34.850283,52.642608 16.822539,64.832562 -8.2557318,59.470254 -20.329308,41.556217 -33.082529,22.633765 -27.444596,-3.6619713 -8.6368269,-16.300279 11.180283,-29.616836 38.693597,-23.70325 51.896574,-4.0017077 65.776525,16.710018 59.587261,45.441005 38.991913,59.208598 17.385609,73.651995 -12.563136,67.187032 -26.895297,45.697847 -41.902187,23.196997 -35.161504,-7.9695799 -12.778456,-22.866268 10.616911,-38.436689 43.001386,-31.420272 58.462563,-8.1433373 74.596552,16.146521 67.304385,49.748954 43.133542,65.774587"
+       transform="matrix(-0.15819674,0,0,0.15819674,22.262049,1.7055356)" />
+  </g>
+  <g
+     inkscape:groupmode="layer"
+     id="layer5"
+     inkscape:label="flèche"
+     style="display:inline">
+    <path
+       style="fill:url(#linearGradient3326);fill-opacity:1;stroke:#1f3157;stroke-width:0.47459021;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0"
+       d="M 5.6166617,6.6702162 C 8.5498903,6.3591404 11.366732,6.8627725 14.089084,8.0278339 L 12.323485,12.25995 11.465549,10.2747 C 9.1936105,11.38659 7.6712925,13.621104 6.8096897,16.845097 L 0.57820215,12.334567 C 2.318135,10.026025 5.9650066,8.1110997 8.889601,7.8565979 L 5.6166617,6.6702162 z"
+       id="rect3317"
+       sodipodi:nodetypes="cccccccc"
+       inkscape:connector-curvature="0" />
+    <path
+       style="fill:url(#linearGradient3371);fill-opacity:1;stroke:none"
+       d="M 8.2416433,7.021026 C 9.8257327,6.8500961 11.315051,7.2477939 12.75025,7.9702064 8.920071,9.4835882 6.1923078,11.598289 4.6822166,14.377175 L 1.7555768,12.162421 C 3.6037773,9.8056523 6.570797,8.7541746 9.6654142,7.8515586 L 8.2416433,7.021026 z"
+       id="rect3362"
+       sodipodi:nodetypes="cccccc"
+       inkscape:connector-curvature="0" />
+  </g>
+</svg>
diff --git a/navit/gui/qt5_qml/skins/modern/poi.qml b/navit/gui/qt5_qml/skins/modern/poi.qml
new file mode 100644
index 000000000..8501f517e
--- /dev/null
+++ b/navit/gui/qt5_qml/skins/modern/poi.qml
@@ -0,0 +1,107 @@
+import QtQuick 2.0
+import QtQuick.Layouts 1.0
+import com.navit.graphics_qt5 1.0
+
+
+Item {
+    id: poiItem
+    visible: true
+    property var small_font_size : 16
+
+
+    Text {
+        x: 8
+        y: 8
+        color: "#ffffff"
+        text: backend.activePoi.name
+        font.pixelSize: 32
+    }
+
+    Text {
+        x: 80
+        y: 64
+        color: "#ffffff"
+        text: qsTr("Type")
+        font.pixelSize: small_font_size
+    }
+
+    Text {
+        x: 80
+        y: 96
+        color: "#ffffff"
+        text: qsTr("Distance")
+        font.pixelSize: small_font_size
+    }
+
+    Text {
+        x: 160
+        y: 64
+        color: "#ffffff"
+        text: backend.activePoi.type
+        font.pixelSize: small_font_size
+    }
+
+    Text {
+        x: 160
+        y: 96
+        color: "#ffffff"
+        text: backend.activePoi.distance
+        font.pixelSize: small_font_size
+    }
+
+    Rectangle {
+        id: rectangle
+        x: 8
+        y: 64
+        height: 64
+        width: height
+        color: "#ffffff"
+        radius: 8
+        border.width: 1
+        Image {
+            height: parent.width
+            width: parent.height
+            source : backend.get_icon_path() + backend.activePoi.icon
+            sourceSize.width: parent.width
+            sourceSize.height: parent.height
+        }
+    }
+
+    ColumnLayout {
+        id: columnLayout
+        width: parent.width/2
+        height: parent.height
+        anchors.right: parent.right
+        anchors.rightMargin: 0
+        QNavitQuick {
+            id: navit1
+            width: 300
+            height: 240
+            Component.onCompleted: {
+                navit1.setGraphicContext(graphics_qt5_context)
+            }
+            Component.onDestruction: {
+                console.log("Destroying a navit widget. Blocking draw operations")
+                backend.block_draw()
+            }
+        }
+    }
+
+    MainButton {
+        id: mainButton3
+        x: 8
+        y: parent.height-78
+        width: parent.width/2 - 16
+        height: 64
+        radius: 1
+        text: "Set as destination"
+        icon: "icons/appbar.location.checkin.svg"
+        onClicked: {
+            backend.setActivePoiAsDestination()
+        }
+
+    }
+
+
+
+}
diff --git a/navit/gui/qt5_qml/skins/modern/pois.qml b/navit/gui/qt5_qml/skins/modern/pois.qml
new file mode 100644
index 000000000..d70ea8b10
--- /dev/null
+++ b/navit/gui/qt5_qml/skins/modern/pois.qml
@@ -0,0 +1,128 @@
+import QtQuick 2.0
+
+Item {
+    id: poiList
+    ListView {
+        anchors.fill: parent
+        id: listView
+        model: backend.pois
+        delegate: Item {
+            height: 64
+            width: parent.width;
+            Rectangle {
+                color: "#1e1b18"
+                height: parent.height;
+                width: parent.width;
+                border.width: 1
+
+                Image {
+                    id: image1
+                    height: parent.height - 4;
+                    width: height
+//                    smooth: true
+                    source : backend.get_icon_path() + icon
+                    sourceSize.width: parent.width
+                    sourceSize.height: parent.height
+                }
+
+                Text {
+                    width: 128
+                    id: distanceText
+                    text: distance
+                    color: "#ffffff"
+                    anchors.verticalCenter: parent.verticalCenter
+                    anchors.left: image1.right
+                    anchors.leftMargin: 8
+                }
+
+                Text {
+                    text: name
+                    color: "#ffffff"
+                    anchors.verticalCenter: parent.verticalCenter
+                    anchors.left: distanceText.right
+                    anchors.leftMargin: 8
+                }
+
+                MouseArea {
+                    id: mouse_area1
+                    z: 1
+                    hoverEnabled: false
+                    anchors.fill: parent
+
+                    onClicked:{
+                        listView.currentIndex = index
+                        backend.setActivePoi(index);
+                        menucontent.source = "poi.qml"
+                    }
+                }
+            }
+
+        }
+
+        Component.onCompleted: backend.get_pois()
+    }
+
+    Rectangle {
+        height: 64
+        width: height
+
+        x: parent.width - width
+        y: parent.height - height * 2
+
+        color: "#35322f"
+
+        Image {
+            anchors.centerIn: parent
+            source: "icons/appbar.chevron.up.svg"
+        }
+
+        MouseArea {
+            anchors.fill: parent
+            id: listUp
+
+            SmoothedAnimation {
+                target: listView
+                property: "contentY"
+                running: listUp.pressed
+                velocity: 1000
+                to: 0
+            }
+            onReleased: {
+                if (!listView.atYBeginning)
+                    listView.flick(0, 1000)
+            }
+        }
+    }
+
+    Rectangle {
+        height: 64
+        width: height
+
+        x: parent.width - width
+        y: parent.height - height
+
+        color: "#35322f"
+
+        Image {
+            anchors.centerIn: parent
+            source: "icons/appbar.chevron.down.svg"
+        }
+
+        MouseArea {
+            anchors.fill: parent
+            id: listDown
+
+            SmoothedAnimation {
+                target: listView
+                property: "contentY"
+                running: listDown.pressed
+                to: listView.contentHeight - listView.height
+                velocity: 1000
+            }
+            onReleased: {
+                if (!listView.atYEnd)
+                    listView.flick(0, -1000)
+            }
+        }
+    }
+}
diff --git a/navit/gui/qt5_qml/skins/modern/search.qml b/navit/gui/qt5_qml/skins/modern/search.qml
new file mode 100644
index 000000000..510d18b75
--- /dev/null
+++ b/navit/gui/qt5_qml/skins/modern/search.qml
@@ -0,0 +1,171 @@
+import QtQuick 2.0
+
+Item {
+    Item {
+        x : 16
+        y : 64
+        width: parent.width-32
+        height: parent.height-64
+        id: searchResults
+        ListView {
+            anchors.fill: parent
+            id: listView
+            model: backend.searchresults
+            delegate: Item {
+                height: 64
+                width: parent.width;
+                Rectangle {
+                    color: "#1e1b18"
+                    height: parent.height;
+                    width: parent.width;
+                    border.width: 1
+
+                    Image {
+                        id: image1
+                        height: 36;
+                        width: 64
+                        source : icon
+                        fillMode: Image.PreserveAspectFit
+                        // sourceSize.width: parent.width
+                        // sourceSize.height: parent.height
+                    }
+
+                    Text {
+                        text: name
+                        color: "#ffffff"
+                        anchors.verticalCenter: parent.verticalCenter
+                        anchors.left: image1.right
+                        anchors.leftMargin: 8
+                    }
+
+                    MouseArea {
+                        id: mouse_area1
+                        z: 1
+                        hoverEnabled: false
+                        anchors.fill: parent
+
+                        onClicked:{
+                            listView.currentIndex = index
+                            backend.searchValidateResult(index)
+//                            backend.setActivePoi(index);
+                            //                            menucontent.source = "poi.qml"
+                        }
+                    }
+                }
+
+            }
+            Component.onCompleted: {
+                backend.updateSearch("")
+            }
+
+        }
+
+        Rectangle {
+            height: 64
+            width: height
+
+            x: parent.width - width
+            y: parent.height - height * 2
+
+            color: "#35322f"
+
+            Image {
+                anchors.centerIn: parent
+                source: "icons/appbar.chevron.up.svg"
+            }
+
+            MouseArea {
+                anchors.fill: parent
+                id: listUp
+
+                SmoothedAnimation {
+                    target: listView
+                    property: "contentY"
+                    running: listUp.pressed
+                    velocity: 1000
+                    to: 0
+                }
+                onReleased: {
+                    if (!listView.atYBeginning)
+                        listView.flick(0, 1000)
+                }
+            }
+        }
+
+        Rectangle {
+            height: 64
+            width: height
+
+            x: parent.width - width
+            y: parent.height - height
+
+            color: "#35322f"
+
+            Image {
+                anchors.centerIn: parent
+                source: "icons/appbar.chevron.down.svg"
+            }
+
+            MouseArea {
+                anchors.fill: parent
+                id: listDown
+
+                SmoothedAnimation {
+                    target: listView
+                    property: "contentY"
+                    running: listDown.pressed
+                    to: listView.contentHeight - listView.height
+                    velocity: 1000
+                }
+                onReleased: {
+                    if (!listView.atYEnd)
+                        listView.flick(0, -1000)
+                }
+            }
+        }
+    }
+
+    Rectangle {
+        id: rectangle
+        x: 16
+        y: 16
+        width: parent.width-32
+        height: 50
+        color: "#35322f"
+        radius: 3
+        border.width: 1
+
+        Image {
+            id: image
+            x: 16
+            y: 2
+            width: 64
+            height: 48
+            fillMode: Image.PreserveAspectFit
+            source: backend.get_country_icon("")
+        }
+
+
+        TextEdit {
+            id: textEdit
+            y: 8
+            height: 20
+            color: "#ffffff"
+            text: qsTr("")
+            focus: true
+            anchors.rightMargin: 8
+            anchors.verticalCenterOffset: 0
+            anchors.leftMargin: 8
+            horizontalAlignment: Text.AlignLeft
+            anchors.verticalCenter: parent.verticalCenter
+            anchors.top: parent.top
+            anchors.right: parent.right
+            anchors.left: image.right
+            font.pixelSize: 24
+            onTextChanged: {
+                backend.updateSearch(textEdit.text)
+            }
+        }
+    }
+
+}
diff --git a/navit/gui/qt5_qml/skins/modern/settings.qml b/navit/gui/qt5_qml/skins/modern/settings.qml
new file mode 100644
index 000000000..d2a50d764
--- /dev/null
+++ b/navit/gui/qt5_qml/skins/modern/settings.qml
@@ -0,0 +1,41 @@
+import QtQuick 2.0
+import QtQuick.Layouts 1.0
+
+
+GridLayout {
+    id: gridLayout
+    height: 200
+    columnSpacing: 4
+    rowSpacing: 4
+    rows: 3
+    columns: 2
+
+    MainButton {
+        text: "Maps"
+        icon: "icons/appbar.layer.svg"
+        Layout.fillHeight: true
+        Layout.fillWidth: true
+        onClicked: {
+            menucontent.source = "maps.qml"
+        }
+    }
+    MainButton {
+        text: "Vehicles"
+        icon: "icons/appbar.transit.car.svg"
+        Layout.fillHeight: true
+        Layout.fillWidth: true
+    }
+    MainButton {
+        text: "Display"
+        icon: "icons/appbar.fullscreen.box.svg"
+        Layout.fillHeight: true
+        Layout.fillWidth: true
+    }
+
+    MainButton {
+        text: "Rules"
+        icon: "icons/appbar.cogs.svg"
+        Layout.fillHeight: true
+        Layout.fillWidth: true
+    }
+}