diff --git a/app/javascript/entrypoints/ui.js b/app/javascript/entrypoints/ui.js
index 04d6c6425..acfacade2 100644
--- a/app/javascript/entrypoints/ui.js
+++ b/app/javascript/entrypoints/ui.js
@@ -15,6 +15,7 @@ import commonHelpers from 'dashboard/helper/commons';
 import WootButton from '../dashboard/components-next/button/Button.vue';
 import WootInput from '../dashboard/components-next/input/Input.vue';
 import WootMessage from '../dashboard/components-next/message/Message.vue';
+import MessageList from '../ui/MessageList.vue';
 import i18nMessages from '../dashboard/i18n';
 import { createI18n, I18nInjectionKey } from 'vue-i18n';
 
@@ -45,9 +46,11 @@ window.axios = createAxios(axios);
 export const buttonElement = defineCustomElement(WootButton, ceOptions);
 export const inputElement = defineCustomElement(WootInput, ceOptions);
 export const messageElement = defineCustomElement(WootMessage, ceOptions);
+export const messageListElement = defineCustomElement(MessageList, 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);
+customElements.define('woot-message-list', messageListElement);
diff --git a/app/javascript/ui/MessageList.vue b/app/javascript/ui/MessageList.vue
new file mode 100644
index 000000000..c974d4ce2
--- /dev/null
+++ b/app/javascript/ui/MessageList.vue
@@ -0,0 +1,33 @@
+<script setup>
+import Message from 'next/message/Message.vue';
+import allMessages from 'next/message/fixtures/textWithMedia.js';
+
+// const props = defineProps({
+//   accountId: {
+//     type: Number,
+//     required: true,
+//   },
+//   conversationId: {
+//     type: Number,
+//     required: true,
+//   },
+//   token: {
+//     type: String,
+//     required: true,
+//   },
+// });
+</script>
+
+<template>
+  <ul class="px-4 bg-n-background">
+    <Message
+      v-for="message in allMessages"
+      :key="message.id"
+      v-bind="message"
+      :is-email-inbox="isAnEmailChannel"
+      :group-with-next="false"
+      :inbox-supports-reply-to="inboxSupportsReplyTo"
+      :current-user-id="currentUserId"
+    />
+  </ul>
+</template>
diff --git a/public/test-components.html b/public/test-components.html
index b9de31f41..9816b5b47 100644
--- a/public/test-components.html
+++ b/public/test-components.html
@@ -15,16 +15,8 @@
     <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"
-    ></woot-message>
+    <h2>Message List</h2>
+    <woot-message-list></woot-message-list>
 
     <script src="/packs/js/ui.js"></script>
   </body>