Index: sources/gui/qml/components/HeaderBar.qml
===================================================================
diff -u -r0808e668ca656c86185c3fa69e4a70dbdb4192c9 -r31617ae652a85b46756ae4046d6df0c9570a84b0
--- sources/gui/qml/components/HeaderBar.qml	(.../HeaderBar.qml)	(revision 0808e668ca656c86185c3fa69e4a70dbdb4192c9)
+++ sources/gui/qml/components/HeaderBar.qml	(.../HeaderBar.qml)	(revision 31617ae652a85b46756ae4046d6df0c9570a84b0)
@@ -1,4 +1,5 @@
 import QtQuick 2.12
+import QtQuick.Controls 2.12 // Dialog
 
 import "qrc:/globals"
 import "qrc:/components"
@@ -17,6 +18,15 @@
         GradientStop { position: 0.8; color: Qt.darker (Colors.backgroundMain, 1.2) }
     }
 
+    function getPopupXCoord ( button, dialog) {
+        var globalPoint = button.mapToGlobal(0, 0);
+        return globalPoint.x - dialog.width + button.width  // to right align dialog with button right align
+    }
+
+    Component.onCompleted: {
+        dialog.x  = getPopupXCoord(_wifiButton, dialog)
+    }
+
     Item { id: _dateTimeItem
         width   : Variables.headerBarDateTimeWidth
         anchors {
@@ -63,7 +73,7 @@
         font.pixelSize: 14
     }
 
-    Text { id: _ipAddress   // TEST : Wireless IP
+    Text { id: _timeZone    // TEST : Current timezone
         color   : Colors.textMain
         anchors {
             top         : parent.top
@@ -74,22 +84,6 @@
 
         height  : 15
         width   : _root.width / 5
-
-        text    : "W: " + vDevice.ipAddress
-        font.pixelSize: 15
-    }
-
-    Text { id: _timeZone    // TEST : Current timezone
-        color   : Colors.textMain
-        anchors {
-            top         : parent.top
-            left        : _ipAddress.right
-        }
-        horizontalAlignment : Text.Alignleft
-        verticalAlignment   : Text.AlignBottom
-
-        height  : 15
-        width   : _root.width / 5
         text    : vDateTime.timezone
         font.pixelSize: 14
     }
@@ -115,6 +109,28 @@
         }
     }
 
+    ModalDialog { id: dialog
+        width               : 250
+        height              : 150
+        lighterDimOVerlay   : true
+        closePolicy:  Dialog.CloseOnPressOutside
+        y           : Variables.headerHeight + 5
+
+        Text {
+            text: "x: " + dialog.x + "\ny: " + dialog.y
+            color: "White"
+            font.pixelSize: 30
+            anchors.bottom: parent.bottom
+        }
+        Text {  id: _ipAddress
+            text            : ("%1: %2").arg(qsTr("IP")).arg(vDevice.ipAddress)
+            color           : Colors.white
+            font.pixelSize  : 30
+        }
+
+    }
+
+
     Row { id: _headerButtonRow
         height      : parent.height
         spacing     : Variables.defaultMargin * 2
@@ -137,7 +153,7 @@
             iconImageSource : "qrc:/images/iWifi"
             extraSpace      : _headerButtonRow.spacing
 
-            onPressed: print("Wifi button pressed!")
+            onPressed       : dialog.open()
         }
 
         IconButton { id  : _bluetoothButton
Index: sources/gui/qml/components/ModalDialog.qml
===================================================================
diff -u -rea51c0546c7061d225e7b9d8b754554c65f0d1b1 -r31617ae652a85b46756ae4046d6df0c9570a84b0
--- sources/gui/qml/components/ModalDialog.qml	(.../ModalDialog.qml)	(revision ea51c0546c7061d225e7b9d8b754554c65f0d1b1)
+++ sources/gui/qml/components/ModalDialog.qml	(.../ModalDialog.qml)	(revision 31617ae652a85b46756ae4046d6df0c9570a84b0)
@@ -35,6 +35,7 @@
     property alias  radius              : _backgroundRect.radius
     property alias  notificationText    : _notification.text
     property alias  notification        : _notification
+    property bool   lighterDimOVerlay   : false
 
     width   : Variables.dialogWidth
     height  : Variables.dialogHeight
@@ -50,10 +51,13 @@
 
     closePolicy: Dialog.NoAutoClose
     Overlay.modal : Rectangle { id : _borderRect
-        anchors.fill    : parent
+        anchors.fill        : parent
         anchors.bottomMargin:  _alarmBar.visible ? Variables.notificationHeight : 0
-        color           : "#B3000000"
 
+        // darker (60%) for main bigger dialogs and lighter (20%) for smaller headerbar dialogs
+        color               : lighterDimOVerlay ? "#33000000"  :
+                                                  "#99000000"
+
         Behavior on opacity { NumberAnimation { duration: 300} }
     }