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..44cc6f1caca 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.setTheme(root, darkMode ? ThemeUtils.Style.Dark
+                                                              : ThemeUtils.Style.Light)
     }
 }
diff --git a/storybook/pages/AccountViewPage.qml b/storybook/pages/AccountViewPage.qml
index 39a51723880..449e2cf2700 100644
--- a/storybook/pages/AccountViewPage.qml
+++ b/storybook/pages/AccountViewPage.qml
@@ -26,10 +26,10 @@ SplitView {
         id: d
         readonly property string emptyString: ""
 
-        property var dummyOverview: updateDummyView(StatusColors.colors['black'])
+        property var dummyOverview: updateDummyView(StatusColors.black)
 
         function updateDummyView(color) {
-            const clr = Utils.getIdForColor(color)
+            const clr = Utils.getIdForColor(root.Theme.palette, color)
             dummyOverview = ({
                                  name: "helloworld",
                                  address: "0xcdc2ea3b6ba8fed3a3402f8db8b2fab53e7b7421",
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/SavedAddressActivityPopupPage.qml b/storybook/pages/SavedAddressActivityPopupPage.qml
index 474de1790b2..ed95c3205c6 100644
--- a/storybook/pages/SavedAddressActivityPopupPage.qml
+++ b/storybook/pages/SavedAddressActivityPopupPage.qml
@@ -33,7 +33,7 @@ SplitView {
                                    name: "Noelia Santos",
                                    address: "0xe5bd6c877cd566af2a58990ad0ed4b73fb0c6752",
                                    ens: "",
-                                   colorId: Utils.getIdForColor(Theme.palette.customisationColors.blue),
+                                   colorId: Utils.getIdForColor(Theme.palette, Theme.palette.customisationColors.blue),
                                    mixedcaseAddress: "0xe5bD6C877cd566Af2a58990Ad0eD4B73fb0c6752",
                                })
             }
diff --git a/storybook/pages/SendSignModalPage.qml b/storybook/pages/SendSignModalPage.qml
index 4bc420b2804..1374d27f7a6 100644
--- a/storybook/pages/SendSignModalPage.qml
+++ b/storybook/pages/SendSignModalPage.qml
@@ -137,17 +137,17 @@ SplitView {
                     accountName: priv.selectedAccount.name
                     accountAddress: priv.selectedAccount.address
                     accountEmoji: priv.selectedAccount.emoji
-                    accountColor: Utils.getColorForId(priv.selectedAccount.colorId)
+                    accountColor: Utils.getColorForId(Theme.palette, priv.selectedAccount.colorId)
 
                     recipientAddress: priv.selectedRecipient.address
                     recipientName: priv.selectedRecipient.name
                     recipientEns: priv.selectedRecipient.ens
                     recipientEmoji: priv.selectedRecipient.emoji
-                    recipientWalletColor: Utils.getColorForId(priv.selectedRecipient.colorId)
+                    recipientWalletColor: Utils.getColorForId(Theme.palette, priv.selectedRecipient.colorId)
 
                     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..ba4122c03f8 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.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/StatusColorSpacePage.qml b/storybook/pages/StatusColorSpacePage.qml
index 0063306d6f4..20087e8efc8 100644
--- a/storybook/pages/StatusColorSpacePage.qml
+++ b/storybook/pages/StatusColorSpacePage.qml
@@ -94,7 +94,7 @@ Item {
 
             StatusBaseText {
                 anchors.centerIn: parent
-                color: Theme.palette.white
+                color: StatusColors.white
                 font.pixelSize: Theme.primaryTextFontSize
                 text: "Quick brown fox jumps over the lazy dog"
             }
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/StatusLoadingPageIndicatorPage.qml b/storybook/pages/StatusLoadingPageIndicatorPage.qml
index b0bc29792a7..bb05c96b522 100644
--- a/storybook/pages/StatusLoadingPageIndicatorPage.qml
+++ b/storybook/pages/StatusLoadingPageIndicatorPage.qml
@@ -13,7 +13,7 @@ SplitView {
         SplitView.fillWidth: true
         SplitView.fillHeight: true
 
-        color: Theme.palette.transparent
+        color: StatusColors.transparent
 
         StatusLoadingPageIndicator {
             anchors.centerIn: parent
diff --git a/storybook/pages/StatusMessagePage.qml b/storybook/pages/StatusMessagePage.qml
index 1768634a7f8..3305e1315d5 100644
--- a/storybook/pages/StatusMessagePage.qml
+++ b/storybook/pages/StatusMessagePage.qml
@@ -265,7 +265,8 @@ SplitView {
                         sender.isEnsVerified: isEnsVerified
                         sender.profileImage {
                             name: model.profileImage || ""
-                            colorId: index % Theme.palette.userCustomizationColors.length
+                            color: Theme.palette.userCustomizationColors[
+                                       index % Theme.palette.userCustomizationColors.length]
                         }
                         album: model.contentType === StatusMessage.ContentType.Image ? d.exampleAlbum : []
                         albumCount: model.contentType === StatusMessage.ContentType.Image ? d.exampleAlbum.length : 0
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..03978bbc019 100644
--- a/storybook/pages/SwapApproveCapModalPage.qml
+++ b/storybook/pages/SwapApproveCapModalPage.qml
@@ -87,12 +87,12 @@ SplitView {
                     accountName: priv.selectedAccount.name
                     accountAddress: priv.selectedAccount.address
                     accountEmoji: priv.selectedAccount.emoji
-                    accountColor: Utils.getColorForId(priv.selectedAccount.colorId)
+                    accountColor: Utils.getColorForId(Theme.palette, priv.selectedAccount.colorId)
                     accountBalanceFormatted: formatBigNumber(120.55489)
 
                     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..4e23e78db04 100644
--- a/storybook/pages/SwapSignModalPage.qml
+++ b/storybook/pages/SwapSignModalPage.qml
@@ -91,11 +91,11 @@ SplitView {
                     accountName: priv.selectedAccount.name
                     accountAddress: priv.selectedAccount.address
                     accountEmoji: priv.selectedAccount.emoji
-                    accountColor: Utils.getColorForId(priv.selectedAccount.colorId)
+                    accountColor: Utils.getColorForId(Theme.palette, priv.selectedAccount.colorId)
 
                     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_BuyCryptoModal.qml b/storybook/qmlTests/tests/tst_BuyCryptoModal.qml
index 9f2c897d7f3..a91851c12bd 100644
--- a/storybook/qmlTests/tests/tst_BuyCryptoModal.qml
+++ b/storybook/qmlTests/tests/tst_BuyCryptoModal.qml
@@ -207,7 +207,7 @@ Item {
             compare(selectParamsForBuyCryptoPanelHeader.subTitle, qsTr("Select which network and asset"))
             compare(selectParamsForBuyCryptoPanelHeader.statusListItemTitle.color, Theme.palette.directColor1)
             compare(selectParamsForBuyCryptoPanelHeader.asset.name, !!controlUnderTest.selectedProviderEntry.item  ? controlUnderTest.selectedProviderEntry.item .logoUrl: "")
-            compare(selectParamsForBuyCryptoPanelHeader.color, Theme.palette.transparent)
+            compare(selectParamsForBuyCryptoPanelHeader.color, StatusColors.transparent)
             compare(selectParamsForBuyCryptoPanelHeader.enabled, false)
 
             const networkFilter = findChild(selectParamsPanel, "networkFilter")
diff --git a/storybook/qmlTests/tests/tst_MarketLayout.qml b/storybook/qmlTests/tests/tst_MarketLayout.qml
index b5adb052e17..fef831b9029 100644
--- a/storybook/qmlTests/tests/tst_MarketLayout.qml
+++ b/storybook/qmlTests/tests/tst_MarketLayout.qml
@@ -177,7 +177,8 @@ Item {
                     compare(changePct24HrText.font.pixelSize, Theme.primaryTextFontSize)
                     compare(changePct24HrText.font.weight, Font.Medium)
                     compare(changePct24HrText.color,
-                            WalletUtils.getChangePct24HourColor(modelItemUnderTest.priceChangePercentage24h))
+                            WalletUtils.getChangePct24HourColor(controlUnderTest.Theme.palette,
+                                                                modelItemUnderTest.priceChangePercentage24h))
 
                     const expectedTotalVolumeString = "%1%2"
                     .arg(controlUnderTest.currencySymbol)
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..1a4d8312c62 100644
--- a/storybook/qmlTests/tests/tst_SendSignModal.qml
+++ b/storybook/qmlTests/tests/tst_SendSignModal.qml
@@ -33,17 +33,17 @@ Item {
             accountName: "Hot wallet (generated)"
             accountAddress: "0x7F47C2e98a4BBf5487E6fb082eC2D9Ab0E6d8881"
             accountEmoji: "🚗"
-            accountColor: Utils.getColorForId(Constants.walletAccountColors.primary)
+            accountColor: Utils.getColorForId(Theme.palette, Constants.walletAccountColors.primary)
 
             recipientAddress: "0xA858DDc0445d8131daC4d1DE01f834ffcbA52Ef1"
             recipientName: "0x7F47C2e98a4BBf5487E6fb082eC2D9Ab0E6d8882"
             recipientEmoji: "😋"
             recipientEns: ""
-            recipientWalletColor: Utils.getColorForId(Constants.walletAccountColors.secondary)
+            recipientWalletColor: Utils.getColorForId(Theme.palette, Constants.walletAccountColors.secondary)
 
             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_SimpleSendModal.qml b/storybook/qmlTests/tests/tst_SimpleSendModal.qml
index e8d35c6fde2..4cc99b2589e 100644
--- a/storybook/qmlTests/tests/tst_SimpleSendModal.qml
+++ b/storybook/qmlTests/tests/tst_SimpleSendModal.qml
@@ -496,9 +496,10 @@ Item {
             const accountSelectorTextContent = findChild(accountSelector, "textContent")
             verify(!!accountSelectorTextContent)
 
-            compare(accountSelectorHeaderBackground.color, Utils.getColorForId(defaultAccountItem.colorId))
+            const palette = controlUnderTest.Theme.palette
+            compare(accountSelectorHeaderBackground.color, Utils.getColorForId(palette, defaultAccountItem.colorId))
             compare(accountSelectorAssetContent.asset.emoji, defaultAccountItem.emoji)
-            compare(accountSelectorAssetContent.asset.color, Utils.getColorForId(defaultAccountItem.colorId))
+            compare(accountSelectorAssetContent.asset.color, Utils.getColorForId(palette, defaultAccountItem.colorId))
             compare(accountSelectorTextContent.text, defaultAccountItem.name)
 
             // Sticky Header should not be visible when not scrolling
@@ -587,9 +588,10 @@ Item {
             const accountSelectorTextContent = findChild(accountSelector, "textContent")
             verify(!!accountSelectorTextContent)
 
-            compare(accountSelectorHeaderBackground.color, Utils.getColorForId(selectedAccount.colorId))
+            const palette = controlUnderTest.Theme.palette
+            compare(accountSelectorHeaderBackground.color, Utils.getColorForId(palette, selectedAccount.colorId))
             compare(accountSelectorAssetContent.asset.emoji, selectedAccount.emoji)
-            compare(accountSelectorAssetContent.asset.color, Utils.getColorForId(selectedAccount.colorId))
+            compare(accountSelectorAssetContent.asset.color, Utils.getColorForId(palette, selectedAccount.colorId))
             compare(accountSelectorTextContent.text, selectedAccount.name)
 
             // Sticky Header should not be visible when not scrolling
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_StatusMessage.qml b/storybook/qmlTests/tests/tst_StatusMessage.qml
index 8a6f018bf42..1c4aeb8b655 100644
--- a/storybook/qmlTests/tests/tst_StatusMessage.qml
+++ b/storybook/qmlTests/tests/tst_StatusMessage.qml
@@ -23,7 +23,7 @@ Item {
                 sender.isEnsVerified: false
                 sender.profileImage {
                     name: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAiElEQVR4nOzXUQpAQBRGYWQvLNAyLJDV8C5qpiGnv/M9al5Ot27X0IUwhMYQGkNoDKGJCRlLH67bftx9X+ap/+P9VcxEDKExhKZ4a9Uq3TZviZmIITSG0DRvlqcbqVbrlouZiCE0htD4h0hjCI0hNN5aNIbQGKKPxEzEEBpDaAyhMYTmDAAA//+gYCErzmCpCQAAAABJRU5ErkJggg="
-                    colorId: 1
+                    color: "red"
                 }
             }
             linkAddressAndEnsName: true
diff --git a/storybook/qmlTests/tests/tst_SwapApproveCapModal.qml b/storybook/qmlTests/tests/tst_SwapApproveCapModal.qml
index e2030728a72..38800ad0e27 100644
--- a/storybook/qmlTests/tests/tst_SwapApproveCapModal.qml
+++ b/storybook/qmlTests/tests/tst_SwapApproveCapModal.qml
@@ -31,12 +31,12 @@ Item {
             accountName: "Hot wallet (generated)"
             accountAddress: "0x7F47C2e98a4BBf5487E6fb082eC2D9Ab0E6d8881"
             accountEmoji: "🚗"
-            accountColor: Utils.getColorForId(Constants.walletAccountColors.primary)
+            accountColor: Utils.getColorForId(Theme.palette, Constants.walletAccountColors.primary)
             accountBalanceFormatted: "120.55489 DAI"
 
             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..b714a5a751d 100644
--- a/storybook/qmlTests/tests/tst_SwapModal.qml
+++ b/storybook/qmlTests/tests/tst_SwapModal.qml
@@ -177,7 +177,8 @@ Item {
 
                 const floatingHeaderBackground = findChild(controlUnderTest, "headerBackground")
                 verify(!!floatingHeaderBackground)
-                compare(floatingHeaderBackground.color.toString().toUpperCase(), Utils.getColorForId(accountToTest.colorId).toString().toUpperCase())
+                compare(floatingHeaderBackground.color.toString().toUpperCase(),
+                        Utils.getColorForId(controlUnderTest.Theme.palette, accountToTest.colorId).toString().toUpperCase())
 
                 const headerContentItemText = findChild(controlUnderTest, "textContent")
                 verify(!!headerContentItemText)
@@ -247,7 +248,7 @@ Item {
                     verify(delegateUnderTest.color, Theme.palette.statusListItem.highlightColor)
                 }
                 else {
-                    verify(delegateUnderTest.color, Theme.palette.transparent)
+                    verify(delegateUnderTest.color, StatusColors.transparent)
                 }
 
                 // TODO: always null not sure why
@@ -306,7 +307,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 +463,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..9f764695143 100644
--- a/storybook/qmlTests/tests/tst_SwapSignModal.qml
+++ b/storybook/qmlTests/tests/tst_SwapSignModal.qml
@@ -35,11 +35,11 @@ Item {
             accountName: "Hot wallet (generated)"
             accountAddress: "0x7F47C2e98a4BBf5487E6fb082eC2D9Ab0E6d8881"
             accountEmoji: "🚗"
-            accountColor: Utils.getColorForId(Constants.walletAccountColors.primary)
+            accountColor: Utils.getColorForId(Theme.palette, Constants.walletAccountColors.primary)
 
             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 5be27b8d47a..a48c67e61b1 100644
--- a/ui/StatusQ/CMakeLists.txt
+++ b/ui/StatusQ/CMakeLists.txt
@@ -169,17 +169,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
@@ -188,19 +191,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..db41e82c6f9
--- /dev/null
+++ b/ui/StatusQ/include/StatusQ/statuscolors.h
@@ -0,0 +1,185 @@
+#pragma once
+
+#include <QColor>
+#include <QObject>
+#include <QVariantMap>
+
+class StatusColors : public QObject
+{
+    Q_OBJECT
+    Q_PROPERTY(QVariantMap colors READ colors CONSTANT)
+
+    Q_PROPERTY(QColor black MEMBER black CONSTANT)
+    Q_PROPERTY(QColor white MEMBER white CONSTANT)
+    Q_PROPERTY(QColor transparent MEMBER transparent CONSTANT)
+
+    Q_PROPERTY(QColor blue MEMBER blue CONSTANT)
+    Q_PROPERTY(QColor blue2 MEMBER blue2 CONSTANT)
+    Q_PROPERTY(QColor blue3 MEMBER blue3 CONSTANT)
+    Q_PROPERTY(QColor blue4 MEMBER blue4 CONSTANT)
+    Q_PROPERTY(QColor blue5 MEMBER blue5 CONSTANT)
+    Q_PROPERTY(QColor blue6 MEMBER blue6 CONSTANT)
+    Q_PROPERTY(QColor blue7 MEMBER blue7 CONSTANT)
+    Q_PROPERTY(QColor blue8 MEMBER blue8 CONSTANT)
+
+    Q_PROPERTY(QColor brown MEMBER brown CONSTANT)
+    Q_PROPERTY(QColor brown2 MEMBER brown2 CONSTANT)
+    Q_PROPERTY(QColor brown3 MEMBER brown3 CONSTANT)
+
+    Q_PROPERTY(QColor cyan MEMBER cyan CONSTANT)
+
+    Q_PROPERTY(QColor graphite MEMBER graphite CONSTANT)
+    Q_PROPERTY(QColor graphite2 MEMBER graphite2 CONSTANT)
+    Q_PROPERTY(QColor graphite3 MEMBER graphite3 CONSTANT)
+    Q_PROPERTY(QColor graphite4 MEMBER graphite4 CONSTANT)
+    Q_PROPERTY(QColor graphite5 MEMBER graphite5 CONSTANT)
+
+    Q_PROPERTY(QColor green MEMBER green CONSTANT)
+    Q_PROPERTY(QColor green2 MEMBER green2 CONSTANT)
+    Q_PROPERTY(QColor green3 MEMBER green3 CONSTANT)
+    Q_PROPERTY(QColor green4 MEMBER green4 CONSTANT)
+    Q_PROPERTY(QColor green5 MEMBER green5 CONSTANT)
+    Q_PROPERTY(QColor green6 MEMBER green6 CONSTANT)
+
+    Q_PROPERTY(QColor grey MEMBER grey CONSTANT)
+    Q_PROPERTY(QColor grey2 MEMBER grey2 CONSTANT)
+    Q_PROPERTY(QColor grey3 MEMBER grey3 CONSTANT)
+    Q_PROPERTY(QColor grey4 MEMBER grey4 CONSTANT)
+    Q_PROPERTY(QColor grey5 MEMBER grey5 CONSTANT)
+
+    Q_PROPERTY(QColor moss MEMBER moss CONSTANT)
+    Q_PROPERTY(QColor moss2 MEMBER moss2 CONSTANT)
+
+    Q_PROPERTY(QColor orange MEMBER orange CONSTANT)
+    Q_PROPERTY(QColor orange2 MEMBER orange2 CONSTANT)
+    Q_PROPERTY(QColor orange3 MEMBER orange3 CONSTANT)
+    Q_PROPERTY(QColor orange4 MEMBER orange4 CONSTANT)
+
+    Q_PROPERTY(QColor warning_orange MEMBER warning_orange CONSTANT)
+
+    Q_PROPERTY(QColor purple MEMBER purple CONSTANT)
+
+    Q_PROPERTY(QColor red MEMBER red CONSTANT)
+    Q_PROPERTY(QColor red2 MEMBER red2 CONSTANT)
+    Q_PROPERTY(QColor red3 MEMBER red3 CONSTANT)
+
+    Q_PROPERTY(QColor turquoise MEMBER turquoise CONSTANT)
+    Q_PROPERTY(QColor turquoise2 MEMBER turquoise2 CONSTANT)
+    Q_PROPERTY(QColor turquoise3 MEMBER turquoise3 CONSTANT)
+    Q_PROPERTY(QColor turquoise4 MEMBER turquoise4 CONSTANT)
+
+    Q_PROPERTY(QColor violet MEMBER violet CONSTANT)
+
+    Q_PROPERTY(QColor yellow MEMBER yellow CONSTANT)
+    Q_PROPERTY(QColor yellow2 MEMBER yellow2 CONSTANT)
+
+    Q_PROPERTY(QColor blueHijab MEMBER blueHijab CONSTANT)
+
+    Q_PROPERTY(QColor lightPattensBlue MEMBER lightPattensBlue CONSTANT)
+
+    Q_PROPERTY(QColor blackHovered MEMBER blackHovered CONSTANT)
+    Q_PROPERTY(QColor blueHovered MEMBER blueHovered CONSTANT)
+    Q_PROPERTY(QColor purpleHovered MEMBER purpleHovered CONSTANT)
+    Q_PROPERTY(QColor cyanHovered MEMBER cyanHovered CONSTANT)
+    Q_PROPERTY(QColor violetHovered MEMBER violetHovered CONSTANT)
+    Q_PROPERTY(QColor redHovered MEMBER redHovered CONSTANT)
+    Q_PROPERTY(QColor yellowHovered MEMBER yellowHovered CONSTANT)
+    Q_PROPERTY(QColor greenHovered MEMBER greenHovered CONSTANT)
+    Q_PROPERTY(QColor mossHovered MEMBER mossHovered CONSTANT)
+    Q_PROPERTY(QColor brownHovered MEMBER brownHovered CONSTANT)
+    Q_PROPERTY(QColor brown2Hovered MEMBER brown2Hovered CONSTANT)
+
+    Q_PROPERTY(QColor lightDesktopBlue10 MEMBER lightDesktopBlue10 CONSTANT)
+    Q_PROPERTY(QColor darkDesktopBlue10 MEMBER darkDesktopBlue10 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);
+
+    static constexpr QColor black = QColor(0x00, 0x00, 0x00);
+    static constexpr QColor white = QColor(0xFF, 0xFF, 0xFF);
+    static constexpr QColor transparent = QColor(0x00, 0x00, 0x00, 0x00);
+
+    static constexpr QColor blue = QColor(0x43, 0x60, 0xDF);
+    static constexpr QColor blue2 = QColor(0x29, 0x46, 0xC4);
+    static constexpr QColor blue3 = QColor(0x88, 0xB0, 0xFF);
+    static constexpr QColor blue4 = QColor(0x86, 0x9E, 0xFF);
+    static constexpr QColor blue5 = QColor(0xAA, 0xC6, 0xFF);
+    static constexpr QColor blue6 = QColor(0xEC, 0xEF, 0xFC);
+    static constexpr QColor blue7 = QColor(0x09, 0x10, 0x1C);
+    static constexpr QColor blue8 = QColor(0x6B, 0x6F, 0x76);
+
+    static constexpr QColor brown = QColor(0x8B, 0x31, 0x31);
+    static constexpr QColor brown2 = QColor(0x9B, 0x83, 0x2F);
+    static constexpr QColor brown3 = QColor(0xAD, 0x43, 0x43);
+
+    static constexpr QColor cyan = QColor(0x51, 0xD0, 0xF0);
+
+    static constexpr QColor graphite = QColor(0x21, 0x21, 0x21);
+    static constexpr QColor graphite2 = QColor(0x25, 0x25, 0x25);
+    static constexpr QColor graphite3 = QColor(0x2C, 0x2C, 0x2C);
+    static constexpr QColor graphite4 = QColor(0x37, 0x37, 0x37);
+    static constexpr QColor graphite5 = QColor(0x90, 0x90, 0x90);
+
+    static constexpr QColor green = QColor(0x4E, 0xBC, 0x60);
+    static constexpr QColor green2 = QColor(0x7C, 0xDA, 0x00);
+    static constexpr QColor green3 = QColor(0x60, 0xC3, 0x70);
+    static constexpr QColor green4 = QColor(0x93, 0xDB, 0x33);
+    static constexpr QColor green5 = QColor(0x9E, 0xA8, 0x5D);
+    static constexpr QColor green6 = QColor(0xAF, 0xB5, 0x51);
+
+    static constexpr QColor grey = QColor(0xF0, 0xF2, 0xF5);
+    static constexpr QColor grey2 = QColor(0xF6, 0xF8, 0xFA);
+    static constexpr QColor grey3 = QColor(0xE9, 0xED, 0xF1);
+    static constexpr QColor grey4 = QColor(0xEE, 0xF2, 0xF5);
+    static constexpr QColor grey5 = QColor(0x93, 0x9B, 0xA1);
+
+    static constexpr QColor moss = QColor(0x26, 0xA6, 0x9A);
+    static constexpr QColor moss2 = QColor(0x10, 0xA8, 0x8E);
+
+    static constexpr QColor orange = QColor(0xFE, 0x8F, 0x59);
+    static constexpr QColor orange2 = QColor(0xFF, 0x9F, 0x0F);
+    static constexpr QColor orange3 = QColor(0xFF, 0xA6, 0x7B);
+    static constexpr QColor orange4 = QColor(0xFE, 0x8F, 0x59);
+
+    static constexpr QColor warning_orange = QColor(0xF6, 0x79, 0x3C);
+
+    static constexpr QColor purple = QColor(0x88, 0x7A, 0xF9);
+
+    static constexpr QColor red = QColor(0xFF, 0x2D, 0x55);
+    static constexpr QColor red2 = QColor(0xFA, 0x65, 0x65);
+    static constexpr QColor red3 = QColor(0xFF, 0x5C, 0x7B);
+
+    static constexpr QColor turquoise = QColor(0x0D, 0xA4, 0xC9);
+    static constexpr QColor turquoise2 = QColor(0x07, 0xBC, 0xE9);
+    static constexpr QColor turquoise3 = QColor(0x7B, 0xE5, 0xFF);
+    static constexpr QColor turquoise4 = QColor(0x0D, 0xA4, 0xC9);
+
+    static constexpr QColor violet = QColor(0xD3, 0x7E, 0xF4);
+
+    static constexpr QColor yellow = QColor(0xFF, 0xCA, 0x0F);
+    static constexpr QColor yellow2 = QColor(0xEA, 0xD2, 0x7B);
+
+    static constexpr QColor blueHijab = QColor(0xCD, 0xF2, 0xFB);
+
+    static constexpr QColor lightPattensBlue = QColor(0xD7, 0xDE, 0xE4);
+
+    static constexpr QColor blackHovered = QColor(0x1D, 0x23, 0x2E);
+    static constexpr QColor blueHovered = QColor(0x36, 0x4D, 0xB2);
+    static constexpr QColor purpleHovered = QColor(0x6D, 0x62, 0xC7);
+    static constexpr QColor cyanHovered = QColor(0x41, 0xA6, 0xC0);
+    static constexpr QColor violetHovered = QColor(0xA9, 0x65, 0xC3);
+    static constexpr QColor redHovered = QColor(0xC8, 0x51, 0x51);
+    static constexpr QColor yellowHovered = QColor(0xCC, 0xA2, 0x0C);
+    static constexpr QColor greenHovered = QColor(0x63, 0xAE, 0x00);
+    static constexpr QColor mossHovered = QColor(0x1E, 0x85, 0x7B);
+    static constexpr QColor brownHovered = QColor(0x6F, 0x27, 0x27);
+    static constexpr QColor brown2Hovered = QColor(0x7C, 0x69, 0x26);
+
+    static constexpr QColor lightDesktopBlue10 = QColor(0xEC, 0xEF, 0xFB);
+    static constexpr QColor darkDesktopBlue10 = QColor(0x27, 0x32, 0x51);
+};
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..250a64cd08c
--- /dev/null
+++ b/ui/StatusQ/include/StatusQ/themepalette.h
@@ -0,0 +1,358 @@
+#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)
+
+    // 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)
+    Q_PROPERTY(QColor cardColor MEMBER cardColor 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 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 cardColor;
+
+    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..644c98c6a06 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.
@@ -181,10 +181,10 @@ Rectangle {
         readonly property int bannerRadius: (root.cardSize === StatusCommunityCard.Size.Big) ? 20 : 8
         readonly property int bannerRadiusHovered: (root.cardSize === StatusCommunityCard.Size.Big) ? 30 : 16
         readonly property int cardRadius: (root.cardSize === StatusCommunityCard.Size.Big) ? 16 : 8
-        readonly property color cardColor: Theme.palette.name === "light" ? Theme.palette.indirectColor1 : Theme.palette.baseColor2
-        readonly property color fontColor: Theme.palette.directColor1
-        readonly property color loadingColor1: Theme.palette.baseColor5
-        readonly property color loadingColor2: Theme.palette.baseColor4
+        readonly property color cardColor: root.Theme.palette.cardColor
+        readonly property color fontColor: root.Theme.palette.directColor1
+        readonly property color loadingColor1: root.Theme.palette.baseColor5
+        readonly property color loadingColor2: root.Theme.palette.baseColor4
         readonly property int titleFontWeight: (root.cardSize === StatusCommunityCard.Size.Big) ? Font.Bold : Font.Medium
 
         function numberFormat(number) {
diff --git a/ui/StatusQ/src/StatusQ/Components/StatusContactVerificationIcons.qml b/ui/StatusQ/src/StatusQ/Components/StatusContactVerificationIcons.qml
index ef04cc9a89a..19347cef5a9 100644
--- a/ui/StatusQ/src/StatusQ/Components/StatusContactVerificationIcons.qml
+++ b/ui/StatusQ/src/StatusQ/Components/StatusContactVerificationIcons.qml
@@ -14,13 +14,13 @@ Row {
 
     property StatusAssetSettings mutualConnectionIcon: StatusAssetSettings {
         name: root.tiny ? "tiny/tiny-contact" : "tiny/contact"
-        color: Theme.palette.indirectColor1
+        color: root.Theme.palette.indirectColor1
         width: Math.min(bgWidth, dummyImage.width)
         height: Math.min(bgHeight, dummyImage.height)
         bgWidth: root.tiny ? 10 : 16.5
         bgHeight: root.tiny ? 10 : 16.5
         bgRadius: bgWidth / 2
-        bgColor: Theme.palette.primaryColor1
+        bgColor: root.Theme.palette.primaryColor1
         // Only used to get implicit width and height from the actual image
         property Image dummyImage: Image {
             source: mutualConnectionIcon.name ? Qt.resolvedUrl("../../assets/img/icons/" + mutualConnectionIcon.name + ".svg"): ""
@@ -33,13 +33,14 @@ Row {
         // None and Untrustworthy types, same aspect (Icon will not be visible in case of None type):
         name: root.trustIndicator === StatusContactVerificationIcons.TrustedType.Verified ? root.tiny ? "tiny/tiny-checkmark" : "tiny/checkmark"
                                                                                           : root.tiny ? "tiny/tiny-exclamation" : "tiny/exclamation"
-        color: Theme.palette.indirectColor1
+        color: root.Theme.palette.indirectColor1
         width: Math.min(bgWidth, dummyImage.width)
         height: Math.min(bgHeight, dummyImage.height)
         bgWidth: root.tiny ? 10 : 16
         bgHeight: root.tiny ? 10 : 16
         bgRadius: bgWidth / 2
-        bgColor: root.trustIndicator === StatusContactVerificationIcons.TrustedType.Verified ? Theme.palette.successColor1 : Theme.palette.dangerColor1
+        bgColor: root.trustIndicator === StatusContactVerificationIcons.TrustedType.Verified ? root.Theme.palette.successColor1
+                                                                                             : root.Theme.palette.dangerColor1
         // Only used to get implicit width and height from the actual image
         property Image dummyImage: Image {
             source: trustContactIcon.name ? Qt.resolvedUrl("../../assets/img/icons/" + trustContactIcon.name + ".svg"): ""
@@ -50,7 +51,7 @@ Row {
 
     property StatusAssetSettings blockedContactIcon: StatusAssetSettings {
         name: root.isBlocked ? "cancel" : ""
-        color: Theme.palette.dangerColor1
+        color: root.Theme.palette.dangerColor1
         width: Math.min(bgWidth, dummyImage.width)
         height: Math.min(bgHeight, dummyImage.height)
         bgWidth: root.tiny ? 10 : 16
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..c67e6dc4ee1 100644
--- a/ui/StatusQ/src/StatusQ/Components/StatusListItem.qml
+++ b/ui/StatusQ/src/StatusQ/Components/StatusListItem.qml
@@ -50,13 +50,13 @@ Rectangle {
         charactersLen: 1
         color: {
             if (!root.enabled)
-                return Theme.palette.baseColor1
+                return root.Theme.palette.baseColor1
             if (isLetterIdenticon)
                 return bgColor
             if (type === StatusListItem.Type.Danger)
-                return Theme.palette.dangerColor1
+                return root.Theme.palette.dangerColor1
 
-            return Theme.palette.primaryColor1
+            return root.Theme.palette.primaryColor1
         }
         bgWidth: 40
         bgHeight: 40
@@ -65,10 +65,10 @@ Rectangle {
             if (sensor.containsMouse) {
                 return type === StatusListItem.Type.Secondary ||
                         type === StatusListItem.Type.Danger ? "transparent" :
-                                                              Theme.palette.primaryColor3
+                                                              root.Theme.palette.primaryColor3
             }
             return type === StatusListItem.Type.Danger ?
-                        Theme.palette.dangerColor3 : Theme.palette.primaryColor3
+                        root.Theme.palette.dangerColor3 : root.Theme.palette.primaryColor3
         }
         imgIsIdenticon: false
     }
@@ -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/StatusLoadingPageIndicator.qml b/ui/StatusQ/src/StatusQ/Components/StatusLoadingPageIndicator.qml
index c152b880f0c..655432d9dec 100644
--- a/ui/StatusQ/src/StatusQ/Components/StatusLoadingPageIndicator.qml
+++ b/ui/StatusQ/src/StatusQ/Components/StatusLoadingPageIndicator.qml
@@ -50,7 +50,7 @@ PageIndicator {
 
                 height: parent.height
                 color: pageIndicatorDelegate.isCurrentPage ?
-                           Theme.palette.baseColor1 : Theme.palette.transparent
+                           Theme.palette.baseColor1 : StatusColors.transparent
                 radius: 4
             }
         }
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/StatusRoundIcon.qml b/ui/StatusQ/src/StatusQ/Components/StatusRoundIcon.qml
index a56f4b8fc71..2ee837fc182 100644
--- a/ui/StatusQ/src/StatusQ/Components/StatusRoundIcon.qml
+++ b/ui/StatusQ/src/StatusQ/Components/StatusRoundIcon.qml
@@ -3,16 +3,16 @@ import StatusQ.Core
 import StatusQ.Core.Theme
 
 Rectangle {
-    id: statusRoundedIcon
+    id: root
 
     property StatusAssetSettings asset: StatusAssetSettings {
         width: 24
         height: 24
         rotation: 0
-        color: Theme.palette.primaryColor1
+        color: root.Theme.palette.primaryColor1
         bgWidth: 40
         bgHeight: 40
-        bgColor: Theme.palette.primaryColor3
+        bgColor: root.Theme.palette.primaryColor3
         bgRadius: bgWidth / 2
     }
 
@@ -27,11 +27,11 @@ Rectangle {
         id: statusIcon
         anchors.centerIn: parent
 
-        width: statusRoundedIcon.asset.width
-        height: statusRoundedIcon.asset.height
+        width: root.asset.width
+        height: root.asset.height
 
-        color: statusRoundedIcon.asset.color
-        icon: statusRoundedIcon.asset.name || statusRoundedIcon.asset.source
-        rotation: statusRoundedIcon.asset.rotation
+        color: root.asset.color
+        icon: root.asset.name || root.asset.source
+        rotation: root.asset.rotation
     }
 }
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 3ad2d5fdc10..85ed45664cf 100644
--- a/ui/StatusQ/src/StatusQ/Components/private/statusMessage/StatusMessageEmojiReactions.qml
+++ b/ui/StatusQ/src/StatusQ/Components/private/statusMessage/StatusMessageEmojiReactions.qml
@@ -86,12 +86,13 @@ Flow {
                     objectName: "emojiReaction"
                     Layout.preferredWidth: d.iconSize
                     Layout.preferredHeight: d.iconSize
-                    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/StatusMessageReply.qml b/ui/StatusQ/src/StatusQ/Components/private/statusMessage/StatusMessageReply.qml
index 49f811650d0..d7884089687 100644
--- a/ui/StatusQ/src/StatusQ/Components/private/statusMessage/StatusMessageReply.qml
+++ b/ui/StatusQ/src/StatusQ/Components/private/statusMessage/StatusMessageReply.qml
@@ -37,7 +37,12 @@ Item {
             antialiasing: true
 
             ShapePath {
-                strokeColor: Qt.hsla(Theme.palette.baseColor1.hslHue, Theme.palette.baseColor1.hslSaturation, Theme.palette.baseColor1.hslLightness, 0.4)
+                strokeColor: {
+                    const base = root.Theme.palette.baseColor1
+                    return Qt.hsla(base.hslHue,
+                                   base.hslSaturation,
+                                   base.hslLightness, 0.4)
+                }
                 strokeWidth: 3
                 fillColor: "transparent"
                 capStyle: ShapePath.RoundCap
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..9ec1d47a9c4 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"
@@ -65,10 +65,10 @@ CheckBox {
                     ? d.indicatorIconHeightRegular : d.indicatorIconHeightSmall
             anchors.centerIn: parent
             anchors.horizontalCenterOffset: root.mirrored ? - 1 : 1
-            color: checkState === Qt.PartiallyChecked ? Theme.palette.directColor9 : Theme.palette.white
+            color: checkState === Qt.PartiallyChecked ? Theme.palette.directColor9 : StatusColors.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..7e5a26796a4 100644
--- a/ui/StatusQ/src/StatusQ/Controls/StatusColorRadioButton.qml
+++ b/ui/StatusQ/src/StatusQ/Controls/StatusColorRadioButton.qml
@@ -2,13 +2,12 @@ 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']
+    property string selectionColor: StatusColors.white
     property int diameter: 44
     property int selectorDiameter: 16
 
@@ -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,18 +53,18 @@ 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']
+            border.color: StatusColors.grey3
             border.width: 1
         }
     }
 
     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..741fe55d273 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.padding
+                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/StatusImageCrop.qml b/ui/StatusQ/src/StatusQ/Controls/StatusImageCrop.qml
index a745613c476..d52cfe268c1 100644
--- a/ui/StatusQ/src/StatusQ/Controls/StatusImageCrop.qml
+++ b/ui/StatusQ/src/StatusQ/Controls/StatusImageCrop.qml
@@ -84,7 +84,7 @@ Item {
         \qmlproperty color StatusImageCrop::wallColor
         Color used outside the crop-rect. Tells user which part won't be available after cropping
     */
-    property color wallColor: Theme.palette.black
+    property color wallColor: StatusColors.black
     /*!
         \qmlproperty real StatusImageCrop::wallTransparency
         Transparency outside the crop-rect 0.0 - 1.0 (inclusive). Tells user which part won't
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..d30dbbf92dd 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 {
@@ -41,7 +41,7 @@ ItemDelegate {
             text: root.text
             verticalAlignment: Text.AlignVCenter
             elide: Text.ElideRight
-            color: root.highlighted ? Theme.palette.white : root.enabled ? Theme.palette.directColor1 : Theme.palette.baseColor1
+            color: root.highlighted ? StatusColors.white : root.enabled ? Theme.palette.directColor1 : Theme.palette.baseColor1
 
             Binding on horizontalAlignment {
                 when: root.centerTextHorizontally
diff --git a/ui/StatusQ/src/StatusQ/Controls/StatusPasswordInput.qml b/ui/StatusQ/src/StatusQ/Controls/StatusPasswordInput.qml
index 7fb83ba096c..4cf4927620d 100644
--- a/ui/StatusQ/src/StatusQ/Controls/StatusPasswordInput.qml
+++ b/ui/StatusQ/src/StatusQ/Controls/StatusPasswordInput.qml
@@ -31,8 +31,8 @@ StatusTextField {
     QtObject {
         id: d
 
-        readonly property int inputTextPadding: Theme.defaultPadding
-        readonly property int radius: Theme.defaultRadius
+        readonly property int inputTextPadding: root.Theme.defaultPadding
+        readonly property int radius: root.Theme.defaultPadding / 2
     }
 
     leftPadding: d.inputTextPadding
diff --git a/ui/StatusQ/src/StatusQ/Controls/StatusRadioButton.qml b/ui/StatusQ/src/StatusQ/Controls/StatusRadioButton.qml
index f5e72b411c2..76b23ad60f7 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 {
@@ -38,7 +38,7 @@ RadioButton {
             height: root.size === StatusRadioButton.Size.Large ? 12 : 8
             radius: width / 2
             anchors.centerIn: parent
-            color: Theme.palette.white
+            color: StatusColors.white
             visible: root.checked
         }
     }
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/StatusSlider.qml b/ui/StatusQ/src/StatusQ/Controls/StatusSlider.qml
index f7626da2e99..00680518bdf 100644
--- a/ui/StatusQ/src/StatusQ/Controls/StatusSlider.qml
+++ b/ui/StatusQ/src/StatusQ/Controls/StatusSlider.qml
@@ -15,7 +15,7 @@ Slider {
 
     property int handleSize: 28
     property int bgHeight: 4
-    property color handleColor: Theme.palette.white
+    property color handleColor: StatusColors.white
     property color bgColor: Theme.palette.baseColor2
     property color fillColor: Theme.palette.primaryColor1
 
diff --git a/ui/StatusQ/src/StatusQ/Controls/StatusSwitch.qml b/ui/StatusQ/src/StatusQ/Controls/StatusSwitch.qml
index aa7a7549e71..3f09b48e87d 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 {
@@ -46,7 +46,7 @@ Switch {
             width: 20
             height: 20
             radius: 10
-            color: Theme.palette.white
+            color: StatusColors.white
             layer.enabled: true
             layer.effect: DropShadow {
                 width: circle.width
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/Controls/StatusToolTip.qml b/ui/StatusQ/src/StatusQ/Controls/StatusToolTip.qml
index 6e50a40636a..bc35ddb2feb 100644
--- a/ui/StatusQ/src/StatusQ/Controls/StatusToolTip.qml
+++ b/ui/StatusQ/src/StatusQ/Controls/StatusToolTip.qml
@@ -19,7 +19,7 @@ ToolTip {
     property int orientation: StatusToolTip.Orientation.Top
     property int offset: 0
     property alias arrow: arrow
-    property color color: Theme.palette.black
+    property color color: StatusColors.black
 
     implicitWidth: Math.min(maxWidth,
                             Math.max(implicitBackgroundWidth + leftInset + rightInset,
@@ -74,8 +74,8 @@ ToolTip {
     }
     contentItem: StatusBaseText {
         text: root.text
-        color: Theme.palette.white
-        linkColor: Theme.palette.white
+        color: StatusColors.white
+        linkColor: StatusColors.white
         wrapMode: Text.Wrap
         font.pixelSize: Theme.additionalTextSize
         font.weight: Font.Medium
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 41b7cec62c8..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: baseColor2
-        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 c3423a9e23f..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: baseColor2
-        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..f29bc65048d
--- /dev/null
+++ b/ui/StatusQ/src/StatusQ/Core/Theme/ThemeUtils.qml
@@ -0,0 +1,101 @@
+pragma Singleton
+
+import QtQml
+import QtQuick
+
+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 setTheme(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/StatusColorDialog.qml b/ui/StatusQ/src/StatusQ/Popups/StatusColorDialog.qml
index e6db9c524d7..617f8aee65c 100644
--- a/ui/StatusQ/src/StatusQ/Popups/StatusColorDialog.qml
+++ b/ui/StatusQ/src/StatusQ/Popups/StatusColorDialog.qml
@@ -101,7 +101,7 @@ StatusModal {
                     x: 16
                     y: 16
                     text: root.color.toString()
-                    color: Theme.palette.white
+                    color: StatusColors.white
                 }
             }
 
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..73b5ecda90c
--- /dev/null
+++ b/ui/StatusQ/src/statuscolors.cpp
@@ -0,0 +1,125 @@
+#include "StatusQ/statuscolors.h"
+
+#include <QRegularExpression>
+#include <QtQml/qqml.h>
+
+using namespace Qt::StringLiterals;
+
+namespace {
+
+const QVariantMap s_colors = {
+    { "black"_L1,              StatusColors::black },
+    { "white"_L1,              StatusColors::white },
+    { "transparent"_L1,        StatusColors::transparent },
+
+    { "blue"_L1,               StatusColors::blue },
+    { "blue2"_L1,              StatusColors::blue2 },
+    { "blue3"_L1,              StatusColors::blue3 },
+    { "blue4"_L1,              StatusColors::blue4 },
+    { "blue5"_L1,              StatusColors::blue5 },
+    { "blue6"_L1,              StatusColors::blue6 },
+    { "blue7"_L1,              StatusColors::blue7 },
+    { "blue8"_L1,              StatusColors::blue8 },
+
+    { "brown"_L1,              StatusColors::brown },
+    { "brown2"_L1,             StatusColors::brown2 },
+    { "brown3"_L1,             StatusColors::brown3 },
+
+    { "cyan"_L1,               StatusColors::cyan },
+
+    { "graphite"_L1,           StatusColors::graphite },
+    { "graphite2"_L1,          StatusColors::graphite2 },
+    { "graphite3"_L1,          StatusColors::graphite3 },
+    { "graphite4"_L1,          StatusColors::graphite4 },
+    { "graphite5"_L1,          StatusColors::graphite5 },
+
+    { "green"_L1,              StatusColors::green },
+    { "green2"_L1,             StatusColors::green2 },
+    { "green3"_L1,             StatusColors::green3 },
+    { "green4"_L1,             StatusColors::green4 },
+    { "green5"_L1,             StatusColors::green5 },
+    { "green6"_L1,             StatusColors::green6 },
+
+    { "grey"_L1,               StatusColors::grey },
+    { "grey2"_L1,              StatusColors::grey2 },
+    { "grey3"_L1,              StatusColors::grey3 },
+    { "grey4"_L1,              StatusColors::grey4 },
+    { "grey5"_L1,              StatusColors::grey5 },
+
+    { "moss"_L1,               StatusColors::moss },
+    { "moss2"_L1,              StatusColors::moss2 },
+
+    { "orange"_L1,             StatusColors::orange },
+    { "orange2"_L1,            StatusColors::orange2 },
+    { "orange3"_L1,            StatusColors::orange3 },
+    { "orange4"_L1,            StatusColors::orange4 },
+
+    { "warning_orange"_L1,     StatusColors::warning_orange },
+
+    { "purple"_L1,             StatusColors::purple },
+
+    { "red"_L1,                StatusColors::red },
+    { "red2"_L1,               StatusColors::red2 },
+    { "red3"_L1,               StatusColors::red3 },
+
+    { "turquoise"_L1,          StatusColors::turquoise },
+    { "turquoise2"_L1,         StatusColors::turquoise2 },
+    { "turquoise3"_L1,         StatusColors::turquoise3 },
+    { "turquoise4"_L1,         StatusColors::turquoise4 },
+
+    { "violet"_L1,             StatusColors::violet },
+
+    { "yellow"_L1,             StatusColors::yellow },
+    { "yellow2"_L1,            StatusColors::yellow2 },
+
+    { "blueHijab"_L1,          StatusColors::blueHijab },
+
+    { "lightPattensBlue"_L1,   StatusColors::lightPattensBlue },
+
+    { "blackHovered"_L1,       StatusColors::blackHovered },
+    { "blueHovered"_L1,        StatusColors::blueHovered },
+    { "purpleHovered"_L1,      StatusColors::purpleHovered },
+    { "cyanHovered"_L1,        StatusColors::cyanHovered },
+    { "violetHovered"_L1,      StatusColors::violetHovered },
+    { "redHovered"_L1,         StatusColors::redHovered },
+    { "yellowHovered"_L1,      StatusColors::yellowHovered },
+    { "greenHovered"_L1,       StatusColors::greenHovered },
+    { "mossHovered"_L1,        StatusColors::mossHovered },
+    { "brownHovered"_L1,       StatusColors::brownHovered },
+    { "brown2Hovered"_L1,      StatusColors::brown2Hovered },
+
+    { "lightDesktopBlue10"_L1, StatusColors::lightDesktopBlue10 },
+    { "darkDesktopBlue10"_L1,  StatusColors::darkDesktopBlue10 }
+};
+
+} // 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);
+    }
+
+    return alphaColor(base, alpha);
+}
+
+QColor StatusColors::alphaColor(const QColor& color, qreal alpha)
+{
+    QColor c = color;
+    c.setAlphaF(std::clamp(alpha, 0.0, 1.0));
+    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..fd11334d722
--- /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 (qFuzzyCompare(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 || qFuzzyCompare(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..0a7d90b3885
--- /dev/null
+++ b/ui/StatusQ/src/themepalette.cpp
@@ -0,0 +1,467 @@
+#include "StatusQ/themepalette.h"
+#include "StatusQ/statuscolors.h"
+#include <QtQml/qqml.h>
+
+namespace {
+
+QColor alpha(QColor c, qreal alpha) {
+    c.setAlphaF(alpha);
+    return c;
+}
+
+constexpr auto lightThemeName = "light";
+constexpr auto darkThemeName = "dark";
+
+} // unnamed namespace
+
+ThemePalette::ThemePalette(QObject* parent)
+    : QObject(parent)
+{
+}
+
+QColor ThemePalette::hoverColor(const QColor& normalColor) const
+{
+    return name == lightThemeName ? normalColor.darker(120)
+                                  : 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 = darkThemeName;
+
+    // Base colors
+    t->baseColor1 = StatusColors::graphite5;
+    t->baseColor2 = StatusColors::graphite4;
+    t->baseColor3 = StatusColors::graphite3;
+    t->baseColor4 = StatusColors::graphite2;
+    t->baseColor5 = StatusColors::graphite;
+
+    // Primary
+    t->primaryColor1 = StatusColors::blue3;
+    t->primaryColor2 = alpha(StatusColors::blue4, 0.3);
+    t->primaryColor3 = alpha(StatusColors::blue4, 0.2);
+
+    // Danger
+    t->dangerColor1 = StatusColors::red3;
+    t->dangerColor2 = alpha(StatusColors::red3, 0.3);
+    t->dangerColor3 = alpha(StatusColors::red3, 0.2);
+
+    // Warning
+    t->warningColor1 = StatusColors::warning_orange;
+    t->warningColor2 = alpha(StatusColors::warning_orange, 0.2);
+    t->warningColor3 = alpha(StatusColors::warning_orange, 0.1);
+
+    // Success
+    t->successColor1 = StatusColors::green3;
+    t->successColor2 = alpha(StatusColors::green3, 0.2);
+    t->successColor3 = alpha(StatusColors::green3, 0.3);
+
+    // Mention
+    t->mentionColor1 = StatusColors::turquoise3;
+    t->mentionColor2 = alpha(StatusColors::turquoise4, 0.3);
+    t->mentionColor3 = alpha(StatusColors::turquoise4, 0.2);
+    t->mentionColor4 = alpha(StatusColors::turquoise4, 0.1);
+
+    // Pin
+    t->pinColor1 = StatusColors::orange3;
+    t->pinColor2 = alpha(StatusColors::orange4, 0.2);
+    t->pinColor3 = alpha(StatusColors::orange4, 0.1);
+
+    // Direct (white with varying alpha)
+    t->directColor1 = StatusColors::white;
+    t->directColor2 = alpha(StatusColors::white, 0.9);
+    t->directColor3 = alpha(StatusColors::white, 0.8);
+    t->directColor4 = alpha(StatusColors::white, 0.7);
+    t->directColor5 = alpha(StatusColors::white, 0.4);
+    t->directColor6 = alpha(StatusColors::white, 0.2);
+    t->directColor7 = alpha(StatusColors::white, 0.1);
+    t->directColor8 = alpha(StatusColors::white, 0.05);
+    t->directColor9 = alpha(StatusColors::white, 0.2);
+
+    // Indirect
+    t->indirectColor1 = StatusColors::black;
+    t->indirectColor2 = alpha(StatusColors::black, 0.7);
+    t->indirectColor3 = alpha(StatusColors::black, 0.4);
+    t->indirectColor4 = StatusColors::graphite3;
+
+    // Misc
+    t->miscColor1 = StatusColors::blue5;
+    t->miscColor2 = StatusColors::purple;
+    t->miscColor3 = StatusColors::cyan;
+    t->miscColor4 = StatusColors::violet;
+    t->miscColor5 = StatusColors::red2;
+    t->miscColor6 = StatusColors::orange;
+    t->miscColor7 = StatusColors::yellow;
+    t->miscColor8 = StatusColors::green4;
+    t->miscColor9 = StatusColors::moss2;
+    t->miscColor10 = StatusColors::brown3;
+    t->miscColor11 = StatusColors::yellow2;
+    t->miscColor12 = StatusColors::green6;
+
+    // Other
+    t->neutral95 = QColor(0x06, 0x0F, 0x1F);
+    t->dropShadow = alpha(StatusColors::black, 0.08);
+    t->dropShadow2 = alpha(StatusColors::blue8, 0.02);
+    t->dropShadow3 = alpha(StatusColors::blue8, 0.05);
+    t->backdropColor = alpha(StatusColors::black, 0.4);
+    t->statusFloatingButtonHighlight = alpha(StatusColors::blue4, 0.3);
+    t->statusLoadingHighlight = alpha(StatusColors::white, 0.03);
+    t->statusLoadingHighlight2 = alpha(StatusColors::white, 0.07);
+    t->messageHighlightColor = alpha(StatusColors::blue4, 0.2);
+    t->desktopBlue10 = StatusColors::darkDesktopBlue10;
+    t->blockProgressBarColor = t->directColor7;
+    t->cardColor = t->baseColor2;
+
+    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::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 = alpha(StatusColors::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->baseColor2;
+    t->statusMessage.emojiReactionBackgroundHovered = t->primaryColor3;
+    t->statusMessage.emojiReactionBorderHovered = t->primaryColor2;
+
+    // Privacy mode colors
+    t->privacyModeColors.navBarColor = QColor(0x5A, 0x33, 0xCA);
+    t->privacyModeColors.navButtonColor = alpha(StatusColors::white, 0.4);
+    t->privacyModeColors.navButtonHighlightedColor = StatusColors::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 = lightThemeName;
+
+    // Base colors
+    t->baseColor1 = StatusColors::grey5;
+    t->baseColor2 = StatusColors::grey4;
+    t->baseColor3 = StatusColors::grey3;
+    t->baseColor4 = StatusColors::grey2;
+    t->baseColor5 = StatusColors::grey;
+
+    // Primary
+    t->primaryColor1 = StatusColors::blue;
+    t->primaryColor2 = alpha(StatusColors::blue, 0.2);
+    t->primaryColor3 = alpha(StatusColors::blue, 0.1);
+
+    // Danger
+    t->dangerColor1 = StatusColors::red;
+    t->dangerColor2 = alpha(StatusColors::red, 0.2);
+    t->dangerColor3 = alpha(StatusColors::red, 0.1);
+
+    // Warning
+    t->warningColor1 = StatusColors::warning_orange;
+    t->warningColor2 = alpha(StatusColors::warning_orange, 0.2);
+    t->warningColor3 = alpha(StatusColors::warning_orange, 0.1);
+
+    // Success
+    t->successColor1 = StatusColors::green;
+    t->successColor2 = alpha(StatusColors::green, 0.1);
+    t->successColor3 = alpha(StatusColors::green, 0.2);
+
+    // Mention
+    t->mentionColor1 = StatusColors::turquoise;
+    t->mentionColor2 = alpha(StatusColors::turquoise2, 0.3);
+    t->mentionColor3 = alpha(StatusColors::turquoise2, 0.2);
+    t->mentionColor4 = alpha(StatusColors::turquoise2, 0.1);
+
+    // Pin
+    t->pinColor1 = StatusColors::orange;
+    t->pinColor2 = alpha(StatusColors::orange2, 0.2);
+    t->pinColor3 = alpha(StatusColors::orange2, 0.1);
+
+    // Direct (black with varying alpha)
+    t->directColor1 = StatusColors::black;
+    t->directColor2 = alpha(StatusColors::black, 0.9);
+    t->directColor3 = alpha(StatusColors::black, 0.8);
+    t->directColor4 = alpha(StatusColors::black, 0.7);
+    t->directColor5 = alpha(StatusColors::black, 0.4);
+    t->directColor6 = alpha(StatusColors::black, 0.3);
+    t->directColor7 = alpha(StatusColors::black, 0.1);
+    t->directColor8 = alpha(StatusColors::black, 0.05);
+    t->directColor9 = alpha(StatusColors::black, 0.2);
+
+    // Indirect
+    t->indirectColor1 = StatusColors::white;
+    t->indirectColor2 = alpha(StatusColors::white, 0.7);
+    t->indirectColor3 = alpha(StatusColors::white, 0.4);
+    t->indirectColor4 = StatusColors::white;
+
+    // Misc
+    t->miscColor1 = StatusColors::blue2;
+    t->miscColor2 = StatusColors::purple;
+    t->miscColor3 = StatusColors::cyan;
+    t->miscColor4 = StatusColors::violet;
+    t->miscColor5 = StatusColors::red2;
+    t->miscColor6 = StatusColors::orange;
+    t->miscColor7 = StatusColors::yellow;
+    t->miscColor8 = StatusColors::green2;
+    t->miscColor9 = StatusColors::moss;
+    t->miscColor10 = StatusColors::brown;
+    t->miscColor11 = StatusColors::brown2;
+    t->miscColor12 = StatusColors::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 = alpha(StatusColors::blue7, 0.02);
+    t->dropShadow3 = alpha(StatusColors::black, 0.15);
+    t->backdropColor = alpha(StatusColors::black, 0.4);
+    t->statusFloatingButtonHighlight = StatusColors::blueHijab;
+    t->statusLoadingHighlight = alpha(StatusColors::lightPattensBlue, 0.5);
+    t->statusLoadingHighlight2 = t->indirectColor3;
+    t->messageHighlightColor = alpha(StatusColors::blue, 0.2);
+    t->desktopBlue10 = StatusColors::lightDesktopBlue10;
+    t->blockProgressBarColor = t->baseColor3;
+    t->cardColor = t->indirectColor1;
+
+    t->background = StatusColors::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 = StatusColors::white;
+    t->statusAppLayout.rightPanelBackgroundColor = StatusColors::white;
+
+    // Status app nav bar
+    t->statusAppNavBar.backgroundColor = t->baseColor2;
+
+    // Status toast message
+    t->statusToastMessage.backgroundColor = StatusColors::white;
+
+    // Status list item
+    t->statusListItem.backgroundColor = StatusColors::white;
+    t->statusListItem.secondaryHoverBackgroundColor = StatusColors::blue6;
+    t->statusListItem.highlightColor = alpha(StatusColors::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 = StatusColors::white;
+    t->statusBadge.borderColor = t->baseColor4;
+    t->statusBadge.hoverBorderColor = QColor(0xDD, 0xE3, 0xF3);
+
+    // Status menu
+    t->statusMenu.backgroundColor = StatusColors::white;
+    t->statusMenu.hoverBackgroundColor = t->baseColor2;
+    t->statusMenu.separatorColor = t->separator;
+
+    // Status modal
+    t->statusModal.backgroundColor = StatusColors::white;
+
+    // Status rounded image
+    t->statusRoundedImage.backgroundColor = StatusColors::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 = StatusColors::white;
+    t->statusSelect.menuItemHoverBackgroundColor = t->baseColor2;
+
+    // Status message
+    t->statusMessage.emojiReactionBackground = t->baseColor2;
+    t->statusMessage.emojiReactionBackgroundHovered = t->primaryColor2;
+    t->statusMessage.emojiReactionBorderHovered = t->primaryColor3;
+
+    // Privacy mode colors
+    t->privacyModeColors.navBarColor = QColor(0x5A, 0x33, 0xCA);
+    t->privacyModeColors.navButtonColor = alpha(StatusColors::white, 0.4);
+    t->privacyModeColors.navButtonHighlightedColor = StatusColors::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 3678686f4d4..be35b3fa533 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/Badge.qml b/ui/app/AppLayouts/ActivityCenter/controls/Badge.qml
index 60df8388ab6..bf3a8332618 100644
--- a/ui/app/AppLayouts/ActivityCenter/controls/Badge.qml
+++ b/ui/app/AppLayouts/ActivityCenter/controls/Badge.qml
@@ -14,5 +14,5 @@ Rectangle {
     radius: height / 2
     border.width: 1
     border.color: Theme.palette.directColor7
-    color: Theme.palette.transparent
+    color: StatusColors.transparent
 }
diff --git a/ui/app/AppLayouts/ActivityCenter/controls/NotificationAvatar.qml b/ui/app/AppLayouts/ActivityCenter/controls/NotificationAvatar.qml
index e03093e427c..89d17efbf41 100644
--- a/ui/app/AppLayouts/ActivityCenter/controls/NotificationAvatar.qml
+++ b/ui/app/AppLayouts/ActivityCenter/controls/NotificationAvatar.qml
@@ -170,8 +170,8 @@ Control {
             asset.bgWidth: asset.width
             asset.bgHeight: asset.height
             asset.name: root.badgeIconName
-            asset.bgColor: Theme.palette.transparent
-            asset.color: Theme.palette.transparent
+            asset.bgColor: StatusColors.transparent
+            asset.color: StatusColors.transparent
 
             anchors.right:  avatarImg.right
             anchors.bottom: avatarImg.bottom
diff --git a/ui/app/AppLayouts/ActivityCenter/controls/NotificationCard.qml b/ui/app/AppLayouts/ActivityCenter/controls/NotificationCard.qml
index 2bdb44d50ab..030c0256a3e 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
             }
         }
@@ -197,7 +197,7 @@ Control {
         id: bg
         anchors.fill: parent
         radius: Theme.radius
-        color: root.selected || root.hovered ? Theme.palette.baseColor5 : Theme.palette.transparent
+        color: root.selected || root.hovered ? Theme.palette.baseColor5 : StatusColors.transparent
 
          // Unread indicator dot (top-right).
         Rectangle {
@@ -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..d612f7dedc3 100644
--- a/ui/app/AppLayouts/ActivityCenter/controls/ReplyBadge.qml
+++ b/ui/app/AppLayouts/ActivityCenter/controls/ReplyBadge.qml
@@ -18,7 +18,7 @@ Badge {
 
     implicitWidth: layout.implicitWidth + layout.anchors.leftMargin + layout.anchors.rightMargin
     implicitHeight: layout.implicitHeight + layout.anchors.topMargin + layout.anchors.bottomMargin
-    color: hoverArea.containsMouse ? hoverArea.pressed ? Theme.palette.baseColor3 : Theme.palette.baseColor2 : Theme.palette.transparent
+    color: hoverArea.containsMouse ? hoverArea.pressed ? Theme.palette.baseColor3 : Theme.palette.baseColor2 : StatusColors.transparent
 
     RowLayout {
         id: layout
@@ -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/ActivityNotificationBase.qml b/ui/app/AppLayouts/ActivityCenter/views/ActivityNotificationBase.qml
index 6435f8012a5..679b42cd5df 100644
--- a/ui/app/AppLayouts/ActivityCenter/views/ActivityNotificationBase.qml
+++ b/ui/app/AppLayouts/ActivityCenter/views/ActivityNotificationBase.qml
@@ -33,7 +33,7 @@ Control {
     background: Rectangle {
         id: backgroundItem
         radius: 6
-        color: root.hovered ? Theme.palette.primaryColor3 : Theme.palette.transparent
+        color: root.hovered ? Theme.palette.primaryColor3 : StatusColors.transparent
 
         Behavior on color { ColorAnimation { duration: 200 } }
 
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/BrowserLayout.qml b/ui/app/AppLayouts/Browser/BrowserLayout.qml
index ac31686e9ff..05a4f8333ea 100644
--- a/ui/app/AppLayouts/Browser/BrowserLayout.qml
+++ b/ui/app/AppLayouts/Browser/BrowserLayout.qml
@@ -221,7 +221,7 @@ StatusSectionLayout {
             currentTabIncognito: _internal.currentWebView?.profile.offTheRecord ?? false
             currentFavorite: _internal.currentWebView ? root.bookmarksStore.getCurrentFavorite(_internal.currentWebView.url) : null
             dappBrowserAccName: root.browserWalletStore.dappBrowserAccount.name
-            dappBrowserAccIcon: Utils.getColorForId(root.browserWalletStore.dappBrowserAccount.colorId)
+            dappBrowserAccIcon: Utils.getColorForId(Theme.palette, root.browserWalletStore.dappBrowserAccount.colorId)
             settingMenu: settingsMenu
             currentUrl: !!_internal.currentWebView ? _internal.currentWebView.url : ""
             isLoading: (!!_internal.currentWebView && _internal.currentWebView.loading)
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/DownloadElement.qml b/ui/app/AppLayouts/Browser/controls/DownloadElement.qml
index f78c72f3992..d7c95a2e418 100644
--- a/ui/app/AppLayouts/Browser/controls/DownloadElement.qml
+++ b/ui/app/AppLayouts/Browser/controls/DownloadElement.qml
@@ -27,7 +27,7 @@ Rectangle {
     width: 272
     height: 40
     border.width: 0
-    color: hovered ? Theme.palette.backgroundHover : Theme.palette.transparent
+    color: hovered ? Theme.palette.backgroundHover : StatusColors.transparent
     radius: Theme.radius
 
     MouseArea {
@@ -66,7 +66,7 @@ Rectangle {
             id: fileImageComponent
             StatusIcon {
                 icon: "browser/file"
-                color: downloadComplete ? Theme.palette.transparent : Theme.palette.darkGrey
+                color: downloadComplete ? StatusColors.transparent : Theme.palette.darkGrey
             }
         }
     }
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/panels/BrowserTabView.qml b/ui/app/AppLayouts/Browser/panels/BrowserTabView.qml
index fdcb0212c9d..135a8751db4 100644
--- a/ui/app/AppLayouts/Browser/panels/BrowserTabView.qml
+++ b/ui/app/AppLayouts/Browser/panels/BrowserTabView.qml
@@ -155,7 +155,7 @@ FocusScope {
     }
 
     component AddTabButton: Rectangle {
-        color: Theme.palette.transparent
+        color: StatusColors.transparent
         width: d.tabHeight
         height: d.tabHeight
         BrowserHeaderButton {
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/popups/BrowserWalletMenu.qml b/ui/app/AppLayouts/Browser/popups/BrowserWalletMenu.qml
index c966f4a1b18..2f8114da0af 100644
--- a/ui/app/AppLayouts/Browser/popups/BrowserWalletMenu.qml
+++ b/ui/app/AppLayouts/Browser/popups/BrowserWalletMenu.qml
@@ -161,7 +161,7 @@ Dialog {
             anchors.right: sendBtn.left
             anchors.rightMargin: Theme.padding
             anchors.verticalCenter: accountSelector.verticalCenter
-            color: Theme.palette.transparent
+            color: StatusColors.transparent
             textToCopy: accountSelector.currentAccountAddress
             onCopyClicked: ClipboardUtils.setText(textToCopy)
         }
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/controls/SuggestedChannel.qml b/ui/app/AppLayouts/Chat/controls/SuggestedChannel.qml
index 545355b2079..c216af590a2 100644
--- a/ui/app/AppLayouts/Chat/controls/SuggestedChannel.qml
+++ b/ui/app/AppLayouts/Chat/controls/SuggestedChannel.qml
@@ -16,7 +16,7 @@ Rectangle {
     width: children[0].width + 10
     height: 32
     border.color: Theme.palette.border
-    color: Theme.palette.transparent
+    color: StatusColors.transparent
 
     StyledText {
         id: suggestedChannelText
diff --git a/ui/app/AppLayouts/Chat/panels/ChatAnchorButtonsPanel.qml b/ui/app/AppLayouts/Chat/panels/ChatAnchorButtonsPanel.qml
index 37aaccf2f8d..de8654c00cd 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)
         }
     }
 
@@ -62,7 +62,7 @@ Item {
             visible: root.mentionsCount > 0
             text: d.limitNumberTo99(root.mentionsCount)
             type: StatusBaseButton.Type.Primary
-            textColor: Theme.palette.white
+            textColor: StatusColors.white
             icon.name: "username"
 
             onClicked: root.mentionsButtonClicked()
@@ -74,7 +74,7 @@ Item {
             text: root.recentMessagesCount <= 0 ? "" : d.limitNumberTo99(root.recentMessagesCount)
             normalColor: Theme.palette.baseColor1
             hoverColor: Theme.palette.hoverColor(normalColor)
-            textColor: Theme.palette.white
+            textColor: StatusColors.white
             textPosition: StatusBaseButton.TextPosition.Left
             icon.name: "arrow-down"
 
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/panels/SuggestionBoxPanel.qml b/ui/app/AppLayouts/Chat/panels/SuggestionBoxPanel.qml
index 62082777322..f4e0141cd13 100644
--- a/ui/app/AppLayouts/Chat/panels/SuggestionBoxPanel.qml
+++ b/ui/app/AppLayouts/Chat/panels/SuggestionBoxPanel.qml
@@ -32,7 +32,7 @@ import shared.panels
 import shared.controls.chat
 
 Rectangle {
-    id: container
+    id: root
 
     property var model
     property Item delegate
@@ -65,7 +65,7 @@ Rectangle {
     }
 
     function selectCurrentItem() {
-        container.itemSelected(listView.model.get(listView.currentIndex), filterItem.lastAtPosition, filterItem.cursorPosition)
+        root.itemSelected(listView.model.get(listView.currentIndex), filterItem.lastAtPosition, filterItem.cursorPosition)
     }
 
     onVisibleChanged: {
@@ -93,12 +93,12 @@ Rectangle {
 
     layer.enabled: true
     layer.effect: DropShadow {
-        width: container.width
-        height: container.height
-        x: container.x
-        y: container.y + 10
-        visible: container.visible
-        source: container
+        width: root.width
+        height: root.height
+        x: root.x
+        y: root.y + 10
+        visible: root.visible
+        source: root
         horizontalOffset: 0
         verticalOffset: 2
         radius: 10
@@ -108,8 +108,8 @@ Rectangle {
 
     SuggestionFilterPanel {
         id: filterItem
-        sourceModel: container.model
-        cursorPosition: container.cursorPosition
+        sourceModel: root.model
+        cursorPosition: root.cursorPosition
     }
 
     StatusListView {
@@ -119,20 +119,20 @@ Rectangle {
         anchors.fill: parent
         anchors.margins: Theme.halfPadding
         Keys.priority: Keys.AfterItem
-        Keys.forwardTo: container.inputField
+        Keys.forwardTo: root.inputField
         Keys.onPressed: function(event) {
             if (event.key === Qt.Key_Escape) {
-                container.hide();
+                root.hide();
             } else if (event.key !== Qt.Key_Up && event.key !== Qt.Key_Down) {
                 event.accepted = false;
             }
         }
-        model: container.suggestionsModel
+        model: root.suggestionsModel
 
         delegate: Rectangle {
             id: itemDelegate
             objectName: model.preferredDisplayName
-            color: ListView.isCurrentItem ? Theme.palette.backgroundHover : Theme.palette.transparent
+            color: ListView.isCurrentItem ? Theme.palette.backgroundHover : StatusColors.transparent
             width: ListView.view.width
             height: 42
             radius: Theme.radius
@@ -147,7 +147,7 @@ Rectangle {
 
                 name: model.preferredDisplayName
                 usesDefaultName: model.usesDefaultName
-                userColor: Utils.colorForColorId(model.colorId)
+                userColor: Utils.colorForColorId(root.Theme.palette, model.colorId)
                 image: model.icon
                 interactive: false
             }
@@ -169,7 +169,7 @@ Rectangle {
                     listView.currentIndex = index
                 }
                 onClicked: {
-                    container.itemSelected(model, filterItem.lastAtPosition, filterItem.cursorPosition)
+                    root.itemSelected(model, filterItem.lastAtPosition, filterItem.cursorPosition)
                 }
             }
         }
diff --git a/ui/app/AppLayouts/Chat/panels/UserListPanel.qml b/ui/app/AppLayouts/Chat/panels/UserListPanel.qml
index 737c2a24b16..1e32157f10a 100644
--- a/ui/app/AppLayouts/Chat/panels/UserListPanel.qml
+++ b/ui/app/AppLayouts/Chat/panels/UserListPanel.qml
@@ -134,7 +134,7 @@ Item {
                 isBlocked: model.isBlocked
                 isOwner: model.memberRole === Constants.memberRole.owner
                 icon.name: model.icon
-                icon.color: Utils.colorForColorId(model.colorId)
+                icon.color: Utils.colorForColorId(Theme.palette, model.colorId)
                 status: model.onlineStatus
 
                 onClicked: Global.openProfilePopup(model.pubKey)
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/Chat/views/ChatHeaderContentView.qml b/ui/app/AppLayouts/Chat/views/ChatHeaderContentView.qml
index 82fb054a5f4..7e5b8820e04 100644
--- a/ui/app/AppLayouts/Chat/views/ChatHeaderContentView.qml
+++ b/ui/app/AppLayouts/Chat/views/ChatHeaderContentView.qml
@@ -295,7 +295,7 @@ RowLayout {
             asset.isLetterIdenticon: chatContentModule && chatContentModule.chatDetails.icon === ""
             asset.color: chatContentModule?
                             chatContentModule.chatDetails.type === Constants.chatType.oneToOne ?
-                                Utils.colorForPubkey(chatContentModule.chatDetails.id)
+                                Utils.colorForPubkey(Theme.palette, chatContentModule.chatDetails.id)
                               : chatContentModule.chatDetails.color
             : ""
             asset.emoji: emojiIcon
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/ColorPicker.qml b/ui/app/AppLayouts/Communities/controls/ColorPicker.qml
index d25e2763fbc..2f08e86cc97 100644
--- a/ui/app/AppLayouts/Communities/controls/ColorPicker.qml
+++ b/ui/app/AppLayouts/Communities/controls/ColorPicker.qml
@@ -31,7 +31,7 @@ ColumnLayout {
         property string validationError: ""
 
         bgColor: root.color
-        contentColor: Theme.palette.white
+        contentColor: StatusColors.white
         text: root.color.toString()
         font.weight: Font.Normal
         icon.width: 24
diff --git a/ui/app/AppLayouts/Communities/controls/CommunityInfoPanel.qml b/ui/app/AppLayouts/Communities/controls/CommunityInfoPanel.qml
index 1e15e7a8387..60c9e4b3962 100644
--- a/ui/app/AppLayouts/Communities/controls/CommunityInfoPanel.qml
+++ b/ui/app/AppLayouts/Communities/controls/CommunityInfoPanel.qml
@@ -27,7 +27,7 @@ Control {
     }
 
     background: Rectangle {
-        color: Theme.palette.transparent
+        color: StatusColors.transparent
         radius: Theme.radius
         border.color: Theme.palette.baseColor2
     }
diff --git a/ui/app/AppLayouts/Communities/controls/ExtendedDropdownContent.qml b/ui/app/AppLayouts/Communities/controls/ExtendedDropdownContent.qml
index 3063212bf05..78e3b00ff48 100644
--- a/ui/app/AppLayouts/Communities/controls/ExtendedDropdownContent.qml
+++ b/ui/app/AppLayouts/Communities/controls/ExtendedDropdownContent.qml
@@ -498,6 +498,12 @@ Item {
 
         ListDropdownContent {
             id: assetDelegate
+
+            // workaround for QTBUG-142248
+            Theme.style: root.Theme.style
+            Theme.padding: root.Theme.padding
+            Theme.fontSizeOffset: root.Theme.fontSizeOffset
+
             availableData: d.availableData
             noDataText: root.noDataText
             areHeaderButtonsVisible: root.state === d.depth1_ListState
@@ -543,6 +549,12 @@ Item {
 
         ListDropdownContent {
             id: collectibleDelegate
+
+            // workaround for QTBUG-142248
+            Theme.style: root.Theme.style
+            Theme.padding: root.Theme.padding
+            Theme.fontSizeOffset: root.Theme.fontSizeOffset
+
             availableData: d.availableData
             noDataText: root.noDataText
             areHeaderButtonsVisible: root.state === d.depth1_ListState
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/controls/TokenHolderListItem.qml b/ui/app/AppLayouts/Communities/controls/TokenHolderListItem.qml
index 0e768ab79c8..3312b15931c 100644
--- a/ui/app/AppLayouts/Communities/controls/TokenHolderListItem.qml
+++ b/ui/app/AppLayouts/Communities/controls/TokenHolderListItem.qml
@@ -181,7 +181,7 @@ ItemDelegate {
             isOwner: root.memberRole === Constants.memberRole.owner
             status: root.onlineStatus
             icon.name: root.iconName
-            icon.color: Utils.colorForPubkey(root.pubKey)
+            icon.color: Utils.colorForPubkey(Theme.palette, root.pubKey)
         }
     }
 
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/BannerPanel.qml b/ui/app/AppLayouts/Communities/panels/BannerPanel.qml
index d3fe64ceae9..24af59de559 100644
--- a/ui/app/AppLayouts/Communities/panels/BannerPanel.qml
+++ b/ui/app/AppLayouts/Communities/panels/BannerPanel.qml
@@ -21,7 +21,7 @@ Rectangle {
     implicitHeight: 168
     border.color: Theme.palette.border
     radius: 16
-    color: Theme.palette.transparent
+    color: StatusColors.transparent
 
     signal buttonClicked()
 
diff --git a/ui/app/AppLayouts/Communities/panels/ChannelsAndCategoriesBannerPanel.qml b/ui/app/AppLayouts/Communities/panels/ChannelsAndCategoriesBannerPanel.qml
index 8f4740a9e73..6a9c6f3fe66 100644
--- a/ui/app/AppLayouts/Communities/panels/ChannelsAndCategoriesBannerPanel.qml
+++ b/ui/app/AppLayouts/Communities/panels/ChannelsAndCategoriesBannerPanel.qml
@@ -25,7 +25,7 @@ Rectangle {
     anchors.rightMargin: Theme.padding
     border.color: Theme.palette.border
     radius: 16
-    color: Theme.palette.transparent
+    color: StatusColors.transparent
 
     Rectangle {
         width: 66
diff --git a/ui/app/AppLayouts/Communities/panels/ColorPanel.qml b/ui/app/AppLayouts/Communities/panels/ColorPanel.qml
index e4a3a3a0281..1b537bae0f7 100644
--- a/ui/app/AppLayouts/Communities/panels/ColorPanel.qml
+++ b/ui/app/AppLayouts/Communities/panels/ColorPanel.qml
@@ -102,7 +102,7 @@ StatusScrollView {
             StatusBaseText {
                 anchors.centerIn: parent
                 text: qsTr("White text should be legible on top of this colour")
-                color: Theme.palette.white
+                color: StatusColors.white
             }
         }
 
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..5d2b9558f5b 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]
                         }
                     }
                 }
@@ -107,7 +107,7 @@ ColumnLayout {
                 Layout.maximumWidth: 405
                 Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter
                 font.weight: Font.Bold
-                font.pixelSize: Constants.onboarding.titleFontSize
+                font.pixelSize: Theme.fontSize(17)
                 text: qsTr("%1 will be right back!").arg(root.name)
                 wrapMode: Text.WordWrap
             }
@@ -116,7 +116,7 @@ ColumnLayout {
                 Layout.maximumWidth: 405
                 Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter
                 horizontalAlignment: Text.AlignHCenter
-                font.pixelSize: Constants.onboarding.titleFontSize
+                font.pixelSize: Theme.fontSize(17)
                 text: qsTr("You will automatically re-enter the community and be able to view and post as normal as soon as the community’s control node comes back online.")
                 wrapMode: Text.WordWrap
             }
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/IntroPanel.qml b/ui/app/AppLayouts/Communities/panels/IntroPanel.qml
index 6d5bd2e2a72..aef3bebe64e 100644
--- a/ui/app/AppLayouts/Communities/panels/IntroPanel.qml
+++ b/ui/app/AppLayouts/Communities/panels/IntroPanel.qml
@@ -24,10 +24,10 @@ Control {
         id: d
 
         readonly property int rowChildSpacing: 10
-        readonly property color rowIconColor: Theme.palette.primaryColor1
+        readonly property color rowIconColor: root.Theme.palette.primaryColor1
         readonly property string rowIconName: "checkmark-circle"
         readonly property int rowFontSize: 15
-        readonly property color rowTextColor: Theme.palette.directColor1
+        readonly property color rowTextColor: root.Theme.palette.directColor1
         readonly property double rowTextLineHeight: 1.2
     }
 
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/PermissionQualificationPanel.qml b/ui/app/AppLayouts/Communities/panels/PermissionQualificationPanel.qml
index d809dd520be..8ed9e964cd5 100644
--- a/ui/app/AppLayouts/Communities/panels/PermissionQualificationPanel.qml
+++ b/ui/app/AppLayouts/Communities/panels/PermissionQualificationPanel.qml
@@ -18,7 +18,7 @@ Control {
     background: Rectangle {
         border.color: Theme.palette.border
         radius: Theme.radius
-        color: Theme.palette.transparent
+        color: StatusColors.transparent
     }
 
     contentItem: RowLayout {
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..20f4b2c4b3e 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.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..a4cf410d56c 100644
--- a/ui/app/AppLayouts/Communities/panels/WelcomeBannerPanel.qml
+++ b/ui/app/AppLayouts/Communities/panels/WelcomeBannerPanel.qml
@@ -25,7 +25,7 @@ Rectangle {
     anchors.rightMargin: Theme.padding
     border.color: Theme.palette.border
     radius: 16
-    color: Theme.palette.transparent
+    color: StatusColors.transparent
 
     Rectangle {
         width: 70
@@ -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/CreateChannelPopup.qml b/ui/app/AppLayouts/Communities/popups/CreateChannelPopup.qml
index 655fbf87bee..988e1a51bab 100644
--- a/ui/app/AppLayouts/Communities/popups/CreateChannelPopup.qml
+++ b/ui/app/AppLayouts/Communities/popups/CreateChannelPopup.qml
@@ -742,7 +742,7 @@ StatusStackModal {
                         height: 44
                         anchors.bottom: parent.bottom
                         bgColor: colorPanel.colorSelected ? colorPanel.color : Theme.palette.baseColor2
-                        contentColor: colorPanel.colorSelected ? Theme.palette.white : Theme.palette.baseColor1
+                        contentColor: colorPanel.colorSelected ? StatusColors.white : Theme.palette.baseColor1
                         text: colorPanel.colorSelected ? colorPanel.color.toString().toUpperCase() : qsTr("Pick a colour")
                         onClicked: { d.currentPage = CreateChannelPopup.CurrentPage.ColorPicker; d.colorPickerOpened = true; }
                         onTextChanged: {
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/popups/InDropdown.qml b/ui/app/AppLayouts/Communities/popups/InDropdown.qml
index b9bac98271b..85a2dc6a35c 100644
--- a/ui/app/AppLayouts/Communities/popups/InDropdown.qml
+++ b/ui/app/AppLayouts/Communities/popups/InDropdown.qml
@@ -146,7 +146,7 @@ StatusDropdown {
         }
 
         function resolveColor(color, colorId) {
-            return !!color ? color : Theme.palette.userCustomizationColors[colorId]
+            return !!color ? color : root.Theme.palette.userCustomizationColors[colorId]
         }
     }
 
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/HomePageAdaptor.qml b/ui/app/AppLayouts/HomePage/HomePageAdaptor.qml
index d5997ffcf71..e0b4a776936 100644
--- a/ui/app/AppLayouts/HomePage/HomePageAdaptor.qml
+++ b/ui/app/AppLayouts/HomePage/HomePageAdaptor.qml
@@ -232,7 +232,7 @@ QObject {
             readonly property string id: model.subsection
             readonly property string name: model.text
             readonly property string icon: model.icon
-            readonly property color color: Theme.palette.primaryColor1
+            readonly property color color: root.Theme.palette.primaryColor1
             readonly property bool hasNotification: model.badgeCount > 0
             readonly property int notificationsCount: model.badgeCount
 
@@ -260,7 +260,7 @@ QObject {
             readonly property string name: model.name
             readonly property string icon: model.icon || model.emoji
             readonly property string lastMessageText: model.lastMessageText
-            readonly property color color: model.color || Utils.colorForColorId(model.colorId)
+            readonly property color color: model.color || Utils.colorForColorId(root.Theme.palette, model.colorId)
             readonly property bool hasNotification: model.hasUnreadMessages || model.notificationsCount
             readonly property int notificationsCount: model.notificationsCount
 
@@ -289,7 +289,7 @@ QObject {
             readonly property string name: model.name
             readonly property string icon: model.icon || model.emoji
             readonly property string lastMessageText: model.lastMessageText
-            readonly property color color: model.color || Utils.colorForColorId(model.colorId)
+            readonly property color color: model.color || Utils.colorForColorId(root.Theme.palette, model.colorId)
         }
 
         expectedRoles: ["sectionId", "chatId", "chatType", "name", "sectionName", "emoji", "icon", "color", "colorId", "lastMessageText"]
@@ -305,7 +305,7 @@ QObject {
             readonly property string id: model.mixedcaseAddress
             readonly property string name: model.name
             readonly property string icon: model.emoji
-            readonly property color color: Utils.getColorForId(model.colorId ?? Constants.walletAccountColors.primary)
+            readonly property color color: Utils.getColorForId(root.Theme.palette, model.colorId ?? Constants.walletAccountColors.primary)
             readonly property bool hasNotification: false
             readonly property int notificationsCount: 0
 
@@ -325,7 +325,7 @@ QObject {
             readonly property string id: model.url
             readonly property string name: model.name || StringUtils.extractDomainFromLink(model.url)
             readonly property string icon: model.iconUrl || "dapp"
-            readonly property color color: Theme.palette.primaryColor1
+            readonly property color color: root.Theme.palette.primaryColor1
 
             readonly property url connectorBadge: model.connectorBadge
         }
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..401d0ad68f2 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
         }
@@ -106,7 +106,7 @@ AbstractButton {
                 Layout.preferredWidth: root.icon.width
                 Layout.preferredHeight: root.icon.height
 
-                color: mainBgRect.color
+                color: hovered ? Qt.lighter(Theme.palette.baseColor4, 1.5) : Theme.palette.baseColor4
                 radius: width/2
 
                 Loader {
@@ -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..13209b0a4c7 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 {
@@ -144,7 +144,8 @@ StatusSectionLayout {
                 changePct24Hour: qsTr("%1 %2%", "[up/down/none character depending on value sign] [localized percentage value]%")
                 .arg(WalletUtils.getUpDownTriangle(model.priceChangePercentage24h))
                 .arg(LocaleUtils.numberToLocaleString(model.priceChangePercentage24h, 2))
-                changePct24HourColor: WalletUtils.getChangePct24HourColor(model.priceChangePercentage24h)
+                changePct24HourColor: WalletUtils.getChangePct24HourColor(
+                                          Theme.palette, model.priceChangePercentage24h)
                 volume24Hour: "%1%2"
                 .arg(root.currencySymbol)
                 .arg(root.fnFormatCurrencyAmount(model.totalVolume, {noSymbol: true}))
diff --git a/ui/app/AppLayouts/Market/controls/MarketTokenDelegate.qml b/ui/app/AppLayouts/Market/controls/MarketTokenDelegate.qml
index c43f0cf4129..bd375fd647b 100644
--- a/ui/app/AppLayouts/Market/controls/MarketTokenDelegate.qml
+++ b/ui/app/AppLayouts/Market/controls/MarketTokenDelegate.qml
@@ -54,7 +54,7 @@ StatusItemDelegate {
     cursorShape: Qt.ArrowCursor
 
     background: Rectangle {
-        color: root.hovered ? Theme.palette.baseColor4: Theme.palette.transparent
+        color: root.hovered ? Theme.palette.baseColor4: StatusColors.transparent
     }
 
     contentItem: ColumnLayout {
diff --git a/ui/app/AppLayouts/Market/controls/Paginator.qml b/ui/app/AppLayouts/Market/controls/Paginator.qml
index c42a2183b07..45cafc2eb95 100644
--- a/ui/app/AppLayouts/Market/controls/Paginator.qml
+++ b/ui/app/AppLayouts/Market/controls/Paginator.qml
@@ -71,9 +71,9 @@ Control {
             objectName: "previousButton"
 
             font.pixelSize: Theme.additionalTextSize
-            normalColor: Theme.palette.transparent
+            normalColor: StatusColors.transparent
             hoverColor: Theme.palette.primaryColor3
-            disabledColor: Theme.palette.transparent
+            disabledColor: StatusColors.transparent
 
             icon.name: "previous"
             enabled: root.currentPage > 1
@@ -92,9 +92,9 @@ Control {
                 objectName: "numberButton_"+ index
 
                 font.pixelSize: Theme.additionalTextSize
-                normalColor: Theme.palette.transparent
+                normalColor: StatusColors.transparent
                 hoverColor: Theme.palette.primaryColor3
-                disabledColor: Theme.palette.transparent
+                disabledColor: StatusColors.transparent
                 size: root.compactMode ? StatusBaseButton.Size.Small : StatusBaseButton.Size.Large
 
                 text: modelData
@@ -112,9 +112,9 @@ Control {
             objectName: "nextButton"
 
             font.pixelSize: Theme.additionalTextSize
-            normalColor: Theme.palette.transparent
+            normalColor: StatusColors.transparent
             hoverColor: Theme.palette.primaryColor3
-            disabledColor: Theme.palette.transparent
+            disabledColor: StatusColors.transparent
 
             icon.name: "next"
             enabled: root.currentPage < d.totalPages
diff --git a/ui/app/AppLayouts/Node/NodeLayout.qml b/ui/app/AppLayouts/Node/NodeLayout.qml
index dd84ada64a0..a3517a4239b 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..203eac18c3e 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 {
@@ -44,7 +44,7 @@ Control {
             text: newsPage.primaryText
             horizontalAlignment: Text.AlignHCenter
             font.weight: Font.DemiBold
-            color: Theme.palette.white
+            color: StatusColors.white
             wrapMode: Text.WordWrap
         }
 
@@ -53,7 +53,7 @@ Control {
             text: newsPage.secondaryText
             horizontalAlignment: Text.AlignHCenter
             font.pixelSize: Theme.additionalTextSize
-            color: Theme.palette.white
+            color: StatusColors.white
             wrapMode: Text.WordWrap
         }
 
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..de73d034dc3 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
@@ -57,7 +57,7 @@ ItemDelegate {
                 // but it requires changing the DB which is probably not worth it
                 usesDefaultName: !root.image
                 image: root.image
-                userColor: Utils.colorForColorId(root.colorId)
+                userColor: Utils.colorForColorId(Theme.palette, root.colorId)
                 imageHeight: Constants.onboarding.userImageHeight
                 imageWidth: Constants.onboarding.userImageWidth
             }
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..ec3b8300ada 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
@@ -130,9 +130,9 @@ KeycardBasePage {
                 title: qsTr("Insert your Keycard")
                 infoText.text: qsTr("Get help via %1 🔗").arg(Utils.getStyledLink("https://keycard.tech", "https://keycard.tech/docs/",
                                                                                 infoText.hoveredLink,
-                                                                                Theme.palette.baseColor1,
-                                                                                Theme.palette.primaryColor1))
-                image.source: Theme.png("onboarding/keycard/insert")
+                                                                                root.Theme.palette.baseColor1,
+                                                                                root.Theme.palette.primaryColor1))
+                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
@@ -184,9 +184,9 @@ KeycardBasePage {
             when: root.keycardState === Onboarding.KeycardState.BlockedPIN
             PropertyChanges {
                 target: root
-                title: "<font color='%1'>".arg(Theme.palette.dangerColor1) + qsTr("Keycard blocked") + "</font>"
+                title: "<font color='%1'>".arg(root.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
@@ -206,9 +206,9 @@ KeycardBasePage {
             when: root.keycardState === Onboarding.KeycardState.BlockedPUK
             PropertyChanges {
                 target: root
-                title: "<font color='%1'>".arg(Theme.palette.dangerColor1) + qsTr("Keycard blocked") + "</font>"
+                title: "<font color='%1'>".arg(root.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 f318b5777ae..444d455d220 100644
--- a/ui/app/AppLayouts/Onboarding/pages/NewAccountLoginPage.qml
+++ b/ui/app/AppLayouts/Onboarding/pages/NewAccountLoginPage.qml
@@ -38,7 +38,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
@@ -60,7 +60,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 {
@@ -100,7 +100,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 {
@@ -116,7 +116,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/BloomSelectorButton.qml b/ui/app/AppLayouts/Profile/controls/BloomSelectorButton.qml
index 062fc0940ae..da17a345eb7 100644
--- a/ui/app/AppLayouts/Profile/controls/BloomSelectorButton.qml
+++ b/ui/app/AppLayouts/Profile/controls/BloomSelectorButton.qml
@@ -26,7 +26,7 @@ Rectangle {
 
     border.color: mouseArea.containsMouse || radioBtn.checked ? Theme.palette.primaryColor1 : Theme.palette.border
     border.width: 1
-    color: Theme.palette.transparent
+    color: StatusColors.transparent
     implicitWidth: 130
     implicitHeight: 120
     radius: Theme.radius
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/WalletAccountDelegate.qml b/ui/app/AppLayouts/Profile/controls/WalletAccountDelegate.qml
index e5337b71a47..c906491adcb 100644
--- a/ui/app/AppLayouts/Profile/controls/WalletAccountDelegate.qml
+++ b/ui/app/AppLayouts/Profile/controls/WalletAccountDelegate.qml
@@ -19,8 +19,8 @@ StatusListItem {
 
     objectName: account.name
     title: account.name
-    subTitle: WalletUtils.addressToDisplay(account.address, true, sensor.containsMouse)
-    asset.color: !!account.colorId ? Utils.getColorForId(account.colorId): ""
+    subTitle: WalletUtils.addressToDisplay(Theme.palette, account.address, true, sensor.containsMouse)
+    asset.color: !!account.colorId ? Utils.getColorForId(Theme.palette, account.colorId): ""
     asset.emoji: account.emoji
     asset.name: !account.emoji ? "filled-account": ""
     asset.letterSize: 14
diff --git a/ui/app/AppLayouts/Profile/controls/WalletAccountDetailsKeypairItem.qml b/ui/app/AppLayouts/Profile/controls/WalletAccountDetailsKeypairItem.qml
index 90b5f2a023e..0da0620be8c 100644
--- a/ui/app/AppLayouts/Profile/controls/WalletAccountDetailsKeypairItem.qml
+++ b/ui/app/AppLayouts/Profile/controls/WalletAccountDetailsKeypairItem.qml
@@ -21,7 +21,7 @@ StatusListItem {
         height: !!root.keyPair && root.keyPair.icon? Theme.bigPadding : 40
         name: !!root.keyPair? !!root.keyPair.image? root.keyPair.image : root.keyPair.icon : ""
         isImage: !!root.keyPair && !!root.keyPair.image
-        color: !!root.keyPair && root.keyPair.pairType === Constants.keypair.type.profile? Utils.colorForPubkey(root.userProfilePublicKey) : Theme.palette.primaryColor1
+        color: !!root.keyPair && root.keyPair.pairType === Constants.keypair.type.profile? Utils.colorForPubkey(Theme.palette, root.userProfilePublicKey) : Theme.palette.primaryColor1
         letterSize: Math.max(4, asset.width / 2.4)
         charactersLen: 2
         isLetterIdenticon: !!root.keyPair && !root.keyPair.icon && !asset.name.toString()
@@ -30,11 +30,11 @@ StatusListItem {
         if (sensor.containsMouse || root.highlighted) {
             return Theme.palette.baseColor2
         }
-        return Theme.palette.transparent
+        return StatusColors.transparent
     }
     tagsModel: !!root.keyPair? root.keyPair.accounts: []
     tagsDelegate: StatusListItemTag {
-        bgColor: !!model.account.colorId ? Utils.getColorForId(model.account.colorId): ""
+        bgColor: !!model.account.colorId ? Utils.getColorForId(Theme.palette, model.account.colorId): ""
         bgRadius: 6
         height: Theme.bigPadding
         closeButtonVisible: false
@@ -42,7 +42,7 @@ StatusListItem {
         asset.height: Theme.bigPadding
         asset.emoji: model.account.emoji
         asset.emojiSize: Emoji.size.verySmall
-        asset.color: Theme.palette.transparent
+        asset.color: StatusColors.transparent
         asset.isLetterIdenticon: true
         title: model.account.name
         titleText.font.pixelSize: Theme.tertiaryTextFontSize
diff --git a/ui/app/AppLayouts/Profile/controls/WalletAccountDetailsListItem.qml b/ui/app/AppLayouts/Profile/controls/WalletAccountDetailsListItem.qml
index 4212fbe2bb4..df998450ca3 100644
--- a/ui/app/AppLayouts/Profile/controls/WalletAccountDetailsListItem.qml
+++ b/ui/app/AppLayouts/Profile/controls/WalletAccountDetailsListItem.qml
@@ -36,7 +36,7 @@ StatusListItem {
         if (isInteractive && (sensor.containsMouse || root.highlighted)) {
             return Theme.palette.baseColor2
         }
-        return Theme.palette.transparent
+        return StatusColors.transparent
     }
     components: [
         StatusRoundButton {
diff --git a/ui/app/AppLayouts/Profile/controls/WalletKeyPairDelegate.qml b/ui/app/AppLayouts/Profile/controls/WalletKeyPairDelegate.qml
index b563fc023ba..69584acdfc4 100644
--- a/ui/app/AppLayouts/Profile/controls/WalletKeyPairDelegate.qml
+++ b/ui/app/AppLayouts/Profile/controls/WalletKeyPairDelegate.qml
@@ -50,14 +50,14 @@ Rectangle {
             statusListItemSubTitle.textFormat: Qt.RichText
             titleTextIcon: !!root.keyPair && keyPair.migratedToKeycard ? "keycard": ""
             subTitle: Utils.getKeypairLocation(root.keyPair, false)
-            statusListItemSubTitle.color: Utils.getKeypairLocationColor(root.keyPair)
-            color: Theme.palette.transparent
+            statusListItemSubTitle.color: Utils.getKeypairLocationColor(Theme.palette, root.keyPair)
+            color: StatusColors.transparent
             asset {
-                width: !!root.keyPair && keyPair.icon? Theme.bigPadding : 40
-                height: !!root.keyPair && keyPair.icon? Theme.bigPadding : 40
+                width: !!root.keyPair && keyPair.icon? root.Theme.bigPadding : 40
+                height: !!root.keyPair && keyPair.icon? root.Theme.bigPadding : 40
                 name: !!root.keyPair? !!root.keyPair.image? root.keyPair.image : root.keyPair.icon : ""
                 isImage: !!root.keyPair && !!keyPair.image
-                color: d.isProfileKeypair ? Utils.colorForPubkey(root.userProfilePublicKey) : Theme.palette.primaryColor1
+                color: d.isProfileKeypair ? Utils.colorForPubkey(Theme.palette, root.userProfilePublicKey) : root.Theme.palette.primaryColor1
                 letterSize: Math.max(4, asset.width / 2.4)
                 charactersLen: 2
                 isLetterIdenticon: !!root.keyPair && !keyPair.icon && !asset.name.toString()
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/NotificationAppearancePreviewPanel.qml b/ui/app/AppLayouts/Profile/panels/NotificationAppearancePreviewPanel.qml
index 163e17a957c..4f0b515cd1d 100644
--- a/ui/app/AppLayouts/Profile/panels/NotificationAppearancePreviewPanel.qml
+++ b/ui/app/AppLayouts/Profile/panels/NotificationAppearancePreviewPanel.qml
@@ -20,7 +20,7 @@ Control {
     background: Rectangle {
         color: radioButton.checked ? Theme.palette.secondaryBackground :
                                      (isHovered ? Theme.palette.backgroundHover
-                                                : Theme.palette.transparent)
+                                                : StatusColors.transparent)
         radius: Theme.radius
     }
 
diff --git a/ui/app/AppLayouts/Profile/panels/ProfileShowcaseAccountsPanel.qml b/ui/app/AppLayouts/Profile/panels/ProfileShowcaseAccountsPanel.qml
index f3ff33d6269..079a675cb91 100644
--- a/ui/app/AppLayouts/Profile/panels/ProfileShowcaseAccountsPanel.qml
+++ b/ui/app/AppLayouts/Profile/panels/ProfileShowcaseAccountsPanel.qml
@@ -20,13 +20,12 @@ ProfileShowcasePanel {
     searchPlaceholderText: qsTr("Search account name or address")
     delegate: ProfileShowcasePanelDelegate {
         title: model ? model.name : ""
-        secondaryTitle: WalletUtils.addressToDisplay(model ? model.address ?? "" : "",
-                                                     true,
-                                                     containsMouse)
+        secondaryTitle: WalletUtils.addressToDisplay(Theme.palette, model ? model.address ?? "" : "",
+                                                     true, containsMouse)
         hasEmoji: model && !!model.emoji
         hasIcon: !hasEmoji
         icon.name: hasEmoji ? model.emoji : "filled-account"
-        icon.color: model && model.colorId ? Utils.getColorForId(model.colorId) : Theme.palette.primaryColor3
+        icon.color: model && model.colorId ? Utils.getColorForId(Theme.palette, model.colorId) : Theme.palette.primaryColor3
         highlighted: model ? model.address === root.currentWallet : false
     }
     filter: FastExpressionFilter {
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/ExemptionNotificationsModal.qml b/ui/app/AppLayouts/Profile/popups/ExemptionNotificationsModal.qml
index 0e46d6ae1e7..1e263009bdb 100644
--- a/ui/app/AppLayouts/Profile/popups/ExemptionNotificationsModal.qml
+++ b/ui/app/AppLayouts/Profile/popups/ExemptionNotificationsModal.qml
@@ -36,7 +36,7 @@ StatusModal {
 //                   Theme.palette.userCustomizationColors[Utils.colorIdForPubkey(root.itemId)] :
 //                   root.color
         // until then the following is used
-        bgColor: d.isOneToOneChat ? Utils.colorForPubkey(root.itemId) : root.color
+        bgColor: d.isOneToOneChat ? Utils.colorForPubkey(root.Theme.palette, root.itemId) : root.color
         name: root.image
         isImage: !!root.image
         charactersLen: d.isOneToOneChat ? 2 : 1
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/RemoveKeypairPopup.qml b/ui/app/AppLayouts/Profile/popups/RemoveKeypairPopup.qml
index e0f7f3f0035..7f996bd455b 100644
--- a/ui/app/AppLayouts/Profile/popups/RemoveKeypairPopup.qml
+++ b/ui/app/AppLayouts/Profile/popups/RemoveKeypairPopup.qml
@@ -52,7 +52,7 @@ StatusDialog {
                 Rectangle {
                     implicitWidth: scrolView1.availableWidth
                     implicitHeight: listview.height
-                    color: Theme.palette.transparent
+                    color: StatusColors.transparent
                     border.color: Theme.palette.baseColor2
                     border.width: 1
                     radius: 8
@@ -67,7 +67,7 @@ StatusDialog {
                                 id: delegate
                                 width: parent.width
                                 account : model.account
-                                color: Theme.palette.transparent
+                                color: StatusColors.transparent
                                 nextIconVisible: false
                                 components: StatusBaseText {
                                     font.pixelSize: Theme.primaryTextFontSize
diff --git a/ui/app/AppLayouts/Profile/popups/RenameAccountModal.qml b/ui/app/AppLayouts/Profile/popups/RenameAccountModal.qml
index accd1912a4b..3ec8a8cad74 100644
--- a/ui/app/AppLayouts/Profile/popups/RenameAccountModal.qml
+++ b/ui/app/AppLayouts/Profile/popups/RenameAccountModal.qml
@@ -59,7 +59,7 @@ StatusModal {
             placeholderText: qsTr("Enter an account name...")
             input.text: popup.accountName
             input.asset.emoji: popup.accountEmoji
-            input.asset.color: Utils.getColorForId(popup.accountColorId)
+            input.asset.color: Utils.getColorForId(Theme.palette, popup.accountColorId)
             input.asset.name: !popup.accountEmoji ? "filled-account": ""
 
             validationMode: StatusInput.ValidationMode.Always
@@ -89,7 +89,7 @@ StatusModal {
             anchors.horizontalCenter: parent.horizontalCenter
             model: Theme.palette.customisationColorsArray
             titleText: qsTr("COLOUR")
-            selectedColor: Utils.getColorForId(popup.accountColorId)
+            selectedColor: Utils.getColorForId(Theme.palette, popup.accountColorId)
             selectedColorIndex: {
                 for (let i = 0; i < model.length; i++) {
                     if(model[i] === popup.accountColorId)
@@ -133,7 +133,7 @@ StatusModal {
                      return
                  }
 
-                popup.renameAccountRequested(accountNameInput.text, Utils.getIdForColor(accountColorInput.selectedColor), accountNameInput.input.asset.emoji)
+                popup.renameAccountRequested(accountNameInput.text, Utils.getIdForColor(Theme.palette, accountColorInput.selectedColor), accountNameInput.input.asset.emoji)
                 popup.close()
             }
         }
diff --git a/ui/app/AppLayouts/Profile/popups/RenameKeypairPopup.qml b/ui/app/AppLayouts/Profile/popups/RenameKeypairPopup.qml
index 9ff70f7c977..c7fa66b6e44 100644
--- a/ui/app/AppLayouts/Profile/popups/RenameKeypairPopup.qml
+++ b/ui/app/AppLayouts/Profile/popups/RenameKeypairPopup.qml
@@ -105,7 +105,7 @@ StatusModal {
                     Repeater {
                         model: root.accounts
                         delegate: StatusListItemTag {
-                            bgColor: Utils.getColorForId(model.account.colorId)
+                            bgColor: Utils.getColorForId(Theme.palette, model.account.colorId)
                             height: Theme.bigPadding
                             bgRadius: 6
                             tagClickable: false
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/stores/ProfileSectionStore.qml b/ui/app/AppLayouts/Profile/stores/ProfileSectionStore.qml
index aa3ba78a9db..188383ef386 100644
--- a/ui/app/AppLayouts/Profile/stores/ProfileSectionStore.qml
+++ b/ui/app/AppLayouts/Profile/stores/ProfileSectionStore.qml
@@ -1,5 +1,6 @@
 import QtQuick
 
+import StatusQ.Core.Theme
 import StatusQ.Core.Utils
 
 import AppLayouts.Chat.stores
@@ -13,6 +14,8 @@ QtObject {
     id: root
     property bool localBackupEnabled: false
 
+    required property ThemePalette palette
+
     readonly property QtObject _d: QtObject {
         id: d
 
@@ -59,5 +62,6 @@ QtObject {
     // TODO: Move to wallet related store
     property WalletStore walletStore: WalletStore {
         walletModule: d.profileSectionModuleInst.walletModule
+        palette: root.palette
     }
 }
diff --git a/ui/app/AppLayouts/Profile/stores/WalletStore.qml b/ui/app/AppLayouts/Profile/stores/WalletStore.qml
index a7919d1af05..27cebd7317d 100644
--- a/ui/app/AppLayouts/Profile/stores/WalletStore.qml
+++ b/ui/app/AppLayouts/Profile/stores/WalletStore.qml
@@ -4,6 +4,7 @@ import utils
 
 import StatusQ
 import StatusQ.Models
+import StatusQ.Core.Theme
 
 import QtModelsToolkit
 import SortFilterProxyModel
@@ -23,6 +24,8 @@ QtObject {
 
     property var selectedAccount
 
+    required property ThemePalette palette
+
     // TODO(alaibe): there should be no access to wallet section, create collectible in profile
     property var overview: walletSectionOverview
     property var accounts: Global.appIsReady? accountsModule.accounts : null
@@ -33,13 +36,13 @@ QtObject {
             FastExpressionRole {
                 name: "color"
 
-                function getColor(colorId) {
-                    return Utils.getColorForId(colorId)
+                function getColor(palette, colorId) {
+                    return Utils.getColorForId(palette, colorId)
                 }
 
                 // Direct call for singleton function is not handled properly by
                 // SortFilterProxyModel that's why helper function is used instead.
-                expression: { return getColor(model.colorId) }
+                expression: { return getColor(root.palette, model.colorId) }
                 expectedRoles: ["colorId"]
             }
         ]
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..70ba234088a 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)
@@ -39,7 +39,7 @@ SettingsContentBase {
 
             radius: Theme.radius
             border.color: Theme.palette.border
-            color: Theme.palette.transparent
+            color: StatusColors.transparent
 
             MessageView {
                 id: placeholderMessage
@@ -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/BrowserView.qml b/ui/app/AppLayouts/Profile/views/BrowserView.qml
index 149b7d7aad5..9e9c397aff7 100644
--- a/ui/app/AppLayouts/Profile/views/BrowserView.qml
+++ b/ui/app/AppLayouts/Profile/views/BrowserView.qml
@@ -62,7 +62,7 @@ SettingsContentBase {
                 id: showFavouritesItem
                 width: parent.width
                 leftPadding: 0
-                bgColor: Theme.palette.transparent
+                bgColor: StatusColors.transparent
                 title: qsTr("Show Favorites Bar")
                 components: [
                     StatusSwitch {
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..0f95b718318 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
         }
 
@@ -223,7 +223,7 @@ Item {
                 amISender: false
                 sender.displayName: root.ensUsernamesStore.preferredUsername
                 sender.profileImage.assetSettings.isImage: true
-                sender.profileImage.assetSettings.color: Utils.colorForPubkey(root.ensUsernamesStore.pubkey)
+                sender.profileImage.assetSettings.color: Utils.colorForPubkey(root.Theme.palette, root.ensUsernamesStore.pubkey)
                 sender.profileImage.name: root.ensUsernamesStore.icon
             }
         }
@@ -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..b29113535db 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,8 +211,8 @@ Item {
                     text: "@"
                     opacity: 0.7
                     font.weight: Font.Bold
-                    font.pixelSize: Theme.fontSize18
-                    color: Theme.palette.white
+                    font.pixelSize: Theme.fontSize(18)
+                    color: StatusColors.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/NotificationsView.qml b/ui/app/AppLayouts/Profile/views/NotificationsView.qml
index 57910dedd1c..faf511a08d2 100644
--- a/ui/app/AppLayouts/Profile/views/NotificationsView.qml
+++ b/ui/app/AppLayouts/Profile/views/NotificationsView.qml
@@ -118,7 +118,7 @@ SettingsContentBase {
                     name: model.image
                     isImage: !!model.image && model.image !== ""
                     color: model.type === Constants.settingsSection.exemptions.oneToOneChat?
-                               Utils.colorForPubkey(model.itemId) :
+                               Utils.colorForPubkey(root.Theme.palette, model.itemId) :
                                model.color
                     charactersLen: model.type === Constants.settingsSection.exemptions.oneToOneChat? 2 : 1
                     isLetterIdenticon: !model.image || model.image === ""
diff --git a/ui/app/AppLayouts/Profile/views/SettingsContentBase.qml b/ui/app/AppLayouts/Profile/views/SettingsContentBase.qml
index 8cae57f8e44..06a303477c9 100644
--- a/ui/app/AppLayouts/Profile/views/SettingsContentBase.qml
+++ b/ui/app/AppLayouts/Profile/views/SettingsContentBase.qml
@@ -57,7 +57,7 @@ FocusScope {
         readonly property int bottomDirtyToastMargin: 36
 
         // Read-only flag that turns true when the row component enters a “compact” layout automatically on resize.
-        readonly property bool compactRowMode: sectionTitleText.implicitWidth + titleFirstRowItem.implicitWidth + 2 * Theme.padding > root.contentWidth
+        readonly property bool compactRowMode: sectionTitleText.implicitWidth + titleFirstRowItem.implicitWidth + 2 * root.Theme.padding > root.contentWidth
     }
 
     Loader {
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/AccountOrderView.qml b/ui/app/AppLayouts/Profile/views/wallet/AccountOrderView.qml
index c09be9a4df3..78696dc21a9 100644
--- a/ui/app/AppLayouts/Profile/views/wallet/AccountOrderView.qml
+++ b/ui/app/AppLayouts/Profile/views/wallet/AccountOrderView.qml
@@ -86,14 +86,14 @@ ColumnLayout {
                 draggable: accountsList.count > 1
                 Drag.keys: [d.walletAccountDnDKey]
                 title: model.name
-                secondaryTitle: WalletUtils.addressToDisplay(model.address, true, containsMouse)
+                secondaryTitle: WalletUtils.addressToDisplay(Theme.palette, model.address, true, containsMouse)
                 secondaryTitleIcon: model.walletType === Constants.watchWalletType? "show" :
                                                                                     model.keycardAccount ? "keycard" : ""
                 hasEmoji: true
                 icon.width: 40
                 icon.height: 40
                 icon.name: model.emoji
-                icon.color: Utils.getColorForId(model.colorId)
+                icon.color: Utils.getColorForId(Theme.palette, model.colorId)
 
                 onDragFinished: {
                     let from = d.indexMoveFrom
diff --git a/ui/app/AppLayouts/Profile/views/wallet/AccountView.qml b/ui/app/AppLayouts/Profile/views/wallet/AccountView.qml
index c649f1ffacf..b5d12f54d9b 100644
--- a/ui/app/AppLayouts/Profile/views/wallet/AccountView.qml
+++ b/ui/app/AppLayouts/Profile/views/wallet/AccountView.qml
@@ -62,8 +62,8 @@ ColumnLayout {
                 Layout.alignment: Qt.AlignLeft
                 text: !!root.account? root.account.name : ""
                 font.weight: Font.Bold
-                font.pixelSize: Theme.fontSize28
-                color: !!root.account? Utils.getColorForId(root.account.colorId) : Theme.palette.directColor1
+                font.pixelSize: Theme.fontSize(28)
+                color: !!root.account? Utils.getColorForId(Theme.palette, root.account.colorId) : Theme.palette.directColor1
             }
             StatusEmoji {
                 id: accountImage
@@ -114,7 +114,7 @@ ColumnLayout {
         radius: Theme.radius
         border.width: 1
         border.color: Theme.palette.directColor8
-        color: Theme.palette.transparent
+        color: StatusColors.transparent
 
         ColumnLayout {
             width: parent.width
@@ -216,7 +216,7 @@ ColumnLayout {
                 title: qsTr("Stored")
                 subTitle: Utils.getKeypairLocation(root.keyPair, true)
                 visible: !!subTitle
-                statusListItemSubTitle.color: Utils.getKeypairLocationColor(root.keyPair)
+                statusListItemSubTitle.color: Utils.getKeypairLocationColor(Theme.palette, root.keyPair)
             }
         }
     }
@@ -234,7 +234,7 @@ ColumnLayout {
         title: qsTr("Include in total balances and activity")
         objectName: "includeTotalBalanceListItem"
         visible: d.watchOnlyAccount
-        color: Theme.palette.transparent
+        color: StatusColors.transparent
         components: [
             StatusSwitch {
                 checked: !!root.account && !account.hideFromTotalBalance
@@ -277,7 +277,7 @@ ColumnLayout {
             accountAddress: !!root.account ? root.account.address : ""
             accountDerivationPath: !!root.account ? root.account.path : ""
             emoji: !!root.account ? root.account.emoji : ""
-            color: !!root.account ? Utils.getColorForId(root.account.colorId) : ""
+            color: !!root.account ? Utils.getColorForId(Theme.palette, root.account.colorId) : ""
 
             function doDeletion(password) {
                 root.walletStore.deleteAccount(root.account.address, password)
diff --git a/ui/app/AppLayouts/Profile/views/wallet/MainView.qml b/ui/app/AppLayouts/Profile/views/wallet/MainView.qml
index fdde296c176..107624c98fb 100644
--- a/ui/app/AppLayouts/Profile/views/wallet/MainView.qml
+++ b/ui/app/AppLayouts/Profile/views/wallet/MainView.qml
@@ -193,7 +193,7 @@ Column {
     //              !d.allNonProfileKeypairsMigratedToAKeycard
     //     height: 102
     //     width: parent.width
-    //     color: Theme.palette.transparent
+    //     color: StatusColors.transparent
     //     radius: 8
     //     border.width: 1
     //     border.color: Theme.palette.baseColor5
@@ -223,7 +223,7 @@ Column {
                  d.unimportedNonProfileKeypairs > 0
         height: 102
         width: parent.width
-        color: Theme.palette.transparent
+        color: StatusColors.transparent
         radius: 8
         border.width: 1
         border.color: Theme.palette.baseColor5
diff --git a/ui/app/AppLayouts/Wallet/WalletUtils.qml b/ui/app/AppLayouts/Wallet/WalletUtils.qml
index 4e49abbee8d..a8c5ad39204 100644
--- a/ui/app/AppLayouts/Wallet/WalletUtils.qml
+++ b/ui/app/AppLayouts/Wallet/WalletUtils.qml
@@ -26,12 +26,12 @@ QtObject {
         return timestamp + Constants.time.secondsIn7Days
     }
 
-    function addressToDisplay(address, shortForm, hovered) {
+    function addressToDisplay(palette, address, shortForm, hovered) {
         let finalAddress = address
         if (shortForm) {
             finalAddress = StatusQUtils.Utils.elideText(address,6,4)
         }
-        return hovered ? Utils.richColorText(finalAddress, Theme.palette.directColor1) : finalAddress
+        return hovered ? Utils.richColorText(finalAddress, palette.directColor1) : finalAddress
     }
 
     /**
@@ -345,23 +345,23 @@ 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")
         }
     }
 
-    function getChangePct24HourColor(changePct24hour) {
+    function getChangePct24HourColor(palette, changePct24hour) {
         if (changePct24hour === 0)
-            return Theme.palette.baseColor1
+            return palette.baseColor1
         return changePct24hour < 0
-                ? Theme.palette.dangerColor1
-                : Theme.palette.successColor1
+                ? palette.dangerColor1
+                : palette.successColor1
     }
 
     function getUpDownTriangle(changePct24hour) {
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/adaptors/SignSendAdaptor.qml b/ui/app/AppLayouts/Wallet/adaptors/SignSendAdaptor.qml
index 8f087873d12..4f26e94fd73 100644
--- a/ui/app/AppLayouts/Wallet/adaptors/SignSendAdaptor.qml
+++ b/ui/app/AppLayouts/Wallet/adaptors/SignSendAdaptor.qml
@@ -1,5 +1,6 @@
 import QtQuick
 
+import StatusQ.Core.Theme
 import StatusQ.Core.Utils
 
 import QtModelsToolkit
@@ -11,6 +12,8 @@ import QtModelsToolkit
 QObject {
     id: root
 
+    /** Palette necessary to convert colorId to actual color **/
+    required property ThemePalette palette
     /** Account key used for filtering **/
     required property string accountKey
     /** network chainId used for filtering **/
@@ -100,7 +103,7 @@ QObject {
         }
         const colorId = selectedRecipientEntry.item.colorId
         if (!!colorId) {
-            return Utils.getColorForId(colorId)
+            return Utils.getColorForId(root.palette, colorId)
         }
         return ""
     }
diff --git a/ui/app/AppLayouts/Wallet/controls/AccountHeaderGradient.qml b/ui/app/AppLayouts/Wallet/controls/AccountHeaderGradient.qml
index 04220a14993..bd2d58ed460 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(root.Theme.palette, 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(root.Theme.palette, word), 0.1)}))
                             startPosition += gap
                         }
                         gradient.stops = stops
diff --git a/ui/app/AppLayouts/Wallet/controls/ActivityFilterTagItem.qml b/ui/app/AppLayouts/Wallet/controls/ActivityFilterTagItem.qml
index 38b1dbc57f7..c6968be1267 100644
--- a/ui/app/AppLayouts/Wallet/controls/ActivityFilterTagItem.qml
+++ b/ui/app/AppLayouts/Wallet/controls/ActivityFilterTagItem.qml
@@ -19,7 +19,7 @@ InformationTag {
     customBackground: Component {
         Rectangle {
             radius: 36
-            color: Theme.palette.transparent
+            color: StatusColors.transparent
             border.width: 1
             border.color: Theme.palette.baseColor2
         }
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/CollectibleLinksTags.qml b/ui/app/AppLayouts/Wallet/controls/CollectibleLinksTags.qml
index d7383ea0b4d..6a536260625 100644
--- a/ui/app/AppLayouts/Wallet/controls/CollectibleLinksTags.qml
+++ b/ui/app/AppLayouts/Wallet/controls/CollectibleLinksTags.qml
@@ -19,7 +19,7 @@ Control {
         width: 16
         height: 16
         name: ""
-        color:  Theme.palette.transparent
+        color:  StatusColors.transparent
         isLetterIdenticon: false
         letterSize: charactersLen > 1 ? 8 : 11
         imgIsIdenticon: false
@@ -38,7 +38,7 @@ Control {
         radius: Theme.radius
         border.width: 1
         border.color: Theme.palette.baseColor2
-        color: mouse.containsMouse ? Theme.palette.baseColor2 : Theme.palette.transparent
+        color: mouse.containsMouse ? Theme.palette.baseColor2 : StatusColors.transparent
         StatusMouseArea {
             id: mouse
             anchors.fill: parent
@@ -88,7 +88,7 @@ Control {
             visible: root.hovered
             asset.name: "external"
             asset.color: Theme.palette.directColor1
-            asset.bgColor: Theme.palette.transparent
+            asset.bgColor: StatusColors.transparent
         }
     }
 }
diff --git a/ui/app/AppLayouts/Wallet/controls/CollectiblesHeader.qml b/ui/app/AppLayouts/Wallet/controls/CollectiblesHeader.qml
index c1fe22fe9a4..29ec6015fb7 100644
--- a/ui/app/AppLayouts/Wallet/controls/CollectiblesHeader.qml
+++ b/ui/app/AppLayouts/Wallet/controls/CollectiblesHeader.qml
@@ -19,7 +19,7 @@ Rectangle {
     id: collectibleHeader
     height: 64
     width: parent.width
-    color: hovered ? Theme.palette.backgroundHover : Theme.palette.transparent
+    color: hovered ? Theme.palette.backgroundHover : StatusColors.transparent
     border.width: 0
     radius: Theme.radius
 
@@ -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
@@ -96,7 +96,7 @@ Rectangle {
             ColorOverlay {
                 anchors.fill: caretImg
                 source: caretImg
-                color: Theme.palette.black
+                color: StatusColors.black
             }
         }
     }
diff --git a/ui/app/AppLayouts/Wallet/controls/DappsComboBox.qml b/ui/app/AppLayouts/Wallet/controls/DappsComboBox.qml
index 2f96d4715b5..b6171142226 100644
--- a/ui/app/AppLayouts/Wallet/controls/DappsComboBox.qml
+++ b/ui/app/AppLayouts/Wallet/controls/DappsComboBox.qml
@@ -38,7 +38,7 @@ ComboBox {
                 return Theme.palette.baseColor2
 
             if (!root.hovered)
-                return Theme.palette.transparent
+                return StatusColors.transparent
 
             return root.incognitoMode
                     ? Theme.palette.privacyColors.secondary
diff --git a/ui/app/AppLayouts/Wallet/controls/FilterComboBox.qml b/ui/app/AppLayouts/Wallet/controls/FilterComboBox.qml
index f3e1b25b46a..cbaf0e61a50 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 {
@@ -318,7 +318,7 @@ ComboBox {
                 height: 8
                 anchors.centerIn: parent
                 anchors.horizontalCenterOffset: 1
-                color: d.allVisuallyChecked ? Theme.palette.baseColor1 : Theme.palette.white
+                color: d.allVisuallyChecked ? Theme.palette.baseColor1 : StatusColors.white
                 visible: menuDelegate.down || menuDelegate.checkState !== Qt.Unchecked || d.allVisuallyChecked
             }
         }
diff --git a/ui/app/AppLayouts/Wallet/controls/InformationTileAssetDetails.qml b/ui/app/AppLayouts/Wallet/controls/InformationTileAssetDetails.qml
index c8212f6a693..f55c157466d 100644
--- a/ui/app/AppLayouts/Wallet/controls/InformationTileAssetDetails.qml
+++ b/ui/app/AppLayouts/Wallet/controls/InformationTileAssetDetails.qml
@@ -20,7 +20,7 @@ Control {
         radius: Theme.radius
         border.width: 1
         border.color: Theme.palette.baseColor2
-        color: Theme.palette.transparent
+        color: StatusColors.transparent
     }
 
     contentItem: ColumnLayout {
diff --git a/ui/app/AppLayouts/Wallet/controls/ManageTokensCommunityTag.qml b/ui/app/AppLayouts/Wallet/controls/ManageTokensCommunityTag.qml
index d4cc5fcdd6f..c52490bcfc9 100644
--- a/ui/app/AppLayouts/Wallet/controls/ManageTokensCommunityTag.qml
+++ b/ui/app/AppLayouts/Wallet/controls/ManageTokensCommunityTag.qml
@@ -113,7 +113,7 @@ Control {
                 icon.height: Theme.tertiaryTextFontSize
                 icon.width: Theme.tertiaryTextFontSize
                 icon.color: Theme.palette.directColor1
-                color: Theme.palette.transparent
+                color: StatusColors.transparent
                 textToCopy: root.communityName
                 onCopyClicked: (textToCopy) => ClipboardUtils.setText(textToCopy)
             }           
diff --git a/ui/app/AppLayouts/Wallet/controls/ManageTokensGroupDelegate.qml b/ui/app/AppLayouts/Wallet/controls/ManageTokensGroupDelegate.qml
index b2235348746..0bbe126bccf 100644
--- a/ui/app/AppLayouts/Wallet/controls/ManageTokensGroupDelegate.qml
+++ b/ui/app/AppLayouts/Wallet/controls/ManageTokensGroupDelegate.qml
@@ -145,7 +145,7 @@ DropArea {
                     icon.height: Theme.primaryTextFontSize
                     icon.width: Theme.primaryTextFontSize
                     icon.color: Theme.palette.directColor1
-                    color: Theme.palette.transparent
+                    color: StatusColors.transparent
                     textToCopy: model.communityName
                     onCopyClicked: ClipboardUtils.setText(textToCopy)
                 }
diff --git a/ui/app/AppLayouts/Wallet/controls/NetworkFilter.qml b/ui/app/AppLayouts/Wallet/controls/NetworkFilter.qml
index e04c55c6a3b..890f664d26d 100644
--- a/ui/app/AppLayouts/Wallet/controls/NetworkFilter.qml
+++ b/ui/app/AppLayouts/Wallet/controls/NetworkFilter.qml
@@ -71,8 +71,8 @@ StatusComboBox {
                 asset.bgColor: Theme.palette.background
                 asset.bgHeight: 15
                 asset.isImage: true
-                asset.name: Theme.png("status-gradient-dot")
-                asset.color: Theme.palette.transparent
+                asset.name: Assets.png("status-gradient-dot")
+                asset.color: StatusColors.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..33a22fcb0f0 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
@@ -64,7 +64,7 @@ StatusListItem {
         if (!!root.walletColor)
             return root.walletColor
         if (!!root.walletColorId)
-            return Utils.getColorForId(root.walletColorId)
+            return Utils.getColorForId(Theme.palette, root.walletColorId)
         return ""
     }
     asset.name: !!root.emoji ? "filled-account" : title
diff --git a/ui/app/AppLayouts/Wallet/controls/RouterErrorTag.qml b/ui/app/AppLayouts/Wallet/controls/RouterErrorTag.qml
index ddce92fe200..a3dbf8adf34 100644
--- a/ui/app/AppLayouts/Wallet/controls/RouterErrorTag.qml
+++ b/ui/app/AppLayouts/Wallet/controls/RouterErrorTag.qml
@@ -79,8 +79,8 @@ Control {
 
                 checkable: true
                 size: StatusBaseButton.Size.Small
-                normalColor: Theme.palette.transparent
-                hoverColor: Theme.palette.transparent
+                normalColor: StatusColors.transparent
+                hoverColor: StatusColors.transparent
                 textColor: Theme.palette.dangerColor1
                 textHoverColor: Theme.palette.hoverColor(textColor)
                 font.pixelSize: Theme.tertiaryTextFontSize
diff --git a/ui/app/AppLayouts/Wallet/controls/SavedAddressesDelegate.qml b/ui/app/AppLayouts/Wallet/controls/SavedAddressesDelegate.qml
index 8946e65c7f3..08640ce557d 100644
--- a/ui/app/AppLayouts/Wallet/controls/SavedAddressesDelegate.qml
+++ b/ui/app/AppLayouts/Wallet/controls/SavedAddressesDelegate.qml
@@ -56,7 +56,7 @@ StatusListItem {
         if (ens.length > 0)
             return ens
         else {
-            return WalletUtils.addressToDisplay(root.address, false, sensor.containsMouse)
+            return WalletUtils.addressToDisplay(Theme.palette, root.address, false, sensor.containsMouse)
         }
     }
 
@@ -66,7 +66,7 @@ StatusListItem {
         width: 40
         height: 40
         name: root.avatar || ""  // Use avatar URL if available
-        color: Utils.getColorForId(root.colorId)
+        color: Utils.getColorForId(Theme.palette, root.colorId)
         isLetterIdenticon: !root.avatar  // Only use letter identicon if no avatar
         letterIdenticonBgWithAlpha: true
     }
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/StatusDateRangePicker.qml b/ui/app/AppLayouts/Wallet/controls/StatusDateRangePicker.qml
index 0033049af6b..b96491d37ac 100644
--- a/ui/app/AppLayouts/Wallet/controls/StatusDateRangePicker.qml
+++ b/ui/app/AppLayouts/Wallet/controls/StatusDateRangePicker.qml
@@ -54,7 +54,7 @@ StatusDialog {
                 StatusFlatButton {
                     horizontalPadding: 0
                     verticalPadding: 0
-                    hoverColor: Theme.palette.transparent
+                    hoverColor: StatusColors.transparent
                     text: qsTr("Now")
                     enabled: !toInput.isTodaySelected
                     onClicked: toInput.selectedDate = new Date()
@@ -96,7 +96,7 @@ StatusDialog {
                 Layout.preferredHeight: toInput.control.height
                 text: qsTr("Reset")
                 enabled: fromInput.hasChange || toInput.hasChange
-                normalColor: Theme.palette.transparent
+                normalColor: StatusColors.transparent
                 borderColor: Theme.palette.baseColor2
                 onClicked: {
                     fromInput.selectedDate = new Date(root.fromTimestamp)
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/controls/TokenSelectorCompactButton.qml b/ui/app/AppLayouts/Wallet/controls/TokenSelectorCompactButton.qml
index dd36eab84fb..86a69923c33 100644
--- a/ui/app/AppLayouts/Wallet/controls/TokenSelectorCompactButton.qml
+++ b/ui/app/AppLayouts/Wallet/controls/TokenSelectorCompactButton.qml
@@ -26,7 +26,7 @@ Control {
 
     background: StatusComboboxBackground {
         border.width: 1
-        color: Theme.palette.transparent
+        color: StatusColors.transparent
     }
 
     contentItem: Loader {
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/SelectParamsForBuyCryptoPanel.qml b/ui/app/AppLayouts/Wallet/panels/SelectParamsForBuyCryptoPanel.qml
index f56211db4c4..a8d16a015ce 100644
--- a/ui/app/AppLayouts/Wallet/panels/SelectParamsForBuyCryptoPanel.qml
+++ b/ui/app/AppLayouts/Wallet/panels/SelectParamsForBuyCryptoPanel.qml
@@ -42,7 +42,7 @@ ColumnLayout {
         statusListItemTitle.color: Theme.palette.directColor1
         asset.name: !!root.selectedProvider ? root.selectedProvider.logoUrl: ""
         asset.isImage: true
-        color: Theme.palette.transparent
+        color: StatusColors.transparent
         enabled: false
     }
 
diff --git a/ui/app/AppLayouts/Wallet/panels/StickySendModalHeader.qml b/ui/app/AppLayouts/Wallet/panels/StickySendModalHeader.qml
index b5e964f2236..ee7a0475ba1 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) : StatusColors.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/SwapInputPanel.qml b/ui/app/AppLayouts/Wallet/panels/SwapInputPanel.qml
index 757dee72aeb..143cbe8a194 100644
--- a/ui/app/AppLayouts/Wallet/panels/SwapInputPanel.qml
+++ b/ui/app/AppLayouts/Wallet/panels/SwapInputPanel.qml
@@ -177,7 +177,7 @@ Control {
     background: Shape {
         id: shape
 
-        property int radius: Theme.radius
+        property int radius: root.Theme.radius
         property int leftTopRadius: radius
         property int rightTopRadius: radius
         property int leftBottomRadius: radius
@@ -189,8 +189,8 @@ Control {
 
         ShapePath {
             id: path
-            fillColor: Theme.palette.indirectColor3
-            strokeColor: amountToSendInput.cursorVisible ? Theme.palette.directColor7 : Theme.palette.directColor8
+            fillColor: root.Theme.palette.indirectColor3
+            strokeColor: amountToSendInput.cursorVisible ? root.Theme.palette.directColor7 : root.Theme.palette.directColor8
             strokeWidth: 1
             capStyle: ShapePath.RoundCap
 
diff --git a/ui/app/AppLayouts/Wallet/panels/WalletAccountHeader.qml b/ui/app/AppLayouts/Wallet/panels/WalletAccountHeader.qml
index 0461a51d63c..a31681787c0 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
@@ -168,7 +168,7 @@ Control {
             borderColor: Theme.palette.directColor7
             borderWidth: 1
 
-            normalColor: Theme.palette.transparent
+            normalColor: StatusColors.transparent
             hoverColor: Theme.palette.baseColor2
 
             icon.name: "refresh"
@@ -241,7 +241,7 @@ Control {
             spacing: 8
             size: StatusBaseButton.Size.Small
             borderColor: Theme.palette.directColor7
-            normalColor: Theme.palette.transparent
+            normalColor: StatusColors.transparent
             hoverColor: Theme.palette.baseColor2
 
             font.weight: Font.Normal
diff --git a/ui/app/AppLayouts/Wallet/panels/WalletFollowingAddressesHeader.qml b/ui/app/AppLayouts/Wallet/panels/WalletFollowingAddressesHeader.qml
index 2c1f6c28b4c..ad5affbcd10 100644
--- a/ui/app/AppLayouts/Wallet/panels/WalletFollowingAddressesHeader.qml
+++ b/ui/app/AppLayouts/Wallet/panels/WalletFollowingAddressesHeader.qml
@@ -68,7 +68,7 @@ Control {
 
             elide: Text.ElideRight
 
-            font.pixelSize: Theme.fontSize19
+            font.pixelSize: Theme.fontSize(19)
             font.weight: Font.Medium
 
             text: qsTr("EFP onchain friends")
diff --git a/ui/app/AppLayouts/Wallet/panels/WalletSavedAddressesHeader.qml b/ui/app/AppLayouts/Wallet/panels/WalletSavedAddressesHeader.qml
index f39e0a269dc..2d049b9a302 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")
@@ -91,7 +91,7 @@ Control {
             borderColor: Theme.palette.directColor7
             borderWidth: 1
 
-            normalColor: Theme.palette.transparent
+            normalColor: StatusColors.transparent
             hoverColor: Theme.palette.baseColor2
 
             icon.name: "refresh"
diff --git a/ui/app/AppLayouts/Wallet/popups/AddEditSavedAddressPopup.qml b/ui/app/AppLayouts/Wallet/popups/AddEditSavedAddressPopup.qml
index 18c9f62885a..a3c88029173 100644
--- a/ui/app/AppLayouts/Wallet/popups/AddEditSavedAddressPopup.qml
+++ b/ui/app/AppLayouts/Wallet/popups/AddEditSavedAddressPopup.qml
@@ -44,7 +44,7 @@ StatusDialog {
             colorSelection.selectedColorIndex = Math.floor(Math.random() * colorSelection.model.length)
         }
         else {
-            let ind = Utils.getColorIndexForId(d.colorId)
+            let ind = Utils.getColorIndexForId(Theme.palette, d.colorId)
             colorSelection.selectedColorIndex = ind
         }
 
@@ -123,7 +123,7 @@ StatusDialog {
                                     title: account.name,
                                     icon: "",
                                     emoji: account.emoji,
-                                    color: Utils.getColorForId(account.colorId).toString().toUpperCase()
+                                    color: Utils.getColorForId(root.Theme.palette, account.colorId).toString().toUpperCase()
                                 })
         }
 
@@ -140,7 +140,7 @@ StatusDialog {
                                     title: savedAddress.name,
                                     icon: "",
                                     emoji: "",
-                                    color: Utils.getColorForId(savedAddress.colorId).toString().toUpperCase()
+                                    color: Utils.getColorForId(root.Theme.palette, savedAddress.colorId).toString().toUpperCase()
                                 })
         }
 
@@ -197,7 +197,7 @@ StatusDialog {
 
         function checkForAddressInputErrorsWarnings() {
             addressInput.errorMessageCmp.visible = false
-            addressInput.errorMessageCmp.color = Theme.palette.dangerColor1
+            addressInput.errorMessageCmp.color = root.Theme.palette.dangerColor1
             addressInput.errorMessageCmp.text = ""
 
             d.minAddressLengthRequestError = false
@@ -273,7 +273,7 @@ StatusDialog {
                 let accountsJson = JSON.parse(accounts)
                 d.contactsWithSameAddress = accountsJson.length
                 addressInput.errorMessageCmp.visible = d.contactsWithSameAddress > 0
-                addressInput.errorMessageCmp.color = Theme.palette.warningColor1
+                addressInput.errorMessageCmp.color = root.Theme.palette.warningColor1
                 addressInput.errorMessageCmp.text = ""
                 if (d.contactsWithSameAddress === 1)
                     addressInput.errorMessageCmp.text = qsTr("This address belongs to a contact")
@@ -288,7 +288,7 @@ StatusDialog {
                                             title: ProfileUtils.displayName(contact.localNickname, contact.name, contact.displayName, contact.alias),
                                             icon: contact.icon,
                                             emoji: "",
-                                            color: Utils.colorForColorId(contact.colorId),
+                                            color: Utils.colorForColorId(root.Theme.palette, contact.colorId),
                                             onlineStatus: contact.onlineStatus
                                         })
 
@@ -528,7 +528,7 @@ StatusDialog {
                 selectedColorIndex: -1
 
                 onSelectedColorChanged: {
-                    d.colorId = Utils.getIdForColor(selectedColor)
+                    d.colorId = Utils.getIdForColor(Theme.palette, selectedColor)
                 }
             }
         }
diff --git a/ui/app/AppLayouts/Wallet/popups/ReceiveModal.qml b/ui/app/AppLayouts/Wallet/popups/ReceiveModal.qml
index 6d1b9963df5..f1226fd604a 100644
--- a/ui/app/AppLayouts/Wallet/popups/ReceiveModal.qml
+++ b/ui/app/AppLayouts/Wallet/popups/ReceiveModal.qml
@@ -208,7 +208,7 @@ StatusModal {
                         width: 72
                         height: 72
                         name: !root.selectedAccount.name && !root.selectedAccount.emoji? "status-logo-icon" : ""
-                        color: !root.selectedAccount.name && !root.selectedAccount.emoji? "transparent" : Utils.getColorForId(root.selectedAccount.colorId)
+                        color: !root.selectedAccount.name && !root.selectedAccount.emoji? "transparent" : Utils.getColorForId(root.Theme.palette, root.selectedAccount.colorId)
                         emoji: root.selectedAccount.emoji
                         charactersLen: 1
                         isLetterIdenticon: root.selectedAccount.name && !root.selectedAccount.emoji
diff --git a/ui/app/AppLayouts/Wallet/popups/RemoveSavedAddressPopup.qml b/ui/app/AppLayouts/Wallet/popups/RemoveSavedAddressPopup.qml
index d1158da014b..aaa2b182d4f 100644
--- a/ui/app/AppLayouts/Wallet/popups/RemoveSavedAddressPopup.qml
+++ b/ui/app/AppLayouts/Wallet/popups/RemoveSavedAddressPopup.qml
@@ -52,7 +52,7 @@ StatusDialog {
         leftComponent: StatusSmartIdenticon {
             name: root.name
             asset {
-                color: Utils.getColorForId(root.colorId)
+                color: Utils.getColorForId(root.Theme.palette, root.colorId)
                 isLetterIdenticon: true
                 letterIdenticonBgWithAlpha: true
             }
diff --git a/ui/app/AppLayouts/Wallet/popups/SavedAddressActivityPopup.qml b/ui/app/AppLayouts/Wallet/popups/SavedAddressActivityPopup.qml
index f9277b0c18d..b91c531b13a 100644
--- a/ui/app/AppLayouts/Wallet/popups/SavedAddressActivityPopup.qml
+++ b/ui/app/AppLayouts/Wallet/popups/SavedAddressActivityPopup.qml
@@ -101,7 +101,7 @@ StatusDialog {
 
             leftPadding: 0
             rightPadding: 0
-            border.color: Theme.palette.transparent
+            border.color: StatusColors.transparent
 
             usage: SavedAddressesDelegate.Usage.Item
             showButtons: true
@@ -142,7 +142,7 @@ StatusDialog {
             avatar: d.avatar
             isFollowingAddress: d.isFollowingAddress
 
-            statusListItemTitle.font.pixelSize: Theme.fontSize22
+            statusListItemTitle.font.pixelSize: Theme.fontSize(22)
             statusListItemTitle.font.bold: Font.Bold
 
             onAboutToOpenPopup: {
@@ -171,7 +171,7 @@ StatusDialog {
                 Layout.fillWidth: true
                 Layout.preferredHeight: Math.max(addressText.height, copyButton.height) + Theme.bigPadding
 
-                color: Theme.palette.transparent
+                color: StatusColors.transparent
                 radius: Theme.radius
                 border.color: Theme.palette.baseColor2
                 border.width: 1
diff --git a/ui/app/AppLayouts/Wallet/popups/dapps/DAppsWorkflow.qml b/ui/app/AppLayouts/Wallet/popups/dapps/DAppsWorkflow.qml
index 68bd4343676..192b87bac78 100644
--- a/ui/app/AppLayouts/Wallet/popups/dapps/DAppsWorkflow.qml
+++ b/ui/app/AppLayouts/Wallet/popups/dapps/DAppsWorkflow.qml
@@ -362,13 +362,13 @@ SQUtils.QObject {
             dappIcon: request.dappIcon
             dappName: request.dappName
 
-            accountColor: Utils.getColorForId(account.colorId)
+            accountColor: Utils.getColorForId(Theme.palette, account.colorId)
             accountName: account.name
             accountAddress: account.address
             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..b8d4fd49b7e 100644
--- a/ui/app/AppLayouts/Wallet/popups/swap/SwapModal.qml
+++ b/ui/app/AppLayouts/Wallet/popups/swap/SwapModal.qml
@@ -447,7 +447,7 @@ StatusDialog {
                         icon.name: "edit_pencil"
                         textColor: editSlippageButton.hovered ? Theme.palette.directColor1 : Theme.palette.directColor5
                         size: StatusBaseButton.Size.Tiny
-                        hoverColor: Theme.palette.transparent
+                        hoverColor: StatusColors.transparent
                         visible: !checked
                     }
                 }
@@ -574,12 +574,12 @@ StatusDialog {
             accountName: d.selectedAccount.name
             accountAddress: d.selectedAccount.address
             accountEmoji: d.selectedAccount.emoji
-            accountColor: Utils.getColorForId(d.selectedAccount.colorId)
+            accountColor: Utils.getColorForId(Theme.palette, d.selectedAccount.colorId)
             accountBalanceFormatted: d.selectedAccount.accountBalance.formattedBalance
 
             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
 
@@ -635,11 +635,11 @@ StatusDialog {
             accountName: d.selectedAccount.name
             accountAddress: d.selectedAccount.address
             accountEmoji: d.selectedAccount.emoji
-            accountColor: Utils.getColorForId(d.selectedAccount.colorId)
+            accountColor: Utils.getColorForId(Theme.palette, d.selectedAccount.colorId)
 
             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 354bf12dc29..7dcd05bb030 100644
--- a/ui/app/AppLayouts/Wallet/stores/RootStore.qml
+++ b/ui/app/AppLayouts/Wallet/stores/RootStore.qml
@@ -15,6 +15,8 @@ import StatusQ.Core.Utils as SQUtils
 QtObject {
     id: root
 
+    property ThemePalette palette
+
     property bool showSavedAddresses: false
     property bool showFollowingAddresses: false
     property string selectedAddress: ""
@@ -87,13 +89,15 @@ QtObject {
             FastExpressionRole {
                 name: "color"
 
-                function getColor(colorId) {
-                    return Utils.getColorForId(colorId)
+                function getColor(palette, colorId) {
+                    if (!palette)
+                        return "white"
+                    return Utils.getColorForId(palette, colorId)
                 }
 
                 // Direct call for singleton function is not handled properly by
                 // SortFilterProxyModel that's why helper function is used instead.
-                expression: { return getColor(model.colorId) }
+                expression: { return getColor(root.palette, model.colorId) }
                 expectedRoles: ["colorId"]
             }
         ]
@@ -488,7 +492,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,
@@ -496,7 +500,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 a24879338e5..57b531a2978 100644
--- a/ui/app/AppLayouts/Wallet/views/LeftTabView.qml
+++ b/ui/app/AppLayouts/Wallet/views/LeftTabView.qml
@@ -138,7 +138,7 @@ Rectangle {
             accountAddress: removeAccountConfirmation.accountAddress
             accountDerivationPath: removeAccountConfirmation.accountDerivationPath
             emoji: removeAccountConfirmation.emoji
-            color: Utils.getColorForId(removeAccountConfirmation.colorId)
+            color: Utils.getColorForId(Theme.palette, removeAccountConfirmation.colorId)
 
             function doDeletion(password) {
                 close()
@@ -293,7 +293,7 @@ Rectangle {
                     title: model.name
                     subTitle: !model.hideFromTotalBalance ? LocaleUtils.currencyAmountToLocaleString(model.currencyBalance): ""
                     asset.emoji: !!model.emoji ? model.emoji: ""
-                    asset.color: Utils.getColorForId(model.colorId)
+                    asset.color: Utils.getColorForId(Theme.palette, model.colorId)
                     asset.name: !model.emoji ? "filled-account": ""
                     asset.width: 40
                     asset.height: 40
@@ -372,7 +372,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/RightTabView.qml b/ui/app/AppLayouts/Wallet/views/RightTabView.qml
index 2c81f495054..08ad945ec4c 100644
--- a/ui/app/AppLayouts/Wallet/views/RightTabView.qml
+++ b/ui/app/AppLayouts/Wallet/views/RightTabView.qml
@@ -89,7 +89,7 @@ RightTabBaseView {
         emojiId: SQUtils.Emoji.iconId(overview.emoji ?? "")
         balance: LocaleUtils.currencyAmountToLocaleString(overview.currencyBalance)
         balanceLoading: overview.balanceLoading
-        color: Utils.getColorForId(overview.colorId)
+        color: Utils.getColorForId(Theme.palette, overview.colorId)
         name: overview.name
         balanceAvailable: !root.networkConnectionStore.accountBalanceNotAvailable
         networksModel: root.networksStore.activeNetworks
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 70499e58a00..47f79a31689 100644
--- a/ui/app/AppLayouts/stores/RootStore.qml
+++ b/ui/app/AppLayouts/stores/RootStore.qml
@@ -15,6 +15,7 @@ QtObject {
     id: root
 
     required property Keychain keychain
+    required property ThemePalette palette
 
     // Global properties that have to remain on `RootStore` (the module instances must be private properties and just used to initialize the
     // rest and specific stores
@@ -58,6 +59,7 @@ QtObject {
     readonly property MessagingStores.MessagingRootStore messagingRootStore: MessagingStores.MessagingRootStore {}
     readonly property ProfileStores.ProfileSectionStore profileSectionStore: ProfileStores.ProfileSectionStore {
         localBackupEnabled: root.localBackupEnabled
+        palette: root.palette
     }
 
     readonly property AccountSettingsStore accountSettingsStore: AccountSettingsStore {}
@@ -322,7 +324,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 fabc051d0f4..0ead6e994d5 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
@@ -70,6 +71,7 @@ Item {
                                    appMain.privacyStore.thirdpartyServicesEnabled: true
         onOpenUrl: (link) => Global.requestOpenLink(link)
         keychain: appMain.keychain
+        palette: appMain.Theme.palette
     }
 
     // Global cross-domain stores (just references from `rootStore`)
@@ -868,31 +870,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.setTheme(appMain.Window.window, appMainLocalSettings.theme)
+            ThemeUtils.setFontSize(appMain.Window.window, appMainLocalSettings.fontSize)
+            ThemeUtils.setPaddingFactor(appMain.Window.window, appMainLocalSettings.paddingFactor)
         }
     }
 
@@ -1802,6 +1797,9 @@ Item {
                             searchPhrase: homePage.searchPhrase
 
                             profileId: appMain.profileStore.pubKey
+
+                            // no automatic propagation to QtObject, needs to be specified explicitely
+                            Theme.style: appMain.Theme.style
                         }
 
                         homePageEntriesModel: homePageAdaptor.homePageEntriesModel
@@ -2169,15 +2167,15 @@ Item {
 
                         onThemeChangeRequested: function(theme) {
                             appMainLocalSettings.theme = theme
-                            Theme.changeTheme(theme)
+                            ThemeUtils.setTheme(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)
@@ -2411,7 +2409,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
@@ -3016,4 +3014,10 @@ Item {
                 WalletStores.RootStore.addressWasShown(text)
         }
     }
+
+    Binding {
+        target: WalletStores.RootStore
+        property: "palette"
+        value: appMain.Theme.palette
+    }
 }
diff --git a/ui/app/mainui/Handlers/HandlersManager.qml b/ui/app/mainui/Handlers/HandlersManager.qml
index f949031f856..9ac65baaaeb 100644
--- a/ui/app/mainui/Handlers/HandlersManager.qml
+++ b/ui/app/mainui/Handlers/HandlersManager.qml
@@ -22,7 +22,7 @@ import utils
 QtObject {
     id: root
 
-    required property var popupParent
+    required property Item popupParent
 
     // Stores definition:
     required property AppStores.RootStore rootStore
diff --git a/ui/app/mainui/Handlers/SendModalHandler.qml b/ui/app/mainui/Handlers/SendModalHandler.qml
index 11e1580330d..0e36c2d2d6e 100644
--- a/ui/app/mainui/Handlers/SendModalHandler.qml
+++ b/ui/app/mainui/Handlers/SendModalHandler.qml
@@ -841,6 +841,8 @@ QtObject {
 
             SignSendAdaptor {
                 id: signSendAdaptor
+
+                palette: root.popupParent.Theme.palette
                 accountKey: simpleSendModal.selectedAccountAddress
                 accountsModel: root.walletAccountsModel
                 recipientModel: handler.recipientViewAdaptor.recipientsModel
@@ -871,7 +873,7 @@ QtObject {
                     accountName: signSendAdaptor.selectedAccount.name
                     accountAddress: signSendAdaptor.selectedAccount.address
                     accountEmoji: signSendAdaptor.selectedAccount.emoji
-                    accountColor: Utils.getColorForId(signSendAdaptor.selectedAccount.colorId)
+                    accountColor: Utils.getColorForId(Theme.palette, signSendAdaptor.selectedAccount.colorId)
 
                     recipientAddress: signSendAdaptor.recipientAddress
                     recipientName: signSendAdaptor.recipientName
@@ -881,7 +883,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/AccountSelector.qml b/ui/imports/shared/controls/AccountSelector.qml
index c1ec7ab165d..24412eabf34 100644
--- a/ui/imports/shared/controls/AccountSelector.qml
+++ b/ui/imports/shared/controls/AccountSelector.qml
@@ -117,7 +117,7 @@ StatusComboBox {
         name: model.name
         address: model.address
         emoji: model.emoji
-        walletColor: Utils.getColorForId(model.colorId)
+        walletColor: Utils.getColorForId(Theme.palette, model.colorId)
         currencyBalance: model.currencyBalance
         walletType: model.walletType
         migratedToKeycard: model.migratedToKeycard ?? false
diff --git a/ui/imports/shared/controls/AccountSelectorHeader.qml b/ui/imports/shared/controls/AccountSelectorHeader.qml
index 314b91b294a..92fee9a7b39 100644
--- a/ui/imports/shared/controls/AccountSelectorHeader.qml
+++ b/ui/imports/shared/controls/AccountSelectorHeader.qml
@@ -51,14 +51,14 @@ AccountSelector {
             horizontalAlignment: Text.AlignLeft
             verticalAlignment: Text.AlignVCenter
             elide: Text.ElideRight
-            color: Utils.getContrastingColor(d.headerStyleBackgroundColor)
+            color: Utils.getContrastingColor(Theme.palette, d.headerStyleBackgroundColor)
         }
     }
 
     QtObject {
         id: d
         readonly property color headerStyleBackgroundColor: !!currentAccount ? root.control.hovered ?
-                                        Utils.getHoveredColor(currentAccount.colorId) :
-                                        Utils.getColorForId(currentAccount.colorId) : "transparent"
+                                        Utils.getHoveredColor(root.Theme.palette, currentAccount.colorId) :
+                                        Utils.getColorForId(root.Theme.palette, currentAccount.colorId) : "transparent"
     }
 }
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/ErrorTag.qml b/ui/imports/shared/controls/ErrorTag.qml
index edd18f1a959..90b377cae08 100644
--- a/ui/imports/shared/controls/ErrorTag.qml
+++ b/ui/imports/shared/controls/ErrorTag.qml
@@ -27,20 +27,20 @@ InformationTag {
     bgBorderColor: Theme.palette.dangerColor2
 
     QtObject {
-        id: priv
+        id: d
 
-        readonly property int fontPixelSize: Theme.tertiaryTextFontSize
-        readonly property color foregroundColor: Theme.palette.dangerColor1
+        readonly property int fontPixelSize: root.Theme.tertiaryTextFontSize
+        readonly property color foregroundColor: root.Theme.palette.dangerColor1
     }
 
     asset {
         name: "warning"
-        color: priv.foregroundColor
+        color: d.foregroundColor
     }
 
     tagPrimaryLabel.text: root.text
-    tagPrimaryLabel.color: priv.foregroundColor
-    tagPrimaryLabel.font.pixelSize: priv.fontPixelSize
+    tagPrimaryLabel.color: d.foregroundColor
+    tagPrimaryLabel.font.pixelSize: d.fontPixelSize
     tagPrimaryLabel.elide: Text.ElideRight
 
     // NB: regular binding won't work as `tagPrimaryLabel` is an alias
@@ -58,11 +58,11 @@ InformationTag {
             objectName: "rightComponentButton"
             horizontalPadding: 8
             size: StatusBaseButton.Size.Tiny
-            font.pixelSize: priv.fontPixelSize
+            font.pixelSize: d.fontPixelSize
             type: StatusBaseButton.Type.Danger
-            normalColor: priv.foregroundColor
+            normalColor: d.foregroundColor
             hoverColor: Theme.palette.hoverColor(normalColor)
-            textColor: Theme.palette.white
+            textColor: StatusColors.white
             radius: root.bgRadius
             text: root.buttonText
             onClicked: root.buttonClicked()
diff --git a/ui/imports/shared/controls/ImportKeypairInfo.qml b/ui/imports/shared/controls/ImportKeypairInfo.qml
index 5e3bc664ee0..f4406785a5b 100644
--- a/ui/imports/shared/controls/ImportKeypairInfo.qml
+++ b/ui/imports/shared/controls/ImportKeypairInfo.qml
@@ -19,7 +19,7 @@ Rectangle {
     radius: Theme.radius
     border.width: 1
     border.color: Theme.palette.directColor8
-    color: Theme.palette.transparent
+    color: StatusColors.transparent
 
     ColumnLayout {
         anchors.left: parent.left
diff --git a/ui/imports/shared/controls/InformationTile.qml b/ui/imports/shared/controls/InformationTile.qml
index ee77b1de6aa..73d42e8d5f5 100644
--- a/ui/imports/shared/controls/InformationTile.qml
+++ b/ui/imports/shared/controls/InformationTile.qml
@@ -22,7 +22,7 @@ Control {
         radius: Theme.radius
         border.width: 1
         border.color: Theme.palette.baseColor2
-        color: Theme.palette.transparent
+        color: StatusColors.transparent
     }
 
     contentItem: ColumnLayout {
diff --git a/ui/imports/shared/controls/Input.qml b/ui/imports/shared/controls/Input.qml
index 350d3c9c90c..508acb33195 100644
--- a/ui/imports/shared/controls/Input.qml
+++ b/ui/imports/shared/controls/Input.qml
@@ -103,7 +103,7 @@ Item {
                     if (!inputBox.readOnly && inputValue.focus) {
                         return Theme.palette.primaryColor1
                     }
-                    return Theme.palette.transparent
+                    return StatusColors.transparent
                 }
             }
             onEditingFinished: inputBox.editingFinished(inputBox.text)
diff --git a/ui/imports/shared/controls/ProfileButton.qml b/ui/imports/shared/controls/ProfileButton.qml
index 9511813c978..efa41ab4f0b 100644
--- a/ui/imports/shared/controls/ProfileButton.qml
+++ b/ui/imports/shared/controls/ProfileButton.qml
@@ -49,9 +49,9 @@ StatusNavBarTabButton {
     // identicon.asset.height: identicon.asset.isImage ? 28 : (root.usesDefaultName ? Math.floor(height * 0.9) : height)
     identicon.asset.bgWidth: root.usesDefaultName ? width : 0
     identicon.asset.bgHeight: root.usesDefaultName ? height : 0
-    identicon.asset.color: root.usesDefaultName ? Theme.palette.indirectColor2 : Utils.colorForPubkey(root.pubKey)
+    identicon.asset.color: root.usesDefaultName ? Theme.palette.indirectColor2 : Utils.colorForPubkey(Theme.palette, root.pubKey)
     identicon.asset.isLetterIdenticon: root.usesDefaultName ? false : icon.name !== "" && !identicon.asset.isImage
-    identicon.asset.bgColor: root.usesDefaultName ? Utils.colorForPubkey(root.pubKey) : "transparent"
+    identicon.asset.bgColor: root.usesDefaultName ? Utils.colorForPubkey(Theme.palette, root.pubKey) : "transparent"
 
     badge.visible: true
     badge.anchors {
diff --git a/ui/imports/shared/controls/ShapeRectangle.qml b/ui/imports/shared/controls/ShapeRectangle.qml
index 12abd168898..8d16e5ebea4 100644
--- a/ui/imports/shared/controls/ShapeRectangle.qml
+++ b/ui/imports/shared/controls/ShapeRectangle.qml
@@ -27,7 +27,7 @@ import utils
    \sa Shape
    \sa ShapePath
 */
-Shape {
+Item {
     id: root
 
     property string icon
@@ -46,6 +46,61 @@ Shape {
     implicitWidth: 448
     implicitHeight: 44
 
+    Shape {
+        anchors.fill: parent
+        ShapePath {
+            id: path
+            fillColor: "transparent"
+            strokeColor: root.Theme.palette.baseColor2
+            strokeWidth: 1
+            strokeStyle: ShapePath.DashLine
+            dashPattern: [4, 4]
+
+            startX: root.leftTopRadius
+            startY: 0
+            PathLine {
+                x: root.width - root.rightTopRadius
+                y: 0
+            }
+            PathArc {
+                x: root.width
+                y: root.rightTopRadius
+                radiusX: root.rightTopRadius
+                radiusY: root.rightTopRadius
+            }
+            PathLine {
+                x: root.width
+                y: root.height - root.rightBottomRadius
+            }
+            PathArc {
+                x:root.width - root.rightBottomRadius
+                y: root.height
+                radiusX: root.rightBottomRadius
+                radiusY: root.rightBottomRadius
+            }
+            PathLine {
+                x: root.leftBottomRadius
+                y: root.height
+            }
+            PathArc {
+                x:0
+                y: root.height - root.leftBottomRadius
+                radiusX: root.leftBottomRadius
+                radiusY: root.leftBottomRadius
+            }
+            PathLine {
+                x: 0
+                y: root.leftTopRadius
+            }
+            PathArc {
+                x:root.leftTopRadius
+                y: 0
+                radiusX: root.leftTopRadius
+                radiusY: root.leftTopRadius
+            }
+        }
+    }
+
     RowLayout {
         spacing: 4
         anchors.centerIn: parent
@@ -68,56 +123,4 @@ Shape {
             visible: !!text
         }
     }
-
-    ShapePath {
-        id: path
-        fillColor: "transparent"
-        strokeColor: Theme.palette.baseColor2
-        strokeWidth: 1
-        strokeStyle: ShapePath.DashLine
-        dashPattern: [4, 4]
-
-        startX: root.leftTopRadius
-        startY: 0
-        PathLine {
-            x: root.width - root.rightTopRadius
-            y: 0
-        }
-        PathArc {
-            x: root.width
-            y: root.rightTopRadius
-            radiusX: root.rightTopRadius
-            radiusY: root.rightTopRadius
-        }
-        PathLine {
-            x: root.width
-            y: root.height - root.rightBottomRadius
-        }
-        PathArc {
-            x:root.width - root.rightBottomRadius
-            y: root.height
-            radiusX: root.rightBottomRadius
-            radiusY: root.rightBottomRadius
-        }
-        PathLine {
-            x: root.leftBottomRadius
-            y: root.height
-        }
-        PathArc {
-            x:0
-            y: root.height - root.leftBottomRadius
-            radiusX: root.leftBottomRadius
-            radiusY: root.leftBottomRadius
-        }
-        PathLine {
-            x: 0
-            y: root.leftTopRadius
-        }
-        PathArc {
-            x:root.leftTopRadius
-            y: 0
-            radiusX: root.leftTopRadius
-            radiusY: root.leftTopRadius
-        }
-    }
 }
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/TokenDelegate.qml b/ui/imports/shared/controls/TokenDelegate.qml
index 67933110726..a566ab9dca7 100644
--- a/ui/imports/shared/controls/TokenDelegate.qml
+++ b/ui/imports/shared/controls/TokenDelegate.qml
@@ -39,8 +39,8 @@ StatusListItem {
 
         readonly property string textColor: {
             if (!root.marketDetailsAvailable)
-                return Theme.palette.successColor1
-            return WalletUtils.getChangePct24HourColor(root.marketChangePct24hour)
+                return root.Theme.palette.successColor1
+            return WalletUtils.getChangePct24HourColor(root.Theme.palette, root.marketChangePct24hour)
         }
     }
 
diff --git a/ui/imports/shared/controls/TransactionDelegate.qml b/ui/imports/shared/controls/TransactionDelegate.qml
index 91b541f9c8f..cc8503dc817 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 ""
             }
@@ -195,7 +195,7 @@ StatusListItem {
         bgHeight: height + 2
         bgRadius: bgWidth / 2
         bgColor: d.lightTheme && Constants.isDefaultTokenIcon(root.tokenImage) ?
-                     Theme.palette.white : "transparent"
+                     StatusColors.white : "transparent"
         color: "transparent"
         isImage: !loading
         name: root.tokenImage
@@ -221,7 +221,7 @@ StatusListItem {
             bgWidth: width + 2
             bgHeight: height + 2
             bgRadius: bgWidth / 2
-            bgColor: Theme.palette.white
+            bgColor: StatusColors.white
             isImage: root.tokenIconAsset.isImage
             color: root.tokenIconAsset.color
             name: d.secondIconSource
@@ -327,7 +327,7 @@ StatusListItem {
         if (bgColorAnimation.running) {
             return d.animatedBgColor
         }
-        return sensor.containsMouse ? Theme.palette.baseColor5 : Theme.palette.transparent
+        return sensor.containsMouse ? Theme.palette.baseColor5 : StatusColors.transparent
     }
 
     statusListItemIcon.active: (loading || root.asset.name)
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..ef37c16eff3 100644
--- a/ui/imports/shared/controls/chat/EmojiReaction.qml
+++ b/ui/imports/shared/controls/chat/EmojiReaction.qml
@@ -18,7 +18,7 @@ Rectangle {
     width: statusEmoji.width + Theme.halfPadding
     height: width
     color: reactedByUser ? Theme.palette.secondaryBackground :
-                           (isHovered ? Theme.palette.backgroundHover : Theme.palette.transparent)
+                           (isHovered ? Theme.palette.backgroundHover : StatusColors.transparent)
     border.width: reactedByUser ? 1 : 0
     border.color: Theme.palette.primaryColor1
     radius: Theme.radius
@@ -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/LinkPreviewCard.qml b/ui/imports/shared/controls/chat/LinkPreviewCard.qml
index d2a53fc198c..7e971a718b0 100644
--- a/ui/imports/shared/controls/chat/LinkPreviewCard.qml
+++ b/ui/imports/shared/controls/chat/LinkPreviewCard.qml
@@ -74,7 +74,7 @@ CalloutCard {
                     imageHeight: imageWidth
                     name: root.userData.name
                     image: root.userData.image
-                    userColor: Utils.colorForPubkey(root.userData.publicKey)
+                    userColor: Utils.colorForPubkey(Theme.palette, root.userData.publicKey)
                 }
             }
             RowLayout {
diff --git a/ui/imports/shared/controls/chat/PaymentRequestMiniCardDelegate.qml b/ui/imports/shared/controls/chat/PaymentRequestMiniCardDelegate.qml
index ecb73b330a4..921e28dccdc 100644
--- a/ui/imports/shared/controls/chat/PaymentRequestMiniCardDelegate.qml
+++ b/ui/imports/shared/controls/chat/PaymentRequestMiniCardDelegate.qml
@@ -45,14 +45,14 @@ 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
                     anchors.horizontalCenter: parent.right
                     asset.width: 16
                     asset.height: 16
-                    asset.bgColor: root.containsMouse ? Theme.palette.transparent : Theme.palette.background
+                    asset.bgColor: root.containsMouse ? StatusColors.transparent : Theme.palette.background
                     asset.bgHeight: 20
                     asset.bgWidth: 20
                     asset.isImage: true
diff --git a/ui/imports/shared/controls/chat/ProfileHeader.qml b/ui/imports/shared/controls/chat/ProfileHeader.qml
index 0f5b8cd96e7..a8e89c6acba 100644
--- a/ui/imports/shared/controls/chat/ProfileHeader.qml
+++ b/ui/imports/shared/controls/chat/ProfileHeader.qml
@@ -120,7 +120,7 @@ Item {
                 objectName: "ProfileHeader_userImage"
                 name: root.displayName
                 usesDefaultName: root.usesDefaultName
-                userColor: Utils.colorForColorId(root.colorId)
+                userColor: Utils.colorForColorId(Theme.palette, root.colorId)
                 image: root.previewIcon
                 interactive: false
                 imageWidth: d.getSize(36, 64, 170)
@@ -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/ContactListItemDelegate.qml b/ui/imports/shared/controls/delegates/ContactListItemDelegate.qml
index 8f519a6497e..a1981f86fe8 100644
--- a/ui/imports/shared/controls/delegates/ContactListItemDelegate.qml
+++ b/ui/imports/shared/controls/delegates/ContactListItemDelegate.qml
@@ -24,7 +24,7 @@ StatusMemberListItem {
     isUntrustworthy: model.isUntrustworthy || model.trustStatus === Constants.trustStatus.untrustworthy
     isContact: model.isContact
     icon.name: model.thumbnailImage || model.icon
-    icon.color: Utils.colorForColorId(model.colorId)
+    icon.color: Utils.colorForColorId(Theme.palette, model.colorId)
     status: model.onlineStatus
     color: (hovered || highlighted) ? Theme.palette.baseColor2 : "transparent"
 }
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..96964998b7b 100644
--- a/ui/imports/shared/panels/ImageLoader.qml
+++ b/ui/imports/shared/panels/ImageLoader.qml
@@ -44,7 +44,7 @@ Rectangle {
             when: image.status === Image.Ready
             PropertyChanges {
                 target: root
-                color: Theme.palette.transparent
+                color: StatusColors.transparent
             }
             PropertyChanges {
                 target: loader
@@ -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..e7ac50a58ee 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
             }
         }
 
@@ -192,7 +192,7 @@ Item {
                 visible: progressBar.visible
                 font.pixelSize: Theme.tertiaryTextFontSize
                 verticalAlignment: Text.AlignVCenter
-                color: Theme.palette.white
+                color: StatusColors.white
             }
 
             ProgressBar {
@@ -207,13 +207,13 @@ Item {
                     radius: 8
                     color: "transparent"
                     border.width: 1
-                    border.color: Theme.palette.white
+                    border.color: StatusColors.white
                 }
                 contentItem: Rectangle {
                     width: progressBar.width*progressBar.position
                     implicitHeight: 8
                     radius: 8
-                    color: Theme.palette.white
+                    color: StatusColors.white
                 }
             }
 
@@ -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 492b5638454..204e091f1c7 100644
--- a/ui/imports/shared/panels/PrivacyWallCarousel.qml
+++ b/ui/imports/shared/panels/PrivacyWallCarousel.qml
@@ -27,12 +27,12 @@ Control {
         readonly property int windowHeight: window ? window.height: Screen.height
         readonly property bool isSmallPortraitScreen: windowHeight > windowWidth
                                             // The max width of a phone in portrait mode
-                                            && windowWidth <= Theme.portraitBreakpoint.width
+                                            && windowWidth <= ThemeUtils.portraitBreakpoint.width
         function getImagePath(currentIndex) {
             const imageName = root.model.get(currentIndex).image
             const platformPostfix = isSmallPortraitScreen ? "-small": ""
             const imagePath =  "%1-%2%3".arg(imageName).arg(Theme.palette.name).arg(platformPostfix)
-            return Theme.png(imagePath)
+            return Assets.png(imagePath)
         }
     }
 
@@ -154,7 +154,7 @@ Control {
 
             type: StatusBaseButton.Type.Primary
             normalColor: Theme.palette.privacyModeColors.navBarColor
-            textColor: Theme.palette.white
+            textColor: StatusColors.white
 
             text: qsTr("Enable third-party services")
 
diff --git a/ui/imports/shared/panels/RoundedIcon.qml b/ui/imports/shared/panels/RoundedIcon.qml
index f10d07de15b..0f9dc5c1799 100644
--- a/ui/imports/shared/panels/RoundedIcon.qml
+++ b/ui/imports/shared/panels/RoundedIcon.qml
@@ -19,7 +19,7 @@ Rectangle {
     property alias iconWidth: roundedIconImage.width
     property alias iconHeight: roundedIconImage.height
     property alias rotation: roundedIconImage.rotation
-    property color iconColor: Theme.palette.transparent
+    property color iconColor: StatusColors.transparent
 
     color: Theme.palette.primaryColor1
     radius: width / 2
@@ -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/CommonContactDialog.qml b/ui/imports/shared/popups/CommonContactDialog.qml
index 9976240f465..d6b90d1fbb4 100644
--- a/ui/imports/shared/popups/CommonContactDialog.qml
+++ b/ui/imports/shared/popups/CommonContactDialog.qml
@@ -48,7 +48,7 @@ StatusDialog {
             StatusUserImage {
                 name: root.mainDisplayName
                 usesDefaultName: contactDetails.usesDefaultName
-                userColor: Utils.colorForColorId(contactDetails.colorId)
+                userColor: Utils.colorForColorId(Theme.palette, contactDetails.colorId)
                 image: contactDetails.largeImage
                 interactive: false
                 imageWidth: 60
diff --git a/ui/imports/shared/popups/DownloadPage.qml b/ui/imports/shared/popups/DownloadPage.qml
index 56e1b4781b8..54dcd54d441 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,14 +66,14 @@ 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
     }
 
     StatusPickerButton {
         width: 175
         bgColor: Theme.palette.primaryColor1
-        contentColor: Theme.palette.white
+        contentColor: StatusColors.white
         text: qsTr("Get Status %1").arg(root.newVersion)
         anchors.horizontalCenter: parent.horizontalCenter
         anchors.top: newVersionAvailableText.bottom
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..8b13e52f8af 100644
--- a/ui/imports/shared/popups/IntroduceYourselfPopup.qml
+++ b/ui/imports/shared/popups/IntroduceYourselfPopup.qml
@@ -55,7 +55,7 @@ StatusDialog {
 
                         name: root.pubKey
                         usesDefaultName: true
-                        userColor: Utils.colorForColorId(root.colorId)
+                        userColor: Utils.colorForColorId(Theme.palette, root.colorId)
                         imageWidth: 68
                         imageHeight: 68
                         interactive: false
@@ -95,8 +95,8 @@ StatusDialog {
 
                         name: root.pubKey
                         usesDefaultName: true
-                        image: Theme.png("onboarding/avatar")
-                        userColor: Utils.colorForColorId(root.colorId)
+                        image: Assets.png("onboarding/avatar")
+                        userColor: Utils.colorForColorId(Theme.palette, root.colorId)
                         imageWidth: 68
                         imageHeight: 68
                         interactive: false
diff --git a/ui/imports/shared/popups/MetricsEnablePopup.qml b/ui/imports/shared/popups/MetricsEnablePopup.qml
index 0e6012c4587..357bd8faec1 100644
--- a/ui/imports/shared/popups/MetricsEnablePopup.qml
+++ b/ui/imports/shared/popups/MetricsEnablePopup.qml
@@ -86,7 +86,7 @@ StatusModal {
                 textFormat: Text.RichText
                 text: qsTr("Usage data will be shared from all profiles added to device. %1 %2")
                       .arg(root.placement !== Constants.metricsEnablePlacement.privacyAndSecurity ? qsTr("Sharing usage data can be turned off anytime in Settings / Privacy and Security.") : "")
-                      .arg(root.placement === Constants.metricsEnablePlacement.privacyAndSecurity ? qsTr("For more details refer to our %1.").arg(Utils.getStyledLink("Privacy Policy", "#", hoveredLink)) : "")
+                      .arg(root.placement === Constants.metricsEnablePlacement.privacyAndSecurity ? qsTr("For more details refer to our %1.").arg(Utils.getStyledLink("Privacy Policy", "#", hoveredLink, Theme.palette.directColor1, Theme.palette.primaryColor1)) : "")
                 onLinkActivated: {
                     root.close()
                     Global.privacyPolicyRequested()
diff --git a/ui/imports/shared/popups/ModalPopup.qml b/ui/imports/shared/popups/ModalPopup.qml
index 9a93aec7482..c2db8abbc0b 100644
--- a/ui/imports/shared/popups/ModalPopup.qml
+++ b/ui/imports/shared/popups/ModalPopup.qml
@@ -92,7 +92,7 @@ Popup {
             anchors.right: parent.right
             anchors.rightMargin: 12
             radius: 8
-            color: hovered ? Theme.palette.backgroundHover : Theme.palette.transparent
+            color: hovered ? Theme.palette.backgroundHover : StatusColors.transparent
 
             SVGImage {
                 id: closeModalImg
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/ThirdpartyServicesPopup.qml b/ui/imports/shared/popups/ThirdpartyServicesPopup.qml
index 897526d3aa3..5cf8c1f7781 100644
--- a/ui/imports/shared/popups/ThirdpartyServicesPopup.qml
+++ b/ui/imports/shared/popups/ThirdpartyServicesPopup.qml
@@ -51,7 +51,7 @@ StatusDialog {
                 radius: Theme.radius
                 border.width: 1
                 border.color: Theme.palette.baseColor2
-                color: Theme.palette.transparent
+                color: StatusColors.transparent
 
                 ColumnLayout {
                     width: parent.width
@@ -125,7 +125,7 @@ StatusDialog {
             StatusButton {
                 type: StatusBaseButton.Type.Primary
                 normalColor: Theme.palette.privacyModeColors.navBarColor
-                textColor: Theme.palette.white
+                textColor: StatusColors.white
                 text: {
                     if(root.thirdPartyServicesEnabled) {
                         if(root.isOnboardingFlow) {
diff --git a/ui/imports/shared/popups/addaccount/panels/DerivationPathInput.qml b/ui/imports/shared/popups/addaccount/panels/DerivationPathInput.qml
index a0084bb8e02..bdab06c4f0c 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.grey5
         errorColor: Theme.palette.dangerColor1
         warningColor: Theme.palette.warningColor1
         complainTooBigAccIndex: d.detectedStandardBasePath
diff --git a/ui/imports/shared/popups/addaccount/panels/SelectOrigin.qml b/ui/imports/shared/popups/addaccount/panels/SelectOrigin.qml
index 965bc418139..f6e324291b7 100644
--- a/ui/imports/shared/popups/addaccount/panels/SelectOrigin.qml
+++ b/ui/imports/shared/popups/addaccount/panels/SelectOrigin.qml
@@ -39,7 +39,7 @@ StatusSelect {
             name: root.selectedOrigin.image? root.selectedOrigin.image : root.selectedOrigin.icon
             isImage: !!root.selectedOrigin.image
             color: root.selectedOrigin.pairType === Constants.addAccountPopup.keyPairType.profile?
-                       Utils.colorForPubkey(root.userProfilePublicKey) : Theme.palette.primaryColor1
+                       Utils.colorForPubkey(Theme.palette, root.userProfilePublicKey) : Theme.palette.primaryColor1
             letterSize: Math.max(4, asset.width / 2.4)
             charactersLen: 2
             isLetterIdenticon: !root.selectedOrigin.icon && !asset.name.toString()
@@ -49,7 +49,7 @@ StatusSelect {
         tagsModel : root.selectedOrigin.accounts
 
         tagsDelegate: StatusListItemTag {
-            bgColor: Utils.getColorForId(model.account.colorId)
+            bgColor: Utils.getColorForId(Theme.palette, model.account.colorId)
             height: 24
             bgRadius: 6
             tagClickable: false
@@ -109,7 +109,7 @@ StatusSelect {
         tagsModel: menu.isHeader || menu.isOption? [] : model.keyPair.accounts
 
         tagsDelegate: StatusListItemTag {
-            bgColor: Utils.getColorForId(model.account.colorId)
+            bgColor: Utils.getColorForId(Theme.palette, model.account.colorId)
             height: 24
             bgRadius: 6
             tagClickable: false
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/addaccount/states/Main.qml b/ui/imports/shared/popups/addaccount/states/Main.qml
index 34852e79a76..68e548abc64 100644
--- a/ui/imports/shared/popups/addaccount/states/Main.qml
+++ b/ui/imports/shared/popups/addaccount/states/Main.qml
@@ -29,7 +29,7 @@ Item {
             colorSelection.selectedColorIndex = Math.floor(Math.random() * colorSelection.model.length)
         }
         else {
-            let ind = Utils.getColorIndexForId(root.store.addAccountModule.selectedColorId)
+            let ind = Utils.getColorIndexForId(Theme.palette, root.store.addAccountModule.selectedColorId)
             colorSelection.selectedColorIndex = ind
         }
 
@@ -116,7 +116,7 @@ Item {
                 text: root.store.addAccountModule.accountName
                 input.isIconSelectable: true
                 input.leftPadding: Theme.padding
-                input.asset.color: Utils.getColorForId(root.store.addAccountModule.selectedColorId)
+                input.asset.color: Utils.getColorForId(Theme.palette, root.store.addAccountModule.selectedColorId)
                 onIconClicked: {
                     d.openEmojiPopup(true)
                 }
@@ -171,7 +171,7 @@ Item {
                 selectedColorIndex: -1
 
                 onSelectedColorChanged: {
-                    root.store.addAccountModule.selectedColorId = Utils.getIdForColor(selectedColor)
+                    root.store.addAccountModule.selectedColorId = Utils.getIdForColor(Theme.palette, selectedColor)
                 }
             }
 
diff --git a/ui/imports/shared/popups/keycard/helpers/KeyPairItem.qml b/ui/imports/shared/popups/keycard/helpers/KeyPairItem.qml
index 0389650284b..cfb53396bf8 100644
--- a/ui/imports/shared/popups/keycard/helpers/KeyPairItem.qml
+++ b/ui/imports/shared/popups/keycard/helpers/KeyPairItem.qml
@@ -46,7 +46,7 @@ StatusListItem {
             return Theme.palette.baseColor2
         }
 
-        return Theme.palette.transparent
+        return StatusColors.transparent
     }
     title: root.keyPairName
     statusListItemTitleAside.textFormat: Text.RichText
@@ -76,7 +76,7 @@ StatusListItem {
         name: root.keyPairImage? root.keyPairImage : root.keyPairIcon
         isImage: !!root.keyPairImage
         color: root.keyPairType === Constants.keycard.keyPairType.profile?
-                   Utils.colorForPubkey(d.myPublicKey) :
+                   Utils.colorForPubkey(Theme.palette, d.myPublicKey) :
                    root.keyPairCardLocked? Theme.palette.dangerColor1 : Theme.palette.primaryColor1
         letterSize: Math.max(4, asset.width / 2.4)
         charactersLen: 2
@@ -87,7 +87,7 @@ StatusListItem {
     tagsModel: root.keyPairAccounts
 
     tagsDelegate: StatusListItemTag {
-        bgColor: Utils.getColorForId(model.account.colorId)
+        bgColor: Utils.getColorForId(Theme.palette, model.account.colorId)
         height: Theme.bigPadding
         bgRadius: 6
         tagClickable: root.tagClickable
diff --git a/ui/imports/shared/popups/keycard/helpers/KeyPairUnknownItem.qml b/ui/imports/shared/popups/keycard/helpers/KeyPairUnknownItem.qml
index 3e988ddc186..e73c6d57d2a 100644
--- a/ui/imports/shared/popups/keycard/helpers/KeyPairUnknownItem.qml
+++ b/ui/imports/shared/popups/keycard/helpers/KeyPairUnknownItem.qml
@@ -45,7 +45,7 @@ Rectangle {
                 name: root.keyPairImage? root.keyPairImage : root.keyPairIcon
                 isImage: !!root.keyPairImage
                 color: root.keyPairKeyUid === userProfile.keyUid?
-                           Utils.colorForPubkey(userProfile.pubKey) :
+                           Utils.colorForPubkey(Theme.palette, userProfile.pubKey) :
                            root.keyPairCardLocked? Theme.palette.dangerColor1 : Theme.palette.primaryColor1
                 letterSize: Math.max(4, asset.width / 2.4)
                 charactersLen: 2
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/helpers/KeycardItem.qml b/ui/imports/shared/popups/keycard/helpers/KeycardItem.qml
index d30af3294df..afc5235b09b 100644
--- a/ui/imports/shared/popups/keycard/helpers/KeycardItem.qml
+++ b/ui/imports/shared/popups/keycard/helpers/KeycardItem.qml
@@ -49,7 +49,7 @@ StatusListItem {
         name: root.keyPairImage? root.keyPairImage : root.keyPairIcon
         isImage: !!root.keyPairImage
         color: root.keyPairType === Constants.keycard.keyPairType.profile?
-                   Utils.colorForPubkey(d.myPublicKey) :
+                   Utils.colorForPubkey(Theme.palette, d.myPublicKey) :
                    root.keycardLocked? Theme.palette.dangerColor1 : Theme.palette.primaryColor1
         letterSize: Math.max(4, asset.width / 2.4)
         charactersLen: 2
@@ -60,7 +60,7 @@ StatusListItem {
     tagsModel: root.keyPairAccounts
 
     tagsDelegate: StatusListItemTag {
-        bgColor: Utils.getColorForId(model.account.colorId)
+        bgColor: Utils.getColorForId(Theme.palette, model.account.colorId)
         bgRadius: 6
         height: Theme.bigPadding
         closeButtonVisible: false
diff --git a/ui/imports/shared/popups/keycard/states/EnterName.qml b/ui/imports/shared/popups/keycard/states/EnterName.qml
index bf856afb637..d29a8b69cb4 100644
--- a/ui/imports/shared/popups/keycard/states/EnterName.qml
+++ b/ui/imports/shared/popups/keycard/states/EnterName.qml
@@ -43,7 +43,7 @@ Item {
                 let color = Theme.palette.customisationColorsArray[Math.floor(Math.random() * Theme.palette.customisationColorsArray.length)]
                 let emoji = StatusQUtils.Emoji.getRandomEmoji(StatusQUtils.Emoji.size.verySmall) // TODO: Reuse status-go RandomWalletEmoji
                 root.sharedKeycardModule.keyPairForProcessing.observedAccount.name = "      "
-                root.sharedKeycardModule.keyPairForProcessing.observedAccount.colorId = Utils.getIdForColor(color)
+                root.sharedKeycardModule.keyPairForProcessing.observedAccount.colorId = Utils.getIdForColor(Theme.palette, color)
                 root.sharedKeycardModule.keyPairForProcessing.observedAccount.emoji = emoji
             }
         }
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/keycard/states/ManageAccounts.qml b/ui/imports/shared/popups/keycard/states/ManageAccounts.qml
index e72bb60d9cf..ce4941dc780 100644
--- a/ui/imports/shared/popups/keycard/states/ManageAccounts.qml
+++ b/ui/imports/shared/popups/keycard/states/ManageAccounts.qml
@@ -46,7 +46,7 @@ Item {
             if (d.observedAccount.colorId.length === 0) {
                 let color = Theme.palette.customisationColorsArray[Math.floor(Math.random() * Theme.palette.customisationColorsArray.length)]
                 let emoji = StatusQUtils.Emoji.getRandomEmoji(StatusQUtils.Emoji.size.verySmall) // TODO: Reuse status-go RandomWalletEmoji
-                d.observedAccount.colorId = Utils.getIdForColor(color)
+                d.observedAccount.colorId = Utils.getIdForColor(root.Theme.palette, color)
                 d.observedAccount.emoji = emoji
             }
 
@@ -213,7 +213,7 @@ Item {
             input.acceptReturn: true
             input.isIconSelectable: true
             input.leftPadding: Theme.padding
-            input.asset.color: Utils.getColorForId(d.observedAccount.colorId)
+            input.asset.color: Utils.getColorForId(Theme.palette, d.observedAccount.colorId)
             input.asset.emoji: d.observedAccount.emoji
 
             onTextChanged: {
@@ -247,7 +247,7 @@ Item {
             model: Theme.palette.customisationColorsArray
 
             onSelectedColorChanged: {
-                d.observedAccount.colorId = Utils.getIdForColor(selectedColor)
+                d.observedAccount.colorId = Utils.getIdForColor(Theme.palette, selectedColor)
             }
         }
 
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/panels/RecipientSelectorPanel.qml b/ui/imports/shared/popups/send/panels/RecipientSelectorPanel.qml
index b0016fadc66..24c97bd3b32 100644
--- a/ui/imports/shared/popups/send/panels/RecipientSelectorPanel.qml
+++ b/ui/imports/shared/popups/send/panels/RecipientSelectorPanel.qml
@@ -128,7 +128,7 @@ Item {
                     address: model.address
 
                     emoji: model.emoji
-                    walletColor: Utils.getColorForId(model.colorId)
+                    walletColor: Utils.getColorForId(Theme.palette, model.colorId)
                     currencyBalance: model.currencyBalance
                     walletType: model.walletType
                     migratedToKeycard: model.migratedToKeycard ?? false
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/send/views/RecipientView.qml b/ui/imports/shared/popups/send/views/RecipientView.qml
index 308d15af760..823702003d3 100644
--- a/ui/imports/shared/popups/send/views/RecipientView.qml
+++ b/ui/imports/shared/popups/send/views/RecipientView.qml
@@ -158,7 +158,7 @@ Loader {
             name: !!modelData ? modelData.name : ""
             address: !!modelData ? modelData.address : ""
             emoji: !!modelData ? modelData.emoji : ""
-            walletColor: !!modelData ? Utils.getColorForId(modelData.colorId): ""
+            walletColor: !!modelData ? Utils.getColorForId(Theme.palette, modelData.colorId): ""
             currencyBalance: !!modelData ? modelData.currencyBalance : ""
             walletType: !!modelData ? modelData.walletType : ""
             migratedToKeycard: !!modelData ? modelData.migratedToKeycard ?? false : false
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/StatusChatInput.qml b/ui/imports/shared/status/StatusChatInput.qml
index c513c687846..5588c08dbda 100644
--- a/ui/imports/shared/status/StatusChatInput.qml
+++ b/ui/imports/shared/status/StatusChatInput.qml
@@ -139,7 +139,7 @@ Rectangle {
     implicitWidth: layout.implicitWidth + layout.anchors.leftMargin + layout.anchors.rightMargin
     implicitHeight: layout.implicitHeight + layout.anchors.topMargin + layout.anchors.bottomMargin
 
-    color: Theme.palette.transparent
+    color: StatusColors.transparent
 
     QtObject {
         id: d
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..dd884a95556 100644
--- a/ui/imports/shared/status/StatusChatInputReplyArea.qml
+++ b/ui/imports/shared/status/StatusChatInputReplyArea.qml
@@ -62,12 +62,13 @@ Rectangle {
         anchors.rightMargin: Theme.padding
         anchors.bottom: parent.bottom
         clip: true
-        color: Theme.palette.transparent
+        color: StatusColors.transparent
         visible: (root.contentType !== Constants.messageContentType.imageType) && (root.contentType !== Constants.messageContentType.stickerType)
 
         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
@@ -97,7 +98,7 @@ Rectangle {
         imageWidth: 64
         imageHeight: 64
         stickerData: root.stickerData
-        color: Theme.palette.transparent
+        color: StatusColors.transparent
         contentType: root.contentType
     }
 
@@ -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/StatusImageRadioButton.qml b/ui/imports/shared/status/StatusImageRadioButton.qml
index fd2601308d2..7d82458cfe5 100644
--- a/ui/imports/shared/status/StatusImageRadioButton.qml
+++ b/ui/imports/shared/status/StatusImageRadioButton.qml
@@ -22,7 +22,7 @@ Rectangle {
     implicitWidth: 208
     implicitHeight: layout.height
     color: radioControl.checked ? Theme.palette.secondaryBackground :
-                                  (isHovered ? Theme.palette.backgroundHover : Theme.palette.transparent)
+                                  (isHovered ? Theme.palette.backgroundHover : StatusColors.transparent)
 
     radius: Theme.radius
 
diff --git a/ui/imports/shared/status/StatusInputListPopup.qml b/ui/imports/shared/status/StatusInputListPopup.qml
index 1971d3b54df..b78cf25ea79 100644
--- a/ui/imports/shared/status/StatusInputListPopup.qml
+++ b/ui/imports/shared/status/StatusInputListPopup.qml
@@ -148,7 +148,7 @@ Popup {
             property var myData: typeof modelData === "undefined" ? model : modelData
             property string myText: popup.getText(myData)
             visible: searchBox.text === "" || myText.includes(searchBox.text)
-            color: listView.currentIndex === index ? Theme.palette.backgroundHover : Theme.palette.transparent
+            color: listView.currentIndex === index ? Theme.palette.backgroundHover : StatusColors.transparent
             border.width: 0
             width: ListView.view.width
             height: visible ? 42 : 0
diff --git a/ui/imports/shared/status/StatusSearchListPopup.qml b/ui/imports/shared/status/StatusSearchListPopup.qml
index b63b28be1a7..f57bcecb103 100644
--- a/ui/imports/shared/status/StatusSearchListPopup.qml
+++ b/ui/imports/shared/status/StatusSearchListPopup.qml
@@ -99,7 +99,7 @@ StatusDropdown {
                 }
                 asset.width: 30
                 asset.height: 30
-                asset.color: model ? model.color ? model.color : Utils.colorForColorId(model.colorId) : ""
+                asset.color: model ? model.color ? model.color : Utils.colorForColorId(Theme.palette, model.colorId) : ""
                 asset.name: model ? model.icon : ""
                 asset.emoji: model ? model.emoji : ""
                 asset.charactersLen: 2
diff --git a/ui/imports/shared/status/StatusSettingsLineButton.qml b/ui/imports/shared/status/StatusSettingsLineButton.qml
index ace26133aef..c0c3fdf1754 100644
--- a/ui/imports/shared/status/StatusSettingsLineButton.qml
+++ b/ui/imports/shared/status/StatusSettingsLineButton.qml
@@ -24,7 +24,7 @@ ItemDelegate {
     hoverEnabled: enabled
 
     background: Rectangle {
-        color: hovered ? Theme.palette.backgroundHover : Theme.palette.transparent
+        color: hovered ? Theme.palette.backgroundHover : StatusColors.transparent
         radius: Theme.radius
     }
 
diff --git a/ui/imports/shared/status/StatusStickerButton.qml b/ui/imports/shared/status/StatusStickerButton.qml
index 407339870b1..b742ad00a50 100644
--- a/ui/imports/shared/status/StatusStickerButton.qml
+++ b/ui/imports/shared/status/StatusStickerButton.qml
@@ -70,7 +70,7 @@ StatusButton {
                 display: AbstractButton.IconOnly
                 text: ""
                 tooltip.text: qsTr("Uninstall")
-                textColor: Theme.palette.white
+                textColor: StatusColors.white
                 normalColor: Theme.palette.successColor1
                 hoverColor: Theme.palette.hoverColor(normalColor)
             }
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..7b0b02c8dc5 100644
--- a/ui/imports/shared/views/BiometricsSectionView.qml
+++ b/ui/imports/shared/views/BiometricsSectionView.qml
@@ -26,9 +26,9 @@ Control {
                 asset.color: Theme.palette.baseColor1
                 asset.bgColor: root.biometricsAvailable ?
                                    Theme.palette.baseColor2:
-                                   Theme.palette.transparent
+                                   StatusColors.transparent
                 asset.bgBorderColor: root.biometricsAvailable ?
-                                         Theme.palette.transparent:
+                                         StatusColors.transparent:
                                          Theme.palette.baseColor2
                 asset.bgBorderWidth: 1
             }
@@ -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/ExistingContacts.qml b/ui/imports/shared/views/ExistingContacts.qml
index a7b8277a42a..feb92357d4b 100644
--- a/ui/imports/shared/views/ExistingContacts.qml
+++ b/ui/imports/shared/views/ExistingContacts.qml
@@ -94,7 +94,7 @@ Item {
             icon.name: model.icon
             icon.width: 40
             icon.height: 40
-            icon.color: Utils.colorForColorId(model.colorId)
+            icon.color: Utils.colorForColorId(Theme.palette, model.colorId)
 
             onClicked: {
                 root.contactClicked(model);
diff --git a/ui/imports/shared/views/HistoryBetaTag.qml b/ui/imports/shared/views/HistoryBetaTag.qml
index 62df69b08dc..f856907a189 100644
--- a/ui/imports/shared/views/HistoryBetaTag.qml
+++ b/ui/imports/shared/views/HistoryBetaTag.qml
@@ -29,7 +29,8 @@ InformationTag {
         function getExplorerLinks(model, hoveredLink) {
             let links = []
             SQUtils.ModelUtils.forEach(model, function(network) {
-                links.push(Utils.getStyledLink(Utils.getChainExplorerName(network["shortName"]), network["blockExplorerURL"], hoveredLink))
+                links.push(Utils.getStyledLink(Utils.getChainExplorerName(network["shortName"]), network["blockExplorerURL"], hoveredLink,
+                                               root.Theme.palette.directColor1, root.Theme.palette.primaryColor1))
             })
             return Utils.getEnumerationString(links, qsTr("or"))
         }
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/PickedContacts.qml b/ui/imports/shared/views/PickedContacts.qml
index a3864a6958d..7a82d0c3fcc 100644
--- a/ui/imports/shared/views/PickedContacts.qml
+++ b/ui/imports/shared/views/PickedContacts.qml
@@ -45,7 +45,7 @@ Item {
             icon.width: 40
             icon.height: 40
             color: "transparent"
-            icon.color: Utils.colorForColorId(model.colorId)
+            icon.color: Utils.colorForColorId(Theme.palette, model.colorId)
 
             hoverEnabled: false
         }
diff --git a/ui/imports/shared/views/ProfileDialogView.qml b/ui/imports/shared/views/ProfileDialogView.qml
index cdd396b9d36..04994146b9f 100644
--- a/ui/imports/shared/views/ProfileDialogView.qml
+++ b/ui/imports/shared/views/ProfileDialogView.qml
@@ -222,7 +222,7 @@ Pane {
                 name: d.mainDisplayName
                 usesDefaultName: contactDetails.usesDefaultName
                 image: contactDetails.largeImage
-                userColor: Utils.colorForColorId(contactDetails.colorId)
+                userColor: Utils.colorForColorId(Theme.palette, contactDetails.colorId)
 
                 interactive: false
                 imageWidth: 90
@@ -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..61ed87fd6b8 100644
--- a/ui/imports/shared/views/SyncingDeviceView.qml
+++ b/ui/imports/shared/views/SyncingDeviceView.qml
@@ -49,7 +49,7 @@ Item {
             Layout.alignment: Qt.AlignHCenter
             name: root.userDisplayName
             usesDefaultName: root.usesDefaultName
-            userColor: Utils.colorForColorId(root.userColorId)
+            userColor: Utils.colorForColorId(Theme.palette, root.userColorId)
             image: root.userImage
             interactive: false
             imageWidth: 80
@@ -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..8febcf37dd4 100644
--- a/ui/imports/shared/views/chat/ChannelIdentifierView.qml
+++ b/ui/imports/shared/views/chat/ChannelIdentifierView.qml
@@ -31,7 +31,7 @@ Column {
         asset {
             width: 120
             height: 120
-            color: root.chatType === Constants.chatType.oneToOne ? Utils.colorForPubkey(root.chatId) : root.chatColor
+            color: root.chatType === Constants.chatType.oneToOne ? Utils.colorForPubkey(Theme.palette, root.chatId) : root.chatColor
             emoji: root.chatEmoji
             name: root.chatIcon
             isImage: true
@@ -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 98df75fa318..856ea271d62 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]
                     }
                 }
 
@@ -926,9 +926,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 {
@@ -976,7 +976,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/ProfileShowcaseAccountsView.qml b/ui/imports/shared/views/profile/ProfileShowcaseAccountsView.qml
index 42eb57a5455..f0e953bdac5 100644
--- a/ui/imports/shared/views/profile/ProfileShowcaseAccountsView.qml
+++ b/ui/imports/shared/views/profile/ProfileShowcaseAccountsView.qml
@@ -53,7 +53,7 @@ Item {
             implicitHeight: GridView.view.cellHeight - Theme.padding
             title: model.name
             subTitle: StatusQUtils.Utils.elideAndFormatWalletAddress(model.address)
-            asset.color: Utils.getColorForId(model.colorId)
+            asset.color: Utils.getColorForId(Theme.palette, model.colorId)
             asset.emoji: model.emoji ?? ""
             asset.name: asset.emoji || "filled-account"
             asset.isLetterIdenticon: asset.emoji
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/shared/views/profile/ShareProfileDialog.qml b/ui/imports/shared/views/profile/ShareProfileDialog.qml
index 19a46e13bc2..6a957a9cb96 100644
--- a/ui/imports/shared/views/profile/ShareProfileDialog.qml
+++ b/ui/imports/shared/views/profile/ShareProfileDialog.qml
@@ -48,7 +48,7 @@ StatusDialog {
             Rectangle {
                 Layout.fillWidth: true
                 Layout.preferredHeight: width
-                color: Theme.palette.white
+                color: StatusColors.white
 
                 Image {
                     objectName: "profileQRCodeImage"
@@ -65,7 +65,7 @@ StatusDialog {
                         name: root.displayName
                         usesDefaultName: root.usesDefaultName
                         image: root.largeImage
-                        userColor: Utils.colorForColorId(root.colorId)
+                        userColor: Utils.colorForColorId(Theme.palette, root.colorId)
 
                         interactive: false
                         imageWidth: 78
diff --git a/ui/imports/utils/Constants.qml b/ui/imports/utils/Constants.qml
index 7ca056a558d..e92f7b8d081 100644
--- a/ui/imports/utils/Constants.qml
+++ b/ui/imports/utils/Constants.qml
@@ -6,6 +6,7 @@ import StatusQ.Core.Theme
 import StatusQ.Controls.Validators
 
 QtObject {
+    id: root
 
     readonly property QtObject appState: QtObject {
         readonly property int startup: 0
@@ -402,22 +403,8 @@ QtObject {
     }
 
     readonly property QtObject onboarding: QtObject {
-        readonly property int loginHeight: 370
-        readonly property int logoImageWidth: 128
-        readonly property int logoImageHeight: 128
-        readonly property int biometricsImageWidth: 188
-        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 fontSize3: Theme.primaryTextFontSize
-        readonly property int fontSize4: Theme.tertiaryTextFontSize
-        readonly property int loginInfoHeight1: 24
-        readonly property int loginInfoHeight2: 44
-        readonly property int loginInfoHeight3: 66
-        readonly property int radius: 8
         readonly property int defaultPinAttempts: 3
         readonly property int defaultPukAttempts: 5
     }
@@ -555,17 +542,17 @@ 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 subHeaderFontSize: Theme.primaryTextFontSize
-        readonly property int importantInfoFontSize: Theme.fontSize18
-        readonly property int infoFontSize: Theme.primaryTextFontSize
+        readonly property int mainHeaderFontSize: root.Theme.fontSize(28) // Keep as is - special case for main header
+        readonly property int subHeaderFontSize: root.Theme.primaryTextFontSize
+        readonly property int importantInfoFontSize: root.Theme.fontSize(18)
+        readonly property int infoFontSize: root.Theme.primaryTextFontSize
         readonly property int infoLineHeight: 22
         readonly property int infoSpacing: 5
         readonly property int itemHeight: 64
-        readonly property int leftMargin: Theme.xlPadding * 2
-        readonly property int rightMargin: Theme.xlPadding * 2
-        readonly property int topMargin: Theme.xlPadding * 2
-        readonly property int bottomMargin: Theme.xlPadding * 2
+        readonly property int leftMargin: root.Theme.xlPadding * 2
+        readonly property int rightMargin: root.Theme.xlPadding * 2
+        readonly property int topMargin: root.Theme.xlPadding * 2
+        readonly property int bottomMargin: root.Theme.xlPadding * 2
 
         readonly property QtObject notificationsBubble: QtObject {
             readonly property int previewAnonymous: 0
@@ -618,14 +605,14 @@ 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 fontSize2: Theme.primaryTextFontSize
-            readonly property int fontSize3: Theme.tertiaryTextFontSize
+            readonly property int fontSize1: root.Theme.fontSize(22)
+            readonly property int fontSize2: root.Theme.primaryTextFontSize
+            readonly property int fontSize3: root.Theme.tertiaryTextFontSize
             readonly property int seedPhraseCellWidth: 193
             readonly property int seedPhraseCellHeight: 60
             readonly property int seedPhraseCellNumberWidth: 24
-            readonly property int seedPhraseCellFontSize: Theme.tertiaryTextFontSize
-            readonly property int buttonFontSize: Theme.primaryTextFontSize
+            readonly property int seedPhraseCellFontSize: root.Theme.tertiaryTextFontSize
+            readonly property int buttonFontSize: root.Theme.primaryTextFontSize
             readonly property int pukCellWidth: 50
             readonly property int pukCellHeight: 60
             readonly property int popupWidth: 640
@@ -715,8 +702,8 @@ QtObject {
         readonly property int contentHeight2: 642
         readonly property int itemHeight: 64
         readonly property int importPrivateKeyWarningHeight: 86
-        readonly property int labelFontSize1: Theme.primaryTextFontSize
-        readonly property int labelFontSize2: Theme.additionalTextSize
+        readonly property int labelFontSize1: root.Theme.primaryTextFontSize
+        readonly property int labelFontSize2: root.Theme.additionalTextSize
         readonly property int footerButtonsHeight: 44
         readonly property int keyPairNameMaxLength: 20
         readonly property int keyPairAccountNameMinLength: 5
@@ -756,7 +743,7 @@ QtObject {
         readonly property int popupWidth: 480
         readonly property int contentHeight: 626
         readonly property int footerButtonsHeight: 44
-        readonly property int labelFontSize1: Theme.primaryTextFontSize
+        readonly property int labelFontSize1: root.Theme.primaryTextFontSize
         readonly property string instructionsLabelForQr: qsTr("How to display the QR code on your other device")
         readonly property string instructionsLabelForEncryptedKey: qsTr("How to copy the encrypted key from your other device")
 
@@ -1023,7 +1010,7 @@ QtObject {
 
     readonly property string dataImagePrefix: "data:image"
 
-    readonly property string mentionSpanTag: `<span style="background-color: ${Theme.palette.mentionColor2};"><a style="color:${Theme.palette.mentionColor1};text-decoration:none" href='http://'>`
+    readonly property string mentionSpanTag: `<span style="background-color: ${root.Theme.palette.mentionColor2};"><a style="color:${root.Theme.palette.mentionColor1};text-decoration:none" href='http://'>`
 
     readonly property string ens_taken: "taken"
     readonly property string ens_taken_custom: "taken-custom"
@@ -1337,10 +1324,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 +1337,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 +1510,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..7b9582c10b6 100644
--- a/ui/imports/utils/Utils.qml
+++ b/ui/imports/utils/Utils.qml
@@ -78,7 +78,7 @@ QtObject {
                 `<a href="${link}">${link}</a>`
     }
 
-    function getStyledLink(linkText, linkUrl, hoveredLink, textColor = Theme.palette.directColor1, linkColor = Theme.palette.primaryColor1, underlineLink = true) {
+    function getStyledLink(linkText, linkUrl, hoveredLink, textColor, linkColor, underlineLink = true) {
         return `<style type="text/css">` +
                 `a {` +
                 `color: ${textColor};` +
@@ -350,12 +350,12 @@ QtObject {
 
     /* Validation section end */
 
-    function colorForColorId(colorId)  {
-        if (colorId < 0 || colorId >= Theme.palette.userCustomizationColors.length) {
+    function colorForColorId(palette, colorId)  {
+        if (colorId < 0 || colorId >= palette.userCustomizationColors.length) {
             console.warn("Utils.colorForColorId : colorId is out of bounds")
-            return StatusColors.colors['blue']
+            return StatusColors.blue
         }
-        return Theme.palette.userCustomizationColors[colorId]
+        return palette.userCustomizationColors[colorId]
     }
 
     function getChatKeyFromShareLink(link) {
@@ -489,137 +489,137 @@ QtObject {
         return text
     }
 
-    function getHoveredColor(colorId) {
+    function getHoveredColor(palette, colorId) {
         switch(colorId.toString().toUpperCase()) {
         case Constants.walletAccountColors.primary.toUpperCase():
-            return Theme.palette.customisationColors.blue
+            return palette.customisationColors.blue
         case Constants.walletAccountColors.purple.toUpperCase():
-            return Theme.palette.customisationColors.purple
+            return palette.customisationColors.purple
         case Constants.walletAccountColors.orange.toUpperCase():
-            return Theme.palette.customisationColors.orange
+            return palette.customisationColors.orange
         case Constants.walletAccountColors.army.toUpperCase():
-            return Theme.palette.customisationColors.army
+            return palette.customisationColors.army
         case Constants.walletAccountColors.turquoise.toUpperCase():
-            return Theme.palette.customisationColors.turquoise
+            return palette.customisationColors.turquoise
         case Constants.walletAccountColors.sky.toUpperCase():
-            return Theme.palette.customisationColors.sky
+            return palette.customisationColors.sky
         case Constants.walletAccountColors.yellow.toUpperCase():
-            return Theme.palette.customisationColors.yellow
+            return palette.customisationColors.yellow
         case Constants.walletAccountColors.pink.toUpperCase():
-            return Theme.palette.customisationColors.pink
+            return palette.customisationColors.pink
         case Constants.walletAccountColors.copper.toUpperCase():
-            return Theme.palette.customisationColors.copper
+            return palette.customisationColors.copper
         case Constants.walletAccountColors.camel.toUpperCase():
-            return Theme.palette.customisationColors.camel
+            return palette.customisationColors.camel
         case Constants.walletAccountColors.magenta.toUpperCase():
-            return Theme.palette.customisationColors.magenta
+            return 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 palette.name === Constants.lightThemeName ? StatusColors.blackHovered: StatusColors.grey4 // FIXME introduce symbolic color names
         case Constants.walletAccountColors.undefinedAccount.toUpperCase():
-            return Theme.palette.baseColor1
+            return palette.baseColor1
         default:
-            return getColorForId(colorId)
+            return getColorForId(palette, colorId)
         }
     }
 
-    function getIdForColor(color){
+    function getIdForColor(palette, color){
         let c = color.toString().toUpperCase()
         switch(c) {
-        case Theme.palette.customisationColors.blue.toString().toUpperCase():
+        case palette.customisationColors.blue.toString().toUpperCase():
             return Constants.walletAccountColors.primary
-        case Theme.palette.customisationColors.purple.toString().toUpperCase():
+        case palette.customisationColors.purple.toString().toUpperCase():
             return Constants.walletAccountColors.purple
-        case Theme.palette.customisationColors.orange.toString().toUpperCase():
+        case palette.customisationColors.orange.toString().toUpperCase():
             return Constants.walletAccountColors.orange
-        case Theme.palette.customisationColors.army.toString().toUpperCase():
+        case palette.customisationColors.army.toString().toUpperCase():
             return Constants.walletAccountColors.army
-        case Theme.palette.customisationColors.turquoise.toString().toUpperCase():
+        case palette.customisationColors.turquoise.toString().toUpperCase():
             return Constants.walletAccountColors.turquoise
-        case Theme.palette.customisationColors.sky.toString().toUpperCase():
+        case palette.customisationColors.sky.toString().toUpperCase():
             return Constants.walletAccountColors.sky
-        case Theme.palette.customisationColors.yellow.toString().toUpperCase():
+        case palette.customisationColors.yellow.toString().toUpperCase():
             return Constants.walletAccountColors.yellow
-        case Theme.palette.customisationColors.pink.toString().toUpperCase():
+        case palette.customisationColors.pink.toString().toUpperCase():
             return Constants.walletAccountColors.pink
-        case Theme.palette.customisationColors.copper.toString().toUpperCase():
+        case palette.customisationColors.copper.toString().toUpperCase():
             return Constants.walletAccountColors.copper
-        case Theme.palette.customisationColors.camel.toString().toUpperCase():
+        case palette.customisationColors.camel.toString().toUpperCase():
             return Constants.walletAccountColors.camel
-        case Theme.palette.customisationColors.magenta.toString().toUpperCase():
+        case palette.customisationColors.magenta.toString().toUpperCase():
             return Constants.walletAccountColors.magenta
-        case Theme.palette.customisationColors.yinYang.toString().toUpperCase():
+        case palette.customisationColors.yinYang.toString().toUpperCase():
             return Constants.walletAccountColors.yinYang
-        case Theme.palette.baseColor1.toString().toUpperCase():
+        case palette.baseColor1.toString().toUpperCase():
             return Constants.walletAccountColors.undefinedAccount
         default:
             return Constants.walletAccountColors.primary
         }
     }
 
-    function getColorForId(colorId) {
+    function getColorForId(palette, colorId) {
         if(colorId) {
             switch(colorId.toUpperCase()) {
             case Constants.walletAccountColors.primary.toUpperCase():
-                return Theme.palette.customisationColors.blue
+                return palette.customisationColors.blue
             case Constants.walletAccountColors.purple.toUpperCase():
-                return Theme.palette.customisationColors.purple
+                return palette.customisationColors.purple
             case Constants.walletAccountColors.orange.toUpperCase():
-                return Theme.palette.customisationColors.orange
+                return palette.customisationColors.orange
             case  Constants.walletAccountColors.army.toUpperCase():
-                return Theme.palette.customisationColors.army
+                return palette.customisationColors.army
             case  Constants.walletAccountColors.turquoise.toUpperCase():
-                return Theme.palette.customisationColors.turquoise
+                return palette.customisationColors.turquoise
             case  Constants.walletAccountColors.sky.toUpperCase():
-                return Theme.palette.customisationColors.sky
+                return palette.customisationColors.sky
             case  Constants.walletAccountColors.yellow.toUpperCase():
-                return Theme.palette.customisationColors.yellow
+                return palette.customisationColors.yellow
             case  Constants.walletAccountColors.pink.toUpperCase():
-                return Theme.palette.customisationColors.pink
+                return palette.customisationColors.pink
             case  Constants.walletAccountColors.copper.toUpperCase():
-                return Theme.palette.customisationColors.copper
+                return palette.customisationColors.copper
             case  Constants.walletAccountColors.camel.toUpperCase():
-                return Theme.palette.customisationColors.camel
+                return palette.customisationColors.camel
             case  Constants.walletAccountColors.magenta.toUpperCase():
-                return Theme.palette.customisationColors.magenta
+                return palette.customisationColors.magenta
             case  Constants.walletAccountColors.yinYang.toUpperCase():
-                return Theme.palette.customisationColors.yinYang
+                return palette.customisationColors.yinYang
             case  Constants.walletAccountColors.undefinedAccount.toUpperCase():
-                return Theme.palette.baseColor1
+                return palette.baseColor1
             }
         }
-        return Theme.palette.customisationColors.blue
+        return palette.customisationColors.blue
     }
 
-    function getColorIndexForId(colorId) {
+    function getColorIndexForId(palette, colorId) {
         let color = getColorForId(colorId)
-        for (let i = 0; i < Theme.palette.customisationColorsArray.length; i++) {
-            if(Theme.palette.customisationColorsArray[i] === color) {
+        for (let i = 0; i < palette.customisationColorsArray.length; i++) {
+            if(palette.customisationColorsArray[i] === color) {
                 return i
             }
         }
         return 0
     }
 
-    function getContrastingColor(color) {
+    function getContrastingColor(palette, color) {
         const hexcolor = color.toString()
         const r = parseInt(hexcolor.substring(1,3), 16);
         const g = parseInt(hexcolor.substring(3,5), 16);
         const b = parseInt(hexcolor.substring(5,7), 16);
         const yiq = ((r*299)+(g*587)+(b*114))/1000;
-        return (yiq >= 128) ? Theme.palette.black : Theme.palette.white;
+        return (yiq >= 128) ? palette.black : palette.white;
     }
 
     function getPathForDisplay(path) {
         return path.split("/").join(" / ")
     }
 
-    function getKeypairLocationColor(keypair) {
+    function getKeypairLocationColor(palette, keypair) {
         return !keypair ||
                 keypair.migratedToKeycard ||
                 keypair.operability === Constants.keypair.operability.fullyOperable ||
                 keypair.operability === Constants.keypair.operability.partiallyOperable?
-                    Theme.palette.baseColor1 :
-                    Theme.palette.warningColor1
+                    palette.baseColor1 :
+                    palette.warningColor1
     }
 
     function getExplorerDomain(networkShortName, testnetMode) {
@@ -1012,9 +1012,9 @@ QtObject {
         return globalUtilsInst.getColorId(publicKey)
     }
 
-    function colorForPubkey(publicKey) {
+    function colorForPubkey(palette, publicKey) {
         const pubKeyColorId = colorIdForPubkey(publicKey)
-        return colorForColorId(pubKeyColorId)
+        return colorForColorId(palette, pubKeyColorId)
     }
 
     function getCommunityShareLink(communityId) {
diff --git a/ui/main.qml b/ui/main.qml
index 6e159a44934..756a8912134 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 {
@@ -684,4 +687,27 @@ Window {
     MobileUI {
         id: mobileUI
     }
+
+    // Right now Constants holds not only true constant values but also expressions
+    // depending on dynamic theme system. In order to keep those expressions working
+    // as expected, explicit propagation of style must be established. This is workaround
+    // that should be fixed in the future by removing dependency on Theme attached
+    // property from Constants.
+    Binding {
+        target: Constants
+        property: "Theme.style"
+        value: applicationWindow.Theme.style
+    }
+
+    Binding {
+        target: Constants
+        property: "Theme.padding"
+        value: applicationWindow.Theme.padding
+    }
+
+    Binding {
+        target: Constants
+        property: "Theme.fontSizeOffset"
+        value: applicationWindow.Theme.fontSizeOffset
+    }
 }