diff --git a/config/ags/config.js b/config/ags/config.js
index 5396a812..1f6040e5 100644
--- a/config/ags/config.js
+++ b/config/ags/config.js
@@ -14,12 +14,12 @@ exec(`sassc ${scss} ${css}`);
 exec(`bash -c "$AGS_PATH/startup.sh"`);
 
 export default {
-    style: css,
-    windows: [
-      Powermenu,
-      Bar,
-      Closer,
-      NotificationCenter,
-      NotificationsPopupList,
-    ]
-}
+  style: css,
+  windows: [
+    Powermenu,
+    Bar,
+    Closer,
+    NotificationCenter,
+    NotificationsPopupList,
+  ],
+};
diff --git a/config/ags/js/notifications/center.js b/config/ags/js/notifications/center.js
index 377c6c5d..7e3e6318 100644
--- a/config/ags/js/notifications/center.js
+++ b/config/ags/js/notifications/center.js
@@ -3,61 +3,62 @@ const { Notifications } = ags.Service;
 const { Button, Label, Box, Icon, Scrollable, Window } = ags.Widget;
 
 const ClearButton = () => Button({
-    onClicked: Notifications.clear,
-    connections: [[Notifications, button => {
-        button.sensitive = Notifications.notifications.length > 0;
-    }]],
-    child: Box({
-        children: [
-            Label('Clear '),
-            Icon({
-                connections: [[Notifications, icon => {
-                    icon.icon = Notifications.notifications.length > 0
-                        ? 'user-trash-full-symbolic' : 'user-trash-symbolic';
-                }]],
-            }),
-        ],
-    }),
+  onClicked: Notifications.clear,
+  connections: [[Notifications, button => {
+    button.sensitive = Notifications.notifications.length > 0;
+  }]],
+  child: Box({
+    children: [
+      Label('Clear '),
+      Icon({
+        connections: [[Notifications, icon => {
+          icon.icon = Notifications.notifications.length > 0
+                      ? 'user-trash-full-symbolic' : 'user-trash-symbolic';
+        }]],
+      }),
+    ],
+  }),
 });
 
 const Header = () => Box({
-    className: 'header',
-    children: [
-        Label({ label: 'Notifications', hexpand: true, xalign: 0 }),
-        ClearButton(),
-    ],
+  className: 'header',
+  children: [
+    Label({ label: 'Notifications', hexpand: true, xalign: 0 }),
+    ClearButton(),
+  ],
 });
 
 const NotificationList = () => Box({
-    vertical: true,
-    vexpand: true,
-    connections: [[Notifications, box => {
-        box.children = Notifications.notifications
-            .reverse()
-            .map(n => Notification(n));
+  vertical: true,
+  vexpand: true,
+  connections: [[Notifications, box => {
+    box.children = Notifications.notifications
+      .reverse()
+      .map(n => Notification(n));
 
-        box.visible = Notifications.notifications.length > 0;
-    }]],
+    box.visible = Notifications.notifications.length > 0;
+  }]],
 });
 
 const Placeholder = () => Box({
-    className: 'placeholder',
-    vertical: true,
-    valign: 'center',
-    halign: 'center',
-    vexpand: true,
-    hexpand: true,
-    children: [
-        Icon('notifications-disabled-symbolic'),
-        Label('Your inbox is empty'),
-    ],
-    connections: [[Notifications, box => {
-        box.visible = Notifications.notifications.length === 0;
-    }]],
+  className: 'placeholder',
+  vertical: true,
+  valign: 'center',
+  halign: 'center',
+  vexpand: true,
+  hexpand: true,
+  children: [
+    Icon('notification-disabled-symbolic'),
+    Label('Your inbox is empty'),
+  ],
+  connections: [[Notifications, box => {
+    box.visible = Notifications.notifications.length === 0;
+  }]],
 });
 
 export const NotificationCenter = Window({
   name: 'notification-center',
+  popup: true,
   layer: 'overlay',
   anchor: 'top right',
   className: 'dashboard',
@@ -65,23 +66,23 @@ export const NotificationCenter = Window({
     className: 'notifications',
     vertical: true,
     children: [
-        Header(),
-        Box({
-            className: 'notification-wallpaper-box',
-            children: [Scrollable({
-                className: 'notification-list-box',
-                hscroll: 'never',
-                vscroll: 'automatic',
-                child: Box({
-                    className: 'notification-list',
-                    vertical: true,
-                    children: [
-                        NotificationList(),
-                        Placeholder(),
-                    ],
-                }),
-            })],
-        }),
+      Header(),
+      Box({
+        className: 'notification-wallpaper-box',
+        children: [Scrollable({
+          className: 'notification-list-box',
+          hscroll: 'never',
+          vscroll: 'automatic',
+          child: Box({
+            className: 'notification-list',
+            vertical: true,
+            children: [
+              NotificationList(),
+              Placeholder(),
+            ],
+          }),
+        })],
+      }),
     ],
   }),
 });
