diff --git a/js/src/forum/addTeamsSettings.js b/js/src/forum/addTeamsSettings.js
index 0775b5f..a558a4a 100644
--- a/js/src/forum/addTeamsSettings.js
+++ b/js/src/forum/addTeamsSettings.js
@@ -1,48 +1,69 @@
 import app from 'flarum/forum/app';
 import { extend } from 'flarum/common/extend';
-import NotificationGrid from 'flarum/forum/components/NotificationGrid';
+import SettingsPage from 'flarum/forum/components/SettingsPage';
+import Switch from 'flarum/common/components/Switch';
+import Component from 'flarum/common/Component';
+
+class TeamsSettingsBlock extends Component {
+  view() {
+    const user = app.session.user;
+
+    return (
+      <div className="TeamsSettings Block">
+        <h3>Microsoft Teams</h3>
+
+        <Switch
+          state={user.preference('sbp-jm-msteams.enabled')}
+          onchange={value =>
+            user.savePreferences({
+              'sbp-jm-msteams.enabled': value,
+            })
+          }
+        >
+          Enable Microsoft Teams notifications
+        </Switch>
+
+        <div className="TeamsSettings-options">
+          {this.typeSwitch(
+            user,
+            'newPost',
+            'Someone replies to a discussion I am following'
+          )}
+          {this.typeSwitch(
+            user,
+            'postMentioned',
+            'Someone mentions me in a post'
+          )}
+          {this.typeSwitch(
+            user,
+            'userMentioned',
+            'Someone mentions me'
+          )}
+        </div>
+      </div>
+    );
+  }
+
+  typeSwitch(user, type, label) {
+    const key = `sbp-jm-msteams.types.${type}`;
+
+    return (
+      <Switch
+        state={user.preference(key)}
+        onchange={value =>
+          user.savePreferences({
+            [key]: value,
+          })
+        }
+      >
+        {label}
+      </Switch>
+    );
+  }
+}
 
 export default function addTeamsSettings() {
-  extend(NotificationGrid.prototype, 'notificationTypes', function (items) {
-    // Header
-    items.add('teams-header', {
-      name: 'teams-header',
-      label: app.translator.trans(
-        'sbp-jm-msteams.forum.teams.header'
-      ),
-    });
-
-    // Reply
-    items.add('teams-newPost', {
-      name: 'teams-newPost',
-      label: app.translator.trans(
-        'sbp-jm-msteams.forum.teams.newPost'
-      ),
-      settings: {
-        teams: 'sbp-jm-msteams.types.newPost',
-      },
-    });
-
-    // Post mention
-    items.add('teams-postMentioned', {
-      name: 'teams-postMentioned',
-      label: app.translator.trans(
-        'sbp-jm-msteams.forum.teams.postMentioned'
-      ),
-      settings: {
-        teams: 'sbp-jm-msteams.types.postMentioned',
-      },
-    });
-
-    // User mention
-    items.add('teams-userMentioned', {
-      name: 'teams-userMentioned',
-      label: app.translator.trans(
-        'sbp-jm-msteams.forum.teams.userMentioned'
-      ),
-      settings: {
-        teams: 'sbp-jm-msteams.types.userMentioned',
-      },
-    });
+  extend(SettingsPage.prototype, 'content', function (items) {
+    items.add('teams-settings', <TeamsSettingsBlock />, 50);
   });
-}
+}
\ No newline at end of file