diff --git a/monitoring/MonitorEntryPoint.qml b/monitoring/MonitorEntryPoint.qml
index 912be5ad578..d2a8d265493 100644
--- a/monitoring/MonitorEntryPoint.qml
+++ b/monitoring/MonitorEntryPoint.qml
@@ -303,7 +303,7 @@ Component {
                                     readonly property bool last: headerRepeater.count - 1 === index
 
                                     text: model.name + (last ? "" : "  ->  ")
-                                    font.pixelSize: Theme.fontSize20
+                                    font.pixelSize: Theme.fontSize(20)
                                     font.bold: true
 
                                     selectByMouse: true
diff --git a/storybook/main.qml b/storybook/main.qml
index f5d33e78742..b679ac75f60 100644
--- a/storybook/main.qml
+++ b/storybook/main.qml
@@ -11,6 +11,8 @@ import QtQuick.Dialogs
 import QtMultimedia
 
 ApplicationWindow {
+    id: root
+
     width: 1450
     height: 840
     visible: true
@@ -26,7 +28,7 @@ ApplicationWindow {
 
         anchors.fill: parent
 
-        onDarkModeChanged: Theme.changeTheme(darkMode ? Theme.Style.Dark
-                                                      : Theme.Style.Light)
+        onDarkModeChanged: ThemeUtils.changeTheme(root, darkMode ? ThemeUtils.Style.Dark
+                                                                 : ThemeUtils.Style.Light)
     }
 }
diff --git a/storybook/pages/AirdropTokensSelectorPage.qml b/storybook/pages/AirdropTokensSelectorPage.qml
index 0ed97ed6fe9..6f59839162a 100644
--- a/storybook/pages/AirdropTokensSelectorPage.qml
+++ b/storybook/pages/AirdropTokensSelectorPage.qml
@@ -13,22 +13,22 @@ ColumnLayout {
         {
             tokenText: "2 MCT",
             networkText: "Ethereum",
-            tokenImage: Theme.png("tokens/SNT"),
-            networkImage: Theme.svg("network/Network=Ethereum"),
+            tokenImage: Assets.png("tokens/SNT"),
+            networkImage: Assets.svg("network/Network=Ethereum"),
             valid: true
         },
         {
             tokenText: "64 DAI",
             networkText: "Optimism",
-            tokenImage: Theme.png("tokens/DAI"),
-            networkImage: Theme.svg("network/Network=Optimism"),
+            tokenImage: Assets.png("tokens/DAI"),
+            networkImage: Assets.svg("network/Network=Optimism"),
             valid: false
         },
         {
             tokenText: "0.125 ETH",
             networkText: "Arbitrum",
-            tokenImage: Theme.png("tokens/ETH"),
-            networkImage: Theme.svg("network/Network=Arbitrum"),
+            tokenImage: Assets.png("tokens/ETH"),
+            networkImage: Assets.svg("network/Network=Arbitrum"),
             valid: true
         }
     ]
diff --git a/storybook/pages/BannerCardPage.qml b/storybook/pages/BannerCardPage.qml
index 22c4c9da50f..f6542731b7b 100644
--- a/storybook/pages/BannerCardPage.qml
+++ b/storybook/pages/BannerCardPage.qml
@@ -16,7 +16,7 @@ SplitView {
             anchors.centerIn: parent
             title: titleField.text
             subTitle: subTitleField.text
-            image: Theme.png("wallet/wallet-green")
+            image: Assets.png("wallet/wallet-green")
             closeEnabled: closeEnabled.checked
             onClicked: {
                 print("BannerCard clicked")
diff --git a/storybook/pages/BiometricsPopup.qml b/storybook/pages/BiometricsPopup.qml
index 73aa54e8e78..fabd7aee012 100644
--- a/storybook/pages/BiometricsPopup.qml
+++ b/storybook/pages/BiometricsPopup.qml
@@ -40,7 +40,7 @@ Dialog {
             Layout.fillWidth: true
             horizontalAlignment: Qt.AlignHCenter
             text: "Status Desktop"
-            font.pixelSize: Theme.fontSize20
+            font.pixelSize: Theme.fontSize(20)
         }
         Label {
             Layout.fillWidth: true
diff --git a/storybook/pages/CollectibleDetailViewPage.qml b/storybook/pages/CollectibleDetailViewPage.qml
index f260db38e4d..fcfb7607181 100644
--- a/storybook/pages/CollectibleDetailViewPage.qml
+++ b/storybook/pages/CollectibleDetailViewPage.qml
@@ -108,7 +108,7 @@ SplitView {
                             }
                             return {
                                 name : "Mock Community",
-                                image : Theme.png("tokens/UNI"),
+                                image : Assets.png("tokens/UNI"),
                                 color : "orchid"
                             }                        
                         }
diff --git a/storybook/pages/ColumnHeaderPanelPage.qml b/storybook/pages/ColumnHeaderPanelPage.qml
index 0ebbde68813..9352892be54 100644
--- a/storybook/pages/ColumnHeaderPanelPage.qml
+++ b/storybook/pages/ColumnHeaderPanelPage.qml
@@ -18,7 +18,7 @@ SplitView {
         property int membersCount: 184
         property bool amISectionAdmin: false
         property color color: "orchid"
-        property url image: Theme.png("tokens/UNI")
+        property url image: Assets.png("tokens/UNI")
         property bool openCreateChat: false
     }
 
diff --git a/storybook/pages/CommunityInfoEditor.qml b/storybook/pages/CommunityInfoEditor.qml
index 4c76932c47d..15e194f027f 100644
--- a/storybook/pages/CommunityInfoEditor.qml
+++ b/storybook/pages/CommunityInfoEditor.qml
@@ -16,9 +16,9 @@ ColumnLayout {
     property bool amISectionAdmin: true
     property bool isCommunityEditable: true
     property color color: "orchid"
-    property url image: Theme.png("tokens/UNI")
+    property url image: Assets.png("tokens/UNI")
     property bool colorVisible: false
-    property url banner: ctrlCommunityBanner.checked ? Theme.png("settings/communities@2x") : ""
+    property url banner: ctrlCommunityBanner.checked ? Assets.png("settings/communities@2x") : ""
     property bool adminControlsEnabled: true
 
     ColumnLayout {
@@ -94,15 +94,15 @@ ColumnLayout {
         RadioButton {
             checked: true
             text: qsTr("UNI")
-            onCheckedChanged: if(checked) root.image = Theme.png("tokens/UNI")
+            onCheckedChanged: if(checked) root.image = Assets.png("tokens/UNI")
         }
         RadioButton {
             text: qsTr("SOCKS")
-            onCheckedChanged: if(checked) root.image = Theme.png("tokens/SOCKS")
+            onCheckedChanged: if(checked) root.image = Assets.png("tokens/SOCKS")
         }
         RadioButton {
             text: qsTr("Status")
-            onCheckedChanged: if(checked) root.image = Theme.png("tokens/SNT")
+            onCheckedChanged: if(checked) root.image = Assets.png("tokens/SNT")
         }
     }
 
diff --git a/storybook/pages/ConcatModelPage.qml b/storybook/pages/ConcatModelPage.qml
index 1ab24cd2293..b3f4a8d996c 100644
--- a/storybook/pages/ConcatModelPage.qml
+++ b/storybook/pages/ConcatModelPage.qml
@@ -205,7 +205,7 @@ Item {
                     Label {
                         height: implicitHeight * 2
                         text: section + " inset"
-                        font.pixelSize: Theme.fontSize20
+                        font.pixelSize: Theme.fontSize(20)
                         font.bold: true
                         font.underline: true
 
diff --git a/storybook/pages/CurrencyAmountToLocaleStringPage.qml b/storybook/pages/CurrencyAmountToLocaleStringPage.qml
index ece81b2afb3..e30c5ed9442 100644
--- a/storybook/pages/CurrencyAmountToLocaleStringPage.qml
+++ b/storybook/pages/CurrencyAmountToLocaleStringPage.qml
@@ -55,7 +55,7 @@ SplitView {
             text: {
                 return LocaleUtils.currencyAmountToLocaleString(d.currencyAmount, d.options)
             }
-            font.pixelSize: Theme.fontSize24
+            font.pixelSize: Theme.fontSize(24)
         }
     }
 
diff --git a/storybook/pages/DerivationPathInputPage.qml b/storybook/pages/DerivationPathInputPage.qml
index 0168f1c5d49..d0346b86d26 100644
--- a/storybook/pages/DerivationPathInputPage.qml
+++ b/storybook/pages/DerivationPathInputPage.qml
@@ -138,7 +138,7 @@ SplitView {
 
                 Layout.fillWidth: true
 
-                font.pixelSize: Theme.fontSize22
+                font.pixelSize: Theme.fontSize(22)
                 font.italic: true
                 color: "red"
             }
@@ -148,7 +148,7 @@ SplitView {
 
                 Layout.fillWidth: true
 
-                font.pixelSize: Theme.fontSize22
+                font.pixelSize: Theme.fontSize(22)
                 font.italic: true
                 color: "orange"
             }
diff --git a/storybook/pages/ExportControlNodePopupPage.qml b/storybook/pages/ExportControlNodePopupPage.qml
index 7c996ef186a..bc0d0f6db27 100644
--- a/storybook/pages/ExportControlNodePopupPage.qml
+++ b/storybook/pages/ExportControlNodePopupPage.qml
@@ -91,7 +91,7 @@ SplitView {
                 property string id: "1"
                 property string name: "Socks"
                 property var members: { "count": 5 }
-                property string image: Theme.png("tokens/UNI")
+                property string image: Assets.png("tokens/UNI")
                 property string color: "orchid"
             }
             devicesStore: ProfileStores.DevicesStore {
diff --git a/storybook/pages/FunctionAggregatorPage.qml b/storybook/pages/FunctionAggregatorPage.qml
index 23d9bfcba70..21fa51fba4d 100644
--- a/storybook/pages/FunctionAggregatorPage.qml
+++ b/storybook/pages/FunctionAggregatorPage.qml
@@ -15,7 +15,7 @@ import Storybook
 Control {
     id: root
 
-    font.pixelSize: Theme.fontSize16
+    font.pixelSize: Theme.fontSize(16)
     padding: 10
 
     ListModel {
@@ -131,7 +131,7 @@ Control {
 
             insetComponent: Button {
                 height: 20
-                font.pixelSize: Theme.fontSize11
+                font.pixelSize: Theme.fontSize(11)
                 text: "remove"
 
                 onClicked: {
diff --git a/storybook/pages/ImagesGridViewPage.qml b/storybook/pages/ImagesGridViewPage.qml
index d1e84eb1a52..5cd02e7a554 100644
--- a/storybook/pages/ImagesGridViewPage.qml
+++ b/storybook/pages/ImagesGridViewPage.qml
@@ -28,7 +28,7 @@ Pane {
             Label {
                 anchors.centerIn: parent
                 text: "image " + index
-                font.pixelSize: Theme.fontSize20
+                font.pixelSize: Theme.fontSize(20)
             }
 
             Image {
diff --git a/storybook/pages/ImportControlNodePopupPage.qml b/storybook/pages/ImportControlNodePopupPage.qml
index fa0fa59f1b9..e1626d7c512 100644
--- a/storybook/pages/ImportControlNodePopupPage.qml
+++ b/storybook/pages/ImportControlNodePopupPage.qml
@@ -51,7 +51,7 @@ SplitView {
                 property string id: "1"
                 property string name: "Socks"
                 property var members: { "count": 5 }
-                property string image: Theme.png("tokens/UNI")
+                property string image: Assets.png("tokens/UNI")
                 property string color: "orchid"
             }
         }
diff --git a/storybook/pages/InlineNetworksComboBoxPage.qml b/storybook/pages/InlineNetworksComboBoxPage.qml
index 8c65c23bc41..2e8a3985a68 100644
--- a/storybook/pages/InlineNetworksComboBoxPage.qml
+++ b/storybook/pages/InlineNetworksComboBoxPage.qml
@@ -15,28 +15,28 @@ Item {
     readonly property var modelData: [
         {
             name: "Optimism",
-            icon: Theme.svg(ModelsData.networks.optimism),
+            icon: Assets.svg(ModelsData.networks.optimism),
             amount: "300",
             multiplierIndex: 0,
             infiniteAmount: false
         },
         {
             name: "Arbitrum",
-            icon: Theme.svg(ModelsData.networks.arbitrum),
+            icon: Assets.svg(ModelsData.networks.arbitrum),
             amount: "400000",
             multiplierIndex: 3,
             infiniteAmount: false
         },
         {
             name: "Hermez",
-            icon: Theme.svg(ModelsData.networks.hermez),
+            icon: Assets.svg(ModelsData.networks.hermez),
             amount: "0",
             multiplierIndex: 0,
             infiniteAmount: true
         },
         {
             name: "Ethereum",
-            icon: Theme.svg(ModelsData.networks.ethereum),
+            icon: Assets.svg(ModelsData.networks.ethereum),
             amount: "12" + "0".repeat(18),
             multiplierIndex: 18,
             infiniteAmount: false
diff --git a/storybook/pages/IntroPanelPage.qml b/storybook/pages/IntroPanelPage.qml
index be8634283de..46f1de7eb53 100644
--- a/storybook/pages/IntroPanelPage.qml
+++ b/storybook/pages/IntroPanelPage.qml
@@ -34,7 +34,7 @@ SplitView {
             anchors.margins: 50
             anchors.fill: parent
 
-            image: Theme.png("community/airdrops8_1")
+            image: Assets.png("community/airdrops8_1")
 
             title: radioButtonsGroup.text
             subtitle: radioButtonsGroup.text
diff --git a/storybook/pages/JoinCommunityViewPage.qml b/storybook/pages/JoinCommunityViewPage.qml
index 2696a667c9b..04a77772fba 100644
--- a/storybook/pages/JoinCommunityViewPage.qml
+++ b/storybook/pages/JoinCommunityViewPage.qml
@@ -54,7 +54,7 @@ Nemo enim 😋 ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit,
         // Blur background:
         property int membersCount: 184
         property bool amISectionAdmin: false
-        property url image: Theme.png("tokens/UNI")
+        property url image: Assets.png("tokens/UNI")
         property var communityItemsModel: model1
         property string chatDateTimeText: "Dec 31, 2020"
         property string  listUsersText: "simon, Mark Cuban "
@@ -176,7 +176,7 @@ Nemo enim 😋 ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit,
                     Layout.fillWidth: true
                     text: "BLUR INFO EDITOR"
                     font.bold: true
-                    font.pixelSize: Theme.fontSize18
+                    font.pixelSize: Theme.fontSize(18)
                 }
 
                 CommunityInfoEditor {
@@ -216,7 +216,7 @@ Nemo enim 😋 ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit,
                     Layout.fillWidth: true
                     text: "JOIN TYPES"
                     font.bold: true
-                    font.pixelSize: Theme.fontSize18
+                    font.pixelSize: Theme.fontSize(18)
                 }
 
                 ColumnLayout {
@@ -257,7 +257,7 @@ Nemo enim 😋 ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit,
                     Layout.fillWidth: true
                     text: "JOIN HOLDINGS EDITOR"
                     font.bold: true
-                    font.pixelSize: Theme.fontSize18
+                    font.pixelSize: Theme.fontSize(18)
                 }
 
                 JoinCommunityPermissionsEditor {
diff --git a/storybook/pages/LinkPreviewCardPage.qml b/storybook/pages/LinkPreviewCardPage.qml
index 543771a1b50..8e898a6b6ac 100644
--- a/storybook/pages/LinkPreviewCardPage.qml
+++ b/storybook/pages/LinkPreviewCardPage.qml
@@ -15,7 +15,7 @@ SplitView {
     id: root
 
     property string ytBannerQuality: "hqdefault"
-    property string image: Theme.png("tokens/SOCKS")
+    property string image: Assets.png("tokens/SOCKS")
     property string banner: rawImageCheck.checked ? rawImageCheck.rawImageData : "https://img.youtube.com/vi/yHN1M7vcPKU/%1.jpg".arg(root.ytBannerQuality)
     property bool globalUtilsReady: false
 
@@ -275,8 +275,8 @@ SplitView {
 
             RadioButton {
                 text: qsTr("QRC asset: SOCKS")
-                checked: root.image === Theme.png("tokens/SOCKS")
-                onToggled: root.image = Theme.png("tokens/SOCKS")
+                checked: root.image === Assets.png("tokens/SOCKS")
+                onToggled: root.image = Assets.png("tokens/SOCKS")
             }
 
             ColumnLayout {
diff --git a/storybook/pages/ModelEntryPage.qml b/storybook/pages/ModelEntryPage.qml
index bb21e548116..4471c7b818a 100644
--- a/storybook/pages/ModelEntryPage.qml
+++ b/storybook/pages/ModelEntryPage.qml
@@ -105,7 +105,7 @@ Control {
             insetComponent: RowLayout {
                 Button {
                     height: 20
-                    font.pixelSize: Theme.fontSize11
+                    font.pixelSize: Theme.fontSize(11)
                     text: "remove"
                     highlighted: model.index === itemData.row
 
@@ -115,7 +115,7 @@ Control {
                 }
                 Button {
                     height: 20
-                    font.pixelSize: Theme.fontSize11
+                    font.pixelSize: Theme.fontSize(11)
                     text: "edit"
                     highlighted: model.index === itemData.row
 
@@ -135,7 +135,7 @@ Control {
                 width: parent.width
                 text: "Item Signals"
                 font.bold: true
-                font.pixelSize: Theme.fontSize16
+                font.pixelSize: Theme.fontSize(16)
                 bottomPadding: 20
                 Button {
                     anchors.right: parent.right
diff --git a/storybook/pages/MovableModelWithSfpmPage.qml b/storybook/pages/MovableModelWithSfpmPage.qml
index 0a04e45429f..6a21d8529bf 100644
--- a/storybook/pages/MovableModelWithSfpmPage.qml
+++ b/storybook/pages/MovableModelWithSfpmPage.qml
@@ -412,7 +412,7 @@ Item {
             Layout.alignment: Qt.AlignHCenter
 
             text: "SAVE ORDER"
-            font.pixelSize: Theme.fontSize30
+            font.pixelSize: Theme.fontSize(30)
 
             onClicked: {
                 const count = simpleSourceModel.count
diff --git a/storybook/pages/NetworkSelectItemDelegatePage.qml b/storybook/pages/NetworkSelectItemDelegatePage.qml
index e6aeabda7f1..2fad080907f 100644
--- a/storybook/pages/NetworkSelectItemDelegatePage.qml
+++ b/storybook/pages/NetworkSelectItemDelegatePage.qml
@@ -26,7 +26,7 @@ SplitView {
         NetworkSelectItemDelegate {
             id: delegate
             title: "Ethereum"
-            iconUrl: Theme.svg("network/Network=Ethereum")
+            iconUrl: Assets.svg("network/Network=Ethereum")
             showIndicator: true
             multiSelection: true
             checkState: checkStateSelector.checkState
diff --git a/storybook/pages/NotificationAvatarPage.qml b/storybook/pages/NotificationAvatarPage.qml
index 46b828e1033..a8f1b8fa3d9 100644
--- a/storybook/pages/NotificationAvatarPage.qml
+++ b/storybook/pages/NotificationAvatarPage.qml
@@ -30,7 +30,7 @@ SplitView {
                 Tracer {
                     visible: avatarEditor.showImplicitSizeArea
                 }
-                avatarSource: avatarEditor.changeAvatarImage ? "https://i.pravatar.cc/128?img=5" : Theme.png("status-logo-icon")
+                avatarSource: avatarEditor.changeAvatarImage ? "https://i.pravatar.cc/128?img=5" : Assets.png("status-logo-icon")
                 badgeIconName: root.badgeIconName
                 density: avatarEditor.density
                 circular: avatarEditor.isRoundedAvatar
diff --git a/storybook/pages/NotificationCardBaseEditor.qml b/storybook/pages/NotificationCardBaseEditor.qml
index 37922783e2f..2bb7c0616fc 100644
--- a/storybook/pages/NotificationCardBaseEditor.qml
+++ b/storybook/pages/NotificationCardBaseEditor.qml
@@ -3,6 +3,7 @@ import QtQuick.Controls
 import QtQuick.Layouts
 
 import StatusQ.Core.Theme
+import QtQuick.Window
 
 
 Control {
@@ -48,7 +49,7 @@ Control {
             Layout.leftMargin: Theme.padding
             text: "XS"
             onCheckedChanged: {
-                Theme.changeFontSize(Theme.FontSize.FontSizeXS)
+                ThemeUtils.setFontSize(Window.window, ThemeUtils.FontSize.FontSizeXS)
             }
         }
 
@@ -56,7 +57,7 @@ Control {
             Layout.leftMargin: Theme.padding
             text: "S"
             onCheckedChanged: {
-                Theme.changeFontSize(Theme.FontSize.FontSizeS)
+                ThemeUtils.setFontSize(Window.window, ThemeUtils.FontSize.FontSizeS)
             }
         }
 
@@ -65,7 +66,7 @@ Control {
             text: "M"
             checked: true
             onCheckedChanged: {
-                Theme.changeFontSize(Theme.FontSize.FontSizeM)
+                ThemeUtils.setFontSize(Window.window, ThemeUtils.FontSize.FontSizeM)
             }
         }
 
@@ -73,7 +74,7 @@ Control {
             Layout.leftMargin: Theme.padding
             text: "L"
             onCheckedChanged: {
-                Theme.changeFontSize(Theme.FontSize.FontSizeL)
+                ThemeUtils.setFontSize(Window.window, ThemeUtils.FontSize.FontSizeL)
             }
         }
 
@@ -81,7 +82,7 @@ Control {
             Layout.leftMargin: Theme.padding
             text: "XL"
             onCheckedChanged: {
-                Theme.changeFontSize(Theme.FontSize.FontSizeXL)
+                ThemeUtils.setFontSize(Window.window, ThemeUtils.FontSize.FontSizeXL)
             }
         }
 
@@ -89,7 +90,7 @@ Control {
             Layout.leftMargin: Theme.padding
             text: "XXL"
             onCheckedChanged: {
-                Theme.changeFontSize(Theme.FontSize.FontSizeXXL)
+                ThemeUtils.setFontSize(Window.window, ThemeUtils.FontSize.FontSizeXXL)
             }
         }
 
diff --git a/storybook/pages/NotificationCardPage.qml b/storybook/pages/NotificationCardPage.qml
index db1996a6022..7d7a0c39c8e 100644
--- a/storybook/pages/NotificationCardPage.qml
+++ b/storybook/pages/NotificationCardPage.qml
@@ -56,7 +56,7 @@ SplitView {
                 selected: selectedCheck.checked
 
                 // Avatar related
-                avatarSource: avatarEditor.changeAvatarImage ? "https://i.pravatar.cc/128?img=5" : Theme.png("status-logo-icon")
+                avatarSource: avatarEditor.changeAvatarImage ? "https://i.pravatar.cc/128?img=5" : Assets.png("status-logo-icon")
                 badgeIconName: avatarEditor.changeBadgeIcon ? "action-mention" : "action-reply"
                 isCircularAvatar: avatarEditor.isRoundedAvatar
 
diff --git a/storybook/pages/ProfileDialogViewPage.qml b/storybook/pages/ProfileDialogViewPage.qml
index 50f665ab7eb..c08482677f3 100644
--- a/storybook/pages/ProfileDialogViewPage.qml
+++ b/storybook/pages/ProfileDialogViewPage.qml
@@ -155,7 +155,7 @@ SplitView {
                             isContact: ctrlIsContact.checked
                             contactRequestState: ctrlContactRequestState.currentValue
 
-                            largeImage: userImageCheckBox.checked ? Theme.png("status-logo") : ""
+                            largeImage: userImageCheckBox.checked ? Assets.png("status-logo") : ""
 
                             onlineStatus: onlineStatusComboBox.currentValue
 
diff --git a/storybook/pages/ProfileShowcaseModelsPage.qml b/storybook/pages/ProfileShowcaseModelsPage.qml
index 6a170d41687..419f8888064 100644
--- a/storybook/pages/ProfileShowcaseModelsPage.qml
+++ b/storybook/pages/ProfileShowcaseModelsPage.qml
@@ -160,7 +160,7 @@ ColumnLayout {
 
                     Label {
                         text: "Backend models"
-                        font.pixelSize: Theme.fontSize22
+                        font.pixelSize: Theme.fontSize(22)
                         padding: 10
                     }
 
@@ -179,7 +179,7 @@ ColumnLayout {
 
                     Label {
                         text: "Display models"
-                        font.pixelSize: Theme.fontSize22
+                        font.pixelSize: Theme.fontSize(22)
                         padding: 10
                     }
 
@@ -251,7 +251,7 @@ ColumnLayout {
 
                     Label {
                         text: "Backend models"
-                        font.pixelSize: Theme.fontSize22
+                        font.pixelSize: Theme.fontSize(22)
                         padding: 10
                     }
                     GenericListView {
@@ -268,7 +268,7 @@ ColumnLayout {
                     Layout.fillWidth: true
                     Label {
                         text: "Display models"
-                        font.pixelSize: Theme.fontSize22
+                        font.pixelSize: Theme.fontSize(22)
                         padding: 10
                     }
 
@@ -357,7 +357,7 @@ ColumnLayout {
 
                     Label {
                         text: "Backend models"
-                        font.pixelSize: Theme.fontSize22
+                        font.pixelSize: Theme.fontSize(22)
                         padding: 10
                     }
 
@@ -377,7 +377,7 @@ ColumnLayout {
 
                     Label {
                         text: "Display models"
-                        font.pixelSize: Theme.fontSize22
+                        font.pixelSize: Theme.fontSize(22)
                         padding: 10
                     }
 
diff --git a/storybook/pages/SendSignModalPage.qml b/storybook/pages/SendSignModalPage.qml
index 4bc420b2804..f4a0c7099a9 100644
--- a/storybook/pages/SendSignModalPage.qml
+++ b/storybook/pages/SendSignModalPage.qml
@@ -147,7 +147,7 @@ SplitView {
 
                     networkShortName: priv.selectedNetwork.shortName
                     networkName: priv.selectedNetwork.chainName
-                    networkIconPath: Theme.svg(priv.selectedNetwork.iconUrl)
+                    networkIconPath: Assets.svg(priv.selectedNetwork.iconUrl)
                     networkBlockExplorerUrl: priv.selectedNetwork.blockExplorerURL
                     networkChainId: priv.selectedNetwork.chainId
 
diff --git a/storybook/pages/SimpleSendModalPage.qml b/storybook/pages/SimpleSendModalPage.qml
index d618e2ebbfd..06ddc1db648 100644
--- a/storybook/pages/SimpleSendModalPage.qml
+++ b/storybook/pages/SimpleSendModalPage.qml
@@ -674,7 +674,7 @@ SplitView {
                             icon: {
                                 const iconUrl = ModelUtils.getByKey(NetworksModel.flatNetworks, "chainId", model.chainId, "iconUrl")
                                 if(!!iconUrl)
-                                    return Theme.svg(iconUrl)
+                                    return Assets.svg(iconUrl)
                                 else return ""
                             }
                         }
diff --git a/storybook/pages/StatusBlockProgressBarPage.qml b/storybook/pages/StatusBlockProgressBarPage.qml
index 2e6fa0e4538..3aee8e933dc 100644
--- a/storybook/pages/StatusBlockProgressBarPage.qml
+++ b/storybook/pages/StatusBlockProgressBarPage.qml
@@ -61,7 +61,7 @@ SplitView {
                 id: darkMode
                 text: "Dark Mode"
                 checked: false
-                onCheckedChanged: rect.color = Theme.palette.getColor('graphite3')
+                onCheckedChanged: rect.color = StatusColors.getColor('graphite3')
             }
         }
     }
diff --git a/storybook/pages/StatusCardPage.qml b/storybook/pages/StatusCardPage.qml
index 9a44d340fa3..de09336fcd8 100644
--- a/storybook/pages/StatusCardPage.qml
+++ b/storybook/pages/StatusCardPage.qml
@@ -58,7 +58,7 @@ Item {
             StatusCheckBox {
                 Layout.alignment: Qt.AlignVCenter
                 text: "advancedMode"
-                font.family: Theme.monoFont.name
+                font.family: Fonts.monoFont.family
                 onClicked: {
                     card.advancedMode = checked
                 }
@@ -68,7 +68,7 @@ Item {
             StatusCheckBox {
                 Layout.alignment: Qt.AlignVCenter
                 text: "loading"
-                font.family: Theme.monoFont.name
+                font.family: Fonts.monoFont.family
                 onClicked: {
                     card.loading = checked
                 }
diff --git a/storybook/pages/StatusDialogPage.qml b/storybook/pages/StatusDialogPage.qml
index 53585a6a263..2783db58f63 100644
--- a/storybook/pages/StatusDialogPage.qml
+++ b/storybook/pages/StatusDialogPage.qml
@@ -46,7 +46,7 @@ SplitView {
                 spacing: 16
                 StatusBaseText {
                     Layout.fillWidth: true
-                    font.pixelSize: Theme.fontSize22
+                    font.pixelSize: Theme.fontSize(22)
                     font.bold: true
                     text: "Custom header inside contentItem"
                 }
diff --git a/storybook/pages/StatusFlowSelectorPage.qml b/storybook/pages/StatusFlowSelectorPage.qml
index c42155bfdec..ae6e620bb98 100644
--- a/storybook/pages/StatusFlowSelectorPage.qml
+++ b/storybook/pages/StatusFlowSelectorPage.qml
@@ -13,7 +13,7 @@ ColumnLayout {
         Layout.fillWidth: true
         Layout.margins: 100
 
-        icon: Theme.png("tokens/SNT")
+        icon: Assets.png("tokens/SNT")
         title: "Item Selector Title"
 
         placeholderText: "Example: Empty items"
diff --git a/storybook/pages/StatusGroupBoxPage.qml b/storybook/pages/StatusGroupBoxPage.qml
index 6b54f3e8ebe..e5602d7fad7 100644
--- a/storybook/pages/StatusGroupBoxPage.qml
+++ b/storybook/pages/StatusGroupBoxPage.qml
@@ -43,7 +43,7 @@ SplitView {
             anchors.centerIn: parent
 
             title: titleTextEdit.text
-            icon: Theme.png("tokens/SNT")
+            icon: Assets.png("tokens/SNT")
             iconSize: iconSizeSlider.value
 
             label.enabled: labelEnabledCheckBox.checked
diff --git a/storybook/pages/StatusItemSelectorPage.qml b/storybook/pages/StatusItemSelectorPage.qml
index 463aa3a4dd2..da10050915d 100644
--- a/storybook/pages/StatusItemSelectorPage.qml
+++ b/storybook/pages/StatusItemSelectorPage.qml
@@ -17,7 +17,7 @@ ColumnLayout {
         Layout.fillWidth: true
         Layout.margins: 50
 
-        icon: Theme.png("tokens/SNT")
+        icon: Assets.png("tokens/SNT")
         title: "Item Selector Title"
 
         placeholderText: "Example: Empty items"
@@ -47,7 +47,7 @@ ColumnLayout {
                     onClicked: {
                         model.append({
                             text: input.text,
-                            imageSource: Theme.png("tokens/SNT"),
+                            imageSource: Assets.png("tokens/SNT"),
                             isIcon: false,
                             operator: model.count > 0 ? OperatorsUtils.Operators.Or
                                                       : OperatorsUtils.Operators.None
diff --git a/storybook/pages/StatusScrollViewPage.qml b/storybook/pages/StatusScrollViewPage.qml
index 70186295127..0246a7c30b2 100644
--- a/storybook/pages/StatusScrollViewPage.qml
+++ b/storybook/pages/StatusScrollViewPage.qml
@@ -130,7 +130,7 @@ SplitView {
                     id: textItem
                     Layout.fillWidth: true
                     text: "This header is fixed and not scrollable"
-                    font.pixelSize: Theme.fontSize18
+                    font.pixelSize: Theme.fontSize(18)
                 }
 
                 Item {
diff --git a/storybook/pages/SwapApproveCapModalPage.qml b/storybook/pages/SwapApproveCapModalPage.qml
index aeb9a86fb9e..4d42fc64c4c 100644
--- a/storybook/pages/SwapApproveCapModalPage.qml
+++ b/storybook/pages/SwapApproveCapModalPage.qml
@@ -92,7 +92,7 @@ SplitView {
 
                     networkShortName: priv.selectedNetwork.shortName
                     networkName: priv.selectedNetwork.chainName
-                    networkIconPath: Theme.svg(priv.selectedNetwork.iconUrl)
+                    networkIconPath: Assets.svg(priv.selectedNetwork.iconUrl)
                     networkBlockExplorerUrl: priv.selectedNetwork.blockExplorerURL
                     networkChainId: priv.selectedNetwork.chainId
 
diff --git a/storybook/pages/SwapSignModalPage.qml b/storybook/pages/SwapSignModalPage.qml
index c3d12c3101c..36baf5cbb61 100644
--- a/storybook/pages/SwapSignModalPage.qml
+++ b/storybook/pages/SwapSignModalPage.qml
@@ -95,7 +95,7 @@ SplitView {
 
                     networkShortName: priv.selectedNetwork.shortName
                     networkName: priv.selectedNetwork.chainName
-                    networkIconPath: Theme.svg(priv.selectedNetwork.iconUrl)
+                    networkIconPath: Assets.svg(priv.selectedNetwork.iconUrl)
                     networkBlockExplorerUrl: priv.selectedNetwork.blockExplorerURL
                     networkChainId: priv.selectedNetwork.chainId
 
diff --git a/storybook/pages/ThemePage.qml b/storybook/pages/ThemePage.qml
new file mode 100644
index 00000000000..e45b1af9df2
--- /dev/null
+++ b/storybook/pages/ThemePage.qml
@@ -0,0 +1,196 @@
+import QtQuick
+import QtQuick.Controls
+import QtQuick.Layouts
+
+import StatusQ.Core.Theme
+
+Item {
+    id: root
+
+    component Panel: Control {
+        id: panel
+
+        default property alias content: page.contentChildren
+        property alias color: background.color
+
+        background: Rectangle {
+            id: background
+
+            color: "yellow"
+        }
+
+        padding: Theme.padding
+
+        contentItem: Page {
+            id: page
+
+            footer: ColumnLayout {
+                RowLayout {
+                    Button {
+                        text: "reset padding"
+
+                        onClicked: {
+                            panel.Theme.padding = undefined
+                        }
+
+                        enabled: panel.Theme.explicitPadding
+                    }
+
+                    Slider {
+                        Layout.preferredWidth: 150
+
+                        from: 0
+                        to: 50
+                        stepSize: 1
+
+                        value: panel.Theme.padding
+
+                        onValueChanged: {
+                            if (value !== panel.Theme.padding)
+                                panel.Theme.padding = value
+                        }
+                    }
+
+                    Label {
+                        Layout.fillWidth: true
+                        wrapMode: Text.Wrap
+
+                        font.pixelSize: Theme.fontSize(13)
+                        text: `padding: ${panel.Theme.padding}`
+                    }
+                }
+
+                RowLayout {
+                    Button {
+                        text: "reset font size"
+
+                        onClicked: {
+                            panel.Theme.fontSizeOffset = undefined
+                        }
+
+                        enabled: panel.Theme.explicitFontSizeOffset
+                    }
+
+                    Slider {
+                        Layout.preferredWidth: 150
+
+                        from: -5
+                        to: 10
+                        stepSize: 1
+
+                        value: panel.Theme.fontSizeOffset
+
+                        onValueChanged: {
+                            if (value !== panel.Theme.fontSizeOffset)
+                                panel.Theme.fontSizeOffset = value
+                        }
+                    }
+
+                    Label {
+                        Layout.fillWidth: true
+                        wrapMode: Text.Wrap
+
+                        font.pixelSize: Theme.fontSize(13)
+                        text: `font size offset: ${panel.Theme.fontSizeOffset}`
+                    }
+                }
+
+                RowLayout {
+                    Label {
+                        text: `theme:`
+                    }
+                    Button {
+                        text: "Dark"
+                        onClicked: panel.Theme.style = Theme.Dark
+                    }
+
+                    Button {
+                        text: "Light"
+                        onClicked: panel.Theme.style = Theme.Light
+                    }
+
+                    Button {
+                        text: "Reset"
+                        enabled: panel.Theme.explicitStyle
+                        onClicked: panel.Theme.style = undefined
+                    }
+
+                    Rectangle {
+                        border.width: 1
+                        Layout.fillHeight: true
+                        Layout.preferredWidth: height
+
+                        color: Theme.palette.background
+                    }
+                }
+            }
+        }
+    }
+
+    Panel {
+        anchors.fill: parent
+
+        Panel {
+            anchors.fill: parent
+
+            color: "green"
+
+            RowLayout {
+                anchors.fill: parent
+
+                spacing: 0
+
+                Panel {
+                    Layout.fillWidth: true
+                    Layout.fillHeight: true
+                    Layout.minimumWidth: parent.width / 2
+
+                    color: "red"
+                }
+
+                Panel {
+                    Layout.fillWidth: true
+                    Layout.fillHeight: true
+                    Layout.minimumWidth: parent.width / 2
+
+                    color: "blue"
+                }
+            }
+        }
+    }
+
+    Rectangle {
+        anchors.fill: row
+        anchors.margins: -10
+        border.color: "gray"
+        opacity: 0.8
+    }
+
+    RowLayout {
+        id: row
+
+        anchors.horizontalCenter: parent.horizontalCenter
+        anchors.top: parent.top
+        anchors.margins: 100
+
+        Label {
+            text: "Top level padding:"
+        }
+
+        Slider {
+
+            from: 0
+            to: 50
+            stepSize: 1
+
+            value: root.Theme.padding
+
+            onValueChanged: {
+                root.Theme.padding = value
+            }
+        }
+    }
+}
+
+// category: Utils
+// status: good
diff --git a/storybook/pages/TokenPanelPage.qml b/storybook/pages/TokenPanelPage.qml
index 02cb82f5863..1f013d33d83 100644
--- a/storybook/pages/TokenPanelPage.qml
+++ b/storybook/pages/TokenPanelPage.qml
@@ -23,7 +23,7 @@ SplitView {
         readonly property var modelData: [
             {
                 name: "Optimism",
-                icon: Theme.svg(ModelsData.networks.optimism),
+                icon: Assets.svg(ModelsData.networks.optimism),
                 amount: "300",
                 multiplierIndex: 0,
                 infiniteAmount: false,
@@ -31,7 +31,7 @@ SplitView {
             },
             {
                 name: "Arbitrum",
-                icon: Theme.svg(ModelsData.networks.arbitrum),
+                icon: Assets.svg(ModelsData.networks.arbitrum),
                 amount: "400000",
                 multiplierIndex: 3,
                 infiniteAmount: false,
@@ -39,7 +39,7 @@ SplitView {
             },
             {
                 name: "Hermez",
-                icon: Theme.svg(ModelsData.networks.hermez),
+                icon: Assets.svg(ModelsData.networks.hermez),
                 amount: "0",
                 multiplierIndex: 0,
                 infiniteAmount: true,
@@ -47,7 +47,7 @@ SplitView {
             },
             {
                 name: "Ethereum",
-                icon: Theme.svg(ModelsData.networks.ethereum),
+                icon: Assets.svg(ModelsData.networks.ethereum),
                 amount: "12" + "0".repeat(18),
                 multiplierIndex: 18,
                 infiniteAmount: false,
diff --git a/storybook/pages/TransactionDelegatePage.qml b/storybook/pages/TransactionDelegatePage.qml
index 0abd8660c91..e0b08f502fd 100644
--- a/storybook/pages/TransactionDelegatePage.qml
+++ b/storybook/pages/TransactionDelegatePage.qml
@@ -36,13 +36,13 @@ SplitView {
         readonly property bool isNFT: ctrlIsNft.checked
         readonly property bool isCommunityAssetViaAirdrop: isCommunityAssetViaAirdrop.checked
         readonly property string communityName: "Doodles"
-        readonly property string communityImageUrl: Theme.png("collectibles/HappyMeow")
+        readonly property string communityImageUrl: Assets.png("collectibles/HappyMeow")
         readonly property string tokenID: "4981676894159712808201908443964193325271219637660871887967796332739046670337"
         readonly property string tokenAddress: "0xdeadbeef"
         readonly property string tokenInAddress: "0xdeadbeef-in"
         readonly property string tokenOutAddress: "0xdeadbeef-out"
         readonly property string nftName: "Happy Meow NFT"
-        readonly property string nftImageUrl: Theme.png("collectibles/HappyMeow")
+        readonly property string nftImageUrl: Assets.png("collectibles/HappyMeow")
         readonly property int chainId: 1
         readonly property int chainIdIn: 1
         readonly property int chainIdOut: 2
diff --git a/storybook/qmlTests/tests/tst_NetworkSelectItemDelegate.qml b/storybook/qmlTests/tests/tst_NetworkSelectItemDelegate.qml
index 05cc6c0beea..3dbe141855c 100644
--- a/storybook/qmlTests/tests/tst_NetworkSelectItemDelegate.qml
+++ b/storybook/qmlTests/tests/tst_NetworkSelectItemDelegate.qml
@@ -18,7 +18,7 @@ Item {
         NetworkSelectItemDelegate {
             anchors.centerIn: parent
             title: "Ethereum"
-            iconUrl: Theme.svg("network/Network=Ethereum")
+            iconUrl: Assets.svg("network/Network=Ethereum")
             onToggled: root.onToggledHandler()
         }
     }
@@ -68,11 +68,11 @@ Item {
 
         function test_icon() {
             verify(!!controlUnderTest)
-            compare(controlUnderTest.iconUrl, Theme.svg("network/Network=Ethereum"))
-            compare(findChild(controlUnderTest, "statusRoundImage").image.source, Theme.svg("network/Network=Ethereum"))
-            controlUnderTest.iconUrl = Theme.svg("network/Network=Polygon")
-            compare(controlUnderTest.iconUrl, Theme.svg("network/Network=Polygon"))
-            compare(findChild(controlUnderTest, "statusRoundImage").image.source, Theme.svg("network/Network=Polygon"))
+            compare(controlUnderTest.iconUrl, Assets.svg("network/Network=Ethereum"))
+            compare(findChild(controlUnderTest, "statusRoundImage").image.source, Assets.svg("network/Network=Ethereum"))
+            controlUnderTest.iconUrl = Assets.svg("network/Network=Polygon")
+            compare(controlUnderTest.iconUrl, Assets.svg("network/Network=Polygon"))
+            compare(findChild(controlUnderTest, "statusRoundImage").image.source, Assets.svg("network/Network=Polygon"))
         }
 
         function test_indicatorConfig() {
diff --git a/storybook/qmlTests/tests/tst_NetworkSelectorView.qml b/storybook/qmlTests/tests/tst_NetworkSelectorView.qml
index be764549792..5511a1042ad 100644
--- a/storybook/qmlTests/tests/tst_NetworkSelectorView.qml
+++ b/storybook/qmlTests/tests/tst_NetworkSelectorView.qml
@@ -86,7 +86,7 @@ Item {
 
                 verify(!!delegate)
                 compare(delegate.title, model.chainName)
-                compare(delegate.iconUrl, Theme.svg(model.iconUrl))
+                compare(delegate.iconUrl, Assets.svg(model.iconUrl))
                 compare(delegate.showIndicator, controlUnderTest.showIndicator)
                 compare(delegate.multiSelection, controlUnderTest.multiSelection)
                 compare(delegate.checkState, controlUnderTest.selection.includes(model.chainId) ? Qt.Checked : Qt.Unchecked)
diff --git a/storybook/qmlTests/tests/tst_SendSignModal.qml b/storybook/qmlTests/tests/tst_SendSignModal.qml
index a489777ba3b..2b521b261a4 100644
--- a/storybook/qmlTests/tests/tst_SendSignModal.qml
+++ b/storybook/qmlTests/tests/tst_SendSignModal.qml
@@ -43,7 +43,7 @@ Item {
 
             networkShortName: Constants.networkShortChainNames.mainnet
             networkName: "Mainnet"
-            networkIconPath: Theme.svg("network/Network=Ethereum")
+            networkIconPath: Assets.svg("network/Network=Ethereum")
             networkBlockExplorerUrl: "https://etherscan.io/"
             networkChainId: 1
 
diff --git a/storybook/qmlTests/tests/tst_StatusDialog.qml b/storybook/qmlTests/tests/tst_StatusDialog.qml
index e0bc5aee7c6..f73a3a62a96 100644
--- a/storybook/qmlTests/tests/tst_StatusDialog.qml
+++ b/storybook/qmlTests/tests/tst_StatusDialog.qml
@@ -27,10 +27,10 @@ Item {
 
     QtObject {
         id: d
-        readonly property int desktopWindowWidth: Theme.portraitBreakpoint.width + 100
-        readonly property int desktopWindowHeight: Theme.portraitBreakpoint.height + 100
+        readonly property int desktopWindowWidth: ThemeUtils.portraitBreakpoint.width + 100
+        readonly property int desktopWindowHeight: ThemeUtils.portraitBreakpoint.height + 100
         readonly property int mobileWindowWidth: mobileWindowHeight / 2
-        readonly property int mobileWindowHeight: Theme.portraitBreakpoint.height - 100
+        readonly property int mobileWindowHeight: ThemeUtils.portraitBreakpoint.height - 100
     }
 
     property StatusDialog controlUnderTest: null
diff --git a/storybook/qmlTests/tests/tst_SwapApproveCapModal.qml b/storybook/qmlTests/tests/tst_SwapApproveCapModal.qml
index e2030728a72..516b8dbf679 100644
--- a/storybook/qmlTests/tests/tst_SwapApproveCapModal.qml
+++ b/storybook/qmlTests/tests/tst_SwapApproveCapModal.qml
@@ -36,7 +36,7 @@ Item {
 
             networkShortName: Constants.networkShortChainNames.mainnet
             networkName: "Mainnet"
-            networkIconPath: Theme.svg("network/Network=Ethereum")
+            networkIconPath: Assets.svg("network/Network=Ethereum")
             networkBlockExplorerUrl: "https://etherscan.io/"
             networkChainId: 1
 
@@ -161,7 +161,7 @@ Item {
             compare(smartContractBox.caption, qsTr("Via smart contract"))
             compare(smartContractBox.primaryText, controlUnderTest.serviceProviderName)
             compare(smartContractBox.secondaryText, SQUtils.Utils.elideAndFormatWalletAddress(controlUnderTest.serviceProviderContractAddress))
-            compare(smartContractBox.icon, Theme.png("swap/paraswap"))
+            compare(smartContractBox.icon, Assets.png("swap/paraswap"))
         }
 
         function test_networkInfo() {
diff --git a/storybook/qmlTests/tests/tst_SwapModal.qml b/storybook/qmlTests/tests/tst_SwapModal.qml
index e5366e223e0..311524b7fd2 100644
--- a/storybook/qmlTests/tests/tst_SwapModal.qml
+++ b/storybook/qmlTests/tests/tst_SwapModal.qml
@@ -306,7 +306,7 @@ Item {
 
                 const balance = delegateUnderTest.model.accountBalance.balance
 
-                compare(inlineTagDelegate_0.asset.name, Theme.svg(delegateUnderTest.model.accountBalance.iconUrl))
+                compare(inlineTagDelegate_0.asset.name, Assets.svg(delegateUnderTest.model.accountBalance.iconUrl))
                 compare(inlineTagDelegate_0.asset.color.toString().toUpperCase(), delegateUnderTest.model.accountBalance.chainColor.toString().toUpperCase())
                 compare(inlineTagDelegate_0.titleText.color, balance === "0" ? Theme.palette.baseColor1 : Theme.palette.directColor1)
 
@@ -462,7 +462,7 @@ Item {
                     const inlineTagDelegate_0 = findChild(accountDelegateUnderTest, "inlineTagDelegate_0")
                     verify(!!inlineTagDelegate_0)
 
-                    compare(inlineTagDelegate_0.asset.name, Theme.svg(networkModelItem.iconUrl))
+                    compare(inlineTagDelegate_0.asset.name, Assets.svg(networkModelItem.iconUrl))
                     compare(inlineTagDelegate_0.asset.color.toString().toUpperCase(), networkModelItem.chainColor.toString().toUpperCase())
 
                     let balancesModel = SQUtils.ModelUtils.getByKey(root.swapAdaptor.walletAssetsStore.baseGroupedAccountAssetModel, "tokensKey", root.swapFormData.fromTokensKey).balances
diff --git a/storybook/qmlTests/tests/tst_SwapSignModal.qml b/storybook/qmlTests/tests/tst_SwapSignModal.qml
index d6cd4ee2b3e..277a33dce72 100644
--- a/storybook/qmlTests/tests/tst_SwapSignModal.qml
+++ b/storybook/qmlTests/tests/tst_SwapSignModal.qml
@@ -39,7 +39,7 @@ Item {
 
             networkShortName: Constants.networkShortChainNames.mainnet
             networkName: "Mainnet"
-            networkIconPath: Theme.svg("network/Network=Ethereum")
+            networkIconPath: Assets.svg("network/Network=Ethereum")
             networkBlockExplorerUrl: "https://etherscan.io/"
             networkChainId: 1
 
diff --git a/storybook/src/Models/ModelsData.qml b/storybook/src/Models/ModelsData.qml
index 80c1494d668..b31aa743a8b 100644
--- a/storybook/src/Models/ModelsData.qml
+++ b/storybook/src/Models/ModelsData.qml
@@ -39,31 +39,31 @@ QtObject {
 
 
     readonly property QtObject assets: QtObject {
-        readonly property string socks: Theme.png("tokens/SOCKS")
-        readonly property string zrx: Theme.png("tokens/ZRX")
-        readonly property string inch: Theme.png("tokens/CUSTOM-TOKEN")
-        readonly property string aave: Theme.png("tokens/CUSTOM-TOKEN")
-        readonly property string amp: Theme.png("tokens/CUSTOM-TOKEN")
-        readonly property string uni: Theme.png("tokens/UNI")
-        readonly property string eth: Theme.png("tokens/ETH")
-        readonly property string dai: Theme.png("tokens/DAI")
-        readonly property string snt: Theme.png("tokens/SNT")
-        readonly property string mana: Theme.png("tokens/aMANA")
+        readonly property string socks: Assets.png("tokens/SOCKS")
+        readonly property string zrx: Assets.png("tokens/ZRX")
+        readonly property string inch: Assets.png("tokens/CUSTOM-TOKEN")
+        readonly property string aave: Assets.png("tokens/CUSTOM-TOKEN")
+        readonly property string amp: Assets.png("tokens/CUSTOM-TOKEN")
+        readonly property string uni: Assets.png("tokens/UNI")
+        readonly property string eth: Assets.png("tokens/ETH")
+        readonly property string dai: Assets.png("tokens/DAI")
+        readonly property string snt: Assets.png("tokens/SNT")
+        readonly property string mana: Assets.png("tokens/aMANA")
     }
 
     readonly property QtObject collectibles: QtObject {
         readonly property string anniversary: "https://i2.seadn.io/ethereum/0x5150b29a431ece5eb0e62085535b8aac8df193be/ba8dedcf93676a6be4c0a5da9ba600c7.png?w=1000"
-        readonly property string cryptoKitties: Theme.png("collectibles/CryptoKitties")
-        readonly property string kitty1: Theme.png("collectibles/Furbeard")
-        readonly property string kitty1Big: Theme.png("collectibles/FurbeardBig")
-        readonly property string kitty2: Theme.png("collectibles/Magicat")
-        readonly property string kitty2Big: Theme.png("collectibles/MagicatBig")
-        readonly property string kitty3: Theme.png("collectibles/HappyMeow")
-        readonly property string kitty3Big: Theme.png("collectibles/HappyMeowBig")
-        readonly property string kitty4: Theme.png("collectibles/Furbeard")
-        readonly property string kitty4Big: Theme.png("collectibles/FurbeardBig")
-        readonly property string kitty5: Theme.png("collectibles/Magicat")
-        readonly property string kitty5Big: Theme.png("collectibles/MagicatBig")
+        readonly property string cryptoKitties: Assets.png("collectibles/CryptoKitties")
+        readonly property string kitty1: Assets.png("collectibles/Furbeard")
+        readonly property string kitty1Big: Assets.png("collectibles/FurbeardBig")
+        readonly property string kitty2: Assets.png("collectibles/Magicat")
+        readonly property string kitty2Big: Assets.png("collectibles/MagicatBig")
+        readonly property string kitty3: Assets.png("collectibles/HappyMeow")
+        readonly property string kitty3Big: Assets.png("collectibles/HappyMeowBig")
+        readonly property string kitty4: Assets.png("collectibles/Furbeard")
+        readonly property string kitty4Big: Assets.png("collectibles/FurbeardBig")
+        readonly property string kitty5: Assets.png("collectibles/Magicat")
+        readonly property string kitty5Big: Assets.png("collectibles/MagicatBig")
         readonly property string superRare: root.icons.superRare
         readonly property string custom: root.icons.status
         readonly property string doodles: root.icons.dribble
@@ -89,10 +89,10 @@ QtObject {
     }
 
     readonly property QtObject onRampProviderImages: QtObject {
-        readonly property string latamex: Theme.png("onRampProviders/latamex")
-        readonly property string moonPay: Theme.png("onRampProviders/moonPay")
-        readonly property string ramp: Theme.png("onRampProviders/ramp")
-        readonly property string mercuryo: Theme.png("onRampProviders/mercuryo")
+        readonly property string latamex: Assets.png("onRampProviders/latamex")
+        readonly property string moonPay: Assets.png("onRampProviders/moonPay")
+        readonly property string ramp: Assets.png("onRampProviders/ramp")
+        readonly property string mercuryo: Assets.png("onRampProviders/mercuryo")
     }
 
     readonly property ListModel languagePickerModel: ListModel {
diff --git a/storybook/src/Models/WalletTransactionsModel.qml b/storybook/src/Models/WalletTransactionsModel.qml
index df21ba8a09c..e469133fa80 100644
--- a/storybook/src/Models/WalletTransactionsModel.qml
+++ b/storybook/src/Models/WalletTransactionsModel.qml
@@ -25,13 +25,13 @@ ListModel {
                 isNFT: false,
                 isCommunityAssetViaAirdrop: false,
                 communityName: "Doodles",
-                communityImageUrl: Theme.png("collectibles/HappyMeow"),
+                communityImageUrl: Assets.png("collectibles/HappyMeow"),
                 tokenID: "4981676894159712808201908443964193325271219637660871887967796332739046670337",
                 tokenAddress: "0xdeadbeef",
                 tokenInAddress: "0xdeadbeef-00",
                 tokenOutAddress: "0xdeadbeef-00",
                 nftName: "Happy Meow NFT",
-                nftImageUrl: Theme.png("collectibles/HappyMeow"),
+                nftImageUrl: Assets.png("collectibles/HappyMeow"),
                 chainId: "NETWORKID",
                 chainIdIn: "NETWORKID-IN",
                 chainIdOut: "NETWORKID-OUT"
@@ -54,13 +54,13 @@ ListModel {
                 isNFT: false,
                 isCommunityAssetViaAirdrop: false,
                 communityName: "Doodles",
-                communityImageUrl: Theme.png("collectibles/HappyMeow"),
+                communityImageUrl: Assets.png("collectibles/HappyMeow"),
                 tokenID: "4981676894159712808201908443964193325271219637660871887967796332739046670337",
                 tokenAddress: "0xdeadbeef",
                 tokenInAddress: "0xdeadbeef-00",
                 tokenOutAddress: "0xdeadbeef-00",
                 nftName: "Happy Meow NFT",
-                nftImageUrl: Theme.png("collectibles/HappyMeow"),
+                nftImageUrl: Assets.png("collectibles/HappyMeow"),
                 chainId: "NETWORKID",
                 chainIdIn: "NETWORKID-IN",
                 chainIdOut: "NETWORKID-OUT"
@@ -83,13 +83,13 @@ ListModel {
                 isNFT: false,
                 isCommunityAssetViaAirdrop: false,
                 communityName: "Doodles",
-                communityImageUrl: Theme.png("collectibles/HappyMeow"),
+                communityImageUrl: Assets.png("collectibles/HappyMeow"),
                 tokenID: "4981676894159712808201908443964193325271219637660871887967796332739046670337",
                 tokenAddress: "0xdeadbeef",
                 tokenInAddress: "0xdeadbeef-00",
                 tokenOutAddress: "0xdeadbeef-00",
                 nftName: "Happy Meow NFT",
-                nftImageUrl: Theme.png("collectibles/HappyMeow"),
+                nftImageUrl: Assets.png("collectibles/HappyMeow"),
                 chainId: "NETWORKID",
                 chainIdIn: "NETWORKID-IN",
                 chainIdOut: "NETWORKID-OUT"
@@ -112,13 +112,13 @@ ListModel {
                 isNFT: false,
                 isCommunityAssetViaAirdrop: false,
                 communityName: "Doodles",
-                communityImageUrl: Theme.png("collectibles/HappyMeow"),
+                communityImageUrl: Assets.png("collectibles/HappyMeow"),
                 tokenID: "4981676894159712808201908443964193325271219637660871887967796332739046670337",
                 tokenAddress: "0xdeadbeef",
                 tokenInAddress: "0xdeadbeef-00",
                 tokenOutAddress: "0xdeadbeef-00",
                 nftName: "Happy Meow NFT",
-                nftImageUrl: Theme.png("collectibles/HappyMeow"),
+                nftImageUrl: Assets.png("collectibles/HappyMeow"),
                 chainId: "NETWORKID",
                 chainIdIn: "NETWORKID-IN",
                 chainIdOut: "NETWORKID-OUT"
@@ -141,13 +141,13 @@ ListModel {
                 isNFT: false,
                 isCommunityAssetViaAirdrop: false,
                 communityName: "Doodles",
-                communityImageUrl: Theme.png("collectibles/HappyMeow"),
+                communityImageUrl: Assets.png("collectibles/HappyMeow"),
                 tokenID: "4981676894159712808201908443964193325271219637660871887967796332739046670337",
                 tokenAddress: "0xdeadbeef",
                 tokenInAddress: "0xdeadbeef-00",
                 tokenOutAddress: "0xdeadbeef-00",
                 nftName: "Happy Meow NFT",
-                nftImageUrl: Theme.png("collectibles/HappyMeow"),
+                nftImageUrl: Assets.png("collectibles/HappyMeow"),
                 chainId: "NETWORKID",
                 chainIdIn: "NETWORKID-IN",
                 chainIdOut: "NETWORKID-OUT"
@@ -170,13 +170,13 @@ ListModel {
                 isNFT: false,
                 isCommunityAssetViaAirdrop: false,
                 communityName: "Doodles",
-                communityImageUrl: Theme.png("collectibles/HappyMeow"),
+                communityImageUrl: Assets.png("collectibles/HappyMeow"),
                 tokenID: "4981676894159712808201908443964193325271219637660871887967796332739046670337",
                 tokenAddress: "0xdeadbeef",
                 tokenInAddress: "0xdeadbeef-00",
                 tokenOutAddress: "0xdeadbeef-00",
                 nftName: "Happy Meow NFT",
-                nftImageUrl: Theme.png("collectibles/HappyMeow"),
+                nftImageUrl: Assets.png("collectibles/HappyMeow"),
                 chainId: "NETWORKID",
                 chainIdIn: "NETWORKID-IN",
                 chainIdOut: "NETWORKID-OUT"
diff --git a/ui/StatusQ/CMakeLists.txt b/ui/StatusQ/CMakeLists.txt
index bdcbb783f30..2a2e22aa4f4 100644
--- a/ui/StatusQ/CMakeLists.txt
+++ b/ui/StatusQ/CMakeLists.txt
@@ -157,17 +157,20 @@ add_library(StatusQ ${LIB_TYPE}
         include/StatusQ/fastexpressionfilter.h
         include/StatusQ/fastexpressionrole.h
         include/StatusQ/fastexpressionsorter.h
-        include/StatusQ/oneoffilter.h
         include/StatusQ/formatteddoubleproperty.h
         include/StatusQ/genericvalidator.h
         include/StatusQ/keychain.h
         include/StatusQ/networkchecker.h
+        include/StatusQ/oneoffilter.h
         include/StatusQ/permissionutilsinternal.h
         include/StatusQ/rxvalidator.h
+        include/StatusQ/statuscolors.h
         include/StatusQ/statusemojimodel.h
         include/StatusQ/statussyntaxhighlighter.h
         include/StatusQ/stringutilsinternal.h
         include/StatusQ/systemutilsinternal.h
+        include/StatusQ/theme.h
+        include/StatusQ/themepalette.h
         include/StatusQ/typesregistration.h
         include/StatusQ/undefinedfilter.h
         include/StatusQ/urlutils.h
@@ -176,19 +179,22 @@ add_library(StatusQ ${LIB_TYPE}
         src/constantrole.cpp
         src/externc.cpp
         src/fastexpressionfilter.cpp
-        src/oneoffilter.cpp
         src/fastexpressionrole.cpp
         src/fastexpressionsorter.cpp
         src/formatteddoubleproperty.cpp
         src/genericvalidator.cpp
         src/keychain.cpp
         src/networkchecker.cpp
+        src/oneoffilter.cpp
         src/permissionutilsinternal.cpp
         src/rxvalidator.cpp
+        src/statuscolors.cpp
         src/statusemojimodel.cpp
         src/statussyntaxhighlighter.cpp
         src/stringutilsinternal.cpp
         src/systemutilsinternal.cpp
+        src/theme.cpp
+        src/themepalette.cpp
         src/typesregistration.cpp
         src/undefinedfilter.cpp
         src/urlutils.cpp
diff --git a/ui/StatusQ/include/StatusQ/statuscolors.h b/ui/StatusQ/include/StatusQ/statuscolors.h
new file mode 100644
index 00000000000..6580050d99f
--- /dev/null
+++ b/ui/StatusQ/include/StatusQ/statuscolors.h
@@ -0,0 +1,19 @@
+#pragma once
+
+#include <QColor>
+#include <QObject>
+#include <QVariantMap>
+
+class StatusColors : public QObject
+{
+    Q_OBJECT
+    Q_PROPERTY(QVariantMap colors READ colors CONSTANT)
+
+public:
+    explicit StatusColors(QObject* parent = nullptr);
+
+    static const QVariantMap& colors();
+
+    Q_INVOKABLE static QColor getColor(const QString& name, qreal alpha = -1);
+    Q_INVOKABLE static QColor alphaColor(const QColor& color, qreal alpha);
+};
diff --git a/ui/StatusQ/include/StatusQ/theme.h b/ui/StatusQ/include/StatusQ/theme.h
new file mode 100644
index 00000000000..d660c44a7db
--- /dev/null
+++ b/ui/StatusQ/include/StatusQ/theme.h
@@ -0,0 +1,154 @@
+#pragma once
+
+#include "StatusQ/themepalette.h"
+
+#include <QJSValue>
+#include <QQmlEngine>
+#include <QQuickAttachedPropertyPropagator>
+
+class Theme : public QQuickAttachedPropertyPropagator
+{
+    Q_OBJECT
+
+    Q_PROPERTY(qreal defaultPadding READ defaultPadding CONSTANT)
+
+    Q_PROPERTY(qreal defaultXlPadding READ defaultXlPadding CONSTANT)
+    Q_PROPERTY(qreal defaultBigPadding READ defaultBigPadding CONSTANT)
+    Q_PROPERTY(qreal defaultHalfPadding READ defaultHalfPadding CONSTANT)
+    Q_PROPERTY(qreal defaultSmallPadding READ defaultSmallPadding CONSTANT)
+
+    Q_PROPERTY(qreal padding READ padding WRITE setPadding
+                   RESET resetPadding NOTIFY paddingChanged)
+    Q_PROPERTY(qreal xlPadding READ xlPadding NOTIFY paddingChanged)
+    Q_PROPERTY(qreal bigPadding READ bigPadding NOTIFY paddingChanged)
+    Q_PROPERTY(qreal halfPadding READ halfPadding NOTIFY paddingChanged)
+    Q_PROPERTY(qreal smallPadding READ smallPadding NOTIFY paddingChanged)
+    Q_PROPERTY(qreal radius READ radius CONSTANT)
+
+    Q_PROPERTY(bool explicitPadding READ explicitPadding
+                   NOTIFY explicitPaddingChanged)
+
+    Q_PROPERTY(Style style READ style WRITE setStyle RESET resetStyle
+                   NOTIFY styleChanged)
+    Q_PROPERTY(const ThemePalette* palette READ palette
+                   NOTIFY styleChanged)
+
+    Q_PROPERTY(bool explicitStyle READ explicitStyle
+                   NOTIFY explicitStyleChanged)
+
+    Q_PROPERTY(int fontSizeOffset READ fontSizeOffset WRITE setFontSizeOffset
+                   RESET resetFontSizeOffset NOTIFY fontSizeOffsetChanged)
+
+    Q_PROPERTY(int secondaryAdditionalTextSize
+                   READ secondaryAdditionalTextSize
+                   NOTIFY fontSizeOffsetChanged)
+    Q_PROPERTY(int primaryTextFontSize READ primaryTextFontSize
+                   NOTIFY fontSizeOffsetChanged)
+    Q_PROPERTY(int secondaryTextFontSize READ secondaryTextFontSize
+                   NOTIFY fontSizeOffsetChanged)
+    Q_PROPERTY(int additionalTextSize READ additionalTextSize
+                   NOTIFY fontSizeOffsetChanged)
+    Q_PROPERTY(int tertiaryTextFontSize READ tertiaryTextFontSize
+                   NOTIFY fontSizeOffsetChanged)
+    Q_PROPERTY(int asideTextFontSize READ asideTextFontSize
+                   NOTIFY fontSizeOffsetChanged)
+
+    Q_PROPERTY(bool explicitFontSizeOffset READ explicitFontSizeOffset
+                   NOTIFY explicitFontSizeOffsetChanged)
+
+    Q_PROPERTY(QJSValue fontSize READ fontSize NOTIFY fontSizeOffsetChanged)
+
+    enum class Style {
+        Light,
+        Dark
+    };
+
+    Q_ENUM(Style)
+
+public:
+    explicit Theme(QObject *parent = nullptr);
+
+    // paddings
+    qreal defaultPadding() const;
+    qreal defaultXlPadding() const;
+    qreal defaultBigPadding() const;
+    qreal defaultHalfPadding() const;
+    qreal defaultSmallPadding() const;
+
+    qreal padding() const;
+    qreal xlPadding() const;
+    qreal bigPadding() const;
+    qreal halfPadding() const;
+    qreal smallPadding() const;
+    qreal radius() const;
+
+    void setPadding(qreal padding);
+    void resetPadding();
+    bool explicitPadding() const;
+
+    // light/dark style
+    Style style() const;
+    const ThemePalette* palette() const;
+
+    void setStyle(Style style);
+    void resetStyle();
+    bool explicitStyle() const;
+
+    // font size
+    int fontSizeOffset() const;
+    int secondaryAdditionalTextSize() const;
+    int primaryTextFontSize() const;
+    int secondaryTextFontSize() const;
+    int additionalTextSize() const;
+    int tertiaryTextFontSize() const;
+    int asideTextFontSize() const;
+
+    QJSValue fontSize() const;
+
+    void setFontSizeOffset(int fontSizeOffset);
+    void resetFontSizeOffset();
+    bool explicitFontSizeOffset() const;
+
+    // top level object access
+    Q_INVOKABLE Theme* rootTheme();
+
+    // attached object instantiation
+    static Theme *qmlAttachedProperties(QObject *object);
+
+signals:
+    void paddingChanged();
+    void explicitPaddingChanged();
+
+    void styleChanged();
+    void explicitStyleChanged();
+
+    void fontSizeOffsetChanged();
+    void explicitFontSizeOffsetChanged();
+
+protected:
+    void inheritPadding(qreal padding);
+    void propagatePadding();
+
+    void inheritStyle(Style style);
+    void propagateStyle();
+
+    void inheritFontSizeOffset(int fontSizeOffset);
+    void propagateFontSizeOffset();
+
+    void attachedParentChange(
+        QQuickAttachedPropertyPropagator *newParent,
+        QQuickAttachedPropertyPropagator *oldParent) override;
+
+private:
+    bool m_explicitPadding = false;
+    qreal m_padding = 0.0;
+
+    bool m_explicitStyle = false;
+    Style m_style = Style::Light;
+
+    bool m_explicitFontSizeOffset = false;
+    int m_fontSizeOffset = 0;
+    mutable QJSValue m_fontSizeFn;
+};
+
+QML_DECLARE_TYPEINFO(Theme, QML_HAS_ATTACHED_PROPERTIES)
diff --git a/ui/StatusQ/include/StatusQ/themepalette.h b/ui/StatusQ/include/StatusQ/themepalette.h
new file mode 100644
index 00000000000..cb92a9d605f
--- /dev/null
+++ b/ui/StatusQ/include/StatusQ/themepalette.h
@@ -0,0 +1,365 @@
+#pragma once
+
+#include <QObject>
+#include <QColor>
+#include <QMetaType>
+
+#include <memory>
+
+class StatusAppLayout {
+    Q_GADGET
+    Q_PROPERTY(QColor backgroundColor MEMBER backgroundColor CONSTANT)
+    Q_PROPERTY(QColor rightPanelBackgroundColor MEMBER rightPanelBackgroundColor CONSTANT)
+public:
+    QColor backgroundColor, rightPanelBackgroundColor;
+};
+
+class StatusAppNavBar {
+    Q_GADGET
+    Q_PROPERTY(QColor backgroundColor MEMBER backgroundColor CONSTANT)
+public:
+    QColor backgroundColor;
+};
+
+class StatusToastMessage {
+    Q_GADGET
+    Q_PROPERTY(QColor backgroundColor MEMBER backgroundColor CONSTANT)
+public:
+    QColor backgroundColor;
+};
+
+class StatusListItem {
+    Q_GADGET
+    Q_PROPERTY(QColor backgroundColor MEMBER backgroundColor CONSTANT)
+    Q_PROPERTY(QColor secondaryHoverBackgroundColor MEMBER secondaryHoverBackgroundColor CONSTANT)
+    Q_PROPERTY(QColor highlightColor MEMBER highlightColor CONSTANT)
+public:
+    QColor backgroundColor, secondaryHoverBackgroundColor, highlightColor;
+};
+
+class StatusChatListItem {
+    Q_GADGET
+    Q_PROPERTY(QColor hoverBackgroundColor MEMBER hoverBackgroundColor CONSTANT)
+    Q_PROPERTY(QColor selectedBackgroundColor MEMBER selectedBackgroundColor CONSTANT)
+public:
+    QColor hoverBackgroundColor, selectedBackgroundColor;
+};
+
+class StatusChatListCategoryItem {
+    Q_GADGET
+    Q_PROPERTY(QColor buttonHoverBackgroundColor MEMBER buttonHoverBackgroundColor CONSTANT)
+public:
+    QColor buttonHoverBackgroundColor;
+};
+
+class StatusNavigationListItem {
+    Q_GADGET
+    Q_PROPERTY(QColor hoverBackgroundColor MEMBER hoverBackgroundColor CONSTANT)
+    Q_PROPERTY(QColor selectedBackgroundColor MEMBER selectedBackgroundColor CONSTANT)
+public:
+    QColor hoverBackgroundColor, selectedBackgroundColor;
+};
+
+class StatusBadge {
+    Q_GADGET
+    Q_PROPERTY(QColor foregroundColor MEMBER foregroundColor CONSTANT)
+    Q_PROPERTY(QColor borderColor MEMBER borderColor CONSTANT)
+    Q_PROPERTY(QColor hoverBorderColor MEMBER hoverBorderColor CONSTANT)
+public:
+    QColor foregroundColor, borderColor, hoverBorderColor;
+};
+
+class StatusMenu {
+    Q_GADGET
+    Q_PROPERTY(QColor backgroundColor MEMBER backgroundColor CONSTANT)
+    Q_PROPERTY(QColor hoverBackgroundColor MEMBER hoverBackgroundColor CONSTANT)
+    Q_PROPERTY(QColor separatorColor MEMBER separatorColor CONSTANT)
+public:
+    QColor backgroundColor, hoverBackgroundColor, separatorColor;
+};
+
+class StatusModal {
+    Q_GADGET
+    Q_PROPERTY(QColor backgroundColor MEMBER backgroundColor CONSTANT)
+public:
+    QColor backgroundColor;
+};
+
+class StatusRoundedImage {
+    Q_GADGET
+    Q_PROPERTY(QColor backgroundColor MEMBER backgroundColor CONSTANT)
+public:
+    QColor backgroundColor;
+};
+
+class StatusChatInput {
+    Q_GADGET
+    Q_PROPERTY(QColor secondaryBackgroundColor MEMBER secondaryBackgroundColor CONSTANT)
+public:
+    QColor secondaryBackgroundColor;
+};
+
+class StatusSwitchTab {
+    Q_GADGET
+    Q_PROPERTY(QColor buttonBackgroundColor MEMBER buttonBackgroundColor CONSTANT)
+    Q_PROPERTY(QColor barBackgroundColor MEMBER barBackgroundColor CONSTANT)
+    Q_PROPERTY(QColor selectedTextColor MEMBER selectedTextColor CONSTANT)
+    Q_PROPERTY(QColor textColor MEMBER textColor CONSTANT)
+public:
+    QColor buttonBackgroundColor, barBackgroundColor, selectedTextColor,
+        textColor;
+};
+
+class StatusSelect {
+    Q_GADGET
+    Q_PROPERTY(QColor menuItemBackgroundColor MEMBER menuItemBackgroundColor CONSTANT)
+    Q_PROPERTY(QColor menuItemHoverBackgroundColor MEMBER menuItemHoverBackgroundColor CONSTANT)
+public:
+    QColor menuItemBackgroundColor, menuItemHoverBackgroundColor;
+};
+
+class StatusMessage {
+    Q_GADGET
+    Q_PROPERTY(QColor emojiReactionBackground MEMBER emojiReactionBackground CONSTANT)
+    Q_PROPERTY(QColor emojiReactionBorderHovered MEMBER emojiReactionBorderHovered CONSTANT)
+    Q_PROPERTY(QColor emojiReactionBackgroundHovered MEMBER emojiReactionBackgroundHovered CONSTANT)
+public:
+    QColor emojiReactionBackground, emojiReactionBorderHovered,
+        emojiReactionBackgroundHovered;
+};
+
+class CustomisationColors {
+    Q_GADGET
+    Q_PROPERTY(QColor blue MEMBER blue CONSTANT)
+    Q_PROPERTY(QColor purple MEMBER purple CONSTANT)
+    Q_PROPERTY(QColor orange MEMBER orange CONSTANT)
+    Q_PROPERTY(QColor army MEMBER army CONSTANT)
+    Q_PROPERTY(QColor turquoise MEMBER turquoise CONSTANT)
+    Q_PROPERTY(QColor sky MEMBER sky CONSTANT)
+    Q_PROPERTY(QColor yellow MEMBER yellow CONSTANT)
+    Q_PROPERTY(QColor pink MEMBER pink CONSTANT)
+    Q_PROPERTY(QColor copper MEMBER copper CONSTANT)
+    Q_PROPERTY(QColor camel MEMBER camel CONSTANT)
+    Q_PROPERTY(QColor magenta MEMBER magenta CONSTANT)
+    Q_PROPERTY(QColor yinYang MEMBER yinYang CONSTANT)
+    Q_PROPERTY(QColor purple2 MEMBER purple2 CONSTANT)
+public:
+    QColor blue, purple, orange, army, turquoise, sky, yellow, pink, copper,
+        camel, magenta, yinYang, purple2;
+};
+
+class PrivacyModeColors {
+    Q_GADGET
+    Q_PROPERTY(QColor navBarColor MEMBER navBarColor CONSTANT)
+    Q_PROPERTY(QColor navButtonColor MEMBER navButtonColor CONSTANT)
+    Q_PROPERTY(QColor navButtonHighlightedColor MEMBER navButtonHighlightedColor CONSTANT)
+public:
+    QColor navBarColor, navButtonColor, navButtonHighlightedColor;
+};
+
+class PrivacyColors {
+    Q_GADGET
+    Q_PROPERTY(QColor primary MEMBER primary CONSTANT)
+    Q_PROPERTY(QColor secondary MEMBER secondary CONSTANT)
+    Q_PROPERTY(QColor tertiary MEMBER tertiary CONSTANT)
+    Q_PROPERTY(QColor tertiaryOpaque MEMBER tertiaryOpaque CONSTANT)
+public:
+    QColor primary, secondary, tertiary, tertiaryOpaque;
+};
+
+// Main ThemePalette class
+class ThemePalette : public QObject {
+    Q_OBJECT
+    Q_PROPERTY(QString name MEMBER name CONSTANT)
+
+    // Existing basic colors
+    Q_PROPERTY(QColor black MEMBER black CONSTANT)
+    Q_PROPERTY(QColor white MEMBER white CONSTANT)
+    Q_PROPERTY(QColor transparent MEMBER transparent CONSTANT)
+
+    // Base colors
+    Q_PROPERTY(QColor baseColor1 MEMBER baseColor1 CONSTANT)
+    Q_PROPERTY(QColor baseColor2 MEMBER baseColor2 CONSTANT)
+    Q_PROPERTY(QColor baseColor3 MEMBER baseColor3 CONSTANT)
+    Q_PROPERTY(QColor baseColor4 MEMBER baseColor4 CONSTANT)
+    Q_PROPERTY(QColor baseColor5 MEMBER baseColor5 CONSTANT)
+
+    // Primary
+    Q_PROPERTY(QColor primaryColor1 MEMBER primaryColor1 CONSTANT)
+    Q_PROPERTY(QColor primaryColor2 MEMBER primaryColor2 CONSTANT)
+    Q_PROPERTY(QColor primaryColor3 MEMBER primaryColor3 CONSTANT)
+
+    // Danger
+    Q_PROPERTY(QColor dangerColor1 MEMBER dangerColor1 CONSTANT)
+    Q_PROPERTY(QColor dangerColor2 MEMBER dangerColor2 CONSTANT)
+    Q_PROPERTY(QColor dangerColor3 MEMBER dangerColor3 CONSTANT)
+
+    // Warning
+    Q_PROPERTY(QColor warningColor1 MEMBER warningColor1 CONSTANT)
+    Q_PROPERTY(QColor warningColor2 MEMBER warningColor2 CONSTANT)
+    Q_PROPERTY(QColor warningColor3 MEMBER warningColor3 CONSTANT)
+
+    // Success
+    Q_PROPERTY(QColor successColor1 MEMBER successColor1 CONSTANT)
+    Q_PROPERTY(QColor successColor2 MEMBER successColor2 CONSTANT)
+    Q_PROPERTY(QColor successColor3 MEMBER successColor3 CONSTANT)
+
+    // Mention
+    Q_PROPERTY(QColor mentionColor1 MEMBER mentionColor1 CONSTANT)
+    Q_PROPERTY(QColor mentionColor2 MEMBER mentionColor2 CONSTANT)
+    Q_PROPERTY(QColor mentionColor3 MEMBER mentionColor3 CONSTANT)
+    Q_PROPERTY(QColor mentionColor4 MEMBER mentionColor4 CONSTANT)
+
+    // Pin
+    Q_PROPERTY(QColor pinColor1 MEMBER pinColor1 CONSTANT)
+    Q_PROPERTY(QColor pinColor2 MEMBER pinColor2 CONSTANT)
+    Q_PROPERTY(QColor pinColor3 MEMBER pinColor3 CONSTANT)
+
+    // Direct
+    Q_PROPERTY(QColor directColor1 MEMBER directColor1 CONSTANT)
+    Q_PROPERTY(QColor directColor2 MEMBER directColor2 CONSTANT)
+    Q_PROPERTY(QColor directColor3 MEMBER directColor3 CONSTANT)
+    Q_PROPERTY(QColor directColor4 MEMBER directColor4 CONSTANT)
+    Q_PROPERTY(QColor directColor5 MEMBER directColor5 CONSTANT)
+    Q_PROPERTY(QColor directColor6 MEMBER directColor6 CONSTANT)
+    Q_PROPERTY(QColor directColor7 MEMBER directColor7 CONSTANT)
+    Q_PROPERTY(QColor directColor8 MEMBER directColor8 CONSTANT)
+    Q_PROPERTY(QColor directColor9 MEMBER directColor9 CONSTANT)
+
+    // Indirect
+    Q_PROPERTY(QColor indirectColor1 MEMBER indirectColor1 CONSTANT)
+    Q_PROPERTY(QColor indirectColor2 MEMBER indirectColor2 CONSTANT)
+    Q_PROPERTY(QColor indirectColor3 MEMBER indirectColor3 CONSTANT)
+    Q_PROPERTY(QColor indirectColor4 MEMBER indirectColor4 CONSTANT)
+
+    // Misc
+    Q_PROPERTY(QColor miscColor1 MEMBER miscColor1 CONSTANT)
+    Q_PROPERTY(QColor miscColor2 MEMBER miscColor2 CONSTANT)
+    Q_PROPERTY(QColor miscColor3 MEMBER miscColor3 CONSTANT)
+    Q_PROPERTY(QColor miscColor4 MEMBER miscColor4 CONSTANT)
+    Q_PROPERTY(QColor miscColor5 MEMBER miscColor5 CONSTANT)
+    Q_PROPERTY(QColor miscColor6 MEMBER miscColor6 CONSTANT)
+    Q_PROPERTY(QColor miscColor7 MEMBER miscColor7 CONSTANT)
+    Q_PROPERTY(QColor miscColor8 MEMBER miscColor8 CONSTANT)
+    Q_PROPERTY(QColor miscColor9 MEMBER miscColor9 CONSTANT)
+    Q_PROPERTY(QColor miscColor10 MEMBER miscColor10 CONSTANT)
+    Q_PROPERTY(QColor miscColor11 MEMBER miscColor11 CONSTANT)
+    Q_PROPERTY(QColor miscColor12 MEMBER miscColor12 CONSTANT)
+
+    // Other single values
+    Q_PROPERTY(QColor neutral95 MEMBER neutral95 CONSTANT)
+    Q_PROPERTY(QColor dropShadow MEMBER dropShadow CONSTANT)
+    Q_PROPERTY(QColor dropShadow2 MEMBER dropShadow2 CONSTANT)
+    Q_PROPERTY(QColor dropShadow3 MEMBER dropShadow3 CONSTANT)
+    Q_PROPERTY(QColor backdropColor MEMBER backdropColor CONSTANT)
+    Q_PROPERTY(QColor statusFloatingButtonHighlight MEMBER statusFloatingButtonHighlight CONSTANT)
+    Q_PROPERTY(QColor statusLoadingHighlight MEMBER statusLoadingHighlight CONSTANT)
+    Q_PROPERTY(QColor statusLoadingHighlight2 MEMBER statusLoadingHighlight2 CONSTANT)
+    Q_PROPERTY(QColor messageHighlightColor MEMBER messageHighlightColor CONSTANT)
+    Q_PROPERTY(QColor desktopBlue10 MEMBER desktopBlue10 CONSTANT)
+    Q_PROPERTY(QColor blockProgressBarColor MEMBER blockProgressBarColor CONSTANT)
+
+    // Style compat
+    Q_PROPERTY(QColor background MEMBER background CONSTANT)
+    Q_PROPERTY(QColor backgroundHover MEMBER backgroundHover CONSTANT)
+    Q_PROPERTY(QColor border MEMBER border CONSTANT)
+    Q_PROPERTY(QColor textColor MEMBER textColor CONSTANT)
+    Q_PROPERTY(QColor secondaryText MEMBER secondaryText CONSTANT)
+    Q_PROPERTY(QColor separator MEMBER separator CONSTANT)
+    Q_PROPERTY(QColor darkGrey MEMBER darkGrey CONSTANT)
+    Q_PROPERTY(QColor secondaryBackground MEMBER secondaryBackground CONSTANT)
+    Q_PROPERTY(QColor secondaryMenuBackground MEMBER secondaryMenuBackground CONSTANT)
+
+    // Arrays
+    Q_PROPERTY(QList<QColor> customisationColorsArray MEMBER customisationColorsArray CONSTANT)
+    Q_PROPERTY(QList<QColor> communityColorsArray MEMBER communityColorsArray CONSTANT)
+    Q_PROPERTY(QList<QColor> userCustomizationColors MEMBER userCustomizationColors CONSTANT)
+
+    // Nested gadgets
+    Q_PROPERTY(StatusAppLayout statusAppLayout MEMBER statusAppLayout CONSTANT)
+    Q_PROPERTY(StatusAppNavBar statusAppNavBar MEMBER statusAppNavBar CONSTANT)
+    Q_PROPERTY(StatusToastMessage statusToastMessage MEMBER statusToastMessage CONSTANT)
+    Q_PROPERTY(StatusListItem statusListItem MEMBER statusListItem CONSTANT)
+    Q_PROPERTY(StatusChatListItem statusChatListItem MEMBER statusChatListItem CONSTANT)
+    Q_PROPERTY(StatusChatListCategoryItem statusChatListCategoryItem MEMBER statusChatListCategoryItem CONSTANT)
+    Q_PROPERTY(StatusNavigationListItem statusNavigationListItem MEMBER statusNavigationListItem CONSTANT)
+    Q_PROPERTY(StatusBadge statusBadge MEMBER statusBadge CONSTANT)
+    Q_PROPERTY(StatusMenu statusMenu MEMBER statusMenu CONSTANT)
+    Q_PROPERTY(StatusModal statusModal MEMBER statusModal CONSTANT)
+    Q_PROPERTY(StatusRoundedImage statusRoundedImage MEMBER statusRoundedImage CONSTANT)
+    Q_PROPERTY(StatusChatInput statusChatInput MEMBER statusChatInput CONSTANT)
+    Q_PROPERTY(StatusSwitchTab statusSwitchTab MEMBER statusSwitchTab CONSTANT)
+    Q_PROPERTY(StatusSelect statusSelect MEMBER statusSelect CONSTANT)
+    Q_PROPERTY(StatusMessage statusMessage MEMBER statusMessage CONSTANT)
+    Q_PROPERTY(CustomisationColors customisationColors MEMBER customisationColors CONSTANT)
+    Q_PROPERTY(PrivacyModeColors privacyModeColors MEMBER privacyModeColors CONSTANT)
+
+public:
+    explicit ThemePalette(QObject* parent = nullptr);
+
+    Q_INVOKABLE QColor hoverColor(const QColor& normalColor) const;
+    void buildArrays();
+
+    // Members
+    QString name;
+
+    QColor black;
+    QColor white;
+    QColor transparent;
+
+    QColor baseColor1, baseColor2, baseColor3, baseColor4, baseColor5;
+
+    QColor primaryColor1, primaryColor2, primaryColor3;
+    QColor dangerColor1, dangerColor2, dangerColor3;
+    QColor warningColor1, warningColor2, warningColor3;
+    QColor successColor1, successColor2, successColor3;
+    QColor mentionColor1, mentionColor2, mentionColor3, mentionColor4;
+    QColor pinColor1, pinColor2, pinColor3;
+    QColor directColor1, directColor2, directColor3, directColor4, directColor5,
+        directColor6, directColor7, directColor8, directColor9;
+    QColor indirectColor1, indirectColor2, indirectColor3, indirectColor4;
+    QColor miscColor1, miscColor2, miscColor3, miscColor4, miscColor5,
+        miscColor6, miscColor7, miscColor8, miscColor9, miscColor10, miscColor11,
+        miscColor12;
+
+    QColor neutral95;
+    QColor dropShadow, dropShadow2, dropShadow3, backdropColor;
+    QColor statusFloatingButtonHighlight;
+    QColor statusLoadingHighlight, statusLoadingHighlight2;
+    QColor messageHighlightColor;
+    QColor desktopBlue10;
+    QColor blockProgressBarColor;
+
+    QColor background, backgroundHover, border, textColor, secondaryText,
+        separator, darkGrey, secondaryBackground, secondaryMenuBackground;
+
+    QList<QColor> customisationColorsArray;
+    QList<QColor> communityColorsArray;
+    QList<QColor> userCustomizationColors;
+
+    StatusAppLayout statusAppLayout;
+    StatusAppNavBar statusAppNavBar;
+    StatusToastMessage statusToastMessage;
+    StatusListItem statusListItem;
+    StatusChatListItem statusChatListItem;
+    StatusChatListCategoryItem statusChatListCategoryItem;
+    StatusNavigationListItem statusNavigationListItem;
+    StatusBadge statusBadge;
+    StatusMenu statusMenu;
+    StatusModal statusModal;
+    StatusRoundedImage statusRoundedImage;
+    StatusChatInput statusChatInput;
+    StatusSwitchTab statusSwitchTab;
+    StatusSelect statusSelect;
+    StatusMessage statusMessage;
+    CustomisationColors customisationColors;
+    PrivacyModeColors privacyModeColors;
+    PrivacyColors privacyColors;
+};
+
+std::unique_ptr<ThemePalette> createDarkThemePalette(QObject* parent = nullptr);
+std::unique_ptr<ThemePalette> createLightThemePalette(QObject* parent = nullptr);
+
+// Registration helper
+void registerThemePaletteType();
+
diff --git a/ui/StatusQ/src/StatusQ/Components/StatusBetaTag.qml b/ui/StatusQ/src/StatusQ/Components/StatusBetaTag.qml
index 7815f04fce7..af8b8f15aa6 100644
--- a/ui/StatusQ/src/StatusQ/Components/StatusBetaTag.qml
+++ b/ui/StatusQ/src/StatusQ/Components/StatusBetaTag.qml
@@ -22,7 +22,7 @@ Rectangle {
     border.color: root.fgColor
 
     StatusBaseText {
-        font.pixelSize: Theme.fontSize11
+        font.pixelSize: Theme.fontSize(11)
         font.weight: Font.Medium
         color: root.fgColor
         anchors.centerIn: parent
diff --git a/ui/StatusQ/src/StatusQ/Components/StatusCommunityCard.qml b/ui/StatusQ/src/StatusQ/Components/StatusCommunityCard.qml
index 15bf7fd85b5..97f6069b0e5 100644
--- a/ui/StatusQ/src/StatusQ/Components/StatusCommunityCard.qml
+++ b/ui/StatusQ/src/StatusQ/Components/StatusCommunityCard.qml
@@ -56,7 +56,7 @@ Rectangle {
        \qmlproperty int StatusCommunityCard::titleFontSize
        This property holds the title's font size.
     */
-    property int titleFontSize: Theme.fontSize19
+    property int titleFontSize: Theme.fontSize(19)
     /*!
        \qmlproperty int StatusCommunityCard::descriptionFontSize
        This property holds the description's font size.
diff --git a/ui/StatusQ/src/StatusQ/Components/StatusDraggableListItem.qml b/ui/StatusQ/src/StatusQ/Components/StatusDraggableListItem.qml
index c2ae26f06d5..8aae2fe5fc8 100644
--- a/ui/StatusQ/src/StatusQ/Components/StatusDraggableListItem.qml
+++ b/ui/StatusQ/src/StatusQ/Components/StatusDraggableListItem.qml
@@ -72,7 +72,7 @@ import StatusQ.Core.Theme
                     draggable: linksView.count > 1
                     title: ProfileUtils.linkTypeToText(model.linkType) || model.text
                     icon.name: model.icon
-                    icon.color: ProfileUtils.linkTypeColor(model.linkType)
+                    icon.color: ProfileUtils.linkTypeColor(model.linkType, Theme.palette)
                     actions: [
                         StatusLinkText {
                             Layout.fillWidth: true
@@ -288,7 +288,7 @@ AbstractButton {
 
     background: Rectangle {
         implicitHeight: 76 // ProfileUtils.defaultDelegateHeight
-        color: root.changeColorOnDragActive && root.drawBackgroundBorder ? Theme.palette.alphaColor(Theme.palette.baseColor2, 0.7) : root.bgColor
+        color: root.changeColorOnDragActive && root.drawBackgroundBorder ? StatusColors.alphaColor(Theme.palette.baseColor2, 0.7) : root.bgColor
         border.width: root.drawBackgroundBorder ? 1 : 0
         border.color: Theme.palette.baseColor2
         radius: root.drawBackgroundBorder ? Theme.radius : 0
diff --git a/ui/StatusQ/src/StatusQ/Components/StatusFlowSelector.qml b/ui/StatusQ/src/StatusQ/Components/StatusFlowSelector.qml
index f0d8d531f99..4e78427f833 100644
--- a/ui/StatusQ/src/StatusQ/Components/StatusFlowSelector.qml
+++ b/ui/StatusQ/src/StatusQ/Components/StatusFlowSelector.qml
@@ -19,7 +19,7 @@ import StatusQ.Controls
    Example of how to use it:
    \qml
         StatusFlowSelector {
-            icon: Theme.svg("contact_verified")
+            icon: Assets.svg("contact_verified")
             title: qsTr("Who holds")
             placeholderItem.visible: listModel.count === 0
 
diff --git a/ui/StatusQ/src/StatusQ/Components/StatusItemSelector.qml b/ui/StatusQ/src/StatusQ/Components/StatusItemSelector.qml
index fa0c3bb590f..b39d6ca1a46 100644
--- a/ui/StatusQ/src/StatusQ/Components/StatusItemSelector.qml
+++ b/ui/StatusQ/src/StatusQ/Components/StatusItemSelector.qml
@@ -23,7 +23,7 @@ import StatusQ.Core.Utils
    Example of how to use it:
    \qml
         StatusItemSelector {
-            icon: Theme.svg("contact_verified")
+            icon: Assets.svg("contact_verified")
             title: qsTr("Who holds")
             defaultItemText: qsTr("Example: 10 SNT")
             andOperatorText: qsTr("and")
diff --git a/ui/StatusQ/src/StatusQ/Components/StatusLanguageSelector.qml b/ui/StatusQ/src/StatusQ/Components/StatusLanguageSelector.qml
index db599963ab0..3bbf7ae1de8 100644
--- a/ui/StatusQ/src/StatusQ/Components/StatusLanguageSelector.qml
+++ b/ui/StatusQ/src/StatusQ/Components/StatusLanguageSelector.qml
@@ -27,7 +27,7 @@ Button {
         dropdown.close()
     }
 
-    font.family: Theme.baseFont.name
+    font.family: Fonts.baseFont.family
     font.weight: Font.Medium
     font.pixelSize: Theme.additionalTextSize
 
@@ -35,7 +35,7 @@ Button {
     verticalPadding: Theme.halfPadding
     spacing: 4
 
-    opacity: enabled ? 1.0 : Theme.disabledOpacity
+    opacity: enabled ? 1.0 : ThemeUtils.disabledOpacity
 
     text: d.beautifyIsoCode(d.selectedLanguage)
 
@@ -82,7 +82,7 @@ Button {
     background: Rectangle {
         radius: Theme.radius
         color: root.enabled && (root.hovered || dropdown.opened) ? Theme.palette.primaryColor2 : Theme.palette.primaryColor3
-        Behavior on color { ColorAnimation { duration: Theme.AnimationDuration.Fast } }
+        Behavior on color { ColorAnimation { duration: ThemeUtils.AnimationDuration.Fast } }
     }
 
     contentItem: RowLayout {
diff --git a/ui/StatusQ/src/StatusQ/Components/StatusListItem.qml b/ui/StatusQ/src/StatusQ/Components/StatusListItem.qml
index a0bad755535..64578ae30b8 100644
--- a/ui/StatusQ/src/StatusQ/Components/StatusListItem.qml
+++ b/ui/StatusQ/src/StatusQ/Components/StatusListItem.qml
@@ -324,7 +324,7 @@ Rectangle {
                     Layout.topMargin: -48
 
                     text: "."
-                    font.pixelSize: Theme.fontSize40
+                    font.pixelSize: Theme.fontSize(40)
                     customColor: Theme.palette.baseColor1
                     lineHeightMode: Text.FixedHeight
                     lineHeight: 24
diff --git a/ui/StatusQ/src/StatusQ/Components/StatusMemberListItem.qml b/ui/StatusQ/src/StatusQ/Components/StatusMemberListItem.qml
index a50930b9327..8a7c23e72c3 100644
--- a/ui/StatusQ/src/StatusQ/Components/StatusMemberListItem.qml
+++ b/ui/StatusQ/src/StatusQ/Components/StatusMemberListItem.qml
@@ -158,7 +158,7 @@ ItemDelegate {
     icon.width: 32
     icon.height: 32
 
-    font.family: Theme.baseFont.name
+    font.family: Fonts.baseFont.family
     font.pixelSize: Theme.primaryTextFontSize
 
     background: Rectangle {
diff --git a/ui/StatusQ/src/StatusQ/Components/StatusMessageHeader.qml b/ui/StatusQ/src/StatusQ/Components/StatusMessageHeader.qml
index 2967b59c9be..9cb6413eab3 100644
--- a/ui/StatusQ/src/StatusQ/Components/StatusMessageHeader.qml
+++ b/ui/StatusQ/src/StatusQ/Components/StatusMessageHeader.qml
@@ -55,7 +55,7 @@ Item {
             Layout.bottomMargin: 2 // offset for the underline to stay vertically centered
             font.weight: Font.Medium
             font.underline: root.displayNameClickable && hhandler.hovered
-            font.family: Theme.baseFont.name
+            font.family: Fonts.baseFont.family
             font.pixelSize: Theme.primaryTextFontSize
             wrapMode: Text.WordWrap
             color: Theme.palette.primaryColor1
@@ -221,7 +221,7 @@ Item {
                 horizontalPadding: 5
                 size: StatusBaseButton.Tiny
                 type: StatusBaseButton.Warning
-                font.pixelSize: Theme.fontSize9
+                font.pixelSize: Theme.fontSize(9)
                 text: qsTr("Resend")
                 onClicked: root.resendClicked()
             }
diff --git a/ui/StatusQ/src/StatusQ/Components/StatusTagSelector.qml b/ui/StatusQ/src/StatusQ/Components/StatusTagSelector.qml
index 9b8382af3c0..ec413e13540 100644
--- a/ui/StatusQ/src/StatusQ/Components/StatusTagSelector.qml
+++ b/ui/StatusQ/src/StatusQ/Components/StatusTagSelector.qml
@@ -290,7 +290,7 @@ Item {
                 clip: true
                 font.pixelSize: Theme.primaryTextFontSize
                 wrapMode: TextEdit.NoWrap
-                font.family: Theme.baseFont.name
+                font.family: Fonts.baseFont.family
                 Layout.fillWidth: true
                 Layout.preferredHeight: 44
                 visible: (parent.width>22)
diff --git a/ui/StatusQ/src/StatusQ/Components/StatusToastMessage.qml b/ui/StatusQ/src/StatusQ/Components/StatusToastMessage.qml
index bff6ab88631..6941af33cbe 100644
--- a/ui/StatusQ/src/StatusQ/Components/StatusToastMessage.qml
+++ b/ui/StatusQ/src/StatusQ/Components/StatusToastMessage.qml
@@ -201,7 +201,7 @@ Control {
         readonly property string iconBgColor: {
             // If specified:
             if(root.iconColor != "")
-                return Theme.palette.getColor(root.iconColor, 0.1)
+                return StatusColors.getColor(root.iconColor, 0.1)
 
             // If not specified
             switch(root.type) {
diff --git a/ui/StatusQ/src/StatusQ/Components/StatusUserImage.qml b/ui/StatusQ/src/StatusQ/Components/StatusUserImage.qml
index f653d4cb2d8..7d8e5e8aea7 100644
--- a/ui/StatusQ/src/StatusQ/Components/StatusUserImage.qml
+++ b/ui/StatusQ/src/StatusQ/Components/StatusUserImage.qml
@@ -62,7 +62,7 @@ Loader {
         badge.anchors.bottomMargin: badge.border.width/2
 
         bridgeBadge.visible: root.isBridgedAccount
-        bridgeBadge.image.source: Theme.svg("discord-bridge")
+        bridgeBadge.image.source: Assets.svg("discord-bridge")
 
         Loader {
             anchors.fill: parent
diff --git a/ui/StatusQ/src/StatusQ/Components/private/statusMessage/StatusMessageEmojiReactions.qml b/ui/StatusQ/src/StatusQ/Components/private/statusMessage/StatusMessageEmojiReactions.qml
index ce0b351f3f7..673905efdde 100644
--- a/ui/StatusQ/src/StatusQ/Components/private/statusMessage/StatusMessageEmojiReactions.qml
+++ b/ui/StatusQ/src/StatusQ/Components/private/statusMessage/StatusMessageEmojiReactions.qml
@@ -77,14 +77,15 @@ Flow {
 
                 StatusIcon {
                     objectName: "emojiReaction"
+
                     Layout.preferredWidth: 16
                     Layout.preferredHeight: 16
-                    icon: Theme.emoji(model.emoji)
+                    icon: Assets.emoji(model.emoji)
                 }
 
                 StatusBaseText {
                     text: model.numberOfReactions
-                    font.pixelSize: Theme.fontSize13
+                    font.pixelSize: Theme.fontSize(13)
                 }
             }
 
diff --git a/ui/StatusQ/src/StatusQ/Components/private/statusMessage/StatusMessageImageAlbum.qml b/ui/StatusQ/src/StatusQ/Components/private/statusMessage/StatusMessageImageAlbum.qml
index 55756d72ea7..39c22991a64 100644
--- a/ui/StatusQ/src/StatusQ/Components/private/statusMessage/StatusMessageImageAlbum.qml
+++ b/ui/StatusQ/src/StatusQ/Components/private/statusMessage/StatusMessageImageAlbum.qml
@@ -100,7 +100,7 @@ RowLayout {
                 readonly property int reminingItems: d.totalAlbumItems - root.albumCount + 1
                 anchors.centerIn: parent
                 color: Theme.palette.indirectColor1
-                font.pixelSize: Theme.fontSize19
+                font.pixelSize: Theme.fontSize(19)
                 font.weight: Font.Medium
                 text: reminingItems + "+"
             }
diff --git a/ui/StatusQ/src/StatusQ/Components/private/statusMessage/StatusTextMessage.qml b/ui/StatusQ/src/StatusQ/Components/private/statusMessage/StatusTextMessage.qml
index 10610e9cb8c..f7c9cf5de8a 100644
--- a/ui/StatusQ/src/StatusQ/Components/private/statusMessage/StatusTextMessage.qml
+++ b/ui/StatusQ/src/StatusQ/Components/private/statusMessage/StatusTextMessage.qml
@@ -57,7 +57,7 @@ Item {
                 const editedMessage = formattedMessage.slice(0, index)
                                     + ` <span class="isEdited">` + qsTr("(edited)") + `</span>`
                                     + formattedMessage.slice(index);
-                return Utils.getMessageWithStyle(Emoji.parse(editedMessage))
+                return Utils.getMessageWithStyle(root.Theme.palette, Emoji.parse(editedMessage))
             }
 
             if (root.convertToSingleLine || isQuote)
@@ -73,7 +73,8 @@ Item {
                 // short return not to add styling when no html
                 return formattedMessage
 
-            return Utils.getMessageWithStyle(formattedMessage, chatText.hoveredLink, !!root.disabledTooltipText)
+            return Utils.getMessageWithStyle(root.Theme.palette, formattedMessage,
+                                             chatText.hoveredLink, !!root.disabledTooltipText)
         }
 
         function showDisabledTooltipForAddressEnsName(link) {
diff --git a/ui/StatusQ/src/StatusQ/Controls/StatusBaseButton.qml b/ui/StatusQ/src/StatusQ/Controls/StatusBaseButton.qml
index f28154253c3..b05f601d803 100644
--- a/ui/StatusQ/src/StatusQ/Controls/StatusBaseButton.qml
+++ b/ui/StatusQ/src/StatusQ/Controls/StatusBaseButton.qml
@@ -95,7 +95,7 @@ AbstractButton {
         }
     }
 
-    font.family: Theme.baseFont.name
+    font.family: Fonts.baseFont.family
     font.weight: Font.Medium
     font.pixelSize: size === StatusBaseButton.Size.Large ? Theme.primaryTextFontSize
                                                          : Theme.additionalTextSize
diff --git a/ui/StatusQ/src/StatusQ/Controls/StatusBaseInput.qml b/ui/StatusQ/src/StatusQ/Controls/StatusBaseInput.qml
index 829cd60cf06..4e5032b41b2 100644
--- a/ui/StatusQ/src/StatusQ/Controls/StatusBaseInput.qml
+++ b/ui/StatusQ/src/StatusQ/Controls/StatusBaseInput.qml
@@ -393,7 +393,7 @@ Item {
                         selectedTextColor: color
                         focus: !Utils.isMobile
                         font.pixelSize: Theme.primaryTextFontSize
-                        font.family: Theme.baseFont.name
+                        font.family: Fonts.baseFont.family
                         color: root.enabled ? Theme.palette.directColor1 : Theme.palette.baseColor1
                         wrapMode: root.multiline ? Text.WrapAtWordBoundaryOrAnywhere : TextEdit.NoWrap
 
diff --git a/ui/StatusQ/src/StatusQ/Controls/StatusCheckBox.qml b/ui/StatusQ/src/StatusQ/Controls/StatusCheckBox.qml
index f8b1d8dd5a0..d221be29220 100644
--- a/ui/StatusQ/src/StatusQ/Controls/StatusCheckBox.qml
+++ b/ui/StatusQ/src/StatusQ/Controls/StatusCheckBox.qml
@@ -27,7 +27,7 @@ CheckBox {
     LayoutMirroring.childrenInherit: true
 
     padding: 4
-    opacity: enabled ? 1.0 : Theme.disabledOpacity
+    opacity: enabled ? 1.0 : ThemeUtils.disabledOpacity
 
     QtObject {
         id: d
@@ -42,7 +42,7 @@ CheckBox {
         readonly property int indicatorIconHeightSmall: 5
     }
 
-    font.family: Theme.baseFont.name
+    font.family: Fonts.baseFont.family
     font.pixelSize: size === StatusCheckBox.Size.Regular ? Theme.primaryTextFontSize : Theme.additionalTextSize
 
     indicator: Rectangle {
@@ -55,7 +55,7 @@ CheckBox {
         implicitHeight: implicitWidth
         radius: 2
         color: checkState !== Qt.Checked ? Theme.palette.directColor7 : Theme.palette.primaryColor1
-        Behavior on color { ColorAnimation { duration: Theme.AnimationDuration.Fast } }
+        Behavior on color { ColorAnimation { duration: ThemeUtils.AnimationDuration.Fast } }
 
         StatusIcon {
             icon: "checkbox"
@@ -68,7 +68,7 @@ CheckBox {
             color: checkState === Qt.PartiallyChecked ? Theme.palette.directColor9 : Theme.palette.white
             opacity: checkState !== Qt.Unchecked ? 1 : 0
             visible: opacity > 0
-            Behavior on opacity { OpacityAnimator { duration: Theme.AnimationDuration.Fast } }
+            Behavior on opacity { OpacityAnimator { duration: ThemeUtils.AnimationDuration.Fast } }
         }
     }
 
diff --git a/ui/StatusQ/src/StatusQ/Controls/StatusColorAnimation.qml b/ui/StatusQ/src/StatusQ/Controls/StatusColorAnimation.qml
index f0469781a8a..c98c8865872 100644
--- a/ui/StatusQ/src/StatusQ/Controls/StatusColorAnimation.qml
+++ b/ui/StatusQ/src/StatusQ/Controls/StatusColorAnimation.qml
@@ -38,7 +38,7 @@ SequentialAnimation {
     required property var target
     property string targetProperty: "color"
     property color fromColor: Theme.palette.directColor1
-    property color toColor: Theme.palette.getColor(fromColor, 0.1)
+    property color toColor: StatusColors.getColor(fromColor, 0.1)
     property int duration: 500 // in milliseconds
 
     loops: 3
diff --git a/ui/StatusQ/src/StatusQ/Controls/StatusColorRadioButton.qml b/ui/StatusQ/src/StatusQ/Controls/StatusColorRadioButton.qml
index 33700613f68..8c2b9e50423 100644
--- a/ui/StatusQ/src/StatusQ/Controls/StatusColorRadioButton.qml
+++ b/ui/StatusQ/src/StatusQ/Controls/StatusColorRadioButton.qml
@@ -2,10 +2,9 @@ import QtQuick
 import QtQuick.Controls
 
 import StatusQ.Core.Theme
-import StatusQ.Core.Utils
 
 RadioButton {
-    id: control
+    id: root
 
     property string radioButtonColor: ""
     property string selectionColor: StatusColors.colors['white']
@@ -19,16 +18,22 @@ RadioButton {
 
     QtObject {
         id: d
-        readonly property string yinYangColor: Utils.getYinYangColor(radioButtonColor)
+        readonly property string yinYangColor: {
+            if (root.radioButtonColor.toString().toUpperCase() === root.Theme.palette.customisationColors.yinYang.toString().toUpperCase()) {
+                return root.Theme.palette.name === "light" ? "#FFFFFF" : "#09101C"
+            }
+            return ""
+
+        }
     }
 
     indicator: Rectangle {
-        implicitWidth: control.diameter
-        implicitHeight: control.diameter
+        implicitWidth: root.diameter
+        implicitHeight: root.diameter
         radius: width/2
         color: radioButtonColor
         border.width: 1
-        border.color: Theme.palette.directColor7
+        border.color: root.Theme.palette.directColor7
 
         Item {
             id: dualColor
@@ -48,9 +53,9 @@ RadioButton {
 
         Rectangle {
             anchors.centerIn: parent
-            width: control.selectorDiameter
-            height: control.selectorDiameter
-            visible: control.checked
+            width: root.selectorDiameter
+            height: root.selectorDiameter
+            visible: root.checked
             radius: width/2
             color: selectionColor
             border.color: StatusColors.colors['grey3']
@@ -59,7 +64,7 @@ RadioButton {
     }
 
     HoverHandler {
-        enabled: control.enabled
+        enabled: root.enabled
         cursorShape: Qt.PointingHandCursor
     }
 }
diff --git a/ui/StatusQ/src/StatusQ/Controls/StatusComboBox.qml b/ui/StatusQ/src/StatusQ/Controls/StatusComboBox.qml
index 56ad5eddd89..2f7f033e950 100644
--- a/ui/StatusQ/src/StatusQ/Controls/StatusComboBox.qml
+++ b/ui/StatusQ/src/StatusQ/Controls/StatusComboBox.qml
@@ -104,7 +104,7 @@ Item {
 
             enabled: root.enabled && root.interactive
 
-            font.family: Theme.baseFont.name
+            font.family: Fonts.baseFont.family
             font.pixelSize: root.size === StatusComboBox.Size.Large ? Theme.secondaryTextFontSize : 13
 
             padding: 16
@@ -143,6 +143,11 @@ Item {
             popup: StatusDropdown {
                 id: dropdown
 
+                // workaround for QTBUG-142248
+                Theme.style: root.Theme.style
+                Theme.padding: root.Theme.pading
+                Theme.fontSizeOffset: root.Theme.fontSizeOffset
+
                 directParent: comboBox
                 closePolicy: Popup.CloseOnEscape | Popup.CloseOnPressOutsideParent
                 relativeY: comboBox.height + 4
diff --git a/ui/StatusQ/src/StatusQ/Controls/StatusDropdown.qml b/ui/StatusQ/src/StatusQ/Controls/StatusDropdown.qml
index 2bd9a70c7a3..879936bc073 100644
--- a/ui/StatusQ/src/StatusQ/Controls/StatusDropdown.qml
+++ b/ui/StatusQ/src/StatusQ/Controls/StatusDropdown.qml
@@ -65,12 +65,12 @@ QC.Popup {
         True when:
           - \c bottomSheetAllowed is true, and
           - the window is in portrait (\c d.windowHeight > d.windowWidth), and
-          - the window width is at or below \c Theme.portraitBreakpoint.width.
+          - the window width is at or below \c ThemeUtils.portraitBreakpoint.width.
         Otherwise false. Used to switch layout/parenting to a full-width, bottom-anchored sheet.
     */
     readonly property bool bottomSheet: !bottomSheetAllowed ? false:
                                             d.windowHeight > d.windowWidth
-                                            && d.windowWidth <= Theme.portraitBreakpoint.width
+                                            && d.windowWidth <= ThemeUtils.portraitBreakpoint.width
 
     /*!
        \qmlproperty bool fillHeightOnBottomSheet
diff --git a/ui/StatusQ/src/StatusQ/Controls/StatusFeeOption.qml b/ui/StatusQ/src/StatusQ/Controls/StatusFeeOption.qml
index a28d8373380..4d304c8eaf6 100644
--- a/ui/StatusQ/src/StatusQ/Controls/StatusFeeOption.qml
+++ b/ui/StatusQ/src/StatusQ/Controls/StatusFeeOption.qml
@@ -58,7 +58,7 @@ Control {
 
     signal clicked()
 
-    font.family: Theme.baseFont.name
+    font.family: Fonts.baseFont.family
     font.pixelSize: Theme.tertiaryTextFontSize
 
     horizontalPadding: 8
@@ -105,7 +105,7 @@ Control {
             }
 
             if (root.selected) {
-                return Theme.palette.alphaColor(Theme.palette.baseColor2, 0.1)
+                return StatusColors.alphaColor(Theme.palette.baseColor2, 0.1)
             }
 
             return Theme.palette.statusAppLayout.backgroundColor
diff --git a/ui/StatusQ/src/StatusQ/Controls/StatusFlatRoundButton.qml b/ui/StatusQ/src/StatusQ/Controls/StatusFlatRoundButton.qml
index 1ab585e3011..5360d6e786a 100644
--- a/ui/StatusQ/src/StatusQ/Controls/StatusFlatRoundButton.qml
+++ b/ui/StatusQ/src/StatusQ/Controls/StatusFlatRoundButton.qml
@@ -5,7 +5,7 @@ import StatusQ.Core.Theme
 import StatusQ.Components
 
 Rectangle {
-    id: statusFlatRoundButton
+    id: root
 
     property StatusAssetSettings icon: StatusAssetSettings {
         width: 24
@@ -13,25 +13,25 @@ Rectangle {
         rotation: 0
 
         color: {
-            switch(statusFlatRoundButton.type) {
+            switch(root.type) {
             case StatusFlatRoundButton.Type.Secondary:
-                return Theme.palette.directColor1;
+                return root.Theme.palette.directColor1;
             case StatusFlatRoundButton.Type.Primary:
-                return Theme.palette.primaryColor1;
+                return root.Theme.palette.primaryColor1;
             case StatusFlatRoundButton.Type.Tertiary:
-                return hovered ? Theme.palette.primaryColor1: Theme.palette.baseColor1;
+                return hovered ? root.Theme.palette.primaryColor1: root.Theme.palette.baseColor1;
             case StatusFlatRoundButton.Type.Quaternary:
-                return hovered ? Theme.palette.primaryColor1: Theme.palette.directColor1;
+                return hovered ? root.Theme.palette.primaryColor1: root.Theme.palette.directColor1;
             }
         }
 
         disabledColor: {
-            switch(statusFlatRoundButton.type) {
+            switch(root.type) {
             case StatusFlatRoundButton.Type.Secondary:
             case StatusFlatRoundButton.Type.Primary:
             case StatusFlatRoundButton.Type.Tertiary:
             case StatusFlatRoundButton.Type.Quaternary:
-                return Theme.palette.baseColor1;
+                return root.Theme.palette.baseColor1;
             }
         }
     }
@@ -65,7 +65,7 @@ Rectangle {
         id: backgroundSettings
 
         property color color: {
-            switch(statusFlatRoundButton.type) {
+            switch(root.type) {
             case StatusFlatRoundButton.Type.Primary:
             case StatusFlatRoundButton.Type.Secondary:
             case StatusFlatRoundButton.Type.Tertiary:
@@ -75,18 +75,18 @@ Rectangle {
         }
 
         property color hoverColor: {
-            switch(statusFlatRoundButton.type) {
+            switch(root.type) {
             case StatusFlatRoundButton.Type.Primary:
-                return Theme.palette.primaryColor3;
+                return root.Theme.palette.primaryColor3;
             case StatusFlatRoundButton.Type.Secondary:
             case StatusFlatRoundButton.Type.Tertiary:
             case StatusFlatRoundButton.Type.Quaternary:
-                return Theme.palette.baseColor2;
+                return root.Theme.palette.baseColor2;
             }
         }
 
         property color disabledColor: {
-            switch(statusFlatRoundButton.type) {
+            switch(root.type) {
             case StatusFlatRoundButton.Type.Primary:
             case StatusFlatRoundButton.Type.Secondary:
             case StatusFlatRoundButton.Type.Tertiary:
@@ -96,13 +96,13 @@ Rectangle {
         }
 
         property color highlightedColor: {
-            switch(statusFlatRoundButton.type) {
+            switch(root.type) {
             case StatusFlatRoundButton.Type.Primary:
-                return Theme.palette.primaryColor3;
+                return root.Theme.palette.primaryColor3;
             case StatusFlatRoundButton.Type.Secondary:
             case StatusFlatRoundButton.Type.Tertiary:
             case StatusFlatRoundButton.Type.Quaternary:
-                return Theme.palette.baseColor4;
+                return root.Theme.palette.baseColor4;
             }
         }
     }
@@ -112,7 +112,7 @@ Rectangle {
     radius: 8
 
     color: {
-        if (statusFlatRoundButton.enabled) {
+        if (root.enabled) {
             if (sensor.containsMouse) {
                 return backgroundSettings.hoverColor
             }
@@ -125,54 +125,54 @@ Rectangle {
         id: sensor
 
         anchors.fill: parent
-        cursorShape: loading ? Qt.ArrowCursor
+        cursorShape: root.loading ? Qt.ArrowCursor
                              : Qt.PointingHandCursor
-        hoverEnabled: !loading
-        enabled: !loading
+        hoverEnabled: !root.loading
+        enabled: !root.loading
 
 
         StatusIcon {
             id: statusIcon
             anchors.centerIn: parent
-            visible: !loading
+            visible: !root.loading
 
-            icon: statusFlatRoundButton.icon.name
-            source: statusFlatRoundButton.icon.source
-            rotation: statusFlatRoundButton.icon.rotation
+            icon: root.icon.name
+            source: root.icon.source
+            rotation: root.icon.rotation
 
-            width: statusFlatRoundButton.icon.width
-            height: statusFlatRoundButton.icon.height
+            width: root.icon.width
+            height: root.icon.height
 
             color: {
-                if (statusFlatRoundButton.enabled) {
-                    return statusFlatRoundButton.icon.color
+                if (root.enabled) {
+                    return root.icon.color
                 } else {
-                    return statusFlatRoundButton.icon.disabledColor
+                    return root.icon.disabledColor
                 }
             }
         } // Icon
         Loader {
-            active: loading
+            active: root.loading
             anchors.centerIn: parent
             sourceComponent: StatusLoadingIndicator {
                 color: {
-                    if (statusFlatRoundButton.enabled) {
-                        return statusFlatRoundButton.icon.color
+                    if (root.enabled) {
+                        return root.icon.color
                     } else {
-                        return statusFlatRoundButton.icon.disabledColor
+                        return root.icon.disabledColor
                     }
                 }
             } // Indicator
         } // Loader
 
-        onClicked: (mouse) => statusFlatRoundButton.clicked(mouse)
-        onPressed: (mouse) => statusFlatRoundButton.pressed(mouse)
-        onReleased: (mouse) => statusFlatRoundButton.released(mouse)
-        onPressAndHold: (mouse) => statusFlatRoundButton.pressAndHold(mouse)
+        onClicked: mouse => root.clicked(mouse)
+        onPressed: mouse => root.pressed(mouse)
+        onReleased: mouse => root.released(mouse)
+        onPressAndHold: mouse => root.pressAndHold(mouse)
     } // Sensor
 
     StatusToolTip {
         id: statusToolTip
-        visible: !!text && statusFlatRoundButton.hovered
+        visible: !!text && root.hovered
     } // Tooltip
 } // Rectangle
diff --git a/ui/StatusQ/src/StatusQ/Controls/StatusInput.qml b/ui/StatusQ/src/StatusQ/Controls/StatusInput.qml
index 1cdf196bbeb..39e9a5a3a00 100644
--- a/ui/StatusQ/src/StatusQ/Controls/StatusInput.qml
+++ b/ui/StatusQ/src/StatusQ/Controls/StatusInput.qml
@@ -76,7 +76,7 @@ Control {
         This property holds a reference to the TextEdit's font property.
     */
     font.pixelSize: Theme.primaryTextFontSize
-    font.family: Theme.baseFont.name
+    font.family: Fonts.baseFont.family
     /*!
         \qmlproperty alias StatusInput::multiline
         This property indicates whether the StatusBaseInput allows multiline text. Default value is false.
diff --git a/ui/StatusQ/src/StatusQ/Controls/StatusItemDelegate.qml b/ui/StatusQ/src/StatusQ/Controls/StatusItemDelegate.qml
index e557e3c05a7..58704b5dced 100644
--- a/ui/StatusQ/src/StatusQ/Controls/StatusItemDelegate.qml
+++ b/ui/StatusQ/src/StatusQ/Controls/StatusItemDelegate.qml
@@ -19,7 +19,7 @@ ItemDelegate {
     icon.width: 16
     icon.height: 16
 
-    font.family: Theme.baseFont.name
+    font.family: Fonts.baseFont.family
     font.pixelSize: Theme.primaryTextFontSize
 
     contentItem: RowLayout {
diff --git a/ui/StatusQ/src/StatusQ/Controls/StatusRadioButton.qml b/ui/StatusQ/src/StatusQ/Controls/StatusRadioButton.qml
index f5e72b411c2..54309a4d197 100644
--- a/ui/StatusQ/src/StatusQ/Controls/StatusRadioButton.qml
+++ b/ui/StatusQ/src/StatusQ/Controls/StatusRadioButton.qml
@@ -21,8 +21,8 @@ RadioButton {
         Large
     }
 
-    opacity: enabled ? 1.0 : Theme.disabledOpacity
-    font.family: Theme.baseFont.name
+    opacity: enabled ? 1.0 : ThemeUtils.disabledOpacity
+    font.family: Fonts.baseFont.family
     font.pixelSize: Theme.primaryTextFontSize
 
     indicator: Rectangle {
diff --git a/ui/StatusQ/src/StatusQ/Controls/StatusSeedPhraseField.qml b/ui/StatusQ/src/StatusQ/Controls/StatusSeedPhraseField.qml
index 05e3c7fb15f..4342fbaad76 100644
--- a/ui/StatusQ/src/StatusQ/Controls/StatusSeedPhraseField.qml
+++ b/ui/StatusQ/src/StatusQ/Controls/StatusSeedPhraseField.qml
@@ -20,7 +20,7 @@ TextField {
     selectedTextColor: color
     focus: !Utils.isMobile
     font.pixelSize: Theme.primaryTextFontSize
-    font.family: Theme.baseFont.name
+    font.family: Fonts.baseFont.family
     color: root.enabled ? Theme.palette.directColor1 : Theme.palette.baseColor1
 
     inputMethodHints: Qt.ImhSensitiveData | Qt.ImhNoPredictiveText |
@@ -44,7 +44,7 @@ TextField {
             anchors.rightMargin: root.width - root.leftPadding
 
             text: "" + root.displayIndex
-            font.family: Theme.monoFont.name
+            font.family: Fonts.monoFont.family
 
             horizontalAlignment: Qt.AlignHCenter
             verticalAlignment: Qt.AlignVCenter
diff --git a/ui/StatusQ/src/StatusQ/Controls/StatusSeedPhraseInput.qml b/ui/StatusQ/src/StatusQ/Controls/StatusSeedPhraseInput.qml
index 0e11d27b62a..a23f9864b7a 100644
--- a/ui/StatusQ/src/StatusQ/Controls/StatusSeedPhraseInput.qml
+++ b/ui/StatusQ/src/StatusQ/Controls/StatusSeedPhraseInput.qml
@@ -138,7 +138,7 @@ Item {
             leftPadding: text.length === 1 ? 10 : 6
             rightPadding: 4
             text: root.leftComponentText
-            font.family: Theme.monoFont.name
+            font.family: Fonts.monoFont.family
             horizontalAlignment: Qt.AlignHCenter
             color: root.isError ? Theme.palette.dangerColor1
                                 : seedWordInput.input.edit.activeFocus ? Theme.palette.primaryColor1
diff --git a/ui/StatusQ/src/StatusQ/Controls/StatusSelectableText.qml b/ui/StatusQ/src/StatusQ/Controls/StatusSelectableText.qml
index ac24ed88057..fba9a43754a 100644
--- a/ui/StatusQ/src/StatusQ/Controls/StatusSelectableText.qml
+++ b/ui/StatusQ/src/StatusQ/Controls/StatusSelectableText.qml
@@ -71,7 +71,7 @@ Item {
                 selectedTextColor: color
                 focus: !Utils.isMobile // Do not focus on mobile devices
                 font.pixelSize: Theme.primaryTextFontSize
-                font.family: Theme.baseFont.name
+                font.family: Fonts.baseFont.family
                 color: Theme.palette.directColor1
                 textFormat: Text.RichText
                 onCursorRectangleChanged: Utils.ensureVisible(flick, cursorRectangle)
diff --git a/ui/StatusQ/src/StatusQ/Controls/StatusSwitch.qml b/ui/StatusQ/src/StatusQ/Controls/StatusSwitch.qml
index aa7a7549e71..2e3e0a75368 100644
--- a/ui/StatusQ/src/StatusQ/Controls/StatusSwitch.qml
+++ b/ui/StatusQ/src/StatusQ/Controls/StatusSwitch.qml
@@ -10,13 +10,13 @@ Switch {
 
     property color textColor: Theme.palette.directColor1
 
-    font.family: Theme.baseFont.name
+    font.family: Fonts.baseFont.family
     font.pixelSize: Theme.primaryTextFontSize
 
     background: null
 
     padding: 4
-    opacity: enabled ? 1.0 : Theme.disabledOpacity
+    opacity: enabled ? 1.0 : ThemeUtils.disabledOpacity
 
     property bool leftSide: true
     LayoutMirroring.enabled: !leftSide
@@ -37,7 +37,7 @@ Switch {
             radius: 14
             color: root.checked ? Theme.palette.primaryColor1
                                 : Theme.palette.directColor7
-            Behavior on color { ColorAnimation { duration: Theme.AnimationDuration.Fast } }
+            Behavior on color { ColorAnimation { duration: ThemeUtils.AnimationDuration.Fast } }
         }
 
         Rectangle {
diff --git a/ui/StatusQ/src/StatusQ/Controls/StatusTabButton.qml b/ui/StatusQ/src/StatusQ/Controls/StatusTabButton.qml
index e5517be005e..c3bcc48325a 100644
--- a/ui/StatusQ/src/StatusQ/Controls/StatusTabButton.qml
+++ b/ui/StatusQ/src/StatusQ/Controls/StatusTabButton.qml
@@ -31,13 +31,13 @@ TabButton {
 
     background: null
 
-    font.family: Theme.baseFont.name
+    font.family: Fonts.baseFont.family
     font.weight: Font.Medium
     font.pixelSize: Theme.primaryTextFontSize
 
     hoverEnabled: enabled
 
-    opacity: enabled ? 1 : Theme.disabledOpacity
+    opacity: enabled ? 1 : ThemeUtils.disabledOpacity
 
     spacing: Theme.smallPadding
 
@@ -52,7 +52,7 @@ TabButton {
                 elide: Qt.ElideRight
                 font: root.font
                 color: !enabled ? Theme.palette.baseColor1 : root.checked || root.hovered ? Theme.palette.directColor1 : Theme.palette.baseColor1
-                Behavior on color {ColorAnimation {duration: Theme.AnimationDuration.Fast}}
+                Behavior on color {ColorAnimation {duration: ThemeUtils.AnimationDuration.Fast}}
                 text: root.text
             }
 
@@ -67,10 +67,10 @@ TabButton {
             Layout.preferredWidth: 24
             Layout.preferredHeight: 2
             opacity: root.checked || root.hovered ? 1 : 0
-            Behavior on opacity {OpacityAnimator {duration: Theme.AnimationDuration.Fast}}
+            Behavior on opacity {OpacityAnimator {duration: ThemeUtils.AnimationDuration.Fast}}
             radius: 4
             color: root.checked ? Theme.palette.primaryColor1 : Theme.palette.primaryColor2
-            Behavior on color {ColorAnimation {duration: Theme.AnimationDuration.Fast}}
+            Behavior on color {ColorAnimation {duration: ThemeUtils.AnimationDuration.Fast}}
         }
     }
 
diff --git a/ui/StatusQ/src/StatusQ/Controls/StatusTagItem.qml b/ui/StatusQ/src/StatusQ/Controls/StatusTagItem.qml
index cdfcc4646a9..41b9515cc4c 100644
--- a/ui/StatusQ/src/StatusQ/Controls/StatusTagItem.qml
+++ b/ui/StatusQ/src/StatusQ/Controls/StatusTagItem.qml
@@ -74,7 +74,7 @@ Control {
     implicitHeight: 30
     horizontalPadding: d.tagMargins
     font.pixelSize: Theme.primaryTextFontSize
-    font.family: Theme.baseFont.name
+    font.family: Fonts.baseFont.family
 
     background: Rectangle {
         color: d.getTagColor(root.isReadonly)
diff --git a/ui/StatusQ/src/StatusQ/Controls/StatusTextArea.qml b/ui/StatusQ/src/StatusQ/Controls/StatusTextArea.qml
index f334cfda2b4..d70f72c464f 100644
--- a/ui/StatusQ/src/StatusQ/Controls/StatusTextArea.qml
+++ b/ui/StatusQ/src/StatusQ/Controls/StatusTextArea.qml
@@ -67,7 +67,7 @@ TextArea {
     placeholderTextColor: root.enabled ? Theme.palette.baseColor1 : Theme.palette.directColor9
 
     font {
-        family: Theme.baseFont.name
+        family: Fonts.baseFont.family
         pixelSize: Theme.primaryTextFontSize
     }
 
diff --git a/ui/StatusQ/src/StatusQ/Controls/StatusTextField.qml b/ui/StatusQ/src/StatusQ/Controls/StatusTextField.qml
index 804a90eebc3..1586bca7e1f 100644
--- a/ui/StatusQ/src/StatusQ/Controls/StatusTextField.qml
+++ b/ui/StatusQ/src/StatusQ/Controls/StatusTextField.qml
@@ -11,7 +11,7 @@ TextField {
     id: root
     Accessible.name: Utils.formatAccessibleName(placeholderText, objectName)
 
-    font.family: Theme.baseFont.name
+    font.family: Fonts.baseFont.family
     font.pixelSize: Theme.primaryTextFontSize
     color: readOnly ? Theme.palette.baseColor1 : Theme.palette.directColor1
     selectByMouse: true
@@ -19,7 +19,7 @@ TextField {
     selectionColor: Theme.palette.primaryColor2
     placeholderTextColor: Theme.palette.baseColor1
 
-    opacity: enabled ? 1 : Theme.disabledOpacity
+    opacity: enabled ? 1 : ThemeUtils.disabledOpacity
 
     cursorDelegate: StatusCursorDelegate {
         cursorVisible: root.cursorVisible
diff --git a/ui/StatusQ/src/StatusQ/Core/StatusAssetSettings.qml b/ui/StatusQ/src/StatusQ/Core/StatusAssetSettings.qml
index 61f157f1fcf..f9eeb749656 100644
--- a/ui/StatusQ/src/StatusQ/Core/StatusAssetSettings.qml
+++ b/ui/StatusQ/src/StatusQ/Core/StatusAssetSettings.qml
@@ -18,7 +18,7 @@ QtObject {
     property bool isLetterIdenticon
     property bool useAcronymForLetterIdenticon: true
     property bool letterIdenticonBgWithAlpha: false
-    property int letterSize: emoji ? (Theme.fontSize11) : (charactersLen == 1 ? _oneLetterSize : _twoLettersSize)
+    property int letterSize: emoji ? (Theme.fontSize(11)) : (charactersLen == 1 ? _oneLetterSize : _twoLettersSize)
     property int charactersLen: 1
 
     property string emoji
diff --git a/ui/StatusQ/src/StatusQ/Core/StatusBaseText.qml b/ui/StatusQ/src/StatusQ/Core/StatusBaseText.qml
index cf0489e912a..54f3331a847 100644
--- a/ui/StatusQ/src/StatusQ/Core/StatusBaseText.qml
+++ b/ui/StatusQ/src/StatusQ/Core/StatusBaseText.qml
@@ -15,7 +15,7 @@ import StatusQ.Core.Theme
        StatusBaseText {
            width: 240
            text: qsTr("Hello World!")
-           font.pixelSize: Theme.fontSize24
+           font.pixelSize: Theme.fontSize(24)
            color: Theme.palette.directColor1
        }
    \endqml
@@ -26,7 +26,7 @@ import StatusQ.Core.Theme
 */
 
 Text {
-    font.family: Theme.baseFont.name
+    font.family: Fonts.baseFont.family
     font.pixelSize: Theme.primaryTextFontSize
     color: Theme.palette.directColor1
     linkColor: hoveredLink ? Qt.lighter(Theme.palette.primaryColor1)
diff --git a/ui/StatusQ/src/StatusQ/Core/StatusProfileImageSettings.qml b/ui/StatusQ/src/StatusQ/Core/StatusProfileImageSettings.qml
index 8d57afa7bbe..8b3d73855a1 100644
--- a/ui/StatusQ/src/StatusQ/Core/StatusProfileImageSettings.qml
+++ b/ui/StatusQ/src/StatusQ/Core/StatusProfileImageSettings.qml
@@ -12,7 +12,7 @@ QtObject {
     property string pubkey
     property bool interactive: true
 
-    property int colorId // TODO: default value Utils.colorIdForPubkey(pubkey)
+    property color color
 
     property StatusAssetSettings assetSettings: StatusAssetSettings {
         width: root.width
@@ -20,7 +20,7 @@ QtObject {
         name: root.name
         isLetterIdenticon: (name === "")
         imgIsIdenticon: root.isIdenticon
-        color: Theme.palette.userCustomizationColors[root.colorId]
+        color: root.color
         charactersLen: 2
     }
 }
diff --git a/ui/StatusQ/src/StatusQ/Core/Theme/Assets.qml b/ui/StatusQ/src/StatusQ/Core/Theme/Assets.qml
new file mode 100644
index 00000000000..238d7958c6c
--- /dev/null
+++ b/ui/StatusQ/src/StatusQ/Core/Theme/Assets.qml
@@ -0,0 +1,17 @@
+pragma Singleton
+
+import QtQml
+
+QtObject {
+    readonly property string assetPath: Qt.resolvedUrl("../../../assets/")
+
+    function png(name) {
+        return assetPath + "png/" + name + ".png"
+    }
+    function svg(name) {
+        return assetPath + "img/icons/" + name + ".svg"
+    }
+    function emoji(name) {
+        return assetPath + "twemoji/svg/" + name + ".svg"
+    }
+}
diff --git a/ui/StatusQ/src/StatusQ/Core/Theme/Fonts.qml b/ui/StatusQ/src/StatusQ/Core/Theme/Fonts.qml
new file mode 100644
index 00000000000..1416aeef98b
--- /dev/null
+++ b/ui/StatusQ/src/StatusQ/Core/Theme/Fonts.qml
@@ -0,0 +1,108 @@
+pragma Singleton
+
+import QtQuick
+
+import StatusQ.Core.Utils as SQUtils
+
+SQUtils.QObject {
+    readonly property alias baseFont: baseFont.font
+    readonly property alias monoFont: monoFont.font
+    readonly property alias codeFont: codeFont.font
+
+    FontLoader {
+        id: baseFont
+
+        source: Assets.assetPath + "fonts/Inter/Inter-Regular.otf"
+    }
+
+    FontLoader {
+        id: monoFont
+
+        source: Assets.assetPath + "fonts/InterStatus/InterStatus-Regular.otf"
+    }
+
+    FontLoader {
+        id: codeFont
+
+        source: Assets.assetPath + "fonts/RobotoMono/RobotoMono-Regular.ttf"
+    }
+
+    // Inter font variants
+    FontLoader {
+        source: Assets.assetPath + "fonts/Inter/Inter-Thin.otf"
+    }
+
+    FontLoader {
+        source: Assets.assetPath + "fonts/Inter/Inter-ExtraLight.otf"
+    }
+
+    FontLoader {
+        source: Assets.assetPath + "fonts/Inter/Inter-Light.otf"
+    }
+
+    FontLoader {
+        source: Assets.assetPath + "fonts/Inter/Inter-Medium.otf"
+    }
+
+    FontLoader {
+        source: Assets.assetPath + "fonts/Inter/Inter-Bold.otf"
+    }
+
+    FontLoader {
+        source: Assets.assetPath + "fonts/Inter/Inter-ExtraBold.otf"
+    }
+
+    FontLoader {
+        source: Assets.assetPath + "fonts/Inter/Inter-Black.otf"
+    }
+
+    // Inter Status font variants
+    FontLoader {
+        source: Assets.assetPath + "fonts/InterStatus/InterStatus-Thin.otf"
+    }
+
+    FontLoader {
+        source: Assets.assetPath + "fonts/InterStatus/InterStatus-ExtraLight.otf"
+    }
+
+    FontLoader {
+        source: Assets.assetPath + "fonts/InterStatus/InterStatus-Light.otf"
+    }
+
+    FontLoader {
+        source: Assets.assetPath + "fonts/InterStatus/InterStatus-Medium.otf"
+    }
+
+    FontLoader {
+        source: Assets.assetPath + "fonts/InterStatus/InterStatus-Bold.otf"
+    }
+
+    FontLoader {
+        source: Assets.assetPath + "fonts/InterStatus/InterStatus-ExtraBold.otf"
+    }
+
+    FontLoader {
+        source: Assets.assetPath + "fonts/InterStatus/InterStatus-Black.otf"
+    }
+
+    // Roboto font variants
+    FontLoader {
+        source: Assets.assetPath + "fonts/RobotoMono/RobotoMono-Thin.ttf"
+    }
+
+    FontLoader {
+        source: Assets.assetPath + "fonts/RobotoMono/RobotoMono-ExtraLight.ttf"
+    }
+
+    FontLoader {
+        source: Assets.assetPath + "fonts/RobotoMono/RobotoMono-Light.ttf"
+    }
+
+    FontLoader {
+        source: Assets.assetPath + "fonts/RobotoMono/RobotoMono-Medium.ttf"
+    }
+
+    FontLoader {
+        source: Assets.assetPath + "fonts/RobotoMono/RobotoMono-Bold.ttf"
+    }
+}
diff --git a/ui/StatusQ/src/StatusQ/Core/Theme/StatusColors.qml b/ui/StatusQ/src/StatusQ/Core/Theme/StatusColors.qml
deleted file mode 100644
index 4e8c35092d9..00000000000
--- a/ui/StatusQ/src/StatusQ/Core/Theme/StatusColors.qml
+++ /dev/null
@@ -1,90 +0,0 @@
-pragma Singleton
-
-import QtQml
-
-QtObject {
-
-    readonly property var colors: {
-        'black': '#000000',
-        'white': '#FFFFFF',
-
-        'blue': '#4360DF',
-        'blue2': '#2946C4',
-        'blue3': '#88B0FF',
-        'blue4': '#869EFF',
-        'blue5': '#AAC6FF',
-        'blue6': '#ECEFFC',
-        'blue7': '#09101C',
-        'blue8': '#6B6F76',
-
-        'brown': '#8B3131',
-        'brown2': '#9B832F',
-        'brown3': '#AD4343',
-
-        'cyan': '#51D0F0',
-
-        'graphite': '#212121',
-        'graphite2': '#252525',
-        'graphite3': '#2C2C2C',
-        'graphite4': '#373737',
-        'graphite5': '#909090',
-
-        'green': '#4EBC60',
-        'green2': '#7CDA00',
-        'green3': '#60C370',
-        'green4': '#93DB33',
-        'green5': '#9EA85D',
-        'green6': '#AFB551',
-
-        'grey': '#F0F2F5',
-        'grey2': '#F6F8FA',
-        'grey3': '#E9EDF1',
-        'grey4': '#EEF2F5',
-        'grey5': '#939BA1',
-
-        'moss': '#26A69A',
-        'moss2': '#10A88E',
-
-        'orange': '#FE8F59',
-        'orange2': '#FF9F0F',
-        'orange3': '#FFA67B',
-        'orange4': '#FE8F59',
-
-        'warning_orange': '#F6793C',
-
-        'purple': '#887AF9',
-
-        'red': '#FF2D55',
-        'red2': '#FA6565',
-        'red3': '#FF5C7B',
-
-        'turquoise': '#0DA4C9',
-        'turquoise2': '#07BCE9',
-        'turquoise3': '#7BE5FF',
-        'turquoise4': '#0DA4C9',
-
-        'violet': '#D37EF4',
-
-        'yellow': '#FFCA0F',
-        'yellow2': '#EAD27B',
-
-        'blueHijab': '#CDF2FB',
-
-        'lightPattensBlue': '#D7DEE4',
-
-        'blackHovered': '#1D232E',
-        'blueHovered': '#364DB2',
-        'purpleHovered': '#6D62C7',
-        'cyanHovered': '#41A6C0',
-        'violetHovered': '#A965C3',
-        'redHovered': '#C85151',
-        'yellowHovered': '#CCA20C',
-        'greenHovered': '#63AE00',
-        'mossHovered': '#1E857B',
-        'brownHovered': '#6F2727',
-        'brown2Hovered': '#7C6926',
-
-        'lightDesktopBlue10': '#ECEFFB',
-        'darkDesktopBlue10': '#273251'
-    }
-}
diff --git a/ui/StatusQ/src/StatusQ/Core/Theme/StatusDarkTheme.qml b/ui/StatusQ/src/StatusQ/Core/Theme/StatusDarkTheme.qml
deleted file mode 100644
index 7a6a1df46f1..00000000000
--- a/ui/StatusQ/src/StatusQ/Core/Theme/StatusDarkTheme.qml
+++ /dev/null
@@ -1,198 +0,0 @@
-import QtQuick
-
-ThemePalette {
-    id: root
-
-    name: "dark"
-
-    baseColor1: getColor('graphite5')
-    baseColor2: getColor('graphite4')
-    baseColor3: getColor('graphite3')
-    baseColor4: getColor('graphite2')
-    baseColor5: getColor('graphite')
-
-    primaryColor1: getColor('blue3')
-    primaryColor2: getColor('blue4', 0.3)
-    primaryColor3: getColor('blue4', 0.2)
-
-    dangerColor1: getColor('red3')
-    dangerColor2: getColor('red3', 0.3)
-    dangerColor3: getColor('red3', 0.2)
-
-    warningColor1: getColor('warning_orange')
-    warningColor2: getColor('warning_orange', 0.2)
-    warningColor3: getColor('warning_orange', 0.1)
-
-    successColor1: getColor('green3')
-    successColor2: getColor('green3', 0.2)
-    successColor3: getColor('green3', 0.3)
-
-    mentionColor1: getColor('turquoise3')
-    mentionColor2: getColor('turquoise4', 0.3)
-    mentionColor3: getColor('turquoise4', 0.2)
-    mentionColor4: getColor('turquoise4', 0.1)
-
-    pinColor1: getColor('orange3')
-    pinColor2: getColor('orange4', 0.2)
-    pinColor3: getColor('orange4', 0.1)
-
-    directColor1: getColor('white')
-    directColor2: getColor('white', 0.9)
-    directColor3: getColor('white', 0.8)
-    directColor4: getColor('white', 0.7)
-    directColor5: getColor('white', 0.4)
-    directColor6: getColor('white', 0.2)
-    directColor7: getColor('white', 0.1)
-    directColor8: getColor('white', 0.05)
-    directColor9: getColor('white', 0.2)
-
-    indirectColor1: getColor('black')
-    indirectColor2: getColor('black', 0.7)
-    indirectColor3: getColor('black', 0.4)
-    indirectColor4: getColor('graphite3')
-
-    miscColor1: getColor('blue5')
-    miscColor2: getColor('purple')
-    miscColor3: getColor('cyan')
-    miscColor4: getColor('violet')
-    miscColor5: getColor('red2')
-    miscColor6: getColor('orange')
-    miscColor7: getColor('yellow')
-    miscColor8: getColor('green4')
-    miscColor9: getColor('moss2')
-    miscColor10: getColor('brown3')
-    miscColor11: getColor('yellow2')
-    miscColor12: getColor('green6')
-
-    neutral95: "#060F1F"
-
-    dropShadow: getColor('black', 0.08)
-    dropShadow2: getColor('blue8', 0.02)
-    dropShadow3: getColor('blue8', 0.05) // suitable for MultiEffect
-
-    statusFloatingButtonHighlight: getColor('blue4', 0.3)
-
-    statusLoadingHighlight: getColor('white', 0.03)
-    statusLoadingHighlight2: getColor('white', 0.07)
-
-    messageHighlightColor: getColor('blue4', 0.2)
-
-    desktopBlue10: getColor('darkDesktopBlue10')
-
-    userCustomizationColors: [
-        "#AAC6FF",
-        "#887AF9",
-        "#51D0F0",
-        "#D37EF4",
-        "#FA6565",
-        "#FFCA0F",
-        "#93DB33",
-        "#10A88E",
-        "#AD4343",
-        "#EAD27B",
-        "silver", // update me when figma is ready
-        "darkgrey", // update me when figma is ready
-    ]
-
-    blockProgressBarColor: directColor7
-
-    // Style compat
-    background: baseColor3
-    separator: directColor7
-    darkGrey: baseColor2
-    secondaryMenuBackground: getColor("graphite2")
-
-    statusAppLayout: QtObject {
-        property color backgroundColor: baseColor3
-        property color rightPanelBackgroundColor: baseColor3
-    }
-
-    statusAppNavBar: QtObject {
-        property color backgroundColor: baseColor5
-    }
-
-    statusToastMessage: QtObject {
-        property color backgroundColor: baseColor3
-    }
-
-    statusListItem: QtObject {
-        property color backgroundColor: baseColor3
-        property color secondaryHoverBackgroundColor: primaryColor3
-        property color highlightColor: getColor('blue3', 0.05)
-    }
-
-    statusChatListItem: QtObject {
-        property color hoverBackgroundColor: directColor8
-        property color selectedBackgroundColor: directColor7
-    }
-
-    statusChatListCategoryItem: QtObject {
-        property color buttonHoverBackgroundColor: directColor7
-    }
-
-    statusNavigationListItem: QtObject {
-        property color hoverBackgroundColor: directColor8
-        property color selectedBackgroundColor: directColor7
-    }
-
-    statusBadge: QtObject {
-        property color foregroundColor: baseColor3
-        property color borderColor: baseColor5
-        property color hoverBorderColor: "#353A4D"
-    }
-
-    statusChatInfoButton: QtObject {
-        property color backgroundColor: baseColor3
-    }
-
-    statusMenu: QtObject {
-        property color backgroundColor: baseColor3
-        property color hoverBackgroundColor: directColor7
-        property color separatorColor: root.separator
-    }
-
-    statusModal: QtObject {
-        property color backgroundColor: baseColor3
-    }
-
-    statusRoundedImage: QtObject {
-        property color backgroundColor: baseColor3
-    }
-
-    statusChatInput: QtObject {
-        property color secondaryBackgroundColor: "#414141"
-    }
-
-    statusSelect: QtObject {
-        property color menuItemBackgroundColor: baseColor3
-        property color menuItemHoverBackgroundColor: directColor7
-    }
-
-    statusMessage: QtObject {
-        property color emojiReactionBackground: baseColor4
-        property color emojiReactionBackgroundHovered: primaryColor3
-        property color emojiReactionBorderHovered: primaryColor2
-    }
-
-    customisationColors: QtObject {
-        property color blue: "#223BC4"
-        property color purple: "#5A33CA"
-        property color orange: "#CC6438"
-        property color army: "#1A4E52"
-        property color turquoise: "#22617C"
-        property color sky: "#1475AC"
-        property color yellow: "#C58D30"
-        property color pink: "#C55972"
-        property color copper:"#A24E45"
-        property color camel: "#9F7252"
-        property color magenta: "#BD1E56"
-        property color yinYang: "#FFFFFF"
-    }
-
-    privacyColors: QtObject {
-        property color primary: "#341D65"
-        property color secondary: "#5B438E"
-        property color tertiary: white
-        property color tertiaryOpaque: getColor(white, 0.3)
-    }
-}
diff --git a/ui/StatusQ/src/StatusQ/Core/Theme/StatusLightTheme.qml b/ui/StatusQ/src/StatusQ/Core/Theme/StatusLightTheme.qml
deleted file mode 100644
index 8078e569621..00000000000
--- a/ui/StatusQ/src/StatusQ/Core/Theme/StatusLightTheme.qml
+++ /dev/null
@@ -1,198 +0,0 @@
-import QtQuick
-
-ThemePalette {
-    id: root
-
-    name: "light"
-
-    baseColor1: getColor('grey5')
-    baseColor2: getColor('grey4')
-    baseColor3: getColor('grey3')
-    baseColor4: getColor('grey2')
-    baseColor5: getColor('grey')
-
-    primaryColor1: getColor('blue')
-    primaryColor2: getColor('blue', 0.2)
-    primaryColor3: getColor('blue', 0.1)
-
-    dangerColor1: getColor('red')
-    dangerColor2: getColor('red', 0.2)
-    dangerColor3: getColor('red', 0.1)
-
-    warningColor1: getColor('warning_orange')
-    warningColor2: getColor('warning_orange', 0.2)
-    warningColor3: getColor('warning_orange', 0.1)
-
-    successColor1: getColor('green')
-    successColor2: getColor('green', 0.1)
-    successColor3: getColor('green', 0.2)
-
-    mentionColor1: getColor('turquoise')
-    mentionColor2: getColor('turquoise2', 0.3)
-    mentionColor3: getColor('turquoise2', 0.2)
-    mentionColor4: getColor('turquoise2', 0.1)
-
-    pinColor1: getColor('orange')
-    pinColor2: getColor('orange2', 0.2)
-    pinColor3: getColor('orange2', 0.1)
-
-    directColor1: getColor('black')
-    directColor2: getColor('black', 0.9)
-    directColor3: getColor('black', 0.8)
-    directColor4: getColor('black', 0.7)
-    directColor5: getColor('black', 0.4)
-    directColor6: getColor('black', 0.3)
-    directColor7: getColor('black', 0.1)
-    directColor8: getColor('black', 0.05)
-    directColor9: getColor('black', 0.2)
-
-    indirectColor1: getColor('white')
-    indirectColor2: getColor('white', 0.7)
-    indirectColor3: getColor('white', 0.4)
-    indirectColor4: getColor('white')
-
-    miscColor1: getColor('blue2')
-    miscColor2: getColor('purple')
-    miscColor3: getColor('cyan')
-    miscColor4: getColor('violet')
-    miscColor5: getColor('red2')
-    miscColor6: getColor('orange')
-    miscColor7: getColor('yellow')
-    miscColor8: getColor('green2')
-    miscColor9: getColor('moss')
-    miscColor10: getColor('brown')
-    miscColor11: getColor('brown2')
-    miscColor12: getColor('green5')
-
-    neutral95: "#0D1625"
-
-    dropShadow: Qt.rgba(0, 34/255, 51/255, 0.03)
-    dropShadow2: getColor('blue7', 0.02)
-    dropShadow3: getColor('black', 0.15) // suitable for MultiEffect
-
-    statusFloatingButtonHighlight: getColor('blueHijab')
-
-    statusLoadingHighlight: getColor('lightPattensBlue', 0.5)
-    statusLoadingHighlight2: indirectColor3
-
-    messageHighlightColor: getColor('blue', 0.2)
-
-    desktopBlue10: getColor('lightDesktopBlue10')
-
-    userCustomizationColors: [
-        "#2946C4",
-        "#887AF9",
-        "#51D0F0",
-        "#D37EF4",
-        "#FA6565",
-        "#FFCA0F",
-        "#7CDA00",
-        "#26A69A",
-        "#8B3131",
-        "#9B832F",
-        "silver", // update me when figma is ready
-        "darkgrey", // update me when figma is ready
-    ]
-
-    blockProgressBarColor: baseColor3
-
-    // Style compat
-    background: white
-    separator: baseColor2
-    darkGrey: baseColor1
-    secondaryMenuBackground: baseColor4
-
-    statusAppLayout: QtObject {
-        property color backgroundColor: white
-        property color rightPanelBackgroundColor: white
-    }
-
-    statusAppNavBar: QtObject {
-        property color backgroundColor: baseColor2
-    }
-
-    statusToastMessage: QtObject {
-        property color backgroundColor: white
-    }
-
-    statusListItem: QtObject {
-        property color backgroundColor: white
-        property color secondaryHoverBackgroundColor: getColor('blue6')
-        property color highlightColor: getColor('blue', 0.05)
-    }
-
-    statusChatListItem: QtObject {
-        property color hoverBackgroundColor: baseColor2
-        property color selectedBackgroundColor: baseColor3
-    }
-
-    statusChatListCategoryItem: QtObject {
-        property color buttonHoverBackgroundColor: directColor8
-    }
-
-    statusNavigationListItem: QtObject {
-        property color hoverBackgroundColor: baseColor2
-        property color selectedBackgroundColor: baseColor3
-    }
-
-    statusBadge: QtObject {
-        property color foregroundColor: white
-        property color borderColor: baseColor4
-        property color hoverBorderColor: "#DDE3F3"
-    }
-
-    statusChatInfoButton: QtObject {
-        property color backgroundColor: white
-    }
-
-    statusMenu: QtObject {
-        property color backgroundColor: white
-        property color hoverBackgroundColor: baseColor2
-        property color separatorColor: root.separator
-    }
-
-    statusModal: QtObject {
-        property color backgroundColor: white
-    }
-
-    statusRoundedImage: QtObject {
-        property color backgroundColor: white
-    }
-
-    statusChatInput: QtObject {
-        property color secondaryBackgroundColor: "#E2E6E8"
-    }
-
-    statusSelect: QtObject {
-        property color menuItemBackgroundColor: white
-        property color menuItemHoverBackgroundColor: baseColor2
-    }
-
-    statusMessage: QtObject {
-        property color emojiReactionBackground: baseColor4
-        property color emojiReactionBackgroundHovered: primaryColor2
-        property color emojiReactionBorderHovered: primaryColor3
-    }
-
-    customisationColors: QtObject {
-        property color blue: "#2A4AF5"
-        property color purple: "#7140FD"
-        property color orange: "#FF7D46"
-        property color army: "#216266"
-        property color turquoise: "#2A799B"
-        property color sky: "#1992D7"
-        property color yellow: "#F6AF3C"
-        property color pink: "#F66F8F"
-        property color copper:"#CB6256"
-        property color camel: "#C78F67"
-        property color magenta: "#EC266C"
-        property color yinYang: "#09101C"
-    }
-
-    privacyColors: QtObject {
-        property color primary: "#BEBBF9"
-        property color secondary: "#D6D7F7"
-        property color tertiary: "#201C76"
-        property color tertiaryOpaque: getColor("#201C76", 0.3)
-    }
-}
diff --git a/ui/StatusQ/src/StatusQ/Core/Theme/Theme.qml b/ui/StatusQ/src/StatusQ/Core/Theme/Theme.qml
deleted file mode 100644
index eb6028c66a3..00000000000
--- a/ui/StatusQ/src/StatusQ/Core/Theme/Theme.qml
+++ /dev/null
@@ -1,297 +0,0 @@
-pragma Singleton
-
-import QtQuick
-
-import StatusQ.Core.Utils as SQUtils
-
-SQUtils.QObject {
-    enum FontSize {
-        FontSizeXS,
-        FontSizeS,
-        FontSizeM,
-        FontSizeL,
-        FontSizeXL,
-        FontSizeXXL
-    }
-
-    enum Style {
-        Light,
-        Dark,
-        System
-    }
-
-    enum PaddingFactor {
-        PaddingXXS,
-        PaddingXS,
-        PaddingS,
-        PaddingM,
-        PaddingL
-    }
-
-    property ThemePalette palette: Application.styleHints.colorScheme === Qt.ColorScheme.Dark ? statusQDarkTheme : statusQLightTheme
-
-    readonly property ThemePalette statusQLightTheme: StatusLightTheme {}
-    readonly property ThemePalette statusQDarkTheme: StatusDarkTheme {}
-
-    readonly property bool isDarkTheme: palette === statusQDarkTheme
-
-    readonly property string assetPath: Qt.resolvedUrl("../../../assets/")
-
-    function changeTheme(theme:int) {
-        switch (theme) {
-        case Theme.Style.Light:
-            Theme.palette = statusQLightTheme
-            break
-        case Theme.Style.Dark:
-            Theme.palette = statusQDarkTheme
-            break
-        case Theme.Style.System:
-            Theme.palette = Application.styleHints.colorScheme === Qt.ColorScheme.Dark ? statusQDarkTheme : statusQLightTheme
-            break
-        default:
-            console.warn('Unknown theme. Valid themes are "light" and "dark"')
-        }
-    }
-
-    function changeFontSize(fontSize:int) {
-        updateFontSize(fontSize)
-    }
-
-    function changePaddingFactor(paddingFactor:int) {
-        updatePaddingFactor(paddingFactor)
-    }
-
-    readonly property var baseFont: FontLoader {
-        source: assetPath + "fonts/Inter/Inter-Regular.otf"
-    }
-
-    readonly property var monoFont: FontLoader {
-        source: assetPath + "fonts/InterStatus/InterStatus-Regular.otf"
-    }
-
-    readonly property var codeFont: FontLoader {
-        source: assetPath + "fonts/RobotoMono/RobotoMono-Regular.ttf"
-    }
-
-    readonly property var _d: QtObject {
-        // specific font variants should not be accessed directly
-
-        // Inter font variants
-        property var baseFontThin: FontLoader {
-            source: assetPath + "fonts/Inter/Inter-Thin.otf"
-        }
-
-        property var baseFontExtraLight: FontLoader {
-            source: assetPath + "fonts/Inter/Inter-ExtraLight.otf"
-        }
-
-        property var baseFontLight: FontLoader {
-            source: assetPath + "fonts/Inter/Inter-Light.otf"
-        }
-
-        property var baseFontMedium: FontLoader {
-            source: assetPath + "fonts/Inter/Inter-Medium.otf"
-        }
-
-        property var baseFontBold: FontLoader {
-            source: assetPath + "fonts/Inter/Inter-Bold.otf"
-        }
-
-        property var baseFontExtraBold: FontLoader {
-            source: assetPath + "fonts/Inter/Inter-ExtraBold.otf"
-        }
-
-        property var baseFontBlack: FontLoader {
-            source: assetPath + "fonts/Inter/Inter-Black.otf"
-        }
-
-        // Inter Status font variants
-        property var monoFontThin: FontLoader {
-            source: assetPath + "fonts/InterStatus/InterStatus-Thin.otf"
-        }
-
-        property var monoFontExtraLight: FontLoader {
-            source: assetPath + "fonts/InterStatus/InterStatus-ExtraLight.otf"
-        }
-
-        property var monoFontLight: FontLoader {
-            source: assetPath + "fonts/InterStatus/InterStatus-Light.otf"
-        }
-
-        property var monoFontMedium: FontLoader {
-            source: assetPath + "fonts/InterStatus/InterStatus-Medium.otf"
-        }
-
-        property var monoFontBold: FontLoader {
-            source: assetPath + "fonts/InterStatus/InterStatus-Bold.otf"
-        }
-
-        property var monoFontExtraBold: FontLoader {
-            source: assetPath + "fonts/InterStatus/InterStatus-ExtraBold.otf"
-        }
-
-        property var monoFontBlack: FontLoader {
-            source: assetPath + "fonts/InterStatus/InterStatus-Black.otf"
-        }
-
-        // Roboto font variants
-        property var codeFontThin: FontLoader {
-            source: assetPath + "fonts/RobotoMono/RobotoMono-Thin.ttf"
-        }
-
-        property var codeFontExtraLight: FontLoader {
-            source: assetPath + "fonts/RobotoMono/RobotoMono-ExtraLight.ttf"
-        }
-
-        property var codeFontLight: FontLoader {
-            source: assetPath + "fonts/RobotoMono/RobotoMono-Light.ttf"
-        }
-
-        property var codeFontMedium: FontLoader {
-            source: assetPath + "fonts/RobotoMono/RobotoMono-Medium.ttf"
-        }
-
-        property var codeFontBold: FontLoader {
-            source: assetPath + "fonts/RobotoMono/RobotoMono-Bold.ttf"
-        }
-    }
-
-    readonly property int secondaryAdditionalTextSize: fontSize17
-    readonly property int primaryTextFontSize: fontSize15
-    readonly property int secondaryTextFontSize: fontSize14
-    readonly property int additionalTextSize: fontSize13
-    readonly property int tertiaryTextFontSize: fontSize12
-    readonly property int asideTextFontSize: fontSize10
-
-    readonly property int fontSize9: 9 + dynamicFontUnits
-    readonly property int fontSize10: 10 + dynamicFontUnits
-    readonly property int fontSize11: 11 + dynamicFontUnits
-    readonly property int fontSize12: 12 + dynamicFontUnits
-    readonly property int fontSize13: 13 + dynamicFontUnits
-    readonly property int fontSize14: 14 + dynamicFontUnits
-    readonly property int fontSize15: 15 + dynamicFontUnits
-    readonly property int fontSize16: 16 + dynamicFontUnits
-    readonly property int fontSize17: 17 + dynamicFontUnits
-    readonly property int fontSize18: 18 + dynamicFontUnits
-    readonly property int fontSize19: 19 + dynamicFontUnits
-    readonly property int fontSize20: 20 + dynamicFontUnits
-    readonly property int fontSize21: 21 + dynamicFontUnits
-    readonly property int fontSize22: 22 + dynamicFontUnits
-    readonly property int fontSize23: 23 + dynamicFontUnits
-    readonly property int fontSize24: 24 + dynamicFontUnits
-    readonly property int fontSize25: 25 + dynamicFontUnits
-    readonly property int fontSize26: 26 + dynamicFontUnits
-    readonly property int fontSize27: 27 + dynamicFontUnits
-    readonly property int fontSize28: 28 + dynamicFontUnits
-    readonly property int fontSize29: 29 + dynamicFontUnits
-    readonly property int fontSize30: 30 + dynamicFontUnits
-    readonly property int fontSize34: 34 + dynamicFontUnits
-    readonly property int fontSize38: 38 + dynamicFontUnits
-    readonly property int fontSize40: 40 + dynamicFontUnits
-
-
-    // Responsive properties used for responsive components (e.g. containers)
-    property int xlPadding: defaultXlPadding * dynamicPaddingFactorUnit
-    property int bigPadding: defaultBigPadding * dynamicPaddingFactorUnit
-    property int padding: defaultPadding * dynamicPaddingFactorUnit
-    property int halfPadding: defaultHalfPadding * dynamicPaddingFactorUnit
-    property int smallPadding: defaultSmallPadding * dynamicPaddingFactorUnit
-    property int radius: defaultRadius
-
-    // Constant properties used for non-responsive components (e.g. buttons)
-    readonly property int defaultXlPadding: defaultPadding * 2
-    readonly property int defaultBigPadding: defaultPadding * 1.5
-    readonly property int defaultPadding: 16
-    readonly property int defaultHalfPadding: defaultPadding / 2
-    readonly property int defaultSmallPadding: defaultPadding * 0.625
-    readonly property int defaultRadius: defaultHalfPadding
-
-    readonly property var portraitBreakpoint: Qt.size(1200, 680)
-
-    readonly property real disabledOpacity: 0.3
-    readonly property real pressedOpacity: 0.7
-
-    property int dynamicFontUnits: 0
-    property real dynamicPaddingFactorUnit: 1.0
-
-    readonly property int currentFontSize: d.fontSize
-    readonly property real currentPaddingFactor: d.paddingFactor
-
-    function updateFontSize(fontSize:int) {
-        d.fontSize = fontSize
-        switch (fontSize) {
-            case Theme.FontSizeXS:
-                dynamicFontUnits = -2
-                break;
-
-            case Theme.FontSizeS:
-                dynamicFontUnits = -1
-                break;
-
-            case Theme.FontSizeM:
-                dynamicFontUnits = 0
-                break;
-
-            case Theme.FontSizeL:
-                dynamicFontUnits = 1
-                break;
-
-            case Theme.FontSizeXL:
-                dynamicFontUnits = 2
-                break;
-
-            case Theme.FontSizeXXL:
-                dynamicFontUnits = 3
-                break;
-        }
-    }
-
-    function updatePaddingFactor(paddingFactor:int) {
-        d.paddingFactor = paddingFactor
-        switch (paddingFactor) {
-        case Theme.PaddingXXS:
-            dynamicPaddingFactorUnit = 0.4
-            break;
-        case Theme.PaddingXS:
-            dynamicPaddingFactorUnit = 0.6
-            break;
-
-        case Theme.PaddingS:
-            dynamicPaddingFactorUnit = 0.8
-            break;
-
-        case Theme.PaddingM:
-            dynamicPaddingFactorUnit = 1
-            break;
-
-        case Theme.PaddingL:
-            dynamicPaddingFactorUnit = 1.2
-            break;
-        }
-    }
-
-    enum AnimationDuration {
-        Fast = 100,
-        Default = 250, // https://doc.qt.io/qt-5/qml-qtquick-propertyanimation.html#duration-prop
-        Slow = 400
-    }
-
-    // Style compat
-    function png(name) {
-        return assetPath + "png/" + name + ".png"
-    }
-    function svg(name) {
-        return assetPath + "img/icons/" + name + ".svg"
-    }
-    function emoji(name) {
-        return assetPath + "twemoji/svg/" + name + ".svg"
-    }
-
-
-    QtObject {
-        id: d
-
-        property int fontSize: Theme.FontSizeM
-        property int paddingFactor: Theme.PaddingM
-    }
-}
diff --git a/ui/StatusQ/src/StatusQ/Core/Theme/ThemePalette.qml b/ui/StatusQ/src/StatusQ/Core/Theme/ThemePalette.qml
deleted file mode 100644
index bb0da8407a9..00000000000
--- a/ui/StatusQ/src/StatusQ/Core/Theme/ThemePalette.qml
+++ /dev/null
@@ -1,261 +0,0 @@
-import QtQuick
-
-QtObject {
-    id: theme
-
-    property string name
-
-    property color black: Qt.rgba(0, 0, 0)
-    property color white: Qt.rgba(1, 1, 1)
-    property color transparent: "#00000000"
-
-    property color green: getColor('green')
-
-    property color blue: getColor('blue')
-    property color darkBlue: getColor('blue2')
-
-    property color dropShadow
-    property color dropShadow2
-    property color dropShadow3 // suitable for MultiEffect
-    property color backdropColor: getColor('black', 0.4)
-
-    property color baseColor1
-    property color baseColor2
-    property color baseColor3
-    property color baseColor4
-    property color baseColor5
-
-    property color primaryColor1
-    property color primaryColor2
-    property color primaryColor3
-
-    property color dangerColor1
-    property color dangerColor2
-    property color dangerColor3
-
-    property color warningColor1
-    property color warningColor2
-    property color warningColor3
-
-    property color successColor1
-    property color successColor2
-    property color successColor3
-
-    property color mentionColor1
-    property color mentionColor2
-    property color mentionColor3
-    property color mentionColor4
-
-    property color pinColor1
-    property color pinColor2
-    property color pinColor3
-
-    property color directColor1
-    property color directColor2
-    property color directColor3
-    property color directColor4
-    property color directColor5
-    property color directColor6
-    property color directColor7
-    property color directColor8
-    property color directColor9
-
-    property color indirectColor1
-    property color indirectColor2
-    property color indirectColor3
-    property color indirectColor4
-
-    property color miscColor1
-    property color miscColor2
-    property color miscColor3
-    property color miscColor4
-    property color miscColor5
-    property color miscColor6
-    property color miscColor7
-    property color miscColor8
-    property color miscColor9
-    property color miscColor10
-    property color miscColor11
-    property color miscColor12
-
-    property color neutral95
-
-    property color statusFloatingButtonHighlight
-
-    property color statusLoadingHighlight
-    property color statusLoadingHighlight2
-
-    property color messageHighlightColor
-
-    property color desktopBlue10
-
-    property var userCustomizationColors: []
-
-    property color blockProgressBarColor
-
-    // Style compat
-    property color background
-    property color backgroundHover: baseColor2
-    property color border: baseColor2
-    property color textColor: directColor1
-    property color secondaryText: baseColor1
-    property color separator
-    property color darkGrey
-    property color secondaryBackground: primaryColor2
-    property color secondaryMenuBackground
-
-    property QtObject statusAppLayout: QtObject {
-        property color backgroundColor
-        property color rightPanelBackgroundColor
-    }
-
-    property QtObject statusAppNavBar: QtObject {
-        property color backgroundColor
-    }
-
-    property QtObject statusToastMessage: QtObject {
-        property color backgroundColor
-    }
-
-    property QtObject statusListItem: QtObject {
-        property color backgroundColor
-        property color secondaryHoverBackgroundColor
-        property color highlightColor
-    }
-
-    property QtObject statusChatListItem: QtObject {
-        property color hoverBackgroundColor
-        property color selectedBackgroundColor
-    }
-
-    property QtObject statusChatListCategoryItem: QtObject {
-        property color buttonHoverBackgroundColor
-    }
-
-    property QtObject statusNavigationListItem: QtObject {
-        property color hoverBackgroundColor
-        property color selectedBackgroundColor
-    }
-
-    property QtObject statusBadge: QtObject {
-        property color foregroundColor
-        property color borderColor
-        property color hoverBorderColor
-    }
-
-    property QtObject statusChatInfoButton: QtObject {
-        property color backgroundColor
-        property color hoverBackgroundColor
-    }
-
-    property QtObject statusMenu: QtObject {
-        property color backgroundColor
-        property color hoverBackgroundColor
-        property color separatorColor
-    }
-
-    property QtObject statusModal: QtObject {
-        property color backgroundColor
-    }
-
-    property QtObject statusRoundedImage: QtObject {
-        property color backgroundColor
-    }
-
-    property QtObject statusChatInput: QtObject {
-        property color secondaryBackgroundColor
-    }
-
-    readonly property QtObject statusSwitchTab: QtObject {
-        property color buttonBackgroundColor: primaryColor1
-        property color barBackgroundColor: primaryColor3
-        property color selectedTextColor: indirectColor1
-        property color textColor: primaryColor1
-    }
-
-    property QtObject statusSelect: QtObject {
-        property color menuItemBackgroundColor
-        property color menuItemHoverBackgroundColor
-    }
-
-    property QtObject statusMessage: QtObject {
-        property color emojiReactionBackground
-        property color emojiReactionBorderHovered
-        property color emojiReactionBackgroundHovered
-    }
-
-    property QtObject customisationColors: QtObject {
-        property color blue
-        property color purple
-        property color orange
-        property color army
-        property color turquoise
-        property color sky
-        property color yellow
-        property color pink
-        property color copper
-        property color camel
-        property color magenta
-        property color yinYang
-    }
-
-    readonly property var customisationColorsArray: [
-        customisationColors.blue,
-        customisationColors.purple,
-        customisationColors.orange,
-        customisationColors.army,
-        customisationColors.turquoise,
-        customisationColors.sky,
-        customisationColors.yellow,
-        customisationColors.pink,
-        customisationColors.copper,
-        customisationColors.camel,
-        customisationColors.magenta,
-        customisationColors.yinYang
-    ]
-
-    readonly property var communityColorsArray: [
-        customisationColors.blue,
-        customisationColors.yellow,
-        customisationColors.magenta,
-        customisationColors.purple,
-        customisationColors.army,
-        customisationColors.sky,
-        customisationColors.orange,
-        customisationColors.camel
-    ]
-
-    property QtObject privacyModeColors: QtObject {
-        readonly property color navBarColor: customisationColors.purple
-        readonly property color navButtonColor: getColor('white', 0.4)
-        readonly property color navButtonHighlightedColor: getColor('white')
-    }
-
-    property QtObject privacyColors: QtObject {
-        property color primary
-        property color secondary
-        property color tertiary
-        property color tertiaryOpaque
-    }
-
-    function alphaColor(color, alpha) {
-        let actualColor = Qt.darker(color, 1)
-        actualColor.a = alpha
-        return actualColor
-    }
-
-    function hoverColor(normalColor) {
-        return theme.name === "light" ? Qt.darker(normalColor, 1.2) : Qt.lighter(normalColor, 1.2)
-    }
-
-    function getColor(name, alpha) {
-        if(StatusColors.colors[name])
-            // It means name is just the key to find inside the specific `StatusColors` object
-            return !!alpha ? alphaColor(StatusColors.colors[name], alpha)
-                           : StatusColors.colors[name]
-        else
-            // It means name is directly the color itself
-            return !!alpha ? alphaColor(name, alpha)
-                           : name
-    }
-}
diff --git a/ui/StatusQ/src/StatusQ/Core/Theme/ThemeUtils.qml b/ui/StatusQ/src/StatusQ/Core/Theme/ThemeUtils.qml
new file mode 100644
index 00000000000..bcb8d91b8c3
--- /dev/null
+++ b/ui/StatusQ/src/StatusQ/Core/Theme/ThemeUtils.qml
@@ -0,0 +1,102 @@
+pragma Singleton
+
+import QtQml
+import QtQuick
+import QtQuick.Window
+
+import StatusQ.Core.Theme
+
+QtObject {
+    enum Style {
+        Light,
+        Dark,
+        System
+    }
+
+    enum FontSize {
+        FontSizeXS,
+        FontSizeS,
+        FontSizeM,
+        FontSizeL,
+        FontSizeXL,
+        FontSizeXXL
+    }
+
+    enum PaddingFactor {
+        PaddingXXS,
+        PaddingXS,
+        PaddingS,
+        PaddingM,
+        PaddingL
+    }
+
+    enum AnimationDuration {
+        Fast = 100,
+        Default = 250, // https://doc.qt.io/qt-5/qml-qtquick-propertyanimation.html#duration-prop
+        Slow = 400
+    }
+
+    readonly property size portraitBreakpoint: Qt.size(1200, 680)
+    readonly property real disabledOpacity: 0.3
+    readonly property real pressedOpacity: 0.7
+
+    function changeTheme(target: QtObject, theme:int) {
+        switch (theme) {
+        case ThemeUtils.Style.Light:
+            target.Theme.style = Theme.Style.Light
+            break
+        case ThemeUtils.Style.Dark:
+            target.Theme.style = Theme.Style.Dark
+            break
+        case ThemeUtils.Style.System:
+            target.Theme.style = Qt.binding(() => Application.styleHints.colorScheme === Qt.ColorScheme.Dark
+                                            ? Theme.Style.Dark : Theme.Style.Light)
+            break
+        default:
+            console.warn('Unknown theme. Valid themes are "light" and "dark"')
+        }
+    }
+
+    function setFontSize(target: QtObject, fontSize: int) {
+        switch (fontSize) {
+            case ThemeUtils.FontSizeXS:
+                target.Theme.fontSizeOffset = -2
+                break
+            case ThemeUtils.FontSizeS:
+                target.Theme.fontSizeOffset = -1
+                break
+            case ThemeUtils.FontSizeM:
+                target.Theme.fontSizeOffset = 0
+                break
+            case ThemeUtils.FontSizeL:
+                target.Theme.fontSizeOffset = 1
+                break
+            case ThemeUtils.FontSizeXL:
+                target.Theme.fontSizeOffset = 2
+                break
+            case ThemeUtils.FontSizeXXL:
+                target.Theme.fontSizeOffset = 3
+                break
+        }
+    }
+
+    function setPaddingFactor(target: QtObject, paddingFactor: int) {
+        switch (paddingFactor) {
+        case ThemeUtils.PaddingXXS:
+            target.Theme.padding = target.Theme.defaultPadding * 0.4
+            break
+        case ThemeUtils.PaddingXS:
+            target.Theme.padding = target.Theme.defaultPadding * 0.6
+            break
+        case ThemeUtils.PaddingS:
+            target.Theme.padding = target.Theme.defaultPadding * 0.8
+            break
+        case ThemeUtils.PaddingM:
+            target.Theme.padding = target.Theme.defaultPadding
+            break
+        case ThemeUtils.PaddingL:
+            target.Theme.padding = target.Theme.defaultPadding * 1.2
+            break
+        }
+    }
+}
diff --git a/ui/StatusQ/src/StatusQ/Core/Theme/qmldir b/ui/StatusQ/src/StatusQ/Core/Theme/qmldir
index 0fab64e2866..1f4b9b7cde5 100644
--- a/ui/StatusQ/src/StatusQ/Core/Theme/qmldir
+++ b/ui/StatusQ/src/StatusQ/Core/Theme/qmldir
@@ -1,8 +1,3 @@
-module StatusQ.Core.Theme
-
-singleton StatusColors 0.1 StatusColors.qml
-ThemePalette 0.1 ThemePalette.qml
-StatusLightTheme 0.1 StatusLightTheme.qml
-StatusDarkTheme 0.1 StatusDarkTheme.qml
-singleton Theme 0.1 Theme.qml
-
+singleton Assets 0.1 Assets.qml
+singleton Fonts 0.1 Fonts.qml
+singleton ThemeUtils 0.1 ThemeUtils.qml
diff --git a/ui/StatusQ/src/StatusQ/Core/Utils/Utils.qml b/ui/StatusQ/src/StatusQ/Core/Utils/Utils.qml
index 474246934f8..b1b14361fa9 100644
--- a/ui/StatusQ/src/StatusQ/Core/Utils/Utils.qml
+++ b/ui/StatusQ/src/StatusQ/Core/Utils/Utils.qml
@@ -196,27 +196,27 @@ QtObject {
         return XSS.filterXSS(inputText)
     }
 
-    function getMessageWithStyle(msg, hoveredLink = "", ethLinkDisabled = false) {
-        const ethLinkColor = ethLinkDisabled ? Theme.palette.directColor1 : Theme.palette.primaryColor1
-        const ethLinkHoverColor = ethLinkDisabled ? Theme.palette.baseColor1 : Theme.palette.primaryColor1
-        const ethLinkHoverBackgroundColor = ethLinkDisabled ? Theme.palette.directColor8 : Theme.palette.primaryColor3
+    function getMessageWithStyle(palette, msg, hoveredLink = "", ethLinkDisabled = false) {
+        const ethLinkColor = ethLinkDisabled ? palette.directColor1 : palette.primaryColor1
+        const ethLinkHoverColor = ethLinkDisabled ? palette.baseColor1 : palette.primaryColor1
+        const ethLinkHoverBackgroundColor = ethLinkDisabled ? palette.directColor8 : palette.primaryColor3
         return `<style type="text/css">` +
                     `img, a, del, code, blockquote { margin: 0; padding: 0; }` +
                     `code {` +
-                        `font-family: ${Theme.codeFont.name};` +
+                        `font-family: ${Fonts.codeFont.family};` +
                         `font-weight: 400;` +
                         `font-size: 14;` +
                         `padding: 2px 4px;` +
                         `border-radius: 4px;` +
-                        `background-color: ${Theme.palette.baseColor2};` +
-                        `color: ${Theme.palette.directColor1};` +
+                        `background-color: ${palette.baseColor2};` +
+                        `color: ${palette.directColor1};` +
                         `white-space: pre;` +
                     `}` +
                     `p {` +
                         `line-height: 22px;` +
                     `}` +
                     `a {` +
-                        `color: ${Theme.palette.primaryColor1};` +
+                        `color: ${palette.primaryColor1};` +
                     `}` +
                     `a.eth-link {` +
                         `color: ${ethLinkColor};` +
@@ -228,13 +228,13 @@ QtObject {
                             `background-color: ${ethLinkHoverBackgroundColor};` +
                         `}` : ``) +
                     `a.mention {` +
-                        `color: ${Theme.palette.mentionColor1};` +
-                        `background-color: ${Theme.palette.mentionColor4};` +
+                        `color: ${palette.mentionColor1};` +
+                        `background-color: ${palette.mentionColor4};` +
                         `text-decoration: none;` +
                         `padding: 0px 2px;` +
                     `}` +
-                    (hoveredLink !== "" ? `a.mention[href="${hoveredLink}"] { background-color: ${Theme.palette.mentionColor2}; }` : ``) +
-                    (hoveredLink !== "" ? `a[href="${hoveredLink}"] { background-color: ${Theme.palette.primaryColor3}; }` : ``) +
+                    (hoveredLink !== "" ? `a.mention[href="${hoveredLink}"] { background-color: ${palette.mentionColor2}; }` : ``) +
+                    (hoveredLink !== "" ? `a[href="${hoveredLink}"] { background-color: ${palette.primaryColor3}; }` : ``) +
                     `del {` +
                         `text-decoration: line-through;` +
                     `}` +
@@ -242,7 +242,7 @@ QtObject {
                         `vertical-align: bottom;` +
                     `}` +
                     `span.isEdited {` +
-                        `color: ${Theme.palette.baseColor1};` +
+                        `color: ${palette.baseColor1};` +
                         `margin-left: 5px` +
                     `}` +
                 `</style>` +
@@ -292,13 +292,6 @@ QtObject {
         return isMobileDevice ? "mobile" : "desktop"
     }
 
-    function getYinYangColor(color) {
-        if (color.toString().toUpperCase() === Theme.palette.customisationColors.yinYang.toString().toUpperCase()) {
-            return Theme.palette.name === "light" ? "#FFFFFF" : "#09101C"
-        }
-        return ""
-    }
-
     function stripHttpsAndwwwFromUrl(text) {
         return text.replace(/http(s)?(:)?(\/\/)?|(\/\/)?(www\.)?(\/)/gim, '')
     }
diff --git a/ui/StatusQ/src/StatusQ/Layout/StatusSectionLayout.qml b/ui/StatusQ/src/StatusQ/Layout/StatusSectionLayout.qml
index 3ae966e0063..8ff5751abc1 100644
--- a/ui/StatusQ/src/StatusQ/Layout/StatusSectionLayout.qml
+++ b/ui/StatusQ/src/StatusQ/Layout/StatusSectionLayout.qml
@@ -43,8 +43,8 @@ import StatusQ.Core.Theme
 
 LayoutChooser {
     id: root
-    implicitWidth: Theme.portraitBreakpoint.width
-    implicitHeight: Theme.portraitBreakpoint.height
+    implicitWidth: ThemeUtils.portraitBreakpoint.width
+    implicitHeight: ThemeUtils.portraitBreakpoint.height
 
     enum Panels {
         LeftPanel,
diff --git a/ui/StatusQ/src/StatusQ/Popups/Dialog/StatusDialog.qml b/ui/StatusQ/src/StatusQ/Popups/Dialog/StatusDialog.qml
index 645dea1d475..833e53aa8f6 100644
--- a/ui/StatusQ/src/StatusQ/Popups/Dialog/StatusDialog.qml
+++ b/ui/StatusQ/src/StatusQ/Popups/Dialog/StatusDialog.qml
@@ -40,7 +40,7 @@ Dialog {
     property string okButtonText: qsTr("OK")
 
     readonly property bool bottomSheet: d.windowHeight > d.windowWidth
-                                        && d.windowWidth <= Theme.portraitBreakpoint.width // The max width of a phone in portrait mode
+                                        && d.windowWidth <= ThemeUtils.portraitBreakpoint.width // The max width of a phone in portrait mode
 
     readonly property real desiredY: root.bottomSheet ? d.windowHeight - root.height
                                                       : (root.Overlay.overlay.height - root.height) / 2
@@ -81,12 +81,12 @@ Dialog {
         id: exitTransition
         NumberAnimation {
             property: "opacity"; from: 1; to: 0
-            duration: Theme.AnimationDuration.Fast
+            duration: ThemeUtils.AnimationDuration.Fast
             easing.type: Easing.OutQuint
         }
         NumberAnimation {
             property: "y"; from: root.y; to: root.parent.height
-            duration: Theme.AnimationDuration.Fast
+            duration: ThemeUtils.AnimationDuration.Fast
             easing.type: Easing.OutCubic
         }
     }
@@ -98,13 +98,13 @@ Dialog {
                 property: "opacity"
                 from: 0.0
                 to: 1.0
-                duration: Theme.AnimationDuration.Fast
+                duration: ThemeUtils.AnimationDuration.Fast
             }
             NumberAnimation {
                 property: "y"
                 from: root.parent.height
                 to: root.desiredY
-                duration: Theme.AnimationDuration.Fast
+                duration: ThemeUtils.AnimationDuration.Fast
                 easing.type: Easing.OutCubic
             }
         }
diff --git a/ui/StatusQ/src/StatusQ/Popups/StatusSearchPopup.qml b/ui/StatusQ/src/StatusQ/Popups/StatusSearchPopup.qml
index e1dbe0d07bb..96fcc9bb6d0 100644
--- a/ui/StatusQ/src/StatusQ/Popups/StatusSearchPopup.qml
+++ b/ui/StatusQ/src/StatusQ/Popups/StatusSearchPopup.qml
@@ -99,7 +99,7 @@ StatusModal {
                     anchors.right: parent.right
                     anchors.verticalCenter: parent.verticalCenter
                     focus: !Utils.isMobile
-                    font.pixelSize: Theme.fontSize28
+                    font.pixelSize: Theme.fontSize(28)
                     leftPadding: 5
                     topPadding: 5 //smaller padding to handle bigger font
                     bottomPadding: 5
@@ -107,7 +107,7 @@ StatusModal {
                     input.showBackground: false
                     input.placeholder {
                         text: qsTr("Search")
-                        font.pixelSize: Theme.fontSize28
+                        font.pixelSize: Theme.fontSize(28)
                         color: Theme.palette.directColor9
                     }
 
diff --git a/ui/StatusQ/src/StatusQ/Popups/statusModal/StatusImageWithTitle.qml b/ui/StatusQ/src/StatusQ/Popups/statusModal/StatusImageWithTitle.qml
index efa4e3deba9..bc6a67b4eea 100644
--- a/ui/StatusQ/src/StatusQ/Popups/statusModal/StatusImageWithTitle.qml
+++ b/ui/StatusQ/src/StatusQ/Popups/statusModal/StatusImageWithTitle.qml
@@ -128,7 +128,7 @@ Row {
             StatusBaseText {
                 id: headerTitle
                 objectName: "headerTitle"
-                font.family: Theme.baseFont.name
+                font.family: Fonts.baseFont.family
                 font.pixelSize: Theme.secondaryAdditionalTextSize
                 font.bold: true
                 elide: statusImageWithTitle.titleElide
@@ -155,7 +155,7 @@ Row {
         StatusBaseText {
             id: headerSubTitle
             objectName: "headerSubTitle"
-            font.family: Theme.baseFont.name
+            font.family: Fonts.baseFont.family
             font.pixelSize: Theme.primaryTextFontSize
             color:Theme.palette.baseColor1
             width: parent.width
diff --git a/ui/StatusQ/src/statuscolors.cpp b/ui/StatusQ/src/statuscolors.cpp
new file mode 100644
index 00000000000..17b917ca232
--- /dev/null
+++ b/ui/StatusQ/src/statuscolors.cpp
@@ -0,0 +1,128 @@
+#include "StatusQ/statuscolors.h"
+
+#include <QRegularExpression>
+#include <QtQml/qqml.h>
+
+using namespace Qt::StringLiterals;
+
+namespace {
+
+const QVariantMap s_colors = {
+    { "black"_L1,              QColor(0x00, 0x00, 0x00) },
+    { "white"_L1,              QColor(0xFF, 0xFF, 0xFF) },
+
+    { "blue"_L1,               QColor(0x43, 0x60, 0xDF) },
+    { "blue2"_L1,              QColor(0x29, 0x46, 0xC4) },
+    { "blue3"_L1,              QColor(0x88, 0xB0, 0xFF) },
+    { "blue4"_L1,              QColor(0x86, 0x9E, 0xFF) },
+    { "blue5"_L1,              QColor(0xAA, 0xC6, 0xFF) },
+    { "blue6"_L1,              QColor(0xEC, 0xEF, 0xFC) },
+    { "blue7"_L1,              QColor(0x09, 0x10, 0x1C) },
+    { "blue8"_L1,              QColor(0x6B, 0x6F, 0x76) },
+
+    { "brown"_L1,              QColor(0x8B, 0x31, 0x31) },
+    { "brown2"_L1,             QColor(0x9B, 0x83, 0x2F) },
+    { "brown3"_L1,             QColor(0xAD, 0x43, 0x43) },
+
+    { "cyan"_L1,               QColor(0x51, 0xD0, 0xF0) },
+
+    { "graphite"_L1,           QColor(0x21, 0x21, 0x21) },
+    { "graphite2"_L1,          QColor(0x25, 0x25, 0x25) },
+    { "graphite3"_L1,          QColor(0x2C, 0x2C, 0x2C) },
+    { "graphite4"_L1,          QColor(0x37, 0x37, 0x37) },
+    { "graphite5"_L1,          QColor(0x90, 0x90, 0x90) },
+
+    { "green"_L1,              QColor(0x4E, 0xBC, 0x60) },
+    { "green2"_L1,             QColor(0x7C, 0xDA, 0x00) },
+    { "green3"_L1,             QColor(0x60, 0xC3, 0x70) },
+    { "green4"_L1,             QColor(0x93, 0xDB, 0x33) },
+    { "green5"_L1,             QColor(0x9E, 0xA8, 0x5D) },
+    { "green6"_L1,             QColor(0xAF, 0xB5, 0x51) },
+
+    { "grey"_L1,               QColor(0xF0, 0xF2, 0xF5) },
+    { "grey2"_L1,              QColor(0xF6, 0xF8, 0xFA) },
+    { "grey3"_L1,              QColor(0xE9, 0xED, 0xF1) },
+    { "grey4"_L1,              QColor(0xEE, 0xF2, 0xF5) },
+    { "grey5"_L1,              QColor(0x93, 0x9B, 0xA1) },
+
+    { "moss"_L1,               QColor(0x26, 0xA6, 0x9A) },
+    { "moss2"_L1,              QColor(0x10, 0xA8, 0x8E) },
+
+    { "orange"_L1,             QColor(0xFE, 0x8F, 0x59) },
+    { "orange2"_L1,            QColor(0xFF, 0x9F, 0x0F) },
+    { "orange3"_L1,            QColor(0xFF, 0xA6, 0x7B) },
+    { "orange4"_L1,            QColor(0xFE, 0x8F, 0x59) },
+
+    { "warning_orange"_L1,     QColor(0xF6, 0x79, 0x3C) },
+
+    { "purple"_L1,             QColor(0x88, 0x7A, 0xF9) },
+
+    { "red"_L1,                QColor(0xFF, 0x2D, 0x55) },
+    { "red2"_L1,               QColor(0xFA, 0x65, 0x65) },
+    { "red3"_L1,               QColor(0xFF, 0x5C, 0x7B) },
+
+    { "turquoise"_L1,          QColor(0x0D, 0xA4, 0xC9) },
+    { "turquoise2"_L1,         QColor(0x07, 0xBC, 0xE9) },
+    { "turquoise3"_L1,         QColor(0x7B, 0xE5, 0xFF) },
+    { "turquoise4"_L1,         QColor(0x0D, 0xA4, 0xC9) },
+
+    { "violet"_L1,             QColor(0xD3, 0x7E, 0xF4) },
+
+    { "yellow"_L1,             QColor(0xFF, 0xCA, 0x0F) },
+    { "yellow2"_L1,            QColor(0xEA, 0xD2, 0x7B) },
+
+    { "blueHijab"_L1,          QColor(0xCD, 0xF2, 0xFB) },
+
+    { "lightPattensBlue"_L1,   QColor(0xD7, 0xDE, 0xE4) },
+
+    { "blackHovered"_L1,       QColor(0x1D, 0x23, 0x2E) },
+    { "blueHovered"_L1,        QColor(0x36, 0x4D, 0xB2) },
+    { "purpleHovered"_L1,      QColor(0x6D, 0x62, 0xC7) },
+    { "cyanHovered"_L1,        QColor(0x41, 0xA6, 0xC0) },
+    { "violetHovered"_L1,      QColor(0xA9, 0x65, 0xC3) },
+    { "redHovered"_L1,         QColor(0xC8, 0x51, 0x51) },
+    { "yellowHovered"_L1,      QColor(0xCC, 0xA2, 0x0C) },
+    { "greenHovered"_L1,       QColor(0x63, 0xAE, 0x00) },
+    { "mossHovered"_L1,        QColor(0x1E, 0x85, 0x7B) },
+    { "brownHovered"_L1,       QColor(0x6F, 0x27, 0x27) },
+    { "brown2Hovered"_L1,      QColor(0x7C, 0x69, 0x26) },
+
+    { "lightDesktopBlue10"_L1, QColor(0xEC, 0xEF, 0xFB) },
+    { "darkDesktopBlue10"_L1,  QColor(0x27, 0x32, 0x51) }
+};
+
+} // unnamed namespace
+
+StatusColors::StatusColors(QObject* parent)
+    : QObject(parent)
+{
+}
+
+const QVariantMap& StatusColors::colors()
+{
+    return s_colors;
+}
+
+QColor StatusColors::getColor(const QString& name, qreal alpha)
+{
+    QColor base;
+
+    if (s_colors.contains(name)) {
+        base = s_colors.value(name).value<QColor>();
+    } else {
+        base = QColor::fromString(name);
+    }
+
+    if (alpha > 0.0 && alpha <= 1.0)
+        base.setAlphaF(alpha);
+
+    return base;
+}
+
+QColor StatusColors::alphaColor(const QColor& color, qreal alpha)
+{
+    QColor c = color;
+    if (alpha > 0.0 && alpha <= 1.0)
+        c.setAlphaF(alpha);
+    return c;
+}
diff --git a/ui/StatusQ/src/statusq.qrc b/ui/StatusQ/src/statusq.qrc
index ce91aa4c260..dcc251e40ae 100644
--- a/ui/StatusQ/src/statusq.qrc
+++ b/ui/StatusQ/src/statusq.qrc
@@ -186,11 +186,9 @@
         <file>StatusQ/Core/StatusScrollView.qml</file>
         <file>StatusQ/Core/StatusSharedUpdateTimer.qml</file>
         <file>StatusQ/Core/StatusTooltipSettings.qml</file>
-        <file>StatusQ/Core/Theme/StatusColors.qml</file>
-        <file>StatusQ/Core/Theme/StatusDarkTheme.qml</file>
-        <file>StatusQ/Core/Theme/StatusLightTheme.qml</file>
-        <file>StatusQ/Core/Theme/Theme.qml</file>
-        <file>StatusQ/Core/Theme/ThemePalette.qml</file>
+        <file>StatusQ/Core/Theme/Assets.qml</file>
+        <file>StatusQ/Core/Theme/Fonts.qml</file>
+        <file>StatusQ/Core/Theme/ThemeUtils.qml</file>
         <file>StatusQ/Core/Theme/qmldir</file>
         <file>StatusQ/Core/Utils/AmountsArithmetic.qml</file>
         <file>StatusQ/Core/Utils/ClippingWrapper.qml</file>
diff --git a/ui/StatusQ/src/theme.cpp b/ui/StatusQ/src/theme.cpp
new file mode 100644
index 00000000000..d7d2724b5cb
--- /dev/null
+++ b/ui/StatusQ/src/theme.cpp
@@ -0,0 +1,341 @@
+#include "StatusQ/theme.h"
+
+#include <QQmlApplicationEngine>
+#include <QQmlEngine>
+
+namespace {
+
+constexpr qreal s_defaultPadding = 16;
+constexpr qreal s_xlPaddingFactor = 2.0;
+constexpr qreal s_bigPaddingFactor = 1.5;
+constexpr qreal s_halfPaddingFactor = 0.5;
+constexpr qreal s_smallPaddingFactor = 0.625;
+
+constexpr int s_secondaryAdditionalTextBaseSize = 17;
+constexpr int s_primaryTextFontBaseSize = 15;
+constexpr int s_secondaryTextFontBaseSize = 14;
+constexpr int s_additionalTextBaseSize = 13;
+constexpr int s_tertiaryTextFontBaseSize = 12;
+constexpr int s_asideTextFontBaseSize = 10;
+
+const std::unique_ptr<ThemePalette> s_paletteDark = createDarkThemePalette();
+const std::unique_ptr<ThemePalette> s_paletteLight = createLightThemePalette();
+
+} // unnamed namespace
+
+Theme::Theme(QObject *parent)
+    : QQuickAttachedPropertyPropagator(parent), m_padding(s_defaultPadding)
+{
+    initialize();
+}
+
+qreal Theme::defaultPadding() const {
+    return s_defaultPadding;
+}
+
+qreal Theme::defaultXlPadding() const {
+    return s_defaultPadding * s_xlPaddingFactor;
+}
+
+qreal Theme::defaultBigPadding() const {
+    return s_defaultPadding * s_bigPaddingFactor;
+}
+
+qreal Theme::defaultHalfPadding() const {
+    return s_defaultPadding * s_halfPaddingFactor;
+}
+
+qreal Theme::defaultSmallPadding() const {
+    return s_defaultPadding * s_smallPaddingFactor;
+}
+
+qreal Theme::padding() const {
+    return m_padding;
+}
+
+qreal Theme::xlPadding() const {
+    return m_padding * s_xlPaddingFactor;
+}
+
+qreal Theme::bigPadding() const {
+    return m_padding * s_bigPaddingFactor;
+}
+
+qreal Theme::halfPadding() const {
+    return m_padding * s_halfPaddingFactor;
+}
+
+qreal Theme::smallPadding() const {
+    return m_padding * s_smallPaddingFactor;
+}
+
+qreal Theme::radius() const {
+    return s_defaultPadding * s_halfPaddingFactor;
+}
+
+void Theme::setPadding(qreal padding)
+{
+    auto explicitPaddingOld = m_explicitPadding;
+    m_explicitPadding = true;
+
+    if (m_padding == padding) {
+        if (!explicitPaddingOld)
+            emit explicitPaddingChanged();
+
+        return;
+    }
+
+    m_padding = padding;
+    propagatePadding();
+    emit paddingChanged();
+
+    if (!explicitPaddingOld)
+        emit explicitPaddingChanged();
+}
+
+void Theme::resetPadding()
+{
+    if (!m_explicitPadding)
+        return;
+
+    m_explicitPadding = false;
+    auto theme = qobject_cast<Theme*>(attachedParent());
+
+    inheritPadding(theme ? theme->padding() : 0);
+
+    emit explicitPaddingChanged();
+}
+
+bool Theme::explicitPadding() const {
+    return m_explicitPadding;
+}
+
+Theme::Style Theme::style() const
+{
+    return m_style;
+}
+
+const ThemePalette* Theme::palette() const
+{
+    return m_style == Style::Light ? s_paletteLight.get()
+                                   : s_paletteDark.get();
+}
+
+void Theme::setStyle(Style style)
+{
+    auto explicitStyleOld = m_explicitStyle;
+    m_explicitStyle = true;
+
+    if (m_style == style) {
+        if (!explicitStyleOld)
+            emit explicitStyleChanged();
+
+        return;
+    }
+
+    m_style = style;
+
+    propagateStyle();
+    emit styleChanged();
+
+    if (!explicitStyleOld)
+        emit explicitStyleChanged();
+}
+
+void Theme::resetStyle()
+{
+    if (!m_explicitStyle)
+        return;
+
+    m_explicitStyle = false;
+    auto theme = qobject_cast<Theme*>(attachedParent());
+
+    inheritStyle(theme ? theme->style() : Style::Light);
+
+    emit explicitStyleChanged();
+}
+
+bool Theme::explicitStyle() const {
+    return m_explicitStyle;
+}
+
+int Theme::fontSizeOffset() const
+{
+    return m_fontSizeOffset;
+}
+
+int Theme::secondaryAdditionalTextSize() const
+{
+    return s_secondaryAdditionalTextBaseSize + m_fontSizeOffset;
+}
+
+int Theme::primaryTextFontSize() const
+{
+    return s_primaryTextFontBaseSize + m_fontSizeOffset;
+}
+
+int Theme::secondaryTextFontSize() const
+{
+    return s_secondaryTextFontBaseSize + m_fontSizeOffset;
+}
+
+int Theme::additionalTextSize() const
+{
+    return s_additionalTextBaseSize + m_fontSizeOffset;
+}
+
+int Theme::tertiaryTextFontSize() const
+{
+    return s_tertiaryTextFontBaseSize + m_fontSizeOffset;
+}
+
+int Theme::asideTextFontSize() const
+{
+    return s_asideTextFontBaseSize + m_fontSizeOffset;
+}
+
+QJSValue Theme::fontSize() const
+{
+    if (!m_fontSizeFn.isCallable()) {
+        QQmlEngine *engine = qmlEngine(parent());
+        if (engine) {
+            auto str = QStringLiteral("value => value + %1").arg(m_fontSizeOffset);
+            m_fontSizeFn = engine->evaluate(str);
+        }
+    }
+    return m_fontSizeFn;
+}
+
+void Theme::setFontSizeOffset(int fontSizeOffset)
+{
+    auto explicitFontSizeOffsetOld = m_explicitFontSizeOffset;
+    m_explicitFontSizeOffset = true;
+
+    if (m_fontSizeOffset == fontSizeOffset) {
+        if (!explicitFontSizeOffsetOld)
+            emit explicitFontSizeOffsetChanged();
+
+        return;
+    }
+
+    m_fontSizeOffset = fontSizeOffset;
+    propagateFontSizeOffset();
+    m_fontSizeFn = QJSValue();
+    emit fontSizeOffsetChanged();
+
+    if (!explicitFontSizeOffsetOld)
+        emit explicitFontSizeOffsetChanged();
+}
+
+void Theme::resetFontSizeOffset()
+{
+    if (!m_explicitFontSizeOffset)
+        return;
+
+    m_explicitFontSizeOffset = false;
+    auto theme = qobject_cast<Theme*>(attachedParent());
+
+    inheritFontSizeOffset(theme ? theme->fontSizeOffset() : 0);
+
+    emit explicitFontSizeOffsetChanged();
+}
+
+bool Theme::explicitFontSizeOffset() const
+{
+    return m_explicitFontSizeOffset;
+}
+
+Theme *Theme::rootTheme()
+{
+    auto theme = qobject_cast<Theme*>(attachedParent());
+
+    if (!theme)
+        return this;
+
+    while (true) {
+        auto next = qobject_cast<Theme*>(theme->attachedParent());
+
+        if (!next || qobject_cast<QQmlApplicationEngine*>(next->parent()))
+            return theme;
+        else
+            theme = next;
+    }
+}
+
+Theme* Theme::qmlAttachedProperties(QObject *object)
+{
+    return new Theme(object);
+}
+
+void Theme::inheritPadding(qreal padding)
+{
+    if (m_explicitPadding || m_padding == padding)
+        return;
+
+    m_padding = padding;
+    propagatePadding();
+    emit paddingChanged();
+}
+
+void Theme::propagatePadding()
+{
+    const auto themes = attachedChildren();
+    for (QQuickAttachedPropertyPropagator *child : themes) {
+        auto theme = qobject_cast<Theme*>(child);
+        if (theme)
+            theme->inheritPadding(m_padding);
+    }
+}
+
+void Theme::inheritStyle(Style style)
+{
+    if (m_explicitStyle || m_style == style)
+        return;
+
+    m_style = style;
+    propagateStyle();
+    emit styleChanged();
+}
+
+void Theme::propagateStyle()
+{
+    const auto themes = attachedChildren();
+    for (QQuickAttachedPropertyPropagator *child : themes) {
+        auto theme = qobject_cast<Theme*>(child);
+        if (theme)
+            theme->inheritStyle(m_style);
+    }
+}
+
+void Theme::inheritFontSizeOffset(int fontSizeOffset)
+{
+    if (m_explicitFontSizeOffset || m_fontSizeOffset == fontSizeOffset)
+        return;
+
+    m_fontSizeOffset = fontSizeOffset;
+    propagateFontSizeOffset();
+    m_fontSizeFn = QJSValue();
+    emit fontSizeOffsetChanged();
+}
+
+void Theme::propagateFontSizeOffset()
+{
+    const auto themes = attachedChildren();
+    for (QQuickAttachedPropertyPropagator *child : themes) {
+        auto theme = qobject_cast<Theme*>(child);
+        if (theme)
+            theme->inheritFontSizeOffset(m_fontSizeOffset);
+    }
+}
+
+void Theme::attachedParentChange(QQuickAttachedPropertyPropagator* newParent,
+                                 QQuickAttachedPropertyPropagator* oldParent)
+{
+    Q_UNUSED(oldParent);
+    auto attachedParentTheme = qobject_cast<Theme*>(newParent);
+    if (attachedParentTheme) {
+        inheritPadding(attachedParentTheme->padding());
+        inheritStyle(attachedParentTheme->style());
+        inheritFontSizeOffset(attachedParentTheme->fontSizeOffset());
+    }
+}
diff --git a/ui/StatusQ/src/themepalette.cpp b/ui/StatusQ/src/themepalette.cpp
new file mode 100644
index 00000000000..2272f60a4d1
--- /dev/null
+++ b/ui/StatusQ/src/themepalette.cpp
@@ -0,0 +1,457 @@
+#include "StatusQ/themepalette.h"
+#include "StatusQ/statuscolors.h"
+#include <QtQml/qqml.h>
+
+ThemePalette::ThemePalette(QObject* parent)
+    : QObject(parent)
+{
+    black = QColor(0,0,0);
+    white = QColor(255,255,255);
+    transparent = QColor(0,0,0,0);
+}
+
+QColor ThemePalette::hoverColor(const QColor& normalColor) const
+{
+    if (name == QLatin1String("light"))
+        return QColor(normalColor).darker(120);
+    return QColor(normalColor).lighter(120);
+}
+
+void ThemePalette::buildArrays()
+{
+    customisationColorsArray = {
+        customisationColors.blue,
+        customisationColors.purple,
+        customisationColors.orange,
+        customisationColors.army,
+        customisationColors.turquoise,
+        customisationColors.sky,
+        customisationColors.yellow,
+        customisationColors.pink,
+        customisationColors.copper,
+        customisationColors.camel,
+        customisationColors.magenta,
+        customisationColors.yinYang
+    };
+
+    communityColorsArray = {
+        customisationColors.blue,
+        customisationColors.yellow,
+        customisationColors.magenta,
+        customisationColors.purple,
+        customisationColors.army,
+        customisationColors.sky,
+        customisationColors.orange,
+        customisationColors.camel
+    };
+}
+
+std::unique_ptr<ThemePalette> createDarkThemePalette(QObject* parent)
+{
+    auto t = std::make_unique<ThemePalette>(parent);
+    t->name = QStringLiteral("dark");
+
+    // Base colors
+    t->baseColor1 = StatusColors::getColor("graphite5");
+    t->baseColor2 = StatusColors::getColor("graphite4");
+    t->baseColor3 = StatusColors::getColor("graphite3");
+    t->baseColor4 = StatusColors::getColor("graphite2");
+    t->baseColor5 = StatusColors::getColor("graphite");
+
+    // Primary
+    t->primaryColor1 = StatusColors::getColor("blue3");
+    t->primaryColor2 = StatusColors::getColor("blue4", 0.3);
+    t->primaryColor3 = StatusColors::getColor("blue4", 0.2);
+
+    // Danger
+    t->dangerColor1 = StatusColors::getColor("red3");
+    t->dangerColor2 = StatusColors::getColor("red3", 0.3);
+    t->dangerColor3 = StatusColors::getColor("red3", 0.2);
+
+    // Warning
+    t->warningColor1 = StatusColors::getColor("warning_orange");
+    t->warningColor2 = StatusColors::getColor("warning_orange", 0.2);
+    t->warningColor3 = StatusColors::getColor("warning_orange", 0.1);
+
+    // Success
+    t->successColor1 = StatusColors::getColor("green3");
+    t->successColor2 = StatusColors::getColor("green3", 0.2);
+    t->successColor3 = StatusColors::getColor("green3", 0.3);
+
+    // Mention
+    t->mentionColor1 = StatusColors::getColor("turquoise3");
+    t->mentionColor2 = StatusColors::getColor("turquoise4", 0.3);
+    t->mentionColor3 = StatusColors::getColor("turquoise4", 0.2);
+    t->mentionColor4 = StatusColors::getColor("turquoise4", 0.1);
+
+    // Pin
+    t->pinColor1 = StatusColors::getColor("orange3");
+    t->pinColor2 = StatusColors::getColor("orange4", 0.2);
+    t->pinColor3 = StatusColors::getColor("orange4", 0.1);
+
+    // Direct (white with varying alpha)
+    t->directColor1 = StatusColors::getColor("white");
+    t->directColor2 = StatusColors::getColor("white", 0.9);
+    t->directColor3 = StatusColors::getColor("white", 0.8);
+    t->directColor4 = StatusColors::getColor("white", 0.7);
+    t->directColor5 = StatusColors::getColor("white", 0.4);
+    t->directColor6 = StatusColors::getColor("white", 0.2);
+    t->directColor7 = StatusColors::getColor("white", 0.1);
+    t->directColor8 = StatusColors::getColor("white", 0.05);
+    t->directColor9 = StatusColors::getColor("white", 0.2);
+
+    // Indirect
+    t->indirectColor1 = StatusColors::getColor("black");
+    t->indirectColor2 = StatusColors::getColor("black", 0.7);
+    t->indirectColor3 = StatusColors::getColor("black", 0.4);
+    t->indirectColor4 = StatusColors::getColor("graphite3");
+
+    // Misc
+    t->miscColor1 = StatusColors::getColor("blue5");
+    t->miscColor2 = StatusColors::getColor("purple");
+    t->miscColor3 = StatusColors::getColor("cyan");
+    t->miscColor4 = StatusColors::getColor("violet");
+    t->miscColor5 = StatusColors::getColor("red2");
+    t->miscColor6 = StatusColors::getColor("orange");
+    t->miscColor7 = StatusColors::getColor("yellow");
+    t->miscColor8 = StatusColors::getColor("green4");
+    t->miscColor9 = StatusColors::getColor("moss2");
+    t->miscColor10 = StatusColors::getColor("brown3");
+    t->miscColor11 = StatusColors::getColor("yellow2");
+    t->miscColor12 = StatusColors::getColor("green6");
+
+    // Other
+    t->neutral95 = QColor(0x06, 0x0F, 0x1F);
+    t->dropShadow = StatusColors::getColor("black", 0.08);
+    t->dropShadow2 = StatusColors::getColor("blue8", 0.02);
+    t->dropShadow3 = StatusColors::getColor("blue8", 0.05);
+    t->backdropColor = StatusColors::getColor("black", 0.4);
+    t->statusFloatingButtonHighlight = StatusColors::getColor("blue4", 0.3);
+    t->statusLoadingHighlight = StatusColors::getColor("white", 0.03);
+    t->statusLoadingHighlight2 = StatusColors::getColor("white", 0.07);
+    t->messageHighlightColor = StatusColors::getColor("blue4", 0.2);
+    t->desktopBlue10 = StatusColors::getColor("darkDesktopBlue10");
+    t->blockProgressBarColor = t->directColor7;
+
+    t->background = t->baseColor3;
+    t->backgroundHover = t->baseColor2;
+    t->border = t->baseColor2;
+    t->textColor = t->directColor1;
+    t->secondaryText = t->baseColor1;
+    t->separator = t->directColor7;
+    t->darkGrey = t->baseColor2;
+    t->secondaryBackground = t->primaryColor2;
+    t->secondaryMenuBackground = StatusColors::getColor("graphite2");
+
+    // Status app layout
+    t->statusAppLayout.backgroundColor = t->baseColor3;
+    t->statusAppLayout.rightPanelBackgroundColor = t->baseColor3;
+
+    // Status app nav bar
+    t->statusAppNavBar.backgroundColor = t->baseColor5;
+
+    // Status toast message
+    t->statusToastMessage.backgroundColor = t->baseColor3;
+
+    // Status list item
+    t->statusListItem.backgroundColor = t->baseColor3;
+    t->statusListItem.secondaryHoverBackgroundColor = t->primaryColor3;
+    t->statusListItem.highlightColor = StatusColors::getColor("blue3", 0.05);
+
+    // Status chat list item
+    t->statusChatListItem.hoverBackgroundColor = t->directColor8;
+    t->statusChatListItem.selectedBackgroundColor = t->directColor7;
+
+    // Status chat list category item
+    t->statusChatListCategoryItem.buttonHoverBackgroundColor = t->directColor7;
+
+    // Status navigation list item
+    t->statusNavigationListItem.hoverBackgroundColor = t->directColor8;
+    t->statusNavigationListItem.selectedBackgroundColor = t->directColor7;
+
+    // Status badge
+    t->statusBadge.foregroundColor = t->baseColor3;
+    t->statusBadge.borderColor = t->baseColor5;
+    t->statusBadge.hoverBorderColor = QColor(0x35, 0x3A, 0x4D);
+
+    // Status menu
+    t->statusMenu.backgroundColor = t->baseColor3;
+    t->statusMenu.hoverBackgroundColor = t->directColor7;
+    t->statusMenu.separatorColor = t->separator;
+
+    // Status modal
+    t->statusModal.backgroundColor = t->baseColor3;
+
+    // Status rounded image
+    t->statusRoundedImage.backgroundColor = t->baseColor3;
+
+    // Status chat input
+    t->statusChatInput.secondaryBackgroundColor = QColor(0x41, 0x41, 0x41);
+
+    // Status switch tab
+    t->statusSwitchTab.buttonBackgroundColor = t->primaryColor1;
+    t->statusSwitchTab.barBackgroundColor = t->primaryColor3;
+    t->statusSwitchTab.selectedTextColor = t->indirectColor1;
+    t->statusSwitchTab.textColor = t->primaryColor1;
+
+    // Status select
+    t->statusSelect.menuItemBackgroundColor = t->baseColor3;
+    t->statusSelect.menuItemHoverBackgroundColor = t->directColor7;
+
+    // Status message
+    t->statusMessage.emojiReactionBackground = t->baseColor4;
+    t->statusMessage.emojiReactionBackgroundHovered = t->primaryColor3;
+    t->statusMessage.emojiReactionBorderHovered = t->primaryColor2;
+
+    // Privacy mode colors
+    t->privacyModeColors.navBarColor = QColor(0x5A, 0x33, 0xCA);
+    t->privacyModeColors.navButtonColor = StatusColors::getColor("white", 0.4);
+    t->privacyModeColors.navButtonHighlightedColor = StatusColors::getColor("white");
+
+    // Customisation colors
+    t->customisationColors.blue      = QColor(0x22, 0x3B, 0xC4);
+    t->customisationColors.purple    = QColor(0x5A, 0x33, 0xCA);
+    t->customisationColors.orange    = QColor(0xCC, 0x64, 0x38);
+    t->customisationColors.army      = QColor(0x1A, 0x4E, 0x52);
+    t->customisationColors.turquoise = QColor(0x22, 0x61, 0x7C);
+    t->customisationColors.sky       = QColor(0x14, 0x75, 0xAC);
+    t->customisationColors.yellow    = QColor(0xC5, 0x8D, 0x30);
+    t->customisationColors.pink      = QColor(0xC5, 0x59, 0x72);
+    t->customisationColors.copper    = QColor(0xA2, 0x4E, 0x45);
+    t->customisationColors.camel     = QColor(0x9F, 0x72, 0x52);
+    t->customisationColors.magenta   = QColor(0xBD, 0x1E, 0x56);
+    t->customisationColors.yinYang   = QColor(0xFF, 0xFF, 0xFF);
+    t->customisationColors.purple2   = QColor(0x71, 0x40, 0xFD);
+
+    // User customization colors
+    t->userCustomizationColors = {
+        QColor(0xAA, 0xC6, 0xFF), QColor(0x88, 0x7A, 0xF9),
+        QColor(0x51, 0xD0, 0xF0), QColor(0xD3, 0x7E, 0xF4),
+        QColor(0xFA, 0x65, 0x65), QColor(0xFF, 0xCA, 0x0F),
+        QColor(0x93, 0xDB, 0x33), QColor(0x10, 0xA8, 0x8E),
+        QColor(0xAD, 0x43, 0x43), QColor(0xEA, 0xD2, 0x7B),
+        QColor(0xC0, 0xC0, 0xC0), QColor(0xA9, 0xA9, 0xA9)  // silver, darkgrey
+    };
+
+    t->buildArrays();
+
+    return t;
+}
+
+
+std::unique_ptr<ThemePalette> createLightThemePalette(QObject* parent)
+{
+    auto t = std::make_unique<ThemePalette>(parent);
+    t->name = QStringLiteral("light");
+
+    // Base colors
+    t->baseColor1 = StatusColors::getColor("grey5");
+    t->baseColor2 = StatusColors::getColor("grey4");
+    t->baseColor3 = StatusColors::getColor("grey3");
+    t->baseColor4 = StatusColors::getColor("grey2");
+    t->baseColor5 = StatusColors::getColor("grey");
+
+    // Primary
+    t->primaryColor1 = StatusColors::getColor("blue");
+    t->primaryColor2 = StatusColors::getColor("blue", 0.2);
+    t->primaryColor3 = StatusColors::getColor("blue", 0.1);
+
+    // Danger
+    t->dangerColor1 = StatusColors::getColor("red");
+    t->dangerColor2 = StatusColors::getColor("red", 0.2);
+    t->dangerColor3 = StatusColors::getColor("red", 0.1);
+
+    // Warning
+    t->warningColor1 = StatusColors::getColor("warning_orange");
+    t->warningColor2 = StatusColors::getColor("warning_orange", 0.2);
+    t->warningColor3 = StatusColors::getColor("warning_orange", 0.1);
+
+    // Success
+    t->successColor1 = StatusColors::getColor("green");
+    t->successColor2 = StatusColors::getColor("green", 0.1);
+    t->successColor3 = StatusColors::getColor("green", 0.2);
+
+    // Mention
+    t->mentionColor1 = StatusColors::getColor("turquoise");
+    t->mentionColor2 = StatusColors::getColor("turquoise2", 0.3);
+    t->mentionColor3 = StatusColors::getColor("turquoise2", 0.2);
+    t->mentionColor4 = StatusColors::getColor("turquoise2", 0.1);
+
+    // Pin
+    t->pinColor1 = StatusColors::getColor("orange");
+    t->pinColor2 = StatusColors::getColor("orange2", 0.2);
+    t->pinColor3 = StatusColors::getColor("orange2", 0.1);
+
+    // Direct (black with varying alpha)
+    t->directColor1 = StatusColors::getColor("black");
+    t->directColor2 = StatusColors::getColor("black", 0.9);
+    t->directColor3 = StatusColors::getColor("black", 0.8);
+    t->directColor4 = StatusColors::getColor("black", 0.7);
+    t->directColor5 = StatusColors::getColor("black", 0.4);
+    t->directColor6 = StatusColors::getColor("black", 0.3);
+    t->directColor7 = StatusColors::getColor("black", 0.1);
+    t->directColor8 = StatusColors::getColor("black", 0.05);
+    t->directColor9 = StatusColors::getColor("black", 0.2);
+
+    // Indirect
+    t->indirectColor1 = StatusColors::getColor("white");
+    t->indirectColor2 = StatusColors::getColor("white", 0.7);
+    t->indirectColor3 = StatusColors::getColor("white", 0.4);
+    t->indirectColor4 = StatusColors::getColor("white");
+
+    // Misc
+    t->miscColor1 = StatusColors::getColor("blue2");
+    t->miscColor2 = StatusColors::getColor("purple");
+    t->miscColor3 = StatusColors::getColor("cyan");
+    t->miscColor4 = StatusColors::getColor("violet");
+    t->miscColor5 = StatusColors::getColor("red2");
+    t->miscColor6 = StatusColors::getColor("orange");
+    t->miscColor7 = StatusColors::getColor("yellow");
+    t->miscColor8 = StatusColors::getColor("green2");
+    t->miscColor9 = StatusColors::getColor("moss");
+    t->miscColor10 = StatusColors::getColor("brown");
+    t->miscColor11 = StatusColors::getColor("brown2");
+    t->miscColor12 = StatusColors::getColor("green5");
+
+    // Other
+    t->neutral95 = QColor(0x0D, 0x16, 0x25);
+    t->dropShadow = QColor::fromRgbF(0.0, 34.0/255.0, 51.0/255.0, 0.03);
+    t->dropShadow2 = StatusColors::getColor("blue7", 0.02);
+    t->dropShadow3 = StatusColors::getColor("black", 0.15);
+    t->backdropColor = StatusColors::getColor("black", 0.4);
+    t->statusFloatingButtonHighlight = StatusColors::getColor("blueHijab");
+    t->statusLoadingHighlight = StatusColors::getColor("lightPattensBlue", 0.5);
+    t->statusLoadingHighlight2 = t->indirectColor3;
+    t->messageHighlightColor = StatusColors::getColor("blue", 0.2);
+    t->desktopBlue10 = StatusColors::getColor("lightDesktopBlue10");
+    t->blockProgressBarColor = t->baseColor3;
+
+    t->background = t->white;
+    t->backgroundHover = t->baseColor2;
+    t->border = t->baseColor2;
+    t->textColor = t->directColor1;
+    t->secondaryText = t->baseColor1;
+    t->separator = t->baseColor2;
+    t->darkGrey = t->baseColor1;
+    t->secondaryBackground = t->primaryColor2;
+    t->secondaryMenuBackground = t->baseColor4;
+
+    // Status app layout
+    t->statusAppLayout.backgroundColor = t->white;
+    t->statusAppLayout.rightPanelBackgroundColor = t->white;
+
+    // Status app nav bar
+    t->statusAppNavBar.backgroundColor = t->baseColor2;
+
+    // Status toast message
+    t->statusToastMessage.backgroundColor = t->white;
+
+    // Status list item
+    t->statusListItem.backgroundColor = t->white;
+    t->statusListItem.secondaryHoverBackgroundColor = StatusColors::getColor("blue6");
+    t->statusListItem.highlightColor = StatusColors::getColor("blue", 0.05);
+
+    // Status chat list item
+    t->statusChatListItem.hoverBackgroundColor = t->baseColor2;
+    t->statusChatListItem.selectedBackgroundColor = t->baseColor3;
+
+    // Status chat list category item
+    t->statusChatListCategoryItem.buttonHoverBackgroundColor = t->directColor8;
+
+    // Status navigation list item
+    t->statusNavigationListItem.hoverBackgroundColor = t->baseColor2;
+    t->statusNavigationListItem.selectedBackgroundColor = t->baseColor3;
+
+    // Status badge
+    t->statusBadge.foregroundColor = t->white;
+    t->statusBadge.borderColor = t->baseColor4;
+    t->statusBadge.hoverBorderColor = QColor(0xDD, 0xE3, 0xF3);
+
+    // Status menu
+    t->statusMenu.backgroundColor = t->white;
+    t->statusMenu.hoverBackgroundColor = t->baseColor2;
+    t->statusMenu.separatorColor = t->separator;
+
+    // Status modal
+    t->statusModal.backgroundColor = t->white;
+
+    // Status rounded image
+    t->statusRoundedImage.backgroundColor = t->white;
+
+    // Status chat input
+    t->statusChatInput.secondaryBackgroundColor = QColor(0xE2, 0xE6, 0xE8);
+
+    // Status switch tab
+    t->statusSwitchTab.buttonBackgroundColor = t->primaryColor1;
+    t->statusSwitchTab.barBackgroundColor = t->primaryColor3;
+    t->statusSwitchTab.selectedTextColor = t->indirectColor1;
+    t->statusSwitchTab.textColor = t->primaryColor1;
+
+    // Status select
+    t->statusSelect.menuItemBackgroundColor = t->white;
+    t->statusSelect.menuItemHoverBackgroundColor = t->baseColor2;
+
+    // Status message
+    t->statusMessage.emojiReactionBackground = t->baseColor4;
+    t->statusMessage.emojiReactionBackgroundHovered = t->primaryColor2;
+    t->statusMessage.emojiReactionBorderHovered = t->primaryColor3;
+
+    // Privacy mode colors
+    t->privacyModeColors.navBarColor = QColor(0x5A, 0x33, 0xCA);
+    t->privacyModeColors.navButtonColor = StatusColors::getColor("white", 0.4);
+    t->privacyModeColors.navButtonHighlightedColor = StatusColors::getColor("white");
+
+    // Customisation colors
+    t->customisationColors.blue      = QColor(0x2A, 0x4A, 0xF5);
+    t->customisationColors.purple    = QColor(0x71, 0x40, 0xFD);
+    t->customisationColors.orange    = QColor(0xFF, 0x7D, 0x46);
+    t->customisationColors.army      = QColor(0x21, 0x62, 0x66);
+    t->customisationColors.turquoise = QColor(0x2A, 0x79, 0x9B);
+    t->customisationColors.sky       = QColor(0x19, 0x92, 0xD7);
+    t->customisationColors.yellow    = QColor(0xF6, 0xAF, 0x3C);
+    t->customisationColors.pink      = QColor(0xF6, 0x6F, 0x8F);
+    t->customisationColors.copper    = QColor(0xCB, 0x62, 0x56);
+    t->customisationColors.camel     = QColor(0xC7, 0x8F, 0x67);
+    t->customisationColors.magenta   = QColor(0xEC, 0x26, 0x6C);
+    t->customisationColors.yinYang   = QColor(0x09, 0x10, 0x1C);
+    t->customisationColors.purple2   = QColor(0x5A, 0x33, 0xCA);
+
+    // User customization colors
+    t->userCustomizationColors = {
+        QColor(0x29, 0x46, 0xC4), QColor(0x88, 0x7A, 0xF9),
+        QColor(0x51, 0xD0, 0xF0), QColor(0xD3, 0x7E, 0xF4),
+        QColor(0xFA, 0x65, 0x65), QColor(0xFF, 0xCA, 0x0F),
+        QColor(0x7C, 0xDA, 0x00), QColor(0x26, 0xA6, 0x9A),
+        QColor(0x8B, 0x31, 0x31), QColor(0x9B, 0x83, 0x2F),
+        QColor(0xC0, 0xC0, 0xC0), QColor(0xA9, 0xA9, 0xA9)
+    };
+
+    t->buildArrays();
+
+    return t;
+}
+
+void registerThemePaletteType()
+{
+    // Register gadget meta types. Technically it's not needed, but helps QtCreator
+    // providing hints on the fly.
+    qmlRegisterUncreatableType<StatusAppLayout>("StatusQ.Core.Theme", 1, 0, "StatusAppLayout", "");
+    qmlRegisterUncreatableType<StatusAppNavBar>("StatusQ.Core.Theme", 1, 0, "StatusAppNavBar", "");
+    qmlRegisterUncreatableType<StatusToastMessage>("StatusQ.Core.Theme", 1, 0, "StatusToastMessage", "");
+    qmlRegisterUncreatableType<StatusListItem>("StatusQ.Core.Theme", 1, 0, "StatusListItem", "");
+    qmlRegisterUncreatableType<StatusChatListItem>("StatusQ.Core.Theme", 1, 0, "StatusChatListItem", "");
+    qmlRegisterUncreatableType<StatusChatListCategoryItem>("StatusQ.Core.Theme", 1, 0, "StatusChatListCategoryItem", "");
+    qmlRegisterUncreatableType<StatusNavigationListItem>("StatusQ.Core.Theme", 1, 0, "StatusNavigationListItem", "");
+    qmlRegisterUncreatableType<StatusBadge>("StatusQ.Core.Theme", 1, 0, "StatusBadge", "");
+    qmlRegisterUncreatableType<StatusMenu>("StatusQ.Core.Theme", 1, 0, "StatusMenu", "");
+    qmlRegisterUncreatableType<StatusModal>("StatusQ.Core.Theme", 1, 0, "StatusModal", "");
+    qmlRegisterUncreatableType<StatusRoundedImage>("StatusQ.Core.Theme", 1, 0, "StatusRoundedImage", "");
+    qmlRegisterUncreatableType<StatusChatInput>("StatusQ.Core.Theme", 1, 0, "StatusChatInput", "");
+    qmlRegisterUncreatableType<StatusSwitchTab>("StatusQ.Core.Theme", 1, 0, "StatusSwitchTab", "");
+    qmlRegisterUncreatableType<StatusSelect>("StatusQ.Core.Theme", 1, 0, "StatusSelect", "");
+    qmlRegisterUncreatableType<StatusMessage>("StatusQ.Core.Theme", 1, 0, "StatusMessage", "");
+    qmlRegisterUncreatableType<CustomisationColors>("StatusQ.Core.Theme", 1, 0, "CustomisationColors", "");
+    qmlRegisterUncreatableType<PrivacyModeColors>("StatusQ.Core.Theme", 1, 0, "PrivacyModeColors", "");
+
+    qmlRegisterUncreatableType<ThemePalette>("StatusQ.Core.Theme", 1, 0, "ThemePalette", "");
+}
diff --git a/ui/StatusQ/src/typesregistration.cpp b/ui/StatusQ/src/typesregistration.cpp
index 2105eb215f3..75fbdcb7be4 100644
--- a/ui/StatusQ/src/typesregistration.cpp
+++ b/ui/StatusQ/src/typesregistration.cpp
@@ -2,19 +2,21 @@
 #include "StatusQ/clipboardutils.h"
 #include "StatusQ/constantrole.h"
 #include "StatusQ/fastexpressionfilter.h"
-#include "StatusQ/oneoffilter.h"
 #include "StatusQ/fastexpressionrole.h"
 #include "StatusQ/fastexpressionsorter.h"
 #include "StatusQ/formatteddoubleproperty.h"
 #include "StatusQ/genericvalidator.h"
 #include "StatusQ/keychain.h"
 #include "StatusQ/networkchecker.h"
+#include "StatusQ/oneoffilter.h"
 #include "StatusQ/permissionutilsinternal.h"
 #include "StatusQ/rxvalidator.h"
+#include "StatusQ/statuscolors.h"
 #include "StatusQ/statusemojimodel.h"
 #include "StatusQ/statussyntaxhighlighter.h"
 #include "StatusQ/stringutilsinternal.h"
 #include "StatusQ/systemutilsinternal.h"
+#include "StatusQ/theme.h"
 #include "StatusQ/undefinedfilter.h"
 #include "StatusQ/urlutils.h"
 
@@ -97,6 +99,18 @@ void registerStatusQTypes() {
                                                   return new OnboardingEnums;
                                               });
 
+    qmlRegisterSingletonType<StatusColors>("StatusQ.Core.Theme", 0, 1, "StatusColors",
+                                           [](QQmlEngine*, QJSEngine*) {
+                                               return new StatusColors;
+                                           });
+
+    qmlRegisterUncreatableType<Theme>("StatusQ.Core.Theme", 0, 1,
+                                      "Theme", QStringLiteral("This is attached type, cannot be created directly."));
+
+    qmlRegisterUncreatableType<ThemePalette>("StatusQ.Core.Theme", 0, 1,
+                                             "ThemePalette", QStringLiteral("Theme palette cannot be created directly."));
+
+
 #ifdef BUNDLE_QML_RESOURCES
     Q_INIT_RESOURCE(TestConfig);
     Q_INIT_RESOURCE(statusq);
diff --git a/ui/app/AppLayouts/ActivityCenter/ActivityCenterLayout.qml b/ui/app/AppLayouts/ActivityCenter/ActivityCenterLayout.qml
index e63d3aabe77..31db438e83e 100644
--- a/ui/app/AppLayouts/ActivityCenter/ActivityCenterLayout.qml
+++ b/ui/app/AppLayouts/ActivityCenter/ActivityCenterLayout.qml
@@ -619,7 +619,7 @@ StatusSectionLayout {
                 }
                 StatusBaseText {
                     Layout.alignment: Qt.AlignHCenter
-                    font.pixelSize: Theme.fontSize27
+                    font.pixelSize: Theme.fontSize(27)
                     font.weight: Font.Medium
                     font.letterSpacing: 5
                     text: truncateDeviceId(deviceId)
@@ -669,7 +669,7 @@ StatusSectionLayout {
                 }
                 StatusBaseText {
                     Layout.alignment: Qt.AlignHCenter
-                    font.pixelSize: Theme.fontSize27
+                    font.pixelSize: Theme.fontSize(27)
                     font.weight: Font.Medium
                     font.letterSpacing: 5
                     text: truncateDeviceId(deviceId)
diff --git a/ui/app/AppLayouts/ActivityCenter/controls/NotificationCard.qml b/ui/app/AppLayouts/ActivityCenter/controls/NotificationCard.qml
index 2bdb44d50ab..262b0603f7e 100644
--- a/ui/app/AppLayouts/ActivityCenter/controls/NotificationCard.qml
+++ b/ui/app/AppLayouts/ActivityCenter/controls/NotificationCard.qml
@@ -181,12 +181,12 @@ Control {
         // Returns the avatar scaling factor for a given font size enum value.
         function avatarFactorForFontSize(fs) {
             switch (fs) {
-            case Theme.FontSize.FontSizeXS:  return d.factorXS;
-            case Theme.FontSize.FontSizeS:   return d.factorS;
-            case Theme.FontSize.FontSizeM:   return d.factorM;
-            case Theme.FontSize.FontSizeL:   return d.factorL;
-            case Theme.FontSize.FontSizeXL:  return d.factorXL;
-            case Theme.FontSize.FontSizeXXL: return d.factorXXL;
+            case ThemeUtils.FontSize.FontSizeXS:  return d.factorXS;
+            case ThemeUtils.FontSize.FontSizeS:   return d.factorS;
+            case ThemeUtils.FontSize.FontSizeM:   return d.factorM;
+            case ThemeUtils.FontSize.FontSizeL:   return d.factorL;
+            case ThemeUtils.FontSize.FontSizeXL:  return d.factorXL;
+            case ThemeUtils.FontSize.FontSizeXXL: return d.factorXXL;
             default:                         return 1.0;  // Safe fallback
             }
         }
@@ -266,7 +266,7 @@ Control {
                 Layout.fillWidth: true
                 visible: root.actionText
                 text: root.actionText
-                font.pixelSize: Theme.fontSize13
+                font.pixelSize: Theme.fontSize(13)
                 color: Theme.palette.directColor5
                 elide: Text.ElideRight
             }
@@ -285,7 +285,7 @@ Control {
             StatusBaseText {
                 Layout.fillWidth: true
                 text: LocaleUtils.formatRelativeTimestamp(root.timestamp)
-                font.pixelSize: Theme.fontSize11
+                font.pixelSize: Theme.fontSize(11)
                 color: Theme.palette.directColor5
                 elide: Text.ElideRight
             }
diff --git a/ui/app/AppLayouts/ActivityCenter/controls/NotificationContentBlock.qml b/ui/app/AppLayouts/ActivityCenter/controls/NotificationContentBlock.qml
index 88304e4da7c..2c026436d59 100644
--- a/ui/app/AppLayouts/ActivityCenter/controls/NotificationContentBlock.qml
+++ b/ui/app/AppLayouts/ActivityCenter/controls/NotificationContentBlock.qml
@@ -171,7 +171,7 @@ Control {
             text: plainTextLength > root.contentMaxChars ? Utils.elideText(root.contentText, root.contentMaxChars, 0) :
                                                            root.contentText
             elide: Text.ElideRight
-            font.pixelSize: Theme.fontSize13
+            font.pixelSize: Theme.fontSize(13)
             color: Theme.palette.directColor4
 
             onLinkActivated: href => root.linkActivated(href)
diff --git a/ui/app/AppLayouts/ActivityCenter/controls/NotificationContextRow.qml b/ui/app/AppLayouts/ActivityCenter/controls/NotificationContextRow.qml
index 5e5e8f832db..6d686ef7d90 100644
--- a/ui/app/AppLayouts/ActivityCenter/controls/NotificationContextRow.qml
+++ b/ui/app/AppLayouts/ActivityCenter/controls/NotificationContextRow.qml
@@ -70,8 +70,8 @@ Control {
     // ──────────────────────────────────────────────────────────────────────────
 
     // Keep icon close to text height for optical alignment
-    property int    iconSize:       Theme.fontSize16
-    property int    separatorSize:  Theme.fontSize16
+    property int    iconSize:       Theme.fontSize(16)
+    property int    separatorSize:  Theme.fontSize(16)
 
     // ──────────────────────────────────────────────────────────────────────────
     // Layout configuration (single Flow → icon + pieces wrap together)
@@ -98,7 +98,7 @@ Control {
                             root.width - icon.width - separator.width - 2 * root.spacing)
             text: root.primaryText
             color: root.primaryColor
-            font.pixelSize: Theme.fontSize13
+            font.pixelSize: Theme.fontSize(13)
             font.weight: Font.Medium
             maximumLineCount: 1
             wrapMode: Text.NoWrap
@@ -121,7 +121,7 @@ Control {
             width: Math.min(implicitWidth, root.width)
             text: root.secondaryText
             color: root.secondaryColor
-            font.pixelSize: Theme.fontSize13
+            font.pixelSize: Theme.fontSize(13)
             maximumLineCount: 1
             wrapMode: Text.NoWrap
             elide: Text.ElideRight
diff --git a/ui/app/AppLayouts/ActivityCenter/controls/NotificationHeaderRow.qml b/ui/app/AppLayouts/ActivityCenter/controls/NotificationHeaderRow.qml
index 64b7817c3c5..fbfbbea704d 100644
--- a/ui/app/AppLayouts/ActivityCenter/controls/NotificationHeaderRow.qml
+++ b/ui/app/AppLayouts/ActivityCenter/controls/NotificationHeaderRow.qml
@@ -84,7 +84,7 @@ Control {
 
         // Indicates whether the `isContact` or the `trustedIndicators` are visualized as tiny icons or normal ones (size change).
         // By default it scales following a factor based on current app font size.
-        readonly property bool areTinyIndicators: Theme.currentFontSize <= Theme.FontSize.FontSizeM
+        readonly property bool areTinyIndicators: Theme.currentFontSize <= ThemeUtils.FontSize.FontSizeM
     }
 
     // ──────────────────────────────────────────────────────────────────────────
@@ -107,7 +107,7 @@ Control {
             elide: Text.ElideRight
             maximumLineCount: 1
             wrapMode: Text.NoWrap
-            font.pixelSize: Theme.fontSize13
+            font.pixelSize: Theme.fontSize(13)
             font.weight: Font.Medium
         }
 
@@ -128,7 +128,7 @@ Control {
             color: root.keyColor
             maximumLineCount: 1
             wrapMode: Text.NoWrap
-            font.pixelSize: Theme.fontSize11
+            font.pixelSize: Theme.fontSize(11)
         }
 
         // Spacer pushes content to the left
diff --git a/ui/app/AppLayouts/ActivityCenter/controls/ReplyBadge.qml b/ui/app/AppLayouts/ActivityCenter/controls/ReplyBadge.qml
index a7c63df741a..7e732b3e08d 100644
--- a/ui/app/AppLayouts/ActivityCenter/controls/ReplyBadge.qml
+++ b/ui/app/AppLayouts/ActivityCenter/controls/ReplyBadge.qml
@@ -34,7 +34,7 @@ Badge {
         spacing: 4
 
         StatusIcon {
-            source: Theme.svg("reply-small-arrow")
+            source: Assets.svg("reply-small-arrow")
             Layout.preferredWidth: Theme.padding
             Layout.preferredHeight: Theme.padding
         }
diff --git a/ui/app/AppLayouts/ActivityCenter/views/ActivityNotificationCommunityMembershipRequest.qml b/ui/app/AppLayouts/ActivityCenter/views/ActivityNotificationCommunityMembershipRequest.qml
index 90da7e63363..cfdafd9ddbe 100644
--- a/ui/app/AppLayouts/ActivityCenter/views/ActivityNotificationCommunityMembershipRequest.qml
+++ b/ui/app/AppLayouts/ActivityCenter/views/ActivityNotificationCommunityMembershipRequest.qml
@@ -70,7 +70,8 @@ ActivityNotificationMessage {
     messageDetails.sender.profileImage.name: contactDetails ? contactDetails.thumbnailImage : ""
     messageDetails.sender.profileImage.assetSettings.isImage: true
     messageDetails.sender.profileImage.pubkey: notification ? notification.author : ""
-    messageDetails.sender.profileImage.colorId: Utils.colorIdForPubkey(notification ? notification.author : "")
+    messageDetails.sender.profileImage.color:
+        Theme.palette.userCustomizationColors[Utils.colorIdForPubkey(notification ? notification.author : "")]
 
     badgeComponent: CommunityBadge {
         communityName: community ? community.name : ""
diff --git a/ui/app/AppLayouts/ActivityCenter/views/ActivityNotificationMessage.qml b/ui/app/AppLayouts/ActivityCenter/views/ActivityNotificationMessage.qml
index 098f4ce7732..3e57c0ab1b9 100644
--- a/ui/app/AppLayouts/ActivityCenter/views/ActivityNotificationMessage.qml
+++ b/ui/app/AppLayouts/ActivityCenter/views/ActivityNotificationMessage.qml
@@ -42,7 +42,7 @@ ActivityNotificationBase {
             height: 40
             name: contactDetails ? contactDetails.thumbnailImage : ""
             pubkey: contactId
-            colorId: Utils.colorIdForPubkey(contactId)
+            color: Theme.palette.userCustomizationColors[Utils.colorIdForPubkey(contactId)]
         }
         contentType: notification && notification.message ? notification.message.contentType : StatusMessage.ContentType.Unknown
         album: notification && notification.message ? notification.message.albumMessageImages.split(" ") : []
diff --git a/ui/app/AppLayouts/ActivityCenter/views/ActivityNotificationNewsMessage.qml b/ui/app/AppLayouts/ActivityCenter/views/ActivityNotificationNewsMessage.qml
index ba4f7203714..3e0c74d741b 100644
--- a/ui/app/AppLayouts/ActivityCenter/views/ActivityNotificationNewsMessage.qml
+++ b/ui/app/AppLayouts/ActivityCenter/views/ActivityNotificationNewsMessage.qml
@@ -14,7 +14,7 @@ ActivityNotificationBase {
     signal readMoreClicked
 
     avatarComponent: SVGImage {
-        source: Theme.png("status-logo-icon")
+        source: Assets.png("status-logo-icon")
         Layout.preferredWidth: 40
         Layout.preferredHeight: 40
         Layout.alignment: Qt.AlignTop
diff --git a/ui/app/AppLayouts/ActivityCenter/views/ActivityNotificationTransferOwnership.qml b/ui/app/AppLayouts/ActivityCenter/views/ActivityNotificationTransferOwnership.qml
index 12645a4fc60..75898fff482 100644
--- a/ui/app/AppLayouts/ActivityCenter/views/ActivityNotificationTransferOwnership.qml
+++ b/ui/app/AppLayouts/ActivityCenter/views/ActivityNotificationTransferOwnership.qml
@@ -114,7 +114,7 @@ ActivityNotificationBase {
                 info: qsTr("To finalise your ownership of the %1 Community, make your device the control node").arg(root.communityName)
                 ctaText: qsTr("Finalise ownership")
                 assetColor: root.communityColor
-                assetBgColor: Theme.palette.getColor(d.assetColor, 0.1)
+                assetBgColor: StatusColors.getColor(d.assetColor, 0.1)
                 assetName: d.crownAssetName
                 actionSourceComponent: ctaLinkBtnComponent
             }
@@ -127,7 +127,7 @@ ActivityNotificationBase {
                 info: qsTr("To finalise your ownership of the %1 Community, make your device the control node").arg(root.communityName)
                 ctaText: qsTr("Ownership Declined")
                 assetColor: root.communityColor
-                assetBgColor: Theme.palette.getColor(d.assetColor, 0.1)
+                assetBgColor: StatusColors.getColor(d.assetColor, 0.1)
                 assetName: d.crownAssetName
                 actionSourceComponent: ctaTextComponent
             }
@@ -140,7 +140,7 @@ ActivityNotificationBase {
                 info: qsTr("Congratulations, you are now the official owner of the %1 Community with full admin rights").arg(root.communityName)
                 ctaText: qsTr("Community admin")
                 assetColor: root.communityColor
-                assetBgColor: Theme.palette.getColor(d.assetColor, 0.1)
+                assetBgColor: StatusColors.getColor(d.assetColor, 0.1)
                 assetName: d.crownAssetName
                 actionSourceComponent: ctaLinkBtnComponent
             }
diff --git a/ui/app/AppLayouts/Browser/controls/BookmarkButton.qml b/ui/app/AppLayouts/Browser/controls/BookmarkButton.qml
index 72628225cf1..18bdb2b9df5 100644
--- a/ui/app/AppLayouts/Browser/controls/BookmarkButton.qml
+++ b/ui/app/AppLayouts/Browser/controls/BookmarkButton.qml
@@ -26,7 +26,7 @@ Item {
         width: 48
         height: 48
         anchors.horizontalCenter: parent.horizontalCenter
-        source: !!root.source && !!root.source.toString() ? root.source : Theme.svg("compassActive")
+        source: !!root.source && !!root.source.toString() ? root.source : Assets.svg("compassActive")
         visible: root.source && root.source.toString()
     }
 
diff --git a/ui/app/AppLayouts/Browser/controls/FaviconImage.qml b/ui/app/AppLayouts/Browser/controls/FaviconImage.qml
index 64a7188535b..d4192042636 100644
--- a/ui/app/AppLayouts/Browser/controls/FaviconImage.qml
+++ b/ui/app/AppLayouts/Browser/controls/FaviconImage.qml
@@ -13,5 +13,5 @@ Image {
     height: 24
     sourceSize: Qt.size(width, height)
     // TODO find a better default favicon
-    source: faviconImage.currentTab && !!faviconImage.currentTab.icon.toString() ? faviconImage.currentTab.icon : Theme.svg("compassActive")
+    source: faviconImage.currentTab && !!faviconImage.currentTab.icon.toString() ? faviconImage.currentTab.icon : Assets.svg("compassActive")
 }
diff --git a/ui/app/AppLayouts/Browser/popups/BrowserConnectionModal.qml b/ui/app/AppLayouts/Browser/popups/BrowserConnectionModal.qml
index 68d787a5872..20e488917b2 100644
--- a/ui/app/AppLayouts/Browser/popups/BrowserConnectionModal.qml
+++ b/ui/app/AppLayouts/Browser/popups/BrowserConnectionModal.qml
@@ -72,7 +72,7 @@ StatusModal {
                 }
 
                 RoundedIcon {
-                    source: Theme.svg("check")
+                    source: Assets.svg("check")
                     iconColor: Theme.palette.primaryColor1
                     color: Theme.palette.secondaryBackground
                 }
@@ -82,7 +82,7 @@ StatusModal {
                 }
 
                 RoundedIcon {
-                    source: Theme.svg("walletIcon")
+                    source: Assets.svg("walletIcon")
                     iconHeight: 18
                     iconWidth: 18
                     iconColor: accountSelector.currentAccount.iconColor || Theme.palette.primaryColor1
diff --git a/ui/app/AppLayouts/Browser/views/BrowserWebEngineView.qml b/ui/app/AppLayouts/Browser/views/BrowserWebEngineView.qml
index 24ff010744a..cf0d20e54c0 100644
--- a/ui/app/AppLayouts/Browser/views/BrowserWebEngineView.qml
+++ b/ui/app/AppLayouts/Browser/views/BrowserWebEngineView.qml
@@ -156,7 +156,7 @@ WebEngineView {
 
             Image {
                 id: emptyPageImage
-                source: Theme.png("browser/pepehand")
+                source: Assets.png("browser/pepehand")
                 width: 294
                 height: 294
                 anchors.horizontalCenter: parent.horizontalCenter
diff --git a/ui/app/AppLayouts/Chat/panels/ChatAnchorButtonsPanel.qml b/ui/app/AppLayouts/Chat/panels/ChatAnchorButtonsPanel.qml
index 37aaccf2f8d..74e222a348b 100644
--- a/ui/app/AppLayouts/Chat/panels/ChatAnchorButtonsPanel.qml
+++ b/ui/app/AppLayouts/Chat/panels/ChatAnchorButtonsPanel.qml
@@ -47,7 +47,7 @@ Item {
         layer.effect: DropShadow {
             samples: 16
             cached: true
-            color: Theme.palette.alphaColor(Theme.palette.directColor1, 0.16)
+            color: StatusColors.alphaColor(Theme.palette.directColor1, 0.16)
         }
     }
 
diff --git a/ui/app/AppLayouts/Chat/panels/ChatRequestMessagePanel.qml b/ui/app/AppLayouts/Chat/panels/ChatRequestMessagePanel.qml
index a7677ab2e95..e06b7095289 100644
--- a/ui/app/AppLayouts/Chat/panels/ChatRequestMessagePanel.qml
+++ b/ui/app/AppLayouts/Chat/panels/ChatRequestMessagePanel.qml
@@ -17,7 +17,7 @@ Item {
 
     Image {
         id: waveImg
-        source: Theme.png("chat/wave")
+        source: Assets.png("chat/wave")
         width: 80
         height: 80
         anchors.horizontalCenter: parent.horizontalCenter
diff --git a/ui/app/AppLayouts/Chat/panels/EmptyChatPanel.qml b/ui/app/AppLayouts/Chat/panels/EmptyChatPanel.qml
index cd8deb34165..be5587a525b 100644
--- a/ui/app/AppLayouts/Chat/panels/EmptyChatPanel.qml
+++ b/ui/app/AppLayouts/Chat/panels/EmptyChatPanel.qml
@@ -34,7 +34,7 @@ ColumnLayout {
                                      remainingHeight / 2)) / 2
         }
 
-        source: Theme.png("chat/chat@2x")
+        source: Assets.png("chat/chat@2x")
     }
 
     StatusBaseText {
diff --git a/ui/app/AppLayouts/Chat/panels/SuggestedChannelsPanel.qml b/ui/app/AppLayouts/Chat/panels/SuggestedChannelsPanel.qml
index ff5a4a15f2f..ff68bda959d 100644
--- a/ui/app/AppLayouts/Chat/panels/SuggestedChannelsPanel.qml
+++ b/ui/app/AppLayouts/Chat/panels/SuggestedChannelsPanel.qml
@@ -25,7 +25,7 @@ Repeater {
             id: sectionTitle
             text: modelData.name
             font.bold: true
-            font.pixelSize: Theme.fontSize16
+            font.pixelSize: Theme.fontSize(16)
         }
         Flow {
             width: parent.width
diff --git a/ui/app/AppLayouts/Chat/popups/PaymentRequestModal.qml b/ui/app/AppLayouts/Chat/popups/PaymentRequestModal.qml
index f3e5e256dd5..dfe162a7833 100644
--- a/ui/app/AppLayouts/Chat/popups/PaymentRequestModal.qml
+++ b/ui/app/AppLayouts/Chat/popups/PaymentRequestModal.qml
@@ -237,7 +237,7 @@ StatusDialog {
                 asset.height: 36
                 asset.width: 36
                 asset.isImage: true
-                asset.name: Theme.svg(network.iconUrl)
+                asset.name: Assets.svg(network.iconUrl)
                 subTitle: qsTr("Only")
                 leftPadding: 0
                 rightPadding: 0
@@ -254,7 +254,7 @@ StatusDialog {
                 asset.height: 36
                 asset.width: 36
                 asset.isImage: true
-                asset.name: Theme.svg(model.iconUrl)
+                asset.name: Assets.svg(model.iconUrl)
                 subTitle: qsTr("Only")
 
                 onClicked: {
diff --git a/ui/app/AppLayouts/Chat/stores/RootStore.qml b/ui/app/AppLayouts/Chat/stores/RootStore.qml
index 746a2adb342..8c2b70c7572 100644
--- a/ui/app/AppLayouts/Chat/stores/RootStore.qml
+++ b/ui/app/AppLayouts/Chat/stores/RootStore.qml
@@ -88,7 +88,7 @@ QtObject {
         proxyRoles: [
             FastExpressionRole {
                 function collectibleIcon(icon) {
-                    return !!icon ? icon : Theme.png("tokens/DEFAULT-TOKEN")
+                    return !!icon ? icon : Assets.png("tokens/DEFAULT-TOKEN")
                 }
                 name: "iconSource"
                 expression: collectibleIcon(model.icon)
@@ -101,7 +101,7 @@ QtObject {
             },
             FastExpressionRole {
                 function collectibleIcon(icon) {
-                    return !!icon ? icon : Theme.png("tokens/DEFAULT-TOKEN")
+                    return !!icon ? icon : Assets.png("tokens/DEFAULT-TOKEN")
                 }
                 name: "collectionImageUrl"
                 expression: collectibleIcon(model.icon)
diff --git a/ui/app/AppLayouts/Communities/controls/AddressesInputList.qml b/ui/app/AppLayouts/Communities/controls/AddressesInputList.qml
index ed0098f46c4..47930522eca 100644
--- a/ui/app/AppLayouts/Communities/controls/AddressesInputList.qml
+++ b/ui/app/AppLayouts/Communities/controls/AddressesInputList.qml
@@ -91,7 +91,7 @@ Control {
                 PropertyChanges {
                     target: delegate
 
-                    color: Theme.palette.alphaColor(
+                    color: StatusColors.alphaColor(
                                Theme.palette.dangerColor1, 0.05)
                 }
 
diff --git a/ui/app/AppLayouts/Communities/controls/AirdropRecipientsSelector.qml b/ui/app/AppLayouts/Communities/controls/AirdropRecipientsSelector.qml
index bf8a4a551d1..47919023c5f 100644
--- a/ui/app/AppLayouts/Communities/controls/AirdropRecipientsSelector.qml
+++ b/ui/app/AppLayouts/Communities/controls/AirdropRecipientsSelector.qml
@@ -35,7 +35,7 @@ StatusFlowSelector {
                              !membersSelectorPanel.visible
 
     title: qsTr("To")
-    icon: Theme.svg("member")
+    icon: Assets.svg("member")
     flowSpacing: addressesSelectorPanel.visible || membersSelectorPanel.visible
                  ? 12 : 6
 
diff --git a/ui/app/AppLayouts/Communities/controls/AirdropTokensSelector.qml b/ui/app/AppLayouts/Communities/controls/AirdropTokensSelector.qml
index 5baeeabf9dd..57a6a7a4f32 100644
--- a/ui/app/AppLayouts/Communities/controls/AirdropTokensSelector.qml
+++ b/ui/app/AppLayouts/Communities/controls/AirdropTokensSelector.qml
@@ -20,7 +20,7 @@ StatusFlowSelector {
     placeholderItem.visible: repeater.count === 0
 
     title: qsTr("What")
-    icon: Theme.svg("token")
+    icon: Assets.svg("token")
 
     QtObject {
         id: d
diff --git a/ui/app/AppLayouts/Communities/controls/IssuePill.qml b/ui/app/AppLayouts/Communities/controls/IssuePill.qml
index c598d2a3687..3ecd20c29e2 100644
--- a/ui/app/AppLayouts/Communities/controls/IssuePill.qml
+++ b/ui/app/AppLayouts/Communities/controls/IssuePill.qml
@@ -31,7 +31,7 @@ Control {
     property alias bgCornerRadius: background.radius
     property string icon: "warning"
 
-    font.family: Theme.baseFont.name
+    font.family: Fonts.baseFont.family
     font.pixelSize: Theme.tertiaryTextFontSize
 
     horizontalPadding: 8
@@ -61,9 +61,9 @@ Control {
     background: Rectangle {
         id: background
         radius: 100
-        color: Theme.palette.alphaColor(root.baseColor, 0.03)
+        color: StatusColors.alphaColor(root.baseColor, 0.03)
         border.width: 1
-        border.color: Theme.palette.alphaColor(root.baseColor, 0.3)
+        border.color: StatusColors.alphaColor(root.baseColor, 0.3)
     }
 
     contentItem: RowLayout {
diff --git a/ui/app/AppLayouts/Communities/controls/ListDropdownContent.qml b/ui/app/AppLayouts/Communities/controls/ListDropdownContent.qml
index b1c736da283..0cfeba71156 100644
--- a/ui/app/AppLayouts/Communities/controls/ListDropdownContent.qml
+++ b/ui/app/AppLayouts/Communities/controls/ListDropdownContent.qml
@@ -95,7 +95,7 @@ StatusListView {
 
         name: model.name
         shortName: model.shortName ?? ""
-        iconSource: model.iconSource ? model.iconSource : Theme.png("tokens/DEFAULT-TOKEN")
+        iconSource: model.iconSource ? model.iconSource : Assets.png("tokens/DEFAULT-TOKEN")
         showSubItemsIcon: !!model.subItems && model.subItems.count > 0
         selected: root.checkedKeys.includes(model.key)
         amount: {
diff --git a/ui/app/AppLayouts/Communities/controls/Options.qml b/ui/app/AppLayouts/Communities/controls/Options.qml
index 276d535730b..a2095ff249c 100644
--- a/ui/app/AppLayouts/Communities/controls/Options.qml
+++ b/ui/app/AppLayouts/Communities/controls/Options.qml
@@ -101,7 +101,7 @@ ColumnLayout {
         Layout.bottomMargin: Theme.padding
         borderColor: Theme.palette.baseColor2
         textColor: Theme.palette.directColor1
-        icon: Theme.svg("token")
+        icon: Assets.svg("token")
         iconColor: Theme.palette.directColor1
         iconAlignment: Qt.AlignVCenter
         isRowLayout: false
diff --git a/ui/app/AppLayouts/Communities/controls/SettingsPageHeader.qml b/ui/app/AppLayouts/Communities/controls/SettingsPageHeader.qml
index 9cb70aa3f66..116624a385a 100644
--- a/ui/app/AppLayouts/Communities/controls/SettingsPageHeader.qml
+++ b/ui/app/AppLayouts/Communities/controls/SettingsPageHeader.qml
@@ -31,7 +31,7 @@ Control {
                 Layout.horizontalStretchFactor: 0
 
                 color: Theme.palette.directColor1
-                font.pixelSize: Theme.fontSize26
+                font.pixelSize: Theme.fontSize(26)
                 font.bold: true
 
                 elide: Text.ElideRight
diff --git a/ui/app/AppLayouts/Communities/helpers/PermissionsHelpers.qml b/ui/app/AppLayouts/Communities/helpers/PermissionsHelpers.qml
index e8ab54d3b26..f55920c3215 100644
--- a/ui/app/AppLayouts/Communities/helpers/PermissionsHelpers.qml
+++ b/ui/app/AppLayouts/Communities/helpers/PermissionsHelpers.qml
@@ -45,7 +45,7 @@ QtObject {
 
     function getTokenIconByKey(model, key) {
         const item = getTokenByKey(model, key)
-        const defaultIcon = Theme.png("tokens/DEFAULT-TOKEN")
+        const defaultIcon = Assets.png("tokens/DEFAULT-TOKEN")
         if (item)
             return item.iconSource ? item.iconSource : defaultIcon
         return defaultIcon
diff --git a/ui/app/AppLayouts/Communities/panels/AirdropsSettingsPanel.qml b/ui/app/AppLayouts/Communities/panels/AirdropsSettingsPanel.qml
index 9a7925a2144..9a88af7f3b8 100644
--- a/ui/app/AppLayouts/Communities/panels/AirdropsSettingsPanel.qml
+++ b/ui/app/AppLayouts/Communities/panels/AirdropsSettingsPanel.qml
@@ -96,7 +96,7 @@ StackView {
             preferredContentWidth: root.preferredContentWidth
             internalRightPadding: root.internalRightPadding
 
-            image: Theme.png("community/airdrops8_1")
+            image: Assets.png("community/airdrops8_1")
             title: qsTr("Airdrop community tokens")
             subtitle: qsTr("You can mint custom tokens and collectibles for your community")
             checkersModel: [
diff --git a/ui/app/AppLayouts/Communities/panels/CommunityBannedMemberCenterPanel.qml b/ui/app/AppLayouts/Communities/panels/CommunityBannedMemberCenterPanel.qml
index 27bb41fccee..47494587523 100644
--- a/ui/app/AppLayouts/Communities/panels/CommunityBannedMemberCenterPanel.qml
+++ b/ui/app/AppLayouts/Communities/panels/CommunityBannedMemberCenterPanel.qml
@@ -71,7 +71,7 @@ ColumnLayout {
                             width: 40
                             height: 40
                             name: model.profileImage || ""
-                            colorId: model.colorId
+                            color: root.Theme.palette.userCustomizationColors[model.colorId]
                         }
                     }
                 }
diff --git a/ui/app/AppLayouts/Communities/panels/ControlNodeOfflineCenterPanel.qml b/ui/app/AppLayouts/Communities/panels/ControlNodeOfflineCenterPanel.qml
index 8602645fa06..5a141ca5131 100644
--- a/ui/app/AppLayouts/Communities/panels/ControlNodeOfflineCenterPanel.qml
+++ b/ui/app/AppLayouts/Communities/panels/ControlNodeOfflineCenterPanel.qml
@@ -69,7 +69,7 @@ ColumnLayout {
                             width: 40
                             height: 40
                             name: model.profileImage || ""
-                            colorId: model.colorId
+                            color: root.Theme.palette.userCustomizationColors[model.colorId]
                         }
                     }
                 }
diff --git a/ui/app/AppLayouts/Communities/panels/FeesBox.qml b/ui/app/AppLayouts/Communities/panels/FeesBox.qml
index e45a051f6f6..0e8c122c846 100644
--- a/ui/app/AppLayouts/Communities/panels/FeesBox.qml
+++ b/ui/app/AppLayouts/Communities/panels/FeesBox.qml
@@ -10,7 +10,7 @@ StatusGroupBox {
     id: root
 
     title: qsTr("Fees")
-    icon: Theme.svg("gas")
+    icon: Assets.svg("gas")
 
     // expected roles:
     //
diff --git a/ui/app/AppLayouts/Communities/panels/JoinCommunityCenterPanel.qml b/ui/app/AppLayouts/Communities/panels/JoinCommunityCenterPanel.qml
index a4ae46ed304..651f9f994ca 100644
--- a/ui/app/AppLayouts/Communities/panels/JoinCommunityCenterPanel.qml
+++ b/ui/app/AppLayouts/Communities/panels/JoinCommunityCenterPanel.qml
@@ -100,7 +100,7 @@ ColumnLayout {
                             width: 40
                             height: 40
                             name: model.profileImage || ""
-                            colorId: model.colorId
+                            color: root.Theme.palette.userCustomizationColors[model.colorId]
                         }
                     }
                 }
diff --git a/ui/app/AppLayouts/Communities/panels/OverviewSettingsChart.qml b/ui/app/AppLayouts/Communities/panels/OverviewSettingsChart.qml
index 45169a3e4f4..287c83203e2 100644
--- a/ui/app/AppLayouts/Communities/panels/OverviewSettingsChart.qml
+++ b/ui/app/AppLayouts/Communities/panels/OverviewSettingsChart.qml
@@ -38,7 +38,7 @@ StatusChartPanel {
 
         //visual properties
         readonly property string baseColor1: Theme.palette.baseColor1
-        readonly property string twentyPercentBaseColor1: Theme.palette.alphaColor(baseColor1, 0.2)
+        readonly property string twentyPercentBaseColor1: StatusColors.alphaColor(baseColor1, 0.2)
         readonly property string barColor: Theme.palette.primaryColor2
         readonly property string barBorderColor: Theme.palette.primaryColor1
     
diff --git a/ui/app/AppLayouts/Communities/panels/OverviewSettingsFooter.qml b/ui/app/AppLayouts/Communities/panels/OverviewSettingsFooter.qml
index df377cf4285..8240713ab25 100644
--- a/ui/app/AppLayouts/Communities/panels/OverviewSettingsFooter.qml
+++ b/ui/app/AppLayouts/Communities/panels/OverviewSettingsFooter.qml
@@ -113,7 +113,7 @@ Control {
         State {
             name: "isPendingOwnershipRequest"
             when: root.isPendingOwnershipRequest
-            PropertyChanges { target: d; indicatorBgColor: Theme.palette.alphaColor(root.communityColor, 0.1) }
+            PropertyChanges { target: d; indicatorBgColor: StatusColors.alphaColor(root.communityColor, 0.1) }
             PropertyChanges { target: d; indicatorColor: root.communityColor }
             PropertyChanges { target: d; paragraphTitle: qsTr("Finalise your ownership of the %1 Community").arg(root.communityName) }
             PropertyChanges { target: d; paragraphSubtitle: qsTr("You currently hodl the Owner token for %1. Make your device the control node to finalise ownership.").arg(root.communityName) }
diff --git a/ui/app/AppLayouts/Communities/panels/OverviewSettingsPanel.qml b/ui/app/AppLayouts/Communities/panels/OverviewSettingsPanel.qml
index 5fe63a69b8f..7598b9107f3 100644
--- a/ui/app/AppLayouts/Communities/panels/OverviewSettingsPanel.qml
+++ b/ui/app/AppLayouts/Communities/panels/OverviewSettingsPanel.qml
@@ -93,7 +93,7 @@ StackLayout {
                         id: nameText
                         objectName: "communityOverviewSettingsCommunityName"
                         Layout.fillWidth: true
-                        font.pixelSize: Theme.fontSize28
+                        font.pixelSize: Theme.fontSize(28)
                         font.bold: true
                         font.letterSpacing: -0.4
                         color: Theme.palette.directColor1
diff --git a/ui/app/AppLayouts/Communities/panels/PrivilegedTokenArtworkPanel.qml b/ui/app/AppLayouts/Communities/panels/PrivilegedTokenArtworkPanel.qml
index 183900682c6..408f5ad5fbd 100644
--- a/ui/app/AppLayouts/Communities/panels/PrivilegedTokenArtworkPanel.qml
+++ b/ui/app/AppLayouts/Communities/panels/PrivilegedTokenArtworkPanel.qml
@@ -72,7 +72,7 @@ Control {
             anchors.topMargin: -height/2
             height: 20
             text: qsTr("Included")
-            font.pixelSize: Theme.fontSize11
+            font.pixelSize: Theme.fontSize(11)
             font.bold: true
             isReadonly: true
             background: Rectangle {
diff --git a/ui/app/AppLayouts/Communities/panels/TokenHoldersList.qml b/ui/app/AppLayouts/Communities/panels/TokenHoldersList.qml
index 4c7896953f3..a6a5c9e8b93 100644
--- a/ui/app/AppLayouts/Communities/panels/TokenHoldersList.qml
+++ b/ui/app/AppLayouts/Communities/panels/TokenHoldersList.qml
@@ -204,7 +204,7 @@ Item {
                         asset.name: model.imageSource
                         asset.isImage: true
                         asset.isLetterIdenticon: !asset.name
-                        asset.color: Theme.palette.getColor("red2")
+                        asset.color: StatusColors.getColor("red2")
                     }
 
                     TokenHolderNumberCell {
diff --git a/ui/app/AppLayouts/Communities/panels/TokenInfoPanel.qml b/ui/app/AppLayouts/Communities/panels/TokenInfoPanel.qml
index ddd72aef146..0a686e72c21 100644
--- a/ui/app/AppLayouts/Communities/panels/TokenInfoPanel.qml
+++ b/ui/app/AppLayouts/Communities/panels/TokenInfoPanel.qml
@@ -277,7 +277,7 @@ Control {
 
                         height: 24
                         width: height
-                        source: token.chainIcon ? Theme.svg(token.chainIcon) : undefined
+                        source: token.chainIcon ? Assets.svg(token.chainIcon) : undefined
                     }
 
                     StatusBaseText {
diff --git a/ui/app/AppLayouts/Communities/panels/WelcomeBannerPanel.qml b/ui/app/AppLayouts/Communities/panels/WelcomeBannerPanel.qml
index ecdac081adc..a51102519ce 100644
--- a/ui/app/AppLayouts/Communities/panels/WelcomeBannerPanel.qml
+++ b/ui/app/AppLayouts/Communities/panels/WelcomeBannerPanel.qml
@@ -40,7 +40,7 @@ Rectangle {
         anchors.top: parent.top
         anchors.topMargin: -6
         anchors.horizontalCenter: parent.horizontalCenter
-        source: Theme.svg("chatEmptyHeader")
+        source: Assets.svg("chatEmptyHeader")
         width: 66
         height: 50
     }
diff --git a/ui/app/AppLayouts/Communities/popups/HoldingsDropdown.qml b/ui/app/AppLayouts/Communities/popups/HoldingsDropdown.qml
index bfd85f2ddce..6a0b2097844 100644
--- a/ui/app/AppLayouts/Communities/popups/HoldingsDropdown.qml
+++ b/ui/app/AppLayouts/Communities/popups/HoldingsDropdown.qml
@@ -424,7 +424,7 @@ StatusDropdown {
 
                     const chainName = asset.chainName ?? ""
                     const chainIcon = asset.chainIcon
-                                    ? Theme.svg(asset.chainIcon) : ""
+                                    ? Assets.svg(asset.chainIcon) : ""
 
                     if (!chainName)
                         return
@@ -500,7 +500,7 @@ StatusDropdown {
 
                     const chainName = collectible.chainName ?? ""
                     const chainIcon = collectible.chainIcon
-                                    ? Theme.svg(collectible.chainIcon) : ""
+                                    ? Assets.svg(collectible.chainIcon) : ""
 
                     if (!chainName)
                         return
diff --git a/ui/app/AppLayouts/Communities/views/CommunitiesGridView.qml b/ui/app/AppLayouts/Communities/views/CommunitiesGridView.qml
index 979e90a76aa..59cea1b9877 100644
--- a/ui/app/AppLayouts/Communities/views/CommunitiesGridView.qml
+++ b/ui/app/AppLayouts/Communities/views/CommunitiesGridView.qml
@@ -49,7 +49,7 @@ StatusScrollView {
         readonly property real scale: Math.min(1, root.availableWidth / minWidth)
 
         Behavior on delegateWidth {
-            PropertyAnimation { duration: Theme.AnimationDuration.Fast }
+            PropertyAnimation { duration: ThemeUtils.AnimationDuration.Fast }
         }
 
         // URLs:
@@ -193,7 +193,7 @@ StatusScrollView {
                 NumberAnimation { properties: "x,y"; }
             }
             add: Transition {
-                NumberAnimation { properties: "x,y"; from: 0; duration: Theme.AnimationDuration.Fast }
+                NumberAnimation { properties: "x,y"; from: 0; duration: ThemeUtils.AnimationDuration.Fast }
             }
         }
 
@@ -240,7 +240,7 @@ StatusScrollView {
                 NumberAnimation { properties: "x,y"; }
             }
             add: Transition {
-                NumberAnimation { properties: "x,y"; from: 0; duration: Theme.AnimationDuration.Fast }
+                NumberAnimation { properties: "x,y"; from: 0; duration: ThemeUtils.AnimationDuration.Fast }
             }
         }
 
diff --git a/ui/app/AppLayouts/Communities/views/EditAirdropView.qml b/ui/app/AppLayouts/Communities/views/EditAirdropView.qml
index 2f44689b124..8d033c2a447 100644
--- a/ui/app/AppLayouts/Communities/views/EditAirdropView.qml
+++ b/ui/app/AppLayouts/Communities/views/EditAirdropView.qml
@@ -178,7 +178,7 @@ StatusScrollView {
                 tokenImage: modelItem.iconSource,
                 networkId: modelItem.chainId,
                 networkText: modelItem.chainName,
-                networkImage: Theme.svg(modelItem.chainIcon),
+                networkImage: Assets.svg(modelItem.chainIcon),
                 remainingSupply: modelItem.remainingSupply,
                 multiplierIndex: modelItem.multiplierIndex,
                 infiniteSupply: modelItem.infiniteSupply,
@@ -269,7 +269,7 @@ StatusScrollView {
             property int editedIndex: -1
 
             Layout.fillWidth: true
-            icon: Theme.svg("token")
+            icon: Assets.svg("token")
             title: qsTr("What")
             placeholderText: qsTr("Example: 1 SOCK")
             addButton.visible: model.count < d.maxAirdropTokens
diff --git a/ui/app/AppLayouts/Communities/views/EditCommunityTokenView.qml b/ui/app/AppLayouts/Communities/views/EditCommunityTokenView.qml
index 6ef5d52f879..79e9a92e6cb 100644
--- a/ui/app/AppLayouts/Communities/views/EditCommunityTokenView.qml
+++ b/ui/app/AppLayouts/Communities/views/EditCommunityTokenView.qml
@@ -272,7 +272,7 @@ StatusScrollView {
                     asset.height: 24
                     asset.width: asset.height
                     asset.isImage: true
-                    asset.name: Theme.svg(token.chainIcon)
+                    asset.name: Assets.svg(token.chainIcon)
                     active: true
                     visible: active
                 }
diff --git a/ui/app/AppLayouts/Communities/views/EditPermissionView.qml b/ui/app/AppLayouts/Communities/views/EditPermissionView.qml
index 1e19811944b..52f40e12700 100644
--- a/ui/app/AppLayouts/Communities/views/EditPermissionView.qml
+++ b/ui/app/AppLayouts/Communities/views/EditPermissionView.qml
@@ -198,7 +198,7 @@ StatusScrollView {
             Layout.maximumWidth: root.preferredContentWidth
             Layout.rightMargin: root.internalRightPadding
 
-            icon: Theme.svg("contact_verified")
+            icon: Assets.svg("contact_verified")
             title: qsTr("Who holds")
             placeholderText: qsTr("Example: 10 SNT")
             tagLeftPadding: 2
@@ -398,7 +398,7 @@ StatusScrollView {
 
             title: qsTr("Is allowed to")
             placeholderText: qsTr("Example: View and post")
-            icon: Theme.svg("profile/security")
+            icon: Assets.svg("profile/security")
 
             readonly property bool empty:
                 d.dirtyValues.permissionType === PermissionTypes.Type.None
@@ -490,7 +490,7 @@ StatusScrollView {
             addButton.visible: editable
             itemsClickable: editable
             visible: root.showChannelSelector
-            icon: d.isCommunityPermission ? Theme.svg("communities") : Theme.svg("create-category")
+            icon: d.isCommunityPermission ? Assets.svg("communities") : Assets.svg("create-category")
             title: qsTr("In")
             placeholderText: qsTr("Example: `#general` channel")
 
diff --git a/ui/app/AppLayouts/Communities/views/HoldingsSelectionModel.qml b/ui/app/AppLayouts/Communities/views/HoldingsSelectionModel.qml
index 3fdf6732cdd..d92f6978a14 100644
--- a/ui/app/AppLayouts/Communities/views/HoldingsSelectionModel.qml
+++ b/ui/app/AppLayouts/Communities/views/HoldingsSelectionModel.qml
@@ -68,7 +68,7 @@ SortFilterProxyModel {
 
             function getIcon(type, key) {
                 if (type === Constants.TokenType.ENS)
-                    return Theme.png("tokens/ENS")
+                    return Assets.png("tokens/ENS")
 
                 const model = type === Constants.TokenType.ERC20
                             ? assetsModel : collectiblesModel
diff --git a/ui/app/AppLayouts/Communities/views/MintedTokensView.qml b/ui/app/AppLayouts/Communities/views/MintedTokensView.qml
index c729716ca22..e8e69a00cab 100644
--- a/ui/app/AppLayouts/Communities/views/MintedTokensView.qml
+++ b/ui/app/AppLayouts/Communities/views/MintedTokensView.qml
@@ -122,7 +122,7 @@ StatusScrollView {
 
                 objectName: "introPanel"
 
-                image: Theme.png("community/mint2_1")
+                image: Assets.png("community/mint2_1")
                 title: qsTr("Community tokens")
                 subtitle: qsTr("You can mint custom tokens and import tokens for your community")
                 checkersModel: [
diff --git a/ui/app/AppLayouts/Communities/views/PermissionsView.qml b/ui/app/AppLayouts/Communities/views/PermissionsView.qml
index c7ddac861d8..c472169493a 100644
--- a/ui/app/AppLayouts/Communities/views/PermissionsView.qml
+++ b/ui/app/AppLayouts/Communities/views/PermissionsView.qml
@@ -84,7 +84,7 @@ ColumnLayout {
 
         visible: (root.count === 0 && root.allowIntroPanel)
 
-        image: Theme.png("community/permissions2_3")
+        image: Assets.png("community/permissions2_3")
         title: qsTr("Permissions")
         subtitle: qsTr("You can manage your community by creating and issuing membership and access permissions")
         checkersModel: [
diff --git a/ui/app/AppLayouts/HomePage/HomePage.qml b/ui/app/AppLayouts/HomePage/HomePage.qml
index c8aacfecbc6..2d76f194c95 100644
--- a/ui/app/AppLayouts/HomePage/HomePage.qml
+++ b/ui/app/AppLayouts/HomePage/HomePage.qml
@@ -98,7 +98,7 @@ Control {
                 objectName: "homeSearchField"
                 anchors.fill: parent
 
-                font.pixelSize: d.isNarrowView ? Theme.fontSize23 : Theme.fontSize27
+                font.pixelSize: d.isNarrowView ? Theme.fontSize(23) : Theme.fontSize(27)
 
                 StatusBaseText {
                     id: placeholderText
diff --git a/ui/app/AppLayouts/HomePage/HomePageDock.qml b/ui/app/AppLayouts/HomePage/HomePageDock.qml
index 9183203ae95..c6f70f57256 100644
--- a/ui/app/AppLayouts/HomePage/HomePageDock.qml
+++ b/ui/app/AppLayouts/HomePage/HomePageDock.qml
@@ -120,7 +120,7 @@ Control {
             SequentialAnimation {
                 id: removeAnimation
                 PropertyAction { target: delegateLoader; property: "ListView.delayRemove"; value: true }
-                NumberAnimation { target: delegateLoader; property: "scale"; to: 0; duration: Theme.AnimationDuration.Default; easing.type: Easing.InOutQuad }
+                NumberAnimation { target: delegateLoader; property: "scale"; to: 0; duration: ThemeUtils.AnimationDuration.Default; easing.type: Easing.InOutQuad }
                 PropertyAction { target: delegateLoader; property: "ListView.delayRemove"; value: false }
             }
 
@@ -129,7 +129,7 @@ Control {
 
         Behavior on implicitWidth {
             enabled: d.componentComplete
-            PropertyAnimation { duration: Theme.AnimationDuration.Fast }
+            PropertyAnimation { duration: ThemeUtils.AnimationDuration.Fast }
         }
     }
 
diff --git a/ui/app/AppLayouts/HomePage/HomePageDockButton.qml b/ui/app/AppLayouts/HomePage/HomePageDockButton.qml
index 08ec56f7ff9..f47162fe680 100644
--- a/ui/app/AppLayouts/HomePage/HomePageDockButton.qml
+++ b/ui/app/AppLayouts/HomePage/HomePageDockButton.qml
@@ -29,8 +29,8 @@ ToolButton {
     implicitHeight: 64
 
     padding: Theme.defaultSmallPadding
-    opacity: pressed || down ? Theme.pressedOpacity : enabled ? 1 : Theme.disabledOpacity
-    Behavior on opacity { NumberAnimation { duration: Theme.AnimationDuration.Fast } }
+    opacity: pressed || down ? ThemeUtils.pressedOpacity : enabled ? 1 : ThemeUtils.disabledOpacity
+    Behavior on opacity { NumberAnimation { duration: ThemeUtils.AnimationDuration.Fast } }
 
     icon.width: 36
     icon.height: 36
@@ -38,7 +38,7 @@ ToolButton {
     background: Rectangle {
         id: background
         color: hovered ? Theme.palette.directColor7 : Theme.palette.directColor8
-        Behavior on color { ColorAnimation { duration: Theme.AnimationDuration.Fast } }
+        Behavior on color { ColorAnimation { duration: ThemeUtils.AnimationDuration.Fast } }
         radius: Theme.defaultSmallPadding * 2
 
         // top right corner
@@ -47,7 +47,7 @@ ToolButton {
             height: root.notificationsCount ? implicitHeight : 12 + border.width
             border.width: 2
             border.color: parent.color
-            Behavior on color { ColorAnimation { duration: Theme.AnimationDuration.Fast } }
+            Behavior on color { ColorAnimation { duration: ThemeUtils.AnimationDuration.Fast } }
             anchors.right: parent.right
             anchors.rightMargin: root.notificationsCount ? -2 : 0
             anchors.top: parent.top
@@ -63,7 +63,7 @@ ToolButton {
         asset.letterSize: Theme.secondaryAdditionalTextSize
         asset.emoji: root.pinned && (root.sectionType === Constants.appSection.wallet || root.chatType === Constants.chatType.communityChat) ? root.icon.name : ""
         asset.color: root.icon.color
-        Behavior on asset.color { ColorAnimation { duration: Theme.AnimationDuration.Fast } }
+        Behavior on asset.color { ColorAnimation { duration: ThemeUtils.AnimationDuration.Fast } }
         asset.name: asset.emoji ? "" : root.icon.name
         asset.bgRadius: root.pinned && root.sectionType === Constants.appSection.wallet ? Theme.defaultPadding : asset.bgWidth/2
         name: root.text
diff --git a/ui/app/AppLayouts/HomePage/HomePageGrid.qml b/ui/app/AppLayouts/HomePage/HomePageGrid.qml
index 91ba5995ae0..9aeedcd53c5 100644
--- a/ui/app/AppLayouts/HomePage/HomePageGrid.qml
+++ b/ui/app/AppLayouts/HomePage/HomePageGrid.qml
@@ -60,11 +60,11 @@ StatusScrollView {
     property int delegateWidth: 160
     property int minItemsPerRow: 3
     Behavior on delegateWidth {
-        PropertyAnimation { duration: Theme.AnimationDuration.Fast }
+        PropertyAnimation { duration: ThemeUtils.AnimationDuration.Fast }
     }
     property int delegateHeight: 160
     Behavior on delegateHeight {
-        PropertyAnimation { duration: Theme.AnimationDuration.Fast }
+        PropertyAnimation { duration: ThemeUtils.AnimationDuration.Fast }
     }
 
     signal itemActivated(string key, int sectionType, string itemId)
@@ -249,7 +249,7 @@ StatusScrollView {
             }
             add: Transition {
                 enabled: d.positioningComplete
-                NumberAnimation { properties: "x,y"; from: 0; duration: Theme.AnimationDuration.Fast }
+                NumberAnimation { properties: "x,y"; from: 0; duration: ThemeUtils.AnimationDuration.Fast }
             }
         }
     }
diff --git a/ui/app/AppLayouts/HomePage/HomePageSearchField.qml b/ui/app/AppLayouts/HomePage/HomePageSearchField.qml
index b977cb01810..6c350d98a88 100644
--- a/ui/app/AppLayouts/HomePage/HomePageSearchField.qml
+++ b/ui/app/AppLayouts/HomePage/HomePageSearchField.qml
@@ -10,7 +10,7 @@ StatusTextField {
     topPadding: 12
     bottomPadding: 12
     background: null
-    font.pixelSize: Theme.fontSize27
+    font.pixelSize: Theme.fontSize(27)
     font.weight: Font.DemiBold
 
     StatusClearButton {
diff --git a/ui/app/AppLayouts/HomePage/HomePageToolButton.qml b/ui/app/AppLayouts/HomePage/HomePageToolButton.qml
index 7d4845646e3..e56863eadf0 100644
--- a/ui/app/AppLayouts/HomePage/HomePageToolButton.qml
+++ b/ui/app/AppLayouts/HomePage/HomePageToolButton.qml
@@ -18,10 +18,10 @@ AbstractButton {
     icon.width: 20
     icon.height: 20
     icon.color: hovered ? Theme.palette.primaryColor1 : Theme.palette.primaryColor2
-    Behavior on icon.color { ColorAnimation { duration: Theme.AnimationDuration.Fast } }
+    Behavior on icon.color { ColorAnimation { duration: ThemeUtils.AnimationDuration.Fast } }
 
-    opacity: pressed || down ? Theme.pressedOpacity : enabled ? 1 : Theme.disabledOpacity
-    Behavior on opacity { NumberAnimation { duration: Theme.AnimationDuration.Fast } }
+    opacity: pressed || down ? ThemeUtils.pressedOpacity : enabled ? 1 : ThemeUtils.disabledOpacity
+    Behavior on opacity { NumberAnimation { duration: ThemeUtils.AnimationDuration.Fast } }
 
     background: Rectangle {
         color: Theme.palette.baseColor5
diff --git a/ui/app/AppLayouts/HomePage/delegates/HomePageGridDAppItem.qml b/ui/app/AppLayouts/HomePage/delegates/HomePageGridDAppItem.qml
index 681cae7f41e..b47f2a84bcb 100644
--- a/ui/app/AppLayouts/HomePage/delegates/HomePageGridDAppItem.qml
+++ b/ui/app/AppLayouts/HomePage/delegates/HomePageGridDAppItem.qml
@@ -22,11 +22,11 @@ HomePageGridItem {
 
     background: Rectangle {
         color: hovered ? Qt.lighter(Theme.palette.baseColor4, 1.5) : Theme.palette.baseColor4
-        Behavior on color { ColorAnimation { duration: Theme.AnimationDuration.Fast } }
+        Behavior on color { ColorAnimation { duration: ThemeUtils.AnimationDuration.Fast } }
         radius: Theme.padding
 
-        opacity: pressed || down ? Theme.pressedOpacity : enabled ? 1 : Theme.disabledOpacity
-        Behavior on opacity { NumberAnimation { duration: Theme.AnimationDuration.Fast } }
+        opacity: pressed || down ? ThemeUtils.pressedOpacity : enabled ? 1 : ThemeUtils.disabledOpacity
+        Behavior on opacity { NumberAnimation { duration: ThemeUtils.AnimationDuration.Fast } }
     }
 
     iconLoaderComponent: StatusSmartIdenticon {
diff --git a/ui/app/AppLayouts/HomePage/delegates/HomePageGridItem.qml b/ui/app/AppLayouts/HomePage/delegates/HomePageGridItem.qml
index 48a5857d329..c2cf79f5a9b 100644
--- a/ui/app/AppLayouts/HomePage/delegates/HomePageGridItem.qml
+++ b/ui/app/AppLayouts/HomePage/delegates/HomePageGridItem.qml
@@ -51,7 +51,7 @@ AbstractButton {
         radius: Theme.defaultPadding
         spread: 0.1
         color: root.hovered ? Theme.palette.backdropColor : Theme.palette.dropShadow
-        Behavior on color { ColorAnimation { duration: Theme.AnimationDuration.Fast } }
+        Behavior on color { ColorAnimation { duration: ThemeUtils.AnimationDuration.Fast } }
     }
 
     background: Item {
@@ -61,14 +61,14 @@ AbstractButton {
             width: parent.width
             height: 40 + radius*2 // draw under the rect below
             color: root.color
-            Behavior on color { ColorAnimation { duration: Theme.AnimationDuration.Fast } }
+            Behavior on color { ColorAnimation { duration: ThemeUtils.AnimationDuration.Fast } }
             radius: Theme.defaultPadding
             image.source: root.banner
             image.verticalAlignment: Image.AlignTop
             image.fillMode: Image.Tile
 
-            opacity: pressed || down ? Theme.pressedOpacity : enabled ? 1 : Theme.disabledOpacity
-            Behavior on opacity { NumberAnimation { duration: Theme.AnimationDuration.Fast } }
+            opacity: pressed || down ? ThemeUtils.pressedOpacity : enabled ? 1 : ThemeUtils.disabledOpacity
+            Behavior on opacity { NumberAnimation { duration: ThemeUtils.AnimationDuration.Fast } }
         }
 
         // rect overlapping the above image
@@ -80,7 +80,7 @@ AbstractButton {
             width: parent.width
 
             color: hovered ? Qt.lighter(Theme.palette.baseColor4, 1.5) : Theme.palette.baseColor4
-            Behavior on color { ColorAnimation { duration: Theme.AnimationDuration.Fast } }
+            Behavior on color { ColorAnimation { duration: ThemeUtils.AnimationDuration.Fast } }
 
             radius: mainBgImage.radius
         }
@@ -171,7 +171,7 @@ AbstractButton {
             spacing: Theme.defaultHalfPadding
             visible: opacity > 0
             opacity: root.hovered || root.pinned ? 1 : 0
-            Behavior on opacity { OpacityAnimator { duration: Theme.AnimationDuration.Fast } }
+            Behavior on opacity { OpacityAnimator { duration: ThemeUtils.AnimationDuration.Fast } }
             action: pinAction
         }
     }
diff --git a/ui/app/AppLayouts/HomePage/delegates/HomePageGridWalletItem.qml b/ui/app/AppLayouts/HomePage/delegates/HomePageGridWalletItem.qml
index e065b422746..fcd57ee92b4 100644
--- a/ui/app/AppLayouts/HomePage/delegates/HomePageGridWalletItem.qml
+++ b/ui/app/AppLayouts/HomePage/delegates/HomePageGridWalletItem.qml
@@ -20,11 +20,11 @@ HomePageGridItem {
 
     background: Rectangle {
         color: hovered ? Qt.lighter(Theme.palette.baseColor4, 1.5) : Theme.palette.baseColor4
-        Behavior on color { ColorAnimation { duration: Theme.AnimationDuration.Fast } }
+        Behavior on color { ColorAnimation { duration: ThemeUtils.AnimationDuration.Fast } }
         radius: Theme.padding
 
-        opacity: pressed || down ? Theme.pressedOpacity : enabled ? 1 : Theme.disabledOpacity
-        Behavior on opacity { NumberAnimation { duration: Theme.AnimationDuration.Fast } }
+        opacity: pressed || down ? ThemeUtils.pressedOpacity : enabled ? 1 : ThemeUtils.disabledOpacity
+        Behavior on opacity { NumberAnimation { duration: ThemeUtils.AnimationDuration.Fast } }
     }
 
     iconLoaderComponent: StatusLetterIdenticon {
diff --git a/ui/app/AppLayouts/Market/MarketLayout.qml b/ui/app/AppLayouts/Market/MarketLayout.qml
index 309036d44bb..0f2232b6378 100644
--- a/ui/app/AppLayouts/Market/MarketLayout.qml
+++ b/ui/app/AppLayouts/Market/MarketLayout.qml
@@ -63,7 +63,7 @@ StatusSectionLayout {
                 objectName: "heading"
                 text: qsTr("Market")
                 font.weight: Font.Bold
-                font.pixelSize: Theme.fontSize28
+                font.pixelSize: Theme.fontSize(28)
             }
             Item { Layout.fillWidth: true }
             StatusButton {
diff --git a/ui/app/AppLayouts/Node/NodeLayout.qml b/ui/app/AppLayouts/Node/NodeLayout.qml
index 81f7737c4bb..2206e193e47 100644
--- a/ui/app/AppLayouts/Node/NodeLayout.qml
+++ b/ui/app/AppLayouts/Node/NodeLayout.qml
@@ -40,7 +40,7 @@ StatusSectionLayout {
                 Layout.leftMargin: Theme.padding
                 Layout.fillWidth: true
                 font.weight: Font.Medium
-                font.pixelSize: Theme.fontSize20
+                font.pixelSize: Theme.fontSize(20)
             }
             StatusBaseText {
                 id: peerNumber
@@ -51,7 +51,7 @@ StatusSectionLayout {
                 Layout.leftMargin: Theme.padding
                 Layout.fillWidth: true
                 font.weight: Font.Medium
-                font.pixelSize: Theme.fontSize20
+                font.pixelSize: Theme.fontSize(20)
             }
         }
 
@@ -65,7 +65,7 @@ StatusSectionLayout {
                 Layout.leftMargin: Theme.padding
                 Layout.fillWidth: true
                 font.weight: Font.Medium
-                font.pixelSize: Theme.fontSize20
+                font.pixelSize: Theme.fontSize(20)
             }
             StatusTextArea {
                 id: mailserverLogTxt
@@ -89,7 +89,7 @@ StatusSectionLayout {
                 Layout.leftMargin: Theme.padding
                 Layout.fillWidth: true
                 font.weight: Font.Medium
-                font.pixelSize: Theme.fontSize20
+                font.pixelSize: Theme.fontSize(20)
             }
             StatusTextArea {
                 id: logsTxt
@@ -136,7 +136,7 @@ StatusSectionLayout {
                 Layout.leftMargin: Theme.padding
                 Layout.fillWidth: true
                 font.weight: Font.Medium
-                font.pixelSize: Theme.fontSize20
+                font.pixelSize: Theme.fontSize(20)
             }
             StatusBaseText {
                 id: test
@@ -147,7 +147,7 @@ StatusSectionLayout {
                 Layout.leftMargin: Theme.padding
                 Layout.fillWidth: true
                 font.weight: Font.Medium
-                font.pixelSize: Theme.fontSize20
+                font.pixelSize: Theme.fontSize(20)
             }
         }
 
diff --git a/ui/app/AppLayouts/Onboarding/KeycardFactoryResetFlow.qml b/ui/app/AppLayouts/Onboarding/KeycardFactoryResetFlow.qml
index 7ebf2364b38..6ca3ef7bdaa 100644
--- a/ui/app/AppLayouts/Onboarding/KeycardFactoryResetFlow.qml
+++ b/ui/app/AppLayouts/Onboarding/KeycardFactoryResetFlow.qml
@@ -25,7 +25,7 @@ OnboardingStackView {
         id: keycardResetAcks
 
         KeycardBasePage {
-            image.source: Theme.png("onboarding/keycard/reading")
+            image.source: Assets.png("onboarding/keycard/reading")
             title: qsTr("Factory reset Keycard")
             subtitle: "<font color='%1'>".arg(Theme.palette.dangerColor1) +
                       qsTr("All data including the stored key pair and derived accounts will be removed from the Keycard") +
@@ -63,8 +63,8 @@ OnboardingStackView {
             readonly property bool backAvailableHint: false
             readonly property bool resetting: root.keycardState === Onboarding.KeycardState.FactoryResetting
 
-            image.source: resetting ? Theme.png("onboarding/keycard/empty")
-                                    : Theme.png("onboarding/keycard/success")
+            image.source: resetting ? Assets.png("onboarding/keycard/empty")
+                                    : Assets.png("onboarding/keycard/success")
             title: resetting ? qsTr("Reseting Keycard") : qsTr("Keycard successfully factory reset")
             subtitle: resetting ? "" : qsTr("You can now use this Keycard like it's a brand-new, empty Keycard")
             infoText.text: resetting ? qsTr("Do not remove your Keycard or reader") : ""
diff --git a/ui/app/AppLayouts/Onboarding/UnblockWithPukFlow.qml b/ui/app/AppLayouts/Onboarding/UnblockWithPukFlow.qml
index 408d31f03e7..51b6cb59023 100644
--- a/ui/app/AppLayouts/Onboarding/UnblockWithPukFlow.qml
+++ b/ui/app/AppLayouts/Onboarding/UnblockWithPukFlow.qml
@@ -88,7 +88,7 @@ OnboardingStackView {
         id: keycardUnblockedPage
 
         KeycardBasePage {
-            image.source: Theme.png("onboarding/keycard/success")
+            image.source: Assets.png("onboarding/keycard/success")
             title: qsTr("Your Keycard is already unblocked!")
             buttons: [
                 StatusButton {
diff --git a/ui/app/AppLayouts/Onboarding/components/NewsCarousel.qml b/ui/app/AppLayouts/Onboarding/components/NewsCarousel.qml
index 1ef30008f29..7577ae31bee 100644
--- a/ui/app/AppLayouts/Onboarding/components/NewsCarousel.qml
+++ b/ui/app/AppLayouts/Onboarding/components/NewsCarousel.qml
@@ -36,7 +36,7 @@ Control {
             Layout.alignment: Qt.AlignHCenter
             fillMode: Image.PreserveAspectFit
             asynchronous: true
-            source: Theme.png(root.newsModel.get(pageIndicator.currentIndex).image)
+            source: Assets.png(root.newsModel.get(pageIndicator.currentIndex).image)
         }
 
         StatusBaseText {
diff --git a/ui/app/AppLayouts/Onboarding/controls/ListItemButton.qml b/ui/app/AppLayouts/Onboarding/controls/ListItemButton.qml
index ee554c67827..e1ddaf237b9 100644
--- a/ui/app/AppLayouts/Onboarding/controls/ListItemButton.qml
+++ b/ui/app/AppLayouts/Onboarding/controls/ListItemButton.qml
@@ -18,7 +18,7 @@ AbstractButton {
     icon.height: 32
 
     hoverEnabled: enabled
-    opacity: enabled ? 1.0 : Theme.disabledOpacity
+    opacity: enabled ? 1.0 : ThemeUtils.disabledOpacity
 
     background: Rectangle {
         color: root.hovered ? Theme.palette.backgroundHover : "transparent"
diff --git a/ui/app/AppLayouts/Onboarding/controls/LoginUserSelectorDelegate.qml b/ui/app/AppLayouts/Onboarding/controls/LoginUserSelectorDelegate.qml
index 7c321945e68..f62a8cffa2b 100644
--- a/ui/app/AppLayouts/Onboarding/controls/LoginUserSelectorDelegate.qml
+++ b/ui/app/AppLayouts/Onboarding/controls/LoginUserSelectorDelegate.qml
@@ -28,7 +28,7 @@ ItemDelegate {
     spacing: Theme.padding
 
     hoverEnabled: enabled
-    opacity: enabled ? 1 : Theme.disabledOpacity
+    opacity: enabled ? 1 : ThemeUtils.disabledOpacity
 
     background: Rectangle {
         color: root.hovered || root.highlighted ? Theme.palette.statusSelect.menuItemHoverBackgroundColor
diff --git a/ui/app/AppLayouts/Onboarding/pages/BackupSeedphraseIntro.qml b/ui/app/AppLayouts/Onboarding/pages/BackupSeedphraseIntro.qml
index caee3632448..183bed97015 100644
--- a/ui/app/AppLayouts/Onboarding/pages/BackupSeedphraseIntro.qml
+++ b/ui/app/AppLayouts/Onboarding/pages/BackupSeedphraseIntro.qml
@@ -23,13 +23,13 @@ OnboardingPage {
                 Layout.preferredHeight: 260
                 Layout.alignment: Qt.AlignHCenter
                 mipmap: true
-                source: Theme.png("onboarding/status_seedphrase")
+                source: Assets.png("onboarding/status_seedphrase")
             }
 
             StatusBaseText {
                 Layout.fillWidth: true
                 text: qsTr("Your recovery phrase has been created")
-                font.pixelSize: Theme.fontSize22
+                font.pixelSize: Theme.fontSize(22)
                 font.bold: true
                 wrapMode: Text.WordWrap
                 horizontalAlignment: Text.AlignHCenter
diff --git a/ui/app/AppLayouts/Onboarding/pages/BackupSeedphraseKeepOrDelete.qml b/ui/app/AppLayouts/Onboarding/pages/BackupSeedphraseKeepOrDelete.qml
index 7227700f368..4e49c6cc64c 100644
--- a/ui/app/AppLayouts/Onboarding/pages/BackupSeedphraseKeepOrDelete.qml
+++ b/ui/app/AppLayouts/Onboarding/pages/BackupSeedphraseKeepOrDelete.qml
@@ -34,7 +34,7 @@ OnboardingPage {
                 Layout.preferredHeight: 260
                 Layout.alignment: Qt.AlignHCenter
                 mipmap: true
-                source: Theme.png("onboarding/status_seedphrase")
+                source: Assets.png("onboarding/status_seedphrase")
             }
 
             StatusCheckBox {
diff --git a/ui/app/AppLayouts/Onboarding/pages/BackupSeedphraseOutro.qml b/ui/app/AppLayouts/Onboarding/pages/BackupSeedphraseOutro.qml
index 3974b61ce03..0a2b7a49de0 100644
--- a/ui/app/AppLayouts/Onboarding/pages/BackupSeedphraseOutro.qml
+++ b/ui/app/AppLayouts/Onboarding/pages/BackupSeedphraseOutro.qml
@@ -23,7 +23,7 @@ OnboardingPage {
             StatusBaseText {
                 Layout.fillWidth: true
                 text: qsTr("Confirm backup")
-                font.pixelSize: Theme.fontSize22
+                font.pixelSize: Theme.fontSize(22)
                 font.bold: true
                 wrapMode: Text.WordWrap
                 horizontalAlignment: Text.AlignHCenter
diff --git a/ui/app/AppLayouts/Onboarding/pages/BackupSeedphraseReveal.qml b/ui/app/AppLayouts/Onboarding/pages/BackupSeedphraseReveal.qml
index 5daad6e2f91..8d4e453fabf 100644
--- a/ui/app/AppLayouts/Onboarding/pages/BackupSeedphraseReveal.qml
+++ b/ui/app/AppLayouts/Onboarding/pages/BackupSeedphraseReveal.qml
@@ -41,7 +41,7 @@ OnboardingPage {
                 Layout.fillWidth: true
                 text: root.title
                 visible: !root.popupMode
-                font.pixelSize: Theme.fontSize22
+                font.pixelSize: Theme.fontSize(22)
                 font.bold: true
                 wrapMode: Text.WordWrap
                 horizontalAlignment: Text.AlignHCenter
@@ -142,7 +142,7 @@ OnboardingPage {
 
     TextMetrics {
         id: idxMetrics
-        font.family: Theme.monoFont.name
+        font.family: Fonts.monoFont.family
         font.pixelSize: Theme.primaryTextFontSize
         text: "99"
     }
diff --git a/ui/app/AppLayouts/Onboarding/pages/BackupSeedphraseVerify.qml b/ui/app/AppLayouts/Onboarding/pages/BackupSeedphraseVerify.qml
index 1c31592901c..dda4bcc8138 100644
--- a/ui/app/AppLayouts/Onboarding/pages/BackupSeedphraseVerify.qml
+++ b/ui/app/AppLayouts/Onboarding/pages/BackupSeedphraseVerify.qml
@@ -52,7 +52,7 @@ OnboardingPage {
                 Layout.fillWidth: true
                 text: root.title
                 visible: !root.popupMode
-                font.pixelSize: Theme.fontSize22
+                font.pixelSize: Theme.fontSize(22)
                 font.bold: true
                 wrapMode: Text.WordWrap
                 horizontalAlignment: Text.AlignHCenter
diff --git a/ui/app/AppLayouts/Onboarding/pages/ConvertKeycardAccountAcksPage.qml b/ui/app/AppLayouts/Onboarding/pages/ConvertKeycardAccountAcksPage.qml
index 00dadeca13e..fb73efbabed 100644
--- a/ui/app/AppLayouts/Onboarding/pages/ConvertKeycardAccountAcksPage.qml
+++ b/ui/app/AppLayouts/Onboarding/pages/ConvertKeycardAccountAcksPage.qml
@@ -30,7 +30,7 @@ OnboardingPage {
 
             StatusBaseText {
                 Layout.fillWidth: true
-                font.pixelSize: Theme.fontSize22
+                font.pixelSize: Theme.fontSize(22)
                 font.bold: true
                 wrapMode: Text.WordWrap
                 text: root.title
diff --git a/ui/app/AppLayouts/Onboarding/pages/ConvertKeycardAccountPage.qml b/ui/app/AppLayouts/Onboarding/pages/ConvertKeycardAccountPage.qml
index 585ab2a9a36..f9345a4bf9a 100644
--- a/ui/app/AppLayouts/Onboarding/pages/ConvertKeycardAccountPage.qml
+++ b/ui/app/AppLayouts/Onboarding/pages/ConvertKeycardAccountPage.qml
@@ -131,7 +131,7 @@ OnboardingPage {
 
             StatusBaseText {
                 Layout.fillWidth: true
-                font.pixelSize: Theme.fontSize22
+                font.pixelSize: Theme.fontSize(22)
                 font.bold: true
                 wrapMode: Text.WordWrap
                 text: root.title
diff --git a/ui/app/AppLayouts/Onboarding/pages/CreateKeycardProfilePage.qml b/ui/app/AppLayouts/Onboarding/pages/CreateKeycardProfilePage.qml
index 240ab0c7e89..dd4285a5c8f 100644
--- a/ui/app/AppLayouts/Onboarding/pages/CreateKeycardProfilePage.qml
+++ b/ui/app/AppLayouts/Onboarding/pages/CreateKeycardProfilePage.qml
@@ -27,7 +27,7 @@ OnboardingPage {
             StatusBaseText {
                 Layout.fillWidth: true
                 text: root.title
-                font.pixelSize: Theme.fontSize22
+                font.pixelSize: Theme.fontSize(22)
                 font.bold: true
                 wrapMode: Text.WordWrap
                 horizontalAlignment: Text.AlignHCenter
@@ -54,7 +54,7 @@ OnboardingPage {
                             Layout.alignment: Qt.AlignHCenter
                             Layout.preferredWidth: Math.min(252, parent.width)
                             Layout.preferredHeight: Math.min(164, height)
-                            source: Theme.png("onboarding/status_generate_keycard")
+                            source: Assets.png("onboarding/status_generate_keycard")
                             mipmap: true
                         }
                         StatusBaseText {
@@ -93,7 +93,7 @@ OnboardingPage {
                             Layout.fillWidth: true
                             text: qsTr("Use an existing recovery phrase")
                             subTitle: qsTr("To create your Keycard-stored profile ")
-                            icon.source: Theme.png("onboarding/create_profile_seed")
+                            icon.source: Assets.png("onboarding/create_profile_seed")
                             onClicked: root.createKeycardProfileWithExistingSeedphrase()
                         }
                     }
diff --git a/ui/app/AppLayouts/Onboarding/pages/CreateProfilePage.qml b/ui/app/AppLayouts/Onboarding/pages/CreateProfilePage.qml
index bacdf93f9cd..bb87d4ec01b 100644
--- a/ui/app/AppLayouts/Onboarding/pages/CreateProfilePage.qml
+++ b/ui/app/AppLayouts/Onboarding/pages/CreateProfilePage.qml
@@ -32,7 +32,7 @@ OnboardingPage {
             StatusBaseText {
                 Layout.fillWidth: true
                 text: root.title
-                font.pixelSize: Theme.fontSize22
+                font.pixelSize: Theme.fontSize(22)
                 font.bold: true
                 wrapMode: Text.WordWrap
                 horizontalAlignment: Text.AlignHCenter
@@ -54,7 +54,7 @@ OnboardingPage {
                         Layout.alignment: Qt.AlignHCenter
                         Layout.preferredWidth: Math.min(164, parent.width)
                         Layout.preferredHeight: Math.min(164, height)
-                        source: Theme.png("onboarding/status_key")
+                        source: Assets.png("onboarding/status_key")
                         mipmap: true
                     }
                     StatusBaseText {
@@ -94,7 +94,7 @@ OnboardingPage {
                         Layout.fillWidth: true
                         text: qsTr("Use a recovery phrase")
                         subTitle: qsTr("If you already have an Ethereum wallet")
-                        icon.source: Theme.png("onboarding/create_profile_seed")
+                        icon.source: Assets.png("onboarding/create_profile_seed")
                         onClicked: root.createProfileWithSeedphraseRequested()
                     }
                     Rectangle {
@@ -110,7 +110,7 @@ OnboardingPage {
                         Layout.fillWidth: true
                         text: qsTr("Use an empty Keycard")
                         subTitle: qsTr("Store your new profile keys on Keycard")
-                        icon.source: Theme.png("onboarding/create_profile_keycard")
+                        icon.source: Assets.png("onboarding/create_profile_keycard")
                         onClicked: root.createProfileWithEmptyKeycardRequested()
                         visible: root.isKeycardEnabled
                     }
diff --git a/ui/app/AppLayouts/Onboarding/pages/EnableBiometricsPage.qml b/ui/app/AppLayouts/Onboarding/pages/EnableBiometricsPage.qml
index 6431e59e448..7d954b95851 100644
--- a/ui/app/AppLayouts/Onboarding/pages/EnableBiometricsPage.qml
+++ b/ui/app/AppLayouts/Onboarding/pages/EnableBiometricsPage.qml
@@ -28,13 +28,13 @@ OnboardingPage {
                 Layout.alignment: Qt.AlignHCenter
                 mipmap: true
                 smooth: false
-                source: Theme.png("onboarding/enable_biometrics")
+                source: Assets.png("onboarding/enable_biometrics")
             }
 
             StatusBaseText {
                 Layout.fillWidth: true
                 text: root.title
-                font.pixelSize: Theme.fontSize22
+                font.pixelSize: Theme.fontSize(22)
                 font.bold: true
                 wrapMode: Text.WordWrap
                 horizontalAlignment: Text.AlignHCenter
diff --git a/ui/app/AppLayouts/Onboarding/pages/HelpUsImproveStatusPage.qml b/ui/app/AppLayouts/Onboarding/pages/HelpUsImproveStatusPage.qml
index c2a406567d3..ef6d47e6655 100644
--- a/ui/app/AppLayouts/Onboarding/pages/HelpUsImproveStatusPage.qml
+++ b/ui/app/AppLayouts/Onboarding/pages/HelpUsImproveStatusPage.qml
@@ -28,7 +28,7 @@ OnboardingPage {
             StatusBaseText {
                 Layout.fillWidth: true
                 text: root.title
-                font.pixelSize: Theme.fontSize22
+                font.pixelSize: Theme.fontSize(22)
                 font.bold: true
                 wrapMode: Text.WordWrap
                 horizontalAlignment: Text.AlignHCenter
@@ -47,7 +47,7 @@ OnboardingPage {
                 Layout.topMargin: Theme.bigPadding
                 Layout.bottomMargin: Theme.bigPadding
                 Layout.alignment: Qt.AlignHCenter
-                source: Theme.png("onboarding/status_totebag_artwork_1")
+                source: Assets.png("onboarding/status_totebag_artwork_1")
             }
 
             StatusButton {
diff --git a/ui/app/AppLayouts/Onboarding/pages/ImportLocalBackupPage.qml b/ui/app/AppLayouts/Onboarding/pages/ImportLocalBackupPage.qml
index d0a88c217c5..5563f07f7aa 100644
--- a/ui/app/AppLayouts/Onboarding/pages/ImportLocalBackupPage.qml
+++ b/ui/app/AppLayouts/Onboarding/pages/ImportLocalBackupPage.qml
@@ -30,13 +30,13 @@ OnboardingPage {
                 Layout.preferredWidth: 325
                 Layout.preferredHeight: 325
                 Layout.alignment: Qt.AlignHCenter
-                source: Theme.png("onboarding/status_chat")
+                source: Assets.png("onboarding/status_chat")
             }
 
             StatusBaseText {
                 Layout.fillWidth: true
                 text: root.title
-                font.pixelSize: Theme.fontSize22
+                font.pixelSize: Theme.fontSize(22)
                 font.bold: true
                 wrapMode: Text.WordWrap
                 horizontalAlignment: Text.AlignHCenter
diff --git a/ui/app/AppLayouts/Onboarding/pages/KeycardAddKeyPairPage.qml b/ui/app/AppLayouts/Onboarding/pages/KeycardAddKeyPairPage.qml
index 2fde30eac62..5e18a0fe5d3 100644
--- a/ui/app/AppLayouts/Onboarding/pages/KeycardAddKeyPairPage.qml
+++ b/ui/app/AppLayouts/Onboarding/pages/KeycardAddKeyPairPage.qml
@@ -26,7 +26,7 @@ OnboardingPage {
             }
             PropertyChanges {
                 target: image
-                source: Theme.png("onboarding/status_keycard_adding_keypair_success")
+                source: Assets.png("onboarding/status_keycard_adding_keypair_success")
             }
             PropertyChanges {
                 target: subImageText
@@ -58,7 +58,7 @@ OnboardingPage {
 
             StatusBaseText {
                 Layout.fillWidth: true
-                font.pixelSize: Theme.fontSize22
+                font.pixelSize: Theme.fontSize(22)
                 font.bold: true
                 wrapMode: Text.WordWrap
                 text: root.title
@@ -81,7 +81,7 @@ OnboardingPage {
                 Layout.preferredHeight: Math.min(211, height)
                 Layout.topMargin: Theme.bigPadding
                 Layout.bottomMargin: Theme.bigPadding
-                source: Theme.png("onboarding/status_keycard_adding_keypair")
+                source: Assets.png("onboarding/status_keycard_adding_keypair")
                 mipmap: true
             }
 
diff --git a/ui/app/AppLayouts/Onboarding/pages/KeycardBasePage.qml b/ui/app/AppLayouts/Onboarding/pages/KeycardBasePage.qml
index 921dbe59f9c..7ae6d72b8d4 100644
--- a/ui/app/AppLayouts/Onboarding/pages/KeycardBasePage.qml
+++ b/ui/app/AppLayouts/Onboarding/pages/KeycardBasePage.qml
@@ -33,7 +33,7 @@ OnboardingPage {
             StatusBaseText {
                 Layout.fillWidth: true
                 text: root.title
-                font.pixelSize: Theme.fontSize22
+                font.pixelSize: Theme.fontSize(22)
                 font.bold: true
                 wrapMode: Text.WordWrap
                 horizontalAlignment: Text.AlignHCenter
diff --git a/ui/app/AppLayouts/Onboarding/pages/KeycardCreatePinPage.qml b/ui/app/AppLayouts/Onboarding/pages/KeycardCreatePinPage.qml
index 5cf8cdc4ad5..53e45a0b732 100644
--- a/ui/app/AppLayouts/Onboarding/pages/KeycardCreatePinPage.qml
+++ b/ui/app/AppLayouts/Onboarding/pages/KeycardCreatePinPage.qml
@@ -17,7 +17,7 @@ KeycardBasePage {
 
     signal setPinRequested(string pin)
 
-    image.source: Theme.png("onboarding/keycard/reading")
+    image.source: Assets.png("onboarding/keycard/reading")
 
     buttons: [
         StatusPinInput {
@@ -112,7 +112,7 @@ KeycardBasePage {
                 }
                 PropertyChanges {
                     target: root
-                    image.source: Theme.png("onboarding/keycard/error")
+                    image.source: Assets.png("onboarding/keycard/error")
                 }
             },
             State {
@@ -153,7 +153,7 @@ KeycardBasePage {
                 }
                 PropertyChanges {
                     target: root
-                    image.source: Theme.png("onboarding/keycard/success")
+                    image.source: Assets.png("onboarding/keycard/success")
                 }
             }
         ]
diff --git a/ui/app/AppLayouts/Onboarding/pages/KeycardEmptyPage.qml b/ui/app/AppLayouts/Onboarding/pages/KeycardEmptyPage.qml
index 8a02925bbb4..f29df25388d 100644
--- a/ui/app/AppLayouts/Onboarding/pages/KeycardEmptyPage.qml
+++ b/ui/app/AppLayouts/Onboarding/pages/KeycardEmptyPage.qml
@@ -11,7 +11,7 @@ KeycardBasePage {
 
     title: qsTr("Keycard is empty")
     subtitle: qsTr("There is no profile key pair on this Keycard")
-    image.source: Theme.png("onboarding/keycard/error")
+    image.source: Assets.png("onboarding/keycard/error")
 
     buttons: [
         MaybeOutlineButton {
diff --git a/ui/app/AppLayouts/Onboarding/pages/KeycardEnterPinPage.qml b/ui/app/AppLayouts/Onboarding/pages/KeycardEnterPinPage.qml
index 9fc2e48bc95..1ba5a2ae6ba 100644
--- a/ui/app/AppLayouts/Onboarding/pages/KeycardEnterPinPage.qml
+++ b/ui/app/AppLayouts/Onboarding/pages/KeycardEnterPinPage.qml
@@ -51,7 +51,7 @@ KeycardBasePage {
 
                 PropertyChanges {
                     target: image
-                    source: Theme.png("onboarding/keycard/reading")
+                    source: Assets.png("onboarding/keycard/reading")
                 }
             },
             State { // entering, wrong pin
@@ -75,7 +75,7 @@ KeycardBasePage {
                 }
                 PropertyChanges {
                     target: image
-                    source: Theme.png("onboarding/keycard/error")
+                    source: Assets.png("onboarding/keycard/error")
                 }
             },
             State { // in progress
@@ -97,7 +97,7 @@ KeycardBasePage {
 
                 PropertyChanges {
                     target: image
-                    source: Theme.png("onboarding/keycard/reading")
+                    source: Assets.png("onboarding/keycard/reading")
                 }
             },
             State { // success
@@ -115,7 +115,7 @@ KeycardBasePage {
 
                 PropertyChanges {
                     target: image
-                    source: Theme.png("onboarding/keycard/success")
+                    source: Assets.png("onboarding/keycard/success")
                 }
             },
             State { // blocked
@@ -133,7 +133,7 @@ KeycardBasePage {
                 }
                 PropertyChanges {
                     target: image
-                    source: Theme.png("onboarding/keycard/error")
+                    source: Assets.png("onboarding/keycard/error")
                 }
                 PropertyChanges {
                     target: btnUnblockWithSeedphrase
diff --git a/ui/app/AppLayouts/Onboarding/pages/KeycardEnterPukPage.qml b/ui/app/AppLayouts/Onboarding/pages/KeycardEnterPukPage.qml
index 9cd249bf776..e0ef68b4e6e 100644
--- a/ui/app/AppLayouts/Onboarding/pages/KeycardEnterPukPage.qml
+++ b/ui/app/AppLayouts/Onboarding/pages/KeycardEnterPukPage.qml
@@ -20,7 +20,7 @@ KeycardBasePage {
     signal keycardPukEntered(string puk)
     signal keycardFactoryResetRequested()
 
-    image.source: Theme.png("onboarding/keycard/reading")
+    image.source: Assets.png("onboarding/keycard/reading")
 
     QtObject {
         id: d
@@ -82,7 +82,7 @@ KeycardBasePage {
             }
             PropertyChanges {
                 target: image
-                source: Theme.png("onboarding/keycard/error")
+                source: Assets.png("onboarding/keycard/error")
             }
             PropertyChanges {
                 target: btnFactoryReset
diff --git a/ui/app/AppLayouts/Onboarding/pages/KeycardErrorPage.qml b/ui/app/AppLayouts/Onboarding/pages/KeycardErrorPage.qml
index 910891e83fe..18d37b4821d 100644
--- a/ui/app/AppLayouts/Onboarding/pages/KeycardErrorPage.qml
+++ b/ui/app/AppLayouts/Onboarding/pages/KeycardErrorPage.qml
@@ -12,7 +12,7 @@ KeycardBasePage {
 
     title: qsTr("Communication with Keycard lost")
     subtitle: qsTr("There seems to be an issue communicating with your Keycard. Reinsert the card or reader and try again.")
-    image.source: Theme.png("onboarding/keycard/error")
+    image.source: Assets.png("onboarding/keycard/error")
 
     buttons: [
         MaybeOutlineButton {
diff --git a/ui/app/AppLayouts/Onboarding/pages/KeycardIntroPage.qml b/ui/app/AppLayouts/Onboarding/pages/KeycardIntroPage.qml
index c4ca3811179..35c033563c2 100644
--- a/ui/app/AppLayouts/Onboarding/pages/KeycardIntroPage.qml
+++ b/ui/app/AppLayouts/Onboarding/pages/KeycardIntroPage.qml
@@ -48,7 +48,7 @@ KeycardBasePage {
                 Layout.bottomMargin: -2
                 Layout.preferredWidth: 154
                 Layout.preferredHeight: 82
-                source: Theme.png("onboarding/status_keycard_multiple")
+                source: Assets.png("onboarding/status_keycard_multiple")
             }
             ColumnLayout {
                 Layout.fillWidth: true
@@ -115,7 +115,7 @@ KeycardBasePage {
             PropertyChanges {
                 target: root
                 title: qsTr("Plug in your Keycard reader")
-                image.source: Theme.png("onboarding/keycard/empty")
+                image.source: Assets.png("onboarding/keycard/empty")
             }
             PropertyChanges {
                 target: promoBanner
@@ -132,7 +132,7 @@ KeycardBasePage {
                                                                                 infoText.hoveredLink,
                                                                                 Theme.palette.baseColor1,
                                                                                 Theme.palette.primaryColor1))
-                image.source: Theme.png("onboarding/keycard/insert")
+                image.source: Assets.png("onboarding/keycard/insert")
             }
         },
         State {
@@ -141,7 +141,7 @@ KeycardBasePage {
             PropertyChanges {
                 target: root
                 title: qsTr("Reading Keycard...")
-                image.source: Theme.png("onboarding/keycard/reading")
+                image.source: Assets.png("onboarding/keycard/reading")
             }
         },
         // error states
@@ -152,7 +152,7 @@ KeycardBasePage {
                 target: root
                 title: qsTr("Oops this isn’t a Keycard")
                 subtitle: qsTr("Remove card and insert a Keycard")
-                image.source: Theme.png("onboarding/keycard/invalid")
+                image.source: Assets.png("onboarding/keycard/invalid")
             }
         },
         State {
@@ -162,7 +162,7 @@ KeycardBasePage {
                 target: root
                 title: qsTr("Smartcard reader service unavailable")
                 subtitle: qsTr("The Smartcard reader service (PCSC service), required for using Keycard, is not currently working. Ensure PCSC is installed and running and try again.")
-                image.source: Theme.png("onboarding/keycard/error")
+                image.source: Assets.png("onboarding/keycard/error")
             }
         },
         State {
@@ -172,7 +172,7 @@ KeycardBasePage {
                 target: root
                 title: qsTr("All pairing slots occupied")
                 subtitle: qsTr("Factory reset this Keycard or insert a different one")
-                image.source: Theme.png("onboarding/keycard/error")
+                image.source: Assets.png("onboarding/keycard/error")
             }
             PropertyChanges {
                 target: btnFactoryReset
@@ -186,7 +186,7 @@ KeycardBasePage {
                 target: root
                 title: "<font color='%1'>".arg(Theme.palette.dangerColor1) + qsTr("Keycard blocked") + "</font>"
                 subtitle: qsTr("The Keycard you have inserted is blocked, you will need to unblock it or insert a different one")
-                image.source: Theme.png("onboarding/keycard/error")
+                image.source: Assets.png("onboarding/keycard/error")
             }
             PropertyChanges {
                 target: btnUnblockWithPuk
@@ -208,7 +208,7 @@ KeycardBasePage {
                 target: root
                 title: "<font color='%1'>".arg(Theme.palette.dangerColor1) + qsTr("Keycard blocked") + "</font>"
                 subtitle: qsTr("The Keycard you have inserted is blocked, you will need to unblock it, factory reset or insert a different one")
-                image.source: Theme.png("onboarding/keycard/error")
+                image.source: Assets.png("onboarding/keycard/error")
             }
             PropertyChanges {
                 target: btnUnblockWithSeedphrase
diff --git a/ui/app/AppLayouts/Onboarding/pages/KeycardLostPage.qml b/ui/app/AppLayouts/Onboarding/pages/KeycardLostPage.qml
index 353d46b2490..82563c9368a 100644
--- a/ui/app/AppLayouts/Onboarding/pages/KeycardLostPage.qml
+++ b/ui/app/AppLayouts/Onboarding/pages/KeycardLostPage.qml
@@ -13,7 +13,7 @@ KeycardBasePage {
 
     title: qsTr("Lost Keycard")
     subtitle: qsTr("Sorry you've lost your Keycard")
-    image.source: Theme.png("onboarding/keycard/empty")
+    image.source: Assets.png("onboarding/keycard/empty")
 
     buttons: [
         StatusButton {
diff --git a/ui/app/AppLayouts/Onboarding/pages/KeycardNotEmptyPage.qml b/ui/app/AppLayouts/Onboarding/pages/KeycardNotEmptyPage.qml
index 83f50fa87b9..b80dfad9375 100644
--- a/ui/app/AppLayouts/Onboarding/pages/KeycardNotEmptyPage.qml
+++ b/ui/app/AppLayouts/Onboarding/pages/KeycardNotEmptyPage.qml
@@ -12,7 +12,7 @@ KeycardBasePage {
 
     title: qsTr("Keycard is not empty")
     subtitle: qsTr("You can’t use it to store new keys right now")
-    image.source: Theme.png("onboarding/keycard/error")
+    image.source: Assets.png("onboarding/keycard/error")
 
     buttons: [
         MaybeOutlineButton {
diff --git a/ui/app/AppLayouts/Onboarding/pages/LoginBySyncingPage.qml b/ui/app/AppLayouts/Onboarding/pages/LoginBySyncingPage.qml
index da9c4fd40b3..44e935b9799 100644
--- a/ui/app/AppLayouts/Onboarding/pages/LoginBySyncingPage.qml
+++ b/ui/app/AppLayouts/Onboarding/pages/LoginBySyncingPage.qml
@@ -27,7 +27,7 @@ OnboardingPage {
             StatusBaseText {
                 Layout.fillWidth: true
                 text: root.title
-                font.pixelSize: Theme.fontSize22
+                font.pixelSize: Theme.fontSize(22)
                 font.bold: true
                 wrapMode: Text.WordWrap
                 horizontalAlignment: Text.AlignHCenter
diff --git a/ui/app/AppLayouts/Onboarding/pages/LoginScreen.qml b/ui/app/AppLayouts/Onboarding/pages/LoginScreen.qml
index 444dcdc1ef8..9c355b87ae0 100644
--- a/ui/app/AppLayouts/Onboarding/pages/LoginScreen.qml
+++ b/ui/app/AppLayouts/Onboarding/pages/LoginScreen.qml
@@ -194,7 +194,7 @@ OnboardingPage {
                 Layout.preferredWidth: 90
                 Layout.preferredHeight: 90
                 Layout.alignment: Qt.AlignHCenter
-                source: Theme.png("status")
+                source: Assets.png("status")
                 mipmap: true
             }
 
@@ -202,7 +202,7 @@ OnboardingPage {
                 id: headerText
                 Layout.fillWidth: true
                 text: qsTr("Welcome back")
-                font.pixelSize: Theme.fontSize22
+                font.pixelSize: Theme.fontSize(22)
                 font.bold: true
                 wrapMode: Text.WordWrap
                 horizontalAlignment: Text.AlignHCenter
diff --git a/ui/app/AppLayouts/Onboarding/pages/NewAccountLoginPage.qml b/ui/app/AppLayouts/Onboarding/pages/NewAccountLoginPage.qml
index 88a34998023..f65e65ab739 100644
--- a/ui/app/AppLayouts/Onboarding/pages/NewAccountLoginPage.qml
+++ b/ui/app/AppLayouts/Onboarding/pages/NewAccountLoginPage.qml
@@ -37,7 +37,7 @@ OnboardingPage {
             StatusBaseText {
                 Layout.fillWidth: true
                 text: root.title
-                font.pixelSize: Theme.fontSize22
+                font.pixelSize: Theme.fontSize(22)
                 font.bold: true
                 wrapMode: Text.WordWrap
                 horizontalAlignment: Text.AlignHCenter
@@ -59,7 +59,7 @@ OnboardingPage {
                         Layout.alignment: Qt.AlignHCenter
                         Layout.preferredWidth: Math.min(250, parent.width)
                         Layout.preferredHeight: Math.min(250, height)
-                        source: Theme.png("onboarding/status_login_seedphrase")
+                        source: Assets.png("onboarding/status_login_seedphrase")
                         mipmap: true
                     }
                     StatusBaseText {
@@ -99,7 +99,7 @@ OnboardingPage {
                         Layout.fillWidth: true
                         text: qsTr("Log in by syncing") // FIXME wording, "Log in by pairing"?
                         subTitle: qsTr("If you have Status on another device")
-                        icon.source: Theme.png("onboarding/login_syncing")
+                        icon.source: Assets.png("onboarding/login_syncing")
                         onClicked: loginWithSyncAck.createObject(root).open()
                     }
                     Rectangle {
@@ -115,7 +115,7 @@ OnboardingPage {
                         Layout.fillWidth: true
                         text: qsTr("Log in with Keycard")
                         subTitle: qsTr("If your profile keys are stored on a Keycard")
-                        icon.source: Theme.png("onboarding/create_profile_keycard")
+                        icon.source: Assets.png("onboarding/create_profile_keycard")
                         onClicked: root.loginWithKeycardRequested()
                         visible: root.isKeycardEnabled
                     }
diff --git a/ui/app/AppLayouts/Onboarding/pages/SeedphrasePage.qml b/ui/app/AppLayouts/Onboarding/pages/SeedphrasePage.qml
index 96caee51deb..81801cdd05d 100644
--- a/ui/app/AppLayouts/Onboarding/pages/SeedphrasePage.qml
+++ b/ui/app/AppLayouts/Onboarding/pages/SeedphrasePage.qml
@@ -47,7 +47,7 @@ OnboardingPage {
                 StatusBaseText {
                     Layout.fillWidth: true
                     text: root.title
-                    font.pixelSize: Theme.fontSize22
+                    font.pixelSize: Theme.fontSize(22)
                     font.bold: true
                     wrapMode: Text.WordWrap
                     horizontalAlignment: Text.AlignHCenter
diff --git a/ui/app/AppLayouts/Onboarding/pages/SyncProgressPage.qml b/ui/app/AppLayouts/Onboarding/pages/SyncProgressPage.qml
index 0193ce67c23..e819d7eb27d 100644
--- a/ui/app/AppLayouts/Onboarding/pages/SyncProgressPage.qml
+++ b/ui/app/AppLayouts/Onboarding/pages/SyncProgressPage.qml
@@ -36,7 +36,7 @@ OnboardingPage {
             }
             PropertyChanges {
                 target: image
-                source: Theme.png("onboarding/status_sync_progress")
+                source: Assets.png("onboarding/status_sync_progress")
             }
             PropertyChanges {
                 target: subImageText
@@ -61,7 +61,7 @@ OnboardingPage {
             }
             PropertyChanges {
                 target: image
-                source: Theme.png("onboarding/status_sync_success")
+                source: Assets.png("onboarding/status_sync_success")
             }
             PropertyChanges {
                 target: loginButton
@@ -85,7 +85,7 @@ OnboardingPage {
             }
             PropertyChanges {
                 target: image
-                source: Theme.png("onboarding/status_sync_failed")
+                source: Assets.png("onboarding/status_sync_failed")
             }
             PropertyChanges {
                 target: tryAgainButton
@@ -113,7 +113,7 @@ OnboardingPage {
 
             StatusBaseText {
                 Layout.fillWidth: true
-                font.pixelSize: Theme.fontSize22
+                font.pixelSize: Theme.fontSize(22)
                 font.bold: true
                 wrapMode: Text.WordWrap
                 text: root.title
@@ -134,7 +134,7 @@ OnboardingPage {
                 Layout.preferredHeight: Math.min(214, height)
                 Layout.topMargin: Theme.bigPadding
                 Layout.bottomMargin: Theme.bigPadding
-                source: Theme.png("onboarding/status_generate_keys")
+                source: Assets.png("onboarding/status_generate_keys")
                 mipmap: true
             }
 
diff --git a/ui/app/AppLayouts/Onboarding/pages/WelcomePage.qml b/ui/app/AppLayouts/Onboarding/pages/WelcomePage.qml
index 8190251cff6..4fe0c71a7fd 100644
--- a/ui/app/AppLayouts/Onboarding/pages/WelcomePage.qml
+++ b/ui/app/AppLayouts/Onboarding/pages/WelcomePage.qml
@@ -89,7 +89,7 @@ OnboardingPage {
                         Layout.preferredWidth: 90
                         Layout.preferredHeight: 90
                         Layout.alignment: Qt.AlignHCenter
-                        source: Theme.png("status")
+                        source: Assets.png("status")
                         mipmap: true
                         layer.enabled: true
                         layer.effect: DropShadow {
@@ -106,7 +106,7 @@ OnboardingPage {
                         id: headerText
                         Layout.fillWidth: true
                         text: root.title
-                        font.pixelSize: Theme.fontSize40
+                        font.pixelSize: Theme.fontSize(40)
                         font.bold: true
                         wrapMode: Text.WordWrap
                         horizontalAlignment: Text.AlignHCenter
diff --git a/ui/app/AppLayouts/Profile/ProfileLayout.qml b/ui/app/AppLayouts/Profile/ProfileLayout.qml
index af2f1ccb6f3..bd76d6ed3f7 100644
--- a/ui/app/AppLayouts/Profile/ProfileLayout.qml
+++ b/ui/app/AppLayouts/Profile/ProfileLayout.qml
@@ -87,9 +87,9 @@ StatusSectionLayout {
 
     required property bool isCentralizedMetricsEnabled
 
-    required property int theme // Theme.Style.xxx
-    required property int fontSize // Theme.FontSize.xxx
-    required property int paddingFactor // Theme.PaddingFactor.xxx
+    required property int theme // ThemeUtils.Style.xxx
+    required property int fontSize // ThemeUtils.FontSize.xxx
+    required property int paddingFactor // ThemeUtils.PaddingFactor.xxx
 
     required property var whitelistedDomainsModel
  
diff --git a/ui/app/AppLayouts/Profile/controls/ShowcaseDelegate.qml b/ui/app/AppLayouts/Profile/controls/ShowcaseDelegate.qml
index b8786e0dc11..d67a104d617 100644
--- a/ui/app/AppLayouts/Profile/controls/ShowcaseDelegate.qml
+++ b/ui/app/AppLayouts/Profile/controls/ShowcaseDelegate.qml
@@ -48,7 +48,7 @@ StatusDraggableListItem {
     topInset: 0
     bottomInset: 0
     changeColorOnDragActive: false
-    bgColor: Theme.palette.getColor(Theme.palette.statusAppLayout.rightPanelBackgroundColor, 0.7)
+    bgColor: StatusColors.getColor(Theme.palette.statusAppLayout.rightPanelBackgroundColor, 0.7)
 
     icon.width: 40
     icon.height: 40
diff --git a/ui/app/AppLayouts/Profile/controls/StaticSocialLinkInput.qml b/ui/app/AppLayouts/Profile/controls/StaticSocialLinkInput.qml
index 8513a195afd..ed9f7533194 100644
--- a/ui/app/AppLayouts/Profile/controls/StaticSocialLinkInput.qml
+++ b/ui/app/AppLayouts/Profile/controls/StaticSocialLinkInput.qml
@@ -17,7 +17,7 @@ StatusInput {
     placeholderText: ProfileUtils.linkTypeToDescription(linkType)
     input.asset {
         name: root.icon
-        color: ProfileUtils.linkTypeColor(root.linkType)
+        color: ProfileUtils.linkTypeColor(root.linkType, root.Theme.palette)
         width: 20
         height: 20
     }
diff --git a/ui/app/AppLayouts/Profile/controls/WalletNetworkDelegate.qml b/ui/app/AppLayouts/Profile/controls/WalletNetworkDelegate.qml
index 46c73c32b9c..34ceece2799 100644
--- a/ui/app/AppLayouts/Profile/controls/WalletNetworkDelegate.qml
+++ b/ui/app/AppLayouts/Profile/controls/WalletNetworkDelegate.qml
@@ -33,7 +33,7 @@ StatusListItem {
     onClicked: d.toggleActive()
 
     title: chainName
-    asset.name: Theme.svg(iconUrl)
+    asset.name: Assets.svg(iconUrl)
     asset.isImage: true
     width: parent.width
     leftPadding: Theme.padding
diff --git a/ui/app/AppLayouts/Profile/panels/ProfileShowcasePanel.qml b/ui/app/AppLayouts/Profile/panels/ProfileShowcasePanel.qml
index 3981babc0d6..017df2f3ed2 100644
--- a/ui/app/AppLayouts/Profile/panels/ProfileShowcasePanel.qml
+++ b/ui/app/AppLayouts/Profile/panels/ProfileShowcasePanel.qml
@@ -357,7 +357,7 @@ DoubleFlickableWithFolding {
         background: Rectangle {
             id: shapeWrapper
 
-            color: dropArea.containsDrag ? Theme.palette.primaryColor3 : Theme.palette.getColor(Theme.palette.baseColor4, 0.7)
+            color: dropArea.containsDrag ? Theme.palette.primaryColor3 : StatusColors.getColor(Theme.palette.baseColor4, 0.7)
             radius: Theme.radius
             
             ShapeRectangle {
diff --git a/ui/app/AppLayouts/Profile/panels/ProfileSocialLinksPanel.qml b/ui/app/AppLayouts/Profile/panels/ProfileSocialLinksPanel.qml
index 08f6f08ec13..a46bc82bf54 100644
--- a/ui/app/AppLayouts/Profile/panels/ProfileSocialLinksPanel.qml
+++ b/ui/app/AppLayouts/Profile/panels/ProfileSocialLinksPanel.qml
@@ -156,8 +156,8 @@ Control {
                     title: ProfileUtils.linkTypeToShortText(draggableDelegate.linkType) || model.text
                     hasIcon: true
                     icon.name: draggableDelegate.iconName
-                    icon.color: ProfileUtils.linkTypeColor(draggableDelegate.linkType)
-                    assetBgColor: ProfileUtils.linkTypeBgColor(draggableDelegate.linkType)
+                    icon.color: ProfileUtils.linkTypeColor(draggableDelegate.linkType, root.Theme.palette)
+                    assetBgColor: ProfileUtils.linkTypeBgColor(draggableDelegate.linkType, root.Theme.palette)
                     actions: [
                         StatusLinkText {
                             Layout.fillWidth: true
diff --git a/ui/app/AppLayouts/Profile/popups/AddSocialLinkModal.qml b/ui/app/AppLayouts/Profile/popups/AddSocialLinkModal.qml
index 1fe6b49f258..4796b44d86d 100644
--- a/ui/app/AppLayouts/Profile/popups/AddSocialLinkModal.qml
+++ b/ui/app/AppLayouts/Profile/popups/AddSocialLinkModal.qml
@@ -86,8 +86,8 @@ StatusStackModal {
                 width: ListView.view.width
                 title: ProfileUtils.linkTypeToText(model.type) || qsTr("Custom link")
                 asset.name: model.icon
-                asset.color: ProfileUtils.linkTypeColor(model.type)
-                asset.bgColor: ProfileUtils.linkTypeBgColor(model.type)
+                asset.color: ProfileUtils.linkTypeColor(model.type, root.Theme.palette)
+                asset.bgColor: ProfileUtils.linkTypeBgColor(model.type, root.Theme.palette)
                 onClicked: {
                     customTitle.reset()
                     linkTarget.reset()
diff --git a/ui/app/AppLayouts/Profile/popups/ProfileShowcaseInfoPopup.qml b/ui/app/AppLayouts/Profile/popups/ProfileShowcaseInfoPopup.qml
index a4b782f5b83..d82a4de2d00 100644
--- a/ui/app/AppLayouts/Profile/popups/ProfileShowcaseInfoPopup.qml
+++ b/ui/app/AppLayouts/Profile/popups/ProfileShowcaseInfoPopup.qml
@@ -35,7 +35,7 @@ StatusDialog {
         IntroPanel {
             Layout.fillWidth: true
 
-            image: Theme.png("onboarding/welcome")
+            image: Assets.png("onboarding/welcome")
             imageWidth: 200
             imageBottomMargin: Theme.padding
             bottomPadding: 0
diff --git a/ui/app/AppLayouts/Profile/popups/SearchEngineModal.qml b/ui/app/AppLayouts/Profile/popups/SearchEngineModal.qml
index 7f11feb8e4d..4217b467ed6 100644
--- a/ui/app/AppLayouts/Profile/popups/SearchEngineModal.qml
+++ b/ui/app/AppLayouts/Profile/popups/SearchEngineModal.qml
@@ -49,7 +49,7 @@ StatusDialog {
                         implicitHeight: model.description ? 80 : 52
                         title: model.name
                         subTitle: model.description
-                        asset.name: Theme.svg(model.iconUrl)
+                        asset.name: Assets.svg(model.iconUrl)
                         asset.isImage: true
                         buttonGroup: searchEnginGroup
                         checked: accountSettings.selectedBrowserSearchEngineId === model.engineId
diff --git a/ui/app/AppLayouts/Profile/popups/networkSettings/DeactivateNetworkPopup.qml b/ui/app/AppLayouts/Profile/popups/networkSettings/DeactivateNetworkPopup.qml
index 7e35c6494c2..917f6a83ec2 100644
--- a/ui/app/AppLayouts/Profile/popups/networkSettings/DeactivateNetworkPopup.qml
+++ b/ui/app/AppLayouts/Profile/popups/networkSettings/DeactivateNetworkPopup.qml
@@ -15,7 +15,7 @@ StatusDialog {
     header: StatusDialogHeader {
         headline.title: qsTr("Disable %1 network").arg(chainName)
         leftComponent: StatusRoundedImage {
-            image.source: Theme.svg(root.iconUrl)
+            image.source: Assets.svg(root.iconUrl)
             width: 40
             height: 40
         }
diff --git a/ui/app/AppLayouts/Profile/views/AboutView.qml b/ui/app/AppLayouts/Profile/views/AboutView.qml
index acacf758340..071054b7352 100644
--- a/ui/app/AppLayouts/Profile/views/AboutView.qml
+++ b/ui/app/AppLayouts/Profile/views/AboutView.qml
@@ -62,7 +62,7 @@ SettingsContentBase {
                 id: statusIcon
                 width: 80
                 height: 80
-                source: root.isProduction ? Theme.png("status-logo-circle") : Theme.png("status-logo-dev-circle")
+                source: root.isProduction ? Assets.png("status-logo-circle") : Assets.png("status-logo-dev-circle")
                 anchors.horizontalCenter: parent.horizontalCenter
                 mipmap: true
             }
@@ -71,7 +71,7 @@ SettingsContentBase {
 
             StatusLinkText {
                 anchors.horizontalCenter: parent.horizontalCenter
-                font.pixelSize: Theme.fontSize22
+                font.pixelSize: Theme.fontSize(22)
                 font.bold: true
                 normalColor: Theme.palette.directColor1
                 text: root.currentVersion
diff --git a/ui/app/AppLayouts/Profile/views/AppearanceView.qml b/ui/app/AppLayouts/Profile/views/AppearanceView.qml
index 7cec98bebf4..6e79c28e899 100644
--- a/ui/app/AppLayouts/Profile/views/AppearanceView.qml
+++ b/ui/app/AppLayouts/Profile/views/AppearanceView.qml
@@ -15,9 +15,9 @@ import StatusQ.Controls as StatusQ
 SettingsContentBase {
     id: root
 
-    required property int theme // Theme.Style.xxx
-    required property int fontSize // Theme.FontSize.xxx
-    required property int paddingFactor // Theme.PaddingFactor.xxx
+    required property int theme // ThemeUtils.Style.xxx
+    required property int fontSize // ThemeUtils.FontSize.xxx
+    required property int paddingFactor // ThemeUtils.PaddingFactor.xxx
 
     signal themeChangeRequested(int theme)
     signal fontSizeChangeRequested(int fontSize)
@@ -74,12 +74,12 @@ SettingsContentBase {
             textRole: "name"
             valueRole: "value"
             model: ListModel {
-                ListElement { name: qsTr("XS"); value: Theme.FontSize.FontSizeXS }
-                ListElement { name: qsTr("S"); value: Theme.FontSize.FontSizeS }
-                ListElement { name: qsTr("M"); value: Theme.FontSize.FontSizeM }
-                ListElement { name: qsTr("L"); value: Theme.FontSize.FontSizeL }
-                ListElement { name: qsTr("XL"); value: Theme.FontSize.FontSizeXL }
-                ListElement { name: qsTr("XXL"); value: Theme.FontSize.FontSizeXXL }
+                ListElement { name: qsTr("XS"); value: ThemeUtils.FontSize.FontSizeXS }
+                ListElement { name: qsTr("S"); value: ThemeUtils.FontSize.FontSizeS }
+                ListElement { name: qsTr("M"); value: ThemeUtils.FontSize.FontSizeM }
+                ListElement { name: qsTr("L"); value: ThemeUtils.FontSize.FontSizeL }
+                ListElement { name: qsTr("XL"); value: ThemeUtils.FontSize.FontSizeXL }
+                ListElement { name: qsTr("XXL"); value: ThemeUtils.FontSize.FontSizeXXL }
             }
 
             value: root.fontSize
@@ -105,11 +105,11 @@ SettingsContentBase {
             textRole: "name"
             valueRole: "value"
             model: ListModel {
-                ListElement { name: qsTr("XXS"); value: Theme.PaddingFactor.PaddingXXS }
-                ListElement { name: qsTr("XS"); value: Theme.PaddingFactor.PaddingXS }
-                ListElement { name: qsTr("S"); value: Theme.PaddingFactor.PaddingS }
-                ListElement { name: qsTr("M"); value: Theme.PaddingFactor.PaddingM }
-                ListElement { name: qsTr("L"); value: Theme.PaddingFactor.PaddingL }
+                ListElement { name: qsTr("XXS"); value: ThemeUtils.PaddingFactor.PaddingXXS }
+                ListElement { name: qsTr("XS"); value: ThemeUtils.PaddingFactor.PaddingXS }
+                ListElement { name: qsTr("S"); value: ThemeUtils.PaddingFactor.PaddingS }
+                ListElement { name: qsTr("M"); value: ThemeUtils.PaddingFactor.PaddingM }
+                ListElement { name: qsTr("L"); value: ThemeUtils.PaddingFactor.PaddingL }
             }
 
             value: root.paddingFactor
@@ -137,36 +137,36 @@ SettingsContentBase {
 
             StatusImageRadioButton {
                 Layout.fillWidth: true
-                image.source: Theme.png("appearance-light")
+                image.source: Assets.png("appearance-light")
                 control.text: qsTr("Light")
-                control.checked: root.theme === Theme.Style.Light
+                control.checked: root.theme === ThemeUtils.Style.Light
                 onRadioCheckedChanged: function(checked) {
                     if (checked) {
-                        root.themeChangeRequested(Theme.Style.Light)
+                        root.themeChangeRequested(ThemeUtils.Style.Light)
                     }
                 }
             }
 
             StatusImageRadioButton {
                 Layout.fillWidth: true
-                image.source: Theme.png("appearance-dark")
+                image.source: Assets.png("appearance-dark")
                 control.text: qsTr("Dark")
-                control.checked: root.theme === Theme.Style.Dark
+                control.checked: root.theme === ThemeUtils.Style.Dark
                 onRadioCheckedChanged: function(checked) {
                     if (checked) {
-                        root.themeChangeRequested(Theme.Style.Dark)
+                        root.themeChangeRequested(ThemeUtils.Style.Dark)
                     }
                 }
             }
 
             StatusImageRadioButton {
                 Layout.fillWidth: true
-                image.source: Theme.png("appearance-system")
+                image.source: Assets.png("appearance-system")
                 control.text: qsTr("System")
-                control.checked: root.theme === Theme.Style.System
+                control.checked: root.theme === ThemeUtils.Style.System
                 onRadioCheckedChanged: function(checked) {
                     if (checked) {
-                        root.themeChangeRequested(Theme.Style.System)
+                        root.themeChangeRequested(ThemeUtils.Style.System)
                     }
                 }
             }
diff --git a/ui/app/AppLayouts/Profile/views/CommunitiesView.qml b/ui/app/AppLayouts/Profile/views/CommunitiesView.qml
index b8cfb05953f..bf2f2d54113 100644
--- a/ui/app/AppLayouts/Profile/views/CommunitiesView.qml
+++ b/ui/app/AppLayouts/Profile/views/CommunitiesView.qml
@@ -60,7 +60,7 @@ SettingsContentBase {
             Layout.alignment: Qt.AlignHCenter | Qt.AlignTop
 
             Image {
-                source: Theme.png("settings/communities")
+                source: Assets.png("settings/communities")
                 mipmap: true
                 Layout.alignment: Qt.AlignHCenter | Qt.AlignTop
                 Layout.preferredWidth: 434
diff --git a/ui/app/AppLayouts/Profile/views/EnsAddedView.qml b/ui/app/AppLayouts/Profile/views/EnsAddedView.qml
index d7d0445b9dd..c6b8bdba98d 100644
--- a/ui/app/AppLayouts/Profile/views/EnsAddedView.qml
+++ b/ui/app/AppLayouts/Profile/views/EnsAddedView.qml
@@ -21,7 +21,7 @@ Item {
         anchors.top: parent.top
         anchors.topMargin: 24
         font.weight: Font.Bold
-        font.pixelSize: Theme.fontSize20
+        font.pixelSize: Theme.fontSize(20)
         color: Theme.palette.directColor1
     }
 
@@ -41,7 +41,7 @@ Item {
             text: "✓"
             opacity: 0.7
             font.weight: Font.Bold
-            font.pixelSize: Theme.fontSize18
+            font.pixelSize: Theme.fontSize(18)
             color: Theme.palette.indirectColor1
             anchors.horizontalCenter: parent.horizontalCenter
             anchors.verticalCenter: parent.verticalCenter
@@ -54,7 +54,7 @@ Item {
         anchors.top: circle.bottom
         anchors.topMargin: 24
         font.weight: Font.Bold
-        font.pixelSize: Theme.fontSize24
+        font.pixelSize: Theme.fontSize(24)
         anchors.left: parent.left
         anchors.right: parent.right
         horizontalAlignment: Text.AlignHCenter
@@ -67,7 +67,7 @@ Item {
         text: qsTr("%1 is now connected with your chat key and can be used in Status.").arg(ensUsername)
         anchors.top: title.bottom
         anchors.topMargin: 24
-        font.pixelSize: Theme.fontSize14
+        font.pixelSize: Theme.fontSize(14)
         anchors.left: parent.left
         anchors.right: parent.right
         horizontalAlignment: Text.AlignHCenter
diff --git a/ui/app/AppLayouts/Profile/views/EnsConnectedView.qml b/ui/app/AppLayouts/Profile/views/EnsConnectedView.qml
index f2b50be977b..20bfdccb209 100644
--- a/ui/app/AppLayouts/Profile/views/EnsConnectedView.qml
+++ b/ui/app/AppLayouts/Profile/views/EnsConnectedView.qml
@@ -21,7 +21,7 @@ Item {
         anchors.top: parent.top
         anchors.topMargin: 24
         font.weight: Font.Bold
-        font.pixelSize: Theme.fontSize20
+        font.pixelSize: Theme.fontSize(20)
         color: Theme.palette.directColor1
     }
 
@@ -41,7 +41,7 @@ Item {
             text: "✓"
             opacity: 0.7
             font.weight: Font.Bold
-            font.pixelSize: Theme.fontSize18
+            font.pixelSize: Theme.fontSize(18)
             color: Theme.palette.indirectColor1
             anchors.horizontalCenter: parent.horizontalCenter
             anchors.verticalCenter: parent.verticalCenter
@@ -54,7 +54,7 @@ Item {
         anchors.top: circle.bottom
         anchors.topMargin: 24
         font.weight: Font.Bold
-        font.pixelSize: Theme.fontSize24
+        font.pixelSize: Theme.fontSize(24)
         anchors.left: parent.left
         anchors.right: parent.right
         horizontalAlignment: Text.AlignHCenter
diff --git a/ui/app/AppLayouts/Profile/views/EnsDetailsView.qml b/ui/app/AppLayouts/Profile/views/EnsDetailsView.qml
index c85759b8591..41cf05c382b 100644
--- a/ui/app/AppLayouts/Profile/views/EnsDetailsView.qml
+++ b/ui/app/AppLayouts/Profile/views/EnsDetailsView.qml
@@ -41,7 +41,7 @@ Item {
         anchors.top: parent.top
         anchors.topMargin: 24
         font.weight: Font.Bold
-        font.pixelSize: Theme.fontSize20
+        font.pixelSize: Theme.fontSize(20)
         color: Theme.palette.directColor1
     }
 
diff --git a/ui/app/AppLayouts/Profile/views/EnsListView.qml b/ui/app/AppLayouts/Profile/views/EnsListView.qml
index b77ede10a2d..34b1f00d29b 100644
--- a/ui/app/AppLayouts/Profile/views/EnsListView.qml
+++ b/ui/app/AppLayouts/Profile/views/EnsListView.qml
@@ -56,7 +56,7 @@ Item {
             anchors.top: parent.top
             anchors.topMargin: 24
             font.weight: Font.Bold
-            font.pixelSize: Theme.fontSize20
+            font.pixelSize: Theme.fontSize(20)
             color: Theme.palette.directColor1
         }
 
@@ -100,7 +100,7 @@ Item {
             anchors.left: parent.left
             anchors.top: addUsername.bottom
             anchors.topMargin: 24
-            font.pixelSize: Theme.fontSize16
+            font.pixelSize: Theme.fontSize(16)
             color: Theme.palette.directColor1
         }
 
@@ -163,7 +163,7 @@ Item {
             anchors.left: parent.left
             anchors.top: ensList.bottom
             anchors.topMargin: 24
-            font.pixelSize: Theme.fontSize16
+            font.pixelSize: Theme.fontSize(16)
             color: Theme.palette.directColor1
         }
 
@@ -233,7 +233,7 @@ Item {
             anchors.left: messagesShownAs.left
             anchors.topMargin: Theme.padding
             text: qsTr("You’re displaying your ENS username in chats")
-            font.pixelSize: Theme.fontSize14
+            font.pixelSize: Theme.fontSize(14)
             color: Theme.palette.baseColor1
         }
     }
diff --git a/ui/app/AppLayouts/Profile/views/EnsRegisteredView.qml b/ui/app/AppLayouts/Profile/views/EnsRegisteredView.qml
index e4178c0708d..c1a5366bffe 100644
--- a/ui/app/AppLayouts/Profile/views/EnsRegisteredView.qml
+++ b/ui/app/AppLayouts/Profile/views/EnsRegisteredView.qml
@@ -21,7 +21,7 @@ Item {
         anchors.top: parent.top
         anchors.topMargin: Theme.bigPadding
         font.weight: Font.Bold
-        font.pixelSize: Theme.fontSize20
+        font.pixelSize: Theme.fontSize(20)
         color: Theme.palette.directColor1
     }
 
@@ -41,7 +41,7 @@ Item {
             text: "✓"
             opacity: 0.7
             font.weight: Font.Bold
-            font.pixelSize: Theme.fontSize18
+            font.pixelSize: Theme.fontSize(18)
             color: Theme.palette.indirectColor1
             anchors.horizontalCenter: parent.horizontalCenter
             anchors.verticalCenter: parent.verticalCenter
@@ -54,7 +54,7 @@ Item {
         anchors.top: circle.bottom
         anchors.topMargin: Theme.bigPadding
         font.weight: Font.Bold
-        font.pixelSize: Theme.fontSize24
+        font.pixelSize: Theme.fontSize(24)
         anchors.left: parent.left
         anchors.right: parent.right
         horizontalAlignment: Text.AlignHCenter
diff --git a/ui/app/AppLayouts/Profile/views/EnsReleasedView.qml b/ui/app/AppLayouts/Profile/views/EnsReleasedView.qml
index 0114896bd2b..c3fe16c131d 100644
--- a/ui/app/AppLayouts/Profile/views/EnsReleasedView.qml
+++ b/ui/app/AppLayouts/Profile/views/EnsReleasedView.qml
@@ -21,7 +21,7 @@ Item {
         anchors.top: parent.top
         anchors.topMargin: Theme.bigPadding
         font.weight: Font.Bold
-        font.pixelSize: Theme.fontSize20
+        font.pixelSize: Theme.fontSize(20)
         color: Theme.palette.directColor1
     }
 
@@ -41,7 +41,7 @@ Item {
             text: "✓"
             opacity: 0.7
             font.weight: Font.Bold
-            font.pixelSize: Theme.fontSize18
+            font.pixelSize: Theme.fontSize(18)
             color: Theme.palette.indirectColor1
             anchors.horizontalCenter: parent.horizontalCenter
             anchors.verticalCenter: parent.verticalCenter
@@ -54,7 +54,7 @@ Item {
         anchors.top: circle.bottom
         anchors.topMargin: Theme.bigPadding
         font.weight: Font.Bold
-        font.pixelSize: Theme.fontSize24
+        font.pixelSize: Theme.fontSize(24)
         anchors.left: parent.left
         anchors.right: parent.right
         horizontalAlignment: Text.AlignHCenter
diff --git a/ui/app/AppLayouts/Profile/views/EnsSearchView.qml b/ui/app/AppLayouts/Profile/views/EnsSearchView.qml
index 9bb0e31d50a..edec8002eb3 100644
--- a/ui/app/AppLayouts/Profile/views/EnsSearchView.qml
+++ b/ui/app/AppLayouts/Profile/views/EnsSearchView.qml
@@ -77,7 +77,7 @@ Item {
             SVGImage {
                 visible: ensStatus === Constants.ens_taken
                 fillMode: Image.PreserveAspectFit
-                source: Theme.svg("block-icon-white")
+                source: Assets.svg("block-icon-white")
                 width: 20
                 height: 20
                 anchors.centerIn: parent
@@ -96,7 +96,7 @@ Item {
                 }
                 opacity: 0.7
                 font.weight: Font.Bold
-                font.pixelSize: Theme.fontSize18
+                font.pixelSize: Theme.fontSize(18)
                 color: Theme.palette.indirectColor1
                 anchors.horizontalCenter: parent.horizontalCenter
                 anchors.verticalCenter: parent.verticalCenter
diff --git a/ui/app/AppLayouts/Profile/views/EnsTermsAndConditionsView.qml b/ui/app/AppLayouts/Profile/views/EnsTermsAndConditionsView.qml
index 7a3e037aec9..3412094881c 100644
--- a/ui/app/AppLayouts/Profile/views/EnsTermsAndConditionsView.qml
+++ b/ui/app/AppLayouts/Profile/views/EnsTermsAndConditionsView.qml
@@ -46,7 +46,7 @@ Item {
         anchors.top: parent.top
         anchors.topMargin: 24
         font.weight: Font.Bold
-        font.pixelSize: Theme.fontSize20
+        font.pixelSize: Theme.fontSize(20)
         color: Theme.palette.directColor1
     }
 
@@ -135,7 +135,7 @@ Item {
                     wrapMode: Text.WordWrap
                     anchors.left: parent.left
                     anchors.right: parent.right
-                    font.family: Theme.monoFont.name
+                    font.family: Fonts.monoFont.family
                     color: Theme.palette.directColor1
                 }
 
@@ -159,7 +159,7 @@ Item {
                     wrapMode: Text.WordWrap
                     anchors.left: parent.left
                     anchors.right: parent.right
-                    font.family: Theme.monoFont.name
+                    font.family: Fonts.monoFont.family
                     color: Theme.palette.directColor1
                 }
 
@@ -211,7 +211,7 @@ Item {
                     text: "@"
                     opacity: 0.7
                     font.weight: Font.Bold
-                    font.pixelSize: Theme.fontSize18
+                    font.pixelSize: Theme.fontSize(18)
                     color: Theme.palette.white
                     anchors.horizontalCenter: parent.horizontalCenter
                     anchors.verticalCenter: parent.verticalCenter
@@ -222,7 +222,7 @@ Item {
                 id: ensUsername
                 text: username + ".stateofus.eth"
                 font.weight: Font.Bold
-                font.pixelSize: Theme.fontSize18
+                font.pixelSize: Theme.fontSize(18)
                 anchors.top: circleAt.bottom
                 anchors.topMargin: 24
                 anchors.left: parent.left
@@ -312,7 +312,7 @@ Item {
             id: image1
             height: 50
             width: height
-            source: Theme.png("tokens/SNT")
+            source: Assets.png("tokens/SNT")
             sourceSize: Qt.size(width, height)
             cache: false
         }
diff --git a/ui/app/AppLayouts/Profile/views/EnsWelcomeView.qml b/ui/app/AppLayouts/Profile/views/EnsWelcomeView.qml
index 182342ac97f..28b2c7e31a2 100644
--- a/ui/app/AppLayouts/Profile/views/EnsWelcomeView.qml
+++ b/ui/app/AppLayouts/Profile/views/EnsWelcomeView.qml
@@ -40,7 +40,7 @@ Item {
                 anchors.top: parent.top
                 anchors.horizontalCenter: parent.horizontalCenter
                 fillMode: Image.PreserveAspectFit
-                source: Theme.png("ens/ens-header-" + Theme.palette.name + "@2x")
+                source: Assets.png("ens/ens-header-" + Theme.palette.name + "@2x")
                 cache: false
             }
 
@@ -50,7 +50,7 @@ Item {
                 anchors.top: image.bottom
                 anchors.topMargin: 24
                 font.weight: Font.Bold
-                font.pixelSize: Theme.fontSize24
+                font.pixelSize: Theme.fontSize(24)
                 anchors.left: parent.left
                 anchors.right: parent.right
                 horizontalAlignment: Text.AlignHCenter
@@ -276,7 +276,7 @@ Item {
                 anchors.topMargin: 40
                 anchors.right: parent.right
                 wrapMode: Text.WordWrap
-                font.pixelSize: Theme.fontSize11
+                font.pixelSize: Theme.fontSize(11)
                 color: Theme.palette.directColor1
             }
         }
diff --git a/ui/app/AppLayouts/Profile/views/WalletView.qml b/ui/app/AppLayouts/Profile/views/WalletView.qml
index 87a7421c9ae..df465a356fd 100644
--- a/ui/app/AppLayouts/Profile/views/WalletView.qml
+++ b/ui/app/AppLayouts/Profile/views/WalletView.qml
@@ -455,7 +455,7 @@ SettingsContentBase {
             StatusRoundedImage {
                 width: 28
                 height: 28
-                image.source: Theme.svg(!!editNetwork.network && !!editNetwork.network.iconUrl ? editNetwork.network.iconUrl: "")
+                image.source: Assets.svg(!!editNetwork.network && !!editNetwork.network.iconUrl ? editNetwork.network.iconUrl: "")
                 image.fillMode: Image.PreserveAspectCrop
             }
         }
diff --git a/ui/app/AppLayouts/Profile/views/keycard/MainView.qml b/ui/app/AppLayouts/Profile/views/keycard/MainView.qml
index f3b7ccde681..7c452bc4da9 100644
--- a/ui/app/AppLayouts/Profile/views/keycard/MainView.qml
+++ b/ui/app/AppLayouts/Profile/views/keycard/MainView.qml
@@ -39,7 +39,7 @@ ColumnLayout {
         Layout.preferredWidth: 350
         fillMode: Image.PreserveAspectFit
         antialiasing: true
-        source: Theme.png("keycard/keycard-security")
+        source: Assets.png("keycard/keycard-security")
         mipmap: true
         cache: false
     }
diff --git a/ui/app/AppLayouts/Profile/views/wallet/AccountView.qml b/ui/app/AppLayouts/Profile/views/wallet/AccountView.qml
index c649f1ffacf..6b8575e50c5 100644
--- a/ui/app/AppLayouts/Profile/views/wallet/AccountView.qml
+++ b/ui/app/AppLayouts/Profile/views/wallet/AccountView.qml
@@ -62,7 +62,7 @@ ColumnLayout {
                 Layout.alignment: Qt.AlignLeft
                 text: !!root.account? root.account.name : ""
                 font.weight: Font.Bold
-                font.pixelSize: Theme.fontSize28
+                font.pixelSize: Theme.fontSize(28)
                 color: !!root.account? Utils.getColorForId(root.account.colorId) : Theme.palette.directColor1
             }
             StatusEmoji {
diff --git a/ui/app/AppLayouts/Wallet/WalletUtils.qml b/ui/app/AppLayouts/Wallet/WalletUtils.qml
index 4e49abbee8d..e02a8cd3e95 100644
--- a/ui/app/AppLayouts/Wallet/WalletUtils.qml
+++ b/ui/app/AppLayouts/Wallet/WalletUtils.qml
@@ -345,14 +345,14 @@ QtObject {
     function getIconForFeeMode(feeMode) {
         switch(feeMode) {
         case Constants.FeePriorityModeType.Fast:
-            return Theme.png("wallet/car")
+            return Assets.png("wallet/car")
         case Constants.FeePriorityModeType.Urgent:
-            return Theme.png("wallet/rocket")
+            return Assets.png("wallet/rocket")
         case Constants.FeePriorityModeType.Custom:
-            return Theme.png("wallet/handwrite")
+            return Assets.png("wallet/handwrite")
         case Constants.FeePriorityModeType.Normal:
         default:
-            return Theme.png("wallet/clock")
+            return Assets.png("wallet/clock")
         }
     }
 
diff --git a/ui/app/AppLayouts/Wallet/adaptors/CollectiblesSelectionAdaptor.qml b/ui/app/AppLayouts/Wallet/adaptors/CollectiblesSelectionAdaptor.qml
index 183cdd88209..a6ae54a0b94 100644
--- a/ui/app/AppLayouts/Wallet/adaptors/CollectiblesSelectionAdaptor.qml
+++ b/ui/app/AppLayouts/Wallet/adaptors/CollectiblesSelectionAdaptor.qml
@@ -112,7 +112,7 @@ QObject {
                 readonly property string key: model.symbol
 
                 readonly property url icon:
-                    model.imageUrl || model.mediaUrl || Theme.png("tokens/DEFAULT-TOKEN")
+                    model.imageUrl || model.mediaUrl || Assets.png("tokens/DEFAULT-TOKEN")
 
                 SortFilterProxyModel { /* 1 */
                     id: ownershipFiltered
diff --git a/ui/app/AppLayouts/Wallet/controls/AccountHeaderGradient.qml b/ui/app/AppLayouts/Wallet/controls/AccountHeaderGradient.qml
index 04220a14993..eb4caeb9dc7 100644
--- a/ui/app/AppLayouts/Wallet/controls/AccountHeaderGradient.qml
+++ b/ui/app/AppLayouts/Wallet/controls/AccountHeaderGradient.qml
@@ -20,7 +20,7 @@ Control {
             id: singleAccountGradient
             Rectangle {
                 gradient: Gradient {
-                    GradientStop { position: 0.0; color: overview && overview.colorId ? Theme.palette.alphaColor(Utils.getColorForId(overview.colorId), 0.1) : "" }
+                    GradientStop { position: 0.0; color: overview && overview.colorId ? StatusColors.alphaColor(Utils.getColorForId(overview.colorId), 0.1) : "" }
                     GradientStop { position: 1.0; color: "transparent" }
                 }
             }
@@ -39,7 +39,7 @@ Control {
                         let gap =  1/splitWords.length
                         let startPosition = gap
                         for (const word of splitWords) {
-                            stops.push(stopComponent.createObject(base, {"position":startPosition, "color": Theme.palette.alphaColor(Utils.getColorForId(word), 0.1)}))
+                            stops.push(stopComponent.createObject(base, {"position":startPosition, "color": StatusColors.alphaColor(Utils.getColorForId(word), 0.1)}))
                             startPosition += gap
                         }
                         gradient.stops = stops
diff --git a/ui/app/AppLayouts/Wallet/controls/CollectibleBalanceTag.qml b/ui/app/AppLayouts/Wallet/controls/CollectibleBalanceTag.qml
index ddb44d4dd26..226fe3c9c86 100644
--- a/ui/app/AppLayouts/Wallet/controls/CollectibleBalanceTag.qml
+++ b/ui/app/AppLayouts/Wallet/controls/CollectibleBalanceTag.qml
@@ -22,7 +22,7 @@ Control {
     contentItem: StatusBaseText {
         color: Theme.palette.directColor1
         font.pixelSize: Theme.asideTextFontSize
-        font.family: Theme.baseFont.name
+        font.family: Fonts.baseFont.family
         text: {
             if (root.balance > 99) {
                 return "99+"
diff --git a/ui/app/AppLayouts/Wallet/controls/CollectibleDetailsHeader.qml b/ui/app/AppLayouts/Wallet/controls/CollectibleDetailsHeader.qml
index b00278ce15e..28e948508ad 100644
--- a/ui/app/AppLayouts/Wallet/controls/CollectibleDetailsHeader.qml
+++ b/ui/app/AppLayouts/Wallet/controls/CollectibleDetailsHeader.qml
@@ -77,7 +77,7 @@ Control {
                     Layout.fillWidth: true
                     Layout.horizontalStretchFactor: 0
 
-                    font.pixelSize: Theme.fontSize22
+                    font.pixelSize: Theme.fontSize(22)
                     lineHeight: 30
                     lineHeightMode: Text.FixedHeight
                     elide: Text.ElideRight
@@ -91,7 +91,7 @@ Control {
                     Layout.horizontalStretchFactor: 1
 
                     Layout.alignment: Qt.AlignVCenter | Qt.AlignLeft
-                    font.pixelSize: Theme.fontSize22
+                    font.pixelSize: Theme.fontSize(22)
                     lineHeight: 30
                     lineHeightMode: Text.FixedHeight
                     elide: Text.ElideRight
@@ -227,7 +227,7 @@ Control {
             InformationTag {
                 id: networkTag
                 readonly property bool isNetworkValid: networkShortName !== ""
-                asset.name: isNetworkValid && networkIconURL !== "" ? Theme.svg(networkIconURL) : ""
+                asset.name: isNetworkValid && networkIconURL !== "" ? Assets.svg(networkIconURL) : ""
                 asset.isImage: true
                 tagPrimaryLabel.text: isNetworkValid ? networkShortName : "---"
                 tagPrimaryLabel.color: isNetworkValid ? networkColor : "black"
diff --git a/ui/app/AppLayouts/Wallet/controls/CollectiblesHeader.qml b/ui/app/AppLayouts/Wallet/controls/CollectiblesHeader.qml
index c1fe22fe9a4..bf230a25858 100644
--- a/ui/app/AppLayouts/Wallet/controls/CollectiblesHeader.qml
+++ b/ui/app/AppLayouts/Wallet/controls/CollectiblesHeader.qml
@@ -87,7 +87,7 @@ Rectangle {
             SVGImage {
                 id: caretImg
                 anchors.verticalCenter: parent.verticalCenter
-                source: Theme.svg("caret")
+                source: Assets.svg("caret")
                 width: 11
                 anchors.left: numberCollectibleText.right
                 anchors.leftMargin: Theme.padding
diff --git a/ui/app/AppLayouts/Wallet/controls/FilterComboBox.qml b/ui/app/AppLayouts/Wallet/controls/FilterComboBox.qml
index f3e1b25b46a..d95e90baf28 100644
--- a/ui/app/AppLayouts/Wallet/controls/FilterComboBox.qml
+++ b/ui/app/AppLayouts/Wallet/controls/FilterComboBox.qml
@@ -37,7 +37,7 @@ ComboBox {
     }
 
     enabled: d.searchTextLowerCase || d.combinedProxyModel.count || d.uncategorizedModel.count
-    opacity: enabled ? 1 : Theme.disabledOpacity
+    opacity: enabled ? 1 : ThemeUtils.disabledOpacity
 
     displayText: qsTr("Collection")
 
@@ -45,7 +45,7 @@ ComboBox {
     verticalPadding: Theme.halfPadding
     spacing: Theme.halfPadding
 
-    font.family: Theme.baseFont.name
+    font.family: Fonts.baseFont.family
     font.pixelSize: Theme.additionalTextSize
 
     QtObject {
diff --git a/ui/app/AppLayouts/Wallet/controls/NetworkFilter.qml b/ui/app/AppLayouts/Wallet/controls/NetworkFilter.qml
index e04c55c6a3b..453259b2460 100644
--- a/ui/app/AppLayouts/Wallet/controls/NetworkFilter.qml
+++ b/ui/app/AppLayouts/Wallet/controls/NetworkFilter.qml
@@ -71,7 +71,7 @@ StatusComboBox {
                 asset.bgColor: Theme.palette.background
                 asset.bgHeight: 15
                 asset.isImage: true
-                asset.name: Theme.png("status-gradient-dot")
+                asset.name: Assets.png("status-gradient-dot")
                 asset.color: Theme.palette.transparent
             }
         }
@@ -92,7 +92,7 @@ StatusComboBox {
             asset.height: 24
             asset.width: 24
             asset.isImage: !root.multiSelection
-            asset.name: !root.multiSelection ? Theme.svg(d.singleSelectionIconUrl) : ""
+            asset.name: !root.multiSelection ? Assets.svg(d.singleSelectionIconUrl) : ""
             active: !root.multiSelection
             visible: active
         }
@@ -116,7 +116,7 @@ StatusComboBox {
 
                     width: 24
                     height: 24
-                    image.source: Theme.svg(model.iconUrl)
+                    image.source: Assets.svg(model.iconUrl)
                     z: index + 1
 
                     image.layer.enabled: index < chainRepeater.count - 1 && row.spacing < 0
diff --git a/ui/app/AppLayouts/Wallet/controls/NetworkSelectItemDelegate.qml b/ui/app/AppLayouts/Wallet/controls/NetworkSelectItemDelegate.qml
index c63bb114003..5e448230b4a 100644
--- a/ui/app/AppLayouts/Wallet/controls/NetworkSelectItemDelegate.qml
+++ b/ui/app/AppLayouts/Wallet/controls/NetworkSelectItemDelegate.qml
@@ -51,7 +51,7 @@ StatusListItem {
 
     Binding on bgColor {
         when: highlighted && !root.sensor.containsMouse
-        value: root.interactive ? Theme.palette.baseColor4 : Theme.palette.primaryColor3
+        value: root.interactive ? root.Theme.palette.baseColor4 : root.Theme.palette.primaryColor3
         restoreMode: Binding.RestoreBindingOrValue
     }
 
diff --git a/ui/app/AppLayouts/Wallet/controls/RecipientViewDelegate.qml b/ui/app/AppLayouts/Wallet/controls/RecipientViewDelegate.qml
index ad2ae28a99e..55473d10e98 100644
--- a/ui/app/AppLayouts/Wallet/controls/RecipientViewDelegate.qml
+++ b/ui/app/AppLayouts/Wallet/controls/RecipientViewDelegate.qml
@@ -50,10 +50,10 @@ StatusListItem {
     color: sensor.containsMouse || highlighted ? Theme.palette.baseColor2 : "transparent"
 
     statusListItemSubTitle.wrapMode: Text.NoWrap
-    statusListItemSubTitle.font.family: Theme.monoFont.name
+    statusListItemSubTitle.font.family: Fonts.monoFont.family
     statusListItemSubTitle.elide: Text.ElideNone
     statusListItemSubTitle.customColor: sensor.containsMouse ? Theme.palette.directColor1 : Theme.palette.baseColor1
-    statusListItemTitle.font.family: Theme.monoFont.name
+    statusListItemTitle.font.family: Fonts.monoFont.family
     statusListItemIcon.name: useAddressAsLetterIdenticon ? root.address : title
 
     asset.emoji: root.emoji
diff --git a/ui/app/AppLayouts/Wallet/controls/SortOrderComboBox.qml b/ui/app/AppLayouts/Wallet/controls/SortOrderComboBox.qml
index 93c631b6e73..49b519f49ab 100644
--- a/ui/app/AppLayouts/Wallet/controls/SortOrderComboBox.qml
+++ b/ui/app/AppLayouts/Wallet/controls/SortOrderComboBox.qml
@@ -65,7 +65,7 @@ ComboBox {
     verticalPadding: Theme.halfPadding
     spacing: Theme.halfPadding
 
-    font.family: Theme.baseFont.name
+    font.family: Fonts.baseFont.family
     font.pixelSize: Theme.additionalTextSize
 
     QtObject {
diff --git a/ui/app/AppLayouts/Wallet/controls/TokenSelectorButton.qml b/ui/app/AppLayouts/Wallet/controls/TokenSelectorButton.qml
index addf705dac4..d1979aea30f 100644
--- a/ui/app/AppLayouts/Wallet/controls/TokenSelectorButton.qml
+++ b/ui/app/AppLayouts/Wallet/controls/TokenSelectorButton.qml
@@ -94,7 +94,7 @@ Control {
                 font.pixelSize: root.size === TokenSelectorButton.Size.Normal ? 28 : 22
                 lineHeightMode: Text.FixedHeight
                 lineHeight: root.size === TokenSelectorButton.Size.Normal ? 38 : 30
-                color: root.hovered ? Theme.palette.blue : Theme.palette.darkBlue
+                color: root.hovered ? StatusColors.getColor("blue") : StatusColors.getColor("darkBlue")
 
                 elide: Text.ElideRight
                 text: root.name
diff --git a/ui/app/AppLayouts/Wallet/panels/ActivityFilterPanel.qml b/ui/app/AppLayouts/Wallet/panels/ActivityFilterPanel.qml
index c39517f92a8..1b47711648d 100644
--- a/ui/app/AppLayouts/Wallet/panels/ActivityFilterPanel.qml
+++ b/ui/app/AppLayouts/Wallet/panels/ActivityFilterPanel.qml
@@ -133,13 +133,13 @@ Column {
                                       }
                 asset.name: switch(activityFilterStore.statusFilters[index]) {
                                 case Constants.TransactionStatus.Failed:
-                                    return Theme.svg("transaction/failed")
+                                    return Assets.svg("transaction/failed")
                                 case Constants.TransactionStatus.Pending:
-                                    return Theme.svg("transaction/pending")
+                                    return Assets.svg("transaction/pending")
                                 case Constants.TransactionStatus.Complete:
-                                    return Theme.svg("transaction/confirmed")
+                                    return Assets.svg("transaction/confirmed")
                                 case Constants.TransactionStatus.Finished:
-                                    return Theme.svg("transaction/finished")
+                                    return Assets.svg("transaction/finished")
                                 default:
                                     console.warn("Unhandled status :: ",activityFilterStore.statusFilters[index])
                                     return ""
diff --git a/ui/app/AppLayouts/Wallet/panels/BuyReceiveBanner.qml b/ui/app/AppLayouts/Wallet/panels/BuyReceiveBanner.qml
index 02e975a9f23..4eb8be8c880 100644
--- a/ui/app/AppLayouts/Wallet/panels/BuyReceiveBanner.qml
+++ b/ui/app/AppLayouts/Wallet/panels/BuyReceiveBanner.qml
@@ -31,7 +31,7 @@ Control {
             Layout.preferredWidth: root.buyEnabled ? layout.width / layout.children.length : 0
             title: qsTr("Ways to buy")
             subTitle: qsTr("Via card or bank")
-            image: Theme.png("wallet/wallet-green")
+            image: Assets.png("wallet/wallet-green")
             closeEnabled: root.closeEnabled
             visible: Layout.preferredWidth > 0
             opacity: root.buyEnabled ? 1 : 0
@@ -53,7 +53,7 @@ Control {
             Layout.preferredWidth: root.receiveEnabled ? layout.width / layout.children.length : 0
             title: qsTr("Receive")
             subTitle: qsTr("Deposit to your Wallet")
-            image: Theme.png("wallet/flying-coin")
+            image: Assets.png("wallet/flying-coin")
             closeEnabled: root.closeEnabled
             visible: Layout.preferredWidth > 0
             opacity: root.receiveEnabled ? 1 : 0
diff --git a/ui/app/AppLayouts/Wallet/panels/StickySendModalHeader.qml b/ui/app/AppLayouts/Wallet/panels/StickySendModalHeader.qml
index b5e964f2236..39a32c660f4 100644
--- a/ui/app/AppLayouts/Wallet/panels/StickySendModalHeader.qml
+++ b/ui/app/AppLayouts/Wallet/panels/StickySendModalHeader.qml
@@ -130,7 +130,7 @@ Control {
             Rectangle {
                 id: foregroundRect
                 anchors.fill: parent
-                color: root.implicitHeight > d.bottomMargin ? Theme.palette.alphaColor(Theme.palette.baseColor3, 0.85) : Theme.palette.transparent
+                color: root.implicitHeight > d.bottomMargin ? StatusColors.alphaColor(Theme.palette.baseColor3, 0.85) : Theme.palette.transparent
                 radius: 8
 
                 // cover for the bottom rounded corners
@@ -156,7 +156,7 @@ Control {
                 horizontalOffset: 0
                 verticalOffset: 5
                 samples: 24
-                color: Theme.palette.alphaColor(Theme.palette.dropShadow, 0.06)
+                color: StatusColors.alphaColor(Theme.palette.dropShadow, 0.06)
             }
         }
     }
diff --git a/ui/app/AppLayouts/Wallet/panels/WalletAccountHeader.qml b/ui/app/AppLayouts/Wallet/panels/WalletAccountHeader.qml
index 0461a51d63c..30b74b1f9ef 100644
--- a/ui/app/AppLayouts/Wallet/panels/WalletAccountHeader.qml
+++ b/ui/app/AppLayouts/Wallet/panels/WalletAccountHeader.qml
@@ -121,7 +121,7 @@ Control {
 
                 Binding on source { // fallback when we have no emoji
                     when: root.emojiId === ""
-                    value: Theme.svg("filled-account")
+                    value: Assets.svg("filled-account")
                 }
             }
         }
@@ -135,7 +135,7 @@ Control {
                 Layout.fillWidth: true
 
                 elide: Text.ElideRight
-                font.pixelSize: Theme.fontSize19
+                font.pixelSize: Theme.fontSize(19)
                 lineHeightMode: Text.FixedHeight
                 lineHeight: 26
 
@@ -145,7 +145,7 @@ Control {
             StatusTextWithLoadingState {
 
                 visible: root.balanceAvailable
-                font.pixelSize: Theme.fontSize19
+                font.pixelSize: Theme.fontSize(19)
                 font.weight: Font.Medium
 
                 customColor: Theme.palette.directColor1
diff --git a/ui/app/AppLayouts/Wallet/panels/WalletSavedAddressesHeader.qml b/ui/app/AppLayouts/Wallet/panels/WalletSavedAddressesHeader.qml
index f39e0a269dc..325b6e0ec97 100644
--- a/ui/app/AppLayouts/Wallet/panels/WalletSavedAddressesHeader.qml
+++ b/ui/app/AppLayouts/Wallet/panels/WalletSavedAddressesHeader.qml
@@ -72,7 +72,7 @@ Control {
 
             elide: Text.ElideRight
 
-            font.pixelSize: Theme.fontSize19
+            font.pixelSize: Theme.fontSize(19)
             font.weight: Font.Medium
 
             text: qsTr("Saved addresses")
diff --git a/ui/app/AppLayouts/Wallet/popups/SavedAddressActivityPopup.qml b/ui/app/AppLayouts/Wallet/popups/SavedAddressActivityPopup.qml
index bf91ca18500..b6d1a64bfea 100644
--- a/ui/app/AppLayouts/Wallet/popups/SavedAddressActivityPopup.qml
+++ b/ui/app/AppLayouts/Wallet/popups/SavedAddressActivityPopup.qml
@@ -136,7 +136,7 @@ StatusDialog {
             colorId: d.colorId
             mixedcaseAddress: d.mixedcaseAddress
 
-            statusListItemTitle.font.pixelSize: Theme.fontSize22
+            statusListItemTitle.font.pixelSize: Theme.fontSize(22)
             statusListItemTitle.font.bold: Font.Bold
 
             onAboutToOpenPopup: {
diff --git a/ui/app/AppLayouts/Wallet/popups/dapps/DAppsWorkflow.qml b/ui/app/AppLayouts/Wallet/popups/dapps/DAppsWorkflow.qml
index 68bd4343676..31410dc6f7d 100644
--- a/ui/app/AppLayouts/Wallet/popups/dapps/DAppsWorkflow.qml
+++ b/ui/app/AppLayouts/Wallet/popups/dapps/DAppsWorkflow.qml
@@ -368,7 +368,7 @@ SQUtils.QObject {
             accountEmoji: account.emoji
 
             networkName: network.chainName
-            networkIconPath: Theme.svg(network.iconUrl)
+            networkIconPath: Assets.svg(network.iconUrl)
 
             fiatFees: request.fiatMaxFees ? request.fiatMaxFees.toFixed() : ""
             fiatSymbol: request.fiatSymbol
@@ -470,7 +470,7 @@ SQUtils.QObject {
                 StatusListItem {
                     objectName: "btnStatusConnector"
                     title: "Status Connector"
-                    asset.name: Theme.png("status-logo")
+                    asset.name: Assets.png("status-logo")
                     asset.isImage: true
                     enabled: root.connectorEnabled
                     components: [
@@ -487,7 +487,7 @@ SQUtils.QObject {
                 StatusListItem {
                     objectName: "btnWalletConnect"
                     title: "Wallet Connect"
-                    asset.name: Theme.svg("walletconnect")
+                    asset.name: Assets.svg("walletconnect")
                     asset.isImage: true
                     enabled: root.walletConnectEnabled
                     components: [
diff --git a/ui/app/AppLayouts/Wallet/popups/filterSubMenus/ActivityStatusFilterSubMenu.qml b/ui/app/AppLayouts/Wallet/popups/filterSubMenus/ActivityStatusFilterSubMenu.qml
index 6d914ddbe6c..b8d63ee5a8e 100644
--- a/ui/app/AppLayouts/Wallet/popups/filterSubMenus/ActivityStatusFilterSubMenu.qml
+++ b/ui/app/AppLayouts/Wallet/popups/filterSubMenus/ActivityStatusFilterSubMenu.qml
@@ -34,7 +34,7 @@ StatusMenu {
     ActivityTypeCheckBox {
         id: sendCheckbox
         title: qsTr("Failed")
-        assetSettings.name: Theme.svg("transaction/failed")
+        assetSettings.name: Assets.svg("transaction/failed")
         assetSettings.color: "transparent"
         buttonGroup: typeButtonGroup
         allChecked: root.allChecked
@@ -46,7 +46,7 @@ StatusMenu {
     ActivityTypeCheckBox {
         id: receiveCheckbox
         title: qsTr("Pending")
-        assetSettings.name: Theme.svg("transaction/pending")
+        assetSettings.name: Assets.svg("transaction/pending")
         assetSettings.color: "transparent"
         buttonGroup: typeButtonGroup
         allChecked: root.allChecked
@@ -58,7 +58,7 @@ StatusMenu {
     ActivityTypeCheckBox {
         id: buyCheckbox
         title: qsTr("Complete")
-        assetSettings.name: Theme.svg("transaction/confirmed")
+        assetSettings.name: Assets.svg("transaction/confirmed")
         assetSettings.color: "transparent"
         buttonGroup: typeButtonGroup
         allChecked: root.allChecked
@@ -70,7 +70,7 @@ StatusMenu {
     ActivityTypeCheckBox {
         id: swapCheckbox
         title: qsTr("Finalised")
-        assetSettings.name: Theme.svg("transaction/finished")
+        assetSettings.name: Assets.svg("transaction/finished")
         assetSettings.color: "transparent"
         buttonGroup: typeButtonGroup
         allChecked: root.allChecked
diff --git a/ui/app/AppLayouts/Wallet/popups/simpleSend/SendSignModal.qml b/ui/app/AppLayouts/Wallet/popups/simpleSend/SendSignModal.qml
index ec8e8170312..1be076764e2 100644
--- a/ui/app/AppLayouts/Wallet/popups/simpleSend/SendSignModal.qml
+++ b/ui/app/AppLayouts/Wallet/popups/simpleSend/SendSignModal.qml
@@ -50,7 +50,7 @@ SignTransactionModalBase {
     /** Input property holding selected network name **/
     required property string networkName
     /** Input property holding selected network icon path
-    e.g. `Theme.svg("network/Network=Optimism")`**/
+    e.g. `Assets.svg("network/Network=Optimism")`**/
     required property string networkIconPath
     /** Input property holding selected network blockchain
     explorer name **/
@@ -200,7 +200,7 @@ SignTransactionModalBase {
         bridgeBadge.visible: true
         bridgeBadge.border.width: 2
         bridgeBadge.color: Theme.palette.darkBlue
-        bridgeBadge.image.source: Theme.svg("sign")
+        bridgeBadge.image.source: Assets.svg("sign")
     }
 
     leftFooterContents: ObjectModel {
diff --git a/ui/app/AppLayouts/Wallet/popups/swap/SwapApproveCapModal.qml b/ui/app/AppLayouts/Wallet/popups/swap/SwapApproveCapModal.qml
index 69543159c8e..fb6094a6052 100644
--- a/ui/app/AppLayouts/Wallet/popups/swap/SwapApproveCapModal.qml
+++ b/ui/app/AppLayouts/Wallet/popups/swap/SwapApproveCapModal.qml
@@ -33,7 +33,7 @@ SignTransactionModalBase {
 
     required property string networkShortName // e.g. "oeth"
     required property string networkName // e.g. "Optimism"
-    required property string networkIconPath // e.g. `Theme.svg("network/Network=Optimism")`
+    required property string networkIconPath // e.g. `Assets.svg("network/Network=Optimism")`
     required property string networkBlockExplorerUrl
     required property int networkChainId
 
@@ -47,7 +47,7 @@ SignTransactionModalBase {
     property string serviceProviderTandCUrl: Constants.swap.paraswapTermsAndConditionUrl
     property string serviceProviderURL: Constants.swap.paraswapUrl // TODO https://github.com/status-im/status-desktop/issues/15329
     property string serviceProviderContractAddress: Constants.swap.paraswapV6_2ContractAddress
-    property string serviceProviderIcon: Theme.png("swap/%1".arg(Constants.swap.paraswapIcon)) // FIXME svg
+    property string serviceProviderIcon: Assets.png("swap/%1".arg(Constants.swap.paraswapIcon)) // FIXME svg
 
     title: qsTr("Approve spending cap")
     subtitle: root.serviceProviderHostname
diff --git a/ui/app/AppLayouts/Wallet/popups/swap/SwapModal.qml b/ui/app/AppLayouts/Wallet/popups/swap/SwapModal.qml
index 30e2e26cb49..92122c8ded1 100644
--- a/ui/app/AppLayouts/Wallet/popups/swap/SwapModal.qml
+++ b/ui/app/AppLayouts/Wallet/popups/swap/SwapModal.qml
@@ -579,7 +579,7 @@ StatusDialog {
 
             networkShortName: networkFilter.singleSelectionItemData.shortName
             networkName: networkFilter.singleSelectionItemData.chainName
-            networkIconPath: Theme.svg(networkFilter.singleSelectionItemData.iconUrl)
+            networkIconPath: Assets.svg(networkFilter.singleSelectionItemData.iconUrl)
             networkBlockExplorerUrl: networkFilter.singleSelectionItemData.blockExplorerURL
             networkChainId: networkFilter.singleSelectionItemData.chainId
 
@@ -595,7 +595,7 @@ StatusDialog {
             serviceProviderName: Constants.swap.paraswapName
             serviceProviderURL: Constants.swap.paraswapUrl // TODO https://github.com/status-im/status-desktop/issues/15329
             serviceProviderTandCUrl: Constants.swap.paraswapTermsAndConditionUrl // TODO https://github.com/status-im/status-desktop/issues/15329
-            serviceProviderIcon: Theme.png("swap/%1".arg(Constants.swap.paraswapIcon)) // FIXME svg
+            serviceProviderIcon: Assets.png("swap/%1".arg(Constants.swap.paraswapIcon)) // FIXME svg
             serviceProviderContractAddress: root.swapAdaptor.swapOutputData.approvalContractAddress
             serviceProviderHostname: Constants.swap.paraswapHostname
 
@@ -639,7 +639,7 @@ StatusDialog {
 
             networkShortName: networkFilter.singleSelectionItemData.shortName
             networkName: networkFilter.singleSelectionItemData.chainName
-            networkIconPath: Theme.svg(networkFilter.singleSelectionItemData.iconUrl)
+            networkIconPath: Assets.svg(networkFilter.singleSelectionItemData.iconUrl)
             networkBlockExplorerUrl: networkFilter.singleSelectionItemData.blockExplorerURL
             networkChainId: root.swapInputParamsForm.selectedNetworkChainId
 
diff --git a/ui/app/AppLayouts/Wallet/popups/swap/SwapSignModal.qml b/ui/app/AppLayouts/Wallet/popups/swap/SwapSignModal.qml
index 54b5f9514ec..c352b9fca5b 100644
--- a/ui/app/AppLayouts/Wallet/popups/swap/SwapSignModal.qml
+++ b/ui/app/AppLayouts/Wallet/popups/swap/SwapSignModal.qml
@@ -34,7 +34,7 @@ SignTransactionModalBase {
 
     required property string networkShortName // e.g. "oeth"
     required property string networkName // e.g. "Optimism"
-    required property string networkIconPath // e.g. `Theme.svg("network/Network=Optimism")`
+    required property string networkIconPath // e.g. `Assets.svg("network/Network=Optimism")`
     required property string networkBlockExplorerUrl
     required property int networkChainId
 
@@ -76,7 +76,7 @@ SignTransactionModalBase {
         bridgeBadge.visible: true
         bridgeBadge.border.width: 2
         bridgeBadge.color: Theme.palette.darkBlue
-        bridgeBadge.image.source: Theme.svg("sign")
+        bridgeBadge.image.source: Assets.svg("sign")
     }
 
     leftFooterContents: ObjectModel {
diff --git a/ui/app/AppLayouts/Wallet/stores/RootStore.qml b/ui/app/AppLayouts/Wallet/stores/RootStore.qml
index 86ae0f56989..13c86576fe5 100644
--- a/ui/app/AppLayouts/Wallet/stores/RootStore.qml
+++ b/ui/app/AppLayouts/Wallet/stores/RootStore.qml
@@ -470,7 +470,7 @@ QtObject {
             case Constants.swap.paraswapV5ApproveContractAddress:
             case Constants.swap.paraswapV5SwapContractAddress:
                 return {
-                    "icon": Theme.png("swap/%1".arg(Constants.swap.paraswapIcon)),
+                    "icon": Assets.png("swap/%1".arg(Constants.swap.paraswapIcon)),
                     "url": Constants.swap.paraswapHostname,
                     "name": Constants.swap.paraswapName,
                     "approvalContractAddress": Constants.swap.paraswapV5ApproveContractAddress,
@@ -478,7 +478,7 @@ QtObject {
                 }
             case Constants.swap.paraswapV6_2ContractAddress:
                 return {
-                    "icon": Theme.png("swap/%1".arg(Constants.swap.paraswapIcon)),
+                    "icon": Assets.png("swap/%1".arg(Constants.swap.paraswapIcon)),
                     "url": Constants.swap.paraswapUrl,
                     "name": Constants.swap.paraswapName,
                     "approvalContractAddress": Constants.swap.paraswapV6_2ContractAddress,
diff --git a/ui/app/AppLayouts/Wallet/views/AssetsDetailView.qml b/ui/app/AppLayouts/Wallet/views/AssetsDetailView.qml
index b65e066e3c6..367376cda20 100644
--- a/ui/app/AppLayouts/Wallet/views/AssetsDetailView.qml
+++ b/ui/app/AppLayouts/Wallet/views/AssetsDetailView.qml
@@ -498,7 +498,7 @@ Item {
                                 }
                                 delegate: InformationTag {
                                     hoverEnabled: true
-                                    asset.name: Theme.svg(model.iconUrl)
+                                    asset.name: Assets.svg(model.iconUrl)
                                     asset.isImage: true
                                     tagPrimaryLabel.text: model.chainName
                                     tagSecondaryLabel.text: SQUtils.Utils.elideAndFormatWalletAddress(model.address)
diff --git a/ui/app/AppLayouts/Wallet/views/LeftTabView.qml b/ui/app/AppLayouts/Wallet/views/LeftTabView.qml
index 66b03b66e4e..0f7878ed332 100644
--- a/ui/app/AppLayouts/Wallet/views/LeftTabView.qml
+++ b/ui/app/AppLayouts/Wallet/views/LeftTabView.qml
@@ -371,7 +371,7 @@ Rectangle {
                                 objectName: "walletLeftListAmountValue"
                                 customColor: Theme.palette.textColor
                                 text: LocaleUtils.currencyAmountToLocaleString(RootStore.totalCurrencyBalance, {noSymbol: true})
-                                font.pixelSize: Theme.fontSize22
+                                font.pixelSize: Theme.fontSize(22)
                                 loading: RootStore.balanceLoading
                                 lineHeightMode: Text.FixedHeight
                                 lineHeight: 36
diff --git a/ui/app/AppLayouts/Wallet/views/LoadingGraphView.qml b/ui/app/AppLayouts/Wallet/views/LoadingGraphView.qml
index 1c42f5e41bb..0d8292c7f29 100644
--- a/ui/app/AppLayouts/Wallet/views/LoadingGraphView.qml
+++ b/ui/app/AppLayouts/Wallet/views/LoadingGraphView.qml
@@ -25,7 +25,7 @@ Loader {
 
         Image {
             id: mask
-            source: Theme.svg("mask/dummyLineGraph")
+            source: Assets.svg("mask/dummyLineGraph")
             sourceSize: Qt.size(parent.width, parent.height)
             smooth: true
             visible: false
diff --git a/ui/app/AppLayouts/Wallet/views/NetworkSelectorView.qml b/ui/app/AppLayouts/Wallet/views/NetworkSelectorView.qml
index 4a3d888863c..7f428889b6c 100644
--- a/ui/app/AppLayouts/Wallet/views/NetworkSelectorView.qml
+++ b/ui/app/AppLayouts/Wallet/views/NetworkSelectorView.qml
@@ -56,7 +56,7 @@ StatusListView {
         height: 48
         width: ListView.view.width
         title: model.chainName
-        iconUrl: Theme.svg(model.iconUrl)
+        iconUrl: Assets.svg(model.iconUrl)
         showIndicator: root.showIndicator
         multiSelection: root.multiSelection
         interactive: root.interactive
diff --git a/ui/app/AppLayouts/Wallet/views/SendModalFooter.qml b/ui/app/AppLayouts/Wallet/views/SendModalFooter.qml
index 58daa9f46bd..00a7f3eda1c 100644
--- a/ui/app/AppLayouts/Wallet/views/SendModalFooter.qml
+++ b/ui/app/AppLayouts/Wallet/views/SendModalFooter.qml
@@ -68,7 +68,7 @@ StatusDialogFooter {
             anchors.fill: parent
             Rectangle {
                 anchors.fill: parent
-                color: !!root.blurSource ? Theme.palette.alphaColor(root.color, 0.85) : root.color
+                color: !!root.blurSource ? StatusColors.alphaColor(root.color, 0.85) : root.color
                 radius: 8
 
                 // cover for the bottom rounded corners
@@ -94,7 +94,7 @@ StatusDialogFooter {
                 horizontalOffset: 0
                 verticalOffset: -3
                 samples: 24
-                color: Theme.palette.alphaColor(Theme.palette.dropShadow, 0.06)
+                color: StatusColors.alphaColor(Theme.palette.dropShadow, 0.06)
             }
 
             StatusDialogDivider {
diff --git a/ui/app/AppLayouts/Wallet/views/TokenSelectorAssetDelegate.qml b/ui/app/AppLayouts/Wallet/views/TokenSelectorAssetDelegate.qml
index 264d36c6214..68eab6f988c 100644
--- a/ui/app/AppLayouts/Wallet/views/TokenSelectorAssetDelegate.qml
+++ b/ui/app/AppLayouts/Wallet/views/TokenSelectorAssetDelegate.qml
@@ -122,7 +122,7 @@ ItemDelegate {
                     StatusRoundedImage {
                         Layout.preferredWidth: 16
                         Layout.preferredHeight: 16
-                        image.source: Theme.svg(model.iconUrl)
+                        image.source: Assets.svg(model.iconUrl)
                     }
                     StatusBaseText {
                         font.pixelSize: Theme.tertiaryTextFontSize
diff --git a/ui/app/AppLayouts/Wallet/views/TokenSelectorCollectibleDelegate.qml b/ui/app/AppLayouts/Wallet/views/TokenSelectorCollectibleDelegate.qml
index af26cc3fa6d..e1f1d3051be 100644
--- a/ui/app/AppLayouts/Wallet/views/TokenSelectorCollectibleDelegate.qml
+++ b/ui/app/AppLayouts/Wallet/views/TokenSelectorCollectibleDelegate.qml
@@ -95,7 +95,7 @@ ItemDelegate {
                     Layout.preferredWidth: 20
                     Layout.preferredHeight: 20
 
-                    image.source: Theme.svg(root.networkIcon)
+                    image.source: Assets.svg(root.networkIcon)
                     visible:(root.hovered || root.isAutoHovered) && !root.goDeeperIconVisible
                 }
 
diff --git a/ui/app/AppLayouts/stores/RootStore.qml b/ui/app/AppLayouts/stores/RootStore.qml
index 1d1762eb8f0..f0e800b9e1a 100644
--- a/ui/app/AppLayouts/stores/RootStore.qml
+++ b/ui/app/AppLayouts/stores/RootStore.qml
@@ -321,7 +321,7 @@ QtObject {
 
         proxyRoles: FastExpressionRole {
             function collectibleIcon(icon) {
-                return !!icon ? icon : Theme.png("tokens/DEFAULT-TOKEN")
+                return !!icon ? icon : Assets.png("tokens/DEFAULT-TOKEN")
             }
             name: "iconSource"
             expression: collectibleIcon(model.icon)
diff --git a/ui/app/mainui/AppMain.qml b/ui/app/mainui/AppMain.qml
index 566ac63f3ff..6f4b1f094ec 100644
--- a/ui/app/mainui/AppMain.qml
+++ b/ui/app/mainui/AppMain.qml
@@ -4,6 +4,7 @@ import QtQuick
 
 import QtQuick.Controls
 import QtQuick.Layouts
+import QtQuick.Window
 import QtQml.Models
 
 import AppLayouts.Browser
@@ -868,31 +869,24 @@ Item {
         property bool enableMessageBackupPopupSeen
         property var recentEmojis
         property string skinColor // NB: must be a string for the twemoji lib to work; we don't want the `#` in the name
-        property int theme: Theme.Style.System
+        property int theme: ThemeUtils.Style.System
         property int fontSize: {
-            if (appMain.width < Theme.portraitBreakpoint.width) {
-                return Theme.FontSize.FontSizeS
+            if (appMain.width < ThemeUtils.portraitBreakpoint.width) {
+                return ThemeUtils.FontSize.FontSizeS
             }
-            return Theme.FontSize.FontSizeM
+            return ThemeUtils.FontSize.FontSizeM
         }
         property int paddingFactor: {
-            if (appMain.width < Theme.portraitBreakpoint.width) {
-                return Theme.PaddingFactor.PaddingXXS
+            if (appMain.width < ThemeUtils.portraitBreakpoint.width) {
+                return ThemeUtils.PaddingFactor.PaddingXXS
             }
-            return Theme.PaddingFactor.PaddingM
+            return ThemeUtils.PaddingFactor.PaddingM
         }
 
         Component.onCompleted: {
-            Theme.changeTheme(appMainLocalSettings.theme)
-            Theme.changeFontSize(appMainLocalSettings.fontSize)
-            Theme.changePaddingFactor(appMainLocalSettings.paddingFactor)
-        }
-    }
-
-    Connections {
-        target: Application.styleHints
-        function onColorSchemeChanged() {
-            Theme.changeTheme(appMainLocalSettings.theme) // re-apply the theme when the System theme/colorscheme changes
+            ThemeUtils.changeTheme(appMain.Window.window, appMainLocalSettings.theme)
+            ThemeUtils.setFontSize(appMain.Window.window, appMainLocalSettings.fontSize)
+            ThemeUtils.setPaddingFactor(appMain.Window.window, appMainLocalSettings.paddingFactor)
         }
     }
 
@@ -2152,15 +2146,15 @@ Item {
 
                         onThemeChangeRequested: function(theme) {
                             appMainLocalSettings.theme = theme
-                            Theme.changeTheme(theme)
+                            ThemeUtils.changeTheme(appMain.Window.window, theme)
                         }
                         onFontSizeChangeRequested: function(fontSize) {
                             appMainLocalSettings.fontSize = fontSize
-                            Theme.changeFontSize(fontSize)
+                            ThemeUtils.setFontSize(appMain.Window.window, fontSize)
                         }
                         onPaddingFactorChangeRequested: function(paddingFactor) {
                             appMainLocalSettings.paddingFactor = paddingFactor
-                            Theme.changePaddingFactor(paddingFactor)
+                            ThemeUtils.setPaddingFactor(appMain.Window.window, paddingFactor)
                         }
                         // Communities related settings view:
                         onLeaveCommunityRequest: appMain.communitiesStore.leaveCommunity(communityId)
@@ -2394,7 +2388,7 @@ Item {
             Loader {
                 id: createChatView
 
-                readonly property bool isPortraitMode: appMain.width < Theme.portraitBreakpoint.width
+                readonly property bool isPortraitMode: appMain.width < ThemeUtils.portraitBreakpoint.width
                 property bool opened: false
                 readonly property real defaultWidth: parent.width - Constants.chatSectionLeftColumnWidth -
                          anchors.rightMargin - anchors.leftMargin
diff --git a/ui/app/mainui/Handlers/SendModalHandler.qml b/ui/app/mainui/Handlers/SendModalHandler.qml
index 11e1580330d..f740049167c 100644
--- a/ui/app/mainui/Handlers/SendModalHandler.qml
+++ b/ui/app/mainui/Handlers/SendModalHandler.qml
@@ -881,7 +881,7 @@ QtObject {
 
                     networkShortName: signSendAdaptor.selectedNetwork.shortName
                     networkName: signSendAdaptor.selectedNetwork.chainName
-                    networkIconPath: Theme.svg(signSendAdaptor.selectedNetwork.iconUrl)
+                    networkIconPath: Assets.svg(signSendAdaptor.selectedNetwork.iconUrl)
                     networkBlockExplorerUrl: signSendAdaptor.selectedNetwork.blockExplorerURL
                     networkChainId: signSendAdaptor.selectedNetwork.chainId
 
diff --git a/ui/app/mainui/SplashScreen.qml b/ui/app/mainui/SplashScreen.qml
index af23aa8edce..03179aa1c50 100644
--- a/ui/app/mainui/SplashScreen.qml
+++ b/ui/app/mainui/SplashScreen.qml
@@ -24,14 +24,14 @@ Item {
             Layout.alignment: Qt.AlignHCenter
             Layout.preferredWidth: 320
             Layout.preferredHeight: 320
-            source: Theme.png("status-preparing")
+            source: Assets.png("status-preparing")
         }
         StatusBaseText {
             id: loadingText
             Layout.topMargin: 12
             Layout.fillWidth: true
             horizontalAlignment: Qt.AlignHCenter
-            font.pixelSize: Theme.fontSize22
+            font.pixelSize: Theme.fontSize(22)
             font.bold: true
             text: qsTr("Preparing Status for you")
         }
diff --git a/ui/app/mainui/StatusTrayIcon.qml b/ui/app/mainui/StatusTrayIcon.qml
index 6e026a515d4..5b2ed23dbe2 100644
--- a/ui/app/mainui/StatusTrayIcon.qml
+++ b/ui/app/mainui/StatusTrayIcon.qml
@@ -16,9 +16,9 @@ SystemTrayIcon {
 
     icon.source: {
         if (Qt.platform.os === SQUtils.Utils.windows) {
-            return root.showRedDot ? Theme.svg("status-logo-white-windows-with-red-dot") : Theme.svg("status-logo-white-windows")
+            return root.showRedDot ? Assets.svg("status-logo-white-windows-with-red-dot") : Assets.svg("status-logo-white-windows")
         }
-        return root.showRedDot ? Theme.svg("status-logo-white-with-red-dot") : Theme.svg("status-logo-white")
+        return root.showRedDot ? Assets.svg("status-logo-white-with-red-dot") : Assets.svg("status-logo-white")
     }
     icon.mask: Qt.platform.os !== SQUtils.Utils.windows
 
diff --git a/ui/app/mainui/ToastsManager.qml b/ui/app/mainui/ToastsManager.qml
index ce8a3acf490..40a1418d739 100644
--- a/ui/app/mainui/ToastsManager.qml
+++ b/ui/app/mainui/ToastsManager.qml
@@ -204,7 +204,7 @@ QtObject {
             Global.displayImageToastWithActionMessage(
                 newsTitle,
                 qsTr("Read more"),
-                Theme.png("status-logo"),
+                Assets.png("status-logo"),
                 Constants.ephemeralNotificationType.normal,
                 ToastsManager.ActionType.OpenNewsMessagePopup,
                 notificationId
diff --git a/ui/imports/shared/LoadingAnimation.qml b/ui/imports/shared/LoadingAnimation.qml
index 0a070ff1443..a899ea0a000 100644
--- a/ui/imports/shared/LoadingAnimation.qml
+++ b/ui/imports/shared/LoadingAnimation.qml
@@ -7,7 +7,7 @@ import shared.panels
 
 SVGImage {
     id: loadingImg
-    source: Theme.svg("loading")
+    source: Assets.svg("loading")
     width: 25
     height: 25
     fillMode: Image.Stretch
diff --git a/ui/imports/shared/controls/AssetsDetailsHeader.qml b/ui/imports/shared/controls/AssetsDetailsHeader.qml
index 769ca261a89..7d915797e3c 100644
--- a/ui/imports/shared/controls/AssetsDetailsHeader.qml
+++ b/ui/imports/shared/controls/AssetsDetailsHeader.qml
@@ -49,7 +49,7 @@ Control {
                 id: tokenName
                 Layout.alignment: Qt.AlignHCenter
                 Layout.maximumWidth: root.width-root.asset.width-8
-                font.pixelSize: Theme.fontSize28
+                font.pixelSize: Theme.fontSize(28)
                 font.bold: true
                 lineHeight: 38
                 lineHeightMode: Text.FixedHeight
@@ -78,7 +78,7 @@ Control {
                 StatusTextWithLoadingState {
                     id: cryptoBalance
                     Layout.alignment: Qt.AlignHCenter
-                    font.pixelSize: Theme.fontSize28
+                    font.pixelSize: Theme.fontSize(28)
                     font.bold: true
                     lineHeight: 38
                     lineHeightMode: Text.FixedHeight
@@ -137,7 +137,7 @@ Control {
                         }
                         tagPrimaryLabel.text: root.formatBalance(aggregatedbalance)
                         tagPrimaryLabel.color: model.chainColor
-                        asset.name: Theme.svg(model.iconUrl)
+                        asset.name: Assets.svg(model.iconUrl)
                         asset.isImage: true
                         loading: root.isLoading
                         visible: balancesAggregator.value > 0
diff --git a/ui/imports/shared/controls/CountdownPill.qml b/ui/imports/shared/controls/CountdownPill.qml
index 4d9980a1af0..c30dab7350c 100644
--- a/ui/imports/shared/controls/CountdownPill.qml
+++ b/ui/imports/shared/controls/CountdownPill.qml
@@ -39,7 +39,7 @@ IssuePill {
         return CountdownPill.Type.Primary
     }
 
-    font.family: Theme.codeFont.name
+    font.family: Fonts.codeFont.family
 
     function reset() {
         if (expirationSeconds === 0) {
diff --git a/ui/imports/shared/controls/StatusSyncCodeInput.qml b/ui/imports/shared/controls/StatusSyncCodeInput.qml
index d9dc47e8396..96275896482 100644
--- a/ui/imports/shared/controls/StatusSyncCodeInput.qml
+++ b/ui/imports/shared/controls/StatusSyncCodeInput.qml
@@ -19,7 +19,7 @@ StatusInput {
     property bool readOnly: false
 
     input.edit.readOnly: root.readOnly
-    input.font: Theme.monoFont.name
+    input.font: Fonts.monoFont.family
     input.placeholderFont: root.input.font
 
     input.rightComponent: {
diff --git a/ui/imports/shared/controls/StyledTextEdit.qml b/ui/imports/shared/controls/StyledTextEdit.qml
index 82ca247c40d..4d652c0c064 100644
--- a/ui/imports/shared/controls/StyledTextEdit.qml
+++ b/ui/imports/shared/controls/StyledTextEdit.qml
@@ -5,7 +5,7 @@ import StatusQ.Core.Theme
 import utils
 
 TextEdit {
-    font.family: Theme.baseFont.name
+    font.family: Fonts.baseFont.family
     color: Theme.palette.textColor
     selectedTextColor: Theme.palette.textColor
     selectionColor: Theme.palette.primaryColor2
diff --git a/ui/imports/shared/controls/TransactionDelegate.qml b/ui/imports/shared/controls/TransactionDelegate.qml
index 91b541f9c8f..8dca0232155 100644
--- a/ui/imports/shared/controls/TransactionDelegate.qml
+++ b/ui/imports/shared/controls/TransactionDelegate.qml
@@ -176,12 +176,12 @@ StatusListItem {
         name: {
             switch(root.transactionStatus) {
             case Constants.TransactionStatus.Pending:
-                return Theme.svg("transaction/pending")
+                return Assets.svg("transaction/pending")
             case Constants.TransactionStatus.Complete:
             case Constants.TransactionStatus.Finalised:
-                return Theme.svg("transaction/confirmed")
+                return Assets.svg("transaction/confirmed")
             case Constants.TransactionStatus.Failed:
-                return Theme.svg("transaction/failed")
+                return Assets.svg("transaction/failed")
             default:
                 return ""
             }
diff --git a/ui/imports/shared/controls/WalletAccountListItem.qml b/ui/imports/shared/controls/WalletAccountListItem.qml
index caae6719868..8ca627b3d87 100644
--- a/ui/imports/shared/controls/WalletAccountListItem.qml
+++ b/ui/imports/shared/controls/WalletAccountListItem.qml
@@ -45,7 +45,7 @@ StatusListItem {
         return ""
     }
     statusListItemSubTitle.wrapMode: Text.NoWrap
-    statusListItemSubTitle.font.family: Theme.monoFont.name
+    statusListItemSubTitle.font.family: Fonts.monoFont.family
     asset.emoji: root.emoji
     asset.color: root.walletColor
     asset.name: root.emoji ? "filled-account": ""
@@ -94,7 +94,7 @@ StatusListItem {
         titleText.font.pixelSize: Theme.tertiaryTextFontSize
         titleText.color: root.accountBalance.balance === "0" ? Theme.palette.baseColor1 : Theme.palette.directColor1
         asset.isImage: true
-        asset.name: Theme.svg(root.accountBalance.iconUrl)
+        asset.name: Assets.svg(root.accountBalance.iconUrl)
         asset.color: root.accountBalance.chainColor
         closeButtonVisible: false
         hoverEnabled: true
diff --git a/ui/imports/shared/controls/chat/EmojiReaction.qml b/ui/imports/shared/controls/chat/EmojiReaction.qml
index 0a306c3a59d..0f6b8ad3280 100644
--- a/ui/imports/shared/controls/chat/EmojiReaction.qml
+++ b/ui/imports/shared/controls/chat/EmojiReaction.qml
@@ -26,8 +26,8 @@ Rectangle {
     StatusEmoji {
         id: statusEmoji
         anchors.centerIn: parent
-        width: Theme.fontSize23
-        height: Theme.fontSize23
+        width: Theme.fontSize(23)
+        height: Theme.fontSize(23)
         emojiId: root.emojiId
     }
 
diff --git a/ui/imports/shared/controls/chat/PaymentRequestMiniCardDelegate.qml b/ui/imports/shared/controls/chat/PaymentRequestMiniCardDelegate.qml
index ecb73b330a4..8fb7b0b3051 100644
--- a/ui/imports/shared/controls/chat/PaymentRequestMiniCardDelegate.qml
+++ b/ui/imports/shared/controls/chat/PaymentRequestMiniCardDelegate.qml
@@ -45,7 +45,7 @@ CalloutCard {
                 asset.bgHeight: 36
                 asset.bgWidth: 36
                 asset.color: Theme.palette.primaryColor1
-                asset.name: Theme.svg("send")
+                asset.name: Assets.svg("send")
 
                 StatusSmartIdenticon {
                     anchors.bottom: parent.bottom
diff --git a/ui/imports/shared/controls/chat/ProfileHeader.qml b/ui/imports/shared/controls/chat/ProfileHeader.qml
index 0f5b8cd96e7..5cb330856d7 100644
--- a/ui/imports/shared/controls/chat/ProfileHeader.qml
+++ b/ui/imports/shared/controls/chat/ProfileHeader.qml
@@ -228,7 +228,7 @@ Item {
                     objectName: "ProfileHeader_displayNameEditIcon"
                     height: compact ? 10 : 16
                     width: compact ? 10 : 16
-                    source: Theme.svg("edit-message")
+                    source: Assets.svg("edit-message")
                     StatusMouseArea {
                         anchors.fill: parent
                         cursorShape: Qt.PointingHandCursor
diff --git a/ui/imports/shared/controls/chat/VerificationLabel.qml b/ui/imports/shared/controls/chat/VerificationLabel.qml
index cd9afe8d7a0..c32ac83d2bd 100644
--- a/ui/imports/shared/controls/chat/VerificationLabel.qml
+++ b/ui/imports/shared/controls/chat/VerificationLabel.qml
@@ -18,9 +18,9 @@ SVGImage {
     source: {
         switch(trustStatus) {
             case Constants.trustStatus.trusted:
-                return Theme.svg("verified");
+                return Assets.svg("verified");
             case Constants.trustStatus.untrustworthy:
-                return Theme.svg("untrustworthy");
+                return Assets.svg("untrustworthy");
             default:
                 return "";
         }
diff --git a/ui/imports/shared/controls/delegates/PaymentRequestCardDelegate.qml b/ui/imports/shared/controls/delegates/PaymentRequestCardDelegate.qml
index 087c1094b89..e2d0d546326 100644
--- a/ui/imports/shared/controls/delegates/PaymentRequestCardDelegate.qml
+++ b/ui/imports/shared/controls/delegates/PaymentRequestCardDelegate.qml
@@ -63,7 +63,7 @@ CalloutCard {
             StatusImage {
                 anchors.fill: parent
                 asynchronous: true
-                source: Theme.png("chat/request_payment_banner")
+                source: Assets.png("chat/request_payment_banner")
             }
 
             Row {
diff --git a/ui/imports/shared/panels/Address.qml b/ui/imports/shared/panels/Address.qml
index 156c17f5966..e4a735cd73a 100644
--- a/ui/imports/shared/panels/Address.qml
+++ b/ui/imports/shared/panels/Address.qml
@@ -12,7 +12,7 @@ StyledText {
     id: addressComponent
     text: "0x9ce0056c5fc6bb9459a4dcfa35eaad8c1fee5ce9"
     font.pixelSize: Theme.additionalTextSize
-    font.family: Theme.monoFont.name
+    font.family: Fonts.monoFont.family
     elide: Text.ElideMiddle
     color: Theme.palette.secondaryText
 
diff --git a/ui/imports/shared/panels/ImageLoader.qml b/ui/imports/shared/panels/ImageLoader.qml
index d7197f34690..9e1e16464ac 100644
--- a/ui/imports/shared/panels/ImageLoader.qml
+++ b/ui/imports/shared/panels/ImageLoader.qml
@@ -91,7 +91,7 @@ Rectangle {
     Component {
         id: reload
         SVGImage {
-            source: Theme.svg("reload")
+            source: Assets.svg("reload")
             mipmap: false
             width: 15.5
             height: 19.5
diff --git a/ui/imports/shared/panels/ModuleWarning.qml b/ui/imports/shared/panels/ModuleWarning.qml
index cd0dc7cb2fc..8d5c49d3791 100644
--- a/ui/imports/shared/panels/ModuleWarning.qml
+++ b/ui/imports/shared/panels/ModuleWarning.qml
@@ -136,7 +136,7 @@ Item {
 
         Behavior on color {
             ColorAnimation {
-                duration: Theme.AnimationDuration.Fast
+                duration: ThemeUtils.AnimationDuration.Fast
             }
         }
 
@@ -229,7 +229,7 @@ Item {
                     text: button.text
                     font.pixelSize: Theme.additionalTextSize
                     font.weight: Font.Medium
-                    font.family: Theme.baseFont.name
+                    font.family: Fonts.baseFont.family
                     horizontalAlignment: Text.AlignHCenter
                     verticalAlignment: Text.AlignVCenter
                     color: Theme.palette.indirectColor1
@@ -238,7 +238,7 @@ Item {
                     radius: 4
                     border.width: 1
                     border.color: Theme.palette.indirectColor3
-                    color: Theme.palette.getColor("white", button.hovered ? 0.4 : 0.1)
+                    color: StatusColors.getColor("white", button.hovered ? 0.4 : 0.1)
                 }
                 HoverHandler {
                     cursorShape: Qt.PointingHandCursor
diff --git a/ui/imports/shared/panels/NoImageUploadedPanel.qml b/ui/imports/shared/panels/NoImageUploadedPanel.qml
index 7ebeff59313..92fe892063f 100644
--- a/ui/imports/shared/panels/NoImageUploadedPanel.qml
+++ b/ui/imports/shared/panels/NoImageUploadedPanel.qml
@@ -79,7 +79,7 @@ Control {
         id: content
         Image {
             id: imageImg
-            source: Theme.svg("images_icon")
+            source: Assets.svg("images_icon")
             width: 20
             height: 18
             sourceSize.width: width || undefined
diff --git a/ui/imports/shared/panels/PrivacyWallCarousel.qml b/ui/imports/shared/panels/PrivacyWallCarousel.qml
index 6d05dc4e846..0875e048c5e 100644
--- a/ui/imports/shared/panels/PrivacyWallCarousel.qml
+++ b/ui/imports/shared/panels/PrivacyWallCarousel.qml
@@ -74,7 +74,7 @@ Control {
                 id: fadeSwap
                 OpacityAnimator { target: placeholderImage; from: 1; to: 0; duration: 500;}
                 PropertyAction   { target: placeholderImage; property: "source";
-                                   value: Theme.png(root.model.get(pageIndicator.currentIndex).image) }
+                                   value: Assets.png(root.model.get(pageIndicator.currentIndex).image) }
                 OpacityAnimator { target: placeholderImage; from: 0; to: 1; duration: 500; }
             }
 
@@ -89,7 +89,7 @@ Control {
             }
 
             Component.onCompleted: {
-                placeholderImage.source = Theme.png(root.model.get(pageIndicator.currentIndex).image)
+                placeholderImage.source = Assets.png(root.model.get(pageIndicator.currentIndex).image)
                 initialized = true
             }
         }
diff --git a/ui/imports/shared/panels/RoundedIcon.qml b/ui/imports/shared/panels/RoundedIcon.qml
index f10d07de15b..5fc43c2ef5e 100644
--- a/ui/imports/shared/panels/RoundedIcon.qml
+++ b/ui/imports/shared/panels/RoundedIcon.qml
@@ -36,7 +36,7 @@ Rectangle {
             width: 12
             height: 12
             fillMode: Image.PreserveAspectFit
-            source: Theme.svg("new_chat")
+            source: Assets.svg("new_chat")
         }
         ColorOverlay {
             anchors.fill: roundedIconImage
diff --git a/ui/imports/shared/panels/StyledText.qml b/ui/imports/shared/panels/StyledText.qml
index e1cf3e25488..58b10cd3fb0 100644
--- a/ui/imports/shared/panels/StyledText.qml
+++ b/ui/imports/shared/panels/StyledText.qml
@@ -3,7 +3,7 @@ import QtQuick
 import StatusQ.Core.Theme
 
 Text {
-    font.family: Theme.baseFont.name
+    font.family: Fonts.baseFont.family
     font.pixelSize: Theme.primaryTextFontSize
     color: Theme.palette.textColor
 }
diff --git a/ui/imports/shared/popups/BlockchainExplorersMenu.qml b/ui/imports/shared/popups/BlockchainExplorersMenu.qml
index a7848c7cfea..6a49583df76 100644
--- a/ui/imports/shared/popups/BlockchainExplorersMenu.qml
+++ b/ui/imports/shared/popups/BlockchainExplorersMenu.qml
@@ -26,7 +26,7 @@ StatusMenu {
         delegate: StatusMenuItem {
             action: StatusAction {
                 text: Utils.getChainExplorerName(model.shortName)
-                assetSettings.name: Theme.svg(model.iconUrl)
+                assetSettings.name: Assets.svg(model.iconUrl)
                 assetSettings.isImage: true
                 onTriggered: {
                     root.networkClicked(model.shortName, model.isTest)
diff --git a/ui/imports/shared/popups/DownloadPage.qml b/ui/imports/shared/popups/DownloadPage.qml
index 56e1b4781b8..bea454c86bf 100644
--- a/ui/imports/shared/popups/DownloadPage.qml
+++ b/ui/imports/shared/popups/DownloadPage.qml
@@ -34,7 +34,7 @@ Rectangle {
 
     SVGImage {
         id: logoImage
-        source: Theme.svg(Theme.palette.name == "light" ? "status-logo-light" : "status-logo-dark")
+        source: Assets.svg(Theme.palette.name == "light" ? "status-logo-light" : "status-logo-dark")
         anchors.horizontalCenter: parent.horizontalCenter
         anchors.top: parent.top
         anchors.topMargin: 108
@@ -46,7 +46,7 @@ Rectangle {
         anchors.horizontalCenter: parent.horizontalCenter
         anchors.top: logoImage.bottom
         anchors.topMargin: 75
-        font.pixelSize: Theme.fontSize38
+        font.pixelSize: Theme.fontSize(38)
         font.weight: Font.Medium
         color: Theme.palette.directColor1
     }
@@ -57,7 +57,7 @@ Rectangle {
         anchors.horizontalCenter: parent.horizontalCenter
         anchors.top: title.bottom
         anchors.topMargin: 32
-        font.pixelSize: Theme.fontSize28
+        font.pixelSize: Theme.fontSize(28)
         color: Theme.palette.directColor1
     }
 
@@ -66,7 +66,7 @@ Rectangle {
         text: qsTr("There's new version available to download.")
         anchors.horizontalCenter: parent.horizontalCenter
         anchors.top: currentVersionText.bottom
-        font.pixelSize: Theme.fontSize28
+        font.pixelSize: Theme.fontSize(28)
         color: Theme.palette.directColor1
     }
 
diff --git a/ui/imports/shared/popups/EnableBiometricsPopup.qml b/ui/imports/shared/popups/EnableBiometricsPopup.qml
index cce2caf350f..aebc38c21b4 100644
--- a/ui/imports/shared/popups/EnableBiometricsPopup.qml
+++ b/ui/imports/shared/popups/EnableBiometricsPopup.qml
@@ -28,7 +28,7 @@ StatusDialog {
             Layout.alignment: Qt.AlignHCenter
             mipmap: true
             smooth: false
-            source: Theme.png("onboarding/enable_biometrics")
+            source: Assets.png("onboarding/enable_biometrics")
         }
         StatusBaseText {
             Layout.fillWidth: true
diff --git a/ui/imports/shared/popups/IntroduceYourselfPopup.qml b/ui/imports/shared/popups/IntroduceYourselfPopup.qml
index beb0bc3ea37..75b7d39163c 100644
--- a/ui/imports/shared/popups/IntroduceYourselfPopup.qml
+++ b/ui/imports/shared/popups/IntroduceYourselfPopup.qml
@@ -95,7 +95,7 @@ StatusDialog {
 
                         name: root.pubKey
                         usesDefaultName: true
-                        image: Theme.png("onboarding/avatar")
+                        image: Assets.png("onboarding/avatar")
                         userColor: Utils.colorForColorId(root.colorId)
                         imageWidth: 68
                         imageHeight: 68
diff --git a/ui/imports/shared/popups/NewsMessagePopup.qml b/ui/imports/shared/popups/NewsMessagePopup.qml
index 956e8ebb5d4..871da133e03 100644
--- a/ui/imports/shared/popups/NewsMessagePopup.qml
+++ b/ui/imports/shared/popups/NewsMessagePopup.qml
@@ -48,7 +48,7 @@ StatusDialog {
             width: 40
             height: 40
             StatusImage {
-                source: Theme.png("status")
+                source: Assets.png("status")
                 anchors.fill: parent
             }
         }
diff --git a/ui/imports/shared/popups/addaccount/panels/DerivationPathInput.qml b/ui/imports/shared/popups/addaccount/panels/DerivationPathInput.qml
index a0084bb8e02..03c3d09b8c8 100644
--- a/ui/imports/shared/popups/addaccount/panels/DerivationPathInput.qml
+++ b/ui/imports/shared/popups/addaccount/panels/DerivationPathInput.qml
@@ -87,7 +87,7 @@ Item {
         id: controller
 
         enabledColor: root.enabled ? Theme.palette.directColor1 : Theme.palette.baseColor1
-        frozenColor: Theme.palette.getColor('grey5')
+        frozenColor: StatusColors.getColor('grey5')
         errorColor: Theme.palette.dangerColor1
         warningColor: Theme.palette.warningColor1
         complainTooBigAccIndex: d.detectedStandardBasePath
diff --git a/ui/imports/shared/popups/addaccount/states/ConfirmAddingNewMasterKey.qml b/ui/imports/shared/popups/addaccount/states/ConfirmAddingNewMasterKey.qml
index 4b6c633a46d..f288acb7763 100644
--- a/ui/imports/shared/popups/addaccount/states/ConfirmAddingNewMasterKey.qml
+++ b/ui/imports/shared/popups/addaccount/states/ConfirmAddingNewMasterKey.qml
@@ -50,7 +50,7 @@ Item {
             Layout.preferredWidth: 120
             Layout.preferredHeight: 120
             fillMode: Image.PreserveAspectFit
-            source: Theme.png("onboarding/keys")
+            source: Assets.png("onboarding/keys")
             mipmap: true
             cache: false
         }
@@ -61,7 +61,7 @@ Item {
             horizontalAlignment: Text.AlignHCenter
             wrapMode: Text.WordWrap
             font.bold: true
-            font.pixelSize: Theme.fontSize22
+            font.pixelSize: Theme.fontSize(22)
             text: qsTr("Secure Your Assets and Funds")
         }
 
diff --git a/ui/imports/shared/popups/addaccount/states/ConfirmSeedPhraseBackup.qml b/ui/imports/shared/popups/addaccount/states/ConfirmSeedPhraseBackup.qml
index 5162e08ebc5..a745680875b 100644
--- a/ui/imports/shared/popups/addaccount/states/ConfirmSeedPhraseBackup.qml
+++ b/ui/imports/shared/popups/addaccount/states/ConfirmSeedPhraseBackup.qml
@@ -59,7 +59,7 @@ Item {
             horizontalAlignment: Text.AlignHCenter
             wrapMode: Text.WordWrap
             font.bold: true
-            font.pixelSize: Theme.fontSize18
+            font.pixelSize: Theme.fontSize(18)
             color: Theme.palette.directColor1
             text: qsTr("Store Your Phrase Offline and Complete Your Back Up")
         }
diff --git a/ui/imports/shared/popups/keycard/helpers/KeycardImage.qml b/ui/imports/shared/popups/keycard/helpers/KeycardImage.qml
index 1b6e05a881b..766227ee27f 100644
--- a/ui/imports/shared/popups/keycard/helpers/KeycardImage.qml
+++ b/ui/imports/shared/popups/keycard/helpers/KeycardImage.qml
@@ -59,7 +59,7 @@ Item {
         antialiasing: true
         mipmap: true
         source: d.isAnimation?
-                    Theme.png(root.pattern.arg(img.currentImgIndex)) :
+                    Assets.png(root.pattern.arg(img.currentImgIndex)) :
                     root.source
 
         property int currentImgIndex: root.startImgIndexForTheFirstLoop
diff --git a/ui/imports/shared/popups/keycard/states/EnterPassword.qml b/ui/imports/shared/popups/keycard/states/EnterPassword.qml
index 9d312eaacdb..dcaf5696140 100644
--- a/ui/imports/shared/popups/keycard/states/EnterPassword.qml
+++ b/ui/imports/shared/popups/keycard/states/EnterPassword.qml
@@ -121,7 +121,7 @@ Item {
             when: root.sharedKeycardModule.currentState.stateType === Constants.keycardSharedState.enterPassword
             PropertyChanges {
                 target: image
-                source: Theme.png("keycard/authenticate")
+                source: Assets.png("keycard/authenticate")
                 pattern: ""
             }
             PropertyChanges {
@@ -144,7 +144,7 @@ Item {
             when: root.sharedKeycardModule.currentState.stateType === Constants.keycardSharedState.wrongPassword
             PropertyChanges {
                 target: image
-                source: Theme.png("keycard/authenticate")
+                source: Assets.png("keycard/authenticate")
                 pattern: ""
             }
             PropertyChanges {
@@ -168,7 +168,7 @@ Item {
             when: root.sharedKeycardModule.currentState.stateType === Constants.keycardSharedState.enterBiometricsPassword
             PropertyChanges {
                 target: image
-                source: Theme.png("keycard/biometrics-success")
+                source: Assets.png("keycard/biometrics-success")
                 pattern: ""
             }
             PropertyChanges {
@@ -193,7 +193,7 @@ Item {
             when: root.sharedKeycardModule.currentState.stateType === Constants.keycardSharedState.wrongBiometricsPassword
             PropertyChanges {
                 target: image
-                source: Theme.png("keycard/biometrics-success")
+                source: Assets.png("keycard/biometrics-success")
                 pattern: ""
             }
             PropertyChanges {
diff --git a/ui/imports/shared/popups/keycard/states/KeycardInit.qml b/ui/imports/shared/popups/keycard/states/KeycardInit.qml
index a4d114ab2f2..1d6533006bd 100644
--- a/ui/imports/shared/popups/keycard/states/KeycardInit.qml
+++ b/ui/imports/shared/popups/keycard/states/KeycardInit.qml
@@ -566,7 +566,7 @@ Item {
             }
             PropertyChanges {
                 target: image
-                source: Theme.png("keycard/empty-reader")
+                source: Assets.png("keycard/empty-reader")
                 pattern: ""
             }
             PropertyChanges {
@@ -765,7 +765,7 @@ Item {
                 pattern: d.authenticationOrSigning?
                              "" : Constants.keycardAnimations.strongError.pattern
                 source: d.authenticationOrSigning?
-                            Theme.png("keycard/plain-error") : ""
+                            Assets.png("keycard/plain-error") : ""
                 startImgIndexForTheFirstLoop: d.authenticationOrSigning?
                                                   0 : Constants.keycardAnimations.strongError.startImgIndexForTheFirstLoop
                 startImgIndexForOtherLoops: d.authenticationOrSigning?
@@ -829,7 +829,7 @@ Item {
             }
             PropertyChanges {
                 target: image
-                source: Theme.png("keycard/plain-error")
+                source: Assets.png("keycard/plain-error")
                 pattern: ""
             }
             PropertyChanges {
@@ -868,7 +868,7 @@ Item {
             }
             PropertyChanges {
                 target: image
-                source: Theme.png("keycard/card-inserted")
+                source: Assets.png("keycard/card-inserted")
                 pattern: ""
             }
             PropertyChanges {
@@ -896,7 +896,7 @@ Item {
             }
             PropertyChanges {
                 target: image
-                source: Theme.png("keycard/card-empty")
+                source: Assets.png("keycard/card-empty")
                 pattern: ""
             }
             PropertyChanges {
@@ -924,7 +924,7 @@ Item {
             }
             PropertyChanges {
                 target: image
-                source: Theme.png("keycard/card-inserted")
+                source: Assets.png("keycard/card-inserted")
                 pattern: ""
             }
             PropertyChanges {
@@ -1224,7 +1224,7 @@ Item {
             }
             PropertyChanges {
                 target: image
-                source: Theme.png("keycard/card-inserted")
+                source: Assets.png("keycard/card-inserted")
                 pattern: ""
             }
             PropertyChanges {
@@ -1249,7 +1249,7 @@ Item {
             }
             PropertyChanges {
                 target: image
-                source: Theme.png("keycard/card-inserted")
+                source: Assets.png("keycard/card-inserted")
                 pattern: ""
             }
             PropertyChanges {
@@ -1262,7 +1262,7 @@ Item {
             when: root.sharedKeycardModule.currentState.stateType === Constants.keycardSharedState.biometricsPasswordFailed
             PropertyChanges {
                 target: image
-                source: Theme.png("keycard/biometrics-fail")
+                source: Assets.png("keycard/biometrics-fail")
                 pattern: ""
             }
             PropertyChanges {
@@ -1283,7 +1283,7 @@ Item {
             when: root.sharedKeycardModule.currentState.stateType === Constants.keycardSharedState.biometricsPinFailed
             PropertyChanges {
                 target: image
-                source: Theme.png("keycard/plain-error")
+                source: Assets.png("keycard/plain-error")
                 pattern: ""
             }
             PropertyChanges {
@@ -1304,7 +1304,7 @@ Item {
             when: root.sharedKeycardModule.currentState.stateType === Constants.keycardSharedState.biometricsPinInvalid
             PropertyChanges {
                 target: image
-                source: Theme.png("keycard/plain-error")
+                source: Assets.png("keycard/plain-error")
                 pattern: ""
             }
             PropertyChanges {
@@ -1386,7 +1386,7 @@ Item {
             }
             PropertyChanges {
                 target: image
-                source: Theme.png("keycard/card-inserted")
+                source: Assets.png("keycard/card-inserted")
                 pattern: ""
             }
             PropertyChanges {
@@ -1538,7 +1538,7 @@ Item {
             }
             PropertyChanges {
                 target: image
-                source: Theme.png("keycard/biometrics-success")
+                source: Assets.png("keycard/biometrics-success")
                 pattern: ""
             }
             PropertyChanges {
diff --git a/ui/imports/shared/popups/keycard/states/KeycardPin.qml b/ui/imports/shared/popups/keycard/states/KeycardPin.qml
index e01aac1efce..71f92d1e9fd 100644
--- a/ui/imports/shared/popups/keycard/states/KeycardPin.qml
+++ b/ui/imports/shared/popups/keycard/states/KeycardPin.qml
@@ -119,7 +119,7 @@ Item {
                 root.pinUpdated(pinInput)
                 if (root.sharedKeycardModule.currentState.stateType !== Constants.keycardSharedState.wrongPin &&
                         root.sharedKeycardModule.currentState.stateType !== Constants.keycardSharedState.wrongKeychainPin) {
-                    image.source = Theme.png("keycard/enter-pin-%1".arg(pinInput.length))
+                    image.source = Assets.png("keycard/enter-pin-%1".arg(pinInput.length))
                 }
                 if(pinInput.length === 0) {
                     return
@@ -144,7 +144,7 @@ Item {
                         root.sharedKeycardModule.currentState.doSecondaryAction()
                     } else {
                         info.text = qsTr("PINs don't match")
-                        image.source = Theme.png("keycard/plain-error")
+                        image.source = Assets.png("keycard/plain-error")
                     }
                 }
             }
@@ -224,7 +224,7 @@ Item {
             when: root.sharedKeycardModule.currentState.stateType === Constants.keycardSharedState.enterPin
             PropertyChanges {
                 target: image
-                source: Theme.png("keycard/card-empty")
+                source: Assets.png("keycard/card-empty")
                 pattern: ""
             }
             PropertyChanges {
@@ -256,7 +256,7 @@ Item {
             when: root.sharedKeycardModule.currentState.stateType === Constants.keycardSharedState.wrongPin
             PropertyChanges {
                 target: image
-                source: Theme.png("keycard/plain-error")
+                source: Assets.png("keycard/plain-error")
                 pattern: ""
             }
             PropertyChanges {
@@ -289,7 +289,7 @@ Item {
             when: root.sharedKeycardModule.currentState.stateType === Constants.keycardSharedState.wrongKeychainPin
             PropertyChanges {
                 target: image
-                source: Theme.png("keycard/plain-error")
+                source: Assets.png("keycard/plain-error")
                 pattern: ""
             }
             PropertyChanges {
@@ -324,7 +324,7 @@ Item {
             when: root.sharedKeycardModule.currentState.stateType === Constants.keycardSharedState.createPin
             PropertyChanges {
                 target: image
-                source: Theme.png("keycard/enter-pin-0")
+                source: Assets.png("keycard/enter-pin-0")
                 pattern: ""
             }
             PropertyChanges {
@@ -363,7 +363,7 @@ Item {
             when: root.sharedKeycardModule.currentState.stateType === Constants.keycardSharedState.repeatPin
             PropertyChanges {
                 target: image
-                source: Theme.png("keycard/enter-pin-0")
+                source: Assets.png("keycard/enter-pin-0")
                 pattern: ""
             }
             PropertyChanges {
diff --git a/ui/imports/shared/popups/keycard/states/KeycardPuk.qml b/ui/imports/shared/popups/keycard/states/KeycardPuk.qml
index ede7be83240..18c746101a8 100644
--- a/ui/imports/shared/popups/keycard/states/KeycardPuk.qml
+++ b/ui/imports/shared/popups/keycard/states/KeycardPuk.qml
@@ -66,7 +66,7 @@ Item {
                 root.pukUpdated(pinInput)
                 if (root.sharedKeycardModule.currentState.stateType !== Constants.keycardSharedState.enterPuk &&
                         root.sharedKeycardModule.currentState.stateType !== Constants.keycardSharedState.wrongPuk) {
-                    image.source = Theme.png("keycard/card-inserted")
+                    image.source = Assets.png("keycard/card-inserted")
                 }
                 if(pinInput.length == 0) {
                     return
@@ -84,7 +84,7 @@ Item {
                         root.sharedKeycardModule.currentState.doSecondaryAction()
                     } else {
                         info.text = qsTr("The PUK doesn’t match")
-                        image.source = Theme.png("keycard/plain-error")
+                        image.source = Assets.png("keycard/plain-error")
                     }
                 }
             }
@@ -117,7 +117,7 @@ Item {
             when: root.sharedKeycardModule.currentState.stateType === Constants.keycardSharedState.enterPuk
             PropertyChanges {
                 target: image
-                source: Theme.png("keycard/card-inserted")
+                source: Assets.png("keycard/card-inserted")
                 pattern: ""
             }
             PropertyChanges {
@@ -140,7 +140,7 @@ Item {
             when: root.sharedKeycardModule.currentState.stateType === Constants.keycardSharedState.wrongPuk
             PropertyChanges {
                 target: image
-                source: Theme.png("keycard/plain-error")
+                source: Assets.png("keycard/plain-error")
                 pattern: ""
             }
             PropertyChanges {
@@ -169,7 +169,7 @@ Item {
             when: root.sharedKeycardModule.currentState.stateType === Constants.keycardSharedState.createPuk
             PropertyChanges {
                 target: image
-                source: Theme.png("keycard/card-inserted")
+                source: Assets.png("keycard/card-inserted")
                 pattern: ""
             }
             PropertyChanges {
@@ -192,7 +192,7 @@ Item {
             when: root.sharedKeycardModule.currentState.stateType === Constants.keycardSharedState.repeatPuk
             PropertyChanges {
                 target: image
-                source: Theme.png("keycard/card-inserted")
+                source: Assets.png("keycard/card-inserted")
                 pattern: ""
             }
             PropertyChanges {
diff --git a/ui/imports/shared/popups/send/controls/HeaderTitleText.qml b/ui/imports/shared/popups/send/controls/HeaderTitleText.qml
index 96e66168b4d..097c41df96b 100644
--- a/ui/imports/shared/popups/send/controls/HeaderTitleText.qml
+++ b/ui/imports/shared/popups/send/controls/HeaderTitleText.qml
@@ -6,7 +6,7 @@ import StatusQ.Core.Theme
 StatusBaseText {
     lineHeight: 38
     lineHeightMode: Text.FixedHeight
-    font.pixelSize: Theme.fontSize28
+    font.pixelSize: Theme.fontSize(28)
     font.letterSpacing: -0.4
     verticalAlignment: Text.AlignVCenter
     color: Theme.palette.directColor1
diff --git a/ui/imports/shared/popups/send/views/AmountToReceive.qml b/ui/imports/shared/popups/send/views/AmountToReceive.qml
index 4a87bc748cc..8bcdcbfcac8 100644
--- a/ui/imports/shared/popups/send/views/AmountToReceive.qml
+++ b/ui/imports/shared/popups/send/views/AmountToReceive.qml
@@ -51,7 +51,7 @@ ColumnLayout {
             id: amountToReceiveText
             Layout.alignment: Qt.AlignVCenter
             text: isLoading ? "..." : inputIsFiat ? d.fiatValue : d.cryptoValue
-            font.pixelSize: Theme.fontSize34
+            font.pixelSize: Theme.fontSize(34)
             color: Theme.palette.directColor1
         }
     }
diff --git a/ui/imports/shared/popups/send/views/AmountToSend.qml b/ui/imports/shared/popups/send/views/AmountToSend.qml
index 0d460cbf08c..314007f63d3 100644
--- a/ui/imports/shared/popups/send/views/AmountToSend.qml
+++ b/ui/imports/shared/popups/send/views/AmountToSend.qml
@@ -249,7 +249,7 @@ Control {
                             + "0".repeat(root.fiatDecimalPlaces)
                 }
 
-                font.pixelSize: Theme.fontSize34
+                font.pixelSize: Theme.fontSize(34)
 
                 validator: AmountValidator {
                     id: validator
diff --git a/ui/imports/shared/popups/send/views/NetworkCardsComponent.qml b/ui/imports/shared/popups/send/views/NetworkCardsComponent.qml
index 3201103d1eb..d199bb898d7 100644
--- a/ui/imports/shared/popups/send/views/NetworkCardsComponent.qml
+++ b/ui/imports/shared/popups/send/views/NetworkCardsComponent.qml
@@ -103,7 +103,7 @@ Item {
                     maxAdvancedValue: tokenBalance.amount
                     state: (model.tokenBalance.amount === 0 && root.amountToSend > 0) || !model.hasGas ? "unavailable" :
                            !advancedInput.valid && advancedInputCurrencyAmount > 0 ? "error" : "default"
-                    cardIcon.source: Theme.svg(model.iconUrl)
+                    cardIcon.source: Assets.svg(model.iconUrl)
                     disabledText: qsTr("Disabled")
                     disableText: qsTr("Disable")
                     enableText: qsTr("Enable")
@@ -165,7 +165,7 @@ Item {
                     tertiaryText: state === "unpreferred"  ? qsTr("UNPREFERRED") : ""
                     state: !preferred ? "unpreferred" : "default"
                     opacity: preferred || store.showUnPreferredChains ? 1 : 0
-                    cardIcon.source: Theme.svg(model.iconUrl)
+                    cardIcon.source: Assets.svg(model.iconUrl)
                     disabledText: qsTr("Disabled")
                     disableText:  qsTr("Disable")
                     enableText: qsTr("Enable")
diff --git a/ui/imports/shared/popups/walletconnect/ConnectionStatusTag.qml b/ui/imports/shared/popups/walletconnect/ConnectionStatusTag.qml
index f32ec416e49..31f8010e335 100644
--- a/ui/imports/shared/popups/walletconnect/ConnectionStatusTag.qml
+++ b/ui/imports/shared/popups/walletconnect/ConnectionStatusTag.qml
@@ -14,7 +14,7 @@ InformationTag {
     tagPrimaryLabel.color: Theme.palette.directColor1
     tagPrimaryLabel.font.pixelSize: Theme.additionalTextSize
     backgroundColor: Theme.palette.successColor3
-    bgBorderColor: Theme.palette.alphaColor(Theme.palette.successColor1, 0.4)
+    bgBorderColor: StatusColors.alphaColor(Theme.palette.successColor1, 0.4)
     asset.color: tagPrimaryLabel.color
     verticalPadding: Theme.halfPadding
     horizontalPadding: 12
@@ -30,7 +30,7 @@ InformationTag {
             PropertyChanges {
                 target: root
                 backgroundColor: Theme.palette.dangerColor3
-                bgBorderColor: Theme.palette.alphaColor(Theme.palette.dangerColor1, 0.4)
+                bgBorderColor: StatusColors.alphaColor(Theme.palette.dangerColor1, 0.4)
             }
         }
     ]
diff --git a/ui/imports/shared/popups/walletconnect/DAppSignRequestModal.qml b/ui/imports/shared/popups/walletconnect/DAppSignRequestModal.qml
index 4f3e66bcfb5..1e0bb3dbd9b 100644
--- a/ui/imports/shared/popups/walletconnect/DAppSignRequestModal.qml
+++ b/ui/imports/shared/popups/walletconnect/DAppSignRequestModal.qml
@@ -53,7 +53,7 @@ SignTransactionModalBase {
         height: 40
         badgeSize: 16
         badgeMargin: 2
-        badgeIcon: Theme.svg("sign-blue")
+        badgeIcon: Assets.svg("sign-blue")
     }
 
     gradientColor: root.accountColor
@@ -64,7 +64,7 @@ SignTransactionModalBase {
     fromImageSmartIdenticon.asset.emoji: root.accountEmoji
     fromImageSmartIdenticon.asset.color: root.accountColor
     fromImageSmartIdenticon.asset.isLetterIdenticon: !!root.accountEmoji
-    toImageSmartIdenticon.asset.name: Theme.svg("sign")
+    toImageSmartIdenticon.asset.name: Assets.svg("sign")
     toImageSmartIdenticon.asset.bgColor: Theme.palette.primaryColor3
     toImageSmartIdenticon.asset.width: 24
     toImageSmartIdenticon.asset.height: 24
diff --git a/ui/imports/shared/popups/walletconnect/PairWCModal/WCUriInput.qml b/ui/imports/shared/popups/walletconnect/PairWCModal/WCUriInput.qml
index 6c4234827f3..d1842b52406 100644
--- a/ui/imports/shared/popups/walletconnect/PairWCModal/WCUriInput.qml
+++ b/ui/imports/shared/popups/walletconnect/PairWCModal/WCUriInput.qml
@@ -70,7 +70,7 @@ ColumnLayout {
 
             StatusLoadingIndicator {
                 anchors.centerIn: parent
-                color: Theme.palette.blue
+                color: StatusColors.getColr("blue")
                 visible: showIcon && input.pending
             }
 
diff --git a/ui/imports/shared/popups/walletconnect/panels/IntentionPanel.qml b/ui/imports/shared/popups/walletconnect/panels/IntentionPanel.qml
index b4650a4a967..1e66a74c32a 100644
--- a/ui/imports/shared/popups/walletconnect/panels/IntentionPanel.qml
+++ b/ui/imports/shared/popups/walletconnect/panels/IntentionPanel.qml
@@ -50,7 +50,7 @@ ColumnLayout {
                 bgRadius: bgWidth / 2
                 bgBorderWidth: 2
                 bgBorderColor: Theme.palette.statusAppLayout.backgroundColor
-                source: Theme.svg("sign")
+                source: Assets.svg("sign")
             }
         }
     }
diff --git a/ui/imports/shared/popups/walletconnect/panels/MaxFeesDisplay.qml b/ui/imports/shared/popups/walletconnect/panels/MaxFeesDisplay.qml
index b905aec0d74..39b58ed5811 100644
--- a/ui/imports/shared/popups/walletconnect/panels/MaxFeesDisplay.qml
+++ b/ui/imports/shared/popups/walletconnect/panels/MaxFeesDisplay.qml
@@ -22,7 +22,7 @@ ColumnLayout {
 
         visible: !!text
 
-        font.pixelSize: Theme.fontSize16
+        font.pixelSize: Theme.fontSize(16)
 
     }
     StatusBaseText {
diff --git a/ui/imports/shared/status/StatusChatImageValidator.qml b/ui/imports/shared/status/StatusChatImageValidator.qml
index 030cd9052c7..05f13098890 100644
--- a/ui/imports/shared/status/StatusChatImageValidator.qml
+++ b/ui/imports/shared/status/StatusChatImageValidator.qml
@@ -47,7 +47,7 @@ Item {
             anchors.topMargin: 6
             anchors.leftMargin: 6
             fillMode: Image.PreserveAspectFit
-            source: Theme.svg("exclamation_outline")
+            source: Assets.svg("exclamation_outline")
         }
         StyledText {
             id: txtValidationError
diff --git a/ui/imports/shared/status/StatusChatInputImageArea.qml b/ui/imports/shared/status/StatusChatInputImageArea.qml
index 2670ed1fd52..7ce727a3503 100644
--- a/ui/imports/shared/status/StatusChatInputImageArea.qml
+++ b/ui/imports/shared/status/StatusChatInputImageArea.qml
@@ -68,7 +68,7 @@ Row {
                 hoverEnabled: false
                 opacity: mouseArea.containsMouse || buttonMouseArea.containsMouse ? 1 : 0
                 contentItem: SVGImage {
-                    source: Theme.svg( !buttonMouseArea.containsMouse ? "close-filled" : "close-filled-hovered")
+                    source: Assets.svg( !buttonMouseArea.containsMouse ? "close-filled" : "close-filled-hovered")
                     width: closeBtn.width
                     height: closeBtn.height
                 }
diff --git a/ui/imports/shared/status/StatusChatInputReplyArea.qml b/ui/imports/shared/status/StatusChatInputReplyArea.qml
index 2445a1ebe87..51db061463c 100644
--- a/ui/imports/shared/status/StatusChatInputReplyArea.qml
+++ b/ui/imports/shared/status/StatusChatInputReplyArea.qml
@@ -67,7 +67,8 @@ Rectangle {
 
         StyledText {
             id: replyText
-            text: StatusQUtils.Utils.getMessageWithStyle(StatusQUtils.Emoji.parse(StatusQUtils.Utils.linkifyAndXSS(message)), false)
+            text: StatusQUtils.Utils.getMessageWithStyle(
+                      root.Theme.palette, StatusQUtils.Emoji.parse(StatusQUtils.Utils.linkifyAndXSS(message)), false)
             anchors.fill: parent
             elide: Text.ElideRight
             font.pixelSize: Theme.additionalTextSize
@@ -113,7 +114,7 @@ Rectangle {
         anchors.rightMargin: 4
         contentItem: StatusIcon {
             id: iconImg
-            source: Theme.svg("close")
+            source: Assets.svg("close")
             color: Theme.palette.textColor
             sourceSize: Qt.size(width, height)
             width: closeBtn.width
diff --git a/ui/imports/shared/status/StatusGifPopup/ConfirmationPopup.qml b/ui/imports/shared/status/StatusGifPopup/ConfirmationPopup.qml
index 7ec6a993df1..81d03ac7696 100644
--- a/ui/imports/shared/status/StatusGifPopup/ConfirmationPopup.qml
+++ b/ui/imports/shared/status/StatusGifPopup/ConfirmationPopup.qml
@@ -45,7 +45,7 @@ Popup {
         id: gifImage
         anchors.horizontalCenter: parent.horizontalCenter
         anchors.top: parent.top
-        source: Theme.svg(`gifs-${Theme.palette.name}`)
+        source: Assets.svg(`gifs-${Theme.palette.name}`)
     }
 
     StatusBaseText {
diff --git a/ui/imports/shared/status/StatusStickerPackDetails.qml b/ui/imports/shared/status/StatusStickerPackDetails.qml
index f9c3c246b42..372cecee8cc 100644
--- a/ui/imports/shared/status/StatusStickerPackDetails.qml
+++ b/ui/imports/shared/status/StatusStickerPackDetails.qml
@@ -33,14 +33,14 @@ Item {
         StyledText {
             id: txtPackName
             text: packName
-            font.family: Theme.baseFont.name
+            font.family: Fonts.baseFont.family
             font.weight: Font.Bold
             font.pixelSize: packNameFontSize
         }
         StyledText {
             color: Theme.palette.secondaryText
             text: packAuthor
-            font.family: Theme.baseFont.name
+            font.family: Fonts.baseFont.family
             font.pixelSize: Theme.primaryTextFontSize
         }
     }
diff --git a/ui/imports/shared/status/StatusStickerPackIconWithIndicator.qml b/ui/imports/shared/status/StatusStickerPackIconWithIndicator.qml
index 861da728f21..945b5cba487 100644
--- a/ui/imports/shared/status/StatusStickerPackIconWithIndicator.qml
+++ b/ui/imports/shared/status/StatusStickerPackIconWithIndicator.qml
@@ -11,7 +11,7 @@ Item {
 
     property bool selected: false
     property bool useIconInsteadOfImage: false
-    property url source: Theme.svg("history")
+    property url source: Assets.svg("history")
     signal clicked
 
     implicitHeight: 24
diff --git a/ui/imports/shared/status/StatusStickersPopup.qml b/ui/imports/shared/status/StatusStickersPopup.qml
index a2cf1cb84c8..f81e290dd66 100644
--- a/ui/imports/shared/status/StatusStickersPopup.qml
+++ b/ui/imports/shared/status/StatusStickersPopup.qml
@@ -179,7 +179,7 @@ StatusDropdown {
                     anchors.horizontalCenter: parent.horizontalCenter
                     anchors.top: parent.top
                     anchors.topMargin: 134
-                    source: Theme.svg("stickers_sad_icon")
+                    source: Assets.svg("stickers_sad_icon")
                 }
 
                 Item {
diff --git a/ui/imports/shared/views/BiometricsSectionView.qml b/ui/imports/shared/views/BiometricsSectionView.qml
index abdd8210a44..747590c9d53 100644
--- a/ui/imports/shared/views/BiometricsSectionView.qml
+++ b/ui/imports/shared/views/BiometricsSectionView.qml
@@ -43,7 +43,7 @@ Control {
 
                 Layout.alignment: Qt.AlignRight
 
-                opacity: root.biometricsAvailable ? 1 : Theme.disabledOpacity
+                opacity: root.biometricsAvailable ? 1 : ThemeUtils.disabledOpacity
                 checkable: false
                 checked: root.biometricsAvailable && root.biometricsEnabled
                 onClicked: root.toggleBiometrics(biometricsSwitch.checked)
diff --git a/ui/imports/shared/views/PasswordConfirmationView.qml b/ui/imports/shared/views/PasswordConfirmationView.qml
index 1f766ea87e3..2de96aa2357 100644
--- a/ui/imports/shared/views/PasswordConfirmationView.qml
+++ b/ui/imports/shared/views/PasswordConfirmationView.qml
@@ -35,7 +35,7 @@ ColumnLayout {
         text: qsTr("Have you written down your password?")
         font.bold: true
         color: Theme.palette.directColor1
-        font.pixelSize: Theme.fontSize22
+        font.pixelSize: Theme.fontSize(22)
     }
 
     ColumnLayout {
diff --git a/ui/imports/shared/views/ProfileDialogView.qml b/ui/imports/shared/views/ProfileDialogView.qml
index cdd396b9d36..8bd70a1aff8 100644
--- a/ui/imports/shared/views/ProfileDialogView.qml
+++ b/ui/imports/shared/views/ProfileDialogView.qml
@@ -388,7 +388,7 @@ Pane {
                     width: Math.min(implicitWidth, contactRow.width - verificationIcons.width - verificationIcons.anchors.leftMargin)
                     objectName: "ProfileDialog_displayName"
                     font.bold: true
-                    font.pixelSize: Theme.fontSize22
+                    font.pixelSize: Theme.fontSize(22)
                     elide: Text.ElideRight
                     text: StatusQUtils.Emoji.parse(d.mainDisplayName, StatusQUtils.Emoji.size.middle)
                 }
diff --git a/ui/imports/shared/views/SyncingDeviceView.qml b/ui/imports/shared/views/SyncingDeviceView.qml
index c010e23e5a0..2cde8f80dae 100644
--- a/ui/imports/shared/views/SyncingDeviceView.qml
+++ b/ui/imports/shared/views/SyncingDeviceView.qml
@@ -63,7 +63,7 @@ Item {
             horizontalAlignment: Text.AlignHCenter
             color: Theme.palette.directColor1
             font.weight: Font.Bold
-            font.pixelSize: Theme.fontSize22
+            font.pixelSize: Theme.fontSize(22)
             elide: Text.ElideRight
             wrapMode: Text.Wrap
             text: root.userDisplayName
@@ -73,7 +73,7 @@ Item {
             Layout.fillWidth: true
             Layout.topMargin: Theme.xlPadding
             horizontalAlignment: Text.AlignHCenter
-            font.pixelSize: Theme.fontSize22
+            font.pixelSize: Theme.fontSize(22)
             color: d.pairingFailed ? Theme.palette.dangerColor1 : Theme.palette.directColor1
             text: {
                 if (d.pairingInProgress)
diff --git a/ui/imports/shared/views/chat/ChannelIdentifierView.qml b/ui/imports/shared/views/chat/ChannelIdentifierView.qml
index 0c345e3aac4..603c65a632d 100644
--- a/ui/imports/shared/views/chat/ChannelIdentifierView.qml
+++ b/ui/imports/shared/views/chat/ChannelIdentifierView.qml
@@ -46,7 +46,7 @@ Column {
         wrapMode: Text.Wrap
         text: root.chatName
         font.weight: Font.Bold
-        font.pixelSize: Theme.fontSize22
+        font.pixelSize: Theme.fontSize(22)
         color: Theme.palette.textColor
         horizontalAlignment: Text.AlignHCenter
     }
diff --git a/ui/imports/shared/views/chat/LinksMessageView.qml b/ui/imports/shared/views/chat/LinksMessageView.qml
index 78abe3b5973..e7ec5038974 100644
--- a/ui/imports/shared/views/chat/LinksMessageView.qml
+++ b/ui/imports/shared/views/chat/LinksMessageView.qml
@@ -158,7 +158,7 @@ Flow {
             }
             Image {
                 id: unfurlingImage
-                source: Theme.png("unfurling-image")
+                source: Assets.png("unfurling-image")
                 width: 132
                 height: 94
                 anchors.horizontalCenter: parent.horizontalCenter
diff --git a/ui/imports/shared/views/chat/MessageView.qml b/ui/imports/shared/views/chat/MessageView.qml
index 5016eedc7f8..088b3aacfb3 100644
--- a/ui/imports/shared/views/chat/MessageView.qml
+++ b/ui/imports/shared/views/chat/MessageView.qml
@@ -618,7 +618,7 @@ Loader {
             horizontalAlignment: Text.AlignHCenter
             text: qsTr("%1 pinned a message").arg(senderDisplayName)
             color: Theme.palette.directColor3
-            font.family: Theme.baseFont.name
+            font.family: Fonts.baseFont.family
             font.pixelSize: Theme.primaryTextFontSize
             textFormat: Text.RichText
             wrapMode: Text.Wrap
@@ -653,13 +653,13 @@ Loader {
                             isLetterIdenticon: name === ""
                             imgIsIdenticon: false
                             charactersLen: 1
-                            color: Theme.palette.userCustomizationColors[deletedMessage.colorId]
+                            color: root.Theme.palette.userCustomizationColors[deletedMessage.colorId]
                             letterSize: 14
                         }
 
                         name: root.deletedByContactIcon || ""
                         pubkey: root.deletedBy
-                        colorId: deletedMessage.colorId
+                        color: root.Theme.palette.userCustomizationColors[deletedMessage.colorId]
                     }
                 }
 
@@ -923,9 +923,9 @@ Loader {
                         height: 40
                         name: root.senderIcon || ""
                         pubkey: root.senderId
-                        colorId: Utils.colorIdForPubkey(root.senderId)
+                        color: root.Theme.palette.userCustomizationColors[Utils.colorIdForPubkey(root.senderId)]
                     }
-                    sender.badgeImage: Theme.svg("discord-bridge")
+                    sender.badgeImage: Assets.svg("discord-bridge")
                 }
 
                 replyDetails: StatusMessageDetails {
@@ -973,7 +973,7 @@ Loader {
                         name: quotedMessageAuthorDetailsThumbnailImage
                         assetSettings.isImage: quotedMessageAuthorDetailsThumbnailImage
                         pubkey: sender.id
-                        colorId: Utils.colorIdForPubkey(sender.id)
+                        color: root.Theme.palette.userCustomizationColors[Utils.colorIdForPubkey(sender.id)]
                     }
                 }
 
diff --git a/ui/imports/shared/views/chat/NewMessagesMarker.qml b/ui/imports/shared/views/chat/NewMessagesMarker.qml
index aedd81370bb..eb5b818a117 100644
--- a/ui/imports/shared/views/chat/NewMessagesMarker.qml
+++ b/ui/imports/shared/views/chat/NewMessagesMarker.qml
@@ -66,7 +66,7 @@ Item {
                         text: qsTr("NEW", "new message(s)")
                         color: Theme.palette.indirectColor1
                         font.weight: Font.DemiBold
-                        font.pixelSize: Theme.fontSize11
+                        font.pixelSize: Theme.fontSize(11)
                     }
                 }
             }
diff --git a/ui/imports/shared/views/profile/ProfileShowcaseCollectiblesView.qml b/ui/imports/shared/views/profile/ProfileShowcaseCollectiblesView.qml
index 30de2d373a1..263a0f8d0f3 100644
--- a/ui/imports/shared/views/profile/ProfileShowcaseCollectiblesView.qml
+++ b/ui/imports/shared/views/profile/ProfileShowcaseCollectiblesView.qml
@@ -108,7 +108,7 @@ Item {
                 id: gradient
                 anchors.fill: collectibleImage
                 visible: hoverHandler.hovered
-                source: Theme.png("profile/gradient")
+                source: Assets.png("profile/gradient")
             }
 
             //TODO Add drop shadow
diff --git a/ui/imports/shared/views/profile/ProfileShowcaseSocialLinksView.qml b/ui/imports/shared/views/profile/ProfileShowcaseSocialLinksView.qml
index 07f91fe6327..6f2e2692047 100644
--- a/ui/imports/shared/views/profile/ProfileShowcaseSocialLinksView.qml
+++ b/ui/imports/shared/views/profile/ProfileShowcaseSocialLinksView.qml
@@ -48,9 +48,9 @@ Item {
             width: GridView.view.cellWidth - Theme.padding
             height: GridView.view.cellHeight - Theme.padding
             title: !!ProfileUtils.linkTypeToText(linkType) ? ProfileUtils.linkTypeToText(linkType) : model.text
-            asset.bgColor: ProfileUtils.linkTypeBgColor(linkType)
+            asset.bgColor: ProfileUtils.linkTypeBgColor(linkType, root.Theme.palette)
             asset.name: ProfileUtils.linkTypeToIcon(linkType)
-            asset.color: ProfileUtils.linkTypeColor(linkType)
+            asset.color: ProfileUtils.linkTypeColor(linkType, root.Theme.palette)
             asset.width: 20
             asset.height: 20
             asset.bgWidth: 32
diff --git a/ui/imports/utils/Constants.qml b/ui/imports/utils/Constants.qml
index 7ca056a558d..7eda9cf3b7a 100644
--- a/ui/imports/utils/Constants.qml
+++ b/ui/imports/utils/Constants.qml
@@ -409,9 +409,9 @@ QtObject {
         readonly property int biometricsImageHeight: 185
         readonly property int userImageWidth: 40
         readonly property int userImageHeight: 40
-        readonly property int titleFontSize: Theme.fontSize17
-        readonly property int fontSize1: Theme.fontSize22
-        readonly property int fontSize2: Theme.fontSize17
+        readonly property int titleFontSize: Theme.fontSize(17)
+        readonly property int fontSize1: Theme.fontSize(22)
+        readonly property int fontSize2: Theme.fontSize(17)
         readonly property int fontSize3: Theme.primaryTextFontSize
         readonly property int fontSize4: Theme.tertiaryTextFontSize
         readonly property int loginInfoHeight1: 24
@@ -555,9 +555,9 @@ QtObject {
     readonly property QtObject settingsSection: QtObject {
         readonly property int itemSpacing: 10
         readonly property int radius: 8
-        readonly property int mainHeaderFontSize: Theme.fontSize28 // Keep as is - special case for main header
+        readonly property int mainHeaderFontSize: Theme.fontSize(28) // Keep as is - special case for main header
         readonly property int subHeaderFontSize: Theme.primaryTextFontSize
-        readonly property int importantInfoFontSize: Theme.fontSize18
+        readonly property int importantInfoFontSize: Theme.fontSize(18)
         readonly property int infoFontSize: Theme.primaryTextFontSize
         readonly property int infoLineHeight: 22
         readonly property int infoSpacing: 5
@@ -618,7 +618,7 @@ QtObject {
             readonly property int keycardPairingCodeInputWidth: 512
             readonly property int keycardPukAdditionalSpacingOnEvery4Items: 4
             readonly property int keycardPukAdditionalSpacing: 32
-            readonly property int fontSize1: Theme.fontSize22
+            readonly property int fontSize1: Theme.fontSize(22)
             readonly property int fontSize2: Theme.primaryTextFontSize
             readonly property int fontSize3: Theme.tertiaryTextFontSize
             readonly property int seedPhraseCellWidth: 193
@@ -1337,10 +1337,10 @@ QtObject {
         const tmpSymbol = uniqueSymbolToTokenSymbol(symbol)
 
         if (!!tmpSymbol && knownTokenPNGs.indexOf(tmpSymbol) !== -1)
-            return Theme.png("tokens/" + tmpSymbol)
+            return Assets.png("tokens/" + tmpSymbol)
 
         if (useDefault)
-            return Theme.png("tokens/DEFAULT-TOKEN")
+            return Assets.png("tokens/DEFAULT-TOKEN")
         return ""
     }
 
@@ -1350,16 +1350,16 @@ QtObject {
 
     function getSupportedTokenSourceImage(name, useDefault=true) {
         if (name === supportedTokenSources.uniswap)
-            return Theme.png("tokens/UNI")
+            return Assets.png("tokens/UNI")
 
         if (name === supportedTokenSources.aave)
-            return Theme.png("tokens/AAVE")
+            return Assets.png("tokens/AAVE")
 
         if (name === supportedTokenSources.status)
-            return Theme.png("tokens/SNT")
+            return Assets.png("tokens/SNT")
 
         if (useDefault)
-            return Theme.png("tokens/DEFAULT-TOKEN")
+            return Assets.png("tokens/DEFAULT-TOKEN")
         return ""
     }
 
@@ -1523,8 +1523,8 @@ QtObject {
 
     property var dappImageByType: [
         "",
-        Theme.svg("walletconnect"),
-        Theme.png("status-logo")
+        Assets.svg("walletconnect"),
+        Assets.png("status-logo")
     ]
 
     enum LimitWarning {
diff --git a/ui/imports/utils/ProfileUtils.qml b/ui/imports/utils/ProfileUtils.qml
index 89bfd3c4a1a..19ea29bef9f 100644
--- a/ui/imports/utils/ProfileUtils.qml
+++ b/ui/imports/utils/ProfileUtils.qml
@@ -45,17 +45,17 @@ QtObject {
         return "" // "custom" link type allows for user defined text
     }
 
-    function linkTypeColor(linkType) {
+    function linkTypeColor(linkType: int, palette: ThemePalette) : color {
         if (linkType === Constants.socialLinkType.twitter) return "#000000"
         if (linkType === Constants.socialLinkType.github) return "#000000"
         if (linkType === Constants.socialLinkType.youtube) return "#FF3000"
         if (linkType === Constants.socialLinkType.discord) return "#7289DA"
         if (linkType === Constants.socialLinkType.telegram) return "#0088CC"
-        return Theme.palette.primaryColor1
+        return palette.primaryColor1
     }
 
-    function linkTypeBgColor(linkType) {
-        return Theme.palette.getColor(linkTypeColor(linkType), 0.1)
+    function linkTypeBgColor(linkType:int, palette: ThemePalette) : color {
+        return StatusColors.getColor(linkTypeColor(linkType, palette), 0.1)
     }
 
     function linkTypeToDescription(linkType) {
diff --git a/ui/imports/utils/Utils.qml b/ui/imports/utils/Utils.qml
index 24b5425ce6c..d2a9aabe36a 100644
--- a/ui/imports/utils/Utils.qml
+++ b/ui/imports/utils/Utils.qml
@@ -514,7 +514,7 @@ QtObject {
         case Constants.walletAccountColors.magenta.toUpperCase():
             return Theme.palette.customisationColors.magenta
         case Constants.walletAccountColors.yinYang.toUpperCase():
-            return Theme.palette.name === Constants.lightThemeName ? Theme.palette.getColor('blackHovered'): Theme.palette.getColor('grey4') // FIXME introduce symbolic color names
+            return Theme.palette.name === Constants.lightThemeName ? StatusColors.getColor('blackHovered'): StatusColors.getColor('grey4') // FIXME introduce symbolic color names
         case Constants.walletAccountColors.undefinedAccount.toUpperCase():
             return Theme.palette.baseColor1
         default:
diff --git a/ui/main.qml b/ui/main.qml
index 6e159a44934..8eb1eeda226 100644
--- a/ui/main.qml
+++ b/ui/main.qml
@@ -26,6 +26,9 @@ import MobileUI
 Window {
     id: applicationWindow
 
+    Theme.style: Application.styleHints.colorScheme === Qt.ColorScheme.Dark
+                 ? Theme.Style.Dark : Theme.Style.Light
+
     property bool appIsReady: false
 
     readonly property AppStores.FeatureFlagsStore featureFlagsStore: AppStores.FeatureFlagsStore {
@@ -48,7 +51,7 @@ Window {
     readonly property MetricsStore metricsStore: MetricsStore {}
     readonly property UtilsStore utilsStore: UtilsStore {}
     readonly property LanguageStore languageStore: LanguageStore {}
-    readonly property bool appThemeDark: Theme.isDarkTheme
+    readonly property bool appThemeDark: Theme.style === Theme.Style.Dark
     readonly property bool portraitLayout: height > width
     property bool biometricFlowPending: false
     
@@ -142,8 +145,8 @@ Window {
         if (visibility === Window.Windowed) {
             applicationWindow.x = geometry.x;
             applicationWindow.y = geometry.y;
-            applicationWindow.width = Math.max(geometry.width, Theme.portraitBreakpoint.width)
-            applicationWindow.height = Math.max(geometry.height, Theme.portraitBreakpoint.height)
+            applicationWindow.width = Math.max(geometry.width, ThemeUtils.portraitBreakpoint.width)
+            applicationWindow.height = Math.max(geometry.height, ThemeUtils.portraitBreakpoint.height)
         }
     }
 
@@ -231,13 +234,13 @@ Window {
         target: applicationWindow
         property: "minimumWidth"
         when: !SQUtils.Utils.isMobile
-        value: Theme.portraitBreakpoint.width
+        value: ThemeUtils.portraitBreakpoint.width
     }
     Binding {
         target: applicationWindow
         property: "minimumHeight"
         when: !SQUtils.Utils.isMobile
-        value: Theme.portraitBreakpoint.height
+        value: ThemeUtils.portraitBreakpoint.height
     }
 
     Action {