diff --git a/public/css/admin.css b/public/css/admin.css
index 040d3ff..7b37e20 100644
--- a/public/css/admin.css
+++ b/public/css/admin.css
@@ -152,9 +152,9 @@
 
 #opendxp_avatar img {
     position: absolute;
-    left: 12px;
-    bottom: 50px;
-    width:36px;
+    left: 14px;
+    bottom: 54px;
+    width: 32px;
     border-radius: 18px;
     cursor: pointer;
 }
@@ -2328,27 +2328,34 @@ ul.leaflet-draw-actions.leaflet-draw-actions-top.leaflet-draw-actions-bottom li:
     display: none;
 }
 
-#opendxp_notification > img {
+#opendxp_notification > span.notification-icon {
     position: absolute;
-    width: 24px;
-    height: 24px;
-    top: 11px;
-    left: 18px;
+    width: 60px;
+    height: 48px;
+    top: 0;
+    left: 0;
+    background-color: var(--color-neutral-a);
+    mask: url(/bundles/opendxpadmin/img/material-icons/outline-sms-24px.svg) no-repeat center / 24px 24px;
+    -webkit-mask: url(/bundles/opendxpadmin/img/material-icons/outline-sms-24px.svg) no-repeat center / 24px 24px;
 }
 
 #notification_value {
     background-color: var(--color-neutral-a);
-    border-radius: 9px;
+    border-radius: 100px;
     color: var(--color-white);
     font-size: 10px;
-    line-height: 1.3;
-    min-height: 12px;
-    padding: 4px 4px;
+    font-weight: 600;
+    line-height: 1;
+    min-width: 18px;
+    min-height: 18px;
+    padding: 4px 5px;
     background-clip: padding-box;
-    display: block;
+    display: flex;
+    align-items: center;
+    justify-content: center;
     position: absolute;
-    right: 12px;
-    top: 12px;
+    right: 9px;
+    top: 6px;
 }
 
 /** END notifications **/
diff --git a/public/img/avatar.png b/public/img/avatar.png
index 8bdb7de..0a0fdbb 100644
Binary files a/public/img/avatar.png and b/public/img/avatar.png differ
diff --git a/templates/admin/index/index.html.twig b/templates/admin/index/index.html.twig
index 1e9f3e1..e9c3140 100644
--- a/templates/admin/index/index.html.twig
+++ b/templates/admin/index/index.html.twig
@@ -125,7 +125,7 @@
 
     {% block notification %}
         <div id="opendxp_notification" data-menu-tooltip="{{ "notifications"|trans([],'admin') }}" class="opendxp_icon_comments">
-            <img src="/bundles/opendxpadmin/img/material-icons/outline-sms-24px.svg">
+            <span class="notification-icon"></span>
             <span id="notification_value" style="display:none;"></span>
         </div>
     {% endblock %}
diff --git a/templates/admin/login/layout.html.twig b/templates/admin/login/layout.html.twig
index 208b712..4706ae8 100644
--- a/templates/admin/login/layout.html.twig
+++ b/templates/admin/login/layout.html.twig
@@ -26,6 +26,7 @@
         <style>
             #content button {
                 background: {{ customColor }};
+                color: var(--color-white);
             }
 
             #content a {
diff --git a/templates/admin/misc/admin_css.html.twig b/templates/admin/misc/admin_css.html.twig
index 125608a..b5bbbb2 100644
--- a/templates/admin/misc/admin_css.html.twig
+++ b/templates/admin/misc/admin_css.html.twig
@@ -42,15 +42,30 @@
     {% endfor %}
 {% endif %}
 
-{# CUSTOM BRANDING #}
+{# custom branding #}
 {% if adminSettings is defined and adminSettings['branding']['color_admin_interface'] is defined %}
-    {% set interfaceColor = adminSettings['branding']['color_admin_interface'] %}
+{% set interfaceColor = adminSettings['branding']['color_admin_interface'] %}
+{% if interfaceColor is not empty %}
 #opendxp_avatar {
     background-color: {{ interfaceColor }} !important;
 }
 
+#opendxp_notification {
+    background-color: {{ interfaceColor }} !important;
+}
+
+#opendxp_notification > span.notification-icon {
+    background: var(--color-white) !important;
+}
+
+#opendxp_signet {
+    background-color: {{ interfaceColor }} !important;
+    background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI1MTIiIGhlaWdodD0iNTEyIiB2aWV3Qm94PSIwIDAgNTEyIDUxMiI+PGNpcmNsZSBjeD0iMjU2IiBjeT0iMjU2IiByPSIxMjAiIGZpbGw9IiNFNkZGMkEiIHN0cm9rZT0iIzAwMDAwMCIgc3Ryb2tlLXdpZHRoPSIyNCIvPjwvc3ZnPg==) !important;
+}
+
 #opendxp_navigation li:hover:after {
     background-color: {{ interfaceColor }} !important;
 }
 {% endif %}
+{% endif %}