diff --git a/addons/rose/addon/components/rose/message.js b/addons/rose/addon/components/rose/message.js
deleted file mode 100644
index 89ac42ee5..000000000
--- a/addons/rose/addon/components/rose/message.js
+++ /dev/null
@@ -1,7 +0,0 @@
-import Component from '@ember/component';
-import layout from '../../templates/components/rose/message';
-
-export default Component.extend({
-  layout,
-  tagName: '',
-});
diff --git a/addons/rose/addon/templates/components/rose/message.hbs b/addons/rose/addon/components/rose/message/index.hbs
similarity index 100%
rename from addons/rose/addon/templates/components/rose/message.hbs
rename to addons/rose/addon/components/rose/message/index.hbs
diff --git a/addons/rose/addon/components/rose/message/index.js b/addons/rose/addon/components/rose/message/index.js
new file mode 100644
index 000000000..00b2c7c53
--- /dev/null
+++ b/addons/rose/addon/components/rose/message/index.js
@@ -0,0 +1,3 @@
+import Component from '@glimmer/component';
+
+export default class RoseMessageComponent extends Component {}
diff --git a/addons/rose/addon/components/rose/message.stories.mdx b/addons/rose/addon/components/rose/message/index.stories.mdx
similarity index 100%
rename from addons/rose/addon/components/rose/message.stories.mdx
rename to addons/rose/addon/components/rose/message/index.stories.mdx
diff --git a/ui/core/app/components/error/message.hbs b/ui/core/app/components/error/message.hbs
index afcf013d9..a602536c5 100644
--- a/ui/core/app/components/error/message.hbs
+++ b/ui/core/app/components/error/message.hbs
@@ -1,6 +1,6 @@
 <Rose::Message
   @title={{t (concat "errors." this.messageCode ".title")}}
-  @subtitle={{concat (t "errors.generic.title") " " this.status}}
+  @subtitle={{concat (t "errors.generic.title") " " @status}}
   @icon={{this.icon}}
 as |message|>
   <message.description>{{t (concat "errors." this.messageCode ".description")}}</message.description>
diff --git a/ui/core/app/components/error/message.js b/ui/core/app/components/error/message.js
index 21b362c5f..7dc91ca27 100644
--- a/ui/core/app/components/error/message.js
+++ b/ui/core/app/components/error/message.js
@@ -1,4 +1,4 @@
-import Message from 'rose/components/rose/message';
+import MessageComponent from 'rose/components/rose/message';
 import { computed } from '@ember/object';
 
 /*
@@ -17,16 +17,16 @@ import { computed } from '@ember/object';
 
 const statuses = ['401', '403', '404', '500'];
 
-export default class ErrorMessageComponent extends Message {
+export default class ErrorMessageComponent extends MessageComponent {
   // =methods
 
   /**
    * Returns an icon for error status.
    * @return {string}
    */
-  @computed('status')
+  @computed('args.status')
   get icon() {
-    switch (this.status) {
+    switch (this.args.status) {
       case '401':
       case '403':
         return 'disabled';
@@ -51,9 +51,9 @@ export default class ErrorMessageComponent extends Message {
    * isn't part of predefined statuses.
    * @return {string}
    */
-  @computed('status')
+  @computed('args.status')
   get messageCode() {
-    let messageCode = this.status;
+    let messageCode = this.args.status;
     if(!statuses.includes(messageCode)) messageCode = 'unknown';
     return messageCode;
   }