diff --git a/public/css/admin.css b/public/css/admin.css
index 040d3ff..3eab1a6 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;
 }
@@ -192,10 +192,10 @@
     font-size: 0;
     cursor: pointer;
     background-color: var(--color-primary-a);
-    background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTEyIiBoZWlnaHQ9IjUxMiIgdmlld0JveD0iMCAwIDUxMiA1MTIiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxyZWN0IHdpZHRoPSI1MTIiIGhlaWdodD0iNTEyIiBmaWxsPSIjRTZGRjJBIi8+CjxjaXJjbGUgY3g9IjI1NiIgY3k9IjI1NiIgcj0iMTI1IiBmaWxsPSIjMTAxMDExIi8+Cjwvc3ZnPg==);
+    background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgdmlld0JveD0iMCAwIDMwIDMwIj4KICA8cG9seWdvbiBzdHlsZT0iZmlsbDogbm9uZTsgc3Ryb2tlOiAjMDAwOyBzdHJva2Utd2lkdGg6IDJweDsgc3Ryb2tlLW1pdGVybGltaXQ6IDEwOyIgcG9pbnRzPSIyNS42IDIxLjEyIDI1LjYgOC44OCAxNSAyLjc2IDQuNCA4Ljg4IDQuNCAyMS4xMiAxNSAyNy4yNCAyNS42IDIxLjEyIi8+CiAgPHBvbHlnb24gc3R5bGU9InN0cm9rZS1saW5lam9pbjogcm91bmQ7IGZpbGw6IG5vbmU7IHN0cm9rZTogIzAwMDsgc3Ryb2tlLXdpZHRoOiAycHg7IiBwb2ludHM9IjE1IDI3LjI0IDQuNCA4Ljg4IDI1LjYgOC44OCAxNSAyNy4yNCIvPgo8L3N2Zz4=);
     background-repeat: no-repeat;
-    background-size: 40px 40px;
-    background-position: 10px 4px;
+    background-size: 30px 30px;
+    background-position: 15px 10px;
 }
 
 #opendxp_tooltip {
@@ -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..519dab9 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,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgdmlld0JveD0iMCAwIDMwIDMwIj4KICA8cG9seWdvbiBzdHlsZT0iZmlsbDogbm9uZTsgc3Ryb2tlOiAjZmZmOyBzdHJva2Utd2lkdGg6IDJweDsgc3Ryb2tlLW1pdGVybGltaXQ6IDEwOyIgcG9pbnRzPSIyNS42IDIxLjEyIDI1LjYgOC44OCAxNSAyLjc2IDQuNCA4Ljg4IDQuNCAyMS4xMiAxNSAyNy4yNCAyNS42IDIxLjEyIi8+CiAgPHBvbHlnb24gc3R5bGU9InN0cm9rZS1saW5lam9pbjogcm91bmQ7IGZpbGw6IG5vbmU7IHN0cm9rZTogI2ZmZjsgc3Ryb2tlLXdpZHRoOiAycHg7IiBwb2ludHM9IjE1IDI3LjI0IDQuNCA4Ljg4IDI1LjYgOC44OCAxNSAyNy4yNCIvPgo8L3N2Zz4=) !important;
+}
+
 #opendxp_navigation li:hover:after {
     background-color: {{ interfaceColor }} !important;
 }
 {% endif %}
+{% endif %}