diff --git a/data/interfaces/default/css/plexpy.css b/data/interfaces/default/css/plexpy.css
index 736cd592..23f6014c 100644
--- a/data/interfaces/default/css/plexpy.css
+++ b/data/interfaces/default/css/plexpy.css
@@ -2393,7 +2393,9 @@ a .home-platforms-list-cover-face:hover
 .stacked-configs > li > span > span.active {
     color: #f9be03;
 }
-.stacked-configs > li.new_notification_agent {
+.stacked-configs > li.new-notification-agent,
+.stacked-configs > li.notification-agent,
+.stacked-configs > li.add-notification-agent {
     cursor: pointer;
 }
 .accordion {
diff --git a/data/interfaces/default/notifiers_table.html b/data/interfaces/default/notifiers_table.html
index f9cdd632..ff448d7c 100644
--- a/data/interfaces/default/notifiers_table.html
+++ b/data/interfaces/default/notifiers_table.html
@@ -11,25 +11,30 @@ DOCUMENTATION :: END
 
 <ul class="stacked-configs list-unstyled">
     % for notifier in sorted(notifiers_list, key=lambda k: (k['agent_label'], k['id'])):
-    <li>
+    <li class="notification-agent" data-id="${notifier['id']}">
         <span>
             <span class="toggle-left trigger-tooltip ${'active' if notifier['active'] else ''}" data-toggle="tooltip" data-placement="top" title="Triggers ${'active' if notifier['active'] else 'inactive'}"><i class="fa fa-lg fa-bell"></i></span>
             ${notifier['agent_label']} <span class="friendly_name">(${notifier['friendly_name'] or notifier['id']})</span>
-            <a href="#" data-target="#notifier-config-modal" data-id="${notifier['id']}" class="toggle-notifier-config-modal toggle-right" data-toggle="modal"><i class="fa fa-lg fa-cog"></i></a>
+            <span class="toggle-right"><i class="fa fa-lg fa-cog"></i></span>
         </span>
     </li>
     % endfor
-    <li>
+    <li class="add-notification-agent">
         <span>
             <span class="toggle-left"><i class="fa fa-lg fa-bell"></i></span> Add a new notification agent
-            <a href="#add-notifier-modal" data-toggle="modal" class="toggle-right"><i class="fa fa-lg fa-plus"></i></a>
+            <span class="toggle-right"><i class="fa fa-lg fa-plus"></i></span>
         </span>
     </li>
 </ul>
 
 <script>
+    // Load add notification agent modal
+    $(".add-notification-agent").click(function () {
+        $("#add-notifier-modal").modal('show');
+    });
+
     // Load notification agent config modal
-    $(".toggle-notifier-config-modal").click(function () {
+    $(".notification-agent").click(function () {
         var notifier_id = $(this).data('id');
         loadNotifierConfig(notifier_id);
     });
diff --git a/data/interfaces/default/settings.html b/data/interfaces/default/settings.html
index 88365a83..29695588 100644
--- a/data/interfaces/default/settings.html
+++ b/data/interfaces/default/settings.html
@@ -1341,7 +1341,7 @@
                             <div class="col-md-12">
                                 <ul class="stacked-configs list-unstyled">
                                     % for agent in available_notification_agents:
-                                    <li class="new_notification_agent" data-id="${agent['id']}">
+                                    <li class="new-notification-agent" data-id="${agent['id']}">
                                         <span>${agent['label']}</span>
                                     </li>
                                     % endfor
@@ -2517,7 +2517,7 @@ $(document).ready(function() {
     });
 
     // Add a new notification agent
-    $('.new_notification_agent').click(function () {
+    $('.new-notification-agent').click(function () {
         $.ajax({
             url: 'add_notifier_config',
             data: { agent_id: $(this).data('id') },