diff --git a/sandbox/DemoApp.qml b/sandbox/DemoApp.qml
index af4a7c16..59edb6b1 100644
--- a/sandbox/DemoApp.qml
+++ b/sandbox/DemoApp.qml
@@ -14,9 +14,9 @@ import "demoapp/data" 1.0
 
 Rectangle {
     id: demoApp
-    height: 602
-    width: 1002
-    border.width: 1
+    height: Theme.dp(602)
+    width: Theme.dp(1002)
+    border.width: Theme.dp(1)
     border.color: Theme.palette.baseColor2
 
     property string titleStyle: "osx"
@@ -50,7 +50,7 @@ Rectangle {
     StatusMacTrafficLights {
         anchors.left: parent.left
         anchors.top: parent.top
-        anchors.margins: 13
+        anchors.margins: Theme.dp(13)
         z: statusAppLayout.z + 1
         visible: titleStyle === "osx"
     }
@@ -112,7 +112,7 @@ Rectangle {
                 badge.value: model.notificationsCount
                 badge.visible: model.hasNotification
                 badge.border.color: hovered ? Theme.palette.statusBadge.hoverBorderColor : Theme.palette.statusBadge.borderColor
-                badge.border.width: 2
+                badge.border.width: Theme.dp(2)
                 onClicked: {
                     if(model.sectionType === appSectionType.chat)
                     {
@@ -143,7 +143,7 @@ Rectangle {
                 badge.value: model.notificationsCount
                 badge.visible: model.hasNotification
                 badge.border.color: hovered ? Theme.palette.statusBadge.hoverBorderColor : Theme.palette.statusBadge.borderColor
-                badge.border.width: 2
+                badge.border.width: Theme.dp(2)
                 onClicked: {
                     if(model.sectionType === appSectionType.community)
                     {
@@ -175,7 +175,7 @@ Rectangle {
                     StatusMenuItem {
                         text: qsTr("Leave Community")
                         icon.name: "arrow-right"
-                        icon.width: 14
+                        icon.width: Theme.dp(14)
                         iconRotation: 180
                         type: StatusMenuItem.Type.Danger
                     }
diff --git a/sandbox/ThemeSwitch.qml b/sandbox/ThemeSwitch.qml
index 51b8f1f1..172541d2 100644
--- a/sandbox/ThemeSwitch.qml
+++ b/sandbox/ThemeSwitch.qml
@@ -2,6 +2,7 @@ import QtQuick 2.14
 import QtQuick.Controls 2.14
 
 import StatusQ.Controls 0.1
+import StatusQ.Core.Theme 0.1
 
 Item {
     id: themeSwitchWrapper
@@ -19,11 +20,11 @@ Item {
 
         Row {
             id: themeSwitch
-            spacing: 2
+            spacing: Theme.dp(2)
 
             Text {
                 text: "🌤"
-                font.pixelSize: 15
+                font.pixelSize: Theme.dp(15)
                 anchors.verticalCenter: parent.verticalCenter
             }
 
@@ -35,13 +36,13 @@ Item {
                     text: "Toggle Theme"
                     visible: sensor.containsMouse
                     orientation: StatusToolTip.Orientation.Bottom
-                    y: themeSwitchWrapper.y + 16
+                    y: themeSwitchWrapper.y + Theme.dp(16)
                 }
             }
 
             Text {
                 text: "🌙"
-                font.pixelSize: 15
+                font.pixelSize: Theme.dp(15)
                 anchors.verticalCenter: parent.verticalCenter
             }
         }
diff --git a/sandbox/controls/Buttons.qml b/sandbox/controls/Buttons.qml
index 34e040ff..62eceed4 100644
--- a/sandbox/controls/Buttons.qml
+++ b/sandbox/controls/Buttons.qml
@@ -8,12 +8,12 @@ import StatusQ.Core 0.1
 import StatusQ.Core.Theme 0.1
 
 Column {
-    spacing: 10
+    spacing: Theme.dp(10)
     Grid {
         id: buttonGridWidth
-        columns: 3
-        columnSpacing: 38
-        rowSpacing: 10
+        columns: Theme.dp(3)
+        columnSpacing: Theme.dp(38)
+        rowSpacing: Theme.dp(10)
 
         horizontalItemAlignment: Grid.AlignHCenter
 
@@ -196,22 +196,22 @@ Column {
         // Rounded blue
 
         StatusFlatRoundButton {
-            width: 44
-            height: 44
+            width: Theme.dp(44)
+            height: Theme.dp(44)
 
             icon.name: "info"
         }
 
         StatusFlatRoundButton {
-            width: 44
-            height: 44
+            width: Theme.dp(44)
+            height: Theme.dp(44)
             icon.name: "info"
             enabled: false
         }
 
         StatusFlatRoundButton {
-            width: 44
-            height: 44
+            width: Theme.dp(44)
+            height: Theme.dp(44)
             icon.name: "info"
             loading: true
         }
@@ -220,24 +220,24 @@ Column {
 
         StatusFlatRoundButton {
             type: StatusFlatRoundButton.Type.Secondary
-            width: 44
-            height: 44
+            width: Theme.dp(44)
+            height: Theme.dp(44)
 
             icon.name: "info"
         }
 
         StatusFlatRoundButton {
             type: StatusFlatRoundButton.Type.Secondary
-            width: 44
-            height: 44
+            width: Theme.dp(44)
+            height: Theme.dp(44)
             icon.name: "info"
             enabled: false
         }
 
         StatusFlatRoundButton {
             type: StatusFlatRoundButton.Type.Secondary
-            width: 44
-            height: 44
+            width: Theme.dp(44)
+            height: Theme.dp(44)
             icon.name: "info"
             loading: true
         }
diff --git a/sandbox/controls/Controls.qml b/sandbox/controls/Controls.qml
index 01d0b0da..cba8cb04 100644
--- a/sandbox/controls/Controls.qml
+++ b/sandbox/controls/Controls.qml
@@ -9,22 +9,22 @@ import Sandbox 0.1
 
 GridLayout {
     columns: 1
-    columnSpacing: 5
-    rowSpacing: 5
+    columnSpacing: Theme.dp(5)
+    rowSpacing: Theme.dp(5)
 
     StatusSelectableText {
         color: Theme.palette.baseColor1
         text: "This is a multiline paragraph that can be selected and copied. A paragraph is a group of words put together to form a group that is usually longer than a sentence. Paragraphs are often made up of several sentences. There are usually between three and eight sentences. Paragraphs can begin with an indentation (about five spaces), or by missing a line out, and then starting again."
-        font.pixelSize: 15
-        width: 300
+        font.pixelSize: Theme.dp(15)
+        width: Theme.dp(300)
         multiline: true
     }
 
     StatusSelectableText {
         color: Theme.palette.baseColor1
         text: "<p>This is a selectable link in rich text format to test <a href='www.google.com'>www.google.com</a></p>"
-        font.pixelSize: 15
-        width: 200
+        font.pixelSize: Theme.dp(15)
+        width: Theme.dp(200)
     }
 
     StatusIconTabButton {
@@ -57,21 +57,21 @@ GridLayout {
             visible: parent.hovered
             text: "Right"
             orientation: StatusToolTip.Orientation.Right
-            x: parent.width + 16
+            x: parent.width + Theme.dp(16)
             y: parent.height / 2 - height / 2 + 4
         }
         StatusToolTip {
             visible: parent.hovered
             text: "Bottom"
             orientation: StatusToolTip.Orientation.Bottom
-            y: parent.height + 12
+            y: parent.height + Theme.dp(12)
         }
         StatusToolTip {
             visible: parent.hovered
             text: "Left"
             orientation: StatusToolTip.Orientation.Left
-            x: -parent.width /2 -8
-            y: parent.height / 2 - height / 2 + 4
+            x: -parent.width /2 - Theme.dp(8)
+            y: parent.height / 2 - height / 2 + Theme.dp(4)
         }
     }
 
@@ -95,7 +95,7 @@ GridLayout {
         tooltip.text: "Profile"
         badge.value: 0
         badge.visible: true
-        badge.anchors.leftMargin:-16
+        badge.anchors.leftMargin:-Theme.dp(16)
     }
 
     StatusNavBarTabButton {
@@ -131,8 +131,8 @@ GridLayout {
     }
 
     Item {
-        implicitWidth: 100
-        implicitHeight: 48
+        implicitWidth: Theme.dp(100)
+        implicitHeight: Theme.dp(48)
         StatusChatInfoButton {
             title: "Iuri Matias elided"
             subTitle: "Contact"
@@ -141,13 +141,13 @@ GridLayout {
             type: StatusChatInfoButton.Type.OneToOneChat
             muted: true
             pinnedMessagesCount: 1
-            width: 100
+            width: Theme.dp(100)
         }
     }
 
     Item {
-        implicitWidth: 100
-        implicitHeight: 48
+        implicitWidth: Theme.dp(100)
+        implicitHeight: Theme.dp(48)
         StatusChatInfoButton {
             title: "Iuri Matias big not elided"
             subTitle: "Contact"
@@ -156,7 +156,7 @@ GridLayout {
             type: StatusChatInfoButton.Type.OneToOneChat
             muted: true
             pinnedMessagesCount: 1
-            width: 400
+            width: Theme.dp(400)
         }
     }
 
@@ -183,26 +183,26 @@ GridLayout {
     }
 
     StatusSlider {
-        width: 360
+        width: Theme.dp(360)
         from: 0
         to: 100
         value: 40
     }
 
     StatusLabeledSlider {
-        width: 360
+        width: Theme.dp(360)
         model: [ qsTr("XS"), qsTr("S"), qsTr("M"), qsTr("L"), qsTr("XL"), qsTr("XXL")]
     }
 
     StatusLabeledSlider {
-        width: 360
+        width: Theme.dp(360)
         model: [ qsTr("50%"), qsTr("100%"), qsTr("150%"), qsTr("200%")]
     }
 
     StatusBanner {
         id: banner
-        width: 360
-        topPadding: 20
+        width: Theme.dp(360)
+        topPadding: Theme.dp(20)
         type: StatusBanner.Type.Danger
         statusText: "Banner"
     }
diff --git a/sandbox/controls/Icons.qml b/sandbox/controls/Icons.qml
index 51658a0f..f22ae34e 100644
--- a/sandbox/controls/Icons.qml
+++ b/sandbox/controls/Icons.qml
@@ -1,11 +1,12 @@
 import QtQuick 2.14
 import QtQuick.Layouts 1.14
 import StatusQ.Core 0.1
+import StatusQ.Core.Theme 0.1
 
 GridLayout {
     columns: 6
-    columnSpacing: 5
-    rowSpacing: 5
+    columnSpacing: Theme.dp(5)
+    rowSpacing: Theme.dp(5)
     property color iconColor
 
     Repeater {
diff --git a/sandbox/controls/Layout.qml b/sandbox/controls/Layout.qml
index 6b5c2859..8bb8045b 100644
--- a/sandbox/controls/Layout.qml
+++ b/sandbox/controls/Layout.qml
@@ -10,11 +10,11 @@ import StatusQ.Layout 0.1
 import StatusQ.Popups 0.1
 
 Column {
-    spacing: 10
+    spacing: Theme.dp(10)
 
     StatusChatToolBar {
         toolbarComponent: chatInfoButton1
-        width: 518
+        width: Theme.dp(518)
 
         Component {
             id: chatInfoButton1
@@ -31,7 +31,7 @@ Column {
 
     StatusChatToolBar {
         toolbarComponent: chatInfoButton2
-        width: 518
+        width: Theme.dp(518)
 
         Component {
             id: chatInfoButton2
@@ -51,7 +51,7 @@ Column {
     StatusChatToolBar {
         notificationCount: 1
         toolbarComponent: chatInfoButton3
-        width: 518
+        width: Theme.dp(518)
 
         Component {
             id: chatInfoButton3
@@ -70,7 +70,7 @@ Column {
     StatusChatToolBar {
         notificationCount: 1
         toolbarComponent: tagSelector
-        width: 518
+        width: Theme.dp(518)
 
         Component {
             id: tagSelector
@@ -107,6 +107,8 @@ Column {
         Button {
             id: btn
             text: "Append"
+            width: Theme.dp(100)
+            height: Theme.dp(40)
             onClicked: {
                 buttons.append({
                     name: "Test community",
@@ -142,7 +144,7 @@ Column {
                 badge.value: model.notificationsCount
                 badge.visible: model.hasNotification
                 badge.border.color: hovered ? Theme.palette.statusBadge.hoverBorderColor : Theme.palette.statusBadge.borderColor
-                badge.border.width: 2
+                badge.border.width: Theme.dp(2)
             }
         }
 
@@ -185,7 +187,7 @@ Column {
                 badge.value: model.notificationsCount
                 badge.visible: model.hasNotification
                 badge.border.color: hovered ? Theme.palette.statusBadge.hoverBorderColor : Theme.palette.statusBadge.borderColor
-                badge.border.width: 2
+                badge.border.width: Theme.dp(2)
             }
 
             communityNavBarButton: StatusNavBarTabButton {
@@ -199,7 +201,7 @@ Column {
                 badge.value: model.notificationsCount
                 badge.visible: model.hasNotification
                 badge.border.color: hovered ? Theme.palette.statusBadge.hoverBorderColor : Theme.palette.statusBadge.borderColor
-                badge.border.width: 2
+                badge.border.width: Theme.dp(2)
 
                 popupMenu: StatusPopupMenu {
 
@@ -224,7 +226,7 @@ Column {
                     StatusMenuItem {
                         text: qsTr("Leave Community")
                         icon.name: "arrow-right"
-                        icon.width: 14
+                        icon.width: Theme.dp(14)
                         iconRotation: 180
                         type: StatusMenuItem.Type.Danger
                     }
@@ -270,7 +272,7 @@ Column {
                 badge.value: model.notificationsCount
                 badge.visible: model.hasNotification
                 badge.border.color: hovered ? Theme.palette.statusBadge.hoverBorderColor : Theme.palette.statusBadge.borderColor
-                badge.border.width: 2
+                badge.border.width: Theme.dp(2)
             }
 
             communityNavBarButton: StatusNavBarTabButton {
@@ -284,7 +286,7 @@ Column {
                 badge.value: model.notificationsCount
                 badge.visible: model.hasNotification
                 badge.border.color: hovered ? Theme.palette.statusBadge.hoverBorderColor : Theme.palette.statusBadge.borderColor
-                badge.border.width: 2
+                badge.border.width: Theme.dp(2)
 
                 popupMenu: StatusPopupMenu {
 
@@ -309,8 +311,8 @@ Column {
                     StatusMenuItem {
                         text: qsTr("Leave Community")
                         icon.name: "arrow-right"
-                        icon.width: 14
-                        iconRotation: 180
+                        icon.width: Theme.dp(14)
+                        iconRotation: Theme.dp(180)
                         type: StatusMenuItem.Type.Danger
                     }
                 }
@@ -360,7 +362,7 @@ Column {
                 badge.value: model.notificationsCount
                 badge.visible: model.hasNotification
                 badge.border.color: hovered ? Theme.palette.statusBadge.hoverBorderColor : Theme.palette.statusBadge.borderColor
-                badge.border.width: 2
+                badge.border.width: Theme.dp(2)
             }
 
             communityNavBarButton: StatusNavBarTabButton {
@@ -374,7 +376,7 @@ Column {
                 badge.value: model.notificationsCount
                 badge.visible: model.hasNotification
                 badge.border.color: hovered ? Theme.palette.statusBadge.hoverBorderColor : Theme.palette.statusBadge.borderColor
-                badge.border.width: 2
+                badge.border.width: Theme.dp(2)
 
                 popupMenu: StatusPopupMenu {
 
@@ -399,8 +401,8 @@ Column {
                     StatusMenuItem {
                         text: qsTr("Leave Community")
                         icon.name: "arrow-right"
-                        icon.width: 14
-                        iconRotation: 180
+                        icon.width: Theme.dp(14)
+                        iconRotation: Theme.dp(180)
                         type: StatusMenuItem.Type.Danger
                     }
                 }
@@ -455,7 +457,7 @@ Column {
                 badge.value: model.notificationsCount
                 badge.visible: model.hasNotification
                 badge.border.color: hovered ? Theme.palette.statusBadge.hoverBorderColor : Theme.palette.statusBadge.borderColor
-                badge.border.width: 2
+                badge.border.width: Theme.dp(2)
             }
 
             communityNavBarButton: StatusNavBarTabButton {
@@ -469,7 +471,7 @@ Column {
                 badge.value: model.notificationsCount
                 badge.visible: model.hasNotification
                 badge.border.color: hovered ? Theme.palette.statusBadge.hoverBorderColor : Theme.palette.statusBadge.borderColor
-                badge.border.width: 2
+                badge.border.width: Theme.dp(2)
 
                 popupMenu: StatusPopupMenu {
 
@@ -494,15 +496,13 @@ Column {
                     StatusMenuItem {
                         text: qsTr("Leave Community")
                         icon.name: "arrow-right"
-                        icon.width: 14
-                        iconRotation: 180
+                        icon.width: Theme.dp(14)
+                        iconRotation: Theme.dp(180)
                         type: StatusMenuItem.Type.Danger
                     }
                 }
             }
         }
-
-
     }
 }
 
diff --git a/sandbox/controls/ListItems.qml b/sandbox/controls/ListItems.qml
index 215ef0dd..74f7d768 100644
--- a/sandbox/controls/ListItems.qml
+++ b/sandbox/controls/ListItems.qml
@@ -8,8 +8,8 @@ import StatusQ.Core.Utils 0.1
 
 GridLayout {
     columns: 1
-    columnSpacing: 5
-    rowSpacing: 5
+    columnSpacing: Theme.dp(5)
+    rowSpacing: Theme.dp(5)
 
     StatusNavigationListItem {
         title: "Menu Item"
@@ -156,7 +156,7 @@ GridLayout {
         subTitle: "Subtitle"
         tertiaryTitle: "Tertiary title"
 
-        statusListItemTitle.font.pixelSize: 17
+        statusListItemTitle.font.pixelSize: Theme.dp(17)
         statusListItemTitle.font.weight: Font.Bold
     }
 
@@ -166,7 +166,7 @@ GridLayout {
         tertiaryTitle: "Tertiary title"
         icon.name: "info"
 
-        statusListItemTitle.font.pixelSize: 17
+        statusListItemTitle.font.pixelSize: Theme.dp(17)
         statusListItemTitle.font.weight: Font.Bold
     }
 
@@ -345,14 +345,14 @@ CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2I
         tagsModel : 2
         tagsDelegate: StatusListItemTag {
             color: "blue"
-            height: 24
-            radius: 6
+            height: Theme.dp(24)
+            radius: Theme.dp(6)
             closeButtonVisible: false
             icon.emoji: "😁"
             icon.emojiSize: Emoji.size.verySmall
             icon.isLetterIdenticon: true
             title: "helloworld.eth"
-            titleText.font.pixelSize: 12
+            titleText.font.pixelSize: Theme.dp(12)
             titleText.color: Theme.palette.indirectColor1
         }
     }
@@ -362,7 +362,7 @@ CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2I
         subTitle: "Emoji"
         icon.emoji: "😁"
         icon.color: "yellow"
-        icon.letterSize: 14
+        icon.letterSize: Theme.dp(14)
         icon.isLetterIdenticon: true
     }
 
diff --git a/sandbox/controls/Others.qml b/sandbox/controls/Others.qml
index 9075ca76..7475b335 100644
--- a/sandbox/controls/Others.qml
+++ b/sandbox/controls/Others.qml
@@ -10,8 +10,8 @@ ColumnLayout {
         Layout.fillHeight: true
 
         columns: 6
-        columnSpacing: 5
-        rowSpacing: 5
+        columnSpacing: Theme.dp(5)
+        rowSpacing: Theme.dp(5)
 
         StatusLoadingIndicator {
             color: Theme.palette.directColor4
@@ -53,7 +53,7 @@ ColumnLayout {
             StatusLetterIdenticon {
                 name: "A"
                 color: Theme.palette.userCustomizationColors[index]
-                letterSize: 16
+                letterSize: Theme.dp(16)
             }
         }
     }
diff --git a/sandbox/controls/Popups.qml b/sandbox/controls/Popups.qml
index 1903e479..1b3ca078 100644
--- a/sandbox/controls/Popups.qml
+++ b/sandbox/controls/Popups.qml
@@ -9,7 +9,7 @@ import StatusQ.Popups 0.1
 import StatusQ.Core.Utils 0.1
 
 Column {
-    spacing: 20
+    spacing: Theme.dp(20)
 
     StatusButton {
         text: "Simple modal"
@@ -144,11 +144,11 @@ Column {
 
         headerActionButton: StatusFlatRoundButton {
             type: StatusFlatRoundButton.Type.Secondary
-            width: 32
-            height: 32
+            width: Theme.dp(32)
+            height: Theme.dp(32)
 
-            icon.width: 20
-            icon.height: 20
+            icon.width: Theme.dp(20)
+            icon.height: Theme.dp(20)
             icon.name: "info"
         }
 
@@ -193,17 +193,17 @@ Column {
         contentItem: StatusBaseText {
             anchors.centerIn: parent
             text: "Some text content"
-            font.pixelSize: 15
+            font.pixelSize: Theme.dp(15)
             color: Theme.palette.directColor1
         }
 
         headerActionButton: StatusFlatRoundButton {
             type: StatusFlatRoundButton.Type.Secondary
-            width: 32
-            height: 32
+            width: Theme.dp(32)
+            height: Theme.dp(32)
 
-            icon.width: 20
-            icon.height: 20
+            icon.width: Theme.dp(20)
+            icon.height: Theme.dp(20)
             icon.name: "info"
         }
     }
@@ -218,7 +218,7 @@ Column {
             id: text
             anchors.centerIn: parent
             text: "Some text content"
-            font.pixelSize: 15
+            font.pixelSize: Theme.dp(15)
             color: Theme.palette.directColor1
         }
 
@@ -243,7 +243,7 @@ Column {
         contentItem: StatusBaseText {
             anchors.centerIn: parent
             text: "Some text content"
-            font.pixelSize: 15
+            font.pixelSize: Theme.dp(15)
             color: Theme.palette.directColor1
         }
 
@@ -269,7 +269,7 @@ CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2I
         contentItem: StatusBaseText {
             anchors.centerIn: parent
             text: "Some text content"
-            font.pixelSize: 15
+            font.pixelSize: Theme.dp(15)
             color: Theme.palette.directColor1
         }
 
@@ -296,7 +296,7 @@ CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2I
         contentItem: StatusBaseText {
             anchors.centerIn: parent
             text: "Some text content"
-            font.pixelSize: 15
+            font.pixelSize: Theme.dp(15)
             color: Theme.palette.directColor1
         }
 
@@ -323,7 +323,7 @@ CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2I
         contentItem: StatusBaseText {
             anchors.centerIn: parent
             text: "Some text content"
-            font.pixelSize: 15
+            font.pixelSize: Theme.dp(15)
             color: Theme.palette.directColor1
         }
 
@@ -374,29 +374,29 @@ CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2I
         showFooter: false
         showAdvancedHeader: true
         showAdvancedFooter: true
-        height: 200
+        height: Theme.dp(200)
         advancedHeaderComponent: Rectangle {
             width: parent.width
-            height: 50
+            height: Theme.dp(50)
             color: Theme.palette.baseColor1
-            border.width: 1
+            border.width: Theme.dp(1)
             StatusBaseText {
                 anchors.centerIn: parent
                 text: "Add any header here"
-                font.pixelSize: 15
+                font.pixelSize: Theme.dp(15)
                 color: Theme.palette.directColor1
             }
 
         }
         advancedFooterComponent: Rectangle {
             width: parent.width
-            height: 50
+            height: Theme.dp(50)
             color: Theme.palette.baseColor1
-            border.width: 1
+            border.width: Theme.dp(1)
             StatusBaseText {
                 anchors.centerIn: parent
                 text: "Add any footer here"
-                font.pixelSize: 15
+                font.pixelSize: Theme.dp(15)
                 color: Theme.palette.directColor1
             }
 
@@ -406,7 +406,7 @@ CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2I
     StatusModal {
         id: floatingHeaderModal
         anchors.centerIn: parent
-        height: 200
+        height: Theme.dp(200)
         showHeader: false
         showFooter: false
         showAdvancedHeader: true
@@ -417,14 +417,14 @@ CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2I
             delegate: Rectangle {
                 width: button.width
                 height: button.height
-                radius: 8
+                radius: Theme.dp(8)
                 visible: visibleIndices.includes(index)
                 StatusButton {
                     id: button
-                    topPadding: 8
+                    topPadding: Theme.dp(8)
                     bottomPadding: 0
-                    implicitHeight: 32
-                    defaultLeftPadding: 4
+                    implicitHeight: Theme.dp(32)
+                    defaultLeftPadding: Theme.dp(4)
                     text: name
                     icon.emoji: !!emoji ? emoji: ""
                     icon.emojiSize: Emoji.size.middle
@@ -437,7 +437,7 @@ CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2I
                 }
             }
             popupMenuDelegate: StatusListItem {
-                implicitWidth: 272
+                implicitWidth: Theme.dp(272)
                 title: name
                 onClicked: floatingHeader.itemSelected(index)
                 visible: !visibleIndices.includes(index)
diff --git a/sandbox/demoapp/ChatChannelView.qml b/sandbox/demoapp/ChatChannelView.qml
index 1ac163a0..d90555e1 100644
--- a/sandbox/demoapp/ChatChannelView.qml
+++ b/sandbox/demoapp/ChatChannelView.qml
@@ -12,7 +12,7 @@ import StatusQ.Core.Theme 0.1
 ListView {
     id: messageList
     anchors.fill: parent
-    anchors.margins: 15
+    anchors.margins: Theme.dp(15)
     clip: true
     delegate: StatusMessage {
         id: delegate
@@ -34,8 +34,8 @@ ListView {
             secondaryName: model.localName !== "" && model.ensName.startsWith("@") ? model.ensName: ""
             chatID: model.chatKey
             profileImage: StatusImageSettings {
-                width: 40
-                height: 40
+                width: Theme.dp(40)
+                height: Theme.dp(40)
                 source: model.profileImage
                 isIdenticon: model.isIdenticon
             }
@@ -55,8 +55,8 @@ ListView {
             amISender:  model.isReply ? model.replyAmISender : ""
             displayName:  model.isReply ? model.replySenderName: ""
             profileImage: StatusImageSettings {
-                width: 20
-                height: 20
+                width: Theme.dp(20)
+                height: Theme.dp(20)
                 source:  model.isReply ? model.replyProfileImage: ""
                 isIdenticon:  model.isReply ? model.replyIsIdenticon: ""
             }
@@ -67,23 +67,23 @@ ListView {
         quickActions: [
             StatusFlatRoundButton {
                 id: emojiBtn
-                width: 32
-                height: 32
+                width: Theme.dp(32)
+                height: Theme.dp(32)
                 icon.name: "reaction-b"
                 type: StatusFlatRoundButton.Type.Tertiary
                 tooltip.text: "Add reaction"
             },
             StatusFlatRoundButton {
                 id: replyBtn
-                width: 32
-                height: 32
+                width: Theme.dp(32)
+                height: Theme.dp(32)
                 icon.name: "reply"
                 type: StatusFlatRoundButton.Type.Tertiary
                 tooltip.text: "Reply"
             },
             StatusFlatRoundButton {
-                width: 32
-                height: 32
+                width: Theme.dp(32)
+                height: Theme.dp(32)
                 icon.name: "tiny/edit"
                 type: StatusFlatRoundButton.Type.Tertiary
                 tooltip.text: "Edit"
@@ -93,8 +93,8 @@ ListView {
             },
             StatusFlatRoundButton {
                 id: otherBtn
-                width: 32
-                height: 32
+                width: Theme.dp(32)
+                height: Theme.dp(32)
                 icon.name: "more"
                 type: StatusFlatRoundButton.Type.Tertiary
                 tooltip.text: "More"
diff --git a/sandbox/demoapp/CreateChatView.qml b/sandbox/demoapp/CreateChatView.qml
index b37bf63d..08ad4658 100644
--- a/sandbox/demoapp/CreateChatView.qml
+++ b/sandbox/demoapp/CreateChatView.qml
@@ -10,7 +10,7 @@ import StatusQ.Core.Theme 0.1
 Page {
     id: root
     anchors.fill: parent
-    anchors.margins: 16
+    anchors.margins: Theme.dp(16)
     property ListModel contactsModel: null
     background: null
 
@@ -19,13 +19,13 @@ Page {
         width: parent.width
         height: tagSelector.height
         anchors.right: parent.right
-        anchors.rightMargin: 8
+        anchors.rightMargin: Theme.dp(8)
 
         StatusTagSelector {
             id: tagSelector
             Layout.fillWidth: true
             Layout.alignment: Qt.AlignVCenter | Qt.AlignLeft
-            Layout.leftMargin: 17
+            Layout.leftMargin: Theme.dp(17)
             maxHeight: root.height
             toLabelText: qsTr("To: ")
             warningText: qsTr("USER LIMIT REACHED")
@@ -73,7 +73,7 @@ Page {
         }
 
         StatusButton {
-            implicitHeight: 44
+            implicitHeight: Theme.dp(44)
             Layout.alignment: Qt.AlignTop
             enabled: (tagSelector.namesModel.count > 0)
             text: "Confirm"
@@ -82,14 +82,14 @@ Page {
 
     contentItem: Item {
         anchors.fill: parent
-        anchors.topMargin: 68
+        anchors.topMargin: Theme.dp(68)
 
         StatusBaseText {
             visible: (contactsModel.count === 0)
             anchors.centerIn: parent
             horizontalAlignment: Text.AlignHCenter
             verticalAlignment: Text.AlignVCenter
-            font.pixelSize: 15
+            font.pixelSize: Theme.dp(15)
             color: Theme.palette.baseColor1
             text: qsTr("You can only send direct messages to your Contacts. \n\n
 Send a contact request to the person you would like to chat with, you will be\n able to
diff --git a/sandbox/demoapp/DemoCommunityDetailModal.qml b/sandbox/demoapp/DemoCommunityDetailModal.qml
index 3eff516e..59bf9276 100644
--- a/sandbox/demoapp/DemoCommunityDetailModal.qml
+++ b/sandbox/demoapp/DemoCommunityDetailModal.qml
@@ -19,24 +19,24 @@ StatusModal {
         width: root.width
 
         StatusModalDivider {
-            bottomPadding: 8
+            bottomPadding: Theme.dp(8)
         }
 
         StatusBaseText {
             text: "A community of cat lovers, meow!"
             verticalAlignment: Text.AlignVCenter
-            font.pixelSize: 15
-            height: 46
+            font.pixelSize: Theme.dp(15)
+            height: Theme.dp(46)
             color: Theme.palette.directColor1
             anchors.left: parent.left
             anchors.right: parent.right
-            anchors.leftMargin: 16
-            anchors.rightMargin: 16
+            anchors.leftMargin: Theme.dp(16)
+            anchors.rightMargin: Theme.dp(16)
         }
 
         StatusModalDivider {
-            topPadding: 8
-            bottomPadding: 8
+            topPadding: Theme.dp(8)
+            bottomPadding: Theme.dp(8)
         }
 
         StatusDescriptionListItem {
@@ -49,13 +49,13 @@ StatusModal {
         }
 
         StatusModalDivider {
-            topPadding: 8
-            bottomPadding: 8
+            topPadding: Theme.dp(8)
+            bottomPadding: Theme.dp(8)
         }
 
         StatusListItem {
             anchors.horizontalCenter: parent.horizontalCenter
-            statusListItemTitle.font.pixelSize: 17
+            statusListItemTitle.font.pixelSize: Theme.dp(17)
             title: "Members"
             icon.name: "group-chat"
             label: "184"
@@ -79,13 +79,13 @@ StatusModal {
         }
 
         StatusModalDivider {
-            topPadding: 8
-            bottomPadding: 8
+            topPadding: Theme.dp(8)
+            bottomPadding: Theme.dp(8)
         }
 
         StatusListItem {
             anchors.horizontalCenter: parent.horizontalCenter
-            statusListItemTitle.font.pixelSize: 17
+            statusListItemTitle.font.pixelSize: Theme.dp(17)
             title: "Edit community"
             icon.name: "edit"
             type: StatusListItem.Type.Secondary
@@ -93,7 +93,7 @@ StatusModal {
 
         StatusListItem {
             anchors.horizontalCenter: parent.horizontalCenter
-            statusListItemTitle.font.pixelSize: 17
+            statusListItemTitle.font.pixelSize: Theme.dp(17)
             title: "Transfer ownership"
             icon.name: "exchange"
             type: StatusListItem.Type.Secondary
@@ -101,7 +101,7 @@ StatusModal {
 
         StatusListItem {
             anchors.horizontalCenter: parent.horizontalCenter
-            statusListItemTitle.font.pixelSize: 17
+            statusListItemTitle.font.pixelSize: Theme.dp(17)
             title: "Leave community"
             icon.name: "arrow-right"
             icon.rotation: 180
diff --git a/sandbox/demoapp/DemoContactRequestsModal.qml b/sandbox/demoapp/DemoContactRequestsModal.qml
index ca8eec84..aa07c889 100644
--- a/sandbox/demoapp/DemoContactRequestsModal.qml
+++ b/sandbox/demoapp/DemoContactRequestsModal.qml
@@ -11,18 +11,18 @@ StatusModal {
     header.title: "Contact Requests"
     headerActionButton: StatusFlatRoundButton {
         type: StatusFlatRoundButton.Type.Secondary
-        width: 32
-        height: 32
+        width: Theme.dp(32)
+        height: Theme.dp(32)
 
-        icon.width: 20
-        icon.height: 20
+        icon.width: Theme.dp(20)
+        icon.height: Theme.dp(20)
         icon.name: "notification"
     }
 
     contentItem: StatusBaseText {
         anchors.centerIn: parent
         text: "Contact request will be shown here"
-        font.pixelSize: 15
+        font.pixelSize: Theme.dp(15)
         color: Theme.palette.directColor1
     }
 
diff --git a/sandbox/demoapp/StatusAppChatView.qml b/sandbox/demoapp/StatusAppChatView.qml
index 58b6fd8b..1188bfa1 100644
--- a/sandbox/demoapp/StatusAppChatView.qml
+++ b/sandbox/demoapp/StatusAppChatView.qml
@@ -20,26 +20,26 @@ StatusAppThreePanelLayout {
         StatusNavigationPanelHeadline {
             id: headline
             anchors.top: parent.top
-            anchors.topMargin: 16
+            anchors.topMargin: Theme.dp(16)
             anchors.horizontalCenter: parent.horizontalCenter
             text: "Chat"
         }
 
         RowLayout {
             id: searchInputWrapper
-            width: 288
+            width: Theme.dp(288)
             height: searchInput.height
             anchors.top: headline.bottom
-            anchors.topMargin: 16
+            anchors.topMargin: Theme.dp(16)
             anchors.horizontalCenter: parent.horizontalCenter
 
             StatusBaseInput {
                 id: searchInput
                 Layout.fillWidth: true
                 Layout.alignment: Qt.AlignVCenter
-                implicitHeight: 36
-                topPadding: 8
-                bottomPadding: 8
+                implicitHeight: Theme.dp(36)
+                topPadding: Theme.dp(8)
+                bottomPadding: Theme.dp(8)
                 placeholderText: "Search"
                 icon.name: "search"
             }
@@ -58,9 +58,9 @@ StatusAppThreePanelLayout {
 
         Column {
             anchors.top: searchInputWrapper.bottom
-            anchors.topMargin: 16
+            anchors.topMargin: Theme.dp(16)
             anchors.horizontalCenter: parent.horizontalCenter
-            spacing: 8
+            spacing: Theme.dp(8)
 
             StatusContactRequestsIndicatorListItem {
                 anchors.horizontalCenter: parent.horizontalCenter
@@ -174,7 +174,7 @@ StatusAppThreePanelLayout {
                 StatusMenuItem {
                     text: "Leave Chat"
                     icon.name: "arrow-right"
-                    icon.width: 14
+                    icon.width: Theme.dp(14)
                     iconRotation: 180
                     type: StatusMenuItem.Type.Danger
                 }
diff --git a/sandbox/demoapp/StatusAppCommunitiesPortalView.qml b/sandbox/demoapp/StatusAppCommunitiesPortalView.qml
index a9f4e23d..40abfaa7 100644
--- a/sandbox/demoapp/StatusAppCommunitiesPortalView.qml
+++ b/sandbox/demoapp/StatusAppCommunitiesPortalView.qml
@@ -21,11 +21,11 @@ ScrollView {
         property ListModel tagsModel: Models.tagsModel
 
         property string searchText: ""
-        property int layoutVMargin: 70
-        property int layoutHMargin: 64
-        property int titlePixelSize: 28
-        property int subtitlePixelSize: 17
-        property int stylePadding: 16
+        property int layoutVMargin: Theme.dp(70)
+        property int layoutHMargin: Theme.dp(64)
+        property int titlePixelSize: Theme.dp(28)
+        property int subtitlePixelSize: Theme.dp(17)
+        property int stylePadding: Theme.dp(16)
 
         function navigateToCommunity(communityId) {
             console.info("Clicked community ID: " + communityId)
@@ -38,7 +38,7 @@ ScrollView {
 
     ColumnLayout {
         id: column
-        spacing: 18
+        spacing: Theme.dp(18)
 
         StatusBaseText {
             Layout.topMargin: d.layoutVMargin
@@ -55,7 +55,7 @@ ScrollView {
             visible: d.tagsModel.count > 0
             Layout.leftMargin: d.layoutHMargin
             Layout.rightMargin: d.layoutHMargin
-            width: 1234 // by design
+            width: Theme.dp(1234) // by design
             spacing: d.stylePadding/2
 
             Repeater {
@@ -63,16 +63,16 @@ ScrollView {
                 delegate: StatusListItemTag {
                     border.color: Theme.palette.baseColor2
                     color: "transparent"
-                    height: 32
-                    radius: 36
+                    height: Theme.dp(32)
+                    radius: Theme.dp(36)
                     closeButtonVisible: false
                     icon.emoji: model.emoji
-                    icon.height: 32
-                    icon.width: icon.height
+                    icon.height: Theme.dp(32)
+                    icon.width: icon.heights
                     icon.color: "transparent"
                     icon.isLetterIdenticon: true
                     title: model.name
-                    titleText.font.pixelSize: 15
+                    titleText.font.pixelSize: Theme.dp(15)
                     titleText.color: Theme.palette.primaryColor1
                 }
             }
@@ -80,7 +80,7 @@ ScrollView {
 
         StatusBaseText {
             Layout.leftMargin: d.layoutHMargin
-            Layout.topMargin: 20
+            Layout.topMargin: Theme.dp(20)
             text: qsTr("Featured")
             font.weight: Font.Bold
             font.pixelSize: d.subtitlePixelSize
@@ -119,7 +119,7 @@ ScrollView {
 
         StatusBaseText {
             Layout.leftMargin: d.layoutHMargin
-            Layout.topMargin: 20
+            Layout.topMargin: Theme.dp(20)
             text: qsTr("Popular")
             font.weight: Font.Bold
             font.pixelSize: d.subtitlePixelSize
diff --git a/sandbox/demoapp/StatusAppCommunityView.qml b/sandbox/demoapp/StatusAppCommunityView.qml
index d39f1287..4117d5d2 100644
--- a/sandbox/demoapp/StatusAppCommunityView.qml
+++ b/sandbox/demoapp/StatusAppCommunityView.qml
@@ -63,7 +63,7 @@ StatusAppThreePanelLayout {
             id: scrollView
 
             anchors.top: statusChatInfoToolBar.bottom
-            anchors.topMargin: 8
+            anchors.topMargin: Theme.dp(8)
             anchors.bottom: parent.bottom
             width: leftPanel.width
 
@@ -73,7 +73,7 @@ StatusAppThreePanelLayout {
             StatusChatListAndCategories {
                 id: communityCategories
                 width: leftPanel.width
-                height: implicitHeight > (leftPanel.height - 64) ? implicitHeight + 8 : leftPanel.height - 64
+                height: implicitHeight > (leftPanel.height - Theme.dp(64)) ? implicitHeight + Theme.dp(8) : leftPanel.height - Theme.dp(64)
 
                 draggableItems: true
                 draggableCategories: false
@@ -248,21 +248,21 @@ StatusAppThreePanelLayout {
             anchors.topMargin:16
             anchors.left: parent.left
             anchors.leftMargin: 16
-            opacity: (rightPanel.width > 50) ? 1.0 : 0.0
+            opacity: (rightPanel.width > Theme.dp(50)) ? 1.0 : 0.0
             visible: (opacity > 0.1)
-            font.pixelSize: 15
+            font.pixelSize: Theme.dp(15)
             text: qsTr("Members")
         }
 
         ListView {
             anchors.top: titleText.bottom
-            anchors.topMargin: 16
+            anchors.topMargin: Theme.dp(16)
             anchors.left: parent.left
-            anchors.leftMargin: 8
+            anchors.leftMargin: Theme.dp(8)
             anchors.right: parent.right
-            anchors.rightMargin: 8
+            anchors.rightMargin: Theme.dp(8)
             anchors.bottom: parent.bottom
-            anchors.bottomMargin: 16
+            anchors.bottomMargin: Theme.dp(16)
             boundsBehavior: Flickable.StopAtBounds
             model: Models.membersListModel
             delegate: StatusMemberListItem {
diff --git a/sandbox/demoapp/StatusAppProfileSettingsView.qml b/sandbox/demoapp/StatusAppProfileSettingsView.qml
index 7303136c..00624a24 100644
--- a/sandbox/demoapp/StatusAppProfileSettingsView.qml
+++ b/sandbox/demoapp/StatusAppProfileSettingsView.qml
@@ -16,14 +16,14 @@ StatusAppTwoPanelLayout {
         StatusNavigationPanelHeadline {
             id: profileHeadline
             anchors.top: parent.top
-            anchors.topMargin: 16
+            anchors.topMargin: Theme.dp(16)
             anchors.horizontalCenter: parent.horizontalCenter
             text: "Profile"
         }
 
         ScrollView {
             anchors.top: profileHeadline.bottom
-            anchors.topMargin: 16
+            anchors.topMargin: Theme.dp(16)
             anchors.bottom: parent.bottom
             width: parent.width
 
@@ -34,7 +34,7 @@ StatusAppTwoPanelLayout {
             Column {
                 id: profileMenuItems
                 anchors.horizontalCenter: parent.horizontalCenter
-                spacing: 4
+                spacing: Theme.dp(4)
 
                 Repeater {
                     model: Models.demoProfileGeneralMenuItems
@@ -56,7 +56,7 @@ StatusAppTwoPanelLayout {
 
                 Item {
                     id: invisibleSeparator
-                    height: 16
+                    height: Theme.dp(16)
                     width: parent.width
                 }
 
diff --git a/sandbox/main.qml b/sandbox/main.qml
index f80da55a..ae4bf93c 100644
--- a/sandbox/main.qml
+++ b/sandbox/main.qml
@@ -13,15 +13,14 @@ import StatusQ.Controls 0.1
 import StatusQ.Components 0.1
 import StatusQ.Layout 0.1
 import StatusQ.Platform 0.1
+import StatusQ.Core.Utils 0.1
 
 import "demoapp/data" 1.0
 
 StatusWindow {
     id: rootWindow
-    width: Qt.platform.os == "ios" || Qt.platform.os == "android" ? Screen.width
-                                                                  :  1224
-    height: Qt.platform.os == "ios" || Qt.platform.os == "android" ? Screen.height
-                                                                   :840
+    width: Theme.screenWidth
+    height: Theme.screenHeight
     visible: true
     title: qsTr("StatusQ Documentation App")
 
@@ -59,6 +58,11 @@ StatusWindow {
         }
     }
 
+    readonly property real scaleRatio: Math.min(rootWindow.width / Theme.screenWidth, rootWindow.height / Theme.screenHeight)
+    onScaleRatioChanged: {
+        Theme.scaleFactor = scaleRatio;
+    }
+
     StatusAppLayout {
         id: appLayout
         anchors.fill: parent
@@ -81,7 +85,7 @@ StatusWindow {
                 badge.value: model.notificationsCount
                 badge.visible: model.hasNotification
                 badge.border.color: hovered ? Theme.palette.statusBadge.hoverBorderColor : Theme.palette.statusBadge.borderColor
-                badge.border.width: 2
+                badge.border.width: Theme.dp(2)
                 onClicked: {
                     stackView.clear()
                     if(model.sectionType === appSectionType.apiDocumentation)
@@ -106,9 +110,9 @@ StatusWindow {
 
         ThemeSwitch {
             anchors.top: parent.top
-            anchors.topMargin: 32
+            anchors.topMargin: Theme.dp(32)
             anchors.right: parent.right
-            anchors.rightMargin: 32
+            anchors.rightMargin: Theme.dp(32)
             lightThemeEnabled: storeSettings.lightTheme
             onLightThemeEnabledChanged: {
                 Theme.palette = lightThemeEnabled ? rootWindow.darkTheme : rootWindow.lightTheme
@@ -138,13 +142,13 @@ StatusWindow {
                     anchors.top: parent.top
                     anchors.bottom: parent.bottom
                     anchors.horizontalCenter: parent.horizontalCenter
-                    contentHeight: navigation.height + 56
+                    contentHeight: navigation.height + Theme.dp(56)
                     contentWidth: navigation.width
                     clip: true
                     Column {
                         id: navigation
                         anchors.top: parent.top
-                        anchors.topMargin: 48
+                        anchors.topMargin: Theme.dp(48)
                         anchors.horizontalCenter: parent.horizontalCenter
                         spacing: 0
 
@@ -338,7 +342,7 @@ StatusWindow {
                 ScrollView {
                     visible: !storeSettings.fillPage
                     anchors.fill: parent
-                    anchors.topMargin: 64
+                    anchors.topMargin: Theme.dp(64)
                     contentHeight: (pageWrapper.height + pageWrapper.anchors.topMargin) * rootWindow.factor
                     contentWidth: (pageWrapper.width * rootWindow.factor)
                     clip: true
@@ -367,7 +371,7 @@ StatusWindow {
                 Loader {
                     active: storeSettings.fillPage
                     anchors.fill: parent
-                    anchors.topMargin: 64
+                    anchors.topMargin: Theme.dp(64)
                     visible: storeSettings.fillPage
                     clip: true
 
@@ -411,12 +415,12 @@ StatusWindow {
                 id: platformSwitch
                 anchors.left: demoApp.left
                 anchors.bottom: demoApp.top
-                anchors.bottomMargin: 20
-                spacing: 2
+                anchors.bottomMargin: Theme.dp(20)
+                spacing: Theme.dp(2)
 
                 Text {
                     text: "OSX"
-                    font.pixelSize: 15
+                    font.pixelSize: Theme.dp(15)
                     anchors.verticalCenter: parent.verticalCenter
                 }
 
@@ -432,7 +436,7 @@ StatusWindow {
 
                 Text {
                     text: "Win"
-                    font.pixelSize: 15
+                    font.pixelSize: Theme.dp(15)
                     anchors.verticalCenter: parent.verticalCenter
                 }
             }
@@ -444,8 +448,8 @@ StatusWindow {
                 anchors.fill: demoApp
                 source: demoApp
                 horizontalOffset: 0
-                verticalOffset: 5
-                radius: 20
+                verticalOffset: Theme.dp(5)
+                radius: Theme.dp(20)
                 samples: 20
                 color: "#22000000"
             }
@@ -455,7 +459,7 @@ StatusWindow {
     StatusMacTrafficLights {
         anchors.left: parent.left
         anchors.top: parent.top
-        anchors.margins: 13
+        anchors.margins: Theme.dp(13)
 
         visible: Qt.platform.os == "osx"
 
diff --git a/sandbox/pages/StatusAccountSelectorPage.qml b/sandbox/pages/StatusAccountSelectorPage.qml
index ab1bce46..c0e14546 100644
--- a/sandbox/pages/StatusAccountSelectorPage.qml
+++ b/sandbox/pages/StatusAccountSelectorPage.qml
@@ -7,10 +7,10 @@ import StatusQ.Core 0.1
 import StatusQ.Core.Theme 0.1
 import StatusQ.Controls 0.1
 import StatusQ.Popups 0.1
-
+import StatusQ.Core.Utils 0.1
 
 Column {
-    spacing: 8
+    spacing: Theme.dp(8)
 
     StatusAccountSelector {
         id: accountSelector
diff --git a/sandbox/pages/StatusAddressPage.qml b/sandbox/pages/StatusAddressPage.qml
index 544e2985..5ea015cc 100644
--- a/sandbox/pages/StatusAddressPage.qml
+++ b/sandbox/pages/StatusAddressPage.qml
@@ -2,6 +2,7 @@ import QtQuick 2.14
 import QtQuick.Controls 2.14
 import QtQuick.Layouts 1.14
 
+import StatusQ.Core.Theme 0.1
 import StatusQ.Components 0.1
 
 import Sandbox 0.1
@@ -14,7 +15,7 @@ Column {
     }
 
     Item {
-        width: 200
+        width: Theme.dp(200)
         height: childrenRect.height
         StatusAddress {
             text: "0x9ce0056c5fc6bb9459a4dcfa35eaad8c1fee5ce9"
diff --git a/sandbox/pages/StatusChatInfoToolBarPage.qml b/sandbox/pages/StatusChatInfoToolBarPage.qml
index f22e3c44..4915fa6d 100644
--- a/sandbox/pages/StatusChatInfoToolBarPage.qml
+++ b/sandbox/pages/StatusChatInfoToolBarPage.qml
@@ -8,8 +8,8 @@ import StatusQ.Popups 0.1
 
 GridLayout {
     columns: 1
-    columnSpacing: 5
-    rowSpacing: 5
+    columnSpacing: Theme.dp(5)
+    rowSpacing: Theme.dp(5)
 
     StatusChatInfoToolBar {
         chatInfoButton.title: "Cryptokitties"        
diff --git a/sandbox/pages/StatusColorSelectorGridPage.qml b/sandbox/pages/StatusColorSelectorGridPage.qml
index e1d73255..0540ebac 100644
--- a/sandbox/pages/StatusColorSelectorGridPage.qml
+++ b/sandbox/pages/StatusColorSelectorGridPage.qml
@@ -6,20 +6,20 @@ import StatusQ.Core.Theme 0.1
 
 Item {
     id: root
-    width: 800
-    height: 100
+    width: Theme.dp(800)
+    height: Theme.dp(100)
 
     Row {
         id: selectedColor
         anchors.top: parent.top
         anchors.left: colorSelectionGrid.left
-        spacing: 10
+        spacing: Theme.dp(10)
         StatusBaseText {
             text: "SelectedColor is"
         }
         Rectangle {
-            width: 100
-            height: 20
+            width: Theme.dp(100)
+            height: Theme.dp(20)
             radius: width/2
             color: colorSelectionGrid.selectedColor
         }
@@ -28,7 +28,7 @@ Item {
     StatusColorSelectorGrid {
         id: colorSelectionGrid
         anchors.top: selectedColor.bottom
-        anchors.topMargin: 10
+        anchors.topMargin: Theme.dp(10)
         anchors.horizontalCenter: parent.horizontalCenter
         titleText: "COLOR"
         selectedColorIndex: 2
diff --git a/sandbox/pages/StatusColorSelectorPage.qml b/sandbox/pages/StatusColorSelectorPage.qml
index 01f56c2a..0989a256 100644
--- a/sandbox/pages/StatusColorSelectorPage.qml
+++ b/sandbox/pages/StatusColorSelectorPage.qml
@@ -9,7 +9,7 @@ import StatusQ.Controls 0.1
 import Sandbox 0.1
 
 Column {
-    spacing: 8
+    spacing: Theme.dp(8)
 
     StatusColorSelector {
         model: ["red", "blue", "green"]
diff --git a/sandbox/pages/StatusColorSpacePage.qml b/sandbox/pages/StatusColorSpacePage.qml
index af543486..b207baf5 100644
--- a/sandbox/pages/StatusColorSpacePage.qml
+++ b/sandbox/pages/StatusColorSpacePage.qml
@@ -90,14 +90,14 @@ Item {
 
         Rectangle {
             color: colorSpace.color
-            implicitHeight: 48
-            radius: 10
+            implicitHeight: Theme.dp(48)
+            radius: Theme.dp(10)
             Layout.fillWidth: true
 
             StatusBaseText {
                 anchors.centerIn: parent
                 color: Theme.palette.white
-                font.pixelSize: 15
+                font.pixelSize: Theme.dp(15)
                 text: "Quick brown fox jumps over the lazy dog"
             }
         }
diff --git a/sandbox/pages/StatusCommunityCardPage.qml b/sandbox/pages/StatusCommunityCardPage.qml
index 74b2268e..b6346c17 100644
--- a/sandbox/pages/StatusCommunityCardPage.qml
+++ b/sandbox/pages/StatusCommunityCardPage.qml
@@ -2,6 +2,7 @@ import QtQuick 2.0
 import QtQuick.Layouts 1.13
 
 import StatusQ.Components 0.1
+import StatusQ.Core.Theme 0.1
 
 import "../demoapp/data" 1.0
 
@@ -17,8 +18,8 @@ GridLayout {
 
     Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter
     columns: 2
-    columnSpacing: 28
-    rowSpacing: 28
+    columnSpacing: Theme.dp(28)
+    rowSpacing: Theme.dp(28)
 
     Repeater {
         model: Models.curatedCommunitiesModel
diff --git a/sandbox/pages/StatusCommunityTagsPage.qml b/sandbox/pages/StatusCommunityTagsPage.qml
index b38614c2..212e759e 100644
--- a/sandbox/pages/StatusCommunityTagsPage.qml
+++ b/sandbox/pages/StatusCommunityTagsPage.qml
@@ -27,9 +27,9 @@ Item {
     ColumnLayout {
         id: column
         anchors.centerIn: parent
-        width: 600
-        height: 500
-        spacing: 20
+        width: Theme.dp(600)
+        height: Theme.dp(500)
+        spacing: Theme.dp(20)
 
         StatusInput {
             id: tagsFilter
@@ -55,14 +55,14 @@ Item {
         RowLayout {
             StatusBaseText {
                 text: qsTr("Selected tags")
-                font.pixelSize: 15
+                font.pixelSize: Theme.dp(15)
                 Layout.fillWidth: true
             }
 
             StatusBaseText {
                 text: cntSelectedTags + "/" + maxSelectedTags
                 color: Theme.palette.baseColor1
-                font.pixelSize: 13
+                font.pixelSize: Theme.dp(13)
             }
         }
 
@@ -80,4 +80,4 @@ Item {
             Layout.fillHeight: true
         }
     }
-}
\ No newline at end of file
+}
diff --git a/sandbox/pages/StatusExpandableSettingsItemPage.qml b/sandbox/pages/StatusExpandableSettingsItemPage.qml
index 9af00c48..591b29cf 100644
--- a/sandbox/pages/StatusExpandableSettingsItemPage.qml
+++ b/sandbox/pages/StatusExpandableSettingsItemPage.qml
@@ -5,15 +5,15 @@ import StatusQ.Core.Theme 0.1
 import StatusQ.Components 0.1
 
 Column {
-    spacing: 12
-    width: 800
+    spacing: Theme.dp(12)
+    width: Theme.dp(800)
     anchors.top:parent.top
-    leftPadding: 20
-    rightPadding: 20
+    leftPadding: Theme.dp(20)
+    rightPadding: Theme.dp(20)
 
     Rectangle {
         width: parent.width
-        height: 30
+        height: Theme.dp(30)
         color: Theme.palette.baseColor2
         StatusBaseText {
             anchors.verticalCenter: parent.verticalCenter
@@ -60,7 +60,7 @@ Column {
 
     Rectangle {
         width: parent.width
-        height: 30
+        height: Theme.dp(30)
         color:  Theme.palette.baseColor2
         StatusBaseText {
             anchors.verticalCenter: parent.verticalCenter
@@ -103,7 +103,7 @@ Column {
 
     Rectangle {
         width: parent.width
-        height: 30
+        height: Theme.dp(30)
         color:  Theme.palette.baseColor2
         StatusBaseText {
             anchors.verticalCenter: parent.verticalCenter
@@ -134,15 +134,15 @@ Column {
         id: notImplemented
         Rectangle {
             anchors.centerIn: parent
-            width: 654
+            width: Theme.dp(654)
             height: infoText.implicitHeight
             color: Theme.palette.baseColor5
             StatusBaseText {
                 id: infoText
                 anchors.centerIn: parent
                 color: Theme.palette.directColor4
-                font.pixelSize: 15
-                lineHeight: 22
+                font.pixelSize: Theme.dp(15)
+                lineHeight: Theme.dp(22)
                 lineHeightMode: Text.FixedHeight
                 font.weight: Font.Medium
                 text: qsTr("Not Implemented")
diff --git a/sandbox/pages/StatusInputPage.qml b/sandbox/pages/StatusInputPage.qml
index a5a12f51..c44300b6 100644
--- a/sandbox/pages/StatusInputPage.qml
+++ b/sandbox/pages/StatusInputPage.qml
@@ -9,7 +9,7 @@ import StatusQ.Controls.Validators 0.1
 import Sandbox 0.1
 
 Column {
-    spacing: 8
+    spacing: Theme.dp(8)
 
     StatusInput {
         input.placeholderText: "Placeholder"
@@ -58,17 +58,17 @@ Column {
     }
 
     Item {
-        implicitWidth: 480
-        implicitHeight: 82
+        implicitWidth: Theme.dp(480)
+        implicitHeight: Theme.dp(82)
         z: 100000
         StatusSeedPhraseInput {
             id: statusSeedInput
             anchors.left: parent.left
             anchors.right: parent.right
             height: parent.height
-            textEdit.input.anchors.leftMargin: 16
-            textEdit.input.anchors.rightMargin: 16
-            textEdit.input.anchors.topMargin: 11
+            textEdit.input.anchors.leftMargin: Theme.dp(16)
+            textEdit.input.anchors.rightMargin: Theme.dp(16)
+            textEdit.input.anchors.topMargin: Theme.dp(11)
             textEdit.label: "Input with drop down selection list"
             leftComponentText: "1"
             inputList: ListModel {
@@ -97,8 +97,8 @@ Column {
     StatusInput {
         label: "StatusInput"
         secondaryLabel: "with right icon"
-        input.icon.width: 15
-        input.icon.height: 11
+        input.icon.width: Theme.dp(15)
+        input.icon.height: Theme.dp(11)
         input.icon.name: text !== "" ? "checkmark" : ""
         input.leftIcon: false
     }
@@ -107,7 +107,7 @@ Column {
         label: "Label"
         secondaryLabel: "secondary label"
         input.placeholderText: "Placeholder"
-        input.implicitHeight: 56
+        input.implicitHeight: Theme.dp(56)
     }
 
     StatusInput {
@@ -148,7 +148,7 @@ Column {
         input.placeholderText: "Input width component (right side)"
         input.rightComponent: StatusIcon {
             icon: "cancel"
-            height: 16
+            height: Theme.dp(16)
             color: Theme.palette.dangerColor1
         }
     }
@@ -162,14 +162,14 @@ Column {
     StatusInput {
         input.multiline: true
         input.placeholderText: "Multiline with static height"
-        input.implicitHeight: 100
+        input.implicitHeight: Theme.dp(100)
     }
 
     StatusInput {
         input.multiline: true
         input.placeholderText: "Multiline with max/min"
-        input.minimumHeight: 80
-        input.maximumHeight: 200
+        input.minimumHeight: Theme.dp(80)
+        input.maximumHeight: Theme.dp(200)
     }
 
     StatusInput {
@@ -200,6 +200,7 @@ Column {
     StatusInput {
         label: "Input with inline token selector"
         input.leftComponent: StatusTokenInlineSelector {
+            anchors.verticalCenter: parent.verticalCenter
             tokens: [{amount: 0.1, token: "ETH"},
                      {amount: 10, token: "SNT"},
                      {amount: 15, token: "MANA"}]
diff --git a/sandbox/pages/StatusListPickerPage.qml b/sandbox/pages/StatusListPickerPage.qml
index e0de9256..7c9d03f0 100644
--- a/sandbox/pages/StatusListPickerPage.qml
+++ b/sandbox/pages/StatusListPickerPage.qml
@@ -11,14 +11,14 @@ import "../demoapp/data" 1.0
 GridLayout {
     id: root
     columns: 1
-    rowSpacing: 150
+    rowSpacing: Theme.dp(150)
 
     GridLayout {
         Layout.alignment: Qt.AlignVCenter | Qt.AlignHCenter
         rows: 4
         columns: 2
-        rowSpacing: 170
-        columnSpacing: 150
+        rowSpacing: Theme.dp(170)
+        columnSpacing: Theme.dp(150)
         z: 100
         StatusListPicker {
             id: languagePicker
@@ -56,15 +56,15 @@ GridLayout {
     StatusBaseText {
         id: pageDesc
         Layout.alignment: Qt.AlignVCenter | Qt.AlignHCenter
-        height: 100
-        width: 500
+        height: Theme.dp(100)
+        width: Theme.dp(500)
         text: "4 different configurations for the `StatusListPicker` component:\n
     * Single selection. \n
     * Single selection but dynamically changed to multiple selection (model provides multiple selected items).\n
     * Multiple selection.\n
     * Multiple selection and displayed name is the symbol + shortName\n"
         color: Theme.palette.baseColor1
-        font.pixelSize: 15
+        font.pixelSize: Theme.dp(15)
     }
 
     // Outsite area
diff --git a/sandbox/pages/StatusMacNotificationPage.qml b/sandbox/pages/StatusMacNotificationPage.qml
index 7c6614f1..3f3eda26 100644
--- a/sandbox/pages/StatusMacNotificationPage.qml
+++ b/sandbox/pages/StatusMacNotificationPage.qml
@@ -3,11 +3,12 @@ import QtQuick.Controls 2.14
 import QtQuick.Layouts 1.14
 
 import StatusQ.Platform 0.1
+import StatusQ.Core.Theme 0.1
 
 import Sandbox 0.1
 
 Column {
-    spacing: 8
+    spacing: Theme.dp(8)
 
     StatusMacNotification {
         name: "Some name"
diff --git a/sandbox/pages/StatusPasswordStrengthIndicatorPage.qml b/sandbox/pages/StatusPasswordStrengthIndicatorPage.qml
index 40acd14c..fe866b15 100644
--- a/sandbox/pages/StatusPasswordStrengthIndicatorPage.qml
+++ b/sandbox/pages/StatusPasswordStrengthIndicatorPage.qml
@@ -1,10 +1,11 @@
 import QtQuick.Layouts 1.14
 import StatusQ.Controls 0.1
+import StatusQ.Core.Theme 0.1
 
 GridLayout {
     columns: 1
-    columnSpacing: 5
-    rowSpacing: 5
+    columnSpacing: Theme.dp(5)
+    rowSpacing: Theme.dp(5)
 
     StatusPasswordStrengthIndicator {
         id: veryweakPw
diff --git a/sandbox/pages/StatusPinInputPage.qml b/sandbox/pages/StatusPinInputPage.qml
index c4143889..56aaa26d 100644
--- a/sandbox/pages/StatusPinInputPage.qml
+++ b/sandbox/pages/StatusPinInputPage.qml
@@ -8,7 +8,7 @@ import StatusQ.Controls.Validators 0.1
 
 Column {
     id: root
-    spacing: 25
+    spacing: Theme.dp(25)
     Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter
 
     // PIN input that accepts only numbers
@@ -16,7 +16,7 @@ Column {
         anchors.horizontalCenter: parent.horizontalCenter
         color: Theme.palette.directColor1
         text: "Enter Keycard PIN"
-        font.pixelSize: 30
+        font.pixelSize: Theme.dp(30)
         font.bold: true
     }
 
@@ -30,23 +30,23 @@ Column {
         anchors.horizontalCenter: parent.horizontalCenter
         color: Theme.palette.dangerColor1
         text: "Only numbers allowed"
-        font.pixelSize: 16
+        font.pixelSize: Theme.dp(16)
     }
 
     StatusBaseText {
         anchors.horizontalCenter: parent.horizontalCenter
         color: Theme.palette.directColor1
         text: "Introduced PIN: " + numbersPinInput.pinInput
-        font.pixelSize: 12
+        font.pixelSize: Theme.dp(12)
     }
 
     // PIN input that accepts input depending on the regular expression definition
     StatusBaseText {
-        topPadding: 100
+        topPadding: Theme.dp(100)
         anchors.horizontalCenter: parent.horizontalCenter
         color: Theme.palette.directColor1
         text: "Enter another Keycard PIN"
-        font.pixelSize: 30
+        font.pixelSize: Theme.dp(30)
         font.bold: true
     }
 
@@ -54,8 +54,8 @@ Column {
         id: regexPinInput
         anchors.horizontalCenter: parent.horizontalCenter
         validator: StatusRegularExpressionValidator { regularExpression: /[0-9A-Za-z@]+/ }
-        circleDiameter: 22
-        circleSpacing: 22
+        circleDiameter: Theme.dp(22)
+        circleSpacing: Theme.dp(22)
         pinLen: 7
     }
 
@@ -63,13 +63,13 @@ Column {
         anchors.horizontalCenter: parent.horizontalCenter
         color: Theme.palette.dangerColor1
         text: "Only alphanumeric characters and '@' allowed"
-        font.pixelSize: 16
+        font.pixelSize: Theme.dp(16)
     }
 
     StatusBaseText {
         anchors.horizontalCenter: parent.horizontalCenter
         color: Theme.palette.directColor1
         text: "Introduced PIN: " + regexPinInput.pinInput
-        font.pixelSize: 12
+        font.pixelSize: Theme.dp(12)
     }
 }
diff --git a/sandbox/pages/StatusPopupMenuPage.qml b/sandbox/pages/StatusPopupMenuPage.qml
index dda229fa..9cb98079 100644
--- a/sandbox/pages/StatusPopupMenuPage.qml
+++ b/sandbox/pages/StatusPopupMenuPage.qml
@@ -9,8 +9,8 @@ import StatusQ.Popups 0.1
 
 GridLayout {
     columns: 1
-    columnSpacing: 5
-    rowSpacing: 5
+    columnSpacing: Theme.dp(5)
+    rowSpacing: Theme.dp(5)
 
     StatusButton {
         text: "Simple"
diff --git a/sandbox/pages/StatusSelectPage.qml b/sandbox/pages/StatusSelectPage.qml
index f9a38e7c..92e8c8ec 100644
--- a/sandbox/pages/StatusSelectPage.qml
+++ b/sandbox/pages/StatusSelectPage.qml
@@ -9,7 +9,7 @@ import StatusQ.Popups 0.1
 
 import Sandbox 0.1
 Column {
-    spacing: 8
+    spacing: Theme.dp(8)
 
     StatusSelect {
         id: select
diff --git a/sandbox/pages/StatusTabBarButtonPage.qml b/sandbox/pages/StatusTabBarButtonPage.qml
index 08b72729..0426536e 100644
--- a/sandbox/pages/StatusTabBarButtonPage.qml
+++ b/sandbox/pages/StatusTabBarButtonPage.qml
@@ -7,7 +7,7 @@ import StatusQ.Controls 0.1
 import Sandbox 0.1
 
 Column {
-    spacing: 8
+    spacing: Theme.dp(8)
 
     StatusTabBar {
         StatusTabButton {
diff --git a/sandbox/pages/StatusTabBarIconButtonPage.qml b/sandbox/pages/StatusTabBarIconButtonPage.qml
index 89bd043f..81103b21 100644
--- a/sandbox/pages/StatusTabBarIconButtonPage.qml
+++ b/sandbox/pages/StatusTabBarIconButtonPage.qml
@@ -9,7 +9,7 @@ import StatusQ.Controls 0.1
 import Sandbox 0.1
 
 Column {
-    spacing: 8
+    spacing: Theme.dp(8)
 
     Row {
         StatusTabBarIconButton {
diff --git a/sandbox/pages/StatusTabSwitchPage.qml b/sandbox/pages/StatusTabSwitchPage.qml
index 22c96f24..169593a8 100644
--- a/sandbox/pages/StatusTabSwitchPage.qml
+++ b/sandbox/pages/StatusTabSwitchPage.qml
@@ -3,11 +3,12 @@ import QtQuick.Layouts 1.14
 import QtQuick.Controls 2.13
 
 import StatusQ.Controls 0.1
+import StatusQ.Core.Theme 0.1
 
 GridLayout {
     columns: 1
-    columnSpacing: 5
-    rowSpacing: 5
+    columnSpacing: Theme.dp(5)
+    rowSpacing: Theme.dp(5)
 
     StatusSwitchTabBar {
         StatusSwitchTabButton {
diff --git a/sandbox/pages/StatusTagSelectorPage.qml b/sandbox/pages/StatusTagSelectorPage.qml
index 3b778d2c..98a40722 100644
--- a/sandbox/pages/StatusTagSelectorPage.qml
+++ b/sandbox/pages/StatusTagSelectorPage.qml
@@ -1,6 +1,7 @@
 import QtQuick 2.14
 
 import StatusQ.Components 0.1
+import StatusQ.Core.Theme 0.1
 
 Item {
     id: root
@@ -56,8 +57,8 @@ Item {
 
     StatusTagSelector {
         id: tagSelector
-        width: 650
-        height: 44
+        width: Theme.dp(650)
+        height: Theme.dp(44)
         anchors.centerIn: parent
         namesModel: root.asortedContacts
         toLabelText: qsTr("To: ")
diff --git a/sandbox/pages/StatusToastMessagePage.qml b/sandbox/pages/StatusToastMessagePage.qml
index f24aeb9f..decb4276 100644
--- a/sandbox/pages/StatusToastMessagePage.qml
+++ b/sandbox/pages/StatusToastMessagePage.qml
@@ -1,6 +1,7 @@
 import QtQuick 2.14
 
 import StatusQ.Components 0.1
+import StatusQ.Core.Theme 0.1
 
 Item {
     id: root
@@ -9,7 +10,7 @@ Item {
     Column {
         id: toastArea
         anchors.centerIn: parent
-        spacing: 8
+        spacing: Theme.dp(8)
         Repeater {
             id: toastRepeater
             width: parent.width
diff --git a/sandbox/pages/StatusWalletColorButtonPage.qml b/sandbox/pages/StatusWalletColorButtonPage.qml
index 41f8b7be..eb7d6c6f 100644
--- a/sandbox/pages/StatusWalletColorButtonPage.qml
+++ b/sandbox/pages/StatusWalletColorButtonPage.qml
@@ -11,7 +11,7 @@ Column {
     spacing: 8
 
     Row {
-        spacing: 4
+        spacing: Theme.dp(4)
         StatusWalletColorButton {
             icon.color: Theme.palette.miscColor1
             selected: true
diff --git a/sandbox/pages/StatusWalletColorSelectPage.qml b/sandbox/pages/StatusWalletColorSelectPage.qml
index af2d5f4b..eb93a49d 100644
--- a/sandbox/pages/StatusWalletColorSelectPage.qml
+++ b/sandbox/pages/StatusWalletColorSelectPage.qml
@@ -9,7 +9,7 @@ import StatusQ.Controls 0.1
 import Sandbox 0.1
 
 Column {
-    spacing: 8
+    spacing: Theme.dp(8)
 
     StatusWalletColorSelect {
         model: Theme.palette.userCustomizationColors
diff --git a/sandbox/pages/StatusWizardStepperPage.qml b/sandbox/pages/StatusWizardStepperPage.qml
index 14cba9de..b7bfeeaa 100644
--- a/sandbox/pages/StatusWizardStepperPage.qml
+++ b/sandbox/pages/StatusWizardStepperPage.qml
@@ -6,8 +6,8 @@ import StatusQ.Core.Theme 0.1
 
 Item {
     id: root
-    width: 800
-    height: 100
+    width: Theme.dp(800)
+    height: Theme.dp(100)
 
     //Simulate animation between steps
     property bool stepsCompleted: false
@@ -44,7 +44,7 @@ Item {
         anchors.horizontalCenter: parent.horizontalCenter
         color: Theme.palette.directColor1
         text: "Press Ctrl+R to run the animation"
-        font.pixelSize: 17
+        font.pixelSize: Theme.dp(17)
     }
 
     SequentialAnimation {
@@ -91,9 +91,9 @@ Item {
 
     StatusWizardStepper {
         id: wizardStepper
-        width: (parent.width - 50)
+        width: (parent.width - Theme.dp(50))
         anchors.top: indicLabel.bottom
-        anchors.topMargin: 16
+        anchors.topMargin: Theme.dp(16)
         anchors.horizontalCenter: parent.horizontalCenter
         stepsModel: stepsListModel
     }
diff --git a/src/StatusQ/Components/StatusAddress.qml b/src/StatusQ/Components/StatusAddress.qml
index 4918859e..7eb8d83b 100644
--- a/src/StatusQ/Components/StatusAddress.qml
+++ b/src/StatusQ/Components/StatusAddress.qml
@@ -13,7 +13,7 @@ StatusBaseText {
     property real maxWidth: width
 
     font.family: Theme.palette.monoFont.name
-    font.pixelSize: 13
+    font.pixelSize: Theme.dp(13)
     elide: Text.ElideMiddle
     color: Theme.palette.baseColor1
 
diff --git a/src/StatusQ/Components/StatusBadge.qml b/src/StatusQ/Components/StatusBadge.qml
index bee30d40..97568c55 100644
--- a/src/StatusQ/Components/StatusBadge.qml
+++ b/src/StatusQ/Components/StatusBadge.qml
@@ -7,18 +7,18 @@ Rectangle {
 
     property int value
 
-    implicitHeight: statusBadge.value > 0 ? 18 + statusBadge.border.width : 10 + statusBadge.border.width
+    implicitHeight: statusBadge.value > 0 ? Theme.dp(18) + statusBadge.border.width : Theme.dp(10) + statusBadge.border.width
     implicitWidth: {
-        if (statusBadge.value > 99) {
-            return 28 + statusBadge.border.width
+        if (statusBadge.value > Theme.dp(99)) {
+            return Theme.dp(28) + statusBadge.border.width
         }
-        if (statusBadge.value > 9) {
-            return 26 + statusBadge.border.width
+        if (statusBadge.value > Theme.dp(9)) {
+            return Theme.dp(26) + statusBadge.border.width
         }
         if (statusBadge.value > 0) {
-            return 18 + statusBadge.border.width
+            return Theme.dp(18) + statusBadge.border.width
         }
-        return 10 + statusBadge.border.width
+        return Theme.dp(10) + statusBadge.border.width
     }
     radius: height / 2
     color: Theme.palette.primaryColor1
@@ -26,7 +26,7 @@ Rectangle {
     StatusBaseText {
         id: value
         visible: statusBadge.value > 0
-        font.pixelSize: statusBadge.value > 99 ? 10 : 12
+        font.pixelSize: statusBadge.value > Theme.dp(99) ? Theme.dp(10) : Theme.dp(12)
         font.weight: Font.Medium
         color: Theme.palette.statusBadge.foregroundColor
         anchors.centerIn: parent
diff --git a/src/StatusQ/Components/StatusChatInfoToolBar.qml b/src/StatusQ/Components/StatusChatInfoToolBar.qml
index df293bde..26fdfb9f 100644
--- a/src/StatusQ/Components/StatusChatInfoToolBar.qml
+++ b/src/StatusQ/Components/StatusChatInfoToolBar.qml
@@ -3,12 +3,13 @@ import QtGraphicalEffects 1.13
 import StatusQ.Components 0.1
 import StatusQ.Controls 0.1
 import StatusQ.Popups 0.1
+import StatusQ.Core.Theme 0.1
 
 Item {
     id: statusChatInfoToolBar
 
-    implicitWidth: 288
-    implicitHeight: 56
+    implicitWidth: Theme.dp(288)
+    implicitHeight: Theme.dp(56)
 
     property alias chatInfoButton: statusChatInfoButton
     property alias menuButton: statusMenuButton
@@ -27,7 +28,7 @@ Item {
         id: statusChatInfoButton
         anchors.verticalCenter: parent.verticalCenter
         anchors.left: parent.left
-        anchors.right: (implicitWidth > parent.width - 50) ? statusMenuButton.left : undefined
+        anchors.right: (implicitWidth > parent.width - Theme.dp(50)) ? statusMenuButton.left : undefined
         anchors.rightMargin: 5
         type: StatusChatInfoButton.Type.OneToOneChat
         onClicked: statusChatInfoToolBar.chatInfoButtonClicked()
@@ -39,8 +40,8 @@ Item {
         anchors.verticalCenter: parent.verticalCenter
 
         visible: popupMenuSlot.active
-        width: visible ? 32 : 0
-        height: 32
+        width: visible ? Theme.dp(32) : 0
+        height: Theme.dp(32)
 
         type: StatusRoundButton.Type.Secondary
         icon.name: "add"
@@ -89,7 +90,7 @@ Item {
         onClicked: {
             statusChatInfoToolBar.addButtonClicked(mouse)
             statusMenuButton.state = "pressed"
-            popupMenuSlot.item.popup(statusMenuButton.width-popupMenuSlot.item.width, statusMenuButton.height + 4)
+            popupMenuSlot.item.popup(statusMenuButton.width-popupMenuSlot.item.width, statusMenuButton.height + Theme.dp(4))
         }
 
         Loader {
diff --git a/src/StatusQ/Components/StatusChatList.qml b/src/StatusQ/Components/StatusChatList.qml
index 8c4061e5..2b94a9f8 100644
--- a/src/StatusQ/Components/StatusChatList.qml
+++ b/src/StatusQ/Components/StatusChatList.qml
@@ -11,8 +11,8 @@ import StatusQ.Controls 0.1
 Column {
     id: statusChatList
 
-    spacing: 4
-    width: 288
+    spacing: Theme.dp(4)
+    width: Theme.dp(288)
 
     property string categoryId: ""
     property var model: null
diff --git a/src/StatusQ/Components/StatusChatListAndCategories.qml b/src/StatusQ/Components/StatusChatListAndCategories.qml
index fb602ecc..54f88f47 100644
--- a/src/StatusQ/Components/StatusChatListAndCategories.qml
+++ b/src/StatusQ/Components/StatusChatListAndCategories.qml
@@ -6,6 +6,7 @@ import StatusQ.Core.Utils 0.1
 import StatusQ.Components 0.1
 import StatusQ.Popups 0.1
 import StatusQ.Core 0.1
+import StatusQ.Core.Theme 0.1
 
 Item {
     id: statusChatListAndCategories
@@ -64,7 +65,7 @@ Item {
 
             anchors.top: parent.top
             anchors.horizontalCenter: parent.horizontalCenter
-            spacing: 4
+            spacing: Theme.dp(4)
 
             StatusChatList {
                 id: statusChatList
diff --git a/src/StatusQ/Components/StatusChatListCategoryItem.qml b/src/StatusQ/Components/StatusChatListCategoryItem.qml
index 55a75d11..f556a922 100644
--- a/src/StatusQ/Components/StatusChatListCategoryItem.qml
+++ b/src/StatusQ/Components/StatusChatListCategoryItem.qml
@@ -8,11 +8,11 @@ import StatusQ.Components 0.1
 StatusListItem {
     id: statusChatListCategoryItem
 
-    implicitWidth: 288
-    implicitHeight: 28
+    implicitWidth: Theme.dp(288)
+    implicitHeight: Theme.dp(28)
 
-    leftPadding: 8
-    rightPadding: 8
+    leftPadding: Theme.dp(8)
+    rightPadding: Theme.dp(8)
 
     property bool opened: true
     property bool highlighted: false
@@ -32,13 +32,13 @@ StatusListItem {
     statusListItemTitle.color: Theme.palette.directColor4
     statusListItemTitle.font.weight: Font.Medium
 
-    statusListItemComponentsSlot.spacing: 1
+    statusListItemComponentsSlot.spacing: Theme.dp(1)
 
     components: [
         StatusChatListCategoryItemButton {
             id: addButton
             icon.name: "add"
-            icon.width: 20
+            icon.width: Theme.dp(20)
             visible: statusChatListCategoryItem.showAddButton &&
                 (statusChatListCategoryItem.highlighted ||
                 statusChatListCategoryItem.sensor.containsMouse)
@@ -48,7 +48,7 @@ StatusListItem {
         StatusChatListCategoryItemButton {
             id: menuButton
             icon.name: "more"
-            icon.width: 21
+            icon.width: Theme.dp(21)
             visible: statusChatListCategoryItem.showMenuButton &&
                 (statusChatListCategoryItem.highlighted ||
                 statusChatListCategoryItem.sensor.containsMouse)
@@ -58,7 +58,7 @@ StatusListItem {
         StatusChatListCategoryItemButton {
             id: toggleButton
             icon.name: "chevron-down"
-            icon.width: 18
+            icon.width: Theme.dp(18)
             icon.rotation: statusChatListCategoryItem.opened ? 0 : 270
             onPressed: {
                 sensor.enabled = false;
diff --git a/src/StatusQ/Components/StatusChatListItem.qml b/src/StatusQ/Components/StatusChatListItem.qml
index ccf17d5e..0febb393 100644
--- a/src/StatusQ/Components/StatusChatListItem.qml
+++ b/src/StatusQ/Components/StatusChatListItem.qml
@@ -22,12 +22,12 @@ Rectangle {
     property int notificationsCount: 0
     property bool muted: false
     property StatusImageSettings image: StatusImageSettings {
-        width: 24
-        height: 24
+        width: Theme.dp(24)
+        height: Theme.dp(24)
     }
     property StatusIconSettings icon: StatusIconSettings {
-        width: 24
-        height: 24
+        width: Theme.dp(24)
+        height: Theme.dp(24)
         color: Theme.palette.miscColor5
         emoji: ""
         charactersLen: root.type === StatusChatListItem.Type.OneToOneChat ? 2 : 1
@@ -53,10 +53,10 @@ Rectangle {
         CommunityChat // 6
     }
 
-    implicitWidth: 288
-    implicitHeight: 40
+    implicitWidth: Theme.dp(288)
+    implicitHeight: Theme.dp(40)
 
-    radius: 8
+    radius: Theme.dp(8)
 
     color: {
         if (selected) {
@@ -93,10 +93,10 @@ Rectangle {
         StatusIcon {
             id: statusIcon
             anchors.left: identicon.right
-            anchors.leftMargin: 8
+            anchors.leftMargin: Theme.dp(8)
             anchors.verticalCenter: parent.verticalCenter
 
-            width: 14
+            width: Theme.dp(14)
             visible: root.type !== StatusChatListItem.Type.OneToOneChat
             opacity: {
                 if (root.muted && !hoverHander.hovered && !root.highlighted) {
@@ -133,7 +133,7 @@ Rectangle {
             anchors.leftMargin: statusIcon.visible ? 1 : 8
             anchors.right: mutedIcon.visible ? mutedIcon.left :
                                                statusBadge.visible ? statusBadge.left : parent.right
-            anchors.rightMargin: 6
+            anchors.rightMargin: Theme.dp(6)
             anchors.verticalCenter: parent.verticalCenter
 
             text: (root.type === StatusChatListItem.Type.PublicChat &&
@@ -158,7 +158,7 @@ Rectangle {
                           root.notificationsCount > 0 ||
                           root.highlightWhenCreated ||
                           statusBadge.visible) ? Font.Bold : Font.Medium
-            font.pixelSize: 15
+            font.pixelSize: Theme.dp(15)
         }
 
         StatusIcon {
@@ -166,7 +166,7 @@ Rectangle {
             anchors.right: statusBadge.visible ? statusBadge.left : parent.right
             anchors.rightMargin: 8
             anchors.verticalCenter: parent.verticalCenter
-            width: 14
+            width: Theme.dp(14)
             opacity: mutedIconSensor.containsMouse ? 1.0 : 0.2
             icon: Theme.palette.name === "light" ? "tiny/muted" : "tiny/muted-white"
             visible: root.muted
@@ -190,10 +190,10 @@ Rectangle {
 
             anchors.verticalCenter: parent.verticalCenter
             anchors.right: parent.right
-            anchors.rightMargin: 8
+            anchors.rightMargin: Theme.dp(8)
 
             color: root.muted ? Theme.palette.primaryColor2 : Theme.palette.primaryColor1
-            border.width: 4
+            border.width: Theme.dp(4)
             border.color: color
             value: root.notificationsCount
             visible: root.notificationsCount > 0
diff --git a/src/StatusQ/Components/StatusChatToolBar.qml b/src/StatusQ/Components/StatusChatToolBar.qml
index 7e7c74c8..cf74726a 100644
--- a/src/StatusQ/Components/StatusChatToolBar.qml
+++ b/src/StatusQ/Components/StatusChatToolBar.qml
@@ -13,7 +13,7 @@ Item {
     property alias membersButton: membersButton
     property alias searchButton: searchButton
 
-    property int padding: 8
+    property int padding: Theme.dp(8)
     property int notificationCount: 0
     property Component popupMenu
     property var toolbarComponent
@@ -24,8 +24,8 @@ Item {
     signal membersButtonClicked()
     signal searchButtonClicked()
 
-    implicitWidth: 518
-    implicitHeight: 60
+    implicitWidth: Theme.dp(518)
+    implicitHeight: Theme.dp(60)
 
     onPopupMenuChanged: {
         if (!!popupMenu) {
@@ -55,8 +55,8 @@ Item {
 
             StatusFlatRoundButton {
                 id: searchButton
-                width: 32
-                height: 32
+                width: Theme.dp(32)
+                height: Theme.dp(32)
                 icon.name: "search"
                 type: StatusFlatRoundButton.Type.Secondary
                 onClicked: statusChatToolBar.searchButtonClicked()
@@ -64,13 +64,13 @@ Item {
                 // initializing the tooltip
                 tooltip.text: qsTr("Search")
                 tooltip.orientation: StatusToolTip.Orientation.Bottom
-                tooltip.y: parent.height + 12
+                tooltip.y: parent.height + Theme.dp(12)
             }
 
             StatusFlatRoundButton {
                 id: membersButton
-                width: 32
-                height: 32
+                width: Theme.dp(32)
+                height: Theme.dp(32)
                 icon.name: "group-chat"
                 type: StatusFlatRoundButton.Type.Secondary
                 onClicked: statusChatToolBar.membersButtonClicked()
@@ -83,8 +83,8 @@ Item {
 
             StatusFlatRoundButton {
                 id: menuButton
-                width: 32
-                height: 32
+                width: Theme.dp(32)
+                height: Theme.dp(32)
                 icon.name: "more"
                 type: StatusFlatRoundButton.Type.Secondary
                 visible: !!statusChatToolBar.popupMenu
@@ -93,7 +93,7 @@ Item {
                 tooltip.visible: !!tooltip.text && menuButton.hovered && !popupMenuSlot.item.opened
                 tooltip.text: qsTr("More")
                 tooltip.orientation: StatusToolTip.Orientation.Bottom
-                tooltip.y: parent.height + 12
+                tooltip.y: parent.height + Theme.dp(12)
 
                 property bool showMoreMenu: false
                 onClicked: {
@@ -127,8 +127,8 @@ Item {
             }
 
             Rectangle {
-                height: 24
-                width: 1
+                height: Theme.dp(24)
+                width: Theme.dp(1)
                 color: Theme.palette.directColor7
                 Layout.alignment: Qt.AlignVCenter
                 visible: notificationButton.visible &&
diff --git a/src/StatusQ/Components/StatusColorSpace.qml b/src/StatusQ/Components/StatusColorSpace.qml
index fc2df525..7fb3c964 100644
--- a/src/StatusQ/Components/StatusColorSpace.qml
+++ b/src/StatusQ/Components/StatusColorSpace.qml
@@ -54,8 +54,8 @@ Item {
             rootColor = Qt.hsva(color.hsvHue, 1, 1, 1)
     }
 
-    implicitWidth: 340
-    implicitHeight: 340
+    implicitWidth: Theme.dp(340)
+    implicitHeight: Theme.dp(340)
 
     QtObject {
         id: d
diff --git a/src/StatusQ/Components/StatusCommunityCard.qml b/src/StatusQ/Components/StatusCommunityCard.qml
index e0996c58..b4dc8f1b 100644
--- a/src/StatusQ/Components/StatusCommunityCard.qml
+++ b/src/StatusQ/Components/StatusCommunityCard.qml
@@ -130,13 +130,13 @@ Rectangle {
 
     QtObject {
         id: d
-        property int cardWidth: 335
-        property int bannerHeigth: 64
-        property int cardHeigth: 190
-        property int totalHeigth: 230
-        property int margins: 12
-        property int bannerRadius: 20
-        property int cardRadius: 16
+        property int cardWidth: Theme.dp(335)
+        property int bannerHeigth: Theme.dp(64)
+        property int cardHeigth: Theme.dp(190)
+        property int totalHeigth: Theme.dp(230)
+        property int margins: Theme.dp(12)
+        property int bannerRadius: Theme.dp(20)
+        property int cardRadius: Theme.dp(16)
         property color cardColor: Theme.palette.indirectColor1
         property color fontColor: Theme.palette.directColor1
         property color loadingColor1: Theme.palette.baseColor5
@@ -168,8 +168,8 @@ Rectangle {
     layer.effect: DropShadow {
         source: root
         horizontalOffset: 0
-        verticalOffset: 2
-        radius: sensor.containsMouse ? 30 : d.bannerRadius
+        verticalOffset: Theme.dp(2)
+        radius: sensor.containsMouse ? Theme.dp(30) : d.bannerRadius
         samples: 25
         spread: 0
         color: sensor.containsMouse ? Theme.palette.backdropColor : Theme.palette.dropShadow
@@ -207,10 +207,10 @@ Rectangle {
     Rectangle {
         z: content.z + 1
         anchors.top: parent.top
-        anchors.topMargin: 16
+        anchors.topMargin: Theme.dp(16)
         anchors.left: parent.left
-        anchors.leftMargin: 12
-        width: 48
+        anchors.leftMargin: Theme.dp(12)
+        width: Theme.dp(48)
         height: width
         radius: width / 2
         color: root.loaded ? d.cardColor : d.loadingColor1
@@ -218,7 +218,7 @@ Rectangle {
         StatusRoundedImage {
             visible: root.loaded
             anchors.centerIn: parent
-            width: parent.width - 4
+            width: parent.width - Theme.dp(4)
             height: width
             image.source: root.logo
             color: "transparent"
@@ -231,7 +231,7 @@ Rectangle {
         z: banner.z + 1
         visible: root.loaded
         anchors.top: parent.top
-        anchors.topMargin: 40
+        anchors.topMargin: Theme.dp(40)
         width: d.cardWidth
         height: d.cardHeigth
         color: d.cardColor
@@ -241,27 +241,27 @@ Rectangle {
         Rectangle {
             visible: root.isPrivate
             anchors.top: parent.top
-            anchors.topMargin: 8
+            anchors.topMargin: Theme.dp(8)
             anchors.right: parent.right
             anchors.rightMargin: anchors.topMargin
-            width: 48
-            height: 24
+            width: Theme.dp(48)
+            height: Theme.dp(24)
             color: d.loadingColor2
-            radius: 200
+            radius: Theme.dp(200)
             StatusIcon {
                 anchors.verticalCenter: parent.verticalCenter
                 anchors.leftMargin: 6
                 anchors.left: parent.left
                 icon: "tiny/unlocked"
-                width: 16
-                height: 16
+                width: Theme.dp(16)
+                height: Theme.dp(16)
                 color: Theme.palette.baseColor1
             }
             StatusRoundedImage {
-                anchors.rightMargin: 2
+                anchors.rightMargin: Theme.dp(2)
                 anchors.right: parent.right
                 anchors.verticalCenter: parent.verticalCenter
-                width: 20
+                width: Theme.dp(20)
                 height: width
                 image.source: root.tokenLogo
                 color: "transparent"
@@ -270,24 +270,24 @@ Rectangle {
         // Community info
         ColumnLayout {
             anchors.fill: parent
-            anchors.topMargin: 32
+            anchors.topMargin: Theme.dp(32)
             anchors.leftMargin: d.margins
             anchors.rightMargin: d.margins
             anchors.bottomMargin: d.margins
             clip: true
-            spacing: 6
+            spacing: Theme.dp(6)
             StatusBaseText {
                 Layout.alignment: Qt.AlignVCenter
                 text: root.name
                 font.weight: Font.Bold
-                font.pixelSize: 19
+                font.pixelSize: Theme.dp(19)
                 color: d.fontColor
             }
             StatusBaseText {
                 Layout.fillWidth: true
                 Layout.fillHeight: true
                 text: root.description
-                font.pixelSize: 15
+                font.pixelSize: Theme.dp(15)
                 lineHeight: 1.2
                 color: d.fontColor
                 maximumLineCount: 2
@@ -298,48 +298,48 @@ Rectangle {
         }
         ColumnLayout {
             anchors.fill: parent
-            anchors.topMargin: 116
+            anchors.topMargin: Theme.dp(116)
             anchors.leftMargin: d.margins
             anchors.rightMargin: d.margins
             anchors.bottomMargin: d.margins
             clip: true
-            spacing: 18
+            spacing: Theme.dp(18)
             Row {
                 Layout.alignment: Qt.AlignVCenter
-                spacing: 20
+                spacing: Theme.dp(20)
                 // Members
                 Row {
                     height: membersTxt.height
-                    spacing: 4
+                    spacing: Theme.dp(4)
                     StatusIcon {
                         anchors.verticalCenter: parent.verticalCenter
                         icon: "tiny/members"
-                        width: 16
-                        height: 16
+                        width: Theme.dp(16)
+                        height: Theme.dp(16)
                     }
                     StatusBaseText {
                         id: membersTxt
                         Layout.alignment: Qt.AlignVCenter
                         text: d.numberFormat(root.members)
-                        font.pixelSize: 15
+                        font.pixelSize: Theme.dp(15)
                         color: d.fontColor
                     }
                 }
                 // Active users:
                 Row {
                     height: activeUsersTxt.height
-                    spacing: 4
+                    spacing: Theme.dp(4)
                     StatusIcon {
                         anchors.verticalCenter: parent.verticalCenter
                         icon: "tiny/flash"
-                        width: 14
-                        height: 14
+                        width: Theme.dp(14)
+                        height: Theme.dp(14)
                     }
                     StatusBaseText {
                         id: activeUsersTxt
                         Layout.alignment: Qt.AlignVCenter
                         text: d.numberFormat(root.activeUsers)
-                        font.pixelSize: 15
+                        font.pixelSize: Theme.dp(15)
                         color: d.fontColor
                     }
                 }
@@ -349,7 +349,7 @@ Rectangle {
                 visible: root.categories.count > 0
                 Layout.alignment: Qt.AlignVCenter
                 Layout.fillWidth: true
-                spacing: 8
+                spacing: Theme.dp(8)
                 clip: true
 
                 Repeater {
@@ -357,16 +357,16 @@ Rectangle {
                     delegate: StatusListItemTag {
                         border.color: Theme.palette.baseColor2
                         color: "transparent"
-                        height: 24
-                        radius: 20
+                        height: Theme.dp(24)
+                        radius: Theme.dp(20)
                         closeButtonVisible: false
                         icon.emoji: model.emoji
-                        icon.height: 24
+                        icon.height: Theme.dp(24)
                         icon.width: icon.height
                         icon.color: "transparent"
                         icon.isLetterIdenticon: true
                         title: model.name
-                        titleText.font.pixelSize: 13
+                        titleText.font.pixelSize: Theme.dp(13)
                         titleText.color: d.fontColor
                     }
                 }
@@ -378,7 +378,7 @@ Rectangle {
     Rectangle {
         visible: !root.loaded
         anchors.top: parent.top
-        anchors.topMargin: 40
+        anchors.topMargin: Theme.dp(40)
         width: d.cardWidth
         height: d.cardHeigth
         color: d.cardColor
@@ -386,48 +386,48 @@ Rectangle {
         clip: true
         Rectangle {
             anchors.top: parent.top
-            anchors.topMargin: 8
+            anchors.topMargin: Theme.dp(8)
             anchors.right: parent.right
             anchors.rightMargin: anchors.topMargin
-            width: 48
-            height: 24
+            width: Theme.dp(48)
+            height: Theme.dp(24)
             color: d.loadingColor2
-            radius: 200
+            radius: Theme.dp(200)
         }
         ColumnLayout {
             anchors.fill: parent
-            anchors.topMargin: 32
+            anchors.topMargin: Theme.dp(32)
             anchors.margins: d.margins
             clip: true
-            spacing: 9
+            spacing: Theme.dp(9)
             Rectangle {
-                width: 84
-                height: 16
+                width: Theme.dp(84)
+                height: Theme.dp(16)
                 color: d.loadingColor1
-                radius: 5
+                radius: Theme.dp(5)
             }
             Rectangle {
-                width: 311
-                height: 16
+                width: Theme.dp(311)
+                height: Theme.dp(16)
                 color: d.loadingColor1
-                radius: 5
+                radius: Theme.dp(5)
             }
             Rectangle {
-                width: 271
-                height: 16
+                width: Theme.dp(271)
+                height: Theme.dp(16)
                 color: d.loadingColor1
-                radius: 5
+                radius: Theme.dp(5)
             }
             Row {
-                Layout.topMargin: 22 - 9
-                spacing: 16
+                Layout.topMargin: Theme.dp(13)
+                spacing: Theme.dp(16)
                 Repeater {
                     model: 2
                     delegate: Row {
-                        spacing: 4
+                        spacing: Theme.dp(4)
                         Rectangle {
-                            width: 14
-                            height: 14
+                            width: Theme.dp(14)
+                            height: Theme.dp(14)
                             color: d.loadingColor1
                             radius: width / 2
                         }
@@ -441,16 +441,16 @@ Rectangle {
                 }
             }
             Row {
-                Layout.topMargin: 21 - 9
-                spacing: 8
+                Layout.topMargin: Theme.dp(12)
+                spacing: Theme.dp(8)
                 Repeater {
                     model: 3
                     delegate:
                     Rectangle {
-                        width: 76
-                        height: 24
+                        width: Theme.dp(76)
+                        height: Theme.dp(24)
                         color: d.loadingColor2
-                        radius: 20
+                        radius: Theme.dp(20)
                     }
                 }
             }
diff --git a/src/StatusQ/Components/StatusCommunityTags.qml b/src/StatusQ/Components/StatusCommunityTags.qml
index ecde5406..a819f1fb 100644
--- a/src/StatusQ/Components/StatusCommunityTags.qml
+++ b/src/StatusQ/Components/StatusCommunityTags.qml
@@ -2,6 +2,7 @@ import QtQuick 2.14
 
 import StatusQ.Core 0.1
 import StatusQ.Controls 0.1
+import StatusQ.Core.Theme 0.1
 
 Item {
     id: root
@@ -28,7 +29,7 @@ Item {
             }
             return Math.min(parent.width, itemsWidth);
         }
-        spacing: 10
+        spacing: Theme.dp(10)
 
         Repeater {
             id: repeater
@@ -38,11 +39,11 @@ Item {
                 name: model.name
                 visible: (root.showOnlySelected ? model.selected : !model.selected) &&
                          (filterString == 0 || name.toUpperCase().indexOf(filterString.toUpperCase()) !== -1)
-                width: visible ? implicitWidth : -10
+                width: visible ? implicitWidth : -Theme.dp(10)
                 height: visible ? implicitHeight : 0
                 removable: root.showOnlySelected && root.active
                 onClicked: root.clicked(model)
             }
         }
     }
-}
\ No newline at end of file
+}
diff --git a/src/StatusQ/Components/StatusContactRequestsIndicatorListItem.qml b/src/StatusQ/Components/StatusContactRequestsIndicatorListItem.qml
index fea1c02e..4edb5c88 100644
--- a/src/StatusQ/Components/StatusContactRequestsIndicatorListItem.qml
+++ b/src/StatusQ/Components/StatusContactRequestsIndicatorListItem.qml
@@ -5,8 +5,8 @@ import StatusQ.Components 0.1
 StatusListItem {
     id: statusContactRequestsListItem
 
-    implicitHeight: 64
-    implicitWidth: 288
+    implicitHeight: Theme.dp(64)
+    implicitWidth: Theme.dp(288)
 
     color: sensor.containsMouse ? Theme.palette.baseColor2 : "transparent"
 
@@ -17,7 +17,7 @@ StatusListItem {
             visible:  statusContactRequestsListItem.requestsCount > 0
             value: statusContactRequestsListItem.requestsCount
             anchors.verticalCenter: parent.verticalCenter
-            border.width: 4
+            border.width: Theme.dp(4)
             border.color: color
         },
         StatusIcon {
diff --git a/src/StatusQ/Components/StatusContactVerificationIcons.qml b/src/StatusQ/Components/StatusContactVerificationIcons.qml
index 25418531..3aa0eec6 100644
--- a/src/StatusQ/Components/StatusContactVerificationIcons.qml
+++ b/src/StatusQ/Components/StatusContactVerificationIcons.qml
@@ -15,8 +15,8 @@ Row {
         width: dummyImage.width
         height: dummyImage.height
         background: StatusIconBackgroundSettings {
-            width: 10
-            height: 10
+            width: Theme.dp(10)
+            height: Theme.dp(10)
             color: Theme.palette.primaryColor1
         }
         // Only used to get implicit width and height from the actual image
@@ -33,8 +33,8 @@ Row {
         width: dummyImage.width
         height: dummyImage.height
         background: StatusIconBackgroundSettings {
-            width: 10
-            height: 10
+            width: Theme.dp(10)
+            height: Theme.dp(10)
             color: root.trustIndicator === StatusContactVerificationIcons.TrustedType.Verified ? Theme.palette.primaryColor1 : Theme.palette.dangerColor1
         }
         // Only used to get implicit width and height from the actual image
@@ -50,7 +50,7 @@ Row {
         Untrustworthy //2
     }
 
-    spacing: 4
+    spacing: Theme.dp(4)
     visible: root.isMutualContact || (root.trustIndicator !== StatusContactVerificationIcons.TrustedType.None)
 
     StatusRoundIcon {
diff --git a/src/StatusQ/Components/StatusDescriptionListItem.qml b/src/StatusQ/Components/StatusDescriptionListItem.qml
index a970b6e6..dca3513a 100644
--- a/src/StatusQ/Components/StatusDescriptionListItem.qml
+++ b/src/StatusQ/Components/StatusDescriptionListItem.qml
@@ -11,16 +11,16 @@ Rectangle {
     property alias subTitleComponent: statusDescriptionListItemSubTitle
     property string value: ""
     property StatusIconSettings icon: StatusIconSettings {
-        width: 23
-        height: 23
+        width: Theme.dp(23)
+        height: Theme.dp(23)
     }
     property alias tooltip: statusToolTip
     property alias iconButton: statusFlatRoundButton
     property alias sensor: sensor
 
-    implicitWidth: 448
-    implicitHeight: 56
-    radius: 8
+    implicitWidth: Theme.dp(448)
+    implicitHeight: Theme.dp(56)
+    radius: Theme.dp(8)
 
     color: Theme.palette.statusListItem.backgroundColor
 
@@ -35,12 +35,12 @@ Rectangle {
             id: statusDescriptionListItemTitle
             anchors.top: parent.top
             anchors.left: parent.left
-            anchors.leftMargin: 16
-            anchors.topMargin: 5
+            anchors.leftMargin: Theme.dp(16)
+            anchors.topMargin: Theme.dp(5)
 
             color: Theme.palette.baseColor1
             text: statusDescriptionListItem.title
-            font.pixelSize: 13
+            font.pixelSize: Theme.dp(13)
             font.weight: Font.Medium
         }
 
@@ -48,12 +48,12 @@ Rectangle {
             id: statusDescriptionListItemSubTitle
             anchors.top: statusDescriptionListItemTitle.bottom
             anchors.left: parent.left
-            anchors.leftMargin: 16
-            anchors.topMargin: 4
+            anchors.leftMargin: Theme.dp(16)
+            anchors.topMargin: Theme.dp(4)
 
             text: statusDescriptionListItem.subTitle
             color: Theme.palette.directColor1
-            font.pixelSize: 15
+            font.pixelSize: Theme.dp(15)
             font.weight: Font.Normal
         }
 
@@ -62,10 +62,10 @@ Rectangle {
             visible: !!statusDescriptionListItem.icon.name
             anchors.verticalCenter: statusDescriptionListItemSubTitle.verticalCenter
             anchors.left: statusDescriptionListItemSubTitle.right
-            anchors.leftMargin: 4
+            anchors.leftMargin: Theme.dp(4)
 
-            width: 32
-            height: 32
+            width: Theme.dp(32)
+            height: Theme.dp(32)
 
             icon.name: statusDescriptionListItem.icon.name
             icon.width: statusDescriptionListItem.icon.width
@@ -78,15 +78,15 @@ Rectangle {
 
         Row {
             anchors.right: parent.right
-            anchors.rightMargin: 16
+            anchors.rightMargin: Theme.dp(16)
             anchors.verticalCenter: parent.verticalCenter
             visible: !!statusDescriptionListItem.value
-            spacing: 8
+            spacing: Theme.dp(8)
 
             StatusBaseText {
                 text: statusDescriptionListItem.value
                 color: Theme.palette.baseColor1
-                font.pixelSize: 15
+                font.pixelSize: Theme.dp(15)
                 anchors.verticalCenter: parent.verticalCenter
             }
 
diff --git a/src/StatusQ/Components/StatusEmoji.qml b/src/StatusQ/Components/StatusEmoji.qml
index 53454d0b..bd636625 100644
--- a/src/StatusQ/Components/StatusEmoji.qml
+++ b/src/StatusQ/Components/StatusEmoji.qml
@@ -1,14 +1,16 @@
 import QtQuick 2.13
 import StatusQ.Core 0.1
 
+import StatusQ.Core.Theme 0.1
 
 Image {
     id: root
 
     property string emojiId: ""
 
-    width: 14
-    height: 14
+    width: Theme.dp(14)
+    height: Theme.dp(14)
+
     sourceSize.width: width
     sourceSize.height: height
 
@@ -16,4 +18,4 @@ Image {
     mipmap: true
     antialiasing: true
     source: emojiId ? `../../assets/twemoji/svg/${emojiId}.svg` : ""
-}
\ No newline at end of file
+}
diff --git a/src/StatusQ/Components/StatusExpandableItem.qml b/src/StatusQ/Components/StatusExpandableItem.qml
index 53847760..26098339 100644
--- a/src/StatusQ/Components/StatusExpandableItem.qml
+++ b/src/StatusQ/Components/StatusExpandableItem.qml
@@ -19,18 +19,18 @@ Rectangle {
     property bool expanded: false
 
     property StatusIconSettings icon: StatusIconSettings {
-        width: !!statusExpandableItem.icon.name.toString() ? 24 : 40
-        height: !!statusExpandableItem.icon.name.toString() ? 24 : 40
+        width: Theme.dp(!!statusExpandableItem.icon.name.toString() ? 24 : 40)
+        height: Theme.dp(!!statusExpandableItem.icon.name.toString() ? 24 : 40)
         color: Theme.palette.directColor1
         background: StatusIconBackgroundSettings {
-            width: 32
-            height: 32
+            width: Theme.dp(32)
+            height: Theme.dp(32)
             color: Theme.palette.primaryColor2
         }
     }
     property StatusImageSettings image: StatusImageSettings {
-        width: 40
-        height: 40
+        width: Theme.dp(40)
+        height: Theme.dp(40)
     }
 
     enum Type {
@@ -39,7 +39,7 @@ Rectangle {
         Tertiary // 2
     }
 
-    implicitWidth: 718
+    implicitWidth: Theme.dp(718)
 
     radius: (statusExpandableItem.type === StatusExpandableItem.Type.Primary) ? 8 : 0
     color: "transparent"
@@ -52,7 +52,7 @@ Rectangle {
         anchors.top: parent.top
         anchors.horizontalCenter: parent.horizontalCenter
         width: parent.width
-        height: 1
+        height: Theme.dp(1)
 
         color: Theme.palette.baseColor2
         visible: (statusExpandableItem.type === StatusExpandableItem.Type.Tertiary)
@@ -63,16 +63,16 @@ Rectangle {
         id: header
         anchors.top: parent.top
         width: parent.width
-        height: 64
-        radius: (statusExpandableItem.type === StatusExpandableItem.Type.Secondary) ? 8 : 0
+        height: Theme.dp(64)
+        radius: (statusExpandableItem.type === StatusExpandableItem.Type.Secondary) ? Theme.dp(8) : 0
         color: statusExpandableItem.type === StatusExpandableItem.Type.Secondary && sensor.containsMouse ? Theme.palette.baseColor2 : "transparent"
 
         StatusSmartIdenticon {
             id: identicon
             anchors.top: parent.top
-            anchors.topMargin: (statusExpandableItem.type === StatusExpandableItem.Type.Secondary) ? 12.5 : 25
+            anchors.topMargin: Theme.dp((statusExpandableItem.type === StatusExpandableItem.Type.Secondary) ? 12.5 : 25)
             anchors.left: parent.left
-            anchors.leftMargin: (statusExpandableItem.type === StatusExpandableItem.Type.Secondary) ? 16 : 11
+            anchors.leftMargin: Theme.dp((statusExpandableItem.type === StatusExpandableItem.Type.Secondary) ? 16 : 11)
             image: statusExpandableItem.image
             icon: statusExpandableItem.icon
             name: primaryText.text
@@ -83,20 +83,20 @@ Rectangle {
             id: primaryText
             anchors.top: (statusExpandableItem.type === StatusExpandableItem.Type.Primary)  ||
                         (statusExpandableItem.type === StatusExpandableItem.Type.Tertiary) ? parent.top : undefined
-            anchors.topMargin: (statusExpandableItem.type === StatusExpandableItem.Type.Tertiary) ? 29 : 17
+            anchors.topMargin: Theme.dp((statusExpandableItem.type === StatusExpandableItem.Type.Tertiary) ? 29 : 17)
             anchors.left: identicon.active ? identicon.right : parent.left
-            anchors.leftMargin: (statusExpandableItem.type === StatusExpandableItem.Type.Primary) ?  10 : 16
+            anchors.leftMargin: Theme.dp((statusExpandableItem.type === StatusExpandableItem.Type.Primary) ?  10 : 16)
 
             anchors.verticalCenter: (statusExpandableItem.type === StatusExpandableItem.Type.Secondary) ? identicon.verticalCenter : undefined
 
-            width: !!additionalText.text ? (button.visible ? parent.width - icon.background.width - button.width - additionalText.contentWidth - 110 :
-                                                          parent.width - icon.background.width - additionalText.contentWidth - 110) :
-                                        (button.visible ? parent.width - icon.background.width - button.width - 70 :
-                                                          parent.width - icon.background.width - 70)
+            width: !!additionalText.text ? (button.visible ? parent.width - icon.background.width - button.width - additionalText.contentWidth - Theme.dp(110) :
+                                                          parent.width - icon.background.width - additionalText.contentWidth - Theme.dp(110)) :
+                                        (button.visible ? parent.width - icon.background.width - button.width - Theme.dp(70) :
+                                                          parent.width - icon.background.width - Theme.dp(70))
 
             font.weight: (statusExpandableItem.type === StatusExpandableItem.Type.Primary) ? Font.Medium : Font.Normal
-            font.pixelSize: (statusExpandableItem.type === StatusExpandableItem.Type.Primary) ? 15 : 17
-            lineHeight: (statusExpandableItem.type === StatusExpandableItem.Type.Primary) ? 22 : 24
+            font.pixelSize: Theme.dp((statusExpandableItem.type === StatusExpandableItem.Type.Primary) ? 15 : 17)
+            lineHeight: Theme.dp((statusExpandableItem.type === StatusExpandableItem.Type.Primary) ? 22 : 24)
             lineHeightMode: Text.FixedHeight
             elide: Text.ElideRight
             color: (statusExpandableItem.type === StatusExpandableItem.Type.Tertiary) ? Theme.palette.baseColor1 : Theme.palette.directColor1
@@ -105,12 +105,12 @@ Rectangle {
         StatusBaseText {
             id: secondaryText
             anchors.top: primaryText.bottom
-            anchors.topMargin: 4
+            anchors.topMargin: Theme.dp(4)
             anchors.left: primaryText.left
             anchors.right: primaryText.right
 
-            font.pixelSize: 15
-            lineHeight: 22
+            font.pixelSize: Theme.dp(15)
+            lineHeight: Theme.dp(22)
             lineHeightMode: Text.FixedHeight
             elide: Text.ElideRight
             color: Theme.palette.directColor3
@@ -119,12 +119,12 @@ Rectangle {
         StatusBaseText {
             id: additionalText
             anchors.verticalCenter: primaryText.verticalCenter
-            anchors.verticalCenterOffset: 2
+            anchors.verticalCenterOffset: Theme.dp(2)
             anchors.right: expandImage.left
-            anchors.rightMargin: 16
+            anchors.rightMargin: Theme.dp(16)
 
-            font.pixelSize: 15
-            lineHeight: 24
+            font.pixelSize: Theme.dp(15)
+            lineHeight: Theme.dp(24)
             lineHeightMode: Text.FixedHeight
             elide: Text.ElideRight
             color: Theme.palette.baseColor1
@@ -133,9 +133,9 @@ Rectangle {
         StatusButton {
             id: button
             anchors.top: parent.top
-            anchors.topMargin: 19
+            anchors.topMargin: Theme.dp(19)
             anchors.right: parent.right
-            anchors.rightMargin: 16
+            anchors.rightMargin: Theme.dp(16)
             visible: !!text
         }
 
@@ -148,13 +148,13 @@ Rectangle {
             anchors.rightMargin: {
                 switch (statusExpandableItem.type) {
                     case StatusExpandableItem.Type.Primary:
-                      return 23
+                      return Theme.dp(23)
                       break;
                     case StatusExpandableItem.Type.Secondary:
-                      return 16
+                      return Theme.dp(16)
                       break;
                     default:
-                      return 6
+                      return Theme.dp(6)
 
                 }
             }
@@ -181,11 +181,11 @@ Rectangle {
     Loader {
         id: expandableRegion
         anchors.top: header.bottom
-        anchors.topMargin: 16
+        anchors.topMargin: Theme.dp(16)
         anchors.left: parent.left
-        anchors.leftMargin: (statusExpandableItem.type === StatusExpandableItem.Type.Primary) ? 48 : 0
+        anchors.leftMargin: (statusExpandableItem.type === StatusExpandableItem.Type.Primary) ? Theme.dp(48) : 0
         anchors.right: parent.right
-        anchors.rightMargin: (statusExpandableItem.type === StatusExpandableItem.Type.Primary) ? 16 : 0
+        anchors.rightMargin: (statusExpandableItem.type === StatusExpandableItem.Type.Primary) ? Theme.dp(16) : 0
         visible: false
     }
 
@@ -202,13 +202,13 @@ Rectangle {
         State {
             name: "EXPANDED"
             PropertyChanges {target: expandImage; icon: "chevron-up"}
-            PropertyChanges {target: statusExpandableItem; height: 82 + expandableRegion.height + 22}
+            PropertyChanges {target: statusExpandableItem; height: 82 + expandableRegion.height + Theme.dp(22)}
             PropertyChanges {target: expandableRegion; visible: true}
         },
         State {
             name: "COLLAPSED"
             PropertyChanges {target: expandImage; icon: "chevron-down"}
-            PropertyChanges {target: statusExpandableItem; height: 82}
+            PropertyChanges {target: statusExpandableItem; height: Theme.dp(82)}
             PropertyChanges {target: expandableRegion; visible: false}
         }
     ]
diff --git a/src/StatusQ/Components/StatusImageCropPanel.qml b/src/StatusQ/Components/StatusImageCropPanel.qml
index ab8734e1..f324b685 100644
--- a/src/StatusQ/Components/StatusImageCropPanel.qml
+++ b/src/StatusQ/Components/StatusImageCropPanel.qml
@@ -2,6 +2,7 @@ import QtQuick 2.14
 import QtQuick.Layouts 1.14
 
 import StatusQ.Core 0.1
+import StatusQ.Core.Theme 0.1
 import StatusQ.Controls 0.1
 
 /*!
@@ -50,7 +51,7 @@ Item {
         \qmlproperty bool StatusImageCrop::margins
         Space to keep around the control borders and crop area
     */
-    property int margins: 10
+    property int margins: Theme.dp(10)
 
     /*!
         \qmlproperty url StatusImageCropPanel::source
@@ -215,7 +216,7 @@ Item {
                 onMouseYChanged: updateDrag(Qt.point(mouse.x, mouse.y))
 
                 onWheel: {
-                    const delta = wheel.angleDelta.y / 120
+                    const delta = wheel.angleDelta.y / Theme.dp(120)
                     cropEditor.setCropRect(cropEditor.getZoomRect(cropEditor.zoomScale + delta * root.scrollZoomFactor))
                 }
 
@@ -242,13 +243,13 @@ Item {
             StatusIcon {
                 icon: "remove-circle"
 
-                Layout.preferredWidth: 20
-                Layout.preferredHeight: 20
+                Layout.preferredWidth: Theme.dp(20)
+                Layout.preferredHeight: Theme.dp(20)
             }
             StatusSlider {
                 Layout.fillWidth: true
-                Layout.topMargin: 20
-                Layout.bottomMargin: 25
+                Layout.topMargin: Theme.dp(20)
+                Layout.bottomMargin: Theme.dp(25)
                 Layout.alignment: Qt.AlignVCenter
 
                 enabled: root.interactive
@@ -262,8 +263,8 @@ Item {
             StatusIcon {
                 icon: "add-circle"
 
-                Layout.preferredWidth: 20
-                Layout.preferredHeight: 20
+                Layout.preferredWidth: Theme.dp(20)
+                Layout.preferredHeight: Theme.dp(20)
             }
         }
     }
diff --git a/src/StatusQ/Components/StatusLetterIdenticon.qml b/src/StatusQ/Components/StatusLetterIdenticon.qml
index 30947eb2..61c6dcc9 100644
--- a/src/StatusQ/Components/StatusLetterIdenticon.qml
+++ b/src/StatusQ/Components/StatusLetterIdenticon.qml
@@ -10,12 +10,12 @@ Rectangle {
     property string name
     property string emoji
     property string emojiSize: Emoji.size.small
-    property int letterSize: 21
+    property int letterSize: Theme.dp(21)
     property int charactersLen: 1
 
     color: Theme.palette.miscColor5
-    width: 40
-    height: 40
+    width: Theme.dp(40)
+    height: Theme.dp(40)
     radius: width / 2
 
     StatusEmoji {
diff --git a/src/StatusQ/Components/StatusListItem.qml b/src/StatusQ/Components/StatusListItem.qml
index 99e2ddd0..1c4d4914 100644
--- a/src/StatusQ/Components/StatusListItem.qml
+++ b/src/StatusQ/Components/StatusListItem.qml
@@ -20,8 +20,8 @@ Rectangle {
     property string subTitle: ""
     property string tertiaryTitle: ""
     property string label: ""
-    property real leftPadding: 16
-    property real rightPadding: 16
+    property real leftPadding: Theme.dp(16)
+    property real rightPadding: Theme.dp(16)
     property bool enabled: true
     property bool highlighted: false
     property bool propagateTitleClicks: true
@@ -35,17 +35,17 @@ Rectangle {
     property bool loadingFailed: false
 
     property StatusIconSettings icon: StatusIconSettings {
-        height: isLetterIdenticon ? 40 : 20
-        width: isLetterIdenticon ? 40 : 20
+        height: Theme.dp(isLetterIdenticon ? 40 : 20)
+        width: Theme.dp(isLetterIdenticon ? 40 : 20)
         rotation: 0
         isLetterIdenticon: false
-        letterSize: 21
+        letterSize: Theme.dp(21)
         charactersLen: 1
         color: isLetterIdenticon ? background.color : type === StatusListItem.Type.Danger ?
             Theme.palette.dangerColor1 : Theme.palette.primaryColor1
         background: StatusIconBackgroundSettings {
-            width: 40
-            height: 40
+            width: Theme.dp(40)
+            height: Theme.dp(40)
             color: {
                 if (sensor.containsMouse) {
                     return type === StatusListItem.Type.Secondary ||
@@ -58,8 +58,8 @@ Rectangle {
         }
     }
     property StatusImageSettings image: StatusImageSettings {
-        width: 40
-        height: 40
+        width: Theme.dp(40)
+        height: Theme.dp(40)
         isIdenticon: false
     }
     property StatusIdenticonRingSettings ringSettings: StatusIdenticonRingSettings {
@@ -90,12 +90,12 @@ Rectangle {
         Danger
     }
 
-    implicitWidth: 448
+    implicitWidth: Theme.dp(448)
     implicitHeight: {
         if (bottomModel.length === 0) {
-            return Math.max(64, statusListItemTitleArea.height + 16)
+            return Math.max(64, statusListItemTitleArea.height + Theme.dp(16))
         }
-        return Math.max(64, statusListItemTitleArea.height + 90)
+        return Math.max(Theme.dp(64), statusListItemTitleArea.height + Theme.dp(90))
     }
     color: {
         if (sensor.containsMouse || statusListItem.highlighted) {
@@ -179,7 +179,7 @@ Rectangle {
 
             anchors.left: iconOrImage.active ? iconOrImage.right : parent.left
             anchors.right: statusListItemLabel.visible ? statusListItemLabel.left : statusListItemComponentsSlot.left
-            anchors.leftMargin: iconOrImage.active ? 16 : statusListItem.leftPadding
+            anchors.leftMargin: iconOrImage.active ? Theme.dp(16) : statusListItem.leftPadding
             anchors.rightMargin: statusListItem.rightPadding
             anchors.verticalCenter:  bottomModel.length === 0 ? parent.verticalCenter : undefined
 
@@ -209,7 +209,7 @@ Rectangle {
                 id: statusListItemTitle
                 opacity: titleLoadingOverlay.visible ? 0 : 1
                 text: statusListItem.title
-                font.pixelSize: 15
+                font.pixelSize: Theme.dp(15)
                 height: visible ? contentHeight : 0
                 elide: Text.ElideRight
                 anchors.left: parent.left
@@ -254,12 +254,12 @@ Rectangle {
             StatusBaseText {
                 id: statusListItemTitleAsideText
                 anchors.left: statusListItemTitle.right
-                anchors.leftMargin: 4
+                anchors.leftMargin: Theme.dp(4)
                 anchors.verticalCenter: statusListItemTitle.verticalCenter
                 anchors.top: bottomModel.length === 0 ? undefined:  parent.top
                 anchors.topMargin: bottomModel.length === 0 ? undefined : 20
                 text: statusListItem.titleAsideText
-                font.pixelSize: 10
+                font.pixelSize: Theme.dp(10)
                 color: Theme.palette.baseColor1
                 visible: !!statusListItem.titleAsideText
             }
@@ -268,7 +268,7 @@ Rectangle {
                 id: titleIconsRow
                 anchors.left: !statusListItem.titleAsideText ? statusListItemTitle.right : statusListItemTitleAsideText.right
                 anchors.verticalCenter: statusListItemTitle.verticalCenter
-                anchors.leftMargin: 4
+                anchors.leftMargin: Theme.dp(4)
             }
 
             StatusBaseText {
@@ -293,7 +293,7 @@ Rectangle {
                 height: visible ? contentHeight : 0
                 text: statusListItem.tertiaryTitle
                 color: Theme.palette.baseColor1
-                font.pixelSize: 13
+                font.pixelSize: Theme.dp(13)
                 visible: !!statusListItem.tertiaryTitle
                 wrapMode: Text.WrapAtWordBoundaryOrAnywhere
             }
@@ -302,14 +302,14 @@ Rectangle {
                 id: statusListItemBadge
                 anchors.top: statusListItemTertiaryTitle.bottom
                 width: contentItem.width
-                implicitHeight: visible ? 22 : 0
+                implicitHeight: visible ? Theme.dp(22) : 0
             }
 
             Row {
                 id: statusListItemTagsSlotInline
                 anchors.top: statusListItemTertiaryTitle.bottom
                 width: parent.width
-                spacing: 10
+                spacing: Theme.dp(10)
                 clip: true
 
                 Repeater {
@@ -321,12 +321,12 @@ Rectangle {
 
         Row {
             id: statusListItemTagsSlot
-            anchors.topMargin: 16
+            anchors.topMargin: Theme.dp(16)
             anchors.top: iconOrImage.bottom
             anchors.left: parent.left
-            anchors.leftMargin: 16
+            anchors.leftMargin: Theme.dp(16)
             width: statusListItemBadge.width
-            spacing: 10
+            spacing: Theme.dp(10)
             anchors.verticalCenter: parent.verticalCenter
 
             Repeater {
@@ -339,12 +339,12 @@ Rectangle {
             id: statusListItemLabel
             anchors.verticalCenter: bottomModel.length === 0 ? parent.verticalCenter : undefined
             anchors.top: bottomModel.length === 0 ? undefined:  parent.top
-            anchors.topMargin: bottomModel.length === 0 ? undefined : 16
+            anchors.topMargin: bottomModel.length === 0 ? undefined : Theme.dp(16)
             anchors.right: statusListItemComponentsSlot.left
-            anchors.rightMargin: statusListItemComponentsSlot.width > 0 ? 10 : 0
+            anchors.rightMargin: statusListItemComponentsSlot.width > 0 ? Theme.dp(10) : 0
 
             text: statusListItem.label
-            font.pixelSize: 15
+            font.pixelSize: Theme.dp(15)
             color: Theme.palette.baseColor1
             visible: !!statusListItem.label
         }
@@ -355,8 +355,8 @@ Rectangle {
             anchors.rightMargin: statusListItem.rightPadding
             anchors.verticalCenter: bottomModel.length === 0 ? parent.verticalCenter : undefined
             anchors.top: bottomModel.length === 0 ? undefined:  parent.top
-            anchors.topMargin: bottomModel.length === 0 ? undefined : 12
-            spacing: 10
+            anchors.topMargin: bottomModel.length === 0 ? undefined : Theme.dp(12)
+            spacing: Theme.dp(10)
         }
     }
 }
diff --git a/src/StatusQ/Components/StatusListItemBadge.qml b/src/StatusQ/Components/StatusListItemBadge.qml
index ba6a7f13..04960f51 100644
--- a/src/StatusQ/Components/StatusListItemBadge.qml
+++ b/src/StatusQ/Components/StatusListItemBadge.qml
@@ -14,13 +14,13 @@ Control {
     property string secondaryText: ""
 
     property StatusImageSettings image: StatusImageSettings {
-        height: 16
-        width: 16
+        height: Theme.dp(16)
+        width: Theme.dp(16)
         isIdenticon: false
     }
     property StatusIconSettings icon: StatusIconSettings {
-        height: 16
-        width: 16
+        height: Theme.dp(16)
+        width: Theme.dp(16)
         isLetterIdenticon: false
         background: StatusIconBackgroundSettings {}
         color: "transparent"
@@ -29,31 +29,31 @@ Control {
     background: Rectangle {
         anchors.fill: parent
         color: "transparent"
-        radius: 11
+        radius: Theme.dp(11)
         border.color: Theme.palette.directColor7
     }
 
     contentItem: Item {
         id: contentItem
-        width: (contentItemRow.width + 10)
+        width: (contentItemRow.width + Theme.dp(10))
         height: parent.height
         RowLayout {
             id: contentItemRow
             anchors.centerIn: parent
             anchors.horizontalCenterOffset: -spacing
-            spacing: 2
+            spacing: Theme.dp(2)
             StatusRoundedImage {
                 implicitWidth: root.image.width
                 implicitHeight: root.image.height
                 visible: !root.icon.isLetterIdenticon
                 image.source: root.image.source
                 border.color: Theme.palette.baseColor1
-                border.width: root.image.isIdenticon ? 1 : 0
+                border.width: root.image.isIdenticon ? Theme.dp(1) : 0
             }
             StatusLetterIdenticon {
                 implicitWidth: root.icon.width
                 implicitHeight: root.icon.width
-                letterSize: 11
+                letterSize: Theme.dp(11)
                 visible: root.icon.isLetterIdenticon
                 color: root.icon.color
                 name: root.primaryText
diff --git a/src/StatusQ/Components/StatusListItemTag.qml b/src/StatusQ/Components/StatusListItemTag.qml
index f6cfbbff..eb89cd9c 100644
--- a/src/StatusQ/Components/StatusListItemTag.qml
+++ b/src/StatusQ/Components/StatusListItemTag.qml
@@ -7,9 +7,9 @@ import StatusQ.Core.Theme 0.1
 Rectangle {
     id: root
     width: layout.width + layout.anchors.margins
-    height: 30
+    height: Theme.dp(30)
     color: Theme.palette.primaryColor3
-    radius: 15
+    radius: Theme.dp(15)
 
     property alias titleText: titleText
 
@@ -18,21 +18,21 @@ Rectangle {
     signal clicked()
 
     property StatusImageSettings image: StatusImageSettings {
-        width: 20
-        height: 20
+        width: Theme.dp(20)
+        height: Theme.dp(20)
         isIdenticon: false
     }
 
     property StatusIconSettings icon: StatusIconSettings {
-        height: 20
-        width: 20
+        height: Theme.dp(20)
+        width: Theme.dp(20)
         rotation: 0
         isLetterIdenticon: false
-        letterSize: 10
+        letterSize: Theme.dp(10)
         color: Theme.palette.primaryColor1
         background: StatusIconBackgroundSettings {
-            width: 15
-            height: 15
+            width: Theme.dp(15)
+            height: Theme.dp(15)
             color: Theme.palette.primaryColor3
         }
     }
@@ -40,11 +40,11 @@ Rectangle {
     RowLayout {
         id: layout
         height: parent.height
-        anchors.margins: 6
+        anchors.margins: Theme.dp(6)
 
         StatusSmartIdenticon {
             id: iconOrImage
-            Layout.leftMargin: 4
+            Layout.leftMargin: Theme.dp(4)
             image: root.image
             icon: root.icon
             name: root.title
@@ -57,7 +57,7 @@ Rectangle {
             id: titleText
             color: Theme.palette.primaryColor1
             text: root.title
-            Layout.rightMargin: closeButtonVisible ? 0 : 5
+            Layout.rightMargin: closeButtonVisible ? 0 : Theme.dp(5)
         }
 
         StatusIcon {
diff --git a/src/StatusQ/Components/StatusListPicker.qml b/src/StatusQ/Components/StatusListPicker.qml
index 30d406c1..ab1e9869 100644
--- a/src/StatusQ/Components/StatusListPicker.qml
+++ b/src/StatusQ/Components/StatusListPicker.qml
@@ -227,8 +227,8 @@ Item {
         }
     }
 
-    width: 110
-    height: 38
+    width: Theme.dp(110)
+    height: Theme.dp(38)
 
     Component.onCompleted: d.initialize()
 
@@ -238,7 +238,7 @@ Item {
         bgColor: Theme.palette.primaryColor3
         contentColor: Theme.palette.primaryColor1
         text: picker.selectedItemsText
-        textPixelSize: 13
+        textPixelSize: Theme.dp(13)
         type: StatusPickerButton.Type.Down
 
         onClicked: {
@@ -261,7 +261,7 @@ Item {
         anchors.right: root.menuAlignment === StatusListPicker.MenuAlignment.Right ? btn.right : undefined
         anchors.horizontalCenter: root.menuAlignment === StatusListPicker.MenuAlignment.Center ? btn.horizontalCenter : undefined
         anchors.top: btn.bottom
-        anchors.topMargin: 4
+        anchors.topMargin: Theme.dp(4)
         visible: false
         color: Theme.palette.statusPopupMenu.backgroundColor
         radius: 8
@@ -269,8 +269,8 @@ Item {
         layer.effect: DropShadow {
             source: picker
             horizontalOffset: 0
-            verticalOffset: 4
-            radius: 12
+            verticalOffset: Theme.dp(4)
+            radius: Theme.dp(12)
             samples: 25
             spread: 0.2
             color: Theme.palette.dropShadow
@@ -279,29 +279,29 @@ Item {
         ListView {
             id: content            
 
-            property int itemHeight: 40
-            property int itemWidth: 360
+            property int itemHeight: Theme.dp(40)
+            property int itemWidth: Theme.dp(360)
 
             model: d.filteredModel
             width: itemWidth
             anchors.top: parent.top
-            anchors.topMargin: 8
+            anchors.topMargin: Theme.dp(8)
             anchors.bottom: parent.bottom
-            anchors.bottomMargin: 8
+            anchors.bottomMargin: Theme.dp(8)
             currentIndex: -1
             clip: true
             headerPositioning: ListView.OverlayHeader
             header: Rectangle {
                 id: header
                 width: content.itemWidth
-                height: searchInput.height + 24
+                height: searchInput.height + Theme.dp(24)
                 color: Theme.palette.statusPopupMenu.backgroundColor
                 z: 3 // Above delegate (z=1) and above section.delegate (z = 2)
 
                 StatusBaseInput {
                     id: searchInput
-                    implicitHeight: 36
-                    width: content.itemWidth - 2 * 18
+                    implicitHeight: Theme.dp(36)
+                    width: content.itemWidth - Theme.dp(2) * 18
                     anchors.horizontalCenter: parent.horizontalCenter
                     anchors.verticalCenter: parent.verticalCenter
                     topPadding: 0
@@ -371,12 +371,12 @@ Item {
                 height: content.itemHeight
 
                 StatusBaseText {
-                    anchors.leftMargin: 18
+                    anchors.leftMargin: Theme.dp(18)
                     anchors.left: parent.left
                     anchors.verticalCenter: parent.verticalCenter
                     text: section
                     color: Theme.palette.baseColor1
-                    font.pixelSize: 15
+                    font.pixelSize: Theme.dp(15)
                     elide: Text.ElideRight
                 }
             }// End of Category item
diff --git a/src/StatusQ/Components/StatusListSectionHeadline.qml b/src/StatusQ/Components/StatusListSectionHeadline.qml
index 6965c29e..7ede49de 100644
--- a/src/StatusQ/Components/StatusListSectionHeadline.qml
+++ b/src/StatusQ/Components/StatusListSectionHeadline.qml
@@ -4,18 +4,18 @@ import StatusQ.Core 0.1
 import StatusQ.Core.Theme 0.1
 
 Item {
-    implicitHeight: 34
-    implicitWidth: 176
+    implicitHeight: Theme.dp(34)
+    implicitWidth: Theme.dp(176)
 
     property alias text: label.text
 
     StatusBaseText {
         anchors.left: parent.left
         anchors.bottom: parent.bottom
-        anchors.bottomMargin: 4
-        anchors.leftMargin: 16
+        anchors.bottomMargin: Theme.dp(4)
+        anchors.leftMargin: Theme.dp(16)
         id: label
-        font.pixelSize: 15
+        font.pixelSize: Theme.dp(15)
         color: Theme.palette.baseColor1
     }
 }
diff --git a/src/StatusQ/Components/StatusLoadingIndicator.qml b/src/StatusQ/Components/StatusLoadingIndicator.qml
index a0e54fd4..e5fd6174 100644
--- a/src/StatusQ/Components/StatusLoadingIndicator.qml
+++ b/src/StatusQ/Components/StatusLoadingIndicator.qml
@@ -1,11 +1,12 @@
 import QtQuick 2.13
 import StatusQ.Core 0.1
+import StatusQ.Core.Theme 0.1
 
 StatusIcon {
     id: statusIcon
     icon: "loading"
-    height: 17
-    width: 17
+    height: Theme.dp(17)
+    width: Theme.dp(17)
     RotationAnimation {
         target: statusIcon;
         from: 0;
diff --git a/src/StatusQ/Components/StatusMemberListItem.qml b/src/StatusQ/Components/StatusMemberListItem.qml
index 9553816c..40b158d5 100644
--- a/src/StatusQ/Components/StatusMemberListItem.qml
+++ b/src/StatusQ/Components/StatusMemberListItem.qml
@@ -104,7 +104,7 @@ StatusListItem {
 
         // Short keychat composition:
         function composeShortKeyChat(pubKey) {
-            return pubKey.substring(0, 5) + "..." + pubKey.substring(pubKey.length - 3)
+            return pubKey.substring(0, 5) + "..." + pubKey.substring(pubKey.length - Theme.dp(3))
         }
     }
 
@@ -119,25 +119,25 @@ StatusListItem {
         } 
     }
     subTitle: d.composeSubtitile()
-    statusListItemSubTitle.font.pixelSize: 10
+    statusListItemSubTitle.font.pixelSize: Theme.dp(10)
     icon.isLetterIdenticon: !root.image.source.toString()
     statusListItemIcon.badge.visible: true
     statusListItemIcon.badge.color: root.status === 1 ? Theme.palette.successColor1 : Theme.palette.baseColor1 // FIXME
     color: sensor.containsMouse ? Theme.palette.baseColor2 : Theme.palette.baseColor4
 
     // Default sizes / positions by design
-    implicitWidth: 256
-    implicitHeight: Math.max(56, statusListItemTitleArea.height + leftPadding)
-    leftPadding: 8
-    image.width: 32
-    image.height: 32
-    icon.width: 32
-    icon.height: 32
+    implicitWidth: Theme.dp(256)
+    implicitHeight: Math.max(Theme.dp(56), statusListItemTitleArea.height + leftPadding)
+    leftPadding: Theme.dp(8)
+    image.width: Theme.dp(32)
+    image.height: Theme.dp(32)
+    icon.width: Theme.dp(32)
+    icon.height: Theme.dp(32)
     statusListItemIcon.anchors.verticalCenter: sensor.verticalCenter
     statusListItemIcon.anchors.top: undefined
-    statusListItemIcon.badge.border.width: 2
-    statusListItemIcon.badge.implicitHeight: 12 // 8 px + 2 px * 2 borders
-    statusListItemIcon.badge.implicitWidth: 12 // 8 px + 2 px * 2 borders
+    statusListItemIcon.badge.border.width: Theme.dp(2)
+    statusListItemIcon.badge.implicitHeight: Theme.dp(12) // 8 px + 2 px * 2 borders
+    statusListItemIcon.badge.implicitWidth: Theme.dp(12) // 8 px + 2 px * 2 borders
     components: [
         StatusIcon {
             anchors.verticalCenter: parent.verticalCenter
diff --git a/src/StatusQ/Components/StatusMessage.qml b/src/StatusQ/Components/StatusMessage.qml
index c9ba3769..e2cc26cc 100644
--- a/src/StatusQ/Components/StatusMessage.qml
+++ b/src/StatusQ/Components/StatusMessage.qml
@@ -68,13 +68,13 @@ Rectangle {
             audioMessageInfoText: statusMessage.audioMessageInfoText
         }
         RowLayout {
-            spacing: 8
+            spacing: Theme.dp(8)
             Layout.fillWidth: true
             StatusSmartIdenticon {
                 id: profileImage
                 Layout.alignment: Qt.AlignTop
-                Layout.topMargin: 10
-                Layout.leftMargin: 16
+                Layout.topMargin: Theme.dp(10)
+                Layout.leftMargin: Theme.dp(16)
                 image: messageDetails.profileImage
                 name: messageHeader.displayName
                 MouseArea {
@@ -87,7 +87,7 @@ Rectangle {
             Column {
                 spacing: 4
                 Layout.alignment: Qt.AlignTop
-                Layout.topMargin: 10
+                Layout.topMargin: Theme.dp(10)
                 Layout.fillWidth: true
                 StatusPinMessageDetails {
                     visible: messageDetails.isPinned && !editMode
@@ -192,9 +192,9 @@ Rectangle {
     StatusMessageQuickActions {
         id: quickActionsPanel
         anchors.right: parent.right
-        anchors.rightMargin: 20
+        anchors.rightMargin: Theme.dp(20)
         anchors.top: parent.top
-        anchors.topMargin: -8
+        anchors.topMargin: -Theme.dp(8)
         visible: hoverHandler.hovered && !editMode
     }
 }
diff --git a/src/StatusQ/Components/StatusMessageDetails.qml b/src/StatusQ/Components/StatusMessageDetails.qml
index 0dca0d2b..fdca64b0 100644
--- a/src/StatusQ/Components/StatusMessageDetails.qml
+++ b/src/StatusQ/Components/StatusMessageDetails.qml
@@ -1,6 +1,7 @@
 import QtQuick 2.13
 
 import StatusQ.Core 0.1
+import StatusQ.Core.Theme 0.1
 
 QtObject {
     id: msgDetails
@@ -10,8 +11,8 @@ QtObject {
     property string secondaryName: ""
     property string chatID: ""
     property StatusImageSettings profileImage: StatusImageSettings {
-        width: 40
-        height: 40
+        width: Theme.dp(40)
+        height: Theme.dp(40)
     }
     property bool isEdited: false
     property string messageText: ""
diff --git a/src/StatusQ/Components/StatusNavigationListItem.qml b/src/StatusQ/Components/StatusNavigationListItem.qml
index f05653d5..1ff5f314 100644
--- a/src/StatusQ/Components/StatusNavigationListItem.qml
+++ b/src/StatusQ/Components/StatusNavigationListItem.qml
@@ -9,14 +9,14 @@ StatusListItem {
     property bool selected: false
     property alias badge: statusBadge
 
-    implicitWidth: 286
-    implicitHeight: 48
+    implicitWidth: Theme.dp(286)
+    implicitHeight: Theme.dp(48)
 
-    icon.background.width: 20
-    icon.background.height: 20
+    icon.background.width: Theme.dp(20)
+    icon.background.height: Theme.dp(20)
     icon.background.color: "transparent"
 
-    statusListItemIcon.anchors.topMargin: 14
+    statusListItemIcon.anchors.topMargin: Theme.dp(14)
 
     color: {
         if (selected) {
diff --git a/src/StatusQ/Components/StatusNavigationPanelHeadline.qml b/src/StatusQ/Components/StatusNavigationPanelHeadline.qml
index f680dc6f..68178381 100644
--- a/src/StatusQ/Components/StatusNavigationPanelHeadline.qml
+++ b/src/StatusQ/Components/StatusNavigationPanelHeadline.qml
@@ -4,7 +4,7 @@ import StatusQ.Core.Theme 0.1
 import StatusQ.Core 0.1
 
 StatusBaseText {
-    font.pixelSize: 17
+    font.pixelSize: Theme.dp(17)
     font.weight: Font.Bold
     color: Theme.palette.directColor1
 }
diff --git a/src/StatusQ/Components/StatusRoundIcon.qml b/src/StatusQ/Components/StatusRoundIcon.qml
index e1fbb7e8..e248f825 100644
--- a/src/StatusQ/Components/StatusRoundIcon.qml
+++ b/src/StatusQ/Components/StatusRoundIcon.qml
@@ -6,13 +6,13 @@ Rectangle {
     id: statusRoundedIcon
 
     property StatusIconSettings icon: StatusIconSettings {
-        width: 24
-        height: 24
+        width: Theme.dp(24)
+        height: Theme.dp(24)
         rotation: 0
         color: Theme.palette.primaryColor1
         background: StatusIconBackgroundSettings {
-            width: 40
-            height: 40
+            width: Theme.dp(40)
+            height: Theme.dp(40)
             color: Theme.palette.primaryColor3
         }
     }
diff --git a/src/StatusQ/Components/StatusRoundedImage.qml b/src/StatusQ/Components/StatusRoundedImage.qml
index b83e7192..d4499acd 100644
--- a/src/StatusQ/Components/StatusRoundedImage.qml
+++ b/src/StatusQ/Components/StatusRoundedImage.qml
@@ -10,8 +10,8 @@ Rectangle {
 
     property alias image: image
 
-    implicitWidth: 40
-    implicitHeight: 40
+    implicitWidth: Theme.dp(40)
+    implicitHeight: Theme.dp(40)
     color: "transparent"
     radius: width / 2
     layer.enabled: true
diff --git a/src/StatusQ/Components/StatusSmartIdenticon.qml b/src/StatusQ/Components/StatusSmartIdenticon.qml
index 74d9a4cd..d563f215 100644
--- a/src/StatusQ/Components/StatusSmartIdenticon.qml
+++ b/src/StatusQ/Components/StatusSmartIdenticon.qml
@@ -13,18 +13,18 @@ Loader {
     property alias badge: statusBadge
 
     property StatusIconSettings icon: StatusIconSettings {
-        width: 40
-        height: 40
+        width: Theme.dp(40)
+        height: Theme.dp(40)
     }
 
     property StatusImageSettings image: StatusImageSettings {
-        width: 40
-        height: 40
+        width: Theme.dp(40)
+        height: Theme.dp(40)
     }
 
     property StatusIdenticonRingSettings ringSettings: StatusIdenticonRingSettings {
         initalAngleRad: 0
-        ringPxSize: Math.max(1.5, statusSmartIdenticon.image.width / 24.0)
+        ringPxSize: Math.max(1.5, statusSmartIdenticon.image.width / Theme.dp(24.0))
         distinctiveColors: Theme.palette.identiconRingColors
     }
 
@@ -103,9 +103,9 @@ Loader {
         visible: false
         anchors.bottom: statusSmartIdenticon.bottom
         anchors.right: statusSmartIdenticon.right
-        border.width: 3
-        implicitHeight: 15
-        implicitWidth: 15
+        border.width: Theme.dp(3)
+        implicitHeight: Theme.dp(15)
+        implicitWidth: Theme.dp(15)
         z: statusSmartIdenticon.dZ
     }
 }
diff --git a/src/StatusQ/Components/StatusTagSelector.qml b/src/StatusQ/Components/StatusTagSelector.qml
index 8180b9e7..6d9248e8 100644
--- a/src/StatusQ/Components/StatusTagSelector.qml
+++ b/src/StatusQ/Components/StatusTagSelector.qml
@@ -61,7 +61,7 @@ Item {
         \qmlproperty real StatusTagSelector::maxHeight
         This property holds the maximum height of the component.
     */
-    property real maxHeight: (488 + contactsLabel.height + contactsLabel.anchors.topMargin) //default min
+    property real maxHeight: (Theme.dp(488) + contactsLabel.height + contactsLabel.anchors.topMargin) //default min
     /*!
         \qmlproperty alias StatusTagSelector::textEdit
         This property holds a reference to the TextEdit component.
@@ -210,7 +210,7 @@ Item {
                                                                                 suggestionsContainer.anchors.topMargin + suggestionsContainer.anchors.bottomMargin +
                                                                                 2 * bgRect.anchors.margins +
                                                                                 userListView.anchors.topMargin + userListView.anchors.bottomMargin +
-                                                                                (userListView.model.count * 64): 0
+                                                                                (userListView.count * 64): 0
 
         function orderNamesModel() {
             if(root.orderByReadonly) {
@@ -224,7 +224,7 @@ Item {
         }
     }
 
-    implicitWidth: 448
+    implicitWidth: Theme.dp(448)
     implicitHeight: (tagSelectorRect.height + d.suggestionContainerHeight) > root.maxHeight ? root.maxHeight : (tagSelectorRect.height + d.suggestionContainerHeight)
 
     onOrderByReadonlyChanged: { d.orderNamesModel() }
@@ -236,26 +236,27 @@ Item {
     Rectangle {
         id: tagSelectorRect
         width: parent.width
-        height: 44
-        radius: 8
+        height: Theme.dp(44)
+        radius: Theme.dp(8)
         color: Theme.palette.baseColor2
         RowLayout {
             anchors.fill: parent
-            anchors.leftMargin: 16
-            anchors.rightMargin: 16
-            spacing: 8
+            anchors.leftMargin: Theme.dp(16)
+            anchors.rightMargin: Theme.dp(16)
+            spacing: Theme.dp(8)
             StatusBaseText {
-                Layout.preferredWidth: 22
+                Layout.preferredWidth: Theme.dp(22)
                 Layout.alignment: Qt.AlignVCenter
+                font.pixelSize: Theme.dp(15)
                 color: Theme.palette.baseColor1
                 text: root.toLabelText
-                visible: (parent.width>22)
+                visible: (parent.width>Theme.dp(22))
             }
 
             ScrollView {
-                Layout.preferredWidth: (parent.width - 177) > 0 ? ((namesList.contentWidth > (parent.width - 177)) ?
-                                       (parent.width - 177) : namesList.contentWidth) : 0
-                implicitHeight: 30
+                Layout.preferredWidth: (parent.width - Theme.dp(177)) > 0 ? ((namesList.contentWidth > (parent.width - Theme.dp(177))) ?
+                                       (parent.width - Theme.dp(177)) : namesList.contentWidth) : 0
+                implicitHeight: Theme.dp(30)
                 Layout.alignment: Qt.AlignVCenter
                 visible: (namesList.count > 0)
                 contentWidth: namesList.contentWidth
@@ -267,7 +268,7 @@ Item {
                     anchors.fill: parent
                     model: namesModel
                     orientation: ListView.Horizontal
-                    spacing: 8
+                    spacing: Theme.dp(8)
                     function scrollToEnd() {
                         if (contentWidth > width) {
                             contentX = contentWidth;
@@ -294,12 +295,12 @@ Item {
                 focus: true
                 color: Theme.palette.directColor1
                 clip: true
-                font.pixelSize: 15
+                font.pixelSize: Theme.dp(15)
                 wrapMode: TextEdit.NoWrap
                 font.family: Theme.palette.baseFont.name
                 Layout.fillWidth: true
-                Layout.preferredHeight: 44
-                visible: (parent.width>22)
+                Layout.preferredHeight: Theme.dp(44)
+                visible: (parent.width>Theme.dp(22))
                 Keys.onPressed: {
                     if ((event.key === Qt.Key_Backspace || event.key === Qt.Key_Escape)
                             && getText(cursorPosition, (cursorPosition-1)) === ""
@@ -321,9 +322,9 @@ Item {
             StatusBaseText {
                 id: warningTextLabel
                 visible: (namesModel.count === root.nameCountLimit)
-                Layout.preferredWidth: visible ? 120 : 0
+                Layout.preferredWidth: visible ? Theme.dp(120) : 0
                 Layout.alignment: Qt.AlignVCenter | Qt.AlignRight
-                font.pixelSize: 10
+                font.pixelSize: Theme.dp(10)
                 color: Theme.palette.dangerColor1
                 text: root.nameCountLimit + " " + root.warningText
             }
@@ -332,11 +333,11 @@ Item {
 
     StatusBaseText {
         id: contactsLabel
-        font.pixelSize: 15
+        font.pixelSize: Theme.dp(15)
         anchors.left: parent.left
-        anchors.leftMargin: 8
+        anchors.leftMargin: Theme.dp(8)
         anchors.top: tagSelectorRect.bottom
-        anchors.topMargin: visible ? 32 : 0
+        anchors.topMargin: visible ? Theme.dp(32) : 0
         height: visible ? contentHeight : 0
         visible: (root.sortedList.count === 0)
         color: Theme.palette.baseColor1
@@ -345,31 +346,31 @@ Item {
 
     Control {
         id: suggestionsContainer
-        width: 360
+        width: Theme.dp(360)
         anchors {
             top: (root.sortedList.count > 0) ? tagSelectorRect.bottom : contactsLabel.bottom
-            topMargin: 8//Style.current.halfPadding
+            topMargin: Theme.dp(8)//Style.current.halfPadding
             bottom: parent.bottom
-            bottomMargin: 16//Style.current.padding
+            bottomMargin: Theme.dp(16)//Style.current.padding
         }
         clip: true
         visible: (!root.showSortedListOnlyWhenText && ((root.sortedList.count > 0) || (edit.text === ""))) ||
                  ((edit.text !== "") && (root.sortedList.count > 0))
         x: ((root.namesModel.count > 0) && (root.sortedList.count > 0) && ((edit.x + 8) <= (root.width - suggestionsContainer.width)))
-           ? (edit.x + 8) : 0
+           ? (edit.x + Theme.dp(8)) : 0
         background: Rectangle {
             id: bgRect
             anchors.fill: parent
-            anchors.margins: 8
+            anchors.margins: Theme.dp(8)
             visible: (root.sortedList.count > 0)
             color: Theme.palette.statusPopupMenu.backgroundColor
-            radius: 8
+            radius: Theme.dp(8)
             layer.enabled: true
             layer.effect: DropShadow {
                 source: bgRect
                 horizontalOffset: 0
-                verticalOffset: 4
-                radius: 12
+                verticalOffset: Theme.dp(4)
+                radius: Theme.dp(12)
                 samples: 25
                 spread: 0.2
                 color: Theme.palette.dropShadow
@@ -379,9 +380,9 @@ Item {
             id: userListView
             anchors {
                 fill: parent
-                topMargin: 16
-                leftMargin: 8
-                rightMargin: 8
+                topMargin: Theme.dp(16)
+                leftMargin: Theme.dp(8)
+                rightMargin: Theme.dp(8)
             }
             ScrollBar.vertical: ScrollBar {
                 policy: ScrollBar.AsNeeded
@@ -392,10 +393,10 @@ Item {
             }
             delegate: StatusMemberListItem {
                 anchors.left: parent.left
-                anchors.leftMargin: bgRect.visible ? 8 : 0
+                anchors.leftMargin: bgRect.visible ? Theme.dp(8) : 0
                 anchors.right: parent.right
-                anchors.rightMargin: bgRect.visible ? 8 : 0
-                height: visible ? 64 : 0
+                anchors.rightMargin: bgRect.visible ? Theme.dp(8) : 0
+                height: visible ? Theme.dp(64) : 0
                 visible: {
                     for (let i = 0; i < namesModel.count; i++) {
                         if (namesModel.get(i).pubKey === model.pubKey) {
diff --git a/src/StatusQ/Components/StatusToastMessage.qml b/src/StatusQ/Components/StatusToastMessage.qml
index e43c7ace..1b191a27 100644
--- a/src/StatusQ/Components/StatusToastMessage.qml
+++ b/src/StatusQ/Components/StatusToastMessage.qml
@@ -37,8 +37,8 @@ import StatusQ.Core.Theme 0.1
 
 Control {
     id: root
-    width: 343
-    height: !!secondaryText ? 68 : 48
+    width: Theme.dp(343)
+    height: Theme.dp(!!secondaryText ? 68 : 48)
     anchors.right: parent.right
 
     /*!
@@ -79,8 +79,8 @@ Control {
         This property holds a set of settings for the icon of the ToastMessage.
     */
     property StatusIconSettings icon: StatusIconSettings {
-        width: 23
-        height: 23
+        width: Theme.dp(23)
+        height: Theme.dp(23)
     }
 
     /*!
@@ -195,12 +195,12 @@ Control {
         id: background
         anchors.fill: parent
         color: Theme.palette.statusToastMessage.backgroundColor
-        radius: 8
+        radius: Theme.dp(8)
         border.color: Theme.palette.baseColor2
         layer.enabled: true
         layer.effect: DropShadow {
-            verticalOffset: 3
-            radius: 8
+            verticalOffset: Theme.dp(3)
+            radius: Theme.dp(8)
             samples: 15
             fast: true
             cached: true
@@ -210,9 +210,9 @@ Control {
 
     contentItem: Item {
         anchors.left: parent.left
-        anchors.leftMargin: 16
+        anchors.leftMargin: Theme.dp(16)
         anchors.right: parent.right
-        anchors.rightMargin: 4
+        anchors.rightMargin: Theme.dp(4)
         height: parent.height
         MouseArea {
             anchors.fill: parent
@@ -225,10 +225,10 @@ Control {
         }
         RowLayout {
             anchors.fill: parent
-            spacing: 16
+            spacing: Theme.dp(16)
             Rectangle {
-                implicitWidth: 32
-                implicitHeight: 32
+                implicitWidth: Theme.dp(32)
+                implicitHeight: Theme.dp(32)
                 Layout.alignment: Qt.AlignVCenter
                 radius: (root.width/2)
                 color: (root.type === StatusToastMessage.Type.Success) ?
@@ -266,7 +266,7 @@ Control {
                 Layout.alignment: Qt.AlignVCenter
                 StatusBaseText {
                     width: parent.width
-                    font.pixelSize: 13
+                    font.pixelSize: Theme.dp(13)
                     color: Theme.palette.directColor1
                     elide: Text.ElideRight
                     text: root.primaryText
@@ -275,7 +275,7 @@ Control {
                     width: parent.width
                     visible: (!root.linkUrl && !!root.secondaryText)
                     height: visible ? contentHeight : 0
-                    font.pixelSize: 13
+                    font.pixelSize: Theme.dp(13)
                     color: Theme.palette.baseColor1
                     text: root.secondaryText
                     elide: Text.ElideRight
@@ -283,7 +283,7 @@ Control {
                 StatusSelectableText {
                     visible: (!!root.linkUrl)
                     height: visible ? implicitHeight : 0
-                    font.pixelSize: 13
+                    font.pixelSize: Theme.dp(13)
                     hoveredLinkColor: Theme.palette.primaryColor1
                     text: "<p><a style=\"text-decoration:none\" href=\'" + root.linkUrl + " \'>" + root.secondaryText + "</a></p>"
                     onLinkActivated: {
@@ -295,8 +295,8 @@ Control {
                 type: StatusFlatRoundButton.Type.Secondary
                 icon.name: "close"
                 icon.color: Theme.palette.directColor1
-                implicitWidth: 30
-                implicitHeight: 30
+                implicitWidth: Theme.dp(30)
+                implicitHeight: Theme.dp(30)
                 onClicked: {
                     root.open = false;
                 }
diff --git a/src/StatusQ/Components/StatusWizardStepper.qml b/src/StatusQ/Components/StatusWizardStepper.qml
index 6b9c099c..bca71915 100644
--- a/src/StatusQ/Components/StatusWizardStepper.qml
+++ b/src/StatusQ/Components/StatusWizardStepper.qml
@@ -37,7 +37,7 @@ Item {
 
     id: wizardWrapper
     width: parent.width
-    height: 56
+    height: Theme.dp(56)
     /*!
        \qmlproperty ListModel StatusWizardStepper::stepsModel
         This property represents all steps and their descriptions as provided by the user.
@@ -54,18 +54,18 @@ Item {
         delegate: Item {
             id: wrapperItem
             width: (index === 0) ? descriptionLabel.contentWidth : (wizardWrapper.width / repeat.count)
-            height: 56
+            height: Theme.dp(56)
             onXChanged: {
                 //as x changes while delegates are created, direct assignment doesn't work
-                x = (index === (repeat.count-1)) ? (width+32) : (label.width/2) + 8
+                x = (index === (repeat.count-1)) ? (width+Theme.dp(32)) : (label.width/2) + Theme.dp(8)
             }
             StatusProgressBar {
                 id: barBorder
-                width: visible ? (parent.width - (label.width/2 + 24)) : 0
-                height: visible ? 8 : 0
+                width: visible ? (parent.width - (label.width/2 + Theme.dp(24))) : 0
+                height: visible ? Theme.dp(8) : 0
                 visible: (index > 0)
                 anchors.verticalCenter: parent.verticalCenter
-                anchors.verticalCenterOffset: -12
+                anchors.verticalCenterOffset: -Theme.dp(12)
                 from: 0
                 to: wizardWrapper.maxDuration
                 value: loadingTime
@@ -76,22 +76,22 @@ Item {
             Item {
                 id: label
                 width: descriptionLabel.contentWidth
-                height: 56
+                height: Theme.dp(56)
                 anchors.left: (index > 0) ? barBorder.right : parent.left
-                anchors.leftMargin: (index > 0) ? -((width/2) - 24) : 0
+                anchors.leftMargin: (index > 0) ? -((width/2) - Theme.dp(24)) : 0
                 Rectangle {
-                    width: 32
-                    height: 32
+                    width: Theme.dp(32)
+                    height: Theme.dp(32)
                     anchors.horizontalCenter: parent.horizontalCenter
                     radius: width/2
                     color: stepCompleted ? Theme.palette.primaryColor1 : "transparent"
                     border.color: (stepCompleted && (barBorder.visible ? (barBorder.value === barBorder.to) : true))
                                   ? "transparent" : Theme.palette.primaryColor1
-                    border.width: 2
+                    border.width: Theme.dp(2)
                     StatusBaseText {
                         anchors.centerIn: parent
                         text: index+1
-                        font.pixelSize: 17
+                        font.pixelSize: Theme.dp(17)
                         color: (stepCompleted && (barBorder.visible ? (barBorder.value === barBorder.to) : true))
                                ? Theme.palette.indirectColor1 : Theme.palette.primaryColor1
                     }
@@ -101,7 +101,7 @@ Item {
                     anchors.bottom: parent.bottom
                     text: description
                     color: Theme.palette.directColor1
-                    font.pixelSize: 13
+                    font.pixelSize: Theme.dp(13)
                 }
             }
         }
diff --git a/src/StatusQ/Components/private/statusMessage/StatusAudioMessage.qml b/src/StatusQ/Components/private/statusMessage/StatusAudioMessage.qml
index a2299c3a..e797aed4 100644
--- a/src/StatusQ/Components/private/statusMessage/StatusAudioMessage.qml
+++ b/src/StatusQ/Components/private/statusMessage/StatusAudioMessage.qml
@@ -15,9 +15,9 @@ Rectangle {
     property bool hovered: false
     property string audioSource: ""
 
-    width: 320
-    height: 32
-    radius: 20
+    width: Theme.dp(320)
+    height: Theme.dp(32)
+    radius: Theme.dp(20)
 
     color: hovered ? Theme.palette.directColor8 : Theme.palette.baseColor2
 
@@ -30,13 +30,13 @@ Rectangle {
     RowLayout {
         id: preview
         visible: isPreview
-        spacing: 5
+        spacing: Theme.dp(5)
         anchors.centerIn: parent
         StatusIcon {
             id: icon
             Layout.alignment: Qt.AlignVCenter
-            Layout.preferredWidth: 14
-            Layout.preferredHeight: 14
+            Layout.preferredWidth: Theme.dp(14)
+            Layout.preferredHeight: Theme.dp(14)
             icon: "audio"
             color: Theme.palette.baseColor1
         }
@@ -44,16 +44,16 @@ Rectangle {
             Layout.alignment: Qt.AlignVCenter
             color: Theme.palette.baseColor1
             text: audioMessageInfoText
-            font.pixelSize: 13
+            font.pixelSize: Theme.dp(13)
         }
     }
 
     StatusFlatRoundButton {
         id: playButton
-        width: 15
-        height: 15
+        width: Theme.dp(15)
+        height: Theme.dp(15)
         anchors.left: parent.left
-        anchors.leftMargin: 16
+        anchors.leftMargin: Theme.dp(16)
         anchors.verticalCenter: parent.verticalCenter
         visible: !isPreview
 
@@ -73,12 +73,12 @@ Rectangle {
     }
     
     Rectangle {
-        height: 2
-        width: 240
+        height: Theme.dp(2)
+        width: Theme.dp(240)
         color: Theme.palette.directColor5
         anchors.verticalCenter: parent.verticalCenter
         anchors.left: playButton.right
-        anchors.leftMargin: 10
+        anchors.leftMargin: Theme.dp(10)
         visible: !isPreview
         Rectangle {
             id: progress
@@ -94,10 +94,10 @@ Rectangle {
 
         Rectangle {
             id: handle
-            width: 10
-            height: 10
+            width: Theme.dp(10)
+            height: Theme.dp(10)
             color: Theme.palette.directColor1
-            radius: 10
+            radius: Theme.dp(10)
             anchors.verticalCenter: parent.verticalCenter
             x: progress.width
             state: "default"
diff --git a/src/StatusQ/Components/private/statusMessage/StatusEditMessage.qml b/src/StatusQ/Components/private/statusMessage/StatusEditMessage.qml
index c7a2c0c6..701afd28 100644
--- a/src/StatusQ/Components/private/statusMessage/StatusEditMessage.qml
+++ b/src/StatusQ/Components/private/statusMessage/StatusEditMessage.qml
@@ -20,7 +20,7 @@ Item {
     height: childrenRect.height
 
     ColumnLayout {
-        spacing: 4
+        spacing: Theme.dp(4)
         Loader {
             id: chatInputLoader
             // To-Do: Move to StatusChatInput once its moved to StatusQ
@@ -28,7 +28,7 @@ Item {
                 width: editText.width
                 input.placeholderText: ""
                 input.text: msgText
-                input.implicitHeight: 40
+                input.implicitHeight: Theme.dp(40)
             }
         }
         RowLayout {
diff --git a/src/StatusQ/Components/private/statusMessage/StatusImageMessage.qml b/src/StatusQ/Components/private/statusMessage/StatusImageMessage.qml
index 9e28a6bf..b7d991ab 100644
--- a/src/StatusQ/Components/private/statusMessage/StatusImageMessage.qml
+++ b/src/StatusQ/Components/private/statusMessage/StatusImageMessage.qml
@@ -19,7 +19,7 @@ Item {
     property url source: ""
     property bool allCornersRounded: false
     property bool isLeftCorner: true
-    property int imageWidth: 350
+    property int imageWidth: Theme.dp(350)
     property int shapeType: -1
 
     property string loadingImageText: ""
@@ -55,22 +55,22 @@ Item {
                     anchors.left: parent.left
                     width: imageMessage.width
                     height: imageMessage.height
-                    radius: 16
+                    radius: Theme.dp(16)
                 }
                 Rectangle {
                     anchors.bottom: parent.bottom
                     anchors.left: parent.left
-                    width: 32
-                    height: 32
-                    radius: 4
+                    width: Theme.dp(32)
+                    height: Theme.dp(32)
+                    radius: Theme.dp(4)
                     visible: shapeType === StatusImageMessage.ShapeType.LEFT_ROUNDED //!isLeftCorner && !allCornersRounded
                 }
                 Rectangle {
                     anchors.bottom: parent.bottom
                     anchors.right: parent.right
-                    width: 32
-                    height: 32
-                    radius: 4
+                    width: Theme.dp(32)
+                    height: Theme.dp(32)
+                    radius: Theme.dp(4)
                     visible: shapeType === StatusImageMessage.ShapeType.RIGHT_ROUNDED  //isLeftCorner && !allCornersRounded
                 }
             }
@@ -98,9 +98,9 @@ Item {
                  || imageMessage.status === Image.Error
         width: parent.width
         height: width
-        border.width: 1
+        border.width: Theme.dp(1)
         border.color: Theme.palette.baseColor2
-        radius: 8
+        radius: Theme.dp(8)
 
         StatusBaseText {
             anchors.centerIn: parent
@@ -108,7 +108,7 @@ Item {
             color: imageMessage.status === Image.Error?
                        Theme.palette.dangerColor1 :
                        Theme.palette.directColor1
-            font.pixelSize: 15
+            font.pixelSize: Theme.dp(15)
         }
     }
 }
diff --git a/src/StatusQ/Components/private/statusMessage/StatusMessageHeader.qml b/src/StatusQ/Components/private/statusMessage/StatusMessageHeader.qml
index 76c573f2..625b52ab 100644
--- a/src/StatusQ/Components/private/statusMessage/StatusMessageHeader.qml
+++ b/src/StatusQ/Components/private/statusMessage/StatusMessageHeader.qml
@@ -35,7 +35,7 @@ Item {
             id: primaryDisplayName
             font.family: Theme.palette.baseFont.name
             font.weight: Font.Medium
-            font.pixelSize: 15
+            font.pixelSize: Theme.dp(15)
             font.underline: mouseArea.containsMouse
             readOnly: true
             wrapMode: Text.WordWrap
@@ -62,14 +62,14 @@ Item {
             id: secondaryDisplayName
             Layout.alignment: Qt.AlignVCenter
             color: Theme.palette.baseColor1
-            font.pixelSize: 10
+            font.pixelSize: Theme.dp(10)
             text: secondaryName
             visible: !!text
         }
         StatusBaseText {
             id: dotSeparator1
             Layout.fillHeight: true
-            font.pixelSize: 10
+            font.pixelSize: Theme.dp(10)
             color: Theme.palette.baseColor1
             text: "."
             visible: secondaryDisplayName.visible
@@ -77,8 +77,8 @@ Item {
         StatusBaseText {
             id: tertiaryDetailText
             Layout.alignment: Qt.AlignVCenter
-            Layout.maximumWidth: 58
-            font.pixelSize: 10
+            Layout.maximumWidth: Theme.dp(58)
+            font.pixelSize: Theme.dp(10)
             elide: Text.ElideMiddle
             color: Theme.palette.baseColor1
             text: tertiaryDetail
@@ -86,7 +86,7 @@ Item {
         StatusBaseText {
             id: dotSeparator2
             Layout.fillHeight: true
-            font.pixelSize: 10
+            font.pixelSize: Theme.dp(10)
             color: Theme.palette.baseColor1
             text: "."
             visible: tertiaryDetailText.visible
diff --git a/src/StatusQ/Components/private/statusMessage/StatusMessageQuickActions.qml b/src/StatusQ/Components/private/statusMessage/StatusMessageQuickActions.qml
index ee2bd6e3..a809724f 100644
--- a/src/StatusQ/Components/private/statusMessage/StatusMessageQuickActions.qml
+++ b/src/StatusQ/Components/private/statusMessage/StatusMessageQuickActions.qml
@@ -16,8 +16,8 @@ Rectangle {
     }
 
     width: buttonRow.width + _internal.containerMargin * 2
-    height: 36
-    radius: 8
+    height: Theme.dp(36)
+    radius: Theme.dp(8)
     color: Theme.palette.statusSelect.menuItemBackgroundColor
 
     layer.enabled: true
@@ -25,11 +25,11 @@ Rectangle {
         width: buttonsContainer.width
         height: buttonsContainer.height
         x: buttonsContainer.x
-        y: buttonsContainer.y + 10
+        y: buttonsContainer.y + Theme.dp(10)
         horizontalOffset: 0
-        verticalOffset: 2
+        verticalOffset: Theme.dp(2)
         source: buttonsContainer
-        radius: 10
+        radius: Theme.dp(10)
         samples: 15
         color: Theme.palette.dropShadow
     }
diff --git a/src/StatusQ/Components/private/statusMessage/StatusMessageReply.qml b/src/StatusQ/Components/private/statusMessage/StatusMessageReply.qml
index ef250133..8592a1bf 100644
--- a/src/StatusQ/Components/private/statusMessage/StatusMessageReply.qml
+++ b/src/StatusQ/Components/private/statusMessage/StatusMessageReply.qml
@@ -19,13 +19,13 @@ Loader {
 
     sourceComponent: RowLayout {
         id: replyLayout
-        spacing: 8
+        spacing: Theme.dp(8)
         Shape {
             id: replyCorner
             Layout.alignment: Qt.AlignTop
-            Layout.leftMargin: 35
+            Layout.leftMargin: Theme.dp(35)
             Layout.topMargin: profileImage.height/2
-            Layout.preferredWidth: 20
+            Layout.preferredWidth: Theme.dp(20)
             Layout.preferredHeight: messageLayout.height - replyCorner.Layout.topMargin
             asynchronous: true
             antialiasing: true
@@ -35,13 +35,13 @@ Loader {
                 fillColor: "transparent"
                 capStyle: ShapePath.RoundCap
                 joinStyle: ShapePath.RoundJoin
-                startX: 20
+                startX: Theme.dp(20)
                 startY: 0
-                PathLine { x: 10; y: 0 }
+                PathLine { x: Theme.dp(10); y: 0 }
                 PathArc {
-                    x: 0; y: 10
-                    radiusX: 13
-                    radiusY: 13
+                    x: 0; y: Theme.dp(10)
+                    radiusX: Theme.dp(13)
+                    radiusY: Theme.dp(13)
                     direction: PathArc.Counterclockwise
                 }
                 PathLine { x: 0; y: messageLayout.height}
@@ -51,7 +51,7 @@ Loader {
             id: messageLayout
             Layout.fillWidth: true
             Layout.alignment: Qt.AlignTop
-            Layout.topMargin: 4
+            Layout.topMargin: Theme.dp(4)
             RowLayout {
                 StatusSmartIdenticon {
                     id: profileImage
@@ -70,7 +70,7 @@ Loader {
                     color: Theme.palette.baseColor1
                     selectionColor: Theme.palette.primaryColor3
                     selectedTextColor: Theme.palette.directColor1
-                    font.pixelSize: 13
+                    font.pixelSize: Theme.dp(13)
                     font.weight: Font.Medium
                     selectByMouse: true
                     readOnly: true
@@ -80,40 +80,40 @@ Loader {
             StatusTextMessage {
                 Layout.fillWidth: true
                 textField.text: replyDetails.messageText
-                textField.font.pixelSize: 13
+                textField.font.pixelSize: Theme.dp(13)
                 textField.color: Theme.palette.baseColor1
-                textField.height: 18
+                textField.height: Theme.dp(18)
                 clip: true
                 visible: !!replyDetails.messageText
             }
             StatusImageMessage {
                 Layout.fillWidth: true
                 Layout.preferredHeight: imageAlias.paintedHeight
-                imageWidth: 56
+                imageWidth: Theme.dp(56)
                 source: replyDetails.contentType === StatusMessage.ContentType.Image ? replyDetails.messageContent : ""
                 visible: replyDetails.contentType === StatusMessage.ContentType.Image
                 shapeType: StatusImageMessage.ShapeType.ROUNDED
             }
             Item {
                 Layout.fillWidth: true
-                Layout.preferredHeight: 48
+                Layout.preferredHeight: Theme.dp(48)
                 Layout.alignment: Qt.AlignLeft
                 visible: replyDetails.contentType === StatusMessage.ContentType.Sticker
                 StatusSticker {
-                    image.width: 48
-                    image.height: 48
+                    image.width: Theme.dp(48)
+                    image.height: Theme.dp(48)
                     image.source: replyDetails.messageContent
                 }
             }
             Item {
                 Layout.fillWidth: true
-                Layout.preferredHeight: 22
+                Layout.preferredHeight: Theme.dp(22)
                 visible: replyDetails.contentType === StatusMessage.ContentType.Audio
                 StatusAudioMessage {
                     id: audioMessage
                     anchors.left: parent.left
-                    width: 125
-                    height: 22
+                    width: Theme.dp(125)
+                    height: Theme.dp(22)
                     isPreview: true
                     audioSource: replyDetails.messageContent
                     audioMessageInfoText: chatReply.audioMessageInfoText
diff --git a/src/StatusQ/Components/private/statusMessage/StatusPinMessageDetails.qml b/src/StatusQ/Components/private/statusMessage/StatusPinMessageDetails.qml
index 93b89762..de4e4edf 100644
--- a/src/StatusQ/Components/private/statusMessage/StatusPinMessageDetails.qml
+++ b/src/StatusQ/Components/private/statusMessage/StatusPinMessageDetails.qml
@@ -12,32 +12,32 @@ Loader {
     active: visible
 
     sourceComponent: Rectangle {
-        height: 24
-        width: layout.width + 16
+        height: Theme.dp(24)
+        width: layout.width + Theme.dp(16)
         color: Theme.palette.pinColor2
-        radius: 12
+        radius: Theme.dp(12)
         RowLayout {
             id: layout
             anchors.centerIn: parent
             StatusIcon {
                 Layout.alignment: Qt.AlignVCenter
-                Layout.preferredWidth: 16
-                Layout.preferredHeight: 16
+                Layout.preferredWidth: Theme.dp(16)
+                Layout.preferredHeight: Theme.dp(16)
                 color: Theme.palette.pinColor1
                 icon: "tiny/pin"
             }
             StatusBaseText {
                 Layout.alignment: Qt.AlignVCenter
-                Layout.leftMargin: -4
+                Layout.leftMargin: -Theme.dp(4)
                 color: Theme.palette.directColor1
-                font.pixelSize: 13
+                font.pixelSize: Theme.dp(13)
                 text: pinnedMsgInfoText
             }
             StatusBaseText {
                 Layout.alignment: Qt.AlignVCenter
-                Layout.leftMargin: -4
+                Layout.leftMargin: -Theme.dp(4)
                 color: Theme.palette.directColor1
-                font.pixelSize: 13
+                font.pixelSize: Theme.dp(13)
                 font.weight: Font.Medium
                 text: pinnedBy
             }
diff --git a/src/StatusQ/Components/private/statusMessage/StatusSticker.qml b/src/StatusQ/Components/private/statusMessage/StatusSticker.qml
index 8909008f..19cd9d06 100644
--- a/src/StatusQ/Components/private/statusMessage/StatusSticker.qml
+++ b/src/StatusQ/Components/private/statusMessage/StatusSticker.qml
@@ -11,8 +11,8 @@ Loader {
     property bool noHover: false
     property bool noMouseArea: false
     property StatusImageSettings image: StatusImageSettings {
-        width: 140
-        height: 140
+        width: Theme.dp(140)
+        height: Theme.dp(140)
     }
 
     signal loaded()
@@ -24,7 +24,7 @@ Loader {
         id: root
 
         color: Theme.palette.baseColor2
-        radius: 16
+        radius: Theme.dp(16)
 
         width: image.width
         height: image.height
@@ -71,8 +71,8 @@ Loader {
         Component {
             id: loadingIndicator
             StatusLoadingIndicator {
-                width: 24
-                height: 24
+                width: Theme.dp(24)
+                height: Theme.dp(24)
                 color: Theme.palette.baseColor1
             }
         }
diff --git a/src/StatusQ/Components/private/statusMessage/StatusTextMessage.qml b/src/StatusQ/Components/private/statusMessage/StatusTextMessage.qml
index b9ed294f..054ccfa3 100644
--- a/src/StatusQ/Components/private/statusMessage/StatusTextMessage.qml
+++ b/src/StatusQ/Components/private/statusMessage/StatusTextMessage.qml
@@ -28,7 +28,7 @@ Item {
         selectionColor: Theme.palette.primaryColor3
         color: Theme.palette.directColor1
         font.family: Theme.palette.baseFont.name
-        font.pixelSize: 15
+        font.pixelSize: Theme.dp(15)
         textFormat: Text.RichText
         wrapMode: Text.Wrap
         readOnly: true
@@ -72,11 +72,11 @@ Item {
         id: showMoreLoader
         active: _internal.veryLongChatText
         anchors.top: chatText.bottom
-        anchors.topMargin: -10
+        anchors.topMargin: -Theme.dp(10)
         anchors.horizontalCenter: parent.horizontalCenter
         sourceComponent: StatusRoundButton {
-            implicitWidth: 24
-            implicitHeight: 24
+            implicitWidth: Theme.dp(24)
+            implicitHeight: Theme.dp(24)
             type: StatusRoundButton.Type.Secondary
             icon.name: _internal.readMore ? "chevron-up":  "chevron-down"
             onClicked: {
diff --git a/src/StatusQ/Components/private/statusMessage/StatusTimeStampLabel.qml b/src/StatusQ/Components/private/statusMessage/StatusTimeStampLabel.qml
index a68001be..de42c496 100644
--- a/src/StatusQ/Components/private/statusMessage/StatusTimeStampLabel.qml
+++ b/src/StatusQ/Components/private/statusMessage/StatusTimeStampLabel.qml
@@ -11,12 +11,12 @@ StatusBaseText {
 
     Layout.alignment: Qt.AlignVCenter
     color: Theme.palette.baseColor1
-    font.pixelSize: 10
+    font.pixelSize: Theme.dp(10)
     visible: !!text
     StatusToolTip {
         id: tooltip
         visible: hhandler.hovered && !!text
-        maxWidth: 350
+        maxWidth: Theme.dp(350)
     }
     HoverHandler {
         id: hhandler
diff --git a/src/StatusQ/Controls/StatusAccountSelector.qml b/src/StatusQ/Controls/StatusAccountSelector.qml
index 60967fd3..962ceb5e 100644
--- a/src/StatusQ/Controls/StatusAccountSelector.qml
+++ b/src/StatusQ/Controls/StatusAccountSelector.qml
@@ -16,7 +16,7 @@ Item {
     property var selectedAccount
     property string currency: "usd"
     property alias selectField: select
-    implicitWidth: 448
+    implicitWidth: Theme.dp(448)
     height: select.height +
             (selectedAccountDetails.visible ? selectedAccountDetails.height + selectedAccountDetails.anchors.topMargin : 0)
     // set to asset symbol to display asset's balance top right
@@ -91,16 +91,16 @@ Item {
         id: txtAssetBalance
         visible: root.assetFound !== undefined
         anchors.bottom: select.top
-        anchors.bottomMargin: -18
+        anchors.bottomMargin: -Theme.dp(18)
         anchors.right: txtAssetSymbol.left
         anchors.left: select.left
         anchors.leftMargin: select.width / 2.5
 
         color: !root.isValid ? Theme.palette.dangerColor1 : Theme.palette.baseColor1
         elide: Text.ElideRight
-        font.pixelSize: 13
+        font.pixelSize: Theme.dp(13)
         horizontalAlignment: Text.AlignRight
-        height: 18
+        height: Theme.dp(18)
 
         StatusToolTip {
             enabled: txtAssetBalance.truncated
@@ -123,7 +123,7 @@ Item {
         anchors.right: parent.right
 
         color: txtAssetBalance.color
-        font.pixelSize: 13
+        font.pixelSize: Theme.dp(13)
         height: txtAssetBalance.height
     }
     StatusSelect {
@@ -140,10 +140,10 @@ Item {
             StatusIcon {
                 id: selectedIconImg
                 anchors.left: parent.left
-                anchors.leftMargin: 16
+                anchors.leftMargin: Theme.dp(16)
                 anchors.verticalCenter: parent.verticalCenter
-                width: 20
-                height: 20
+                width: Theme.dp(20)
+                height: Theme.dp(20)
                 icon: "filled-account"
             }
 
@@ -151,13 +151,13 @@ Item {
                 id: selectedTextField
                 elide: Text.ElideRight
                 anchors.left: selectedIconImg.right
-                anchors.leftMargin: 8
+                anchors.leftMargin: Theme.dp(8)
                 anchors.right: parent.right
                 anchors.rightMargin: select.selectedItemRightMargin
                 anchors.verticalCenter: parent.verticalCenter
-                font.pixelSize: 15
+                font.pixelSize: Theme.dp(15)
                 verticalAlignment: Text.AlignVCenter
-                height: 22
+                height: Theme.dp(22)
                 color: Theme.palette.directColor1
             }
         }
@@ -167,20 +167,20 @@ Item {
         id: selectedAccountDetails
         visible: root.showAccountDetails
         anchors.top: select.bottom
-        anchors.topMargin: 8
+        anchors.topMargin: Theme.dp(8)
         anchors.left: parent.left
-        anchors.leftMargin: 2
+        anchors.leftMargin: Theme.dp(2)
 
         StatusBaseText {
             id: textSelectedAddress
-            font.pixelSize: 12
+            font.pixelSize: Theme.dp(12)
             elide: Text.ElideMiddle
-            width: 90
+            width: Theme.dp(90)
             color: Theme.palette.baseColor1
         }
         StatusBaseText {
             id: textSelectedAddressFiatBalance
-            font.pixelSize: 12
+            font.pixelSize: Theme.dp(12)
             color: Theme.palette.baseColor1
         }
     }
@@ -199,15 +199,15 @@ Item {
                 }
             }
 
-            height: walletType === root.watchWalletType ? 0 : (accountName.height + 14 + accountAddress.height + 14)
+            height: walletType === root.watchWalletType ? 0 : (accountName.height + Theme.dp(14) + accountAddress.height + Theme.dp(14))
 
             StatusIcon {
                 id: iconImg
                 anchors.left: parent.left
-                anchors.leftMargin: 16
+                anchors.leftMargin: Theme.dp(16)
                 anchors.verticalCenter: parent.verticalCenter
-                width: 20
-                height: 20
+                width: Theme.dp(20)
+                height: Theme.dp(20)
                 icon: "filled-account"
                 color: Utils.getThemeAccountColor(model.color, Theme.palette.userCustomizationColors) || Theme.palette.userCustomizationColors[0]
             }
@@ -215,19 +215,19 @@ Item {
             Column {
                 id: column
                 anchors.left: iconImg.right
-                anchors.leftMargin: 14
+                anchors.leftMargin: Theme.dp(14)
                 anchors.right: txtFiatBalance.left
-                anchors.rightMargin: 8
+                anchors.rightMargin: Theme.dp(8)
                 anchors.verticalCenter: parent.verticalCenter
 
                 StatusBaseText {
                     id: accountName
                     text: model.name
                     elide: Text.ElideRight
-                    font.pixelSize: 15
+                    font.pixelSize: Theme.dp(15)
                     anchors.left: parent.left
                     anchors.right: parent.right
-                    height: 22
+                    height: Theme.dp(22)
                     color: Theme.palette.directColor1
                 }
 
@@ -235,29 +235,29 @@ Item {
                     id: accountAddress
                     text: address
                     elide: Text.ElideMiddle
-                    width: 80
+                    width: Theme.dp(80)
                     color: Theme.palette.baseColor1
-                    font.pixelSize: 12
-                    height: 16
+                    font.pixelSize: Theme.dp(12)
+                    height: Theme.dp(16)
                 }
             }
             StatusBaseText {
                 id: txtFiatBalance
                 anchors.right: fiatCurrencySymbol.left
-                anchors.rightMargin: 4
+                anchors.rightMargin: Theme.dp(4)
                 anchors.verticalCenter: parent.verticalCenter
-                font.pixelSize: 15
-                height: 22
+                font.pixelSize: Theme.dp(15)
+                height: Theme.dp(22)
                 text: currencyBalance
                 color: Theme.palette.directColor1
             }
             StatusBaseText {
                 id: fiatCurrencySymbol
                 anchors.right: parent.right
-                anchors.rightMargin: 16
+                anchors.rightMargin: Theme.dp(16)
                 anchors.verticalCenter: parent.verticalCenter
-                font.pixelSize: 15
-                height: 22
+                font.pixelSize: Theme.dp(15)
+                height: Theme.dp(22)
                 color: Theme.palette.baseColor1
                 text: root.currency.toUpperCase()
             }
diff --git a/src/StatusQ/Controls/StatusActivityCenterButton.qml b/src/StatusQ/Controls/StatusActivityCenterButton.qml
index 9b46dd55..b210b1fc 100644
--- a/src/StatusQ/Controls/StatusActivityCenterButton.qml
+++ b/src/StatusQ/Controls/StatusActivityCenterButton.qml
@@ -32,13 +32,13 @@ StatusFlatRoundButton {
     property alias unreadNotificationsCount: statusBadge.value
 
     icon.name: "notification"
-    icon.height: 21
+    icon.height: Theme.dp(21)
     type: StatusFlatRoundButton.Type.Secondary
 
     // initializing the tooltip
     tooltip.text: qsTr("Activity")
     tooltip.orientation: StatusToolTip.Orientation.Bottom
-    tooltip.y: parent.height + 12
+    tooltip.y: parent.height + Theme.dp(12)
 
     StatusBadge {
         id: statusBadge
@@ -46,17 +46,17 @@ StatusFlatRoundButton {
         visible: value > 0
         anchors.top: parent.top
         anchors.left: parent.right
-        anchors.topMargin: -3
+        anchors.topMargin: -Theme.dp(3)
         anchors.leftMargin: {
-            if (statusBadge.value > 99) {
-                return -22
+            if (statusBadge.value > Theme.dp(99)) {
+                return -Theme.dp(22)
             }
-            if (statusBadge.value > 9) {
-                return -21
+            if (statusBadge.value > Theme.dp(9)) {
+                return -Theme.dp(21)
             }
-            return -18
+            return -Theme.dp(18)
         }
-        border.width: 2
+        border.width: Theme.dp(2)
         border.color: parent.hovered ? Theme.palette.baseColor2 : Theme.palette.statusAppLayout.backgroundColor
     }
 }
diff --git a/src/StatusQ/Controls/StatusAssetSelector.qml b/src/StatusQ/Controls/StatusAssetSelector.qml
index 695662cd..f229ff14 100644
--- a/src/StatusQ/Controls/StatusAssetSelector.qml
+++ b/src/StatusQ/Controls/StatusAssetSelector.qml
@@ -18,8 +18,8 @@ Item {
     }
     // Define this in the usage to get balance in currency selected by user
     property var getCurrencyBalanceString: function (currencyBalance) { return "" }
-    implicitWidth: 86
-    implicitHeight: 32
+    implicitWidth: Theme.dp(86)
+    implicitHeight: Theme.dp(32)
 
     function resetInternal() {
         assets = null
@@ -40,17 +40,17 @@ Item {
         bgColorHover: Theme.palette.directColor8
         model: root.assets
         caretRightMargin: 0
-        select.radius: 6
+        select.radius: Theme.dp(6)
         select.height: root.height
-        selectMenu.width: 342
+        selectMenu.width: Theme.dp(342)
         selectedItemComponent: Item {
             anchors.fill: parent
             StatusRoundedImage {
                 id: iconImg
                 anchors.left: parent.left
-                anchors.leftMargin: 4
-                width: 24
-                height: 24
+                anchors.leftMargin: Theme.dp(4)
+                width: Theme.dp(24)
+                height: Theme.dp(24)
                 anchors.verticalCenter: parent.verticalCenter
                 image.onStatusChanged: {
                     if (iconImg.image.status === Image.Error) {
@@ -61,10 +61,10 @@ Item {
             StatusBaseText {
                 id: selectedTextField
                 anchors.left: iconImg.right
-                anchors.leftMargin: 4
+                anchors.leftMargin: Theme.dp(4)
                 anchors.verticalCenter: parent.verticalCenter
-                font.pixelSize: 15
-                height: 22
+                font.pixelSize: Theme.dp(15)
+                height: Theme.dp(22)
                 verticalAlignment: Text.AlignVCenter
                 color: Theme.palette.directColor1
             }
@@ -80,11 +80,11 @@ Item {
             property bool isLastItem: index === assets.rowCount() - 1
 
             width: parent.width
-            height: 72
+            height: Theme.dp(72)
             StatusRoundedImage {
                 id: iconImg
                 anchors.left: parent.left
-                anchors.leftMargin: 16
+                anchors.leftMargin: Theme.dp(16)
                 anchors.verticalCenter: parent.verticalCenter
                 image.source: root.tokenAssetSourceFn(symbol.toUpperCase())
                 image.onStatusChanged: {
@@ -95,31 +95,31 @@ Item {
             }
             Column {
                 anchors.left: iconImg.right
-                anchors.leftMargin: 12
+                anchors.leftMargin: Theme.dp(12)
                 anchors.verticalCenter: parent.verticalCenter
 
                 StatusBaseText {
                     text: symbol.toUpperCase()
-                    font.pixelSize: 15
+                    font.pixelSize: Theme.dp(15)
                     color: Theme.palette.directColor1
                 }
 
                 StatusBaseText {
                     text: name
                     color: Theme.palette.baseColor1
-                    font.pixelSize: 15
+                    font.pixelSize: Theme.dp(15)
                 }
             }
             Column {
                 anchors.right: parent.right
-                anchors.rightMargin: 16
+                anchors.rightMargin: Theme.dp(16)
                 anchors.verticalCenter: parent.verticalCenter
                 StatusBaseText {
-                    font.pixelSize: 15
+                    font.pixelSize: Theme.dp(15)
                     text: parseFloat(totalBalance).toFixed(4) + " " + symbol
                 }
                 StatusBaseText {
-                    font.pixelSize: 15
+                    font.pixelSize: Theme.dp(15)
                     anchors.right: parent.right
                     text: getCurrencyBalanceString(totalCurrencyBalance)
                     color: Theme.palette.baseColor1
diff --git a/src/StatusQ/Controls/StatusBanner.qml b/src/StatusQ/Controls/StatusBanner.qml
index 169e927d..c19920df 100644
--- a/src/StatusQ/Controls/StatusBanner.qml
+++ b/src/StatusQ/Controls/StatusBanner.qml
@@ -53,12 +53,12 @@ Column {
        \qmlproperty string StatusBanner::textPixels
        This property holds the pixels size of the text inside the banner.
     */
-    property int textPixels: 15
+    property int textPixels: Theme.dp(15)
     /*!
        \qmlproperty string StatusBanner::statusBannerHeight
        This property holds the height of the banner rectangle.
     */
-    property int statusBannerHeight: 38
+    property int statusBannerHeight: Theme.dp(38)
 
     // "private" properties
     QtObject {
@@ -81,7 +81,7 @@ Column {
     Rectangle {
         id: topDiv
         color: d.bordersColor
-        height: 1
+        height: Theme.dp(1)
         width: parent.width
     }
 
@@ -105,7 +105,7 @@ Column {
     Rectangle {
         id: bottomDiv
         color: d.bordersColor
-        height: 1
+        height: Theme.dp(1)
         width: parent.width
     }
 
diff --git a/src/StatusQ/Controls/StatusBaseButton.qml b/src/StatusQ/Controls/StatusBaseButton.qml
index 666f9431..fe7f3a4c 100644
--- a/src/StatusQ/Controls/StatusBaseButton.qml
+++ b/src/StatusQ/Controls/StatusBaseButton.qml
@@ -19,8 +19,8 @@ Rectangle {
     }
 
     property StatusIconSettings icon: StatusIconSettings {
-        width: 24
-        height: 24
+        width: Theme.dp(24)
+        height: Theme.dp(24)
     }
 
     property bool loading: false
@@ -33,28 +33,28 @@ Rectangle {
     property alias text: label.text
     property alias font: label.font
 
-    property real defaultLeftPadding: size === StatusBaseButton.Size.Large ? 24 : 12
-    property real defaultRightPadding: size === StatusBaseButton.Size.Large ? 24 : 12
+    property real defaultLeftPadding: Theme.dp(size === StatusBaseButton.Size.Large ? 24 : 12)
+    property real defaultRightPadding: Theme.dp(size === StatusBaseButton.Size.Large ? 24 : 12)
     property real defaultTopPadding: {
         switch (size) {
             case StatusBaseButton.Size.Tiny:
-              return 5
+              return Theme.dp(5)
             case StatusBaseButton.Size.Small:
-              return 10
+              return Theme.dp(10)
             case StatusBaseButton.Size.Large:
             default:
-              return 11
+              return Theme.dp(11)
         }
     }
     property real defaultBottomPadding: {
         switch (size) {
             case StatusBaseButton.Size.Tiny:
-              return 5
+              return Theme.dp(5)
             case StatusBaseButton.Size.Small:
-              return 10
+              return Theme.dp(10)
             case StatusBaseButton.Size.Large:
             default:
-              return 11
+              return Theme.dp(11)
         }
     }
 
@@ -84,7 +84,7 @@ Rectangle {
     implicitWidth: sensor.width
     implicitHeight: sensor.height
 
-    radius: size !== StatusBaseButton.Size.Tiny ? 8 : 6
+    radius: Theme.dp(size !== StatusBaseButton.Size.Tiny ? 8 : 6)
 
     color: {
         if (statusBaseButton.enabled)
@@ -123,7 +123,7 @@ Rectangle {
             anchors.left: parent.left
             anchors.leftMargin: statusBaseButton.leftPadding
             anchors.verticalCenter: parent.verticalCenter
-            spacing: 4
+            spacing: Theme.dp(4)
             StatusIcon {
                 id: statusIcon
                 width: statusBaseButton.icon.width
@@ -146,7 +146,7 @@ Rectangle {
                 id: label
                 opacity: !loading
                 anchors.verticalCenter: parent.verticalCenter
-                font.pixelSize: size === StatusBaseButton.Size.Large ? 15 : 13 // by design
+                font.pixelSize: Theme.dp(size === StatusBaseButton.Size.Large ? 15 : 13) // by design
 
                 color: d.textColor
             } // Text
diff --git a/src/StatusQ/Controls/StatusBaseInput.qml b/src/StatusQ/Controls/StatusBaseInput.qml
index 0f8dd179..ccdb393b 100644
--- a/src/StatusQ/Controls/StatusBaseInput.qml
+++ b/src/StatusQ/Controls/StatusBaseInput.qml
@@ -153,22 +153,22 @@ Item {
         \qmlproperty real StatusBaseInput::leftPadding
         This property sets the leftComponentLoader's left padding.
     */
-    property real leftPadding: leftComponentLoader.item ? 8 : 16
+    property real leftPadding: Theme.dp(leftComponentLoader.item ? 8 : 16)
     /*!
         \qmlproperty real StatusBaseInput::rightPadding
         This property sets the right padding.
     */
-    property real rightPadding: 16
+    property real rightPadding: Theme.dp(16)
     /*!
         \qmlproperty real StatusBaseInput::topPadding
         This property sets the top padding.
     */
-    property real topPadding: 12
+    property real topPadding: Theme.dp(12)
     /*!
         \qmlproperty alias StatusBaseInput::bottomPadding
         This property sets the bottom padding.
     */
-    property real bottomPadding: 12
+    property real bottomPadding: Theme.dp(12)
     /*!
         \qmlproperty var StatusBaseInput::tabNavItem
         This property sets the tab key navigation item.
@@ -232,15 +232,15 @@ Item {
         This property holds a set of settings for the icon of the StatusBaseInput.
     */
     property StatusIconSettings icon: StatusIconSettings {
-        width: 24
-        height: 24
+        width: Theme.dp(24)
+        height: Theme.dp(24)
         name: ""
         color: Theme.palette.baseColor1
         emoji: ""
-        letterSize: emoji ? 11 : 14
+        letterSize: Theme.dp(emoji ? 11 : 14)
         background: StatusIconBackgroundSettings {
-            width: 30
-            height: 30
+            width: Theme.dp(30)
+            height: Theme.dp(30)
             color: Theme.palette.indirectColor1
         }
     }
@@ -277,10 +277,10 @@ Item {
     */
     signal editClicked()
 
-    implicitWidth: 448
+    implicitWidth: Theme.dp(448)
     implicitHeight: multiline ? Math.min(Math.max(
                                     (edit.implicitHeight + topPadding + bottomPadding),
-                                    44, root.minimumHeight), root.maximumHeight) : 44
+                                    Theme.dp(44), root.minimumHeight), root.maximumHeight) : Theme.dp(44)
 
     Rectangle {
         id: background
@@ -293,7 +293,7 @@ Item {
                                          maximumHeight) : parent.height
         color: root.showBackground ? Theme.palette.baseColor2
                                               : "transparent"
-        radius: 8
+        radius: Theme.dp(8)
 
         clip: true
 
@@ -324,7 +324,7 @@ Item {
                 root.editClicked()
             }
             RowLayout {
-                spacing: 10
+                spacing: Theme.dp(10)
                 anchors {
                     fill: parent
                     leftMargin: root.leftPadding
@@ -335,6 +335,8 @@ Item {
 
                 Loader {
                     id: leftComponentLoader
+                    width: item ? item.width : 0
+                    height: item ? item.height : 0
                     sourceComponent: {
                         if (root.leftComponent) return root.leftComponent
                         if (!root.leftIcon) return undefined
@@ -385,7 +387,7 @@ Item {
                         selectionColor: Theme.palette.primaryColor2
                         selectedTextColor: color
                         focus: true
-                        font.pixelSize: 15
+                        font.pixelSize: Theme.dp(15)
                         font.family: Theme.palette.baseFont.name
                         color: Theme.palette.directColor1
                         wrapMode: root.multiline ? Text.WrapAtWordBoundaryOrAnywhere : TextEdit.NoWrap
@@ -424,9 +426,9 @@ Item {
 
                         cursorDelegate: Rectangle {
                             color: Theme.palette.primaryColor1
-                            implicitWidth: 2
-                            implicitHeight: 22
-                            radius: 1
+                            implicitWidth: Theme.dp(2)
+                            implicitHeight: Theme.dp(22)
+                            radius: Theme.dp(1)
                             visible: edit.cursorVisible
 
                             SequentialAnimation on visible {
@@ -442,7 +444,7 @@ Item {
                             visible: (edit.text.length === 0)
                             anchors.fill: parent
                             verticalAlignment: parent.verticalAlignment
-                            font.pixelSize: 15
+                            font.pixelSize: Theme.dp(15)
                             elide: StatusBaseText.ElideRight
                             font.family: Theme.palette.baseFont.name
                             color: root.enabled ? Theme.palette.baseColor1 : Theme.palette.directColor6
@@ -472,11 +474,11 @@ Item {
             visible: edit.text.length != 0 && root.clearable && !root.multiline
                      && edit.activeFocus
             type: StatusFlatRoundButton.Type.Secondary
-            width: 24
-            height: 24
+            width: Theme.dp(24)
+            height: Theme.dp(24)
             icon.name: "clear"
-            icon.width: 16
-            icon.height: 16
+            icon.width: Theme.dp(16)
+            icon.height: Theme.dp(16)
             icon.color: Theme.palette.baseColor1
             onClicked: {
                 edit.clear()
@@ -490,8 +492,8 @@ Item {
         StatusSmartIdenticon {
             id: identicon
 
-            icon.width: 24
-            icon.height: 24
+            icon.width: Theme.dp(24)
+            icon.height: Theme.dp(24)
             icon.background: root.icon.background
             icon.color: root.icon.color
             icon.letterSize: root.icon.letterSize
diff --git a/src/StatusQ/Controls/StatusChatCommandButton.qml b/src/StatusQ/Controls/StatusChatCommandButton.qml
index 493957c2..91308d45 100644
--- a/src/StatusQ/Controls/StatusChatCommandButton.qml
+++ b/src/StatusQ/Controls/StatusChatCommandButton.qml
@@ -7,8 +7,8 @@ import StatusQ.Components 0.1
 
 Rectangle {
     id: root
-    implicitWidth: 168
-    implicitHeight: 95
+    implicitWidth: Theme.dp(168)
+    implicitHeight: Theme.dp(95)
 
     property string text: ""
     property bool highlighted: false
@@ -17,8 +17,8 @@ Rectangle {
     signal clicked(var mouse)
 
     property StatusIconSettings icon: StatusIconSettings {
-        width: 24
-        height: 24
+        width: Theme.dp(24)
+        height: Theme.dp(24)
         background: StatusIconBackgroundSettings {}
     }
 
@@ -28,7 +28,7 @@ Rectangle {
         return actualColor
     }
 
-    radius: 16
+    radius: Theme.dp(16)
 
     MouseArea {
         id: sensor
@@ -46,22 +46,22 @@ Rectangle {
             icon.height: root.icon.height
             icon.rotation: root.icon.rotation
             icon.color: Theme.palette.white
-            icon.background.width: 40
-            icon.background.height: 40
+            icon.background.width: Theme.dp(40)
+            icon.background.height: Theme.dp(40)
             icon.background.color: root.icon.color
             anchors.top: parent.top
-            anchors.topMargin: 8
+            anchors.topMargin: Theme.dp(8)
             anchors.left: parent.left
-            anchors.leftMargin: 8
+            anchors.leftMargin: Theme.dp(8)
         }
 
         StatusBaseText {
             text: root.text
             anchors.left: parent.left
-            anchors.leftMargin: 8
+            anchors.leftMargin: Theme.dp(8)
             anchors.bottom: parent.bottom
-            anchors.bottomMargin: 8
-            font.pixelSize: 13
+            anchors.bottomMargin: Theme.dp(8)
+            font.pixelSize: Theme.dp(13)
             font.weight: Font.Medium
             color: Theme.palette.white
         }
diff --git a/src/StatusQ/Controls/StatusChatInfoButton.qml b/src/StatusQ/Controls/StatusChatInfoButton.qml
index 50d0785f..ea59c2a0 100644
--- a/src/StatusQ/Controls/StatusChatInfoButton.qml
+++ b/src/StatusQ/Controls/StatusChatInfoButton.qml
@@ -11,20 +11,20 @@ Rectangle {
                    Math.max(
                        statusChatInfoButtonTitle.anchors.leftMargin + statusChatInfoButtonTitle.implicitWidth,
                        statusChatInfoButtonTitle.anchors.leftMargin + statusChatInfoButtonSubTitle.implicitWidth
-                       ) + 8
-    implicitHeight: 48
+                       ) + Theme.dp(8)
+    implicitHeight: Theme.dp(48)
 
     property string title: ""
     property string subTitle: ""
     property bool muted: false
     property int pinnedMessagesCount: 0
     property StatusImageSettings image: StatusImageSettings {
-        width: 36
-        height: 36
+        width: Theme.dp(36)
+        height: Theme.dp(36)
     }
     property StatusIconSettings icon: StatusIconSettings {
-        width: 36
-        height: 36
+        width: Theme.dp(36)
+        height: Theme.dp(36)
         charactersLen: 2
     }
     property alias ringSettings: identicon.ringSettings
@@ -48,7 +48,7 @@ Rectangle {
         CommunityChat // 6
     }
 
-    radius: 8
+    radius: Theme.dp(8)
     color: sensor.enabled && sensor.containsMouse ? Theme.palette.baseColor2 : "transparent"
 
     MouseArea {
@@ -62,7 +62,7 @@ Rectangle {
         StatusSmartIdenticon {
             id: identicon
             anchors.left: parent.left
-            anchors.leftMargin: 4
+            anchors.leftMargin: Theme.dp(4)
             anchors.verticalCenter: parent.verticalCenter
             image: statusChatInfoButton.image
             icon: statusChatInfoButton.icon
@@ -72,9 +72,9 @@ Rectangle {
         Item {
             id: statusChatInfoButtonTitle
             anchors.top: identicon.top
-            anchors.topMargin: statusChatInfoButtonSubTitle.visible ? 0 : 8
+            anchors.topMargin: statusChatInfoButtonSubTitle.visible ? 0 : Theme.dp(8)
             anchors.left: identicon.right
-            anchors.leftMargin: 8
+            anchors.leftMargin: Theme.dp(8)
 
             width: Math.min(parent.width - anchors.leftMargin
                             - identicon.width - identicon.anchors.leftMargin,
@@ -84,16 +84,16 @@ Rectangle {
             implicitWidth: statusIcon.width + chatName.anchors.leftMargin + chatName.implicitWidth
                            + mutedDelta
 
-            property real mutedDelta: mutedIcon.visible ? mutedIcon.width + 8 : 0
+            property real mutedDelta: mutedIcon.visible ? mutedIcon.width + Theme.dp(8) : 0
 
             StatusIcon {
                 id: statusIcon
                 anchors.top: parent.top
-                anchors.topMargin: -2
+                anchors.topMargin: -Theme.dp(2)
                 anchors.left: parent.left
 
                 visible: statusChatInfoButton.type !== StatusChatInfoButton.Type.OneToOneChat
-                width: visible ? 14 : 0
+                width: visible ? Theme.dp(14) : 0
                 color: statusChatInfoButton.muted ? Theme.palette.baseColor1 : Theme.palette.directColor1
                 icon: {
                     switch (statusChatInfoButton.type) {
@@ -129,7 +129,7 @@ Rectangle {
                           "#" + statusChatInfoButton.title :
                           statusChatInfoButton.title
                 color: statusChatInfoButton.muted ? Theme.palette.directColor5 : Theme.palette.directColor1
-                font.pixelSize: 15
+                font.pixelSize: Theme.dp(15)
                 font.weight: Font.Medium
             }
 
@@ -137,10 +137,10 @@ Rectangle {
                 objectName: "mutedIcon"
                 id: mutedIcon
                 anchors.left: chatName.right
-                anchors.leftMargin: 4
+                anchors.leftMargin: Theme.dp(4)
                 anchors.top: chatName.top
-                anchors.topMargin: -2
-                width: 13
+                anchors.topMargin: -Theme.dp(2)
+                width: Theme.dp(13)
                 icon: "tiny/muted"
                 color: mutedIconSensor.containsMouse ? Theme.palette.directColor1 : Theme.palette.baseColor1
                 visible: statusChatInfoButton.muted
@@ -158,7 +158,7 @@ Rectangle {
                     text: "Unmute"
                     visible: mutedIconSensor.containsMouse
                     orientation: StatusToolTip.Orientation.Bottom
-                    y: parent.height + 12
+                    y: parent.height + Theme.dp(12)
                 }
             }
         }
@@ -170,10 +170,10 @@ Rectangle {
             visible: !!statusChatInfoButton.subTitle || statusChatInfoButton.pinnedMessagesCount > 0
             height: visible ? chatType.height : 0
             width: Math.min(parent.width - statusChatInfoButtonTitle.anchors.leftMargin
-                            - identicon.width - identicon.anchors.leftMargin - 8,
+                            - identicon.width - identicon.anchors.leftMargin - Theme.dp(8),
                             implicitWidth)
 
-            implicitWidth: chatType.implicitWidth + pinIconDelta + 8
+            implicitWidth: chatType.implicitWidth + pinIconDelta + Theme.dp(8)
 
 
             property real pinIconDelta: pinIcon.visible ? pinIcon.width + pinIcon.anchors.leftMargin
@@ -184,7 +184,7 @@ Rectangle {
                 id: chatType
                 text: statusChatInfoButton.subTitle
                 color: Theme.palette.baseColor1
-                font.pixelSize: 12
+                font.pixelSize: Theme.dp(12)
                 width: Math.min(parent.width - (pinIcon.visible ? divider.width + divider.anchors.leftMargin + pinIcon.width + pinIcon.anchors.leftMargin : 0),
                                 implicitWidth)
                 onLinkActivated: statusChatInfoButton.linkActivated(link)
@@ -192,11 +192,11 @@ Rectangle {
 
             Rectangle {
                 id: divider
-                height: 12
-                width: 1
+                height: Theme.dp(12)
+                width: Theme.dp(1)
                 color: Theme.palette.directColor7
                 anchors.left: chatType.right
-                anchors.leftMargin: 4
+                anchors.leftMargin: Theme.dp(4)
                 anchors.verticalCenter: chatType.verticalCenter
                 visible: !!chatType.text && pinIcon.visible
             }
@@ -205,9 +205,9 @@ Rectangle {
                 id: pinIcon
 
                 anchors.left: divider.visible ? divider.right : parent.left
-                anchors.leftMargin: -2
+                anchors.leftMargin: -Theme.dp(2)
                 anchors.verticalCenter: chatType.verticalCenter
-                height: 14
+                height: Theme.dp(14)
                 visible: statusChatInfoButton.pinnedMessagesCount > 0
                 icon: "pin"
                 color: Theme.palette.baseColor1
@@ -215,12 +215,12 @@ Rectangle {
 
             StatusBaseText {
                 anchors.left: pinIcon.right
-                anchors.leftMargin: -6
+                anchors.leftMargin: -Theme.dp(6)
                 anchors.verticalCenter: pinIcon.verticalCenter
 
-                width: 14
+                width: Theme.dp(14)
                 text: statusChatInfoButton.pinnedMessagesCount
-                font.pixelSize: 12
+                font.pixelSize: Theme.dp(12)
                 font.underline: pinCountSensor.containsMouse
                 visible: pinIcon.visible
                 color: pinCountSensor.containsMouse ? Theme.palette.directColor1 : Theme.palette.baseColor1
diff --git a/src/StatusQ/Controls/StatusChatListCategoryItemButton.qml b/src/StatusQ/Controls/StatusChatListCategoryItemButton.qml
index 78472cb1..be5928fe 100644
--- a/src/StatusQ/Controls/StatusChatListCategoryItemButton.qml
+++ b/src/StatusQ/Controls/StatusChatListCategoryItemButton.qml
@@ -5,15 +5,15 @@ import StatusQ.Core 0.1
 StatusFlatRoundButton {
     id: statusChatListCategoryItemButton
 
-    height: 22
-    width: 22
-    radius: 4
+    height: Theme.dp(22)
+    width: Theme.dp(22)
+    radius: Theme.dp(4)
 
     property bool highlighted: false
     property StatusTooltipSettings tooltip: StatusTooltipSettings {}
 
     type: StatusFlatRoundButton.Type.Secondary
-    icon.width: 20
+    icon.width: Theme.dp(20)
     icon.color: Theme.palette.directColor4
 
     color: hovered || highlighted ? 
diff --git a/src/StatusQ/Controls/StatusCheckBox.qml b/src/StatusQ/Controls/StatusCheckBox.qml
index 2aec1900..d13fadc5 100644
--- a/src/StatusQ/Controls/StatusCheckBox.qml
+++ b/src/StatusQ/Controls/StatusCheckBox.qml
@@ -11,18 +11,18 @@ CheckBox {
     id: statusCheckBox
 
     indicator: Rectangle {
-        implicitWidth: 18
-        implicitHeight: 18
+        implicitWidth: Theme.dp(18)
+        implicitHeight: Theme.dp(18)
         x: statusCheckBox.leftPadding
         y: parent.height / 2 - height / 2
-        radius: 2
+        radius: Theme.dp(2)
         color: (statusCheckBox.down || statusCheckBox.checked) ? Theme.palette.primaryColor1
                                                                : Theme.palette.directColor8
 
         StatusIcon {
             icon: "checkbox"
-            width: 11
-            height: 8
+            width: Theme.dp(11)
+            height: Theme.dp(8)
             anchors.centerIn: parent
             anchors.horizontalCenterOffset: 1
             color: Theme.palette.white
diff --git a/src/StatusQ/Controls/StatusColorRadioButton.qml b/src/StatusQ/Controls/StatusColorRadioButton.qml
index 489b8b12..b5ba5f9f 100644
--- a/src/StatusQ/Controls/StatusColorRadioButton.qml
+++ b/src/StatusQ/Controls/StatusColorRadioButton.qml
@@ -9,18 +9,18 @@ RadioButton {
     property string radioButtonColor: ""
     property string selectionColor: StatusColors.colors['white']
 
-    implicitWidth: 48
-    implicitHeight: 48
+    implicitWidth: Theme.dp(48)
+    implicitHeight: Theme.dp(48)
 
     indicator: Rectangle {
-        implicitWidth: 48
-        implicitHeight: 48
+        implicitWidth: Theme.dp(48)
+        implicitHeight: Theme.dp(48)
         radius: width/2
         color: radioButtonColor
 
         Rectangle {
-            width: 20
-            height: 20
+            width: Theme.dp(20)
+            height: Theme.dp(20)
             radius: width/2
             color: selectionColor
             border.color: StatusColors.colors['grey3']
diff --git a/src/StatusQ/Controls/StatusColorSelector.qml b/src/StatusQ/Controls/StatusColorSelector.qml
index 847ab60b..be9a10cf 100644
--- a/src/StatusQ/Controls/StatusColorSelector.qml
+++ b/src/StatusQ/Controls/StatusColorSelector.qml
@@ -1,6 +1,7 @@
 import QtQuick 2.13
 import QtQuick.Controls 2.13
 import StatusQ.Controls 0.1
+import StatusQ.Core.Theme 0.1
 
 Item {
   id: root
@@ -8,7 +9,7 @@ Item {
   property string label: "Color"
   property var model
   height: accountColorInput.height
-  implicitWidth: 448
+  implicitWidth: Theme.dp(448)
 
   StatusSelect {
       id: accountColorInput
@@ -20,9 +21,9 @@ Item {
           MenuItem {
               property bool isFirstItem: index === 0
               property bool isLastItem: index === root.model.length - 1
-              height: 52
+              height: Theme.dp(52)
               width: parent.width
-              padding: 10
+              padding: Theme.dp(10)
               onTriggered: function () {
                   const selectedColor = root.model[index]
                   root.selectedColor = selectedColor
diff --git a/src/StatusQ/Controls/StatusColorSelectorGrid.qml b/src/StatusQ/Controls/StatusColorSelectorGrid.qml
index ebc6e676..e342d82c 100644
--- a/src/StatusQ/Controls/StatusColorSelectorGrid.qml
+++ b/src/StatusQ/Controls/StatusColorSelectorGrid.qml
@@ -29,20 +29,20 @@ Column {
 
     signal colorSelected(color color)
 
-    spacing: 16
+    spacing: Theme.dp(16)
 
     StatusBaseText {
         id: title
         verticalAlignment: Text.AlignVCenter
-        font.pixelSize: 13
+        font.pixelSize: Theme.dp(13)
         color: Theme.palette.baseColor1
     }
 
     Grid {
         id: grid
         columns: 6
-        rowSpacing: 16
-        columnSpacing: 32
+        rowSpacing: Theme.dp(16)
+        columnSpacing: Theme.dp(32)
         Repeater {
             model: root.model
             delegate: StatusColorRadioButton {
diff --git a/src/StatusQ/Controls/StatusCommunityTag.qml b/src/StatusQ/Controls/StatusCommunityTag.qml
index f5ebe71c..e7baad9f 100644
--- a/src/StatusQ/Controls/StatusCommunityTag.qml
+++ b/src/StatusQ/Controls/StatusCommunityTag.qml
@@ -13,11 +13,11 @@ Rectangle {
 
     signal clicked()
 
-    implicitHeight: 32
-    implicitWidth: row.width + 20
+    implicitHeight: Theme.dp(32)
+    implicitWidth: row.width + Theme.dp(20)
     radius: height / 2
     border.color: Theme.palette.baseColor2
-    border.width: 1
+    border.width: Theme.dp(1)
     color: mouseArea.containsMouse ? Theme.palette.primaryColor2 : "transparent"
 
     MouseArea {
@@ -38,13 +38,13 @@ Rectangle {
         }
 
         Item {
-            width: 5
+            width: Theme.dp(5)
             height: width
         }
 
         StatusBaseText {
             anchors.verticalCenter: parent.verticalCenter
-            font.pixelSize: 13
+            font.pixelSize: Theme.dp(13)
             color: root.enabled ? Theme.palette.primaryColor1 : Theme.palette.baseColor1
             text: root.name
         }
diff --git a/src/StatusQ/Controls/StatusFlatButton.qml b/src/StatusQ/Controls/StatusFlatButton.qml
index 4a64713a..fd5bb121 100644
--- a/src/StatusQ/Controls/StatusFlatButton.qml
+++ b/src/StatusQ/Controls/StatusFlatButton.qml
@@ -16,6 +16,6 @@ StatusBaseButton {
 
     border.color: type === StatusBaseButton.Type.Normal || hovered ? "transparent"
                                                           : Theme.palette.baseColor2
-    rightPadding: icon.name !== "" ? 18 : defaultRightPadding
-    leftPadding: icon.name !== "" ? 14 : defaultLeftPadding
+    rightPadding: icon.name !== "" ? Theme.dp(18) : defaultRightPadding
+    leftPadding: icon.name !== "" ? Theme.dp(14) : defaultLeftPadding
 }
diff --git a/src/StatusQ/Controls/StatusFlatRoundButton.qml b/src/StatusQ/Controls/StatusFlatRoundButton.qml
index f3f12de4..1a8307d1 100644
--- a/src/StatusQ/Controls/StatusFlatRoundButton.qml
+++ b/src/StatusQ/Controls/StatusFlatRoundButton.qml
@@ -8,8 +8,8 @@ Rectangle {
     id: statusFlatRoundButton
 
     property StatusIconSettings icon: StatusIconSettings {
-        width: 23
-        height: 23
+        width: Theme.dp(23)
+        height: Theme.dp(23)
         rotation: 0
 
         color: {
@@ -106,9 +106,9 @@ Rectangle {
         }
     }
 
-    implicitWidth: 44
-    implicitHeight: 44
-    radius: 8
+    implicitWidth: Theme.dp(44)
+    implicitHeight: Theme.dp(44)
+    radius: Theme.dp(8)
 
     color: {
         if (statusFlatRoundButton.enabled) {
diff --git a/src/StatusQ/Controls/StatusFloatingButtonsSelector.qml b/src/StatusQ/Controls/StatusFloatingButtonsSelector.qml
index b4a62f2a..724a4a3c 100644
--- a/src/StatusQ/Controls/StatusFloatingButtonsSelector.qml
+++ b/src/StatusQ/Controls/StatusFloatingButtonsSelector.qml
@@ -85,8 +85,8 @@ Row {
         popupMenu.close()
     }
 
-    height: 32
-    spacing: 12
+    height: Theme.dp(32)
+    spacing: Theme.dp(12)
     clip: true
 
     Repeater {
@@ -97,19 +97,19 @@ Row {
     Rectangle {
         width: button.width
         height: button.height
-        radius: 8
+        radius: Theme.dp(8)
         visible: floatingButtons.model.count > 3
         StatusButton {
             id: button
-            implicitHeight: 32
-            topPadding: 8
+            implicitHeight: Theme.dp(32)
+            topPadding: Theme.dp(8)
             bottomPadding: 0
-            defaultLeftPadding: 4
-            defaultRightPadding: 4
+            defaultLeftPadding: Theme.dp(4)
+            defaultRightPadding: Theme.dp(4)
             normalColor: "transparent"
             icon.name: "more"
             icon.background.color: "transparent"
-            onClicked: popupMenu.popup(parent.x, y + height + 8)
+            onClicked: popupMenu.popup(parent.x, y + height + Theme.dp(8))
         }
     }
 
diff --git a/src/StatusQ/Controls/StatusIconTabButton.qml b/src/StatusQ/Controls/StatusIconTabButton.qml
index c4879c68..d738f6bc 100644
--- a/src/StatusQ/Controls/StatusIconTabButton.qml
+++ b/src/StatusQ/Controls/StatusIconTabButton.qml
@@ -13,11 +13,11 @@ TabButton {
 
     property alias identicon: identicon
 
-    implicitWidth: 40
-    implicitHeight: 40
+    implicitWidth: Theme.dp(40)
+    implicitHeight: Theme.dp(40)
 
-    icon.height: 24
-    icon.width: 24
+    icon.height: Theme.dp(24)
+    icon.width: Theme.dp(24)
     icon.color: Theme.palette.baseColor1
 
     contentItem: Item {
@@ -27,8 +27,8 @@ TabButton {
             anchors.horizontalCenter: parent.horizontalCenter
             anchors.verticalCenter: parent.verticalCenter
             image.source: statusIconTabButton.icon.source
-            image.width: 28
-            image.height: 28
+            image.width: Theme.dp(28)
+            image.height: Theme.dp(28)
             icon.height: statusIconTabButton.icon.height
             icon.width: statusIconTabButton.icon.width
             icon.name: statusIconTabButton.icon.name
@@ -41,7 +41,7 @@ TabButton {
     background: Rectangle {
         color: hovered || highlighted || ((!!icon.source.toString() || !!name) && checked) ? Theme.palette.primaryColor3 : "transparent"
         border.color: Theme.palette.primaryColor1
-        border.width: (!!icon.source.toString() || !!name) && checked ? 1 : 0
+        border.width: (!!icon.source.toString() || !!name) && checked ? Theme.dp(1) : 0
         radius: statusIconTabButton.width / 2
     }
 
diff --git a/src/StatusQ/Controls/StatusIdenticonRing.qml b/src/StatusQ/Controls/StatusIdenticonRing.qml
index a00106ec..f431364c 100644
--- a/src/StatusQ/Controls/StatusIdenticonRing.qml
+++ b/src/StatusQ/Controls/StatusIdenticonRing.qml
@@ -2,6 +2,7 @@ import QtQuick 2.0
 import QtQuick.Layouts 1.0
 
 import StatusQ.Core 0.1
+import StatusQ.Core.Theme 0.1
 /*!
    \qmltype StatusIdenticonRing
    \inherits Item
@@ -59,7 +60,7 @@ Item {
     */
     property StatusIdenticonRingSettings settings: StatusIdenticonRingSettings {
         initalAngleRad: 0
-        ringPxSize: 1.5
+        ringPxSize: Theme.dp(1.5)
     }
 
     visible: settings.ringSpecModel !== undefined
diff --git a/src/StatusQ/Controls/StatusImageCrop.qml b/src/StatusQ/Controls/StatusImageCrop.qml
index 62227151..a8ea4e49 100644
--- a/src/StatusQ/Controls/StatusImageCrop.qml
+++ b/src/StatusQ/Controls/StatusImageCrop.qml
@@ -57,8 +57,8 @@ import StatusQ.Core.Theme 0.1
 Item {
     id: root
 
-    implicitWidth: 400
-    implicitHeight: 400 / aspectRatio
+    implicitWidth: Theme.dp(400)
+    implicitHeight: Theme.dp(400) / aspectRatio
 
     /*!
        \qmlproperty url StatusImageCrop::source
@@ -81,7 +81,7 @@ Item {
         \qmlproperty int StatusImageCrop::radius
         Valid only when windowStyle is Rounded
     */
-    property int radius: 8
+    property int radius: Theme.dp(8)
     /*!
         \qmlproperty color StatusImageCrop::wallColor
         Color used outside the crop-rect. Tells user which part won't be available after cropping
diff --git a/src/StatusQ/Controls/StatusInput.qml b/src/StatusQ/Controls/StatusInput.qml
index 7d4ac87b..944409f9 100644
--- a/src/StatusQ/Controls/StatusInput.qml
+++ b/src/StatusQ/Controls/StatusInput.qml
@@ -99,12 +99,12 @@ Item {
         \qmlproperty real StatusBaseInput::leftPadding
         This property sets the leftComponentLoader's left padding.
     */
-    property real leftPadding: 16
+    property real leftPadding: Theme.dp(16)
     /*!
         \qmlproperty real StatusBaseInput::rightPadding
         This property sets the right padding.
     */
-    property real rightPadding: 16
+    property real rightPadding: Theme.dp(16)
     /*!
         \qmlproperty list StatusBaseInput::validators
         This property sets the list of validators to be considered.
@@ -325,7 +325,7 @@ Item {
                 visible: !!root.label
                 elide: Text.ElideRight
                 text: root.label
-                font.pixelSize: 15
+                font.pixelSize: Theme.dp(15)
                 color: statusBaseInput.enabled ? Theme.palette.directColor1 : Theme.palette.baseColor1
             }
 
@@ -334,7 +334,7 @@ Item {
                 visible: !!root.secondaryLabel
                 elide: Text.ElideRight
                 text: root.secondaryLabel
-                font.pixelSize: 15
+                font.pixelSize: Theme.dp(15)
                 color: Theme.palette.baseColor1
             }
 
@@ -348,7 +348,7 @@ Item {
                 visible: root.charLimit > 0
 
                 text: "%1 / %2".arg(statusBaseInput.text.length).arg(root.charLimit)
-                font.pixelSize: 12
+                font.pixelSize: Theme.dp(12)
                 color: statusBaseInput.enabled ? Theme.palette.baseColor1 : Theme.palette.directColor6
             }
         }
@@ -377,7 +377,7 @@ Item {
 
             visible: !!text && !statusBaseInput.valid
 
-            font.pixelSize: 12
+            font.pixelSize: Theme.dp(12)
             color: Theme.palette.dangerColor1
 
             horizontalAlignment: Text.AlignRight
diff --git a/src/StatusQ/Controls/StatusItemPicker.qml b/src/StatusQ/Controls/StatusItemPicker.qml
index 4267401c..8e8a1624 100644
--- a/src/StatusQ/Controls/StatusItemPicker.qml
+++ b/src/StatusQ/Controls/StatusItemPicker.qml
@@ -95,7 +95,7 @@ Rectangle {
     QtObject {
         id: d
 
-        property int minShortNameWidth: 50
+        property int minShortNameWidth: Theme.dp(50)
 
         function availableTextWidth() {
              return root.width - imageItem.width - row.spacing - shortNameItem.anchors.rightMargin - selector.width - selector.anchors.rightMargin - 24/*Margin between both texts*/
@@ -105,9 +105,9 @@ Rectangle {
     Row {
         id: row
         anchors.left: parent.left
-        anchors.leftMargin: 18
+        anchors.leftMargin: Theme.dp(18)
         anchors.verticalCenter: parent.verticalCenter
-        spacing: 8
+        spacing: Theme.dp(8)
 
         StatusIcon {
             id: imageItem
@@ -126,7 +126,7 @@ Rectangle {
                    dummyNameItem.width
             text: root.name
             color: Theme.palette.directColor1
-            font.pixelSize: 15
+            font.pixelSize: Theme.dp(15)
             clip: true
             elide: Text.ElideRight
         }
@@ -135,7 +135,7 @@ Rectangle {
             id: dummyNameItem
             visible: false
             text: root.name
-            font.pixelSize: 15
+            font.pixelSize: Theme.dp(15)
         }
     }
 
@@ -145,11 +145,11 @@ Rectangle {
                d.minShortNameWidth :
                d.availableTextWidth() - nameItem.width
         anchors.right: selector.left
-        anchors.rightMargin: 10
+        anchors.rightMargin: Theme.dp(10)
         anchors.verticalCenter: parent.verticalCenter
         text: root.shortName
         color: Theme.palette.baseColor1
-        font.pixelSize: 15
+        font.pixelSize: Theme.dp(15)
         clip: true
         elide: Text.ElideRight
         horizontalAlignment: Text.AlignRight
@@ -160,7 +160,7 @@ Rectangle {
         id: selector
         anchors.right: parent.right
         anchors.verticalCenter: parent.verticalCenter
-        anchors.rightMargin: 18
+        anchors.rightMargin: Theme.dp(18)
         sourceComponent: root.selectorType === StatusItemPicker.SelectorType.RadioButton ? radioBtn : checkbox
     }
 
diff --git a/src/StatusQ/Controls/StatusLabeledSlider.qml b/src/StatusQ/Controls/StatusLabeledSlider.qml
index 9a93e232..1d492b52 100644
--- a/src/StatusQ/Controls/StatusLabeledSlider.qml
+++ b/src/StatusQ/Controls/StatusLabeledSlider.qml
@@ -10,12 +10,12 @@ StatusSlider {
     id: root
 
     property var model: []
-    property int fontSize: 12
-    property int labelMargin: 2
+    property int fontSize: Theme.dp(12)
+    property int labelMargin: Theme.dp(2)
 
     fillColor: bgColor
     handleColor: Theme.palette.primaryColor1
-    handleSize: 14
+    handleSize: Theme.dp(14)
     from: 0
     to: model.length - 1
     stepSize: 1
@@ -36,7 +36,7 @@ StatusSlider {
                 radius: root.handleSize / 2
                 color: root.bgColor
                 border.color: Theme.palette.statusAppLayout.backgroundColor
-                border.width: 2
+                border.width: Theme.dp(2)
 
                 StatusBaseText {
                     anchors.top: parent.bottom
diff --git a/src/StatusQ/Controls/StatusNavBarTabButton.qml b/src/StatusQ/Controls/StatusNavBarTabButton.qml
index 3d8d91c0..493e2376 100644
--- a/src/StatusQ/Controls/StatusNavBarTabButton.qml
+++ b/src/StatusQ/Controls/StatusNavBarTabButton.qml
@@ -2,6 +2,7 @@ import QtQuick 2.13
 import StatusQ.Components 0.1
 import StatusQ.Controls 0.1
 import StatusQ.Popups 0.1
+import StatusQ.Core.Theme 0.1
     
 StatusIconTabButton {
     id: statusNavBarTabButton 
@@ -22,8 +23,8 @@ StatusIconTabButton {
         visible: statusNavBarTabButton.hovered && !!statusTooltip.text
         delay: 50
         orientation: StatusToolTip.Orientation.Right
-        x: statusNavBarTabButton.width + 16
-        y: statusNavBarTabButton.height / 2 - height / 2 + 4
+        x: statusNavBarTabButton.width + Theme.dp(16)
+        y: statusNavBarTabButton.height / 2 - height / 2 + Theme.dp(4)
     }
 
     StatusBadge {
@@ -32,15 +33,15 @@ StatusIconTabButton {
         anchors.top: parent.top
         anchors.left: parent.right
         anchors.leftMargin: {
-            if (statusBadge.value > 99) {
-                return -22
+            if (statusBadge.value > Theme.dp(99)) {
+                return -Theme.dp(22)
             }
-            if (statusBadge.value > 9) {
-                return -21
+            if (statusBadge.value > Theme.dp(9)) {
+                return -Theme.dp(21)
             }
-            return -18
+            return -Theme.dp(18)
         }
-        anchors.topMargin: 4
+        anchors.topMargin: Theme.dp(4)
     }
 
     MouseArea {
diff --git a/src/StatusQ/Controls/StatusPickerButton.qml b/src/StatusQ/Controls/StatusPickerButton.qml
index c8f4691f..c17f737e 100644
--- a/src/StatusQ/Controls/StatusPickerButton.qml
+++ b/src/StatusQ/Controls/StatusPickerButton.qml
@@ -6,14 +6,14 @@ import StatusQ.Core.Theme 0.1
 
 Button {
     id: root
-    implicitWidth: 446
-    implicitHeight: 44
+    implicitWidth: Theme.dp(446)
+    implicitHeight: Theme.dp(44)
 
     property color bgColor: Theme.palette.baseColor2
     property color contentColor: Theme.palette.baseColor1
     property var type: StatusPickerButton.Type.Next
-    property int lateralMargins: 16
-    property int textPixelSize: 15
+    property int lateralMargins: Theme.dp(16)
+    property int textPixelSize: Theme.dp(15)
 
     enum Type {
         Next,
@@ -25,7 +25,7 @@ Button {
         Rectangle {
             id: background
             anchors.fill: parent
-            radius: 8
+            radius: Theme.dp(8)
             color: root.bgColor
         }   
     }
diff --git a/src/StatusQ/Controls/StatusPinInput.qml b/src/StatusQ/Controls/StatusPinInput.qml
index bd6185e2..dd0d0074 100644
--- a/src/StatusQ/Controls/StatusPinInput.qml
+++ b/src/StatusQ/Controls/StatusPinInput.qml
@@ -69,13 +69,13 @@ Item {
        \qmlproperty int StatusPinInput::circleSpacing
        This property allows you to customize spacing between pin circles. The default value is 16 pixels.
     */
-    property int circleSpacing: 16
+    property int circleSpacing: Theme.dp(16)
 
     /*!
        \qmlproperty int StatusPinInput::circleDiameter
        This property allows you to customize pin circle diameter. The default value is 16 pixels.
     */
-    property int circleDiameter: 16
+    property int circleDiameter: Theme.dp(16)
 
     QtObject {
         id: d
diff --git a/src/StatusQ/Controls/StatusProgressBar.qml b/src/StatusQ/Controls/StatusProgressBar.qml
index 93ed55aa..6f16b541 100644
--- a/src/StatusQ/Controls/StatusProgressBar.qml
+++ b/src/StatusQ/Controls/StatusProgressBar.qml
@@ -12,8 +12,8 @@ ProgressBar {
     property color backgroundColor: Theme.palette.directColor8
     property color backgroundBorderColor: "transparent"
 
-    width: 416
-    height: 16
+    width: Theme.dp(416)
+    height: Theme.dp(16)
     clip: true
 
     background: Rectangle {
@@ -21,7 +21,7 @@ ProgressBar {
         implicitHeight: parent.height
         color: control.backgroundColor
         border.color: control.backgroundBorderColor
-        radius: 5
+        radius: Theme.dp(5)
     }
     contentItem: Item {
         implicitHeight: parent.height
@@ -31,14 +31,14 @@ ProgressBar {
             width: control.visualPosition * parent.width
             height: parent.height
             color: control.fillColor
-            radius: 5
+            radius: Theme.dp(5)
 
             StatusBaseText {
                 id: textItem
                 anchors.centerIn: parent
                 property bool _fittedInBar: width < bar.width ? true : false
                 text: control.text
-                font.pixelSize: 12
+                font.pixelSize: Theme.dp(12)
                 color: Theme.palette.indirectColor1
                 Component.onCompleted: opacity = width < bar.width ? 1 : 0
                 on_FittedInBarChanged: {
diff --git a/src/StatusQ/Controls/StatusRadioButton.qml b/src/StatusQ/Controls/StatusRadioButton.qml
index 95a3b5cd..dcc4b11b 100644
--- a/src/StatusQ/Controls/StatusRadioButton.qml
+++ b/src/StatusQ/Controls/StatusRadioButton.qml
@@ -13,18 +13,18 @@ RadioButton {
     width: indicator.implicitWidth
 
     indicator: Rectangle {
-        implicitWidth: 20
-        implicitHeight: 20
+        implicitWidth: Theme.dp(20)
+        implicitHeight: Theme.dp(20)
         x: 0
         y: 6
-        radius: 10
+        radius: Theme.dp(10)
         color: statusRadioButton.checked ? Theme.palette.primaryColor1
                                          : Theme.palette.directColor8
 
         Rectangle {
-            width: 12
-            height: 12
-            radius: 6
+            width: Theme.dp(12)
+            height: Theme.dp(12)
+            radius: Theme.dp(6)
             anchors.horizontalCenter: parent.horizontalCenter
             anchors.verticalCenter: parent.verticalCenter
             color: statusRadioButton.checked ? Theme.palette.white : "transparent"
diff --git a/src/StatusQ/Controls/StatusRoundButton.qml b/src/StatusQ/Controls/StatusRoundButton.qml
index 51dca636..9e033aab 100644
--- a/src/StatusQ/Controls/StatusRoundButton.qml
+++ b/src/StatusQ/Controls/StatusRoundButton.qml
@@ -8,8 +8,8 @@ Rectangle {
     id: statusRoundButton
 
     property StatusIconSettings icon: StatusIconSettings {
-        width: 23
-        height: 23
+        width: Theme.dp(23)
+        height: Theme.dp(23)
         rotation: 0
 
         property color hoverColor: {
@@ -110,8 +110,8 @@ Rectangle {
                                                                                                                                    statusRoundButton.icon.color
     }
 
-    implicitWidth: 44
-    implicitHeight: 44
+    implicitWidth: Theme.dp(44)
+    implicitHeight: Theme.dp(44)
     radius: width / 2;
 
     color: {
diff --git a/src/StatusQ/Controls/StatusSeedPhraseInput.qml b/src/StatusQ/Controls/StatusSeedPhraseInput.qml
index a41cef02..1bc53a46 100644
--- a/src/StatusQ/Controls/StatusSeedPhraseInput.qml
+++ b/src/StatusQ/Controls/StatusSeedPhraseInput.qml
@@ -47,8 +47,8 @@ import StatusQ.Core.Theme 0.1
 
 Item {
     id: root
-    width: 162
-    height: 44
+    width: Theme.dp(162)
+    height: Theme.dp(44)
     /*!
         \qmlproperty alias StatusSeedPhraseInput::textEdit
         This property is an alias to the StatusInput's textEdit property.
@@ -118,7 +118,7 @@ Item {
             text: root.leftComponentText
             color: seedWordInput.input.edit.activeFocus ?
                    Theme.palette.primaryColor1 : Theme.palette.baseColor1
-            font.pixelSize: 15
+            font.pixelSize: Theme.dp(15)
         }
         input.acceptReturn: true
         onTextChanged: {
@@ -170,24 +170,24 @@ Item {
     Item {
         id: suggListContainer
         width: seedSuggestionsList.width
-        height: (((seedSuggestionsList.count <= 5) ? seedSuggestionsList.count : 5) *34) + 16
+        height: Theme.dp((((seedSuggestionsList.count <= 5) ? seedSuggestionsList.count : 5) *34) + 16)
         anchors.left: parent.left
-        anchors.leftMargin: 16
+        anchors.leftMargin: Theme.dp(16)
         anchors.top: seedWordInput.bottom
-        anchors.topMargin: 4
+        anchors.topMargin: Theme.dp(4)
         visible: ((seedSuggestionsList.count > 0) && seedWordInput.input.edit.activeFocus)
         Rectangle {
             id: statusPopupMenuBackgroundContent
             anchors.fill: parent
             color: Theme.palette.statusPopupMenu.backgroundColor
-            radius: 8
+            radius: Theme.dp(8)
             layer.enabled: true
             layer.effect: DropShadow {
                 anchors.fill: parent
                 source: statusPopupMenuBackgroundContent
                 horizontalOffset: 0
-                verticalOffset: 4
-                radius: 12
+                verticalOffset: Theme.dp(4)
+                radius: Theme.dp(12)
                 samples: 25
                 spread: 0.2
                 color: Theme.palette.dropShadow
@@ -195,12 +195,12 @@ Item {
         }
         ListView {
             id: seedSuggestionsList
-            width: ((seedSuggestionsList.contentItem.childrenRect.width + 24) > root.width) ? root.width
-                    : (seedSuggestionsList.contentItem.childrenRect.width + 24)
+            width: ((seedSuggestionsList.contentItem.childrenRect.width + Theme.dp(24)) > root.width) ? root.width
+                    : (seedSuggestionsList.contentItem.childrenRect.width + Theme.dp(24))
             anchors.top: parent.top
-            anchors.topMargin: 8
+            anchors.topMargin: Theme.dp(8)
             anchors.bottom: parent.bottom
-            anchors.bottomMargin: 8
+            anchors.bottomMargin: Theme.dp(8)
 
             onCountChanged: {
                 seedSuggestionsList.currentIndex = 0
@@ -219,7 +219,7 @@ Item {
             delegate: Item {
                 id: txtDelegate
                 width: suggWord.contentWidth
-                height: 34
+                height: Theme.dp(34)
                 Rectangle {
                     width: seedSuggestionsList.width
                     height: parent.height
@@ -229,11 +229,11 @@ Item {
                 StatusBaseText {
                     id: suggWord
                     anchors.left: parent.left
-                    anchors.leftMargin: 14
+                    anchors.leftMargin: Theme.dp(14)
                     anchors.verticalCenter: parent.verticalCenter
                     text: seedWord
                     color: mouseArea.containsMouse || index === seedSuggestionsList.currentIndex ? Theme.palette.indirectColor1 : Theme.palette.directColor1
-                    font.pixelSize: 13
+                    font.pixelSize: Theme.dp(13)
                     elide: Text.ElideRight
                 }
                 MouseArea {
diff --git a/src/StatusQ/Controls/StatusSelect.qml b/src/StatusQ/Controls/StatusSelect.qml
index 61b298da..08f3409d 100644
--- a/src/StatusQ/Controls/StatusSelect.qml
+++ b/src/StatusQ/Controls/StatusSelect.qml
@@ -16,19 +16,19 @@ Item {
     property string label: ""
     readonly property bool hasLabel: label !== ""
     property color bgColor: Theme.palette.baseColor2
-    readonly property int labelMargin: 7
+    readonly property int labelMargin: Theme.dp(7)
     property var model
     property alias selectMenu: selectMenu
     property color bgColorHover: bgColor
     property alias selectedItemComponent: selectedItemContainer.children
-    property int caretRightMargin: 16
+    property int caretRightMargin: Theme.dp(16)
     property alias select: inputRectangle
     property int menuAlignment: StatusSelect.MenuAlignment.Right
     property Item zeroItemsView: Item {}
     property string validationError: ""
     property alias validationErrorAlignment: validationErrorText.horizontalAlignment
-    property int validationErrorTopMargin: 11
-    implicitWidth: 448
+    property int validationErrorTopMargin: Theme.dp(11)
+    implicitWidth: Theme.dp(448)
 
     id: root
     height: inputRectangle.height + (hasLabel ? inputLabel.height + labelMargin : 0) + (!!validationError ? (validationErrorText.height + validationErrorTopMargin) : 0)
@@ -41,21 +41,21 @@ Item {
         anchors.leftMargin: 0
         anchors.top: parent.top
         anchors.topMargin: 0
-        font.pixelSize: 15
+        font.pixelSize: Theme.dp(15)
         color: root.enabled ? Theme.palette.directColor1 : Theme.palette.baseColor1
     }
 
     Rectangle {
         property bool hovered: false
         id: inputRectangle
-        height: 56
+        height: Theme.dp(56)
         color: hovered ? bgColorHover : bgColor
-        radius: 8
+        radius: Theme.dp(8)
         anchors.top: root.hasLabel ? inputLabel.bottom : parent.top
         anchors.topMargin: root.hasLabel ? root.labelMargin : 0
         anchors.right: parent.right
         anchors.left: parent.left
-        border.width: !!validationError ? 1 : 0
+        border.width: !!validationError ? Theme.dp(1) : 0
         border.color: Theme.palette.dangerColor1
 
         Item {
@@ -68,8 +68,8 @@ Item {
             anchors.right: parent.right
             anchors.rightMargin: caretRightMargin
             anchors.verticalCenter: parent.verticalCenter
-            width: 24
-            height: 24
+            width: Theme.dp(24)
+            height: Theme.dp(24)
             icon: "chevron-down"
             color: Theme.palette.baseColor1
         }
@@ -82,12 +82,12 @@ Item {
         y: selectMenu.y
         visible: selectMenu.opened
         color: Theme.palette.statusSelect.menuItemBackgroundColor
-        radius: 8
+        radius: Theme.dp(8)
         border.color: Theme.palette.baseColor2
         layer.enabled: true
         layer.effect: DropShadow {
-            verticalOffset: 3
-            radius: 8
+            verticalOffset: Theme.dp(3)
+            radius: Theme.dp(8)
             samples: 15
             fast: true
             cached: true
@@ -133,7 +133,7 @@ Item {
         anchors.topMargin: validationErrorTopMargin
         anchors.right: parent.right
         anchors.left: parent.left
-        font.pixelSize: 12
+        font.pixelSize: Theme.dp(12)
         height: visible ? implicitHeight : 0
         color: Theme.palette.dangerColor1
         horizontalAlignment: TextEdit.AlignRight
diff --git a/src/StatusQ/Controls/StatusSelectableText.qml b/src/StatusQ/Controls/StatusSelectableText.qml
index d5a65765..ae0404e7 100644
--- a/src/StatusQ/Controls/StatusSelectableText.qml
+++ b/src/StatusQ/Controls/StatusSelectableText.qml
@@ -79,7 +79,7 @@ Item {
                 selectionColor: Theme.palette.primaryColor2
                 selectedTextColor: color
                 focus: true
-                font.pixelSize: 15
+                font.pixelSize: Theme.dp(15)
                 font.family: Theme.palette.baseFont.name
                 color: Theme.palette.directColor1
                 textFormat: Text.RichText
diff --git a/src/StatusQ/Controls/StatusSlider.qml b/src/StatusQ/Controls/StatusSlider.qml
index e5811317..621d2730 100644
--- a/src/StatusQ/Controls/StatusSlider.qml
+++ b/src/StatusQ/Controls/StatusSlider.qml
@@ -13,15 +13,15 @@ import StatusQ.Controls 0.1
 Slider {
     id: root
 
-    property int handleSize: 28
-    property int bgHeight: 4
+    property int handleSize: Theme.dp(28)
+    property int bgHeight: Theme.dp(4)
     property color handleColor: Theme.palette.white
     property color bgColor: Theme.palette.baseColor2
     property color fillColor: Theme.palette.primaryColor1
 
     property alias decoration: decorationContainer.sourceComponent
 
-    implicitWidth: 360
+    implicitWidth: Theme.dp(360)
     implicitHeight: Math.max(handle.implicitHeight,
                              background.implicitHeight + decorationContainer.height)
 
@@ -32,12 +32,12 @@ Slider {
 
         x: root.leftPadding
         y: root.topPadding
-        implicitWidth: 100
+        implicitWidth: Theme.dp(100)
         implicitHeight: bgHeight
         width: root.availableWidth
         height: implicitHeight
         color: root.bgColor
-        radius: 2
+        radius: Theme.dp(2)
 
         Loader {
             id: decorationContainer
@@ -49,7 +49,7 @@ Slider {
             width: root.visualPosition * parent.width
             height: parent.height
             color: root.fillColor
-            radius: 2
+            radius: Theme.dp(2)
         }
     } // background
 
@@ -65,7 +65,7 @@ Slider {
             width: parent.width
             height: parent.height
             visible: true
-            verticalOffset: 2
+            verticalOffset: Theme.dp(2)
             samples: 15
             fast: true
             cached: true
diff --git a/src/StatusQ/Controls/StatusSwitch.qml b/src/StatusQ/Controls/StatusSwitch.qml
index 370b8d87..cd80134d 100644
--- a/src/StatusQ/Controls/StatusSwitch.qml
+++ b/src/StatusQ/Controls/StatusSwitch.qml
@@ -10,8 +10,8 @@ Switch {
 
     indicator: Rectangle {
         id: oval
-        implicitWidth: 52
-        implicitHeight: 28
+        implicitWidth: Theme.dp(52)
+        implicitHeight: Theme.dp(28)
         x: statusSwitch.leftPadding
         y: parent.height / 2 - height / 2
         radius: 14
@@ -21,17 +21,17 @@ Switch {
 
         Rectangle {
             id: circle
-            y: 4
-            width: 20
-            height: 20
-            radius: 10
+            y: Theme.dp(4)
+            width: Theme.dp(20)
+            height: Theme.dp(20)
+            radius: Theme.dp(10)
             color: Theme.palette.white
             layer.enabled: true
             layer.effect: DropShadow {
                 width: parent.width
                 height: parent.height
                 visible: true
-                verticalOffset: 1
+                verticalOffset: Theme.dp(1)
                 fast: true
                 cached: true
                 color: Theme.palette.dropShadow
diff --git a/src/StatusQ/Controls/StatusSwitchTabBar.qml b/src/StatusQ/Controls/StatusSwitchTabBar.qml
index f58b01fa..b66ddf09 100644
--- a/src/StatusQ/Controls/StatusSwitchTabBar.qml
+++ b/src/StatusQ/Controls/StatusSwitchTabBar.qml
@@ -4,11 +4,11 @@ import StatusQ.Core.Theme 0.1
 
 TabBar {
     id: statusSwitchTabBar
-    padding: 1
+    padding: Theme.dp(1)
 
     background: Rectangle {
-        implicitHeight: 36
+        implicitHeight: Theme.dp(36)
         color: Theme.palette.statusSwitchTab.barBackgroundColor
-        radius: 8
+        radius: Theme.dp(8)
     }
 }
diff --git a/src/StatusQ/Controls/StatusSwitchTabButton.qml b/src/StatusQ/Controls/StatusSwitchTabButton.qml
index dfc215a6..3b8ca96c 100644
--- a/src/StatusQ/Controls/StatusSwitchTabButton.qml
+++ b/src/StatusQ/Controls/StatusSwitchTabButton.qml
@@ -9,7 +9,7 @@ TabButton {
     id: statusSwitchTabButton
 
     contentItem: Item {
-        height: 36
+        height: Theme.dp(36)
         MouseArea {
             id: sensor
             hoverEnabled: true
@@ -26,7 +26,7 @@ TabButton {
                     Theme.palette.statusSwitchTab.selectedTextColor :
                     Theme.palette.statusSwitchTab.textColor
                 font.weight: Font.Medium
-                font.pixelSize: 15
+                font.pixelSize: Theme.dp(15)
                 horizontalAlignment: Text.AlignHCenter
                 anchors.centerIn: parent
             }
@@ -35,17 +35,17 @@ TabButton {
 
     background: Rectangle {
         id: controlBackground
-        implicitHeight: 36
-        implicitWidth: 148
+        implicitHeight: Theme.dp(36)
+        implicitWidth: Theme.dp(148)
         color: statusSwitchTabButton.checked ?
             Theme.palette.statusSwitchTab.buttonBackgroundColor :
             "transparent"
-        radius: 8
+        radius: Theme.dp(8)
         layer.enabled: true
         layer.effect: DropShadow {
             horizontalOffset: 0
             verticalOffset: 0
-            radius: 10
+            radius: Theme.dp(10)
             samples: 25
             spread: 0
             color: Theme.palette.dropShadow
diff --git a/src/StatusQ/Controls/StatusTabBarIconButton.qml b/src/StatusQ/Controls/StatusTabBarIconButton.qml
index a2012784..05e717b7 100644
--- a/src/StatusQ/Controls/StatusTabBarIconButton.qml
+++ b/src/StatusQ/Controls/StatusTabBarIconButton.qml
@@ -17,8 +17,8 @@ Item {
 
     signal clicked(var mouse)
 
-    implicitWidth: 40
-    implicitHeight: 40
+    implicitWidth: Theme.dp(40)
+    implicitHeight: Theme.dp(40)
 
     MouseArea {
         id: sensor
@@ -43,8 +43,8 @@ Item {
             visible: root.highlighted || sensor.containsMouse
             width: statusIcon.width
             anchors.horizontalCenter: parent.horizontalCenter
-            height: 2
-            radius: 1
+            height: Theme.dp(2)
+            radius: Theme.dp(1)
             color: Theme.palette.primaryColor1
             anchors.bottom: parent.bottom
         }
diff --git a/src/StatusQ/Controls/StatusTabButton.qml b/src/StatusQ/Controls/StatusTabButton.qml
index 6bdc1848..991e49cc 100644
--- a/src/StatusQ/Controls/StatusTabButton.qml
+++ b/src/StatusQ/Controls/StatusTabButton.qml
@@ -27,8 +27,8 @@ TabButton {
 
     property alias badge: statusBadge
 
-    leftPadding: 12
-    rightPadding: 12
+    leftPadding: Theme.dp(12)
+    rightPadding: Theme.dp(12)
 
     background: Item { }
 
@@ -51,14 +51,14 @@ TabButton {
                 Layout.fillWidth: true
                 elide: Qt.ElideRight
                 font.weight: Font.Medium
-                font.pixelSize: 15
+                font.pixelSize: Theme.dp(15)
                 color: root.checked || root.hovered ? Theme.palette.directColor1 : Theme.palette.baseColor1
                 text: root.text
             }
 
             StatusBadge {
                 id: statusBadge
-                Layout.leftMargin: 10
+                Layout.leftMargin: Theme.dp(10)
                 visible: value > 0
             }
         }
@@ -67,9 +67,9 @@ TabButton {
             anchors.bottom: parent.bottom
             anchors.horizontalCenter: parent.horizontalCenter
             visible: root.enabled && (root.checked || root.hovered)
-            implicitWidth: 24
-            implicitHeight: 2
-            radius: 4
+            implicitWidth: Theme.dp(24)
+            implicitHeight: Theme.dp(2)
+            radius: Theme.dp(4)
             color: root.checked ? Theme.palette.primaryColor1 : Theme.palette.primaryColor2
         }
     }
diff --git a/src/StatusQ/Controls/StatusTagItem.qml b/src/StatusQ/Controls/StatusTagItem.qml
index ff6c7658..2e9b9059 100644
--- a/src/StatusQ/Controls/StatusTagItem.qml
+++ b/src/StatusQ/Controls/StatusTagItem.qml
@@ -53,8 +53,8 @@ Rectangle {
 
     QtObject {
         id: d
-        property int tagMargins: 8
-        property int tagIconsSize: 20
+        property int tagMargins: Theme.dp(8)
+        property int tagIconsSize: Theme.dp(20)
 
         function getTagColor(isReadonly) {
             if(isReadonly) {
@@ -67,16 +67,16 @@ Rectangle {
     }
 
     width: tagRow.implicitWidth + 2 * d.tagMargins
-    height: 30
+    height: Theme.dp(30)
     color: d.getTagColor(root.isReadonly)
-    radius: 8
+    radius: Theme.dp(8)
     Row {
         id: tagRow
         height: parent.height
         anchors.left: parent.left
         anchors.leftMargin: d.tagMargins
         anchors.rightMargin: d.tagMargins
-        spacing: 2
+        spacing: Theme.dp(2)
 
         StatusIcon {
             visible: root.icon
@@ -90,7 +90,7 @@ Rectangle {
             id: nameText
             anchors.verticalCenter: parent.verticalCenter
             color: Theme.palette.indirectColor1
-            font.pixelSize: 15
+            font.pixelSize: Theme.dp(15)
             text: root.text
         }
         StatusIcon {
diff --git a/src/StatusQ/Controls/StatusTokenInlineSelector.qml b/src/StatusQ/Controls/StatusTokenInlineSelector.qml
index 650066bd..0fbe624a 100644
--- a/src/StatusQ/Controls/StatusTokenInlineSelector.qml
+++ b/src/StatusQ/Controls/StatusTokenInlineSelector.qml
@@ -44,7 +44,7 @@ RowLayout {
     StatusBaseText {
         text: qsTr("Hold")
         color: Theme.palette.directColor6
-        font.pixelSize: 15
+        font.pixelSize: Theme.dp(15)
     }
 
     Repeater {
@@ -58,7 +58,7 @@ RowLayout {
     StatusBaseText {
         text: qsTr("or")
         color: Theme.palette.directColor6
-        font.pixelSize: 15
+        font.pixelSize: Theme.dp(15)
     }
 
     Loader {
@@ -73,7 +73,7 @@ RowLayout {
     StatusBaseText {
         text: qsTr("to post")
         color: Theme.palette.directColor6
-        font.pixelSize: 15
+        font.pixelSize: Theme.dp(15)
     }
 
     QtObject {
@@ -99,8 +99,8 @@ RowLayout {
             property color hoverColor
             property color textColor
 
-            width: content.width + 4
-            height: content.height + 4
+            width: content.width + Theme.dp(4)
+            height: content.height + Theme.dp(4)
 
             radius: height/2
 
@@ -118,8 +118,8 @@ RowLayout {
 
                 StatusRoundedImage {
                     id: roundedImage
-                    Layout.maximumHeight: text.height + 2
-                    Layout.maximumWidth: text.height + 2
+                    Layout.maximumHeight: text.height + Theme.dp(2)
+                    Layout.maximumWidth: text.height + Theme.dp(2)
                     image.source: tokenImageSource
                 }
 
@@ -127,11 +127,11 @@ RowLayout {
                     id: text
                     text: amount + " " + token
                     color: textColor
-                    font.pixelSize: 15
+                    font.pixelSize: Theme.dp(15)
                 }
 
                 Item {
-                    implicitWidth: 2
+                    implicitWidth: Theme.dp(2)
                 }
             }
 
diff --git a/src/StatusQ/Controls/StatusToolTip.qml b/src/StatusQ/Controls/StatusToolTip.qml
index 3c40779d..6401b126 100644
--- a/src/StatusQ/Controls/StatusToolTip.qml
+++ b/src/StatusQ/Controls/StatusToolTip.qml
@@ -13,50 +13,50 @@ ToolTip {
         Right
     }
 
-    property int maxWidth: 800
+    property int maxWidth: Theme.dp(800)
     property int orientation: StatusToolTip.Orientation.Top
     property int offset: 0
     property alias arrow: arrow
 
     implicitWidth: Math.min(maxWidth, textContent.implicitWidth + 16)
-    leftPadding: 8
-    rightPadding: 8
-    topPadding: 8
-    bottomPadding: 8
+    leftPadding: Theme.dp(8)
+    rightPadding: Theme.dp(8)
+    topPadding: Theme.dp(8)
+    bottomPadding: Theme.dp(8)
     delay: 200
     background: Item {
         id: statusToolTipBackground
         Rectangle {
             id: statusToolTipContentBackground
             color: Theme.palette.black
-            radius: 8
+            radius: Theme.dp(8)
             anchors.fill: parent
-            anchors.bottomMargin: 8
+            anchors.bottomMargin: Theme.dp(8)
         }
         Rectangle {
             id: arrow
             color: statusToolTipContentBackground.color
-            height: 20
-            width: 20
+            height: Theme.dp(20)
+            width: Theme.dp(20)
             rotation: 45
-            radius: 1
+            radius: Theme.dp(1)
             x: {
                 if (orientation === StatusToolTip.Orientation.Top || orientation === StatusToolTip.Orientation.Bottom) {
                     return statusToolTipBackground.width / 2 - width / 2 + offset
                 }
                 if (orientation === StatusToolTip.Orientation.Left) {
-                    return statusToolTipContentBackground.width - (width / 2) - 8 + offset
+                    return statusToolTipContentBackground.width - (width / 2) - Theme.dp(8) + offset
                 }
                 if (orientation === StatusToolTip.Orientation.Right) {
-                    return -width/2 + 8 + offset
+                    return -width/2 + Theme.dp(8) + offset
                 }
             }
             y: {
                 if (orientation === StatusToolTip.Orientation.Bottom) {
-                    return -height / 2 + 5
+                    return -height / 2 + Theme.dp(5)
                 }
                 if (orientation === StatusToolTip.Orientation.Top) {
-                    return statusToolTipBackground.height - height - 5
+                    return statusToolTipBackground.height - height - Theme.dp(5)
                 }
                 if (orientation === StatusToolTip.Orientation.Left || orientation === StatusToolTip.Orientation.Right) {
                     return statusToolTipContentBackground.height / 2 - (height / 2)
@@ -69,10 +69,10 @@ ToolTip {
         text: statusToolTip.text
         color: Theme.palette.white
         wrapMode: Text.WordWrap
-        font.pixelSize: 13
+        font.pixelSize: Theme.dp(13)
         font.weight: Font.Medium
         horizontalAlignment: Text.AlignHCenter
-        bottomPadding: 8
+        bottomPadding: Theme.dp(8)
     }
 }
 
diff --git a/src/StatusQ/Controls/StatusWalletColorButton.qml b/src/StatusQ/Controls/StatusWalletColorButton.qml
index a65266ad..330d5682 100644
--- a/src/StatusQ/Controls/StatusWalletColorButton.qml
+++ b/src/StatusQ/Controls/StatusWalletColorButton.qml
@@ -9,28 +9,28 @@ StatusFlatRoundButton {
     id: control
     property bool selected: false
     icon.name: "filled-account"
-    icon.width: 36
-    icon.height: 36
+    icon.width: Theme.dp(36)
+    icon.height: Theme.dp(36)
     Rectangle {
         anchors.fill: parent
         color: control.hovered ? control.icon.color : "transparent"
         opacity: 0.1
-        radius: 8
+        radius: Theme.dp(8)
     }
 
     Rectangle {
-        width: 16
-        height: 16
+        width: Theme.dp(16)
+        height: Theme.dp(16)
         anchors.top: parent.top
-        anchors.topMargin: 2
+        anchors.topMargin: Theme.dp(2)
         anchors.right: parent.right
-        anchors.rightMargin: 2
+        anchors.rightMargin: Theme.dp(2)
         visible: control.selected
         radius: width / 2
         color: Theme.palette.successColor1
         StatusIcon {
             icon: "tiny/checkmark"
-            height: 12
+            height: Theme.dp(12)
             color: Theme.palette.white
             anchors.horizontalCenter: parent.horizontalCenter
             anchors.verticalCenter: parent.verticalCenter
diff --git a/src/StatusQ/Controls/StatusWalletColorSelect.qml b/src/StatusQ/Controls/StatusWalletColorSelect.qml
index 9003e2a0..69dc40e0 100644
--- a/src/StatusQ/Controls/StatusWalletColorSelect.qml
+++ b/src/StatusQ/Controls/StatusWalletColorSelect.qml
@@ -15,22 +15,22 @@ Item {
     property bool enabled: true
 
     height: childrenRect.height
-    implicitWidth: 480
+    implicitWidth: Theme.dp(480)
 
     StatusBaseText {
         id: label
         text: control.label
         anchors.left: parent.left
         anchors.top: parent.top
-        font.pixelSize: 15
+        font.pixelSize: Theme.dp(15)
         color: control.enabled ? Theme.palette.directColor1 : Theme.palette.baseColor1
     }
 
     RowLayout {
         id: colors
-        spacing: 6
+        spacing: Theme.dp(6)
         anchors.top: label.bottom
-        anchors.topMargin: 8
+        anchors.topMargin: Theme.dp(8)
         anchors.left: parent.left
         anchors.right: parent.right
         Repeater {
diff --git a/src/StatusQ/Core/StatusIcon.qml b/src/StatusQ/Core/StatusIcon.qml
index bee2eb50..4ca0debc 100644
--- a/src/StatusQ/Core/StatusIcon.qml
+++ b/src/StatusQ/Core/StatusIcon.qml
@@ -1,5 +1,6 @@
 import QtQuick 2.13
 import QtGraphicalEffects 1.13
+import StatusQ.Core.Theme 0.1
 
 Image {
     property string icon: ""
diff --git a/src/StatusQ/Core/StatusIconSettings.qml b/src/StatusQ/Core/StatusIconSettings.qml
index ac12ce55..ac108c56 100644
--- a/src/StatusQ/Core/StatusIconSettings.qml
+++ b/src/StatusQ/Core/StatusIconSettings.qml
@@ -1,5 +1,6 @@
 import QtQuick 2.13
 import StatusQ.Core 0.1
+import StatusQ.Core.Theme 0.1
 
 QtObject {
     id: root
@@ -12,14 +13,14 @@ QtObject {
     property url source
     property int rotation
     property bool isLetterIdenticon
-    property int letterSize: emoji ? 11 : (charactersLen == 1 ? _oneLetterSize : _twoLettersSize)
+    property int letterSize: emoji ? Theme.dp(11) : (charactersLen == 1 ? _oneLetterSize : _twoLettersSize)
     property int charactersLen: 1
     property string emoji
     property string emojiSize: _emojiSize
     property StatusIconBackgroundSettings background: StatusIconBackgroundSettings {}
 
     // can't have QtObject { id: d } inside QtObject, using '_' to indicate private
-    readonly property int _oneLetterSize: Math.max(15, root.width / 2.0)
-    readonly property int _twoLettersSize: Math.max(12, root.width / 2.2)
-    readonly property string _emojiSize: "%1x%1".arg(Math.max(16, root.width * 0.6))
+    readonly property int _oneLetterSize: Math.max(Theme.dp(15), root.width / 2.0)
+    readonly property int _twoLettersSize: Math.max(Theme.dp(12), root.width / 2.2)
+    readonly property string _emojiSize: "%1x%1".arg(Math.max(Theme.dp(16), root.width * 0.6))
 }
diff --git a/src/StatusQ/Core/StatusModalHeaderSettings.qml b/src/StatusQ/Core/StatusModalHeaderSettings.qml
index 3e72278d..86d18882 100644
--- a/src/StatusQ/Core/StatusModalHeaderSettings.qml
+++ b/src/StatusQ/Core/StatusModalHeaderSettings.qml
@@ -1,5 +1,7 @@
 import QtQuick 2.14
 
+import StatusQ.Core.Theme 0.1
+
 QtObject {
     property string title
     property string subTitle
@@ -9,14 +11,14 @@ QtObject {
     property bool editable: false
     property Component popupMenu
     property StatusImageSettings image: StatusImageSettings {
-        width: 40
-        height: 40
+        width: Theme.dp(40)
+        height: Theme.dp(40)
         isIdenticon: false
     }
 
     property StatusIconSettings icon: StatusIconSettings {
-        width: 40
-        height: 40
+        width: Theme.dp(40)
+        height: Theme.dp(40)
         isLetterIdenticon: false
     }
 }
diff --git a/src/StatusQ/Core/Theme/Theme.qml b/src/StatusQ/Core/Theme/Theme.qml
index ce0ec346..7e7830cd 100644
--- a/src/StatusQ/Core/Theme/Theme.qml
+++ b/src/StatusQ/Core/Theme/Theme.qml
@@ -1,4 +1,5 @@
 pragma Singleton
+import QtQuick.Window 2.14
 
 import QtQuick 2.13
 
@@ -6,9 +7,22 @@ QtObject {
     id: appTheme
     property QtObject palette: StatusLightTheme {}
 
+    readonly property int screenWidth: Qt.platform.os == "ios" || Qt.platform.os == "android" ? Screen.width
+                                                                                              :  1224
+    readonly property int screenHeight: Qt.platform.os == "ios" || Qt.platform.os == "android" ? Screen.height
+                                                                                               :840
     function setTheme(theme) {
         palette = theme
     }
+
+    function isHtml(text) {
+        return (/<\/?[a-z][\s\S]*>/i.test(text))
+    }
+
+    property real scaleFactor: 1.0
+    function dp(value) {
+        return (value * scaleFactor);
+    }
 }
 
 
diff --git a/src/StatusQ/Core/Utils/Utils.qml b/src/StatusQ/Core/Utils/Utils.qml
index 46afc422..1d681b50 100644
--- a/src/StatusQ/Core/Utils/Utils.qml
+++ b/src/StatusQ/Core/Utils/Utils.qml
@@ -71,10 +71,6 @@ QtObject {
         }
         return strNumber.replace(/(\.[0-9]*[1-9])0+$|\.0*$/,'$1')
     }
-
-    function isHtml(text) {
-        return (/<\/?[a-z][\s\S]*>/i.test(text))
-    }
 }
 
 
diff --git a/src/StatusQ/Layout/StatusAppLayout.qml b/src/StatusQ/Layout/StatusAppLayout.qml
index 0e996fcc..1411b642 100644
--- a/src/StatusQ/Layout/StatusAppLayout.qml
+++ b/src/StatusQ/Layout/StatusAppLayout.qml
@@ -8,8 +8,8 @@ import StatusQ.Core.Theme 0.1
 Rectangle {
     id: statusAppLayout
 
-    implicitWidth: 900
-    implicitHeight: 600
+    implicitWidth: Theme.dp(900)
+    implicitHeight: Theme.dp(600)
 
     color: Theme.palette.statusAppLayout.backgroundColor
     
@@ -37,7 +37,7 @@ Rectangle {
         Item {
             id: appNavBarSlot
             height: statusAppLayout.height
-            width: 78
+            width: Theme.dp(78)
         }
 
         Item {
diff --git a/src/StatusQ/Layout/StatusAppNavBar.qml b/src/StatusQ/Layout/StatusAppNavBar.qml
index 95144c04..295b1efb 100644
--- a/src/StatusQ/Layout/StatusAppNavBar.qml
+++ b/src/StatusQ/Layout/StatusAppNavBar.qml
@@ -12,14 +12,14 @@ import StatusQ.Popups 0.1
 Rectangle {
     id: statusAppNavBar
 
-    width: 78
-    implicitHeight: 600
+    width: Theme.dp(78)
+    implicitHeight: Theme.dp(600)
     color: Theme.palette.statusAppNavBar.backgroundColor
 
     property var sectionModel: []
     property string communityTypeRole: ""
     property int communityTypeValue: -1
-    property int navBarButtonSpacing: 12
+    property int navBarButtonSpacing: Theme.dp(12)
 
     property StatusNavBarTabButton navBarProfileButton
     property Component regularNavBarButton
@@ -70,7 +70,7 @@ Rectangle {
             height: (necessaryHightForCommunities > maxHightForCommunities)?
                         maxHightForCommunities : necessaryHightForCommunities
 
-            property int communityNavBarButtonHeight: 40
+            property int communityNavBarButtonHeight: Theme.dp(40)
 
             property int maxHightForCommunities: {
                 let numOfOtherThanCommunityBtns = navBarListView.model.count - 1
@@ -110,8 +110,8 @@ Rectangle {
                 visible: parent.necessaryHightForCommunities > parent.maxHightForCommunities
 
                 Rectangle {
-                    height: 1
-                    width: 30
+                    height: Theme.dp(1)
+                    width: Theme.dp(30)
                     color: Theme.palette.directColor7
                     anchors.top: parent.top
                     anchors.horizontalCenter: parent.horizontalCenter
@@ -139,7 +139,7 @@ Rectangle {
 
                 Rectangle {
                     height: 1
-                    width: 30
+                    width: Theme.dp(30)
                     color: Theme.palette.directColor7
                     anchors.bottom: parent.bottom
                     anchors.horizontalCenter: parent.horizontalCenter
@@ -153,7 +153,7 @@ Rectangle {
         anchors.left: parent.left
         anchors.right: parent.right
         anchors.top: parent.top
-        anchors.topMargin: 48
+        anchors.topMargin: Theme.dp(48)
         anchors.bottom: navBarProfileButtonSlot.top
         anchors.bottomMargin: navBarButtonSpacing
 
@@ -169,6 +169,6 @@ Rectangle {
         width: visible? statusAppNavBar.navBarProfileButton.width : 0
         visible: !!statusAppNavBar.navBarProfileButton
         anchors.bottom: parent.bottom
-        anchors.bottomMargin: visible ? 32 : 0
+        anchors.bottomMargin: visible ? Theme.dp(32) : 0
     }
 }
diff --git a/src/StatusQ/Layout/StatusAppThreePanelLayout.qml b/src/StatusQ/Layout/StatusAppThreePanelLayout.qml
index 019549ea..f9a90b32 100644
--- a/src/StatusQ/Layout/StatusAppThreePanelLayout.qml
+++ b/src/StatusQ/Layout/StatusAppThreePanelLayout.qml
@@ -4,8 +4,8 @@ import StatusQ.Core.Theme 0.1
 
 SplitView {
     id: root
-    implicitWidth: 822
-    implicitHeight: 600
+    implicitWidth: Theme.dp(822)
+    implicitHeight: Theme.dp(600)
 
     handle: Item { }
 
@@ -15,8 +15,8 @@ SplitView {
     property bool showRightPanel
 
     Control {
-        SplitView.minimumWidth: 300
-        SplitView.preferredWidth: 300
+        SplitView.minimumWidth: Theme.dp(300)
+        SplitView.preferredWidth: Theme.dp(300)
         SplitView.fillHeight: true
         contentItem: (!!leftPanel) ? leftPanel : null
         background: Rectangle {
@@ -26,10 +26,10 @@ SplitView {
     }
 
     Control {
-        SplitView.minimumWidth: 300
+        SplitView.minimumWidth: Theme.dp(300)
         SplitView.fillWidth: true
         SplitView.fillHeight: true
-        leftPadding: -5
+        leftPadding: -Theme.dp(5)
         contentItem: (!!centerPanel) ? centerPanel : null
         background: Rectangle {
             anchors.fill: parent
@@ -38,8 +38,8 @@ SplitView {
     }
 
     Control {
-        SplitView.preferredWidth: root.showRightPanel ? 250 : 0
-        SplitView.minimumWidth: root.showRightPanel ? 58 : 0
+        SplitView.preferredWidth: root.showRightPanel ? Theme.dp(250) : 0
+        SplitView.minimumWidth: root.showRightPanel ? Theme.dp(58) : 0
         opacity: root.showRightPanel ? 1.0 : 0.0
         visible: (opacity > 0.1)
         contentItem: Loader {
diff --git a/src/StatusQ/Layout/StatusAppTwoPanelLayout.qml b/src/StatusQ/Layout/StatusAppTwoPanelLayout.qml
index ab4a29f2..a42a840c 100644
--- a/src/StatusQ/Layout/StatusAppTwoPanelLayout.qml
+++ b/src/StatusQ/Layout/StatusAppTwoPanelLayout.qml
@@ -8,8 +8,8 @@ import StatusQ.Core.Theme 0.1
 Item {
     id: statusAppTwoPanelLayout
 
-    implicitWidth: 822
-    implicitHeight: 600
+    implicitWidth: Theme.dp(822)
+    implicitHeight: Theme.dp(600)
 
     property Item leftPanel
     property Item rightPanel
@@ -32,7 +32,7 @@ Item {
         Rectangle {
             id: leftPanelSlot
             height: parent.height
-            width: 304
+            width: Theme.dp(304)
             color: Theme.palette.baseColor4
         }
 
diff --git a/src/StatusQ/Platform/StatusMacNotification.qml b/src/StatusQ/Platform/StatusMacNotification.qml
index 3b296437..0d657cbf 100644
--- a/src/StatusQ/Platform/StatusMacNotification.qml
+++ b/src/StatusQ/Platform/StatusMacNotification.qml
@@ -15,19 +15,19 @@ Rectangle {
 
     // TODO: what about dark theme?
     color: "#F7F7F7"
-    width: 366
-    height: 75
+    width: Theme.dp(366)
+    height: Theme.dp(75)
 
-    radius: 8
+    radius: Theme.dp(8)
 
     Loader {
         id: identicon
         sourceComponent: root.identicon === "" ?  statusIdenticon : userOrChannelIdenticon
         anchors.left: parent.left
-        anchors.leftMargin: 16
+        anchors.leftMargin: Theme.dp(16)
         anchors.verticalCenter: parent.verticalCenter
-        height: 40
-        width: 40
+        height: Theme.dp(40)
+        width: Theme.dp(40)
     }
 
     Component {
@@ -35,18 +35,18 @@ Rectangle {
         StatusSmartIdenticon {
             id: contactImage
             anchors.left: parent.left
-            anchors.leftMargin: 8
+            anchors.leftMargin: Theme.dp(8)
             anchors.verticalCenter: parent.verticalCenter
             image: StatusImageSettings {
-                width: 40
-                height: 40
+                width: Theme.dp(40)
+                height: Theme.dp(40)
                 source: root.identicon
                 isIdenticon: true
             }
             icon: StatusIconSettings {
-                width: 40
-                height: 40
-                letterSize: 15
+                width: Theme.dp(40)
+                height: Theme.dp(40)
+                letterSize: Theme.dp(15)
                 color: Theme.palette.miscColor5
             }
             name: root.name
@@ -57,8 +57,8 @@ Rectangle {
         id: statusIdenticon
         Image {
             source: "../../assets/img/status-logo-icon.svg"
-            width: 40
-            height: 40
+            width: Theme.dp(40)
+            height: Theme.dp(40)
             sourceSize.width: width * 2
             sourceSize.height: height * 2
             cache: true
@@ -74,29 +74,29 @@ Rectangle {
     StatusBaseText {
         id: name
         anchors.bottom: messagePreview.top
-        anchors.bottomMargin: 2
+        anchors.bottomMargin: Theme.dp(2)
         anchors.left: identicon.right
-        anchors.leftMargin: 8
+        anchors.leftMargin: Theme.dp(8)
         anchors.right: openButton.left
         anchors.rightMargin: 8
         elide: Text.ElideRight
         text: root.name
         font.weight: Font.Medium
-        font.pixelSize: 15
+        font.pixelSize: Theme.dp(15)
         color: "#4b4b4b"
     }
 
     StatusBaseText {
         id: messagePreview
         anchors.bottom: identicon.bottom
-        anchors.bottomMargin: 2
+        anchors.bottomMargin: Theme.dp(2)
         anchors.left: identicon.right
-        anchors.leftMargin: 8
+        anchors.leftMargin: Theme.dp(8)
         anchors.right: openButton.left
-        anchors.rightMargin: 16
+        anchors.rightMargin: Theme.dp(16)
         elide: Text.ElideRight
         clip: true // This is needed because emojis don't ellide correctly
-        font.pixelSize: 14
+        font.pixelSize: Theme.dp(14)
         color: "#4b4b4b"
         text: root.message
     }
@@ -105,19 +105,19 @@ Rectangle {
         id: openButton
         anchors.right: parent.right
         height: parent.height
-        width: 85
+        width: Theme.dp(85)
         color: "transparent"
 
         Rectangle {
             height: parent.height
-            width: 1.2
+            width: Theme.dp(1.2)
             anchors.left: parent.left
             color: "#D9D9D9"
         }
 
         StatusBaseText {
             font.weight: Font.Medium
-            font.pixelSize: 14
+            font.pixelSize: Theme.dp(14)
             anchors.verticalCenter: parent.verticalCenter
             anchors.horizontalCenter: parent.horizontalCenter
             text: qsTr("Open")
diff --git a/src/StatusQ/Platform/StatusMacTrafficLights.qml b/src/StatusQ/Platform/StatusMacTrafficLights.qml
index 7db6c903..305e71e6 100644
--- a/src/StatusQ/Platform/StatusMacTrafficLights.qml
+++ b/src/StatusQ/Platform/StatusMacTrafficLights.qml
@@ -24,11 +24,11 @@ MouseArea {
 
     Row {
         id: layout
-        spacing: 8
+        spacing: Theme.dp(8)
 
         Rectangle {
-            width: 12
-            height: 12
+            width: Theme.dp(12)
+            height: Theme.dp(12)
             radius: width / 2
             antialiasing: true
 
@@ -56,8 +56,8 @@ MouseArea {
         }
 
         Rectangle {
-            width: 12
-            height: 12
+            width: Theme.dp(12)
+            height: Theme.dp(12)
             radius: width / 2
             antialiasing: true
 
@@ -65,11 +65,11 @@ MouseArea {
                                                                        : inactive)
             border.color:miniSensor.pressed ? "#986E29" : (rootWindow.active ? "#D79F3D"
                                                                              : inactiveBorder)
-            border.width: Theme.palette.name === "light" ? 0.5 : 0
+            border.width: Theme.palette.name === "light" ? Theme.dp(0.5) : 0
 
             Image {
                 anchors.centerIn: parent
-                anchors.verticalCenterOffset: -0.25
+                anchors.verticalCenterOffset: -Theme.dp(0.25)
                 visible: statusMacTrafficLights.containsMouse
                 source: miniSensor.pressed ? "../../assets/img/icons/traffic_lights/minimise_pressed.png"
                                            : "../../assets/img/icons/traffic_lights/minimise.png"
@@ -85,8 +85,8 @@ MouseArea {
         }
 
         Rectangle {
-            width: 12
-            height: 12
+            width: Theme.dp(12)
+            height: Theme.dp(12)
             radius: width / 2
             antialiasing: true
 
@@ -98,6 +98,8 @@ MouseArea {
 
             Image {
                 anchors.centerIn: parent
+                width: Theme.dp(sourceSize.width)
+                height: Theme.dp(sourceSize.height)
                 visible: statusMacTrafficLights.containsMouse
                 source:   maxiSensor.pressed ?"../../assets/img/icons/traffic_lights/maximize_pressed.png"
                                              :"../../assets/img/icons/traffic_lights/maximize.png"
diff --git a/src/StatusQ/Platform/StatusWindowsTitleBar.qml b/src/StatusQ/Platform/StatusWindowsTitleBar.qml
index f52455a5..ddd4abb2 100644
--- a/src/StatusQ/Platform/StatusWindowsTitleBar.qml
+++ b/src/StatusQ/Platform/StatusWindowsTitleBar.qml
@@ -13,21 +13,21 @@ Rectangle {
     signal minimised();
     signal maximized();
 
-    implicitHeight: 32
+    implicitHeight: Theme.dp(32)
     color: Theme.palette.baseColor5
 
     Row {
         id: titleLayout
         anchors.left: parent.left
-        anchors.leftMargin: 12
+        anchors.leftMargin: Theme.dp(12)
         anchors.verticalCenter: parent.verticalCenter
 
-        spacing: 4
+        spacing: Theme.dp(4)
 
         StatusIcon {
             anchors.verticalCenter: parent.verticalCenter
-            width: 16
-            height: 16
+            width: Theme.dp(16)
+            height: Theme.dp(16)
             icon: "windows_titlebar/status"
         }
 
@@ -47,7 +47,7 @@ Rectangle {
         height: parent.height
 
         Rectangle {
-            width: 48
+            width: Theme.dp(48)
             height: parent.height
 
             color: minimizeSensor.containsMouse ? (minimizeSensor.pressed ? Theme.palette.directColor9 : Theme.palette.directColor8)
@@ -55,8 +55,8 @@ Rectangle {
 
             StatusIcon {
                 anchors.centerIn: parent
-                width: 10
-                height: 1
+                width: Theme.dp(10)
+                height: Theme.dp(1)
                 icon: "windows_titlebar/minimise"
                 color: Theme.palette.directColor1
             }
@@ -70,7 +70,7 @@ Rectangle {
         }
 
         Rectangle {
-            width: 48
+            width: Theme.dp(48)
             height: parent.height
 
             color: maximizeSensor.containsMouse ? (maximizeSensor.pressed ? Theme.palette.directColor9 : Theme.palette.directColor8)
@@ -78,8 +78,8 @@ Rectangle {
 
             StatusIcon {
                 anchors.centerIn: parent
-                width: 10
-                height: 10
+                width: Theme.dp(10)
+                height: Theme.dp(10)
                 icon: "windows_titlebar/maximize"
                 color: Theme.palette.directColor1
             }
@@ -93,7 +93,7 @@ Rectangle {
         }
 
         Rectangle {
-            width: 48
+            width: Theme.dp(48)
             height: parent.height
 
             color: closeSensor.containsMouse ? (closeSensor.pressed ? "#DB1518" : "#ED4245")
@@ -101,8 +101,8 @@ Rectangle {
 
             StatusIcon {
                 anchors.centerIn: parent
-                width: 10
-                height: 10
+                width: Theme.dp(10)
+                height: Theme.dp(10)
                 icon: "windows_titlebar/close"
                 color: closeSensor.containsMouse ? Theme.palette.white : Theme.palette.directColor1
             }
diff --git a/src/StatusQ/Popups/StatusColorDialog.qml b/src/StatusQ/Popups/StatusColorDialog.qml
index ce614363..4c9afb05 100644
--- a/src/StatusQ/Popups/StatusColorDialog.qml
+++ b/src/StatusQ/Popups/StatusColorDialog.qml
@@ -30,16 +30,16 @@ StatusModal {
         hexInput.text = color.toString();
     }
 
-    width: 680
-    implicitHeight: 820
+    width: Theme.dp(680)
+    implicitHeight: Theme.dp(820)
 
     contentItem: ScrollView {
         id: scroll
         width: parent.width
-        topPadding: 30
-        leftPadding: 20
-        rightPadding: 20
-        bottomPadding: 20
+        topPadding: Theme.dp(30)
+        leftPadding: Theme.dp(20)
+        rightPadding: Theme.dp(20)
+        bottomPadding: Theme.dp(20)
         contentHeight: column.height
 
         ScrollBar.vertical.policy: ScrollBar.AsNeeded
@@ -50,7 +50,7 @@ StatusModal {
         ColumnLayout {
             id: column
             width: scroll.width - scroll.leftPadding - scroll.rightPadding
-            spacing: 12
+            spacing: Theme.dp(12)
 
             StatusColorSpace {
                 id: colorSpace
@@ -73,7 +73,7 @@ StatusModal {
                 // TODO: editingFinished() signal instead of this crutch
                 property bool locked: false
 
-                implicitWidth: 256
+                implicitWidth: Theme.dp(256)
                 validators: [
                     StatusRegularExpressionValidator {
                         regularExpression: /^#(?:[0-9a-fA-F]{3}){1,2}$/
@@ -95,28 +95,28 @@ StatusModal {
 
             StatusBaseText {
                 text: qsTr("Preview")
-                font.pixelSize: 15
+                font.pixelSize: Theme.dp(15)
             }
 
             Rectangle {
-                implicitHeight: 48
-                radius: 10
+                implicitHeight: Theme.dp(48)
+                radius: Theme.dp(10)
                 color: root.color
                 Layout.fillWidth: true
 
                 StatusBaseText {
                     id: preview
-                    x: 16
-                    y: 16
+                    x: Theme.dp(16)
+                    y: Theme.dp(16)
                     text: root.color.toString()
                     color: Theme.palette.white
-                    font.pixelSize: 15
+                    font.pixelSize: Theme.dp(15)
                 }
             }
 
             StatusBaseText {
                 text: qsTr("Standart colours")
-                font.pixelSize: 15
+                font.pixelSize: Theme.dp(15)
             }
 
             StatusColorSelectorGrid {
diff --git a/src/StatusQ/Popups/StatusMenuHeadline.qml b/src/StatusQ/Popups/StatusMenuHeadline.qml
index 9da2b1b4..9f41d4b8 100644
--- a/src/StatusQ/Popups/StatusMenuHeadline.qml
+++ b/src/StatusQ/Popups/StatusMenuHeadline.qml
@@ -9,14 +9,14 @@ MenuSeparator {
     property string text
     height: visible && enabled ? implicitHeight : 0
     contentItem: Item {
-        implicitWidth: 176
-        implicitHeight: 16
+        implicitWidth: Theme.dp(176)
+        implicitHeight: Theme.dp(16)
         StatusBaseText {
             anchors.verticalCenter: parent.verticalCenter
             anchors.left: parent.left
-            anchors.leftMargin: 12
+            anchors.leftMargin: Theme.dp(12)
             color: Theme.palette.baseColor1
-            font.pixelSize: 12
+            font.pixelSize: Theme.dp(12)
             text: root.text
         }
     }
diff --git a/src/StatusQ/Popups/StatusMenuItem.qml b/src/StatusQ/Popups/StatusMenuItem.qml
index 7e3b0c88..d18a1e40 100644
--- a/src/StatusQ/Popups/StatusMenuItem.qml
+++ b/src/StatusQ/Popups/StatusMenuItem.qml
@@ -1,6 +1,7 @@
 import QtQuick 2.13
 import QtQuick.Controls 2.13
 import StatusQ.Core 0.1
+import StatusQ.Core.Theme 0.1
 
 Action {
     id: statusMenuItem
@@ -13,8 +14,8 @@ Action {
     property int type: StatusMenuItem.Type.Normal
     property real iconRotation: 0
     property StatusImageSettings image: StatusImageSettings {
-        height: 16
-        width: 16
+        height: Theme.dp(16)
+        width: Theme.dp(16)
         isIdenticon: false
     }
     property StatusIconSettings iconSettings: StatusIconSettings {
diff --git a/src/StatusQ/Popups/StatusMenuItemDelegate.qml b/src/StatusQ/Popups/StatusMenuItemDelegate.qml
index 9b6eecdd..fe760f20 100644
--- a/src/StatusQ/Popups/StatusMenuItemDelegate.qml
+++ b/src/StatusQ/Popups/StatusMenuItemDelegate.qml
@@ -9,7 +9,7 @@ import StatusQ.Popups 0.1
 MenuItem {
     id: statusPopupMenuItem
     implicitWidth: parent ? parent.width : 0
-    implicitHeight: action.enabled ? 38 : 0
+    implicitHeight: action.enabled ? Theme.dp(38) : 0
 
     property int subMenuIndex
     property var statusPopupMenu: null
@@ -28,14 +28,14 @@ MenuItem {
     Component {
         id: indicatorComponent
         Item {
-            implicitWidth: 24
-            implicitHeight: 24
+            implicitWidth: Theme.dp(24)
+            implicitHeight: Theme.dp(24)
             StatusIcon {
                 anchors.centerIn: parent
                 width: {
                     let width = statusPopupMenuItem.action && statusPopupMenuItem.action.icon.width ||
                         statusPopupMenuItem.action.iconSettings && statusPopupMenuItem.action.iconSettings.width
-                    return !!width ? width : 18
+                    return !!width ? width : Theme.dp(18)
                 }
                 rotation: !!statusPopupMenuItem.action.iconRotation ? statusPopupMenuItem.action.iconRotation : 0
                 icon: {
@@ -72,19 +72,19 @@ MenuItem {
     Component {
         id: statusLetterIdenticonCmp
         Item {
-            implicitWidth: 24
-            implicitHeight: 24
+            implicitWidth: Theme.dp(24)
+            implicitHeight: Theme.dp(24)
 
             StatusLetterIdenticon {
                 anchors.centerIn: parent
-                width: 16
-                height: 16
+                width: Theme.dp(16)
+                height: Theme.dp(16)
                 color: {
                     let subMenuItemIcon = statusPopupMenu.subMenuItemIcons[statusPopupMenuItem.subMenuIndex]
                     return subMenuItemIcon && subMenuItemIcon.color ? subMenuItemIcon.color : statusPopupMenuItem.action.iconSettings.background.color
                 }
                 name: statusPopupMenuItem.text
-                letterSize: 11
+                letterSize: Theme.dp(11)
             }
         }
     }
@@ -93,8 +93,8 @@ MenuItem {
         id: statusRoundImageCmp
 
         Item {
-            implicitWidth: 24
-            implicitHeight: 24
+            implicitWidth: Theme.dp(24)
+            implicitHeight: Theme.dp(24)
             StatusRoundedImage {
                 anchors.centerIn: parent
                 width: statusPopupMenuItem.action.image.width
@@ -124,7 +124,7 @@ MenuItem {
         }
         anchors.verticalCenter: parent.verticalCenter
         anchors.left: parent.left
-        anchors.leftMargin: 8
+        anchors.leftMargin: Theme.dp(8)
         active: {
             if (enabled) {
                 let hasIconSettings = !!statusPopupMenuItem.action.icon.name ||
@@ -142,8 +142,8 @@ MenuItem {
     contentItem: StatusBaseText {
         anchors.left: statusPopupMenuItem.indicator.right
         anchors.right: arrowIcon.visible ? arrowIcon.left : arrowIcon.right
-        anchors.rightMargin: 8
-        anchors.leftMargin: 4
+        anchors.rightMargin: Theme.dp(8)
+        anchors.leftMargin: Theme.dp(4)
 
         horizontalAlignment: Text.AlignLeft
         verticalAlignment: Text.AlignVCenter
@@ -167,8 +167,8 @@ MenuItem {
         id: arrowIcon
         anchors.verticalCenter: parent.verticalCenter
         anchors.right: parent.right
-        anchors.rightMargin: 8
-        height: 16
+        anchors.rightMargin: Theme.dp(8)
+        height: Theme.dp(16)
         visible: statusPopupMenuItem.subMenu
         icon: "next"
         color: Theme.palette.directColor1
diff --git a/src/StatusQ/Popups/StatusMenuSeparator.qml b/src/StatusQ/Popups/StatusMenuSeparator.qml
index e3ebd38d..97c303f7 100644
--- a/src/StatusQ/Popups/StatusMenuSeparator.qml
+++ b/src/StatusQ/Popups/StatusMenuSeparator.qml
@@ -6,8 +6,8 @@ import StatusQ.Core.Theme 0.1
 MenuSeparator {
     height: visible && enabled ? implicitHeight : 0
     contentItem: Rectangle {
-        implicitWidth: 176
-        implicitHeight: 1
+        implicitWidth: Theme.dp(176)
+        implicitHeight: Theme.dp(1)
         color: Theme.palette.statusPopupMenu.separatorColor
     }
 }
diff --git a/src/StatusQ/Popups/StatusModal.qml b/src/StatusQ/Popups/StatusModal.qml
index 0cb83606..756b4c6b 100644
--- a/src/StatusQ/Popups/StatusModal.qml
+++ b/src/StatusQ/Popups/StatusModal.qml
@@ -198,7 +198,7 @@ QC.Popup {
 
     parent: QC.Overlay.overlay
 
-    width: 480
+    width: Theme.dp(480)
     // implicitHeight: headerImpl.implicitHeight + contentItem.implicitHeight + footerImpl.implicitHeight
 
     padding: 0
@@ -207,7 +207,7 @@ QC.Popup {
     leftPadding: padding
     rightPadding: padding
 
-    margins: 64
+    margins: Theme.dp(64)
 
     modal: true
 
@@ -217,7 +217,7 @@ QC.Popup {
 
     background: Rectangle {
         color: Theme.palette.statusModal.backgroundColor
-        radius: 8
+        radius: Theme.dp(8)
 
         Spares.StatusModalHeader {
             id: headerImpl
@@ -243,7 +243,7 @@ QC.Popup {
         Loader {
             id: advancedHeader
             anchors.top: parent.top
-            anchors.topMargin: hasFloatingButtons ? -18 - height : 0
+            anchors.topMargin: hasFloatingButtons ? -Theme.dp(18) - height : 0
             width: visible ? parent.width : 0
             active: statusModal.showAdvancedHeader
         }
diff --git a/src/StatusQ/Popups/StatusPopupMenu.qml b/src/StatusQ/Popups/StatusPopupMenu.qml
index c0613a78..1c34a9ec 100644
--- a/src/StatusQ/Popups/StatusPopupMenu.qml
+++ b/src/StatusQ/Popups/StatusPopupMenu.qml
@@ -11,8 +11,8 @@ import StatusQ.Popups 0.1
 Menu {
     id: root
     closePolicy: Popup.CloseOnPressOutside | Popup.CloseOnEscape
-    topPadding: 8
-    bottomPadding: 8
+    topPadding: Theme.dp(8)
+    bottomPadding: Theme.dp(8)
 
     property int menuItemCount: 0
     property var subMenuItemIcons: []
@@ -42,14 +42,14 @@ Menu {
 
     background: Item {
         id: statusPopupMenuBackground
-        implicitWidth: 176
+        implicitWidth: Theme.dp(176)
 
         Rectangle {
             id: statusPopupMenuBackgroundContent
             implicitWidth: statusPopupMenuBackground.width
             implicitHeight: statusPopupMenuBackground.height
             color: Theme.palette.statusPopupMenu.backgroundColor
-            radius: 8
+            radius: Theme.dp(8)
             layer.enabled: true
             layer.effect: DropShadow {
                 width: statusPopupMenuBackgroundContent.width
@@ -58,8 +58,8 @@ Menu {
                 visible: statusPopupMenuBackgroundContent.visible
                 source: statusPopupMenuBackgroundContent
                 horizontalOffset: 0
-                verticalOffset: 4
-                radius: 12
+                verticalOffset: Theme.dp(4)
+                radius: Theme.dp(12)
                 samples: 25
                 spread: 0.2
                 color: Theme.palette.dropShadow
diff --git a/src/StatusQ/Popups/StatusSearchPopup.qml b/src/StatusQ/Popups/StatusSearchPopup.qml
index b619672c..65ef519a 100644
--- a/src/StatusQ/Popups/StatusSearchPopup.qml
+++ b/src/StatusQ/Popups/StatusSearchPopup.qml
@@ -11,7 +11,7 @@ import StatusQ.Popups 0.1
 
 StatusModal {
     id: root
-    width: 700
+    width: Theme.dp(700)
     height: (!!searchResults && (searchResults.count >= 0) && (searchText !== "")) ? (((searchResults.count < 5)) ? 560 : 770) : 142 //970
     anchors.centerIn: parent
     showHeader: false
@@ -82,10 +82,10 @@ StatusModal {
                 Layout.preferredHeight: 63
                 StatusIcon {
                     id: statusIcon
-                    width: 40
-                    height: 40
+                    width: Theme.dp(40)
+                    height: Theme.dp(40)
                     anchors.left: parent.left
-                    anchors.leftMargin: 12
+                    anchors.leftMargin: Theme.dp(12)
                     anchors.verticalCenter: parent.verticalCenter
                     icon: "search"
                     color: Theme.palette.baseColor1
@@ -94,14 +94,14 @@ StatusModal {
                 StatusBaseInput {
                     id: inputText
                     anchors.left: statusIcon.right
-                    anchors.leftMargin: 15
+                    anchors.leftMargin: Theme.dp(15)
                     anchors.right: parent.right
-                    anchors.rightMargin: 8
+                    anchors.rightMargin: Theme.dp(8)
                     anchors.verticalCenter: parent.verticalCenter
                     focus: true
-                    font.pixelSize: 28
-                    topPadding: 5 //smaller padding to handle bigger font
-                    bottomPadding: 5
+                    font.pixelSize: Theme.dp(28)
+                    topPadding: Theme.dp(5) //smaller padding to handle bigger font
+                    bottomPadding: Theme.dp(5)
                     clearable: true
                     showBackground: false
                     font.family: Theme.palette.baseFont.name
@@ -118,7 +118,7 @@ StatusModal {
             }
             Item {
                 Layout.preferredWidth: parent.width
-                Layout.preferredHeight: 58
+                Layout.preferredHeight: Theme.dp(58)
                 Button {
                     id: searchOptionsMenuButton
 
@@ -130,16 +130,16 @@ StatusModal {
                     property string primaryText: ""
                     property string secondaryText: ""
                     property StatusIconSettings iconSettings: StatusIconSettings {
-                        width: 16
-                        height: 16
+                        width: Theme.dp(16)
+                        height: Theme.dp(16)
                         name: ""
                         isLetterIdenticon: false
-                        letterSize: charactersLen > 1 ? 8 : 11
+                        letterSize: Theme.dp(charactersLen > 1 ? 8 : 11)
                     }
 
                     property StatusImageSettings image: StatusImageSettings {
-                        width: 16
-                        height: 16
+                        width: Theme.dp(16)
+                        height: Theme.dp(16)
                         source: ""
                         isIdenticon: false
                     }
@@ -147,16 +147,16 @@ StatusModal {
                     property alias ringSettings: identicon.ringSettings
 
                     anchors.left: parent.left
-                    anchors.leftMargin: 16
+                    anchors.leftMargin: Theme.dp(16)
                     anchors.verticalCenter: parent.verticalCenter
 
                     implicitWidth: (contentItemRowLayout.width + 24)
-                    implicitHeight: 32
+                    implicitHeight: Theme.dp(32)
 
                     background: Rectangle {
                         anchors.fill: parent
                         color: Theme.palette.baseColor2
-                        radius: 8
+                        radius: Theme.dp(8)
                     }
 
                     contentItem: Item {
@@ -172,7 +172,7 @@ StatusModal {
                             RowLayout {
                                 id: contentItemRowLayout
                                 anchors.centerIn: parent
-                                spacing: 2
+                                spacing: Theme.dp(2)
                                 StatusBaseText {
                                     color: Theme.palette.directColor1
                                     text: searchOptionsMenuButton.prefixText + ": "
@@ -181,8 +181,8 @@ StatusModal {
 
                                 StatusSmartIdenticon {
                                     id: identicon
-                                    Layout.preferredWidth: active ? 16 : 0
-                                    Layout.preferredHeight: 16
+                                    Layout.preferredWidth: active ? Theme.dp(16) : 0
+                                    Layout.preferredHeight: Theme.dp(16)
                                     image: searchOptionsMenuButton.image
                                     icon: searchOptionsMenuButton.iconSettings
                                     name: searchOptionsMenuButton.primaryText
@@ -198,16 +198,16 @@ StatusModal {
                                     font.weight: Font.Medium
                                 }
                                 StatusIcon {
-                                    Layout.preferredWidth: 14.5
-                                    Layout.preferredHeight: 17.5
+                                    Layout.preferredWidth: Theme.dp(14)
+                                    Layout.preferredHeight: Theme.dp(18)
                                     Layout.alignment: Qt.AlignVCenter
                                     visible: !!searchOptionsMenuButton.secondaryText
                                     color: Theme.palette.baseColor1
                                     icon: "next"
                                 }
                                 StatusIcon {
-                                    Layout.preferredWidth: 17.5
-                                    Layout.preferredHeight: 17.5
+                                    Layout.preferredWidth: Theme.dp(18)
+                                    Layout.preferredHeight: Theme.dp(18)
                                     Layout.alignment: Qt.AlignVCenter
                                     visible: !!searchOptionsMenuButton.secondaryText
                                     color: Theme.palette.directColor1
@@ -220,8 +220,8 @@ StatusModal {
                                     font.weight: Font.Medium
                                 }
                                 StatusIcon {
-                                    Layout.preferredWidth: 17.5
-                                    Layout.preferredHeight: 14.5
+                                    Layout.preferredWidth: Theme.dp(18)
+                                    Layout.preferredHeight: Theme.dp(14)
                                     Layout.alignment: Qt.AlignVCenter
                                     icon: "chevron-down"
                                     color: Theme.palette.directColor1
@@ -233,18 +233,18 @@ StatusModal {
 
                 StatusFlatRoundButton {
                     id: closeButton
-                    width: 32
-                    height: 32
+                    width: Theme.dp(32)
+                    height: Theme.dp(32)
                     anchors.left: searchOptionsMenuButton.right
-                    anchors.leftMargin: 4
+                    anchors.leftMargin: Theme.dp(4)
                     anchors.verticalCenter: parent.verticalCenter
                     opacity: (searchOptionsMenuButton.primaryText === defaultSearchLocationText) ? 0.0 : 1.0
                     visible: (opacity > 0.1)
                     type: StatusFlatRoundButton.Type.Secondary
                     icon.name: "close"
                     icon.color: Theme.palette.directColor1
-                    icon.width: 20
-                    icon.height: 20
+                    icon.width: Theme.dp(20)
+                    icon.height: Theme.dp(20)
                     onClicked: { root.resetSearchSelection(); }
                 }
             }
@@ -260,7 +260,7 @@ StatusModal {
                     anchors {
                         leftMargin: 0
                         rightMargin: 0
-                        bottomMargin: 67
+                        bottomMargin: Theme.dp(67)
                     }
                     visible: (!root.loading && (count > 0))
                     model: root.searchResults
@@ -302,16 +302,16 @@ StatusModal {
                     section.property: "sectionName"
                     section.criteria: ViewSection.FullString
                     section.delegate: Item {
-                        height: 34
+                        height: Theme.dp(34)
                         width: view.width
                         StatusBaseText {
-                            font.pixelSize: 15
+                            font.pixelSize: Theme.dp(15)
                             color: Theme.palette.baseColor1
                             text: section
                             anchors.left: parent.left
-                            anchors.leftMargin: 16
+                            anchors.leftMargin: Theme.dp(16)
                             anchors.bottom: parent.bottom
-                            anchors.bottomMargin: 4
+                            anchors.bottomMargin: Theme.dp(4)
                         }
                     }
                 }
@@ -319,15 +319,15 @@ StatusModal {
                     anchors.centerIn: parent
                     visible: root.loading
                     color: Theme.palette.primaryColor1
-                    width: 24
-                    height: 24
+                    width: Theme.dp(24)
+                    height: Theme.dp(24)
                 }
 
                 StatusBaseText {
                     anchors.centerIn: parent
                     text: root.noResultsLabel
                     color: Theme.palette.baseColor1
-                    font.pixelSize: 13
+                    font.pixelSize: Theme.dp(13)
                     visible: ((inputText.text !== "") && (view.count === 0) && !root.loading)
                 }
             }
diff --git a/src/StatusQ/Popups/StatusSearchPopupMenuItem.qml b/src/StatusQ/Popups/StatusSearchPopupMenuItem.qml
index 4b37f5b3..b47a7e3f 100644
--- a/src/StatusQ/Popups/StatusSearchPopupMenuItem.qml
+++ b/src/StatusQ/Popups/StatusSearchPopupMenuItem.qml
@@ -7,24 +7,24 @@ import StatusQ.Core.Theme 0.1
 
 MenuItem {
     id: root
-    implicitHeight: 38
+    implicitHeight: Theme.dp(38)
 
     property string value: ""
 
     property StatusImageSettings image: StatusImageSettings {
-        height: 16
-        width: 16
+        height: Theme.dp(16)
+        width: Theme.dp(16)
         isIdenticon: false
     }
 
     property StatusIconSettings iconSettings: StatusIconSettings {
-        height: 16
-        width: 16
+        height: Theme.dp(16)
+        width: Theme.dp(16)
         isLetterIdenticon: (root.image.source.toString() === ""
                             && root.iconSettings.name.toString() === "")
         background: StatusIconBackgroundSettings {}
         color: (name === "channel") ? Theme.palette.directColor1 : "transparent"
-        letterSize: charactersLen > 1 ? 8 : 11
+        letterSize: Theme.dp(charactersLen > 1 ? 8 : 11)
     }
 
     property alias ringSettings: identicon.ringSettings
@@ -35,7 +35,7 @@ MenuItem {
 
     contentItem: RowLayout {
         anchors.left: parent.left
-        anchors.leftMargin: 12
+        anchors.leftMargin: Theme.dp(12)
         Item {
             Layout.preferredWidth: root.iconSettings.width
             Layout.preferredHeight: root.iconSettings.height
diff --git a/src/StatusQ/Popups/StatusSpellcheckingMenuItems.qml b/src/StatusQ/Popups/StatusSpellcheckingMenuItems.qml
index 97185468..89aca49c 100644
--- a/src/StatusQ/Popups/StatusSpellcheckingMenuItems.qml
+++ b/src/StatusQ/Popups/StatusSpellcheckingMenuItems.qml
@@ -21,17 +21,17 @@ StatusPopupMenu {
             delegate:  MenuItem {
                 id: variants
                 implicitWidth: parent ? parent.width : 0
-                implicitHeight: 38
+                implicitHeight: Theme.dp(38)
                 contentItem: StatusBaseText {
-                    rightPadding: 8
-                    leftPadding: 4
+                    rightPadding: Theme.dp(8)
+                    leftPadding: Theme.dp(4)
 
                     horizontalAlignment: Text.AlignLeft
                     verticalAlignment: Text.AlignVCenter
 
                     text: modelData
                     color: Theme.palette.directColor1
-                    font.pixelSize: 13
+                    font.pixelSize: Theme.dp(13)
                     elide: Text.ElideRight
                 }
 
@@ -51,17 +51,17 @@ StatusPopupMenu {
         MenuItem {
             id: ignoreWord
             implicitWidth: parent ? parent.width : 0
-            implicitHeight: 38
+            implicitHeight: Theme.dp(38)
             contentItem: StatusBaseText {
-                rightPadding: 8
-                leftPadding: 4
+                rightPadding: Theme.dp(8)
+                leftPadding: Theme.dp(4)
 
                 horizontalAlignment: Text.AlignLeft
                 verticalAlignment: Text.AlignVCenter
 
                 text: qsTr("Add to dictionary")
                 color: Theme.palette.directColor1
-                font.pixelSize: 13
+                font.pixelSize: Theme.dp(13)
                 elide: Text.ElideRight
             }
 
@@ -78,17 +78,17 @@ StatusPopupMenu {
         MenuItem {
             id: disableSpellchecking
             implicitWidth: parent ? parent.width : 0
-            implicitHeight: 38
+            implicitHeight: Theme.dp(38)
             contentItem: StatusBaseText {
-                rightPadding: 8
-                leftPadding: 4
+                rightPadding: Theme.dp(8)
+                leftPadding: Theme.dp(4)
 
                 horizontalAlignment: Text.AlignLeft
                 verticalAlignment: Text.AlignVCenter
 
                 text: qsTr("Disable Spellchecking")
                 color: Theme.palette.directColor1
-                font.pixelSize: 13
+                font.pixelSize: Theme.dp(13)
                 elide: Text.ElideRight
             }
 
diff --git a/src/StatusQ/Popups/statusModal/StatusImageWithTitle.qml b/src/StatusQ/Popups/statusModal/StatusImageWithTitle.qml
index 8e3f8a8b..63bf2656 100644
--- a/src/StatusQ/Popups/statusModal/StatusImageWithTitle.qml
+++ b/src/StatusQ/Popups/statusModal/StatusImageWithTitle.qml
@@ -18,23 +18,23 @@ Row {
     signal headerImageClicked
 
     property StatusImageSettings image: StatusImageSettings {
-        width: 40
-        height: 40
+        width: Theme.dp(40)
+        height: Theme.dp(40)
         isIdenticon: false
     }
 
     property StatusIconSettings icon: StatusIconSettings {
-        width: 40
-        height: 40
+        width: Theme.dp(40)
+        height: Theme.dp(40)
         isLetterIdenticon: false
     }
 
-    spacing: 8
+    spacing: Theme.dp(8)
 
     Loader {
         id: iconOrImage
         anchors.verticalCenter: parent.verticalCenter
-        width: active ? 40 : 0
+        width: active ? Theme.dp(40) : 0
         sourceComponent: {
             if (statusImageWithTitle.icon.isLetterIdenticon) {
                 return statusLetterIdenticon
@@ -80,10 +80,10 @@ Row {
                 objectName: "editAvatarImage"
                 anchors.right: parent.right
                 anchors.bottom: parent.bottom
-                anchors.bottomMargin: -3
-                anchors.rightMargin: -2
-                width: 18
-                height: 18
+                anchors.bottomMargin: -Theme.dp(3)
+                anchors.rightMargin: -Theme.dp(2)
+                width: Theme.dp(18)
+                height: Theme.dp(18)
                 radius: width / 2
 
                 visible: statusImageWithTitle.headerImageEditable
@@ -94,7 +94,7 @@ Row {
 
                 StatusIcon {
                     anchors.centerIn: parent
-                    width: 11
+                    width: Theme.dp(11)
                     color: Theme.palette.indirectColor1
                     icon: "tiny/edit"
                 }
@@ -126,12 +126,12 @@ Row {
         Row {
             id: headerTitleRow
             width: parent.width
-            spacing: 4
+            spacing: Theme.dp(4)
             StatusBaseText {
                 id: headerTitle
                 objectName: "headerTitle"
                 font.family: Theme.palette.baseFont.name
-                font.pixelSize: 17
+                font.pixelSize: Theme.dp(17)
                 font.bold: true
                 elide: statusImageWithTitle.titleElide
                 color: Theme.palette.directColor1
@@ -142,13 +142,13 @@ Row {
                 objectName: "editAvatarbButton"
                 visible: statusImageWithTitle.editable
                 anchors.verticalCenter: headerTitle.verticalCenter
-                height: 24
-                width: visible ? 24 : 0
+                height: Theme.dp(24)
+                width: visible ? Theme.dp(24) : 0
                 type: StatusFlatRoundButton.Type.Secondary
                 icon.name: "pencil"
                 icon.color: Theme.palette.directColor1
-                icon.width: 12.5
-                icon.height: 12.5
+                icon.width: Theme.dp(13)
+                icon.height: Theme.dp(13)
 
                 onClicked: statusImageWithTitle.editButtonClicked()
             }
@@ -158,7 +158,7 @@ Row {
             id: headerSubTitle
             objectName: "headerSubTitle"
             font.family: Theme.palette.baseFont.name
-            font.pixelSize: 15
+            font.pixelSize: Theme.dp(15)
             color:Theme.palette.baseColor1
             width: parent.width
             elide: statusImageWithTitle.subTitleElide
diff --git a/src/StatusQ/Popups/statusModal/StatusModalFooter.qml b/src/StatusQ/Popups/statusModal/StatusModalFooter.qml
index 42bc1803..ef64597e 100644
--- a/src/StatusQ/Popups/statusModal/StatusModalFooter.qml
+++ b/src/StatusQ/Popups/statusModal/StatusModalFooter.qml
@@ -15,7 +15,7 @@ Rectangle {
     property list<StatusBaseButton> rightButtons
     property bool showFooter: true
 
-    radius: 8
+    radius: Theme.dp(8)
 
     color: Theme.palette.statusModal.backgroundColor
 
@@ -31,27 +31,27 @@ Rectangle {
         }
     }
 
-    implicitHeight: rootLayout.implicitHeight + 30
+    implicitHeight: rootLayout.implicitHeight + Theme.dp(30)
 
     RowLayout {
         id: rootLayout
         anchors.verticalCenter: parent.verticalCenter
         anchors.left: parent.left
         anchors.right: parent.right
-        anchors.leftMargin: 16
-        anchors.rightMargin: 18
+        anchors.leftMargin: Theme.dp(16)
+        anchors.rightMargin: Theme.dp(18)
 
         Row {
             id: leftButtonsLayout
             Layout.alignment: Qt.AlignVCenter | Qt.AlignLeft
             visible: statusModalFooter.showFooter
 
-            spacing: 16
+            spacing: Theme.dp(16)
         }
 
         Item {
             Layout.fillWidth: true
-            implicitHeight: 1
+            implicitHeight: Theme.dp(1)
         }
 
         Row {
@@ -59,7 +59,7 @@ Rectangle {
             Layout.alignment: Qt.AlignVCenter | Qt.AlignRight
             visible: statusModalFooter.showFooter
 
-            spacing: 16
+            spacing: Theme.dp(16)
         }
     }
 
diff --git a/src/StatusQ/Popups/statusModal/StatusModalHeader.qml b/src/StatusQ/Popups/statusModal/StatusModalHeader.qml
index e4ba23c3..93dddffd 100644
--- a/src/StatusQ/Popups/statusModal/StatusModalHeader.qml
+++ b/src/StatusQ/Popups/statusModal/StatusModalHeader.qml
@@ -27,9 +27,9 @@ Rectangle {
     signal close
 
     implicitHeight: visible? Math.max(closeButton.height, imageWithTitle.implicitHeight) + 32 : 0
-    implicitWidth: 480
+    implicitWidth: Theme.dp(480)
 
-    radius: 16
+    radius: Theme.dp(16)
 
     color: Theme.palette.statusModal.backgroundColor
 
@@ -56,7 +56,7 @@ Rectangle {
         anchors.verticalCenter: parent.verticalCenter
         anchors.left: parent.left
         anchors.right: actionButtonLoader.left
-        anchors.leftMargin: 16
+        anchors.leftMargin: Theme.dp(16)
 
         editable: statusModalHeader.editable
         titleElide: statusModalHeader.titleElide
@@ -78,25 +78,25 @@ Rectangle {
         id: actionButtonLoader
         objectName: "actionButtonloader"
         anchors.right: closeButton.visible ? closeButton.left : parent.right
-        anchors.rightMargin: 8
+        anchors.rightMargin: Theme.dp(8)
         anchors.top: parent.top
-        anchors.topMargin: 16
+        anchors.topMargin: Theme.dp(16)
     }
 
     StatusFlatRoundButton {
         id: closeButton
         objectName: "headerClosebutton"
         anchors.right: parent.right
-        anchors.rightMargin: 20
+        anchors.rightMargin: Theme.dp(20)
         anchors.top: parent.top
-        anchors.topMargin: 16
-        width: 32
-        height: 32
+        anchors.topMargin: Theme.dp(16)
+        width: Theme.dp(32)
+        height: Theme.dp(32)
         type: StatusFlatRoundButton.Type.Secondary
         icon.name: "close"
         icon.color: Theme.palette.directColor1
-        icon.width: 20
-        icon.height: 20
+        icon.width: Theme.dp(20)
+        icon.height: Theme.dp(20)
         visible: statusModalHeader.hasCloseButton
 
         onClicked: statusModalHeader.close()