diff --git a/frappe/public/images/ui-states/event-empty-state.svg b/frappe/public/images/ui-states/event-empty-state.svg
new file mode 100644
index 0000000000..18ac2100fe
--- /dev/null
+++ b/frappe/public/images/ui-states/event-empty-state.svg
@@ -0,0 +1,9 @@
+<svg width="73" height="71" viewBox="0 0 73 71" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M16 7V1" stroke="#74808B" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M54 7V1" stroke="#74808B" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M1 18.8C1 16.5433 1.00078 14.9109 1.10567 13.627C1.20961 12.3549 1.41078 11.5132 1.76295 10.8221C2.43407 9.50493 3.50493 8.43407 4.82207 7.76295C5.51325 7.41078 6.35487 7.20961 7.62705 7.10567C8.9109 7.00078 10.5433 7 12.8 7H53.2C55.4567 7 57.0891 7.00078 58.3729 7.10567C59.6451 7.20961 60.4868 7.41078 61.1779 7.76295C62.4951 8.43407 63.5659 9.50493 64.237 10.8221C64.5892 11.5132 64.7904 12.3549 64.8943 13.627C64.9992 14.9109 65 16.5433 65 18.8V51.2C65 53.4567 64.9992 55.0891 64.8943 56.373C64.7904 57.6451 64.5892 58.4868 64.237 59.1779C63.5659 60.4951 62.4951 61.5659 61.1779 62.237C60.4868 62.5892 59.6451 62.7904 58.3729 62.8943C57.0891 62.9992 55.4567 63 53.2 63H12.8C10.5433 63 8.9109 62.9992 7.62705 62.8943C6.35487 62.7904 5.51325 62.5892 4.82207 62.237C3.50493 61.5659 2.43407 60.4951 1.76295 59.1779C1.41078 58.4868 1.20961 57.6451 1.10567 56.373C1.00078 55.0891 1 53.4567 1 51.2V18.8Z" stroke="#74808B" stroke-width="2"/>
+<path d="M54 18H12" stroke="#74808B" stroke-width="2" stroke-linecap="round"/>
+<circle cx="49" cy="47" r="2" fill="#74808B"/>
+<circle cx="57" cy="55" r="15" fill="white" stroke="#74808B" stroke-width="2"/>
+<path d="M56.5522 48.9012C56.7361 48.5312 57.2639 48.5312 57.4478 48.9012L58.9493 51.9232C59.0221 52.0698 59.162 52.1714 59.3238 52.1954L62.6619 52.6895C63.0706 52.75 63.2338 53.252 62.9387 53.5412L60.5285 55.9031C60.4117 56.0176 60.3582 56.1821 60.3855 56.3434L60.947 59.6708C61.0158 60.0782 60.5887 60.3885 60.2225 60.1972L57.2315 58.6349C57.0865 58.5592 56.9135 58.5592 56.7685 58.6349L53.7775 60.1972C53.4113 60.3885 52.9842 60.0782 53.053 59.6708L53.6145 56.3434C53.6418 56.1821 53.5883 56.0176 53.4715 55.9031L51.0613 53.5412C50.7662 53.252 50.9294 52.75 51.3381 52.6895L54.6762 52.1954C54.838 52.1714 54.9779 52.0698 55.0507 51.9232L56.5522 48.9012Z" stroke="#2D95F0" stroke-width="2"/>
+</svg>
diff --git a/frappe/public/images/ui-states/notification-empty-state.svg b/frappe/public/images/ui-states/notification-empty-state.svg
new file mode 100644
index 0000000000..498636be21
--- /dev/null
+++ b/frappe/public/images/ui-states/notification-empty-state.svg
@@ -0,0 +1,9 @@
+<svg width="72" height="70" viewBox="0 0 72 70" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M1 36C1 27.1634 8.16344 20 17 20H60C66.0751 20 71 24.9249 71 31V55C71 56.1046 70.1046 57 69 57H3C1.89543 57 1 56.1046 1 55V36Z" stroke="#74808B" stroke-width="2"/>
+<path d="M1 36C1 27.1634 8.16344 20 17 20V20C25.8366 20 33 27.1634 33 36V57H1.72549C1.32481 57 1 56.6752 1 56.2745V36Z" stroke="#74808B" stroke-width="2"/>
+<path d="M10 34H22" stroke="#2D95F0" stroke-width="2" stroke-linecap="round"/>
+<path opacity="0.5" d="M10 38H17" stroke="#2D95F0" stroke-width="2" stroke-linecap="round"/>
+<path d="M37 57H29V67C29 68.1046 29.8954 69 31 69H35C36.1046 69 37 68.1046 37 67V57Z" stroke="#74808B" stroke-width="2"/>
+<path d="M46 11.4956H59.9942V1H50.3732C47.9679 1 46 2.96793 46 5.37318V31" stroke="#74808B" stroke-width="2" stroke-miterlimit="10"/>
+<circle cx="46" cy="33" r="3" stroke="#74808B" stroke-width="2"/>
+</svg>
diff --git a/frappe/public/js/frappe/ui/notifications/notifications.js b/frappe/public/js/frappe/ui/notifications/notifications.js
index 5abd36b15a..9e71a16274 100644
--- a/frappe/public/js/frappe/ui/notifications/notifications.js
+++ b/frappe/public/js/frappe/ui/notifications/notifications.js
@@ -457,9 +457,12 @@ class EventsView extends BaseNotificaitonsView {
 			};
 			html = event_list.map(get_event_html).join('');
 		} else {
-			html = `<li class="recent-item text-center">
-					<span class="text-muted">${__('No Events Today')}</span>
-				</li>`;
+			html = `
+				<div class="empty-state center-content">
+					<img src="/assets/frappe/images/ui-states/event-empty-state.svg"></img>
+					${__('No Events Today')}
+				</div>
+			`;
 		}
 
 		this.container.html(html);