diff --git a/css/mail.scss b/css/mail.scss
index 17e394cbb..226065afe 100755
--- a/css/mail.scss
+++ b/css/mail.scss
@@ -349,7 +349,7 @@
 				&,
 				> a {
 					opacity: 1;
-					box-shadow: inset 2px 0 var(--color-primary);
+					box-shadow: inset 2px 0 var(--color-primary-element);
 				}
 			}
 
diff --git a/src/components/AppSettingsMenu.vue b/src/components/AppSettingsMenu.vue
index a5b83f9df..4029afa5c 100644
--- a/src/components/AppSettingsMenu.vue
+++ b/src/components/AppSettingsMenu.vue
@@ -277,7 +277,7 @@ p.app-settings {
 	margin-top: 6px;
 }
 .app-settings-button.button.primary.new-button {
-	color: var(--color-primary-text);
+	color: var(--color-primary-element-text);
 	//this style will be removed after we migrate also the  'add mail account' to material design
 	padding-left: 34px;
 	gap: 4px;
diff --git a/src/components/MailboxInlinePicker.vue b/src/components/MailboxInlinePicker.vue
index 904d422fe..3fd355a30 100644
--- a/src/components/MailboxInlinePicker.vue
+++ b/src/components/MailboxInlinePicker.vue
@@ -90,7 +90,7 @@ input.vue-treeselect__input {
 	background: var(--color-main-background);
 }
 .vue-treeselect--single .vue-treeselect__option--selected {
-	background: var(--color-primary-light);
+	background: var(--color-primary-element-light);
 	border-radius: var(--border-radius-large);
 }
 .vue-treeselect__option.vue-treeselect__option--highlight,
diff --git a/src/components/ThreadEnvelope.vue b/src/components/ThreadEnvelope.vue
index f99131ffb..070f0a8c3 100644
--- a/src/components/ThreadEnvelope.vue
+++ b/src/components/ThreadEnvelope.vue
@@ -719,7 +719,7 @@ export default {
 			display: none;
 
 			&.primary {
-				background-color: var(--color-primary);
+				background-color: var(--color-primary-element);
 				opacity: 1;
 				margin-bottom: 0;