diff --git a/src/css/ext6-pmx.css b/src/css/ext6-pmx.css
index e2c30c9..64b815f 100644
--- a/src/css/ext6-pmx.css
+++ b/src/css/ext6-pmx.css
@@ -121,7 +121,6 @@
     float: left;
     margin-right: 5px;
     font-size: 1.3em;
-    color: #FF6C59;
 }
 
 /* reduce chart legend space usage to something more sane */
diff --git a/src/panel/EOLNotice.js b/src/panel/EOLNotice.js
index 43119d1..a514d1d 100644
--- a/src/panel/EOLNotice.js
+++ b/src/panel/EOLNotice.js
@@ -18,14 +18,25 @@ Ext.define('Proxmox.EOLNotice', {
 	'data-qtip': gettext("You won't get any security fixes after the End-Of-Life date. Please consider upgrading."),
     },
 
+    getIconCls: function() {
+	let me = this;
+
+	const now = new Date();
+	const eolDate = new Date(me.eolDate);
+	const warningCutoff = new Date(eolDate.getTime() - (21 * 24 * 60 * 60 * 1000)); // 3 weeks
+
+	return now > warningCutoff ? 'critical fa-exclamation-triangle' : 'info-blue fa-info-circle';
+    },
+
     initComponent: function() {
 	let me = this;
 
+	let iconCls = me.getIconCls();
 	let href = me.href.startsWith('http') ? me.href : `https://${me.href}`;
 	let message = Ext.String.format(
 	    gettext('Support for {0} {1} ends on {2}'), me.product, me.version, me.eolDate);
 
-	me.html = `<i class="fa fa-exclamation-triangle"></i>
+	me.html = `<i class="fa ${iconCls}"></i>
 	    <a href="${href}" target="_blank">${message} <i class="fa fa-external-link"></i></a>
 	`;