diff --git a/config/ags/js/notifications/popup.js b/config/ags/js/notifications/popup.js
index 75b69f38..a8f5f651 100644
--- a/config/ags/js/notifications/popup.js
+++ b/config/ags/js/notifications/popup.js
@@ -4,56 +4,56 @@ const { Box, Revealer, Window } = ags.Widget;
 const { timeout } = ags.Utils;
 
 const Popups = () => Box({
-    vertical: true,
-    properties: [
-        ['map', new Map()],
-        ['dismiss', (box, id, force = false) => {
-            if (!id || !box._map.has(id))
-                return;
+  vertical: true,
+  properties: [
+    ['map', new Map()],
+    ['dismiss', (box, id, force = false) => {
+      if (!id || !box._map.has(id))
+        return;
 
-            if (box._map.get(id)._hovered && !force)
-                return;
+      if (box._map.get(id)._hovered && !force)
+        return;
 
-            if (box._map.size - 1 === 0)
-                box.get_parent().reveal_child = false;
+      if (box._map.size - 1 === 0)
+        box.get_parent().reveal_child = false;
 
-            timeout(200, () => {
-                box._map.get(id)?.destroy();
-                box._map.delete(id);
-            });
-        }],
-        ['notify', (box, id) => {
-            if (!id || Notifications.dnd)
-                return;
+      timeout(200, () => {
+        box._map.get(id)?.destroy();
+        box._map.delete(id);
+      });
+    }],
+    ['notify', (box, id) => {
+      if (!id || Notifications.dnd)
+        return;
 
-            box._map.delete(id);
-            box._map.set(id, Notification(Notifications.getNotification(id)));
-            box.children = Array.from(box._map.values()).reverse();
-            timeout(10, () => {
-                box.get_parent().revealChild = true;
-            });
-        }],
-    ],
-    connections: [
-        [Notifications, (box, id) => box._notify(box, id), 'notified'],
-        [Notifications, (box, id) => box._dismiss(box, id), 'dismissed'],
-        [Notifications, (box, id) => box._dismiss(box, id, true), 'closed'],
-    ],
+      box._map.delete(id);
+      box._map.set(id, Notification(Notifications.getNotification(id)));
+      box.children = Array.from(box._map.values()).reverse();
+      timeout(10, () => {
+          box.get_parent().revealChild = true;
+      });
+    }],
+  ],
+  connections: [
+    [Notifications, (box, id) => box._notify(box, id), 'notified'],
+    [Notifications, (box, id) => box._dismiss(box, id), 'dismissed'],
+    [Notifications, (box, id) => box._dismiss(box, id, true), 'closed'],
+  ],
 });
 
-const PopupList = ({ transition = 'slide_down' } = {}) => Box({
-    className: 'notifications-popup-list',
-    style: 'padding: 1px',
-    children: [
-        Revealer({
-            transition,
-            child: Popups(),
-        }),
-    ],
+const PopupList = ({ transition = 'slide_right' } = {}) => Box({
+  className: 'notifications-popup-list',
+  style: 'padding: 1px',
+  children: [
+    Revealer({
+      transition,
+      child: Popups(),
+    }),
+  ],
 });
 
 export const NotificationsPopupList = Window({
-    name: `notifications`,
-    anchor: 'top',
-    child: PopupList(),
+  name: `notifications`,
+  anchor: 'top left',
+  child: PopupList(),
 });