diff --git a/config/ags/js/bar/notif-button.js b/config/ags/js/bar/notif-button.js
index 8f15fac..e2e24c6 100644
--- a/config/ags/js/bar/notif-button.js
+++ b/config/ags/js/bar/notif-button.js
@@ -1,46 +1,51 @@
-const { Box, Label } = ags.Widget;
-const { subprocess } = ags.Utils;
-const deflisten = subprocess;
+const { Box, Label, Icon } = ags.Widget;
+const { openWindow, closeWindow } = ags.App;
+const { Notifications } = ags.Service;
 
-import { EventBox } from '../common.js';
+import { EventBox, Separator } from '../common.js';
+
+var notifButtonState = false;
 
-deflisten(
-  ['bash', '-c', '$AGS_PATH/notif.sh icon'],
-  (output) => {
-    NotifButton.child.children[0].label = '     ' + output;
-  },
-);
-deflisten(
-  ['bash', '-c', '$AGS_PATH/notif-toggle.sh state'],
-  (output) => {
-    print(output)
-    if (output == 'On') {
-      NotifButton.toggleClassName('toggle-on', false);
-    } else {
-      NotifButton.toggleClassName('toggle-on', true);
-    }
-  },
-);
 export const NotifButton = EventBox({
   className: 'toggle-off',
-  onPrimaryClickRelease: function() {
-    subprocess(
-      ['bash', '-c', '$AGS_PATH/notif-toggle.sh toggle'],
-      (output) => {
-        print(output)
-        if (output == 'On') {
-          NotifButton.toggleClassName('toggle-on', true);
-        } else {
-          NotifButton.toggleClassName('toggle-on', false);
-        }
-      },
-    );
+  onPrimaryClickRelease: () => {
+    if (notifButtonState) {
+      NotifButton.toggleClassName('toggle-on', false);
+      closeWindow('notification-center');
+      notifButtonState = false;
+    }
+    else {
+      NotifButton.toggleClassName('toggle-on', true);
+      openWindow('notification-center');
+      notifButtonState = true;
+    }
   },
   child: Box({
     className: 'notif-panel',
     vertical: false,
-    child: Label({
-      label: "",
-    }),
+    children: [
+      Separator(28),
+
+      Icon({
+        connections: [
+          [Notifications, icon => {
+            icon.icon = Notifications.dnd
+                        ? 'notifications-disabled-symbolic'
+                        : 'preferences-system-notifications-symbolic';
+          }],
+        ],
+      }),
+
+      Separator(8),
+
+      Label({
+        connections: [
+          [Notifications, label => {
+            label.label = String(Notifications.notifications.length);
+          }],
+        ],  
+      }),
+
+    ],
   }),
 });