diff --git a/app/assets/javascripts/discourse/app/components/auth-token-dropdown.js b/app/assets/javascripts/discourse/app/components/auth-token-dropdown.js
index ca8e39efa9e..1159f4af1ef 100644
--- a/app/assets/javascripts/discourse/app/components/auth-token-dropdown.js
+++ b/app/assets/javascripts/discourse/app/components/auth-token-dropdown.js
@@ -1,16 +1,17 @@
-import { computed } from "@ember/object";
+import { action, computed } from "@ember/object";
+import { classNames } from "@ember-decorators/component";
 import I18n from "discourse-i18n";
 import DropdownSelectBoxComponent from "select-kit/components/dropdown-select-box";
+import { selectKitOptions } from "select-kit/components/select-kit";
 
-export default DropdownSelectBoxComponent.extend({
-  classNames: ["auth-token-dropdown"],
-
-  selectKitOptions: {
-    icon: "wrench",
-    showFullTitle: false,
-  },
-
-  content: computed(function () {
+@classNames("auth-token-dropdown")
+@selectKitOptions({
+  icon: "wrench",
+  showFullTitle: false,
+})
+export default class AuthTokenDropdown extends DropdownSelectBoxComponent {
+  @computed
+  get content() {
     return [
       {
         id: "notYou",
@@ -25,18 +26,17 @@ export default DropdownSelectBoxComponent.extend({
         description: "",
       },
     ];
-  }),
+  }
 
-  actions: {
-    onChange(id) {
-      switch (id) {
-        case "notYou":
-          this.showToken(this.token);
-          break;
-        case "logOut":
-          this.revokeAuthToken(this.token);
-          break;
-      }
-    },
-  },
-});
+  @action
+  onChange(id) {
+    switch (id) {
+      case "notYou":
+        this.showToken(this.token);
+        break;
+      case "logOut":
+        this.revokeAuthToken(this.token);
+        break;
+    }
+  }
+}
diff --git a/app/assets/javascripts/discourse/app/components/bookmark-actions-dropdown.js b/app/assets/javascripts/discourse/app/components/bookmark-actions-dropdown.js
index db614d75395..8ca39516440 100644
--- a/app/assets/javascripts/discourse/app/components/bookmark-actions-dropdown.js
+++ b/app/assets/javascripts/discourse/app/components/bookmark-actions-dropdown.js
@@ -1,22 +1,26 @@
 import { action } from "@ember/object";
+import { classNames } from "@ember-decorators/component";
 import discourseComputed from "discourse-common/utils/decorators";
 import I18n from "discourse-i18n";
 import DropdownSelectBoxComponent from "select-kit/components/dropdown-select-box";
+import {
+  pluginApiIdentifiers,
+  selectKitOptions,
+} from "select-kit/components/select-kit";
 
 const ACTION_REMOVE = "remove";
 const ACTION_EDIT = "edit";
 const ACTION_CLEAR_REMINDER = "clear_reminder";
 const ACTION_PIN = "pin";
 
-export default DropdownSelectBoxComponent.extend({
-  classNames: ["bookmark-actions-dropdown"],
-  pluginApiIdentifiers: ["bookmark-actions-dropdown"],
-  selectKitOptions: {
-    icon: null,
-    translatedNone: "...",
-    showFullTitle: true,
-  },
-
+@classNames("bookmark-actions-dropdown")
+@selectKitOptions({
+  icon: null,
+  translatedNone: "...",
+  showFullTitle: true,
+})
+@pluginApiIdentifiers("bookmark-actions-dropdown")
+export default class BookmarkActionsDropdown extends DropdownSelectBoxComponent {
   @discourseComputed("bookmark")
   content(bookmark) {
     const actions = [];
@@ -58,7 +62,7 @@ export default DropdownSelectBoxComponent.extend({
     });
 
     return actions;
-  },
+  }
 
   @action
   onChange(selectedAction) {
@@ -71,5 +75,5 @@ export default DropdownSelectBoxComponent.extend({
     } else if (selectedAction === ACTION_PIN) {
       this.togglePinBookmark(this.bookmark);
     }
-  },
-});
+  }
+}
diff --git a/app/assets/javascripts/discourse/app/components/bulk-group-member-dropdown.js b/app/assets/javascripts/discourse/app/components/bulk-group-member-dropdown.js
index 9a96a9d80b4..4cf6c94d57e 100644
--- a/app/assets/javascripts/discourse/app/components/bulk-group-member-dropdown.js
+++ b/app/assets/javascripts/discourse/app/components/bulk-group-member-dropdown.js
@@ -1,17 +1,21 @@
 import { computed } from "@ember/object";
+import { classNames } from "@ember-decorators/component";
 import I18n from "discourse-i18n";
 import DropdownSelectBoxComponent from "select-kit/components/dropdown-select-box";
+import {
+  pluginApiIdentifiers,
+  selectKitOptions,
+} from "select-kit/components/select-kit";
 
-export default DropdownSelectBoxComponent.extend({
-  pluginApiIdentifiers: ["bulk-group-member-dropdown"],
-  classNames: ["bulk-group-member-dropdown"],
-
-  selectKitOptions: {
-    icon: "cog",
-    showFullTitle: false,
-  },
-
-  content: computed("bulkSelection.[]", function () {
+@classNames("bulk-group-member-dropdown")
+@selectKitOptions({
+  icon: "cog",
+  showFullTitle: false,
+})
+@pluginApiIdentifiers("bulk-group-member-dropdown")
+export default class BulkGroupMemberDropdown extends DropdownSelectBoxComponent {
+  @computed("bulkSelection.[]")
+  get content() {
     const items = [];
 
     items.push({
@@ -60,5 +64,5 @@ export default DropdownSelectBoxComponent.extend({
     }
 
     return items;
-  }),
-});
+  }
+}
diff --git a/app/assets/javascripts/discourse/app/components/email-dropdown.js b/app/assets/javascripts/discourse/app/components/email-dropdown.js
index 837663ab0e9..fd8994ef37b 100644
--- a/app/assets/javascripts/discourse/app/components/email-dropdown.js
+++ b/app/assets/javascripts/discourse/app/components/email-dropdown.js
@@ -1,19 +1,20 @@
 import { action, computed } from "@ember/object";
 import { service } from "@ember/service";
+import { classNames } from "@ember-decorators/component";
 import I18n from "discourse-i18n";
 import DropdownSelectBoxComponent from "select-kit/components/dropdown-select-box";
+import { selectKitOptions } from "select-kit/components/select-kit";
 
-export default DropdownSelectBoxComponent.extend({
-  router: service(),
+@classNames("email-dropdown")
+@selectKitOptions({
+  icon: "wrench",
+  showFullTitle: false,
+})
+export default class EmailDropdown extends DropdownSelectBoxComponent {
+  @service router;
 
-  classNames: ["email-dropdown"],
-
-  selectKitOptions: {
-    icon: "wrench",
-    showFullTitle: false,
-  },
-
-  content: computed("email", function () {
+  @computed("email")
+  get content() {
     const content = [];
 
     if (this.email.primary) {
@@ -44,7 +45,7 @@ export default DropdownSelectBoxComponent.extend({
     }
 
     return content;
-  }),
+  }
 
   @action
   onChange(id) {
@@ -59,5 +60,5 @@ export default DropdownSelectBoxComponent.extend({
         this.destroyEmail(this.email.email);
         break;
     }
-  },
-});
+  }
+}
diff --git a/app/assets/javascripts/discourse/app/components/group-member-dropdown.js b/app/assets/javascripts/discourse/app/components/group-member-dropdown.js
index e693bcb4259..d47d3d42561 100644
--- a/app/assets/javascripts/discourse/app/components/group-member-dropdown.js
+++ b/app/assets/javascripts/discourse/app/components/group-member-dropdown.js
@@ -1,17 +1,21 @@
 import { computed } from "@ember/object";
+import { classNames } from "@ember-decorators/component";
 import I18n from "discourse-i18n";
 import DropdownSelectBoxComponent from "select-kit/components/dropdown-select-box";
+import {
+  pluginApiIdentifiers,
+  selectKitOptions,
+} from "select-kit/components/select-kit";
 
-export default DropdownSelectBoxComponent.extend({
-  pluginApiIdentifiers: ["group-member-dropdown"],
-  classNames: ["group-member-dropdown"],
-
-  selectKitOptions: {
-    icon: "wrench",
-    showFullTitle: false,
-  },
-
-  content: computed("member.owner", "member.primary", function () {
+@classNames("group-member-dropdown")
+@selectKitOptions({
+  icon: "wrench",
+  showFullTitle: false,
+})
+@pluginApiIdentifiers("group-member-dropdown")
+export default class GroupMemberDropdown extends DropdownSelectBoxComponent {
+  @computed("member.owner", "member.primary")
+  get content() {
     const items = [
       {
         id: "removeMember",
@@ -77,5 +81,5 @@ export default DropdownSelectBoxComponent.extend({
     }
 
     return items;
-  }),
-});
+  }
+}
diff --git a/app/assets/javascripts/discourse/app/components/security-key-dropdown.js b/app/assets/javascripts/discourse/app/components/security-key-dropdown.js
index 700b94c1363..c0404e92dbf 100644
--- a/app/assets/javascripts/discourse/app/components/security-key-dropdown.js
+++ b/app/assets/javascripts/discourse/app/components/security-key-dropdown.js
@@ -1,16 +1,17 @@
-import { computed } from "@ember/object";
+import { action, computed } from "@ember/object";
+import { classNames } from "@ember-decorators/component";
 import I18n from "discourse-i18n";
 import DropdownSelectBoxComponent from "select-kit/components/dropdown-select-box";
+import { selectKitOptions } from "select-kit/components/select-kit";
 
-export default DropdownSelectBoxComponent.extend({
-  classNames: ["security-key-dropdown"],
-
-  selectKitOptions: {
-    icon: "wrench",
-    showFullTitle: false,
-  },
-
-  content: computed(function () {
+@classNames("security-key-dropdown")
+@selectKitOptions({
+  icon: "wrench",
+  showFullTitle: false,
+})
+export default class SecurityKeyDropdown extends DropdownSelectBoxComponent {
+  @computed
+  get content() {
     const content = [];
 
     content.push({
@@ -26,18 +27,17 @@ export default DropdownSelectBoxComponent.extend({
     });
 
     return content;
-  }),
+  }
 
-  actions: {
-    onChange(id) {
-      switch (id) {
-        case "edit":
-          this.editSecurityKey(this.securityKey);
-          break;
-        case "disable":
-          this.disableSingleSecondFactor(this.securityKey);
-          break;
-      }
-    },
-  },
-});
+  @action
+  onChange(id) {
+    switch (id) {
+      case "edit":
+        this.editSecurityKey(this.securityKey);
+        break;
+      case "disable":
+        this.disableSingleSecondFactor(this.securityKey);
+        break;
+    }
+  }
+}
diff --git a/app/assets/javascripts/discourse/app/components/tags-admin-dropdown.js b/app/assets/javascripts/discourse/app/components/tags-admin-dropdown.js
index 3f19f798b1d..8826ea5861c 100644
--- a/app/assets/javascripts/discourse/app/components/tags-admin-dropdown.js
+++ b/app/assets/javascripts/discourse/app/components/tags-admin-dropdown.js
@@ -1,18 +1,23 @@
-import { computed } from "@ember/object";
+import { action, computed } from "@ember/object";
+import { classNames } from "@ember-decorators/component";
 import I18n from "discourse-i18n";
 import DropdownSelectBoxComponent from "select-kit/components/dropdown-select-box";
+import {
+  pluginApiIdentifiers,
+  selectKitOptions,
+} from "select-kit/components/select-kit";
 
-export default DropdownSelectBoxComponent.extend({
-  pluginApiIdentifiers: ["tags-admin-dropdown"],
-  classNames: ["tags-admin-dropdown"],
-  actionsMapping: null,
+@classNames("tags-admin-dropdown")
+@selectKitOptions({
+  icons: ["wrench", "caret-down"],
+  showFullTitle: false,
+})
+@pluginApiIdentifiers("tags-admin-dropdown")
+export default class TagsAdminDropdown extends DropdownSelectBoxComponent {
+  actionsMapping = null;
 
-  selectKitOptions: {
-    icons: ["wrench", "caret-down"],
-    showFullTitle: false,
-  },
-
-  content: computed(function () {
+  @computed
+  get content() {
     return [
       {
         id: "manageGroups",
@@ -33,15 +38,10 @@ export default DropdownSelectBoxComponent.extend({
         icon: "trash-alt",
       },
     ];
-  }),
+  }
 
-  actions: {
-    onChange(id) {
-      const action = this.actionsMapping[id];
-
-      if (action) {
-        action();
-      }
-    },
-  },
-});
+  @action
+  onChange(id) {
+    this.actionsMapping[id]?.();
+  }
+}
diff --git a/app/assets/javascripts/discourse/app/components/token-based-auth-dropdown.js b/app/assets/javascripts/discourse/app/components/token-based-auth-dropdown.js
index 3ddbaf260e7..3e9c454e50a 100644
--- a/app/assets/javascripts/discourse/app/components/token-based-auth-dropdown.js
+++ b/app/assets/javascripts/discourse/app/components/token-based-auth-dropdown.js
@@ -1,16 +1,17 @@
-import { computed } from "@ember/object";
+import { action, computed } from "@ember/object";
+import { classNames } from "@ember-decorators/component";
 import I18n from "discourse-i18n";
 import DropdownSelectBoxComponent from "select-kit/components/dropdown-select-box";
+import { selectKitOptions } from "select-kit/components/select-kit";
 
-export default DropdownSelectBoxComponent.extend({
-  classNames: ["token-based-auth-dropdown"],
-
-  selectKitOptions: {
-    icon: "wrench",
-    showFullTitle: false,
-  },
-
-  content: computed(function () {
+@classNames("token-based-auth-dropdown")
+@selectKitOptions({
+  icon: "wrench",
+  showFullTitle: false,
+})
+export default class TokenBasedAuthDropdown extends DropdownSelectBoxComponent {
+  @computed
+  get content() {
     return [
       {
         id: "edit",
@@ -23,18 +24,17 @@ export default DropdownSelectBoxComponent.extend({
         name: I18n.t("user.second_factor.disable"),
       },
     ];
-  }),
+  }
 
-  actions: {
-    onChange(id) {
-      switch (id) {
-        case "edit":
-          this.editSecondFactor(this.totp);
-          break;
-        case "disable":
-          this.disableSingleSecondFactor(this.totp);
-          break;
-      }
-    },
-  },
-});
+  @action
+  onChange(id) {
+    switch (id) {
+      case "edit":
+        this.editSecondFactor(this.totp);
+        break;
+      case "disable":
+        this.disableSingleSecondFactor(this.totp);
+        break;
+    }
+  }
+}
diff --git a/app/assets/javascripts/discourse/app/components/two-factor-backup-dropdown.js b/app/assets/javascripts/discourse/app/components/two-factor-backup-dropdown.js
index 6c2ddff7543..f44730d8260 100644
--- a/app/assets/javascripts/discourse/app/components/two-factor-backup-dropdown.js
+++ b/app/assets/javascripts/discourse/app/components/two-factor-backup-dropdown.js
@@ -1,16 +1,17 @@
-import { computed } from "@ember/object";
+import { action, computed } from "@ember/object";
+import { classNames } from "@ember-decorators/component";
 import I18n from "discourse-i18n";
 import DropdownSelectBoxComponent from "select-kit/components/dropdown-select-box";
+import { selectKitOptions } from "select-kit/components/select-kit";
 
-export default DropdownSelectBoxComponent.extend({
-  classNames: ["two-factor-backup-dropdown"],
-
-  selectKitOptions: {
-    icon: "wrench",
-    showFullTitle: false,
-  },
-
-  content: computed(function () {
+@classNames("two-factor-backup-dropdown")
+@selectKitOptions({
+  icon: "wrench",
+  showFullTitle: false,
+})
+export default class TwoFactorBackupDropdown extends DropdownSelectBoxComponent {
+  @computed
+  get content() {
     const content = [];
 
     content.push({
@@ -28,18 +29,17 @@ export default DropdownSelectBoxComponent.extend({
     }
 
     return content;
-  }),
+  }
 
-  actions: {
-    onChange(id) {
-      switch (id) {
-        case "edit":
-          this.editSecondFactorBackup();
-          break;
-        case "disable":
-          this.disableSecondFactorBackup();
-          break;
-      }
-    },
-  },
-});
+  @action
+  onChange(id) {
+    switch (id) {
+      case "edit":
+        this.editSecondFactorBackup();
+        break;
+      case "disable":
+        this.disableSecondFactorBackup();
+        break;
+    }
+  }
+}
diff --git a/app/assets/javascripts/discourse/app/components/user-nav/messages-dropdown.js b/app/assets/javascripts/discourse/app/components/user-nav/messages-dropdown.js
index da01d614747..7997a1c1255 100644
--- a/app/assets/javascripts/discourse/app/components/user-nav/messages-dropdown.js
+++ b/app/assets/javascripts/discourse/app/components/user-nav/messages-dropdown.js
@@ -1,11 +1,14 @@
+import { classNames } from "@ember-decorators/component";
 import ComboBoxComponent from "select-kit/components/combo-box";
+import {
+  pluginApiIdentifiers,
+  selectKitOptions,
+} from "select-kit/components/select-kit";
 
-export default ComboBoxComponent.extend({
-  pluginApiIdentifiers: ["user-nav-messages-dropdown"],
-  classNames: ["user-nav-messages-dropdown"],
-
-  selectKitOptions: {
-    caretDownIcon: "caret-right",
-    caretUpIcon: "caret-down",
-  },
-});
+@classNames("user-nav-messages-dropdown")
+@selectKitOptions({
+  caretDownIcon: "caret-right",
+  caretUpIcon: "caret-down",
+})
+@pluginApiIdentifiers("user-nav-messages-dropdown")
+export default class MessagesDropdown extends ComboBoxComponent {}
diff --git a/app/assets/javascripts/discourse/app/components/user-preferences/passkey-options-dropdown.js b/app/assets/javascripts/discourse/app/components/user-preferences/passkey-options-dropdown.js
index 58325a91c8b..b3f7cb7bf16 100644
--- a/app/assets/javascripts/discourse/app/components/user-preferences/passkey-options-dropdown.js
+++ b/app/assets/javascripts/discourse/app/components/user-preferences/passkey-options-dropdown.js
@@ -1,16 +1,17 @@
 import { action, computed } from "@ember/object";
+import { classNames } from "@ember-decorators/component";
 import I18n from "discourse-i18n";
 import DropdownSelectBoxComponent from "select-kit/components/dropdown-select-box";
+import { selectKitOptions } from "select-kit/components/select-kit";
 
-export default DropdownSelectBoxComponent.extend({
-  classNames: ["passkey-options-dropdown"],
-
-  selectKitOptions: {
-    icon: "wrench",
-    showFullTitle: false,
-  },
-
-  content: computed(function () {
+@classNames("passkey-options-dropdown")
+@selectKitOptions({
+  icon: "wrench",
+  showFullTitle: false,
+})
+export default class PasskeyOptionsDropdown extends DropdownSelectBoxComponent {
+  @computed
+  get content() {
     return [
       {
         id: "edit",
@@ -23,7 +24,7 @@ export default DropdownSelectBoxComponent.extend({
         name: I18n.t("user.second_factor.delete"),
       },
     ];
-  }),
+  }
 
   @action
   onChange(id) {
@@ -35,5 +36,5 @@ export default DropdownSelectBoxComponent.extend({
         this.deletePasskey();
         break;
     }
-  },
-});
+  }
+}
diff --git a/plugins/chat/assets/javascripts/discourse/components/chat-channel-chooser.js b/plugins/chat/assets/javascripts/discourse/components/chat-channel-chooser.js
index 94ab9da6d84..fa8e962dfc2 100644
--- a/plugins/chat/assets/javascripts/discourse/components/chat-channel-chooser.js
+++ b/plugins/chat/assets/javascripts/discourse/components/chat-channel-chooser.js
@@ -1,14 +1,17 @@
+import { classNames } from "@ember-decorators/component";
 import ComboBoxComponent from "select-kit/components/combo-box";
+import {
+  pluginApiIdentifiers,
+  selectKitOptions,
+} from "select-kit/components/select-kit";
 
-export default ComboBoxComponent.extend({
-  pluginApiIdentifiers: ["chat-channel-chooser"],
-  classNames: ["chat-channel-chooser"],
-
-  selectKitOptions: {
-    headerComponent: "chat-channel-chooser-header",
-  },
-
+@classNames("chat-channel-chooser")
+@selectKitOptions({
+  headerComponent: "chat-channel-chooser-header",
+})
+@pluginApiIdentifiers("chat-channel-chooser")
+export default class ChatChannelChooser extends ComboBoxComponent {
   modifyComponentForRow() {
     return "chat-channel-chooser-row";
-  },
-});
+  }
+}
diff --git a/plugins/chat/assets/javascripts/discourse/components/chat-thread-tracking-dropdown.js b/plugins/chat/assets/javascripts/discourse/components/chat-thread-tracking-dropdown.js
index 8480d2b07bc..01590fcc7e3 100644
--- a/plugins/chat/assets/javascripts/discourse/components/chat-thread-tracking-dropdown.js
+++ b/plugins/chat/assets/javascripts/discourse/components/chat-thread-tracking-dropdown.js
@@ -1,14 +1,18 @@
+import { classNames } from "@ember-decorators/component";
 import NotificationsButtonComponent from "select-kit/components/notifications-button";
+import {
+  pluginApiIdentifiers,
+  selectKitOptions,
+} from "select-kit/components/select-kit";
 import { threadNotificationButtonLevels } from "discourse/plugins/chat/discourse/lib/chat-notification-levels";
 
-export default NotificationsButtonComponent.extend({
-  pluginApiIdentifiers: ["thread-notifications-button"],
-  classNames: ["thread-notifications-button"],
-  content: threadNotificationButtonLevels,
-
-  selectKitOptions: {
-    i18nPrefix: "chat.thread.notifications",
-    showFullTitle: false,
-    btnCustomClasses: "btn-flat",
-  },
-});
+@classNames("thread-notifications-button")
+@selectKitOptions({
+  i18nPrefix: "chat.thread.notifications",
+  showFullTitle: false,
+  btnCustomClasses: "btn-flat",
+})
+@pluginApiIdentifiers("thread-notifications-button")
+export default class ChatThreadTrackingDropdown extends NotificationsButtonComponent {
+  content = threadNotificationButtonLevels;
+}
diff --git a/plugins/chat/assets/javascripts/select-kit/addons/components/thread-notifications-button.js b/plugins/chat/assets/javascripts/select-kit/addons/components/thread-notifications-button.js
index 8480d2b07bc..642aa16e21c 100644
--- a/plugins/chat/assets/javascripts/select-kit/addons/components/thread-notifications-button.js
+++ b/plugins/chat/assets/javascripts/select-kit/addons/components/thread-notifications-button.js
@@ -1,14 +1,18 @@
+import { classNames } from "@ember-decorators/component";
 import NotificationsButtonComponent from "select-kit/components/notifications-button";
+import {
+  pluginApiIdentifiers,
+  selectKitOptions,
+} from "select-kit/components/select-kit";
 import { threadNotificationButtonLevels } from "discourse/plugins/chat/discourse/lib/chat-notification-levels";
 
-export default NotificationsButtonComponent.extend({
-  pluginApiIdentifiers: ["thread-notifications-button"],
-  classNames: ["thread-notifications-button"],
-  content: threadNotificationButtonLevels,
-
-  selectKitOptions: {
-    i18nPrefix: "chat.thread.notifications",
-    showFullTitle: false,
-    btnCustomClasses: "btn-flat",
-  },
-});
+@classNames("thread-notifications-button")
+@selectKitOptions({
+  i18nPrefix: "chat.thread.notifications",
+  showFullTitle: false,
+  btnCustomClasses: "btn-flat",
+})
+@pluginApiIdentifiers("thread-notifications-button")
+export default class ThreadNotificationsButton extends NotificationsButtonComponent {
+  content = threadNotificationButtonLevels;
+}