diff --git a/CHANGELOG.md b/CHANGELOG.md
index 7657a7b..51559ca 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,9 @@
 # Changelog
 
+## 3.5.4
+
+- Convert to `.gjs`
+
 ## 3.5.3
 
 - Run ember-cli-update
diff --git a/addon/components/flash-messages/index.js b/addon/components/flash-messages.gjs
similarity index 52%
rename from addon/components/flash-messages/index.js
rename to addon/components/flash-messages.gjs
index 0d67bde..21d3efe 100644
--- a/addon/components/flash-messages/index.js
+++ b/addon/components/flash-messages.gjs
@@ -2,6 +2,8 @@ import { inject } from '@ember/service';
 import Component from '@glimmer/component';
 import { modifier } from 'ember-modifier';
 import { action } from '@ember/object';
+import { fn } from '@ember/helper';
+import Message from '@zestia/ember-messages/components/message';
 
 export default class FlashMessageComponent extends Component {
   @inject('flash-message') flashMessageService;
@@ -24,4 +26,21 @@ export default class FlashMessageComponent extends Component {
   handleDismissMessage(message) {
     this.flashMessageService.remove(message);
   }
+
+  <template>
+    {{#if this.flashMessageService.queue.length}}
+      <div class="flash-messages">
+        {{#each this.flashMessageService.queue as |message|}}
+          <Message
+            class="flash-message"
+            @type={{message.type}}
+            @onDismiss={{fn this.handleDismissMessage message}}
+            {{this.scrollIntoView}}
+          >
+            {{message.text}}
+          </Message>
+        {{/each}}
+      </div>
+    {{/if}}
+  </template>
 }
diff --git a/addon/components/flash-messages/index.hbs b/addon/components/flash-messages/index.hbs
deleted file mode 100644
index fc681e8..0000000
--- a/addon/components/flash-messages/index.hbs
+++ /dev/null
@@ -1,14 +0,0 @@
-{{#if this.flashMessageService.queue.length}}
-  <div class="flash-messages">
-    {{#each this.flashMessageService.queue as |message|}}
-      <Message
-        class="flash-message"
-        @type={{message.type}}
-        @onDismiss={{fn this.handleDismissMessage message}}
-        {{this.scrollIntoView}}
-      >
-        {{message.text}}
-      </Message>
-    {{/each}}
-  </div>
-{{/if}}
\ No newline at end of file
diff --git a/addon/components/message/index.js b/addon/components/message.gjs
similarity index 60%
rename from addon/components/message/index.js
rename to addon/components/message.gjs
index 4dc2d0b..695f1d6 100644
--- a/addon/components/message/index.js
+++ b/addon/components/message.gjs
@@ -3,6 +3,7 @@ import { tracked } from '@glimmer/tracking';
 import { waitFor } from '@ember/test-waiters';
 import { waitForAnimation } from '@zestia/animation-utils';
 import { modifier } from 'ember-modifier';
+import { on } from '@ember/modifier';
 import { action } from '@ember/object';
 
 export default class MessageComponent extends Component {
@@ -31,4 +32,27 @@ export default class MessageComponent extends Component {
 
     this.args.onDismiss();
   }
+
+  <template>
+    <div
+      role="alert"
+      class="message"
+      data-type={{@type}}
+      data-dismissed={{this.dismissed}}
+      ...attributes
+      {{this.registerElement}}
+    >
+      <div class="message__body">
+        {{yield}}
+      </div>
+      {{#if this.isDismissible}}
+        <button
+          type="button"
+          class="message__dismiss"
+          aria-label="Dismiss"
+          {{on "click" this.dismiss}}
+        ></button>
+      {{/if}}
+    </div>
+  </template>
 }
diff --git a/addon/components/message/index.hbs b/addon/components/message/index.hbs
deleted file mode 100644
index 11a0edf..0000000
--- a/addon/components/message/index.hbs
+++ /dev/null
@@ -1,20 +0,0 @@
-<div
-  role="alert"
-  class="message"
-  data-type={{@type}}
-  data-dismissed={{this.dismissed}}
-  ...attributes
-  {{this.registerElement}}
->
-  <div class="message__body">
-    {{yield}}
-  </div>
-  {{#if this.isDismissible}}
-    <button
-      type="button"
-      class="message__dismiss"
-      aria-label="Dismiss"
-      {{on "click" this.dismiss}}
-    ></button>
-  {{/if}}
-</div>
\ No newline at end of file
diff --git a/package.json b/package.json
index 5426da1..b2f2782 100644
--- a/package.json
+++ b/package.json
@@ -7,7 +7,8 @@
     "ember-auto-import": "^2.7.1",
     "ember-cli-babel": "^8.2.0",
     "ember-cli-htmlbars": "^6.3.0",
-    "ember-modifier": "^4.1.0"
+    "ember-modifier": "^4.1.0",
+    "ember-template-imports": "^4.0.0"
   },
   "description": "Message components for Ember apps & addons",
   "devDependencies": {
@@ -35,7 +36,6 @@
     "ember-resolver": "^11.0.1",
     "ember-source": "~5.5.0",
     "ember-source-channel-url": "^3.0.0",
-    "ember-template-imports": "^4.0.0",
     "ember-template-lint": "^5.13.0",
     "ember-try": "^3.0.0",
     "eslint": "^8.56.0",
diff --git a/tests/integration/flash-messages/component-test.gjs b/tests/integration/flash-messages/component-test.gjs
index bebe884..f7ed330 100755
--- a/tests/integration/flash-messages/component-test.gjs
+++ b/tests/integration/flash-messages/component-test.gjs
@@ -25,7 +25,7 @@ module('flash-messages', function (hooks) {
     await render(<template><FlashMessages /></template>);
 
     assert.strictEqual(
-      getRootElement().innerHTML,
+      getRootElement().innerHTML.trim(),
       '<!---->',
       'does not render if there are no flash messages to display'
     );