diff --git a/app/javascript/entrypoints/ui.js b/app/javascript/entrypoints/ui.js
index a6a01e89d..4ec20d4c1 100644
--- a/app/javascript/entrypoints/ui.js
+++ b/app/javascript/entrypoints/ui.js
@@ -1,4 +1,5 @@
 import { defineCustomElement } from 'vue';
+import { createI18n } from 'vue-i18n';
 
 import '../dashboard/assets/scss/app.scss';
 import 'vue-multiselect/dist/vue-multiselect.css';
@@ -9,20 +10,37 @@ import constants from 'dashboard/constants/globals';
 import axios from 'axios';
 import createAxios from 'dashboard/helper/APIHelper';
 import commonHelpers from 'dashboard/helper/commons';
+import i18nMessages from 'dashboard/i18n';
 
 import ChatButton from '../ui/ChatButton.vue';
 import WootInput from '../dashboard/components-next/input/Input.vue';
+import WootMessage from '../dashboard/components-next/message/Message.vue';
+
+const i18n = createI18n({
+  legacy: false,
+  locale: 'en',
+  messages: i18nMessages,
+});
+
+const ceOptions = {
+  configureApp(app) {
+    app.use(i18n);
+    app.use(store);
+  },
+};
 
 commonHelpers();
 window.WootConstants = constants;
 window.axios = createAxios(axios);
 
-export const buttonElement = defineCustomElement(ChatButton);
-export const inputElement = defineCustomElement(WootInput);
+export const buttonElement = defineCustomElement(ChatButton, ceOptions);
+export const inputElement = defineCustomElement(WootInput, ceOptions);
+export const messageElement = defineCustomElement(WootMessage, ceOptions);
 
 // eslint-disable-next-line no-underscore-dangle
 window.__CHATWOOT_STORE__ = store;
 customElements.define('woot-button', buttonElement);
 customElements.define('woot-input', inputElement);
+customElements.define('woot-message', messageElement);
 
 export { store, ChatButton };
diff --git a/public/test-components.html b/public/test-components.html
index 68237e173..dc08f8d1e 100644
--- a/public/test-components.html
+++ b/public/test-components.html
@@ -15,6 +15,18 @@
     <h2>Input Component</h2>
     <woot-input placeholder="Type something..."></woot-input>
 
+    <h2>Message Component</h2>
+    <woot-message
+      id="5296"
+      content="Hey, I want to get my Macbook repaird"
+      inbox_id="486"
+      conversation_id="1016"
+      message-type="0"
+      content-type="text"
+      status="sent"
+      placeholder="Type something..."
+    ></woot-message>
+
     <script src="/packs/js/ui.js"></script>
   </body>
 </html>