diff --git a/app/assets/javascripts/admin/addon/components/site-settings/bool.gjs b/app/assets/javascripts/admin/addon/components/site-settings/bool.gjs
new file mode 100644
index 00000000000..d7d89ac12ed
--- /dev/null
+++ b/app/assets/javascripts/admin/addon/components/site-settings/bool.gjs
@@ -0,0 +1,33 @@
+import Component from "@glimmer/component";
+import { tracked } from "@glimmer/tracking";
+import { on } from "@ember/modifier";
+import { action } from "@ember/object";
+import { htmlSafe } from "@ember/template";
+import { isEmpty } from "@ember/utils";
+
+export default class Bool extends Component {
+  @tracked
+  enabled = isEmpty(this.args.value)
+    ? false
+    : this.args.value.toString() === "true";
+
+  @action
+  onToggle(event) {
+    if (event.target.checked) {
+      this.args.changeValueCallback("true");
+    } else {
+      this.args.changeValueCallback("false");
+    }
+  }
+
+  <template>
+    <label class="checkbox-label">
+      <input
+        {{on "input" this.onToggle}}
+        type="checkbox"
+        checked={{this.enabled}}
+      />
+      <span>{{htmlSafe @setting.description}}</span>
+    </label>
+  </template>
+}
diff --git a/app/assets/javascripts/admin/addon/components/site-settings/bool.hbs b/app/assets/javascripts/admin/addon/components/site-settings/bool.hbs
deleted file mode 100644
index 85e8fb6b7b3..00000000000
--- a/app/assets/javascripts/admin/addon/components/site-settings/bool.hbs
+++ /dev/null
@@ -1,4 +0,0 @@
-<label class="checkbox-label">
-  <Input @type="checkbox" @checked={{this.enabled}} />
-  <span>{{html-safe this.setting.description}}</span>
-</label>
\ No newline at end of file
diff --git a/app/assets/javascripts/admin/addon/components/site-settings/bool.js b/app/assets/javascripts/admin/addon/components/site-settings/bool.js
deleted file mode 100644
index 321a4627610..00000000000
--- a/app/assets/javascripts/admin/addon/components/site-settings/bool.js
+++ /dev/null
@@ -1,17 +0,0 @@
-import Component from "@ember/component";
-import { computed } from "@ember/object";
-import { isEmpty } from "@ember/utils";
-
-export default class Bool extends Component {
-  @computed("value")
-  get enabled() {
-    if (isEmpty(this.value)) {
-      return false;
-    }
-    return this.value.toString() === "true";
-  }
-
-  set enabled(value) {
-    this.set("value", value ? "true" : "false");
-  }
-}
diff --git a/app/assets/javascripts/admin/addon/components/site-settings/category.gjs b/app/assets/javascripts/admin/addon/components/site-settings/category.gjs
new file mode 100644
index 00000000000..765911e0525
--- /dev/null
+++ b/app/assets/javascripts/admin/addon/components/site-settings/category.gjs
@@ -0,0 +1,13 @@
+import { hash } from "@ember/helper";
+import { eq } from "truth-helpers";
+import CategoryChooser from "select-kit/components/category-chooser";
+
+const Category = <template>
+  <CategoryChooser
+    @value={{@value}}
+    @onChange={{@changeValueCallback}}
+    @options={{hash allowUncategorized=true none=(eq @setting.default "")}}
+  />
+</template>;
+
+export default Category;
diff --git a/app/assets/javascripts/admin/addon/components/site-settings/category.hbs b/app/assets/javascripts/admin/addon/components/site-settings/category.hbs
deleted file mode 100644
index 4b281b90d33..00000000000
--- a/app/assets/javascripts/admin/addon/components/site-settings/category.hbs
+++ /dev/null
@@ -1,5 +0,0 @@
-<CategoryChooser
-  @value={{this.value}}
-  @onChange={{fn (mut this.value)}}
-  @options={{hash allowUncategorized=true none=(eq this.setting.default "")}}
-/>
\ No newline at end of file
diff --git a/app/assets/javascripts/admin/addon/components/site-settings/category.js b/app/assets/javascripts/admin/addon/components/site-settings/category.js
deleted file mode 100644
index 8e11b94d30d..00000000000
--- a/app/assets/javascripts/admin/addon/components/site-settings/category.js
+++ /dev/null
@@ -1,3 +0,0 @@
-import Component from "@ember/component";
-
-export default class Category extends Component {}
diff --git a/app/assets/javascripts/admin/addon/components/site-settings/color.js b/app/assets/javascripts/admin/addon/components/site-settings/color.gjs
similarity index 72%
rename from app/assets/javascripts/admin/addon/components/site-settings/color.js
rename to app/assets/javascripts/admin/addon/components/site-settings/color.gjs
index e9d9fb7cfed..3343fd1cb64 100644
--- a/app/assets/javascripts/admin/addon/components/site-settings/color.js
+++ b/app/assets/javascripts/admin/addon/components/site-settings/color.gjs
@@ -1,5 +1,5 @@
-import Component from "@ember/component";
-import { action, computed } from "@ember/object";
+import Component from "@glimmer/component";
+import ColorInput from "admin/components/color-input";
 
 function RGBToHex(rgb) {
   // Choose correct separator
@@ -25,9 +25,8 @@ function RGBToHex(rgb) {
 }
 
 export default class Color extends Component {
-  @computed("value")
   get valid() {
-    let value = this.value.toLowerCase();
+    let value = this.args.value.toLowerCase();
 
     let testColor = new Option().style;
     testColor.color = value;
@@ -46,8 +45,13 @@ export default class Color extends Component {
     return testColor.color && hexifiedColor === value;
   }
 
-  @action
-  onChangeColor(color) {
-    this.set("value", color);
-  }
+  <template>
+    <ColorInput
+      @hexValue={{readonly @value}}
+      @valid={{@valid}}
+      @onlyHex={{false}}
+      @styleSelection={{false}}
+      @onChangeColor={{@changeValueCallback}}
+    />
+  </template>
 }
diff --git a/app/assets/javascripts/admin/addon/components/site-settings/color.hbs b/app/assets/javascripts/admin/addon/components/site-settings/color.hbs
deleted file mode 100644
index 3bbf69af09e..00000000000
--- a/app/assets/javascripts/admin/addon/components/site-settings/color.hbs
+++ /dev/null
@@ -1,7 +0,0 @@
-<ColorInput
-  @hexValue={{readonly this.value}}
-  @valid={{this.valid}}
-  @onlyHex={{false}}
-  @styleSelection={{false}}
-  @onChangeColor={{this.onChangeColor}}
-/>
\ No newline at end of file
diff --git a/app/assets/javascripts/admin/addon/components/site-settings/compact-list.gjs b/app/assets/javascripts/admin/addon/components/site-settings/compact-list.gjs
new file mode 100644
index 00000000000..438abc49eab
--- /dev/null
+++ b/app/assets/javascripts/admin/addon/components/site-settings/compact-list.gjs
@@ -0,0 +1,52 @@
+import Component from "@glimmer/component";
+import { tracked } from "@glimmer/tracking";
+import { hash } from "@ember/helper";
+import { action } from "@ember/object";
+import { makeArray } from "discourse-common/lib/helpers";
+import ListSetting from "select-kit/components/list-setting";
+
+export default class CompactList extends Component {
+  @tracked createdChoices = null;
+  tokenSeparator = "|";
+
+  get settingValue() {
+    return this.args.value
+      .toString()
+      .split(this.tokenSeparator)
+      .filter(Boolean);
+  }
+
+  get settingChoices() {
+    return [
+      ...new Set([
+        ...makeArray(this.settingValue),
+        ...makeArray(this.args.setting.choices),
+        ...makeArray(this.createdChoices),
+      ]),
+    ];
+  }
+
+  @action
+  onChangeListSetting(value) {
+    this.args.changeValueCallback(value.join(this.tokenSeparator));
+  }
+
+  @action
+  onChangeChoices(choices) {
+    this.createdChoices = [
+      ...new Set([...makeArray(this.createdChoices), ...makeArray(choices)]),
+    ];
+  }
+
+  <template>
+    <ListSetting
+      @value={{this.settingValue}}
+      @settingName={{@setting.setting}}
+      @choices={{this.settingChoices}}
+      @onChange={{this.onChangeListSetting}}
+      @onChangeChoices={{this.onChangeChoices}}
+      @options={{hash allowAny=@allowAny}}
+      @mandatoryValues={{@setting.mandatory_values}}
+    />
+  </template>
+}
diff --git a/app/assets/javascripts/admin/addon/components/site-settings/compact-list.hbs b/app/assets/javascripts/admin/addon/components/site-settings/compact-list.hbs
deleted file mode 100644
index 4dda0f48004..00000000000
--- a/app/assets/javascripts/admin/addon/components/site-settings/compact-list.hbs
+++ /dev/null
@@ -1,9 +0,0 @@
-<ListSetting
-  @value={{this.settingValue}}
-  @settingName={{this.setting.setting}}
-  @choices={{this.settingChoices}}
-  @onChange={{this.onChangeListSetting}}
-  @onChangeChoices={{this.onChangeChoices}}
-  @options={{hash allowAny=this.allowAny}}
-  @mandatoryValues={{this.setting.mandatory_values}}
-/>
\ No newline at end of file
diff --git a/app/assets/javascripts/admin/addon/components/site-settings/compact-list.js b/app/assets/javascripts/admin/addon/components/site-settings/compact-list.js
deleted file mode 100644
index c1823ecd327..00000000000
--- a/app/assets/javascripts/admin/addon/components/site-settings/compact-list.js
+++ /dev/null
@@ -1,36 +0,0 @@
-import Component from "@ember/component";
-import { action, computed } from "@ember/object";
-import { makeArray } from "discourse-common/lib/helpers";
-
-export default class CompactList extends Component {
-  tokenSeparator = "|";
-  createdChoices = null;
-
-  @computed("value")
-  get settingValue() {
-    return this.value.toString().split(this.tokenSeparator).filter(Boolean);
-  }
-
-  @computed("settingValue", "setting.choices.[]", "createdChoices.[]")
-  get settingChoices() {
-    return [
-      ...new Set([
-        ...makeArray(this.settingValue),
-        ...makeArray(this.setting.choices),
-        ...makeArray(this.createdChoices),
-      ]),
-    ];
-  }
-
-  @action
-  onChangeListSetting(value) {
-    this.set("value", value.join(this.tokenSeparator));
-  }
-
-  @action
-  onChangeChoices(choices) {
-    this.set("createdChoices", [
-      ...new Set([...makeArray(this.createdChoices), ...makeArray(choices)]),
-    ]);
-  }
-}
diff --git a/app/assets/javascripts/admin/addon/components/site-settings/emoji-list.gjs b/app/assets/javascripts/admin/addon/components/site-settings/emoji-list.gjs
new file mode 100644
index 00000000000..2fa3d8b8f61
--- /dev/null
+++ b/app/assets/javascripts/admin/addon/components/site-settings/emoji-list.gjs
@@ -0,0 +1,11 @@
+import EmojiValueList from "admin/components/emoji-value-list";
+
+const EmojiList = <template>
+  <EmojiValueList
+    @setting={{@setting}}
+    @values={{@value}}
+    @setValidationMessage={{@setValidationMessage}}
+  />
+</template>;
+
+export default EmojiList;
diff --git a/app/assets/javascripts/admin/addon/components/site-settings/emoji-list.hbs b/app/assets/javascripts/admin/addon/components/site-settings/emoji-list.hbs
deleted file mode 100644
index bbedad6cf9b..00000000000
--- a/app/assets/javascripts/admin/addon/components/site-settings/emoji-list.hbs
+++ /dev/null
@@ -1,5 +0,0 @@
-<EmojiValueList
-  @setting={{this.setting}}
-  @values={{this.value}}
-  @setValidationMessage={{this.setValidationMessage}}
-/>
\ No newline at end of file
diff --git a/app/assets/javascripts/admin/addon/components/site-settings/emoji-list.js b/app/assets/javascripts/admin/addon/components/site-settings/emoji-list.js
deleted file mode 100644
index 706d6d80840..00000000000
--- a/app/assets/javascripts/admin/addon/components/site-settings/emoji-list.js
+++ /dev/null
@@ -1,3 +0,0 @@
-import Component from "@ember/component";
-
-export default class EmojiList extends Component {}