diff --git a/.eslintrc.js b/.eslintrc.js
index 1481e550f..d28505a30 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -33,6 +33,13 @@ module.exports = {
         order: ['script', 'template', 'style'],
       },
     ],
+    'vue/component-name-in-template-casing': [
+      'error',
+      'PascalCase',
+      {
+        registeredComponentsOnly: true,
+      },
+    ],
     'vue/max-attributes-per-line': [
       'error',
       {
diff --git a/app/javascript/dashboard/App.vue b/app/javascript/dashboard/App.vue
index 67bb3d692..6604f7cc5 100644
--- a/app/javascript/dashboard/App.vue
+++ b/app/javascript/dashboard/App.vue
@@ -128,23 +128,20 @@ export default {
     :class="{ 'app-rtl--wrapper': isRTLView }"
     :dir="isRTLView ? 'rtl' : 'ltr'"
   >
-    <update-banner :latest-chatwoot-version="latestChatwootVersion" />
+    <UpdateBanner :latest-chatwoot-version="latestChatwootVersion" />
     <template v-if="currentAccountId">
-      <pending-email-verification-banner v-if="hideOnOnboardingView" />
-      <payment-pending-banner v-if="hideOnOnboardingView" />
-      <upgrade-banner />
+      <PendingEmailVerificationBanner v-if="hideOnOnboardingView" />
+      <PaymentPendingBanner v-if="hideOnOnboardingView" />
+      <UpgradeBanner />
     </template>
     <transition name="fade" mode="out-in">
       <router-view />
     </transition>
-    <add-account-modal
-      :show="showAddAccountModal"
-      :has-accounts="hasAccounts"
-    />
-    <woot-snackbar-box />
-    <network-notification />
+    <AddAccountModal :show="showAddAccountModal" :has-accounts="hasAccounts" />
+    <WootSnackbarBox />
+    <NetworkNotification />
   </div>
-  <loading-state v-else />
+  <LoadingState v-else />
 </template>
 
 <style lang="scss">
diff --git a/app/javascript/dashboard/components/Accordion/AccordionItem.vue b/app/javascript/dashboard/components/Accordion/AccordionItem.vue
index fc152ff51..6fc0ee0d9 100644
--- a/app/javascript/dashboard/components/Accordion/AccordionItem.vue
+++ b/app/javascript/dashboard/components/Accordion/AccordionItem.vue
@@ -37,7 +37,7 @@ export default {
       @click="$emit('click')"
     >
       <div class="flex justify-between mb-0.5">
-        <emoji-or-icon class="inline-block w-5" :icon="icon" :emoji="emoji" />
+        <EmojiOrIcon class="inline-block w-5" :icon="icon" :emoji="emoji" />
         <h5
           class="text-slate-800 text-sm dark:text-slate-100 mb-0 py-0 pr-2 pl-0"
         >
diff --git a/app/javascript/dashboard/components/ChatList.vue b/app/javascript/dashboard/components/ChatList.vue
index f1d24cafe..4c39e6b08 100644
--- a/app/javascript/dashboard/components/ChatList.vue
+++ b/app/javascript/dashboard/components/ChatList.vue
@@ -874,7 +874,7 @@ export default {
     ]"
   >
     <slot />
-    <chat-list-header
+    <ChatListHeader
       :page-title="pageTitle"
       :has-applied-filters="hasAppliedFilters"
       :has-active-folders="hasActiveFolders"
@@ -886,14 +886,14 @@ export default {
       @basic-filter-change="onBasicFilterChange"
     />
 
-    <add-custom-views
+    <AddCustomViews
       v-if="showAddFoldersModal"
       :custom-views-query="foldersQuery"
       :open-last-saved-item="openLastSavedItemInFolder"
       @close="onCloseAddFoldersModal"
     />
 
-    <delete-custom-views
+    <DeleteCustomViews
       v-if="showDeleteFoldersModal"
       :show-delete-popup.sync="showDeleteFoldersModal"
       :active-custom-view="activeFolder"
@@ -902,7 +902,7 @@ export default {
       @close="onCloseDeleteFoldersModal"
     />
 
-    <chat-type-tabs
+    <ChatTypeTabs
       v-if="!hasAppliedFiltersOrActiveFolders"
       :items="assigneeTabItems"
       :active-tab="activeAssigneeTab"
@@ -916,7 +916,7 @@ export default {
     >
       {{ $t('CHAT_LIST.LIST.404') }}
     </p>
-    <conversation-bulk-actions
+    <ConversationBulkActions
       v-if="selectedConversations.length"
       :conversations="selectedConversations"
       :all-conversations-selected="allConversationsSelected"
@@ -935,7 +935,7 @@ export default {
       class="flex-1 conversations-list"
       :class="{ 'overflow-hidden': isContextMenuOpen }"
     >
-      <virtual-list
+      <VirtualList
         ref="conversationVirtualList"
         :data-key="'id'"
         :data-sources="conversationList"
@@ -954,20 +954,20 @@ export default {
           >
             {{ $t('CHAT_LIST.EOF') }}
           </p>
-          <intersection-observer
+          <IntersectionObserver
             v-if="!showEndOfListMessage && !chatListLoading"
             :options="infiniteLoaderOptions"
             @observed="loadMoreConversations"
           />
         </template>
-      </virtual-list>
+      </VirtualList>
     </div>
     <woot-modal
       :show.sync="showAdvancedFilters"
       :on-close="closeAdvanceFiltersModal"
       size="medium"
     >
-      <conversation-advanced-filter
+      <ConversationAdvancedFilter
         v-if="showAdvancedFilters"
         :initial-filter-types="advancedFilterTypes"
         :initial-applied-filters="appliedFilter"
diff --git a/app/javascript/dashboard/components/ChatListHeader.vue b/app/javascript/dashboard/components/ChatListHeader.vue
index d2df2bea3..b519f6b03 100644
--- a/app/javascript/dashboard/components/ChatListHeader.vue
+++ b/app/javascript/dashboard/components/ChatListHeader.vue
@@ -106,7 +106,7 @@ const hasAppliedFiltersOrActiveFolders = computed(() => {
         size="tiny"
         @click="emits('filters-modal')"
       />
-      <conversation-basic-filter
+      <ConversationBasicFilter
         v-if="!hasAppliedFiltersOrActiveFolders"
         @changeFilter="onBasicFilterChange"
       />
diff --git a/app/javascript/dashboard/components/ConversationItem.vue b/app/javascript/dashboard/components/ConversationItem.vue
index 4dbc3be3a..0a4e2b590 100644
--- a/app/javascript/dashboard/components/ConversationItem.vue
+++ b/app/javascript/dashboard/components/ConversationItem.vue
@@ -49,7 +49,7 @@ export default {
 </script>
 
 <template>
-  <conversation-card
+  <ConversationCard
     :key="source.id"
     :active-label="label"
     :team-id="teamId"
diff --git a/app/javascript/dashboard/components/CustomAttribute.vue b/app/javascript/dashboard/components/CustomAttribute.vue
index d67d84e4a..7a0a871de 100644
--- a/app/javascript/dashboard/components/CustomAttribute.vue
+++ b/app/javascript/dashboard/components/CustomAttribute.vue
@@ -216,7 +216,7 @@ export default {
             "
           >
             {{ label }}
-            <helper-text-popup
+            <HelperTextPopup
               v-if="description"
               :message="description"
               class="mt-0.5"
@@ -309,7 +309,7 @@ export default {
       </div>
     </div>
     <div v-if="isAttributeTypeList">
-      <multiselect-dropdown
+      <MultiselectDropdown
         :options="listOptions"
         :selected-item="selectedItem"
         :has-thumbnail="false"
diff --git a/app/javascript/dashboard/components/CustomSnoozeModal.vue b/app/javascript/dashboard/components/CustomSnoozeModal.vue
index 39350f1d4..6538e574e 100644
--- a/app/javascript/dashboard/components/CustomSnoozeModal.vue
+++ b/app/javascript/dashboard/components/CustomSnoozeModal.vue
@@ -44,7 +44,7 @@ export default {
   <div class="flex flex-col">
     <woot-modal-header :header-title="$t('CONVERSATION.CUSTOM_SNOOZE.TITLE')" />
     <form class="modal-content" @submit.prevent="chooseTime">
-      <date-picker
+      <DatePicker
         v-model="snoozeTime"
         type="datetime"
         inline
diff --git a/app/javascript/dashboard/components/SnackbarContainer.vue b/app/javascript/dashboard/components/SnackbarContainer.vue
index 9de23890c..26bb040be 100644
--- a/app/javascript/dashboard/components/SnackbarContainer.vue
+++ b/app/javascript/dashboard/components/SnackbarContainer.vue
@@ -45,7 +45,7 @@ export default {
     tag="div"
     class="left-0 my-0 mx-auto max-w-[25rem] overflow-hidden absolute right-0 text-center top-4 z-[9999]"
   >
-    <woot-snackbar
+    <WootSnackbar
       v-for="snackMessage in snackMessages"
       :key="snackMessage.key"
       :message="snackMessage.message"
diff --git a/app/javascript/dashboard/components/app/PaymentPendingBanner.vue b/app/javascript/dashboard/components/app/PaymentPendingBanner.vue
index 2d5c229c1..bd41bde6a 100644
--- a/app/javascript/dashboard/components/app/PaymentPendingBanner.vue
+++ b/app/javascript/dashboard/components/app/PaymentPendingBanner.vue
@@ -77,7 +77,7 @@ export default {
 </script>
 
 <template>
-  <banner
+  <Banner
     v-if="shouldShowBanner"
     color-scheme="alert"
     :banner-message="bannerMessage"
diff --git a/app/javascript/dashboard/components/app/PendingEmailVerificationBanner.vue b/app/javascript/dashboard/components/app/PendingEmailVerificationBanner.vue
index ba4c42ff6..3c8736438 100644
--- a/app/javascript/dashboard/components/app/PendingEmailVerificationBanner.vue
+++ b/app/javascript/dashboard/components/app/PendingEmailVerificationBanner.vue
@@ -31,7 +31,7 @@ export default {
 </script>
 
 <template>
-  <banner
+  <Banner
     v-if="shouldShowBanner"
     color-scheme="alert"
     :banner-message="bannerMessage"
diff --git a/app/javascript/dashboard/components/app/UpdateBanner.vue b/app/javascript/dashboard/components/app/UpdateBanner.vue
index f3e4bad90..bc71d6977 100644
--- a/app/javascript/dashboard/components/app/UpdateBanner.vue
+++ b/app/javascript/dashboard/components/app/UpdateBanner.vue
@@ -67,7 +67,7 @@ export default {
 };
 </script>
 <template>
-  <banner
+  <Banner
     v-if="shouldShowBanner"
     color-scheme="primary"
     :banner-message="bannerMessage"
diff --git a/app/javascript/dashboard/components/app/UpgradeBanner.vue b/app/javascript/dashboard/components/app/UpgradeBanner.vue
index 166578a18..4cd1b8f4f 100644
--- a/app/javascript/dashboard/components/app/UpgradeBanner.vue
+++ b/app/javascript/dashboard/components/app/UpgradeBanner.vue
@@ -77,7 +77,7 @@ export default {
 </script>
 
 <template>
-  <banner
+  <Banner
     v-if="shouldShowBanner"
     color-scheme="alert"
     :banner-message="bannerMessage"
diff --git a/app/javascript/dashboard/components/buttons/FormSubmitButton.vue b/app/javascript/dashboard/components/buttons/FormSubmitButton.vue
index e753eb6b7..446f16ebf 100644
--- a/app/javascript/dashboard/components/buttons/FormSubmitButton.vue
+++ b/app/javascript/dashboard/components/buttons/FormSubmitButton.vue
@@ -58,7 +58,7 @@ export default {
   >
     <fluent-icon v-if="!!iconClass" :icon="iconClass" class="icon" />
     <span>{{ buttonText }}</span>
-    <spinner v-if="loading" class="ml-2" :color-scheme="spinnerClass" />
+    <Spinner v-if="loading" class="ml-2" :color-scheme="spinnerClass" />
   </button>
 </template>
 <style lang="scss" scoped>
diff --git a/app/javascript/dashboard/components/buttons/ResolveAction.vue b/app/javascript/dashboard/components/buttons/ResolveAction.vue
index a0d88ec48..9c7f22c3e 100644
--- a/app/javascript/dashboard/components/buttons/ResolveAction.vue
+++ b/app/javascript/dashboard/components/buttons/ResolveAction.vue
@@ -193,8 +193,8 @@ export default {
       v-on-clickaway="closeDropdown"
       class="dropdown-pane dropdown-pane--open"
     >
-      <woot-dropdown-menu class="mb-0">
-        <woot-dropdown-item v-if="!isPending">
+      <WootDropdownMenu class="mb-0">
+        <WootDropdownItem v-if="!isPending">
           <woot-button
             variant="clear"
             color-scheme="secondary"
@@ -204,8 +204,8 @@ export default {
           >
             {{ $t('CONVERSATION.RESOLVE_DROPDOWN.SNOOZE_UNTIL') }}
           </woot-button>
-        </woot-dropdown-item>
-        <woot-dropdown-item v-if="!isPending">
+        </WootDropdownItem>
+        <WootDropdownItem v-if="!isPending">
           <woot-button
             variant="clear"
             color-scheme="secondary"
@@ -215,8 +215,8 @@ export default {
           >
             {{ $t('CONVERSATION.RESOLVE_DROPDOWN.MARK_PENDING') }}
           </woot-button>
-        </woot-dropdown-item>
-      </woot-dropdown-menu>
+        </WootDropdownItem>
+      </WootDropdownMenu>
     </div>
   </div>
 </template>
diff --git a/app/javascript/dashboard/components/layout/AvailabilityStatus.vue b/app/javascript/dashboard/components/layout/AvailabilityStatus.vue
index 935886953..c4bb78ebe 100644
--- a/app/javascript/dashboard/components/layout/AvailabilityStatus.vue
+++ b/app/javascript/dashboard/components/layout/AvailabilityStatus.vue
@@ -91,9 +91,9 @@ export default {
 </script>
 
 <template>
-  <woot-dropdown-menu>
-    <woot-dropdown-header :title="$t('SIDEBAR.SET_AVAILABILITY_TITLE')" />
-    <woot-dropdown-item
+  <WootDropdownMenu>
+    <WootDropdownHeader :title="$t('SIDEBAR.SET_AVAILABILITY_TITLE')" />
+    <WootDropdownItem
       v-for="status in availabilityStatuses"
       :key="status.value"
       class="flex items-baseline"
@@ -105,12 +105,12 @@ export default {
         class-names="status-change--dropdown-button"
         @click="changeAvailabilityStatus(status.value)"
       >
-        <availability-status-badge :status="status.value" />
+        <AvailabilityStatusBadge :status="status.value" />
         {{ status.label }}
       </woot-button>
-    </woot-dropdown-item>
-    <woot-dropdown-divider />
-    <woot-dropdown-item class="flex items-center justify-between p-2 m-0">
+    </WootDropdownItem>
+    <WootDropdownDivider />
+    <WootDropdownItem class="flex items-center justify-between p-2 m-0">
       <div class="flex items-center">
         <fluent-icon
           v-tooltip.right-start="$t('SIDEBAR.SET_AUTO_OFFLINE.INFO_TEXT')"
@@ -132,7 +132,7 @@ export default {
         :value="currentUserAutoOffline"
         @input="updateAutoOffline"
       />
-    </woot-dropdown-item>
-    <woot-dropdown-divider />
-  </woot-dropdown-menu>
+    </WootDropdownItem>
+    <WootDropdownDivider />
+  </WootDropdownMenu>
 </template>
diff --git a/app/javascript/dashboard/components/layout/Sidebar.vue b/app/javascript/dashboard/components/layout/Sidebar.vue
index 3aca6b7df..c30dcbbc4 100644
--- a/app/javascript/dashboard/components/layout/Sidebar.vue
+++ b/app/javascript/dashboard/components/layout/Sidebar.vue
@@ -182,7 +182,7 @@ export default {
 
 <template>
   <aside class="flex h-full">
-    <primary-sidebar
+    <PrimarySidebar
       :logo-source="globalConfig.logoThumbnail"
       :installation-name="globalConfig.installationName"
       :is-a-custom-branded-instance="isACustomBrandedInstance"
@@ -193,7 +193,7 @@ export default {
       @key-shortcut-modal="toggleKeyShortcutModal"
       @open-notification-panel="openNotificationPanel"
     />
-    <secondary-sidebar
+    <SecondarySidebar
       v-if="showSecondarySidebar"
       :class="sidebarClassName"
       :account-id="accountId"
diff --git a/app/javascript/dashboard/components/layout/sidebarComponents/AgentDetails.vue b/app/javascript/dashboard/components/layout/sidebarComponents/AgentDetails.vue
index e64786aea..be3e0c6bb 100644
--- a/app/javascript/dashboard/components/layout/sidebarComponents/AgentDetails.vue
+++ b/app/javascript/dashboard/components/layout/sidebarComponents/AgentDetails.vue
@@ -29,7 +29,7 @@ export default {
     class="items-center flex rounded-full"
     @click="handleClick"
   >
-    <thumbnail
+    <Thumbnail
       :src="currentUser.avatar_url"
       :username="currentUser.name"
       :status="statusOfAgent"
diff --git a/app/javascript/dashboard/components/layout/sidebarComponents/OptionsMenu.vue b/app/javascript/dashboard/components/layout/sidebarComponents/OptionsMenu.vue
index 93df9c1c1..cb5cdb143 100644
--- a/app/javascript/dashboard/components/layout/sidebarComponents/OptionsMenu.vue
+++ b/app/javascript/dashboard/components/layout/sidebarComponents/OptionsMenu.vue
@@ -63,9 +63,9 @@ export default {
       class="left-3 rtl:left-auto rtl:right-3 bottom-16 w-64 absolute z-30 rounded-md shadow-xl bg-white dark:bg-slate-800 py-2 px-2 border border-slate-25 dark:border-slate-700"
       :class="{ 'block visible': show }"
     >
-      <availability-status />
-      <woot-dropdown-menu>
-        <woot-dropdown-item v-if="showChangeAccountOption">
+      <AvailabilityStatus />
+      <WootDropdownMenu>
+        <WootDropdownItem v-if="showChangeAccountOption">
           <woot-button
             variant="clear"
             color-scheme="secondary"
@@ -75,8 +75,8 @@ export default {
           >
             {{ $t('SIDEBAR_ITEMS.CHANGE_ACCOUNTS') }}
           </woot-button>
-        </woot-dropdown-item>
-        <woot-dropdown-item v-if="globalConfig.chatwootInboxToken">
+        </WootDropdownItem>
+        <WootDropdownItem v-if="globalConfig.chatwootInboxToken">
           <woot-button
             variant="clear"
             color-scheme="secondary"
@@ -86,8 +86,8 @@ export default {
           >
             {{ $t('SIDEBAR_ITEMS.CONTACT_SUPPORT') }}
           </woot-button>
-        </woot-dropdown-item>
-        <woot-dropdown-item>
+        </WootDropdownItem>
+        <WootDropdownItem>
           <woot-button
             variant="clear"
             color-scheme="secondary"
@@ -97,8 +97,8 @@ export default {
           >
             {{ $t('SIDEBAR_ITEMS.KEYBOARD_SHORTCUTS') }}
           </woot-button>
-        </woot-dropdown-item>
-        <woot-dropdown-item>
+        </WootDropdownItem>
+        <WootDropdownItem>
           <router-link
             v-slot="{ href, isActive, navigate }"
             :to="`/app/accounts/${accountId}/profile/settings`"
@@ -116,8 +116,8 @@ export default {
               </span>
             </a>
           </router-link>
-        </woot-dropdown-item>
-        <woot-dropdown-item>
+        </WootDropdownItem>
+        <WootDropdownItem>
           <woot-button
             variant="clear"
             color-scheme="secondary"
@@ -127,8 +127,8 @@ export default {
           >
             {{ $t('SIDEBAR_ITEMS.APPEARANCE') }}
           </woot-button>
-        </woot-dropdown-item>
-        <woot-dropdown-item v-if="currentUser.type === 'SuperAdmin'">
+        </WootDropdownItem>
+        <WootDropdownItem v-if="currentUser.type === 'SuperAdmin'">
           <a
             href="/super_admin"
             class="button small clear secondary bg-white dark:bg-slate-800 h-8"
@@ -145,8 +145,8 @@ export default {
               {{ $t('SIDEBAR_ITEMS.SUPER_ADMIN_CONSOLE') }}
             </span>
           </a>
-        </woot-dropdown-item>
-        <woot-dropdown-item>
+        </WootDropdownItem>
+        <WootDropdownItem>
           <woot-button
             variant="clear"
             color-scheme="secondary"
@@ -156,8 +156,8 @@ export default {
           >
             {{ $t('SIDEBAR_ITEMS.LOGOUT') }}
           </woot-button>
-        </woot-dropdown-item>
-      </woot-dropdown-menu>
+        </WootDropdownItem>
+      </WootDropdownMenu>
     </div>
   </transition>
 </template>
diff --git a/app/javascript/dashboard/components/layout/sidebarComponents/Primary.vue b/app/javascript/dashboard/components/layout/sidebarComponents/Primary.vue
index d24866826..79cd2b8ef 100644
--- a/app/javascript/dashboard/components/layout/sidebarComponents/Primary.vue
+++ b/app/javascript/dashboard/components/layout/sidebarComponents/Primary.vue
@@ -71,13 +71,13 @@ export default {
     class="h-full w-16 bg-white dark:bg-slate-900 border-r border-slate-50 dark:border-slate-800/50 rtl:border-l rtl:border-r-0 flex justify-between flex-col"
   >
     <div class="flex flex-col items-center">
-      <logo
+      <Logo
         :source="logoSource"
         :name="installationName"
         :account-id="accountId"
         class="m-4 mb-10"
       />
-      <primary-nav-item
+      <PrimaryNavItem
         v-for="menuItem in menuItems"
         :key="menuItem.toState"
         :icon="menuItem.icon"
@@ -87,16 +87,16 @@ export default {
       />
     </div>
     <div class="flex flex-col items-center justify-end pb-6">
-      <primary-nav-item
+      <PrimaryNavItem
         v-if="!isACustomBrandedInstance"
         icon="book-open-globe"
         name="DOCS"
         :open-in-new-page="true"
         :to="helpDocsURL"
       />
-      <notification-bell @open-notification-panel="openNotificationPanel" />
-      <agent-details @toggle-menu="toggleOptions" />
-      <options-menu
+      <NotificationBell @open-notification-panel="openNotificationPanel" />
+      <AgentDetails @toggle-menu="toggleOptions" />
+      <OptionsMenu
         :show="showOptionsMenu"
         @toggle-accounts="toggleAccountModal"
         @show-support-chat-window="toggleSupportChatWindow"
diff --git a/app/javascript/dashboard/components/layout/sidebarComponents/Secondary.vue b/app/javascript/dashboard/components/layout/sidebarComponents/Secondary.vue
index 498eaf813..469f875f0 100644
--- a/app/javascript/dashboard/components/layout/sidebarComponents/Secondary.vue
+++ b/app/javascript/dashboard/components/layout/sidebarComponents/Secondary.vue
@@ -239,18 +239,18 @@ export default {
     v-if="hasSecondaryMenu"
     class="h-full overflow-auto w-48 flex flex-col bg-white dark:bg-slate-900 border-r dark:border-slate-800/50 rtl:border-r-0 rtl:border-l border-slate-50 text-sm px-2 pb-8"
   >
-    <account-context @toggle-accounts="toggleAccountModal" />
+    <AccountContext @toggle-accounts="toggleAccountModal" />
     <transition-group
       name="menu-list"
       tag="ul"
       class="pt-2 list-none ml-0 mb-0"
     >
-      <secondary-nav-item
+      <SecondaryNavItem
         v-for="menuItem in accessibleMenuItems"
         :key="menuItem.toState"
         :menu-item="menuItem"
       />
-      <secondary-nav-item
+      <SecondaryNavItem
         v-for="menuItem in additionalSecondaryMenuItems[menuConfig.parentNav]"
         :key="menuItem.key"
         :menu-item="menuItem"
diff --git a/app/javascript/dashboard/components/layout/sidebarComponents/SecondaryNavItem.vue b/app/javascript/dashboard/components/layout/sidebarComponents/SecondaryNavItem.vue
index 7e468934b..b3cd48327 100644
--- a/app/javascript/dashboard/components/layout/sidebarComponents/SecondaryNavItem.vue
+++ b/app/javascript/dashboard/components/layout/sidebarComponents/SecondaryNavItem.vue
@@ -241,7 +241,7 @@ export default {
     </router-link>
 
     <ul v-if="hasSubMenu" class="mb-0 ml-0 list-none">
-      <secondary-child-nav-item
+      <SecondaryChildNavItem
         v-for="child in menuItem.children"
         :key="child.id"
         :to="child.toState"
diff --git a/app/javascript/dashboard/components/ui/DateRangePicker.vue b/app/javascript/dashboard/components/ui/DateRangePicker.vue
index cf422fe92..bb87a8d92 100644
--- a/app/javascript/dashboard/components/ui/DateRangePicker.vue
+++ b/app/javascript/dashboard/components/ui/DateRangePicker.vue
@@ -26,7 +26,7 @@ export default {
 
 <template>
   <div class="date-picker">
-    <date-picker
+    <DatePicker
       :range="true"
       :confirm="true"
       :clearable="false"
diff --git a/app/javascript/dashboard/components/ui/DateTimePicker.vue b/app/javascript/dashboard/components/ui/DateTimePicker.vue
index a476d2289..b37d7853d 100644
--- a/app/javascript/dashboard/components/ui/DateTimePicker.vue
+++ b/app/javascript/dashboard/components/ui/DateTimePicker.vue
@@ -32,7 +32,7 @@ export default {
 
 <template>
   <div class="date-picker">
-    <date-picker
+    <DatePicker
       type="datetime"
       :confirm="true"
       :clearable="false"
diff --git a/app/javascript/dashboard/components/ui/Dropdown/DropdownList.vue b/app/javascript/dashboard/components/ui/Dropdown/DropdownList.vue
index 0c6942e1b..7d92f721c 100644
--- a/app/javascript/dashboard/components/ui/Dropdown/DropdownList.vue
+++ b/app/javascript/dashboard/components/ui/Dropdown/DropdownList.vue
@@ -77,7 +77,7 @@ const shouldShowEmptyState = computed(() => {
     @click.stop
   >
     <slot name="search">
-      <dropdown-search
+      <DropdownSearch
         v-if="enableSearch"
         :input-value="searchTerm"
         :input-placeholder="inputPlaceholder"
@@ -87,15 +87,15 @@ const shouldShowEmptyState = computed(() => {
       />
     </slot>
     <slot name="listItem">
-      <dropdown-loading-state
+      <DropdownLoadingState
         v-if="shouldShowLoadingState"
         :message="loadingPlaceholder"
       />
-      <dropdown-empty-state
+      <DropdownEmptyState
         v-else-if="shouldShowEmptyState"
         :message="$t('REPORT.FILTER_ACTIONS.EMPTY_LIST')"
       />
-      <list-item-button
+      <ListItemButton
         v-for="item in filteredListItems"
         :key="item.id"
         :is-active="isFilterActive(item.id)"
diff --git a/app/javascript/dashboard/components/ui/WootButton.vue b/app/javascript/dashboard/components/ui/WootButton.vue
index d42a7172b..1657c45b5 100644
--- a/app/javascript/dashboard/components/ui/WootButton.vue
+++ b/app/javascript/dashboard/components/ui/WootButton.vue
@@ -111,12 +111,12 @@ export default {
     :disabled="isDisabled || isLoading"
     @click="handleClick"
   >
-    <spinner
+    <Spinner
       v-if="isLoading"
       size="small"
       :color-scheme="showDarkSpinner ? 'dark' : ''"
     />
-    <emoji-or-icon
+    <EmojiOrIcon
       v-else-if="icon || emoji"
       class="icon"
       :emoji="emoji"
diff --git a/app/javascript/dashboard/components/widgets/AutomationActionInput.vue b/app/javascript/dashboard/components/widgets/AutomationActionInput.vue
index 1e501ca6a..030cd9af9 100644
--- a/app/javascript/dashboard/components/widgets/AutomationActionInput.vue
+++ b/app/javascript/dashboard/components/widgets/AutomationActionInput.vue
@@ -162,7 +162,7 @@ export default {
             class="answer--text-input"
             placeholder="Enter url"
           />
-          <automation-action-file-input
+          <AutomationActionFileInput
             v-if="inputType === 'attachment'"
             v-model="action_params"
             :initial-file-name="initialFileName"
@@ -177,12 +177,12 @@ export default {
         @click="removeAction"
       />
     </div>
-    <automation-action-team-message-input
+    <AutomationActionTeamMessageInput
       v-if="inputType === 'team_message'"
       v-model="action_params"
       :teams="dropdownValues"
     />
-    <woot-message-editor
+    <WootMessageEditor
       v-if="inputType === 'textarea'"
       v-model="castMessageVmodel"
       rows="4"
diff --git a/app/javascript/dashboard/components/widgets/AutomationFileInput.vue b/app/javascript/dashboard/components/widgets/AutomationFileInput.vue
index 5e46dbbf8..45b5a682d 100644
--- a/app/javascript/dashboard/components/widgets/AutomationFileInput.vue
+++ b/app/javascript/dashboard/components/widgets/AutomationFileInput.vue
@@ -59,7 +59,7 @@ export default {
       :class="uploadState === 'processing' ? 'disabled' : ''"
       @change="onChangeFile"
     />
-    <spinner v-if="uploadState === 'processing'" />
+    <Spinner v-if="uploadState === 'processing'" />
     <fluent-icon v-if="uploadState === 'idle'" icon="file-upload" />
     <fluent-icon
       v-if="uploadState === 'uploaded'"
diff --git a/app/javascript/dashboard/components/widgets/ChannelItem.vue b/app/javascript/dashboard/components/widgets/ChannelItem.vue
index c36a28ffe..db586a593 100644
--- a/app/javascript/dashboard/components/widgets/ChannelItem.vue
+++ b/app/javascript/dashboard/components/widgets/ChannelItem.vue
@@ -58,7 +58,7 @@ export default {
 };
 </script>
 <template>
-  <channel-selector
+  <ChannelSelector
     :class="{ inactive: !isActive }"
     :title="channel.name"
     :src="getChannelThumbnail()"
diff --git a/app/javascript/dashboard/components/widgets/ColorPicker.vue b/app/javascript/dashboard/components/widgets/ColorPicker.vue
index 192f484ff..c41532e41 100644
--- a/app/javascript/dashboard/components/widgets/ColorPicker.vue
+++ b/app/javascript/dashboard/components/widgets/ColorPicker.vue
@@ -39,7 +39,7 @@ export default {
       :style="`background-color: ${value}`"
       @click.prevent="toggleColorPicker"
     />
-    <chrome
+    <Chrome
       v-if="isPickerOpen"
       v-on-clickaway="closeTogglePicker"
       :disable-alpha="true"
diff --git a/app/javascript/dashboard/components/widgets/DashboardApp/Frame.vue b/app/javascript/dashboard/components/widgets/DashboardApp/Frame.vue
index 55b2ec857..824ff58ca 100644
--- a/app/javascript/dashboard/components/widgets/DashboardApp/Frame.vue
+++ b/app/javascript/dashboard/components/widgets/DashboardApp/Frame.vue
@@ -87,7 +87,7 @@ export default {
       :key="index"
       class="dashboard-app--list"
     >
-      <loading-state
+      <LoadingState
         v-if="iframeLoading"
         :message="$t('DASHBOARD_APPS.LOADING_MESSAGE')"
         class="dashboard-app_loading-container"
diff --git a/app/javascript/dashboard/components/widgets/LabelSelector.vue b/app/javascript/dashboard/components/widgets/LabelSelector.vue
index 5d11f14b1..0a989a235 100644
--- a/app/javascript/dashboard/components/widgets/LabelSelector.vue
+++ b/app/javascript/dashboard/components/widgets/LabelSelector.vue
@@ -78,7 +78,7 @@ export default {
 
 <template>
   <div v-on-clickaway="closeDropdownLabel" class="label-wrap">
-    <add-label @add="toggleLabels" />
+    <AddLabel @add="toggleLabels" />
     <woot-label
       v-for="label in savedLabels"
       :key="label.id"
@@ -94,7 +94,7 @@ export default {
         :class="{ 'dropdown-pane--open': showSearchDropdownLabel }"
         class="dropdown-pane"
       >
-        <label-dropdown
+        <LabelDropdown
           v-if="showSearchDropdownLabel"
           :account-labels="allLabels"
           :selected-labels="selectedLabels"
diff --git a/app/javascript/dashboard/components/widgets/TableFooter.vue b/app/javascript/dashboard/components/widgets/TableFooter.vue
index 025d39ec8..de3f2a2bb 100644
--- a/app/javascript/dashboard/components/widgets/TableFooter.vue
+++ b/app/javascript/dashboard/components/widgets/TableFooter.vue
@@ -31,12 +31,12 @@ const isFooterVisible = computed(
     v-if="isFooterVisible"
     class="h-12 flex items-center justify-between px-6"
   >
-    <table-footer-results
+    <TableFooterResults
       :first-index="firstIndex"
       :last-index="lastIndex"
       :total-count="totalCount"
     />
-    <table-footer-pagination
+    <TableFooterPagination
       v-if="totalCount"
       :current-page="currentPage"
       :total-pages="totalPages"
diff --git a/app/javascript/dashboard/components/widgets/ThumbnailGroup.vue b/app/javascript/dashboard/components/widgets/ThumbnailGroup.vue
index ed45c56d2..0b27f7c85 100644
--- a/app/javascript/dashboard/components/widgets/ThumbnailGroup.vue
+++ b/app/javascript/dashboard/components/widgets/ThumbnailGroup.vue
@@ -35,7 +35,7 @@ export default {
 </script>
 <template>
   <div class="overlapping-thumbnails">
-    <thumbnail
+    <Thumbnail
       v-for="user in usersList"
       :key="user.id"
       v-tooltip="user.name"
diff --git a/app/javascript/dashboard/components/widgets/UserAvatarWithName.vue b/app/javascript/dashboard/components/widgets/UserAvatarWithName.vue
index a74de3c18..5ddca9de3 100644
--- a/app/javascript/dashboard/components/widgets/UserAvatarWithName.vue
+++ b/app/javascript/dashboard/components/widgets/UserAvatarWithName.vue
@@ -23,7 +23,7 @@ export default {
 </script>
 <template>
   <div class="flex items-center gap-1.5 text-left">
-    <thumbnail
+    <Thumbnail
       :src="user.thumbnail"
       :size="size"
       :username="user.name"
diff --git a/app/javascript/dashboard/components/widgets/WootWriter/Editor.vue b/app/javascript/dashboard/components/widgets/WootWriter/Editor.vue
index 75bb6e8bf..54f3112ad 100644
--- a/app/javascript/dashboard/components/widgets/WootWriter/Editor.vue
+++ b/app/javascript/dashboard/components/widgets/WootWriter/Editor.vue
@@ -684,17 +684,17 @@ export default {
 
 <template>
   <div ref="editorRoot" class="relative editor-root">
-    <tag-agents
+    <TagAgents
       v-if="showUserMentions && isPrivate"
       :search-key="mentionSearchKey"
       @click="insertMentionNode"
     />
-    <canned-response
+    <CannedResponse
       v-if="shouldShowCannedResponses"
       :search-key="cannedSearchTerm"
       @click="insertCannedResponse"
     />
-    <variable-list
+    <VariableList
       v-if="shouldShowVariables"
       :search-key="variableSearchTerm"
       @click="insertVariable"
diff --git a/app/javascript/dashboard/components/widgets/WootWriter/ReplyBottomPanel.vue b/app/javascript/dashboard/components/widgets/WootWriter/ReplyBottomPanel.vue
index fbfe82c9b..77f11ecf1 100644
--- a/app/javascript/dashboard/components/widgets/WootWriter/ReplyBottomPanel.vue
+++ b/app/javascript/dashboard/components/widgets/WootWriter/ReplyBottomPanel.vue
@@ -249,7 +249,7 @@ export default {
         size="small"
         @click="toggleEmojiPicker"
       />
-      <file-upload
+      <FileUpload
         ref="upload"
         v-tooltip.top-end="$t('CONVERSATION.REPLYBOX.TIP_ATTACH_ICON')"
         input-id="conversationAttachment"
@@ -274,7 +274,7 @@ export default {
           variant="smooth"
           size="small"
         />
-      </file-upload>
+      </FileUpload>
       <woot-button
         v-if="showAudioRecorderButton"
         v-tooltip.top-end="$t('CONVERSATION.REPLYBOX.TIP_AUDIORECORDER_ICON')"
@@ -326,7 +326,7 @@ export default {
         :title="'Whatsapp Templates'"
         @click="$emit('selectWhatsappTemplate')"
       />
-      <video-call-button
+      <VideoCallButton
         v-if="(isAWebWidgetInbox || isAPIInbox) && !isOnPrivateNote"
         :conversation-id="conversationId"
       />
diff --git a/app/javascript/dashboard/components/widgets/conversation/CannedResponse.vue b/app/javascript/dashboard/components/widgets/conversation/CannedResponse.vue
index cdd46e7c8..904145da5 100644
--- a/app/javascript/dashboard/components/widgets/conversation/CannedResponse.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/CannedResponse.vue
@@ -42,7 +42,7 @@ export default {
 </script>
 
 <template>
-  <mention-box
+  <MentionBox
     v-if="items.length"
     :items="items"
     @mention-select="handleMentionClick"
@@ -50,5 +50,5 @@ export default {
     <template slot-scope="{ item }">
       <strong>{{ item.label }}</strong> - {{ item.description }}
     </template>
-  </mention-box>
+  </MentionBox>
 </template>
diff --git a/app/javascript/dashboard/components/widgets/conversation/ConversationAdvancedFilter.vue b/app/javascript/dashboard/components/widgets/conversation/ConversationAdvancedFilter.vue
index 1106936b7..161326d0f 100644
--- a/app/javascript/dashboard/components/widgets/conversation/ConversationAdvancedFilter.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/ConversationAdvancedFilter.vue
@@ -310,7 +310,7 @@ export default {
       <div
         class="p-4 mb-4 border border-solid rounded-lg bg-slate-25 dark:bg-slate-900 border-slate-50 dark:border-slate-700/50"
       >
-        <filter-input-box
+        <FilterInputBox
           v-for="(filter, i) in appliedFilters"
           :key="i"
           v-model="appliedFilters[i]"
diff --git a/app/javascript/dashboard/components/widgets/conversation/ConversationBasicFilter.vue b/app/javascript/dashboard/components/widgets/conversation/ConversationBasicFilter.vue
index a8cb8f912..3dd9b7213 100644
--- a/app/javascript/dashboard/components/widgets/conversation/ConversationBasicFilter.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/ConversationBasicFilter.vue
@@ -83,7 +83,7 @@ export default {
         <span class="text-xs font-medium text-slate-800 dark:text-slate-100">{{
           $t('CHAT_LIST.CHAT_SORT.STATUS')
         }}</span>
-        <filter-item
+        <FilterItem
           type="status"
           :selected-value="chatStatus"
           :items="chatStatusItems"
@@ -95,7 +95,7 @@ export default {
         <span class="text-xs font-medium text-slate-800 dark:text-slate-100">{{
           $t('CHAT_LIST.CHAT_SORT.ORDER_BY')
         }}</span>
-        <filter-item
+        <FilterItem
           type="sort"
           :selected-value="sortFilter"
           :items="chatSortItems"
diff --git a/app/javascript/dashboard/components/widgets/conversation/ConversationBox.vue b/app/javascript/dashboard/components/widgets/conversation/ConversationBox.vue
index 1289060e7..bd25ef551 100644
--- a/app/javascript/dashboard/components/widgets/conversation/ConversationBox.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/ConversationBox.vue
@@ -94,7 +94,7 @@ export default {
     class="conversation-details-wrap bg-slate-25 dark:bg-slate-800"
     :class="{ 'with-border-right': !isOnExpandedLayout }"
   >
-    <conversation-header
+    <ConversationHeader
       v-if="currentChat.id"
       :chat="currentChat"
       :is-inbox-view="isInboxView"
@@ -119,14 +119,14 @@ export default {
       v-show="!activeIndex"
       class="flex bg-slate-25 dark:bg-slate-800 m-0 h-full min-h-0"
     >
-      <messages-view
+      <MessagesView
         v-if="currentChat.id"
         :inbox-id="inboxId"
         :is-inbox-view="isInboxView"
         :is-contact-panel-open="isContactPanelOpen"
         @contact-panel-toggle="onToggleContactPanel"
       />
-      <empty-state
+      <EmptyState
         v-if="!currentChat.id && !isInboxView"
         :is-on-expanded-layout="isOnExpandedLayout"
       />
@@ -134,7 +134,7 @@ export default {
         v-show="showContactPanel"
         class="conversation-sidebar-wrap basis-full sm:basis-[17.5rem] md:basis-[18.75rem] lg:basis-[19.375rem] xl:basis-[20.625rem] 2xl:basis-[25rem] rtl:border-r border-slate-50 dark:border-slate-700 h-auto overflow-auto z-10 flex-shrink-0 flex-grow-0"
       >
-        <contact-panel
+        <ContactPanel
           v-if="showContactPanel"
           :conversation-id="currentChat.id"
           :inbox-id="currentChat.inbox_id"
@@ -142,7 +142,7 @@ export default {
         />
       </div>
     </div>
-    <dashboard-app-frame
+    <DashboardAppFrame
       v-for="(dashboardApp, index) in dashboardApps"
       v-show="activeIndex - 1 === index"
       :key="currentChat.id + '-' + dashboardApp.id"
diff --git a/app/javascript/dashboard/components/widgets/conversation/ConversationCard.vue b/app/javascript/dashboard/components/widgets/conversation/ConversationCard.vue
index 3463cae20..254c4d9d1 100644
--- a/app/javascript/dashboard/components/widgets/conversation/ConversationCard.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/ConversationCard.vue
@@ -252,7 +252,7 @@ export default {
         @change="onSelectConversation($event.target.checked)"
       />
     </label>
-    <thumbnail
+    <Thumbnail
       v-if="bulkActionCheck"
       :src="currentContact.thumbnail"
       :badge="inboxBadge"
@@ -264,7 +264,7 @@ export default {
       class="px-0 py-3 border-b group-hover:border-transparent flex-1 border-slate-50 dark:border-slate-800/75 w-[calc(100%-40px)]"
     >
       <div class="flex justify-between">
-        <inbox-name v-if="showInboxName" :inbox="inbox" />
+        <InboxName v-if="showInboxName" :inbox="inbox" />
         <div class="flex gap-2 ml-2 rtl:mr-2 rtl:ml-0">
           <span
             v-if="showAssignee && assignee.name"
@@ -277,7 +277,7 @@ export default {
             />
             {{ assignee.name }}
           </span>
-          <priority-mark :priority="chat.priority" />
+          <PriorityMark :priority="chat.priority" />
         </div>
       </div>
       <h4
@@ -285,7 +285,7 @@ export default {
       >
         {{ currentContact.name }}
       </h4>
-      <message-preview
+      <MessagePreview
         v-if="lastMessageInChat"
         :message="lastMessageInChat"
         class="conversation--message my-0 mx-2 leading-6 h-6 max-w-[96%] w-[16.875rem] text-sm text-slate-700 dark:text-slate-200"
@@ -305,7 +305,7 @@ export default {
       </p>
       <div class="absolute flex flex-col conversation--meta right-4 top-4">
         <span class="ml-auto font-normal leading-4 text-black-600 text-xxs">
-          <time-ago
+          <TimeAgo
             :last-activity-timestamp="chat.timestamp"
             :created-at-timestamp="chat.created_at"
           />
@@ -316,11 +316,11 @@ export default {
           {{ unreadCount > 9 ? '9+' : unreadCount }}
         </span>
       </div>
-      <card-labels :conversation-id="chat.id" class="mt-0.5 mx-2 mb-0">
+      <CardLabels :conversation-id="chat.id" class="mt-0.5 mx-2 mb-0">
         <template v-if="hasSlaPolicyId" #before>
-          <SLA-card-label :chat="chat" class="ltr:mr-1 rtl:ml-1" />
+          <SLACardLabel :chat="chat" class="ltr:mr-1 rtl:ml-1" />
         </template>
-      </card-labels>
+      </CardLabels>
     </div>
     <woot-context-menu
       v-if="showContextMenu"
@@ -329,7 +329,7 @@ export default {
       :y="contextMenu.y"
       @close="closeContextMenu"
     >
-      <conversation-context-menu
+      <ConversationContextMenu
         :status="chat.status"
         :inbox-id="inbox.id"
         :priority="chat.priority"
diff --git a/app/javascript/dashboard/components/widgets/conversation/ConversationHeader.vue b/app/javascript/dashboard/components/widgets/conversation/ConversationHeader.vue
index a94d0f478..99278d7ce 100644
--- a/app/javascript/dashboard/components/widgets/conversation/ConversationHeader.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/ConversationHeader.vue
@@ -139,7 +139,7 @@ export default {
       :class="isInboxView ? 'sm:flex-row' : 'md:flex-row'"
     >
       <div class="flex items-center justify-start max-w-full min-w-0 w-fit">
-        <back-button
+        <BackButton
           v-if="showBackButton"
           :back-url="backButtonUrl"
           class="ltr:ml-0 rtl:mr-0 rtl:ml-4"
@@ -180,7 +180,7 @@ export default {
           <div
             class="flex items-center gap-2 overflow-hidden text-xs conversation--header--actions text-ellipsis whitespace-nowrap"
           >
-            <inbox-name v-if="hasMultipleInboxes" :inbox="inbox" />
+            <InboxName v-if="hasMultipleInboxes" :inbox="inbox" />
             <span
               v-if="isSnoozed"
               class="font-medium text-yellow-600 dark:text-yellow-500"
@@ -202,12 +202,12 @@ export default {
         class="flex flex-row items-center justify-end flex-grow gap-2 mt-3 header-actions-wrap lg:mt-0"
         :class="{ 'justify-end': isContactPanelOpen }"
       >
-        <SLA-card-label v-if="hasSlaPolicyId" :chat="chat" show-extended-info />
-        <linear
+        <SLACardLabel v-if="hasSlaPolicyId" :chat="chat" show-extended-info />
+        <Linear
           v-if="isLinearIntegrationEnabled && isLinearFeatureEnabled"
           :conversation-id="currentChat.id"
         />
-        <more-actions :conversation-id="currentChat.id" />
+        <MoreActions :conversation-id="currentChat.id" />
       </div>
     </div>
   </div>
diff --git a/app/javascript/dashboard/components/widgets/conversation/EmptyState/EmptyState.vue b/app/javascript/dashboard/components/widgets/conversation/EmptyState/EmptyState.vue
index 9ec354d09..77e9d4bc0 100644
--- a/app/javascript/dashboard/components/widgets/conversation/EmptyState/EmptyState.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/EmptyState/EmptyState.vue
@@ -71,11 +71,8 @@ export default {
       v-if="!inboxesList.length && !uiFlags.isFetching && !loadingChatList"
       class="clearfix"
     >
-      <onboarding-view v-if="isAdmin" />
-      <empty-state-message
-        v-else
-        :message="$t('CONVERSATION.NO_INBOX_AGENT')"
-      />
+      <OnboardingView v-if="isAdmin" />
+      <EmptyStateMessage v-else :message="$t('CONVERSATION.NO_INBOX_AGENT')" />
     </div>
     <!-- Show empty state images if not loading -->
 
@@ -84,11 +81,11 @@ export default {
       class="flex flex-col items-center justify-center h-full"
     >
       <!-- No conversations available -->
-      <empty-state-message
+      <EmptyStateMessage
         v-if="!allConversations.length"
         :message="$t('CONVERSATION.NO_MESSAGE_1')"
       />
-      <empty-state-message
+      <EmptyStateMessage
         v-else-if="allConversations.length && !currentChat.id"
         :message="conversationMissingMessage"
       />
diff --git a/app/javascript/dashboard/components/widgets/conversation/EmptyState/EmptyStateMessage.vue b/app/javascript/dashboard/components/widgets/conversation/EmptyState/EmptyStateMessage.vue
index 2142a92a6..40c7dd557 100644
--- a/app/javascript/dashboard/components/widgets/conversation/EmptyState/EmptyStateMessage.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/EmptyState/EmptyStateMessage.vue
@@ -30,6 +30,6 @@ export default {
       <br />
     </span>
     <!-- Cmd bar, keyboard shortcuts placeholder -->
-    <feature-placeholder />
+    <FeaturePlaceholder />
   </div>
 </template>
diff --git a/app/javascript/dashboard/components/widgets/conversation/EmptyState/FeaturePlaceholder.vue b/app/javascript/dashboard/components/widgets/conversation/EmptyState/FeaturePlaceholder.vue
index 9b8419746..93b4ed956 100644
--- a/app/javascript/dashboard/components/widgets/conversation/EmptyState/FeaturePlaceholder.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/EmptyState/FeaturePlaceholder.vue
@@ -30,16 +30,16 @@ export default {
       class="flex gap-2 items-center"
     >
       <div class="flex gap-2 items-center">
-        <hotkey
+        <Hotkey
           custom-class="h-6 w-8 text-sm font-medium text-slate-700 dark:text-slate-100 bg-slate-100 dark:bg-slate-700 border-b-2 border-slate-300 dark:border-slate-500"
         >
           ⌘
-        </hotkey>
-        <hotkey
+        </Hotkey>
+        <Hotkey
           custom-class="h-6 w-8 text-sm font-medium text-slate-700 dark:text-slate-100 bg-slate-100 dark:bg-slate-700 border-b-2 border-slate-300 dark:border-slate-500"
         >
           {{ keyShortcut.key }}
-        </hotkey>
+        </Hotkey>
       </div>
       <span
         class="text-sm text-slate-700 dark:text-slate-300 font-medium text-center"
diff --git a/app/javascript/dashboard/components/widgets/conversation/Message.vue b/app/javascript/dashboard/components/widgets/conversation/Message.vue
index 9037a1cf5..b320886d6 100644
--- a/app/javascript/dashboard/components/widgets/conversation/Message.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/Message.vue
@@ -459,14 +459,14 @@ export default {
         />
       </div>
       <div :class="bubbleClass" @contextmenu="openContextMenu($event)">
-        <bubble-mail-head
+        <BubbleMailHead
           :email-attributes="contentAttributes.email"
           :cc="emailHeadAttributes.cc"
           :bcc="emailHeadAttributes.bcc"
           :is-incoming="isIncoming"
         />
-        <instagram-story-reply v-if="storyUrl" :story-url="storyUrl" />
-        <bubble-reply-to
+        <InstagramStoryReply v-if="storyUrl" :story-url="storyUrl" />
+        <BubbleReplyTo
           v-if="inReplyToMessageId && inboxSupportsReplyTo.incoming"
           :message="inReplyTo"
           :message-type="data.message_type"
@@ -483,13 +483,13 @@ export default {
             {{ $t('CONVERSATION.UNSUPPORTED_MESSAGE') }}
           </template>
         </div>
-        <bubble-text
+        <BubbleText
           v-else-if="data.content"
           :message="message"
           :is-email="isEmailContentType"
           :display-quoted-button="displayQuotedButton"
         />
-        <bubble-integration
+        <BubbleIntegration
           :message-id="data.id"
           :content-attributes="contentAttributes"
           :inbox-id="data.inbox_id"
@@ -502,31 +502,31 @@ export default {
         </span>
         <div v-if="!isPending && hasAttachments">
           <div v-for="attachment in attachments" :key="attachment.id">
-            <instagram-story
+            <InstagramStory
               v-if="isAnInstagramStory"
               :story-url="attachment.data_url"
               @error="onMediaLoadError"
             />
-            <bubble-image-audio-video
+            <BubbleImageAudioVideo
               v-else-if="isAttachmentImageVideoAudio(attachment.file_type)"
               :attachment="attachment"
               @error="onMediaLoadError"
             />
-            <bubble-location
+            <BubbleLocation
               v-else-if="attachment.file_type === 'location'"
               :latitude="attachment.coordinates_lat"
               :longitude="attachment.coordinates_long"
               :name="attachment.fallback_title"
             />
-            <bubble-contact
+            <BubbleContact
               v-else-if="attachment.file_type === 'contact'"
               :name="data.content"
               :phone-number="attachment.fallback_title"
             />
-            <bubble-file v-else :url="attachment.data_url" />
+            <BubbleFile v-else :url="attachment.data_url" />
           </div>
         </div>
-        <bubble-actions
+        <BubbleActions
           :id="data.id"
           :sender="data.sender"
           :story-sender="storySender"
@@ -543,7 +543,7 @@ export default {
           :created-at="createdAt"
         />
       </div>
-      <spinner v-if="isPending" size="tiny" />
+      <Spinner v-if="isPending" size="tiny" />
       <div
         v-if="showAvatar"
         v-tooltip.left="tooltipForSender"
@@ -569,7 +569,7 @@ export default {
       v-if="shouldShowContextMenu"
       class="invisible context-menu-wrap group-hover:visible"
     >
-      <context-menu
+      <ContextMenu
         v-if="isBubble && !isMessageDeleted"
         :context-menu-position="contextMenuPosition"
         :is-open="showContextMenu"
diff --git a/app/javascript/dashboard/components/widgets/conversation/MessagesView.vue b/app/javascript/dashboard/components/widgets/conversation/MessagesView.vue
index ffbb86527..43aba1585 100644
--- a/app/javascript/dashboard/components/widgets/conversation/MessagesView.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/MessagesView.vue
@@ -438,7 +438,7 @@ export default {
 
 <template>
   <div class="flex flex-col justify-between flex-grow h-full min-w-0 m-0">
-    <banner
+    <Banner
       v-if="!currentChat.can_reply"
       color-scheme="alert"
       :banner-message="replyWindowBannerMessage"
@@ -464,7 +464,7 @@ export default {
           <span v-if="shouldShowSpinner" class="spinner message" />
         </li>
       </transition>
-      <message
+      <Message
         v-for="message in getReadMessages"
         :key="message.id"
         class="message--read ph-no-capture"
@@ -489,7 +489,7 @@ export default {
           }}
         </span>
       </li>
-      <message
+      <Message
         v-for="message in getUnReadMessages"
         :key="message.id"
         class="message--unread ph-no-capture"
@@ -503,7 +503,7 @@ export default {
         :inbox-supports-reply-to="inboxSupportsReplyTo"
         :in-reply-to="getInReplyToMessage(message)"
       />
-      <conversation-label-suggestion
+      <ConversationLabelSuggestion
         v-if="shouldShowLabelSuggestions"
         :suggested-labels="labelSuggestions"
         :chat-labels="currentChat.labels"
@@ -529,7 +529,7 @@ export default {
           />
         </div>
       </div>
-      <reply-box
+      <ReplyBox
         :conversation-id="currentChat.id"
         :popout-reply-box.sync="isPopoutReplyBox"
         @click="showPopoutReplyBox"
diff --git a/app/javascript/dashboard/components/widgets/conversation/MoreActions.vue b/app/javascript/dashboard/components/widgets/conversation/MoreActions.vue
index 1ef0973d3..94eb35099 100644
--- a/app/javascript/dashboard/components/widgets/conversation/MoreActions.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/MoreActions.vue
@@ -72,11 +72,11 @@ export default {
       icon="share"
       @click="toggleEmailActionsModal"
     />
-    <resolve-action
+    <ResolveAction
       :conversation-id="currentChat.id"
       :status="currentChat.status"
     />
-    <email-transcript-modal
+    <EmailTranscriptModal
       v-if="showEmailActionsModal"
       :show="showEmailActionsModal"
       :current-chat="currentChat"
diff --git a/app/javascript/dashboard/components/widgets/conversation/ReplyBox.vue b/app/javascript/dashboard/components/widgets/conversation/ReplyBox.vue
index a3b851490..a051f2827 100644
--- a/app/javascript/dashboard/components/widgets/conversation/ReplyBox.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/ReplyBox.vue
@@ -1081,7 +1081,7 @@ export default {
 
 <template>
   <div class="reply-box" :class="replyBoxClass">
-    <banner
+    <Banner
       v-if="showSelfAssignBanner"
       action-button-variant="clear"
       color-scheme="secondary"
@@ -1091,7 +1091,7 @@ export default {
       :action-button-label="$t('CONVERSATION.ASSIGN_TO_ME')"
       @click="onClickSelfAssign"
     />
-    <reply-top-panel
+    <ReplyTopPanel
       :mode="replyType"
       :set-reply-mode="setReplyMode"
       :is-message-length-reaching-threshold="isMessageLengthReachingThreshold"
@@ -1099,38 +1099,38 @@ export default {
       :popout-reply-box="popoutReplyBox"
       @click="$emit('click')"
     />
-    <article-search-popover
+    <ArticleSearchPopover
       v-if="showArticleSearchPopover && connectedPortalSlug"
       :selected-portal-slug="connectedPortalSlug"
       @insert="handleInsert"
       @close="onSearchPopoverClose"
     />
     <div class="reply-box__top">
-      <reply-to-message
+      <ReplyToMessage
         v-if="shouldShowReplyToMessage"
         :message="inReplyTo"
         @dismiss="resetReplyToMessage"
       />
-      <canned-response
+      <CannedResponse
         v-if="showMentions && hasSlashCommand"
         v-on-clickaway="hideMentions"
         class="normal-editor__canned-box"
         :search-key="mentionSearchKey"
         @click="replaceText"
       />
-      <emoji-input
+      <EmojiInput
         v-if="showEmojiPicker"
         v-on-clickaway="hideEmojiPicker"
         :class="emojiDialogClassOnExpandedLayoutAndRTLView"
         :on-click="addIntoEditor"
       />
-      <reply-email-head
+      <ReplyEmailHead
         v-if="showReplyHead"
         :cc-emails.sync="ccEmails"
         :bcc-emails.sync="bccEmails"
         :to-emails.sync="toEmails"
       />
-      <woot-audio-recorder
+      <WootAudioRecorder
         v-if="showAudioRecorderEditor"
         ref="audioRecorderInput"
         :audio-record-format="audioRecordFormat"
@@ -1138,7 +1138,7 @@ export default {
         @state-recorder-changed="onStateRecorderChanged"
         @finish-record="onFinishRecorder"
       />
-      <resizable-text-area
+      <ResizableTextArea
         v-else-if="!showRichContentEditor"
         ref="messageInput"
         v-model="message"
@@ -1153,7 +1153,7 @@ export default {
         @focus="onFocus"
         @blur="onBlur"
       />
-      <woot-message-editor
+      <WootMessageEditor
         v-else
         v-model="message"
         :editor-id="editorStateId"
@@ -1178,16 +1178,16 @@ export default {
       />
     </div>
     <div v-if="hasAttachments" class="attachment-preview-box" @paste="onPaste">
-      <attachment-preview
+      <AttachmentPreview
         class="flex-col mt-4"
         :attachments="attachedFiles"
         @remove-attachment="removeAttachment"
       />
     </div>
-    <message-signature-missing-alert
+    <MessageSignatureMissingAlert
       v-if="isSignatureEnabledForInbox && !isSignatureAvailable"
     />
-    <reply-bottom-panel
+    <ReplyBottomPanel
       :conversation-id="conversationId"
       :enable-multiple-file-upload="enableMultipleFileUpload"
       :has-whatsapp-templates="hasWhatsappTemplates"
@@ -1216,7 +1216,7 @@ export default {
       @replace-text="replaceText"
       @toggle-insert-article="toggleInsertArticle"
     />
-    <whatsapp-templates
+    <WhatsappTemplates
       :inbox-id="inbox.id"
       :show="showWhatsAppTemplatesModal"
       @close="hideWhatsappTemplatesModal"
diff --git a/app/javascript/dashboard/components/widgets/conversation/ReplyToMessage.vue b/app/javascript/dashboard/components/widgets/conversation/ReplyToMessage.vue
index 047a7f3aa..2db7d6a65 100644
--- a/app/javascript/dashboard/components/widgets/conversation/ReplyToMessage.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/ReplyToMessage.vue
@@ -19,7 +19,7 @@ export default {
     <fluent-icon class="flex-shrink-0 icon" icon="arrow-reply" size="14" />
     <div class="flex-grow gap-1 mt-px text-xs truncate">
       {{ $t('CONVERSATION.REPLYBOX.REPLYING_TO') }}
-      <message-preview
+      <MessagePreview
         :message="message"
         :show-message-type="false"
         :default-empty-message="$t('CONVERSATION.REPLY_MESSAGE_NOT_FOUND')"
diff --git a/app/javascript/dashboard/components/widgets/conversation/VariableList.vue b/app/javascript/dashboard/components/widgets/conversation/VariableList.vue
index d5f4f0875..bffa8a3d8 100644
--- a/app/javascript/dashboard/components/widgets/conversation/VariableList.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/VariableList.vue
@@ -57,7 +57,7 @@ export default {
 </script>
 
 <template>
-  <mention-box
+  <MentionBox
     v-if="items.length"
     type="variable"
     :items="items"
@@ -69,7 +69,7 @@ export default {
       </span>
       ({{ item.label }})
     </template>
-  </mention-box>
+  </MentionBox>
 </template>
 <style scoped>
 .variable--list-label {
diff --git a/app/javascript/dashboard/components/widgets/conversation/WhatsappTemplates/Modal.vue b/app/javascript/dashboard/components/widgets/conversation/WhatsappTemplates/Modal.vue
index b23eefc9d..17fa51dea 100644
--- a/app/javascript/dashboard/components/widgets/conversation/WhatsappTemplates/Modal.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/WhatsappTemplates/Modal.vue
@@ -55,12 +55,12 @@ export default {
       :header-content="modalHeaderContent"
     />
     <div class="row modal-content">
-      <templates-picker
+      <TemplatesPicker
         v-if="!selectedWaTemplate"
         :inbox-id="inboxId"
         @onSelect="pickTemplate"
       />
-      <template-parser
+      <TemplateParser
         v-else
         :template="selectedWaTemplate"
         @resetTemplate="onResetTemplate"
diff --git a/app/javascript/dashboard/components/widgets/conversation/bubble/ImageAudioVideo.vue b/app/javascript/dashboard/components/widgets/conversation/bubble/ImageAudioVideo.vue
index b6e058ecf..ec021e0b9 100644
--- a/app/javascript/dashboard/components/widgets/conversation/bubble/ImageAudioVideo.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/bubble/ImageAudioVideo.vue
@@ -110,7 +110,7 @@ export default {
     <audio v-else-if="isAudio" controls class="skip-context-menu mb-0.5">
       <source :src="`${dataUrl}?t=${Date.now()}`" />
     </audio>
-    <gallery-view
+    <GalleryView
       v-if="show"
       :show.sync="show"
       :attachment="attachment"
diff --git a/app/javascript/dashboard/components/widgets/conversation/bubble/InstagramStory.vue b/app/javascript/dashboard/components/widgets/conversation/bubble/InstagramStory.vue
index 4858eab6b..e6a9b4188 100644
--- a/app/javascript/dashboard/components/widgets/conversation/bubble/InstagramStory.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/bubble/InstagramStory.vue
@@ -37,15 +37,15 @@ export default {
 };
 </script>
 <template>
-  <bubble-image
+  <BubbleImage
     v-if="!hasImgStoryError"
     :url="storyUrl"
     @error="onImageLoadError"
   />
-  <bubble-video
+  <BubbleVideo
     v-else-if="!hasVideoStoryError"
     :url="storyUrl"
     @error="onVideoLoadError"
   />
-  <instagram-story-error-place-holder v-else />
+  <InstagramStoryErrorPlaceHolder v-else />
 </template>
diff --git a/app/javascript/dashboard/components/widgets/conversation/bubble/InstagramStoryReply.vue b/app/javascript/dashboard/components/widgets/conversation/bubble/InstagramStoryReply.vue
index 38960930f..ba3583e7f 100644
--- a/app/javascript/dashboard/components/widgets/conversation/bubble/InstagramStoryReply.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/bubble/InstagramStoryReply.vue
@@ -30,6 +30,6 @@ export default {
     class="my-0 px-2 pb-0 pt-0 border-l-4 border-solid border-slate-75 dark:border-slate-600 text-slate-600 dark:text-slate-200"
   >
     <span>{{ $t('CONVERSATION.REPLIED_TO_STORY') }}</span>
-    <instagram-story :story-url="storyUrl" class="mt-3 rounded-md" />
+    <InstagramStory :story-url="storyUrl" class="mt-3 rounded-md" />
   </blockquote>
 </template>
diff --git a/app/javascript/dashboard/components/widgets/conversation/bubble/Integration.vue b/app/javascript/dashboard/components/widgets/conversation/bubble/Integration.vue
index c743e066e..f8199cc4f 100644
--- a/app/javascript/dashboard/components/widgets/conversation/bubble/Integration.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/bubble/Integration.vue
@@ -31,7 +31,7 @@ export default {
 };
 </script>
 <template>
-  <dyte-video-call
+  <DyteVideoCall
     v-if="showDyteIntegration"
     :message-id="messageId"
     :meeting-data="contentAttributes.data"
diff --git a/app/javascript/dashboard/components/widgets/conversation/bubble/ReplyTo.vue b/app/javascript/dashboard/components/widgets/conversation/bubble/ReplyTo.vue
index c4a83a26e..f3cec8480 100644
--- a/app/javascript/dashboard/components/widgets/conversation/bubble/ReplyTo.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/bubble/ReplyTo.vue
@@ -46,7 +46,7 @@ export default {
     }"
     @click="scrollToMessage"
   >
-    <message-preview
+    <MessagePreview
       class="cursor-pointer"
       :message="message"
       :show-message-type="false"
diff --git a/app/javascript/dashboard/components/widgets/conversation/bubble/Text.vue b/app/javascript/dashboard/components/widgets/conversation/bubble/Text.vue
index b36f3499d..0d0f092ed 100644
--- a/app/javascript/dashboard/components/widgets/conversation/bubble/Text.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/bubble/Text.vue
@@ -85,14 +85,14 @@ export default {
   >
     <div v-if="!isEmail" v-dompurify-html="message" class="text-content" />
     <div v-else @click="handleClickOnContent">
-      <letter
+      <Letter
         class="text-content bg-white dark:bg-white text-slate-900 dark:text-slate-900 p-2 rounded-[4px]"
         :html="message"
       />
     </div>
     <button
       v-if="showQuoteToggle"
-      class="text-slate-300 dark:text-slate-300 cursor-pointer text-xs py-1"
+      class="py-1 text-xs cursor-pointer text-slate-300 dark:text-slate-300"
       @click="toggleQuotedContent"
     >
       <span v-if="showQuotedContent" class="flex items-center gap-0.5">
@@ -104,7 +104,7 @@ export default {
         {{ $t('CHAT_LIST.SHOW_QUOTED_TEXT') }}
       </span>
     </button>
-    <gallery-view
+    <GalleryView
       v-if="showGalleryViewer"
       :show.sync="showGalleryViewer"
       :attachment="attachment"
diff --git a/app/javascript/dashboard/components/widgets/conversation/components/GalleryView.vue b/app/javascript/dashboard/components/widgets/conversation/components/GalleryView.vue
index c58e9b8de..e79bf658c 100644
--- a/app/javascript/dashboard/components/widgets/conversation/components/GalleryView.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/components/GalleryView.vue
@@ -226,7 +226,7 @@ export default {
           v-if="senderDetails"
           class="items-center flex justify-start min-w-[15rem]"
         >
-          <thumbnail
+          <Thumbnail
             v-if="senderDetails.avatar"
             :username="senderDetails.name"
             :src="senderDetails.avatar"
diff --git a/app/javascript/dashboard/components/widgets/conversation/components/SLACardLabel.vue b/app/javascript/dashboard/components/widgets/conversation/components/SLACardLabel.vue
index 11eb77b8c..9d15fc884 100644
--- a/app/javascript/dashboard/components/widgets/conversation/components/SLACardLabel.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/components/SLACardLabel.vue
@@ -145,7 +145,7 @@ export default {
         {{ slaStatus.threshold }}
       </span>
     </div>
-    <SLA-popover-card
+    <SLAPopoverCard
       v-if="showSlaPopoverCard"
       :sla-missed-events="slaEvents"
       class="right-0 top-7"
diff --git a/app/javascript/dashboard/components/widgets/conversation/components/SLAPopoverCard.vue b/app/javascript/dashboard/components/widgets/conversation/components/SLAPopoverCard.vue
index 655a42948..6c4ba4cb6 100644
--- a/app/javascript/dashboard/components/widgets/conversation/components/SLAPopoverCard.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/components/SLAPopoverCard.vue
@@ -44,12 +44,12 @@ const toggleShowAllNRT = () => {
     <span class="text-sm font-medium text-slate-900 dark:text-slate-25">
       {{ $t('SLA.EVENTS.TITLE') }}
     </span>
-    <SLA-event-item
+    <SLAEventItem
       v-if="frtMisses.length"
       :label="$t('SLA.EVENTS.FRT')"
       :items="frtMisses"
     />
-    <SLA-event-item
+    <SLAEventItem
       v-if="nrtMisses.length"
       :label="$t('SLA.EVENTS.NRT')"
       :items="nrtMisses"
@@ -75,8 +75,8 @@ const toggleShowAllNRT = () => {
           </woot-button>
         </div>
       </template>
-    </SLA-event-item>
-    <SLA-event-item
+    </SLAEventItem>
+    <SLAEventItem
       v-if="rtMisses.length"
       :label="$t('SLA.EVENTS.RT')"
       :items="rtMisses"
diff --git a/app/javascript/dashboard/components/widgets/conversation/contextMenu/Index.vue b/app/javascript/dashboard/components/widgets/conversation/contextMenu/Index.vue
index 084aeb010..ea060fd80 100644
--- a/app/javascript/dashboard/components/widgets/conversation/contextMenu/Index.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/contextMenu/Index.vue
@@ -180,14 +180,14 @@ export default {
 
 <template>
   <div class="bg-white dark:bg-slate-700 shadow-xl rounded-md p-1">
-    <menu-item
+    <MenuItem
       v-if="!hasUnreadMessages"
       :option="unreadOption"
       variant="icon"
       @click="$emit('mark-as-unread')"
     />
     <template v-for="option in statusMenuConfig">
-      <menu-item
+      <MenuItem
         v-if="show(option.key)"
         :key="option.key"
         :option="option"
@@ -195,40 +195,40 @@ export default {
         @click="toggleStatus(option.key, null)"
       />
     </template>
-    <menu-item
+    <MenuItem
       v-if="showSnooze"
       :option="snoozeOption"
       variant="icon"
       @click="snoozeConversation()"
     />
 
-    <menu-item-with-submenu :option="priorityConfig">
-      <menu-item
+    <MenuItemWithSubmenu :option="priorityConfig">
+      <MenuItem
         v-for="(option, i) in priorityConfig.options"
         :key="i"
         :option="option"
         @click="assignPriority(option.key)"
       />
-    </menu-item-with-submenu>
-    <menu-item-with-submenu
+    </MenuItemWithSubmenu>
+    <MenuItemWithSubmenu
       :option="labelMenuConfig"
       :sub-menu-available="!!labels.length"
     >
-      <menu-item
+      <MenuItem
         v-for="label in labels"
         :key="label.id"
         :option="generateMenuLabelConfig(label, 'label')"
         variant="label"
         @click="$emit('assign-label', label)"
       />
-    </menu-item-with-submenu>
-    <menu-item-with-submenu
+    </MenuItemWithSubmenu>
+    <MenuItemWithSubmenu
       :option="agentMenuConfig"
       :sub-menu-available="!!assignableAgents.length"
     >
-      <agent-loading-placeholder v-if="assignableAgentsUiFlags.isFetching" />
+      <AgentLoadingPlaceholder v-if="assignableAgentsUiFlags.isFetching" />
       <template v-else>
-        <menu-item
+        <MenuItem
           v-for="agent in assignableAgents"
           :key="agent.id"
           :option="generateMenuLabelConfig(agent, 'agent')"
@@ -236,17 +236,17 @@ export default {
           @click="$emit('assign-agent', agent)"
         />
       </template>
-    </menu-item-with-submenu>
-    <menu-item-with-submenu
+    </MenuItemWithSubmenu>
+    <MenuItemWithSubmenu
       :option="teamMenuConfig"
       :sub-menu-available="!!teams.length"
     >
-      <menu-item
+      <MenuItem
         v-for="team in teams"
         :key="team.id"
         :option="generateMenuLabelConfig(team, 'team')"
         @click="$emit('assign-team', team)"
       />
-    </menu-item-with-submenu>
+    </MenuItemWithSubmenu>
   </div>
 </template>
diff --git a/app/javascript/dashboard/components/widgets/conversation/contextMenu/agentLoadingPlaceholder.vue b/app/javascript/dashboard/components/widgets/conversation/contextMenu/agentLoadingPlaceholder.vue
index 3f08578ca..f62117f96 100644
--- a/app/javascript/dashboard/components/widgets/conversation/contextMenu/agentLoadingPlaceholder.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/contextMenu/agentLoadingPlaceholder.vue
@@ -10,7 +10,7 @@ export default {
 
 <template>
   <div class="agent-placeholder">
-    <spinner />
+    <Spinner />
     <p>{{ $t('CONVERSATION.CARD_CONTEXT_MENU.AGENTS_LOADING') }}</p>
   </div>
 </template>
diff --git a/app/javascript/dashboard/components/widgets/conversation/contextMenu/menuItem.vue b/app/javascript/dashboard/components/widgets/conversation/contextMenu/menuItem.vue
index f2671d29c..578618e03 100644
--- a/app/javascript/dashboard/components/widgets/conversation/contextMenu/menuItem.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/contextMenu/menuItem.vue
@@ -34,7 +34,7 @@ export default {
       class="label-pill"
       :style="{ backgroundColor: option.color }"
     />
-    <thumbnail
+    <Thumbnail
       v-if="variant === 'agent'"
       :username="option.label"
       :src="option.thumbnail"
diff --git a/app/javascript/dashboard/components/widgets/conversation/conversation/LabelSuggestion.vue b/app/javascript/dashboard/components/widgets/conversation/conversation/LabelSuggestion.vue
index 05484ce7e..ad2319ad0 100644
--- a/app/javascript/dashboard/components/widgets/conversation/conversation/LabelSuggestion.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/conversation/LabelSuggestion.vue
@@ -171,7 +171,7 @@ export default {
               "
             />
           </button>
-          <woot-button
+          <WootButton
             v-if="preparedLabels.length === 1"
             v-tooltip.top="{
               content: $t('LABEL_MGMT.SUGGESTIONS.TOOLTIP.DISMISS'),
@@ -187,7 +187,7 @@ export default {
           />
         </div>
         <div v-if="preparedLabels.length > 1">
-          <woot-button
+          <WootButton
             :variant="selectedLabels.length === 0 ? 'smooth' : ''"
             class="label--add"
             icon="add"
@@ -195,8 +195,8 @@ export default {
             @click="addAllLabels"
           >
             {{ addButtonText }}
-          </woot-button>
-          <woot-button
+          </WootButton>
+          <WootButton
             v-tooltip.top="{
               content: $t('LABEL_MGMT.SUGGESTIONS.TOOLTIP.DISMISS'),
               delay: { show: 600, hide: 0 },
@@ -220,9 +220,9 @@ export default {
           }"
           size="16px"
         >
-          <avatar class="user-thumbnail thumbnail-rounded">
+          <Avatar class="user-thumbnail thumbnail-rounded">
             <fluent-icon class="chatwoot-ai-icon" icon="chatwoot-ai" />
-          </avatar>
+          </Avatar>
         </woot-thumbnail>
       </div>
     </div>
diff --git a/app/javascript/dashboard/components/widgets/conversation/conversationBulkActions/AgentSelector.vue b/app/javascript/dashboard/components/widgets/conversation/conversationBulkActions/AgentSelector.vue
index d1a413ae6..0d9cc75bf 100644
--- a/app/javascript/dashboard/components/widgets/conversation/conversationBulkActions/AgentSelector.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/conversationBulkActions/AgentSelector.vue
@@ -107,7 +107,7 @@ export default {
         v-if="assignableAgentsUiFlags.isFetching"
         class="agent__list-loading"
       >
-        <spinner />
+        <Spinner />
         <p>{{ $t('BULK_ACTION.AGENT_LIST_LOADING') }}</p>
       </div>
       <div v-else class="agent__list-container">
@@ -128,7 +128,7 @@ export default {
           </li>
           <li v-for="agent in filteredAgents" :key="agent.id">
             <div class="agent-list-item" @click="assignAgent(agent)">
-              <thumbnail
+              <Thumbnail
                 :src="agent.thumbnail"
                 :status="agent.availability_status"
                 :username="agent.name"
diff --git a/app/javascript/dashboard/components/widgets/conversation/conversationBulkActions/Index.vue b/app/javascript/dashboard/components/widgets/conversation/conversationBulkActions/Index.vue
index 49de17415..54632656b 100644
--- a/app/javascript/dashboard/components/widgets/conversation/conversationBulkActions/Index.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/conversationBulkActions/Index.vue
@@ -197,7 +197,7 @@ export default {
         />
       </div>
       <transition name="popover-animation">
-        <label-actions
+        <LabelActions
           v-if="showLabelActions"
           class="label-actions-box"
           @assign="assignLabels"
@@ -205,7 +205,7 @@ export default {
         />
       </transition>
       <transition name="popover-animation">
-        <update-actions
+        <UpdateActions
           v-if="showUpdateActions"
           class="update-actions-box"
           :selected-inboxes="selectedInboxes"
@@ -218,7 +218,7 @@ export default {
         />
       </transition>
       <transition name="popover-animation">
-        <agent-selector
+        <AgentSelector
           v-if="showAgentsList"
           class="agent-actions-box"
           :selected-inboxes="selectedInboxes"
@@ -228,7 +228,7 @@ export default {
         />
       </transition>
       <transition name="popover-animation">
-        <team-actions
+        <TeamActions
           v-if="showTeamsList"
           class="team-actions-box"
           @assign-team="assignTeam"
@@ -243,7 +243,7 @@ export default {
       :show.sync="showCustomTimeSnoozeModal"
       :on-close="hideCustomSnoozeModal"
     >
-      <custom-snooze-modal
+      <CustomSnoozeModal
         @close="hideCustomSnoozeModal"
         @choose-time="customSnoozeTime"
       />
diff --git a/app/javascript/dashboard/components/widgets/conversation/conversationBulkActions/UpdateActions.vue b/app/javascript/dashboard/components/widgets/conversation/conversationBulkActions/UpdateActions.vue
index 0653fc0cc..9dc4a02a9 100644
--- a/app/javascript/dashboard/components/widgets/conversation/conversationBulkActions/UpdateActions.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/conversationBulkActions/UpdateActions.vue
@@ -102,9 +102,9 @@ const actionLabel = key => {
       />
     </div>
     <div class="px-2.5 pt-0 pb-2.5">
-      <woot-dropdown-menu class="m-0 list-none">
+      <WootDropdownMenu class="m-0 list-none">
         <template v-for="action in actions">
-          <woot-dropdown-item v-if="showAction(action.key)" :key="action.key">
+          <WootDropdownItem v-if="showAction(action.key)" :key="action.key">
             <woot-button
               variant="clear"
               color-scheme="secondary"
@@ -114,9 +114,9 @@ const actionLabel = key => {
             >
               {{ actionLabel(action.key) }}
             </woot-button>
-          </woot-dropdown-item>
+          </WootDropdownItem>
         </template>
-      </woot-dropdown-menu>
+      </WootDropdownMenu>
     </div>
   </div>
 </template>
diff --git a/app/javascript/dashboard/components/widgets/conversation/linear/CreateIssue.vue b/app/javascript/dashboard/components/widgets/conversation/linear/CreateIssue.vue
index 99d7c7e12..533e0fb7b 100644
--- a/app/javascript/dashboard/components/widgets/conversation/linear/CreateIssue.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/linear/CreateIssue.vue
@@ -236,7 +236,7 @@ onMounted(getTeams);
       />
     </label>
     <div class="flex flex-col gap-4">
-      <searchable-dropdown
+      <SearchableDropdown
         v-for="dropdown in dropdowns"
         :key="dropdown.type"
         :type="dropdown.type"
diff --git a/app/javascript/dashboard/components/widgets/conversation/linear/CreateOrLinkIssue.vue b/app/javascript/dashboard/components/widgets/conversation/linear/CreateOrLinkIssue.vue
index 88cb5f2dd..b95eb216c 100644
--- a/app/javascript/dashboard/components/widgets/conversation/linear/CreateOrLinkIssue.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/linear/CreateOrLinkIssue.vue
@@ -72,7 +72,7 @@ const onClickTabChange = index => {
         </woot-tabs>
       </div>
       <div v-if="selectedTabIndex === 0" class="flex flex-col px-8 pb-4">
-        <create-issue
+        <CreateIssue
           :account-id="accountId"
           :conversation-id="conversation.id"
           :title="title"
@@ -81,7 +81,7 @@ const onClickTabChange = index => {
       </div>
 
       <div v-else class="flex flex-col px-8 pb-4">
-        <link-issue
+        <LinkIssue
           :conversation-id="conversation.id"
           :title="title"
           @close="onClose"
diff --git a/app/javascript/dashboard/components/widgets/conversation/linear/Issue.vue b/app/javascript/dashboard/components/widgets/conversation/linear/Issue.vue
index 3304f6040..5f397df33 100644
--- a/app/javascript/dashboard/components/widgets/conversation/linear/Issue.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/linear/Issue.vue
@@ -59,7 +59,7 @@ const unlinkIssue = () => {
     class="absolute flex flex-col items-start bg-white dark:bg-slate-800 z-50 px-4 py-3 border border-solid border-ash-200 w-[384px] rounded-xl gap-4 max-h-96 overflow-auto"
   >
     <div class="flex flex-col w-full">
-      <issue-header
+      <IssueHeader
         :identifier="issue.identifier"
         :link-id="linkId"
         :issue-url="issue.url"
@@ -77,7 +77,7 @@ const unlinkIssue = () => {
       </span>
     </div>
     <div class="flex flex-row items-center h-6 gap-2">
-      <user-avatar-with-name v-if="assignee" :user="assignee" class="py-1" />
+      <UserAvatarWithName v-if="assignee" :user="assignee" class="py-1" />
       <div v-if="assignee" class="w-px h-3 bg-ash-200" />
       <div class="flex items-center gap-1 py-1">
         <fluent-icon
diff --git a/app/javascript/dashboard/components/widgets/conversation/linear/LinkIssue.vue b/app/javascript/dashboard/components/widgets/conversation/linear/LinkIssue.vue
index 6bf98d59b..84f7fd065 100644
--- a/app/javascript/dashboard/components/widgets/conversation/linear/LinkIssue.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/linear/LinkIssue.vue
@@ -100,14 +100,14 @@ const linkIssue = async () => {
     class="flex flex-col justify-between"
     :class="shouldShowDropdown ? 'h-[256px]' : 'gap-2'"
   >
-    <filter-button
+    <FilterButton
       right-icon="chevron-down"
       :button-text="linkIssueTitle"
       class="justify-between w-full h-[2.5rem] py-1.5 px-3 rounded-xl border border-slate-50 bg-slate-25 dark:border-slate-600 dark:bg-slate-900 hover:bg-slate-50 dark:hover:bg-slate-900/50"
       @click="toggleDropdown"
     >
       <template v-if="shouldShowDropdown" #dropdown>
-        <filter-list-dropdown
+        <FilterListDropdown
           v-if="issues"
           v-on-clickaway="toggleDropdown"
           :show-clear-filter="false"
@@ -122,7 +122,7 @@ const linkIssue = async () => {
           @click="onSelectIssue"
         />
       </template>
-    </filter-button>
+    </FilterButton>
     <div class="flex items-center justify-end w-full gap-2 mt-2">
       <woot-button
         class="px-4 rounded-xl button clear outline-woot-200/50 outline"
diff --git a/app/javascript/dashboard/components/widgets/conversation/linear/SearchableDropdown.vue b/app/javascript/dashboard/components/widgets/conversation/linear/SearchableDropdown.vue
index 67bb220ad..4c77f3503 100644
--- a/app/javascript/dashboard/components/widgets/conversation/linear/SearchableDropdown.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/linear/SearchableDropdown.vue
@@ -48,14 +48,14 @@ const selectedItemId = computed(() => selectedItem.value?.id || null);
   >
     <label class="w-full" :class="{ error: hasError }">
       {{ label }}
-      <filter-button
+      <FilterButton
         right-icon="chevron-down"
         :button-text="selectedItemName"
         class="justify-between w-full h-[2.5rem] py-1.5 px-3 rounded-xl border border-slate-50 bg-slate-25 dark:border-slate-600 dark:bg-slate-900 hover:bg-slate-50 dark:hover:bg-slate-900/50"
         @click="toggleDropdown"
       >
         <template v-if="shouldShowDropdown" #dropdown>
-          <filter-list-dropdown
+          <FilterListDropdown
             v-on-clickaway="toggleDropdown"
             :show-clear-filter="false"
             :list-items="items"
@@ -66,7 +66,7 @@ const selectedItemId = computed(() => selectedItem.value?.id || null);
             @click="onSelect"
           />
         </template>
-      </filter-button>
+      </FilterButton>
       <span v-if="hasError" class="mt-1 message">{{ error }}</span>
     </label>
   </div>
diff --git a/app/javascript/dashboard/components/widgets/conversation/linear/index.vue b/app/javascript/dashboard/components/widgets/conversation/linear/index.vue
index 3fd6baf3f..ec3dbb1f1 100644
--- a/app/javascript/dashboard/components/widgets/conversation/linear/index.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/linear/index.vue
@@ -118,7 +118,7 @@ onMounted(() => {
         {{ linkedIssue.issue.identifier }}
       </span>
     </woot-button>
-    <issue
+    <Issue
       v-if="linkedIssue"
       :issue="linkedIssue.issue"
       :link-id="linkedIssue.id"
@@ -131,7 +131,7 @@ onMounted(() => {
       :close-on-backdrop-click="false"
       class="!items-start [&>div]:!top-12 [&>div]:sticky"
     >
-      <create-or-link-issue
+      <CreateOrLinkIssue
         :conversation="conversation"
         :account-id="currentAccountId"
         @close="closePopup"
diff --git a/app/javascript/dashboard/components/widgets/modal/ConfirmDeleteModal.vue b/app/javascript/dashboard/components/widgets/modal/ConfirmDeleteModal.vue
index e1708dc59..1bc74944f 100644
--- a/app/javascript/dashboard/components/widgets/modal/ConfirmDeleteModal.vue
+++ b/app/javascript/dashboard/components/widgets/modal/ConfirmDeleteModal.vue
@@ -67,7 +67,7 @@ export default {
 
 <!-- eslint-disable vue/no-mutating-props -->
 <template>
-  <modal :show.sync="show" :on-close="closeModal">
+  <Modal :show.sync="show" :on-close="closeModal">
     <woot-modal-header :header-title="title" :header-content="message" />
     <form @submit.prevent="onConfirm">
       <woot-input
@@ -86,5 +86,5 @@ export default {
         </woot-button>
       </div>
     </form>
-  </modal>
+  </Modal>
 </template>
diff --git a/app/javascript/dashboard/components/widgets/modal/ConfirmationModal.vue b/app/javascript/dashboard/components/widgets/modal/ConfirmationModal.vue
index 49726c265..441abbe8b 100644
--- a/app/javascript/dashboard/components/widgets/modal/ConfirmationModal.vue
+++ b/app/javascript/dashboard/components/widgets/modal/ConfirmationModal.vue
@@ -50,7 +50,7 @@ export default {
 };
 </script>
 <template>
-  <modal :show.sync="show" :on-close="cancel">
+  <Modal :show.sync="show" :on-close="cancel">
     <div class="h-auto overflow-auto flex flex-col">
       <woot-modal-header :header-title="title" :header-content="description" />
       <div class="flex flex-row justify-end gap-2 py-4 px-6 w-full">
@@ -62,5 +62,5 @@ export default {
         </woot-button>
       </div>
     </div>
-  </modal>
+  </Modal>
 </template>
diff --git a/app/javascript/dashboard/components/widgets/modal/DeleteModal.vue b/app/javascript/dashboard/components/widgets/modal/DeleteModal.vue
index f67fd3b18..3ae774d02 100644
--- a/app/javascript/dashboard/components/widgets/modal/DeleteModal.vue
+++ b/app/javascript/dashboard/components/widgets/modal/DeleteModal.vue
@@ -20,7 +20,7 @@ export default {
 
 <!-- eslint-disable vue/no-mutating-props -->
 <template>
-  <modal :show.sync="show" :on-close="onClose">
+  <Modal :show.sync="show" :on-close="onClose">
     <woot-modal-header
       :header-title="title"
       :header-content="message"
@@ -39,7 +39,7 @@ export default {
         {{ confirmText }}
       </woot-button>
     </div>
-  </modal>
+  </Modal>
 </template>
 <style lang="scss" scoped>
 .action-button {
diff --git a/app/javascript/dashboard/components/widgets/modal/WootKeyShortcutModal.vue b/app/javascript/dashboard/components/widgets/modal/WootKeyShortcutModal.vue
index caf2700e3..2355ff440 100644
--- a/app/javascript/dashboard/components/widgets/modal/WootKeyShortcutModal.vue
+++ b/app/javascript/dashboard/components/widgets/modal/WootKeyShortcutModal.vue
@@ -37,12 +37,12 @@ export default {
             {{ $t('KEYBOARD_SHORTCUTS.TOGGLE_MODAL') }}
           </h5>
           <div class="flex items-center mb-1 ml-2 gap-2">
-            <hotkey custom-class="min-h-[28px] min-w-[60px] normal-case key">
+            <Hotkey custom-class="min-h-[28px] min-w-[60px] normal-case key">
               {{ $t('KEYBOARD_SHORTCUTS.KEYS.WINDOWS_KEY_AND_COMMAND_KEY') }}
-            </hotkey>
-            <hotkey custom-class="min-h-[28px] min-w-[36px] key">
+            </Hotkey>
+            <Hotkey custom-class="min-h-[28px] min-w-[36px] key">
               {{ $t('KEYBOARD_SHORTCUTS.KEYS.FORWARD_SLASH_KEY') }}
-            </hotkey>
+            </Hotkey>
           </div>
         </div>
       </div>
@@ -54,20 +54,20 @@ export default {
           </h5>
           <div class="flex items-center mb-1 ml-2 gap-2">
             <div class="flex gap-2">
-              <hotkey custom-class="min-h-[28px] min-w-[60px] normal-case key">
+              <Hotkey custom-class="min-h-[28px] min-w-[60px] normal-case key">
                 {{ $t('KEYBOARD_SHORTCUTS.KEYS.ALT_OR_OPTION_KEY') }}
-              </hotkey>
-              <hotkey custom-class="min-h-[28px] w-9 key"> J </hotkey>
+              </Hotkey>
+              <Hotkey custom-class="min-h-[28px] w-9 key"> J </Hotkey>
               <span
                 class="flex items-center font-semibold text-sm text-slate-800 dark:text-slate-100"
               >
                 {{ $t('KEYBOARD_SHORTCUTS.KEYS.FORWARD_SLASH_KEY') }}
               </span>
             </div>
-            <hotkey custom-class="min-h-[28px] min-w-[60px] normal-case key">
+            <Hotkey custom-class="min-h-[28px] min-w-[60px] normal-case key">
               {{ $t('KEYBOARD_SHORTCUTS.KEYS.ALT_OR_OPTION_KEY') }}
-            </hotkey>
-            <hotkey custom-class="w-9 key"> K </hotkey>
+            </Hotkey>
+            <Hotkey custom-class="w-9 key"> K </Hotkey>
           </div>
         </div>
 
@@ -76,13 +76,13 @@ export default {
             {{ $t('KEYBOARD_SHORTCUTS.TITLE.RESOLVE_AND_NEXT') }}
           </h5>
           <div class="flex items-center mb-1 ml-2 gap-2">
-            <hotkey custom-class="min-h-[28px] min-w-[60px] normal-case key">
+            <Hotkey custom-class="min-h-[28px] min-w-[60px] normal-case key">
               {{ $t('KEYBOARD_SHORTCUTS.KEYS.WINDOWS_KEY_AND_COMMAND_KEY') }}
-            </hotkey>
-            <hotkey custom-class="min-h-[28px] min-w-[60px] normal-case key">
+            </Hotkey>
+            <Hotkey custom-class="min-h-[28px] min-w-[60px] normal-case key">
               {{ $t('KEYBOARD_SHORTCUTS.KEYS.ALT_OR_OPTION_KEY') }}
-            </hotkey>
-            <hotkey custom-class="w-9 key"> E </hotkey>
+            </Hotkey>
+            <Hotkey custom-class="w-9 key"> E </Hotkey>
           </div>
         </div>
         <div
@@ -94,18 +94,18 @@ export default {
             {{ title(shortcutKey) }}
           </h5>
           <div class="flex items-center mb-1 ml-2 gap-2">
-            <hotkey
+            <Hotkey
               :class="{ 'min-w-[60px]': shortcutKey.firstKey !== 'Up' }"
               custom-class="min-h-[28px] normal-case key"
             >
               {{ shortcutKey.firstKey }}
-            </hotkey>
-            <hotkey
+            </Hotkey>
+            <Hotkey
               :class="{ 'normal-case': shortcutKey.secondKey === 'Down' }"
               custom-class="min-h-[28px] min-w-[36px] key"
             >
               {{ shortcutKey.secondKey }}
-            </hotkey>
+            </Hotkey>
           </div>
         </div>
       </div>
diff --git a/app/javascript/dashboard/modules/contact/ContactMergeModal.vue b/app/javascript/dashboard/modules/contact/ContactMergeModal.vue
index 836957b84..e8eddfef0 100644
--- a/app/javascript/dashboard/modules/contact/ContactMergeModal.vue
+++ b/app/javascript/dashboard/modules/contact/ContactMergeModal.vue
@@ -77,7 +77,7 @@ export default {
       :header-content="$t('MERGE_CONTACTS.DESCRIPTION')"
     />
 
-    <merge-contact
+    <MergeContact
       :primary-contact="primaryContact"
       :is-searching="isSearching"
       :is-merging="uiFlags.isMerging"
diff --git a/app/javascript/dashboard/modules/contact/components/AddCustomAttribute.vue b/app/javascript/dashboard/modules/contact/components/AddCustomAttribute.vue
index 9a3163ca1..21ed33b3d 100644
--- a/app/javascript/dashboard/modules/contact/components/AddCustomAttribute.vue
+++ b/app/javascript/dashboard/modules/contact/components/AddCustomAttribute.vue
@@ -63,7 +63,7 @@ export default {
 
 <!-- eslint-disable vue/no-mutating-props -->
 <template>
-  <modal :show.sync="show" :on-close="onClose">
+  <Modal :show.sync="show" :on-close="onClose">
     <woot-modal-header
       :header-title="$t('CUSTOM_ATTRIBUTES.ADD.TITLE')"
       :header-content="$t('CUSTOM_ATTRIBUTES.ADD.DESC')"
@@ -96,5 +96,5 @@ export default {
         </woot-button>
       </div>
     </form>
-  </modal>
+  </Modal>
 </template>
diff --git a/app/javascript/dashboard/modules/contact/components/ContactAttribute.vue b/app/javascript/dashboard/modules/contact/components/ContactAttribute.vue
index 524748164..52eb6eaa5 100644
--- a/app/javascript/dashboard/modules/contact/components/ContactAttribute.vue
+++ b/app/javascript/dashboard/modules/contact/components/ContactAttribute.vue
@@ -41,7 +41,7 @@ export default {
     <div class="title-wrap">
       <h4 class="text-sm title">
         <div class="title--icon">
-          <emoji-or-icon :icon="icon" :emoji="emoji" />
+          <EmojiOrIcon :icon="icon" :emoji="emoji" />
         </div>
         {{ label }}
       </h4>
diff --git a/app/javascript/dashboard/modules/contact/components/ContactDropdownItem.vue b/app/javascript/dashboard/modules/contact/components/ContactDropdownItem.vue
index 13340a750..b7442e84e 100644
--- a/app/javascript/dashboard/modules/contact/components/ContactDropdownItem.vue
+++ b/app/javascript/dashboard/modules/contact/components/ContactDropdownItem.vue
@@ -32,7 +32,7 @@ export default {
 
 <template>
   <div class="option-item--user">
-    <thumbnail :src="thumbnail" size="28px" :username="name" />
+    <Thumbnail :src="thumbnail" size="28px" :username="name" />
     <div class="option__user-data">
       <h5 class="option__title">
         {{ name }}
diff --git a/app/javascript/dashboard/modules/contact/components/ContactFields.vue b/app/javascript/dashboard/modules/contact/components/ContactFields.vue
index 96566502a..ed2828a97 100644
--- a/app/javascript/dashboard/modules/contact/components/ContactFields.vue
+++ b/app/javascript/dashboard/modules/contact/components/ContactFields.vue
@@ -53,7 +53,7 @@ export default {
     <h3 class="text-lg title">
       {{ $t('CONTACTS_PAGE.FIELDS') }}
     </h3>
-    <attribute
+    <Attribute
       :label="$t('CONTACT_PANEL.EMAIL_ADDRESS')"
       icon="mail"
       emoji=""
@@ -61,7 +61,7 @@ export default {
       :show-edit="true"
       @update="onEmailUpdate"
     />
-    <attribute
+    <Attribute
       :label="$t('CONTACT_PANEL.PHONE_NUMBER')"
       icon="call"
       emoji=""
@@ -69,7 +69,7 @@ export default {
       :show-edit="true"
       @update="onPhoneUpdate"
     />
-    <attribute
+    <Attribute
       v-if="additionalAttributes.location"
       :label="$t('CONTACT_PANEL.LOCATION')"
       icon="map"
@@ -83,7 +83,7 @@ export default {
       :key="attribute"
       class="custom-attribute--row"
     >
-      <attribute
+      <Attribute
         :label="attribute"
         icon="chevron-right"
         :value="customAttributes[attribute]"
diff --git a/app/javascript/dashboard/modules/contact/components/ContactIntro.vue b/app/javascript/dashboard/modules/contact/components/ContactIntro.vue
index 4ffa64b5f..be3af2d40 100644
--- a/app/javascript/dashboard/modules/contact/components/ContactIntro.vue
+++ b/app/javascript/dashboard/modules/contact/components/ContactIntro.vue
@@ -43,7 +43,7 @@ export default {
 </script>
 <template>
   <div class="contact--intro">
-    <thumbnail
+    <Thumbnail
       :src="contact.thumbnail"
       size="64px"
       :username="contact.name"
@@ -62,7 +62,7 @@ export default {
       <p v-if="additionalAttributes.description" class="contact--bio">
         {{ additionalAttributes.description }}
       </p>
-      <social-icons :social-profiles="socialProfiles" />
+      <SocialIcons :social-profiles="socialProfiles" />
     </div>
     <div class="contact-actions">
       <woot-button
diff --git a/app/javascript/dashboard/modules/contact/components/ContactPanel.vue b/app/javascript/dashboard/modules/contact/components/ContactPanel.vue
index c18f8baba..94b805fdd 100644
--- a/app/javascript/dashboard/modules/contact/components/ContactPanel.vue
+++ b/app/javascript/dashboard/modules/contact/components/ContactPanel.vue
@@ -68,29 +68,29 @@ export default {
 </script>
 <template>
   <div class="panel">
-    <contact-intro
+    <ContactIntro
       :contact="contact"
       @message="toggleConversationModal"
       @edit="toggleEditModal"
     />
-    <contact-fields
+    <ContactFields
       :contact="contact"
       @update="updateField"
       @create-attribute="toggleCustomAttributeModal"
     />
-    <edit-contact
+    <EditContact
       v-if="showEditModal"
       :show="showEditModal"
       :contact="contact"
       @cancel="toggleEditModal"
     />
-    <new-conversation
+    <NewConversation
       v-if="enableNewConversation"
       :show="showConversationModal"
       :contact="contact"
       @cancel="toggleConversationModal"
     />
-    <add-custom-attribute
+    <AddCustomAttribute
       :show="showCustomAttributeModal"
       @cancel="toggleCustomAttributeModal"
       @create="createCustomAttribute"
diff --git a/app/javascript/dashboard/modules/contact/components/MergeContact.vue b/app/javascript/dashboard/modules/contact/components/MergeContact.vue
index ea53b9c95..32f6ff878 100644
--- a/app/javascript/dashboard/modules/contact/components/MergeContact.vue
+++ b/app/javascript/dashboard/modules/contact/components/MergeContact.vue
@@ -98,7 +98,7 @@ export default {
             @search-change="searchChange"
           >
             <template slot="singleLabel" slot-scope="props">
-              <contact-dropdown-item
+              <ContactDropdownItem
                 :thumbnail="props.option.thumbnail"
                 :identifier="props.option.id"
                 :name="props.option.name"
@@ -107,7 +107,7 @@ export default {
               />
             </template>
             <template slot="option" slot-scope="props">
-              <contact-dropdown-item
+              <ContactDropdownItem
                 :thumbnail="props.option.thumbnail"
                 :identifier="props.option.id"
                 :name="props.option.name"
@@ -153,7 +153,7 @@ export default {
             track-by="id"
           >
             <template slot="singleLabel" slot-scope="props">
-              <contact-dropdown-item
+              <ContactDropdownItem
                 :thumbnail="props.option.thumbnail"
                 :name="props.option.name"
                 :identifier="props.option.id"
@@ -165,7 +165,7 @@ export default {
         </div>
       </div>
     </div>
-    <merge-contact-summary
+    <MergeContactSummary
       :primary-contact-name="primaryContact.name"
       :parent-contact-name="parentContactName"
     />
diff --git a/app/javascript/dashboard/modules/conversations/components/MessageContextMenu.vue b/app/javascript/dashboard/modules/conversations/components/MessageContextMenu.vue
index 4c4c68409..1367852c8 100644
--- a/app/javascript/dashboard/modules/conversations/components/MessageContextMenu.vue
+++ b/app/javascript/dashboard/modules/conversations/components/MessageContextMenu.vue
@@ -148,13 +148,13 @@ export default {
       :show.sync="isCannedResponseModalOpen"
       :on-close="hideCannedResponseModal"
     >
-      <add-canned-modal
+      <AddCannedModal
         :response-content="plainTextContent"
         :on-close="hideCannedResponseModal"
       />
     </woot-modal>
     <!-- Translate Content -->
-    <translate-modal
+    <TranslateModal
       v-if="showTranslateModal"
       :content="messageContent"
       :content-attributes="contentAttributes"
@@ -186,7 +186,7 @@ export default {
       @close="handleClose"
     >
       <div class="menu-container">
-        <menu-item
+        <MenuItem
           v-if="enabledOptions['replyTo']"
           :option="{
             icon: 'arrow-reply',
@@ -195,7 +195,7 @@ export default {
           variant="icon"
           @click="handleReplyTo"
         />
-        <menu-item
+        <MenuItem
           v-if="enabledOptions['copy']"
           :option="{
             icon: 'clipboard',
@@ -204,7 +204,7 @@ export default {
           variant="icon"
           @click="handleCopy"
         />
-        <menu-item
+        <MenuItem
           v-if="enabledOptions['copy']"
           :option="{
             icon: 'translate',
@@ -214,7 +214,7 @@ export default {
           @click="handleTranslate"
         />
         <hr />
-        <menu-item
+        <MenuItem
           :option="{
             icon: 'link',
             label: $t('CONVERSATION.CONTEXT_MENU.COPY_PERMALINK'),
@@ -222,7 +222,7 @@ export default {
           variant="icon"
           @click="copyLinkToMessage"
         />
-        <menu-item
+        <MenuItem
           v-if="enabledOptions['cannedResponse']"
           :option="{
             icon: 'comment-add',
@@ -232,7 +232,7 @@ export default {
           @click="showCannedResponseModal"
         />
         <hr v-if="enabledOptions['delete']" />
-        <menu-item
+        <MenuItem
           v-if="enabledOptions['delete']"
           :option="{
             icon: 'delete',
diff --git a/app/javascript/dashboard/modules/notes/NotesOnContactPage.vue b/app/javascript/dashboard/modules/notes/NotesOnContactPage.vue
index 23150791c..caaa9285d 100644
--- a/app/javascript/dashboard/modules/notes/NotesOnContactPage.vue
+++ b/app/javascript/dashboard/modules/notes/NotesOnContactPage.vue
@@ -41,7 +41,7 @@ export default {
 </script>
 
 <template>
-  <note-list
+  <NoteList
     :is-fetching="uiFlags.isFetching"
     :notes="notes"
     @add="onAdd"
diff --git a/app/javascript/dashboard/modules/notes/components/AddNote.vue b/app/javascript/dashboard/modules/notes/components/AddNote.vue
index 00a047575..92cfdb34e 100644
--- a/app/javascript/dashboard/modules/notes/components/AddNote.vue
+++ b/app/javascript/dashboard/modules/notes/components/AddNote.vue
@@ -40,7 +40,7 @@ export default {
   <div
     class="flex flex-col mb-2 p-4 border border-solid border-slate-75 dark:border-slate-700 overflow-hidden rounded-md flex-grow shadow-sm bg-white dark:bg-slate-900 text-slate-700 dark:text-slate-100"
   >
-    <woot-message-editor
+    <WootMessageEditor
       v-model="noteContent"
       class="input--note"
       :placeholder="$t('NOTES.ADD.PLACEHOLDER')"
diff --git a/app/javascript/dashboard/modules/notes/components/ContactNote.vue b/app/javascript/dashboard/modules/notes/components/ContactNote.vue
index fc818ee07..cba9b8cc9 100644
--- a/app/javascript/dashboard/modules/notes/components/ContactNote.vue
+++ b/app/javascript/dashboard/modules/notes/components/ContactNote.vue
@@ -69,7 +69,7 @@ export default {
   >
     <div class="flex items-end justify-between gap-1 text-xs">
       <div class="flex items-center">
-        <thumbnail
+        <Thumbnail
           :title="noteAuthorName"
           :src="noteAuthor.thumbnail"
           :username="noteAuthorName"
diff --git a/app/javascript/dashboard/modules/notes/components/NoteList.vue b/app/javascript/dashboard/modules/notes/components/NoteList.vue
index 2a0a9c815..99d15862b 100644
--- a/app/javascript/dashboard/modules/notes/components/NoteList.vue
+++ b/app/javascript/dashboard/modules/notes/components/NoteList.vue
@@ -37,8 +37,8 @@ export default {
 
 <template>
   <div>
-    <add-note @add="onAddNote" />
-    <contact-note
+    <AddNote @add="onAddNote" />
+    <ContactNote
       v-for="note in notes"
       :id="note.id"
       :key="note.id"
@@ -50,7 +50,7 @@ export default {
     />
 
     <div v-if="isFetching" class="text-center p-4 text-base">
-      <spinner size="" />
+      <Spinner size="" />
       <span>{{ $t('NOTES.FETCHING_NOTES') }}</span>
     </div>
     <div v-else-if="!notes.length" class="text-center p-4 text-base">
diff --git a/app/javascript/dashboard/modules/search/components/MessageContent.vue b/app/javascript/dashboard/modules/search/components/MessageContent.vue
index 2ef28b5c6..e75b082ab 100644
--- a/app/javascript/dashboard/modules/search/components/MessageContent.vue
+++ b/app/javascript/dashboard/modules/search/components/MessageContent.vue
@@ -75,9 +75,9 @@ export default {
       </strong>
       {{ $t('SEARCH.WROTE') }}
     </p>
-    <read-more :shrink="isOverflowing" @expand="isOverflowing = false">
+    <ReadMore :shrink="isOverflowing" @expand="isOverflowing = false">
       <div v-dompurify-html="prepareContent(content)" class="message-content" />
-    </read-more>
+    </ReadMore>
   </blockquote>
 </template>
 
diff --git a/app/javascript/dashboard/modules/search/components/SearchResultContactsList.vue b/app/javascript/dashboard/modules/search/components/SearchResultContactsList.vue
index 9b8c98fcb..872ef1b27 100644
--- a/app/javascript/dashboard/modules/search/components/SearchResultContactsList.vue
+++ b/app/javascript/dashboard/modules/search/components/SearchResultContactsList.vue
@@ -36,7 +36,7 @@ export default {
 </script>
 
 <template>
-  <search-result-section
+  <SearchResultSection
     :title="$t('SEARCH.SECTION.CONTACTS')"
     :empty="!contacts.length"
     :query="query"
@@ -45,7 +45,7 @@ export default {
   >
     <ul v-if="contacts.length" class="search-list">
       <li v-for="contact in contacts" :key="contact.id">
-        <search-result-contact-item
+        <SearchResultContactItem
           :id="contact.id"
           :name="contact.name"
           :email="contact.email"
@@ -55,5 +55,5 @@ export default {
         />
       </li>
     </ul>
-  </search-result-section>
+  </SearchResultSection>
 </template>
diff --git a/app/javascript/dashboard/modules/search/components/SearchResultConversationItem.vue b/app/javascript/dashboard/modules/search/components/SearchResultConversationItem.vue
index fa017d7bc..cd4ead3ad 100644
--- a/app/javascript/dashboard/modules/search/components/SearchResultConversationItem.vue
+++ b/app/javascript/dashboard/modules/search/components/SearchResultConversationItem.vue
@@ -70,7 +70,7 @@ export default {
             small
           />
           <div class="inbox-name-wrap">
-            <inbox-name :inbox="inbox" class="mr-2 rtl:mr-0 rtl:ml-2" />
+            <InboxName :inbox="inbox" class="mr-2 rtl:mr-0 rtl:ml-2" />
           </div>
         </div>
         <div>
diff --git a/app/javascript/dashboard/modules/search/components/SearchResultConversationsList.vue b/app/javascript/dashboard/modules/search/components/SearchResultConversationsList.vue
index 4c3964092..c7f369e44 100644
--- a/app/javascript/dashboard/modules/search/components/SearchResultConversationsList.vue
+++ b/app/javascript/dashboard/modules/search/components/SearchResultConversationsList.vue
@@ -35,7 +35,7 @@ export default {
 </script>
 
 <template>
-  <search-result-section
+  <SearchResultSection
     :title="$t('SEARCH.SECTION.CONVERSATIONS')"
     :empty="!conversations.length"
     :query="query"
@@ -44,7 +44,7 @@ export default {
   >
     <ul v-if="conversations.length" class="search-list">
       <li v-for="conversation in conversations" :key="conversation.id">
-        <search-result-conversation-item
+        <SearchResultConversationItem
           :id="conversation.id"
           :name="conversation.contact.name"
           :email="conversation.contact.email"
@@ -54,5 +54,5 @@ export default {
         />
       </li>
     </ul>
-  </search-result-section>
+  </SearchResultSection>
 </template>
diff --git a/app/javascript/dashboard/modules/search/components/SearchResultMessagesList.vue b/app/javascript/dashboard/modules/search/components/SearchResultMessagesList.vue
index c4ef12749..92e813e99 100644
--- a/app/javascript/dashboard/modules/search/components/SearchResultMessagesList.vue
+++ b/app/javascript/dashboard/modules/search/components/SearchResultMessagesList.vue
@@ -44,7 +44,7 @@ export default {
 </script>
 
 <template>
-  <search-result-section
+  <SearchResultSection
     :title="$t('SEARCH.SECTION.MESSAGES')"
     :empty="!messages.length"
     :query="query"
@@ -53,20 +53,20 @@ export default {
   >
     <ul v-if="messages.length" class="search-list">
       <li v-for="message in messages" :key="message.id">
-        <search-result-conversation-item
+        <SearchResultConversationItem
           :id="message.conversation_id"
           :account-id="accountId"
           :inbox="message.inbox"
           :created-at="message.created_at"
           :message-id="message.id"
         >
-          <message-content
+          <MessageContent
             :author="getName(message)"
             :content="message.content"
             :search-term="query"
           />
-        </search-result-conversation-item>
+        </SearchResultConversationItem>
       </li>
     </ul>
-  </search-result-section>
+  </SearchResultSection>
 </template>
diff --git a/app/javascript/dashboard/modules/search/components/SearchView.vue b/app/javascript/dashboard/modules/search/components/SearchView.vue
index 33c4cca09..b4c2c5a52 100644
--- a/app/javascript/dashboard/modules/search/components/SearchView.vue
+++ b/app/javascript/dashboard/modules/search/components/SearchView.vue
@@ -155,8 +155,8 @@ export default {
     </div>
     <section class="search-root">
       <header>
-        <search-header @search="onSearch" />
-        <search-tabs
+        <SearchHeader @search="onSearch" />
+        <SearchTabs
           v-if="query"
           :tabs="tabs"
           :selected-tab="activeTabIndex"
@@ -165,7 +165,7 @@ export default {
       </header>
       <div class="search-results">
         <div v-if="showResultsSection">
-          <search-result-contacts-list
+          <SearchResultContactsList
             v-if="filterContacts"
             :is-fetching="uiFlags.contact.isFetching"
             :contacts="contacts"
@@ -173,7 +173,7 @@ export default {
             :show-title="isSelectedTabAll"
           />
 
-          <search-result-messages-list
+          <SearchResultMessagesList
             v-if="filterMessages"
             :is-fetching="uiFlags.message.isFetching"
             :messages="messages"
@@ -181,7 +181,7 @@ export default {
             :show-title="isSelectedTabAll"
           />
 
-          <search-result-conversations-list
+          <SearchResultConversationsList
             v-if="filterConversations"
             :is-fetching="uiFlags.conversation.isFetching"
             :conversations="conversations"
diff --git a/app/javascript/dashboard/modules/widget-preview/components/Widget.vue b/app/javascript/dashboard/modules/widget-preview/components/Widget.vue
index 29272e508..481cb0137 100644
--- a/app/javascript/dashboard/modules/widget-preview/components/Widget.vue
+++ b/app/javascript/dashboard/modules/widget-preview/components/Widget.vue
@@ -152,7 +152,7 @@ export default {
 <template>
   <div class="widget-preview-container">
     <div v-if="isWidgetVisible" class="screen-selector">
-      <input-radio-group
+      <InputRadioGroup
         name="widget-screen"
         :items="widgetScreens"
         :action="handleScreenChange"
diff --git a/app/javascript/dashboard/modules/widget-preview/components/WidgetBody.vue b/app/javascript/dashboard/modules/widget-preview/components/WidgetBody.vue
index 6adff457f..93d63f0ef 100644
--- a/app/javascript/dashboard/modules/widget-preview/components/WidgetBody.vue
+++ b/app/javascript/dashboard/modules/widget-preview/components/WidgetBody.vue
@@ -48,7 +48,7 @@ export default {
           {{ config.replyTime }}
         </div>
       </div>
-      <thumbnail username="J" size="40px" />
+      <Thumbnail username="J" size="40px" />
     </div>
     <div v-else class="conversation-content">
       <div class="conversation-wrap">
diff --git a/app/javascript/dashboard/modules/widget-preview/components/WidgetFooter.vue b/app/javascript/dashboard/modules/widget-preview/components/WidgetFooter.vue
index 84657eae9..34e0f58d2 100644
--- a/app/javascript/dashboard/modules/widget-preview/components/WidgetFooter.vue
+++ b/app/javascript/dashboard/modules/widget-preview/components/WidgetFooter.vue
@@ -18,7 +18,7 @@ export default {
 
 <template>
   <div class="footer-wrap">
-    <custom-button
+    <CustomButton
       v-if="config.isDefaultScreen"
       class="start-conversation"
       :style="{ background: config.color }"
@@ -26,9 +26,9 @@ export default {
       {{
         $t('INBOX_MGMT.WIDGET_BUILDER.FOOTER.START_CONVERSATION_BUTTON_TEXT')
       }}
-    </custom-button>
+    </CustomButton>
     <div v-else class="chat-message-input is-focused">
-      <resizable-text-area
+      <ResizableTextArea
         id="chat-input"
         :rows="1"
         :placeholder="
diff --git a/app/javascript/dashboard/routes/dashboard/Dashboard.vue b/app/javascript/dashboard/routes/dashboard/Dashboard.vue
index 3a0d3f48e..2c0275cfd 100644
--- a/app/javascript/dashboard/routes/dashboard/Dashboard.vue
+++ b/app/javascript/dashboard/routes/dashboard/Dashboard.vue
@@ -145,7 +145,7 @@ export default {
   <div
     class="flex flex-wrap flex-grow-0 w-full h-full max-w-full min-h-0 ml-auto mr-auto app-wrapper dark:text-slate-300"
   >
-    <sidebar
+    <Sidebar
       :route="currentRoute"
       :show-secondary-sidebar="isSidebarOpen"
       @open-notification-panel="openNotificationPanel"
@@ -156,27 +156,27 @@ export default {
     />
     <section class="flex flex-1 h-full min-h-0 px-0 overflow-hidden">
       <router-view />
-      <command-bar />
-      <account-selector
+      <CommandBar />
+      <AccountSelector
         :show-account-modal="showAccountModal"
         @close-account-modal="toggleAccountModal"
         @show-create-account-modal="openCreateAccountModal"
       />
-      <add-account-modal
+      <AddAccountModal
         :show="showCreateAccountModal"
         @close-account-create-modal="closeCreateAccountModal"
       />
-      <woot-key-shortcut-modal
+      <WootKeyShortcutModal
         :show.sync="showShortcutModal"
         @close="closeKeyShortcutModal"
         @clickaway="closeKeyShortcutModal"
       />
-      <notification-panel
+      <NotificationPanel
         v-if="isNotificationPanel"
         @close="closeNotificationPanel"
       />
       <woot-modal :show.sync="showAddLabelModal" :on-close="hideAddLabelPopup">
-        <add-label-modal @close="hideAddLabelPopup" />
+        <AddLabelModal @close="hideAddLabelPopup" />
       </woot-modal>
     </section>
   </div>
diff --git a/app/javascript/dashboard/routes/dashboard/contacts/components/ContactInfoPanel.vue b/app/javascript/dashboard/routes/dashboard/contacts/components/ContactInfoPanel.vue
index db3cb00a3..c4062836b 100644
--- a/app/javascript/dashboard/routes/dashboard/contacts/components/ContactInfoPanel.vue
+++ b/app/javascript/dashboard/routes/dashboard/contacts/components/ContactInfoPanel.vue
@@ -81,7 +81,7 @@ export default {
     class="relative w-1/4 h-full overflow-y-auto text-sm bg-white dark:bg-slate-900 border-slate-50 dark:border-slate-800/50"
     :class="showAvatar ? 'border-l border-solid ' : 'border-r border-solid'"
   >
-    <contact-info
+    <ContactInfo
       :show-close-button="showCloseButton"
       :show-avatar="showAvatar"
       :contact="contact"
@@ -104,7 +104,7 @@ export default {
           class="list-group-item"
         >
           <div v-if="element.name === 'contact_attributes'">
-            <accordion-item
+            <AccordionItem
               :title="$t('CONVERSATION_SIDEBAR.ACCORDION.CONTACT_ATTRIBUTES')"
               :is-open="isContactSidebarItemOpen('is_ct_custom_attr_open')"
               compact
@@ -112,7 +112,7 @@ export default {
                 value => toggleSidebarUIState('is_ct_custom_attr_open', value)
               "
             >
-              <custom-attributes
+              <CustomAttributes
                 :contact-id="contact.id"
                 attribute-type="contact_attribute"
                 attribute-class="conversation--attribute"
@@ -123,19 +123,19 @@ export default {
                 "
                 class="even"
               />
-            </accordion-item>
+            </AccordionItem>
           </div>
           <div v-if="element.name === 'contact_labels'">
-            <accordion-item
+            <AccordionItem
               :title="$t('CONTACT_PANEL.SIDEBAR_SECTIONS.CONTACT_LABELS')"
               :is-open="isContactSidebarItemOpen('is_ct_labels_open')"
               @click="value => toggleSidebarUIState('is_ct_labels_open', value)"
             >
-              <contact-label :contact-id="contact.id" class="contact-labels" />
-            </accordion-item>
+              <ContactLabel :contact-id="contact.id" class="contact-labels" />
+            </AccordionItem>
           </div>
           <div v-if="element.name === 'previous_conversation'">
-            <accordion-item
+            <AccordionItem
               :title="
                 $t('CONTACT_PANEL.SIDEBAR_SECTIONS.PREVIOUS_CONVERSATIONS')
               "
@@ -144,12 +144,12 @@ export default {
                 value => toggleSidebarUIState('is_ct_prev_conv_open', value)
               "
             >
-              <contact-conversations
+              <ContactConversations
                 v-if="contact.id"
                 :contact-id="contact.id"
                 conversation-id=""
               />
-            </accordion-item>
+            </AccordionItem>
           </div>
         </div>
       </transition-group>
diff --git a/app/javascript/dashboard/routes/dashboard/contacts/components/ContactLabels.vue b/app/javascript/dashboard/routes/dashboard/contacts/components/ContactLabels.vue
index 3a12d4190..43a1a5ada 100644
--- a/app/javascript/dashboard/routes/dashboard/contacts/components/ContactLabels.vue
+++ b/app/javascript/dashboard/routes/dashboard/contacts/components/ContactLabels.vue
@@ -77,7 +77,7 @@ export default {
 </script>
 
 <template>
-  <label-selector
+  <LabelSelector
     :all-labels="allLabels"
     :saved-labels="savedLabels"
     @add="addItem"
diff --git a/app/javascript/dashboard/routes/dashboard/contacts/components/ContactsAdvancedFilters.vue b/app/javascript/dashboard/routes/dashboard/contacts/components/ContactsAdvancedFilters.vue
index 5a6f53347..2cc5cbc29 100644
--- a/app/javascript/dashboard/routes/dashboard/contacts/components/ContactsAdvancedFilters.vue
+++ b/app/javascript/dashboard/routes/dashboard/contacts/components/ContactsAdvancedFilters.vue
@@ -281,7 +281,7 @@ export default {
       <div
         class="p-4 mb-4 border border-solid rounded-lg bg-slate-25 dark:bg-slate-900 border-slate-50 dark:border-slate-700/50"
       >
-        <filter-input-box
+        <FilterInputBox
           v-for="(filter, i) in appliedFilters"
           :key="i"
           v-model="appliedFilters[i]"
diff --git a/app/javascript/dashboard/routes/dashboard/contacts/components/ContactsTable.vue b/app/javascript/dashboard/routes/dashboard/contacts/components/ContactsTable.vue
index 4bb5e326e..e8c4f84ac 100644
--- a/app/javascript/dashboard/routes/dashboard/contacts/components/ContactsTable.vue
+++ b/app/javascript/dashboard/routes/dashboard/contacts/components/ContactsTable.vue
@@ -252,7 +252,7 @@ export default {
   <section
     class="flex-1 h-full -mt-1 overflow-hidden bg-white contacts-table-wrap dark:bg-slate-900"
   >
-    <ve-table
+    <VeTable
       :fixed-header="true"
       max-height="calc(100vh - 7.125rem)"
       scroll-width="187rem"
@@ -262,16 +262,16 @@ export default {
       :sort-option="sortOption"
     />
 
-    <empty-state
+    <EmptyState
       v-if="showSearchEmptyState"
       :title="$t('CONTACTS_PAGE.LIST.404')"
     />
-    <empty-state
+    <EmptyState
       v-else-if="!isLoading && !contacts.length"
       :title="$t('CONTACTS_PAGE.LIST.NO_CONTACTS')"
     />
     <div v-if="isLoading" class="flex items-center justify-center text-base">
-      <spinner />
+      <Spinner />
       <span>{{ $t('CONTACTS_PAGE.LIST.LOADING_MESSAGE') }}</span>
     </div>
   </section>
diff --git a/app/javascript/dashboard/routes/dashboard/contacts/components/ContactsView.vue b/app/javascript/dashboard/routes/dashboard/contacts/components/ContactsView.vue
index dcc31d3b8..03b138242 100644
--- a/app/javascript/dashboard/routes/dashboard/contacts/components/ContactsView.vue
+++ b/app/javascript/dashboard/routes/dashboard/contacts/components/ContactsView.vue
@@ -391,7 +391,7 @@ export default {
 <template>
   <div class="flex flex-row w-full">
     <div class="flex flex-col h-full" :class="wrapClass">
-      <contacts-header
+      <ContactsHeader
         :search-query="searchQuery"
         :header-title="pageTitle"
         :segments-id="segmentsId"
@@ -406,7 +406,7 @@ export default {
         @on-toggle-delete-filter="onToggleDeleteFilters"
         @on-toggle-edit-filter="onToggleFilters"
       />
-      <contacts-table
+      <ContactsTable
         :contacts="records"
         :show-search-empty-state="showEmptySearchResult"
         :is-loading="uiFlags.isFetching"
@@ -414,7 +414,7 @@ export default {
         :active-contact-id="selectedContactId"
         @on-sort-change="onSortChange"
       />
-      <table-footer
+      <TableFooter
         class="border-t border-slate-75 dark:border-slate-700/50"
         :current-page="Number(meta.currentPage)"
         :total-count="meta.count"
@@ -423,14 +423,14 @@ export default {
       />
     </div>
 
-    <add-custom-views
+    <AddCustomViews
       v-if="showAddSegmentsModal"
       :custom-views-query="segmentsQuery"
       :filter-type="filterType"
       :open-last-saved-item="openSavedItemInSegment"
       @close="onCloseAddSegmentsModal"
     />
-    <delete-custom-views
+    <DeleteCustomViews
       v-if="showDeleteSegmentsModal"
       :show-delete-popup.sync="showDeleteSegmentsModal"
       :active-custom-view="activeSegment"
@@ -440,21 +440,21 @@ export default {
       @close="onCloseDeleteSegmentsModal"
     />
 
-    <contact-info-panel
+    <ContactInfoPanel
       v-if="showContactViewPane"
       :contact="selectedContact"
       :on-close="closeContactInfoPanel"
     />
-    <create-contact :show="showCreateModal" @cancel="onToggleCreate" />
+    <CreateContact :show="showCreateModal" @cancel="onToggleCreate" />
     <woot-modal :show.sync="showImportModal" :on-close="onToggleImport">
-      <import-contacts v-if="showImportModal" :on-close="onToggleImport" />
+      <ImportContacts v-if="showImportModal" :on-close="onToggleImport" />
     </woot-modal>
     <woot-modal
       :show.sync="showFiltersModal"
       :on-close="closeAdvanceFiltersModal"
       size="medium"
     >
-      <contacts-advanced-filters
+      <ContactsAdvancedFilters
         v-if="showFiltersModal"
         :on-close="closeAdvanceFiltersModal"
         :initial-filter-types="contactFilterItems"
diff --git a/app/javascript/dashboard/routes/dashboard/contacts/components/ImportContacts.vue b/app/javascript/dashboard/routes/dashboard/contacts/components/ImportContacts.vue
index ce430aaa0..6e536b555 100644
--- a/app/javascript/dashboard/routes/dashboard/contacts/components/ImportContacts.vue
+++ b/app/javascript/dashboard/routes/dashboard/contacts/components/ImportContacts.vue
@@ -52,7 +52,7 @@ export default {
 </script>
 
 <template>
-  <modal :show.sync="show" :on-close="onClose">
+  <Modal :show.sync="show" :on-close="onClose">
     <div class="flex flex-col h-auto overflow-auto">
       <woot-modal-header :header-title="$t('IMPORT_CONTACTS.TITLE')">
         <p>
@@ -91,5 +91,5 @@ export default {
         </div>
       </div>
     </div>
-  </modal>
+  </Modal>
 </template>
diff --git a/app/javascript/dashboard/routes/dashboard/contacts/pages/ContactManageView.vue b/app/javascript/dashboard/routes/dashboard/contacts/pages/ContactManageView.vue
index 189e72a13..8f6658392 100644
--- a/app/javascript/dashboard/routes/dashboard/contacts/pages/ContactManageView.vue
+++ b/app/javascript/dashboard/routes/dashboard/contacts/pages/ContactManageView.vue
@@ -67,7 +67,7 @@ export default {
   <div
     class="flex justify-between flex-col h-full m-0 flex-1 bg-white dark:bg-slate-900"
   >
-    <settings-header
+    <SettingsHeader
       button-route="new"
       :header-title="contact.name"
       show-back-button
@@ -75,22 +75,22 @@ export default {
       :back-url="backUrl"
       :show-new-button="false"
     >
-      <thumbnail
+      <Thumbnail
         v-if="contact.thumbnail"
         :src="contact.thumbnail"
         :username="contact.name"
         size="32px"
         class="mr-2 rtl:mr-0 rtl:ml-2"
       />
-    </settings-header>
+    </SettingsHeader>
 
     <div v-if="uiFlags.isFetchingItem" class="text-center p-4 text-base h-full">
-      <spinner size="" />
+      <Spinner size="" />
       <span>{{ $t('CONTACT_PROFILE.LOADING') }}</span>
     </div>
     <div v-else-if="contact.id" class="overflow-hidden flex-1 min-w-0">
       <div class="flex flex-wrap ml-auto mr-auto max-w-full h-full">
-        <contact-info-panel
+        <ContactInfoPanel
           :show-close-button="false"
           :show-avatar="false"
           :contact="contact"
@@ -107,7 +107,7 @@ export default {
           <div
             class="bg-slate-25 dark:bg-slate-800 h-[calc(100%-40px)] p-4 overflow-auto"
           >
-            <contact-notes
+            <ContactNotes
               v-if="selectedTabIndex === 0"
               :contact-id="Number(contactId)"
             />
diff --git a/app/javascript/dashboard/routes/dashboard/conversation/ContactConversations.vue b/app/javascript/dashboard/routes/dashboard/conversation/ContactConversations.vue
index c5180e6b5..46d1d7ea5 100644
--- a/app/javascript/dashboard/routes/dashboard/conversation/ContactConversations.vue
+++ b/app/javascript/dashboard/routes/dashboard/conversation/ContactConversations.vue
@@ -55,7 +55,7 @@ export default {
         </span>
       </div>
       <div v-else class="contact-conversation--list">
-        <conversation-card
+        <ConversationCard
           v-for="conversation in previousConversations"
           :key="conversation.id"
           :chat="conversation"
@@ -65,7 +65,7 @@ export default {
         />
       </div>
     </div>
-    <spinner v-else />
+    <Spinner v-else />
   </div>
 </template>
 
diff --git a/app/javascript/dashboard/routes/dashboard/conversation/ContactPanel.vue b/app/javascript/dashboard/routes/dashboard/conversation/ContactPanel.vue
index 792431f72..d81d1242f 100644
--- a/app/javascript/dashboard/routes/dashboard/conversation/ContactPanel.vue
+++ b/app/javascript/dashboard/routes/dashboard/conversation/ContactPanel.vue
@@ -137,7 +137,7 @@ export default {
   <div
     class="overflow-y-auto bg-white border-l dark:bg-slate-900 text-slate-900 dark:text-slate-300 border-slate-50 dark:border-slate-800/50 rtl:border-l-0 rtl:border-r contact--panel"
   >
-    <contact-info
+    <ContactInfo
       :contact="contact"
       :channel-type="channelType"
       @toggle-panel="onPanelToggle"
@@ -162,24 +162,24 @@ export default {
             v-if="element.name === 'conversation_actions'"
             class="conversation--actions"
           >
-            <accordion-item
+            <AccordionItem
               :title="$t('CONVERSATION_SIDEBAR.ACCORDION.CONVERSATION_ACTIONS')"
               :is-open="isContactSidebarItemOpen('is_conv_actions_open')"
               @click="
                 value => toggleSidebarUIState('is_conv_actions_open', value)
               "
             >
-              <conversation-action
+              <ConversationAction
                 :conversation-id="conversationId"
                 :inbox-id="inboxId"
               />
-            </accordion-item>
+            </AccordionItem>
           </div>
           <div
             v-else-if="element.name === 'conversation_participants'"
             class="conversation--actions"
           >
-            <accordion-item
+            <AccordionItem
               :title="$t('CONVERSATION_PARTICIPANTS.SIDEBAR_TITLE')"
               :is-open="isContactSidebarItemOpen('is_conv_participants_open')"
               @click="
@@ -187,14 +187,14 @@ export default {
                   toggleSidebarUIState('is_conv_participants_open', value)
               "
             >
-              <conversation-participant
+              <ConversationParticipant
                 :conversation-id="conversationId"
                 :inbox-id="inboxId"
               />
-            </accordion-item>
+            </AccordionItem>
           </div>
           <div v-else-if="element.name === 'conversation_info'">
-            <accordion-item
+            <AccordionItem
               :title="$t('CONVERSATION_SIDEBAR.ACCORDION.CONVERSATION_INFO')"
               :is-open="isContactSidebarItemOpen('is_conv_details_open')"
               compact
@@ -202,14 +202,14 @@ export default {
                 value => toggleSidebarUIState('is_conv_details_open', value)
               "
             >
-              <conversation-info
+              <ConversationInfo
                 :conversation-attributes="conversationAdditionalAttributes"
                 :contact-attributes="contactAdditionalAttributes"
               />
-            </accordion-item>
+            </AccordionItem>
           </div>
           <div v-else-if="element.name === 'contact_attributes'">
-            <accordion-item
+            <AccordionItem
               :title="$t('CONVERSATION_SIDEBAR.ACCORDION.CONTACT_ATTRIBUTES')"
               :is-open="isContactSidebarItemOpen('is_contact_attributes_open')"
               compact
@@ -218,7 +218,7 @@ export default {
                   toggleSidebarUIState('is_contact_attributes_open', value)
               "
             >
-              <custom-attributes
+              <CustomAttributes
                 attribute-type="contact_attribute"
                 attribute-class="conversation--attribute"
                 class="even"
@@ -228,10 +228,10 @@ export default {
                   $t('CONVERSATION_CUSTOM_ATTRIBUTES.NO_RECORDS_FOUND')
                 "
               />
-            </accordion-item>
+            </AccordionItem>
           </div>
           <div v-else-if="element.name === 'previous_conversation'">
-            <accordion-item
+            <AccordionItem
               v-if="contact.id"
               :title="
                 $t('CONVERSATION_SIDEBAR.ACCORDION.PREVIOUS_CONVERSATION')
@@ -241,24 +241,24 @@ export default {
                 value => toggleSidebarUIState('is_previous_conv_open', value)
               "
             >
-              <contact-conversations
+              <ContactConversations
                 :contact-id="contact.id"
                 :conversation-id="conversationId"
               />
-            </accordion-item>
+            </AccordionItem>
           </div>
           <woot-feature-toggle
             v-else-if="element.name === 'macros'"
             feature-key="macros"
           >
-            <accordion-item
+            <AccordionItem
               :title="$t('CONVERSATION_SIDEBAR.ACCORDION.MACROS')"
               :is-open="isContactSidebarItemOpen('is_macro_open')"
               compact
               @click="value => toggleSidebarUIState('is_macro_open', value)"
             >
-              <macros-list :conversation-id="conversationId" />
-            </accordion-item>
+              <MacrosList :conversation-id="conversationId" />
+            </AccordionItem>
           </woot-feature-toggle>
         </div>
       </transition-group>
diff --git a/app/javascript/dashboard/routes/dashboard/conversation/ConversationAction.vue b/app/javascript/dashboard/routes/dashboard/conversation/ConversationAction.vue
index 29b134310..00106fe4a 100644
--- a/app/javascript/dashboard/routes/dashboard/conversation/ConversationAction.vue
+++ b/app/javascript/dashboard/routes/dashboard/conversation/ConversationAction.vue
@@ -193,7 +193,7 @@ export default {
 <template>
   <div class="bg-white dark:bg-slate-900">
     <div class="multiselect-wrap--small">
-      <contact-details-item
+      <ContactDetailsItem
         compact
         :title="$t('CONVERSATION_SIDEBAR.ASSIGNEE_LABEL')"
       >
@@ -208,8 +208,8 @@ export default {
             {{ $t('CONVERSATION_SIDEBAR.SELF_ASSIGN') }}
           </woot-button>
         </template>
-      </contact-details-item>
-      <multiselect-dropdown
+      </ContactDetailsItem>
+      <MultiselectDropdown
         :options="agentsList"
         :selected-item="assignedAgent"
         :multiselector-title="$t('AGENT_MGMT.MULTI_SELECTOR.TITLE.AGENT')"
@@ -224,11 +224,11 @@ export default {
       />
     </div>
     <div class="multiselect-wrap--small">
-      <contact-details-item
+      <ContactDetailsItem
         compact
         :title="$t('CONVERSATION_SIDEBAR.TEAM_LABEL')"
       />
-      <multiselect-dropdown
+      <MultiselectDropdown
         :options="teamsList"
         :selected-item="assignedTeam"
         :multiselector-title="$t('AGENT_MGMT.MULTI_SELECTOR.TITLE.TEAM')"
@@ -243,11 +243,8 @@ export default {
       />
     </div>
     <div class="multiselect-wrap--small">
-      <contact-details-item
-        compact
-        :title="$t('CONVERSATION.PRIORITY.TITLE')"
-      />
-      <multiselect-dropdown
+      <ContactDetailsItem compact :title="$t('CONVERSATION.PRIORITY.TITLE')" />
+      <MultiselectDropdown
         :options="priorityOptions"
         :selected-item="assignedPriority"
         :multiselector-title="$t('CONVERSATION.PRIORITY.TITLE')"
@@ -263,10 +260,10 @@ export default {
         @click="onClickAssignPriority"
       />
     </div>
-    <contact-details-item
+    <ContactDetailsItem
       compact
       :title="$t('CONVERSATION_SIDEBAR.ACCORDION.CONVERSATION_LABELS')"
     />
-    <conversation-labels :conversation-id="conversationId" />
+    <ConversationLabels :conversation-id="conversationId" />
   </div>
 </template>
diff --git a/app/javascript/dashboard/routes/dashboard/conversation/ConversationParticipant.vue b/app/javascript/dashboard/routes/dashboard/conversation/ConversationParticipant.vue
index 4f989f4bf..88f420270 100644
--- a/app/javascript/dashboard/routes/dashboard/conversation/ConversationParticipant.vue
+++ b/app/javascript/dashboard/routes/dashboard/conversation/ConversationParticipant.vue
@@ -156,7 +156,7 @@ export default {
       <div class="flex justify-between w-full mb-1">
         <div>
           <p v-if="watchersList.length" class="total-watchers m-0 text-sm">
-            <spinner v-if="watchersUiFlas.isFetching" size="tiny" />
+            <Spinner v-if="watchersUiFlas.isFetching" size="tiny" />
             {{ totalWatchersText }}
           </p>
           <p v-else class="text-slate-400 dark:text-slate-700 m-0 text-sm">
@@ -175,7 +175,7 @@ export default {
       </div>
     </div>
     <div class="flex justify-between items-center">
-      <thumbnail-group
+      <ThumbnailGroup
         :more-thumbnails-text="moreThumbnailsText"
         :show-more-thumbnails-count="showMoreThumbs"
         :users-list="thumbnailList"
@@ -219,7 +219,7 @@ export default {
           @click="onCloseDropdown"
         />
       </div>
-      <multiselect-dropdown-items
+      <MultiselectDropdownItems
         :options="agentsList"
         :selected-items="selectedWatchers"
         :has-thumbnail="true"
diff --git a/app/javascript/dashboard/routes/dashboard/conversation/ConversationView.vue b/app/javascript/dashboard/routes/dashboard/conversation/ConversationView.vue
index a993c86e7..766b82c1f 100644
--- a/app/javascript/dashboard/routes/dashboard/conversation/ConversationView.vue
+++ b/app/javascript/dashboard/routes/dashboard/conversation/ConversationView.vue
@@ -221,7 +221,7 @@ export default {
 
 <template>
   <section class="bg-white conversation-page dark:bg-slate-900">
-    <chat-list
+    <ChatList
       :show-conversation-list="showConversationList"
       :conversation-inbox="inboxId"
       :label="label"
@@ -231,12 +231,12 @@ export default {
       :is-on-expanded-layout="isOnExpandedLayout"
       @conversation-load="onConversationLoad"
     >
-      <pop-over-search
+      <PopOverSearch
         :is-on-expanded-layout="isOnExpandedLayout"
         @toggle-conversation-layout="toggleConversationLayout"
       />
-    </chat-list>
-    <conversation-box
+    </ChatList>
+    <ConversationBox
       v-if="showMessageView"
       :inbox-id="inboxId"
       :is-contact-panel-open="isContactPanelOpen"
@@ -247,7 +247,7 @@ export default {
       :show.sync="showCustomSnoozeModal"
       :on-close="hideCustomSnoozeModal"
     >
-      <custom-snooze-modal
+      <CustomSnoozeModal
         @close="hideCustomSnoozeModal"
         @choose-time="chooseSnoozeTime"
       />
diff --git a/app/javascript/dashboard/routes/dashboard/conversation/Macros/List.vue b/app/javascript/dashboard/routes/dashboard/conversation/Macros/List.vue
index 3259bb464..d86e10735 100644
--- a/app/javascript/dashboard/routes/dashboard/conversation/Macros/List.vue
+++ b/app/javascript/dashboard/routes/dashboard/conversation/Macros/List.vue
@@ -50,7 +50,7 @@ export default {
       :message="$t('MACROS.LOADING')"
     />
     <div v-if="!uiFlags.isFetching && macros.length" class="macros-list">
-      <macro-item
+      <MacroItem
         v-for="macro in macros"
         :key="macro.id"
         :macro="macro"
diff --git a/app/javascript/dashboard/routes/dashboard/conversation/Macros/MacroItem.vue b/app/javascript/dashboard/routes/dashboard/conversation/Macros/MacroItem.vue
index 1aadce341..8f2881f0b 100644
--- a/app/javascript/dashboard/routes/dashboard/conversation/Macros/MacroItem.vue
+++ b/app/javascript/dashboard/routes/dashboard/conversation/Macros/MacroItem.vue
@@ -74,7 +74,7 @@ export default {
       />
     </div>
     <transition name="menu-slide">
-      <macro-preview
+      <MacroPreview
         v-if="showPreview"
         v-on-clickaway="closeMacroPreview"
         :macro="macro"
diff --git a/app/javascript/dashboard/routes/dashboard/conversation/contact/ContactInfo.vue b/app/javascript/dashboard/routes/dashboard/conversation/contact/ContactInfo.vue
index 5bcdfe3f6..f71f6ce0b 100644
--- a/app/javascript/dashboard/routes/dashboard/conversation/contact/ContactInfo.vue
+++ b/app/javascript/dashboard/routes/dashboard/conversation/contact/ContactInfo.vue
@@ -171,7 +171,7 @@ export default {
   <div class="relative items-center w-full p-4 bg-white dark:bg-slate-900">
     <div class="flex flex-col w-full gap-2 text-left rtl:text-right">
       <div class="flex flex-row justify-between">
-        <thumbnail
+        <Thumbnail
           v-if="showAvatar"
           :src="contact.thumbnail"
           size="56px"
@@ -225,7 +225,7 @@ export default {
           {{ additionalAttributes.description }}
         </p>
         <div class="flex flex-col items-start w-full gap-2">
-          <contact-info-row
+          <ContactInfoRow
             :href="contact.email ? `mailto:${contact.email}` : ''"
             :value="contact.email"
             icon="mail"
@@ -233,7 +233,7 @@ export default {
             :title="$t('CONTACT_PANEL.EMAIL_ADDRESS')"
             show-copy
           />
-          <contact-info-row
+          <ContactInfoRow
             :href="contact.phone_number ? `tel:${contact.phone_number}` : ''"
             :value="contact.phone_number"
             icon="call"
@@ -241,27 +241,27 @@ export default {
             :title="$t('CONTACT_PANEL.PHONE_NUMBER')"
             show-copy
           />
-          <contact-info-row
+          <ContactInfoRow
             v-if="contact.identifier"
             :value="contact.identifier"
             icon="contact-identify"
             emoji="🪪"
             :title="$t('CONTACT_PANEL.IDENTIFIER')"
           />
-          <contact-info-row
+          <ContactInfoRow
             :value="additionalAttributes.company_name"
             icon="building-bank"
             emoji="🏢"
             :title="$t('CONTACT_PANEL.COMPANY')"
           />
-          <contact-info-row
+          <ContactInfoRow
             v-if="location || additionalAttributes.location"
             :value="location || additionalAttributes.location"
             icon="map"
             emoji="🌍"
             :title="$t('CONTACT_PANEL.LOCATION')"
           />
-          <social-icons :social-profiles="socialProfiles" />
+          <SocialIcons :social-profiles="socialProfiles" />
         </div>
       </div>
       <div class="flex items-center w-full mt-0.5 gap-2">
@@ -302,19 +302,19 @@ export default {
           @click="toggleDeleteModal"
         />
       </div>
-      <edit-contact
+      <EditContact
         v-if="showEditModal"
         :show="showEditModal"
         :contact="contact"
         @cancel="toggleEditModal"
       />
-      <new-conversation
+      <NewConversation
         v-if="contact.id"
         :show="showConversationModal"
         :contact="contact"
         @cancel="toggleConversationModal"
       />
-      <contact-merge-modal
+      <ContactMergeModal
         v-if="showMergeModal"
         :primary-contact="contact"
         :show="showMergeModal"
diff --git a/app/javascript/dashboard/routes/dashboard/conversation/contact/ContactInfoRow.vue b/app/javascript/dashboard/routes/dashboard/conversation/contact/ContactInfoRow.vue
index b980a68cd..356cf2bff 100644
--- a/app/javascript/dashboard/routes/dashboard/conversation/contact/ContactInfoRow.vue
+++ b/app/javascript/dashboard/routes/dashboard/conversation/contact/ContactInfoRow.vue
@@ -45,7 +45,7 @@ export default {
       :href="href"
       class="flex items-center gap-2 text-slate-800 dark:text-slate-100 hover:underline"
     >
-      <emoji-or-icon
+      <EmojiOrIcon
         :icon="icon"
         :emoji="emoji"
         icon-size="14"
@@ -78,7 +78,7 @@ export default {
       v-else
       class="flex items-center gap-2 text-slate-800 dark:text-slate-100"
     >
-      <emoji-or-icon
+      <EmojiOrIcon
         :icon="icon"
         :emoji="emoji"
         icon-size="14"
diff --git a/app/javascript/dashboard/routes/dashboard/conversation/contact/ConversationForm.vue b/app/javascript/dashboard/routes/dashboard/conversation/contact/ConversationForm.vue
index 4b33eb889..00313cf7f 100644
--- a/app/javascript/dashboard/routes/dashboard/conversation/contact/ConversationForm.vue
+++ b/app/javascript/dashboard/routes/dashboard/conversation/contact/ConversationForm.vue
@@ -355,7 +355,7 @@ export default {
               :options="[...inboxes]"
             >
               <template slot="singleLabel" slot-scope="{ option }">
-                <inbox-dropdown-item
+                <InboxDropdownItem
                   v-if="option.name"
                   :name="option.name"
                   :inbox-identifier="computedInboxSource(option)"
@@ -366,7 +366,7 @@ export default {
                 </span>
               </template>
               <template slot="option" slot-scope="{ option }">
-                <inbox-dropdown-item
+                <InboxDropdownItem
                   :name="option.name"
                   :inbox-identifier="computedInboxSource(option)"
                   :channel-type="option.channel_type"
@@ -386,7 +386,7 @@ export default {
             <div
               class="flex items-center h-[2.4735rem] rounded-sm py-1 px-2 bg-slate-25 dark:bg-slate-900 border border-solid border-slate-75 dark:border-slate-600"
             >
-              <thumbnail
+              <Thumbnail
                 :src="contact.thumbnail"
                 size="24px"
                 :username="contact.name"
@@ -420,7 +420,7 @@ export default {
       <div class="w-full">
         <div class="w-full">
           <div class="relative">
-            <canned-response
+            <CannedResponse
               v-if="showCannedResponseMenu && hasSlashCommand"
               :search-key="cannedResponseSearchKey"
               @click="replaceTextWithCannedResponse"
@@ -430,13 +430,13 @@ export default {
             <label>
               {{ $t('NEW_CONVERSATION.FORM.MESSAGE.LABEL') }}
             </label>
-            <reply-email-head
+            <ReplyEmailHead
               v-if="isAnEmailInbox"
               :cc-emails.sync="ccEmails"
               :bcc-emails.sync="bccEmails"
             />
             <div class="editor-wrap">
-              <woot-message-editor
+              <WootMessageEditor
                 v-model="message"
                 class="message-editor"
                 :class="{ editor_warning: v$.message.$error }"
@@ -448,7 +448,7 @@ export default {
                 @blur="v$.message.$touch"
               >
                 <template #footer>
-                  <message-signature-missing-alert
+                  <MessageSignatureMissingAlert
                     v-if="isSignatureEnabledForInbox && !messageSignature"
                     class="!mx-0 mb-1"
                   />
@@ -464,13 +464,13 @@ export default {
                     />
                   </div>
                 </template>
-              </woot-message-editor>
+              </WootMessageEditor>
               <span v-if="v$.message.$error" class="editor-warning__message">
                 {{ $t('NEW_CONVERSATION.FORM.MESSAGE.ERROR') }}
               </span>
             </div>
           </div>
-          <whatsapp-templates
+          <WhatsappTemplates
             v-else-if="hasWhatsappTemplates"
             :inbox-id="selectedInbox.inbox.id"
             @on-select-template="toggleWaTemplate"
@@ -490,7 +490,7 @@ export default {
             </span>
           </label>
           <div v-if="isEmailOrWebWidgetInbox" class="flex flex-col">
-            <file-upload
+            <FileUpload
               ref="uploadAttachment"
               input-id="newConversationAttachment"
               :size="4096 * 4096"
@@ -519,12 +519,12 @@ export default {
               >
                 {{ $t('NEW_CONVERSATION.FORM.ATTACHMENTS.HELP_TEXT') }}
               </span>
-            </file-upload>
+            </FileUpload>
             <div
               v-if="hasAttachments"
               class="max-h-20 overflow-y-auto mb-4 mt-1.5"
             >
-              <attachment-preview
+              <AttachmentPreview
                 class="[&>.preview-item]:dark:bg-slate-700 flex-row flex-wrap gap-x-3 gap-y-1"
                 :attachments="attachedFiles"
                 :remove-attachment="removeAttachment"
diff --git a/app/javascript/dashboard/routes/dashboard/conversation/contact/CreateContact.vue b/app/javascript/dashboard/routes/dashboard/conversation/contact/CreateContact.vue
index c3b1c58a0..ce7be376b 100644
--- a/app/javascript/dashboard/routes/dashboard/conversation/contact/CreateContact.vue
+++ b/app/javascript/dashboard/routes/dashboard/conversation/contact/CreateContact.vue
@@ -45,7 +45,7 @@ export default {
         :header-title="$t('CREATE_CONTACT.TITLE')"
         :header-content="$t('CREATE_CONTACT.DESC')"
       />
-      <contact-form
+      <ContactForm
         :in-progress="uiFlags.isCreating"
         :on-submit="onSubmit"
         @success="onSuccess"
diff --git a/app/javascript/dashboard/routes/dashboard/conversation/contact/EditContact.vue b/app/javascript/dashboard/routes/dashboard/conversation/contact/EditContact.vue
index a2298ae5f..21f1de0e3 100644
--- a/app/javascript/dashboard/routes/dashboard/conversation/contact/EditContact.vue
+++ b/app/javascript/dashboard/routes/dashboard/conversation/contact/EditContact.vue
@@ -51,7 +51,7 @@ export default {
         }`"
         :header-content="$t('EDIT_CONTACT.DESC')"
       />
-      <contact-form
+      <ContactForm
         :contact="contact"
         :in-progress="uiFlags.isUpdating"
         :on-submit="onSubmit"
diff --git a/app/javascript/dashboard/routes/dashboard/conversation/contact/NewConversation.vue b/app/javascript/dashboard/routes/dashboard/conversation/contact/NewConversation.vue
index d6a73a2f8..a0a579bbf 100644
--- a/app/javascript/dashboard/routes/dashboard/conversation/contact/NewConversation.vue
+++ b/app/javascript/dashboard/routes/dashboard/conversation/contact/NewConversation.vue
@@ -50,7 +50,7 @@ export default {
         :header-title="$t('NEW_CONVERSATION.TITLE')"
         :header-content="$t('NEW_CONVERSATION.DESC')"
       />
-      <conversation-form
+      <ConversationForm
         :contact="contact"
         :on-submit="onSubmit"
         @success="onSuccess"
diff --git a/app/javascript/dashboard/routes/dashboard/conversation/contact/WhatsappTemplates.vue b/app/javascript/dashboard/routes/dashboard/conversation/contact/WhatsappTemplates.vue
index b9df9ec69..438f3b4d2 100644
--- a/app/javascript/dashboard/routes/dashboard/conversation/contact/WhatsappTemplates.vue
+++ b/app/javascript/dashboard/routes/dashboard/conversation/contact/WhatsappTemplates.vue
@@ -42,12 +42,12 @@ export default {
 
 <template>
   <div class="mx-0 flex flex-wrap">
-    <templates-picker
+    <TemplatesPicker
       v-if="!selectedWaTemplate"
       :inbox-id="inboxId"
       @onSelect="pickTemplate"
     />
-    <template-parser
+    <TemplateParser
       v-else
       :template="selectedWaTemplate"
       @resetTemplate="onResetTemplate"
diff --git a/app/javascript/dashboard/routes/dashboard/conversation/customAttributes/CustomAttributes.vue b/app/javascript/dashboard/routes/dashboard/conversation/customAttributes/CustomAttributes.vue
index 94c4d9f40..a769b7ede 100644
--- a/app/javascript/dashboard/routes/dashboard/conversation/customAttributes/CustomAttributes.vue
+++ b/app/javascript/dashboard/routes/dashboard/conversation/customAttributes/CustomAttributes.vue
@@ -148,7 +148,7 @@ export default {
 
 <template>
   <div class="custom-attributes--panel">
-    <custom-attribute
+    <CustomAttribute
       v-for="attribute in displayedAttributes"
       :key="attribute.id"
       :attribute-key="attribute.attribute_key"
diff --git a/app/javascript/dashboard/routes/dashboard/conversation/labels/LabelBox.vue b/app/javascript/dashboard/routes/dashboard/conversation/labels/LabelBox.vue
index 46693f85d..3ab5d3b21 100644
--- a/app/javascript/dashboard/routes/dashboard/conversation/labels/LabelBox.vue
+++ b/app/javascript/dashboard/routes/dashboard/conversation/labels/LabelBox.vue
@@ -80,7 +80,7 @@ export default {
         class="label-wrap"
         @keyup.esc="closeDropdownLabel"
       >
-        <add-label @add="toggleLabels" />
+        <AddLabel @add="toggleLabels" />
         <woot-label
           v-for="label in activeLabels"
           :key="label.id"
@@ -98,7 +98,7 @@ export default {
             :class="{ 'dropdown-pane--open': showSearchDropdownLabel }"
             class="dropdown-pane"
           >
-            <label-dropdown
+            <LabelDropdown
               v-if="showSearchDropdownLabel"
               :account-labels="accountLabels"
               :selected-labels="savedLabels"
@@ -110,7 +110,7 @@ export default {
         </div>
       </div>
     </div>
-    <spinner v-else />
+    <Spinner v-else />
   </div>
 </template>
 
diff --git a/app/javascript/dashboard/routes/dashboard/conversation/search/PopOverSearch.vue b/app/javascript/dashboard/routes/dashboard/conversation/search/PopOverSearch.vue
index 91c5e76e4..3826bc6e6 100644
--- a/app/javascript/dashboard/routes/dashboard/conversation/search/PopOverSearch.vue
+++ b/app/javascript/dashboard/routes/dashboard/conversation/search/PopOverSearch.vue
@@ -58,7 +58,7 @@ export default {
           {{ $t('CONVERSATION.SEARCH_MESSAGES') }}
         </p>
       </router-link>
-      <switch-layout
+      <SwitchLayout
         :is-on-expanded-layout="isOnExpandedLayout"
         @toggle="$emit('toggle-conversation-layout')"
       />
diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/components/AddLocale.vue b/app/javascript/dashboard/routes/dashboard/helpcenter/components/AddLocale.vue
index 737559487..d426f8ace 100644
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/components/AddLocale.vue
+++ b/app/javascript/dashboard/routes/dashboard/helpcenter/components/AddLocale.vue
@@ -97,7 +97,7 @@ export default {
 
 <!-- eslint-disable vue/no-mutating-props -->
 <template>
-  <modal :show.sync="show" :on-close="onClose">
+  <Modal :show.sync="show" :on-close="onClose">
     <woot-modal-header
       :header-title="$t('HELP_CENTER.PORTAL.ADD_LOCALE.TITLE')"
       :header-content="$t('HELP_CENTER.PORTAL.ADD_LOCALE.SUB_TITLE')"
@@ -132,7 +132,7 @@ export default {
         </div>
       </div>
     </form>
-  </modal>
+  </Modal>
 </template>
 <style scoped lang="scss">
 .input-container::v-deep {
diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/components/ArticleEditor.vue b/app/javascript/dashboard/routes/dashboard/helpcenter/components/ArticleEditor.vue
index 5302ea17f..1dcb74c05 100644
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/components/ArticleEditor.vue
+++ b/app/javascript/dashboard/routes/dashboard/helpcenter/components/ArticleEditor.vue
@@ -57,7 +57,7 @@ export default {
 
 <template>
   <div class="edit-article--container">
-    <resizable-text-area
+    <ResizableTextArea
       v-model="articleTitle"
       type="text"
       :rows="1"
@@ -67,7 +67,7 @@ export default {
       @blur="onBlur"
       @input="onTitleInput"
     />
-    <woot-article-editor
+    <WootArticleEditor
       v-model="articleContent"
       class="article-content"
       :placeholder="$t('HELP_CENTER.EDIT_ARTICLE.CONTENT_PLACEHOLDER')"
diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/components/ArticleSearch/ArticleView.vue b/app/javascript/dashboard/routes/dashboard/helpcenter/components/ArticleSearch/ArticleView.vue
index 651dfb277..704ee64c6 100644
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/components/ArticleSearch/ArticleView.vue
+++ b/app/javascript/dashboard/routes/dashboard/helpcenter/components/ArticleSearch/ArticleView.vue
@@ -39,7 +39,7 @@ export default {
     </div>
     <div class="-ml-4 h-full overflow-y-auto">
       <div class="w-full h-full min-h-0">
-        <iframe-loader :url="url" />
+        <IframeLoader :url="url" />
       </div>
     </div>
 
diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/components/ArticleSearch/SearchPopover.vue b/app/javascript/dashboard/routes/dashboard/helpcenter/components/ArticleSearch/SearchPopover.vue
index 7a4e75d9c..ec2d9708a 100644
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/components/ArticleSearch/SearchPopover.vue
+++ b/app/javascript/dashboard/routes/dashboard/helpcenter/components/ArticleSearch/SearchPopover.vue
@@ -136,20 +136,20 @@ export default {
       v-on-clickaway="onClose"
       class="flex flex-col px-4 pb-4 rounded-md shadow-md border border-solid border-slate-50 dark:border-slate-800 bg-white dark:bg-slate-900 z-[1000] max-w-[720px] md:w-[20rem] lg:w-[24rem] xl:w-[28rem] 2xl:w-[32rem] h-[calc(100vh-20rem)] max-h-[40rem]"
     >
-      <search-header
+      <SearchHeader
         :title="$t('HELP_CENTER.ARTICLE_SEARCH.TITLE')"
         class="w-full sticky top-0 bg-[inherit]"
         @close="onClose"
         @search="onSearch"
       />
 
-      <article-view
+      <ArticleView
         v-if="activeId"
         :url="articleViewerUrl"
         @back="onBack"
         @insert="onInsert"
       />
-      <search-results
+      <SearchResults
         v-else
         :search-query="searchQuery"
         :is-loading="isLoading"
diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/components/ArticleSearch/SearchResults.vue b/app/javascript/dashboard/routes/dashboard/helpcenter/components/ArticleSearch/SearchResults.vue
index e966ebc86..1a9413a77 100644
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/components/ArticleSearch/SearchResults.vue
+++ b/app/javascript/dashboard/routes/dashboard/helpcenter/components/ArticleSearch/SearchResults.vue
@@ -51,7 +51,7 @@ export default {
       <div v-else-if="showNoResults" class="empty-state-message">
         {{ $t('HELP_CENTER.ARTICLE_SEARCH_RESULT.NO_RESULT') }}
       </div>
-      <search-result-item
+      <SearchResultItem
         v-for="article in articles"
         v-else
         :id="article.id"
diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/components/ArticleTable.vue b/app/javascript/dashboard/routes/dashboard/helpcenter/components/ArticleTable.vue
index 57d44bb01..0d3008e62 100644
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/components/ArticleTable.vue
+++ b/app/javascript/dashboard/routes/dashboard/helpcenter/components/ArticleTable.vue
@@ -145,7 +145,7 @@ export default {
       />
     </draggable>
 
-    <table-footer
+    <TableFooter
       v-if="showArticleFooter"
       :current-page="currentPage"
       :total-count="totalCount"
diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/components/Header/ArticleHeader.vue b/app/javascript/dashboard/routes/dashboard/helpcenter/components/Header/ArticleHeader.vue
index de692fe02..cb213e8ce 100644
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/components/Header/ArticleHeader.vue
+++ b/app/javascript/dashboard/routes/dashboard/helpcenter/components/Header/ArticleHeader.vue
@@ -125,7 +125,7 @@ export default {
           class="inline-flex ml-1 rtl:ml-0 rtl:mr-1 items-center text-slate-800 dark:text-slate-100"
         >
           {{ selectedValue }}
-          <Fluent-icon class="dropdown-arrow" icon="chevron-down" size="14" />
+          <FluentIcon class="dropdown-arrow" icon="chevron-down" size="14" />
         </span>
       </woot-button>
       <div
@@ -133,8 +133,8 @@ export default {
         v-on-clickaway="closeDropdown"
         class="dropdown-pane dropdown-pane--open"
       >
-        <woot-dropdown-menu>
-          <woot-dropdown-item>
+        <WootDropdownMenu>
+          <WootDropdownItem>
             <woot-button
               variant="clear"
               color-scheme="secondary"
@@ -143,8 +143,8 @@ export default {
             >
               {{ $t('HELP_CENTER.HEADER.DROPDOWN_OPTIONS.PUBLISHED') }}
             </woot-button>
-          </woot-dropdown-item>
-          <woot-dropdown-item>
+          </WootDropdownItem>
+          <WootDropdownItem>
             <woot-button
               variant="clear"
               color-scheme="secondary"
@@ -153,8 +153,8 @@ export default {
             >
               {{ $t('HELP_CENTER.HEADER.DROPDOWN_OPTIONS.DRAFT') }}
             </woot-button>
-          </woot-dropdown-item>
-          <woot-dropdown-item>
+          </WootDropdownItem>
+          <WootDropdownItem>
             <woot-button
               variant="clear"
               color-scheme="secondary"
@@ -163,8 +163,8 @@ export default {
             >
               {{ $t('HELP_CENTER.HEADER.DROPDOWN_OPTIONS.ARCHIVED') }}
             </woot-button>
-          </woot-dropdown-item>
-        </woot-dropdown-menu>
+          </WootDropdownItem>
+        </WootDropdownMenu>
       </div>
       <woot-button
         v-if="shouldShowSettings"
@@ -188,7 +188,7 @@ export default {
               class="inline-flex ml-1 rtl:ml-0 rtl:mr-1 items-center text-slate-800 dark:text-slate-100"
             >
               {{ selectedLocale }}
-              <Fluent-icon
+              <FluentIcon
                 class="dropdown-arrow"
                 icon="chevron-down"
                 size="14"
@@ -201,7 +201,7 @@ export default {
           v-on-clickaway="closeLocaleDropdown"
           class="dropdown-pane dropdown-pane--open"
         >
-          <multiselect-dropdown-items
+          <MultiselectDropdownItems
             :options="switchableLocales"
             :has-thumbnail="false"
             :selected-items="[selectedLocale]"
diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/components/HelpCenterLayout.vue b/app/javascript/dashboard/routes/dashboard/helpcenter/components/HelpCenterLayout.vue
index e7dbb5bb1..213f3869c 100644
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/components/HelpCenterLayout.vue
+++ b/app/javascript/dashboard/routes/dashboard/helpcenter/components/HelpCenterLayout.vue
@@ -285,14 +285,14 @@ export default {
 </script>
 <template>
   <div class="flex flex-grow-0 w-full h-full min-h-0 app-wrapper">
-    <sidebar
+    <Sidebar
       :route="currentRoute"
       @toggle-account-modal="toggleAccountModal"
       @open-notification-panel="openNotificationPanel"
       @open-key-shortcut-modal="toggleKeyShortcutModal"
       @close-key-shortcut-modal="closeKeyShortcutModal"
     />
-    <help-center-sidebar
+    <HelpCenterSidebar
       v-if="showHelpCenterSidebar"
       :header-title="headerTitle"
       :portal-slug="selectedPortalSlug"
@@ -308,21 +308,21 @@ export default {
       class="flex flex-1 h-full min-h-0 px-0 overflow-hidden bg-white dark:bg-slate-900"
     >
       <router-view @reload-locale="fetchPortalAndItsCategories" />
-      <command-bar />
-      <account-selector
+      <CommandBar />
+      <AccountSelector
         :show-account-modal="showAccountModal"
         @close-account-modal="toggleAccountModal"
       />
-      <woot-key-shortcut-modal
+      <WootKeyShortcutModal
         v-if="showShortcutModal"
         @close="closeKeyShortcutModal"
         @clickaway="closeKeyShortcutModal"
       />
-      <notification-panel
+      <NotificationPanel
         v-if="showNotificationPanel"
         @close="closeNotificationPanel"
       />
-      <portal-popover
+      <PortalPopover
         v-if="showPortalPopover"
         :portals="portals"
         :active-portal-slug="selectedPortalSlug"
@@ -330,7 +330,7 @@ export default {
         @fetch-portal="fetchPortalAndItsCategories"
         @close-popover="closePortalPopover"
       />
-      <add-category
+      <AddCategory
         v-if="showAddCategoryModal"
         :show.sync="showAddCategoryModal"
         :portal-name="selectedPortalName"
@@ -339,6 +339,6 @@ export default {
         @cancel="onClickCloseAddCategoryModal"
       />
     </section>
-    <upgrade-page v-else />
+    <UpgradePage v-else />
   </div>
 </template>
diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/components/PortalListItem.vue b/app/javascript/dashboard/routes/dashboard/helpcenter/components/PortalListItem.vue
index 0a4af0d3d..b2d169682 100644
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/components/PortalListItem.vue
+++ b/app/javascript/dashboard/routes/dashboard/helpcenter/components/PortalListItem.vue
@@ -354,7 +354,7 @@ export default {
               )
             }}
           </h2>
-          <locale-item-table
+          <LocaleItemTable
             :locales="locales"
             :selected-locale-code="portal.meta.default_locale"
             @change-default-locale="changeDefaultLocale"
diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/components/PortalPopover.vue b/app/javascript/dashboard/routes/dashboard/helpcenter/components/PortalPopover.vue
index c64486b1b..7c65e9742 100644
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/components/PortalPopover.vue
+++ b/app/javascript/dashboard/routes/dashboard/helpcenter/components/PortalPopover.vue
@@ -70,7 +70,7 @@ export default {
       </p>
     </header>
     <div>
-      <portal-switch
+      <PortalSwitch
         v-for="portal in portals"
         :key="portal.id"
         :portal="portal"
diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/components/Sidebar/Sidebar.vue b/app/javascript/dashboard/routes/dashboard/helpcenter/components/Sidebar/Sidebar.vue
index 4bb283c21..02c49f0cb 100644
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/components/Sidebar/Sidebar.vue
+++ b/app/javascript/dashboard/routes/dashboard/helpcenter/components/Sidebar/Sidebar.vue
@@ -66,7 +66,7 @@ export default {
   <div
     class="h-full overflow-auto w-60 flex flex-col bg-white dark:bg-slate-900 border-r dark:border-slate-700 rtl:border-r-0 rtl:border-l border-slate-50 text-sm"
   >
-    <sidebar-header
+    <SidebarHeader
       :thumbnail-src="thumbnailSrc"
       :header-title="headerTitle"
       :sub-title="subTitle"
@@ -79,12 +79,12 @@ export default {
       tag="ul"
       class="py-2 px-4 list-none ml-0 mb-0"
     >
-      <secondary-nav-item
+      <SecondaryNavItem
         v-for="menuItem in accessibleMenuItems"
         :key="menuItem.toState"
         :menu-item="menuItem"
       />
-      <secondary-nav-item
+      <SecondaryNavItem
         v-for="menuItem in additionalSecondaryMenuItems"
         :key="menuItem.key"
         :menu-item="menuItem"
diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/components/Sidebar/SidebarHeader.vue b/app/javascript/dashboard/routes/dashboard/helpcenter/components/Sidebar/SidebarHeader.vue
index 7ce46c01d..343dae71a 100644
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/components/Sidebar/SidebarHeader.vue
+++ b/app/javascript/dashboard/routes/dashboard/helpcenter/components/Sidebar/SidebarHeader.vue
@@ -38,7 +38,7 @@ export default {
     class="flex h-16 items-center justify-between py-4 px-0 mb-1/4 border-b border-slate-50 dark:border-slate-700"
   >
     <div class="flex items-center">
-      <thumbnail
+      <Thumbnail
         size="32px"
         :src="thumbnailSrc"
         :username="headerTitle"
diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/pages/articles/ArticleSettings.vue b/app/javascript/dashboard/routes/dashboard/helpcenter/pages/articles/ArticleSettings.vue
index 621833138..cfb98a8f2 100644
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/pages/articles/ArticleSettings.vue
+++ b/app/javascript/dashboard/routes/dashboard/helpcenter/pages/articles/ArticleSettings.vue
@@ -130,7 +130,7 @@ export default {
       <div class="mt-4 mb-6">
         <label>
           {{ $t('HELP_CENTER.ARTICLE_SETTINGS.FORM.CATEGORY.LABEL') }}
-          <multiselect-dropdown
+          <MultiselectDropdown
             :options="categories"
             :selected-item="selectedCategory"
             :has-thumbnail="false"
@@ -153,7 +153,7 @@ export default {
         </label>
         <label>
           {{ $t('HELP_CENTER.ARTICLE_SETTINGS.FORM.AUTHOR.LABEL') }}
-          <multiselect-dropdown
+          <MultiselectDropdown
             :options="agents"
             :selected-item="assignedAuthor"
             :multiselector-title="
diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/pages/articles/EditArticle.vue b/app/javascript/dashboard/routes/dashboard/helpcenter/pages/articles/EditArticle.vue
index a8f09b3e0..9672851ca 100644
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/pages/articles/EditArticle.vue
+++ b/app/javascript/dashboard/routes/dashboard/helpcenter/pages/articles/EditArticle.vue
@@ -174,7 +174,7 @@ export default {
       class="flex-1 flex-shrink-0 px-6 overflow-auto"
       :class="{ 'flex-grow-1 flex-shrink-0': showArticleSettings }"
     >
-      <edit-article-header
+      <EditArticleHeader
         :back-button-label="$t('HELP_CENTER.HEADER.TITLES.ALL_ARTICLES')"
         :is-updating="isUpdating"
         :is-saved="isSaved"
@@ -186,17 +186,17 @@ export default {
         @update-meta="updateMeta"
       />
       <div v-if="isFetching" class="h-full p-4 text-base text-center">
-        <spinner size="" />
+        <Spinner size="" />
         <span>{{ $t('HELP_CENTER.EDIT_ARTICLE.LOADING') }}</span>
       </div>
-      <article-editor
+      <ArticleEditor
         v-else
         :is-settings-sidebar-open="showArticleSettings"
         :article="article"
         @save-article="saveArticle"
       />
     </div>
-    <article-settings
+    <ArticleSettings
       v-if="showArticleSettings"
       :article="article"
       @save-article="saveArticle"
diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/pages/articles/ListAllArticles.vue b/app/javascript/dashboard/routes/dashboard/helpcenter/pages/articles/ListAllArticles.vue
index 151f9e583..e896aed32 100644
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/pages/articles/ListAllArticles.vue
+++ b/app/javascript/dashboard/routes/dashboard/helpcenter/pages/articles/ListAllArticles.vue
@@ -159,7 +159,7 @@ export default {
   <div
     class="py-0 px-0 w-full max-w-full overflow-auto bg-white dark:bg-slate-900 flex flex-col"
   >
-    <article-header
+    <ArticleHeader
       :header-title="headerTitle"
       :count="meta.count"
       :selected-locale="activeLocaleName"
@@ -173,17 +173,17 @@ export default {
       v-if="isFetching"
       class="items-center flex text-base justify-center py-6 px-4 text-slate-600 dark:text-slate-200"
     >
-      <spinner />
+      <Spinner />
       <span class="text-slate-600 dark:text-slate-200">
         {{ $t('HELP_CENTER.TABLE.LOADING_MESSAGE') }}
       </span>
     </div>
-    <empty-state
+    <EmptyState
       v-else-if="shouldShowEmptyState"
       :title="$t('HELP_CENTER.TABLE.NO_ARTICLES')"
     />
     <div v-else class="flex flex-1">
-      <article-table
+      <ArticleTable
         :articles="articles"
         :current-page="Number(meta.currentPage)"
         :total-count="Number(meta.count)"
diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/pages/articles/NewArticle.vue b/app/javascript/dashboard/routes/dashboard/helpcenter/pages/articles/NewArticle.vue
index 127460ff9..11c108d79 100644
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/pages/articles/NewArticle.vue
+++ b/app/javascript/dashboard/routes/dashboard/helpcenter/pages/articles/NewArticle.vue
@@ -99,7 +99,7 @@ export default {
       class="flex-1 flex-shrink-0 px-6 overflow-y-auto"
       :class="{ 'flex-grow-1': showArticleSettings }"
     >
-      <edit-article-header
+      <EditArticleHeader
         :back-button-label="$t('HELP_CENTER.HEADER.TITLES.ALL_ARTICLES')"
         draft-state="saved"
         :is-sidebar-open="showArticleSettings"
@@ -108,9 +108,9 @@ export default {
         @close="closeArticleSettings"
         @save-article="createNewArticle"
       />
-      <article-editor :article="newArticle" @save-article="createNewArticle" />
+      <ArticleEditor :article="newArticle" @save-article="createNewArticle" />
     </div>
-    <article-settings
+    <ArticleSettings
       v-if="showArticleSettings"
       :article="article"
       @save-article="saveArticle"
diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/pages/categories/AddCategory.vue b/app/javascript/dashboard/routes/dashboard/helpcenter/pages/categories/AddCategory.vue
index 53a969c79..247283d3a 100644
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/pages/categories/AddCategory.vue
+++ b/app/javascript/dashboard/routes/dashboard/helpcenter/pages/categories/AddCategory.vue
@@ -134,7 +134,7 @@ export default {
             </label>
           </div>
         </div>
-        <category-name-icon-input
+        <CategoryNameIconInput
           :label="$t('HELP_CENTER.CATEGORY.ADD.NAME.LABEL')"
           :placeholder="$t('HELP_CENTER.CATEGORY.ADD.NAME.PLACEHOLDER')"
           :help-text="$t('HELP_CENTER.CATEGORY.ADD.NAME.HELP_TEXT')"
diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/pages/categories/EditCategory.vue b/app/javascript/dashboard/routes/dashboard/helpcenter/pages/categories/EditCategory.vue
index c2fa0dd04..0506e3d06 100644
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/pages/categories/EditCategory.vue
+++ b/app/javascript/dashboard/routes/dashboard/helpcenter/pages/categories/EditCategory.vue
@@ -143,7 +143,7 @@ export default {
             </label>
           </div>
         </div>
-        <category-name-icon-input
+        <CategoryNameIconInput
           :label="$t('HELP_CENTER.CATEGORY.EDIT.NAME.LABEL')"
           :placeholder="$t('HELP_CENTER.CATEGORY.EDIT.NAME.PLACEHOLDER')"
           :help-text="$t('HELP_CENTER.CATEGORY.EDIT.NAME.HELP_TEXT')"
diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/pages/categories/ListAllCategories.vue b/app/javascript/dashboard/routes/dashboard/helpcenter/pages/categories/ListAllCategories.vue
index 2152fc147..6d3c40e1c 100644
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/pages/categories/ListAllCategories.vue
+++ b/app/javascript/dashboard/routes/dashboard/helpcenter/pages/categories/ListAllCategories.vue
@@ -134,13 +134,13 @@ function changeCurrentCategory(event) {
       </div>
     </header>
     <div class="category-list">
-      <category-list-item
+      <CategoryListItem
         :categories="categoriesByLocaleCode"
         @delete="deleteCategory"
         @edit="openEditCategoryModal"
       />
     </div>
-    <edit-category
+    <EditCategory
       v-if="showEditCategoryModal"
       :show.sync="showEditCategoryModal"
       :portal-name="currentPortalName"
@@ -149,7 +149,7 @@ function changeCurrentCategory(event) {
       :selected-portal-slug="currentPortalSlug"
       @cancel="closeEditCategoryModal"
     />
-    <add-category
+    <AddCategory
       v-if="showAddCategoryModal"
       :show.sync="showAddCategoryModal"
       :portal-name="currentPortalName"
diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/pages/categories/NameEmojiInput.vue b/app/javascript/dashboard/routes/dashboard/helpcenter/pages/categories/NameEmojiInput.vue
index 3efe74d42..e07f00d73 100644
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/pages/categories/NameEmojiInput.vue
+++ b/app/javascript/dashboard/routes/dashboard/helpcenter/pages/categories/NameEmojiInput.vue
@@ -103,7 +103,7 @@ export default {
       :help-text="helpText"
       @input="onNameChange"
     />
-    <emoji-input
+    <EmojiInput
       v-if="showEmojiPicker"
       v-on-clickaway="hideEmojiPicker"
       class="left-0 top-16"
diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/pages/portals/EditPortal.vue b/app/javascript/dashboard/routes/dashboard/helpcenter/pages/portals/EditPortal.vue
index 9c079d131..cb7156cee 100644
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/pages/portals/EditPortal.vue
+++ b/app/javascript/dashboard/routes/dashboard/helpcenter/pages/portals/EditPortal.vue
@@ -69,7 +69,7 @@ export default {
 
 <template>
   <div class="wrapper">
-    <settings-header
+    <SettingsHeader
       button-route="new"
       :header-title="$t('HELP_CENTER.PORTAL.EDIT.HEADER_TEXT')"
       show-back-button
@@ -79,7 +79,7 @@ export default {
       :show-new-button="false"
     />
     <div class="overflow-auto max-h-[96%]">
-      <setting-intro-banner :header-title="portalName">
+      <SettingIntroBanner :header-title="portalName">
         <woot-tabs
           :index="activeTabIndex"
           :border="false"
@@ -92,7 +92,7 @@ export default {
             :show-badge="false"
           />
         </woot-tabs>
-      </setting-intro-banner>
+      </SettingIntroBanner>
       <div class="flex flex-wrap max-w-full px-8 py-4 my-auto">
         <router-view />
       </div>
diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/pages/portals/EditPortalBasic.vue b/app/javascript/dashboard/routes/dashboard/helpcenter/pages/portals/EditPortalBasic.vue
index aac8125e5..7802e083c 100644
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/pages/portals/EditPortalBasic.vue
+++ b/app/javascript/dashboard/routes/dashboard/helpcenter/pages/portals/EditPortalBasic.vue
@@ -71,7 +71,7 @@ async function deleteLogo() {
 </script>
 
 <template>
-  <portal-settings-basic-form
+  <PortalSettingsBasicForm
     v-if="currentPortal"
     :portal="currentPortal"
     :is-submitting="uiFlags.isUpdating"
diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/pages/portals/EditPortalCustomization.vue b/app/javascript/dashboard/routes/dashboard/helpcenter/pages/portals/EditPortalCustomization.vue
index 902dc3ca6..190d6edae 100644
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/pages/portals/EditPortalCustomization.vue
+++ b/app/javascript/dashboard/routes/dashboard/helpcenter/pages/portals/EditPortalCustomization.vue
@@ -44,7 +44,7 @@ async function updatePortalSettings(portalObj) {
 </script>
 
 <template>
-  <portal-settings-customization-form
+  <PortalSettingsCustomizationForm
     v-if="currentPortal"
     :portal="currentPortal"
     :is-submitting="uiFlags.isUpdating"
diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/pages/portals/ListAllPortals.vue b/app/javascript/dashboard/routes/dashboard/helpcenter/pages/portals/ListAllPortals.vue
index dbd8316ea..157e6fbfd 100644
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/pages/portals/ListAllPortals.vue
+++ b/app/javascript/dashboard/routes/dashboard/helpcenter/pages/portals/ListAllPortals.vue
@@ -72,7 +72,7 @@ export default {
       </woot-button>
     </div>
     <div class="h-[90vh] overflow-y-scroll">
-      <portal-list-item
+      <PortalListItem
         v-for="portal in portals"
         :key="portal.id"
         :portal="portal"
@@ -84,10 +84,10 @@ export default {
         v-if="isFetching"
         class="flex items-center justify-center p-40 text-base"
       >
-        <spinner />
+        <Spinner />
         <span>{{ $t('HELP_CENTER.PORTAL.LOADING_MESSAGE') }}</span>
       </div>
-      <empty-state
+      <EmptyState
         v-else-if="shouldShowEmptyState"
         :title="$t('HELP_CENTER.PORTAL.NO_PORTALS_MESSAGE')"
       />
@@ -96,7 +96,7 @@ export default {
       :show.sync="isAddLocaleModalOpen"
       :on-close="closeAddLocaleModal"
     >
-      <add-locale
+      <AddLocale
         :show="isAddLocaleModalOpen"
         :portal="selectedPortal"
         @cancel="closeAddLocaleModal"
diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/pages/portals/NewPortal.vue b/app/javascript/dashboard/routes/dashboard/helpcenter/pages/portals/NewPortal.vue
index 198122211..b656dabb1 100644
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/pages/portals/NewPortal.vue
+++ b/app/javascript/dashboard/routes/dashboard/helpcenter/pages/portals/NewPortal.vue
@@ -43,7 +43,7 @@ export default {
 
 <template>
   <section class="flex-1">
-    <settings-header
+    <SettingsHeader
       button-route="new"
       :header-title="portalHeaderText"
       show-back-button
diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/pages/portals/PortalCustomization.vue b/app/javascript/dashboard/routes/dashboard/helpcenter/pages/portals/PortalCustomization.vue
index 60420be90..74046cd9b 100644
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/pages/portals/PortalCustomization.vue
+++ b/app/javascript/dashboard/routes/dashboard/helpcenter/pages/portals/PortalCustomization.vue
@@ -59,7 +59,7 @@ async function updatePortalSettings(portalObj) {
 </script>
 
 <template>
-  <portal-settings-customization-form
+  <PortalSettingsCustomizationForm
     v-if="currentPortal"
     :portal="currentPortal"
     :is-submitting="uiFlags.isUpdating"
diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/pages/portals/PortalSettingsFinish.vue b/app/javascript/dashboard/routes/dashboard/helpcenter/pages/portals/PortalSettingsFinish.vue
index 4bdc0e669..bc8fb85a6 100644
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/pages/portals/PortalSettingsFinish.vue
+++ b/app/javascript/dashboard/routes/dashboard/helpcenter/pages/portals/PortalSettingsFinish.vue
@@ -10,7 +10,7 @@ defineComponent({
   <div
     class="flex-grow-0 flex-shrink-0 w-full h-full max-w-full px-6 pt-3 pb-6 bg-white border border-transparent border-solid dark:bg-slate-900 dark:border-transparent"
   >
-    <empty-state
+    <EmptyState
       :title="$t('HELP_CENTER.PORTAL.ADD.CREATE_FLOW_PAGE.FINISH_PAGE.TITLE')"
       :message="
         $t('HELP_CENTER.PORTAL.ADD.CREATE_FLOW_PAGE.FINISH_PAGE.MESSAGE')
@@ -26,6 +26,6 @@ defineComponent({
           {{ $t('HELP_CENTER.PORTAL.ADD.CREATE_FLOW_PAGE.FINISH_PAGE.FINISH') }}
         </router-link>
       </div>
-    </empty-state>
+    </EmptyState>
   </div>
 </template>
diff --git a/app/javascript/dashboard/routes/dashboard/inbox/InboxList.vue b/app/javascript/dashboard/routes/dashboard/inbox/InboxList.vue
index 33eb71516..ec998a20a 100644
--- a/app/javascript/dashboard/routes/dashboard/inbox/InboxList.vue
+++ b/app/javascript/dashboard/routes/dashboard/inbox/InboxList.vue
@@ -173,7 +173,7 @@ export default {
       class="flex flex-col h-full w-full md:min-w-[360px] md:max-w-[360px] ltr:border-r border-slate-50 dark:border-slate-800/50"
       :class="!currentNotificationId ? 'flex' : 'hidden md:flex'"
     >
-      <inbox-list-header
+      <InboxListHeader
         :is-context-menu-open="isInboxContextMenuOpen"
         @filter="onFilterChange"
         @redirect="redirectToInbox"
@@ -182,7 +182,7 @@ export default {
         ref="notificationList"
         class="flex flex-col w-full h-[calc(100%-56px)] overflow-x-hidden overflow-y-auto"
       >
-        <inbox-card
+        <InboxCard
           v-for="notificationItem in notifications"
           :key="notificationItem.id"
           :active="currentNotificationId === notificationItem.id"
@@ -202,7 +202,7 @@ export default {
         >
           {{ $t('INBOX.LIST.NO_NOTIFICATIONS') }}
         </p>
-        <intersection-observer
+        <IntersectionObserver
           v-if="!showEndOfList && !uiFlags.isFetching"
           :options="infiniteLoaderOptions"
           @observed="loadMoreNotifications"
diff --git a/app/javascript/dashboard/routes/dashboard/inbox/InboxView.vue b/app/javascript/dashboard/routes/dashboard/inbox/InboxView.vue
index d0628f846..736972183 100644
--- a/app/javascript/dashboard/routes/dashboard/inbox/InboxView.vue
+++ b/app/javascript/dashboard/routes/dashboard/inbox/InboxView.vue
@@ -176,12 +176,12 @@ export default {
 <template>
   <div class="h-full w-full md:w-[calc(100%-360px)]">
     <div v-if="showEmptyState" class="flex w-full h-full">
-      <inbox-empty-state
+      <InboxEmptyState
         :empty-state-message="$t('INBOX.LIST.NO_MESSAGES_AVAILABLE')"
       />
     </div>
     <div v-else class="flex flex-col w-full h-full">
-      <inbox-item-header
+      <InboxItemHeader
         class="flex-1"
         :total-length="totalNotificationCount"
         :current-index="activeNotificationIndex"
@@ -195,7 +195,7 @@ export default {
       >
         <span class="my-4 spinner" />
       </div>
-      <conversation-box
+      <ConversationBox
         v-else
         class="h-[calc(100%-56px)]"
         is-inbox-view
diff --git a/app/javascript/dashboard/routes/dashboard/inbox/components/InboxCard.vue b/app/javascript/dashboard/routes/dashboard/inbox/components/InboxCard.vue
index df221885c..81906284b 100644
--- a/app/javascript/dashboard/routes/dashboard/inbox/components/InboxCard.vue
+++ b/app/javascript/dashboard/routes/dashboard/inbox/components/InboxCard.vue
@@ -205,7 +205,7 @@ export default {
         {{ snoozedDisplayText }}
       </span>
     </div>
-    <inbox-context-menu
+    <InboxContextMenu
       v-if="isContextMenuOpen"
       :context-menu-position="contextMenuPosition"
       :menu-items="menuItems"
diff --git a/app/javascript/dashboard/routes/dashboard/inbox/components/InboxContextMenu.vue b/app/javascript/dashboard/routes/dashboard/inbox/components/InboxContextMenu.vue
index 958c91604..b46bb674c 100644
--- a/app/javascript/dashboard/routes/dashboard/inbox/components/InboxContextMenu.vue
+++ b/app/javascript/dashboard/routes/dashboard/inbox/components/InboxContextMenu.vue
@@ -35,7 +35,7 @@ export default {
     <div
       class="bg-white dark:bg-slate-900 w-40 py-1 border shadow-md border-slate-100 dark:border-slate-700/50 rounded-xl"
     >
-      <menu-item
+      <MenuItem
         v-for="item in menuItems"
         :key="item.key"
         :label="item.label"
diff --git a/app/javascript/dashboard/routes/dashboard/inbox/components/InboxItemHeader.vue b/app/javascript/dashboard/routes/dashboard/inbox/components/InboxItemHeader.vue
index 3dc5f3c84..99ee8380c 100644
--- a/app/javascript/dashboard/routes/dashboard/inbox/components/InboxItemHeader.vue
+++ b/app/javascript/dashboard/routes/dashboard/inbox/components/InboxItemHeader.vue
@@ -115,7 +115,7 @@ export default {
     >
       {{ $t('INBOX.ACTION_HEADER.BACK') }}
     </woot-button>
-    <pagination-button
+    <PaginationButton
       v-if="totalLength > 1"
       :total-length="totalLength"
       :current-index="currentIndex + 1"
@@ -149,7 +149,7 @@ export default {
       :show.sync="showCustomSnoozeModal"
       :on-close="hideCustomSnoozeModal"
     >
-      <custom-snooze-modal
+      <CustomSnoozeModal
         @close="hideCustomSnoozeModal"
         @choose-time="scheduleCustomSnooze"
       />
diff --git a/app/javascript/dashboard/routes/dashboard/inbox/components/InboxListHeader.vue b/app/javascript/dashboard/routes/dashboard/inbox/components/InboxListHeader.vue
index 398248865..12adf38d0 100644
--- a/app/javascript/dashboard/routes/dashboard/inbox/components/InboxListHeader.vue
+++ b/app/javascript/dashboard/routes/dashboard/inbox/components/InboxListHeader.vue
@@ -99,7 +99,7 @@ export default {
             class="text-slate-600 dark:text-slate-200"
           />
         </div>
-        <inbox-display-menu
+        <InboxDisplayMenu
           v-if="showInboxDisplayMenu"
           v-on-clickaway="openInboxDisplayMenu"
           class="absolute top-9 ltr:left-0 rtl:right-0"
@@ -122,7 +122,7 @@ export default {
         icon="mail-inbox"
         @click="openInboxOptionsMenu"
       />
-      <inbox-option-menu
+      <InboxOptionMenu
         v-if="showInboxOptionMenu"
         v-on-clickaway="openInboxOptionsMenu"
         class="absolute top-9 ltr:right-0 ltr:md:right-[unset] rtl:left-0 rtl:md:left-[unset]"
diff --git a/app/javascript/dashboard/routes/dashboard/inbox/components/InboxOptionMenu.vue b/app/javascript/dashboard/routes/dashboard/inbox/components/InboxOptionMenu.vue
index 9d03b05aa..6eac87b46 100644
--- a/app/javascript/dashboard/routes/dashboard/inbox/components/InboxOptionMenu.vue
+++ b/app/javascript/dashboard/routes/dashboard/inbox/components/InboxOptionMenu.vue
@@ -35,7 +35,7 @@ export default {
     class="flex flex-col gap-1 bg-white z-50 dark:bg-slate-900 w-40 py-1 border shadow-md border-slate-100 dark:border-slate-700/50 rounded-xl divide-y divide-slate-100 dark:divide-slate-700/50"
   >
     <div class="flex flex-col">
-      <menu-item
+      <MenuItem
         v-for="item in menuItems"
         :key="item.key"
         :label="item.label"
diff --git a/app/javascript/dashboard/routes/dashboard/notifications/components/NotificationPanel.vue b/app/javascript/dashboard/routes/dashboard/notifications/components/NotificationPanel.vue
index 5850ab856..332850e39 100644
--- a/app/javascript/dashboard/routes/dashboard/notifications/components/NotificationPanel.vue
+++ b/app/javascript/dashboard/routes/dashboard/notifications/components/NotificationPanel.vue
@@ -179,7 +179,7 @@ export default {
           />
         </div>
       </div>
-      <notification-panel-list
+      <NotificationPanelList
         :notifications="getUnreadNotifications"
         :is-loading="uiFlags.isFetching"
         :on-click-notification="openConversation"
diff --git a/app/javascript/dashboard/routes/dashboard/notifications/components/NotificationPanelItem.vue b/app/javascript/dashboard/routes/dashboard/notifications/components/NotificationPanelItem.vue
index 4aea0ac4c..e24403711 100644
--- a/app/javascript/dashboard/routes/dashboard/notifications/components/NotificationPanelItem.vue
+++ b/app/javascript/dashboard/routes/dashboard/notifications/components/NotificationPanelItem.vue
@@ -78,7 +78,7 @@ export default {
               </span>
             </div>
             <div v-if="hasNotificationAssignee">
-              <thumbnail
+              <Thumbnail
                 :src="notificationAssigneeThumbnail"
                 size="16px"
                 :username="notificationAssigneeName"
diff --git a/app/javascript/dashboard/routes/dashboard/notifications/components/NotificationPanelList.vue b/app/javascript/dashboard/routes/dashboard/notifications/components/NotificationPanelList.vue
index 4b3e2e134..bafcc8be9 100644
--- a/app/javascript/dashboard/routes/dashboard/notifications/components/NotificationPanelList.vue
+++ b/app/javascript/dashboard/routes/dashboard/notifications/components/NotificationPanelList.vue
@@ -52,14 +52,14 @@ export default {
 
 <template>
   <div class="flex-col py-2 px-2.5 overflow-auto h-full flex">
-    <notification-panel-item
+    <NotificationPanelItem
       v-for="notificationItem in notifications"
       v-show="!isLoading"
       :key="notificationItem.id"
       :notification-item="notificationItem"
       @open-notification="onClickNotification"
     />
-    <empty-state
+    <EmptyState
       v-if="showEmptyResult"
       :title="$t('NOTIFICATIONS_PAGE.UNREAD_NOTIFICATION.EMPTY_MESSAGE')"
     />
@@ -77,7 +77,7 @@ export default {
       v-if="isLoading"
       class="items-center justify-center my-12 mx-2 text-sm font-medium flex"
     >
-      <spinner />
+      <Spinner />
       <span>{{
         $t('NOTIFICATIONS_PAGE.UNREAD_NOTIFICATION.LOADING_UNREAD_MESSAGE')
       }}</span>
diff --git a/app/javascript/dashboard/routes/dashboard/notifications/components/NotificationTable.vue b/app/javascript/dashboard/routes/dashboard/notifications/components/NotificationTable.vue
index cd0a60498..b378afec2 100644
--- a/app/javascript/dashboard/routes/dashboard/notifications/components/NotificationTable.vue
+++ b/app/javascript/dashboard/routes/dashboard/notifications/components/NotificationTable.vue
@@ -99,7 +99,7 @@ export default {
             </span>
           </td>
           <td class="thumbnail--column">
-            <thumbnail
+            <Thumbnail
               v-if="notificationItem.primary_actor.meta.assignee"
               :src="notificationItem.primary_actor.meta.assignee.thumbnail"
               size="36px"
@@ -122,12 +122,12 @@ export default {
         </tr>
       </tbody>
     </table>
-    <empty-state
+    <EmptyState
       v-if="showEmptyResult"
       :title="$t('NOTIFICATIONS_PAGE.LIST.404')"
     />
     <div v-if="isLoading" class="notifications--loader">
-      <spinner />
+      <Spinner />
       <span>{{ $t('NOTIFICATIONS_PAGE.LIST.LOADING_MESSAGE') }}</span>
     </div>
   </section>
diff --git a/app/javascript/dashboard/routes/dashboard/notifications/components/NotificationsView.vue b/app/javascript/dashboard/routes/dashboard/notifications/components/NotificationsView.vue
index ba0465457..2cdee7ea8 100644
--- a/app/javascript/dashboard/routes/dashboard/notifications/components/NotificationsView.vue
+++ b/app/javascript/dashboard/routes/dashboard/notifications/components/NotificationsView.vue
@@ -59,14 +59,14 @@ export default {
 <template>
   <div class="overflow-y-auto h-full">
     <div class="flex flex-col h-full">
-      <notification-table
+      <NotificationTable
         :notifications="records"
         :is-loading="uiFlags.isFetching"
         :is-updating="uiFlags.isUpdating"
         :on-click-notification="openConversation"
         :on-mark-all-done-click="onMarkAllDoneClick"
       />
-      <table-footer
+      <TableFooter
         class="border-t border-slate-75 dark:border-slate-700/50"
         :current-page="Number(meta.currentPage)"
         :total-count="meta.count"
diff --git a/app/javascript/dashboard/routes/dashboard/settings/SettingsHeader.vue b/app/javascript/dashboard/routes/dashboard/settings/SettingsHeader.vue
index 49d98d489..2cfefb848 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/SettingsHeader.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/SettingsHeader.vue
@@ -63,7 +63,7 @@ export default {
       class="flex items-center mb-0 text-2xl text-slate-900 dark:text-slate-100"
     >
       <woot-sidemenu-icon v-if="showSidemenuIcon" />
-      <back-button
+      <BackButton
         v-if="showBackButton"
         :button-label="backButtonLabel"
         :back-url="backUrl"
diff --git a/app/javascript/dashboard/routes/dashboard/settings/Wrapper.vue b/app/javascript/dashboard/routes/dashboard/settings/Wrapper.vue
index ccdb716ec..6b191983e 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/Wrapper.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/Wrapper.vue
@@ -49,7 +49,7 @@ export default {
   <div
     class="flex flex-1 h-full justify-between flex-col m-0 bg-slate-25 dark:bg-slate-900 overflow-auto"
   >
-    <settings-header
+    <SettingsHeader
       button-route="new"
       :icon="icon"
       :header-title="$t(headerTitle)"
diff --git a/app/javascript/dashboard/routes/dashboard/settings/agentBots/Index.vue b/app/javascript/dashboard/routes/dashboard/settings/agentBots/Index.vue
index 1c133bcfa..1736ba8ec 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/agentBots/Index.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/agentBots/Index.vue
@@ -54,7 +54,7 @@ export default {
         />
         <table v-else-if="agentBots.length" class="woot-table">
           <tbody>
-            <agent-bot-row
+            <AgentBotRow
               v-for="(agentBot, index) in agentBots"
               :key="agentBot.id"
               :agent-bot="agentBot"
diff --git a/app/javascript/dashboard/routes/dashboard/settings/agentBots/components/AgentBotRow.vue b/app/javascript/dashboard/routes/dashboard/settings/agentBots/components/AgentBotRow.vue
index d48c6461b..033e757f5 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/agentBots/components/AgentBotRow.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/agentBots/components/AgentBotRow.vue
@@ -27,10 +27,10 @@ export default {
     <td class="agent-bot--details">
       <div class="agent-bot--link">
         {{ agentBot.name }}
-        (<agent-bot-type :bot-type="agentBot.bot_type" />)
+        (<AgentBotType :bot-type="agentBot.bot_type" />)
       </div>
       <div class="agent-bot--description">
-        <show-more :text="agentBot.description" :limit="120" />
+        <ShowMore :text="agentBot.description" :limit="120" />
       </div>
     </td>
     <td class="flex justify-end gap-1">
diff --git a/app/javascript/dashboard/routes/dashboard/settings/agentBots/components/CSMLBotEditor.vue b/app/javascript/dashboard/routes/dashboard/settings/agentBots/components/CSMLBotEditor.vue
index dbb86a8b8..9d71657f5 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/agentBots/components/CSMLBotEditor.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/agentBots/components/CSMLBotEditor.vue
@@ -49,7 +49,7 @@ export default {
     <div class="flex flex-row">
       <div class="w-[68%]">
         <div class="h-[calc(100vh-56px)] relative">
-          <csml-monaco-editor v-model="bot.csmlContent" class="w-full h-full" />
+          <CsmlMonacoEditor v-model="bot.csmlContent" class="w-full h-full" />
           <div
             v-if="v$.bot.csmlContent.$error"
             class="bg-red-100 dark:bg-red-200 text-white dark:text-white absolute bottom-0 w-full p-2.5 flex items-center text-xs justify-center flex-shrink-0"
diff --git a/app/javascript/dashboard/routes/dashboard/settings/agentBots/components/CSMLMonacoEditor.vue b/app/javascript/dashboard/routes/dashboard/settings/agentBots/components/CSMLMonacoEditor.vue
index 4d81d83ad..fe0e51e60 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/agentBots/components/CSMLMonacoEditor.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/agentBots/components/CSMLMonacoEditor.vue
@@ -47,7 +47,7 @@ export default {
 </script>
 <template>
   <div class="csml-editor--container">
-    <loading-state
+    <LoadingState
       v-if="iframeLoading"
       :message="$t('AGENT_BOTS.LOADING_EDITOR')"
       class="dashboard-app_loading-container"
diff --git a/app/javascript/dashboard/routes/dashboard/settings/agentBots/csml/Edit.vue b/app/javascript/dashboard/routes/dashboard/settings/agentBots/csml/Edit.vue
index 48ebcbd3b..f098b5b9b 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/agentBots/csml/Edit.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/agentBots/csml/Edit.vue
@@ -34,12 +34,8 @@ export default {
 };
 </script>
 <template>
-  <csml-bot-editor
-    v-if="agentBot.id"
-    :agent-bot="agentBot"
-    @submit="updateBot"
-  />
+  <CsmlBotEditor v-if="agentBot.id" :agent-bot="agentBot" @submit="updateBot" />
   <div v-else class="flex flex-col h-auto overflow-auto no-padding">
-    <spinner />
+    <Spinner />
   </div>
 </template>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/agentBots/csml/New.vue b/app/javascript/dashboard/routes/dashboard/settings/agentBots/csml/New.vue
index 60fd169d2..10868e58c 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/agentBots/csml/New.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/agentBots/csml/New.vue
@@ -37,5 +37,5 @@ export default {
 </script>
 
 <template>
-  <csml-bot-editor :agent-bot="{ bot_config: {} }" @submit="saveBot" />
+  <CsmlBotEditor :agent-bot="{ bot_config: {} }" @submit="saveBot" />
 </template>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/agents/EditAgent.vue b/app/javascript/dashboard/routes/dashboard/settings/agents/EditAgent.vue
index a47e1cab2..4385723b6 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/agents/EditAgent.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/agents/EditAgent.vue
@@ -125,7 +125,7 @@ export default {
 </script>
 
 <template>
-  <modal :show.sync="show" :on-close="onClose">
+  <Modal :show.sync="show" :on-close="onClose">
     <div class="flex flex-col h-auto overflow-auto">
       <woot-modal-header :header-title="pageTitle" />
       <form class="w-full" @submit.prevent="editAgent()">
@@ -174,7 +174,7 @@ export default {
         </div>
         <div class="flex flex-row justify-end w-full gap-2 px-0 py-2">
           <div class="w-[50%]">
-            <woot-submit-button
+            <WootSubmitButton
               :disabled="
                 v$.agentType.$invalid ||
                 v$.agentName.$invalid ||
@@ -199,5 +199,5 @@ export default {
         </div>
       </form>
     </div>
-  </modal>
+  </Modal>
 </template>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/agents/Index.vue b/app/javascript/dashboard/routes/dashboard/settings/agents/Index.vue
index 846252d73..004b5f60e 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/agents/Index.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/agents/Index.vue
@@ -149,7 +149,7 @@ export default {
               <tr v-for="(agent, index) in agentList" :key="agent.email">
                 <!-- Gravtar Image -->
                 <td>
-                  <thumbnail
+                  <Thumbnail
                     :src="agent.thumbnail"
                     :username="agent.name"
                     size="40px"
@@ -221,11 +221,11 @@ export default {
     </div>
     <!-- Add Agent -->
     <woot-modal :show.sync="showAddPopup" :on-close="hideAddPopup">
-      <add-agent :on-close="hideAddPopup" />
+      <AddAgent :on-close="hideAddPopup" />
     </woot-modal>
     <!-- Edit Agent -->
     <woot-modal :show.sync="showEditPopup" :on-close="hideEditPopup">
-      <edit-agent
+      <EditAgent
         v-if="showEditPopup"
         :id="currentAgent.id"
         :name="currentAgent.name"
diff --git a/app/javascript/dashboard/routes/dashboard/settings/attributes/CustomAttribute.vue b/app/javascript/dashboard/routes/dashboard/settings/attributes/CustomAttribute.vue
index 5e2bda7aa..54301e8b2 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/attributes/CustomAttribute.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/attributes/CustomAttribute.vue
@@ -191,7 +191,7 @@ export default {
       <span v-dompurify-html="$t('ATTRIBUTES_MGMT.SIDEBAR_TXT')" />
     </div>
     <woot-modal :show.sync="showEditPopup" :on-close="hideEditPopup">
-      <edit-attribute
+      <EditAttribute
         :selected-attribute="selectedAttribute"
         :is-updating="uiFlags.isUpdating"
         @on-close="hideEditPopup"
diff --git a/app/javascript/dashboard/routes/dashboard/settings/attributes/Index.vue b/app/javascript/dashboard/routes/dashboard/settings/attributes/Index.vue
index f3630fcd8..d471488b0 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/attributes/Index.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/attributes/Index.vue
@@ -32,9 +32,9 @@ export default {
     >
       {{ $t('ATTRIBUTES_MGMT.HEADER_BTN_TXT') }}
     </woot-button>
-    <custom-attribute />
+    <CustomAttribute />
     <woot-modal :show.sync="showAddPopup" :on-close="hideAddPopup">
-      <add-attribute :on-close="hideAddPopup" />
+      <AddAttribute :on-close="hideAddPopup" />
     </woot-modal>
   </div>
 </template>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/auditlogs/Index.vue b/app/javascript/dashboard/routes/dashboard/settings/auditlogs/Index.vue
index f84b9eabb..5eb56a58a 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/auditlogs/Index.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/auditlogs/Index.vue
@@ -125,7 +125,7 @@ export default {
         </table>
       </div>
     </div>
-    <table-footer
+    <TableFooter
       :current-page="Number(meta.currentPage)"
       :total-count="meta.totalEntries"
       :page-size="meta.perPage"
diff --git a/app/javascript/dashboard/routes/dashboard/settings/automation/Index.vue b/app/javascript/dashboard/routes/dashboard/settings/automation/Index.vue
index 6b0b4744b..7acbda509 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/automation/Index.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/automation/Index.vue
@@ -245,7 +245,7 @@ export default {
       size="medium"
       :on-close="hideAddPopup"
     >
-      <add-automation-rule
+      <AddAutomationRule
         v-if="showAddPopup"
         :on-close="hideAddPopup"
         @saveAutomation="submitAutomation"
@@ -268,7 +268,7 @@ export default {
       size="medium"
       :on-close="hideEditPopup"
     >
-      <edit-automation-rule
+      <EditAutomationRule
         v-if="showEditPopup"
         :on-close="hideEditPopup"
         :selected-response="selectedResponse"
diff --git a/app/javascript/dashboard/routes/dashboard/settings/billing/Index.vue b/app/javascript/dashboard/routes/dashboard/settings/billing/Index.vue
index 924f6ba15..48273561c 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/billing/Index.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/billing/Index.vue
@@ -70,13 +70,13 @@ export default {
           "
         />
       </div>
-      <billing-item
+      <BillingItem
         :title="$t('BILLING_SETTINGS.MANAGE_SUBSCRIPTION.TITLE')"
         :description="$t('BILLING_SETTINGS.MANAGE_SUBSCRIPTION.DESCRIPTION')"
         :button-label="$t('BILLING_SETTINGS.MANAGE_SUBSCRIPTION.BUTTON_TXT')"
         @click="onClickBillingPortal"
       />
-      <billing-item
+      <BillingItem
         :title="$t('BILLING_SETTINGS.CHAT_WITH_US.TITLE')"
         :description="$t('BILLING_SETTINGS.CHAT_WITH_US.DESCRIPTION')"
         :button-label="$t('BILLING_SETTINGS.CHAT_WITH_US.BUTTON_TXT')"
diff --git a/app/javascript/dashboard/routes/dashboard/settings/campaigns/AddCampaign.vue b/app/javascript/dashboard/routes/dashboard/settings/campaigns/AddCampaign.vue
index beea57e77..6b1c0feb7 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/campaigns/AddCampaign.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/campaigns/AddCampaign.vue
@@ -218,7 +218,7 @@ export default {
             {{ $t('CAMPAIGN.ADD.FORM.MESSAGE.LABEL') }}
           </label>
           <div>
-            <woot-message-editor
+            <WootMessageEditor
               v-model="message"
               class="message-editor"
               :class="{ editor_warning: v$.message.$error }"
@@ -305,7 +305,7 @@ export default {
 
         <label v-if="isOneOffType">
           {{ $t('CAMPAIGN.ADD.FORM.SCHEDULED_AT.LABEL') }}
-          <woot-date-time-picker
+          <WootDateTimePicker
             :value="scheduledAt"
             :confirm-text="$t('CAMPAIGN.ADD.FORM.SCHEDULED_AT.CONFIRM')"
             :placeholder="$t('CAMPAIGN.ADD.FORM.SCHEDULED_AT.PLACEHOLDER')"
diff --git a/app/javascript/dashboard/routes/dashboard/settings/campaigns/Campaign.vue b/app/javascript/dashboard/routes/dashboard/settings/campaigns/Campaign.vue
index 1fe81f210..337fa5a79 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/campaigns/Campaign.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/campaigns/Campaign.vue
@@ -70,7 +70,7 @@ export default {
 </script>
 <template>
   <div class="flex-1 overflow-auto">
-    <campaigns-table
+    <CampaignsTable
       :campaigns="campaigns"
       :show-empty-result="showEmptyResult"
       :is-loading="uiFlags.isFetching"
@@ -79,7 +79,7 @@ export default {
       @delete="openDeletePopup"
     />
     <woot-modal :show.sync="showEditPopup" :on-close="hideEditPopup">
-      <edit-campaign
+      <EditCampaign
         :selected-campaign="selectedCampaign"
         @on-close="hideEditPopup"
       />
diff --git a/app/javascript/dashboard/routes/dashboard/settings/campaigns/CampaignCard.vue b/app/javascript/dashboard/routes/dashboard/settings/campaigns/CampaignCard.vue
index d04b0aa33..2989db04c 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/campaigns/CampaignCard.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/campaigns/CampaignCard.vue
@@ -94,8 +94,8 @@ export default {
         :color-scheme="colorScheme"
         class="mr-3 text-xs"
       />
-      <inbox-name :inbox="campaign.inbox" class="mb-1 ltr:ml-0 rtl:mr-0" />
-      <user-avatar-with-name
+      <InboxName :inbox="campaign.inbox" class="mb-1 ltr:ml-0 rtl:mr-0" />
+      <UserAvatarWithName
         v-if="campaign.sender"
         :user="campaign.sender"
         class="mb-1"
diff --git a/app/javascript/dashboard/routes/dashboard/settings/campaigns/CampaignsTable.vue b/app/javascript/dashboard/routes/dashboard/settings/campaigns/CampaignsTable.vue
index 9734e56ad..d1abc6490 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/campaigns/CampaignsTable.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/campaigns/CampaignsTable.vue
@@ -59,13 +59,13 @@ export default {
 <template>
   <div class="flex items-center flex-col">
     <div v-if="isLoading" class="items-center flex text-base justify-center">
-      <spinner color-scheme="primary" />
+      <Spinner color-scheme="primary" />
       <span>{{ $t('CAMPAIGN.LIST.LOADING_MESSAGE') }}</span>
     </div>
     <div v-else class="w-full">
-      <empty-state v-if="showEmptyResult" :title="emptyMessage" />
+      <EmptyState v-if="showEmptyResult" :title="emptyMessage" />
       <div v-else class="w-full">
-        <campaign-card
+        <CampaignCard
           v-for="campaign in campaigns"
           :key="campaign.id"
           :campaign="campaign"
diff --git a/app/javascript/dashboard/routes/dashboard/settings/campaigns/EditCampaign.vue b/app/javascript/dashboard/routes/dashboard/settings/campaigns/EditCampaign.vue
index 9410387d0..84dea5bc3 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/campaigns/EditCampaign.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/campaigns/EditCampaign.vue
@@ -191,7 +191,7 @@ export default {
           <label>
             {{ $t('CAMPAIGN.ADD.FORM.MESSAGE.LABEL') }}
           </label>
-          <woot-message-editor
+          <WootMessageEditor
             v-model="message"
             class="message-editor"
             :is-format-mode="true"
diff --git a/app/javascript/dashboard/routes/dashboard/settings/campaigns/Index.vue b/app/javascript/dashboard/routes/dashboard/settings/campaigns/Index.vue
index 68bf8d35f..feaeb693c 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/campaigns/Index.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/campaigns/Index.vue
@@ -44,9 +44,9 @@ export default {
     >
       {{ buttonText }}
     </woot-button>
-    <campaign />
+    <Campaign />
     <woot-modal :show.sync="showAddPopup" :on-close="hideAddPopup">
-      <add-campaign @on-close="hideAddPopup" />
+      <AddCampaign @on-close="hideAddPopup" />
     </woot-modal>
   </div>
 </template>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/canned/AddCanned.vue b/app/javascript/dashboard/routes/dashboard/settings/canned/AddCanned.vue
index fe40f1748..54c7f8b4b 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/canned/AddCanned.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/canned/AddCanned.vue
@@ -81,7 +81,7 @@ export default {
 </script>
 
 <template>
-  <modal :show.sync="show" :on-close="onClose">
+  <Modal :show.sync="show" :on-close="onClose">
     <div class="flex flex-col h-auto overflow-auto">
       <woot-modal-header
         :header-title="$t('CANNED_MGMT.ADD.TITLE')"
@@ -105,7 +105,7 @@ export default {
             {{ $t('CANNED_MGMT.ADD.FORM.CONTENT.LABEL') }}
           </label>
           <div class="editor-wrap">
-            <woot-message-editor
+            <WootMessageEditor
               v-model="content"
               class="message-editor [&>div]:px-1"
               :class="{ editor_warning: v$.content.$error }"
@@ -117,7 +117,7 @@ export default {
           </div>
         </div>
         <div class="flex flex-row justify-end w-full gap-2 px-0 py-2">
-          <woot-submit-button
+          <WootSubmitButton
             :disabled="
               v$.content.$invalid ||
               v$.shortCode.$invalid ||
@@ -132,7 +132,7 @@ export default {
         </div>
       </form>
     </div>
-  </modal>
+  </Modal>
 </template>
 
 <style scoped lang="scss">
diff --git a/app/javascript/dashboard/routes/dashboard/settings/canned/EditCanned.vue b/app/javascript/dashboard/routes/dashboard/settings/canned/EditCanned.vue
index f4b1adc5b..70519bdce 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/canned/EditCanned.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/canned/EditCanned.vue
@@ -89,7 +89,7 @@ export default {
 </script>
 
 <template>
-  <modal :show.sync="show" :on-close="onClose">
+  <Modal :show.sync="show" :on-close="onClose">
     <div class="flex flex-col h-auto overflow-auto">
       <woot-modal-header :header-title="pageTitle" />
       <form class="flex flex-col w-full" @submit.prevent="editCannedResponse()">
@@ -110,7 +110,7 @@ export default {
             {{ $t('CANNED_MGMT.EDIT.FORM.CONTENT.LABEL') }}
           </label>
           <div class="editor-wrap">
-            <woot-message-editor
+            <WootMessageEditor
               v-model="content"
               class="message-editor [&>div]:px-1"
               :class="{ editor_warning: v$.content.$error }"
@@ -122,7 +122,7 @@ export default {
           </div>
         </div>
         <div class="flex flex-row justify-end w-full gap-2 px-0 py-2">
-          <woot-submit-button
+          <WootSubmitButton
             :disabled="
               v$.content.$invalid ||
               v$.shortCode.$invalid ||
@@ -137,7 +137,7 @@ export default {
         </div>
       </form>
     </div>
-  </modal>
+  </Modal>
 </template>
 <style scoped lang="scss">
 ::v-deep {
diff --git a/app/javascript/dashboard/routes/dashboard/settings/canned/Index.vue b/app/javascript/dashboard/routes/dashboard/settings/canned/Index.vue
index c9831ba41..725e78d18 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/canned/Index.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/canned/Index.vue
@@ -217,12 +217,12 @@ export default {
     </div>
     <!-- Add Agent -->
     <woot-modal :show.sync="showAddPopup" :on-close="hideAddPopup">
-      <add-canned :on-close="hideAddPopup" />
+      <AddCanned :on-close="hideAddPopup" />
     </woot-modal>
 
     <!-- Edit Canned Response -->
     <woot-modal :show.sync="showEditPopup" :on-close="hideEditPopup">
-      <edit-canned
+      <EditCanned
         v-if="showEditPopup"
         :id="selectedResponse.id"
         :edshort-code="selectedResponse.short_code"
diff --git a/app/javascript/dashboard/routes/dashboard/settings/inbox/AddAgents.vue b/app/javascript/dashboard/routes/dashboard/settings/inbox/AddAgents.vue
index ee90c3e42..2fe4f6823 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/AddAgents.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/AddAgents.vue
@@ -66,7 +66,7 @@ export default {
   >
     <form class="flex flex-wrap mx-0" @submit.prevent="addAgents()">
       <div class="w-full">
-        <page-header
+        <PageHeader
           :header-title="$t('INBOX_MGMT.ADD.AGENTS.TITLE')"
           :header-content="$t('INBOX_MGMT.ADD.AGENTS.DESC')"
         />
diff --git a/app/javascript/dashboard/routes/dashboard/settings/inbox/ChannelList.vue b/app/javascript/dashboard/routes/dashboard/settings/inbox/ChannelList.vue
index 8ec4eda31..d262c2e5d 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/ChannelList.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/ChannelList.vue
@@ -64,7 +64,7 @@ export default {
   <div
     class="border border-slate-25 dark:border-slate-800/60 bg-white dark:bg-slate-900 h-full p-6 w-full max-w-full md:w-3/4 md:max-w-[75%] flex-shrink-0 flex-grow-0"
   >
-    <page-header
+    <PageHeader
       class="max-w-4xl"
       :header-title="$t('INBOX_MGMT.ADD.AUTH.TITLE')"
       :header-content="
@@ -77,7 +77,7 @@ export default {
     <div
       class="mt-6 grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 mx-0 max-w-3xl"
     >
-      <channel-item
+      <ChannelItem
         v-for="channel in channelList"
         :key="channel.key"
         :channel="channel"
diff --git a/app/javascript/dashboard/routes/dashboard/settings/inbox/FinishSetup.vue b/app/javascript/dashboard/routes/dashboard/settings/inbox/FinishSetup.vue
index 7cd4a5dea..326295276 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/FinishSetup.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/FinishSetup.vue
@@ -74,7 +74,7 @@ export default {
   <div
     class="border border-slate-25 dark:border-slate-800/60 bg-white dark:bg-slate-900 h-full p-6 w-full max-w-full md:w-3/4 md:max-w-[75%] flex-shrink-0 flex-grow-0"
   >
-    <empty-state
+    <EmptyState
       :title="$t('INBOX_MGMT.FINISH.TITLE')"
       :message="message"
       :button-text="$t('INBOX_MGMT.FINISH.BUTTON_TEXT')"
@@ -151,6 +151,6 @@ export default {
           </router-link>
         </div>
       </div>
-    </empty-state>
+    </EmptyState>
   </div>
 </template>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/inbox/ImapSettings.vue b/app/javascript/dashboard/routes/dashboard/settings/inbox/ImapSettings.vue
index 6edf1feb4..9b3a883ba 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/ImapSettings.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/ImapSettings.vue
@@ -94,7 +94,7 @@ export default {
 
 <template>
   <div class="mx-8">
-    <settings-section
+    <SettingsSection
       :title="$t('INBOX_MGMT.IMAP.TITLE')"
       :sub-title="$t('INBOX_MGMT.IMAP.SUBTITLE')"
       :note="$t('INBOX_MGMT.IMAP.NOTE_TEXT')"
@@ -161,6 +161,6 @@ export default {
           :disabled="(v$.$invalid && isIMAPEnabled) || uiFlags.isUpdatingIMAP"
         />
       </form>
-    </settings-section>
+    </SettingsSection>
   </div>
 </template>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/inbox/Index.vue b/app/javascript/dashboard/routes/dashboard/settings/inbox/Index.vue
index 893993318..cf7085ddf 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/Index.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/Index.vue
@@ -201,7 +201,7 @@ export default {
         />
       </div>
     </div>
-    <settings
+    <Settings
       v-if="showSettings"
       :show.sync="showSettings"
       :on-close="closeSettings"
diff --git a/app/javascript/dashboard/routes/dashboard/settings/inbox/PreChatForm/Settings.vue b/app/javascript/dashboard/routes/dashboard/settings/inbox/PreChatForm/Settings.vue
index 26ed76e25..4fc289100 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/PreChatForm/Settings.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/PreChatForm/Settings.vue
@@ -113,7 +113,7 @@ export default {
           <label>
             {{ $t('INBOX_MGMT.PRE_CHAT_FORM.PRE_CHAT_MESSAGE.LABEL') }}
           </label>
-          <woot-message-editor
+          <WootMessageEditor
             v-model="preChatMessage"
             class="message-editor"
             :placeholder="
@@ -151,7 +151,7 @@ export default {
                 </th>
               </tr>
             </thead>
-            <pre-chat-fields
+            <PreChatFields
               :pre-chat-fields="preChatFields"
               @update="handlePreChatFieldOptions"
               @drag-end="changePreChatFieldFieldsOrder"
diff --git a/app/javascript/dashboard/routes/dashboard/settings/inbox/Settings.vue b/app/javascript/dashboard/routes/dashboard/settings/inbox/Settings.vue
index ac25f8516..8b8432798 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/Settings.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/Settings.vue
@@ -350,7 +350,7 @@ export default {
   <div
     class="flex-grow flex-shrink w-full min-w-0 pl-0 pr-0 overflow-auto bg-white settings dark:bg-slate-800"
   >
-    <setting-intro-banner
+    <SettingIntroBanner
       :header-image="inbox.avatarUrl"
       :header-title="inboxName"
     >
@@ -367,13 +367,13 @@ export default {
           :show-badge="false"
         />
       </woot-tabs>
-    </setting-intro-banner>
+    </SettingIntroBanner>
 
-    <microsoft-reauthorize v-if="microsoftUnauthorized" :inbox="inbox" />
-    <facebook-reauthorize v-if="facebookUnauthorized" :inbox="inbox" />
+    <MicrosoftReauthorize v-if="microsoftUnauthorized" :inbox="inbox" />
+    <FacebookReauthorize v-if="facebookUnauthorized" :inbox="inbox" />
 
     <div v-if="selectedTabKey === 'inbox_settings'" class="mx-8">
-      <settings-section
+      <SettingsSection
         :title="$t('INBOX_MGMT.SETTINGS_POPUP.INBOX_UPDATE_TITLE')"
         :sub-title="$t('INBOX_MGMT.SETTINGS_POPUP.INBOX_UPDATE_SUB_TEXT')"
         :show-border="false"
@@ -493,7 +493,7 @@ export default {
           </p>
         </label>
         <div v-if="greetingEnabled" class="pb-4">
-          <greetings-editor
+          <GreetingsEditor
             v-model.trim="greetingMessage"
             :label="
               $t(
@@ -682,15 +682,15 @@ export default {
             {{ $t('INBOX_MGMT.FEATURES.USE_INBOX_AVATAR_FOR_BOT') }}
           </label>
         </div>
-      </settings-section>
-      <settings-section
+      </SettingsSection>
+      <SettingsSection
         v-if="isAWebWidgetInbox || isAnEmailChannel"
         :title="$t('INBOX_MGMT.EDIT.SENDER_NAME_SECTION.TITLE')"
         :sub-title="$t('INBOX_MGMT.EDIT.SENDER_NAME_SECTION.SUB_TEXT')"
         :show-border="false"
       >
         <div class="w-3/4 pb-4">
-          <sender-name-example-preview
+          <SenderNameExamplePreview
             :sender-name-type="senderNameType"
             :business-name="businessName"
             @update="toggleSenderNameType"
@@ -729,8 +729,8 @@ export default {
             </div>
           </div>
         </div>
-      </settings-section>
-      <settings-section :show-border="false">
+      </SettingsSection>
+      <SettingsSection :show-border="false">
         <woot-submit-button
           v-if="isAPIInbox"
           type="submit"
@@ -747,26 +747,26 @@ export default {
           :loading="uiFlags.isUpdating"
           @click="updateInbox"
         />
-      </settings-section>
+      </SettingsSection>
     </div>
 
     <div v-if="selectedTabKey === 'collaborators'" class="mx-8">
-      <collaborators-page :inbox="inbox" />
+      <CollaboratorsPage :inbox="inbox" />
     </div>
     <div v-if="selectedTabKey === 'configuration'">
-      <configuration-page :inbox="inbox" />
+      <ConfigurationPage :inbox="inbox" />
     </div>
     <div v-if="selectedTabKey === 'preChatForm'">
-      <pre-chat-form-settings :inbox="inbox" />
+      <PreChatFormSettings :inbox="inbox" />
     </div>
     <div v-if="selectedTabKey === 'businesshours'">
-      <weekly-availability :inbox="inbox" />
+      <WeeklyAvailability :inbox="inbox" />
     </div>
     <div v-if="selectedTabKey === 'widgetBuilder'">
-      <widget-builder :inbox="inbox" />
+      <WidgetBuilder :inbox="inbox" />
     </div>
     <div v-if="selectedTabKey === 'botConfiguration'">
-      <bot-configuration :inbox="inbox" />
+      <BotConfiguration :inbox="inbox" />
     </div>
   </div>
 </template>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/inbox/SmtpSettings.vue b/app/javascript/dashboard/routes/dashboard/settings/inbox/SmtpSettings.vue
index bb0bdedb7..bab40210c 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/SmtpSettings.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/SmtpSettings.vue
@@ -154,7 +154,7 @@ export default {
 
 <template>
   <div class="mx-8">
-    <settings-section
+    <SettingsSection
       :title="$t('INBOX_MGMT.SMTP.TITLE')"
       :sub-title="$t('INBOX_MGMT.SMTP.SUBTITLE')"
     >
@@ -211,19 +211,19 @@ export default {
             :placeholder="$t('INBOX_MGMT.SMTP.DOMAIN.PLACE_HOLDER')"
             @blur="v$.domain.$touch"
           />
-          <input-radio-group
+          <InputRadioGroup
             :label="$t('INBOX_MGMT.SMTP.ENCRYPTION')"
             :items="encryptionProtocols"
             :action="handleEncryptionChange"
           />
-          <single-select-dropdown
+          <SingleSelectDropdown
             class="max-w-[75%] w-full"
             :label="$t('INBOX_MGMT.SMTP.OPEN_SSL_VERIFY_MODE')"
             :selected="openSSLVerifyMode"
             :options="openSSLVerifyModes"
             :action="handleSSLModeChange"
           />
-          <single-select-dropdown
+          <SingleSelectDropdown
             class="max-w-[75%] w-full"
             :label="$t('INBOX_MGMT.SMTP.AUTH_MECHANISM')"
             :selected="authMechanism"
@@ -237,6 +237,6 @@ export default {
           :disabled="(v$.$invalid && isSMTPEnabled) || uiFlags.isUpdatingSMTP"
         />
       </form>
-    </settings-section>
+    </SettingsSection>
   </div>
 </template>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/inbox/WidgetBuilder.vue b/app/javascript/dashboard/routes/dashboard/settings/inbox/WidgetBuilder.vue
index a41575743..e7b0e5416 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/WidgetBuilder.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/WidgetBuilder.vue
@@ -343,7 +343,7 @@ export default {
               }}
               <woot-color-picker v-model="color" />
             </label>
-            <input-radio-group
+            <InputRadioGroup
               name="widget-bubble-position"
               :label="
                 $t(
@@ -353,7 +353,7 @@ export default {
               :items="widgetBubblePositions"
               :action="handleWidgetBubblePositionChange"
             />
-            <input-radio-group
+            <InputRadioGroup
               name="widget-bubble-type"
               :label="
                 $t(
@@ -390,7 +390,7 @@ export default {
         </div>
       </div>
       <div class="widget-container w-100 lg:w-3/5">
-        <input-radio-group
+        <InputRadioGroup
           name="widget-view-options"
           :items="getWidgetViewOptions"
           :action="handleWidgetViewChange"
diff --git a/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Api.vue b/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Api.vue
index 4099207e6..410411b2c 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Api.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Api.vue
@@ -66,7 +66,7 @@ export default {
   <div
     class="border border-slate-25 dark:border-slate-800/60 bg-white dark:bg-slate-900 h-full p-6 w-full max-w-full md:w-3/4 md:max-w-[75%] flex-shrink-0 flex-grow-0"
   >
-    <page-header
+    <PageHeader
       :header-title="$t('INBOX_MGMT.ADD.API_CHANNEL.TITLE')"
       :header-content="$t('INBOX_MGMT.ADD.API_CHANNEL.DESC')"
     />
diff --git a/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Email.vue b/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Email.vue
index 58d7f1fa7..4b8865401 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Email.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Email.vue
@@ -56,13 +56,13 @@ function onClick(emailProvider) {
     v-if="!provider"
     class="border border-slate-25 dark:border-slate-800/60 bg-white dark:bg-slate-900 h-full p-6 w-full md:w-full max-w-full md:max-w-[75%] flex-shrink-0 flex-grow-0"
   >
-    <page-header
+    <PageHeader
       class="max-w-4xl"
       :header-title="$t('INBOX_MGMT.ADD.EMAIL_PROVIDER.TITLE')"
       :header-content="$t('INBOX_MGMT.ADD.EMAIL_PROVIDER.DESCRIPTION')"
     />
     <div class="grid max-w-3xl grid-cols-4 mx-0 mt-6">
-      <channel-selector
+      <ChannelSelector
         v-for="emailProvider in emailProviderList"
         :key="emailProvider.key"
         :class="{ inactive: !emailProvider.isEnabled }"
@@ -72,7 +72,7 @@ function onClick(emailProvider) {
       />
     </div>
   </div>
-  <microsoft v-else-if="provider === 'microsoft'" />
-  <google v-else-if="provider === 'google'" />
-  <forward-to-option v-else-if="provider === 'other_provider'" />
+  <Microsoft v-else-if="provider === 'microsoft'" />
+  <Google v-else-if="provider === 'google'" />
+  <ForwardToOption v-else-if="provider === 'other_provider'" />
 </template>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Facebook.vue b/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Facebook.vue
index 4e4a4da4a..17260bab1 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Facebook.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Facebook.vue
@@ -233,14 +233,14 @@ export default {
           v-dompurify-html="errorStateDescription"
         />
       </div>
-      <loading-state v-else-if="showLoader" :message="emptyStateMessage" />
+      <LoadingState v-else-if="showLoader" :message="emptyStateMessage" />
       <form
         v-else
         class="flex flex-wrap mx-0"
         @submit.prevent="createChannel()"
       >
         <div class="w-full">
-          <page-header
+          <PageHeader
             :header-title="$t('INBOX_MGMT.ADD.DETAILS.TITLE')"
             :header-content="
               useInstallationName(
diff --git a/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Line.vue b/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Line.vue
index 650743203..85faa48dc 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Line.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Line.vue
@@ -72,7 +72,7 @@ export default {
   <div
     class="border border-slate-25 dark:border-slate-800/60 bg-white dark:bg-slate-900 h-full p-6 w-full max-w-full md:w-3/4 md:max-w-[75%] flex-shrink-0 flex-grow-0"
   >
-    <page-header
+    <PageHeader
       :header-title="$t('INBOX_MGMT.ADD.LINE_CHANNEL.TITLE')"
       :header-content="$t('INBOX_MGMT.ADD.LINE_CHANNEL.DESC')"
     />
diff --git a/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Sms.vue b/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Sms.vue
index 19165f7e8..4f9eb4fc6 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Sms.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Sms.vue
@@ -21,7 +21,7 @@ export default {
   <div
     class="border border-slate-25 dark:border-slate-800/60 bg-white dark:bg-slate-900 h-full p-6 w-full max-w-full md:w-3/4 md:max-w-[75%] flex-shrink-0 flex-grow-0"
   >
-    <page-header
+    <PageHeader
       :header-title="$t('INBOX_MGMT.ADD.SMS.TITLE')"
       :header-content="$t('INBOX_MGMT.ADD.SMS.DESC')"
     />
@@ -38,7 +38,7 @@ export default {
         </select>
       </label>
     </div>
-    <twilio v-if="provider === 'twilio'" type="sms" />
-    <bandwidth-sms v-else />
+    <Twilio v-if="provider === 'twilio'" type="sms" />
+    <BandwidthSms v-else />
   </div>
 </template>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Telegram.vue b/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Telegram.vue
index a3905efbe..b92645b58 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Telegram.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Telegram.vue
@@ -66,7 +66,7 @@ export default {
   <div
     class="border border-slate-25 dark:border-slate-800/60 bg-white dark:bg-slate-900 h-full p-6 w-full max-w-full md:w-3/4 md:max-w-[75%] flex-shrink-0 flex-grow-0"
   >
-    <page-header
+    <PageHeader
       :header-title="$t('INBOX_MGMT.ADD.TELEGRAM_CHANNEL.TITLE')"
       :header-content="$t('INBOX_MGMT.ADD.TELEGRAM_CHANNEL.DESC')"
     />
diff --git a/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Website.vue b/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Website.vue
index f81fb1b01..2f1b0067e 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Website.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Website.vue
@@ -75,7 +75,7 @@ export default {
   <div
     class="border border-slate-25 dark:border-slate-800/60 bg-white dark:bg-slate-900 h-full p-6 w-full max-w-full md:w-3/4 md:max-w-[75%] flex-shrink-0 flex-grow-0"
   >
-    <page-header
+    <PageHeader
       :header-title="$t('INBOX_MGMT.ADD.WEBSITE_CHANNEL.TITLE')"
       :header-content="$t('INBOX_MGMT.ADD.WEBSITE_CHANNEL.DESC')"
     />
@@ -174,7 +174,7 @@ export default {
           }}
         </p>
       </label>
-      <greetings-editor
+      <GreetingsEditor
         v-if="greetingEnabled"
         v-model.trim="greetingMessage"
         class="w-full"
diff --git a/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Whatsapp.vue b/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Whatsapp.vue
index 4d652fbc0..d361e0f78 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Whatsapp.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Whatsapp.vue
@@ -23,7 +23,7 @@ export default {
   <div
     class="border border-slate-25 dark:border-slate-800/60 bg-white dark:bg-slate-900 h-full p-6 w-full max-w-full md:w-3/4 md:max-w-[75%] flex-shrink-0 flex-grow-0"
   >
-    <page-header
+    <PageHeader
       :header-title="$t('INBOX_MGMT.ADD.WHATSAPP.TITLE')"
       :header-content="$t('INBOX_MGMT.ADD.WHATSAPP.DESC')"
     />
@@ -41,8 +41,8 @@ export default {
       </label>
     </div>
 
-    <twilio v-if="provider === 'twilio'" type="whatsapp" />
-    <three-sixty-dialog-whatsapp v-else-if="provider === '360dialog'" />
-    <cloud-whatsapp v-else />
+    <Twilio v-if="provider === 'twilio'" type="whatsapp" />
+    <ThreeSixtyDialogWhatsapp v-else-if="provider === '360dialog'" />
+    <CloudWhatsapp v-else />
   </div>
 </template>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/emailChannels/ForwardToOption.vue b/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/emailChannels/ForwardToOption.vue
index a32788908..62d85bd1a 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/emailChannels/ForwardToOption.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/emailChannels/ForwardToOption.vue
@@ -71,7 +71,7 @@ export default {
   <div
     class="border border-slate-25 dark:border-slate-800/60 bg-white dark:bg-slate-900 h-full p-6 w-full max-w-full md:w-3/4 md:max-w-[75%] flex-shrink-0 flex-grow-0"
   >
-    <page-header
+    <PageHeader
       :header-title="$t('INBOX_MGMT.ADD.EMAIL_CHANNEL.TITLE')"
       :header-content="$t('INBOX_MGMT.ADD.EMAIL_CHANNEL.DESC')"
     />
diff --git a/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/emailChannels/OAuthChannel.vue b/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/emailChannels/OAuthChannel.vue
index b6ccef365..8c4fda5e7 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/emailChannels/OAuthChannel.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/emailChannels/OAuthChannel.vue
@@ -68,7 +68,7 @@ async function requestAuthorization() {
   <div
     class="border border-slate-25 dark:border-slate-800/60 bg-white dark:bg-slate-900 h-full p-6 w-full max-w-full md:w-3/4 md:max-w-[75%] flex-shrink-0 flex-grow-0"
   >
-    <settings-sub-page-header
+    <SettingsSubPageHeader
       :header-title="title"
       :header-content="description"
     />
diff --git a/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/microsoft/Reauthorize.vue b/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/microsoft/Reauthorize.vue
index 976b65534..ae6676ede 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/microsoft/Reauthorize.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/microsoft/Reauthorize.vue
@@ -37,7 +37,7 @@ async function requestAuthorization() {
 </script>
 
 <template>
-  <inbox-reconnection-required
+  <InboxReconnectionRequired
     class="mx-8 mt-5"
     @reauthorize="requestAuthorization"
   />
diff --git a/app/javascript/dashboard/routes/dashboard/settings/inbox/components/BotConfiguration.vue b/app/javascript/dashboard/routes/dashboard/settings/inbox/components/BotConfiguration.vue
index 749141e6e..e662d3f72 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/components/BotConfiguration.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/components/BotConfiguration.vue
@@ -73,13 +73,13 @@ export default {
 
 <template>
   <div class="mx-8">
-    <loading-state v-if="uiFlags.isFetching || uiFlags.isFetchingAgentBot" />
+    <LoadingState v-if="uiFlags.isFetching || uiFlags.isFetchingAgentBot" />
     <form
       v-else
       class="flex flex-wrap mx-0"
       @submit.prevent="updateActiveAgentBot"
     >
-      <settings-section
+      <SettingsSection
         :title="$t('AGENT_BOTS.BOT_CONFIGURATION.TITLE')"
         :sub-title="$t('AGENT_BOTS.BOT_CONFIGURATION.DESC')"
       >
@@ -116,7 +116,7 @@ export default {
             </woot-button>
           </div>
         </div>
-      </settings-section>
+      </SettingsSection>
     </form>
   </div>
 </template>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/inbox/components/InboxReconnectionRequired.vue b/app/javascript/dashboard/routes/dashboard/settings/inbox/components/InboxReconnectionRequired.vue
index fe6a80586..0357e09a4 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/components/InboxReconnectionRequired.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/components/InboxReconnectionRequired.vue
@@ -3,7 +3,7 @@ import Banner from 'dashboard/components/ui/Banner.vue';
 </script>
 
 <template>
-  <banner
+  <Banner
     color-scheme="alert"
     class="justify-start rounded-md"
     :banner-message="$t('INBOX_MGMT.RECONNECTION_REQUIRED')"
diff --git a/app/javascript/dashboard/routes/dashboard/settings/inbox/components/SenderNameExamplePreview.vue b/app/javascript/dashboard/routes/dashboard/settings/inbox/components/SenderNameExamplePreview.vue
index 0e611ed0b..9f7be45ba 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/components/SenderNameExamplePreview.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/components/SenderNameExamplePreview.vue
@@ -75,7 +75,7 @@ export default {
       class="text-slate-800 dark:text-slate-100 cursor-pointer p-0"
       @click="toggleSenderNameType(keyOption.key)"
     >
-      <preview-card
+      <PreviewCard
         :heading="keyOption.heading"
         :content="keyOption.content"
         :active="keyOption.key === senderNameType"
@@ -85,7 +85,7 @@ export default {
             {{ $t('INBOX_MGMT.EDIT.SENDER_NAME_SECTION.FOR_EG') }}
           </span>
           <div class="flex flex-row items-center gap-2">
-            <thumbnail :username="userName(keyOption)" size="32px" />
+            <Thumbnail :username="userName(keyOption)" size="32px" />
             <div class="flex flex-col items-start gap-1">
               <div class="items-center flex flex-row gap-0.5 max-w-[18rem]">
                 <span
@@ -107,7 +107,7 @@ export default {
             </div>
           </div>
         </div>
-      </preview-card>
+      </PreviewCard>
     </button>
   </div>
 </template>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/inbox/components/WeeklyAvailability.vue b/app/javascript/dashboard/routes/dashboard/settings/inbox/components/WeeklyAvailability.vue
index 6d9ca2b7f..4549bf240 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/components/WeeklyAvailability.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/components/WeeklyAvailability.vue
@@ -120,7 +120,7 @@ export default {
 
 <template>
   <div class="mx-8">
-    <settings-section
+    <SettingsSection
       :title="$t('INBOX_MGMT.BUSINESS_HOURS.TITLE')"
       :sub-title="$t('INBOX_MGMT.BUSINESS_HOURS.SUBTITLE')"
     >
@@ -146,7 +146,7 @@ export default {
               v-if="isRichEditorEnabled"
               class="py-0 px-4 border border-solid border-slate-200 dark:border-slate-600 bg-white dark:bg-slate-900 rounded-md mx-0 mt-0 mb-4"
             >
-              <woot-message-editor
+              <WootMessageEditor
                 v-model="unavailableMessage"
                 :enable-variables="true"
                 :is-format-mode="true"
@@ -177,7 +177,7 @@ export default {
           <label>
             {{ $t('INBOX_MGMT.BUSINESS_HOURS.WEEKLY_TITLE') }}
           </label>
-          <business-day
+          <BusinessDay
             v-for="timeSlot in timeSlots"
             :key="timeSlot.day"
             :day-name="dayNames[timeSlot.day]"
@@ -191,7 +191,7 @@ export default {
           :disabled="hasError"
         />
       </form>
-    </settings-section>
+    </SettingsSection>
   </div>
 </template>
 <style lang="scss" scoped>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/inbox/facebook/Reauthorize.vue b/app/javascript/dashboard/routes/dashboard/settings/inbox/facebook/Reauthorize.vue
index b23edd5d0..986f072e7 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/facebook/Reauthorize.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/facebook/Reauthorize.vue
@@ -99,7 +99,7 @@ export default {
 </script>
 
 <template>
-  <inbox-reconnection-required class="mx-8 mt-5" @reauthorize="startLogin" />
+  <InboxReconnectionRequired class="mx-8 mt-5" @reauthorize="startLogin" />
 </template>
 
 <style lang="scss" scoped>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/inbox/settingsPage/CollaboratorsPage.vue b/app/javascript/dashboard/routes/dashboard/settings/inbox/settingsPage/CollaboratorsPage.vue
index 2d5103f84..14360efed 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/settingsPage/CollaboratorsPage.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/settingsPage/CollaboratorsPage.vue
@@ -118,7 +118,7 @@ export default {
 
 <template>
   <div>
-    <settings-section
+    <SettingsSection
       :title="$t('INBOX_MGMT.SETTINGS_POPUP.INBOX_AGENTS')"
       :sub-title="$t('INBOX_MGMT.SETTINGS_POPUP.INBOX_AGENTS_SUB_TEXT')"
     >
@@ -143,9 +143,9 @@ export default {
         :loading="isAgentListUpdating"
         @click="updateAgents"
       />
-    </settings-section>
+    </SettingsSection>
 
-    <settings-section
+    <SettingsSection
       :title="$t('INBOX_MGMT.SETTINGS_POPUP.AGENT_ASSIGNMENT')"
       :sub-title="$t('INBOX_MGMT.SETTINGS_POPUP.AGENT_ASSIGNMENT_SUB_TEXT')"
     >
@@ -190,7 +190,7 @@ export default {
           @click="updateInbox"
         />
       </div>
-    </settings-section>
+    </SettingsSection>
   </div>
 </template>
 
diff --git a/app/javascript/dashboard/routes/dashboard/settings/inbox/settingsPage/ConfigurationPage.vue b/app/javascript/dashboard/routes/dashboard/settings/inbox/settingsPage/ConfigurationPage.vue
index 44b011d77..8d3a385a8 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/settingsPage/ConfigurationPage.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/settingsPage/ConfigurationPage.vue
@@ -87,24 +87,24 @@ export default {
 
 <template>
   <div v-if="isATwilioChannel" class="mx-8">
-    <settings-section
+    <SettingsSection
       :title="$t('INBOX_MGMT.ADD.TWILIO.API_CALLBACK.TITLE')"
       :sub-title="$t('INBOX_MGMT.ADD.TWILIO.API_CALLBACK.SUBTITLE')"
     >
       <woot-code :script="inbox.callback_webhook_url" lang="html" />
-    </settings-section>
+    </SettingsSection>
   </div>
   <div v-else-if="isALineChannel" class="mx-8">
-    <settings-section
+    <SettingsSection
       :title="$t('INBOX_MGMT.ADD.LINE_CHANNEL.API_CALLBACK.TITLE')"
       :sub-title="$t('INBOX_MGMT.ADD.LINE_CHANNEL.API_CALLBACK.SUBTITLE')"
     >
       <woot-code :script="inbox.callback_webhook_url" lang="html" />
-    </settings-section>
+    </SettingsSection>
   </div>
   <div v-else-if="isAWebWidgetInbox">
     <div class="mx-8">
-      <settings-section
+      <SettingsSection
         :title="$t('INBOX_MGMT.SETTINGS_POPUP.MESSENGER_HEADING')"
         :sub-title="$t('INBOX_MGMT.SETTINGS_POPUP.MESSENGER_SUB_HEAD')"
       >
@@ -114,9 +114,9 @@ export default {
           :codepen-title="`${inbox.name} - Chatwoot Widget Test`"
           :enable-code-pen="true"
         />
-      </settings-section>
+      </SettingsSection>
 
-      <settings-section
+      <SettingsSection
         :title="$t('INBOX_MGMT.SETTINGS_POPUP.HMAC_VERIFICATION')"
       >
         <woot-code :script="inbox.hmac_token" />
@@ -130,8 +130,8 @@ export default {
             {{ $t('INBOX_MGMT.SETTINGS_POPUP.HMAC_LINK_TO_DOCS') }}
           </a>
         </template>
-      </settings-section>
-      <settings-section
+      </SettingsSection>
+      <SettingsSection
         :title="$t('INBOX_MGMT.SETTINGS_POPUP.HMAC_MANDATORY_VERIFICATION')"
         :sub-title="$t('INBOX_MGMT.SETTINGS_POPUP.HMAC_MANDATORY_DESCRIPTION')"
       >
@@ -146,24 +146,24 @@ export default {
             {{ $t('INBOX_MGMT.EDIT.ENABLE_HMAC.LABEL') }}
           </label>
         </div>
-      </settings-section>
+      </SettingsSection>
     </div>
   </div>
   <div v-else-if="isAPIInbox" class="mx-8">
-    <settings-section
+    <SettingsSection
       :title="$t('INBOX_MGMT.SETTINGS_POPUP.INBOX_IDENTIFIER')"
       :sub-title="$t('INBOX_MGMT.SETTINGS_POPUP.INBOX_IDENTIFIER_SUB_TEXT')"
     >
       <woot-code :script="inbox.inbox_identifier" />
-    </settings-section>
+    </SettingsSection>
 
-    <settings-section
+    <SettingsSection
       :title="$t('INBOX_MGMT.SETTINGS_POPUP.HMAC_VERIFICATION')"
       :sub-title="$t('INBOX_MGMT.SETTINGS_POPUP.HMAC_DESCRIPTION')"
     >
       <woot-code :script="inbox.hmac_token" />
-    </settings-section>
-    <settings-section
+    </SettingsSection>
+    <SettingsSection
       :title="$t('INBOX_MGMT.SETTINGS_POPUP.HMAC_MANDATORY_VERIFICATION')"
       :sub-title="$t('INBOX_MGMT.SETTINGS_POPUP.HMAC_MANDATORY_DESCRIPTION')"
     >
@@ -178,35 +178,35 @@ export default {
           {{ $t('INBOX_MGMT.EDIT.ENABLE_HMAC.LABEL') }}
         </label>
       </div>
-    </settings-section>
+    </SettingsSection>
   </div>
   <div v-else-if="isAnEmailChannel">
     <div class="mx-8">
-      <settings-section
+      <SettingsSection
         :title="$t('INBOX_MGMT.SETTINGS_POPUP.FORWARD_EMAIL_TITLE')"
         :sub-title="$t('INBOX_MGMT.SETTINGS_POPUP.FORWARD_EMAIL_SUB_TEXT')"
       >
         <woot-code :script="inbox.forward_to_email" />
-      </settings-section>
+      </SettingsSection>
     </div>
-    <imap-settings :inbox="inbox" />
-    <smtp-settings v-if="inbox.imap_enabled" :inbox="inbox" />
+    <ImapSettings :inbox="inbox" />
+    <SmtpSettings v-if="inbox.imap_enabled" :inbox="inbox" />
   </div>
   <div v-else-if="isAWhatsAppChannel && !isATwilioChannel">
     <div v-if="inbox.provider_config" class="mx-8">
-      <settings-section
+      <SettingsSection
         :title="$t('INBOX_MGMT.SETTINGS_POPUP.WHATSAPP_WEBHOOK_TITLE')"
         :sub-title="$t('INBOX_MGMT.SETTINGS_POPUP.WHATSAPP_WEBHOOK_SUBHEADER')"
       >
         <woot-code :script="inbox.provider_config.webhook_verify_token" />
-      </settings-section>
-      <settings-section
+      </SettingsSection>
+      <SettingsSection
         :title="$t('INBOX_MGMT.SETTINGS_POPUP.WHATSAPP_SECTION_TITLE')"
         :sub-title="$t('INBOX_MGMT.SETTINGS_POPUP.WHATSAPP_SECTION_SUBHEADER')"
       >
         <woot-code :script="inbox.provider_config.api_key" />
-      </settings-section>
-      <settings-section
+      </SettingsSection>
+      <SettingsSection
         :title="$t('INBOX_MGMT.SETTINGS_POPUP.WHATSAPP_SECTION_UPDATE_TITLE')"
         :sub-title="
           $t('INBOX_MGMT.SETTINGS_POPUP.WHATSAPP_SECTION_UPDATE_SUBHEADER')
@@ -232,7 +232,7 @@ export default {
             {{ $t('INBOX_MGMT.SETTINGS_POPUP.WHATSAPP_SECTION_UPDATE_BUTTON') }}
           </woot-button>
         </div>
-      </settings-section>
+      </SettingsSection>
     </div>
   </div>
 </template>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/integrations/DashboardApps/Index.vue b/app/javascript/dashboard/routes/dashboard/settings/integrations/DashboardApps/Index.vue
index 437c2d93c..2fff32df0 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/integrations/DashboardApps/Index.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/integrations/DashboardApps/Index.vue
@@ -107,7 +107,7 @@ export default {
             </th>
           </thead>
           <tbody>
-            <dashboard-apps-row
+            <DashboardAppsRow
               v-for="(dashboardAppItem, index) in records"
               :key="dashboardAppItem.id"
               :index="index"
@@ -131,7 +131,7 @@ export default {
       </div>
     </div>
 
-    <dashboard-app-modal
+    <DashboardAppModal
       v-if="showDashboardAppPopup"
       :show="showDashboardAppPopup"
       :mode="mode"
diff --git a/app/javascript/dashboard/routes/dashboard/settings/integrations/Index.vue b/app/javascript/dashboard/routes/dashboard/settings/integrations/Index.vue
index 0a88a3dbf..d055f7881 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/integrations/Index.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/integrations/Index.vue
@@ -35,7 +35,7 @@ onMounted(() => {
     <template #body>
       <div class="flex-grow flex-shrink overflow-auto font-inter">
         <div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-4">
-          <integration-item
+          <IntegrationItem
             v-for="item in integrationList"
             :id="item.id"
             :key="item.id"
diff --git a/app/javascript/dashboard/routes/dashboard/settings/integrations/IntegrationHooks.vue b/app/javascript/dashboard/routes/dashboard/settings/integrations/IntegrationHooks.vue
index 9ac6a2cc9..5e6d7b3a7 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/integrations/IntegrationHooks.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/integrations/IntegrationHooks.vue
@@ -118,14 +118,14 @@ export default {
     </woot-button>
     <div v-if="showIntegrationHooks" class="w-full">
       <div v-if="isIntegrationMultiple">
-        <multiple-integration-hooks
+        <MultipleIntegrationHooks
           :integration="integration"
           @delete="openDeletePopup"
         />
       </div>
 
       <div v-if="isIntegrationSingle">
-        <single-integration-hooks
+        <SingleIntegrationHooks
           :integration="integration"
           @add="openAddHookModal"
           @delete="openDeletePopup"
@@ -134,7 +134,7 @@ export default {
     </div>
 
     <woot-modal :show.sync="showAddHookModal" :on-close="hideAddHookModal">
-      <new-hook :integration="integration" @close="hideAddHookModal" />
+      <NewHook :integration="integration" @close="hideAddHookModal" />
     </woot-modal>
 
     <woot-delete-modal
diff --git a/app/javascript/dashboard/routes/dashboard/settings/integrations/ShowIntegration.vue b/app/javascript/dashboard/routes/dashboard/settings/integrations/ShowIntegration.vue
index 5ffc8cb28..c2e0162f7 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/integrations/ShowIntegration.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/integrations/ShowIntegration.vue
@@ -61,7 +61,7 @@ export default {
             v-if="integrationLoaded"
             class="bg-white dark:bg-slate-800 border border-solid border-slate-75 dark:border-slate-700/50 rounded-sm mb-4 p-4"
           >
-            <integration
+            <Integration
               :integration-id="integration.id"
               :integration-logo="integration.logo"
               :integration-name="integration.name"
diff --git a/app/javascript/dashboard/routes/dashboard/settings/integrations/Slack.vue b/app/javascript/dashboard/routes/dashboard/settings/integrations/Slack.vue
index 349dd921f..eb394c2f6 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/integrations/Slack.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/integrations/Slack.vue
@@ -85,7 +85,7 @@ export default {
     <div
       class="bg-white dark:bg-slate-800 border-b border-solid border-slate-75 dark:border-slate-700/50 rounded-sm p-4"
     >
-      <integration
+      <Integration
         :integration-id="integration.id"
         :integration-logo="integration.logo"
         :integration-name="integration.name"
@@ -100,16 +100,14 @@ export default {
       />
     </div>
     <div v-if="areHooksAvailable" class="p-6 flex-1">
-      <select-channel-warning
+      <SelectChannelWarning
         v-if="!isIntegrationHookEnabled"
         :has-connected-a-channel="hasConnectedAChannel"
       />
-      <slack-integration-help-text
-        :selected-channel-name="selectedChannelName"
-      />
+      <SlackIntegrationHelpText :selected-channel-name="selectedChannelName" />
     </div>
   </div>
   <div v-else class="flex flex-1 items-center justify-center">
-    <spinner size="" color-scheme="primary" />
+    <Spinner size="" color-scheme="primary" />
   </div>
 </template>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/integrations/Webhooks/EditWebHook.vue b/app/javascript/dashboard/routes/dashboard/settings/integrations/Webhooks/EditWebHook.vue
index ccb951157..c9b315443 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/integrations/Webhooks/EditWebHook.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/integrations/Webhooks/EditWebHook.vue
@@ -49,7 +49,7 @@ export default {
     <woot-modal-header
       :header-title="$t('INTEGRATION_SETTINGS.WEBHOOK.EDIT.TITLE')"
     />
-    <webhook-form
+    <WebhookForm
       :value="value"
       :is-submitting="uiFlags.updatingItem"
       :submit-label="$t('INTEGRATION_SETTINGS.WEBHOOK.FORM.EDIT_SUBMIT')"
diff --git a/app/javascript/dashboard/routes/dashboard/settings/integrations/Webhooks/Index.vue b/app/javascript/dashboard/routes/dashboard/settings/integrations/Webhooks/Index.vue
index 251753f77..a1827c8fd 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/integrations/Webhooks/Index.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/integrations/Webhooks/Index.vue
@@ -113,7 +113,7 @@ export default {
             </th>
           </thead>
           <tbody>
-            <webhook-row
+            <WebhookRow
               v-for="(webHookItem, index) in records"
               :key="webHookItem.id"
               :index="index"
@@ -138,11 +138,11 @@ export default {
     </div>
 
     <woot-modal :show.sync="showAddPopup" :on-close="hideAddPopup">
-      <new-webhook v-if="showAddPopup" :on-close="hideAddPopup" />
+      <NewWebhook v-if="showAddPopup" :on-close="hideAddPopup" />
     </woot-modal>
 
     <woot-modal :show.sync="showEditPopup" :on-close="hideEditPopup">
-      <edit-webhook
+      <EditWebhook
         v-if="showEditPopup"
         :id="selectedWebHook.id"
         :value="selectedWebHook"
diff --git a/app/javascript/dashboard/routes/dashboard/settings/integrations/Webhooks/NewWebHook.vue b/app/javascript/dashboard/routes/dashboard/settings/integrations/Webhooks/NewWebHook.vue
index d16606a44..43b1d2843 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/integrations/Webhooks/NewWebHook.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/integrations/Webhooks/NewWebHook.vue
@@ -49,7 +49,7 @@ export default {
         )
       "
     />
-    <webhook-form
+    <WebhookForm
       :is-submitting="uiFlags.creatingItem"
       :submit-label="$t('INTEGRATION_SETTINGS.WEBHOOK.FORM.ADD_SUBMIT')"
       @submit="onSubmit"
diff --git a/app/javascript/dashboard/routes/dashboard/settings/integrations/Webhooks/WebhookRow.vue b/app/javascript/dashboard/routes/dashboard/settings/integrations/Webhooks/WebhookRow.vue
index 5ab9202d5..f3c9c093d 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/integrations/Webhooks/WebhookRow.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/integrations/Webhooks/WebhookRow.vue
@@ -33,7 +33,7 @@ export default {
         <span class="font-medium">
           {{ $t('INTEGRATION_SETTINGS.WEBHOOK.SUBSCRIBED_EVENTS') }}:
         </span>
-        <show-more :text="subscribedEvents" :limit="60" />
+        <ShowMore :text="subscribedEvents" :limit="60" />
       </span>
     </td>
     <td class="min-w-[7rem] flex gap-1 justify-end flex-shrink-0">
diff --git a/app/javascript/dashboard/routes/dashboard/settings/labels/Index.vue b/app/javascript/dashboard/routes/dashboard/settings/labels/Index.vue
index 78d4a02aa..01d5f25ba 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/labels/Index.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/labels/Index.vue
@@ -163,14 +163,11 @@ export default {
       </div>
     </div>
     <woot-modal :show.sync="showAddPopup" :on-close="hideAddPopup">
-      <add-label @close="hideAddPopup" />
+      <AddLabel @close="hideAddPopup" />
     </woot-modal>
 
     <woot-modal :show.sync="showEditPopup" :on-close="hideEditPopup">
-      <edit-label
-        :selected-response="selectedResponse"
-        @close="hideEditPopup"
-      />
+      <EditLabel :selected-response="selectedResponse" @close="hideEditPopup" />
     </woot-modal>
 
     <woot-delete-modal
diff --git a/app/javascript/dashboard/routes/dashboard/settings/macros/Index.vue b/app/javascript/dashboard/routes/dashboard/settings/macros/Index.vue
index 9c9707a1e..61614c8b8 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/macros/Index.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/macros/Index.vue
@@ -85,7 +85,7 @@ export default {
             </th>
           </thead>
           <tbody>
-            <macros-table-row
+            <MacrosTableRow
               v-for="(macro, index) in records"
               :key="index"
               :macro="macro"
diff --git a/app/javascript/dashboard/routes/dashboard/settings/macros/MacroEditor.vue b/app/javascript/dashboard/routes/dashboard/settings/macros/MacroEditor.vue
index 6b469e522..f0ef14876 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/macros/MacroEditor.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/macros/MacroEditor.vue
@@ -133,7 +133,7 @@ export default {
       v-if="uiFlags.isFetchingItem"
       :message="$t('MACROS.EDITOR.LOADING')"
     />
-    <macro-form
+    <MacroForm
       v-if="macro && !uiFlags.isFetchingItem"
       :macro-data.sync="macro"
       @submit="saveMacro"
diff --git a/app/javascript/dashboard/routes/dashboard/settings/macros/MacroForm.vue b/app/javascript/dashboard/routes/dashboard/settings/macros/MacroForm.vue
index e2f995b85..a0ae314fe 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/macros/MacroForm.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/macros/MacroForm.vue
@@ -107,7 +107,7 @@ export default {
     <div
       class="flex-1 w-full md:w-auto macro-gradient-radial dark:macro-dark-gradient-radial macro-gradient-radial-size h-full max-h-full py-4 px-12 overflow-y-auto"
     >
-      <macro-nodes
+      <MacroNodes
         v-model="macro.actions"
         :files="files"
         @addNewNode="appendNode"
@@ -116,7 +116,7 @@ export default {
       />
     </div>
     <div class="w-full md:w-1/3">
-      <macro-properties
+      <MacroProperties
         :macro-name="macro.name"
         :macro-visibility="macro.visibility"
         @update:name="updateName"
diff --git a/app/javascript/dashboard/routes/dashboard/settings/macros/MacroNode.vue b/app/javascript/dashboard/routes/dashboard/settings/macros/MacroNode.vue
index 739ecf2a5..b41dce029 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/macros/MacroNode.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/macros/MacroNode.vue
@@ -82,7 +82,7 @@ export default {
         'has-error': errors[`action_${index}`],
       }"
     >
-      <action-input
+      <ActionInput
         v-model="actionData"
         :action-types="macroActionTypes"
         :dropdown-values="dropdownValues()"
diff --git a/app/javascript/dashboard/routes/dashboard/settings/macros/MacroNodes.vue b/app/javascript/dashboard/routes/dashboard/settings/macros/MacroNodes.vue
index 10de3af08..80d29170d 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/macros/MacroNodes.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/macros/MacroNodes.vue
@@ -46,7 +46,7 @@ export default {
         />
       </div>
     </div>
-    <draggable
+    <Draggable
       :list="actionData"
       animation="200"
       ghost-class="ghost"
@@ -55,7 +55,7 @@ export default {
       handle=".macros__node-drag-handle"
     >
       <div v-for="(action, i) in actionData" :key="i" class="macro__node">
-        <macro-node
+        <MacroNode
           v-model="actionData[i]"
           class="macros__node-action"
           type="add"
@@ -72,7 +72,7 @@ export default {
           @deleteNode="$emit('deleteNode', i)"
         />
       </div>
-    </draggable>
+    </Draggable>
     <div class="macro__node">
       <div>
         <woot-button
diff --git a/app/javascript/dashboard/routes/dashboard/settings/macros/MacrosTableRow.vue b/app/javascript/dashboard/routes/dashboard/settings/macros/MacrosTableRow.vue
index e258dfbb3..79fa45e36 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/macros/MacrosTableRow.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/macros/MacrosTableRow.vue
@@ -35,13 +35,13 @@ export default {
     <td>{{ macro.name }}</td>
     <td>
       <div v-if="macro.created_by" class="avatar-container">
-        <thumbnail :username="createdByName" size="24px" />
+        <Thumbnail :username="createdByName" size="24px" />
         <span>{{ createdByName }}</span>
       </div>
     </td>
     <td>
       <div v-if="macro.updated_by" class="avatar-container">
-        <thumbnail :username="updatedByName" size="24px" />
+        <Thumbnail :username="updatedByName" size="24px" />
         <span>{{ updatedByName }}</span>
       </div>
     </td>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/profile/AccessToken.vue b/app/javascript/dashboard/routes/dashboard/settings/profile/AccessToken.vue
index d2291bcfa..0e19dc864 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/profile/AccessToken.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/profile/AccessToken.vue
@@ -44,7 +44,7 @@ const onClick = () => {
         </button>
       </template>
     </woot-input>
-    <form-button
+    <FormButton
       type="submit"
       size="large"
       icon="text-copy"
@@ -53,6 +53,6 @@ const onClick = () => {
       @click="onClick"
     >
       {{ $t('PROFILE_SETTINGS.FORM.ACCESS_TOKEN.COPY') }}
-    </form-button>
+    </FormButton>
   </div>
 </template>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/profile/AudioAlertTone.vue b/app/javascript/dashboard/routes/dashboard/settings/profile/AudioAlertTone.vue
index 8c823a4c6..541383ee4 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/profile/AudioAlertTone.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/profile/AudioAlertTone.vue
@@ -35,7 +35,7 @@ const selectedValue = computed({
 });
 </script>
 <template>
-  <form-select
+  <FormSelect
     v-model="selectedValue"
     name="alertTone"
     spacing="compact"
@@ -52,5 +52,5 @@ const selectedValue = computed({
     >
       {{ tone.label }}
     </option>
-  </form-select>
+  </FormSelect>
 </template>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/profile/AudioNotifications.vue b/app/javascript/dashboard/routes/dashboard/settings/profile/AudioNotifications.vue
index cd866dc5c..397c2235e 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/profile/AudioNotifications.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/profile/AudioNotifications.vue
@@ -106,7 +106,7 @@ export default {
 
 <template>
   <div id="profile-settings-notifications" class="flex flex-col gap-6">
-    <audio-alert-tone
+    <AudioAlertTone
       :value="alertTone"
       :label="
         $t(
@@ -116,7 +116,7 @@ export default {
       @change="handleAudioToneChange"
     />
 
-    <audio-alert-event
+    <AudioAlertEvent
       :label="
         $t('PROFILE_SETTINGS.FORM.AUDIO_NOTIFICATIONS_SECTION.ALERT_TYPE.TITLE')
       "
@@ -124,7 +124,7 @@ export default {
       @update="handAudioAlertChange"
     />
 
-    <audio-alert-condition
+    <AudioAlertCondition
       :items="audioAlertConditions"
       :label="
         $t('PROFILE_SETTINGS.FORM.AUDIO_NOTIFICATIONS_SECTION.CONDITIONS.TITLE')
diff --git a/app/javascript/dashboard/routes/dashboard/settings/profile/ChangePassword.vue b/app/javascript/dashboard/routes/dashboard/settings/profile/ChangePassword.vue
index e3461e438..b6c93a126 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/profile/ChangePassword.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/profile/ChangePassword.vue
@@ -127,7 +127,7 @@ export default {
         @input="v$.passwordConfirmation.$touch"
       />
 
-      <form-button
+      <FormButton
         type="submit"
         color-scheme="primary"
         variant="solid"
@@ -135,7 +135,7 @@ export default {
         :disabled="isButtonDisabled"
       >
         {{ $t('PROFILE_SETTINGS.FORM.PASSWORD_SECTION.BTN_TEXT') }}
-      </form-button>
+      </FormButton>
     </div>
   </form>
 </template>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/profile/Index.vue b/app/javascript/dashboard/routes/dashboard/settings/profile/Index.vue
index 86847ff1b..3e9badd15 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/profile/Index.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/profile/Index.vue
@@ -179,14 +179,14 @@ export default {
       <h2 class="text-2xl font-medium text-ash-900">
         {{ $t('PROFILE_SETTINGS.TITLE') }}
       </h2>
-      <user-profile-picture
+      <UserProfilePicture
         :src="avatarUrl"
         :name="name"
         size="72px"
         @change="updateProfilePicture"
         @delete="deleteProfilePicture"
       />
-      <user-basic-details
+      <UserBasicDetails
         :name="name"
         :display-name="displayName"
         :email="email"
@@ -195,16 +195,16 @@ export default {
       />
     </div>
 
-    <form-section
+    <FormSection
       :title="$t('PROFILE_SETTINGS.FORM.MESSAGE_SIGNATURE_SECTION.TITLE')"
       :description="$t('PROFILE_SETTINGS.FORM.MESSAGE_SIGNATURE_SECTION.NOTE')"
     >
-      <message-signature
+      <MessageSignature
         :message-signature="messageSignature"
         @update-signature="updateSignature"
       />
-    </form-section>
-    <form-section
+    </FormSection>
+    <FormSection
       :title="$t('PROFILE_SETTINGS.FORM.SEND_MESSAGE.TITLE')"
       :description="$t('PROFILE_SETTINGS.FORM.SEND_MESSAGE.NOTE')"
     >
@@ -216,7 +216,7 @@ export default {
           :key="hotKey.key"
           class="px-0 reset-base"
         >
-          <hot-key-card
+          <HotKeyCard
             :key="hotKey.title"
             :title="hotKey.title"
             :description="hotKey.description"
@@ -227,22 +227,22 @@ export default {
           />
         </button>
       </div>
-    </form-section>
-    <form-section :title="$t('PROFILE_SETTINGS.FORM.PASSWORD_SECTION.TITLE')">
-      <change-password v-if="!globalConfig.disableUserProfileUpdate" />
-    </form-section>
-    <form-section
+    </FormSection>
+    <FormSection :title="$t('PROFILE_SETTINGS.FORM.PASSWORD_SECTION.TITLE')">
+      <ChangePassword v-if="!globalConfig.disableUserProfileUpdate" />
+    </FormSection>
+    <FormSection
       :title="$t('PROFILE_SETTINGS.FORM.AUDIO_NOTIFICATIONS_SECTION.TITLE')"
       :description="
         $t('PROFILE_SETTINGS.FORM.AUDIO_NOTIFICATIONS_SECTION.NOTE')
       "
     >
-      <audio-notifications />
-    </form-section>
-    <form-section :title="$t('PROFILE_SETTINGS.FORM.NOTIFICATIONS.TITLE')">
-      <notification-preferences />
-    </form-section>
-    <form-section
+      <AudioNotifications />
+    </FormSection>
+    <FormSection :title="$t('PROFILE_SETTINGS.FORM.NOTIFICATIONS.TITLE')">
+      <NotificationPreferences />
+    </FormSection>
+    <FormSection
       :title="$t('PROFILE_SETTINGS.FORM.ACCESS_TOKEN.TITLE')"
       :description="
         useInstallationName(
@@ -251,7 +251,7 @@ export default {
         )
       "
     >
-      <access-token :value="currentUser.access_token" @on-copy="onCopyToken" />
-    </form-section>
+      <AccessToken :value="currentUser.access_token" @on-copy="onCopyToken" />
+    </FormSection>
   </div>
 </template>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/profile/MessageSignature.vue b/app/javascript/dashboard/routes/dashboard/settings/profile/MessageSignature.vue
index 48339deb8..d9fb34722 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/profile/MessageSignature.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/profile/MessageSignature.vue
@@ -28,7 +28,7 @@ const updateSignature = () => {
 </script>
 <template>
   <form class="flex flex-col gap-6" @submit.prevent="updateSignature()">
-    <woot-message-editor
+    <WootMessageEditor
       id="message-signature-input"
       v-model="signature"
       class="message-editor h-[10rem] !px-3"
@@ -38,13 +38,13 @@ const updateSignature = () => {
       :enable-suggestions="false"
       :show-image-resize-toolbar="true"
     />
-    <form-button
+    <FormButton
       type="submit"
       color-scheme="primary"
       variant="solid"
       size="large"
     >
       {{ $t('PROFILE_SETTINGS.FORM.MESSAGE_SIGNATURE_SECTION.BTN_TEXT') }}
-    </form-button>
+    </FormButton>
   </form>
 </template>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/profile/NotificationPreferences.vue b/app/javascript/dashboard/routes/dashboard/settings/profile/NotificationPreferences.vue
index 0f704cdb0..9842deffa 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/profile/NotificationPreferences.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/profile/NotificationPreferences.vue
@@ -141,23 +141,23 @@ export default {
       <div
         class="grid content-center h-12 grid-cols-12 gap-4 py-0 rounded-t-xl"
       >
-        <table-header-cell
+        <TableHeaderCell
           :span="7"
           label="`${$t('PROFILE_SETTINGS.FORM.NOTIFICATIONS.TYPE_TITLE')}`"
         >
           <span class="text-sm font-normal normal-case text-ash-800">
             {{ $t('PROFILE_SETTINGS.FORM.NOTIFICATIONS.TYPE_TITLE') }}
           </span>
-        </table-header-cell>
-        <table-header-cell
+        </TableHeaderCell>
+        <TableHeaderCell
           :span="2"
           label="`${$t('PROFILE_SETTINGS.FORM.NOTIFICATIONS.EMAIL')}`"
         >
           <span class="text-sm font-medium normal-case text-ash-900">
             {{ $t('PROFILE_SETTINGS.FORM.NOTIFICATIONS.EMAIL') }}
           </span>
-        </table-header-cell>
-        <table-header-cell
+        </TableHeaderCell>
+        <TableHeaderCell
           :span="3"
           label="`${$t('PROFILE_SETTINGS.FORM.NOTIFICATIONS.PUSH')}`"
         >
@@ -168,7 +168,7 @@ export default {
               {{ $t('PROFILE_SETTINGS.FORM.NOTIFICATIONS.PUSH') }}
             </span>
           </div>
-        </table-header-cell>
+        </TableHeaderCell>
       </div>
       <div
         v-for="(notification, index) in filteredNotificationTypes"
@@ -258,7 +258,7 @@ export default {
           {{ $t('PROFILE_SETTINGS.FORM.NOTIFICATIONS.BROWSER_PERMISSION') }}
         </span>
       </div>
-      <form-switch
+      <FormSwitch
         :value="hasEnabledPushPermissions"
         @input="onRequestPermissions"
       />
diff --git a/app/javascript/dashboard/routes/dashboard/settings/profile/UserBasicDetails.vue b/app/javascript/dashboard/routes/dashboard/settings/profile/UserBasicDetails.vue
index 1e00c0b14..640ba8c6c 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/profile/UserBasicDetails.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/profile/UserBasicDetails.vue
@@ -126,13 +126,13 @@ export default {
       }`"
       @input="v$.userEmail.$touch"
     />
-    <form-button
+    <FormButton
       type="submit"
       color-scheme="primary"
       variant="solid"
       size="large"
     >
       {{ $t('PROFILE_SETTINGS.BTN_TEXT') }}
-    </form-button>
+    </FormButton>
   </form>
 </template>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/profile/UserProfilePicture.vue b/app/javascript/dashboard/routes/dashboard/settings/profile/UserProfilePicture.vue
index 023b8eef1..87a5dddde 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/profile/UserProfilePicture.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/profile/UserProfilePicture.vue
@@ -30,7 +30,7 @@ const deleteProfilePicture = () => {
     <span class="text-sm font-medium text-ash-900">
       {{ $t('PROFILE_SETTINGS.FORM.PICTURE') }}
     </span>
-    <profile-avatar
+    <ProfileAvatar
       :src="src"
       :name="userNameWithoutEmoji"
       @change="updateProfilePicture"
diff --git a/app/javascript/dashboard/routes/dashboard/settings/reports/AgentReports.vue b/app/javascript/dashboard/routes/dashboard/settings/reports/AgentReports.vue
index 71e54c316..7a7374994 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/reports/AgentReports.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/reports/AgentReports.vue
@@ -9,7 +9,7 @@ export default {
 </script>
 
 <template>
-  <woot-reports
+  <WootReports
     key="agent-reports"
     type="agent"
     getter-key="agents/getAgents"
diff --git a/app/javascript/dashboard/routes/dashboard/settings/reports/BotReports.vue b/app/javascript/dashboard/routes/dashboard/settings/reports/BotReports.vue
index a023d7f75..eca7e14d8 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/reports/BotReports.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/reports/BotReports.vue
@@ -90,15 +90,15 @@ export default {
 </script>
 <template>
   <div class="flex-1 p-4 overflow-auto">
-    <report-filter-selector
+    <ReportFilterSelector
       :show-agents-filter="false"
       :show-group-by-filter="true"
       :show-business-hours-switch="false"
       @filter-change="onFilterChange"
     />
 
-    <bot-metrics :filters="requestPayload" />
-    <report-container
+    <BotMetrics :filters="requestPayload" />
+    <ReportContainer
       :group-by="groupBy"
       :report-keys="reportKeys"
       :account-summary-key="'getBotSummary'"
diff --git a/app/javascript/dashboard/routes/dashboard/settings/reports/CsatResponses.vue b/app/javascript/dashboard/routes/dashboard/settings/reports/CsatResponses.vue
index f96295e8d..f56b000e1 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/reports/CsatResponses.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/reports/CsatResponses.vue
@@ -108,7 +108,7 @@ export default {
 </script>
 <template>
   <div class="flex-1 p-4 overflow-auto">
-    <report-filter-selector
+    <ReportFilterSelector
       :show-agents-filter="true"
       :show-inbox-filter="true"
       :show-rating-filter="true"
@@ -124,7 +124,7 @@ export default {
     >
       {{ $t('CSAT_REPORTS.DOWNLOAD') }}
     </woot-button>
-    <csat-metrics :filters="requestPayload" />
-    <csat-table :page-index="pageIndex" @page-change="onPageNumberChange" />
+    <CsatMetrics :filters="requestPayload" />
+    <CsatTable :page-index="pageIndex" @page-change="onPageNumberChange" />
   </div>
 </template>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/reports/InboxReports.vue b/app/javascript/dashboard/routes/dashboard/settings/reports/InboxReports.vue
index 3535b3baf..96d573829 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/reports/InboxReports.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/reports/InboxReports.vue
@@ -9,7 +9,7 @@ export default {
 </script>
 
 <template>
-  <woot-reports
+  <WootReports
     key="inbox-reports"
     type="inbox"
     getter-key="inboxes/getInboxes"
diff --git a/app/javascript/dashboard/routes/dashboard/settings/reports/Index.vue b/app/javascript/dashboard/routes/dashboard/settings/reports/Index.vue
index 82de37445..730a3ccc8 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/reports/Index.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/reports/Index.vue
@@ -116,11 +116,11 @@ export default {
     >
       {{ $t('REPORT.DOWNLOAD_AGENT_REPORTS') }}
     </woot-button>
-    <report-filter-selector
+    <ReportFilterSelector
       :show-agents-filter="false"
       :show-group-by-filter="true"
       @filter-change="onFilterChange"
     />
-    <report-container :group-by="groupBy" />
+    <ReportContainer :group-by="groupBy" />
   </div>
 </template>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/reports/LabelReports.vue b/app/javascript/dashboard/routes/dashboard/settings/reports/LabelReports.vue
index f0500d1ff..d3792bd79 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/reports/LabelReports.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/reports/LabelReports.vue
@@ -9,7 +9,7 @@ export default {
 </script>
 
 <template>
-  <woot-reports
+  <WootReports
     key="label-reports"
     type="label"
     getter-key="labels/getLabels"
diff --git a/app/javascript/dashboard/routes/dashboard/settings/reports/LiveReports.vue b/app/javascript/dashboard/routes/dashboard/settings/reports/LiveReports.vue
index 98d1140b1..ca43f3c9f 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/reports/LiveReports.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/reports/LiveReports.vue
@@ -124,7 +124,7 @@ export default {
       <div
         class="flex-1 w-full max-w-full md:w-[65%] md:max-w-[65%] conversation-metric"
       >
-        <metric-card
+        <MetricCard
           :header="$t('OVERVIEW_REPORTS.ACCOUNT_CONVERSATIONS.HEADER')"
           :is-loading="uiFlags.isFetchingAccountConversationMetric"
           :loading-message="
@@ -141,10 +141,10 @@ export default {
             </h3>
             <p class="metric">{{ metric }}</p>
           </div>
-        </metric-card>
+        </MetricCard>
       </div>
       <div class="flex-1 w-full max-w-full md:w-[35%] md:max-w-[35%]">
-        <metric-card :header="$t('OVERVIEW_REPORTS.AGENT_STATUS.HEADER')">
+        <MetricCard :header="$t('OVERVIEW_REPORTS.AGENT_STATUS.HEADER')">
           <div
             v-for="(metric, name, index) in agentStatusMetrics"
             :key="index"
@@ -155,11 +155,11 @@ export default {
             </h3>
             <p class="metric">{{ metric }}</p>
           </div>
-        </metric-card>
+        </MetricCard>
       </div>
     </div>
     <div class="max-w-full flex flex-wrap flex-row ml-auto mr-auto">
-      <metric-card :header="$t('OVERVIEW_REPORTS.CONVERSATION_HEATMAP.HEADER')">
+      <MetricCard :header="$t('OVERVIEW_REPORTS.CONVERSATION_HEATMAP.HEADER')">
         <template #control>
           <woot-button
             icon="arrow-download"
@@ -171,22 +171,22 @@ export default {
             Download Report
           </woot-button>
         </template>
-        <report-heatmap
+        <ReportHeatmap
           :heat-data="accountConversationHeatmap"
           :is-loading="uiFlags.isFetchingAccountConversationsHeatmap"
         />
-      </metric-card>
+      </MetricCard>
     </div>
     <div class="max-w-full flex flex-wrap flex-row ml-auto mr-auto">
-      <metric-card :header="$t('OVERVIEW_REPORTS.AGENT_CONVERSATIONS.HEADER')">
-        <agent-table
+      <MetricCard :header="$t('OVERVIEW_REPORTS.AGENT_CONVERSATIONS.HEADER')">
+        <AgentTable
           :agents="agents"
           :agent-metrics="agentConversationMetric"
           :page-index="pageIndex"
           :is-loading="uiFlags.isFetchingAgentConversationMetric"
           @page-change="onPageNumberChange"
         />
-      </metric-card>
+      </MetricCard>
     </div>
   </div>
 </template>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/reports/ReportContainer.vue b/app/javascript/dashboard/routes/dashboard/settings/reports/ReportContainer.vue
index ab54bda83..f90c3730c 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/reports/ReportContainer.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/reports/ReportContainer.vue
@@ -128,7 +128,7 @@ export default {
       :key="metric.KEY"
       class="p-4 rounded-md mb-3"
     >
-      <chart-stats :metric="metric" :account-summary-key="accountSummaryKey" />
+      <ChartStats :metric="metric" :account-summary-key="accountSummaryKey" />
       <div class="mt-4 h-72">
         <woot-loading-state
           v-if="accountReport.isFetching[metric.KEY]"
diff --git a/app/javascript/dashboard/routes/dashboard/settings/reports/TeamReports.vue b/app/javascript/dashboard/routes/dashboard/settings/reports/TeamReports.vue
index e93ee2c3d..523186b8d 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/reports/TeamReports.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/reports/TeamReports.vue
@@ -9,7 +9,7 @@ export default {
 </script>
 
 <template>
-  <woot-reports
+  <WootReports
     key="team-reports"
     type="team"
     getter-key="teams/getTeams"
diff --git a/app/javascript/dashboard/routes/dashboard/settings/reports/components/BotMetrics.vue b/app/javascript/dashboard/routes/dashboard/settings/reports/components/BotMetrics.vue
index 46227f945..fe8e30ba8 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/reports/components/BotMetrics.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/reports/components/BotMetrics.vue
@@ -40,25 +40,25 @@ onMounted(fetchMetrics);
   <div
     class="flex flex-wrap mx-0 bg-white dark:bg-slate-800 rounded-[4px] p-4 mb-5 border border-solid border-slate-75 dark:border-slate-700"
   >
-    <report-metric-card
+    <ReportMetricCard
       :label="$t('BOT_REPORTS.METRIC.TOTAL_CONVERSATIONS.LABEL')"
       :info-text="$t('BOT_REPORTS.METRIC.TOTAL_CONVERSATIONS.TOOLTIP')"
       :value="conversationCount"
       class="flex-1"
     />
-    <report-metric-card
+    <ReportMetricCard
       :label="$t('BOT_REPORTS.METRIC.TOTAL_RESPONSES.LABEL')"
       :info-text="$t('BOT_REPORTS.METRIC.TOTAL_RESPONSES.TOOLTIP')"
       :value="messageCount"
       class="flex-1"
     />
-    <report-metric-card
+    <ReportMetricCard
       :label="$t('BOT_REPORTS.METRIC.RESOLUTION_RATE.LABEL')"
       :info-text="$t('BOT_REPORTS.METRIC.RESOLUTION_RATE.TOOLTIP')"
       :value="formatToPercent(resolutionRate)"
       class="flex-1"
     />
-    <report-metric-card
+    <ReportMetricCard
       :label="$t('BOT_REPORTS.METRIC.HANDOFF_RATE.LABEL')"
       :info-text="$t('BOT_REPORTS.METRIC.HANDOFF_RATE.TOOLTIP')"
       :value="formatToPercent(handoffRate)"
diff --git a/app/javascript/dashboard/routes/dashboard/settings/reports/components/CsatMetrics.vue b/app/javascript/dashboard/routes/dashboard/settings/reports/components/CsatMetrics.vue
index 21bb8e71e..c3e1ff98e 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/reports/components/CsatMetrics.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/reports/components/CsatMetrics.vue
@@ -59,20 +59,20 @@ export default {
   <div
     class="flex-col lg:flex-row flex flex-wrap mx-0 bg-white dark:bg-slate-800 rounded-[4px] p-4 mb-5 border border-solid border-slate-75 dark:border-slate-700"
   >
-    <csat-metric-card
+    <CsatMetricCard
       :label="$t('CSAT_REPORTS.METRIC.TOTAL_RESPONSES.LABEL')"
       :info-text="$t('CSAT_REPORTS.METRIC.TOTAL_RESPONSES.TOOLTIP')"
       :value="responseCount"
       class="xs:w-full sm:max-w-[50%] lg:w-1/6 lg:max-w-[16%]"
     />
-    <csat-metric-card
+    <CsatMetricCard
       :disabled="ratingFilterEnabled"
       :label="$t('CSAT_REPORTS.METRIC.SATISFACTION_SCORE.LABEL')"
       :info-text="$t('CSAT_REPORTS.METRIC.SATISFACTION_SCORE.TOOLTIP')"
       :value="ratingFilterEnabled ? '--' : formatToPercent(satisfactionScore)"
       class="xs:w-full sm:max-w-[50%] lg:w-1/6 lg:max-w-[16%]"
     />
-    <csat-metric-card
+    <CsatMetricCard
       :label="$t('CSAT_REPORTS.METRIC.RESPONSE_RATE.LABEL')"
       :info-text="$t('CSAT_REPORTS.METRIC.RESPONSE_RATE.TOOLTIP')"
       :value="formatToPercent(responseRate)"
diff --git a/app/javascript/dashboard/routes/dashboard/settings/reports/components/CsatTable.vue b/app/javascript/dashboard/routes/dashboard/settings/reports/components/CsatTable.vue
index 5db684e44..aabc151ff 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/reports/components/CsatTable.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/reports/components/CsatTable.vue
@@ -128,7 +128,7 @@ export default {
 </script>
 <template>
   <div class="csat--table-container">
-    <ve-table
+    <VeTable
       max-height="calc(100vh - 21.875rem)"
       :fixed-header="true"
       :border-around="true"
@@ -139,7 +139,7 @@ export default {
       {{ $t('CSAT_REPORTS.NO_RECORDS') }}
     </div>
     <div v-if="metrics.totalResponseCount" class="table-pagination">
-      <ve-pagination
+      <VePagination
         :total="metrics.totalResponseCount"
         :page-index="pageIndex"
         :page-size="25"
diff --git a/app/javascript/dashboard/routes/dashboard/settings/reports/components/FilterSelector.vue b/app/javascript/dashboard/routes/dashboard/settings/reports/components/FilterSelector.vue
index 16847fecb..c9e94dc7b 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/reports/components/FilterSelector.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/reports/components/FilterSelector.vue
@@ -184,8 +184,8 @@ export default {
     <div
       class="w-full grid gap-y-2 gap-x-1.5 grid-cols-[repeat(auto-fill,minmax(250px,1fr))]"
     >
-      <reports-filters-date-range @on-range-change="onDateRangeChange" />
-      <woot-date-range-picker
+      <ReportsFiltersDateRange @on-range-change="onDateRangeChange" />
+      <WootDateRangePicker
         v-if="isDateRangeSelected"
         show-range
         class="no-margin auto-width"
@@ -194,29 +194,29 @@ export default {
         :placeholder="$t('REPORT.CUSTOM_DATE_RANGE.PLACEHOLDER')"
         @change="onCustomDateRangeChange"
       />
-      <reports-filters-date-group-by
+      <ReportsFiltersDateGroupBy
         v-if="showGroupByFilter && isGroupByPossible"
         :valid-group-options="validGroupOptions"
         :selected-option="selectedGroupByFilter"
         @on-grouping-change="onGroupingChange"
       />
-      <reports-filters-agents
+      <ReportsFiltersAgents
         v-if="showAgentsFilter"
         @agents-filter-selection="handleAgentsFilterSelection"
       />
-      <reports-filters-labels
+      <ReportsFiltersLabels
         v-if="showLabelsFilter"
         @labels-filter-selection="handleLabelsFilterSelection"
       />
-      <reports-filters-teams
+      <ReportsFiltersTeams
         v-if="showTeamFilter"
         @team-filter-selection="handleTeamFilterSelection"
       />
-      <reports-filters-inboxes
+      <ReportsFiltersInboxes
         v-if="showInboxFilter"
         @inbox-filter-selection="handleInboxFilterSelection"
       />
-      <reports-filters-ratings
+      <ReportsFiltersRatings
         v-if="showRatingFilter"
         @rating-filter-selection="handleRatingFilterSelection"
       />
diff --git a/app/javascript/dashboard/routes/dashboard/settings/reports/components/Filters/v3/ActiveFilterChip.vue b/app/javascript/dashboard/routes/dashboard/settings/reports/components/Filters/v3/ActiveFilterChip.vue
index 623c15026..bf98c5d44 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/reports/components/Filters/v3/ActiveFilterChip.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/reports/components/Filters/v3/ActiveFilterChip.vue
@@ -50,14 +50,14 @@ const closeDropdown = () => emit('closeDropdown');
 </script>
 
 <template>
-  <filter-button
+  <FilterButton
     right-icon="chevron-down"
     :button-text="name"
     class="bg-slate-50 dark:bg-slate-800 hover:bg-slate-75 dark:hover:bg-slate-800"
     @click="toggleDropdown"
   >
     <template v-if="showMenu && activeFilterType === type" #dropdown>
-      <filter-list-dropdown
+      <FilterListDropdown
         v-if="options"
         v-on-clickaway="closeDropdown"
         show-clear-filter
@@ -70,5 +70,5 @@ const closeDropdown = () => emit('closeDropdown');
         @removeFilter="removeFilter"
       />
     </template>
-  </filter-button>
+  </FilterButton>
 </template>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/reports/components/Filters/v3/AddFilterChip.vue b/app/javascript/dashboard/routes/dashboard/settings/reports/components/Filters/v3/AddFilterChip.vue
index c35bdb061..6b3ad1833 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/reports/components/Filters/v3/AddFilterChip.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/reports/components/Filters/v3/AddFilterChip.vue
@@ -58,19 +58,19 @@ const closeDropdown = () => {
 </script>
 
 <template>
-  <filter-button :button-text="name" left-icon="filter" @click="toggleDropdown">
+  <FilterButton :button-text="name" left-icon="filter" @click="toggleDropdown">
     <!-- Dropdown with search and sub-dropdown -->
     <template v-if="showMenu" #dropdown>
-      <filter-list-dropdown
+      <FilterListDropdown
         v-on-clickaway="closeDropdown"
         class="left-0 md:right-0 top-10"
       >
         <template #listItem>
-          <filter-dropdown-empty-state
+          <FilterDropdownEmptyState
             v-if="!menuOption.length"
             :message="emptyStateMessage"
           />
-          <filter-list-item-button
+          <FilterListItemButton
             v-for="item in menuOption"
             :key="item.id"
             :button-text="item.name"
@@ -80,7 +80,7 @@ const closeDropdown = () => {
           >
             <!-- Submenu with search and clear button  -->
             <template v-if="item.options && isHovered(item.id)" #dropdown>
-              <filter-list-dropdown
+              <FilterListDropdown
                 :list-items="item.options"
                 :input-placeholder="
                   $t(`${placeholderI18nKey}.${item.type.toUpperCase()}`)
@@ -90,9 +90,9 @@ const closeDropdown = () => {
                 @click="addFilter"
               />
             </template>
-          </filter-list-item-button>
+          </FilterListItemButton>
         </template>
-      </filter-list-dropdown>
+      </FilterListDropdown>
     </template>
-  </filter-button>
+  </FilterButton>
 </template>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/reports/components/ReportFilters.vue b/app/javascript/dashboard/routes/dashboard/settings/reports/components/ReportFilters.vue
index 76cd64be7..a209f92b2 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/reports/components/ReportFilters.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/reports/components/ReportFilters.vue
@@ -161,7 +161,7 @@ export default {
         >
           <template slot="singleLabel" slot-scope="props">
             <div class="flex items-center gap-2">
-              <thumbnail
+              <Thumbnail
                 :src="props.option.thumbnail"
                 :status="props.option.availability_status"
                 :username="props.option.name"
@@ -176,7 +176,7 @@ export default {
           </template>
           <template slot="option" slot-scope="props">
             <div class="flex items-center gap-2">
-              <thumbnail
+              <Thumbnail
                 :src="props.option.thumbnail"
                 :status="props.option.availability_status"
                 :username="props.option.name"
@@ -283,7 +283,7 @@ export default {
         <p class="text-xs mb-2 font-medium">
           {{ $t('REPORT.CUSTOM_DATE_RANGE.PLACEHOLDER') }}
         </p>
-        <woot-date-range-picker
+        <WootDateRangePicker
           show-range
           :value="customDateRange"
           :confirm-text="$t('REPORT.CUSTOM_DATE_RANGE.CONFIRM')"
diff --git a/app/javascript/dashboard/routes/dashboard/settings/reports/components/SLA/SLAFilter.vue b/app/javascript/dashboard/routes/dashboard/settings/reports/components/SLA/SLAFilter.vue
index 3703a86c0..849b6e25c 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/reports/components/SLA/SLAFilter.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/reports/components/SLA/SLAFilter.vue
@@ -157,7 +157,7 @@ export default {
   >
     <!-- Active filters section -->
     <div v-if="hasActiveFilters" class="flex flex-wrap gap-2 md:flex-nowrap">
-      <active-filter-chip
+      <ActiveFilterChip
         v-for="filter in activeFilters"
         v-bind="filter"
         :key="filter.type"
@@ -182,7 +182,7 @@ export default {
     />
     <!-- Add filter and clear filter button -->
     <div class="flex items-center gap-2">
-      <add-filter-chip
+      <AddFilterChip
         v-if="!isAllFilterSelected"
         placeholder-i18n-key="SLA_REPORTS.DROPDOWN.INPUT_PLACEHOLDER"
         :name="$t('SLA_REPORTS.DROPDOWN.ADD_FIlTER')"
@@ -200,7 +200,7 @@ export default {
         class="w-px h-5 border border-slate-75 dark:border-slate-800"
       />
       <!-- Clear all filter button -->
-      <filter-button
+      <FilterButton
         v-if="hasActiveFilters"
         :button-text="$t('SLA_REPORTS.DROPDOWN.CLEAR_ALL')"
         @click="clearAllFilters"
diff --git a/app/javascript/dashboard/routes/dashboard/settings/reports/components/SLA/SLAReportFilters.vue b/app/javascript/dashboard/routes/dashboard/settings/reports/components/SLA/SLAReportFilters.vue
index 548e39aed..af6f42076 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/reports/components/SLA/SLAReportFilters.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/reports/components/SLA/SLAReportFilters.vue
@@ -66,6 +66,6 @@ export default {
 <template>
   <div class="flex flex-col flex-wrap w-full gap-3 md:flex-row">
     <woot-date-picker @dateRangeChanged="onDateRangeChange" />
-    <SLA-filter @filter-change="emitFilterChange" />
+    <SLAFilter @filter-change="emitFilterChange" />
   </div>
 </template>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/reports/components/SLA/SLAReportItem.vue b/app/javascript/dashboard/routes/dashboard/settings/reports/components/SLA/SLAReportItem.vue
index 129265cdf..cc62aaac5 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/reports/components/SLA/SLAReportItem.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/reports/components/SLA/SLAReportItem.vue
@@ -36,7 +36,7 @@ defineProps({
       <span class="text-slate-700 dark:text-slate-200 capitalize truncate">{{
         conversation.contact.name
       }}</span>
-      <card-labels
+      <CardLabels
         class="w-[80%]"
         :conversation-id="conversationId"
         :conversation-labels="conversation.labels"
@@ -48,7 +48,7 @@ defineProps({
       {{ slaName }}
     </div>
     <div class="flex items-center gap-2 col-span-2">
-      <user-avatar-with-name
+      <UserAvatarWithName
         v-if="conversation.assignee"
         :user="conversation.assignee"
       />
diff --git a/app/javascript/dashboard/routes/dashboard/settings/reports/components/SLA/SLATable.vue b/app/javascript/dashboard/routes/dashboard/settings/reports/components/SLA/SLATable.vue
index b9f99fd51..7fd9fe957 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/reports/components/SLA/SLATable.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/reports/components/SLA/SLATable.vue
@@ -61,30 +61,30 @@ export default {
       <div
         class="grid content-center h-12 grid-cols-12 gap-4 px-6 py-0 border-b bg-slate-25 border-slate-75 dark:border-slate-800 rounded-t-xl dark:bg-slate-900"
       >
-        <table-header-cell
+        <TableHeaderCell
           :span="6"
           :label="$t('SLA_REPORTS.TABLE.HEADER.CONVERSATION')"
         />
-        <table-header-cell
+        <TableHeaderCell
           :span="2"
           :label="$t('SLA_REPORTS.TABLE.HEADER.POLICY')"
         />
-        <table-header-cell
+        <TableHeaderCell
           :span="2"
           :label="$t('SLA_REPORTS.TABLE.HEADER.AGENT')"
         />
-        <table-header-cell :span="2" label="" />
+        <TableHeaderCell :span="2" label="" />
       </div>
 
       <div
         v-if="isLoading"
         class="flex items-center rounded-b-xl justify-center h-32 bg-white dark:bg-slate-900"
       >
-        <spinner />
+        <Spinner />
         <span>{{ $t('SLA_REPORTS.LOADING') }}</span>
       </div>
       <div v-else-if="slaReports.length > 0">
-        <SLA-report-item
+        <SLAReportItem
           v-for="slaReport in slaReports"
           :key="slaReport.applied_sla.id"
           :sla-name="slaReport.applied_sla.sla_name"
@@ -100,7 +100,7 @@ export default {
         {{ $t('SLA_REPORTS.NO_RECORDS') }}
       </div>
     </div>
-    <table-footer
+    <TableFooter
       v-if="shouldShowFooter"
       :current-page="currentPage"
       :total-count="totalCount"
diff --git a/app/javascript/dashboard/routes/dashboard/settings/reports/components/SLA/SLAViewDetails.vue b/app/javascript/dashboard/routes/dashboard/settings/reports/components/SLA/SLAViewDetails.vue
index cd415e41d..ff84c2f1c 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/reports/components/SLA/SLAViewDetails.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/reports/components/SLA/SLAViewDetails.vue
@@ -41,7 +41,7 @@ export default {
         >
           {{ $t('SLA_REPORTS.TABLE.VIEW_DETAILS') }}
         </woot-button>
-        <SLA-popover-card
+        <SLAPopoverCard
           v-if="showSlaPopoverCard"
           :sla-missed-events="slaEvents"
           class="right-0"
diff --git a/app/javascript/dashboard/routes/dashboard/settings/reports/components/WootReports.vue b/app/javascript/dashboard/routes/dashboard/settings/reports/components/WootReports.vue
index a2991f19e..67293c230 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/reports/components/WootReports.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/reports/components/WootReports.vue
@@ -190,7 +190,7 @@ export default {
     >
       {{ downloadButtonLabel }}
     </woot-button>
-    <report-filters
+    <ReportFilters
       v-if="filterItemsList"
       :type="type"
       :filter-items-list="filterItemsList"
@@ -201,6 +201,6 @@ export default {
       @group-by-filter-change="onGroupByFilterChange"
       @business-hours-toggle="onBusinessHoursToggle"
     />
-    <report-container v-if="filterItemsList.length" :group-by="groupBy" />
+    <ReportContainer v-if="filterItemsList.length" :group-by="groupBy" />
   </div>
 </template>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/reports/components/overview/AgentTable.vue b/app/javascript/dashboard/routes/dashboard/settings/reports/components/overview/AgentTable.vue
index c4c233354..7f89ce17e 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/reports/components/overview/AgentTable.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/reports/components/overview/AgentTable.vue
@@ -110,24 +110,24 @@ export default {
 
 <template>
   <div class="agent-table-container">
-    <ve-table
+    <VeTable
       max-height="calc(100vh - 21.875rem)"
       :fixed-header="true"
       :columns="columns"
       :table-data="tableData"
     />
     <div v-if="isLoading" class="agents-loader">
-      <spinner />
+      <Spinner />
       <span>{{
         $t('OVERVIEW_REPORTS.AGENT_CONVERSATIONS.LOADING_MESSAGE')
       }}</span>
     </div>
-    <empty-state
+    <EmptyState
       v-else-if="!isLoading && !agentMetrics.length"
       :title="$t('OVERVIEW_REPORTS.AGENT_CONVERSATIONS.NO_AGENTS')"
     />
     <div v-if="agentMetrics.length > 0" class="table-pagination">
-      <ve-pagination
+      <VePagination
         :total="agents.length"
         :page-index="pageIndex"
         :page-size="25"
diff --git a/app/javascript/dashboard/routes/dashboard/settings/reports/components/overview/MetricCard.vue b/app/javascript/dashboard/routes/dashboard/settings/reports/components/overview/MetricCard.vue
index 74f0f2ea4..7e350cc02 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/reports/components/overview/MetricCard.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/reports/components/overview/MetricCard.vue
@@ -60,7 +60,7 @@ export default {
       v-else-if="isLoading"
       class="items-center flex text-base justify-center px-12 py-6"
     >
-      <spinner />
+      <Spinner />
       <span class="text-slate-300 dark:text-slate-200">
         {{ loadingMessage }}
       </span>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/sla/AddSLA.vue b/app/javascript/dashboard/routes/dashboard/settings/sla/AddSLA.vue
index 4b277e255..c4d594ee0 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/sla/AddSLA.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/sla/AddSLA.vue
@@ -37,7 +37,7 @@ export default {
       :header-title="$t('SLA.ADD.TITLE')"
       :header-content="$t('SLA.ADD.DESC')"
     />
-    <sla-form
+    <SlaForm
       :submit-label="$t('SLA.FORM.CREATE')"
       @submit="addSLA"
       @close="onClose"
diff --git a/app/javascript/dashboard/routes/dashboard/settings/sla/Index.vue b/app/javascript/dashboard/routes/dashboard/settings/sla/Index.vue
index c15db8c7a..bcd3a356f 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/sla/Index.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/sla/Index.vue
@@ -114,12 +114,12 @@ export default {
 };
 </script>
 <template>
-  <settings-layout
+  <SettingsLayout
     :is-loading="uiFlags.isFetching"
     :loading-message="$t('SLA.LOADING')"
   >
     <template #header>
-      <SLA-header :show-actions="records.length > 0" @click="openAddPopup" />
+      <SLAHeader :show-actions="records.length > 0" @click="openAddPopup" />
     </template>
     <template #loading>
       <SLAListItemLoading v-for="ii in 2" :key="ii" class="mb-3" />
@@ -136,7 +136,7 @@ export default {
         @primary-action="openAddPopup"
       />
       <div v-else class="flex flex-col w-full h-full gap-3">
-        <SLA-list-item
+        <SLAListItem
           v-for="sla in records"
           :key="sla.title"
           :sla-name="sla.name"
@@ -151,7 +151,7 @@ export default {
       </div>
 
       <woot-modal :show.sync="showAddPopup" :on-close="hideAddPopup">
-        <add-SLA @close="hideAddPopup" />
+        <AddSLA @close="hideAddPopup" />
       </woot-modal>
 
       <woot-delete-modal
@@ -165,5 +165,5 @@ export default {
         :reject-text="deleteRejectText"
       />
     </template>
-  </settings-layout>
+  </SettingsLayout>
 </template>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/sla/SlaForm.vue b/app/javascript/dashboard/routes/dashboard/settings/sla/SlaForm.vue
index 23ec4894c..e559e96cc 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/sla/SlaForm.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/sla/SlaForm.vue
@@ -181,7 +181,7 @@ export default {
         :placeholder="$t('SLA.FORM.DESCRIPTION.PLACEHOLDER')"
       />
 
-      <sla-time-input
+      <SlaTimeInput
         v-for="(input, index) in slaTimeInputs"
         :key="index"
         :threshold="input.threshold"
diff --git a/app/javascript/dashboard/routes/dashboard/settings/sla/components/BaseEmptyState.vue b/app/javascript/dashboard/routes/dashboard/settings/sla/components/BaseEmptyState.vue
index eb8bfd65a..2711658ad 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/sla/components/BaseEmptyState.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/sla/components/BaseEmptyState.vue
@@ -5,7 +5,7 @@ import SLAListItem from './SLAListItem.vue';
 <template>
   <div class="w-full min-h-[12rem] relative">
     <div class="w-full space-y-3">
-      <SLA-list-item
+      <SLAListItem
         class="opacity-25 dark:opacity-20"
         :sla-name="$t('SLA.LIST.EMPTY.TITLE_1')"
         :description="$t('SLA.LIST.EMPTY.DESC_1')"
@@ -14,7 +14,7 @@ import SLAListItem from './SLAListItem.vue';
         resolution-time="24h"
         has-business-hours
       />
-      <SLA-list-item
+      <SLAListItem
         class="opacity-25 dark:opacity-20"
         :sla-name="$t('SLA.LIST.EMPTY.TITLE_2')"
         :description="$t('SLA.LIST.EMPTY.DESC_2')"
diff --git a/app/javascript/dashboard/routes/dashboard/settings/sla/components/SLAEmptyState.vue b/app/javascript/dashboard/routes/dashboard/settings/sla/components/SLAEmptyState.vue
index cfb40dbdc..29b655e5e 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/sla/components/SLAEmptyState.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/sla/components/SLAEmptyState.vue
@@ -6,7 +6,7 @@ const primaryAction = () => emit('primary-action');
 </script>
 
 <template>
-  <base-empty-state>
+  <BaseEmptyState>
     <p class="max-w-xs text-sm font-medium text-center">
       {{ $t('SLA.LIST.404') }}
     </p>
@@ -18,5 +18,5 @@ const primaryAction = () => emit('primary-action');
     >
       {{ $t('SLA.ADD_ACTION_LONG') }}
     </woot-button>
-  </base-empty-state>
+  </BaseEmptyState>
 </template>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/sla/components/SLAListItem.vue b/app/javascript/dashboard/routes/dashboard/settings/sla/components/SLAListItem.vue
index 08e66dbfe..5c847c5c2 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/sla/components/SLAListItem.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/sla/components/SLAListItem.vue
@@ -35,21 +35,21 @@ defineProps({
 });
 </script>
 <template>
-  <base-settings-list-item
+  <BaseSettingsListItem
     class="sm:divide-x sm:divide-slate-75 sm:dark:divide-slate-700/50"
     :title="slaName"
     :description="description"
   >
     <template #label>
-      <SLA-business-hours-label :has-business-hours="hasBusinessHours" />
+      <SLABusinessHoursLabel :has-business-hours="hasBusinessHours" />
     </template>
     <template #rightSection>
       <div
         class="flex items-center divide-x rtl:divide-x-reverse sm:rtl:!border-l-0 sm:rtl:!border-r sm:rtl:border-solid sm:rtl:border-slate-75 sm:rtl:dark:border-slate-700/50 gap-1.5 w-fit sm:w-full sm:gap-0 sm:justify-between divide-slate-75 dark:divide-slate-700/50"
       >
-        <SLA-response-time response-type="FRT" :response-time="firstResponse" />
-        <SLA-response-time response-type="NRT" :response-time="nextResponse" />
-        <SLA-response-time response-type="RT" :response-time="resolutionTime" />
+        <SLAResponseTime response-type="FRT" :response-time="firstResponse" />
+        <SLAResponseTime response-type="NRT" :response-time="nextResponse" />
+        <SLAResponseTime response-type="RT" :response-time="resolutionTime" />
       </div>
     </template>
     <template #actions>
@@ -64,5 +64,5 @@ defineProps({
         @click="$emit('click')"
       />
     </template>
-  </base-settings-list-item>
+  </BaseSettingsListItem>
 </template>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/sla/components/SLAListItemLoading.vue b/app/javascript/dashboard/routes/dashboard/settings/sla/components/SLAListItemLoading.vue
index 9041d6a2d..52169a596 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/sla/components/SLAListItemLoading.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/sla/components/SLAListItemLoading.vue
@@ -2,7 +2,7 @@
 import BaseSettingsListItem from '../../components/BaseSettingsListItem.vue';
 </script>
 <template>
-  <base-settings-list-item class="opacity-50">
+  <BaseSettingsListItem class="opacity-50">
     <template #title>
       <div
         class="w-24 h-[26px] rounded-md bg-slate-50 dark:bg-slate-700 animate-pulse"
@@ -36,5 +36,5 @@ import BaseSettingsListItem from '../../components/BaseSettingsListItem.vue';
         </div>
       </div>
     </template>
-  </base-settings-list-item>
+  </BaseSettingsListItem>
 </template>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/sla/components/SLAPaywallEnterprise.vue b/app/javascript/dashboard/routes/dashboard/settings/sla/components/SLAPaywallEnterprise.vue
index 6c69baa4c..6c3ac5368 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/sla/components/SLAPaywallEnterprise.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/sla/components/SLAPaywallEnterprise.vue
@@ -17,7 +17,7 @@ const i18nKey = props.isOnChatwootCloud ? 'PAYWALL' : 'ENTERPRISE_PAYWALL';
 </script>
 
 <template>
-  <base-empty-state>
+  <BaseEmptyState>
     <div
       class="flex flex-col max-w-md px-6 py-6 bg-white border shadow dark:bg-slate-800 rounded-xl border-slate-100 dark:border-slate-900"
     >
@@ -72,5 +72,5 @@ const i18nKey = props.isOnChatwootCloud ? 'PAYWALL' : 'ENTERPRISE_PAYWALL';
         </a>
       </template>
     </div>
-  </base-empty-state>
+  </BaseEmptyState>
 </template>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/teams/AgentSelector.vue b/app/javascript/dashboard/routes/dashboard/settings/teams/AgentSelector.vue
index 61614f07b..a53479dc9 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/teams/AgentSelector.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/teams/AgentSelector.vue
@@ -110,7 +110,7 @@ export default {
           </td>
           <td>
             <div class="flex items-center gap-2">
-              <thumbnail
+              <Thumbnail
                 :src="agent.thumbnail"
                 size="24px"
                 :username="agent.name"
diff --git a/app/javascript/dashboard/routes/dashboard/settings/teams/Create/AddAgents.vue b/app/javascript/dashboard/routes/dashboard/settings/teams/Create/AddAgents.vue
index eb936b704..fa9145d5f 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/teams/Create/AddAgents.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/teams/Create/AddAgents.vue
@@ -102,7 +102,7 @@ export default {
       @submit.prevent="addAgents"
     >
       <div class="w-full">
-        <page-header
+        <PageHeader
           :header-title="headerTitle"
           :header-content="$t('TEAMS_SETTINGS.ADD.DESC')"
         />
@@ -114,7 +114,7 @@ export default {
             {{ $t('TEAMS_SETTINGS.ADD.AGENT_VALIDATION_ERROR') }}
           </p>
         </div>
-        <agent-selector
+        <AgentSelector
           :agent-list="agentList"
           :selected-agents="selectedAgents"
           :update-selected-agents="updateSelectedAgents"
diff --git a/app/javascript/dashboard/routes/dashboard/settings/teams/Create/CreateTeam.vue b/app/javascript/dashboard/routes/dashboard/settings/teams/Create/CreateTeam.vue
index 420542684..52e235c48 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/teams/Create/CreateTeam.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/teams/Create/CreateTeam.vue
@@ -40,12 +40,12 @@ export default {
   <div
     class="border border-slate-25 dark:border-slate-800/60 bg-white dark:bg-slate-900 h-full p-6 w-full max-w-full md:w-3/4 md:max-w-[75%] flex-shrink-0 flex-grow-0"
   >
-    <page-header
+    <PageHeader
       :header-title="$t('TEAMS_SETTINGS.CREATE_FLOW.CREATE.TITLE')"
       :header-content="$t('TEAMS_SETTINGS.CREATE_FLOW.CREATE.DESC')"
     />
     <div class="flex flex-wrap">
-      <team-form
+      <TeamForm
         :on-submit="createTeam"
         :submit-in-progress="false"
         :submit-button-text="$t('TEAMS_SETTINGS.FORM.SUBMIT_CREATE')"
diff --git a/app/javascript/dashboard/routes/dashboard/settings/teams/Edit/EditAgents.vue b/app/javascript/dashboard/routes/dashboard/settings/teams/Edit/EditAgents.vue
index 9573a2ed5..eadf74e2d 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/teams/Edit/EditAgents.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/teams/Edit/EditAgents.vue
@@ -118,7 +118,7 @@ export default {
       @submit.prevent="addAgents"
     >
       <div class="w-full">
-        <page-header
+        <PageHeader
           :header-title="headerTitle"
           :header-content="$t('TEAMS_SETTINGS.EDIT_FLOW.AGENTS.DESC')"
         />
@@ -130,7 +130,7 @@ export default {
             {{ $t('TEAMS_SETTINGS.ADD.AGENT_VALIDATION_ERROR') }}
           </p>
         </div>
-        <agent-selector
+        <AgentSelector
           v-if="showAgentsList"
           :agent-list="agentList"
           :selected-agents="selectedAgents"
@@ -140,7 +140,7 @@ export default {
             $t('TEAMS_SETTINGS.EDIT_FLOW.AGENTS.BUTTON_TEXT')
           "
         />
-        <spinner v-else />
+        <Spinner v-else />
       </div>
     </form>
   </div>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/teams/Edit/EditTeam.vue b/app/javascript/dashboard/routes/dashboard/settings/teams/Edit/EditTeam.vue
index 7709d129c..ebe1e9c96 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/teams/Edit/EditTeam.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/teams/Edit/EditTeam.vue
@@ -60,19 +60,19 @@ export default {
   <div
     class="border border-slate-25 dark:border-slate-800/60 bg-white dark:bg-slate-900 h-full p-6 w-full max-w-full md:w-3/4 md:max-w-[75%] flex-shrink-0 flex-grow-0"
   >
-    <page-header
+    <PageHeader
       :header-title="$t('TEAMS_SETTINGS.EDIT_FLOW.CREATE.TITLE')"
       :header-content="$t('TEAMS_SETTINGS.EDIT_FLOW.CREATE.DESC')"
     />
     <div class="flex flex-wrap">
-      <team-form
+      <TeamForm
         v-if="showTeamForm"
         :on-submit="updateTeam"
         :submit-in-progress="false"
         :submit-button-text="$t('TEAMS_SETTINGS.EDIT_FLOW.CREATE.BUTTON_TEXT')"
         :form-data="teamData"
       />
-      <spinner v-else />
+      <Spinner v-else />
     </div>
   </div>
 </template>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/teams/FinishSetup.vue b/app/javascript/dashboard/routes/dashboard/settings/teams/FinishSetup.vue
index 625597410..b68652314 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/teams/FinishSetup.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/teams/FinishSetup.vue
@@ -12,7 +12,7 @@ export default {
   <div
     class="border border-slate-25 dark:border-slate-800/60 bg-white dark:bg-slate-900 h-full p-6 w-full max-w-full md:w-3/4 md:max-w-[75%] flex-shrink-0 flex-grow-0"
   >
-    <empty-state
+    <EmptyState
       :title="$t('TEAMS_SETTINGS.FINISH.TITLE')"
       :message="$t('TEAMS_SETTINGS.FINISH.MESSAGE')"
       :button-text="$t('TEAMS_SETTINGS.FINISH.BUTTON_TEXT')"
@@ -27,6 +27,6 @@ export default {
           {{ $t('TEAMS_SETTINGS.FINISH.BUTTON_TEXT') }}
         </router-link>
       </div>
-    </empty-state>
+    </EmptyState>
   </div>
 </template>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/teams/TeamForm.vue b/app/javascript/dashboard/routes/dashboard/settings/teams/TeamForm.vue
index f23f6084e..66c445fbe 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/teams/TeamForm.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/teams/TeamForm.vue
@@ -90,7 +90,7 @@ export default {
         </div>
         <div class="flex flex-row justify-end gap-2 py-2 px-0 w-full">
           <div class="w-full">
-            <woot-submit-button
+            <WootSubmitButton
               :disabled="v$.title.$invalid || submitInProgress"
               :button-text="submitButtonText"
               :loading="submitInProgress"
diff --git a/app/javascript/dashboard/routes/dashboard/suspended/Index.vue b/app/javascript/dashboard/routes/dashboard/suspended/Index.vue
index 550a02a23..c52a32a1f 100644
--- a/app/javascript/dashboard/routes/dashboard/suspended/Index.vue
+++ b/app/javascript/dashboard/routes/dashboard/suspended/Index.vue
@@ -22,7 +22,7 @@ onMounted(() => {
 
 <template>
   <div class="items-center bg-slate-50 flex justify-center h-full w-full">
-    <empty-state
+    <EmptyState
       :title="$t('APP_GLOBAL.ACCOUNT_SUSPENDED.TITLE')"
       :message="$t('APP_GLOBAL.ACCOUNT_SUSPENDED.MESSAGE')"
     />
diff --git a/app/javascript/portal/components/PublicArticleSearch.vue b/app/javascript/portal/components/PublicArticleSearch.vue
index ff116c6e0..c5a3b8761 100644
--- a/app/javascript/portal/components/PublicArticleSearch.vue
+++ b/app/javascript/portal/components/PublicArticleSearch.vue
@@ -100,7 +100,7 @@ export default {
 
 <template>
   <div v-on-clickaway="closeSearch" class="max-w-5xl w-full relative my-4">
-    <public-search-input
+    <PublicSearchInput
       v-model="searchTerm"
       :search-placeholder="searchTranslations.searchPlaceholder"
       @focus="openSearch"
@@ -110,7 +110,7 @@ export default {
       class="absolute top-14 w-full"
       @mouseover="openSearch"
     >
-      <search-suggestions
+      <SearchSuggestions
         :items="searchResults"
         :is-loading="isLoading"
         :search-term="searchTerm"
diff --git a/app/javascript/portal/components/PublicSearchInput.vue b/app/javascript/portal/components/PublicSearchInput.vue
index cdcd6534d..08dd5e1cf 100644
--- a/app/javascript/portal/components/PublicSearchInput.vue
+++ b/app/javascript/portal/components/PublicSearchInput.vue
@@ -44,7 +44,7 @@ export default {
       'border-slate-50 dark:border-slate-800 shadow-sm': !isFocused,
     }"
   >
-    <fluent-icon icon="search" />
+    <FluentIcon icon="search" />
     <input
       :value="value"
       type="text"
diff --git a/app/javascript/shared/components/ChatCard.vue b/app/javascript/shared/components/ChatCard.vue
index 4d15b562c..c53a2b5dd 100644
--- a/app/javascript/shared/components/ChatCard.vue
+++ b/app/javascript/shared/components/ChatCard.vue
@@ -43,11 +43,7 @@ export default {
       <p class="body" :class="$dm('text-black-700', 'dark:text-slate-100')">
         {{ description }}
       </p>
-      <card-button
-        v-for="action in actions"
-        :key="action.id"
-        :action="action"
-      />
+      <CardButton v-for="action in actions" :key="action.id" :action="action" />
     </div>
   </div>
 </template>
diff --git a/app/javascript/shared/components/ChatOptions.vue b/app/javascript/shared/components/ChatOptions.vue
index a2c070707..85edb9772 100644
--- a/app/javascript/shared/components/ChatOptions.vue
+++ b/app/javascript/shared/components/ChatOptions.vue
@@ -50,7 +50,7 @@ export default {
         class="options"
         :class="{ 'has-selected': !!selected }"
       >
-        <chat-option
+        <ChatOption
           v-for="option in options"
           :key="option.id"
           :action="option"
diff --git a/app/javascript/shared/components/CustomerSatisfaction.vue b/app/javascript/shared/components/CustomerSatisfaction.vue
index 85357ea28..332892cd3 100644
--- a/app/javascript/shared/components/CustomerSatisfaction.vue
+++ b/app/javascript/shared/components/CustomerSatisfaction.vue
@@ -142,8 +142,8 @@ export default {
           color: textColor,
         }"
       >
-        <spinner v-if="isUpdating && feedback" />
-        <fluent-icon v-else icon="chevron-right" />
+        <Spinner v-if="isUpdating && feedback" />
+        <FluentIcon v-else icon="chevron-right" />
       </button>
     </form>
   </div>
diff --git a/app/javascript/shared/components/FluentIcon/DashboardIcon.vue b/app/javascript/shared/components/FluentIcon/DashboardIcon.vue
index e9bb16e69..3c6a24b86 100644
--- a/app/javascript/shared/components/FluentIcon/DashboardIcon.vue
+++ b/app/javascript/shared/components/FluentIcon/DashboardIcon.vue
@@ -35,7 +35,7 @@ export default {
 };
 </script>
 <template>
-  <base-icon
+  <BaseIcon
     :size="size"
     :icon="icon"
     :type="type"
diff --git a/app/javascript/shared/components/FluentIcon/Index.vue b/app/javascript/shared/components/FluentIcon/Index.vue
index 317555d1f..e16e11928 100644
--- a/app/javascript/shared/components/FluentIcon/Index.vue
+++ b/app/javascript/shared/components/FluentIcon/Index.vue
@@ -35,7 +35,7 @@ export default {
 };
 </script>
 <template>
-  <base-icon
+  <BaseIcon
     :size="size"
     :icon="icon"
     :type="type"
diff --git a/app/javascript/shared/components/GreetingsEditor.vue b/app/javascript/shared/components/GreetingsEditor.vue
index f33094b2f..31b72e3ef 100644
--- a/app/javascript/shared/components/GreetingsEditor.vue
+++ b/app/javascript/shared/components/GreetingsEditor.vue
@@ -49,7 +49,7 @@ export default {
       v-if="richtext"
       class="py-0 px-4 rounded-md border border-solid border-slate-200 dark:border-slate-600 bg-white dark:bg-slate-900 mt-0 mx-0 mb-4"
     >
-      <woot-message-editor
+      <WootMessageEditor
         v-model="greetingsMessage"
         :is-format-mode="true"
         :enable-variables="true"
@@ -59,7 +59,7 @@ export default {
         @input="handleInput"
       />
     </div>
-    <resizable-text-area
+    <ResizableTextArea
       v-else
       v-model="greetingsMessage"
       :rows="4"
diff --git a/app/javascript/shared/components/IframeLoader.vue b/app/javascript/shared/components/IframeLoader.vue
index c13c9871a..27d6a44c0 100644
--- a/app/javascript/shared/components/IframeLoader.vue
+++ b/app/javascript/shared/components/IframeLoader.vue
@@ -41,7 +41,7 @@ export default {
       @load="handleIframeLoad"
       @error="handleIframeError"
     />
-    <article-skeleton-loader
+    <ArticleSkeletonLoader
       v-if="isLoading"
       class="absolute w-full h-full top-0 left-0"
     />
diff --git a/app/javascript/shared/components/emoji/EmojiInput.vue b/app/javascript/shared/components/emoji/EmojiInput.vue
index 9a98ae4e6..0461a873b 100644
--- a/app/javascript/shared/components/emoji/EmojiInput.vue
+++ b/app/javascript/shared/components/emoji/EmojiInput.vue
@@ -141,7 +141,7 @@ export default {
         </div>
         <div v-if="hasEmptySearchResult" class="empty-message">
           <div class="emoji-icon">
-            <fluent-icon icon="emoji" size="48" />
+            <FluentIcon icon="emoji" size="48" />
           </div>
           <span class="empty-message--text">
             {{ $t('EMOJI.NOT_FOUND') }}
@@ -157,7 +157,7 @@ export default {
               :class="{ active: selectedKey === 'Search' }"
               @click="changeCategory('Search')"
             >
-              <fluent-icon
+              <FluentIcon
                 icon="search"
                 size="16"
                 class="text-slate-700 dark:text-slate-100"
diff --git a/app/javascript/shared/components/ui/MultiselectDropdown.vue b/app/javascript/shared/components/ui/MultiselectDropdown.vue
index 2c55cf96b..e3485617c 100644
--- a/app/javascript/shared/components/ui/MultiselectDropdown.vue
+++ b/app/javascript/shared/components/ui/MultiselectDropdown.vue
@@ -126,7 +126,7 @@ export default {
           @click="onCloseDropdown"
         />
       </div>
-      <multiselect-dropdown-items
+      <MultiselectDropdownItems
         v-if="showSearchDropdown"
         :options="options"
         :selected-items="[selectedItem]"
diff --git a/app/javascript/shared/components/ui/MultiselectDropdownItems.vue b/app/javascript/shared/components/ui/MultiselectDropdownItems.vue
index 9c02f347b..b853e4a0c 100644
--- a/app/javascript/shared/components/ui/MultiselectDropdownItems.vue
+++ b/app/javascript/shared/components/ui/MultiselectDropdownItems.vue
@@ -82,11 +82,8 @@ export default {
     </div>
     <div class="flex justify-start items-start flex-auto overflow-auto">
       <div class="w-full max-h-[10rem]">
-        <woot-dropdown-menu>
-          <woot-dropdown-item
-            v-for="option in filteredOptions"
-            :key="option.id"
-          >
+        <WootDropdownMenu>
+          <WootDropdownItem v-for="option in filteredOptions" :key="option.id">
             <woot-button
               class="multiselect-dropdown--item"
               :variant="isActive(option) ? 'hollow' : 'clear'"
@@ -118,8 +115,8 @@ export default {
                 </div>
               </div>
             </woot-button>
-          </woot-dropdown-item>
-        </woot-dropdown-menu>
+          </WootDropdownItem>
+        </WootDropdownMenu>
         <h4
           v-if="noResult"
           class="w-full justify-center items-center flex text-slate-500 dark:text-slate-300 py-2 px-2.5 overflow-hidden whitespace-nowrap text-ellipsis text-sm"
diff --git a/app/javascript/shared/components/ui/dropdown/DropdownSubMenu.vue b/app/javascript/shared/components/ui/dropdown/DropdownSubMenu.vue
index bbb6e66af..eb030e2ef 100644
--- a/app/javascript/shared/components/ui/dropdown/DropdownSubMenu.vue
+++ b/app/javascript/shared/components/ui/dropdown/DropdownSubMenu.vue
@@ -19,7 +19,7 @@ export default {
 <template>
   <li class="sub-menu-container">
     <ul class="sub-menu-li-container">
-      <woot-dropdown-header v-if="title" :title="title" />
+      <WootDropdownHeader v-if="title" :title="title" />
       <slot />
     </ul>
   </li>
diff --git a/app/javascript/shared/components/ui/label/LabelDropdown.vue b/app/javascript/shared/components/ui/label/LabelDropdown.vue
index 652721f4b..ffc8297df 100644
--- a/app/javascript/shared/components/ui/label/LabelDropdown.vue
+++ b/app/javascript/shared/components/ui/label/LabelDropdown.vue
@@ -115,11 +115,11 @@ export default {
       >
         {{ $t('CONTACT_PANEL.LABELS.LABEL_SELECT.TITLE') }}
       </h4>
-      <hotkey
+      <Hotkey
         custom-class="text-slate-800 dark:text-slate-100 bg-slate-50 dark:bg-slate-600 text-xxs border border-solid border-slate-75 dark:border-slate-600"
       >
         L
-      </hotkey>
+      </Hotkey>
     </div>
     <div class="mb-2 flex-shrink-0 flex-grow-0 flex-auto max-h-8">
       <input
@@ -136,7 +136,7 @@ export default {
     >
       <div class="w-full">
         <woot-dropdown-menu>
-          <label-dropdown-item
+          <LabelDropdownItem
             v-for="label in filteredActiveLabels"
             :key="label.title"
             :title="label.title"
@@ -173,7 +173,7 @@ export default {
             :show.sync="createModalVisible"
             :on-close="hideCreateModal"
           >
-            <add-label-modal
+            <AddLabelModal
               :prefill-title="parsedSearch"
               @close="hideCreateModal"
             />
diff --git a/app/javascript/survey/App.vue b/app/javascript/survey/App.vue
index e9127e4ad..32ebf2970 100755
--- a/app/javascript/survey/App.vue
+++ b/app/javascript/survey/App.vue
@@ -11,7 +11,7 @@ export default {
 
 <template>
   <div id="app" class="woot-survey-wrap">
-    <response />
+    <Response />
   </div>
 </template>
 
diff --git a/app/javascript/survey/components/Feedback.vue b/app/javascript/survey/components/Feedback.vue
index dc6d43951..d55e569c6 100644
--- a/app/javascript/survey/components/Feedback.vue
+++ b/app/javascript/survey/components/Feedback.vue
@@ -39,16 +39,16 @@ export default {
     <label class="text-base font-medium text-black-800">
       {{ $t('SURVEY.FEEDBACK.LABEL') }}
     </label>
-    <text-area
+    <TextArea
       v-model="feedback"
       class="my-5"
       :placeholder="$t('SURVEY.FEEDBACK.PLACEHOLDER')"
     />
     <div class="flex items-center font-medium float-right">
-      <custom-button @click="onClick">
-        <spinner v-if="feedback" class="p-0" />
+      <CustomButton @click="onClick">
+        <Spinner v-if="feedback" class="p-0" />
         {{ $t('SURVEY.FEEDBACK.BUTTON_TEXT') }}
-      </custom-button>
+      </CustomButton>
     </div>
   </div>
 </template>
diff --git a/app/javascript/survey/views/Response.vue b/app/javascript/survey/views/Response.vue
index 74059672e..efe706977 100644
--- a/app/javascript/survey/views/Response.vue
+++ b/app/javascript/survey/views/Response.vue
@@ -140,7 +140,7 @@ export default {
     v-if="isLoading"
     class="flex items-center justify-center flex-1 h-full bg-black-25"
   >
-    <spinner size="" />
+    <Spinner size="" />
   </div>
   <div
     v-else
@@ -157,7 +157,7 @@ export default {
         >
           {{ $t('SURVEY.DESCRIPTION', { inboxName }) }}
         </p>
-        <banner
+        <Banner
           v-if="shouldShowBanner"
           :show-success="shouldShowSuccessMesage"
           :show-error="shouldShowErrorMesage"
@@ -169,11 +169,11 @@ export default {
         >
           {{ $t('SURVEY.RATING.LABEL') }}
         </label>
-        <rating
+        <Rating
           :selected-rating="selectedRating"
           @selectRating="selectRating"
         />
-        <feedback
+        <Feedback
           v-if="enableFeedbackForm"
           :is-updating="isUpdating"
           :is-button-disabled="isButtonDisabled"
@@ -182,7 +182,7 @@ export default {
         />
       </div>
       <div class="mb-3">
-        <branding />
+        <Branding />
       </div>
     </div>
   </div>
diff --git a/app/javascript/v3/App.vue b/app/javascript/v3/App.vue
index 914fe3f78..7800c2d40 100644
--- a/app/javascript/v3/App.vue
+++ b/app/javascript/v3/App.vue
@@ -39,7 +39,7 @@ export default {
 <template>
   <div class="h-full w-full antialiased" :class="theme">
     <router-view />
-    <snackbar-container />
+    <SnackbarContainer />
   </div>
 </template>
 <style lang="scss">
diff --git a/app/javascript/v3/components/Button/SubmitButton.vue b/app/javascript/v3/components/Button/SubmitButton.vue
index dea0b41dc..474dde8c2 100644
--- a/app/javascript/v3/components/Button/SubmitButton.vue
+++ b/app/javascript/v3/components/Button/SubmitButton.vue
@@ -58,6 +58,6 @@ export default {
   >
     <span>{{ buttonText }}</span>
     <fluent-icon v-if="!!iconClass" :icon="iconClass" class="icon" />
-    <spinner v-if="loading" />
+    <Spinner v-if="loading" />
   </button>
 </template>
diff --git a/app/javascript/v3/components/Form/Input.vue b/app/javascript/v3/components/Form/Input.vue
index bd926d078..63af5dcdb 100644
--- a/app/javascript/v3/components/Form/Input.vue
+++ b/app/javascript/v3/components/Form/Input.vue
@@ -63,7 +63,7 @@ export default {
 };
 </script>
 <template>
-  <with-label
+  <WithLabel
     :label="label"
     :icon="icon"
     :name="name"
@@ -96,5 +96,5 @@ export default {
       @input="onInput"
       @blur="$emit('blur')"
     />
-  </with-label>
+  </WithLabel>
 </template>
diff --git a/app/javascript/v3/components/Form/ProfileAvatar.vue b/app/javascript/v3/components/Form/ProfileAvatar.vue
index 64ee9d4f3..58e4dcf1c 100644
--- a/app/javascript/v3/components/Form/ProfileAvatar.vue
+++ b/app/javascript/v3/components/Form/ProfileAvatar.vue
@@ -56,7 +56,7 @@ const onAvatarDelete = () => {
       @load="onImageLoad"
       @error="onImageLoadError"
     />
-    <initials-avatar v-else-if="!shouldShowImage" :name="name" :size="72" />
+    <InitialsAvatar v-else-if="!shouldShowImage" :name="name" :size="72" />
 
     <input
       ref="fileInputRef"
diff --git a/app/javascript/v3/components/Form/RadioTags.vue b/app/javascript/v3/components/Form/RadioTags.vue
index 9e0961381..db291cc5e 100644
--- a/app/javascript/v3/components/Form/RadioTags.vue
+++ b/app/javascript/v3/components/Form/RadioTags.vue
@@ -38,7 +38,7 @@ export default {
 </script>
 
 <template>
-  <with-label
+  <WithLabel
     :label="label"
     :name="name"
     :has-error="hasError"
@@ -56,5 +56,5 @@ export default {
         {{ option.label }}
       </woot-button>
     </div>
-  </with-label>
+  </WithLabel>
 </template>
diff --git a/app/javascript/v3/components/Form/Select.vue b/app/javascript/v3/components/Form/Select.vue
index 49c062118..1648526db 100644
--- a/app/javascript/v3/components/Form/Select.vue
+++ b/app/javascript/v3/components/Form/Select.vue
@@ -51,7 +51,7 @@ export default {
 </script>
 
 <template>
-  <with-label
+  <WithLabel
     :label="label"
     :icon="icon"
     :name="name"
@@ -79,7 +79,7 @@ export default {
         </option>
       </slot>
     </select>
-  </with-label>
+  </WithLabel>
 </template>
 <style scoped>
 .select-caret {
diff --git a/app/javascript/v3/components/Form/Textarea.vue b/app/javascript/v3/components/Form/Textarea.vue
index 3412699a9..77627388c 100644
--- a/app/javascript/v3/components/Form/Textarea.vue
+++ b/app/javascript/v3/components/Form/Textarea.vue
@@ -54,7 +54,7 @@ export default {
 };
 </script>
 <template>
-  <with-label
+  <WithLabel
     :label="label"
     :name="name"
     :has-error="hasError"
@@ -79,5 +79,5 @@ export default {
       @input="onInput"
       @blur="$emit('blur')"
     />
-  </with-label>
+  </WithLabel>
 </template>
diff --git a/app/javascript/v3/components/GoogleOauth/Button.vue b/app/javascript/v3/components/GoogleOauth/Button.vue
index 58be4fd07..28152d8e4 100644
--- a/app/javascript/v3/components/GoogleOauth/Button.vue
+++ b/app/javascript/v3/components/GoogleOauth/Button.vue
@@ -50,7 +50,7 @@ export default {
         {{ $t('LOGIN.OAUTH.GOOGLE_LOGIN') }}
       </span>
     </a>
-    <simple-divider
+    <SimpleDivider
       v-if="showSeparator"
       ref="divider"
       :label="$t('COMMON.OR')"
diff --git a/app/javascript/v3/components/SnackBar/Container.vue b/app/javascript/v3/components/SnackBar/Container.vue
index f7ef64473..07b27ef46 100644
--- a/app/javascript/v3/components/SnackBar/Container.vue
+++ b/app/javascript/v3/components/SnackBar/Container.vue
@@ -44,7 +44,7 @@ export default {
     tag="div"
     class="fixed left-0 right-0 mx-auto overflow-hidden text-center top-10 z-50 max-w-[40rem]"
   >
-    <snackbar-item
+    <SnackbarItem
       v-for="snackbarAlertMessage in snackbarAlertMessages"
       :key="snackbarAlertMessage.key"
       :message="snackbarAlertMessage.message"
diff --git a/app/javascript/v3/views/auth/confirmation/Index.vue b/app/javascript/v3/views/auth/confirmation/Index.vue
index 8ebdebdfd..3642600fd 100644
--- a/app/javascript/v3/views/auth/confirmation/Index.vue
+++ b/app/javascript/v3/views/auth/confirmation/Index.vue
@@ -30,7 +30,7 @@ export default {
 </script>
 <template>
   <div class="flex items-center justify-center h-full w-full">
-    <spinner color-scheme="primary" size="" />
+    <Spinner color-scheme="primary" size="" />
     <div class="ml-2">{{ $t('CONFIRM_EMAIL') }}</div>
   </div>
 </template>
diff --git a/app/javascript/v3/views/auth/password/Edit.vue b/app/javascript/v3/views/auth/password/Edit.vue
index 0e779b676..6f5a83fdf 100644
--- a/app/javascript/v3/views/auth/password/Edit.vue
+++ b/app/javascript/v3/views/auth/password/Edit.vue
@@ -102,7 +102,7 @@ export default {
       </h1>
 
       <div class="space-y-5">
-        <form-input
+        <FormInput
           v-model.trim="credentials.password"
           class="mt-3"
           name="password"
@@ -112,7 +112,7 @@ export default {
           :placeholder="$t('SET_NEW_PASSWORD.PASSWORD.PLACEHOLDER')"
           @blur="v$.credentials.password.$touch"
         />
-        <form-input
+        <FormInput
           v-model.trim="credentials.confirmPassword"
           class="mt-3"
           name="confirm_password"
@@ -122,7 +122,7 @@ export default {
           :placeholder="$t('SET_NEW_PASSWORD.CONFIRM_PASSWORD.PLACEHOLDER')"
           @blur="v$.credentials.confirmPassword.$touch"
         />
-        <submit-button
+        <SubmitButton
           :disabled="
             v$.credentials.password.$invalid ||
             v$.credentials.confirmPassword.$invalid ||
diff --git a/app/javascript/v3/views/auth/reset/password/Index.vue b/app/javascript/v3/views/auth/reset/password/Index.vue
index 50c00ca8c..c703f3f58 100644
--- a/app/javascript/v3/views/auth/reset/password/Index.vue
+++ b/app/javascript/v3/views/auth/reset/password/Index.vue
@@ -88,7 +88,7 @@ export default {
         }}
       </p>
       <div class="space-y-5">
-        <form-input
+        <FormInput
           v-model.trim="credentials.email"
           name="email_address"
           :has-error="v$.credentials.email.$error"
diff --git a/app/javascript/v3/views/auth/signup/Index.vue b/app/javascript/v3/views/auth/signup/Index.vue
index 2253de5f9..d1c0bf09e 100644
--- a/app/javascript/v3/views/auth/signup/Index.vue
+++ b/app/javascript/v3/views/auth/signup/Index.vue
@@ -57,7 +57,7 @@ export default {
               {{ $t('REGISTER.TRY_WOOT') }}
             </h2>
           </div>
-          <signup-form />
+          <SignupForm />
           <div class="text-sm text-slate-800 dark:text-woot-50 px-1">
             <span>{{ $t('REGISTER.HAVE_AN_ACCOUNT') }}</span>
             <router-link class="text-link" to="/app/login">
@@ -71,7 +71,7 @@ export default {
           </div>
         </div>
       </div>
-      <testimonials
+      <Testimonials
         v-if="isAChatwootInstance"
         class="flex-1"
         @resize-containers="resizeContainers"
@@ -81,7 +81,7 @@ export default {
       v-show="isLoading"
       class="flex items-center justify-center h-full w-full"
     >
-      <spinner color-scheme="primary" size="" />
+      <Spinner color-scheme="primary" size="" />
     </div>
   </div>
 </template>
diff --git a/app/javascript/v3/views/auth/signup/components/Signup/Form.vue b/app/javascript/v3/views/auth/signup/components/Signup/Form.vue
index bb957eeb5..7a97b8f9a 100644
--- a/app/javascript/v3/views/auth/signup/components/Signup/Form.vue
+++ b/app/javascript/v3/views/auth/signup/components/Signup/Form.vue
@@ -135,7 +135,7 @@ export default {
   <div class="flex-1 px-1 overflow-auto">
     <form class="space-y-3" @submit.prevent="submit">
       <div class="flex">
-        <form-input
+        <FormInput
           v-model.trim="credentials.fullName"
           name="full_name"
           class="flex-1"
@@ -146,7 +146,7 @@ export default {
           :error-message="$t('REGISTER.FULL_NAME.ERROR')"
           @blur="v$.credentials.fullName.$touch"
         />
-        <form-input
+        <FormInput
           v-model.trim="credentials.accountName"
           name="account_name"
           class="flex-1 ml-2"
@@ -158,7 +158,7 @@ export default {
           @blur="v$.credentials.accountName.$touch"
         />
       </div>
-      <form-input
+      <FormInput
         v-model.trim="credentials.email"
         type="email"
         name="email_address"
@@ -169,7 +169,7 @@ export default {
         :error-message="$t('REGISTER.EMAIL.ERROR')"
         @blur="v$.credentials.email.$touch"
       />
-      <form-input
+      <FormInput
         v-model.trim="credentials.password"
         type="password"
         name="password"
@@ -181,7 +181,7 @@ export default {
         @blur="v$.credentials.password.$touch"
       />
       <div v-if="globalConfig.hCaptchaSiteKey" class="mb-3">
-        <vue-hcaptcha
+        <VueHcaptcha
           ref="hCaptcha"
           :class="{ error: !hasAValidCaptcha && didCaptchaReset }"
           :sitekey="globalConfig.hCaptchaSiteKey"
@@ -194,7 +194,7 @@ export default {
           {{ $t('SET_NEW_PASSWORD.CAPTCHA.ERROR') }}
         </span>
       </div>
-      <submit-button
+      <SubmitButton
         :button-text="$t('REGISTER.SUBMIT')"
         :disabled="isSignupInProgress || !hasAValidCaptcha"
         :loading="isSignupInProgress"
diff --git a/app/javascript/v3/views/auth/signup/components/Testimonials/Index.vue b/app/javascript/v3/views/auth/signup/components/Testimonials/Index.vue
index 3ac923d02..96e716dfb 100644
--- a/app/javascript/v3/views/auth/signup/components/Testimonials/Index.vue
+++ b/app/javascript/v3/views/auth/signup/components/Testimonials/Index.vue
@@ -43,7 +43,7 @@ export default {
     />
     <div class="flex items-center justify-center flex-col h-full w-full z-50">
       <div class="flex items-start justify-center p-6">
-        <testimonial-card
+        <TestimonialCard
           v-for="(testimonial, index) in testimonials"
           :key="testimonial.id"
           :review-content="testimonial.authorReview"
diff --git a/app/javascript/v3/views/login/Index.vue b/app/javascript/v3/views/login/Index.vue
index 809fd6d85..300c5181c 100644
--- a/app/javascript/v3/views/login/Index.vue
+++ b/app/javascript/v3/views/login/Index.vue
@@ -186,7 +186,7 @@ export default {
       <div v-if="!email">
         <GoogleOAuthButton v-if="showGoogleOAuth" />
         <form class="space-y-5" @submit.prevent="submitLogin">
-          <form-input
+          <FormInput
             v-model.trim="credentials.email"
             name="email_address"
             type="text"
@@ -198,7 +198,7 @@ export default {
             :has-error="v$.credentials.email.$error"
             @input="v$.credentials.email.$touch"
           />
-          <form-input
+          <FormInput
             v-model.trim="credentials.password"
             type="password"
             name="password"
@@ -219,8 +219,8 @@ export default {
                 {{ $t('LOGIN.FORGOT_PASSWORD') }}
               </router-link>
             </p>
-          </form-input>
-          <submit-button
+          </FormInput>
+          <SubmitButton
             :disabled="loginApi.showLoading"
             :tabindex="3"
             :button-text="$t('LOGIN.SUBMIT')"
@@ -229,7 +229,7 @@ export default {
         </form>
       </div>
       <div v-else class="flex items-center justify-center">
-        <spinner color-scheme="primary" size="" />
+        <Spinner color-scheme="primary" size="" />
       </div>
     </section>
   </main>
diff --git a/app/javascript/widget/App.vue b/app/javascript/widget/App.vue
index 25650b875..4ab4d0c85 100755
--- a/app/javascript/widget/App.vue
+++ b/app/javascript/widget/App.vue
@@ -337,7 +337,7 @@ export default {
     class="flex flex-1 items-center h-full bg-black-25 justify-center"
     :class="{ dark: prefersDarkMode }"
   >
-    <spinner size="" />
+    <Spinner size="" />
   </div>
   <div
     v-else
diff --git a/app/javascript/widget/components/AgentMessage.vue b/app/javascript/widget/components/AgentMessage.vue
index 15b0f82ee..3296d5128 100755
--- a/app/javascript/widget/components/AgentMessage.vue
+++ b/app/javascript/widget/components/AgentMessage.vue
@@ -168,7 +168,7 @@ export default {
   >
     <div v-if="!isASubmittedForm" class="agent-message">
       <div class="avatar-wrap">
-        <thumbnail
+        <Thumbnail
           v-if="message.showAvatar || hasRecordedResponse"
           :src="avatarUrl"
           size="24px"
@@ -177,7 +177,7 @@ export default {
       </div>
       <div class="message-wrap">
         <div v-if="hasReplyTo" class="flex mt-2 mb-1 text-xs">
-          <reply-to-chip :reply-to="replyTo" />
+          <ReplyToChip :reply-to="replyTo" />
         </div>
         <div class="flex gap-1">
           <div class="space-y-2">
@@ -198,7 +198,7 @@ export default {
                 v-for="attachment in message.attachments"
                 :key="attachment.id"
               >
-                <image-bubble
+                <ImageBubble
                   v-if="attachment.file_type === 'image' && !hasImageError"
                   :url="attachment.data_url"
                   :thumb="attachment.data_url"
@@ -206,7 +206,7 @@ export default {
                   @error="onImageLoadError"
                 />
 
-                <video-bubble
+                <VideoBubble
                   v-if="attachment.file_type === 'video' && !hasVideoError"
                   :url="attachment.data_url"
                   :readable-time="readableTime"
@@ -216,12 +216,12 @@ export default {
                 <audio v-else-if="attachment.file_type === 'audio'" controls>
                   <source :src="attachment.data_url" />
                 </audio>
-                <file-bubble v-else :url="attachment.data_url" />
+                <FileBubble v-else :url="attachment.data_url" />
               </div>
             </div>
           </div>
           <div class="flex flex-col justify-end">
-            <message-reply-button
+            <MessageReplyButton
               class="transition-opacity delay-75 opacity-0 group-hover:opacity-100 sm:opacity-0"
               @click="toggleReply"
             />
diff --git a/app/javascript/widget/components/AgentMessageBubble.vue b/app/javascript/widget/components/AgentMessageBubble.vue
index 7bf47697b..c1c0cc8d0 100755
--- a/app/javascript/widget/components/AgentMessageBubble.vue
+++ b/app/javascript/widget/components/AgentMessageBubble.vue
@@ -94,27 +94,27 @@ export default {
         v-dompurify-html="formatMessage(message, false)"
         class="message-content text-slate-900 dark:text-slate-50"
       />
-      <email-input
+      <EmailInput
         v-if="isTemplateEmail"
         :message-id="messageId"
         :message-content-attributes="messageContentAttributes"
       />
 
-      <integration-card
+      <IntegrationCard
         v-if="isIntegrations"
         :message-id="messageId"
         :meeting-data="messageContentAttributes.data"
       />
     </div>
     <div v-if="isOptions">
-      <chat-options
+      <ChatOptions
         :title="message"
         :options="messageContentAttributes.items"
         :hide-fields="!!messageContentAttributes.submitted_values"
         @click="onOptionSelect"
       />
     </div>
-    <chat-form
+    <ChatForm
       v-if="isForm && !messageContentAttributes.submitted_values"
       :items="messageContentAttributes.items"
       :button-label="messageContentAttributes.button_label"
@@ -122,7 +122,7 @@ export default {
       @submit="onFormSubmit"
     />
     <div v-if="isCards">
-      <chat-card
+      <ChatCard
         v-for="item in messageContentAttributes.items"
         :key="item.title"
         :media-url="item.media_url"
@@ -132,9 +132,9 @@ export default {
       />
     </div>
     <div v-if="isArticle">
-      <chat-article :items="messageContentAttributes.items" />
+      <ChatArticle :items="messageContentAttributes.items" />
     </div>
-    <customer-satisfaction
+    <CustomerSatisfaction
       v-if="isCSAT"
       :message-content-attributes="messageContentAttributes.submitted_values"
       :message-id="messageId"
diff --git a/app/javascript/widget/components/ArticleCategoryCard.vue b/app/javascript/widget/components/ArticleCategoryCard.vue
index f604812e4..4ed3bdc3f 100644
--- a/app/javascript/widget/components/ArticleCategoryCard.vue
+++ b/app/javascript/widget/components/ArticleCategoryCard.vue
@@ -31,14 +31,14 @@ export default {
     <h3 class="text-sm font-medium text-slate-800 dark:text-slate-50 mb-0">
       {{ title }}
     </h3>
-    <article-list :articles="articles" @click="onArticleClick" />
+    <ArticleList :articles="articles" @click="onArticleClick" />
     <button
       class="inline-flex text-sm font-medium rounded-md px-2 py-1 -ml-2 leading-6 text-slate-800 dark:text-slate-50 justify-between items-center hover:bg-slate-25 dark:hover:bg-slate-800 see-articles"
       :style="{ color: widgetColor }"
       @click="$emit('view-all')"
     >
       <span class="pr-2 text-sm">{{ $t('PORTAL.VIEW_ALL_ARTICLES') }}</span>
-      <fluent-icon icon="arrow-right" size="14" />
+      <FluentIcon icon="arrow-right" size="14" />
     </button>
   </div>
 </template>
diff --git a/app/javascript/widget/components/ArticleHero.vue b/app/javascript/widget/components/ArticleHero.vue
index a37369dc9..0be320f5f 100644
--- a/app/javascript/widget/components/ArticleHero.vue
+++ b/app/javascript/widget/components/ArticleHero.vue
@@ -21,7 +21,7 @@ export default {
 </script>
 
 <template>
-  <category-card
+  <CategoryCard
     :title="$t('PORTAL.POPULAR_ARTICLES')"
     :articles="articles.slice(0, 6)"
     @view-all="$emit('view-all')"
diff --git a/app/javascript/widget/components/ArticleList.vue b/app/javascript/widget/components/ArticleList.vue
index 0194b778e..5aef7e265 100644
--- a/app/javascript/widget/components/ArticleList.vue
+++ b/app/javascript/widget/components/ArticleList.vue
@@ -24,7 +24,7 @@ export default {
 
 <template>
   <ul role="list" class="py-2">
-    <article-list-item
+    <ArticleListItem
       v-for="article in articles"
       :key="article.slug"
       :link="article.link"
diff --git a/app/javascript/widget/components/ArticleListItem.vue b/app/javascript/widget/components/ArticleListItem.vue
index e116e77ab..a7e828649 100644
--- a/app/javascript/widget/components/ArticleListItem.vue
+++ b/app/javascript/widget/components/ArticleListItem.vue
@@ -34,7 +34,7 @@ export default {
       {{ title }}
     </button>
     <span class="pl-1 arrow">
-      <fluent-icon icon="arrow-right" size="14" />
+      <FluentIcon icon="arrow-right" size="14" />
     </span>
   </li>
 </template>
diff --git a/app/javascript/widget/components/AvailableAgents.vue b/app/javascript/widget/components/AvailableAgents.vue
index 3ea1462ad..10ecd7afb 100644
--- a/app/javascript/widget/components/AvailableAgents.vue
+++ b/app/javascript/widget/components/AvailableAgents.vue
@@ -23,5 +23,5 @@ export default {
 </script>
 
 <template>
-  <grouped-avatars :users="users" />
+  <GroupedAvatars :users="users" />
 </template>
diff --git a/app/javascript/widget/components/ChatAttachment.vue b/app/javascript/widget/components/ChatAttachment.vue
index d7fadea77..0779a675f 100755
--- a/app/javascript/widget/components/ChatAttachment.vue
+++ b/app/javascript/widget/components/ChatAttachment.vue
@@ -134,7 +134,7 @@ export default {
 </script>
 
 <template>
-  <file-upload
+  <FileUpload
     ref="upload"
     :size="4096 * 2048"
     :accept="allowedFileTypes"
@@ -145,8 +145,8 @@ export default {
     @input-file="onFileUpload"
   >
     <button class="icon-button flex items-center justify-center">
-      <fluent-icon v-if="!isUploading.image" icon="attach" />
-      <spinner v-if="isUploading" size="small" />
+      <FluentIcon v-if="!isUploading.image" icon="attach" />
+      <Spinner v-if="isUploading" size="small" />
     </button>
-  </file-upload>
+  </FileUpload>
 </template>
diff --git a/app/javascript/widget/components/ChatFooter.vue b/app/javascript/widget/components/ChatFooter.vue
index 9ee4ac346..c07ed577c 100755
--- a/app/javascript/widget/components/ChatFooter.vue
+++ b/app/javascript/widget/components/ChatFooter.vue
@@ -130,19 +130,19 @@ export default {
         hasReplyTo,
     }"
   >
-    <footer-reply-to
+    <FooterReplyTo
       v-if="hasReplyTo"
       :in-reply-to="inReplyTo"
       @dismiss="inReplyTo = null"
     />
-    <chat-input-wrap
+    <ChatInputWrap
       class="shadow-sm"
       :on-send-message="handleSendMessage"
       :on-send-attachment="handleSendAttachment"
     />
   </footer>
   <div v-else>
-    <custom-button
+    <CustomButton
       class="font-medium"
       block
       :bg-color="widgetColor"
@@ -150,15 +150,15 @@ export default {
       @click="startNewConversation"
     >
       {{ $t('START_NEW_CONVERSATION') }}
-    </custom-button>
-    <custom-button
+    </CustomButton>
+    <CustomButton
       v-if="showEmailTranscriptButton"
       type="clear"
       class="font-normal"
       @click="sendTranscript"
     >
       {{ $t('EMAIL_TRANSCRIPT.BUTTON_TEXT') }}
-    </custom-button>
+    </CustomButton>
   </div>
 </template>
 <style scoped lang="scss">
diff --git a/app/javascript/widget/components/ChatHeader.vue b/app/javascript/widget/components/ChatHeader.vue
index 0f78ee5db..a436cc915 100644
--- a/app/javascript/widget/components/ChatHeader.vue
+++ b/app/javascript/widget/components/ChatHeader.vue
@@ -70,7 +70,7 @@ export default {
         class="-ml-3 px-2"
         @click="onBackButtonClick"
       >
-        <fluent-icon
+        <FluentIcon
           icon="chevron-left"
           size="24"
           :class="$dm('text-black-900', 'dark:text-slate-50')"
@@ -101,6 +101,6 @@ export default {
         </div>
       </div>
     </div>
-    <header-actions :show-popout-button="showPopoutButton" />
+    <HeaderActions :show-popout-button="showPopoutButton" />
   </header>
 </template>
diff --git a/app/javascript/widget/components/ChatHeaderExpanded.vue b/app/javascript/widget/components/ChatHeaderExpanded.vue
index e45d2fc4f..864985fde 100755
--- a/app/javascript/widget/components/ChatHeaderExpanded.vue
+++ b/app/javascript/widget/components/ChatHeaderExpanded.vue
@@ -43,7 +43,7 @@ export default {
         :src="avatarUrl"
         alt="Avatar"
       />
-      <header-actions
+      <HeaderActions
         :show-popout-button="showPopoutButton"
         :show-end-conversation-button="false"
       />
diff --git a/app/javascript/widget/components/ChatInputWrap.vue b/app/javascript/widget/components/ChatInputWrap.vue
index 50e7aa03e..85f519660 100755
--- a/app/javascript/widget/components/ChatInputWrap.vue
+++ b/app/javascript/widget/components/ChatInputWrap.vue
@@ -131,7 +131,7 @@ export default {
     :class="$dm('bg-white ', 'dark:bg-slate-600')"
     @keydown.esc="hideEmojiPicker"
   >
-    <resizable-text-area
+    <ResizableTextArea
       id="chat-input"
       ref="chatInput"
       v-model="userInput"
@@ -146,7 +146,7 @@ export default {
       @blur="onBlur"
     />
     <div class="button-wrap">
-      <chat-attachment-button
+      <ChatAttachmentButton
         v-if="showAttachment"
         :class="$dm('text-black-900', 'dark:text-slate-100')"
         :on-attach="onSendAttachment"
@@ -157,15 +157,15 @@ export default {
         aria-label="Emoji picker"
         @click="toggleEmojiPicker"
       >
-        <fluent-icon icon="emoji" :class="emojiIconColor" />
+        <FluentIcon icon="emoji" :class="emojiIconColor" />
       </button>
-      <emoji-input
+      <EmojiInput
         v-if="showEmojiPicker"
         v-on-clickaway="hideEmojiPicker"
         :on-click="emojiOnClick"
         @keydown.esc="hideEmojiPicker"
       />
-      <chat-send-button
+      <ChatSendButton
         v-if="showSendButton"
         :on-click="handleButtonClick"
         :color="widgetColor"
diff --git a/app/javascript/widget/components/ChatSendButton.vue b/app/javascript/widget/components/ChatSendButton.vue
index ce9edb788..c6db0fcf5 100755
--- a/app/javascript/widget/components/ChatSendButton.vue
+++ b/app/javascript/widget/components/ChatSendButton.vue
@@ -35,7 +35,7 @@ export default {
     class="icon-button flex items-center justify-center ml-1"
     @click="onClick"
   >
-    <fluent-icon v-if="!loading" icon="send" :style="`color: ${color}`" />
-    <spinner v-else size="small" />
+    <FluentIcon v-if="!loading" icon="send" :style="`color: ${color}`" />
+    <Spinner v-else size="small" />
   </button>
 </template>
diff --git a/app/javascript/widget/components/ContinueChatButton.vue b/app/javascript/widget/components/ContinueChatButton.vue
index f05b19581..509d2c168 100644
--- a/app/javascript/widget/components/ContinueChatButton.vue
+++ b/app/javascript/widget/components/ContinueChatButton.vue
@@ -29,7 +29,7 @@ export default {
     <div
       class="w-10 h-10 rounded-md bg-slate-75 dark:bg-slate-700 text-lg flex items-center justify-center flex-shrink-0"
     >
-      <fluent-icon
+      <FluentIcon
         icon="chat"
         size="16"
         class="text-slate-600 dark:text-slate-400"
@@ -55,7 +55,7 @@ export default {
       </p>
     </div>
     <div class="w-8 h-10 flex items-center justify-center">
-      <fluent-icon icon="chevron-right" />
+      <FluentIcon icon="chevron-right" />
     </div>
   </button>
 </template>
diff --git a/app/javascript/widget/components/ConversationWrap.vue b/app/javascript/widget/components/ConversationWrap.vue
index 4fae730c3..4213a0a57 100755
--- a/app/javascript/widget/components/ConversationWrap.vue
+++ b/app/javascript/widget/components/ConversationWrap.vue
@@ -99,21 +99,21 @@ export default {
   <div class="conversation--container" :class="colorSchemeClass">
     <div class="conversation-wrap" :class="{ 'is-typing': isAgentTyping }">
       <div v-if="isFetchingList" class="message--loader">
-        <spinner />
+        <Spinner />
       </div>
       <div
         v-for="groupedMessage in groupedMessages"
         :key="groupedMessage.date"
         class="messages-wrap"
       >
-        <date-separator :date="groupedMessage.date" />
-        <chat-message
+        <DateSeparator :date="groupedMessage.date" />
+        <ChatMessage
           v-for="message in groupedMessage.messages"
           :key="message.id"
           :message="message"
         />
       </div>
-      <agent-typing-bubble v-if="showStatusIndicator" />
+      <AgentTypingBubble v-if="showStatusIndicator" />
     </div>
   </div>
 </template>
diff --git a/app/javascript/widget/components/FileBubble.vue b/app/javascript/widget/components/FileBubble.vue
index 9ae4a224d..faba119f0 100644
--- a/app/javascript/widget/components/FileBubble.vue
+++ b/app/javascript/widget/components/FileBubble.vue
@@ -61,7 +61,7 @@ export default {
 <template>
   <div class="file flex flex-row items-center p-3 cursor-pointer">
     <div class="icon-wrap" :style="{ color: textColor }">
-      <fluent-icon icon="document" size="28" />
+      <FluentIcon icon="document" size="28" />
     </div>
     <div class="meta">
       <div class="title" :class="titleColor" :style="{ color: textColor }">
diff --git a/app/javascript/widget/components/FooterReplyTo.vue b/app/javascript/widget/components/FooterReplyTo.vue
index 006511959..104061cb8 100644
--- a/app/javascript/widget/components/FooterReplyTo.vue
+++ b/app/javascript/widget/components/FooterReplyTo.vue
@@ -35,7 +35,7 @@ export default {
       class="items-end flex-shrink-0 p-1 rounded-md hover:bg-slate-200 dark:hover:bg-slate-800"
       @click="$emit('dismiss')"
     >
-      <fluent-icon icon="dismiss" size="12" />
+      <FluentIcon icon="dismiss" size="12" />
     </button>
   </div>
 </template>
diff --git a/app/javascript/widget/components/Form/PhoneInput.vue b/app/javascript/widget/components/Form/PhoneInput.vue
index 8eac64187..f8af9e753 100644
--- a/app/javascript/widget/components/Form/PhoneInput.vue
+++ b/app/javascript/widget/components/Form/PhoneInput.vue
@@ -235,8 +235,8 @@ export default {
         <h5 v-if="activeCountry.emoji" class="text-xl mb-0">
           {{ activeCountry.emoji }}
         </h5>
-        <fluent-icon v-else icon="globe" class="fluent-icon" size="20" />
-        <fluent-icon icon="chevron-down" class="fluent-icon" size="12" />
+        <FluentIcon v-else icon="globe" class="fluent-icon" size="20" />
+        <FluentIcon icon="chevron-down" class="fluent-icon" size="12" />
       </div>
       <span
         v-if="activeDialCode"
diff --git a/app/javascript/widget/components/GroupedAvatars.vue b/app/javascript/widget/components/GroupedAvatars.vue
index 9d6c7a2a6..bb6906e68 100644
--- a/app/javascript/widget/components/GroupedAvatars.vue
+++ b/app/javascript/widget/components/GroupedAvatars.vue
@@ -22,7 +22,7 @@ export default {
         index ? '-ml-4' : ''
       } inline-block rounded-full text-white shadow-solid`"
     >
-      <thumbnail
+      <Thumbnail
         size="36px"
         :username="user.name"
         :src="user.avatar"
diff --git a/app/javascript/widget/components/HeaderActions.vue b/app/javascript/widget/components/HeaderActions.vue
index 80d03a72a..e1f38922d 100644
--- a/app/javascript/widget/components/HeaderActions.vue
+++ b/app/javascript/widget/components/HeaderActions.vue
@@ -88,7 +88,7 @@ export default {
       :title="$t('END_CONVERSATION')"
       @click="resolveConversation"
     >
-      <fluent-icon
+      <FluentIcon
         icon="sign-out"
         size="22"
         :class="$dm('text-black-900', 'dark:text-slate-50')"
@@ -99,7 +99,7 @@ export default {
       class="button transparent compact new-window--button"
       @click="popoutWindow"
     >
-      <fluent-icon
+      <FluentIcon
         icon="open"
         size="22"
         :class="$dm('text-black-900', 'dark:text-slate-50')"
@@ -112,7 +112,7 @@ export default {
       }"
       @click="closeWindow"
     >
-      <fluent-icon
+      <FluentIcon
         icon="dismiss"
         size="24"
         :class="$dm('text-black-900', 'dark:text-slate-50')"
diff --git a/app/javascript/widget/components/PreChat/Form.vue b/app/javascript/widget/components/PreChat/Form.vue
index 03420ea3c..2dd90a4f2 100644
--- a/app/javascript/widget/components/PreChat/Form.vue
+++ b/app/javascript/widget/components/PreChat/Form.vue
@@ -304,16 +304,16 @@ export default {
       }"
     />
 
-    <custom-button
+    <CustomButton
       class="mt-2 mb-5 font-medium"
       block
       :bg-color="widgetColor"
       :text-color="textColor"
       :disabled="isCreating"
     >
-      <spinner v-if="isCreating" class="p-0" />
+      <Spinner v-if="isCreating" class="p-0" />
       {{ $t('START_CONVERSATION') }}
-    </custom-button>
+    </CustomButton>
   </FormulateForm>
 </template>
 <style lang="scss" scoped>
diff --git a/app/javascript/widget/components/ReplyToChip.vue b/app/javascript/widget/components/ReplyToChip.vue
index 1635928d3..ac2d255b1 100644
--- a/app/javascript/widget/components/ReplyToChip.vue
+++ b/app/javascript/widget/components/ReplyToChip.vue
@@ -52,7 +52,7 @@ export default {
     class="px-1.5 py-0.5 rounded-md text-slate-500 bg-slate-50 dark:bg-slate-900 opacity-60 hover:opacity-100 cursor-pointer flex items-center gap-1.5"
     @click="navigateTo(replyTo.id)"
   >
-    <fluent-icon icon="arrow-reply" size="12" class="flex-shrink-0" />
+    <FluentIcon icon="arrow-reply" size="12" class="flex-shrink-0" />
     <div class="truncate max-w-[8rem]">
       {{ replyTo.content || replyToAttachment }}
     </div>
diff --git a/app/javascript/widget/components/TeamAvailability.vue b/app/javascript/widget/components/TeamAvailability.vue
index 513c7317f..7c3a8bee6 100644
--- a/app/javascript/widget/components/TeamAvailability.vue
+++ b/app/javascript/widget/components/TeamAvailability.vue
@@ -78,7 +78,7 @@ export default {
           {{ replyWaitMessage }}
         </div>
       </div>
-      <available-agents v-if="isOnline" :agents="availableAgents" />
+      <AvailableAgents v-if="isOnline" :agents="availableAgents" />
     </div>
     <button
       class="inline-flex text-sm font-medium rounded-md py-1 mt-2 px-2 -ml-2 leading-6 text-slate-800 dark:text-slate-50 justify-between items-center hover:bg-slate-25 dark:hover:bg-slate-800"
@@ -92,7 +92,7 @@ export default {
             : $t('START_CONVERSATION')
         }}
       </span>
-      <fluent-icon icon="arrow-right" size="14" />
+      <FluentIcon icon="arrow-right" size="14" />
     </button>
   </div>
 </template>
diff --git a/app/javascript/widget/components/UnreadMessage.vue b/app/javascript/widget/components/UnreadMessage.vue
index ab04a59e0..e2293266b 100644
--- a/app/javascript/widget/components/UnreadMessage.vue
+++ b/app/javascript/widget/components/UnreadMessage.vue
@@ -89,7 +89,7 @@ export default {
       @click="onClickMessage"
     >
       <div v-if="showSender" class="row--agent-block">
-        <thumbnail
+        <Thumbnail
           :src="avatarUrl"
           size="20px"
           :username="agentName"
diff --git a/app/javascript/widget/components/UnreadMessageList.vue b/app/javascript/widget/components/UnreadMessageList.vue
index a6208ceea..2c63abee7 100644
--- a/app/javascript/widget/components/UnreadMessageList.vue
+++ b/app/javascript/widget/components/UnreadMessageList.vue
@@ -58,13 +58,13 @@ export default {
     <div class="close-unread-wrap">
       <button class="button small close-unread-button" @click="closeFullView">
         <span class="flex items-center">
-          <fluent-icon class="mr-1" icon="dismiss" size="12" />
+          <FluentIcon class="mr-1" icon="dismiss" size="12" />
           {{ $t('UNREAD_VIEW.CLOSE_MESSAGES_BUTTON') }}
         </span>
       </button>
     </div>
     <div class="unread-messages">
-      <unread-message
+      <UnreadMessage
         v-for="(message, index) in messages"
         :key="message.id"
         :message-type="message.messageType"
@@ -91,7 +91,7 @@ export default {
             color: widgetColor,
           }"
         >
-          <fluent-icon class="mr-2" size="16" icon="arrow-right" />
+          <FluentIcon class="mr-2" size="16" icon="arrow-right" />
           {{ $t('UNREAD_VIEW.VIEW_MESSAGES_BUTTON') }}
         </span>
       </button>
diff --git a/app/javascript/widget/components/UserMessage.vue b/app/javascript/widget/components/UserMessage.vue
index 4c166c35e..7f8528e08 100755
--- a/app/javascript/widget/components/UserMessage.vue
+++ b/app/javascript/widget/components/UserMessage.vue
@@ -111,18 +111,18 @@ export default {
         :class="{ 'in-progress': isInProgress, 'is-failed': isFailed }"
       >
         <div v-if="hasReplyTo" class="flex justify-end mt-2 mb-1 text-xs">
-          <reply-to-chip :reply-to="replyTo" />
+          <ReplyToChip :reply-to="replyTo" />
         </div>
         <div class="flex justify-end gap-1">
           <div class="flex flex-col justify-end">
-            <message-reply-button
+            <MessageReplyButton
               v-if="!isInProgress && !isFailed"
               class="transition-opacity delay-75 opacity-0 group-hover:opacity-100 sm:opacity-0"
               @click="toggleReply"
             />
           </div>
-          <drag-wrapper direction="left" @dragged="toggleReply">
-            <user-message-bubble
+          <DragWrapper direction="left" @dragged="toggleReply">
+            <UserMessageBubble
               v-if="showTextBubble"
               :message="message.content"
               :status="message.status"
@@ -137,7 +137,7 @@ export default {
                 v-for="attachment in message.attachments"
                 :key="attachment.id"
               >
-                <image-bubble
+                <ImageBubble
                   v-if="attachment.file_type === 'image' && !hasImageError"
                   :url="attachment.data_url"
                   :thumb="attachment.data_url"
@@ -145,14 +145,14 @@ export default {
                   @error="onImageLoadError"
                 />
 
-                <video-bubble
+                <VideoBubble
                   v-if="attachment.file_type === 'video' && !hasVideoError"
                   :url="attachment.data_url"
                   :readable-time="readableTime"
                   @error="onVideoLoadError"
                 />
 
-                <file-bubble
+                <FileBubble
                   v-else
                   :url="attachment.data_url"
                   :is-in-progress="isInProgress"
@@ -161,7 +161,7 @@ export default {
                 />
               </div>
             </div>
-          </drag-wrapper>
+          </DragWrapper>
         </div>
         <div
           v-if="isFailed"
@@ -173,7 +173,7 @@ export default {
             class="inline-flex items-center justify-center ml-2"
             @click="retrySendMessage"
           >
-            <fluent-icon icon="arrow-clockwise" size="14" />
+            <FluentIcon icon="arrow-clockwise" size="14" />
           </button>
         </div>
       </div>
diff --git a/app/javascript/widget/components/dropdown/DropdownMenuItem.vue b/app/javascript/widget/components/dropdown/DropdownMenuItem.vue
index f8d6fe0ea..162979bb7 100644
--- a/app/javascript/widget/components/dropdown/DropdownMenuItem.vue
+++ b/app/javascript/widget/components/dropdown/DropdownMenuItem.vue
@@ -42,7 +42,7 @@ export default {
 </script>
 <template>
   <button :class="['menu-item', itemClass]" @click="action">
-    <fluent-icon
+    <FluentIcon
       v-if="icon"
       :icon="iconName"
       :size="iconSize"
diff --git a/app/javascript/widget/components/layouts/ViewWithHeader.vue b/app/javascript/widget/components/layouts/ViewWithHeader.vue
index e350d4372..a55f3ce9b 100644
--- a/app/javascript/widget/components/layouts/ViewWithHeader.vue
+++ b/app/javascript/widget/components/layouts/ViewWithHeader.vue
@@ -117,14 +117,14 @@ export default {
           ...opacityClass,
         }"
       >
-        <chat-header-expanded
+        <ChatHeaderExpanded
           v-if="!isHeaderCollapsed"
           :intro-heading="channelConfig.welcomeTitle"
           :intro-body="channelConfig.welcomeTagline"
           :avatar-url="channelConfig.avatarUrl"
           :show-popout-button="appConfig.showPopoutButton"
         />
-        <chat-header
+        <ChatHeader
           v-if="isHeaderCollapsed"
           :title="channelConfig.websiteName"
           :avatar-url="channelConfig.avatarUrl"
@@ -133,10 +133,10 @@ export default {
           :show-back-button="showBackButton"
         />
       </div>
-      <banner />
+      <Banner />
       <router-view />
 
-      <branding v-if="!isOnArticleViewer" :disable-branding="disableBranding" />
+      <Branding v-if="!isOnArticleViewer" :disable-branding="disableBranding" />
     </div>
   </div>
 </template>
diff --git a/app/javascript/widget/components/template/Article.vue b/app/javascript/widget/components/template/Article.vue
index 00b9d4789..65d8209ba 100644
--- a/app/javascript/widget/components/template/Article.vue
+++ b/app/javascript/widget/components/template/Article.vue
@@ -26,7 +26,7 @@ export default {
     <div v-for="item in items" :key="item.link" class="article-item">
       <a :href="item.link" target="_blank" rel="noopener noreferrer nofollow">
         <span class="title flex items-center text-black-900 font-medium">
-          <fluent-icon
+          <FluentIcon
             icon="link"
             class="mr-1"
             :class="$dm('text-black-900', 'dark:text-slate-50')"
diff --git a/app/javascript/widget/components/template/EmailInput.vue b/app/javascript/widget/components/template/EmailInput.vue
index aae78f4cb..2d95569eb 100644
--- a/app/javascript/widget/components/template/EmailInput.vue
+++ b/app/javascript/widget/components/template/EmailInput.vue
@@ -108,8 +108,8 @@ export default {
           color: textColor,
         }"
       >
-        <fluent-icon v-if="!isUpdating" icon="chevron-right" />
-        <spinner v-else class="mx-2" />
+        <FluentIcon v-if="!isUpdating" icon="chevron-right" />
+        <Spinner v-else class="mx-2" />
       </button>
     </form>
   </div>
diff --git a/app/javascript/widget/components/template/IntegrationCard.vue b/app/javascript/widget/components/template/IntegrationCard.vue
index 4915d8da7..0b7e6df82 100644
--- a/app/javascript/widget/components/template/IntegrationCard.vue
+++ b/app/javascript/widget/components/template/IntegrationCard.vue
@@ -65,7 +65,7 @@ export default {
       }"
       @click="joinTheCall"
     >
-      <fluent-icon icon="video-add" class="mr-2" />
+      <FluentIcon icon="video-add" class="mr-2" />
       {{ $t('INTEGRATIONS.DYTE.CLICK_HERE_TO_JOIN') }}
     </button>
     <div v-if="dyteAuthToken" class="video-call--container">
diff --git a/app/javascript/widget/views/ArticleViewer.vue b/app/javascript/widget/views/ArticleViewer.vue
index 69057c144..c9525a706 100644
--- a/app/javascript/widget/views/ArticleViewer.vue
+++ b/app/javascript/widget/views/ArticleViewer.vue
@@ -17,6 +17,6 @@ export default {
 
 <template>
   <div class="bg-white h-full">
-    <iframe-loader :url="link" />
+    <IframeLoader :url="link" />
   </div>
 </template>
diff --git a/app/javascript/widget/views/Campaigns.vue b/app/javascript/widget/views/Campaigns.vue
index 5c9e79521..42c639f95 100644
--- a/app/javascript/widget/views/Campaigns.vue
+++ b/app/javascript/widget/views/Campaigns.vue
@@ -36,5 +36,5 @@ export default {
 </script>
 
 <template>
-  <unread-message-list :messages="messages" @close="closeFullView" />
+  <UnreadMessageList :messages="messages" @close="closeFullView" />
 </template>
diff --git a/app/javascript/widget/views/Home.vue b/app/javascript/widget/views/Home.vue
index 1116a59ce..bf2c2a49b 100755
--- a/app/javascript/widget/views/Home.vue
+++ b/app/javascript/widget/views/Home.vue
@@ -106,7 +106,7 @@ export default {
     :class="{ 'pb-2': showArticles, 'justify-end': !showArticles }"
   >
     <div class="px-4 pt-4 w-full">
-      <team-availability
+      <TeamAvailability
         :available-agents="availableAgents"
         :has-conversation="!!conversationSize"
         :unread-count="unreadMessageCount"
@@ -115,7 +115,7 @@ export default {
     </div>
     <div v-if="showArticles" class="px-4 py-2 w-full">
       <div class="p-4 rounded-md bg-white dark:bg-slate-700 shadow-sm w-full">
-        <article-hero
+        <ArticleHero
           v-if="
             !articleUiFlags.isFetching &&
             !articleUiFlags.isError &&
@@ -129,7 +129,7 @@ export default {
     </div>
     <div v-if="articleUiFlags.isFetching" class="px-4 py-2 w-full">
       <div class="p-4 rounded-md bg-white dark:bg-slate-700 shadow-sm w-full">
-        <article-card-skeleton-loader />
+        <ArticleCardSkeletonLoader />
       </div>
     </div>
   </div>
diff --git a/app/javascript/widget/views/Messages.vue b/app/javascript/widget/views/Messages.vue
index 261f79498..23332ca7c 100644
--- a/app/javascript/widget/views/Messages.vue
+++ b/app/javascript/widget/views/Messages.vue
@@ -21,8 +21,8 @@ export default {
     class="flex flex-col flex-1 overflow-hidden rounded-b-lg bg-slate-25 dark:bg-slate-800"
   >
     <div class="flex flex-1 overflow-auto">
-      <conversation-wrap :grouped-messages="groupedMessages" />
+      <ConversationWrap :grouped-messages="groupedMessages" />
     </div>
-    <chat-footer class="px-5" />
+    <ChatFooter class="px-5" />
   </div>
 </template>
diff --git a/app/javascript/widget/views/PreChatForm.vue b/app/javascript/widget/views/PreChatForm.vue
index 40df0b063..9f33ca8e6 100644
--- a/app/javascript/widget/views/PreChatForm.vue
+++ b/app/javascript/widget/views/PreChatForm.vue
@@ -59,6 +59,6 @@ export default {
 </script>
 <template>
   <div class="flex flex-1 overflow-auto">
-    <pre-chat-form :options="preChatFormOptions" @submit="onSubmit" />
+    <PreChatForm :options="preChatFormOptions" @submit="onSubmit" />
   </div>
 </template>
diff --git a/app/javascript/widget/views/UnreadMessages.vue b/app/javascript/widget/views/UnreadMessages.vue
index 9d567e18f..fbf7fd48c 100644
--- a/app/javascript/widget/views/UnreadMessages.vue
+++ b/app/javascript/widget/views/UnreadMessages.vue
@@ -24,5 +24,5 @@ export default {
 </script>
 
 <template>
-  <unread-message-list :messages="messages" @close="closeFullView" />
+  <UnreadMessageList :messages="messages" @close="closeFullView" />
 </template>