diff --git a/app/components/button.hbs b/app/components/button.hbs
deleted file mode 100644
index 130c06d..0000000
--- a/app/components/button.hbs
+++ /dev/null
@@ -1,36 +0,0 @@
-{{#let
-  'inline-flex items-center cursor-pointer border hover:opacity-80 active:opacity-60 focus:outline-none'
-  (hash
-    primary='text-primary border-primary'
-    default='text-black border-gray-dark'
-  )
-  (hash
-    small='px-2.5 py-1.5 text-sm'
-    default='px-3 py-2 leading-4 text-sm'
-  )
-  as |commonClasses styleClasses sizeClasses|
-}}
-  <button
-    disabled={{this.disabled}}
-    type={{this.type}}
-    class="{{commonClasses}}
-      {{get styleClasses (if this.isActive 'primary' this.style)}}
-
-      {{get sizeClasses this.size}}
-
-      {{if @group 'first:rounded-l-md last:rounded-r-md' 'rounded-md'}}"
-    ...attributes
-    {{on 'click' this.handleClick}}
-  >
-    {{#if this.isPending}}
-      <Icons::Loading @spin={{true}} class="mx-1" />
-    {{else if @icon}}
-      <@icon class="mx-1" />
-    {{/if}}
-    {{#if this.text}}
-      <span class="mx-1">
-        {{this.text}}
-      </span>
-    {{/if}}
-  </button>
-{{/let}}
diff --git a/app/components/button.js b/app/components/button.js
index 058ce96..9885cf7 100644
--- a/app/components/button.js
+++ b/app/components/button.js
@@ -1,8 +1,41 @@
 import Component from '@glimmer/component';
 import { action } from '@ember/object';
 import { tracked } from '@glimmer/tracking';
+import { hbs } from 'ember-template-imports';
+import { Loading } from 'ember-mdi';
+import { on } from '@ember/modifier';
+import eq from '../helpers/eq';
+
+export const commonClasses =
+  'inline-flex items-center px-3 py-2 leading-4 text-sm cursor-pointer border hover:opacity-80 active:opacity-60 focus:outline-none text-black border-gray-dark';
+export const primaryStyleClasses = 'text-primary border-primary';
 
 export default class ButtonComponent extends Component {
+  static template = hbs`
+    <button
+      disabled={{this.disabled}}
+      type={{this.type}}
+      class="
+        {{commonClasses}}
+        {{if (eq this.style 'primary') primaryStyleClasses}}
+        {{if @group 'first:rounded-l-md last:rounded-r-md' 'rounded-md'}}
+      "
+      ...attributes
+      {{on 'click' this.handleClick}}
+    >
+      {{#if this.isPending}}
+        <Loading @spin={{true}} class="mx-1" />
+      {{else if @icon}}
+        <@icon class="mx-1" />
+      {{/if}}
+      {{#if this.text}}
+        <span class="mx-1">
+          {{this.text}}
+        </span>
+      {{/if}}
+    </button>
+  `;
+
   @tracked _state = 'default';
 
   get style() {
diff --git a/app/helpers/eq.js b/app/helpers/eq.js
new file mode 100644
index 0000000..1a6d2a1
--- /dev/null
+++ b/app/helpers/eq.js
@@ -0,0 +1,5 @@
+import { helper } from '@ember/component/helper';
+
+export default helper(function eq(params /*, named*/) {
+  return params[0] === params[1];
+});
diff --git a/package.json b/package.json
index 72f7c8b..40f5d90 100644
--- a/package.json
+++ b/package.json
@@ -77,6 +77,7 @@
     "ember-simple-auth": "^4.2.2",
     "ember-sortable": "^3.0.1",
     "ember-source": "~4.6.0",
+    "ember-template-imports": "^3.1.1",
     "ember-template-lint": "^4.10.1",
     "ember-truth-helpers": "^3.0.0",
     "eslint": "^7.32.0",
diff --git a/tests/integration/helpers/eq-test.js b/tests/integration/helpers/eq-test.js
new file mode 100644
index 0000000..6462d82
--- /dev/null
+++ b/tests/integration/helpers/eq-test.js
@@ -0,0 +1,17 @@
+import { module, test } from 'qunit';
+import { setupRenderingTest } from 'meiliadmin/tests/helpers';
+import { render } from '@ember/test-helpers';
+import { hbs } from 'ember-cli-htmlbars';
+
+module('Integration | Helper | eq', function (hooks) {
+  setupRenderingTest(hooks);
+
+  // TODO: Replace this with your real tests.
+  test('it renders', async function (assert) {
+    this.set('inputValue', '1234');
+
+    await render(hbs`{{eq this.inputValue}}`);
+
+    assert.dom(this.element).hasText('1234');
+  });
+});
diff --git a/yarn.lock b/yarn.lock
index 70c152f..aaa7794 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3173,6 +3173,11 @@ babel-helpers@^6.24.1:
     babel-runtime "^6.22.0"
     babel-template "^6.24.1"
 
+babel-import-util@^0.2.0:
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/babel-import-util/-/babel-import-util-0.2.0.tgz#b468bb679919601a3570f9e317536c54f2862e23"
+  integrity sha512-CtWYYHU/MgK88rxMrLfkD356dApswtR/kWZ/c6JifG1m10e7tBBrs/366dFzWMAoqYmG5/JSh+94tUSpIwh+ag==
+
 babel-import-util@^1.1.0, babel-import-util@^1.2.0:
   version "1.2.2"
   resolved "https://registry.yarnpkg.com/babel-import-util/-/babel-import-util-1.2.2.tgz#1027560e143a4a68b1758e71d4fadc661614e495"
@@ -6394,6 +6399,21 @@ ember-source@~4.6.0:
     semver "^7.3.7"
     silent-error "^1.1.1"
 
+ember-template-imports@^3.1.1:
+  version "3.1.1"
+  resolved "https://registry.yarnpkg.com/ember-template-imports/-/ember-template-imports-3.1.1.tgz#9b7a4f37c0a638b3d3d9894dade494efceb30f9a"
+  integrity sha512-ZsujuOwaF6lWDDeKC0NleCUAC8f06CfxWQPmejNnxg5gUdqHFTfW9L++X9RLLV/pJZ6eCtax7L94XkXQJ1LfBA==
+  dependencies:
+    babel-import-util "^0.2.0"
+    broccoli-stew "^3.0.0"
+    ember-cli-babel-plugin-helpers "^1.1.1"
+    ember-cli-version-checker "^5.1.2"
+    line-column "^1.0.2"
+    magic-string "^0.25.7"
+    parse-static-imports "^1.1.0"
+    string.prototype.matchall "^4.0.6"
+    validate-peer-dependencies "^1.1.0"
+
 ember-template-lint@^4.10.1:
   version "4.12.0"
   resolved "https://registry.yarnpkg.com/ember-template-lint/-/ember-template-lint-4.12.0.tgz#0708cf280cbad9419c399e52714d29a72dad2dbf"
@@ -12134,7 +12154,7 @@ string-width@^2.1.0:
     is-fullwidth-code-point "^2.0.0"
     strip-ansi "^4.0.0"
 
-string.prototype.matchall@^4.0.5:
+string.prototype.matchall@^4.0.5, string.prototype.matchall@^4.0.6:
   version "4.0.7"
   resolved "https://registry.yarnpkg.com/string.prototype.matchall/-/string.prototype.matchall-4.0.7.tgz#8e6ecb0d8a1fb1fda470d81acecb2dba057a481d"
   integrity sha512-f48okCX7JiwVi1NXCVWcFnZgADDC/n2vePlQ/KUCNqCikLLilQvwjMO8+BHVKvgzH0JB0J9LEPgxOGT02RoETg==
@@ -13056,7 +13076,7 @@ validate-npm-package-name@^4.0.0:
   dependencies:
     builtins "^5.0.0"
 
-validate-peer-dependencies@^1.2.0:
+validate-peer-dependencies@^1.1.0, validate-peer-dependencies@^1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/validate-peer-dependencies/-/validate-peer-dependencies-1.2.0.tgz#22aab93c514f4fda457d36c80685e8b1160d2036"
   integrity sha512-nd2HUpKc6RWblPZQ2GDuI65sxJ2n/UqZwSBVtj64xlWjMx0m7ZB2m9b2JS3v1f+n9VWH/dd1CMhkHfP6pIdckA==