diff --git a/CHANGELOG.md b/CHANGELOG.md
index 68624ae43..04532e7b3 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -5,6 +5,16 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## Unreleased
+
+### Changed
+
+- Upgraded `angular-material-css-vars` from version `2.0.0` to `2.1.0`
+
+### Fixed
+
+- Fixed the warn color (button) of the theme
+
 ## 1.25.0 - 11.07.2021
 
 ### Added
diff --git a/apps/client/src/app/app.component.ts b/apps/client/src/app/app.component.ts
index 33b276a90..db0f0b869 100644
--- a/apps/client/src/app/app.component.ts
+++ b/apps/client/src/app/app.component.ts
@@ -6,7 +6,11 @@ import {
   OnInit
 } from '@angular/core';
 import { NavigationEnd, PRIMARY_OUTLET, Router } from '@angular/router';
-import { primaryColorHex, secondaryColorHex } from '@ghostfolio/common/config';
+import {
+  primaryColorHex,
+  secondaryColorHex,
+  warnColorHex
+} from '@ghostfolio/common/config';
 import { InfoItem, User } from '@ghostfolio/common/interfaces';
 import { hasPermission, permissions } from '@ghostfolio/common/permissions';
 import { MaterialCssVarsService } from 'angular-material-css-vars';
@@ -109,5 +113,6 @@ export class AppComponent implements OnDestroy, OnInit {
 
     this.materialCssVarsService.setPrimaryColor(primaryColorHex);
     this.materialCssVarsService.setAccentColor(secondaryColorHex);
+    this.materialCssVarsService.setWarnColor(warnColorHex);
   }
 }
diff --git a/libs/common/src/lib/config.ts b/libs/common/src/lib/config.ts
index c767b08cf..80269de77 100644
--- a/libs/common/src/lib/config.ts
+++ b/libs/common/src/lib/config.ts
@@ -33,6 +33,13 @@ export const secondaryColorRgb = {
   b: 207
 };
 
+export const warnColorHex = '#dc3545';
+export const warnColorRgb = {
+  r: 220,
+  g: 53,
+  b: 69
+};
+
 export const DEFAULT_DATE_FORMAT = 'dd.MM.yyyy';
 export const DEFAULT_DATE_FORMAT_MONTH_YEAR = 'MMM yyyy';
 
diff --git a/package.json b/package.json
index db29147c5..3b5558ff4 100644
--- a/package.json
+++ b/package.json
@@ -71,7 +71,7 @@
     "@simplewebauthn/typescript-types": "3.0.0",
     "@stripe/stripe-js": "1.15.0",
     "alphavantage": "2.2.0",
-    "angular-material-css-vars": "2.0.0",
+    "angular-material-css-vars": "2.1.0",
     "bent": "7.3.12",
     "bootstrap": "4.6.0",
     "cache-manager": "3.4.3",
diff --git a/yarn.lock b/yarn.lock
index 8f9c98499..cf58770a9 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3427,10 +3427,10 @@ alphavantage@2.2.0:
   dependencies:
     cross-fetch "^3.0.5"
 
-angular-material-css-vars@2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/angular-material-css-vars/-/angular-material-css-vars-2.0.0.tgz#a7df8380e8f781c31eeea7171b1cbd5bb91b8e4e"
-  integrity sha512-20zCLolohn0ihGsK0+WgEN370jk9NabOQcUBEt7se9DtKzIVhXyvCRDkkQBVxwdP6kw9+J+oA3pZ6szJka4yXw==
+angular-material-css-vars@2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/angular-material-css-vars/-/angular-material-css-vars-2.1.0.tgz#43eac3bb3e74f509914c69106a194e3eab3f02f9"
+  integrity sha512-lFVzWOm8sVprhKobvEy+53VkulCAYTC1evv7EjBCpshm964voeYJ6k2Aqq0yZFNKMaQeGpMvwXSEZVvOyBzvTQ==
   dependencies:
     "@ctrl/tinycolor" "^2.6.0"
     tslib "^2.0.0"