diff --git a/.eslintrc.js b/.eslintrc.js
index e451e0da7..5e6b7be07 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -51,6 +51,7 @@ module.exports = {
       },
     ],
     'vue/define-props-declaration': ['error', 'runtime'],
+    'vue/match-component-import-name': ['error'],
     'vue/max-attributes-per-line': [
       'error',
       {
diff --git a/app/javascript/superadmin_pages/views/playground/Index.vue b/app/javascript/superadmin_pages/views/playground/Index.vue
index 15d325ced..496adac2e 100644
--- a/app/javascript/superadmin_pages/views/playground/Index.vue
+++ b/app/javascript/superadmin_pages/views/playground/Index.vue
@@ -1,14 +1,14 @@
 <script>
 import messageFormatterMixin from 'shared/mixins/messageFormatterMixin';
 import keyboardEventListenerMixins from 'shared/mixins/keyboardEventListenerMixins';
-import Header from '../../components/playground/Header.vue';
+import PlaygroundHeader from '../../components/playground/Header.vue';
 import UserMessage from '../../components/playground/UserMessage.vue';
 import BotMessage from '../../components/playground/BotMessage.vue';
 import TypingIndicator from '../../components/playground/TypingIndicator.vue';
 
 export default {
   components: {
-    PlaygroundHeader: Header,
+    PlaygroundHeader,
     UserMessage,
     BotMessage,
     TypingIndicator,
@@ -105,12 +105,12 @@ export default {
 </script>
 
 <template>
-  <section class="h-full w-full flex flex-col bg-slate-25">
+  <section class="flex flex-col w-full h-full bg-slate-25">
     <PlaygroundHeader
       :response-source-name="componentData.responseSourceName"
       :response-source-path="componentData.responseSourcePath"
     />
-    <div ref="chatContainer" class="flex-1 overflow-auto px-8 py-4">
+    <div ref="chatContainer" class="flex-1 px-8 py-4 overflow-auto">
       <div
         v-for="message in messages"
         :id="`message-${message.id}`"