From 0008fca511bb563b0f67e384823960b3f90294dd Mon Sep 17 00:00:00 2001
From: iamsivin <iamsivin@gmail.com>
Date: Thu, 25 Jul 2024 19:33:28 +0530
Subject: [PATCH] fix: apply ESLint rule vue/component-tags-order

---
 .eslintrc.js                                  |   6 +
 app/javascript/dashboard/App.vue              |  54 +-
 .../components/Accordion/AccordionItem.vue    |  64 +-
 .../dashboard/components/ChannelSelector.vue  |  28 +-
 .../dashboard/components/ChatList.vue         | 232 +++---
 app/javascript/dashboard/components/Code.vue  |  48 +-
 .../dashboard/components/ConversationItem.vue |  46 +-
 .../dashboard/components/CustomAttribute.vue  | 272 +++----
 .../components/CustomSnoozeModal.vue          |  50 +-
 .../dashboard/components/FormSection.vue      |  26 +-
 .../components/IntersectionObserver.vue       |   8 +-
 .../dashboard/components/MaskedText.vue       |  34 +-
 app/javascript/dashboard/components/Modal.vue |  66 +-
 .../dashboard/components/ModalHeader.vue      |  46 +-
 .../dashboard/components/SettingsSection.vue  |  46 +-
 .../dashboard/components/SidemenuIcon.vue     |  22 +-
 .../dashboard/components/Snackbar.vue         |  42 +-
 .../components/SnackbarContainer.vue          |  30 +-
 .../components/app/PaymentPendingBanner.vue   |  22 +-
 .../app/PendingEmailVerificationBanner.vue    |  24 +-
 .../dashboard/components/app/UpdateBanner.vue |  22 +-
 .../components/app/UpgradeBanner.vue          |  22 +-
 .../dashboard/components/base/Hotkey.vue      |  10 +-
 .../dashboard/components/buttons/Button.vue   |  26 +-
 .../components/buttons/FormSubmitButton.vue   |  28 +-
 .../components/buttons/ResolveAction.vue      | 156 ++--
 .../components/layout/AvailabilityStatus.vue  |  94 +--
 .../dashboard/components/layout/Sidebar.vue   |  60 +-
 .../sidebarComponents/AccountContext.vue      |  52 +-
 .../sidebarComponents/AccountSelector.vue     |  52 +-
 .../sidebarComponents/AddAccountModal.vue     | 100 +--
 .../layout/sidebarComponents/AgentDetails.vue |  32 +-
 .../layout/sidebarComponents/Logo.vue         |  14 +-
 .../sidebarComponents/NotificationBell.vue    |  50 +-
 .../layout/sidebarComponents/OptionsMenu.vue  | 114 +--
 .../layout/sidebarComponents/Primary.vue      |  80 +-
 .../sidebarComponents/PrimaryNavItem.vue      |  60 +-
 .../layout/sidebarComponents/Secondary.vue    |  50 +-
 .../SecondaryChildNavItem.vue                 | 102 +--
 .../sidebarComponents/SecondaryNavItem.vue    | 188 ++---
 .../components/ui/AnnouncementPopup.vue       |  42 +-
 .../dashboard/components/ui/Banner.vue        |  84 +--
 .../dashboard/components/ui/ContextMenu.vue   |  20 +-
 .../components/ui/DateRangePicker.vue         |  30 +-
 .../components/ui/DateTimePicker.vue          |  32 +-
 .../dashboard/components/ui/Label.vue         |  58 +-
 .../dashboard/components/ui/PreviewCard.vue   |  54 +-
 .../dashboard/components/ui/Switch.vue        |  26 +-
 .../dashboard/components/ui/Tabs/TabsItem.vue |  34 +-
 .../dashboard/components/ui/TimeAgo.vue       |  26 +-
 .../dashboard/components/ui/Wizard.vue        |  64 +-
 .../dashboard/components/ui/WootButton.vue    |  58 +-
 .../components/widgets/AIAssistanceButton.vue |  70 +-
 .../widgets/AIAssistanceCTAButton.vue         |  18 +-
 .../components/widgets/AIAssistanceModal.vue  |  78 +-
 .../components/widgets/AICTAModal.vue         |  76 +-
 .../dashboard/components/widgets/AILoader.vue |   4 +-
 .../components/widgets/AttachmentsPreview.vue |  80 +-
 .../widgets/AutomationActionInput.vue         | 188 ++---
 .../AutomationActionTeamMessageInput.vue      |  54 +-
 .../widgets/AutomationFileInput.vue           |  54 +-
 .../dashboard/components/widgets/Avatar.vue   |  12 +-
 .../components/widgets/BackButton.vue         |  18 +-
 .../components/widgets/ChannelItem.vue        |  16 +-
 .../components/widgets/ChatTypeTabs.vue       |  20 +-
 .../components/widgets/ColorPicker.vue        |  36 +-
 .../components/widgets/DashboardApp/Frame.vue |  44 +-
 .../components/widgets/EmptyState.vue         |  18 +-
 .../components/widgets/FeatureToggle.vue      |  10 +-
 .../components/widgets/FilterInput/Index.vue  | 288 ++++----
 .../components/widgets/InboxDropdownItem.vue  |  50 +-
 .../components/widgets/InboxName.vue          |  24 +-
 .../components/widgets/LabelSelector.vue      |  62 +-
 .../components/widgets/LoadingState.vue       |  14 +-
 .../components/widgets/SettingIntroBanner.vue |  30 +-
 .../dashboard/components/widgets/ShowMore.vue |  24 +-
 .../components/widgets/TableFooter.vue        |  42 +-
 .../widgets/TableFooterPagination.vue         | 122 +--
 .../components/widgets/TableFooterResults.vue |  24 +-
 .../components/widgets/Thumbnail.vue          |  74 +-
 .../components/widgets/ThumbnailGroup.vue     |  36 +-
 .../components/widgets/UserAvatarWithName.vue |  32 +-
 .../components/widgets/VideoCallButton.vue    |  28 +-
 .../widgets/WootWriter/AudioRecorder.vue      |  12 +-
 .../components/widgets/WootWriter/Editor.vue  |  92 +--
 .../widgets/WootWriter/FullEditor.vue         |  30 +-
 .../widgets/WootWriter/ReplyBottomPanel.vue   | 270 +++----
 .../widgets/WootWriter/ReplyTopPanel.vue      |  96 +--
 .../conversation/AvailabilityStatusBadge.vue  |  10 +-
 .../widgets/conversation/CannedResponse.vue   |  24 +-
 .../ConversationAdvancedFilter.vue            | 160 ++--
 .../conversation/ConversationBasicFilter.vue  |  88 +--
 .../widgets/conversation/ConversationBox.vue  | 128 ++--
 .../widgets/conversation/ConversationCard.vue | 234 +++---
 .../conversation/ConversationHeader.vue       | 164 ++---
 .../conversation/EmailTranscriptModal.vue     | 154 ++--
 .../conversation/EmptyState/EmptyState.vue    |  70 +-
 .../EmptyState/EmptyStateMessage.vue          |  26 +-
 .../EmptyState/FeaturePlaceholder.vue         |  48 +-
 .../widgets/conversation/FilterItem.vue       |  22 +-
 .../widgets/conversation/Message.vue          | 288 ++++----
 .../widgets/conversation/MessagePreview.vue   |  96 +--
 .../MessageSignatureMissingAlert.vue          |  20 +-
 .../widgets/conversation/MessagesView.vue     | 204 ++---
 .../widgets/conversation/MoreActions.vue      |  74 +-
 .../widgets/conversation/OnboardingView.vue   |  40 +-
 .../widgets/conversation/PriorityMark.vue     |  48 +-
 .../widgets/conversation/ReplyBox.vue         | 306 ++++----
 .../widgets/conversation/ReplyEmailHead.vue   | 144 ++--
 .../widgets/conversation/ReplyToMessage.vue   |  28 +-
 .../widgets/conversation/TagAgents.vue        |  80 +-
 .../widgets/conversation/VariableList.vue     |  32 +-
 .../conversation/WhatsappTemplates/Modal.vue  |  46 +-
 .../WhatsappTemplates/TemplateParser.vue      |  84 +--
 .../WhatsappTemplates/TemplatesPicker.vue     |  84 +--
 .../widgets/conversation/bubble/Actions.vue   | 150 ++--
 .../widgets/conversation/bubble/Contact.vue   |  36 +-
 .../widgets/conversation/bubble/File.vue      |  42 +-
 .../widgets/conversation/bubble/Image.vue     |  18 +-
 .../conversation/bubble/ImageAudioVideo.vue   |  66 +-
 .../conversation/bubble/InstagramStory.vue    |  26 +-
 .../bubble/InstagramStoryErrorPlaceHolder.vue |   8 +-
 .../bubble/InstagramStoryReply.vue            |  16 +-
 .../conversation/bubble/Integration.vue       |  14 +-
 .../widgets/conversation/bubble/MailHead.vue  |  62 +-
 .../widgets/conversation/bubble/ReplyTo.vue   |  40 +-
 .../widgets/conversation/bubble/Text.vue      |  80 +-
 .../conversation/bubble/TranslateModal.vue    |  54 +-
 .../widgets/conversation/bubble/Video.vue     |  28 +-
 .../conversation/bubble/integrations/Dyte.vue |  60 +-
 .../conversation/components/GalleryView.vue   | 363 ++++-----
 .../conversation/components/SLACardLabel.vue  | 100 +--
 .../conversation/contextMenu/Index.vue        | 146 ++--
 .../contextMenu/agentLoadingPlaceholder.vue   |  14 +-
 .../conversation/contextMenu/menuItem.vue     |  38 +-
 .../contextMenu/menuItemWithSubmenu.vue       |  30 +-
 .../conversation/LabelSuggestion.vue          | 180 ++---
 .../conversationBulkActions/AgentSelector.vue | 174 ++---
 .../conversationBulkActions/Index.vue         | 218 +++---
 .../conversationBulkActions/LabelActions.vue  |  64 +-
 .../conversationBulkActions/TeamActions.vue   |  62 +-
 .../conversationCardComponents/CardLabels.vue |  78 +-
 .../conversation/linear/CreateIssue.vue       | 120 +--
 .../conversation/linear/CreateOrLinkIssue.vue |  86 +--
 .../conversation/linear/IssueHeader.vue       |  52 +-
 .../widgets/conversation/linear/LinkIssue.vue |  94 +--
 .../linear/SearchableDropdown.vue             |  62 +-
 .../widgets/conversation/linear/index.vue     |  82 +--
 .../widgets/forms/AvatarUploader.vue          |  70 +-
 .../components/widgets/forms/Input.vue        |  42 +-
 .../components/widgets/forms/PhoneInput.vue   | 186 ++---
 .../widgets/mentions/MentionBox.vue           |  84 +--
 .../widgets/modal/ConfirmDeleteModal.vue      |  48 +-
 .../widgets/modal/ConfirmationModal.vue       |  30 +-
 .../components/widgets/modal/DeleteModal.vue  |  48 +-
 .../widgets/modal/WootKeyShortcutModal.vue    |  54 +-
 .../modules/contact/ContactMergeModal.vue     |  40 +-
 .../contact/components/AddCustomAttribute.vue |  76 +-
 .../contact/components/ContactAttribute.vue   |  76 +-
 .../components/ContactDropdownItem.vue        |  50 +-
 .../contact/components/ContactFields.vue      | 100 +--
 .../contact/components/ContactIntro.vue       |  86 +--
 .../contact/components/ContactPanel.vue       |  62 +-
 .../contact/components/MergeContact.vue       | 134 ++--
 .../components/MergeContactSummary.vue        |  30 +-
 .../components/MessageContextMenu.vue         | 210 +++---
 .../modules/notes/NotesOnContactPage.vue      |  18 +-
 .../modules/notes/components/AddNote.vue      |  46 +-
 .../modules/notes/components/ContactNote.vue  | 104 +--
 .../modules/notes/components/NoteList.vue     |  48 +-
 .../search/components/MessageContent.vue      |  34 +-
 .../modules/search/components/ReadMore.vue    |  22 +-
 .../search/components/SearchHeader.vue        |  48 +-
 .../modules/search/components/SearchInput.vue |  30 +-
 .../components/SearchResultContactItem.vue    |  48 +-
 .../components/SearchResultContactsList.vue   |  46 +-
 .../SearchResultConversationItem.vue          |  80 +-
 .../SearchResultConversationsList.vue         |  46 +-
 .../components/SearchResultMessagesList.vue   |  56 +-
 .../search/components/SearchResultSection.vue |  32 +-
 .../modules/search/components/SearchTabs.vue  |  26 +-
 .../modules/search/components/SearchView.vue  | 136 ++--
 .../widget-preview/components/Widget.vue      |  98 +--
 .../widget-preview/components/WidgetBody.vue  |  78 +-
 .../components/WidgetFooter.vue               |  36 +-
 .../widget-preview/components/WidgetHead.vue  |  44 +-
 .../dashboard/routes/dashboard/Dashboard.vue  |  82 +--
 .../routes/dashboard/commands/commandbar.vue  |  22 +-
 .../contacts/components/AddReminder.vue       |  86 +--
 .../contacts/components/ContactInfoPanel.vue  | 156 ++--
 .../contacts/components/ContactLabels.vue     |  18 +-
 .../components/ContactsAdvancedFilters.vue    | 180 ++---
 .../contacts/components/ContactsTable.vue     |  58 +-
 .../contacts/components/ContactsView.vue      | 162 ++--
 .../dashboard/contacts/components/Header.vue  | 178 ++---
 .../contacts/components/ImportContacts.vue    |  86 +--
 .../contacts/components/ReminderItem.vue      |  78 +-
 .../contacts/components/SectionHeader.vue     |  36 +-
 .../contacts/components/TimelineCard.vue      |  58 +-
 .../contacts/pages/ContactManageView.vue      | 110 +--
 .../conversation/ContactConversations.vue     |  46 +-
 .../conversation/ContactCustomAttributes.vue  |  40 +-
 .../conversation/ContactDetailsItem.vue       |  24 +-
 .../dashboard/conversation/ContactPanel.vue   | 266 +++----
 .../conversation/ConversationAction.vue       | 162 ++--
 .../conversation/ConversationParticipant.vue  | 158 ++--
 .../conversation/ConversationView.vue         |  72 +-
 .../dashboard/conversation/Macros/List.vue    |  54 +-
 .../conversation/Macros/MacroItem.vue         |  68 +-
 .../conversation/Macros/MacroPreview.vue      |  54 +-
 .../conversation/contact/ContactForm.vue      | 302 ++++----
 .../conversation/contact/ContactInfo.vue      | 334 ++++-----
 .../conversation/contact/ContactInfoRow.vue   |  80 +-
 .../conversation/contact/ConversationForm.vue | 478 ++++++------
 .../conversation/contact/CreateContact.vue    |  36 +-
 .../conversation/contact/EditContact.vue      |  42 +-
 .../conversation/contact/NewConversation.vue  |  36 +-
 .../conversation/contact/SocialIcons.vue      |  36 +-
 .../contact/WhatsappTemplates.vue             |  32 +-
 .../customAttributes/CustomAttributes.vue     |  84 +--
 .../conversation/labels/LabelBox.vue          |  90 +--
 .../conversation/search/PopOverSearch.vue     |  68 +-
 .../conversation/search/SwitchLayout.vue      |  26 +-
 .../dashboard/customviews/AddCustomViews.vue  |  60 +-
 .../customviews/DeleteCustomViews.vue         |  34 +-
 .../helpcenter/components/AddLocale.vue       |  80 +-
 .../helpcenter/components/ArticleEditor.vue   |  48 +-
 .../helpcenter/components/ArticleItem.vue     | 166 ++---
 .../ArticleSearch/ArticleSearchResultItem.vue |  86 +--
 .../components/ArticleSearch/ArticleView.vue  |  54 +-
 .../components/ArticleSearch/Header.vue       |  70 +-
 .../ArticleSearch/SearchPopover.vue           |  68 +-
 .../ArticleSearch/SearchResults.vue           |  56 +-
 .../helpcenter/components/ArticleTable.vue    | 134 ++--
 .../components/Header/ArticleHeader.vue       | 176 ++---
 .../components/Header/EditArticleHeader.vue   | 218 +++---
 .../components/HelpCenterLayout.vue           | 118 +--
 .../helpcenter/components/PortalListItem.vue  | 374 +++++-----
 .../components/PortalListItemTable.vue        |  52 +-
 .../helpcenter/components/PortalPopover.vue   |  76 +-
 .../helpcenter/components/PortalSwitch.vue    | 142 ++--
 .../helpcenter/components/Sidebar/Sidebar.vue |  78 +-
 .../components/Sidebar/SidebarHeader.vue      |  70 +-
 .../components/Sidebar/SidebarSearch.vue      |  28 +-
 .../helpcenter/components/UpgradePage.vue     | 126 ++--
 .../pages/articles/ArticleSettings.vue        | 242 +++---
 .../pages/articles/DefaultPortalArticles.vue  |  16 +-
 .../helpcenter/pages/articles/EditArticle.vue |  96 +--
 .../pages/articles/ListAllArticles.vue        |  78 +-
 .../helpcenter/pages/articles/NewArticle.vue  |  50 +-
 .../pages/categories/AddCategory.vue          | 136 ++--
 .../pages/categories/CategoryListItem.vue     |  40 +-
 .../pages/categories/EditCategory.vue         | 140 ++--
 .../pages/categories/NameEmojiInput.vue       |  74 +-
 .../helpcenter/pages/portals/EditPortal.vue   |  66 +-
 .../pages/portals/ListAllPortals.vue          | 106 +--
 .../helpcenter/pages/portals/NewPortal.vue    |  56 +-
 .../pages/portals/PortalDetails.vue           |  24 +-
 .../pages/portals/PortalSettingsFinish.vue    |  16 +-
 .../dashboard/inbox/InboxEmptyState.vue       |  36 +-
 .../routes/dashboard/inbox/InboxList.vue      |  92 +--
 .../routes/dashboard/inbox/InboxView.vue      |  70 +-
 .../dashboard/inbox/components/InboxCard.vue  | 118 +--
 .../inbox/components/InboxContextMenu.vue     |  38 +-
 .../inbox/components/InboxDisplayMenu.vue     | 196 ++---
 .../inbox/components/InboxItemHeader.vue      | 112 +--
 .../inbox/components/InboxListHeader.vue      | 116 +--
 .../inbox/components/InboxOptionMenu.vue      |  30 +-
 .../inbox/components/PaginationButton.vue     |  68 +-
 .../dashboard/inbox/components/StatusIcon.vue |  36 +-
 .../components/NotificationPanel.vue          | 230 +++---
 .../components/NotificationPanelItem.vue      |  76 +-
 .../components/NotificationPanelList.vue      |  70 +-
 .../components/NotificationTable.vue          |  98 +--
 .../components/NotificationsView.vue          |  42 +-
 .../dashboard/settings/SettingsHeader.vue     |  72 +-
 .../settings/SettingsSubPageHeader.vue        |  18 +-
 .../routes/dashboard/settings/Wrapper.vue     |  42 +-
 .../dashboard/settings/account/Index.vue      | 260 +++----
 .../dashboard/settings/agentBots/Index.vue    |  92 +--
 .../agentBots/components/AgentBotRow.vue      |  48 +-
 .../agentBots/components/AgentBotType.vue     |  22 +-
 .../agentBots/components/CSMLBotEditor.vue    |  92 +--
 .../agentBots/components/CSMLMonacoEditor.vue |  28 +-
 .../settings/agentBots/csml/Edit.vue          |  20 +-
 .../dashboard/settings/agentBots/csml/New.vue |   8 +-
 .../dashboard/settings/agents/AddAgent.vue    | 136 ++--
 .../dashboard/settings/agents/EditAgent.vue   | 156 ++--
 .../dashboard/settings/agents/Index.vue       | 248 +++----
 .../settings/attributes/AddAttribute.vue      | 254 +++----
 .../settings/attributes/CustomAttribute.vue   | 212 +++---
 .../settings/attributes/EditAttribute.vue     | 218 +++---
 .../dashboard/settings/attributes/Index.vue   |  34 +-
 .../dashboard/settings/auditlogs/Index.vue    | 128 ++--
 .../settings/automation/AddAutomationRule.vue | 190 ++---
 .../automation/EditAutomationRule.vue         | 150 ++--
 .../dashboard/settings/automation/Index.vue   | 250 +++----
 .../dashboard/settings/billing/Index.vue      |  74 +-
 .../billing/components/BillingItem.vue        |  30 +-
 .../settings/campaigns/AddCampaign.vue        | 352 ++++-----
 .../dashboard/settings/campaigns/Campaign.vue |  54 +-
 .../settings/campaigns/CampaignCard.vue       | 100 +--
 .../settings/campaigns/CampaignsTable.vue     |  44 +-
 .../settings/campaigns/EditCampaign.vue       | 226 +++---
 .../dashboard/settings/campaigns/Index.vue    |  34 +-
 .../dashboard/settings/canned/AddCanned.vue   | 110 +--
 .../dashboard/settings/canned/EditCanned.vue  | 104 +--
 .../dashboard/settings/canned/Index.vue       | 232 +++---
 .../dashboard/settings/inbox/AddAgents.vue    |  92 +--
 .../dashboard/settings/inbox/ChannelList.vue  |  56 +-
 .../dashboard/settings/inbox/FinishSetup.vue  | 144 ++--
 .../dashboard/settings/inbox/ImapSettings.vue | 146 ++--
 .../settings/inbox/InboxChannels.vue          |  26 +-
 .../routes/dashboard/settings/inbox/Index.vue | 184 ++---
 .../inbox/PreChatForm/PreChatFields.vue       |  68 +-
 .../settings/inbox/PreChatForm/Settings.vue   | 158 ++--
 .../dashboard/settings/inbox/Settings.vue     | 696 +++++++++---------
 .../dashboard/settings/inbox/SmtpSettings.vue | 178 ++---
 .../settings/inbox/WidgetBuilder.vue          | 308 ++++----
 .../inbox/channels/360DialogWhatsapp.vue      | 116 +--
 .../dashboard/settings/inbox/channels/Api.vue | 106 +--
 .../settings/inbox/channels/BandwidthSms.vue  | 148 ++--
 .../settings/inbox/channels/CloudWhatsapp.vue | 146 ++--
 .../settings/inbox/channels/Email.vue         |  50 +-
 .../settings/inbox/channels/Facebook.vue      | 186 ++---
 .../settings/inbox/channels/Line.vue          | 140 ++--
 .../dashboard/settings/inbox/channels/Sms.vue |  38 +-
 .../settings/inbox/channels/Telegram.vue      |  72 +-
 .../settings/inbox/channels/Twilio.vue        | 218 +++---
 .../settings/inbox/channels/Twitter.vue       |  34 +-
 .../settings/inbox/channels/Website.vue       | 146 ++--
 .../settings/inbox/channels/Whatsapp.vue      |  42 +-
 .../emailChannels/ForwardToOption.vue         | 102 +--
 .../inbox/components/BotConfiguration.vue     | 100 +--
 .../settings/inbox/components/BusinessDay.vue | 138 ++--
 .../inbox/components/InputRadioGroup.vue      |  40 +-
 .../components/SenderNameExamplePreview.vue   |  90 +--
 .../inbox/components/SingleSelectDropdown.vue |  34 +-
 .../inbox/components/WeeklyAvailability.vue   | 154 ++--
 .../settings/inbox/facebook/Reauthorize.vue   |   8 +-
 .../inbox/settingsPage/CollaboratorsPage.vue  | 156 ++--
 .../inbox/settingsPage/ConfigurationPage.vue  | 174 ++---
 .../DashboardApps/DashboardAppModal.vue       | 108 +--
 .../DashboardApps/DashboardAppsRow.vue        |  30 +-
 .../integrations/DashboardApps/Index.vue      | 150 ++--
 .../settings/integrations/Integration.vue     | 124 ++--
 .../integrations/IntegrationHooks.vue         |  86 +--
 .../integrations/MultipleIntegrationHooks.vue |  80 +-
 .../settings/integrations/NewHook.vue         |  76 +-
 .../settings/integrations/ShowIntegration.vue |  58 +-
 .../integrations/SingleIntegrationHooks.vue   |  24 +-
 .../dashboard/settings/integrations/Slack.vue |  72 +-
 .../Slack/SelectChannelWarning.vue            | 106 +--
 .../Slack/SlackIntegrationHelpText.vue        |  24 +-
 .../integrations/Webhooks/EditWebHook.vue     |  30 +-
 .../settings/integrations/Webhooks/Index.vue  | 150 ++--
 .../integrations/Webhooks/NewWebHook.vue      |  40 +-
 .../integrations/Webhooks/WebhookForm.vue     | 112 +--
 .../integrations/Webhooks/WebhookRow.vue      |  50 +-
 .../dashboard/settings/labels/AddLabel.vue    | 112 +--
 .../dashboard/settings/labels/EditLabel.vue   |  98 +--
 .../dashboard/settings/labels/Index.vue       | 170 ++---
 .../dashboard/settings/macros/Index.vue       | 110 +--
 .../dashboard/settings/macros/MacroEditor.vue |  28 +-
 .../dashboard/settings/macros/MacroForm.vue   |  50 +-
 .../dashboard/settings/macros/MacroNode.vue   |  80 +-
 .../dashboard/settings/macros/MacroNodes.vue  |  76 +-
 .../settings/macros/MacroProperties.vue       |  58 +-
 .../settings/macros/MacrosTableRow.vue        |  64 +-
 .../settings/profile/AccessToken.vue          |  46 +-
 .../settings/profile/AudioAlertCondition.vue  |  34 +-
 .../settings/profile/AudioAlertEvent.vue      |  54 +-
 .../settings/profile/AudioAlertTone.vue       |  40 +-
 .../settings/profile/AudioNotifications.vue   |  60 +-
 .../settings/profile/ChangePassword.vue       | 122 +--
 .../dashboard/settings/profile/HotKeyCard.vue |  50 +-
 .../dashboard/settings/profile/Index.vue      | 164 ++---
 .../settings/profile/MessageSignature.vue     |  44 +-
 .../settings/profile/NotificationCheckBox.vue |  30 +-
 .../profile/NotificationPreferences.vue       | 264 +++----
 .../settings/profile/UserBasicDetails.vue     |  96 +--
 .../settings/profile/UserProfilePicture.vue   |  26 +-
 .../dashboard/settings/profile/Wrapper.vue    |  18 +-
 .../settings/reports/AgentReports.vue         |  20 +-
 .../dashboard/settings/reports/BotReports.vue |  34 +-
 .../settings/reports/CsatResponses.vue        |  44 +-
 .../settings/reports/InboxReports.vue         |  20 +-
 .../dashboard/settings/reports/Index.vue      |  38 +-
 .../settings/reports/LabelReports.vue         |  20 +-
 .../settings/reports/LiveReports.vue          | 144 ++--
 .../settings/reports/ReportContainer.vue      |  64 +-
 .../dashboard/settings/reports/SLAReports.vue |  56 +-
 .../settings/reports/TeamReports.vue          |  20 +-
 .../components/ChartElements/ChartStats.vue   |  48 +-
 .../reports/components/CsatMetrics.vue        |  98 +--
 .../settings/reports/components/CsatTable.vue |  46 +-
 .../reports/components/FilterSelector.vue     | 104 +--
 .../reports/components/Filters/Agents.vue     |  40 +-
 .../components/Filters/DateGroupBy.vue        |  38 +-
 .../reports/components/Filters/DateRange.vue  |  38 +-
 .../reports/components/Filters/Inboxes.vue    |  30 +-
 .../reports/components/Filters/Labels.vue     |  50 +-
 .../reports/components/Filters/Ratings.vue    |  32 +-
 .../reports/components/Filters/Teams.vue      |  30 +-
 .../reports/components/ReportFilters.vue      | 282 +++----
 .../reports/components/SLA/SLAFilter.vue      | 116 +--
 .../reports/components/SLA/SLAMetricCard.vue  |  44 +-
 .../reports/components/SLA/SLAMetrics.vue     |  44 +-
 .../components/SLA/SLAReportFilters.vue       |  12 +-
 .../reports/components/SLA/SLATable.vue       | 110 +--
 .../reports/components/SLA/SLAViewDetails.vue |  46 +-
 .../reports/components/WootReports.vue        |  50 +-
 .../components/overview/AgentTable.vue        |  60 +-
 .../components/overview/MetricCard.vue        |  48 +-
 .../routes/dashboard/settings/sla/AddSLA.vue  |  28 +-
 .../routes/dashboard/settings/sla/Index.vue   | 108 +--
 .../routes/dashboard/settings/sla/SlaForm.vue | 138 ++--
 .../dashboard/settings/sla/SlaTimeInput.vue   |  70 +-
 .../settings/teams/AgentSelector.vue          | 140 ++--
 .../settings/teams/Create/AddAgents.vue       |  66 +-
 .../settings/teams/Create/CreateTeam.vue      |  36 +-
 .../dashboard/settings/teams/Create/Index.vue |  18 +-
 .../settings/teams/Edit/EditAgents.vue        |  74 +-
 .../settings/teams/Edit/EditTeam.vue          |  42 +-
 .../dashboard/settings/teams/Edit/Index.vue   |  18 +-
 .../dashboard/settings/teams/FinishSetup.vue  |  20 +-
 .../routes/dashboard/settings/teams/Index.vue | 144 ++--
 .../dashboard/settings/teams/TeamForm.vue     |  84 +--
 .../portal/components/PublicArticleSearch.vue |  48 +-
 .../portal/components/PublicSearchInput.vue   |  44 +-
 .../portal/components/SearchSuggestions.vue   | 102 +--
 .../portal/components/TableOfContents.vue     |  60 +-
 app/javascript/shared/components/Branding.vue |  48 +-
 app/javascript/shared/components/Button.vue   |  20 +-
 .../shared/components/CardButton.vue          |  52 +-
 app/javascript/shared/components/ChatCard.vue |  44 +-
 app/javascript/shared/components/ChatForm.vue | 158 ++--
 .../shared/components/ChatOption.vue          |  24 +-
 .../shared/components/ChatOptions.vue         |  52 +-
 .../components/CustomerSatisfaction.vue       |  94 +--
 .../shared/components/DateSeparator.vue       |  18 +-
 .../shared/components/EmojiOrIcon.vue         |  22 +-
 .../components/FluentIcon/DashboardIcon.vue   |  20 +-
 .../shared/components/FluentIcon/Icon.vue     |  68 +-
 .../shared/components/FluentIcon/Index.vue    |  20 +-
 .../shared/components/GreetingsEditor.vue     |  58 +-
 .../shared/components/IframeLoader.vue        |  44 +-
 .../shared/components/ResizableTextArea.vue   |  26 +-
 app/javascript/shared/components/Spinner.vue  |   6 +-
 app/javascript/shared/components/TextArea.vue |  56 +-
 .../shared/components/emoji/EmojiInput.vue    | 170 ++---
 .../components/ui/MultiselectDropdown.vue     | 136 ++--
 .../ui/MultiselectDropdownItems.vue           | 126 ++--
 .../components/ui/dropdown/AddLabel.vue       |  20 +-
 .../ui/dropdown/DropdownDivider.vue           |   6 +-
 .../components/ui/dropdown/DropdownHeader.vue |  20 +-
 .../components/ui/dropdown/DropdownItem.vue   |  24 +-
 .../components/ui/dropdown/DropdownMenu.vue   |  18 +-
 .../ui/dropdown/DropdownSubMenu.vue           |  16 +-
 .../components/ui/label/LabelDropdown.vue     | 154 ++--
 .../components/ui/label/LabelDropdownItem.vue |  44 +-
 .../shared/mixins/specs/MockComponent.vue     |   8 +-
 .../views/playground/Index.vue                |  68 +-
 app/javascript/survey/App.vue                 |  12 +-
 app/javascript/survey/components/Banner.vue   |  26 +-
 app/javascript/survey/components/Feedback.vue |  38 +-
 app/javascript/survey/components/Rating.vue   |  30 +-
 app/javascript/survey/views/Response.vue      | 106 +--
 app/javascript/v3/App.vue                     |  12 +-
 .../v3/components/Button/SubmitButton.vue     |  30 +-
 .../v3/components/Divider/SimpleDivider.vue   |  20 +-
 app/javascript/v3/components/Form/Button.vue  |  54 +-
 .../v3/components/Form/CheckBox.vue           |  20 +-
 .../v3/components/Form/InitialsAvatar.vue     |  22 +-
 app/javascript/v3/components/Form/Input.vue   |  72 +-
 .../v3/components/Form/ProfileAvatar.vue      |  74 +-
 .../v3/components/Form/RadioTags.vue          |  44 +-
 app/javascript/v3/components/Form/Select.vue  |  64 +-
 app/javascript/v3/components/Form/Switch.vue  |  26 +-
 .../v3/components/Form/Textarea.vue           |  56 +-
 .../v3/components/Form/WithLabel.vue          |  52 +-
 .../v3/components/GoogleOauth/Button.vue      |  40 +-
 .../v3/components/SnackBar/Container.vue      |  30 +-
 .../v3/components/SnackBar/Item.vue           |  32 +-
 .../v3/views/auth/confirmation/Index.vue      |  12 +-
 .../v3/views/auth/password/Edit.vue           |  98 +--
 .../v3/views/auth/reset/password/Index.vue    |  96 +--
 app/javascript/v3/views/auth/signup/Index.vue |  68 +-
 .../auth/signup/components/Signup/Form.vue    | 160 ++--
 .../signup/components/Testimonials/Index.vue  |  52 +-
 .../Testimonials/TestimonialCard.vue          |  36 +-
 app/javascript/v3/views/login/Index.vue       | 184 ++---
 .../v3/views/onboarding/OnboardingStep.vue    |  48 +-
 app/javascript/widget/App.vue                 |  46 +-
 .../widget/components/AgentMessage.vue        | 176 ++---
 .../widget/components/AgentMessageBubble.vue  | 122 +--
 .../widget/components/AgentTypingBubble.vue   |  16 +-
 .../widget/components/ArticleCategoryCard.vue |  34 +-
 .../widget/components/ArticleHero.vue         |  18 +-
 .../widget/components/ArticleList.vue         |  24 +-
 .../widget/components/ArticleListItem.vue     |  30 +-
 .../widget/components/ArticleSearch.vue       |  52 +-
 .../widget/components/AvailableAgents.vue     |   8 +-
 app/javascript/widget/components/Banner.vue   |  16 +-
 .../widget/components/ChatAttachment.vue      |  36 +-
 .../widget/components/ChatFooter.vue          |  84 +--
 .../widget/components/ChatHeader.vue          |  92 +--
 .../widget/components/ChatHeaderExpanded.vue  |  62 +-
 .../widget/components/ChatInputWrap.vue       |  98 +--
 .../widget/components/ChatMessage.vue         |  30 +-
 .../widget/components/ChatSendButton.vue      |  24 +-
 .../widget/components/ContinueChatButton.vue  |  44 +-
 .../widget/components/ConversationWrap.vue    |  46 +-
 .../widget/components/DragWrapper.vue         |  24 +-
 .../widget/components/FileBubble.vue          |  48 +-
 .../widget/components/FooterReplyTo.vue       |  34 +-
 .../widget/components/Form/Input.vue          |  56 +-
 .../widget/components/Form/PhoneInput.vue     | 174 ++---
 .../widget/components/Form/TextArea.vue       |  42 +-
 .../widget/components/GroupedAvatars.vue      |  30 +-
 .../widget/components/HeaderActions.vue       |  88 +--
 .../widget/components/ImageBubble.vue         |  36 +-
 .../widget/components/MessageReplyButton.vue  |  18 +-
 .../widget/components/PreChat/Form.vue        | 126 ++--
 .../widget/components/ReplyToChip.vue         |  24 +-
 .../widget/components/SearchArticle.vue       |  52 +-
 .../widget/components/TeamAvailability.vue    |  68 +-
 .../widget/components/UnreadMessage.vue       |  50 +-
 .../widget/components/UnreadMessageList.vue   |  92 +--
 .../widget/components/UserAvatar.vue          |   6 +-
 .../widget/components/UserMessage.vue         | 156 ++--
 .../widget/components/UserMessageBubble.vue   |  16 +-
 .../components/dropdown/DropdownMenu.vue      |  68 +-
 .../components/dropdown/DropdownMenuItem.vue  |  22 +-
 .../components/layouts/ViewWithHeader.vue     |  78 +-
 .../widget/components/template/Article.vue    |  38 +-
 .../widget/components/template/EmailInput.vue |  62 +-
 .../components/template/IntegrationCard.vue   |  60 +-
 app/javascript/widget/views/ArticleViewer.vue |  12 +-
 app/javascript/widget/views/Campaigns.vue     |   8 +-
 app/javascript/widget/views/Home.vue          |  70 +-
 app/javascript/widget/views/Messages.vue      |  20 +-
 app/javascript/widget/views/PreChatForm.vue   |  10 +-
 .../widget/views/UnreadMessages.vue           |   8 +-
 544 files changed, 21263 insertions(+), 21256 deletions(-)

diff --git a/.eslintrc.js b/.eslintrc.js
index 18162ee76..1481e550f 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -27,6 +27,12 @@ module.exports = {
     'import/no-unresolved': 'off',
     'vue/html-indent': 'off',
     'vue/multi-word-component-names': 'off',
+    'vue/component-tags-order': [
+      'error',
+      {
+        order: ['script', 'template', 'style'],
+      },
+    ],
     'vue/max-attributes-per-line': [
       'error',
       {
diff --git a/app/javascript/dashboard/App.vue b/app/javascript/dashboard/App.vue
index c343fbe4f..67bb3d692 100644
--- a/app/javascript/dashboard/App.vue
+++ b/app/javascript/dashboard/App.vue
@@ -1,30 +1,3 @@
-<template>
-  <div
-    v-if="!authUIFlags.isFetching && !accountUIFlags.isFetchingItem"
-    id="app"
-    class="flex-grow-0 w-full h-full min-h-0 app-wrapper"
-    :class="{ 'app-rtl--wrapper': isRTLView }"
-    :dir="isRTLView ? 'rtl' : 'ltr'"
-  >
-    <update-banner :latest-chatwoot-version="latestChatwootVersion" />
-    <template v-if="currentAccountId">
-      <pending-email-verification-banner v-if="hideOnOnboardingView" />
-      <payment-pending-banner v-if="hideOnOnboardingView" />
-      <upgrade-banner />
-    </template>
-    <transition name="fade" mode="out-in">
-      <router-view />
-    </transition>
-    <add-account-modal
-      :show="showAddAccountModal"
-      :has-accounts="hasAccounts"
-    />
-    <woot-snackbar-box />
-    <network-notification />
-  </div>
-  <loading-state v-else />
-</template>
-
 <script>
 import { mapGetters } from 'vuex';
 import router from '../dashboard/routes';
@@ -147,6 +120,33 @@ export default {
 };
 </script>
 
+<template>
+  <div
+    v-if="!authUIFlags.isFetching && !accountUIFlags.isFetchingItem"
+    id="app"
+    class="flex-grow-0 w-full h-full min-h-0 app-wrapper"
+    :class="{ 'app-rtl--wrapper': isRTLView }"
+    :dir="isRTLView ? 'rtl' : 'ltr'"
+  >
+    <update-banner :latest-chatwoot-version="latestChatwootVersion" />
+    <template v-if="currentAccountId">
+      <pending-email-verification-banner v-if="hideOnOnboardingView" />
+      <payment-pending-banner v-if="hideOnOnboardingView" />
+      <upgrade-banner />
+    </template>
+    <transition name="fade" mode="out-in">
+      <router-view />
+    </transition>
+    <add-account-modal
+      :show="showAddAccountModal"
+      :has-accounts="hasAccounts"
+    />
+    <woot-snackbar-box />
+    <network-notification />
+  </div>
+  <loading-state v-else />
+</template>
+
 <style lang="scss">
 @import './assets/scss/app';
 </style>
diff --git a/app/javascript/dashboard/components/Accordion/AccordionItem.vue b/app/javascript/dashboard/components/Accordion/AccordionItem.vue
index 87370185d..fc152ff51 100644
--- a/app/javascript/dashboard/components/Accordion/AccordionItem.vue
+++ b/app/javascript/dashboard/components/Accordion/AccordionItem.vue
@@ -1,35 +1,3 @@
-<template>
-  <div class="-mt-px text-sm">
-    <button
-      class="flex items-center select-none w-full rounded-none bg-slate-50 dark:bg-slate-800 border border-l-0 border-r-0 border-solid m-0 border-slate-100 dark:border-slate-700/50 cursor-grab justify-between py-2 px-4 drag-handle"
-      @click="$emit('click')"
-    >
-      <div class="flex justify-between mb-0.5">
-        <emoji-or-icon 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"
-        >
-          {{ title }}
-        </h5>
-      </div>
-      <div class="flex flex-row">
-        <slot name="button" />
-        <div class="flex justify-end w-3 text-woot-500">
-          <fluent-icon v-if="isOpen" size="24" icon="subtract" type="solid" />
-          <fluent-icon v-else size="24" icon="add" type="solid" />
-        </div>
-      </div>
-    </button>
-    <div
-      v-if="isOpen"
-      class="bg-white dark:bg-slate-900"
-      :class="compact ? 'p-0' : 'p-4'"
-    >
-      <slot />
-    </div>
-  </div>
-</template>
-
 <script>
 import EmojiOrIcon from 'shared/components/EmojiOrIcon.vue';
 
@@ -61,3 +29,35 @@ export default {
   },
 };
 </script>
+
+<template>
+  <div class="-mt-px text-sm">
+    <button
+      class="flex items-center select-none w-full rounded-none bg-slate-50 dark:bg-slate-800 border border-l-0 border-r-0 border-solid m-0 border-slate-100 dark:border-slate-700/50 cursor-grab justify-between py-2 px-4 drag-handle"
+      @click="$emit('click')"
+    >
+      <div class="flex justify-between mb-0.5">
+        <emoji-or-icon 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"
+        >
+          {{ title }}
+        </h5>
+      </div>
+      <div class="flex flex-row">
+        <slot name="button" />
+        <div class="flex justify-end w-3 text-woot-500">
+          <fluent-icon v-if="isOpen" size="24" icon="subtract" type="solid" />
+          <fluent-icon v-else size="24" icon="add" type="solid" />
+        </div>
+      </div>
+    </button>
+    <div
+      v-if="isOpen"
+      class="bg-white dark:bg-slate-900"
+      :class="compact ? 'p-0' : 'p-4'"
+    >
+      <slot />
+    </div>
+  </div>
+</template>
diff --git a/app/javascript/dashboard/components/ChannelSelector.vue b/app/javascript/dashboard/components/ChannelSelector.vue
index 6cff70bd3..2322edbfb 100644
--- a/app/javascript/dashboard/components/ChannelSelector.vue
+++ b/app/javascript/dashboard/components/ChannelSelector.vue
@@ -1,17 +1,3 @@
-<template>
-  <button
-    class="bg-white dark:bg-slate-900 cursor-pointer flex flex-col justify-end transition-all duration-200 ease-in -m-px py-4 px-0 items-center border border-solid border-slate-25 dark:border-slate-800 hover:border-woot-500 dark:hover:border-woot-500 hover:shadow-md hover:z-50 disabled:opacity-60"
-    @click="$emit('click')"
-  >
-    <img :src="src" :alt="title" class="w-1/2 my-4 mx-auto" />
-    <h3
-      class="text-slate-800 dark:text-slate-100 text-base text-center capitalize"
-    >
-      {{ title }}
-    </h3>
-  </button>
-</template>
-
 <script>
 export default {
   props: {
@@ -27,6 +13,20 @@ export default {
 };
 </script>
 
+<template>
+  <button
+    class="bg-white dark:bg-slate-900 cursor-pointer flex flex-col justify-end transition-all duration-200 ease-in -m-px py-4 px-0 items-center border border-solid border-slate-25 dark:border-slate-800 hover:border-woot-500 dark:hover:border-woot-500 hover:shadow-md hover:z-50 disabled:opacity-60"
+    @click="$emit('click')"
+  >
+    <img :src="src" :alt="title" class="w-1/2 my-4 mx-auto" />
+    <h3
+      class="text-slate-800 dark:text-slate-100 text-base text-center capitalize"
+    >
+      {{ title }}
+    </h3>
+  </button>
+</template>
+
 <style scoped lang="scss">
 .inactive {
   img {
diff --git a/app/javascript/dashboard/components/ChatList.vue b/app/javascript/dashboard/components/ChatList.vue
index faff1c4a9..f1d24cafe 100644
--- a/app/javascript/dashboard/components/ChatList.vue
+++ b/app/javascript/dashboard/components/ChatList.vue
@@ -1,119 +1,3 @@
-<template>
-  <div
-    class="flex flex-col flex-shrink-0 overflow-hidden border-r conversations-list-wrap rtl:border-r-0 rtl:border-l border-slate-50 dark:border-slate-800/50"
-    :class="[
-      { hidden: !showConversationList },
-      isOnExpandedLayout ? 'basis-full' : 'flex-basis-clamp',
-    ]"
-  >
-    <slot />
-    <chat-list-header
-      :page-title="pageTitle"
-      :has-applied-filters="hasAppliedFilters"
-      :has-active-folders="hasActiveFolders"
-      :active-status="activeStatus"
-      @add-folders="onClickOpenAddFoldersModal"
-      @delete-folders="onClickOpenDeleteFoldersModal"
-      @filters-modal="onToggleAdvanceFiltersModal"
-      @reset-filters="resetAndFetchData"
-      @basic-filter-change="onBasicFilterChange"
-    />
-
-    <add-custom-views
-      v-if="showAddFoldersModal"
-      :custom-views-query="foldersQuery"
-      :open-last-saved-item="openLastSavedItemInFolder"
-      @close="onCloseAddFoldersModal"
-    />
-
-    <delete-custom-views
-      v-if="showDeleteFoldersModal"
-      :show-delete-popup.sync="showDeleteFoldersModal"
-      :active-custom-view="activeFolder"
-      :custom-views-id="foldersId"
-      :open-last-item-after-delete="openLastItemAfterDeleteInFolder"
-      @close="onCloseDeleteFoldersModal"
-    />
-
-    <chat-type-tabs
-      v-if="!hasAppliedFiltersOrActiveFolders"
-      :items="assigneeTabItems"
-      :active-tab="activeAssigneeTab"
-      class="tab--chat-type"
-      @chatTabChange="updateAssigneeTab"
-    />
-
-    <p
-      v-if="!chatListLoading && !conversationList.length"
-      class="flex items-center justify-center p-4 overflow-auto"
-    >
-      {{ $t('CHAT_LIST.LIST.404') }}
-    </p>
-    <conversation-bulk-actions
-      v-if="selectedConversations.length"
-      :conversations="selectedConversations"
-      :all-conversations-selected="allConversationsSelected"
-      :selected-inboxes="uniqueInboxes"
-      :show-open-action="allSelectedConversationsStatus('open')"
-      :show-resolved-action="allSelectedConversationsStatus('resolved')"
-      :show-snoozed-action="allSelectedConversationsStatus('snoozed')"
-      @select-all-conversations="selectAllConversations"
-      @assign-agent="onAssignAgent"
-      @update-conversations="onUpdateConversations"
-      @assign-labels="onAssignLabels"
-      @assign-team="onAssignTeamsForBulk"
-    />
-    <div
-      ref="conversationList"
-      class="flex-1 conversations-list"
-      :class="{ 'overflow-hidden': isContextMenuOpen }"
-    >
-      <virtual-list
-        ref="conversationVirtualList"
-        :data-key="'id'"
-        :data-sources="conversationList"
-        :data-component="itemComponent"
-        :extra-props="virtualListExtraProps"
-        class="w-full h-full overflow-auto"
-        footer-tag="div"
-      >
-        <template #footer>
-          <div v-if="chatListLoading" class="text-center">
-            <span class="mt-4 mb-4 spinner" />
-          </div>
-          <p
-            v-if="showEndOfListMessage"
-            class="p-4 text-center text-slate-400 dark:text-slate-300"
-          >
-            {{ $t('CHAT_LIST.EOF') }}
-          </p>
-          <intersection-observer
-            v-if="!showEndOfListMessage && !chatListLoading"
-            :options="infiniteLoaderOptions"
-            @observed="loadMoreConversations"
-          />
-        </template>
-      </virtual-list>
-    </div>
-    <woot-modal
-      :show.sync="showAdvancedFilters"
-      :on-close="closeAdvanceFiltersModal"
-      size="medium"
-    >
-      <conversation-advanced-filter
-        v-if="showAdvancedFilters"
-        :initial-filter-types="advancedFilterTypes"
-        :initial-applied-filters="appliedFilter"
-        :active-folder-name="activeFolderName"
-        :on-close="closeAdvanceFiltersModal"
-        :is-folder-view="hasActiveFolders"
-        @applyFilter="onApplyFilter"
-        @updateFolder="onUpdateSavedFilter"
-      />
-    </woot-modal>
-  </div>
-</template>
-
 <script>
 import { mapGetters } from 'vuex';
 import { useUISettings } from 'dashboard/composables/useUISettings';
@@ -980,6 +864,122 @@ export default {
   },
 };
 </script>
+
+<template>
+  <div
+    class="flex flex-col flex-shrink-0 overflow-hidden border-r conversations-list-wrap rtl:border-r-0 rtl:border-l border-slate-50 dark:border-slate-800/50"
+    :class="[
+      { hidden: !showConversationList },
+      isOnExpandedLayout ? 'basis-full' : 'flex-basis-clamp',
+    ]"
+  >
+    <slot />
+    <chat-list-header
+      :page-title="pageTitle"
+      :has-applied-filters="hasAppliedFilters"
+      :has-active-folders="hasActiveFolders"
+      :active-status="activeStatus"
+      @add-folders="onClickOpenAddFoldersModal"
+      @delete-folders="onClickOpenDeleteFoldersModal"
+      @filters-modal="onToggleAdvanceFiltersModal"
+      @reset-filters="resetAndFetchData"
+      @basic-filter-change="onBasicFilterChange"
+    />
+
+    <add-custom-views
+      v-if="showAddFoldersModal"
+      :custom-views-query="foldersQuery"
+      :open-last-saved-item="openLastSavedItemInFolder"
+      @close="onCloseAddFoldersModal"
+    />
+
+    <delete-custom-views
+      v-if="showDeleteFoldersModal"
+      :show-delete-popup.sync="showDeleteFoldersModal"
+      :active-custom-view="activeFolder"
+      :custom-views-id="foldersId"
+      :open-last-item-after-delete="openLastItemAfterDeleteInFolder"
+      @close="onCloseDeleteFoldersModal"
+    />
+
+    <chat-type-tabs
+      v-if="!hasAppliedFiltersOrActiveFolders"
+      :items="assigneeTabItems"
+      :active-tab="activeAssigneeTab"
+      class="tab--chat-type"
+      @chatTabChange="updateAssigneeTab"
+    />
+
+    <p
+      v-if="!chatListLoading && !conversationList.length"
+      class="flex items-center justify-center p-4 overflow-auto"
+    >
+      {{ $t('CHAT_LIST.LIST.404') }}
+    </p>
+    <conversation-bulk-actions
+      v-if="selectedConversations.length"
+      :conversations="selectedConversations"
+      :all-conversations-selected="allConversationsSelected"
+      :selected-inboxes="uniqueInboxes"
+      :show-open-action="allSelectedConversationsStatus('open')"
+      :show-resolved-action="allSelectedConversationsStatus('resolved')"
+      :show-snoozed-action="allSelectedConversationsStatus('snoozed')"
+      @select-all-conversations="selectAllConversations"
+      @assign-agent="onAssignAgent"
+      @update-conversations="onUpdateConversations"
+      @assign-labels="onAssignLabels"
+      @assign-team="onAssignTeamsForBulk"
+    />
+    <div
+      ref="conversationList"
+      class="flex-1 conversations-list"
+      :class="{ 'overflow-hidden': isContextMenuOpen }"
+    >
+      <virtual-list
+        ref="conversationVirtualList"
+        :data-key="'id'"
+        :data-sources="conversationList"
+        :data-component="itemComponent"
+        :extra-props="virtualListExtraProps"
+        class="w-full h-full overflow-auto"
+        footer-tag="div"
+      >
+        <template #footer>
+          <div v-if="chatListLoading" class="text-center">
+            <span class="mt-4 mb-4 spinner" />
+          </div>
+          <p
+            v-if="showEndOfListMessage"
+            class="p-4 text-center text-slate-400 dark:text-slate-300"
+          >
+            {{ $t('CHAT_LIST.EOF') }}
+          </p>
+          <intersection-observer
+            v-if="!showEndOfListMessage && !chatListLoading"
+            :options="infiniteLoaderOptions"
+            @observed="loadMoreConversations"
+          />
+        </template>
+      </virtual-list>
+    </div>
+    <woot-modal
+      :show.sync="showAdvancedFilters"
+      :on-close="closeAdvanceFiltersModal"
+      size="medium"
+    >
+      <conversation-advanced-filter
+        v-if="showAdvancedFilters"
+        :initial-filter-types="advancedFilterTypes"
+        :initial-applied-filters="appliedFilter"
+        :active-folder-name="activeFolderName"
+        :on-close="closeAdvanceFiltersModal"
+        :is-folder-view="hasActiveFolders"
+        @applyFilter="onApplyFilter"
+        @updateFolder="onUpdateSavedFilter"
+      />
+    </woot-modal>
+  </div>
+</template>
 <style scoped>
 @tailwind components;
 @layer components {
diff --git a/app/javascript/dashboard/components/Code.vue b/app/javascript/dashboard/components/Code.vue
index 8d1fa4398..d8656da75 100644
--- a/app/javascript/dashboard/components/Code.vue
+++ b/app/javascript/dashboard/components/Code.vue
@@ -1,27 +1,3 @@
-<template>
-  <div class="code--container">
-    <div class="code--action-area">
-      <form
-        v-if="enableCodePen"
-        class="code--codeopen-form"
-        action="https://codepen.io/pen/define"
-        method="POST"
-        target="_blank"
-      >
-        <input type="hidden" name="data" :value="codepenScriptValue" />
-
-        <button type="submit" class="button secondary tiny">
-          {{ $t('COMPONENTS.CODE.CODEPEN') }}
-        </button>
-      </form>
-      <button class="button secondary tiny" @click="onCopy">
-        {{ $t('COMPONENTS.CODE.BUTTON_TEXT') }}
-      </button>
-    </div>
-    <highlightjs v-if="script" :language="lang" :code="script" />
-  </div>
-</template>
-
 <script>
 import 'highlight.js/styles/default.css';
 import { copyTextToClipboard } from 'shared/helpers/clipboard';
@@ -66,6 +42,30 @@ export default {
 };
 </script>
 
+<template>
+  <div class="code--container">
+    <div class="code--action-area">
+      <form
+        v-if="enableCodePen"
+        class="code--codeopen-form"
+        action="https://codepen.io/pen/define"
+        method="POST"
+        target="_blank"
+      >
+        <input type="hidden" name="data" :value="codepenScriptValue" />
+
+        <button type="submit" class="button secondary tiny">
+          {{ $t('COMPONENTS.CODE.CODEPEN') }}
+        </button>
+      </form>
+      <button class="button secondary tiny" @click="onCopy">
+        {{ $t('COMPONENTS.CODE.BUTTON_TEXT') }}
+      </button>
+    </div>
+    <highlightjs v-if="script" :language="lang" :code="script" />
+  </div>
+</template>
+
 <style lang="scss" scoped>
 .code--container {
   position: relative;
diff --git a/app/javascript/dashboard/components/ConversationItem.vue b/app/javascript/dashboard/components/ConversationItem.vue
index b013b0171..4dbc3be3a 100644
--- a/app/javascript/dashboard/components/ConversationItem.vue
+++ b/app/javascript/dashboard/components/ConversationItem.vue
@@ -1,26 +1,3 @@
-<template>
-  <conversation-card
-    :key="source.id"
-    :active-label="label"
-    :team-id="teamId"
-    :folders-id="foldersId"
-    :chat="source"
-    :conversation-type="conversationType"
-    :selected="isConversationSelected(source.id)"
-    :show-assignee="showAssignee"
-    :enable-context-menu="true"
-    @select-conversation="selectConversation"
-    @de-select-conversation="deSelectConversation"
-    @assign-agent="assignAgent"
-    @assign-team="assignTeam"
-    @assign-label="assignLabels"
-    @update-conversation-status="updateConversationStatus"
-    @context-menu-toggle="toggleContextMenu"
-    @mark-as-unread="markAsUnread"
-    @assign-priority="assignPriority"
-  />
-</template>
-
 <script>
 import ConversationCard from './widgets/conversation/ConversationCard.vue';
 export default {
@@ -70,3 +47,26 @@ export default {
   },
 };
 </script>
+
+<template>
+  <conversation-card
+    :key="source.id"
+    :active-label="label"
+    :team-id="teamId"
+    :folders-id="foldersId"
+    :chat="source"
+    :conversation-type="conversationType"
+    :selected="isConversationSelected(source.id)"
+    :show-assignee="showAssignee"
+    :enable-context-menu="true"
+    @select-conversation="selectConversation"
+    @de-select-conversation="deSelectConversation"
+    @assign-agent="assignAgent"
+    @assign-team="assignTeam"
+    @assign-label="assignLabels"
+    @update-conversation-status="updateConversationStatus"
+    @context-menu-toggle="toggleContextMenu"
+    @mark-as-unread="markAsUnread"
+    @assign-priority="assignPriority"
+  />
+</template>
diff --git a/app/javascript/dashboard/components/CustomAttribute.vue b/app/javascript/dashboard/components/CustomAttribute.vue
index 3bd08dac7..d67d84e4a 100644
--- a/app/javascript/dashboard/components/CustomAttribute.vue
+++ b/app/javascript/dashboard/components/CustomAttribute.vue
@@ -1,139 +1,3 @@
-<template>
-  <div class="py-3 px-4">
-    <div class="flex items-center mb-1">
-      <h4 class="text-sm flex items-center m-0 w-full error">
-        <div v-if="isAttributeTypeCheckbox" class="flex items-center">
-          <input
-            v-model="editedValue"
-            class="!my-0 mr-2 ml-0"
-            type="checkbox"
-            @change="onUpdate"
-          />
-        </div>
-        <div class="flex items-center justify-between w-full">
-          <span
-            class="w-full inline-flex gap-1.5 items-start font-medium whitespace-nowrap text-sm mb-0"
-            :class="
-              v$.editedValue.$error
-                ? 'text-red-400 dark:text-red-500'
-                : 'text-slate-800 dark:text-slate-100'
-            "
-          >
-            {{ label }}
-            <helper-text-popup
-              v-if="description"
-              :message="description"
-              class="mt-0.5"
-            />
-          </span>
-          <woot-button
-            v-if="showActions && value"
-            v-tooltip.left="$t('CUSTOM_ATTRIBUTES.ACTIONS.DELETE')"
-            variant="link"
-            size="medium"
-            color-scheme="secondary"
-            icon="delete"
-            class-names="flex justify-end w-4"
-            @click="onDelete"
-          />
-        </div>
-      </h4>
-    </div>
-    <div v-if="notAttributeTypeCheckboxAndList">
-      <div v-if="isEditing" v-on-clickaway="onClickAway">
-        <div class="mb-2 w-full flex items-center">
-          <input
-            ref="inputfield"
-            v-model="editedValue"
-            :type="inputType"
-            class="!h-8 ltr:!rounded-r-none rtl:!rounded-l-none !mb-0 !text-sm"
-            autofocus="true"
-            :class="{ error: v$.editedValue.$error }"
-            @blur="v$.editedValue.$touch"
-            @keyup.enter="onUpdate"
-          />
-          <div>
-            <woot-button
-              size="small"
-              icon="checkmark"
-              class="rounded-l-none rtl:rounded-r-none"
-              @click="onUpdate"
-            />
-          </div>
-        </div>
-        <span
-          v-if="shouldShowErrorMessage"
-          class="text-red-400 dark:text-red-500 text-sm block font-normal -mt-px w-full"
-        >
-          {{ errorMessage }}
-        </span>
-      </div>
-      <div
-        v-show="!isEditing"
-        class="flex group"
-        :class="{ 'is-editable': showActions }"
-      >
-        <a
-          v-if="isAttributeTypeLink"
-          :href="hrefURL"
-          target="_blank"
-          rel="noopener noreferrer"
-          class="group-hover:bg-slate-50 group-hover:dark:bg-slate-700 inline-block rounded-sm mb-0 break-all py-0.5 px-1"
-        >
-          {{ urlValue }}
-        </a>
-        <p
-          v-else
-          class="group-hover:bg-slate-50 group-hover:dark:bg-slate-700 inline-block rounded-sm mb-0 break-all py-0.5 px-1"
-        >
-          {{ displayValue || '---' }}
-        </p>
-        <div class="flex max-w-[2rem] gap-1 ml-1 rtl:mr-1 rtl:ml-0">
-          <woot-button
-            v-if="showActions && value"
-            v-tooltip="$t('CUSTOM_ATTRIBUTES.ACTIONS.COPY')"
-            variant="link"
-            size="small"
-            color-scheme="secondary"
-            icon="clipboard"
-            class-names="hidden group-hover:flex !w-6 flex-shrink-0"
-            @click="onCopy"
-          />
-          <woot-button
-            v-if="showActions"
-            v-tooltip.right="$t('CUSTOM_ATTRIBUTES.ACTIONS.EDIT')"
-            variant="link"
-            size="small"
-            color-scheme="secondary"
-            icon="edit"
-            class-names="hidden group-hover:flex !w-6 flex-shrink-0"
-            @click="onEdit"
-          />
-        </div>
-      </div>
-    </div>
-    <div v-if="isAttributeTypeList">
-      <multiselect-dropdown
-        :options="listOptions"
-        :selected-item="selectedItem"
-        :has-thumbnail="false"
-        :multiselector-placeholder="
-          $t('CUSTOM_ATTRIBUTES.FORM.ATTRIBUTE_TYPE.LIST.PLACEHOLDER')
-        "
-        :no-search-result="
-          $t('CUSTOM_ATTRIBUTES.FORM.ATTRIBUTE_TYPE.LIST.NO_RESULT')
-        "
-        :input-placeholder="
-          $t(
-            'CUSTOM_ATTRIBUTES.FORM.ATTRIBUTE_TYPE.LIST.SEARCH_INPUT_PLACEHOLDER'
-          )
-        "
-        @click="onUpdateListValue"
-      />
-    </div>
-  </div>
-</template>
-
 <script>
 import { format, parseISO } from 'date-fns';
 import { required, url } from '@vuelidate/validators';
@@ -330,6 +194,142 @@ export default {
 };
 </script>
 
+<template>
+  <div class="py-3 px-4">
+    <div class="flex items-center mb-1">
+      <h4 class="text-sm flex items-center m-0 w-full error">
+        <div v-if="isAttributeTypeCheckbox" class="flex items-center">
+          <input
+            v-model="editedValue"
+            class="!my-0 mr-2 ml-0"
+            type="checkbox"
+            @change="onUpdate"
+          />
+        </div>
+        <div class="flex items-center justify-between w-full">
+          <span
+            class="w-full inline-flex gap-1.5 items-start font-medium whitespace-nowrap text-sm mb-0"
+            :class="
+              v$.editedValue.$error
+                ? 'text-red-400 dark:text-red-500'
+                : 'text-slate-800 dark:text-slate-100'
+            "
+          >
+            {{ label }}
+            <helper-text-popup
+              v-if="description"
+              :message="description"
+              class="mt-0.5"
+            />
+          </span>
+          <woot-button
+            v-if="showActions && value"
+            v-tooltip.left="$t('CUSTOM_ATTRIBUTES.ACTIONS.DELETE')"
+            variant="link"
+            size="medium"
+            color-scheme="secondary"
+            icon="delete"
+            class-names="flex justify-end w-4"
+            @click="onDelete"
+          />
+        </div>
+      </h4>
+    </div>
+    <div v-if="notAttributeTypeCheckboxAndList">
+      <div v-if="isEditing" v-on-clickaway="onClickAway">
+        <div class="mb-2 w-full flex items-center">
+          <input
+            ref="inputfield"
+            v-model="editedValue"
+            :type="inputType"
+            class="!h-8 ltr:!rounded-r-none rtl:!rounded-l-none !mb-0 !text-sm"
+            autofocus="true"
+            :class="{ error: v$.editedValue.$error }"
+            @blur="v$.editedValue.$touch"
+            @keyup.enter="onUpdate"
+          />
+          <div>
+            <woot-button
+              size="small"
+              icon="checkmark"
+              class="rounded-l-none rtl:rounded-r-none"
+              @click="onUpdate"
+            />
+          </div>
+        </div>
+        <span
+          v-if="shouldShowErrorMessage"
+          class="text-red-400 dark:text-red-500 text-sm block font-normal -mt-px w-full"
+        >
+          {{ errorMessage }}
+        </span>
+      </div>
+      <div
+        v-show="!isEditing"
+        class="flex group"
+        :class="{ 'is-editable': showActions }"
+      >
+        <a
+          v-if="isAttributeTypeLink"
+          :href="hrefURL"
+          target="_blank"
+          rel="noopener noreferrer"
+          class="group-hover:bg-slate-50 group-hover:dark:bg-slate-700 inline-block rounded-sm mb-0 break-all py-0.5 px-1"
+        >
+          {{ urlValue }}
+        </a>
+        <p
+          v-else
+          class="group-hover:bg-slate-50 group-hover:dark:bg-slate-700 inline-block rounded-sm mb-0 break-all py-0.5 px-1"
+        >
+          {{ displayValue || '---' }}
+        </p>
+        <div class="flex max-w-[2rem] gap-1 ml-1 rtl:mr-1 rtl:ml-0">
+          <woot-button
+            v-if="showActions && value"
+            v-tooltip="$t('CUSTOM_ATTRIBUTES.ACTIONS.COPY')"
+            variant="link"
+            size="small"
+            color-scheme="secondary"
+            icon="clipboard"
+            class-names="hidden group-hover:flex !w-6 flex-shrink-0"
+            @click="onCopy"
+          />
+          <woot-button
+            v-if="showActions"
+            v-tooltip.right="$t('CUSTOM_ATTRIBUTES.ACTIONS.EDIT')"
+            variant="link"
+            size="small"
+            color-scheme="secondary"
+            icon="edit"
+            class-names="hidden group-hover:flex !w-6 flex-shrink-0"
+            @click="onEdit"
+          />
+        </div>
+      </div>
+    </div>
+    <div v-if="isAttributeTypeList">
+      <multiselect-dropdown
+        :options="listOptions"
+        :selected-item="selectedItem"
+        :has-thumbnail="false"
+        :multiselector-placeholder="
+          $t('CUSTOM_ATTRIBUTES.FORM.ATTRIBUTE_TYPE.LIST.PLACEHOLDER')
+        "
+        :no-search-result="
+          $t('CUSTOM_ATTRIBUTES.FORM.ATTRIBUTE_TYPE.LIST.NO_RESULT')
+        "
+        :input-placeholder="
+          $t(
+            'CUSTOM_ATTRIBUTES.FORM.ATTRIBUTE_TYPE.LIST.SEARCH_INPUT_PLACEHOLDER'
+          )
+        "
+        @click="onUpdateListValue"
+      />
+    </div>
+  </div>
+</template>
+
 <style lang="scss" scoped>
 ::v-deep {
   .selector-wrap {
diff --git a/app/javascript/dashboard/components/CustomSnoozeModal.vue b/app/javascript/dashboard/components/CustomSnoozeModal.vue
index 65f943d41..39350f1d4 100644
--- a/app/javascript/dashboard/components/CustomSnoozeModal.vue
+++ b/app/javascript/dashboard/components/CustomSnoozeModal.vue
@@ -1,28 +1,3 @@
-<template>
-  <div class="flex flex-col">
-    <woot-modal-header :header-title="$t('CONVERSATION.CUSTOM_SNOOZE.TITLE')" />
-    <form class="modal-content" @submit.prevent="chooseTime">
-      <date-picker
-        v-model="snoozeTime"
-        type="datetime"
-        inline
-        :lang="lang"
-        :disabled-date="disabledDate"
-        :disabled-time="disabledTime"
-        :popup-style="{ width: '100%' }"
-      />
-      <div class="flex flex-row justify-end gap-2 py-2 px-0 w-full">
-        <woot-button variant="clear" @click.prevent="onClose">
-          {{ $t('CONVERSATION.CUSTOM_SNOOZE.CANCEL') }}
-        </woot-button>
-        <woot-button>
-          {{ $t('CONVERSATION.CUSTOM_SNOOZE.APPLY') }}
-        </woot-button>
-      </div>
-    </form>
-  </div>
-</template>
-
 <script>
 import DatePicker from 'vue2-datepicker';
 
@@ -64,6 +39,31 @@ export default {
   },
 };
 </script>
+
+<template>
+  <div class="flex flex-col">
+    <woot-modal-header :header-title="$t('CONVERSATION.CUSTOM_SNOOZE.TITLE')" />
+    <form class="modal-content" @submit.prevent="chooseTime">
+      <date-picker
+        v-model="snoozeTime"
+        type="datetime"
+        inline
+        :lang="lang"
+        :disabled-date="disabledDate"
+        :disabled-time="disabledTime"
+        :popup-style="{ width: '100%' }"
+      />
+      <div class="flex flex-row justify-end gap-2 py-2 px-0 w-full">
+        <woot-button variant="clear" @click.prevent="onClose">
+          {{ $t('CONVERSATION.CUSTOM_SNOOZE.CANCEL') }}
+        </woot-button>
+        <woot-button>
+          {{ $t('CONVERSATION.CUSTOM_SNOOZE.APPLY') }}
+        </woot-button>
+      </div>
+    </form>
+  </div>
+</template>
 <style lang="scss" scoped>
 .modal-content {
   @apply pt-2 px-5 pb-6;
diff --git a/app/javascript/dashboard/components/FormSection.vue b/app/javascript/dashboard/components/FormSection.vue
index 8a22d5e8a..481006adb 100644
--- a/app/javascript/dashboard/components/FormSection.vue
+++ b/app/javascript/dashboard/components/FormSection.vue
@@ -1,3 +1,16 @@
+<script setup>
+defineProps({
+  title: {
+    type: String,
+    default: '',
+  },
+  description: {
+    type: String,
+    default: '',
+  },
+});
+</script>
+
 <template>
   <div class="flex flex-col items-start w-full gap-6">
     <div class="flex flex-col w-full gap-4">
@@ -16,16 +29,3 @@
     </div>
   </div>
 </template>
-
-<script setup>
-defineProps({
-  title: {
-    type: String,
-    default: '',
-  },
-  description: {
-    type: String,
-    default: '',
-  },
-});
-</script>
diff --git a/app/javascript/dashboard/components/IntersectionObserver.vue b/app/javascript/dashboard/components/IntersectionObserver.vue
index 215c054ff..2268e0ccd 100644
--- a/app/javascript/dashboard/components/IntersectionObserver.vue
+++ b/app/javascript/dashboard/components/IntersectionObserver.vue
@@ -1,7 +1,3 @@
-<template>
-  <div ref="observedElement" class="h-6 w-full" />
-</template>
-
 <script>
 export default {
   props: {
@@ -32,3 +28,7 @@ export default {
   },
 };
 </script>
+
+<template>
+  <div ref="observedElement" class="h-6 w-full" />
+</template>
diff --git a/app/javascript/dashboard/components/MaskedText.vue b/app/javascript/dashboard/components/MaskedText.vue
index e9fa613cb..e981986c0 100644
--- a/app/javascript/dashboard/components/MaskedText.vue
+++ b/app/javascript/dashboard/components/MaskedText.vue
@@ -1,20 +1,3 @@
-<template>
-  <div class="text--container">
-    <woot-button size="small" class="button--text" @click="onCopy">
-      {{ $t('COMPONENTS.CODE.BUTTON_TEXT') }}
-    </woot-button>
-    <woot-button
-      variant="clear"
-      size="small"
-      class="button--visibility"
-      color-scheme="secondary"
-      :icon="masked ? 'eye-show' : 'eye-hide'"
-      @click.prevent="toggleMasked"
-    />
-    <highlightjs v-if="value" :code="masked ? '•'.repeat(10) : value" />
-  </div>
-</template>
-
 <script>
 import 'highlight.js/styles/default.css';
 import { copyTextToClipboard } from 'shared/helpers/clipboard';
@@ -45,6 +28,23 @@ export default {
 };
 </script>
 
+<template>
+  <div class="text--container">
+    <woot-button size="small" class="button--text" @click="onCopy">
+      {{ $t('COMPONENTS.CODE.BUTTON_TEXT') }}
+    </woot-button>
+    <woot-button
+      variant="clear"
+      size="small"
+      class="button--visibility"
+      color-scheme="secondary"
+      :icon="masked ? 'eye-show' : 'eye-hide'"
+      @click.prevent="toggleMasked"
+    />
+    <highlightjs v-if="value" :code="masked ? '•'.repeat(10) : value" />
+  </div>
+</template>
+
 <style lang="scss" scoped>
 .text--container {
   position: relative;
diff --git a/app/javascript/dashboard/components/Modal.vue b/app/javascript/dashboard/components/Modal.vue
index bfe7dc30b..1dad472f7 100644
--- a/app/javascript/dashboard/components/Modal.vue
+++ b/app/javascript/dashboard/components/Modal.vue
@@ -1,36 +1,3 @@
-<template>
-  <transition name="modal-fade">
-    <div
-      v-if="show"
-      :class="modalClassName"
-      transition="modal"
-      @mousedown="handleMouseDown"
-    >
-      <div
-        :class="{
-          'modal-container rtl:text-right shadow-md max-h-full overflow-auto relative bg-white dark:bg-slate-800 skip-context-menu': true,
-          'rounded-xl w-[37.5rem]': !fullWidth,
-          'items-center rounded-none flex h-full justify-center w-full':
-            fullWidth,
-          [size]: true,
-        }"
-        @mouse.stop
-        @mousedown="event => event.stopPropagation()"
-      >
-        <woot-button
-          v-if="showCloseButton"
-          color-scheme="secondary"
-          icon="dismiss"
-          variant="clear"
-          class="absolute z-10 ltr:right-2 rtl:left-2 top-2"
-          @click="close"
-        />
-        <slot />
-      </div>
-    </div>
-  </transition>
-</template>
-
 <script>
 export default {
   props: {
@@ -108,6 +75,39 @@ export default {
 };
 </script>
 
+<template>
+  <transition name="modal-fade">
+    <div
+      v-if="show"
+      :class="modalClassName"
+      transition="modal"
+      @mousedown="handleMouseDown"
+    >
+      <div
+        :class="{
+          'modal-container rtl:text-right shadow-md max-h-full overflow-auto relative bg-white dark:bg-slate-800 skip-context-menu': true,
+          'rounded-xl w-[37.5rem]': !fullWidth,
+          'items-center rounded-none flex h-full justify-center w-full':
+            fullWidth,
+          [size]: true,
+        }"
+        @mouse.stop
+        @mousedown="event => event.stopPropagation()"
+      >
+        <woot-button
+          v-if="showCloseButton"
+          color-scheme="secondary"
+          icon="dismiss"
+          variant="clear"
+          class="absolute z-10 ltr:right-2 rtl:left-2 top-2"
+          @click="close"
+        />
+        <slot />
+      </div>
+    </div>
+  </transition>
+</template>
+
 <style lang="scss">
 .modal-mask {
   @apply flex items-center justify-center bg-modal-backdrop-light dark:bg-modal-backdrop-dark z-[9990] h-full left-0 fixed top-0 w-full;
diff --git a/app/javascript/dashboard/components/ModalHeader.vue b/app/javascript/dashboard/components/ModalHeader.vue
index 332ca069f..2bed68105 100644
--- a/app/javascript/dashboard/components/ModalHeader.vue
+++ b/app/javascript/dashboard/components/ModalHeader.vue
@@ -1,3 +1,26 @@
+<script>
+export default {
+  props: {
+    headerTitle: {
+      type: String,
+      default: '',
+    },
+    headerContent: {
+      type: String,
+      default: '',
+    },
+    headerContentValue: {
+      type: String,
+      default: '',
+    },
+    headerImage: {
+      type: String,
+      default: '',
+    },
+  },
+};
+</script>
+
 <template>
   <div class="flex flex-col items-start px-8 pt-8 pb-0">
     <img v-if="headerImage" :src="headerImage" alt="No image" />
@@ -23,26 +46,3 @@
     <slot />
   </div>
 </template>
-
-<script>
-export default {
-  props: {
-    headerTitle: {
-      type: String,
-      default: '',
-    },
-    headerContent: {
-      type: String,
-      default: '',
-    },
-    headerContentValue: {
-      type: String,
-      default: '',
-    },
-    headerImage: {
-      type: String,
-      default: '',
-    },
-  },
-};
-</script>
diff --git a/app/javascript/dashboard/components/SettingsSection.vue b/app/javascript/dashboard/components/SettingsSection.vue
index d59a9dc01..ee3509d64 100644
--- a/app/javascript/dashboard/components/SettingsSection.vue
+++ b/app/javascript/dashboard/components/SettingsSection.vue
@@ -1,3 +1,26 @@
+<script>
+export default {
+  props: {
+    title: {
+      type: String,
+      default: '',
+    },
+    subTitle: {
+      type: String,
+      default: '',
+    },
+    showBorder: {
+      type: Boolean,
+      default: true,
+    },
+    note: {
+      type: String,
+      default: '',
+    },
+  },
+};
+</script>
+
 <template>
   <div
     class="ml-0 mr-0 flex py-8 w-full xl:w-3/4 flex-col xl:flex-row"
@@ -30,26 +53,3 @@
     </div>
   </div>
 </template>
-
-<script>
-export default {
-  props: {
-    title: {
-      type: String,
-      default: '',
-    },
-    subTitle: {
-      type: String,
-      default: '',
-    },
-    showBorder: {
-      type: Boolean,
-      default: true,
-    },
-    note: {
-      type: String,
-      default: '',
-    },
-  },
-};
-</script>
diff --git a/app/javascript/dashboard/components/SidemenuIcon.vue b/app/javascript/dashboard/components/SidemenuIcon.vue
index 6106b9ad0..74739a8b1 100644
--- a/app/javascript/dashboard/components/SidemenuIcon.vue
+++ b/app/javascript/dashboard/components/SidemenuIcon.vue
@@ -1,14 +1,3 @@
-<template>
-  <woot-button
-    :size="size"
-    variant="clear"
-    color-scheme="secondary"
-    class="-ml-3 text-black-900 dark:text-slate-300"
-    icon="list"
-    @click="onMenuItemClick"
-  />
-</template>
-
 <script>
 import { BUS_EVENTS } from 'shared/constants/busEvents';
 
@@ -26,3 +15,14 @@ export default {
   },
 };
 </script>
+
+<template>
+  <woot-button
+    :size="size"
+    variant="clear"
+    color-scheme="secondary"
+    class="-ml-3 text-black-900 dark:text-slate-300"
+    icon="list"
+    @click="onMenuItemClick"
+  />
+</template>
diff --git a/app/javascript/dashboard/components/Snackbar.vue b/app/javascript/dashboard/components/Snackbar.vue
index 213284484..cf99c4d36 100644
--- a/app/javascript/dashboard/components/Snackbar.vue
+++ b/app/javascript/dashboard/components/Snackbar.vue
@@ -1,24 +1,3 @@
-<template>
-  <div>
-    <div
-      class="shadow-sm bg-slate-800 dark:bg-slate-700 rounded-[4px] items-center gap-3 inline-flex mb-2 max-w-[25rem] min-h-[1.875rem] min-w-[15rem] px-6 py-3 text-left"
-    >
-      <div class="text-white dark:text-white text-sm font-medium">
-        {{ message }}
-      </div>
-      <div v-if="action">
-        <router-link
-          v-if="action.type == 'link'"
-          :to="action.to"
-          class="text-woot-500 dark:text-woot-500 cursor-pointer font-medium hover:text-woot-600 dark:hover:text-woot-600 select-none"
-        >
-          {{ action.message }}
-        </router-link>
-      </div>
-    </div>
-  </div>
-</template>
-
 <script>
 export default {
   props: {
@@ -42,3 +21,24 @@ export default {
   methods: {},
 };
 </script>
+
+<template>
+  <div>
+    <div
+      class="shadow-sm bg-slate-800 dark:bg-slate-700 rounded-[4px] items-center gap-3 inline-flex mb-2 max-w-[25rem] min-h-[1.875rem] min-w-[15rem] px-6 py-3 text-left"
+    >
+      <div class="text-white dark:text-white text-sm font-medium">
+        {{ message }}
+      </div>
+      <div v-if="action">
+        <router-link
+          v-if="action.type == 'link'"
+          :to="action.to"
+          class="text-woot-500 dark:text-woot-500 cursor-pointer font-medium hover:text-woot-600 dark:hover:text-woot-600 select-none"
+        >
+          {{ action.message }}
+        </router-link>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/app/javascript/dashboard/components/SnackbarContainer.vue b/app/javascript/dashboard/components/SnackbarContainer.vue
index 976797623..9de23890c 100644
--- a/app/javascript/dashboard/components/SnackbarContainer.vue
+++ b/app/javascript/dashboard/components/SnackbarContainer.vue
@@ -1,18 +1,3 @@
-<template>
-  <transition-group
-    name="toast-fade"
-    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
-      v-for="snackMessage in snackMessages"
-      :key="snackMessage.key"
-      :message="snackMessage.message"
-      :action="snackMessage.action"
-    />
-  </transition-group>
-</template>
-
 <script>
 import WootSnackbar from './Snackbar.vue';
 
@@ -53,3 +38,18 @@ export default {
   },
 };
 </script>
+
+<template>
+  <transition-group
+    name="toast-fade"
+    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
+      v-for="snackMessage in snackMessages"
+      :key="snackMessage.key"
+      :message="snackMessage.message"
+      :action="snackMessage.action"
+    />
+  </transition-group>
+</template>
diff --git a/app/javascript/dashboard/components/app/PaymentPendingBanner.vue b/app/javascript/dashboard/components/app/PaymentPendingBanner.vue
index 036326970..2d5c229c1 100644
--- a/app/javascript/dashboard/components/app/PaymentPendingBanner.vue
+++ b/app/javascript/dashboard/components/app/PaymentPendingBanner.vue
@@ -1,14 +1,3 @@
-<template>
-  <banner
-    v-if="shouldShowBanner"
-    color-scheme="alert"
-    :banner-message="bannerMessage"
-    :action-button-label="actionButtonMessage"
-    has-action-button
-    @click="routeToBilling"
-  />
-</template>
-
 <script>
 import { mapGetters } from 'vuex';
 import { useAdmin } from 'dashboard/composables/useAdmin';
@@ -86,3 +75,14 @@ export default {
   },
 };
 </script>
+
+<template>
+  <banner
+    v-if="shouldShowBanner"
+    color-scheme="alert"
+    :banner-message="bannerMessage"
+    :action-button-label="actionButtonMessage"
+    has-action-button
+    @click="routeToBilling"
+  />
+</template>
diff --git a/app/javascript/dashboard/components/app/PendingEmailVerificationBanner.vue b/app/javascript/dashboard/components/app/PendingEmailVerificationBanner.vue
index 97b5105a4..ba4c42ff6 100644
--- a/app/javascript/dashboard/components/app/PendingEmailVerificationBanner.vue
+++ b/app/javascript/dashboard/components/app/PendingEmailVerificationBanner.vue
@@ -1,15 +1,3 @@
-<template>
-  <banner
-    v-if="shouldShowBanner"
-    color-scheme="alert"
-    :banner-message="bannerMessage"
-    :action-button-label="actionButtonMessage"
-    action-button-icon="mail"
-    has-action-button
-    @click="resendVerificationEmail"
-  />
-</template>
-
 <script>
 import Banner from 'dashboard/components/ui/Banner.vue';
 import { mapGetters } from 'vuex';
@@ -41,3 +29,15 @@ export default {
   },
 };
 </script>
+
+<template>
+  <banner
+    v-if="shouldShowBanner"
+    color-scheme="alert"
+    :banner-message="bannerMessage"
+    :action-button-label="actionButtonMessage"
+    action-button-icon="mail"
+    has-action-button
+    @click="resendVerificationEmail"
+  />
+</template>
diff --git a/app/javascript/dashboard/components/app/UpdateBanner.vue b/app/javascript/dashboard/components/app/UpdateBanner.vue
index 57f54ff5b..f3e4bad90 100644
--- a/app/javascript/dashboard/components/app/UpdateBanner.vue
+++ b/app/javascript/dashboard/components/app/UpdateBanner.vue
@@ -1,14 +1,3 @@
-<template>
-  <banner
-    v-if="shouldShowBanner"
-    color-scheme="primary"
-    :banner-message="bannerMessage"
-    href-link="https://github.com/chatwoot/chatwoot/releases"
-    :href-link-text="$t('GENERAL_SETTINGS.LEARN_MORE')"
-    has-close-button
-    @close="dismissUpdateBanner"
-  />
-</template>
 <script>
 import Banner from 'dashboard/components/ui/Banner.vue';
 import { LOCAL_STORAGE_KEYS } from 'dashboard/constants/localStorage';
@@ -77,3 +66,14 @@ export default {
   },
 };
 </script>
+<template>
+  <banner
+    v-if="shouldShowBanner"
+    color-scheme="primary"
+    :banner-message="bannerMessage"
+    href-link="https://github.com/chatwoot/chatwoot/releases"
+    :href-link-text="$t('GENERAL_SETTINGS.LEARN_MORE')"
+    has-close-button
+    @close="dismissUpdateBanner"
+  />
+</template>
diff --git a/app/javascript/dashboard/components/app/UpgradeBanner.vue b/app/javascript/dashboard/components/app/UpgradeBanner.vue
index b387956ad..166578a18 100644
--- a/app/javascript/dashboard/components/app/UpgradeBanner.vue
+++ b/app/javascript/dashboard/components/app/UpgradeBanner.vue
@@ -1,14 +1,3 @@
-<template>
-  <banner
-    v-if="shouldShowBanner"
-    color-scheme="alert"
-    :banner-message="bannerMessage"
-    :action-button-label="actionButtonMessage"
-    has-action-button
-    @click="routeToBilling"
-  />
-</template>
-
 <script>
 import Banner from 'dashboard/components/ui/Banner.vue';
 import { mapGetters } from 'vuex';
@@ -86,3 +75,14 @@ export default {
   },
 };
 </script>
+
+<template>
+  <banner
+    v-if="shouldShowBanner"
+    color-scheme="alert"
+    :banner-message="bannerMessage"
+    :action-button-label="actionButtonMessage"
+    has-action-button
+    @click="routeToBilling"
+  />
+</template>
diff --git a/app/javascript/dashboard/components/base/Hotkey.vue b/app/javascript/dashboard/components/base/Hotkey.vue
index ca45559f3..7e3bab572 100644
--- a/app/javascript/dashboard/components/base/Hotkey.vue
+++ b/app/javascript/dashboard/components/base/Hotkey.vue
@@ -1,8 +1,3 @@
-<template>
-  <kbd class="hotkey p-0.5 min-w-[1rem] uppercase" :class="customClass">
-    <slot />
-  </kbd>
-</template>
 <script>
 export default {
   props: {
@@ -13,6 +8,11 @@ export default {
   },
 };
 </script>
+<template>
+  <kbd class="hotkey p-0.5 min-w-[1rem] uppercase" :class="customClass">
+    <slot />
+  </kbd>
+</template>
 
 <style lang="scss">
 kbd.hotkey {
diff --git a/app/javascript/dashboard/components/buttons/Button.vue b/app/javascript/dashboard/components/buttons/Button.vue
index 733b84639..5d330167b 100644
--- a/app/javascript/dashboard/components/buttons/Button.vue
+++ b/app/javascript/dashboard/components/buttons/Button.vue
@@ -1,16 +1,3 @@
-<template>
-  <button :type="type" class="button nice" :class="variant" @click="onClick">
-    <fluent-icon
-      v-if="!isLoading && icon"
-      class="icon"
-      :class="buttonIconClass"
-      :icon="icon"
-    />
-    <spinner v-if="isLoading" />
-    <slot />
-  </button>
-</template>
-
 <script>
 export default {
   props: {
@@ -42,3 +29,16 @@ export default {
   },
 };
 </script>
+
+<template>
+  <button :type="type" class="button nice" :class="variant" @click="onClick">
+    <fluent-icon
+      v-if="!isLoading && icon"
+      class="icon"
+      :class="buttonIconClass"
+      :icon="icon"
+    />
+    <spinner v-if="isLoading" />
+    <slot />
+  </button>
+</template>
diff --git a/app/javascript/dashboard/components/buttons/FormSubmitButton.vue b/app/javascript/dashboard/components/buttons/FormSubmitButton.vue
index 7dcc15488..e753eb6b7 100644
--- a/app/javascript/dashboard/components/buttons/FormSubmitButton.vue
+++ b/app/javascript/dashboard/components/buttons/FormSubmitButton.vue
@@ -1,17 +1,3 @@
-<template>
-  <button
-    :type="type"
-    data-testid="submit_button"
-    :disabled="disabled"
-    :class="computedClass"
-    @click="onClick"
-  >
-    <fluent-icon v-if="!!iconClass" :icon="iconClass" class="icon" />
-    <span>{{ buttonText }}</span>
-    <spinner v-if="loading" class="ml-2" :color-scheme="spinnerClass" />
-  </button>
-</template>
-
 <script>
 import Spinner from 'shared/components/Spinner.vue';
 
@@ -61,6 +47,20 @@ export default {
   },
 };
 </script>
+
+<template>
+  <button
+    :type="type"
+    data-testid="submit_button"
+    :disabled="disabled"
+    :class="computedClass"
+    @click="onClick"
+  >
+    <fluent-icon v-if="!!iconClass" :icon="iconClass" class="icon" />
+    <span>{{ buttonText }}</span>
+    <spinner v-if="loading" class="ml-2" :color-scheme="spinnerClass" />
+  </button>
+</template>
 <style lang="scss" scoped>
 button:disabled {
   @apply bg-woot-100 dark:bg-woot-500/25 dark:text-slate-500 opacity-100;
diff --git a/app/javascript/dashboard/components/buttons/ResolveAction.vue b/app/javascript/dashboard/components/buttons/ResolveAction.vue
index 7acf26da3..a0d88ec48 100644
--- a/app/javascript/dashboard/components/buttons/ResolveAction.vue
+++ b/app/javascript/dashboard/components/buttons/ResolveAction.vue
@@ -1,81 +1,3 @@
-<template>
-  <div class="relative flex items-center justify-end resolve-actions">
-    <div class="button-group">
-      <woot-button
-        v-if="isOpen"
-        class-names="resolve"
-        color-scheme="success"
-        icon="checkmark"
-        emoji="✅"
-        :is-loading="isLoading"
-        @click="onCmdResolveConversation"
-      >
-        {{ $t('CONVERSATION.HEADER.RESOLVE_ACTION') }}
-      </woot-button>
-      <woot-button
-        v-else-if="isResolved"
-        class-names="resolve"
-        color-scheme="warning"
-        icon="arrow-redo"
-        emoji="👀"
-        :is-loading="isLoading"
-        @click="onCmdOpenConversation"
-      >
-        {{ $t('CONVERSATION.HEADER.REOPEN_ACTION') }}
-      </woot-button>
-      <woot-button
-        v-else-if="showOpenButton"
-        class-names="resolve"
-        color-scheme="primary"
-        icon="person"
-        :is-loading="isLoading"
-        @click="onCmdOpenConversation"
-      >
-        {{ $t('CONVERSATION.HEADER.OPEN_ACTION') }}
-      </woot-button>
-      <woot-button
-        v-if="showAdditionalActions"
-        ref="arrowDownButton"
-        :color-scheme="buttonClass"
-        :disabled="isLoading"
-        icon="chevron-down"
-        emoji="🔽"
-        @click="openDropdown"
-      />
-    </div>
-    <div
-      v-if="showActionsDropdown"
-      v-on-clickaway="closeDropdown"
-      class="dropdown-pane dropdown-pane--open"
-    >
-      <woot-dropdown-menu class="mb-0">
-        <woot-dropdown-item v-if="!isPending">
-          <woot-button
-            variant="clear"
-            color-scheme="secondary"
-            size="small"
-            icon="snooze"
-            @click="() => openSnoozeModal()"
-          >
-            {{ $t('CONVERSATION.RESOLVE_DROPDOWN.SNOOZE_UNTIL') }}
-          </woot-button>
-        </woot-dropdown-item>
-        <woot-dropdown-item v-if="!isPending">
-          <woot-button
-            variant="clear"
-            color-scheme="secondary"
-            size="small"
-            icon="book-clock"
-            @click="() => toggleStatus(STATUS_TYPE.PENDING)"
-          >
-            {{ $t('CONVERSATION.RESOLVE_DROPDOWN.MARK_PENDING') }}
-          </woot-button>
-        </woot-dropdown-item>
-      </woot-dropdown-menu>
-    </div>
-  </div>
-</template>
-
 <script>
 import { mapGetters } from 'vuex';
 import { useAlert } from 'dashboard/composables';
@@ -220,6 +142,84 @@ export default {
   },
 };
 </script>
+
+<template>
+  <div class="relative flex items-center justify-end resolve-actions">
+    <div class="button-group">
+      <woot-button
+        v-if="isOpen"
+        class-names="resolve"
+        color-scheme="success"
+        icon="checkmark"
+        emoji="✅"
+        :is-loading="isLoading"
+        @click="onCmdResolveConversation"
+      >
+        {{ $t('CONVERSATION.HEADER.RESOLVE_ACTION') }}
+      </woot-button>
+      <woot-button
+        v-else-if="isResolved"
+        class-names="resolve"
+        color-scheme="warning"
+        icon="arrow-redo"
+        emoji="👀"
+        :is-loading="isLoading"
+        @click="onCmdOpenConversation"
+      >
+        {{ $t('CONVERSATION.HEADER.REOPEN_ACTION') }}
+      </woot-button>
+      <woot-button
+        v-else-if="showOpenButton"
+        class-names="resolve"
+        color-scheme="primary"
+        icon="person"
+        :is-loading="isLoading"
+        @click="onCmdOpenConversation"
+      >
+        {{ $t('CONVERSATION.HEADER.OPEN_ACTION') }}
+      </woot-button>
+      <woot-button
+        v-if="showAdditionalActions"
+        ref="arrowDownButton"
+        :color-scheme="buttonClass"
+        :disabled="isLoading"
+        icon="chevron-down"
+        emoji="🔽"
+        @click="openDropdown"
+      />
+    </div>
+    <div
+      v-if="showActionsDropdown"
+      v-on-clickaway="closeDropdown"
+      class="dropdown-pane dropdown-pane--open"
+    >
+      <woot-dropdown-menu class="mb-0">
+        <woot-dropdown-item v-if="!isPending">
+          <woot-button
+            variant="clear"
+            color-scheme="secondary"
+            size="small"
+            icon="snooze"
+            @click="() => openSnoozeModal()"
+          >
+            {{ $t('CONVERSATION.RESOLVE_DROPDOWN.SNOOZE_UNTIL') }}
+          </woot-button>
+        </woot-dropdown-item>
+        <woot-dropdown-item v-if="!isPending">
+          <woot-button
+            variant="clear"
+            color-scheme="secondary"
+            size="small"
+            icon="book-clock"
+            @click="() => toggleStatus(STATUS_TYPE.PENDING)"
+          >
+            {{ $t('CONVERSATION.RESOLVE_DROPDOWN.MARK_PENDING') }}
+          </woot-button>
+        </woot-dropdown-item>
+      </woot-dropdown-menu>
+    </div>
+  </div>
+</template>
 <style lang="scss" scoped>
 .dropdown-pane {
   @apply left-auto top-[2.625rem] mt-0.5 right-0 max-w-[12.5rem] min-w-[9.75rem];
diff --git a/app/javascript/dashboard/components/layout/AvailabilityStatus.vue b/app/javascript/dashboard/components/layout/AvailabilityStatus.vue
index 3f7e86359..935886953 100644
--- a/app/javascript/dashboard/components/layout/AvailabilityStatus.vue
+++ b/app/javascript/dashboard/components/layout/AvailabilityStatus.vue
@@ -1,50 +1,3 @@
-<template>
-  <woot-dropdown-menu>
-    <woot-dropdown-header :title="$t('SIDEBAR.SET_AVAILABILITY_TITLE')" />
-    <woot-dropdown-item
-      v-for="status in availabilityStatuses"
-      :key="status.value"
-      class="flex items-baseline"
-    >
-      <woot-button
-        size="small"
-        :color-scheme="status.disabled ? '' : 'secondary'"
-        :variant="status.disabled ? 'smooth' : 'clear'"
-        class-names="status-change--dropdown-button"
-        @click="changeAvailabilityStatus(status.value)"
-      >
-        <availability-status-badge :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">
-      <div class="flex items-center">
-        <fluent-icon
-          v-tooltip.right-start="$t('SIDEBAR.SET_AUTO_OFFLINE.INFO_TEXT')"
-          icon="info"
-          size="14"
-          class="mt-px"
-        />
-
-        <span
-          class="mx-1 my-0 text-xs font-medium text-slate-600 dark:text-slate-100"
-        >
-          {{ $t('SIDEBAR.SET_AUTO_OFFLINE.TEXT') }}
-        </span>
-      </div>
-
-      <woot-switch
-        size="small"
-        class="mx-1 mt-px mb-0"
-        :value="currentUserAutoOffline"
-        @input="updateAutoOffline"
-      />
-    </woot-dropdown-item>
-    <woot-dropdown-divider />
-  </woot-dropdown-menu>
-</template>
-
 <script>
 import { mapGetters } from 'vuex';
 import { useAlert } from 'dashboard/composables';
@@ -136,3 +89,50 @@ export default {
   },
 };
 </script>
+
+<template>
+  <woot-dropdown-menu>
+    <woot-dropdown-header :title="$t('SIDEBAR.SET_AVAILABILITY_TITLE')" />
+    <woot-dropdown-item
+      v-for="status in availabilityStatuses"
+      :key="status.value"
+      class="flex items-baseline"
+    >
+      <woot-button
+        size="small"
+        :color-scheme="status.disabled ? '' : 'secondary'"
+        :variant="status.disabled ? 'smooth' : 'clear'"
+        class-names="status-change--dropdown-button"
+        @click="changeAvailabilityStatus(status.value)"
+      >
+        <availability-status-badge :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">
+      <div class="flex items-center">
+        <fluent-icon
+          v-tooltip.right-start="$t('SIDEBAR.SET_AUTO_OFFLINE.INFO_TEXT')"
+          icon="info"
+          size="14"
+          class="mt-px"
+        />
+
+        <span
+          class="mx-1 my-0 text-xs font-medium text-slate-600 dark:text-slate-100"
+        >
+          {{ $t('SIDEBAR.SET_AUTO_OFFLINE.TEXT') }}
+        </span>
+      </div>
+
+      <woot-switch
+        size="small"
+        class="mx-1 mt-px mb-0"
+        :value="currentUserAutoOffline"
+        @input="updateAutoOffline"
+      />
+    </woot-dropdown-item>
+    <woot-dropdown-divider />
+  </woot-dropdown-menu>
+</template>
diff --git a/app/javascript/dashboard/components/layout/Sidebar.vue b/app/javascript/dashboard/components/layout/Sidebar.vue
index 3944af07a..3aca6b7df 100644
--- a/app/javascript/dashboard/components/layout/Sidebar.vue
+++ b/app/javascript/dashboard/components/layout/Sidebar.vue
@@ -1,33 +1,3 @@
-<template>
-  <aside class="flex h-full">
-    <primary-sidebar
-      :logo-source="globalConfig.logoThumbnail"
-      :installation-name="globalConfig.installationName"
-      :is-a-custom-branded-instance="isACustomBrandedInstance"
-      :account-id="accountId"
-      :menu-items="primaryMenuItems"
-      :active-menu-item="activePrimaryMenu.key"
-      @toggle-accounts="toggleAccountModal"
-      @key-shortcut-modal="toggleKeyShortcutModal"
-      @open-notification-panel="openNotificationPanel"
-    />
-    <secondary-sidebar
-      v-if="showSecondarySidebar"
-      :class="sidebarClassName"
-      :account-id="accountId"
-      :inboxes="inboxes"
-      :labels="labels"
-      :teams="teams"
-      :custom-views="customViews"
-      :menu-config="activeSecondaryMenu"
-      :current-user="currentUser"
-      :is-on-chatwoot-cloud="isOnChatwootCloud"
-      @add-label="showAddLabelPopup"
-      @toggle-accounts="toggleAccountModal"
-    />
-  </aside>
-</template>
-
 <script>
 import { mapGetters } from 'vuex';
 import { getSidebarItems } from './config/default-sidebar';
@@ -209,3 +179,33 @@ export default {
   },
 };
 </script>
+
+<template>
+  <aside class="flex h-full">
+    <primary-sidebar
+      :logo-source="globalConfig.logoThumbnail"
+      :installation-name="globalConfig.installationName"
+      :is-a-custom-branded-instance="isACustomBrandedInstance"
+      :account-id="accountId"
+      :menu-items="primaryMenuItems"
+      :active-menu-item="activePrimaryMenu.key"
+      @toggle-accounts="toggleAccountModal"
+      @key-shortcut-modal="toggleKeyShortcutModal"
+      @open-notification-panel="openNotificationPanel"
+    />
+    <secondary-sidebar
+      v-if="showSecondarySidebar"
+      :class="sidebarClassName"
+      :account-id="accountId"
+      :inboxes="inboxes"
+      :labels="labels"
+      :teams="teams"
+      :custom-views="customViews"
+      :menu-config="activeSecondaryMenu"
+      :current-user="currentUser"
+      :is-on-chatwoot-cloud="isOnChatwootCloud"
+      @add-label="showAddLabelPopup"
+      @toggle-accounts="toggleAccountModal"
+    />
+  </aside>
+</template>
diff --git a/app/javascript/dashboard/components/layout/sidebarComponents/AccountContext.vue b/app/javascript/dashboard/components/layout/sidebarComponents/AccountContext.vue
index ec0d986c2..c29020472 100644
--- a/app/javascript/dashboard/components/layout/sidebarComponents/AccountContext.vue
+++ b/app/javascript/dashboard/components/layout/sidebarComponents/AccountContext.vue
@@ -1,3 +1,29 @@
+<script>
+import { mapGetters } from 'vuex';
+
+export default {
+  data() {
+    return { showSwitchButton: false };
+  },
+  computed: {
+    ...mapGetters({
+      account: 'getCurrentAccount',
+      userAccounts: 'getUserAccounts',
+    }),
+    showShowCurrentAccountContext() {
+      return this.userAccounts.length > 1 && this.account.name;
+    },
+  },
+  methods: {
+    setShowSwitch() {
+      this.showSwitchButton = true;
+    },
+    resetShowSwitch() {
+      this.showSwitchButton = false;
+    },
+  },
+};
+</script>
 <template>
   <div
     v-if="showShowCurrentAccountContext"
@@ -30,32 +56,6 @@
     </transition>
   </div>
 </template>
-<script>
-import { mapGetters } from 'vuex';
-
-export default {
-  data() {
-    return { showSwitchButton: false };
-  },
-  computed: {
-    ...mapGetters({
-      account: 'getCurrentAccount',
-      userAccounts: 'getUserAccounts',
-    }),
-    showShowCurrentAccountContext() {
-      return this.userAccounts.length > 1 && this.account.name;
-    },
-  },
-  methods: {
-    setShowSwitch() {
-      this.showSwitchButton = true;
-    },
-    resetShowSwitch() {
-      this.showSwitchButton = false;
-    },
-  },
-};
-</script>
 <style scoped>
 @tailwind components;
 @layer components {
diff --git a/app/javascript/dashboard/components/layout/sidebarComponents/AccountSelector.vue b/app/javascript/dashboard/components/layout/sidebarComponents/AccountSelector.vue
index 3e8f1e6ab..37a115c59 100644
--- a/app/javascript/dashboard/components/layout/sidebarComponents/AccountSelector.vue
+++ b/app/javascript/dashboard/components/layout/sidebarComponents/AccountSelector.vue
@@ -1,3 +1,29 @@
+<script>
+import { mapGetters } from 'vuex';
+export default {
+  props: {
+    showAccountModal: {
+      type: Boolean,
+      default: true,
+    },
+  },
+
+  computed: {
+    ...mapGetters({
+      accountId: 'getCurrentAccountId',
+      currentUser: 'getCurrentUser',
+      globalConfig: 'globalConfig/get',
+    }),
+  },
+  methods: {
+    onChangeAccount(accountId) {
+      const accountUrl = `/app/accounts/${accountId}/dashboard`;
+      window.location.href = accountUrl;
+    },
+  },
+};
+</script>
+
 <template>
   <woot-modal
     :show="showAccountModal"
@@ -56,29 +82,3 @@
     </div>
   </woot-modal>
 </template>
-
-<script>
-import { mapGetters } from 'vuex';
-export default {
-  props: {
-    showAccountModal: {
-      type: Boolean,
-      default: true,
-    },
-  },
-
-  computed: {
-    ...mapGetters({
-      accountId: 'getCurrentAccountId',
-      currentUser: 'getCurrentUser',
-      globalConfig: 'globalConfig/get',
-    }),
-  },
-  methods: {
-    onChangeAccount(accountId) {
-      const accountUrl = `/app/accounts/${accountId}/dashboard`;
-      window.location.href = accountUrl;
-    },
-  },
-};
-</script>
diff --git a/app/javascript/dashboard/components/layout/sidebarComponents/AddAccountModal.vue b/app/javascript/dashboard/components/layout/sidebarComponents/AddAccountModal.vue
index c544842a5..e38d8f827 100644
--- a/app/javascript/dashboard/components/layout/sidebarComponents/AddAccountModal.vue
+++ b/app/javascript/dashboard/components/layout/sidebarComponents/AddAccountModal.vue
@@ -1,53 +1,3 @@
-<template>
-  <woot-modal
-    :show="show"
-    :on-close="() => $emit('close-account-create-modal')"
-  >
-    <div class="h-auto overflow-auto flex flex-col">
-      <woot-modal-header
-        :header-title="$t('CREATE_ACCOUNT.NEW_ACCOUNT')"
-        :header-content="$t('CREATE_ACCOUNT.SELECTOR_SUBTITLE')"
-      />
-      <div v-if="!hasAccounts" class="text-sm mt-6 mx-8 mb-0">
-        <div class="items-center rounded-md flex alert">
-          <div class="ml-1 mr-3">
-            <fluent-icon icon="warning" />
-          </div>
-          {{ $t('CREATE_ACCOUNT.NO_ACCOUNT_WARNING') }}
-        </div>
-      </div>
-
-      <form class="flex flex-col w-full" @submit.prevent="addAccount">
-        <div class="w-full">
-          <label :class="{ error: v$.accountName.$error }">
-            {{ $t('CREATE_ACCOUNT.FORM.NAME.LABEL') }}
-            <input
-              v-model.trim="accountName"
-              type="text"
-              :placeholder="$t('CREATE_ACCOUNT.FORM.NAME.PLACEHOLDER')"
-              @input="v$.accountName.$touch"
-            />
-          </label>
-        </div>
-        <div class="w-full">
-          <div class="w-full">
-            <woot-submit-button
-              :disabled="
-                v$.accountName.$invalid ||
-                v$.accountName.$invalid ||
-                uiFlags.isCreating
-              "
-              :button-text="$t('CREATE_ACCOUNT.FORM.SUBMIT')"
-              :loading="uiFlags.isCreating"
-              button-class="large expanded"
-            />
-          </div>
-        </div>
-      </form>
-    </div>
-  </woot-modal>
-</template>
-
 <script>
 import { useVuelidate } from '@vuelidate/core';
 import { required, minLength } from '@vuelidate/validators';
@@ -104,3 +54,53 @@ export default {
   },
 };
 </script>
+
+<template>
+  <woot-modal
+    :show="show"
+    :on-close="() => $emit('close-account-create-modal')"
+  >
+    <div class="h-auto overflow-auto flex flex-col">
+      <woot-modal-header
+        :header-title="$t('CREATE_ACCOUNT.NEW_ACCOUNT')"
+        :header-content="$t('CREATE_ACCOUNT.SELECTOR_SUBTITLE')"
+      />
+      <div v-if="!hasAccounts" class="text-sm mt-6 mx-8 mb-0">
+        <div class="items-center rounded-md flex alert">
+          <div class="ml-1 mr-3">
+            <fluent-icon icon="warning" />
+          </div>
+          {{ $t('CREATE_ACCOUNT.NO_ACCOUNT_WARNING') }}
+        </div>
+      </div>
+
+      <form class="flex flex-col w-full" @submit.prevent="addAccount">
+        <div class="w-full">
+          <label :class="{ error: v$.accountName.$error }">
+            {{ $t('CREATE_ACCOUNT.FORM.NAME.LABEL') }}
+            <input
+              v-model.trim="accountName"
+              type="text"
+              :placeholder="$t('CREATE_ACCOUNT.FORM.NAME.PLACEHOLDER')"
+              @input="v$.accountName.$touch"
+            />
+          </label>
+        </div>
+        <div class="w-full">
+          <div class="w-full">
+            <woot-submit-button
+              :disabled="
+                v$.accountName.$invalid ||
+                v$.accountName.$invalid ||
+                uiFlags.isCreating
+              "
+              :button-text="$t('CREATE_ACCOUNT.FORM.SUBMIT')"
+              :loading="uiFlags.isCreating"
+              button-class="large expanded"
+            />
+          </div>
+        </div>
+      </form>
+    </div>
+  </woot-modal>
+</template>
diff --git a/app/javascript/dashboard/components/layout/sidebarComponents/AgentDetails.vue b/app/javascript/dashboard/components/layout/sidebarComponents/AgentDetails.vue
index 7683a40b2..e64786aea 100644
--- a/app/javascript/dashboard/components/layout/sidebarComponents/AgentDetails.vue
+++ b/app/javascript/dashboard/components/layout/sidebarComponents/AgentDetails.vue
@@ -1,19 +1,3 @@
-<template>
-  <woot-button
-    v-tooltip.right="$t(`SIDEBAR.PROFILE_SETTINGS`)"
-    variant="link"
-    class="items-center flex rounded-full"
-    @click="handleClick"
-  >
-    <thumbnail
-      :src="currentUser.avatar_url"
-      :username="currentUser.name"
-      :status="statusOfAgent"
-      should-show-status-always
-      size="32px"
-    />
-  </woot-button>
-</template>
 <script>
 import { mapGetters } from 'vuex';
 import Thumbnail from '../../widgets/Thumbnail.vue';
@@ -38,3 +22,19 @@ export default {
   },
 };
 </script>
+<template>
+  <woot-button
+    v-tooltip.right="$t(`SIDEBAR.PROFILE_SETTINGS`)"
+    variant="link"
+    class="items-center flex rounded-full"
+    @click="handleClick"
+  >
+    <thumbnail
+      :src="currentUser.avatar_url"
+      :username="currentUser.name"
+      :status="statusOfAgent"
+      should-show-status-always
+      size="32px"
+    />
+  </woot-button>
+</template>
diff --git a/app/javascript/dashboard/components/layout/sidebarComponents/Logo.vue b/app/javascript/dashboard/components/layout/sidebarComponents/Logo.vue
index f470bc5b6..4faea3926 100644
--- a/app/javascript/dashboard/components/layout/sidebarComponents/Logo.vue
+++ b/app/javascript/dashboard/components/layout/sidebarComponents/Logo.vue
@@ -1,10 +1,3 @@
-<template>
-  <div class="w-8 h-8">
-    <router-link :to="dashboardPath" replace>
-      <img :src="source" :alt="name" />
-    </router-link>
-  </div>
-</template>
 <script>
 import { frontendURL } from 'dashboard/helper/URLHelper';
 
@@ -30,3 +23,10 @@ export default {
   },
 };
 </script>
+<template>
+  <div class="w-8 h-8">
+    <router-link :to="dashboardPath" replace>
+      <img :src="source" :alt="name" />
+    </router-link>
+  </div>
+</template>
diff --git a/app/javascript/dashboard/components/layout/sidebarComponents/NotificationBell.vue b/app/javascript/dashboard/components/layout/sidebarComponents/NotificationBell.vue
index f3a394f4b..fa5318857 100644
--- a/app/javascript/dashboard/components/layout/sidebarComponents/NotificationBell.vue
+++ b/app/javascript/dashboard/components/layout/sidebarComponents/NotificationBell.vue
@@ -1,28 +1,3 @@
-<template>
-  <div class="mb-4">
-    <button
-      class="text-slate-600 dark:text-slate-100 w-10 h-10 my-2 p-0 flex items-center justify-center rounded-lg hover:bg-slate-25 dark:hover:bg-slate-700 dark:hover:text-slate-100 hover:text-slate-600 relative"
-      :class="{
-        'bg-woot-50 dark:bg-slate-800 text-woot-500 hover:bg-woot-50':
-          isNotificationPanelActive,
-      }"
-      @click="openNotificationPanel"
-    >
-      <fluent-icon
-        icon="alert"
-        :class="{
-          'text-woot-500': isNotificationPanelActive,
-        }"
-      />
-      <span
-        v-if="unreadCount"
-        class="text-black-900 bg-yellow-300 absolute -top-0.5 -right-1 text-xxs min-w-[1rem] rounded-full"
-      >
-        {{ unreadCount }}
-      </span>
-    </button>
-  </div>
-</template>
 <script>
 import { mapGetters } from 'vuex';
 
@@ -54,3 +29,28 @@ export default {
   },
 };
 </script>
+<template>
+  <div class="mb-4">
+    <button
+      class="text-slate-600 dark:text-slate-100 w-10 h-10 my-2 p-0 flex items-center justify-center rounded-lg hover:bg-slate-25 dark:hover:bg-slate-700 dark:hover:text-slate-100 hover:text-slate-600 relative"
+      :class="{
+        'bg-woot-50 dark:bg-slate-800 text-woot-500 hover:bg-woot-50':
+          isNotificationPanelActive,
+      }"
+      @click="openNotificationPanel"
+    >
+      <fluent-icon
+        icon="alert"
+        :class="{
+          'text-woot-500': isNotificationPanelActive,
+        }"
+      />
+      <span
+        v-if="unreadCount"
+        class="text-black-900 bg-yellow-300 absolute -top-0.5 -right-1 text-xxs min-w-[1rem] rounded-full"
+      >
+        {{ unreadCount }}
+      </span>
+    </button>
+  </div>
+</template>
diff --git a/app/javascript/dashboard/components/layout/sidebarComponents/OptionsMenu.vue b/app/javascript/dashboard/components/layout/sidebarComponents/OptionsMenu.vue
index 01dce6bf1..93df9c1c1 100644
--- a/app/javascript/dashboard/components/layout/sidebarComponents/OptionsMenu.vue
+++ b/app/javascript/dashboard/components/layout/sidebarComponents/OptionsMenu.vue
@@ -1,3 +1,60 @@
+<script>
+import { mapGetters } from 'vuex';
+import Auth from '../../../api/auth';
+import WootDropdownItem from 'shared/components/ui/dropdown/DropdownItem.vue';
+import WootDropdownMenu from 'shared/components/ui/dropdown/DropdownMenu.vue';
+import AvailabilityStatus from 'dashboard/components/layout/AvailabilityStatus.vue';
+
+export default {
+  components: {
+    WootDropdownMenu,
+    WootDropdownItem,
+    AvailabilityStatus,
+  },
+  props: {
+    show: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  computed: {
+    ...mapGetters({
+      currentUser: 'getCurrentUser',
+      globalConfig: 'globalConfig/get',
+      accountId: 'getCurrentAccountId',
+    }),
+    showChangeAccountOption() {
+      if (this.globalConfig.createNewAccountFromDashboard) {
+        return true;
+      }
+
+      const { accounts = [] } = this.currentUser;
+      return accounts.length > 1;
+    },
+  },
+  methods: {
+    handleProfileSettingClick(e, navigate) {
+      this.$emit('close');
+      navigate(e);
+    },
+    handleKeyboardHelpClick() {
+      this.$emit('key-shortcut-modal');
+      this.$emit('close');
+    },
+    logout() {
+      Auth.logout();
+    },
+    onClickAway() {
+      if (this.show) this.$emit('close');
+    },
+    openAppearanceOptions() {
+      const ninja = document.querySelector('ninja-keys');
+      ninja.open({ parent: 'appearance_settings' });
+    },
+  },
+};
+</script>
+
 <template>
   <transition name="menu-slide">
     <div
@@ -104,60 +161,3 @@
     </div>
   </transition>
 </template>
-
-<script>
-import { mapGetters } from 'vuex';
-import Auth from '../../../api/auth';
-import WootDropdownItem from 'shared/components/ui/dropdown/DropdownItem.vue';
-import WootDropdownMenu from 'shared/components/ui/dropdown/DropdownMenu.vue';
-import AvailabilityStatus from 'dashboard/components/layout/AvailabilityStatus.vue';
-
-export default {
-  components: {
-    WootDropdownMenu,
-    WootDropdownItem,
-    AvailabilityStatus,
-  },
-  props: {
-    show: {
-      type: Boolean,
-      default: false,
-    },
-  },
-  computed: {
-    ...mapGetters({
-      currentUser: 'getCurrentUser',
-      globalConfig: 'globalConfig/get',
-      accountId: 'getCurrentAccountId',
-    }),
-    showChangeAccountOption() {
-      if (this.globalConfig.createNewAccountFromDashboard) {
-        return true;
-      }
-
-      const { accounts = [] } = this.currentUser;
-      return accounts.length > 1;
-    },
-  },
-  methods: {
-    handleProfileSettingClick(e, navigate) {
-      this.$emit('close');
-      navigate(e);
-    },
-    handleKeyboardHelpClick() {
-      this.$emit('key-shortcut-modal');
-      this.$emit('close');
-    },
-    logout() {
-      Auth.logout();
-    },
-    onClickAway() {
-      if (this.show) this.$emit('close');
-    },
-    openAppearanceOptions() {
-      const ninja = document.querySelector('ninja-keys');
-      ninja.open({ parent: 'appearance_settings' });
-    },
-  },
-};
-</script>
diff --git a/app/javascript/dashboard/components/layout/sidebarComponents/Primary.vue b/app/javascript/dashboard/components/layout/sidebarComponents/Primary.vue
index c42d23448..d24866826 100644
--- a/app/javascript/dashboard/components/layout/sidebarComponents/Primary.vue
+++ b/app/javascript/dashboard/components/layout/sidebarComponents/Primary.vue
@@ -1,43 +1,3 @@
-<template>
-  <div
-    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
-        :source="logoSource"
-        :name="installationName"
-        :account-id="accountId"
-        class="m-4 mb-10"
-      />
-      <primary-nav-item
-        v-for="menuItem in menuItems"
-        :key="menuItem.toState"
-        :icon="menuItem.icon"
-        :name="menuItem.label"
-        :to="menuItem.toState"
-        :is-child-menu-active="menuItem.key === activeMenuItem"
-      />
-    </div>
-    <div class="flex flex-col items-center justify-end pb-6">
-      <primary-nav-item
-        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
-        :show="showOptionsMenu"
-        @toggle-accounts="toggleAccountModal"
-        @show-support-chat-window="toggleSupportChatWindow"
-        @key-shortcut-modal="$emit('key-shortcut-modal')"
-        @close="toggleOptions"
-      />
-    </div>
-  </div>
-</template>
 <script>
 import Logo from './Logo.vue';
 import PrimaryNavItem from './PrimaryNavItem.vue';
@@ -106,3 +66,43 @@ export default {
   },
 };
 </script>
+<template>
+  <div
+    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
+        :source="logoSource"
+        :name="installationName"
+        :account-id="accountId"
+        class="m-4 mb-10"
+      />
+      <primary-nav-item
+        v-for="menuItem in menuItems"
+        :key="menuItem.toState"
+        :icon="menuItem.icon"
+        :name="menuItem.label"
+        :to="menuItem.toState"
+        :is-child-menu-active="menuItem.key === activeMenuItem"
+      />
+    </div>
+    <div class="flex flex-col items-center justify-end pb-6">
+      <primary-nav-item
+        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
+        :show="showOptionsMenu"
+        @toggle-accounts="toggleAccountModal"
+        @show-support-chat-window="toggleSupportChatWindow"
+        @key-shortcut-modal="$emit('key-shortcut-modal')"
+        @close="toggleOptions"
+      />
+    </div>
+  </div>
+</template>
diff --git a/app/javascript/dashboard/components/layout/sidebarComponents/PrimaryNavItem.vue b/app/javascript/dashboard/components/layout/sidebarComponents/PrimaryNavItem.vue
index f23d62347..579c290ed 100644
--- a/app/javascript/dashboard/components/layout/sidebarComponents/PrimaryNavItem.vue
+++ b/app/javascript/dashboard/components/layout/sidebarComponents/PrimaryNavItem.vue
@@ -1,33 +1,3 @@
-<template>
-  <router-link v-slot="{ href, isActive, navigate }" :to="to" custom>
-    <a
-      v-tooltip.right="$t(`SIDEBAR.${name}`)"
-      :href="href"
-      class="text-slate-700 dark:text-slate-100 w-10 h-10 my-2 flex items-center justify-center rounded-lg hover:bg-slate-25 dark:hover:bg-slate-700 dark:hover:text-slate-100 hover:text-slate-600 relative"
-      :class="{
-        'bg-woot-50 dark:bg-slate-800 text-woot-500 hover:bg-woot-50':
-          isActive || isChildMenuActive,
-      }"
-      :rel="openInNewPage ? 'noopener noreferrer nofollow' : undefined"
-      :target="openInNewPage ? '_blank' : undefined"
-      @click="navigate"
-    >
-      <fluent-icon
-        :icon="icon"
-        :class="{
-          'text-woot-500': isActive || isChildMenuActive,
-        }"
-      />
-      <span class="sr-only">{{ name }}</span>
-      <span
-        v-if="count"
-        class="text-black-900 bg-yellow-500 absolute -top-1 -right-1"
-      >
-        {{ count }}
-      </span>
-    </a>
-  </router-link>
-</template>
 <script>
 export default {
   props: {
@@ -58,3 +28,33 @@ export default {
   },
 };
 </script>
+<template>
+  <router-link v-slot="{ href, isActive, navigate }" :to="to" custom>
+    <a
+      v-tooltip.right="$t(`SIDEBAR.${name}`)"
+      :href="href"
+      class="text-slate-700 dark:text-slate-100 w-10 h-10 my-2 flex items-center justify-center rounded-lg hover:bg-slate-25 dark:hover:bg-slate-700 dark:hover:text-slate-100 hover:text-slate-600 relative"
+      :class="{
+        'bg-woot-50 dark:bg-slate-800 text-woot-500 hover:bg-woot-50':
+          isActive || isChildMenuActive,
+      }"
+      :rel="openInNewPage ? 'noopener noreferrer nofollow' : undefined"
+      :target="openInNewPage ? '_blank' : undefined"
+      @click="navigate"
+    >
+      <fluent-icon
+        :icon="icon"
+        :class="{
+          'text-woot-500': isActive || isChildMenuActive,
+        }"
+      />
+      <span class="sr-only">{{ name }}</span>
+      <span
+        v-if="count"
+        class="text-black-900 bg-yellow-500 absolute -top-1 -right-1"
+      >
+        {{ count }}
+      </span>
+    </a>
+  </router-link>
+</template>
diff --git a/app/javascript/dashboard/components/layout/sidebarComponents/Secondary.vue b/app/javascript/dashboard/components/layout/sidebarComponents/Secondary.vue
index b4cd3ca90..498eaf813 100644
--- a/app/javascript/dashboard/components/layout/sidebarComponents/Secondary.vue
+++ b/app/javascript/dashboard/components/layout/sidebarComponents/Secondary.vue
@@ -1,28 +1,3 @@
-<template>
-  <div
-    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" />
-    <transition-group
-      name="menu-list"
-      tag="ul"
-      class="pt-2 list-none ml-0 mb-0"
-    >
-      <secondary-nav-item
-        v-for="menuItem in accessibleMenuItems"
-        :key="menuItem.toState"
-        :menu-item="menuItem"
-      />
-      <secondary-nav-item
-        v-for="menuItem in additionalSecondaryMenuItems[menuConfig.parentNav]"
-        :key="menuItem.key"
-        :menu-item="menuItem"
-        @add-label="showAddLabelPopup"
-      />
-    </transition-group>
-  </div>
-</template>
 <script>
 import { frontendURL } from '../../../helper/URLHelper';
 import SecondaryNavItem from './SecondaryNavItem.vue';
@@ -259,3 +234,28 @@ export default {
   },
 };
 </script>
+<template>
+  <div
+    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" />
+    <transition-group
+      name="menu-list"
+      tag="ul"
+      class="pt-2 list-none ml-0 mb-0"
+    >
+      <secondary-nav-item
+        v-for="menuItem in accessibleMenuItems"
+        :key="menuItem.toState"
+        :menu-item="menuItem"
+      />
+      <secondary-nav-item
+        v-for="menuItem in additionalSecondaryMenuItems[menuConfig.parentNav]"
+        :key="menuItem.key"
+        :menu-item="menuItem"
+        @add-label="showAddLabelPopup"
+      />
+    </transition-group>
+  </div>
+</template>
diff --git a/app/javascript/dashboard/components/layout/sidebarComponents/SecondaryChildNavItem.vue b/app/javascript/dashboard/components/layout/sidebarComponents/SecondaryChildNavItem.vue
index 24ad62353..4c105f8cb 100644
--- a/app/javascript/dashboard/components/layout/sidebarComponents/SecondaryChildNavItem.vue
+++ b/app/javascript/dashboard/components/layout/sidebarComponents/SecondaryChildNavItem.vue
@@ -1,3 +1,54 @@
+<script>
+export default {
+  props: {
+    to: {
+      type: String,
+      default: '',
+    },
+    label: {
+      type: String,
+      default: '',
+    },
+    labelColor: {
+      type: String,
+      default: '',
+    },
+    shouldTruncate: {
+      type: Boolean,
+      default: false,
+    },
+    icon: {
+      type: String,
+      default: '',
+    },
+    warningIcon: {
+      type: String,
+      default: '',
+    },
+    showChildCount: {
+      type: Boolean,
+      default: false,
+    },
+    childItemCount: {
+      type: Number,
+      default: 0,
+    },
+  },
+  computed: {
+    showIcon() {
+      return {
+        'overflow-hidden whitespace-nowrap text-ellipsis': this.shouldTruncate,
+      };
+    },
+    isCountZero() {
+      return this.childItemCount === 0;
+    },
+    menuTitle() {
+      return this.shouldTruncate ? this.label : '';
+    },
+  },
+};
+</script>
 <template>
   <router-link
     v-slot="{ href, isActive, navigate }"
@@ -78,54 +129,3 @@
     </li>
   </router-link>
 </template>
-<script>
-export default {
-  props: {
-    to: {
-      type: String,
-      default: '',
-    },
-    label: {
-      type: String,
-      default: '',
-    },
-    labelColor: {
-      type: String,
-      default: '',
-    },
-    shouldTruncate: {
-      type: Boolean,
-      default: false,
-    },
-    icon: {
-      type: String,
-      default: '',
-    },
-    warningIcon: {
-      type: String,
-      default: '',
-    },
-    showChildCount: {
-      type: Boolean,
-      default: false,
-    },
-    childItemCount: {
-      type: Number,
-      default: 0,
-    },
-  },
-  computed: {
-    showIcon() {
-      return {
-        'overflow-hidden whitespace-nowrap text-ellipsis': this.shouldTruncate,
-      };
-    },
-    isCountZero() {
-      return this.childItemCount === 0;
-    },
-    menuTitle() {
-      return this.shouldTruncate ? this.label : '';
-    },
-  },
-};
-</script>
diff --git a/app/javascript/dashboard/components/layout/sidebarComponents/SecondaryNavItem.vue b/app/javascript/dashboard/components/layout/sidebarComponents/SecondaryNavItem.vue
index 57408e1f4..7e468934b 100644
--- a/app/javascript/dashboard/components/layout/sidebarComponents/SecondaryNavItem.vue
+++ b/app/javascript/dashboard/components/layout/sidebarComponents/SecondaryNavItem.vue
@@ -1,97 +1,3 @@
-<template>
-  <li v-show="isMenuItemVisible" class="mt-1">
-    <div v-if="hasSubMenu" class="flex justify-between">
-      <span
-        class="px-2 pt-1 my-2 text-sm font-semibold text-slate-700 dark:text-slate-200"
-      >
-        {{ $t(`SIDEBAR.${menuItem.label}`) }}
-      </span>
-      <div v-if="menuItem.showNewButton" class="flex items-center">
-        <woot-button
-          size="tiny"
-          variant="clear"
-          color-scheme="secondary"
-          icon="add"
-          class="p-0 ml-2"
-          @click="onClickOpen"
-        />
-      </div>
-    </div>
-    <router-link
-      v-else
-      class="flex items-center p-2 m-0 text-sm font-medium leading-4 rounded-lg text-slate-700 dark:text-slate-100 hover:bg-slate-25 dark:hover:bg-slate-800"
-      :class="computedClass"
-      :to="menuItem && menuItem.toState"
-    >
-      <fluent-icon
-        :icon="menuItem.icon"
-        class="min-w-[1rem] mr-1.5 rtl:mr-0 rtl:ml-1.5"
-        size="14"
-      />
-      {{ $t(`SIDEBAR.${menuItem.label}`) }}
-      <span
-        v-if="showChildCount(menuItem.count)"
-        class="px-1 py-0 mx-1 font-medium rounded-md text-xxs"
-        :class="{
-          'text-slate-300 dark:text-slate-600': isCountZero && !isActiveView,
-          'text-slate-600 dark:text-slate-50': !isCountZero && !isActiveView,
-          'bg-woot-75 dark:bg-woot-200 text-woot-600 dark:text-woot-600':
-            isActiveView,
-          'bg-slate-50 dark:bg-slate-700': !isActiveView,
-        }"
-      >
-        {{ `${menuItem.count}` }}
-      </span>
-      <span
-        v-if="menuItem.beta"
-        data-view-component="true"
-        label="Beta"
-        class="inline-block px-1 mx-1 font-medium leading-4 text-green-500 border border-green-400 rounded-lg text-xxs"
-      >
-        {{ $t('SIDEBAR.BETA') }}
-      </span>
-    </router-link>
-
-    <ul v-if="hasSubMenu" class="mb-0 ml-0 list-none">
-      <secondary-child-nav-item
-        v-for="child in menuItem.children"
-        :key="child.id"
-        :to="child.toState"
-        :label="child.label"
-        :label-color="child.color"
-        :should-truncate="child.truncateLabel"
-        :icon="computedInboxClass(child)"
-        :warning-icon="computedInboxErrorClass(child)"
-        :show-child-count="showChildCount(child.count)"
-        :child-item-count="child.count"
-      />
-      <Policy :permissions="['administrator']">
-        <router-link
-          v-if="menuItem.newLink"
-          v-slot="{ href, navigate }"
-          :to="menuItem.toState"
-          custom
-        >
-          <li class="pl-1">
-            <a :href="href">
-              <woot-button
-                size="tiny"
-                variant="clear"
-                color-scheme="secondary"
-                icon="add"
-                :data-testid="menuItem.dataTestid"
-                @click="e => newLinkClick(e, navigate)"
-              >
-                {{ $t(`SIDEBAR.${menuItem.newLinkTag}`) }}
-              </woot-button>
-            </a>
-          </li>
-        </router-link>
-      </Policy>
-    </ul>
-  </li>
-</template>
-
 <script>
 import { mapGetters } from 'vuex';
 import { useAdmin } from 'dashboard/composables/useAdmin';
@@ -279,3 +185,97 @@ export default {
   },
 };
 </script>
+
+<template>
+  <li v-show="isMenuItemVisible" class="mt-1">
+    <div v-if="hasSubMenu" class="flex justify-between">
+      <span
+        class="px-2 pt-1 my-2 text-sm font-semibold text-slate-700 dark:text-slate-200"
+      >
+        {{ $t(`SIDEBAR.${menuItem.label}`) }}
+      </span>
+      <div v-if="menuItem.showNewButton" class="flex items-center">
+        <woot-button
+          size="tiny"
+          variant="clear"
+          color-scheme="secondary"
+          icon="add"
+          class="p-0 ml-2"
+          @click="onClickOpen"
+        />
+      </div>
+    </div>
+    <router-link
+      v-else
+      class="flex items-center p-2 m-0 text-sm font-medium leading-4 rounded-lg text-slate-700 dark:text-slate-100 hover:bg-slate-25 dark:hover:bg-slate-800"
+      :class="computedClass"
+      :to="menuItem && menuItem.toState"
+    >
+      <fluent-icon
+        :icon="menuItem.icon"
+        class="min-w-[1rem] mr-1.5 rtl:mr-0 rtl:ml-1.5"
+        size="14"
+      />
+      {{ $t(`SIDEBAR.${menuItem.label}`) }}
+      <span
+        v-if="showChildCount(menuItem.count)"
+        class="px-1 py-0 mx-1 font-medium rounded-md text-xxs"
+        :class="{
+          'text-slate-300 dark:text-slate-600': isCountZero && !isActiveView,
+          'text-slate-600 dark:text-slate-50': !isCountZero && !isActiveView,
+          'bg-woot-75 dark:bg-woot-200 text-woot-600 dark:text-woot-600':
+            isActiveView,
+          'bg-slate-50 dark:bg-slate-700': !isActiveView,
+        }"
+      >
+        {{ `${menuItem.count}` }}
+      </span>
+      <span
+        v-if="menuItem.beta"
+        data-view-component="true"
+        label="Beta"
+        class="inline-block px-1 mx-1 font-medium leading-4 text-green-500 border border-green-400 rounded-lg text-xxs"
+      >
+        {{ $t('SIDEBAR.BETA') }}
+      </span>
+    </router-link>
+
+    <ul v-if="hasSubMenu" class="mb-0 ml-0 list-none">
+      <secondary-child-nav-item
+        v-for="child in menuItem.children"
+        :key="child.id"
+        :to="child.toState"
+        :label="child.label"
+        :label-color="child.color"
+        :should-truncate="child.truncateLabel"
+        :icon="computedInboxClass(child)"
+        :warning-icon="computedInboxErrorClass(child)"
+        :show-child-count="showChildCount(child.count)"
+        :child-item-count="child.count"
+      />
+      <Policy :permissions="['administrator']">
+        <router-link
+          v-if="menuItem.newLink"
+          v-slot="{ href, navigate }"
+          :to="menuItem.toState"
+          custom
+        >
+          <li class="pl-1">
+            <a :href="href">
+              <woot-button
+                size="tiny"
+                variant="clear"
+                color-scheme="secondary"
+                icon="add"
+                :data-testid="menuItem.dataTestid"
+                @click="e => newLinkClick(e, navigate)"
+              >
+                {{ $t(`SIDEBAR.${menuItem.newLinkTag}`) }}
+              </woot-button>
+            </a>
+          </li>
+        </router-link>
+      </Policy>
+    </ul>
+  </li>
+</template>
diff --git a/app/javascript/dashboard/components/ui/AnnouncementPopup.vue b/app/javascript/dashboard/components/ui/AnnouncementPopup.vue
index b2ed04c5d..ab3973c39 100644
--- a/app/javascript/dashboard/components/ui/AnnouncementPopup.vue
+++ b/app/javascript/dashboard/components/ui/AnnouncementPopup.vue
@@ -1,24 +1,3 @@
-<template>
-  <div class="announcement-popup">
-    <span v-if="popupMessage" class="popup-content">
-      {{ popupMessage }}
-      <span v-if="routeText" class="route-url" @click="onClickOpenPath">
-        {{ routeText }}
-      </span>
-    </span>
-    <div v-if="hasCloseButton" class="popup-close">
-      <woot-button
-        v-if="hasCloseButton"
-        color-scheme="primary"
-        variant="link"
-        size="small"
-        @click="onClickClose"
-      >
-        {{ closeButtonText }}
-      </woot-button>
-    </div>
-  </div>
-</template>
 <script>
 export default {
   props: {
@@ -49,6 +28,27 @@ export default {
   },
 };
 </script>
+<template>
+  <div class="announcement-popup">
+    <span v-if="popupMessage" class="popup-content">
+      {{ popupMessage }}
+      <span v-if="routeText" class="route-url" @click="onClickOpenPath">
+        {{ routeText }}
+      </span>
+    </span>
+    <div v-if="hasCloseButton" class="popup-close">
+      <woot-button
+        v-if="hasCloseButton"
+        color-scheme="primary"
+        variant="link"
+        size="small"
+        @click="onClickClose"
+      >
+        {{ closeButtonText }}
+      </woot-button>
+    </div>
+  </div>
+</template>
 
 <style lang="scss">
 .announcement-popup {
diff --git a/app/javascript/dashboard/components/ui/Banner.vue b/app/javascript/dashboard/components/ui/Banner.vue
index 3473111ae..a4372149d 100644
--- a/app/javascript/dashboard/components/ui/Banner.vue
+++ b/app/javascript/dashboard/components/ui/Banner.vue
@@ -1,45 +1,3 @@
-<template>
-  <div
-    class="flex items-center justify-center h-12 gap-4 px-4 py-3 text-xs text-white banner dark:text-white"
-    :class="bannerClasses"
-  >
-    <span class="banner-message">
-      {{ bannerMessage }}
-      <a
-        v-if="hrefLink"
-        :href="hrefLink"
-        rel="noopener noreferrer nofollow"
-        target="_blank"
-      >
-        {{ hrefLinkText }}
-      </a>
-    </span>
-    <div class="actions">
-      <woot-button
-        v-if="hasActionButton"
-        size="tiny"
-        :icon="actionButtonIcon"
-        :variant="actionButtonVariant"
-        color-scheme="primary"
-        class-names="banner-action__button"
-        @click="onClick"
-      >
-        {{ actionButtonLabel }}
-      </woot-button>
-      <woot-button
-        v-if="hasCloseButton"
-        size="tiny"
-        :color-scheme="colorScheme"
-        icon="dismiss-circle"
-        class-names="banner-action__button"
-        @click="onClickClose"
-      >
-        {{ $t('GENERAL_SETTINGS.DISMISS') }}
-      </woot-button>
-    </div>
-  </div>
-</template>
-
 <script>
 export default {
   props: {
@@ -101,6 +59,48 @@ export default {
 };
 </script>
 
+<template>
+  <div
+    class="flex items-center justify-center h-12 gap-4 px-4 py-3 text-xs text-white banner dark:text-white"
+    :class="bannerClasses"
+  >
+    <span class="banner-message">
+      {{ bannerMessage }}
+      <a
+        v-if="hrefLink"
+        :href="hrefLink"
+        rel="noopener noreferrer nofollow"
+        target="_blank"
+      >
+        {{ hrefLinkText }}
+      </a>
+    </span>
+    <div class="actions">
+      <woot-button
+        v-if="hasActionButton"
+        size="tiny"
+        :icon="actionButtonIcon"
+        :variant="actionButtonVariant"
+        color-scheme="primary"
+        class-names="banner-action__button"
+        @click="onClick"
+      >
+        {{ actionButtonLabel }}
+      </woot-button>
+      <woot-button
+        v-if="hasCloseButton"
+        size="tiny"
+        :color-scheme="colorScheme"
+        icon="dismiss-circle"
+        class-names="banner-action__button"
+        @click="onClickClose"
+      >
+        {{ $t('GENERAL_SETTINGS.DISMISS') }}
+      </woot-button>
+    </div>
+  </div>
+</template>
+
 <style lang="scss" scoped>
 .banner {
   &.primary {
diff --git a/app/javascript/dashboard/components/ui/ContextMenu.vue b/app/javascript/dashboard/components/ui/ContextMenu.vue
index 72722c0c4..0bd2f370c 100644
--- a/app/javascript/dashboard/components/ui/ContextMenu.vue
+++ b/app/javascript/dashboard/components/ui/ContextMenu.vue
@@ -1,13 +1,3 @@
-<template>
-  <div
-    class="fixed outline-none z-[9999] cursor-pointer"
-    :style="style"
-    tabindex="0"
-    @blur="$emit('close')"
-  >
-    <slot />
-  </div>
-</template>
 <script>
 export default {
   props: {
@@ -40,3 +30,13 @@ export default {
   },
 };
 </script>
+<template>
+  <div
+    class="fixed outline-none z-[9999] cursor-pointer"
+    :style="style"
+    tabindex="0"
+    @blur="$emit('close')"
+  >
+    <slot />
+  </div>
+</template>
diff --git a/app/javascript/dashboard/components/ui/DateRangePicker.vue b/app/javascript/dashboard/components/ui/DateRangePicker.vue
index 08ce0e0c1..cf422fe92 100644
--- a/app/javascript/dashboard/components/ui/DateRangePicker.vue
+++ b/app/javascript/dashboard/components/ui/DateRangePicker.vue
@@ -1,18 +1,3 @@
-<template>
-  <div class="date-picker">
-    <date-picker
-      :range="true"
-      :confirm="true"
-      :clearable="false"
-      :editable="false"
-      :confirm-text="confirmText"
-      :placeholder="placeholder"
-      :value="value"
-      @change="handleChange"
-    />
-  </div>
-</template>
-
 <script>
 import DatePicker from 'vue2-datepicker';
 export default {
@@ -38,3 +23,18 @@ export default {
   },
 };
 </script>
+
+<template>
+  <div class="date-picker">
+    <date-picker
+      :range="true"
+      :confirm="true"
+      :clearable="false"
+      :editable="false"
+      :confirm-text="confirmText"
+      :placeholder="placeholder"
+      :value="value"
+      @change="handleChange"
+    />
+  </div>
+</template>
diff --git a/app/javascript/dashboard/components/ui/DateTimePicker.vue b/app/javascript/dashboard/components/ui/DateTimePicker.vue
index 979136695..a476d2289 100644
--- a/app/javascript/dashboard/components/ui/DateTimePicker.vue
+++ b/app/javascript/dashboard/components/ui/DateTimePicker.vue
@@ -1,19 +1,3 @@
-<template>
-  <div class="date-picker">
-    <date-picker
-      type="datetime"
-      :confirm="true"
-      :clearable="false"
-      :editable="false"
-      :confirm-text="confirmText"
-      :placeholder="placeholder"
-      :value="value"
-      :disabled-date="disableBeforeToday"
-      @change="handleChange"
-    />
-  </div>
-</template>
-
 <script>
 import addDays from 'date-fns/addDays';
 import DatePicker from 'vue2-datepicker';
@@ -45,3 +29,19 @@ export default {
   },
 };
 </script>
+
+<template>
+  <div class="date-picker">
+    <date-picker
+      type="datetime"
+      :confirm="true"
+      :clearable="false"
+      :editable="false"
+      :confirm-text="confirmText"
+      :placeholder="placeholder"
+      :value="value"
+      :disabled-date="disableBeforeToday"
+      @change="handleChange"
+    />
+  </div>
+</template>
diff --git a/app/javascript/dashboard/components/ui/Label.vue b/app/javascript/dashboard/components/ui/Label.vue
index e2d1322ef..ca07efaaa 100644
--- a/app/javascript/dashboard/components/ui/Label.vue
+++ b/app/javascript/dashboard/components/ui/Label.vue
@@ -1,32 +1,3 @@
-<template>
-  <div
-    class="inline-flex ltr:mr-1 rtl:ml-1 mb-1"
-    :class="labelClass"
-    :style="labelStyle"
-    :title="description"
-  >
-    <span v-if="icon" class="label-action--button">
-      <fluent-icon :icon="icon" size="12" class="label--icon cursor-pointer" />
-    </span>
-    <span
-      v-if="['smooth', 'dashed'].includes(variant) && title && !icon"
-      :style="{ background: color }"
-      class="label-color-dot flex-shrink-0"
-    />
-    <span v-if="!href" class="whitespace-nowrap text-ellipsis overflow-hidden">
-      {{ title }}
-    </span>
-    <a v-else :href="href" :style="anchorStyle">{{ title }}</a>
-    <button
-      v-if="showClose"
-      class="label-close--button p-0"
-      :style="{ color: textColor }"
-      @click="onClick"
-    >
-      <fluent-icon icon="dismiss" size="12" class="close--icon" />
-    </button>
-  </div>
-</template>
 <script>
 import { getContrastingTextColor } from '@chatwoot/utils';
 
@@ -108,6 +79,35 @@ export default {
   },
 };
 </script>
+<template>
+  <div
+    class="inline-flex ltr:mr-1 rtl:ml-1 mb-1"
+    :class="labelClass"
+    :style="labelStyle"
+    :title="description"
+  >
+    <span v-if="icon" class="label-action--button">
+      <fluent-icon :icon="icon" size="12" class="label--icon cursor-pointer" />
+    </span>
+    <span
+      v-if="['smooth', 'dashed'].includes(variant) && title && !icon"
+      :style="{ background: color }"
+      class="label-color-dot flex-shrink-0"
+    />
+    <span v-if="!href" class="whitespace-nowrap text-ellipsis overflow-hidden">
+      {{ title }}
+    </span>
+    <a v-else :href="href" :style="anchorStyle">{{ title }}</a>
+    <button
+      v-if="showClose"
+      class="label-close--button p-0"
+      :style="{ color: textColor }"
+      @click="onClick"
+    >
+      <fluent-icon icon="dismiss" size="12" class="close--icon" />
+    </button>
+  </div>
+</template>
 
 <style scoped lang="scss">
 .label {
diff --git a/app/javascript/dashboard/components/ui/PreviewCard.vue b/app/javascript/dashboard/components/ui/PreviewCard.vue
index ec0dd5539..f441a2645 100644
--- a/app/javascript/dashboard/components/ui/PreviewCard.vue
+++ b/app/javascript/dashboard/components/ui/PreviewCard.vue
@@ -1,3 +1,30 @@
+<script>
+export default {
+  props: {
+    heading: {
+      type: String,
+      default: '',
+    },
+    content: {
+      type: String,
+      default: '',
+    },
+    active: {
+      type: Boolean,
+      default: false,
+    },
+    buttonText: {
+      type: String,
+      default: 'Active',
+    },
+    src: {
+      type: String,
+      default: '',
+    },
+  },
+};
+</script>
+
 <template>
   <div
     class="flex flex-col min-w-[15rem] max-h-[21.25rem] max-w-[23.75rem] rounded-md border border-solid border-slate-75 dark:border-slate-600"
@@ -41,30 +68,3 @@
     <slot v-else />
   </div>
 </template>
-
-<script>
-export default {
-  props: {
-    heading: {
-      type: String,
-      default: '',
-    },
-    content: {
-      type: String,
-      default: '',
-    },
-    active: {
-      type: Boolean,
-      default: false,
-    },
-    buttonText: {
-      type: String,
-      default: 'Active',
-    },
-    src: {
-      type: String,
-      default: '',
-    },
-  },
-};
-</script>
diff --git a/app/javascript/dashboard/components/ui/Switch.vue b/app/javascript/dashboard/components/ui/Switch.vue
index 3aa8f15a5..e7d7e1ced 100644
--- a/app/javascript/dashboard/components/ui/Switch.vue
+++ b/app/javascript/dashboard/components/ui/Switch.vue
@@ -1,16 +1,3 @@
-<template>
-  <button
-    type="button"
-    class="toggle-button p-0"
-    :class="{ active: value, small: size === 'small' }"
-    role="switch"
-    :aria-checked="value.toString()"
-    @click="onClick"
-  >
-    <span aria-hidden="true" :class="{ active: value }" />
-  </button>
-</template>
-
 <script>
 export default {
   props: {
@@ -24,6 +11,19 @@ export default {
   },
 };
 </script>
+
+<template>
+  <button
+    type="button"
+    class="toggle-button p-0"
+    :class="{ active: value, small: size === 'small' }"
+    role="switch"
+    :aria-checked="value.toString()"
+    @click="onClick"
+  >
+    <span aria-hidden="true" :class="{ active: value }" />
+  </button>
+</template>
 <style lang="scss" scoped>
 .toggle-button {
   @apply bg-slate-200 dark:bg-slate-600;
diff --git a/app/javascript/dashboard/components/ui/Tabs/TabsItem.vue b/app/javascript/dashboard/components/ui/Tabs/TabsItem.vue
index 340aa4f90..84c4ba33b 100644
--- a/app/javascript/dashboard/components/ui/Tabs/TabsItem.vue
+++ b/app/javascript/dashboard/components/ui/Tabs/TabsItem.vue
@@ -1,20 +1,3 @@
-<template>
-  <li
-    :class="{
-      'tabs-title': true,
-      'is-active': active,
-    }"
-  >
-    <a @click="onTabClick">
-      {{ name }}
-      <div v-if="showBadge" class="badge min-w-[20px]">
-        <span>
-          {{ getItemCount }}
-        </span>
-      </div>
-    </a>
-  </li>
-</template>
 <script>
 export default {
   name: 'WootTabsItem',
@@ -61,3 +44,20 @@ export default {
   },
 };
 </script>
+<template>
+  <li
+    :class="{
+      'tabs-title': true,
+      'is-active': active,
+    }"
+  >
+    <a @click="onTabClick">
+      {{ name }}
+      <div v-if="showBadge" class="badge min-w-[20px]">
+        <span>
+          {{ getItemCount }}
+        </span>
+      </div>
+    </a>
+  </li>
+</template>
diff --git a/app/javascript/dashboard/components/ui/TimeAgo.vue b/app/javascript/dashboard/components/ui/TimeAgo.vue
index 14dcc82d5..671f5ed09 100644
--- a/app/javascript/dashboard/components/ui/TimeAgo.vue
+++ b/app/javascript/dashboard/components/ui/TimeAgo.vue
@@ -1,16 +1,3 @@
-<template>
-  <div
-    v-tooltip.top="{
-      content: tooltipText,
-      delay: { show: 1500, hide: 0 },
-      hideOnClick: true,
-    }"
-    class="ml-auto leading-4 text-xxs text-slate-500 dark:text-slate-500 hover:text-slate-900 dark:hover:text-slate-100"
-  >
-    <span>{{ `${createdAtTime} • ${lastActivityTime}` }}</span>
-  </div>
-</template>
-
 <script>
 const MINUTE_IN_MILLI_SECONDS = 60000;
 const HOUR_IN_MILLI_SECONDS = MINUTE_IN_MILLI_SECONDS * 60;
@@ -118,3 +105,16 @@ export default {
   },
 };
 </script>
+
+<template>
+  <div
+    v-tooltip.top="{
+      content: tooltipText,
+      delay: { show: 1500, hide: 0 },
+      hideOnClick: true,
+    }"
+    class="ml-auto leading-4 text-xxs text-slate-500 dark:text-slate-500 hover:text-slate-900 dark:hover:text-slate-100"
+  >
+    <span>{{ `${createdAtTime} • ${lastActivityTime}` }}</span>
+  </div>
+</template>
diff --git a/app/javascript/dashboard/components/ui/Wizard.vue b/app/javascript/dashboard/components/ui/Wizard.vue
index 9c887c853..617b6e5be 100644
--- a/app/javascript/dashboard/components/ui/Wizard.vue
+++ b/app/javascript/dashboard/components/ui/Wizard.vue
@@ -1,3 +1,35 @@
+<script>
+/* eslint no-console: 0 */
+import globalConfigMixin from 'shared/mixins/globalConfigMixin';
+
+export default {
+  mixins: [globalConfigMixin],
+  props: {
+    isFullwidth: Boolean,
+    items: {
+      type: Array,
+      default: () => [],
+    },
+  },
+  computed: {
+    classObject() {
+      return 'w-full';
+    },
+    activeIndex() {
+      return this.items.findIndex(i => i.route === this.$route.name);
+    },
+  },
+  methods: {
+    isActive(item) {
+      return this.items.indexOf(item) === this.activeIndex;
+    },
+    isOver(item) {
+      return this.items.indexOf(item) < this.activeIndex;
+    },
+  },
+};
+</script>
+
 <template>
   <transition-group
     name="wizard-items"
@@ -33,38 +65,6 @@
     </div>
   </transition-group>
 </template>
-
-<script>
-/* eslint no-console: 0 */
-import globalConfigMixin from 'shared/mixins/globalConfigMixin';
-
-export default {
-  mixins: [globalConfigMixin],
-  props: {
-    isFullwidth: Boolean,
-    items: {
-      type: Array,
-      default: () => [],
-    },
-  },
-  computed: {
-    classObject() {
-      return 'w-full';
-    },
-    activeIndex() {
-      return this.items.findIndex(i => i.route === this.$route.name);
-    },
-  },
-  methods: {
-    isActive(item) {
-      return this.items.indexOf(item) === this.activeIndex;
-    },
-    isOver(item) {
-      return this.items.indexOf(item) < this.activeIndex;
-    },
-  },
-};
-</script>
 <style lang="scss" scoped>
 .wizard-box {
   .item {
diff --git a/app/javascript/dashboard/components/ui/WootButton.vue b/app/javascript/dashboard/components/ui/WootButton.vue
index 462a6fd3c..d42a7172b 100644
--- a/app/javascript/dashboard/components/ui/WootButton.vue
+++ b/app/javascript/dashboard/components/ui/WootButton.vue
@@ -1,32 +1,3 @@
-<template>
-  <button
-    class="button"
-    :type="type"
-    :class="buttonClasses"
-    :disabled="isDisabled || isLoading"
-    @click="handleClick"
-  >
-    <spinner
-      v-if="isLoading"
-      size="small"
-      :color-scheme="showDarkSpinner ? 'dark' : ''"
-    />
-    <emoji-or-icon
-      v-else-if="icon || emoji"
-      class="icon"
-      :emoji="emoji"
-      :icon="icon"
-      :icon-size="iconSize"
-    />
-    <span
-      v-if="$slots.default"
-      class="button__content"
-      :class="{ 'text-left rtl:text-right': size !== 'expanded' }"
-    >
-      <slot />
-    </span>
-  </button>
-</template>
 <script>
 import Spinner from 'shared/components/Spinner.vue';
 import EmojiOrIcon from 'shared/components/EmojiOrIcon.vue';
@@ -132,3 +103,32 @@ export default {
   },
 };
 </script>
+<template>
+  <button
+    class="button"
+    :type="type"
+    :class="buttonClasses"
+    :disabled="isDisabled || isLoading"
+    @click="handleClick"
+  >
+    <spinner
+      v-if="isLoading"
+      size="small"
+      :color-scheme="showDarkSpinner ? 'dark' : ''"
+    />
+    <emoji-or-icon
+      v-else-if="icon || emoji"
+      class="icon"
+      :emoji="emoji"
+      :icon="icon"
+      :icon-size="iconSize"
+    />
+    <span
+      v-if="$slots.default"
+      class="button__content"
+      :class="{ 'text-left rtl:text-right': size !== 'expanded' }"
+    >
+      <slot />
+    </span>
+  </button>
+</template>
diff --git a/app/javascript/dashboard/components/widgets/AIAssistanceButton.vue b/app/javascript/dashboard/components/widgets/AIAssistanceButton.vue
index 02e128688..996ff2910 100644
--- a/app/javascript/dashboard/components/widgets/AIAssistanceButton.vue
+++ b/app/javascript/dashboard/components/widgets/AIAssistanceButton.vue
@@ -1,38 +1,3 @@
-<template>
-  <div v-if="!isFetchingAppIntegrations">
-    <div v-if="isAIIntegrationEnabled" class="relative">
-      <AIAssistanceCTAButton
-        v-if="shouldShowAIAssistCTAButton"
-        @click="openAIAssist"
-      />
-      <woot-button
-        v-else
-        v-tooltip.top-end="$t('INTEGRATION_SETTINGS.OPEN_AI.AI_ASSIST')"
-        icon="wand"
-        color-scheme="secondary"
-        variant="smooth"
-        size="small"
-        @click="openAIAssist"
-      />
-      <woot-modal
-        :show.sync="showAIAssistanceModal"
-        :on-close="hideAIAssistanceModal"
-      >
-        <AIAssistanceModal
-          :ai-option="aiOption"
-          @apply-text="insertText"
-          @close="hideAIAssistanceModal"
-        />
-      </woot-modal>
-    </div>
-    <div v-else-if="shouldShowAIAssistCTAButtonForAdmin" class="relative">
-      <AIAssistanceCTAButton @click="openAICta" />
-      <woot-modal :show.sync="showAICtaModal" :on-close="hideAICtaModal">
-        <AICTAModal @close="hideAICtaModal" />
-      </woot-modal>
-    </div>
-  </div>
-</template>
 <script>
 import { mapGetters } from 'vuex';
 import { useAdmin } from 'dashboard/composables/useAdmin';
@@ -141,3 +106,38 @@ export default {
   },
 };
 </script>
+<template>
+  <div v-if="!isFetchingAppIntegrations">
+    <div v-if="isAIIntegrationEnabled" class="relative">
+      <AIAssistanceCTAButton
+        v-if="shouldShowAIAssistCTAButton"
+        @click="openAIAssist"
+      />
+      <woot-button
+        v-else
+        v-tooltip.top-end="$t('INTEGRATION_SETTINGS.OPEN_AI.AI_ASSIST')"
+        icon="wand"
+        color-scheme="secondary"
+        variant="smooth"
+        size="small"
+        @click="openAIAssist"
+      />
+      <woot-modal
+        :show.sync="showAIAssistanceModal"
+        :on-close="hideAIAssistanceModal"
+      >
+        <AIAssistanceModal
+          :ai-option="aiOption"
+          @apply-text="insertText"
+          @close="hideAIAssistanceModal"
+        />
+      </woot-modal>
+    </div>
+    <div v-else-if="shouldShowAIAssistCTAButtonForAdmin" class="relative">
+      <AIAssistanceCTAButton @click="openAICta" />
+      <woot-modal :show.sync="showAICtaModal" :on-close="hideAICtaModal">
+        <AICTAModal @close="hideAICtaModal" />
+      </woot-modal>
+    </div>
+  </div>
+</template>
diff --git a/app/javascript/dashboard/components/widgets/AIAssistanceCTAButton.vue b/app/javascript/dashboard/components/widgets/AIAssistanceCTAButton.vue
index 155311246..478b6ce5f 100644
--- a/app/javascript/dashboard/components/widgets/AIAssistanceCTAButton.vue
+++ b/app/javascript/dashboard/components/widgets/AIAssistanceCTAButton.vue
@@ -1,3 +1,12 @@
+<script>
+export default {
+  methods: {
+    onClick() {
+      this.$emit('click');
+    },
+  },
+};
+</script>
 <template>
   <div class="relative">
     <woot-button
@@ -19,15 +28,6 @@
     />
   </div>
 </template>
-<script>
-export default {
-  methods: {
-    onClick() {
-      this.$emit('click');
-    },
-  },
-};
-</script>
 <style scoped>
 @tailwind components;
 @layer components {
diff --git a/app/javascript/dashboard/components/widgets/AIAssistanceModal.vue b/app/javascript/dashboard/components/widgets/AIAssistanceModal.vue
index df30d461d..52feb2762 100644
--- a/app/javascript/dashboard/components/widgets/AIAssistanceModal.vue
+++ b/app/javascript/dashboard/components/widgets/AIAssistanceModal.vue
@@ -1,42 +1,3 @@
-<template>
-  <div class="flex flex-col">
-    <woot-modal-header :header-title="headerTitle" />
-    <form
-      class="modal-content flex flex-col w-full"
-      @submit.prevent="applyText"
-    >
-      <div v-if="draftMessage" class="w-full">
-        <h4 class="text-base mt-1 text-slate-700 dark:text-slate-100">
-          {{ $t('INTEGRATION_SETTINGS.OPEN_AI.ASSISTANCE_MODAL.DRAFT_TITLE') }}
-        </h4>
-        <p v-dompurify-html="formatMessage(draftMessage, false)" />
-        <h4 class="text-base mt-1 text-slate-700 dark:text-slate-100">
-          {{
-            $t('INTEGRATION_SETTINGS.OPEN_AI.ASSISTANCE_MODAL.GENERATED_TITLE')
-          }}
-        </h4>
-      </div>
-      <div>
-        <AILoader v-if="isGenerating" />
-        <p v-else v-dompurify-html="formatMessage(generatedContent, false)" />
-      </div>
-
-      <div class="flex flex-row justify-end gap-2 py-2 px-0 w-full">
-        <woot-button variant="clear" @click.prevent="onClose">
-          {{
-            $t('INTEGRATION_SETTINGS.OPEN_AI.ASSISTANCE_MODAL.BUTTONS.CANCEL')
-          }}
-        </woot-button>
-        <woot-button :disabled="!generatedContent">
-          {{
-            $t('INTEGRATION_SETTINGS.OPEN_AI.ASSISTANCE_MODAL.BUTTONS.APPLY')
-          }}
-        </woot-button>
-      </div>
-    </form>
-  </div>
-</template>
-
 <script>
 import { mapGetters } from 'vuex';
 import messageFormatterMixin from 'shared/mixins/messageFormatterMixin';
@@ -99,6 +60,45 @@ export default {
 };
 </script>
 
+<template>
+  <div class="flex flex-col">
+    <woot-modal-header :header-title="headerTitle" />
+    <form
+      class="modal-content flex flex-col w-full"
+      @submit.prevent="applyText"
+    >
+      <div v-if="draftMessage" class="w-full">
+        <h4 class="text-base mt-1 text-slate-700 dark:text-slate-100">
+          {{ $t('INTEGRATION_SETTINGS.OPEN_AI.ASSISTANCE_MODAL.DRAFT_TITLE') }}
+        </h4>
+        <p v-dompurify-html="formatMessage(draftMessage, false)" />
+        <h4 class="text-base mt-1 text-slate-700 dark:text-slate-100">
+          {{
+            $t('INTEGRATION_SETTINGS.OPEN_AI.ASSISTANCE_MODAL.GENERATED_TITLE')
+          }}
+        </h4>
+      </div>
+      <div>
+        <AILoader v-if="isGenerating" />
+        <p v-else v-dompurify-html="formatMessage(generatedContent, false)" />
+      </div>
+
+      <div class="flex flex-row justify-end gap-2 py-2 px-0 w-full">
+        <woot-button variant="clear" @click.prevent="onClose">
+          {{
+            $t('INTEGRATION_SETTINGS.OPEN_AI.ASSISTANCE_MODAL.BUTTONS.CANCEL')
+          }}
+        </woot-button>
+        <woot-button :disabled="!generatedContent">
+          {{
+            $t('INTEGRATION_SETTINGS.OPEN_AI.ASSISTANCE_MODAL.BUTTONS.APPLY')
+          }}
+        </woot-button>
+      </div>
+    </form>
+  </div>
+</template>
+
 <style lang="scss" scoped>
 .modal-content {
   @apply pt-2 px-8 pb-8;
diff --git a/app/javascript/dashboard/components/widgets/AICTAModal.vue b/app/javascript/dashboard/components/widgets/AICTAModal.vue
index eccc44f6c..f7fd8b51d 100644
--- a/app/javascript/dashboard/components/widgets/AICTAModal.vue
+++ b/app/javascript/dashboard/components/widgets/AICTAModal.vue
@@ -1,41 +1,3 @@
-<template>
-  <div class="flex-1 min-w-0 px-0">
-    <woot-modal-header
-      :header-title="$t('INTEGRATION_SETTINGS.OPEN_AI.CTA_MODAL.TITLE')"
-      :header-content="$t('INTEGRATION_SETTINGS.OPEN_AI.CTA_MODAL.DESC')"
-    />
-    <form
-      class="flex flex-col flex-wrap modal-content"
-      @submit.prevent="finishOpenAI"
-    >
-      <div class="w-full mt-2">
-        <woot-input
-          v-model="value"
-          type="text"
-          :class="{ error: v$.value.$error }"
-          :placeholder="
-            $t('INTEGRATION_SETTINGS.OPEN_AI.CTA_MODAL.KEY_PLACEHOLDER')
-          "
-          @blur="v$.value.$touch"
-        />
-      </div>
-      <div class="flex flex-row justify-between w-full gap-2 px-0 py-2">
-        <woot-button variant="link" @click.prevent="openOpenAIDoc">
-          {{ $t('INTEGRATION_SETTINGS.OPEN_AI.CTA_MODAL.BUTTONS.NEED_HELP') }}
-        </woot-button>
-        <div class="flex items-center gap-1">
-          <woot-button variant="clear" @click.prevent="onDismiss">
-            {{ $t('INTEGRATION_SETTINGS.OPEN_AI.CTA_MODAL.BUTTONS.DISMISS') }}
-          </woot-button>
-          <woot-button :is-disabled="v$.value.$invalid">
-            {{ $t('INTEGRATION_SETTINGS.OPEN_AI.CTA_MODAL.BUTTONS.FINISH') }}
-          </woot-button>
-        </div>
-      </div>
-    </form>
-  </div>
-</template>
-
 <script>
 import { useVuelidate } from '@vuelidate/core';
 import { required } from '@vuelidate/validators';
@@ -113,3 +75,41 @@ export default {
   },
 };
 </script>
+
+<template>
+  <div class="flex-1 min-w-0 px-0">
+    <woot-modal-header
+      :header-title="$t('INTEGRATION_SETTINGS.OPEN_AI.CTA_MODAL.TITLE')"
+      :header-content="$t('INTEGRATION_SETTINGS.OPEN_AI.CTA_MODAL.DESC')"
+    />
+    <form
+      class="flex flex-col flex-wrap modal-content"
+      @submit.prevent="finishOpenAI"
+    >
+      <div class="w-full mt-2">
+        <woot-input
+          v-model="value"
+          type="text"
+          :class="{ error: v$.value.$error }"
+          :placeholder="
+            $t('INTEGRATION_SETTINGS.OPEN_AI.CTA_MODAL.KEY_PLACEHOLDER')
+          "
+          @blur="v$.value.$touch"
+        />
+      </div>
+      <div class="flex flex-row justify-between w-full gap-2 px-0 py-2">
+        <woot-button variant="link" @click.prevent="openOpenAIDoc">
+          {{ $t('INTEGRATION_SETTINGS.OPEN_AI.CTA_MODAL.BUTTONS.NEED_HELP') }}
+        </woot-button>
+        <div class="flex items-center gap-1">
+          <woot-button variant="clear" @click.prevent="onDismiss">
+            {{ $t('INTEGRATION_SETTINGS.OPEN_AI.CTA_MODAL.BUTTONS.DISMISS') }}
+          </woot-button>
+          <woot-button :is-disabled="v$.value.$invalid">
+            {{ $t('INTEGRATION_SETTINGS.OPEN_AI.CTA_MODAL.BUTTONS.FINISH') }}
+          </woot-button>
+        </div>
+      </div>
+    </form>
+  </div>
+</template>
diff --git a/app/javascript/dashboard/components/widgets/AILoader.vue b/app/javascript/dashboard/components/widgets/AILoader.vue
index cc2879473..8554f7f85 100644
--- a/app/javascript/dashboard/components/widgets/AILoader.vue
+++ b/app/javascript/dashboard/components/widgets/AILoader.vue
@@ -1,3 +1,5 @@
+<script></script>
+
 <template>
   <div class="animation-container margin-top-1">
     <div class="ai-typing--wrap">
@@ -12,8 +14,6 @@
   </div>
 </template>
 
-<script></script>
-
 <style lang="scss" scoped>
 .animation-container {
   position: relative;
diff --git a/app/javascript/dashboard/components/widgets/AttachmentsPreview.vue b/app/javascript/dashboard/components/widgets/AttachmentsPreview.vue
index 32af9e499..2934c4637 100644
--- a/app/javascript/dashboard/components/widgets/AttachmentsPreview.vue
+++ b/app/javascript/dashboard/components/widgets/AttachmentsPreview.vue
@@ -1,43 +1,3 @@
-<template>
-  <div class="flex overflow-auto max-h-[12.5rem]">
-    <div
-      v-for="(attachment, index) in nonRecordedAudioAttachments"
-      :key="attachment.id"
-      class="preview-item flex items-center p-1 bg-slate-50 dark:bg-slate-800 gap-1 rounded-md w-[15rem] mb-1"
-    >
-      <div class="max-w-[4rem] flex-shrink-0 w-6 flex items-center">
-        <img
-          v-if="isTypeImage(attachment.resource)"
-          class="object-cover w-6 h-6 rounded-sm"
-          :src="attachment.thumb"
-        />
-        <span v-else class="relative w-6 h-6 text-lg text-left -top-px">
-          📄
-        </span>
-      </div>
-      <div class="max-w-3/5 min-w-[50%] overflow-hidden text-ellipsis">
-        <span
-          class="h-4 overflow-hidden text-sm font-medium text-ellipsis whitespace-nowrap"
-        >
-          {{ fileName(attachment.resource) }}
-        </span>
-      </div>
-      <div class="w-[30%] justify-center">
-        <span class="overflow-hidden text-xs text-ellipsis whitespace-nowrap">
-          {{ formatFileSize(attachment.resource) }}
-        </span>
-      </div>
-      <div class="flex items-center justify-center">
-        <woot-button
-          class="!w-6 !h-6 text-sm rounded-md hover:bg-slate-50 dark:hover:bg-slate-800 clear secondary"
-          icon="dismiss"
-          @click="onRemoveAttachment(index)"
-        />
-      </div>
-    </div>
-  </div>
-</template>
-
 <script setup>
 import { computed } from 'vue';
 import { formatBytes } from 'shared/helpers/FileHelper';
@@ -82,3 +42,43 @@ const fileName = file => {
   return file.filename || file.name;
 };
 </script>
+
+<template>
+  <div class="flex overflow-auto max-h-[12.5rem]">
+    <div
+      v-for="(attachment, index) in nonRecordedAudioAttachments"
+      :key="attachment.id"
+      class="preview-item flex items-center p-1 bg-slate-50 dark:bg-slate-800 gap-1 rounded-md w-[15rem] mb-1"
+    >
+      <div class="max-w-[4rem] flex-shrink-0 w-6 flex items-center">
+        <img
+          v-if="isTypeImage(attachment.resource)"
+          class="object-cover w-6 h-6 rounded-sm"
+          :src="attachment.thumb"
+        />
+        <span v-else class="relative w-6 h-6 text-lg text-left -top-px">
+          📄
+        </span>
+      </div>
+      <div class="max-w-3/5 min-w-[50%] overflow-hidden text-ellipsis">
+        <span
+          class="h-4 overflow-hidden text-sm font-medium text-ellipsis whitespace-nowrap"
+        >
+          {{ fileName(attachment.resource) }}
+        </span>
+      </div>
+      <div class="w-[30%] justify-center">
+        <span class="overflow-hidden text-xs text-ellipsis whitespace-nowrap">
+          {{ formatFileSize(attachment.resource) }}
+        </span>
+      </div>
+      <div class="flex items-center justify-center">
+        <woot-button
+          class="!w-6 !h-6 text-sm rounded-md hover:bg-slate-50 dark:hover:bg-slate-800 clear secondary"
+          icon="dismiss"
+          @click="onRemoveAttachment(index)"
+        />
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/app/javascript/dashboard/components/widgets/AutomationActionInput.vue b/app/javascript/dashboard/components/widgets/AutomationActionInput.vue
index b64484fe1..1e501ca6a 100644
--- a/app/javascript/dashboard/components/widgets/AutomationActionInput.vue
+++ b/app/javascript/dashboard/components/widgets/AutomationActionInput.vue
@@ -1,3 +1,97 @@
+<script>
+import AutomationActionTeamMessageInput from './AutomationActionTeamMessageInput.vue';
+import AutomationActionFileInput from './AutomationFileInput.vue';
+import WootMessageEditor from 'dashboard/components/widgets/WootWriter/Editor.vue';
+export default {
+  components: {
+    AutomationActionTeamMessageInput,
+    AutomationActionFileInput,
+    WootMessageEditor,
+  },
+  props: {
+    value: {
+      type: Object,
+      default: () => null,
+    },
+    actionTypes: {
+      type: Array,
+      default: () => [],
+    },
+    dropdownValues: {
+      type: Array,
+      default: () => [],
+    },
+    errorMessage: {
+      type: String,
+      default: '',
+    },
+    showActionInput: {
+      type: Boolean,
+      default: true,
+    },
+    initialFileName: {
+      type: String,
+      default: '',
+    },
+    isMacro: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  computed: {
+    action_name: {
+      get() {
+        if (!this.value) return null;
+        return this.value.action_name;
+      },
+      set(value) {
+        const payload = this.value || {};
+        this.$emit('input', { ...payload, action_name: value });
+      },
+    },
+    action_params: {
+      get() {
+        if (!this.value) return null;
+        return this.value.action_params;
+      },
+      set(value) {
+        const payload = this.value || {};
+        this.$emit('input', { ...payload, action_params: value });
+      },
+    },
+    inputType() {
+      return this.actionTypes.find(action => action.key === this.action_name)
+        .inputType;
+    },
+    actionInputStyles() {
+      return {
+        'has-error': this.errorMessage,
+        'is-a-macro': this.isMacro,
+      };
+    },
+    castMessageVmodel: {
+      get() {
+        if (Array.isArray(this.action_params)) {
+          return this.action_params[0];
+        }
+        return this.action_params;
+      },
+      set(value) {
+        this.action_params = value;
+      },
+    },
+  },
+  methods: {
+    removeAction() {
+      this.$emit('removeAction');
+    },
+    resetAction() {
+      this.$emit('resetAction');
+    },
+  },
+};
+</script>
+
 <template>
   <div class="filter" :class="actionInputStyles">
     <div class="filter-inputs">
@@ -102,100 +196,6 @@
   </div>
 </template>
 
-<script>
-import AutomationActionTeamMessageInput from './AutomationActionTeamMessageInput.vue';
-import AutomationActionFileInput from './AutomationFileInput.vue';
-import WootMessageEditor from 'dashboard/components/widgets/WootWriter/Editor.vue';
-export default {
-  components: {
-    AutomationActionTeamMessageInput,
-    AutomationActionFileInput,
-    WootMessageEditor,
-  },
-  props: {
-    value: {
-      type: Object,
-      default: () => null,
-    },
-    actionTypes: {
-      type: Array,
-      default: () => [],
-    },
-    dropdownValues: {
-      type: Array,
-      default: () => [],
-    },
-    errorMessage: {
-      type: String,
-      default: '',
-    },
-    showActionInput: {
-      type: Boolean,
-      default: true,
-    },
-    initialFileName: {
-      type: String,
-      default: '',
-    },
-    isMacro: {
-      type: Boolean,
-      default: false,
-    },
-  },
-  computed: {
-    action_name: {
-      get() {
-        if (!this.value) return null;
-        return this.value.action_name;
-      },
-      set(value) {
-        const payload = this.value || {};
-        this.$emit('input', { ...payload, action_name: value });
-      },
-    },
-    action_params: {
-      get() {
-        if (!this.value) return null;
-        return this.value.action_params;
-      },
-      set(value) {
-        const payload = this.value || {};
-        this.$emit('input', { ...payload, action_params: value });
-      },
-    },
-    inputType() {
-      return this.actionTypes.find(action => action.key === this.action_name)
-        .inputType;
-    },
-    actionInputStyles() {
-      return {
-        'has-error': this.errorMessage,
-        'is-a-macro': this.isMacro,
-      };
-    },
-    castMessageVmodel: {
-      get() {
-        if (Array.isArray(this.action_params)) {
-          return this.action_params[0];
-        }
-        return this.action_params;
-      },
-      set(value) {
-        this.action_params = value;
-      },
-    },
-  },
-  methods: {
-    removeAction() {
-      this.$emit('removeAction');
-    },
-    resetAction() {
-      this.$emit('resetAction');
-    },
-  },
-};
-</script>
-
 <style lang="scss" scoped>
 .filter {
   @apply bg-slate-50 dark:bg-slate-800 p-2 border border-solid border-slate-75 dark:border-slate-600 rounded-md mb-2;
diff --git a/app/javascript/dashboard/components/widgets/AutomationActionTeamMessageInput.vue b/app/javascript/dashboard/components/widgets/AutomationActionTeamMessageInput.vue
index 61eb74f22..10b592618 100644
--- a/app/javascript/dashboard/components/widgets/AutomationActionTeamMessageInput.vue
+++ b/app/javascript/dashboard/components/widgets/AutomationActionTeamMessageInput.vue
@@ -1,30 +1,3 @@
-<template>
-  <div>
-    <div class="multiselect-wrap--small">
-      <multiselect
-        v-model="selectedTeams"
-        track-by="id"
-        label="name"
-        :placeholder="$t('AUTOMATION.ACTION.TEAM_DROPDOWN_PLACEHOLDER')"
-        :multiple="true"
-        selected-label
-        :select-label="$t('FORMS.MULTISELECT.ENTER_TO_SELECT')"
-        deselect-label=""
-        :max-height="160"
-        :options="teams"
-        :allow-empty="false"
-        @input="updateValue"
-      />
-      <textarea
-        v-model="message"
-        rows="4"
-        :placeholder="$t('AUTOMATION.ACTION.TEAM_MESSAGE_INPUT_PLACEHOLDER')"
-        @input="updateValue"
-      />
-    </div>
-  </div>
-</template>
-
 <script>
 export default {
   // The value types are dynamic, hence prop validation removed to work with our action schema
@@ -52,6 +25,33 @@ export default {
 };
 </script>
 
+<template>
+  <div>
+    <div class="multiselect-wrap--small">
+      <multiselect
+        v-model="selectedTeams"
+        track-by="id"
+        label="name"
+        :placeholder="$t('AUTOMATION.ACTION.TEAM_DROPDOWN_PLACEHOLDER')"
+        :multiple="true"
+        selected-label
+        :select-label="$t('FORMS.MULTISELECT.ENTER_TO_SELECT')"
+        deselect-label=""
+        :max-height="160"
+        :options="teams"
+        :allow-empty="false"
+        @input="updateValue"
+      />
+      <textarea
+        v-model="message"
+        rows="4"
+        :placeholder="$t('AUTOMATION.ACTION.TEAM_MESSAGE_INPUT_PLACEHOLDER')"
+        @input="updateValue"
+      />
+    </div>
+  </div>
+</template>
+
 <style scoped>
 .multiselect {
   margin: var(--space-smaller) var(--space-zero);
diff --git a/app/javascript/dashboard/components/widgets/AutomationFileInput.vue b/app/javascript/dashboard/components/widgets/AutomationFileInput.vue
index ab02a76b3..5e46dbbf8 100644
--- a/app/javascript/dashboard/components/widgets/AutomationFileInput.vue
+++ b/app/javascript/dashboard/components/widgets/AutomationFileInput.vue
@@ -1,30 +1,3 @@
-<template>
-  <label class="input-wrapper" :class="uploadState">
-    <input
-      v-if="uploadState !== 'processing'"
-      type="file"
-      name="attachment"
-      :class="uploadState === 'processing' ? 'disabled' : ''"
-      @change="onChangeFile"
-    />
-    <spinner v-if="uploadState === 'processing'" />
-    <fluent-icon v-if="uploadState === 'idle'" icon="file-upload" />
-    <fluent-icon
-      v-if="uploadState === 'uploaded'"
-      icon="checkmark-circle"
-      type="outline"
-      class="success-icon"
-    />
-    <fluent-icon
-      v-if="uploadState === 'failed'"
-      icon="dismiss-circle"
-      type="outline"
-      class="error-icon"
-    />
-    <p class="file-button">{{ label }}</p>
-  </label>
-</template>
-
 <script>
 import { useAlert } from 'dashboard/composables';
 import Spinner from 'shared/components/Spinner.vue';
@@ -77,6 +50,33 @@ export default {
 };
 </script>
 
+<template>
+  <label class="input-wrapper" :class="uploadState">
+    <input
+      v-if="uploadState !== 'processing'"
+      type="file"
+      name="attachment"
+      :class="uploadState === 'processing' ? 'disabled' : ''"
+      @change="onChangeFile"
+    />
+    <spinner v-if="uploadState === 'processing'" />
+    <fluent-icon v-if="uploadState === 'idle'" icon="file-upload" />
+    <fluent-icon
+      v-if="uploadState === 'uploaded'"
+      icon="checkmark-circle"
+      type="outline"
+      class="success-icon"
+    />
+    <fluent-icon
+      v-if="uploadState === 'failed'"
+      icon="dismiss-circle"
+      type="outline"
+      class="error-icon"
+    />
+    <p class="file-button">{{ label }}</p>
+  </label>
+</template>
+
 <style scoped>
 input[type='file'] {
   @apply hidden;
diff --git a/app/javascript/dashboard/components/widgets/Avatar.vue b/app/javascript/dashboard/components/widgets/Avatar.vue
index 1fad70eef..2c7ad01c0 100644
--- a/app/javascript/dashboard/components/widgets/Avatar.vue
+++ b/app/javascript/dashboard/components/widgets/Avatar.vue
@@ -1,9 +1,3 @@
-<template>
-  <div class="avatar-container" :style="style" aria-hidden="true">
-    <slot>{{ userInitial }}</slot>
-  </div>
-</template>
-
 <script>
 export default {
   name: 'Avatar',
@@ -38,6 +32,12 @@ export default {
 };
 </script>
 
+<template>
+  <div class="avatar-container" :style="style" aria-hidden="true">
+    <slot>{{ userInitial }}</slot>
+  </div>
+</template>
+
 <style scoped>
 @tailwind components;
 @layer components {
diff --git a/app/javascript/dashboard/components/widgets/BackButton.vue b/app/javascript/dashboard/components/widgets/BackButton.vue
index 2528aada7..2b135eb33 100644
--- a/app/javascript/dashboard/components/widgets/BackButton.vue
+++ b/app/javascript/dashboard/components/widgets/BackButton.vue
@@ -1,12 +1,3 @@
-<template>
-  <button
-    class="header-section flex items-center text-base font-normal mr-4 ml-2 p-0 cursor-pointer text-woot-500 dark:text-woot-500"
-    @click.capture="goBack"
-  >
-    <fluent-icon icon="chevron-left" />
-    {{ buttonLabel || $t('GENERAL_SETTINGS.BACK') }}
-  </button>
-</template>
 <script>
 import router from '../../routes/index';
 
@@ -32,3 +23,12 @@ export default {
   },
 };
 </script>
+<template>
+  <button
+    class="header-section flex items-center text-base font-normal mr-4 ml-2 p-0 cursor-pointer text-woot-500 dark:text-woot-500"
+    @click.capture="goBack"
+  >
+    <fluent-icon icon="chevron-left" />
+    {{ buttonLabel || $t('GENERAL_SETTINGS.BACK') }}
+  </button>
+</template>
diff --git a/app/javascript/dashboard/components/widgets/ChannelItem.vue b/app/javascript/dashboard/components/widgets/ChannelItem.vue
index fe47f3b96..c36a28ffe 100644
--- a/app/javascript/dashboard/components/widgets/ChannelItem.vue
+++ b/app/javascript/dashboard/components/widgets/ChannelItem.vue
@@ -1,11 +1,3 @@
-<template>
-  <channel-selector
-    :class="{ inactive: !isActive }"
-    :title="channel.name"
-    :src="getChannelThumbnail()"
-    @click="onItemClick"
-  />
-</template>
 <script>
 import ChannelSelector from '../ChannelSelector.vue';
 export default {
@@ -65,3 +57,11 @@ export default {
   },
 };
 </script>
+<template>
+  <channel-selector
+    :class="{ inactive: !isActive }"
+    :title="channel.name"
+    :src="getChannelThumbnail()"
+    @click="onItemClick"
+  />
+</template>
diff --git a/app/javascript/dashboard/components/widgets/ChatTypeTabs.vue b/app/javascript/dashboard/components/widgets/ChatTypeTabs.vue
index 86e80748d..70e3144cc 100644
--- a/app/javascript/dashboard/components/widgets/ChatTypeTabs.vue
+++ b/app/javascript/dashboard/components/widgets/ChatTypeTabs.vue
@@ -1,13 +1,3 @@
-<template>
-  <woot-tabs :index="activeTabIndex" @change="onTabChange">
-    <woot-tabs-item
-      v-for="item in items"
-      :key="item.key"
-      :name="item.name"
-      :count="item.count"
-    />
-  </woot-tabs>
-</template>
 <script>
 import wootConstants from 'dashboard/constants/globals';
 import keyboardEventListenerMixins from 'shared/mixins/keyboardEventListenerMixins';
@@ -51,3 +41,13 @@ export default {
   },
 };
 </script>
+<template>
+  <woot-tabs :index="activeTabIndex" @change="onTabChange">
+    <woot-tabs-item
+      v-for="item in items"
+      :key="item.key"
+      :name="item.name"
+      :count="item.count"
+    />
+  </woot-tabs>
+</template>
diff --git a/app/javascript/dashboard/components/widgets/ColorPicker.vue b/app/javascript/dashboard/components/widgets/ColorPicker.vue
index 12b9124cf..192f484ff 100644
--- a/app/javascript/dashboard/components/widgets/ColorPicker.vue
+++ b/app/javascript/dashboard/components/widgets/ColorPicker.vue
@@ -1,21 +1,3 @@
-<template>
-  <div class="colorpicker">
-    <div
-      class="colorpicker--selected"
-      :style="`background-color: ${value}`"
-      @click.prevent="toggleColorPicker"
-    />
-    <chrome
-      v-if="isPickerOpen"
-      v-on-clickaway="closeTogglePicker"
-      :disable-alpha="true"
-      :value="value"
-      class="colorpicker--chrome"
-      @input="updateColor"
-    />
-  </div>
-</template>
-
 <script>
 import { Chrome } from 'vue-color';
 
@@ -50,6 +32,24 @@ export default {
 };
 </script>
 
+<template>
+  <div class="colorpicker">
+    <div
+      class="colorpicker--selected"
+      :style="`background-color: ${value}`"
+      @click.prevent="toggleColorPicker"
+    />
+    <chrome
+      v-if="isPickerOpen"
+      v-on-clickaway="closeTogglePicker"
+      :disable-alpha="true"
+      :value="value"
+      class="colorpicker--chrome"
+      @input="updateColor"
+    />
+  </div>
+</template>
+
 <style scoped lang="scss">
 @import '~dashboard/assets/scss/variables';
 @import '~dashboard/assets/scss/mixins';
diff --git a/app/javascript/dashboard/components/widgets/DashboardApp/Frame.vue b/app/javascript/dashboard/components/widgets/DashboardApp/Frame.vue
index a13c3510a..55b2ec857 100644
--- a/app/javascript/dashboard/components/widgets/DashboardApp/Frame.vue
+++ b/app/javascript/dashboard/components/widgets/DashboardApp/Frame.vue
@@ -1,25 +1,3 @@
-<template>
-  <div v-if="hasOpenedAtleastOnce" class="dashboard-app--container">
-    <div
-      v-for="(configItem, index) in config"
-      :key="index"
-      class="dashboard-app--list"
-    >
-      <loading-state
-        v-if="iframeLoading"
-        :message="$t('DASHBOARD_APPS.LOADING_MESSAGE')"
-        class="dashboard-app_loading-container"
-      />
-      <iframe
-        v-if="configItem.type === 'frame' && configItem.url"
-        :id="getFrameId(index)"
-        :src="configItem.url"
-        @load="() => onIframeLoad(index)"
-      />
-    </div>
-  </div>
-</template>
-
 <script>
 import LoadingState from 'dashboard/components/widgets/LoadingState.vue';
 export default {
@@ -102,6 +80,28 @@ export default {
 };
 </script>
 
+<template>
+  <div v-if="hasOpenedAtleastOnce" class="dashboard-app--container">
+    <div
+      v-for="(configItem, index) in config"
+      :key="index"
+      class="dashboard-app--list"
+    >
+      <loading-state
+        v-if="iframeLoading"
+        :message="$t('DASHBOARD_APPS.LOADING_MESSAGE')"
+        class="dashboard-app_loading-container"
+      />
+      <iframe
+        v-if="configItem.type === 'frame' && configItem.url"
+        :id="getFrameId(index)"
+        :src="configItem.url"
+        @load="() => onIframeLoad(index)"
+      />
+    </div>
+  </div>
+</template>
+
 <style scoped>
 .dashboard-app--container,
 .dashboard-app--list,
diff --git a/app/javascript/dashboard/components/widgets/EmptyState.vue b/app/javascript/dashboard/components/widgets/EmptyState.vue
index fe7b03942..6e2101917 100644
--- a/app/javascript/dashboard/components/widgets/EmptyState.vue
+++ b/app/javascript/dashboard/components/widgets/EmptyState.vue
@@ -1,3 +1,12 @@
+<script>
+export default {
+  props: {
+    title: { type: String, default: '' },
+    message: { type: String, default: '' },
+  },
+};
+</script>
+
 <template>
   <div class="empty-state py-16 px-1 ml-0 mr-0">
     <h3
@@ -15,12 +24,3 @@
     <slot />
   </div>
 </template>
-
-<script>
-export default {
-  props: {
-    title: { type: String, default: '' },
-    message: { type: String, default: '' },
-  },
-};
-</script>
diff --git a/app/javascript/dashboard/components/widgets/FeatureToggle.vue b/app/javascript/dashboard/components/widgets/FeatureToggle.vue
index ec7759a9c..9851f01e4 100644
--- a/app/javascript/dashboard/components/widgets/FeatureToggle.vue
+++ b/app/javascript/dashboard/components/widgets/FeatureToggle.vue
@@ -1,8 +1,3 @@
-<template>
-  <div v-if="isFeatureEnabled">
-    <slot />
-  </div>
-</template>
 <script>
 import { mapGetters } from 'vuex';
 export default {
@@ -23,3 +18,8 @@ export default {
   },
 };
 </script>
+<template>
+  <div v-if="isFeatureEnabled">
+    <slot />
+  </div>
+</template>
diff --git a/app/javascript/dashboard/components/widgets/FilterInput/Index.vue b/app/javascript/dashboard/components/widgets/FilterInput/Index.vue
index 5bf1df37b..412cbb4ae 100644
--- a/app/javascript/dashboard/components/widgets/FilterInput/Index.vue
+++ b/app/javascript/dashboard/components/widgets/FilterInput/Index.vue
@@ -1,147 +1,3 @@
-<!-- eslint-disable vue/no-mutating-props -->
-<template>
-  <div>
-    <div
-      class="rounded-md p-2 border border-solid"
-      :class="getInputErrorClass(errorMessage)"
-    >
-      <div class="flex">
-        <select
-          v-if="groupedFilters"
-          v-model="attributeKey"
-          class="bg-white max-w-[30%] dark:bg-slate-900 mb-0 mr-1 text-slate-800 dark:text-slate-100 border-slate-75 dark:border-slate-600"
-          @change="resetFilter()"
-        >
-          <optgroup
-            v-for="(group, i) in filterGroups"
-            :key="i"
-            :label="group.name"
-          >
-            <option
-              v-for="attribute in group.attributes"
-              :key="attribute.key"
-              :value="attribute.key"
-            >
-              {{ attribute.name }}
-            </option>
-          </optgroup>
-        </select>
-        <select
-          v-else
-          v-model="attributeKey"
-          class="bg-white max-w-[30%] dark:bg-slate-900 mb-0 mr-1 text-slate-800 dark:text-slate-100 border-slate-75 dark:border-slate-600"
-          @change="resetFilter()"
-        >
-          <option
-            v-for="attribute in filterAttributes"
-            :key="attribute.key"
-            :value="attribute.key"
-            :disabled="attribute.disabled"
-          >
-            {{ attribute.name }}
-          </option>
-        </select>
-
-        <select
-          v-model="filterOperator"
-          class="bg-white dark:bg-slate-900 max-w-[20%] mb-0 mr-1 text-slate-800 dark:text-slate-100 border-slate-75 dark:border-slate-600"
-        >
-          <option
-            v-for="(operator, o) in operators"
-            :key="o"
-            :value="operator.value"
-          >
-            {{ $t(`FILTER.OPERATOR_LABELS.${operator.value}`) }}
-          </option>
-        </select>
-
-        <div v-if="showUserInput" class="filter__answer--wrap mr-1 flex-grow">
-          <div
-            v-if="inputType === 'multi_select'"
-            class="multiselect-wrap--small"
-          >
-            <multiselect
-              v-model="values"
-              track-by="id"
-              label="name"
-              :placeholder="'Select'"
-              :multiple="true"
-              selected-label
-              :select-label="$t('FORMS.MULTISELECT.ENTER_TO_SELECT')"
-              deselect-label=""
-              :max-height="160"
-              :options="dropdownValues"
-              :allow-empty="false"
-            />
-          </div>
-          <div
-            v-else-if="inputType === 'search_select'"
-            class="multiselect-wrap--small"
-          >
-            <multiselect
-              v-model="values"
-              track-by="id"
-              label="name"
-              :placeholder="'Select'"
-              selected-label
-              :select-label="$t('FORMS.MULTISELECT.ENTER_TO_SELECT')"
-              deselect-label=""
-              :max-height="160"
-              :options="dropdownValues"
-              :allow-empty="false"
-              :option-height="104"
-            />
-          </div>
-          <div v-else-if="inputType === 'date'" class="multiselect-wrap--small">
-            <input
-              v-model="values"
-              type="date"
-              :editable="false"
-              class="mb-0 datepicker"
-            />
-          </div>
-          <input
-            v-else
-            v-model="values"
-            type="text"
-            class="mb-0"
-            placeholder="Enter value"
-          />
-        </div>
-        <woot-button
-          icon="dismiss"
-          variant="clear"
-          color-scheme="secondary"
-          @click="removeFilter"
-        />
-      </div>
-      <p v-if="errorMessage" class="filter-error">
-        {{ errorMessage }}
-      </p>
-    </div>
-
-    <div
-      v-if="showQueryOperator"
-      class="flex items-center justify-center relative my-2.5 mx-0"
-    >
-      <hr
-        class="w-full absolute border-b border-solid border-slate-75 dark:border-slate-800"
-      />
-      <select
-        v-model="query_operator"
-        class="bg-white dark:bg-slate-900 mb-0 w-auto relative text-slate-800 dark:text-slate-100 border-slate-75 dark:border-slate-600"
-      >
-        <option value="and">
-          {{ $t('FILTER.QUERY_DROPDOWN_LABELS.AND') }}
-        </option>
-        <option value="or">
-          {{ $t('FILTER.QUERY_DROPDOWN_LABELS.OR') }}
-        </option>
-      </select>
-    </div>
-  </div>
-</template>
-
 <script>
 export default {
   props: {
@@ -279,6 +135,150 @@ export default {
   },
 };
 </script>
+
+<!-- eslint-disable vue/no-mutating-props -->
+<template>
+  <div>
+    <div
+      class="p-2 border border-solid rounded-md"
+      :class="getInputErrorClass(errorMessage)"
+    >
+      <div class="flex">
+        <select
+          v-if="groupedFilters"
+          v-model="attributeKey"
+          class="bg-white max-w-[30%] dark:bg-slate-900 mb-0 mr-1 text-slate-800 dark:text-slate-100 border-slate-75 dark:border-slate-600"
+          @change="resetFilter()"
+        >
+          <optgroup
+            v-for="(group, i) in filterGroups"
+            :key="i"
+            :label="group.name"
+          >
+            <option
+              v-for="attribute in group.attributes"
+              :key="attribute.key"
+              :value="attribute.key"
+            >
+              {{ attribute.name }}
+            </option>
+          </optgroup>
+        </select>
+        <select
+          v-else
+          v-model="attributeKey"
+          class="bg-white max-w-[30%] dark:bg-slate-900 mb-0 mr-1 text-slate-800 dark:text-slate-100 border-slate-75 dark:border-slate-600"
+          @change="resetFilter()"
+        >
+          <option
+            v-for="attribute in filterAttributes"
+            :key="attribute.key"
+            :value="attribute.key"
+            :disabled="attribute.disabled"
+          >
+            {{ attribute.name }}
+          </option>
+        </select>
+
+        <select
+          v-model="filterOperator"
+          class="bg-white dark:bg-slate-900 max-w-[20%] mb-0 mr-1 text-slate-800 dark:text-slate-100 border-slate-75 dark:border-slate-600"
+        >
+          <option
+            v-for="(operator, o) in operators"
+            :key="o"
+            :value="operator.value"
+          >
+            {{ $t(`FILTER.OPERATOR_LABELS.${operator.value}`) }}
+          </option>
+        </select>
+
+        <div v-if="showUserInput" class="flex-grow mr-1 filter__answer--wrap">
+          <div
+            v-if="inputType === 'multi_select'"
+            class="multiselect-wrap--small"
+          >
+            <multiselect
+              v-model="values"
+              track-by="id"
+              label="name"
+              :placeholder="'Select'"
+              :multiple="true"
+              selected-label
+              :select-label="$t('FORMS.MULTISELECT.ENTER_TO_SELECT')"
+              deselect-label=""
+              :max-height="160"
+              :options="dropdownValues"
+              :allow-empty="false"
+            />
+          </div>
+          <div
+            v-else-if="inputType === 'search_select'"
+            class="multiselect-wrap--small"
+          >
+            <multiselect
+              v-model="values"
+              track-by="id"
+              label="name"
+              :placeholder="'Select'"
+              selected-label
+              :select-label="$t('FORMS.MULTISELECT.ENTER_TO_SELECT')"
+              deselect-label=""
+              :max-height="160"
+              :options="dropdownValues"
+              :allow-empty="false"
+              :option-height="104"
+            />
+          </div>
+          <div v-else-if="inputType === 'date'" class="multiselect-wrap--small">
+            <input
+              v-model="values"
+              type="date"
+              :editable="false"
+              class="mb-0 datepicker"
+            />
+          </div>
+          <input
+            v-else
+            v-model="values"
+            type="text"
+            class="mb-0"
+            placeholder="Enter value"
+          />
+        </div>
+        <woot-button
+          icon="dismiss"
+          variant="clear"
+          color-scheme="secondary"
+          @click="removeFilter"
+        />
+      </div>
+      <p v-if="errorMessage" class="filter-error">
+        {{ errorMessage }}
+      </p>
+    </div>
+
+    <div
+      v-if="showQueryOperator"
+      class="flex items-center justify-center relative my-2.5 mx-0"
+    >
+      <hr
+        class="absolute w-full border-b border-solid border-slate-75 dark:border-slate-800"
+      />
+      <select
+        v-model="query_operator"
+        class="relative w-auto mb-0 bg-white dark:bg-slate-900 text-slate-800 dark:text-slate-100 border-slate-75 dark:border-slate-600"
+      >
+        <option value="and">
+          {{ $t('FILTER.QUERY_DROPDOWN_LABELS.AND') }}
+        </option>
+        <option value="or">
+          {{ $t('FILTER.QUERY_DROPDOWN_LABELS.OR') }}
+        </option>
+      </select>
+    </div>
+  </div>
+</template>
 <style lang="scss" scoped>
 .filter__answer--wrap {
   input {
diff --git a/app/javascript/dashboard/components/widgets/InboxDropdownItem.vue b/app/javascript/dashboard/components/widgets/InboxDropdownItem.vue
index 6d5efdf90..e2a9a9d46 100644
--- a/app/javascript/dashboard/components/widgets/InboxDropdownItem.vue
+++ b/app/javascript/dashboard/components/widgets/InboxDropdownItem.vue
@@ -1,28 +1,3 @@
-<template>
-  <div class="flex items-center h-[2.375rem] min-w-0 py-0 px-1">
-    <span
-      class="inline-flex rounded mr-1 rtl:ml-1 rtl:mr-0 bg-slate-25 dark:bg-slate-700 p-0.5 items-center flex-shrink-0 justify-center w-6 h-6"
-    >
-      <fluent-icon
-        :icon="computedInboxIcon"
-        size="14"
-        class="text-slate-800 dark:text-slate-200"
-      />
-    </span>
-    <div class="flex flex-col w-full min-w-0 ml-1 mr-1">
-      <h5 class="option__title">
-        {{ name }}
-      </h5>
-      <p
-        class="option__body overflow-hidden whitespace-nowrap text-ellipsis"
-        :title="inboxIdentifier"
-      >
-        {{ inboxIdentifier || computedInboxType }}
-      </p>
-    </div>
-  </div>
-</template>
-
 <script>
 import {
   getInboxClassByType,
@@ -66,6 +41,31 @@ export default {
 };
 </script>
 
+<template>
+  <div class="flex items-center h-[2.375rem] min-w-0 py-0 px-1">
+    <span
+      class="inline-flex rounded mr-1 rtl:ml-1 rtl:mr-0 bg-slate-25 dark:bg-slate-700 p-0.5 items-center flex-shrink-0 justify-center w-6 h-6"
+    >
+      <fluent-icon
+        :icon="computedInboxIcon"
+        size="14"
+        class="text-slate-800 dark:text-slate-200"
+      />
+    </span>
+    <div class="flex flex-col w-full min-w-0 ml-1 mr-1">
+      <h5 class="option__title">
+        {{ name }}
+      </h5>
+      <p
+        class="option__body overflow-hidden whitespace-nowrap text-ellipsis"
+        :title="inboxIdentifier"
+      >
+        {{ inboxIdentifier || computedInboxType }}
+      </p>
+    </div>
+  </div>
+</template>
+
 <style lang="scss" scoped>
 .option__body {
   @apply inline-block text-slate-600 dark:text-slate-200 leading-[1.3] min-w-0 m-0;
diff --git a/app/javascript/dashboard/components/widgets/InboxName.vue b/app/javascript/dashboard/components/widgets/InboxName.vue
index 8b604b323..9dd0632e8 100644
--- a/app/javascript/dashboard/components/widgets/InboxName.vue
+++ b/app/javascript/dashboard/components/widgets/InboxName.vue
@@ -1,15 +1,3 @@
-<template>
-  <div
-    class="inbox--name inline-flex items-center py-0.5 px-0 leading-3 whitespace-nowrap font-medium bg-none text-slate-600 dark:text-slate-500 text-xs my-0 mx-2.5"
-  >
-    <fluent-icon
-      class="mr-0.5 rtl:ml-0.5 rtl:mr-0"
-      :icon="computedInboxClass"
-      size="12"
-    />
-    {{ inbox.name }}
-  </div>
-</template>
 <script>
 import { getInboxClassByType } from 'dashboard/helper/inbox';
 
@@ -29,3 +17,15 @@ export default {
   },
 };
 </script>
+<template>
+  <div
+    class="inbox--name inline-flex items-center py-0.5 px-0 leading-3 whitespace-nowrap font-medium bg-none text-slate-600 dark:text-slate-500 text-xs my-0 mx-2.5"
+  >
+    <fluent-icon
+      class="mr-0.5 rtl:ml-0.5 rtl:mr-0"
+      :icon="computedInboxClass"
+      size="12"
+    />
+    {{ inbox.name }}
+  </div>
+</template>
diff --git a/app/javascript/dashboard/components/widgets/LabelSelector.vue b/app/javascript/dashboard/components/widgets/LabelSelector.vue
index b5d02b841..5d11f14b1 100644
--- a/app/javascript/dashboard/components/widgets/LabelSelector.vue
+++ b/app/javascript/dashboard/components/widgets/LabelSelector.vue
@@ -1,34 +1,3 @@
-<template>
-  <div v-on-clickaway="closeDropdownLabel" class="label-wrap">
-    <add-label @add="toggleLabels" />
-    <woot-label
-      v-for="label in savedLabels"
-      :key="label.id"
-      :title="label.title"
-      :description="label.description"
-      :show-close="true"
-      :color="label.color"
-      variant="smooth"
-      @click="removeItem"
-    />
-    <div class="dropdown-wrap">
-      <div
-        :class="{ 'dropdown-pane--open': showSearchDropdownLabel }"
-        class="dropdown-pane"
-      >
-        <label-dropdown
-          v-if="showSearchDropdownLabel"
-          :account-labels="allLabels"
-          :selected-labels="selectedLabels"
-          :allow-creation="isAdmin"
-          @add="addItem"
-          @remove="removeItem"
-        />
-      </div>
-    </div>
-  </div>
-</template>
-
 <script>
 import AddLabel from 'shared/components/ui/dropdown/AddLabel.vue';
 import keyboardEventListenerMixins from 'shared/mixins/keyboardEventListenerMixins';
@@ -107,6 +76,37 @@ export default {
 };
 </script>
 
+<template>
+  <div v-on-clickaway="closeDropdownLabel" class="label-wrap">
+    <add-label @add="toggleLabels" />
+    <woot-label
+      v-for="label in savedLabels"
+      :key="label.id"
+      :title="label.title"
+      :description="label.description"
+      :show-close="true"
+      :color="label.color"
+      variant="smooth"
+      @click="removeItem"
+    />
+    <div class="dropdown-wrap">
+      <div
+        :class="{ 'dropdown-pane--open': showSearchDropdownLabel }"
+        class="dropdown-pane"
+      >
+        <label-dropdown
+          v-if="showSearchDropdownLabel"
+          :account-labels="allLabels"
+          :selected-labels="selectedLabels"
+          :allow-creation="isAdmin"
+          @add="addItem"
+          @remove="removeItem"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+
 <style lang="scss" scoped>
 .title-icon {
   margin-right: var(--space-smaller);
diff --git a/app/javascript/dashboard/components/widgets/LoadingState.vue b/app/javascript/dashboard/components/widgets/LoadingState.vue
index 76aaef3eb..a79a88236 100644
--- a/app/javascript/dashboard/components/widgets/LoadingState.vue
+++ b/app/javascript/dashboard/components/widgets/LoadingState.vue
@@ -1,3 +1,10 @@
+<script>
+export default {
+  props: {
+    message: { type: String, default: '' },
+  },
+};
+</script>
 <template>
   <div class="flex items-center justify-center p-8">
     <h6
@@ -10,10 +17,3 @@
     </h6>
   </div>
 </template>
-<script>
-export default {
-  props: {
-    message: { type: String, default: '' },
-  },
-};
-</script>
diff --git a/app/javascript/dashboard/components/widgets/SettingIntroBanner.vue b/app/javascript/dashboard/components/widgets/SettingIntroBanner.vue
index 9f99d5ba2..c2e6c48c3 100644
--- a/app/javascript/dashboard/components/widgets/SettingIntroBanner.vue
+++ b/app/javascript/dashboard/components/widgets/SettingIntroBanner.vue
@@ -1,3 +1,18 @@
+<script>
+export default {
+  props: {
+    headerTitle: {
+      type: String,
+      default: '',
+    },
+    headerContent: {
+      type: String,
+      default: '',
+    },
+  },
+};
+</script>
+
 <template>
   <div
     class="bg-slate-25 dark:bg-slate-900 pt-4 pb-0 px-8 border-b border-solid border-slate-50 dark:border-slate-800/50"
@@ -14,18 +29,3 @@
     <slot />
   </div>
 </template>
-
-<script>
-export default {
-  props: {
-    headerTitle: {
-      type: String,
-      default: '',
-    },
-    headerContent: {
-      type: String,
-      default: '',
-    },
-  },
-};
-</script>
diff --git a/app/javascript/dashboard/components/widgets/ShowMore.vue b/app/javascript/dashboard/components/widgets/ShowMore.vue
index 980889122..77c0b71b8 100644
--- a/app/javascript/dashboard/components/widgets/ShowMore.vue
+++ b/app/javascript/dashboard/components/widgets/ShowMore.vue
@@ -1,15 +1,3 @@
-<template>
-  <span>
-    {{ textToBeDisplayed }}
-    <button
-      v-if="text.length > limit"
-      class="show-more--button"
-      @click="toggleShowMore"
-    >
-      {{ buttonLabel }}
-    </button>
-  </span>
-</template>
 <script>
 export default {
   props: {
@@ -47,6 +35,18 @@ export default {
   },
 };
 </script>
+<template>
+  <span>
+    {{ textToBeDisplayed }}
+    <button
+      v-if="text.length > limit"
+      class="show-more--button"
+      @click="toggleShowMore"
+    >
+      {{ buttonLabel }}
+    </button>
+  </span>
+</template>
 <style scoped>
 .show-more--button {
   color: var(--w-500);
diff --git a/app/javascript/dashboard/components/widgets/TableFooter.vue b/app/javascript/dashboard/components/widgets/TableFooter.vue
index b3a671771..025d39ec8 100644
--- a/app/javascript/dashboard/components/widgets/TableFooter.vue
+++ b/app/javascript/dashboard/components/widgets/TableFooter.vue
@@ -1,24 +1,3 @@
-<template>
-  <footer
-    v-if="isFooterVisible"
-    class="h-12 flex items-center justify-between px-6"
-  >
-    <table-footer-results
-      :first-index="firstIndex"
-      :last-index="lastIndex"
-      :total-count="totalCount"
-    />
-    <table-footer-pagination
-      v-if="totalCount"
-      :current-page="currentPage"
-      :total-pages="totalPages"
-      :total-count="totalCount"
-      :page-size="pageSize"
-      @page-change="$emit('page-change', $event)"
-    />
-  </footer>
-</template>
-
 <script setup>
 import { computed } from 'vue';
 import TableFooterResults from './TableFooterResults.vue';
@@ -46,3 +25,24 @@ const isFooterVisible = computed(
   () => props.totalCount && !(firstIndex.value > props.totalCount)
 );
 </script>
+
+<template>
+  <footer
+    v-if="isFooterVisible"
+    class="h-12 flex items-center justify-between px-6"
+  >
+    <table-footer-results
+      :first-index="firstIndex"
+      :last-index="lastIndex"
+      :total-count="totalCount"
+    />
+    <table-footer-pagination
+      v-if="totalCount"
+      :current-page="currentPage"
+      :total-pages="totalPages"
+      :total-count="totalCount"
+      :page-size="pageSize"
+      @page-change="$emit('page-change', $event)"
+    />
+  </footer>
+</template>
diff --git a/app/javascript/dashboard/components/widgets/TableFooterPagination.vue b/app/javascript/dashboard/components/widgets/TableFooterPagination.vue
index 38ebdc69c..5ba969107 100644
--- a/app/javascript/dashboard/components/widgets/TableFooterPagination.vue
+++ b/app/javascript/dashboard/components/widgets/TableFooterPagination.vue
@@ -1,3 +1,64 @@
+<script setup>
+import { computed } from 'vue';
+
+// Props
+const props = defineProps({
+  currentPage: {
+    type: Number,
+    default: 1,
+  },
+  totalCount: {
+    type: Number,
+    default: 0,
+  },
+  totalPages: {
+    type: Number,
+    default: 0,
+  },
+});
+
+const hasLastPage = computed(
+  () => props.currentPage === props.totalPages || props.totalPages === 1
+);
+const hasFirstPage = computed(() => props.currentPage === 1);
+const hasNextPage = computed(() => props.currentPage === props.totalPages);
+const hasPrevPage = computed(() => props.currentPage === 1);
+
+const emit = defineEmits(['page-change']);
+
+function buttonClass(hasPage) {
+  if (hasPage) {
+    return 'hover:!bg-slate-50 dark:hover:!bg-slate-800';
+  }
+  return 'dark:hover:!bg-slate-700/50';
+}
+
+function onPageChange(newPage) {
+  emit('page-change', newPage);
+}
+
+const onNextPage = () => {
+  if (!onNextPage.value) {
+    onPageChange(props.currentPage + 1);
+  }
+};
+const onPrevPage = () => {
+  if (!hasPrevPage.value) {
+    onPageChange(props.currentPage - 1);
+  }
+};
+const onFirstPage = () => {
+  if (!hasFirstPage.value) {
+    onPageChange(1);
+  }
+};
+const onLastPage = () => {
+  if (!hasLastPage.value) {
+    onPageChange(props.totalPages);
+  }
+};
+</script>
+
 <template>
   <div class="flex items-center bg-slate-50 dark:bg-slate-800 h-8 rounded-lg">
     <woot-button
@@ -80,64 +141,3 @@
     </woot-button>
   </div>
 </template>
-
-<script setup>
-import { computed } from 'vue';
-
-// Props
-const props = defineProps({
-  currentPage: {
-    type: Number,
-    default: 1,
-  },
-  totalCount: {
-    type: Number,
-    default: 0,
-  },
-  totalPages: {
-    type: Number,
-    default: 0,
-  },
-});
-
-const hasLastPage = computed(
-  () => props.currentPage === props.totalPages || props.totalPages === 1
-);
-const hasFirstPage = computed(() => props.currentPage === 1);
-const hasNextPage = computed(() => props.currentPage === props.totalPages);
-const hasPrevPage = computed(() => props.currentPage === 1);
-
-const emit = defineEmits(['page-change']);
-
-function buttonClass(hasPage) {
-  if (hasPage) {
-    return 'hover:!bg-slate-50 dark:hover:!bg-slate-800';
-  }
-  return 'dark:hover:!bg-slate-700/50';
-}
-
-function onPageChange(newPage) {
-  emit('page-change', newPage);
-}
-
-const onNextPage = () => {
-  if (!onNextPage.value) {
-    onPageChange(props.currentPage + 1);
-  }
-};
-const onPrevPage = () => {
-  if (!hasPrevPage.value) {
-    onPageChange(props.currentPage - 1);
-  }
-};
-const onFirstPage = () => {
-  if (!hasFirstPage.value) {
-    onPageChange(1);
-  }
-};
-const onLastPage = () => {
-  if (!hasLastPage.value) {
-    onPageChange(props.totalPages);
-  }
-};
-</script>
diff --git a/app/javascript/dashboard/components/widgets/TableFooterResults.vue b/app/javascript/dashboard/components/widgets/TableFooterResults.vue
index 305933059..23a3c3a0d 100644
--- a/app/javascript/dashboard/components/widgets/TableFooterResults.vue
+++ b/app/javascript/dashboard/components/widgets/TableFooterResults.vue
@@ -1,15 +1,3 @@
-<template>
-  <span class="text-sm text-slate-700 dark:text-slate-200 font-medium">
-    {{
-      $t('GENERAL.SHOWING_RESULTS', {
-        firstIndex,
-        lastIndex,
-        totalCount,
-      })
-    }}
-  </span>
-</template>
-
 <script setup>
 defineProps({
   firstIndex: {
@@ -26,3 +14,15 @@ defineProps({
   },
 });
 </script>
+
+<template>
+  <span class="text-sm text-slate-700 dark:text-slate-200 font-medium">
+    {{
+      $t('GENERAL.SHOWING_RESULTS', {
+        firstIndex,
+        lastIndex,
+        totalCount,
+      })
+    }}
+  </span>
+</template>
diff --git a/app/javascript/dashboard/components/widgets/Thumbnail.vue b/app/javascript/dashboard/components/widgets/Thumbnail.vue
index 6c864e95b..0911bc043 100644
--- a/app/javascript/dashboard/components/widgets/Thumbnail.vue
+++ b/app/javascript/dashboard/components/widgets/Thumbnail.vue
@@ -1,40 +1,3 @@
-<template>
-  <div
-    :class="thumbnailBoxClass"
-    :style="{ height: size, width: size }"
-    :title="title"
-  >
-    <!-- Using v-show instead of v-if to avoid flickering as v-if removes dom elements.  -->
-    <slot>
-      <img
-        v-show="shouldShowImage"
-        :src="src"
-        draggable="false"
-        :class="thumbnailClass"
-        @load="onImgLoad"
-        @error="onImgError"
-      />
-      <Avatar
-        v-show="!shouldShowImage"
-        :username="userNameWithoutEmoji"
-        :class="thumbnailClass"
-        :size="avatarSize"
-      />
-    </slot>
-    <img
-      v-if="badgeSrc"
-      class="source-badge"
-      :style="badgeStyle"
-      :src="`/integrations/channels/badges/${badgeSrc}.png`"
-      alt="Badge"
-    />
-    <div
-      v-if="showStatusIndicator"
-      :class="`source-badge user-online-status user-online-status--${status}`"
-      :style="statusStyle"
-    />
-  </div>
-</template>
 <script>
 /**
  * Thumbnail Component
@@ -167,6 +130,43 @@ export default {
   },
 };
 </script>
+<template>
+  <div
+    :class="thumbnailBoxClass"
+    :style="{ height: size, width: size }"
+    :title="title"
+  >
+    <!-- Using v-show instead of v-if to avoid flickering as v-if removes dom elements.  -->
+    <slot>
+      <img
+        v-show="shouldShowImage"
+        :src="src"
+        draggable="false"
+        :class="thumbnailClass"
+        @load="onImgLoad"
+        @error="onImgError"
+      />
+      <Avatar
+        v-show="!shouldShowImage"
+        :username="userNameWithoutEmoji"
+        :class="thumbnailClass"
+        :size="avatarSize"
+      />
+    </slot>
+    <img
+      v-if="badgeSrc"
+      class="source-badge"
+      :style="badgeStyle"
+      :src="`/integrations/channels/badges/${badgeSrc}.png`"
+      alt="Badge"
+    />
+    <div
+      v-if="showStatusIndicator"
+      :class="`source-badge user-online-status user-online-status--${status}`"
+      :style="statusStyle"
+    />
+  </div>
+</template>
 
 <style lang="scss" scoped>
 .user-thumbnail-box {
diff --git a/app/javascript/dashboard/components/widgets/ThumbnailGroup.vue b/app/javascript/dashboard/components/widgets/ThumbnailGroup.vue
index a9c521bbb..ed45c56d2 100644
--- a/app/javascript/dashboard/components/widgets/ThumbnailGroup.vue
+++ b/app/javascript/dashboard/components/widgets/ThumbnailGroup.vue
@@ -1,21 +1,3 @@
-<template>
-  <div class="overlapping-thumbnails">
-    <thumbnail
-      v-for="user in usersList"
-      :key="user.id"
-      v-tooltip="user.name"
-      :title="user.name"
-      :src="user.thumbnail"
-      :username="user.name"
-      :has-border="true"
-      :size="size"
-      :class="`overlapping-thumbnail gap-${gap}`"
-    />
-    <span v-if="showMoreThumbnailsCount" class="thumbnail-more-text">
-      {{ moreThumbnailsText }}
-    </span>
-  </div>
-</template>
 <script>
 import Thumbnail from './Thumbnail.vue';
 
@@ -51,6 +33,24 @@ export default {
   },
 };
 </script>
+<template>
+  <div class="overlapping-thumbnails">
+    <thumbnail
+      v-for="user in usersList"
+      :key="user.id"
+      v-tooltip="user.name"
+      :title="user.name"
+      :src="user.thumbnail"
+      :username="user.name"
+      :has-border="true"
+      :size="size"
+      :class="`overlapping-thumbnail gap-${gap}`"
+    />
+    <span v-if="showMoreThumbnailsCount" class="thumbnail-more-text">
+      {{ moreThumbnailsText }}
+    </span>
+  </div>
+</template>
 
 <style lang="scss" scoped>
 .overlapping-thumbnails {
diff --git a/app/javascript/dashboard/components/widgets/UserAvatarWithName.vue b/app/javascript/dashboard/components/widgets/UserAvatarWithName.vue
index 07e3e5ed6..a74de3c18 100644
--- a/app/javascript/dashboard/components/widgets/UserAvatarWithName.vue
+++ b/app/javascript/dashboard/components/widgets/UserAvatarWithName.vue
@@ -1,19 +1,3 @@
-<template>
-  <div class="flex items-center gap-1.5 text-left">
-    <thumbnail
-      :src="user.thumbnail"
-      :size="size"
-      :username="user.name"
-      :status="user.availability_status"
-    />
-    <h6
-      class="my-0 dark:text-slate-100 overflow-hidden whitespace-nowrap text-ellipsis text-capitalize"
-      :class="textClass"
-    >
-      {{ user.name }}
-    </h6>
-  </div>
-</template>
 <script>
 import Thumbnail from 'dashboard/components/widgets/Thumbnail.vue';
 
@@ -37,3 +21,19 @@ export default {
   },
 };
 </script>
+<template>
+  <div class="flex items-center gap-1.5 text-left">
+    <thumbnail
+      :src="user.thumbnail"
+      :size="size"
+      :username="user.name"
+      :status="user.availability_status"
+    />
+    <h6
+      class="my-0 dark:text-slate-100 overflow-hidden whitespace-nowrap text-ellipsis text-capitalize"
+      :class="textClass"
+    >
+      {{ user.name }}
+    </h6>
+  </div>
+</template>
diff --git a/app/javascript/dashboard/components/widgets/VideoCallButton.vue b/app/javascript/dashboard/components/widgets/VideoCallButton.vue
index 10bf424fb..9080a81fa 100644
--- a/app/javascript/dashboard/components/widgets/VideoCallButton.vue
+++ b/app/javascript/dashboard/components/widgets/VideoCallButton.vue
@@ -1,17 +1,3 @@
-<template>
-  <woot-button
-    v-if="isVideoIntegrationEnabled"
-    v-tooltip.top-end="
-      $t('INTEGRATION_SETTINGS.DYTE.START_VIDEO_CALL_HELP_TEXT')
-    "
-    icon="video"
-    :is-loading="isLoading"
-    color-scheme="secondary"
-    variant="smooth"
-    size="small"
-    @click="onClick"
-  />
-</template>
 <script>
 import { mapGetters } from 'vuex';
 import DyteAPI from 'dashboard/api/integrations/dyte';
@@ -54,3 +40,17 @@ export default {
   },
 };
 </script>
+<template>
+  <woot-button
+    v-if="isVideoIntegrationEnabled"
+    v-tooltip.top-end="
+      $t('INTEGRATION_SETTINGS.DYTE.START_VIDEO_CALL_HELP_TEXT')
+    "
+    icon="video"
+    :is-loading="isLoading"
+    color-scheme="secondary"
+    variant="smooth"
+    size="small"
+    @click="onClick"
+  />
+</template>
diff --git a/app/javascript/dashboard/components/widgets/WootWriter/AudioRecorder.vue b/app/javascript/dashboard/components/widgets/WootWriter/AudioRecorder.vue
index 3b3e23be7..6779ab4fd 100644
--- a/app/javascript/dashboard/components/widgets/WootWriter/AudioRecorder.vue
+++ b/app/javascript/dashboard/components/widgets/WootWriter/AudioRecorder.vue
@@ -1,9 +1,3 @@
-<template>
-  <div class="audio-wave-wrapper">
-    <audio id="audio-wave" class="video-js vjs-fill vjs-default-skin" />
-  </div>
-</template>
-
 <script>
 import getUuid from 'widget/helpers/uuid';
 import 'video.js/dist/video-js.css';
@@ -240,6 +234,12 @@ export default {
 };
 </script>
 
+<template>
+  <div class="audio-wave-wrapper">
+    <audio id="audio-wave" class="video-js vjs-fill vjs-default-skin" />
+  </div>
+</template>
+
 <style lang="scss">
 .audio-wave-wrapper {
   @apply h-20 min-h-[5rem];
diff --git a/app/javascript/dashboard/components/widgets/WootWriter/Editor.vue b/app/javascript/dashboard/components/widgets/WootWriter/Editor.vue
index 9c99370c1..75bb6e8bf 100644
--- a/app/javascript/dashboard/components/widgets/WootWriter/Editor.vue
+++ b/app/javascript/dashboard/components/widgets/WootWriter/Editor.vue
@@ -1,49 +1,3 @@
-<template>
-  <div ref="editorRoot" class="relative editor-root">
-    <tag-agents
-      v-if="showUserMentions && isPrivate"
-      :search-key="mentionSearchKey"
-      @click="insertMentionNode"
-    />
-    <canned-response
-      v-if="shouldShowCannedResponses"
-      :search-key="cannedSearchTerm"
-      @click="insertCannedResponse"
-    />
-    <variable-list
-      v-if="shouldShowVariables"
-      :search-key="variableSearchTerm"
-      @click="insertVariable"
-    />
-    <input
-      ref="imageUpload"
-      type="file"
-      accept="image/png, image/jpeg, image/jpg, image/gif, image/webp"
-      hidden
-      @change="onFileChange"
-    />
-    <div ref="editor" />
-    <div
-      v-show="isImageNodeSelected && showImageResizeToolbar"
-      class="absolute shadow-md rounded-[4px] flex gap-1 py-1 px-1 bg-slate-50 dark:bg-slate-700 text-slate-800 dark:text-slate-50"
-      :style="{
-        top: toolbarPosition.top,
-        left: toolbarPosition.left,
-      }"
-    >
-      <button
-        v-for="size in sizes"
-        :key="size.name"
-        class="text-xs font-medium rounded-[4px] border border-solid border-slate-200 dark:border-slate-600 px-1.5 py-0.5 hover:bg-slate-100 dark:hover:bg-slate-800"
-        @click="setURLWithQueryAndImageSize(size)"
-      >
-        {{ size.name }}
-      </button>
-    </div>
-    <slot name="footer" />
-  </div>
-</template>
-
 <script>
 import {
   messageSchema,
@@ -728,6 +682,52 @@ export default {
 };
 </script>
 
+<template>
+  <div ref="editorRoot" class="relative editor-root">
+    <tag-agents
+      v-if="showUserMentions && isPrivate"
+      :search-key="mentionSearchKey"
+      @click="insertMentionNode"
+    />
+    <canned-response
+      v-if="shouldShowCannedResponses"
+      :search-key="cannedSearchTerm"
+      @click="insertCannedResponse"
+    />
+    <variable-list
+      v-if="shouldShowVariables"
+      :search-key="variableSearchTerm"
+      @click="insertVariable"
+    />
+    <input
+      ref="imageUpload"
+      type="file"
+      accept="image/png, image/jpeg, image/jpg, image/gif, image/webp"
+      hidden
+      @change="onFileChange"
+    />
+    <div ref="editor" />
+    <div
+      v-show="isImageNodeSelected && showImageResizeToolbar"
+      class="absolute shadow-md rounded-[4px] flex gap-1 py-1 px-1 bg-slate-50 dark:bg-slate-700 text-slate-800 dark:text-slate-50"
+      :style="{
+        top: toolbarPosition.top,
+        left: toolbarPosition.left,
+      }"
+    >
+      <button
+        v-for="size in sizes"
+        :key="size.name"
+        class="text-xs font-medium rounded-[4px] border border-solid border-slate-200 dark:border-slate-600 px-1.5 py-0.5 hover:bg-slate-100 dark:hover:bg-slate-800"
+        @click="setURLWithQueryAndImageSize(size)"
+      >
+        {{ size.name }}
+      </button>
+    </div>
+    <slot name="footer" />
+  </div>
+</template>
+
 <style lang="scss">
 @import '~@chatwoot/prosemirror-schema/src/styles/base.scss';
 
diff --git a/app/javascript/dashboard/components/widgets/WootWriter/FullEditor.vue b/app/javascript/dashboard/components/widgets/WootWriter/FullEditor.vue
index 67f2dc5a9..ab4be9342 100644
--- a/app/javascript/dashboard/components/widgets/WootWriter/FullEditor.vue
+++ b/app/javascript/dashboard/components/widgets/WootWriter/FullEditor.vue
@@ -1,18 +1,3 @@
-<template>
-  <div>
-    <div class="editor-root editor--article">
-      <input
-        ref="imageUploadInput"
-        type="file"
-        accept="image/png, image/jpeg, image/jpg, image/gif, image/webp"
-        hidden
-        @change="onFileChange"
-      />
-      <div ref="editor" />
-    </div>
-  </div>
-</template>
-
 <script>
 import {
   fullSchema,
@@ -223,6 +208,21 @@ export default {
 };
 </script>
 
+<template>
+  <div>
+    <div class="editor-root editor--article">
+      <input
+        ref="imageUploadInput"
+        type="file"
+        accept="image/png, image/jpeg, image/jpg, image/gif, image/webp"
+        hidden
+        @change="onFileChange"
+      />
+      <div ref="editor" />
+    </div>
+  </div>
+</template>
+
 <style lang="scss">
 @import '~@chatwoot/prosemirror-schema/src/styles/article.scss';
 
diff --git a/app/javascript/dashboard/components/widgets/WootWriter/ReplyBottomPanel.vue b/app/javascript/dashboard/components/widgets/WootWriter/ReplyBottomPanel.vue
index e9018b534..fbfe82c9b 100644
--- a/app/javascript/dashboard/components/widgets/WootWriter/ReplyBottomPanel.vue
+++ b/app/javascript/dashboard/components/widgets/WootWriter/ReplyBottomPanel.vue
@@ -1,138 +1,3 @@
-<template>
-  <div class="bottom-box" :class="wrapClass">
-    <div class="left-wrap">
-      <woot-button
-        v-tooltip.top-end="$t('CONVERSATION.REPLYBOX.TIP_EMOJI_ICON')"
-        :title="$t('CONVERSATION.REPLYBOX.TIP_EMOJI_ICON')"
-        icon="emoji"
-        emoji="😊"
-        color-scheme="secondary"
-        variant="smooth"
-        size="small"
-        @click="toggleEmojiPicker"
-      />
-      <file-upload
-        ref="upload"
-        v-tooltip.top-end="$t('CONVERSATION.REPLYBOX.TIP_ATTACH_ICON')"
-        input-id="conversationAttachment"
-        :size="4096 * 4096"
-        :accept="allowedFileTypes"
-        :multiple="enableMultipleFileUpload"
-        :drop="enableDragAndDrop"
-        :drop-directory="false"
-        :data="{
-          direct_upload_url: '/rails/active_storage/direct_uploads',
-          direct_upload: true,
-        }"
-        @input-file="onFileUpload"
-      >
-        <woot-button
-          v-if="showAttachButton"
-          class-names="button--upload"
-          :title="$t('CONVERSATION.REPLYBOX.TIP_ATTACH_ICON')"
-          icon="attach"
-          emoji="📎"
-          color-scheme="secondary"
-          variant="smooth"
-          size="small"
-        />
-      </file-upload>
-      <woot-button
-        v-if="showAudioRecorderButton"
-        v-tooltip.top-end="$t('CONVERSATION.REPLYBOX.TIP_AUDIORECORDER_ICON')"
-        :icon="!isRecordingAudio ? 'microphone' : 'microphone-off'"
-        emoji="🎤"
-        :color-scheme="!isRecordingAudio ? 'secondary' : 'alert'"
-        variant="smooth"
-        size="small"
-        @click="toggleAudioRecorder"
-      />
-      <woot-button
-        v-if="showEditorToggle"
-        v-tooltip.top-end="$t('CONVERSATION.REPLYBOX.TIP_FORMAT_ICON')"
-        icon="quote"
-        emoji="🖊️"
-        color-scheme="secondary"
-        variant="smooth"
-        size="small"
-        @click="$emit('toggle-editor')"
-      />
-      <woot-button
-        v-if="showAudioPlayStopButton"
-        :icon="audioRecorderPlayStopIcon"
-        emoji="🎤"
-        color-scheme="secondary"
-        variant="smooth"
-        size="small"
-        @click="toggleAudioRecorderPlayPause"
-      >
-        <span>{{ recordingAudioDurationText }}</span>
-      </woot-button>
-      <woot-button
-        v-if="showMessageSignatureButton"
-        v-tooltip.top-end="signatureToggleTooltip"
-        icon="signature"
-        color-scheme="secondary"
-        variant="smooth"
-        size="small"
-        :title="signatureToggleTooltip"
-        @click="toggleMessageSignature"
-      />
-      <woot-button
-        v-if="hasWhatsappTemplates"
-        v-tooltip.top-end="'Whatsapp Templates'"
-        icon="whatsapp"
-        color-scheme="secondary"
-        variant="smooth"
-        size="small"
-        :title="'Whatsapp Templates'"
-        @click="$emit('selectWhatsappTemplate')"
-      />
-      <video-call-button
-        v-if="(isAWebWidgetInbox || isAPIInbox) && !isOnPrivateNote"
-        :conversation-id="conversationId"
-      />
-      <AIAssistanceButton
-        :conversation-id="conversationId"
-        :is-private-note="isOnPrivateNote"
-        :message="message"
-        @replace-text="replaceText"
-      />
-      <transition name="modal-fade">
-        <div
-          v-show="$refs.upload && $refs.upload.dropActive"
-          class="fixed top-0 bottom-0 left-0 right-0 z-20 flex flex-col items-center justify-center w-full h-full gap-2 text-slate-900 dark:text-slate-50 bg-modal-backdrop-light dark:bg-modal-backdrop-dark"
-        >
-          <fluent-icon icon="cloud-backup" size="40" />
-          <h4 class="text-2xl break-words text-slate-900 dark:text-slate-50">
-            {{ $t('CONVERSATION.REPLYBOX.DRAG_DROP') }}
-          </h4>
-        </div>
-      </transition>
-      <woot-button
-        v-if="enableInsertArticleInReply"
-        v-tooltip.top-end="$t('HELP_CENTER.ARTICLE_SEARCH.OPEN_ARTICLE_SEARCH')"
-        icon="document-text-link"
-        color-scheme="secondary"
-        variant="smooth"
-        size="small"
-        :title="$t('HELP_CENTER.ARTICLE_SEARCH.OPEN_ARTICLE_SEARCH')"
-        @click="toggleInsertArticle"
-      />
-    </div>
-    <div class="right-wrap">
-      <woot-button
-        size="small"
-        :class-names="buttonClass"
-        :is-disabled="isSendDisabled"
-        @click="onSend"
-      >
-        {{ sendButtonText }}
-      </woot-button>
-    </div>
-  </div>
-</template>
-
 <script>
 import { useUISettings } from 'dashboard/composables/useUISettings';
 import FileUpload from 'vue-upload-component';
@@ -371,6 +236,141 @@ export default {
 };
 </script>
 
+<template>
+  <div class="bottom-box" :class="wrapClass">
+    <div class="left-wrap">
+      <woot-button
+        v-tooltip.top-end="$t('CONVERSATION.REPLYBOX.TIP_EMOJI_ICON')"
+        :title="$t('CONVERSATION.REPLYBOX.TIP_EMOJI_ICON')"
+        icon="emoji"
+        emoji="😊"
+        color-scheme="secondary"
+        variant="smooth"
+        size="small"
+        @click="toggleEmojiPicker"
+      />
+      <file-upload
+        ref="upload"
+        v-tooltip.top-end="$t('CONVERSATION.REPLYBOX.TIP_ATTACH_ICON')"
+        input-id="conversationAttachment"
+        :size="4096 * 4096"
+        :accept="allowedFileTypes"
+        :multiple="enableMultipleFileUpload"
+        :drop="enableDragAndDrop"
+        :drop-directory="false"
+        :data="{
+          direct_upload_url: '/rails/active_storage/direct_uploads',
+          direct_upload: true,
+        }"
+        @input-file="onFileUpload"
+      >
+        <woot-button
+          v-if="showAttachButton"
+          class-names="button--upload"
+          :title="$t('CONVERSATION.REPLYBOX.TIP_ATTACH_ICON')"
+          icon="attach"
+          emoji="📎"
+          color-scheme="secondary"
+          variant="smooth"
+          size="small"
+        />
+      </file-upload>
+      <woot-button
+        v-if="showAudioRecorderButton"
+        v-tooltip.top-end="$t('CONVERSATION.REPLYBOX.TIP_AUDIORECORDER_ICON')"
+        :icon="!isRecordingAudio ? 'microphone' : 'microphone-off'"
+        emoji="🎤"
+        :color-scheme="!isRecordingAudio ? 'secondary' : 'alert'"
+        variant="smooth"
+        size="small"
+        @click="toggleAudioRecorder"
+      />
+      <woot-button
+        v-if="showEditorToggle"
+        v-tooltip.top-end="$t('CONVERSATION.REPLYBOX.TIP_FORMAT_ICON')"
+        icon="quote"
+        emoji="🖊️"
+        color-scheme="secondary"
+        variant="smooth"
+        size="small"
+        @click="$emit('toggle-editor')"
+      />
+      <woot-button
+        v-if="showAudioPlayStopButton"
+        :icon="audioRecorderPlayStopIcon"
+        emoji="🎤"
+        color-scheme="secondary"
+        variant="smooth"
+        size="small"
+        @click="toggleAudioRecorderPlayPause"
+      >
+        <span>{{ recordingAudioDurationText }}</span>
+      </woot-button>
+      <woot-button
+        v-if="showMessageSignatureButton"
+        v-tooltip.top-end="signatureToggleTooltip"
+        icon="signature"
+        color-scheme="secondary"
+        variant="smooth"
+        size="small"
+        :title="signatureToggleTooltip"
+        @click="toggleMessageSignature"
+      />
+      <woot-button
+        v-if="hasWhatsappTemplates"
+        v-tooltip.top-end="'Whatsapp Templates'"
+        icon="whatsapp"
+        color-scheme="secondary"
+        variant="smooth"
+        size="small"
+        :title="'Whatsapp Templates'"
+        @click="$emit('selectWhatsappTemplate')"
+      />
+      <video-call-button
+        v-if="(isAWebWidgetInbox || isAPIInbox) && !isOnPrivateNote"
+        :conversation-id="conversationId"
+      />
+      <AIAssistanceButton
+        :conversation-id="conversationId"
+        :is-private-note="isOnPrivateNote"
+        :message="message"
+        @replace-text="replaceText"
+      />
+      <transition name="modal-fade">
+        <div
+          v-show="$refs.upload && $refs.upload.dropActive"
+          class="fixed top-0 bottom-0 left-0 right-0 z-20 flex flex-col items-center justify-center w-full h-full gap-2 text-slate-900 dark:text-slate-50 bg-modal-backdrop-light dark:bg-modal-backdrop-dark"
+        >
+          <fluent-icon icon="cloud-backup" size="40" />
+          <h4 class="text-2xl break-words text-slate-900 dark:text-slate-50">
+            {{ $t('CONVERSATION.REPLYBOX.DRAG_DROP') }}
+          </h4>
+        </div>
+      </transition>
+      <woot-button
+        v-if="enableInsertArticleInReply"
+        v-tooltip.top-end="$t('HELP_CENTER.ARTICLE_SEARCH.OPEN_ARTICLE_SEARCH')"
+        icon="document-text-link"
+        color-scheme="secondary"
+        variant="smooth"
+        size="small"
+        :title="$t('HELP_CENTER.ARTICLE_SEARCH.OPEN_ARTICLE_SEARCH')"
+        @click="toggleInsertArticle"
+      />
+    </div>
+    <div class="right-wrap">
+      <woot-button
+        size="small"
+        :class-names="buttonClass"
+        :is-disabled="isSendDisabled"
+        @click="onSend"
+      >
+        {{ sendButtonText }}
+      </woot-button>
+    </div>
+  </div>
+</template>
+
 <style lang="scss" scoped>
 .bottom-box {
   @apply flex justify-between py-3 px-4;
diff --git a/app/javascript/dashboard/components/widgets/WootWriter/ReplyTopPanel.vue b/app/javascript/dashboard/components/widgets/WootWriter/ReplyTopPanel.vue
index d916116ac..2a636654f 100644
--- a/app/javascript/dashboard/components/widgets/WootWriter/ReplyTopPanel.vue
+++ b/app/javascript/dashboard/components/widgets/WootWriter/ReplyTopPanel.vue
@@ -1,51 +1,3 @@
-<template>
-  <div class="flex justify-between bg-black-50 dark:bg-slate-800">
-    <div class="button-group">
-      <woot-button
-        variant="clear"
-        class="button--reply"
-        :class="replyButtonClass"
-        @click="handleReplyClick"
-      >
-        {{ $t('CONVERSATION.REPLYBOX.REPLY') }}
-      </woot-button>
-
-      <woot-button
-        class="button--note"
-        variant="clear"
-        color-scheme="warning"
-        :class="noteButtonClass"
-        @click="handleNoteClick"
-      >
-        {{ $t('CONVERSATION.REPLYBOX.PRIVATE_NOTE') }}
-      </woot-button>
-    </div>
-    <div class="flex items-center mx-4 my-0">
-      <div v-if="isMessageLengthReachingThreshold" class="text-xs">
-        <span :class="charLengthClass">
-          {{ characterLengthWarning }}
-        </span>
-      </div>
-    </div>
-    <woot-button
-      v-if="popoutReplyBox"
-      variant="clear"
-      icon="dismiss"
-      color-scheme="secondary"
-      class-names="popout-button"
-      @click="$emit('click')"
-    />
-    <woot-button
-      v-else
-      variant="clear"
-      icon="resize-large"
-      color-scheme="secondary"
-      class-names="popout-button"
-      @click="$emit('click')"
-    />
-  </div>
-</template>
-
 <script>
 import { REPLY_EDITOR_MODES, CHAR_LENGTH_WARNING } from './constants';
 import keyboardEventListenerMixins from 'shared/mixins/keyboardEventListenerMixins';
@@ -117,6 +69,54 @@ export default {
 };
 </script>
 
+<template>
+  <div class="flex justify-between bg-black-50 dark:bg-slate-800">
+    <div class="button-group">
+      <woot-button
+        variant="clear"
+        class="button--reply"
+        :class="replyButtonClass"
+        @click="handleReplyClick"
+      >
+        {{ $t('CONVERSATION.REPLYBOX.REPLY') }}
+      </woot-button>
+
+      <woot-button
+        class="button--note"
+        variant="clear"
+        color-scheme="warning"
+        :class="noteButtonClass"
+        @click="handleNoteClick"
+      >
+        {{ $t('CONVERSATION.REPLYBOX.PRIVATE_NOTE') }}
+      </woot-button>
+    </div>
+    <div class="flex items-center mx-4 my-0">
+      <div v-if="isMessageLengthReachingThreshold" class="text-xs">
+        <span :class="charLengthClass">
+          {{ characterLengthWarning }}
+        </span>
+      </div>
+    </div>
+    <woot-button
+      v-if="popoutReplyBox"
+      variant="clear"
+      icon="dismiss"
+      color-scheme="secondary"
+      class-names="popout-button"
+      @click="$emit('click')"
+    />
+    <woot-button
+      v-else
+      variant="clear"
+      icon="resize-large"
+      color-scheme="secondary"
+      class-names="popout-button"
+      @click="$emit('click')"
+    />
+  </div>
+</template>
+
 <style lang="scss" scoped>
 .button-group {
   @apply flex border-0 p-0 m-0;
diff --git a/app/javascript/dashboard/components/widgets/conversation/AvailabilityStatusBadge.vue b/app/javascript/dashboard/components/widgets/conversation/AvailabilityStatusBadge.vue
index e6d826d48..b5f76ae0e 100644
--- a/app/javascript/dashboard/components/widgets/conversation/AvailabilityStatusBadge.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/AvailabilityStatusBadge.vue
@@ -1,8 +1,3 @@
-<template>
-  <div
-    :class="`status-badge status-badge__${status} rounded-full w-2.5 h-2.5 mr-0.5 rtl:mr-0 rtl:ml-0.5 inline-flex`"
-  />
-</template>
 <script>
 export default {
   props: {
@@ -10,6 +5,11 @@ export default {
   },
 };
 </script>
+<template>
+  <div
+    :class="`status-badge status-badge__${status} rounded-full w-2.5 h-2.5 mr-0.5 rtl:mr-0 rtl:ml-0.5 inline-flex`"
+  />
+</template>
 <style lang="scss" scoped>
 .status-badge {
   &__online {
diff --git a/app/javascript/dashboard/components/widgets/conversation/CannedResponse.vue b/app/javascript/dashboard/components/widgets/conversation/CannedResponse.vue
index c744eaa06..cdd46e7c8 100644
--- a/app/javascript/dashboard/components/widgets/conversation/CannedResponse.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/CannedResponse.vue
@@ -1,15 +1,3 @@
-<template>
-  <mention-box
-    v-if="items.length"
-    :items="items"
-    @mention-select="handleMentionClick"
-  >
-    <template slot-scope="{ item }">
-      <strong>{{ item.label }}</strong> - {{ item.description }}
-    </template>
-  </mention-box>
-</template>
-
 <script>
 import { mapGetters } from 'vuex';
 import MentionBox from '../mentions/MentionBox.vue';
@@ -52,3 +40,15 @@ export default {
   },
 };
 </script>
+
+<template>
+  <mention-box
+    v-if="items.length"
+    :items="items"
+    @mention-select="handleMentionClick"
+  >
+    <template slot-scope="{ item }">
+      <strong>{{ item.label }}</strong> - {{ item.description }}
+    </template>
+  </mention-box>
+</template>
diff --git a/app/javascript/dashboard/components/widgets/conversation/ConversationAdvancedFilter.vue b/app/javascript/dashboard/components/widgets/conversation/ConversationAdvancedFilter.vue
index 8b1cf6dd5..1106936b7 100644
--- a/app/javascript/dashboard/components/widgets/conversation/ConversationAdvancedFilter.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/ConversationAdvancedFilter.vue
@@ -1,83 +1,3 @@
-<template>
-  <div>
-    <woot-modal-header :header-title="filterModalHeaderTitle">
-      <p class="text-slate-600 dark:text-slate-200">
-        {{ filterModalSubTitle }}
-      </p>
-    </woot-modal-header>
-    <div class="p-8">
-      <div v-if="isFolderView">
-        <label class="input-label" :class="{ error: !activeFolderNewName }">
-          {{ $t('FILTER.FOLDER_LABEL') }}
-          <input
-            v-model="activeFolderNewName"
-            type="text"
-            class="bg-white folder-input border-slate-75 dark:border-slate-600 dark:bg-slate-900 text-slate-900 dark:text-slate-100"
-          />
-          <span v-if="!activeFolderNewName" class="message">
-            {{ $t('FILTER.EMPTY_VALUE_ERROR') }}
-          </span>
-        </label>
-        <label class="mb-1">
-          {{ $t('FILTER.FOLDER_QUERY_LABEL') }}
-        </label>
-      </div>
-      <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
-          v-for="(filter, i) in appliedFilters"
-          :key="i"
-          v-model="appliedFilters[i]"
-          :filter-groups="filterGroups"
-          :input-type="
-            getInputType(
-              appliedFilters[i].attribute_key,
-              appliedFilters[i].filter_operator
-            )
-          "
-          :operators="getOperators(appliedFilters[i].attribute_key)"
-          :dropdown-values="getDropdownValues(appliedFilters[i].attribute_key)"
-          :show-query-operator="i !== appliedFilters.length - 1"
-          :show-user-input="showUserInput(appliedFilters[i].filter_operator)"
-          :grouped-filters="true"
-          :error-message="validationErrors[`filter_${i}`]"
-          @resetFilter="resetFilter(i, appliedFilters[i])"
-          @removeFilter="removeFilter(i)"
-        />
-        <div class="mt-4">
-          <woot-button
-            icon="add"
-            color-scheme="success"
-            variant="smooth"
-            size="small"
-            @click="appendNewFilter"
-          >
-            {{ $t('FILTER.ADD_NEW_FILTER') }}
-          </woot-button>
-        </div>
-      </div>
-      <div class="w-full">
-        <div class="flex flex-row justify-end w-full gap-2 px-0 py-2">
-          <woot-button class="button clear" @click.prevent="onClose">
-            {{ $t('FILTER.CANCEL_BUTTON_LABEL') }}
-          </woot-button>
-          <woot-button
-            v-if="isFolderView"
-            :disabled="!activeFolderNewName"
-            @click="updateSavedCustomViews"
-          >
-            {{ $t('FILTER.UPDATE_BUTTON_LABEL') }}
-          </woot-button>
-          <woot-button v-else @click="submitFilterQuery">
-            {{ $t('FILTER.SUBMIT_BUTTON_LABEL') }}
-          </woot-button>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
 <script>
 import { useAlert } from 'dashboard/composables';
 import FilterInputBox from '../FilterInput/Index.vue';
@@ -362,6 +282,86 @@ export default {
   },
 };
 </script>
+
+<template>
+  <div>
+    <woot-modal-header :header-title="filterModalHeaderTitle">
+      <p class="text-slate-600 dark:text-slate-200">
+        {{ filterModalSubTitle }}
+      </p>
+    </woot-modal-header>
+    <div class="p-8">
+      <div v-if="isFolderView">
+        <label class="input-label" :class="{ error: !activeFolderNewName }">
+          {{ $t('FILTER.FOLDER_LABEL') }}
+          <input
+            v-model="activeFolderNewName"
+            type="text"
+            class="bg-white folder-input border-slate-75 dark:border-slate-600 dark:bg-slate-900 text-slate-900 dark:text-slate-100"
+          />
+          <span v-if="!activeFolderNewName" class="message">
+            {{ $t('FILTER.EMPTY_VALUE_ERROR') }}
+          </span>
+        </label>
+        <label class="mb-1">
+          {{ $t('FILTER.FOLDER_QUERY_LABEL') }}
+        </label>
+      </div>
+      <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
+          v-for="(filter, i) in appliedFilters"
+          :key="i"
+          v-model="appliedFilters[i]"
+          :filter-groups="filterGroups"
+          :input-type="
+            getInputType(
+              appliedFilters[i].attribute_key,
+              appliedFilters[i].filter_operator
+            )
+          "
+          :operators="getOperators(appliedFilters[i].attribute_key)"
+          :dropdown-values="getDropdownValues(appliedFilters[i].attribute_key)"
+          :show-query-operator="i !== appliedFilters.length - 1"
+          :show-user-input="showUserInput(appliedFilters[i].filter_operator)"
+          :grouped-filters="true"
+          :error-message="validationErrors[`filter_${i}`]"
+          @resetFilter="resetFilter(i, appliedFilters[i])"
+          @removeFilter="removeFilter(i)"
+        />
+        <div class="mt-4">
+          <woot-button
+            icon="add"
+            color-scheme="success"
+            variant="smooth"
+            size="small"
+            @click="appendNewFilter"
+          >
+            {{ $t('FILTER.ADD_NEW_FILTER') }}
+          </woot-button>
+        </div>
+      </div>
+      <div class="w-full">
+        <div class="flex flex-row justify-end w-full gap-2 px-0 py-2">
+          <woot-button class="button clear" @click.prevent="onClose">
+            {{ $t('FILTER.CANCEL_BUTTON_LABEL') }}
+          </woot-button>
+          <woot-button
+            v-if="isFolderView"
+            :disabled="!activeFolderNewName"
+            @click="updateSavedCustomViews"
+          >
+            {{ $t('FILTER.UPDATE_BUTTON_LABEL') }}
+          </woot-button>
+          <woot-button v-else @click="submitFilterQuery">
+            {{ $t('FILTER.SUBMIT_BUTTON_LABEL') }}
+          </woot-button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
 <style lang="scss" scoped>
 .folder-input {
   @apply w-[50%];
diff --git a/app/javascript/dashboard/components/widgets/conversation/ConversationBasicFilter.vue b/app/javascript/dashboard/components/widgets/conversation/ConversationBasicFilter.vue
index 571415d48..a8cb8f912 100644
--- a/app/javascript/dashboard/components/widgets/conversation/ConversationBasicFilter.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/ConversationBasicFilter.vue
@@ -1,47 +1,3 @@
-<template>
-  <div class="relative flex">
-    <woot-button
-      v-tooltip.right="$t('CHAT_LIST.SORT_TOOLTIP_LABEL')"
-      variant="smooth"
-      size="tiny"
-      color-scheme="secondary"
-      class="selector-button"
-      icon="sort-icon"
-      @click="toggleDropdown"
-    />
-    <div
-      v-if="showActionsDropdown"
-      v-on-clickaway="closeDropdown"
-      class="right-0 mt-1 dropdown-pane dropdown-pane--open basic-filter"
-    >
-      <div class="flex items-center justify-between last:mt-4">
-        <span class="text-xs font-medium text-slate-800 dark:text-slate-100">{{
-          $t('CHAT_LIST.CHAT_SORT.STATUS')
-        }}</span>
-        <filter-item
-          type="status"
-          :selected-value="chatStatus"
-          :items="chatStatusItems"
-          path-prefix="CHAT_LIST.CHAT_STATUS_FILTER_ITEMS"
-          @onChangeFilter="onChangeFilter"
-        />
-      </div>
-      <div class="flex items-center justify-between last:mt-4">
-        <span class="text-xs font-medium text-slate-800 dark:text-slate-100">{{
-          $t('CHAT_LIST.CHAT_SORT.ORDER_BY')
-        }}</span>
-        <filter-item
-          type="sort"
-          :selected-value="sortFilter"
-          :items="chatSortItems"
-          path-prefix="CHAT_LIST.SORT_ORDER_ITEMS"
-          @onChangeFilter="onChangeFilter"
-        />
-      </div>
-    </div>
-  </div>
-</template>
-
 <script>
 import wootConstants from 'dashboard/constants/globals';
 import { mapGetters } from 'vuex';
@@ -106,6 +62,50 @@ export default {
   },
 };
 </script>
+
+<template>
+  <div class="relative flex">
+    <woot-button
+      v-tooltip.right="$t('CHAT_LIST.SORT_TOOLTIP_LABEL')"
+      variant="smooth"
+      size="tiny"
+      color-scheme="secondary"
+      class="selector-button"
+      icon="sort-icon"
+      @click="toggleDropdown"
+    />
+    <div
+      v-if="showActionsDropdown"
+      v-on-clickaway="closeDropdown"
+      class="right-0 mt-1 dropdown-pane dropdown-pane--open basic-filter"
+    >
+      <div class="flex items-center justify-between last:mt-4">
+        <span class="text-xs font-medium text-slate-800 dark:text-slate-100">{{
+          $t('CHAT_LIST.CHAT_SORT.STATUS')
+        }}</span>
+        <filter-item
+          type="status"
+          :selected-value="chatStatus"
+          :items="chatStatusItems"
+          path-prefix="CHAT_LIST.CHAT_STATUS_FILTER_ITEMS"
+          @onChangeFilter="onChangeFilter"
+        />
+      </div>
+      <div class="flex items-center justify-between last:mt-4">
+        <span class="text-xs font-medium text-slate-800 dark:text-slate-100">{{
+          $t('CHAT_LIST.CHAT_SORT.ORDER_BY')
+        }}</span>
+        <filter-item
+          type="sort"
+          :selected-value="sortFilter"
+          :items="chatSortItems"
+          path-prefix="CHAT_LIST.SORT_ORDER_ITEMS"
+          @onChangeFilter="onChangeFilter"
+        />
+      </div>
+    </div>
+  </div>
+</template>
 <style lang="scss" scoped>
 .basic-filter {
   @apply w-52 p-4 top-6;
diff --git a/app/javascript/dashboard/components/widgets/conversation/ConversationBox.vue b/app/javascript/dashboard/components/widgets/conversation/ConversationBox.vue
index 2ad77452d..1289060e7 100644
--- a/app/javascript/dashboard/components/widgets/conversation/ConversationBox.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/ConversationBox.vue
@@ -1,67 +1,3 @@
-<template>
-  <div
-    class="conversation-details-wrap bg-slate-25 dark:bg-slate-800"
-    :class="{ 'with-border-right': !isOnExpandedLayout }"
-  >
-    <conversation-header
-      v-if="currentChat.id"
-      :chat="currentChat"
-      :is-inbox-view="isInboxView"
-      :is-contact-panel-open="isContactPanelOpen"
-      :show-back-button="isOnExpandedLayout && !isInboxView"
-      @contact-panel-toggle="onToggleContactPanel"
-    />
-    <woot-tabs
-      v-if="dashboardApps.length && currentChat.id"
-      :index="activeIndex"
-      class="dashboard-app--tabs bg-white dark:bg-slate-900 -mt-px"
-      @change="onDashboardAppTabChange"
-    >
-      <woot-tabs-item
-        v-for="tab in dashboardAppTabs"
-        :key="tab.key"
-        :name="tab.name"
-        :show-badge="false"
-      />
-    </woot-tabs>
-    <div
-      v-show="!activeIndex"
-      class="flex bg-slate-25 dark:bg-slate-800 m-0 h-full min-h-0"
-    >
-      <messages-view
-        v-if="currentChat.id"
-        :inbox-id="inboxId"
-        :is-inbox-view="isInboxView"
-        :is-contact-panel-open="isContactPanelOpen"
-        @contact-panel-toggle="onToggleContactPanel"
-      />
-      <empty-state
-        v-if="!currentChat.id && !isInboxView"
-        :is-on-expanded-layout="isOnExpandedLayout"
-      />
-      <div
-        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
-          v-if="showContactPanel"
-          :conversation-id="currentChat.id"
-          :inbox-id="currentChat.inbox_id"
-          :on-toggle="onToggleContactPanel"
-        />
-      </div>
-    </div>
-    <dashboard-app-frame
-      v-for="(dashboardApp, index) in dashboardApps"
-      v-show="activeIndex - 1 === index"
-      :key="currentChat.id + '-' + dashboardApp.id"
-      :is-visible="activeIndex - 1 === index"
-      :config="dashboardApps[index].content"
-      :position="index"
-      :current-chat="currentChat"
-    />
-  </div>
-</template>
 <script>
 import { mapGetters } from 'vuex';
 import ContactPanel from 'dashboard/routes/dashboard/conversation/ContactPanel.vue';
@@ -153,6 +89,70 @@ export default {
   },
 };
 </script>
+<template>
+  <div
+    class="conversation-details-wrap bg-slate-25 dark:bg-slate-800"
+    :class="{ 'with-border-right': !isOnExpandedLayout }"
+  >
+    <conversation-header
+      v-if="currentChat.id"
+      :chat="currentChat"
+      :is-inbox-view="isInboxView"
+      :is-contact-panel-open="isContactPanelOpen"
+      :show-back-button="isOnExpandedLayout && !isInboxView"
+      @contact-panel-toggle="onToggleContactPanel"
+    />
+    <woot-tabs
+      v-if="dashboardApps.length && currentChat.id"
+      :index="activeIndex"
+      class="dashboard-app--tabs bg-white dark:bg-slate-900 -mt-px"
+      @change="onDashboardAppTabChange"
+    >
+      <woot-tabs-item
+        v-for="tab in dashboardAppTabs"
+        :key="tab.key"
+        :name="tab.name"
+        :show-badge="false"
+      />
+    </woot-tabs>
+    <div
+      v-show="!activeIndex"
+      class="flex bg-slate-25 dark:bg-slate-800 m-0 h-full min-h-0"
+    >
+      <messages-view
+        v-if="currentChat.id"
+        :inbox-id="inboxId"
+        :is-inbox-view="isInboxView"
+        :is-contact-panel-open="isContactPanelOpen"
+        @contact-panel-toggle="onToggleContactPanel"
+      />
+      <empty-state
+        v-if="!currentChat.id && !isInboxView"
+        :is-on-expanded-layout="isOnExpandedLayout"
+      />
+      <div
+        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
+          v-if="showContactPanel"
+          :conversation-id="currentChat.id"
+          :inbox-id="currentChat.inbox_id"
+          :on-toggle="onToggleContactPanel"
+        />
+      </div>
+    </div>
+    <dashboard-app-frame
+      v-for="(dashboardApp, index) in dashboardApps"
+      v-show="activeIndex - 1 === index"
+      :key="currentChat.id + '-' + dashboardApp.id"
+      :is-visible="activeIndex - 1 === index"
+      :config="dashboardApps[index].content"
+      :position="index"
+      :current-chat="currentChat"
+    />
+  </div>
+</template>
 <style lang="scss" scoped>
 .conversation-details-wrap {
   @apply flex flex-col min-w-0 w-full;
diff --git a/app/javascript/dashboard/components/widgets/conversation/ConversationCard.vue b/app/javascript/dashboard/components/widgets/conversation/ConversationCard.vue
index bb185cc0d..3463cae20 100644
--- a/app/javascript/dashboard/components/widgets/conversation/ConversationCard.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/ConversationCard.vue
@@ -1,120 +1,3 @@
-<template>
-  <div
-    class="relative flex items-start flex-grow-0 flex-shrink-0 w-auto max-w-full px-4 py-0 border-t-0 border-b-0 border-l-2 border-r-0 border-transparent border-solid cursor-pointer conversation hover:bg-slate-25 dark:hover:bg-slate-800 group"
-    :class="{
-      'active animate-card-select bg-slate-25 dark:bg-slate-800 border-woot-500':
-        isActiveChat,
-      'unread-chat': hasUnread,
-      'has-inbox-name': showInboxName,
-      'conversation-selected': selected,
-    }"
-    @mouseenter="onCardHover"
-    @mouseleave="onCardLeave"
-    @click="onCardClick"
-    @contextmenu="openContextMenu($event)"
-  >
-    <label v-if="hovered || selected" class="checkbox-wrapper" @click.stop>
-      <input
-        :value="selected"
-        :checked="selected"
-        class="checkbox"
-        type="checkbox"
-        @change="onSelectConversation($event.target.checked)"
-      />
-    </label>
-    <thumbnail
-      v-if="bulkActionCheck"
-      :src="currentContact.thumbnail"
-      :badge="inboxBadge"
-      :username="currentContact.name"
-      :status="currentContact.availability_status"
-      size="40px"
-    />
-    <div
-      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" />
-        <div class="flex gap-2 ml-2 rtl:mr-2 rtl:ml-0">
-          <span
-            v-if="showAssignee && assignee.name"
-            class="text-slate-500 dark:text-slate-400 text-xs font-medium leading-3 py-0.5 px-0 inline-flex text-ellipsis overflow-hidden whitespace-nowrap"
-          >
-            <fluent-icon
-              icon="person"
-              size="12"
-              class="text-slate-500 dark:text-slate-400"
-            />
-            {{ assignee.name }}
-          </span>
-          <priority-mark :priority="chat.priority" />
-        </div>
-      </div>
-      <h4
-        class="conversation--user text-sm my-0 mx-2 capitalize pt-0.5 text-ellipsis font-medium overflow-hidden whitespace-nowrap w-[calc(100%-70px)] text-slate-900 dark:text-slate-100"
-      >
-        {{ currentContact.name }}
-      </h4>
-      <message-preview
-        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"
-      />
-      <p
-        v-else
-        class="conversation--message text-slate-700 dark:text-slate-200 text-sm my-0 mx-2 leading-6 h-6 max-w-[96%] w-[16.875rem] overflow-hidden text-ellipsis whitespace-nowrap"
-      >
-        <fluent-icon
-          size="16"
-          class="-mt-0.5 align-middle inline-block text-slate-600 dark:text-slate-300"
-          icon="info"
-        />
-        <span>
-          {{ $t(`CHAT_LIST.NO_MESSAGES`) }}
-        </span>
-      </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
-            :last-activity-timestamp="chat.timestamp"
-            :created-at-timestamp="chat.created_at"
-          />
-        </span>
-        <span
-          class="unread shadow-lg rounded-full hidden text-xxs font-semibold h-4 leading-4 ml-auto mt-1 min-w-[1rem] px-1 py-0 text-center text-white bg-green-400"
-        >
-          {{ unreadCount > 9 ? '9+' : unreadCount }}
-        </span>
-      </div>
-      <card-labels :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" />
-        </template>
-      </card-labels>
-    </div>
-    <woot-context-menu
-      v-if="showContextMenu"
-      ref="menu"
-      :x="contextMenu.x"
-      :y="contextMenu.y"
-      @close="closeContextMenu"
-    >
-      <conversation-context-menu
-        :status="chat.status"
-        :inbox-id="inbox.id"
-        :priority="chat.priority"
-        :chat-id="chat.id"
-        :has-unread-messages="hasUnread"
-        @update-conversation="onUpdateConversation"
-        @assign-agent="onAssignAgent"
-        @assign-label="onAssignLabel"
-        @assign-team="onAssignTeam"
-        @mark-as-unread="markAsUnread"
-        @assign-priority="assignPriority"
-      />
-    </woot-context-menu>
-  </div>
-</template>
 <script>
 import { mapGetters } from 'vuex';
 import Thumbnail from '../Thumbnail.vue';
@@ -345,6 +228,123 @@ export default {
   },
 };
 </script>
+<template>
+  <div
+    class="relative flex items-start flex-grow-0 flex-shrink-0 w-auto max-w-full px-4 py-0 border-t-0 border-b-0 border-l-2 border-r-0 border-transparent border-solid cursor-pointer conversation hover:bg-slate-25 dark:hover:bg-slate-800 group"
+    :class="{
+      'active animate-card-select bg-slate-25 dark:bg-slate-800 border-woot-500':
+        isActiveChat,
+      'unread-chat': hasUnread,
+      'has-inbox-name': showInboxName,
+      'conversation-selected': selected,
+    }"
+    @mouseenter="onCardHover"
+    @mouseleave="onCardLeave"
+    @click="onCardClick"
+    @contextmenu="openContextMenu($event)"
+  >
+    <label v-if="hovered || selected" class="checkbox-wrapper" @click.stop>
+      <input
+        :value="selected"
+        :checked="selected"
+        class="checkbox"
+        type="checkbox"
+        @change="onSelectConversation($event.target.checked)"
+      />
+    </label>
+    <thumbnail
+      v-if="bulkActionCheck"
+      :src="currentContact.thumbnail"
+      :badge="inboxBadge"
+      :username="currentContact.name"
+      :status="currentContact.availability_status"
+      size="40px"
+    />
+    <div
+      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" />
+        <div class="flex gap-2 ml-2 rtl:mr-2 rtl:ml-0">
+          <span
+            v-if="showAssignee && assignee.name"
+            class="text-slate-500 dark:text-slate-400 text-xs font-medium leading-3 py-0.5 px-0 inline-flex text-ellipsis overflow-hidden whitespace-nowrap"
+          >
+            <fluent-icon
+              icon="person"
+              size="12"
+              class="text-slate-500 dark:text-slate-400"
+            />
+            {{ assignee.name }}
+          </span>
+          <priority-mark :priority="chat.priority" />
+        </div>
+      </div>
+      <h4
+        class="conversation--user text-sm my-0 mx-2 capitalize pt-0.5 text-ellipsis font-medium overflow-hidden whitespace-nowrap w-[calc(100%-70px)] text-slate-900 dark:text-slate-100"
+      >
+        {{ currentContact.name }}
+      </h4>
+      <message-preview
+        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"
+      />
+      <p
+        v-else
+        class="conversation--message text-slate-700 dark:text-slate-200 text-sm my-0 mx-2 leading-6 h-6 max-w-[96%] w-[16.875rem] overflow-hidden text-ellipsis whitespace-nowrap"
+      >
+        <fluent-icon
+          size="16"
+          class="-mt-0.5 align-middle inline-block text-slate-600 dark:text-slate-300"
+          icon="info"
+        />
+        <span>
+          {{ $t(`CHAT_LIST.NO_MESSAGES`) }}
+        </span>
+      </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
+            :last-activity-timestamp="chat.timestamp"
+            :created-at-timestamp="chat.created_at"
+          />
+        </span>
+        <span
+          class="unread shadow-lg rounded-full hidden text-xxs font-semibold h-4 leading-4 ml-auto mt-1 min-w-[1rem] px-1 py-0 text-center text-white bg-green-400"
+        >
+          {{ unreadCount > 9 ? '9+' : unreadCount }}
+        </span>
+      </div>
+      <card-labels :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" />
+        </template>
+      </card-labels>
+    </div>
+    <woot-context-menu
+      v-if="showContextMenu"
+      ref="menu"
+      :x="contextMenu.x"
+      :y="contextMenu.y"
+      @close="closeContextMenu"
+    >
+      <conversation-context-menu
+        :status="chat.status"
+        :inbox-id="inbox.id"
+        :priority="chat.priority"
+        :chat-id="chat.id"
+        :has-unread-messages="hasUnread"
+        @update-conversation="onUpdateConversation"
+        @assign-agent="onAssignAgent"
+        @assign-label="onAssignLabel"
+        @assign-team="onAssignTeam"
+        @mark-as-unread="markAsUnread"
+        @assign-priority="assignPriority"
+      />
+    </woot-context-menu>
+  </div>
+</template>
 <style lang="scss" scoped>
 .conversation {
   &.unread-chat {
diff --git a/app/javascript/dashboard/components/widgets/conversation/ConversationHeader.vue b/app/javascript/dashboard/components/widgets/conversation/ConversationHeader.vue
index 64ae36824..a94d0f478 100644
--- a/app/javascript/dashboard/components/widgets/conversation/ConversationHeader.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/ConversationHeader.vue
@@ -1,85 +1,3 @@
-<template>
-  <div
-    class="flex flex-col items-center justify-between px-4 py-2 bg-white border-b dark:bg-slate-900 border-slate-50 dark:border-slate-800/50 md:flex-row"
-  >
-    <div
-      class="flex flex-col items-center justify-center flex-1 w-full min-w-0"
-      :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
-          v-if="showBackButton"
-          :back-url="backButtonUrl"
-          class="ltr:ml-0 rtl:mr-0 rtl:ml-4"
-        />
-        <Thumbnail
-          :src="currentContact.thumbnail"
-          :badge="inboxBadge"
-          :username="currentContact.name"
-          :status="currentContact.availability_status"
-        />
-        <div
-          class="flex flex-col items-start min-w-0 ml-2 overflow-hidden rtl:ml-0 rtl:mr-2 w-fit"
-        >
-          <div
-            class="flex flex-row items-center max-w-full gap-1 p-0 m-0 w-fit"
-          >
-            <woot-button
-              variant="link"
-              color-scheme="secondary"
-              class="[&>span]:overflow-hidden [&>span]:whitespace-nowrap [&>span]:text-ellipsis min-w-0"
-              @click.prevent="$emit('contact-panel-toggle')"
-            >
-              <span
-                class="text-base font-medium leading-tight text-slate-900 dark:text-slate-100"
-              >
-                {{ currentContact.name }}
-              </span>
-            </woot-button>
-            <fluent-icon
-              v-if="!isHMACVerified"
-              v-tooltip="$t('CONVERSATION.UNVERIFIED_SESSION')"
-              size="14"
-              class="text-yellow-600 dark:text-yellow-500 my-0 mx-0 min-w-[14px]"
-              icon="warning"
-            />
-          </div>
-
-          <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" />
-            <span
-              v-if="isSnoozed"
-              class="font-medium text-yellow-600 dark:text-yellow-500"
-            >
-              {{ snoozedDisplayText }}
-            </span>
-            <woot-button
-              class="p-0"
-              size="small"
-              variant="link"
-              @click="$emit('contact-panel-toggle')"
-            >
-              {{ contactPanelToggleText }}
-            </woot-button>
-          </div>
-        </div>
-      </div>
-      <div
-        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
-          v-if="isLinearIntegrationEnabled && isLinearFeatureEnabled"
-          :conversation-id="currentChat.id"
-        />
-        <more-actions :conversation-id="currentChat.id" />
-      </div>
-    </div>
-  </div>
-</template>
 <script>
 import { mapGetters } from 'vuex';
 import agentMixin from '../../../mixins/agentMixin.js';
@@ -212,6 +130,88 @@ export default {
   },
 };
 </script>
+<template>
+  <div
+    class="flex flex-col items-center justify-between px-4 py-2 bg-white border-b dark:bg-slate-900 border-slate-50 dark:border-slate-800/50 md:flex-row"
+  >
+    <div
+      class="flex flex-col items-center justify-center flex-1 w-full min-w-0"
+      :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
+          v-if="showBackButton"
+          :back-url="backButtonUrl"
+          class="ltr:ml-0 rtl:mr-0 rtl:ml-4"
+        />
+        <Thumbnail
+          :src="currentContact.thumbnail"
+          :badge="inboxBadge"
+          :username="currentContact.name"
+          :status="currentContact.availability_status"
+        />
+        <div
+          class="flex flex-col items-start min-w-0 ml-2 overflow-hidden rtl:ml-0 rtl:mr-2 w-fit"
+        >
+          <div
+            class="flex flex-row items-center max-w-full gap-1 p-0 m-0 w-fit"
+          >
+            <woot-button
+              variant="link"
+              color-scheme="secondary"
+              class="[&>span]:overflow-hidden [&>span]:whitespace-nowrap [&>span]:text-ellipsis min-w-0"
+              @click.prevent="$emit('contact-panel-toggle')"
+            >
+              <span
+                class="text-base font-medium leading-tight text-slate-900 dark:text-slate-100"
+              >
+                {{ currentContact.name }}
+              </span>
+            </woot-button>
+            <fluent-icon
+              v-if="!isHMACVerified"
+              v-tooltip="$t('CONVERSATION.UNVERIFIED_SESSION')"
+              size="14"
+              class="text-yellow-600 dark:text-yellow-500 my-0 mx-0 min-w-[14px]"
+              icon="warning"
+            />
+          </div>
+
+          <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" />
+            <span
+              v-if="isSnoozed"
+              class="font-medium text-yellow-600 dark:text-yellow-500"
+            >
+              {{ snoozedDisplayText }}
+            </span>
+            <woot-button
+              class="p-0"
+              size="small"
+              variant="link"
+              @click="$emit('contact-panel-toggle')"
+            >
+              {{ contactPanelToggleText }}
+            </woot-button>
+          </div>
+        </div>
+      </div>
+      <div
+        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
+          v-if="isLinearIntegrationEnabled && isLinearFeatureEnabled"
+          :conversation-id="currentChat.id"
+        />
+        <more-actions :conversation-id="currentChat.id" />
+      </div>
+    </div>
+  </div>
+</template>
 
 <style lang="scss" scoped>
 .conversation--header--actions {
diff --git a/app/javascript/dashboard/components/widgets/conversation/EmailTranscriptModal.vue b/app/javascript/dashboard/components/widgets/conversation/EmailTranscriptModal.vue
index 744972d03..3d1741fc9 100644
--- a/app/javascript/dashboard/components/widgets/conversation/EmailTranscriptModal.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/EmailTranscriptModal.vue
@@ -1,80 +1,3 @@
-<!-- eslint-disable vue/no-mutating-props -->
-<template>
-  <woot-modal :show.sync="show" :on-close="onCancel">
-    <div class="flex flex-col h-auto overflow-auto">
-      <woot-modal-header
-        :header-title="$t('EMAIL_TRANSCRIPT.TITLE')"
-        :header-content="$t('EMAIL_TRANSCRIPT.DESC')"
-      />
-      <form class="w-full" @submit.prevent="onSubmit">
-        <div class="w-full">
-          <div
-            v-if="currentChat.meta.sender && currentChat.meta.sender.email"
-            class="flex items-center gap-2"
-          >
-            <input
-              id="contact"
-              v-model="selectedType"
-              type="radio"
-              name="selectedType"
-              value="contact"
-            />
-            <label for="contact">{{
-              $t('EMAIL_TRANSCRIPT.FORM.SEND_TO_CONTACT')
-            }}</label>
-          </div>
-          <div v-if="currentChat.meta.assignee" class="flex items-center gap-2">
-            <input
-              id="assignee"
-              v-model="selectedType"
-              type="radio"
-              name="selectedType"
-              value="assignee"
-            />
-            <label for="assignee">{{
-              $t('EMAIL_TRANSCRIPT.FORM.SEND_TO_AGENT')
-            }}</label>
-          </div>
-          <div class="flex items-center gap-2">
-            <input
-              id="other_email_address"
-              v-model="selectedType"
-              type="radio"
-              name="selectedType"
-              value="other_email_address"
-            />
-            <label for="other_email_address">{{
-              $t('EMAIL_TRANSCRIPT.FORM.SEND_TO_OTHER_EMAIL_ADDRESS')
-            }}</label>
-          </div>
-          <div v-if="sentToOtherEmailAddress" class="w-[50%] mt-1">
-            <label :class="{ error: v$.email.$error }">
-              <input
-                v-model.trim="email"
-                type="text"
-                :placeholder="$t('EMAIL_TRANSCRIPT.FORM.EMAIL.PLACEHOLDER')"
-                @input="v$.email.$touch"
-              />
-              <span v-if="v$.email.$error" class="message">
-                {{ $t('EMAIL_TRANSCRIPT.FORM.EMAIL.ERROR') }}
-              </span>
-            </label>
-          </div>
-        </div>
-        <div class="flex flex-row justify-end w-full gap-2 px-0 py-2">
-          <woot-submit-button
-            :button-text="$t('EMAIL_TRANSCRIPT.SUBMIT')"
-            :disabled="!isFormValid"
-          />
-          <button class="button clear" @click.prevent="onCancel">
-            {{ $t('EMAIL_TRANSCRIPT.CANCEL') }}
-          </button>
-        </div>
-      </form>
-    </div>
-  </woot-modal>
-</template>
-
 <script>
 import { useVuelidate } from '@vuelidate/core';
 import { required, minLength, email } from '@vuelidate/validators';
@@ -156,3 +79,80 @@ export default {
   },
 };
 </script>
+
+<!-- eslint-disable vue/no-mutating-props -->
+<template>
+  <woot-modal :show.sync="show" :on-close="onCancel">
+    <div class="flex flex-col h-auto overflow-auto">
+      <woot-modal-header
+        :header-title="$t('EMAIL_TRANSCRIPT.TITLE')"
+        :header-content="$t('EMAIL_TRANSCRIPT.DESC')"
+      />
+      <form class="w-full" @submit.prevent="onSubmit">
+        <div class="w-full">
+          <div
+            v-if="currentChat.meta.sender && currentChat.meta.sender.email"
+            class="flex items-center gap-2"
+          >
+            <input
+              id="contact"
+              v-model="selectedType"
+              type="radio"
+              name="selectedType"
+              value="contact"
+            />
+            <label for="contact">{{
+              $t('EMAIL_TRANSCRIPT.FORM.SEND_TO_CONTACT')
+            }}</label>
+          </div>
+          <div v-if="currentChat.meta.assignee" class="flex items-center gap-2">
+            <input
+              id="assignee"
+              v-model="selectedType"
+              type="radio"
+              name="selectedType"
+              value="assignee"
+            />
+            <label for="assignee">{{
+              $t('EMAIL_TRANSCRIPT.FORM.SEND_TO_AGENT')
+            }}</label>
+          </div>
+          <div class="flex items-center gap-2">
+            <input
+              id="other_email_address"
+              v-model="selectedType"
+              type="radio"
+              name="selectedType"
+              value="other_email_address"
+            />
+            <label for="other_email_address">{{
+              $t('EMAIL_TRANSCRIPT.FORM.SEND_TO_OTHER_EMAIL_ADDRESS')
+            }}</label>
+          </div>
+          <div v-if="sentToOtherEmailAddress" class="w-[50%] mt-1">
+            <label :class="{ error: v$.email.$error }">
+              <input
+                v-model.trim="email"
+                type="text"
+                :placeholder="$t('EMAIL_TRANSCRIPT.FORM.EMAIL.PLACEHOLDER')"
+                @input="v$.email.$touch"
+              />
+              <span v-if="v$.email.$error" class="message">
+                {{ $t('EMAIL_TRANSCRIPT.FORM.EMAIL.ERROR') }}
+              </span>
+            </label>
+          </div>
+        </div>
+        <div class="flex flex-row justify-end w-full gap-2 px-0 py-2">
+          <woot-submit-button
+            :button-text="$t('EMAIL_TRANSCRIPT.SUBMIT')"
+            :disabled="!isFormValid"
+          />
+          <button class="button clear" @click.prevent="onCancel">
+            {{ $t('EMAIL_TRANSCRIPT.CANCEL') }}
+          </button>
+        </div>
+      </form>
+    </div>
+  </woot-modal>
+</template>
diff --git a/app/javascript/dashboard/components/widgets/conversation/EmptyState/EmptyState.vue b/app/javascript/dashboard/components/widgets/conversation/EmptyState/EmptyState.vue
index 7248b85a8..9ec354d09 100644
--- a/app/javascript/dashboard/components/widgets/conversation/EmptyState/EmptyState.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/EmptyState/EmptyState.vue
@@ -1,38 +1,3 @@
-<template>
-  <div :class="emptyClassName">
-    <woot-loading-state
-      v-if="uiFlags.isFetching || loadingChatList"
-      :message="loadingIndicatorMessage"
-    />
-    <!-- No inboxes attached -->
-    <div
-      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')"
-      />
-    </div>
-    <!-- Show empty state images if not loading -->
-
-    <div
-      v-else-if="!uiFlags.isFetching && !loadingChatList"
-      class="flex flex-col items-center justify-center h-full"
-    >
-      <!-- No conversations available -->
-      <empty-state-message
-        v-if="!allConversations.length"
-        :message="$t('CONVERSATION.NO_MESSAGE_1')"
-      />
-      <empty-state-message
-        v-else-if="allConversations.length && !currentChat.id"
-        :message="conversationMissingMessage"
-      />
-    </div>
-  </div>
-</template>
 <script>
 import { mapGetters } from 'vuex';
 import { useAdmin } from 'dashboard/composables/useAdmin';
@@ -95,3 +60,38 @@ export default {
   },
 };
 </script>
+<template>
+  <div :class="emptyClassName">
+    <woot-loading-state
+      v-if="uiFlags.isFetching || loadingChatList"
+      :message="loadingIndicatorMessage"
+    />
+    <!-- No inboxes attached -->
+    <div
+      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')"
+      />
+    </div>
+    <!-- Show empty state images if not loading -->
+
+    <div
+      v-else-if="!uiFlags.isFetching && !loadingChatList"
+      class="flex flex-col items-center justify-center h-full"
+    >
+      <!-- No conversations available -->
+      <empty-state-message
+        v-if="!allConversations.length"
+        :message="$t('CONVERSATION.NO_MESSAGE_1')"
+      />
+      <empty-state-message
+        v-else-if="allConversations.length && !currentChat.id"
+        :message="conversationMissingMessage"
+      />
+    </div>
+  </div>
+</template>
diff --git a/app/javascript/dashboard/components/widgets/conversation/EmptyState/EmptyStateMessage.vue b/app/javascript/dashboard/components/widgets/conversation/EmptyState/EmptyStateMessage.vue
index 209cd3440..2142a92a6 100644
--- a/app/javascript/dashboard/components/widgets/conversation/EmptyState/EmptyStateMessage.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/EmptyState/EmptyStateMessage.vue
@@ -1,3 +1,16 @@
+<script>
+import FeaturePlaceholder from './FeaturePlaceholder.vue';
+export default {
+  components: { FeaturePlaceholder },
+  props: {
+    message: {
+      type: String,
+      required: true,
+    },
+  },
+};
+</script>
+
 <template>
   <div class="flex flex-col items-center justify-center h-full">
     <img
@@ -20,16 +33,3 @@
     <feature-placeholder />
   </div>
 </template>
-
-<script>
-import FeaturePlaceholder from './FeaturePlaceholder.vue';
-export default {
-  components: { FeaturePlaceholder },
-  props: {
-    message: {
-      type: String,
-      required: true,
-    },
-  },
-};
-</script>
diff --git a/app/javascript/dashboard/components/widgets/conversation/EmptyState/FeaturePlaceholder.vue b/app/javascript/dashboard/components/widgets/conversation/EmptyState/FeaturePlaceholder.vue
index 127e42c61..9b8419746 100644
--- a/app/javascript/dashboard/components/widgets/conversation/EmptyState/FeaturePlaceholder.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/EmptyState/FeaturePlaceholder.vue
@@ -1,3 +1,27 @@
+<script>
+import Hotkey from 'dashboard/components/base/Hotkey.vue';
+
+export default {
+  components: {
+    Hotkey,
+  },
+  data() {
+    return {
+      keyShortcuts: [
+        {
+          key: 'K',
+          description: this.$t('CONVERSATION.EMPTY_STATE.CMD_BAR'),
+        },
+        {
+          key: '/',
+          description: this.$t('CONVERSATION.EMPTY_STATE.KEYBOARD_SHORTCUTS'),
+        },
+      ],
+    };
+  },
+};
+</script>
+
 <template>
   <div class="flex flex-col gap-2 mt-9">
     <div
@@ -25,27 +49,3 @@
     </div>
   </div>
 </template>
-
-<script>
-import Hotkey from 'dashboard/components/base/Hotkey.vue';
-
-export default {
-  components: {
-    Hotkey,
-  },
-  data() {
-    return {
-      keyShortcuts: [
-        {
-          key: 'K',
-          description: this.$t('CONVERSATION.EMPTY_STATE.CMD_BAR'),
-        },
-        {
-          key: '/',
-          description: this.$t('CONVERSATION.EMPTY_STATE.KEYBOARD_SHORTCUTS'),
-        },
-      ],
-    };
-  },
-};
-</script>
diff --git a/app/javascript/dashboard/components/widgets/conversation/FilterItem.vue b/app/javascript/dashboard/components/widgets/conversation/FilterItem.vue
index c324b823a..91c919b1d 100644
--- a/app/javascript/dashboard/components/widgets/conversation/FilterItem.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/FilterItem.vue
@@ -1,14 +1,3 @@
-<template>
-  <select
-    v-model="activeValue"
-    class="bg-slate-25 dark:bg-slate-700 text-xs h-6 my-0 mx-1 py-0 pr-6 pl-2 w-32 border border-solid border-slate-75 dark:border-slate-600 text-slate-800 dark:text-slate-100"
-    @change="onTabChange()"
-  >
-    <option v-for="(value, status) in items" :key="status" :value="status">
-      {{ $t(`${pathPrefix}.${status}.TEXT`) }}
-    </option>
-  </select>
-</template>
 <script>
 export default {
   props: {
@@ -46,3 +35,14 @@ export default {
   },
 };
 </script>
+<template>
+  <select
+    v-model="activeValue"
+    class="bg-slate-25 dark:bg-slate-700 text-xs h-6 my-0 mx-1 py-0 pr-6 pl-2 w-32 border border-solid border-slate-75 dark:border-slate-600 text-slate-800 dark:text-slate-100"
+    @change="onTabChange()"
+  >
+    <option v-for="(value, status) in items" :key="status" :value="status">
+      {{ $t(`${pathPrefix}.${status}.TEXT`) }}
+    </option>
+  </select>
+</template>
diff --git a/app/javascript/dashboard/components/widgets/conversation/Message.vue b/app/javascript/dashboard/components/widgets/conversation/Message.vue
index b7b578cee..9037a1cf5 100644
--- a/app/javascript/dashboard/components/widgets/conversation/Message.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/Message.vue
@@ -1,147 +1,3 @@
-<template>
-  <li
-    v-if="shouldRenderMessage"
-    :id="`message${data.id}`"
-    :class="[alignBubble, 'group']"
-  >
-    <div :class="wrapClass">
-      <div
-        v-if="isFailed && !hasOneDayPassed && !isAnEmailInbox"
-        class="message-failed--alert"
-      >
-        <woot-button
-          v-tooltip.top-end="$t('CONVERSATION.TRY_AGAIN')"
-          size="tiny"
-          color-scheme="alert"
-          variant="clear"
-          icon="arrow-clockwise"
-          @click="retrySendMessage"
-        />
-      </div>
-      <div :class="bubbleClass" @contextmenu="openContextMenu($event)">
-        <bubble-mail-head
-          :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
-          v-if="inReplyToMessageId && inboxSupportsReplyTo.incoming"
-          :message="inReplyTo"
-          :message-type="data.message_type"
-          :parent-has-attachments="hasAttachments"
-        />
-        <div v-if="isUnsupported">
-          <template v-if="isAFacebookInbox && isInstagram">
-            {{ $t('CONVERSATION.UNSUPPORTED_MESSAGE_INSTAGRAM') }}
-          </template>
-          <template v-else-if="isAFacebookInbox">
-            {{ $t('CONVERSATION.UNSUPPORTED_MESSAGE_FACEBOOK') }}
-          </template>
-          <template v-else>
-            {{ $t('CONVERSATION.UNSUPPORTED_MESSAGE') }}
-          </template>
-        </div>
-        <bubble-text
-          v-else-if="data.content"
-          :message="message"
-          :is-email="isEmailContentType"
-          :display-quoted-button="displayQuotedButton"
-        />
-        <bubble-integration
-          :message-id="data.id"
-          :content-attributes="contentAttributes"
-          :inbox-id="data.inbox_id"
-        />
-        <span
-          v-if="isPending && hasAttachments"
-          class="chat-bubble has-attachment agent"
-        >
-          {{ $t('CONVERSATION.UPLOADING_ATTACHMENTS') }}
-        </span>
-        <div v-if="!isPending && hasAttachments">
-          <div v-for="attachment in attachments" :key="attachment.id">
-            <instagram-story
-              v-if="isAnInstagramStory"
-              :story-url="attachment.data_url"
-              @error="onMediaLoadError"
-            />
-            <bubble-image-audio-video
-              v-else-if="isAttachmentImageVideoAudio(attachment.file_type)"
-              :attachment="attachment"
-              @error="onMediaLoadError"
-            />
-            <bubble-location
-              v-else-if="attachment.file_type === 'location'"
-              :latitude="attachment.coordinates_lat"
-              :longitude="attachment.coordinates_long"
-              :name="attachment.fallback_title"
-            />
-            <bubble-contact
-              v-else-if="attachment.file_type === 'contact'"
-              :name="data.content"
-              :phone-number="attachment.fallback_title"
-            />
-            <bubble-file v-else :url="attachment.data_url" />
-          </div>
-        </div>
-        <bubble-actions
-          :id="data.id"
-          :sender="data.sender"
-          :story-sender="storySender"
-          :external-error="errorMessageTooltip"
-          :story-id="`${storyId}`"
-          :is-a-tweet="isATweet"
-          :is-a-whatsapp-channel="isAWhatsAppChannel"
-          :is-email="isEmailContentType"
-          :is-private="data.private"
-          :message-type="data.message_type"
-          :message-status="status"
-          :source-id="data.source_id"
-          :inbox-id="data.inbox_id"
-          :created-at="createdAt"
-        />
-      </div>
-      <spinner v-if="isPending" size="tiny" />
-      <div
-        v-if="showAvatar"
-        v-tooltip.left="tooltipForSender"
-        class="sender--info"
-      >
-        <woot-thumbnail
-          :src="sender.thumbnail"
-          :username="senderNameForAvatar"
-          size="16px"
-        />
-        <a
-          v-if="isATweet && isIncoming"
-          class="sender--available-name"
-          :href="twitterProfileLink"
-          target="_blank"
-          rel="noopener noreferrer nofollow"
-        >
-          {{ sender.name }}
-        </a>
-      </div>
-    </div>
-    <div
-      v-if="shouldShowContextMenu"
-      class="invisible context-menu-wrap group-hover:visible"
-    >
-      <context-menu
-        v-if="isBubble && !isMessageDeleted"
-        :context-menu-position="contextMenuPosition"
-        :is-open="showContextMenu"
-        :enabled-options="contextMenuEnabledOptions"
-        :message="data"
-        @open="openContextMenu"
-        @close="closeContextMenu"
-        @replyTo="handleReplyTo"
-      />
-    </div>
-  </li>
-</template>
 <script>
 import messageFormatterMixin from 'shared/mixins/messageFormatterMixin';
 import BubbleActions from './bubble/Actions.vue';
@@ -582,6 +438,150 @@ export default {
   },
 };
 </script>
+<template>
+  <li
+    v-if="shouldRenderMessage"
+    :id="`message${data.id}`"
+    :class="[alignBubble, 'group']"
+  >
+    <div :class="wrapClass">
+      <div
+        v-if="isFailed && !hasOneDayPassed && !isAnEmailInbox"
+        class="message-failed--alert"
+      >
+        <woot-button
+          v-tooltip.top-end="$t('CONVERSATION.TRY_AGAIN')"
+          size="tiny"
+          color-scheme="alert"
+          variant="clear"
+          icon="arrow-clockwise"
+          @click="retrySendMessage"
+        />
+      </div>
+      <div :class="bubbleClass" @contextmenu="openContextMenu($event)">
+        <bubble-mail-head
+          :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
+          v-if="inReplyToMessageId && inboxSupportsReplyTo.incoming"
+          :message="inReplyTo"
+          :message-type="data.message_type"
+          :parent-has-attachments="hasAttachments"
+        />
+        <div v-if="isUnsupported">
+          <template v-if="isAFacebookInbox && isInstagram">
+            {{ $t('CONVERSATION.UNSUPPORTED_MESSAGE_INSTAGRAM') }}
+          </template>
+          <template v-else-if="isAFacebookInbox">
+            {{ $t('CONVERSATION.UNSUPPORTED_MESSAGE_FACEBOOK') }}
+          </template>
+          <template v-else>
+            {{ $t('CONVERSATION.UNSUPPORTED_MESSAGE') }}
+          </template>
+        </div>
+        <bubble-text
+          v-else-if="data.content"
+          :message="message"
+          :is-email="isEmailContentType"
+          :display-quoted-button="displayQuotedButton"
+        />
+        <bubble-integration
+          :message-id="data.id"
+          :content-attributes="contentAttributes"
+          :inbox-id="data.inbox_id"
+        />
+        <span
+          v-if="isPending && hasAttachments"
+          class="chat-bubble has-attachment agent"
+        >
+          {{ $t('CONVERSATION.UPLOADING_ATTACHMENTS') }}
+        </span>
+        <div v-if="!isPending && hasAttachments">
+          <div v-for="attachment in attachments" :key="attachment.id">
+            <instagram-story
+              v-if="isAnInstagramStory"
+              :story-url="attachment.data_url"
+              @error="onMediaLoadError"
+            />
+            <bubble-image-audio-video
+              v-else-if="isAttachmentImageVideoAudio(attachment.file_type)"
+              :attachment="attachment"
+              @error="onMediaLoadError"
+            />
+            <bubble-location
+              v-else-if="attachment.file_type === 'location'"
+              :latitude="attachment.coordinates_lat"
+              :longitude="attachment.coordinates_long"
+              :name="attachment.fallback_title"
+            />
+            <bubble-contact
+              v-else-if="attachment.file_type === 'contact'"
+              :name="data.content"
+              :phone-number="attachment.fallback_title"
+            />
+            <bubble-file v-else :url="attachment.data_url" />
+          </div>
+        </div>
+        <bubble-actions
+          :id="data.id"
+          :sender="data.sender"
+          :story-sender="storySender"
+          :external-error="errorMessageTooltip"
+          :story-id="`${storyId}`"
+          :is-a-tweet="isATweet"
+          :is-a-whatsapp-channel="isAWhatsAppChannel"
+          :is-email="isEmailContentType"
+          :is-private="data.private"
+          :message-type="data.message_type"
+          :message-status="status"
+          :source-id="data.source_id"
+          :inbox-id="data.inbox_id"
+          :created-at="createdAt"
+        />
+      </div>
+      <spinner v-if="isPending" size="tiny" />
+      <div
+        v-if="showAvatar"
+        v-tooltip.left="tooltipForSender"
+        class="sender--info"
+      >
+        <woot-thumbnail
+          :src="sender.thumbnail"
+          :username="senderNameForAvatar"
+          size="16px"
+        />
+        <a
+          v-if="isATweet && isIncoming"
+          class="sender--available-name"
+          :href="twitterProfileLink"
+          target="_blank"
+          rel="noopener noreferrer nofollow"
+        >
+          {{ sender.name }}
+        </a>
+      </div>
+    </div>
+    <div
+      v-if="shouldShowContextMenu"
+      class="invisible context-menu-wrap group-hover:visible"
+    >
+      <context-menu
+        v-if="isBubble && !isMessageDeleted"
+        :context-menu-position="contextMenuPosition"
+        :is-open="showContextMenu"
+        :enabled-options="contextMenuEnabledOptions"
+        :message="data"
+        @open="openContextMenu"
+        @close="closeContextMenu"
+        @replyTo="handleReplyTo"
+      />
+    </div>
+  </li>
+</template>
 <style lang="scss">
 .wrap {
   > .bubble {
diff --git a/app/javascript/dashboard/components/widgets/conversation/MessagePreview.vue b/app/javascript/dashboard/components/widgets/conversation/MessagePreview.vue
index 22d69439e..af1c3e06d 100644
--- a/app/javascript/dashboard/components/widgets/conversation/MessagePreview.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/MessagePreview.vue
@@ -1,51 +1,3 @@
-<template>
-  <div class="overflow-hidden text-ellipsis whitespace-nowrap">
-    <template v-if="showMessageType">
-      <fluent-icon
-        v-if="isMessagePrivate"
-        size="16"
-        class="-mt-0.5 align-middle text-slate-600 dark:text-slate-300 inline-block"
-        icon="lock-closed"
-      />
-      <fluent-icon
-        v-else-if="messageByAgent"
-        size="16"
-        class="-mt-0.5 align-middle text-slate-600 dark:text-slate-300 inline-block"
-        icon="arrow-reply"
-      />
-      <fluent-icon
-        v-else-if="isMessageAnActivity"
-        size="16"
-        class="-mt-0.5 align-middle text-slate-600 dark:text-slate-300 inline-block"
-        icon="info"
-      />
-    </template>
-    <span v-if="message.content && isMessageSticker">
-      <fluent-icon
-        size="16"
-        class="-mt-0.5 align-middle inline-block text-slate-600 dark:text-slate-300"
-        icon="image"
-      />
-      {{ $t('CHAT_LIST.ATTACHMENTS.image.CONTENT') }}
-    </span>
-    <span v-else-if="message.content">
-      {{ parsedLastMessage }}
-    </span>
-    <span v-else-if="message.attachments">
-      <fluent-icon
-        v-if="attachmentIcon && showMessageType"
-        size="16"
-        class="-mt-0.5 align-middle inline-block text-slate-600 dark:text-slate-300"
-        :icon="attachmentIcon"
-      />
-      {{ $t(`${attachmentMessageContent}`) }}
-    </span>
-    <span v-else>
-      {{ defaultEmptyMessage || $t('CHAT_LIST.NO_CONTENT') }}
-    </span>
-  </div>
-</template>
-
 <script>
 import { MESSAGE_TYPE } from 'widget/helpers/constants';
 import messageFormatterMixin from 'shared/mixins/messageFormatterMixin';
@@ -102,3 +54,51 @@ export default {
   },
 };
 </script>
+
+<template>
+  <div class="overflow-hidden text-ellipsis whitespace-nowrap">
+    <template v-if="showMessageType">
+      <fluent-icon
+        v-if="isMessagePrivate"
+        size="16"
+        class="-mt-0.5 align-middle text-slate-600 dark:text-slate-300 inline-block"
+        icon="lock-closed"
+      />
+      <fluent-icon
+        v-else-if="messageByAgent"
+        size="16"
+        class="-mt-0.5 align-middle text-slate-600 dark:text-slate-300 inline-block"
+        icon="arrow-reply"
+      />
+      <fluent-icon
+        v-else-if="isMessageAnActivity"
+        size="16"
+        class="-mt-0.5 align-middle text-slate-600 dark:text-slate-300 inline-block"
+        icon="info"
+      />
+    </template>
+    <span v-if="message.content && isMessageSticker">
+      <fluent-icon
+        size="16"
+        class="-mt-0.5 align-middle inline-block text-slate-600 dark:text-slate-300"
+        icon="image"
+      />
+      {{ $t('CHAT_LIST.ATTACHMENTS.image.CONTENT') }}
+    </span>
+    <span v-else-if="message.content">
+      {{ parsedLastMessage }}
+    </span>
+    <span v-else-if="message.attachments">
+      <fluent-icon
+        v-if="attachmentIcon && showMessageType"
+        size="16"
+        class="-mt-0.5 align-middle inline-block text-slate-600 dark:text-slate-300"
+        :icon="attachmentIcon"
+      />
+      {{ $t(`${attachmentMessageContent}`) }}
+    </span>
+    <span v-else>
+      {{ defaultEmptyMessage || $t('CHAT_LIST.NO_CONTENT') }}
+    </span>
+  </div>
+</template>
diff --git a/app/javascript/dashboard/components/widgets/conversation/MessageSignatureMissingAlert.vue b/app/javascript/dashboard/components/widgets/conversation/MessageSignatureMissingAlert.vue
index 81e4531af..d2f9a1351 100644
--- a/app/javascript/dashboard/components/widgets/conversation/MessageSignatureMissingAlert.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/MessageSignatureMissingAlert.vue
@@ -1,3 +1,13 @@
+<script>
+export default {
+  methods: {
+    openProfileSettings() {
+      return this.$router.push({ name: 'profile_settings_index' });
+    },
+  },
+};
+</script>
+
 <template>
   <div
     class="my-0 mx-4 px-1 flex max-h-[8vh] items-baseline justify-between hover:bg-slate-25 dark:hover:bg-slate-800 border border-dashed border-slate-100 dark:border-slate-700 rounded-sm overflow-auto"
@@ -15,14 +25,4 @@
   </div>
 </template>
 
-<script>
-export default {
-  methods: {
-    openProfileSettings() {
-      return this.$router.push({ name: 'profile_settings_index' });
-    },
-  },
-};
-</script>
-
 <style></style>
diff --git a/app/javascript/dashboard/components/widgets/conversation/MessagesView.vue b/app/javascript/dashboard/components/widgets/conversation/MessagesView.vue
index df61e9de1..ffbb86527 100644
--- a/app/javascript/dashboard/components/widgets/conversation/MessagesView.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/MessagesView.vue
@@ -1,105 +1,3 @@
-<template>
-  <div class="flex flex-col justify-between flex-grow h-full min-w-0 m-0">
-    <banner
-      v-if="!currentChat.can_reply"
-      color-scheme="alert"
-      :banner-message="replyWindowBannerMessage"
-      :href-link="replyWindowLink"
-      :href-link-text="replyWindowLinkText"
-    />
-    <div class="flex justify-end">
-      <woot-button
-        variant="smooth"
-        size="tiny"
-        color-scheme="secondary"
-        class="rounded-bl-calc rtl:rotate-180 rounded-tl-calc fixed z-10 bg-white dark:bg-slate-700 border-slate-50 dark:border-slate-600 border-solid border border-r-0 box-border"
-        :class="
-          isInboxView ? 'top-52 md:top-40' : 'top-[9.5rem] md:top-[6.25rem]'
-        "
-        :icon="isRightOrLeftIcon"
-        @click="onToggleContactPanel"
-      />
-    </div>
-    <ul class="conversation-panel">
-      <transition name="slide-up">
-        <li class="min-h-[4rem]">
-          <span v-if="shouldShowSpinner" class="spinner message" />
-        </li>
-      </transition>
-      <message
-        v-for="message in getReadMessages"
-        :key="message.id"
-        class="message--read ph-no-capture"
-        data-clarity-mask="True"
-        :data="message"
-        :is-a-tweet="isATweet"
-        :is-a-whatsapp-channel="isAWhatsAppChannel"
-        :is-web-widget-inbox="isAWebWidgetInbox"
-        :is-a-facebook-inbox="isAFacebookInbox"
-        :is-an-email-inbox="isAnEmailChannel"
-        :is-instagram="isInstagramDM"
-        :inbox-supports-reply-to="inboxSupportsReplyTo"
-        :in-reply-to="getInReplyToMessage(message)"
-      />
-      <li v-show="unreadMessageCount != 0" class="unread--toast">
-        <span>
-          {{ unreadMessageCount > 9 ? '9+' : unreadMessageCount }}
-          {{
-            unreadMessageCount > 1
-              ? $t('CONVERSATION.UNREAD_MESSAGES')
-              : $t('CONVERSATION.UNREAD_MESSAGE')
-          }}
-        </span>
-      </li>
-      <message
-        v-for="message in getUnReadMessages"
-        :key="message.id"
-        class="message--unread ph-no-capture"
-        data-clarity-mask="True"
-        :data="message"
-        :is-a-tweet="isATweet"
-        :is-a-whatsapp-channel="isAWhatsAppChannel"
-        :is-web-widget-inbox="isAWebWidgetInbox"
-        :is-a-facebook-inbox="isAFacebookInbox"
-        :is-instagram-dm="isInstagramDM"
-        :inbox-supports-reply-to="inboxSupportsReplyTo"
-        :in-reply-to="getInReplyToMessage(message)"
-      />
-      <conversation-label-suggestion
-        v-if="shouldShowLabelSuggestions"
-        :suggested-labels="labelSuggestions"
-        :chat-labels="currentChat.labels"
-        :conversation-id="currentChat.id"
-      />
-    </ul>
-    <div
-      class="conversation-footer"
-      :class="{ 'modal-mask': isPopoutReplyBox }"
-    >
-      <div
-        v-if="isAnyoneTyping"
-        class="items-center flex h-0 absolute w-full -top-7"
-      >
-        <div
-          class="flex py-2 pr-4 pl-5 shadow-md rounded-full bg-white dark:bg-slate-700 text-slate-800 dark:text-slate-100 text-xs font-semibold my-2.5 mx-auto"
-        >
-          {{ typingUserNames }}
-          <img
-            class="ltr:ml-2 rtl:mr-2 w-6"
-            src="~dashboard/assets/images/typing.gif"
-            alt="Someone is typing"
-          />
-        </div>
-      </div>
-      <reply-box
-        :conversation-id="currentChat.id"
-        :popout-reply-box.sync="isPopoutReplyBox"
-        @click="showPopoutReplyBox"
-      />
-    </div>
-  </div>
-</template>
-
 <script>
 // components
 import ReplyBox from './ReplyBox.vue';
@@ -538,6 +436,108 @@ export default {
 };
 </script>
 
+<template>
+  <div class="flex flex-col justify-between flex-grow h-full min-w-0 m-0">
+    <banner
+      v-if="!currentChat.can_reply"
+      color-scheme="alert"
+      :banner-message="replyWindowBannerMessage"
+      :href-link="replyWindowLink"
+      :href-link-text="replyWindowLinkText"
+    />
+    <div class="flex justify-end">
+      <woot-button
+        variant="smooth"
+        size="tiny"
+        color-scheme="secondary"
+        class="rounded-bl-calc rtl:rotate-180 rounded-tl-calc fixed z-10 bg-white dark:bg-slate-700 border-slate-50 dark:border-slate-600 border-solid border border-r-0 box-border"
+        :class="
+          isInboxView ? 'top-52 md:top-40' : 'top-[9.5rem] md:top-[6.25rem]'
+        "
+        :icon="isRightOrLeftIcon"
+        @click="onToggleContactPanel"
+      />
+    </div>
+    <ul class="conversation-panel">
+      <transition name="slide-up">
+        <li class="min-h-[4rem]">
+          <span v-if="shouldShowSpinner" class="spinner message" />
+        </li>
+      </transition>
+      <message
+        v-for="message in getReadMessages"
+        :key="message.id"
+        class="message--read ph-no-capture"
+        data-clarity-mask="True"
+        :data="message"
+        :is-a-tweet="isATweet"
+        :is-a-whatsapp-channel="isAWhatsAppChannel"
+        :is-web-widget-inbox="isAWebWidgetInbox"
+        :is-a-facebook-inbox="isAFacebookInbox"
+        :is-an-email-inbox="isAnEmailChannel"
+        :is-instagram="isInstagramDM"
+        :inbox-supports-reply-to="inboxSupportsReplyTo"
+        :in-reply-to="getInReplyToMessage(message)"
+      />
+      <li v-show="unreadMessageCount != 0" class="unread--toast">
+        <span>
+          {{ unreadMessageCount > 9 ? '9+' : unreadMessageCount }}
+          {{
+            unreadMessageCount > 1
+              ? $t('CONVERSATION.UNREAD_MESSAGES')
+              : $t('CONVERSATION.UNREAD_MESSAGE')
+          }}
+        </span>
+      </li>
+      <message
+        v-for="message in getUnReadMessages"
+        :key="message.id"
+        class="message--unread ph-no-capture"
+        data-clarity-mask="True"
+        :data="message"
+        :is-a-tweet="isATweet"
+        :is-a-whatsapp-channel="isAWhatsAppChannel"
+        :is-web-widget-inbox="isAWebWidgetInbox"
+        :is-a-facebook-inbox="isAFacebookInbox"
+        :is-instagram-dm="isInstagramDM"
+        :inbox-supports-reply-to="inboxSupportsReplyTo"
+        :in-reply-to="getInReplyToMessage(message)"
+      />
+      <conversation-label-suggestion
+        v-if="shouldShowLabelSuggestions"
+        :suggested-labels="labelSuggestions"
+        :chat-labels="currentChat.labels"
+        :conversation-id="currentChat.id"
+      />
+    </ul>
+    <div
+      class="conversation-footer"
+      :class="{ 'modal-mask': isPopoutReplyBox }"
+    >
+      <div
+        v-if="isAnyoneTyping"
+        class="items-center flex h-0 absolute w-full -top-7"
+      >
+        <div
+          class="flex py-2 pr-4 pl-5 shadow-md rounded-full bg-white dark:bg-slate-700 text-slate-800 dark:text-slate-100 text-xs font-semibold my-2.5 mx-auto"
+        >
+          {{ typingUserNames }}
+          <img
+            class="ltr:ml-2 rtl:mr-2 w-6"
+            src="~dashboard/assets/images/typing.gif"
+            alt="Someone is typing"
+          />
+        </div>
+      </div>
+      <reply-box
+        :conversation-id="currentChat.id"
+        :popout-reply-box.sync="isPopoutReplyBox"
+        @click="showPopoutReplyBox"
+      />
+    </div>
+  </div>
+</template>
+
 <style scoped>
 @tailwind components;
 @layer components {
diff --git a/app/javascript/dashboard/components/widgets/conversation/MoreActions.vue b/app/javascript/dashboard/components/widgets/conversation/MoreActions.vue
index b0786ed3d..1ef0973d3 100644
--- a/app/javascript/dashboard/components/widgets/conversation/MoreActions.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/MoreActions.vue
@@ -1,40 +1,3 @@
-<template>
-  <div class="relative flex items-center gap-2 actions--container">
-    <woot-button
-      v-if="!currentChat.muted"
-      v-tooltip="$t('CONTACT_PANEL.MUTE_CONTACT')"
-      variant="clear"
-      color-scheme="secondary"
-      icon="speaker-mute"
-      @click="mute"
-    />
-    <woot-button
-      v-else
-      v-tooltip.left="$t('CONTACT_PANEL.UNMUTE_CONTACT')"
-      variant="clear"
-      color-scheme="secondary"
-      icon="speaker-1"
-      @click="unmute"
-    />
-    <woot-button
-      v-tooltip="$t('CONTACT_PANEL.SEND_TRANSCRIPT')"
-      variant="clear"
-      color-scheme="secondary"
-      icon="share"
-      @click="toggleEmailActionsModal"
-    />
-    <resolve-action
-      :conversation-id="currentChat.id"
-      :status="currentChat.status"
-    />
-    <email-transcript-modal
-      v-if="showEmailActionsModal"
-      :show="showEmailActionsModal"
-      :current-chat="currentChat"
-      @cancel="toggleEmailActionsModal"
-    />
-  </div>
-</template>
 <script>
 import { mapGetters } from 'vuex';
 import { useAlert } from 'dashboard/composables';
@@ -84,6 +47,43 @@ export default {
   },
 };
 </script>
+<template>
+  <div class="relative flex items-center gap-2 actions--container">
+    <woot-button
+      v-if="!currentChat.muted"
+      v-tooltip="$t('CONTACT_PANEL.MUTE_CONTACT')"
+      variant="clear"
+      color-scheme="secondary"
+      icon="speaker-mute"
+      @click="mute"
+    />
+    <woot-button
+      v-else
+      v-tooltip.left="$t('CONTACT_PANEL.UNMUTE_CONTACT')"
+      variant="clear"
+      color-scheme="secondary"
+      icon="speaker-1"
+      @click="unmute"
+    />
+    <woot-button
+      v-tooltip="$t('CONTACT_PANEL.SEND_TRANSCRIPT')"
+      variant="clear"
+      color-scheme="secondary"
+      icon="share"
+      @click="toggleEmailActionsModal"
+    />
+    <resolve-action
+      :conversation-id="currentChat.id"
+      :status="currentChat.status"
+    />
+    <email-transcript-modal
+      v-if="showEmailActionsModal"
+      :show="showEmailActionsModal"
+      :current-chat="currentChat"
+      @cancel="toggleEmailActionsModal"
+    />
+  </div>
+</template>
 <style scoped lang="scss">
 .more--button {
   @apply items-center flex ml-2 rtl:ml-0 rtl:mr-2;
diff --git a/app/javascript/dashboard/components/widgets/conversation/OnboardingView.vue b/app/javascript/dashboard/components/widgets/conversation/OnboardingView.vue
index 5824da0bd..aed0b9f25 100644
--- a/app/javascript/dashboard/components/widgets/conversation/OnboardingView.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/OnboardingView.vue
@@ -1,3 +1,23 @@
+<script>
+import { mapGetters } from 'vuex';
+import accountMixin from '../../../mixins/account';
+
+export default {
+  mixins: [accountMixin],
+  computed: {
+    ...mapGetters({ globalConfig: 'globalConfig/get' }),
+    newInboxURL() {
+      return this.addAccountScoping('settings/inboxes/new');
+    },
+    newAgentURL() {
+      return this.addAccountScoping('settings/agents/list');
+    },
+    newLabelsURL() {
+      return this.addAccountScoping('settings/labels/list');
+    },
+  },
+};
+</script>
 <template>
   <div class="onboarding-wrap">
     <div class="onboarding">
@@ -78,26 +98,6 @@
     </div>
   </div>
 </template>
-<script>
-import { mapGetters } from 'vuex';
-import accountMixin from '../../../mixins/account';
-
-export default {
-  mixins: [accountMixin],
-  computed: {
-    ...mapGetters({ globalConfig: 'globalConfig/get' }),
-    newInboxURL() {
-      return this.addAccountScoping('settings/inboxes/new');
-    },
-    newAgentURL() {
-      return this.addAccountScoping('settings/agents/list');
-    },
-    newLabelsURL() {
-      return this.addAccountScoping('settings/labels/list');
-    },
-  },
-};
-</script>
 <style lang="scss" scoped>
 .onboarding-wrap {
   display: flex;
diff --git a/app/javascript/dashboard/components/widgets/conversation/PriorityMark.vue b/app/javascript/dashboard/components/widgets/conversation/PriorityMark.vue
index 3a0e2b63a..398dc013a 100644
--- a/app/javascript/dashboard/components/widgets/conversation/PriorityMark.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/PriorityMark.vue
@@ -1,27 +1,3 @@
-<template>
-  <span
-    v-if="priority"
-    v-tooltip="{
-      content: tooltipText,
-      delay: { show: 1500, hide: 0 },
-      hideOnClick: true,
-    }"
-    class="shrink-0 rounded-sm inline-flex w-3.5 h-3.5"
-    :class="{
-      'bg-red-50 dark:bg-red-700 dark:bg-opacity-30 text-red-500 dark:text-red-600':
-        isUrgent,
-      'bg-slate-50 dark:bg-slate-700 text-slate-600 dark:text-slate-200':
-        !isUrgent,
-    }"
-  >
-    <fluent-icon
-      :icon="`priority-${priority.toLowerCase()}`"
-      size="14"
-      view-box="0 0 14 14"
-    />
-  </span>
-</template>
-
 <script>
 import { CONVERSATION_PRIORITY } from '../../../../shared/constants/messages';
 
@@ -52,3 +28,27 @@ export default {
   },
 };
 </script>
+
+<template>
+  <span
+    v-if="priority"
+    v-tooltip="{
+      content: tooltipText,
+      delay: { show: 1500, hide: 0 },
+      hideOnClick: true,
+    }"
+    class="shrink-0 rounded-sm inline-flex w-3.5 h-3.5"
+    :class="{
+      'bg-red-50 dark:bg-red-700 dark:bg-opacity-30 text-red-500 dark:text-red-600':
+        isUrgent,
+      'bg-slate-50 dark:bg-slate-700 text-slate-600 dark:text-slate-200':
+        !isUrgent,
+    }"
+  >
+    <fluent-icon
+      :icon="`priority-${priority.toLowerCase()}`"
+      size="14"
+      view-box="0 0 14 14"
+    />
+  </span>
+</template>
diff --git a/app/javascript/dashboard/components/widgets/conversation/ReplyBox.vue b/app/javascript/dashboard/components/widgets/conversation/ReplyBox.vue
index 0e1061d57..a3b851490 100644
--- a/app/javascript/dashboard/components/widgets/conversation/ReplyBox.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/ReplyBox.vue
@@ -1,156 +1,3 @@
-<template>
-  <div class="reply-box" :class="replyBoxClass">
-    <banner
-      v-if="showSelfAssignBanner"
-      action-button-variant="clear"
-      color-scheme="secondary"
-      class="banner--self-assign"
-      :banner-message="$t('CONVERSATION.NOT_ASSIGNED_TO_YOU')"
-      :has-action-button="true"
-      :action-button-label="$t('CONVERSATION.ASSIGN_TO_ME')"
-      @click="onClickSelfAssign"
-    />
-    <reply-top-panel
-      :mode="replyType"
-      :set-reply-mode="setReplyMode"
-      :is-message-length-reaching-threshold="isMessageLengthReachingThreshold"
-      :characters-remaining="charactersRemaining"
-      :popout-reply-box="popoutReplyBox"
-      @click="$emit('click')"
-    />
-    <article-search-popover
-      v-if="showArticleSearchPopover && connectedPortalSlug"
-      :selected-portal-slug="connectedPortalSlug"
-      @insert="handleInsert"
-      @close="onSearchPopoverClose"
-    />
-    <div class="reply-box__top">
-      <reply-to-message
-        v-if="shouldShowReplyToMessage"
-        :message="inReplyTo"
-        @dismiss="resetReplyToMessage"
-      />
-      <canned-response
-        v-if="showMentions && hasSlashCommand"
-        v-on-clickaway="hideMentions"
-        class="normal-editor__canned-box"
-        :search-key="mentionSearchKey"
-        @click="replaceText"
-      />
-      <emoji-input
-        v-if="showEmojiPicker"
-        v-on-clickaway="hideEmojiPicker"
-        :class="emojiDialogClassOnExpandedLayoutAndRTLView"
-        :on-click="addIntoEditor"
-      />
-      <reply-email-head
-        v-if="showReplyHead"
-        :cc-emails.sync="ccEmails"
-        :bcc-emails.sync="bccEmails"
-        :to-emails.sync="toEmails"
-      />
-      <woot-audio-recorder
-        v-if="showAudioRecorderEditor"
-        ref="audioRecorderInput"
-        :audio-record-format="audioRecordFormat"
-        @state-recorder-progress-changed="onStateProgressRecorderChanged"
-        @state-recorder-changed="onStateRecorderChanged"
-        @finish-record="onFinishRecorder"
-      />
-      <resizable-text-area
-        v-else-if="!showRichContentEditor"
-        ref="messageInput"
-        v-model="message"
-        class="input"
-        :placeholder="messagePlaceHolder"
-        :min-height="4"
-        :signature="signatureToApply"
-        :allow-signature="true"
-        :send-with-signature="sendWithSignature"
-        @typing-off="onTypingOff"
-        @typing-on="onTypingOn"
-        @focus="onFocus"
-        @blur="onBlur"
-      />
-      <woot-message-editor
-        v-else
-        v-model="message"
-        :editor-id="editorStateId"
-        class="input"
-        :is-private="isOnPrivateNote"
-        :placeholder="messagePlaceHolder"
-        :update-selection-with="updateEditorSelectionWith"
-        :min-height="4"
-        :enable-variables="true"
-        :variables="messageVariables"
-        :signature="signatureToApply"
-        :allow-signature="true"
-        :channel-type="channelType"
-        @typing-off="onTypingOff"
-        @typing-on="onTypingOn"
-        @focus="onFocus"
-        @blur="onBlur"
-        @toggle-user-mention="toggleUserMention"
-        @toggle-canned-menu="toggleCannedMenu"
-        @toggle-variables-menu="toggleVariablesMenu"
-        @clear-selection="clearEditorSelection"
-      />
-    </div>
-    <div v-if="hasAttachments" class="attachment-preview-box" @paste="onPaste">
-      <attachment-preview
-        class="flex-col mt-4"
-        :attachments="attachedFiles"
-        @remove-attachment="removeAttachment"
-      />
-    </div>
-    <message-signature-missing-alert
-      v-if="isSignatureEnabledForInbox && !isSignatureAvailable"
-    />
-    <reply-bottom-panel
-      :conversation-id="conversationId"
-      :enable-multiple-file-upload="enableMultipleFileUpload"
-      :has-whatsapp-templates="hasWhatsappTemplates"
-      :inbox="inbox"
-      :is-on-private-note="isOnPrivateNote"
-      :is-recording-audio="isRecordingAudio"
-      :is-send-disabled="isReplyButtonDisabled"
-      :mode="replyType"
-      :on-file-upload="onFileUpload"
-      :on-send="onSendReply"
-      :recording-audio-duration-text="recordingAudioDurationText"
-      :recording-audio-state="recordingAudioState"
-      :send-button-text="replyButtonLabel"
-      :show-audio-recorder="showAudioRecorder"
-      :show-editor-toggle="isAPIInbox && !isOnPrivateNote"
-      :show-emoji-picker="showEmojiPicker"
-      :show-file-upload="showFileUpload"
-      :toggle-audio-recorder-play-pause="toggleAudioRecorderPlayPause"
-      :toggle-audio-recorder="toggleAudioRecorder"
-      :toggle-emoji-picker="toggleEmojiPicker"
-      :message="message"
-      :portal-slug="connectedPortalSlug"
-      :new-conversation-modal-active="newConversationModalActive"
-      @selectWhatsappTemplate="openWhatsappTemplateModal"
-      @toggle-editor="toggleRichContentEditor"
-      @replace-text="replaceText"
-      @toggle-insert-article="toggleInsertArticle"
-    />
-    <whatsapp-templates
-      :inbox-id="inbox.id"
-      :show="showWhatsAppTemplatesModal"
-      @close="hideWhatsappTemplatesModal"
-      @on-send="onSendWhatsAppReply"
-      @cancel="hideWhatsappTemplatesModal"
-    />
-
-    <woot-confirm-modal
-      ref="confirmDialog"
-      :title="$t('CONVERSATION.REPLYBOX.UNDEFINED_VARIABLES.TITLE')"
-      :description="undefinedVariableMessage"
-    />
-  </div>
-</template>
-
 <script>
 import { mapGetters } from 'vuex';
 import { useAlert } from 'dashboard/composables';
@@ -1232,6 +1079,159 @@ export default {
 };
 </script>
 
+<template>
+  <div class="reply-box" :class="replyBoxClass">
+    <banner
+      v-if="showSelfAssignBanner"
+      action-button-variant="clear"
+      color-scheme="secondary"
+      class="banner--self-assign"
+      :banner-message="$t('CONVERSATION.NOT_ASSIGNED_TO_YOU')"
+      :has-action-button="true"
+      :action-button-label="$t('CONVERSATION.ASSIGN_TO_ME')"
+      @click="onClickSelfAssign"
+    />
+    <reply-top-panel
+      :mode="replyType"
+      :set-reply-mode="setReplyMode"
+      :is-message-length-reaching-threshold="isMessageLengthReachingThreshold"
+      :characters-remaining="charactersRemaining"
+      :popout-reply-box="popoutReplyBox"
+      @click="$emit('click')"
+    />
+    <article-search-popover
+      v-if="showArticleSearchPopover && connectedPortalSlug"
+      :selected-portal-slug="connectedPortalSlug"
+      @insert="handleInsert"
+      @close="onSearchPopoverClose"
+    />
+    <div class="reply-box__top">
+      <reply-to-message
+        v-if="shouldShowReplyToMessage"
+        :message="inReplyTo"
+        @dismiss="resetReplyToMessage"
+      />
+      <canned-response
+        v-if="showMentions && hasSlashCommand"
+        v-on-clickaway="hideMentions"
+        class="normal-editor__canned-box"
+        :search-key="mentionSearchKey"
+        @click="replaceText"
+      />
+      <emoji-input
+        v-if="showEmojiPicker"
+        v-on-clickaway="hideEmojiPicker"
+        :class="emojiDialogClassOnExpandedLayoutAndRTLView"
+        :on-click="addIntoEditor"
+      />
+      <reply-email-head
+        v-if="showReplyHead"
+        :cc-emails.sync="ccEmails"
+        :bcc-emails.sync="bccEmails"
+        :to-emails.sync="toEmails"
+      />
+      <woot-audio-recorder
+        v-if="showAudioRecorderEditor"
+        ref="audioRecorderInput"
+        :audio-record-format="audioRecordFormat"
+        @state-recorder-progress-changed="onStateProgressRecorderChanged"
+        @state-recorder-changed="onStateRecorderChanged"
+        @finish-record="onFinishRecorder"
+      />
+      <resizable-text-area
+        v-else-if="!showRichContentEditor"
+        ref="messageInput"
+        v-model="message"
+        class="input"
+        :placeholder="messagePlaceHolder"
+        :min-height="4"
+        :signature="signatureToApply"
+        :allow-signature="true"
+        :send-with-signature="sendWithSignature"
+        @typing-off="onTypingOff"
+        @typing-on="onTypingOn"
+        @focus="onFocus"
+        @blur="onBlur"
+      />
+      <woot-message-editor
+        v-else
+        v-model="message"
+        :editor-id="editorStateId"
+        class="input"
+        :is-private="isOnPrivateNote"
+        :placeholder="messagePlaceHolder"
+        :update-selection-with="updateEditorSelectionWith"
+        :min-height="4"
+        :enable-variables="true"
+        :variables="messageVariables"
+        :signature="signatureToApply"
+        :allow-signature="true"
+        :channel-type="channelType"
+        @typing-off="onTypingOff"
+        @typing-on="onTypingOn"
+        @focus="onFocus"
+        @blur="onBlur"
+        @toggle-user-mention="toggleUserMention"
+        @toggle-canned-menu="toggleCannedMenu"
+        @toggle-variables-menu="toggleVariablesMenu"
+        @clear-selection="clearEditorSelection"
+      />
+    </div>
+    <div v-if="hasAttachments" class="attachment-preview-box" @paste="onPaste">
+      <attachment-preview
+        class="flex-col mt-4"
+        :attachments="attachedFiles"
+        @remove-attachment="removeAttachment"
+      />
+    </div>
+    <message-signature-missing-alert
+      v-if="isSignatureEnabledForInbox && !isSignatureAvailable"
+    />
+    <reply-bottom-panel
+      :conversation-id="conversationId"
+      :enable-multiple-file-upload="enableMultipleFileUpload"
+      :has-whatsapp-templates="hasWhatsappTemplates"
+      :inbox="inbox"
+      :is-on-private-note="isOnPrivateNote"
+      :is-recording-audio="isRecordingAudio"
+      :is-send-disabled="isReplyButtonDisabled"
+      :mode="replyType"
+      :on-file-upload="onFileUpload"
+      :on-send="onSendReply"
+      :recording-audio-duration-text="recordingAudioDurationText"
+      :recording-audio-state="recordingAudioState"
+      :send-button-text="replyButtonLabel"
+      :show-audio-recorder="showAudioRecorder"
+      :show-editor-toggle="isAPIInbox && !isOnPrivateNote"
+      :show-emoji-picker="showEmojiPicker"
+      :show-file-upload="showFileUpload"
+      :toggle-audio-recorder-play-pause="toggleAudioRecorderPlayPause"
+      :toggle-audio-recorder="toggleAudioRecorder"
+      :toggle-emoji-picker="toggleEmojiPicker"
+      :message="message"
+      :portal-slug="connectedPortalSlug"
+      :new-conversation-modal-active="newConversationModalActive"
+      @selectWhatsappTemplate="openWhatsappTemplateModal"
+      @toggle-editor="toggleRichContentEditor"
+      @replace-text="replaceText"
+      @toggle-insert-article="toggleInsertArticle"
+    />
+    <whatsapp-templates
+      :inbox-id="inbox.id"
+      :show="showWhatsAppTemplatesModal"
+      @close="hideWhatsappTemplatesModal"
+      @on-send="onSendWhatsAppReply"
+      @cancel="hideWhatsappTemplatesModal"
+    />
+
+    <woot-confirm-modal
+      ref="confirmDialog"
+      :title="$t('CONVERSATION.REPLYBOX.UNDEFINED_VARIABLES.TITLE')"
+      :description="undefinedVariableMessage"
+    />
+  </div>
+</template>
+
 <style lang="scss" scoped>
 .send-button {
   @apply mb-0;
diff --git a/app/javascript/dashboard/components/widgets/conversation/ReplyEmailHead.vue b/app/javascript/dashboard/components/widgets/conversation/ReplyEmailHead.vue
index ab507febe..39aa0778a 100644
--- a/app/javascript/dashboard/components/widgets/conversation/ReplyEmailHead.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/ReplyEmailHead.vue
@@ -1,75 +1,3 @@
-<template>
-  <div>
-    <div v-if="toEmails">
-      <div class="input-group small" :class="{ error: v$.toEmailsVal.$error }">
-        <label class="input-group-label">
-          {{ $t('CONVERSATION.REPLYBOX.EMAIL_HEAD.TO') }}
-        </label>
-        <div class="rounded-none flex-1 min-w-0 m-0 whitespace-nowrap">
-          <woot-input
-            v-model.trim="v$.toEmailsVal.$model"
-            type="text"
-            class="[&>input]:!mb-0 [&>input]:border-transparent [&>input]:h-8 [&>input]:text-sm [&>input]:!border-0 [&>input]:border-none"
-            :class="{ error: v$.toEmailsVal.$error }"
-            :placeholder="$t('CONVERSATION.REPLYBOX.EMAIL_HEAD.CC.PLACEHOLDER')"
-            @blur="onBlur"
-          />
-        </div>
-      </div>
-    </div>
-    <div class="input-group-wrap">
-      <div class="input-group small" :class="{ error: v$.ccEmailsVal.$error }">
-        <label class="input-group-label">
-          {{ $t('CONVERSATION.REPLYBOX.EMAIL_HEAD.CC.LABEL') }}
-        </label>
-        <div class="rounded-none flex-1 min-w-0 m-0 whitespace-nowrap">
-          <woot-input
-            v-model.trim="v$.ccEmailsVal.$model"
-            class="[&>input]:!mb-0 [&>input]:border-transparent [&>input]:h-8 [&>input]:text-sm [&>input]:!border-0 [&>input]:border-none"
-            type="text"
-            :class="{ error: v$.ccEmailsVal.$error }"
-            :placeholder="$t('CONVERSATION.REPLYBOX.EMAIL_HEAD.CC.PLACEHOLDER')"
-            @blur="onBlur"
-          />
-        </div>
-        <woot-button
-          v-if="!showBcc"
-          variant="clear"
-          size="small"
-          @click="handleAddBcc"
-        >
-          {{ $t('CONVERSATION.REPLYBOX.EMAIL_HEAD.ADD_BCC') }}
-        </woot-button>
-      </div>
-      <span v-if="v$.ccEmailsVal.$error" class="message">
-        {{ $t('CONVERSATION.REPLYBOX.EMAIL_HEAD.CC.ERROR') }}
-      </span>
-    </div>
-    <div v-if="showBcc" class="input-group-wrap">
-      <div class="input-group small" :class="{ error: v$.bccEmailsVal.$error }">
-        <label class="input-group-label">
-          {{ $t('CONVERSATION.REPLYBOX.EMAIL_HEAD.BCC.LABEL') }}
-        </label>
-        <div class="rounded-none flex-1 min-w-0 m-0 whitespace-nowrap">
-          <woot-input
-            v-model.trim="v$.bccEmailsVal.$model"
-            type="text"
-            class="[&>input]:!mb-0 [&>input]:border-transparent [&>input]:h-8 [&>input]:text-sm [&>input]:!border-0 [&>input]:border-none"
-            :class="{ error: v$.bccEmailsVal.$error }"
-            :placeholder="
-              $t('CONVERSATION.REPLYBOX.EMAIL_HEAD.BCC.PLACEHOLDER')
-            "
-            @blur="onBlur"
-          />
-        </div>
-      </div>
-      <span v-if="v$.bccEmailsVal.$error" class="message">
-        {{ $t('CONVERSATION.REPLYBOX.EMAIL_HEAD.BCC.ERROR') }}
-      </span>
-    </div>
-  </div>
-</template>
-
 <script>
 import { validEmailsByComma } from './helpers/emailHeadHelper';
 import { useVuelidate } from '@vuelidate/core';
@@ -152,6 +80,78 @@ export default {
   },
 };
 </script>
+
+<template>
+  <div>
+    <div v-if="toEmails">
+      <div class="input-group small" :class="{ error: v$.toEmailsVal.$error }">
+        <label class="input-group-label">
+          {{ $t('CONVERSATION.REPLYBOX.EMAIL_HEAD.TO') }}
+        </label>
+        <div class="rounded-none flex-1 min-w-0 m-0 whitespace-nowrap">
+          <woot-input
+            v-model.trim="v$.toEmailsVal.$model"
+            type="text"
+            class="[&>input]:!mb-0 [&>input]:border-transparent [&>input]:h-8 [&>input]:text-sm [&>input]:!border-0 [&>input]:border-none"
+            :class="{ error: v$.toEmailsVal.$error }"
+            :placeholder="$t('CONVERSATION.REPLYBOX.EMAIL_HEAD.CC.PLACEHOLDER')"
+            @blur="onBlur"
+          />
+        </div>
+      </div>
+    </div>
+    <div class="input-group-wrap">
+      <div class="input-group small" :class="{ error: v$.ccEmailsVal.$error }">
+        <label class="input-group-label">
+          {{ $t('CONVERSATION.REPLYBOX.EMAIL_HEAD.CC.LABEL') }}
+        </label>
+        <div class="rounded-none flex-1 min-w-0 m-0 whitespace-nowrap">
+          <woot-input
+            v-model.trim="v$.ccEmailsVal.$model"
+            class="[&>input]:!mb-0 [&>input]:border-transparent [&>input]:h-8 [&>input]:text-sm [&>input]:!border-0 [&>input]:border-none"
+            type="text"
+            :class="{ error: v$.ccEmailsVal.$error }"
+            :placeholder="$t('CONVERSATION.REPLYBOX.EMAIL_HEAD.CC.PLACEHOLDER')"
+            @blur="onBlur"
+          />
+        </div>
+        <woot-button
+          v-if="!showBcc"
+          variant="clear"
+          size="small"
+          @click="handleAddBcc"
+        >
+          {{ $t('CONVERSATION.REPLYBOX.EMAIL_HEAD.ADD_BCC') }}
+        </woot-button>
+      </div>
+      <span v-if="v$.ccEmailsVal.$error" class="message">
+        {{ $t('CONVERSATION.REPLYBOX.EMAIL_HEAD.CC.ERROR') }}
+      </span>
+    </div>
+    <div v-if="showBcc" class="input-group-wrap">
+      <div class="input-group small" :class="{ error: v$.bccEmailsVal.$error }">
+        <label class="input-group-label">
+          {{ $t('CONVERSATION.REPLYBOX.EMAIL_HEAD.BCC.LABEL') }}
+        </label>
+        <div class="rounded-none flex-1 min-w-0 m-0 whitespace-nowrap">
+          <woot-input
+            v-model.trim="v$.bccEmailsVal.$model"
+            type="text"
+            class="[&>input]:!mb-0 [&>input]:border-transparent [&>input]:h-8 [&>input]:text-sm [&>input]:!border-0 [&>input]:border-none"
+            :class="{ error: v$.bccEmailsVal.$error }"
+            :placeholder="
+              $t('CONVERSATION.REPLYBOX.EMAIL_HEAD.BCC.PLACEHOLDER')
+            "
+            @blur="onBlur"
+          />
+        </div>
+      </div>
+      <span v-if="v$.bccEmailsVal.$error" class="message">
+        {{ $t('CONVERSATION.REPLYBOX.EMAIL_HEAD.BCC.ERROR') }}
+      </span>
+    </div>
+  </div>
+</template>
 <style lang="scss" scoped>
 .input-group-wrap .message {
   @apply text-sm text-red-500 dark:text-red-500;
diff --git a/app/javascript/dashboard/components/widgets/conversation/ReplyToMessage.vue b/app/javascript/dashboard/components/widgets/conversation/ReplyToMessage.vue
index ce24f4ce1..047a7f3aa 100644
--- a/app/javascript/dashboard/components/widgets/conversation/ReplyToMessage.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/ReplyToMessage.vue
@@ -1,3 +1,17 @@
+<script>
+import MessagePreview from 'dashboard/components/widgets/conversation/MessagePreview.vue';
+
+export default {
+  components: { MessagePreview },
+  props: {
+    message: {
+      type: Object,
+      required: true,
+    },
+  },
+};
+</script>
+
 <template>
   <div
     class="reply-editor bg-slate-50 dark:bg-slate-800 rounded-md py-1 pl-2 pr-1 text-xs tracking-wide mt-2 flex items-center gap-1.5 -mx-2"
@@ -24,20 +38,6 @@
   </div>
 </template>
 
-<script>
-import MessagePreview from 'dashboard/components/widgets/conversation/MessagePreview.vue';
-
-export default {
-  components: { MessagePreview },
-  props: {
-    message: {
-      type: Object,
-      required: true,
-    },
-  },
-};
-</script>
-
 <style lang="scss">
 // TODO: Remove this
 // override for dashboard/assets/scss/widgets/_reply-box.scss
diff --git a/app/javascript/dashboard/components/widgets/conversation/TagAgents.vue b/app/javascript/dashboard/components/widgets/conversation/TagAgents.vue
index a3a26db73..a6fdb6b8a 100644
--- a/app/javascript/dashboard/components/widgets/conversation/TagAgents.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/TagAgents.vue
@@ -1,43 +1,3 @@
-<template>
-  <ul
-    v-if="items.length"
-    class="vertical dropdown menu mention--box"
-    :class="{ 'with-bottom-border': items.length <= 4 }"
-  >
-    <li
-      v-for="(agent, index) in items"
-      :id="`mention-item-${index}`"
-      :key="agent.id"
-      :class="{ active: index === selectedIndex }"
-      class="last:mb-2 items-center rounded-md flex p-2"
-      @click="onAgentSelect(index)"
-      @mouseover="onHover(index)"
-    >
-      <div class="mr-2">
-        <woot-thumbnail
-          :src="agent.thumbnail"
-          :username="agent.name"
-          size="32px"
-        />
-      </div>
-      <div
-        class="flex-1 max-w-full overflow-hidden whitespace-nowrap text-ellipsis"
-      >
-        <h5
-          class="mention--user-name mb-0 text-sm text-slate-900 dark:text-slate-100 overflow-hidden whitespace-nowrap text-ellipsis"
-        >
-          {{ agent.name }}
-        </h5>
-        <div
-          class="mention--email overflow-hidden whitespace-nowrap text-ellipsis text-slate-700 dark:text-slate-300 text-xs"
-        >
-          {{ agent.email }}
-        </div>
-      </div>
-    </li>
-  </ul>
-</template>
-
 <script>
 import { mapGetters } from 'vuex';
 import mentionSelectionKeyboardMixin from '../mentions/mentionSelectionKeyboardMixin';
@@ -94,6 +54,46 @@ export default {
 };
 </script>
 
+<template>
+  <ul
+    v-if="items.length"
+    class="vertical dropdown menu mention--box"
+    :class="{ 'with-bottom-border': items.length <= 4 }"
+  >
+    <li
+      v-for="(agent, index) in items"
+      :id="`mention-item-${index}`"
+      :key="agent.id"
+      :class="{ active: index === selectedIndex }"
+      class="last:mb-2 items-center rounded-md flex p-2"
+      @click="onAgentSelect(index)"
+      @mouseover="onHover(index)"
+    >
+      <div class="mr-2">
+        <woot-thumbnail
+          :src="agent.thumbnail"
+          :username="agent.name"
+          size="32px"
+        />
+      </div>
+      <div
+        class="flex-1 max-w-full overflow-hidden whitespace-nowrap text-ellipsis"
+      >
+        <h5
+          class="mention--user-name mb-0 text-sm text-slate-900 dark:text-slate-100 overflow-hidden whitespace-nowrap text-ellipsis"
+        >
+          {{ agent.name }}
+        </h5>
+        <div
+          class="mention--email overflow-hidden whitespace-nowrap text-ellipsis text-slate-700 dark:text-slate-300 text-xs"
+        >
+          {{ agent.email }}
+        </div>
+      </div>
+    </li>
+  </ul>
+</template>
+
 <style scoped lang="scss">
 .mention--box {
   @apply bg-white text-sm dark:bg-slate-700 rounded-md overflow-auto absolute w-full z-20 pt-2 px-2 pb-0 shadow-md left-0 leading-[1.2] bottom-full max-h-[12.5rem] border-t border-solid border-slate-75 dark:border-slate-800;
diff --git a/app/javascript/dashboard/components/widgets/conversation/VariableList.vue b/app/javascript/dashboard/components/widgets/conversation/VariableList.vue
index 48b1dcea3..d5f4f0875 100644
--- a/app/javascript/dashboard/components/widgets/conversation/VariableList.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/VariableList.vue
@@ -1,19 +1,3 @@
-<template>
-  <mention-box
-    v-if="items.length"
-    type="variable"
-    :items="items"
-    @mention-select="handleVariableClick"
-  >
-    <template slot-scope="{ item }">
-      <span class="text-capitalize variable--list-label">
-        {{ item.description }}
-      </span>
-      ({{ item.label }})
-    </template>
-  </mention-box>
-</template>
-
 <script>
 import { mapGetters } from 'vuex';
 import { MESSAGE_VARIABLES } from 'shared/constants/messages';
@@ -71,6 +55,22 @@ export default {
   },
 };
 </script>
+
+<template>
+  <mention-box
+    v-if="items.length"
+    type="variable"
+    :items="items"
+    @mention-select="handleVariableClick"
+  >
+    <template slot-scope="{ item }">
+      <span class="text-capitalize variable--list-label">
+        {{ item.description }}
+      </span>
+      ({{ item.label }})
+    </template>
+  </mention-box>
+</template>
 <style scoped>
 .variable--list-label {
   font-weight: var(--font-weight-bold);
diff --git a/app/javascript/dashboard/components/widgets/conversation/WhatsappTemplates/Modal.vue b/app/javascript/dashboard/components/widgets/conversation/WhatsappTemplates/Modal.vue
index 6c4523f9a..b23eefc9d 100644
--- a/app/javascript/dashboard/components/widgets/conversation/WhatsappTemplates/Modal.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/WhatsappTemplates/Modal.vue
@@ -1,26 +1,3 @@
-<!-- eslint-disable vue/no-mutating-props -->
-<template>
-  <woot-modal :show.sync="show" :on-close="onClose" size="modal-big">
-    <woot-modal-header
-      :header-title="$t('WHATSAPP_TEMPLATES.MODAL.TITLE')"
-      :header-content="modalHeaderContent"
-    />
-    <div class="row modal-content">
-      <templates-picker
-        v-if="!selectedWaTemplate"
-        :inbox-id="inboxId"
-        @onSelect="pickTemplate"
-      />
-      <template-parser
-        v-else
-        :template="selectedWaTemplate"
-        @resetTemplate="onResetTemplate"
-        @sendMessage="onSendMessage"
-      />
-    </div>
-  </woot-modal>
-</template>
-
 <script>
 import TemplatesPicker from './TemplatesPicker.vue';
 import TemplateParser from './TemplateParser.vue';
@@ -70,6 +47,29 @@ export default {
 };
 </script>
 
+<!-- eslint-disable vue/no-mutating-props -->
+<template>
+  <woot-modal :show.sync="show" :on-close="onClose" size="modal-big">
+    <woot-modal-header
+      :header-title="$t('WHATSAPP_TEMPLATES.MODAL.TITLE')"
+      :header-content="modalHeaderContent"
+    />
+    <div class="row modal-content">
+      <templates-picker
+        v-if="!selectedWaTemplate"
+        :inbox-id="inboxId"
+        @onSelect="pickTemplate"
+      />
+      <template-parser
+        v-else
+        :template="selectedWaTemplate"
+        @resetTemplate="onResetTemplate"
+        @sendMessage="onSendMessage"
+      />
+    </div>
+  </woot-modal>
+</template>
+
 <style scoped>
 .modal-content {
   padding: 1.5625rem 2rem;
diff --git a/app/javascript/dashboard/components/widgets/conversation/WhatsappTemplates/TemplateParser.vue b/app/javascript/dashboard/components/widgets/conversation/WhatsappTemplates/TemplateParser.vue
index 2dcfdb22e..6f13c744b 100644
--- a/app/javascript/dashboard/components/widgets/conversation/WhatsappTemplates/TemplateParser.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/WhatsappTemplates/TemplateParser.vue
@@ -1,45 +1,3 @@
-<template>
-  <div class="w-full">
-    <textarea
-      v-model="processedString"
-      rows="4"
-      readonly
-      class="template-input"
-    />
-    <div v-if="variables" class="template__variables-container">
-      <p class="variables-label">
-        {{ $t('WHATSAPP_TEMPLATES.PARSER.VARIABLES_LABEL') }}
-      </p>
-      <div
-        v-for="(variable, key) in processedParams"
-        :key="key"
-        class="template__variable-item"
-      >
-        <span class="variable-label">
-          {{ key }}
-        </span>
-        <woot-input
-          v-model="processedParams[key]"
-          type="text"
-          class="variable-input"
-          :styles="{ marginBottom: 0 }"
-        />
-      </div>
-      <p v-if="v$.$dirty && v$.$invalid" class="error">
-        {{ $t('WHATSAPP_TEMPLATES.PARSER.FORM_ERROR_MESSAGE') }}
-      </p>
-    </div>
-    <footer>
-      <woot-button variant="smooth" @click="$emit('resetTemplate')">
-        {{ $t('WHATSAPP_TEMPLATES.PARSER.GO_BACK_LABEL') }}
-      </woot-button>
-      <woot-button type="button" @click="sendMessage">
-        {{ $t('WHATSAPP_TEMPLATES.PARSER.SEND_MESSAGE_LABEL') }}
-      </woot-button>
-    </footer>
-  </div>
-</template>
-
 <script>
 import { useVuelidate } from '@vuelidate/core';
 import { requiredIf } from '@vuelidate/validators';
@@ -121,6 +79,48 @@ export default {
 };
 </script>
 
+<template>
+  <div class="w-full">
+    <textarea
+      v-model="processedString"
+      rows="4"
+      readonly
+      class="template-input"
+    />
+    <div v-if="variables" class="template__variables-container">
+      <p class="variables-label">
+        {{ $t('WHATSAPP_TEMPLATES.PARSER.VARIABLES_LABEL') }}
+      </p>
+      <div
+        v-for="(variable, key) in processedParams"
+        :key="key"
+        class="template__variable-item"
+      >
+        <span class="variable-label">
+          {{ key }}
+        </span>
+        <woot-input
+          v-model="processedParams[key]"
+          type="text"
+          class="variable-input"
+          :styles="{ marginBottom: 0 }"
+        />
+      </div>
+      <p v-if="v$.$dirty && v$.$invalid" class="error">
+        {{ $t('WHATSAPP_TEMPLATES.PARSER.FORM_ERROR_MESSAGE') }}
+      </p>
+    </div>
+    <footer>
+      <woot-button variant="smooth" @click="$emit('resetTemplate')">
+        {{ $t('WHATSAPP_TEMPLATES.PARSER.GO_BACK_LABEL') }}
+      </woot-button>
+      <woot-button type="button" @click="sendMessage">
+        {{ $t('WHATSAPP_TEMPLATES.PARSER.SEND_MESSAGE_LABEL') }}
+      </woot-button>
+    </footer>
+  </div>
+</template>
+
 <style scoped lang="scss">
 .template__variables-container {
   @apply p-2.5;
diff --git a/app/javascript/dashboard/components/widgets/conversation/WhatsappTemplates/TemplatesPicker.vue b/app/javascript/dashboard/components/widgets/conversation/WhatsappTemplates/TemplatesPicker.vue
index 7f0077f4b..08751015f 100644
--- a/app/javascript/dashboard/components/widgets/conversation/WhatsappTemplates/TemplatesPicker.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/WhatsappTemplates/TemplatesPicker.vue
@@ -1,3 +1,45 @@
+<script>
+// TODO: Remove this when we support all formats
+const formatsToRemove = ['DOCUMENT', 'IMAGE', 'VIDEO'];
+
+export default {
+  props: {
+    inboxId: {
+      type: Number,
+      default: undefined,
+    },
+  },
+  data() {
+    return {
+      query: '',
+    };
+  },
+  computed: {
+    whatsAppTemplateMessages() {
+      // TODO: Remove the last filter when we support all formats
+      return this.$store.getters['inboxes/getWhatsAppTemplates'](this.inboxId)
+        .filter(template => template.status.toLowerCase() === 'approved')
+        .filter(template => {
+          return template.components.every(component => {
+            return !formatsToRemove.includes(component.format);
+          });
+        });
+    },
+    filteredTemplateMessages() {
+      return this.whatsAppTemplateMessages.filter(template =>
+        template.name.toLowerCase().includes(this.query.toLowerCase())
+      );
+    },
+  },
+  methods: {
+    getTemplatebody(template) {
+      return template.components.find(component => component.type === 'BODY')
+        .text;
+    },
+  },
+};
+</script>
+
 <template>
   <div class="w-full">
     <div class="templates__list-search gap-1">
@@ -54,48 +96,6 @@
   </div>
 </template>
 
-<script>
-// TODO: Remove this when we support all formats
-const formatsToRemove = ['DOCUMENT', 'IMAGE', 'VIDEO'];
-
-export default {
-  props: {
-    inboxId: {
-      type: Number,
-      default: undefined,
-    },
-  },
-  data() {
-    return {
-      query: '',
-    };
-  },
-  computed: {
-    whatsAppTemplateMessages() {
-      // TODO: Remove the last filter when we support all formats
-      return this.$store.getters['inboxes/getWhatsAppTemplates'](this.inboxId)
-        .filter(template => template.status.toLowerCase() === 'approved')
-        .filter(template => {
-          return template.components.every(component => {
-            return !formatsToRemove.includes(component.format);
-          });
-        });
-    },
-    filteredTemplateMessages() {
-      return this.whatsAppTemplateMessages.filter(template =>
-        template.name.toLowerCase().includes(this.query.toLowerCase())
-      );
-    },
-  },
-  methods: {
-    getTemplatebody(template) {
-      return template.components.find(component => component.type === 'BODY')
-        .text;
-    },
-  },
-};
-</script>
-
 <style scoped lang="scss">
 .templates__list-search {
   @apply items-center flex bg-slate-25 dark:bg-slate-900 mb-2.5 py-0 px-2.5 rounded-md border border-solid border-slate-100 dark:border-slate-700;
diff --git a/app/javascript/dashboard/components/widgets/conversation/bubble/Actions.vue b/app/javascript/dashboard/components/widgets/conversation/bubble/Actions.vue
index b7b8ce2e5..ec31b0e56 100644
--- a/app/javascript/dashboard/components/widgets/conversation/bubble/Actions.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/bubble/Actions.vue
@@ -1,78 +1,3 @@
-<template>
-  <div class="message-text--metadata">
-    <span
-      class="time"
-      :class="{
-        'has-status-icon':
-          showSentIndicator || showDeliveredIndicator || showReadIndicator,
-      }"
-    >
-      {{ readableTime }}
-    </span>
-    <span v-if="externalError" class="read-indicator-wrap">
-      <fluent-icon
-        v-tooltip.top-start="externalError"
-        icon="error-circle"
-        class="action--icon"
-        size="14"
-      />
-    </span>
-    <span v-if="showReadIndicator" class="read-indicator-wrap">
-      <fluent-icon
-        v-tooltip.top-start="$t('CHAT_LIST.MESSAGE_READ')"
-        icon="checkmark-double"
-        class="action--icon read-tick read-indicator"
-        size="14"
-      />
-    </span>
-    <span v-else-if="showDeliveredIndicator" class="read-indicator-wrap">
-      <fluent-icon
-        v-tooltip.top-start="$t('CHAT_LIST.DELIVERED')"
-        icon="checkmark-double"
-        class="action--icon read-tick"
-        size="14"
-      />
-    </span>
-    <span v-else-if="showSentIndicator" class="read-indicator-wrap">
-      <fluent-icon
-        v-tooltip.top-start="$t('CHAT_LIST.SENT')"
-        icon="checkmark"
-        class="action--icon read-tick"
-        size="14"
-      />
-    </span>
-    <fluent-icon
-      v-if="isEmail"
-      v-tooltip.top-start="$t('CHAT_LIST.RECEIVED_VIA_EMAIL')"
-      icon="mail"
-      class="action--icon"
-      size="16"
-    />
-    <fluent-icon
-      v-if="isPrivate"
-      v-tooltip.top-start="$t('CONVERSATION.VISIBLE_TO_AGENTS')"
-      icon="lock-closed"
-      class="action--icon lock--icon--private"
-      size="16"
-      @mouseenter="isHovered = true"
-      @mouseleave="isHovered = false"
-    />
-    <a
-      v-if="isATweet && (isOutgoing || isIncoming) && linkToTweet"
-      :href="linkToTweet"
-      target="_blank"
-      rel="noopener noreferrer nofollow"
-    >
-      <fluent-icon
-        v-tooltip.top-start="$t('CHAT_LIST.VIEW_TWEET_IN_TWITTER')"
-        icon="open"
-        class="cursor-pointer action--icon"
-        size="16"
-      />
-    </a>
-  </div>
-</template>
-
 <script>
 import { MESSAGE_TYPE, MESSAGE_STATUS } from 'shared/constants/messages';
 import inboxMixin from 'shared/mixins/inboxMixin';
@@ -257,6 +182,81 @@ export default {
 };
 </script>
 
+<template>
+  <div class="message-text--metadata">
+    <span
+      class="time"
+      :class="{
+        'has-status-icon':
+          showSentIndicator || showDeliveredIndicator || showReadIndicator,
+      }"
+    >
+      {{ readableTime }}
+    </span>
+    <span v-if="externalError" class="read-indicator-wrap">
+      <fluent-icon
+        v-tooltip.top-start="externalError"
+        icon="error-circle"
+        class="action--icon"
+        size="14"
+      />
+    </span>
+    <span v-if="showReadIndicator" class="read-indicator-wrap">
+      <fluent-icon
+        v-tooltip.top-start="$t('CHAT_LIST.MESSAGE_READ')"
+        icon="checkmark-double"
+        class="action--icon read-tick read-indicator"
+        size="14"
+      />
+    </span>
+    <span v-else-if="showDeliveredIndicator" class="read-indicator-wrap">
+      <fluent-icon
+        v-tooltip.top-start="$t('CHAT_LIST.DELIVERED')"
+        icon="checkmark-double"
+        class="action--icon read-tick"
+        size="14"
+      />
+    </span>
+    <span v-else-if="showSentIndicator" class="read-indicator-wrap">
+      <fluent-icon
+        v-tooltip.top-start="$t('CHAT_LIST.SENT')"
+        icon="checkmark"
+        class="action--icon read-tick"
+        size="14"
+      />
+    </span>
+    <fluent-icon
+      v-if="isEmail"
+      v-tooltip.top-start="$t('CHAT_LIST.RECEIVED_VIA_EMAIL')"
+      icon="mail"
+      class="action--icon"
+      size="16"
+    />
+    <fluent-icon
+      v-if="isPrivate"
+      v-tooltip.top-start="$t('CONVERSATION.VISIBLE_TO_AGENTS')"
+      icon="lock-closed"
+      class="action--icon lock--icon--private"
+      size="16"
+      @mouseenter="isHovered = true"
+      @mouseleave="isHovered = false"
+    />
+    <a
+      v-if="isATweet && (isOutgoing || isIncoming) && linkToTweet"
+      :href="linkToTweet"
+      target="_blank"
+      rel="noopener noreferrer nofollow"
+    >
+      <fluent-icon
+        v-tooltip.top-start="$t('CHAT_LIST.VIEW_TWEET_IN_TWITTER')"
+        icon="open"
+        class="cursor-pointer action--icon"
+        size="16"
+      />
+    </a>
+  </div>
+</template>
+
 <style lang="scss" scoped>
 .right {
   .message-text--metadata {
diff --git a/app/javascript/dashboard/components/widgets/conversation/bubble/Contact.vue b/app/javascript/dashboard/components/widgets/conversation/bubble/Contact.vue
index 83a44cc79..2d0b3d3a3 100644
--- a/app/javascript/dashboard/components/widgets/conversation/bubble/Contact.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/bubble/Contact.vue
@@ -1,21 +1,3 @@
-<template>
-  <div class="contact--group">
-    <fluent-icon icon="call" class="file--icon" size="18" />
-    <div class="meta">
-      <p
-        class="overflow-hidden whitespace-nowrap text-ellipsis margin-bottom-0"
-      >
-        {{ phoneNumber }}
-      </p>
-    </div>
-    <div v-if="formattedPhoneNumber" class="link-wrap">
-      <woot-button variant="clear" size="small" @click.prevent="addContact">
-        {{ $t('CONVERSATION.SAVE_CONTACT') }}
-      </woot-button>
-    </div>
-  </div>
-</template>
-
 <script>
 import { useAlert } from 'dashboard/composables';
 import {
@@ -98,6 +80,24 @@ export default {
 };
 </script>
 
+<template>
+  <div class="contact--group">
+    <fluent-icon icon="call" class="file--icon" size="18" />
+    <div class="meta">
+      <p
+        class="overflow-hidden whitespace-nowrap text-ellipsis margin-bottom-0"
+      >
+        {{ phoneNumber }}
+      </p>
+    </div>
+    <div v-if="formattedPhoneNumber" class="link-wrap">
+      <woot-button variant="clear" size="small" @click.prevent="addContact">
+        {{ $t('CONVERSATION.SAVE_CONTACT') }}
+      </woot-button>
+    </div>
+  </div>
+</template>
+
 <style lang="scss" scoped>
 .contact--group {
   align-items: center;
diff --git a/app/javascript/dashboard/components/widgets/conversation/bubble/File.vue b/app/javascript/dashboard/components/widgets/conversation/bubble/File.vue
index d5e0375cd..edbe12172 100644
--- a/app/javascript/dashboard/components/widgets/conversation/bubble/File.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/bubble/File.vue
@@ -1,24 +1,3 @@
-<template>
-  <div class="file message-text__wrap">
-    <div class="icon-wrap">
-      <fluent-icon icon="document" class="file--icon" size="32" />
-    </div>
-    <div class="meta">
-      <h5 class="attachment-name text-slate-700 dark:text-slate-400">
-        {{ decodeURI(fileName) }}
-      </h5>
-      <a
-        class="download clear link button small"
-        rel="noreferrer noopener nofollow"
-        target="_blank"
-        :href="url"
-      >
-        {{ $t('CONVERSATION.DOWNLOAD') }}
-      </a>
-    </div>
-  </div>
-</template>
-
 <script>
 export default {
   props: {
@@ -45,6 +24,27 @@ export default {
 };
 </script>
 
+<template>
+  <div class="file message-text__wrap">
+    <div class="icon-wrap">
+      <fluent-icon icon="document" class="file--icon" size="32" />
+    </div>
+    <div class="meta">
+      <h5 class="attachment-name text-slate-700 dark:text-slate-400">
+        {{ decodeURI(fileName) }}
+      </h5>
+      <a
+        class="download clear link button small"
+        rel="noreferrer noopener nofollow"
+        target="_blank"
+        :href="url"
+      >
+        {{ $t('CONVERSATION.DOWNLOAD') }}
+      </a>
+    </div>
+  </div>
+</template>
+
 <style lang="scss" scoped>
 @import '~dashboard/assets/scss/variables';
 
diff --git a/app/javascript/dashboard/components/widgets/conversation/bubble/Image.vue b/app/javascript/dashboard/components/widgets/conversation/bubble/Image.vue
index d763d6bec..ec8539724 100644
--- a/app/javascript/dashboard/components/widgets/conversation/bubble/Image.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/bubble/Image.vue
@@ -1,12 +1,3 @@
-<template>
-  <div class="image message-text__wrap">
-    <img :src="url" @click="onClick" @error="$emit('error')" />
-    <woot-modal :full-width="true" :show.sync="show" :on-close="onClose">
-      <img :src="url" class="modal-image skip-context-menu" />
-    </woot-modal>
-  </div>
-</template>
-
 <script>
 export default {
   components: {},
@@ -31,3 +22,12 @@ export default {
   },
 };
 </script>
+
+<template>
+  <div class="image message-text__wrap">
+    <img :src="url" @click="onClick" @error="$emit('error')" />
+    <woot-modal :full-width="true" :show.sync="show" :on-close="onClose">
+      <img :src="url" class="modal-image skip-context-menu" />
+    </woot-modal>
+  </div>
+</template>
diff --git a/app/javascript/dashboard/components/widgets/conversation/bubble/ImageAudioVideo.vue b/app/javascript/dashboard/components/widgets/conversation/bubble/ImageAudioVideo.vue
index b98953341..b6e058ecf 100644
--- a/app/javascript/dashboard/components/widgets/conversation/bubble/ImageAudioVideo.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/bubble/ImageAudioVideo.vue
@@ -1,36 +1,3 @@
-<template>
-  <div class="message-text__wrap" :class="attachmentTypeClasses">
-    <img
-      v-if="isImage && !isImageError"
-      class="bg-woot-200 dark:bg-woot-900"
-      :src="dataUrl"
-      :width="imageWidth"
-      :height="imageHeight"
-      @click="onClick"
-      @error="onImgError"
-    />
-    <video
-      v-if="isVideo"
-      :src="dataUrl"
-      muted
-      playsInline
-      @error="onImgError"
-      @click="onClick"
-    />
-    <audio v-else-if="isAudio" controls class="skip-context-menu mb-0.5">
-      <source :src="`${dataUrl}?t=${Date.now()}`" />
-    </audio>
-    <gallery-view
-      v-if="show"
-      :show.sync="show"
-      :attachment="attachment"
-      :all-attachments="filteredCurrentChatAttachments"
-      @error="onImgError"
-      @close="onClose"
-    />
-  </div>
-</template>
-
 <script>
 import { mapGetters } from 'vuex';
 import { hasPressedCommand } from 'shared/helpers/KeyboardHelpers';
@@ -120,3 +87,36 @@ export default {
   },
 };
 </script>
+
+<template>
+  <div class="message-text__wrap" :class="attachmentTypeClasses">
+    <img
+      v-if="isImage && !isImageError"
+      class="bg-woot-200 dark:bg-woot-900"
+      :src="dataUrl"
+      :width="imageWidth"
+      :height="imageHeight"
+      @click="onClick"
+      @error="onImgError"
+    />
+    <video
+      v-if="isVideo"
+      :src="dataUrl"
+      muted
+      playsInline
+      @error="onImgError"
+      @click="onClick"
+    />
+    <audio v-else-if="isAudio" controls class="skip-context-menu mb-0.5">
+      <source :src="`${dataUrl}?t=${Date.now()}`" />
+    </audio>
+    <gallery-view
+      v-if="show"
+      :show.sync="show"
+      :attachment="attachment"
+      :all-attachments="filteredCurrentChatAttachments"
+      @error="onImgError"
+      @close="onClose"
+    />
+  </div>
+</template>
diff --git a/app/javascript/dashboard/components/widgets/conversation/bubble/InstagramStory.vue b/app/javascript/dashboard/components/widgets/conversation/bubble/InstagramStory.vue
index 8716d9ac9..4858eab6b 100644
--- a/app/javascript/dashboard/components/widgets/conversation/bubble/InstagramStory.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/bubble/InstagramStory.vue
@@ -1,16 +1,3 @@
-<template>
-  <bubble-image
-    v-if="!hasImgStoryError"
-    :url="storyUrl"
-    @error="onImageLoadError"
-  />
-  <bubble-video
-    v-else-if="!hasVideoStoryError"
-    :url="storyUrl"
-    @error="onVideoLoadError"
-  />
-  <instagram-story-error-place-holder v-else />
-</template>
 <script>
 import BubbleImage from './Image.vue';
 import BubbleVideo from './Video.vue';
@@ -49,3 +36,16 @@ export default {
   },
 };
 </script>
+<template>
+  <bubble-image
+    v-if="!hasImgStoryError"
+    :url="storyUrl"
+    @error="onImageLoadError"
+  />
+  <bubble-video
+    v-else-if="!hasVideoStoryError"
+    :url="storyUrl"
+    @error="onVideoLoadError"
+  />
+  <instagram-story-error-place-holder v-else />
+</template>
diff --git a/app/javascript/dashboard/components/widgets/conversation/bubble/InstagramStoryErrorPlaceHolder.vue b/app/javascript/dashboard/components/widgets/conversation/bubble/InstagramStoryErrorPlaceHolder.vue
index db70afac5..07781df88 100644
--- a/app/javascript/dashboard/components/widgets/conversation/bubble/InstagramStoryErrorPlaceHolder.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/bubble/InstagramStoryErrorPlaceHolder.vue
@@ -1,3 +1,7 @@
+<script>
+export default {};
+</script>
+
 <template>
   <div
     class="flex items-center justify-center px-8 h-28 w-full bg-slate-100 text-slate-700 dark:bg-slate-500 dark:text-slate-75"
@@ -8,7 +12,3 @@
     </p>
   </div>
 </template>
-
-<script>
-export default {};
-</script>
diff --git a/app/javascript/dashboard/components/widgets/conversation/bubble/InstagramStoryReply.vue b/app/javascript/dashboard/components/widgets/conversation/bubble/InstagramStoryReply.vue
index baa41d81c..38960930f 100644
--- a/app/javascript/dashboard/components/widgets/conversation/bubble/InstagramStoryReply.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/bubble/InstagramStoryReply.vue
@@ -1,11 +1,3 @@
-<template>
-  <blockquote
-    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" />
-  </blockquote>
-</template>
 <script>
 import InstagramStory from './InstagramStory.vue';
 
@@ -33,3 +25,11 @@ export default {
   },
 };
 </script>
+<template>
+  <blockquote
+    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" />
+  </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 80843854d..c743e066e 100644
--- a/app/javascript/dashboard/components/widgets/conversation/bubble/Integration.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/bubble/Integration.vue
@@ -1,10 +1,3 @@
-<template>
-  <dyte-video-call
-    v-if="showDyteIntegration"
-    :message-id="messageId"
-    :meeting-data="contentAttributes.data"
-  />
-</template>
 <script>
 import DyteVideoCall from './integrations/Dyte.vue';
 import inboxMixin from 'shared/mixins/inboxMixin';
@@ -37,3 +30,10 @@ export default {
   },
 };
 </script>
+<template>
+  <dyte-video-call
+    v-if="showDyteIntegration"
+    :message-id="messageId"
+    :meeting-data="contentAttributes.data"
+  />
+</template>
diff --git a/app/javascript/dashboard/components/widgets/conversation/bubble/MailHead.vue b/app/javascript/dashboard/components/widgets/conversation/bubble/MailHead.vue
index 66365e85c..274768df6 100644
--- a/app/javascript/dashboard/components/widgets/conversation/bubble/MailHead.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/bubble/MailHead.vue
@@ -1,34 +1,3 @@
-<template>
-  <div
-    v-if="showHead"
-    class="message__mail-head"
-    :class="{ 'is-incoming': isIncoming }"
-  >
-    <div v-if="fromMail" class="meta-wrap">
-      <span class="message__content--type">{{ $t('EMAIL_HEADER.FROM') }}:</span>
-      <span>{{ fromMail }}</span>
-    </div>
-    <div v-if="toMails" class="meta-wrap">
-      <span class="message__content--type">{{ $t('EMAIL_HEADER.TO') }}:</span>
-      <span>{{ toMails }}</span>
-    </div>
-    <div v-if="ccMails" class="meta-wrap">
-      <span class="message__content--type">{{ $t('EMAIL_HEADER.CC') }}:</span>
-      <span>{{ ccMails }}</span>
-    </div>
-    <div v-if="bccMails" class="meta-wrap">
-      <span class="message__content--type">{{ $t('EMAIL_HEADER.BCC') }}:</span>
-      <span>{{ bccMails }}</span>
-    </div>
-    <div v-if="subject" class="meta-wrap">
-      <span class="message__content--type">
-        {{ $t('EMAIL_HEADER.SUBJECT') }}:
-      </span>
-      <span>{{ subject }}</span>
-    </div>
-  </div>
-</template>
-
 <script>
 export default {
   props: {
@@ -75,6 +44,37 @@ export default {
   },
 };
 </script>
+
+<template>
+  <div
+    v-if="showHead"
+    class="message__mail-head"
+    :class="{ 'is-incoming': isIncoming }"
+  >
+    <div v-if="fromMail" class="meta-wrap">
+      <span class="message__content--type">{{ $t('EMAIL_HEADER.FROM') }}:</span>
+      <span>{{ fromMail }}</span>
+    </div>
+    <div v-if="toMails" class="meta-wrap">
+      <span class="message__content--type">{{ $t('EMAIL_HEADER.TO') }}:</span>
+      <span>{{ toMails }}</span>
+    </div>
+    <div v-if="ccMails" class="meta-wrap">
+      <span class="message__content--type">{{ $t('EMAIL_HEADER.CC') }}:</span>
+      <span>{{ ccMails }}</span>
+    </div>
+    <div v-if="bccMails" class="meta-wrap">
+      <span class="message__content--type">{{ $t('EMAIL_HEADER.BCC') }}:</span>
+      <span>{{ bccMails }}</span>
+    </div>
+    <div v-if="subject" class="meta-wrap">
+      <span class="message__content--type">
+        {{ $t('EMAIL_HEADER.SUBJECT') }}:
+      </span>
+      <span>{{ subject }}</span>
+    </div>
+  </div>
+</template>
 <style lang="scss" scoped>
 .message__mail-head {
   padding-bottom: var(--space-small);
diff --git a/app/javascript/dashboard/components/widgets/conversation/bubble/ReplyTo.vue b/app/javascript/dashboard/components/widgets/conversation/bubble/ReplyTo.vue
index 5cb063d23..c4a83a26e 100644
--- a/app/javascript/dashboard/components/widgets/conversation/bubble/ReplyTo.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/bubble/ReplyTo.vue
@@ -1,23 +1,3 @@
-<template>
-  <div
-    class="px-2 py-1.5 rounded-sm min-w-[10rem] mb-2"
-    :class="{
-      'bg-slate-50 dark:bg-slate-600 dark:text-slate-50':
-        messageType === MESSAGE_TYPE.INCOMING,
-      'bg-woot-600 text-woot-50': messageType === MESSAGE_TYPE.OUTGOING,
-      '-mx-2': !parentHasAttachments,
-    }"
-    @click="scrollToMessage"
-  >
-    <message-preview
-      class="cursor-pointer"
-      :message="message"
-      :show-message-type="false"
-      :default-empty-message="$t('CONVERSATION.REPLY_MESSAGE_NOT_FOUND')"
-    />
-  </div>
-</template>
-
 <script>
 import MessagePreview from 'dashboard/components/widgets/conversation/MessagePreview.vue';
 import { MESSAGE_TYPE } from 'shared/constants/messages';
@@ -54,3 +34,23 @@ export default {
   },
 };
 </script>
+
+<template>
+  <div
+    class="px-2 py-1.5 rounded-sm min-w-[10rem] mb-2"
+    :class="{
+      'bg-slate-50 dark:bg-slate-600 dark:text-slate-50':
+        messageType === MESSAGE_TYPE.INCOMING,
+      'bg-woot-600 text-woot-50': messageType === MESSAGE_TYPE.OUTGOING,
+      '-mx-2': !parentHasAttachments,
+    }"
+    @click="scrollToMessage"
+  >
+    <message-preview
+      class="cursor-pointer"
+      :message="message"
+      :show-message-type="false"
+      :default-empty-message="$t('CONVERSATION.REPLY_MESSAGE_NOT_FOUND')"
+    />
+  </div>
+</template>
diff --git a/app/javascript/dashboard/components/widgets/conversation/bubble/Text.vue b/app/javascript/dashboard/components/widgets/conversation/bubble/Text.vue
index bc24ed90f..b36f3499d 100644
--- a/app/javascript/dashboard/components/widgets/conversation/bubble/Text.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/bubble/Text.vue
@@ -1,43 +1,3 @@
-<template>
-  <div
-    class="message-text__wrap"
-    :class="{
-      'show--quoted': isQuotedContentPresent,
-      'hide--quoted': !isQuotedContentPresent,
-    }"
-  >
-    <div v-if="!isEmail" v-dompurify-html="message" class="text-content" />
-    <div v-else @click="handleClickOnContent">
-      <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"
-      @click="toggleQuotedContent"
-    >
-      <span v-if="showQuotedContent" class="flex items-center gap-0.5">
-        <fluent-icon icon="chevron-up" size="16" />
-        {{ $t('CHAT_LIST.HIDE_QUOTED_TEXT') }}
-      </span>
-      <span v-else class="flex items-center gap-0.5">
-        <fluent-icon icon="chevron-down" size="16" />
-        {{ $t('CHAT_LIST.SHOW_QUOTED_TEXT') }}
-      </span>
-    </button>
-    <gallery-view
-      v-if="showGalleryViewer"
-      :show.sync="showGalleryViewer"
-      :attachment="attachment"
-      :all-attachments="availableAttachments"
-      @error="onClose"
-      @close="onClose"
-    />
-  </div>
-</template>
-
 <script>
 import Letter from 'vue-letter';
 import GalleryView from '../components/GalleryView.vue';
@@ -114,6 +74,46 @@ export default {
   },
 };
 </script>
+
+<template>
+  <div
+    class="message-text__wrap"
+    :class="{
+      'show--quoted': isQuotedContentPresent,
+      'hide--quoted': !isQuotedContentPresent,
+    }"
+  >
+    <div v-if="!isEmail" v-dompurify-html="message" class="text-content" />
+    <div v-else @click="handleClickOnContent">
+      <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"
+      @click="toggleQuotedContent"
+    >
+      <span v-if="showQuotedContent" class="flex items-center gap-0.5">
+        <fluent-icon icon="chevron-up" size="16" />
+        {{ $t('CHAT_LIST.HIDE_QUOTED_TEXT') }}
+      </span>
+      <span v-else class="flex items-center gap-0.5">
+        <fluent-icon icon="chevron-down" size="16" />
+        {{ $t('CHAT_LIST.SHOW_QUOTED_TEXT') }}
+      </span>
+    </button>
+    <gallery-view
+      v-if="showGalleryViewer"
+      :show.sync="showGalleryViewer"
+      :attachment="attachment"
+      :all-attachments="availableAttachments"
+      @error="onClose"
+      @close="onClose"
+    />
+  </div>
+</template>
 <style lang="scss">
 .text-content {
   overflow: auto;
diff --git a/app/javascript/dashboard/components/widgets/conversation/bubble/TranslateModal.vue b/app/javascript/dashboard/components/widgets/conversation/bubble/TranslateModal.vue
index 94a24e575..0e3fa385c 100644
--- a/app/javascript/dashboard/components/widgets/conversation/bubble/TranslateModal.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/bubble/TranslateModal.vue
@@ -1,3 +1,30 @@
+<script>
+export default {
+  props: {
+    contentAttributes: {
+      type: Object,
+      default: () => ({}),
+    },
+    content: {
+      type: String,
+      default: '',
+    },
+  },
+  computed: {
+    translationsAvailable() {
+      return !!Object.keys(this.translations).length;
+    },
+    translations() {
+      return this.contentAttributes.translations || {};
+    },
+  },
+  methods: {
+    onClose() {
+      this.$emit('close');
+    },
+  },
+};
+</script>
 <template>
   <woot-modal
     modal-type="right-aligned"
@@ -30,30 +57,3 @@
     </div>
   </woot-modal>
 </template>
-<script>
-export default {
-  props: {
-    contentAttributes: {
-      type: Object,
-      default: () => ({}),
-    },
-    content: {
-      type: String,
-      default: '',
-    },
-  },
-  computed: {
-    translationsAvailable() {
-      return !!Object.keys(this.translations).length;
-    },
-    translations() {
-      return this.contentAttributes.translations || {};
-    },
-  },
-  methods: {
-    onClose() {
-      this.$emit('close');
-    },
-  },
-};
-</script>
diff --git a/app/javascript/dashboard/components/widgets/conversation/bubble/Video.vue b/app/javascript/dashboard/components/widgets/conversation/bubble/Video.vue
index 6ff96bb5b..f6275c476 100644
--- a/app/javascript/dashboard/components/widgets/conversation/bubble/Video.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/bubble/Video.vue
@@ -1,17 +1,3 @@
-<template>
-  <div class="video message-text__wrap">
-    <video ref="videoElement" :src="url" muted playsInline @click="onClick" />
-    <woot-modal :show.sync="show" :on-close="onClose">
-      <video
-        :src="url"
-        controls
-        playsInline
-        class="modal-video skip-context-menu mx-auto"
-      />
-    </woot-modal>
-  </div>
-</template>
-
 <script>
 export default {
   props: {
@@ -40,3 +26,17 @@ export default {
   },
 };
 </script>
+
+<template>
+  <div class="video message-text__wrap">
+    <video ref="videoElement" :src="url" muted playsInline @click="onClick" />
+    <woot-modal :show.sync="show" :on-close="onClose">
+      <video
+        :src="url"
+        controls
+        playsInline
+        class="modal-video skip-context-menu mx-auto"
+      />
+    </woot-modal>
+  </div>
+</template>
diff --git a/app/javascript/dashboard/components/widgets/conversation/bubble/integrations/Dyte.vue b/app/javascript/dashboard/components/widgets/conversation/bubble/integrations/Dyte.vue
index 7a8e7ff57..cb25b5c5b 100644
--- a/app/javascript/dashboard/components/widgets/conversation/bubble/integrations/Dyte.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/bubble/integrations/Dyte.vue
@@ -1,33 +1,3 @@
-<template>
-  <div>
-    <woot-button
-      size="small"
-      variant="smooth"
-      color-scheme="secondary"
-      icon="video-add"
-      class="join-call-button"
-      :is-loading="isLoading"
-      @click="joinTheCall"
-    >
-      {{ $t('INTEGRATION_SETTINGS.DYTE.CLICK_HERE_TO_JOIN') }}
-    </woot-button>
-    <div v-if="dyteAuthToken" class="video-call--container">
-      <iframe
-        :src="meetingLink"
-        allow="camera;microphone;fullscreen;display-capture;picture-in-picture;clipboard-write;"
-      />
-      <woot-button
-        size="small"
-        variant="smooth"
-        color-scheme="secondary"
-        class="join-call-button"
-        @click="leaveTheRoom"
-      >
-        {{ $t('INTEGRATION_SETTINGS.DYTE.LEAVE_THE_ROOM') }}
-      </woot-button>
-    </div>
-  </div>
-</template>
 <script>
 import DyteAPI from 'dashboard/api/integrations/dyte';
 import { buildDyteURL } from 'shared/helpers/IntegrationHelper';
@@ -71,6 +41,36 @@ export default {
   },
 };
 </script>
+<template>
+  <div>
+    <woot-button
+      size="small"
+      variant="smooth"
+      color-scheme="secondary"
+      icon="video-add"
+      class="join-call-button"
+      :is-loading="isLoading"
+      @click="joinTheCall"
+    >
+      {{ $t('INTEGRATION_SETTINGS.DYTE.CLICK_HERE_TO_JOIN') }}
+    </woot-button>
+    <div v-if="dyteAuthToken" class="video-call--container">
+      <iframe
+        :src="meetingLink"
+        allow="camera;microphone;fullscreen;display-capture;picture-in-picture;clipboard-write;"
+      />
+      <woot-button
+        size="small"
+        variant="smooth"
+        color-scheme="secondary"
+        class="join-call-button"
+        @click="leaveTheRoom"
+      >
+        {{ $t('INTEGRATION_SETTINGS.DYTE.LEAVE_THE_ROOM') }}
+      </woot-button>
+    </div>
+  </div>
+</template>
 <style lang="scss">
 .join-call-button {
   margin: var(--space-small) 0;
diff --git a/app/javascript/dashboard/components/widgets/conversation/components/GalleryView.vue b/app/javascript/dashboard/components/widgets/conversation/components/GalleryView.vue
index abb31f8fc..c58e9b8de 100644
--- a/app/javascript/dashboard/components/widgets/conversation/components/GalleryView.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/components/GalleryView.vue
@@ -1,184 +1,3 @@
-<!-- eslint-disable vue/no-mutating-props -->
-<template>
-  <woot-modal
-    full-width
-    :show.sync="show"
-    :show-close-button="false"
-    :on-close="onClose"
-  >
-    <div
-      v-on-clickaway="onClose"
-      class="bg-white dark:bg-slate-900 flex flex-col h-[inherit] w-[inherit] overflow-hidden"
-      @click="onClose"
-    >
-      <div
-        class="z-10 flex items-center justify-between w-full h-16 px-6 py-2 bg-white dark:bg-slate-900"
-        @click.stop
-      >
-        <div
-          v-if="senderDetails"
-          class="items-center flex justify-start min-w-[15rem]"
-        >
-          <thumbnail
-            v-if="senderDetails.avatar"
-            :username="senderDetails.name"
-            :src="senderDetails.avatar"
-          />
-          <div
-            class="flex flex-col items-start justify-center ml-2 rtl:ml-0 rtl:mr-2"
-          >
-            <h3 class="text-base inline-block leading-[1.4] m-0 p-0 capitalize">
-              <span
-                class="overflow-hidden text-slate-800 dark:text-slate-100 whitespace-nowrap text-ellipsis"
-              >
-                {{ senderDetails.name }}
-              </span>
-            </h3>
-            <span
-              class="p-0 m-0 overflow-hidden text-xs text-slate-400 dark:text-slate-200 whitespace-nowrap text-ellipsis"
-            >
-              {{ readableTime }}
-            </span>
-          </div>
-        </div>
-        <div
-          class="flex items-center justify-start w-auto min-w-0 p-1 text-sm font-semibold text-slate-700 dark:text-slate-100"
-        >
-          <span
-            v-dompurify-html="fileNameFromDataUrl"
-            class="overflow-hidden text-slate-700 dark:text-slate-100 whitespace-nowrap text-ellipsis"
-          />
-        </div>
-        <div
-          class="items-center flex gap-2 justify-end min-w-[8rem] sm:min-w-[15rem]"
-        >
-          <woot-button
-            v-if="isImage"
-            size="large"
-            color-scheme="secondary"
-            variant="clear"
-            icon="zoom-in"
-            @click="onZoom(0.1)"
-          />
-          <woot-button
-            v-if="isImage"
-            size="large"
-            color-scheme="secondary"
-            variant="clear"
-            icon="zoom-out"
-            @click="onZoom(-0.1)"
-          />
-          <woot-button
-            v-if="isImage"
-            size="large"
-            color-scheme="secondary"
-            variant="clear"
-            icon="arrow-rotate-counter-clockwise"
-            @click="onRotate('counter-clockwise')"
-          />
-          <woot-button
-            v-if="isImage"
-            size="large"
-            color-scheme="secondary"
-            variant="clear"
-            icon="arrow-rotate-clockwise"
-            @click="onRotate('clockwise')"
-          />
-          <woot-button
-            size="large"
-            color-scheme="secondary"
-            variant="clear"
-            icon="arrow-download"
-            @click="onClickDownload"
-          />
-          <woot-button
-            size="large"
-            color-scheme="secondary"
-            variant="clear"
-            icon="dismiss"
-            @click="onClose"
-          />
-        </div>
-      </div>
-      <div class="flex items-center justify-center w-full h-full">
-        <div class="flex justify-center min-w-[6.25rem] w-[6.25rem]">
-          <woot-button
-            v-if="hasMoreThanOneAttachment"
-            class="z-10"
-            size="large"
-            variant="smooth"
-            color-scheme="primary"
-            icon="chevron-left"
-            :disabled="activeImageIndex === 0"
-            @click.stop="
-              onClickChangeAttachment(
-                allAttachments[activeImageIndex - 1],
-                activeImageIndex - 1
-              )
-            "
-          />
-        </div>
-        <div class="flex flex-col items-center justify-center w-full h-full">
-          <div>
-            <img
-              v-if="isImage"
-              :key="activeAttachment.message_id"
-              :src="activeAttachment.data_url"
-              class="mx-auto my-0 duration-150 ease-in-out transform modal-image skip-context-menu"
-              :style="imageRotationStyle"
-              @click.stop="onClickZoomImage"
-              @wheel.stop="onWheelImageZoom"
-            />
-            <video
-              v-if="isVideo"
-              :key="activeAttachment.message_id"
-              :src="activeAttachment.data_url"
-              controls
-              playsInline
-              class="mx-auto my-0 modal-video skip-context-menu"
-              @click.stop
-            />
-            <audio
-              v-if="isAudio"
-              :key="activeAttachment.message_id"
-              controls
-              class="skip-context-menu"
-              @click.stop
-            >
-              <source :src="`${activeAttachment.data_url}?t=${Date.now()}`" />
-            </audio>
-          </div>
-        </div>
-        <div class="flex justify-center min-w-[6.25rem] w-[6.25rem]">
-          <woot-button
-            v-if="hasMoreThanOneAttachment"
-            class="z-10"
-            size="large"
-            variant="smooth"
-            color-scheme="primary"
-            :disabled="activeImageIndex === allAttachments.length - 1"
-            icon="chevron-right"
-            @click.stop="
-              onClickChangeAttachment(
-                allAttachments[activeImageIndex + 1],
-                activeImageIndex + 1
-              )
-            "
-          />
-        </div>
-      </div>
-      <div class="z-10 flex items-center justify-center w-full h-16 px-6 py-2">
-        <div
-          class="items-center rounded-sm flex font-semibold justify-center min-w-[5rem] p-1 bg-slate-25 dark:bg-slate-800 text-slate-600 dark:text-slate-200 text-sm"
-        >
-          <span class="count">
-            {{ `${activeImageIndex + 1} / ${allAttachments.length}` }}
-          </span>
-        </div>
-      </div>
-    </div>
-  </woot-modal>
-</template>
 <script>
 import { mapGetters } from 'vuex';
 import keyboardEventListenerMixins from 'shared/mixins/keyboardEventListenerMixins';
@@ -385,3 +204,185 @@ export default {
   },
 };
 </script>
+
+<!-- eslint-disable vue/no-mutating-props -->
+<template>
+  <woot-modal
+    full-width
+    :show.sync="show"
+    :show-close-button="false"
+    :on-close="onClose"
+  >
+    <div
+      v-on-clickaway="onClose"
+      class="bg-white dark:bg-slate-900 flex flex-col h-[inherit] w-[inherit] overflow-hidden"
+      @click="onClose"
+    >
+      <div
+        class="z-10 flex items-center justify-between w-full h-16 px-6 py-2 bg-white dark:bg-slate-900"
+        @click.stop
+      >
+        <div
+          v-if="senderDetails"
+          class="items-center flex justify-start min-w-[15rem]"
+        >
+          <thumbnail
+            v-if="senderDetails.avatar"
+            :username="senderDetails.name"
+            :src="senderDetails.avatar"
+          />
+          <div
+            class="flex flex-col items-start justify-center ml-2 rtl:ml-0 rtl:mr-2"
+          >
+            <h3 class="text-base inline-block leading-[1.4] m-0 p-0 capitalize">
+              <span
+                class="overflow-hidden text-slate-800 dark:text-slate-100 whitespace-nowrap text-ellipsis"
+              >
+                {{ senderDetails.name }}
+              </span>
+            </h3>
+            <span
+              class="p-0 m-0 overflow-hidden text-xs text-slate-400 dark:text-slate-200 whitespace-nowrap text-ellipsis"
+            >
+              {{ readableTime }}
+            </span>
+          </div>
+        </div>
+        <div
+          class="flex items-center justify-start w-auto min-w-0 p-1 text-sm font-semibold text-slate-700 dark:text-slate-100"
+        >
+          <span
+            v-dompurify-html="fileNameFromDataUrl"
+            class="overflow-hidden text-slate-700 dark:text-slate-100 whitespace-nowrap text-ellipsis"
+          />
+        </div>
+        <div
+          class="items-center flex gap-2 justify-end min-w-[8rem] sm:min-w-[15rem]"
+        >
+          <woot-button
+            v-if="isImage"
+            size="large"
+            color-scheme="secondary"
+            variant="clear"
+            icon="zoom-in"
+            @click="onZoom(0.1)"
+          />
+          <woot-button
+            v-if="isImage"
+            size="large"
+            color-scheme="secondary"
+            variant="clear"
+            icon="zoom-out"
+            @click="onZoom(-0.1)"
+          />
+          <woot-button
+            v-if="isImage"
+            size="large"
+            color-scheme="secondary"
+            variant="clear"
+            icon="arrow-rotate-counter-clockwise"
+            @click="onRotate('counter-clockwise')"
+          />
+          <woot-button
+            v-if="isImage"
+            size="large"
+            color-scheme="secondary"
+            variant="clear"
+            icon="arrow-rotate-clockwise"
+            @click="onRotate('clockwise')"
+          />
+          <woot-button
+            size="large"
+            color-scheme="secondary"
+            variant="clear"
+            icon="arrow-download"
+            @click="onClickDownload"
+          />
+          <woot-button
+            size="large"
+            color-scheme="secondary"
+            variant="clear"
+            icon="dismiss"
+            @click="onClose"
+          />
+        </div>
+      </div>
+      <div class="flex items-center justify-center w-full h-full">
+        <div class="flex justify-center min-w-[6.25rem] w-[6.25rem]">
+          <woot-button
+            v-if="hasMoreThanOneAttachment"
+            class="z-10"
+            size="large"
+            variant="smooth"
+            color-scheme="primary"
+            icon="chevron-left"
+            :disabled="activeImageIndex === 0"
+            @click.stop="
+              onClickChangeAttachment(
+                allAttachments[activeImageIndex - 1],
+                activeImageIndex - 1
+              )
+            "
+          />
+        </div>
+        <div class="flex flex-col items-center justify-center w-full h-full">
+          <div>
+            <img
+              v-if="isImage"
+              :key="activeAttachment.message_id"
+              :src="activeAttachment.data_url"
+              class="mx-auto my-0 duration-150 ease-in-out transform modal-image skip-context-menu"
+              :style="imageRotationStyle"
+              @click.stop="onClickZoomImage"
+              @wheel.stop="onWheelImageZoom"
+            />
+            <video
+              v-if="isVideo"
+              :key="activeAttachment.message_id"
+              :src="activeAttachment.data_url"
+              controls
+              playsInline
+              class="mx-auto my-0 modal-video skip-context-menu"
+              @click.stop
+            />
+            <audio
+              v-if="isAudio"
+              :key="activeAttachment.message_id"
+              controls
+              class="skip-context-menu"
+              @click.stop
+            >
+              <source :src="`${activeAttachment.data_url}?t=${Date.now()}`" />
+            </audio>
+          </div>
+        </div>
+        <div class="flex justify-center min-w-[6.25rem] w-[6.25rem]">
+          <woot-button
+            v-if="hasMoreThanOneAttachment"
+            class="z-10"
+            size="large"
+            variant="smooth"
+            color-scheme="primary"
+            :disabled="activeImageIndex === allAttachments.length - 1"
+            icon="chevron-right"
+            @click.stop="
+              onClickChangeAttachment(
+                allAttachments[activeImageIndex + 1],
+                activeImageIndex + 1
+              )
+            "
+          />
+        </div>
+      </div>
+      <div class="z-10 flex items-center justify-center w-full h-16 px-6 py-2">
+        <div
+          class="items-center rounded-sm flex font-semibold justify-center min-w-[5rem] p-1 bg-slate-25 dark:bg-slate-800 text-slate-600 dark:text-slate-200 text-sm"
+        >
+          <span class="count">
+            {{ `${activeImageIndex + 1} / ${allAttachments.length}` }}
+          </span>
+        </div>
+      </div>
+    </div>
+  </woot-modal>
+</template>
diff --git a/app/javascript/dashboard/components/widgets/conversation/components/SLACardLabel.vue b/app/javascript/dashboard/components/widgets/conversation/components/SLACardLabel.vue
index 042e25838..11eb77b8c 100644
--- a/app/javascript/dashboard/components/widgets/conversation/components/SLACardLabel.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/components/SLACardLabel.vue
@@ -1,53 +1,3 @@
-<template>
-  <div
-    v-if="hasSlaThreshold"
-    class="relative flex items-center border cursor-pointer min-w-fit border-slate-100 dark:border-slate-700"
-    :class="showExtendedInfo ? 'h-[26px] rounded-lg' : 'rounded h-5'"
-  >
-    <div
-      v-on-clickaway="closeSlaPopover"
-      class="flex items-center w-full truncate"
-      :class="showExtendedInfo ? 'px-1.5' : 'px-2 gap-1'"
-      @mouseover="openSlaPopover()"
-    >
-      <div
-        class="flex items-center gap-1"
-        :class="
-          showExtendedInfo &&
-          'ltr:pr-1.5 rtl:pl-1.5 ltr:border-r rtl:border-l border-solid border-slate-100 dark:border-slate-700'
-        "
-      >
-        <fluent-icon
-          size="14"
-          :icon="slaStatus.icon"
-          type="outline"
-          :icon-lib="isSlaMissed ? 'lucide' : 'fluent'"
-          class="flex-shrink-0"
-          :class="slaTextStyles"
-        />
-        <span
-          v-if="showExtendedInfo"
-          class="text-xs font-medium"
-          :class="slaTextStyles"
-        >
-          {{ slaStatusText }}
-        </span>
-      </div>
-      <span
-        class="text-xs font-medium"
-        :class="[slaTextStyles, showExtendedInfo && 'ltr:pl-1.5 rtl:pr-1.5']"
-      >
-        {{ slaStatus.threshold }}
-      </span>
-    </div>
-    <SLA-popover-card
-      v-if="showSlaPopoverCard"
-      :sla-missed-events="slaEvents"
-      class="right-0 top-7"
-    />
-  </div>
-</template>
-
 <script>
 import { evaluateSLAStatus } from '@chatwoot/utils';
 import SLAPopoverCard from './SLAPopoverCard.vue';
@@ -152,3 +102,53 @@ export default {
   },
 };
 </script>
+
+<template>
+  <div
+    v-if="hasSlaThreshold"
+    class="relative flex items-center border cursor-pointer min-w-fit border-slate-100 dark:border-slate-700"
+    :class="showExtendedInfo ? 'h-[26px] rounded-lg' : 'rounded h-5'"
+  >
+    <div
+      v-on-clickaway="closeSlaPopover"
+      class="flex items-center w-full truncate"
+      :class="showExtendedInfo ? 'px-1.5' : 'px-2 gap-1'"
+      @mouseover="openSlaPopover()"
+    >
+      <div
+        class="flex items-center gap-1"
+        :class="
+          showExtendedInfo &&
+          'ltr:pr-1.5 rtl:pl-1.5 ltr:border-r rtl:border-l border-solid border-slate-100 dark:border-slate-700'
+        "
+      >
+        <fluent-icon
+          size="14"
+          :icon="slaStatus.icon"
+          type="outline"
+          :icon-lib="isSlaMissed ? 'lucide' : 'fluent'"
+          class="flex-shrink-0"
+          :class="slaTextStyles"
+        />
+        <span
+          v-if="showExtendedInfo"
+          class="text-xs font-medium"
+          :class="slaTextStyles"
+        >
+          {{ slaStatusText }}
+        </span>
+      </div>
+      <span
+        class="text-xs font-medium"
+        :class="[slaTextStyles, showExtendedInfo && 'ltr:pl-1.5 rtl:pr-1.5']"
+      >
+        {{ slaStatus.threshold }}
+      </span>
+    </div>
+    <SLA-popover-card
+      v-if="showSlaPopoverCard"
+      :sla-missed-events="slaEvents"
+      class="right-0 top-7"
+    />
+  </div>
+</template>
diff --git a/app/javascript/dashboard/components/widgets/conversation/contextMenu/Index.vue b/app/javascript/dashboard/components/widgets/conversation/contextMenu/Index.vue
index ca07fb6fc..084aeb010 100644
--- a/app/javascript/dashboard/components/widgets/conversation/contextMenu/Index.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/contextMenu/Index.vue
@@ -1,76 +1,3 @@
-<template>
-  <div class="bg-white dark:bg-slate-700 shadow-xl rounded-md p-1">
-    <menu-item
-      v-if="!hasUnreadMessages"
-      :option="unreadOption"
-      variant="icon"
-      @click="$emit('mark-as-unread')"
-    />
-    <template v-for="option in statusMenuConfig">
-      <menu-item
-        v-if="show(option.key)"
-        :key="option.key"
-        :option="option"
-        variant="icon"
-        @click="toggleStatus(option.key, null)"
-      />
-    </template>
-    <menu-item
-      v-if="showSnooze"
-      :option="snoozeOption"
-      variant="icon"
-      @click="snoozeConversation()"
-    />
-
-    <menu-item-with-submenu :option="priorityConfig">
-      <menu-item
-        v-for="(option, i) in priorityConfig.options"
-        :key="i"
-        :option="option"
-        @click="assignPriority(option.key)"
-      />
-    </menu-item-with-submenu>
-    <menu-item-with-submenu
-      :option="labelMenuConfig"
-      :sub-menu-available="!!labels.length"
-    >
-      <menu-item
-        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
-      :option="agentMenuConfig"
-      :sub-menu-available="!!assignableAgents.length"
-    >
-      <agent-loading-placeholder v-if="assignableAgentsUiFlags.isFetching" />
-      <template v-else>
-        <menu-item
-          v-for="agent in assignableAgents"
-          :key="agent.id"
-          :option="generateMenuLabelConfig(agent, 'agent')"
-          variant="agent"
-          @click="$emit('assign-agent', agent)"
-        />
-      </template>
-    </menu-item-with-submenu>
-    <menu-item-with-submenu
-      :option="teamMenuConfig"
-      :sub-menu-available="!!teams.length"
-    >
-      <menu-item
-        v-for="team in teams"
-        :key="team.id"
-        :option="generateMenuLabelConfig(team, 'team')"
-        @click="$emit('assign-team', team)"
-      />
-    </menu-item-with-submenu>
-  </div>
-</template>
-
 <script>
 import MenuItem from './menuItem.vue';
 import MenuItemWithSubmenu from './menuItemWithSubmenu.vue';
@@ -250,3 +177,76 @@ export default {
   },
 };
 </script>
+
+<template>
+  <div class="bg-white dark:bg-slate-700 shadow-xl rounded-md p-1">
+    <menu-item
+      v-if="!hasUnreadMessages"
+      :option="unreadOption"
+      variant="icon"
+      @click="$emit('mark-as-unread')"
+    />
+    <template v-for="option in statusMenuConfig">
+      <menu-item
+        v-if="show(option.key)"
+        :key="option.key"
+        :option="option"
+        variant="icon"
+        @click="toggleStatus(option.key, null)"
+      />
+    </template>
+    <menu-item
+      v-if="showSnooze"
+      :option="snoozeOption"
+      variant="icon"
+      @click="snoozeConversation()"
+    />
+
+    <menu-item-with-submenu :option="priorityConfig">
+      <menu-item
+        v-for="(option, i) in priorityConfig.options"
+        :key="i"
+        :option="option"
+        @click="assignPriority(option.key)"
+      />
+    </menu-item-with-submenu>
+    <menu-item-with-submenu
+      :option="labelMenuConfig"
+      :sub-menu-available="!!labels.length"
+    >
+      <menu-item
+        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
+      :option="agentMenuConfig"
+      :sub-menu-available="!!assignableAgents.length"
+    >
+      <agent-loading-placeholder v-if="assignableAgentsUiFlags.isFetching" />
+      <template v-else>
+        <menu-item
+          v-for="agent in assignableAgents"
+          :key="agent.id"
+          :option="generateMenuLabelConfig(agent, 'agent')"
+          variant="agent"
+          @click="$emit('assign-agent', agent)"
+        />
+      </template>
+    </menu-item-with-submenu>
+    <menu-item-with-submenu
+      :option="teamMenuConfig"
+      :sub-menu-available="!!teams.length"
+    >
+      <menu-item
+        v-for="team in teams"
+        :key="team.id"
+        :option="generateMenuLabelConfig(team, 'team')"
+        @click="$emit('assign-team', team)"
+      />
+    </menu-item-with-submenu>
+  </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 17962a169..3f08578ca 100644
--- a/app/javascript/dashboard/components/widgets/conversation/contextMenu/agentLoadingPlaceholder.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/contextMenu/agentLoadingPlaceholder.vue
@@ -1,10 +1,3 @@
-<template>
-  <div class="agent-placeholder">
-    <spinner />
-    <p>{{ $t('CONVERSATION.CARD_CONTEXT_MENU.AGENTS_LOADING') }}</p>
-  </div>
-</template>
-
 <script>
 import Spinner from 'shared/components/Spinner.vue';
 
@@ -15,6 +8,13 @@ export default {
 };
 </script>
 
+<template>
+  <div class="agent-placeholder">
+    <spinner />
+    <p>{{ $t('CONVERSATION.CARD_CONTEXT_MENU.AGENTS_LOADING') }}</p>
+  </div>
+</template>
+
 <style scoped lang="scss">
 .agent-placeholder {
   display: flex;
diff --git a/app/javascript/dashboard/components/widgets/conversation/contextMenu/menuItem.vue b/app/javascript/dashboard/components/widgets/conversation/contextMenu/menuItem.vue
index 0a132de73..f2671d29c 100644
--- a/app/javascript/dashboard/components/widgets/conversation/contextMenu/menuItem.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/contextMenu/menuItem.vue
@@ -1,3 +1,22 @@
+<script>
+import Thumbnail from 'dashboard/components/widgets/Thumbnail.vue';
+export default {
+  components: {
+    Thumbnail,
+  },
+  props: {
+    option: {
+      type: Object,
+      default: () => {},
+    },
+    variant: {
+      type: String,
+      default: 'default',
+    },
+  },
+};
+</script>
+
 <template>
   <div
     class="menu text-slate-800 dark:text-slate-100"
@@ -29,25 +48,6 @@
   </div>
 </template>
 
-<script>
-import Thumbnail from 'dashboard/components/widgets/Thumbnail.vue';
-export default {
-  components: {
-    Thumbnail,
-  },
-  props: {
-    option: {
-      type: Object,
-      default: () => {},
-    },
-    variant: {
-      type: String,
-      default: 'default',
-    },
-  },
-};
-</script>
-
 <style scoped lang="scss">
 .menu {
   width: calc(var(--space-mega) * 2);
diff --git a/app/javascript/dashboard/components/widgets/conversation/contextMenu/menuItemWithSubmenu.vue b/app/javascript/dashboard/components/widgets/conversation/contextMenu/menuItemWithSubmenu.vue
index 619b5aeab..37fa5a36c 100644
--- a/app/javascript/dashboard/components/widgets/conversation/contextMenu/menuItemWithSubmenu.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/contextMenu/menuItemWithSubmenu.vue
@@ -1,3 +1,18 @@
+<script>
+export default {
+  props: {
+    option: {
+      type: Object,
+      default: () => {},
+    },
+    subMenuAvailable: {
+      type: Boolean,
+      default: true,
+    },
+  },
+};
+</script>
+
 <template>
   <div
     class="text-slate-800 dark:text-slate-100 menu-with-submenu min-width-calc w-full p-1 flex items-center h-7 rounded-md relative bg-white dark:bg-slate-700 justify-between hover:bg-woot-75 cursor-pointer dark:hover:bg-slate-800"
@@ -17,21 +32,6 @@
   </div>
 </template>
 
-<script>
-export default {
-  props: {
-    option: {
-      type: Object,
-      default: () => {},
-    },
-    subMenuAvailable: {
-      type: Boolean,
-      default: true,
-    },
-  },
-};
-</script>
-
 <style scoped lang="scss">
 .menu-with-submenu {
   min-width: calc(6.25rem * 2);
diff --git a/app/javascript/dashboard/components/widgets/conversation/conversation/LabelSuggestion.vue b/app/javascript/dashboard/components/widgets/conversation/conversation/LabelSuggestion.vue
index 115cb64ff..05484ce7e 100644
--- a/app/javascript/dashboard/components/widgets/conversation/conversation/LabelSuggestion.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/conversation/LabelSuggestion.vue
@@ -1,93 +1,3 @@
-<template>
-  <li
-    v-if="shouldShowSuggestions"
-    class="label-suggestion right"
-    @mouseover="isHovered = true"
-    @mouseleave="isHovered = false"
-  >
-    <div class="wrap">
-      <div class="label-suggestion--container">
-        <h6 class="label-suggestion--title">Suggested labels</h6>
-        <div class="label-suggestion--options">
-          <button
-            v-for="label in preparedLabels"
-            :key="label.title"
-            v-tooltip.top="{
-              content: selectedLabels.includes(label.title)
-                ? $t('LABEL_MGMT.SUGGESTIONS.TOOLTIP.DESELECT')
-                : labelTooltip,
-              delay: { show: 600, hide: 0 },
-              hideOnClick: true,
-            }"
-            class="label-suggestion--option"
-            @click="pushOrAddLabel(label.title)"
-          >
-            <woot-label
-              variant="dashed"
-              v-bind="label"
-              :bg-color="
-                selectedLabels.includes(label.title) ? 'var(--w-100)' : ''
-              "
-            />
-          </button>
-          <woot-button
-            v-if="preparedLabels.length === 1"
-            v-tooltip.top="{
-              content: $t('LABEL_MGMT.SUGGESTIONS.TOOLTIP.DISMISS'),
-              delay: { show: 600, hide: 0 },
-              hideOnClick: true,
-            }"
-            variant="smooth"
-            :color-scheme="isHovered ? 'alert' : 'primary'"
-            class="label--add"
-            icon="dismiss"
-            size="tiny"
-            @click="dismissSuggestions"
-          />
-        </div>
-        <div v-if="preparedLabels.length > 1">
-          <woot-button
-            :variant="selectedLabels.length === 0 ? 'smooth' : ''"
-            class="label--add"
-            icon="add"
-            size="tiny"
-            @click="addAllLabels"
-          >
-            {{ addButtonText }}
-          </woot-button>
-          <woot-button
-            v-tooltip.top="{
-              content: $t('LABEL_MGMT.SUGGESTIONS.TOOLTIP.DISMISS'),
-              delay: { show: 600, hide: 0 },
-              hideOnClick: true,
-            }"
-            :color-scheme="isHovered ? 'alert' : 'primary'"
-            variant="smooth"
-            class="label--add"
-            icon="dismiss"
-            size="tiny"
-            @click="dismissSuggestions"
-          />
-        </div>
-      </div>
-      <div class="sender--info has-tooltip" data-original-title="null">
-        <woot-thumbnail
-          v-tooltip.top="{
-            content: $t('LABEL_MGMT.SUGGESTIONS.POWERED_BY'),
-            delay: { show: 600, hide: 0 },
-            hideOnClick: true,
-          }"
-          size="16px"
-        >
-          <avatar class="user-thumbnail thumbnail-rounded">
-            <fluent-icon class="chatwoot-ai-icon" icon="chatwoot-ai" />
-          </avatar>
-        </woot-thumbnail>
-      </div>
-    </div>
-  </li>
-</template>
-
 <script>
 // components
 import WootButton from '../../../ui/WootButton.vue';
@@ -229,6 +139,96 @@ export default {
 };
 </script>
 
+<template>
+  <li
+    v-if="shouldShowSuggestions"
+    class="label-suggestion right"
+    @mouseover="isHovered = true"
+    @mouseleave="isHovered = false"
+  >
+    <div class="wrap">
+      <div class="label-suggestion--container">
+        <h6 class="label-suggestion--title">Suggested labels</h6>
+        <div class="label-suggestion--options">
+          <button
+            v-for="label in preparedLabels"
+            :key="label.title"
+            v-tooltip.top="{
+              content: selectedLabels.includes(label.title)
+                ? $t('LABEL_MGMT.SUGGESTIONS.TOOLTIP.DESELECT')
+                : labelTooltip,
+              delay: { show: 600, hide: 0 },
+              hideOnClick: true,
+            }"
+            class="label-suggestion--option"
+            @click="pushOrAddLabel(label.title)"
+          >
+            <woot-label
+              variant="dashed"
+              v-bind="label"
+              :bg-color="
+                selectedLabels.includes(label.title) ? 'var(--w-100)' : ''
+              "
+            />
+          </button>
+          <woot-button
+            v-if="preparedLabels.length === 1"
+            v-tooltip.top="{
+              content: $t('LABEL_MGMT.SUGGESTIONS.TOOLTIP.DISMISS'),
+              delay: { show: 600, hide: 0 },
+              hideOnClick: true,
+            }"
+            variant="smooth"
+            :color-scheme="isHovered ? 'alert' : 'primary'"
+            class="label--add"
+            icon="dismiss"
+            size="tiny"
+            @click="dismissSuggestions"
+          />
+        </div>
+        <div v-if="preparedLabels.length > 1">
+          <woot-button
+            :variant="selectedLabels.length === 0 ? 'smooth' : ''"
+            class="label--add"
+            icon="add"
+            size="tiny"
+            @click="addAllLabels"
+          >
+            {{ addButtonText }}
+          </woot-button>
+          <woot-button
+            v-tooltip.top="{
+              content: $t('LABEL_MGMT.SUGGESTIONS.TOOLTIP.DISMISS'),
+              delay: { show: 600, hide: 0 },
+              hideOnClick: true,
+            }"
+            :color-scheme="isHovered ? 'alert' : 'primary'"
+            variant="smooth"
+            class="label--add"
+            icon="dismiss"
+            size="tiny"
+            @click="dismissSuggestions"
+          />
+        </div>
+      </div>
+      <div class="sender--info has-tooltip" data-original-title="null">
+        <woot-thumbnail
+          v-tooltip.top="{
+            content: $t('LABEL_MGMT.SUGGESTIONS.POWERED_BY'),
+            delay: { show: 600, hide: 0 },
+            hideOnClick: true,
+          }"
+          size="16px"
+        >
+          <avatar class="user-thumbnail thumbnail-rounded">
+            <fluent-icon class="chatwoot-ai-icon" icon="chatwoot-ai" />
+          </avatar>
+        </woot-thumbnail>
+      </div>
+    </div>
+  </li>
+</template>
+
 <style scoped lang="scss">
 .wrap {
   display: flex;
diff --git a/app/javascript/dashboard/components/widgets/conversation/conversationBulkActions/AgentSelector.vue b/app/javascript/dashboard/components/widgets/conversation/conversationBulkActions/AgentSelector.vue
index 4dd06f673..d1a413ae6 100644
--- a/app/javascript/dashboard/components/widgets/conversation/conversationBulkActions/AgentSelector.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/conversationBulkActions/AgentSelector.vue
@@ -1,3 +1,90 @@
+<script>
+import { mapGetters } from 'vuex';
+import Thumbnail from 'dashboard/components/widgets/Thumbnail.vue';
+import Spinner from 'shared/components/Spinner.vue';
+
+export default {
+  components: {
+    Thumbnail,
+    Spinner,
+  },
+  props: {
+    selectedInboxes: {
+      type: Array,
+      default: () => [],
+    },
+    conversationCount: {
+      type: Number,
+      default: 0,
+    },
+  },
+  data() {
+    return {
+      query: '',
+      selectedAgent: null,
+      goBackToAgentList: false,
+    };
+  },
+  computed: {
+    ...mapGetters({
+      uiFlags: 'bulkActions/getUIFlags',
+      inboxes: 'inboxes/getInboxes',
+      assignableAgentsUiFlags: 'inboxAssignableAgents/getUIFlags',
+    }),
+    filteredAgents() {
+      if (this.query) {
+        return this.assignableAgents.filter(agent =>
+          agent.name.toLowerCase().includes(this.query.toLowerCase())
+        );
+      }
+      return [
+        {
+          confirmed: true,
+          name: 'None',
+          id: null,
+          role: 'agent',
+          account_id: 0,
+          email: 'None',
+        },
+        ...this.assignableAgents,
+      ];
+    },
+    assignableAgents() {
+      return this.$store.getters['inboxAssignableAgents/getAssignableAgents'](
+        this.selectedInboxes.join(',')
+      );
+    },
+    conversationLabel() {
+      return this.conversationCount > 1 ? 'conversations' : 'conversation';
+    },
+  },
+  mounted() {
+    this.$store.dispatch('inboxAssignableAgents/fetch', this.selectedInboxes);
+  },
+  methods: {
+    submit() {
+      this.$emit('select', this.selectedAgent);
+    },
+    goBack() {
+      this.goBackToAgentList = true;
+      this.selectedAgent = null;
+    },
+    assignAgent(agent) {
+      this.selectedAgent = agent;
+    },
+    onClose() {
+      this.$emit('close');
+    },
+    onCloseAgentList() {
+      if (this.selectedAgent === null && !this.goBackToAgentList) {
+        this.onClose();
+      }
+      this.goBackToAgentList = false;
+    },
+  },
+};
+</script>
+
 <template>
   <div v-on-clickaway="onCloseAgentList" class="bulk-action__agents">
     <div class="triangle">
@@ -97,93 +184,6 @@
   </div>
 </template>
 
-<script>
-import { mapGetters } from 'vuex';
-import Thumbnail from 'dashboard/components/widgets/Thumbnail.vue';
-import Spinner from 'shared/components/Spinner.vue';
-
-export default {
-  components: {
-    Thumbnail,
-    Spinner,
-  },
-  props: {
-    selectedInboxes: {
-      type: Array,
-      default: () => [],
-    },
-    conversationCount: {
-      type: Number,
-      default: 0,
-    },
-  },
-  data() {
-    return {
-      query: '',
-      selectedAgent: null,
-      goBackToAgentList: false,
-    };
-  },
-  computed: {
-    ...mapGetters({
-      uiFlags: 'bulkActions/getUIFlags',
-      inboxes: 'inboxes/getInboxes',
-      assignableAgentsUiFlags: 'inboxAssignableAgents/getUIFlags',
-    }),
-    filteredAgents() {
-      if (this.query) {
-        return this.assignableAgents.filter(agent =>
-          agent.name.toLowerCase().includes(this.query.toLowerCase())
-        );
-      }
-      return [
-        {
-          confirmed: true,
-          name: 'None',
-          id: null,
-          role: 'agent',
-          account_id: 0,
-          email: 'None',
-        },
-        ...this.assignableAgents,
-      ];
-    },
-    assignableAgents() {
-      return this.$store.getters['inboxAssignableAgents/getAssignableAgents'](
-        this.selectedInboxes.join(',')
-      );
-    },
-    conversationLabel() {
-      return this.conversationCount > 1 ? 'conversations' : 'conversation';
-    },
-  },
-  mounted() {
-    this.$store.dispatch('inboxAssignableAgents/fetch', this.selectedInboxes);
-  },
-  methods: {
-    submit() {
-      this.$emit('select', this.selectedAgent);
-    },
-    goBack() {
-      this.goBackToAgentList = true;
-      this.selectedAgent = null;
-    },
-    assignAgent(agent) {
-      this.selectedAgent = agent;
-    },
-    onClose() {
-      this.$emit('close');
-    },
-    onCloseAgentList() {
-      if (this.selectedAgent === null && !this.goBackToAgentList) {
-        this.onClose();
-      }
-      this.goBackToAgentList = false;
-    },
-  },
-};
-</script>
-
 <style scoped lang="scss">
 .bulk-action__agents {
   @apply max-w-[75%] absolute right-2 top-12 origin-top-right w-auto z-20 min-w-[15rem] bg-white dark:bg-slate-800 rounded-lg border border-solid border-slate-50 dark:border-slate-700 shadow-md;
diff --git a/app/javascript/dashboard/components/widgets/conversation/conversationBulkActions/Index.vue b/app/javascript/dashboard/components/widgets/conversation/conversationBulkActions/Index.vue
index 198774dad..49de17415 100644
--- a/app/javascript/dashboard/components/widgets/conversation/conversationBulkActions/Index.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/conversationBulkActions/Index.vue
@@ -1,112 +1,3 @@
-<template>
-  <div class="bulk-action__container">
-    <div class="flex items-center justify-between">
-      <label class="bulk-action__panel flex items-center justify-between">
-        <input
-          ref="selectAllCheck"
-          type="checkbox"
-          class="checkbox"
-          :checked="allConversationsSelected"
-          :indeterminate.prop="!allConversationsSelected"
-          @change="selectAll($event)"
-        />
-        <span>
-          {{
-            $t('BULK_ACTION.CONVERSATIONS_SELECTED', {
-              conversationCount: conversations.length,
-            })
-          }}
-        </span>
-      </label>
-      <div class="bulk-action__actions flex gap-1 items-center">
-        <woot-button
-          v-tooltip="$t('BULK_ACTION.LABELS.ASSIGN_LABELS')"
-          size="tiny"
-          variant="smooth"
-          color-scheme="secondary"
-          icon="tag"
-          @click="toggleLabelActions"
-        />
-        <woot-button
-          v-tooltip="$t('BULK_ACTION.UPDATE.CHANGE_STATUS')"
-          size="tiny"
-          variant="smooth"
-          color-scheme="secondary"
-          icon="repeat"
-          @click="toggleUpdateActions"
-        />
-        <woot-button
-          v-tooltip="$t('BULK_ACTION.ASSIGN_AGENT_TOOLTIP')"
-          size="tiny"
-          variant="smooth"
-          color-scheme="secondary"
-          icon="person-assign"
-          @click="toggleAgentList"
-        />
-        <woot-button
-          v-tooltip="$t('BULK_ACTION.ASSIGN_TEAM_TOOLTIP')"
-          size="tiny"
-          variant="smooth"
-          color-scheme="secondary"
-          icon="people-team-add"
-          @click="toggleTeamsList"
-        />
-      </div>
-      <transition name="popover-animation">
-        <label-actions
-          v-if="showLabelActions"
-          class="label-actions-box"
-          @assign="assignLabels"
-          @close="showLabelActions = false"
-        />
-      </transition>
-      <transition name="popover-animation">
-        <update-actions
-          v-if="showUpdateActions"
-          class="update-actions-box"
-          :selected-inboxes="selectedInboxes"
-          :conversation-count="conversations.length"
-          :show-resolve="!showResolvedAction"
-          :show-reopen="!showOpenAction"
-          :show-snooze="!showSnoozedAction"
-          @update="updateConversations"
-          @close="showUpdateActions = false"
-        />
-      </transition>
-      <transition name="popover-animation">
-        <agent-selector
-          v-if="showAgentsList"
-          class="agent-actions-box"
-          :selected-inboxes="selectedInboxes"
-          :conversation-count="conversations.length"
-          @select="submit"
-          @close="showAgentsList = false"
-        />
-      </transition>
-      <transition name="popover-animation">
-        <team-actions
-          v-if="showTeamsList"
-          class="team-actions-box"
-          @assign-team="assignTeam"
-          @close="showTeamsList = false"
-        />
-      </transition>
-    </div>
-    <div v-if="allConversationsSelected" class="bulk-action__alert">
-      {{ $t('BULK_ACTION.ALL_CONVERSATIONS_SELECTED_ALERT') }}
-    </div>
-    <woot-modal
-      :show.sync="showCustomTimeSnoozeModal"
-      :on-close="hideCustomSnoozeModal"
-    >
-      <custom-snooze-modal
-        @close="hideCustomSnoozeModal"
-        @choose-time="customSnoozeTime"
-      />
-    </woot-modal>
-  </div>
-</template>
-
 <script>
 import { getUnixTime } from 'date-fns';
 import { findSnoozeTime } from 'dashboard/helper/snoozeHelpers';
@@ -251,6 +142,115 @@ export default {
 };
 </script>
 
+<template>
+  <div class="bulk-action__container">
+    <div class="flex items-center justify-between">
+      <label class="bulk-action__panel flex items-center justify-between">
+        <input
+          ref="selectAllCheck"
+          type="checkbox"
+          class="checkbox"
+          :checked="allConversationsSelected"
+          :indeterminate.prop="!allConversationsSelected"
+          @change="selectAll($event)"
+        />
+        <span>
+          {{
+            $t('BULK_ACTION.CONVERSATIONS_SELECTED', {
+              conversationCount: conversations.length,
+            })
+          }}
+        </span>
+      </label>
+      <div class="bulk-action__actions flex gap-1 items-center">
+        <woot-button
+          v-tooltip="$t('BULK_ACTION.LABELS.ASSIGN_LABELS')"
+          size="tiny"
+          variant="smooth"
+          color-scheme="secondary"
+          icon="tag"
+          @click="toggleLabelActions"
+        />
+        <woot-button
+          v-tooltip="$t('BULK_ACTION.UPDATE.CHANGE_STATUS')"
+          size="tiny"
+          variant="smooth"
+          color-scheme="secondary"
+          icon="repeat"
+          @click="toggleUpdateActions"
+        />
+        <woot-button
+          v-tooltip="$t('BULK_ACTION.ASSIGN_AGENT_TOOLTIP')"
+          size="tiny"
+          variant="smooth"
+          color-scheme="secondary"
+          icon="person-assign"
+          @click="toggleAgentList"
+        />
+        <woot-button
+          v-tooltip="$t('BULK_ACTION.ASSIGN_TEAM_TOOLTIP')"
+          size="tiny"
+          variant="smooth"
+          color-scheme="secondary"
+          icon="people-team-add"
+          @click="toggleTeamsList"
+        />
+      </div>
+      <transition name="popover-animation">
+        <label-actions
+          v-if="showLabelActions"
+          class="label-actions-box"
+          @assign="assignLabels"
+          @close="showLabelActions = false"
+        />
+      </transition>
+      <transition name="popover-animation">
+        <update-actions
+          v-if="showUpdateActions"
+          class="update-actions-box"
+          :selected-inboxes="selectedInboxes"
+          :conversation-count="conversations.length"
+          :show-resolve="!showResolvedAction"
+          :show-reopen="!showOpenAction"
+          :show-snooze="!showSnoozedAction"
+          @update="updateConversations"
+          @close="showUpdateActions = false"
+        />
+      </transition>
+      <transition name="popover-animation">
+        <agent-selector
+          v-if="showAgentsList"
+          class="agent-actions-box"
+          :selected-inboxes="selectedInboxes"
+          :conversation-count="conversations.length"
+          @select="submit"
+          @close="showAgentsList = false"
+        />
+      </transition>
+      <transition name="popover-animation">
+        <team-actions
+          v-if="showTeamsList"
+          class="team-actions-box"
+          @assign-team="assignTeam"
+          @close="showTeamsList = false"
+        />
+      </transition>
+    </div>
+    <div v-if="allConversationsSelected" class="bulk-action__alert">
+      {{ $t('BULK_ACTION.ALL_CONVERSATIONS_SELECTED_ALERT') }}
+    </div>
+    <woot-modal
+      :show.sync="showCustomTimeSnoozeModal"
+      :on-close="hideCustomSnoozeModal"
+    >
+      <custom-snooze-modal
+        @close="hideCustomSnoozeModal"
+        @choose-time="customSnoozeTime"
+      />
+    </woot-modal>
+  </div>
+</template>
+
 <style scoped lang="scss">
 // For RTL direction view
 .app-rtl--wrapper {
diff --git a/app/javascript/dashboard/components/widgets/conversation/conversationBulkActions/LabelActions.vue b/app/javascript/dashboard/components/widgets/conversation/conversationBulkActions/LabelActions.vue
index 80224532a..5093ffc2f 100644
--- a/app/javascript/dashboard/components/widgets/conversation/conversationBulkActions/LabelActions.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/conversationBulkActions/LabelActions.vue
@@ -1,3 +1,35 @@
+<script>
+import { mapGetters } from 'vuex';
+
+export default {
+  data() {
+    return {
+      query: '',
+      selectedLabels: [],
+    };
+  },
+  computed: {
+    ...mapGetters({ labels: 'labels/getLabels' }),
+    filteredLabels() {
+      return this.labels.filter(label =>
+        label.title.toLowerCase().includes(this.query.toLowerCase())
+      );
+    },
+  },
+  methods: {
+    isLabelSelected(label) {
+      return this.selectedLabels.includes(label);
+    },
+    assignLabels(key) {
+      this.$emit('update', key);
+    },
+    onClose() {
+      this.$emit('close');
+    },
+  },
+};
+</script>
+
 <template>
   <div v-on-clickaway="onClose" class="labels-container">
     <div class="triangle">
@@ -73,38 +105,6 @@
   </div>
 </template>
 
-<script>
-import { mapGetters } from 'vuex';
-
-export default {
-  data() {
-    return {
-      query: '',
-      selectedLabels: [],
-    };
-  },
-  computed: {
-    ...mapGetters({ labels: 'labels/getLabels' }),
-    filteredLabels() {
-      return this.labels.filter(label =>
-        label.title.toLowerCase().includes(this.query.toLowerCase())
-      );
-    },
-  },
-  methods: {
-    isLabelSelected(label) {
-      return this.selectedLabels.includes(label);
-    },
-    assignLabels(key) {
-      this.$emit('update', key);
-    },
-    onClose() {
-      this.$emit('close');
-    },
-  },
-};
-</script>
-
 <style scoped lang="scss">
 .labels-list {
   @apply flex flex-col max-h-[15rem] min-h-[auto];
diff --git a/app/javascript/dashboard/components/widgets/conversation/conversationBulkActions/TeamActions.vue b/app/javascript/dashboard/components/widgets/conversation/conversationBulkActions/TeamActions.vue
index fcfaa61df..31977d49f 100644
--- a/app/javascript/dashboard/components/widgets/conversation/conversationBulkActions/TeamActions.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/conversationBulkActions/TeamActions.vue
@@ -1,3 +1,34 @@
+<script>
+import { mapGetters } from 'vuex';
+export default {
+  data() {
+    return {
+      query: '',
+      selectedteams: [],
+    };
+  },
+  computed: {
+    ...mapGetters({ teams: 'teams/getTeams' }),
+    filteredTeams() {
+      return [
+        { name: 'None', id: 0 },
+        ...this.teams.filter(team =>
+          team.name.toLowerCase().includes(this.query.toLowerCase())
+        ),
+      ];
+    },
+  },
+  methods: {
+    assignTeam(key) {
+      this.$emit('assign-team', key);
+    },
+    onClose() {
+      this.$emit('close');
+    },
+  },
+};
+</script>
+
 <template>
   <div v-on-clickaway="onClose" class="bulk-action__teams">
     <div class="triangle">
@@ -58,37 +89,6 @@
   </div>
 </template>
 
-<script>
-import { mapGetters } from 'vuex';
-export default {
-  data() {
-    return {
-      query: '',
-      selectedteams: [],
-    };
-  },
-  computed: {
-    ...mapGetters({ teams: 'teams/getTeams' }),
-    filteredTeams() {
-      return [
-        { name: 'None', id: 0 },
-        ...this.teams.filter(team =>
-          team.name.toLowerCase().includes(this.query.toLowerCase())
-        ),
-      ];
-    },
-  },
-  methods: {
-    assignTeam(key) {
-      this.$emit('assign-team', key);
-    },
-    onClose() {
-      this.$emit('close');
-    },
-  },
-};
-</script>
-
 <style scoped lang="scss">
 .bulk-action__teams {
   @apply max-w-[75%] absolute right-2 top-12 origin-top-right w-auto z-20 min-w-[15rem] bg-white dark:bg-slate-800 rounded-lg border border-solid border-slate-50 dark:border-slate-700 shadow-md;
diff --git a/app/javascript/dashboard/components/widgets/conversation/conversationCardComponents/CardLabels.vue b/app/javascript/dashboard/components/widgets/conversation/conversationCardComponents/CardLabels.vue
index 079d1c7bf..c63121e77 100644
--- a/app/javascript/dashboard/components/widgets/conversation/conversationCardComponents/CardLabels.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/conversationCardComponents/CardLabels.vue
@@ -1,42 +1,3 @@
-<template>
-  <div
-    v-if="activeLabels.length || $slots.before"
-    ref="labelContainer"
-    v-resize="computeVisibleLabelPosition"
-  >
-    <div
-      class="flex items-end flex-shrink min-w-0 gap-y-1"
-      :class="{ 'h-auto overflow-visible flex-row flex-wrap': showAllLabels }"
-    >
-      <slot name="before" />
-      <woot-label
-        v-for="(label, index) in activeLabels"
-        :key="label.id"
-        :title="label.title"
-        :description="label.description"
-        :color="label.color"
-        variant="smooth"
-        class="!mb-0 max-w-[calc(100%-0.5rem)]"
-        small
-        :class="{ hidden: !showAllLabels && index > labelPosition }"
-      />
-      <woot-button
-        v-if="showExpandLabelButton"
-        :title="
-          showAllLabels
-            ? $t('CONVERSATION.CARD.HIDE_LABELS')
-            : $t('CONVERSATION.CARD.SHOW_LABELS')
-        "
-        class="sticky right-0 flex-shrink-0 mr-6 show-more--button rtl:rotate-180"
-        color-scheme="secondary"
-        variant="hollow"
-        :icon="showAllLabels ? 'chevron-left' : 'chevron-right'"
-        size="tiny"
-        @click="onShowLabels"
-      />
-    </div>
-  </div>
-</template>
 <script>
 import conversationLabelMixin from 'dashboard/mixins/conversation/labelMixin';
 export default {
@@ -99,6 +60,45 @@ export default {
   },
 };
 </script>
+<template>
+  <div
+    v-if="activeLabels.length || $slots.before"
+    ref="labelContainer"
+    v-resize="computeVisibleLabelPosition"
+  >
+    <div
+      class="flex items-end flex-shrink min-w-0 gap-y-1"
+      :class="{ 'h-auto overflow-visible flex-row flex-wrap': showAllLabels }"
+    >
+      <slot name="before" />
+      <woot-label
+        v-for="(label, index) in activeLabels"
+        :key="label.id"
+        :title="label.title"
+        :description="label.description"
+        :color="label.color"
+        variant="smooth"
+        class="!mb-0 max-w-[calc(100%-0.5rem)]"
+        small
+        :class="{ hidden: !showAllLabels && index > labelPosition }"
+      />
+      <woot-button
+        v-if="showExpandLabelButton"
+        :title="
+          showAllLabels
+            ? $t('CONVERSATION.CARD.HIDE_LABELS')
+            : $t('CONVERSATION.CARD.SHOW_LABELS')
+        "
+        class="sticky right-0 flex-shrink-0 mr-6 show-more--button rtl:rotate-180"
+        color-scheme="secondary"
+        variant="hollow"
+        :icon="showAllLabels ? 'chevron-left' : 'chevron-right'"
+        size="tiny"
+        @click="onShowLabels"
+      />
+    </div>
+  </div>
+</template>
 
 <style lang="scss" scoped>
 .show-more--button {
diff --git a/app/javascript/dashboard/components/widgets/conversation/linear/CreateIssue.vue b/app/javascript/dashboard/components/widgets/conversation/linear/CreateIssue.vue
index e2859e890..99d7c7e12 100644
--- a/app/javascript/dashboard/components/widgets/conversation/linear/CreateIssue.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/linear/CreateIssue.vue
@@ -1,63 +1,3 @@
-<template>
-  <div>
-    <woot-input
-      v-model="formState.title"
-      :class="{ error: v$.title.$error }"
-      class="w-full"
-      :styles="{ ...inputStyles, padding: '6px 12px' }"
-      :label="$t('INTEGRATION_SETTINGS.LINEAR.ADD_OR_LINK.FORM.TITLE.LABEL')"
-      :placeholder="
-        $t('INTEGRATION_SETTINGS.LINEAR.ADD_OR_LINK.FORM.TITLE.PLACEHOLDER')
-      "
-      :error="nameError"
-      @input="v$.title.$touch"
-    />
-    <label>
-      {{ $t('INTEGRATION_SETTINGS.LINEAR.ADD_OR_LINK.FORM.DESCRIPTION.LABEL') }}
-      <textarea
-        v-model="formState.description"
-        :style="{ ...inputStyles, padding: '8px 12px' }"
-        rows="3"
-        class="text-sm"
-        :placeholder="
-          $t(
-            'INTEGRATION_SETTINGS.LINEAR.ADD_OR_LINK.FORM.DESCRIPTION.PLACEHOLDER'
-          )
-        "
-      />
-    </label>
-    <div class="flex flex-col gap-4">
-      <searchable-dropdown
-        v-for="dropdown in dropdowns"
-        :key="dropdown.type"
-        :type="dropdown.type"
-        :value="formState[dropdown.type]"
-        :label="$t(dropdown.label)"
-        :items="dropdown.items"
-        :placeholder="$t(dropdown.placeholder)"
-        :error="dropdown.error"
-        @change="onChange"
-      />
-    </div>
-    <div class="flex items-center justify-end w-full gap-2 mt-8">
-      <woot-button
-        class="px-4 rounded-xl button clear outline-woot-200/50 outline"
-        @click.prevent="onClose"
-      >
-        {{ $t('INTEGRATION_SETTINGS.LINEAR.ADD_OR_LINK.CANCEL') }}
-      </woot-button>
-      <woot-button
-        :is-disabled="isSubmitDisabled"
-        class="px-4 rounded-xl"
-        :is-loading="isCreating"
-        @click.prevent="createIssue"
-      >
-        {{ $t('INTEGRATION_SETTINGS.LINEAR.ADD_OR_LINK.CREATE') }}
-      </woot-button>
-    </div>
-  </div>
-</template>
-
 <script setup>
 import { reactive, computed, onMounted, ref } from 'vue';
 import { useVuelidate } from '@vuelidate/core';
@@ -266,3 +206,63 @@ const createIssue = async () => {
 
 onMounted(getTeams);
 </script>
+
+<template>
+  <div>
+    <woot-input
+      v-model="formState.title"
+      :class="{ error: v$.title.$error }"
+      class="w-full"
+      :styles="{ ...inputStyles, padding: '6px 12px' }"
+      :label="$t('INTEGRATION_SETTINGS.LINEAR.ADD_OR_LINK.FORM.TITLE.LABEL')"
+      :placeholder="
+        $t('INTEGRATION_SETTINGS.LINEAR.ADD_OR_LINK.FORM.TITLE.PLACEHOLDER')
+      "
+      :error="nameError"
+      @input="v$.title.$touch"
+    />
+    <label>
+      {{ $t('INTEGRATION_SETTINGS.LINEAR.ADD_OR_LINK.FORM.DESCRIPTION.LABEL') }}
+      <textarea
+        v-model="formState.description"
+        :style="{ ...inputStyles, padding: '8px 12px' }"
+        rows="3"
+        class="text-sm"
+        :placeholder="
+          $t(
+            'INTEGRATION_SETTINGS.LINEAR.ADD_OR_LINK.FORM.DESCRIPTION.PLACEHOLDER'
+          )
+        "
+      />
+    </label>
+    <div class="flex flex-col gap-4">
+      <searchable-dropdown
+        v-for="dropdown in dropdowns"
+        :key="dropdown.type"
+        :type="dropdown.type"
+        :value="formState[dropdown.type]"
+        :label="$t(dropdown.label)"
+        :items="dropdown.items"
+        :placeholder="$t(dropdown.placeholder)"
+        :error="dropdown.error"
+        @change="onChange"
+      />
+    </div>
+    <div class="flex items-center justify-end w-full gap-2 mt-8">
+      <woot-button
+        class="px-4 rounded-xl button clear outline-woot-200/50 outline"
+        @click.prevent="onClose"
+      >
+        {{ $t('INTEGRATION_SETTINGS.LINEAR.ADD_OR_LINK.CANCEL') }}
+      </woot-button>
+      <woot-button
+        :is-disabled="isSubmitDisabled"
+        class="px-4 rounded-xl"
+        :is-loading="isCreating"
+        @click.prevent="createIssue"
+      >
+        {{ $t('INTEGRATION_SETTINGS.LINEAR.ADD_OR_LINK.CREATE') }}
+      </woot-button>
+    </div>
+  </div>
+</template>
diff --git a/app/javascript/dashboard/components/widgets/conversation/linear/CreateOrLinkIssue.vue b/app/javascript/dashboard/components/widgets/conversation/linear/CreateOrLinkIssue.vue
index 589178853..88cb5f2dd 100644
--- a/app/javascript/dashboard/components/widgets/conversation/linear/CreateOrLinkIssue.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/linear/CreateOrLinkIssue.vue
@@ -1,46 +1,3 @@
-<template>
-  <div class="flex flex-col h-auto overflow-auto">
-    <woot-modal-header
-      :header-title="$t('INTEGRATION_SETTINGS.LINEAR.ADD_OR_LINK.TITLE')"
-      :header-content="
-        $t('INTEGRATION_SETTINGS.LINEAR.ADD_OR_LINK.DESCRIPTION')
-      "
-    />
-
-    <div class="flex flex-col h-auto overflow-auto">
-      <div class="flex flex-col px-8 pb-4">
-        <woot-tabs
-          class="ltr:[&>ul]:pl-0 rtl:[&>ul]:pr-0"
-          :index="selectedTabIndex"
-          @change="onClickTabChange"
-        >
-          <woot-tabs-item
-            v-for="tab in tabs"
-            :key="tab.key"
-            :name="tab.name"
-            :show-badge="false"
-          />
-        </woot-tabs>
-      </div>
-      <div v-if="selectedTabIndex === 0" class="flex flex-col px-8 pb-4">
-        <create-issue
-          :account-id="accountId"
-          :conversation-id="conversation.id"
-          :title="title"
-          @close="onClose"
-        />
-      </div>
-
-      <div v-else class="flex flex-col px-8 pb-4">
-        <link-issue
-          :conversation-id="conversation.id"
-          :title="title"
-          @close="onClose"
-        />
-      </div>
-    </div>
-  </div>
-</template>
 <script setup>
 import { useI18n } from 'dashboard/composables/useI18n';
 import { computed, ref } from 'vue';
@@ -90,3 +47,46 @@ const onClickTabChange = index => {
   selectedTabIndex.value = index;
 };
 </script>
+<template>
+  <div class="flex flex-col h-auto overflow-auto">
+    <woot-modal-header
+      :header-title="$t('INTEGRATION_SETTINGS.LINEAR.ADD_OR_LINK.TITLE')"
+      :header-content="
+        $t('INTEGRATION_SETTINGS.LINEAR.ADD_OR_LINK.DESCRIPTION')
+      "
+    />
+
+    <div class="flex flex-col h-auto overflow-auto">
+      <div class="flex flex-col px-8 pb-4">
+        <woot-tabs
+          class="ltr:[&>ul]:pl-0 rtl:[&>ul]:pr-0"
+          :index="selectedTabIndex"
+          @change="onClickTabChange"
+        >
+          <woot-tabs-item
+            v-for="tab in tabs"
+            :key="tab.key"
+            :name="tab.name"
+            :show-badge="false"
+          />
+        </woot-tabs>
+      </div>
+      <div v-if="selectedTabIndex === 0" class="flex flex-col px-8 pb-4">
+        <create-issue
+          :account-id="accountId"
+          :conversation-id="conversation.id"
+          :title="title"
+          @close="onClose"
+        />
+      </div>
+
+      <div v-else class="flex flex-col px-8 pb-4">
+        <link-issue
+          :conversation-id="conversation.id"
+          :title="title"
+          @close="onClose"
+        />
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/app/javascript/dashboard/components/widgets/conversation/linear/IssueHeader.vue b/app/javascript/dashboard/components/widgets/conversation/linear/IssueHeader.vue
index add7b5608..be94792ae 100644
--- a/app/javascript/dashboard/components/widgets/conversation/linear/IssueHeader.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/linear/IssueHeader.vue
@@ -1,3 +1,29 @@
+<script setup>
+import { inject } from 'vue';
+const props = defineProps({
+  identifier: {
+    type: String,
+    required: true,
+  },
+  issueUrl: {
+    type: String,
+    required: true,
+  },
+});
+
+const isUnlinking = inject('isUnlinking');
+
+const emit = defineEmits(['unlink-issue']);
+
+const unlinkIssue = () => {
+  emit('unlink-issue');
+};
+
+const openIssue = () => {
+  window.open(props.issueUrl, '_blank');
+};
+</script>
+
 <template>
   <div class="flex flex-row justify-between">
     <div
@@ -38,29 +64,3 @@
     </div>
   </div>
 </template>
-
-<script setup>
-import { inject } from 'vue';
-const props = defineProps({
-  identifier: {
-    type: String,
-    required: true,
-  },
-  issueUrl: {
-    type: String,
-    required: true,
-  },
-});
-
-const isUnlinking = inject('isUnlinking');
-
-const emit = defineEmits(['unlink-issue']);
-
-const unlinkIssue = () => {
-  emit('unlink-issue');
-};
-
-const openIssue = () => {
-  window.open(props.issueUrl, '_blank');
-};
-</script>
diff --git a/app/javascript/dashboard/components/widgets/conversation/linear/LinkIssue.vue b/app/javascript/dashboard/components/widgets/conversation/linear/LinkIssue.vue
index 458871c38..6bf98d59b 100644
--- a/app/javascript/dashboard/components/widgets/conversation/linear/LinkIssue.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/linear/LinkIssue.vue
@@ -1,50 +1,3 @@
-<template>
-  <div
-    class="flex flex-col justify-between"
-    :class="shouldShowDropdown ? 'h-[256px]' : 'gap-2'"
-  >
-    <filter-button
-      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
-          v-if="issues"
-          v-on-clickaway="toggleDropdown"
-          :show-clear-filter="false"
-          :list-items="issues"
-          :active-filter-id="selectedOption.id"
-          :is-loading="isFetching"
-          :input-placeholder="$t('INTEGRATION_SETTINGS.LINEAR.LINK.SEARCH')"
-          :loading-placeholder="$t('INTEGRATION_SETTINGS.LINEAR.LINK.LOADING')"
-          enable-search
-          class="left-0 flex flex-col w-full overflow-y-auto h-fit !max-h-[160px] md:left-auto md:right-0 top-10"
-          @on-search="onSearch"
-          @click="onSelectIssue"
-        />
-      </template>
-    </filter-button>
-    <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"
-        @click.prevent="onClose"
-      >
-        {{ $t('INTEGRATION_SETTINGS.LINEAR.ADD_OR_LINK.CANCEL') }}
-      </woot-button>
-      <woot-button
-        :is-disabled="isSubmitDisabled"
-        class="px-4 rounded-xl"
-        :is-loading="isLinking"
-        @click.prevent="linkIssue"
-      >
-        {{ $t('INTEGRATION_SETTINGS.LINEAR.LINK.TITLE') }}
-      </woot-button>
-    </div>
-  </div>
-</template>
-
 <script setup>
 import { ref, computed } from 'vue';
 import { useI18n } from 'dashboard/composables/useI18n';
@@ -141,3 +94,50 @@ const linkIssue = async () => {
   }
 };
 </script>
+
+<template>
+  <div
+    class="flex flex-col justify-between"
+    :class="shouldShowDropdown ? 'h-[256px]' : 'gap-2'"
+  >
+    <filter-button
+      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
+          v-if="issues"
+          v-on-clickaway="toggleDropdown"
+          :show-clear-filter="false"
+          :list-items="issues"
+          :active-filter-id="selectedOption.id"
+          :is-loading="isFetching"
+          :input-placeholder="$t('INTEGRATION_SETTINGS.LINEAR.LINK.SEARCH')"
+          :loading-placeholder="$t('INTEGRATION_SETTINGS.LINEAR.LINK.LOADING')"
+          enable-search
+          class="left-0 flex flex-col w-full overflow-y-auto h-fit !max-h-[160px] md:left-auto md:right-0 top-10"
+          @on-search="onSearch"
+          @click="onSelectIssue"
+        />
+      </template>
+    </filter-button>
+    <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"
+        @click.prevent="onClose"
+      >
+        {{ $t('INTEGRATION_SETTINGS.LINEAR.ADD_OR_LINK.CANCEL') }}
+      </woot-button>
+      <woot-button
+        :is-disabled="isSubmitDisabled"
+        class="px-4 rounded-xl"
+        :is-loading="isLinking"
+        @click.prevent="linkIssue"
+      >
+        {{ $t('INTEGRATION_SETTINGS.LINEAR.LINK.TITLE') }}
+      </woot-button>
+    </div>
+  </div>
+</template>
diff --git a/app/javascript/dashboard/components/widgets/conversation/linear/SearchableDropdown.vue b/app/javascript/dashboard/components/widgets/conversation/linear/SearchableDropdown.vue
index 70167147b..67bb220ad 100644
--- a/app/javascript/dashboard/components/widgets/conversation/linear/SearchableDropdown.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/linear/SearchableDropdown.vue
@@ -1,34 +1,3 @@
-<template>
-  <div
-    class="flex w-full"
-    :class="type === 'stateId' && shouldShowDropdown ? 'h-[150px]' : 'gap-2'"
-  >
-    <label class="w-full" :class="{ error: hasError }">
-      {{ label }}
-      <filter-button
-        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
-            v-on-clickaway="toggleDropdown"
-            :show-clear-filter="false"
-            :list-items="items"
-            :active-filter-id="selectedItemId"
-            :input-placeholder="placeholder"
-            enable-search
-            class="left-0 flex flex-col w-full overflow-y-auto h-fit !max-h-[160px] md:left-auto md:right-0 top-10"
-            @click="onSelect"
-          />
-        </template>
-      </filter-button>
-      <span v-if="hasError" class="mt-1 message">{{ error }}</span>
-    </label>
-  </div>
-</template>
-
 <script setup>
 import { ref, computed, defineComponent } from 'vue';
 import FilterButton from 'dashboard/components/ui/Dropdown/DropdownButton.vue';
@@ -71,3 +40,34 @@ const selectedItemName = computed(
 
 const selectedItemId = computed(() => selectedItem.value?.id || null);
 </script>
+
+<template>
+  <div
+    class="flex w-full"
+    :class="type === 'stateId' && shouldShowDropdown ? 'h-[150px]' : 'gap-2'"
+  >
+    <label class="w-full" :class="{ error: hasError }">
+      {{ label }}
+      <filter-button
+        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
+            v-on-clickaway="toggleDropdown"
+            :show-clear-filter="false"
+            :list-items="items"
+            :active-filter-id="selectedItemId"
+            :input-placeholder="placeholder"
+            enable-search
+            class="left-0 flex flex-col w-full overflow-y-auto h-fit !max-h-[160px] md:left-auto md:right-0 top-10"
+            @click="onSelect"
+          />
+        </template>
+      </filter-button>
+      <span v-if="hasError" class="mt-1 message">{{ error }}</span>
+    </label>
+  </div>
+</template>
diff --git a/app/javascript/dashboard/components/widgets/conversation/linear/index.vue b/app/javascript/dashboard/components/widgets/conversation/linear/index.vue
index c7861b039..3fd6baf3f 100644
--- a/app/javascript/dashboard/components/widgets/conversation/linear/index.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/linear/index.vue
@@ -1,44 +1,3 @@
-<template>
-  <div class="relative" :class="{ group: linkedIssue }">
-    <woot-button
-      v-on-clickaway="closeIssue"
-      v-tooltip="tooltipText"
-      variant="clear"
-      color-scheme="secondary"
-      @click="openIssue"
-    >
-      <fluent-icon
-        icon="linear"
-        size="19"
-        class="text-[#5E6AD2]"
-        view-box="0 0 19 19"
-      />
-      <span v-if="linkedIssue" class="text-xs font-medium text-ash-800">
-        {{ linkedIssue.issue.identifier }}
-      </span>
-    </woot-button>
-    <issue
-      v-if="linkedIssue"
-      :issue="linkedIssue.issue"
-      :link-id="linkedIssue.id"
-      class="absolute right-0 top-[40px] invisible group-hover:visible"
-      @unlink-issue="unlinkIssue"
-    />
-    <woot-modal
-      :show.sync="shouldShowPopup"
-      :on-close="closePopup"
-      :close-on-backdrop-click="false"
-      class="!items-start [&>div]:!top-12 [&>div]:sticky"
-    >
-      <create-or-link-issue
-        :conversation="conversation"
-        :account-id="currentAccountId"
-        @close="closePopup"
-      />
-    </woot-modal>
-  </div>
-</template>
-
 <script setup>
 import { computed, ref, onMounted, watch, defineComponent, provide } from 'vue';
 import { useAlert } from 'dashboard/composables';
@@ -139,3 +98,44 @@ onMounted(() => {
   loadLinkedIssue();
 });
 </script>
+
+<template>
+  <div class="relative" :class="{ group: linkedIssue }">
+    <woot-button
+      v-on-clickaway="closeIssue"
+      v-tooltip="tooltipText"
+      variant="clear"
+      color-scheme="secondary"
+      @click="openIssue"
+    >
+      <fluent-icon
+        icon="linear"
+        size="19"
+        class="text-[#5E6AD2]"
+        view-box="0 0 19 19"
+      />
+      <span v-if="linkedIssue" class="text-xs font-medium text-ash-800">
+        {{ linkedIssue.issue.identifier }}
+      </span>
+    </woot-button>
+    <issue
+      v-if="linkedIssue"
+      :issue="linkedIssue.issue"
+      :link-id="linkedIssue.id"
+      class="absolute right-0 top-[40px] invisible group-hover:visible"
+      @unlink-issue="unlinkIssue"
+    />
+    <woot-modal
+      :show.sync="shouldShowPopup"
+      :on-close="closePopup"
+      :close-on-backdrop-click="false"
+      class="!items-start [&>div]:!top-12 [&>div]:sticky"
+    >
+      <create-or-link-issue
+        :conversation="conversation"
+        :account-id="currentAccountId"
+        @close="closePopup"
+      />
+    </woot-modal>
+  </div>
+</template>
diff --git a/app/javascript/dashboard/components/widgets/forms/AvatarUploader.vue b/app/javascript/dashboard/components/widgets/forms/AvatarUploader.vue
index e3dd8c239..f3c57155f 100644
--- a/app/javascript/dashboard/components/widgets/forms/AvatarUploader.vue
+++ b/app/javascript/dashboard/components/widgets/forms/AvatarUploader.vue
@@ -1,38 +1,3 @@
-<template>
-  <div>
-    <label>
-      <span v-if="label">{{ label }}</span>
-    </label>
-    <woot-thumbnail
-      v-if="src"
-      size="80px"
-      :src="src"
-      :username="usernameAvatar"
-    />
-    <div v-if="src && deleteAvatar" class="avatar-delete-btn">
-      <woot-button
-        color-scheme="alert"
-        variant="hollow"
-        size="tiny"
-        type="button"
-        @click="onAvatarDelete"
-      >
-        {{ $t('INBOX_MGMT.DELETE.AVATAR_DELETE_BUTTON_TEXT') }}
-      </woot-button>
-    </div>
-    <label>
-      <input
-        id="file"
-        ref="file"
-        type="file"
-        accept="image/png, image/jpeg, image/jpg, image/gif, image/webp"
-        @change="handleImageUpload"
-      />
-      <slot />
-    </label>
-  </div>
-</template>
-
 <script>
 export default {
   props: {
@@ -71,6 +36,41 @@ export default {
 };
 </script>
 
+<template>
+  <div>
+    <label>
+      <span v-if="label">{{ label }}</span>
+    </label>
+    <woot-thumbnail
+      v-if="src"
+      size="80px"
+      :src="src"
+      :username="usernameAvatar"
+    />
+    <div v-if="src && deleteAvatar" class="avatar-delete-btn">
+      <woot-button
+        color-scheme="alert"
+        variant="hollow"
+        size="tiny"
+        type="button"
+        @click="onAvatarDelete"
+      >
+        {{ $t('INBOX_MGMT.DELETE.AVATAR_DELETE_BUTTON_TEXT') }}
+      </woot-button>
+    </div>
+    <label>
+      <input
+        id="file"
+        ref="file"
+        type="file"
+        accept="image/png, image/jpeg, image/jpg, image/gif, image/webp"
+        @change="handleImageUpload"
+      />
+      <slot />
+    </label>
+  </div>
+</template>
+
 <style lang="scss" scoped>
 .avatar-delete-btn {
   margin-top: var(--space-smaller);
diff --git a/app/javascript/dashboard/components/widgets/forms/Input.vue b/app/javascript/dashboard/components/widgets/forms/Input.vue
index 9ddaf3e5c..0e5b7c5af 100644
--- a/app/javascript/dashboard/components/widgets/forms/Input.vue
+++ b/app/javascript/dashboard/components/widgets/forms/Input.vue
@@ -1,24 +1,3 @@
-<template>
-  <label class="input-container">
-    <span v-if="label">{{ label }}</span>
-    <input
-      class="bg-white dark:bg-slate-900 text-slate-900 dark:text-slate-100 border-slate-200 dark:border-slate-600"
-      :value="value"
-      :type="type"
-      :placeholder="placeholder"
-      :readonly="readonly"
-      :style="styles"
-      @input="onChange"
-      @blur="onBlur"
-    />
-    <p v-if="helpText" class="help-text">{{ helpText }}</p>
-    <span v-if="error" class="message">
-      {{ error }}
-    </span>
-    <slot name="masked" />
-  </label>
-</template>
-
 <script>
 export default {
   props: {
@@ -65,6 +44,27 @@ export default {
   },
 };
 </script>
+
+<template>
+  <label class="input-container">
+    <span v-if="label">{{ label }}</span>
+    <input
+      class="bg-white dark:bg-slate-900 text-slate-900 dark:text-slate-100 border-slate-200 dark:border-slate-600"
+      :value="value"
+      :type="type"
+      :placeholder="placeholder"
+      :readonly="readonly"
+      :style="styles"
+      @input="onChange"
+      @blur="onBlur"
+    />
+    <p v-if="helpText" class="help-text">{{ helpText }}</p>
+    <span v-if="error" class="message">
+      {{ error }}
+    </span>
+    <slot name="masked" />
+  </label>
+</template>
 <style scoped lang="scss">
 .help-text {
   @apply mt-0.5 text-xs not-italic text-slate-600 dark:text-slate-400;
diff --git a/app/javascript/dashboard/components/widgets/forms/PhoneInput.vue b/app/javascript/dashboard/components/widgets/forms/PhoneInput.vue
index 6b09acbac..7a2453bca 100644
--- a/app/javascript/dashboard/components/widgets/forms/PhoneInput.vue
+++ b/app/javascript/dashboard/components/widgets/forms/PhoneInput.vue
@@ -1,96 +1,3 @@
-<template>
-  <div class="phone-input--wrap relative">
-    <div
-      class="flex items-center dark:bg-slate-900 justify-start rounded-md border border-solid"
-      :class="
-        error
-          ? 'border border-solid border-red-400 dark:border-red-400 mb-1'
-          : 'mb-4 border-slate-200 dark:border-slate-600'
-      "
-    >
-      <div
-        class="cursor-pointer py-2 pr-1.5 pl-2 rounded-tl-md rounded-bl-md flex items-center justify-center gap-1.5 bg-slate-25 dark:bg-slate-700 h-10 w-14"
-        @click.prevent="toggleCountryDropdown"
-      >
-        <h5 v-if="activeCountry" class="mb-0">
-          {{ activeCountry.emoji }}
-        </h5>
-        <fluent-icon v-else icon="globe" class="fluent-icon" size="16" />
-        <fluent-icon icon="chevron-down" class="fluent-icon" size="12" />
-      </div>
-      <span
-        v-if="activeDialCode"
-        class="flex bg-white dark:bg-slate-900 text-slate-800 dark:text-slate-100 font-normal text-base leading-normal py-2 pl-2 pr-0"
-      >
-        {{ activeDialCode }}
-      </span>
-      <input
-        ref="phoneNumberInput"
-        :value="phoneNumber"
-        type="tel"
-        class="!mb-0 !rounded-tl-none !rounded-bl-none !border-0 font-normal !w-full dark:!bg-slate-900 text-base !px-1.5 placeholder:font-normal"
-        :placeholder="placeholder"
-        :readonly="readonly"
-        :style="styles"
-        @input="onChange"
-        @blur="onBlur"
-      />
-    </div>
-    <div
-      v-if="showDropdown"
-      ref="dropdown"
-      v-on-clickaway="onOutsideClick"
-      tabindex="0"
-      class="z-10 absolute h-60 w-[12.5rem] shadow-md overflow-y-auto top-10 rounded px-0 pt-0 pb-1 bg-white dark:bg-slate-900"
-      @keydown.prevent.up="moveUp"
-      @keydown.prevent.down="moveDown"
-      @keydown.prevent.enter="
-        onSelectCountry(filteredCountriesBySearch[selectedIndex])
-      "
-    >
-      <div class="top-0 sticky bg-white dark:bg-slate-900 p-1">
-        <input
-          ref="searchbar"
-          v-model="searchCountry"
-          type="text"
-          placeholder="Search"
-          class="!h-8 !mb-0 !text-sm !border !border-solid !border-slate-200 dark:!border-slate-600"
-          @input="onSearchCountry"
-        />
-      </div>
-      <div
-        v-for="(country, index) in filteredCountriesBySearch"
-        ref="dropdownItem"
-        :key="index"
-        class="flex items-center h-7 py-0 px-1 cursor-pointer hover:bg-slate-50 dark:hover:bg-slate-700"
-        :class="{
-          'bg-slate-50 dark:bg-slate-700': country.id === activeCountryCode,
-          'bg-slate-25 dark:bg-slate-800': index === selectedIndex,
-        }"
-        @click="onSelectCountry(country)"
-      >
-        <span class="text-base mr-1">{{ country.emoji }}</span>
-
-        <span
-          class="max-w-[7.5rem] overflow-hidden text-ellipsis whitespace-nowrap"
-        >
-          {{ country.name }}
-        </span>
-        <span class="ml-1 text-slate-300 dark:text-slate-300 text-xs">{{
-          country.dial_code
-        }}</span>
-      </div>
-      <div v-if="filteredCountriesBySearch.length === 0">
-        <span
-          class="flex items-center justify-center text-sm text-slate-500 dark:text-slate-300 mt-4"
-        >
-          No results found
-        </span>
-      </div>
-    </div>
-  </div>
-</template>
-
 <script>
 import countries from 'shared/constants/countries.js';
 import parsePhoneNumber from 'libphonenumber-js';
@@ -258,3 +165,96 @@ export default {
   },
 };
 </script>
+
+<template>
+  <div class="phone-input--wrap relative">
+    <div
+      class="flex items-center dark:bg-slate-900 justify-start rounded-md border border-solid"
+      :class="
+        error
+          ? 'border border-solid border-red-400 dark:border-red-400 mb-1'
+          : 'mb-4 border-slate-200 dark:border-slate-600'
+      "
+    >
+      <div
+        class="cursor-pointer py-2 pr-1.5 pl-2 rounded-tl-md rounded-bl-md flex items-center justify-center gap-1.5 bg-slate-25 dark:bg-slate-700 h-10 w-14"
+        @click.prevent="toggleCountryDropdown"
+      >
+        <h5 v-if="activeCountry" class="mb-0">
+          {{ activeCountry.emoji }}
+        </h5>
+        <fluent-icon v-else icon="globe" class="fluent-icon" size="16" />
+        <fluent-icon icon="chevron-down" class="fluent-icon" size="12" />
+      </div>
+      <span
+        v-if="activeDialCode"
+        class="flex bg-white dark:bg-slate-900 text-slate-800 dark:text-slate-100 font-normal text-base leading-normal py-2 pl-2 pr-0"
+      >
+        {{ activeDialCode }}
+      </span>
+      <input
+        ref="phoneNumberInput"
+        :value="phoneNumber"
+        type="tel"
+        class="!mb-0 !rounded-tl-none !rounded-bl-none !border-0 font-normal !w-full dark:!bg-slate-900 text-base !px-1.5 placeholder:font-normal"
+        :placeholder="placeholder"
+        :readonly="readonly"
+        :style="styles"
+        @input="onChange"
+        @blur="onBlur"
+      />
+    </div>
+    <div
+      v-if="showDropdown"
+      ref="dropdown"
+      v-on-clickaway="onOutsideClick"
+      tabindex="0"
+      class="z-10 absolute h-60 w-[12.5rem] shadow-md overflow-y-auto top-10 rounded px-0 pt-0 pb-1 bg-white dark:bg-slate-900"
+      @keydown.prevent.up="moveUp"
+      @keydown.prevent.down="moveDown"
+      @keydown.prevent.enter="
+        onSelectCountry(filteredCountriesBySearch[selectedIndex])
+      "
+    >
+      <div class="top-0 sticky bg-white dark:bg-slate-900 p-1">
+        <input
+          ref="searchbar"
+          v-model="searchCountry"
+          type="text"
+          placeholder="Search"
+          class="!h-8 !mb-0 !text-sm !border !border-solid !border-slate-200 dark:!border-slate-600"
+          @input="onSearchCountry"
+        />
+      </div>
+      <div
+        v-for="(country, index) in filteredCountriesBySearch"
+        ref="dropdownItem"
+        :key="index"
+        class="flex items-center h-7 py-0 px-1 cursor-pointer hover:bg-slate-50 dark:hover:bg-slate-700"
+        :class="{
+          'bg-slate-50 dark:bg-slate-700': country.id === activeCountryCode,
+          'bg-slate-25 dark:bg-slate-800': index === selectedIndex,
+        }"
+        @click="onSelectCountry(country)"
+      >
+        <span class="text-base mr-1">{{ country.emoji }}</span>
+
+        <span
+          class="max-w-[7.5rem] overflow-hidden text-ellipsis whitespace-nowrap"
+        >
+          {{ country.name }}
+        </span>
+        <span class="ml-1 text-slate-300 dark:text-slate-300 text-xs">{{
+          country.dial_code
+        }}</span>
+      </div>
+      <div v-if="filteredCountriesBySearch.length === 0">
+        <span
+          class="flex items-center justify-center text-sm text-slate-500 dark:text-slate-300 mt-4"
+        >
+          No results found
+        </span>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/app/javascript/dashboard/components/widgets/mentions/MentionBox.vue b/app/javascript/dashboard/components/widgets/mentions/MentionBox.vue
index b8780773f..2b0b42aa3 100644
--- a/app/javascript/dashboard/components/widgets/mentions/MentionBox.vue
+++ b/app/javascript/dashboard/components/widgets/mentions/MentionBox.vue
@@ -1,45 +1,3 @@
-<template>
-  <div
-    ref="mentionsListContainer"
-    class="bg-white dark:bg-slate-800 rounded-md overflow-auto absolute w-full z-20 pb-0 shadow-md left-0 bottom-full max-h-[9.75rem] border border-solid border-slate-100 dark:border-slate-700 mention--box"
-  >
-    <ul class="vertical dropdown menu">
-      <woot-dropdown-item
-        v-for="(item, index) in items"
-        :id="`mention-item-${index}`"
-        :key="item.key"
-        class="!mb-0"
-        @mouseover="onHover(index)"
-      >
-        <button
-          class="flex group flex-col gap-0.5 overflow-hidden cursor-pointer items-start rounded-none py-2.5 px-2.5 justify-center w-full h-full text-left hover:bg-woot-50 dark:hover:bg-woot-800 border-x-0 border-t-0 border-b border-solid border-slate-100 dark:border-slate-700"
-          :class="{
-            ' bg-woot-25 dark:bg-woot-800': index === selectedIndex,
-          }"
-          @click="onListItemSelection(index)"
-        >
-          <p
-            class="text-slate-900 dark:text-slate-100 group-hover:text-woot-500 dark:group-hover:text-woot-500 font-medium mb-0 text-sm overflow-hidden text-ellipsis whitespace-nowrap min-w-0 max-w-full"
-            :class="{
-              'text-woot-500 dark:text-woot-500': index === selectedIndex,
-            }"
-          >
-            {{ item.description }}
-          </p>
-          <p
-            class="text-slate-500 dark:text-slate-300 group-hover:text-woot-500 dark:group-hover:text-woot-500 mb-0 text-xs overflow-hidden text-ellipsis whitespace-nowrap min-w-0 max-w-full"
-            :class="{
-              'text-woot-500 dark:text-woot-500': index === selectedIndex,
-            }"
-          >
-            {{ variableKey(item) }}
-          </p>
-        </button>
-      </woot-dropdown-item>
-    </ul>
-  </div>
-</template>
-
 <script>
 import mentionSelectionKeyboardMixin from './mentionSelectionKeyboardMixin';
 export default {
@@ -102,6 +60,48 @@ export default {
 };
 </script>
 
+<template>
+  <div
+    ref="mentionsListContainer"
+    class="bg-white dark:bg-slate-800 rounded-md overflow-auto absolute w-full z-20 pb-0 shadow-md left-0 bottom-full max-h-[9.75rem] border border-solid border-slate-100 dark:border-slate-700 mention--box"
+  >
+    <ul class="vertical dropdown menu">
+      <woot-dropdown-item
+        v-for="(item, index) in items"
+        :id="`mention-item-${index}`"
+        :key="item.key"
+        class="!mb-0"
+        @mouseover="onHover(index)"
+      >
+        <button
+          class="flex group flex-col gap-0.5 overflow-hidden cursor-pointer items-start rounded-none py-2.5 px-2.5 justify-center w-full h-full text-left hover:bg-woot-50 dark:hover:bg-woot-800 border-x-0 border-t-0 border-b border-solid border-slate-100 dark:border-slate-700"
+          :class="{
+            ' bg-woot-25 dark:bg-woot-800': index === selectedIndex,
+          }"
+          @click="onListItemSelection(index)"
+        >
+          <p
+            class="text-slate-900 dark:text-slate-100 group-hover:text-woot-500 dark:group-hover:text-woot-500 font-medium mb-0 text-sm overflow-hidden text-ellipsis whitespace-nowrap min-w-0 max-w-full"
+            :class="{
+              'text-woot-500 dark:text-woot-500': index === selectedIndex,
+            }"
+          >
+            {{ item.description }}
+          </p>
+          <p
+            class="text-slate-500 dark:text-slate-300 group-hover:text-woot-500 dark:group-hover:text-woot-500 mb-0 text-xs overflow-hidden text-ellipsis whitespace-nowrap min-w-0 max-w-full"
+            :class="{
+              'text-woot-500 dark:text-woot-500': index === selectedIndex,
+            }"
+          >
+            {{ variableKey(item) }}
+          </p>
+        </button>
+      </woot-dropdown-item>
+    </ul>
+  </div>
+</template>
+
 <style scoped lang="scss">
 .mention--box {
   .dropdown-menu__item:last-child > button {
diff --git a/app/javascript/dashboard/components/widgets/modal/ConfirmDeleteModal.vue b/app/javascript/dashboard/components/widgets/modal/ConfirmDeleteModal.vue
index e4ba7dd9e..e1708dc59 100644
--- a/app/javascript/dashboard/components/widgets/modal/ConfirmDeleteModal.vue
+++ b/app/javascript/dashboard/components/widgets/modal/ConfirmDeleteModal.vue
@@ -1,27 +1,3 @@
-<!-- eslint-disable vue/no-mutating-props -->
-<template>
-  <modal :show.sync="show" :on-close="closeModal">
-    <woot-modal-header :header-title="title" :header-content="message" />
-    <form @submit.prevent="onConfirm">
-      <woot-input
-        v-model="value"
-        type="text"
-        :class="{ error: v$.value.$error }"
-        :placeholder="confirmPlaceHolderText"
-        @blur="v$.value.$touch"
-      />
-      <div class="button-wrapper">
-        <woot-button color-scheme="alert" :is-disabled="v$.value.$invalid">
-          {{ confirmText }}
-        </woot-button>
-        <woot-button class="clear" @click.prevent="closeModal">
-          {{ rejectText }}
-        </woot-button>
-      </div>
-    </form>
-  </modal>
-</template>
-
 <script>
 import { useVuelidate } from '@vuelidate/core';
 import { required } from '@vuelidate/validators';
@@ -88,3 +64,27 @@ export default {
   },
 };
 </script>
+
+<!-- eslint-disable vue/no-mutating-props -->
+<template>
+  <modal :show.sync="show" :on-close="closeModal">
+    <woot-modal-header :header-title="title" :header-content="message" />
+    <form @submit.prevent="onConfirm">
+      <woot-input
+        v-model="value"
+        type="text"
+        :class="{ error: v$.value.$error }"
+        :placeholder="confirmPlaceHolderText"
+        @blur="v$.value.$touch"
+      />
+      <div class="button-wrapper">
+        <woot-button color-scheme="alert" :is-disabled="v$.value.$invalid">
+          {{ confirmText }}
+        </woot-button>
+        <woot-button class="clear" @click.prevent="closeModal">
+          {{ rejectText }}
+        </woot-button>
+      </div>
+    </form>
+  </modal>
+</template>
diff --git a/app/javascript/dashboard/components/widgets/modal/ConfirmationModal.vue b/app/javascript/dashboard/components/widgets/modal/ConfirmationModal.vue
index 63765acc0..49726c265 100644
--- a/app/javascript/dashboard/components/widgets/modal/ConfirmationModal.vue
+++ b/app/javascript/dashboard/components/widgets/modal/ConfirmationModal.vue
@@ -1,18 +1,3 @@
-<template>
-  <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">
-        <woot-button variant="clear" @click="cancel">
-          {{ cancelLabel }}
-        </woot-button>
-        <woot-button @click="confirm">
-          {{ confirmLabel }}
-        </woot-button>
-      </div>
-    </div>
-  </modal>
-</template>
 <script>
 import Modal from '../../Modal.vue';
 
@@ -64,3 +49,18 @@ export default {
   },
 };
 </script>
+<template>
+  <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">
+        <woot-button variant="clear" @click="cancel">
+          {{ cancelLabel }}
+        </woot-button>
+        <woot-button @click="confirm">
+          {{ confirmLabel }}
+        </woot-button>
+      </div>
+    </div>
+  </modal>
+</template>
diff --git a/app/javascript/dashboard/components/widgets/modal/DeleteModal.vue b/app/javascript/dashboard/components/widgets/modal/DeleteModal.vue
index 5dbc440d5..f67fd3b18 100644
--- a/app/javascript/dashboard/components/widgets/modal/DeleteModal.vue
+++ b/app/javascript/dashboard/components/widgets/modal/DeleteModal.vue
@@ -1,27 +1,3 @@
-<!-- eslint-disable vue/no-mutating-props -->
-<template>
-  <modal :show.sync="show" :on-close="onClose">
-    <woot-modal-header
-      :header-title="title"
-      :header-content="message"
-      :header-content-value="messageValue"
-    />
-    <div class="flex justify-end items-center gap-2 p-8">
-      <woot-button variant="clear" class="action-button" @click="onClose">
-        {{ rejectText }}
-      </woot-button>
-      <woot-button
-        color-scheme="alert"
-        class="action-button"
-        variant="smooth"
-        @click="onConfirm"
-      >
-        {{ confirmText }}
-      </woot-button>
-    </div>
-  </modal>
-</template>
-
 <script>
 import Modal from '../../Modal.vue';
 
@@ -41,6 +17,30 @@ export default {
   },
 };
 </script>
+
+<!-- eslint-disable vue/no-mutating-props -->
+<template>
+  <modal :show.sync="show" :on-close="onClose">
+    <woot-modal-header
+      :header-title="title"
+      :header-content="message"
+      :header-content-value="messageValue"
+    />
+    <div class="flex items-center justify-end gap-2 p-8">
+      <woot-button variant="clear" class="action-button" @click="onClose">
+        {{ rejectText }}
+      </woot-button>
+      <woot-button
+        color-scheme="alert"
+        class="action-button"
+        variant="smooth"
+        @click="onConfirm"
+      >
+        {{ confirmText }}
+      </woot-button>
+    </div>
+  </modal>
+</template>
 <style lang="scss" scoped>
 .action-button {
   max-width: var(--space-giga);
diff --git a/app/javascript/dashboard/components/widgets/modal/WootKeyShortcutModal.vue b/app/javascript/dashboard/components/widgets/modal/WootKeyShortcutModal.vue
index ffaab7e61..caf2700e3 100644
--- a/app/javascript/dashboard/components/widgets/modal/WootKeyShortcutModal.vue
+++ b/app/javascript/dashboard/components/widgets/modal/WootKeyShortcutModal.vue
@@ -1,3 +1,30 @@
+<script>
+import { SHORTCUT_KEYS } from './constants';
+import Hotkey from 'dashboard/components/base/Hotkey.vue';
+
+export default {
+  components: {
+    Hotkey,
+  },
+  props: {
+    show: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  data() {
+    return {
+      shortcutKeys: SHORTCUT_KEYS,
+    };
+  },
+  methods: {
+    title(item) {
+      return this.$t(`KEYBOARD_SHORTCUTS.TITLE.${item.label}`);
+    },
+  },
+};
+</script>
+
 <template>
   <woot-modal :show="show" size="medium" :on-close="() => $emit('close')">
     <div class="h-auto overflow-auto flex flex-col">
@@ -85,33 +112,6 @@
     </div>
   </woot-modal>
 </template>
-
-<script>
-import { SHORTCUT_KEYS } from './constants';
-import Hotkey from 'dashboard/components/base/Hotkey.vue';
-
-export default {
-  components: {
-    Hotkey,
-  },
-  props: {
-    show: {
-      type: Boolean,
-      default: false,
-    },
-  },
-  data() {
-    return {
-      shortcutKeys: SHORTCUT_KEYS,
-    };
-  },
-  methods: {
-    title(item) {
-      return this.$t(`KEYBOARD_SHORTCUTS.TITLE.${item.label}`);
-    },
-  },
-};
-</script>
 <style scoped>
 .key {
   @apply py-2 px-2.5 font-semibold text-xs text-slate-700 dark:text-slate-100 bg-slate-75 dark:bg-slate-900 shadow border-b-2 rtl:border-l-2 ltr:border-r-2 border-slate-200 dark:border-slate-700;
diff --git a/app/javascript/dashboard/modules/contact/ContactMergeModal.vue b/app/javascript/dashboard/modules/contact/ContactMergeModal.vue
index 811dd27df..836957b84 100644
--- a/app/javascript/dashboard/modules/contact/ContactMergeModal.vue
+++ b/app/javascript/dashboard/modules/contact/ContactMergeModal.vue
@@ -1,23 +1,3 @@
-<!-- eslint-disable vue/no-mutating-props -->
-<template>
-  <woot-modal :show.sync="show" :on-close="onClose">
-    <woot-modal-header
-      :header-title="$t('MERGE_CONTACTS.TITLE')"
-      :header-content="$t('MERGE_CONTACTS.DESCRIPTION')"
-    />
-
-    <merge-contact
-      :primary-contact="primaryContact"
-      :is-searching="isSearching"
-      :is-merging="uiFlags.isMerging"
-      :search-results="searchResults"
-      @search="onContactSearch"
-      @cancel="onClose"
-      @submit="onMergeContacts"
-    />
-  </woot-modal>
-</template>
-
 <script>
 import { useAlert } from 'dashboard/composables';
 import MergeContact from 'dashboard/modules/contact/components/MergeContact.vue';
@@ -88,4 +68,24 @@ export default {
   },
 };
 </script>
+
+<!-- eslint-disable vue/no-mutating-props -->
+<template>
+  <woot-modal :show.sync="show" :on-close="onClose">
+    <woot-modal-header
+      :header-title="$t('MERGE_CONTACTS.TITLE')"
+      :header-content="$t('MERGE_CONTACTS.DESCRIPTION')"
+    />
+
+    <merge-contact
+      :primary-contact="primaryContact"
+      :is-searching="isSearching"
+      :is-merging="uiFlags.isMerging"
+      :search-results="searchResults"
+      @search="onContactSearch"
+      @cancel="onClose"
+      @submit="onMergeContacts"
+    />
+  </woot-modal>
+</template>
 <style lang="scss" scoped></style>
diff --git a/app/javascript/dashboard/modules/contact/components/AddCustomAttribute.vue b/app/javascript/dashboard/modules/contact/components/AddCustomAttribute.vue
index 190e04fe3..9a3163ca1 100644
--- a/app/javascript/dashboard/modules/contact/components/AddCustomAttribute.vue
+++ b/app/javascript/dashboard/modules/contact/components/AddCustomAttribute.vue
@@ -1,41 +1,3 @@
-<!-- eslint-disable vue/no-mutating-props -->
-<template>
-  <modal :show.sync="show" :on-close="onClose">
-    <woot-modal-header
-      :header-title="$t('CUSTOM_ATTRIBUTES.ADD.TITLE')"
-      :header-content="$t('CUSTOM_ATTRIBUTES.ADD.DESC')"
-    />
-    <form class="w-full" @submit.prevent="addCustomAttribute">
-      <woot-input
-        v-model.trim="attributeName"
-        :class="{ error: v$.attributeName.$error }"
-        class="w-full"
-        :error="attributeNameError"
-        :label="$t('CUSTOM_ATTRIBUTES.FORM.NAME.LABEL')"
-        :placeholder="$t('CUSTOM_ATTRIBUTES.FORM.NAME.PLACEHOLDER')"
-        @input="v$.attributeName.$touch"
-      />
-      <woot-input
-        v-model.trim="attributeValue"
-        class="w-full"
-        :label="$t('CUSTOM_ATTRIBUTES.FORM.VALUE.LABEL')"
-        :placeholder="$t('CUSTOM_ATTRIBUTES.FORM.VALUE.PLACEHOLDER')"
-      />
-      <div class="flex items-center justify-end gap-2 px-0 py-2">
-        <woot-button
-          :is-disabled="v$.attributeName.$invalid || isCreating"
-          :is-loading="isCreating"
-        >
-          {{ $t('CUSTOM_ATTRIBUTES.FORM.CREATE') }}
-        </woot-button>
-        <woot-button variant="clear" @click.prevent="onClose">
-          {{ $t('CUSTOM_ATTRIBUTES.FORM.CANCEL') }}
-        </woot-button>
-      </div>
-    </form>
-  </modal>
-</template>
-
 <script>
 import Modal from 'dashboard/components/Modal.vue';
 import { useVuelidate } from '@vuelidate/core';
@@ -98,3 +60,41 @@ export default {
   },
 };
 </script>
+
+<!-- eslint-disable vue/no-mutating-props -->
+<template>
+  <modal :show.sync="show" :on-close="onClose">
+    <woot-modal-header
+      :header-title="$t('CUSTOM_ATTRIBUTES.ADD.TITLE')"
+      :header-content="$t('CUSTOM_ATTRIBUTES.ADD.DESC')"
+    />
+    <form class="w-full" @submit.prevent="addCustomAttribute">
+      <woot-input
+        v-model.trim="attributeName"
+        :class="{ error: v$.attributeName.$error }"
+        class="w-full"
+        :error="attributeNameError"
+        :label="$t('CUSTOM_ATTRIBUTES.FORM.NAME.LABEL')"
+        :placeholder="$t('CUSTOM_ATTRIBUTES.FORM.NAME.PLACEHOLDER')"
+        @input="v$.attributeName.$touch"
+      />
+      <woot-input
+        v-model.trim="attributeValue"
+        class="w-full"
+        :label="$t('CUSTOM_ATTRIBUTES.FORM.VALUE.LABEL')"
+        :placeholder="$t('CUSTOM_ATTRIBUTES.FORM.VALUE.PLACEHOLDER')"
+      />
+      <div class="flex items-center justify-end gap-2 px-0 py-2">
+        <woot-button
+          :is-disabled="v$.attributeName.$invalid || isCreating"
+          :is-loading="isCreating"
+        >
+          {{ $t('CUSTOM_ATTRIBUTES.FORM.CREATE') }}
+        </woot-button>
+        <woot-button variant="clear" @click.prevent="onClose">
+          {{ $t('CUSTOM_ATTRIBUTES.FORM.CANCEL') }}
+        </woot-button>
+      </div>
+    </form>
+  </modal>
+</template>
diff --git a/app/javascript/dashboard/modules/contact/components/ContactAttribute.vue b/app/javascript/dashboard/modules/contact/components/ContactAttribute.vue
index 5dcfd568a..524748164 100644
--- a/app/javascript/dashboard/modules/contact/components/ContactAttribute.vue
+++ b/app/javascript/dashboard/modules/contact/components/ContactAttribute.vue
@@ -1,3 +1,41 @@
+<script>
+import EmojiOrIcon from 'shared/components/EmojiOrIcon.vue';
+
+export default {
+  components: {
+    EmojiOrIcon,
+  },
+  props: {
+    label: { type: String, required: true },
+    icon: { type: String, default: '' },
+    emoji: { type: String, default: '' },
+    value: { type: [String, Number], default: '' },
+    showEdit: { type: Boolean, default: false },
+  },
+  data() {
+    return {
+      isEditing: false,
+      editedValue: this.value,
+    };
+  },
+  methods: {
+    focusInput() {
+      this.$refs.inputfield.focus();
+    },
+    onEdit() {
+      this.isEditing = true;
+      this.$nextTick(() => {
+        this.focusInput();
+      });
+    },
+    onUpdate() {
+      this.isEditing = false;
+      this.$emit('update', this.editedValue);
+    },
+  },
+};
+</script>
+
 <template>
   <div class="contact-attribute">
     <div class="title-wrap">
@@ -49,44 +87,6 @@
   </div>
 </template>
 
-<script>
-import EmojiOrIcon from 'shared/components/EmojiOrIcon.vue';
-
-export default {
-  components: {
-    EmojiOrIcon,
-  },
-  props: {
-    label: { type: String, required: true },
-    icon: { type: String, default: '' },
-    emoji: { type: String, default: '' },
-    value: { type: [String, Number], default: '' },
-    showEdit: { type: Boolean, default: false },
-  },
-  data() {
-    return {
-      isEditing: false,
-      editedValue: this.value,
-    };
-  },
-  methods: {
-    focusInput() {
-      this.$refs.inputfield.focus();
-    },
-    onEdit() {
-      this.isEditing = true;
-      this.$nextTick(() => {
-        this.focusInput();
-      });
-    },
-    onUpdate() {
-      this.isEditing = false;
-      this.$emit('update', this.editedValue);
-    },
-  },
-};
-</script>
-
 <style lang="scss" scoped>
 .contact-attribute {
   margin-bottom: var(--space-small);
diff --git a/app/javascript/dashboard/modules/contact/components/ContactDropdownItem.vue b/app/javascript/dashboard/modules/contact/components/ContactDropdownItem.vue
index a45c5fe2c..13340a750 100644
--- a/app/javascript/dashboard/modules/contact/components/ContactDropdownItem.vue
+++ b/app/javascript/dashboard/modules/contact/components/ContactDropdownItem.vue
@@ -1,28 +1,3 @@
-<template>
-  <div class="option-item--user">
-    <thumbnail :src="thumbnail" size="28px" :username="name" />
-    <div class="option__user-data">
-      <h5 class="option__title">
-        {{ name }}
-        <span v-if="identifier" class="user-identifier">
-          (ID: {{ identifier }})
-        </span>
-      </h5>
-      <p class="option__body">
-        <span v-if="email" class="email-icon-wrap">
-          <fluent-icon class="merge-contact--icon" icon="mail" size="12" />
-          {{ email }}
-        </span>
-        <span v-if="phoneNumber" class="phone-icon-wrap">
-          <fluent-icon class="merge-contact--icon" icon="call" size="12" />
-          {{ phoneNumber }}
-        </span>
-        <span v-if="!phoneNumber && !email">{{ '---' }}</span>
-      </p>
-    </div>
-  </div>
-</template>
-
 <script>
 import Thumbnail from '../../../components/widgets/Thumbnail.vue';
 
@@ -55,6 +30,31 @@ export default {
 };
 </script>
 
+<template>
+  <div class="option-item--user">
+    <thumbnail :src="thumbnail" size="28px" :username="name" />
+    <div class="option__user-data">
+      <h5 class="option__title">
+        {{ name }}
+        <span v-if="identifier" class="user-identifier">
+          (ID: {{ identifier }})
+        </span>
+      </h5>
+      <p class="option__body">
+        <span v-if="email" class="email-icon-wrap">
+          <fluent-icon class="merge-contact--icon" icon="mail" size="12" />
+          {{ email }}
+        </span>
+        <span v-if="phoneNumber" class="phone-icon-wrap">
+          <fluent-icon class="merge-contact--icon" icon="call" size="12" />
+          {{ phoneNumber }}
+        </span>
+        <span v-if="!phoneNumber && !email">{{ '---' }}</span>
+      </p>
+    </div>
+  </div>
+</template>
+
 <style lang="scss" scoped>
 .option-item--user {
   @apply flex items-center;
diff --git a/app/javascript/dashboard/modules/contact/components/ContactFields.vue b/app/javascript/dashboard/modules/contact/components/ContactFields.vue
index b600b3185..96566502a 100644
--- a/app/javascript/dashboard/modules/contact/components/ContactFields.vue
+++ b/app/javascript/dashboard/modules/contact/components/ContactFields.vue
@@ -1,3 +1,53 @@
+<script>
+import Attribute from './ContactAttribute.vue';
+
+export default {
+  components: { Attribute },
+  props: {
+    contact: {
+      type: Object,
+      default: () => ({}),
+    },
+  },
+
+  computed: {
+    additionalAttributes() {
+      return this.contact.additional_attributes || {};
+    },
+    company() {
+      const { company = {} } = this.contact;
+      return company;
+    },
+    customAttributes() {
+      const { custom_attributes: customAttributes = {} } = this.contact;
+      return customAttributes;
+    },
+    customAttributekeys() {
+      return Object.keys(this.customAttributes).filter(key => {
+        const value = this.customAttributes[key];
+        return value !== null && value !== undefined;
+      });
+    },
+  },
+  methods: {
+    onEmailUpdate(value) {
+      this.$emit('update', { email: value });
+    },
+    onPhoneUpdate(value) {
+      this.$emit('update', { phone_number: value });
+    },
+    onLocationUpdate(value) {
+      this.$emit('update', { location: value });
+    },
+    handleCustomCreate() {
+      this.$emit('create-attribute');
+    },
+    onCustomAttributeUpdate(key, value) {
+      this.$emit('update', { custom_attributes: { [key]: value } });
+    },
+  },
+};
+</script>
 <template>
   <div class="contact-fields">
     <h3 class="text-lg title">
@@ -51,56 +101,6 @@
     </woot-button>
   </div>
 </template>
-<script>
-import Attribute from './ContactAttribute.vue';
-
-export default {
-  components: { Attribute },
-  props: {
-    contact: {
-      type: Object,
-      default: () => ({}),
-    },
-  },
-
-  computed: {
-    additionalAttributes() {
-      return this.contact.additional_attributes || {};
-    },
-    company() {
-      const { company = {} } = this.contact;
-      return company;
-    },
-    customAttributes() {
-      const { custom_attributes: customAttributes = {} } = this.contact;
-      return customAttributes;
-    },
-    customAttributekeys() {
-      return Object.keys(this.customAttributes).filter(key => {
-        const value = this.customAttributes[key];
-        return value !== null && value !== undefined;
-      });
-    },
-  },
-  methods: {
-    onEmailUpdate(value) {
-      this.$emit('update', { email: value });
-    },
-    onPhoneUpdate(value) {
-      this.$emit('update', { phone_number: value });
-    },
-    onLocationUpdate(value) {
-      this.$emit('update', { location: value });
-    },
-    handleCustomCreate() {
-      this.$emit('create-attribute');
-    },
-    onCustomAttributeUpdate(key, value) {
-      this.$emit('update', { custom_attributes: { [key]: value } });
-    },
-  },
-};
-</script>
 
 <style scoped lang="scss">
 .contact-fields {
diff --git a/app/javascript/dashboard/modules/contact/components/ContactIntro.vue b/app/javascript/dashboard/modules/contact/components/ContactIntro.vue
index 3d1b7222a..4ffa64b5f 100644
--- a/app/javascript/dashboard/modules/contact/components/ContactIntro.vue
+++ b/app/javascript/dashboard/modules/contact/components/ContactIntro.vue
@@ -1,46 +1,3 @@
-<template>
-  <div class="contact--intro">
-    <thumbnail
-      :src="contact.thumbnail"
-      size="64px"
-      :username="contact.name"
-      :status="contact.availability_status"
-    />
-
-    <div class="contact--details">
-      <h2 class="text-lg contact--name">
-        {{ contact.name }}
-      </h2>
-      <h3 class="text-base contact--work">
-        {{ contact.title }}
-        <i v-if="company.name" class="icon ion-minus-round" />
-        <span class="company-name">{{ company.name }}</span>
-      </h3>
-      <p v-if="additionalAttributes.description" class="contact--bio">
-        {{ additionalAttributes.description }}
-      </p>
-      <social-icons :social-profiles="socialProfiles" />
-    </div>
-    <div class="contact-actions">
-      <woot-button
-        class="new-message"
-        size="small expanded"
-        icon="ion-paper-airplane"
-        @click="onNewMessageClick"
-      >
-        {{ $t('CONTACT_PANEL.NEW_MESSAGE') }}
-      </woot-button>
-      <woot-button
-        variant="hollow"
-        size="small expanded"
-        icon="edit"
-        @click="onEditClick"
-      >
-        {{ $t('EDIT_CONTACT.BUTTON_LABEL') }}
-      </woot-button>
-    </div>
-  </div>
-</template>
 <script>
 import Thumbnail from 'dashboard/components/widgets/Thumbnail.vue';
 import SocialIcons from 'dashboard/routes/dashboard/conversation/contact/SocialIcons.vue';
@@ -84,6 +41,49 @@ export default {
   },
 };
 </script>
+<template>
+  <div class="contact--intro">
+    <thumbnail
+      :src="contact.thumbnail"
+      size="64px"
+      :username="contact.name"
+      :status="contact.availability_status"
+    />
+
+    <div class="contact--details">
+      <h2 class="text-lg contact--name">
+        {{ contact.name }}
+      </h2>
+      <h3 class="text-base contact--work">
+        {{ contact.title }}
+        <i v-if="company.name" class="icon ion-minus-round" />
+        <span class="company-name">{{ company.name }}</span>
+      </h3>
+      <p v-if="additionalAttributes.description" class="contact--bio">
+        {{ additionalAttributes.description }}
+      </p>
+      <social-icons :social-profiles="socialProfiles" />
+    </div>
+    <div class="contact-actions">
+      <woot-button
+        class="new-message"
+        size="small expanded"
+        icon="ion-paper-airplane"
+        @click="onNewMessageClick"
+      >
+        {{ $t('CONTACT_PANEL.NEW_MESSAGE') }}
+      </woot-button>
+      <woot-button
+        variant="hollow"
+        size="small expanded"
+        icon="edit"
+        @click="onEditClick"
+      >
+        {{ $t('EDIT_CONTACT.BUTTON_LABEL') }}
+      </woot-button>
+    </div>
+  </div>
+</template>
 
 <style scoped lang="scss">
 .contact--details {
diff --git a/app/javascript/dashboard/modules/contact/components/ContactPanel.vue b/app/javascript/dashboard/modules/contact/components/ContactPanel.vue
index f9e7a99b4..c18f8baba 100644
--- a/app/javascript/dashboard/modules/contact/components/ContactPanel.vue
+++ b/app/javascript/dashboard/modules/contact/components/ContactPanel.vue
@@ -1,34 +1,3 @@
-<template>
-  <div class="panel">
-    <contact-intro
-      :contact="contact"
-      @message="toggleConversationModal"
-      @edit="toggleEditModal"
-    />
-    <contact-fields
-      :contact="contact"
-      @update="updateField"
-      @create-attribute="toggleCustomAttributeModal"
-    />
-    <edit-contact
-      v-if="showEditModal"
-      :show="showEditModal"
-      :contact="contact"
-      @cancel="toggleEditModal"
-    />
-    <new-conversation
-      v-if="enableNewConversation"
-      :show="showConversationModal"
-      :contact="contact"
-      @cancel="toggleConversationModal"
-    />
-    <add-custom-attribute
-      :show="showCustomAttributeModal"
-      @cancel="toggleCustomAttributeModal"
-      @create="createCustomAttribute"
-    />
-  </div>
-</template>
 <script>
 import EditContact from 'dashboard/routes/dashboard/conversation/contact/EditContact.vue';
 import NewConversation from 'dashboard/routes/dashboard/conversation/contact/NewConversation.vue';
@@ -97,6 +66,37 @@ export default {
   },
 };
 </script>
+<template>
+  <div class="panel">
+    <contact-intro
+      :contact="contact"
+      @message="toggleConversationModal"
+      @edit="toggleEditModal"
+    />
+    <contact-fields
+      :contact="contact"
+      @update="updateField"
+      @create-attribute="toggleCustomAttributeModal"
+    />
+    <edit-contact
+      v-if="showEditModal"
+      :show="showEditModal"
+      :contact="contact"
+      @cancel="toggleEditModal"
+    />
+    <new-conversation
+      v-if="enableNewConversation"
+      :show="showConversationModal"
+      :contact="contact"
+      @cancel="toggleConversationModal"
+    />
+    <add-custom-attribute
+      :show="showCustomAttributeModal"
+      @cancel="toggleCustomAttributeModal"
+      @create="createCustomAttribute"
+    />
+  </div>
+</template>
 
 <style scoped lang="scss">
 .panel {
diff --git a/app/javascript/dashboard/modules/contact/components/MergeContact.vue b/app/javascript/dashboard/modules/contact/components/MergeContact.vue
index ee7102d6f..ea53b9c95 100644
--- a/app/javascript/dashboard/modules/contact/components/MergeContact.vue
+++ b/app/javascript/dashboard/modules/contact/components/MergeContact.vue
@@ -1,3 +1,70 @@
+<script>
+import { useVuelidate } from '@vuelidate/core';
+import { required } from '@vuelidate/validators';
+
+import MergeContactSummary from 'dashboard/modules/contact/components/MergeContactSummary.vue';
+import ContactDropdownItem from './ContactDropdownItem.vue';
+
+export default {
+  components: { MergeContactSummary, ContactDropdownItem },
+  props: {
+    primaryContact: {
+      type: Object,
+      required: true,
+    },
+    isSearching: {
+      type: Boolean,
+      default: false,
+    },
+    isMerging: {
+      type: Boolean,
+      default: false,
+    },
+    searchResults: {
+      type: Array,
+      default: () => [],
+    },
+  },
+  setup() {
+    return { v$: useVuelidate() };
+  },
+  validations: {
+    primaryContact: {
+      required,
+    },
+    parentContact: {
+      required,
+    },
+  },
+  data() {
+    return {
+      parentContact: undefined,
+    };
+  },
+
+  computed: {
+    parentContactName() {
+      return this.parentContact ? this.parentContact.name : '';
+    },
+  },
+  methods: {
+    searchChange(query) {
+      this.$emit('search', query);
+    },
+    onSubmit() {
+      this.v$.$touch();
+      if (this.v$.$invalid) {
+        return;
+      }
+      this.$emit('submit', this.parentContact.id);
+    },
+    onCancel() {
+      this.$emit('cancel');
+    },
+  },
+};
+</script>
+
 <template>
   <form @submit.prevent="onSubmit">
     <div>
@@ -113,73 +180,6 @@
   </form>
 </template>
 
-<script>
-import { useVuelidate } from '@vuelidate/core';
-import { required } from '@vuelidate/validators';
-
-import MergeContactSummary from 'dashboard/modules/contact/components/MergeContactSummary.vue';
-import ContactDropdownItem from './ContactDropdownItem.vue';
-
-export default {
-  components: { MergeContactSummary, ContactDropdownItem },
-  props: {
-    primaryContact: {
-      type: Object,
-      required: true,
-    },
-    isSearching: {
-      type: Boolean,
-      default: false,
-    },
-    isMerging: {
-      type: Boolean,
-      default: false,
-    },
-    searchResults: {
-      type: Array,
-      default: () => [],
-    },
-  },
-  setup() {
-    return { v$: useVuelidate() };
-  },
-  validations: {
-    primaryContact: {
-      required,
-    },
-    parentContact: {
-      required,
-    },
-  },
-  data() {
-    return {
-      parentContact: undefined,
-    };
-  },
-
-  computed: {
-    parentContactName() {
-      return this.parentContact ? this.parentContact.name : '';
-    },
-  },
-  methods: {
-    searchChange(query) {
-      this.$emit('search', query);
-    },
-    onSubmit() {
-      this.v$.$touch();
-      if (this.v$.$invalid) {
-        return;
-      }
-      this.$emit('submit', this.parentContact.id);
-    },
-    onCancel() {
-      this.$emit('cancel');
-    },
-  },
-};
-</script>
-
 <style lang="scss" scoped>
 /* TDOD: Clean errors in forms style */
 .error .message {
diff --git a/app/javascript/dashboard/modules/contact/components/MergeContactSummary.vue b/app/javascript/dashboard/modules/contact/components/MergeContactSummary.vue
index 83c588da7..722d7680a 100644
--- a/app/javascript/dashboard/modules/contact/components/MergeContactSummary.vue
+++ b/app/javascript/dashboard/modules/contact/components/MergeContactSummary.vue
@@ -1,3 +1,18 @@
+<script>
+export default {
+  props: {
+    primaryContactName: {
+      type: String,
+      default: '',
+    },
+    parentContactName: {
+      type: String,
+      default: '',
+    },
+  },
+};
+</script>
+
 <template>
   <div
     v-if="parentContactName"
@@ -31,18 +46,3 @@
     </ul>
   </div>
 </template>
-
-<script>
-export default {
-  props: {
-    primaryContactName: {
-      type: String,
-      default: '',
-    },
-    parentContactName: {
-      type: String,
-      default: '',
-    },
-  },
-};
-</script>
diff --git a/app/javascript/dashboard/modules/conversations/components/MessageContextMenu.vue b/app/javascript/dashboard/modules/conversations/components/MessageContextMenu.vue
index 972a9232f..4c4c68409 100644
--- a/app/javascript/dashboard/modules/conversations/components/MessageContextMenu.vue
+++ b/app/javascript/dashboard/modules/conversations/components/MessageContextMenu.vue
@@ -1,108 +1,3 @@
-<template>
-  <div class="context-menu">
-    <!-- Add To Canned Responses -->
-    <woot-modal
-      v-if="isCannedResponseModalOpen && enabledOptions['cannedResponse']"
-      :show.sync="isCannedResponseModalOpen"
-      :on-close="hideCannedResponseModal"
-    >
-      <add-canned-modal
-        :response-content="plainTextContent"
-        :on-close="hideCannedResponseModal"
-      />
-    </woot-modal>
-    <!-- Translate Content -->
-    <translate-modal
-      v-if="showTranslateModal"
-      :content="messageContent"
-      :content-attributes="contentAttributes"
-      @close="onCloseTranslateModal"
-    />
-    <!-- Confirm Deletion -->
-    <woot-delete-modal
-      v-if="showDeleteModal"
-      class="context-menu--delete-modal"
-      :show.sync="showDeleteModal"
-      :on-close="closeDeleteModal"
-      :on-confirm="confirmDeletion"
-      :title="$t('CONVERSATION.CONTEXT_MENU.DELETE_CONFIRMATION.TITLE')"
-      :message="$t('CONVERSATION.CONTEXT_MENU.DELETE_CONFIRMATION.MESSAGE')"
-      :confirm-text="$t('CONVERSATION.CONTEXT_MENU.DELETE_CONFIRMATION.DELETE')"
-      :reject-text="$t('CONVERSATION.CONTEXT_MENU.DELETE_CONFIRMATION.CANCEL')"
-    />
-    <woot-button
-      icon="more-vertical"
-      color-scheme="secondary"
-      variant="clear"
-      size="small"
-      @click="handleOpen"
-    />
-    <woot-context-menu
-      v-if="isOpen && !isCannedResponseModalOpen"
-      :x="contextMenuPosition.x"
-      :y="contextMenuPosition.y"
-      @close="handleClose"
-    >
-      <div class="menu-container">
-        <menu-item
-          v-if="enabledOptions['replyTo']"
-          :option="{
-            icon: 'arrow-reply',
-            label: $t('CONVERSATION.CONTEXT_MENU.REPLY_TO'),
-          }"
-          variant="icon"
-          @click="handleReplyTo"
-        />
-        <menu-item
-          v-if="enabledOptions['copy']"
-          :option="{
-            icon: 'clipboard',
-            label: $t('CONVERSATION.CONTEXT_MENU.COPY'),
-          }"
-          variant="icon"
-          @click="handleCopy"
-        />
-        <menu-item
-          v-if="enabledOptions['copy']"
-          :option="{
-            icon: 'translate',
-            label: $t('CONVERSATION.CONTEXT_MENU.TRANSLATE'),
-          }"
-          variant="icon"
-          @click="handleTranslate"
-        />
-        <hr />
-        <menu-item
-          :option="{
-            icon: 'link',
-            label: $t('CONVERSATION.CONTEXT_MENU.COPY_PERMALINK'),
-          }"
-          variant="icon"
-          @click="copyLinkToMessage"
-        />
-        <menu-item
-          v-if="enabledOptions['cannedResponse']"
-          :option="{
-            icon: 'comment-add',
-            label: $t('CONVERSATION.CONTEXT_MENU.CREATE_A_CANNED_RESPONSE'),
-          }"
-          variant="icon"
-          @click="showCannedResponseModal"
-        />
-        <hr v-if="enabledOptions['delete']" />
-        <menu-item
-          v-if="enabledOptions['delete']"
-          :option="{
-            icon: 'delete',
-            label: $t('CONVERSATION.CONTEXT_MENU.DELETE'),
-          }"
-          variant="icon"
-          @click="openDeleteModal"
-        />
-      </div>
-    </woot-context-menu>
-  </div>
-</template>
 <script>
 import { useAlert } from 'dashboard/composables';
 import { mapGetters } from 'vuex';
@@ -245,6 +140,111 @@ export default {
   },
 };
 </script>
+<template>
+  <div class="context-menu">
+    <!-- Add To Canned Responses -->
+    <woot-modal
+      v-if="isCannedResponseModalOpen && enabledOptions['cannedResponse']"
+      :show.sync="isCannedResponseModalOpen"
+      :on-close="hideCannedResponseModal"
+    >
+      <add-canned-modal
+        :response-content="plainTextContent"
+        :on-close="hideCannedResponseModal"
+      />
+    </woot-modal>
+    <!-- Translate Content -->
+    <translate-modal
+      v-if="showTranslateModal"
+      :content="messageContent"
+      :content-attributes="contentAttributes"
+      @close="onCloseTranslateModal"
+    />
+    <!-- Confirm Deletion -->
+    <woot-delete-modal
+      v-if="showDeleteModal"
+      class="context-menu--delete-modal"
+      :show.sync="showDeleteModal"
+      :on-close="closeDeleteModal"
+      :on-confirm="confirmDeletion"
+      :title="$t('CONVERSATION.CONTEXT_MENU.DELETE_CONFIRMATION.TITLE')"
+      :message="$t('CONVERSATION.CONTEXT_MENU.DELETE_CONFIRMATION.MESSAGE')"
+      :confirm-text="$t('CONVERSATION.CONTEXT_MENU.DELETE_CONFIRMATION.DELETE')"
+      :reject-text="$t('CONVERSATION.CONTEXT_MENU.DELETE_CONFIRMATION.CANCEL')"
+    />
+    <woot-button
+      icon="more-vertical"
+      color-scheme="secondary"
+      variant="clear"
+      size="small"
+      @click="handleOpen"
+    />
+    <woot-context-menu
+      v-if="isOpen && !isCannedResponseModalOpen"
+      :x="contextMenuPosition.x"
+      :y="contextMenuPosition.y"
+      @close="handleClose"
+    >
+      <div class="menu-container">
+        <menu-item
+          v-if="enabledOptions['replyTo']"
+          :option="{
+            icon: 'arrow-reply',
+            label: $t('CONVERSATION.CONTEXT_MENU.REPLY_TO'),
+          }"
+          variant="icon"
+          @click="handleReplyTo"
+        />
+        <menu-item
+          v-if="enabledOptions['copy']"
+          :option="{
+            icon: 'clipboard',
+            label: $t('CONVERSATION.CONTEXT_MENU.COPY'),
+          }"
+          variant="icon"
+          @click="handleCopy"
+        />
+        <menu-item
+          v-if="enabledOptions['copy']"
+          :option="{
+            icon: 'translate',
+            label: $t('CONVERSATION.CONTEXT_MENU.TRANSLATE'),
+          }"
+          variant="icon"
+          @click="handleTranslate"
+        />
+        <hr />
+        <menu-item
+          :option="{
+            icon: 'link',
+            label: $t('CONVERSATION.CONTEXT_MENU.COPY_PERMALINK'),
+          }"
+          variant="icon"
+          @click="copyLinkToMessage"
+        />
+        <menu-item
+          v-if="enabledOptions['cannedResponse']"
+          :option="{
+            icon: 'comment-add',
+            label: $t('CONVERSATION.CONTEXT_MENU.CREATE_A_CANNED_RESPONSE'),
+          }"
+          variant="icon"
+          @click="showCannedResponseModal"
+        />
+        <hr v-if="enabledOptions['delete']" />
+        <menu-item
+          v-if="enabledOptions['delete']"
+          :option="{
+            icon: 'delete',
+            label: $t('CONVERSATION.CONTEXT_MENU.DELETE'),
+          }"
+          variant="icon"
+          @click="openDeleteModal"
+        />
+      </div>
+    </woot-context-menu>
+  </div>
+</template>
 <style lang="scss" scoped>
 .menu-container {
   @apply p-1 bg-white dark:bg-slate-900 shadow-xl rounded-md;
diff --git a/app/javascript/dashboard/modules/notes/NotesOnContactPage.vue b/app/javascript/dashboard/modules/notes/NotesOnContactPage.vue
index 6690b2d11..23150791c 100644
--- a/app/javascript/dashboard/modules/notes/NotesOnContactPage.vue
+++ b/app/javascript/dashboard/modules/notes/NotesOnContactPage.vue
@@ -1,12 +1,3 @@
-<template>
-  <note-list
-    :is-fetching="uiFlags.isFetching"
-    :notes="notes"
-    @add="onAdd"
-    @delete="onDelete"
-  />
-</template>
-
 <script>
 import { mapGetters } from 'vuex';
 import NoteList from './components/NoteList.vue';
@@ -48,3 +39,12 @@ export default {
   },
 };
 </script>
+
+<template>
+  <note-list
+    :is-fetching="uiFlags.isFetching"
+    :notes="notes"
+    @add="onAdd"
+    @delete="onDelete"
+  />
+</template>
diff --git a/app/javascript/dashboard/modules/notes/components/AddNote.vue b/app/javascript/dashboard/modules/notes/components/AddNote.vue
index 69f999e17..00a047575 100644
--- a/app/javascript/dashboard/modules/notes/components/AddNote.vue
+++ b/app/javascript/dashboard/modules/notes/components/AddNote.vue
@@ -1,26 +1,3 @@
-<template>
-  <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
-      v-model="noteContent"
-      class="input--note"
-      :placeholder="$t('NOTES.ADD.PLACEHOLDER')"
-      :enable-suggestions="false"
-    />
-    <div class="flex justify-end w-full">
-      <woot-button
-        color-scheme="warning"
-        :title="$t('NOTES.ADD.TITLE')"
-        :is-disabled="buttonDisabled"
-        @click="onAdd"
-      >
-        {{ $t('NOTES.ADD.BUTTON') }} (⌘⏎)
-      </woot-button>
-    </div>
-  </div>
-</template>
-
 <script>
 import WootMessageEditor from 'dashboard/components/widgets/WootWriter/Editor.vue';
 import keyboardEventListenerMixins from 'shared/mixins/keyboardEventListenerMixins';
@@ -59,6 +36,29 @@ export default {
 };
 </script>
 
+<template>
+  <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
+      v-model="noteContent"
+      class="input--note"
+      :placeholder="$t('NOTES.ADD.PLACEHOLDER')"
+      :enable-suggestions="false"
+    />
+    <div class="flex justify-end w-full">
+      <woot-button
+        color-scheme="warning"
+        :title="$t('NOTES.ADD.TITLE')"
+        :is-disabled="buttonDisabled"
+        @click="onAdd"
+      >
+        {{ $t('NOTES.ADD.BUTTON') }} (⌘⏎)
+      </woot-button>
+    </div>
+  </div>
+</template>
+
 <style lang="scss" scoped>
 .input--note {
   &::v-deep .ProseMirror-menubar {
diff --git a/app/javascript/dashboard/modules/notes/components/ContactNote.vue b/app/javascript/dashboard/modules/notes/components/ContactNote.vue
index 506049af3..fc818ee07 100644
--- a/app/javascript/dashboard/modules/notes/components/ContactNote.vue
+++ b/app/javascript/dashboard/modules/notes/components/ContactNote.vue
@@ -1,55 +1,3 @@
-<template>
-  <div
-    class="flex flex-col flex-grow p-4 mb-2 overflow-hidden bg-white border border-solid rounded-md shadow-sm border-slate-75 dark:border-slate-700 dark:bg-slate-900 text-slate-700 dark:text-slate-100 note-wrap"
-  >
-    <div class="flex items-end justify-between gap-1 text-xs">
-      <div class="flex items-center">
-        <thumbnail
-          :title="noteAuthorName"
-          :src="noteAuthor.thumbnail"
-          :username="noteAuthorName"
-          size="20px"
-        />
-        <div class="my-0 mx-1 p-0.5 flex flex-row gap-1">
-          <span class="font-medium text-slate-800 dark:text-slate-100">
-            {{ noteAuthorName }}
-          </span>
-          <span class="text-slate-700 dark:text-slate-100">
-            {{ $t('NOTES.LIST.LABEL') }}
-          </span>
-          <span class="font-medium text-slate-700 dark:text-slate-100">
-            {{ readableTime }}
-          </span>
-        </div>
-      </div>
-      <div class="flex invisible actions">
-        <woot-button
-          v-tooltip="$t('NOTES.CONTENT_HEADER.DELETE')"
-          variant="smooth"
-          size="tiny"
-          icon="delete"
-          color-scheme="secondary"
-          @click="toggleDeleteModal"
-        />
-      </div>
-      <woot-delete-modal
-        v-if="showDeleteModal"
-        :show.sync="showDeleteModal"
-        :on-close="closeDelete"
-        :on-confirm="confirmDeletion"
-        :title="$t('DELETE_NOTE.CONFIRM.TITLE')"
-        :message="$t('DELETE_NOTE.CONFIRM.MESSAGE')"
-        :confirm-text="$t('DELETE_NOTE.CONFIRM.YES')"
-        :reject-text="$t('DELETE_NOTE.CONFIRM.NO')"
-      />
-    </div>
-    <p
-      v-dompurify-html="formatMessage(note || '')"
-      class="mt-4 note__content"
-    />
-  </div>
-</template>
-
 <script>
 import Thumbnail from 'dashboard/components/widgets/Thumbnail.vue';
 import messageFormatterMixin from 'shared/mixins/messageFormatterMixin';
@@ -115,6 +63,58 @@ export default {
 };
 </script>
 
+<template>
+  <div
+    class="flex flex-col flex-grow p-4 mb-2 overflow-hidden bg-white border border-solid rounded-md shadow-sm border-slate-75 dark:border-slate-700 dark:bg-slate-900 text-slate-700 dark:text-slate-100 note-wrap"
+  >
+    <div class="flex items-end justify-between gap-1 text-xs">
+      <div class="flex items-center">
+        <thumbnail
+          :title="noteAuthorName"
+          :src="noteAuthor.thumbnail"
+          :username="noteAuthorName"
+          size="20px"
+        />
+        <div class="my-0 mx-1 p-0.5 flex flex-row gap-1">
+          <span class="font-medium text-slate-800 dark:text-slate-100">
+            {{ noteAuthorName }}
+          </span>
+          <span class="text-slate-700 dark:text-slate-100">
+            {{ $t('NOTES.LIST.LABEL') }}
+          </span>
+          <span class="font-medium text-slate-700 dark:text-slate-100">
+            {{ readableTime }}
+          </span>
+        </div>
+      </div>
+      <div class="flex invisible actions">
+        <woot-button
+          v-tooltip="$t('NOTES.CONTENT_HEADER.DELETE')"
+          variant="smooth"
+          size="tiny"
+          icon="delete"
+          color-scheme="secondary"
+          @click="toggleDeleteModal"
+        />
+      </div>
+      <woot-delete-modal
+        v-if="showDeleteModal"
+        :show.sync="showDeleteModal"
+        :on-close="closeDelete"
+        :on-confirm="confirmDeletion"
+        :title="$t('DELETE_NOTE.CONFIRM.TITLE')"
+        :message="$t('DELETE_NOTE.CONFIRM.MESSAGE')"
+        :confirm-text="$t('DELETE_NOTE.CONFIRM.YES')"
+        :reject-text="$t('DELETE_NOTE.CONFIRM.NO')"
+      />
+    </div>
+    <p
+      v-dompurify-html="formatMessage(note || '')"
+      class="mt-4 note__content"
+    />
+  </div>
+</template>
+
 <style lang="scss" scoped>
 // For RTL direction view
 .app-rtl--wrapper {
diff --git a/app/javascript/dashboard/modules/notes/components/NoteList.vue b/app/javascript/dashboard/modules/notes/components/NoteList.vue
index 6061fc769..2a0a9c815 100644
--- a/app/javascript/dashboard/modules/notes/components/NoteList.vue
+++ b/app/javascript/dashboard/modules/notes/components/NoteList.vue
@@ -1,27 +1,3 @@
-<template>
-  <div>
-    <add-note @add="onAddNote" />
-    <contact-note
-      v-for="note in notes"
-      :id="note.id"
-      :key="note.id"
-      :note="note.content"
-      :user="note.user"
-      :created-at="note.created_at"
-      @edit="onEditNote"
-      @delete="onDeleteNote"
-    />
-
-    <div v-if="isFetching" class="text-center p-4 text-base">
-      <spinner size="" />
-      <span>{{ $t('NOTES.FETCHING_NOTES') }}</span>
-    </div>
-    <div v-else-if="!notes.length" class="text-center p-4 text-base">
-      <span>{{ $t('NOTES.NOT_AVAILABLE') }}</span>
-    </div>
-  </div>
-</template>
-
 <script>
 import AddNote from './AddNote.vue';
 import ContactNote from './ContactNote.vue';
@@ -58,3 +34,27 @@ export default {
   },
 };
 </script>
+
+<template>
+  <div>
+    <add-note @add="onAddNote" />
+    <contact-note
+      v-for="note in notes"
+      :id="note.id"
+      :key="note.id"
+      :note="note.content"
+      :user="note.user"
+      :created-at="note.created_at"
+      @edit="onEditNote"
+      @delete="onDeleteNote"
+    />
+
+    <div v-if="isFetching" class="text-center p-4 text-base">
+      <spinner size="" />
+      <span>{{ $t('NOTES.FETCHING_NOTES') }}</span>
+    </div>
+    <div v-else-if="!notes.length" class="text-center p-4 text-base">
+      <span>{{ $t('NOTES.NOT_AVAILABLE') }}</span>
+    </div>
+  </div>
+</template>
diff --git a/app/javascript/dashboard/modules/search/components/MessageContent.vue b/app/javascript/dashboard/modules/search/components/MessageContent.vue
index 4c86862f5..2ef28b5c6 100644
--- a/app/javascript/dashboard/modules/search/components/MessageContent.vue
+++ b/app/javascript/dashboard/modules/search/components/MessageContent.vue
@@ -1,20 +1,3 @@
-<template>
-  <blockquote
-    ref="messageContainer"
-    class="message border-l-2 border-slate-100 dark:border-slate-700"
-  >
-    <p class="header">
-      <strong class="text-slate-700 dark:text-slate-100">
-        {{ author }}
-      </strong>
-      {{ $t('SEARCH.WROTE') }}
-    </p>
-    <read-more :shrink="isOverflowing" @expand="isOverflowing = false">
-      <div v-dompurify-html="prepareContent(content)" class="message-content" />
-    </read-more>
-  </blockquote>
-</template>
-
 <script>
 import messageFormatterMixin from 'shared/mixins/messageFormatterMixin';
 import ReadMore from './ReadMore.vue';
@@ -81,6 +64,23 @@ export default {
 };
 </script>
 
+<template>
+  <blockquote
+    ref="messageContainer"
+    class="message border-l-2 border-slate-100 dark:border-slate-700"
+  >
+    <p class="header">
+      <strong class="text-slate-700 dark:text-slate-100">
+        {{ author }}
+      </strong>
+      {{ $t('SEARCH.WROTE') }}
+    </p>
+    <read-more :shrink="isOverflowing" @expand="isOverflowing = false">
+      <div v-dompurify-html="prepareContent(content)" class="message-content" />
+    </read-more>
+  </blockquote>
+</template>
+
 <style scoped lang="scss">
 .message {
   @apply py-0 px-2 mt-2;
diff --git a/app/javascript/dashboard/modules/search/components/ReadMore.vue b/app/javascript/dashboard/modules/search/components/ReadMore.vue
index f94af7b5f..437556a4d 100644
--- a/app/javascript/dashboard/modules/search/components/ReadMore.vue
+++ b/app/javascript/dashboard/modules/search/components/ReadMore.vue
@@ -1,3 +1,14 @@
+<script>
+export default {
+  props: {
+    shrink: {
+      type: Boolean,
+      default: false,
+    },
+  },
+};
+</script>
+
 <template>
   <div class="read-more">
     <div
@@ -22,17 +33,6 @@
   </div>
 </template>
 
-<script>
-export default {
-  props: {
-    shrink: {
-      type: Boolean,
-      default: false,
-    },
-  },
-};
-</script>
-
 <style scoped>
 @tailwind components;
 @layer components {
diff --git a/app/javascript/dashboard/modules/search/components/SearchHeader.vue b/app/javascript/dashboard/modules/search/components/SearchHeader.vue
index c828f8b0a..431f39d9f 100644
--- a/app/javascript/dashboard/modules/search/components/SearchHeader.vue
+++ b/app/javascript/dashboard/modules/search/components/SearchHeader.vue
@@ -1,27 +1,3 @@
-<template>
-  <div class="input-container" :class="{ 'is-focused': isInputFocused }">
-    <div class="icon-container">
-      <fluent-icon icon="search" class="icon" aria-hidden="true" />
-    </div>
-    <input
-      ref="searchInput"
-      type="search"
-      class="dark:bg-slate-900"
-      :placeholder="$t('SEARCH.INPUT_PLACEHOLDER')"
-      :value="searchQuery"
-      @focus="onFocus"
-      @blur="onBlur"
-      @input="debounceSearch"
-    />
-    <woot-label
-      :title="$t('SEARCH.PLACEHOLDER_KEYBINDING')"
-      :show-close="false"
-      small
-      class="helper-label"
-    />
-  </div>
-</template>
-
 <script>
 export default {
   data() {
@@ -71,6 +47,30 @@ export default {
 };
 </script>
 
+<template>
+  <div class="input-container" :class="{ 'is-focused': isInputFocused }">
+    <div class="icon-container">
+      <fluent-icon icon="search" class="icon" aria-hidden="true" />
+    </div>
+    <input
+      ref="searchInput"
+      type="search"
+      class="dark:bg-slate-900"
+      :placeholder="$t('SEARCH.INPUT_PLACEHOLDER')"
+      :value="searchQuery"
+      @focus="onFocus"
+      @blur="onBlur"
+      @input="debounceSearch"
+    />
+    <woot-label
+      :title="$t('SEARCH.PLACEHOLDER_KEYBINDING')"
+      :show-close="false"
+      small
+      class="helper-label"
+    />
+  </div>
+</template>
+
 <style lang="scss" scoped>
 .input-container {
   transition: border-bottom 0.2s ease-in-out;
diff --git a/app/javascript/dashboard/modules/search/components/SearchInput.vue b/app/javascript/dashboard/modules/search/components/SearchInput.vue
index cfddfcfe6..5cea55b40 100644
--- a/app/javascript/dashboard/modules/search/components/SearchInput.vue
+++ b/app/javascript/dashboard/modules/search/components/SearchInput.vue
@@ -1,3 +1,18 @@
+<script>
+export default {
+  props: {
+    tabs: {
+      type: Array,
+      default: () => [],
+    },
+  },
+  data() {
+    return {};
+  },
+  methods: {},
+};
+</script>
+
 <template>
   <div class="search-input-box">
     <woot-button
@@ -17,21 +32,6 @@
     </woot-button>
   </div>
 </template>
-
-<script>
-export default {
-  props: {
-    tabs: {
-      type: Array,
-      default: () => [],
-    },
-  },
-  data() {
-    return {};
-  },
-  methods: {},
-};
-</script>
 <style lang="scss" scoped>
 .search-input-box {
   @apply p-2;
diff --git a/app/javascript/dashboard/modules/search/components/SearchResultContactItem.vue b/app/javascript/dashboard/modules/search/components/SearchResultContactItem.vue
index 1f5266b5d..9c38bca85 100644
--- a/app/javascript/dashboard/modules/search/components/SearchResultContactItem.vue
+++ b/app/javascript/dashboard/modules/search/components/SearchResultContactItem.vue
@@ -1,27 +1,3 @@
-<template>
-  <router-link :to="navigateTo" class="contact-item">
-    <woot-thumbnail :src="thumbnail" :username="name" size="24px" />
-    <div class="ml-2 rtl:mr-2 rtl:ml-0">
-      <h5 class="text-sm name text-slate-800 dark:text-slate-200">
-        {{ name }}
-      </h5>
-      <p
-        class="m-0 text-slate-600 dark:text-slate-200 gap-1 text-sm flex items-center"
-      >
-        <span v-if="email" class="email text-slate-800 dark:text-slate-200">{{
-          email
-        }}</span>
-        <span v-if="phone" class="separator text-slate-700 dark:text-slate-200">
-          •
-        </span>
-        <span v-if="phone" class="phone text-slate-800 dark:text-slate-200">
-          {{ phone }}
-        </span>
-      </p>
-    </div>
-  </router-link>
-</template>
-
 <script>
 import { frontendURL } from 'dashboard/helper/URLHelper';
 export default {
@@ -59,6 +35,30 @@ export default {
 };
 </script>
 
+<template>
+  <router-link :to="navigateTo" class="contact-item">
+    <woot-thumbnail :src="thumbnail" :username="name" size="24px" />
+    <div class="ml-2 rtl:mr-2 rtl:ml-0">
+      <h5 class="text-sm name text-slate-800 dark:text-slate-200">
+        {{ name }}
+      </h5>
+      <p
+        class="m-0 text-slate-600 dark:text-slate-200 gap-1 text-sm flex items-center"
+      >
+        <span v-if="email" class="email text-slate-800 dark:text-slate-200">{{
+          email
+        }}</span>
+        <span v-if="phone" class="separator text-slate-700 dark:text-slate-200">
+          •
+        </span>
+        <span v-if="phone" class="phone text-slate-800 dark:text-slate-200">
+          {{ phone }}
+        </span>
+      </p>
+    </div>
+  </router-link>
+</template>
+
 <style scoped lang="scss">
 .contact-item {
   @apply cursor-pointer flex items-center p-2 rounded-sm hover:bg-slate-25 dark:hover:bg-slate-800;
diff --git a/app/javascript/dashboard/modules/search/components/SearchResultContactsList.vue b/app/javascript/dashboard/modules/search/components/SearchResultContactsList.vue
index deaae694c..9b8c98fcb 100644
--- a/app/javascript/dashboard/modules/search/components/SearchResultContactsList.vue
+++ b/app/javascript/dashboard/modules/search/components/SearchResultContactsList.vue
@@ -1,26 +1,3 @@
-<template>
-  <search-result-section
-    :title="$t('SEARCH.SECTION.CONTACTS')"
-    :empty="!contacts.length"
-    :query="query"
-    :show-title="showTitle"
-    :is-fetching="isFetching"
-  >
-    <ul v-if="contacts.length" class="search-list">
-      <li v-for="contact in contacts" :key="contact.id">
-        <search-result-contact-item
-          :id="contact.id"
-          :name="contact.name"
-          :email="contact.email"
-          :phone="contact.phone_number"
-          :account-id="accountId"
-          :thumbnail="contact.thumbnail"
-        />
-      </li>
-    </ul>
-  </search-result-section>
-</template>
-
 <script>
 import { mapGetters } from 'vuex';
 
@@ -57,3 +34,26 @@ export default {
   },
 };
 </script>
+
+<template>
+  <search-result-section
+    :title="$t('SEARCH.SECTION.CONTACTS')"
+    :empty="!contacts.length"
+    :query="query"
+    :show-title="showTitle"
+    :is-fetching="isFetching"
+  >
+    <ul v-if="contacts.length" class="search-list">
+      <li v-for="contact in contacts" :key="contact.id">
+        <search-result-contact-item
+          :id="contact.id"
+          :name="contact.name"
+          :email="contact.email"
+          :phone="contact.phone_number"
+          :account-id="accountId"
+          :thumbnail="contact.thumbnail"
+        />
+      </li>
+    </ul>
+  </search-result-section>
+</template>
diff --git a/app/javascript/dashboard/modules/search/components/SearchResultConversationItem.vue b/app/javascript/dashboard/modules/search/components/SearchResultConversationItem.vue
index dc15a6bc4..fa017d7bc 100644
--- a/app/javascript/dashboard/modules/search/components/SearchResultConversationItem.vue
+++ b/app/javascript/dashboard/modules/search/components/SearchResultConversationItem.vue
@@ -1,43 +1,3 @@
-<template>
-  <router-link :to="navigateTo" class="conversation-item">
-    <div class="icon-wrap">
-      <fluent-icon icon="chat-multiple" :size="14" />
-    </div>
-    <div class="conversation-details">
-      <div class="meta-wrap">
-        <div class="flex">
-          <woot-label
-            class="conversation-id"
-            :title="`#${id}`"
-            :show-close="false"
-            small
-          />
-          <div class="inbox-name-wrap">
-            <inbox-name :inbox="inbox" class="mr-2 rtl:mr-0 rtl:ml-2" />
-          </div>
-        </div>
-        <div>
-          <span class="created-at">{{ createdAtTime }}</span>
-        </div>
-      </div>
-      <div class="user-details">
-        <h5 v-if="name" class="text-sm name text-slate-800 dark:text-slate-100">
-          <span class="pre-text"> {{ $t('SEARCH.FROM') }}: </span>
-          {{ name }}
-        </h5>
-        <h5
-          v-if="email"
-          class="overflow-hidden text-sm email text-slate-700 dark:text-slate-200 whitespace-nowrap text-ellipsis"
-        >
-          <span class="pre-text">{{ $t('SEARCH.EMAIL') }}:</span>
-          {{ email }}
-        </h5>
-      </div>
-      <slot />
-    </div>
-  </router-link>
-</template>
-
 <script>
 import { frontendURL } from 'dashboard/helper/URLHelper.js';
 import { dynamicTime } from 'shared/helpers/timeHelper';
@@ -95,6 +55,46 @@ export default {
 };
 </script>
 
+<template>
+  <router-link :to="navigateTo" class="conversation-item">
+    <div class="icon-wrap">
+      <fluent-icon icon="chat-multiple" :size="14" />
+    </div>
+    <div class="conversation-details">
+      <div class="meta-wrap">
+        <div class="flex">
+          <woot-label
+            class="conversation-id"
+            :title="`#${id}`"
+            :show-close="false"
+            small
+          />
+          <div class="inbox-name-wrap">
+            <inbox-name :inbox="inbox" class="mr-2 rtl:mr-0 rtl:ml-2" />
+          </div>
+        </div>
+        <div>
+          <span class="created-at">{{ createdAtTime }}</span>
+        </div>
+      </div>
+      <div class="user-details">
+        <h5 v-if="name" class="text-sm name text-slate-800 dark:text-slate-100">
+          <span class="pre-text"> {{ $t('SEARCH.FROM') }}: </span>
+          {{ name }}
+        </h5>
+        <h5
+          v-if="email"
+          class="overflow-hidden text-sm email text-slate-700 dark:text-slate-200 whitespace-nowrap text-ellipsis"
+        >
+          <span class="pre-text">{{ $t('SEARCH.EMAIL') }}:</span>
+          {{ email }}
+        </h5>
+      </div>
+      <slot />
+    </div>
+  </router-link>
+</template>
+
 <style scoped lang="scss">
 .conversation-item {
   @apply cursor-pointer flex p-2 rounded hover:bg-slate-25 dark:hover:bg-slate-800;
diff --git a/app/javascript/dashboard/modules/search/components/SearchResultConversationsList.vue b/app/javascript/dashboard/modules/search/components/SearchResultConversationsList.vue
index 3c646a85e..4c3964092 100644
--- a/app/javascript/dashboard/modules/search/components/SearchResultConversationsList.vue
+++ b/app/javascript/dashboard/modules/search/components/SearchResultConversationsList.vue
@@ -1,26 +1,3 @@
-<template>
-  <search-result-section
-    :title="$t('SEARCH.SECTION.CONVERSATIONS')"
-    :empty="!conversations.length"
-    :query="query"
-    :show-title="showTitle || isFetching"
-    :is-fetching="isFetching"
-  >
-    <ul v-if="conversations.length" class="search-list">
-      <li v-for="conversation in conversations" :key="conversation.id">
-        <search-result-conversation-item
-          :id="conversation.id"
-          :name="conversation.contact.name"
-          :email="conversation.contact.email"
-          :account-id="accountId"
-          :inbox="conversation.inbox"
-          :created-at="conversation.created_at"
-        />
-      </li>
-    </ul>
-  </search-result-section>
-</template>
-
 <script>
 import { mapGetters } from 'vuex';
 import SearchResultSection from './SearchResultSection.vue';
@@ -56,3 +33,26 @@ export default {
   },
 };
 </script>
+
+<template>
+  <search-result-section
+    :title="$t('SEARCH.SECTION.CONVERSATIONS')"
+    :empty="!conversations.length"
+    :query="query"
+    :show-title="showTitle || isFetching"
+    :is-fetching="isFetching"
+  >
+    <ul v-if="conversations.length" class="search-list">
+      <li v-for="conversation in conversations" :key="conversation.id">
+        <search-result-conversation-item
+          :id="conversation.id"
+          :name="conversation.contact.name"
+          :email="conversation.contact.email"
+          :account-id="accountId"
+          :inbox="conversation.inbox"
+          :created-at="conversation.created_at"
+        />
+      </li>
+    </ul>
+  </search-result-section>
+</template>
diff --git a/app/javascript/dashboard/modules/search/components/SearchResultMessagesList.vue b/app/javascript/dashboard/modules/search/components/SearchResultMessagesList.vue
index d2cdf0cb4..c4ef12749 100644
--- a/app/javascript/dashboard/modules/search/components/SearchResultMessagesList.vue
+++ b/app/javascript/dashboard/modules/search/components/SearchResultMessagesList.vue
@@ -1,31 +1,3 @@
-<template>
-  <search-result-section
-    :title="$t('SEARCH.SECTION.MESSAGES')"
-    :empty="!messages.length"
-    :query="query"
-    :show-title="showTitle"
-    :is-fetching="isFetching"
-  >
-    <ul v-if="messages.length" class="search-list">
-      <li v-for="message in messages" :key="message.id">
-        <search-result-conversation-item
-          :id="message.conversation_id"
-          :account-id="accountId"
-          :inbox="message.inbox"
-          :created-at="message.created_at"
-          :message-id="message.id"
-        >
-          <message-content
-            :author="getName(message)"
-            :content="message.content"
-            :search-term="query"
-          />
-        </search-result-conversation-item>
-      </li>
-    </ul>
-  </search-result-section>
-</template>
-
 <script>
 import { mapGetters } from 'vuex';
 import SearchResultConversationItem from './SearchResultConversationItem.vue';
@@ -70,3 +42,31 @@ export default {
   },
 };
 </script>
+
+<template>
+  <search-result-section
+    :title="$t('SEARCH.SECTION.MESSAGES')"
+    :empty="!messages.length"
+    :query="query"
+    :show-title="showTitle"
+    :is-fetching="isFetching"
+  >
+    <ul v-if="messages.length" class="search-list">
+      <li v-for="message in messages" :key="message.id">
+        <search-result-conversation-item
+          :id="message.conversation_id"
+          :account-id="accountId"
+          :inbox="message.inbox"
+          :created-at="message.created_at"
+          :message-id="message.id"
+        >
+          <message-content
+            :author="getName(message)"
+            :content="message.content"
+            :search-term="query"
+          />
+        </search-result-conversation-item>
+      </li>
+    </ul>
+  </search-result-section>
+</template>
diff --git a/app/javascript/dashboard/modules/search/components/SearchResultSection.vue b/app/javascript/dashboard/modules/search/components/SearchResultSection.vue
index 709936122..776ead2e1 100644
--- a/app/javascript/dashboard/modules/search/components/SearchResultSection.vue
+++ b/app/javascript/dashboard/modules/search/components/SearchResultSection.vue
@@ -1,19 +1,3 @@
-<template>
-  <section class="result-section">
-    <div v-if="showTitle" class="header">
-      <h3 class="text-sm text-slate-800 dark:text-slate-100">{{ title }}</h3>
-    </div>
-    <woot-loading-state v-if="isFetching" :message="'Searching'" />
-    <slot v-else />
-    <div v-if="empty && !isFetching" class="empty">
-      <fluent-icon icon="info" size="16px" class="icon" />
-      <p class="empty-state__text">
-        {{ $t('SEARCH.EMPTY_STATE', { item: titleCase, query }) }}
-      </p>
-    </div>
-  </section>
-</template>
-
 <script>
 export default {
   props: {
@@ -46,6 +30,22 @@ export default {
 };
 </script>
 
+<template>
+  <section class="result-section">
+    <div v-if="showTitle" class="header">
+      <h3 class="text-sm text-slate-800 dark:text-slate-100">{{ title }}</h3>
+    </div>
+    <woot-loading-state v-if="isFetching" :message="'Searching'" />
+    <slot v-else />
+    <div v-if="empty && !isFetching" class="empty">
+      <fluent-icon icon="info" size="16px" class="icon" />
+      <p class="empty-state__text">
+        {{ $t('SEARCH.EMPTY_STATE', { item: titleCase, query }) }}
+      </p>
+    </div>
+  </section>
+</template>
+
 <style scoped lang="scss">
 .result-section {
   @apply my-2 mx-0;
diff --git a/app/javascript/dashboard/modules/search/components/SearchTabs.vue b/app/javascript/dashboard/modules/search/components/SearchTabs.vue
index 93a1e59af..9a6ae9ca0 100644
--- a/app/javascript/dashboard/modules/search/components/SearchTabs.vue
+++ b/app/javascript/dashboard/modules/search/components/SearchTabs.vue
@@ -1,16 +1,3 @@
-<template>
-  <div class="tab-container">
-    <woot-tabs :index="activeTab" :border="false" @change="onTabChange">
-      <woot-tabs-item
-        v-for="item in tabs"
-        :key="item.key"
-        :name="item.name"
-        :count="item.count"
-      />
-    </woot-tabs>
-  </div>
-</template>
-
 <script>
 export default {
   props: {
@@ -43,6 +30,19 @@ export default {
   },
 };
 </script>
+
+<template>
+  <div class="tab-container">
+    <woot-tabs :index="activeTab" :border="false" @change="onTabChange">
+      <woot-tabs-item
+        v-for="item in tabs"
+        :key="item.key"
+        :name="item.name"
+        :count="item.count"
+      />
+    </woot-tabs>
+  </div>
+</template>
 <style lang="scss" scoped>
 .tab-container {
   @apply mt-1 border-b border-solid border-slate-100 dark:border-slate-800/50;
diff --git a/app/javascript/dashboard/modules/search/components/SearchView.vue b/app/javascript/dashboard/modules/search/components/SearchView.vue
index c9b122b32..33c4cca09 100644
--- a/app/javascript/dashboard/modules/search/components/SearchView.vue
+++ b/app/javascript/dashboard/modules/search/components/SearchView.vue
@@ -1,71 +1,3 @@
-<template>
-  <div class="search-page">
-    <div class="page-header">
-      <woot-button
-        icon="chevron-left"
-        variant="smooth"
-        size="small "
-        class="back-button"
-        @click="onBack"
-      >
-        {{ $t('GENERAL_SETTINGS.BACK') }}
-      </woot-button>
-    </div>
-    <section class="search-root">
-      <header>
-        <search-header @search="onSearch" />
-        <search-tabs
-          v-if="query"
-          :tabs="tabs"
-          :selected-tab="activeTabIndex"
-          @tab-change="tab => (selectedTab = tab)"
-        />
-      </header>
-      <div class="search-results">
-        <div v-if="showResultsSection">
-          <search-result-contacts-list
-            v-if="filterContacts"
-            :is-fetching="uiFlags.contact.isFetching"
-            :contacts="contacts"
-            :query="query"
-            :show-title="isSelectedTabAll"
-          />
-
-          <search-result-messages-list
-            v-if="filterMessages"
-            :is-fetching="uiFlags.message.isFetching"
-            :messages="messages"
-            :query="query"
-            :show-title="isSelectedTabAll"
-          />
-
-          <search-result-conversations-list
-            v-if="filterConversations"
-            :is-fetching="uiFlags.conversation.isFetching"
-            :conversations="conversations"
-            :query="query"
-            :show-title="isSelectedTabAll"
-          />
-        </div>
-        <div v-else-if="showEmptySearchResults" class="empty">
-          <fluent-icon icon="info" size="16px" class="icon" />
-          <p class="empty-state__text">
-            {{ $t('SEARCH.EMPTY_STATE_FULL', { query }) }}
-          </p>
-        </div>
-        <div v-else class="empty text-center">
-          <p class="text-center margin-bottom-0">
-            <fluent-icon icon="search" size="24px" class="icon" />
-          </p>
-          <p class="empty-state__text">
-            {{ $t('SEARCH.EMPTY_STATE_DEFAULT') }}
-          </p>
-        </div>
-      </div>
-    </section>
-  </div>
-</template>
-
 <script>
 import SearchHeader from './SearchHeader.vue';
 import SearchTabs from './SearchTabs.vue';
@@ -208,6 +140,74 @@ export default {
 };
 </script>
 
+<template>
+  <div class="search-page">
+    <div class="page-header">
+      <woot-button
+        icon="chevron-left"
+        variant="smooth"
+        size="small "
+        class="back-button"
+        @click="onBack"
+      >
+        {{ $t('GENERAL_SETTINGS.BACK') }}
+      </woot-button>
+    </div>
+    <section class="search-root">
+      <header>
+        <search-header @search="onSearch" />
+        <search-tabs
+          v-if="query"
+          :tabs="tabs"
+          :selected-tab="activeTabIndex"
+          @tab-change="tab => (selectedTab = tab)"
+        />
+      </header>
+      <div class="search-results">
+        <div v-if="showResultsSection">
+          <search-result-contacts-list
+            v-if="filterContacts"
+            :is-fetching="uiFlags.contact.isFetching"
+            :contacts="contacts"
+            :query="query"
+            :show-title="isSelectedTabAll"
+          />
+
+          <search-result-messages-list
+            v-if="filterMessages"
+            :is-fetching="uiFlags.message.isFetching"
+            :messages="messages"
+            :query="query"
+            :show-title="isSelectedTabAll"
+          />
+
+          <search-result-conversations-list
+            v-if="filterConversations"
+            :is-fetching="uiFlags.conversation.isFetching"
+            :conversations="conversations"
+            :query="query"
+            :show-title="isSelectedTabAll"
+          />
+        </div>
+        <div v-else-if="showEmptySearchResults" class="empty">
+          <fluent-icon icon="info" size="16px" class="icon" />
+          <p class="empty-state__text">
+            {{ $t('SEARCH.EMPTY_STATE_FULL', { query }) }}
+          </p>
+        </div>
+        <div v-else class="empty text-center">
+          <p class="text-center margin-bottom-0">
+            <fluent-icon icon="search" size="24px" class="icon" />
+          </p>
+          <p class="empty-state__text">
+            {{ $t('SEARCH.EMPTY_STATE_DEFAULT') }}
+          </p>
+        </div>
+      </div>
+    </section>
+  </div>
+</template>
+
 <style lang="scss" scoped>
 .search-page {
   @apply flex flex-col w-full bg-white dark:bg-slate-900;
diff --git a/app/javascript/dashboard/modules/widget-preview/components/Widget.vue b/app/javascript/dashboard/modules/widget-preview/components/Widget.vue
index a083cc522..29272e508 100644
--- a/app/javascript/dashboard/modules/widget-preview/components/Widget.vue
+++ b/app/javascript/dashboard/modules/widget-preview/components/Widget.vue
@@ -1,52 +1,3 @@
-<template>
-  <div class="widget-preview-container">
-    <div v-if="isWidgetVisible" class="screen-selector">
-      <input-radio-group
-        name="widget-screen"
-        :items="widgetScreens"
-        :action="handleScreenChange"
-      />
-    </div>
-    <div v-if="isWidgetVisible" class="widget-wrapper">
-      <WidgetHead :config="getWidgetHeadConfig" />
-      <div>
-        <WidgetBody :config="getWidgetBodyConfig" />
-        <WidgetFooter :config="getWidgetFooterConfig" />
-        <div class="branding">
-          <a class="branding-link">
-            <img class="branding-image" :src="globalConfig.logoThumbnail" />
-            <span>
-              {{
-                useInstallationName(
-                  $t('INBOX_MGMT.WIDGET_BUILDER.BRANDING_TEXT'),
-                  globalConfig.installationName
-                )
-              }}
-            </span>
-          </a>
-        </div>
-      </div>
-    </div>
-    <div class="widget-bubble" :style="getBubblePositionStyle">
-      <button
-        class="bubble"
-        :class="getBubbleTypeClass"
-        :style="{ background: color }"
-        @click="toggleWidget"
-      >
-        <img
-          v-if="!isWidgetVisible"
-          src="~dashboard/assets/images/bubble-logo.svg"
-          alt=""
-        />
-        <div>
-          {{ getWidgetBubbleLauncherTitle }}
-        </div>
-      </button>
-    </div>
-  </div>
-</template>
-
 <script>
 import WidgetHead from './WidgetHead.vue';
 import WidgetBody from './WidgetBody.vue';
@@ -198,6 +149,55 @@ export default {
 };
 </script>
 
+<template>
+  <div class="widget-preview-container">
+    <div v-if="isWidgetVisible" class="screen-selector">
+      <input-radio-group
+        name="widget-screen"
+        :items="widgetScreens"
+        :action="handleScreenChange"
+      />
+    </div>
+    <div v-if="isWidgetVisible" class="widget-wrapper">
+      <WidgetHead :config="getWidgetHeadConfig" />
+      <div>
+        <WidgetBody :config="getWidgetBodyConfig" />
+        <WidgetFooter :config="getWidgetFooterConfig" />
+        <div class="branding">
+          <a class="branding-link">
+            <img class="branding-image" :src="globalConfig.logoThumbnail" />
+            <span>
+              {{
+                useInstallationName(
+                  $t('INBOX_MGMT.WIDGET_BUILDER.BRANDING_TEXT'),
+                  globalConfig.installationName
+                )
+              }}
+            </span>
+          </a>
+        </div>
+      </div>
+    </div>
+    <div class="widget-bubble" :style="getBubblePositionStyle">
+      <button
+        class="bubble"
+        :class="getBubbleTypeClass"
+        :style="{ background: color }"
+        @click="toggleWidget"
+      >
+        <img
+          v-if="!isWidgetVisible"
+          src="~dashboard/assets/images/bubble-logo.svg"
+          alt=""
+        />
+        <div>
+          {{ getWidgetBubbleLauncherTitle }}
+        </div>
+      </button>
+    </div>
+  </div>
+</template>
+
 <style lang="scss" scoped>
 .screen-selector {
   display: flex;
diff --git a/app/javascript/dashboard/modules/widget-preview/components/WidgetBody.vue b/app/javascript/dashboard/modules/widget-preview/components/WidgetBody.vue
index 5ab15d5fd..6adff457f 100644
--- a/app/javascript/dashboard/modules/widget-preview/components/WidgetBody.vue
+++ b/app/javascript/dashboard/modules/widget-preview/components/WidgetBody.vue
@@ -1,3 +1,42 @@
+<script>
+import Thumbnail from 'dashboard/components/widgets/Thumbnail.vue';
+export default {
+  name: 'WidgetBody',
+  components: {
+    Thumbnail,
+  },
+  props: {
+    config: {
+      type: Object,
+      default: () => {},
+    },
+  },
+  computed: {
+    getStatusText() {
+      return this.config.isOnline
+        ? this.$t('INBOX_MGMT.WIDGET_BUILDER.BODY.TEAM_AVAILABILITY.ONLINE')
+        : this.$t('INBOX_MGMT.WIDGET_BUILDER.BODY.TEAM_AVAILABILITY.OFFLINE');
+    },
+    getWidgetBodyClass() {
+      return {
+        'with-chat-view': !this.config.isDefaultScreen,
+        'with-heading-or-title':
+          this.config.isDefaultScreen &&
+          (this.config.welcomeHeading || this.config.welcomeTagline),
+        'with-heading-or-title-without-logo':
+          this.config.isDefaultScreen &&
+          (this.config.welcomeHeading || this.config.welcomeTagline) &&
+          !this.config.logo,
+        'without-heading-and-title':
+          this.config.isDefaultScreen &&
+          !this.config.welcomeHeading &&
+          !this.config.welcomeTagline,
+      };
+    },
+  },
+};
+</script>
+
 <template>
   <div class="widget-body-container">
     <div v-if="config.isDefaultScreen" class="availability-content">
@@ -46,45 +85,6 @@
   </div>
 </template>
 
-<script>
-import Thumbnail from 'dashboard/components/widgets/Thumbnail.vue';
-export default {
-  name: 'WidgetBody',
-  components: {
-    Thumbnail,
-  },
-  props: {
-    config: {
-      type: Object,
-      default: () => {},
-    },
-  },
-  computed: {
-    getStatusText() {
-      return this.config.isOnline
-        ? this.$t('INBOX_MGMT.WIDGET_BUILDER.BODY.TEAM_AVAILABILITY.ONLINE')
-        : this.$t('INBOX_MGMT.WIDGET_BUILDER.BODY.TEAM_AVAILABILITY.OFFLINE');
-    },
-    getWidgetBodyClass() {
-      return {
-        'with-chat-view': !this.config.isDefaultScreen,
-        'with-heading-or-title':
-          this.config.isDefaultScreen &&
-          (this.config.welcomeHeading || this.config.welcomeTagline),
-        'with-heading-or-title-without-logo':
-          this.config.isDefaultScreen &&
-          (this.config.welcomeHeading || this.config.welcomeTagline) &&
-          !this.config.logo,
-        'without-heading-and-title':
-          this.config.isDefaultScreen &&
-          !this.config.welcomeHeading &&
-          !this.config.welcomeTagline,
-      };
-    },
-  },
-};
-</script>
-
 <style scoped lang="scss">
 .widget-body-container {
   .availability-content {
diff --git a/app/javascript/dashboard/modules/widget-preview/components/WidgetFooter.vue b/app/javascript/dashboard/modules/widget-preview/components/WidgetFooter.vue
index b5d4bbc28..84657eae9 100644
--- a/app/javascript/dashboard/modules/widget-preview/components/WidgetFooter.vue
+++ b/app/javascript/dashboard/modules/widget-preview/components/WidgetFooter.vue
@@ -1,3 +1,21 @@
+<script>
+import CustomButton from 'dashboard/components/buttons/Button.vue';
+import ResizableTextArea from 'shared/components/ResizableTextArea.vue';
+export default {
+  name: 'WidgetFooter',
+  components: {
+    CustomButton,
+    ResizableTextArea,
+  },
+  props: {
+    config: {
+      type: Object,
+      default: () => {},
+    },
+  },
+};
+</script>
+
 <template>
   <div class="footer-wrap">
     <custom-button
@@ -26,24 +44,6 @@
   </div>
 </template>
 
-<script>
-import CustomButton from 'dashboard/components/buttons/Button.vue';
-import ResizableTextArea from 'shared/components/ResizableTextArea.vue';
-export default {
-  name: 'WidgetFooter',
-  components: {
-    CustomButton,
-    ResizableTextArea,
-  },
-  props: {
-    config: {
-      type: Object,
-      default: () => {},
-    },
-  },
-};
-</script>
-
 <style scoped lang="scss">
 @import '~dashboard/assets/scss/variables.scss';
 .footer-wrap {
diff --git a/app/javascript/dashboard/modules/widget-preview/components/WidgetHead.vue b/app/javascript/dashboard/modules/widget-preview/components/WidgetHead.vue
index e59a00488..70d343f59 100644
--- a/app/javascript/dashboard/modules/widget-preview/components/WidgetHead.vue
+++ b/app/javascript/dashboard/modules/widget-preview/components/WidgetHead.vue
@@ -1,3 +1,25 @@
+<script>
+export default {
+  props: {
+    config: {
+      type: Object,
+      default: () => {},
+    },
+  },
+  computed: {
+    isDefaultScreen() {
+      return (
+        this.config.isDefaultScreen &&
+        ((this.config.welcomeHeading &&
+          this.config.welcomeHeading.length !== 0) ||
+          (this.config.welcomeTagLine &&
+            this.config.welcomeTagline.length !== 0))
+      );
+    },
+  },
+};
+</script>
+
 <template>
   <div class="header-wrapper">
     <div class="header-branding">
@@ -24,28 +46,6 @@
   </div>
 </template>
 
-<script>
-export default {
-  props: {
-    config: {
-      type: Object,
-      default: () => {},
-    },
-  },
-  computed: {
-    isDefaultScreen() {
-      return (
-        this.config.isDefaultScreen &&
-        ((this.config.welcomeHeading &&
-          this.config.welcomeHeading.length !== 0) ||
-          (this.config.welcomeTagLine &&
-            this.config.welcomeTagline.length !== 0))
-      );
-    },
-  },
-};
-</script>
-
 <style lang="scss" scoped>
 .header-wrapper {
   background-color: var(--white);
diff --git a/app/javascript/dashboard/routes/dashboard/Dashboard.vue b/app/javascript/dashboard/routes/dashboard/Dashboard.vue
index 338bb2d39..3a0d3f48e 100644
--- a/app/javascript/dashboard/routes/dashboard/Dashboard.vue
+++ b/app/javascript/dashboard/routes/dashboard/Dashboard.vue
@@ -1,44 +1,3 @@
-<template>
-  <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
-      :route="currentRoute"
-      :show-secondary-sidebar="isSidebarOpen"
-      @open-notification-panel="openNotificationPanel"
-      @toggle-account-modal="toggleAccountModal"
-      @open-key-shortcut-modal="toggleKeyShortcutModal"
-      @close-key-shortcut-modal="closeKeyShortcutModal"
-      @show-add-label-popup="showAddLabelPopup"
-    />
-    <section class="flex flex-1 h-full min-h-0 px-0 overflow-hidden">
-      <router-view />
-      <command-bar />
-      <account-selector
-        :show-account-modal="showAccountModal"
-        @close-account-modal="toggleAccountModal"
-        @show-create-account-modal="openCreateAccountModal"
-      />
-      <add-account-modal
-        :show="showCreateAccountModal"
-        @close-account-create-modal="closeCreateAccountModal"
-      />
-      <woot-key-shortcut-modal
-        :show.sync="showShortcutModal"
-        @close="closeKeyShortcutModal"
-        @clickaway="closeKeyShortcutModal"
-      />
-      <notification-panel
-        v-if="isNotificationPanel"
-        @close="closeNotificationPanel"
-      />
-      <woot-modal :show.sync="showAddLabelModal" :on-close="hideAddLabelPopup">
-        <add-label-modal @close="hideAddLabelPopup" />
-      </woot-modal>
-    </section>
-  </div>
-</template>
-
 <script>
 import Sidebar from '../../components/layout/Sidebar.vue';
 import { BUS_EVENTS } from 'shared/constants/busEvents';
@@ -181,3 +140,44 @@ export default {
   },
 };
 </script>
+
+<template>
+  <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
+      :route="currentRoute"
+      :show-secondary-sidebar="isSidebarOpen"
+      @open-notification-panel="openNotificationPanel"
+      @toggle-account-modal="toggleAccountModal"
+      @open-key-shortcut-modal="toggleKeyShortcutModal"
+      @close-key-shortcut-modal="closeKeyShortcutModal"
+      @show-add-label-popup="showAddLabelPopup"
+    />
+    <section class="flex flex-1 h-full min-h-0 px-0 overflow-hidden">
+      <router-view />
+      <command-bar />
+      <account-selector
+        :show-account-modal="showAccountModal"
+        @close-account-modal="toggleAccountModal"
+        @show-create-account-modal="openCreateAccountModal"
+      />
+      <add-account-modal
+        :show="showCreateAccountModal"
+        @close-account-create-modal="closeCreateAccountModal"
+      />
+      <woot-key-shortcut-modal
+        :show.sync="showShortcutModal"
+        @close="closeKeyShortcutModal"
+        @clickaway="closeKeyShortcutModal"
+      />
+      <notification-panel
+        v-if="isNotificationPanel"
+        @close="closeNotificationPanel"
+      />
+      <woot-modal :show.sync="showAddLabelModal" :on-close="hideAddLabelPopup">
+        <add-label-modal @close="hideAddLabelPopup" />
+      </woot-modal>
+    </section>
+  </div>
+</template>
diff --git a/app/javascript/dashboard/routes/dashboard/commands/commandbar.vue b/app/javascript/dashboard/routes/dashboard/commands/commandbar.vue
index 3dcf4cf05..072b961c2 100644
--- a/app/javascript/dashboard/routes/dashboard/commands/commandbar.vue
+++ b/app/javascript/dashboard/routes/dashboard/commands/commandbar.vue
@@ -1,15 +1,4 @@
 <!-- eslint-disable vue/attribute-hyphenation -->
-<template>
-  <ninja-keys
-    ref="ninjakeys"
-    :no-auto-load-md-icons="true"
-    hideBreadcrumbs
-    :placeholder="placeholder"
-    @selected="onSelected"
-    @closed="onClosed"
-  />
-</template>
-
 <script>
 import '@chatwoot/ninja-keys';
 import wootConstants from 'dashboard/constants/globals';
@@ -108,6 +97,17 @@ export default {
 };
 </script>
 
+<template>
+  <ninja-keys
+    ref="ninjakeys"
+    :no-auto-load-md-icons="true"
+    hide-breadcrumbs
+    :placeholder="placeholder"
+    @selected="onSelected"
+    @closed="onClosed"
+  />
+</template>
+
 <style lang="scss">
 ninja-keys {
   --ninja-accent-color: var(--w-500);
diff --git a/app/javascript/dashboard/routes/dashboard/contacts/components/AddReminder.vue b/app/javascript/dashboard/routes/dashboard/contacts/components/AddReminder.vue
index 54e900c30..b6ccce531 100644
--- a/app/javascript/dashboard/routes/dashboard/contacts/components/AddReminder.vue
+++ b/app/javascript/dashboard/routes/dashboard/contacts/components/AddReminder.vue
@@ -1,3 +1,46 @@
+<script>
+export default {
+  props: {
+    options: {
+      type: Array,
+      default: () => [],
+    },
+  },
+  data() {
+    return {
+      content: '',
+      date: '',
+      label: '',
+    };
+  },
+  computed: {
+    buttonDisabled() {
+      return this.content && this.date === '';
+    },
+  },
+  methods: {
+    resetValue() {
+      this.content = '';
+      this.date = '';
+    },
+
+    optionSelected(event) {
+      this.label = event.target.value;
+    },
+
+    onAdd() {
+      const task = {
+        content: this.content,
+        date: this.date,
+        label: this.label,
+      };
+      this.$emit('add', task);
+      this.resetValue();
+    },
+  },
+};
+</script>
+
 <template>
   <div class="wrap">
     <div class="input-select-wrap">
@@ -47,49 +90,6 @@
   </div>
 </template>
 
-<script>
-export default {
-  props: {
-    options: {
-      type: Array,
-      default: () => [],
-    },
-  },
-  data() {
-    return {
-      content: '',
-      date: '',
-      label: '',
-    };
-  },
-  computed: {
-    buttonDisabled() {
-      return this.content && this.date === '';
-    },
-  },
-  methods: {
-    resetValue() {
-      this.content = '';
-      this.date = '';
-    },
-
-    optionSelected(event) {
-      this.label = event.target.value;
-    },
-
-    onAdd() {
-      const task = {
-        content: this.content,
-        date: this.date,
-        label: this.label,
-      };
-      this.$emit('add', task);
-      this.resetValue();
-    },
-  },
-};
-</script>
-
 <style lang="scss" scoped>
 .wrap {
   display: flex;
diff --git a/app/javascript/dashboard/routes/dashboard/contacts/components/ContactInfoPanel.vue b/app/javascript/dashboard/routes/dashboard/contacts/components/ContactInfoPanel.vue
index 96b2cbf26..db3cb00a3 100644
--- a/app/javascript/dashboard/routes/dashboard/contacts/components/ContactInfoPanel.vue
+++ b/app/javascript/dashboard/routes/dashboard/contacts/components/ContactInfoPanel.vue
@@ -1,3 +1,81 @@
+<script>
+import AccordionItem from 'dashboard/components/Accordion/AccordionItem.vue';
+import ContactConversations from 'dashboard/routes/dashboard/conversation/ContactConversations.vue';
+import ContactInfo from 'dashboard/routes/dashboard/conversation/contact/ContactInfo.vue';
+import ContactLabel from 'dashboard/routes/dashboard/contacts/components/ContactLabels.vue';
+import CustomAttributes from 'dashboard/routes/dashboard/conversation/customAttributes/CustomAttributes.vue';
+import draggable from 'vuedraggable';
+import { useUISettings } from 'dashboard/composables/useUISettings';
+
+export default {
+  components: {
+    AccordionItem,
+    ContactConversations,
+    ContactInfo,
+    ContactLabel,
+    CustomAttributes,
+    draggable,
+  },
+  props: {
+    contact: {
+      type: Object,
+      default: () => ({}),
+    },
+    onClose: {
+      type: Function,
+      default: () => {},
+    },
+    showAvatar: {
+      type: Boolean,
+      default: true,
+    },
+    showCloseButton: {
+      type: Boolean,
+      default: true,
+    },
+  },
+  setup() {
+    const {
+      updateUISettings,
+      isContactSidebarItemOpen,
+      contactSidebarItemsOrder,
+      toggleSidebarUIState,
+    } = useUISettings();
+
+    return {
+      updateUISettings,
+      isContactSidebarItemOpen,
+      contactSidebarItemsOrder,
+      toggleSidebarUIState,
+    };
+  },
+  data() {
+    return {
+      dragEnabled: true,
+      contactSidebarItems: [],
+      dragging: false,
+    };
+  },
+  computed: {
+    hasContactAttributes() {
+      const { custom_attributes: customAttributes } = this.contact;
+      return customAttributes && Object.keys(customAttributes).length;
+    },
+  },
+  mounted() {
+    this.contactSidebarItems = this.contactSidebarItemsOrder;
+  },
+  methods: {
+    onDragEnd() {
+      this.dragging = false;
+      this.updateUISettings({
+        contact_sidebar_items_order: this.contactSidebarItems,
+      });
+    },
+  },
+};
+</script>
+
 <template>
   <div
     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"
@@ -79,84 +157,6 @@
   </div>
 </template>
 
-<script>
-import AccordionItem from 'dashboard/components/Accordion/AccordionItem.vue';
-import ContactConversations from 'dashboard/routes/dashboard/conversation/ContactConversations.vue';
-import ContactInfo from 'dashboard/routes/dashboard/conversation/contact/ContactInfo.vue';
-import ContactLabel from 'dashboard/routes/dashboard/contacts/components/ContactLabels.vue';
-import CustomAttributes from 'dashboard/routes/dashboard/conversation/customAttributes/CustomAttributes.vue';
-import draggable from 'vuedraggable';
-import { useUISettings } from 'dashboard/composables/useUISettings';
-
-export default {
-  components: {
-    AccordionItem,
-    ContactConversations,
-    ContactInfo,
-    ContactLabel,
-    CustomAttributes,
-    draggable,
-  },
-  props: {
-    contact: {
-      type: Object,
-      default: () => ({}),
-    },
-    onClose: {
-      type: Function,
-      default: () => {},
-    },
-    showAvatar: {
-      type: Boolean,
-      default: true,
-    },
-    showCloseButton: {
-      type: Boolean,
-      default: true,
-    },
-  },
-  setup() {
-    const {
-      updateUISettings,
-      isContactSidebarItemOpen,
-      contactSidebarItemsOrder,
-      toggleSidebarUIState,
-    } = useUISettings();
-
-    return {
-      updateUISettings,
-      isContactSidebarItemOpen,
-      contactSidebarItemsOrder,
-      toggleSidebarUIState,
-    };
-  },
-  data() {
-    return {
-      dragEnabled: true,
-      contactSidebarItems: [],
-      dragging: false,
-    };
-  },
-  computed: {
-    hasContactAttributes() {
-      const { custom_attributes: customAttributes } = this.contact;
-      return customAttributes && Object.keys(customAttributes).length;
-    },
-  },
-  mounted() {
-    this.contactSidebarItems = this.contactSidebarItemsOrder;
-  },
-  methods: {
-    onDragEnd() {
-      this.dragging = false;
-      this.updateUISettings({
-        contact_sidebar_items_order: this.contactSidebarItems,
-      });
-    },
-  },
-};
-</script>
-
 <style lang="scss" scoped>
 ::v-deep {
   .contact--profile {
diff --git a/app/javascript/dashboard/routes/dashboard/contacts/components/ContactLabels.vue b/app/javascript/dashboard/routes/dashboard/contacts/components/ContactLabels.vue
index 7932d2c8b..3a12d4190 100644
--- a/app/javascript/dashboard/routes/dashboard/contacts/components/ContactLabels.vue
+++ b/app/javascript/dashboard/routes/dashboard/contacts/components/ContactLabels.vue
@@ -1,12 +1,3 @@
-<template>
-  <label-selector
-    :all-labels="allLabels"
-    :saved-labels="savedLabels"
-    @add="addItem"
-    @remove="removeItem"
-  />
-</template>
-
 <script>
 import { mapGetters } from 'vuex';
 import { useAlert } from 'dashboard/composables';
@@ -85,4 +76,13 @@ export default {
 };
 </script>
 
+<template>
+  <label-selector
+    :all-labels="allLabels"
+    :saved-labels="savedLabels"
+    @add="addItem"
+    @remove="removeItem"
+  />
+</template>
+
 <style></style>
diff --git a/app/javascript/dashboard/routes/dashboard/contacts/components/ContactsAdvancedFilters.vue b/app/javascript/dashboard/routes/dashboard/contacts/components/ContactsAdvancedFilters.vue
index f6e00b70b..5a6f53347 100644
--- a/app/javascript/dashboard/routes/dashboard/contacts/components/ContactsAdvancedFilters.vue
+++ b/app/javascript/dashboard/routes/dashboard/contacts/components/ContactsAdvancedFilters.vue
@@ -1,93 +1,3 @@
-<template>
-  <div>
-    <woot-modal-header :header-title="filterModalHeaderTitle">
-      <p class="text-slate-600 dark:text-slate-200">
-        {{ filterModalSubTitle }}
-      </p>
-    </woot-modal-header>
-    <div class="p-8">
-      <div v-if="isSegmentsView">
-        <label class="input-label" :class="{ error: !activeSegmentNewName }">
-          {{ $t('CONTACTS_FILTER.SEGMENT_LABEL') }}
-          <input
-            v-model="activeSegmentNewName"
-            type="text"
-            class="bg-white folder-input border-slate-75 dark:border-slate-600 dark:bg-slate-900 text-slate-900 dark:text-slate-100"
-          />
-          <span v-if="!activeSegmentNewName" class="message">
-            {{ $t('CONTACTS_FILTER.EMPTY_VALUE_ERROR') }}
-          </span>
-        </label>
-        <label class="input-label">
-          {{ $t('CONTACTS_FILTER.SEGMENT_QUERY_LABEL') }}
-        </label>
-      </div>
-      <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
-          v-for="(filter, i) in appliedFilters"
-          :key="i"
-          v-model="appliedFilters[i]"
-          :filter-groups="filterGroups"
-          :grouped-filters="true"
-          :input-type="
-            getInputType(
-              appliedFilters[i].attribute_key,
-              appliedFilters[i].filter_operator
-            )
-          "
-          :operators="getOperators(appliedFilters[i].attribute_key)"
-          :dropdown-values="getDropdownValues(appliedFilters[i].attribute_key)"
-          :show-query-operator="i !== appliedFilters.length - 1"
-          :show-user-input="showUserInput(appliedFilters[i].filter_operator)"
-          :error-message="validationErrors[`filter_${i}`]"
-          @resetFilter="resetFilter(i, appliedFilters[i])"
-          @removeFilter="removeFilter(i)"
-        />
-        <div class="mt-4">
-          <woot-button
-            icon="add"
-            color-scheme="success"
-            variant="smooth"
-            size="small"
-            @click="appendNewFilter"
-          >
-            {{ $t('CONTACTS_FILTER.ADD_NEW_FILTER') }}
-          </woot-button>
-          <woot-button
-            v-if="hasAppliedFilters && !isSegmentsView"
-            icon="subtract"
-            color-scheme="alert"
-            variant="smooth"
-            size="small"
-            @click="clearFilters"
-          >
-            {{ $t('CONTACTS_FILTER.CLEAR_ALL_FILTERS') }}
-          </woot-button>
-        </div>
-      </div>
-      <div class="w-full">
-        <div class="flex flex-row justify-end w-full gap-2 px-0 py-2">
-          <woot-button class="button clear" @click.prevent="onClose">
-            {{ $t('CONTACTS_FILTER.CANCEL_BUTTON_LABEL') }}
-          </woot-button>
-          <woot-button
-            v-if="isSegmentsView"
-            :disabled="!activeSegmentNewName"
-            @click="updateSegment"
-          >
-            {{ $t('CONTACTS_FILTER.UPDATE_BUTTON_LABEL') }}
-          </woot-button>
-          <woot-button v-else @click="submitFilterQuery">
-            {{ $t('CONTACTS_FILTER.SUBMIT_BUTTON_LABEL') }}
-          </woot-button>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
 <script>
 import { useAlert } from 'dashboard/composables';
 import FilterInputBox from '../../../../components/widgets/FilterInput/Index.vue';
@@ -343,6 +253,96 @@ export default {
   },
 };
 </script>
+
+<template>
+  <div>
+    <woot-modal-header :header-title="filterModalHeaderTitle">
+      <p class="text-slate-600 dark:text-slate-200">
+        {{ filterModalSubTitle }}
+      </p>
+    </woot-modal-header>
+    <div class="p-8">
+      <div v-if="isSegmentsView">
+        <label class="input-label" :class="{ error: !activeSegmentNewName }">
+          {{ $t('CONTACTS_FILTER.SEGMENT_LABEL') }}
+          <input
+            v-model="activeSegmentNewName"
+            type="text"
+            class="bg-white folder-input border-slate-75 dark:border-slate-600 dark:bg-slate-900 text-slate-900 dark:text-slate-100"
+          />
+          <span v-if="!activeSegmentNewName" class="message">
+            {{ $t('CONTACTS_FILTER.EMPTY_VALUE_ERROR') }}
+          </span>
+        </label>
+        <label class="input-label">
+          {{ $t('CONTACTS_FILTER.SEGMENT_QUERY_LABEL') }}
+        </label>
+      </div>
+      <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
+          v-for="(filter, i) in appliedFilters"
+          :key="i"
+          v-model="appliedFilters[i]"
+          :filter-groups="filterGroups"
+          :grouped-filters="true"
+          :input-type="
+            getInputType(
+              appliedFilters[i].attribute_key,
+              appliedFilters[i].filter_operator
+            )
+          "
+          :operators="getOperators(appliedFilters[i].attribute_key)"
+          :dropdown-values="getDropdownValues(appliedFilters[i].attribute_key)"
+          :show-query-operator="i !== appliedFilters.length - 1"
+          :show-user-input="showUserInput(appliedFilters[i].filter_operator)"
+          :error-message="validationErrors[`filter_${i}`]"
+          @resetFilter="resetFilter(i, appliedFilters[i])"
+          @removeFilter="removeFilter(i)"
+        />
+        <div class="mt-4">
+          <woot-button
+            icon="add"
+            color-scheme="success"
+            variant="smooth"
+            size="small"
+            @click="appendNewFilter"
+          >
+            {{ $t('CONTACTS_FILTER.ADD_NEW_FILTER') }}
+          </woot-button>
+          <woot-button
+            v-if="hasAppliedFilters && !isSegmentsView"
+            icon="subtract"
+            color-scheme="alert"
+            variant="smooth"
+            size="small"
+            @click="clearFilters"
+          >
+            {{ $t('CONTACTS_FILTER.CLEAR_ALL_FILTERS') }}
+          </woot-button>
+        </div>
+      </div>
+      <div class="w-full">
+        <div class="flex flex-row justify-end w-full gap-2 px-0 py-2">
+          <woot-button class="button clear" @click.prevent="onClose">
+            {{ $t('CONTACTS_FILTER.CANCEL_BUTTON_LABEL') }}
+          </woot-button>
+          <woot-button
+            v-if="isSegmentsView"
+            :disabled="!activeSegmentNewName"
+            @click="updateSegment"
+          >
+            {{ $t('CONTACTS_FILTER.UPDATE_BUTTON_LABEL') }}
+          </woot-button>
+          <woot-button v-else @click="submitFilterQuery">
+            {{ $t('CONTACTS_FILTER.SUBMIT_BUTTON_LABEL') }}
+          </woot-button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
 <style lang="scss" scoped>
 .folder-input {
   @apply w-[50%];
diff --git a/app/javascript/dashboard/routes/dashboard/contacts/components/ContactsTable.vue b/app/javascript/dashboard/routes/dashboard/contacts/components/ContactsTable.vue
index 1ec7596ae..4bb5e326e 100644
--- a/app/javascript/dashboard/routes/dashboard/contacts/components/ContactsTable.vue
+++ b/app/javascript/dashboard/routes/dashboard/contacts/components/ContactsTable.vue
@@ -1,32 +1,3 @@
-<template>
-  <section
-    class="flex-1 h-full -mt-1 overflow-hidden bg-white contacts-table-wrap dark:bg-slate-900"
-  >
-    <ve-table
-      :fixed-header="true"
-      max-height="calc(100vh - 7.125rem)"
-      scroll-width="187rem"
-      :columns="columns"
-      :table-data="tableData"
-      :border-around="false"
-      :sort-option="sortOption"
-    />
-
-    <empty-state
-      v-if="showSearchEmptyState"
-      :title="$t('CONTACTS_PAGE.LIST.404')"
-    />
-    <empty-state
-      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 />
-      <span>{{ $t('CONTACTS_PAGE.LIST.LOADING_MESSAGE') }}</span>
-    </div>
-  </section>
-</template>
-
 <script>
 import { VeTable } from 'vue-easytable';
 import { getCountryFlag } from 'dashboard/helper/flag';
@@ -277,6 +248,35 @@ export default {
 };
 </script>
 
+<template>
+  <section
+    class="flex-1 h-full -mt-1 overflow-hidden bg-white contacts-table-wrap dark:bg-slate-900"
+  >
+    <ve-table
+      :fixed-header="true"
+      max-height="calc(100vh - 7.125rem)"
+      scroll-width="187rem"
+      :columns="columns"
+      :table-data="tableData"
+      :border-around="false"
+      :sort-option="sortOption"
+    />
+
+    <empty-state
+      v-if="showSearchEmptyState"
+      :title="$t('CONTACTS_PAGE.LIST.404')"
+    />
+    <empty-state
+      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 />
+      <span>{{ $t('CONTACTS_PAGE.LIST.LOADING_MESSAGE') }}</span>
+    </div>
+  </section>
+</template>
+
 <style lang="scss" scoped>
 .contacts-table-wrap::v-deep {
   .ve-table {
diff --git a/app/javascript/dashboard/routes/dashboard/contacts/components/ContactsView.vue b/app/javascript/dashboard/routes/dashboard/contacts/components/ContactsView.vue
index 43c19d288..dcc31d3b8 100644
--- a/app/javascript/dashboard/routes/dashboard/contacts/components/ContactsView.vue
+++ b/app/javascript/dashboard/routes/dashboard/contacts/components/ContactsView.vue
@@ -1,84 +1,3 @@
-<template>
-  <div class="flex flex-row w-full">
-    <div class="flex flex-col h-full" :class="wrapClass">
-      <contacts-header
-        :search-query="searchQuery"
-        :header-title="pageTitle"
-        :segments-id="segmentsId"
-        this-selected-contact-id=""
-        @on-input-search="onInputSearch"
-        @on-toggle-create="onToggleCreate"
-        @on-toggle-filter="onToggleFilters"
-        @on-search-submit="onSearchSubmit"
-        @on-toggle-import="onToggleImport"
-        @on-export-submit="onExportSubmit"
-        @on-toggle-save-filter="onToggleSaveFilters"
-        @on-toggle-delete-filter="onToggleDeleteFilters"
-        @on-toggle-edit-filter="onToggleFilters"
-      />
-      <contacts-table
-        :contacts="records"
-        :show-search-empty-state="showEmptySearchResult"
-        :is-loading="uiFlags.isFetching"
-        :on-click-contact="openContactInfoPanel"
-        :active-contact-id="selectedContactId"
-        @on-sort-change="onSortChange"
-      />
-      <table-footer
-        class="border-t border-slate-75 dark:border-slate-700/50"
-        :current-page="Number(meta.currentPage)"
-        :total-count="meta.count"
-        :page-size="15"
-        @page-change="onPageChange"
-      />
-    </div>
-
-    <add-custom-views
-      v-if="showAddSegmentsModal"
-      :custom-views-query="segmentsQuery"
-      :filter-type="filterType"
-      :open-last-saved-item="openSavedItemInSegment"
-      @close="onCloseAddSegmentsModal"
-    />
-    <delete-custom-views
-      v-if="showDeleteSegmentsModal"
-      :show-delete-popup.sync="showDeleteSegmentsModal"
-      :active-custom-view="activeSegment"
-      :custom-views-id="segmentsId"
-      :active-filter-type="filterType"
-      :open-last-item-after-delete="openLastItemAfterDeleteInSegment"
-      @close="onCloseDeleteSegmentsModal"
-    />
-
-    <contact-info-panel
-      v-if="showContactViewPane"
-      :contact="selectedContact"
-      :on-close="closeContactInfoPanel"
-    />
-    <create-contact :show="showCreateModal" @cancel="onToggleCreate" />
-    <woot-modal :show.sync="showImportModal" :on-close="onToggleImport">
-      <import-contacts v-if="showImportModal" :on-close="onToggleImport" />
-    </woot-modal>
-    <woot-modal
-      :show.sync="showFiltersModal"
-      :on-close="closeAdvanceFiltersModal"
-      size="medium"
-    >
-      <contacts-advanced-filters
-        v-if="showFiltersModal"
-        :on-close="closeAdvanceFiltersModal"
-        :initial-filter-types="contactFilterItems"
-        :initial-applied-filters="appliedFilter"
-        :active-segment-name="activeSegmentName"
-        :is-segments-view="hasActiveSegments"
-        @applyFilter="onApplyFilter"
-        @updateSegment="onUpdateSegment"
-        @clearFilters="clearFilters"
-      />
-    </woot-modal>
-  </div>
-</template>
-
 <script>
 import { mapGetters } from 'vuex';
 import { useAlert } from 'dashboard/composables';
@@ -468,3 +387,84 @@ export default {
   },
 };
 </script>
+
+<template>
+  <div class="flex flex-row w-full">
+    <div class="flex flex-col h-full" :class="wrapClass">
+      <contacts-header
+        :search-query="searchQuery"
+        :header-title="pageTitle"
+        :segments-id="segmentsId"
+        this-selected-contact-id=""
+        @on-input-search="onInputSearch"
+        @on-toggle-create="onToggleCreate"
+        @on-toggle-filter="onToggleFilters"
+        @on-search-submit="onSearchSubmit"
+        @on-toggle-import="onToggleImport"
+        @on-export-submit="onExportSubmit"
+        @on-toggle-save-filter="onToggleSaveFilters"
+        @on-toggle-delete-filter="onToggleDeleteFilters"
+        @on-toggle-edit-filter="onToggleFilters"
+      />
+      <contacts-table
+        :contacts="records"
+        :show-search-empty-state="showEmptySearchResult"
+        :is-loading="uiFlags.isFetching"
+        :on-click-contact="openContactInfoPanel"
+        :active-contact-id="selectedContactId"
+        @on-sort-change="onSortChange"
+      />
+      <table-footer
+        class="border-t border-slate-75 dark:border-slate-700/50"
+        :current-page="Number(meta.currentPage)"
+        :total-count="meta.count"
+        :page-size="15"
+        @page-change="onPageChange"
+      />
+    </div>
+
+    <add-custom-views
+      v-if="showAddSegmentsModal"
+      :custom-views-query="segmentsQuery"
+      :filter-type="filterType"
+      :open-last-saved-item="openSavedItemInSegment"
+      @close="onCloseAddSegmentsModal"
+    />
+    <delete-custom-views
+      v-if="showDeleteSegmentsModal"
+      :show-delete-popup.sync="showDeleteSegmentsModal"
+      :active-custom-view="activeSegment"
+      :custom-views-id="segmentsId"
+      :active-filter-type="filterType"
+      :open-last-item-after-delete="openLastItemAfterDeleteInSegment"
+      @close="onCloseDeleteSegmentsModal"
+    />
+
+    <contact-info-panel
+      v-if="showContactViewPane"
+      :contact="selectedContact"
+      :on-close="closeContactInfoPanel"
+    />
+    <create-contact :show="showCreateModal" @cancel="onToggleCreate" />
+    <woot-modal :show.sync="showImportModal" :on-close="onToggleImport">
+      <import-contacts v-if="showImportModal" :on-close="onToggleImport" />
+    </woot-modal>
+    <woot-modal
+      :show.sync="showFiltersModal"
+      :on-close="closeAdvanceFiltersModal"
+      size="medium"
+    >
+      <contacts-advanced-filters
+        v-if="showFiltersModal"
+        :on-close="closeAdvanceFiltersModal"
+        :initial-filter-types="contactFilterItems"
+        :initial-applied-filters="appliedFilter"
+        :active-segment-name="activeSegmentName"
+        :is-segments-view="hasActiveSegments"
+        @applyFilter="onApplyFilter"
+        @updateSegment="onUpdateSegment"
+        @clearFilters="clearFilters"
+      />
+    </woot-modal>
+  </div>
+</template>
diff --git a/app/javascript/dashboard/routes/dashboard/contacts/components/Header.vue b/app/javascript/dashboard/routes/dashboard/contacts/components/Header.vue
index 583ce5c6d..acc6b6efd 100644
--- a/app/javascript/dashboard/routes/dashboard/contacts/components/Header.vue
+++ b/app/javascript/dashboard/routes/dashboard/contacts/components/Header.vue
@@ -1,3 +1,92 @@
+<script>
+import { mapGetters } from 'vuex';
+import { useAdmin } from 'dashboard/composables/useAdmin';
+
+export default {
+  props: {
+    headerTitle: {
+      type: String,
+      default: '',
+    },
+    searchQuery: {
+      type: String,
+      default: '',
+    },
+    segmentsId: {
+      type: [String, Number],
+      default: 0,
+    },
+  },
+  setup() {
+    const { isAdmin } = useAdmin();
+    return {
+      isAdmin,
+    };
+  },
+  data() {
+    return {
+      showCreateModal: false,
+      showImportModal: false,
+    };
+  },
+  computed: {
+    searchButtonClass() {
+      return this.searchQuery !== ''
+        ? 'opacity-100 translate-x-0 visible'
+        : '-translate-x-px opacity-0 invisible';
+    },
+    ...mapGetters({
+      getAppliedContactFilters: 'contacts/getAppliedContactFilters',
+    }),
+    hasAppliedFilters() {
+      return this.getAppliedContactFilters.length;
+    },
+    hasActiveSegments() {
+      return this.segmentsId !== 0;
+    },
+    exportDescription() {
+      return this.hasAppliedFilters
+        ? this.$t('EXPORT_CONTACTS.CONFIRM.FILTERED_MESSAGE')
+        : this.$t('EXPORT_CONTACTS.CONFIRM.MESSAGE');
+    },
+  },
+  methods: {
+    onToggleSegmentsModal() {
+      this.$emit('on-toggle-save-filter');
+    },
+    onToggleEditSegmentsModal() {
+      this.$emit('on-toggle-edit-filter');
+    },
+    onToggleDeleteSegmentsModal() {
+      this.$emit('on-toggle-delete-filter');
+    },
+    toggleCreate() {
+      this.$emit('on-toggle-create');
+    },
+    toggleFilter() {
+      this.$emit('on-toggle-filter');
+    },
+    toggleImport() {
+      this.$emit('on-toggle-import');
+    },
+    async submitExport() {
+      const ok =
+        await this.$refs.confirmExportContactsDialog.showConfirmation();
+
+      if (ok) {
+        this.$emit('on-export-submit');
+      }
+    },
+    submitSearch() {
+      this.$emit('on-search-submit');
+    },
+    inputSearch(event) {
+      this.$emit('on-input-search', event);
+    },
+  },
+};
+</script>
+
 <template>
   <header
     class="bg-white border-b dark:bg-slate-900 border-slate-50 dark:border-slate-800"
@@ -128,92 +217,3 @@
     />
   </header>
 </template>
-
-<script>
-import { mapGetters } from 'vuex';
-import { useAdmin } from 'dashboard/composables/useAdmin';
-
-export default {
-  props: {
-    headerTitle: {
-      type: String,
-      default: '',
-    },
-    searchQuery: {
-      type: String,
-      default: '',
-    },
-    segmentsId: {
-      type: [String, Number],
-      default: 0,
-    },
-  },
-  setup() {
-    const { isAdmin } = useAdmin();
-    return {
-      isAdmin,
-    };
-  },
-  data() {
-    return {
-      showCreateModal: false,
-      showImportModal: false,
-    };
-  },
-  computed: {
-    searchButtonClass() {
-      return this.searchQuery !== ''
-        ? 'opacity-100 translate-x-0 visible'
-        : '-translate-x-px opacity-0 invisible';
-    },
-    ...mapGetters({
-      getAppliedContactFilters: 'contacts/getAppliedContactFilters',
-    }),
-    hasAppliedFilters() {
-      return this.getAppliedContactFilters.length;
-    },
-    hasActiveSegments() {
-      return this.segmentsId !== 0;
-    },
-    exportDescription() {
-      return this.hasAppliedFilters
-        ? this.$t('EXPORT_CONTACTS.CONFIRM.FILTERED_MESSAGE')
-        : this.$t('EXPORT_CONTACTS.CONFIRM.MESSAGE');
-    },
-  },
-  methods: {
-    onToggleSegmentsModal() {
-      this.$emit('on-toggle-save-filter');
-    },
-    onToggleEditSegmentsModal() {
-      this.$emit('on-toggle-edit-filter');
-    },
-    onToggleDeleteSegmentsModal() {
-      this.$emit('on-toggle-delete-filter');
-    },
-    toggleCreate() {
-      this.$emit('on-toggle-create');
-    },
-    toggleFilter() {
-      this.$emit('on-toggle-filter');
-    },
-    toggleImport() {
-      this.$emit('on-toggle-import');
-    },
-    async submitExport() {
-      const ok =
-        await this.$refs.confirmExportContactsDialog.showConfirmation();
-
-      if (ok) {
-        this.$emit('on-export-submit');
-      }
-    },
-    submitSearch() {
-      this.$emit('on-search-submit');
-    },
-    inputSearch(event) {
-      this.$emit('on-input-search', event);
-    },
-  },
-};
-</script>
diff --git a/app/javascript/dashboard/routes/dashboard/contacts/components/ImportContacts.vue b/app/javascript/dashboard/routes/dashboard/contacts/components/ImportContacts.vue
index 5696608a4..ce430aaa0 100644
--- a/app/javascript/dashboard/routes/dashboard/contacts/components/ImportContacts.vue
+++ b/app/javascript/dashboard/routes/dashboard/contacts/components/ImportContacts.vue
@@ -1,46 +1,3 @@
-<template>
-  <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>
-          {{ $t('IMPORT_CONTACTS.DESC') }}
-          <a :href="csvUrl" download="import-contacts-sample">{{
-            $t('IMPORT_CONTACTS.DOWNLOAD_LABEL')
-          }}</a>
-        </p>
-      </woot-modal-header>
-      <div class="flex flex-col p-8">
-        <div class="w-full">
-          <label>
-            <span>{{ $t('IMPORT_CONTACTS.FORM.LABEL') }}</span>
-            <input
-              id="file"
-              ref="file"
-              type="file"
-              accept="text/csv"
-              @change="handleFileUpload"
-            />
-          </label>
-        </div>
-        <div class="flex flex-row justify-end w-full gap-2 px-0 py-2">
-          <div class="w-full">
-            <woot-button
-              :disabled="uiFlags.isCreating || !file"
-              :loading="uiFlags.isCreating"
-              @click="uploadFile"
-            >
-              {{ $t('IMPORT_CONTACTS.FORM.SUBMIT') }}
-            </woot-button>
-            <button class="button clear" @click.prevent="onClose">
-              {{ $t('IMPORT_CONTACTS.FORM.CANCEL') }}
-            </button>
-          </div>
-        </div>
-      </div>
-    </div>
-  </modal>
-</template>
-
 <script>
 import { mapGetters } from 'vuex';
 import { useAlert } from 'dashboard/composables';
@@ -93,3 +50,46 @@ export default {
   },
 };
 </script>
+
+<template>
+  <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>
+          {{ $t('IMPORT_CONTACTS.DESC') }}
+          <a :href="csvUrl" download="import-contacts-sample">{{
+            $t('IMPORT_CONTACTS.DOWNLOAD_LABEL')
+          }}</a>
+        </p>
+      </woot-modal-header>
+      <div class="flex flex-col p-8">
+        <div class="w-full">
+          <label>
+            <span>{{ $t('IMPORT_CONTACTS.FORM.LABEL') }}</span>
+            <input
+              id="file"
+              ref="file"
+              type="file"
+              accept="text/csv"
+              @change="handleFileUpload"
+            />
+          </label>
+        </div>
+        <div class="flex flex-row justify-end w-full gap-2 px-0 py-2">
+          <div class="w-full">
+            <woot-button
+              :disabled="uiFlags.isCreating || !file"
+              :loading="uiFlags.isCreating"
+              @click="uploadFile"
+            >
+              {{ $t('IMPORT_CONTACTS.FORM.SUBMIT') }}
+            </woot-button>
+            <button class="button clear" @click.prevent="onClose">
+              {{ $t('IMPORT_CONTACTS.FORM.CANCEL') }}
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </modal>
+</template>
diff --git a/app/javascript/dashboard/routes/dashboard/contacts/components/ReminderItem.vue b/app/javascript/dashboard/routes/dashboard/contacts/components/ReminderItem.vue
index 531e9141e..8909a0376 100644
--- a/app/javascript/dashboard/routes/dashboard/contacts/components/ReminderItem.vue
+++ b/app/javascript/dashboard/routes/dashboard/contacts/components/ReminderItem.vue
@@ -1,3 +1,42 @@
+<script>
+export default {
+  props: {
+    id: {
+      type: Number,
+      default: 0,
+    },
+    text: {
+      type: String,
+      default: '',
+    },
+    isCompleted: {
+      type: Boolean,
+      default: false,
+    },
+    date: {
+      type: String,
+      default: '',
+    },
+    label: {
+      type: String,
+      default: '',
+    },
+  },
+
+  methods: {
+    onClick() {
+      this.$emit('completed', this.isCompleted);
+    },
+    onEdit() {
+      this.$emit('edit', this.id);
+    },
+    onDelete() {
+      this.$emit('delete', this.id);
+    },
+  },
+};
+</script>
+
 <template>
   <div class="reminder-wrap">
     <div class="status-wrap">
@@ -44,45 +83,6 @@
   </div>
 </template>
 
-<script>
-export default {
-  props: {
-    id: {
-      type: Number,
-      default: 0,
-    },
-    text: {
-      type: String,
-      default: '',
-    },
-    isCompleted: {
-      type: Boolean,
-      default: false,
-    },
-    date: {
-      type: String,
-      default: '',
-    },
-    label: {
-      type: String,
-      default: '',
-    },
-  },
-
-  methods: {
-    onClick() {
-      this.$emit('completed', this.isCompleted);
-    },
-    onEdit() {
-      this.$emit('edit', this.id);
-    },
-    onDelete() {
-      this.$emit('delete', this.id);
-    },
-  },
-};
-</script>
-
 <style lang="scss" scoped>
 .reminder-wrap {
   display: flex;
diff --git a/app/javascript/dashboard/routes/dashboard/contacts/components/SectionHeader.vue b/app/javascript/dashboard/routes/dashboard/contacts/components/SectionHeader.vue
index a9e6c8cdb..6940b9122 100644
--- a/app/javascript/dashboard/routes/dashboard/contacts/components/SectionHeader.vue
+++ b/app/javascript/dashboard/routes/dashboard/contacts/components/SectionHeader.vue
@@ -1,3 +1,21 @@
+<script>
+export default {
+  methods: {
+    onClickNotes() {
+      this.$emit('notes');
+    },
+
+    onClickEvents() {
+      this.$emit('events');
+    },
+
+    onClickConversation() {
+      this.$emit('conversation');
+    },
+  },
+};
+</script>
+
 <template>
   <div class="wrap">
     <div class="header">
@@ -37,24 +55,6 @@
   </div>
 </template>
 
-<script>
-export default {
-  methods: {
-    onClickNotes() {
-      this.$emit('notes');
-    },
-
-    onClickEvents() {
-      this.$emit('events');
-    },
-
-    onClickConversation() {
-      this.$emit('conversation');
-    },
-  },
-};
-</script>
-
 <style lang="scss" scoped>
 .wrap {
   width: 100%;
diff --git a/app/javascript/dashboard/routes/dashboard/contacts/components/TimelineCard.vue b/app/javascript/dashboard/routes/dashboard/contacts/components/TimelineCard.vue
index da273d3fd..cc2e22173 100644
--- a/app/javascript/dashboard/routes/dashboard/contacts/components/TimelineCard.vue
+++ b/app/javascript/dashboard/routes/dashboard/contacts/components/TimelineCard.vue
@@ -1,32 +1,3 @@
-<template>
-  <div class="timeline-card-wrap">
-    <div class="icon-chatbox">
-      <i class="ion-chatboxes" />
-    </div>
-    <div class="card-wrap">
-      <div class="header">
-        <div class="text-wrap">
-          <h6 class="text-sm">
-            {{ eventType }}
-          </h6>
-          <span class="event-path">on {{ eventPath }}</span>
-        </div>
-        <div class="date-wrap">
-          <span>{{ readableTime }}</span>
-        </div>
-      </div>
-      <div class="comment-wrap">
-        <p class="comment">
-          {{ eventBody }}
-        </p>
-      </div>
-    </div>
-    <div class="icon-more" @click="onClick">
-      <i class="ion-android-more-vertical" />
-    </div>
-  </div>
-</template>
-
 <script>
 import { dynamicTime } from 'shared/helpers/timeHelper';
 export default {
@@ -63,6 +34,35 @@ export default {
 };
 </script>
 
+<template>
+  <div class="timeline-card-wrap">
+    <div class="icon-chatbox">
+      <i class="ion-chatboxes" />
+    </div>
+    <div class="card-wrap">
+      <div class="header">
+        <div class="text-wrap">
+          <h6 class="text-sm">
+            {{ eventType }}
+          </h6>
+          <span class="event-path">on {{ eventPath }}</span>
+        </div>
+        <div class="date-wrap">
+          <span>{{ readableTime }}</span>
+        </div>
+      </div>
+      <div class="comment-wrap">
+        <p class="comment">
+          {{ eventBody }}
+        </p>
+      </div>
+    </div>
+    <div class="icon-more" @click="onClick">
+      <i class="ion-android-more-vertical" />
+    </div>
+  </div>
+</template>
+
 <style lang="scss" scoped>
 .timeline-card-wrap {
   display: flex;
diff --git a/app/javascript/dashboard/routes/dashboard/contacts/pages/ContactManageView.vue b/app/javascript/dashboard/routes/dashboard/contacts/pages/ContactManageView.vue
index a6f44ac6b..189e72a13 100644
--- a/app/javascript/dashboard/routes/dashboard/contacts/pages/ContactManageView.vue
+++ b/app/javascript/dashboard/routes/dashboard/contacts/pages/ContactManageView.vue
@@ -1,58 +1,3 @@
-<template>
-  <div
-    class="flex justify-between flex-col h-full m-0 flex-1 bg-white dark:bg-slate-900"
-  >
-    <settings-header
-      button-route="new"
-      :header-title="contact.name"
-      show-back-button
-      :back-button-label="$t('CONTACT_PROFILE.BACK_BUTTON')"
-      :back-url="backUrl"
-      :show-new-button="false"
-    >
-      <thumbnail
-        v-if="contact.thumbnail"
-        :src="contact.thumbnail"
-        :username="contact.name"
-        size="32px"
-        class="mr-2 rtl:mr-0 rtl:ml-2"
-      />
-    </settings-header>
-
-    <div v-if="uiFlags.isFetchingItem" class="text-center p-4 text-base h-full">
-      <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
-          :show-close-button="false"
-          :show-avatar="false"
-          :contact="contact"
-        />
-        <div class="w-3/4 h-full">
-          <woot-tabs :index="selectedTabIndex" @change="onClickTabChange">
-            <woot-tabs-item
-              v-for="tab in tabs"
-              :key="tab.key"
-              :name="tab.name"
-              :show-badge="false"
-            />
-          </woot-tabs>
-          <div
-            class="bg-slate-25 dark:bg-slate-800 h-[calc(100%-40px)] p-4 overflow-auto"
-          >
-            <contact-notes
-              v-if="selectedTabIndex === 0"
-              :contact-id="Number(contactId)"
-            />
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
 <script>
 import { mapGetters } from 'vuex';
 import ContactInfoPanel from '../components/ContactInfoPanel.vue';
@@ -117,3 +62,58 @@ export default {
   },
 };
 </script>
+
+<template>
+  <div
+    class="flex justify-between flex-col h-full m-0 flex-1 bg-white dark:bg-slate-900"
+  >
+    <settings-header
+      button-route="new"
+      :header-title="contact.name"
+      show-back-button
+      :back-button-label="$t('CONTACT_PROFILE.BACK_BUTTON')"
+      :back-url="backUrl"
+      :show-new-button="false"
+    >
+      <thumbnail
+        v-if="contact.thumbnail"
+        :src="contact.thumbnail"
+        :username="contact.name"
+        size="32px"
+        class="mr-2 rtl:mr-0 rtl:ml-2"
+      />
+    </settings-header>
+
+    <div v-if="uiFlags.isFetchingItem" class="text-center p-4 text-base h-full">
+      <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
+          :show-close-button="false"
+          :show-avatar="false"
+          :contact="contact"
+        />
+        <div class="w-3/4 h-full">
+          <woot-tabs :index="selectedTabIndex" @change="onClickTabChange">
+            <woot-tabs-item
+              v-for="tab in tabs"
+              :key="tab.key"
+              :name="tab.name"
+              :show-badge="false"
+            />
+          </woot-tabs>
+          <div
+            class="bg-slate-25 dark:bg-slate-800 h-[calc(100%-40px)] p-4 overflow-auto"
+          >
+            <contact-notes
+              v-if="selectedTabIndex === 0"
+              :contact-id="Number(contactId)"
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/app/javascript/dashboard/routes/dashboard/conversation/ContactConversations.vue b/app/javascript/dashboard/routes/dashboard/conversation/ContactConversations.vue
index f78202075..c5180e6b5 100644
--- a/app/javascript/dashboard/routes/dashboard/conversation/ContactConversations.vue
+++ b/app/javascript/dashboard/routes/dashboard/conversation/ContactConversations.vue
@@ -1,26 +1,3 @@
-<template>
-  <div class="contact-conversation--panel">
-    <div v-if="!uiFlags.isFetching" class="contact-conversation__wrap">
-      <div v-if="!previousConversations.length" class="no-label-message">
-        <span>
-          {{ $t('CONTACT_PANEL.CONVERSATIONS.NO_RECORDS_FOUND') }}
-        </span>
-      </div>
-      <div v-else class="contact-conversation--list">
-        <conversation-card
-          v-for="conversation in previousConversations"
-          :key="conversation.id"
-          :chat="conversation"
-          :hide-inbox-name="false"
-          :hide-thumbnail="true"
-          class="compact"
-        />
-      </div>
-    </div>
-    <spinner v-else />
-  </div>
-</template>
-
 <script>
 import ConversationCard from 'dashboard/components/widgets/conversation/ConversationCard.vue';
 import { mapGetters } from 'vuex';
@@ -69,6 +46,29 @@ export default {
 };
 </script>
 
+<template>
+  <div class="contact-conversation--panel">
+    <div v-if="!uiFlags.isFetching" class="contact-conversation__wrap">
+      <div v-if="!previousConversations.length" class="no-label-message">
+        <span>
+          {{ $t('CONTACT_PANEL.CONVERSATIONS.NO_RECORDS_FOUND') }}
+        </span>
+      </div>
+      <div v-else class="contact-conversation--list">
+        <conversation-card
+          v-for="conversation in previousConversations"
+          :key="conversation.id"
+          :chat="conversation"
+          :hide-inbox-name="false"
+          :hide-thumbnail="true"
+          class="compact"
+        />
+      </div>
+    </div>
+    <spinner v-else />
+  </div>
+</template>
+
 <style lang="scss" scoped>
 .no-label-message {
   @apply text-slate-500 dark:text-slate-400 mb-4;
diff --git a/app/javascript/dashboard/routes/dashboard/conversation/ContactCustomAttributes.vue b/app/javascript/dashboard/routes/dashboard/conversation/ContactCustomAttributes.vue
index bf3ee8140..0a409e65d 100644
--- a/app/javascript/dashboard/routes/dashboard/conversation/ContactCustomAttributes.vue
+++ b/app/javascript/dashboard/routes/dashboard/conversation/ContactCustomAttributes.vue
@@ -1,23 +1,3 @@
-<template>
-  <div class="custom-attributes--panel">
-    <div
-      v-for="attribute in listOfAttributes"
-      :key="attribute"
-      class="custom-attribute--row"
-    >
-      <div class="custom-attribute--row__attribute">
-        {{ attribute }}
-      </div>
-      <div>
-        <span v-dompurify-html="valueWithLink(customAttributes[attribute])" />
-      </div>
-    </div>
-    <p v-if="!listOfAttributes.length">
-      {{ $t('CUSTOM_ATTRIBUTES.NOT_AVAILABLE') }}
-    </p>
-  </div>
-</template>
-
 <script>
 import MessageFormatter from 'shared/helpers/MessageFormatter.js';
 
@@ -56,6 +36,26 @@ export default {
 };
 </script>
 
+<template>
+  <div class="custom-attributes--panel">
+    <div
+      v-for="attribute in listOfAttributes"
+      :key="attribute"
+      class="custom-attribute--row"
+    >
+      <div class="custom-attribute--row__attribute">
+        {{ attribute }}
+      </div>
+      <div>
+        <span v-dompurify-html="valueWithLink(customAttributes[attribute])" />
+      </div>
+    </div>
+    <p v-if="!listOfAttributes.length">
+      {{ $t('CUSTOM_ATTRIBUTES.NOT_AVAILABLE') }}
+    </p>
+  </div>
+</template>
+
 <style scoped>
 .custom-attributes--panel {
   margin-bottom: var(--space-normal);
diff --git a/app/javascript/dashboard/routes/dashboard/conversation/ContactDetailsItem.vue b/app/javascript/dashboard/routes/dashboard/conversation/ContactDetailsItem.vue
index bfb868892..868cd7a00 100644
--- a/app/javascript/dashboard/routes/dashboard/conversation/ContactDetailsItem.vue
+++ b/app/javascript/dashboard/routes/dashboard/conversation/ContactDetailsItem.vue
@@ -1,3 +1,15 @@
+<script>
+export default {
+  props: {
+    title: { type: String, required: true },
+    icon: { type: String, default: '' },
+    emoji: { type: String, default: '' },
+    value: { type: [String, Number], default: '' },
+    compact: { type: Boolean, default: false },
+  },
+};
+</script>
+
 <template>
   <div class="overflow-auto" :class="compact ? 'py-0 px-0' : 'py-3 px-4'">
     <div class="items-center flex justify-between mb-1.5">
@@ -13,15 +25,3 @@
     </div>
   </div>
 </template>
-
-<script>
-export default {
-  props: {
-    title: { type: String, required: true },
-    icon: { type: String, default: '' },
-    emoji: { type: String, default: '' },
-    value: { type: [String, Number], default: '' },
-    compact: { type: Boolean, default: false },
-  },
-};
-</script>
diff --git a/app/javascript/dashboard/routes/dashboard/conversation/ContactPanel.vue b/app/javascript/dashboard/routes/dashboard/conversation/ContactPanel.vue
index bdc52883e..792431f72 100644
--- a/app/javascript/dashboard/routes/dashboard/conversation/ContactPanel.vue
+++ b/app/javascript/dashboard/routes/dashboard/conversation/ContactPanel.vue
@@ -1,136 +1,3 @@
-<template>
-  <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
-      :contact="contact"
-      :channel-type="channelType"
-      @toggle-panel="onPanelToggle"
-    />
-    <draggable
-      :list="conversationSidebarItems"
-      :disabled="!dragEnabled"
-      animation="200"
-      class="list-group"
-      ghost-class="ghost"
-      handle=".drag-handle"
-      @start="dragging = true"
-      @end="onDragEnd"
-    >
-      <transition-group>
-        <div
-          v-for="element in conversationSidebarItems"
-          :key="element.name"
-          class="bg-white dark:bg-gray-800"
-        >
-          <div
-            v-if="element.name === 'conversation_actions'"
-            class="conversation--actions"
-          >
-            <accordion-item
-              :title="$t('CONVERSATION_SIDEBAR.ACCORDION.CONVERSATION_ACTIONS')"
-              :is-open="isContactSidebarItemOpen('is_conv_actions_open')"
-              @click="
-                value => toggleSidebarUIState('is_conv_actions_open', value)
-              "
-            >
-              <conversation-action
-                :conversation-id="conversationId"
-                :inbox-id="inboxId"
-              />
-            </accordion-item>
-          </div>
-          <div
-            v-else-if="element.name === 'conversation_participants'"
-            class="conversation--actions"
-          >
-            <accordion-item
-              :title="$t('CONVERSATION_PARTICIPANTS.SIDEBAR_TITLE')"
-              :is-open="isContactSidebarItemOpen('is_conv_participants_open')"
-              @click="
-                value =>
-                  toggleSidebarUIState('is_conv_participants_open', value)
-              "
-            >
-              <conversation-participant
-                :conversation-id="conversationId"
-                :inbox-id="inboxId"
-              />
-            </accordion-item>
-          </div>
-          <div v-else-if="element.name === 'conversation_info'">
-            <accordion-item
-              :title="$t('CONVERSATION_SIDEBAR.ACCORDION.CONVERSATION_INFO')"
-              :is-open="isContactSidebarItemOpen('is_conv_details_open')"
-              compact
-              @click="
-                value => toggleSidebarUIState('is_conv_details_open', value)
-              "
-            >
-              <conversation-info
-                :conversation-attributes="conversationAdditionalAttributes"
-                :contact-attributes="contactAdditionalAttributes"
-              />
-            </accordion-item>
-          </div>
-          <div v-else-if="element.name === 'contact_attributes'">
-            <accordion-item
-              :title="$t('CONVERSATION_SIDEBAR.ACCORDION.CONTACT_ATTRIBUTES')"
-              :is-open="isContactSidebarItemOpen('is_contact_attributes_open')"
-              compact
-              @click="
-                value =>
-                  toggleSidebarUIState('is_contact_attributes_open', value)
-              "
-            >
-              <custom-attributes
-                attribute-type="contact_attribute"
-                attribute-class="conversation--attribute"
-                class="even"
-                attribute-from="conversation_contact_panel"
-                :contact-id="contact.id"
-                :empty-state-message="
-                  $t('CONVERSATION_CUSTOM_ATTRIBUTES.NO_RECORDS_FOUND')
-                "
-              />
-            </accordion-item>
-          </div>
-          <div v-else-if="element.name === 'previous_conversation'">
-            <accordion-item
-              v-if="contact.id"
-              :title="
-                $t('CONVERSATION_SIDEBAR.ACCORDION.PREVIOUS_CONVERSATION')
-              "
-              :is-open="isContactSidebarItemOpen('is_previous_conv_open')"
-              @click="
-                value => toggleSidebarUIState('is_previous_conv_open', value)
-              "
-            >
-              <contact-conversations
-                :contact-id="contact.id"
-                :conversation-id="conversationId"
-              />
-            </accordion-item>
-          </div>
-          <woot-feature-toggle
-            v-else-if="element.name === 'macros'"
-            feature-key="macros"
-          >
-            <accordion-item
-              :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>
-          </woot-feature-toggle>
-        </div>
-      </transition-group>
-    </draggable>
-  </div>
-</template>
-
 <script>
 import { mapGetters } from 'vuex';
 import { useUISettings } from 'dashboard/composables/useUISettings';
@@ -266,6 +133,139 @@ export default {
 };
 </script>
 
+<template>
+  <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
+      :contact="contact"
+      :channel-type="channelType"
+      @toggle-panel="onPanelToggle"
+    />
+    <draggable
+      :list="conversationSidebarItems"
+      :disabled="!dragEnabled"
+      animation="200"
+      class="list-group"
+      ghost-class="ghost"
+      handle=".drag-handle"
+      @start="dragging = true"
+      @end="onDragEnd"
+    >
+      <transition-group>
+        <div
+          v-for="element in conversationSidebarItems"
+          :key="element.name"
+          class="bg-white dark:bg-gray-800"
+        >
+          <div
+            v-if="element.name === 'conversation_actions'"
+            class="conversation--actions"
+          >
+            <accordion-item
+              :title="$t('CONVERSATION_SIDEBAR.ACCORDION.CONVERSATION_ACTIONS')"
+              :is-open="isContactSidebarItemOpen('is_conv_actions_open')"
+              @click="
+                value => toggleSidebarUIState('is_conv_actions_open', value)
+              "
+            >
+              <conversation-action
+                :conversation-id="conversationId"
+                :inbox-id="inboxId"
+              />
+            </accordion-item>
+          </div>
+          <div
+            v-else-if="element.name === 'conversation_participants'"
+            class="conversation--actions"
+          >
+            <accordion-item
+              :title="$t('CONVERSATION_PARTICIPANTS.SIDEBAR_TITLE')"
+              :is-open="isContactSidebarItemOpen('is_conv_participants_open')"
+              @click="
+                value =>
+                  toggleSidebarUIState('is_conv_participants_open', value)
+              "
+            >
+              <conversation-participant
+                :conversation-id="conversationId"
+                :inbox-id="inboxId"
+              />
+            </accordion-item>
+          </div>
+          <div v-else-if="element.name === 'conversation_info'">
+            <accordion-item
+              :title="$t('CONVERSATION_SIDEBAR.ACCORDION.CONVERSATION_INFO')"
+              :is-open="isContactSidebarItemOpen('is_conv_details_open')"
+              compact
+              @click="
+                value => toggleSidebarUIState('is_conv_details_open', value)
+              "
+            >
+              <conversation-info
+                :conversation-attributes="conversationAdditionalAttributes"
+                :contact-attributes="contactAdditionalAttributes"
+              />
+            </accordion-item>
+          </div>
+          <div v-else-if="element.name === 'contact_attributes'">
+            <accordion-item
+              :title="$t('CONVERSATION_SIDEBAR.ACCORDION.CONTACT_ATTRIBUTES')"
+              :is-open="isContactSidebarItemOpen('is_contact_attributes_open')"
+              compact
+              @click="
+                value =>
+                  toggleSidebarUIState('is_contact_attributes_open', value)
+              "
+            >
+              <custom-attributes
+                attribute-type="contact_attribute"
+                attribute-class="conversation--attribute"
+                class="even"
+                attribute-from="conversation_contact_panel"
+                :contact-id="contact.id"
+                :empty-state-message="
+                  $t('CONVERSATION_CUSTOM_ATTRIBUTES.NO_RECORDS_FOUND')
+                "
+              />
+            </accordion-item>
+          </div>
+          <div v-else-if="element.name === 'previous_conversation'">
+            <accordion-item
+              v-if="contact.id"
+              :title="
+                $t('CONVERSATION_SIDEBAR.ACCORDION.PREVIOUS_CONVERSATION')
+              "
+              :is-open="isContactSidebarItemOpen('is_previous_conv_open')"
+              @click="
+                value => toggleSidebarUIState('is_previous_conv_open', value)
+              "
+            >
+              <contact-conversations
+                :contact-id="contact.id"
+                :conversation-id="conversationId"
+              />
+            </accordion-item>
+          </div>
+          <woot-feature-toggle
+            v-else-if="element.name === 'macros'"
+            feature-key="macros"
+          >
+            <accordion-item
+              :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>
+          </woot-feature-toggle>
+        </div>
+      </transition-group>
+    </draggable>
+  </div>
+</template>
+
 <style lang="scss" scoped>
 ::v-deep {
   .contact--profile {
diff --git a/app/javascript/dashboard/routes/dashboard/conversation/ConversationAction.vue b/app/javascript/dashboard/routes/dashboard/conversation/ConversationAction.vue
index 3d5f6cb00..29b134310 100644
--- a/app/javascript/dashboard/routes/dashboard/conversation/ConversationAction.vue
+++ b/app/javascript/dashboard/routes/dashboard/conversation/ConversationAction.vue
@@ -1,85 +1,4 @@
 <!-- eslint-disable vue/v-slot-style -->
-<template>
-  <div class="bg-white dark:bg-slate-900">
-    <div class="multiselect-wrap--small">
-      <contact-details-item
-        compact
-        :title="$t('CONVERSATION_SIDEBAR.ASSIGNEE_LABEL')"
-      >
-        <template v-slot:button>
-          <woot-button
-            v-if="showSelfAssign"
-            icon="arrow-right"
-            variant="link"
-            size="small"
-            @click="onSelfAssign"
-          >
-            {{ $t('CONVERSATION_SIDEBAR.SELF_ASSIGN') }}
-          </woot-button>
-        </template>
-      </contact-details-item>
-      <multiselect-dropdown
-        :options="agentsList"
-        :selected-item="assignedAgent"
-        :multiselector-title="$t('AGENT_MGMT.MULTI_SELECTOR.TITLE.AGENT')"
-        :multiselector-placeholder="$t('AGENT_MGMT.MULTI_SELECTOR.PLACEHOLDER')"
-        :no-search-result="
-          $t('AGENT_MGMT.MULTI_SELECTOR.SEARCH.NO_RESULTS.AGENT')
-        "
-        :input-placeholder="
-          $t('AGENT_MGMT.MULTI_SELECTOR.SEARCH.PLACEHOLDER.AGENT')
-        "
-        @click="onClickAssignAgent"
-      />
-    </div>
-    <div class="multiselect-wrap--small">
-      <contact-details-item
-        compact
-        :title="$t('CONVERSATION_SIDEBAR.TEAM_LABEL')"
-      />
-      <multiselect-dropdown
-        :options="teamsList"
-        :selected-item="assignedTeam"
-        :multiselector-title="$t('AGENT_MGMT.MULTI_SELECTOR.TITLE.TEAM')"
-        :multiselector-placeholder="$t('AGENT_MGMT.MULTI_SELECTOR.PLACEHOLDER')"
-        :no-search-result="
-          $t('AGENT_MGMT.MULTI_SELECTOR.SEARCH.NO_RESULTS.TEAM')
-        "
-        :input-placeholder="
-          $t('AGENT_MGMT.MULTI_SELECTOR.SEARCH.PLACEHOLDER.INPUT')
-        "
-        @click="onClickAssignTeam"
-      />
-    </div>
-    <div class="multiselect-wrap--small">
-      <contact-details-item
-        compact
-        :title="$t('CONVERSATION.PRIORITY.TITLE')"
-      />
-      <multiselect-dropdown
-        :options="priorityOptions"
-        :selected-item="assignedPriority"
-        :multiselector-title="$t('CONVERSATION.PRIORITY.TITLE')"
-        :multiselector-placeholder="
-          $t('CONVERSATION.PRIORITY.CHANGE_PRIORITY.SELECT_PLACEHOLDER')
-        "
-        :no-search-result="
-          $t('CONVERSATION.PRIORITY.CHANGE_PRIORITY.NO_RESULTS')
-        "
-        :input-placeholder="
-          $t('CONVERSATION.PRIORITY.CHANGE_PRIORITY.INPUT_PLACEHOLDER')
-        "
-        @click="onClickAssignPriority"
-      />
-    </div>
-    <contact-details-item
-      compact
-      :title="$t('CONVERSATION_SIDEBAR.ACCORDION.CONVERSATION_LABELS')"
-    />
-    <conversation-labels :conversation-id="conversationId" />
-  </div>
-</template>
-
 <script>
 import { mapGetters } from 'vuex';
 import { useAlert } from 'dashboard/composables';
@@ -270,3 +189,84 @@ export default {
   },
 };
 </script>
+
+<template>
+  <div class="bg-white dark:bg-slate-900">
+    <div class="multiselect-wrap--small">
+      <contact-details-item
+        compact
+        :title="$t('CONVERSATION_SIDEBAR.ASSIGNEE_LABEL')"
+      >
+        <template #button>
+          <woot-button
+            v-if="showSelfAssign"
+            icon="arrow-right"
+            variant="link"
+            size="small"
+            @click="onSelfAssign"
+          >
+            {{ $t('CONVERSATION_SIDEBAR.SELF_ASSIGN') }}
+          </woot-button>
+        </template>
+      </contact-details-item>
+      <multiselect-dropdown
+        :options="agentsList"
+        :selected-item="assignedAgent"
+        :multiselector-title="$t('AGENT_MGMT.MULTI_SELECTOR.TITLE.AGENT')"
+        :multiselector-placeholder="$t('AGENT_MGMT.MULTI_SELECTOR.PLACEHOLDER')"
+        :no-search-result="
+          $t('AGENT_MGMT.MULTI_SELECTOR.SEARCH.NO_RESULTS.AGENT')
+        "
+        :input-placeholder="
+          $t('AGENT_MGMT.MULTI_SELECTOR.SEARCH.PLACEHOLDER.AGENT')
+        "
+        @click="onClickAssignAgent"
+      />
+    </div>
+    <div class="multiselect-wrap--small">
+      <contact-details-item
+        compact
+        :title="$t('CONVERSATION_SIDEBAR.TEAM_LABEL')"
+      />
+      <multiselect-dropdown
+        :options="teamsList"
+        :selected-item="assignedTeam"
+        :multiselector-title="$t('AGENT_MGMT.MULTI_SELECTOR.TITLE.TEAM')"
+        :multiselector-placeholder="$t('AGENT_MGMT.MULTI_SELECTOR.PLACEHOLDER')"
+        :no-search-result="
+          $t('AGENT_MGMT.MULTI_SELECTOR.SEARCH.NO_RESULTS.TEAM')
+        "
+        :input-placeholder="
+          $t('AGENT_MGMT.MULTI_SELECTOR.SEARCH.PLACEHOLDER.INPUT')
+        "
+        @click="onClickAssignTeam"
+      />
+    </div>
+    <div class="multiselect-wrap--small">
+      <contact-details-item
+        compact
+        :title="$t('CONVERSATION.PRIORITY.TITLE')"
+      />
+      <multiselect-dropdown
+        :options="priorityOptions"
+        :selected-item="assignedPriority"
+        :multiselector-title="$t('CONVERSATION.PRIORITY.TITLE')"
+        :multiselector-placeholder="
+          $t('CONVERSATION.PRIORITY.CHANGE_PRIORITY.SELECT_PLACEHOLDER')
+        "
+        :no-search-result="
+          $t('CONVERSATION.PRIORITY.CHANGE_PRIORITY.NO_RESULTS')
+        "
+        :input-placeholder="
+          $t('CONVERSATION.PRIORITY.CHANGE_PRIORITY.INPUT_PLACEHOLDER')
+        "
+        @click="onClickAssignPriority"
+      />
+    </div>
+    <contact-details-item
+      compact
+      :title="$t('CONVERSATION_SIDEBAR.ACCORDION.CONVERSATION_LABELS')"
+    />
+    <conversation-labels :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 d788149d1..4f989f4bf 100644
--- a/app/javascript/dashboard/routes/dashboard/conversation/ConversationParticipant.vue
+++ b/app/javascript/dashboard/routes/dashboard/conversation/ConversationParticipant.vue
@@ -1,82 +1,3 @@
-<template>
-  <div class="relative bg-white dark:bg-slate-900">
-    <div class="flex justify-between">
-      <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" />
-            {{ totalWatchersText }}
-          </p>
-          <p v-else class="text-slate-400 dark:text-slate-700 m-0 text-sm">
-            {{ $t('CONVERSATION_PARTICIPANTS.NO_PARTICIPANTS_TEXT') }}
-          </p>
-        </div>
-        <woot-button
-          v-tooltip.left="$t('CONVERSATION_PARTICIPANTS.ADD_PARTICIPANTS')"
-          :title="$t('CONVERSATION_PARTICIPANTS.ADD_PARTICIPANTS')"
-          icon="settings"
-          size="tiny"
-          variant="smooth"
-          color-scheme="secondary"
-          @click="onOpenDropdown"
-        />
-      </div>
-    </div>
-    <div class="flex justify-between items-center">
-      <thumbnail-group
-        :more-thumbnails-text="moreThumbnailsText"
-        :show-more-thumbnails-count="showMoreThumbs"
-        :users-list="thumbnailList"
-      />
-      <p
-        v-if="isUserWatching"
-        class="text-slate-300 dark:text-slate-300 m-0 text-sm"
-      >
-        {{ $t('CONVERSATION_PARTICIPANTS.YOU_ARE_WATCHING') }}
-      </p>
-      <woot-button
-        v-else
-        icon="arrow-right"
-        variant="link"
-        size="small"
-        @click="onSelfAssign"
-      >
-        {{ $t('CONVERSATION_PARTICIPANTS.WATCH_CONVERSATION') }}
-      </woot-button>
-    </div>
-    <div
-      v-on-clickaway="
-        () => {
-          onCloseDropdown();
-        }
-      "
-      :class="{ 'dropdown-pane--open': showDropDown }"
-      class="dropdown-pane"
-    >
-      <div class="flex justify-between items-center mb-1">
-        <h4
-          class="text-sm m-0 overflow-hidden whitespace-nowrap text-ellipsis text-slate-800 dark:text-slate-100"
-        >
-          {{ $t('CONVERSATION_PARTICIPANTS.ADD_PARTICIPANTS') }}
-        </h4>
-        <woot-button
-          icon="dismiss"
-          size="tiny"
-          color-scheme="secondary"
-          variant="clear"
-          @click="onCloseDropdown"
-        />
-      </div>
-      <multiselect-dropdown-items
-        :options="agentsList"
-        :selected-items="selectedWatchers"
-        :has-thumbnail="true"
-        @click="onClickItem"
-      />
-    </div>
-  </div>
-</template>
-
 <script>
 import Spinner from 'shared/components/Spinner.vue';
 import { useAlert } from 'dashboard/composables';
@@ -228,6 +149,85 @@ export default {
   },
 };
 </script>
+
+<template>
+  <div class="relative bg-white dark:bg-slate-900">
+    <div class="flex justify-between">
+      <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" />
+            {{ totalWatchersText }}
+          </p>
+          <p v-else class="text-slate-400 dark:text-slate-700 m-0 text-sm">
+            {{ $t('CONVERSATION_PARTICIPANTS.NO_PARTICIPANTS_TEXT') }}
+          </p>
+        </div>
+        <woot-button
+          v-tooltip.left="$t('CONVERSATION_PARTICIPANTS.ADD_PARTICIPANTS')"
+          :title="$t('CONVERSATION_PARTICIPANTS.ADD_PARTICIPANTS')"
+          icon="settings"
+          size="tiny"
+          variant="smooth"
+          color-scheme="secondary"
+          @click="onOpenDropdown"
+        />
+      </div>
+    </div>
+    <div class="flex justify-between items-center">
+      <thumbnail-group
+        :more-thumbnails-text="moreThumbnailsText"
+        :show-more-thumbnails-count="showMoreThumbs"
+        :users-list="thumbnailList"
+      />
+      <p
+        v-if="isUserWatching"
+        class="text-slate-300 dark:text-slate-300 m-0 text-sm"
+      >
+        {{ $t('CONVERSATION_PARTICIPANTS.YOU_ARE_WATCHING') }}
+      </p>
+      <woot-button
+        v-else
+        icon="arrow-right"
+        variant="link"
+        size="small"
+        @click="onSelfAssign"
+      >
+        {{ $t('CONVERSATION_PARTICIPANTS.WATCH_CONVERSATION') }}
+      </woot-button>
+    </div>
+    <div
+      v-on-clickaway="
+        () => {
+          onCloseDropdown();
+        }
+      "
+      :class="{ 'dropdown-pane--open': showDropDown }"
+      class="dropdown-pane"
+    >
+      <div class="flex justify-between items-center mb-1">
+        <h4
+          class="text-sm m-0 overflow-hidden whitespace-nowrap text-ellipsis text-slate-800 dark:text-slate-100"
+        >
+          {{ $t('CONVERSATION_PARTICIPANTS.ADD_PARTICIPANTS') }}
+        </h4>
+        <woot-button
+          icon="dismiss"
+          size="tiny"
+          color-scheme="secondary"
+          variant="clear"
+          @click="onCloseDropdown"
+        />
+      </div>
+      <multiselect-dropdown-items
+        :options="agentsList"
+        :selected-items="selectedWatchers"
+        :has-thumbnail="true"
+        @click="onClickItem"
+      />
+    </div>
+  </div>
+</template>
 <style lang="scss" scoped>
 .dropdown-pane {
   @apply box-border top-8 w-full;
diff --git a/app/javascript/dashboard/routes/dashboard/conversation/ConversationView.vue b/app/javascript/dashboard/routes/dashboard/conversation/ConversationView.vue
index 1d88921ff..a993c86e7 100644
--- a/app/javascript/dashboard/routes/dashboard/conversation/ConversationView.vue
+++ b/app/javascript/dashboard/routes/dashboard/conversation/ConversationView.vue
@@ -1,39 +1,3 @@
-<template>
-  <section class="bg-white conversation-page dark:bg-slate-900">
-    <chat-list
-      :show-conversation-list="showConversationList"
-      :conversation-inbox="inboxId"
-      :label="label"
-      :team-id="teamId"
-      :conversation-type="conversationType"
-      :folders-id="foldersId"
-      :is-on-expanded-layout="isOnExpandedLayout"
-      @conversation-load="onConversationLoad"
-    >
-      <pop-over-search
-        :is-on-expanded-layout="isOnExpandedLayout"
-        @toggle-conversation-layout="toggleConversationLayout"
-      />
-    </chat-list>
-    <conversation-box
-      v-if="showMessageView"
-      :inbox-id="inboxId"
-      :is-contact-panel-open="isContactPanelOpen"
-      :is-on-expanded-layout="isOnExpandedLayout"
-      @contact-panel-toggle="onToggleContactPanel"
-    />
-    <woot-modal
-      :show.sync="showCustomSnoozeModal"
-      :on-close="hideCustomSnoozeModal"
-    >
-      <custom-snooze-modal
-        @close="hideCustomSnoozeModal"
-        @choose-time="chooseSnoozeTime"
-      />
-    </woot-modal>
-  </section>
-</template>
-
 <script>
 import { mapGetters } from 'vuex';
 import { useAlert } from 'dashboard/composables';
@@ -254,6 +218,42 @@ export default {
   },
 };
 </script>
+
+<template>
+  <section class="bg-white conversation-page dark:bg-slate-900">
+    <chat-list
+      :show-conversation-list="showConversationList"
+      :conversation-inbox="inboxId"
+      :label="label"
+      :team-id="teamId"
+      :conversation-type="conversationType"
+      :folders-id="foldersId"
+      :is-on-expanded-layout="isOnExpandedLayout"
+      @conversation-load="onConversationLoad"
+    >
+      <pop-over-search
+        :is-on-expanded-layout="isOnExpandedLayout"
+        @toggle-conversation-layout="toggleConversationLayout"
+      />
+    </chat-list>
+    <conversation-box
+      v-if="showMessageView"
+      :inbox-id="inboxId"
+      :is-contact-panel-open="isContactPanelOpen"
+      :is-on-expanded-layout="isOnExpandedLayout"
+      @contact-panel-toggle="onToggleContactPanel"
+    />
+    <woot-modal
+      :show.sync="showCustomSnoozeModal"
+      :on-close="hideCustomSnoozeModal"
+    >
+      <custom-snooze-modal
+        @close="hideCustomSnoozeModal"
+        @choose-time="chooseSnoozeTime"
+      />
+    </woot-modal>
+  </section>
+</template>
 <style lang="scss" scoped>
 .conversation-page {
   display: flex;
diff --git a/app/javascript/dashboard/routes/dashboard/conversation/Macros/List.vue b/app/javascript/dashboard/routes/dashboard/conversation/Macros/List.vue
index a2bade368..3259bb464 100644
--- a/app/javascript/dashboard/routes/dashboard/conversation/Macros/List.vue
+++ b/app/javascript/dashboard/routes/dashboard/conversation/Macros/List.vue
@@ -1,3 +1,30 @@
+<script>
+import { mapGetters } from 'vuex';
+import MacroItem from './MacroItem.vue';
+import accountMixin from 'dashboard/mixins/account.js';
+
+export default {
+  components: {
+    MacroItem,
+  },
+  mixins: [accountMixin],
+  props: {
+    conversationId: {
+      type: [Number, String],
+      required: true,
+    },
+  },
+  computed: {
+    ...mapGetters({
+      macros: ['macros/getMacros'],
+      uiFlags: 'macros/getUIFlags',
+    }),
+  },
+  mounted() {
+    this.$store.dispatch('macros/get');
+  },
+};
+</script>
 <template>
   <div>
     <div
@@ -32,33 +59,6 @@
     </div>
   </div>
 </template>
-<script>
-import { mapGetters } from 'vuex';
-import MacroItem from './MacroItem.vue';
-import accountMixin from 'dashboard/mixins/account.js';
-
-export default {
-  components: {
-    MacroItem,
-  },
-  mixins: [accountMixin],
-  props: {
-    conversationId: {
-      type: [Number, String],
-      required: true,
-    },
-  },
-  computed: {
-    ...mapGetters({
-      macros: ['macros/getMacros'],
-      uiFlags: 'macros/getUIFlags',
-    }),
-  },
-  mounted() {
-    this.$store.dispatch('macros/get');
-  },
-};
-</script>
 <style scoped lang="scss">
 .macros-list {
   padding: var(--space-smaller);
diff --git a/app/javascript/dashboard/routes/dashboard/conversation/Macros/MacroItem.vue b/app/javascript/dashboard/routes/dashboard/conversation/Macros/MacroItem.vue
index 63f07778d..1aadce341 100644
--- a/app/javascript/dashboard/routes/dashboard/conversation/Macros/MacroItem.vue
+++ b/app/javascript/dashboard/routes/dashboard/conversation/Macros/MacroItem.vue
@@ -1,37 +1,3 @@
-<template>
-  <div class="macro button secondary clear">
-    <span class="overflow-hidden whitespace-nowrap text-ellipsis">{{
-      macro.name
-    }}</span>
-    <div class="flex items-center gap-1 macros-actions">
-      <woot-button
-        v-tooltip.left-start="$t('MACROS.EXECUTE.PREVIEW')"
-        size="tiny"
-        variant="smooth"
-        color-scheme="secondary"
-        icon="info"
-        @click="toggleMacroPreview(macro)"
-      />
-      <woot-button
-        v-tooltip.left-start="$t('MACROS.EXECUTE.BUTTON_TOOLTIP')"
-        size="tiny"
-        variant="smooth"
-        color-scheme="secondary"
-        icon="play-circle"
-        :is-loading="isExecuting"
-        @click="executeMacro(macro)"
-      />
-    </div>
-    <transition name="menu-slide">
-      <macro-preview
-        v-if="showPreview"
-        v-on-clickaway="closeMacroPreview"
-        :macro="macro"
-      />
-    </transition>
-  </div>
-</template>
-
 <script>
 import { useAlert } from 'dashboard/composables';
 import MacroPreview from './MacroPreview.vue';
@@ -83,6 +49,40 @@ export default {
 };
 </script>
 
+<template>
+  <div class="macro button secondary clear">
+    <span class="overflow-hidden whitespace-nowrap text-ellipsis">{{
+      macro.name
+    }}</span>
+    <div class="flex items-center gap-1 macros-actions">
+      <woot-button
+        v-tooltip.left-start="$t('MACROS.EXECUTE.PREVIEW')"
+        size="tiny"
+        variant="smooth"
+        color-scheme="secondary"
+        icon="info"
+        @click="toggleMacroPreview(macro)"
+      />
+      <woot-button
+        v-tooltip.left-start="$t('MACROS.EXECUTE.BUTTON_TOOLTIP')"
+        size="tiny"
+        variant="smooth"
+        color-scheme="secondary"
+        icon="play-circle"
+        :is-loading="isExecuting"
+        @click="executeMacro(macro)"
+      />
+    </div>
+    <transition name="menu-slide">
+      <macro-preview
+        v-if="showPreview"
+        v-on-clickaway="closeMacroPreview"
+        :macro="macro"
+      />
+    </transition>
+  </div>
+</template>
+
 <style scoped lang="scss">
 .macro {
   @apply relative flex items-center justify-between leading-4;
diff --git a/app/javascript/dashboard/routes/dashboard/conversation/Macros/MacroPreview.vue b/app/javascript/dashboard/routes/dashboard/conversation/Macros/MacroPreview.vue
index e81d048d1..5b0a33c3a 100644
--- a/app/javascript/dashboard/routes/dashboard/conversation/Macros/MacroPreview.vue
+++ b/app/javascript/dashboard/routes/dashboard/conversation/Macros/MacroPreview.vue
@@ -1,30 +1,3 @@
-<template>
-  <div
-    class="macro-preview absolute max-h-[22.5rem] w-64 rounded-md bg-white dark:bg-slate-800 shadow-lg bottom-8 right-8 overflow-y-auto p-4 text-left rtl:text-right"
-  >
-    <h6 class="text-sm text-slate-800 dark:text-slate-100 mb-4">
-      {{ macro.name }}
-    </h6>
-    <div
-      v-for="(action, i) in resolvedMacro"
-      :key="i"
-      class="relative pl-4 macro-block"
-    >
-      <div
-        v-if="i !== macro.actions.length - 1"
-        class="top-[0.390625rem] absolute -bottom-1 left-0 w-px bg-slate-75 dark:bg-slate-600"
-      />
-      <div
-        class="absolute -left-[0.21875rem] top-[0.2734375rem] w-2 h-2 rounded-full bg-white dark:bg-slate-200 border-2 border-solid border-slate-100 dark:border-slate-600"
-      />
-      <p class="text-xs text-slate-500 dark:text-slate-400 mb-1">
-        {{ action.actionName }}
-      </p>
-      <p class="text-slate-800 dark:text-slate-100">{{ action.actionValue }}</p>
-    </div>
-  </div>
-</template>
-
 <script>
 import {
   resolveActionName,
@@ -81,6 +54,33 @@ export default {
 };
 </script>
 
+<template>
+  <div
+    class="macro-preview absolute max-h-[22.5rem] w-64 rounded-md bg-white dark:bg-slate-800 shadow-lg bottom-8 right-8 overflow-y-auto p-4 text-left rtl:text-right"
+  >
+    <h6 class="text-sm text-slate-800 dark:text-slate-100 mb-4">
+      {{ macro.name }}
+    </h6>
+    <div
+      v-for="(action, i) in resolvedMacro"
+      :key="i"
+      class="relative pl-4 macro-block"
+    >
+      <div
+        v-if="i !== macro.actions.length - 1"
+        class="top-[0.390625rem] absolute -bottom-1 left-0 w-px bg-slate-75 dark:bg-slate-600"
+      />
+      <div
+        class="absolute -left-[0.21875rem] top-[0.2734375rem] w-2 h-2 rounded-full bg-white dark:bg-slate-200 border-2 border-solid border-slate-100 dark:border-slate-600"
+      />
+      <p class="text-xs text-slate-500 dark:text-slate-400 mb-1">
+        {{ action.actionName }}
+      </p>
+      <p class="text-slate-800 dark:text-slate-100">{{ action.actionValue }}</p>
+    </div>
+  </div>
+</template>
+
 <style lang="scss" scoped>
 .macro-preview {
   .macro-block {
diff --git a/app/javascript/dashboard/routes/dashboard/conversation/contact/ContactForm.vue b/app/javascript/dashboard/routes/dashboard/conversation/contact/ContactForm.vue
index 5a7f866f9..bf68334a6 100644
--- a/app/javascript/dashboard/routes/dashboard/conversation/contact/ContactForm.vue
+++ b/app/javascript/dashboard/routes/dashboard/conversation/contact/ContactForm.vue
@@ -1,154 +1,3 @@
-<template>
-  <form
-    class="w-full px-8 pt-6 pb-8 contact--form"
-    @submit.prevent="handleSubmit"
-  >
-    <div>
-      <div class="w-full">
-        <woot-avatar-uploader
-          :label="$t('CONTACT_FORM.FORM.AVATAR.LABEL')"
-          :src="avatarUrl"
-          :username-avatar="name"
-          :delete-avatar="!!avatarUrl"
-          class="settings-item"
-          @change="handleImageUpload"
-          @onAvatarDelete="handleAvatarDelete"
-        />
-      </div>
-    </div>
-    <div>
-      <div class="w-full">
-        <label :class="{ error: v$.name.$error }">
-          {{ $t('CONTACT_FORM.FORM.NAME.LABEL') }}
-          <input
-            v-model.trim="name"
-            type="text"
-            :placeholder="$t('CONTACT_FORM.FORM.NAME.PLACEHOLDER')"
-            @input="v$.name.$touch"
-          />
-        </label>
-
-        <label :class="{ error: v$.email.$error }">
-          {{ $t('CONTACT_FORM.FORM.EMAIL_ADDRESS.LABEL') }}
-          <input
-            v-model.trim="email"
-            type="text"
-            :placeholder="$t('CONTACT_FORM.FORM.EMAIL_ADDRESS.PLACEHOLDER')"
-            @input="v$.email.$touch"
-          />
-          <span v-if="v$.email.$error" class="message">
-            {{ $t('CONTACT_FORM.FORM.EMAIL_ADDRESS.ERROR') }}
-          </span>
-        </label>
-      </div>
-    </div>
-    <div class="w-full">
-      <label :class="{ error: v$.description.$error }">
-        {{ $t('CONTACT_FORM.FORM.BIO.LABEL') }}
-        <textarea
-          v-model.trim="description"
-          type="text"
-          :placeholder="$t('CONTACT_FORM.FORM.BIO.PLACEHOLDER')"
-          @input="v$.description.$touch"
-        />
-      </label>
-    </div>
-    <div>
-      <div class="w-full">
-        <label
-          :class="{
-            error: isPhoneNumberNotValid,
-          }"
-        >
-          {{ $t('CONTACT_FORM.FORM.PHONE_NUMBER.LABEL') }}
-          <woot-phone-input
-            v-model="phoneNumber"
-            :value="phoneNumber"
-            :error="isPhoneNumberNotValid"
-            :placeholder="$t('CONTACT_FORM.FORM.PHONE_NUMBER.PLACEHOLDER')"
-            @input="onPhoneNumberInputChange"
-            @blur="v$.phoneNumber.$touch"
-            @setCode="setPhoneCode"
-          />
-          <span v-if="isPhoneNumberNotValid" class="message">
-            {{ phoneNumberError }}
-          </span>
-        </label>
-        <div
-          v-if="isPhoneNumberNotValid || !phoneNumber"
-          class="relative mx-0 mt-0 mb-2.5 p-2 rounded-md text-sm border border-solid border-yellow-500 text-yellow-700 dark:border-yellow-700 bg-yellow-200/60 dark:bg-yellow-200/20 dark:text-yellow-400"
-        >
-          {{ $t('CONTACT_FORM.FORM.PHONE_NUMBER.HELP') }}
-        </div>
-      </div>
-    </div>
-    <woot-input
-      v-model.trim="companyName"
-      class="w-full"
-      :label="$t('CONTACT_FORM.FORM.COMPANY_NAME.LABEL')"
-      :placeholder="$t('CONTACT_FORM.FORM.COMPANY_NAME.PLACEHOLDER')"
-    />
-    <div>
-      <div class="w-full">
-        <label>
-          {{ $t('CONTACT_FORM.FORM.COUNTRY.LABEL') }}
-        </label>
-        <multiselect
-          v-model="country"
-          track-by="id"
-          label="name"
-          :placeholder="$t('CONTACT_FORM.FORM.COUNTRY.PLACEHOLDER')"
-          selected-label
-          :select-label="$t('CONTACT_FORM.FORM.COUNTRY.SELECT_PLACEHOLDER')"
-          :deselect-label="$t('CONTACT_FORM.FORM.COUNTRY.REMOVE')"
-          :custom-label="countryNameWithCode"
-          :max-height="160"
-          :options="countries"
-          :allow-empty="true"
-          :option-height="104"
-        />
-      </div>
-    </div>
-    <woot-input
-      v-model="city"
-      class="w-full"
-      :label="$t('CONTACT_FORM.FORM.CITY.LABEL')"
-      :placeholder="$t('CONTACT_FORM.FORM.CITY.PLACEHOLDER')"
-    />
-
-    <div class="w-full">
-      <label>{{ $t('CONTACTS_PAGE.LIST.TABLE_HEADER.SOCIAL_PROFILES') }}</label>
-      <div
-        v-for="socialProfile in socialProfileKeys"
-        :key="socialProfile.key"
-        class="flex items-stretch w-full mb-4"
-      >
-        <span
-          class="flex items-center h-10 px-2 text-sm border-solid bg-slate-50 border-y ltr:border-l rtl:border-r ltr:rounded-l-md rtl:rounded-r-md dark:bg-slate-700 text-slate-800 dark:text-slate-100 border-slate-200 dark:border-slate-600"
-        >
-          {{ socialProfile.prefixURL }}
-        </span>
-        <input
-          v-model="socialProfileUserNames[socialProfile.key]"
-          class="input-group-field ltr:!rounded-l-none rtl:rounded-r-none !mb-0"
-          type="text"
-        />
-      </div>
-    </div>
-    <div class="flex flex-row justify-end w-full gap-2 px-0 py-2">
-      <div class="w-full">
-        <woot-submit-button
-          :loading="inProgress"
-          :button-text="$t('CONTACT_FORM.FORM.SUBMIT')"
-        />
-        <button class="button clear" @click.prevent="onCancel">
-          {{ $t('CONTACT_FORM.FORM.CANCEL') }}
-        </button>
-      </div>
-    </div>
-  </form>
-</template>
-
 <script>
 import { useAlert } from 'dashboard/composables';
 import {
@@ -418,6 +267,157 @@ export default {
 };
 </script>
 
+<template>
+  <form
+    class="w-full px-8 pt-6 pb-8 contact--form"
+    @submit.prevent="handleSubmit"
+  >
+    <div>
+      <div class="w-full">
+        <woot-avatar-uploader
+          :label="$t('CONTACT_FORM.FORM.AVATAR.LABEL')"
+          :src="avatarUrl"
+          :username-avatar="name"
+          :delete-avatar="!!avatarUrl"
+          class="settings-item"
+          @change="handleImageUpload"
+          @onAvatarDelete="handleAvatarDelete"
+        />
+      </div>
+    </div>
+    <div>
+      <div class="w-full">
+        <label :class="{ error: v$.name.$error }">
+          {{ $t('CONTACT_FORM.FORM.NAME.LABEL') }}
+          <input
+            v-model.trim="name"
+            type="text"
+            :placeholder="$t('CONTACT_FORM.FORM.NAME.PLACEHOLDER')"
+            @input="v$.name.$touch"
+          />
+        </label>
+
+        <label :class="{ error: v$.email.$error }">
+          {{ $t('CONTACT_FORM.FORM.EMAIL_ADDRESS.LABEL') }}
+          <input
+            v-model.trim="email"
+            type="text"
+            :placeholder="$t('CONTACT_FORM.FORM.EMAIL_ADDRESS.PLACEHOLDER')"
+            @input="v$.email.$touch"
+          />
+          <span v-if="v$.email.$error" class="message">
+            {{ $t('CONTACT_FORM.FORM.EMAIL_ADDRESS.ERROR') }}
+          </span>
+        </label>
+      </div>
+    </div>
+    <div class="w-full">
+      <label :class="{ error: v$.description.$error }">
+        {{ $t('CONTACT_FORM.FORM.BIO.LABEL') }}
+        <textarea
+          v-model.trim="description"
+          type="text"
+          :placeholder="$t('CONTACT_FORM.FORM.BIO.PLACEHOLDER')"
+          @input="v$.description.$touch"
+        />
+      </label>
+    </div>
+    <div>
+      <div class="w-full">
+        <label
+          :class="{
+            error: isPhoneNumberNotValid,
+          }"
+        >
+          {{ $t('CONTACT_FORM.FORM.PHONE_NUMBER.LABEL') }}
+          <woot-phone-input
+            v-model="phoneNumber"
+            :value="phoneNumber"
+            :error="isPhoneNumberNotValid"
+            :placeholder="$t('CONTACT_FORM.FORM.PHONE_NUMBER.PLACEHOLDER')"
+            @input="onPhoneNumberInputChange"
+            @blur="v$.phoneNumber.$touch"
+            @setCode="setPhoneCode"
+          />
+          <span v-if="isPhoneNumberNotValid" class="message">
+            {{ phoneNumberError }}
+          </span>
+        </label>
+        <div
+          v-if="isPhoneNumberNotValid || !phoneNumber"
+          class="relative mx-0 mt-0 mb-2.5 p-2 rounded-md text-sm border border-solid border-yellow-500 text-yellow-700 dark:border-yellow-700 bg-yellow-200/60 dark:bg-yellow-200/20 dark:text-yellow-400"
+        >
+          {{ $t('CONTACT_FORM.FORM.PHONE_NUMBER.HELP') }}
+        </div>
+      </div>
+    </div>
+    <woot-input
+      v-model.trim="companyName"
+      class="w-full"
+      :label="$t('CONTACT_FORM.FORM.COMPANY_NAME.LABEL')"
+      :placeholder="$t('CONTACT_FORM.FORM.COMPANY_NAME.PLACEHOLDER')"
+    />
+    <div>
+      <div class="w-full">
+        <label>
+          {{ $t('CONTACT_FORM.FORM.COUNTRY.LABEL') }}
+        </label>
+        <multiselect
+          v-model="country"
+          track-by="id"
+          label="name"
+          :placeholder="$t('CONTACT_FORM.FORM.COUNTRY.PLACEHOLDER')"
+          selected-label
+          :select-label="$t('CONTACT_FORM.FORM.COUNTRY.SELECT_PLACEHOLDER')"
+          :deselect-label="$t('CONTACT_FORM.FORM.COUNTRY.REMOVE')"
+          :custom-label="countryNameWithCode"
+          :max-height="160"
+          :options="countries"
+          :allow-empty="true"
+          :option-height="104"
+        />
+      </div>
+    </div>
+    <woot-input
+      v-model="city"
+      class="w-full"
+      :label="$t('CONTACT_FORM.FORM.CITY.LABEL')"
+      :placeholder="$t('CONTACT_FORM.FORM.CITY.PLACEHOLDER')"
+    />
+
+    <div class="w-full">
+      <label>{{ $t('CONTACTS_PAGE.LIST.TABLE_HEADER.SOCIAL_PROFILES') }}</label>
+      <div
+        v-for="socialProfile in socialProfileKeys"
+        :key="socialProfile.key"
+        class="flex items-stretch w-full mb-4"
+      >
+        <span
+          class="flex items-center h-10 px-2 text-sm border-solid bg-slate-50 border-y ltr:border-l rtl:border-r ltr:rounded-l-md rtl:rounded-r-md dark:bg-slate-700 text-slate-800 dark:text-slate-100 border-slate-200 dark:border-slate-600"
+        >
+          {{ socialProfile.prefixURL }}
+        </span>
+        <input
+          v-model="socialProfileUserNames[socialProfile.key]"
+          class="input-group-field ltr:!rounded-l-none rtl:rounded-r-none !mb-0"
+          type="text"
+        />
+      </div>
+    </div>
+    <div class="flex flex-row justify-end w-full gap-2 px-0 py-2">
+      <div class="w-full">
+        <woot-submit-button
+          :loading="inProgress"
+          :button-text="$t('CONTACT_FORM.FORM.SUBMIT')"
+        />
+        <button class="button clear" @click.prevent="onCancel">
+          {{ $t('CONTACT_FORM.FORM.CANCEL') }}
+        </button>
+      </div>
+    </div>
+  </form>
+</template>
+
 <style scoped lang="scss">
 ::v-deep {
   .multiselect .multiselect__tags .multiselect__single {
diff --git a/app/javascript/dashboard/routes/dashboard/conversation/contact/ContactInfo.vue b/app/javascript/dashboard/routes/dashboard/conversation/contact/ContactInfo.vue
index 4e9858a87..5bcdfe3f6 100644
--- a/app/javascript/dashboard/routes/dashboard/conversation/contact/ContactInfo.vue
+++ b/app/javascript/dashboard/routes/dashboard/conversation/contact/ContactInfo.vue
@@ -1,170 +1,3 @@
-<template>
-  <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
-          v-if="showAvatar"
-          :src="contact.thumbnail"
-          size="56px"
-          :username="contact.name"
-          :status="contact.availability_status"
-        />
-        <woot-button
-          v-if="showCloseButton"
-          :icon="closeIconName"
-          class="clear secondary rtl:rotate-180"
-          @click="onPanelToggle"
-        />
-      </div>
-
-      <div class="flex flex-col items-start gap-1.5 min-w-0 w-full">
-        <div v-if="showAvatar" class="flex items-start w-full min-w-0 gap-2">
-          <h3
-            class="flex-shrink max-w-full min-w-0 my-0 text-base capitalize break-words text-slate-800 dark:text-slate-100"
-          >
-            {{ contact.name }}
-          </h3>
-          <div class="flex flex-row items-center gap-1">
-            <fluent-icon
-              v-if="contact.created_at"
-              v-tooltip.left="
-                `${$t('CONTACT_PANEL.CREATED_AT_LABEL')} ${dynamicTime(
-                  contact.created_at
-                )}`
-              "
-              icon="info"
-              size="14"
-              class="mt-0.5"
-            />
-            <a
-              :href="contactProfileLink"
-              class="text-base"
-              target="_blank"
-              rel="noopener nofollow noreferrer"
-            >
-              <woot-button
-                size="tiny"
-                icon="open"
-                variant="clear"
-                color-scheme="secondary"
-              />
-            </a>
-          </div>
-        </div>
-
-        <p v-if="additionalAttributes.description" class="break-words mb-0.5">
-          {{ additionalAttributes.description }}
-        </p>
-        <div class="flex flex-col items-start w-full gap-2">
-          <contact-info-row
-            :href="contact.email ? `mailto:${contact.email}` : ''"
-            :value="contact.email"
-            icon="mail"
-            emoji="✉️"
-            :title="$t('CONTACT_PANEL.EMAIL_ADDRESS')"
-            show-copy
-          />
-          <contact-info-row
-            :href="contact.phone_number ? `tel:${contact.phone_number}` : ''"
-            :value="contact.phone_number"
-            icon="call"
-            emoji="📞"
-            :title="$t('CONTACT_PANEL.PHONE_NUMBER')"
-            show-copy
-          />
-          <contact-info-row
-            v-if="contact.identifier"
-            :value="contact.identifier"
-            icon="contact-identify"
-            emoji="🪪"
-            :title="$t('CONTACT_PANEL.IDENTIFIER')"
-          />
-          <contact-info-row
-            :value="additionalAttributes.company_name"
-            icon="building-bank"
-            emoji="🏢"
-            :title="$t('CONTACT_PANEL.COMPANY')"
-          />
-          <contact-info-row
-            v-if="location || additionalAttributes.location"
-            :value="location || additionalAttributes.location"
-            icon="map"
-            emoji="🌍"
-            :title="$t('CONTACT_PANEL.LOCATION')"
-          />
-          <social-icons :social-profiles="socialProfiles" />
-        </div>
-      </div>
-      <div class="flex items-center w-full mt-0.5 gap-2">
-        <woot-button
-          v-tooltip="$t('CONTACT_PANEL.NEW_MESSAGE')"
-          title="$t('CONTACT_PANEL.NEW_MESSAGE')"
-          icon="chat"
-          size="small"
-          @click="toggleConversationModal"
-        />
-        <woot-button
-          v-tooltip="$t('EDIT_CONTACT.BUTTON_LABEL')"
-          title="$t('EDIT_CONTACT.BUTTON_LABEL')"
-          icon="edit"
-          variant="smooth"
-          size="small"
-          @click="toggleEditModal"
-        />
-        <woot-button
-          v-tooltip="$t('CONTACT_PANEL.MERGE_CONTACT')"
-          title="$t('CONTACT_PANEL.MERGE_CONTACT')"
-          icon="merge"
-          variant="smooth"
-          size="small"
-          color-scheme="secondary"
-          :disabled="uiFlags.isMerging"
-          @click="openMergeModal"
-        />
-        <woot-button
-          v-if="isAdmin"
-          v-tooltip="$t('DELETE_CONTACT.BUTTON_LABEL')"
-          title="$t('DELETE_CONTACT.BUTTON_LABEL')"
-          icon="delete"
-          variant="smooth"
-          size="small"
-          color-scheme="alert"
-          :disabled="uiFlags.isDeleting"
-          @click="toggleDeleteModal"
-        />
-      </div>
-      <edit-contact
-        v-if="showEditModal"
-        :show="showEditModal"
-        :contact="contact"
-        @cancel="toggleEditModal"
-      />
-      <new-conversation
-        v-if="contact.id"
-        :show="showConversationModal"
-        :contact="contact"
-        @cancel="toggleConversationModal"
-      />
-      <contact-merge-modal
-        v-if="showMergeModal"
-        :primary-contact="contact"
-        :show="showMergeModal"
-        @close="toggleMergeModal"
-      />
-    </div>
-    <woot-delete-modal
-      v-if="showDeleteModal"
-      :show.sync="showDeleteModal"
-      :on-close="closeDelete"
-      :on-confirm="confirmDeletion"
-      :title="$t('DELETE_CONTACT.CONFIRM.TITLE')"
-      :message="$t('DELETE_CONTACT.CONFIRM.MESSAGE')"
-      :message-value="confirmDeleteMessage"
-      :confirm-text="$t('DELETE_CONTACT.CONFIRM.YES')"
-      :reject-text="$t('DELETE_CONTACT.CONFIRM.NO')"
-    />
-  </div>
-</template>
 <script>
 import { mapGetters } from 'vuex';
 import { useAlert } from 'dashboard/composables';
@@ -334,3 +167,170 @@ export default {
   },
 };
 </script>
+<template>
+  <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
+          v-if="showAvatar"
+          :src="contact.thumbnail"
+          size="56px"
+          :username="contact.name"
+          :status="contact.availability_status"
+        />
+        <woot-button
+          v-if="showCloseButton"
+          :icon="closeIconName"
+          class="clear secondary rtl:rotate-180"
+          @click="onPanelToggle"
+        />
+      </div>
+
+      <div class="flex flex-col items-start gap-1.5 min-w-0 w-full">
+        <div v-if="showAvatar" class="flex items-start w-full min-w-0 gap-2">
+          <h3
+            class="flex-shrink max-w-full min-w-0 my-0 text-base capitalize break-words text-slate-800 dark:text-slate-100"
+          >
+            {{ contact.name }}
+          </h3>
+          <div class="flex flex-row items-center gap-1">
+            <fluent-icon
+              v-if="contact.created_at"
+              v-tooltip.left="
+                `${$t('CONTACT_PANEL.CREATED_AT_LABEL')} ${dynamicTime(
+                  contact.created_at
+                )}`
+              "
+              icon="info"
+              size="14"
+              class="mt-0.5"
+            />
+            <a
+              :href="contactProfileLink"
+              class="text-base"
+              target="_blank"
+              rel="noopener nofollow noreferrer"
+            >
+              <woot-button
+                size="tiny"
+                icon="open"
+                variant="clear"
+                color-scheme="secondary"
+              />
+            </a>
+          </div>
+        </div>
+
+        <p v-if="additionalAttributes.description" class="break-words mb-0.5">
+          {{ additionalAttributes.description }}
+        </p>
+        <div class="flex flex-col items-start w-full gap-2">
+          <contact-info-row
+            :href="contact.email ? `mailto:${contact.email}` : ''"
+            :value="contact.email"
+            icon="mail"
+            emoji="✉️"
+            :title="$t('CONTACT_PANEL.EMAIL_ADDRESS')"
+            show-copy
+          />
+          <contact-info-row
+            :href="contact.phone_number ? `tel:${contact.phone_number}` : ''"
+            :value="contact.phone_number"
+            icon="call"
+            emoji="📞"
+            :title="$t('CONTACT_PANEL.PHONE_NUMBER')"
+            show-copy
+          />
+          <contact-info-row
+            v-if="contact.identifier"
+            :value="contact.identifier"
+            icon="contact-identify"
+            emoji="🪪"
+            :title="$t('CONTACT_PANEL.IDENTIFIER')"
+          />
+          <contact-info-row
+            :value="additionalAttributes.company_name"
+            icon="building-bank"
+            emoji="🏢"
+            :title="$t('CONTACT_PANEL.COMPANY')"
+          />
+          <contact-info-row
+            v-if="location || additionalAttributes.location"
+            :value="location || additionalAttributes.location"
+            icon="map"
+            emoji="🌍"
+            :title="$t('CONTACT_PANEL.LOCATION')"
+          />
+          <social-icons :social-profiles="socialProfiles" />
+        </div>
+      </div>
+      <div class="flex items-center w-full mt-0.5 gap-2">
+        <woot-button
+          v-tooltip="$t('CONTACT_PANEL.NEW_MESSAGE')"
+          title="$t('CONTACT_PANEL.NEW_MESSAGE')"
+          icon="chat"
+          size="small"
+          @click="toggleConversationModal"
+        />
+        <woot-button
+          v-tooltip="$t('EDIT_CONTACT.BUTTON_LABEL')"
+          title="$t('EDIT_CONTACT.BUTTON_LABEL')"
+          icon="edit"
+          variant="smooth"
+          size="small"
+          @click="toggleEditModal"
+        />
+        <woot-button
+          v-tooltip="$t('CONTACT_PANEL.MERGE_CONTACT')"
+          title="$t('CONTACT_PANEL.MERGE_CONTACT')"
+          icon="merge"
+          variant="smooth"
+          size="small"
+          color-scheme="secondary"
+          :disabled="uiFlags.isMerging"
+          @click="openMergeModal"
+        />
+        <woot-button
+          v-if="isAdmin"
+          v-tooltip="$t('DELETE_CONTACT.BUTTON_LABEL')"
+          title="$t('DELETE_CONTACT.BUTTON_LABEL')"
+          icon="delete"
+          variant="smooth"
+          size="small"
+          color-scheme="alert"
+          :disabled="uiFlags.isDeleting"
+          @click="toggleDeleteModal"
+        />
+      </div>
+      <edit-contact
+        v-if="showEditModal"
+        :show="showEditModal"
+        :contact="contact"
+        @cancel="toggleEditModal"
+      />
+      <new-conversation
+        v-if="contact.id"
+        :show="showConversationModal"
+        :contact="contact"
+        @cancel="toggleConversationModal"
+      />
+      <contact-merge-modal
+        v-if="showMergeModal"
+        :primary-contact="contact"
+        :show="showMergeModal"
+        @close="toggleMergeModal"
+      />
+    </div>
+    <woot-delete-modal
+      v-if="showDeleteModal"
+      :show.sync="showDeleteModal"
+      :on-close="closeDelete"
+      :on-confirm="confirmDeletion"
+      :title="$t('DELETE_CONTACT.CONFIRM.TITLE')"
+      :message="$t('DELETE_CONTACT.CONFIRM.MESSAGE')"
+      :message-value="confirmDeleteMessage"
+      :confirm-text="$t('DELETE_CONTACT.CONFIRM.YES')"
+      :reject-text="$t('DELETE_CONTACT.CONFIRM.NO')"
+    />
+  </div>
+</template>
diff --git a/app/javascript/dashboard/routes/dashboard/conversation/contact/ContactInfoRow.vue b/app/javascript/dashboard/routes/dashboard/conversation/contact/ContactInfoRow.vue
index 6634f5b1b..b980a68cd 100644
--- a/app/javascript/dashboard/routes/dashboard/conversation/contact/ContactInfoRow.vue
+++ b/app/javascript/dashboard/routes/dashboard/conversation/contact/ContactInfoRow.vue
@@ -1,3 +1,43 @@
+<script>
+import { useAlert } from 'dashboard/composables';
+import EmojiOrIcon from 'shared/components/EmojiOrIcon.vue';
+import { copyTextToClipboard } from 'shared/helpers/clipboard';
+
+export default {
+  components: {
+    EmojiOrIcon,
+  },
+  props: {
+    href: {
+      type: String,
+      default: '',
+    },
+    icon: {
+      type: String,
+      required: true,
+    },
+    emoji: {
+      type: String,
+      required: true,
+    },
+    value: {
+      type: String,
+      default: '',
+    },
+    showCopy: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  methods: {
+    async onCopy(e) {
+      e.preventDefault();
+      await copyTextToClipboard(this.value);
+      useAlert(this.$t('CONTACT_PANEL.COPY_SUCCESSFUL'));
+    },
+  },
+};
+</script>
 <template>
   <div class="w-full h-5 ltr:-ml-1 rtl:-mr-1">
     <a
@@ -56,43 +96,3 @@
     </div>
   </div>
 </template>
-<script>
-import { useAlert } from 'dashboard/composables';
-import EmojiOrIcon from 'shared/components/EmojiOrIcon.vue';
-import { copyTextToClipboard } from 'shared/helpers/clipboard';
-
-export default {
-  components: {
-    EmojiOrIcon,
-  },
-  props: {
-    href: {
-      type: String,
-      default: '',
-    },
-    icon: {
-      type: String,
-      required: true,
-    },
-    emoji: {
-      type: String,
-      required: true,
-    },
-    value: {
-      type: String,
-      default: '',
-    },
-    showCopy: {
-      type: Boolean,
-      default: false,
-    },
-  },
-  methods: {
-    async onCopy(e) {
-      e.preventDefault();
-      await copyTextToClipboard(this.value);
-      useAlert(this.$t('CONTACT_PANEL.COPY_SUCCESSFUL'));
-    },
-  },
-};
-</script>
diff --git a/app/javascript/dashboard/routes/dashboard/conversation/contact/ConversationForm.vue b/app/javascript/dashboard/routes/dashboard/conversation/contact/ConversationForm.vue
index a4668987b..4b33eb889 100644
--- a/app/javascript/dashboard/routes/dashboard/conversation/contact/ConversationForm.vue
+++ b/app/javascript/dashboard/routes/dashboard/conversation/contact/ConversationForm.vue
@@ -1,242 +1,3 @@
-<template>
-  <form class="w-full conversation--form" @submit.prevent="onFormSubmit">
-    <div
-      v-if="showNoInboxAlert"
-      class="relative mx-0 mt-0 mb-2.5 p-2 rounded-none text-sm border border-solid border-yellow-500 dark:border-yellow-700 bg-yellow-200/60 dark:bg-yellow-200/20 text-slate-700 dark:text-yellow-400"
-    >
-      <p class="mb-0">
-        {{ $t('NEW_CONVERSATION.NO_INBOX') }}
-      </p>
-    </div>
-    <div v-else>
-      <div class="flex flex-row gap-2">
-        <div class="w-[50%]">
-          <label>
-            {{ $t('NEW_CONVERSATION.FORM.INBOX.LABEL') }}
-          </label>
-          <div
-            class="multiselect-wrap--small"
-            :class="{ 'has-multi-select-error': v$.targetInbox.$error }"
-          >
-            <multiselect
-              v-model="targetInbox"
-              track-by="id"
-              label="name"
-              :placeholder="$t('FORMS.MULTISELECT.SELECT')"
-              selected-label=""
-              select-label=""
-              deselect-label=""
-              :max-height="160"
-              :close-on-select="true"
-              :options="[...inboxes]"
-            >
-              <template slot="singleLabel" slot-scope="{ option }">
-                <inbox-dropdown-item
-                  v-if="option.name"
-                  :name="option.name"
-                  :inbox-identifier="computedInboxSource(option)"
-                  :channel-type="option.channel_type"
-                />
-                <span v-else>
-                  {{ $t('NEW_CONVERSATION.FORM.INBOX.PLACEHOLDER') }}
-                </span>
-              </template>
-              <template slot="option" slot-scope="{ option }">
-                <inbox-dropdown-item
-                  :name="option.name"
-                  :inbox-identifier="computedInboxSource(option)"
-                  :channel-type="option.channel_type"
-                />
-              </template>
-            </multiselect>
-          </div>
-          <label :class="{ error: v$.targetInbox.$error }">
-            <span v-if="v$.targetInbox.$error" class="message">
-              {{ $t('NEW_CONVERSATION.FORM.INBOX.ERROR') }}
-            </span>
-          </label>
-        </div>
-        <div class="w-[50%]">
-          <label>
-            {{ $t('NEW_CONVERSATION.FORM.TO.LABEL') }}
-            <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
-                :src="contact.thumbnail"
-                size="24px"
-                :username="contact.name"
-                :status="contact.availability_status"
-              />
-              <h4
-                class="m-0 ml-2 mr-2 text-sm text-slate-700 dark:text-slate-100"
-              >
-                {{ contact.name }}
-              </h4>
-            </div>
-          </label>
-        </div>
-      </div>
-      <div v-if="isAnEmailInbox" class="w-full">
-        <div class="w-full">
-          <label :class="{ error: v$.subject.$error }">
-            {{ $t('NEW_CONVERSATION.FORM.SUBJECT.LABEL') }}
-            <input
-              v-model="subject"
-              type="text"
-              :placeholder="$t('NEW_CONVERSATION.FORM.SUBJECT.PLACEHOLDER')"
-              @input="v$.subject.$touch"
-            />
-            <span v-if="v$.subject.$error" class="message">
-              {{ $t('NEW_CONVERSATION.FORM.SUBJECT.ERROR') }}
-            </span>
-          </label>
-        </div>
-      </div>
-      <div class="w-full">
-        <div class="w-full">
-          <div class="relative">
-            <canned-response
-              v-if="showCannedResponseMenu && hasSlashCommand"
-              :search-key="cannedResponseSearchKey"
-              @click="replaceTextWithCannedResponse"
-            />
-          </div>
-          <div v-if="isEmailOrWebWidgetInbox">
-            <label>
-              {{ $t('NEW_CONVERSATION.FORM.MESSAGE.LABEL') }}
-            </label>
-            <reply-email-head
-              v-if="isAnEmailInbox"
-              :cc-emails.sync="ccEmails"
-              :bcc-emails.sync="bccEmails"
-            />
-            <div class="editor-wrap">
-              <woot-message-editor
-                v-model="message"
-                class="message-editor"
-                :class="{ editor_warning: v$.message.$error }"
-                :enable-variables="true"
-                :signature="signatureToApply"
-                :allow-signature="true"
-                :placeholder="$t('NEW_CONVERSATION.FORM.MESSAGE.PLACEHOLDER')"
-                @toggle-canned-menu="toggleCannedMenu"
-                @blur="v$.message.$touch"
-              >
-                <template #footer>
-                  <message-signature-missing-alert
-                    v-if="isSignatureEnabledForInbox && !messageSignature"
-                    class="!mx-0 mb-1"
-                  />
-                  <div v-if="isAnEmailInbox" class="mt-px mb-3">
-                    <woot-button
-                      v-tooltip.top-end="signatureToggleTooltip"
-                      icon="signature"
-                      color-scheme="secondary"
-                      variant="smooth"
-                      size="small"
-                      :title="signatureToggleTooltip"
-                      @click.prevent="toggleMessageSignature"
-                    />
-                  </div>
-                </template>
-              </woot-message-editor>
-              <span v-if="v$.message.$error" class="editor-warning__message">
-                {{ $t('NEW_CONVERSATION.FORM.MESSAGE.ERROR') }}
-              </span>
-            </div>
-          </div>
-          <whatsapp-templates
-            v-else-if="hasWhatsappTemplates"
-            :inbox-id="selectedInbox.inbox.id"
-            @on-select-template="toggleWaTemplate"
-            @on-send="onSendWhatsAppReply"
-          />
-          <label v-else :class="{ error: v$.message.$error }">
-            {{ $t('NEW_CONVERSATION.FORM.MESSAGE.LABEL') }}
-            <textarea
-              v-model="message"
-              class="min-h-[5rem]"
-              type="text"
-              :placeholder="$t('NEW_CONVERSATION.FORM.MESSAGE.PLACEHOLDER')"
-              @input="v$.message.$touch"
-            />
-            <span v-if="v$.message.$error" class="message">
-              {{ $t('NEW_CONVERSATION.FORM.MESSAGE.ERROR') }}
-            </span>
-          </label>
-          <div v-if="isEmailOrWebWidgetInbox" class="flex flex-col">
-            <file-upload
-              ref="uploadAttachment"
-              input-id="newConversationAttachment"
-              :size="4096 * 4096"
-              :accept="allowedFileTypes"
-              :multiple="true"
-              :drop="true"
-              :drop-directory="false"
-              :data="{
-                direct_upload_url: '/rails/active_storage/direct_uploads',
-                direct_upload: true,
-              }"
-              @input-file="onFileUpload"
-            >
-              <woot-button
-                class-names="button--upload"
-                icon="attach"
-                emoji="📎"
-                color-scheme="secondary"
-                variant="smooth"
-                size="small"
-              >
-                {{ $t('NEW_CONVERSATION.FORM.ATTACHMENTS.SELECT') }}
-              </woot-button>
-              <span
-                class="text-xs font-medium text-slate-500 ltr:ml-1 rtl:mr-1 dark:text-slate-400"
-              >
-                {{ $t('NEW_CONVERSATION.FORM.ATTACHMENTS.HELP_TEXT') }}
-              </span>
-            </file-upload>
-            <div
-              v-if="hasAttachments"
-              class="max-h-20 overflow-y-auto mb-4 mt-1.5"
-            >
-              <attachment-preview
-                class="[&>.preview-item]:dark:bg-slate-700 flex-row flex-wrap gap-x-3 gap-y-1"
-                :attachments="attachedFiles"
-                :remove-attachment="removeAttachment"
-              />
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-
-    <div
-      v-if="!hasWhatsappTemplates"
-      class="flex flex-row justify-end w-full gap-2 px-0 py-2"
-    >
-      <button class="button clear" @click.prevent="onCancel">
-        {{ $t('NEW_CONVERSATION.FORM.CANCEL') }}
-      </button>
-      <woot-button type="submit" :is-loading="conversationsUiFlags.isCreating">
-        {{ $t('NEW_CONVERSATION.FORM.SUBMIT') }}
-      </woot-button>
-    </div>
-
-    <transition v-if="isEmailOrWebWidgetInbox" name="modal-fade">
-      <div
-        v-show="$refs.uploadAttachment && $refs.uploadAttachment.dropActive"
-        class="absolute top-0 bottom-0 left-0 right-0 z-30 flex flex-col items-center justify-center w-full h-full gap-2 bg-white/80 dark:bg-slate-700/80"
-      >
-        <fluent-icon icon="cloud-backup" size="40" />
-        <h4 class="text-2xl break-words text-slate-600 dark:text-slate-200">
-          {{ $t('CONVERSATION.REPLYBOX.DRAG_DROP') }}
-        </h4>
-      </div>
-    </transition>
-  </form>
-</template>
-
 <script>
 import { mapGetters } from 'vuex';
 import { useAlert } from 'dashboard/composables';
@@ -561,6 +322,245 @@ export default {
 };
 </script>
 
+<template>
+  <form class="w-full conversation--form" @submit.prevent="onFormSubmit">
+    <div
+      v-if="showNoInboxAlert"
+      class="relative mx-0 mt-0 mb-2.5 p-2 rounded-none text-sm border border-solid border-yellow-500 dark:border-yellow-700 bg-yellow-200/60 dark:bg-yellow-200/20 text-slate-700 dark:text-yellow-400"
+    >
+      <p class="mb-0">
+        {{ $t('NEW_CONVERSATION.NO_INBOX') }}
+      </p>
+    </div>
+    <div v-else>
+      <div class="flex flex-row gap-2">
+        <div class="w-[50%]">
+          <label>
+            {{ $t('NEW_CONVERSATION.FORM.INBOX.LABEL') }}
+          </label>
+          <div
+            class="multiselect-wrap--small"
+            :class="{ 'has-multi-select-error': v$.targetInbox.$error }"
+          >
+            <multiselect
+              v-model="targetInbox"
+              track-by="id"
+              label="name"
+              :placeholder="$t('FORMS.MULTISELECT.SELECT')"
+              selected-label=""
+              select-label=""
+              deselect-label=""
+              :max-height="160"
+              :close-on-select="true"
+              :options="[...inboxes]"
+            >
+              <template slot="singleLabel" slot-scope="{ option }">
+                <inbox-dropdown-item
+                  v-if="option.name"
+                  :name="option.name"
+                  :inbox-identifier="computedInboxSource(option)"
+                  :channel-type="option.channel_type"
+                />
+                <span v-else>
+                  {{ $t('NEW_CONVERSATION.FORM.INBOX.PLACEHOLDER') }}
+                </span>
+              </template>
+              <template slot="option" slot-scope="{ option }">
+                <inbox-dropdown-item
+                  :name="option.name"
+                  :inbox-identifier="computedInboxSource(option)"
+                  :channel-type="option.channel_type"
+                />
+              </template>
+            </multiselect>
+          </div>
+          <label :class="{ error: v$.targetInbox.$error }">
+            <span v-if="v$.targetInbox.$error" class="message">
+              {{ $t('NEW_CONVERSATION.FORM.INBOX.ERROR') }}
+            </span>
+          </label>
+        </div>
+        <div class="w-[50%]">
+          <label>
+            {{ $t('NEW_CONVERSATION.FORM.TO.LABEL') }}
+            <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
+                :src="contact.thumbnail"
+                size="24px"
+                :username="contact.name"
+                :status="contact.availability_status"
+              />
+              <h4
+                class="m-0 ml-2 mr-2 text-sm text-slate-700 dark:text-slate-100"
+              >
+                {{ contact.name }}
+              </h4>
+            </div>
+          </label>
+        </div>
+      </div>
+      <div v-if="isAnEmailInbox" class="w-full">
+        <div class="w-full">
+          <label :class="{ error: v$.subject.$error }">
+            {{ $t('NEW_CONVERSATION.FORM.SUBJECT.LABEL') }}
+            <input
+              v-model="subject"
+              type="text"
+              :placeholder="$t('NEW_CONVERSATION.FORM.SUBJECT.PLACEHOLDER')"
+              @input="v$.subject.$touch"
+            />
+            <span v-if="v$.subject.$error" class="message">
+              {{ $t('NEW_CONVERSATION.FORM.SUBJECT.ERROR') }}
+            </span>
+          </label>
+        </div>
+      </div>
+      <div class="w-full">
+        <div class="w-full">
+          <div class="relative">
+            <canned-response
+              v-if="showCannedResponseMenu && hasSlashCommand"
+              :search-key="cannedResponseSearchKey"
+              @click="replaceTextWithCannedResponse"
+            />
+          </div>
+          <div v-if="isEmailOrWebWidgetInbox">
+            <label>
+              {{ $t('NEW_CONVERSATION.FORM.MESSAGE.LABEL') }}
+            </label>
+            <reply-email-head
+              v-if="isAnEmailInbox"
+              :cc-emails.sync="ccEmails"
+              :bcc-emails.sync="bccEmails"
+            />
+            <div class="editor-wrap">
+              <woot-message-editor
+                v-model="message"
+                class="message-editor"
+                :class="{ editor_warning: v$.message.$error }"
+                :enable-variables="true"
+                :signature="signatureToApply"
+                :allow-signature="true"
+                :placeholder="$t('NEW_CONVERSATION.FORM.MESSAGE.PLACEHOLDER')"
+                @toggle-canned-menu="toggleCannedMenu"
+                @blur="v$.message.$touch"
+              >
+                <template #footer>
+                  <message-signature-missing-alert
+                    v-if="isSignatureEnabledForInbox && !messageSignature"
+                    class="!mx-0 mb-1"
+                  />
+                  <div v-if="isAnEmailInbox" class="mt-px mb-3">
+                    <woot-button
+                      v-tooltip.top-end="signatureToggleTooltip"
+                      icon="signature"
+                      color-scheme="secondary"
+                      variant="smooth"
+                      size="small"
+                      :title="signatureToggleTooltip"
+                      @click.prevent="toggleMessageSignature"
+                    />
+                  </div>
+                </template>
+              </woot-message-editor>
+              <span v-if="v$.message.$error" class="editor-warning__message">
+                {{ $t('NEW_CONVERSATION.FORM.MESSAGE.ERROR') }}
+              </span>
+            </div>
+          </div>
+          <whatsapp-templates
+            v-else-if="hasWhatsappTemplates"
+            :inbox-id="selectedInbox.inbox.id"
+            @on-select-template="toggleWaTemplate"
+            @on-send="onSendWhatsAppReply"
+          />
+          <label v-else :class="{ error: v$.message.$error }">
+            {{ $t('NEW_CONVERSATION.FORM.MESSAGE.LABEL') }}
+            <textarea
+              v-model="message"
+              class="min-h-[5rem]"
+              type="text"
+              :placeholder="$t('NEW_CONVERSATION.FORM.MESSAGE.PLACEHOLDER')"
+              @input="v$.message.$touch"
+            />
+            <span v-if="v$.message.$error" class="message">
+              {{ $t('NEW_CONVERSATION.FORM.MESSAGE.ERROR') }}
+            </span>
+          </label>
+          <div v-if="isEmailOrWebWidgetInbox" class="flex flex-col">
+            <file-upload
+              ref="uploadAttachment"
+              input-id="newConversationAttachment"
+              :size="4096 * 4096"
+              :accept="allowedFileTypes"
+              :multiple="true"
+              :drop="true"
+              :drop-directory="false"
+              :data="{
+                direct_upload_url: '/rails/active_storage/direct_uploads',
+                direct_upload: true,
+              }"
+              @input-file="onFileUpload"
+            >
+              <woot-button
+                class-names="button--upload"
+                icon="attach"
+                emoji="📎"
+                color-scheme="secondary"
+                variant="smooth"
+                size="small"
+              >
+                {{ $t('NEW_CONVERSATION.FORM.ATTACHMENTS.SELECT') }}
+              </woot-button>
+              <span
+                class="text-xs font-medium text-slate-500 ltr:ml-1 rtl:mr-1 dark:text-slate-400"
+              >
+                {{ $t('NEW_CONVERSATION.FORM.ATTACHMENTS.HELP_TEXT') }}
+              </span>
+            </file-upload>
+            <div
+              v-if="hasAttachments"
+              class="max-h-20 overflow-y-auto mb-4 mt-1.5"
+            >
+              <attachment-preview
+                class="[&>.preview-item]:dark:bg-slate-700 flex-row flex-wrap gap-x-3 gap-y-1"
+                :attachments="attachedFiles"
+                :remove-attachment="removeAttachment"
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div
+      v-if="!hasWhatsappTemplates"
+      class="flex flex-row justify-end w-full gap-2 px-0 py-2"
+    >
+      <button class="button clear" @click.prevent="onCancel">
+        {{ $t('NEW_CONVERSATION.FORM.CANCEL') }}
+      </button>
+      <woot-button type="submit" :is-loading="conversationsUiFlags.isCreating">
+        {{ $t('NEW_CONVERSATION.FORM.SUBMIT') }}
+      </woot-button>
+    </div>
+
+    <transition v-if="isEmailOrWebWidgetInbox" name="modal-fade">
+      <div
+        v-show="$refs.uploadAttachment && $refs.uploadAttachment.dropActive"
+        class="absolute top-0 bottom-0 left-0 right-0 z-30 flex flex-col items-center justify-center w-full h-full gap-2 bg-white/80 dark:bg-slate-700/80"
+      >
+        <fluent-icon icon="cloud-backup" size="40" />
+        <h4 class="text-2xl break-words text-slate-600 dark:text-slate-200">
+          {{ $t('CONVERSATION.REPLYBOX.DRAG_DROP') }}
+        </h4>
+      </div>
+    </transition>
+  </form>
+</template>
+
 <style scoped lang="scss">
 .conversation--form {
   @apply pt-4 px-8 pb-8;
diff --git a/app/javascript/dashboard/routes/dashboard/conversation/contact/CreateContact.vue b/app/javascript/dashboard/routes/dashboard/conversation/contact/CreateContact.vue
index c33b9031d..c3b1c58a0 100644
--- a/app/javascript/dashboard/routes/dashboard/conversation/contact/CreateContact.vue
+++ b/app/javascript/dashboard/routes/dashboard/conversation/contact/CreateContact.vue
@@ -1,21 +1,3 @@
-<!-- eslint-disable vue/no-mutating-props -->
-<template>
-  <woot-modal :show.sync="show" :on-close="onCancel" modal-type="right-aligned">
-    <div class="h-auto overflow-auto flex flex-col">
-      <woot-modal-header
-        :header-title="$t('CREATE_CONTACT.TITLE')"
-        :header-content="$t('CREATE_CONTACT.DESC')"
-      />
-      <contact-form
-        :in-progress="uiFlags.isCreating"
-        :on-submit="onSubmit"
-        @success="onSuccess"
-        @cancel="onCancel"
-      />
-    </div>
-  </woot-modal>
-</template>
-
 <script>
 import { mapGetters } from 'vuex';
 import ContactForm from './ContactForm.vue';
@@ -54,3 +36,21 @@ export default {
   },
 };
 </script>
+
+<!-- eslint-disable vue/no-mutating-props -->
+<template>
+  <woot-modal :show.sync="show" :on-close="onCancel" modal-type="right-aligned">
+    <div class="flex flex-col h-auto overflow-auto">
+      <woot-modal-header
+        :header-title="$t('CREATE_CONTACT.TITLE')"
+        :header-content="$t('CREATE_CONTACT.DESC')"
+      />
+      <contact-form
+        :in-progress="uiFlags.isCreating"
+        :on-submit="onSubmit"
+        @success="onSuccess"
+        @cancel="onCancel"
+      />
+    </div>
+  </woot-modal>
+</template>
diff --git a/app/javascript/dashboard/routes/dashboard/conversation/contact/EditContact.vue b/app/javascript/dashboard/routes/dashboard/conversation/contact/EditContact.vue
index 8099da416..a2298ae5f 100644
--- a/app/javascript/dashboard/routes/dashboard/conversation/contact/EditContact.vue
+++ b/app/javascript/dashboard/routes/dashboard/conversation/contact/EditContact.vue
@@ -1,24 +1,3 @@
-<!-- eslint-disable vue/no-mutating-props -->
-<template>
-  <woot-modal :show.sync="show" :on-close="onCancel" modal-type="right-aligned">
-    <div class="h-auto overflow-auto flex flex-col">
-      <woot-modal-header
-        :header-title="`${$t('EDIT_CONTACT.TITLE')} - ${
-          contact.name || contact.email
-        }`"
-        :header-content="$t('EDIT_CONTACT.DESC')"
-      />
-      <contact-form
-        :contact="contact"
-        :in-progress="uiFlags.isUpdating"
-        :on-submit="onSubmit"
-        @success="onSuccess"
-        @cancel="onCancel"
-      />
-    </div>
-  </woot-modal>
-</template>
-
 <script>
 import { mapGetters } from 'vuex';
 import ContactForm from './ContactForm.vue';
@@ -61,3 +40,24 @@ export default {
   },
 };
 </script>
+
+<!-- eslint-disable vue/no-mutating-props -->
+<template>
+  <woot-modal :show.sync="show" :on-close="onCancel" modal-type="right-aligned">
+    <div class="flex flex-col h-auto overflow-auto">
+      <woot-modal-header
+        :header-title="`${$t('EDIT_CONTACT.TITLE')} - ${
+          contact.name || contact.email
+        }`"
+        :header-content="$t('EDIT_CONTACT.DESC')"
+      />
+      <contact-form
+        :contact="contact"
+        :in-progress="uiFlags.isUpdating"
+        :on-submit="onSubmit"
+        @success="onSuccess"
+        @cancel="onCancel"
+      />
+    </div>
+  </woot-modal>
+</template>
diff --git a/app/javascript/dashboard/routes/dashboard/conversation/contact/NewConversation.vue b/app/javascript/dashboard/routes/dashboard/conversation/contact/NewConversation.vue
index b7527c096..d6a73a2f8 100644
--- a/app/javascript/dashboard/routes/dashboard/conversation/contact/NewConversation.vue
+++ b/app/javascript/dashboard/routes/dashboard/conversation/contact/NewConversation.vue
@@ -1,21 +1,3 @@
-<!-- eslint-disable vue/no-mutating-props -->
-<template>
-  <woot-modal :show.sync="show" :on-close="onCancel">
-    <div class="h-auto overflow-auto flex flex-col">
-      <woot-modal-header
-        :header-title="$t('NEW_CONVERSATION.TITLE')"
-        :header-content="$t('NEW_CONVERSATION.DESC')"
-      />
-      <conversation-form
-        :contact="contact"
-        :on-submit="onSubmit"
-        @success="onSuccess"
-        @cancel="onCancel"
-      />
-    </div>
-  </woot-modal>
-</template>
-
 <script>
 import ConversationForm from './ConversationForm.vue';
 
@@ -59,3 +41,21 @@ export default {
   },
 };
 </script>
+
+<!-- eslint-disable vue/no-mutating-props -->
+<template>
+  <woot-modal :show.sync="show" :on-close="onCancel">
+    <div class="flex flex-col h-auto overflow-auto">
+      <woot-modal-header
+        :header-title="$t('NEW_CONVERSATION.TITLE')"
+        :header-content="$t('NEW_CONVERSATION.DESC')"
+      />
+      <conversation-form
+        :contact="contact"
+        :on-submit="onSubmit"
+        @success="onSuccess"
+        @cancel="onCancel"
+      />
+    </div>
+  </woot-modal>
+</template>
diff --git a/app/javascript/dashboard/routes/dashboard/conversation/contact/SocialIcons.vue b/app/javascript/dashboard/routes/dashboard/conversation/contact/SocialIcons.vue
index a4152051d..564e8415d 100644
--- a/app/javascript/dashboard/routes/dashboard/conversation/contact/SocialIcons.vue
+++ b/app/javascript/dashboard/routes/dashboard/conversation/contact/SocialIcons.vue
@@ -1,21 +1,3 @@
-<template>
-  <div v-if="availableProfiles.length" class="flex items-end mx-0 my-2 gap-3">
-    <a
-      v-for="profile in availableProfiles"
-      :key="profile.key"
-      :href="`${profile.link}${socialProfiles[profile.key]}`"
-      target="_blank"
-      rel="noopener noreferrer nofollow"
-    >
-      <fluent-icon
-        :icon="`brand-${profile.key}`"
-        size="16"
-        class="text-slate-500 dark:text-slate-400 hover:text-slate-700 dark:hover:text-slate-200"
-      />
-    </a>
-  </div>
-</template>
-
 <script>
 export default {
   props: {
@@ -44,3 +26,21 @@ export default {
   },
 };
 </script>
+
+<template>
+  <div v-if="availableProfiles.length" class="flex items-end mx-0 my-2 gap-3">
+    <a
+      v-for="profile in availableProfiles"
+      :key="profile.key"
+      :href="`${profile.link}${socialProfiles[profile.key]}`"
+      target="_blank"
+      rel="noopener noreferrer nofollow"
+    >
+      <fluent-icon
+        :icon="`brand-${profile.key}`"
+        size="16"
+        class="text-slate-500 dark:text-slate-400 hover:text-slate-700 dark:hover:text-slate-200"
+      />
+    </a>
+  </div>
+</template>
diff --git a/app/javascript/dashboard/routes/dashboard/conversation/contact/WhatsappTemplates.vue b/app/javascript/dashboard/routes/dashboard/conversation/contact/WhatsappTemplates.vue
index dae4f926b..b9df9ec69 100644
--- a/app/javascript/dashboard/routes/dashboard/conversation/contact/WhatsappTemplates.vue
+++ b/app/javascript/dashboard/routes/dashboard/conversation/contact/WhatsappTemplates.vue
@@ -1,19 +1,3 @@
-<template>
-  <div class="mx-0 flex flex-wrap">
-    <templates-picker
-      v-if="!selectedWaTemplate"
-      :inbox-id="inboxId"
-      @onSelect="pickTemplate"
-    />
-    <template-parser
-      v-else
-      :template="selectedWaTemplate"
-      @resetTemplate="onResetTemplate"
-      @sendMessage="onSendMessage"
-    />
-  </div>
-</template>
-
 <script>
 import TemplatesPicker from 'dashboard/components/widgets/conversation/WhatsappTemplates/TemplatesPicker.vue';
 import TemplateParser from 'dashboard/components/widgets/conversation/WhatsappTemplates/TemplateParser.vue';
@@ -56,4 +40,20 @@ export default {
 };
 </script>
 
+<template>
+  <div class="mx-0 flex flex-wrap">
+    <templates-picker
+      v-if="!selectedWaTemplate"
+      :inbox-id="inboxId"
+      @onSelect="pickTemplate"
+    />
+    <template-parser
+      v-else
+      :template="selectedWaTemplate"
+      @resetTemplate="onResetTemplate"
+      @sendMessage="onSendMessage"
+    />
+  </div>
+</template>
+
 <style></style>
diff --git a/app/javascript/dashboard/routes/dashboard/conversation/customAttributes/CustomAttributes.vue b/app/javascript/dashboard/routes/dashboard/conversation/customAttributes/CustomAttributes.vue
index ae2e6c424..94c4d9f40 100644
--- a/app/javascript/dashboard/routes/dashboard/conversation/customAttributes/CustomAttributes.vue
+++ b/app/javascript/dashboard/routes/dashboard/conversation/customAttributes/CustomAttributes.vue
@@ -1,45 +1,3 @@
-<template>
-  <div class="custom-attributes--panel">
-    <custom-attribute
-      v-for="attribute in displayedAttributes"
-      :key="attribute.id"
-      :attribute-key="attribute.attribute_key"
-      :attribute-type="attribute.attribute_display_type"
-      :values="attribute.attribute_values"
-      :label="attribute.attribute_display_name"
-      :description="attribute.attribute_description"
-      :value="attribute.value"
-      :show-actions="true"
-      :attribute-regex="attribute.regex_pattern"
-      :regex-cue="attribute.regex_cue"
-      :class="attributeClass"
-      :contact-id="contactId"
-      @update="onUpdate"
-      @delete="onDelete"
-      @copy="onCopy"
-    />
-    <p
-      v-if="!displayedAttributes.length && emptyStateMessage"
-      class="p-3 text-center"
-    >
-      {{ emptyStateMessage }}
-    </p>
-    <!-- Show more and show less buttons show it if the filteredAttributes length is greater than 5 -->
-    <div v-if="filteredAttributes.length > 5" class="flex px-2 py-2">
-      <woot-button
-        size="small"
-        :icon="showAllAttributes ? 'chevron-up' : 'chevron-down'"
-        variant="clear"
-        color-scheme="primary"
-        class="!px-2 hover:!bg-transparent dark:hover:!bg-transparent"
-        @click="onClickToggle"
-      >
-        {{ toggleButtonText }}
-      </woot-button>
-    </div>
-  </div>
-</template>
-
 <script>
 import { useAlert } from 'dashboard/composables';
 import { useUISettings } from 'dashboard/composables/useUISettings';
@@ -188,6 +146,48 @@ export default {
 };
 </script>
 
+<template>
+  <div class="custom-attributes--panel">
+    <custom-attribute
+      v-for="attribute in displayedAttributes"
+      :key="attribute.id"
+      :attribute-key="attribute.attribute_key"
+      :attribute-type="attribute.attribute_display_type"
+      :values="attribute.attribute_values"
+      :label="attribute.attribute_display_name"
+      :description="attribute.attribute_description"
+      :value="attribute.value"
+      :show-actions="true"
+      :attribute-regex="attribute.regex_pattern"
+      :regex-cue="attribute.regex_cue"
+      :class="attributeClass"
+      :contact-id="contactId"
+      @update="onUpdate"
+      @delete="onDelete"
+      @copy="onCopy"
+    />
+    <p
+      v-if="!displayedAttributes.length && emptyStateMessage"
+      class="p-3 text-center"
+    >
+      {{ emptyStateMessage }}
+    </p>
+    <!-- Show more and show less buttons show it if the filteredAttributes length is greater than 5 -->
+    <div v-if="filteredAttributes.length > 5" class="flex px-2 py-2">
+      <woot-button
+        size="small"
+        :icon="showAllAttributes ? 'chevron-up' : 'chevron-down'"
+        variant="clear"
+        color-scheme="primary"
+        class="!px-2 hover:!bg-transparent dark:hover:!bg-transparent"
+        @click="onClickToggle"
+      >
+        {{ toggleButtonText }}
+      </woot-button>
+    </div>
+  </div>
+</template>
+
 <style scoped lang="scss">
 .custom-attributes--panel {
   .conversation--attribute {
diff --git a/app/javascript/dashboard/routes/dashboard/conversation/labels/LabelBox.vue b/app/javascript/dashboard/routes/dashboard/conversation/labels/LabelBox.vue
index 6b4fa0466..46693f85d 100644
--- a/app/javascript/dashboard/routes/dashboard/conversation/labels/LabelBox.vue
+++ b/app/javascript/dashboard/routes/dashboard/conversation/labels/LabelBox.vue
@@ -1,48 +1,3 @@
-<template>
-  <div class="sidebar-labels-wrap">
-    <div
-      v-if="!conversationUiFlags.isFetching"
-      class="contact-conversation--list"
-    >
-      <div
-        v-on-clickaway="closeDropdownLabel"
-        class="label-wrap"
-        @keyup.esc="closeDropdownLabel"
-      >
-        <add-label @add="toggleLabels" />
-        <woot-label
-          v-for="label in activeLabels"
-          :key="label.id"
-          :title="label.title"
-          :description="label.description"
-          :show-close="true"
-          :color="label.color"
-          variant="smooth"
-          class="max-w-[calc(100%-0.5rem)]"
-          @click="removeLabelFromConversation"
-        />
-
-        <div class="dropdown-wrap">
-          <div
-            :class="{ 'dropdown-pane--open': showSearchDropdownLabel }"
-            class="dropdown-pane"
-          >
-            <label-dropdown
-              v-if="showSearchDropdownLabel"
-              :account-labels="accountLabels"
-              :selected-labels="savedLabels"
-              :allow-creation="isAdmin"
-              @add="addLabelToConversation"
-              @remove="removeLabelFromConversation"
-            />
-          </div>
-        </div>
-      </div>
-    </div>
-    <spinner v-else />
-  </div>
-</template>
-
 <script>
 import { mapGetters } from 'vuex';
 import { useAdmin } from 'dashboard/composables/useAdmin';
@@ -114,6 +69,51 @@ export default {
 };
 </script>
 
+<template>
+  <div class="sidebar-labels-wrap">
+    <div
+      v-if="!conversationUiFlags.isFetching"
+      class="contact-conversation--list"
+    >
+      <div
+        v-on-clickaway="closeDropdownLabel"
+        class="label-wrap"
+        @keyup.esc="closeDropdownLabel"
+      >
+        <add-label @add="toggleLabels" />
+        <woot-label
+          v-for="label in activeLabels"
+          :key="label.id"
+          :title="label.title"
+          :description="label.description"
+          :show-close="true"
+          :color="label.color"
+          variant="smooth"
+          class="max-w-[calc(100%-0.5rem)]"
+          @click="removeLabelFromConversation"
+        />
+
+        <div class="dropdown-wrap">
+          <div
+            :class="{ 'dropdown-pane--open': showSearchDropdownLabel }"
+            class="dropdown-pane"
+          >
+            <label-dropdown
+              v-if="showSearchDropdownLabel"
+              :account-labels="accountLabels"
+              :selected-labels="savedLabels"
+              :allow-creation="isAdmin"
+              @add="addLabelToConversation"
+              @remove="removeLabelFromConversation"
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+    <spinner v-else />
+  </div>
+</template>
+
 <style lang="scss" scoped>
 .sidebar-labels-wrap {
   margin-bottom: 0;
diff --git a/app/javascript/dashboard/routes/dashboard/conversation/search/PopOverSearch.vue b/app/javascript/dashboard/routes/dashboard/conversation/search/PopOverSearch.vue
index 9ac7186b4..91c5e76e4 100644
--- a/app/javascript/dashboard/routes/dashboard/conversation/search/PopOverSearch.vue
+++ b/app/javascript/dashboard/routes/dashboard/conversation/search/PopOverSearch.vue
@@ -1,37 +1,3 @@
-<template>
-  <div class="relative">
-    <div
-      class="flex px-4 pb-1 flex-row gap-1 pt-2.5 border-b border-transparent"
-    >
-      <woot-sidemenu-icon
-        size="tiny"
-        class="relative top-0 ltr:-ml-1.5 rtl:-mr-1.5"
-      />
-      <router-link
-        :to="searchUrl"
-        class="inline-flex items-center flex-1 h-6 gap-1 px-2 py-0 text-left rounded-md search-link rtl:mr-3 rtl:text-right bg-slate-25 dark:bg-slate-800"
-      >
-        <div class="flex">
-          <fluent-icon
-            icon="search"
-            class="search--icon text-slate-800 dark:text-slate-200"
-            size="16"
-          />
-        </div>
-        <p
-          class="mb-0 overflow-hidden text-sm search--label whitespace-nowrap text-ellipsis text-slate-800 dark:text-slate-200"
-        >
-          {{ $t('CONVERSATION.SEARCH_MESSAGES') }}
-        </p>
-      </router-link>
-      <switch-layout
-        :is-on-expanded-layout="isOnExpandedLayout"
-        @toggle="$emit('toggle-conversation-layout')"
-      />
-    </div>
-  </div>
-</template>
-
 <script>
 import { mapGetters } from 'vuex';
 import messageFormatterMixin from 'shared/mixins/messageFormatterMixin';
@@ -65,6 +31,40 @@ export default {
   },
 };
 </script>
+
+<template>
+  <div class="relative">
+    <div
+      class="flex px-4 pb-1 flex-row gap-1 pt-2.5 border-b border-transparent"
+    >
+      <woot-sidemenu-icon
+        size="tiny"
+        class="relative top-0 ltr:-ml-1.5 rtl:-mr-1.5"
+      />
+      <router-link
+        :to="searchUrl"
+        class="inline-flex items-center flex-1 h-6 gap-1 px-2 py-0 text-left rounded-md search-link rtl:mr-3 rtl:text-right bg-slate-25 dark:bg-slate-800"
+      >
+        <div class="flex">
+          <fluent-icon
+            icon="search"
+            class="search--icon text-slate-800 dark:text-slate-200"
+            size="16"
+          />
+        </div>
+        <p
+          class="mb-0 overflow-hidden text-sm search--label whitespace-nowrap text-ellipsis text-slate-800 dark:text-slate-200"
+        >
+          {{ $t('CONVERSATION.SEARCH_MESSAGES') }}
+        </p>
+      </router-link>
+      <switch-layout
+        :is-on-expanded-layout="isOnExpandedLayout"
+        @toggle="$emit('toggle-conversation-layout')"
+      />
+    </div>
+  </div>
+</template>
 <style lang="scss" scoped>
 .search-link {
   &:hover {
diff --git a/app/javascript/dashboard/routes/dashboard/conversation/search/SwitchLayout.vue b/app/javascript/dashboard/routes/dashboard/conversation/search/SwitchLayout.vue
index 1988e9974..0a4fe57e6 100644
--- a/app/javascript/dashboard/routes/dashboard/conversation/search/SwitchLayout.vue
+++ b/app/javascript/dashboard/routes/dashboard/conversation/search/SwitchLayout.vue
@@ -1,16 +1,3 @@
-<template>
-  <woot-button
-    v-tooltip.left="$t('CONVERSATION.SWITCH_VIEW_LAYOUT')"
-    icon="arrow-right-import"
-    size="tiny"
-    variant="smooth"
-    color-scheme="secondary"
-    class="layout-switch__container"
-    :class="{ expanded: isOnExpandedLayout }"
-    @click="toggle"
-  />
-</template>
-
 <script>
 export default {
   props: {
@@ -27,6 +14,19 @@ export default {
 };
 </script>
 
+<template>
+  <woot-button
+    v-tooltip.left="$t('CONVERSATION.SWITCH_VIEW_LAYOUT')"
+    icon="arrow-right-import"
+    size="tiny"
+    variant="smooth"
+    color-scheme="secondary"
+    class="layout-switch__container"
+    :class="{ expanded: isOnExpandedLayout }"
+    @click="toggle"
+  />
+</template>
+
 <style lang="scss" soped>
 .layout-switch__container {
   &.expanded .icon {
diff --git a/app/javascript/dashboard/routes/dashboard/customviews/AddCustomViews.vue b/app/javascript/dashboard/routes/dashboard/customviews/AddCustomViews.vue
index 0726606dd..e9ada22ff 100644
--- a/app/javascript/dashboard/routes/dashboard/customviews/AddCustomViews.vue
+++ b/app/javascript/dashboard/routes/dashboard/customviews/AddCustomViews.vue
@@ -1,33 +1,3 @@
-<template>
-  <woot-modal :show.sync="show" :on-close="onClose">
-    <woot-modal-header :header-title="$t('FILTER.CUSTOM_VIEWS.ADD.TITLE')" />
-    <form class="w-full" @submit.prevent="saveCustomViews">
-      <div class="w-full">
-        <woot-input
-          v-model="name"
-          :label="$t('FILTER.CUSTOM_VIEWS.ADD.LABEL')"
-          type="text"
-          :error="
-            v$.name.$error ? $t('FILTER.CUSTOM_VIEWS.ADD.ERROR_MESSAGE') : ''
-          "
-          :class="{ error: v$.name.$error }"
-          :placeholder="$t('FILTER.CUSTOM_VIEWS.ADD.PLACEHOLDER')"
-          @blur="v$.name.$touch"
-        />
-
-        <div class="flex flex-row justify-end gap-2 py-2 px-0 w-full">
-          <woot-button :disabled="isButtonDisabled">
-            {{ $t('FILTER.CUSTOM_VIEWS.ADD.SAVE_BUTTON') }}
-          </woot-button>
-          <woot-button variant="clear" @click.prevent="onClose">
-            {{ $t('FILTER.CUSTOM_VIEWS.ADD.CANCEL_BUTTON') }}
-          </woot-button>
-        </div>
-      </div>
-    </form>
-  </woot-modal>
-</template>
-
 <script>
 import { useVuelidate } from '@vuelidate/core';
 import { required, minLength } from '@vuelidate/validators';
@@ -110,3 +80,33 @@ export default {
   },
 };
 </script>
+
+<template>
+  <woot-modal :show.sync="show" :on-close="onClose">
+    <woot-modal-header :header-title="$t('FILTER.CUSTOM_VIEWS.ADD.TITLE')" />
+    <form class="w-full" @submit.prevent="saveCustomViews">
+      <div class="w-full">
+        <woot-input
+          v-model="name"
+          :label="$t('FILTER.CUSTOM_VIEWS.ADD.LABEL')"
+          type="text"
+          :error="
+            v$.name.$error ? $t('FILTER.CUSTOM_VIEWS.ADD.ERROR_MESSAGE') : ''
+          "
+          :class="{ error: v$.name.$error }"
+          :placeholder="$t('FILTER.CUSTOM_VIEWS.ADD.PLACEHOLDER')"
+          @blur="v$.name.$touch"
+        />
+
+        <div class="flex flex-row justify-end gap-2 py-2 px-0 w-full">
+          <woot-button :disabled="isButtonDisabled">
+            {{ $t('FILTER.CUSTOM_VIEWS.ADD.SAVE_BUTTON') }}
+          </woot-button>
+          <woot-button variant="clear" @click.prevent="onClose">
+            {{ $t('FILTER.CUSTOM_VIEWS.ADD.CANCEL_BUTTON') }}
+          </woot-button>
+        </div>
+      </div>
+    </form>
+  </woot-modal>
+</template>
diff --git a/app/javascript/dashboard/routes/dashboard/customviews/DeleteCustomViews.vue b/app/javascript/dashboard/routes/dashboard/customviews/DeleteCustomViews.vue
index c32c449eb..843dea527 100644
--- a/app/javascript/dashboard/routes/dashboard/customviews/DeleteCustomViews.vue
+++ b/app/javascript/dashboard/routes/dashboard/customviews/DeleteCustomViews.vue
@@ -1,20 +1,3 @@
-<!-- eslint-disable vue/no-mutating-props -->
-<template>
-  <div>
-    <woot-delete-modal
-      v-if="showDeletePopup"
-      :show.sync="showDeletePopup"
-      :on-close="closeDeletePopup"
-      :on-confirm="deleteSavedCustomViews"
-      :title="$t('FILTER.CUSTOM_VIEWS.DELETE.MODAL.CONFIRM.TITLE')"
-      :message="$t('FILTER.CUSTOM_VIEWS.DELETE.MODAL.CONFIRM.MESSAGE')"
-      :message-value="deleteMessage"
-      :confirm-text="deleteConfirmText"
-      :reject-text="deleteRejectText"
-    />
-  </div>
-</template>
-
 <script>
 import { useAlert } from 'dashboard/composables';
 import { CONTACTS_EVENTS } from '../../../helper/AnalyticsHelper/events';
@@ -103,3 +86,20 @@ export default {
   },
 };
 </script>
+
+<!-- eslint-disable vue/no-mutating-props -->
+<template>
+  <div>
+    <woot-delete-modal
+      v-if="showDeletePopup"
+      :show.sync="showDeletePopup"
+      :on-close="closeDeletePopup"
+      :on-confirm="deleteSavedCustomViews"
+      :title="$t('FILTER.CUSTOM_VIEWS.DELETE.MODAL.CONFIRM.TITLE')"
+      :message="$t('FILTER.CUSTOM_VIEWS.DELETE.MODAL.CONFIRM.MESSAGE')"
+      :message-value="deleteMessage"
+      :confirm-text="deleteConfirmText"
+      :reject-text="deleteRejectText"
+    />
+  </div>
+</template>
diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/components/AddLocale.vue b/app/javascript/dashboard/routes/dashboard/helpcenter/components/AddLocale.vue
index cfa1b9b1b..737559487 100644
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/components/AddLocale.vue
+++ b/app/javascript/dashboard/routes/dashboard/helpcenter/components/AddLocale.vue
@@ -1,43 +1,3 @@
-<!-- eslint-disable vue/no-mutating-props -->
-<template>
-  <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')"
-    />
-    <form class="w-full" @submit.prevent="onCreate">
-      <div class="w-full">
-        <label :class="{ error: v$.selectedLocale.$error }">
-          {{ $t('HELP_CENTER.PORTAL.ADD_LOCALE.LOCALE.LABEL') }}
-          <select v-model="selectedLocale">
-            <option
-              v-for="locale in locales"
-              :key="locale.name"
-              :value="locale.id"
-            >
-              {{ locale.name }}-{{ locale.code }}
-            </option>
-          </select>
-          <span v-if="v$.selectedLocale.$error" class="message">
-            {{ $t('HELP_CENTER.PORTAL.ADD_LOCALE.LOCALE.ERROR') }}
-          </span>
-        </label>
-
-        <div class="w-full">
-          <div class="flex flex-row justify-end w-full gap-2 px-0 py-2">
-            <woot-button class="button clear" @click.prevent="onClose">
-              {{ $t('HELP_CENTER.PORTAL.ADD_LOCALE.BUTTONS.CANCEL') }}
-            </woot-button>
-            <woot-button>
-              {{ $t('HELP_CENTER.PORTAL.ADD_LOCALE.BUTTONS.CREATE') }}
-            </woot-button>
-          </div>
-        </div>
-      </div>
-    </form>
-  </modal>
-</template>
-
 <script>
 import Modal from 'dashboard/components/Modal.vue';
 import { useVuelidate } from '@vuelidate/core';
@@ -134,6 +94,46 @@ export default {
   },
 };
 </script>
+
+<!-- eslint-disable vue/no-mutating-props -->
+<template>
+  <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')"
+    />
+    <form class="w-full" @submit.prevent="onCreate">
+      <div class="w-full">
+        <label :class="{ error: v$.selectedLocale.$error }">
+          {{ $t('HELP_CENTER.PORTAL.ADD_LOCALE.LOCALE.LABEL') }}
+          <select v-model="selectedLocale">
+            <option
+              v-for="locale in locales"
+              :key="locale.name"
+              :value="locale.id"
+            >
+              {{ locale.name }}-{{ locale.code }}
+            </option>
+          </select>
+          <span v-if="v$.selectedLocale.$error" class="message">
+            {{ $t('HELP_CENTER.PORTAL.ADD_LOCALE.LOCALE.ERROR') }}
+          </span>
+        </label>
+
+        <div class="w-full">
+          <div class="flex flex-row justify-end w-full gap-2 px-0 py-2">
+            <woot-button class="button clear" @click.prevent="onClose">
+              {{ $t('HELP_CENTER.PORTAL.ADD_LOCALE.BUTTONS.CANCEL') }}
+            </woot-button>
+            <woot-button>
+              {{ $t('HELP_CENTER.PORTAL.ADD_LOCALE.BUTTONS.CREATE') }}
+            </woot-button>
+          </div>
+        </div>
+      </div>
+    </form>
+  </modal>
+</template>
 <style scoped lang="scss">
 .input-container::v-deep {
   margin: 0 0 var(--space-normal);
diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/components/ArticleEditor.vue b/app/javascript/dashboard/routes/dashboard/helpcenter/components/ArticleEditor.vue
index a1d8f2dd3..5302ea17f 100644
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/components/ArticleEditor.vue
+++ b/app/javascript/dashboard/routes/dashboard/helpcenter/components/ArticleEditor.vue
@@ -1,27 +1,3 @@
-<template>
-  <div class="edit-article--container">
-    <resizable-text-area
-      v-model="articleTitle"
-      type="text"
-      :rows="1"
-      class="article-heading"
-      :placeholder="$t('HELP_CENTER.EDIT_ARTICLE.TITLE_PLACEHOLDER')"
-      @focus="onFocus"
-      @blur="onBlur"
-      @input="onTitleInput"
-    />
-    <woot-article-editor
-      v-model="articleContent"
-      class="article-content"
-      :placeholder="$t('HELP_CENTER.EDIT_ARTICLE.CONTENT_PLACEHOLDER')"
-      :enabled-menu-options="customEditorMenuOptions"
-      @focus="onFocus"
-      @blur="onBlur"
-      @input="onContentInput"
-    />
-  </div>
-</template>
-
 <script>
 import { debounce } from '@chatwoot/utils';
 import ResizableTextArea from 'shared/components/ResizableTextArea.vue';
@@ -79,6 +55,30 @@ export default {
 };
 </script>
 
+<template>
+  <div class="edit-article--container">
+    <resizable-text-area
+      v-model="articleTitle"
+      type="text"
+      :rows="1"
+      class="article-heading"
+      :placeholder="$t('HELP_CENTER.EDIT_ARTICLE.TITLE_PLACEHOLDER')"
+      @focus="onFocus"
+      @blur="onBlur"
+      @input="onTitleInput"
+    />
+    <woot-article-editor
+      v-model="articleContent"
+      class="article-content"
+      :placeholder="$t('HELP_CENTER.EDIT_ARTICLE.CONTENT_PLACEHOLDER')"
+      :enabled-menu-options="customEditorMenuOptions"
+      @focus="onFocus"
+      @blur="onBlur"
+      @input="onContentInput"
+    />
+  </div>
+</template>
+
 <style lang="scss" scoped>
 .edit-article--container {
   @apply my-8 mx-auto py-0 max-w-[56rem] w-full;
diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/components/ArticleItem.vue b/app/javascript/dashboard/routes/dashboard/helpcenter/components/ArticleItem.vue
index 9fbb9729d..75ea71164 100644
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/components/ArticleItem.vue
+++ b/app/javascript/dashboard/routes/dashboard/helpcenter/components/ArticleItem.vue
@@ -1,86 +1,3 @@
-<template>
-  <div
-    class="grid grid-cols-1 gap-4 px-6 py-3 my-0 -mx-4 bg-white border-b text-slate-700 dark:text-slate-100 last:border-b-0 dark:bg-slate-900 lg:grid-cols-12 border-slate-50 dark:border-slate-800"
-  >
-    <span class="flex items-start col-span-6 gap-2 text-left">
-      <fluent-icon
-        v-if="showDragIcon"
-        size="20"
-        class="flex-shrink-0 block w-4 h-4 mt-1 cursor-move text-slate-200 dark:text-slate-700 hover:text-slate-400 hover:dark:text-slate-200"
-        icon="grab-handle"
-      />
-      <div class="flex flex-col truncate">
-        <router-link :to="articleUrl(id)">
-          <h6
-            :title="title"
-            class="text-base ltr:text-left rtl:text-right text-slate-800 dark:text-slate-100 mb-0.5 leading-6 font-medium hover:underline overflow-hidden whitespace-nowrap text-ellipsis"
-          >
-            {{ title }}
-          </h6>
-        </router-link>
-        <div class="flex items-center gap-1">
-          <Thumbnail
-            v-if="author"
-            :src="author.thumbnail"
-            :username="author.name"
-            size="14px"
-          />
-          <div
-            v-else
-            v-tooltip.right="
-              $t('HELP_CENTER.TABLE.COLUMNS.AUTHOR_NOT_AVAILABLE')
-            "
-            class="flex items-center justify-center rounded w-3.5 h-3.5 bg-woot-100 dark:bg-woot-700"
-          >
-            <fluent-icon
-              icon="person"
-              type="filled"
-              size="10"
-              class="text-woot-300 dark:text-woot-300"
-            />
-          </div>
-          <span class="text-sm font-normal text-slate-700 dark:text-slate-200">
-            {{ articleAuthorName }}
-          </span>
-        </div>
-      </div>
-    </span>
-    <span class="flex items-center col-span-2">
-      <router-link
-        class="text-sm hover:underline p-0.5 truncate hover:bg-slate-25 hover:rounded-md"
-        :to="getCategoryRoute(category.slug)"
-      >
-        <span :title="category.name">
-          {{ category.name }}
-        </span>
-      </router-link>
-    </span>
-    <span
-      class="flex items-center text-xs lg:text-sm"
-      :title="formattedViewCount"
-    >
-      {{ readableViewCount }}
-      <span class="ml-1 lg:hidden">
-        {{ ` ${$t('HELP_CENTER.TABLE.HEADERS.READ_COUNT')}` }}
-      </span>
-    </span>
-    <span class="flex items-center capitalize">
-      <woot-label
-        class="!mb-0"
-        :title="status"
-        size="small"
-        variant="smooth"
-        :color-scheme="labelColor"
-      />
-    </span>
-    <span
-      class="flex items-center justify-end col-span-2 text-xs first-letter:uppercase text-slate-700 dark:text-slate-100"
-    >
-      {{ lastUpdatedAt }}
-    </span>
-  </div>
-</template>
-
 <script>
 import { dynamicTime } from 'shared/helpers/timeHelper';
 import portalMixin from '../mixins/portalMixin';
@@ -166,3 +83,86 @@ export default {
   },
 };
 </script>
+
+<template>
+  <div
+    class="grid grid-cols-1 gap-4 px-6 py-3 my-0 -mx-4 bg-white border-b text-slate-700 dark:text-slate-100 last:border-b-0 dark:bg-slate-900 lg:grid-cols-12 border-slate-50 dark:border-slate-800"
+  >
+    <span class="flex items-start col-span-6 gap-2 text-left">
+      <fluent-icon
+        v-if="showDragIcon"
+        size="20"
+        class="flex-shrink-0 block w-4 h-4 mt-1 cursor-move text-slate-200 dark:text-slate-700 hover:text-slate-400 hover:dark:text-slate-200"
+        icon="grab-handle"
+      />
+      <div class="flex flex-col truncate">
+        <router-link :to="articleUrl(id)">
+          <h6
+            :title="title"
+            class="text-base ltr:text-left rtl:text-right text-slate-800 dark:text-slate-100 mb-0.5 leading-6 font-medium hover:underline overflow-hidden whitespace-nowrap text-ellipsis"
+          >
+            {{ title }}
+          </h6>
+        </router-link>
+        <div class="flex items-center gap-1">
+          <Thumbnail
+            v-if="author"
+            :src="author.thumbnail"
+            :username="author.name"
+            size="14px"
+          />
+          <div
+            v-else
+            v-tooltip.right="
+              $t('HELP_CENTER.TABLE.COLUMNS.AUTHOR_NOT_AVAILABLE')
+            "
+            class="flex items-center justify-center rounded w-3.5 h-3.5 bg-woot-100 dark:bg-woot-700"
+          >
+            <fluent-icon
+              icon="person"
+              type="filled"
+              size="10"
+              class="text-woot-300 dark:text-woot-300"
+            />
+          </div>
+          <span class="text-sm font-normal text-slate-700 dark:text-slate-200">
+            {{ articleAuthorName }}
+          </span>
+        </div>
+      </div>
+    </span>
+    <span class="flex items-center col-span-2">
+      <router-link
+        class="text-sm hover:underline p-0.5 truncate hover:bg-slate-25 hover:rounded-md"
+        :to="getCategoryRoute(category.slug)"
+      >
+        <span :title="category.name">
+          {{ category.name }}
+        </span>
+      </router-link>
+    </span>
+    <span
+      class="flex items-center text-xs lg:text-sm"
+      :title="formattedViewCount"
+    >
+      {{ readableViewCount }}
+      <span class="ml-1 lg:hidden">
+        {{ ` ${$t('HELP_CENTER.TABLE.HEADERS.READ_COUNT')}` }}
+      </span>
+    </span>
+    <span class="flex items-center capitalize">
+      <woot-label
+        class="!mb-0"
+        :title="status"
+        size="small"
+        variant="smooth"
+        :color-scheme="labelColor"
+      />
+    </span>
+    <span
+      class="flex items-center justify-end col-span-2 text-xs first-letter:uppercase text-slate-700 dark:text-slate-100"
+    >
+      {{ lastUpdatedAt }}
+    </span>
+  </div>
+</template>
diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/components/ArticleSearch/ArticleSearchResultItem.vue b/app/javascript/dashboard/routes/dashboard/helpcenter/components/ArticleSearch/ArticleSearchResultItem.vue
index 2ed565070..f2989acec 100644
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/components/ArticleSearch/ArticleSearchResultItem.vue
+++ b/app/javascript/dashboard/routes/dashboard/helpcenter/components/ArticleSearch/ArticleSearchResultItem.vue
@@ -1,46 +1,3 @@
-<template>
-  <button
-    class="flex flex-col w-full gap-1 px-2 py-1 bg-white border border-transparent border-solid rounded-md cursor-pointer dark:bg-slate-900 hover:bg-slate-25 hover:dark:bg-slate-800 group focus:outline-none focus:bg-slate-25 focus:border-slate-500 dark:focus:border-slate-400 dark:focus:bg-slate-800"
-    @click="handlePreview"
-  >
-    <h4
-      class="w-full mb-0 -mx-1 text-sm rounded-sm ltr:text-left rtl:text-right text-slate-900 dark:text-slate-25 hover:underline group-hover:underline"
-    >
-      {{ title }}
-    </h4>
-
-    <div class="flex content-between items-center gap-0.5 w-full">
-      <p
-        class="w-full mb-0 text-sm ltr:text-left rtl:text-right text-slate-600 dark:text-slate-300"
-      >
-        {{ locale }}
-        {{ ` / ` }}
-        {{ category || $t('HELP_CENTER.ARTICLE_SEARCH_RESULT.UNCATEGORIZED') }}
-      </p>
-      <div class="flex gap-0.5">
-        <woot-button
-          :title="$t('HELP_CENTER.ARTICLE_SEARCH_RESULT.COPY_LINK')"
-          variant="hollow"
-          color-scheme="secondary"
-          size="tiny"
-          icon="copy"
-          class="invisible group-hover:visible"
-          @click="handleCopy"
-        />
-        <woot-button
-          class="insert-button"
-          variant="smooth"
-          color-scheme="secondary"
-          size="tiny"
-          @click="handleInsert"
-        >
-          {{ $t('HELP_CENTER.ARTICLE_SEARCH_RESULT.INSERT_ARTICLE') }}
-        </woot-button>
-      </div>
-    </div>
-  </button>
-</template>
-
 <script>
 import { useAlert } from 'dashboard/composables';
 import { copyTextToClipboard } from 'shared/helpers/clipboard';
@@ -90,3 +47,46 @@ export default {
   },
 };
 </script>
+
+<template>
+  <button
+    class="flex flex-col w-full gap-1 px-2 py-1 bg-white border border-transparent border-solid rounded-md cursor-pointer dark:bg-slate-900 hover:bg-slate-25 hover:dark:bg-slate-800 group focus:outline-none focus:bg-slate-25 focus:border-slate-500 dark:focus:border-slate-400 dark:focus:bg-slate-800"
+    @click="handlePreview"
+  >
+    <h4
+      class="w-full mb-0 -mx-1 text-sm rounded-sm ltr:text-left rtl:text-right text-slate-900 dark:text-slate-25 hover:underline group-hover:underline"
+    >
+      {{ title }}
+    </h4>
+
+    <div class="flex content-between items-center gap-0.5 w-full">
+      <p
+        class="w-full mb-0 text-sm ltr:text-left rtl:text-right text-slate-600 dark:text-slate-300"
+      >
+        {{ locale }}
+        {{ ` / ` }}
+        {{ category || $t('HELP_CENTER.ARTICLE_SEARCH_RESULT.UNCATEGORIZED') }}
+      </p>
+      <div class="flex gap-0.5">
+        <woot-button
+          :title="$t('HELP_CENTER.ARTICLE_SEARCH_RESULT.COPY_LINK')"
+          variant="hollow"
+          color-scheme="secondary"
+          size="tiny"
+          icon="copy"
+          class="invisible group-hover:visible"
+          @click="handleCopy"
+        />
+        <woot-button
+          class="insert-button"
+          variant="smooth"
+          color-scheme="secondary"
+          size="tiny"
+          @click="handleInsert"
+        >
+          {{ $t('HELP_CENTER.ARTICLE_SEARCH_RESULT.INSERT_ARTICLE') }}
+        </woot-button>
+      </div>
+    </div>
+  </button>
+</template>
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 168ac792c..651dfb277 100644
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/components/ArticleSearch/ArticleView.vue
+++ b/app/javascript/dashboard/routes/dashboard/helpcenter/components/ArticleSearch/ArticleView.vue
@@ -1,3 +1,30 @@
+<script>
+import IframeLoader from 'shared/components/IframeLoader.vue';
+
+export default {
+  name: 'ArticleView',
+  components: {
+    IframeLoader,
+  },
+  props: {
+    url: {
+      type: String,
+      default: '',
+    },
+  },
+  methods: {
+    onBack(e) {
+      e.stopPropagation();
+      this.$emit('back');
+    },
+    onInsert(e) {
+      e.stopPropagation();
+      this.$emit('insert');
+    },
+  },
+};
+</script>
+
 <template>
   <div class="h-full w-full flex flex-col flex-1 overflow-hidden">
     <div class="py-1">
@@ -38,30 +65,3 @@
     </div>
   </div>
 </template>
-
-<script>
-import IframeLoader from 'shared/components/IframeLoader.vue';
-
-export default {
-  name: 'ArticleView',
-  components: {
-    IframeLoader,
-  },
-  props: {
-    url: {
-      type: String,
-      default: '',
-    },
-  },
-  methods: {
-    onBack(e) {
-      e.stopPropagation();
-      this.$emit('back');
-    },
-    onInsert(e) {
-      e.stopPropagation();
-      this.$emit('insert');
-    },
-  },
-};
-</script>
diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/components/ArticleSearch/Header.vue b/app/javascript/dashboard/routes/dashboard/helpcenter/components/ArticleSearch/Header.vue
index 661473316..87dfcf609 100644
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/components/ArticleSearch/Header.vue
+++ b/app/javascript/dashboard/routes/dashboard/helpcenter/components/ArticleSearch/Header.vue
@@ -1,38 +1,3 @@
-<template>
-  <div class="flex flex-col py-1">
-    <div class="flex items-center justify-between py-2 mb-1">
-      <h3 class="text-base text-slate-900 dark:text-slate-25">
-        {{ title }}
-      </h3>
-      <woot-button
-        variant="clear"
-        size="tiny"
-        color-scheme="secondary"
-        icon="dismiss"
-        @click="onClose"
-      />
-    </div>
-
-    <div class="relative">
-      <div
-        class="absolute ltr:left-0 rtl:right-0 w-8 top-0.5 h-8 flex justify-center items-center"
-      >
-        <fluent-icon icon="search" class="" size="18" />
-      </div>
-      <input
-        ref="searchInput"
-        type="text"
-        :placeholder="$t('HELP_CENTER.ARTICLE_SEARCH.PLACEHOLDER')"
-        class="block w-full !h-9 ltr:!pl-8 rtl:!pr-8 dark:!bg-slate-700 !bg-slate-25 text-sm rounded-md leading-8 text-slate-700 shadow-sm ring-2 ring-transparent ring-slate-300 border border-solid border-slate-300 placeholder:text-slate-400 focus:border-woot-600 focus:ring-woot-200 !mb-0 focus:bg-slate-25 dark:focus:bg-slate-700 dark:focus:ring-woot-700"
-        :value="searchQuery"
-        @focus="onFocus"
-        @blur="onBlur"
-        @input="onInput"
-      />
-    </div>
-  </div>
-</template>
-
 <script>
 import keyboardEventListenerMixins from 'shared/mixins/keyboardEventListenerMixins';
 
@@ -80,3 +45,38 @@ export default {
   },
 };
 </script>
+
+<template>
+  <div class="flex flex-col py-1">
+    <div class="flex items-center justify-between py-2 mb-1">
+      <h3 class="text-base text-slate-900 dark:text-slate-25">
+        {{ title }}
+      </h3>
+      <woot-button
+        variant="clear"
+        size="tiny"
+        color-scheme="secondary"
+        icon="dismiss"
+        @click="onClose"
+      />
+    </div>
+
+    <div class="relative">
+      <div
+        class="absolute ltr:left-0 rtl:right-0 w-8 top-0.5 h-8 flex justify-center items-center"
+      >
+        <fluent-icon icon="search" class="" size="18" />
+      </div>
+      <input
+        ref="searchInput"
+        type="text"
+        :placeholder="$t('HELP_CENTER.ARTICLE_SEARCH.PLACEHOLDER')"
+        class="block w-full !h-9 ltr:!pl-8 rtl:!pr-8 dark:!bg-slate-700 !bg-slate-25 text-sm rounded-md leading-8 text-slate-700 shadow-sm ring-2 ring-transparent ring-slate-300 border border-solid border-slate-300 placeholder:text-slate-400 focus:border-woot-600 focus:ring-woot-200 !mb-0 focus:bg-slate-25 dark:focus:bg-slate-700 dark:focus:ring-woot-700"
+        :value="searchQuery"
+        @focus="onFocus"
+        @blur="onBlur"
+        @input="onInput"
+      />
+    </div>
+  </div>
+</template>
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 ddaa8ac79..7a4e75d9c 100644
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/components/ArticleSearch/SearchPopover.vue
+++ b/app/javascript/dashboard/routes/dashboard/helpcenter/components/ArticleSearch/SearchPopover.vue
@@ -1,37 +1,3 @@
-<template>
-  <div
-    class="fixed top-0 left-0 z-50 flex items-center justify-center w-screen h-screen bg-modal-backdrop-light dark:bg-modal-backdrop-dark"
-  >
-    <div
-      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
-        :title="$t('HELP_CENTER.ARTICLE_SEARCH.TITLE')"
-        class="w-full sticky top-0 bg-[inherit]"
-        @close="onClose"
-        @search="onSearch"
-      />
-
-      <article-view
-        v-if="activeId"
-        :url="articleViewerUrl"
-        @back="onBack"
-        @insert="onInsert"
-      />
-      <search-results
-        v-else
-        :search-query="searchQuery"
-        :is-loading="isLoading"
-        :portal-slug="selectedPortalSlug"
-        :articles="searchResultsWithUrl"
-        @preview="handlePreview"
-        @insert="onInsert"
-      />
-    </div>
-  </div>
-</template>
-
 <script>
 import { debounce } from '@chatwoot/utils';
 import { useAlert } from 'dashboard/composables';
@@ -161,3 +127,37 @@ export default {
   },
 };
 </script>
+
+<template>
+  <div
+    class="fixed top-0 left-0 z-50 flex items-center justify-center w-screen h-screen bg-modal-backdrop-light dark:bg-modal-backdrop-dark"
+  >
+    <div
+      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
+        :title="$t('HELP_CENTER.ARTICLE_SEARCH.TITLE')"
+        class="w-full sticky top-0 bg-[inherit]"
+        @close="onClose"
+        @search="onSearch"
+      />
+
+      <article-view
+        v-if="activeId"
+        :url="articleViewerUrl"
+        @back="onBack"
+        @insert="onInsert"
+      />
+      <search-results
+        v-else
+        :search-query="searchQuery"
+        :is-loading="isLoading"
+        :portal-slug="selectedPortalSlug"
+        :articles="searchResultsWithUrl"
+        @preview="handlePreview"
+        @insert="onInsert"
+      />
+    </div>
+  </div>
+</template>
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 4a6eb5b8b..e966ebc86 100644
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/components/ArticleSearch/SearchResults.vue
+++ b/app/javascript/dashboard/routes/dashboard/helpcenter/components/ArticleSearch/SearchResults.vue
@@ -1,31 +1,3 @@
-<template>
-  <div
-    class="flex justify-end gap-1 py-4 bg-white dark:bg-slate-900 h-full overflow-y-auto"
-  >
-    <div class="flex flex-col gap-1 w-full">
-      <div v-if="isLoading" class="empty-state-message">
-        {{ $t('HELP_CENTER.ARTICLE_SEARCH_RESULT.SEARCH_LOADER') }}
-      </div>
-      <div v-else-if="showNoResults" class="empty-state-message">
-        {{ $t('HELP_CENTER.ARTICLE_SEARCH_RESULT.NO_RESULT') }}
-      </div>
-      <search-result-item
-        v-for="article in articles"
-        v-else
-        :id="article.id"
-        :key="article.id"
-        :title="article.title"
-        :body="article.content"
-        :url="article.url"
-        :category="article.category.name"
-        :locale="article.localeName"
-        @preview="handlePreview"
-        @insert="handleInsert"
-      />
-    </div>
-  </div>
-</template>
-
 <script>
 import SearchResultItem from './ArticleSearchResultItem.vue';
 
@@ -67,6 +39,34 @@ export default {
   },
 };
 </script>
+
+<template>
+  <div
+    class="flex justify-end gap-1 py-4 bg-white dark:bg-slate-900 h-full overflow-y-auto"
+  >
+    <div class="flex flex-col gap-1 w-full">
+      <div v-if="isLoading" class="empty-state-message">
+        {{ $t('HELP_CENTER.ARTICLE_SEARCH_RESULT.SEARCH_LOADER') }}
+      </div>
+      <div v-else-if="showNoResults" class="empty-state-message">
+        {{ $t('HELP_CENTER.ARTICLE_SEARCH_RESULT.NO_RESULT') }}
+      </div>
+      <search-result-item
+        v-for="article in articles"
+        v-else
+        :id="article.id"
+        :key="article.id"
+        :title="article.title"
+        :body="article.content"
+        :url="article.url"
+        :category="article.category.name"
+        :locale="article.localeName"
+        @preview="handlePreview"
+        @insert="handleInsert"
+      />
+    </div>
+  </div>
+</template>
 <style scoped>
 .empty-state-message {
   @apply text-center flex items-center justify-center px-4 py-8 text-slate-500 text-sm;
diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/components/ArticleTable.vue b/app/javascript/dashboard/routes/dashboard/helpcenter/components/ArticleTable.vue
index 1e8c2e92c..57d44bb01 100644
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/components/ArticleTable.vue
+++ b/app/javascript/dashboard/routes/dashboard/helpcenter/components/ArticleTable.vue
@@ -1,70 +1,3 @@
-<template>
-  <div class="flex-1">
-    <div
-      class="hidden lg:grid py-0 px-6 h-12 content-center grid-cols-12 z-10 gap-4 border-b border-slate-50 dark:border-slate-700 sticky top-16 bg-white dark:bg-slate-900"
-      :class="{ draggable: onCategoryPage }"
-    >
-      <div
-        class="font-semibold capitalize text-sm py-2 px-0 text-slate-700 dark:text-slate-100 text-left rtl:text-right col-span-6"
-      >
-        {{ $t('HELP_CENTER.TABLE.HEADERS.TITLE') }}
-      </div>
-      <div
-        class="font-semibold capitalize text-sm py-2 px-0 text-slate-700 dark:text-slate-100 text-left rtl:text-right col-span-2"
-      >
-        {{ $t('HELP_CENTER.TABLE.HEADERS.CATEGORY') }}
-      </div>
-      <div
-        class="font-semibold capitalize text-sm py-2 px-0 text-slate-700 dark:text-slate-100 text-left rtl:text-right hidden lg:block"
-      >
-        {{ $t('HELP_CENTER.TABLE.HEADERS.READ_COUNT') }}
-      </div>
-      <div
-        class="font-semibold capitalize text-sm py-2 px-0 text-slate-700 dark:text-slate-100 text-left rtl:text-right"
-      >
-        {{ $t('HELP_CENTER.TABLE.HEADERS.STATUS') }}
-      </div>
-      <div
-        class="font-semibold capitalize text-sm py-2 px-0 text-slate-700 dark:text-slate-100 text-right rtl:text-left hidden md:block col-span-2"
-      >
-        {{ $t('HELP_CENTER.TABLE.HEADERS.LAST_EDITED') }}
-      </div>
-    </div>
-    <draggable
-      tag="div"
-      class="border-t-0 px-4 pb-4"
-      :disabled="!dragEnabled"
-      :list="localArticles"
-      ghost-class="article-ghost-class"
-      @start="dragging = true"
-      @end="onDragEnd"
-    >
-      <ArticleItem
-        v-for="article in localArticles"
-        :id="article.id"
-        :key="article.id"
-        :class="{ draggable: onCategoryPage }"
-        :title="article.title"
-        :author="article.author"
-        :show-drag-icon="dragEnabled"
-        :category="article.category"
-        :views="article.views"
-        :status="article.status"
-        :updated-at="article.updated_at"
-      />
-    </draggable>
-
-    <table-footer
-      v-if="showArticleFooter"
-      :current-page="currentPage"
-      :total-count="totalCount"
-      :page-size="pageSize"
-      class="dark:bg-slate-900 bottom-0 border-t border-slate-75 dark:border-slate-700/50"
-      @page-change="onPageChange"
-    />
-  </div>
-</template>
-
 <script>
 import ArticleItem from './ArticleItem.vue';
 import TableFooter from 'dashboard/components/widgets/TableFooter.vue';
@@ -155,6 +88,73 @@ export default {
   },
 };
 </script>
+
+<template>
+  <div class="flex-1">
+    <div
+      class="hidden lg:grid py-0 px-6 h-12 content-center grid-cols-12 z-10 gap-4 border-b border-slate-50 dark:border-slate-700 sticky top-16 bg-white dark:bg-slate-900"
+      :class="{ draggable: onCategoryPage }"
+    >
+      <div
+        class="font-semibold capitalize text-sm py-2 px-0 text-slate-700 dark:text-slate-100 text-left rtl:text-right col-span-6"
+      >
+        {{ $t('HELP_CENTER.TABLE.HEADERS.TITLE') }}
+      </div>
+      <div
+        class="font-semibold capitalize text-sm py-2 px-0 text-slate-700 dark:text-slate-100 text-left rtl:text-right col-span-2"
+      >
+        {{ $t('HELP_CENTER.TABLE.HEADERS.CATEGORY') }}
+      </div>
+      <div
+        class="font-semibold capitalize text-sm py-2 px-0 text-slate-700 dark:text-slate-100 text-left rtl:text-right hidden lg:block"
+      >
+        {{ $t('HELP_CENTER.TABLE.HEADERS.READ_COUNT') }}
+      </div>
+      <div
+        class="font-semibold capitalize text-sm py-2 px-0 text-slate-700 dark:text-slate-100 text-left rtl:text-right"
+      >
+        {{ $t('HELP_CENTER.TABLE.HEADERS.STATUS') }}
+      </div>
+      <div
+        class="font-semibold capitalize text-sm py-2 px-0 text-slate-700 dark:text-slate-100 text-right rtl:text-left hidden md:block col-span-2"
+      >
+        {{ $t('HELP_CENTER.TABLE.HEADERS.LAST_EDITED') }}
+      </div>
+    </div>
+    <draggable
+      tag="div"
+      class="border-t-0 px-4 pb-4"
+      :disabled="!dragEnabled"
+      :list="localArticles"
+      ghost-class="article-ghost-class"
+      @start="dragging = true"
+      @end="onDragEnd"
+    >
+      <ArticleItem
+        v-for="article in localArticles"
+        :id="article.id"
+        :key="article.id"
+        :class="{ draggable: onCategoryPage }"
+        :title="article.title"
+        :author="article.author"
+        :show-drag-icon="dragEnabled"
+        :category="article.category"
+        :views="article.views"
+        :status="article.status"
+        :updated-at="article.updated_at"
+      />
+    </draggable>
+
+    <table-footer
+      v-if="showArticleFooter"
+      :current-page="currentPage"
+      :total-count="totalCount"
+      :page-size="pageSize"
+      class="dark:bg-slate-900 bottom-0 border-t border-slate-75 dark:border-slate-700/50"
+      @page-change="onPageChange"
+    />
+  </div>
+</template>
 <style lang="scss" scoped>
 /*
 The .article-ghost-class class is maintained as the vueDraggable doesn't allow multiple classes
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 d946b1b11..de692fe02 100644
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/components/Header/ArticleHeader.vue
+++ b/app/javascript/dashboard/routes/dashboard/helpcenter/components/Header/ArticleHeader.vue
@@ -1,3 +1,91 @@
+<script>
+import WootDropdownItem from 'shared/components/ui/dropdown/DropdownItem.vue';
+import WootDropdownMenu from 'shared/components/ui/dropdown/DropdownMenu.vue';
+import MultiselectDropdownItems from 'shared/components/ui/MultiselectDropdownItems.vue';
+
+import FluentIcon from 'shared/components/FluentIcon/DashboardIcon.vue';
+export default {
+  components: {
+    FluentIcon,
+    WootDropdownItem,
+    WootDropdownMenu,
+    MultiselectDropdownItems,
+  },
+  props: {
+    headerTitle: {
+      type: String,
+      default: '',
+    },
+    count: {
+      type: Number,
+      default: 0,
+    },
+    selectedValue: {
+      type: String,
+      default: '',
+    },
+    selectedLocale: {
+      type: String,
+      default: '',
+    },
+    shouldShowSettings: {
+      type: Boolean,
+      default: false,
+    },
+    allLocales: {
+      type: Array,
+      default: () => [],
+    },
+  },
+  data() {
+    return {
+      showSortByDropdown: false,
+      showLocaleDropdown: false,
+    };
+  },
+  computed: {
+    shouldShowLocaleDropdown() {
+      return this.allLocales.length > 1;
+    },
+    switchableLocales() {
+      return this.allLocales.filter(
+        locale => locale.name !== this.selectedLocale
+      );
+    },
+  },
+  methods: {
+    openFilterModal() {
+      this.$emit('openModal');
+    },
+    openDropdown() {
+      this.$emit('open');
+      this.showSortByDropdown = true;
+    },
+    closeDropdown() {
+      this.$emit('close');
+      this.showSortByDropdown = false;
+    },
+    openLocaleDropdown() {
+      this.showLocaleDropdown = true;
+    },
+    closeLocaleDropdown() {
+      this.showLocaleDropdown = false;
+    },
+    onClickNewArticlePage() {
+      this.$emit('new-article-page');
+    },
+    onClickSelectItem(value) {
+      const { name, code } = value;
+      this.closeLocaleDropdown();
+      if (!name || name === this.selectedLocale) {
+        return;
+      }
+      this.$emit('change-locale', code);
+    },
+  },
+};
+</script>
+
 <template>
   <div
     class="flex p-6 items-center justify-between w-full h-16 sticky top-0 z-50 bg-white dark:bg-slate-900"
@@ -137,94 +225,6 @@
   </div>
 </template>
 
-<script>
-import WootDropdownItem from 'shared/components/ui/dropdown/DropdownItem.vue';
-import WootDropdownMenu from 'shared/components/ui/dropdown/DropdownMenu.vue';
-import MultiselectDropdownItems from 'shared/components/ui/MultiselectDropdownItems.vue';
-
-import FluentIcon from 'shared/components/FluentIcon/DashboardIcon.vue';
-export default {
-  components: {
-    FluentIcon,
-    WootDropdownItem,
-    WootDropdownMenu,
-    MultiselectDropdownItems,
-  },
-  props: {
-    headerTitle: {
-      type: String,
-      default: '',
-    },
-    count: {
-      type: Number,
-      default: 0,
-    },
-    selectedValue: {
-      type: String,
-      default: '',
-    },
-    selectedLocale: {
-      type: String,
-      default: '',
-    },
-    shouldShowSettings: {
-      type: Boolean,
-      default: false,
-    },
-    allLocales: {
-      type: Array,
-      default: () => [],
-    },
-  },
-  data() {
-    return {
-      showSortByDropdown: false,
-      showLocaleDropdown: false,
-    };
-  },
-  computed: {
-    shouldShowLocaleDropdown() {
-      return this.allLocales.length > 1;
-    },
-    switchableLocales() {
-      return this.allLocales.filter(
-        locale => locale.name !== this.selectedLocale
-      );
-    },
-  },
-  methods: {
-    openFilterModal() {
-      this.$emit('openModal');
-    },
-    openDropdown() {
-      this.$emit('open');
-      this.showSortByDropdown = true;
-    },
-    closeDropdown() {
-      this.$emit('close');
-      this.showSortByDropdown = false;
-    },
-    openLocaleDropdown() {
-      this.showLocaleDropdown = true;
-    },
-    closeLocaleDropdown() {
-      this.showLocaleDropdown = false;
-    },
-    onClickNewArticlePage() {
-      this.$emit('new-article-page');
-    },
-    onClickSelectItem(value) {
-      const { name, code } = value;
-      this.closeLocaleDropdown();
-      if (!name || name === this.selectedLocale) {
-        return;
-      }
-      this.$emit('change-locale', code);
-    },
-  },
-};
-</script>
-
 <style scoped lang="scss">
 .dropdown-pane--open {
   @apply absolute top-10 right-0 z-50 min-w-[8rem];
diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/components/Header/EditArticleHeader.vue b/app/javascript/dashboard/routes/dashboard/helpcenter/components/Header/EditArticleHeader.vue
index e006a7c9f..4500080fc 100644
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/components/Header/EditArticleHeader.vue
+++ b/app/javascript/dashboard/routes/dashboard/helpcenter/components/Header/EditArticleHeader.vue
@@ -1,112 +1,3 @@
-<template>
-  <div class="flex items-center justify-between w-full h-16">
-    <div class="flex items-center">
-      <woot-button
-        icon="chevron-left"
-        variant="clear"
-        size="small"
-        color-scheme="primary"
-        class="back-button"
-        @click="onClickGoBack"
-      >
-        {{ backButtonLabel }}
-      </woot-button>
-    </div>
-    <div class="flex items-center gap-1">
-      <span
-        v-if="isUpdating || isSaved"
-        class="draft-status mr-1 ml-4 rtl:ml-2 rtl:mr-4 text-slate-400 dark:text-slate-300 items-center text-xs"
-      >
-        {{ statusText }}
-      </span>
-
-      <woot-button
-        class-names="article--buttons relative"
-        icon="globe"
-        color-scheme="secondary"
-        variant="hollow"
-        size="small"
-        @click="showPreview"
-      >
-        {{ $t('HELP_CENTER.EDIT_HEADER.PREVIEW') }}
-      </woot-button>
-      <!-- Hidden since this is in V2
-      <woot-button
-        v-if="shouldShowAddLocaleButton"
-        class-names="article--buttons relative"
-        icon="add"
-        color-scheme="secondary"
-        variant="hollow"
-        size="small"
-        @click="onClickAdd"
-      >
-        {{ $t('HELP_CENTER.EDIT_HEADER.ADD_TRANSLATION') }}
-      </woot-button> -->
-      <woot-button
-        v-if="!isSidebarOpen"
-        v-tooltip.top-end="$t('HELP_CENTER.EDIT_HEADER.OPEN_SIDEBAR')"
-        icon="pane-open"
-        class-names="article--buttons relative sidebar-button"
-        variant="hollow"
-        size="small"
-        color-scheme="secondary"
-        :is-disabled="enableOpenSidebarButton"
-        @click="openSidebar"
-      />
-      <woot-button
-        v-if="isSidebarOpen"
-        v-tooltip.top-end="$t('HELP_CENTER.EDIT_HEADER.CLOSE_SIDEBAR')"
-        icon="pane-close"
-        class-names="article--buttons relative"
-        variant="hollow"
-        size="small"
-        color-scheme="secondary"
-        @click="closeSidebar"
-      />
-      <div class="article--buttons relative">
-        <div class="button-group">
-          <woot-button
-            class-names="publish-button"
-            size="small"
-            icon="checkmark"
-            color-scheme="primary"
-            :is-disabled="!articleSlug || isPublishedArticle"
-            @click="updateArticleStatus(ARTICLE_STATUS_TYPES.PUBLISH)"
-          >
-            {{ $t('HELP_CENTER.EDIT_HEADER.PUBLISH_BUTTON') }}
-          </woot-button>
-          <woot-button
-            ref="arrowDownButton"
-            size="small"
-            icon="chevron-down"
-            :is-disabled="!articleSlug || isArchivedArticle"
-            @click="openActionsDropdown"
-          />
-        </div>
-        <div
-          v-if="showActionsDropdown"
-          v-on-clickaway="closeActionsDropdown"
-          class="dropdown-pane dropdown-pane--open"
-        >
-          <woot-dropdown-menu>
-            <woot-dropdown-item>
-              <woot-button
-                variant="clear"
-                color-scheme="secondary"
-                size="small"
-                icon="book-clock"
-                @click="updateArticleStatus(ARTICLE_STATUS_TYPES.ARCHIVE)"
-              >
-                {{ $t('HELP_CENTER.EDIT_HEADER.MOVE_TO_ARCHIVE_BUTTON') }}
-              </woot-button>
-            </woot-dropdown-item>
-          </woot-dropdown-menu>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
 <script>
 import { useAlert } from 'dashboard/composables';
 import wootConstants from 'dashboard/constants/globals';
@@ -232,6 +123,115 @@ export default {
 };
 </script>
 
+<template>
+  <div class="flex items-center justify-between w-full h-16">
+    <div class="flex items-center">
+      <woot-button
+        icon="chevron-left"
+        variant="clear"
+        size="small"
+        color-scheme="primary"
+        class="back-button"
+        @click="onClickGoBack"
+      >
+        {{ backButtonLabel }}
+      </woot-button>
+    </div>
+    <div class="flex items-center gap-1">
+      <span
+        v-if="isUpdating || isSaved"
+        class="draft-status mr-1 ml-4 rtl:ml-2 rtl:mr-4 text-slate-400 dark:text-slate-300 items-center text-xs"
+      >
+        {{ statusText }}
+      </span>
+
+      <woot-button
+        class-names="article--buttons relative"
+        icon="globe"
+        color-scheme="secondary"
+        variant="hollow"
+        size="small"
+        @click="showPreview"
+      >
+        {{ $t('HELP_CENTER.EDIT_HEADER.PREVIEW') }}
+      </woot-button>
+      <!-- Hidden since this is in V2
+      <woot-button
+        v-if="shouldShowAddLocaleButton"
+        class-names="article--buttons relative"
+        icon="add"
+        color-scheme="secondary"
+        variant="hollow"
+        size="small"
+        @click="onClickAdd"
+      >
+        {{ $t('HELP_CENTER.EDIT_HEADER.ADD_TRANSLATION') }}
+      </woot-button> -->
+      <woot-button
+        v-if="!isSidebarOpen"
+        v-tooltip.top-end="$t('HELP_CENTER.EDIT_HEADER.OPEN_SIDEBAR')"
+        icon="pane-open"
+        class-names="article--buttons relative sidebar-button"
+        variant="hollow"
+        size="small"
+        color-scheme="secondary"
+        :is-disabled="enableOpenSidebarButton"
+        @click="openSidebar"
+      />
+      <woot-button
+        v-if="isSidebarOpen"
+        v-tooltip.top-end="$t('HELP_CENTER.EDIT_HEADER.CLOSE_SIDEBAR')"
+        icon="pane-close"
+        class-names="article--buttons relative"
+        variant="hollow"
+        size="small"
+        color-scheme="secondary"
+        @click="closeSidebar"
+      />
+      <div class="article--buttons relative">
+        <div class="button-group">
+          <woot-button
+            class-names="publish-button"
+            size="small"
+            icon="checkmark"
+            color-scheme="primary"
+            :is-disabled="!articleSlug || isPublishedArticle"
+            @click="updateArticleStatus(ARTICLE_STATUS_TYPES.PUBLISH)"
+          >
+            {{ $t('HELP_CENTER.EDIT_HEADER.PUBLISH_BUTTON') }}
+          </woot-button>
+          <woot-button
+            ref="arrowDownButton"
+            size="small"
+            icon="chevron-down"
+            :is-disabled="!articleSlug || isArchivedArticle"
+            @click="openActionsDropdown"
+          />
+        </div>
+        <div
+          v-if="showActionsDropdown"
+          v-on-clickaway="closeActionsDropdown"
+          class="dropdown-pane dropdown-pane--open"
+        >
+          <woot-dropdown-menu>
+            <woot-dropdown-item>
+              <woot-button
+                variant="clear"
+                color-scheme="secondary"
+                size="small"
+                icon="book-clock"
+                @click="updateArticleStatus(ARTICLE_STATUS_TYPES.ARCHIVE)"
+              >
+                {{ $t('HELP_CENTER.EDIT_HEADER.MOVE_TO_ARCHIVE_BUTTON') }}
+              </woot-button>
+            </woot-dropdown-item>
+          </woot-dropdown-menu>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
 <style scoped lang="scss">
 .article--buttons {
   .dropdown-pane {
diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/components/HelpCenterLayout.vue b/app/javascript/dashboard/routes/dashboard/helpcenter/components/HelpCenterLayout.vue
index 334efb7db..e7dbb5bb1 100644
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/components/HelpCenterLayout.vue
+++ b/app/javascript/dashboard/routes/dashboard/helpcenter/components/HelpCenterLayout.vue
@@ -1,62 +1,3 @@
-<template>
-  <div class="flex flex-grow-0 w-full h-full min-h-0 app-wrapper">
-    <sidebar
-      :route="currentRoute"
-      @toggle-account-modal="toggleAccountModal"
-      @open-notification-panel="openNotificationPanel"
-      @open-key-shortcut-modal="toggleKeyShortcutModal"
-      @close-key-shortcut-modal="closeKeyShortcutModal"
-    />
-    <help-center-sidebar
-      v-if="showHelpCenterSidebar"
-      :header-title="headerTitle"
-      :portal-slug="selectedPortalSlug"
-      :locale-slug="selectedLocaleInPortal"
-      :sub-title="localeName(selectedLocaleInPortal)"
-      :accessible-menu-items="accessibleMenuItems"
-      :additional-secondary-menu-items="additionalSecondaryMenuItems"
-      @open-popover="openPortalPopover"
-      @open-modal="onClickOpenAddCategoryModal"
-    />
-    <section
-      v-if="isHelpCenterEnabled"
-      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
-        :show-account-modal="showAccountModal"
-        @close-account-modal="toggleAccountModal"
-      />
-      <woot-key-shortcut-modal
-        v-if="showShortcutModal"
-        @close="closeKeyShortcutModal"
-        @clickaway="closeKeyShortcutModal"
-      />
-      <notification-panel
-        v-if="showNotificationPanel"
-        @close="closeNotificationPanel"
-      />
-      <portal-popover
-        v-if="showPortalPopover"
-        :portals="portals"
-        :active-portal-slug="selectedPortalSlug"
-        :active-locale="selectedLocaleInPortal"
-        @fetch-portal="fetchPortalAndItsCategories"
-        @close-popover="closePortalPopover"
-      />
-      <add-category
-        v-if="showAddCategoryModal"
-        :show.sync="showAddCategoryModal"
-        :portal-name="selectedPortalName"
-        :locale="selectedLocaleInPortal"
-        :portal-slug="selectedPortalSlug"
-        @cancel="onClickCloseAddCategoryModal"
-      />
-    </section>
-    <upgrade-page v-else />
-  </div>
-</template>
 <script>
 import { mapGetters } from 'vuex';
 import UpgradePage from './UpgradePage.vue';
@@ -342,3 +283,62 @@ export default {
   },
 };
 </script>
+<template>
+  <div class="flex flex-grow-0 w-full h-full min-h-0 app-wrapper">
+    <sidebar
+      :route="currentRoute"
+      @toggle-account-modal="toggleAccountModal"
+      @open-notification-panel="openNotificationPanel"
+      @open-key-shortcut-modal="toggleKeyShortcutModal"
+      @close-key-shortcut-modal="closeKeyShortcutModal"
+    />
+    <help-center-sidebar
+      v-if="showHelpCenterSidebar"
+      :header-title="headerTitle"
+      :portal-slug="selectedPortalSlug"
+      :locale-slug="selectedLocaleInPortal"
+      :sub-title="localeName(selectedLocaleInPortal)"
+      :accessible-menu-items="accessibleMenuItems"
+      :additional-secondary-menu-items="additionalSecondaryMenuItems"
+      @open-popover="openPortalPopover"
+      @open-modal="onClickOpenAddCategoryModal"
+    />
+    <section
+      v-if="isHelpCenterEnabled"
+      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
+        :show-account-modal="showAccountModal"
+        @close-account-modal="toggleAccountModal"
+      />
+      <woot-key-shortcut-modal
+        v-if="showShortcutModal"
+        @close="closeKeyShortcutModal"
+        @clickaway="closeKeyShortcutModal"
+      />
+      <notification-panel
+        v-if="showNotificationPanel"
+        @close="closeNotificationPanel"
+      />
+      <portal-popover
+        v-if="showPortalPopover"
+        :portals="portals"
+        :active-portal-slug="selectedPortalSlug"
+        :active-locale="selectedLocaleInPortal"
+        @fetch-portal="fetchPortalAndItsCategories"
+        @close-popover="closePortalPopover"
+      />
+      <add-category
+        v-if="showAddCategoryModal"
+        :show.sync="showAddCategoryModal"
+        :portal-name="selectedPortalName"
+        :locale="selectedLocaleInPortal"
+        :portal-slug="selectedPortalSlug"
+        @cancel="onClickCloseAddCategoryModal"
+      />
+    </section>
+    <upgrade-page 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 f2d5ff99b..0a4af0d3d 100644
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/components/PortalListItem.vue
+++ b/app/javascript/dashboard/routes/dashboard/helpcenter/components/PortalListItem.vue
@@ -1,3 +1,190 @@
+<script>
+import { useAlert } from 'dashboard/composables';
+import { useUISettings } from 'dashboard/composables/useUISettings';
+import thumbnail from 'dashboard/components/widgets/Thumbnail.vue';
+import LocaleItemTable from './PortalListItemTable.vue';
+import { PORTALS_EVENTS } from '../../../../helper/AnalyticsHelper/events';
+
+export default {
+  components: {
+    thumbnail,
+    LocaleItemTable,
+  },
+  props: {
+    portal: {
+      type: Object,
+      default: () => {},
+    },
+    status: {
+      type: String,
+      default: '',
+      values: ['archived', 'draft', 'published'],
+    },
+  },
+  setup() {
+    const { updateUISettings } = useUISettings();
+
+    return {
+      updateUISettings,
+    };
+  },
+  data() {
+    return {
+      showDeleteConfirmationPopup: false,
+      alertMessage: '',
+      selectedPortalForDelete: {},
+    };
+  },
+  computed: {
+    labelColor() {
+      switch (this.status) {
+        case 'Archived':
+          return 'warning';
+        default:
+          return 'success';
+      }
+    },
+    deleteMessageValue() {
+      return ` ${this.selectedPortalForDelete.name}?`;
+    },
+    locales() {
+      return this.portal ? this.portal.config.allowed_locales : [];
+    },
+    allowedLocales() {
+      return Object.keys(this.locales).map(key => {
+        return this.locales[key].code;
+      });
+    },
+    articleCount() {
+      const { allowed_locales: allowedLocales } = this.portal.config;
+      return allowedLocales.reduce((acc, locale) => {
+        return acc + locale.articles_count;
+      }, 0);
+    },
+  },
+  methods: {
+    addLocale() {
+      this.$emit('add-locale', this.portal.id);
+    },
+    openSite() {
+      this.$emit('open-site', this.portal.slug);
+    },
+    openSettings() {
+      this.fetchPortalAndItsCategories();
+      this.navigateToPortalEdit();
+    },
+    onClickOpenDeleteModal(portal) {
+      this.selectedPortalForDelete = portal;
+      this.showDeleteConfirmationPopup = true;
+    },
+    closeDeletePopup() {
+      this.showDeleteConfirmationPopup = false;
+    },
+    async fetchPortalAndItsCategories() {
+      await this.$store.dispatch('portals/index');
+      const {
+        slug,
+        config: { allowed_locales: allowedLocales },
+      } = this.portal;
+      const selectedPortalParam = {
+        portalSlug: slug,
+        locale: allowedLocales[0].code,
+      };
+      this.$store.dispatch('portals/show', selectedPortalParam);
+      this.$store.dispatch('categories/index', selectedPortalParam);
+    },
+    async onClickDeletePortal() {
+      const { slug } = this.selectedPortalForDelete;
+      try {
+        await this.$store.dispatch('portals/delete', {
+          portalSlug: slug,
+        });
+        this.selectedPortalForDelete = {};
+        this.closeDeletePopup();
+        this.alertMessage = this.$t(
+          'HELP_CENTER.PORTAL.PORTAL_SETTINGS.DELETE_PORTAL.API.DELETE_SUCCESS'
+        );
+        this.updateUISettings({
+          last_active_portal_slug: undefined,
+          last_active_locale_code: undefined,
+        });
+      } catch (error) {
+        this.alertMessage =
+          error?.message ||
+          this.$t(
+            'HELP_CENTER.PORTAL.PORTAL_SETTINGS.DELETE_PORTAL.API.DELETE_ERROR'
+          );
+      } finally {
+        useAlert(this.alertMessage);
+      }
+    },
+    changeDefaultLocale({ localeCode }) {
+      this.updatePortalLocales({
+        allowedLocales: this.allowedLocales,
+        defaultLocale: localeCode,
+        successMessage: this.$t(
+          'HELP_CENTER.PORTAL.CHANGE_DEFAULT_LOCALE.API.SUCCESS_MESSAGE'
+        ),
+        errorMessage: this.$t(
+          'HELP_CENTER.PORTAL.CHANGE_DEFAULT_LOCALE.API.ERROR_MESSAGE'
+        ),
+      });
+      this.$track(PORTALS_EVENTS.SET_DEFAULT_LOCALE, {
+        newLocale: localeCode,
+        from: this.$route.name,
+      });
+    },
+    deletePortalLocale({ localeCode }) {
+      const updatedLocales = this.allowedLocales.filter(
+        code => code !== localeCode
+      );
+      const defaultLocale = this.portal.meta.default_locale;
+      this.updatePortalLocales({
+        allowedLocales: updatedLocales,
+        defaultLocale,
+        successMessage: this.$t(
+          'HELP_CENTER.PORTAL.DELETE_LOCALE.API.SUCCESS_MESSAGE'
+        ),
+        errorMessage: this.$t(
+          'HELP_CENTER.PORTAL.DELETE_LOCALE.API.ERROR_MESSAGE'
+        ),
+      });
+      this.$track(PORTALS_EVENTS.DELETE_LOCALE, {
+        deletedLocale: localeCode,
+        from: this.$route.name,
+      });
+    },
+    async updatePortalLocales({
+      allowedLocales,
+      defaultLocale,
+      successMessage,
+      errorMessage,
+    }) {
+      try {
+        await this.$store.dispatch('portals/update', {
+          portalSlug: this.portal.slug,
+          config: {
+            default_locale: defaultLocale,
+            allowed_locales: allowedLocales,
+          },
+        });
+        this.alertMessage = successMessage;
+      } catch (error) {
+        this.alertMessage = error?.message || errorMessage;
+      } finally {
+        useAlert(this.alertMessage);
+      }
+    },
+    navigateToPortalEdit() {
+      this.$router.push({
+        name: 'edit_portal_information',
+        params: { portalSlug: this.portal.slug },
+      });
+    },
+  },
+};
+</script>
+
 <template>
   <div>
     <div
@@ -188,190 +375,3 @@
     />
   </div>
 </template>
-
-<script>
-import { useAlert } from 'dashboard/composables';
-import { useUISettings } from 'dashboard/composables/useUISettings';
-import thumbnail from 'dashboard/components/widgets/Thumbnail.vue';
-import LocaleItemTable from './PortalListItemTable.vue';
-import { PORTALS_EVENTS } from '../../../../helper/AnalyticsHelper/events';
-
-export default {
-  components: {
-    thumbnail,
-    LocaleItemTable,
-  },
-  props: {
-    portal: {
-      type: Object,
-      default: () => {},
-    },
-    status: {
-      type: String,
-      default: '',
-      values: ['archived', 'draft', 'published'],
-    },
-  },
-  setup() {
-    const { updateUISettings } = useUISettings();
-
-    return {
-      updateUISettings,
-    };
-  },
-  data() {
-    return {
-      showDeleteConfirmationPopup: false,
-      alertMessage: '',
-      selectedPortalForDelete: {},
-    };
-  },
-  computed: {
-    labelColor() {
-      switch (this.status) {
-        case 'Archived':
-          return 'warning';
-        default:
-          return 'success';
-      }
-    },
-    deleteMessageValue() {
-      return ` ${this.selectedPortalForDelete.name}?`;
-    },
-    locales() {
-      return this.portal ? this.portal.config.allowed_locales : [];
-    },
-    allowedLocales() {
-      return Object.keys(this.locales).map(key => {
-        return this.locales[key].code;
-      });
-    },
-    articleCount() {
-      const { allowed_locales: allowedLocales } = this.portal.config;
-      return allowedLocales.reduce((acc, locale) => {
-        return acc + locale.articles_count;
-      }, 0);
-    },
-  },
-  methods: {
-    addLocale() {
-      this.$emit('add-locale', this.portal.id);
-    },
-    openSite() {
-      this.$emit('open-site', this.portal.slug);
-    },
-    openSettings() {
-      this.fetchPortalAndItsCategories();
-      this.navigateToPortalEdit();
-    },
-    onClickOpenDeleteModal(portal) {
-      this.selectedPortalForDelete = portal;
-      this.showDeleteConfirmationPopup = true;
-    },
-    closeDeletePopup() {
-      this.showDeleteConfirmationPopup = false;
-    },
-    async fetchPortalAndItsCategories() {
-      await this.$store.dispatch('portals/index');
-      const {
-        slug,
-        config: { allowed_locales: allowedLocales },
-      } = this.portal;
-      const selectedPortalParam = {
-        portalSlug: slug,
-        locale: allowedLocales[0].code,
-      };
-      this.$store.dispatch('portals/show', selectedPortalParam);
-      this.$store.dispatch('categories/index', selectedPortalParam);
-    },
-    async onClickDeletePortal() {
-      const { slug } = this.selectedPortalForDelete;
-      try {
-        await this.$store.dispatch('portals/delete', {
-          portalSlug: slug,
-        });
-        this.selectedPortalForDelete = {};
-        this.closeDeletePopup();
-        this.alertMessage = this.$t(
-          'HELP_CENTER.PORTAL.PORTAL_SETTINGS.DELETE_PORTAL.API.DELETE_SUCCESS'
-        );
-        this.updateUISettings({
-          last_active_portal_slug: undefined,
-          last_active_locale_code: undefined,
-        });
-      } catch (error) {
-        this.alertMessage =
-          error?.message ||
-          this.$t(
-            'HELP_CENTER.PORTAL.PORTAL_SETTINGS.DELETE_PORTAL.API.DELETE_ERROR'
-          );
-      } finally {
-        useAlert(this.alertMessage);
-      }
-    },
-    changeDefaultLocale({ localeCode }) {
-      this.updatePortalLocales({
-        allowedLocales: this.allowedLocales,
-        defaultLocale: localeCode,
-        successMessage: this.$t(
-          'HELP_CENTER.PORTAL.CHANGE_DEFAULT_LOCALE.API.SUCCESS_MESSAGE'
-        ),
-        errorMessage: this.$t(
-          'HELP_CENTER.PORTAL.CHANGE_DEFAULT_LOCALE.API.ERROR_MESSAGE'
-        ),
-      });
-      this.$track(PORTALS_EVENTS.SET_DEFAULT_LOCALE, {
-        newLocale: localeCode,
-        from: this.$route.name,
-      });
-    },
-    deletePortalLocale({ localeCode }) {
-      const updatedLocales = this.allowedLocales.filter(
-        code => code !== localeCode
-      );
-      const defaultLocale = this.portal.meta.default_locale;
-      this.updatePortalLocales({
-        allowedLocales: updatedLocales,
-        defaultLocale,
-        successMessage: this.$t(
-          'HELP_CENTER.PORTAL.DELETE_LOCALE.API.SUCCESS_MESSAGE'
-        ),
-        errorMessage: this.$t(
-          'HELP_CENTER.PORTAL.DELETE_LOCALE.API.ERROR_MESSAGE'
-        ),
-      });
-      this.$track(PORTALS_EVENTS.DELETE_LOCALE, {
-        deletedLocale: localeCode,
-        from: this.$route.name,
-      });
-    },
-    async updatePortalLocales({
-      allowedLocales,
-      defaultLocale,
-      successMessage,
-      errorMessage,
-    }) {
-      try {
-        await this.$store.dispatch('portals/update', {
-          portalSlug: this.portal.slug,
-          config: {
-            default_locale: defaultLocale,
-            allowed_locales: allowedLocales,
-          },
-        });
-        this.alertMessage = successMessage;
-      } catch (error) {
-        this.alertMessage = error?.message || errorMessage;
-      } finally {
-        useAlert(this.alertMessage);
-      }
-    },
-    navigateToPortalEdit() {
-      this.$router.push({
-        name: 'edit_portal_information',
-        params: { portalSlug: this.portal.slug },
-      });
-    },
-  },
-};
-</script>
diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/components/PortalListItemTable.vue b/app/javascript/dashboard/routes/dashboard/helpcenter/components/PortalListItemTable.vue
index d07e14271..95ba8e827 100644
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/components/PortalListItemTable.vue
+++ b/app/javascript/dashboard/routes/dashboard/helpcenter/components/PortalListItemTable.vue
@@ -1,3 +1,29 @@
+<script>
+import portalMixin from '../mixins/portalMixin';
+export default {
+  mixins: [portalMixin],
+  props: {
+    locales: {
+      type: Array,
+      default: () => [],
+    },
+    selectedLocaleCode: {
+      type: String,
+      default: '',
+    },
+  },
+
+  methods: {
+    changeDefaultLocale(localeCode) {
+      this.$emit('change-default-locale', { localeCode });
+    },
+    deleteLocale(localeCode) {
+      this.$emit('delete', { localeCode });
+    },
+  },
+};
+</script>
+
 <template>
   <table>
     <thead>
@@ -95,32 +121,6 @@
   </table>
 </template>
 
-<script>
-import portalMixin from '../mixins/portalMixin';
-export default {
-  mixins: [portalMixin],
-  props: {
-    locales: {
-      type: Array,
-      default: () => [],
-    },
-    selectedLocaleCode: {
-      type: String,
-      default: '',
-    },
-  },
-
-  methods: {
-    changeDefaultLocale(localeCode) {
-      this.$emit('change-default-locale', { localeCode });
-    },
-    deleteLocale(localeCode) {
-      this.$emit('delete', { localeCode });
-    },
-  },
-};
-</script>
-
 <style lang="scss" scoped>
 table {
   thead tr th {
diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/components/PortalPopover.vue b/app/javascript/dashboard/routes/dashboard/helpcenter/components/PortalPopover.vue
index 3de2a6f52..c64486b1b 100644
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/components/PortalPopover.vue
+++ b/app/javascript/dashboard/routes/dashboard/helpcenter/components/PortalPopover.vue
@@ -1,3 +1,41 @@
+<script>
+import PortalSwitch from './PortalSwitch.vue';
+export default {
+  components: {
+    PortalSwitch,
+  },
+  props: {
+    portals: {
+      type: Array,
+      default: () => [],
+    },
+    activePortalSlug: {
+      type: String,
+      default: '',
+    },
+    activeLocale: {
+      type: String,
+      default: '',
+    },
+  },
+
+  methods: {
+    closePortalPopover() {
+      this.$emit('close-popover');
+    },
+    openPortalPage() {
+      this.closePortalPopover();
+      this.$router.push({
+        name: 'list_all_portals',
+      });
+    },
+    fetchPortalAndItsCategories() {
+      this.$emit('fetch-portal');
+    },
+  },
+};
+</script>
+
 <template>
   <div
     v-on-clickaway="closePortalPopover"
@@ -45,41 +83,3 @@
     </div>
   </div>
 </template>
-
-<script>
-import PortalSwitch from './PortalSwitch.vue';
-export default {
-  components: {
-    PortalSwitch,
-  },
-  props: {
-    portals: {
-      type: Array,
-      default: () => [],
-    },
-    activePortalSlug: {
-      type: String,
-      default: '',
-    },
-    activeLocale: {
-      type: String,
-      default: '',
-    },
-  },
-
-  methods: {
-    closePortalPopover() {
-      this.$emit('close-popover');
-    },
-    openPortalPage() {
-      this.closePortalPopover();
-      this.$router.push({
-        name: 'list_all_portals',
-      });
-    },
-    fetchPortalAndItsCategories() {
-      this.$emit('fetch-portal');
-    },
-  },
-};
-</script>
diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/components/PortalSwitch.vue b/app/javascript/dashboard/routes/dashboard/helpcenter/components/PortalSwitch.vue
index 1a6ab873a..7da232102 100644
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/components/PortalSwitch.vue
+++ b/app/javascript/dashboard/routes/dashboard/helpcenter/components/PortalSwitch.vue
@@ -1,3 +1,74 @@
+<script>
+import thumbnail from 'dashboard/components/widgets/Thumbnail.vue';
+import portalMixin from '../mixins/portalMixin';
+
+export default {
+  components: {
+    thumbnail,
+  },
+  mixins: [portalMixin],
+  props: {
+    portal: {
+      type: Object,
+      default: () => ({}),
+    },
+    active: {
+      type: Boolean,
+      default: false,
+    },
+    activePortalSlug: {
+      type: String,
+      default: '',
+    },
+    activeLocale: {
+      type: String,
+      default: '',
+    },
+  },
+  data() {
+    return {
+      selectedLocale: null,
+    };
+  },
+  computed: {
+    locales() {
+      return this.portal?.config?.allowed_locales;
+    },
+    articlesCount() {
+      const { allowed_locales: allowedLocales } = this.portal.config;
+      return allowedLocales.reduce((acc, locale) => {
+        return acc + locale.articles_count;
+      }, 0);
+    },
+  },
+  mounted() {
+    this.selectedLocale = this.locale || this.portal?.meta?.default_locale;
+  },
+  methods: {
+    onClick(event, code, portal) {
+      event.preventDefault();
+      this.$router.push({
+        name: 'list_all_locale_articles',
+        params: {
+          portalSlug: portal.slug,
+          locale: code,
+        },
+      });
+      this.$emit('fetch-portal');
+      this.$emit('open-portal-page');
+    },
+    isLocaleActive(code, slug) {
+      const isPortalActive = this.portal.slug === slug;
+      const isLocaleActive = this.activeLocale === code;
+      return isPortalActive && isLocaleActive;
+    },
+    isLocaleDefault(code) {
+      return this.portal?.meta?.default_locale === code;
+    },
+  },
+};
+</script>
+
 <template>
   <div class="portal" :class="{ active }">
     <thumbnail :username="portal.name" variant="square" />
@@ -70,77 +141,6 @@
   </div>
 </template>
 
-<script>
-import thumbnail from 'dashboard/components/widgets/Thumbnail.vue';
-import portalMixin from '../mixins/portalMixin';
-
-export default {
-  components: {
-    thumbnail,
-  },
-  mixins: [portalMixin],
-  props: {
-    portal: {
-      type: Object,
-      default: () => ({}),
-    },
-    active: {
-      type: Boolean,
-      default: false,
-    },
-    activePortalSlug: {
-      type: String,
-      default: '',
-    },
-    activeLocale: {
-      type: String,
-      default: '',
-    },
-  },
-  data() {
-    return {
-      selectedLocale: null,
-    };
-  },
-  computed: {
-    locales() {
-      return this.portal?.config?.allowed_locales;
-    },
-    articlesCount() {
-      const { allowed_locales: allowedLocales } = this.portal.config;
-      return allowedLocales.reduce((acc, locale) => {
-        return acc + locale.articles_count;
-      }, 0);
-    },
-  },
-  mounted() {
-    this.selectedLocale = this.locale || this.portal?.meta?.default_locale;
-  },
-  methods: {
-    onClick(event, code, portal) {
-      event.preventDefault();
-      this.$router.push({
-        name: 'list_all_locale_articles',
-        params: {
-          portalSlug: portal.slug,
-          locale: code,
-        },
-      });
-      this.$emit('fetch-portal');
-      this.$emit('open-portal-page');
-    },
-    isLocaleActive(code, slug) {
-      const isPortalActive = this.portal.slug === slug;
-      const isLocaleActive = this.activeLocale === code;
-      return isPortalActive && isLocaleActive;
-    },
-    isLocaleDefault(code) {
-      return this.portal?.meta?.default_locale === code;
-    },
-  },
-};
-</script>
-
 <style lang="scss" scoped>
 .portal {
   @apply bg-white dark:bg-slate-800 rounded-md p-4 relative flex mb-4 border border-solid border-slate-100 dark:border-slate-600;
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 f6aceedf5..4bb283c21 100644
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/components/Sidebar/Sidebar.vue
+++ b/app/javascript/dashboard/routes/dashboard/helpcenter/components/Sidebar/Sidebar.vue
@@ -1,42 +1,3 @@
-<template>
-  <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
-      :thumbnail-src="thumbnailSrc"
-      :header-title="headerTitle"
-      :sub-title="subTitle"
-      :portal-link="portalLink"
-      class="px-4"
-      @open-popover="openPortalPopover"
-    />
-    <transition-group
-      name="menu-list"
-      tag="ul"
-      class="py-2 px-4 list-none ml-0 mb-0"
-    >
-      <secondary-nav-item
-        v-for="menuItem in accessibleMenuItems"
-        :key="menuItem.toState"
-        :menu-item="menuItem"
-      />
-      <secondary-nav-item
-        v-for="menuItem in additionalSecondaryMenuItems"
-        :key="menuItem.key"
-        :menu-item="menuItem"
-        @open="onClickOpenAddCatogoryModal"
-      />
-      <p
-        v-if="!hasCategory"
-        key="empty-category-nessage"
-        class="p-1.5 px-4 text-slate-300"
-      >
-        {{ $t('SIDEBAR.HELP_CENTER.CATEGORY_EMPTY_MESSAGE') }}
-      </p>
-    </transition-group>
-  </div>
-</template>
-
 <script>
 import SecondaryNavItem from 'dashboard/components/layout/sidebarComponents/SecondaryNavItem.vue';
 import SidebarHeader from './SidebarHeader.vue';
@@ -100,3 +61,42 @@ export default {
   },
 };
 </script>
+
+<template>
+  <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
+      :thumbnail-src="thumbnailSrc"
+      :header-title="headerTitle"
+      :sub-title="subTitle"
+      :portal-link="portalLink"
+      class="px-4"
+      @open-popover="openPortalPopover"
+    />
+    <transition-group
+      name="menu-list"
+      tag="ul"
+      class="py-2 px-4 list-none ml-0 mb-0"
+    >
+      <secondary-nav-item
+        v-for="menuItem in accessibleMenuItems"
+        :key="menuItem.toState"
+        :menu-item="menuItem"
+      />
+      <secondary-nav-item
+        v-for="menuItem in additionalSecondaryMenuItems"
+        :key="menuItem.key"
+        :menu-item="menuItem"
+        @open="onClickOpenAddCatogoryModal"
+      />
+      <p
+        v-if="!hasCategory"
+        key="empty-category-nessage"
+        class="p-1.5 px-4 text-slate-300"
+      >
+        {{ $t('SIDEBAR.HELP_CENTER.CATEGORY_EMPTY_MESSAGE') }}
+      </p>
+    </transition-group>
+  </div>
+</template>
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 e3fe22b19..7ce46c01d 100644
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/components/Sidebar/SidebarHeader.vue
+++ b/app/javascript/dashboard/routes/dashboard/helpcenter/components/Sidebar/SidebarHeader.vue
@@ -1,3 +1,38 @@
+<script>
+import Thumbnail from 'dashboard/components/widgets/Thumbnail.vue';
+export default {
+  components: {
+    Thumbnail,
+  },
+  props: {
+    thumbnailSrc: {
+      type: String,
+      default: '',
+    },
+    headerTitle: {
+      type: String,
+      default: '',
+    },
+    subTitle: {
+      type: String,
+      default: '',
+    },
+    portalLink: {
+      type: String,
+      default: '',
+    },
+  },
+  methods: {
+    popoutHelpCenter() {
+      window.open(this.portalLink, '_blank');
+    },
+    openPortalPopover() {
+      this.$emit('open-popover');
+    },
+  },
+};
+</script>
+
 <template>
   <div
     class="flex h-16 items-center justify-between py-4 px-0 mb-1/4 border-b border-slate-50 dark:border-slate-700"
@@ -38,38 +73,3 @@
     </div>
   </div>
 </template>
-
-<script>
-import Thumbnail from 'dashboard/components/widgets/Thumbnail.vue';
-export default {
-  components: {
-    Thumbnail,
-  },
-  props: {
-    thumbnailSrc: {
-      type: String,
-      default: '',
-    },
-    headerTitle: {
-      type: String,
-      default: '',
-    },
-    subTitle: {
-      type: String,
-      default: '',
-    },
-    portalLink: {
-      type: String,
-      default: '',
-    },
-  },
-  methods: {
-    popoutHelpCenter() {
-      window.open(this.portalLink, '_blank');
-    },
-    openPortalPopover() {
-      this.$emit('open-popover');
-    },
-  },
-};
-</script>
diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/components/Sidebar/SidebarSearch.vue b/app/javascript/dashboard/routes/dashboard/helpcenter/components/Sidebar/SidebarSearch.vue
index 8af29af17..72e21bada 100644
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/components/Sidebar/SidebarSearch.vue
+++ b/app/javascript/dashboard/routes/dashboard/helpcenter/components/Sidebar/SidebarSearch.vue
@@ -1,17 +1,3 @@
-<template>
-  <div class="search-input--wrap">
-    <div class="search-icon--wrap">
-      <fluent-icon icon="search" size="18" class="search-icon" />
-    </div>
-    <input
-      v-model="searchValue"
-      class="search-input"
-      :placeholder="$t('HELP_CENTER.SIDEBAR.SEARCH.PLACEHOLDER')"
-      @input="onSearch"
-    />
-  </div>
-</template>
-
 <script>
 export default {
   data() {
@@ -27,6 +13,20 @@ export default {
 };
 </script>
 
+<template>
+  <div class="search-input--wrap">
+    <div class="search-icon--wrap">
+      <fluent-icon icon="search" size="18" class="search-icon" />
+    </div>
+    <input
+      v-model="searchValue"
+      class="search-input"
+      :placeholder="$t('HELP_CENTER.SIDEBAR.SEARCH.PLACEHOLDER')"
+      @input="onSearch"
+    />
+  </div>
+</template>
+
 <style lang="scss" scoped>
 .search-input--wrap {
   display: flex;
diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/components/UpgradePage.vue b/app/javascript/dashboard/routes/dashboard/helpcenter/components/UpgradePage.vue
index d16eb87e3..ef4dd2b27 100644
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/components/UpgradePage.vue
+++ b/app/javascript/dashboard/routes/dashboard/helpcenter/components/UpgradePage.vue
@@ -1,3 +1,66 @@
+<script>
+import { mapGetters } from 'vuex';
+import wootConstants from 'dashboard/constants/globals';
+export default {
+  data() {
+    return {
+      helpCenterDocsURL: wootConstants.HELP_CENTER_DOCS_URL,
+      upgradeFeature: [
+        {
+          key: 1,
+          title: this.$t('HELP_CENTER.UPGRADE_PAGE.FEATURES.PORTALS.TITLE'),
+          icon: 'book-copy',
+          description: this.$t(
+            'HELP_CENTER.UPGRADE_PAGE.FEATURES.PORTALS.DESCRIPTION'
+          ),
+        },
+        {
+          key: 2,
+          title: this.$t('HELP_CENTER.UPGRADE_PAGE.FEATURES.LOCALES.TITLE'),
+          icon: 'globe-line',
+          description: this.$t(
+            'HELP_CENTER.UPGRADE_PAGE.FEATURES.LOCALES.DESCRIPTION'
+          ),
+        },
+        {
+          key: 3,
+          title: this.$t('HELP_CENTER.UPGRADE_PAGE.FEATURES.SEO.TITLE'),
+          icon: 'heart-handshake',
+          description: this.$t(
+            'HELP_CENTER.UPGRADE_PAGE.FEATURES.SEO.DESCRIPTION'
+          ),
+        },
+        {
+          key: 4,
+          title: this.$t('HELP_CENTER.UPGRADE_PAGE.FEATURES.API.TITLE'),
+          icon: 'search-check',
+          description: this.$t(
+            'HELP_CENTER.UPGRADE_PAGE.FEATURES.API.DESCRIPTION'
+          ),
+        },
+      ],
+    };
+  },
+  computed: {
+    ...mapGetters({
+      accountId: 'getCurrentAccountId',
+      isOnChatwootCloud: 'globalConfig/isOnChatwootCloud', // Pending change text
+    }),
+  },
+  methods: {
+    openBillingPage() {
+      this.$router.push({
+        name: 'billing_settings_index',
+        params: { accountId: this.accountId },
+      });
+    },
+    openHelpCenterDocs() {
+      window.open(this.helpCenterDocsURL, '_blank');
+    },
+  },
+};
+</script>
+
 <template>
   <div
     class="flex flex-col gap-12 sm:gap-16 items-center justify-center py-0 px-4 md:px-0 w-full h-full max-w-full overflow-auto bg-white dark:bg-slate-900"
@@ -70,66 +133,3 @@
     </div>
   </div>
 </template>
-
-<script>
-import { mapGetters } from 'vuex';
-import wootConstants from 'dashboard/constants/globals';
-export default {
-  data() {
-    return {
-      helpCenterDocsURL: wootConstants.HELP_CENTER_DOCS_URL,
-      upgradeFeature: [
-        {
-          key: 1,
-          title: this.$t('HELP_CENTER.UPGRADE_PAGE.FEATURES.PORTALS.TITLE'),
-          icon: 'book-copy',
-          description: this.$t(
-            'HELP_CENTER.UPGRADE_PAGE.FEATURES.PORTALS.DESCRIPTION'
-          ),
-        },
-        {
-          key: 2,
-          title: this.$t('HELP_CENTER.UPGRADE_PAGE.FEATURES.LOCALES.TITLE'),
-          icon: 'globe-line',
-          description: this.$t(
-            'HELP_CENTER.UPGRADE_PAGE.FEATURES.LOCALES.DESCRIPTION'
-          ),
-        },
-        {
-          key: 3,
-          title: this.$t('HELP_CENTER.UPGRADE_PAGE.FEATURES.SEO.TITLE'),
-          icon: 'heart-handshake',
-          description: this.$t(
-            'HELP_CENTER.UPGRADE_PAGE.FEATURES.SEO.DESCRIPTION'
-          ),
-        },
-        {
-          key: 4,
-          title: this.$t('HELP_CENTER.UPGRADE_PAGE.FEATURES.API.TITLE'),
-          icon: 'search-check',
-          description: this.$t(
-            'HELP_CENTER.UPGRADE_PAGE.FEATURES.API.DESCRIPTION'
-          ),
-        },
-      ],
-    };
-  },
-  computed: {
-    ...mapGetters({
-      accountId: 'getCurrentAccountId',
-      isOnChatwootCloud: 'globalConfig/isOnChatwootCloud', // Pending change text
-    }),
-  },
-  methods: {
-    openBillingPage() {
-      this.$router.push({
-        name: 'billing_settings_index',
-        params: { accountId: this.accountId },
-      });
-    },
-    openHelpCenterDocs() {
-      window.open(this.helpCenterDocsURL, '_blank');
-    },
-  },
-};
-</script>
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 34df7812f..621833138 100644
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/pages/articles/ArticleSettings.vue
+++ b/app/javascript/dashboard/routes/dashboard/helpcenter/pages/articles/ArticleSettings.vue
@@ -1,3 +1,124 @@
+<script>
+import MultiselectDropdown from 'shared/components/ui/MultiselectDropdown.vue';
+import { mapGetters } from 'vuex';
+import { debounce } from '@chatwoot/utils';
+import { isEmptyObject } from 'dashboard/helper/commons.js';
+export default {
+  components: {
+    MultiselectDropdown,
+  },
+  props: {
+    article: {
+      type: Object,
+      default: () => ({}),
+    },
+  },
+  data() {
+    return {
+      metaTitle: '',
+      metaDescription: '',
+      metaTags: [],
+      metaOptions: [],
+      tagInputValue: '',
+    };
+  },
+  computed: {
+    ...mapGetters({
+      categories: 'categories/allCategories',
+      agents: 'agents/getAgents',
+    }),
+    assignedAuthor() {
+      return this.article?.author;
+    },
+    selectedCategory() {
+      return this.article?.category;
+    },
+    allTags() {
+      return this.metaTags.map(item => item.name);
+    },
+  },
+  watch: {
+    article: {
+      handler() {
+        if (!isEmptyObject(this.article.meta || {})) {
+          const {
+            meta: { title = '', description = '', tags = [] },
+          } = this.article;
+          this.metaTitle = title;
+          this.metaDescription = description;
+          this.metaTags = this.formattedTags({ tags });
+        }
+      },
+      deep: true,
+      immediate: true,
+    },
+  },
+  mounted() {
+    this.saveArticle = debounce(
+      () => {
+        this.$emit('save-article', {
+          meta: {
+            title: this.metaTitle,
+            description: this.metaDescription,
+            tags: this.allTags,
+          },
+        });
+      },
+      1000,
+      false
+    );
+  },
+  methods: {
+    formattedTags({ tags }) {
+      return tags.map(tag => ({
+        name: tag,
+      }));
+    },
+    addTagValue(tagValue) {
+      const tags = tagValue
+        .split(',')
+        .map(tag => tag.trim())
+        .filter(tag => tag && !this.allTags.includes(tag));
+
+      this.metaTags.push(...this.formattedTags({ tags: [...new Set(tags)] }));
+      this.saveArticle();
+    },
+    removeTag() {
+      this.saveArticle();
+    },
+    handleSearchChange(value) {
+      this.tagInputValue = value;
+    },
+    onBlur() {
+      if (this.tagInputValue) {
+        this.addTagValue(this.tagInputValue);
+      }
+    },
+    onClickSelectCategory({ id }) {
+      this.$emit('save-article', { category_id: id });
+    },
+    onClickAssignAuthor({ id }) {
+      this.$emit('save-article', { author_id: id });
+      this.updateMeta();
+    },
+    onChangeMetaInput() {
+      this.saveArticle();
+    },
+    onClickArchiveArticle() {
+      this.$emit('archive-article');
+      this.updateMeta();
+    },
+    onClickDeleteArticle() {
+      this.$emit('delete-article');
+      this.updateMeta();
+    },
+    updateMeta() {
+      this.$emit('update-meta');
+    },
+  },
+};
+</script>
+
 <template>
   <transition name="popover-animation">
     <div
@@ -122,127 +243,6 @@
   </transition>
 </template>
 
-<script>
-import MultiselectDropdown from 'shared/components/ui/MultiselectDropdown.vue';
-import { mapGetters } from 'vuex';
-import { debounce } from '@chatwoot/utils';
-import { isEmptyObject } from 'dashboard/helper/commons.js';
-export default {
-  components: {
-    MultiselectDropdown,
-  },
-  props: {
-    article: {
-      type: Object,
-      default: () => ({}),
-    },
-  },
-  data() {
-    return {
-      metaTitle: '',
-      metaDescription: '',
-      metaTags: [],
-      metaOptions: [],
-      tagInputValue: '',
-    };
-  },
-  computed: {
-    ...mapGetters({
-      categories: 'categories/allCategories',
-      agents: 'agents/getAgents',
-    }),
-    assignedAuthor() {
-      return this.article?.author;
-    },
-    selectedCategory() {
-      return this.article?.category;
-    },
-    allTags() {
-      return this.metaTags.map(item => item.name);
-    },
-  },
-  watch: {
-    article: {
-      handler() {
-        if (!isEmptyObject(this.article.meta || {})) {
-          const {
-            meta: { title = '', description = '', tags = [] },
-          } = this.article;
-          this.metaTitle = title;
-          this.metaDescription = description;
-          this.metaTags = this.formattedTags({ tags });
-        }
-      },
-      deep: true,
-      immediate: true,
-    },
-  },
-  mounted() {
-    this.saveArticle = debounce(
-      () => {
-        this.$emit('save-article', {
-          meta: {
-            title: this.metaTitle,
-            description: this.metaDescription,
-            tags: this.allTags,
-          },
-        });
-      },
-      1000,
-      false
-    );
-  },
-  methods: {
-    formattedTags({ tags }) {
-      return tags.map(tag => ({
-        name: tag,
-      }));
-    },
-    addTagValue(tagValue) {
-      const tags = tagValue
-        .split(',')
-        .map(tag => tag.trim())
-        .filter(tag => tag && !this.allTags.includes(tag));
-
-      this.metaTags.push(...this.formattedTags({ tags: [...new Set(tags)] }));
-      this.saveArticle();
-    },
-    removeTag() {
-      this.saveArticle();
-    },
-    handleSearchChange(value) {
-      this.tagInputValue = value;
-    },
-    onBlur() {
-      if (this.tagInputValue) {
-        this.addTagValue(this.tagInputValue);
-      }
-    },
-    onClickSelectCategory({ id }) {
-      this.$emit('save-article', { category_id: id });
-    },
-    onClickAssignAuthor({ id }) {
-      this.$emit('save-article', { author_id: id });
-      this.updateMeta();
-    },
-    onChangeMetaInput() {
-      this.saveArticle();
-    },
-    onClickArchiveArticle() {
-      this.$emit('archive-article');
-      this.updateMeta();
-    },
-    onClickDeleteArticle() {
-      this.$emit('delete-article');
-      this.updateMeta();
-    },
-    updateMeta() {
-      this.$emit('update-meta');
-    },
-  },
-};
-</script>
-
 <style lang="scss" scoped>
 ::v-deep {
   .multiselect {
diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/pages/articles/DefaultPortalArticles.vue b/app/javascript/dashboard/routes/dashboard/helpcenter/pages/articles/DefaultPortalArticles.vue
index 028d1d6e7..3011b5916 100644
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/pages/articles/DefaultPortalArticles.vue
+++ b/app/javascript/dashboard/routes/dashboard/helpcenter/pages/articles/DefaultPortalArticles.vue
@@ -1,11 +1,3 @@
-<template>
-  <div
-    class="flex items-center justify-center w-full text-slate-600 dark:text-slate-200"
-  >
-    Loading...
-  </div>
-</template>
-
 <script>
 import { mapGetters } from 'vuex';
 import { useUISettings } from 'dashboard/composables/useUISettings';
@@ -66,3 +58,11 @@ export default {
   },
 };
 </script>
+
+<template>
+  <div
+    class="flex items-center justify-center w-full text-slate-600 dark:text-slate-200"
+  >
+    Loading...
+  </div>
+</template>
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 962716a1d..a8f09b3e0 100644
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/pages/articles/EditArticle.vue
+++ b/app/javascript/dashboard/routes/dashboard/helpcenter/pages/articles/EditArticle.vue
@@ -1,51 +1,3 @@
-<template>
-  <div class="flex w-full overflow-auto article-container">
-    <div
-      class="flex-1 flex-shrink-0 px-6 overflow-auto"
-      :class="{ 'flex-grow-1 flex-shrink-0': showArticleSettings }"
-    >
-      <edit-article-header
-        :back-button-label="$t('HELP_CENTER.HEADER.TITLES.ALL_ARTICLES')"
-        :is-updating="isUpdating"
-        :is-saved="isSaved"
-        :is-sidebar-open="showArticleSettings"
-        @back="onClickGoBack"
-        @open="openArticleSettings"
-        @close="closeArticleSettings"
-        @show="showArticleInPortal"
-        @update-meta="updateMeta"
-      />
-      <div v-if="isFetching" class="h-full p-4 text-base text-center">
-        <spinner size="" />
-        <span>{{ $t('HELP_CENTER.EDIT_ARTICLE.LOADING') }}</span>
-      </div>
-      <article-editor
-        v-else
-        :is-settings-sidebar-open="showArticleSettings"
-        :article="article"
-        @save-article="saveArticle"
-      />
-    </div>
-    <article-settings
-      v-if="showArticleSettings"
-      :article="article"
-      @save-article="saveArticle"
-      @delete-article="openDeletePopup"
-      @archive-article="archiveArticle"
-      @update-meta="updateMeta"
-    />
-    <woot-delete-modal
-      :show.sync="showDeleteConfirmationPopup"
-      :on-close="closeDeletePopup"
-      :on-confirm="confirmDeletion"
-      :title="$t('HELP_CENTER.DELETE_ARTICLE.MODAL.CONFIRM.TITLE')"
-      :message="$t('HELP_CENTER.DELETE_ARTICLE.MODAL.CONFIRM.MESSAGE')"
-      :confirm-text="$t('HELP_CENTER.DELETE_ARTICLE.MODAL.CONFIRM.YES')"
-      :reject-text="$t('HELP_CENTER.DELETE_ARTICLE.MODAL.CONFIRM.NO')"
-    />
-  </div>
-</template>
-
 <script>
 import { mapGetters } from 'vuex';
 import { useAlert } from 'dashboard/composables';
@@ -215,3 +167,51 @@ export default {
   },
 };
 </script>
+
+<template>
+  <div class="flex w-full overflow-auto article-container">
+    <div
+      class="flex-1 flex-shrink-0 px-6 overflow-auto"
+      :class="{ 'flex-grow-1 flex-shrink-0': showArticleSettings }"
+    >
+      <edit-article-header
+        :back-button-label="$t('HELP_CENTER.HEADER.TITLES.ALL_ARTICLES')"
+        :is-updating="isUpdating"
+        :is-saved="isSaved"
+        :is-sidebar-open="showArticleSettings"
+        @back="onClickGoBack"
+        @open="openArticleSettings"
+        @close="closeArticleSettings"
+        @show="showArticleInPortal"
+        @update-meta="updateMeta"
+      />
+      <div v-if="isFetching" class="h-full p-4 text-base text-center">
+        <spinner size="" />
+        <span>{{ $t('HELP_CENTER.EDIT_ARTICLE.LOADING') }}</span>
+      </div>
+      <article-editor
+        v-else
+        :is-settings-sidebar-open="showArticleSettings"
+        :article="article"
+        @save-article="saveArticle"
+      />
+    </div>
+    <article-settings
+      v-if="showArticleSettings"
+      :article="article"
+      @save-article="saveArticle"
+      @delete-article="openDeletePopup"
+      @archive-article="archiveArticle"
+      @update-meta="updateMeta"
+    />
+    <woot-delete-modal
+      :show.sync="showDeleteConfirmationPopup"
+      :on-close="closeDeletePopup"
+      :on-confirm="confirmDeletion"
+      :title="$t('HELP_CENTER.DELETE_ARTICLE.MODAL.CONFIRM.TITLE')"
+      :message="$t('HELP_CENTER.DELETE_ARTICLE.MODAL.CONFIRM.MESSAGE')"
+      :confirm-text="$t('HELP_CENTER.DELETE_ARTICLE.MODAL.CONFIRM.YES')"
+      :reject-text="$t('HELP_CENTER.DELETE_ARTICLE.MODAL.CONFIRM.NO')"
+    />
+  </div>
+</template>
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 ff610e44e..151f9e583 100644
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/pages/articles/ListAllArticles.vue
+++ b/app/javascript/dashboard/routes/dashboard/helpcenter/pages/articles/ListAllArticles.vue
@@ -1,42 +1,3 @@
-<template>
-  <div
-    class="py-0 px-0 w-full max-w-full overflow-auto bg-white dark:bg-slate-900 flex flex-col"
-  >
-    <article-header
-      :header-title="headerTitle"
-      :count="meta.count"
-      :selected-locale="activeLocaleName"
-      :all-locales="allowedLocales"
-      selected-value="Published"
-      class="border-b border-slate-50 dark:border-slate-700"
-      @new-article-page="newArticlePage"
-      @change-locale="onChangeLocale"
-    />
-    <div
-      v-if="isFetching"
-      class="items-center flex text-base justify-center py-6 px-4 text-slate-600 dark:text-slate-200"
-    >
-      <spinner />
-      <span class="text-slate-600 dark:text-slate-200">
-        {{ $t('HELP_CENTER.TABLE.LOADING_MESSAGE') }}
-      </span>
-    </div>
-    <empty-state
-      v-else-if="shouldShowEmptyState"
-      :title="$t('HELP_CENTER.TABLE.NO_ARTICLES')"
-    />
-    <div v-else class="flex flex-1">
-      <article-table
-        :articles="articles"
-        :current-page="Number(meta.currentPage)"
-        :total-count="Number(meta.count)"
-        @page-change="onPageChange"
-        @reorder="onReorder"
-      />
-    </div>
-  </div>
-</template>
-
 <script>
 import { mapGetters } from 'vuex';
 import allLocales from 'shared/constants/locales.js';
@@ -193,3 +154,42 @@ export default {
   },
 };
 </script>
+
+<template>
+  <div
+    class="py-0 px-0 w-full max-w-full overflow-auto bg-white dark:bg-slate-900 flex flex-col"
+  >
+    <article-header
+      :header-title="headerTitle"
+      :count="meta.count"
+      :selected-locale="activeLocaleName"
+      :all-locales="allowedLocales"
+      selected-value="Published"
+      class="border-b border-slate-50 dark:border-slate-700"
+      @new-article-page="newArticlePage"
+      @change-locale="onChangeLocale"
+    />
+    <div
+      v-if="isFetching"
+      class="items-center flex text-base justify-center py-6 px-4 text-slate-600 dark:text-slate-200"
+    >
+      <spinner />
+      <span class="text-slate-600 dark:text-slate-200">
+        {{ $t('HELP_CENTER.TABLE.LOADING_MESSAGE') }}
+      </span>
+    </div>
+    <empty-state
+      v-else-if="shouldShowEmptyState"
+      :title="$t('HELP_CENTER.TABLE.NO_ARTICLES')"
+    />
+    <div v-else class="flex flex-1">
+      <article-table
+        :articles="articles"
+        :current-page="Number(meta.currentPage)"
+        :total-count="Number(meta.count)"
+        @page-change="onPageChange"
+        @reorder="onReorder"
+      />
+    </div>
+  </div>
+</template>
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 c39bfc779..127460ff9 100644
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/pages/articles/NewArticle.vue
+++ b/app/javascript/dashboard/routes/dashboard/helpcenter/pages/articles/NewArticle.vue
@@ -1,28 +1,3 @@
-<template>
-  <div class="flex flex-1 overflow-auto">
-    <div
-      class="flex-1 flex-shrink-0 px-6 overflow-y-auto"
-      :class="{ 'flex-grow-1': showArticleSettings }"
-    >
-      <edit-article-header
-        :back-button-label="$t('HELP_CENTER.HEADER.TITLES.ALL_ARTICLES')"
-        draft-state="saved"
-        :is-sidebar-open="showArticleSettings"
-        @back="onClickGoBack"
-        @open="openArticleSettings"
-        @close="closeArticleSettings"
-        @save-article="createNewArticle"
-      />
-      <article-editor :article="newArticle" @save-article="createNewArticle" />
-    </div>
-    <article-settings
-      v-if="showArticleSettings"
-      :article="article"
-      @save-article="saveArticle"
-    />
-  </div>
-</template>
-
 <script>
 import { mapGetters } from 'vuex';
 import { useAlert } from 'dashboard/composables';
@@ -117,3 +92,28 @@ export default {
   },
 };
 </script>
+
+<template>
+  <div class="flex flex-1 overflow-auto">
+    <div
+      class="flex-1 flex-shrink-0 px-6 overflow-y-auto"
+      :class="{ 'flex-grow-1': showArticleSettings }"
+    >
+      <edit-article-header
+        :back-button-label="$t('HELP_CENTER.HEADER.TITLES.ALL_ARTICLES')"
+        draft-state="saved"
+        :is-sidebar-open="showArticleSettings"
+        @back="onClickGoBack"
+        @open="openArticleSettings"
+        @close="closeArticleSettings"
+        @save-article="createNewArticle"
+      />
+      <article-editor :article="newArticle" @save-article="createNewArticle" />
+    </div>
+    <article-settings
+      v-if="showArticleSettings"
+      :article="article"
+      @save-article="saveArticle"
+    />
+  </div>
+</template>
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 f36f1bff0..53a969c79 100644
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/pages/categories/AddCategory.vue
+++ b/app/javascript/dashboard/routes/dashboard/helpcenter/pages/categories/AddCategory.vue
@@ -1,71 +1,3 @@
-<!-- eslint-disable vue/no-mutating-props -->
-<template>
-  <woot-modal :show.sync="show" :on-close="onClose">
-    <woot-modal-header
-      :header-title="$t('HELP_CENTER.CATEGORY.ADD.TITLE')"
-      :header-content="$t('HELP_CENTER.CATEGORY.ADD.SUB_TITLE')"
-    />
-    <form class="w-full" @submit.prevent="onCreate">
-      <div class="w-full">
-        <div class="flex flex-row w-full mx-0 mt-0 mb-4">
-          <div class="w-[50%]">
-            <label>
-              <span>{{ $t('HELP_CENTER.CATEGORY.ADD.PORTAL') }}</span>
-              <p class="text-slate-600 dark:text-slate-400">{{ portalName }}</p>
-            </label>
-          </div>
-          <div class="w-[50%]">
-            <label>
-              <span>{{ $t('HELP_CENTER.CATEGORY.ADD.LOCALE') }}</span>
-              <p class="text-slate-600 dark:text-slate-400">{{ locale }}</p>
-            </label>
-          </div>
-        </div>
-        <category-name-icon-input
-          :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')"
-          :has-error="v$.name.$error"
-          :error-message="$t('HELP_CENTER.CATEGORY.ADD.NAME.ERROR')"
-          @name-change="onNameChange"
-          @icon-change="onClickInsertEmoji"
-        />
-        <woot-input
-          v-model.trim="slug"
-          :class="{ error: v$.slug.$error }"
-          class="w-full"
-          :error="slugError"
-          :label="$t('HELP_CENTER.CATEGORY.ADD.SLUG.LABEL')"
-          :placeholder="$t('HELP_CENTER.CATEGORY.ADD.SLUG.PLACEHOLDER')"
-          :help-text="$t('HELP_CENTER.CATEGORY.ADD.SLUG.HELP_TEXT')"
-          @input="v$.slug.$touch"
-        />
-        <label>
-          {{ $t('HELP_CENTER.CATEGORY.ADD.DESCRIPTION.LABEL') }}
-          <textarea
-            v-model="description"
-            rows="3"
-            type="text"
-            :placeholder="
-              $t('HELP_CENTER.CATEGORY.ADD.DESCRIPTION.PLACEHOLDER')
-            "
-          />
-        </label>
-        <div class="w-full">
-          <div class="flex flex-row justify-end w-full gap-2 px-0 py-2">
-            <woot-button class="button clear" @click.prevent="onClose">
-              {{ $t('HELP_CENTER.CATEGORY.ADD.BUTTONS.CANCEL') }}
-            </woot-button>
-            <woot-button @click="addCategory">
-              {{ $t('HELP_CENTER.CATEGORY.ADD.BUTTONS.CREATE') }}
-            </woot-button>
-          </div>
-        </div>
-      </div>
-    </form>
-  </woot-modal>
-</template>
-
 <script>
 import { useVuelidate } from '@vuelidate/core';
 import { useAlert } from 'dashboard/composables';
@@ -178,6 +110,74 @@ export default {
   },
 };
 </script>
+
+<!-- eslint-disable vue/no-mutating-props -->
+<template>
+  <woot-modal :show.sync="show" :on-close="onClose">
+    <woot-modal-header
+      :header-title="$t('HELP_CENTER.CATEGORY.ADD.TITLE')"
+      :header-content="$t('HELP_CENTER.CATEGORY.ADD.SUB_TITLE')"
+    />
+    <form class="w-full" @submit.prevent="onCreate">
+      <div class="w-full">
+        <div class="flex flex-row w-full mx-0 mt-0 mb-4">
+          <div class="w-[50%]">
+            <label>
+              <span>{{ $t('HELP_CENTER.CATEGORY.ADD.PORTAL') }}</span>
+              <p class="text-slate-600 dark:text-slate-400">{{ portalName }}</p>
+            </label>
+          </div>
+          <div class="w-[50%]">
+            <label>
+              <span>{{ $t('HELP_CENTER.CATEGORY.ADD.LOCALE') }}</span>
+              <p class="text-slate-600 dark:text-slate-400">{{ locale }}</p>
+            </label>
+          </div>
+        </div>
+        <category-name-icon-input
+          :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')"
+          :has-error="v$.name.$error"
+          :error-message="$t('HELP_CENTER.CATEGORY.ADD.NAME.ERROR')"
+          @name-change="onNameChange"
+          @icon-change="onClickInsertEmoji"
+        />
+        <woot-input
+          v-model.trim="slug"
+          :class="{ error: v$.slug.$error }"
+          class="w-full"
+          :error="slugError"
+          :label="$t('HELP_CENTER.CATEGORY.ADD.SLUG.LABEL')"
+          :placeholder="$t('HELP_CENTER.CATEGORY.ADD.SLUG.PLACEHOLDER')"
+          :help-text="$t('HELP_CENTER.CATEGORY.ADD.SLUG.HELP_TEXT')"
+          @input="v$.slug.$touch"
+        />
+        <label>
+          {{ $t('HELP_CENTER.CATEGORY.ADD.DESCRIPTION.LABEL') }}
+          <textarea
+            v-model="description"
+            rows="3"
+            type="text"
+            :placeholder="
+              $t('HELP_CENTER.CATEGORY.ADD.DESCRIPTION.PLACEHOLDER')
+            "
+          />
+        </label>
+        <div class="w-full">
+          <div class="flex flex-row justify-end w-full gap-2 px-0 py-2">
+            <woot-button class="button clear" @click.prevent="onClose">
+              {{ $t('HELP_CENTER.CATEGORY.ADD.BUTTONS.CANCEL') }}
+            </woot-button>
+            <woot-button @click="addCategory">
+              {{ $t('HELP_CENTER.CATEGORY.ADD.BUTTONS.CREATE') }}
+            </woot-button>
+          </div>
+        </div>
+      </div>
+    </form>
+  </woot-modal>
+</template>
 <style scoped lang="scss">
 .input-container::v-deep {
   @apply mt-0 mb-4 mx-0;
diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/pages/categories/CategoryListItem.vue b/app/javascript/dashboard/routes/dashboard/helpcenter/pages/categories/CategoryListItem.vue
index 1e9886510..0e9317dd7 100644
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/pages/categories/CategoryListItem.vue
+++ b/app/javascript/dashboard/routes/dashboard/helpcenter/pages/categories/CategoryListItem.vue
@@ -1,3 +1,23 @@
+<script>
+export default {
+  props: {
+    categories: {
+      type: Array,
+      default: () => [],
+    },
+  },
+
+  methods: {
+    editCategory(category) {
+      this.$emit('edit', category);
+    },
+    deleteCategory(category) {
+      this.$emit('delete', category);
+    },
+  },
+};
+</script>
+
 <template>
   <div>
     <table>
@@ -73,26 +93,6 @@
   </div>
 </template>
 
-<script>
-export default {
-  props: {
-    categories: {
-      type: Array,
-      default: () => [],
-    },
-  },
-
-  methods: {
-    editCategory(category) {
-      this.$emit('edit', category);
-    },
-    deleteCategory(category) {
-      this.$emit('delete', category);
-    },
-  },
-};
-</script>
-
 <style lang="scss" scoped>
 table {
   thead tr th {
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 1e9636bb1..c2fa0dd04 100644
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/pages/categories/EditCategory.vue
+++ b/app/javascript/dashboard/routes/dashboard/helpcenter/pages/categories/EditCategory.vue
@@ -1,73 +1,3 @@
-<!-- eslint-disable vue/no-mutating-props -->
-<template>
-  <woot-modal :show.sync="show" :on-close="onClose">
-    <woot-modal-header
-      :header-title="$t('HELP_CENTER.CATEGORY.EDIT.TITLE')"
-      :header-content="$t('HELP_CENTER.CATEGORY.EDIT.SUB_TITLE')"
-    />
-    <form class="w-full" @submit.prevent="onUpdate">
-      <div class="w-full">
-        <div class="flex flex-row w-full mx-0 mt-0 mb-4">
-          <div class="w-[50%]">
-            <label>
-              <span>{{ $t('HELP_CENTER.CATEGORY.EDIT.PORTAL') }}</span>
-              <p class="text-slate-600 dark:text-slate-400">{{ portalName }}</p>
-            </label>
-          </div>
-          <div class="w-[50%]">
-            <label>
-              <span>{{ $t('HELP_CENTER.CATEGORY.EDIT.LOCALE') }}</span>
-              <p class="text-slate-600 dark:text-slate-400">{{ locale }}</p>
-            </label>
-          </div>
-        </div>
-        <category-name-icon-input
-          :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')"
-          :has-error="v$.name.$error"
-          :error-message="$t('HELP_CENTER.CATEGORY.ADD.NAME.ERROR')"
-          :existing-name="category.name"
-          :saved-icon="category.icon"
-          @name-change="changeName"
-          @icon-change="onClickInsertEmoji"
-        />
-        <woot-input
-          v-model.trim="slug"
-          :class="{ error: v$.slug.$error }"
-          class="w-full"
-          :error="slugError"
-          :label="$t('HELP_CENTER.CATEGORY.EDIT.SLUG.LABEL')"
-          :placeholder="$t('HELP_CENTER.CATEGORY.EDIT.SLUG.PLACEHOLDER')"
-          :help-text="$t('HELP_CENTER.CATEGORY.EDIT.SLUG.HELP_TEXT')"
-          @input="v$.slug.$touch"
-        />
-        <label>
-          {{ $t('HELP_CENTER.CATEGORY.EDIT.DESCRIPTION.LABEL') }}
-          <textarea
-            v-model="description"
-            rows="3"
-            type="text"
-            :placeholder="
-              $t('HELP_CENTER.CATEGORY.EDIT.DESCRIPTION.PLACEHOLDER')
-            "
-          />
-        </label>
-        <div class="w-full">
-          <div class="flex flex-row justify-end w-full gap-2 px-0 py-2">
-            <woot-button class="button clear" @click.prevent="onClose">
-              {{ $t('HELP_CENTER.CATEGORY.EDIT.BUTTONS.CANCEL') }}
-            </woot-button>
-            <woot-button @click="editCategory">
-              {{ $t('HELP_CENTER.CATEGORY.EDIT.BUTTONS.CREATE') }}
-            </woot-button>
-          </div>
-        </div>
-      </div>
-    </form>
-  </woot-modal>
-</template>
-
 <script>
 import { useVuelidate } from '@vuelidate/core';
 import { useAlert } from 'dashboard/composables';
@@ -189,6 +119,76 @@ export default {
   },
 };
 </script>
+
+<!-- eslint-disable vue/no-mutating-props -->
+<template>
+  <woot-modal :show.sync="show" :on-close="onClose">
+    <woot-modal-header
+      :header-title="$t('HELP_CENTER.CATEGORY.EDIT.TITLE')"
+      :header-content="$t('HELP_CENTER.CATEGORY.EDIT.SUB_TITLE')"
+    />
+    <form class="w-full" @submit.prevent="onUpdate">
+      <div class="w-full">
+        <div class="flex flex-row w-full mx-0 mt-0 mb-4">
+          <div class="w-[50%]">
+            <label>
+              <span>{{ $t('HELP_CENTER.CATEGORY.EDIT.PORTAL') }}</span>
+              <p class="text-slate-600 dark:text-slate-400">{{ portalName }}</p>
+            </label>
+          </div>
+          <div class="w-[50%]">
+            <label>
+              <span>{{ $t('HELP_CENTER.CATEGORY.EDIT.LOCALE') }}</span>
+              <p class="text-slate-600 dark:text-slate-400">{{ locale }}</p>
+            </label>
+          </div>
+        </div>
+        <category-name-icon-input
+          :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')"
+          :has-error="v$.name.$error"
+          :error-message="$t('HELP_CENTER.CATEGORY.ADD.NAME.ERROR')"
+          :existing-name="category.name"
+          :saved-icon="category.icon"
+          @name-change="changeName"
+          @icon-change="onClickInsertEmoji"
+        />
+        <woot-input
+          v-model.trim="slug"
+          :class="{ error: v$.slug.$error }"
+          class="w-full"
+          :error="slugError"
+          :label="$t('HELP_CENTER.CATEGORY.EDIT.SLUG.LABEL')"
+          :placeholder="$t('HELP_CENTER.CATEGORY.EDIT.SLUG.PLACEHOLDER')"
+          :help-text="$t('HELP_CENTER.CATEGORY.EDIT.SLUG.HELP_TEXT')"
+          @input="v$.slug.$touch"
+        />
+        <label>
+          {{ $t('HELP_CENTER.CATEGORY.EDIT.DESCRIPTION.LABEL') }}
+          <textarea
+            v-model="description"
+            rows="3"
+            type="text"
+            :placeholder="
+              $t('HELP_CENTER.CATEGORY.EDIT.DESCRIPTION.PLACEHOLDER')
+            "
+          />
+        </label>
+        <div class="w-full">
+          <div class="flex flex-row justify-end w-full gap-2 px-0 py-2">
+            <woot-button class="button clear" @click.prevent="onClose">
+              {{ $t('HELP_CENTER.CATEGORY.EDIT.BUTTONS.CANCEL') }}
+            </woot-button>
+            <woot-button @click="editCategory">
+              {{ $t('HELP_CENTER.CATEGORY.EDIT.BUTTONS.CREATE') }}
+            </woot-button>
+          </div>
+        </div>
+      </div>
+    </form>
+  </woot-modal>
+</template>
 <style scoped lang="scss">
 .article-info {
   width: 100%;
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 2bbfaf391..3efe74d42 100644
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/pages/categories/NameEmojiInput.vue
+++ b/app/javascript/dashboard/routes/dashboard/helpcenter/pages/categories/NameEmojiInput.vue
@@ -1,40 +1,3 @@
-<template>
-  <div class="flex items-center relative">
-    <woot-button
-      variant="hollow"
-      class="absolute [&>span]:flex [&>span]:items-center [&>span]:justify-center z-10 top-[28px] h-[2.5rem] w-[2.45rem] !text-slate-400 dark:!text-slate-600 dark:!bg-slate-900 !p-0"
-      color-scheme="secondary"
-      @click="toggleEmojiPicker"
-    >
-      <span v-if="icon" v-dompurify-html="icon" class="text-lg" />
-      <fluent-icon
-        v-else
-        size="18"
-        icon="emoji-add"
-        type="outline"
-        class="text-slate-400 dark:text-slate-600"
-      />
-    </woot-button>
-    <woot-input
-      v-model="name"
-      :class="{ error: hasError }"
-      class="!mt-0 !mb-4 !mx-0 [&>input]:!mb-0 ltr:[&>input]:ml-12 rtl:[&>input]:mr-12 relative w-[calc(100%-3rem)] [&>p]:w-max"
-      :error="nameErrorMessage"
-      :label="label"
-      :placeholder="placeholder"
-      :help-text="helpText"
-      @input="onNameChange"
-    />
-    <emoji-input
-      v-if="showEmojiPicker"
-      v-on-clickaway="hideEmojiPicker"
-      class="left-0 top-16"
-      :show-remove-button="true"
-      :on-click="onClickInsertEmoji"
-    />
-  </div>
-</template>
-
 <script>
 const EmojiInput = () => import('shared/components/emoji/EmojiInput.vue');
 
@@ -113,6 +76,43 @@ export default {
 };
 </script>
 
+<template>
+  <div class="flex items-center relative">
+    <woot-button
+      variant="hollow"
+      class="absolute [&>span]:flex [&>span]:items-center [&>span]:justify-center z-10 top-[28px] h-[2.5rem] w-[2.45rem] !text-slate-400 dark:!text-slate-600 dark:!bg-slate-900 !p-0"
+      color-scheme="secondary"
+      @click="toggleEmojiPicker"
+    >
+      <span v-if="icon" v-dompurify-html="icon" class="text-lg" />
+      <fluent-icon
+        v-else
+        size="18"
+        icon="emoji-add"
+        type="outline"
+        class="text-slate-400 dark:text-slate-600"
+      />
+    </woot-button>
+    <woot-input
+      v-model="name"
+      :class="{ error: hasError }"
+      class="!mt-0 !mb-4 !mx-0 [&>input]:!mb-0 ltr:[&>input]:ml-12 rtl:[&>input]:mr-12 relative w-[calc(100%-3rem)] [&>p]:w-max"
+      :error="nameErrorMessage"
+      :label="label"
+      :placeholder="placeholder"
+      :help-text="helpText"
+      @input="onNameChange"
+    />
+    <emoji-input
+      v-if="showEmojiPicker"
+      v-on-clickaway="hideEmojiPicker"
+      class="left-0 top-16"
+      :show-remove-button="true"
+      :on-click="onClickInsertEmoji"
+    />
+  </div>
+</template>
+
 <style scoped lang="scss">
 .emoji-dialog::before {
   @apply hidden;
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 cbbb4cb15..9c079d131 100644
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/pages/portals/EditPortal.vue
+++ b/app/javascript/dashboard/routes/dashboard/helpcenter/pages/portals/EditPortal.vue
@@ -1,36 +1,3 @@
-<template>
-  <div class="wrapper">
-    <settings-header
-      button-route="new"
-      :header-title="$t('HELP_CENTER.PORTAL.EDIT.HEADER_TEXT')"
-      show-back-button
-      :back-button-label="
-        $t('HELP_CENTER.PORTAL.ADD.CREATE_FLOW_PAGE.BACK_BUTTON')
-      "
-      :show-new-button="false"
-    />
-    <div class="overflow-auto max-h-[96%]">
-      <setting-intro-banner :header-title="portalName">
-        <woot-tabs
-          :index="activeTabIndex"
-          :border="false"
-          @change="onTabChange"
-        >
-          <woot-tabs-item
-            v-for="tab in tabs"
-            :key="tab.key"
-            :name="tab.name"
-            :show-badge="false"
-          />
-        </woot-tabs>
-      </setting-intro-banner>
-      <div class="flex flex-wrap max-w-full px-8 py-4 my-auto">
-        <router-view />
-      </div>
-    </div>
-  </div>
-</template>
-
 <script>
 import { mapGetters } from 'vuex';
 import globalConfigMixin from 'shared/mixins/globalConfigMixin';
@@ -99,6 +66,39 @@ export default {
   },
 };
 </script>
+
+<template>
+  <div class="wrapper">
+    <settings-header
+      button-route="new"
+      :header-title="$t('HELP_CENTER.PORTAL.EDIT.HEADER_TEXT')"
+      show-back-button
+      :back-button-label="
+        $t('HELP_CENTER.PORTAL.ADD.CREATE_FLOW_PAGE.BACK_BUTTON')
+      "
+      :show-new-button="false"
+    />
+    <div class="overflow-auto max-h-[96%]">
+      <setting-intro-banner :header-title="portalName">
+        <woot-tabs
+          :index="activeTabIndex"
+          :border="false"
+          @change="onTabChange"
+        >
+          <woot-tabs-item
+            v-for="tab in tabs"
+            :key="tab.key"
+            :name="tab.name"
+            :show-badge="false"
+          />
+        </woot-tabs>
+      </setting-intro-banner>
+      <div class="flex flex-wrap max-w-full px-8 py-4 my-auto">
+        <router-view />
+      </div>
+    </div>
+  </div>
+</template>
 <style scoped lang="scss">
 .wrapper {
   flex: 1;
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 ecdd1dab0..dbd8316ea 100644
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/pages/portals/ListAllPortals.vue
+++ b/app/javascript/dashboard/routes/dashboard/helpcenter/pages/portals/ListAllPortals.vue
@@ -1,3 +1,56 @@
+<script>
+import { mapGetters } from 'vuex';
+import PortalListItem from '../../components/PortalListItem.vue';
+import Spinner from 'shared/components/Spinner.vue';
+import EmptyState from 'dashboard/components/widgets/EmptyState.vue';
+import AddLocale from '../../components/AddLocale.vue';
+import { buildPortalURL } from 'dashboard/helper/portalHelper';
+
+export default {
+  components: {
+    PortalListItem,
+    EmptyState,
+    Spinner,
+    AddLocale,
+  },
+  data() {
+    return {
+      isAddLocaleModalOpen: false,
+      selectedPortal: {},
+    };
+  },
+  computed: {
+    ...mapGetters({
+      portals: 'portals/allPortals',
+      meta: 'portals/getMeta',
+      isFetching: 'portals/isFetchingPortals',
+    }),
+    portalStatus() {
+      return this.archived ? 'Archived' : 'Live';
+    },
+    shouldShowEmptyState() {
+      return !this.isFetching && !this.portals.length;
+    },
+  },
+  methods: {
+    openPortal(portalSlug) {
+      window.open(buildPortalURL(portalSlug), '_blank');
+    },
+    addPortal() {
+      this.$router.push({ name: 'new_portal_information' });
+    },
+    closeAddLocaleModal() {
+      this.isAddLocaleModalOpen = false;
+      this.selectedPortal = {};
+    },
+    addLocale(portalId) {
+      this.isAddLocaleModalOpen = true;
+      this.selectedPortal = this.portals.find(portal => portal.id === portalId);
+    },
+  },
+};
+</script>
+
 <template>
   <div class="w-full max-w-full px-4 py-2">
     <div class="flex items-center justify-between h-12 mx-0 mt-0 mb-2">
@@ -51,56 +104,3 @@
     </woot-modal>
   </div>
 </template>
-
-<script>
-import { mapGetters } from 'vuex';
-import PortalListItem from '../../components/PortalListItem.vue';
-import Spinner from 'shared/components/Spinner.vue';
-import EmptyState from 'dashboard/components/widgets/EmptyState.vue';
-import AddLocale from '../../components/AddLocale.vue';
-import { buildPortalURL } from 'dashboard/helper/portalHelper';
-
-export default {
-  components: {
-    PortalListItem,
-    EmptyState,
-    Spinner,
-    AddLocale,
-  },
-  data() {
-    return {
-      isAddLocaleModalOpen: false,
-      selectedPortal: {},
-    };
-  },
-  computed: {
-    ...mapGetters({
-      portals: 'portals/allPortals',
-      meta: 'portals/getMeta',
-      isFetching: 'portals/isFetchingPortals',
-    }),
-    portalStatus() {
-      return this.archived ? 'Archived' : 'Live';
-    },
-    shouldShowEmptyState() {
-      return !this.isFetching && !this.portals.length;
-    },
-  },
-  methods: {
-    openPortal(portalSlug) {
-      window.open(buildPortalURL(portalSlug), '_blank');
-    },
-    addPortal() {
-      this.$router.push({ name: 'new_portal_information' });
-    },
-    closeAddLocaleModal() {
-      this.isAddLocaleModalOpen = false;
-      this.selectedPortal = {};
-    },
-    addLocale(portalId) {
-      this.isAddLocaleModalOpen = true;
-      this.selectedPortal = this.portals.find(portal => portal.id === portalId);
-    },
-  },
-};
-</script>
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 0222044bc..198122211 100644
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/pages/portals/NewPortal.vue
+++ b/app/javascript/dashboard/routes/dashboard/helpcenter/pages/portals/NewPortal.vue
@@ -1,31 +1,3 @@
-<template>
-  <section class="flex-1">
-    <settings-header
-      button-route="new"
-      :header-title="portalHeaderText"
-      show-back-button
-      :back-button-label="
-        $t('HELP_CENTER.PORTAL.ADD.CREATE_FLOW_PAGE.BACK_BUTTON')
-      "
-      :show-new-button="false"
-    />
-    <div
-      class="grid grid-cols-[20rem_1fr] w-full h-full overflow-auto rtl:pl-0 rtl:pr-4 bg-slate-50 dark:bg-slate-800 p-5"
-    >
-      <woot-wizard
-        class="hidden md:block"
-        :global-config="globalConfig"
-        :items="items"
-      />
-      <div
-        class="w-full p-5 bg-white border border-transparent border-solid rounded-md shadow-sm dark:bg-slate-900 dark:border-transparent"
-      >
-        <router-view />
-      </div>
-    </div>
-  </section>
-</template>
-
 <script>
 import { mapGetters } from 'vuex';
 import globalConfigMixin from 'shared/mixins/globalConfigMixin';
@@ -68,3 +40,31 @@ export default {
   },
 };
 </script>
+
+<template>
+  <section class="flex-1">
+    <settings-header
+      button-route="new"
+      :header-title="portalHeaderText"
+      show-back-button
+      :back-button-label="
+        $t('HELP_CENTER.PORTAL.ADD.CREATE_FLOW_PAGE.BACK_BUTTON')
+      "
+      :show-new-button="false"
+    />
+    <div
+      class="grid grid-cols-[20rem_1fr] w-full h-full overflow-auto rtl:pl-0 rtl:pr-4 bg-slate-50 dark:bg-slate-800 p-5"
+    >
+      <woot-wizard
+        class="hidden md:block"
+        :global-config="globalConfig"
+        :items="items"
+      />
+      <div
+        class="w-full p-5 bg-white border border-transparent border-solid rounded-md shadow-sm dark:bg-slate-900 dark:border-transparent"
+      >
+        <router-view />
+      </div>
+    </div>
+  </section>
+</template>
diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/pages/portals/PortalDetails.vue b/app/javascript/dashboard/routes/dashboard/helpcenter/pages/portals/PortalDetails.vue
index 7450a84ec..cf210a50a 100644
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/pages/portals/PortalDetails.vue
+++ b/app/javascript/dashboard/routes/dashboard/helpcenter/pages/portals/PortalDetails.vue
@@ -1,15 +1,3 @@
-<template>
-  <PortalSettingsBasicForm
-    :is-submitting="uiFlags.isCreating"
-    :submit-button-text="
-      $t(
-        'HELP_CENTER.PORTAL.ADD.CREATE_FLOW_PAGE.BASIC_SETTINGS_PAGE.CREATE_BASIC_SETTING_BUTTON'
-      )
-    "
-    @submit="createPortal"
-  />
-</template>
-
 <script>
 import { mapGetters } from 'vuex';
 import { useAlert } from 'dashboard/composables';
@@ -68,3 +56,15 @@ export default {
   },
 };
 </script>
+
+<template>
+  <PortalSettingsBasicForm
+    :is-submitting="uiFlags.isCreating"
+    :submit-button-text="
+      $t(
+        'HELP_CENTER.PORTAL.ADD.CREATE_FLOW_PAGE.BASIC_SETTINGS_PAGE.CREATE_BASIC_SETTING_BUTTON'
+      )
+    "
+    @submit="createPortal"
+  />
+</template>
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 3a3e77142..4bdc0e669 100644
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/pages/portals/PortalSettingsFinish.vue
+++ b/app/javascript/dashboard/routes/dashboard/helpcenter/pages/portals/PortalSettingsFinish.vue
@@ -1,3 +1,11 @@
+<script setup>
+import EmptyState from 'dashboard/components/widgets/EmptyState.vue';
+import { defineComponent } from 'vue';
+defineComponent({
+  name: 'PortalSettingsFinish',
+});
+</script>
+
 <template>
   <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"
@@ -21,11 +29,3 @@
     </empty-state>
   </div>
 </template>
-
-<script setup>
-import EmptyState from 'dashboard/components/widgets/EmptyState.vue';
-import { defineComponent } from 'vue';
-defineComponent({
-  name: 'PortalSettingsFinish',
-});
-</script>
diff --git a/app/javascript/dashboard/routes/dashboard/inbox/InboxEmptyState.vue b/app/javascript/dashboard/routes/dashboard/inbox/InboxEmptyState.vue
index 49ab0a709..a325ebbe1 100644
--- a/app/javascript/dashboard/routes/dashboard/inbox/InboxEmptyState.vue
+++ b/app/javascript/dashboard/routes/dashboard/inbox/InboxEmptyState.vue
@@ -1,21 +1,3 @@
-<template>
-  <div
-    class="text-center bg-slate-25 dark:bg-slate-800 justify-center w-full h-full hidden md:flex items-center"
-  >
-    <span v-if="uiFlags.isFetching" class="spinner my-4" />
-    <div v-else class="flex flex-col items-center gap-2">
-      <fluent-icon
-        icon="mail-inbox"
-        size="40"
-        class="text-slate-600 dark:text-slate-400"
-      />
-      <span class="text-slate-500 text-sm font-medium dark:text-slate-300">
-        {{ emptyMessage }}
-      </span>
-    </div>
-  </div>
-</template>
-
 <script>
 import { mapGetters } from 'vuex';
 export default {
@@ -38,3 +20,21 @@ export default {
   },
 };
 </script>
+
+<template>
+  <div
+    class="text-center bg-slate-25 dark:bg-slate-800 justify-center w-full h-full hidden md:flex items-center"
+  >
+    <span v-if="uiFlags.isFetching" class="spinner my-4" />
+    <div v-else class="flex flex-col items-center gap-2">
+      <fluent-icon
+        icon="mail-inbox"
+        size="40"
+        class="text-slate-600 dark:text-slate-400"
+      />
+      <span class="text-slate-500 text-sm font-medium dark:text-slate-300">
+        {{ emptyMessage }}
+      </span>
+    </div>
+  </div>
+</template>
diff --git a/app/javascript/dashboard/routes/dashboard/inbox/InboxList.vue b/app/javascript/dashboard/routes/dashboard/inbox/InboxList.vue
index 776275785..33eb71516 100644
--- a/app/javascript/dashboard/routes/dashboard/inbox/InboxList.vue
+++ b/app/javascript/dashboard/routes/dashboard/inbox/InboxList.vue
@@ -1,49 +1,3 @@
-<template>
-  <section class="flex w-full h-full bg-white dark:bg-slate-900">
-    <div
-      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
-        :is-context-menu-open="isInboxContextMenuOpen"
-        @filter="onFilterChange"
-        @redirect="redirectToInbox"
-      />
-      <div
-        ref="notificationList"
-        class="flex flex-col w-full h-[calc(100%-56px)] overflow-x-hidden overflow-y-auto"
-      >
-        <inbox-card
-          v-for="notificationItem in notifications"
-          :key="notificationItem.id"
-          :active="currentNotificationId === notificationItem.id"
-          :notification-item="notificationItem"
-          @mark-notification-as-read="markNotificationAsRead"
-          @mark-notification-as-unread="markNotificationAsUnRead"
-          @delete-notification="deleteNotification"
-          @context-menu-open="isInboxContextMenuOpen = true"
-          @context-menu-close="isInboxContextMenuOpen = false"
-        />
-        <div v-if="uiFlags.isFetching" class="text-center">
-          <span class="mt-4 mb-4 spinner" />
-        </div>
-        <p
-          v-if="showEmptyState"
-          class="p-4 text-sm font-medium text-center text-slate-400 dark:text-slate-400"
-        >
-          {{ $t('INBOX.LIST.NO_NOTIFICATIONS') }}
-        </p>
-        <intersection-observer
-          v-if="!showEndOfList && !uiFlags.isFetching"
-          :options="infiniteLoaderOptions"
-          @observed="loadMoreNotifications"
-        />
-      </div>
-    </div>
-    <router-view />
-  </section>
-</template>
-
 <script>
 import { mapGetters } from 'vuex';
 import { useAlert } from 'dashboard/composables';
@@ -212,3 +166,49 @@ export default {
   },
 };
 </script>
+
+<template>
+  <section class="flex w-full h-full bg-white dark:bg-slate-900">
+    <div
+      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
+        :is-context-menu-open="isInboxContextMenuOpen"
+        @filter="onFilterChange"
+        @redirect="redirectToInbox"
+      />
+      <div
+        ref="notificationList"
+        class="flex flex-col w-full h-[calc(100%-56px)] overflow-x-hidden overflow-y-auto"
+      >
+        <inbox-card
+          v-for="notificationItem in notifications"
+          :key="notificationItem.id"
+          :active="currentNotificationId === notificationItem.id"
+          :notification-item="notificationItem"
+          @mark-notification-as-read="markNotificationAsRead"
+          @mark-notification-as-unread="markNotificationAsUnRead"
+          @delete-notification="deleteNotification"
+          @context-menu-open="isInboxContextMenuOpen = true"
+          @context-menu-close="isInboxContextMenuOpen = false"
+        />
+        <div v-if="uiFlags.isFetching" class="text-center">
+          <span class="mt-4 mb-4 spinner" />
+        </div>
+        <p
+          v-if="showEmptyState"
+          class="p-4 text-sm font-medium text-center text-slate-400 dark:text-slate-400"
+        >
+          {{ $t('INBOX.LIST.NO_NOTIFICATIONS') }}
+        </p>
+        <intersection-observer
+          v-if="!showEndOfList && !uiFlags.isFetching"
+          :options="infiniteLoaderOptions"
+          @observed="loadMoreNotifications"
+        />
+      </div>
+    </div>
+    <router-view />
+  </section>
+</template>
diff --git a/app/javascript/dashboard/routes/dashboard/inbox/InboxView.vue b/app/javascript/dashboard/routes/dashboard/inbox/InboxView.vue
index 111ee733f..d0628f846 100644
--- a/app/javascript/dashboard/routes/dashboard/inbox/InboxView.vue
+++ b/app/javascript/dashboard/routes/dashboard/inbox/InboxView.vue
@@ -1,38 +1,3 @@
-<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
-        :empty-state-message="$t('INBOX.LIST.NO_MESSAGES_AVAILABLE')"
-      />
-    </div>
-    <div v-else class="flex flex-col w-full h-full">
-      <inbox-item-header
-        class="flex-1"
-        :total-length="totalNotificationCount"
-        :current-index="activeNotificationIndex"
-        :active-notification="activeNotification"
-        @next="onClickNext"
-        @prev="onClickPrev"
-      />
-      <div
-        v-if="isConversationLoading"
-        class="flex items-center h-[calc(100%-56px)] justify-center bg-slate-25 dark:bg-slate-800"
-      >
-        <span class="my-4 spinner" />
-      </div>
-      <conversation-box
-        v-else
-        class="h-[calc(100%-56px)]"
-        is-inbox-view
-        :inbox-id="inboxId"
-        :is-contact-panel-open="isContactPanelOpen"
-        :is-on-expanded-layout="false"
-        @contact-panel-toggle="onToggleContactPanel"
-      />
-    </div>
-  </div>
-</template>
-
 <script>
 import { mapGetters } from 'vuex';
 import InboxItemHeader from './components/InboxItemHeader.vue';
@@ -207,3 +172,38 @@ export default {
   },
 };
 </script>
+
+<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
+        :empty-state-message="$t('INBOX.LIST.NO_MESSAGES_AVAILABLE')"
+      />
+    </div>
+    <div v-else class="flex flex-col w-full h-full">
+      <inbox-item-header
+        class="flex-1"
+        :total-length="totalNotificationCount"
+        :current-index="activeNotificationIndex"
+        :active-notification="activeNotification"
+        @next="onClickNext"
+        @prev="onClickPrev"
+      />
+      <div
+        v-if="isConversationLoading"
+        class="flex items-center h-[calc(100%-56px)] justify-center bg-slate-25 dark:bg-slate-800"
+      >
+        <span class="my-4 spinner" />
+      </div>
+      <conversation-box
+        v-else
+        class="h-[calc(100%-56px)]"
+        is-inbox-view
+        :inbox-id="inboxId"
+        :is-contact-panel-open="isContactPanelOpen"
+        :is-on-expanded-layout="false"
+        @contact-panel-toggle="onToggleContactPanel"
+      />
+    </div>
+  </div>
+</template>
diff --git a/app/javascript/dashboard/routes/dashboard/inbox/components/InboxCard.vue b/app/javascript/dashboard/routes/dashboard/inbox/components/InboxCard.vue
index e5fb100f5..df221885c 100644
--- a/app/javascript/dashboard/routes/dashboard/inbox/components/InboxCard.vue
+++ b/app/javascript/dashboard/routes/dashboard/inbox/components/InboxCard.vue
@@ -1,62 +1,3 @@
-<template>
-  <div
-    role="button"
-    class="flex flex-col ltr:pl-5 rtl:pl-3 rtl:pr-5 ltr:pr-3 gap-2.5 py-3 w-full border-b border-slate-50 dark:border-slate-800/50 hover:bg-slate-25 dark:hover:bg-slate-800 cursor-pointer"
-    :class="
-      active
-        ? 'bg-slate-25 dark:bg-slate-800 click-animation'
-        : 'bg-white dark:bg-slate-900'
-    "
-    @contextmenu="openContextMenu($event)"
-    @click="openConversation(notificationItem)"
-  >
-    <div class="relative flex items-center justify-between w-full">
-      <div
-        v-if="isUnread"
-        class="absolute ltr:-left-3.5 rtl:-right-3.5 flex w-2 h-2 rounded bg-woot-500 dark:bg-woot-500"
-      />
-      <InboxNameAndId :inbox="inbox" :conversation-id="primaryActor.id" />
-
-      <div class="flex gap-2">
-        <PriorityIcon :priority="primaryActor.priority" />
-        <StatusIcon :status="primaryActor.status" />
-      </div>
-    </div>
-
-    <div class="flex flex-row items-center justify-between w-full gap-2">
-      <Thumbnail
-        v-if="assigneeMeta"
-        :src="assigneeMeta.thumbnail"
-        :username="assigneeMeta.name"
-        size="16px"
-      />
-      <span
-        class="flex-1 overflow-hidden text-sm text-slate-800 dark:text-slate-50 text-ellipsis whitespace-nowrap"
-        :class="isUnread ? 'font-medium' : 'font-normal'"
-      >
-        {{ pushTitle }}
-      </span>
-      <span
-        class="text-xs font-medium text-slate-600 dark:text-slate-300 whitespace-nowrap"
-      >
-        {{ lastActivityAt }}
-      </span>
-    </div>
-    <div v-if="snoozedUntilTime" class="flex items-center">
-      <span class="text-xs font-medium text-woot-500 dark:text-woot-500">
-        {{ snoozedDisplayText }}
-      </span>
-    </div>
-    <inbox-context-menu
-      v-if="isContextMenuOpen"
-      :context-menu-position="contextMenuPosition"
-      :menu-items="menuItems"
-      @close="closeContextMenu"
-      @click="handleAction"
-    />
-  </div>
-</template>
-
 <script>
 import PriorityIcon from './PriorityIcon.vue';
 import StatusIcon from './StatusIcon.vue';
@@ -215,6 +156,65 @@ export default {
 };
 </script>
 
+<template>
+  <div
+    role="button"
+    class="flex flex-col ltr:pl-5 rtl:pl-3 rtl:pr-5 ltr:pr-3 gap-2.5 py-3 w-full border-b border-slate-50 dark:border-slate-800/50 hover:bg-slate-25 dark:hover:bg-slate-800 cursor-pointer"
+    :class="
+      active
+        ? 'bg-slate-25 dark:bg-slate-800 click-animation'
+        : 'bg-white dark:bg-slate-900'
+    "
+    @contextmenu="openContextMenu($event)"
+    @click="openConversation(notificationItem)"
+  >
+    <div class="relative flex items-center justify-between w-full">
+      <div
+        v-if="isUnread"
+        class="absolute ltr:-left-3.5 rtl:-right-3.5 flex w-2 h-2 rounded bg-woot-500 dark:bg-woot-500"
+      />
+      <InboxNameAndId :inbox="inbox" :conversation-id="primaryActor.id" />
+
+      <div class="flex gap-2">
+        <PriorityIcon :priority="primaryActor.priority" />
+        <StatusIcon :status="primaryActor.status" />
+      </div>
+    </div>
+
+    <div class="flex flex-row items-center justify-between w-full gap-2">
+      <Thumbnail
+        v-if="assigneeMeta"
+        :src="assigneeMeta.thumbnail"
+        :username="assigneeMeta.name"
+        size="16px"
+      />
+      <span
+        class="flex-1 overflow-hidden text-sm text-slate-800 dark:text-slate-50 text-ellipsis whitespace-nowrap"
+        :class="isUnread ? 'font-medium' : 'font-normal'"
+      >
+        {{ pushTitle }}
+      </span>
+      <span
+        class="text-xs font-medium text-slate-600 dark:text-slate-300 whitespace-nowrap"
+      >
+        {{ lastActivityAt }}
+      </span>
+    </div>
+    <div v-if="snoozedUntilTime" class="flex items-center">
+      <span class="text-xs font-medium text-woot-500 dark:text-woot-500">
+        {{ snoozedDisplayText }}
+      </span>
+    </div>
+    <inbox-context-menu
+      v-if="isContextMenuOpen"
+      :context-menu-position="contextMenuPosition"
+      :menu-items="menuItems"
+      @close="closeContextMenu"
+      @click="handleAction"
+    />
+  </div>
+</template>
+
 <style scoped>
 .click-animation {
   animation: click-animation 0.3s ease-in-out;
diff --git a/app/javascript/dashboard/routes/dashboard/inbox/components/InboxContextMenu.vue b/app/javascript/dashboard/routes/dashboard/inbox/components/InboxContextMenu.vue
index 50ebd3a5b..958c91604 100644
--- a/app/javascript/dashboard/routes/dashboard/inbox/components/InboxContextMenu.vue
+++ b/app/javascript/dashboard/routes/dashboard/inbox/components/InboxContextMenu.vue
@@ -1,22 +1,3 @@
-<template>
-  <woot-context-menu
-    :x="contextMenuPosition.x"
-    :y="contextMenuPosition.y"
-    @close="handleClose"
-  >
-    <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
-        v-for="item in menuItems"
-        :key="item.key"
-        :label="item.label"
-        @click="onMenuItemClick(item.key)"
-      />
-    </div>
-  </woot-context-menu>
-</template>
-
 <script>
 import MenuItem from './MenuItem.vue';
 export default {
@@ -44,3 +25,22 @@ export default {
   },
 };
 </script>
+
+<template>
+  <woot-context-menu
+    :x="contextMenuPosition.x"
+    :y="contextMenuPosition.y"
+    @close="handleClose"
+  >
+    <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
+        v-for="item in menuItems"
+        :key="item.key"
+        :label="item.label"
+        @click="onMenuItemClick(item.key)"
+      />
+    </div>
+  </woot-context-menu>
+</template>
diff --git a/app/javascript/dashboard/routes/dashboard/inbox/components/InboxDisplayMenu.vue b/app/javascript/dashboard/routes/dashboard/inbox/components/InboxDisplayMenu.vue
index e38a8fba9..4f9b855ca 100644
--- a/app/javascript/dashboard/routes/dashboard/inbox/components/InboxDisplayMenu.vue
+++ b/app/javascript/dashboard/routes/dashboard/inbox/components/InboxDisplayMenu.vue
@@ -1,101 +1,3 @@
-<template>
-  <div
-    class="flex flex-col bg-white z-50 dark:bg-slate-900 w-[170px] 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 items-center justify-between p-3 rounded-t-lg h-11">
-      <div class="flex gap-1.5">
-        <fluent-icon
-          icon="arrow-sort"
-          type="outline"
-          size="16"
-          class="text-slate-700 dark:text-slate-100"
-        />
-        <span class="text-xs font-medium text-slate-800 dark:text-slate-100">
-          {{ $t('INBOX.DISPLAY_MENU.SORT') }}
-        </span>
-      </div>
-      <div class="relative">
-        <div
-          role="button"
-          class="border h-5 flex gap-1 rounded-md items-center pr-1.5 pl-1 py-0.5 w-[70px] justify-between border-slate-100 dark:border-slate-700/50"
-          @click="openSortMenu"
-        >
-          <span class="text-xs font-medium text-slate-600 dark:text-slate-300">
-            {{ activeSortOption }}
-          </span>
-          <fluent-icon
-            icon="chevron-down"
-            size="12"
-            class="text-slate-600 dark:text-slate-200"
-          />
-        </div>
-        <div
-          v-if="showSortMenu"
-          class="absolute flex flex-col gap-0.5 bg-white z-60 dark:bg-slate-800 rounded-md p-0.5 top-0 w-[70px] border border-slate-100 dark:border-slate-700/50"
-        >
-          <div
-            v-for="option in sortOptions"
-            :key="option.key"
-            role="button"
-            class="flex rounded-[4px] h-5 w-full items-center justify-between p-0.5 gap-1"
-            :class="{
-              'bg-woot-50 dark:bg-woot-700/50': activeSort === option.key,
-            }"
-            @click.stop="onSortOptionClick(option)"
-          >
-            <span
-              class="text-xs font-medium hover:text-woot-600 dark:hover:text-woot-600"
-              :class="{
-                'text-woot-600 dark:text-woot-600': activeSort === option.key,
-                'text-slate-600 dark:text-slate-300': activeSort !== option.key,
-              }"
-            >
-              {{ option.name }}
-            </span>
-            <fluent-icon
-              v-if="activeSort === option.key"
-              icon="checkmark"
-              size="14"
-              class="text-woot-600 dark:text-woot-600"
-            />
-          </div>
-        </div>
-      </div>
-    </div>
-    <div>
-      <span
-        class="px-3 py-4 text-xs font-medium text-slate-400 dark:text-slate-400"
-      >
-        {{ $t('INBOX.DISPLAY_MENU.DISPLAY') }}
-      </span>
-      <div
-        class="flex flex-col divide-y divide-slate-100 dark:divide-slate-700/50"
-      >
-        <div
-          v-for="option in displayOptions"
-          :key="option.key"
-          class="flex items-center px-3 py-2 gap-1.5 h-9"
-        >
-          <input
-            :id="option.key"
-            type="checkbox"
-            :name="option.key"
-            :checked="option.selected"
-            class="m-0 border-[1.5px] shadow border-slate-200 dark:border-slate-600 appearance-none rounded-[4px] w-4 h-4 dark:bg-slate-800 focus:ring-1 focus:ring-slate-100 dark:focus:ring-slate-700 checked:bg-woot-600 dark:checked:bg-woot-600 after:content-[''] after:text-white checked:after:content-['✓'] after:flex after:items-center after:justify-center checked:border-t checked:border-woot-700 dark:checked:border-woot-300 checked:border-b-0 checked:border-r-0 checked:border-l-0 after:text-center after:text-xs after:font-bold after:relative after:-top-[1.5px]"
-            @change="updateDisplayOption(option)"
-          />
-          <label
-            :for="option.key"
-            class="text-xs font-medium text-slate-800 !ml-0 !mr-0 dark:text-slate-100"
-          >
-            {{ option.name }}
-          </label>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
 <script>
 import wootConstants from 'dashboard/constants/globals';
 import { useUISettings } from 'dashboard/composables/useUISettings';
@@ -203,3 +105,101 @@ export default {
   },
 };
 </script>
+
+<template>
+  <div
+    class="flex flex-col bg-white z-50 dark:bg-slate-900 w-[170px] 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 items-center justify-between p-3 rounded-t-lg h-11">
+      <div class="flex gap-1.5">
+        <fluent-icon
+          icon="arrow-sort"
+          type="outline"
+          size="16"
+          class="text-slate-700 dark:text-slate-100"
+        />
+        <span class="text-xs font-medium text-slate-800 dark:text-slate-100">
+          {{ $t('INBOX.DISPLAY_MENU.SORT') }}
+        </span>
+      </div>
+      <div class="relative">
+        <div
+          role="button"
+          class="border h-5 flex gap-1 rounded-md items-center pr-1.5 pl-1 py-0.5 w-[70px] justify-between border-slate-100 dark:border-slate-700/50"
+          @click="openSortMenu"
+        >
+          <span class="text-xs font-medium text-slate-600 dark:text-slate-300">
+            {{ activeSortOption }}
+          </span>
+          <fluent-icon
+            icon="chevron-down"
+            size="12"
+            class="text-slate-600 dark:text-slate-200"
+          />
+        </div>
+        <div
+          v-if="showSortMenu"
+          class="absolute flex flex-col gap-0.5 bg-white z-60 dark:bg-slate-800 rounded-md p-0.5 top-0 w-[70px] border border-slate-100 dark:border-slate-700/50"
+        >
+          <div
+            v-for="option in sortOptions"
+            :key="option.key"
+            role="button"
+            class="flex rounded-[4px] h-5 w-full items-center justify-between p-0.5 gap-1"
+            :class="{
+              'bg-woot-50 dark:bg-woot-700/50': activeSort === option.key,
+            }"
+            @click.stop="onSortOptionClick(option)"
+          >
+            <span
+              class="text-xs font-medium hover:text-woot-600 dark:hover:text-woot-600"
+              :class="{
+                'text-woot-600 dark:text-woot-600': activeSort === option.key,
+                'text-slate-600 dark:text-slate-300': activeSort !== option.key,
+              }"
+            >
+              {{ option.name }}
+            </span>
+            <fluent-icon
+              v-if="activeSort === option.key"
+              icon="checkmark"
+              size="14"
+              class="text-woot-600 dark:text-woot-600"
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+    <div>
+      <span
+        class="px-3 py-4 text-xs font-medium text-slate-400 dark:text-slate-400"
+      >
+        {{ $t('INBOX.DISPLAY_MENU.DISPLAY') }}
+      </span>
+      <div
+        class="flex flex-col divide-y divide-slate-100 dark:divide-slate-700/50"
+      >
+        <div
+          v-for="option in displayOptions"
+          :key="option.key"
+          class="flex items-center px-3 py-2 gap-1.5 h-9"
+        >
+          <input
+            :id="option.key"
+            type="checkbox"
+            :name="option.key"
+            :checked="option.selected"
+            class="m-0 border-[1.5px] shadow border-slate-200 dark:border-slate-600 appearance-none rounded-[4px] w-4 h-4 dark:bg-slate-800 focus:ring-1 focus:ring-slate-100 dark:focus:ring-slate-700 checked:bg-woot-600 dark:checked:bg-woot-600 after:content-[''] after:text-white checked:after:content-['✓'] after:flex after:items-center after:justify-center checked:border-t checked:border-woot-700 dark:checked:border-woot-300 checked:border-b-0 checked:border-r-0 checked:border-l-0 after:text-center after:text-xs after:font-bold after:relative after:-top-[1.5px]"
+            @change="updateDisplayOption(option)"
+          />
+          <label
+            :for="option.key"
+            class="text-xs font-medium text-slate-800 !ml-0 !mr-0 dark:text-slate-100"
+          >
+            {{ option.name }}
+          </label>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/app/javascript/dashboard/routes/dashboard/inbox/components/InboxItemHeader.vue b/app/javascript/dashboard/routes/dashboard/inbox/components/InboxItemHeader.vue
index 2a6d0948e..3dc5f3c84 100644
--- a/app/javascript/dashboard/routes/dashboard/inbox/components/InboxItemHeader.vue
+++ b/app/javascript/dashboard/routes/dashboard/inbox/components/InboxItemHeader.vue
@@ -1,59 +1,3 @@
-<template>
-  <div
-    class="flex items-center justify-between w-full gap-2 py-2 border-b ltr:pl-4 rtl:pl-2 h-14 ltr:pr-2 rtl:pr-4 rtl:border-r border-slate-50 dark:border-slate-800/50"
-  >
-    <woot-button
-      variant="clear link"
-      class="flex md:hidden !pt-1 !pb-1 rounded-md ltr:pr-1 rtl:pl-1 !no-underline"
-      size="medium"
-      color-scheme="primary"
-      icon="chevron-left"
-      @click="onClickGoToInboxList"
-    >
-      {{ $t('INBOX.ACTION_HEADER.BACK') }}
-    </woot-button>
-    <pagination-button
-      v-if="totalLength > 1"
-      :total-length="totalLength"
-      :current-index="currentIndex + 1"
-      @next="onClickNext"
-      @prev="onClickPrev"
-    />
-    <div v-else />
-    <div class="flex items-center gap-2">
-      <woot-button
-        variant="hollow"
-        size="small"
-        color-scheme="secondary"
-        icon="snooze"
-        class="[&>span]:hidden md:[&>span]:inline-flex"
-        @click="openSnoozeNotificationModal"
-      >
-        {{ $t('INBOX.ACTION_HEADER.SNOOZE') }}
-      </woot-button>
-      <woot-button
-        icon="delete"
-        size="small"
-        color-scheme="secondary"
-        variant="hollow"
-        class="[&>span]:hidden md:[&>span]:inline-flex"
-        @click="deleteNotification"
-      >
-        {{ $t('INBOX.ACTION_HEADER.DELETE') }}
-      </woot-button>
-    </div>
-    <woot-modal
-      :show.sync="showCustomSnoozeModal"
-      :on-close="hideCustomSnoozeModal"
-    >
-      <custom-snooze-modal
-        @close="hideCustomSnoozeModal"
-        @choose-time="scheduleCustomSnooze"
-      />
-    </woot-modal>
-  </div>
-</template>
-
 <script>
 import { mapGetters } from 'vuex';
 import { useAlert } from 'dashboard/composables';
@@ -156,3 +100,59 @@ export default {
   },
 };
 </script>
+
+<template>
+  <div
+    class="flex items-center justify-between w-full gap-2 py-2 border-b ltr:pl-4 rtl:pl-2 h-14 ltr:pr-2 rtl:pr-4 rtl:border-r border-slate-50 dark:border-slate-800/50"
+  >
+    <woot-button
+      variant="clear link"
+      class="flex md:hidden !pt-1 !pb-1 rounded-md ltr:pr-1 rtl:pl-1 !no-underline"
+      size="medium"
+      color-scheme="primary"
+      icon="chevron-left"
+      @click="onClickGoToInboxList"
+    >
+      {{ $t('INBOX.ACTION_HEADER.BACK') }}
+    </woot-button>
+    <pagination-button
+      v-if="totalLength > 1"
+      :total-length="totalLength"
+      :current-index="currentIndex + 1"
+      @next="onClickNext"
+      @prev="onClickPrev"
+    />
+    <div v-else />
+    <div class="flex items-center gap-2">
+      <woot-button
+        variant="hollow"
+        size="small"
+        color-scheme="secondary"
+        icon="snooze"
+        class="[&>span]:hidden md:[&>span]:inline-flex"
+        @click="openSnoozeNotificationModal"
+      >
+        {{ $t('INBOX.ACTION_HEADER.SNOOZE') }}
+      </woot-button>
+      <woot-button
+        icon="delete"
+        size="small"
+        color-scheme="secondary"
+        variant="hollow"
+        class="[&>span]:hidden md:[&>span]:inline-flex"
+        @click="deleteNotification"
+      >
+        {{ $t('INBOX.ACTION_HEADER.DELETE') }}
+      </woot-button>
+    </div>
+    <woot-modal
+      :show.sync="showCustomSnoozeModal"
+      :on-close="hideCustomSnoozeModal"
+    >
+      <custom-snooze-modal
+        @close="hideCustomSnoozeModal"
+        @choose-time="scheduleCustomSnooze"
+      />
+    </woot-modal>
+  </div>
+</template>
diff --git a/app/javascript/dashboard/routes/dashboard/inbox/components/InboxListHeader.vue b/app/javascript/dashboard/routes/dashboard/inbox/components/InboxListHeader.vue
index 8bbecaa8d..398248865 100644
--- a/app/javascript/dashboard/routes/dashboard/inbox/components/InboxListHeader.vue
+++ b/app/javascript/dashboard/routes/dashboard/inbox/components/InboxListHeader.vue
@@ -1,61 +1,3 @@
-<template>
-  <div
-    class="flex items-center justify-between w-full py-2 border-b ltr:pl-4 rtl:pl-2 rtl:pr-4 ltr:pr-2 h-14 border-slate-50 dark:border-slate-800/50"
-  >
-    <div class="flex items-center gap-1.5">
-      <h1 class="text-xl font-medium text-slate-900 dark:text-slate-25">
-        {{ $t('INBOX.LIST.TITLE') }}
-      </h1>
-      <div class="relative">
-        <div
-          role="button"
-          class="flex items-center gap-1 px-2 py-1 border rounded-md border-slate-100 dark:border-slate-700/50"
-          @click="openInboxDisplayMenu"
-        >
-          <span
-            class="text-xs font-medium text-center text-slate-600 dark:text-slate-200"
-          >
-            {{ $t('INBOX.LIST.DISPLAY_DROPDOWN') }}
-          </span>
-          <fluent-icon
-            icon="chevron-down"
-            size="12"
-            class="text-slate-600 dark:text-slate-200"
-          />
-        </div>
-        <inbox-display-menu
-          v-if="showInboxDisplayMenu"
-          v-on-clickaway="openInboxDisplayMenu"
-          class="absolute top-9 ltr:left-0 rtl:right-0"
-          @filter="onFilterChange"
-        />
-      </div>
-    </div>
-    <div class="relative flex items-center gap-1">
-      <!-- <woot-button
-        variant="clear"
-        size="small"
-        color-scheme="secondary"
-        icon="filter"
-        @click="openInboxFilter"
-      /> -->
-      <woot-button
-        variant="clear"
-        size="small"
-        color-scheme="secondary"
-        icon="mail-inbox"
-        @click="openInboxOptionsMenu"
-      />
-      <inbox-option-menu
-        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]"
-        @option-click="onInboxOptionMenuClick"
-      />
-    </div>
-  </div>
-</template>
-
 <script>
 import { useAlert } from 'dashboard/composables';
 import { INBOX_EVENTS } from 'dashboard/helper/AnalyticsHelper/events';
@@ -132,4 +74,62 @@ export default {
 };
 </script>
 
+<template>
+  <div
+    class="flex items-center justify-between w-full py-2 border-b ltr:pl-4 rtl:pl-2 rtl:pr-4 ltr:pr-2 h-14 border-slate-50 dark:border-slate-800/50"
+  >
+    <div class="flex items-center gap-1.5">
+      <h1 class="text-xl font-medium text-slate-900 dark:text-slate-25">
+        {{ $t('INBOX.LIST.TITLE') }}
+      </h1>
+      <div class="relative">
+        <div
+          role="button"
+          class="flex items-center gap-1 px-2 py-1 border rounded-md border-slate-100 dark:border-slate-700/50"
+          @click="openInboxDisplayMenu"
+        >
+          <span
+            class="text-xs font-medium text-center text-slate-600 dark:text-slate-200"
+          >
+            {{ $t('INBOX.LIST.DISPLAY_DROPDOWN') }}
+          </span>
+          <fluent-icon
+            icon="chevron-down"
+            size="12"
+            class="text-slate-600 dark:text-slate-200"
+          />
+        </div>
+        <inbox-display-menu
+          v-if="showInboxDisplayMenu"
+          v-on-clickaway="openInboxDisplayMenu"
+          class="absolute top-9 ltr:left-0 rtl:right-0"
+          @filter="onFilterChange"
+        />
+      </div>
+    </div>
+    <div class="relative flex items-center gap-1">
+      <!-- <woot-button
+        variant="clear"
+        size="small"
+        color-scheme="secondary"
+        icon="filter"
+        @click="openInboxFilter"
+      /> -->
+      <woot-button
+        variant="clear"
+        size="small"
+        color-scheme="secondary"
+        icon="mail-inbox"
+        @click="openInboxOptionsMenu"
+      />
+      <inbox-option-menu
+        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]"
+        @option-click="onInboxOptionMenuClick"
+      />
+    </div>
+  </div>
+</template>
+
 <style></style>
diff --git a/app/javascript/dashboard/routes/dashboard/inbox/components/InboxOptionMenu.vue b/app/javascript/dashboard/routes/dashboard/inbox/components/InboxOptionMenu.vue
index f10821677..9d03b05aa 100644
--- a/app/javascript/dashboard/routes/dashboard/inbox/components/InboxOptionMenu.vue
+++ b/app/javascript/dashboard/routes/dashboard/inbox/components/InboxOptionMenu.vue
@@ -1,18 +1,3 @@
-<template>
-  <div
-    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
-        v-for="item in menuItems"
-        :key="item.key"
-        :label="item.label"
-        @click="onClick(item.key)"
-      />
-    </div>
-  </div>
-</template>
-
 <script>
 import MenuItem from './MenuItem.vue';
 export default {
@@ -44,3 +29,18 @@ export default {
   },
 };
 </script>
+
+<template>
+  <div
+    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
+        v-for="item in menuItems"
+        :key="item.key"
+        :label="item.label"
+        @click="onClick(item.key)"
+      />
+    </div>
+  </div>
+</template>
diff --git a/app/javascript/dashboard/routes/dashboard/inbox/components/PaginationButton.vue b/app/javascript/dashboard/routes/dashboard/inbox/components/PaginationButton.vue
index e361f39df..2348d446f 100644
--- a/app/javascript/dashboard/routes/dashboard/inbox/components/PaginationButton.vue
+++ b/app/javascript/dashboard/routes/dashboard/inbox/components/PaginationButton.vue
@@ -1,3 +1,37 @@
+<script>
+export default {
+  props: {
+    totalLength: {
+      type: Number,
+      default: 0,
+    },
+    currentIndex: {
+      type: Number,
+      default: 0,
+    },
+  },
+  computed: {
+    isUpDisabled() {
+      return this.currentIndex === 1;
+    },
+    isDownDisabled() {
+      return this.currentIndex === this.totalLength || this.totalLength <= 1;
+    },
+  },
+  methods: {
+    handleUpClick() {
+      if (this.currentIndex > 1) {
+        this.$emit('prev');
+      }
+    },
+    handleDownClick() {
+      if (this.currentIndex < this.totalLength) {
+        this.$emit('next');
+      }
+    },
+  },
+};
+</script>
 <template>
   <div class="flex gap-2 items-center">
     <div class="flex gap-1 items-center">
@@ -34,37 +68,3 @@
     </div>
   </div>
 </template>
-<script>
-export default {
-  props: {
-    totalLength: {
-      type: Number,
-      default: 0,
-    },
-    currentIndex: {
-      type: Number,
-      default: 0,
-    },
-  },
-  computed: {
-    isUpDisabled() {
-      return this.currentIndex === 1;
-    },
-    isDownDisabled() {
-      return this.currentIndex === this.totalLength || this.totalLength <= 1;
-    },
-  },
-  methods: {
-    handleUpClick() {
-      if (this.currentIndex > 1) {
-        this.$emit('prev');
-      }
-    },
-    handleDownClick() {
-      if (this.currentIndex < this.totalLength) {
-        this.$emit('next');
-      }
-    },
-  },
-};
-</script>
diff --git a/app/javascript/dashboard/routes/dashboard/inbox/components/StatusIcon.vue b/app/javascript/dashboard/routes/dashboard/inbox/components/StatusIcon.vue
index 5f6ddc8d2..8fb66ee1b 100644
--- a/app/javascript/dashboard/routes/dashboard/inbox/components/StatusIcon.vue
+++ b/app/javascript/dashboard/routes/dashboard/inbox/components/StatusIcon.vue
@@ -1,3 +1,21 @@
+<script>
+import { CONVERSATION_STATUS } from 'shared/constants/messages';
+
+export default {
+  props: {
+    status: {
+      type: String,
+      default: '',
+    },
+  },
+  data() {
+    return {
+      CONVERSATION_STATUS,
+    };
+  },
+};
+</script>
+
 <template>
   <div class="inline-flex items-center justify-center rounded-md">
     <!-- Pending -->
@@ -66,21 +84,3 @@
     </svg>
   </div>
 </template>
-
-<script>
-import { CONVERSATION_STATUS } from 'shared/constants/messages';
-
-export default {
-  props: {
-    status: {
-      type: String,
-      default: '',
-    },
-  },
-  data() {
-    return {
-      CONVERSATION_STATUS,
-    };
-  },
-};
-</script>
diff --git a/app/javascript/dashboard/routes/dashboard/notifications/components/NotificationPanel.vue b/app/javascript/dashboard/routes/dashboard/notifications/components/NotificationPanel.vue
index 459f9aaef..5850ab856 100644
--- a/app/javascript/dashboard/routes/dashboard/notifications/components/NotificationPanel.vue
+++ b/app/javascript/dashboard/routes/dashboard/notifications/components/NotificationPanel.vue
@@ -1,118 +1,3 @@
-<template>
-  <div class="modal-mask">
-    <div
-      v-on-clickaway="closeNotificationPanel"
-      class="flex-col h-[90vh] w-[32.5rem] flex justify-between z-10 rounded-md shadow-md absolute bg-white dark:bg-slate-800 left-14 rtl:left-auto rtl:right-14 m-4"
-    >
-      <div
-        class="flex-row items-center border-b border-solid pt-5 pb-3 px-6 border-slate-50 dark:border-slate-700 w-full flex justify-between"
-      >
-        <div class="items-center flex">
-          <span class="text-xl font-bold text-slate-800 dark:text-slate-100">
-            {{ $t('NOTIFICATIONS_PAGE.UNREAD_NOTIFICATION.TITLE') }}
-          </span>
-          <span
-            v-if="totalUnreadNotifications"
-            class="py-1 px-2 font-semibold text-slate-700 dark:text-slate-200 rounded-md text-xxs ml-2 mr-2 bg-slate-50 dark:bg-slate-700"
-          >
-            {{ totalUnreadNotifications }}
-          </span>
-        </div>
-        <div class="flex gap-2">
-          <woot-button
-            v-if="!noUnreadNotificationAvailable"
-            color-scheme="primary"
-            variant="smooth"
-            size="tiny"
-            :is-loading="uiFlags.isUpdating"
-            @click="onMarkAllDoneClick"
-          >
-            {{ $t('NOTIFICATIONS_PAGE.MARK_ALL_DONE') }}
-          </woot-button>
-          <woot-button
-            color-scheme="secondary"
-            variant="smooth"
-            size="tiny"
-            icon="settings"
-            @click="openAudioNotificationSettings"
-          />
-          <woot-button
-            color-scheme="secondary"
-            variant="link"
-            size="tiny"
-            icon="dismiss"
-            @click="closeNotificationPanel"
-          />
-        </div>
-      </div>
-      <notification-panel-list
-        :notifications="getUnreadNotifications"
-        :is-loading="uiFlags.isFetching"
-        :on-click-notification="openConversation"
-        :in-last-page="inLastPage"
-        @close="closeNotificationPanel"
-      />
-      <div
-        v-if="records.length !== 0"
-        class="items-center py-1 px-5 flex justify-between"
-      >
-        <div class="flex">
-          <woot-button
-            size="medium"
-            variant="clear"
-            color-scheme="secondary"
-            :is-disabled="inFirstPage"
-            @click="onClickFirstPage"
-          >
-            <fluent-icon icon="chevron-left" size="16" />
-            <fluent-icon
-              icon="chevron-left"
-              size="16"
-              :class="notificationPanelFooterIconClass"
-            />
-          </woot-button>
-          <woot-button
-            color-scheme="secondary"
-            variant="clear"
-            size="medium"
-            icon="chevron-left"
-            :disabled="inFirstPage"
-            @click="onClickPreviousPage"
-          />
-        </div>
-        <span class="text-xxs font-semibold text-slate-500 dark:text-slate-400">
-          {{ currentPage }} - {{ lastPage }}
-        </span>
-        <div class="flex">
-          <woot-button
-            color-scheme="secondary"
-            variant="clear"
-            size="medium"
-            icon="chevron-right"
-            :disabled="inLastPage"
-            @click="onClickNextPage"
-          />
-          <woot-button
-            size="medium"
-            variant="clear"
-            color-scheme="secondary"
-            :disabled="inLastPage"
-            @click="onClickLastPage"
-          >
-            <fluent-icon icon="chevron-right" size="16" />
-            <fluent-icon
-              icon="chevron-right"
-              size="16"
-              :class="notificationPanelFooterIconClass"
-            />
-          </woot-button>
-        </div>
-      </div>
-      <div v-else />
-    </div>
-  </div>
-</template>
-
 <script>
 import { mapGetters } from 'vuex';
 import rtlMixin from 'shared/mixins/rtlMixin';
@@ -246,3 +131,118 @@ export default {
   },
 };
 </script>
+
+<template>
+  <div class="modal-mask">
+    <div
+      v-on-clickaway="closeNotificationPanel"
+      class="flex-col h-[90vh] w-[32.5rem] flex justify-between z-10 rounded-md shadow-md absolute bg-white dark:bg-slate-800 left-14 rtl:left-auto rtl:right-14 m-4"
+    >
+      <div
+        class="flex-row items-center border-b border-solid pt-5 pb-3 px-6 border-slate-50 dark:border-slate-700 w-full flex justify-between"
+      >
+        <div class="items-center flex">
+          <span class="text-xl font-bold text-slate-800 dark:text-slate-100">
+            {{ $t('NOTIFICATIONS_PAGE.UNREAD_NOTIFICATION.TITLE') }}
+          </span>
+          <span
+            v-if="totalUnreadNotifications"
+            class="py-1 px-2 font-semibold text-slate-700 dark:text-slate-200 rounded-md text-xxs ml-2 mr-2 bg-slate-50 dark:bg-slate-700"
+          >
+            {{ totalUnreadNotifications }}
+          </span>
+        </div>
+        <div class="flex gap-2">
+          <woot-button
+            v-if="!noUnreadNotificationAvailable"
+            color-scheme="primary"
+            variant="smooth"
+            size="tiny"
+            :is-loading="uiFlags.isUpdating"
+            @click="onMarkAllDoneClick"
+          >
+            {{ $t('NOTIFICATIONS_PAGE.MARK_ALL_DONE') }}
+          </woot-button>
+          <woot-button
+            color-scheme="secondary"
+            variant="smooth"
+            size="tiny"
+            icon="settings"
+            @click="openAudioNotificationSettings"
+          />
+          <woot-button
+            color-scheme="secondary"
+            variant="link"
+            size="tiny"
+            icon="dismiss"
+            @click="closeNotificationPanel"
+          />
+        </div>
+      </div>
+      <notification-panel-list
+        :notifications="getUnreadNotifications"
+        :is-loading="uiFlags.isFetching"
+        :on-click-notification="openConversation"
+        :in-last-page="inLastPage"
+        @close="closeNotificationPanel"
+      />
+      <div
+        v-if="records.length !== 0"
+        class="items-center py-1 px-5 flex justify-between"
+      >
+        <div class="flex">
+          <woot-button
+            size="medium"
+            variant="clear"
+            color-scheme="secondary"
+            :is-disabled="inFirstPage"
+            @click="onClickFirstPage"
+          >
+            <fluent-icon icon="chevron-left" size="16" />
+            <fluent-icon
+              icon="chevron-left"
+              size="16"
+              :class="notificationPanelFooterIconClass"
+            />
+          </woot-button>
+          <woot-button
+            color-scheme="secondary"
+            variant="clear"
+            size="medium"
+            icon="chevron-left"
+            :disabled="inFirstPage"
+            @click="onClickPreviousPage"
+          />
+        </div>
+        <span class="text-xxs font-semibold text-slate-500 dark:text-slate-400">
+          {{ currentPage }} - {{ lastPage }}
+        </span>
+        <div class="flex">
+          <woot-button
+            color-scheme="secondary"
+            variant="clear"
+            size="medium"
+            icon="chevron-right"
+            :disabled="inLastPage"
+            @click="onClickNextPage"
+          />
+          <woot-button
+            size="medium"
+            variant="clear"
+            color-scheme="secondary"
+            :disabled="inLastPage"
+            @click="onClickLastPage"
+          >
+            <fluent-icon icon="chevron-right" size="16" />
+            <fluent-icon
+              icon="chevron-right"
+              size="16"
+              :class="notificationPanelFooterIconClass"
+            />
+          </woot-button>
+        </div>
+      </div>
+      <div v-else />
+    </div>
+  </div>
+</template>
diff --git a/app/javascript/dashboard/routes/dashboard/notifications/components/NotificationPanelItem.vue b/app/javascript/dashboard/routes/dashboard/notifications/components/NotificationPanelItem.vue
index a31172e8a..4aea0ac4c 100644
--- a/app/javascript/dashboard/routes/dashboard/notifications/components/NotificationPanelItem.vue
+++ b/app/javascript/dashboard/routes/dashboard/notifications/components/NotificationPanelItem.vue
@@ -1,3 +1,41 @@
+<script>
+import Thumbnail from 'dashboard/components/widgets/Thumbnail.vue';
+import { dynamicTime } from 'shared/helpers/timeHelper';
+
+export default {
+  components: {
+    Thumbnail,
+  },
+  props: {
+    notificationItem: {
+      type: Object,
+      default: () => {},
+    },
+  },
+  computed: {
+    notificationAssignee() {
+      const { primary_actor: primaryActor } = this.notificationItem;
+      return primaryActor?.meta?.assignee;
+    },
+    hasNotificationAssignee() {
+      return !!this.notificationAssignee;
+    },
+    notificationAssigneeName() {
+      return this.notificationAssignee?.name || '';
+    },
+    notificationAssigneeThumbnail() {
+      return this.notificationAssignee?.thumbnail || '';
+    },
+  },
+  methods: {
+    dynamicTime,
+    onClickOpenNotification() {
+      this.$emit('open-notification', this.notificationItem);
+    },
+  },
+};
+</script>
+
 <template>
   <div class="w-full">
     <woot-button
@@ -64,41 +102,3 @@
     </woot-button>
   </div>
 </template>
-
-<script>
-import Thumbnail from 'dashboard/components/widgets/Thumbnail.vue';
-import { dynamicTime } from 'shared/helpers/timeHelper';
-
-export default {
-  components: {
-    Thumbnail,
-  },
-  props: {
-    notificationItem: {
-      type: Object,
-      default: () => {},
-    },
-  },
-  computed: {
-    notificationAssignee() {
-      const { primary_actor: primaryActor } = this.notificationItem;
-      return primaryActor?.meta?.assignee;
-    },
-    hasNotificationAssignee() {
-      return !!this.notificationAssignee;
-    },
-    notificationAssigneeName() {
-      return this.notificationAssignee?.name || '';
-    },
-    notificationAssigneeThumbnail() {
-      return this.notificationAssignee?.thumbnail || '';
-    },
-  },
-  methods: {
-    dynamicTime,
-    onClickOpenNotification() {
-      this.$emit('open-notification', this.notificationItem);
-    },
-  },
-};
-</script>
diff --git a/app/javascript/dashboard/routes/dashboard/notifications/components/NotificationPanelList.vue b/app/javascript/dashboard/routes/dashboard/notifications/components/NotificationPanelList.vue
index 9ae08b144..4b3e2e134 100644
--- a/app/javascript/dashboard/routes/dashboard/notifications/components/NotificationPanelList.vue
+++ b/app/javascript/dashboard/routes/dashboard/notifications/components/NotificationPanelList.vue
@@ -1,38 +1,3 @@
-<template>
-  <div class="flex-col py-2 px-2.5 overflow-auto h-full flex">
-    <notification-panel-item
-      v-for="notificationItem in notifications"
-      v-show="!isLoading"
-      :key="notificationItem.id"
-      :notification-item="notificationItem"
-      @open-notification="onClickNotification"
-    />
-    <empty-state
-      v-if="showEmptyResult"
-      :title="$t('NOTIFICATIONS_PAGE.UNREAD_NOTIFICATION.EMPTY_MESSAGE')"
-    />
-    <woot-button
-      v-if="!isLoading && inLastPage"
-      size="expanded"
-      variant="clear"
-      color-scheme="primary"
-      class-names="mt-3"
-      @click="openNotificationPage"
-    >
-      {{ $t('NOTIFICATIONS_PAGE.UNREAD_NOTIFICATION.ALL_NOTIFICATIONS') }}
-    </woot-button>
-    <div
-      v-if="isLoading"
-      class="items-center justify-center my-12 mx-2 text-sm font-medium flex"
-    >
-      <spinner />
-      <span>{{
-        $t('NOTIFICATIONS_PAGE.UNREAD_NOTIFICATION.LOADING_UNREAD_MESSAGE')
-      }}</span>
-    </div>
-  </div>
-</template>
-
 <script>
 import { mapGetters } from 'vuex';
 
@@ -84,3 +49,38 @@ export default {
   },
 };
 </script>
+
+<template>
+  <div class="flex-col py-2 px-2.5 overflow-auto h-full flex">
+    <notification-panel-item
+      v-for="notificationItem in notifications"
+      v-show="!isLoading"
+      :key="notificationItem.id"
+      :notification-item="notificationItem"
+      @open-notification="onClickNotification"
+    />
+    <empty-state
+      v-if="showEmptyResult"
+      :title="$t('NOTIFICATIONS_PAGE.UNREAD_NOTIFICATION.EMPTY_MESSAGE')"
+    />
+    <woot-button
+      v-if="!isLoading && inLastPage"
+      size="expanded"
+      variant="clear"
+      color-scheme="primary"
+      class-names="mt-3"
+      @click="openNotificationPage"
+    >
+      {{ $t('NOTIFICATIONS_PAGE.UNREAD_NOTIFICATION.ALL_NOTIFICATIONS') }}
+    </woot-button>
+    <div
+      v-if="isLoading"
+      class="items-center justify-center my-12 mx-2 text-sm font-medium flex"
+    >
+      <spinner />
+      <span>{{
+        $t('NOTIFICATIONS_PAGE.UNREAD_NOTIFICATION.LOADING_UNREAD_MESSAGE')
+      }}</span>
+    </div>
+  </div>
+</template>
diff --git a/app/javascript/dashboard/routes/dashboard/notifications/components/NotificationTable.vue b/app/javascript/dashboard/routes/dashboard/notifications/components/NotificationTable.vue
index 9376f0ced..cd0a60498 100644
--- a/app/javascript/dashboard/routes/dashboard/notifications/components/NotificationTable.vue
+++ b/app/javascript/dashboard/routes/dashboard/notifications/components/NotificationTable.vue
@@ -1,3 +1,52 @@
+<script>
+import Thumbnail from 'dashboard/components/widgets/Thumbnail.vue';
+import Spinner from 'shared/components/Spinner.vue';
+import EmptyState from 'dashboard/components/widgets/EmptyState.vue';
+import { dynamicTime } from 'shared/helpers/timeHelper';
+import { mapGetters } from 'vuex';
+
+export default {
+  components: {
+    Thumbnail,
+    Spinner,
+    EmptyState,
+  },
+  props: {
+    notifications: {
+      type: Array,
+      default: () => [],
+    },
+    isLoading: {
+      type: Boolean,
+      default: false,
+    },
+    isUpdating: {
+      type: Boolean,
+      default: false,
+    },
+    onClickNotification: {
+      type: Function,
+      default: () => {},
+    },
+    onMarkAllDoneClick: {
+      type: Function,
+      default: () => {},
+    },
+  },
+  computed: {
+    ...mapGetters({
+      notificationMetadata: 'notifications/getMeta',
+    }),
+    showEmptyResult() {
+      return !this.isLoading && this.notifications.length === 0;
+    },
+  },
+  methods: {
+    dynamicTime,
+  },
+};
+</script>
+
 <template>
   <section
     class="flex-grow flex-shrink h-full px-4 py-8 overflow-hidden bg-white dark:bg-slate-900"
@@ -84,55 +133,6 @@
   </section>
 </template>
 
-<script>
-import Thumbnail from 'dashboard/components/widgets/Thumbnail.vue';
-import Spinner from 'shared/components/Spinner.vue';
-import EmptyState from 'dashboard/components/widgets/EmptyState.vue';
-import { dynamicTime } from 'shared/helpers/timeHelper';
-import { mapGetters } from 'vuex';
-
-export default {
-  components: {
-    Thumbnail,
-    Spinner,
-    EmptyState,
-  },
-  props: {
-    notifications: {
-      type: Array,
-      default: () => [],
-    },
-    isLoading: {
-      type: Boolean,
-      default: false,
-    },
-    isUpdating: {
-      type: Boolean,
-      default: false,
-    },
-    onClickNotification: {
-      type: Function,
-      default: () => {},
-    },
-    onMarkAllDoneClick: {
-      type: Function,
-      default: () => {},
-    },
-  },
-  computed: {
-    ...mapGetters({
-      notificationMetadata: 'notifications/getMeta',
-    }),
-    showEmptyResult() {
-      return !this.isLoading && this.notifications.length === 0;
-    },
-  },
-  methods: {
-    dynamicTime,
-  },
-};
-</script>
-
 <style lang="scss" scoped>
 @import '~dashboard/assets/scss/mixins';
 
diff --git a/app/javascript/dashboard/routes/dashboard/notifications/components/NotificationsView.vue b/app/javascript/dashboard/routes/dashboard/notifications/components/NotificationsView.vue
index b4df7a0e8..ba0465457 100644
--- a/app/javascript/dashboard/routes/dashboard/notifications/components/NotificationsView.vue
+++ b/app/javascript/dashboard/routes/dashboard/notifications/components/NotificationsView.vue
@@ -1,24 +1,3 @@
-<template>
-  <div class="overflow-y-auto h-full">
-    <div class="flex flex-col h-full">
-      <notification-table
-        :notifications="records"
-        :is-loading="uiFlags.isFetching"
-        :is-updating="uiFlags.isUpdating"
-        :on-click-notification="openConversation"
-        :on-mark-all-done-click="onMarkAllDoneClick"
-      />
-      <table-footer
-        class="border-t border-slate-75 dark:border-slate-700/50"
-        :current-page="Number(meta.currentPage)"
-        :total-count="meta.count"
-        :page-size="15"
-        @page-change="onPageChange"
-      />
-    </div>
-  </div>
-</template>
-
 <script>
 import { mapGetters } from 'vuex';
 import TableFooter from 'dashboard/components/widgets/TableFooter.vue';
@@ -77,6 +56,27 @@ export default {
 };
 </script>
 
+<template>
+  <div class="overflow-y-auto h-full">
+    <div class="flex flex-col h-full">
+      <notification-table
+        :notifications="records"
+        :is-loading="uiFlags.isFetching"
+        :is-updating="uiFlags.isUpdating"
+        :on-click-notification="openConversation"
+        :on-mark-all-done-click="onMarkAllDoneClick"
+      />
+      <table-footer
+        class="border-t border-slate-75 dark:border-slate-700/50"
+        :current-page="Number(meta.currentPage)"
+        :total-count="meta.count"
+        :page-size="15"
+        @page-change="onPageChange"
+      />
+    </div>
+  </div>
+</template>
+
 <style lang="scss" scoped>
 .notification--page {
   background: var(--white);
diff --git a/app/javascript/dashboard/routes/dashboard/settings/SettingsHeader.vue b/app/javascript/dashboard/routes/dashboard/settings/SettingsHeader.vue
index 2cb27b463..49d98d489 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/SettingsHeader.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/SettingsHeader.vue
@@ -1,39 +1,3 @@
-<template>
-  <div
-    class="flex justify-between items-center h-14 min-h-[3.5rem] px-4 py-2 bg-white dark:bg-slate-900 border-b border-slate-50 dark:border-slate-800/50"
-  >
-    <h1
-      class="flex items-center mb-0 text-2xl text-slate-900 dark:text-slate-100"
-    >
-      <woot-sidemenu-icon v-if="showSidemenuIcon" />
-      <back-button
-        v-if="showBackButton"
-        :button-label="backButtonLabel"
-        :back-url="backUrl"
-      />
-      <fluent-icon
-        v-if="icon"
-        :icon="icon"
-        :class="iconClass"
-        class="hidden ml-1 mr-2 rtl:ml-2 rtl:mr-1 md:block"
-      />
-      <slot />
-      <span class="text-2xl font-medium text-slate-900 dark:text-slate-100">
-        {{ headerTitle }}
-      </span>
-    </h1>
-    <router-link
-      v-if="showNewButton && isAdmin"
-      :to="buttonRoute"
-      class="button success button--fixed-top px-3.5 py-1 rounded-[5px] flex gap-2"
-    >
-      <fluent-icon icon="add-circle" />
-      <span class="button__content">
-        {{ buttonText }}
-      </span>
-    </router-link>
-  </div>
-</template>
 <script>
 import { mapGetters } from 'vuex';
 import { useAdmin } from 'dashboard/composables/useAdmin';
@@ -91,3 +55,39 @@ export default {
   },
 };
 </script>
+<template>
+  <div
+    class="flex justify-between items-center h-14 min-h-[3.5rem] px-4 py-2 bg-white dark:bg-slate-900 border-b border-slate-50 dark:border-slate-800/50"
+  >
+    <h1
+      class="flex items-center mb-0 text-2xl text-slate-900 dark:text-slate-100"
+    >
+      <woot-sidemenu-icon v-if="showSidemenuIcon" />
+      <back-button
+        v-if="showBackButton"
+        :button-label="backButtonLabel"
+        :back-url="backUrl"
+      />
+      <fluent-icon
+        v-if="icon"
+        :icon="icon"
+        :class="iconClass"
+        class="hidden ml-1 mr-2 rtl:ml-2 rtl:mr-1 md:block"
+      />
+      <slot />
+      <span class="text-2xl font-medium text-slate-900 dark:text-slate-100">
+        {{ headerTitle }}
+      </span>
+    </h1>
+    <router-link
+      v-if="showNewButton && isAdmin"
+      :to="buttonRoute"
+      class="button success button--fixed-top px-3.5 py-1 rounded-[5px] flex gap-2"
+    >
+      <fluent-icon icon="add-circle" />
+      <span class="button__content">
+        {{ buttonText }}
+      </span>
+    </router-link>
+  </div>
+</template>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/SettingsSubPageHeader.vue b/app/javascript/dashboard/routes/dashboard/settings/SettingsSubPageHeader.vue
index 8f6f46601..d67d96eb5 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/SettingsSubPageHeader.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/SettingsSubPageHeader.vue
@@ -1,3 +1,12 @@
+<script>
+export default {
+  props: {
+    headerTitle: { type: String, default: '' },
+    headerContent: { type: String, default: '' },
+  },
+};
+</script>
+
 <template>
   <div class="flex flex-col w-full items-start">
     <h2
@@ -11,12 +20,3 @@
     />
   </div>
 </template>
-
-<script>
-export default {
-  props: {
-    headerTitle: { type: String, default: '' },
-    headerContent: { type: String, default: '' },
-  },
-};
-</script>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/Wrapper.vue b/app/javascript/dashboard/routes/dashboard/settings/Wrapper.vue
index 2b2604ac8..ccdb716ec 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/Wrapper.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/Wrapper.vue
@@ -1,24 +1,3 @@
-<template>
-  <div
-    class="flex flex-1 h-full justify-between flex-col m-0 bg-slate-25 dark:bg-slate-900 overflow-auto"
-  >
-    <settings-header
-      button-route="new"
-      :icon="icon"
-      :header-title="$t(headerTitle)"
-      :button-text="$t(headerButtonText)"
-      :show-back-button="showBackButton"
-      :back-url="backUrl"
-      :show-new-button="showNewButton"
-      :show-sidemenu-icon="showSidemenuIcon"
-    />
-    <keep-alive v-if="keepAlive">
-      <router-view />
-    </keep-alive>
-    <router-view v-else />
-  </div>
-</template>
-
 <script>
 /* eslint no-console: 0 */
 import SettingsHeader from './SettingsHeader.vue';
@@ -65,3 +44,24 @@ export default {
   },
 };
 </script>
+
+<template>
+  <div
+    class="flex flex-1 h-full justify-between flex-col m-0 bg-slate-25 dark:bg-slate-900 overflow-auto"
+  >
+    <settings-header
+      button-route="new"
+      :icon="icon"
+      :header-title="$t(headerTitle)"
+      :button-text="$t(headerButtonText)"
+      :show-back-button="showBackButton"
+      :back-url="backUrl"
+      :show-new-button="showNewButton"
+      :show-sidemenu-icon="showSidemenuIcon"
+    />
+    <keep-alive v-if="keepAlive">
+      <router-view />
+    </keep-alive>
+    <router-view v-else />
+  </div>
+</template>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/account/Index.vue b/app/javascript/dashboard/routes/dashboard/settings/account/Index.vue
index 8ebd2b18c..ea715ff95 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/account/Index.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/account/Index.vue
@@ -1,133 +1,3 @@
-<template>
-  <div class="flex-grow flex-shrink min-w-0 p-6 overflow-auto">
-    <form v-if="!uiFlags.isFetchingItem" @submit.prevent="updateAccount">
-      <div
-        class="flex flex-row p-4 border-b border-slate-25 dark:border-slate-800"
-      >
-        <div
-          class="flex-grow-0 flex-shrink-0 flex-[25%] min-w-0 py-4 pr-6 pl-0"
-        >
-          <h4 class="text-lg font-medium text-black-900 dark:text-slate-200">
-            {{ $t('GENERAL_SETTINGS.FORM.GENERAL_SECTION.TITLE') }}
-          </h4>
-          <p>{{ $t('GENERAL_SETTINGS.FORM.GENERAL_SECTION.NOTE') }}</p>
-        </div>
-        <div class="p-4 flex-grow-0 flex-shrink-0 flex-[50%]">
-          <label :class="{ error: v$.name.$error }">
-            {{ $t('GENERAL_SETTINGS.FORM.NAME.LABEL') }}
-            <input
-              v-model="name"
-              type="text"
-              :placeholder="$t('GENERAL_SETTINGS.FORM.NAME.PLACEHOLDER')"
-              @blur="v$.name.$touch"
-            />
-            <span v-if="v$.name.$error" class="message">
-              {{ $t('GENERAL_SETTINGS.FORM.NAME.ERROR') }}
-            </span>
-          </label>
-          <label :class="{ error: v$.locale.$error }">
-            {{ $t('GENERAL_SETTINGS.FORM.LANGUAGE.LABEL') }}
-            <select v-model="locale">
-              <option
-                v-for="lang in languagesSortedByCode"
-                :key="lang.iso_639_1_code"
-                :value="lang.iso_639_1_code"
-              >
-                {{ lang.name }}
-              </option>
-            </select>
-            <span v-if="v$.locale.$error" class="message">
-              {{ $t('GENERAL_SETTINGS.FORM.LANGUAGE.ERROR') }}
-            </span>
-          </label>
-          <label v-if="featureInboundEmailEnabled">
-            {{ $t('GENERAL_SETTINGS.FORM.FEATURES.INBOUND_EMAIL_ENABLED') }}
-          </label>
-          <label v-if="featureCustomReplyDomainEnabled">
-            {{
-              $t('GENERAL_SETTINGS.FORM.FEATURES.CUSTOM_EMAIL_DOMAIN_ENABLED')
-            }}
-          </label>
-          <label v-if="featureCustomReplyDomainEnabled">
-            {{ $t('GENERAL_SETTINGS.FORM.DOMAIN.LABEL') }}
-            <input
-              v-model="domain"
-              type="text"
-              :placeholder="$t('GENERAL_SETTINGS.FORM.DOMAIN.PLACEHOLDER')"
-            />
-          </label>
-          <label v-if="featureCustomReplyEmailEnabled">
-            {{ $t('GENERAL_SETTINGS.FORM.SUPPORT_EMAIL.LABEL') }}
-            <input
-              v-model="supportEmail"
-              type="text"
-              :placeholder="
-                $t('GENERAL_SETTINGS.FORM.SUPPORT_EMAIL.PLACEHOLDER')
-              "
-            />
-          </label>
-          <label
-            v-if="showAutoResolutionConfig"
-            :class="{ error: v$.autoResolveDuration.$error }"
-          >
-            {{ $t('GENERAL_SETTINGS.FORM.AUTO_RESOLVE_DURATION.LABEL') }}
-            <input
-              v-model="autoResolveDuration"
-              type="number"
-              :placeholder="
-                $t('GENERAL_SETTINGS.FORM.AUTO_RESOLVE_DURATION.PLACEHOLDER')
-              "
-              @blur="v$.autoResolveDuration.$touch"
-            />
-            <span v-if="v$.autoResolveDuration.$error" class="message">
-              {{ $t('GENERAL_SETTINGS.FORM.AUTO_RESOLVE_DURATION.ERROR') }}
-            </span>
-          </label>
-        </div>
-      </div>
-
-      <div
-        class="flex flex-row p-4 border-slate-25 dark:border-slate-700 text-black-900 dark:text-slate-300"
-      >
-        <div
-          class="flex-grow-0 flex-shrink-0 flex-[25%] min-w-0 py-4 pr-6 pl-0"
-        >
-          <h4 class="text-lg font-medium text-black-900 dark:text-slate-200">
-            {{ $t('GENERAL_SETTINGS.FORM.ACCOUNT_ID.TITLE') }}
-          </h4>
-          <p>
-            {{ $t('GENERAL_SETTINGS.FORM.ACCOUNT_ID.NOTE') }}
-          </p>
-        </div>
-        <div class="p-4 flex-grow-0 flex-shrink-0 flex-[50%]">
-          <woot-code :script="getAccountId" />
-        </div>
-      </div>
-      <div class="p-4 text-sm text-center">
-        <div>{{ `v${globalConfig.appVersion}` }}</div>
-        <div v-if="hasAnUpdateAvailable && globalConfig.displayManifest">
-          {{
-            $t('GENERAL_SETTINGS.UPDATE_CHATWOOT', {
-              latestChatwootVersion: latestChatwootVersion,
-            })
-          }}
-        </div>
-        <div class="build-id">
-          <div>{{ `Build ${globalConfig.gitSha}` }}</div>
-        </div>
-      </div>
-
-      <woot-submit-button
-        class="button nice success button--fixed-top"
-        :button-text="$t('GENERAL_SETTINGS.SUBMIT')"
-        :loading="isUpdating"
-      />
-    </form>
-
-    <woot-loading-state v-if="uiFlags.isFetchingItem" />
-  </div>
-</template>
-
 <script>
 import { useVuelidate } from '@vuelidate/core';
 import { required, minValue, maxValue } from '@vuelidate/validators';
@@ -289,3 +159,133 @@ export default {
   },
 };
 </script>
+
+<template>
+  <div class="flex-grow flex-shrink min-w-0 p-6 overflow-auto">
+    <form v-if="!uiFlags.isFetchingItem" @submit.prevent="updateAccount">
+      <div
+        class="flex flex-row p-4 border-b border-slate-25 dark:border-slate-800"
+      >
+        <div
+          class="flex-grow-0 flex-shrink-0 flex-[25%] min-w-0 py-4 pr-6 pl-0"
+        >
+          <h4 class="text-lg font-medium text-black-900 dark:text-slate-200">
+            {{ $t('GENERAL_SETTINGS.FORM.GENERAL_SECTION.TITLE') }}
+          </h4>
+          <p>{{ $t('GENERAL_SETTINGS.FORM.GENERAL_SECTION.NOTE') }}</p>
+        </div>
+        <div class="p-4 flex-grow-0 flex-shrink-0 flex-[50%]">
+          <label :class="{ error: v$.name.$error }">
+            {{ $t('GENERAL_SETTINGS.FORM.NAME.LABEL') }}
+            <input
+              v-model="name"
+              type="text"
+              :placeholder="$t('GENERAL_SETTINGS.FORM.NAME.PLACEHOLDER')"
+              @blur="v$.name.$touch"
+            />
+            <span v-if="v$.name.$error" class="message">
+              {{ $t('GENERAL_SETTINGS.FORM.NAME.ERROR') }}
+            </span>
+          </label>
+          <label :class="{ error: v$.locale.$error }">
+            {{ $t('GENERAL_SETTINGS.FORM.LANGUAGE.LABEL') }}
+            <select v-model="locale">
+              <option
+                v-for="lang in languagesSortedByCode"
+                :key="lang.iso_639_1_code"
+                :value="lang.iso_639_1_code"
+              >
+                {{ lang.name }}
+              </option>
+            </select>
+            <span v-if="v$.locale.$error" class="message">
+              {{ $t('GENERAL_SETTINGS.FORM.LANGUAGE.ERROR') }}
+            </span>
+          </label>
+          <label v-if="featureInboundEmailEnabled">
+            {{ $t('GENERAL_SETTINGS.FORM.FEATURES.INBOUND_EMAIL_ENABLED') }}
+          </label>
+          <label v-if="featureCustomReplyDomainEnabled">
+            {{
+              $t('GENERAL_SETTINGS.FORM.FEATURES.CUSTOM_EMAIL_DOMAIN_ENABLED')
+            }}
+          </label>
+          <label v-if="featureCustomReplyDomainEnabled">
+            {{ $t('GENERAL_SETTINGS.FORM.DOMAIN.LABEL') }}
+            <input
+              v-model="domain"
+              type="text"
+              :placeholder="$t('GENERAL_SETTINGS.FORM.DOMAIN.PLACEHOLDER')"
+            />
+          </label>
+          <label v-if="featureCustomReplyEmailEnabled">
+            {{ $t('GENERAL_SETTINGS.FORM.SUPPORT_EMAIL.LABEL') }}
+            <input
+              v-model="supportEmail"
+              type="text"
+              :placeholder="
+                $t('GENERAL_SETTINGS.FORM.SUPPORT_EMAIL.PLACEHOLDER')
+              "
+            />
+          </label>
+          <label
+            v-if="showAutoResolutionConfig"
+            :class="{ error: v$.autoResolveDuration.$error }"
+          >
+            {{ $t('GENERAL_SETTINGS.FORM.AUTO_RESOLVE_DURATION.LABEL') }}
+            <input
+              v-model="autoResolveDuration"
+              type="number"
+              :placeholder="
+                $t('GENERAL_SETTINGS.FORM.AUTO_RESOLVE_DURATION.PLACEHOLDER')
+              "
+              @blur="v$.autoResolveDuration.$touch"
+            />
+            <span v-if="v$.autoResolveDuration.$error" class="message">
+              {{ $t('GENERAL_SETTINGS.FORM.AUTO_RESOLVE_DURATION.ERROR') }}
+            </span>
+          </label>
+        </div>
+      </div>
+
+      <div
+        class="flex flex-row p-4 border-slate-25 dark:border-slate-700 text-black-900 dark:text-slate-300"
+      >
+        <div
+          class="flex-grow-0 flex-shrink-0 flex-[25%] min-w-0 py-4 pr-6 pl-0"
+        >
+          <h4 class="text-lg font-medium text-black-900 dark:text-slate-200">
+            {{ $t('GENERAL_SETTINGS.FORM.ACCOUNT_ID.TITLE') }}
+          </h4>
+          <p>
+            {{ $t('GENERAL_SETTINGS.FORM.ACCOUNT_ID.NOTE') }}
+          </p>
+        </div>
+        <div class="p-4 flex-grow-0 flex-shrink-0 flex-[50%]">
+          <woot-code :script="getAccountId" />
+        </div>
+      </div>
+      <div class="p-4 text-sm text-center">
+        <div>{{ `v${globalConfig.appVersion}` }}</div>
+        <div v-if="hasAnUpdateAvailable && globalConfig.displayManifest">
+          {{
+            $t('GENERAL_SETTINGS.UPDATE_CHATWOOT', {
+              latestChatwootVersion: latestChatwootVersion,
+            })
+          }}
+        </div>
+        <div class="build-id">
+          <div>{{ `Build ${globalConfig.gitSha}` }}</div>
+        </div>
+      </div>
+
+      <woot-submit-button
+        class="button nice success button--fixed-top"
+        :button-text="$t('GENERAL_SETTINGS.SUBMIT')"
+        :loading="isUpdating"
+      />
+    </form>
+
+    <woot-loading-state v-if="uiFlags.isFetchingItem" />
+  </div>
+</template>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/agentBots/Index.vue b/app/javascript/dashboard/routes/dashboard/settings/agentBots/Index.vue
index c8c0eb348..1c133bcfa 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/agentBots/Index.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/agentBots/Index.vue
@@ -1,49 +1,3 @@
-<template>
-  <div class="flex-1 p-4 overflow-auto">
-    <div class="flex flex-row gap-4">
-      <div class="w-full lg:w-3/5">
-        <woot-loading-state
-          v-if="uiFlags.isFetching"
-          :message="$t('AGENT_BOTS.LIST.LOADING')"
-        />
-        <table v-else-if="agentBots.length" class="woot-table">
-          <tbody>
-            <agent-bot-row
-              v-for="(agentBot, index) in agentBots"
-              :key="agentBot.id"
-              :agent-bot="agentBot"
-              :index="index"
-              @delete="onDeleteAgentBot"
-              @edit="onEditAgentBot"
-            />
-          </tbody>
-        </table>
-        <p v-else class="flex flex-col items-center justify-center h-full">
-          {{ $t('AGENT_BOTS.LIST.404') }}
-        </p>
-      </div>
-
-      <div class="hidden w-1/3 lg:block">
-        <p v-html="$t('AGENT_BOTS.SIDEBAR_TXT')" />
-      </div>
-    </div>
-    <woot-button
-      color-scheme="success"
-      class-names="button--fixed-top"
-      icon="add-circle"
-    >
-      <router-link :to="newAgentBotsURL" class="white-text">
-        {{ $t('AGENT_BOTS.ADD.TITLE') }}
-      </router-link>
-    </woot-button>
-    <woot-confirm-modal
-      ref="confirmDialog"
-      :title="$t('AGENT_BOTS.DELETE.TITLE')"
-      :description="$t('AGENT_BOTS.DELETE.DESCRIPTION')"
-    />
-  </div>
-</template>
-
 <script>
 import { mapGetters } from 'vuex';
 import { useAlert } from 'dashboard/composables';
@@ -89,6 +43,52 @@ export default {
   },
 };
 </script>
+
+<template>
+  <div class="flex-1 p-4 overflow-auto">
+    <div class="flex flex-row gap-4">
+      <div class="w-full lg:w-3/5">
+        <woot-loading-state
+          v-if="uiFlags.isFetching"
+          :message="$t('AGENT_BOTS.LIST.LOADING')"
+        />
+        <table v-else-if="agentBots.length" class="woot-table">
+          <tbody>
+            <agent-bot-row
+              v-for="(agentBot, index) in agentBots"
+              :key="agentBot.id"
+              :agent-bot="agentBot"
+              :index="index"
+              @delete="onDeleteAgentBot"
+              @edit="onEditAgentBot"
+            />
+          </tbody>
+        </table>
+        <p v-else class="flex flex-col items-center justify-center h-full">
+          {{ $t('AGENT_BOTS.LIST.404') }}
+        </p>
+      </div>
+
+      <div class="hidden w-1/3 lg:block">
+        <p v-html="$t('AGENT_BOTS.SIDEBAR_TXT')" />
+      </div>
+    </div>
+    <woot-button
+      color-scheme="success"
+      class-names="button--fixed-top"
+      icon="add-circle"
+    >
+      <router-link :to="newAgentBotsURL" class="white-text">
+        {{ $t('AGENT_BOTS.ADD.TITLE') }}
+      </router-link>
+    </woot-button>
+    <woot-confirm-modal
+      ref="confirmDialog"
+      :title="$t('AGENT_BOTS.DELETE.TITLE')"
+      :description="$t('AGENT_BOTS.DELETE.DESCRIPTION')"
+    />
+  </div>
+</template>
 <style scoped>
 .bots-list {
   list-style: none;
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 0146e7890..d48c6461b 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/agentBots/components/AgentBotRow.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/agentBots/components/AgentBotRow.vue
@@ -1,3 +1,27 @@
+<script>
+import ShowMore from 'dashboard/components/widgets/ShowMore.vue';
+import AgentBotType from './AgentBotType.vue';
+
+export default {
+  components: { ShowMore, AgentBotType },
+  props: {
+    agentBot: {
+      type: Object,
+      required: true,
+    },
+    index: {
+      type: Number,
+      required: true,
+    },
+  },
+  computed: {
+    isACSMLTypeBot() {
+      const { bot_type: botType } = this.agentBot;
+      return botType === 'csml';
+    },
+  },
+};
+</script>
 <template>
   <tr class="space-x-2">
     <td class="agent-bot--details">
@@ -30,30 +54,6 @@
     </td>
   </tr>
 </template>
-<script>
-import ShowMore from 'dashboard/components/widgets/ShowMore.vue';
-import AgentBotType from './AgentBotType.vue';
-
-export default {
-  components: { ShowMore, AgentBotType },
-  props: {
-    agentBot: {
-      type: Object,
-      required: true,
-    },
-    index: {
-      type: Number,
-      required: true,
-    },
-  },
-  computed: {
-    isACSMLTypeBot() {
-      const { bot_type: botType } = this.agentBot;
-      return botType === 'csml';
-    },
-  },
-};
-</script>
 <style scoped lang="scss">
 .agent-bot--link {
   align-items: center;
diff --git a/app/javascript/dashboard/routes/dashboard/settings/agentBots/components/AgentBotType.vue b/app/javascript/dashboard/routes/dashboard/settings/agentBots/components/AgentBotType.vue
index b379786a3..711f9108d 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/agentBots/components/AgentBotType.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/agentBots/components/AgentBotType.vue
@@ -1,14 +1,3 @@
-<template>
-  <span class="inline-flex items-center gap-1">
-    <img
-      v-tooltip="botTypeConfig[botType].label"
-      class="agent-bot-type--thumbnail"
-      :src="botTypeConfig[botType].thumbnail"
-      :alt="botTypeConfig[botType].label"
-    />
-    <span>{{ botTypeConfig[botType].label }}</span>
-  </span>
-</template>
 <script>
 export default {
   props: {
@@ -33,6 +22,17 @@ export default {
   },
 };
 </script>
+<template>
+  <span class="inline-flex items-center gap-1">
+    <img
+      v-tooltip="botTypeConfig[botType].label"
+      class="agent-bot-type--thumbnail"
+      :src="botTypeConfig[botType].thumbnail"
+      :alt="botTypeConfig[botType].label"
+    />
+    <span>{{ botTypeConfig[botType].label }}</span>
+  </span>
+</template>
 <style scoped>
 .agent-bot-type--thumbnail {
   width: auto;
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 b145f0c6f..dbb86a8b8 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/agentBots/components/CSMLBotEditor.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/agentBots/components/CSMLBotEditor.vue
@@ -1,3 +1,49 @@
+<script>
+import { useVuelidate } from '@vuelidate/core';
+import { required } from '@vuelidate/validators';
+import CsmlMonacoEditor from './CSMLMonacoEditor.vue';
+
+export default {
+  components: { CsmlMonacoEditor },
+  props: {
+    agentBot: {
+      type: Object,
+      default: () => {},
+    },
+  },
+  setup() {
+    return { v$: useVuelidate() };
+  },
+  validations: {
+    bot: {
+      name: { required },
+      csmlContent: { required },
+    },
+  },
+  data() {
+    return {
+      bot: {
+        name: this.agentBot.name || '',
+        description: this.agentBot.description || '',
+        csmlContent: this.agentBot.bot_config.csml_content || '',
+      },
+    };
+  },
+  methods: {
+    onSubmit() {
+      this.v$.$touch();
+      if (this.v$.$invalid) {
+        return;
+      }
+      this.$emit('submit', {
+        id: this.agentBot.id || '',
+        ...this.bot,
+      });
+    },
+  },
+};
+</script>
+
 <template>
   <div class="h-auto overflow-auto flex flex-col">
     <div class="flex flex-row">
@@ -48,49 +94,3 @@
     </div>
   </div>
 </template>
-
-<script>
-import { useVuelidate } from '@vuelidate/core';
-import { required } from '@vuelidate/validators';
-import CsmlMonacoEditor from './CSMLMonacoEditor.vue';
-
-export default {
-  components: { CsmlMonacoEditor },
-  props: {
-    agentBot: {
-      type: Object,
-      default: () => {},
-    },
-  },
-  setup() {
-    return { v$: useVuelidate() };
-  },
-  validations: {
-    bot: {
-      name: { required },
-      csmlContent: { required },
-    },
-  },
-  data() {
-    return {
-      bot: {
-        name: this.agentBot.name || '',
-        description: this.agentBot.description || '',
-        csmlContent: this.agentBot.bot_config.csml_content || '',
-      },
-    };
-  },
-  methods: {
-    onSubmit() {
-      this.v$.$touch();
-      if (this.v$.$invalid) {
-        return;
-      }
-      this.$emit('submit', {
-        id: this.agentBot.id || '',
-        ...this.bot,
-      });
-    },
-  },
-};
-</script>
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 e30360647..4d81d83ad 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/agentBots/components/CSMLMonacoEditor.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/agentBots/components/CSMLMonacoEditor.vue
@@ -1,17 +1,3 @@
-<template>
-  <div class="csml-editor--container">
-    <loading-state
-      v-if="iframeLoading"
-      :message="$t('AGENT_BOTS.LOADING_EDITOR')"
-      class="dashboard-app_loading-container"
-    />
-    <iframe
-      id="csml-editor--frame"
-      :src="globalConfig.csmlEditorHost"
-      @load="onEditorLoad"
-    />
-  </div>
-</template>
 <script>
 import LoadingState from 'dashboard/components/widgets/LoadingState.vue';
 import { mapGetters } from 'vuex';
@@ -59,6 +45,20 @@ export default {
   },
 };
 </script>
+<template>
+  <div class="csml-editor--container">
+    <loading-state
+      v-if="iframeLoading"
+      :message="$t('AGENT_BOTS.LOADING_EDITOR')"
+      class="dashboard-app_loading-container"
+    />
+    <iframe
+      id="csml-editor--frame"
+      :src="globalConfig.csmlEditorHost"
+      @load="onEditorLoad"
+    />
+  </div>
+</template>
 
 <style scoped>
 #csml-editor--frame {
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 1b59a5ace..48ebcbd3b 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/agentBots/csml/Edit.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/agentBots/csml/Edit.vue
@@ -1,13 +1,3 @@
-<template>
-  <csml-bot-editor
-    v-if="agentBot.id"
-    :agent-bot="agentBot"
-    @submit="updateBot"
-  />
-  <div v-else class="flex flex-col h-auto overflow-auto no-padding">
-    <spinner />
-  </div>
-</template>
 <script>
 import { useAlert } from 'dashboard/composables';
 import Spinner from 'shared/components/Spinner.vue';
@@ -43,3 +33,13 @@ export default {
   },
 };
 </script>
+<template>
+  <csml-bot-editor
+    v-if="agentBot.id"
+    :agent-bot="agentBot"
+    @submit="updateBot"
+  />
+  <div v-else class="flex flex-col h-auto overflow-auto no-padding">
+    <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 35a64a199..60fd169d2 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/agentBots/csml/New.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/agentBots/csml/New.vue
@@ -1,7 +1,3 @@
-<template>
-  <csml-bot-editor :agent-bot="{ bot_config: {} }" @submit="saveBot" />
-</template>
-
 <script>
 import { mapGetters } from 'vuex';
 import { useAlert } from 'dashboard/composables';
@@ -39,3 +35,7 @@ export default {
   },
 };
 </script>
+
+<template>
+  <csml-bot-editor :agent-bot="{ bot_config: {} }" @submit="saveBot" />
+</template>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/agents/AddAgent.vue b/app/javascript/dashboard/routes/dashboard/settings/agents/AddAgent.vue
index 77368cd1b..74720e28a 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/agents/AddAgent.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/agents/AddAgent.vue
@@ -1,71 +1,3 @@
-<template>
-  <woot-modal :show.sync="show" :on-close="onClose">
-    <div class="flex flex-col h-auto overflow-auto">
-      <woot-modal-header
-        :header-title="$t('AGENT_MGMT.ADD.TITLE')"
-        :header-content="$t('AGENT_MGMT.ADD.DESC')"
-      />
-
-      <form
-        class="flex flex-col items-start w-full"
-        @submit.prevent="addAgent()"
-      >
-        <div class="w-full">
-          <label :class="{ error: v$.agentName.$error }">
-            {{ $t('AGENT_MGMT.ADD.FORM.NAME.LABEL') }}
-            <input
-              v-model.trim="agentName"
-              type="text"
-              :placeholder="$t('AGENT_MGMT.ADD.FORM.NAME.PLACEHOLDER')"
-              @input="v$.agentName.$touch"
-            />
-          </label>
-        </div>
-        <div class="w-full">
-          <label :class="{ error: v$.agentType.$error }">
-            {{ $t('AGENT_MGMT.ADD.FORM.AGENT_TYPE.LABEL') }}
-            <select v-model="agentType">
-              <option v-for="role in roles" :key="role.name" :value="role.name">
-                {{ role.label }}
-              </option>
-            </select>
-            <span v-if="v$.agentType.$error" class="message">
-              {{ $t('AGENT_MGMT.ADD.FORM.AGENT_TYPE.ERROR') }}
-            </span>
-          </label>
-        </div>
-        <div class="w-full">
-          <label :class="{ error: v$.agentEmail.$error }">
-            {{ $t('AGENT_MGMT.ADD.FORM.EMAIL.LABEL') }}
-            <input
-              v-model.trim="agentEmail"
-              type="text"
-              :placeholder="$t('AGENT_MGMT.ADD.FORM.EMAIL.PLACEHOLDER')"
-              @input="v$.agentEmail.$touch"
-            />
-          </label>
-        </div>
-        <div class="flex flex-row justify-end w-full gap-2 px-0 py-2">
-          <div class="w-full">
-            <woot-submit-button
-              :disabled="
-                v$.agentEmail.$invalid ||
-                v$.agentName.$invalid ||
-                uiFlags.isCreating
-              "
-              :button-text="$t('AGENT_MGMT.ADD.FORM.SUBMIT')"
-              :loading="uiFlags.isCreating"
-            />
-            <button class="button clear" @click.prevent="onClose">
-              {{ $t('AGENT_MGMT.ADD.CANCEL_BUTTON_TEXT') }}
-            </button>
-          </div>
-        </div>
-      </form>
-    </div>
-  </woot-modal>
-</template>
-
 <script>
 import { useVuelidate } from '@vuelidate/core';
 import { required, minLength, email } from '@vuelidate/validators';
@@ -154,3 +86,71 @@ export default {
   },
 };
 </script>
+
+<template>
+  <woot-modal :show.sync="show" :on-close="onClose">
+    <div class="flex flex-col h-auto overflow-auto">
+      <woot-modal-header
+        :header-title="$t('AGENT_MGMT.ADD.TITLE')"
+        :header-content="$t('AGENT_MGMT.ADD.DESC')"
+      />
+
+      <form
+        class="flex flex-col items-start w-full"
+        @submit.prevent="addAgent()"
+      >
+        <div class="w-full">
+          <label :class="{ error: v$.agentName.$error }">
+            {{ $t('AGENT_MGMT.ADD.FORM.NAME.LABEL') }}
+            <input
+              v-model.trim="agentName"
+              type="text"
+              :placeholder="$t('AGENT_MGMT.ADD.FORM.NAME.PLACEHOLDER')"
+              @input="v$.agentName.$touch"
+            />
+          </label>
+        </div>
+        <div class="w-full">
+          <label :class="{ error: v$.agentType.$error }">
+            {{ $t('AGENT_MGMT.ADD.FORM.AGENT_TYPE.LABEL') }}
+            <select v-model="agentType">
+              <option v-for="role in roles" :key="role.name" :value="role.name">
+                {{ role.label }}
+              </option>
+            </select>
+            <span v-if="v$.agentType.$error" class="message">
+              {{ $t('AGENT_MGMT.ADD.FORM.AGENT_TYPE.ERROR') }}
+            </span>
+          </label>
+        </div>
+        <div class="w-full">
+          <label :class="{ error: v$.agentEmail.$error }">
+            {{ $t('AGENT_MGMT.ADD.FORM.EMAIL.LABEL') }}
+            <input
+              v-model.trim="agentEmail"
+              type="text"
+              :placeholder="$t('AGENT_MGMT.ADD.FORM.EMAIL.PLACEHOLDER')"
+              @input="v$.agentEmail.$touch"
+            />
+          </label>
+        </div>
+        <div class="flex flex-row justify-end w-full gap-2 px-0 py-2">
+          <div class="w-full">
+            <woot-submit-button
+              :disabled="
+                v$.agentEmail.$invalid ||
+                v$.agentName.$invalid ||
+                uiFlags.isCreating
+              "
+              :button-text="$t('AGENT_MGMT.ADD.FORM.SUBMIT')"
+              :loading="uiFlags.isCreating"
+            />
+            <button class="button clear" @click.prevent="onClose">
+              {{ $t('AGENT_MGMT.ADD.CANCEL_BUTTON_TEXT') }}
+            </button>
+          </div>
+        </div>
+      </form>
+    </div>
+  </woot-modal>
+</template>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/agents/EditAgent.vue b/app/javascript/dashboard/routes/dashboard/settings/agents/EditAgent.vue
index 3c927b74c..a47e1cab2 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/agents/EditAgent.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/agents/EditAgent.vue
@@ -1,81 +1,3 @@
-<template>
-  <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()">
-        <div class="w-full">
-          <label :class="{ error: v$.agentName.$error }">
-            {{ $t('AGENT_MGMT.EDIT.FORM.NAME.LABEL') }}
-            <input
-              v-model.trim="agentName"
-              type="text"
-              :placeholder="$t('AGENT_MGMT.EDIT.FORM.NAME.PLACEHOLDER')"
-              @input="v$.agentName.$touch"
-            />
-          </label>
-        </div>
-
-        <div class="w-full">
-          <label :class="{ error: v$.agentType.$error }">
-            {{ $t('AGENT_MGMT.EDIT.FORM.AGENT_TYPE.LABEL') }}
-            <select v-model="agentType">
-              <option v-for="role in roles" :key="role.name" :value="role.name">
-                {{ role.label }}
-              </option>
-            </select>
-            <span v-if="v$.agentType.$error" class="message">
-              {{ $t('AGENT_MGMT.EDIT.FORM.AGENT_TYPE.ERROR') }}
-            </span>
-          </label>
-        </div>
-
-        <div class="w-full">
-          <label :class="{ error: v$.agentAvailability.$error }">
-            {{ $t('PROFILE_SETTINGS.FORM.AVAILABILITY.LABEL') }}
-            <select v-model="agentAvailability">
-              <option
-                v-for="role in availabilityStatuses"
-                :key="role.value"
-                :value="role.value"
-              >
-                {{ role.label }}
-              </option>
-            </select>
-            <span v-if="v$.agentAvailability.$error" class="message">
-              {{ $t('AGENT_MGMT.EDIT.FORM.AGENT_AVAILABILITY.ERROR') }}
-            </span>
-          </label>
-        </div>
-        <div class="flex flex-row justify-end w-full gap-2 px-0 py-2">
-          <div class="w-[50%]">
-            <woot-submit-button
-              :disabled="
-                v$.agentType.$invalid ||
-                v$.agentName.$invalid ||
-                uiFlags.isUpdating
-              "
-              :button-text="$t('AGENT_MGMT.EDIT.FORM.SUBMIT')"
-              :loading="uiFlags.isUpdating"
-            />
-            <button class="button clear" @click.prevent="onClose">
-              {{ $t('AGENT_MGMT.EDIT.CANCEL_BUTTON_TEXT') }}
-            </button>
-          </div>
-          <div class="w-[50%] text-right">
-            <woot-button
-              icon="lock-closed"
-              variant="clear"
-              @click.prevent="resetPassword"
-            >
-              {{ $t('AGENT_MGMT.EDIT.PASSWORD_RESET.ADMIN_RESET_BUTTON') }}
-            </woot-button>
-          </div>
-        </div>
-      </form>
-    </div>
-  </modal>
-</template>
-
 <script>
 import { useVuelidate } from '@vuelidate/core';
 import { required, minLength } from '@vuelidate/validators';
@@ -201,3 +123,81 @@ export default {
   },
 };
 </script>
+
+<template>
+  <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()">
+        <div class="w-full">
+          <label :class="{ error: v$.agentName.$error }">
+            {{ $t('AGENT_MGMT.EDIT.FORM.NAME.LABEL') }}
+            <input
+              v-model.trim="agentName"
+              type="text"
+              :placeholder="$t('AGENT_MGMT.EDIT.FORM.NAME.PLACEHOLDER')"
+              @input="v$.agentName.$touch"
+            />
+          </label>
+        </div>
+
+        <div class="w-full">
+          <label :class="{ error: v$.agentType.$error }">
+            {{ $t('AGENT_MGMT.EDIT.FORM.AGENT_TYPE.LABEL') }}
+            <select v-model="agentType">
+              <option v-for="role in roles" :key="role.name" :value="role.name">
+                {{ role.label }}
+              </option>
+            </select>
+            <span v-if="v$.agentType.$error" class="message">
+              {{ $t('AGENT_MGMT.EDIT.FORM.AGENT_TYPE.ERROR') }}
+            </span>
+          </label>
+        </div>
+
+        <div class="w-full">
+          <label :class="{ error: v$.agentAvailability.$error }">
+            {{ $t('PROFILE_SETTINGS.FORM.AVAILABILITY.LABEL') }}
+            <select v-model="agentAvailability">
+              <option
+                v-for="role in availabilityStatuses"
+                :key="role.value"
+                :value="role.value"
+              >
+                {{ role.label }}
+              </option>
+            </select>
+            <span v-if="v$.agentAvailability.$error" class="message">
+              {{ $t('AGENT_MGMT.EDIT.FORM.AGENT_AVAILABILITY.ERROR') }}
+            </span>
+          </label>
+        </div>
+        <div class="flex flex-row justify-end w-full gap-2 px-0 py-2">
+          <div class="w-[50%]">
+            <woot-submit-button
+              :disabled="
+                v$.agentType.$invalid ||
+                v$.agentName.$invalid ||
+                uiFlags.isUpdating
+              "
+              :button-text="$t('AGENT_MGMT.EDIT.FORM.SUBMIT')"
+              :loading="uiFlags.isUpdating"
+            />
+            <button class="button clear" @click.prevent="onClose">
+              {{ $t('AGENT_MGMT.EDIT.CANCEL_BUTTON_TEXT') }}
+            </button>
+          </div>
+          <div class="w-[50%] text-right">
+            <woot-button
+              icon="lock-closed"
+              variant="clear"
+              @click.prevent="resetPassword"
+            >
+              {{ $t('AGENT_MGMT.EDIT.PASSWORD_RESET.ADMIN_RESET_BUTTON') }}
+            </woot-button>
+          </div>
+        </div>
+      </form>
+    </div>
+  </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 6a2577282..846252d73 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/agents/Index.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/agents/Index.vue
@@ -1,3 +1,127 @@
+<script>
+import { mapGetters } from 'vuex';
+import { useAlert } from 'dashboard/composables';
+import globalConfigMixin from 'shared/mixins/globalConfigMixin';
+import Thumbnail from '../../../../components/widgets/Thumbnail.vue';
+import AddAgent from './AddAgent.vue';
+import EditAgent from './EditAgent.vue';
+
+export default {
+  components: {
+    AddAgent,
+    EditAgent,
+    Thumbnail,
+  },
+  mixins: [globalConfigMixin],
+  data() {
+    return {
+      loading: {},
+      showAddPopup: false,
+      showDeletePopup: false,
+      showEditPopup: false,
+      agentAPI: {
+        message: '',
+      },
+      currentAgent: {},
+    };
+  },
+  computed: {
+    ...mapGetters({
+      agentList: 'agents/getAgents',
+      uiFlags: 'agents/getUIFlags',
+      currentUserId: 'getCurrentUserID',
+      globalConfig: 'globalConfig/get',
+    }),
+    deleteConfirmText() {
+      return `${this.$t('AGENT_MGMT.DELETE.CONFIRM.YES')} ${
+        this.currentAgent.name
+      }`;
+    },
+    deleteRejectText() {
+      return `${this.$t('AGENT_MGMT.DELETE.CONFIRM.NO')} ${
+        this.currentAgent.name
+      }`;
+    },
+    deleteMessage() {
+      return ` ${this.currentAgent.name}?`;
+    },
+  },
+  mounted() {
+    this.$store.dispatch('agents/get');
+  },
+  methods: {
+    showEditAction(agent) {
+      return this.currentUserId !== agent.id;
+    },
+    showDeleteAction(agent) {
+      if (this.currentUserId === agent.id) {
+        return false;
+      }
+
+      if (!agent.confirmed) {
+        return true;
+      }
+
+      if (agent.role === 'administrator') {
+        return this.verifiedAdministrators().length !== 1;
+      }
+      return true;
+    },
+    verifiedAdministrators() {
+      return this.agentList.filter(
+        agent => agent.role === 'administrator' && agent.confirmed
+      );
+    },
+    // Edit Function
+    openAddPopup() {
+      this.showAddPopup = true;
+    },
+    hideAddPopup() {
+      this.showAddPopup = false;
+    },
+
+    // Edit Function
+    openEditPopup(agent) {
+      this.showEditPopup = true;
+      this.currentAgent = agent;
+    },
+    hideEditPopup() {
+      this.showEditPopup = false;
+    },
+
+    // Delete Function
+    openDeletePopup(agent) {
+      this.showDeletePopup = true;
+      this.currentAgent = agent;
+    },
+    closeDeletePopup() {
+      this.showDeletePopup = false;
+    },
+    confirmDeletion() {
+      this.loading[this.currentAgent.id] = true;
+      this.closeDeletePopup();
+      this.deleteAgent(this.currentAgent.id);
+    },
+    async deleteAgent(id) {
+      try {
+        await this.$store.dispatch('agents/delete', id);
+        this.showAlertMessage(this.$t('AGENT_MGMT.DELETE.API.SUCCESS_MESSAGE'));
+      } catch (error) {
+        this.showAlertMessage(this.$t('AGENT_MGMT.DELETE.API.ERROR_MESSAGE'));
+      }
+    },
+    // Show SnackBar
+    showAlertMessage(message) {
+      // Reset loading, current selected agent
+      this.loading[this.currentAgent.id] = false;
+      this.currentAgent = {};
+      // Show message
+      this.agentAPI.message = message;
+      useAlert(message);
+    },
+  },
+};
+</script>
 <template>
   <div class="flex-1 p-4 overflow-auto">
     <woot-button
@@ -124,127 +248,3 @@
     />
   </div>
 </template>
-<script>
-import { mapGetters } from 'vuex';
-import { useAlert } from 'dashboard/composables';
-import globalConfigMixin from 'shared/mixins/globalConfigMixin';
-import Thumbnail from '../../../../components/widgets/Thumbnail.vue';
-import AddAgent from './AddAgent.vue';
-import EditAgent from './EditAgent.vue';
-
-export default {
-  components: {
-    AddAgent,
-    EditAgent,
-    Thumbnail,
-  },
-  mixins: [globalConfigMixin],
-  data() {
-    return {
-      loading: {},
-      showAddPopup: false,
-      showDeletePopup: false,
-      showEditPopup: false,
-      agentAPI: {
-        message: '',
-      },
-      currentAgent: {},
-    };
-  },
-  computed: {
-    ...mapGetters({
-      agentList: 'agents/getAgents',
-      uiFlags: 'agents/getUIFlags',
-      currentUserId: 'getCurrentUserID',
-      globalConfig: 'globalConfig/get',
-    }),
-    deleteConfirmText() {
-      return `${this.$t('AGENT_MGMT.DELETE.CONFIRM.YES')} ${
-        this.currentAgent.name
-      }`;
-    },
-    deleteRejectText() {
-      return `${this.$t('AGENT_MGMT.DELETE.CONFIRM.NO')} ${
-        this.currentAgent.name
-      }`;
-    },
-    deleteMessage() {
-      return ` ${this.currentAgent.name}?`;
-    },
-  },
-  mounted() {
-    this.$store.dispatch('agents/get');
-  },
-  methods: {
-    showEditAction(agent) {
-      return this.currentUserId !== agent.id;
-    },
-    showDeleteAction(agent) {
-      if (this.currentUserId === agent.id) {
-        return false;
-      }
-
-      if (!agent.confirmed) {
-        return true;
-      }
-
-      if (agent.role === 'administrator') {
-        return this.verifiedAdministrators().length !== 1;
-      }
-      return true;
-    },
-    verifiedAdministrators() {
-      return this.agentList.filter(
-        agent => agent.role === 'administrator' && agent.confirmed
-      );
-    },
-    // Edit Function
-    openAddPopup() {
-      this.showAddPopup = true;
-    },
-    hideAddPopup() {
-      this.showAddPopup = false;
-    },
-
-    // Edit Function
-    openEditPopup(agent) {
-      this.showEditPopup = true;
-      this.currentAgent = agent;
-    },
-    hideEditPopup() {
-      this.showEditPopup = false;
-    },
-
-    // Delete Function
-    openDeletePopup(agent) {
-      this.showDeletePopup = true;
-      this.currentAgent = agent;
-    },
-    closeDeletePopup() {
-      this.showDeletePopup = false;
-    },
-    confirmDeletion() {
-      this.loading[this.currentAgent.id] = true;
-      this.closeDeletePopup();
-      this.deleteAgent(this.currentAgent.id);
-    },
-    async deleteAgent(id) {
-      try {
-        await this.$store.dispatch('agents/delete', id);
-        this.showAlertMessage(this.$t('AGENT_MGMT.DELETE.API.SUCCESS_MESSAGE'));
-      } catch (error) {
-        this.showAlertMessage(this.$t('AGENT_MGMT.DELETE.API.ERROR_MESSAGE'));
-      }
-    },
-    // Show SnackBar
-    showAlertMessage(message) {
-      // Reset loading, current selected agent
-      this.loading[this.currentAgent.id] = false;
-      this.currentAgent = {};
-      // Show message
-      this.agentAPI.message = message;
-      useAlert(message);
-    },
-  },
-};
-</script>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/attributes/AddAttribute.vue b/app/javascript/dashboard/routes/dashboard/settings/attributes/AddAttribute.vue
index a4a489259..b29b19a8c 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/attributes/AddAttribute.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/attributes/AddAttribute.vue
@@ -1,130 +1,3 @@
-<template>
-  <woot-modal :show.sync="show" :on-close="onClose">
-    <div class="flex flex-col h-auto overflow-auto">
-      <woot-modal-header :header-title="$t('ATTRIBUTES_MGMT.ADD.TITLE')" />
-
-      <form class="flex w-full" @submit.prevent="addAttributes">
-        <div class="w-full">
-          <label :class="{ error: v$.attributeModel.$error }">
-            {{ $t('ATTRIBUTES_MGMT.ADD.FORM.MODEL.LABEL') }}
-            <select v-model="attributeModel">
-              <option v-for="model in models" :key="model.id" :value="model.id">
-                {{ model.option }}
-              </option>
-            </select>
-            <span v-if="v$.attributeModel.$error" class="message">
-              {{ $t('ATTRIBUTES_MGMT.ADD.FORM.MODEL.ERROR') }}
-            </span>
-          </label>
-          <woot-input
-            v-model="displayName"
-            :label="$t('ATTRIBUTES_MGMT.ADD.FORM.NAME.LABEL')"
-            type="text"
-            :class="{ error: v$.displayName.$error }"
-            :error="
-              v$.displayName.$error
-                ? $t('ATTRIBUTES_MGMT.ADD.FORM.NAME.ERROR')
-                : ''
-            "
-            :placeholder="$t('ATTRIBUTES_MGMT.ADD.FORM.NAME.PLACEHOLDER')"
-            @input="onDisplayNameChange"
-            @blur="v$.displayName.$touch"
-          />
-          <woot-input
-            v-model="attributeKey"
-            :label="$t('ATTRIBUTES_MGMT.ADD.FORM.KEY.LABEL')"
-            type="text"
-            :class="{ error: v$.attributeKey.$error }"
-            :error="v$.attributeKey.$error ? keyErrorMessage : ''"
-            :placeholder="$t('ATTRIBUTES_MGMT.ADD.FORM.KEY.PLACEHOLDER')"
-            @blur="v$.attributeKey.$touch"
-          />
-          <label :class="{ error: v$.description.$error }">
-            {{ $t('ATTRIBUTES_MGMT.ADD.FORM.DESC.LABEL') }}
-            <textarea
-              v-model="description"
-              rows="3"
-              type="text"
-              :placeholder="$t('ATTRIBUTES_MGMT.ADD.FORM.DESC.PLACEHOLDER')"
-              @blur="v$.description.$touch"
-            />
-            <span v-if="v$.description.$error" class="message">
-              {{ $t('ATTRIBUTES_MGMT.ADD.FORM.DESC.ERROR') }}
-            </span>
-          </label>
-          <label :class="{ error: v$.attributeType.$error }">
-            {{ $t('ATTRIBUTES_MGMT.ADD.FORM.TYPE.LABEL') }}
-            <select v-model="attributeType">
-              <option v-for="type in types" :key="type.id" :value="type.id">
-                {{ type.option }}
-              </option>
-            </select>
-            <span v-if="v$.attributeType.$error" class="message">
-              {{ $t('ATTRIBUTES_MGMT.ADD.FORM.TYPE.ERROR') }}
-            </span>
-          </label>
-          <div v-if="isAttributeTypeList" class="multiselect--wrap">
-            <label>
-              {{ $t('ATTRIBUTES_MGMT.ADD.FORM.TYPE.LIST.LABEL') }}
-            </label>
-            <multiselect
-              ref="tagInput"
-              v-model="values"
-              :placeholder="
-                $t('ATTRIBUTES_MGMT.ADD.FORM.TYPE.LIST.PLACEHOLDER')
-              "
-              label="name"
-              track-by="name"
-              :class="{ invalid: isMultiselectInvalid }"
-              :options="options"
-              :multiple="true"
-              :taggable="true"
-              @close="onTouch"
-              @tag="addTagValue"
-            />
-            <label v-show="isMultiselectInvalid" class="error-message">
-              {{ $t('ATTRIBUTES_MGMT.ADD.FORM.TYPE.LIST.ERROR') }}
-            </label>
-          </div>
-          <div v-if="isAttributeTypeText">
-            <input
-              v-model="regexEnabled"
-              type="checkbox"
-              @input="toggleRegexEnabled"
-            />
-            {{ $t('ATTRIBUTES_MGMT.ADD.FORM.ENABLE_REGEX.LABEL') }}
-          </div>
-          <woot-input
-            v-if="isAttributeTypeText && isRegexEnabled"
-            v-model="regexPattern"
-            :label="$t('ATTRIBUTES_MGMT.ADD.FORM.REGEX_PATTERN.LABEL')"
-            type="text"
-            :placeholder="
-              $t('ATTRIBUTES_MGMT.ADD.FORM.REGEX_PATTERN.PLACEHOLDER')
-            "
-          />
-          <woot-input
-            v-if="isAttributeTypeText && isRegexEnabled"
-            v-model="regexCue"
-            :label="$t('ATTRIBUTES_MGMT.ADD.FORM.REGEX_CUE.LABEL')"
-            type="text"
-            :placeholder="$t('ATTRIBUTES_MGMT.ADD.FORM.REGEX_CUE.PLACEHOLDER')"
-          />
-          <div class="flex flex-row justify-end w-full gap-2 px-0 py-2">
-            <woot-submit-button
-              :disabled="isButtonDisabled"
-              :button-text="$t('ATTRIBUTES_MGMT.ADD.SUBMIT')"
-            />
-            <button class="button clear" @click.prevent="onClose">
-              {{ $t('ATTRIBUTES_MGMT.ADD.CANCEL_BUTTON_TEXT') }}
-            </button>
-          </div>
-        </div>
-      </form>
-    </div>
-  </woot-modal>
-</template>
-
 <script>
 import { useVuelidate } from '@vuelidate/core';
 import { required, minLength } from '@vuelidate/validators';
@@ -274,6 +147,133 @@ export default {
   },
 };
 </script>
+
+<template>
+  <woot-modal :show.sync="show" :on-close="onClose">
+    <div class="flex flex-col h-auto overflow-auto">
+      <woot-modal-header :header-title="$t('ATTRIBUTES_MGMT.ADD.TITLE')" />
+
+      <form class="flex w-full" @submit.prevent="addAttributes">
+        <div class="w-full">
+          <label :class="{ error: v$.attributeModel.$error }">
+            {{ $t('ATTRIBUTES_MGMT.ADD.FORM.MODEL.LABEL') }}
+            <select v-model="attributeModel">
+              <option v-for="model in models" :key="model.id" :value="model.id">
+                {{ model.option }}
+              </option>
+            </select>
+            <span v-if="v$.attributeModel.$error" class="message">
+              {{ $t('ATTRIBUTES_MGMT.ADD.FORM.MODEL.ERROR') }}
+            </span>
+          </label>
+          <woot-input
+            v-model="displayName"
+            :label="$t('ATTRIBUTES_MGMT.ADD.FORM.NAME.LABEL')"
+            type="text"
+            :class="{ error: v$.displayName.$error }"
+            :error="
+              v$.displayName.$error
+                ? $t('ATTRIBUTES_MGMT.ADD.FORM.NAME.ERROR')
+                : ''
+            "
+            :placeholder="$t('ATTRIBUTES_MGMT.ADD.FORM.NAME.PLACEHOLDER')"
+            @input="onDisplayNameChange"
+            @blur="v$.displayName.$touch"
+          />
+          <woot-input
+            v-model="attributeKey"
+            :label="$t('ATTRIBUTES_MGMT.ADD.FORM.KEY.LABEL')"
+            type="text"
+            :class="{ error: v$.attributeKey.$error }"
+            :error="v$.attributeKey.$error ? keyErrorMessage : ''"
+            :placeholder="$t('ATTRIBUTES_MGMT.ADD.FORM.KEY.PLACEHOLDER')"
+            @blur="v$.attributeKey.$touch"
+          />
+          <label :class="{ error: v$.description.$error }">
+            {{ $t('ATTRIBUTES_MGMT.ADD.FORM.DESC.LABEL') }}
+            <textarea
+              v-model="description"
+              rows="3"
+              type="text"
+              :placeholder="$t('ATTRIBUTES_MGMT.ADD.FORM.DESC.PLACEHOLDER')"
+              @blur="v$.description.$touch"
+            />
+            <span v-if="v$.description.$error" class="message">
+              {{ $t('ATTRIBUTES_MGMT.ADD.FORM.DESC.ERROR') }}
+            </span>
+          </label>
+          <label :class="{ error: v$.attributeType.$error }">
+            {{ $t('ATTRIBUTES_MGMT.ADD.FORM.TYPE.LABEL') }}
+            <select v-model="attributeType">
+              <option v-for="type in types" :key="type.id" :value="type.id">
+                {{ type.option }}
+              </option>
+            </select>
+            <span v-if="v$.attributeType.$error" class="message">
+              {{ $t('ATTRIBUTES_MGMT.ADD.FORM.TYPE.ERROR') }}
+            </span>
+          </label>
+          <div v-if="isAttributeTypeList" class="multiselect--wrap">
+            <label>
+              {{ $t('ATTRIBUTES_MGMT.ADD.FORM.TYPE.LIST.LABEL') }}
+            </label>
+            <multiselect
+              ref="tagInput"
+              v-model="values"
+              :placeholder="
+                $t('ATTRIBUTES_MGMT.ADD.FORM.TYPE.LIST.PLACEHOLDER')
+              "
+              label="name"
+              track-by="name"
+              :class="{ invalid: isMultiselectInvalid }"
+              :options="options"
+              :multiple="true"
+              :taggable="true"
+              @close="onTouch"
+              @tag="addTagValue"
+            />
+            <label v-show="isMultiselectInvalid" class="error-message">
+              {{ $t('ATTRIBUTES_MGMT.ADD.FORM.TYPE.LIST.ERROR') }}
+            </label>
+          </div>
+          <div v-if="isAttributeTypeText">
+            <input
+              v-model="regexEnabled"
+              type="checkbox"
+              @input="toggleRegexEnabled"
+            />
+            {{ $t('ATTRIBUTES_MGMT.ADD.FORM.ENABLE_REGEX.LABEL') }}
+          </div>
+          <woot-input
+            v-if="isAttributeTypeText && isRegexEnabled"
+            v-model="regexPattern"
+            :label="$t('ATTRIBUTES_MGMT.ADD.FORM.REGEX_PATTERN.LABEL')"
+            type="text"
+            :placeholder="
+              $t('ATTRIBUTES_MGMT.ADD.FORM.REGEX_PATTERN.PLACEHOLDER')
+            "
+          />
+          <woot-input
+            v-if="isAttributeTypeText && isRegexEnabled"
+            v-model="regexCue"
+            :label="$t('ATTRIBUTES_MGMT.ADD.FORM.REGEX_CUE.LABEL')"
+            type="text"
+            :placeholder="$t('ATTRIBUTES_MGMT.ADD.FORM.REGEX_CUE.PLACEHOLDER')"
+          />
+          <div class="flex flex-row justify-end w-full gap-2 px-0 py-2">
+            <woot-submit-button
+              :disabled="isButtonDisabled"
+              :button-text="$t('ATTRIBUTES_MGMT.ADD.SUBMIT')"
+            />
+            <button class="button clear" @click.prevent="onClose">
+              {{ $t('ATTRIBUTES_MGMT.ADD.CANCEL_BUTTON_TEXT') }}
+            </button>
+          </div>
+        </div>
+      </form>
+    </div>
+  </woot-modal>
+</template>
 <style lang="scss" scoped>
 .key-value {
   padding: 0 var(--space-small) var(--space-small) 0;
diff --git a/app/javascript/dashboard/routes/dashboard/settings/attributes/CustomAttribute.vue b/app/javascript/dashboard/routes/dashboard/settings/attributes/CustomAttribute.vue
index 179c06d54..5e2bda7aa 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/attributes/CustomAttribute.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/attributes/CustomAttribute.vue
@@ -1,3 +1,109 @@
+<script>
+import { mapGetters } from 'vuex';
+import { useAlert } from 'dashboard/composables';
+import EditAttribute from './EditAttribute.vue';
+
+export default {
+  components: {
+    EditAttribute,
+  },
+  data() {
+    return {
+      selectedTabIndex: 0,
+      showEditPopup: false,
+      showDeletePopup: false,
+      selectedAttribute: {},
+    };
+  },
+  computed: {
+    ...mapGetters({
+      uiFlags: 'attributes/getUIFlags',
+    }),
+    attributes() {
+      const attributeModel = this.selectedTabIndex
+        ? 'contact_attribute'
+        : 'conversation_attribute';
+
+      return this.$store.getters['attributes/getAttributesByModel'](
+        attributeModel
+      );
+    },
+    tabs() {
+      return [
+        {
+          key: 0,
+          name: this.$t('ATTRIBUTES_MGMT.TABS.CONVERSATION'),
+        },
+        {
+          key: 1,
+          name: this.$t('ATTRIBUTES_MGMT.TABS.CONTACT'),
+        },
+      ];
+    },
+    deleteConfirmText() {
+      return `${this.$t('ATTRIBUTES_MGMT.DELETE.CONFIRM.YES')} ${
+        this.selectedAttribute.attribute_display_name
+      }`;
+    },
+    deleteRejectText() {
+      return this.$t('ATTRIBUTES_MGMT.DELETE.CONFIRM.NO');
+    },
+    confirmDeleteTitle() {
+      return this.$t('ATTRIBUTES_MGMT.DELETE.CONFIRM.TITLE', {
+        attributeName: this.selectedAttribute.attribute_display_name,
+      });
+    },
+    confirmPlaceHolderText() {
+      return `${this.$t('ATTRIBUTES_MGMT.DELETE.CONFIRM.PLACE_HOLDER', {
+        attributeName: this.selectedAttribute.attribute_display_name,
+      })}`;
+    },
+  },
+  mounted() {
+    this.fetchAttributes(this.selectedTabIndex);
+  },
+  methods: {
+    onClickTabChange(index) {
+      this.selectedTabIndex = index;
+      this.fetchAttributes(index);
+    },
+    fetchAttributes(index) {
+      this.$store.dispatch('attributes/get', index);
+    },
+    async deleteAttributes({ id }) {
+      try {
+        await this.$store.dispatch('attributes/delete', id);
+        useAlert(this.$t('ATTRIBUTES_MGMT.DELETE.API.SUCCESS_MESSAGE'));
+      } catch (error) {
+        const errorMessage =
+          error?.response?.message ||
+          this.$t('ATTRIBUTES_MGMT.DELETE.API.ERROR_MESSAGE');
+        useAlert(errorMessage);
+      }
+    },
+    openEditPopup(response) {
+      this.showEditPopup = true;
+      this.selectedAttribute = response;
+    },
+    hideEditPopup() {
+      this.showEditPopup = false;
+    },
+    confirmDeletion() {
+      this.deleteAttributes(this.selectedAttribute);
+      this.closeDelete();
+    },
+    openDelete(value) {
+      this.showDeletePopup = true;
+      this.selectedAttribute = value;
+    },
+    closeDelete() {
+      this.showDeletePopup = false;
+      this.selectedAttribute = {};
+    },
+  },
+};
+</script>
+
 <template>
   <div class="flex flex-row gap-4 p-8">
     <div class="w-full lg:w-3/5">
@@ -106,112 +212,6 @@
   </div>
 </template>
 
-<script>
-import { mapGetters } from 'vuex';
-import { useAlert } from 'dashboard/composables';
-import EditAttribute from './EditAttribute.vue';
-
-export default {
-  components: {
-    EditAttribute,
-  },
-  data() {
-    return {
-      selectedTabIndex: 0,
-      showEditPopup: false,
-      showDeletePopup: false,
-      selectedAttribute: {},
-    };
-  },
-  computed: {
-    ...mapGetters({
-      uiFlags: 'attributes/getUIFlags',
-    }),
-    attributes() {
-      const attributeModel = this.selectedTabIndex
-        ? 'contact_attribute'
-        : 'conversation_attribute';
-
-      return this.$store.getters['attributes/getAttributesByModel'](
-        attributeModel
-      );
-    },
-    tabs() {
-      return [
-        {
-          key: 0,
-          name: this.$t('ATTRIBUTES_MGMT.TABS.CONVERSATION'),
-        },
-        {
-          key: 1,
-          name: this.$t('ATTRIBUTES_MGMT.TABS.CONTACT'),
-        },
-      ];
-    },
-    deleteConfirmText() {
-      return `${this.$t('ATTRIBUTES_MGMT.DELETE.CONFIRM.YES')} ${
-        this.selectedAttribute.attribute_display_name
-      }`;
-    },
-    deleteRejectText() {
-      return this.$t('ATTRIBUTES_MGMT.DELETE.CONFIRM.NO');
-    },
-    confirmDeleteTitle() {
-      return this.$t('ATTRIBUTES_MGMT.DELETE.CONFIRM.TITLE', {
-        attributeName: this.selectedAttribute.attribute_display_name,
-      });
-    },
-    confirmPlaceHolderText() {
-      return `${this.$t('ATTRIBUTES_MGMT.DELETE.CONFIRM.PLACE_HOLDER', {
-        attributeName: this.selectedAttribute.attribute_display_name,
-      })}`;
-    },
-  },
-  mounted() {
-    this.fetchAttributes(this.selectedTabIndex);
-  },
-  methods: {
-    onClickTabChange(index) {
-      this.selectedTabIndex = index;
-      this.fetchAttributes(index);
-    },
-    fetchAttributes(index) {
-      this.$store.dispatch('attributes/get', index);
-    },
-    async deleteAttributes({ id }) {
-      try {
-        await this.$store.dispatch('attributes/delete', id);
-        useAlert(this.$t('ATTRIBUTES_MGMT.DELETE.API.SUCCESS_MESSAGE'));
-      } catch (error) {
-        const errorMessage =
-          error?.response?.message ||
-          this.$t('ATTRIBUTES_MGMT.DELETE.API.ERROR_MESSAGE');
-        useAlert(errorMessage);
-      }
-    },
-    openEditPopup(response) {
-      this.showEditPopup = true;
-      this.selectedAttribute = response;
-    },
-    hideEditPopup() {
-      this.showEditPopup = false;
-    },
-    confirmDeletion() {
-      this.deleteAttributes(this.selectedAttribute);
-      this.closeDelete();
-    },
-    openDelete(value) {
-      this.showDeletePopup = true;
-      this.selectedAttribute = value;
-    },
-    closeDelete() {
-      this.showDeletePopup = false;
-      this.selectedAttribute = {};
-    },
-  },
-};
-</script>
-
 <style lang="scss" scoped>
 .attribute-key {
   font-family: monospace;
diff --git a/app/javascript/dashboard/routes/dashboard/settings/attributes/EditAttribute.vue b/app/javascript/dashboard/routes/dashboard/settings/attributes/EditAttribute.vue
index ad1b1ea69..16a507505 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/attributes/EditAttribute.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/attributes/EditAttribute.vue
@@ -1,112 +1,3 @@
-<template>
-  <div class="flex flex-col h-auto overflow-auto">
-    <woot-modal-header :header-title="pageTitle" />
-    <form class="flex flex-col w-full" @submit.prevent="editAttributes">
-      <div class="w-full">
-        <woot-input
-          v-model.trim="displayName"
-          :label="$t('ATTRIBUTES_MGMT.ADD.FORM.NAME.LABEL')"
-          type="text"
-          :class="{ error: v$.displayName.$error }"
-          :error="
-            v$.displayName.$error
-              ? $t('ATTRIBUTES_MGMT.ADD.FORM.NAME.ERROR')
-              : ''
-          "
-          :placeholder="$t('ATTRIBUTES_MGMT.ADD.FORM.NAME.PLACEHOLDER')"
-          @blur="v$.displayName.$touch"
-        />
-        <woot-input
-          v-model.trim="attributeKey"
-          :label="$t('ATTRIBUTES_MGMT.ADD.FORM.KEY.LABEL')"
-          type="text"
-          :class="{ error: v$.attributeKey.$error }"
-          :error="v$.attributeKey.$error ? keyErrorMessage : ''"
-          :placeholder="$t('ATTRIBUTES_MGMT.ADD.FORM.KEY.PLACEHOLDER')"
-          readonly
-          @blur="v$.attributeKey.$touch"
-        />
-        <label :class="{ error: v$.description.$error }">
-          {{ $t('ATTRIBUTES_MGMT.ADD.FORM.DESC.LABEL') }}
-          <textarea
-            v-model.trim="description"
-            rows="5"
-            type="text"
-            :placeholder="$t('ATTRIBUTES_MGMT.ADD.FORM.DESC.PLACEHOLDER')"
-            @blur="v$.description.$touch"
-          />
-          <span v-if="v$.description.$error" class="message">
-            {{ $t('ATTRIBUTES_MGMT.ADD.FORM.DESC.ERROR') }}
-          </span>
-        </label>
-        <label :class="{ error: v$.attributeType.$error }">
-          {{ $t('ATTRIBUTES_MGMT.ADD.FORM.TYPE.LABEL') }}
-          <select v-model="attributeType" disabled>
-            <option v-for="type in types" :key="type.id" :value="type.id">
-              {{ type.option }}
-            </option>
-          </select>
-          <span v-if="v$.attributeType.$error" class="message">
-            {{ $t('ATTRIBUTES_MGMT.ADD.FORM.TYPE.ERROR') }}
-          </span>
-        </label>
-        <div v-if="isAttributeTypeList" class="multiselect--wrap">
-          <label>
-            {{ $t('ATTRIBUTES_MGMT.EDIT.TYPE.LIST.LABEL') }}
-          </label>
-          <multiselect
-            ref="tagInput"
-            v-model="values"
-            :placeholder="$t('ATTRIBUTES_MGMT.ADD.FORM.TYPE.LIST.PLACEHOLDER')"
-            label="name"
-            track-by="name"
-            :class="{ invalid: isMultiselectInvalid }"
-            :options="options"
-            :multiple="true"
-            :taggable="true"
-            @tag="addTagValue"
-          />
-          <label v-show="isMultiselectInvalid" class="error-message">
-            {{ $t('ATTRIBUTES_MGMT.ADD.FORM.TYPE.LIST.ERROR') }}
-          </label>
-        </div>
-        <div v-if="isAttributeTypeText">
-          <input
-            v-model="regexEnabled"
-            type="checkbox"
-            @input="toggleRegexEnabled"
-          />
-          {{ $t('ATTRIBUTES_MGMT.ADD.FORM.ENABLE_REGEX.LABEL') }}
-        </div>
-        <woot-input
-          v-if="isAttributeTypeText && isRegexEnabled"
-          v-model="regexPattern"
-          :label="$t('ATTRIBUTES_MGMT.ADD.FORM.REGEX_PATTERN.LABEL')"
-          type="text"
-          :placeholder="
-            $t('ATTRIBUTES_MGMT.ADD.FORM.REGEX_PATTERN.PLACEHOLDER')
-          "
-        />
-        <woot-input
-          v-if="isAttributeTypeText && isRegexEnabled"
-          v-model="regexCue"
-          :label="$t('ATTRIBUTES_MGMT.ADD.FORM.REGEX_CUE.LABEL')"
-          type="text"
-          :placeholder="$t('ATTRIBUTES_MGMT.ADD.FORM.REGEX_CUE.PLACEHOLDER')"
-        />
-      </div>
-      <div class="flex flex-row justify-end w-full gap-2 px-0 py-2">
-        <woot-button :is-loading="isUpdating" :disabled="isButtonDisabled">
-          {{ $t('ATTRIBUTES_MGMT.EDIT.UPDATE_BUTTON_TEXT') }}
-        </woot-button>
-        <woot-button variant="clear" @click.prevent="onClose">
-          {{ $t('ATTRIBUTES_MGMT.ADD.CANCEL_BUTTON_TEXT') }}
-        </woot-button>
-      </div>
-    </form>
-  </div>
-</template>
-
 <script>
 import { mapGetters } from 'vuex';
 import { useVuelidate } from '@vuelidate/core';
@@ -276,6 +167,115 @@ export default {
   },
 };
 </script>
+
+<template>
+  <div class="flex flex-col h-auto overflow-auto">
+    <woot-modal-header :header-title="pageTitle" />
+    <form class="flex flex-col w-full" @submit.prevent="editAttributes">
+      <div class="w-full">
+        <woot-input
+          v-model.trim="displayName"
+          :label="$t('ATTRIBUTES_MGMT.ADD.FORM.NAME.LABEL')"
+          type="text"
+          :class="{ error: v$.displayName.$error }"
+          :error="
+            v$.displayName.$error
+              ? $t('ATTRIBUTES_MGMT.ADD.FORM.NAME.ERROR')
+              : ''
+          "
+          :placeholder="$t('ATTRIBUTES_MGMT.ADD.FORM.NAME.PLACEHOLDER')"
+          @blur="v$.displayName.$touch"
+        />
+        <woot-input
+          v-model.trim="attributeKey"
+          :label="$t('ATTRIBUTES_MGMT.ADD.FORM.KEY.LABEL')"
+          type="text"
+          :class="{ error: v$.attributeKey.$error }"
+          :error="v$.attributeKey.$error ? keyErrorMessage : ''"
+          :placeholder="$t('ATTRIBUTES_MGMT.ADD.FORM.KEY.PLACEHOLDER')"
+          readonly
+          @blur="v$.attributeKey.$touch"
+        />
+        <label :class="{ error: v$.description.$error }">
+          {{ $t('ATTRIBUTES_MGMT.ADD.FORM.DESC.LABEL') }}
+          <textarea
+            v-model.trim="description"
+            rows="5"
+            type="text"
+            :placeholder="$t('ATTRIBUTES_MGMT.ADD.FORM.DESC.PLACEHOLDER')"
+            @blur="v$.description.$touch"
+          />
+          <span v-if="v$.description.$error" class="message">
+            {{ $t('ATTRIBUTES_MGMT.ADD.FORM.DESC.ERROR') }}
+          </span>
+        </label>
+        <label :class="{ error: v$.attributeType.$error }">
+          {{ $t('ATTRIBUTES_MGMT.ADD.FORM.TYPE.LABEL') }}
+          <select v-model="attributeType" disabled>
+            <option v-for="type in types" :key="type.id" :value="type.id">
+              {{ type.option }}
+            </option>
+          </select>
+          <span v-if="v$.attributeType.$error" class="message">
+            {{ $t('ATTRIBUTES_MGMT.ADD.FORM.TYPE.ERROR') }}
+          </span>
+        </label>
+        <div v-if="isAttributeTypeList" class="multiselect--wrap">
+          <label>
+            {{ $t('ATTRIBUTES_MGMT.EDIT.TYPE.LIST.LABEL') }}
+          </label>
+          <multiselect
+            ref="tagInput"
+            v-model="values"
+            :placeholder="$t('ATTRIBUTES_MGMT.ADD.FORM.TYPE.LIST.PLACEHOLDER')"
+            label="name"
+            track-by="name"
+            :class="{ invalid: isMultiselectInvalid }"
+            :options="options"
+            :multiple="true"
+            :taggable="true"
+            @tag="addTagValue"
+          />
+          <label v-show="isMultiselectInvalid" class="error-message">
+            {{ $t('ATTRIBUTES_MGMT.ADD.FORM.TYPE.LIST.ERROR') }}
+          </label>
+        </div>
+        <div v-if="isAttributeTypeText">
+          <input
+            v-model="regexEnabled"
+            type="checkbox"
+            @input="toggleRegexEnabled"
+          />
+          {{ $t('ATTRIBUTES_MGMT.ADD.FORM.ENABLE_REGEX.LABEL') }}
+        </div>
+        <woot-input
+          v-if="isAttributeTypeText && isRegexEnabled"
+          v-model="regexPattern"
+          :label="$t('ATTRIBUTES_MGMT.ADD.FORM.REGEX_PATTERN.LABEL')"
+          type="text"
+          :placeholder="
+            $t('ATTRIBUTES_MGMT.ADD.FORM.REGEX_PATTERN.PLACEHOLDER')
+          "
+        />
+        <woot-input
+          v-if="isAttributeTypeText && isRegexEnabled"
+          v-model="regexCue"
+          :label="$t('ATTRIBUTES_MGMT.ADD.FORM.REGEX_CUE.LABEL')"
+          type="text"
+          :placeholder="$t('ATTRIBUTES_MGMT.ADD.FORM.REGEX_CUE.PLACEHOLDER')"
+        />
+      </div>
+      <div class="flex flex-row justify-end w-full gap-2 px-0 py-2">
+        <woot-button :is-loading="isUpdating" :disabled="isButtonDisabled">
+          {{ $t('ATTRIBUTES_MGMT.EDIT.UPDATE_BUTTON_TEXT') }}
+        </woot-button>
+        <woot-button variant="clear" @click.prevent="onClose">
+          {{ $t('ATTRIBUTES_MGMT.ADD.CANCEL_BUTTON_TEXT') }}
+        </woot-button>
+      </div>
+    </form>
+  </div>
+</template>
 <style lang="scss" scoped>
 .key-value {
   padding: 0 var(--space-small) var(--space-small) 0;
diff --git a/app/javascript/dashboard/routes/dashboard/settings/attributes/Index.vue b/app/javascript/dashboard/routes/dashboard/settings/attributes/Index.vue
index 1e6a56bcb..f3630fcd8 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/attributes/Index.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/attributes/Index.vue
@@ -1,20 +1,3 @@
-<template>
-  <div class="flex-1 overflow-auto">
-    <woot-button
-      color-scheme="success"
-      class-names="button--fixed-top"
-      icon="add-circle"
-      @click="openAddPopup()"
-    >
-      {{ $t('ATTRIBUTES_MGMT.HEADER_BTN_TXT') }}
-    </woot-button>
-    <custom-attribute />
-    <woot-modal :show.sync="showAddPopup" :on-close="hideAddPopup">
-      <add-attribute :on-close="hideAddPopup" />
-    </woot-modal>
-  </div>
-</template>
-
 <script>
 import AddAttribute from './AddAttribute.vue';
 import CustomAttribute from './CustomAttribute.vue';
@@ -39,4 +22,21 @@ export default {
 };
 </script>
 
+<template>
+  <div class="flex-1 overflow-auto">
+    <woot-button
+      color-scheme="success"
+      class-names="button--fixed-top"
+      icon="add-circle"
+      @click="openAddPopup()"
+    >
+      {{ $t('ATTRIBUTES_MGMT.HEADER_BTN_TXT') }}
+    </woot-button>
+    <custom-attribute />
+    <woot-modal :show.sync="showAddPopup" :on-close="hideAddPopup">
+      <add-attribute :on-close="hideAddPopup" />
+    </woot-modal>
+  </div>
+</template>
+
 <style></style>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/auditlogs/Index.vue b/app/javascript/dashboard/routes/dashboard/settings/auditlogs/Index.vue
index ad75c7188..f84b9eabb 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/auditlogs/Index.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/auditlogs/Index.vue
@@ -1,67 +1,3 @@
-<template>
-  <div class="flex flex-col justify-between flex-1 p-4 overflow-auto">
-    <!-- List Audit Logs -->
-    <div>
-      <div>
-        <p
-          v-if="!uiFlags.fetchingList && !records.length"
-          class="flex flex-col items-center justify-center h-full"
-        >
-          {{ $t('AUDIT_LOGS.LIST.404') }}
-        </p>
-        <woot-loading-state
-          v-if="uiFlags.fetchingList"
-          :message="$t('AUDIT_LOGS.LOADING')"
-        />
-
-        <table
-          v-if="!uiFlags.fetchingList && records.length"
-          class="w-full woot-table"
-        >
-          <colgroup>
-            <col class="w-3/5" />
-            <col />
-            <col />
-          </colgroup>
-          <thead>
-            <!-- Header -->
-            <th
-              v-for="thHeader in $t('AUDIT_LOGS.LIST.TABLE_HEADER')"
-              :key="thHeader"
-            >
-              {{ thHeader }}
-            </th>
-          </thead>
-          <tbody>
-            <tr v-for="auditLogItem in records" :key="auditLogItem.id">
-              <td class="break-all whitespace-nowrap">
-                {{ generateLogText(auditLogItem) }}
-              </td>
-              <td class="break-all whitespace-nowrap">
-                {{
-                  messageTimestamp(
-                    auditLogItem.created_at,
-                    'MMM dd, yyyy hh:mm a'
-                  )
-                }}
-              </td>
-              <td class="w-[8.75rem]">
-                {{ auditLogItem.remote_address }}
-              </td>
-            </tr>
-          </tbody>
-        </table>
-      </div>
-    </div>
-    <table-footer
-      :current-page="Number(meta.currentPage)"
-      :total-count="meta.totalEntries"
-      :page-size="meta.perPage"
-      class="!bg-slate-25 dark:!bg-slate-900 border-t border-slate-75 dark:border-slate-700/50"
-      @page-change="onPageChange"
-    />
-  </div>
-</template>
 <script>
 import { mapGetters } from 'vuex';
 import { useAlert } from 'dashboard/composables';
@@ -134,3 +70,67 @@ export default {
   },
 };
 </script>
+<template>
+  <div class="flex flex-col justify-between flex-1 p-4 overflow-auto">
+    <!-- List Audit Logs -->
+    <div>
+      <div>
+        <p
+          v-if="!uiFlags.fetchingList && !records.length"
+          class="flex flex-col items-center justify-center h-full"
+        >
+          {{ $t('AUDIT_LOGS.LIST.404') }}
+        </p>
+        <woot-loading-state
+          v-if="uiFlags.fetchingList"
+          :message="$t('AUDIT_LOGS.LOADING')"
+        />
+
+        <table
+          v-if="!uiFlags.fetchingList && records.length"
+          class="w-full woot-table"
+        >
+          <colgroup>
+            <col class="w-3/5" />
+            <col />
+            <col />
+          </colgroup>
+          <thead>
+            <!-- Header -->
+            <th
+              v-for="thHeader in $t('AUDIT_LOGS.LIST.TABLE_HEADER')"
+              :key="thHeader"
+            >
+              {{ thHeader }}
+            </th>
+          </thead>
+          <tbody>
+            <tr v-for="auditLogItem in records" :key="auditLogItem.id">
+              <td class="break-all whitespace-nowrap">
+                {{ generateLogText(auditLogItem) }}
+              </td>
+              <td class="break-all whitespace-nowrap">
+                {{
+                  messageTimestamp(
+                    auditLogItem.created_at,
+                    'MMM dd, yyyy hh:mm a'
+                  )
+                }}
+              </td>
+              <td class="w-[8.75rem]">
+                {{ auditLogItem.remote_address }}
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    </div>
+    <table-footer
+      :current-page="Number(meta.currentPage)"
+      :total-count="meta.totalEntries"
+      :page-size="meta.perPage"
+      class="!bg-slate-25 dark:!bg-slate-900 border-t border-slate-75 dark:border-slate-700/50"
+      @page-change="onPageChange"
+    />
+  </div>
+</template>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/automation/AddAutomationRule.vue b/app/javascript/dashboard/routes/dashboard/settings/automation/AddAutomationRule.vue
index ce096bd3e..46c516ef0 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/automation/AddAutomationRule.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/automation/AddAutomationRule.vue
@@ -1,3 +1,98 @@
+<script>
+import { mapGetters } from 'vuex';
+import automationMethodsMixin from 'dashboard/mixins/automations/methodsMixin';
+import filterInputBox from 'dashboard/components/widgets/FilterInput/Index.vue';
+import automationActionInput from 'dashboard/components/widgets/AutomationActionInput.vue';
+// import { useVuelidate } from '@vuelidate/core';
+
+import {
+  AUTOMATION_RULE_EVENTS,
+  AUTOMATION_ACTION_TYPES,
+  AUTOMATIONS,
+} from './constants';
+export default {
+  components: {
+    filterInputBox,
+    automationActionInput,
+  },
+  mixins: [automationMethodsMixin],
+  props: {
+    onClose: {
+      type: Function,
+      default: () => {},
+    },
+  },
+  data() {
+    return {
+      automationTypes: JSON.parse(JSON.stringify(AUTOMATIONS)),
+      automationRuleEvent: AUTOMATION_RULE_EVENTS[0].key,
+      automationRuleEvents: AUTOMATION_RULE_EVENTS,
+      automationMutated: false,
+      show: true,
+      automation: {
+        name: null,
+        description: null,
+        event_name: 'conversation_created',
+        conditions: [
+          {
+            attribute_key: 'status',
+            filter_operator: 'equal_to',
+            values: '',
+            query_operator: 'and',
+            custom_attribute_type: '',
+          },
+        ],
+        actions: [
+          {
+            action_name: 'assign_agent',
+            action_params: [],
+          },
+        ],
+      },
+      showDeleteConfirmationModal: false,
+      allCustomAttributes: [],
+      mode: 'create',
+      errors: {},
+    };
+  },
+  computed: {
+    ...mapGetters({
+      accountId: 'getCurrentAccountId',
+      isFeatureEnabledonAccount: 'accounts/isFeatureEnabledonAccount',
+    }),
+    hasAutomationMutated() {
+      if (
+        this.automation.conditions[0].values ||
+        this.automation.actions[0].action_params.length
+      )
+        return true;
+      return false;
+    },
+    automationActionTypes() {
+      const isSLAEnabled = this.isFeatureEnabled('sla');
+      return isSLAEnabled
+        ? AUTOMATION_ACTION_TYPES
+        : AUTOMATION_ACTION_TYPES.filter(action => action.key !== 'add_sla');
+    },
+  },
+  mounted() {
+    this.$store.dispatch('inboxes/get');
+    this.$store.dispatch('agents/get');
+    this.$store.dispatch('contacts/get');
+    this.$store.dispatch('teams/get');
+    this.$store.dispatch('labels/get');
+    this.$store.dispatch('campaigns/get');
+    this.allCustomAttributes = this.$store.getters['attributes/getAttributes'];
+    this.manifestCustomAttributes();
+  },
+  methods: {
+    isFeatureEnabled(flag) {
+      return this.isFeatureEnabledonAccount(this.accountId, flag);
+    },
+  },
+};
+</script>
+
 <template>
   <div>
     <woot-modal-header :header-title="$t('AUTOMATION.ADD.TITLE')" />
@@ -141,98 +236,3 @@
     </div>
   </div>
 </template>
-
-<script>
-import { mapGetters } from 'vuex';
-import automationMethodsMixin from 'dashboard/mixins/automations/methodsMixin';
-import filterInputBox from 'dashboard/components/widgets/FilterInput/Index.vue';
-import automationActionInput from 'dashboard/components/widgets/AutomationActionInput.vue';
-// import { useVuelidate } from '@vuelidate/core';
-
-import {
-  AUTOMATION_RULE_EVENTS,
-  AUTOMATION_ACTION_TYPES,
-  AUTOMATIONS,
-} from './constants';
-export default {
-  components: {
-    filterInputBox,
-    automationActionInput,
-  },
-  mixins: [automationMethodsMixin],
-  props: {
-    onClose: {
-      type: Function,
-      default: () => {},
-    },
-  },
-  data() {
-    return {
-      automationTypes: JSON.parse(JSON.stringify(AUTOMATIONS)),
-      automationRuleEvent: AUTOMATION_RULE_EVENTS[0].key,
-      automationRuleEvents: AUTOMATION_RULE_EVENTS,
-      automationMutated: false,
-      show: true,
-      automation: {
-        name: null,
-        description: null,
-        event_name: 'conversation_created',
-        conditions: [
-          {
-            attribute_key: 'status',
-            filter_operator: 'equal_to',
-            values: '',
-            query_operator: 'and',
-            custom_attribute_type: '',
-          },
-        ],
-        actions: [
-          {
-            action_name: 'assign_agent',
-            action_params: [],
-          },
-        ],
-      },
-      showDeleteConfirmationModal: false,
-      allCustomAttributes: [],
-      mode: 'create',
-      errors: {},
-    };
-  },
-  computed: {
-    ...mapGetters({
-      accountId: 'getCurrentAccountId',
-      isFeatureEnabledonAccount: 'accounts/isFeatureEnabledonAccount',
-    }),
-    hasAutomationMutated() {
-      if (
-        this.automation.conditions[0].values ||
-        this.automation.actions[0].action_params.length
-      )
-        return true;
-      return false;
-    },
-    automationActionTypes() {
-      const isSLAEnabled = this.isFeatureEnabled('sla');
-      return isSLAEnabled
-        ? AUTOMATION_ACTION_TYPES
-        : AUTOMATION_ACTION_TYPES.filter(action => action.key !== 'add_sla');
-    },
-  },
-  mounted() {
-    this.$store.dispatch('inboxes/get');
-    this.$store.dispatch('agents/get');
-    this.$store.dispatch('contacts/get');
-    this.$store.dispatch('teams/get');
-    this.$store.dispatch('labels/get');
-    this.$store.dispatch('campaigns/get');
-    this.allCustomAttributes = this.$store.getters['attributes/getAttributes'];
-    this.manifestCustomAttributes();
-  },
-  methods: {
-    isFeatureEnabled(flag) {
-      return this.isFeatureEnabledonAccount(this.accountId, flag);
-    },
-  },
-};
-</script>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/automation/EditAutomationRule.vue b/app/javascript/dashboard/routes/dashboard/settings/automation/EditAutomationRule.vue
index fc648e48f..95307cf7f 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/automation/EditAutomationRule.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/automation/EditAutomationRule.vue
@@ -1,3 +1,78 @@
+<script>
+import { mapGetters } from 'vuex';
+import automationMethodsMixin from 'dashboard/mixins/automations/methodsMixin';
+import filterInputBox from 'dashboard/components/widgets/FilterInput/Index.vue';
+import automationActionInput from 'dashboard/components/widgets/AutomationActionInput.vue';
+
+import {
+  AUTOMATION_RULE_EVENTS,
+  AUTOMATION_ACTION_TYPES,
+  AUTOMATIONS,
+} from './constants';
+
+export default {
+  components: {
+    filterInputBox,
+    automationActionInput,
+  },
+  mixins: [automationMethodsMixin],
+  props: {
+    onClose: {
+      type: Function,
+      default: () => {},
+    },
+    selectedResponse: {
+      type: Object,
+      default: () => {},
+    },
+  },
+  data() {
+    return {
+      automationTypes: JSON.parse(JSON.stringify(AUTOMATIONS)),
+      automationRuleEvent: AUTOMATION_RULE_EVENTS[0].key,
+      automationRuleEvents: AUTOMATION_RULE_EVENTS,
+      automationMutated: false,
+      show: true,
+      automation: null,
+      showDeleteConfirmationModal: false,
+      allCustomAttributes: [],
+      mode: 'edit',
+      errors: {},
+    };
+  },
+  computed: {
+    ...mapGetters({
+      accountId: 'getCurrentAccountId',
+      isFeatureEnabledonAccount: 'accounts/isFeatureEnabledonAccount',
+    }),
+    hasAutomationMutated() {
+      if (
+        this.automation.conditions[0].values ||
+        this.automation.actions[0].action_params.length
+      )
+        return true;
+      return false;
+    },
+    automationActionTypes() {
+      const isSLAEnabled = this.isFeatureEnabled('sla');
+      return isSLAEnabled
+        ? AUTOMATION_ACTION_TYPES
+        : AUTOMATION_ACTION_TYPES.filter(action => action.key !== 'add_sla');
+    },
+  },
+  mounted() {
+    this.manifestCustomAttributes();
+    this.allCustomAttributes = this.$store.getters['attributes/getAttributes'];
+    this.formatAutomation(this.selectedResponse);
+  },
+  methods: {
+    isFeatureEnabled(flag) {
+      return this.isFeatureEnabledonAccount(this.accountId, flag);
+    },
+  },
+};
+</script>
+
 <template>
   <div>
     <woot-modal-header :header-title="$t('AUTOMATION.EDIT.TITLE')" />
@@ -132,81 +207,6 @@
     </div>
   </div>
 </template>
-
-<script>
-import { mapGetters } from 'vuex';
-import automationMethodsMixin from 'dashboard/mixins/automations/methodsMixin';
-import filterInputBox from 'dashboard/components/widgets/FilterInput/Index.vue';
-import automationActionInput from 'dashboard/components/widgets/AutomationActionInput.vue';
-
-import {
-  AUTOMATION_RULE_EVENTS,
-  AUTOMATION_ACTION_TYPES,
-  AUTOMATIONS,
-} from './constants';
-
-export default {
-  components: {
-    filterInputBox,
-    automationActionInput,
-  },
-  mixins: [automationMethodsMixin],
-  props: {
-    onClose: {
-      type: Function,
-      default: () => {},
-    },
-    selectedResponse: {
-      type: Object,
-      default: () => {},
-    },
-  },
-  data() {
-    return {
-      automationTypes: JSON.parse(JSON.stringify(AUTOMATIONS)),
-      automationRuleEvent: AUTOMATION_RULE_EVENTS[0].key,
-      automationRuleEvents: AUTOMATION_RULE_EVENTS,
-      automationMutated: false,
-      show: true,
-      automation: null,
-      showDeleteConfirmationModal: false,
-      allCustomAttributes: [],
-      mode: 'edit',
-      errors: {},
-    };
-  },
-  computed: {
-    ...mapGetters({
-      accountId: 'getCurrentAccountId',
-      isFeatureEnabledonAccount: 'accounts/isFeatureEnabledonAccount',
-    }),
-    hasAutomationMutated() {
-      if (
-        this.automation.conditions[0].values ||
-        this.automation.actions[0].action_params.length
-      )
-        return true;
-      return false;
-    },
-    automationActionTypes() {
-      const isSLAEnabled = this.isFeatureEnabled('sla');
-      return isSLAEnabled
-        ? AUTOMATION_ACTION_TYPES
-        : AUTOMATION_ACTION_TYPES.filter(action => action.key !== 'add_sla');
-    },
-  },
-  mounted() {
-    this.manifestCustomAttributes();
-    this.allCustomAttributes = this.$store.getters['attributes/getAttributes'];
-    this.formatAutomation(this.selectedResponse);
-  },
-  methods: {
-    isFeatureEnabled(flag) {
-      return this.isFeatureEnabledonAccount(this.accountId, flag);
-    },
-  },
-};
-</script>
 <style lang="scss" scoped>
 .event_wrapper {
   select {
diff --git a/app/javascript/dashboard/routes/dashboard/settings/automation/Index.vue b/app/javascript/dashboard/routes/dashboard/settings/automation/Index.vue
index 0958730f2..6b0b4744b 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/automation/Index.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/automation/Index.vue
@@ -1,128 +1,3 @@
-<template>
-  <div class="flex-1 p-4 overflow-auto">
-    <woot-button
-      color-scheme="success"
-      class-names="button--fixed-top"
-      icon="add-circle"
-      @click="openAddPopup()"
-    >
-      {{ $t('AUTOMATION.HEADER_BTN_TXT') }}
-    </woot-button>
-    <div class="flex flex-row gap-4">
-      <div class="w-full lg:w-3/5">
-        <p
-          v-if="!uiFlags.isFetching && !records.length"
-          class="flex flex-col items-center justify-center h-full"
-        >
-          {{ $t('AUTOMATION.LIST.404') }}
-        </p>
-        <woot-loading-state
-          v-if="uiFlags.isFetching"
-          :message="$t('AUTOMATION.LOADING')"
-        />
-        <table v-if="!uiFlags.isFetching && records.length" class="woot-table">
-          <thead>
-            <th
-              v-for="thHeader in $t('AUTOMATION.LIST.TABLE_HEADER')"
-              :key="thHeader"
-            >
-              {{ thHeader }}
-            </th>
-          </thead>
-          <tbody>
-            <tr v-for="(automation, index) in records" :key="index">
-              <td>{{ automation.name }}</td>
-              <td>{{ automation.description }}</td>
-              <td>
-                <woot-switch
-                  :value="automation.active"
-                  @input="toggleAutomation(automation, automation.active)"
-                />
-              </td>
-              <td>{{ readableTime(automation.created_on) }}</td>
-              <td class="button-wrapper">
-                <woot-button
-                  v-tooltip.top="$t('AUTOMATION.FORM.EDIT')"
-                  variant="smooth"
-                  size="tiny"
-                  color-scheme="secondary"
-                  class-names="grey-btn"
-                  :is-loading="loading[automation.id]"
-                  icon="edit"
-                  @click="openEditPopup(automation)"
-                />
-                <woot-button
-                  v-tooltip.top="$t('AUTOMATION.CLONE.TOOLTIP')"
-                  variant="smooth"
-                  size="tiny"
-                  color-scheme="primary"
-                  class-names="grey-btn"
-                  :is-loading="loading[automation.id]"
-                  icon="copy"
-                  @click="cloneAutomation(automation.id)"
-                />
-                <woot-button
-                  v-tooltip.top="$t('AUTOMATION.FORM.DELETE')"
-                  variant="smooth"
-                  color-scheme="alert"
-                  size="tiny"
-                  icon="dismiss-circle"
-                  class-names="grey-btn"
-                  :is-loading="loading[automation.id]"
-                  @click="openDeletePopup(automation, index)"
-                />
-              </td>
-            </tr>
-          </tbody>
-        </table>
-      </div>
-
-      <div class="hidden w-1/3 lg:block">
-        <span v-dompurify-html="$t('AUTOMATION.SIDEBAR_TXT')" />
-      </div>
-    </div>
-    <woot-modal
-      :show.sync="showAddPopup"
-      size="medium"
-      :on-close="hideAddPopup"
-    >
-      <add-automation-rule
-        v-if="showAddPopup"
-        :on-close="hideAddPopup"
-        @saveAutomation="submitAutomation"
-      />
-    </woot-modal>
-
-    <woot-delete-modal
-      :show.sync="showDeleteConfirmationPopup"
-      :on-close="closeDeletePopup"
-      :on-confirm="confirmDeletion"
-      :title="$t('LABEL_MGMT.DELETE.CONFIRM.TITLE')"
-      :message="$t('AUTOMATION.DELETE.CONFIRM.MESSAGE')"
-      :message-value="deleteMessage"
-      :confirm-text="deleteConfirmText"
-      :reject-text="deleteRejectText"
-    />
-
-    <woot-modal
-      :show.sync="showEditPopup"
-      size="medium"
-      :on-close="hideEditPopup"
-    >
-      <edit-automation-rule
-        v-if="showEditPopup"
-        :on-close="hideEditPopup"
-        :selected-response="selectedResponse"
-        @saveAutomation="submitAutomation"
-      />
-    </woot-modal>
-    <woot-confirm-modal
-      ref="confirmDialog"
-      :title="toggleModalTitle"
-      :description="toggleModalDescription"
-    />
-  </div>
-</template>
 <script>
 import { mapGetters } from 'vuex';
 import { useAlert } from 'dashboard/composables';
@@ -282,3 +157,128 @@ export default {
   },
 };
 </script>
+<template>
+  <div class="flex-1 p-4 overflow-auto">
+    <woot-button
+      color-scheme="success"
+      class-names="button--fixed-top"
+      icon="add-circle"
+      @click="openAddPopup()"
+    >
+      {{ $t('AUTOMATION.HEADER_BTN_TXT') }}
+    </woot-button>
+    <div class="flex flex-row gap-4">
+      <div class="w-full lg:w-3/5">
+        <p
+          v-if="!uiFlags.isFetching && !records.length"
+          class="flex flex-col items-center justify-center h-full"
+        >
+          {{ $t('AUTOMATION.LIST.404') }}
+        </p>
+        <woot-loading-state
+          v-if="uiFlags.isFetching"
+          :message="$t('AUTOMATION.LOADING')"
+        />
+        <table v-if="!uiFlags.isFetching && records.length" class="woot-table">
+          <thead>
+            <th
+              v-for="thHeader in $t('AUTOMATION.LIST.TABLE_HEADER')"
+              :key="thHeader"
+            >
+              {{ thHeader }}
+            </th>
+          </thead>
+          <tbody>
+            <tr v-for="(automation, index) in records" :key="index">
+              <td>{{ automation.name }}</td>
+              <td>{{ automation.description }}</td>
+              <td>
+                <woot-switch
+                  :value="automation.active"
+                  @input="toggleAutomation(automation, automation.active)"
+                />
+              </td>
+              <td>{{ readableTime(automation.created_on) }}</td>
+              <td class="button-wrapper">
+                <woot-button
+                  v-tooltip.top="$t('AUTOMATION.FORM.EDIT')"
+                  variant="smooth"
+                  size="tiny"
+                  color-scheme="secondary"
+                  class-names="grey-btn"
+                  :is-loading="loading[automation.id]"
+                  icon="edit"
+                  @click="openEditPopup(automation)"
+                />
+                <woot-button
+                  v-tooltip.top="$t('AUTOMATION.CLONE.TOOLTIP')"
+                  variant="smooth"
+                  size="tiny"
+                  color-scheme="primary"
+                  class-names="grey-btn"
+                  :is-loading="loading[automation.id]"
+                  icon="copy"
+                  @click="cloneAutomation(automation.id)"
+                />
+                <woot-button
+                  v-tooltip.top="$t('AUTOMATION.FORM.DELETE')"
+                  variant="smooth"
+                  color-scheme="alert"
+                  size="tiny"
+                  icon="dismiss-circle"
+                  class-names="grey-btn"
+                  :is-loading="loading[automation.id]"
+                  @click="openDeletePopup(automation, index)"
+                />
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+
+      <div class="hidden w-1/3 lg:block">
+        <span v-dompurify-html="$t('AUTOMATION.SIDEBAR_TXT')" />
+      </div>
+    </div>
+    <woot-modal
+      :show.sync="showAddPopup"
+      size="medium"
+      :on-close="hideAddPopup"
+    >
+      <add-automation-rule
+        v-if="showAddPopup"
+        :on-close="hideAddPopup"
+        @saveAutomation="submitAutomation"
+      />
+    </woot-modal>
+
+    <woot-delete-modal
+      :show.sync="showDeleteConfirmationPopup"
+      :on-close="closeDeletePopup"
+      :on-confirm="confirmDeletion"
+      :title="$t('LABEL_MGMT.DELETE.CONFIRM.TITLE')"
+      :message="$t('AUTOMATION.DELETE.CONFIRM.MESSAGE')"
+      :message-value="deleteMessage"
+      :confirm-text="deleteConfirmText"
+      :reject-text="deleteRejectText"
+    />
+
+    <woot-modal
+      :show.sync="showEditPopup"
+      size="medium"
+      :on-close="hideEditPopup"
+    >
+      <edit-automation-rule
+        v-if="showEditPopup"
+        :on-close="hideEditPopup"
+        :selected-response="selectedResponse"
+        @saveAutomation="submitAutomation"
+      />
+    </woot-modal>
+    <woot-confirm-modal
+      ref="confirmDialog"
+      :title="toggleModalTitle"
+      :description="toggleModalDescription"
+    />
+  </div>
+</template>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/billing/Index.vue b/app/javascript/dashboard/routes/dashboard/settings/billing/Index.vue
index 24cb2d9da..924f6ba15 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/billing/Index.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/billing/Index.vue
@@ -1,40 +1,3 @@
-<template>
-  <div class="flex-1 p-6 overflow-auto dark:bg-slate-900">
-    <woot-loading-state v-if="uiFlags.isFetchingItem" />
-    <div v-else-if="!hasABillingPlan">
-      <p>{{ $t('BILLING_SETTINGS.NO_BILLING_USER') }}</p>
-    </div>
-    <div v-else class="w-full">
-      <div class="current-plan--details">
-        <h6>{{ $t('BILLING_SETTINGS.CURRENT_PLAN.TITLE') }}</h6>
-        <div
-          v-dompurify-html="
-            formatMessage(
-              $t('BILLING_SETTINGS.CURRENT_PLAN.PLAN_NOTE', {
-                plan: planName,
-                quantity: subscribedQuantity,
-              })
-            )
-          "
-        />
-      </div>
-      <billing-item
-        :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
-        :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')"
-        button-icon="chat-multiple"
-        @click="onToggleChatWindow"
-      />
-    </div>
-  </div>
-</template>
-
 <script>
 import messageFormatterMixin from 'shared/mixins/messageFormatterMixin';
 
@@ -87,6 +50,43 @@ export default {
 };
 </script>
 
+<template>
+  <div class="flex-1 p-6 overflow-auto dark:bg-slate-900">
+    <woot-loading-state v-if="uiFlags.isFetchingItem" />
+    <div v-else-if="!hasABillingPlan">
+      <p>{{ $t('BILLING_SETTINGS.NO_BILLING_USER') }}</p>
+    </div>
+    <div v-else class="w-full">
+      <div class="current-plan--details">
+        <h6>{{ $t('BILLING_SETTINGS.CURRENT_PLAN.TITLE') }}</h6>
+        <div
+          v-dompurify-html="
+            formatMessage(
+              $t('BILLING_SETTINGS.CURRENT_PLAN.PLAN_NOTE', {
+                plan: planName,
+                quantity: subscribedQuantity,
+              })
+            )
+          "
+        />
+      </div>
+      <billing-item
+        :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
+        :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')"
+        button-icon="chat-multiple"
+        @click="onToggleChatWindow"
+      />
+    </div>
+  </div>
+</template>
+
 <style lang="scss">
 .manage-subscription {
   @apply bg-white dark:bg-slate-800 flex justify-between mb-2 py-6 px-4 items-center rounded-md border border-solid border-slate-75 dark:border-slate-700;
diff --git a/app/javascript/dashboard/routes/dashboard/settings/billing/components/BillingItem.vue b/app/javascript/dashboard/routes/dashboard/settings/billing/components/BillingItem.vue
index 6f8ade8a0..03177e950 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/billing/components/BillingItem.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/billing/components/BillingItem.vue
@@ -1,18 +1,3 @@
-<template>
-  <div class="manage-subscription">
-    <div>
-      <h6>{{ title }}</h6>
-      <p class="manage-subscription--description">
-        {{ description }}
-      </p>
-    </div>
-    <div>
-      <woot-button variant="smooth" :icon="buttonIcon" @click="$emit('click')">
-        {{ buttonLabel }}
-      </woot-button>
-    </div>
-  </div>
-</template>
 <script>
 export default {
   props: {
@@ -36,3 +21,18 @@ export default {
   },
 };
 </script>
+<template>
+  <div class="manage-subscription">
+    <div>
+      <h6>{{ title }}</h6>
+      <p class="manage-subscription--description">
+        {{ description }}
+      </p>
+    </div>
+    <div>
+      <woot-button variant="smooth" :icon="buttonIcon" @click="$emit('click')">
+        {{ buttonLabel }}
+      </woot-button>
+    </div>
+  </div>
+</template>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/campaigns/AddCampaign.vue b/app/javascript/dashboard/routes/dashboard/settings/campaigns/AddCampaign.vue
index 898d5612f..beea57e77 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/campaigns/AddCampaign.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/campaigns/AddCampaign.vue
@@ -1,179 +1,3 @@
-<template>
-  <div class="flex flex-col h-auto overflow-auto">
-    <woot-modal-header
-      :header-title="$t('CAMPAIGN.ADD.TITLE')"
-      :header-content="$t('CAMPAIGN.ADD.DESC')"
-    />
-    <form class="flex flex-col w-full" @submit.prevent="addCampaign">
-      <div class="w-full">
-        <woot-input
-          v-model="title"
-          :label="$t('CAMPAIGN.ADD.FORM.TITLE.LABEL')"
-          type="text"
-          :class="{ error: v$.title.$error }"
-          :error="v$.title.$error ? $t('CAMPAIGN.ADD.FORM.TITLE.ERROR') : ''"
-          :placeholder="$t('CAMPAIGN.ADD.FORM.TITLE.PLACEHOLDER')"
-          @blur="v$.title.$touch"
-        />
-
-        <div v-if="isOngoingType" class="editor-wrap">
-          <label>
-            {{ $t('CAMPAIGN.ADD.FORM.MESSAGE.LABEL') }}
-          </label>
-          <div>
-            <woot-message-editor
-              v-model="message"
-              class="message-editor"
-              :class="{ editor_warning: v$.message.$error }"
-              :placeholder="$t('CAMPAIGN.ADD.FORM.MESSAGE.PLACEHOLDER')"
-              @blur="v$.message.$touch"
-            />
-            <span v-if="v$.message.$error" class="editor-warning__message">
-              {{ $t('CAMPAIGN.ADD.FORM.MESSAGE.ERROR') }}
-            </span>
-          </div>
-        </div>
-
-        <label v-else :class="{ error: v$.message.$error }">
-          {{ $t('CAMPAIGN.ADD.FORM.MESSAGE.LABEL') }}
-          <textarea
-            v-model="message"
-            rows="5"
-            type="text"
-            :placeholder="$t('CAMPAIGN.ADD.FORM.MESSAGE.PLACEHOLDER')"
-            @blur="v$.message.$touch"
-          />
-          <span v-if="v$.message.$error" class="message">
-            {{ $t('CAMPAIGN.ADD.FORM.MESSAGE.ERROR') }}
-          </span>
-        </label>
-
-        <label :class="{ error: v$.selectedInbox.$error }">
-          {{ $t('CAMPAIGN.ADD.FORM.INBOX.LABEL') }}
-          <select v-model="selectedInbox" @change="onChangeInbox($event)">
-            <option v-for="item in inboxes" :key="item.name" :value="item.id">
-              {{ item.name }}
-            </option>
-          </select>
-          <span v-if="v$.selectedInbox.$error" class="message">
-            {{ $t('CAMPAIGN.ADD.FORM.INBOX.ERROR') }}
-          </span>
-        </label>
-
-        <label
-          v-if="isOneOffType"
-          class="multiselect-wrap--small"
-          :class="{ error: v$.selectedAudience.$error }"
-        >
-          {{ $t('CAMPAIGN.ADD.FORM.AUDIENCE.LABEL') }}
-          <multiselect
-            v-model="selectedAudience"
-            :options="audienceList"
-            track-by="id"
-            label="title"
-            :multiple="true"
-            :close-on-select="false"
-            :clear-on-select="false"
-            :hide-selected="true"
-            :placeholder="$t('CAMPAIGN.ADD.FORM.AUDIENCE.PLACEHOLDER')"
-            selected-label
-            :select-label="$t('FORMS.MULTISELECT.ENTER_TO_SELECT')"
-            :deselect-label="$t('FORMS.MULTISELECT.ENTER_TO_REMOVE')"
-            @blur="v$.selectedAudience.$touch"
-            @select="v$.selectedAudience.$touch"
-          />
-          <span v-if="v$.selectedAudience.$error" class="message">
-            {{ $t('CAMPAIGN.ADD.FORM.AUDIENCE.ERROR') }}
-          </span>
-        </label>
-
-        <label
-          v-if="isOngoingType"
-          :class="{ error: v$.selectedSender.$error }"
-        >
-          {{ $t('CAMPAIGN.ADD.FORM.SENT_BY.LABEL') }}
-          <select v-model="selectedSender">
-            <option
-              v-for="sender in sendersAndBotList"
-              :key="sender.name"
-              :value="sender.id"
-            >
-              {{ sender.name }}
-            </option>
-          </select>
-          <span v-if="v$.selectedSender.$error" class="message">
-            {{ $t('CAMPAIGN.ADD.FORM.SENT_BY.ERROR') }}
-          </span>
-        </label>
-
-        <label v-if="isOneOffType">
-          {{ $t('CAMPAIGN.ADD.FORM.SCHEDULED_AT.LABEL') }}
-          <woot-date-time-picker
-            :value="scheduledAt"
-            :confirm-text="$t('CAMPAIGN.ADD.FORM.SCHEDULED_AT.CONFIRM')"
-            :placeholder="$t('CAMPAIGN.ADD.FORM.SCHEDULED_AT.PLACEHOLDER')"
-            @change="onChange"
-          />
-        </label>
-
-        <woot-input
-          v-if="isOngoingType"
-          v-model="endPoint"
-          :label="$t('CAMPAIGN.ADD.FORM.END_POINT.LABEL')"
-          type="text"
-          :class="{ error: v$.endPoint.$error }"
-          :error="
-            v$.endPoint.$error ? $t('CAMPAIGN.ADD.FORM.END_POINT.ERROR') : ''
-          "
-          :placeholder="$t('CAMPAIGN.ADD.FORM.END_POINT.PLACEHOLDER')"
-          @blur="v$.endPoint.$touch"
-        />
-        <woot-input
-          v-if="isOngoingType"
-          v-model="timeOnPage"
-          :label="$t('CAMPAIGN.ADD.FORM.TIME_ON_PAGE.LABEL')"
-          type="text"
-          :class="{ error: v$.timeOnPage.$error }"
-          :error="
-            v$.timeOnPage.$error
-              ? $t('CAMPAIGN.ADD.FORM.TIME_ON_PAGE.ERROR')
-              : ''
-          "
-          :placeholder="$t('CAMPAIGN.ADD.FORM.TIME_ON_PAGE.PLACEHOLDER')"
-          @blur="v$.timeOnPage.$touch"
-        />
-        <label v-if="isOngoingType">
-          <input
-            v-model="enabled"
-            type="checkbox"
-            value="enabled"
-            name="enabled"
-          />
-          {{ $t('CAMPAIGN.ADD.FORM.ENABLED') }}
-        </label>
-        <label v-if="isOngoingType">
-          <input
-            v-model="triggerOnlyDuringBusinessHours"
-            type="checkbox"
-            value="triggerOnlyDuringBusinessHours"
-            name="triggerOnlyDuringBusinessHours"
-          />
-          {{ $t('CAMPAIGN.ADD.FORM.TRIGGER_ONLY_BUSINESS_HOURS') }}
-        </label>
-      </div>
-
-      <div class="flex flex-row justify-end w-full gap-2 px-0 py-2">
-        <woot-button :is-loading="uiFlags.isCreating">
-          {{ $t('CAMPAIGN.ADD.CREATE_BUTTON_TEXT') }}
-        </woot-button>
-        <woot-button variant="clear" @click.prevent="onClose">
-          {{ $t('CAMPAIGN.ADD.CANCEL_BUTTON_TEXT') }}
-        </woot-button>
-      </div>
-    </form>
-  </div>
-</template>
-
 <script>
 import { mapGetters } from 'vuex';
 import { useVuelidate } from '@vuelidate/core';
@@ -370,6 +194,182 @@ export default {
   },
 };
 </script>
+
+<template>
+  <div class="flex flex-col h-auto overflow-auto">
+    <woot-modal-header
+      :header-title="$t('CAMPAIGN.ADD.TITLE')"
+      :header-content="$t('CAMPAIGN.ADD.DESC')"
+    />
+    <form class="flex flex-col w-full" @submit.prevent="addCampaign">
+      <div class="w-full">
+        <woot-input
+          v-model="title"
+          :label="$t('CAMPAIGN.ADD.FORM.TITLE.LABEL')"
+          type="text"
+          :class="{ error: v$.title.$error }"
+          :error="v$.title.$error ? $t('CAMPAIGN.ADD.FORM.TITLE.ERROR') : ''"
+          :placeholder="$t('CAMPAIGN.ADD.FORM.TITLE.PLACEHOLDER')"
+          @blur="v$.title.$touch"
+        />
+
+        <div v-if="isOngoingType" class="editor-wrap">
+          <label>
+            {{ $t('CAMPAIGN.ADD.FORM.MESSAGE.LABEL') }}
+          </label>
+          <div>
+            <woot-message-editor
+              v-model="message"
+              class="message-editor"
+              :class="{ editor_warning: v$.message.$error }"
+              :placeholder="$t('CAMPAIGN.ADD.FORM.MESSAGE.PLACEHOLDER')"
+              @blur="v$.message.$touch"
+            />
+            <span v-if="v$.message.$error" class="editor-warning__message">
+              {{ $t('CAMPAIGN.ADD.FORM.MESSAGE.ERROR') }}
+            </span>
+          </div>
+        </div>
+
+        <label v-else :class="{ error: v$.message.$error }">
+          {{ $t('CAMPAIGN.ADD.FORM.MESSAGE.LABEL') }}
+          <textarea
+            v-model="message"
+            rows="5"
+            type="text"
+            :placeholder="$t('CAMPAIGN.ADD.FORM.MESSAGE.PLACEHOLDER')"
+            @blur="v$.message.$touch"
+          />
+          <span v-if="v$.message.$error" class="message">
+            {{ $t('CAMPAIGN.ADD.FORM.MESSAGE.ERROR') }}
+          </span>
+        </label>
+
+        <label :class="{ error: v$.selectedInbox.$error }">
+          {{ $t('CAMPAIGN.ADD.FORM.INBOX.LABEL') }}
+          <select v-model="selectedInbox" @change="onChangeInbox($event)">
+            <option v-for="item in inboxes" :key="item.name" :value="item.id">
+              {{ item.name }}
+            </option>
+          </select>
+          <span v-if="v$.selectedInbox.$error" class="message">
+            {{ $t('CAMPAIGN.ADD.FORM.INBOX.ERROR') }}
+          </span>
+        </label>
+
+        <label
+          v-if="isOneOffType"
+          class="multiselect-wrap--small"
+          :class="{ error: v$.selectedAudience.$error }"
+        >
+          {{ $t('CAMPAIGN.ADD.FORM.AUDIENCE.LABEL') }}
+          <multiselect
+            v-model="selectedAudience"
+            :options="audienceList"
+            track-by="id"
+            label="title"
+            :multiple="true"
+            :close-on-select="false"
+            :clear-on-select="false"
+            :hide-selected="true"
+            :placeholder="$t('CAMPAIGN.ADD.FORM.AUDIENCE.PLACEHOLDER')"
+            selected-label
+            :select-label="$t('FORMS.MULTISELECT.ENTER_TO_SELECT')"
+            :deselect-label="$t('FORMS.MULTISELECT.ENTER_TO_REMOVE')"
+            @blur="v$.selectedAudience.$touch"
+            @select="v$.selectedAudience.$touch"
+          />
+          <span v-if="v$.selectedAudience.$error" class="message">
+            {{ $t('CAMPAIGN.ADD.FORM.AUDIENCE.ERROR') }}
+          </span>
+        </label>
+
+        <label
+          v-if="isOngoingType"
+          :class="{ error: v$.selectedSender.$error }"
+        >
+          {{ $t('CAMPAIGN.ADD.FORM.SENT_BY.LABEL') }}
+          <select v-model="selectedSender">
+            <option
+              v-for="sender in sendersAndBotList"
+              :key="sender.name"
+              :value="sender.id"
+            >
+              {{ sender.name }}
+            </option>
+          </select>
+          <span v-if="v$.selectedSender.$error" class="message">
+            {{ $t('CAMPAIGN.ADD.FORM.SENT_BY.ERROR') }}
+          </span>
+        </label>
+
+        <label v-if="isOneOffType">
+          {{ $t('CAMPAIGN.ADD.FORM.SCHEDULED_AT.LABEL') }}
+          <woot-date-time-picker
+            :value="scheduledAt"
+            :confirm-text="$t('CAMPAIGN.ADD.FORM.SCHEDULED_AT.CONFIRM')"
+            :placeholder="$t('CAMPAIGN.ADD.FORM.SCHEDULED_AT.PLACEHOLDER')"
+            @change="onChange"
+          />
+        </label>
+
+        <woot-input
+          v-if="isOngoingType"
+          v-model="endPoint"
+          :label="$t('CAMPAIGN.ADD.FORM.END_POINT.LABEL')"
+          type="text"
+          :class="{ error: v$.endPoint.$error }"
+          :error="
+            v$.endPoint.$error ? $t('CAMPAIGN.ADD.FORM.END_POINT.ERROR') : ''
+          "
+          :placeholder="$t('CAMPAIGN.ADD.FORM.END_POINT.PLACEHOLDER')"
+          @blur="v$.endPoint.$touch"
+        />
+        <woot-input
+          v-if="isOngoingType"
+          v-model="timeOnPage"
+          :label="$t('CAMPAIGN.ADD.FORM.TIME_ON_PAGE.LABEL')"
+          type="text"
+          :class="{ error: v$.timeOnPage.$error }"
+          :error="
+            v$.timeOnPage.$error
+              ? $t('CAMPAIGN.ADD.FORM.TIME_ON_PAGE.ERROR')
+              : ''
+          "
+          :placeholder="$t('CAMPAIGN.ADD.FORM.TIME_ON_PAGE.PLACEHOLDER')"
+          @blur="v$.timeOnPage.$touch"
+        />
+        <label v-if="isOngoingType">
+          <input
+            v-model="enabled"
+            type="checkbox"
+            value="enabled"
+            name="enabled"
+          />
+          {{ $t('CAMPAIGN.ADD.FORM.ENABLED') }}
+        </label>
+        <label v-if="isOngoingType">
+          <input
+            v-model="triggerOnlyDuringBusinessHours"
+            type="checkbox"
+            value="triggerOnlyDuringBusinessHours"
+            name="triggerOnlyDuringBusinessHours"
+          />
+          {{ $t('CAMPAIGN.ADD.FORM.TRIGGER_ONLY_BUSINESS_HOURS') }}
+        </label>
+      </div>
+
+      <div class="flex flex-row justify-end w-full gap-2 px-0 py-2">
+        <woot-button :is-loading="uiFlags.isCreating">
+          {{ $t('CAMPAIGN.ADD.CREATE_BUTTON_TEXT') }}
+        </woot-button>
+        <woot-button variant="clear" @click.prevent="onClose">
+          {{ $t('CAMPAIGN.ADD.CANCEL_BUTTON_TEXT') }}
+        </woot-button>
+      </div>
+    </form>
+  </div>
+</template>
 <style lang="scss" scoped>
 ::v-deep .ProseMirror-woot-style {
   height: 5rem;
diff --git a/app/javascript/dashboard/routes/dashboard/settings/campaigns/Campaign.vue b/app/javascript/dashboard/routes/dashboard/settings/campaigns/Campaign.vue
index bbc9fb878..1fe81f210 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/campaigns/Campaign.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/campaigns/Campaign.vue
@@ -1,30 +1,3 @@
-<template>
-  <div class="flex-1 overflow-auto">
-    <campaigns-table
-      :campaigns="campaigns"
-      :show-empty-result="showEmptyResult"
-      :is-loading="uiFlags.isFetching"
-      :campaign-type="type"
-      @edit="openEditPopup"
-      @delete="openDeletePopup"
-    />
-    <woot-modal :show.sync="showEditPopup" :on-close="hideEditPopup">
-      <edit-campaign
-        :selected-campaign="selectedCampaign"
-        @on-close="hideEditPopup"
-      />
-    </woot-modal>
-    <woot-delete-modal
-      :show.sync="showDeleteConfirmationPopup"
-      :on-close="closeDeletePopup"
-      :on-confirm="confirmDeletion"
-      :title="$t('CAMPAIGN.DELETE.CONFIRM.TITLE')"
-      :message="$t('CAMPAIGN.DELETE.CONFIRM.MESSAGE')"
-      :confirm-text="$t('CAMPAIGN.DELETE.CONFIRM.YES')"
-      :reject-text="$t('CAMPAIGN.DELETE.CONFIRM.NO')"
-    />
-  </div>
-</template>
 <script>
 import { mapGetters } from 'vuex';
 import { useAlert } from 'dashboard/composables';
@@ -95,6 +68,33 @@ export default {
   },
 };
 </script>
+<template>
+  <div class="flex-1 overflow-auto">
+    <campaigns-table
+      :campaigns="campaigns"
+      :show-empty-result="showEmptyResult"
+      :is-loading="uiFlags.isFetching"
+      :campaign-type="type"
+      @edit="openEditPopup"
+      @delete="openDeletePopup"
+    />
+    <woot-modal :show.sync="showEditPopup" :on-close="hideEditPopup">
+      <edit-campaign
+        :selected-campaign="selectedCampaign"
+        @on-close="hideEditPopup"
+      />
+    </woot-modal>
+    <woot-delete-modal
+      :show.sync="showDeleteConfirmationPopup"
+      :on-close="closeDeletePopup"
+      :on-confirm="confirmDeletion"
+      :title="$t('CAMPAIGN.DELETE.CONFIRM.TITLE')"
+      :message="$t('CAMPAIGN.DELETE.CONFIRM.MESSAGE')"
+      :confirm-text="$t('CAMPAIGN.DELETE.CONFIRM.YES')"
+      :reject-text="$t('CAMPAIGN.DELETE.CONFIRM.NO')"
+    />
+  </div>
+</template>
 
 <style scoped lang="scss">
 .button-wrapper {
diff --git a/app/javascript/dashboard/routes/dashboard/settings/campaigns/CampaignCard.vue b/app/javascript/dashboard/routes/dashboard/settings/campaigns/CampaignCard.vue
index b2b80c4a9..d04b0aa33 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/campaigns/CampaignCard.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/campaigns/CampaignCard.vue
@@ -1,3 +1,53 @@
+<script>
+import UserAvatarWithName from 'dashboard/components/widgets/UserAvatarWithName.vue';
+import InboxName from 'dashboard/components/widgets/InboxName.vue';
+import messageFormatterMixin from 'shared/mixins/messageFormatterMixin';
+import { messageStamp } from 'shared/helpers/timeHelper';
+
+export default {
+  components: {
+    UserAvatarWithName,
+    InboxName,
+  },
+  mixins: [messageFormatterMixin],
+  props: {
+    campaign: {
+      type: Object,
+      required: true,
+    },
+    isOngoingType: {
+      type: Boolean,
+      default: true,
+    },
+  },
+
+  computed: {
+    campaignStatus() {
+      if (this.isOngoingType) {
+        return this.campaign.enabled
+          ? this.$t('CAMPAIGN.LIST.STATUS.ENABLED')
+          : this.$t('CAMPAIGN.LIST.STATUS.DISABLED');
+      }
+
+      return this.campaign.campaign_status === 'completed'
+        ? this.$t('CAMPAIGN.LIST.STATUS.COMPLETED')
+        : this.$t('CAMPAIGN.LIST.STATUS.ACTIVE');
+    },
+    colorScheme() {
+      if (this.isOngoingType) {
+        return this.campaign.enabled ? 'success' : 'secondary';
+      }
+      return this.campaign.campaign_status === 'completed'
+        ? 'secondary'
+        : 'success';
+    },
+  },
+  methods: {
+    messageStamp,
+  },
+};
+</script>
+
 <template>
   <div
     class="px-5 py-4 mb-2 bg-white border rounded-md dark:bg-slate-800 border-slate-50 dark:border-slate-900"
@@ -65,53 +115,3 @@
     </div>
   </div>
 </template>
-
-<script>
-import UserAvatarWithName from 'dashboard/components/widgets/UserAvatarWithName.vue';
-import InboxName from 'dashboard/components/widgets/InboxName.vue';
-import messageFormatterMixin from 'shared/mixins/messageFormatterMixin';
-import { messageStamp } from 'shared/helpers/timeHelper';
-
-export default {
-  components: {
-    UserAvatarWithName,
-    InboxName,
-  },
-  mixins: [messageFormatterMixin],
-  props: {
-    campaign: {
-      type: Object,
-      required: true,
-    },
-    isOngoingType: {
-      type: Boolean,
-      default: true,
-    },
-  },
-
-  computed: {
-    campaignStatus() {
-      if (this.isOngoingType) {
-        return this.campaign.enabled
-          ? this.$t('CAMPAIGN.LIST.STATUS.ENABLED')
-          : this.$t('CAMPAIGN.LIST.STATUS.DISABLED');
-      }
-
-      return this.campaign.campaign_status === 'completed'
-        ? this.$t('CAMPAIGN.LIST.STATUS.COMPLETED')
-        : this.$t('CAMPAIGN.LIST.STATUS.ACTIVE');
-    },
-    colorScheme() {
-      if (this.isOngoingType) {
-        return this.campaign.enabled ? 'success' : 'secondary';
-      }
-      return this.campaign.campaign_status === 'completed'
-        ? 'secondary'
-        : 'success';
-    },
-  },
-  methods: {
-    messageStamp,
-  },
-};
-</script>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/campaigns/CampaignsTable.vue b/app/javascript/dashboard/routes/dashboard/settings/campaigns/CampaignsTable.vue
index 3c73cbf77..9734e56ad 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/campaigns/CampaignsTable.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/campaigns/CampaignsTable.vue
@@ -1,25 +1,3 @@
-<template>
-  <div class="flex items-center flex-col">
-    <div v-if="isLoading" class="items-center flex text-base justify-center">
-      <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" />
-      <div v-else class="w-full">
-        <campaign-card
-          v-for="campaign in campaigns"
-          :key="campaign.id"
-          :campaign="campaign"
-          :is-ongoing-type="isOngoingType"
-          @edit="campaign => $emit('edit', campaign)"
-          @delete="campaign => $emit('delete', campaign)"
-        />
-      </div>
-    </div>
-  </div>
-</template>
-
 <script>
 import Spinner from 'shared/components/Spinner.vue';
 import EmptyState from 'dashboard/components/widgets/EmptyState.vue';
@@ -77,3 +55,25 @@ export default {
   },
 };
 </script>
+
+<template>
+  <div class="flex items-center flex-col">
+    <div v-if="isLoading" class="items-center flex text-base justify-center">
+      <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" />
+      <div v-else class="w-full">
+        <campaign-card
+          v-for="campaign in campaigns"
+          :key="campaign.id"
+          :campaign="campaign"
+          :is-ongoing-type="isOngoingType"
+          @edit="campaign => $emit('edit', campaign)"
+          @delete="campaign => $emit('delete', campaign)"
+        />
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/campaigns/EditCampaign.vue b/app/javascript/dashboard/routes/dashboard/settings/campaigns/EditCampaign.vue
index bbcb7e3a0..9410387d0 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/campaigns/EditCampaign.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/campaigns/EditCampaign.vue
@@ -1,116 +1,3 @@
-<template>
-  <div class="flex flex-col h-auto overflow-auto">
-    <woot-modal-header :header-title="pageTitle" />
-    <form class="flex flex-col w-full" @submit.prevent="editCampaign">
-      <div class="w-full">
-        <woot-input
-          v-model="title"
-          :label="$t('CAMPAIGN.ADD.FORM.TITLE.LABEL')"
-          type="text"
-          :class="{ error: v$.title.$error }"
-          :error="v$.title.$error ? $t('CAMPAIGN.ADD.FORM.TITLE.ERROR') : ''"
-          :placeholder="$t('CAMPAIGN.ADD.FORM.TITLE.PLACEHOLDER')"
-          @blur="v$.title.$touch"
-        />
-        <div class="editor-wrap">
-          <label>
-            {{ $t('CAMPAIGN.ADD.FORM.MESSAGE.LABEL') }}
-          </label>
-          <woot-message-editor
-            v-model="message"
-            class="message-editor"
-            :is-format-mode="true"
-            :class="{ editor_warning: v$.message.$error }"
-            :placeholder="$t('CAMPAIGN.ADD.FORM.MESSAGE.PLACEHOLDER')"
-            @input="v$.message.$touch"
-          />
-          <span v-if="v$.message.$error" class="editor-warning__message">
-            {{ $t('CAMPAIGN.ADD.FORM.MESSAGE.ERROR') }}
-          </span>
-        </div>
-
-        <label :class="{ error: v$.selectedInbox.$error }">
-          {{ $t('CAMPAIGN.ADD.FORM.INBOX.LABEL') }}
-          <select v-model="selectedInbox" @change="onChangeInbox($event)">
-            <option v-for="item in inboxes" :key="item.id" :value="item.id">
-              {{ item.name }}
-            </option>
-          </select>
-          <span v-if="v$.selectedInbox.$error" class="message">
-            {{ $t('CAMPAIGN.ADD.FORM.INBOX.ERROR') }}
-          </span>
-        </label>
-
-        <label :class="{ error: v$.selectedSender.$error }">
-          {{ $t('CAMPAIGN.ADD.FORM.SENT_BY.LABEL') }}
-          <select v-model="selectedSender">
-            <option
-              v-for="sender in sendersAndBotList"
-              :key="sender.name"
-              :value="sender.id"
-            >
-              {{ sender.name }}
-            </option>
-          </select>
-          <span v-if="v$.selectedSender.$error" class="message">
-            {{ $t('CAMPAIGN.ADD.FORM.SENT_BY.ERROR') }}
-          </span>
-        </label>
-        <woot-input
-          v-model="endPoint"
-          :label="$t('CAMPAIGN.ADD.FORM.END_POINT.LABEL')"
-          type="text"
-          :class="{ error: v$.endPoint.$error }"
-          :error="
-            v$.endPoint.$error ? $t('CAMPAIGN.ADD.FORM.END_POINT.ERROR') : ''
-          "
-          :placeholder="$t('CAMPAIGN.ADD.FORM.END_POINT.PLACEHOLDER')"
-          @blur="v$.endPoint.$touch"
-        />
-        <woot-input
-          v-model="timeOnPage"
-          :label="$t('CAMPAIGN.ADD.FORM.TIME_ON_PAGE.LABEL')"
-          type="text"
-          :class="{ error: v$.timeOnPage.$error }"
-          :error="
-            v$.timeOnPage.$error
-              ? $t('CAMPAIGN.ADD.FORM.TIME_ON_PAGE.ERROR')
-              : ''
-          "
-          :placeholder="$t('CAMPAIGN.ADD.FORM.TIME_ON_PAGE.PLACEHOLDER')"
-          @blur="v$.timeOnPage.$touch"
-        />
-        <label>
-          <input
-            v-model="enabled"
-            type="checkbox"
-            value="enabled"
-            name="enabled"
-          />
-          {{ $t('CAMPAIGN.ADD.FORM.ENABLED') }}
-        </label>
-        <label v-if="isOngoingType">
-          <input
-            v-model="triggerOnlyDuringBusinessHours"
-            type="checkbox"
-            value="triggerOnlyDuringBusinessHours"
-            name="triggerOnlyDuringBusinessHours"
-          />
-          {{ $t('CAMPAIGN.ADD.FORM.TRIGGER_ONLY_BUSINESS_HOURS') }}
-        </label>
-      </div>
-      <div class="flex flex-row justify-end w-full gap-2 px-0 py-2">
-        <woot-button :is-loading="uiFlags.isCreating">
-          {{ $t('CAMPAIGN.EDIT.UPDATE_BUTTON_TEXT') }}
-        </woot-button>
-        <woot-button variant="clear" @click.prevent="onClose">
-          {{ $t('CAMPAIGN.ADD.CANCEL_BUTTON_TEXT') }}
-        </woot-button>
-      </div>
-    </form>
-  </div>
-</template>
-
 <script>
 import { mapGetters } from 'vuex';
 import { useVuelidate } from '@vuelidate/core';
@@ -285,6 +172,119 @@ export default {
   },
 };
 </script>
+
+<template>
+  <div class="flex flex-col h-auto overflow-auto">
+    <woot-modal-header :header-title="pageTitle" />
+    <form class="flex flex-col w-full" @submit.prevent="editCampaign">
+      <div class="w-full">
+        <woot-input
+          v-model="title"
+          :label="$t('CAMPAIGN.ADD.FORM.TITLE.LABEL')"
+          type="text"
+          :class="{ error: v$.title.$error }"
+          :error="v$.title.$error ? $t('CAMPAIGN.ADD.FORM.TITLE.ERROR') : ''"
+          :placeholder="$t('CAMPAIGN.ADD.FORM.TITLE.PLACEHOLDER')"
+          @blur="v$.title.$touch"
+        />
+        <div class="editor-wrap">
+          <label>
+            {{ $t('CAMPAIGN.ADD.FORM.MESSAGE.LABEL') }}
+          </label>
+          <woot-message-editor
+            v-model="message"
+            class="message-editor"
+            :is-format-mode="true"
+            :class="{ editor_warning: v$.message.$error }"
+            :placeholder="$t('CAMPAIGN.ADD.FORM.MESSAGE.PLACEHOLDER')"
+            @input="v$.message.$touch"
+          />
+          <span v-if="v$.message.$error" class="editor-warning__message">
+            {{ $t('CAMPAIGN.ADD.FORM.MESSAGE.ERROR') }}
+          </span>
+        </div>
+
+        <label :class="{ error: v$.selectedInbox.$error }">
+          {{ $t('CAMPAIGN.ADD.FORM.INBOX.LABEL') }}
+          <select v-model="selectedInbox" @change="onChangeInbox($event)">
+            <option v-for="item in inboxes" :key="item.id" :value="item.id">
+              {{ item.name }}
+            </option>
+          </select>
+          <span v-if="v$.selectedInbox.$error" class="message">
+            {{ $t('CAMPAIGN.ADD.FORM.INBOX.ERROR') }}
+          </span>
+        </label>
+
+        <label :class="{ error: v$.selectedSender.$error }">
+          {{ $t('CAMPAIGN.ADD.FORM.SENT_BY.LABEL') }}
+          <select v-model="selectedSender">
+            <option
+              v-for="sender in sendersAndBotList"
+              :key="sender.name"
+              :value="sender.id"
+            >
+              {{ sender.name }}
+            </option>
+          </select>
+          <span v-if="v$.selectedSender.$error" class="message">
+            {{ $t('CAMPAIGN.ADD.FORM.SENT_BY.ERROR') }}
+          </span>
+        </label>
+        <woot-input
+          v-model="endPoint"
+          :label="$t('CAMPAIGN.ADD.FORM.END_POINT.LABEL')"
+          type="text"
+          :class="{ error: v$.endPoint.$error }"
+          :error="
+            v$.endPoint.$error ? $t('CAMPAIGN.ADD.FORM.END_POINT.ERROR') : ''
+          "
+          :placeholder="$t('CAMPAIGN.ADD.FORM.END_POINT.PLACEHOLDER')"
+          @blur="v$.endPoint.$touch"
+        />
+        <woot-input
+          v-model="timeOnPage"
+          :label="$t('CAMPAIGN.ADD.FORM.TIME_ON_PAGE.LABEL')"
+          type="text"
+          :class="{ error: v$.timeOnPage.$error }"
+          :error="
+            v$.timeOnPage.$error
+              ? $t('CAMPAIGN.ADD.FORM.TIME_ON_PAGE.ERROR')
+              : ''
+          "
+          :placeholder="$t('CAMPAIGN.ADD.FORM.TIME_ON_PAGE.PLACEHOLDER')"
+          @blur="v$.timeOnPage.$touch"
+        />
+        <label>
+          <input
+            v-model="enabled"
+            type="checkbox"
+            value="enabled"
+            name="enabled"
+          />
+          {{ $t('CAMPAIGN.ADD.FORM.ENABLED') }}
+        </label>
+        <label v-if="isOngoingType">
+          <input
+            v-model="triggerOnlyDuringBusinessHours"
+            type="checkbox"
+            value="triggerOnlyDuringBusinessHours"
+            name="triggerOnlyDuringBusinessHours"
+          />
+          {{ $t('CAMPAIGN.ADD.FORM.TRIGGER_ONLY_BUSINESS_HOURS') }}
+        </label>
+      </div>
+      <div class="flex flex-row justify-end w-full gap-2 px-0 py-2">
+        <woot-button :is-loading="uiFlags.isCreating">
+          {{ $t('CAMPAIGN.EDIT.UPDATE_BUTTON_TEXT') }}
+        </woot-button>
+        <woot-button variant="clear" @click.prevent="onClose">
+          {{ $t('CAMPAIGN.ADD.CANCEL_BUTTON_TEXT') }}
+        </woot-button>
+      </div>
+    </form>
+  </div>
+</template>
 <style lang="scss" scoped>
 ::v-deep .ProseMirror-woot-style {
   height: 5rem;
diff --git a/app/javascript/dashboard/routes/dashboard/settings/campaigns/Index.vue b/app/javascript/dashboard/routes/dashboard/settings/campaigns/Index.vue
index 9004ac22d..68bf8d35f 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/campaigns/Index.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/campaigns/Index.vue
@@ -1,20 +1,3 @@
-<template>
-  <div class="flex-1 overflow-auto p-4">
-    <woot-button
-      color-scheme="success"
-      class-names="button--fixed-top"
-      icon="add-circle"
-      @click="openAddPopup"
-    >
-      {{ buttonText }}
-    </woot-button>
-    <campaign />
-    <woot-modal :show.sync="showAddPopup" :on-close="hideAddPopup">
-      <add-campaign @on-close="hideAddPopup" />
-    </woot-modal>
-  </div>
-</template>
-
 <script>
 import campaignMixin from 'shared/mixins/campaignMixin';
 import Campaign from './Campaign.vue';
@@ -50,3 +33,20 @@ export default {
   },
 };
 </script>
+
+<template>
+  <div class="flex-1 overflow-auto p-4">
+    <woot-button
+      color-scheme="success"
+      class-names="button--fixed-top"
+      icon="add-circle"
+      @click="openAddPopup"
+    >
+      {{ buttonText }}
+    </woot-button>
+    <campaign />
+    <woot-modal :show.sync="showAddPopup" :on-close="hideAddPopup">
+      <add-campaign @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 010a10236..fe40f1748 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/canned/AddCanned.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/canned/AddCanned.vue
@@ -1,58 +1,3 @@
-<template>
-  <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')"
-        :header-content="$t('CANNED_MGMT.ADD.DESC')"
-      />
-      <form class="flex flex-col w-full" @submit.prevent="addCannedResponse()">
-        <div class="w-full">
-          <label :class="{ error: v$.shortCode.$error }">
-            {{ $t('CANNED_MGMT.ADD.FORM.SHORT_CODE.LABEL') }}
-            <input
-              v-model.trim="shortCode"
-              type="text"
-              :placeholder="$t('CANNED_MGMT.ADD.FORM.SHORT_CODE.PLACEHOLDER')"
-              @input="v$.shortCode.$touch"
-            />
-          </label>
-        </div>
-
-        <div class="w-full">
-          <label :class="{ error: v$.content.$error }">
-            {{ $t('CANNED_MGMT.ADD.FORM.CONTENT.LABEL') }}
-          </label>
-          <div class="editor-wrap">
-            <woot-message-editor
-              v-model="content"
-              class="message-editor [&>div]:px-1"
-              :class="{ editor_warning: v$.content.$error }"
-              :enable-variables="true"
-              :enable-canned-responses="false"
-              :placeholder="$t('CANNED_MGMT.ADD.FORM.CONTENT.PLACEHOLDER')"
-              @blur="v$.content.$touch"
-            />
-          </div>
-        </div>
-        <div class="flex flex-row justify-end w-full gap-2 px-0 py-2">
-          <woot-submit-button
-            :disabled="
-              v$.content.$invalid ||
-              v$.shortCode.$invalid ||
-              addCanned.showLoading
-            "
-            :button-text="$t('CANNED_MGMT.ADD.FORM.SUBMIT')"
-            :loading="addCanned.showLoading"
-          />
-          <button class="button clear" @click.prevent="onClose">
-            {{ $t('CANNED_MGMT.ADD.CANCEL_BUTTON_TEXT') }}
-          </button>
-        </div>
-      </form>
-    </div>
-  </modal>
-</template>
-
 <script>
 import { useVuelidate } from '@vuelidate/core';
 import { required, minLength } from '@vuelidate/validators';
@@ -135,6 +80,61 @@ export default {
 };
 </script>
 
+<template>
+  <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')"
+        :header-content="$t('CANNED_MGMT.ADD.DESC')"
+      />
+      <form class="flex flex-col w-full" @submit.prevent="addCannedResponse()">
+        <div class="w-full">
+          <label :class="{ error: v$.shortCode.$error }">
+            {{ $t('CANNED_MGMT.ADD.FORM.SHORT_CODE.LABEL') }}
+            <input
+              v-model.trim="shortCode"
+              type="text"
+              :placeholder="$t('CANNED_MGMT.ADD.FORM.SHORT_CODE.PLACEHOLDER')"
+              @input="v$.shortCode.$touch"
+            />
+          </label>
+        </div>
+
+        <div class="w-full">
+          <label :class="{ error: v$.content.$error }">
+            {{ $t('CANNED_MGMT.ADD.FORM.CONTENT.LABEL') }}
+          </label>
+          <div class="editor-wrap">
+            <woot-message-editor
+              v-model="content"
+              class="message-editor [&>div]:px-1"
+              :class="{ editor_warning: v$.content.$error }"
+              :enable-variables="true"
+              :enable-canned-responses="false"
+              :placeholder="$t('CANNED_MGMT.ADD.FORM.CONTENT.PLACEHOLDER')"
+              @blur="v$.content.$touch"
+            />
+          </div>
+        </div>
+        <div class="flex flex-row justify-end w-full gap-2 px-0 py-2">
+          <woot-submit-button
+            :disabled="
+              v$.content.$invalid ||
+              v$.shortCode.$invalid ||
+              addCanned.showLoading
+            "
+            :button-text="$t('CANNED_MGMT.ADD.FORM.SUBMIT')"
+            :loading="addCanned.showLoading"
+          />
+          <button class="button clear" @click.prevent="onClose">
+            {{ $t('CANNED_MGMT.ADD.CANCEL_BUTTON_TEXT') }}
+          </button>
+        </div>
+      </form>
+    </div>
+  </modal>
+</template>
+
 <style scoped lang="scss">
 ::v-deep {
   .ProseMirror-menubar {
diff --git a/app/javascript/dashboard/routes/dashboard/settings/canned/EditCanned.vue b/app/javascript/dashboard/routes/dashboard/settings/canned/EditCanned.vue
index dc322e6bc..f4b1adc5b 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/canned/EditCanned.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/canned/EditCanned.vue
@@ -1,55 +1,3 @@
-<template>
-  <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()">
-        <div class="w-full">
-          <label :class="{ error: v$.shortCode.$error }">
-            {{ $t('CANNED_MGMT.EDIT.FORM.SHORT_CODE.LABEL') }}
-            <input
-              v-model.trim="shortCode"
-              type="text"
-              :placeholder="$t('CANNED_MGMT.EDIT.FORM.SHORT_CODE.PLACEHOLDER')"
-              @input="v$.shortCode.$touch"
-            />
-          </label>
-        </div>
-
-        <div class="w-full">
-          <label :class="{ error: v$.content.$error }">
-            {{ $t('CANNED_MGMT.EDIT.FORM.CONTENT.LABEL') }}
-          </label>
-          <div class="editor-wrap">
-            <woot-message-editor
-              v-model="content"
-              class="message-editor [&>div]:px-1"
-              :class="{ editor_warning: v$.content.$error }"
-              :enable-variables="true"
-              :enable-canned-responses="false"
-              :placeholder="$t('CANNED_MGMT.EDIT.FORM.CONTENT.PLACEHOLDER')"
-              @blur="v$.content.$touch"
-            />
-          </div>
-        </div>
-        <div class="flex flex-row justify-end w-full gap-2 px-0 py-2">
-          <woot-submit-button
-            :disabled="
-              v$.content.$invalid ||
-              v$.shortCode.$invalid ||
-              editCanned.showLoading
-            "
-            :button-text="$t('CANNED_MGMT.EDIT.FORM.SUBMIT')"
-            :loading="editCanned.showLoading"
-          />
-          <button class="button clear" @click.prevent="onClose">
-            {{ $t('CANNED_MGMT.EDIT.CANCEL_BUTTON_TEXT') }}
-          </button>
-        </div>
-      </form>
-    </div>
-  </modal>
-</template>
-
 <script>
 /* eslint no-console: 0 */
 import { useVuelidate } from '@vuelidate/core';
@@ -139,6 +87,58 @@ export default {
   },
 };
 </script>
+
+<template>
+  <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()">
+        <div class="w-full">
+          <label :class="{ error: v$.shortCode.$error }">
+            {{ $t('CANNED_MGMT.EDIT.FORM.SHORT_CODE.LABEL') }}
+            <input
+              v-model.trim="shortCode"
+              type="text"
+              :placeholder="$t('CANNED_MGMT.EDIT.FORM.SHORT_CODE.PLACEHOLDER')"
+              @input="v$.shortCode.$touch"
+            />
+          </label>
+        </div>
+
+        <div class="w-full">
+          <label :class="{ error: v$.content.$error }">
+            {{ $t('CANNED_MGMT.EDIT.FORM.CONTENT.LABEL') }}
+          </label>
+          <div class="editor-wrap">
+            <woot-message-editor
+              v-model="content"
+              class="message-editor [&>div]:px-1"
+              :class="{ editor_warning: v$.content.$error }"
+              :enable-variables="true"
+              :enable-canned-responses="false"
+              :placeholder="$t('CANNED_MGMT.EDIT.FORM.CONTENT.PLACEHOLDER')"
+              @blur="v$.content.$touch"
+            />
+          </div>
+        </div>
+        <div class="flex flex-row justify-end w-full gap-2 px-0 py-2">
+          <woot-submit-button
+            :disabled="
+              v$.content.$invalid ||
+              v$.shortCode.$invalid ||
+              editCanned.showLoading
+            "
+            :button-text="$t('CANNED_MGMT.EDIT.FORM.SUBMIT')"
+            :loading="editCanned.showLoading"
+          />
+          <button class="button clear" @click.prevent="onClose">
+            {{ $t('CANNED_MGMT.EDIT.CANCEL_BUTTON_TEXT') }}
+          </button>
+        </div>
+      </form>
+    </div>
+  </modal>
+</template>
 <style scoped lang="scss">
 ::v-deep {
   .ProseMirror-menubar {
diff --git a/app/javascript/dashboard/routes/dashboard/settings/canned/Index.vue b/app/javascript/dashboard/routes/dashboard/settings/canned/Index.vue
index 609923712..c9831ba41 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/canned/Index.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/canned/Index.vue
@@ -1,3 +1,119 @@
+<script>
+import { mapGetters } from 'vuex';
+import { useAlert } from 'dashboard/composables';
+import AddCanned from './AddCanned.vue';
+import EditCanned from './EditCanned.vue';
+
+export default {
+  components: {
+    AddCanned,
+    EditCanned,
+  },
+  data() {
+    return {
+      loading: {},
+      showAddPopup: false,
+      showEditPopup: false,
+      showDeleteConfirmationPopup: false,
+      selectedResponse: {},
+      cannedResponseAPI: {
+        message: '',
+      },
+      sortOrder: 'asc',
+    };
+  },
+  computed: {
+    ...mapGetters({
+      records: 'getCannedResponses',
+      uiFlags: 'getUIFlags',
+    }),
+    // Delete Modal
+    deleteConfirmText() {
+      return `${this.$t('CANNED_MGMT.DELETE.CONFIRM.YES')} ${
+        this.selectedResponse.short_code
+      }`;
+    },
+    deleteRejectText() {
+      return `${this.$t('CANNED_MGMT.DELETE.CONFIRM.NO')} ${
+        this.selectedResponse.short_code
+      }`;
+    },
+    deleteMessage() {
+      return ` ${this.selectedResponse.short_code}?`;
+    },
+  },
+  mounted() {
+    // Fetch API Call
+    this.$store.dispatch('getCannedResponse').then(() => {
+      this.toggleSort();
+    });
+  },
+  methods: {
+    toggleSort() {
+      this.records.sort((a, b) => {
+        if (this.sortOrder === 'asc') {
+          return a.short_code.localeCompare(b.short_code);
+        }
+        return b.short_code.localeCompare(a.short_code);
+      });
+      this.sortOrder = this.sortOrder === 'asc' ? 'desc' : 'asc';
+    },
+    showAlertMessage(message) {
+      // Reset loading, current selected agent
+      this.loading[this.selectedResponse.id] = false;
+      this.selectedResponse = {};
+      // Show message
+      this.cannedResponseAPI.message = message;
+      useAlert(message);
+    },
+    // Edit Function
+    openAddPopup() {
+      this.showAddPopup = true;
+    },
+    hideAddPopup() {
+      this.showAddPopup = false;
+    },
+
+    // Edit Modal Functions
+    openEditPopup(response) {
+      this.showEditPopup = true;
+      this.selectedResponse = response;
+    },
+    hideEditPopup() {
+      this.showEditPopup = false;
+    },
+
+    // Delete Modal Functions
+    openDeletePopup(response) {
+      this.showDeleteConfirmationPopup = true;
+      this.selectedResponse = response;
+    },
+    closeDeletePopup() {
+      this.showDeleteConfirmationPopup = false;
+    },
+    // Set loading and call Delete API
+    confirmDeletion() {
+      this.loading[this.selectedResponse.id] = true;
+      this.closeDeletePopup();
+      this.deleteCannedResponse(this.selectedResponse.id);
+    },
+    deleteCannedResponse(id) {
+      this.$store
+        .dispatch('deleteCannedResponse', id)
+        .then(() => {
+          this.showAlertMessage(
+            this.$t('CANNED_MGMT.DELETE.API.SUCCESS_MESSAGE')
+          );
+        })
+        .catch(error => {
+          const errorMessage =
+            error?.message || this.$t('CANNED_MGMT.DELETE.API.ERROR_MESSAGE');
+          this.showAlertMessage(errorMessage);
+        });
+    },
+  },
+};
+</script>
 <template>
   <div class="flex-1 overflow-auto">
     <woot-button
@@ -128,119 +244,3 @@
     />
   </div>
 </template>
-<script>
-import { mapGetters } from 'vuex';
-import { useAlert } from 'dashboard/composables';
-import AddCanned from './AddCanned.vue';
-import EditCanned from './EditCanned.vue';
-
-export default {
-  components: {
-    AddCanned,
-    EditCanned,
-  },
-  data() {
-    return {
-      loading: {},
-      showAddPopup: false,
-      showEditPopup: false,
-      showDeleteConfirmationPopup: false,
-      selectedResponse: {},
-      cannedResponseAPI: {
-        message: '',
-      },
-      sortOrder: 'asc',
-    };
-  },
-  computed: {
-    ...mapGetters({
-      records: 'getCannedResponses',
-      uiFlags: 'getUIFlags',
-    }),
-    // Delete Modal
-    deleteConfirmText() {
-      return `${this.$t('CANNED_MGMT.DELETE.CONFIRM.YES')} ${
-        this.selectedResponse.short_code
-      }`;
-    },
-    deleteRejectText() {
-      return `${this.$t('CANNED_MGMT.DELETE.CONFIRM.NO')} ${
-        this.selectedResponse.short_code
-      }`;
-    },
-    deleteMessage() {
-      return ` ${this.selectedResponse.short_code}?`;
-    },
-  },
-  mounted() {
-    // Fetch API Call
-    this.$store.dispatch('getCannedResponse').then(() => {
-      this.toggleSort();
-    });
-  },
-  methods: {
-    toggleSort() {
-      this.records.sort((a, b) => {
-        if (this.sortOrder === 'asc') {
-          return a.short_code.localeCompare(b.short_code);
-        }
-        return b.short_code.localeCompare(a.short_code);
-      });
-      this.sortOrder = this.sortOrder === 'asc' ? 'desc' : 'asc';
-    },
-    showAlertMessage(message) {
-      // Reset loading, current selected agent
-      this.loading[this.selectedResponse.id] = false;
-      this.selectedResponse = {};
-      // Show message
-      this.cannedResponseAPI.message = message;
-      useAlert(message);
-    },
-    // Edit Function
-    openAddPopup() {
-      this.showAddPopup = true;
-    },
-    hideAddPopup() {
-      this.showAddPopup = false;
-    },
-
-    // Edit Modal Functions
-    openEditPopup(response) {
-      this.showEditPopup = true;
-      this.selectedResponse = response;
-    },
-    hideEditPopup() {
-      this.showEditPopup = false;
-    },
-
-    // Delete Modal Functions
-    openDeletePopup(response) {
-      this.showDeleteConfirmationPopup = true;
-      this.selectedResponse = response;
-    },
-    closeDeletePopup() {
-      this.showDeleteConfirmationPopup = false;
-    },
-    // Set loading and call Delete API
-    confirmDeletion() {
-      this.loading[this.selectedResponse.id] = true;
-      this.closeDeletePopup();
-      this.deleteCannedResponse(this.selectedResponse.id);
-    },
-    deleteCannedResponse(id) {
-      this.$store
-        .dispatch('deleteCannedResponse', id)
-        .then(() => {
-          this.showAlertMessage(
-            this.$t('CANNED_MGMT.DELETE.API.SUCCESS_MESSAGE')
-          );
-        })
-        .catch(error => {
-          const errorMessage =
-            error?.message || this.$t('CANNED_MGMT.DELETE.API.ERROR_MESSAGE');
-          this.showAlertMessage(errorMessage);
-        });
-    },
-  },
-};
-</script>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/inbox/AddAgents.vue b/app/javascript/dashboard/routes/dashboard/settings/inbox/AddAgents.vue
index e6b66ac89..ee90c3e42 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/AddAgents.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/AddAgents.vue
@@ -1,49 +1,3 @@
-<template>
-  <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"
-  >
-    <form class="flex flex-wrap mx-0" @submit.prevent="addAgents()">
-      <div class="w-full">
-        <page-header
-          :header-title="$t('INBOX_MGMT.ADD.AGENTS.TITLE')"
-          :header-content="$t('INBOX_MGMT.ADD.AGENTS.DESC')"
-        />
-      </div>
-      <div class="w-3/5">
-        <div class="w-full">
-          <label :class="{ error: v$.selectedAgents.$error }">
-            {{ $t('INBOX_MGMT.ADD.AGENTS.TITLE') }}
-            <multiselect
-              v-model="selectedAgents"
-              :options="agentList"
-              track-by="id"
-              label="name"
-              :multiple="true"
-              :close-on-select="false"
-              :clear-on-select="false"
-              :hide-selected="true"
-              selected-label
-              :select-label="$t('FORMS.MULTISELECT.ENTER_TO_SELECT')"
-              :deselect-label="$t('FORMS.MULTISELECT.ENTER_TO_REMOVE')"
-              :placeholder="$t('INBOX_MGMT.ADD.AGENTS.PICK_AGENTS')"
-              @select="v$.selectedAgents.$touch"
-            />
-            <span v-if="v$.selectedAgents.$error" class="message">
-              {{ $t('INBOX_MGMT.ADD.AGENTS.VALIDATION_ERROR') }}
-            </span>
-          </label>
-        </div>
-        <div class="w-full">
-          <woot-submit-button
-            :button-text="$t('INBOX_MGMT.AGENTS.BUTTON_TEXT')"
-            :loading="isCreating"
-          />
-        </div>
-      </div>
-    </form>
-  </div>
-</template>
-
 <script>
 /* eslint no-console: 0 */
 import { mapGetters } from 'vuex';
@@ -105,3 +59,49 @@ export default {
   },
 };
 </script>
+
+<template>
+  <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"
+  >
+    <form class="flex flex-wrap mx-0" @submit.prevent="addAgents()">
+      <div class="w-full">
+        <page-header
+          :header-title="$t('INBOX_MGMT.ADD.AGENTS.TITLE')"
+          :header-content="$t('INBOX_MGMT.ADD.AGENTS.DESC')"
+        />
+      </div>
+      <div class="w-3/5">
+        <div class="w-full">
+          <label :class="{ error: v$.selectedAgents.$error }">
+            {{ $t('INBOX_MGMT.ADD.AGENTS.TITLE') }}
+            <multiselect
+              v-model="selectedAgents"
+              :options="agentList"
+              track-by="id"
+              label="name"
+              :multiple="true"
+              :close-on-select="false"
+              :clear-on-select="false"
+              :hide-selected="true"
+              selected-label
+              :select-label="$t('FORMS.MULTISELECT.ENTER_TO_SELECT')"
+              :deselect-label="$t('FORMS.MULTISELECT.ENTER_TO_REMOVE')"
+              :placeholder="$t('INBOX_MGMT.ADD.AGENTS.PICK_AGENTS')"
+              @select="v$.selectedAgents.$touch"
+            />
+            <span v-if="v$.selectedAgents.$error" class="message">
+              {{ $t('INBOX_MGMT.ADD.AGENTS.VALIDATION_ERROR') }}
+            </span>
+          </label>
+        </div>
+        <div class="w-full">
+          <woot-submit-button
+            :button-text="$t('INBOX_MGMT.AGENTS.BUTTON_TEXT')"
+            :loading="isCreating"
+          />
+        </div>
+      </div>
+    </form>
+  </div>
+</template>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/inbox/ChannelList.vue b/app/javascript/dashboard/routes/dashboard/settings/inbox/ChannelList.vue
index 93bff206d..8ec4eda31 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/ChannelList.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/ChannelList.vue
@@ -1,31 +1,3 @@
-<template>
-  <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
-      class="max-w-4xl"
-      :header-title="$t('INBOX_MGMT.ADD.AUTH.TITLE')"
-      :header-content="
-        useInstallationName(
-          $t('INBOX_MGMT.ADD.AUTH.DESC'),
-          globalConfig.installationName
-        )
-      "
-    />
-    <div
-      class="mt-6 grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 mx-0 max-w-3xl"
-    >
-      <channel-item
-        v-for="channel in channelList"
-        :key="channel.key"
-        :channel="channel"
-        :enabled-features="enabledFeatures"
-        @channel-item-click="initChannelAuth"
-      />
-    </div>
-  </div>
-</template>
-
 <script>
 import ChannelItem from 'dashboard/components/widgets/ChannelItem.vue';
 import router from '../../../index';
@@ -87,3 +59,31 @@ export default {
   },
 };
 </script>
+
+<template>
+  <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
+      class="max-w-4xl"
+      :header-title="$t('INBOX_MGMT.ADD.AUTH.TITLE')"
+      :header-content="
+        useInstallationName(
+          $t('INBOX_MGMT.ADD.AUTH.DESC'),
+          globalConfig.installationName
+        )
+      "
+    />
+    <div
+      class="mt-6 grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 mx-0 max-w-3xl"
+    >
+      <channel-item
+        v-for="channel in channelList"
+        :key="channel.key"
+        :channel="channel"
+        :enabled-features="enabledFeatures"
+        @channel-item-click="initChannelAuth"
+      />
+    </div>
+  </div>
+</template>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/inbox/FinishSetup.vue b/app/javascript/dashboard/routes/dashboard/settings/inbox/FinishSetup.vue
index d9f0008d5..7cd4a5dea 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/FinishSetup.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/FinishSetup.vue
@@ -1,3 +1,75 @@
+<script>
+import configMixin from 'shared/mixins/configMixin';
+import EmptyState from '../../../../components/widgets/EmptyState.vue';
+
+export default {
+  components: {
+    EmptyState,
+  },
+  mixins: [configMixin],
+  computed: {
+    currentInbox() {
+      return this.$store.getters['inboxes/getInbox'](
+        this.$route.params.inbox_id
+      );
+    },
+    isATwilioInbox() {
+      return this.currentInbox.channel_type === 'Channel::TwilioSms';
+    },
+    isAEmailInbox() {
+      return this.currentInbox.channel_type === 'Channel::Email';
+    },
+    isALineInbox() {
+      return this.currentInbox.channel_type === 'Channel::Line';
+    },
+    isASmsInbox() {
+      return this.currentInbox.channel_type === 'Channel::Sms';
+    },
+    isWhatsAppCloudInbox() {
+      return (
+        this.currentInbox.channel_type === 'Channel::Whatsapp' &&
+        this.currentInbox.provider === 'whatsapp_cloud'
+      );
+    },
+    message() {
+      if (this.isATwilioInbox) {
+        return `${this.$t('INBOX_MGMT.FINISH.MESSAGE')}. ${this.$t(
+          'INBOX_MGMT.ADD.TWILIO.API_CALLBACK.SUBTITLE'
+        )}`;
+      }
+
+      if (this.isASmsInbox) {
+        return `${this.$t('INBOX_MGMT.FINISH.MESSAGE')}. ${this.$t(
+          'INBOX_MGMT.ADD.SMS.BANDWIDTH.API_CALLBACK.SUBTITLE'
+        )}`;
+      }
+
+      if (this.isALineInbox) {
+        return `${this.$t('INBOX_MGMT.FINISH.MESSAGE')}. ${this.$t(
+          'INBOX_MGMT.ADD.LINE_CHANNEL.API_CALLBACK.SUBTITLE'
+        )}`;
+      }
+
+      if (this.isWhatsAppCloudInbox) {
+        return `${this.$t('INBOX_MGMT.FINISH.MESSAGE')}. ${this.$t(
+          'INBOX_MGMT.ADD.WHATSAPP.API_CALLBACK.SUBTITLE'
+        )}`;
+      }
+
+      if (this.isAEmailInbox && !this.currentInbox.provider) {
+        return this.$t('INBOX_MGMT.ADD.EMAIL_CHANNEL.FINISH_MESSAGE');
+      }
+
+      if (this.currentInbox.web_widget_script) {
+        return this.$t('INBOX_MGMT.FINISH.WEBSITE_SUCCESS');
+      }
+
+      return this.$t('INBOX_MGMT.FINISH.MESSAGE');
+    },
+  },
+};
+</script>
+
 <template>
   <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"
@@ -82,75 +154,3 @@
     </empty-state>
   </div>
 </template>
-
-<script>
-import configMixin from 'shared/mixins/configMixin';
-import EmptyState from '../../../../components/widgets/EmptyState.vue';
-
-export default {
-  components: {
-    EmptyState,
-  },
-  mixins: [configMixin],
-  computed: {
-    currentInbox() {
-      return this.$store.getters['inboxes/getInbox'](
-        this.$route.params.inbox_id
-      );
-    },
-    isATwilioInbox() {
-      return this.currentInbox.channel_type === 'Channel::TwilioSms';
-    },
-    isAEmailInbox() {
-      return this.currentInbox.channel_type === 'Channel::Email';
-    },
-    isALineInbox() {
-      return this.currentInbox.channel_type === 'Channel::Line';
-    },
-    isASmsInbox() {
-      return this.currentInbox.channel_type === 'Channel::Sms';
-    },
-    isWhatsAppCloudInbox() {
-      return (
-        this.currentInbox.channel_type === 'Channel::Whatsapp' &&
-        this.currentInbox.provider === 'whatsapp_cloud'
-      );
-    },
-    message() {
-      if (this.isATwilioInbox) {
-        return `${this.$t('INBOX_MGMT.FINISH.MESSAGE')}. ${this.$t(
-          'INBOX_MGMT.ADD.TWILIO.API_CALLBACK.SUBTITLE'
-        )}`;
-      }
-
-      if (this.isASmsInbox) {
-        return `${this.$t('INBOX_MGMT.FINISH.MESSAGE')}. ${this.$t(
-          'INBOX_MGMT.ADD.SMS.BANDWIDTH.API_CALLBACK.SUBTITLE'
-        )}`;
-      }
-
-      if (this.isALineInbox) {
-        return `${this.$t('INBOX_MGMT.FINISH.MESSAGE')}. ${this.$t(
-          'INBOX_MGMT.ADD.LINE_CHANNEL.API_CALLBACK.SUBTITLE'
-        )}`;
-      }
-
-      if (this.isWhatsAppCloudInbox) {
-        return `${this.$t('INBOX_MGMT.FINISH.MESSAGE')}. ${this.$t(
-          'INBOX_MGMT.ADD.WHATSAPP.API_CALLBACK.SUBTITLE'
-        )}`;
-      }
-
-      if (this.isAEmailInbox && !this.currentInbox.provider) {
-        return this.$t('INBOX_MGMT.ADD.EMAIL_CHANNEL.FINISH_MESSAGE');
-      }
-
-      if (this.currentInbox.web_widget_script) {
-        return this.$t('INBOX_MGMT.FINISH.WEBSITE_SUCCESS');
-      }
-
-      return this.$t('INBOX_MGMT.FINISH.MESSAGE');
-    },
-  },
-};
-</script>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/inbox/ImapSettings.vue b/app/javascript/dashboard/routes/dashboard/settings/inbox/ImapSettings.vue
index 1971f483d..6edf1feb4 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/ImapSettings.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/ImapSettings.vue
@@ -1,76 +1,3 @@
-<template>
-  <div class="mx-8">
-    <settings-section
-      :title="$t('INBOX_MGMT.IMAP.TITLE')"
-      :sub-title="$t('INBOX_MGMT.IMAP.SUBTITLE')"
-      :note="$t('INBOX_MGMT.IMAP.NOTE_TEXT')"
-    >
-      <form @submit.prevent="updateInbox">
-        <label for="toggle-imap-enable">
-          <input
-            v-model="isIMAPEnabled"
-            type="checkbox"
-            class="ltr:mr-2 rtl:ml-2"
-            name="toggle-imap-enable"
-          />
-          {{ $t('INBOX_MGMT.IMAP.TOGGLE_AVAILABILITY') }}
-        </label>
-        <p>{{ $t('INBOX_MGMT.IMAP.TOGGLE_HELP') }}</p>
-        <div v-if="isIMAPEnabled" class="mb-6">
-          <woot-input
-            v-model.trim="address"
-            :class="{ error: v$.address.$error }"
-            class="max-w-[75%] w-full"
-            :label="$t('INBOX_MGMT.IMAP.ADDRESS.LABEL')"
-            :placeholder="$t('INBOX_MGMT.IMAP.ADDRESS.PLACE_HOLDER')"
-            @blur="v$.address.$touch"
-          />
-          <woot-input
-            v-model="port"
-            type="number"
-            :class="{ error: v$.port.$error }"
-            class="max-w-[75%] w-full"
-            :label="$t('INBOX_MGMT.IMAP.PORT.LABEL')"
-            :placeholder="$t('INBOX_MGMT.IMAP.PORT.PLACE_HOLDER')"
-            @blur="v$.port.$touch"
-          />
-          <woot-input
-            v-model="login"
-            :class="{ error: v$.login.$error }"
-            class="max-w-[75%] w-full"
-            :label="$t('INBOX_MGMT.IMAP.LOGIN.LABEL')"
-            :placeholder="$t('INBOX_MGMT.IMAP.LOGIN.PLACE_HOLDER')"
-            @blur="v$.login.$touch"
-          />
-          <woot-input
-            v-model="password"
-            :class="{ error: v$.password.$error }"
-            class="max-w-[75%] w-full"
-            :label="$t('INBOX_MGMT.IMAP.PASSWORD.LABEL')"
-            :placeholder="$t('INBOX_MGMT.IMAP.PASSWORD.PLACE_HOLDER')"
-            type="password"
-            @blur="v$.password.$touch"
-          />
-          <label for="toggle-enable-ssl">
-            <input
-              v-model="isSSLEnabled"
-              type="checkbox"
-              class="ltr:mr-2 rtl:ml-2"
-              name="toggle-enable-ssl"
-            />
-            {{ $t('INBOX_MGMT.IMAP.ENABLE_SSL') }}
-          </label>
-        </div>
-        <woot-submit-button
-          :button-text="$t('INBOX_MGMT.IMAP.UPDATE')"
-          :loading="uiFlags.isUpdatingIMAP"
-          :disabled="(v$.$invalid && isIMAPEnabled) || uiFlags.isUpdatingIMAP"
-        />
-      </form>
-    </settings-section>
-  </div>
-</template>
-
 <script>
 import { mapGetters } from 'vuex';
 import { useAlert } from 'dashboard/composables';
@@ -164,3 +91,76 @@ export default {
   },
 };
 </script>
+
+<template>
+  <div class="mx-8">
+    <settings-section
+      :title="$t('INBOX_MGMT.IMAP.TITLE')"
+      :sub-title="$t('INBOX_MGMT.IMAP.SUBTITLE')"
+      :note="$t('INBOX_MGMT.IMAP.NOTE_TEXT')"
+    >
+      <form @submit.prevent="updateInbox">
+        <label for="toggle-imap-enable">
+          <input
+            v-model="isIMAPEnabled"
+            type="checkbox"
+            class="ltr:mr-2 rtl:ml-2"
+            name="toggle-imap-enable"
+          />
+          {{ $t('INBOX_MGMT.IMAP.TOGGLE_AVAILABILITY') }}
+        </label>
+        <p>{{ $t('INBOX_MGMT.IMAP.TOGGLE_HELP') }}</p>
+        <div v-if="isIMAPEnabled" class="mb-6">
+          <woot-input
+            v-model.trim="address"
+            :class="{ error: v$.address.$error }"
+            class="max-w-[75%] w-full"
+            :label="$t('INBOX_MGMT.IMAP.ADDRESS.LABEL')"
+            :placeholder="$t('INBOX_MGMT.IMAP.ADDRESS.PLACE_HOLDER')"
+            @blur="v$.address.$touch"
+          />
+          <woot-input
+            v-model="port"
+            type="number"
+            :class="{ error: v$.port.$error }"
+            class="max-w-[75%] w-full"
+            :label="$t('INBOX_MGMT.IMAP.PORT.LABEL')"
+            :placeholder="$t('INBOX_MGMT.IMAP.PORT.PLACE_HOLDER')"
+            @blur="v$.port.$touch"
+          />
+          <woot-input
+            v-model="login"
+            :class="{ error: v$.login.$error }"
+            class="max-w-[75%] w-full"
+            :label="$t('INBOX_MGMT.IMAP.LOGIN.LABEL')"
+            :placeholder="$t('INBOX_MGMT.IMAP.LOGIN.PLACE_HOLDER')"
+            @blur="v$.login.$touch"
+          />
+          <woot-input
+            v-model="password"
+            :class="{ error: v$.password.$error }"
+            class="max-w-[75%] w-full"
+            :label="$t('INBOX_MGMT.IMAP.PASSWORD.LABEL')"
+            :placeholder="$t('INBOX_MGMT.IMAP.PASSWORD.PLACE_HOLDER')"
+            type="password"
+            @blur="v$.password.$touch"
+          />
+          <label for="toggle-enable-ssl">
+            <input
+              v-model="isSSLEnabled"
+              type="checkbox"
+              class="ltr:mr-2 rtl:ml-2"
+              name="toggle-enable-ssl"
+            />
+            {{ $t('INBOX_MGMT.IMAP.ENABLE_SSL') }}
+          </label>
+        </div>
+        <woot-submit-button
+          :button-text="$t('INBOX_MGMT.IMAP.UPDATE')"
+          :loading="uiFlags.isUpdatingIMAP"
+          :disabled="(v$.$invalid && isIMAPEnabled) || uiFlags.isUpdatingIMAP"
+        />
+      </form>
+    </settings-section>
+  </div>
+</template>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/inbox/InboxChannels.vue b/app/javascript/dashboard/routes/dashboard/settings/inbox/InboxChannels.vue
index ec9dc1ab7..bab39f686 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/InboxChannels.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/InboxChannels.vue
@@ -1,16 +1,3 @@
-<template>
-  <div
-    class="flex flex-row overflow-auto p-4 h-full bg-slate-25 dark:bg-slate-800"
-  >
-    <woot-wizard
-      class="hidden md:block w-1/4"
-      :global-config="globalConfig"
-      :items="items"
-    />
-    <router-view />
-  </div>
-</template>
-
 <script>
 import { mapGetters } from 'vuex';
 import globalConfigMixin from 'shared/mixins/globalConfigMixin';
@@ -33,3 +20,16 @@ export default {
   },
 };
 </script>
+
+<template>
+  <div
+    class="flex flex-row overflow-auto p-4 h-full bg-slate-25 dark:bg-slate-800"
+  >
+    <woot-wizard
+      class="hidden md:block w-1/4"
+      :global-config="globalConfig"
+      :items="items"
+    />
+    <router-view />
+  </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 67072bcf7..893993318 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/Index.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/Index.vue
@@ -1,3 +1,95 @@
+<script>
+import { mapGetters } from 'vuex';
+import { useAlert } from 'dashboard/composables';
+import { useAdmin } from 'dashboard/composables/useAdmin';
+import Settings from './Settings.vue';
+import accountMixin from '../../../../mixins/account';
+import globalConfigMixin from 'shared/mixins/globalConfigMixin';
+
+export default {
+  components: {
+    Settings,
+  },
+  mixins: [accountMixin, globalConfigMixin],
+  setup() {
+    const { isAdmin } = useAdmin();
+    return {
+      isAdmin,
+    };
+  },
+  data() {
+    return {
+      loading: {},
+      showSettings: false,
+      showDeletePopup: false,
+      selectedInbox: {},
+    };
+  },
+  computed: {
+    ...mapGetters({
+      inboxesList: 'inboxes/getInboxes',
+      globalConfig: 'globalConfig/get',
+    }),
+    // Delete Modal
+    deleteConfirmText() {
+      return `${this.$t('INBOX_MGMT.DELETE.CONFIRM.YES')} ${
+        this.selectedInbox.name
+      }`;
+    },
+    deleteRejectText() {
+      return `${this.$t('INBOX_MGMT.DELETE.CONFIRM.NO')} ${
+        this.selectedInbox.name
+      }`;
+    },
+    confirmDeleteMessage() {
+      return `${this.$t('INBOX_MGMT.DELETE.CONFIRM.MESSAGE')} ${
+        this.selectedInbox.name
+      }?`;
+    },
+    confirmPlaceHolderText() {
+      return `${this.$t('INBOX_MGMT.DELETE.CONFIRM.PLACE_HOLDER', {
+        inboxName: this.selectedInbox.name,
+      })}`;
+    },
+  },
+  methods: {
+    twilioChannelName(item) {
+      const { medium = '' } = item;
+      if (medium === 'whatsapp') return 'WhatsApp';
+      return 'Twilio SMS';
+    },
+    openSettings(inbox) {
+      this.showSettings = true;
+      this.selectedInbox = inbox;
+    },
+    closeSettings() {
+      this.showSettings = false;
+      this.selectedInbox = {};
+    },
+    async deleteInbox({ id }) {
+      try {
+        await this.$store.dispatch('inboxes/delete', id);
+        useAlert(this.$t('INBOX_MGMT.DELETE.API.SUCCESS_MESSAGE'));
+      } catch (error) {
+        useAlert(this.$t('INBOX_MGMT.DELETE.API.ERROR_MESSAGE'));
+      }
+    },
+
+    confirmDeletion() {
+      this.deleteInbox(this.selectedInbox);
+      this.closeDelete();
+    },
+    openDelete(inbox) {
+      this.showDeletePopup = true;
+      this.selectedInbox = inbox;
+    },
+    closeDelete() {
+      this.showDeletePopup = false;
+      this.selectedInbox = {};
+    },
+  },
+};
+</script>
 <template>
   <div class="flex-1 overflow-auto">
     <div class="flex flex-row gap-4 p-8">
@@ -130,95 +222,3 @@
     />
   </div>
 </template>
-<script>
-import { mapGetters } from 'vuex';
-import { useAlert } from 'dashboard/composables';
-import { useAdmin } from 'dashboard/composables/useAdmin';
-import Settings from './Settings.vue';
-import accountMixin from '../../../../mixins/account';
-import globalConfigMixin from 'shared/mixins/globalConfigMixin';
-
-export default {
-  components: {
-    Settings,
-  },
-  mixins: [accountMixin, globalConfigMixin],
-  setup() {
-    const { isAdmin } = useAdmin();
-    return {
-      isAdmin,
-    };
-  },
-  data() {
-    return {
-      loading: {},
-      showSettings: false,
-      showDeletePopup: false,
-      selectedInbox: {},
-    };
-  },
-  computed: {
-    ...mapGetters({
-      inboxesList: 'inboxes/getInboxes',
-      globalConfig: 'globalConfig/get',
-    }),
-    // Delete Modal
-    deleteConfirmText() {
-      return `${this.$t('INBOX_MGMT.DELETE.CONFIRM.YES')} ${
-        this.selectedInbox.name
-      }`;
-    },
-    deleteRejectText() {
-      return `${this.$t('INBOX_MGMT.DELETE.CONFIRM.NO')} ${
-        this.selectedInbox.name
-      }`;
-    },
-    confirmDeleteMessage() {
-      return `${this.$t('INBOX_MGMT.DELETE.CONFIRM.MESSAGE')} ${
-        this.selectedInbox.name
-      }?`;
-    },
-    confirmPlaceHolderText() {
-      return `${this.$t('INBOX_MGMT.DELETE.CONFIRM.PLACE_HOLDER', {
-        inboxName: this.selectedInbox.name,
-      })}`;
-    },
-  },
-  methods: {
-    twilioChannelName(item) {
-      const { medium = '' } = item;
-      if (medium === 'whatsapp') return 'WhatsApp';
-      return 'Twilio SMS';
-    },
-    openSettings(inbox) {
-      this.showSettings = true;
-      this.selectedInbox = inbox;
-    },
-    closeSettings() {
-      this.showSettings = false;
-      this.selectedInbox = {};
-    },
-    async deleteInbox({ id }) {
-      try {
-        await this.$store.dispatch('inboxes/delete', id);
-        useAlert(this.$t('INBOX_MGMT.DELETE.API.SUCCESS_MESSAGE'));
-      } catch (error) {
-        useAlert(this.$t('INBOX_MGMT.DELETE.API.ERROR_MESSAGE'));
-      }
-    },
-
-    confirmDeletion() {
-      this.deleteInbox(this.selectedInbox);
-      this.closeDelete();
-    },
-    openDelete(inbox) {
-      this.showDeletePopup = true;
-      this.selectedInbox = inbox;
-    },
-    closeDelete() {
-      this.showDeletePopup = false;
-      this.selectedInbox = {};
-    },
-  },
-};
-</script>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/inbox/PreChatForm/PreChatFields.vue b/app/javascript/dashboard/routes/dashboard/settings/inbox/PreChatForm/PreChatFields.vue
index ee8e66446..e7d577f23 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/PreChatForm/PreChatFields.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/PreChatForm/PreChatFields.vue
@@ -1,3 +1,37 @@
+<script>
+import draggable from 'vuedraggable';
+export default {
+  components: { draggable },
+  props: {
+    preChatFields: {
+      type: Array,
+      default: () => [],
+    },
+  },
+  data() {
+    return {
+      preChatFieldOptions: this.preChatFields,
+    };
+  },
+  watch: {
+    preChatFields() {
+      this.preChatFieldOptions = this.preChatFields;
+    },
+  },
+  methods: {
+    isFieldEditable(item) {
+      return !item.enabled;
+    },
+    handlePreChatFieldOptions(event, type, item) {
+      this.$emit('update', event, type, item);
+    },
+    onDragEnd() {
+      this.$emit('drag-end', this.preChatFieldOptions);
+    },
+  },
+};
+</script>
+
 <template>
   <draggable v-model="preChatFieldOptions" tag="tbody" @end="onDragEnd">
     <tr v-for="(item, index) in preChatFieldOptions" :key="index">
@@ -40,40 +74,6 @@
     </tr>
   </draggable>
 </template>
-
-<script>
-import draggable from 'vuedraggable';
-export default {
-  components: { draggable },
-  props: {
-    preChatFields: {
-      type: Array,
-      default: () => [],
-    },
-  },
-  data() {
-    return {
-      preChatFieldOptions: this.preChatFields,
-    };
-  },
-  watch: {
-    preChatFields() {
-      this.preChatFieldOptions = this.preChatFields;
-    },
-  },
-  methods: {
-    isFieldEditable(item) {
-      return !item.enabled;
-    },
-    handlePreChatFieldOptions(event, type, item) {
-      this.$emit('update', event, type, item);
-    },
-    onDragEnd() {
-      this.$emit('drag-end', this.preChatFieldOptions);
-    },
-  },
-};
-</script>
 <style scoped lang="scss">
 .pre-chat-field {
   @apply py-4 px-2 text-slate-700 dark:text-slate-100;
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 a58adc443..26ed76e25 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/PreChatForm/Settings.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/PreChatForm/Settings.vue
@@ -1,82 +1,3 @@
-<template>
-  <div class="mx-8 my-2 text-base">
-    <div class="mx-0 mt-6 mb-3">
-      {{ $t('INBOX_MGMT.PRE_CHAT_FORM.DESCRIPTION') }}
-    </div>
-    <form class="flex flex-col" @submit.prevent="updateInbox">
-      <label class="w-1/4">
-        {{ $t('INBOX_MGMT.PRE_CHAT_FORM.ENABLE.LABEL') }}
-        <select v-model="preChatFormEnabled">
-          <option :value="true">
-            {{ $t('INBOX_MGMT.PRE_CHAT_FORM.ENABLE.OPTIONS.ENABLED') }}
-          </option>
-          <option :value="false">
-            {{ $t('INBOX_MGMT.PRE_CHAT_FORM.ENABLE.OPTIONS.DISABLED') }}
-          </option>
-        </select>
-      </label>
-      <div v-if="preChatFormEnabled">
-        <div class="w-[70%]">
-          <label>
-            {{ $t('INBOX_MGMT.PRE_CHAT_FORM.PRE_CHAT_MESSAGE.LABEL') }}
-          </label>
-          <woot-message-editor
-            v-model="preChatMessage"
-            class="message-editor"
-            :placeholder="
-              $t('INBOX_MGMT.PRE_CHAT_FORM.PRE_CHAT_MESSAGE.PLACEHOLDER')
-            "
-          />
-        </div>
-        <div class="w-[70%] mt-4">
-          <label>{{ $t('INBOX_MGMT.PRE_CHAT_FORM.SET_FIELDS') }}</label>
-          <table class="table w-full table-striped">
-            <thead class="thead-dark">
-              <tr>
-                <th scope="col" />
-                <th scope="col" />
-                <th scope="col">
-                  {{ $t('INBOX_MGMT.PRE_CHAT_FORM.SET_FIELDS_HEADER.KEY') }}
-                </th>
-                <th scope="col">
-                  {{ $t('INBOX_MGMT.PRE_CHAT_FORM.SET_FIELDS_HEADER.TYPE') }}
-                </th>
-                <th scope="col">
-                  {{
-                    $t('INBOX_MGMT.PRE_CHAT_FORM.SET_FIELDS_HEADER.REQUIRED')
-                  }}
-                </th>
-                <th scope="col">
-                  {{ $t('INBOX_MGMT.PRE_CHAT_FORM.SET_FIELDS_HEADER.LABEL') }}
-                </th>
-                <th scope="col">
-                  {{
-                    $t(
-                      'INBOX_MGMT.PRE_CHAT_FORM.SET_FIELDS_HEADER.PLACE_HOLDER'
-                    )
-                  }}
-                </th>
-              </tr>
-            </thead>
-            <pre-chat-fields
-              :pre-chat-fields="preChatFields"
-              @update="handlePreChatFieldOptions"
-              @drag-end="changePreChatFieldFieldsOrder"
-            />
-          </table>
-        </div>
-      </div>
-      <div class="w-auto my-4">
-        <woot-submit-button
-          :button-text="
-            $t('INBOX_MGMT.SETTINGS_POPUP.UPDATE_PRE_CHAT_FORM_SETTINGS')
-          "
-          :loading="uiFlags.isUpdating"
-        />
-      </div>
-    </form>
-  </div>
-</template>
 <script>
 import { mapGetters } from 'vuex';
 import { useAlert } from 'dashboard/composables';
@@ -170,6 +91,85 @@ export default {
   },
 };
 </script>
+<template>
+  <div class="mx-8 my-2 text-base">
+    <div class="mx-0 mt-6 mb-3">
+      {{ $t('INBOX_MGMT.PRE_CHAT_FORM.DESCRIPTION') }}
+    </div>
+    <form class="flex flex-col" @submit.prevent="updateInbox">
+      <label class="w-1/4">
+        {{ $t('INBOX_MGMT.PRE_CHAT_FORM.ENABLE.LABEL') }}
+        <select v-model="preChatFormEnabled">
+          <option :value="true">
+            {{ $t('INBOX_MGMT.PRE_CHAT_FORM.ENABLE.OPTIONS.ENABLED') }}
+          </option>
+          <option :value="false">
+            {{ $t('INBOX_MGMT.PRE_CHAT_FORM.ENABLE.OPTIONS.DISABLED') }}
+          </option>
+        </select>
+      </label>
+      <div v-if="preChatFormEnabled">
+        <div class="w-[70%]">
+          <label>
+            {{ $t('INBOX_MGMT.PRE_CHAT_FORM.PRE_CHAT_MESSAGE.LABEL') }}
+          </label>
+          <woot-message-editor
+            v-model="preChatMessage"
+            class="message-editor"
+            :placeholder="
+              $t('INBOX_MGMT.PRE_CHAT_FORM.PRE_CHAT_MESSAGE.PLACEHOLDER')
+            "
+          />
+        </div>
+        <div class="w-[70%] mt-4">
+          <label>{{ $t('INBOX_MGMT.PRE_CHAT_FORM.SET_FIELDS') }}</label>
+          <table class="table w-full table-striped">
+            <thead class="thead-dark">
+              <tr>
+                <th scope="col" />
+                <th scope="col" />
+                <th scope="col">
+                  {{ $t('INBOX_MGMT.PRE_CHAT_FORM.SET_FIELDS_HEADER.KEY') }}
+                </th>
+                <th scope="col">
+                  {{ $t('INBOX_MGMT.PRE_CHAT_FORM.SET_FIELDS_HEADER.TYPE') }}
+                </th>
+                <th scope="col">
+                  {{
+                    $t('INBOX_MGMT.PRE_CHAT_FORM.SET_FIELDS_HEADER.REQUIRED')
+                  }}
+                </th>
+                <th scope="col">
+                  {{ $t('INBOX_MGMT.PRE_CHAT_FORM.SET_FIELDS_HEADER.LABEL') }}
+                </th>
+                <th scope="col">
+                  {{
+                    $t(
+                      'INBOX_MGMT.PRE_CHAT_FORM.SET_FIELDS_HEADER.PLACE_HOLDER'
+                    )
+                  }}
+                </th>
+              </tr>
+            </thead>
+            <pre-chat-fields
+              :pre-chat-fields="preChatFields"
+              @update="handlePreChatFieldOptions"
+              @drag-end="changePreChatFieldFieldsOrder"
+            />
+          </table>
+        </div>
+      </div>
+      <div class="w-auto my-4">
+        <woot-submit-button
+          :button-text="
+            $t('INBOX_MGMT.SETTINGS_POPUP.UPDATE_PRE_CHAT_FORM_SETTINGS')
+          "
+          :loading="uiFlags.isUpdating"
+        />
+      </div>
+    </form>
+  </div>
+</template>
 <style scoped lang="scss">
 .message-editor {
   @apply px-3;
diff --git a/app/javascript/dashboard/routes/dashboard/settings/inbox/Settings.vue b/app/javascript/dashboard/routes/dashboard/settings/inbox/Settings.vue
index 5e6555d5c..ac25f8516 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/Settings.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/Settings.vue
@@ -1,3 +1,351 @@
+<script>
+import { mapGetters } from 'vuex';
+import { shouldBeUrl } from 'shared/helpers/Validators';
+import configMixin from 'shared/mixins/configMixin';
+import { useAlert } from 'dashboard/composables';
+import { useVuelidate } from '@vuelidate/core';
+import SettingIntroBanner from 'dashboard/components/widgets/SettingIntroBanner.vue';
+import SettingsSection from '../../../../components/SettingsSection.vue';
+import inboxMixin from 'shared/mixins/inboxMixin';
+import FacebookReauthorize from './facebook/Reauthorize.vue';
+import PreChatFormSettings from './PreChatForm/Settings.vue';
+import WeeklyAvailability from './components/WeeklyAvailability.vue';
+import GreetingsEditor from 'shared/components/GreetingsEditor.vue';
+import ConfigurationPage from './settingsPage/ConfigurationPage.vue';
+import CollaboratorsPage from './settingsPage/CollaboratorsPage.vue';
+import MicrosoftReauthorize from './channels/microsoft/Reauthorize.vue';
+import WidgetBuilder from './WidgetBuilder.vue';
+import BotConfiguration from './components/BotConfiguration.vue';
+import { FEATURE_FLAGS } from '../../../../featureFlags';
+import SenderNameExamplePreview from './components/SenderNameExamplePreview.vue';
+
+export default {
+  components: {
+    BotConfiguration,
+    CollaboratorsPage,
+    ConfigurationPage,
+    FacebookReauthorize,
+    GreetingsEditor,
+    PreChatFormSettings,
+    SettingIntroBanner,
+    SettingsSection,
+    WeeklyAvailability,
+    WidgetBuilder,
+    SenderNameExamplePreview,
+    MicrosoftReauthorize,
+  },
+  mixins: [configMixin, inboxMixin],
+  setup() {
+    return { v$: useVuelidate() };
+  },
+  data() {
+    return {
+      avatarFile: null,
+      avatarUrl: '',
+      greetingEnabled: true,
+      greetingMessage: '',
+      emailCollectEnabled: false,
+      csatSurveyEnabled: false,
+      senderNameType: 'friendly',
+      businessName: '',
+      locktoSingleConversation: false,
+      allowMessagesAfterResolved: true,
+      continuityViaEmail: true,
+      selectedInboxName: '',
+      channelWebsiteUrl: '',
+      webhookUrl: '',
+      channelWelcomeTitle: '',
+      channelWelcomeTagline: '',
+      selectedFeatureFlags: [],
+      replyTime: '',
+      selectedTabIndex: 0,
+      selectedPortalSlug: '',
+      showBusinessNameInput: false,
+    };
+  },
+  computed: {
+    ...mapGetters({
+      accountId: 'getCurrentAccountId',
+      isFeatureEnabledonAccount: 'accounts/isFeatureEnabledonAccount',
+      uiFlags: 'inboxes/getUIFlags',
+      portals: 'portals/allPortals',
+    }),
+    selectedTabKey() {
+      return this.tabs[this.selectedTabIndex]?.key;
+    },
+    whatsAppAPIProviderName() {
+      if (this.isAWhatsAppCloudChannel) {
+        return this.$t('INBOX_MGMT.ADD.WHATSAPP.PROVIDERS.WHATSAPP_CLOUD');
+      }
+      if (this.is360DialogWhatsAppChannel) {
+        return this.$t('INBOX_MGMT.ADD.WHATSAPP.PROVIDERS.360_DIALOG');
+      }
+      if (this.isATwilioWhatsAppChannel) {
+        return this.$t('INBOX_MGMT.ADD.WHATSAPP.PROVIDERS.TWILIO');
+      }
+      return '';
+    },
+    tabs() {
+      let visibleToAllChannelTabs = [
+        {
+          key: 'inbox_settings',
+          name: this.$t('INBOX_MGMT.TABS.SETTINGS'),
+        },
+        {
+          key: 'collaborators',
+          name: this.$t('INBOX_MGMT.TABS.COLLABORATORS'),
+        },
+        {
+          key: 'businesshours',
+          name: this.$t('INBOX_MGMT.TABS.BUSINESS_HOURS'),
+        },
+      ];
+
+      if (this.isAWebWidgetInbox) {
+        visibleToAllChannelTabs = [
+          ...visibleToAllChannelTabs,
+          {
+            key: 'preChatForm',
+            name: this.$t('INBOX_MGMT.TABS.PRE_CHAT_FORM'),
+          },
+          {
+            key: 'widgetBuilder',
+            name: this.$t('INBOX_MGMT.TABS.WIDGET_BUILDER'),
+          },
+        ];
+      }
+
+      if (
+        this.isATwilioChannel ||
+        this.isALineChannel ||
+        this.isAPIInbox ||
+        (this.isAnEmailChannel && !this.inbox.provider) ||
+        this.isAMicrosoftInbox ||
+        this.isAGoogleInbox ||
+        this.isAWhatsAppChannel ||
+        this.isAWebWidgetInbox
+      ) {
+        visibleToAllChannelTabs = [
+          ...visibleToAllChannelTabs,
+          {
+            key: 'configuration',
+            name: this.$t('INBOX_MGMT.TABS.CONFIGURATION'),
+          },
+        ];
+      }
+
+      if (
+        this.isFeatureEnabledonAccount(
+          this.accountId,
+          FEATURE_FLAGS.AGENT_BOTS
+        ) &&
+        !(this.isAnEmailChannel || this.isATwitterInbox)
+      ) {
+        visibleToAllChannelTabs = [
+          ...visibleToAllChannelTabs,
+          {
+            key: 'botConfiguration',
+            name: this.$t('INBOX_MGMT.TABS.BOT_CONFIGURATION'),
+          },
+        ];
+      }
+      return visibleToAllChannelTabs;
+    },
+    currentInboxId() {
+      return this.$route.params.inboxId;
+    },
+    inbox() {
+      return this.$store.getters['inboxes/getInbox'](this.currentInboxId);
+    },
+
+    inboxName() {
+      if (this.isATwilioSMSChannel || this.isATwilioWhatsAppChannel) {
+        return `${this.inbox.name} (${
+          this.inbox.messaging_service_sid || this.inbox.phone_number
+        })`;
+      }
+      if (this.isAWhatsAppChannel) {
+        return `${this.inbox.name} (${this.inbox.phone_number})`;
+      }
+      if (this.isAnEmailChannel) {
+        return `${this.inbox.name} (${this.inbox.email})`;
+      }
+      return this.inbox.name;
+    },
+    canLocktoSingleConversation() {
+      return (
+        this.isASmsInbox || this.isAWhatsAppChannel || this.isAFacebookInbox
+      );
+    },
+    inboxNameLabel() {
+      if (this.isAWebWidgetInbox) {
+        return this.$t('INBOX_MGMT.ADD.WEBSITE_NAME.LABEL');
+      }
+      return this.$t('INBOX_MGMT.ADD.CHANNEL_NAME.LABEL');
+    },
+    inboxNamePlaceHolder() {
+      if (this.isAWebWidgetInbox) {
+        return this.$t('INBOX_MGMT.ADD.WEBSITE_NAME.PLACEHOLDER');
+      }
+      return this.$t('INBOX_MGMT.ADD.CHANNEL_NAME.PLACEHOLDER');
+    },
+    textAreaChannels() {
+      if (
+        this.isATwilioChannel ||
+        this.isATwitterInbox ||
+        this.isAFacebookInbox
+      )
+        return true;
+      return false;
+    },
+    microsoftUnauthorized() {
+      return this.isAMicrosoftInbox && this.inbox.reauthorization_required;
+    },
+    facebookUnauthorized() {
+      return this.isAFacebookInbox && this.inbox.reauthorization_required;
+    },
+  },
+  watch: {
+    $route(to) {
+      if (to.name === 'settings_inbox_show') {
+        this.fetchInboxSettings();
+      }
+    },
+  },
+  mounted() {
+    this.fetchInboxSettings();
+    this.fetchPortals();
+  },
+  methods: {
+    fetchPortals() {
+      this.$store.dispatch('portals/index');
+    },
+    handleFeatureFlag(e) {
+      this.selectedFeatureFlags = this.toggleInput(
+        this.selectedFeatureFlags,
+        e.target.value
+      );
+    },
+    toggleInput(selected, current) {
+      if (selected.includes(current)) {
+        const newSelectedFlags = selected.filter(flag => flag !== current);
+        return newSelectedFlags;
+      }
+      return [...selected, current];
+    },
+    onTabChange(selectedTabIndex) {
+      this.selectedTabIndex = selectedTabIndex;
+    },
+    fetchInboxSettings() {
+      this.selectedTabIndex = 0;
+      this.selectedAgents = [];
+      this.$store.dispatch('agents/get');
+      this.$store.dispatch('teams/get');
+      this.$store.dispatch('labels/get');
+      this.$store.dispatch('inboxes/get').then(() => {
+        this.avatarUrl = this.inbox.avatar_url;
+        this.selectedInboxName = this.inbox.name;
+        this.webhookUrl = this.inbox.webhook_url;
+        this.greetingEnabled = this.inbox.greeting_enabled || false;
+        this.greetingMessage = this.inbox.greeting_message || '';
+        this.emailCollectEnabled = this.inbox.enable_email_collect;
+        this.csatSurveyEnabled = this.inbox.csat_survey_enabled;
+        this.senderNameType = this.inbox.sender_name_type;
+        this.businessName = this.inbox.business_name;
+        this.allowMessagesAfterResolved =
+          this.inbox.allow_messages_after_resolved;
+        this.continuityViaEmail = this.inbox.continuity_via_email;
+        this.channelWebsiteUrl = this.inbox.website_url;
+        this.channelWelcomeTitle = this.inbox.welcome_title;
+        this.channelWelcomeTagline = this.inbox.welcome_tagline;
+        this.selectedFeatureFlags = this.inbox.selected_feature_flags || [];
+        this.replyTime = this.inbox.reply_time;
+        this.locktoSingleConversation = this.inbox.lock_to_single_conversation;
+        this.selectedPortalSlug = this.inbox.help_center
+          ? this.inbox.help_center.slug
+          : '';
+      });
+    },
+    async updateInbox() {
+      try {
+        const payload = {
+          id: this.currentInboxId,
+          name: this.selectedInboxName,
+          enable_email_collect: this.emailCollectEnabled,
+          csat_survey_enabled: this.csatSurveyEnabled,
+          allow_messages_after_resolved: this.allowMessagesAfterResolved,
+          greeting_enabled: this.greetingEnabled,
+          greeting_message: this.greetingMessage || '',
+          portal_id: this.selectedPortalSlug
+            ? this.portals.find(
+                portal => portal.slug === this.selectedPortalSlug
+              ).id
+            : null,
+          lock_to_single_conversation: this.locktoSingleConversation,
+          sender_name_type: this.senderNameType,
+          business_name: this.businessName || null,
+          channel: {
+            widget_color: this.inbox.widget_color,
+            website_url: this.channelWebsiteUrl,
+            webhook_url: this.webhookUrl,
+            welcome_title: this.channelWelcomeTitle || '',
+            welcome_tagline: this.channelWelcomeTagline || '',
+            selectedFeatureFlags: this.selectedFeatureFlags,
+            reply_time: this.replyTime || 'in_a_few_minutes',
+            continuity_via_email: this.continuityViaEmail,
+          },
+        };
+        if (this.avatarFile) {
+          payload.avatar = this.avatarFile;
+        }
+        await this.$store.dispatch('inboxes/updateInbox', payload);
+        useAlert(this.$t('INBOX_MGMT.EDIT.API.SUCCESS_MESSAGE'));
+      } catch (error) {
+        useAlert(error.message || this.$t('INBOX_MGMT.EDIT.API.ERROR_MESSAGE'));
+      }
+    },
+    handleImageUpload({ file, url }) {
+      this.avatarFile = file;
+      this.avatarUrl = url;
+    },
+    async handleAvatarDelete() {
+      try {
+        await this.$store.dispatch(
+          'inboxes/deleteInboxAvatar',
+          this.currentInboxId
+        );
+        this.avatarFile = null;
+        this.avatarUrl = '';
+        useAlert(this.$t('INBOX_MGMT.DELETE.API.AVATAR_SUCCESS_MESSAGE'));
+      } catch (error) {
+        useAlert(
+          error.message
+            ? error.message
+            : this.$t('INBOX_MGMT.DELETE.API.AVATAR_ERROR_MESSAGE')
+        );
+      }
+    },
+    toggleSenderNameType(key) {
+      this.senderNameType = key;
+    },
+    onClickShowBusinessNameInput() {
+      this.showBusinessNameInput = !this.showBusinessNameInput;
+      if (this.showBusinessNameInput) {
+        this.$nextTick(() => {
+          this.$refs.businessNameInput.focus();
+        });
+      }
+    },
+  },
+  validations: {
+    webhookUrl: {
+      shouldBeUrl,
+    },
+    selectedInboxName: {},
+  },
+};
+</script>
+
 <template>
   <div
     class="flex-grow flex-shrink w-full min-w-0 pl-0 pr-0 overflow-auto bg-white settings dark:bg-slate-800"
@@ -423,354 +771,6 @@
   </div>
 </template>
 
-<script>
-import { mapGetters } from 'vuex';
-import { shouldBeUrl } from 'shared/helpers/Validators';
-import configMixin from 'shared/mixins/configMixin';
-import { useAlert } from 'dashboard/composables';
-import { useVuelidate } from '@vuelidate/core';
-import SettingIntroBanner from 'dashboard/components/widgets/SettingIntroBanner.vue';
-import SettingsSection from '../../../../components/SettingsSection.vue';
-import inboxMixin from 'shared/mixins/inboxMixin';
-import FacebookReauthorize from './facebook/Reauthorize.vue';
-import PreChatFormSettings from './PreChatForm/Settings.vue';
-import WeeklyAvailability from './components/WeeklyAvailability.vue';
-import GreetingsEditor from 'shared/components/GreetingsEditor.vue';
-import ConfigurationPage from './settingsPage/ConfigurationPage.vue';
-import CollaboratorsPage from './settingsPage/CollaboratorsPage.vue';
-import MicrosoftReauthorize from './channels/microsoft/Reauthorize.vue';
-import WidgetBuilder from './WidgetBuilder.vue';
-import BotConfiguration from './components/BotConfiguration.vue';
-import { FEATURE_FLAGS } from '../../../../featureFlags';
-import SenderNameExamplePreview from './components/SenderNameExamplePreview.vue';
-
-export default {
-  components: {
-    BotConfiguration,
-    CollaboratorsPage,
-    ConfigurationPage,
-    FacebookReauthorize,
-    GreetingsEditor,
-    PreChatFormSettings,
-    SettingIntroBanner,
-    SettingsSection,
-    WeeklyAvailability,
-    WidgetBuilder,
-    SenderNameExamplePreview,
-    MicrosoftReauthorize,
-  },
-  mixins: [configMixin, inboxMixin],
-  setup() {
-    return { v$: useVuelidate() };
-  },
-  data() {
-    return {
-      avatarFile: null,
-      avatarUrl: '',
-      greetingEnabled: true,
-      greetingMessage: '',
-      emailCollectEnabled: false,
-      csatSurveyEnabled: false,
-      senderNameType: 'friendly',
-      businessName: '',
-      locktoSingleConversation: false,
-      allowMessagesAfterResolved: true,
-      continuityViaEmail: true,
-      selectedInboxName: '',
-      channelWebsiteUrl: '',
-      webhookUrl: '',
-      channelWelcomeTitle: '',
-      channelWelcomeTagline: '',
-      selectedFeatureFlags: [],
-      replyTime: '',
-      selectedTabIndex: 0,
-      selectedPortalSlug: '',
-      showBusinessNameInput: false,
-    };
-  },
-  computed: {
-    ...mapGetters({
-      accountId: 'getCurrentAccountId',
-      isFeatureEnabledonAccount: 'accounts/isFeatureEnabledonAccount',
-      uiFlags: 'inboxes/getUIFlags',
-      portals: 'portals/allPortals',
-    }),
-    selectedTabKey() {
-      return this.tabs[this.selectedTabIndex]?.key;
-    },
-    whatsAppAPIProviderName() {
-      if (this.isAWhatsAppCloudChannel) {
-        return this.$t('INBOX_MGMT.ADD.WHATSAPP.PROVIDERS.WHATSAPP_CLOUD');
-      }
-      if (this.is360DialogWhatsAppChannel) {
-        return this.$t('INBOX_MGMT.ADD.WHATSAPP.PROVIDERS.360_DIALOG');
-      }
-      if (this.isATwilioWhatsAppChannel) {
-        return this.$t('INBOX_MGMT.ADD.WHATSAPP.PROVIDERS.TWILIO');
-      }
-      return '';
-    },
-    tabs() {
-      let visibleToAllChannelTabs = [
-        {
-          key: 'inbox_settings',
-          name: this.$t('INBOX_MGMT.TABS.SETTINGS'),
-        },
-        {
-          key: 'collaborators',
-          name: this.$t('INBOX_MGMT.TABS.COLLABORATORS'),
-        },
-        {
-          key: 'businesshours',
-          name: this.$t('INBOX_MGMT.TABS.BUSINESS_HOURS'),
-        },
-      ];
-
-      if (this.isAWebWidgetInbox) {
-        visibleToAllChannelTabs = [
-          ...visibleToAllChannelTabs,
-          {
-            key: 'preChatForm',
-            name: this.$t('INBOX_MGMT.TABS.PRE_CHAT_FORM'),
-          },
-          {
-            key: 'widgetBuilder',
-            name: this.$t('INBOX_MGMT.TABS.WIDGET_BUILDER'),
-          },
-        ];
-      }
-
-      if (
-        this.isATwilioChannel ||
-        this.isALineChannel ||
-        this.isAPIInbox ||
-        (this.isAnEmailChannel && !this.inbox.provider) ||
-        this.isAMicrosoftInbox ||
-        this.isAGoogleInbox ||
-        this.isAWhatsAppChannel ||
-        this.isAWebWidgetInbox
-      ) {
-        visibleToAllChannelTabs = [
-          ...visibleToAllChannelTabs,
-          {
-            key: 'configuration',
-            name: this.$t('INBOX_MGMT.TABS.CONFIGURATION'),
-          },
-        ];
-      }
-
-      if (
-        this.isFeatureEnabledonAccount(
-          this.accountId,
-          FEATURE_FLAGS.AGENT_BOTS
-        ) &&
-        !(this.isAnEmailChannel || this.isATwitterInbox)
-      ) {
-        visibleToAllChannelTabs = [
-          ...visibleToAllChannelTabs,
-          {
-            key: 'botConfiguration',
-            name: this.$t('INBOX_MGMT.TABS.BOT_CONFIGURATION'),
-          },
-        ];
-      }
-      return visibleToAllChannelTabs;
-    },
-    currentInboxId() {
-      return this.$route.params.inboxId;
-    },
-    inbox() {
-      return this.$store.getters['inboxes/getInbox'](this.currentInboxId);
-    },
-
-    inboxName() {
-      if (this.isATwilioSMSChannel || this.isATwilioWhatsAppChannel) {
-        return `${this.inbox.name} (${
-          this.inbox.messaging_service_sid || this.inbox.phone_number
-        })`;
-      }
-      if (this.isAWhatsAppChannel) {
-        return `${this.inbox.name} (${this.inbox.phone_number})`;
-      }
-      if (this.isAnEmailChannel) {
-        return `${this.inbox.name} (${this.inbox.email})`;
-      }
-      return this.inbox.name;
-    },
-    canLocktoSingleConversation() {
-      return (
-        this.isASmsInbox || this.isAWhatsAppChannel || this.isAFacebookInbox
-      );
-    },
-    inboxNameLabel() {
-      if (this.isAWebWidgetInbox) {
-        return this.$t('INBOX_MGMT.ADD.WEBSITE_NAME.LABEL');
-      }
-      return this.$t('INBOX_MGMT.ADD.CHANNEL_NAME.LABEL');
-    },
-    inboxNamePlaceHolder() {
-      if (this.isAWebWidgetInbox) {
-        return this.$t('INBOX_MGMT.ADD.WEBSITE_NAME.PLACEHOLDER');
-      }
-      return this.$t('INBOX_MGMT.ADD.CHANNEL_NAME.PLACEHOLDER');
-    },
-    textAreaChannels() {
-      if (
-        this.isATwilioChannel ||
-        this.isATwitterInbox ||
-        this.isAFacebookInbox
-      )
-        return true;
-      return false;
-    },
-    microsoftUnauthorized() {
-      return this.isAMicrosoftInbox && this.inbox.reauthorization_required;
-    },
-    facebookUnauthorized() {
-      return this.isAFacebookInbox && this.inbox.reauthorization_required;
-    },
-  },
-  watch: {
-    $route(to) {
-      if (to.name === 'settings_inbox_show') {
-        this.fetchInboxSettings();
-      }
-    },
-  },
-  mounted() {
-    this.fetchInboxSettings();
-    this.fetchPortals();
-  },
-  methods: {
-    fetchPortals() {
-      this.$store.dispatch('portals/index');
-    },
-    handleFeatureFlag(e) {
-      this.selectedFeatureFlags = this.toggleInput(
-        this.selectedFeatureFlags,
-        e.target.value
-      );
-    },
-    toggleInput(selected, current) {
-      if (selected.includes(current)) {
-        const newSelectedFlags = selected.filter(flag => flag !== current);
-        return newSelectedFlags;
-      }
-      return [...selected, current];
-    },
-    onTabChange(selectedTabIndex) {
-      this.selectedTabIndex = selectedTabIndex;
-    },
-    fetchInboxSettings() {
-      this.selectedTabIndex = 0;
-      this.selectedAgents = [];
-      this.$store.dispatch('agents/get');
-      this.$store.dispatch('teams/get');
-      this.$store.dispatch('labels/get');
-      this.$store.dispatch('inboxes/get').then(() => {
-        this.avatarUrl = this.inbox.avatar_url;
-        this.selectedInboxName = this.inbox.name;
-        this.webhookUrl = this.inbox.webhook_url;
-        this.greetingEnabled = this.inbox.greeting_enabled || false;
-        this.greetingMessage = this.inbox.greeting_message || '';
-        this.emailCollectEnabled = this.inbox.enable_email_collect;
-        this.csatSurveyEnabled = this.inbox.csat_survey_enabled;
-        this.senderNameType = this.inbox.sender_name_type;
-        this.businessName = this.inbox.business_name;
-        this.allowMessagesAfterResolved =
-          this.inbox.allow_messages_after_resolved;
-        this.continuityViaEmail = this.inbox.continuity_via_email;
-        this.channelWebsiteUrl = this.inbox.website_url;
-        this.channelWelcomeTitle = this.inbox.welcome_title;
-        this.channelWelcomeTagline = this.inbox.welcome_tagline;
-        this.selectedFeatureFlags = this.inbox.selected_feature_flags || [];
-        this.replyTime = this.inbox.reply_time;
-        this.locktoSingleConversation = this.inbox.lock_to_single_conversation;
-        this.selectedPortalSlug = this.inbox.help_center
-          ? this.inbox.help_center.slug
-          : '';
-      });
-    },
-    async updateInbox() {
-      try {
-        const payload = {
-          id: this.currentInboxId,
-          name: this.selectedInboxName,
-          enable_email_collect: this.emailCollectEnabled,
-          csat_survey_enabled: this.csatSurveyEnabled,
-          allow_messages_after_resolved: this.allowMessagesAfterResolved,
-          greeting_enabled: this.greetingEnabled,
-          greeting_message: this.greetingMessage || '',
-          portal_id: this.selectedPortalSlug
-            ? this.portals.find(
-                portal => portal.slug === this.selectedPortalSlug
-              ).id
-            : null,
-          lock_to_single_conversation: this.locktoSingleConversation,
-          sender_name_type: this.senderNameType,
-          business_name: this.businessName || null,
-          channel: {
-            widget_color: this.inbox.widget_color,
-            website_url: this.channelWebsiteUrl,
-            webhook_url: this.webhookUrl,
-            welcome_title: this.channelWelcomeTitle || '',
-            welcome_tagline: this.channelWelcomeTagline || '',
-            selectedFeatureFlags: this.selectedFeatureFlags,
-            reply_time: this.replyTime || 'in_a_few_minutes',
-            continuity_via_email: this.continuityViaEmail,
-          },
-        };
-        if (this.avatarFile) {
-          payload.avatar = this.avatarFile;
-        }
-        await this.$store.dispatch('inboxes/updateInbox', payload);
-        useAlert(this.$t('INBOX_MGMT.EDIT.API.SUCCESS_MESSAGE'));
-      } catch (error) {
-        useAlert(error.message || this.$t('INBOX_MGMT.EDIT.API.ERROR_MESSAGE'));
-      }
-    },
-    handleImageUpload({ file, url }) {
-      this.avatarFile = file;
-      this.avatarUrl = url;
-    },
-    async handleAvatarDelete() {
-      try {
-        await this.$store.dispatch(
-          'inboxes/deleteInboxAvatar',
-          this.currentInboxId
-        );
-        this.avatarFile = null;
-        this.avatarUrl = '';
-        useAlert(this.$t('INBOX_MGMT.DELETE.API.AVATAR_SUCCESS_MESSAGE'));
-      } catch (error) {
-        useAlert(
-          error.message
-            ? error.message
-            : this.$t('INBOX_MGMT.DELETE.API.AVATAR_ERROR_MESSAGE')
-        );
-      }
-    },
-    toggleSenderNameType(key) {
-      this.senderNameType = key;
-    },
-    onClickShowBusinessNameInput() {
-      this.showBusinessNameInput = !this.showBusinessNameInput;
-      if (this.showBusinessNameInput) {
-        this.$nextTick(() => {
-          this.$refs.businessNameInput.focus();
-        });
-      }
-    },
-  },
-  validations: {
-    webhookUrl: {
-      shouldBeUrl,
-    },
-    selectedInboxName: {},
-  },
-};
-</script>
-
 <style scoped lang="scss">
 .settings--tabs {
   ::v-deep .tabs {
diff --git a/app/javascript/dashboard/routes/dashboard/settings/inbox/SmtpSettings.vue b/app/javascript/dashboard/routes/dashboard/settings/inbox/SmtpSettings.vue
index 87ed75e7c..bb0bdedb7 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/SmtpSettings.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/SmtpSettings.vue
@@ -1,92 +1,3 @@
-<template>
-  <div class="mx-8">
-    <settings-section
-      :title="$t('INBOX_MGMT.SMTP.TITLE')"
-      :sub-title="$t('INBOX_MGMT.SMTP.SUBTITLE')"
-    >
-      <form @submit.prevent="updateInbox">
-        <label for="toggle-enable-smtp">
-          <input
-            v-model="isSMTPEnabled"
-            type="checkbox"
-            name="toggle-enable-smtp"
-          />
-          {{ $t('INBOX_MGMT.SMTP.TOGGLE_AVAILABILITY') }}
-        </label>
-        <p>{{ $t('INBOX_MGMT.SMTP.TOGGLE_HELP') }}</p>
-        <div v-if="isSMTPEnabled" class="mb-6">
-          <woot-input
-            v-model.trim="address"
-            :class="{ error: v$.address.$error }"
-            class="max-w-[75%] w-full"
-            :label="$t('INBOX_MGMT.SMTP.ADDRESS.LABEL')"
-            :placeholder="$t('INBOX_MGMT.SMTP.ADDRESS.PLACE_HOLDER')"
-            @blur="v$.address.$touch"
-          />
-          <woot-input
-            v-model="port"
-            type="number"
-            :class="{ error: v$.port.$error }"
-            class="max-w-[75%] w-full"
-            :label="$t('INBOX_MGMT.SMTP.PORT.LABEL')"
-            :placeholder="$t('INBOX_MGMT.SMTP.PORT.PLACE_HOLDER')"
-            @blur="v$.port.$touch"
-          />
-          <woot-input
-            v-model="login"
-            :class="{ error: v$.login.$error }"
-            class="max-w-[75%] w-full"
-            :label="$t('INBOX_MGMT.SMTP.LOGIN.LABEL')"
-            :placeholder="$t('INBOX_MGMT.SMTP.LOGIN.PLACE_HOLDER')"
-            @blur="v$.login.$touch"
-          />
-          <woot-input
-            v-model="password"
-            :class="{ error: v$.password.$error }"
-            class="max-w-[75%] w-full"
-            :label="$t('INBOX_MGMT.SMTP.PASSWORD.LABEL')"
-            :placeholder="$t('INBOX_MGMT.SMTP.PASSWORD.PLACE_HOLDER')"
-            type="password"
-            @blur="v$.password.$touch"
-          />
-          <woot-input
-            v-model.trim="domain"
-            :class="{ error: v$.domain.$error }"
-            class="max-w-[75%] w-full"
-            :label="$t('INBOX_MGMT.SMTP.DOMAIN.LABEL')"
-            :placeholder="$t('INBOX_MGMT.SMTP.DOMAIN.PLACE_HOLDER')"
-            @blur="v$.domain.$touch"
-          />
-          <input-radio-group
-            :label="$t('INBOX_MGMT.SMTP.ENCRYPTION')"
-            :items="encryptionProtocols"
-            :action="handleEncryptionChange"
-          />
-          <single-select-dropdown
-            class="max-w-[75%] w-full"
-            :label="$t('INBOX_MGMT.SMTP.OPEN_SSL_VERIFY_MODE')"
-            :selected="openSSLVerifyMode"
-            :options="openSSLVerifyModes"
-            :action="handleSSLModeChange"
-          />
-          <single-select-dropdown
-            class="max-w-[75%] w-full"
-            :label="$t('INBOX_MGMT.SMTP.AUTH_MECHANISM')"
-            :selected="authMechanism"
-            :options="authMechanisms"
-            :action="handleAuthMechanismChange"
-          />
-        </div>
-        <woot-submit-button
-          :button-text="$t('INBOX_MGMT.SMTP.UPDATE')"
-          :loading="uiFlags.isUpdatingSMTP"
-          :disabled="(v$.$invalid && isSMTPEnabled) || uiFlags.isUpdatingSMTP"
-        />
-      </form>
-    </settings-section>
-  </div>
-</template>
-
 <script>
 import { mapGetters } from 'vuex';
 import { useAlert } from 'dashboard/composables';
@@ -240,3 +151,92 @@ export default {
   },
 };
 </script>
+
+<template>
+  <div class="mx-8">
+    <settings-section
+      :title="$t('INBOX_MGMT.SMTP.TITLE')"
+      :sub-title="$t('INBOX_MGMT.SMTP.SUBTITLE')"
+    >
+      <form @submit.prevent="updateInbox">
+        <label for="toggle-enable-smtp">
+          <input
+            v-model="isSMTPEnabled"
+            type="checkbox"
+            name="toggle-enable-smtp"
+          />
+          {{ $t('INBOX_MGMT.SMTP.TOGGLE_AVAILABILITY') }}
+        </label>
+        <p>{{ $t('INBOX_MGMT.SMTP.TOGGLE_HELP') }}</p>
+        <div v-if="isSMTPEnabled" class="mb-6">
+          <woot-input
+            v-model.trim="address"
+            :class="{ error: v$.address.$error }"
+            class="max-w-[75%] w-full"
+            :label="$t('INBOX_MGMT.SMTP.ADDRESS.LABEL')"
+            :placeholder="$t('INBOX_MGMT.SMTP.ADDRESS.PLACE_HOLDER')"
+            @blur="v$.address.$touch"
+          />
+          <woot-input
+            v-model="port"
+            type="number"
+            :class="{ error: v$.port.$error }"
+            class="max-w-[75%] w-full"
+            :label="$t('INBOX_MGMT.SMTP.PORT.LABEL')"
+            :placeholder="$t('INBOX_MGMT.SMTP.PORT.PLACE_HOLDER')"
+            @blur="v$.port.$touch"
+          />
+          <woot-input
+            v-model="login"
+            :class="{ error: v$.login.$error }"
+            class="max-w-[75%] w-full"
+            :label="$t('INBOX_MGMT.SMTP.LOGIN.LABEL')"
+            :placeholder="$t('INBOX_MGMT.SMTP.LOGIN.PLACE_HOLDER')"
+            @blur="v$.login.$touch"
+          />
+          <woot-input
+            v-model="password"
+            :class="{ error: v$.password.$error }"
+            class="max-w-[75%] w-full"
+            :label="$t('INBOX_MGMT.SMTP.PASSWORD.LABEL')"
+            :placeholder="$t('INBOX_MGMT.SMTP.PASSWORD.PLACE_HOLDER')"
+            type="password"
+            @blur="v$.password.$touch"
+          />
+          <woot-input
+            v-model.trim="domain"
+            :class="{ error: v$.domain.$error }"
+            class="max-w-[75%] w-full"
+            :label="$t('INBOX_MGMT.SMTP.DOMAIN.LABEL')"
+            :placeholder="$t('INBOX_MGMT.SMTP.DOMAIN.PLACE_HOLDER')"
+            @blur="v$.domain.$touch"
+          />
+          <input-radio-group
+            :label="$t('INBOX_MGMT.SMTP.ENCRYPTION')"
+            :items="encryptionProtocols"
+            :action="handleEncryptionChange"
+          />
+          <single-select-dropdown
+            class="max-w-[75%] w-full"
+            :label="$t('INBOX_MGMT.SMTP.OPEN_SSL_VERIFY_MODE')"
+            :selected="openSSLVerifyMode"
+            :options="openSSLVerifyModes"
+            :action="handleSSLModeChange"
+          />
+          <single-select-dropdown
+            class="max-w-[75%] w-full"
+            :label="$t('INBOX_MGMT.SMTP.AUTH_MECHANISM')"
+            :selected="authMechanism"
+            :options="authMechanisms"
+            :action="handleAuthMechanismChange"
+          />
+        </div>
+        <woot-submit-button
+          :button-text="$t('INBOX_MGMT.SMTP.UPDATE')"
+          :loading="uiFlags.isUpdatingSMTP"
+          :disabled="(v$.$invalid && isSMTPEnabled) || uiFlags.isUpdatingSMTP"
+        />
+      </form>
+    </settings-section>
+  </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 b03915713..a41575743 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/WidgetBuilder.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/WidgetBuilder.vue
@@ -1,157 +1,3 @@
-<template>
-  <div class="mx-8">
-    <div class="widget-builder-container">
-      <div class="settings-container w-100 lg:w-[40%]">
-        <div class="settings-content">
-          <form @submit.prevent="updateWidget">
-            <woot-avatar-uploader
-              :label="
-                $t('INBOX_MGMT.WIDGET_BUILDER.WIDGET_OPTIONS.AVATAR.LABEL')
-              "
-              :src="avatarUrl"
-              delete-avatar
-              @change="handleImageUpload"
-              @onAvatarDelete="handleAvatarDelete"
-            />
-            <woot-input
-              v-model.trim="websiteName"
-              :class="{ error: v$.websiteName.$error }"
-              :label="
-                $t(
-                  'INBOX_MGMT.WIDGET_BUILDER.WIDGET_OPTIONS.WEBSITE_NAME.LABEL'
-                )
-              "
-              :placeholder="
-                $t(
-                  'INBOX_MGMT.WIDGET_BUILDER.WIDGET_OPTIONS.WEBSITE_NAME.PLACE_HOLDER'
-                )
-              "
-              :error="websiteNameValidationErrorMsg"
-              @blur="v$.websiteName.$touch"
-            />
-            <woot-input
-              v-model.trim="welcomeHeading"
-              :label="
-                $t(
-                  'INBOX_MGMT.WIDGET_BUILDER.WIDGET_OPTIONS.WELCOME_HEADING.LABEL'
-                )
-              "
-              :placeholder="
-                $t(
-                  'INBOX_MGMT.WIDGET_BUILDER.WIDGET_OPTIONS.WELCOME_HEADING.PLACE_HOLDER'
-                )
-              "
-            />
-            <woot-input
-              v-model.trim="welcomeTagline"
-              :label="
-                $t(
-                  'INBOX_MGMT.WIDGET_BUILDER.WIDGET_OPTIONS.WELCOME_TAGLINE.LABEL'
-                )
-              "
-              :placeholder="
-                $t(
-                  'INBOX_MGMT.WIDGET_BUILDER.WIDGET_OPTIONS.WELCOME_TAGLINE.PLACE_HOLDER'
-                )
-              "
-            />
-            <label>
-              {{
-                $t('INBOX_MGMT.WIDGET_BUILDER.WIDGET_OPTIONS.REPLY_TIME.LABEL')
-              }}
-              <select v-model="replyTime">
-                <option
-                  v-for="option in getReplyTimeOptions"
-                  :key="option.key"
-                  :value="option.value"
-                >
-                  {{ option.text }}
-                </option>
-              </select>
-            </label>
-            <label>
-              {{
-                $t(
-                  'INBOX_MGMT.WIDGET_BUILDER.WIDGET_OPTIONS.WIDGET_COLOR_LABEL'
-                )
-              }}
-              <woot-color-picker v-model="color" />
-            </label>
-            <input-radio-group
-              name="widget-bubble-position"
-              :label="
-                $t(
-                  'INBOX_MGMT.WIDGET_BUILDER.WIDGET_OPTIONS.WIDGET_BUBBLE_POSITION_LABEL'
-                )
-              "
-              :items="widgetBubblePositions"
-              :action="handleWidgetBubblePositionChange"
-            />
-            <input-radio-group
-              name="widget-bubble-type"
-              :label="
-                $t(
-                  'INBOX_MGMT.WIDGET_BUILDER.WIDGET_OPTIONS.WIDGET_BUBBLE_TYPE_LABEL'
-                )
-              "
-              :items="widgetBubbleTypes"
-              :action="handleWidgetBubbleTypeChange"
-            />
-            <woot-input
-              v-model.trim="widgetBubbleLauncherTitle"
-              :label="
-                $t(
-                  'INBOX_MGMT.WIDGET_BUILDER.WIDGET_OPTIONS.WIDGET_BUBBLE_LAUNCHER_TITLE.LABEL'
-                )
-              "
-              :placeholder="
-                $t(
-                  'INBOX_MGMT.WIDGET_BUILDER.WIDGET_OPTIONS.WIDGET_BUBBLE_LAUNCHER_TITLE.PLACE_HOLDER'
-                )
-              "
-            />
-            <woot-submit-button
-              class="submit-button"
-              :button-text="
-                $t(
-                  'INBOX_MGMT.WIDGET_BUILDER.WIDGET_OPTIONS.UPDATE.BUTTON_TEXT'
-                )
-              "
-              :loading="uiFlags.isUpdating"
-              :disabled="v$.$invalid || uiFlags.isUpdating"
-            />
-          </form>
-        </div>
-      </div>
-      <div class="widget-container w-100 lg:w-3/5">
-        <input-radio-group
-          name="widget-view-options"
-          :items="getWidgetViewOptions"
-          :action="handleWidgetViewChange"
-          :style="{ 'text-align': 'center' }"
-        />
-        <div v-if="isWidgetPreview" class="widget-preview">
-          <Widget
-            :welcome-heading="welcomeHeading"
-            :welcome-tagline="welcomeTagline"
-            :website-name="websiteName"
-            :logo="avatarUrl"
-            is-online
-            :reply-time="replyTime"
-            :color="color"
-            :widget-bubble-position="widgetBubblePosition"
-            :widget-bubble-launcher-title="widgetBubbleLauncherTitle"
-            :widget-bubble-type="widgetBubbleType"
-          />
-        </div>
-        <div v-else class="widget-script">
-          <woot-code :script="widgetScript" />
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
 <script>
 import { mapGetters } from 'vuex';
 import { useAlert } from 'dashboard/composables';
@@ -418,6 +264,160 @@ export default {
 };
 </script>
 
+<template>
+  <div class="mx-8">
+    <div class="widget-builder-container">
+      <div class="settings-container w-100 lg:w-[40%]">
+        <div class="settings-content">
+          <form @submit.prevent="updateWidget">
+            <woot-avatar-uploader
+              :label="
+                $t('INBOX_MGMT.WIDGET_BUILDER.WIDGET_OPTIONS.AVATAR.LABEL')
+              "
+              :src="avatarUrl"
+              delete-avatar
+              @change="handleImageUpload"
+              @onAvatarDelete="handleAvatarDelete"
+            />
+            <woot-input
+              v-model.trim="websiteName"
+              :class="{ error: v$.websiteName.$error }"
+              :label="
+                $t(
+                  'INBOX_MGMT.WIDGET_BUILDER.WIDGET_OPTIONS.WEBSITE_NAME.LABEL'
+                )
+              "
+              :placeholder="
+                $t(
+                  'INBOX_MGMT.WIDGET_BUILDER.WIDGET_OPTIONS.WEBSITE_NAME.PLACE_HOLDER'
+                )
+              "
+              :error="websiteNameValidationErrorMsg"
+              @blur="v$.websiteName.$touch"
+            />
+            <woot-input
+              v-model.trim="welcomeHeading"
+              :label="
+                $t(
+                  'INBOX_MGMT.WIDGET_BUILDER.WIDGET_OPTIONS.WELCOME_HEADING.LABEL'
+                )
+              "
+              :placeholder="
+                $t(
+                  'INBOX_MGMT.WIDGET_BUILDER.WIDGET_OPTIONS.WELCOME_HEADING.PLACE_HOLDER'
+                )
+              "
+            />
+            <woot-input
+              v-model.trim="welcomeTagline"
+              :label="
+                $t(
+                  'INBOX_MGMT.WIDGET_BUILDER.WIDGET_OPTIONS.WELCOME_TAGLINE.LABEL'
+                )
+              "
+              :placeholder="
+                $t(
+                  'INBOX_MGMT.WIDGET_BUILDER.WIDGET_OPTIONS.WELCOME_TAGLINE.PLACE_HOLDER'
+                )
+              "
+            />
+            <label>
+              {{
+                $t('INBOX_MGMT.WIDGET_BUILDER.WIDGET_OPTIONS.REPLY_TIME.LABEL')
+              }}
+              <select v-model="replyTime">
+                <option
+                  v-for="option in getReplyTimeOptions"
+                  :key="option.key"
+                  :value="option.value"
+                >
+                  {{ option.text }}
+                </option>
+              </select>
+            </label>
+            <label>
+              {{
+                $t(
+                  'INBOX_MGMT.WIDGET_BUILDER.WIDGET_OPTIONS.WIDGET_COLOR_LABEL'
+                )
+              }}
+              <woot-color-picker v-model="color" />
+            </label>
+            <input-radio-group
+              name="widget-bubble-position"
+              :label="
+                $t(
+                  'INBOX_MGMT.WIDGET_BUILDER.WIDGET_OPTIONS.WIDGET_BUBBLE_POSITION_LABEL'
+                )
+              "
+              :items="widgetBubblePositions"
+              :action="handleWidgetBubblePositionChange"
+            />
+            <input-radio-group
+              name="widget-bubble-type"
+              :label="
+                $t(
+                  'INBOX_MGMT.WIDGET_BUILDER.WIDGET_OPTIONS.WIDGET_BUBBLE_TYPE_LABEL'
+                )
+              "
+              :items="widgetBubbleTypes"
+              :action="handleWidgetBubbleTypeChange"
+            />
+            <woot-input
+              v-model.trim="widgetBubbleLauncherTitle"
+              :label="
+                $t(
+                  'INBOX_MGMT.WIDGET_BUILDER.WIDGET_OPTIONS.WIDGET_BUBBLE_LAUNCHER_TITLE.LABEL'
+                )
+              "
+              :placeholder="
+                $t(
+                  'INBOX_MGMT.WIDGET_BUILDER.WIDGET_OPTIONS.WIDGET_BUBBLE_LAUNCHER_TITLE.PLACE_HOLDER'
+                )
+              "
+            />
+            <woot-submit-button
+              class="submit-button"
+              :button-text="
+                $t(
+                  'INBOX_MGMT.WIDGET_BUILDER.WIDGET_OPTIONS.UPDATE.BUTTON_TEXT'
+                )
+              "
+              :loading="uiFlags.isUpdating"
+              :disabled="v$.$invalid || uiFlags.isUpdating"
+            />
+          </form>
+        </div>
+      </div>
+      <div class="widget-container w-100 lg:w-3/5">
+        <input-radio-group
+          name="widget-view-options"
+          :items="getWidgetViewOptions"
+          :action="handleWidgetViewChange"
+          :style="{ 'text-align': 'center' }"
+        />
+        <div v-if="isWidgetPreview" class="widget-preview">
+          <Widget
+            :welcome-heading="welcomeHeading"
+            :welcome-tagline="welcomeTagline"
+            :website-name="websiteName"
+            :logo="avatarUrl"
+            is-online
+            :reply-time="replyTime"
+            :color="color"
+            :widget-bubble-position="widgetBubblePosition"
+            :widget-bubble-launcher-title="widgetBubbleLauncherTitle"
+            :widget-bubble-type="widgetBubbleType"
+          />
+        </div>
+        <div v-else class="widget-script">
+          <woot-code :script="widgetScript" />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
 <style lang="scss" scoped>
 @import '~dashboard/assets/scss/woot';
 
diff --git a/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/360DialogWhatsapp.vue b/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/360DialogWhatsapp.vue
index 328e6da48..08279c1cc 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/360DialogWhatsapp.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/360DialogWhatsapp.vue
@@ -1,61 +1,3 @@
-<template>
-  <form class="flex flex-wrap mx-0" @submit.prevent="createChannel()">
-    <div class="w-[65%] flex-shrink-0 flex-grow-0 max-w-[65%]">
-      <label :class="{ error: v$.inboxName.$error }">
-        {{ $t('INBOX_MGMT.ADD.WHATSAPP.INBOX_NAME.LABEL') }}
-        <input
-          v-model.trim="inboxName"
-          type="text"
-          :placeholder="$t('INBOX_MGMT.ADD.WHATSAPP.INBOX_NAME.PLACEHOLDER')"
-          @blur="v$.inboxName.$touch"
-        />
-        <span v-if="v$.inboxName.$error" class="message">
-          {{ $t('INBOX_MGMT.ADD.WHATSAPP.INBOX_NAME.ERROR') }}
-        </span>
-      </label>
-    </div>
-
-    <div class="w-[65%] flex-shrink-0 flex-grow-0 max-w-[65%]">
-      <label :class="{ error: v$.phoneNumber.$error }">
-        {{ $t('INBOX_MGMT.ADD.WHATSAPP.PHONE_NUMBER.LABEL') }}
-        <input
-          v-model.trim="phoneNumber"
-          type="text"
-          :placeholder="$t('INBOX_MGMT.ADD.WHATSAPP.PHONE_NUMBER.PLACEHOLDER')"
-          @blur="v$.phoneNumber.$touch"
-        />
-        <span v-if="v$.phoneNumber.$error" class="message">
-          {{ $t('INBOX_MGMT.ADD.WHATSAPP.PHONE_NUMBER.ERROR') }}
-        </span>
-      </label>
-    </div>
-
-    <div class="w-[65%] flex-shrink-0 flex-grow-0 max-w-[65%]">
-      <label :class="{ error: v$.apiKey.$error }">
-        <span>
-          {{ $t('INBOX_MGMT.ADD.WHATSAPP.API_KEY.LABEL') }}
-        </span>
-        <input
-          v-model.trim="apiKey"
-          type="text"
-          :placeholder="$t('INBOX_MGMT.ADD.WHATSAPP.API_KEY.PLACEHOLDER')"
-          @blur="v$.apiKey.$touch"
-        />
-        <span v-if="v$.apiKey.$error" class="message">
-          {{ $t('INBOX_MGMT.ADD.WHATSAPP.API_KEY.ERROR') }}
-        </span>
-      </label>
-    </div>
-
-    <div class="w-full">
-      <woot-submit-button
-        :loading="uiFlags.isCreating"
-        :button-text="$t('INBOX_MGMT.ADD.WHATSAPP.SUBMIT_BUTTON')"
-      />
-    </div>
-  </form>
-</template>
-
 <script>
 import { mapGetters } from 'vuex';
 import { useVuelidate } from '@vuelidate/core';
@@ -122,3 +64,61 @@ export default {
   },
 };
 </script>
+
+<template>
+  <form class="flex flex-wrap mx-0" @submit.prevent="createChannel()">
+    <div class="w-[65%] flex-shrink-0 flex-grow-0 max-w-[65%]">
+      <label :class="{ error: v$.inboxName.$error }">
+        {{ $t('INBOX_MGMT.ADD.WHATSAPP.INBOX_NAME.LABEL') }}
+        <input
+          v-model.trim="inboxName"
+          type="text"
+          :placeholder="$t('INBOX_MGMT.ADD.WHATSAPP.INBOX_NAME.PLACEHOLDER')"
+          @blur="v$.inboxName.$touch"
+        />
+        <span v-if="v$.inboxName.$error" class="message">
+          {{ $t('INBOX_MGMT.ADD.WHATSAPP.INBOX_NAME.ERROR') }}
+        </span>
+      </label>
+    </div>
+
+    <div class="w-[65%] flex-shrink-0 flex-grow-0 max-w-[65%]">
+      <label :class="{ error: v$.phoneNumber.$error }">
+        {{ $t('INBOX_MGMT.ADD.WHATSAPP.PHONE_NUMBER.LABEL') }}
+        <input
+          v-model.trim="phoneNumber"
+          type="text"
+          :placeholder="$t('INBOX_MGMT.ADD.WHATSAPP.PHONE_NUMBER.PLACEHOLDER')"
+          @blur="v$.phoneNumber.$touch"
+        />
+        <span v-if="v$.phoneNumber.$error" class="message">
+          {{ $t('INBOX_MGMT.ADD.WHATSAPP.PHONE_NUMBER.ERROR') }}
+        </span>
+      </label>
+    </div>
+
+    <div class="w-[65%] flex-shrink-0 flex-grow-0 max-w-[65%]">
+      <label :class="{ error: v$.apiKey.$error }">
+        <span>
+          {{ $t('INBOX_MGMT.ADD.WHATSAPP.API_KEY.LABEL') }}
+        </span>
+        <input
+          v-model.trim="apiKey"
+          type="text"
+          :placeholder="$t('INBOX_MGMT.ADD.WHATSAPP.API_KEY.PLACEHOLDER')"
+          @blur="v$.apiKey.$touch"
+        />
+        <span v-if="v$.apiKey.$error" class="message">
+          {{ $t('INBOX_MGMT.ADD.WHATSAPP.API_KEY.ERROR') }}
+        </span>
+      </label>
+    </div>
+
+    <div class="w-full">
+      <woot-submit-button
+        :loading="uiFlags.isCreating"
+        :button-text="$t('INBOX_MGMT.ADD.WHATSAPP.SUBMIT_BUTTON')"
+      />
+    </div>
+  </form>
+</template>
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 fc7be2958..4099207e6 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Api.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Api.vue
@@ -1,56 +1,3 @@
-<template>
-  <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
-      :header-title="$t('INBOX_MGMT.ADD.API_CHANNEL.TITLE')"
-      :header-content="$t('INBOX_MGMT.ADD.API_CHANNEL.DESC')"
-    />
-    <form class="flex flex-wrap mx-0" @submit.prevent="createChannel()">
-      <div class="w-[65%] flex-shrink-0 flex-grow-0 max-w-[65%]">
-        <label :class="{ error: v$.channelName.$error }">
-          {{ $t('INBOX_MGMT.ADD.API_CHANNEL.CHANNEL_NAME.LABEL') }}
-          <input
-            v-model.trim="channelName"
-            type="text"
-            :placeholder="
-              $t('INBOX_MGMT.ADD.API_CHANNEL.CHANNEL_NAME.PLACEHOLDER')
-            "
-            @blur="v$.channelName.$touch"
-          />
-          <span v-if="v$.channelName.$error" class="message">{{
-            $t('INBOX_MGMT.ADD.API_CHANNEL.CHANNEL_NAME.ERROR')
-          }}</span>
-        </label>
-      </div>
-
-      <div class="w-[65%] flex-shrink-0 flex-grow-0 max-w-[65%]">
-        <label :class="{ error: v$.webhookUrl.$error }">
-          {{ $t('INBOX_MGMT.ADD.API_CHANNEL.WEBHOOK_URL.LABEL') }}
-          <input
-            v-model.trim="webhookUrl"
-            type="text"
-            :placeholder="
-              $t('INBOX_MGMT.ADD.API_CHANNEL.WEBHOOK_URL.PLACEHOLDER')
-            "
-            @blur="v$.webhookUrl.$touch"
-          />
-        </label>
-        <p class="help-text">
-          {{ $t('INBOX_MGMT.ADD.API_CHANNEL.WEBHOOK_URL.SUBTITLE') }}
-        </p>
-      </div>
-
-      <div class="w-full">
-        <woot-submit-button
-          :loading="uiFlags.isCreating"
-          :button-text="$t('INBOX_MGMT.ADD.API_CHANNEL.SUBMIT_BUTTON')"
-        />
-      </div>
-    </form>
-  </div>
-</template>
-
 <script>
 import { mapGetters } from 'vuex';
 import { useVuelidate } from '@vuelidate/core';
@@ -114,3 +61,56 @@ export default {
   },
 };
 </script>
+
+<template>
+  <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
+      :header-title="$t('INBOX_MGMT.ADD.API_CHANNEL.TITLE')"
+      :header-content="$t('INBOX_MGMT.ADD.API_CHANNEL.DESC')"
+    />
+    <form class="flex flex-wrap mx-0" @submit.prevent="createChannel()">
+      <div class="w-[65%] flex-shrink-0 flex-grow-0 max-w-[65%]">
+        <label :class="{ error: v$.channelName.$error }">
+          {{ $t('INBOX_MGMT.ADD.API_CHANNEL.CHANNEL_NAME.LABEL') }}
+          <input
+            v-model.trim="channelName"
+            type="text"
+            :placeholder="
+              $t('INBOX_MGMT.ADD.API_CHANNEL.CHANNEL_NAME.PLACEHOLDER')
+            "
+            @blur="v$.channelName.$touch"
+          />
+          <span v-if="v$.channelName.$error" class="message">{{
+            $t('INBOX_MGMT.ADD.API_CHANNEL.CHANNEL_NAME.ERROR')
+          }}</span>
+        </label>
+      </div>
+
+      <div class="w-[65%] flex-shrink-0 flex-grow-0 max-w-[65%]">
+        <label :class="{ error: v$.webhookUrl.$error }">
+          {{ $t('INBOX_MGMT.ADD.API_CHANNEL.WEBHOOK_URL.LABEL') }}
+          <input
+            v-model.trim="webhookUrl"
+            type="text"
+            :placeholder="
+              $t('INBOX_MGMT.ADD.API_CHANNEL.WEBHOOK_URL.PLACEHOLDER')
+            "
+            @blur="v$.webhookUrl.$touch"
+          />
+        </label>
+        <p class="help-text">
+          {{ $t('INBOX_MGMT.ADD.API_CHANNEL.WEBHOOK_URL.SUBTITLE') }}
+        </p>
+      </div>
+
+      <div class="w-full">
+        <woot-submit-button
+          :loading="uiFlags.isCreating"
+          :button-text="$t('INBOX_MGMT.ADD.API_CHANNEL.SUBMIT_BUTTON')"
+        />
+      </div>
+    </form>
+  </div>
+</template>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/BandwidthSms.vue b/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/BandwidthSms.vue
index d1f519ce1..7847b3de5 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/BandwidthSms.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/BandwidthSms.vue
@@ -1,3 +1,77 @@
+<script>
+import { mapGetters } from 'vuex';
+import { useVuelidate } from '@vuelidate/core';
+import { useAlert } from 'dashboard/composables';
+import { required } from '@vuelidate/validators';
+import router from '../../../../index';
+
+const shouldStartWithPlusSign = (value = '') => value.startsWith('+');
+
+export default {
+  setup() {
+    return { v$: useVuelidate() };
+  },
+  data() {
+    return {
+      accountId: '',
+      apiKey: '',
+      apiSecret: '',
+      applicationId: '',
+      inboxName: '',
+      phoneNumber: '',
+    };
+  },
+  computed: {
+    ...mapGetters({
+      uiFlags: 'inboxes/getUIFlags',
+      globalConfig: 'globalConfig/get',
+    }),
+  },
+  validations: {
+    inboxName: { required },
+    phoneNumber: { required, shouldStartWithPlusSign },
+    apiKey: { required },
+    apiSecret: { required },
+    applicationId: { required },
+    accountId: { required },
+  },
+  methods: {
+    async createChannel() {
+      this.v$.$touch();
+      if (this.v$.$invalid) {
+        return;
+      }
+
+      try {
+        const smsChannel = await this.$store.dispatch('inboxes/createChannel', {
+          name: this.inboxName,
+          channel: {
+            type: 'sms',
+            phone_number: this.phoneNumber,
+            provider_config: {
+              api_key: this.apiKey,
+              api_secret: this.apiSecret,
+              application_id: this.applicationId,
+              account_id: this.accountId,
+            },
+          },
+        });
+
+        router.replace({
+          name: 'settings_inboxes_add_agents',
+          params: {
+            page: 'new',
+            inbox_id: smsChannel.id,
+          },
+        });
+      } catch (error) {
+        useAlert(this.$t('INBOX_MGMT.ADD.SMS.API.ERROR_MESSAGE'));
+      }
+    },
+  },
+};
+</script>
+
 <template>
   <form class="flex flex-wrap mx-0" @submit.prevent="createChannel()">
     <div class="w-[65%] flex-shrink-0 flex-grow-0 max-w-[65%]">
@@ -108,77 +182,3 @@
     </div>
   </form>
 </template>
-
-<script>
-import { mapGetters } from 'vuex';
-import { useVuelidate } from '@vuelidate/core';
-import { useAlert } from 'dashboard/composables';
-import { required } from '@vuelidate/validators';
-import router from '../../../../index';
-
-const shouldStartWithPlusSign = (value = '') => value.startsWith('+');
-
-export default {
-  setup() {
-    return { v$: useVuelidate() };
-  },
-  data() {
-    return {
-      accountId: '',
-      apiKey: '',
-      apiSecret: '',
-      applicationId: '',
-      inboxName: '',
-      phoneNumber: '',
-    };
-  },
-  computed: {
-    ...mapGetters({
-      uiFlags: 'inboxes/getUIFlags',
-      globalConfig: 'globalConfig/get',
-    }),
-  },
-  validations: {
-    inboxName: { required },
-    phoneNumber: { required, shouldStartWithPlusSign },
-    apiKey: { required },
-    apiSecret: { required },
-    applicationId: { required },
-    accountId: { required },
-  },
-  methods: {
-    async createChannel() {
-      this.v$.$touch();
-      if (this.v$.$invalid) {
-        return;
-      }
-
-      try {
-        const smsChannel = await this.$store.dispatch('inboxes/createChannel', {
-          name: this.inboxName,
-          channel: {
-            type: 'sms',
-            phone_number: this.phoneNumber,
-            provider_config: {
-              api_key: this.apiKey,
-              api_secret: this.apiSecret,
-              application_id: this.applicationId,
-              account_id: this.accountId,
-            },
-          },
-        });
-
-        router.replace({
-          name: 'settings_inboxes_add_agents',
-          params: {
-            page: 'new',
-            inbox_id: smsChannel.id,
-          },
-        });
-      } catch (error) {
-        useAlert(this.$t('INBOX_MGMT.ADD.SMS.API.ERROR_MESSAGE'));
-      }
-    },
-  },
-};
-</script>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/CloudWhatsapp.vue b/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/CloudWhatsapp.vue
index 44b8b5984..88eba6b4e 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/CloudWhatsapp.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/CloudWhatsapp.vue
@@ -1,3 +1,76 @@
+<script>
+import { mapGetters } from 'vuex';
+import { useVuelidate } from '@vuelidate/core';
+import { useAlert } from 'dashboard/composables';
+import { required } from '@vuelidate/validators';
+import router from '../../../../index';
+import { isPhoneE164OrEmpty, isNumber } from 'shared/helpers/Validators';
+
+export default {
+  setup() {
+    return { v$: useVuelidate() };
+  },
+  data() {
+    return {
+      inboxName: '',
+      phoneNumber: '',
+      apiKey: '',
+      phoneNumberId: '',
+      businessAccountId: '',
+    };
+  },
+  computed: {
+    ...mapGetters({ uiFlags: 'inboxes/getUIFlags' }),
+  },
+  validations: {
+    inboxName: { required },
+    phoneNumber: { required, isPhoneE164OrEmpty },
+    apiKey: { required },
+    phoneNumberId: { required, isNumber },
+    businessAccountId: { required, isNumber },
+  },
+  methods: {
+    async createChannel() {
+      this.v$.$touch();
+      if (this.v$.$invalid) {
+        return;
+      }
+
+      try {
+        const whatsappChannel = await this.$store.dispatch(
+          'inboxes/createChannel',
+          {
+            name: this.inboxName,
+            channel: {
+              type: 'whatsapp',
+              phone_number: this.phoneNumber,
+              provider: 'whatsapp_cloud',
+              provider_config: {
+                api_key: this.apiKey,
+                phone_number_id: this.phoneNumberId,
+                business_account_id: this.businessAccountId,
+              },
+            },
+          }
+        );
+
+        router.replace({
+          name: 'settings_inboxes_add_agents',
+          params: {
+            page: 'new',
+            inbox_id: whatsappChannel.id,
+          },
+        });
+      } catch (error) {
+        useAlert(
+          error.message || this.$t('INBOX_MGMT.ADD.WHATSAPP.API.ERROR_MESSAGE')
+        );
+      }
+    },
+  },
+};
+</script>
+
 <template>
   <form class="flex flex-wrap mx-0" @submit.prevent="createChannel()">
     <div class="w-[65%] flex-shrink-0 flex-grow-0 max-w-[65%]">
@@ -93,76 +166,3 @@
     </div>
   </form>
 </template>
-
-<script>
-import { mapGetters } from 'vuex';
-import { useVuelidate } from '@vuelidate/core';
-import { useAlert } from 'dashboard/composables';
-import { required } from '@vuelidate/validators';
-import router from '../../../../index';
-import { isPhoneE164OrEmpty, isNumber } from 'shared/helpers/Validators';
-
-export default {
-  setup() {
-    return { v$: useVuelidate() };
-  },
-  data() {
-    return {
-      inboxName: '',
-      phoneNumber: '',
-      apiKey: '',
-      phoneNumberId: '',
-      businessAccountId: '',
-    };
-  },
-  computed: {
-    ...mapGetters({ uiFlags: 'inboxes/getUIFlags' }),
-  },
-  validations: {
-    inboxName: { required },
-    phoneNumber: { required, isPhoneE164OrEmpty },
-    apiKey: { required },
-    phoneNumberId: { required, isNumber },
-    businessAccountId: { required, isNumber },
-  },
-  methods: {
-    async createChannel() {
-      this.v$.$touch();
-      if (this.v$.$invalid) {
-        return;
-      }
-
-      try {
-        const whatsappChannel = await this.$store.dispatch(
-          'inboxes/createChannel',
-          {
-            name: this.inboxName,
-            channel: {
-              type: 'whatsapp',
-              phone_number: this.phoneNumber,
-              provider: 'whatsapp_cloud',
-              provider_config: {
-                api_key: this.apiKey,
-                phone_number_id: this.phoneNumberId,
-                business_account_id: this.businessAccountId,
-              },
-            },
-          }
-        );
-
-        router.replace({
-          name: 'settings_inboxes_add_agents',
-          params: {
-            page: 'new',
-            inbox_id: whatsappChannel.id,
-          },
-        });
-      } catch (error) {
-        useAlert(
-          error.message || this.$t('INBOX_MGMT.ADD.WHATSAPP.API.ERROR_MESSAGE')
-        );
-      }
-    },
-  },
-};
-</script>
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 375e5aefb..58d7f1fa7 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Email.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Email.vue
@@ -1,28 +1,3 @@
-<template>
-  <div
-    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
-      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
-        v-for="emailProvider in emailProviderList"
-        :key="emailProvider.key"
-        :class="{ inactive: !emailProvider.isEnabled }"
-        :title="emailProvider.title"
-        :src="emailProvider.src"
-        @click="() => 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'" />
-</template>
 <script setup>
 import { ref, computed } from 'vue';
 import ForwardToOption from './emailChannels/ForwardToOption.vue';
@@ -76,3 +51,28 @@ function onClick(emailProvider) {
   }
 }
 </script>
+<template>
+  <div
+    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
+      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
+        v-for="emailProvider in emailProviderList"
+        :key="emailProvider.key"
+        :class="{ inactive: !emailProvider.isEnabled }"
+        :title="emailProvider.title"
+        :src="emailProvider.src"
+        @click="() => 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'" />
+</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 0bb4b5e10..4e4a4da4a 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Facebook.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Facebook.vue
@@ -1,96 +1,3 @@
-<template>
-  <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"
-  >
-    <div
-      v-if="!hasLoginStarted"
-      class="flex flex-col items-center justify-center h-full text-center"
-    >
-      <a href="#" @click="startLogin()">
-        <img
-          class="w-auto h-10"
-          src="~dashboard/assets/images/channels/facebook_login.png"
-          alt="Facebook-logo"
-        />
-      </a>
-      <p class="py-6">
-        {{
-          useInstallationName(
-            $t('INBOX_MGMT.ADD.FB.HELP'),
-            globalConfig.installationName
-          )
-        }}
-      </p>
-    </div>
-    <div v-else>
-      <div v-if="hasError" class="max-w-lg mx-auto text-center">
-        <h5>{{ errorStateMessage }}</h5>
-        <p
-          v-if="errorStateDescription"
-          v-dompurify-html="errorStateDescription"
-        />
-      </div>
-      <loading-state v-else-if="showLoader" :message="emptyStateMessage" />
-      <form
-        v-else
-        class="flex flex-wrap mx-0"
-        @submit.prevent="createChannel()"
-      >
-        <div class="w-full">
-          <page-header
-            :header-title="$t('INBOX_MGMT.ADD.DETAILS.TITLE')"
-            :header-content="
-              useInstallationName(
-                $t('INBOX_MGMT.ADD.DETAILS.DESC'),
-                globalConfig.installationName
-              )
-            "
-          />
-        </div>
-        <div class="w-3/5">
-          <div class="w-full">
-            <div class="input-wrap" :class="{ error: v$.selectedPage.$error }">
-              {{ $t('INBOX_MGMT.ADD.FB.CHOOSE_PAGE') }}
-              <multiselect
-                v-model.trim="selectedPage"
-                :close-on-select="true"
-                :allow-empty="true"
-                :options="getSelectablePages"
-                track-by="id"
-                label="name"
-                :select-label="$t('FORMS.MULTISELECT.ENTER_TO_SELECT')"
-                :deselect-label="$t('FORMS.MULTISELECT.ENTER_TO_REMOVE')"
-                :placeholder="$t('INBOX_MGMT.ADD.FB.PICK_A_VALUE')"
-                selected-label
-                @select="setPageName"
-              />
-              <span v-if="v$.selectedPage.$error" class="message">
-                {{ $t('INBOX_MGMT.ADD.FB.CHOOSE_PLACEHOLDER') }}
-              </span>
-            </div>
-          </div>
-          <div class="w-full">
-            <label :class="{ error: v$.pageName.$error }">
-              {{ $t('INBOX_MGMT.ADD.FB.INBOX_NAME') }}
-              <input
-                v-model.trim="pageName"
-                type="text"
-                :placeholder="$t('INBOX_MGMT.ADD.FB.PICK_NAME')"
-                @input="v$.pageName.$touch"
-              />
-              <span v-if="v$.pageName.$error" class="message">
-                {{ $t('INBOX_MGMT.ADD.FB.ADD_NAME') }}
-              </span>
-            </label>
-          </div>
-          <div class="w-full text-right">
-            <input type="submit" value="Create Inbox" class="button" />
-          </div>
-        </div>
-      </form>
-    </div>
-  </div>
-</template>
 <script>
 /* eslint-env browser */
 /* global FB */
@@ -294,3 +201,96 @@ export default {
   },
 };
 </script>
+<template>
+  <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"
+  >
+    <div
+      v-if="!hasLoginStarted"
+      class="flex flex-col items-center justify-center h-full text-center"
+    >
+      <a href="#" @click="startLogin()">
+        <img
+          class="w-auto h-10"
+          src="~dashboard/assets/images/channels/facebook_login.png"
+          alt="Facebook-logo"
+        />
+      </a>
+      <p class="py-6">
+        {{
+          useInstallationName(
+            $t('INBOX_MGMT.ADD.FB.HELP'),
+            globalConfig.installationName
+          )
+        }}
+      </p>
+    </div>
+    <div v-else>
+      <div v-if="hasError" class="max-w-lg mx-auto text-center">
+        <h5>{{ errorStateMessage }}</h5>
+        <p
+          v-if="errorStateDescription"
+          v-dompurify-html="errorStateDescription"
+        />
+      </div>
+      <loading-state v-else-if="showLoader" :message="emptyStateMessage" />
+      <form
+        v-else
+        class="flex flex-wrap mx-0"
+        @submit.prevent="createChannel()"
+      >
+        <div class="w-full">
+          <page-header
+            :header-title="$t('INBOX_MGMT.ADD.DETAILS.TITLE')"
+            :header-content="
+              useInstallationName(
+                $t('INBOX_MGMT.ADD.DETAILS.DESC'),
+                globalConfig.installationName
+              )
+            "
+          />
+        </div>
+        <div class="w-3/5">
+          <div class="w-full">
+            <div class="input-wrap" :class="{ error: v$.selectedPage.$error }">
+              {{ $t('INBOX_MGMT.ADD.FB.CHOOSE_PAGE') }}
+              <multiselect
+                v-model.trim="selectedPage"
+                :close-on-select="true"
+                :allow-empty="true"
+                :options="getSelectablePages"
+                track-by="id"
+                label="name"
+                :select-label="$t('FORMS.MULTISELECT.ENTER_TO_SELECT')"
+                :deselect-label="$t('FORMS.MULTISELECT.ENTER_TO_REMOVE')"
+                :placeholder="$t('INBOX_MGMT.ADD.FB.PICK_A_VALUE')"
+                selected-label
+                @select="setPageName"
+              />
+              <span v-if="v$.selectedPage.$error" class="message">
+                {{ $t('INBOX_MGMT.ADD.FB.CHOOSE_PLACEHOLDER') }}
+              </span>
+            </div>
+          </div>
+          <div class="w-full">
+            <label :class="{ error: v$.pageName.$error }">
+              {{ $t('INBOX_MGMT.ADD.FB.INBOX_NAME') }}
+              <input
+                v-model.trim="pageName"
+                type="text"
+                :placeholder="$t('INBOX_MGMT.ADD.FB.PICK_NAME')"
+                @input="v$.pageName.$touch"
+              />
+              <span v-if="v$.pageName.$error" class="message">
+                {{ $t('INBOX_MGMT.ADD.FB.ADD_NAME') }}
+              </span>
+            </label>
+          </div>
+          <div class="w-full text-right">
+            <input type="submit" value="Create Inbox" class="button" />
+          </div>
+        </div>
+      </form>
+    </div>
+  </div>
+</template>
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 5ca52f839..650743203 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Line.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Line.vue
@@ -1,3 +1,73 @@
+<script>
+import { mapGetters } from 'vuex';
+import { useVuelidate } from '@vuelidate/core';
+import { useAlert } from 'dashboard/composables';
+import { required } from '@vuelidate/validators';
+import router from '../../../../index';
+import PageHeader from '../../SettingsSubPageHeader.vue';
+
+export default {
+  components: {
+    PageHeader,
+  },
+  setup() {
+    return { v$: useVuelidate() };
+  },
+  data() {
+    return {
+      channelName: '',
+      lineChannelId: '',
+      lineChannelSecret: '',
+      lineChannelToken: '',
+    };
+  },
+  computed: {
+    ...mapGetters({
+      uiFlags: 'inboxes/getUIFlags',
+    }),
+  },
+  validations: {
+    channelName: { required },
+    lineChannelId: { required },
+    lineChannelSecret: { required },
+    lineChannelToken: { required },
+  },
+  methods: {
+    async createChannel() {
+      this.v$.$touch();
+      if (this.v$.$invalid) {
+        return;
+      }
+
+      try {
+        const lineChannel = await this.$store.dispatch(
+          'inboxes/createChannel',
+          {
+            name: this.channelName,
+            channel: {
+              type: 'line',
+              line_channel_id: this.lineChannelId,
+              line_channel_secret: this.lineChannelSecret,
+              line_channel_token: this.lineChannelToken,
+            },
+          }
+        );
+
+        router.replace({
+          name: 'settings_inboxes_add_agents',
+          params: {
+            page: 'new',
+            inbox_id: lineChannel.id,
+          },
+        });
+      } catch (error) {
+        useAlert(this.$t('INBOX_MGMT.ADD.LINE_CHANNEL.API.ERROR_MESSAGE'));
+      }
+    },
+  },
+};
+</script>
+
 <template>
   <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"
@@ -75,73 +145,3 @@
     </form>
   </div>
 </template>
-
-<script>
-import { mapGetters } from 'vuex';
-import { useVuelidate } from '@vuelidate/core';
-import { useAlert } from 'dashboard/composables';
-import { required } from '@vuelidate/validators';
-import router from '../../../../index';
-import PageHeader from '../../SettingsSubPageHeader.vue';
-
-export default {
-  components: {
-    PageHeader,
-  },
-  setup() {
-    return { v$: useVuelidate() };
-  },
-  data() {
-    return {
-      channelName: '',
-      lineChannelId: '',
-      lineChannelSecret: '',
-      lineChannelToken: '',
-    };
-  },
-  computed: {
-    ...mapGetters({
-      uiFlags: 'inboxes/getUIFlags',
-    }),
-  },
-  validations: {
-    channelName: { required },
-    lineChannelId: { required },
-    lineChannelSecret: { required },
-    lineChannelToken: { required },
-  },
-  methods: {
-    async createChannel() {
-      this.v$.$touch();
-      if (this.v$.$invalid) {
-        return;
-      }
-
-      try {
-        const lineChannel = await this.$store.dispatch(
-          'inboxes/createChannel',
-          {
-            name: this.channelName,
-            channel: {
-              type: 'line',
-              line_channel_id: this.lineChannelId,
-              line_channel_secret: this.lineChannelSecret,
-              line_channel_token: this.lineChannelToken,
-            },
-          }
-        );
-
-        router.replace({
-          name: 'settings_inboxes_add_agents',
-          params: {
-            page: 'new',
-            inbox_id: lineChannel.id,
-          },
-        });
-      } catch (error) {
-        useAlert(this.$t('INBOX_MGMT.ADD.LINE_CHANNEL.API.ERROR_MESSAGE'));
-      }
-    },
-  },
-};
-</script>
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 81e271cbf..19165f7e8 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Sms.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Sms.vue
@@ -1,3 +1,22 @@
+<script>
+import PageHeader from '../../SettingsSubPageHeader.vue';
+import BandwidthSms from './BandwidthSms.vue';
+import Twilio from './Twilio.vue';
+
+export default {
+  components: {
+    PageHeader,
+    Twilio,
+    BandwidthSms,
+  },
+  data() {
+    return {
+      provider: 'twilio',
+    };
+  },
+};
+</script>
+
 <template>
   <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"
@@ -23,22 +42,3 @@
     <bandwidth-sms v-else />
   </div>
 </template>
-
-<script>
-import PageHeader from '../../SettingsSubPageHeader.vue';
-import BandwidthSms from './BandwidthSms.vue';
-import Twilio from './Twilio.vue';
-
-export default {
-  components: {
-    PageHeader,
-    Twilio,
-    BandwidthSms,
-  },
-  data() {
-    return {
-      provider: 'twilio',
-    };
-  },
-};
-</script>
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 72c8ee853..a3905efbe 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Telegram.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Telegram.vue
@@ -1,39 +1,3 @@
-<template>
-  <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
-      :header-title="$t('INBOX_MGMT.ADD.TELEGRAM_CHANNEL.TITLE')"
-      :header-content="$t('INBOX_MGMT.ADD.TELEGRAM_CHANNEL.DESC')"
-    />
-    <form class="flex flex-wrap mx-0" @submit.prevent="createChannel()">
-      <div class="w-[65%] flex-shrink-0 flex-grow-0 max-w-[65%]">
-        <label :class="{ error: v$.botToken.$error }">
-          {{ $t('INBOX_MGMT.ADD.TELEGRAM_CHANNEL.BOT_TOKEN.LABEL') }}
-          <input
-            v-model.trim="botToken"
-            type="text"
-            :placeholder="
-              $t('INBOX_MGMT.ADD.TELEGRAM_CHANNEL.BOT_TOKEN.PLACEHOLDER')
-            "
-            @blur="v$.botToken.$touch"
-          />
-        </label>
-        <p class="help-text">
-          {{ $t('INBOX_MGMT.ADD.TELEGRAM_CHANNEL.BOT_TOKEN.SUBTITLE') }}
-        </p>
-      </div>
-
-      <div class="w-full">
-        <woot-submit-button
-          :loading="uiFlags.isCreating"
-          :button-text="$t('INBOX_MGMT.ADD.TELEGRAM_CHANNEL.SUBMIT_BUTTON')"
-        />
-      </div>
-    </form>
-  </div>
-</template>
-
 <script>
 import { mapGetters } from 'vuex';
 import { useVuelidate } from '@vuelidate/core';
@@ -97,3 +61,39 @@ export default {
   },
 };
 </script>
+
+<template>
+  <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
+      :header-title="$t('INBOX_MGMT.ADD.TELEGRAM_CHANNEL.TITLE')"
+      :header-content="$t('INBOX_MGMT.ADD.TELEGRAM_CHANNEL.DESC')"
+    />
+    <form class="flex flex-wrap mx-0" @submit.prevent="createChannel()">
+      <div class="w-[65%] flex-shrink-0 flex-grow-0 max-w-[65%]">
+        <label :class="{ error: v$.botToken.$error }">
+          {{ $t('INBOX_MGMT.ADD.TELEGRAM_CHANNEL.BOT_TOKEN.LABEL') }}
+          <input
+            v-model.trim="botToken"
+            type="text"
+            :placeholder="
+              $t('INBOX_MGMT.ADD.TELEGRAM_CHANNEL.BOT_TOKEN.PLACEHOLDER')
+            "
+            @blur="v$.botToken.$touch"
+          />
+        </label>
+        <p class="help-text">
+          {{ $t('INBOX_MGMT.ADD.TELEGRAM_CHANNEL.BOT_TOKEN.SUBTITLE') }}
+        </p>
+      </div>
+
+      <div class="w-full">
+        <woot-submit-button
+          :loading="uiFlags.isCreating"
+          :button-text="$t('INBOX_MGMT.ADD.TELEGRAM_CHANNEL.SUBMIT_BUTTON')"
+        />
+      </div>
+    </form>
+  </div>
+</template>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Twilio.vue b/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Twilio.vue
index 1b0bd4186..5f7ebd182 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Twilio.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Twilio.vue
@@ -1,4 +1,113 @@
 <!-- Deprecated in favour of separate files for SMS and Whatsapp and also to implement new providers for each platform in the future-->
+<script>
+import { mapGetters } from 'vuex';
+import { useVuelidate } from '@vuelidate/core';
+import { useAlert } from 'dashboard/composables';
+import { required } from '@vuelidate/validators';
+import router from '../../../../index';
+import { isPhoneE164OrEmpty } from 'shared/helpers/Validators';
+
+export default {
+  props: {
+    type: {
+      type: String,
+      required: true,
+    },
+  },
+  setup() {
+    return { v$: useVuelidate() };
+  },
+  data() {
+    return {
+      accountSID: '',
+      apiKeySID: '',
+      authToken: '',
+      medium: this.type,
+      channelName: '',
+      messagingServiceSID: '',
+      useMessagingService: false,
+      useAPIKey: false,
+      phoneNumber: '',
+    };
+  },
+  computed: {
+    ...mapGetters({
+      uiFlags: 'inboxes/getUIFlags',
+    }),
+    authTokeni18nKey() {
+      return this.useAPIKey ? 'API_KEY_SECRET' : 'AUTH_TOKEN';
+    },
+  },
+  validations() {
+    let validations = {
+      channelName: { required },
+
+      authToken: { required },
+      accountSID: { required },
+      medium: { required },
+    };
+    if (this.phoneNumber) {
+      validations = {
+        ...validations,
+        phoneNumber: { required, isPhoneE164OrEmpty },
+        messagingServiceSID: {},
+      };
+    } else {
+      validations = {
+        ...validations,
+        messagingServiceSID: { required },
+        phoneNumber: {},
+      };
+    }
+
+    if (this.useAPIKey) {
+      validations = {
+        ...validations,
+        apiKeySID: { required },
+      };
+    }
+    return validations;
+  },
+  methods: {
+    async createChannel() {
+      this.v$.$touch();
+      if (this.v$.$invalid) {
+        return;
+      }
+
+      try {
+        const twilioChannel = await this.$store.dispatch(
+          'inboxes/createTwilioChannel',
+          {
+            twilio_channel: {
+              name: this.channelName,
+              medium: this.medium,
+              account_sid: this.accountSID,
+              api_key_sid: this.apiKeySID,
+              auth_token: this.authToken,
+              messaging_service_sid: this.messagingServiceSID,
+              phone_number: this.messagingServiceSID
+                ? null
+                : `+${this.phoneNumber.replace(/\D/g, '')}`,
+            },
+          }
+        );
+
+        router.replace({
+          name: 'settings_inboxes_add_agents',
+          params: {
+            page: 'new',
+            inbox_id: twilioChannel.id,
+          },
+        });
+      } catch (error) {
+        useAlert(this.$t('INBOX_MGMT.ADD.TWILIO.API.ERROR_MESSAGE'));
+      }
+    },
+  },
+};
+</script>
+
 <template>
   <form class="flex flex-wrap mx-0" @submit.prevent="createChannel()">
     <div class="w-[65%] flex-shrink-0 flex-grow-0 max-w-[65%]">
@@ -134,115 +243,6 @@
     </div>
   </form>
 </template>
-
-<script>
-import { mapGetters } from 'vuex';
-import { useVuelidate } from '@vuelidate/core';
-import { useAlert } from 'dashboard/composables';
-import { required } from '@vuelidate/validators';
-import router from '../../../../index';
-import { isPhoneE164OrEmpty } from 'shared/helpers/Validators';
-
-export default {
-  props: {
-    type: {
-      type: String,
-      required: true,
-    },
-  },
-  setup() {
-    return { v$: useVuelidate() };
-  },
-  data() {
-    return {
-      accountSID: '',
-      apiKeySID: '',
-      authToken: '',
-      medium: this.type,
-      channelName: '',
-      messagingServiceSID: '',
-      useMessagingService: false,
-      useAPIKey: false,
-      phoneNumber: '',
-    };
-  },
-  computed: {
-    ...mapGetters({
-      uiFlags: 'inboxes/getUIFlags',
-    }),
-    authTokeni18nKey() {
-      return this.useAPIKey ? 'API_KEY_SECRET' : 'AUTH_TOKEN';
-    },
-  },
-  validations() {
-    let validations = {
-      channelName: { required },
-
-      authToken: { required },
-      accountSID: { required },
-      medium: { required },
-    };
-    if (this.phoneNumber) {
-      validations = {
-        ...validations,
-        phoneNumber: { required, isPhoneE164OrEmpty },
-        messagingServiceSID: {},
-      };
-    } else {
-      validations = {
-        ...validations,
-        messagingServiceSID: { required },
-        phoneNumber: {},
-      };
-    }
-
-    if (this.useAPIKey) {
-      validations = {
-        ...validations,
-        apiKeySID: { required },
-      };
-    }
-    return validations;
-  },
-  methods: {
-    async createChannel() {
-      this.v$.$touch();
-      if (this.v$.$invalid) {
-        return;
-      }
-
-      try {
-        const twilioChannel = await this.$store.dispatch(
-          'inboxes/createTwilioChannel',
-          {
-            twilio_channel: {
-              name: this.channelName,
-              medium: this.medium,
-              account_sid: this.accountSID,
-              api_key_sid: this.apiKeySID,
-              auth_token: this.authToken,
-              messaging_service_sid: this.messagingServiceSID,
-              phone_number: this.messagingServiceSID
-                ? null
-                : `+${this.phoneNumber.replace(/\D/g, '')}`,
-            },
-          }
-        );
-
-        router.replace({
-          name: 'settings_inboxes_add_agents',
-          params: {
-            page: 'new',
-            inbox_id: twilioChannel.id,
-          },
-        });
-      } catch (error) {
-        useAlert(this.$t('INBOX_MGMT.ADD.TWILIO.API.ERROR_MESSAGE'));
-      }
-    },
-  },
-};
-</script>
 <style lang="scss" scoped>
 .messagingServiceHelptext {
   margin-top: -10px;
diff --git a/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Twitter.vue b/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Twitter.vue
index 01b8f0fa7..3fcb36c5b 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Twitter.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Twitter.vue
@@ -1,20 +1,3 @@
-<template>
-  <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"
-  >
-    <div class="login-init h-full text-center">
-      <form @submit.prevent="requestAuthorization">
-        <woot-submit-button
-          icon="brand-twitter"
-          button-text="Sign in with Twitter"
-          type="submit"
-          :loading="isRequestingAuthorization"
-        />
-      </form>
-      <p>{{ $t('INBOX_MGMT.ADD.TWITTER.HELP') }}</p>
-    </div>
-  </div>
-</template>
 <script>
 import { useAlert } from 'dashboard/composables';
 import twitterClient from '../../../../../api/channel/twitterClient';
@@ -41,6 +24,23 @@ export default {
   },
 };
 </script>
+<template>
+  <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"
+  >
+    <div class="login-init h-full text-center">
+      <form @submit.prevent="requestAuthorization">
+        <woot-submit-button
+          icon="brand-twitter"
+          button-text="Sign in with Twitter"
+          type="submit"
+          :loading="isRequestingAuthorization"
+        />
+      </form>
+      <p>{{ $t('INBOX_MGMT.ADD.TWITTER.HELP') }}</p>
+    </div>
+  </div>
+</template>
 <style scoped lang="scss">
 .login-init {
   @apply pt-[30%] text-center;
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 dea9cfcb3..f81fb1b01 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Website.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Website.vue
@@ -1,3 +1,76 @@
+<script>
+import { mapGetters } from 'vuex';
+import { useAlert } from 'dashboard/composables';
+import router from '../../../../index';
+import PageHeader from '../../SettingsSubPageHeader.vue';
+import GreetingsEditor from 'shared/components/GreetingsEditor.vue';
+
+export default {
+  components: {
+    PageHeader,
+    GreetingsEditor,
+  },
+  data() {
+    return {
+      inboxName: '',
+      channelWebsiteUrl: '',
+      channelWidgetColor: '#009CE0',
+      channelWelcomeTitle: '',
+      channelWelcomeTagline: '',
+      greetingEnabled: false,
+      greetingMessage: '',
+    };
+  },
+  computed: {
+    ...mapGetters({
+      uiFlags: 'inboxes/getUIFlags',
+    }),
+    textAreaChannels() {
+      if (
+        this.isATwilioChannel ||
+        this.isATwitterInbox ||
+        this.isAFacebookInbox
+      )
+        return true;
+      return false;
+    },
+  },
+  methods: {
+    async createChannel() {
+      try {
+        const website = await this.$store.dispatch(
+          'inboxes/createWebsiteChannel',
+          {
+            name: this.inboxName,
+            greeting_enabled: this.greetingEnabled,
+            greeting_message: this.greetingMessage,
+            channel: {
+              type: 'web_widget',
+              website_url: this.channelWebsiteUrl,
+              widget_color: this.channelWidgetColor,
+              welcome_title: this.channelWelcomeTitle,
+              welcome_tagline: this.channelWelcomeTagline,
+            },
+          }
+        );
+        router.replace({
+          name: 'settings_inboxes_add_agents',
+          params: {
+            page: 'new',
+            inbox_id: website.id,
+          },
+        });
+      } catch (error) {
+        useAlert(
+          error.message ||
+            this.$t('INBOX_MGMT.ADD.WEBSITE_CHANNEL.API.ERROR_MESSAGE')
+        );
+      }
+    },
+  },
+};
+</script>
+
 <template>
   <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"
@@ -127,76 +200,3 @@
     </form>
   </div>
 </template>
-
-<script>
-import { mapGetters } from 'vuex';
-import { useAlert } from 'dashboard/composables';
-import router from '../../../../index';
-import PageHeader from '../../SettingsSubPageHeader.vue';
-import GreetingsEditor from 'shared/components/GreetingsEditor.vue';
-
-export default {
-  components: {
-    PageHeader,
-    GreetingsEditor,
-  },
-  data() {
-    return {
-      inboxName: '',
-      channelWebsiteUrl: '',
-      channelWidgetColor: '#009CE0',
-      channelWelcomeTitle: '',
-      channelWelcomeTagline: '',
-      greetingEnabled: false,
-      greetingMessage: '',
-    };
-  },
-  computed: {
-    ...mapGetters({
-      uiFlags: 'inboxes/getUIFlags',
-    }),
-    textAreaChannels() {
-      if (
-        this.isATwilioChannel ||
-        this.isATwitterInbox ||
-        this.isAFacebookInbox
-      )
-        return true;
-      return false;
-    },
-  },
-  methods: {
-    async createChannel() {
-      try {
-        const website = await this.$store.dispatch(
-          'inboxes/createWebsiteChannel',
-          {
-            name: this.inboxName,
-            greeting_enabled: this.greetingEnabled,
-            greeting_message: this.greetingMessage,
-            channel: {
-              type: 'web_widget',
-              website_url: this.channelWebsiteUrl,
-              widget_color: this.channelWidgetColor,
-              welcome_title: this.channelWelcomeTitle,
-              welcome_tagline: this.channelWelcomeTagline,
-            },
-          }
-        );
-        router.replace({
-          name: 'settings_inboxes_add_agents',
-          params: {
-            page: 'new',
-            inbox_id: website.id,
-          },
-        });
-      } catch (error) {
-        useAlert(
-          error.message ||
-            this.$t('INBOX_MGMT.ADD.WEBSITE_CHANNEL.API.ERROR_MESSAGE')
-        );
-      }
-    },
-  },
-};
-</script>
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 8206e4651..4d652fbc0 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Whatsapp.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Whatsapp.vue
@@ -1,3 +1,24 @@
+<script>
+import PageHeader from '../../SettingsSubPageHeader.vue';
+import Twilio from './Twilio.vue';
+import ThreeSixtyDialogWhatsapp from './360DialogWhatsapp.vue';
+import CloudWhatsapp from './CloudWhatsapp.vue';
+
+export default {
+  components: {
+    PageHeader,
+    Twilio,
+    ThreeSixtyDialogWhatsapp,
+    CloudWhatsapp,
+  },
+  data() {
+    return {
+      provider: 'whatsapp_cloud',
+    };
+  },
+};
+</script>
+
 <template>
   <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"
@@ -25,24 +46,3 @@
     <cloud-whatsapp v-else />
   </div>
 </template>
-
-<script>
-import PageHeader from '../../SettingsSubPageHeader.vue';
-import Twilio from './Twilio.vue';
-import ThreeSixtyDialogWhatsapp from './360DialogWhatsapp.vue';
-import CloudWhatsapp from './CloudWhatsapp.vue';
-
-export default {
-  components: {
-    PageHeader,
-    Twilio,
-    ThreeSixtyDialogWhatsapp,
-    CloudWhatsapp,
-  },
-  data() {
-    return {
-      provider: 'whatsapp_cloud',
-    };
-  },
-};
-</script>
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 196c0e86f..a32788908 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
@@ -1,54 +1,3 @@
-<template>
-  <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
-      :header-title="$t('INBOX_MGMT.ADD.EMAIL_CHANNEL.TITLE')"
-      :header-content="$t('INBOX_MGMT.ADD.EMAIL_CHANNEL.DESC')"
-    />
-    <form class="flex flex-wrap mx-0" @submit.prevent="createChannel()">
-      <div class="w-[65%] flex-shrink-0 flex-grow-0 max-w-[65%]">
-        <label :class="{ error: v$.channelName.$error }">
-          {{ $t('INBOX_MGMT.ADD.EMAIL_CHANNEL.CHANNEL_NAME.LABEL') }}
-          <input
-            v-model.trim="channelName"
-            type="text"
-            :placeholder="
-              $t('INBOX_MGMT.ADD.EMAIL_CHANNEL.CHANNEL_NAME.PLACEHOLDER')
-            "
-            @blur="v$.channelName.$touch"
-          />
-          <span v-if="v$.channelName.$error" class="message">{{
-            $t('INBOX_MGMT.ADD.EMAIL_CHANNEL.CHANNEL_NAME.ERROR')
-          }}</span>
-        </label>
-      </div>
-
-      <div class="w-[65%] flex-shrink-0 flex-grow-0 max-w-[65%]">
-        <label :class="{ error: v$.email.$error }">
-          {{ $t('INBOX_MGMT.ADD.EMAIL_CHANNEL.EMAIL.LABEL') }}
-          <input
-            v-model.trim="email"
-            type="text"
-            :placeholder="$t('INBOX_MGMT.ADD.EMAIL_CHANNEL.EMAIL.PLACEHOLDER')"
-            @blur="v$.email.$touch"
-          />
-        </label>
-        <p class="help-text">
-          {{ $t('INBOX_MGMT.ADD.EMAIL_CHANNEL.EMAIL.SUBTITLE') }}
-        </p>
-      </div>
-
-      <div class="w-full">
-        <woot-submit-button
-          :loading="uiFlags.isCreating"
-          :button-text="$t('INBOX_MGMT.ADD.EMAIL_CHANNEL.SUBMIT_BUTTON')"
-        />
-      </div>
-    </form>
-  </div>
-</template>
-
 <script>
 import { mapGetters } from 'vuex';
 import { useVuelidate } from '@vuelidate/core';
@@ -117,3 +66,54 @@ export default {
   },
 };
 </script>
+
+<template>
+  <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
+      :header-title="$t('INBOX_MGMT.ADD.EMAIL_CHANNEL.TITLE')"
+      :header-content="$t('INBOX_MGMT.ADD.EMAIL_CHANNEL.DESC')"
+    />
+    <form class="flex flex-wrap mx-0" @submit.prevent="createChannel()">
+      <div class="w-[65%] flex-shrink-0 flex-grow-0 max-w-[65%]">
+        <label :class="{ error: v$.channelName.$error }">
+          {{ $t('INBOX_MGMT.ADD.EMAIL_CHANNEL.CHANNEL_NAME.LABEL') }}
+          <input
+            v-model.trim="channelName"
+            type="text"
+            :placeholder="
+              $t('INBOX_MGMT.ADD.EMAIL_CHANNEL.CHANNEL_NAME.PLACEHOLDER')
+            "
+            @blur="v$.channelName.$touch"
+          />
+          <span v-if="v$.channelName.$error" class="message">{{
+            $t('INBOX_MGMT.ADD.EMAIL_CHANNEL.CHANNEL_NAME.ERROR')
+          }}</span>
+        </label>
+      </div>
+
+      <div class="w-[65%] flex-shrink-0 flex-grow-0 max-w-[65%]">
+        <label :class="{ error: v$.email.$error }">
+          {{ $t('INBOX_MGMT.ADD.EMAIL_CHANNEL.EMAIL.LABEL') }}
+          <input
+            v-model.trim="email"
+            type="text"
+            :placeholder="$t('INBOX_MGMT.ADD.EMAIL_CHANNEL.EMAIL.PLACEHOLDER')"
+            @blur="v$.email.$touch"
+          />
+        </label>
+        <p class="help-text">
+          {{ $t('INBOX_MGMT.ADD.EMAIL_CHANNEL.EMAIL.SUBTITLE') }}
+        </p>
+      </div>
+
+      <div class="w-full">
+        <woot-submit-button
+          :loading="uiFlags.isCreating"
+          :button-text="$t('INBOX_MGMT.ADD.EMAIL_CHANNEL.SUBMIT_BUTTON')"
+        />
+      </div>
+    </form>
+  </div>
+</template>
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 459ca899d..749141e6e 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/components/BotConfiguration.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/components/BotConfiguration.vue
@@ -1,53 +1,3 @@
-<template>
-  <div class="mx-8">
-    <loading-state v-if="uiFlags.isFetching || uiFlags.isFetchingAgentBot" />
-    <form
-      v-else
-      class="flex flex-wrap mx-0"
-      @submit.prevent="updateActiveAgentBot"
-    >
-      <settings-section
-        :title="$t('AGENT_BOTS.BOT_CONFIGURATION.TITLE')"
-        :sub-title="$t('AGENT_BOTS.BOT_CONFIGURATION.DESC')"
-      >
-        <div class="w-3/5">
-          <label>
-            <select v-model="selectedAgentBotId">
-              <option value="" disabled selected>
-                {{ $t('AGENT_BOTS.BOT_CONFIGURATION.SELECT_PLACEHOLDER') }}
-              </option>
-              <option
-                v-for="agentBot in agentBots"
-                :key="agentBot.id"
-                :value="agentBot.id"
-              >
-                {{ agentBot.name }}
-              </option>
-            </select>
-          </label>
-          <div class="button-container">
-            <woot-submit-button
-              :button-text="$t('AGENT_BOTS.BOT_CONFIGURATION.SUBMIT')"
-              :loading="uiFlags.isSettingAgentBot"
-            />
-            <woot-button
-              type="button"
-              :disabled="!selectedAgentBotId"
-              :loading="uiFlags.isDisconnecting"
-              variant="smooth"
-              color-scheme="alert"
-              class="button--disconnect"
-              @click="disconnectBot"
-            >
-              {{ $t('AGENT_BOTS.BOT_CONFIGURATION.DISCONNECT') }}
-            </woot-button>
-          </div>
-        </div>
-      </settings-section>
-    </form>
-  </div>
-</template>
-
 <script>
 import { mapGetters } from 'vuex';
 import { useAlert } from 'dashboard/composables';
@@ -121,6 +71,56 @@ export default {
 };
 </script>
 
+<template>
+  <div class="mx-8">
+    <loading-state v-if="uiFlags.isFetching || uiFlags.isFetchingAgentBot" />
+    <form
+      v-else
+      class="flex flex-wrap mx-0"
+      @submit.prevent="updateActiveAgentBot"
+    >
+      <settings-section
+        :title="$t('AGENT_BOTS.BOT_CONFIGURATION.TITLE')"
+        :sub-title="$t('AGENT_BOTS.BOT_CONFIGURATION.DESC')"
+      >
+        <div class="w-3/5">
+          <label>
+            <select v-model="selectedAgentBotId">
+              <option value="" disabled selected>
+                {{ $t('AGENT_BOTS.BOT_CONFIGURATION.SELECT_PLACEHOLDER') }}
+              </option>
+              <option
+                v-for="agentBot in agentBots"
+                :key="agentBot.id"
+                :value="agentBot.id"
+              >
+                {{ agentBot.name }}
+              </option>
+            </select>
+          </label>
+          <div class="button-container">
+            <woot-submit-button
+              :button-text="$t('AGENT_BOTS.BOT_CONFIGURATION.SUBMIT')"
+              :loading="uiFlags.isSettingAgentBot"
+            />
+            <woot-button
+              type="button"
+              :disabled="!selectedAgentBotId"
+              :loading="uiFlags.isDisconnecting"
+              variant="smooth"
+              color-scheme="alert"
+              class="button--disconnect"
+              @click="disconnectBot"
+            >
+              {{ $t('AGENT_BOTS.BOT_CONFIGURATION.DISCONNECT') }}
+            </woot-button>
+          </div>
+        </div>
+      </settings-section>
+    </form>
+  </div>
+</template>
+
 <style scoped lang="scss">
 .button--disconnect {
   @apply ml-2;
diff --git a/app/javascript/dashboard/routes/dashboard/settings/inbox/components/BusinessDay.vue b/app/javascript/dashboard/routes/dashboard/settings/inbox/components/BusinessDay.vue
index 6f6e1bef1..c8ccea5dc 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/components/BusinessDay.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/components/BusinessDay.vue
@@ -1,72 +1,3 @@
-<template>
-  <div class="day-wrap">
-    <div class="checkbox-wrap">
-      <input
-        v-model="isDayEnabled"
-        name="enable-day"
-        class="enable-checkbox"
-        type="checkbox"
-        :title="$t('INBOX_MGMT.BUSINESS_HOURS.DAY.ENABLE')"
-      />
-    </div>
-    <div class="day">
-      <span>{{ dayName }}</span>
-    </div>
-    <div v-if="isDayEnabled" class="hours-select-wrap">
-      <div class="hours-range">
-        <div class="checkbox-wrap open-all-day">
-          <input
-            v-model="isOpenAllDay"
-            name="enable-open-all-day"
-            class="enable-checkbox"
-            type="checkbox"
-            :title="$t('INBOX_MGMT.BUSINESS_HOURS.ALL_DAY')"
-          />
-          <span>{{ $t('INBOX_MGMT.BUSINESS_HOURS.ALL_DAY') }}</span>
-        </div>
-        <multiselect
-          v-model="fromTime"
-          :options="fromTimeSlots"
-          deselect-label=""
-          select-label=""
-          selected-label=""
-          :placeholder="$t('INBOX_MGMT.BUSINESS_HOURS.DAY.CHOOSE')"
-          :allow-empty="false"
-          :disabled="isOpenAllDay"
-        />
-        <div class="separator-icon">
-          <fluent-icon icon="subtract" type="solid" size="16" />
-        </div>
-        <multiselect
-          v-model="toTime"
-          :options="toTimeSlots"
-          deselect-label=""
-          select-label=""
-          selected-label=""
-          :placeholder="$t('INBOX_MGMT.BUSINESS_HOURS.DAY.CHOOSE')"
-          :allow-empty="false"
-          :disabled="isOpenAllDay"
-        />
-      </div>
-      <div v-if="hasError" class="date-error">
-        <span class="error">{{
-          $t('INBOX_MGMT.BUSINESS_HOURS.DAY.VALIDATION_ERROR')
-        }}</span>
-      </div>
-    </div>
-    <div v-else class="day-unavailable">
-      <span>
-        {{ $t('INBOX_MGMT.BUSINESS_HOURS.DAY.UNAVAILABLE') }}
-      </span>
-    </div>
-    <div>
-      <span v-if="isDayEnabled && !hasError" class="label">
-        {{ totalHours }} {{ $t('INBOX_MGMT.BUSINESS_HOURS.DAY.HOURS') }}
-      </span>
-    </div>
-  </div>
-</template>
-
 <script>
 import parse from 'date-fns/parse';
 import differenceInMinutes from 'date-fns/differenceInMinutes';
@@ -201,6 +132,75 @@ export default {
   },
 };
 </script>
+
+<template>
+  <div class="day-wrap">
+    <div class="checkbox-wrap">
+      <input
+        v-model="isDayEnabled"
+        name="enable-day"
+        class="enable-checkbox"
+        type="checkbox"
+        :title="$t('INBOX_MGMT.BUSINESS_HOURS.DAY.ENABLE')"
+      />
+    </div>
+    <div class="day">
+      <span>{{ dayName }}</span>
+    </div>
+    <div v-if="isDayEnabled" class="hours-select-wrap">
+      <div class="hours-range">
+        <div class="checkbox-wrap open-all-day">
+          <input
+            v-model="isOpenAllDay"
+            name="enable-open-all-day"
+            class="enable-checkbox"
+            type="checkbox"
+            :title="$t('INBOX_MGMT.BUSINESS_HOURS.ALL_DAY')"
+          />
+          <span>{{ $t('INBOX_MGMT.BUSINESS_HOURS.ALL_DAY') }}</span>
+        </div>
+        <multiselect
+          v-model="fromTime"
+          :options="fromTimeSlots"
+          deselect-label=""
+          select-label=""
+          selected-label=""
+          :placeholder="$t('INBOX_MGMT.BUSINESS_HOURS.DAY.CHOOSE')"
+          :allow-empty="false"
+          :disabled="isOpenAllDay"
+        />
+        <div class="separator-icon">
+          <fluent-icon icon="subtract" type="solid" size="16" />
+        </div>
+        <multiselect
+          v-model="toTime"
+          :options="toTimeSlots"
+          deselect-label=""
+          select-label=""
+          selected-label=""
+          :placeholder="$t('INBOX_MGMT.BUSINESS_HOURS.DAY.CHOOSE')"
+          :allow-empty="false"
+          :disabled="isOpenAllDay"
+        />
+      </div>
+      <div v-if="hasError" class="date-error">
+        <span class="error">{{
+          $t('INBOX_MGMT.BUSINESS_HOURS.DAY.VALIDATION_ERROR')
+        }}</span>
+      </div>
+    </div>
+    <div v-else class="day-unavailable">
+      <span>
+        {{ $t('INBOX_MGMT.BUSINESS_HOURS.DAY.UNAVAILABLE') }}
+      </span>
+    </div>
+    <div>
+      <span v-if="isDayEnabled && !hasError" class="label">
+        {{ totalHours }} {{ $t('INBOX_MGMT.BUSINESS_HOURS.DAY.HOURS') }}
+      </span>
+    </div>
+  </div>
+</template>
 <style lang="scss" scoped>
 .day-wrap::v-deep .multiselect {
   @apply m-0 w-[7.5rem];
diff --git a/app/javascript/dashboard/routes/dashboard/settings/inbox/components/InputRadioGroup.vue b/app/javascript/dashboard/routes/dashboard/settings/inbox/components/InputRadioGroup.vue
index 6f08afc3d..ded4fb9d7 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/components/InputRadioGroup.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/components/InputRadioGroup.vue
@@ -1,23 +1,3 @@
-<template>
-  <div>
-    <label class="radio-group-label">{{ label }}</label>
-    <div class="radio-group">
-      <div v-for="item in items" :key="item.id" class="radio-group-item">
-        <label class="radio-group-item-label">
-          <input
-            class="radio-input"
-            :name="`${name} -radio-input`"
-            type="radio"
-            :checked="item.checked"
-            @change="action({ ...item, checked: true })"
-          />
-          <span>{{ item.title }}</span>
-        </label>
-      </div>
-    </div>
-  </div>
-</template>
-
 <script>
 export default {
   props: {
@@ -41,6 +21,26 @@ export default {
 };
 </script>
 
+<template>
+  <div>
+    <label class="radio-group-label">{{ label }}</label>
+    <div class="radio-group">
+      <div v-for="item in items" :key="item.id" class="radio-group-item">
+        <label class="radio-group-item-label">
+          <input
+            class="radio-input"
+            :name="`${name} -radio-input`"
+            type="radio"
+            :checked="item.checked"
+            @change="action({ ...item, checked: true })"
+          />
+          <span>{{ item.title }}</span>
+        </label>
+      </div>
+    </div>
+  </div>
+</template>
+
 <style lang="scss" scoped>
 .radio-group-label {
   margin-bottom: var(--space-smaller);
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 126b57198..0e611ed0b 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/components/SenderNameExamplePreview.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/components/SenderNameExamplePreview.vue
@@ -1,48 +1,3 @@
-<template>
-  <div class="flex flex-row items-center gap-4">
-    <button
-      v-for="keyOption in senderNameKeyOptions"
-      :key="keyOption.key"
-      class="text-slate-800 dark:text-slate-100 cursor-pointer p-0"
-      @click="toggleSenderNameType(keyOption.key)"
-    >
-      <preview-card
-        :heading="keyOption.heading"
-        :content="keyOption.content"
-        :active="keyOption.key === senderNameType"
-      >
-        <div class="flex flex-col items-start p-3 gap-2">
-          <span class="text-xs">
-            {{ $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" />
-            <div class="flex flex-col items-start gap-1">
-              <div class="items-center flex flex-row gap-0.5 max-w-[18rem]">
-                <span
-                  v-if="isKeyOptionFriendly(keyOption.key)"
-                  class="text-xs font-semibold leading-tight"
-                >
-                  {{ keyOption.preview.senderName }}
-                </span>
-                <span v-if="isKeyOptionFriendly(keyOption.key)" class="text-xs">
-                  {{ $t('INBOX_MGMT.EDIT.SENDER_NAME_SECTION.FRIENDLY.FROM') }}
-                </span>
-                <span
-                  class="text-xs font-semibold leading-tight overflow-hidden whitespace-nowrap text-ellipsis"
-                >
-                  {{ businessName || keyOption.preview.businessName }}
-                </span>
-              </div>
-              <span class="text-xs">{{ keyOption.preview.email }}</span>
-            </div>
-          </div>
-        </div>
-      </preview-card>
-    </button>
-  </div>
-</template>
-
 <script>
 import PreviewCard from 'dashboard/components/ui/PreviewCard.vue';
 import Thumbnail from 'dashboard/components/widgets/Thumbnail.vue';
@@ -111,3 +66,48 @@ export default {
   },
 };
 </script>
+
+<template>
+  <div class="flex flex-row items-center gap-4">
+    <button
+      v-for="keyOption in senderNameKeyOptions"
+      :key="keyOption.key"
+      class="text-slate-800 dark:text-slate-100 cursor-pointer p-0"
+      @click="toggleSenderNameType(keyOption.key)"
+    >
+      <preview-card
+        :heading="keyOption.heading"
+        :content="keyOption.content"
+        :active="keyOption.key === senderNameType"
+      >
+        <div class="flex flex-col items-start p-3 gap-2">
+          <span class="text-xs">
+            {{ $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" />
+            <div class="flex flex-col items-start gap-1">
+              <div class="items-center flex flex-row gap-0.5 max-w-[18rem]">
+                <span
+                  v-if="isKeyOptionFriendly(keyOption.key)"
+                  class="text-xs font-semibold leading-tight"
+                >
+                  {{ keyOption.preview.senderName }}
+                </span>
+                <span v-if="isKeyOptionFriendly(keyOption.key)" class="text-xs">
+                  {{ $t('INBOX_MGMT.EDIT.SENDER_NAME_SECTION.FRIENDLY.FROM') }}
+                </span>
+                <span
+                  class="text-xs font-semibold leading-tight overflow-hidden whitespace-nowrap text-ellipsis"
+                >
+                  {{ businessName || keyOption.preview.businessName }}
+                </span>
+              </div>
+              <span class="text-xs">{{ keyOption.preview.email }}</span>
+            </div>
+          </div>
+        </div>
+      </preview-card>
+    </button>
+  </div>
+</template>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/inbox/components/SingleSelectDropdown.vue b/app/javascript/dashboard/routes/dashboard/settings/inbox/components/SingleSelectDropdown.vue
index 850b5a863..31676278f 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/components/SingleSelectDropdown.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/components/SingleSelectDropdown.vue
@@ -1,20 +1,3 @@
-<template>
-  <div>
-    <label for="dropdown-select">
-      {{ label }}
-    </label>
-    <select
-      id="dropdown-select"
-      v-model="value"
-      name="dropdown-select"
-      @change="action(value)"
-    >
-      <option v-for="option in options" :key="option.key">
-        {{ option.value }}
-      </option>
-    </select>
-  </div>
-</template>
 <script>
 export default {
   props: {
@@ -42,3 +25,20 @@ export default {
   },
 };
 </script>
+<template>
+  <div>
+    <label for="dropdown-select">
+      {{ label }}
+    </label>
+    <select
+      id="dropdown-select"
+      v-model="value"
+      name="dropdown-select"
+      @change="action(value)"
+    >
+      <option v-for="option in options" :key="option.key">
+        {{ option.value }}
+      </option>
+    </select>
+  </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 5bbc01a92..6d9ca2b7f 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/components/WeeklyAvailability.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/components/WeeklyAvailability.vue
@@ -1,80 +1,3 @@
-<template>
-  <div class="mx-8">
-    <settings-section
-      :title="$t('INBOX_MGMT.BUSINESS_HOURS.TITLE')"
-      :sub-title="$t('INBOX_MGMT.BUSINESS_HOURS.SUBTITLE')"
-    >
-      <form @submit.prevent="updateInbox">
-        <label for="toggle-business-hours" class="toggle-input-wrap">
-          <input
-            v-model="isBusinessHoursEnabled"
-            type="checkbox"
-            class="ltr:mr-2 rtl:ml-2"
-            name="toggle-business-hours"
-          />
-          {{ $t('INBOX_MGMT.BUSINESS_HOURS.TOGGLE_AVAILABILITY') }}
-        </label>
-        <p class="text-slate-700 dark:text-slate-300 mb-4">
-          {{ $t('INBOX_MGMT.BUSINESS_HOURS.TOGGLE_HELP') }}
-        </p>
-        <div v-if="isBusinessHoursEnabled" class="mb-6">
-          <div class="max-w-[37.5rem]">
-            <label class="unavailable-input-wrap">
-              {{ $t('INBOX_MGMT.BUSINESS_HOURS.UNAVAILABLE_MESSAGE_LABEL') }}
-            </label>
-            <div
-              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
-                v-model="unavailableMessage"
-                :enable-variables="true"
-                :is-format-mode="true"
-                class="message-editor"
-                :min-height="4"
-              />
-            </div>
-            <textarea v-else v-model="unavailableMessage" type="text" />
-          </div>
-          <div class="timezone-input-wrap">
-            <label>
-              {{ $t('INBOX_MGMT.BUSINESS_HOURS.TIMEZONE_LABEL') }}
-            </label>
-            <multiselect
-              v-model="timeZone"
-              :options="timeZones"
-              deselect-label=""
-              select-label=""
-              selected-label=""
-              track-by="value"
-              label="label"
-              :close-on-select="true"
-              :placeholder="$t('INBOX_MGMT.BUSINESS_HOURS.DAY.CHOOSE')"
-              :allow-empty="false"
-            />
-          </div>
-
-          <label>
-            {{ $t('INBOX_MGMT.BUSINESS_HOURS.WEEKLY_TITLE') }}
-          </label>
-          <business-day
-            v-for="timeSlot in timeSlots"
-            :key="timeSlot.day"
-            :day-name="dayNames[timeSlot.day]"
-            :time-slot="timeSlot"
-            @update="data => onSlotUpdate(timeSlot.day, data)"
-          />
-        </div>
-        <woot-submit-button
-          :button-text="$t('INBOX_MGMT.BUSINESS_HOURS.UPDATE')"
-          :loading="uiFlags.isUpdating"
-          :disabled="hasError"
-        />
-      </form>
-    </settings-section>
-  </div>
-</template>
-
 <script>
 import { mapGetters } from 'vuex';
 import { useAlert } from 'dashboard/composables';
@@ -194,6 +117,83 @@ export default {
   },
 };
 </script>
+
+<template>
+  <div class="mx-8">
+    <settings-section
+      :title="$t('INBOX_MGMT.BUSINESS_HOURS.TITLE')"
+      :sub-title="$t('INBOX_MGMT.BUSINESS_HOURS.SUBTITLE')"
+    >
+      <form @submit.prevent="updateInbox">
+        <label for="toggle-business-hours" class="toggle-input-wrap">
+          <input
+            v-model="isBusinessHoursEnabled"
+            type="checkbox"
+            class="ltr:mr-2 rtl:ml-2"
+            name="toggle-business-hours"
+          />
+          {{ $t('INBOX_MGMT.BUSINESS_HOURS.TOGGLE_AVAILABILITY') }}
+        </label>
+        <p class="text-slate-700 dark:text-slate-300 mb-4">
+          {{ $t('INBOX_MGMT.BUSINESS_HOURS.TOGGLE_HELP') }}
+        </p>
+        <div v-if="isBusinessHoursEnabled" class="mb-6">
+          <div class="max-w-[37.5rem]">
+            <label class="unavailable-input-wrap">
+              {{ $t('INBOX_MGMT.BUSINESS_HOURS.UNAVAILABLE_MESSAGE_LABEL') }}
+            </label>
+            <div
+              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
+                v-model="unavailableMessage"
+                :enable-variables="true"
+                :is-format-mode="true"
+                class="message-editor"
+                :min-height="4"
+              />
+            </div>
+            <textarea v-else v-model="unavailableMessage" type="text" />
+          </div>
+          <div class="timezone-input-wrap">
+            <label>
+              {{ $t('INBOX_MGMT.BUSINESS_HOURS.TIMEZONE_LABEL') }}
+            </label>
+            <multiselect
+              v-model="timeZone"
+              :options="timeZones"
+              deselect-label=""
+              select-label=""
+              selected-label=""
+              track-by="value"
+              label="label"
+              :close-on-select="true"
+              :placeholder="$t('INBOX_MGMT.BUSINESS_HOURS.DAY.CHOOSE')"
+              :allow-empty="false"
+            />
+          </div>
+
+          <label>
+            {{ $t('INBOX_MGMT.BUSINESS_HOURS.WEEKLY_TITLE') }}
+          </label>
+          <business-day
+            v-for="timeSlot in timeSlots"
+            :key="timeSlot.day"
+            :day-name="dayNames[timeSlot.day]"
+            :time-slot="timeSlot"
+            @update="data => onSlotUpdate(timeSlot.day, data)"
+          />
+        </div>
+        <woot-submit-button
+          :button-text="$t('INBOX_MGMT.BUSINESS_HOURS.UPDATE')"
+          :loading="uiFlags.isUpdating"
+          :disabled="hasError"
+        />
+      </form>
+    </settings-section>
+  </div>
+</template>
 <style lang="scss" scoped>
 .timezone-input-wrap {
   @apply max-w-[37.5rem];
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 8b370bef4..b23edd5d0 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/facebook/Reauthorize.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/facebook/Reauthorize.vue
@@ -1,7 +1,3 @@
-<template>
-  <inbox-reconnection-required class="mx-8 mt-5" @reauthorize="startLogin" />
-</template>
-
 <script>
 /* global FB */
 import InboxReconnectionRequired from '../components/InboxReconnectionRequired';
@@ -102,6 +98,10 @@ export default {
 };
 </script>
 
+<template>
+  <inbox-reconnection-required class="mx-8 mt-5" @reauthorize="startLogin" />
+</template>
+
 <style lang="scss" scoped>
 @import '~dashboard/assets/scss/variables';
 
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 d960e9d52..2d5103f84 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/settingsPage/CollaboratorsPage.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/settingsPage/CollaboratorsPage.vue
@@ -1,81 +1,3 @@
-<template>
-  <div>
-    <settings-section
-      :title="$t('INBOX_MGMT.SETTINGS_POPUP.INBOX_AGENTS')"
-      :sub-title="$t('INBOX_MGMT.SETTINGS_POPUP.INBOX_AGENTS_SUB_TEXT')"
-    >
-      <multiselect
-        v-model="selectedAgents"
-        :options="agentList"
-        track-by="id"
-        label="name"
-        :multiple="true"
-        :close-on-select="false"
-        :clear-on-select="false"
-        :hide-selected="true"
-        placeholder="Pick some"
-        selected-label
-        :select-label="$t('FORMS.MULTISELECT.ENTER_TO_SELECT')"
-        :deselect-label="$t('FORMS.MULTISELECT.ENTER_TO_REMOVE')"
-        @select="v$.selectedAgents.$touch"
-      />
-
-      <woot-submit-button
-        :button-text="$t('INBOX_MGMT.SETTINGS_POPUP.UPDATE')"
-        :loading="isAgentListUpdating"
-        @click="updateAgents"
-      />
-    </settings-section>
-
-    <settings-section
-      :title="$t('INBOX_MGMT.SETTINGS_POPUP.AGENT_ASSIGNMENT')"
-      :sub-title="$t('INBOX_MGMT.SETTINGS_POPUP.AGENT_ASSIGNMENT_SUB_TEXT')"
-    >
-      <label class="w-3/4 settings-item">
-        <div class="flex items-center gap-2">
-          <input
-            id="enableAutoAssignment"
-            v-model="enableAutoAssignment"
-            type="checkbox"
-            @change="handleEnableAutoAssignment"
-          />
-          <label for="enableAutoAssignment">
-            {{ $t('INBOX_MGMT.SETTINGS_POPUP.AUTO_ASSIGNMENT') }}
-          </label>
-        </div>
-
-        <p class="pb-1 text-sm not-italic text-slate-600 dark:text-slate-400">
-          {{ $t('INBOX_MGMT.SETTINGS_POPUP.AUTO_ASSIGNMENT_SUB_TEXT') }}
-        </p>
-      </label>
-
-      <div
-        v-if="enableAutoAssignment && isEnterprise"
-        class="max-assignment-container"
-      >
-        <woot-input
-          v-model.trim="maxAssignmentLimit"
-          type="number"
-          :class="{ error: v$.maxAssignmentLimit.$error }"
-          :error="maxAssignmentLimitErrors"
-          :label="$t('INBOX_MGMT.AUTO_ASSIGNMENT.MAX_ASSIGNMENT_LIMIT')"
-          @blur="v$.maxAssignmentLimit.$touch"
-        />
-
-        <p class="pb-1 text-sm not-italic text-slate-600 dark:text-slate-400">
-          {{ $t('INBOX_MGMT.AUTO_ASSIGNMENT.MAX_ASSIGNMENT_LIMIT_SUB_TEXT') }}
-        </p>
-
-        <woot-submit-button
-          :button-text="$t('INBOX_MGMT.SETTINGS_POPUP.UPDATE')"
-          :disabled="v$.maxAssignmentLimit.$invalid"
-          @click="updateInbox"
-        />
-      </div>
-    </settings-section>
-  </div>
-</template>
-
 <script>
 import { mapGetters } from 'vuex';
 import { useVuelidate } from '@vuelidate/core';
@@ -194,6 +116,84 @@ export default {
 };
 </script>
 
+<template>
+  <div>
+    <settings-section
+      :title="$t('INBOX_MGMT.SETTINGS_POPUP.INBOX_AGENTS')"
+      :sub-title="$t('INBOX_MGMT.SETTINGS_POPUP.INBOX_AGENTS_SUB_TEXT')"
+    >
+      <multiselect
+        v-model="selectedAgents"
+        :options="agentList"
+        track-by="id"
+        label="name"
+        :multiple="true"
+        :close-on-select="false"
+        :clear-on-select="false"
+        :hide-selected="true"
+        placeholder="Pick some"
+        selected-label
+        :select-label="$t('FORMS.MULTISELECT.ENTER_TO_SELECT')"
+        :deselect-label="$t('FORMS.MULTISELECT.ENTER_TO_REMOVE')"
+        @select="v$.selectedAgents.$touch"
+      />
+
+      <woot-submit-button
+        :button-text="$t('INBOX_MGMT.SETTINGS_POPUP.UPDATE')"
+        :loading="isAgentListUpdating"
+        @click="updateAgents"
+      />
+    </settings-section>
+
+    <settings-section
+      :title="$t('INBOX_MGMT.SETTINGS_POPUP.AGENT_ASSIGNMENT')"
+      :sub-title="$t('INBOX_MGMT.SETTINGS_POPUP.AGENT_ASSIGNMENT_SUB_TEXT')"
+    >
+      <label class="w-3/4 settings-item">
+        <div class="flex items-center gap-2">
+          <input
+            id="enableAutoAssignment"
+            v-model="enableAutoAssignment"
+            type="checkbox"
+            @change="handleEnableAutoAssignment"
+          />
+          <label for="enableAutoAssignment">
+            {{ $t('INBOX_MGMT.SETTINGS_POPUP.AUTO_ASSIGNMENT') }}
+          </label>
+        </div>
+
+        <p class="pb-1 text-sm not-italic text-slate-600 dark:text-slate-400">
+          {{ $t('INBOX_MGMT.SETTINGS_POPUP.AUTO_ASSIGNMENT_SUB_TEXT') }}
+        </p>
+      </label>
+
+      <div
+        v-if="enableAutoAssignment && isEnterprise"
+        class="max-assignment-container"
+      >
+        <woot-input
+          v-model.trim="maxAssignmentLimit"
+          type="number"
+          :class="{ error: v$.maxAssignmentLimit.$error }"
+          :error="maxAssignmentLimitErrors"
+          :label="$t('INBOX_MGMT.AUTO_ASSIGNMENT.MAX_ASSIGNMENT_LIMIT')"
+          @blur="v$.maxAssignmentLimit.$touch"
+        />
+
+        <p class="pb-1 text-sm not-italic text-slate-600 dark:text-slate-400">
+          {{ $t('INBOX_MGMT.AUTO_ASSIGNMENT.MAX_ASSIGNMENT_LIMIT_SUB_TEXT') }}
+        </p>
+
+        <woot-submit-button
+          :button-text="$t('INBOX_MGMT.SETTINGS_POPUP.UPDATE')"
+          :disabled="v$.maxAssignmentLimit.$invalid"
+          @click="updateInbox"
+        />
+      </div>
+    </settings-section>
+  </div>
+</template>
+
 <style scoped lang="scss">
 @import '~dashboard/assets/scss/variables';
 @import '~dashboard/assets/scss/mixins';
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 1aace4c32..44b011d77 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/settingsPage/ConfigurationPage.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/settingsPage/ConfigurationPage.vue
@@ -1,3 +1,90 @@
+<script>
+import { useAlert } from 'dashboard/composables';
+import inboxMixin from 'shared/mixins/inboxMixin';
+import SettingsSection from '../../../../../components/SettingsSection.vue';
+import ImapSettings from '../ImapSettings.vue';
+import SmtpSettings from '../SmtpSettings.vue';
+import { useVuelidate } from '@vuelidate/core';
+import { required } from '@vuelidate/validators';
+
+export default {
+  components: {
+    SettingsSection,
+    ImapSettings,
+    SmtpSettings,
+  },
+  mixins: [inboxMixin],
+  props: {
+    inbox: {
+      type: Object,
+      default: () => ({}),
+    },
+  },
+  setup() {
+    return { v$: useVuelidate() };
+  },
+  data() {
+    return {
+      hmacMandatory: false,
+      whatsAppInboxAPIKey: '',
+    };
+  },
+  validations: {
+    whatsAppInboxAPIKey: { required },
+  },
+  watch: {
+    inbox() {
+      this.setDefaults();
+    },
+  },
+  mounted() {
+    this.setDefaults();
+  },
+  methods: {
+    setDefaults() {
+      this.hmacMandatory = this.inbox.hmac_mandatory || false;
+    },
+    handleHmacFlag() {
+      this.updateInbox();
+    },
+    async updateInbox() {
+      try {
+        const payload = {
+          id: this.inbox.id,
+          formData: false,
+          channel: {
+            hmac_mandatory: this.hmacMandatory,
+          },
+        };
+        await this.$store.dispatch('inboxes/updateInbox', payload);
+        useAlert(this.$t('INBOX_MGMT.EDIT.API.SUCCESS_MESSAGE'));
+      } catch (error) {
+        useAlert(this.$t('INBOX_MGMT.EDIT.API.ERROR_MESSAGE'));
+      }
+    },
+    async updateWhatsAppInboxAPIKey() {
+      try {
+        const payload = {
+          id: this.inbox.id,
+          formData: false,
+          channel: {},
+        };
+
+        payload.channel.provider_config = {
+          ...this.inbox.provider_config,
+          api_key: this.whatsAppInboxAPIKey,
+        };
+
+        await this.$store.dispatch('inboxes/updateInbox', payload);
+        useAlert(this.$t('INBOX_MGMT.EDIT.API.SUCCESS_MESSAGE'));
+      } catch (error) {
+        useAlert(this.$t('INBOX_MGMT.EDIT.API.ERROR_MESSAGE'));
+      }
+    },
+  },
+};
+</script>
+
 <template>
   <div v-if="isATwilioChannel" class="mx-8">
     <settings-section
@@ -149,93 +236,6 @@
     </div>
   </div>
 </template>
-
-<script>
-import { useAlert } from 'dashboard/composables';
-import inboxMixin from 'shared/mixins/inboxMixin';
-import SettingsSection from '../../../../../components/SettingsSection.vue';
-import ImapSettings from '../ImapSettings.vue';
-import SmtpSettings from '../SmtpSettings.vue';
-import { useVuelidate } from '@vuelidate/core';
-import { required } from '@vuelidate/validators';
-
-export default {
-  components: {
-    SettingsSection,
-    ImapSettings,
-    SmtpSettings,
-  },
-  mixins: [inboxMixin],
-  props: {
-    inbox: {
-      type: Object,
-      default: () => ({}),
-    },
-  },
-  setup() {
-    return { v$: useVuelidate() };
-  },
-  data() {
-    return {
-      hmacMandatory: false,
-      whatsAppInboxAPIKey: '',
-    };
-  },
-  validations: {
-    whatsAppInboxAPIKey: { required },
-  },
-  watch: {
-    inbox() {
-      this.setDefaults();
-    },
-  },
-  mounted() {
-    this.setDefaults();
-  },
-  methods: {
-    setDefaults() {
-      this.hmacMandatory = this.inbox.hmac_mandatory || false;
-    },
-    handleHmacFlag() {
-      this.updateInbox();
-    },
-    async updateInbox() {
-      try {
-        const payload = {
-          id: this.inbox.id,
-          formData: false,
-          channel: {
-            hmac_mandatory: this.hmacMandatory,
-          },
-        };
-        await this.$store.dispatch('inboxes/updateInbox', payload);
-        useAlert(this.$t('INBOX_MGMT.EDIT.API.SUCCESS_MESSAGE'));
-      } catch (error) {
-        useAlert(this.$t('INBOX_MGMT.EDIT.API.ERROR_MESSAGE'));
-      }
-    },
-    async updateWhatsAppInboxAPIKey() {
-      try {
-        const payload = {
-          id: this.inbox.id,
-          formData: false,
-          channel: {},
-        };
-
-        payload.channel.provider_config = {
-          ...this.inbox.provider_config,
-          api_key: this.whatsAppInboxAPIKey,
-        };
-
-        await this.$store.dispatch('inboxes/updateInbox', payload);
-        useAlert(this.$t('INBOX_MGMT.EDIT.API.SUCCESS_MESSAGE'));
-      } catch (error) {
-        useAlert(this.$t('INBOX_MGMT.EDIT.API.ERROR_MESSAGE'));
-      }
-    },
-  },
-};
-</script>
 <style lang="scss" scoped>
 .whatsapp-settings--content {
   ::v-deep input {
diff --git a/app/javascript/dashboard/routes/dashboard/settings/integrations/DashboardApps/DashboardAppModal.vue b/app/javascript/dashboard/routes/dashboard/settings/integrations/DashboardApps/DashboardAppModal.vue
index a75aa9a78..4adc4f7dd 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/integrations/DashboardApps/DashboardAppModal.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/integrations/DashboardApps/DashboardAppModal.vue
@@ -1,57 +1,3 @@
-<template>
-  <woot-modal :show="show" :on-close="closeModal">
-    <div class="flex flex-col h-auto overflow-auto">
-      <woot-modal-header :header-title="header" />
-      <form class="w-full" @submit.prevent="submit">
-        <woot-input
-          v-model.trim="app.title"
-          :class="{ error: v$.app.title.$error }"
-          class="w-full"
-          :label="$t('INTEGRATION_SETTINGS.DASHBOARD_APPS.FORM.TITLE_LABEL')"
-          :placeholder="
-            $t('INTEGRATION_SETTINGS.DASHBOARD_APPS.FORM.TITLE_PLACEHOLDER')
-          "
-          :error="
-            v$.app.title.$error
-              ? $t('INTEGRATION_SETTINGS.DASHBOARD_APPS.FORM.TITLE_ERROR')
-              : null
-          "
-          data-testid="app-title"
-          @input="v$.app.title.$touch"
-        />
-        <woot-input
-          v-model.trim="app.content.url"
-          :class="{ error: v$.app.content.url.$error }"
-          class="w-full"
-          :label="$t('INTEGRATION_SETTINGS.DASHBOARD_APPS.FORM.URL_LABEL')"
-          :placeholder="
-            $t('INTEGRATION_SETTINGS.DASHBOARD_APPS.FORM.URL_PLACEHOLDER')
-          "
-          :error="
-            v$.app.content.url.$error
-              ? $t('INTEGRATION_SETTINGS.DASHBOARD_APPS.FORM.URL_ERROR')
-              : null
-          "
-          data-testid="app-url"
-          @input="v$.app.content.url.$touch"
-        />
-        <div class="flex flex-row justify-end w-full gap-2 px-0 py-2">
-          <woot-button
-            :is-loading="isLoading"
-            :is-disabled="v$.$invalid"
-            data-testid="label-submit"
-          >
-            {{ submitButtonLabel }}
-          </woot-button>
-          <woot-button class="button clear" @click.prevent="closeModal">
-            {{ $t('INTEGRATION_SETTINGS.DASHBOARD_APPS.CREATE.FORM_CANCEL') }}
-          </woot-button>
-        </div>
-      </form>
-    </div>
-  </woot-modal>
-</template>
-
 <script>
 import { useVuelidate } from '@vuelidate/core';
 import { required, url } from '@vuelidate/validators';
@@ -157,3 +103,57 @@ export default {
   },
 };
 </script>
+
+<template>
+  <woot-modal :show="show" :on-close="closeModal">
+    <div class="flex flex-col h-auto overflow-auto">
+      <woot-modal-header :header-title="header" />
+      <form class="w-full" @submit.prevent="submit">
+        <woot-input
+          v-model.trim="app.title"
+          :class="{ error: v$.app.title.$error }"
+          class="w-full"
+          :label="$t('INTEGRATION_SETTINGS.DASHBOARD_APPS.FORM.TITLE_LABEL')"
+          :placeholder="
+            $t('INTEGRATION_SETTINGS.DASHBOARD_APPS.FORM.TITLE_PLACEHOLDER')
+          "
+          :error="
+            v$.app.title.$error
+              ? $t('INTEGRATION_SETTINGS.DASHBOARD_APPS.FORM.TITLE_ERROR')
+              : null
+          "
+          data-testid="app-title"
+          @input="v$.app.title.$touch"
+        />
+        <woot-input
+          v-model.trim="app.content.url"
+          :class="{ error: v$.app.content.url.$error }"
+          class="w-full"
+          :label="$t('INTEGRATION_SETTINGS.DASHBOARD_APPS.FORM.URL_LABEL')"
+          :placeholder="
+            $t('INTEGRATION_SETTINGS.DASHBOARD_APPS.FORM.URL_PLACEHOLDER')
+          "
+          :error="
+            v$.app.content.url.$error
+              ? $t('INTEGRATION_SETTINGS.DASHBOARD_APPS.FORM.URL_ERROR')
+              : null
+          "
+          data-testid="app-url"
+          @input="v$.app.content.url.$touch"
+        />
+        <div class="flex flex-row justify-end w-full gap-2 px-0 py-2">
+          <woot-button
+            :is-loading="isLoading"
+            :is-disabled="v$.$invalid"
+            data-testid="label-submit"
+          >
+            {{ submitButtonLabel }}
+          </woot-button>
+          <woot-button class="button clear" @click.prevent="closeModal">
+            {{ $t('INTEGRATION_SETTINGS.DASHBOARD_APPS.CREATE.FORM_CANCEL') }}
+          </woot-button>
+        </div>
+      </form>
+    </div>
+  </woot-modal>
+</template>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/integrations/DashboardApps/DashboardAppsRow.vue b/app/javascript/dashboard/routes/dashboard/settings/integrations/DashboardApps/DashboardAppsRow.vue
index 35a990724..bb14e3af7 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/integrations/DashboardApps/DashboardAppsRow.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/integrations/DashboardApps/DashboardAppsRow.vue
@@ -1,3 +1,18 @@
+<script>
+export default {
+  loading: {
+    type: Boolean,
+    default: false,
+  },
+  props: {
+    app: {
+      type: Object,
+      default: () => ({}),
+    },
+  },
+};
+</script>
+
 <template>
   <tr>
     <td class="w-40 max-w-[10rem] truncate" :title="app.title">
@@ -33,21 +48,6 @@
   </tr>
 </template>
 
-<script>
-export default {
-  loading: {
-    type: Boolean,
-    default: false,
-  },
-  props: {
-    app: {
-      type: Object,
-      default: () => ({}),
-    },
-  },
-};
-</script>
-
 <style lang="scss" scoped>
 .dashboard-app-label-url {
   @apply relative w-full;
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 b21f745d2..437c2d93c 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/integrations/DashboardApps/Index.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/integrations/DashboardApps/Index.vue
@@ -1,3 +1,78 @@
+<script>
+import { mapGetters } from 'vuex';
+import { useAlert } from 'dashboard/composables';
+import DashboardAppModal from './DashboardAppModal.vue';
+import DashboardAppsRow from './DashboardAppsRow.vue';
+import globalConfigMixin from 'shared/mixins/globalConfigMixin';
+
+export default {
+  components: {
+    DashboardAppModal,
+    DashboardAppsRow,
+  },
+  mixins: [globalConfigMixin],
+  data() {
+    return {
+      loading: {},
+      showDashboardAppPopup: false,
+      showDeleteConfirmationPopup: false,
+      selectedApp: {},
+      mode: 'CREATE',
+    };
+  },
+  computed: {
+    ...mapGetters({
+      globalConfig: 'globalConfig/get',
+      records: 'dashboardApps/getRecords',
+      uiFlags: 'dashboardApps/getUIFlags',
+    }),
+  },
+  mounted() {
+    this.$store.dispatch('dashboardApps/get');
+  },
+  methods: {
+    toggleDashboardAppPopup() {
+      this.showDashboardAppPopup = !this.showDashboardAppPopup;
+      this.selectedApp = {};
+    },
+    openDeletePopup(response) {
+      this.showDeleteConfirmationPopup = true;
+      this.selectedApp = response;
+    },
+    openCreatePopup() {
+      this.mode = 'CREATE';
+      this.selectedApp = {};
+      this.showDashboardAppPopup = true;
+    },
+    closeDeletePopup() {
+      this.showDeleteConfirmationPopup = false;
+    },
+    editApp(app) {
+      this.loading[app.id] = true;
+      this.mode = 'UPDATE';
+      this.selectedApp = app;
+      this.showDashboardAppPopup = true;
+    },
+    confirmDeletion() {
+      this.loading[this.selectedApp.id] = true;
+      this.closeDeletePopup();
+      this.deleteApp(this.selectedApp.id);
+    },
+    async deleteApp(id) {
+      try {
+        await this.$store.dispatch('dashboardApps/delete', id);
+        useAlert(
+          this.$t('INTEGRATION_SETTINGS.DASHBOARD_APPS.DELETE.API_SUCCESS')
+        );
+      } catch (error) {
+        useAlert(
+          this.$t('INTEGRATION_SETTINGS.DASHBOARD_APPS.DELETE.API_ERROR')
+        );
+      }
+    },
+  },
+};
+</script>
 <template>
   <div class="flex-1 p-4 overflow-auto">
     <woot-button
@@ -81,78 +156,3 @@
     />
   </div>
 </template>
-<script>
-import { mapGetters } from 'vuex';
-import { useAlert } from 'dashboard/composables';
-import DashboardAppModal from './DashboardAppModal.vue';
-import DashboardAppsRow from './DashboardAppsRow.vue';
-import globalConfigMixin from 'shared/mixins/globalConfigMixin';
-
-export default {
-  components: {
-    DashboardAppModal,
-    DashboardAppsRow,
-  },
-  mixins: [globalConfigMixin],
-  data() {
-    return {
-      loading: {},
-      showDashboardAppPopup: false,
-      showDeleteConfirmationPopup: false,
-      selectedApp: {},
-      mode: 'CREATE',
-    };
-  },
-  computed: {
-    ...mapGetters({
-      globalConfig: 'globalConfig/get',
-      records: 'dashboardApps/getRecords',
-      uiFlags: 'dashboardApps/getUIFlags',
-    }),
-  },
-  mounted() {
-    this.$store.dispatch('dashboardApps/get');
-  },
-  methods: {
-    toggleDashboardAppPopup() {
-      this.showDashboardAppPopup = !this.showDashboardAppPopup;
-      this.selectedApp = {};
-    },
-    openDeletePopup(response) {
-      this.showDeleteConfirmationPopup = true;
-      this.selectedApp = response;
-    },
-    openCreatePopup() {
-      this.mode = 'CREATE';
-      this.selectedApp = {};
-      this.showDashboardAppPopup = true;
-    },
-    closeDeletePopup() {
-      this.showDeleteConfirmationPopup = false;
-    },
-    editApp(app) {
-      this.loading[app.id] = true;
-      this.mode = 'UPDATE';
-      this.selectedApp = app;
-      this.showDashboardAppPopup = true;
-    },
-    confirmDeletion() {
-      this.loading[this.selectedApp.id] = true;
-      this.closeDeletePopup();
-      this.deleteApp(this.selectedApp.id);
-    },
-    async deleteApp(id) {
-      try {
-        await this.$store.dispatch('dashboardApps/delete', id);
-        useAlert(
-          this.$t('INTEGRATION_SETTINGS.DASHBOARD_APPS.DELETE.API_SUCCESS')
-        );
-      } catch (error) {
-        useAlert(
-          this.$t('INTEGRATION_SETTINGS.DASHBOARD_APPS.DELETE.API_ERROR')
-        );
-      }
-    },
-  },
-};
-</script>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/integrations/Integration.vue b/app/javascript/dashboard/routes/dashboard/settings/integrations/Integration.vue
index df68ff761..c5e29a9ad 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/integrations/Integration.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/integrations/Integration.vue
@@ -1,3 +1,65 @@
+<script>
+import { mapGetters } from 'vuex';
+import { frontendURL } from '../../../../helper/URLHelper';
+import { useAlert } from 'dashboard/composables';
+import globalConfigMixin from 'shared/mixins/globalConfigMixin';
+
+export default {
+  mixins: [globalConfigMixin],
+  props: {
+    integrationId: {
+      type: [String, Number],
+      required: true,
+    },
+    integrationLogo: { type: String, default: '' },
+    integrationName: { type: String, default: '' },
+    integrationDescription: { type: String, default: '' },
+    integrationEnabled: { type: Boolean, default: false },
+    integrationAction: { type: String, default: '' },
+    actionButtonText: { type: String, default: '' },
+    deleteConfirmationText: { type: Object, default: () => ({}) },
+  },
+  data() {
+    return {
+      showDeleteConfirmationPopup: false,
+    };
+  },
+  computed: {
+    ...mapGetters({
+      currentUser: 'getCurrentUser',
+      accountId: 'getCurrentAccountId',
+      globalConfig: 'globalConfig/get',
+    }),
+  },
+  methods: {
+    frontendURL,
+    openDeletePopup() {
+      this.showDeleteConfirmationPopup = true;
+    },
+    closeDeletePopup() {
+      this.showDeleteConfirmationPopup = false;
+    },
+    confirmDeletion() {
+      this.closeDeletePopup();
+      this.deleteIntegration(this.deleteIntegration);
+      this.$router.push({ name: 'settings_integrations' });
+    },
+    async deleteIntegration() {
+      try {
+        await this.$store.dispatch(
+          'integrations/deleteIntegration',
+          this.integrationId
+        );
+        useAlert(this.$t('INTEGRATION_SETTINGS.DELETE.API.SUCCESS_MESSAGE'));
+      } catch (error) {
+        useAlert(
+          this.$t('INTEGRATION_SETTINGS.WEBHOOK.DELETE.API.ERROR_MESSAGE')
+        );
+      }
+    },
+  },
+};
+</script>
 <template>
   <div
     class="flex flex-col md:flex-row justify-between items-start md:items-center"
@@ -71,65 +133,3 @@
     />
   </div>
 </template>
-<script>
-import { mapGetters } from 'vuex';
-import { frontendURL } from '../../../../helper/URLHelper';
-import { useAlert } from 'dashboard/composables';
-import globalConfigMixin from 'shared/mixins/globalConfigMixin';
-
-export default {
-  mixins: [globalConfigMixin],
-  props: {
-    integrationId: {
-      type: [String, Number],
-      required: true,
-    },
-    integrationLogo: { type: String, default: '' },
-    integrationName: { type: String, default: '' },
-    integrationDescription: { type: String, default: '' },
-    integrationEnabled: { type: Boolean, default: false },
-    integrationAction: { type: String, default: '' },
-    actionButtonText: { type: String, default: '' },
-    deleteConfirmationText: { type: Object, default: () => ({}) },
-  },
-  data() {
-    return {
-      showDeleteConfirmationPopup: false,
-    };
-  },
-  computed: {
-    ...mapGetters({
-      currentUser: 'getCurrentUser',
-      accountId: 'getCurrentAccountId',
-      globalConfig: 'globalConfig/get',
-    }),
-  },
-  methods: {
-    frontendURL,
-    openDeletePopup() {
-      this.showDeleteConfirmationPopup = true;
-    },
-    closeDeletePopup() {
-      this.showDeleteConfirmationPopup = false;
-    },
-    confirmDeletion() {
-      this.closeDeletePopup();
-      this.deleteIntegration(this.deleteIntegration);
-      this.$router.push({ name: 'settings_integrations' });
-    },
-    async deleteIntegration() {
-      try {
-        await this.$store.dispatch(
-          'integrations/deleteIntegration',
-          this.integrationId
-        );
-        useAlert(this.$t('INTEGRATION_SETTINGS.DELETE.API.SUCCESS_MESSAGE'));
-      } catch (error) {
-        useAlert(
-          this.$t('INTEGRATION_SETTINGS.WEBHOOK.DELETE.API.ERROR_MESSAGE')
-        );
-      }
-    },
-  },
-};
-</script>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/integrations/IntegrationHooks.vue b/app/javascript/dashboard/routes/dashboard/settings/integrations/IntegrationHooks.vue
index be718a08c..9ac6a2cc9 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/integrations/IntegrationHooks.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/integrations/IntegrationHooks.vue
@@ -1,46 +1,3 @@
-<template>
-  <div class="overflow-auto p-4 max-w-full my-auto flex flex-wrap h-full">
-    <woot-button
-      v-if="showAddButton"
-      color-scheme="success"
-      class-names="button--fixed-top"
-      icon="add-circle"
-      @click="openAddHookModal"
-    >
-      {{ $t('INTEGRATION_APPS.ADD_BUTTON') }}
-    </woot-button>
-    <div v-if="showIntegrationHooks" class="w-full">
-      <div v-if="isIntegrationMultiple">
-        <multiple-integration-hooks
-          :integration="integration"
-          @delete="openDeletePopup"
-        />
-      </div>
-
-      <div v-if="isIntegrationSingle">
-        <single-integration-hooks
-          :integration="integration"
-          @add="openAddHookModal"
-          @delete="openDeletePopup"
-        />
-      </div>
-    </div>
-
-    <woot-modal :show.sync="showAddHookModal" :on-close="hideAddHookModal">
-      <new-hook :integration="integration" @close="hideAddHookModal" />
-    </woot-modal>
-
-    <woot-delete-modal
-      :show.sync="showDeleteConfirmationPopup"
-      :on-close="closeDeletePopup"
-      :on-confirm="confirmDeletion"
-      :title="deleteTitle"
-      :message="deleteMessage"
-      :confirm-text="confirmText"
-      :reject-text="cancelText"
-    />
-  </div>
-</template>
 <script>
 import { isEmptyObject } from '../../../../helper/commons';
 import { mapGetters } from 'vuex';
@@ -148,3 +105,46 @@ export default {
   },
 };
 </script>
+<template>
+  <div class="overflow-auto p-4 max-w-full my-auto flex flex-wrap h-full">
+    <woot-button
+      v-if="showAddButton"
+      color-scheme="success"
+      class-names="button--fixed-top"
+      icon="add-circle"
+      @click="openAddHookModal"
+    >
+      {{ $t('INTEGRATION_APPS.ADD_BUTTON') }}
+    </woot-button>
+    <div v-if="showIntegrationHooks" class="w-full">
+      <div v-if="isIntegrationMultiple">
+        <multiple-integration-hooks
+          :integration="integration"
+          @delete="openDeletePopup"
+        />
+      </div>
+
+      <div v-if="isIntegrationSingle">
+        <single-integration-hooks
+          :integration="integration"
+          @add="openAddHookModal"
+          @delete="openDeletePopup"
+        />
+      </div>
+    </div>
+
+    <woot-modal :show.sync="showAddHookModal" :on-close="hideAddHookModal">
+      <new-hook :integration="integration" @close="hideAddHookModal" />
+    </woot-modal>
+
+    <woot-delete-modal
+      :show.sync="showDeleteConfirmationPopup"
+      :on-close="closeDeletePopup"
+      :on-confirm="confirmDeletion"
+      :title="deleteTitle"
+      :message="deleteMessage"
+      :confirm-text="confirmText"
+      :reject-text="cancelText"
+    />
+  </div>
+</template>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/integrations/MultipleIntegrationHooks.vue b/app/javascript/dashboard/routes/dashboard/settings/integrations/MultipleIntegrationHooks.vue
index aea851ee7..bf746f532 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/integrations/MultipleIntegrationHooks.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/integrations/MultipleIntegrationHooks.vue
@@ -1,3 +1,43 @@
+<script>
+import { mapGetters } from 'vuex';
+import hookMixin from './hookMixin';
+export default {
+  mixins: [hookMixin],
+  props: {
+    integration: {
+      type: Object,
+      default: () => ({}),
+    },
+  },
+  computed: {
+    ...mapGetters({
+      globalConfig: 'globalConfig/get',
+    }),
+    hookHeaders() {
+      return this.integration.visible_properties;
+    },
+    hooks() {
+      if (!this.hasConnectedHooks) {
+        return [];
+      }
+      const { hooks } = this.integration;
+      return hooks.map(hook => ({
+        ...hook,
+        id: hook.id,
+        properties: this.hookHeaders.map(property =>
+          hook.settings[property] ? hook.settings[property] : '--'
+        ),
+      }));
+    },
+  },
+  mounted() {},
+  methods: {
+    inboxName(hook) {
+      return hook.inbox ? hook.inbox.name : '';
+    },
+  },
+};
+</script>
 <template>
   <div class="flex flex-row gap-4">
     <div class="w-full lg:w-3/5">
@@ -59,43 +99,3 @@
     </div>
   </div>
 </template>
-<script>
-import { mapGetters } from 'vuex';
-import hookMixin from './hookMixin';
-export default {
-  mixins: [hookMixin],
-  props: {
-    integration: {
-      type: Object,
-      default: () => ({}),
-    },
-  },
-  computed: {
-    ...mapGetters({
-      globalConfig: 'globalConfig/get',
-    }),
-    hookHeaders() {
-      return this.integration.visible_properties;
-    },
-    hooks() {
-      if (!this.hasConnectedHooks) {
-        return [];
-      }
-      const { hooks } = this.integration;
-      return hooks.map(hook => ({
-        ...hook,
-        id: hook.id,
-        properties: this.hookHeaders.map(property =>
-          hook.settings[property] ? hook.settings[property] : '--'
-        ),
-      }));
-    },
-  },
-  mounted() {},
-  methods: {
-    inboxName(hook) {
-      return hook.inbox ? hook.inbox.name : '';
-    },
-  },
-};
-</script>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/integrations/NewHook.vue b/app/javascript/dashboard/routes/dashboard/settings/integrations/NewHook.vue
index 0a0aec841..c8032b9c7 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/integrations/NewHook.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/integrations/NewHook.vue
@@ -1,42 +1,4 @@
 <!-- eslint-disable vue/v-slot-style -->
-<template>
-  <div class="flex flex-col h-auto overflow-auto integration-hooks">
-    <woot-modal-header
-      :header-title="integration.name"
-      :header-content="integration.description"
-    />
-    <formulate-form
-      #default="{ hasErrors }"
-      v-model="values"
-      class="w-full"
-      @submit="submitForm"
-    >
-      <formulate-input
-        v-for="item in formItems"
-        :key="item.name"
-        v-bind="item"
-      />
-      <formulate-input
-        v-if="isHookTypeInbox"
-        :options="inboxes"
-        type="select"
-        name="inbox"
-        :placeholder="$t('INTEGRATION_APPS.ADD.FORM.INBOX.LABEL')"
-        :label="$t('INTEGRATION_APPS.ADD.FORM.INBOX.PLACEHOLDER')"
-        validation="required"
-        validation-name="Inbox"
-      />
-      <div class="flex flex-row justify-end w-full gap-2 px-0 py-2">
-        <woot-button :disabled="hasErrors" :loading="uiFlags.isCreatingHook">
-          {{ $t('INTEGRATION_APPS.ADD.FORM.SUBMIT') }}
-        </woot-button>
-        <woot-button class="button clear" @click.prevent="onClose">
-          {{ $t('INTEGRATION_APPS.ADD.FORM.CANCEL') }}
-        </woot-button>
-      </div>
-    </formulate-form>
-  </div>
-</template>
 <script>
 import { mapGetters } from 'vuex';
 import { useAlert } from 'dashboard/composables';
@@ -137,3 +99,41 @@ export default {
   },
 };
 </script>
+<template>
+  <div class="flex flex-col h-auto overflow-auto integration-hooks">
+    <woot-modal-header
+      :header-title="integration.name"
+      :header-content="integration.description"
+    />
+    <formulate-form
+      v-slot="{ hasErrors }"
+      v-model="values"
+      class="w-full"
+      @submit="submitForm"
+    >
+      <formulate-input
+        v-for="item in formItems"
+        :key="item.name"
+        v-bind="item"
+      />
+      <formulate-input
+        v-if="isHookTypeInbox"
+        :options="inboxes"
+        type="select"
+        name="inbox"
+        :placeholder="$t('INTEGRATION_APPS.ADD.FORM.INBOX.LABEL')"
+        :label="$t('INTEGRATION_APPS.ADD.FORM.INBOX.PLACEHOLDER')"
+        validation="required"
+        validation-name="Inbox"
+      />
+      <div class="flex flex-row justify-end w-full gap-2 px-0 py-2">
+        <woot-button :disabled="hasErrors" :loading="uiFlags.isCreatingHook">
+          {{ $t('INTEGRATION_APPS.ADD.FORM.SUBMIT') }}
+        </woot-button>
+        <woot-button class="button clear" @click.prevent="onClose">
+          {{ $t('INTEGRATION_APPS.ADD.FORM.CANCEL') }}
+        </woot-button>
+      </div>
+    </formulate-form>
+  </div>
+</template>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/integrations/ShowIntegration.vue b/app/javascript/dashboard/routes/dashboard/settings/integrations/ShowIntegration.vue
index d9f5e5d9e..5ffc8cb28 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/integrations/ShowIntegration.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/integrations/ShowIntegration.vue
@@ -1,32 +1,3 @@
-<template>
-  <div class="flex-shrink flex-grow overflow-auto p-4">
-    <div class="flex flex-col">
-      <div class="flex flex-col">
-        <div>
-          <div
-            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-id="integration.id"
-              :integration-logo="integration.logo"
-              :integration-name="integration.name"
-              :integration-description="integration.description"
-              :integration-enabled="integration.enabled"
-              :integration-action="integrationAction()"
-            />
-          </div>
-          <div
-            v-if="integration.enabled"
-            class="bg-white dark:bg-slate-800 border border-solid border-slate-75 dark:border-slate-700/50 rounded-sm mb-4 p-4"
-          >
-            <IntegrationHelpText />
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
 <script>
 import { mapGetters } from 'vuex';
 import globalConfigMixin from 'shared/mixins/globalConfigMixin';
@@ -81,3 +52,32 @@ export default {
   },
 };
 </script>
+<template>
+  <div class="flex-shrink flex-grow overflow-auto p-4">
+    <div class="flex flex-col">
+      <div class="flex flex-col">
+        <div>
+          <div
+            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-id="integration.id"
+              :integration-logo="integration.logo"
+              :integration-name="integration.name"
+              :integration-description="integration.description"
+              :integration-enabled="integration.enabled"
+              :integration-action="integrationAction()"
+            />
+          </div>
+          <div
+            v-if="integration.enabled"
+            class="bg-white dark:bg-slate-800 border border-solid border-slate-75 dark:border-slate-700/50 rounded-sm mb-4 p-4"
+          >
+            <IntegrationHelpText />
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/integrations/SingleIntegrationHooks.vue b/app/javascript/dashboard/routes/dashboard/settings/integrations/SingleIntegrationHooks.vue
index b26cfd229..6937a232c 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/integrations/SingleIntegrationHooks.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/integrations/SingleIntegrationHooks.vue
@@ -1,3 +1,15 @@
+<script>
+import hookMixin from './hookMixin';
+export default {
+  mixins: [hookMixin],
+  props: {
+    integration: {
+      type: Object,
+      default: () => ({}),
+    },
+  },
+};
+</script>
 <template>
   <div class="flex-shrink flex-grow overflow-auto p-4">
     <div class="flex flex-col">
@@ -40,15 +52,3 @@
     </div>
   </div>
 </template>
-<script>
-import hookMixin from './hookMixin';
-export default {
-  mixins: [hookMixin],
-  props: {
-    integration: {
-      type: Object,
-      default: () => ({}),
-    },
-  },
-};
-</script>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/integrations/Slack.vue b/app/javascript/dashboard/routes/dashboard/settings/integrations/Slack.vue
index 24dc2993a..349dd921f 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/integrations/Slack.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/integrations/Slack.vue
@@ -1,39 +1,3 @@
-<template>
-  <div
-    v-if="integrationLoaded && !uiFlags.isCreatingSlack"
-    class="flex flex-col flex-1 overflow-auto"
-  >
-    <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-id="integration.id"
-        :integration-logo="integration.logo"
-        :integration-name="integration.name"
-        :integration-description="integration.description"
-        :integration-enabled="integration.enabled"
-        :integration-action="integrationAction"
-        :action-button-text="$t('INTEGRATION_SETTINGS.SLACK.DELETE')"
-        :delete-confirmation-text="{
-          title: $t('INTEGRATION_SETTINGS.SLACK.DELETE_CONFIRMATION.TITLE'),
-          message: $t('INTEGRATION_SETTINGS.SLACK.DELETE_CONFIRMATION.MESSAGE'),
-        }"
-      />
-    </div>
-    <div v-if="areHooksAvailable" class="p-6 flex-1">
-      <select-channel-warning
-        v-if="!isIntegrationHookEnabled"
-        :has-connected-a-channel="hasConnectedAChannel"
-      />
-      <slack-integration-help-text
-        :selected-channel-name="selectedChannelName"
-      />
-    </div>
-  </div>
-  <div v-else class="flex flex-1 items-center justify-center">
-    <spinner size="" color-scheme="primary" />
-  </div>
-</template>
 <script>
 import { mapGetters } from 'vuex';
 import globalConfigMixin from 'shared/mixins/globalConfigMixin';
@@ -113,3 +77,39 @@ export default {
   },
 };
 </script>
+<template>
+  <div
+    v-if="integrationLoaded && !uiFlags.isCreatingSlack"
+    class="flex flex-col flex-1 overflow-auto"
+  >
+    <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-id="integration.id"
+        :integration-logo="integration.logo"
+        :integration-name="integration.name"
+        :integration-description="integration.description"
+        :integration-enabled="integration.enabled"
+        :integration-action="integrationAction"
+        :action-button-text="$t('INTEGRATION_SETTINGS.SLACK.DELETE')"
+        :delete-confirmation-text="{
+          title: $t('INTEGRATION_SETTINGS.SLACK.DELETE_CONFIRMATION.TITLE'),
+          message: $t('INTEGRATION_SETTINGS.SLACK.DELETE_CONFIRMATION.MESSAGE'),
+        }"
+      />
+    </div>
+    <div v-if="areHooksAvailable" class="p-6 flex-1">
+      <select-channel-warning
+        v-if="!isIntegrationHookEnabled"
+        :has-connected-a-channel="hasConnectedAChannel"
+      />
+      <slack-integration-help-text
+        :selected-channel-name="selectedChannelName"
+      />
+    </div>
+  </div>
+  <div v-else class="flex flex-1 items-center justify-center">
+    <spinner size="" color-scheme="primary" />
+  </div>
+</template>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/integrations/Slack/SelectChannelWarning.vue b/app/javascript/dashboard/routes/dashboard/settings/integrations/Slack/SelectChannelWarning.vue
index d795eb364..42dee32d6 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/integrations/Slack/SelectChannelWarning.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/integrations/Slack/SelectChannelWarning.vue
@@ -1,3 +1,56 @@
+<script>
+import { mapGetters } from 'vuex';
+import { useAlert } from 'dashboard/composables';
+import globalConfigMixin from 'shared/mixins/globalConfigMixin';
+import messageFormatterMixin from 'shared/mixins/messageFormatterMixin';
+
+export default {
+  mixins: [globalConfigMixin, messageFormatterMixin],
+  props: {
+    hasConnectedAChannel: {
+      type: Boolean,
+      default: true,
+    },
+  },
+  data() {
+    return { selectedChannelId: '', availableChannels: [] };
+  },
+  computed: {
+    ...mapGetters({
+      globalConfig: 'globalConfig/get',
+      uiFlags: 'integrations/getUIFlags',
+    }),
+    errorDescription() {
+      return !this.hasConnectedAChannel
+        ? this.$t('INTEGRATION_SETTINGS.SLACK.SELECT_CHANNEL.DESCRIPTION')
+        : this.$t('INTEGRATION_SETTINGS.SLACK.SELECT_CHANNEL.EXPIRED');
+    },
+  },
+  methods: {
+    async fetchChannels() {
+      try {
+        this.availableChannels = await this.$store.dispatch(
+          'integrations/listAllSlackChannels'
+        );
+        this.availableChannels.sort((c1, c2) => c1.name - c2.name);
+      } catch {
+        this.$t('INTEGRATION_SETTINGS.SLACK.FAILED_TO_FETCH_CHANNELS');
+        this.availableChannels = [];
+      }
+    },
+    async updateIntegration() {
+      try {
+        await this.$store.dispatch('integrations/updateSlack', {
+          referenceId: this.selectedChannelId,
+        });
+        useAlert(this.$t('INTEGRATION_SETTINGS.SLACK.UPDATE_SUCCESS'));
+      } catch (error) {
+        useAlert(error.message || 'INTEGRATION_SETTINGS.SLACK.UPDATE_ERROR');
+      }
+    },
+  },
+};
+</script>
 <template>
   <div
     class="px-6 py-4 mb-4 border border-yellow-200 rounded-md bg-yellow-50 dark:border-slate-700 dark:bg-slate-800"
@@ -71,56 +124,3 @@
     </div>
   </div>
 </template>
-<script>
-import { mapGetters } from 'vuex';
-import { useAlert } from 'dashboard/composables';
-import globalConfigMixin from 'shared/mixins/globalConfigMixin';
-import messageFormatterMixin from 'shared/mixins/messageFormatterMixin';
-
-export default {
-  mixins: [globalConfigMixin, messageFormatterMixin],
-  props: {
-    hasConnectedAChannel: {
-      type: Boolean,
-      default: true,
-    },
-  },
-  data() {
-    return { selectedChannelId: '', availableChannels: [] };
-  },
-  computed: {
-    ...mapGetters({
-      globalConfig: 'globalConfig/get',
-      uiFlags: 'integrations/getUIFlags',
-    }),
-    errorDescription() {
-      return !this.hasConnectedAChannel
-        ? this.$t('INTEGRATION_SETTINGS.SLACK.SELECT_CHANNEL.DESCRIPTION')
-        : this.$t('INTEGRATION_SETTINGS.SLACK.SELECT_CHANNEL.EXPIRED');
-    },
-  },
-  methods: {
-    async fetchChannels() {
-      try {
-        this.availableChannels = await this.$store.dispatch(
-          'integrations/listAllSlackChannels'
-        );
-        this.availableChannels.sort((c1, c2) => c1.name - c2.name);
-      } catch {
-        this.$t('INTEGRATION_SETTINGS.SLACK.FAILED_TO_FETCH_CHANNELS');
-        this.availableChannels = [];
-      }
-    },
-    async updateIntegration() {
-      try {
-        await this.$store.dispatch('integrations/updateSlack', {
-          referenceId: this.selectedChannelId,
-        });
-        useAlert(this.$t('INTEGRATION_SETTINGS.SLACK.UPDATE_SUCCESS'));
-      } catch (error) {
-        useAlert(error.message || 'INTEGRATION_SETTINGS.SLACK.UPDATE_ERROR');
-      }
-    },
-  },
-};
-</script>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/integrations/Slack/SlackIntegrationHelpText.vue b/app/javascript/dashboard/routes/dashboard/settings/integrations/Slack/SlackIntegrationHelpText.vue
index 9a0476f13..5c02e688a 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/integrations/Slack/SlackIntegrationHelpText.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/integrations/Slack/SlackIntegrationHelpText.vue
@@ -1,3 +1,15 @@
+<script>
+import messageFormatterMixin from 'shared/mixins/messageFormatterMixin';
+export default {
+  mixins: [messageFormatterMixin],
+  props: {
+    selectedChannelName: {
+      type: String,
+      required: true,
+    },
+  },
+};
+</script>
 <template>
   <div
     class="flex-1 w-full p-6 bg-white rounded-md border border-slate-50 dark:border-slate-700 dark:bg-slate-800 dark:text-slate-200"
@@ -21,15 +33,3 @@
     </div>
   </div>
 </template>
-<script>
-import messageFormatterMixin from 'shared/mixins/messageFormatterMixin';
-export default {
-  mixins: [messageFormatterMixin],
-  props: {
-    selectedChannelName: {
-      type: String,
-      required: true,
-    },
-  },
-};
-</script>
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 6b1a99d83..ccb951157 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/integrations/Webhooks/EditWebHook.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/integrations/Webhooks/EditWebHook.vue
@@ -1,18 +1,3 @@
-<template>
-  <div class="flex flex-col h-auto overflow-auto">
-    <woot-modal-header
-      :header-title="$t('INTEGRATION_SETTINGS.WEBHOOK.EDIT.TITLE')"
-    />
-    <webhook-form
-      :value="value"
-      :is-submitting="uiFlags.updatingItem"
-      :submit-label="$t('INTEGRATION_SETTINGS.WEBHOOK.FORM.EDIT_SUBMIT')"
-      @submit="onSubmit"
-      @cancel="onClose"
-    />
-  </div>
-</template>
-
 <script>
 import { useAlert } from 'dashboard/composables';
 import { mapGetters } from 'vuex';
@@ -58,3 +43,18 @@ export default {
   },
 };
 </script>
+
+<template>
+  <div class="flex flex-col h-auto overflow-auto">
+    <woot-modal-header
+      :header-title="$t('INTEGRATION_SETTINGS.WEBHOOK.EDIT.TITLE')"
+    />
+    <webhook-form
+      :value="value"
+      :is-submitting="uiFlags.updatingItem"
+      :submit-label="$t('INTEGRATION_SETTINGS.WEBHOOK.FORM.EDIT_SUBMIT')"
+      @submit="onSubmit"
+      @cancel="onClose"
+    />
+  </div>
+</template>
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 2512edf34..251753f77 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/integrations/Webhooks/Index.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/integrations/Webhooks/Index.vue
@@ -1,3 +1,78 @@
+<script>
+import { mapGetters } from 'vuex';
+import { useAlert } from 'dashboard/composables';
+import NewWebhook from './NewWebHook.vue';
+import EditWebhook from './EditWebHook.vue';
+import globalConfigMixin from 'shared/mixins/globalConfigMixin';
+import WebhookRow from './WebhookRow.vue';
+
+export default {
+  components: {
+    NewWebhook,
+    EditWebhook,
+    WebhookRow,
+  },
+  mixins: [globalConfigMixin],
+  data() {
+    return {
+      loading: {},
+      showAddPopup: false,
+      showEditPopup: false,
+      showDeleteConfirmationPopup: false,
+      selectedWebHook: {},
+    };
+  },
+  computed: {
+    ...mapGetters({
+      records: 'webhooks/getWebhooks',
+      uiFlags: 'webhooks/getUIFlags',
+      globalConfig: 'globalConfig/get',
+    }),
+  },
+  mounted() {
+    this.$store.dispatch('webhooks/get');
+  },
+  methods: {
+    openAddPopup() {
+      this.showAddPopup = true;
+    },
+    hideAddPopup() {
+      this.showAddPopup = false;
+    },
+    openDeletePopup(response) {
+      this.showDeleteConfirmationPopup = true;
+      this.selectedWebHook = response;
+    },
+    closeDeletePopup() {
+      this.showDeleteConfirmationPopup = false;
+    },
+    openEditPopup(webhook) {
+      this.showEditPopup = true;
+      this.selectedWebHook = webhook;
+    },
+    hideEditPopup() {
+      this.showEditPopup = false;
+    },
+    confirmDeletion() {
+      this.loading[this.selectedWebHook.id] = true;
+      this.closeDeletePopup();
+      this.deleteWebhook(this.selectedWebHook.id);
+    },
+    async deleteWebhook(id) {
+      try {
+        await this.$store.dispatch('webhooks/delete', id);
+        useAlert(
+          this.$t('INTEGRATION_SETTINGS.WEBHOOK.DELETE.API.SUCCESS_MESSAGE')
+        );
+      } catch (error) {
+        useAlert(
+          this.$t('INTEGRATION_SETTINGS.WEBHOOK.DELETE.API.ERROR_MESSAGE')
+        );
+      }
+    },
+  },
+};
+</script>
 <template>
   <div class="flex-1 p-4 overflow-auto">
     <woot-button
@@ -89,78 +164,3 @@
     />
   </div>
 </template>
-<script>
-import { mapGetters } from 'vuex';
-import { useAlert } from 'dashboard/composables';
-import NewWebhook from './NewWebHook.vue';
-import EditWebhook from './EditWebHook.vue';
-import globalConfigMixin from 'shared/mixins/globalConfigMixin';
-import WebhookRow from './WebhookRow.vue';
-
-export default {
-  components: {
-    NewWebhook,
-    EditWebhook,
-    WebhookRow,
-  },
-  mixins: [globalConfigMixin],
-  data() {
-    return {
-      loading: {},
-      showAddPopup: false,
-      showEditPopup: false,
-      showDeleteConfirmationPopup: false,
-      selectedWebHook: {},
-    };
-  },
-  computed: {
-    ...mapGetters({
-      records: 'webhooks/getWebhooks',
-      uiFlags: 'webhooks/getUIFlags',
-      globalConfig: 'globalConfig/get',
-    }),
-  },
-  mounted() {
-    this.$store.dispatch('webhooks/get');
-  },
-  methods: {
-    openAddPopup() {
-      this.showAddPopup = true;
-    },
-    hideAddPopup() {
-      this.showAddPopup = false;
-    },
-    openDeletePopup(response) {
-      this.showDeleteConfirmationPopup = true;
-      this.selectedWebHook = response;
-    },
-    closeDeletePopup() {
-      this.showDeleteConfirmationPopup = false;
-    },
-    openEditPopup(webhook) {
-      this.showEditPopup = true;
-      this.selectedWebHook = webhook;
-    },
-    hideEditPopup() {
-      this.showEditPopup = false;
-    },
-    confirmDeletion() {
-      this.loading[this.selectedWebHook.id] = true;
-      this.closeDeletePopup();
-      this.deleteWebhook(this.selectedWebHook.id);
-    },
-    async deleteWebhook(id) {
-      try {
-        await this.$store.dispatch('webhooks/delete', id);
-        useAlert(
-          this.$t('INTEGRATION_SETTINGS.WEBHOOK.DELETE.API.SUCCESS_MESSAGE')
-        );
-      } catch (error) {
-        useAlert(
-          this.$t('INTEGRATION_SETTINGS.WEBHOOK.DELETE.API.ERROR_MESSAGE')
-        );
-      }
-    },
-  },
-};
-</script>
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 2513f931a..d16606a44 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/integrations/Webhooks/NewWebHook.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/integrations/Webhooks/NewWebHook.vue
@@ -1,23 +1,3 @@
-<template>
-  <div class="h-auto overflow-auto flex flex-col">
-    <woot-modal-header
-      :header-title="$t('INTEGRATION_SETTINGS.WEBHOOK.ADD.TITLE')"
-      :header-content="
-        useInstallationName(
-          $t('INTEGRATION_SETTINGS.WEBHOOK.FORM.DESC'),
-          globalConfig.installationName
-        )
-      "
-    />
-    <webhook-form
-      :is-submitting="uiFlags.creatingItem"
-      :submit-label="$t('INTEGRATION_SETTINGS.WEBHOOK.FORM.ADD_SUBMIT')"
-      @submit="onSubmit"
-      @cancel="onClose"
-    />
-  </div>
-</template>
-
 <script>
 import { useAlert } from 'dashboard/composables';
 import globalConfigMixin from 'shared/mixins/globalConfigMixin';
@@ -57,3 +37,23 @@ export default {
   },
 };
 </script>
+
+<template>
+  <div class="h-auto overflow-auto flex flex-col">
+    <woot-modal-header
+      :header-title="$t('INTEGRATION_SETTINGS.WEBHOOK.ADD.TITLE')"
+      :header-content="
+        useInstallationName(
+          $t('INTEGRATION_SETTINGS.WEBHOOK.FORM.DESC'),
+          globalConfig.installationName
+        )
+      "
+    />
+    <webhook-form
+      :is-submitting="uiFlags.creatingItem"
+      :submit-label="$t('INTEGRATION_SETTINGS.WEBHOOK.FORM.ADD_SUBMIT')"
+      @submit="onSubmit"
+      @cancel="onClose"
+    />
+  </div>
+</template>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/integrations/Webhooks/WebhookForm.vue b/app/javascript/dashboard/routes/dashboard/settings/integrations/Webhooks/WebhookForm.vue
index 8e35c0405..7b95ae685 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/integrations/Webhooks/WebhookForm.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/integrations/Webhooks/WebhookForm.vue
@@ -1,59 +1,3 @@
-<template>
-  <form class="flex flex-col w-full" @submit.prevent="onSubmit">
-    <div class="w-full">
-      <label :class="{ error: v$.url.$error }">
-        {{ $t('INTEGRATION_SETTINGS.WEBHOOK.FORM.END_POINT.LABEL') }}
-        <input
-          v-model.trim="url"
-          type="text"
-          name="url"
-          :placeholder="webhookURLInputPlaceholder"
-          @input="v$.url.$touch"
-        />
-        <span v-if="v$.url.$error" class="message">
-          {{ $t('INTEGRATION_SETTINGS.WEBHOOK.FORM.END_POINT.ERROR') }}
-        </span>
-      </label>
-      <label :class="{ error: v$.url.$error }" class="mb-2">
-        {{ $t('INTEGRATION_SETTINGS.WEBHOOK.FORM.SUBSCRIPTIONS.LABEL') }}
-      </label>
-      <div class="flex flex-col gap-2.5 mb-4">
-        <div
-          v-for="event in supportedWebhookEvents"
-          :key="event"
-          class="flex items-center"
-        >
-          <input
-            :id="event"
-            v-model="subscriptions"
-            type="checkbox"
-            :value="event"
-            name="subscriptions"
-            class="checkbox"
-          />
-          <label :for="event" class="text-sm">
-            {{ `${getEventLabel(event)} (${event})` }}
-          </label>
-        </div>
-      </div>
-    </div>
-
-    <div class="flex flex-row justify-end gap-2 py-2 px-0 w-full">
-      <div class="w-full">
-        <woot-button
-          :disabled="v$.$invalid || isSubmitting"
-          :is-loading="isSubmitting"
-        >
-          {{ submitLabel }}
-        </woot-button>
-        <woot-button class="button clear" @click.prevent="$emit('cancel')">
-          {{ $t('INTEGRATION_SETTINGS.WEBHOOK.FORM.CANCEL') }}
-        </woot-button>
-      </div>
-    </div>
-  </form>
-</template>
-
 <script>
 import { useVuelidate } from '@vuelidate/core';
 import { required, url, minLength } from '@vuelidate/validators';
@@ -129,6 +73,62 @@ export default {
   },
 };
 </script>
+
+<template>
+  <form class="flex flex-col w-full" @submit.prevent="onSubmit">
+    <div class="w-full">
+      <label :class="{ error: v$.url.$error }">
+        {{ $t('INTEGRATION_SETTINGS.WEBHOOK.FORM.END_POINT.LABEL') }}
+        <input
+          v-model.trim="url"
+          type="text"
+          name="url"
+          :placeholder="webhookURLInputPlaceholder"
+          @input="v$.url.$touch"
+        />
+        <span v-if="v$.url.$error" class="message">
+          {{ $t('INTEGRATION_SETTINGS.WEBHOOK.FORM.END_POINT.ERROR') }}
+        </span>
+      </label>
+      <label :class="{ error: v$.url.$error }" class="mb-2">
+        {{ $t('INTEGRATION_SETTINGS.WEBHOOK.FORM.SUBSCRIPTIONS.LABEL') }}
+      </label>
+      <div class="flex flex-col gap-2.5 mb-4">
+        <div
+          v-for="event in supportedWebhookEvents"
+          :key="event"
+          class="flex items-center"
+        >
+          <input
+            :id="event"
+            v-model="subscriptions"
+            type="checkbox"
+            :value="event"
+            name="subscriptions"
+            class="checkbox"
+          />
+          <label :for="event" class="text-sm">
+            {{ `${getEventLabel(event)} (${event})` }}
+          </label>
+        </div>
+      </div>
+    </div>
+
+    <div class="flex flex-row justify-end gap-2 py-2 px-0 w-full">
+      <div class="w-full">
+        <woot-button
+          :disabled="v$.$invalid || isSubmitting"
+          :is-loading="isSubmitting"
+        >
+          {{ submitLabel }}
+        </woot-button>
+        <woot-button class="button clear" @click.prevent="$emit('cancel')">
+          {{ $t('INTEGRATION_SETTINGS.WEBHOOK.FORM.CANCEL') }}
+        </woot-button>
+      </div>
+    </div>
+  </form>
+</template>
 <style lang="scss" scoped>
 .checkbox {
   @apply mr-2;
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 b27cb6162..5ab9202d5 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/integrations/Webhooks/WebhookRow.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/integrations/Webhooks/WebhookRow.vue
@@ -1,3 +1,28 @@
+<script>
+import webhookMixin from './webhookMixin';
+import ShowMore from 'dashboard/components/widgets/ShowMore.vue';
+
+export default {
+  components: { ShowMore },
+  mixins: [webhookMixin],
+  props: {
+    webhook: {
+      type: Object,
+      required: true,
+    },
+    index: {
+      type: Number,
+      required: true,
+    },
+  },
+  computed: {
+    subscribedEvents() {
+      const { subscriptions } = this.webhook;
+      return subscriptions.map(event => this.getEventLabel(event)).join(', ');
+    },
+  },
+};
+</script>
 <template>
   <tr class="space-x-2">
     <td class="max-w-2xl">
@@ -31,28 +56,3 @@
     </td>
   </tr>
 </template>
-<script>
-import webhookMixin from './webhookMixin';
-import ShowMore from 'dashboard/components/widgets/ShowMore.vue';
-
-export default {
-  components: { ShowMore },
-  mixins: [webhookMixin],
-  props: {
-    webhook: {
-      type: Object,
-      required: true,
-    },
-    index: {
-      type: Number,
-      required: true,
-    },
-  },
-  computed: {
-    subscribedEvents() {
-      const { subscriptions } = this.webhook;
-      return subscriptions.map(event => this.getEventLabel(event)).join(', ');
-    },
-  },
-};
-</script>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/labels/AddLabel.vue b/app/javascript/dashboard/routes/dashboard/settings/labels/AddLabel.vue
index ecfd4bd45..e9c474369 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/labels/AddLabel.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/labels/AddLabel.vue
@@ -1,59 +1,3 @@
-<template>
-  <div class="flex flex-col h-auto overflow-auto">
-    <woot-modal-header
-      :header-title="$t('LABEL_MGMT.ADD.TITLE')"
-      :header-content="$t('LABEL_MGMT.ADD.DESC')"
-    />
-    <form class="flex flex-wrap mx-0" @submit.prevent="addLabel">
-      <woot-input
-        v-model.trim="title"
-        :class="{ error: v$.title.$error }"
-        class="w-full label-name--input"
-        :label="$t('LABEL_MGMT.FORM.NAME.LABEL')"
-        :placeholder="$t('LABEL_MGMT.FORM.NAME.PLACEHOLDER')"
-        :error="labelTitleErrorMessage"
-        data-testid="label-title"
-        @input="v$.title.$touch"
-      />
-
-      <woot-input
-        v-model.trim="description"
-        :class="{ error: v$.description.$error }"
-        class="w-full"
-        :label="$t('LABEL_MGMT.FORM.DESCRIPTION.LABEL')"
-        :placeholder="$t('LABEL_MGMT.FORM.DESCRIPTION.PLACEHOLDER')"
-        data-testid="label-description"
-        @input="v$.description.$touch"
-      />
-
-      <div class="w-full">
-        <label>
-          {{ $t('LABEL_MGMT.FORM.COLOR.LABEL') }}
-          <woot-color-picker v-model="color" />
-        </label>
-      </div>
-      <div class="flex items-center w-full gap-2">
-        <input v-model="showOnSidebar" type="checkbox" :value="true" />
-        <label for="conversation_creation">
-          {{ $t('LABEL_MGMT.FORM.SHOW_ON_SIDEBAR.LABEL') }}
-        </label>
-      </div>
-      <div class="flex items-center justify-end w-full gap-2 px-0 py-2">
-        <woot-button
-          :is-disabled="v$.title.$invalid || uiFlags.isCreating"
-          :is-loading="uiFlags.isCreating"
-          data-testid="label-submit"
-        >
-          {{ $t('LABEL_MGMT.FORM.CREATE') }}
-        </woot-button>
-        <woot-button class="button clear" @click.prevent="onClose">
-          {{ $t('LABEL_MGMT.FORM.CANCEL') }}
-        </woot-button>
-      </div>
-    </form>
-  </div>
-</template>
-
 <script>
 import { mapGetters } from 'vuex';
 import { useAlert } from 'dashboard/composables';
@@ -116,6 +60,62 @@ export default {
   },
 };
 </script>
+
+<template>
+  <div class="flex flex-col h-auto overflow-auto">
+    <woot-modal-header
+      :header-title="$t('LABEL_MGMT.ADD.TITLE')"
+      :header-content="$t('LABEL_MGMT.ADD.DESC')"
+    />
+    <form class="flex flex-wrap mx-0" @submit.prevent="addLabel">
+      <woot-input
+        v-model.trim="title"
+        :class="{ error: v$.title.$error }"
+        class="w-full label-name--input"
+        :label="$t('LABEL_MGMT.FORM.NAME.LABEL')"
+        :placeholder="$t('LABEL_MGMT.FORM.NAME.PLACEHOLDER')"
+        :error="labelTitleErrorMessage"
+        data-testid="label-title"
+        @input="v$.title.$touch"
+      />
+
+      <woot-input
+        v-model.trim="description"
+        :class="{ error: v$.description.$error }"
+        class="w-full"
+        :label="$t('LABEL_MGMT.FORM.DESCRIPTION.LABEL')"
+        :placeholder="$t('LABEL_MGMT.FORM.DESCRIPTION.PLACEHOLDER')"
+        data-testid="label-description"
+        @input="v$.description.$touch"
+      />
+
+      <div class="w-full">
+        <label>
+          {{ $t('LABEL_MGMT.FORM.COLOR.LABEL') }}
+          <woot-color-picker v-model="color" />
+        </label>
+      </div>
+      <div class="flex items-center w-full gap-2">
+        <input v-model="showOnSidebar" type="checkbox" :value="true" />
+        <label for="conversation_creation">
+          {{ $t('LABEL_MGMT.FORM.SHOW_ON_SIDEBAR.LABEL') }}
+        </label>
+      </div>
+      <div class="flex items-center justify-end w-full gap-2 px-0 py-2">
+        <woot-button
+          :is-disabled="v$.title.$invalid || uiFlags.isCreating"
+          :is-loading="uiFlags.isCreating"
+          data-testid="label-submit"
+        >
+          {{ $t('LABEL_MGMT.FORM.CREATE') }}
+        </woot-button>
+        <woot-button class="button clear" @click.prevent="onClose">
+          {{ $t('LABEL_MGMT.FORM.CANCEL') }}
+        </woot-button>
+      </div>
+    </form>
+  </div>
+</template>
 <style lang="scss" scoped>
 // Label API supports only lowercase letters
 .label-name--input {
diff --git a/app/javascript/dashboard/routes/dashboard/settings/labels/EditLabel.vue b/app/javascript/dashboard/routes/dashboard/settings/labels/EditLabel.vue
index fbe0257ce..05b8b24cc 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/labels/EditLabel.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/labels/EditLabel.vue
@@ -1,52 +1,3 @@
-<template>
-  <div class="flex flex-col h-auto overflow-auto">
-    <woot-modal-header :header-title="pageTitle" />
-    <form class="flex flex-wrap mx-0" @submit.prevent="editLabel">
-      <woot-input
-        v-model.trim="title"
-        :class="{ error: v$.title.$error }"
-        class="w-full label-name--input"
-        :label="$t('LABEL_MGMT.FORM.NAME.LABEL')"
-        :placeholder="$t('LABEL_MGMT.FORM.NAME.PLACEHOLDER')"
-        :error="labelTitleErrorMessage"
-        @input="v$.title.$touch"
-      />
-      <woot-input
-        v-model.trim="description"
-        :class="{ error: v$.description.$error }"
-        class="w-full"
-        :label="$t('LABEL_MGMT.FORM.DESCRIPTION.LABEL')"
-        :placeholder="$t('LABEL_MGMT.FORM.DESCRIPTION.PLACEHOLDER')"
-        @input="v$.description.$touch"
-      />
-
-      <div class="w-full">
-        <label>
-          {{ $t('LABEL_MGMT.FORM.COLOR.LABEL') }}
-          <woot-color-picker v-model="color" />
-        </label>
-      </div>
-      <div class="flex items-center w-full gap-2">
-        <input v-model="showOnSidebar" type="checkbox" :value="true" />
-        <label for="conversation_creation">
-          {{ $t('LABEL_MGMT.FORM.SHOW_ON_SIDEBAR.LABEL') }}
-        </label>
-      </div>
-      <div class="flex items-center justify-end w-full gap-2 px-0 py-2">
-        <woot-button
-          :is-disabled="v$.title.$invalid || uiFlags.isUpdating"
-          :is-loading="uiFlags.isUpdating"
-        >
-          {{ $t('LABEL_MGMT.FORM.EDIT') }}
-        </woot-button>
-        <woot-button class="button clear" @click.prevent="onClose">
-          {{ $t('LABEL_MGMT.FORM.CANCEL') }}
-        </woot-button>
-      </div>
-    </form>
-  </div>
-</template>
-
 <script>
 import { mapGetters } from 'vuex';
 import { useAlert } from 'dashboard/composables';
@@ -119,6 +70,55 @@ export default {
   },
 };
 </script>
+
+<template>
+  <div class="flex flex-col h-auto overflow-auto">
+    <woot-modal-header :header-title="pageTitle" />
+    <form class="flex flex-wrap mx-0" @submit.prevent="editLabel">
+      <woot-input
+        v-model.trim="title"
+        :class="{ error: v$.title.$error }"
+        class="w-full label-name--input"
+        :label="$t('LABEL_MGMT.FORM.NAME.LABEL')"
+        :placeholder="$t('LABEL_MGMT.FORM.NAME.PLACEHOLDER')"
+        :error="labelTitleErrorMessage"
+        @input="v$.title.$touch"
+      />
+      <woot-input
+        v-model.trim="description"
+        :class="{ error: v$.description.$error }"
+        class="w-full"
+        :label="$t('LABEL_MGMT.FORM.DESCRIPTION.LABEL')"
+        :placeholder="$t('LABEL_MGMT.FORM.DESCRIPTION.PLACEHOLDER')"
+        @input="v$.description.$touch"
+      />
+
+      <div class="w-full">
+        <label>
+          {{ $t('LABEL_MGMT.FORM.COLOR.LABEL') }}
+          <woot-color-picker v-model="color" />
+        </label>
+      </div>
+      <div class="flex items-center w-full gap-2">
+        <input v-model="showOnSidebar" type="checkbox" :value="true" />
+        <label for="conversation_creation">
+          {{ $t('LABEL_MGMT.FORM.SHOW_ON_SIDEBAR.LABEL') }}
+        </label>
+      </div>
+      <div class="flex items-center justify-end w-full gap-2 px-0 py-2">
+        <woot-button
+          :is-disabled="v$.title.$invalid || uiFlags.isUpdating"
+          :is-loading="uiFlags.isUpdating"
+        >
+          {{ $t('LABEL_MGMT.FORM.EDIT') }}
+        </woot-button>
+        <woot-button class="button clear" @click.prevent="onClose">
+          {{ $t('LABEL_MGMT.FORM.CANCEL') }}
+        </woot-button>
+      </div>
+    </form>
+  </div>
+</template>
 <style lang="scss" scoped>
 // Label API supports only lowercase letters
 .label-name--input {
diff --git a/app/javascript/dashboard/routes/dashboard/settings/labels/Index.vue b/app/javascript/dashboard/routes/dashboard/settings/labels/Index.vue
index d847edb80..78d4a02aa 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/labels/Index.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/labels/Index.vue
@@ -1,3 +1,88 @@
+<script>
+import { mapGetters } from 'vuex';
+import { useAlert } from 'dashboard/composables';
+
+import AddLabel from './AddLabel.vue';
+import EditLabel from './EditLabel.vue';
+
+export default {
+  components: {
+    AddLabel,
+    EditLabel,
+  },
+  data() {
+    return {
+      loading: {},
+      showAddPopup: false,
+      showEditPopup: false,
+      showDeleteConfirmationPopup: false,
+      selectedResponse: {},
+    };
+  },
+  computed: {
+    ...mapGetters({
+      records: 'labels/getLabels',
+      uiFlags: 'labels/getUIFlags',
+    }),
+    // Delete Modal
+    deleteConfirmText() {
+      return this.$t('LABEL_MGMT.DELETE.CONFIRM.YES');
+    },
+    deleteRejectText() {
+      return this.$t('LABEL_MGMT.DELETE.CONFIRM.NO');
+    },
+    deleteMessage() {
+      return ` ${this.selectedResponse.title}?`;
+    },
+  },
+  mounted() {
+    this.$store.dispatch('labels/get');
+  },
+  methods: {
+    openAddPopup() {
+      this.showAddPopup = true;
+    },
+    hideAddPopup() {
+      this.showAddPopup = false;
+    },
+
+    openEditPopup(response) {
+      this.showEditPopup = true;
+      this.selectedResponse = response;
+    },
+    hideEditPopup() {
+      this.showEditPopup = false;
+    },
+
+    openDeletePopup(response) {
+      this.showDeleteConfirmationPopup = true;
+      this.selectedResponse = response;
+    },
+    closeDeletePopup() {
+      this.showDeleteConfirmationPopup = false;
+    },
+
+    confirmDeletion() {
+      this.loading[this.selectedResponse.id] = true;
+      this.closeDeletePopup();
+      this.deleteLabel(this.selectedResponse.id);
+    },
+    deleteLabel(id) {
+      this.$store
+        .dispatch('labels/delete', id)
+        .then(() => {
+          useAlert(this.$t('LABEL_MGMT.DELETE.API.SUCCESS_MESSAGE'));
+        })
+        .catch(() => {
+          useAlert(this.$t('LABEL_MGMT.DELETE.API.ERROR_MESSAGE'));
+        })
+        .finally(() => {
+          this.loading[this.selectedResponse.id] = false;
+        });
+    },
+  },
+};
+</script>
 <template>
   <div class="flex-1 overflow-auto">
     <woot-button
@@ -100,91 +185,6 @@
     />
   </div>
 </template>
-<script>
-import { mapGetters } from 'vuex';
-import { useAlert } from 'dashboard/composables';
-
-import AddLabel from './AddLabel.vue';
-import EditLabel from './EditLabel.vue';
-
-export default {
-  components: {
-    AddLabel,
-    EditLabel,
-  },
-  data() {
-    return {
-      loading: {},
-      showAddPopup: false,
-      showEditPopup: false,
-      showDeleteConfirmationPopup: false,
-      selectedResponse: {},
-    };
-  },
-  computed: {
-    ...mapGetters({
-      records: 'labels/getLabels',
-      uiFlags: 'labels/getUIFlags',
-    }),
-    // Delete Modal
-    deleteConfirmText() {
-      return this.$t('LABEL_MGMT.DELETE.CONFIRM.YES');
-    },
-    deleteRejectText() {
-      return this.$t('LABEL_MGMT.DELETE.CONFIRM.NO');
-    },
-    deleteMessage() {
-      return ` ${this.selectedResponse.title}?`;
-    },
-  },
-  mounted() {
-    this.$store.dispatch('labels/get');
-  },
-  methods: {
-    openAddPopup() {
-      this.showAddPopup = true;
-    },
-    hideAddPopup() {
-      this.showAddPopup = false;
-    },
-
-    openEditPopup(response) {
-      this.showEditPopup = true;
-      this.selectedResponse = response;
-    },
-    hideEditPopup() {
-      this.showEditPopup = false;
-    },
-
-    openDeletePopup(response) {
-      this.showDeleteConfirmationPopup = true;
-      this.selectedResponse = response;
-    },
-    closeDeletePopup() {
-      this.showDeleteConfirmationPopup = false;
-    },
-
-    confirmDeletion() {
-      this.loading[this.selectedResponse.id] = true;
-      this.closeDeletePopup();
-      this.deleteLabel(this.selectedResponse.id);
-    },
-    deleteLabel(id) {
-      this.$store
-        .dispatch('labels/delete', id)
-        .then(() => {
-          useAlert(this.$t('LABEL_MGMT.DELETE.API.SUCCESS_MESSAGE'));
-        })
-        .catch(() => {
-          useAlert(this.$t('LABEL_MGMT.DELETE.API.ERROR_MESSAGE'));
-        })
-        .finally(() => {
-          this.loading[this.selectedResponse.id] = false;
-        });
-    },
-  },
-};
-</script>
 
 <style scoped lang="scss">
 @import '~dashboard/assets/scss/variables';
diff --git a/app/javascript/dashboard/routes/dashboard/settings/macros/Index.vue b/app/javascript/dashboard/routes/dashboard/settings/macros/Index.vue
index 2ccc4c0d8..9c9707a1e 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/macros/Index.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/macros/Index.vue
@@ -1,3 +1,58 @@
+<script>
+import { mapGetters } from 'vuex';
+import { useAlert } from 'dashboard/composables';
+import accountMixin from 'dashboard/mixins/account.js';
+import MacrosTableRow from './MacrosTableRow.vue';
+export default {
+  components: {
+    MacrosTableRow,
+  },
+  mixins: [accountMixin],
+  data() {
+    return {
+      showDeleteConfirmationPopup: false,
+      selectedResponse: {},
+      loading: {},
+    };
+  },
+  computed: {
+    ...mapGetters({
+      records: ['macros/getMacros'],
+      uiFlags: 'macros/getUIFlags',
+    }),
+    deleteMessage() {
+      return ` ${this.selectedResponse.name}?`;
+    },
+  },
+  mounted() {
+    this.$store.dispatch('macros/get');
+  },
+  methods: {
+    openDeletePopup(response) {
+      this.showDeleteConfirmationPopup = true;
+      this.selectedResponse = response;
+    },
+    closeDeletePopup() {
+      this.showDeleteConfirmationPopup = false;
+    },
+    confirmDeletion() {
+      this.loading[this.selectedResponse.id] = true;
+      this.closeDeletePopup();
+      this.deleteMacro(this.selectedResponse.id);
+    },
+    async deleteMacro(id) {
+      try {
+        await this.$store.dispatch('macros/delete', id);
+        useAlert(this.$t('MACROS.DELETE.API.SUCCESS_MESSAGE'));
+        this.loading[this.selectedResponse.id] = false;
+      } catch (error) {
+        useAlert(this.$t('MACROS.DELETE.API.ERROR_MESSAGE'));
+      }
+    },
+  },
+};
+</script>
+
 <template>
   <div class="flex-1 overflow-auto">
     <router-link
@@ -55,58 +110,3 @@
     />
   </div>
 </template>
-
-<script>
-import { mapGetters } from 'vuex';
-import { useAlert } from 'dashboard/composables';
-import accountMixin from 'dashboard/mixins/account.js';
-import MacrosTableRow from './MacrosTableRow.vue';
-export default {
-  components: {
-    MacrosTableRow,
-  },
-  mixins: [accountMixin],
-  data() {
-    return {
-      showDeleteConfirmationPopup: false,
-      selectedResponse: {},
-      loading: {},
-    };
-  },
-  computed: {
-    ...mapGetters({
-      records: ['macros/getMacros'],
-      uiFlags: 'macros/getUIFlags',
-    }),
-    deleteMessage() {
-      return ` ${this.selectedResponse.name}?`;
-    },
-  },
-  mounted() {
-    this.$store.dispatch('macros/get');
-  },
-  methods: {
-    openDeletePopup(response) {
-      this.showDeleteConfirmationPopup = true;
-      this.selectedResponse = response;
-    },
-    closeDeletePopup() {
-      this.showDeleteConfirmationPopup = false;
-    },
-    confirmDeletion() {
-      this.loading[this.selectedResponse.id] = true;
-      this.closeDeletePopup();
-      this.deleteMacro(this.selectedResponse.id);
-    },
-    async deleteMacro(id) {
-      try {
-        await this.$store.dispatch('macros/delete', id);
-        useAlert(this.$t('MACROS.DELETE.API.SUCCESS_MESSAGE'));
-        this.loading[this.selectedResponse.id] = false;
-      } catch (error) {
-        useAlert(this.$t('MACROS.DELETE.API.ERROR_MESSAGE'));
-      }
-    },
-  },
-};
-</script>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/macros/MacroEditor.vue b/app/javascript/dashboard/routes/dashboard/settings/macros/MacroEditor.vue
index 53316f9e4..6b469e522 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/macros/MacroEditor.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/macros/MacroEditor.vue
@@ -1,17 +1,3 @@
-<template>
-  <div class="flex flex-col flex-1 h-full overflow-auto">
-    <woot-loading-state
-      v-if="uiFlags.isFetchingItem"
-      :message="$t('MACROS.EDITOR.LOADING')"
-    />
-    <macro-form
-      v-if="macro && !uiFlags.isFetchingItem"
-      :macro-data.sync="macro"
-      @submit="saveMacro"
-    />
-  </div>
-</template>
-
 <script>
 import MacroForm from './MacroForm.vue';
 import { MACRO_ACTION_TYPES } from './constants';
@@ -140,3 +126,17 @@ export default {
   },
 };
 </script>
+
+<template>
+  <div class="flex flex-col flex-1 h-full overflow-auto">
+    <woot-loading-state
+      v-if="uiFlags.isFetchingItem"
+      :message="$t('MACROS.EDITOR.LOADING')"
+    />
+    <macro-form
+      v-if="macro && !uiFlags.isFetchingItem"
+      :macro-data.sync="macro"
+      @submit="saveMacro"
+    />
+  </div>
+</template>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/macros/MacroForm.vue b/app/javascript/dashboard/routes/dashboard/settings/macros/MacroForm.vue
index 753702eab..e2f995b85 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/macros/MacroForm.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/macros/MacroForm.vue
@@ -1,28 +1,3 @@
-<template>
-  <div class="flex flex-col md:flex-row h-auto md:h-full w-full">
-    <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
-        v-model="macro.actions"
-        :files="files"
-        @addNewNode="appendNode"
-        @deleteNode="deleteNode"
-        @resetAction="resetNode"
-      />
-    </div>
-    <div class="w-full md:w-1/3">
-      <macro-properties
-        :macro-name="macro.name"
-        :macro-visibility="macro.visibility"
-        @update:name="updateName"
-        @update:visibility="updateVisibility"
-        @submit="submit"
-      />
-    </div>
-  </div>
-</template>
-
 <script>
 import { ref, provide } from 'vue';
 import MacroNodes from './MacroNodes.vue';
@@ -127,6 +102,31 @@ export default {
 };
 </script>
 
+<template>
+  <div class="flex flex-col md:flex-row h-auto md:h-full w-full">
+    <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
+        v-model="macro.actions"
+        :files="files"
+        @addNewNode="appendNode"
+        @deleteNode="deleteNode"
+        @resetAction="resetNode"
+      />
+    </div>
+    <div class="w-full md:w-1/3">
+      <macro-properties
+        :macro-name="macro.name"
+        :macro-visibility="macro.visibility"
+        @update:name="updateName"
+        @update:visibility="updateVisibility"
+        @submit="submit"
+      />
+    </div>
+  </div>
+</template>
+
 <style scoped>
 @tailwind components;
 @layer components {
diff --git a/app/javascript/dashboard/routes/dashboard/settings/macros/MacroNode.vue b/app/javascript/dashboard/routes/dashboard/settings/macros/MacroNode.vue
index 467e09642..739ecf2a5 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/macros/MacroNode.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/macros/MacroNode.vue
@@ -1,43 +1,3 @@
-<template>
-  <div class="macro__node-action-container">
-    <woot-button
-      v-if="!singleNode"
-      size="small"
-      variant="clear"
-      color-scheme="secondary"
-      icon="navigation"
-      class="macros__node-drag-handle"
-    />
-    <div
-      class="macro__node-action-item"
-      :class="{
-        'has-error': errors[`action_${index}`],
-      }"
-    >
-      <action-input
-        v-model="actionData"
-        :action-types="macroActionTypes"
-        :dropdown-values="dropdownValues()"
-        :show-action-input="showActionInput"
-        :show-remove-button="false"
-        :is-macro="true"
-        :error-message="errors[`action_${index}`] || ''"
-        :initial-file-name="fileName"
-        @resetAction="$emit('resetAction')"
-      />
-    </div>
-    <woot-button
-      v-if="!singleNode"
-      v-tooltip="$t('MACROS.EDITOR.DELETE_BTN_TOOLTIP')"
-      icon="delete"
-      size="small"
-      variant="smooth"
-      color-scheme="alert"
-      @click="$emit('deleteNode')"
-    />
-  </div>
-</template>
-
 <script>
 import { inject } from 'vue';
 import ActionInput from 'dashboard/components/widgets/AutomationActionInput.vue';
@@ -106,6 +66,46 @@ export default {
 };
 </script>
 
+<template>
+  <div class="macro__node-action-container">
+    <woot-button
+      v-if="!singleNode"
+      size="small"
+      variant="clear"
+      color-scheme="secondary"
+      icon="navigation"
+      class="macros__node-drag-handle"
+    />
+    <div
+      class="macro__node-action-item"
+      :class="{
+        'has-error': errors[`action_${index}`],
+      }"
+    >
+      <action-input
+        v-model="actionData"
+        :action-types="macroActionTypes"
+        :dropdown-values="dropdownValues()"
+        :show-action-input="showActionInput"
+        :show-remove-button="false"
+        :is-macro="true"
+        :error-message="errors[`action_${index}`] || ''"
+        :initial-file-name="fileName"
+        @resetAction="$emit('resetAction')"
+      />
+    </div>
+    <woot-button
+      v-if="!singleNode"
+      v-tooltip="$t('MACROS.EDITOR.DELETE_BTN_TOOLTIP')"
+      icon="delete"
+      size="small"
+      variant="smooth"
+      color-scheme="alert"
+      @click="$emit('deleteNode')"
+    />
+  </div>
+</template>
+
 <style scoped lang="scss">
 .macros__node-drag-handle {
   @apply cursor-move -left-8 absolute;
diff --git a/app/javascript/dashboard/routes/dashboard/settings/macros/MacroNodes.vue b/app/javascript/dashboard/routes/dashboard/settings/macros/MacroNodes.vue
index e4c2d359b..10de3af08 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/macros/MacroNodes.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/macros/MacroNodes.vue
@@ -1,3 +1,41 @@
+<script>
+import Draggable from 'vuedraggable';
+import MacroNode from './MacroNode.vue';
+import { getFileName } from './macroHelper';
+
+export default {
+  components: {
+    Draggable,
+    MacroNode,
+  },
+  props: {
+    value: {
+      type: Array,
+      default: () => [],
+    },
+    files: {
+      type: Array,
+      default: () => [],
+    },
+  },
+  computed: {
+    actionData: {
+      get() {
+        return this.value;
+      },
+      set(value) {
+        this.$emit('input', value);
+      },
+    },
+  },
+  methods: {
+    fileName() {
+      return getFileName(...arguments);
+    },
+  },
+};
+</script>
+
 <template>
   <div class="macros__nodes">
     <div class="macro__node">
@@ -60,44 +98,6 @@
   </div>
 </template>
 
-<script>
-import Draggable from 'vuedraggable';
-import MacroNode from './MacroNode.vue';
-import { getFileName } from './macroHelper';
-
-export default {
-  components: {
-    Draggable,
-    MacroNode,
-  },
-  props: {
-    value: {
-      type: Array,
-      default: () => [],
-    },
-    files: {
-      type: Array,
-      default: () => [],
-    },
-  },
-  computed: {
-    actionData: {
-      get() {
-        return this.value;
-      },
-      set(value) {
-        this.$emit('input', value);
-      },
-    },
-  },
-  methods: {
-    fileName() {
-      return getFileName(...arguments);
-    },
-  },
-};
-</script>
-
 <style scoped lang="scss">
 .macros__nodes {
   max-width: 800px;
diff --git a/app/javascript/dashboard/routes/dashboard/settings/macros/MacroProperties.vue b/app/javascript/dashboard/routes/dashboard/settings/macros/MacroProperties.vue
index 1f8880af2..01b3ede4f 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/macros/MacroProperties.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/macros/MacroProperties.vue
@@ -1,3 +1,32 @@
+<script>
+export default {
+  inject: ['v$'],
+  props: {
+    macroName: {
+      type: String,
+      default: '',
+    },
+    macroVisibility: {
+      type: String,
+      default: 'global',
+    },
+  },
+  methods: {
+    isActive(key) {
+      return this.macroVisibility === key
+        ? 'bg-woot-25 dark:bg-slate-900 border-woot-200 dark:border-woot-700'
+        : 'bg-white dark:bg-slate-900 border-slate-200 dark:border-slate-600';
+    },
+    onUpdateName(value) {
+      this.$emit('update:name', value);
+    },
+    onUpdateVisibility(value) {
+      this.$emit('update:visibility', value);
+    },
+  },
+};
+</script>
+
 <template>
   <div
     class="p-3 bg-white dark:bg-slate-900 h-[calc(100vh-3.5rem)] flex flex-col border-l border-slate-50 dark:border-slate-800/50"
@@ -84,35 +113,6 @@
   </div>
 </template>
 
-<script>
-export default {
-  inject: ['v$'],
-  props: {
-    macroName: {
-      type: String,
-      default: '',
-    },
-    macroVisibility: {
-      type: String,
-      default: 'global',
-    },
-  },
-  methods: {
-    isActive(key) {
-      return this.macroVisibility === key
-        ? 'bg-woot-25 dark:bg-slate-900 border-woot-200 dark:border-woot-700'
-        : 'bg-white dark:bg-slate-900 border-slate-200 dark:border-slate-600';
-    },
-    onUpdateName(value) {
-      this.$emit('update:name', value);
-    },
-    onUpdateVisibility(value) {
-      this.$emit('update:visibility', value);
-    },
-  },
-};
-</script>
-
 <style scoped lang="scss">
 ::v-deep input[type='text'] {
   @apply mb-0;
diff --git a/app/javascript/dashboard/routes/dashboard/settings/macros/MacrosTableRow.vue b/app/javascript/dashboard/routes/dashboard/settings/macros/MacrosTableRow.vue
index c70fbddc1..e258dfbb3 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/macros/MacrosTableRow.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/macros/MacrosTableRow.vue
@@ -1,3 +1,35 @@
+<script>
+import Thumbnail from 'dashboard/components/widgets/Thumbnail.vue';
+import accountMixin from 'dashboard/mixins/account.js';
+export default {
+  components: {
+    Thumbnail,
+  },
+  mixins: [accountMixin],
+  props: {
+    macro: {
+      type: Object,
+      required: true,
+    },
+  },
+  computed: {
+    createdByName() {
+      const createdBy = this.macro.created_by;
+      return createdBy.available_name ?? createdBy.email ?? '';
+    },
+    updatedByName() {
+      const updatedBy = this.macro.updated_by;
+      return updatedBy.available_name ?? updatedBy.email ?? '';
+    },
+    visibilityLabel() {
+      return this.macro.visibility === 'global'
+        ? this.$t('MACROS.EDITOR.VISIBILITY.GLOBAL.LABEL')
+        : this.$t('MACROS.EDITOR.VISIBILITY.PERSONAL.LABEL');
+    },
+  },
+};
+</script>
+
 <template>
   <tr>
     <td>{{ macro.name }}</td>
@@ -38,38 +70,6 @@
   </tr>
 </template>
 
-<script>
-import Thumbnail from 'dashboard/components/widgets/Thumbnail.vue';
-import accountMixin from 'dashboard/mixins/account.js';
-export default {
-  components: {
-    Thumbnail,
-  },
-  mixins: [accountMixin],
-  props: {
-    macro: {
-      type: Object,
-      required: true,
-    },
-  },
-  computed: {
-    createdByName() {
-      const createdBy = this.macro.created_by;
-      return createdBy.available_name ?? createdBy.email ?? '';
-    },
-    updatedByName() {
-      const updatedBy = this.macro.updated_by;
-      return updatedBy.available_name ?? updatedBy.email ?? '';
-    },
-    visibilityLabel() {
-      return this.macro.visibility === 'global'
-        ? this.$t('MACROS.EDITOR.VISIBILITY.GLOBAL.LABEL')
-        : this.$t('MACROS.EDITOR.VISIBILITY.PERSONAL.LABEL');
-    },
-  },
-};
-</script>
-
 <style scoped lang="scss">
 .avatar-container {
   display: flex;
diff --git a/app/javascript/dashboard/routes/dashboard/settings/profile/AccessToken.vue b/app/javascript/dashboard/routes/dashboard/settings/profile/AccessToken.vue
index 93b6fcb23..d2291bcfa 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/profile/AccessToken.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/profile/AccessToken.vue
@@ -1,3 +1,26 @@
+<script setup>
+import { ref, computed } from 'vue';
+import FormButton from 'v3/components/Form/Button.vue';
+const props = defineProps({
+  value: {
+    type: String,
+    default: '',
+  },
+});
+const emit = defineEmits(['on-copy']);
+const inputType = ref('password');
+const toggleMasked = () => {
+  inputType.value = inputType.value === 'password' ? 'text' : 'password';
+};
+
+const maskIcon = computed(() => {
+  return inputType.value === 'password' ? 'eye-hide' : 'eye-show';
+});
+
+const onClick = () => {
+  emit('on-copy', props.value);
+};
+</script>
 <template>
   <div class="flex flex-row justify-between gap-4">
     <woot-input
@@ -33,26 +56,3 @@
     </form-button>
   </div>
 </template>
-<script setup>
-import { ref, computed } from 'vue';
-import FormButton from 'v3/components/Form/Button.vue';
-const props = defineProps({
-  value: {
-    type: String,
-    default: '',
-  },
-});
-const emit = defineEmits(['on-copy']);
-const inputType = ref('password');
-const toggleMasked = () => {
-  inputType.value = inputType.value === 'password' ? 'text' : 'password';
-};
-
-const maskIcon = computed(() => {
-  return inputType.value === 'password' ? 'eye-hide' : 'eye-show';
-});
-
-const onClick = () => {
-  emit('on-copy', props.value);
-};
-</script>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/profile/AudioAlertCondition.vue b/app/javascript/dashboard/routes/dashboard/settings/profile/AudioAlertCondition.vue
index ead4b77f2..4a9508b80 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/profile/AudioAlertCondition.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/profile/AudioAlertCondition.vue
@@ -1,3 +1,20 @@
+<script setup>
+import CheckBox from 'v3/components/Form/CheckBox.vue';
+defineProps({
+  label: {
+    type: String,
+    required: true,
+  },
+  items: {
+    type: Array,
+    required: true,
+  },
+});
+const emit = defineEmits(['change']);
+const onChange = (id, value) => {
+  emit('change', id, value);
+};
+</script>
 <template>
   <div>
     <label
@@ -23,20 +40,3 @@
     </div>
   </div>
 </template>
-<script setup>
-import CheckBox from 'v3/components/Form/CheckBox.vue';
-defineProps({
-  label: {
-    type: String,
-    required: true,
-  },
-  items: {
-    type: Array,
-    required: true,
-  },
-});
-const emit = defineEmits(['change']);
-const onChange = (id, value) => {
-  emit('change', id, value);
-};
-</script>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/profile/AudioAlertEvent.vue b/app/javascript/dashboard/routes/dashboard/settings/profile/AudioAlertEvent.vue
index 41d25b522..5444ecf75 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/profile/AudioAlertEvent.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/profile/AudioAlertEvent.vue
@@ -1,3 +1,30 @@
+<script setup>
+import { computed } from 'vue';
+import { ALERT_EVENTS } from './constants';
+
+const props = defineProps({
+  label: {
+    type: String,
+    default: '',
+  },
+  value: {
+    type: String,
+    default: 'all',
+  },
+});
+
+const alertEvents = ALERT_EVENTS;
+
+const emit = defineEmits(['update']);
+
+const selectedValue = computed({
+  get: () => props.value,
+  set: value => {
+    emit('update', value);
+  },
+});
+</script>
+
 <template>
   <div>
     <label
@@ -37,30 +64,3 @@
     </div>
   </div>
 </template>
-
-<script setup>
-import { computed } from 'vue';
-import { ALERT_EVENTS } from './constants';
-
-const props = defineProps({
-  label: {
-    type: String,
-    default: '',
-  },
-  value: {
-    type: String,
-    default: 'all',
-  },
-});
-
-const alertEvents = ALERT_EVENTS;
-
-const emit = defineEmits(['update']);
-
-const selectedValue = computed({
-  get: () => props.value,
-  set: value => {
-    emit('update', value);
-  },
-});
-</script>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/profile/AudioAlertTone.vue b/app/javascript/dashboard/routes/dashboard/settings/profile/AudioAlertTone.vue
index 3246e12af..8c823a4c6 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/profile/AudioAlertTone.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/profile/AudioAlertTone.vue
@@ -1,23 +1,3 @@
-<template>
-  <form-select
-    v-model="selectedValue"
-    name="alertTone"
-    spacing="compact"
-    :value="selectedValue"
-    :options="alertTones"
-    :label="label"
-    class="max-w-xl"
-  >
-    <option
-      v-for="tone in alertTones"
-      :key="tone.label"
-      :value="tone.value"
-      :selected="tone.value === selectedValue"
-    >
-      {{ tone.label }}
-    </option>
-  </form-select>
-</template>
 <script setup>
 import { computed } from 'vue';
 import FormSelect from 'v3/components/Form/Select.vue';
@@ -54,3 +34,23 @@ const selectedValue = computed({
   },
 });
 </script>
+<template>
+  <form-select
+    v-model="selectedValue"
+    name="alertTone"
+    spacing="compact"
+    :value="selectedValue"
+    :options="alertTones"
+    :label="label"
+    class="max-w-xl"
+  >
+    <option
+      v-for="tone in alertTones"
+      :key="tone.label"
+      :value="tone.value"
+      :selected="tone.value === selectedValue"
+    >
+      {{ tone.label }}
+    </option>
+  </form-select>
+</template>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/profile/AudioNotifications.vue b/app/javascript/dashboard/routes/dashboard/settings/profile/AudioNotifications.vue
index b272873de..cd866dc5c 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/profile/AudioNotifications.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/profile/AudioNotifications.vue
@@ -1,33 +1,3 @@
-<template>
-  <div id="profile-settings-notifications" class="flex flex-col gap-6">
-    <audio-alert-tone
-      :value="alertTone"
-      :label="
-        $t(
-          'PROFILE_SETTINGS.FORM.AUDIO_NOTIFICATIONS_SECTION.DEFAULT_TONE.TITLE'
-        )
-      "
-      @change="handleAudioToneChange"
-    />
-
-    <audio-alert-event
-      :label="
-        $t('PROFILE_SETTINGS.FORM.AUDIO_NOTIFICATIONS_SECTION.ALERT_TYPE.TITLE')
-      "
-      :value="audioAlert"
-      @update="handAudioAlertChange"
-    />
-
-    <audio-alert-condition
-      :items="audioAlertConditions"
-      :label="
-        $t('PROFILE_SETTINGS.FORM.AUDIO_NOTIFICATIONS_SECTION.CONDITIONS.TITLE')
-      "
-      @change="handleAudioAlertConditions"
-    />
-  </div>
-</template>
-
 <script>
 import { mapGetters } from 'vuex';
 import { useAlert } from 'dashboard/composables';
@@ -133,3 +103,33 @@ export default {
   },
 };
 </script>
+
+<template>
+  <div id="profile-settings-notifications" class="flex flex-col gap-6">
+    <audio-alert-tone
+      :value="alertTone"
+      :label="
+        $t(
+          'PROFILE_SETTINGS.FORM.AUDIO_NOTIFICATIONS_SECTION.DEFAULT_TONE.TITLE'
+        )
+      "
+      @change="handleAudioToneChange"
+    />
+
+    <audio-alert-event
+      :label="
+        $t('PROFILE_SETTINGS.FORM.AUDIO_NOTIFICATIONS_SECTION.ALERT_TYPE.TITLE')
+      "
+      :value="audioAlert"
+      @update="handAudioAlertChange"
+    />
+
+    <audio-alert-condition
+      :items="audioAlertConditions"
+      :label="
+        $t('PROFILE_SETTINGS.FORM.AUDIO_NOTIFICATIONS_SECTION.CONDITIONS.TITLE')
+      "
+      @change="handleAudioAlertConditions"
+    />
+  </div>
+</template>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/profile/ChangePassword.vue b/app/javascript/dashboard/routes/dashboard/settings/profile/ChangePassword.vue
index 604e87f00..e3461e438 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/profile/ChangePassword.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/profile/ChangePassword.vue
@@ -1,64 +1,3 @@
-<template>
-  <form @submit.prevent="changePassword()">
-    <div class="flex flex-col w-full gap-4">
-      <woot-input
-        v-model="currentPassword"
-        type="password"
-        :styles="inputStyles"
-        :class="{ error: v$.currentPassword.$error }"
-        :label="$t('PROFILE_SETTINGS.FORM.CURRENT_PASSWORD.LABEL')"
-        :placeholder="$t('PROFILE_SETTINGS.FORM.CURRENT_PASSWORD.PLACEHOLDER')"
-        :error="`${
-          v$.currentPassword.$error
-            ? $t('PROFILE_SETTINGS.FORM.CURRENT_PASSWORD.ERROR')
-            : ''
-        }`"
-        @input="v$.currentPassword.$touch"
-      />
-
-      <woot-input
-        v-model="password"
-        type="password"
-        :styles="inputStyles"
-        :class="{ error: v$.password.$error }"
-        :label="$t('PROFILE_SETTINGS.FORM.PASSWORD.LABEL')"
-        :placeholder="$t('PROFILE_SETTINGS.FORM.PASSWORD.PLACEHOLDER')"
-        :error="`${
-          v$.password.$error ? $t('PROFILE_SETTINGS.FORM.PASSWORD.ERROR') : ''
-        }`"
-        @input="v$.password.$touch"
-      />
-
-      <woot-input
-        v-model="passwordConfirmation"
-        type="password"
-        :styles="inputStyles"
-        :class="{ error: v$.passwordConfirmation.$error }"
-        :label="$t('PROFILE_SETTINGS.FORM.PASSWORD_CONFIRMATION.LABEL')"
-        :placeholder="
-          $t('PROFILE_SETTINGS.FORM.PASSWORD_CONFIRMATION.PLACEHOLDER')
-        "
-        :error="`${
-          v$.passwordConfirmation.$error
-            ? $t('PROFILE_SETTINGS.FORM.PASSWORD_CONFIRMATION.ERROR')
-            : ''
-        }`"
-        @input="v$.passwordConfirmation.$touch"
-      />
-
-      <form-button
-        type="submit"
-        color-scheme="primary"
-        variant="solid"
-        size="large"
-        :disabled="isButtonDisabled"
-      >
-        {{ $t('PROFILE_SETTINGS.FORM.PASSWORD_SECTION.BTN_TEXT') }}
-      </form-button>
-    </div>
-  </form>
-</template>
-
 <script>
 import { useVuelidate } from '@vuelidate/core';
 import { required, minLength } from '@vuelidate/validators';
@@ -139,3 +78,64 @@ export default {
   },
 };
 </script>
+
+<template>
+  <form @submit.prevent="changePassword()">
+    <div class="flex flex-col w-full gap-4">
+      <woot-input
+        v-model="currentPassword"
+        type="password"
+        :styles="inputStyles"
+        :class="{ error: v$.currentPassword.$error }"
+        :label="$t('PROFILE_SETTINGS.FORM.CURRENT_PASSWORD.LABEL')"
+        :placeholder="$t('PROFILE_SETTINGS.FORM.CURRENT_PASSWORD.PLACEHOLDER')"
+        :error="`${
+          v$.currentPassword.$error
+            ? $t('PROFILE_SETTINGS.FORM.CURRENT_PASSWORD.ERROR')
+            : ''
+        }`"
+        @input="v$.currentPassword.$touch"
+      />
+
+      <woot-input
+        v-model="password"
+        type="password"
+        :styles="inputStyles"
+        :class="{ error: v$.password.$error }"
+        :label="$t('PROFILE_SETTINGS.FORM.PASSWORD.LABEL')"
+        :placeholder="$t('PROFILE_SETTINGS.FORM.PASSWORD.PLACEHOLDER')"
+        :error="`${
+          v$.password.$error ? $t('PROFILE_SETTINGS.FORM.PASSWORD.ERROR') : ''
+        }`"
+        @input="v$.password.$touch"
+      />
+
+      <woot-input
+        v-model="passwordConfirmation"
+        type="password"
+        :styles="inputStyles"
+        :class="{ error: v$.passwordConfirmation.$error }"
+        :label="$t('PROFILE_SETTINGS.FORM.PASSWORD_CONFIRMATION.LABEL')"
+        :placeholder="
+          $t('PROFILE_SETTINGS.FORM.PASSWORD_CONFIRMATION.PLACEHOLDER')
+        "
+        :error="`${
+          v$.passwordConfirmation.$error
+            ? $t('PROFILE_SETTINGS.FORM.PASSWORD_CONFIRMATION.ERROR')
+            : ''
+        }`"
+        @input="v$.passwordConfirmation.$touch"
+      />
+
+      <form-button
+        type="submit"
+        color-scheme="primary"
+        variant="solid"
+        size="large"
+        :disabled="isButtonDisabled"
+      >
+        {{ $t('PROFILE_SETTINGS.FORM.PASSWORD_SECTION.BTN_TEXT') }}
+      </form-button>
+    </div>
+  </form>
+</template>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/profile/HotKeyCard.vue b/app/javascript/dashboard/routes/dashboard/settings/profile/HotKeyCard.vue
index 35cbbeb7b..540b405d1 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/profile/HotKeyCard.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/profile/HotKeyCard.vue
@@ -1,3 +1,28 @@
+<script setup>
+defineProps({
+  active: {
+    type: Boolean,
+    default: false,
+  },
+  title: {
+    type: String,
+    default: '',
+  },
+  description: {
+    type: String,
+    default: '',
+  },
+  lightImage: {
+    type: String,
+    default: '',
+  },
+  darkImage: {
+    type: String,
+    default: '',
+  },
+});
+</script>
+
 <template>
   <div
     class="flex flex-col gap-4 w-full h-fit sm:max-h-[220px] p-4 sm:max-w-[350px] rounded-md border border-solid border-ash-200"
@@ -37,28 +62,3 @@
     </div>
   </div>
 </template>
-
-<script setup>
-defineProps({
-  active: {
-    type: Boolean,
-    default: false,
-  },
-  title: {
-    type: String,
-    default: '',
-  },
-  description: {
-    type: String,
-    default: '',
-  },
-  lightImage: {
-    type: String,
-    default: '',
-  },
-  darkImage: {
-    type: String,
-    default: '',
-  },
-});
-</script>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/profile/Index.vue b/app/javascript/dashboard/routes/dashboard/settings/profile/Index.vue
index 069b8ab81..86847ff1b 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/profile/Index.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/profile/Index.vue
@@ -1,85 +1,3 @@
-<template>
-  <div class="grid py-16 px-5 font-inter mx-auto gap-16 sm:max-w-[720px]">
-    <div class="flex flex-col gap-6">
-      <h2 class="text-2xl font-medium text-ash-900">
-        {{ $t('PROFILE_SETTINGS.TITLE') }}
-      </h2>
-      <user-profile-picture
-        :src="avatarUrl"
-        :name="name"
-        size="72px"
-        @change="updateProfilePicture"
-        @delete="deleteProfilePicture"
-      />
-      <user-basic-details
-        :name="name"
-        :display-name="displayName"
-        :email="email"
-        :email-enabled="!globalConfig.disableUserProfileUpdate"
-        @update-user="updateProfile"
-      />
-    </div>
-
-    <form-section
-      :title="$t('PROFILE_SETTINGS.FORM.MESSAGE_SIGNATURE_SECTION.TITLE')"
-      :description="$t('PROFILE_SETTINGS.FORM.MESSAGE_SIGNATURE_SECTION.NOTE')"
-    >
-      <message-signature
-        :message-signature="messageSignature"
-        @update-signature="updateSignature"
-      />
-    </form-section>
-    <form-section
-      :title="$t('PROFILE_SETTINGS.FORM.SEND_MESSAGE.TITLE')"
-      :description="$t('PROFILE_SETTINGS.FORM.SEND_MESSAGE.NOTE')"
-    >
-      <div
-        class="flex flex-col justify-between w-full gap-5 sm:gap-4 sm:flex-row"
-      >
-        <button
-          v-for="hotKey in hotKeys"
-          :key="hotKey.key"
-          class="px-0 reset-base"
-        >
-          <hot-key-card
-            :key="hotKey.title"
-            :title="hotKey.title"
-            :description="hotKey.description"
-            :light-image="hotKey.lightImage"
-            :dark-image="hotKey.darkImage"
-            :active="isEditorHotKeyEnabled(hotKey.key)"
-            @click="toggleHotKey(hotKey.key)"
-          />
-        </button>
-      </div>
-    </form-section>
-    <form-section :title="$t('PROFILE_SETTINGS.FORM.PASSWORD_SECTION.TITLE')">
-      <change-password v-if="!globalConfig.disableUserProfileUpdate" />
-    </form-section>
-    <form-section
-      :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
-      :title="$t('PROFILE_SETTINGS.FORM.ACCESS_TOKEN.TITLE')"
-      :description="
-        useInstallationName(
-          $t('PROFILE_SETTINGS.FORM.ACCESS_TOKEN.NOTE'),
-          globalConfig.installationName
-        )
-      "
-    >
-      <access-token :value="currentUser.access_token" @on-copy="onCopyToken" />
-    </form-section>
-  </div>
-</template>
 <script>
 import { mapGetters } from 'vuex';
 import { useAlert } from 'dashboard/composables';
@@ -255,3 +173,85 @@ export default {
   },
 };
 </script>
+<template>
+  <div class="grid py-16 px-5 font-inter mx-auto gap-16 sm:max-w-[720px]">
+    <div class="flex flex-col gap-6">
+      <h2 class="text-2xl font-medium text-ash-900">
+        {{ $t('PROFILE_SETTINGS.TITLE') }}
+      </h2>
+      <user-profile-picture
+        :src="avatarUrl"
+        :name="name"
+        size="72px"
+        @change="updateProfilePicture"
+        @delete="deleteProfilePicture"
+      />
+      <user-basic-details
+        :name="name"
+        :display-name="displayName"
+        :email="email"
+        :email-enabled="!globalConfig.disableUserProfileUpdate"
+        @update-user="updateProfile"
+      />
+    </div>
+
+    <form-section
+      :title="$t('PROFILE_SETTINGS.FORM.MESSAGE_SIGNATURE_SECTION.TITLE')"
+      :description="$t('PROFILE_SETTINGS.FORM.MESSAGE_SIGNATURE_SECTION.NOTE')"
+    >
+      <message-signature
+        :message-signature="messageSignature"
+        @update-signature="updateSignature"
+      />
+    </form-section>
+    <form-section
+      :title="$t('PROFILE_SETTINGS.FORM.SEND_MESSAGE.TITLE')"
+      :description="$t('PROFILE_SETTINGS.FORM.SEND_MESSAGE.NOTE')"
+    >
+      <div
+        class="flex flex-col justify-between w-full gap-5 sm:gap-4 sm:flex-row"
+      >
+        <button
+          v-for="hotKey in hotKeys"
+          :key="hotKey.key"
+          class="px-0 reset-base"
+        >
+          <hot-key-card
+            :key="hotKey.title"
+            :title="hotKey.title"
+            :description="hotKey.description"
+            :light-image="hotKey.lightImage"
+            :dark-image="hotKey.darkImage"
+            :active="isEditorHotKeyEnabled(hotKey.key)"
+            @click="toggleHotKey(hotKey.key)"
+          />
+        </button>
+      </div>
+    </form-section>
+    <form-section :title="$t('PROFILE_SETTINGS.FORM.PASSWORD_SECTION.TITLE')">
+      <change-password v-if="!globalConfig.disableUserProfileUpdate" />
+    </form-section>
+    <form-section
+      :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
+      :title="$t('PROFILE_SETTINGS.FORM.ACCESS_TOKEN.TITLE')"
+      :description="
+        useInstallationName(
+          $t('PROFILE_SETTINGS.FORM.ACCESS_TOKEN.NOTE'),
+          globalConfig.installationName
+        )
+      "
+    >
+      <access-token :value="currentUser.access_token" @on-copy="onCopyToken" />
+    </form-section>
+  </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 a86b4fa5c..48339deb8 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/profile/MessageSignature.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/profile/MessageSignature.vue
@@ -1,25 +1,3 @@
-<template>
-  <form class="flex flex-col gap-6" @submit.prevent="updateSignature()">
-    <woot-message-editor
-      id="message-signature-input"
-      v-model="signature"
-      class="message-editor h-[10rem] !px-3"
-      :is-format-mode="true"
-      :placeholder="$t('PROFILE_SETTINGS.FORM.MESSAGE_SIGNATURE.PLACEHOLDER')"
-      :enabled-menu-options="customEditorMenuList"
-      :enable-suggestions="false"
-      :show-image-resize-toolbar="true"
-    />
-    <form-button
-      type="submit"
-      color-scheme="primary"
-      variant="solid"
-      size="large"
-    >
-      {{ $t('PROFILE_SETTINGS.FORM.MESSAGE_SIGNATURE_SECTION.BTN_TEXT') }}
-    </form-button>
-  </form>
-</template>
 <script setup>
 import { ref, watch } from 'vue';
 import WootMessageEditor from 'dashboard/components/widgets/WootWriter/Editor.vue';
@@ -48,3 +26,25 @@ const updateSignature = () => {
   emit('update-signature', signature.value);
 };
 </script>
+<template>
+  <form class="flex flex-col gap-6" @submit.prevent="updateSignature()">
+    <woot-message-editor
+      id="message-signature-input"
+      v-model="signature"
+      class="message-editor h-[10rem] !px-3"
+      :is-format-mode="true"
+      :placeholder="$t('PROFILE_SETTINGS.FORM.MESSAGE_SIGNATURE.PLACEHOLDER')"
+      :enabled-menu-options="customEditorMenuList"
+      :enable-suggestions="false"
+      :show-image-resize-toolbar="true"
+    />
+    <form-button
+      type="submit"
+      color-scheme="primary"
+      variant="solid"
+      size="large"
+    >
+      {{ $t('PROFILE_SETTINGS.FORM.MESSAGE_SIGNATURE_SECTION.BTN_TEXT') }}
+    </form-button>
+  </form>
+</template>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/profile/NotificationCheckBox.vue b/app/javascript/dashboard/routes/dashboard/settings/profile/NotificationCheckBox.vue
index feb180014..4cd512055 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/profile/NotificationCheckBox.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/profile/NotificationCheckBox.vue
@@ -1,18 +1,3 @@
-<template>
-  <div
-    class="flex items-start gap-2 px-0 text-sm tracking-[0.5] text-left rtl:text-right"
-    :class="`col-span-${span}`"
-  >
-    <input
-      v-model="localFlags"
-      class="mt-1 flex-shrink-0 border-ash-200 border checked:border-none checked:bg-primary-600 dark:checked:bg-primary-600 shadow appearance-none rounded-[4px] w-4 h-4 focus:ring-1 after:content-[''] after:text-white checked:after:content-['✓'] after:flex after:items-center after:justify-center after:text-center after:text-xs after:font-bold after:relative"
-      type="checkbox"
-      :value="localValue"
-      @input="handleInput"
-    />
-  </div>
-</template>
-
 <script setup>
 import { ref, watch } from 'vue';
 
@@ -51,3 +36,18 @@ const handleInput = e => {
   emit('input', props.type, e);
 };
 </script>
+
+<template>
+  <div
+    class="flex items-start gap-2 px-0 text-sm tracking-[0.5] text-left rtl:text-right"
+    :class="`col-span-${span}`"
+  >
+    <input
+      v-model="localFlags"
+      class="mt-1 flex-shrink-0 border-ash-200 border checked:border-none checked:bg-primary-600 dark:checked:bg-primary-600 shadow appearance-none rounded-[4px] w-4 h-4 focus:ring-1 after:content-[''] after:text-white checked:after:content-['✓'] after:flex after:items-center after:justify-center after:text-center after:text-xs after:font-bold after:relative"
+      type="checkbox"
+      :value="localValue"
+      @input="handleInput"
+    />
+  </div>
+</template>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/profile/NotificationPreferences.vue b/app/javascript/dashboard/routes/dashboard/settings/profile/NotificationPreferences.vue
index b276f0b47..0f704cdb0 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/profile/NotificationPreferences.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/profile/NotificationPreferences.vue
@@ -1,135 +1,3 @@
-<template>
-  <div id="profile-settings-notifications" class="flex flex-col gap-6">
-    <!-- Layout for desktop devices -->
-    <div class="hidden sm:block">
-      <div
-        class="grid content-center h-12 grid-cols-12 gap-4 py-0 rounded-t-xl"
-      >
-        <table-header-cell
-          :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
-          :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
-          :span="3"
-          label="`${$t('PROFILE_SETTINGS.FORM.NOTIFICATIONS.PUSH')}`"
-        >
-          <div class="flex items-center justify-between gap-1">
-            <span
-              class="text-sm font-medium normal-case text-ash-900 whitespace-nowrap"
-            >
-              {{ $t('PROFILE_SETTINGS.FORM.NOTIFICATIONS.PUSH') }}
-            </span>
-          </div>
-        </table-header-cell>
-      </div>
-      <div
-        v-for="(notification, index) in filteredNotificationTypes"
-        :key="index"
-      >
-        <div
-          class="grid items-center content-center h-12 grid-cols-12 gap-4 py-0 rounded-t-xl"
-        >
-          <div
-            class="flex flex-row items-start gap-2 col-span-7 px-0 py-2 text-sm tracking-[0.5] rtl:text-right"
-          >
-            <span class="text-sm text-ash-900">
-              {{ $t(notification.label) }}
-            </span>
-          </div>
-          <div
-            v-for="(type, typeIndex) in ['email', 'push']"
-            :key="typeIndex"
-            class="flex items-start gap-2 px-0 text-sm tracking-[0.5] text-left rtl:text-right"
-            :class="`col-span-${type === 'push' ? 3 : 2}`"
-          >
-            <CheckBox
-              :value="`${type}_${notification.value}`"
-              :is-checked="
-                checkFlagStatus(type, notification.value, selectedPushFlags)
-              "
-              @update="id => handleInput(type, id)"
-            />
-          </div>
-        </div>
-      </div>
-    </div>
-    <!--  Layout for mobile devices -->
-    <div class="flex flex-col gap-6 sm:hidden">
-      <span class="text-sm font-medium normal-case text-ash-900">
-        {{ $t('PROFILE_SETTINGS.FORM.EMAIL_NOTIFICATIONS_SECTION.TITLE') }}
-      </span>
-      <div class="flex flex-col gap-4">
-        <div
-          v-for="(notification, index) in filteredNotificationTypes"
-          :key="index"
-          class="flex flex-row items-start gap-2"
-        >
-          <CheckBox
-            :id="`email_${notification.value}`"
-            :value="`email_${notification.value}`"
-            :is-checked="checkFlagStatus('email', notification.value)"
-            @update="handleEmailInput"
-          />
-          <span class="text-sm text-ash-900">{{ $t(notification.label) }}</span>
-        </div>
-      </div>
-
-      <div class="flex items-center justify-start gap-2">
-        <span class="text-sm font-medium normal-case text-ash-900">
-          {{ $t('PROFILE_SETTINGS.FORM.PUSH_NOTIFICATIONS_SECTION.TITLE') }}
-        </span>
-      </div>
-
-      <div class="flex flex-col gap-4">
-        <div
-          v-for="(notification, index) in filteredNotificationTypes"
-          :key="index"
-          class="flex flex-row items-start gap-2"
-        >
-          <CheckBox
-            :id="`push_${notification.value}`"
-            :value="`push_${notification.value}`"
-            :is-checked="checkFlagStatus('push', notification.value)"
-            @update="handlePushInput"
-          />
-          <span class="text-sm text-ash-900">{{ $t(notification.label) }}</span>
-        </div>
-      </div>
-    </div>
-
-    <div
-      class="flex items-center justify-between w-full gap-2 p-4 border border-solid border-ash-200 rounded-xl"
-    >
-      <div class="flex flex-row items-center gap-2">
-        <fluent-icon
-          icon="alert"
-          class="flex-shrink-0 text-ash-900"
-          size="18"
-        />
-        <span class="text-sm text-ash-900">
-          {{ $t('PROFILE_SETTINGS.FORM.NOTIFICATIONS.BROWSER_PERMISSION') }}
-        </span>
-      </div>
-      <form-switch
-        :value="hasEnabledPushPermissions"
-        @input="onRequestPermissions"
-      />
-    </div>
-  </div>
-</template>
-
 <script>
 import { mapGetters } from 'vuex';
 import { useAlert } from 'dashboard/composables';
@@ -265,3 +133,135 @@ export default {
   },
 };
 </script>
+
+<template>
+  <div id="profile-settings-notifications" class="flex flex-col gap-6">
+    <!-- Layout for desktop devices -->
+    <div class="hidden sm:block">
+      <div
+        class="grid content-center h-12 grid-cols-12 gap-4 py-0 rounded-t-xl"
+      >
+        <table-header-cell
+          :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
+          :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
+          :span="3"
+          label="`${$t('PROFILE_SETTINGS.FORM.NOTIFICATIONS.PUSH')}`"
+        >
+          <div class="flex items-center justify-between gap-1">
+            <span
+              class="text-sm font-medium normal-case text-ash-900 whitespace-nowrap"
+            >
+              {{ $t('PROFILE_SETTINGS.FORM.NOTIFICATIONS.PUSH') }}
+            </span>
+          </div>
+        </table-header-cell>
+      </div>
+      <div
+        v-for="(notification, index) in filteredNotificationTypes"
+        :key="index"
+      >
+        <div
+          class="grid items-center content-center h-12 grid-cols-12 gap-4 py-0 rounded-t-xl"
+        >
+          <div
+            class="flex flex-row items-start gap-2 col-span-7 px-0 py-2 text-sm tracking-[0.5] rtl:text-right"
+          >
+            <span class="text-sm text-ash-900">
+              {{ $t(notification.label) }}
+            </span>
+          </div>
+          <div
+            v-for="(type, typeIndex) in ['email', 'push']"
+            :key="typeIndex"
+            class="flex items-start gap-2 px-0 text-sm tracking-[0.5] text-left rtl:text-right"
+            :class="`col-span-${type === 'push' ? 3 : 2}`"
+          >
+            <CheckBox
+              :value="`${type}_${notification.value}`"
+              :is-checked="
+                checkFlagStatus(type, notification.value, selectedPushFlags)
+              "
+              @update="id => handleInput(type, id)"
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+    <!--  Layout for mobile devices -->
+    <div class="flex flex-col gap-6 sm:hidden">
+      <span class="text-sm font-medium normal-case text-ash-900">
+        {{ $t('PROFILE_SETTINGS.FORM.EMAIL_NOTIFICATIONS_SECTION.TITLE') }}
+      </span>
+      <div class="flex flex-col gap-4">
+        <div
+          v-for="(notification, index) in filteredNotificationTypes"
+          :key="index"
+          class="flex flex-row items-start gap-2"
+        >
+          <CheckBox
+            :id="`email_${notification.value}`"
+            :value="`email_${notification.value}`"
+            :is-checked="checkFlagStatus('email', notification.value)"
+            @update="handleEmailInput"
+          />
+          <span class="text-sm text-ash-900">{{ $t(notification.label) }}</span>
+        </div>
+      </div>
+
+      <div class="flex items-center justify-start gap-2">
+        <span class="text-sm font-medium normal-case text-ash-900">
+          {{ $t('PROFILE_SETTINGS.FORM.PUSH_NOTIFICATIONS_SECTION.TITLE') }}
+        </span>
+      </div>
+
+      <div class="flex flex-col gap-4">
+        <div
+          v-for="(notification, index) in filteredNotificationTypes"
+          :key="index"
+          class="flex flex-row items-start gap-2"
+        >
+          <CheckBox
+            :id="`push_${notification.value}`"
+            :value="`push_${notification.value}`"
+            :is-checked="checkFlagStatus('push', notification.value)"
+            @update="handlePushInput"
+          />
+          <span class="text-sm text-ash-900">{{ $t(notification.label) }}</span>
+        </div>
+      </div>
+    </div>
+
+    <div
+      class="flex items-center justify-between w-full gap-2 p-4 border border-solid border-ash-200 rounded-xl"
+    >
+      <div class="flex flex-row items-center gap-2">
+        <fluent-icon
+          icon="alert"
+          class="flex-shrink-0 text-ash-900"
+          size="18"
+        />
+        <span class="text-sm text-ash-900">
+          {{ $t('PROFILE_SETTINGS.FORM.NOTIFICATIONS.BROWSER_PERMISSION') }}
+        </span>
+      </div>
+      <form-switch
+        :value="hasEnabledPushPermissions"
+        @input="onRequestPermissions"
+      />
+    </div>
+  </div>
+</template>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/profile/UserBasicDetails.vue b/app/javascript/dashboard/routes/dashboard/settings/profile/UserBasicDetails.vue
index 33fd03973..1e00c0b14 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/profile/UserBasicDetails.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/profile/UserBasicDetails.vue
@@ -1,51 +1,3 @@
-<template>
-  <form class="flex flex-col gap-4" @submit.prevent="updateUser('profile')">
-    <woot-input
-      v-model="userName"
-      :styles="inputStyles"
-      :class="{ error: v$.userName.$error }"
-      :label="$t('PROFILE_SETTINGS.FORM.NAME.LABEL')"
-      :placeholder="$t('PROFILE_SETTINGS.FORM.NAME.PLACEHOLDER')"
-      :error="`${
-        v$.userName.$error ? $t('PROFILE_SETTINGS.FORM.NAME.ERROR') : ''
-      }`"
-      @input="v$.userName.$touch"
-    />
-    <woot-input
-      v-model="userDisplayName"
-      :styles="inputStyles"
-      :class="{ error: v$.userDisplayName.$error }"
-      :label="$t('PROFILE_SETTINGS.FORM.DISPLAY_NAME.LABEL')"
-      :placeholder="$t('PROFILE_SETTINGS.FORM.DISPLAY_NAME.PLACEHOLDER')"
-      :error="`${
-        v$.userDisplayName.$error
-          ? $t('PROFILE_SETTINGS.FORM.DISPLAY_NAME.ERROR')
-          : ''
-      }`"
-      @input="v$.userDisplayName.$touch"
-    />
-    <woot-input
-      v-if="emailEnabled"
-      v-model="userEmail"
-      :styles="inputStyles"
-      :class="{ error: v$.userEmail.$error }"
-      :label="$t('PROFILE_SETTINGS.FORM.EMAIL.LABEL')"
-      :placeholder="$t('PROFILE_SETTINGS.FORM.EMAIL.PLACEHOLDER')"
-      :error="`${
-        v$.userEmail.$error ? $t('PROFILE_SETTINGS.FORM.EMAIL.ERROR') : ''
-      }`"
-      @input="v$.userEmail.$touch"
-    />
-    <form-button
-      type="submit"
-      color-scheme="primary"
-      variant="solid"
-      size="large"
-    >
-      {{ $t('PROFILE_SETTINGS.BTN_TEXT') }}
-    </form-button>
-  </form>
-</template>
 <script>
 import { useAlert } from 'dashboard/composables';
 import FormButton from 'v3/components/Form/Button.vue';
@@ -136,3 +88,51 @@ export default {
   },
 };
 </script>
+<template>
+  <form class="flex flex-col gap-4" @submit.prevent="updateUser('profile')">
+    <woot-input
+      v-model="userName"
+      :styles="inputStyles"
+      :class="{ error: v$.userName.$error }"
+      :label="$t('PROFILE_SETTINGS.FORM.NAME.LABEL')"
+      :placeholder="$t('PROFILE_SETTINGS.FORM.NAME.PLACEHOLDER')"
+      :error="`${
+        v$.userName.$error ? $t('PROFILE_SETTINGS.FORM.NAME.ERROR') : ''
+      }`"
+      @input="v$.userName.$touch"
+    />
+    <woot-input
+      v-model="userDisplayName"
+      :styles="inputStyles"
+      :class="{ error: v$.userDisplayName.$error }"
+      :label="$t('PROFILE_SETTINGS.FORM.DISPLAY_NAME.LABEL')"
+      :placeholder="$t('PROFILE_SETTINGS.FORM.DISPLAY_NAME.PLACEHOLDER')"
+      :error="`${
+        v$.userDisplayName.$error
+          ? $t('PROFILE_SETTINGS.FORM.DISPLAY_NAME.ERROR')
+          : ''
+      }`"
+      @input="v$.userDisplayName.$touch"
+    />
+    <woot-input
+      v-if="emailEnabled"
+      v-model="userEmail"
+      :styles="inputStyles"
+      :class="{ error: v$.userEmail.$error }"
+      :label="$t('PROFILE_SETTINGS.FORM.EMAIL.LABEL')"
+      :placeholder="$t('PROFILE_SETTINGS.FORM.EMAIL.PLACEHOLDER')"
+      :error="`${
+        v$.userEmail.$error ? $t('PROFILE_SETTINGS.FORM.EMAIL.ERROR') : ''
+      }`"
+      @input="v$.userEmail.$touch"
+    />
+    <form-button
+      type="submit"
+      color-scheme="primary"
+      variant="solid"
+      size="large"
+    >
+      {{ $t('PROFILE_SETTINGS.BTN_TEXT') }}
+    </form-button>
+  </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 d4ab08bc1..023b8eef1 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/profile/UserProfilePicture.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/profile/UserProfilePicture.vue
@@ -1,16 +1,3 @@
-<template>
-  <div class="flex flex-col gap-2">
-    <span class="text-sm font-medium text-ash-900">
-      {{ $t('PROFILE_SETTINGS.FORM.PICTURE') }}
-    </span>
-    <profile-avatar
-      :src="src"
-      :name="userNameWithoutEmoji"
-      @change="updateProfilePicture"
-      @delete="deleteProfilePicture"
-    />
-  </div>
-</template>
 <script setup>
 import { computed } from 'vue';
 import ProfileAvatar from 'v3/components/Form/ProfileAvatar.vue';
@@ -38,3 +25,16 @@ const deleteProfilePicture = () => {
   emits('delete');
 };
 </script>
+<template>
+  <div class="flex flex-col gap-2">
+    <span class="text-sm font-medium text-ash-900">
+      {{ $t('PROFILE_SETTINGS.FORM.PICTURE') }}
+    </span>
+    <profile-avatar
+      :src="src"
+      :name="userNameWithoutEmoji"
+      @change="updateProfilePicture"
+      @delete="deleteProfilePicture"
+    />
+  </div>
+</template>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/profile/Wrapper.vue b/app/javascript/dashboard/routes/dashboard/settings/profile/Wrapper.vue
index f0931afdc..90c725952 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/profile/Wrapper.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/profile/Wrapper.vue
@@ -1,3 +1,12 @@
+<script setup>
+defineProps({
+  keepAlive: {
+    type: Boolean,
+    default: true,
+  },
+});
+</script>
+
 <template>
   <div
     class="flex flex-col justify-between flex-1 h-full m-0 overflow-auto bg-white dark:bg-slate-900"
@@ -8,12 +17,3 @@
     <router-view v-else />
   </div>
 </template>
-
-<script setup>
-defineProps({
-  keepAlive: {
-    type: Boolean,
-    default: true,
-  },
-});
-</script>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/reports/AgentReports.vue b/app/javascript/dashboard/routes/dashboard/settings/reports/AgentReports.vue
index 68911721b..71e54c316 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/reports/AgentReports.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/reports/AgentReports.vue
@@ -1,13 +1,3 @@
-<template>
-  <woot-reports
-    key="agent-reports"
-    type="agent"
-    getter-key="agents/getAgents"
-    action-key="agents/get"
-    :download-button-label="$t('REPORT.DOWNLOAD_AGENT_REPORTS')"
-  />
-</template>
-
 <script>
 import WootReports from './components/WootReports.vue';
 
@@ -17,3 +7,13 @@ export default {
   },
 };
 </script>
+
+<template>
+  <woot-reports
+    key="agent-reports"
+    type="agent"
+    getter-key="agents/getAgents"
+    action-key="agents/get"
+    :download-button-label="$t('REPORT.DOWNLOAD_AGENT_REPORTS')"
+  />
+</template>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/reports/BotReports.vue b/app/javascript/dashboard/routes/dashboard/settings/reports/BotReports.vue
index 2f0c97335..a023d7f75 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/reports/BotReports.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/reports/BotReports.vue
@@ -1,20 +1,3 @@
-<template>
-  <div class="flex-1 p-4 overflow-auto">
-    <report-filter-selector
-      :show-agents-filter="false"
-      :show-group-by-filter="true"
-      :show-business-hours-switch="false"
-      @filter-change="onFilterChange"
-    />
-
-    <bot-metrics :filters="requestPayload" />
-    <report-container
-      :group-by="groupBy"
-      :report-keys="reportKeys"
-      :account-summary-key="'getBotSummary'"
-    />
-  </div>
-</template>
 <script>
 import { mapGetters } from 'vuex';
 import { useAlert } from 'dashboard/composables';
@@ -105,3 +88,20 @@ export default {
   },
 };
 </script>
+<template>
+  <div class="flex-1 p-4 overflow-auto">
+    <report-filter-selector
+      :show-agents-filter="false"
+      :show-group-by-filter="true"
+      :show-business-hours-switch="false"
+      @filter-change="onFilterChange"
+    />
+
+    <bot-metrics :filters="requestPayload" />
+    <report-container
+      :group-by="groupBy"
+      :report-keys="reportKeys"
+      :account-summary-key="'getBotSummary'"
+    />
+  </div>
+</template>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/reports/CsatResponses.vue b/app/javascript/dashboard/routes/dashboard/settings/reports/CsatResponses.vue
index 3c137161e..f96295e8d 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/reports/CsatResponses.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/reports/CsatResponses.vue
@@ -1,25 +1,3 @@
-<template>
-  <div class="flex-1 p-4 overflow-auto">
-    <report-filter-selector
-      :show-agents-filter="true"
-      :show-inbox-filter="true"
-      :show-rating-filter="true"
-      :show-team-filter="isTeamsEnabled"
-      :show-business-hours-switch="false"
-      @filter-change="onFilterChange"
-    />
-    <woot-button
-      color-scheme="success"
-      class-names="button--fixed-top"
-      icon="arrow-download"
-      @click="downloadReports"
-    >
-      {{ $t('CSAT_REPORTS.DOWNLOAD') }}
-    </woot-button>
-    <csat-metrics :filters="requestPayload" />
-    <csat-table :page-index="pageIndex" @page-change="onPageNumberChange" />
-  </div>
-</template>
 <script>
 import { mapGetters } from 'vuex';
 import { useAlert } from 'dashboard/composables';
@@ -128,3 +106,25 @@ export default {
   },
 };
 </script>
+<template>
+  <div class="flex-1 p-4 overflow-auto">
+    <report-filter-selector
+      :show-agents-filter="true"
+      :show-inbox-filter="true"
+      :show-rating-filter="true"
+      :show-team-filter="isTeamsEnabled"
+      :show-business-hours-switch="false"
+      @filter-change="onFilterChange"
+    />
+    <woot-button
+      color-scheme="success"
+      class-names="button--fixed-top"
+      icon="arrow-download"
+      @click="downloadReports"
+    >
+      {{ $t('CSAT_REPORTS.DOWNLOAD') }}
+    </woot-button>
+    <csat-metrics :filters="requestPayload" />
+    <csat-table :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 f055a9a4f..3535b3baf 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/reports/InboxReports.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/reports/InboxReports.vue
@@ -1,13 +1,3 @@
-<template>
-  <woot-reports
-    key="inbox-reports"
-    type="inbox"
-    getter-key="inboxes/getInboxes"
-    action-key="inboxes/get"
-    :download-button-label="$t('INBOX_REPORTS.DOWNLOAD_INBOX_REPORTS')"
-  />
-</template>
-
 <script>
 import WootReports from './components/WootReports.vue';
 
@@ -17,3 +7,13 @@ export default {
   },
 };
 </script>
+
+<template>
+  <woot-reports
+    key="inbox-reports"
+    type="inbox"
+    getter-key="inboxes/getInboxes"
+    action-key="inboxes/get"
+    :download-button-label="$t('INBOX_REPORTS.DOWNLOAD_INBOX_REPORTS')"
+  />
+</template>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/reports/Index.vue b/app/javascript/dashboard/routes/dashboard/settings/reports/Index.vue
index 051bc7298..82de37445 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/reports/Index.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/reports/Index.vue
@@ -1,22 +1,3 @@
-<template>
-  <div class="flex-1 p-4 overflow-auto">
-    <woot-button
-      color-scheme="success"
-      class-names="button--fixed-top"
-      icon="arrow-download"
-      @click="downloadAgentReports"
-    >
-      {{ $t('REPORT.DOWNLOAD_AGENT_REPORTS') }}
-    </woot-button>
-    <report-filter-selector
-      :show-agents-filter="false"
-      :show-group-by-filter="true"
-      @filter-change="onFilterChange"
-    />
-    <report-container :group-by="groupBy" />
-  </div>
-</template>
-
 <script>
 import { mapGetters } from 'vuex';
 import { useAlert } from 'dashboard/composables';
@@ -124,3 +105,22 @@ export default {
   },
 };
 </script>
+
+<template>
+  <div class="flex-1 p-4 overflow-auto">
+    <woot-button
+      color-scheme="success"
+      class-names="button--fixed-top"
+      icon="arrow-download"
+      @click="downloadAgentReports"
+    >
+      {{ $t('REPORT.DOWNLOAD_AGENT_REPORTS') }}
+    </woot-button>
+    <report-filter-selector
+      :show-agents-filter="false"
+      :show-group-by-filter="true"
+      @filter-change="onFilterChange"
+    />
+    <report-container :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 77a010846..f0500d1ff 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/reports/LabelReports.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/reports/LabelReports.vue
@@ -1,13 +1,3 @@
-<template>
-  <woot-reports
-    key="label-reports"
-    type="label"
-    getter-key="labels/getLabels"
-    action-key="labels/get"
-    :download-button-label="$t('LABEL_REPORTS.DOWNLOAD_LABEL_REPORTS')"
-  />
-</template>
-
 <script>
 import WootReports from './components/WootReports.vue';
 
@@ -17,3 +7,13 @@ export default {
   },
 };
 </script>
+
+<template>
+  <woot-reports
+    key="label-reports"
+    type="label"
+    getter-key="labels/getLabels"
+    action-key="labels/get"
+    :download-button-label="$t('LABEL_REPORTS.DOWNLOAD_LABEL_REPORTS')"
+  />
+</template>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/reports/LiveReports.vue b/app/javascript/dashboard/routes/dashboard/settings/reports/LiveReports.vue
index ae709db41..98d1140b1 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/reports/LiveReports.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/reports/LiveReports.vue
@@ -1,75 +1,3 @@
-<template>
-  <div class="flex-1 overflow-auto p-4">
-    <div class="flex flex-col md:flex-row items-center">
-      <div
-        class="flex-1 w-full max-w-full md:w-[65%] md:max-w-[65%] conversation-metric"
-      >
-        <metric-card
-          :header="$t('OVERVIEW_REPORTS.ACCOUNT_CONVERSATIONS.HEADER')"
-          :is-loading="uiFlags.isFetchingAccountConversationMetric"
-          :loading-message="
-            $t('OVERVIEW_REPORTS.ACCOUNT_CONVERSATIONS.LOADING_MESSAGE')
-          "
-        >
-          <div
-            v-for="(metric, name, index) in conversationMetrics"
-            :key="index"
-            class="metric-content flex-1 min-w-0"
-          >
-            <h3 class="heading">
-              {{ name }}
-            </h3>
-            <p class="metric">{{ metric }}</p>
-          </div>
-        </metric-card>
-      </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')">
-          <div
-            v-for="(metric, name, index) in agentStatusMetrics"
-            :key="index"
-            class="metric-content flex-1 min-w-0"
-          >
-            <h3 class="heading">
-              {{ name }}
-            </h3>
-            <p class="metric">{{ metric }}</p>
-          </div>
-        </metric-card>
-      </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')">
-        <template #control>
-          <woot-button
-            icon="arrow-download"
-            size="small"
-            variant="smooth"
-            color-scheme="secondary"
-            @click="downloadHeatmapData"
-          >
-            Download Report
-          </woot-button>
-        </template>
-        <report-heatmap
-          :heat-data="accountConversationHeatmap"
-          :is-loading="uiFlags.isFetchingAccountConversationsHeatmap"
-        />
-      </metric-card>
-    </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
-          :agents="agents"
-          :agent-metrics="agentConversationMetric"
-          :page-index="pageIndex"
-          :is-loading="uiFlags.isFetchingAgentConversationMetric"
-          @page-change="onPageNumberChange"
-        />
-      </metric-card>
-    </div>
-  </div>
-</template>
 <script>
 import { mapGetters } from 'vuex';
 import AgentTable from './components/overview/AgentTable.vue';
@@ -190,3 +118,75 @@ export default {
   },
 };
 </script>
+<template>
+  <div class="flex-1 overflow-auto p-4">
+    <div class="flex flex-col md:flex-row items-center">
+      <div
+        class="flex-1 w-full max-w-full md:w-[65%] md:max-w-[65%] conversation-metric"
+      >
+        <metric-card
+          :header="$t('OVERVIEW_REPORTS.ACCOUNT_CONVERSATIONS.HEADER')"
+          :is-loading="uiFlags.isFetchingAccountConversationMetric"
+          :loading-message="
+            $t('OVERVIEW_REPORTS.ACCOUNT_CONVERSATIONS.LOADING_MESSAGE')
+          "
+        >
+          <div
+            v-for="(metric, name, index) in conversationMetrics"
+            :key="index"
+            class="metric-content flex-1 min-w-0"
+          >
+            <h3 class="heading">
+              {{ name }}
+            </h3>
+            <p class="metric">{{ metric }}</p>
+          </div>
+        </metric-card>
+      </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')">
+          <div
+            v-for="(metric, name, index) in agentStatusMetrics"
+            :key="index"
+            class="metric-content flex-1 min-w-0"
+          >
+            <h3 class="heading">
+              {{ name }}
+            </h3>
+            <p class="metric">{{ metric }}</p>
+          </div>
+        </metric-card>
+      </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')">
+        <template #control>
+          <woot-button
+            icon="arrow-download"
+            size="small"
+            variant="smooth"
+            color-scheme="secondary"
+            @click="downloadHeatmapData"
+          >
+            Download Report
+          </woot-button>
+        </template>
+        <report-heatmap
+          :heat-data="accountConversationHeatmap"
+          :is-loading="uiFlags.isFetchingAccountConversationsHeatmap"
+        />
+      </metric-card>
+    </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
+          :agents="agents"
+          :agent-metrics="agentConversationMetric"
+          :page-index="pageIndex"
+          :is-loading="uiFlags.isFetchingAgentConversationMetric"
+          @page-change="onPageNumberChange"
+        />
+      </metric-card>
+    </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 273f814b7..ab54bda83 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/reports/ReportContainer.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/reports/ReportContainer.vue
@@ -1,35 +1,3 @@
-<template>
-  <div
-    class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 bg-white dark:bg-slate-800 p-2 border border-slate-100 dark:border-slate-700 rounded-md"
-  >
-    <div
-      v-for="metric in metrics"
-      :key="metric.KEY"
-      class="p-4 rounded-md mb-3"
-    >
-      <chart-stats :metric="metric" :account-summary-key="accountSummaryKey" />
-      <div class="mt-4 h-72">
-        <woot-loading-state
-          v-if="accountReport.isFetching[metric.KEY]"
-          class="text-xs"
-          :message="$t('REPORT.LOADING_CHART')"
-        />
-        <div v-else class="h-72 flex items-center justify-center">
-          <woot-bar
-            v-if="accountReport.data[metric.KEY].length"
-            :collection="getCollection(metric)"
-            :chart-options="getChartOptions(metric)"
-            class="h-72 w-full"
-          />
-          <span v-else class="text-sm text-slate-600">
-            {{ $t('REPORT.NO_ENOUGH_DATA') }}
-          </span>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
 <script>
 import { GROUP_BY_FILTER, METRIC_CHART } from './constants';
 import fromUnixTime from 'date-fns/fromUnixTime';
@@ -150,3 +118,35 @@ export default {
   },
 };
 </script>
+
+<template>
+  <div
+    class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 bg-white dark:bg-slate-800 p-2 border border-slate-100 dark:border-slate-700 rounded-md"
+  >
+    <div
+      v-for="metric in metrics"
+      :key="metric.KEY"
+      class="p-4 rounded-md mb-3"
+    >
+      <chart-stats :metric="metric" :account-summary-key="accountSummaryKey" />
+      <div class="mt-4 h-72">
+        <woot-loading-state
+          v-if="accountReport.isFetching[metric.KEY]"
+          class="text-xs"
+          :message="$t('REPORT.LOADING_CHART')"
+        />
+        <div v-else class="h-72 flex items-center justify-center">
+          <woot-bar
+            v-if="accountReport.data[metric.KEY].length"
+            :collection="getCollection(metric)"
+            :chart-options="getChartOptions(metric)"
+            class="h-72 w-full"
+          />
+          <span v-else class="text-sm text-slate-600">
+            {{ $t('REPORT.NO_ENOUGH_DATA') }}
+          </span>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/reports/SLAReports.vue b/app/javascript/dashboard/routes/dashboard/settings/reports/SLAReports.vue
index aee742006..d61020d86 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/reports/SLAReports.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/reports/SLAReports.vue
@@ -1,31 +1,3 @@
-<template>
-  <div class="flex flex-col flex-1 gap-6 px-4 pt-4 overflow-auto">
-    <SLAReportFilters @filter-change="onFilterChange" />
-    <woot-button
-      color-scheme="success"
-      class-names="button--fixed-top"
-      icon="arrow-download"
-      @click="downloadReports"
-    >
-      {{ $t('SLA_REPORTS.DOWNLOAD_SLA_REPORTS') }}
-    </woot-button>
-    <div class="flex flex-col gap-6">
-      <SLAMetrics
-        :hit-rate="slaMetrics.hitRate"
-        :no-of-breaches="slaMetrics.numberOfSLAMisses"
-        :no-of-conversations="slaMetrics.numberOfConversations"
-        :is-loading="uiFlags.isFetchingMetrics"
-      />
-      <SLATable
-        :sla-reports="slaReports"
-        :is-loading="uiFlags.isFetching"
-        :current-page="Number(slaMeta.currentPage)"
-        :total-count="Number(slaMeta.count)"
-        @page-change="onPageChange"
-      />
-    </div>
-  </div>
-</template>
 <script>
 import { mapGetters } from 'vuex';
 import { useAlert } from 'dashboard/composables';
@@ -103,3 +75,31 @@ export default {
   },
 };
 </script>
+<template>
+  <div class="flex flex-col flex-1 gap-6 px-4 pt-4 overflow-auto">
+    <SLAReportFilters @filter-change="onFilterChange" />
+    <woot-button
+      color-scheme="success"
+      class-names="button--fixed-top"
+      icon="arrow-download"
+      @click="downloadReports"
+    >
+      {{ $t('SLA_REPORTS.DOWNLOAD_SLA_REPORTS') }}
+    </woot-button>
+    <div class="flex flex-col gap-6">
+      <SLAMetrics
+        :hit-rate="slaMetrics.hitRate"
+        :no-of-breaches="slaMetrics.numberOfSLAMisses"
+        :no-of-conversations="slaMetrics.numberOfConversations"
+        :is-loading="uiFlags.isFetchingMetrics"
+      />
+      <SLATable
+        :sla-reports="slaReports"
+        :is-loading="uiFlags.isFetching"
+        :current-page="Number(slaMeta.currentPage)"
+        :total-count="Number(slaMeta.count)"
+        @page-change="onPageChange"
+      />
+    </div>
+  </div>
+</template>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/reports/TeamReports.vue b/app/javascript/dashboard/routes/dashboard/settings/reports/TeamReports.vue
index d920404c1..e93ee2c3d 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/reports/TeamReports.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/reports/TeamReports.vue
@@ -1,13 +1,3 @@
-<template>
-  <woot-reports
-    key="team-reports"
-    type="team"
-    getter-key="teams/getTeams"
-    action-key="teams/get"
-    :download-button-label="$t('TEAM_REPORTS.DOWNLOAD_TEAM_REPORTS')"
-  />
-</template>
-
 <script>
 import WootReports from './components/WootReports.vue';
 
@@ -17,3 +7,13 @@ export default {
   },
 };
 </script>
+
+<template>
+  <woot-reports
+    key="team-reports"
+    type="team"
+    getter-key="teams/getTeams"
+    action-key="teams/get"
+    :download-button-label="$t('TEAM_REPORTS.DOWNLOAD_TEAM_REPORTS')"
+  />
+</template>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/reports/components/ChartElements/ChartStats.vue b/app/javascript/dashboard/routes/dashboard/settings/reports/components/ChartElements/ChartStats.vue
index 4faf4de2b..1e140baf1 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/reports/components/ChartElements/ChartStats.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/reports/components/ChartElements/ChartStats.vue
@@ -1,3 +1,27 @@
+<script>
+import reportMixin from 'dashboard/mixins/reportMixin';
+export default {
+  mixins: [reportMixin],
+  props: {
+    metric: {
+      type: Object,
+      default: () => ({}),
+    },
+  },
+  methods: {
+    trendColor(value, key) {
+      if (this.isAverageMetricType(key)) {
+        return value > 0
+          ? 'border-red-500 text-red-500'
+          : 'border-green-500 text-green-500';
+      }
+      return value < 0
+        ? 'border-red-500 text-red-500'
+        : 'border-green-500 text-green-500';
+    },
+  },
+};
+</script>
 <template>
   <div class="text-slate-900 dark:text-slate-100">
     <span class="text-sm">
@@ -25,27 +49,3 @@
     </div>
   </div>
 </template>
-<script>
-import reportMixin from 'dashboard/mixins/reportMixin';
-export default {
-  mixins: [reportMixin],
-  props: {
-    metric: {
-      type: Object,
-      default: () => ({}),
-    },
-  },
-  methods: {
-    trendColor(value, key) {
-      if (this.isAverageMetricType(key)) {
-        return value > 0
-          ? 'border-red-500 text-red-500'
-          : 'border-green-500 text-green-500';
-      }
-      return value < 0
-        ? 'border-red-500 text-red-500'
-        : 'border-green-500 text-green-500';
-    },
-  },
-};
-</script>
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 77106e8d5..21bb8e71e 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/reports/components/CsatMetrics.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/reports/components/CsatMetrics.vue
@@ -1,52 +1,3 @@
-<template>
-  <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
-      :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
-      :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
-      :label="$t('CSAT_REPORTS.METRIC.RESPONSE_RATE.LABEL')"
-      :info-text="$t('CSAT_REPORTS.METRIC.RESPONSE_RATE.TOOLTIP')"
-      :value="formatToPercent(responseRate)"
-      class="xs:w-full sm:max-w-[50%] lg:w-1/6 lg:max-w-[16%]"
-    />
-
-    <div
-      v-if="metrics.totalResponseCount && !ratingFilterEnabled"
-      ref="csatHorizontalBarChart"
-      class="w-full md:w-1/2 md:max-w-[50%] flex-1 rtl:[direction:initial] p-4"
-    >
-      <h3
-        class="flex items-center text-xs md:text-sm font-medium m-0 text-slate-800 dark:text-slate-100"
-      >
-        <div class="flex justify-end flex-row-reverse">
-          <div
-            v-for="(rating, key, index) in ratingPercentage"
-            :key="rating + key + index"
-            class="ltr:pr-4 rtl:pl-4"
-          >
-            <span class="my-0 mx-0.5">{{ ratingToEmoji(key) }}</span>
-            <span>{{ formatToPercent(rating) }}</span>
-          </div>
-        </div>
-      </h3>
-      <div class="mt-2">
-        <woot-horizontal-bar :collection="chartData" :height="24" />
-      </div>
-    </div>
-  </div>
-</template>
 <script>
 import { mapGetters } from 'vuex';
 import CsatMetricCard from './ReportMetricCard.vue';
@@ -104,3 +55,52 @@ export default {
   },
 };
 </script>
+<template>
+  <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
+      :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
+      :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
+      :label="$t('CSAT_REPORTS.METRIC.RESPONSE_RATE.LABEL')"
+      :info-text="$t('CSAT_REPORTS.METRIC.RESPONSE_RATE.TOOLTIP')"
+      :value="formatToPercent(responseRate)"
+      class="xs:w-full sm:max-w-[50%] lg:w-1/6 lg:max-w-[16%]"
+    />
+
+    <div
+      v-if="metrics.totalResponseCount && !ratingFilterEnabled"
+      ref="csatHorizontalBarChart"
+      class="w-full md:w-1/2 md:max-w-[50%] flex-1 rtl:[direction:initial] p-4"
+    >
+      <h3
+        class="flex items-center text-xs md:text-sm font-medium m-0 text-slate-800 dark:text-slate-100"
+      >
+        <div class="flex justify-end flex-row-reverse">
+          <div
+            v-for="(rating, key, index) in ratingPercentage"
+            :key="rating + key + index"
+            class="ltr:pr-4 rtl:pl-4"
+          >
+            <span class="my-0 mx-0.5">{{ ratingToEmoji(key) }}</span>
+            <span>{{ formatToPercent(rating) }}</span>
+          </div>
+        </div>
+      </h3>
+      <div class="mt-2">
+        <woot-horizontal-bar :collection="chartData" :height="24" />
+      </div>
+    </div>
+  </div>
+</template>
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 d78b97666..5db684e44 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/reports/components/CsatTable.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/reports/components/CsatTable.vue
@@ -1,26 +1,3 @@
-<template>
-  <div class="csat--table-container">
-    <ve-table
-      max-height="calc(100vh - 21.875rem)"
-      :fixed-header="true"
-      :border-around="true"
-      :columns="columns"
-      :table-data="tableData"
-    />
-    <div v-show="!tableData.length" class="csat--empty-records">
-      {{ $t('CSAT_REPORTS.NO_RECORDS') }}
-    </div>
-    <div v-if="metrics.totalResponseCount" class="table-pagination">
-      <ve-pagination
-        :total="metrics.totalResponseCount"
-        :page-index="pageIndex"
-        :page-size="25"
-        :page-size-option="[25]"
-        @on-page-number-change="onPageNumberChange"
-      />
-    </div>
-  </div>
-</template>
 <script>
 import { VeTable, VePagination } from 'vue-easytable';
 import UserAvatarWithName from 'dashboard/components/widgets/UserAvatarWithName.vue';
@@ -149,6 +126,29 @@ export default {
   },
 };
 </script>
+<template>
+  <div class="csat--table-container">
+    <ve-table
+      max-height="calc(100vh - 21.875rem)"
+      :fixed-header="true"
+      :border-around="true"
+      :columns="columns"
+      :table-data="tableData"
+    />
+    <div v-show="!tableData.length" class="csat--empty-records">
+      {{ $t('CSAT_REPORTS.NO_RECORDS') }}
+    </div>
+    <div v-if="metrics.totalResponseCount" class="table-pagination">
+      <ve-pagination
+        :total="metrics.totalResponseCount"
+        :page-index="pageIndex"
+        :page-size="25"
+        :page-size-option="[25]"
+        @on-page-number-change="onPageNumberChange"
+      />
+    </div>
+  </div>
+</template>
 <style lang="scss" scoped>
 .csat--table-container {
   display: flex;
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 6312419a0..16847fecb 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/reports/components/FilterSelector.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/reports/components/FilterSelector.vue
@@ -1,55 +1,3 @@
-<template>
-  <div class="flex flex-col justify-between gap-3 mb-4 md:flex-row">
-    <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
-        v-if="isDateRangeSelected"
-        show-range
-        class="no-margin auto-width"
-        :value="customDateRange"
-        :confirm-text="$t('REPORT.CUSTOM_DATE_RANGE.CONFIRM')"
-        :placeholder="$t('REPORT.CUSTOM_DATE_RANGE.PLACEHOLDER')"
-        @change="onCustomDateRangeChange"
-      />
-      <reports-filters-date-group-by
-        v-if="showGroupByFilter && isGroupByPossible"
-        :valid-group-options="validGroupOptions"
-        :selected-option="selectedGroupByFilter"
-        @on-grouping-change="onGroupingChange"
-      />
-      <reports-filters-agents
-        v-if="showAgentsFilter"
-        @agents-filter-selection="handleAgentsFilterSelection"
-      />
-      <reports-filters-labels
-        v-if="showLabelsFilter"
-        @labels-filter-selection="handleLabelsFilterSelection"
-      />
-      <reports-filters-teams
-        v-if="showTeamFilter"
-        @team-filter-selection="handleTeamFilterSelection"
-      />
-      <reports-filters-inboxes
-        v-if="showInboxFilter"
-        @inbox-filter-selection="handleInboxFilterSelection"
-      />
-      <reports-filters-ratings
-        v-if="showRatingFilter"
-        @rating-filter-selection="handleRatingFilterSelection"
-      />
-    </div>
-    <div v-if="showBusinessHoursSwitch" class="flex items-center">
-      <span class="mx-2 text-sm whitespace-nowrap">
-        {{ $t('REPORT.BUSINESS_HOURS') }}
-      </span>
-      <span>
-        <woot-switch v-model="businessHoursSelected" />
-      </span>
-    </div>
-  </div>
-</template>
 <script>
 import WootDateRangePicker from 'dashboard/components/ui/DateRangePicker.vue';
 import ReportsFiltersDateRange from './Filters/DateRange.vue';
@@ -231,3 +179,55 @@ export default {
   },
 };
 </script>
+<template>
+  <div class="flex flex-col justify-between gap-3 mb-4 md:flex-row">
+    <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
+        v-if="isDateRangeSelected"
+        show-range
+        class="no-margin auto-width"
+        :value="customDateRange"
+        :confirm-text="$t('REPORT.CUSTOM_DATE_RANGE.CONFIRM')"
+        :placeholder="$t('REPORT.CUSTOM_DATE_RANGE.PLACEHOLDER')"
+        @change="onCustomDateRangeChange"
+      />
+      <reports-filters-date-group-by
+        v-if="showGroupByFilter && isGroupByPossible"
+        :valid-group-options="validGroupOptions"
+        :selected-option="selectedGroupByFilter"
+        @on-grouping-change="onGroupingChange"
+      />
+      <reports-filters-agents
+        v-if="showAgentsFilter"
+        @agents-filter-selection="handleAgentsFilterSelection"
+      />
+      <reports-filters-labels
+        v-if="showLabelsFilter"
+        @labels-filter-selection="handleLabelsFilterSelection"
+      />
+      <reports-filters-teams
+        v-if="showTeamFilter"
+        @team-filter-selection="handleTeamFilterSelection"
+      />
+      <reports-filters-inboxes
+        v-if="showInboxFilter"
+        @inbox-filter-selection="handleInboxFilterSelection"
+      />
+      <reports-filters-ratings
+        v-if="showRatingFilter"
+        @rating-filter-selection="handleRatingFilterSelection"
+      />
+    </div>
+    <div v-if="showBusinessHoursSwitch" class="flex items-center">
+      <span class="mx-2 text-sm whitespace-nowrap">
+        {{ $t('REPORT.BUSINESS_HOURS') }}
+      </span>
+      <span>
+        <woot-switch v-model="businessHoursSelected" />
+      </span>
+    </div>
+  </div>
+</template>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/reports/components/Filters/Agents.vue b/app/javascript/dashboard/routes/dashboard/settings/reports/components/Filters/Agents.vue
index 4baecbb48..610d5ea8b 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/reports/components/Filters/Agents.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/reports/components/Filters/Agents.vue
@@ -1,23 +1,3 @@
-<template>
-  <div class="multiselect-wrap--small">
-    <multiselect
-      v-model="selectedOptions"
-      class="no-margin"
-      :options="options"
-      track-by="id"
-      label="name"
-      :multiple="true"
-      :close-on-select="false"
-      :clear-on-select="false"
-      :hide-selected="true"
-      :placeholder="$t('CSAT_REPORTS.FILTERS.AGENTS.PLACEHOLDER')"
-      selected-label
-      :select-label="$t('FORMS.MULTISELECT.ENTER_TO_SELECT')"
-      :deselect-label="$t('FORMS.MULTISELECT.ENTER_TO_REMOVE')"
-      @input="handleInput"
-    />
-  </div>
-</template>
 <script>
 import { mapGetters } from 'vuex';
 
@@ -43,3 +23,23 @@ export default {
   },
 };
 </script>
+<template>
+  <div class="multiselect-wrap--small">
+    <multiselect
+      v-model="selectedOptions"
+      class="no-margin"
+      :options="options"
+      track-by="id"
+      label="name"
+      :multiple="true"
+      :close-on-select="false"
+      :clear-on-select="false"
+      :hide-selected="true"
+      :placeholder="$t('CSAT_REPORTS.FILTERS.AGENTS.PLACEHOLDER')"
+      selected-label
+      :select-label="$t('FORMS.MULTISELECT.ENTER_TO_SELECT')"
+      :deselect-label="$t('FORMS.MULTISELECT.ENTER_TO_REMOVE')"
+      @input="handleInput"
+    />
+  </div>
+</template>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/reports/components/Filters/DateGroupBy.vue b/app/javascript/dashboard/routes/dashboard/settings/reports/components/Filters/DateGroupBy.vue
index a360c5e8d..84a07310b 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/reports/components/Filters/DateGroupBy.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/reports/components/Filters/DateGroupBy.vue
@@ -1,22 +1,3 @@
-<template>
-  <div class="multiselect-wrap--small">
-    <p aria-hidden="true" class="hide">
-      {{ $t('REPORT.GROUP_BY_FILTER_DROPDOWN_LABEL') }}
-    </p>
-    <multiselect
-      v-model="currentSelectedFilter"
-      class="no-margin"
-      track-by="id"
-      label="groupBy"
-      :placeholder="$t('REPORT.GROUP_BY_FILTER_DROPDOWN_LABEL')"
-      :options="translatedOptions"
-      :allow-empty="false"
-      :show-labels="false"
-      @select="changeFilterSelection"
-    />
-  </div>
-</template>
-
 <script>
 import { GROUP_BY_OPTIONS } from '../../constants';
 
@@ -65,3 +46,22 @@ export default {
   },
 };
 </script>
+
+<template>
+  <div class="multiselect-wrap--small">
+    <p aria-hidden="true" class="hide">
+      {{ $t('REPORT.GROUP_BY_FILTER_DROPDOWN_LABEL') }}
+    </p>
+    <multiselect
+      v-model="currentSelectedFilter"
+      class="no-margin"
+      track-by="id"
+      label="groupBy"
+      :placeholder="$t('REPORT.GROUP_BY_FILTER_DROPDOWN_LABEL')"
+      :options="translatedOptions"
+      :allow-empty="false"
+      :show-labels="false"
+      @select="changeFilterSelection"
+    />
+  </div>
+</template>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/reports/components/Filters/DateRange.vue b/app/javascript/dashboard/routes/dashboard/settings/reports/components/Filters/DateRange.vue
index b98283ced..4d1cc340f 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/reports/components/Filters/DateRange.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/reports/components/Filters/DateRange.vue
@@ -1,22 +1,3 @@
-<template>
-  <div class="multiselect-wrap--small">
-    <multiselect
-      v-model="selectedOption"
-      class="no-margin"
-      track-by="name"
-      label="name"
-      :placeholder="$t('FORMS.MULTISELECT.SELECT_ONE')"
-      selected-label
-      :select-label="$t('FORMS.MULTISELECT.ENTER_TO_SELECT')"
-      deselect-label=""
-      :options="options"
-      :searchable="false"
-      :allow-empty="false"
-      @select="updateRange"
-    />
-  </div>
-</template>
-
 <script>
 import { DATE_RANGE_OPTIONS } from '../../constants';
 
@@ -44,3 +25,22 @@ export default {
   },
 };
 </script>
+
+<template>
+  <div class="multiselect-wrap--small">
+    <multiselect
+      v-model="selectedOption"
+      class="no-margin"
+      track-by="name"
+      label="name"
+      :placeholder="$t('FORMS.MULTISELECT.SELECT_ONE')"
+      selected-label
+      :select-label="$t('FORMS.MULTISELECT.ENTER_TO_SELECT')"
+      deselect-label=""
+      :options="options"
+      :searchable="false"
+      :allow-empty="false"
+      @select="updateRange"
+    />
+  </div>
+</template>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/reports/components/Filters/Inboxes.vue b/app/javascript/dashboard/routes/dashboard/settings/reports/components/Filters/Inboxes.vue
index 652cb06a6..6d5dae41f 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/reports/components/Filters/Inboxes.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/reports/components/Filters/Inboxes.vue
@@ -1,18 +1,3 @@
-<template>
-  <div class="multiselect-wrap--small">
-    <multiselect
-      v-model="selectedOption"
-      class="no-margin"
-      :placeholder="$t('INBOX_REPORTS.FILTER_DROPDOWN_LABEL')"
-      label="name"
-      track-by="id"
-      :options="options"
-      :option-height="24"
-      :show-labels="false"
-      @input="handleInput"
-    />
-  </div>
-</template>
 <script>
 import { mapGetters } from 'vuex';
 
@@ -38,3 +23,18 @@ export default {
   },
 };
 </script>
+<template>
+  <div class="multiselect-wrap--small">
+    <multiselect
+      v-model="selectedOption"
+      class="no-margin"
+      :placeholder="$t('INBOX_REPORTS.FILTER_DROPDOWN_LABEL')"
+      label="name"
+      track-by="id"
+      :options="options"
+      :option-height="24"
+      :show-labels="false"
+      @input="handleInput"
+    />
+  </div>
+</template>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/reports/components/Filters/Labels.vue b/app/javascript/dashboard/routes/dashboard/settings/reports/components/Filters/Labels.vue
index d32879507..5809a1358 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/reports/components/Filters/Labels.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/reports/components/Filters/Labels.vue
@@ -1,3 +1,28 @@
+<script>
+import { mapGetters } from 'vuex';
+
+export default {
+  name: 'ReportsFiltersLabels',
+  data() {
+    return {
+      selectedOption: null,
+    };
+  },
+  computed: {
+    ...mapGetters({
+      options: 'labels/getLabels',
+    }),
+  },
+  mounted() {
+    this.$store.dispatch('labels/get');
+  },
+  methods: {
+    handleInput() {
+      this.$emit('labels-filter-selection', this.selectedOption);
+    },
+  },
+};
+</script>
 <template>
   <div class="multiselect-wrap--small">
     <multiselect
@@ -40,28 +65,3 @@
     </multiselect>
   </div>
 </template>
-<script>
-import { mapGetters } from 'vuex';
-
-export default {
-  name: 'ReportsFiltersLabels',
-  data() {
-    return {
-      selectedOption: null,
-    };
-  },
-  computed: {
-    ...mapGetters({
-      options: 'labels/getLabels',
-    }),
-  },
-  mounted() {
-    this.$store.dispatch('labels/get');
-  },
-  methods: {
-    handleInput() {
-      this.$emit('labels-filter-selection', this.selectedOption);
-    },
-  },
-};
-</script>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/reports/components/Filters/Ratings.vue b/app/javascript/dashboard/routes/dashboard/settings/reports/components/Filters/Ratings.vue
index 49d6689ae..4988dcabe 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/reports/components/Filters/Ratings.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/reports/components/Filters/Ratings.vue
@@ -1,19 +1,3 @@
-<template>
-  <div class="multiselect-wrap--small">
-    <multiselect
-      v-model="selectedOption"
-      class="no-margin"
-      :option-height="24"
-      :placeholder="$t('FORMS.MULTISELECT.SELECT_ONE')"
-      :options="options"
-      :show-labels="false"
-      track-by="value"
-      label="label"
-      @input="handleInput"
-    />
-  </div>
-</template>
-
 <script>
 import { CSAT_RATINGS } from 'shared/constants/messages';
 
@@ -37,3 +21,19 @@ export default {
   },
 };
 </script>
+
+<template>
+  <div class="multiselect-wrap--small">
+    <multiselect
+      v-model="selectedOption"
+      class="no-margin"
+      :option-height="24"
+      :placeholder="$t('FORMS.MULTISELECT.SELECT_ONE')"
+      :options="options"
+      :show-labels="false"
+      track-by="value"
+      label="label"
+      @input="handleInput"
+    />
+  </div>
+</template>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/reports/components/Filters/Teams.vue b/app/javascript/dashboard/routes/dashboard/settings/reports/components/Filters/Teams.vue
index f834a9e71..a5bb458bd 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/reports/components/Filters/Teams.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/reports/components/Filters/Teams.vue
@@ -1,18 +1,3 @@
-<template>
-  <div class="multiselect-wrap--small">
-    <multiselect
-      v-model="selectedOption"
-      class="no-margin"
-      :placeholder="$t('TEAM_REPORTS.FILTER_DROPDOWN_LABEL')"
-      label="name"
-      track-by="id"
-      :options="options"
-      :option-height="24"
-      :show-labels="false"
-      @input="handleInput"
-    />
-  </div>
-</template>
 <script>
 import { mapGetters } from 'vuex';
 
@@ -38,3 +23,18 @@ export default {
   },
 };
 </script>
+<template>
+  <div class="multiselect-wrap--small">
+    <multiselect
+      v-model="selectedOption"
+      class="no-margin"
+      :placeholder="$t('TEAM_REPORTS.FILTER_DROPDOWN_LABEL')"
+      label="name"
+      track-by="id"
+      :options="options"
+      :option-height="24"
+      :show-labels="false"
+      @input="handleInput"
+    />
+  </div>
+</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 88eae0541..76cd64be7 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/reports/components/ReportFilters.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/reports/components/ReportFilters.vue
@@ -1,3 +1,144 @@
+<script>
+import endOfDay from 'date-fns/endOfDay';
+import getUnixTime from 'date-fns/getUnixTime';
+import startOfDay from 'date-fns/startOfDay';
+import subDays from 'date-fns/subDays';
+import Thumbnail from 'dashboard/components/widgets/Thumbnail.vue';
+import WootDateRangePicker from 'dashboard/components/ui/DateRangePicker.vue';
+
+import { GROUP_BY_FILTER } from '../constants';
+const CUSTOM_DATE_RANGE_ID = 5;
+
+export default {
+  components: {
+    WootDateRangePicker,
+    Thumbnail,
+  },
+  props: {
+    filterItemsList: {
+      type: Array,
+      default: () => [],
+    },
+    groupByFilterItemsList: {
+      type: Array,
+      default: () => [],
+    },
+    type: {
+      type: String,
+      default: 'agent',
+    },
+    selectedGroupByFilter: {
+      type: Object,
+      default: () => {},
+    },
+  },
+  data() {
+    return {
+      currentSelectedFilter: null,
+      currentDateRangeSelection: this.$t('REPORT.DATE_RANGE')[0],
+      dateRange: this.$t('REPORT.DATE_RANGE'),
+      customDateRange: [new Date(), new Date()],
+      currentSelectedGroupByFilter: null,
+      businessHoursSelected: false,
+    };
+  },
+  computed: {
+    isDateRangeSelected() {
+      return this.currentDateRangeSelection.id === CUSTOM_DATE_RANGE_ID;
+    },
+    to() {
+      if (this.isDateRangeSelected) {
+        return this.toCustomDate(this.customDateRange[1]);
+      }
+      return this.toCustomDate(new Date());
+    },
+    from() {
+      if (this.isDateRangeSelected) {
+        return this.fromCustomDate(this.customDateRange[0]);
+      }
+      const dateRange = {
+        0: 6,
+        1: 29,
+        2: 89,
+        3: 179,
+        4: 364,
+      };
+      const diff = dateRange[this.currentDateRangeSelection.id];
+      const fromDate = subDays(new Date(), diff);
+      return this.fromCustomDate(fromDate);
+    },
+    multiselectLabel() {
+      const typeLabels = {
+        agent: this.$t('AGENT_REPORTS.FILTER_DROPDOWN_LABEL'),
+        label: this.$t('LABEL_REPORTS.FILTER_DROPDOWN_LABEL'),
+        inbox: this.$t('INBOX_REPORTS.FILTER_DROPDOWN_LABEL'),
+        team: this.$t('TEAM_REPORTS.FILTER_DROPDOWN_LABEL'),
+      };
+      return typeLabels[this.type] || this.$t('FORMS.MULTISELECT.SELECT_ONE');
+    },
+    groupBy() {
+      if (this.isDateRangeSelected) {
+        return GROUP_BY_FILTER[4].period;
+      }
+      const groupRange = {
+        0: GROUP_BY_FILTER[1].period,
+        1: GROUP_BY_FILTER[2].period,
+        2: GROUP_BY_FILTER[3].period,
+        3: GROUP_BY_FILTER[3].period,
+        4: GROUP_BY_FILTER[4].period,
+      };
+      return groupRange[this.currentDateRangeSelection.id];
+    },
+    notLast7Days() {
+      return this.groupBy !== GROUP_BY_FILTER[1].period;
+    },
+  },
+  watch: {
+    filterItemsList(val) {
+      this.currentSelectedFilter = val[0];
+      this.changeFilterSelection();
+    },
+    groupByFilterItemsList() {
+      this.currentSelectedGroupByFilter = this.selectedGroupByFilter;
+    },
+    businessHoursSelected() {
+      this.$emit('business-hours-toggle', this.businessHoursSelected);
+    },
+  },
+  mounted() {
+    this.onDateRangeChange();
+  },
+  methods: {
+    onDateRangeChange() {
+      this.$emit('date-range-change', {
+        from: this.from,
+        to: this.to,
+        groupBy: this.groupBy,
+      });
+    },
+    fromCustomDate(date) {
+      return getUnixTime(startOfDay(date));
+    },
+    toCustomDate(date) {
+      return getUnixTime(endOfDay(date));
+    },
+    changeDateSelection(selectedRange) {
+      this.currentDateRangeSelection = selectedRange;
+      this.onDateRangeChange();
+    },
+    changeFilterSelection() {
+      this.$emit('filter-change', this.currentSelectedFilter);
+    },
+    onChange(value) {
+      this.customDateRange = value;
+      this.onDateRangeChange();
+    },
+    changeGroupByFilterSelection() {
+      this.$emit('group-by-filter-change', this.currentSelectedGroupByFilter);
+    },
+  },
+};
+</script>
 <template>
   <div class="flex flex-col md:flex-row">
     <div class="flex items-center w-full flex-col md:flex-row">
@@ -179,144 +320,3 @@
     </div>
   </div>
 </template>
-<script>
-import endOfDay from 'date-fns/endOfDay';
-import getUnixTime from 'date-fns/getUnixTime';
-import startOfDay from 'date-fns/startOfDay';
-import subDays from 'date-fns/subDays';
-import Thumbnail from 'dashboard/components/widgets/Thumbnail.vue';
-import WootDateRangePicker from 'dashboard/components/ui/DateRangePicker.vue';
-
-import { GROUP_BY_FILTER } from '../constants';
-const CUSTOM_DATE_RANGE_ID = 5;
-
-export default {
-  components: {
-    WootDateRangePicker,
-    Thumbnail,
-  },
-  props: {
-    filterItemsList: {
-      type: Array,
-      default: () => [],
-    },
-    groupByFilterItemsList: {
-      type: Array,
-      default: () => [],
-    },
-    type: {
-      type: String,
-      default: 'agent',
-    },
-    selectedGroupByFilter: {
-      type: Object,
-      default: () => {},
-    },
-  },
-  data() {
-    return {
-      currentSelectedFilter: null,
-      currentDateRangeSelection: this.$t('REPORT.DATE_RANGE')[0],
-      dateRange: this.$t('REPORT.DATE_RANGE'),
-      customDateRange: [new Date(), new Date()],
-      currentSelectedGroupByFilter: null,
-      businessHoursSelected: false,
-    };
-  },
-  computed: {
-    isDateRangeSelected() {
-      return this.currentDateRangeSelection.id === CUSTOM_DATE_RANGE_ID;
-    },
-    to() {
-      if (this.isDateRangeSelected) {
-        return this.toCustomDate(this.customDateRange[1]);
-      }
-      return this.toCustomDate(new Date());
-    },
-    from() {
-      if (this.isDateRangeSelected) {
-        return this.fromCustomDate(this.customDateRange[0]);
-      }
-      const dateRange = {
-        0: 6,
-        1: 29,
-        2: 89,
-        3: 179,
-        4: 364,
-      };
-      const diff = dateRange[this.currentDateRangeSelection.id];
-      const fromDate = subDays(new Date(), diff);
-      return this.fromCustomDate(fromDate);
-    },
-    multiselectLabel() {
-      const typeLabels = {
-        agent: this.$t('AGENT_REPORTS.FILTER_DROPDOWN_LABEL'),
-        label: this.$t('LABEL_REPORTS.FILTER_DROPDOWN_LABEL'),
-        inbox: this.$t('INBOX_REPORTS.FILTER_DROPDOWN_LABEL'),
-        team: this.$t('TEAM_REPORTS.FILTER_DROPDOWN_LABEL'),
-      };
-      return typeLabels[this.type] || this.$t('FORMS.MULTISELECT.SELECT_ONE');
-    },
-    groupBy() {
-      if (this.isDateRangeSelected) {
-        return GROUP_BY_FILTER[4].period;
-      }
-      const groupRange = {
-        0: GROUP_BY_FILTER[1].period,
-        1: GROUP_BY_FILTER[2].period,
-        2: GROUP_BY_FILTER[3].period,
-        3: GROUP_BY_FILTER[3].period,
-        4: GROUP_BY_FILTER[4].period,
-      };
-      return groupRange[this.currentDateRangeSelection.id];
-    },
-    notLast7Days() {
-      return this.groupBy !== GROUP_BY_FILTER[1].period;
-    },
-  },
-  watch: {
-    filterItemsList(val) {
-      this.currentSelectedFilter = val[0];
-      this.changeFilterSelection();
-    },
-    groupByFilterItemsList() {
-      this.currentSelectedGroupByFilter = this.selectedGroupByFilter;
-    },
-    businessHoursSelected() {
-      this.$emit('business-hours-toggle', this.businessHoursSelected);
-    },
-  },
-  mounted() {
-    this.onDateRangeChange();
-  },
-  methods: {
-    onDateRangeChange() {
-      this.$emit('date-range-change', {
-        from: this.from,
-        to: this.to,
-        groupBy: this.groupBy,
-      });
-    },
-    fromCustomDate(date) {
-      return getUnixTime(startOfDay(date));
-    },
-    toCustomDate(date) {
-      return getUnixTime(endOfDay(date));
-    },
-    changeDateSelection(selectedRange) {
-      this.currentDateRangeSelection = selectedRange;
-      this.onDateRangeChange();
-    },
-    changeFilterSelection() {
-      this.$emit('filter-change', this.currentSelectedFilter);
-    },
-    onChange(value) {
-      this.customDateRange = value;
-      this.onDateRangeChange();
-    },
-    changeGroupByFilterSelection() {
-      this.$emit('group-by-filter-change', this.currentSelectedGroupByFilter);
-    },
-  },
-};
-</script>
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 4bb34f925..3703a86c0 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
@@ -1,61 +1,3 @@
-<template>
-  <div
-    class="flex flex-col flex-wrap items-start gap-2 md:items-center md:flex-nowrap md:flex-row"
-  >
-    <!-- Active filters section -->
-    <div v-if="hasActiveFilters" class="flex flex-wrap gap-2 md:flex-nowrap">
-      <active-filter-chip
-        v-for="filter in activeFilters"
-        v-bind="filter"
-        :key="filter.type"
-        :placeholder="
-          $t(
-            `SLA_REPORTS.DROPDOWN.INPUT_PLACEHOLDER.${filter.type.toUpperCase()}`
-          )
-        "
-        :active-filter-type="activeFilterType"
-        :show-menu="showSubDropdownMenu"
-        enable-search
-        @toggleDropdown="openActiveFilterDropdown"
-        @closeDropdown="closeActiveFilterDropdown"
-        @addFilter="addFilter"
-        @removeFilter="removeFilter"
-      />
-    </div>
-    <!-- Dividing line between Active filters and Add filter button -->
-    <div
-      v-if="hasActiveFilters && !isAllFilterSelected"
-      class="w-full h-px border md:w-px md:h-5 border-slate-75 dark:border-slate-800"
-    />
-    <!-- Add filter and clear filter button -->
-    <div class="flex items-center gap-2">
-      <add-filter-chip
-        v-if="!isAllFilterSelected"
-        placeholder-i18n-key="SLA_REPORTS.DROPDOWN.INPUT_PLACEHOLDER"
-        :name="$t('SLA_REPORTS.DROPDOWN.ADD_FIlTER')"
-        :menu-option="filterListMenuItems"
-        :show-menu="showDropdownMenu"
-        :empty-state-message="$t('SLA_REPORTS.DROPDOWN.NO_FILTER')"
-        @toggleDropdown="showDropdown"
-        @closeDropdown="closeDropdown"
-        @addFilter="addFilter"
-      />
-
-      <!-- Dividing line between Add filter and Clear all filter button -->
-      <div
-        v-if="hasActiveFilters"
-        class="w-px h-5 border border-slate-75 dark:border-slate-800"
-      />
-      <!-- Clear all filter button -->
-      <filter-button
-        v-if="hasActiveFilters"
-        :button-text="$t('SLA_REPORTS.DROPDOWN.CLEAR_ALL')"
-        @click="clearAllFilters"
-      />
-    </div>
-  </div>
-</template>
-
 <script>
 import { mapGetters } from 'vuex';
 import {
@@ -208,3 +150,61 @@ export default {
   },
 };
 </script>
+
+<template>
+  <div
+    class="flex flex-col flex-wrap items-start gap-2 md:items-center md:flex-nowrap md:flex-row"
+  >
+    <!-- Active filters section -->
+    <div v-if="hasActiveFilters" class="flex flex-wrap gap-2 md:flex-nowrap">
+      <active-filter-chip
+        v-for="filter in activeFilters"
+        v-bind="filter"
+        :key="filter.type"
+        :placeholder="
+          $t(
+            `SLA_REPORTS.DROPDOWN.INPUT_PLACEHOLDER.${filter.type.toUpperCase()}`
+          )
+        "
+        :active-filter-type="activeFilterType"
+        :show-menu="showSubDropdownMenu"
+        enable-search
+        @toggleDropdown="openActiveFilterDropdown"
+        @closeDropdown="closeActiveFilterDropdown"
+        @addFilter="addFilter"
+        @removeFilter="removeFilter"
+      />
+    </div>
+    <!-- Dividing line between Active filters and Add filter button -->
+    <div
+      v-if="hasActiveFilters && !isAllFilterSelected"
+      class="w-full h-px border md:w-px md:h-5 border-slate-75 dark:border-slate-800"
+    />
+    <!-- Add filter and clear filter button -->
+    <div class="flex items-center gap-2">
+      <add-filter-chip
+        v-if="!isAllFilterSelected"
+        placeholder-i18n-key="SLA_REPORTS.DROPDOWN.INPUT_PLACEHOLDER"
+        :name="$t('SLA_REPORTS.DROPDOWN.ADD_FIlTER')"
+        :menu-option="filterListMenuItems"
+        :show-menu="showDropdownMenu"
+        :empty-state-message="$t('SLA_REPORTS.DROPDOWN.NO_FILTER')"
+        @toggleDropdown="showDropdown"
+        @closeDropdown="closeDropdown"
+        @addFilter="addFilter"
+      />
+
+      <!-- Dividing line between Add filter and Clear all filter button -->
+      <div
+        v-if="hasActiveFilters"
+        class="w-px h-5 border border-slate-75 dark:border-slate-800"
+      />
+      <!-- Clear all filter button -->
+      <filter-button
+        v-if="hasActiveFilters"
+        :button-text="$t('SLA_REPORTS.DROPDOWN.CLEAR_ALL')"
+        @click="clearAllFilters"
+      />
+    </div>
+  </div>
+</template>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/reports/components/SLA/SLAMetricCard.vue b/app/javascript/dashboard/routes/dashboard/settings/reports/components/SLA/SLAMetricCard.vue
index 634325393..1820ada78 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/reports/components/SLA/SLAMetricCard.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/reports/components/SLA/SLAMetricCard.vue
@@ -1,3 +1,25 @@
+<script>
+export default {
+  props: {
+    label: {
+      type: String,
+      required: true,
+    },
+    value: {
+      type: [String, Number],
+      required: true,
+    },
+    toolTip: {
+      type: String,
+      required: true,
+    },
+    isLoading: {
+      type: Boolean,
+      default: false,
+    },
+  },
+};
+</script>
 <template>
   <div class="flex flex-col gap-2 items-start justify-center min-w-[10rem]">
     <span
@@ -22,25 +44,3 @@
     </span>
   </div>
 </template>
-<script>
-export default {
-  props: {
-    label: {
-      type: String,
-      required: true,
-    },
-    value: {
-      type: [String, Number],
-      required: true,
-    },
-    toolTip: {
-      type: String,
-      required: true,
-    },
-    isLoading: {
-      type: Boolean,
-      default: false,
-    },
-  },
-};
-</script>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/reports/components/SLA/SLAMetrics.vue b/app/javascript/dashboard/routes/dashboard/settings/reports/components/SLA/SLAMetrics.vue
index 5c598b403..9f638f3ac 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/reports/components/SLA/SLAMetrics.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/reports/components/SLA/SLAMetrics.vue
@@ -1,3 +1,25 @@
+<script setup>
+import SLAMetricCard from './SLAMetricCard.vue';
+defineProps({
+  hitRate: {
+    type: String,
+    required: true,
+  },
+  noOfBreaches: {
+    type: Number,
+    required: true,
+  },
+  noOfConversations: {
+    type: Number,
+    required: true,
+  },
+  isLoading: {
+    type: Boolean,
+    default: false,
+  },
+});
+</script>
+
 <template>
   <div
     class="flex sm:flex-row flex-col w-full gap-4 sm:gap-14 bg-white dark:bg-slate-900 rounded-xl border border-slate-75 dark:border-slate-700/50 px-6 py-4"
@@ -29,25 +51,3 @@
     />
   </div>
 </template>
-
-<script setup>
-import SLAMetricCard from './SLAMetricCard.vue';
-defineProps({
-  hitRate: {
-    type: String,
-    required: true,
-  },
-  noOfBreaches: {
-    type: Number,
-    required: true,
-  },
-  noOfConversations: {
-    type: Number,
-    required: true,
-  },
-  isLoading: {
-    type: Boolean,
-    default: false,
-  },
-});
-</script>
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 16fbbcf40..548e39aed 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
@@ -1,9 +1,3 @@
-<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" />
-  </div>
-</template>
 <script>
 import SLAFilter from '../SLA/SLAFilter.vue';
 import subDays from 'date-fns/subDays';
@@ -69,3 +63,9 @@ export default {
   },
 };
 </script>
+<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" />
+  </div>
+</template>
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 61ac3056f..b9f99fd51 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
@@ -1,3 +1,58 @@
+<script>
+import TableFooter from 'dashboard/components/widgets/TableFooter.vue';
+import TableHeaderCell from 'dashboard/components/widgets/TableHeaderCell.vue';
+import SLAReportItem from './SLAReportItem.vue';
+import Spinner from 'shared/components/Spinner.vue';
+export default {
+  name: 'SLATable',
+  components: {
+    SLAReportItem,
+    TableFooter,
+    Spinner,
+    TableHeaderCell,
+  },
+  props: {
+    slaReports: {
+      type: Array,
+      default: () => [],
+    },
+    totalCount: {
+      type: Number,
+      default: 0,
+    },
+    currentPage: {
+      type: Number,
+      default: 1,
+    },
+    pageSize: {
+      type: Number,
+      default: 25,
+    },
+    isLoading: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  data() {
+    return {
+      pageNo: 1,
+    };
+  },
+  computed: {
+    shouldShowFooter() {
+      return this.currentPage === 1
+        ? this.totalCount > this.pageSize
+        : this.slaReports.length > 0;
+    },
+  },
+  methods: {
+    onPageChange(page) {
+      this.$emit('page-change', page);
+    },
+  },
+};
+</script>
+
 <template>
   <div>
     <div
@@ -54,58 +109,3 @@
     />
   </div>
 </template>
-
-<script>
-import TableFooter from 'dashboard/components/widgets/TableFooter.vue';
-import TableHeaderCell from 'dashboard/components/widgets/TableHeaderCell.vue';
-import SLAReportItem from './SLAReportItem.vue';
-import Spinner from 'shared/components/Spinner.vue';
-export default {
-  name: 'SLATable',
-  components: {
-    SLAReportItem,
-    TableFooter,
-    Spinner,
-    TableHeaderCell,
-  },
-  props: {
-    slaReports: {
-      type: Array,
-      default: () => [],
-    },
-    totalCount: {
-      type: Number,
-      default: 0,
-    },
-    currentPage: {
-      type: Number,
-      default: 1,
-    },
-    pageSize: {
-      type: Number,
-      default: 25,
-    },
-    isLoading: {
-      type: Boolean,
-      default: false,
-    },
-  },
-  data() {
-    return {
-      pageNo: 1,
-    };
-  },
-  computed: {
-    shouldShowFooter() {
-      return this.currentPage === 1
-        ? this.totalCount > this.pageSize
-        : this.slaReports.length > 0;
-    },
-  },
-  methods: {
-    onPageChange(page) {
-      this.$emit('page-change', page);
-    },
-  },
-};
-</script>
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 be40349fe..cd415e41d 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
@@ -1,26 +1,3 @@
-<template>
-  <div v-on-clickaway="closeSlaEvents" class="label-wrap">
-    <div
-      class="flex items-center col-span-2 px-0 py-2 text-sm tracking-[0.5] text-slate-700 dark:text-slate-100 rtl:text-right"
-    >
-      <div class="relative">
-        <woot-button
-          color-scheme="secondary"
-          variant="link"
-          @click="openSlaEvents"
-        >
-          {{ $t('SLA_REPORTS.TABLE.VIEW_DETAILS') }}
-        </woot-button>
-        <SLA-popover-card
-          v-if="showSlaPopoverCard"
-          :sla-missed-events="slaEvents"
-          class="right-0"
-        />
-      </div>
-    </div>
-  </div>
-</template>
-
 <script>
 import SLAPopoverCard from 'dashboard/components/widgets/conversation/components/SLAPopoverCard.vue';
 export default {
@@ -50,3 +27,26 @@ export default {
   },
 };
 </script>
+
+<template>
+  <div v-on-clickaway="closeSlaEvents" class="label-wrap">
+    <div
+      class="flex items-center col-span-2 px-0 py-2 text-sm tracking-[0.5] text-slate-700 dark:text-slate-100 rtl:text-right"
+    >
+      <div class="relative">
+        <woot-button
+          color-scheme="secondary"
+          variant="link"
+          @click="openSlaEvents"
+        >
+          {{ $t('SLA_REPORTS.TABLE.VIEW_DETAILS') }}
+        </woot-button>
+        <SLA-popover-card
+          v-if="showSlaPopoverCard"
+          :sla-missed-events="slaEvents"
+          class="right-0"
+        />
+      </div>
+    </div>
+  </div>
+</template>
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 ecffa1a3b..a2991f19e 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/reports/components/WootReports.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/reports/components/WootReports.vue
@@ -1,28 +1,3 @@
-<template>
-  <div class="flex-1 p-4 overflow-auto">
-    <woot-button
-      color-scheme="success"
-      class-names="button--fixed-top"
-      icon="arrow-download"
-      @click="downloadReports"
-    >
-      {{ downloadButtonLabel }}
-    </woot-button>
-    <report-filters
-      v-if="filterItemsList"
-      :type="type"
-      :filter-items-list="filterItemsList"
-      :group-by-filter-items-list="groupByfilterItemsList"
-      :selected-group-by-filter="selectedGroupByFilter"
-      @date-range-change="onDateRangeChange"
-      @filter-change="onFilterChange"
-      @group-by-filter-change="onGroupByFilterChange"
-      @business-hours-toggle="onBusinessHoursToggle"
-    />
-    <report-container v-if="filterItemsList.length" :group-by="groupBy" />
-  </div>
-</template>
-
 <script>
 import { useAlert } from 'dashboard/composables';
 import ReportFilters from './ReportFilters.vue';
@@ -204,3 +179,28 @@ export default {
   },
 };
 </script>
+
+<template>
+  <div class="flex-1 p-4 overflow-auto">
+    <woot-button
+      color-scheme="success"
+      class-names="button--fixed-top"
+      icon="arrow-download"
+      @click="downloadReports"
+    >
+      {{ downloadButtonLabel }}
+    </woot-button>
+    <report-filters
+      v-if="filterItemsList"
+      :type="type"
+      :filter-items-list="filterItemsList"
+      :group-by-filter-items-list="groupByfilterItemsList"
+      :selected-group-by-filter="selectedGroupByFilter"
+      @date-range-change="onDateRangeChange"
+      @filter-change="onFilterChange"
+      @group-by-filter-change="onGroupByFilterChange"
+      @business-hours-toggle="onBusinessHoursToggle"
+    />
+    <report-container 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 4fc7fdbf6..c4c233354 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
@@ -1,33 +1,3 @@
-<template>
-  <div class="agent-table-container">
-    <ve-table
-      max-height="calc(100vh - 21.875rem)"
-      :fixed-header="true"
-      :columns="columns"
-      :table-data="tableData"
-    />
-    <div v-if="isLoading" class="agents-loader">
-      <spinner />
-      <span>{{
-        $t('OVERVIEW_REPORTS.AGENT_CONVERSATIONS.LOADING_MESSAGE')
-      }}</span>
-    </div>
-    <empty-state
-      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
-        :total="agents.length"
-        :page-index="pageIndex"
-        :page-size="25"
-        :page-size-option="[25]"
-        @on-page-number-change="onPageNumberChange"
-      />
-    </div>
-  </div>
-</template>
-
 <script>
 import { VeTable, VePagination } from 'vue-easytable';
 import Spinner from 'shared/components/Spinner.vue';
@@ -138,6 +108,36 @@ export default {
 };
 </script>
 
+<template>
+  <div class="agent-table-container">
+    <ve-table
+      max-height="calc(100vh - 21.875rem)"
+      :fixed-header="true"
+      :columns="columns"
+      :table-data="tableData"
+    />
+    <div v-if="isLoading" class="agents-loader">
+      <spinner />
+      <span>{{
+        $t('OVERVIEW_REPORTS.AGENT_CONVERSATIONS.LOADING_MESSAGE')
+      }}</span>
+    </div>
+    <empty-state
+      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
+        :total="agents.length"
+        :page-index="pageIndex"
+        :page-size="25"
+        :page-size-option="[25]"
+        @on-page-number-change="onPageNumberChange"
+      />
+    </div>
+  </div>
+</template>
+
 <style lang="scss" scoped>
 .agent-table-container {
   @apply flex flex-col flex-1;
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 d40555c9d..74f0f2ea4 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
@@ -1,3 +1,27 @@
+<script>
+import Spinner from 'shared/components/Spinner.vue';
+
+export default {
+  name: 'MetricCard',
+  components: {
+    Spinner,
+  },
+  props: {
+    header: {
+      type: String,
+      default: '',
+    },
+    isLoading: {
+      type: Boolean,
+      default: false,
+    },
+    loadingMessage: {
+      type: String,
+      default: '',
+    },
+  },
+};
+</script>
 <template>
   <div
     class="metric-card flex flex-col m-2 p-4 border border-solid overflow-hidden rounded-md flex-grow shadow-sm text-slate-700 dark:text-slate-100 bg-white dark:bg-slate-800 border-slate-75 dark:border-slate-700 min-h-[10rem]"
@@ -43,30 +67,6 @@
     </div>
   </div>
 </template>
-<script>
-import Spinner from 'shared/components/Spinner.vue';
-
-export default {
-  name: 'MetricCard',
-  components: {
-    Spinner,
-  },
-  props: {
-    header: {
-      type: String,
-      default: '',
-    },
-    isLoading: {
-      type: Boolean,
-      default: false,
-    },
-    loadingMessage: {
-      type: String,
-      default: '',
-    },
-  },
-};
-</script>
 <style lang="scss" scoped>
 .metric-card {
   @apply flex flex-col mb-2 p-4 border border-solid overflow-hidden rounded-md flex-grow shadow-sm text-slate-700 dark:text-slate-100 bg-white dark:bg-slate-800 border-slate-75 dark:border-slate-700 min-h-[10rem];
diff --git a/app/javascript/dashboard/routes/dashboard/settings/sla/AddSLA.vue b/app/javascript/dashboard/routes/dashboard/settings/sla/AddSLA.vue
index 30a50c8e9..4b277e255 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/sla/AddSLA.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/sla/AddSLA.vue
@@ -1,17 +1,3 @@
-<template>
-  <div class="flex flex-col h-auto overflow-auto">
-    <woot-modal-header
-      :header-title="$t('SLA.ADD.TITLE')"
-      :header-content="$t('SLA.ADD.DESC')"
-    />
-    <sla-form
-      :submit-label="$t('SLA.FORM.CREATE')"
-      @submit="addSLA"
-      @close="onClose"
-    />
-  </div>
-</template>
-
 <script>
 import { mapGetters } from 'vuex';
 import { useAlert } from 'dashboard/composables';
@@ -44,3 +30,17 @@ export default {
   },
 };
 </script>
+
+<template>
+  <div class="flex flex-col h-auto overflow-auto">
+    <woot-modal-header
+      :header-title="$t('SLA.ADD.TITLE')"
+      :header-content="$t('SLA.ADD.DESC')"
+    />
+    <sla-form
+      :submit-label="$t('SLA.FORM.CREATE')"
+      @submit="addSLA"
+      @close="onClose"
+    />
+  </div>
+</template>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/sla/Index.vue b/app/javascript/dashboard/routes/dashboard/settings/sla/Index.vue
index 94ac5189e..c15db8c7a 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/sla/Index.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/sla/Index.vue
@@ -1,57 +1,3 @@
-<template>
-  <settings-layout
-    :is-loading="uiFlags.isFetching"
-    :loading-message="$t('SLA.LOADING')"
-  >
-    <template #header>
-      <SLA-header :show-actions="records.length > 0" @click="openAddPopup" />
-    </template>
-    <template #loading>
-      <SLAListItemLoading v-for="ii in 2" :key="ii" class="mb-3" />
-    </template>
-    <template #body>
-      <SLAPaywallEnterprise
-        v-if="isBehindAPaywall"
-        :is-super-admin="isSuperAdmin"
-        :is-on-chatwoot-cloud="isOnChatwootCloud"
-        @click="onClickCTA"
-      />
-      <SLAEmptyState
-        v-else-if="!records.length"
-        @primary-action="openAddPopup"
-      />
-      <div v-else class="flex flex-col w-full h-full gap-3">
-        <SLA-list-item
-          v-for="sla in records"
-          :key="sla.title"
-          :sla-name="sla.name"
-          :description="sla.description"
-          :first-response="displayTime(sla.first_response_time_threshold)"
-          :next-response="displayTime(sla.next_response_time_threshold)"
-          :resolution-time="displayTime(sla.resolution_time_threshold)"
-          :has-business-hours="sla.only_during_business_hours"
-          :is-loading="loading[sla.id]"
-          @click="openDeletePopup(sla)"
-        />
-      </div>
-
-      <woot-modal :show.sync="showAddPopup" :on-close="hideAddPopup">
-        <add-SLA @close="hideAddPopup" />
-      </woot-modal>
-
-      <woot-delete-modal
-        :show.sync="showDeleteConfirmationPopup"
-        :on-close="closeDeletePopup"
-        :on-confirm="confirmDeletion"
-        :title="$t('SLA.DELETE.CONFIRM.TITLE')"
-        :message="$t('SLA.DELETE.CONFIRM.MESSAGE')"
-        :message-value="deleteMessage"
-        :confirm-text="deleteConfirmText"
-        :reject-text="deleteRejectText"
-      />
-    </template>
-  </settings-layout>
-</template>
 <script>
 import AddSLA from './AddSLA.vue';
 import SettingsLayout from '../SettingsLayout.vue';
@@ -167,3 +113,57 @@ export default {
   },
 };
 </script>
+<template>
+  <settings-layout
+    :is-loading="uiFlags.isFetching"
+    :loading-message="$t('SLA.LOADING')"
+  >
+    <template #header>
+      <SLA-header :show-actions="records.length > 0" @click="openAddPopup" />
+    </template>
+    <template #loading>
+      <SLAListItemLoading v-for="ii in 2" :key="ii" class="mb-3" />
+    </template>
+    <template #body>
+      <SLAPaywallEnterprise
+        v-if="isBehindAPaywall"
+        :is-super-admin="isSuperAdmin"
+        :is-on-chatwoot-cloud="isOnChatwootCloud"
+        @click="onClickCTA"
+      />
+      <SLAEmptyState
+        v-else-if="!records.length"
+        @primary-action="openAddPopup"
+      />
+      <div v-else class="flex flex-col w-full h-full gap-3">
+        <SLA-list-item
+          v-for="sla in records"
+          :key="sla.title"
+          :sla-name="sla.name"
+          :description="sla.description"
+          :first-response="displayTime(sla.first_response_time_threshold)"
+          :next-response="displayTime(sla.next_response_time_threshold)"
+          :resolution-time="displayTime(sla.resolution_time_threshold)"
+          :has-business-hours="sla.only_during_business_hours"
+          :is-loading="loading[sla.id]"
+          @click="openDeletePopup(sla)"
+        />
+      </div>
+
+      <woot-modal :show.sync="showAddPopup" :on-close="hideAddPopup">
+        <add-SLA @close="hideAddPopup" />
+      </woot-modal>
+
+      <woot-delete-modal
+        :show.sync="showDeleteConfirmationPopup"
+        :on-close="closeDeletePopup"
+        :on-confirm="confirmDeletion"
+        :title="$t('SLA.DELETE.CONFIRM.TITLE')"
+        :message="$t('SLA.DELETE.CONFIRM.MESSAGE')"
+        :message-value="deleteMessage"
+        :confirm-text="deleteConfirmText"
+        :reject-text="deleteRejectText"
+      />
+    </template>
+  </settings-layout>
+</template>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/sla/SlaForm.vue b/app/javascript/dashboard/routes/dashboard/settings/sla/SlaForm.vue
index e66c17d28..23ec4894c 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/sla/SlaForm.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/sla/SlaForm.vue
@@ -1,72 +1,3 @@
-<template>
-  <div class="flex flex-col h-auto overflow-auto">
-    <form class="flex flex-wrap mx-0" @submit.prevent="onSubmit">
-      <woot-input
-        v-model="name"
-        :class="{ error: v$.name.$error }"
-        class="w-full"
-        :styles="{
-          borderRadius: '12px',
-          padding: '6px 12px',
-          fontSize: '14px',
-        }"
-        :label="$t('SLA.FORM.NAME.LABEL')"
-        :placeholder="$t('SLA.FORM.NAME.PLACEHOLDER')"
-        :error="slaNameErrorMessage"
-        @input="v$.name.$touch"
-      />
-      <woot-input
-        v-model="description"
-        class="w-full"
-        :styles="{
-          borderRadius: '12px',
-          padding: '6px 12px',
-          fontSize: '14px',
-        }"
-        :label="$t('SLA.FORM.DESCRIPTION.LABEL')"
-        :placeholder="$t('SLA.FORM.DESCRIPTION.PLACEHOLDER')"
-      />
-
-      <sla-time-input
-        v-for="(input, index) in slaTimeInputs"
-        :key="index"
-        :threshold="input.threshold"
-        :threshold-unit="input.unit"
-        :label="$t(input.label)"
-        :placeholder="$t(input.placeholder)"
-        @input="updateThreshold(index, $event)"
-        @unit="updateUnit(index, $event)"
-        @isInValid="handleIsInvalid(index, $event)"
-      />
-
-      <div
-        class="mt-3 flex h-10 items-center text-sm w-full gap-2 border border-solid border-slate-200 dark:border-slate-600 px-3 py-1.5 rounded-xl justify-between"
-      >
-        <span for="sla_bh" class="text-slate-700 dark:text-slate-200">
-          {{ $t('SLA.FORM.BUSINESS_HOURS.PLACEHOLDER') }}
-        </span>
-        <woot-switch id="sla_bh" v-model="onlyDuringBusinessHours" />
-      </div>
-
-      <div class="flex items-center justify-end w-full gap-2 mt-8">
-        <woot-button
-          class="px-4 rounded-xl button clear outline-woot-200/50 outline"
-          @click.prevent="onClose"
-        >
-          {{ $t('SLA.FORM.CANCEL') }}
-        </woot-button>
-        <woot-button
-          :is-disabled="isSubmitDisabled"
-          class="px-4 rounded-xl"
-          :is-loading="uiFlags.isUpdating"
-        >
-          {{ submitLabel }}
-        </woot-button>
-      </div>
-    </form>
-  </div>
-</template>
-
 <script>
 import { mapGetters } from 'vuex';
 import { convertSecondsToTimeUnit } from '@chatwoot/utils';
@@ -220,3 +151,72 @@ export default {
   },
 };
 </script>
+
+<template>
+  <div class="flex flex-col h-auto overflow-auto">
+    <form class="flex flex-wrap mx-0" @submit.prevent="onSubmit">
+      <woot-input
+        v-model="name"
+        :class="{ error: v$.name.$error }"
+        class="w-full"
+        :styles="{
+          borderRadius: '12px',
+          padding: '6px 12px',
+          fontSize: '14px',
+        }"
+        :label="$t('SLA.FORM.NAME.LABEL')"
+        :placeholder="$t('SLA.FORM.NAME.PLACEHOLDER')"
+        :error="slaNameErrorMessage"
+        @input="v$.name.$touch"
+      />
+      <woot-input
+        v-model="description"
+        class="w-full"
+        :styles="{
+          borderRadius: '12px',
+          padding: '6px 12px',
+          fontSize: '14px',
+        }"
+        :label="$t('SLA.FORM.DESCRIPTION.LABEL')"
+        :placeholder="$t('SLA.FORM.DESCRIPTION.PLACEHOLDER')"
+      />
+
+      <sla-time-input
+        v-for="(input, index) in slaTimeInputs"
+        :key="index"
+        :threshold="input.threshold"
+        :threshold-unit="input.unit"
+        :label="$t(input.label)"
+        :placeholder="$t(input.placeholder)"
+        @input="updateThreshold(index, $event)"
+        @unit="updateUnit(index, $event)"
+        @isInValid="handleIsInvalid(index, $event)"
+      />
+
+      <div
+        class="mt-3 flex h-10 items-center text-sm w-full gap-2 border border-solid border-slate-200 dark:border-slate-600 px-3 py-1.5 rounded-xl justify-between"
+      >
+        <span for="sla_bh" class="text-slate-700 dark:text-slate-200">
+          {{ $t('SLA.FORM.BUSINESS_HOURS.PLACEHOLDER') }}
+        </span>
+        <woot-switch id="sla_bh" v-model="onlyDuringBusinessHours" />
+      </div>
+
+      <div class="flex items-center justify-end w-full gap-2 mt-8">
+        <woot-button
+          class="px-4 rounded-xl button clear outline-woot-200/50 outline"
+          @click.prevent="onClose"
+        >
+          {{ $t('SLA.FORM.CANCEL') }}
+        </woot-button>
+        <woot-button
+          :is-disabled="isSubmitDisabled"
+          class="px-4 rounded-xl"
+          :is-loading="uiFlags.isUpdating"
+        >
+          {{ submitLabel }}
+        </woot-button>
+      </div>
+    </form>
+  </div>
+</template>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/sla/SlaTimeInput.vue b/app/javascript/dashboard/routes/dashboard/settings/sla/SlaTimeInput.vue
index ecfadfe76..b1fc7a342 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/sla/SlaTimeInput.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/sla/SlaTimeInput.vue
@@ -1,38 +1,3 @@
-<template>
-  <div class="flex items-center w-full gap-3">
-    <woot-input
-      v-model="thresholdTime"
-      :class="{ error: v$.thresholdTime.$error }"
-      class="flex-grow"
-      :styles="{
-        borderRadius: '12px',
-        padding: '6px 12px',
-        fontSize: '14px',
-      }"
-      :label="label"
-      :placeholder="placeholder"
-      :error="thresholdTimeErrorMessage"
-      @input="onThresholdTimeChange"
-    />
-    <!-- the mt-7 handles the label offset -->
-    <div class="mt-7">
-      <select
-        v-model="thresholdUnitValue"
-        class="px-4 py-1.5 min-w-[6.5rem] h-10 text-sm font-medium border-0 bg-slate-50 rounded-xl hover:cursor-pointer pr-7 text-slate-800 dark:text-slate-300"
-        @change="onThresholdUnitChange"
-      >
-        <option
-          v-for="(option, index) in options"
-          :key="index"
-          :value="option.value"
-        >
-          {{ option.label }}
-        </option>
-      </select>
-    </div>
-  </div>
-</template>
-
 <script>
 import validations from './validations';
 import { useVuelidate } from '@vuelidate/core';
@@ -113,3 +78,38 @@ export default {
   },
 };
 </script>
+
+<template>
+  <div class="flex items-center w-full gap-3">
+    <woot-input
+      v-model="thresholdTime"
+      :class="{ error: v$.thresholdTime.$error }"
+      class="flex-grow"
+      :styles="{
+        borderRadius: '12px',
+        padding: '6px 12px',
+        fontSize: '14px',
+      }"
+      :label="label"
+      :placeholder="placeholder"
+      :error="thresholdTimeErrorMessage"
+      @input="onThresholdTimeChange"
+    />
+    <!-- the mt-7 handles the label offset -->
+    <div class="mt-7">
+      <select
+        v-model="thresholdUnitValue"
+        class="px-4 py-1.5 min-w-[6.5rem] h-10 text-sm font-medium border-0 bg-slate-50 rounded-xl hover:cursor-pointer pr-7 text-slate-800 dark:text-slate-300"
+        @change="onThresholdUnitChange"
+      >
+        <option
+          v-for="(option, index) in options"
+          :key="index"
+          :value="option.value"
+        >
+          {{ option.label }}
+        </option>
+      </select>
+    </div>
+  </div>
+</template>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/teams/AgentSelector.vue b/app/javascript/dashboard/routes/dashboard/settings/teams/AgentSelector.vue
index c3dbdfd42..61614f07b 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/teams/AgentSelector.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/teams/AgentSelector.vue
@@ -1,3 +1,73 @@
+<script>
+import Thumbnail from 'dashboard/components/widgets/Thumbnail.vue';
+
+export default {
+  components: {
+    Thumbnail,
+  },
+  props: {
+    agentList: {
+      type: Array,
+      default: () => [],
+    },
+    selectedAgents: {
+      type: Array,
+      default: () => [],
+    },
+    updateSelectedAgents: {
+      type: Function,
+      default: () => {},
+    },
+    isWorking: {
+      type: Boolean,
+      default: false,
+    },
+    submitButtonText: {
+      type: String,
+      default: '',
+    },
+  },
+  data() {
+    return {};
+  },
+  computed: {
+    selectedAgentCount() {
+      return this.selectedAgents.length;
+    },
+    allAgentsSelected() {
+      return this.selectedAgents.length === this.agentList.length;
+    },
+    disableSubmitButton() {
+      return this.selectedAgentCount === 0;
+    },
+  },
+  methods: {
+    isAgentSelected(agentId) {
+      return this.selectedAgents.includes(agentId);
+    },
+    handleSelectAgent(agentId) {
+      const shouldRemove = this.isAgentSelected(agentId);
+
+      let result = [];
+      if (shouldRemove) {
+        result = this.selectedAgents.filter(item => item !== agentId);
+      } else {
+        result = [...this.selectedAgents, agentId];
+      }
+
+      this.updateSelectedAgents(result);
+    },
+    selectAllAgents() {
+      const result = this.agentList.map(item => item.id);
+      this.updateSelectedAgents(result);
+    },
+    agentRowClass(agentId) {
+      return { 'is-active': this.isAgentSelected(agentId) };
+    },
+  },
+};
+</script>
+
 <template>
   <div>
     <div class="add-agents__header" />
@@ -75,76 +145,6 @@
   </div>
 </template>
 
-<script>
-import Thumbnail from 'dashboard/components/widgets/Thumbnail.vue';
-
-export default {
-  components: {
-    Thumbnail,
-  },
-  props: {
-    agentList: {
-      type: Array,
-      default: () => [],
-    },
-    selectedAgents: {
-      type: Array,
-      default: () => [],
-    },
-    updateSelectedAgents: {
-      type: Function,
-      default: () => {},
-    },
-    isWorking: {
-      type: Boolean,
-      default: false,
-    },
-    submitButtonText: {
-      type: String,
-      default: '',
-    },
-  },
-  data() {
-    return {};
-  },
-  computed: {
-    selectedAgentCount() {
-      return this.selectedAgents.length;
-    },
-    allAgentsSelected() {
-      return this.selectedAgents.length === this.agentList.length;
-    },
-    disableSubmitButton() {
-      return this.selectedAgentCount === 0;
-    },
-  },
-  methods: {
-    isAgentSelected(agentId) {
-      return this.selectedAgents.includes(agentId);
-    },
-    handleSelectAgent(agentId) {
-      const shouldRemove = this.isAgentSelected(agentId);
-
-      let result = [];
-      if (shouldRemove) {
-        result = this.selectedAgents.filter(item => item !== agentId);
-      } else {
-        result = [...this.selectedAgents, agentId];
-      }
-
-      this.updateSelectedAgents(result);
-    },
-    selectAllAgents() {
-      const result = this.agentList.map(item => item.id);
-      this.updateSelectedAgents(result);
-    },
-    agentRowClass(agentId) {
-      return { 'is-active': this.isAgentSelected(agentId) };
-    },
-  },
-};
-</script>
-
 <style scoped>
 input {
   @apply mb-0;
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 1d686abb6..eb936b704 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/teams/Create/AddAgents.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/teams/Create/AddAgents.vue
@@ -1,36 +1,3 @@
-<template>
-  <div
-    class="border border-slate-25 dark:border-slate-800/60 overflow-x-auto 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"
-  >
-    <form
-      class="flex flex-wrap mx-0 overflow-x-auto"
-      @submit.prevent="addAgents"
-    >
-      <div class="w-full">
-        <page-header
-          :header-title="headerTitle"
-          :header-content="$t('TEAMS_SETTINGS.ADD.DESC')"
-        />
-      </div>
-
-      <div class="w-full">
-        <div v-if="v$.selectedAgents.$error">
-          <p class="error-message">
-            {{ $t('TEAMS_SETTINGS.ADD.AGENT_VALIDATION_ERROR') }}
-          </p>
-        </div>
-        <agent-selector
-          :agent-list="agentList"
-          :selected-agents="selectedAgents"
-          :update-selected-agents="updateSelectedAgents"
-          :is-working="isCreating"
-          :submit-button-text="$t('TEAMS_SETTINGS.ADD.BUTTON_TEXT')"
-        />
-      </div>
-    </form>
-  </div>
-</template>
-
 <script>
 import { mapGetters } from 'vuex';
 import { useAlert } from 'dashboard/composables';
@@ -125,3 +92,36 @@ export default {
   },
 };
 </script>
+
+<template>
+  <div
+    class="border border-slate-25 dark:border-slate-800/60 overflow-x-auto 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"
+  >
+    <form
+      class="flex flex-wrap mx-0 overflow-x-auto"
+      @submit.prevent="addAgents"
+    >
+      <div class="w-full">
+        <page-header
+          :header-title="headerTitle"
+          :header-content="$t('TEAMS_SETTINGS.ADD.DESC')"
+        />
+      </div>
+
+      <div class="w-full">
+        <div v-if="v$.selectedAgents.$error">
+          <p class="error-message">
+            {{ $t('TEAMS_SETTINGS.ADD.AGENT_VALIDATION_ERROR') }}
+          </p>
+        </div>
+        <agent-selector
+          :agent-list="agentList"
+          :selected-agents="selectedAgents"
+          :update-selected-agents="updateSelectedAgents"
+          :is-working="isCreating"
+          :submit-button-text="$t('TEAMS_SETTINGS.ADD.BUTTON_TEXT')"
+        />
+      </div>
+    </form>
+  </div>
+</template>
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 8a524d87b..420542684 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/teams/Create/CreateTeam.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/teams/Create/CreateTeam.vue
@@ -1,21 +1,3 @@
-<template>
-  <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
-      :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
-        :on-submit="createTeam"
-        :submit-in-progress="false"
-        :submit-button-text="$t('TEAMS_SETTINGS.FORM.SUBMIT_CREATE')"
-      />
-    </div>
-  </div>
-</template>
-
 <script>
 import { useAlert } from 'dashboard/composables';
 import TeamForm from '../TeamForm.vue';
@@ -53,3 +35,21 @@ export default {
   },
 };
 </script>
+
+<template>
+  <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
+      :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
+        :on-submit="createTeam"
+        :submit-in-progress="false"
+        :submit-button-text="$t('TEAMS_SETTINGS.FORM.SUBMIT_CREATE')"
+      />
+    </div>
+  </div>
+</template>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/teams/Create/Index.vue b/app/javascript/dashboard/routes/dashboard/settings/teams/Create/Index.vue
index 232c20527..ff05352ef 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/teams/Create/Index.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/teams/Create/Index.vue
@@ -1,12 +1,3 @@
-<template>
-  <div
-    class="overflow-auto p-4 max-w-full my-auto flex flex-row flex-nowrap h-full bg-slate-25 dark:bg-slate-800"
-  >
-    <woot-wizard class="hidden md:block w-1/4" :items="items" />
-    <router-view />
-  </div>
-</template>
-
 <script>
 export default {
   computed: {
@@ -17,3 +8,12 @@ export default {
   },
 };
 </script>
+
+<template>
+  <div
+    class="overflow-auto p-4 max-w-full my-auto flex flex-row flex-nowrap h-full bg-slate-25 dark:bg-slate-800"
+  >
+    <woot-wizard class="hidden md:block w-1/4" :items="items" />
+    <router-view />
+  </div>
+</template>
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 f3d7a972f..9573a2ed5 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/teams/Edit/EditAgents.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/teams/Edit/EditAgents.vue
@@ -1,40 +1,3 @@
-<template>
-  <div
-    class="border border-slate-25 overflow-x-auto 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"
-  >
-    <form
-      class="flex flex-wrap mx-0 overflow-x-auto"
-      @submit.prevent="addAgents"
-    >
-      <div class="w-full">
-        <page-header
-          :header-title="headerTitle"
-          :header-content="$t('TEAMS_SETTINGS.EDIT_FLOW.AGENTS.DESC')"
-        />
-      </div>
-
-      <div class="w-full">
-        <div v-if="v$.selectedAgents.$error">
-          <p class="error-message">
-            {{ $t('TEAMS_SETTINGS.ADD.AGENT_VALIDATION_ERROR') }}
-          </p>
-        </div>
-        <agent-selector
-          v-if="showAgentsList"
-          :agent-list="agentList"
-          :selected-agents="selectedAgents"
-          :update-selected-agents="updateSelectedAgents"
-          :is-working="isCreating"
-          :submit-button-text="
-            $t('TEAMS_SETTINGS.EDIT_FLOW.AGENTS.BUTTON_TEXT')
-          "
-        />
-        <spinner v-else />
-      </div>
-    </form>
-  </div>
-</template>
-
 <script>
 import { mapGetters } from 'vuex';
 import router from '../../../../index';
@@ -145,3 +108,40 @@ export default {
   },
 };
 </script>
+
+<template>
+  <div
+    class="border border-slate-25 overflow-x-auto 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"
+  >
+    <form
+      class="flex flex-wrap mx-0 overflow-x-auto"
+      @submit.prevent="addAgents"
+    >
+      <div class="w-full">
+        <page-header
+          :header-title="headerTitle"
+          :header-content="$t('TEAMS_SETTINGS.EDIT_FLOW.AGENTS.DESC')"
+        />
+      </div>
+
+      <div class="w-full">
+        <div v-if="v$.selectedAgents.$error">
+          <p class="error-message">
+            {{ $t('TEAMS_SETTINGS.ADD.AGENT_VALIDATION_ERROR') }}
+          </p>
+        </div>
+        <agent-selector
+          v-if="showAgentsList"
+          :agent-list="agentList"
+          :selected-agents="selectedAgents"
+          :update-selected-agents="updateSelectedAgents"
+          :is-working="isCreating"
+          :submit-button-text="
+            $t('TEAMS_SETTINGS.EDIT_FLOW.AGENTS.BUTTON_TEXT')
+          "
+        />
+        <spinner v-else />
+      </div>
+    </form>
+  </div>
+</template>
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 6af31827f..7709d129c 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/teams/Edit/EditTeam.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/teams/Edit/EditTeam.vue
@@ -1,24 +1,3 @@
-<template>
-  <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
-      :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
-        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 />
-    </div>
-  </div>
-</template>
-
 <script>
 import { mapGetters } from 'vuex';
 import { useAlert } from 'dashboard/composables';
@@ -76,3 +55,24 @@ export default {
   },
 };
 </script>
+
+<template>
+  <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
+      :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
+        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 />
+    </div>
+  </div>
+</template>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/teams/Edit/Index.vue b/app/javascript/dashboard/routes/dashboard/settings/teams/Edit/Index.vue
index 9a4e768b7..9364d4b47 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/teams/Edit/Index.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/teams/Edit/Index.vue
@@ -1,12 +1,3 @@
-<template>
-  <div
-    class="overflow-auto p-4 max-w-full my-auto flex flex-row flex-nowrap h-full bg-slate-25 dark:bg-slate-800"
-  >
-    <woot-wizard class="hidden md:block w-1/4" :items="items" />
-    <router-view />
-  </div>
-</template>
-
 <script>
 export default {
   computed: {
@@ -17,3 +8,12 @@ export default {
   },
 };
 </script>
+
+<template>
+  <div
+    class="overflow-auto p-4 max-w-full my-auto flex flex-row flex-nowrap h-full bg-slate-25 dark:bg-slate-800"
+  >
+    <woot-wizard class="hidden md:block w-1/4" :items="items" />
+    <router-view />
+  </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 2fa452935..625597410 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/teams/FinishSetup.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/teams/FinishSetup.vue
@@ -1,3 +1,13 @@
+<script>
+import EmptyState from '../../../../components/widgets/EmptyState.vue';
+
+export default {
+  components: {
+    EmptyState,
+  },
+};
+</script>
+
 <template>
   <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"
@@ -20,13 +30,3 @@
     </empty-state>
   </div>
 </template>
-
-<script>
-import EmptyState from '../../../../components/widgets/EmptyState.vue';
-
-export default {
-  components: {
-    EmptyState,
-  },
-};
-</script>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/teams/Index.vue b/app/javascript/dashboard/routes/dashboard/settings/teams/Index.vue
index 397233843..cd445d6b1 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/teams/Index.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/teams/Index.vue
@@ -1,3 +1,75 @@
+<script>
+import { mapGetters } from 'vuex';
+import { useAlert } from 'dashboard/composables';
+import { useAdmin } from 'dashboard/composables/useAdmin';
+import accountMixin from '../../../../mixins/account';
+
+export default {
+  components: {},
+  mixins: [accountMixin],
+  setup() {
+    const { isAdmin } = useAdmin();
+    return {
+      isAdmin,
+    };
+  },
+  data() {
+    return {
+      loading: {},
+      showSettings: false,
+      showDeletePopup: false,
+      selectedTeam: {},
+    };
+  },
+  computed: {
+    ...mapGetters({
+      teamsList: 'teams/getTeams',
+      globalConfig: 'globalConfig/get',
+    }),
+    deleteConfirmText() {
+      return `${this.$t('TEAMS_SETTINGS.DELETE.CONFIRM.YES')} ${
+        this.selectedTeam.name
+      }`;
+    },
+    deleteRejectText() {
+      return this.$t('TEAMS_SETTINGS.DELETE.CONFIRM.NO');
+    },
+    confirmDeleteTitle() {
+      return this.$t('TEAMS_SETTINGS.DELETE.CONFIRM.TITLE', {
+        teamName: this.selectedTeam.name,
+      });
+    },
+    confirmPlaceHolderText() {
+      return `${this.$t('TEAMS_SETTINGS.DELETE.CONFIRM.PLACE_HOLDER', {
+        teamName: this.selectedTeam.name,
+      })}`;
+    },
+  },
+  methods: {
+    async deleteTeam({ id }) {
+      try {
+        await this.$store.dispatch('teams/delete', id);
+        useAlert(this.$t('TEAMS_SETTINGS.DELETE.API.SUCCESS_MESSAGE'));
+      } catch (error) {
+        useAlert(this.$t('TEAMS_SETTINGS.DELETE.API.ERROR_MESSAGE'));
+      }
+    },
+
+    confirmDeletion() {
+      this.deleteTeam(this.selectedTeam);
+      this.closeDelete();
+    },
+    openDelete(team) {
+      this.showDeletePopup = true;
+      this.selectedTeam = team;
+    },
+    closeDelete() {
+      this.showDeletePopup = false;
+      this.selectedTeam = {};
+    },
+  },
+};
+</script>
 <template>
   <div class="flex-1 overflow-auto">
     <div class="flex flex-row gap-4 p-8">
@@ -80,78 +152,6 @@
     />
   </div>
 </template>
-<script>
-import { mapGetters } from 'vuex';
-import { useAlert } from 'dashboard/composables';
-import { useAdmin } from 'dashboard/composables/useAdmin';
-import accountMixin from '../../../../mixins/account';
-
-export default {
-  components: {},
-  mixins: [accountMixin],
-  setup() {
-    const { isAdmin } = useAdmin();
-    return {
-      isAdmin,
-    };
-  },
-  data() {
-    return {
-      loading: {},
-      showSettings: false,
-      showDeletePopup: false,
-      selectedTeam: {},
-    };
-  },
-  computed: {
-    ...mapGetters({
-      teamsList: 'teams/getTeams',
-      globalConfig: 'globalConfig/get',
-    }),
-    deleteConfirmText() {
-      return `${this.$t('TEAMS_SETTINGS.DELETE.CONFIRM.YES')} ${
-        this.selectedTeam.name
-      }`;
-    },
-    deleteRejectText() {
-      return this.$t('TEAMS_SETTINGS.DELETE.CONFIRM.NO');
-    },
-    confirmDeleteTitle() {
-      return this.$t('TEAMS_SETTINGS.DELETE.CONFIRM.TITLE', {
-        teamName: this.selectedTeam.name,
-      });
-    },
-    confirmPlaceHolderText() {
-      return `${this.$t('TEAMS_SETTINGS.DELETE.CONFIRM.PLACE_HOLDER', {
-        teamName: this.selectedTeam.name,
-      })}`;
-    },
-  },
-  methods: {
-    async deleteTeam({ id }) {
-      try {
-        await this.$store.dispatch('teams/delete', id);
-        useAlert(this.$t('TEAMS_SETTINGS.DELETE.API.SUCCESS_MESSAGE'));
-      } catch (error) {
-        useAlert(this.$t('TEAMS_SETTINGS.DELETE.API.ERROR_MESSAGE'));
-      }
-    },
-
-    confirmDeletion() {
-      this.deleteTeam(this.selectedTeam);
-      this.closeDelete();
-    },
-    openDelete(team) {
-      this.showDeletePopup = true;
-      this.selectedTeam = team;
-    },
-    closeDelete() {
-      this.showDeletePopup = false;
-      this.selectedTeam = {};
-    },
-  },
-};
-</script>
 <style lang="scss" scoped>
 .button-wrapper {
   min-width: unset;
diff --git a/app/javascript/dashboard/routes/dashboard/settings/teams/TeamForm.vue b/app/javascript/dashboard/routes/dashboard/settings/teams/TeamForm.vue
index 9cab0c2d3..f23f6084e 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/teams/TeamForm.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/teams/TeamForm.vue
@@ -1,45 +1,3 @@
-<template>
-  <div class="mx-0 flex flex-wrap">
-    <div class="flex-shrink-0 flex-grow-0 w-full md:w-[65%]">
-      <form class="mx-0 flex flex-wrap" @submit.prevent="handleSubmit">
-        <woot-input
-          v-model.trim="title"
-          :class="{ error: v$.title.$error }"
-          class="w-full"
-          :label="$t('TEAMS_SETTINGS.FORM.NAME.LABEL')"
-          :placeholder="$t('TEAMS_SETTINGS.FORM.NAME.PLACEHOLDER')"
-          @input="v$.title.$touch"
-        />
-
-        <woot-input
-          v-model.trim="description"
-          :class="{ error: v$.description.$error }"
-          class="w-full"
-          :label="$t('TEAMS_SETTINGS.FORM.DESCRIPTION.LABEL')"
-          :placeholder="$t('TEAMS_SETTINGS.FORM.DESCRIPTION.PLACEHOLDER')"
-          @input="v$.description.$touch"
-        />
-
-        <div class="w-full flex items-center gap-2">
-          <input v-model="allowAutoAssign" type="checkbox" :value="true" />
-          <label for="conversation_creation">
-            {{ $t('TEAMS_SETTINGS.FORM.AUTO_ASSIGN.LABEL') }}
-          </label>
-        </div>
-        <div class="flex flex-row justify-end gap-2 py-2 px-0 w-full">
-          <div class="w-full">
-            <woot-submit-button
-              :disabled="v$.title.$invalid || submitInProgress"
-              :button-text="submitButtonText"
-              :loading="submitInProgress"
-            />
-          </div>
-        </div>
-      </form>
-    </div>
-  </div>
-</template>
-
 <script>
 import WootSubmitButton from '../../../../components/buttons/FormSubmitButton.vue';
 import validations from './helpers/validations';
@@ -101,3 +59,45 @@ export default {
   },
 };
 </script>
+
+<template>
+  <div class="mx-0 flex flex-wrap">
+    <div class="flex-shrink-0 flex-grow-0 w-full md:w-[65%]">
+      <form class="mx-0 flex flex-wrap" @submit.prevent="handleSubmit">
+        <woot-input
+          v-model.trim="title"
+          :class="{ error: v$.title.$error }"
+          class="w-full"
+          :label="$t('TEAMS_SETTINGS.FORM.NAME.LABEL')"
+          :placeholder="$t('TEAMS_SETTINGS.FORM.NAME.PLACEHOLDER')"
+          @input="v$.title.$touch"
+        />
+
+        <woot-input
+          v-model.trim="description"
+          :class="{ error: v$.description.$error }"
+          class="w-full"
+          :label="$t('TEAMS_SETTINGS.FORM.DESCRIPTION.LABEL')"
+          :placeholder="$t('TEAMS_SETTINGS.FORM.DESCRIPTION.PLACEHOLDER')"
+          @input="v$.description.$touch"
+        />
+
+        <div class="w-full flex items-center gap-2">
+          <input v-model="allowAutoAssign" type="checkbox" :value="true" />
+          <label for="conversation_creation">
+            {{ $t('TEAMS_SETTINGS.FORM.AUTO_ASSIGN.LABEL') }}
+          </label>
+        </div>
+        <div class="flex flex-row justify-end gap-2 py-2 px-0 w-full">
+          <div class="w-full">
+            <woot-submit-button
+              :disabled="v$.title.$invalid || submitInProgress"
+              :button-text="submitButtonText"
+              :loading="submitInProgress"
+            />
+          </div>
+        </div>
+      </form>
+    </div>
+  </div>
+</template>
diff --git a/app/javascript/portal/components/PublicArticleSearch.vue b/app/javascript/portal/components/PublicArticleSearch.vue
index 1174c636c..ff116c6e0 100644
--- a/app/javascript/portal/components/PublicArticleSearch.vue
+++ b/app/javascript/portal/components/PublicArticleSearch.vue
@@ -1,27 +1,3 @@
-<template>
-  <div v-on-clickaway="closeSearch" class="max-w-5xl w-full relative my-4">
-    <public-search-input
-      v-model="searchTerm"
-      :search-placeholder="searchTranslations.searchPlaceholder"
-      @focus="openSearch"
-    />
-    <div
-      v-if="shouldShowSearchBox"
-      class="absolute top-14 w-full"
-      @mouseover="openSearch"
-    >
-      <search-suggestions
-        :items="searchResults"
-        :is-loading="isLoading"
-        :search-term="searchTerm"
-        :empty-placeholder="searchTranslations.emptyPlaceholder"
-        :results-title="searchTranslations.resultsTitle"
-        :loading-placeholder="searchTranslations.loadingPlaceholder"
-      />
-    </div>
-  </div>
-</template>
-
 <script>
 import SearchSuggestions from './SearchSuggestions.vue';
 import PublicSearchInput from './PublicSearchInput.vue';
@@ -121,3 +97,27 @@ export default {
   },
 };
 </script>
+
+<template>
+  <div v-on-clickaway="closeSearch" class="max-w-5xl w-full relative my-4">
+    <public-search-input
+      v-model="searchTerm"
+      :search-placeholder="searchTranslations.searchPlaceholder"
+      @focus="openSearch"
+    />
+    <div
+      v-if="shouldShowSearchBox"
+      class="absolute top-14 w-full"
+      @mouseover="openSearch"
+    >
+      <search-suggestions
+        :items="searchResults"
+        :is-loading="isLoading"
+        :search-term="searchTerm"
+        :empty-placeholder="searchTranslations.emptyPlaceholder"
+        :results-title="searchTranslations.resultsTitle"
+        :loading-placeholder="searchTranslations.loadingPlaceholder"
+      />
+    </div>
+  </div>
+</template>
diff --git a/app/javascript/portal/components/PublicSearchInput.vue b/app/javascript/portal/components/PublicSearchInput.vue
index ffa0f99a7..cdcd6534d 100644
--- a/app/javascript/portal/components/PublicSearchInput.vue
+++ b/app/javascript/portal/components/PublicSearchInput.vue
@@ -1,25 +1,3 @@
-<template>
-  <div
-    class="w-full flex items-center rounded-lg border-solid border h-12 bg-white dark:bg-slate-900 px-5 py-2 text-slate-600 dark:text-slate-200"
-    :class="{
-      'shadow border-woot-100 dark:border-woot-700': isFocused,
-      'border-slate-50 dark:border-slate-800 shadow-sm': !isFocused,
-    }"
-  >
-    <fluent-icon icon="search" />
-    <input
-      :value="value"
-      type="text"
-      class="w-full focus:outline-none text-base h-full bg-white dark:bg-slate-900 px-2 py-2 text-slate-700 dark:text-slate-100 placeholder-slate-500"
-      :placeholder="searchPlaceholder"
-      role="search"
-      @input="onChange"
-      @focus="onFocus"
-      @blur="onBlur"
-    />
-  </div>
-</template>
-
 <script>
 import FluentIcon from 'shared/components/FluentIcon/Index.vue';
 
@@ -57,3 +35,25 @@ export default {
   },
 };
 </script>
+
+<template>
+  <div
+    class="w-full flex items-center rounded-lg border-solid border h-12 bg-white dark:bg-slate-900 px-5 py-2 text-slate-600 dark:text-slate-200"
+    :class="{
+      'shadow border-woot-100 dark:border-woot-700': isFocused,
+      'border-slate-50 dark:border-slate-800 shadow-sm': !isFocused,
+    }"
+  >
+    <fluent-icon icon="search" />
+    <input
+      :value="value"
+      type="text"
+      class="w-full focus:outline-none text-base h-full bg-white dark:bg-slate-900 px-2 py-2 text-slate-700 dark:text-slate-100 placeholder-slate-500"
+      :placeholder="searchPlaceholder"
+      role="search"
+      @input="onChange"
+      @focus="onFocus"
+      @blur="onBlur"
+    />
+  </div>
+</template>
diff --git a/app/javascript/portal/components/SearchSuggestions.vue b/app/javascript/portal/components/SearchSuggestions.vue
index 2c9697e14..a8e6fd17c 100644
--- a/app/javascript/portal/components/SearchSuggestions.vue
+++ b/app/javascript/portal/components/SearchSuggestions.vue
@@ -1,54 +1,3 @@
-<template>
-  <div
-    class="shadow-xl hover:shadow-lg bg-white dark:bg-slate-900 mt-2 max-h-96 scroll-py-2 p-5 overflow-y-auto text-sm text-slate-700 dark:text-slate-100 border border-solid border-slate-50 dark:border-slate-800 rounded-lg"
-  >
-    <div
-      v-if="isLoading"
-      class="font-medium text-sm text-slate-400 dark:text-slate-700"
-    >
-      {{ loadingPlaceholder }}
-    </div>
-    <ul
-      v-if="shouldShowResults"
-      class="bg-white dark:bg-slate-900 gap-4 flex flex-col text-sm text-slate-700 dark:text-slate-100"
-      role="listbox"
-    >
-      <li
-        v-for="(article, index) in items"
-        :id="article.id"
-        :key="article.id"
-        class="group flex border border-solid hover:bg-slate-25 dark:hover:bg-slate-800 border-slate-100 dark:border-slate-800 rounded-lg cursor-pointer select-none items-center p-4"
-        :class="isSearchItemActive(index)"
-        role="option"
-        tabindex="-1"
-        @mouse-enter="onHover(index)"
-        @mouse-leave="onHover(-1)"
-      >
-        <a
-          class="flex flex-col gap-1 overflow-y-hidden"
-          :href="generateArticleUrl(article)"
-        >
-          <span
-            v-dompurify-html="prepareContent(article.title)"
-            class="flex-auto truncate text-base font-semibold leading-6 w-full overflow-hidden text-ellipsis whitespace-nowrap"
-          />
-          <div
-            v-dompurify-html="prepareContent(article.content)"
-            class="line-clamp-2 text-ellipsis whitespace-nowrap overflow-hidden text-slate-600 dark:text-slate-300 text-sm"
-          />
-        </a>
-      </li>
-    </ul>
-
-    <div
-      v-if="showEmptyResults"
-      class="font-medium text-sm text-slate-400 dark:text-slate-700"
-    >
-      {{ emptyPlaceholder }}
-    </div>
-  </div>
-</template>
-
 <script>
 import mentionSelectionKeyboardMixin from 'dashboard/components/widgets/mentions/mentionSelectionKeyboardMixin.js';
 import messageFormatterMixin from 'shared/mixins/messageFormatterMixin';
@@ -124,3 +73,54 @@ export default {
   },
 };
 </script>
+
+<template>
+  <div
+    class="shadow-xl hover:shadow-lg bg-white dark:bg-slate-900 mt-2 max-h-96 scroll-py-2 p-5 overflow-y-auto text-sm text-slate-700 dark:text-slate-100 border border-solid border-slate-50 dark:border-slate-800 rounded-lg"
+  >
+    <div
+      v-if="isLoading"
+      class="font-medium text-sm text-slate-400 dark:text-slate-700"
+    >
+      {{ loadingPlaceholder }}
+    </div>
+    <ul
+      v-if="shouldShowResults"
+      class="bg-white dark:bg-slate-900 gap-4 flex flex-col text-sm text-slate-700 dark:text-slate-100"
+      role="listbox"
+    >
+      <li
+        v-for="(article, index) in items"
+        :id="article.id"
+        :key="article.id"
+        class="group flex border border-solid hover:bg-slate-25 dark:hover:bg-slate-800 border-slate-100 dark:border-slate-800 rounded-lg cursor-pointer select-none items-center p-4"
+        :class="isSearchItemActive(index)"
+        role="option"
+        tabindex="-1"
+        @mouse-enter="onHover(index)"
+        @mouse-leave="onHover(-1)"
+      >
+        <a
+          class="flex flex-col gap-1 overflow-y-hidden"
+          :href="generateArticleUrl(article)"
+        >
+          <span
+            v-dompurify-html="prepareContent(article.title)"
+            class="flex-auto truncate text-base font-semibold leading-6 w-full overflow-hidden text-ellipsis whitespace-nowrap"
+          />
+          <div
+            v-dompurify-html="prepareContent(article.content)"
+            class="line-clamp-2 text-ellipsis whitespace-nowrap overflow-hidden text-slate-600 dark:text-slate-300 text-sm"
+          />
+        </a>
+      </li>
+    </ul>
+
+    <div
+      v-if="showEmptyResults"
+      class="font-medium text-sm text-slate-400 dark:text-slate-700"
+    >
+      {{ emptyPlaceholder }}
+    </div>
+  </div>
+</template>
diff --git a/app/javascript/portal/components/TableOfContents.vue b/app/javascript/portal/components/TableOfContents.vue
index d7b3bb021..5368e6c79 100644
--- a/app/javascript/portal/components/TableOfContents.vue
+++ b/app/javascript/portal/components/TableOfContents.vue
@@ -1,33 +1,3 @@
-<template>
-  <div class="hidden lg:block flex-1 py-6 scroll-mt-24 pl-4">
-    <div v-if="rows.length > 0" class="sticky top-24 py-2 overflow-auto">
-      <nav class="max-w-2xl">
-        <ol
-          role="list"
-          class="flex flex-col gap-2 text-base border-l-2 border-solid border-slate-100 dark:border-slate-800"
-        >
-          <li
-            v-for="element in rows"
-            :key="element.slug"
-            class="leading-6 border-l-2 relative -left-0.5 border-solid"
-            :class="elementBorderStyles(element)"
-          >
-            <p class="py-1 px-3" :class="getClassName(element)">
-              <a
-                :href="`#${element.slug}`"
-                data-turbolinks="false"
-                class="font-medium text-sm tracking-[0.28px] cursor-pointer"
-                :class="elementTextStyles(element)"
-              >
-                {{ element.title }}
-              </a>
-            </p>
-          </li>
-        </ol>
-      </nav>
-    </div>
-  </div>
-</template>
 <script>
 export default {
   props: {
@@ -122,3 +92,33 @@ export default {
   },
 };
 </script>
+<template>
+  <div class="hidden lg:block flex-1 py-6 scroll-mt-24 pl-4">
+    <div v-if="rows.length > 0" class="sticky top-24 py-2 overflow-auto">
+      <nav class="max-w-2xl">
+        <ol
+          role="list"
+          class="flex flex-col gap-2 text-base border-l-2 border-solid border-slate-100 dark:border-slate-800"
+        >
+          <li
+            v-for="element in rows"
+            :key="element.slug"
+            class="leading-6 border-l-2 relative -left-0.5 border-solid"
+            :class="elementBorderStyles(element)"
+          >
+            <p class="py-1 px-3" :class="getClassName(element)">
+              <a
+                :href="`#${element.slug}`"
+                data-turbolinks="false"
+                class="font-medium text-sm tracking-[0.28px] cursor-pointer"
+                :class="elementTextStyles(element)"
+              >
+                {{ element.title }}
+              </a>
+            </p>
+          </li>
+        </ol>
+      </nav>
+    </div>
+  </div>
+</template>
diff --git a/app/javascript/shared/components/Branding.vue b/app/javascript/shared/components/Branding.vue
index bbeb578e9..8034e3506 100644
--- a/app/javascript/shared/components/Branding.vue
+++ b/app/javascript/shared/components/Branding.vue
@@ -1,27 +1,3 @@
-<template>
-  <div
-    v-if="globalConfig.brandName && !disableBranding"
-    class="px-0 py-3 flex justify-center"
-  >
-    <a
-      :href="brandRedirectURL"
-      rel="noreferrer noopener nofollow"
-      target="_blank"
-      class="branding--link justify-center items-center leading-3"
-    >
-      <img
-        class="branding--image"
-        :alt="globalConfig.brandName"
-        :src="globalConfig.logoThumbnail"
-      />
-      <span>
-        {{ useInstallationName($t('POWERED_BY'), globalConfig.brandName) }}
-      </span>
-    </a>
-  </div>
-  <div v-else class="p-3" />
-</template>
-
 <script>
 import globalConfigMixin from 'shared/mixins/globalConfigMixin';
 
@@ -68,6 +44,30 @@ export default {
 };
 </script>
 
+<template>
+  <div
+    v-if="globalConfig.brandName && !disableBranding"
+    class="px-0 py-3 flex justify-center"
+  >
+    <a
+      :href="brandRedirectURL"
+      rel="noreferrer noopener nofollow"
+      target="_blank"
+      class="branding--link justify-center items-center leading-3"
+    >
+      <img
+        class="branding--image"
+        :alt="globalConfig.brandName"
+        :src="globalConfig.logoThumbnail"
+      />
+      <span>
+        {{ useInstallationName($t('POWERED_BY'), globalConfig.brandName) }}
+      </span>
+    </a>
+  </div>
+  <div v-else class="p-3" />
+</template>
+
 <style scoped lang="scss">
 @import '~widget/assets/scss/variables.scss';
 
diff --git a/app/javascript/shared/components/Button.vue b/app/javascript/shared/components/Button.vue
index ed28a8e5a..2db36fe4c 100644
--- a/app/javascript/shared/components/Button.vue
+++ b/app/javascript/shared/components/Button.vue
@@ -1,13 +1,3 @@
-<template>
-  <button
-    :class="buttonClassName"
-    :style="buttonStyles"
-    :disabled="disabled"
-    @click="onClick"
-  >
-    <slot />
-  </button>
-</template>
 <script>
 export default {
   props: {
@@ -65,3 +55,13 @@ export default {
   },
 };
 </script>
+<template>
+  <button
+    :class="buttonClassName"
+    :style="buttonStyles"
+    :disabled="disabled"
+    @click="onClick"
+  >
+    <slot />
+  </button>
+</template>
diff --git a/app/javascript/shared/components/CardButton.vue b/app/javascript/shared/components/CardButton.vue
index 9eb443568..1b614723b 100644
--- a/app/javascript/shared/components/CardButton.vue
+++ b/app/javascript/shared/components/CardButton.vue
@@ -1,29 +1,3 @@
-<template>
-  <a
-    v-if="isLink"
-    :key="action.uri"
-    class="action-button button"
-    :href="action.uri"
-    :style="{
-      background: widgetColor,
-      borderColor: widgetColor,
-      color: textColor,
-    }"
-    target="_blank"
-    rel="noopener nofollow noreferrer"
-  >
-    {{ action.text }}
-  </a>
-  <button
-    v-else
-    :key="action.payload"
-    class="action-button button"
-    :style="{ borderColor: widgetColor, color: widgetColor }"
-    @click="onClick"
-  >
-    {{ action.text }}
-  </button>
-</template>
 <script>
 import { mapGetters } from 'vuex';
 import { getContrastingTextColor } from '@chatwoot/utils';
@@ -53,6 +27,32 @@ export default {
   },
 };
 </script>
+<template>
+  <a
+    v-if="isLink"
+    :key="action.uri"
+    class="action-button button"
+    :href="action.uri"
+    :style="{
+      background: widgetColor,
+      borderColor: widgetColor,
+      color: textColor,
+    }"
+    target="_blank"
+    rel="noopener nofollow noreferrer"
+  >
+    {{ action.text }}
+  </a>
+  <button
+    v-else
+    :key="action.payload"
+    class="action-button button"
+    :style="{ borderColor: widgetColor, color: widgetColor }"
+    @click="onClick"
+  >
+    {{ action.text }}
+  </button>
+</template>
 
 <style scoped lang="scss">
 @import '~widget/assets/scss/variables.scss';
diff --git a/app/javascript/shared/components/ChatCard.vue b/app/javascript/shared/components/ChatCard.vue
index f777d6b3d..4d15b562c 100644
--- a/app/javascript/shared/components/ChatCard.vue
+++ b/app/javascript/shared/components/ChatCard.vue
@@ -1,25 +1,3 @@
-<template>
-  <div
-    class="card-message chat-bubble agent"
-    :class="$dm('bg-white', 'dark:bg-slate-700')"
-  >
-    <img class="media" :src="mediaUrl" />
-    <div class="card-body">
-      <h4 class="title" :class="$dm('text-black-900', 'dark:text-slate-50')">
-        {{ title }}
-      </h4>
-      <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"
-      />
-    </div>
-  </div>
-</template>
-
 <script>
 import CardButton from 'shared/components/CardButton.vue';
 import darkModeMixin from 'widget/mixins/darkModeMixin.js';
@@ -52,6 +30,28 @@ export default {
 };
 </script>
 
+<template>
+  <div
+    class="card-message chat-bubble agent"
+    :class="$dm('bg-white', 'dark:bg-slate-700')"
+  >
+    <img class="media" :src="mediaUrl" />
+    <div class="card-body">
+      <h4 class="title" :class="$dm('text-black-900', 'dark:text-slate-50')">
+        {{ title }}
+      </h4>
+      <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"
+      />
+    </div>
+  </div>
+</template>
+
 <style scoped lang="scss">
 @import '~widget/assets/scss/variables.scss';
 @import '~dashboard/assets/scss/mixins.scss';
diff --git a/app/javascript/shared/components/ChatForm.vue b/app/javascript/shared/components/ChatForm.vue
index bf3d830eb..f246f94a7 100644
--- a/app/javascript/shared/components/ChatForm.vue
+++ b/app/javascript/shared/components/ChatForm.vue
@@ -1,3 +1,82 @@
+<script>
+import { mapGetters } from 'vuex';
+import { getContrastingTextColor } from '@chatwoot/utils';
+import darkModeMixin from 'widget/mixins/darkModeMixin';
+
+export default {
+  mixins: [darkModeMixin],
+  props: {
+    buttonLabel: {
+      type: String,
+      default: '',
+    },
+    items: {
+      type: Array,
+      default: () => [],
+    },
+    submittedValues: {
+      type: Array,
+      default: () => [],
+    },
+  },
+  data() {
+    return {
+      formValues: {},
+      hasSubmitted: false,
+    };
+  },
+  computed: {
+    ...mapGetters({
+      widgetColor: 'appConfig/getWidgetColor',
+    }),
+    textColor() {
+      return getContrastingTextColor(this.widgetColor);
+    },
+    inputColor() {
+      return `${this.$dm('bg-white', 'dark:bg-slate-600')}
+        ${this.$dm('text-black-900', 'dark:text-slate-50')}`;
+    },
+    isFormValid() {
+      return this.items.reduce((acc, { name }) => {
+        return !!this.formValues[name] && acc;
+      }, true);
+    },
+  },
+  mounted() {
+    if (this.submittedValues.length) {
+      this.updateFormValues();
+    } else {
+      this.setFormDefaults();
+    }
+  },
+  methods: {
+    onSubmitClick() {
+      this.hasSubmitted = true;
+    },
+    onSubmit() {
+      if (!this.isFormValid) {
+        return;
+      }
+      this.$emit('submit', this.formValues);
+    },
+    buildFormObject(formObjectArray) {
+      return formObjectArray.reduce((acc, obj) => {
+        return {
+          ...acc,
+          [obj.name]: obj.value || obj.default,
+        };
+      }, {});
+    },
+    updateFormValues() {
+      this.formValues = this.buildFormObject(this.submittedValues);
+    },
+    setFormDefaults() {
+      this.formValues = this.buildFormObject(this.items);
+    },
+  },
+};
+</script>
+
 <template>
   <div
     class="form chat-bubble agent"
@@ -84,85 +163,6 @@
   </div>
 </template>
 
-<script>
-import { mapGetters } from 'vuex';
-import { getContrastingTextColor } from '@chatwoot/utils';
-import darkModeMixin from 'widget/mixins/darkModeMixin';
-
-export default {
-  mixins: [darkModeMixin],
-  props: {
-    buttonLabel: {
-      type: String,
-      default: '',
-    },
-    items: {
-      type: Array,
-      default: () => [],
-    },
-    submittedValues: {
-      type: Array,
-      default: () => [],
-    },
-  },
-  data() {
-    return {
-      formValues: {},
-      hasSubmitted: false,
-    };
-  },
-  computed: {
-    ...mapGetters({
-      widgetColor: 'appConfig/getWidgetColor',
-    }),
-    textColor() {
-      return getContrastingTextColor(this.widgetColor);
-    },
-    inputColor() {
-      return `${this.$dm('bg-white', 'dark:bg-slate-600')}
-        ${this.$dm('text-black-900', 'dark:text-slate-50')}`;
-    },
-    isFormValid() {
-      return this.items.reduce((acc, { name }) => {
-        return !!this.formValues[name] && acc;
-      }, true);
-    },
-  },
-  mounted() {
-    if (this.submittedValues.length) {
-      this.updateFormValues();
-    } else {
-      this.setFormDefaults();
-    }
-  },
-  methods: {
-    onSubmitClick() {
-      this.hasSubmitted = true;
-    },
-    onSubmit() {
-      if (!this.isFormValid) {
-        return;
-      }
-      this.$emit('submit', this.formValues);
-    },
-    buildFormObject(formObjectArray) {
-      return formObjectArray.reduce((acc, obj) => {
-        return {
-          ...acc,
-          [obj.name]: obj.value || obj.default,
-        };
-      }, {});
-    },
-    updateFormValues() {
-      this.formValues = this.buildFormObject(this.submittedValues);
-    },
-    setFormDefaults() {
-      this.formValues = this.buildFormObject(this.items);
-    },
-  },
-};
-</script>
-
 <style scoped lang="scss">
 @import '~widget/assets/scss/variables.scss';
 
diff --git a/app/javascript/shared/components/ChatOption.vue b/app/javascript/shared/components/ChatOption.vue
index 7532e14d3..de6d27a18 100644
--- a/app/javascript/shared/components/ChatOption.vue
+++ b/app/javascript/shared/components/ChatOption.vue
@@ -1,15 +1,3 @@
-<template>
-  <li
-    class="option"
-    :class="{ 'is-selected': isSelected }"
-    :style="{ borderColor: widgetColor }"
-  >
-    <button class="option-button button" @click="onClick">
-      <span :style="{ color: widgetColor }">{{ action.title }}</span>
-    </button>
-  </li>
-</template>
-
 <script>
 import { mapGetters } from 'vuex';
 
@@ -38,6 +26,18 @@ export default {
 };
 </script>
 
+<template>
+  <li
+    class="option"
+    :class="{ 'is-selected': isSelected }"
+    :style="{ borderColor: widgetColor }"
+  >
+    <button class="option-button button" @click="onClick">
+      <span :style="{ color: widgetColor }">{{ action.title }}</span>
+    </button>
+  </li>
+</template>
+
 <style scoped lang="scss">
 @import '~widget/assets/scss/variables.scss';
 
diff --git a/app/javascript/shared/components/ChatOptions.vue b/app/javascript/shared/components/ChatOptions.vue
index 2cb8b8c97..a2c070707 100644
--- a/app/javascript/shared/components/ChatOptions.vue
+++ b/app/javascript/shared/components/ChatOptions.vue
@@ -1,29 +1,3 @@
-<template>
-  <div class="options-message chat-bubble agent bg-white dark:bg-slate-700">
-    <div class="card-body">
-      <h4 class="title text-black-900 dark:text-slate-50">
-        <div
-          v-dompurify-html="formatMessage(title, false)"
-          class="message-content text-black-900 dark:text-slate-50"
-        />
-      </h4>
-      <ul
-        v-if="!hideFields"
-        class="options"
-        :class="{ 'has-selected': !!selected }"
-      >
-        <chat-option
-          v-for="option in options"
-          :key="option.id"
-          :action="option"
-          :is-selected="isSelected(option)"
-          @click="onClick"
-        />
-      </ul>
-    </div>
-  </div>
-</template>
-
 <script>
 import ChatOption from 'shared/components/ChatOption.vue';
 import messageFormatterMixin from 'shared/mixins/messageFormatterMixin';
@@ -62,6 +36,32 @@ export default {
 };
 </script>
 
+<template>
+  <div class="options-message chat-bubble agent bg-white dark:bg-slate-700">
+    <div class="card-body">
+      <h4 class="title text-black-900 dark:text-slate-50">
+        <div
+          v-dompurify-html="formatMessage(title, false)"
+          class="message-content text-black-900 dark:text-slate-50"
+        />
+      </h4>
+      <ul
+        v-if="!hideFields"
+        class="options"
+        :class="{ 'has-selected': !!selected }"
+      >
+        <chat-option
+          v-for="option in options"
+          :key="option.id"
+          :action="option"
+          :is-selected="isSelected(option)"
+          @click="onClick"
+        />
+      </ul>
+    </div>
+  </div>
+</template>
+
 <style lang="scss">
 @import '~dashboard/assets/scss/variables.scss';
 .has-selected {
diff --git a/app/javascript/shared/components/CustomerSatisfaction.vue b/app/javascript/shared/components/CustomerSatisfaction.vue
index 471562d02..85357ea28 100644
--- a/app/javascript/shared/components/CustomerSatisfaction.vue
+++ b/app/javascript/shared/components/CustomerSatisfaction.vue
@@ -1,50 +1,3 @@
-<template>
-  <div
-    class="customer-satisfaction"
-    :class="$dm('bg-white', 'dark:bg-slate-700')"
-    :style="{ borderColor: widgetColor }"
-  >
-    <h6 class="title" :class="$dm('text-slate-900', 'dark:text-slate-50')">
-      {{ title }}
-    </h6>
-    <div class="ratings">
-      <button
-        v-for="rating in ratings"
-        :key="rating.key"
-        :class="buttonClass(rating)"
-        @click="selectRating(rating)"
-      >
-        {{ rating.emoji }}
-      </button>
-    </div>
-    <form
-      v-if="!isFeedbackSubmitted"
-      class="feedback-form"
-      @submit.prevent="onSubmit()"
-    >
-      <input
-        v-model="feedback"
-        class="form-input"
-        :class="inputColor"
-        :placeholder="$t('CSAT.PLACEHOLDER')"
-        @keydown.enter="onSubmit"
-      />
-      <button
-        class="button small"
-        :disabled="isButtonDisabled"
-        :style="{
-          background: widgetColor,
-          borderColor: widgetColor,
-          color: textColor,
-        }"
-      >
-        <spinner v-if="isUpdating && feedback" />
-        <fluent-icon v-else icon="chevron-right" />
-      </button>
-    </form>
-  </div>
-</template>
-
 <script>
 import { mapGetters } from 'vuex';
 import Spinner from 'shared/components/Spinner.vue';
@@ -149,6 +102,53 @@ export default {
 };
 </script>
 
+<template>
+  <div
+    class="customer-satisfaction"
+    :class="$dm('bg-white', 'dark:bg-slate-700')"
+    :style="{ borderColor: widgetColor }"
+  >
+    <h6 class="title" :class="$dm('text-slate-900', 'dark:text-slate-50')">
+      {{ title }}
+    </h6>
+    <div class="ratings">
+      <button
+        v-for="rating in ratings"
+        :key="rating.key"
+        :class="buttonClass(rating)"
+        @click="selectRating(rating)"
+      >
+        {{ rating.emoji }}
+      </button>
+    </div>
+    <form
+      v-if="!isFeedbackSubmitted"
+      class="feedback-form"
+      @submit.prevent="onSubmit()"
+    >
+      <input
+        v-model="feedback"
+        class="form-input"
+        :class="inputColor"
+        :placeholder="$t('CSAT.PLACEHOLDER')"
+        @keydown.enter="onSubmit"
+      />
+      <button
+        class="button small"
+        :disabled="isButtonDisabled"
+        :style="{
+          background: widgetColor,
+          borderColor: widgetColor,
+          color: textColor,
+        }"
+      >
+        <spinner v-if="isUpdating && feedback" />
+        <fluent-icon v-else icon="chevron-right" />
+      </button>
+    </form>
+  </div>
+</template>
+
 <style lang="scss" scoped>
 @import '~widget/assets/scss/variables.scss';
 @import '~widget/assets/scss/mixins.scss';
diff --git a/app/javascript/shared/components/DateSeparator.vue b/app/javascript/shared/components/DateSeparator.vue
index 32ae6e10c..a06badcc6 100644
--- a/app/javascript/shared/components/DateSeparator.vue
+++ b/app/javascript/shared/components/DateSeparator.vue
@@ -1,12 +1,3 @@
-<template>
-  <div
-    class="date--separator"
-    :class="$dm('text-slate-700', 'dark:text-slate-200')"
-  >
-    {{ formattedDate }}
-  </div>
-</template>
-
 <script>
 import { formatDate } from 'shared/helpers/DateHelper';
 import darkModeMixin from 'widget/mixins/darkModeMixin.js';
@@ -31,6 +22,15 @@ export default {
 };
 </script>
 
+<template>
+  <div
+    class="date--separator"
+    :class="$dm('text-slate-700', 'dark:text-slate-200')"
+  >
+    {{ formattedDate }}
+  </div>
+</template>
+
 <style lang="scss" scoped>
 @import '~widget/assets/scss/variables';
 
diff --git a/app/javascript/shared/components/EmojiOrIcon.vue b/app/javascript/shared/components/EmojiOrIcon.vue
index 2a93dc06f..3a2c12854 100644
--- a/app/javascript/shared/components/EmojiOrIcon.vue
+++ b/app/javascript/shared/components/EmojiOrIcon.vue
@@ -1,14 +1,3 @@
-<template>
-  <i v-if="showEmoji" :class="className">{{ iconContent }}</i>
-  <fluent-icon
-    v-else-if="showIcon"
-    :size="iconSize"
-    :icon="icon"
-    class="flex-shrink-0"
-    :class="className"
-  />
-</template>
-
 <script>
 // 🚨 This component is deprecated. Please use fluent-icon instead.
 import { hasEmojiSupport } from 'shared/helpers/emoji';
@@ -46,6 +35,17 @@ export default {
 };
 </script>
 
+<template>
+  <i v-if="showEmoji" :class="className">{{ iconContent }}</i>
+  <fluent-icon
+    v-else-if="showIcon"
+    :size="iconSize"
+    :icon="icon"
+    class="flex-shrink-0"
+    :class="className"
+  />
+</template>
+
 <style lang="scss" scoped>
 .icon--emoji {
   font-style: normal;
diff --git a/app/javascript/shared/components/FluentIcon/DashboardIcon.vue b/app/javascript/shared/components/FluentIcon/DashboardIcon.vue
index 05369ed1e..e9bb16e69 100644
--- a/app/javascript/shared/components/FluentIcon/DashboardIcon.vue
+++ b/app/javascript/shared/components/FluentIcon/DashboardIcon.vue
@@ -1,13 +1,3 @@
-<template>
-  <base-icon
-    :size="size"
-    :icon="icon"
-    :type="type"
-    :icons="icons"
-    :view-box="viewBox"
-    :icon-lib="iconLib"
-  />
-</template>
 <script>
 import BaseIcon from './Icon.vue';
 import icons from './dashboard-icons.json';
@@ -44,3 +34,13 @@ export default {
   },
 };
 </script>
+<template>
+  <base-icon
+    :size="size"
+    :icon="icon"
+    :type="type"
+    :icons="icons"
+    :view-box="viewBox"
+    :icon-lib="iconLib"
+  />
+</template>
diff --git a/app/javascript/shared/components/FluentIcon/Icon.vue b/app/javascript/shared/components/FluentIcon/Icon.vue
index da01f3397..5aab9c4a3 100644
--- a/app/javascript/shared/components/FluentIcon/Icon.vue
+++ b/app/javascript/shared/components/FluentIcon/Icon.vue
@@ -1,37 +1,3 @@
-<template>
-  <svg
-    v-if="iconLib === 'fluent'"
-    :width="size"
-    :height="size"
-    fill="none"
-    :viewBox="viewBox"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <path
-      v-for="source in pathSource"
-      :key="source"
-      :d="source"
-      fill="currentColor"
-    />
-  </svg>
-  <svg
-    v-else
-    :width="size"
-    :height="size"
-    fill="none"
-    :viewBox="viewBox"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <g v-for="(pathData, index) in pathSource" :key="index">
-      <path
-        :key="pathData"
-        :d="pathData"
-        stroke="currentColor"
-        stroke-width="1.66667"
-      />
-    </g>
-  </svg>
-</template>
 <script>
 export default {
   props: {
@@ -73,3 +39,37 @@ export default {
   },
 };
 </script>
+<template>
+  <svg
+    v-if="iconLib === 'fluent'"
+    :width="size"
+    :height="size"
+    fill="none"
+    :viewBox="viewBox"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      v-for="source in pathSource"
+      :key="source"
+      :d="source"
+      fill="currentColor"
+    />
+  </svg>
+  <svg
+    v-else
+    :width="size"
+    :height="size"
+    fill="none"
+    :viewBox="viewBox"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <g v-for="(pathData, index) in pathSource" :key="index">
+      <path
+        :key="pathData"
+        :d="pathData"
+        stroke="currentColor"
+        stroke-width="1.66667"
+      />
+    </g>
+  </svg>
+</template>
diff --git a/app/javascript/shared/components/FluentIcon/Index.vue b/app/javascript/shared/components/FluentIcon/Index.vue
index d63a0c56b..317555d1f 100644
--- a/app/javascript/shared/components/FluentIcon/Index.vue
+++ b/app/javascript/shared/components/FluentIcon/Index.vue
@@ -1,13 +1,3 @@
-<template>
-  <base-icon
-    :size="size"
-    :icon="icon"
-    :type="type"
-    :icons="icons"
-    :view-box="viewBox"
-    :icon-lib="iconLib"
-  />
-</template>
 <script>
 import BaseIcon from './Icon.vue';
 import icons from './icons.json';
@@ -44,3 +34,13 @@ export default {
   },
 };
 </script>
+<template>
+  <base-icon
+    :size="size"
+    :icon="icon"
+    :type="type"
+    :icons="icons"
+    :view-box="viewBox"
+    :icon-lib="iconLib"
+  />
+</template>
diff --git a/app/javascript/shared/components/GreetingsEditor.vue b/app/javascript/shared/components/GreetingsEditor.vue
index d67d9c1b3..f33094b2f 100644
--- a/app/javascript/shared/components/GreetingsEditor.vue
+++ b/app/javascript/shared/components/GreetingsEditor.vue
@@ -1,32 +1,3 @@
-<template>
-  <section class="w-3/4">
-    <div
-      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
-        v-model="greetingsMessage"
-        :is-format-mode="true"
-        :enable-variables="true"
-        class="input bg-white dark:bg-slate-900"
-        :placeholder="placeholder"
-        :min-height="4"
-        @input="handleInput"
-      />
-    </div>
-    <resizable-text-area
-      v-else
-      v-model="greetingsMessage"
-      :rows="4"
-      type="text"
-      class="greetings--textarea"
-      :label="label"
-      :placeholder="placeholder"
-      @input="handleInput"
-    />
-  </section>
-</template>
-
 <script>
 import WootMessageEditor from 'dashboard/components/widgets/WootWriter/Editor.vue';
 import ResizableTextArea from 'shared/components/ResizableTextArea.vue';
@@ -71,3 +42,32 @@ export default {
   },
 };
 </script>
+
+<template>
+  <section class="w-3/4">
+    <div
+      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
+        v-model="greetingsMessage"
+        :is-format-mode="true"
+        :enable-variables="true"
+        class="input bg-white dark:bg-slate-900"
+        :placeholder="placeholder"
+        :min-height="4"
+        @input="handleInput"
+      />
+    </div>
+    <resizable-text-area
+      v-else
+      v-model="greetingsMessage"
+      :rows="4"
+      type="text"
+      class="greetings--textarea"
+      :label="label"
+      :placeholder="placeholder"
+      @input="handleInput"
+    />
+  </section>
+</template>
diff --git a/app/javascript/shared/components/IframeLoader.vue b/app/javascript/shared/components/IframeLoader.vue
index 16fc3b91e..c13c9871a 100644
--- a/app/javascript/shared/components/IframeLoader.vue
+++ b/app/javascript/shared/components/IframeLoader.vue
@@ -1,25 +1,3 @@
-<template>
-  <div class="relative overflow-hidden pb-1/2 h-full">
-    <iframe
-      v-if="url"
-      :src="url"
-      class="absolute w-full h-full top-0 left-0"
-      @load="handleIframeLoad"
-      @error="handleIframeError"
-    />
-    <article-skeleton-loader
-      v-if="isLoading"
-      class="absolute w-full h-full top-0 left-0"
-    />
-    <div
-      v-if="showEmptyState"
-      class="absolute w-full h-full top-0 left-0 flex justify-center items-center"
-    >
-      <p>{{ $t('PORTAL.IFRAME_ERROR') }}</p>
-    </div>
-  </div>
-</template>
-
 <script>
 import ArticleSkeletonLoader from 'shared/components/ArticleSkeletonLoader.vue';
 
@@ -53,3 +31,25 @@ export default {
   },
 };
 </script>
+
+<template>
+  <div class="relative overflow-hidden pb-1/2 h-full">
+    <iframe
+      v-if="url"
+      :src="url"
+      class="absolute w-full h-full top-0 left-0"
+      @load="handleIframeLoad"
+      @error="handleIframeError"
+    />
+    <article-skeleton-loader
+      v-if="isLoading"
+      class="absolute w-full h-full top-0 left-0"
+    />
+    <div
+      v-if="showEmptyState"
+      class="absolute w-full h-full top-0 left-0 flex justify-center items-center"
+    >
+      <p>{{ $t('PORTAL.IFRAME_ERROR') }}</p>
+    </div>
+  </div>
+</template>
diff --git a/app/javascript/shared/components/ResizableTextArea.vue b/app/javascript/shared/components/ResizableTextArea.vue
index 78ad86be2..86c26c9b8 100644
--- a/app/javascript/shared/components/ResizableTextArea.vue
+++ b/app/javascript/shared/components/ResizableTextArea.vue
@@ -1,16 +1,3 @@
-<template>
-  <textarea
-    ref="textarea"
-    :placeholder="placeholder"
-    :rows="rows"
-    :value="value"
-    @input="onInput"
-    @focus="onFocus"
-    @keyup="onKeyup"
-    @blur="onBlur"
-  />
-</template>
-
 <script>
 import {
   appendSignature,
@@ -162,3 +149,16 @@ export default {
   },
 };
 </script>
+
+<template>
+  <textarea
+    ref="textarea"
+    :placeholder="placeholder"
+    :rows="rows"
+    :value="value"
+    @input="onInput"
+    @focus="onFocus"
+    @keyup="onKeyup"
+    @blur="onBlur"
+  />
+</template>
diff --git a/app/javascript/shared/components/Spinner.vue b/app/javascript/shared/components/Spinner.vue
index f4bdf0bc2..37c0cbd73 100644
--- a/app/javascript/shared/components/Spinner.vue
+++ b/app/javascript/shared/components/Spinner.vue
@@ -1,6 +1,3 @@
-<template>
-  <span class="spinner" :class="`${size} ${colorSchemeClasses}`" />
-</template>
 <script>
 export default {
   props: {
@@ -32,6 +29,9 @@ export default {
   },
 };
 </script>
+<template>
+  <span class="spinner" :class="`${size} ${colorSchemeClasses}`" />
+</template>
 <style scoped lang="scss">
 @import '~widget/assets/scss/variables';
 
diff --git a/app/javascript/shared/components/TextArea.vue b/app/javascript/shared/components/TextArea.vue
index 1b6bc2f05..101875425 100644
--- a/app/javascript/shared/components/TextArea.vue
+++ b/app/javascript/shared/components/TextArea.vue
@@ -1,31 +1,3 @@
-<template>
-  <label class="block">
-    <div
-      v-if="label"
-      class="mb-2 text-xs font-medium"
-      :class="{
-        'text-black-800': !error,
-        'text-red-400': error,
-      }"
-    >
-      {{ label }}
-    </div>
-    <textarea
-      class="resize-none border rounded w-full py-2 px-3 text-slate-700 leading-tight outline-none"
-      :class="{
-        'border-black-200 hover:border-black-300 focus:border-black-300':
-          !error,
-        'border-red-200 hover:border-red-300 focus:border-red-300': error,
-      }"
-      :placeholder="placeholder"
-      :value="value"
-      @change="onChange"
-    />
-    <div v-if="error" class="text-red-400 mt-2 text-xs font-medium">
-      {{ error }}
-    </div>
-  </label>
-</template>
 <script>
 export default {
   props: {
@@ -57,6 +29,34 @@ export default {
   },
 };
 </script>
+<template>
+  <label class="block">
+    <div
+      v-if="label"
+      class="mb-2 text-xs font-medium"
+      :class="{
+        'text-black-800': !error,
+        'text-red-400': error,
+      }"
+    >
+      {{ label }}
+    </div>
+    <textarea
+      class="resize-none border rounded w-full py-2 px-3 text-slate-700 leading-tight outline-none"
+      :class="{
+        'border-black-200 hover:border-black-300 focus:border-black-300':
+          !error,
+        'border-red-200 hover:border-red-300 focus:border-red-300': error,
+      }"
+      :placeholder="placeholder"
+      :value="value"
+      @change="onChange"
+    />
+    <div v-if="error" class="text-red-400 mt-2 text-xs font-medium">
+      {{ error }}
+    </div>
+  </label>
+</template>
 <style lang="scss" scoped>
 textarea {
   min-height: 8rem;
diff --git a/app/javascript/shared/components/emoji/EmojiInput.vue b/app/javascript/shared/components/emoji/EmojiInput.vue
index cea163dc3..9a98ae4e6 100644
--- a/app/javascript/shared/components/emoji/EmojiInput.vue
+++ b/app/javascript/shared/components/emoji/EmojiInput.vue
@@ -1,3 +1,88 @@
+<script>
+import emojis from './emojisGroup.json';
+import FluentIcon from 'shared/components/FluentIcon/Index.vue';
+const SEARCH_KEY = 'Search';
+
+export default {
+  components: { FluentIcon },
+  props: {
+    onClick: {
+      type: Function,
+      default: () => {},
+    },
+    showRemoveButton: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  data() {
+    return {
+      selectedKey: 'Search',
+      emojis,
+      search: '',
+    };
+  },
+  computed: {
+    categories() {
+      return [...this.emojis];
+    },
+    filterEmojisByCategory() {
+      const selectedCategoryName = this.emojis.find(category =>
+        category.name === this.selectedKey ? category.name : null
+      );
+      return selectedCategoryName?.emojis;
+    },
+    filterAllEmojisBySearch() {
+      return this.emojis.map(category => {
+        const allEmojis = category.emojis.filter(emoji =>
+          emoji.slug.replaceAll('_', ' ').includes(this.search.toLowerCase())
+        );
+        return allEmojis.length > 0
+          ? { ...category, emojis: allEmojis }
+          : { ...category, emojis: [] };
+      });
+    },
+    hasNoSearch() {
+      return this.selectedKey !== SEARCH_KEY && this.search === '';
+    },
+    hasEmptySearchResult() {
+      return this.filterAllEmojisBySearch.every(
+        category => category.emojis.length === 0
+      );
+    },
+  },
+  watch: {
+    search() {
+      this.selectedKey = 'Search';
+    },
+    selectedKey() {
+      return this.selectedKey === 'Search' ? this.focusSearchInput() : null;
+    },
+  },
+  mounted() {
+    this.focusSearchInput();
+  },
+  methods: {
+    changeCategory(category) {
+      this.search = '';
+      this.$refs.emojiItem.scrollTo({ top: 0 });
+      this.selectedKey = category;
+    },
+    getFirstEmojiByCategoryName(categoryName) {
+      const categoryItem = this.emojis.find(category =>
+        category.name === categoryName ? category : null
+      );
+      return categoryItem ? categoryItem.emojis[0].emoji : '';
+    },
+    focusSearchInput() {
+      this.$nextTick(() => {
+        this.$refs.searchbar.focus();
+      });
+    },
+  },
+};
+</script>
+
 <template>
   <div
     role="dialog"
@@ -96,91 +181,6 @@
     </div>
   </div>
 </template>
-
-<script>
-import emojis from './emojisGroup.json';
-import FluentIcon from 'shared/components/FluentIcon/Index.vue';
-const SEARCH_KEY = 'Search';
-
-export default {
-  components: { FluentIcon },
-  props: {
-    onClick: {
-      type: Function,
-      default: () => {},
-    },
-    showRemoveButton: {
-      type: Boolean,
-      default: false,
-    },
-  },
-  data() {
-    return {
-      selectedKey: 'Search',
-      emojis,
-      search: '',
-    };
-  },
-  computed: {
-    categories() {
-      return [...this.emojis];
-    },
-    filterEmojisByCategory() {
-      const selectedCategoryName = this.emojis.find(category =>
-        category.name === this.selectedKey ? category.name : null
-      );
-      return selectedCategoryName?.emojis;
-    },
-    filterAllEmojisBySearch() {
-      return this.emojis.map(category => {
-        const allEmojis = category.emojis.filter(emoji =>
-          emoji.slug.replaceAll('_', ' ').includes(this.search.toLowerCase())
-        );
-        return allEmojis.length > 0
-          ? { ...category, emojis: allEmojis }
-          : { ...category, emojis: [] };
-      });
-    },
-    hasNoSearch() {
-      return this.selectedKey !== SEARCH_KEY && this.search === '';
-    },
-    hasEmptySearchResult() {
-      return this.filterAllEmojisBySearch.every(
-        category => category.emojis.length === 0
-      );
-    },
-  },
-  watch: {
-    search() {
-      this.selectedKey = 'Search';
-    },
-    selectedKey() {
-      return this.selectedKey === 'Search' ? this.focusSearchInput() : null;
-    },
-  },
-  mounted() {
-    this.focusSearchInput();
-  },
-  methods: {
-    changeCategory(category) {
-      this.search = '';
-      this.$refs.emojiItem.scrollTo({ top: 0 });
-      this.selectedKey = category;
-    },
-    getFirstEmojiByCategoryName(categoryName) {
-      const categoryItem = this.emojis.find(category =>
-        category.name === categoryName ? category : null
-      );
-      return categoryItem ? categoryItem.emojis[0].emoji : '';
-    },
-    focusSearchInput() {
-      this.$nextTick(() => {
-        this.$refs.searchbar.focus();
-      });
-    },
-  },
-};
-</script>
 <style scoped>
 @tailwind components;
 @layer components {
diff --git a/app/javascript/shared/components/ui/MultiselectDropdown.vue b/app/javascript/shared/components/ui/MultiselectDropdown.vue
index fe6a4f2f8..2c55cf96b 100644
--- a/app/javascript/shared/components/ui/MultiselectDropdown.vue
+++ b/app/javascript/shared/components/ui/MultiselectDropdown.vue
@@ -1,3 +1,71 @@
+<script>
+import Thumbnail from 'dashboard/components/widgets/Thumbnail.vue';
+import MultiselectDropdownItems from 'shared/components/ui/MultiselectDropdownItems.vue';
+export default {
+  components: {
+    Thumbnail,
+    MultiselectDropdownItems,
+  },
+  props: {
+    options: {
+      type: Array,
+      default: () => [],
+    },
+    selectedItem: {
+      type: Object,
+      default: () => ({}),
+    },
+    hasThumbnail: {
+      type: Boolean,
+      default: true,
+    },
+    multiselectorTitle: {
+      type: String,
+      default: '',
+    },
+    multiselectorPlaceholder: {
+      type: String,
+      default: 'None',
+    },
+    noSearchResult: {
+      type: String,
+      default: 'No results found',
+    },
+    inputPlaceholder: {
+      type: String,
+      default: 'Search',
+    },
+  },
+  data() {
+    return {
+      showSearchDropdown: false,
+    };
+  },
+  computed: {
+    hasValue() {
+      if (this.selectedItem && this.selectedItem.id) {
+        return true;
+      }
+      return false;
+    },
+  },
+  methods: {
+    toggleDropdown() {
+      this.showSearchDropdown = !this.showSearchDropdown;
+    },
+
+    onCloseDropdown() {
+      this.showSearchDropdown = false;
+    },
+
+    onClickSelectItem(value) {
+      this.$emit('click', value);
+      this.onCloseDropdown();
+    },
+  },
+};
+</script>
+
 <template>
   <div
     v-on-clickaway="onCloseDropdown"
@@ -71,74 +139,6 @@
   </div>
 </template>
 
-<script>
-import Thumbnail from 'dashboard/components/widgets/Thumbnail.vue';
-import MultiselectDropdownItems from 'shared/components/ui/MultiselectDropdownItems.vue';
-export default {
-  components: {
-    Thumbnail,
-    MultiselectDropdownItems,
-  },
-  props: {
-    options: {
-      type: Array,
-      default: () => [],
-    },
-    selectedItem: {
-      type: Object,
-      default: () => ({}),
-    },
-    hasThumbnail: {
-      type: Boolean,
-      default: true,
-    },
-    multiselectorTitle: {
-      type: String,
-      default: '',
-    },
-    multiselectorPlaceholder: {
-      type: String,
-      default: 'None',
-    },
-    noSearchResult: {
-      type: String,
-      default: 'No results found',
-    },
-    inputPlaceholder: {
-      type: String,
-      default: 'Search',
-    },
-  },
-  data() {
-    return {
-      showSearchDropdown: false,
-    };
-  },
-  computed: {
-    hasValue() {
-      if (this.selectedItem && this.selectedItem.id) {
-        return true;
-      }
-      return false;
-    },
-  },
-  methods: {
-    toggleDropdown() {
-      this.showSearchDropdown = !this.showSearchDropdown;
-    },
-
-    onCloseDropdown() {
-      this.showSearchDropdown = false;
-    },
-
-    onClickSelectItem(value) {
-      this.$emit('click', value);
-      this.onCloseDropdown();
-    },
-  },
-};
-</script>
-
 <style lang="scss" scoped>
 .dropdown-pane {
   @apply box-border top-[2.625rem] w-full;
diff --git a/app/javascript/shared/components/ui/MultiselectDropdownItems.vue b/app/javascript/shared/components/ui/MultiselectDropdownItems.vue
index 4c38eb9a6..9c02f347b 100644
--- a/app/javascript/shared/components/ui/MultiselectDropdownItems.vue
+++ b/app/javascript/shared/components/ui/MultiselectDropdownItems.vue
@@ -1,66 +1,3 @@
-<template>
-  <div class="dropdown-wrap">
-    <div class="mb-2 flex-shrink-0 flex-grow-0 flex-auto max-h-8">
-      <input
-        ref="searchbar"
-        v-model="search"
-        type="text"
-        class="search-input"
-        autofocus="true"
-        :placeholder="inputPlaceholder"
-      />
-    </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"
-          >
-            <woot-button
-              class="multiselect-dropdown--item"
-              :variant="isActive(option) ? 'hollow' : 'clear'"
-              color-scheme="secondary"
-              :class="{
-                active: isActive(option),
-              }"
-              @click="() => onclick(option)"
-            >
-              <div class="flex items-center gap-1.5">
-                <Thumbnail
-                  v-if="hasThumbnail"
-                  :src="option.thumbnail"
-                  size="24px"
-                  :username="option.name"
-                  :status="option.availability_status"
-                  has-border
-                />
-                <div
-                  class="flex items-center justify-between w-full min-w-0 gap-2"
-                >
-                  <span
-                    class="leading-4 my-0 overflow-hidden whitespace-nowrap text-ellipsis text-sm"
-                    :title="option.name"
-                  >
-                    {{ option.name }}
-                  </span>
-                  <fluent-icon v-if="isActive(option)" icon="checkmark" />
-                </div>
-              </div>
-            </woot-button>
-          </woot-dropdown-item>
-        </woot-dropdown-menu>
-        <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"
-        >
-          {{ noSearchResult }}
-        </h4>
-      </div>
-    </div>
-  </div>
-</template>
-
 <script>
 import WootDropdownItem from 'shared/components/ui/dropdown/DropdownItem.vue';
 import WootDropdownMenu from 'shared/components/ui/dropdown/DropdownMenu.vue';
@@ -131,6 +68,69 @@ export default {
 };
 </script>
 
+<template>
+  <div class="dropdown-wrap">
+    <div class="mb-2 flex-shrink-0 flex-grow-0 flex-auto max-h-8">
+      <input
+        ref="searchbar"
+        v-model="search"
+        type="text"
+        class="search-input"
+        autofocus="true"
+        :placeholder="inputPlaceholder"
+      />
+    </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"
+          >
+            <woot-button
+              class="multiselect-dropdown--item"
+              :variant="isActive(option) ? 'hollow' : 'clear'"
+              color-scheme="secondary"
+              :class="{
+                active: isActive(option),
+              }"
+              @click="() => onclick(option)"
+            >
+              <div class="flex items-center gap-1.5">
+                <Thumbnail
+                  v-if="hasThumbnail"
+                  :src="option.thumbnail"
+                  size="24px"
+                  :username="option.name"
+                  :status="option.availability_status"
+                  has-border
+                />
+                <div
+                  class="flex items-center justify-between w-full min-w-0 gap-2"
+                >
+                  <span
+                    class="leading-4 my-0 overflow-hidden whitespace-nowrap text-ellipsis text-sm"
+                    :title="option.name"
+                  >
+                    {{ option.name }}
+                  </span>
+                  <fluent-icon v-if="isActive(option)" icon="checkmark" />
+                </div>
+              </div>
+            </woot-button>
+          </woot-dropdown-item>
+        </woot-dropdown-menu>
+        <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"
+        >
+          {{ noSearchResult }}
+        </h4>
+      </div>
+    </div>
+  </div>
+</template>
+
 <style lang="scss" scoped>
 .dropdown-wrap {
   @apply w-full flex flex-col max-h-[12.5rem];
diff --git a/app/javascript/shared/components/ui/dropdown/AddLabel.vue b/app/javascript/shared/components/ui/dropdown/AddLabel.vue
index 759287994..6694ddd78 100644
--- a/app/javascript/shared/components/ui/dropdown/AddLabel.vue
+++ b/app/javascript/shared/components/ui/dropdown/AddLabel.vue
@@ -1,3 +1,13 @@
+<script>
+export default {
+  methods: {
+    addLabel() {
+      this.$emit('add');
+    },
+  },
+};
+</script>
+
 <template>
   <woot-button
     variant="smooth"
@@ -10,16 +20,6 @@
   </woot-button>
 </template>
 
-<script>
-export default {
-  methods: {
-    addLabel() {
-      this.$emit('add');
-    },
-  },
-};
-</script>
-
 <style lang="scss" scoped>
 .label--add {
   margin-bottom: var(--space-micro);
diff --git a/app/javascript/shared/components/ui/dropdown/DropdownDivider.vue b/app/javascript/shared/components/ui/dropdown/DropdownDivider.vue
index 38cfa0899..d8f5f3f05 100644
--- a/app/javascript/shared/components/ui/dropdown/DropdownDivider.vue
+++ b/app/javascript/shared/components/ui/dropdown/DropdownDivider.vue
@@ -1,3 +1,6 @@
+<script>
+export default {};
+</script>
 <template>
   <li
     class="list-none my-1 mx-0 border-b border-slate-50 dark:border-slate-700"
@@ -5,6 +8,3 @@
     :aria-disabled="true"
   />
 </template>
-<script>
-export default {};
-</script>
diff --git a/app/javascript/shared/components/ui/dropdown/DropdownHeader.vue b/app/javascript/shared/components/ui/dropdown/DropdownHeader.vue
index 8b36bb1c5..56f9d129b 100644
--- a/app/javascript/shared/components/ui/dropdown/DropdownHeader.vue
+++ b/app/javascript/shared/components/ui/dropdown/DropdownHeader.vue
@@ -1,13 +1,3 @@
-<template>
-  <li class="inline-flex list-none" :tabindex="null" :aria-disabled="true">
-    <span
-      class="text-xs text-slate-600 dark:text-slate-100 mt-1 font-medium w-full block text-left rtl:text-right whitespace-nowrap p-2"
-    >
-      {{ title }}
-    </span>
-    <slot />
-  </li>
-</template>
 <script>
 export default {
   componentName: 'WootDropdownMenu',
@@ -19,3 +9,13 @@ export default {
   },
 };
 </script>
+<template>
+  <li class="inline-flex list-none" :tabindex="null" :aria-disabled="true">
+    <span
+      class="text-xs text-slate-600 dark:text-slate-100 mt-1 font-medium w-full block text-left rtl:text-right whitespace-nowrap p-2"
+    >
+      {{ title }}
+    </span>
+    <slot />
+  </li>
+</template>
diff --git a/app/javascript/shared/components/ui/dropdown/DropdownItem.vue b/app/javascript/shared/components/ui/dropdown/DropdownItem.vue
index 3ec241968..eea092173 100644
--- a/app/javascript/shared/components/ui/dropdown/DropdownItem.vue
+++ b/app/javascript/shared/components/ui/dropdown/DropdownItem.vue
@@ -1,15 +1,3 @@
-<template>
-  <li
-    class="dropdown-menu__item list-none mb-1"
-    :class="{
-      'is-disabled': disabled,
-    }"
-    :tabindex="disabled ? null : -1"
-    :aria-disabled="disabled"
-  >
-    <slot />
-  </li>
-</template>
 <script>
 export default {
   name: 'WootDropdownItem',
@@ -26,6 +14,18 @@ export default {
   },
 };
 </script>
+<template>
+  <li
+    class="dropdown-menu__item list-none mb-1"
+    :class="{
+      'is-disabled': disabled,
+    }"
+    :tabindex="disabled ? null : -1"
+    :aria-disabled="disabled"
+  >
+    <slot />
+  </li>
+</template>
 <style lang="scss" scoped>
 .dropdown-menu__item {
   ::v-deep {
diff --git a/app/javascript/shared/components/ui/dropdown/DropdownMenu.vue b/app/javascript/shared/components/ui/dropdown/DropdownMenu.vue
index a876de401..d035ffcca 100644
--- a/app/javascript/shared/components/ui/dropdown/DropdownMenu.vue
+++ b/app/javascript/shared/components/ui/dropdown/DropdownMenu.vue
@@ -1,12 +1,3 @@
-<template>
-  <ul
-    ref="dropdownMenu"
-    class="dropdown menu vertical"
-    :class="[placement && `dropdown--${placement}`]"
-  >
-    <slot />
-  </ul>
-</template>
 <script>
 import keyboardEventListenerMixins from 'shared/mixins/keyboardEventListenerMixins';
 export default {
@@ -59,3 +50,12 @@ export default {
   },
 };
 </script>
+<template>
+  <ul
+    ref="dropdownMenu"
+    class="dropdown menu vertical"
+    :class="[placement && `dropdown--${placement}`]"
+  >
+    <slot />
+  </ul>
+</template>
diff --git a/app/javascript/shared/components/ui/dropdown/DropdownSubMenu.vue b/app/javascript/shared/components/ui/dropdown/DropdownSubMenu.vue
index 4e5ee1296..bbb6e66af 100644
--- a/app/javascript/shared/components/ui/dropdown/DropdownSubMenu.vue
+++ b/app/javascript/shared/components/ui/dropdown/DropdownSubMenu.vue
@@ -1,11 +1,3 @@
-<template>
-  <li class="sub-menu-container">
-    <ul class="sub-menu-li-container">
-      <woot-dropdown-header v-if="title" :title="title" />
-      <slot />
-    </ul>
-  </li>
-</template>
 <script>
 import WootDropdownHeader from 'shared/components/ui/dropdown/DropdownHeader.vue';
 
@@ -24,6 +16,14 @@ export default {
   },
 };
 </script>
+<template>
+  <li class="sub-menu-container">
+    <ul class="sub-menu-li-container">
+      <woot-dropdown-header v-if="title" :title="title" />
+      <slot />
+    </ul>
+  </li>
+</template>
 <style lang="scss" scoped>
 .sub-menu-container {
   margin-top: var(--space-micro);
diff --git a/app/javascript/shared/components/ui/label/LabelDropdown.vue b/app/javascript/shared/components/ui/label/LabelDropdown.vue
index 30f36a7bb..652721f4b 100644
--- a/app/javascript/shared/components/ui/label/LabelDropdown.vue
+++ b/app/javascript/shared/components/ui/label/LabelDropdown.vue
@@ -1,80 +1,3 @@
-<template>
-  <div class="flex flex-col w-full max-h-[12.5rem]">
-    <div class="flex items-center justify-center mb-1">
-      <h4
-        class="text-sm text-slate-800 dark:text-slate-100 m-0 overflow-hidden whitespace-nowrap text-ellipsis flex-grow"
-      >
-        {{ $t('CONTACT_PANEL.LABELS.LABEL_SELECT.TITLE') }}
-      </h4>
-      <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>
-    </div>
-    <div class="mb-2 flex-shrink-0 flex-grow-0 flex-auto max-h-8">
-      <input
-        ref="searchbar"
-        v-model="search"
-        type="text"
-        class="search-input"
-        autofocus="true"
-        :placeholder="$t('CONTACT_PANEL.LABELS.LABEL_SELECT.PLACEHOLDER')"
-      />
-    </div>
-    <div
-      class="flex justify-start items-start flex-grow flex-shrink flex-auto overflow-auto"
-    >
-      <div class="w-full">
-        <woot-dropdown-menu>
-          <label-dropdown-item
-            v-for="label in filteredActiveLabels"
-            :key="label.title"
-            :title="label.title"
-            :color="label.color"
-            :selected="selectedLabels.includes(label.title)"
-            @click="onAddRemove(label)"
-          />
-        </woot-dropdown-menu>
-        <div
-          v-if="noResult"
-          class="flex justify-center py-4 px-2.5 font-medium text-xs text-slate-700 dark:text-slate-200"
-        >
-          {{ $t('CONTACT_PANEL.LABELS.LABEL_SELECT.NO_RESULT') }}
-        </div>
-        <div
-          v-if="allowCreation && shouldShowCreate"
-          class="flex pt-1 border-t border-solid border-slate-100 dark:border-slate-900"
-        >
-          <woot-button
-            size="small"
-            variant="clear"
-            color-scheme="secondary"
-            icon="add"
-            is-expanded
-            class="button-new-label"
-            :is-disabled="hasExactMatchInResults"
-            @click="showCreateModal"
-          >
-            {{ createLabelPlaceholder }}
-            {{ parsedSearch }}
-          </woot-button>
-
-          <woot-modal
-            :show.sync="createModalVisible"
-            :on-close="hideCreateModal"
-          >
-            <add-label-modal
-              :prefill-title="parsedSearch"
-              @close="hideCreateModal"
-            />
-          </woot-modal>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
 <script>
 import LabelDropdownItem from './LabelDropdownItem.vue';
 import Hotkey from 'dashboard/components/base/Hotkey.vue';
@@ -184,6 +107,83 @@ export default {
 };
 </script>
 
+<template>
+  <div class="flex flex-col w-full max-h-[12.5rem]">
+    <div class="flex items-center justify-center mb-1">
+      <h4
+        class="text-sm text-slate-800 dark:text-slate-100 m-0 overflow-hidden whitespace-nowrap text-ellipsis flex-grow"
+      >
+        {{ $t('CONTACT_PANEL.LABELS.LABEL_SELECT.TITLE') }}
+      </h4>
+      <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>
+    </div>
+    <div class="mb-2 flex-shrink-0 flex-grow-0 flex-auto max-h-8">
+      <input
+        ref="searchbar"
+        v-model="search"
+        type="text"
+        class="search-input"
+        autofocus="true"
+        :placeholder="$t('CONTACT_PANEL.LABELS.LABEL_SELECT.PLACEHOLDER')"
+      />
+    </div>
+    <div
+      class="flex justify-start items-start flex-grow flex-shrink flex-auto overflow-auto"
+    >
+      <div class="w-full">
+        <woot-dropdown-menu>
+          <label-dropdown-item
+            v-for="label in filteredActiveLabels"
+            :key="label.title"
+            :title="label.title"
+            :color="label.color"
+            :selected="selectedLabels.includes(label.title)"
+            @click="onAddRemove(label)"
+          />
+        </woot-dropdown-menu>
+        <div
+          v-if="noResult"
+          class="flex justify-center py-4 px-2.5 font-medium text-xs text-slate-700 dark:text-slate-200"
+        >
+          {{ $t('CONTACT_PANEL.LABELS.LABEL_SELECT.NO_RESULT') }}
+        </div>
+        <div
+          v-if="allowCreation && shouldShowCreate"
+          class="flex pt-1 border-t border-solid border-slate-100 dark:border-slate-900"
+        >
+          <woot-button
+            size="small"
+            variant="clear"
+            color-scheme="secondary"
+            icon="add"
+            is-expanded
+            class="button-new-label"
+            :is-disabled="hasExactMatchInResults"
+            @click="showCreateModal"
+          >
+            {{ createLabelPlaceholder }}
+            {{ parsedSearch }}
+          </woot-button>
+
+          <woot-modal
+            :show.sync="createModalVisible"
+            :on-close="hideCreateModal"
+          >
+            <add-label-modal
+              :prefill-title="parsedSearch"
+              @close="hideCreateModal"
+            />
+          </woot-modal>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
 <style lang="scss" scoped>
 .hotkey {
   @apply flex-shrink-0;
diff --git a/app/javascript/shared/components/ui/label/LabelDropdownItem.vue b/app/javascript/shared/components/ui/label/LabelDropdownItem.vue
index 6319b7420..0cb1e6b46 100644
--- a/app/javascript/shared/components/ui/label/LabelDropdownItem.vue
+++ b/app/javascript/shared/components/ui/label/LabelDropdownItem.vue
@@ -1,25 +1,3 @@
-<template>
-  <woot-dropdown-item>
-    <div class="item-wrap">
-      <woot-button variant="clear" @click="onClick">
-        <div class="button-wrap">
-          <div class="name-label-wrap">
-            <div
-              v-if="color"
-              class="label-color--display"
-              :style="{ backgroundColor: color }"
-            />
-            <span class="label-text" :title="title">{{ title }}</span>
-          </div>
-          <div>
-            <i v-if="selected" class="icon ion-checkmark-round" />
-          </div>
-        </div>
-      </woot-button>
-    </div>
-  </woot-dropdown-item>
-</template>
-
 <script>
 export default {
   props: {
@@ -45,6 +23,28 @@ export default {
 };
 </script>
 
+<template>
+  <woot-dropdown-item>
+    <div class="item-wrap">
+      <woot-button variant="clear" @click="onClick">
+        <div class="button-wrap">
+          <div class="name-label-wrap">
+            <div
+              v-if="color"
+              class="label-color--display"
+              :style="{ backgroundColor: color }"
+            />
+            <span class="label-text" :title="title">{{ title }}</span>
+          </div>
+          <div>
+            <i v-if="selected" class="icon ion-checkmark-round" />
+          </div>
+        </div>
+      </woot-button>
+    </div>
+  </woot-dropdown-item>
+</template>
+
 <style lang="scss" scoped>
 .item-wrap {
   @apply flex;
diff --git a/app/javascript/shared/mixins/specs/MockComponent.vue b/app/javascript/shared/mixins/specs/MockComponent.vue
index 050205f70..55cd22614 100644
--- a/app/javascript/shared/mixins/specs/MockComponent.vue
+++ b/app/javascript/shared/mixins/specs/MockComponent.vue
@@ -1,9 +1,9 @@
-<template>
-  <div class="test" />
-</template>
-
 <script>
 export default {
   name: 'MockComponent',
 };
 </script>
+
+<template>
+  <div class="test" />
+</template>
diff --git a/app/javascript/superadmin_pages/views/playground/Index.vue b/app/javascript/superadmin_pages/views/playground/Index.vue
index f1fb4752a..15d325ced 100644
--- a/app/javascript/superadmin_pages/views/playground/Index.vue
+++ b/app/javascript/superadmin_pages/views/playground/Index.vue
@@ -1,37 +1,3 @@
-<template>
-  <section class="h-full w-full flex flex-col bg-slate-25">
-    <PlaygroundHeader
-      :response-source-name="componentData.responseSourceName"
-      :response-source-path="componentData.responseSourcePath"
-    />
-    <div ref="chatContainer" class="flex-1 overflow-auto px-8 py-4">
-      <div
-        v-for="message in messages"
-        :id="`message-${message.id}`"
-        :key="message.id"
-      >
-        <UserMessage
-          v-if="message.type === 'User'"
-          :message="formatMessage(message.content)"
-        />
-        <BotMessage v-else :message="formatMessage(message.content)" />
-      </div>
-      <TypingIndicator v-if="isWaiting" />
-    </div>
-    <div class="w-full px-8 py-6">
-      <textarea
-        ref="messageInput"
-        v-model="messageContent"
-        :rows="4"
-        class="resize-none block p-2.5 w-full text-sm text-gray-900 bg-gray-50 rounded-lg border !outline-2 border-slate-100 focus:ring-woot-500 focus:border-woot-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-woot-500 dark:focus:border-woot-500"
-        placeholder="Type a message... [CMD/CTRL + Enter to send]"
-        autofocus
-        autocomplete="off"
-      />
-    </div>
-  </section>
-</template>
-
 <script>
 import messageFormatterMixin from 'shared/mixins/messageFormatterMixin';
 import keyboardEventListenerMixins from 'shared/mixins/keyboardEventListenerMixins';
@@ -137,3 +103,37 @@ export default {
   },
 };
 </script>
+
+<template>
+  <section class="h-full w-full flex flex-col bg-slate-25">
+    <PlaygroundHeader
+      :response-source-name="componentData.responseSourceName"
+      :response-source-path="componentData.responseSourcePath"
+    />
+    <div ref="chatContainer" class="flex-1 overflow-auto px-8 py-4">
+      <div
+        v-for="message in messages"
+        :id="`message-${message.id}`"
+        :key="message.id"
+      >
+        <UserMessage
+          v-if="message.type === 'User'"
+          :message="formatMessage(message.content)"
+        />
+        <BotMessage v-else :message="formatMessage(message.content)" />
+      </div>
+      <TypingIndicator v-if="isWaiting" />
+    </div>
+    <div class="w-full px-8 py-6">
+      <textarea
+        ref="messageInput"
+        v-model="messageContent"
+        :rows="4"
+        class="resize-none block p-2.5 w-full text-sm text-gray-900 bg-gray-50 rounded-lg border !outline-2 border-slate-100 focus:ring-woot-500 focus:border-woot-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-woot-500 dark:focus:border-woot-500"
+        placeholder="Type a message... [CMD/CTRL + Enter to send]"
+        autofocus
+        autocomplete="off"
+      />
+    </div>
+  </section>
+</template>
diff --git a/app/javascript/survey/App.vue b/app/javascript/survey/App.vue
index 076ca9fe7..e9127e4ad 100755
--- a/app/javascript/survey/App.vue
+++ b/app/javascript/survey/App.vue
@@ -1,9 +1,3 @@
-<template>
-  <div id="app" class="woot-survey-wrap">
-    <response />
-  </div>
-</template>
-
 <script>
 import Response from './views/Response.vue';
 
@@ -15,6 +9,12 @@ export default {
 };
 </script>
 
+<template>
+  <div id="app" class="woot-survey-wrap">
+    <response />
+  </div>
+</template>
+
 <style lang="scss">
 @import '~survey/assets/scss/woot.scss';
 </style>
diff --git a/app/javascript/survey/components/Banner.vue b/app/javascript/survey/components/Banner.vue
index b178b6797..f2a907bf6 100644
--- a/app/javascript/survey/components/Banner.vue
+++ b/app/javascript/survey/components/Banner.vue
@@ -1,16 +1,3 @@
-<template>
-  <div class="flex items-center">
-    <i
-      v-if="showSuccess"
-      class="ion-checkmark-circled text-3xl text-green-500 mr-1"
-    />
-    <i v-if="showError" class="ion-android-alert text-3xl text-red-600 mr-1" />
-    <label class="text-base font-medium text-black-800 mt-4 mb-4">
-      {{ message }}
-    </label>
-  </div>
-</template>
-
 <script>
 export default {
   props: {
@@ -29,3 +16,16 @@ export default {
   },
 };
 </script>
+
+<template>
+  <div class="flex items-center">
+    <i
+      v-if="showSuccess"
+      class="ion-checkmark-circled text-3xl text-green-500 mr-1"
+    />
+    <i v-if="showError" class="ion-android-alert text-3xl text-red-600 mr-1" />
+    <label class="text-base font-medium text-black-800 mt-4 mb-4">
+      {{ message }}
+    </label>
+  </div>
+</template>
diff --git a/app/javascript/survey/components/Feedback.vue b/app/javascript/survey/components/Feedback.vue
index 2b870cc47..dc6d43951 100644
--- a/app/javascript/survey/components/Feedback.vue
+++ b/app/javascript/survey/components/Feedback.vue
@@ -1,22 +1,3 @@
-<template>
-  <div class="mt-6">
-    <label class="text-base font-medium text-black-800">
-      {{ $t('SURVEY.FEEDBACK.LABEL') }}
-    </label>
-    <text-area
-      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" />
-        {{ $t('SURVEY.FEEDBACK.BUTTON_TEXT') }}
-      </custom-button>
-    </div>
-  </div>
-</template>
-
 <script>
 import CustomButton from 'shared/components/Button.vue';
 import TextArea from 'shared/components/TextArea.vue';
@@ -52,3 +33,22 @@ export default {
   },
 };
 </script>
+
+<template>
+  <div class="mt-6">
+    <label class="text-base font-medium text-black-800">
+      {{ $t('SURVEY.FEEDBACK.LABEL') }}
+    </label>
+    <text-area
+      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" />
+        {{ $t('SURVEY.FEEDBACK.BUTTON_TEXT') }}
+      </custom-button>
+    </div>
+  </div>
+</template>
diff --git a/app/javascript/survey/components/Rating.vue b/app/javascript/survey/components/Rating.vue
index 530bc6c21..8d1e84bcf 100644
--- a/app/javascript/survey/components/Rating.vue
+++ b/app/javascript/survey/components/Rating.vue
@@ -1,18 +1,3 @@
-<template>
-  <div class="customer-satisfcation mb-2">
-    <div class="ratings flex py-5 px-0">
-      <button
-        v-for="rating in ratings"
-        :key="rating.key"
-        :class="buttonClass(rating)"
-        @click="onClick(rating)"
-      >
-        {{ rating.emoji }}
-      </button>
-    </div>
-  </div>
-</template>
-
 <script>
 import { CSAT_RATINGS } from 'shared/constants/messages';
 
@@ -45,6 +30,21 @@ export default {
 };
 </script>
 
+<template>
+  <div class="customer-satisfcation mb-2">
+    <div class="ratings flex py-5 px-0">
+      <button
+        v-for="rating in ratings"
+        :key="rating.key"
+        :class="buttonClass(rating)"
+        @click="onClick(rating)"
+      >
+        {{ rating.emoji }}
+      </button>
+    </div>
+  </div>
+</template>
+
 <style lang="scss" scoped>
 .emoji-button {
   filter: grayscale(100%);
diff --git a/app/javascript/survey/views/Response.vue b/app/javascript/survey/views/Response.vue
index 2ae1d8ca8..74059672e 100644
--- a/app/javascript/survey/views/Response.vue
+++ b/app/javascript/survey/views/Response.vue
@@ -1,56 +1,3 @@
-<template>
-  <div
-    v-if="isLoading"
-    class="flex items-center justify-center flex-1 h-full bg-black-25"
-  >
-    <spinner size="" />
-  </div>
-  <div
-    v-else
-    class="flex items-center justify-center w-full h-full overflow-auto bg-slate-50"
-  >
-    <div
-      class="flex flex-col w-full h-full bg-white rounded-lg shadow-lg lg:w-2/5 lg:h-auto"
-    >
-      <div class="w-full px-12 pt-12 pb-6 m-auto my-0">
-        <img v-if="logo" :src="logo" alt="Chatwoot logo" class="mb-6 logo" />
-        <p
-          v-if="!isRatingSubmitted"
-          class="mb-8 text-lg leading-relaxed text-black-700"
-        >
-          {{ $t('SURVEY.DESCRIPTION', { inboxName }) }}
-        </p>
-        <banner
-          v-if="shouldShowBanner"
-          :show-success="shouldShowSuccessMesage"
-          :show-error="shouldShowErrorMesage"
-          :message="message"
-        />
-        <label
-          v-if="!isRatingSubmitted"
-          class="mb-4 text-base font-medium text-black-800"
-        >
-          {{ $t('SURVEY.RATING.LABEL') }}
-        </label>
-        <rating
-          :selected-rating="selectedRating"
-          @selectRating="selectRating"
-        />
-        <feedback
-          v-if="enableFeedbackForm"
-          :is-updating="isUpdating"
-          :is-button-disabled="isButtonDisabled"
-          :selected-rating="selectedRating"
-          @sendFeedback="sendFeedback"
-        />
-      </div>
-      <div class="mb-3">
-        <branding />
-      </div>
-    </div>
-  </div>
-</template>
-
 <script>
 import { useAlert } from 'dashboard/composables';
 import Branding from 'shared/components/Branding.vue';
@@ -188,6 +135,59 @@ export default {
 };
 </script>
 
+<template>
+  <div
+    v-if="isLoading"
+    class="flex items-center justify-center flex-1 h-full bg-black-25"
+  >
+    <spinner size="" />
+  </div>
+  <div
+    v-else
+    class="flex items-center justify-center w-full h-full overflow-auto bg-slate-50"
+  >
+    <div
+      class="flex flex-col w-full h-full bg-white rounded-lg shadow-lg lg:w-2/5 lg:h-auto"
+    >
+      <div class="w-full px-12 pt-12 pb-6 m-auto my-0">
+        <img v-if="logo" :src="logo" alt="Chatwoot logo" class="mb-6 logo" />
+        <p
+          v-if="!isRatingSubmitted"
+          class="mb-8 text-lg leading-relaxed text-black-700"
+        >
+          {{ $t('SURVEY.DESCRIPTION', { inboxName }) }}
+        </p>
+        <banner
+          v-if="shouldShowBanner"
+          :show-success="shouldShowSuccessMesage"
+          :show-error="shouldShowErrorMesage"
+          :message="message"
+        />
+        <label
+          v-if="!isRatingSubmitted"
+          class="mb-4 text-base font-medium text-black-800"
+        >
+          {{ $t('SURVEY.RATING.LABEL') }}
+        </label>
+        <rating
+          :selected-rating="selectedRating"
+          @selectRating="selectRating"
+        />
+        <feedback
+          v-if="enableFeedbackForm"
+          :is-updating="isUpdating"
+          :is-button-disabled="isButtonDisabled"
+          :selected-rating="selectedRating"
+          @sendFeedback="sendFeedback"
+        />
+      </div>
+      <div class="mb-3">
+        <branding />
+      </div>
+    </div>
+  </div>
+</template>
+
 <style scoped lang="scss">
 @import '~widget/assets/scss/variables.scss';
 
diff --git a/app/javascript/v3/App.vue b/app/javascript/v3/App.vue
index c645ce5a4..914fe3f78 100644
--- a/app/javascript/v3/App.vue
+++ b/app/javascript/v3/App.vue
@@ -1,9 +1,3 @@
-<template>
-  <div class="h-full w-full antialiased" :class="theme">
-    <router-view />
-    <snackbar-container />
-  </div>
-</template>
 <script>
 import SnackbarContainer from './components/SnackBar/Container.vue';
 
@@ -42,6 +36,12 @@ export default {
   },
 };
 </script>
+<template>
+  <div class="h-full w-full antialiased" :class="theme">
+    <router-view />
+    <snackbar-container />
+  </div>
+</template>
 <style lang="scss">
 @tailwind base;
 @tailwind components;
diff --git a/app/javascript/v3/components/Button/SubmitButton.vue b/app/javascript/v3/components/Button/SubmitButton.vue
index a291b642e..dea0b41dc 100644
--- a/app/javascript/v3/components/Button/SubmitButton.vue
+++ b/app/javascript/v3/components/Button/SubmitButton.vue
@@ -1,18 +1,3 @@
-<template>
-  <button
-    :type="type"
-    data-testid="submit_button"
-    :disabled="disabled"
-    :class="computedClass"
-    class="flex items-center w-full justify-center rounded-md bg-woot-500 py-3 px-3 text-base font-medium text-white shadow-sm hover:bg-woot-600 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-woot-500 cursor-pointer"
-    @click="onClick"
-  >
-    <span>{{ buttonText }}</span>
-    <fluent-icon v-if="!!iconClass" :icon="iconClass" class="icon" />
-    <spinner v-if="loading" />
-  </button>
-</template>
-
 <script>
 import Spinner from 'shared/components/Spinner.vue';
 
@@ -61,3 +46,18 @@ export default {
   },
 };
 </script>
+
+<template>
+  <button
+    :type="type"
+    data-testid="submit_button"
+    :disabled="disabled"
+    :class="computedClass"
+    class="flex items-center w-full justify-center rounded-md bg-woot-500 py-3 px-3 text-base font-medium text-white shadow-sm hover:bg-woot-600 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-woot-500 cursor-pointer"
+    @click="onClick"
+  >
+    <span>{{ buttonText }}</span>
+    <fluent-icon v-if="!!iconClass" :icon="iconClass" class="icon" />
+    <spinner v-if="loading" />
+  </button>
+</template>
diff --git a/app/javascript/v3/components/Divider/SimpleDivider.vue b/app/javascript/v3/components/Divider/SimpleDivider.vue
index e54af1747..e21ecd559 100644
--- a/app/javascript/v3/components/Divider/SimpleDivider.vue
+++ b/app/javascript/v3/components/Divider/SimpleDivider.vue
@@ -1,3 +1,13 @@
+<script>
+export default {
+  props: {
+    label: {
+      type: String,
+      default: '',
+    },
+  },
+};
+</script>
 <template>
   <div class="relative my-4 section-separator">
     <div class="absolute inset-0 flex items-center" aria-hidden="true">
@@ -12,13 +22,3 @@
     </div>
   </div>
 </template>
-<script>
-export default {
-  props: {
-    label: {
-      type: String,
-      default: '',
-    },
-  },
-};
-</script>
diff --git a/app/javascript/v3/components/Form/Button.vue b/app/javascript/v3/components/Form/Button.vue
index 16d427307..aaeac9cc5 100644
--- a/app/javascript/v3/components/Form/Button.vue
+++ b/app/javascript/v3/components/Form/Button.vue
@@ -1,30 +1,3 @@
-<template>
-  <button
-    class="inline-flex items-center gap-1 text-sm font-medium reset-base rounded-xl w-fit"
-    :class="buttonClasses"
-    v-bind="$attrs"
-    @click="onClick"
-  >
-    <fluent-icon
-      v-if="icon && !trailingIcon"
-      size="1.16em"
-      :icon="icon"
-      class="flex-shrink-0"
-    />
-    <span
-      v-if="$slots.default"
-      class="text-sm font-medium truncate ltr:text-left rtl:text-right"
-    >
-      <slot />
-    </span>
-    <fluent-icon
-      v-if="icon && trailingIcon"
-      size="1.16em"
-      :icon="icon"
-      class="flex-shrink-0"
-    />
-  </button>
-</template>
 <script setup>
 import { computed, useAttrs } from 'vue';
 
@@ -108,3 +81,30 @@ const onClick = () => {
   emit('click');
 };
 </script>
+<template>
+  <button
+    class="inline-flex items-center gap-1 text-sm font-medium reset-base rounded-xl w-fit"
+    :class="buttonClasses"
+    v-bind="$attrs"
+    @click="onClick"
+  >
+    <fluent-icon
+      v-if="icon && !trailingIcon"
+      size="1.16em"
+      :icon="icon"
+      class="flex-shrink-0"
+    />
+    <span
+      v-if="$slots.default"
+      class="text-sm font-medium truncate ltr:text-left rtl:text-right"
+    >
+      <slot />
+    </span>
+    <fluent-icon
+      v-if="icon && trailingIcon"
+      size="1.16em"
+      :icon="icon"
+      class="flex-shrink-0"
+    />
+  </button>
+</template>
diff --git a/app/javascript/v3/components/Form/CheckBox.vue b/app/javascript/v3/components/Form/CheckBox.vue
index c70a122e6..46e155942 100644
--- a/app/javascript/v3/components/Form/CheckBox.vue
+++ b/app/javascript/v3/components/Form/CheckBox.vue
@@ -1,13 +1,3 @@
-<template>
-  <input
-    :id="value"
-    v-model="checked"
-    type="checkbox"
-    :value="value"
-    class="flex-shrink-0 mt-0.5 border-ash-200 border bg-ash-50 checked:border-none checked:bg-primary-600 dark:checked:bg-primary-600 shadow-sm appearance-none rounded-[4px] w-4 h-4 focus:ring-1 after:content-[''] after:text-white checked:after:content-['✓'] after:flex after:items-center after:justify-center after:text-center after:text-xs after:font-bold after:relative"
-  />
-</template>
-
 <script setup>
 import { computed } from 'vue';
 
@@ -29,3 +19,13 @@ const checked = computed({
   set: value => emit('update', props.value, value),
 });
 </script>
+
+<template>
+  <input
+    :id="value"
+    v-model="checked"
+    type="checkbox"
+    :value="value"
+    class="flex-shrink-0 mt-0.5 border-ash-200 border bg-ash-50 checked:border-none checked:bg-primary-600 dark:checked:bg-primary-600 shadow-sm appearance-none rounded-[4px] w-4 h-4 focus:ring-1 after:content-[''] after:text-white checked:after:content-['✓'] after:flex after:items-center after:justify-center after:text-center after:text-xs after:font-bold after:relative"
+  />
+</template>
diff --git a/app/javascript/v3/components/Form/InitialsAvatar.vue b/app/javascript/v3/components/Form/InitialsAvatar.vue
index 2a489ee76..b6ce03f53 100644
--- a/app/javascript/v3/components/Form/InitialsAvatar.vue
+++ b/app/javascript/v3/components/Form/InitialsAvatar.vue
@@ -1,14 +1,3 @@
-<template>
-  <div
-    class="rounded-xl flex leading-[100%] font-medium items-center justify-center text-center cursor-default"
-    :class="`h-[${size}px] w-[${size}px] ${colorClass}`"
-    :style="style"
-    aria-hidden="true"
-  >
-    <slot>{{ initial }}</slot>
-  </div>
-</template>
-
 <script setup>
 import { computed } from 'vue';
 import { userInitial } from 'v3/helpers/CommonHelper';
@@ -41,3 +30,14 @@ const colorClass = computed(() => {
 
 const initial = computed(() => userInitial(props.name));
 </script>
+
+<template>
+  <div
+    class="rounded-xl flex leading-[100%] font-medium items-center justify-center text-center cursor-default"
+    :class="`h-[${size}px] w-[${size}px] ${colorClass}`"
+    :style="style"
+    aria-hidden="true"
+  >
+    <slot>{{ initial }}</slot>
+  </div>
+</template>
diff --git a/app/javascript/v3/components/Form/Input.vue b/app/javascript/v3/components/Form/Input.vue
index 63064b654..bd926d078 100644
--- a/app/javascript/v3/components/Form/Input.vue
+++ b/app/javascript/v3/components/Form/Input.vue
@@ -1,39 +1,3 @@
-<template>
-  <with-label
-    :label="label"
-    :icon="icon"
-    :name="name"
-    :has-error="hasError"
-    :error-message="errorMessage"
-  >
-    <template #rightOfLabel>
-      <slot />
-    </template>
-    <input
-      :id="name"
-      :name="name"
-      :type="type"
-      autocomplete="off"
-      :tabindex="tabindex"
-      :required="required"
-      :placeholder="placeholder"
-      :data-testid="dataTestid"
-      :value="value"
-      :class="{
-        'focus:outline-red-600 outline-red-600 dark:focus:outline-red-600 dark:outline-red-600':
-          hasError,
-        'outline-slate-200 dark:outline-slate-600 dark:focus:outline-woot-500 focus:outline-woot-500':
-          !hasError,
-        'px-3 py-3': spacing === 'base',
-        'px-3 py-2 mb-0': spacing === 'compact',
-        'pl-9': icon,
-      }"
-      class="block w-full border-none rounded-md shadow-sm appearance-none outline outline-1 focus:outline-2 text-slate-900 dark:text-slate-100 placeholder:text-slate-400 sm:text-sm sm:leading-6 dark:bg-slate-800"
-      @input="onInput"
-      @blur="$emit('blur')"
-    />
-  </with-label>
-</template>
 <script>
 import WithLabel from './WithLabel.vue';
 export default {
@@ -98,3 +62,39 @@ export default {
   },
 };
 </script>
+<template>
+  <with-label
+    :label="label"
+    :icon="icon"
+    :name="name"
+    :has-error="hasError"
+    :error-message="errorMessage"
+  >
+    <template #rightOfLabel>
+      <slot />
+    </template>
+    <input
+      :id="name"
+      :name="name"
+      :type="type"
+      autocomplete="off"
+      :tabindex="tabindex"
+      :required="required"
+      :placeholder="placeholder"
+      :data-testid="dataTestid"
+      :value="value"
+      :class="{
+        'focus:outline-red-600 outline-red-600 dark:focus:outline-red-600 dark:outline-red-600':
+          hasError,
+        'outline-slate-200 dark:outline-slate-600 dark:focus:outline-woot-500 focus:outline-woot-500':
+          !hasError,
+        'px-3 py-3': spacing === 'base',
+        'px-3 py-2 mb-0': spacing === 'compact',
+        'pl-9': icon,
+      }"
+      class="block w-full border-none rounded-md shadow-sm appearance-none outline outline-1 focus:outline-2 text-slate-900 dark:text-slate-100 placeholder:text-slate-400 sm:text-sm sm:leading-6 dark:bg-slate-800"
+      @input="onInput"
+      @blur="$emit('blur')"
+    />
+  </with-label>
+</template>
diff --git a/app/javascript/v3/components/Form/ProfileAvatar.vue b/app/javascript/v3/components/Form/ProfileAvatar.vue
index fb802d35d..64ee9d4f3 100644
--- a/app/javascript/v3/components/Form/ProfileAvatar.vue
+++ b/app/javascript/v3/components/Form/ProfileAvatar.vue
@@ -1,40 +1,3 @@
-<template>
-  <div class="relative rounded-xl h-[72px] w-[72px] cursor-pointe group">
-    <img
-      v-if="shouldShowImage"
-      class="rounded-xl h-[72px] w-[72px]"
-      :alt="name"
-      :src="src"
-      draggable="false"
-      @load="onImageLoad"
-      @error="onImageLoadError"
-    />
-    <initials-avatar v-else-if="!shouldShowImage" :name="name" :size="72" />
-
-    <input
-      ref="fileInputRef"
-      type="file"
-      accept="image/png, image/jpeg, image/jpg, image/gif, image/webp"
-      hidden
-      @change="onImageUpload"
-    />
-    <div class="hidden group-hover:block">
-      <button
-        v-if="src"
-        class="absolute z-10 flex items-center justify-center w-6 h-6 p-1 border border-white rounded-full select-none dark:border-ash-75 reset-base -top-2 -right-2 bg-ash-300"
-        @click="onAvatarDelete"
-      >
-        <fluent-icon icon="dismiss" size="16" class="text-ash-900" />
-      </button>
-      <button
-        class="reset-base absolute h-[72px] w-[72px] top-0 left-0 rounded-xl select-none flex items-center justify-center bg-modal-backdrop-dark dark:bg-modal-backdrop-dark"
-        @click="openFileInput"
-      >
-        <fluent-icon icon="avatar-upload" size="32" class="text-white" />
-      </button>
-    </div>
-  </div>
-</template>
 <script setup>
 import { computed, ref } from 'vue';
 import InitialsAvatar from './InitialsAvatar.vue';
@@ -82,3 +45,40 @@ const onAvatarDelete = () => {
   emits('delete');
 };
 </script>
+<template>
+  <div class="relative rounded-xl h-[72px] w-[72px] cursor-pointe group">
+    <img
+      v-if="shouldShowImage"
+      class="rounded-xl h-[72px] w-[72px]"
+      :alt="name"
+      :src="src"
+      draggable="false"
+      @load="onImageLoad"
+      @error="onImageLoadError"
+    />
+    <initials-avatar v-else-if="!shouldShowImage" :name="name" :size="72" />
+
+    <input
+      ref="fileInputRef"
+      type="file"
+      accept="image/png, image/jpeg, image/jpg, image/gif, image/webp"
+      hidden
+      @change="onImageUpload"
+    />
+    <div class="hidden group-hover:block">
+      <button
+        v-if="src"
+        class="absolute z-10 flex items-center justify-center w-6 h-6 p-1 border border-white rounded-full select-none dark:border-ash-75 reset-base -top-2 -right-2 bg-ash-300"
+        @click="onAvatarDelete"
+      >
+        <fluent-icon icon="dismiss" size="16" class="text-ash-900" />
+      </button>
+      <button
+        class="reset-base absolute h-[72px] w-[72px] top-0 left-0 rounded-xl select-none flex items-center justify-center bg-modal-backdrop-dark dark:bg-modal-backdrop-dark"
+        @click="openFileInput"
+      >
+        <fluent-icon icon="avatar-upload" size="32" class="text-white" />
+      </button>
+    </div>
+  </div>
+</template>
diff --git a/app/javascript/v3/components/Form/RadioTags.vue b/app/javascript/v3/components/Form/RadioTags.vue
index 7cb221132..9e0961381 100644
--- a/app/javascript/v3/components/Form/RadioTags.vue
+++ b/app/javascript/v3/components/Form/RadioTags.vue
@@ -1,25 +1,3 @@
-<template>
-  <with-label
-    :label="label"
-    :name="name"
-    :has-error="hasError"
-    :error-message="errorMessage"
-  >
-    <div class="flex gap-2 flex-wrap">
-      <woot-button
-        v-for="option in options"
-        :key="option.value"
-        :variant="value === option.value ? '' : 'hollow'"
-        :color-scheme="value === option.value ? 'primary' : 'secondary'"
-        size="small"
-        @click="$emit('input', option.value)"
-      >
-        {{ option.label }}
-      </woot-button>
-    </div>
-  </with-label>
-</template>
-
 <script>
 import WithLabel from './WithLabel.vue';
 export default {
@@ -58,3 +36,25 @@ export default {
   },
 };
 </script>
+
+<template>
+  <with-label
+    :label="label"
+    :name="name"
+    :has-error="hasError"
+    :error-message="errorMessage"
+  >
+    <div class="flex gap-2 flex-wrap">
+      <woot-button
+        v-for="option in options"
+        :key="option.value"
+        :variant="value === option.value ? '' : 'hollow'"
+        :color-scheme="value === option.value ? 'primary' : 'secondary'"
+        size="small"
+        @click="$emit('input', option.value)"
+      >
+        {{ option.label }}
+      </woot-button>
+    </div>
+  </with-label>
+</template>
diff --git a/app/javascript/v3/components/Form/Select.vue b/app/javascript/v3/components/Form/Select.vue
index 67a311b04..49c062118 100644
--- a/app/javascript/v3/components/Form/Select.vue
+++ b/app/javascript/v3/components/Form/Select.vue
@@ -1,35 +1,3 @@
-<template>
-  <with-label
-    :label="label"
-    :icon="icon"
-    :name="name"
-    :has-error="hasError"
-    :error-message="errorMessage"
-  >
-    <select
-      :id="id"
-      :selected="value"
-      :name="name"
-      :class="{
-        'text-ash-400': !value,
-        'text-ash-900': value,
-        'pl-9': icon,
-      }"
-      class="block w-full px-3 py-2 pr-6 mb-0 border-0 shadow-sm outline-none appearance-none rounded-xl select-caret ring-ash-200 ring-1 ring-inset placeholder:text-ash-900 focus:ring-2 focus:ring-inset focus:ring-primary-500 sm:text-sm sm:leading-6"
-      @input="onInput"
-    >
-      <option value="" disabled selected class="hidden">
-        {{ placeholder }}
-      </option>
-      <slot>
-        <option v-for="opt in options" :key="opt.value" :value="opt.value">
-          {{ opt.label }}
-        </option>
-      </slot>
-    </select>
-  </with-label>
-</template>
-
 <script>
 import WithLabel from './WithLabel.vue';
 export default {
@@ -81,6 +49,38 @@ export default {
   },
 };
 </script>
+
+<template>
+  <with-label
+    :label="label"
+    :icon="icon"
+    :name="name"
+    :has-error="hasError"
+    :error-message="errorMessage"
+  >
+    <select
+      :id="id"
+      :selected="value"
+      :name="name"
+      :class="{
+        'text-ash-400': !value,
+        'text-ash-900': value,
+        'pl-9': icon,
+      }"
+      class="block w-full px-3 py-2 pr-6 mb-0 border-0 shadow-sm outline-none appearance-none rounded-xl select-caret ring-ash-200 ring-1 ring-inset placeholder:text-ash-900 focus:ring-2 focus:ring-inset focus:ring-primary-500 sm:text-sm sm:leading-6"
+      @input="onInput"
+    >
+      <option value="" disabled selected class="hidden">
+        {{ placeholder }}
+      </option>
+      <slot>
+        <option v-for="opt in options" :key="opt.value" :value="opt.value">
+          {{ opt.label }}
+        </option>
+      </slot>
+    </select>
+  </with-label>
+</template>
 <style scoped>
 .select-caret {
   background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' version='1.1' width='32' height='24' viewBox='0 0 32 24'><polygon points='0,0 32,0 16,24' style='fill: rgb%28110, 111, 115%29'></polygon></svg>");
diff --git a/app/javascript/v3/components/Form/Switch.vue b/app/javascript/v3/components/Form/Switch.vue
index cb9751d62..62bcb6e2d 100644
--- a/app/javascript/v3/components/Form/Switch.vue
+++ b/app/javascript/v3/components/Form/Switch.vue
@@ -1,3 +1,16 @@
+<script>
+export default {
+  props: {
+    value: { type: Boolean, default: false },
+  },
+  methods: {
+    onClick() {
+      this.$emit('input', !this.value);
+    },
+  },
+};
+</script>
+
 <template>
   <button
     type="button"
@@ -20,16 +33,3 @@
     />
   </button>
 </template>
-
-<script>
-export default {
-  props: {
-    value: { type: Boolean, default: false },
-  },
-  methods: {
-    onClick() {
-      this.$emit('input', !this.value);
-    },
-  },
-};
-</script>
diff --git a/app/javascript/v3/components/Form/Textarea.vue b/app/javascript/v3/components/Form/Textarea.vue
index 736d4f72b..3412699a9 100644
--- a/app/javascript/v3/components/Form/Textarea.vue
+++ b/app/javascript/v3/components/Form/Textarea.vue
@@ -1,31 +1,3 @@
-<template>
-  <with-label
-    :label="label"
-    :name="name"
-    :has-error="hasError"
-    :error-message="errorMessage"
-  >
-    <textarea
-      :id="name"
-      :name="name"
-      autocomplete="off"
-      :required="required"
-      :placeholder="placeholder"
-      :data-testid="dataTestid"
-      :value="value"
-      :rows="rows"
-      :class="{
-        'focus:outline-red-600 outline-red-600': hasError,
-        'dark:outline-slate-600 dark:focus:outline-woot-500 outline-slate-200 focus:outline-woot-500':
-          !hasError,
-        'resize-none': !allowResize,
-      }"
-      class="block w-full p-3 bg-white border-none rounded-md shadow-sm appearance-none outline outline-1 focus:outline focus:outline-2 text-slate-900 dark:text-slate-100 placeholder:text-slate-400 dark:bg-slate-800"
-      @input="onInput"
-      @blur="$emit('blur')"
-    />
-  </with-label>
-</template>
 <script>
 import WithLabel from './WithLabel.vue';
 export default {
@@ -81,3 +53,31 @@ export default {
   },
 };
 </script>
+<template>
+  <with-label
+    :label="label"
+    :name="name"
+    :has-error="hasError"
+    :error-message="errorMessage"
+  >
+    <textarea
+      :id="name"
+      :name="name"
+      autocomplete="off"
+      :required="required"
+      :placeholder="placeholder"
+      :data-testid="dataTestid"
+      :value="value"
+      :rows="rows"
+      :class="{
+        'focus:outline-red-600 outline-red-600': hasError,
+        'dark:outline-slate-600 dark:focus:outline-woot-500 outline-slate-200 focus:outline-woot-500':
+          !hasError,
+        'resize-none': !allowResize,
+      }"
+      class="block w-full p-3 bg-white border-none rounded-md shadow-sm appearance-none outline outline-1 focus:outline focus:outline-2 text-slate-900 dark:text-slate-100 placeholder:text-slate-400 dark:bg-slate-800"
+      @input="onInput"
+      @blur="$emit('blur')"
+    />
+  </with-label>
+</template>
diff --git a/app/javascript/v3/components/Form/WithLabel.vue b/app/javascript/v3/components/Form/WithLabel.vue
index be7fefffd..43f61c8c0 100644
--- a/app/javascript/v3/components/Form/WithLabel.vue
+++ b/app/javascript/v3/components/Form/WithLabel.vue
@@ -1,3 +1,29 @@
+<script>
+export default {
+  props: {
+    label: {
+      type: String,
+      default: '',
+    },
+    name: {
+      type: String,
+      required: true,
+    },
+    icon: {
+      type: String,
+      default: '',
+    },
+    hasError: {
+      type: Boolean,
+      default: false,
+    },
+    errorMessage: {
+      type: String,
+      default: '',
+    },
+  },
+};
+</script>
 <template>
   <div class="space-y-1">
     <label
@@ -30,29 +56,3 @@
     </div>
   </div>
 </template>
-<script>
-export default {
-  props: {
-    label: {
-      type: String,
-      default: '',
-    },
-    name: {
-      type: String,
-      required: true,
-    },
-    icon: {
-      type: String,
-      default: '',
-    },
-    hasError: {
-      type: Boolean,
-      default: false,
-    },
-    errorMessage: {
-      type: String,
-      default: '',
-    },
-  },
-};
-</script>
diff --git a/app/javascript/v3/components/GoogleOauth/Button.vue b/app/javascript/v3/components/GoogleOauth/Button.vue
index 0d4d2a866..58be4fd07 100644
--- a/app/javascript/v3/components/GoogleOauth/Button.vue
+++ b/app/javascript/v3/components/GoogleOauth/Button.vue
@@ -1,23 +1,3 @@
-<template>
-  <div class="flex flex-col">
-    <a
-      :href="getGoogleAuthUrl()"
-      class="inline-flex w-full justify-center rounded-md bg-white py-3 px-4 shadow-sm ring-1 ring-inset ring-slate-200 dark:ring-slate-600 hover:bg-slate-50 focus:outline-offset-0 dark:bg-slate-700 dark:hover:bg-slate-700"
-    >
-      <img src="/assets/images/auth/google.svg" alt="Google Logo" class="h-6" />
-      <span class="text-base font-medium ml-2 text-slate-600 dark:text-white">
-        {{ $t('LOGIN.OAUTH.GOOGLE_LOGIN') }}
-      </span>
-    </a>
-    <simple-divider
-      v-if="showSeparator"
-      ref="divider"
-      :label="$t('COMMON.OR')"
-      class="uppercase"
-    />
-  </div>
-</template>
-
 <script>
 import SimpleDivider from '../Divider/SimpleDivider.vue';
 
@@ -58,3 +38,23 @@ export default {
   },
 };
 </script>
+
+<template>
+  <div class="flex flex-col">
+    <a
+      :href="getGoogleAuthUrl()"
+      class="inline-flex w-full justify-center rounded-md bg-white py-3 px-4 shadow-sm ring-1 ring-inset ring-slate-200 dark:ring-slate-600 hover:bg-slate-50 focus:outline-offset-0 dark:bg-slate-700 dark:hover:bg-slate-700"
+    >
+      <img src="/assets/images/auth/google.svg" alt="Google Logo" class="h-6" />
+      <span class="text-base font-medium ml-2 text-slate-600 dark:text-white">
+        {{ $t('LOGIN.OAUTH.GOOGLE_LOGIN') }}
+      </span>
+    </a>
+    <simple-divider
+      v-if="showSeparator"
+      ref="divider"
+      :label="$t('COMMON.OR')"
+      class="uppercase"
+    />
+  </div>
+</template>
diff --git a/app/javascript/v3/components/SnackBar/Container.vue b/app/javascript/v3/components/SnackBar/Container.vue
index a676cd899..f7ef64473 100644
--- a/app/javascript/v3/components/SnackBar/Container.vue
+++ b/app/javascript/v3/components/SnackBar/Container.vue
@@ -1,18 +1,3 @@
-<template>
-  <transition-group
-    name="toast-fade"
-    tag="div"
-    class="fixed left-0 right-0 mx-auto overflow-hidden text-center top-10 z-50 max-w-[40rem]"
-  >
-    <snackbar-item
-      v-for="snackbarAlertMessage in snackbarAlertMessages"
-      :key="snackbarAlertMessage.key"
-      :message="snackbarAlertMessage.message"
-      :action="snackbarAlertMessage.action"
-    />
-  </transition-group>
-</template>
-
 <script>
 import { BUS_EVENTS } from 'shared/constants/busEvents';
 import SnackbarItem from './Item.vue';
@@ -52,3 +37,18 @@ export default {
   },
 };
 </script>
+
+<template>
+  <transition-group
+    name="toast-fade"
+    tag="div"
+    class="fixed left-0 right-0 mx-auto overflow-hidden text-center top-10 z-50 max-w-[40rem]"
+  >
+    <snackbar-item
+      v-for="snackbarAlertMessage in snackbarAlertMessages"
+      :key="snackbarAlertMessage.key"
+      :message="snackbarAlertMessage.message"
+      :action="snackbarAlertMessage.action"
+    />
+  </transition-group>
+</template>
diff --git a/app/javascript/v3/components/SnackBar/Item.vue b/app/javascript/v3/components/SnackBar/Item.vue
index b87845ad6..f5f7b3c92 100644
--- a/app/javascript/v3/components/SnackBar/Item.vue
+++ b/app/javascript/v3/components/SnackBar/Item.vue
@@ -1,19 +1,3 @@
-<template>
-  <div
-    class="bg-slate-900 dark:bg-slate-800 rounded-md drop-shadow-md mb-4 max-w-[40rem] inline-flex items-center min-w-[22rem] py-3 px-4"
-    :class="isActionPresent ? 'justify-between' : 'justify-center'"
-  >
-    <div class="text-sm font-medium text-white">
-      {{ message }}
-    </div>
-    <div v-if="isActionPresent" class="ml-4">
-      <router-link v-if="action.type == 'link'" :to="action.to" class="">
-        {{ action.message }}
-      </router-link>
-    </div>
-  </div>
-</template>
-
 <script>
 export default {
   props: {
@@ -35,3 +19,19 @@ export default {
   },
 };
 </script>
+
+<template>
+  <div
+    class="bg-slate-900 dark:bg-slate-800 rounded-md drop-shadow-md mb-4 max-w-[40rem] inline-flex items-center min-w-[22rem] py-3 px-4"
+    :class="isActionPresent ? 'justify-between' : 'justify-center'"
+  >
+    <div class="text-sm font-medium text-white">
+      {{ message }}
+    </div>
+    <div v-if="isActionPresent" class="ml-4">
+      <router-link v-if="action.type == 'link'" :to="action.to" class="">
+        {{ action.message }}
+      </router-link>
+    </div>
+  </div>
+</template>
diff --git a/app/javascript/v3/views/auth/confirmation/Index.vue b/app/javascript/v3/views/auth/confirmation/Index.vue
index 51fa95f7c..8ebdebdfd 100644
--- a/app/javascript/v3/views/auth/confirmation/Index.vue
+++ b/app/javascript/v3/views/auth/confirmation/Index.vue
@@ -1,9 +1,3 @@
-<template>
-  <div class="flex items-center justify-center h-full w-full">
-    <spinner color-scheme="primary" size="" />
-    <div class="ml-2">{{ $t('CONFIRM_EMAIL') }}</div>
-  </div>
-</template>
 <script>
 import { DEFAULT_REDIRECT_URL } from 'dashboard/constants/globals';
 import { verifyPasswordToken } from '../../../api/auth';
@@ -34,3 +28,9 @@ export default {
   },
 };
 </script>
+<template>
+  <div class="flex items-center justify-center h-full w-full">
+    <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 7c9583b9b..0e779b676 100644
--- a/app/javascript/v3/views/auth/password/Edit.vue
+++ b/app/javascript/v3/views/auth/password/Edit.vue
@@ -1,52 +1,3 @@
-<template>
-  <div
-    class="flex flex-col justify-center w-full min-h-full py-12 bg-woot-25 sm:px-6 lg:px-8 dark:bg-slate-900"
-  >
-    <form
-      class="bg-white shadow sm:mx-auto sm:w-full sm:max-w-lg dark:bg-slate-800 p-11 sm:shadow-lg sm:rounded-lg"
-      @submit.prevent="submitForm"
-    >
-      <h1
-        class="mb-1 text-2xl font-medium tracking-tight text-left text-slate-900 dark:text-white"
-      >
-        {{ $t('SET_NEW_PASSWORD.TITLE') }}
-      </h1>
-
-      <div class="space-y-5">
-        <form-input
-          v-model.trim="credentials.password"
-          class="mt-3"
-          name="password"
-          type="password"
-          :has-error="v$.credentials.password.$error"
-          :error-message="$t('SET_NEW_PASSWORD.PASSWORD.ERROR')"
-          :placeholder="$t('SET_NEW_PASSWORD.PASSWORD.PLACEHOLDER')"
-          @blur="v$.credentials.password.$touch"
-        />
-        <form-input
-          v-model.trim="credentials.confirmPassword"
-          class="mt-3"
-          name="confirm_password"
-          type="password"
-          :has-error="v$.credentials.confirmPassword.$error"
-          :error-message="$t('SET_NEW_PASSWORD.CONFIRM_PASSWORD.ERROR')"
-          :placeholder="$t('SET_NEW_PASSWORD.CONFIRM_PASSWORD.PLACEHOLDER')"
-          @blur="v$.credentials.confirmPassword.$touch"
-        />
-        <submit-button
-          :disabled="
-            v$.credentials.password.$invalid ||
-            v$.credentials.confirmPassword.$invalid ||
-            newPasswordAPI.showLoading
-          "
-          :button-text="$t('SET_NEW_PASSWORD.SUBMIT')"
-          :loading="newPasswordAPI.showLoading"
-        />
-      </div>
-    </form>
-  </div>
-</template>
-
 <script>
 import { useVuelidate } from '@vuelidate/core';
 import { required, minLength } from '@vuelidate/validators';
@@ -135,3 +86,52 @@ export default {
   },
 };
 </script>
+
+<template>
+  <div
+    class="flex flex-col justify-center w-full min-h-full py-12 bg-woot-25 sm:px-6 lg:px-8 dark:bg-slate-900"
+  >
+    <form
+      class="bg-white shadow sm:mx-auto sm:w-full sm:max-w-lg dark:bg-slate-800 p-11 sm:shadow-lg sm:rounded-lg"
+      @submit.prevent="submitForm"
+    >
+      <h1
+        class="mb-1 text-2xl font-medium tracking-tight text-left text-slate-900 dark:text-white"
+      >
+        {{ $t('SET_NEW_PASSWORD.TITLE') }}
+      </h1>
+
+      <div class="space-y-5">
+        <form-input
+          v-model.trim="credentials.password"
+          class="mt-3"
+          name="password"
+          type="password"
+          :has-error="v$.credentials.password.$error"
+          :error-message="$t('SET_NEW_PASSWORD.PASSWORD.ERROR')"
+          :placeholder="$t('SET_NEW_PASSWORD.PASSWORD.PLACEHOLDER')"
+          @blur="v$.credentials.password.$touch"
+        />
+        <form-input
+          v-model.trim="credentials.confirmPassword"
+          class="mt-3"
+          name="confirm_password"
+          type="password"
+          :has-error="v$.credentials.confirmPassword.$error"
+          :error-message="$t('SET_NEW_PASSWORD.CONFIRM_PASSWORD.ERROR')"
+          :placeholder="$t('SET_NEW_PASSWORD.CONFIRM_PASSWORD.PLACEHOLDER')"
+          @blur="v$.credentials.confirmPassword.$touch"
+        />
+        <submit-button
+          :disabled="
+            v$.credentials.password.$invalid ||
+            v$.credentials.confirmPassword.$invalid ||
+            newPasswordAPI.showLoading
+          "
+          :button-text="$t('SET_NEW_PASSWORD.SUBMIT')"
+          :loading="newPasswordAPI.showLoading"
+        />
+      </div>
+    </form>
+  </div>
+</template>
diff --git a/app/javascript/v3/views/auth/reset/password/Index.vue b/app/javascript/v3/views/auth/reset/password/Index.vue
index f2ff279a0..50c00ca8c 100644
--- a/app/javascript/v3/views/auth/reset/password/Index.vue
+++ b/app/javascript/v3/views/auth/reset/password/Index.vue
@@ -1,51 +1,3 @@
-<template>
-  <div
-    class="flex flex-col justify-center w-full min-h-full py-12 bg-woot-25 sm:px-6 lg:px-8 dark:bg-slate-900"
-  >
-    <form
-      class="bg-white shadow sm:mx-auto sm:w-full sm:max-w-lg dark:bg-slate-800 p-11 sm:shadow-lg sm:rounded-lg"
-      @submit.prevent="submit"
-    >
-      <h1
-        class="mb-1 text-2xl font-medium tracking-tight text-left text-slate-900 dark:text-white"
-      >
-        {{ $t('RESET_PASSWORD.TITLE') }}
-      </h1>
-      <p
-        class="mb-4 text-sm font-normal leading-6 tracking-normal text-slate-600 dark:text-woot-50"
-      >
-        {{
-          useInstallationName(
-            $t('RESET_PASSWORD.DESCRIPTION'),
-            globalConfig.installationName
-          )
-        }}
-      </p>
-      <div class="space-y-5">
-        <form-input
-          v-model.trim="credentials.email"
-          name="email_address"
-          :has-error="v$.credentials.email.$error"
-          :error-message="$t('RESET_PASSWORD.EMAIL.ERROR')"
-          :placeholder="$t('RESET_PASSWORD.EMAIL.PLACEHOLDER')"
-          @input="v$.credentials.email.$touch"
-        />
-        <SubmitButton
-          :disabled="v$.credentials.email.$invalid || resetPassword.showLoading"
-          :button-text="$t('RESET_PASSWORD.SUBMIT')"
-          :loading="resetPassword.showLoading"
-        />
-      </div>
-      <p class="mt-4 -mb-1 text-sm text-slate-600 dark:text-woot-50">
-        {{ $t('RESET_PASSWORD.GO_BACK_TO_LOGIN') }}
-        <router-link to="/auth/login" class="text-link">
-          {{ $t('COMMON.CLICK_HERE') }}.
-        </router-link>
-      </p>
-    </form>
-  </div>
-</template>
-
 <script>
 import { useVuelidate } from '@vuelidate/core';
 import { mapGetters } from 'vuex';
@@ -111,3 +63,51 @@ export default {
   },
 };
 </script>
+
+<template>
+  <div
+    class="flex flex-col justify-center w-full min-h-full py-12 bg-woot-25 sm:px-6 lg:px-8 dark:bg-slate-900"
+  >
+    <form
+      class="bg-white shadow sm:mx-auto sm:w-full sm:max-w-lg dark:bg-slate-800 p-11 sm:shadow-lg sm:rounded-lg"
+      @submit.prevent="submit"
+    >
+      <h1
+        class="mb-1 text-2xl font-medium tracking-tight text-left text-slate-900 dark:text-white"
+      >
+        {{ $t('RESET_PASSWORD.TITLE') }}
+      </h1>
+      <p
+        class="mb-4 text-sm font-normal leading-6 tracking-normal text-slate-600 dark:text-woot-50"
+      >
+        {{
+          useInstallationName(
+            $t('RESET_PASSWORD.DESCRIPTION'),
+            globalConfig.installationName
+          )
+        }}
+      </p>
+      <div class="space-y-5">
+        <form-input
+          v-model.trim="credentials.email"
+          name="email_address"
+          :has-error="v$.credentials.email.$error"
+          :error-message="$t('RESET_PASSWORD.EMAIL.ERROR')"
+          :placeholder="$t('RESET_PASSWORD.EMAIL.PLACEHOLDER')"
+          @input="v$.credentials.email.$touch"
+        />
+        <SubmitButton
+          :disabled="v$.credentials.email.$invalid || resetPassword.showLoading"
+          :button-text="$t('RESET_PASSWORD.SUBMIT')"
+          :loading="resetPassword.showLoading"
+        />
+      </div>
+      <p class="mt-4 -mb-1 text-sm text-slate-600 dark:text-woot-50">
+        {{ $t('RESET_PASSWORD.GO_BACK_TO_LOGIN') }}
+        <router-link to="/auth/login" class="text-link">
+          {{ $t('COMMON.CLICK_HERE') }}.
+        </router-link>
+      </p>
+    </form>
+  </div>
+</template>
diff --git a/app/javascript/v3/views/auth/signup/Index.vue b/app/javascript/v3/views/auth/signup/Index.vue
index e1621db18..2253de5f9 100644
--- a/app/javascript/v3/views/auth/signup/Index.vue
+++ b/app/javascript/v3/views/auth/signup/Index.vue
@@ -1,3 +1,37 @@
+<script>
+import { mapGetters } from 'vuex';
+import globalConfigMixin from 'shared/mixins/globalConfigMixin';
+import SignupForm from './components/Signup/Form.vue';
+import Testimonials from './components/Testimonials/Index.vue';
+import Spinner from 'shared/components/Spinner.vue';
+
+export default {
+  components: {
+    SignupForm,
+    Spinner,
+    Testimonials,
+  },
+  mixins: [globalConfigMixin],
+  data() {
+    return { isLoading: false };
+  },
+  computed: {
+    ...mapGetters({ globalConfig: 'globalConfig/get' }),
+    isAChatwootInstance() {
+      return this.globalConfig.installationName === 'Chatwoot';
+    },
+  },
+  beforeMount() {
+    this.isLoading = this.isAChatwootInstance;
+  },
+  methods: {
+    resizeContainers() {
+      this.isLoading = false;
+    },
+  },
+};
+</script>
+
 <template>
   <div class="h-full w-full dark:bg-slate-900">
     <div v-show="!isLoading" class="flex h-full">
@@ -51,37 +85,3 @@
     </div>
   </div>
 </template>
-
-<script>
-import { mapGetters } from 'vuex';
-import globalConfigMixin from 'shared/mixins/globalConfigMixin';
-import SignupForm from './components/Signup/Form.vue';
-import Testimonials from './components/Testimonials/Index.vue';
-import Spinner from 'shared/components/Spinner.vue';
-
-export default {
-  components: {
-    SignupForm,
-    Spinner,
-    Testimonials,
-  },
-  mixins: [globalConfigMixin],
-  data() {
-    return { isLoading: false };
-  },
-  computed: {
-    ...mapGetters({ globalConfig: 'globalConfig/get' }),
-    isAChatwootInstance() {
-      return this.globalConfig.installationName === 'Chatwoot';
-    },
-  },
-  beforeMount() {
-    this.isLoading = this.isAChatwootInstance;
-  },
-  methods: {
-    resizeContainers() {
-      this.isLoading = false;
-    },
-  },
-};
-</script>
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 3ddf24377..bb957eeb5 100644
--- a/app/javascript/v3/views/auth/signup/components/Signup/Form.vue
+++ b/app/javascript/v3/views/auth/signup/components/Signup/Form.vue
@@ -1,83 +1,3 @@
-<template>
-  <div class="flex-1 px-1 overflow-auto">
-    <form class="space-y-3" @submit.prevent="submit">
-      <div class="flex">
-        <form-input
-          v-model.trim="credentials.fullName"
-          name="full_name"
-          class="flex-1"
-          :class="{ error: v$.credentials.fullName.$error }"
-          :label="$t('REGISTER.FULL_NAME.LABEL')"
-          :placeholder="$t('REGISTER.FULL_NAME.PLACEHOLDER')"
-          :has-error="v$.credentials.fullName.$error"
-          :error-message="$t('REGISTER.FULL_NAME.ERROR')"
-          @blur="v$.credentials.fullName.$touch"
-        />
-        <form-input
-          v-model.trim="credentials.accountName"
-          name="account_name"
-          class="flex-1 ml-2"
-          :class="{ error: v$.credentials.accountName.$error }"
-          :label="$t('REGISTER.COMPANY_NAME.LABEL')"
-          :placeholder="$t('REGISTER.COMPANY_NAME.PLACEHOLDER')"
-          :has-error="v$.credentials.accountName.$error"
-          :error-message="$t('REGISTER.COMPANY_NAME.ERROR')"
-          @blur="v$.credentials.accountName.$touch"
-        />
-      </div>
-      <form-input
-        v-model.trim="credentials.email"
-        type="email"
-        name="email_address"
-        :class="{ error: v$.credentials.email.$error }"
-        :label="$t('REGISTER.EMAIL.LABEL')"
-        :placeholder="$t('REGISTER.EMAIL.PLACEHOLDER')"
-        :has-error="v$.credentials.email.$error"
-        :error-message="$t('REGISTER.EMAIL.ERROR')"
-        @blur="v$.credentials.email.$touch"
-      />
-      <form-input
-        v-model.trim="credentials.password"
-        type="password"
-        name="password"
-        :class="{ error: v$.credentials.password.$error }"
-        :label="$t('LOGIN.PASSWORD.LABEL')"
-        :placeholder="$t('SET_NEW_PASSWORD.PASSWORD.PLACEHOLDER')"
-        :has-error="v$.credentials.password.$error"
-        :error-message="passwordErrorText"
-        @blur="v$.credentials.password.$touch"
-      />
-      <div v-if="globalConfig.hCaptchaSiteKey" class="mb-3">
-        <vue-hcaptcha
-          ref="hCaptcha"
-          :class="{ error: !hasAValidCaptcha && didCaptchaReset }"
-          :sitekey="globalConfig.hCaptchaSiteKey"
-          @verify="onRecaptchaVerified"
-        />
-        <span
-          v-if="!hasAValidCaptcha && didCaptchaReset"
-          class="text-xs text-red-400"
-        >
-          {{ $t('SET_NEW_PASSWORD.CAPTCHA.ERROR') }}
-        </span>
-      </div>
-      <submit-button
-        :button-text="$t('REGISTER.SUBMIT')"
-        :disabled="isSignupInProgress || !hasAValidCaptcha"
-        :loading="isSignupInProgress"
-        icon-class="arrow-chevron-right"
-      />
-    </form>
-    <GoogleOAuthButton v-if="showGoogleOAuth" class="flex-col-reverse">
-      {{ $t('REGISTER.OAUTH.GOOGLE_SIGNUP') }}
-    </GoogleOAuthButton>
-    <p
-      class="text-sm mb-1 mt-5 text-slate-800 dark:text-woot-50 [&>a]:text-woot-500 [&>a]:font-medium [&>a]:hover:text-woot-600"
-      v-html="termsLink"
-    />
-  </div>
-</template>
-
 <script>
 import { useVuelidate } from '@vuelidate/core';
 import { required, minLength, email } from '@vuelidate/validators';
@@ -210,6 +130,86 @@ export default {
   },
 };
 </script>
+
+<template>
+  <div class="flex-1 px-1 overflow-auto">
+    <form class="space-y-3" @submit.prevent="submit">
+      <div class="flex">
+        <form-input
+          v-model.trim="credentials.fullName"
+          name="full_name"
+          class="flex-1"
+          :class="{ error: v$.credentials.fullName.$error }"
+          :label="$t('REGISTER.FULL_NAME.LABEL')"
+          :placeholder="$t('REGISTER.FULL_NAME.PLACEHOLDER')"
+          :has-error="v$.credentials.fullName.$error"
+          :error-message="$t('REGISTER.FULL_NAME.ERROR')"
+          @blur="v$.credentials.fullName.$touch"
+        />
+        <form-input
+          v-model.trim="credentials.accountName"
+          name="account_name"
+          class="flex-1 ml-2"
+          :class="{ error: v$.credentials.accountName.$error }"
+          :label="$t('REGISTER.COMPANY_NAME.LABEL')"
+          :placeholder="$t('REGISTER.COMPANY_NAME.PLACEHOLDER')"
+          :has-error="v$.credentials.accountName.$error"
+          :error-message="$t('REGISTER.COMPANY_NAME.ERROR')"
+          @blur="v$.credentials.accountName.$touch"
+        />
+      </div>
+      <form-input
+        v-model.trim="credentials.email"
+        type="email"
+        name="email_address"
+        :class="{ error: v$.credentials.email.$error }"
+        :label="$t('REGISTER.EMAIL.LABEL')"
+        :placeholder="$t('REGISTER.EMAIL.PLACEHOLDER')"
+        :has-error="v$.credentials.email.$error"
+        :error-message="$t('REGISTER.EMAIL.ERROR')"
+        @blur="v$.credentials.email.$touch"
+      />
+      <form-input
+        v-model.trim="credentials.password"
+        type="password"
+        name="password"
+        :class="{ error: v$.credentials.password.$error }"
+        :label="$t('LOGIN.PASSWORD.LABEL')"
+        :placeholder="$t('SET_NEW_PASSWORD.PASSWORD.PLACEHOLDER')"
+        :has-error="v$.credentials.password.$error"
+        :error-message="passwordErrorText"
+        @blur="v$.credentials.password.$touch"
+      />
+      <div v-if="globalConfig.hCaptchaSiteKey" class="mb-3">
+        <vue-hcaptcha
+          ref="hCaptcha"
+          :class="{ error: !hasAValidCaptcha && didCaptchaReset }"
+          :sitekey="globalConfig.hCaptchaSiteKey"
+          @verify="onRecaptchaVerified"
+        />
+        <span
+          v-if="!hasAValidCaptcha && didCaptchaReset"
+          class="text-xs text-red-400"
+        >
+          {{ $t('SET_NEW_PASSWORD.CAPTCHA.ERROR') }}
+        </span>
+      </div>
+      <submit-button
+        :button-text="$t('REGISTER.SUBMIT')"
+        :disabled="isSignupInProgress || !hasAValidCaptcha"
+        :loading="isSignupInProgress"
+        icon-class="arrow-chevron-right"
+      />
+    </form>
+    <GoogleOAuthButton v-if="showGoogleOAuth" class="flex-col-reverse">
+      {{ $t('REGISTER.OAUTH.GOOGLE_SIGNUP') }}
+    </GoogleOAuthButton>
+    <p
+      class="text-sm mb-1 mt-5 text-slate-800 dark:text-woot-50 [&>a]:text-woot-500 [&>a]:font-medium [&>a]:hover:text-woot-600"
+      v-html="termsLink"
+    />
+  </div>
+</template>
 <style scoped lang="scss">
 .h-captcha--box {
   &::v-deep .error {
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 be15a8575..3ac923d02 100644
--- a/app/javascript/v3/views/auth/signup/components/Testimonials/Index.vue
+++ b/app/javascript/v3/views/auth/signup/components/Testimonials/Index.vue
@@ -1,3 +1,29 @@
+<script>
+import TestimonialCard from './TestimonialCard.vue';
+import { getTestimonialContent } from '../../../../../api/testimonials';
+export default {
+  components: { TestimonialCard },
+  data() {
+    return { testimonials: [] };
+  },
+  beforeMount() {
+    this.fetchTestimonials();
+  },
+  methods: {
+    async fetchTestimonials() {
+      try {
+        const { data } = await getTestimonialContent();
+        this.testimonials = data;
+      } catch (error) {
+        // Ignoring the error as the UI wouldn't break
+      } finally {
+        this.$emit('resize-containers', !!this.testimonials.length);
+      }
+    },
+  },
+};
+</script>
+
 <template>
   <div
     v-if="testimonials.length"
@@ -31,32 +57,6 @@
   </div>
 </template>
 
-<script>
-import TestimonialCard from './TestimonialCard.vue';
-import { getTestimonialContent } from '../../../../../api/testimonials';
-export default {
-  components: { TestimonialCard },
-  data() {
-    return { testimonials: [] };
-  },
-  beforeMount() {
-    this.fetchTestimonials();
-  },
-  methods: {
-    async fetchTestimonials() {
-      try {
-        const { data } = await getTestimonialContent();
-        this.testimonials = data;
-      } catch (error) {
-        // Ignoring the error as the UI wouldn't break
-      } finally {
-        this.$emit('resize-containers', !!this.testimonials.length);
-      }
-    },
-  },
-};
-</script>
-
 <style lang="scss" scoped>
 .center--img {
 }
diff --git a/app/javascript/v3/views/auth/signup/components/Testimonials/TestimonialCard.vue b/app/javascript/v3/views/auth/signup/components/Testimonials/TestimonialCard.vue
index af8341379..c9cf1a920 100644
--- a/app/javascript/v3/views/auth/signup/components/Testimonials/TestimonialCard.vue
+++ b/app/javascript/v3/views/auth/signup/components/Testimonials/TestimonialCard.vue
@@ -1,21 +1,3 @@
-<template>
-  <div
-    class="flex flex-col items-start justify-center p-6 w-80 bg-white rounded-lg drop-shadow-md dark:bg-slate-800"
-  >
-    <p class="text-sm text-slate-600 dark:text-woot-50 tracking-normal">
-      {{ reviewContent }}
-    </p>
-    <div class="flex items-center mt-4 text-slate-700 dark:text-woot-50">
-      <div class="bg-white rounded-full p-1">
-        <img :src="authorImage" class="h-8 w-8 rounded-full" />
-      </div>
-      <div class="ml-2">
-        <div class="text-sm font-medium">{{ authorName }}</div>
-        <div class="text-xs">{{ authorDesignation }}</div>
-      </div>
-    </div>
-  </div>
-</template>
 <script>
 export default {
   props: {
@@ -38,3 +20,21 @@ export default {
   },
 };
 </script>
+<template>
+  <div
+    class="flex flex-col items-start justify-center p-6 w-80 bg-white rounded-lg drop-shadow-md dark:bg-slate-800"
+  >
+    <p class="text-sm text-slate-600 dark:text-woot-50 tracking-normal">
+      {{ reviewContent }}
+    </p>
+    <div class="flex items-center mt-4 text-slate-700 dark:text-woot-50">
+      <div class="bg-white rounded-full p-1">
+        <img :src="authorImage" class="h-8 w-8 rounded-full" />
+      </div>
+      <div class="ml-2">
+        <div class="text-sm font-medium">{{ authorName }}</div>
+        <div class="text-xs">{{ authorDesignation }}</div>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/app/javascript/v3/views/login/Index.vue b/app/javascript/v3/views/login/Index.vue
index f32afcd57..809fd6d85 100644
--- a/app/javascript/v3/views/login/Index.vue
+++ b/app/javascript/v3/views/login/Index.vue
@@ -1,95 +1,3 @@
-<template>
-  <main
-    class="flex flex-col w-full min-h-screen py-20 bg-woot-25 sm:px-6 lg:px-8 dark:bg-slate-900"
-  >
-    <section class="max-w-5xl mx-auto">
-      <img
-        :src="globalConfig.logo"
-        :alt="globalConfig.installationName"
-        class="block w-auto h-8 mx-auto dark:hidden"
-      />
-      <img
-        v-if="globalConfig.logoDark"
-        :src="globalConfig.logoDark"
-        :alt="globalConfig.installationName"
-        class="hidden w-auto h-8 mx-auto dark:block"
-      />
-      <h2
-        class="mt-6 text-3xl font-medium text-center text-slate-900 dark:text-woot-50"
-      >
-        {{
-          useInstallationName($t('LOGIN.TITLE'), globalConfig.installationName)
-        }}
-      </h2>
-      <p
-        v-if="showSignupLink"
-        class="mt-3 text-sm text-center text-slate-600 dark:text-slate-400"
-      >
-        {{ $t('COMMON.OR') }}
-        <router-link to="auth/signup" class="lowercase text-link">
-          {{ $t('LOGIN.CREATE_NEW_ACCOUNT') }}
-        </router-link>
-      </p>
-    </section>
-    <section
-      class="bg-white shadow sm:mx-auto mt-11 sm:w-full sm:max-w-lg dark:bg-slate-800 p-11 sm:shadow-lg sm:rounded-lg"
-      :class="{
-        'mb-8 mt-15': !showGoogleOAuth,
-        'animate-wiggle': loginApi.hasErrored,
-      }"
-    >
-      <div v-if="!email">
-        <GoogleOAuthButton v-if="showGoogleOAuth" />
-        <form class="space-y-5" @submit.prevent="submitLogin">
-          <form-input
-            v-model.trim="credentials.email"
-            name="email_address"
-            type="text"
-            data-testid="email_input"
-            :tabindex="1"
-            required
-            :label="$t('LOGIN.EMAIL.LABEL')"
-            :placeholder="$t('LOGIN.EMAIL.PLACEHOLDER')"
-            :has-error="v$.credentials.email.$error"
-            @input="v$.credentials.email.$touch"
-          />
-          <form-input
-            v-model.trim="credentials.password"
-            type="password"
-            name="password"
-            data-testid="password_input"
-            required
-            :tabindex="2"
-            :label="$t('LOGIN.PASSWORD.LABEL')"
-            :placeholder="$t('LOGIN.PASSWORD.PLACEHOLDER')"
-            :has-error="v$.credentials.password.$error"
-            @input="v$.credentials.password.$touch"
-          >
-            <p v-if="!globalConfig.disableUserProfileUpdate">
-              <router-link
-                to="auth/reset/password"
-                class="text-sm text-link"
-                tabindex="4"
-              >
-                {{ $t('LOGIN.FORGOT_PASSWORD') }}
-              </router-link>
-            </p>
-          </form-input>
-          <submit-button
-            :disabled="loginApi.showLoading"
-            :tabindex="3"
-            :button-text="$t('LOGIN.SUBMIT')"
-            :loading="loginApi.showLoading"
-          />
-        </form>
-      </div>
-      <div v-else class="flex items-center justify-center">
-        <spinner color-scheme="primary" size="" />
-      </div>
-    </section>
-  </main>
-</template>
-
 <script>
 import { useVuelidate } from '@vuelidate/core';
 import { required, email } from '@vuelidate/validators';
@@ -234,3 +142,95 @@ export default {
   },
 };
 </script>
+
+<template>
+  <main
+    class="flex flex-col w-full min-h-screen py-20 bg-woot-25 sm:px-6 lg:px-8 dark:bg-slate-900"
+  >
+    <section class="max-w-5xl mx-auto">
+      <img
+        :src="globalConfig.logo"
+        :alt="globalConfig.installationName"
+        class="block w-auto h-8 mx-auto dark:hidden"
+      />
+      <img
+        v-if="globalConfig.logoDark"
+        :src="globalConfig.logoDark"
+        :alt="globalConfig.installationName"
+        class="hidden w-auto h-8 mx-auto dark:block"
+      />
+      <h2
+        class="mt-6 text-3xl font-medium text-center text-slate-900 dark:text-woot-50"
+      >
+        {{
+          useInstallationName($t('LOGIN.TITLE'), globalConfig.installationName)
+        }}
+      </h2>
+      <p
+        v-if="showSignupLink"
+        class="mt-3 text-sm text-center text-slate-600 dark:text-slate-400"
+      >
+        {{ $t('COMMON.OR') }}
+        <router-link to="auth/signup" class="lowercase text-link">
+          {{ $t('LOGIN.CREATE_NEW_ACCOUNT') }}
+        </router-link>
+      </p>
+    </section>
+    <section
+      class="bg-white shadow sm:mx-auto mt-11 sm:w-full sm:max-w-lg dark:bg-slate-800 p-11 sm:shadow-lg sm:rounded-lg"
+      :class="{
+        'mb-8 mt-15': !showGoogleOAuth,
+        'animate-wiggle': loginApi.hasErrored,
+      }"
+    >
+      <div v-if="!email">
+        <GoogleOAuthButton v-if="showGoogleOAuth" />
+        <form class="space-y-5" @submit.prevent="submitLogin">
+          <form-input
+            v-model.trim="credentials.email"
+            name="email_address"
+            type="text"
+            data-testid="email_input"
+            :tabindex="1"
+            required
+            :label="$t('LOGIN.EMAIL.LABEL')"
+            :placeholder="$t('LOGIN.EMAIL.PLACEHOLDER')"
+            :has-error="v$.credentials.email.$error"
+            @input="v$.credentials.email.$touch"
+          />
+          <form-input
+            v-model.trim="credentials.password"
+            type="password"
+            name="password"
+            data-testid="password_input"
+            required
+            :tabindex="2"
+            :label="$t('LOGIN.PASSWORD.LABEL')"
+            :placeholder="$t('LOGIN.PASSWORD.PLACEHOLDER')"
+            :has-error="v$.credentials.password.$error"
+            @input="v$.credentials.password.$touch"
+          >
+            <p v-if="!globalConfig.disableUserProfileUpdate">
+              <router-link
+                to="auth/reset/password"
+                class="text-sm text-link"
+                tabindex="4"
+              >
+                {{ $t('LOGIN.FORGOT_PASSWORD') }}
+              </router-link>
+            </p>
+          </form-input>
+          <submit-button
+            :disabled="loginApi.showLoading"
+            :tabindex="3"
+            :button-text="$t('LOGIN.SUBMIT')"
+            :loading="loginApi.showLoading"
+          />
+        </form>
+      </div>
+      <div v-else class="flex items-center justify-center">
+        <spinner color-scheme="primary" size="" />
+      </div>
+    </section>
+  </main>
+</template>
diff --git a/app/javascript/v3/views/onboarding/OnboardingStep.vue b/app/javascript/v3/views/onboarding/OnboardingStep.vue
index 2ef6da67d..b75e054f6 100644
--- a/app/javascript/v3/views/onboarding/OnboardingStep.vue
+++ b/app/javascript/v3/views/onboarding/OnboardingStep.vue
@@ -1,3 +1,27 @@
+<script>
+export default {
+  name: 'OnboardingStep',
+  props: {
+    title: {
+      type: String,
+      required: true,
+    },
+    icon: {
+      type: String,
+      required: true,
+    },
+    isActive: {
+      type: Boolean,
+      default: false,
+    },
+    isComplete: {
+      type: Boolean,
+      default: false,
+    },
+  },
+};
+</script>
+
 <template>
   <div
     class="flex items-center gap-2 p-2 text-lg font-bold mb-6 relative before:absolute before:h-10 before:w-[1px] before:bg-slate-200 before:-bottom-8 before:left-[24px] hide-before-of-last"
@@ -23,30 +47,6 @@
     </span>
   </div>
 </template>
-
-<script>
-export default {
-  name: 'OnboardingStep',
-  props: {
-    title: {
-      type: String,
-      required: true,
-    },
-    icon: {
-      type: String,
-      required: true,
-    },
-    isActive: {
-      type: Boolean,
-      default: false,
-    },
-    isComplete: {
-      type: Boolean,
-      default: false,
-    },
-  },
-};
-</script>
 <style scoped>
 .hide-before-of-last:last-child::before {
   display: none;
diff --git a/app/javascript/widget/App.vue b/app/javascript/widget/App.vue
index 072323d53..25650b875 100755
--- a/app/javascript/widget/App.vue
+++ b/app/javascript/widget/App.vue
@@ -1,26 +1,3 @@
-<template>
-  <div
-    v-if="!conversationSize && isFetchingList"
-    class="flex flex-1 items-center h-full bg-black-25 justify-center"
-    :class="{ dark: prefersDarkMode }"
-  >
-    <spinner size="" />
-  </div>
-  <div
-    v-else
-    class="flex flex-col justify-end h-full"
-    :class="{
-      'is-mobile': isMobile,
-      'is-widget-right': isRightAligned,
-      'is-bubble-hidden': hideMessageBubble,
-      'is-flat-design': isWidgetStyleFlat,
-      dark: prefersDarkMode,
-    }"
-  >
-    <router-view />
-  </div>
-</template>
-
 <script>
 import { mapGetters, mapActions } from 'vuex';
 import { setHeader } from 'widget/helpers/axios';
@@ -354,6 +331,29 @@ export default {
 };
 </script>
 
+<template>
+  <div
+    v-if="!conversationSize && isFetchingList"
+    class="flex flex-1 items-center h-full bg-black-25 justify-center"
+    :class="{ dark: prefersDarkMode }"
+  >
+    <spinner size="" />
+  </div>
+  <div
+    v-else
+    class="flex flex-col justify-end h-full"
+    :class="{
+      'is-mobile': isMobile,
+      'is-widget-right': isRightAligned,
+      'is-bubble-hidden': hideMessageBubble,
+      'is-flat-design': isWidgetStyleFlat,
+      dark: prefersDarkMode,
+    }"
+  >
+    <router-view />
+  </div>
+</template>
+
 <style lang="scss">
 @import '~widget/assets/scss/woot.scss';
 </style>
diff --git a/app/javascript/widget/components/AgentMessage.vue b/app/javascript/widget/components/AgentMessage.vue
index 2bf94b094..15b0f82ee 100755
--- a/app/javascript/widget/components/AgentMessage.vue
+++ b/app/javascript/widget/components/AgentMessage.vue
@@ -1,91 +1,3 @@
-<template>
-  <div
-    class="agent-message-wrap group"
-    :class="{
-      'has-response': hasRecordedResponse || isASubmittedForm,
-    }"
-  >
-    <div v-if="!isASubmittedForm" class="agent-message">
-      <div class="avatar-wrap">
-        <thumbnail
-          v-if="message.showAvatar || hasRecordedResponse"
-          :src="avatarUrl"
-          size="24px"
-          :username="agentName"
-        />
-      </div>
-      <div class="message-wrap">
-        <div v-if="hasReplyTo" class="flex mt-2 mb-1 text-xs">
-          <reply-to-chip :reply-to="replyTo" />
-        </div>
-        <div class="flex gap-1">
-          <div class="space-y-2">
-            <AgentMessageBubble
-              v-if="shouldDisplayAgentMessage"
-              :content-type="contentType"
-              :message-content-attributes="messageContentAttributes"
-              :message-id="message.id"
-              :message-type="messageType"
-              :message="message.content"
-            />
-            <div
-              v-if="hasAttachments"
-              class="space-y-2 chat-bubble has-attachment agent"
-              :class="(wrapClass, $dm('bg-white', 'dark:bg-slate-700'))"
-            >
-              <div
-                v-for="attachment in message.attachments"
-                :key="attachment.id"
-              >
-                <image-bubble
-                  v-if="attachment.file_type === 'image' && !hasImageError"
-                  :url="attachment.data_url"
-                  :thumb="attachment.data_url"
-                  :readable-time="readableTime"
-                  @error="onImageLoadError"
-                />
-
-                <video-bubble
-                  v-if="attachment.file_type === 'video' && !hasVideoError"
-                  :url="attachment.data_url"
-                  :readable-time="readableTime"
-                  @error="onVideoLoadError"
-                />
-
-                <audio v-else-if="attachment.file_type === 'audio'" controls>
-                  <source :src="attachment.data_url" />
-                </audio>
-                <file-bubble v-else :url="attachment.data_url" />
-              </div>
-            </div>
-          </div>
-          <div class="flex flex-col justify-end">
-            <message-reply-button
-              class="transition-opacity delay-75 opacity-0 group-hover:opacity-100 sm:opacity-0"
-              @click="toggleReply"
-            />
-          </div>
-        </div>
-        <p
-          v-if="message.showAvatar || hasRecordedResponse"
-          v-dompurify-html="agentName"
-          class="agent-name"
-          :class="$dm('text-slate-700', 'dark:text-slate-200')"
-        />
-      </div>
-    </div>
-
-    <UserMessage v-if="hasRecordedResponse" :message="responseMessage" />
-    <div v-if="isASubmittedForm">
-      <UserMessage
-        v-for="submittedValue in submittedFormValues"
-        :key="submittedValue.id"
-        :message="submittedValue"
-      />
-    </div>
-  </div>
-</template>
-
 <script>
 import UserMessage from 'widget/components/UserMessage.vue';
 import AgentMessageBubble from 'widget/components/AgentMessageBubble.vue';
@@ -246,3 +158,91 @@ export default {
   },
 };
 </script>
+
+<template>
+  <div
+    class="agent-message-wrap group"
+    :class="{
+      'has-response': hasRecordedResponse || isASubmittedForm,
+    }"
+  >
+    <div v-if="!isASubmittedForm" class="agent-message">
+      <div class="avatar-wrap">
+        <thumbnail
+          v-if="message.showAvatar || hasRecordedResponse"
+          :src="avatarUrl"
+          size="24px"
+          :username="agentName"
+        />
+      </div>
+      <div class="message-wrap">
+        <div v-if="hasReplyTo" class="flex mt-2 mb-1 text-xs">
+          <reply-to-chip :reply-to="replyTo" />
+        </div>
+        <div class="flex gap-1">
+          <div class="space-y-2">
+            <AgentMessageBubble
+              v-if="shouldDisplayAgentMessage"
+              :content-type="contentType"
+              :message-content-attributes="messageContentAttributes"
+              :message-id="message.id"
+              :message-type="messageType"
+              :message="message.content"
+            />
+            <div
+              v-if="hasAttachments"
+              class="space-y-2 chat-bubble has-attachment agent"
+              :class="(wrapClass, $dm('bg-white', 'dark:bg-slate-700'))"
+            >
+              <div
+                v-for="attachment in message.attachments"
+                :key="attachment.id"
+              >
+                <image-bubble
+                  v-if="attachment.file_type === 'image' && !hasImageError"
+                  :url="attachment.data_url"
+                  :thumb="attachment.data_url"
+                  :readable-time="readableTime"
+                  @error="onImageLoadError"
+                />
+
+                <video-bubble
+                  v-if="attachment.file_type === 'video' && !hasVideoError"
+                  :url="attachment.data_url"
+                  :readable-time="readableTime"
+                  @error="onVideoLoadError"
+                />
+
+                <audio v-else-if="attachment.file_type === 'audio'" controls>
+                  <source :src="attachment.data_url" />
+                </audio>
+                <file-bubble v-else :url="attachment.data_url" />
+              </div>
+            </div>
+          </div>
+          <div class="flex flex-col justify-end">
+            <message-reply-button
+              class="transition-opacity delay-75 opacity-0 group-hover:opacity-100 sm:opacity-0"
+              @click="toggleReply"
+            />
+          </div>
+        </div>
+        <p
+          v-if="message.showAvatar || hasRecordedResponse"
+          v-dompurify-html="agentName"
+          class="agent-name"
+          :class="$dm('text-slate-700', 'dark:text-slate-200')"
+        />
+      </div>
+    </div>
+
+    <UserMessage v-if="hasRecordedResponse" :message="responseMessage" />
+    <div v-if="isASubmittedForm">
+      <UserMessage
+        v-for="submittedValue in submittedFormValues"
+        :key="submittedValue.id"
+        :message="submittedValue"
+      />
+    </div>
+  </div>
+</template>
diff --git a/app/javascript/widget/components/AgentMessageBubble.vue b/app/javascript/widget/components/AgentMessageBubble.vue
index f5bad52fc..7bf47697b 100755
--- a/app/javascript/widget/components/AgentMessageBubble.vue
+++ b/app/javascript/widget/components/AgentMessageBubble.vue
@@ -1,64 +1,3 @@
-<template>
-  <div class="chat-bubble-wrap">
-    <div
-      v-if="
-        !isCards && !isOptions && !isForm && !isArticle && !isCards && !isCSAT
-      "
-      class="chat-bubble agent"
-      :class="$dm('bg-white', 'dark:bg-slate-700 has-dark-mode')"
-    >
-      <div
-        v-dompurify-html="formatMessage(message, false)"
-        class="message-content text-slate-900 dark:text-slate-50"
-      />
-      <email-input
-        v-if="isTemplateEmail"
-        :message-id="messageId"
-        :message-content-attributes="messageContentAttributes"
-      />
-
-      <integration-card
-        v-if="isIntegrations"
-        :message-id="messageId"
-        :meeting-data="messageContentAttributes.data"
-      />
-    </div>
-    <div v-if="isOptions">
-      <chat-options
-        :title="message"
-        :options="messageContentAttributes.items"
-        :hide-fields="!!messageContentAttributes.submitted_values"
-        @click="onOptionSelect"
-      />
-    </div>
-    <chat-form
-      v-if="isForm && !messageContentAttributes.submitted_values"
-      :items="messageContentAttributes.items"
-      :button-label="messageContentAttributes.button_label"
-      :submitted-values="messageContentAttributes.submitted_values"
-      @submit="onFormSubmit"
-    />
-    <div v-if="isCards">
-      <chat-card
-        v-for="item in messageContentAttributes.items"
-        :key="item.title"
-        :media-url="item.media_url"
-        :title="item.title"
-        :description="item.description"
-        :actions="item.actions"
-      />
-    </div>
-    <div v-if="isArticle">
-      <chat-article :items="messageContentAttributes.items" />
-    </div>
-    <customer-satisfaction
-      v-if="isCSAT"
-      :message-content-attributes="messageContentAttributes.submitted_values"
-      :message-id="messageId"
-    />
-  </div>
-</template>
-
 <script>
 import messageFormatterMixin from 'shared/mixins/messageFormatterMixin';
 import ChatCard from 'shared/components/ChatCard.vue';
@@ -141,3 +80,64 @@ export default {
   },
 };
 </script>
+
+<template>
+  <div class="chat-bubble-wrap">
+    <div
+      v-if="
+        !isCards && !isOptions && !isForm && !isArticle && !isCards && !isCSAT
+      "
+      class="chat-bubble agent"
+      :class="$dm('bg-white', 'dark:bg-slate-700 has-dark-mode')"
+    >
+      <div
+        v-dompurify-html="formatMessage(message, false)"
+        class="message-content text-slate-900 dark:text-slate-50"
+      />
+      <email-input
+        v-if="isTemplateEmail"
+        :message-id="messageId"
+        :message-content-attributes="messageContentAttributes"
+      />
+
+      <integration-card
+        v-if="isIntegrations"
+        :message-id="messageId"
+        :meeting-data="messageContentAttributes.data"
+      />
+    </div>
+    <div v-if="isOptions">
+      <chat-options
+        :title="message"
+        :options="messageContentAttributes.items"
+        :hide-fields="!!messageContentAttributes.submitted_values"
+        @click="onOptionSelect"
+      />
+    </div>
+    <chat-form
+      v-if="isForm && !messageContentAttributes.submitted_values"
+      :items="messageContentAttributes.items"
+      :button-label="messageContentAttributes.button_label"
+      :submitted-values="messageContentAttributes.submitted_values"
+      @submit="onFormSubmit"
+    />
+    <div v-if="isCards">
+      <chat-card
+        v-for="item in messageContentAttributes.items"
+        :key="item.title"
+        :media-url="item.media_url"
+        :title="item.title"
+        :description="item.description"
+        :actions="item.actions"
+      />
+    </div>
+    <div v-if="isArticle">
+      <chat-article :items="messageContentAttributes.items" />
+    </div>
+    <customer-satisfaction
+      v-if="isCSAT"
+      :message-content-attributes="messageContentAttributes.submitted_values"
+      :message-id="messageId"
+    />
+  </div>
+</template>
diff --git a/app/javascript/widget/components/AgentTypingBubble.vue b/app/javascript/widget/components/AgentTypingBubble.vue
index e8f8e7b09..a84d8fc7b 100644
--- a/app/javascript/widget/components/AgentTypingBubble.vue
+++ b/app/javascript/widget/components/AgentTypingBubble.vue
@@ -1,3 +1,11 @@
+<script>
+import darkModeMixing from 'widget/mixins/darkModeMixin.js';
+export default {
+  name: 'AgentTypingBubble',
+  mixins: [darkModeMixing],
+};
+</script>
+
 <template>
   <div class="agent-message-wrap">
     <div class="agent-message">
@@ -17,14 +25,6 @@
   </div>
 </template>
 
-<script>
-import darkModeMixing from 'widget/mixins/darkModeMixin.js';
-export default {
-  name: 'AgentTypingBubble',
-  mixins: [darkModeMixing],
-};
-</script>
-
 <!-- Add "scoped" attribute to limit CSS to this component only -->
 <style lang="scss" scoped>
 @import '~widget/assets/scss/variables.scss';
diff --git a/app/javascript/widget/components/ArticleCategoryCard.vue b/app/javascript/widget/components/ArticleCategoryCard.vue
index 1b0193043..f604812e4 100644
--- a/app/javascript/widget/components/ArticleCategoryCard.vue
+++ b/app/javascript/widget/components/ArticleCategoryCard.vue
@@ -1,20 +1,3 @@
-<template>
-  <div>
-    <h3 class="text-sm font-medium text-slate-800 dark:text-slate-50 mb-0">
-      {{ title }}
-    </h3>
-    <article-list :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" />
-    </button>
-  </div>
-</template>
-
 <script>
 import { mapGetters } from 'vuex';
 import ArticleList from './ArticleList.vue';
@@ -42,6 +25,23 @@ export default {
   },
 };
 </script>
+
+<template>
+  <div>
+    <h3 class="text-sm font-medium text-slate-800 dark:text-slate-50 mb-0">
+      {{ title }}
+    </h3>
+    <article-list :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" />
+    </button>
+  </div>
+</template>
 <style lang="scss" scoped>
 .see-articles {
   color: var(--brand-textButtonClear);
diff --git a/app/javascript/widget/components/ArticleHero.vue b/app/javascript/widget/components/ArticleHero.vue
index 3d29ca611..a37369dc9 100644
--- a/app/javascript/widget/components/ArticleHero.vue
+++ b/app/javascript/widget/components/ArticleHero.vue
@@ -1,12 +1,3 @@
-<template>
-  <category-card
-    :title="$t('PORTAL.POPULAR_ARTICLES')"
-    :articles="articles.slice(0, 6)"
-    @view-all="$emit('view-all')"
-    @view="onArticleClick"
-  />
-</template>
-
 <script>
 import CategoryCard from './ArticleCategoryCard.vue';
 export default {
@@ -29,4 +20,13 @@ export default {
 };
 </script>
 
+<template>
+  <category-card
+    :title="$t('PORTAL.POPULAR_ARTICLES')"
+    :articles="articles.slice(0, 6)"
+    @view-all="$emit('view-all')"
+    @view="onArticleClick"
+  />
+</template>
+
 <style></style>
diff --git a/app/javascript/widget/components/ArticleList.vue b/app/javascript/widget/components/ArticleList.vue
index 4043bf060..0194b778e 100644
--- a/app/javascript/widget/components/ArticleList.vue
+++ b/app/javascript/widget/components/ArticleList.vue
@@ -1,15 +1,3 @@
-<template>
-  <ul role="list" class="py-2">
-    <article-list-item
-      v-for="article in articles"
-      :key="article.slug"
-      :link="article.link"
-      :title="article.title"
-      @click="onClick"
-    />
-  </ul>
-</template>
-
 <script>
 import ArticleListItem from './ArticleListItem.vue';
 
@@ -33,3 +21,15 @@ export default {
   },
 };
 </script>
+
+<template>
+  <ul role="list" class="py-2">
+    <article-list-item
+      v-for="article in articles"
+      :key="article.slug"
+      :link="article.link"
+      :title="article.title"
+      @click="onClick"
+    />
+  </ul>
+</template>
diff --git a/app/javascript/widget/components/ArticleListItem.vue b/app/javascript/widget/components/ArticleListItem.vue
index f16afa5e1..e116e77ab 100644
--- a/app/javascript/widget/components/ArticleListItem.vue
+++ b/app/javascript/widget/components/ArticleListItem.vue
@@ -1,18 +1,3 @@
-<template>
-  <li
-    class="py-1 flex items-center justify-between -mx-1 px-1 hover:bg-slate-25 dark:hover:bg-slate-600 rounded cursor-pointer text-slate-700 dark:text-slate-50 dark:hover:text-slate-25 hover:text-slate-900"
-    role="button"
-    @click="onClick"
-  >
-    <button class="underline-offset-2 text-sm leading-6 text-left">
-      {{ title }}
-    </button>
-    <span class="pl-1 arrow">
-      <fluent-icon icon="arrow-right" size="14" />
-    </span>
-  </li>
-</template>
-
 <script>
 import FluentIcon from 'shared/components/FluentIcon/Index.vue';
 
@@ -38,3 +23,18 @@ export default {
   },
 };
 </script>
+
+<template>
+  <li
+    class="py-1 flex items-center justify-between -mx-1 px-1 hover:bg-slate-25 dark:hover:bg-slate-600 rounded cursor-pointer text-slate-700 dark:text-slate-50 dark:hover:text-slate-25 hover:text-slate-900"
+    role="button"
+    @click="onClick"
+  >
+    <button class="underline-offset-2 text-sm leading-6 text-left">
+      {{ title }}
+    </button>
+    <span class="pl-1 arrow">
+      <fluent-icon icon="arrow-right" size="14" />
+    </span>
+  </li>
+</template>
diff --git a/app/javascript/widget/components/ArticleSearch.vue b/app/javascript/widget/components/ArticleSearch.vue
index 8ce663321..63f18884c 100644
--- a/app/javascript/widget/components/ArticleSearch.vue
+++ b/app/javascript/widget/components/ArticleSearch.vue
@@ -1,29 +1,3 @@
-<template>
-  <div class="relative flex items-center">
-    <div
-      class="absolute inset-y-0 left-0 flex items-center py-2 px-2 text-slate-500"
-    >
-      <fluent-icon icon="search" size="14" />
-    </div>
-    <input
-      id="search"
-      v-model="searchQuery"
-      :placeholder="placeholder"
-      type="text"
-      name="search"
-      class="block w-full h-8 rounded-md focus-visible:outline-none pl-6 pr-1 px-2 text-sm text-slate-800 border border-slate-100 bg-slate-75 placeholder:text-slate-400 focus:ring focus:border-woot-500 focus:ring-woot-200 hover:border-woot-200"
-      @input="handleInput"
-    />
-    <div class="absolute inset-y-0 right-0 flex py-1.5 pr-1.5">
-      <kbd
-        class="inline-flex items-center rounded border border-slate-200 px-1 font-sans text-xxs text-slate-400"
-      >
-        ⌘K
-      </kbd>
-    </div>
-  </div>
-</template>
-
 <script>
 import { debounce } from '@chatwoot/utils';
 export default {
@@ -49,3 +23,29 @@ export default {
   },
 };
 </script>
+
+<template>
+  <div class="relative flex items-center">
+    <div
+      class="absolute inset-y-0 left-0 flex items-center py-2 px-2 text-slate-500"
+    >
+      <fluent-icon icon="search" size="14" />
+    </div>
+    <input
+      id="search"
+      v-model="searchQuery"
+      :placeholder="placeholder"
+      type="text"
+      name="search"
+      class="block w-full h-8 rounded-md focus-visible:outline-none pl-6 pr-1 px-2 text-sm text-slate-800 border border-slate-100 bg-slate-75 placeholder:text-slate-400 focus:ring focus:border-woot-500 focus:ring-woot-200 hover:border-woot-200"
+      @input="handleInput"
+    />
+    <div class="absolute inset-y-0 right-0 flex py-1.5 pr-1.5">
+      <kbd
+        class="inline-flex items-center rounded border border-slate-200 px-1 font-sans text-xxs text-slate-400"
+      >
+        ⌘K
+      </kbd>
+    </div>
+  </div>
+</template>
diff --git a/app/javascript/widget/components/AvailableAgents.vue b/app/javascript/widget/components/AvailableAgents.vue
index 7e51b887b..3ea1462ad 100644
--- a/app/javascript/widget/components/AvailableAgents.vue
+++ b/app/javascript/widget/components/AvailableAgents.vue
@@ -1,7 +1,3 @@
-<template>
-  <grouped-avatars :users="users" />
-</template>
-
 <script>
 import GroupedAvatars from 'widget/components/GroupedAvatars.vue';
 
@@ -25,3 +21,7 @@ export default {
   },
 };
 </script>
+
+<template>
+  <grouped-avatars :users="users" />
+</template>
diff --git a/app/javascript/widget/components/Banner.vue b/app/javascript/widget/components/Banner.vue
index 173dfabb2..bdd11a5b7 100644
--- a/app/javascript/widget/components/Banner.vue
+++ b/app/javascript/widget/components/Banner.vue
@@ -1,11 +1,3 @@
-<template>
-  <div v-if="showBannerMessage" :class="`banner ${bannerType}`">
-    <span>
-      {{ bannerMessage }}
-    </span>
-  </div>
-</template>
-
 <script>
 import { BUS_EVENTS } from 'shared/constants/busEvents';
 import { emitter } from 'shared/helpers/mitt';
@@ -31,6 +23,14 @@ export default {
 };
 </script>
 
+<template>
+  <div v-if="showBannerMessage" :class="`banner ${bannerType}`">
+    <span>
+      {{ bannerMessage }}
+    </span>
+  </div>
+</template>
+
 <style scoped lang="scss">
 @import '~widget/assets/scss/variables.scss';
 .banner {
diff --git a/app/javascript/widget/components/ChatAttachment.vue b/app/javascript/widget/components/ChatAttachment.vue
index 5d038a66b..d7fadea77 100755
--- a/app/javascript/widget/components/ChatAttachment.vue
+++ b/app/javascript/widget/components/ChatAttachment.vue
@@ -1,21 +1,3 @@
-<template>
-  <file-upload
-    ref="upload"
-    :size="4096 * 2048"
-    :accept="allowedFileTypes"
-    :data="{
-      direct_upload_url: '/api/v1/widget/direct_uploads',
-      direct_upload: true,
-    }"
-    @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" />
-    </button>
-  </file-upload>
-</template>
-
 <script>
 import FileUpload from 'vue-upload-component';
 import Spinner from 'shared/components/Spinner.vue';
@@ -150,3 +132,21 @@ export default {
   },
 };
 </script>
+
+<template>
+  <file-upload
+    ref="upload"
+    :size="4096 * 2048"
+    :accept="allowedFileTypes"
+    :data="{
+      direct_upload_url: '/api/v1/widget/direct_uploads',
+      direct_upload: true,
+    }"
+    @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" />
+    </button>
+  </file-upload>
+</template>
diff --git a/app/javascript/widget/components/ChatFooter.vue b/app/javascript/widget/components/ChatFooter.vue
index 7d755ef68..9ee4ac346 100755
--- a/app/javascript/widget/components/ChatFooter.vue
+++ b/app/javascript/widget/components/ChatFooter.vue
@@ -1,45 +1,3 @@
-<template>
-  <footer
-    v-if="!hideReplyBox"
-    class="relative z-50 mb-1"
-    :class="{
-      'rounded-lg': !isWidgetStyleFlat,
-      'pt-2.5 shadow-[0px_-20px_20px_1px_rgba(0,_0,_0,_0.05)] dark:shadow-[0px_-20px_20px_1px_rgba(0,_0,_0,_0.15)] rounded-t-none':
-        hasReplyTo,
-    }"
-  >
-    <footer-reply-to
-      v-if="hasReplyTo"
-      :in-reply-to="inReplyTo"
-      @dismiss="inReplyTo = null"
-    />
-    <chat-input-wrap
-      class="shadow-sm"
-      :on-send-message="handleSendMessage"
-      :on-send-attachment="handleSendAttachment"
-    />
-  </footer>
-  <div v-else>
-    <custom-button
-      class="font-medium"
-      block
-      :bg-color="widgetColor"
-      :text-color="textColor"
-      @click="startNewConversation"
-    >
-      {{ $t('START_NEW_CONVERSATION') }}
-    </custom-button>
-    <custom-button
-      v-if="showEmailTranscriptButton"
-      type="clear"
-      class="font-normal"
-      @click="sendTranscript"
-    >
-      {{ $t('EMAIL_TRANSCRIPT.BUTTON_TEXT') }}
-    </custom-button>
-  </div>
-</template>
-
 <script>
 import { mapActions, mapGetters } from 'vuex';
 import { getContrastingTextColor } from '@chatwoot/utils';
@@ -161,6 +119,48 @@ export default {
   },
 };
 </script>
+
+<template>
+  <footer
+    v-if="!hideReplyBox"
+    class="relative z-50 mb-1"
+    :class="{
+      'rounded-lg': !isWidgetStyleFlat,
+      'pt-2.5 shadow-[0px_-20px_20px_1px_rgba(0,_0,_0,_0.05)] dark:shadow-[0px_-20px_20px_1px_rgba(0,_0,_0,_0.15)] rounded-t-none':
+        hasReplyTo,
+    }"
+  >
+    <footer-reply-to
+      v-if="hasReplyTo"
+      :in-reply-to="inReplyTo"
+      @dismiss="inReplyTo = null"
+    />
+    <chat-input-wrap
+      class="shadow-sm"
+      :on-send-message="handleSendMessage"
+      :on-send-attachment="handleSendAttachment"
+    />
+  </footer>
+  <div v-else>
+    <custom-button
+      class="font-medium"
+      block
+      :bg-color="widgetColor"
+      :text-color="textColor"
+      @click="startNewConversation"
+    >
+      {{ $t('START_NEW_CONVERSATION') }}
+    </custom-button>
+    <custom-button
+      v-if="showEmailTranscriptButton"
+      type="clear"
+      class="font-normal"
+      @click="sendTranscript"
+    >
+      {{ $t('EMAIL_TRANSCRIPT.BUTTON_TEXT') }}
+    </custom-button>
+  </div>
+</template>
 <style scoped lang="scss">
 @import '~widget/assets/scss/variables.scss';
 
diff --git a/app/javascript/widget/components/ChatHeader.vue b/app/javascript/widget/components/ChatHeader.vue
index 079f337aa..0f78ee5db 100644
--- a/app/javascript/widget/components/ChatHeader.vue
+++ b/app/javascript/widget/components/ChatHeader.vue
@@ -1,49 +1,3 @@
-<template>
-  <header
-    class="flex justify-between p-5 w-full"
-    :class="$dm('bg-white', 'dark:bg-slate-900')"
-  >
-    <div class="flex items-center">
-      <button
-        v-if="showBackButton"
-        class="-ml-3 px-2"
-        @click="onBackButtonClick"
-      >
-        <fluent-icon
-          icon="chevron-left"
-          size="24"
-          :class="$dm('text-black-900', 'dark:text-slate-50')"
-        />
-      </button>
-      <img
-        v-if="avatarUrl"
-        class="h-8 w-8 rounded-full mr-3"
-        :src="avatarUrl"
-        alt="avatar"
-      />
-      <div>
-        <div
-          class="font-medium text-base leading-4 flex items-center"
-          :class="$dm('text-black-900', 'dark:text-slate-50')"
-        >
-          <span v-dompurify-html="title" class="mr-1" />
-          <div
-            :class="`h-2 w-2 rounded-full
-              ${isOnline ? 'bg-green-500' : 'hidden'}`"
-          />
-        </div>
-        <div
-          class="text-xs mt-1 leading-3"
-          :class="$dm('text-black-700', 'dark:text-slate-400')"
-        >
-          {{ replyWaitMessage }}
-        </div>
-      </div>
-    </div>
-    <header-actions :show-popout-button="showPopoutButton" />
-  </header>
-</template>
-
 <script>
 import { mapGetters } from 'vuex';
 
@@ -104,3 +58,49 @@ export default {
   },
 };
 </script>
+
+<template>
+  <header
+    class="flex justify-between p-5 w-full"
+    :class="$dm('bg-white', 'dark:bg-slate-900')"
+  >
+    <div class="flex items-center">
+      <button
+        v-if="showBackButton"
+        class="-ml-3 px-2"
+        @click="onBackButtonClick"
+      >
+        <fluent-icon
+          icon="chevron-left"
+          size="24"
+          :class="$dm('text-black-900', 'dark:text-slate-50')"
+        />
+      </button>
+      <img
+        v-if="avatarUrl"
+        class="h-8 w-8 rounded-full mr-3"
+        :src="avatarUrl"
+        alt="avatar"
+      />
+      <div>
+        <div
+          class="font-medium text-base leading-4 flex items-center"
+          :class="$dm('text-black-900', 'dark:text-slate-50')"
+        >
+          <span v-dompurify-html="title" class="mr-1" />
+          <div
+            :class="`h-2 w-2 rounded-full
+              ${isOnline ? 'bg-green-500' : 'hidden'}`"
+          />
+        </div>
+        <div
+          class="text-xs mt-1 leading-3"
+          :class="$dm('text-black-700', 'dark:text-slate-400')"
+        >
+          {{ replyWaitMessage }}
+        </div>
+      </div>
+    </div>
+    <header-actions :show-popout-button="showPopoutButton" />
+  </header>
+</template>
diff --git a/app/javascript/widget/components/ChatHeaderExpanded.vue b/app/javascript/widget/components/ChatHeaderExpanded.vue
index 144c90700..e45d2fc4f 100755
--- a/app/javascript/widget/components/ChatHeaderExpanded.vue
+++ b/app/javascript/widget/components/ChatHeaderExpanded.vue
@@ -1,3 +1,34 @@
+<script>
+import HeaderActions from './HeaderActions.vue';
+import darkModeMixin from 'widget/mixins/darkModeMixin.js';
+
+export default {
+  name: 'ChatHeaderExpanded',
+  components: {
+    HeaderActions,
+  },
+  mixins: [darkModeMixin],
+  props: {
+    avatarUrl: {
+      type: String,
+      default: '',
+    },
+    introHeading: {
+      type: String,
+      default: '',
+    },
+    introBody: {
+      type: String,
+      default: '',
+    },
+    showPopoutButton: {
+      type: Boolean,
+      default: false,
+    },
+  },
+};
+</script>
+
 <template>
   <header
     class="header-expanded pt-6 pb-4 px-5 relative box-border w-full bg-transparent"
@@ -29,34 +60,3 @@
     />
   </header>
 </template>
-
-<script>
-import HeaderActions from './HeaderActions.vue';
-import darkModeMixin from 'widget/mixins/darkModeMixin.js';
-
-export default {
-  name: 'ChatHeaderExpanded',
-  components: {
-    HeaderActions,
-  },
-  mixins: [darkModeMixin],
-  props: {
-    avatarUrl: {
-      type: String,
-      default: '',
-    },
-    introHeading: {
-      type: String,
-      default: '',
-    },
-    introBody: {
-      type: String,
-      default: '',
-    },
-    showPopoutButton: {
-      type: Boolean,
-      default: false,
-    },
-  },
-};
-</script>
diff --git a/app/javascript/widget/components/ChatInputWrap.vue b/app/javascript/widget/components/ChatInputWrap.vue
index f285a64d5..50e7aa03e 100755
--- a/app/javascript/widget/components/ChatInputWrap.vue
+++ b/app/javascript/widget/components/ChatInputWrap.vue
@@ -1,52 +1,3 @@
-<template>
-  <div
-    class="chat-message--input is-focused"
-    :class="$dm('bg-white ', 'dark:bg-slate-600')"
-    @keydown.esc="hideEmojiPicker"
-  >
-    <resizable-text-area
-      id="chat-input"
-      ref="chatInput"
-      v-model="userInput"
-      :rows="1"
-      :aria-label="$t('CHAT_PLACEHOLDER')"
-      :placeholder="$t('CHAT_PLACEHOLDER')"
-      class="form-input user-message-input is-focused"
-      :class="inputColor"
-      @typing-off="onTypingOff"
-      @typing-on="onTypingOn"
-      @focus="onFocus"
-      @blur="onBlur"
-    />
-    <div class="button-wrap">
-      <chat-attachment-button
-        v-if="showAttachment"
-        :class="$dm('text-black-900', 'dark:text-slate-100')"
-        :on-attach="onSendAttachment"
-      />
-      <button
-        v-if="hasEmojiPickerEnabled"
-        class="flex items-center justify-center icon-button"
-        aria-label="Emoji picker"
-        @click="toggleEmojiPicker"
-      >
-        <fluent-icon icon="emoji" :class="emojiIconColor" />
-      </button>
-      <emoji-input
-        v-if="showEmojiPicker"
-        v-on-clickaway="hideEmojiPicker"
-        :on-click="emojiOnClick"
-        @keydown.esc="hideEmojiPicker"
-      />
-      <chat-send-button
-        v-if="showSendButton"
-        :on-click="handleButtonClick"
-        :color="widgetColor"
-      />
-    </div>
-  </div>
-</template>
-
 <script>
 import { mapGetters } from 'vuex';
 
@@ -174,6 +125,55 @@ export default {
 };
 </script>
 
+<template>
+  <div
+    class="chat-message--input is-focused"
+    :class="$dm('bg-white ', 'dark:bg-slate-600')"
+    @keydown.esc="hideEmojiPicker"
+  >
+    <resizable-text-area
+      id="chat-input"
+      ref="chatInput"
+      v-model="userInput"
+      :rows="1"
+      :aria-label="$t('CHAT_PLACEHOLDER')"
+      :placeholder="$t('CHAT_PLACEHOLDER')"
+      class="form-input user-message-input is-focused"
+      :class="inputColor"
+      @typing-off="onTypingOff"
+      @typing-on="onTypingOn"
+      @focus="onFocus"
+      @blur="onBlur"
+    />
+    <div class="button-wrap">
+      <chat-attachment-button
+        v-if="showAttachment"
+        :class="$dm('text-black-900', 'dark:text-slate-100')"
+        :on-attach="onSendAttachment"
+      />
+      <button
+        v-if="hasEmojiPickerEnabled"
+        class="flex items-center justify-center icon-button"
+        aria-label="Emoji picker"
+        @click="toggleEmojiPicker"
+      >
+        <fluent-icon icon="emoji" :class="emojiIconColor" />
+      </button>
+      <emoji-input
+        v-if="showEmojiPicker"
+        v-on-clickaway="hideEmojiPicker"
+        :on-click="emojiOnClick"
+        @keydown.esc="hideEmojiPicker"
+      />
+      <chat-send-button
+        v-if="showSendButton"
+        :on-click="handleButtonClick"
+        :color="widgetColor"
+      />
+    </div>
+  </div>
+</template>
+
 <style scoped lang="scss">
 @import '~widget/assets/scss/variables.scss';
 @import '~widget/assets/scss/mixins.scss';
diff --git a/app/javascript/widget/components/ChatMessage.vue b/app/javascript/widget/components/ChatMessage.vue
index c3a586f23..2b1d9d6ec 100755
--- a/app/javascript/widget/components/ChatMessage.vue
+++ b/app/javascript/widget/components/ChatMessage.vue
@@ -1,18 +1,3 @@
-<template>
-  <UserMessage
-    v-if="isUserMessage"
-    :id="`cwmsg-${message.id}`"
-    :message="message"
-    :reply-to="replyTo"
-  />
-  <AgentMessage
-    v-else
-    :id="`cwmsg-${message.id}`"
-    :message="message"
-    :reply-to="replyTo"
-  />
-</template>
-
 <script>
 import AgentMessage from 'widget/components/AgentMessage.vue';
 import UserMessage from 'widget/components/UserMessage.vue';
@@ -45,6 +30,21 @@ export default {
 };
 </script>
 
+<template>
+  <UserMessage
+    v-if="isUserMessage"
+    :id="`cwmsg-${message.id}`"
+    :message="message"
+    :reply-to="replyTo"
+  />
+  <AgentMessage
+    v-else
+    :id="`cwmsg-${message.id}`"
+    :message="message"
+    :reply-to="replyTo"
+  />
+</template>
+
 <style scoped lang="scss">
 .message-wrap {
   display: flex;
diff --git a/app/javascript/widget/components/ChatSendButton.vue b/app/javascript/widget/components/ChatSendButton.vue
index 8a8819962..ce9edb788 100755
--- a/app/javascript/widget/components/ChatSendButton.vue
+++ b/app/javascript/widget/components/ChatSendButton.vue
@@ -1,15 +1,3 @@
-<template>
-  <button
-    type="submit"
-    :disabled="disabled"
-    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" />
-  </button>
-</template>
-
 <script>
 import Spinner from 'shared/components/Spinner.vue';
 import FluentIcon from 'shared/components/FluentIcon/Index.vue';
@@ -39,3 +27,15 @@ export default {
   },
 };
 </script>
+
+<template>
+  <button
+    type="submit"
+    :disabled="disabled"
+    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" />
+  </button>
+</template>
diff --git a/app/javascript/widget/components/ContinueChatButton.vue b/app/javascript/widget/components/ContinueChatButton.vue
index 144bcc37f..f05b19581 100644
--- a/app/javascript/widget/components/ContinueChatButton.vue
+++ b/app/javascript/widget/components/ContinueChatButton.vue
@@ -1,3 +1,25 @@
+<script>
+import FluentIcon from 'shared/components/FluentIcon/Index.vue';
+
+export default {
+  components: { FluentIcon },
+  props: {
+    title: {
+      type: String,
+      default: 'Continue your chat',
+    },
+    content: {
+      type: String,
+      default: 'Chat with us',
+    },
+    unreadCount: {
+      type: Number,
+      default: 0,
+    },
+  },
+};
+</script>
+
 <template>
   <button
     type="button"
@@ -37,25 +59,3 @@
     </div>
   </button>
 </template>
-
-<script>
-import FluentIcon from 'shared/components/FluentIcon/Index.vue';
-
-export default {
-  components: { FluentIcon },
-  props: {
-    title: {
-      type: String,
-      default: 'Continue your chat',
-    },
-    content: {
-      type: String,
-      default: 'Chat with us',
-    },
-    unreadCount: {
-      type: Number,
-      default: 0,
-    },
-  },
-};
-</script>
diff --git a/app/javascript/widget/components/ConversationWrap.vue b/app/javascript/widget/components/ConversationWrap.vue
index c0fa424ba..4fae730c3 100755
--- a/app/javascript/widget/components/ConversationWrap.vue
+++ b/app/javascript/widget/components/ConversationWrap.vue
@@ -1,26 +1,3 @@
-<template>
-  <div class="conversation--container" :class="colorSchemeClass">
-    <div class="conversation-wrap" :class="{ 'is-typing': isAgentTyping }">
-      <div v-if="isFetchingList" class="message--loader">
-        <spinner />
-      </div>
-      <div
-        v-for="groupedMessage in groupedMessages"
-        :key="groupedMessage.date"
-        class="messages-wrap"
-      >
-        <date-separator :date="groupedMessage.date" />
-        <chat-message
-          v-for="message in groupedMessage.messages"
-          :key="message.id"
-          :message="message"
-        />
-      </div>
-      <agent-typing-bubble v-if="showStatusIndicator" />
-    </div>
-  </div>
-</template>
-
 <script>
 import ChatMessage from 'widget/components/ChatMessage.vue';
 import AgentTypingBubble from 'widget/components/AgentTypingBubble.vue';
@@ -118,6 +95,29 @@ export default {
 };
 </script>
 
+<template>
+  <div class="conversation--container" :class="colorSchemeClass">
+    <div class="conversation-wrap" :class="{ 'is-typing': isAgentTyping }">
+      <div v-if="isFetchingList" class="message--loader">
+        <spinner />
+      </div>
+      <div
+        v-for="groupedMessage in groupedMessages"
+        :key="groupedMessage.date"
+        class="messages-wrap"
+      >
+        <date-separator :date="groupedMessage.date" />
+        <chat-message
+          v-for="message in groupedMessage.messages"
+          :key="message.id"
+          :message="message"
+        />
+      </div>
+      <agent-typing-bubble v-if="showStatusIndicator" />
+    </div>
+  </div>
+</template>
+
 <style scoped lang="scss">
 @import '~widget/assets/scss/variables.scss';
 @import '~widget/assets/scss/mixins.scss';
diff --git a/app/javascript/widget/components/DragWrapper.vue b/app/javascript/widget/components/DragWrapper.vue
index 873622a7c..85b8573d1 100644
--- a/app/javascript/widget/components/DragWrapper.vue
+++ b/app/javascript/widget/components/DragWrapper.vue
@@ -1,15 +1,3 @@
-<template>
-  <div
-    :style="{ transform: `translateX(${dragDistance}px)` }"
-    class="will-change-transform"
-    @touchstart="handleTouchStart"
-    @touchmove="handleTouchMove"
-    @touchend="resetPosition"
-  >
-    <slot />
-  </div>
-</template>
-
 <script>
 export default {
   name: 'DragWrapper',
@@ -59,3 +47,15 @@ export default {
   },
 };
 </script>
+
+<template>
+  <div
+    :style="{ transform: `translateX(${dragDistance}px)` }"
+    class="will-change-transform"
+    @touchstart="handleTouchStart"
+    @touchmove="handleTouchMove"
+    @touchend="resetPosition"
+  >
+    <slot />
+  </div>
+</template>
diff --git a/app/javascript/widget/components/FileBubble.vue b/app/javascript/widget/components/FileBubble.vue
index 44879ad06..9ae4a224d 100644
--- a/app/javascript/widget/components/FileBubble.vue
+++ b/app/javascript/widget/components/FileBubble.vue
@@ -1,27 +1,3 @@
-<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" />
-    </div>
-    <div class="meta">
-      <div class="title" :class="titleColor" :style="{ color: textColor }">
-        {{ title }}
-      </div>
-      <div class="link-wrap mb-1">
-        <a
-          class="download"
-          rel="noreferrer noopener nofollow"
-          target="_blank"
-          :style="{ color: textColor }"
-          :href="url"
-        >
-          {{ $t('COMPONENTS.FILE_BUBBLE.DOWNLOAD') }}
-        </a>
-      </div>
-    </div>
-  </div>
-</template>
-
 <script>
 import FluentIcon from 'shared/components/FluentIcon/Index.vue';
 import darkModeMixin from 'widget/mixins/darkModeMixin.js';
@@ -82,6 +58,30 @@ export default {
 };
 </script>
 
+<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" />
+    </div>
+    <div class="meta">
+      <div class="title" :class="titleColor" :style="{ color: textColor }">
+        {{ title }}
+      </div>
+      <div class="link-wrap mb-1">
+        <a
+          class="download"
+          rel="noreferrer noopener nofollow"
+          target="_blank"
+          :style="{ color: textColor }"
+          :href="url"
+        >
+          {{ $t('COMPONENTS.FILE_BUBBLE.DOWNLOAD') }}
+        </a>
+      </div>
+    </div>
+  </div>
+</template>
+
 <style lang="scss" scoped>
 @import '~widget/assets/scss/variables.scss';
 
diff --git a/app/javascript/widget/components/FooterReplyTo.vue b/app/javascript/widget/components/FooterReplyTo.vue
index e0124196d..006511959 100644
--- a/app/javascript/widget/components/FooterReplyTo.vue
+++ b/app/javascript/widget/components/FooterReplyTo.vue
@@ -1,20 +1,3 @@
-<template>
-  <div
-    class="mb-2.5 rounded-[7px] dark:bg-slate-900 dark:text-slate-100 bg-slate-100 px-2 py-1.5 text-sm text-slate-700 flex items-center gap-2"
-  >
-    <div class="items-center flex-grow truncate">
-      <strong>Replying to:</strong>
-      {{ inReplyTo.content || replyToAttachment }}
-    </div>
-    <button
-      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" />
-    </button>
-  </div>
-</template>
-
 <script>
 import FluentIcon from 'shared/components/FluentIcon/Index.vue';
 
@@ -39,3 +22,20 @@ export default {
   },
 };
 </script>
+
+<template>
+  <div
+    class="mb-2.5 rounded-[7px] dark:bg-slate-900 dark:text-slate-100 bg-slate-100 px-2 py-1.5 text-sm text-slate-700 flex items-center gap-2"
+  >
+    <div class="items-center flex-grow truncate">
+      <strong>Replying to:</strong>
+      {{ inReplyTo.content || replyToAttachment }}
+    </div>
+    <button
+      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" />
+    </button>
+  </div>
+</template>
diff --git a/app/javascript/widget/components/Form/Input.vue b/app/javascript/widget/components/Form/Input.vue
index ffa9edef2..5148e6111 100644
--- a/app/javascript/widget/components/Form/Input.vue
+++ b/app/javascript/widget/components/Form/Input.vue
@@ -1,31 +1,3 @@
-<template>
-  <label class="block">
-    <div
-      v-if="label"
-      class="mb-2 text-xs leading-3 font-medium"
-      :class="labelClass"
-    >
-      {{ label }}
-    </div>
-    <input
-      :type="type"
-      class="border rounded w-full py-2 px-3 leading-tight outline-none"
-      :class="inputHasError"
-      :placeholder="placeholder"
-      :value="value"
-      @change="onChange"
-    />
-    <div v-if="error" class="text-red-400 mt-2 text-xs leading-3 font-medium">
-      {{ error }}
-    </div>
-    <div
-      v-if="!error && helpText"
-      class="text-red-400 mt-2 text-xs leading-3 font-medium"
-    >
-      {{ helpText }}
-    </div>
-  </label>
-</template>
 <script>
 import darkModeMixin from 'widget/mixins/darkModeMixin';
 export default {
@@ -84,3 +56,31 @@ export default {
   },
 };
 </script>
+<template>
+  <label class="block">
+    <div
+      v-if="label"
+      class="mb-2 text-xs leading-3 font-medium"
+      :class="labelClass"
+    >
+      {{ label }}
+    </div>
+    <input
+      :type="type"
+      class="border rounded w-full py-2 px-3 leading-tight outline-none"
+      :class="inputHasError"
+      :placeholder="placeholder"
+      :value="value"
+      @change="onChange"
+    />
+    <div v-if="error" class="text-red-400 mt-2 text-xs leading-3 font-medium">
+      {{ error }}
+    </div>
+    <div
+      v-if="!error && helpText"
+      class="text-red-400 mt-2 text-xs leading-3 font-medium"
+    >
+      {{ helpText }}
+    </div>
+  </label>
+</template>
diff --git a/app/javascript/widget/components/Form/PhoneInput.vue b/app/javascript/widget/components/Form/PhoneInput.vue
index c7fafa916..8eac64187 100644
--- a/app/javascript/widget/components/Form/PhoneInput.vue
+++ b/app/javascript/widget/components/Form/PhoneInput.vue
@@ -1,90 +1,3 @@
-<template>
-  <div class="phone-input--wrap relative mt-2">
-    <div
-      class="phone-input rounded w-full flex items-center justify-start outline-none border border-solid"
-      :class="inputHasError"
-    >
-      <div
-        class="country-emoji--wrap h-full cursor-pointer flex items-center justify-between px-2 py-2"
-        :class="dropdownClass"
-        @click="toggleCountryDropdown"
-      >
-        <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" />
-      </div>
-      <span
-        v-if="activeDialCode"
-        class="py-2 pr-0 pl-2 text-base"
-        :class="$dm('text-slate-700', 'dark:text-slate-50')"
-      >
-        {{ activeDialCode }}
-      </span>
-      <input
-        :value="phoneNumber"
-        type="phoneInput"
-        class="border-0 w-full py-2 pl-2 pr-3 leading-tight outline-none h-full rounded-r"
-        name="phoneNumber"
-        :placeholder="placeholder"
-        :class="inputLightAndDarkModeColor"
-        @input="onChange"
-        @blur="context.blurHandler"
-      />
-    </div>
-    <div
-      v-if="showDropdown"
-      ref="dropdown"
-      v-on-clickaway="closeDropdown"
-      :class="dropdownBackgroundClass"
-      class="country-dropdown h-48 overflow-y-auto z-10 absolute top-12 px-0 pt-0 pl-1 pr-1 pb-1 rounded shadow-lg"
-      @keydown.up="moveSelectionUp"
-      @keydown.down="moveSelectionDown"
-      @keydown.enter="onSelect"
-    >
-      <div class="sticky top-0" :class="dropdownBackgroundClass">
-        <input
-          ref="searchbar"
-          v-model="searchCountry"
-          type="text"
-          placeholder="Search country"
-          class="dropdown-search h-8 text-sm mb-1 mt-1 w-full rounded py-2 px-3 outline-none border border-solid"
-          :class="[$dm('bg-slate-50', 'dark:bg-slate-600'), inputBorderColor]"
-        />
-      </div>
-      <div
-        v-for="(country, index) in items"
-        ref="dropdownItem"
-        :key="index"
-        class="country-dropdown--item h-8 flex items-center cursor-pointer rounded py-2 px-2"
-        :class="[
-          dropdownItemClass,
-          country.id === activeCountryCode ? activeDropdownItemClass : '',
-          index === selectedIndex ? focusedDropdownItemClass : '',
-        ]"
-        @click="onSelectCountry(country)"
-      >
-        <span v-if="country.emoji" class="mr-2 text-xl">{{
-          country.emoji
-        }}</span>
-        <span class="truncate text-sm leading-5">
-          {{ country.name }}
-        </span>
-        <span class="ml-2 text-xs">{{ country.dial_code }}</span>
-      </div>
-      <div v-if="items.length === 0">
-        <span
-          class="text-sm mt-4 justify-center text-center flex"
-          :class="$dm('text-slate-700', 'dark:text-slate-50')"
-        >
-          {{ $t('PRE_CHAT_FORM.FIELDS.PHONE_NUMBER.DROPDOWN_EMPTY') }}
-        </span>
-      </div>
-    </div>
-  </div>
-</template>
-
 <script>
 import countries from 'shared/constants/countries.js';
 import FluentIcon from 'shared/components/FluentIcon/Index.vue';
@@ -307,6 +220,93 @@ export default {
   },
 };
 </script>
+
+<template>
+  <div class="phone-input--wrap relative mt-2">
+    <div
+      class="phone-input rounded w-full flex items-center justify-start outline-none border border-solid"
+      :class="inputHasError"
+    >
+      <div
+        class="country-emoji--wrap h-full cursor-pointer flex items-center justify-between px-2 py-2"
+        :class="dropdownClass"
+        @click="toggleCountryDropdown"
+      >
+        <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" />
+      </div>
+      <span
+        v-if="activeDialCode"
+        class="py-2 pr-0 pl-2 text-base"
+        :class="$dm('text-slate-700', 'dark:text-slate-50')"
+      >
+        {{ activeDialCode }}
+      </span>
+      <input
+        :value="phoneNumber"
+        type="phoneInput"
+        class="border-0 w-full py-2 pl-2 pr-3 leading-tight outline-none h-full rounded-r"
+        name="phoneNumber"
+        :placeholder="placeholder"
+        :class="inputLightAndDarkModeColor"
+        @input="onChange"
+        @blur="context.blurHandler"
+      />
+    </div>
+    <div
+      v-if="showDropdown"
+      ref="dropdown"
+      v-on-clickaway="closeDropdown"
+      :class="dropdownBackgroundClass"
+      class="country-dropdown h-48 overflow-y-auto z-10 absolute top-12 px-0 pt-0 pl-1 pr-1 pb-1 rounded shadow-lg"
+      @keydown.up="moveSelectionUp"
+      @keydown.down="moveSelectionDown"
+      @keydown.enter="onSelect"
+    >
+      <div class="sticky top-0" :class="dropdownBackgroundClass">
+        <input
+          ref="searchbar"
+          v-model="searchCountry"
+          type="text"
+          placeholder="Search country"
+          class="dropdown-search h-8 text-sm mb-1 mt-1 w-full rounded py-2 px-3 outline-none border border-solid"
+          :class="[$dm('bg-slate-50', 'dark:bg-slate-600'), inputBorderColor]"
+        />
+      </div>
+      <div
+        v-for="(country, index) in items"
+        ref="dropdownItem"
+        :key="index"
+        class="country-dropdown--item h-8 flex items-center cursor-pointer rounded py-2 px-2"
+        :class="[
+          dropdownItemClass,
+          country.id === activeCountryCode ? activeDropdownItemClass : '',
+          index === selectedIndex ? focusedDropdownItemClass : '',
+        ]"
+        @click="onSelectCountry(country)"
+      >
+        <span v-if="country.emoji" class="mr-2 text-xl">{{
+          country.emoji
+        }}</span>
+        <span class="truncate text-sm leading-5">
+          {{ country.name }}
+        </span>
+        <span class="ml-2 text-xs">{{ country.dial_code }}</span>
+      </div>
+      <div v-if="items.length === 0">
+        <span
+          class="text-sm mt-4 justify-center text-center flex"
+          :class="$dm('text-slate-700', 'dark:text-slate-50')"
+        >
+          {{ $t('PRE_CHAT_FORM.FIELDS.PHONE_NUMBER.DROPDOWN_EMPTY') }}
+        </span>
+      </div>
+    </div>
+  </div>
+</template>
 <style lang="scss" scoped>
 @import '~widget/assets/scss/variables.scss';
 .phone-input--wrap {
diff --git a/app/javascript/widget/components/Form/TextArea.vue b/app/javascript/widget/components/Form/TextArea.vue
index 0b9255e75..9393928a5 100644
--- a/app/javascript/widget/components/Form/TextArea.vue
+++ b/app/javascript/widget/components/Form/TextArea.vue
@@ -1,24 +1,3 @@
-<template>
-  <label class="block">
-    <div
-      v-if="label"
-      class="mb-2 text-xs leading-3 font-medium"
-      :class="labelClass"
-    >
-      {{ label }}
-    </div>
-    <textarea
-      class="resize-none border rounded w-full py-2 px-3 text-slate-700 leading-tight outline-none"
-      :class="isTextAreaHasError"
-      :placeholder="placeholder"
-      :value="value"
-      @change="onChange"
-    />
-    <div v-if="error" class="text-red-400 mt-2 text-xs leading-3 font-medium">
-      {{ error }}
-    </div>
-  </label>
-</template>
 <script>
 import darkModeMixin from 'widget/mixins/darkModeMixin';
 export default {
@@ -73,6 +52,27 @@ export default {
   },
 };
 </script>
+<template>
+  <label class="block">
+    <div
+      v-if="label"
+      class="mb-2 text-xs leading-3 font-medium"
+      :class="labelClass"
+    >
+      {{ label }}
+    </div>
+    <textarea
+      class="resize-none border rounded w-full py-2 px-3 text-slate-700 leading-tight outline-none"
+      :class="isTextAreaHasError"
+      :placeholder="placeholder"
+      :value="value"
+      @change="onChange"
+    />
+    <div v-if="error" class="text-red-400 mt-2 text-xs leading-3 font-medium">
+      {{ error }}
+    </div>
+  </label>
+</template>
 <style lang="scss" scoped>
 textarea {
   min-height: 8rem;
diff --git a/app/javascript/widget/components/GroupedAvatars.vue b/app/javascript/widget/components/GroupedAvatars.vue
index 0841214d6..9d6c7a2a6 100644
--- a/app/javascript/widget/components/GroupedAvatars.vue
+++ b/app/javascript/widget/components/GroupedAvatars.vue
@@ -1,3 +1,18 @@
+<script>
+import Thumbnail from 'dashboard/components/widgets/Thumbnail.vue';
+
+export default {
+  name: 'GroupedAvatars',
+  components: { Thumbnail },
+  props: {
+    users: {
+      type: Array,
+      default: () => [],
+    },
+  },
+};
+</script>
+
 <template>
   <div class="flex">
     <span
@@ -16,18 +31,3 @@
     </span>
   </div>
 </template>
-
-<script>
-import Thumbnail from 'dashboard/components/widgets/Thumbnail.vue';
-
-export default {
-  name: 'GroupedAvatars',
-  components: { Thumbnail },
-  props: {
-    users: {
-      type: Array,
-      default: () => [],
-    },
-  },
-};
-</script>
diff --git a/app/javascript/widget/components/HeaderActions.vue b/app/javascript/widget/components/HeaderActions.vue
index 1fa4d9f39..80d03a72a 100644
--- a/app/javascript/widget/components/HeaderActions.vue
+++ b/app/javascript/widget/components/HeaderActions.vue
@@ -1,47 +1,3 @@
-<template>
-  <div v-if="showHeaderActions" class="actions flex items-center">
-    <button
-      v-if="
-        canLeaveConversation &&
-        hasEndConversationEnabled &&
-        showEndConversationButton
-      "
-      class="button transparent compact"
-      :title="$t('END_CONVERSATION')"
-      @click="resolveConversation"
-    >
-      <fluent-icon
-        icon="sign-out"
-        size="22"
-        :class="$dm('text-black-900', 'dark:text-slate-50')"
-      />
-    </button>
-    <button
-      v-if="showPopoutButton"
-      class="button transparent compact new-window--button"
-      @click="popoutWindow"
-    >
-      <fluent-icon
-        icon="open"
-        size="22"
-        :class="$dm('text-black-900', 'dark:text-slate-50')"
-      />
-    </button>
-    <button
-      class="button transparent compact close-button"
-      :class="{
-        'rn-close-button': isRNWebView,
-      }"
-      @click="closeWindow"
-    >
-      <fluent-icon
-        icon="dismiss"
-        size="24"
-        :class="$dm('text-black-900', 'dark:text-slate-50')"
-      />
-    </button>
-  </div>
-</template>
 <script>
 import { mapGetters } from 'vuex';
 import { IFrameHelper, RNHelper } from 'widget/helpers/utils';
@@ -120,6 +76,50 @@ export default {
   },
 };
 </script>
+<template>
+  <div v-if="showHeaderActions" class="actions flex items-center">
+    <button
+      v-if="
+        canLeaveConversation &&
+        hasEndConversationEnabled &&
+        showEndConversationButton
+      "
+      class="button transparent compact"
+      :title="$t('END_CONVERSATION')"
+      @click="resolveConversation"
+    >
+      <fluent-icon
+        icon="sign-out"
+        size="22"
+        :class="$dm('text-black-900', 'dark:text-slate-50')"
+      />
+    </button>
+    <button
+      v-if="showPopoutButton"
+      class="button transparent compact new-window--button"
+      @click="popoutWindow"
+    >
+      <fluent-icon
+        icon="open"
+        size="22"
+        :class="$dm('text-black-900', 'dark:text-slate-50')"
+      />
+    </button>
+    <button
+      class="button transparent compact close-button"
+      :class="{
+        'rn-close-button': isRNWebView,
+      }"
+      @click="closeWindow"
+    >
+      <fluent-icon
+        icon="dismiss"
+        size="24"
+        :class="$dm('text-black-900', 'dark:text-slate-50')"
+      />
+    </button>
+  </div>
+</template>
 <style scoped lang="scss">
 @import '~widget/assets/scss/variables.scss';
 
diff --git a/app/javascript/widget/components/ImageBubble.vue b/app/javascript/widget/components/ImageBubble.vue
index 8bf078400..082763d2d 100644
--- a/app/javascript/widget/components/ImageBubble.vue
+++ b/app/javascript/widget/components/ImageBubble.vue
@@ -1,3 +1,21 @@
+<script>
+export default {
+  props: {
+    url: { type: String, default: '' },
+    thumb: { type: String, default: '' },
+    readableTime: { type: String, default: '' },
+  },
+  methods: {
+    onImgError() {
+      this.$emit('error');
+    },
+    onClick() {
+      this.$emit('click');
+    },
+  },
+};
+</script>
+
 <template>
   <a
     :href="url"
@@ -16,24 +34,6 @@
     </div>
   </a>
 </template>
-
-<script>
-export default {
-  props: {
-    url: { type: String, default: '' },
-    thumb: { type: String, default: '' },
-    readableTime: { type: String, default: '' },
-  },
-  methods: {
-    onImgError() {
-      this.$emit('error');
-    },
-    onClick() {
-      this.$emit('click');
-    },
-  },
-};
-</script>
 <style lang="scss" scoped>
 @import '~widget/assets/scss/variables.scss';
 
diff --git a/app/javascript/widget/components/MessageReplyButton.vue b/app/javascript/widget/components/MessageReplyButton.vue
index 4f8bf4a25..16520f1e8 100644
--- a/app/javascript/widget/components/MessageReplyButton.vue
+++ b/app/javascript/widget/components/MessageReplyButton.vue
@@ -1,12 +1,3 @@
-<template>
-  <button
-    class="p-1 mb-1 rounded-full dark:text-slate-500 dark:bg-slate-900 text-slate-600 bg-slate-100 hover:text-slate-800"
-    @click="$emit('click')"
-  >
-    <FluentIcon icon="arrow-reply" size="11" class="flex-shrink-0" />
-  </button>
-</template>
-
 <script>
 import FluentIcon from 'shared/components/FluentIcon/Index.vue';
 
@@ -15,3 +6,12 @@ export default {
   components: { FluentIcon },
 };
 </script>
+
+<template>
+  <button
+    class="p-1 mb-1 rounded-full dark:text-slate-500 dark:bg-slate-900 text-slate-600 bg-slate-100 hover:text-slate-800"
+    @click="$emit('click')"
+  >
+    <FluentIcon icon="arrow-reply" size="11" class="flex-shrink-0" />
+  </button>
+</template>
diff --git a/app/javascript/widget/components/PreChat/Form.vue b/app/javascript/widget/components/PreChat/Form.vue
index 3ff597c67..03420ea3c 100644
--- a/app/javascript/widget/components/PreChat/Form.vue
+++ b/app/javascript/widget/components/PreChat/Form.vue
@@ -1,66 +1,3 @@
-<template>
-  <FormulateForm
-    v-model="formValues"
-    class="flex flex-col flex-1 p-6 overflow-y-auto"
-    @submit="onSubmit"
-  >
-    <div
-      v-if="shouldShowHeaderMessage"
-      v-dompurify-html="formatMessage(headerMessage, false)"
-      class="mb-4 text-sm leading-5 pre-chat-header-message"
-      :class="$dm('text-black-800', 'dark:text-slate-50')"
-    />
-    <FormulateInput
-      v-for="item in enabledPreChatFields"
-      :key="item.name"
-      :name="item.name"
-      :type="item.type"
-      :label="getLabel(item)"
-      :placeholder="getPlaceHolder(item)"
-      :validation="getValidation(item)"
-      :options="getOptions(item)"
-      :label-class="context => labelClass(context)"
-      :input-class="context => inputClass(context)"
-      :validation-messages="{
-        startsWithPlus: $t(
-          'PRE_CHAT_FORM.FIELDS.PHONE_NUMBER.DIAL_CODE_VALID_ERROR'
-        ),
-        isValidPhoneNumber: $t('PRE_CHAT_FORM.FIELDS.PHONE_NUMBER.VALID_ERROR'),
-        email: $t('PRE_CHAT_FORM.FIELDS.EMAIL_ADDRESS.VALID_ERROR'),
-        required: $t('PRE_CHAT_FORM.REQUIRED'),
-        matches: item.regex_cue
-          ? item.regex_cue
-          : $t('PRE_CHAT_FORM.REGEX_ERROR'),
-      }"
-      :has-error-in-phone-input="hasErrorInPhoneInput"
-    />
-    <FormulateInput
-      v-if="!hasActiveCampaign"
-      name="message"
-      type="textarea"
-      :label-class="context => labelClass(context)"
-      :input-class="context => inputClass(context)"
-      :label="$t('PRE_CHAT_FORM.FIELDS.MESSAGE.LABEL')"
-      :placeholder="$t('PRE_CHAT_FORM.FIELDS.MESSAGE.PLACEHOLDER')"
-      validation="required"
-      :validation-messages="{
-        required: $t('PRE_CHAT_FORM.FIELDS.MESSAGE.ERROR'),
-      }"
-    />
-
-    <custom-button
-      class="mt-2 mb-5 font-medium"
-      block
-      :bg-color="widgetColor"
-      :text-color="textColor"
-      :disabled="isCreating"
-    >
-      <spinner v-if="isCreating" class="p-0" />
-      {{ $t('START_CONVERSATION') }}
-    </custom-button>
-  </FormulateForm>
-</template>
-
 <script>
 import CustomButton from 'shared/components/Button.vue';
 import Spinner from 'shared/components/Spinner.vue';
@@ -316,6 +253,69 @@ export default {
   },
 };
 </script>
+
+<template>
+  <FormulateForm
+    v-model="formValues"
+    class="flex flex-col flex-1 p-6 overflow-y-auto"
+    @submit="onSubmit"
+  >
+    <div
+      v-if="shouldShowHeaderMessage"
+      v-dompurify-html="formatMessage(headerMessage, false)"
+      class="mb-4 text-sm leading-5 pre-chat-header-message"
+      :class="$dm('text-black-800', 'dark:text-slate-50')"
+    />
+    <FormulateInput
+      v-for="item in enabledPreChatFields"
+      :key="item.name"
+      :name="item.name"
+      :type="item.type"
+      :label="getLabel(item)"
+      :placeholder="getPlaceHolder(item)"
+      :validation="getValidation(item)"
+      :options="getOptions(item)"
+      :label-class="context => labelClass(context)"
+      :input-class="context => inputClass(context)"
+      :validation-messages="{
+        startsWithPlus: $t(
+          'PRE_CHAT_FORM.FIELDS.PHONE_NUMBER.DIAL_CODE_VALID_ERROR'
+        ),
+        isValidPhoneNumber: $t('PRE_CHAT_FORM.FIELDS.PHONE_NUMBER.VALID_ERROR'),
+        email: $t('PRE_CHAT_FORM.FIELDS.EMAIL_ADDRESS.VALID_ERROR'),
+        required: $t('PRE_CHAT_FORM.REQUIRED'),
+        matches: item.regex_cue
+          ? item.regex_cue
+          : $t('PRE_CHAT_FORM.REGEX_ERROR'),
+      }"
+      :has-error-in-phone-input="hasErrorInPhoneInput"
+    />
+    <FormulateInput
+      v-if="!hasActiveCampaign"
+      name="message"
+      type="textarea"
+      :label-class="context => labelClass(context)"
+      :input-class="context => inputClass(context)"
+      :label="$t('PRE_CHAT_FORM.FIELDS.MESSAGE.LABEL')"
+      :placeholder="$t('PRE_CHAT_FORM.FIELDS.MESSAGE.PLACEHOLDER')"
+      validation="required"
+      :validation-messages="{
+        required: $t('PRE_CHAT_FORM.FIELDS.MESSAGE.ERROR'),
+      }"
+    />
+
+    <custom-button
+      class="mt-2 mb-5 font-medium"
+      block
+      :bg-color="widgetColor"
+      :text-color="textColor"
+      :disabled="isCreating"
+    >
+      <spinner v-if="isCreating" class="p-0" />
+      {{ $t('START_CONVERSATION') }}
+    </custom-button>
+  </FormulateForm>
+</template>
 <style lang="scss" scoped>
 @import '~widget/assets/scss/variables.scss';
 ::v-deep {
diff --git a/app/javascript/widget/components/ReplyToChip.vue b/app/javascript/widget/components/ReplyToChip.vue
index 919f1bcfe..1635928d3 100644
--- a/app/javascript/widget/components/ReplyToChip.vue
+++ b/app/javascript/widget/components/ReplyToChip.vue
@@ -1,15 +1,3 @@
-<template>
-  <button
-    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" />
-    <div class="truncate max-w-[8rem]">
-      {{ replyTo.content || replyToAttachment }}
-    </div>
-  </button>
-</template>
-
 <script>
 import FluentIcon from 'shared/components/FluentIcon/Index.vue';
 
@@ -58,3 +46,15 @@ export default {
   },
 };
 </script>
+
+<template>
+  <button
+    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" />
+    <div class="truncate max-w-[8rem]">
+      {{ replyTo.content || replyToAttachment }}
+    </div>
+  </button>
+</template>
diff --git a/app/javascript/widget/components/SearchArticle.vue b/app/javascript/widget/components/SearchArticle.vue
index df38af763..6eef62111 100644
--- a/app/javascript/widget/components/SearchArticle.vue
+++ b/app/javascript/widget/components/SearchArticle.vue
@@ -1,29 +1,3 @@
-<template>
-  <div class="relative flex items-center">
-    <div
-      class="absolute inset-y-0 left-0 flex items-center px-2 h-8 text-slate-500"
-    >
-      <fluent-icon icon="search" size="14" />
-    </div>
-    <input
-      id="search"
-      v-model="searchQuery"
-      :placeholder="placeholder"
-      type="text"
-      name="search"
-      class="block w-full h-8 rounded-md focus-visible:outline-none m-0 pl-6 pr-1 px-2 text-sm text-slate-800 border border-slate-100 bg-slate-75 placeholder:text-slate-400 focus:ring focus:border-woot-500 focus:ring-woot-200 hover:border-woot-200"
-      @input="handleInput"
-    />
-    <div class="absolute inset-y-0 right-0 flex h-8 p-1">
-      <kbd
-        class="inline-flex items-center rounded border border-slate-200 px-1 font-sans text-xxs text-slate-400"
-      >
-        ⌘K
-      </kbd>
-    </div>
-  </div>
-</template>
-
 <script>
 import { debounce } from '@chatwoot/utils';
 export default {
@@ -49,3 +23,29 @@ export default {
   },
 };
 </script>
+
+<template>
+  <div class="relative flex items-center">
+    <div
+      class="absolute inset-y-0 left-0 flex items-center px-2 h-8 text-slate-500"
+    >
+      <fluent-icon icon="search" size="14" />
+    </div>
+    <input
+      id="search"
+      v-model="searchQuery"
+      :placeholder="placeholder"
+      type="text"
+      name="search"
+      class="block w-full h-8 rounded-md focus-visible:outline-none m-0 pl-6 pr-1 px-2 text-sm text-slate-800 border border-slate-100 bg-slate-75 placeholder:text-slate-400 focus:ring focus:border-woot-500 focus:ring-woot-200 hover:border-woot-200"
+      @input="handleInput"
+    />
+    <div class="absolute inset-y-0 right-0 flex h-8 p-1">
+      <kbd
+        class="inline-flex items-center rounded border border-slate-200 px-1 font-sans text-xxs text-slate-400"
+      >
+        ⌘K
+      </kbd>
+    </div>
+  </div>
+</template>
diff --git a/app/javascript/widget/components/TeamAvailability.vue b/app/javascript/widget/components/TeamAvailability.vue
index 984dfbe3f..513c7317f 100644
--- a/app/javascript/widget/components/TeamAvailability.vue
+++ b/app/javascript/widget/components/TeamAvailability.vue
@@ -1,37 +1,3 @@
-<template>
-  <div class="p-4 shadow-sm rounded-md bg-white dark:bg-slate-700">
-    <div class="flex items-center justify-between">
-      <div class="  ">
-        <div class="text-sm font-medium text-slate-700 dark:text-slate-50">
-          {{
-            isOnline
-              ? $t('TEAM_AVAILABILITY.ONLINE')
-              : $t('TEAM_AVAILABILITY.OFFLINE')
-          }}
-        </div>
-        <div class="text-sm mt-1 text-slate-500 dark:text-slate-100">
-          {{ replyWaitMessage }}
-        </div>
-      </div>
-      <available-agents 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"
-      :style="{ color: widgetColor }"
-      @click="startConversation"
-    >
-      <span class="pr-2 text-sm">
-        {{
-          hasConversation
-            ? $t('CONTINUE_CONVERSATION')
-            : $t('START_CONVERSATION')
-        }}
-      </span>
-      <fluent-icon icon="arrow-right" size="14" />
-    </button>
-  </div>
-</template>
-
 <script>
 import { mapGetters } from 'vuex';
 import { getContrastingTextColor } from '@chatwoot/utils';
@@ -96,3 +62,37 @@ export default {
   },
 };
 </script>
+
+<template>
+  <div class="p-4 shadow-sm rounded-md bg-white dark:bg-slate-700">
+    <div class="flex items-center justify-between">
+      <div class="  ">
+        <div class="text-sm font-medium text-slate-700 dark:text-slate-50">
+          {{
+            isOnline
+              ? $t('TEAM_AVAILABILITY.ONLINE')
+              : $t('TEAM_AVAILABILITY.OFFLINE')
+          }}
+        </div>
+        <div class="text-sm mt-1 text-slate-500 dark:text-slate-100">
+          {{ replyWaitMessage }}
+        </div>
+      </div>
+      <available-agents 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"
+      :style="{ color: widgetColor }"
+      @click="startConversation"
+    >
+      <span class="pr-2 text-sm">
+        {{
+          hasConversation
+            ? $t('CONTINUE_CONVERSATION')
+            : $t('START_CONVERSATION')
+        }}
+      </span>
+      <fluent-icon 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 cefd0cc99..ab04a59e0 100644
--- a/app/javascript/widget/components/UnreadMessage.vue
+++ b/app/javascript/widget/components/UnreadMessage.vue
@@ -1,28 +1,3 @@
-<template>
-  <div class="chat-bubble-wrap">
-    <button
-      class="chat-bubble agent"
-      :class="$dm('bg-white', 'dark:bg-slate-50')"
-      @click="onClickMessage"
-    >
-      <div v-if="showSender" class="row--agent-block">
-        <thumbnail
-          :src="avatarUrl"
-          size="20px"
-          :username="agentName"
-          :status="availabilityStatus"
-        />
-        <span v-dompurify-html="agentName" class="agent--name" />
-        <span v-dompurify-html="companyName" class="company--name" />
-      </div>
-      <div
-        v-dompurify-html="formatMessage(message, false)"
-        class="message-content"
-      />
-    </button>
-  </div>
-</template>
-
 <script>
 import messageFormatterMixin from 'shared/mixins/messageFormatterMixin';
 import Thumbnail from 'dashboard/components/widgets/Thumbnail.vue';
@@ -105,6 +80,31 @@ export default {
   },
 };
 </script>
+
+<template>
+  <div class="chat-bubble-wrap">
+    <button
+      class="chat-bubble agent"
+      :class="$dm('bg-white', 'dark:bg-slate-50')"
+      @click="onClickMessage"
+    >
+      <div v-if="showSender" class="row--agent-block">
+        <thumbnail
+          :src="avatarUrl"
+          size="20px"
+          :username="agentName"
+          :status="availabilityStatus"
+        />
+        <span v-dompurify-html="agentName" class="agent--name" />
+        <span v-dompurify-html="companyName" class="company--name" />
+      </div>
+      <div
+        v-dompurify-html="formatMessage(message, false)"
+        class="message-content"
+      />
+    </button>
+  </div>
+</template>
 <style lang="scss" scoped>
 @import '~widget/assets/scss/variables.scss';
 .chat-bubble {
diff --git a/app/javascript/widget/components/UnreadMessageList.vue b/app/javascript/widget/components/UnreadMessageList.vue
index 875457c42..a6208ceea 100644
--- a/app/javascript/widget/components/UnreadMessageList.vue
+++ b/app/javascript/widget/components/UnreadMessageList.vue
@@ -1,49 +1,3 @@
-<template>
-  <div class="unread-wrap">
-    <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" />
-          {{ $t('UNREAD_VIEW.CLOSE_MESSAGES_BUTTON') }}
-        </span>
-      </button>
-    </div>
-    <div class="unread-messages">
-      <unread-message
-        v-for="(message, index) in messages"
-        :key="message.id"
-        :message-type="message.messageType"
-        :message-id="message.id"
-        :show-sender="!index"
-        :sender="message.sender"
-        :message="getMessageContent(message)"
-        :campaign-id="message.campaignId"
-      />
-    </div>
-
-    <div class="open-read-view-wrap">
-      <button
-        v-if="unreadMessageCount"
-        class="button clear-button"
-        @click="openConversationView"
-      >
-        <span
-          class="flex items-center"
-          :class="{
-            'is-background-light': isBackgroundLighter,
-          }"
-          :style="{
-            color: widgetColor,
-          }"
-        >
-          <fluent-icon class="mr-2" size="16" icon="arrow-right" />
-          {{ $t('UNREAD_VIEW.VIEW_MESSAGES_BUTTON') }}
-        </span>
-      </button>
-    </div>
-  </div>
-</template>
-
 <script>
 import { mapGetters } from 'vuex';
 import configMixin from '../mixins/configMixin';
@@ -98,6 +52,52 @@ export default {
   },
 };
 </script>
+
+<template>
+  <div class="unread-wrap">
+    <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" />
+          {{ $t('UNREAD_VIEW.CLOSE_MESSAGES_BUTTON') }}
+        </span>
+      </button>
+    </div>
+    <div class="unread-messages">
+      <unread-message
+        v-for="(message, index) in messages"
+        :key="message.id"
+        :message-type="message.messageType"
+        :message-id="message.id"
+        :show-sender="!index"
+        :sender="message.sender"
+        :message="getMessageContent(message)"
+        :campaign-id="message.campaignId"
+      />
+    </div>
+
+    <div class="open-read-view-wrap">
+      <button
+        v-if="unreadMessageCount"
+        class="button clear-button"
+        @click="openConversationView"
+      >
+        <span
+          class="flex items-center"
+          :class="{
+            'is-background-light': isBackgroundLighter,
+          }"
+          :style="{
+            color: widgetColor,
+          }"
+        >
+          <fluent-icon class="mr-2" size="16" icon="arrow-right" />
+          {{ $t('UNREAD_VIEW.VIEW_MESSAGES_BUTTON') }}
+        </span>
+      </button>
+    </div>
+  </div>
+</template>
 <style lang="scss" scoped>
 @import '~widget/assets/scss/variables';
 
diff --git a/app/javascript/widget/components/UserAvatar.vue b/app/javascript/widget/components/UserAvatar.vue
index c6120b3ce..0f447652b 100755
--- a/app/javascript/widget/components/UserAvatar.vue
+++ b/app/javascript/widget/components/UserAvatar.vue
@@ -1,6 +1,3 @@
-<template>
-  <div class="user-avatar" :class="size" :style="getBgImage" />
-</template>
 <script>
 /**
  * Thumbnail Component
@@ -26,6 +23,9 @@ export default {
   },
 };
 </script>
+<template>
+  <div class="user-avatar" :class="size" :style="getBgImage" />
+</template>
 
 <style scoped lang="scss">
 @import '~widget/assets/scss/variables.scss';
diff --git a/app/javascript/widget/components/UserMessage.vue b/app/javascript/widget/components/UserMessage.vue
index f3f8c13b3..4c166c35e 100755
--- a/app/javascript/widget/components/UserMessage.vue
+++ b/app/javascript/widget/components/UserMessage.vue
@@ -1,81 +1,3 @@
-<template>
-  <div class="user-message-wrap group">
-    <div class="flex gap-1 user-message">
-      <div
-        class="message-wrap"
-        :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" />
-        </div>
-        <div class="flex justify-end gap-1">
-          <div class="flex flex-col justify-end">
-            <message-reply-button
-              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
-              v-if="showTextBubble"
-              :message="message.content"
-              :status="message.status"
-              :widget-color="widgetColor"
-            />
-            <div
-              v-if="hasAttachments"
-              class="chat-bubble has-attachment user"
-              :style="{ backgroundColor: widgetColor }"
-            >
-              <div
-                v-for="attachment in message.attachments"
-                :key="attachment.id"
-              >
-                <image-bubble
-                  v-if="attachment.file_type === 'image' && !hasImageError"
-                  :url="attachment.data_url"
-                  :thumb="attachment.data_url"
-                  :readable-time="readableTime"
-                  @error="onImageLoadError"
-                />
-
-                <video-bubble
-                  v-if="attachment.file_type === 'video' && !hasVideoError"
-                  :url="attachment.data_url"
-                  :readable-time="readableTime"
-                  @error="onVideoLoadError"
-                />
-
-                <file-bubble
-                  v-else
-                  :url="attachment.data_url"
-                  :is-in-progress="isInProgress"
-                  :widget-color="widgetColor"
-                  is-user-bubble
-                />
-              </div>
-            </div>
-          </drag-wrapper>
-        </div>
-        <div
-          v-if="isFailed"
-          class="flex justify-end px-4 py-2 text-red-700 align-middle"
-        >
-          <button
-            v-if="!hasAttachments"
-            :title="$t('COMPONENTS.MESSAGE_BUBBLE.RETRY')"
-            class="inline-flex items-center justify-center ml-2"
-            @click="retrySendMessage"
-          >
-            <fluent-icon icon="arrow-clockwise" size="14" />
-          </button>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
 <script>
 import UserMessageBubble from 'widget/components/UserMessageBubble.vue';
 import MessageReplyButton from 'widget/components/MessageReplyButton.vue';
@@ -180,3 +102,81 @@ export default {
   },
 };
 </script>
+
+<template>
+  <div class="user-message-wrap group">
+    <div class="flex gap-1 user-message">
+      <div
+        class="message-wrap"
+        :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" />
+        </div>
+        <div class="flex justify-end gap-1">
+          <div class="flex flex-col justify-end">
+            <message-reply-button
+              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
+              v-if="showTextBubble"
+              :message="message.content"
+              :status="message.status"
+              :widget-color="widgetColor"
+            />
+            <div
+              v-if="hasAttachments"
+              class="chat-bubble has-attachment user"
+              :style="{ backgroundColor: widgetColor }"
+            >
+              <div
+                v-for="attachment in message.attachments"
+                :key="attachment.id"
+              >
+                <image-bubble
+                  v-if="attachment.file_type === 'image' && !hasImageError"
+                  :url="attachment.data_url"
+                  :thumb="attachment.data_url"
+                  :readable-time="readableTime"
+                  @error="onImageLoadError"
+                />
+
+                <video-bubble
+                  v-if="attachment.file_type === 'video' && !hasVideoError"
+                  :url="attachment.data_url"
+                  :readable-time="readableTime"
+                  @error="onVideoLoadError"
+                />
+
+                <file-bubble
+                  v-else
+                  :url="attachment.data_url"
+                  :is-in-progress="isInProgress"
+                  :widget-color="widgetColor"
+                  is-user-bubble
+                />
+              </div>
+            </div>
+          </drag-wrapper>
+        </div>
+        <div
+          v-if="isFailed"
+          class="flex justify-end px-4 py-2 text-red-700 align-middle"
+        >
+          <button
+            v-if="!hasAttachments"
+            :title="$t('COMPONENTS.MESSAGE_BUBBLE.RETRY')"
+            class="inline-flex items-center justify-center ml-2"
+            @click="retrySendMessage"
+          >
+            <fluent-icon icon="arrow-clockwise" size="14" />
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/app/javascript/widget/components/UserMessageBubble.vue b/app/javascript/widget/components/UserMessageBubble.vue
index eed90865f..06d3268fa 100755
--- a/app/javascript/widget/components/UserMessageBubble.vue
+++ b/app/javascript/widget/components/UserMessageBubble.vue
@@ -1,11 +1,3 @@
-<template>
-  <div
-    v-dompurify-html="formatMessage(message, false)"
-    class="chat-bubble user"
-    :style="{ background: widgetColor, color: textColor }"
-  />
-</template>
-
 <script>
 import messageFormatterMixin from 'shared/mixins/messageFormatterMixin';
 import { getContrastingTextColor } from '@chatwoot/utils';
@@ -35,6 +27,14 @@ export default {
 };
 </script>
 
+<template>
+  <div
+    v-dompurify-html="formatMessage(message, false)"
+    class="chat-bubble user"
+    :style="{ background: widgetColor, color: textColor }"
+  />
+</template>
+
 <style lang="scss" scoped>
 @import '~widget/assets/scss/variables.scss';
 
diff --git a/app/javascript/widget/components/dropdown/DropdownMenu.vue b/app/javascript/widget/components/dropdown/DropdownMenu.vue
index 85db8ad21..e351acd4a 100644
--- a/app/javascript/widget/components/dropdown/DropdownMenu.vue
+++ b/app/javascript/widget/components/dropdown/DropdownMenu.vue
@@ -1,37 +1,3 @@
-<template>
-  <div class="relative">
-    <button class="z-10 focus:outline-none select-none" @click="toggleMenu">
-      <slot name="button" />
-    </button>
-
-    <!-- to close when clicked on space around it-->
-    <button
-      v-if="isOpen"
-      tabindex="-1"
-      class="fixed inset-0 h-full w-full cursor-default focus:outline-none"
-      @click="toggleMenu"
-    />
-
-    <!--dropdown menu-->
-    <transition
-      enter-active-class="transition-all duration-200 ease-out"
-      leave-active-class="transition-all duration-750 ease-in"
-      enter-class="opacity-0 scale-75"
-      enter-to-class="opacity-100 scale-100"
-      leave-class="opacity-100 scale-100"
-      leave-to-class="opacity-0 scale-75"
-    >
-      <div
-        v-if="isOpen"
-        class="menu-content absolute shadow-xl rounded-md border-solid border border-slate-100 mt-1 py-1 px-2 bg-white z-10"
-        :class="menuPlacement === 'right' ? 'right-0' : 'left-0'"
-      >
-        <slot name="content" />
-      </div>
-    </transition>
-  </div>
-</template>
-
 <script>
 export default {
   props: {
@@ -74,6 +40,40 @@ export default {
   },
 };
 </script>
+
+<template>
+  <div class="relative">
+    <button class="z-10 focus:outline-none select-none" @click="toggleMenu">
+      <slot name="button" />
+    </button>
+
+    <!-- to close when clicked on space around it-->
+    <button
+      v-if="isOpen"
+      tabindex="-1"
+      class="fixed inset-0 h-full w-full cursor-default focus:outline-none"
+      @click="toggleMenu"
+    />
+
+    <!--dropdown menu-->
+    <transition
+      enter-active-class="transition-all duration-200 ease-out"
+      leave-active-class="transition-all duration-750 ease-in"
+      enter-class="opacity-0 scale-75"
+      enter-to-class="opacity-100 scale-100"
+      leave-class="opacity-100 scale-100"
+      leave-to-class="opacity-0 scale-75"
+    >
+      <div
+        v-if="isOpen"
+        class="menu-content absolute shadow-xl rounded-md border-solid border border-slate-100 mt-1 py-1 px-2 bg-white z-10"
+        :class="menuPlacement === 'right' ? 'right-0' : 'left-0'"
+      >
+        <slot name="content" />
+      </div>
+    </transition>
+  </div>
+</template>
 <style scoped lang="scss">
 @import '~widget/assets/scss/variables.scss';
 
diff --git a/app/javascript/widget/components/dropdown/DropdownMenuItem.vue b/app/javascript/widget/components/dropdown/DropdownMenuItem.vue
index 5665b3ea8..f8d6fe0ea 100644
--- a/app/javascript/widget/components/dropdown/DropdownMenuItem.vue
+++ b/app/javascript/widget/components/dropdown/DropdownMenuItem.vue
@@ -1,14 +1,3 @@
-<template>
-  <button :class="['menu-item', itemClass]" @click="action">
-    <fluent-icon
-      v-if="icon"
-      :icon="iconName"
-      :size="iconSize"
-      :class="iconClass"
-    />
-    <span :class="[{ 'pl-3': icon }, textClass]">{{ text }}</span>
-  </button>
-</template>
 <script>
 import FluentIcon from 'shared/components/FluentIcon/Index.vue';
 
@@ -51,6 +40,17 @@ export default {
   },
 };
 </script>
+<template>
+  <button :class="['menu-item', itemClass]" @click="action">
+    <fluent-icon
+      v-if="icon"
+      :icon="iconName"
+      :size="iconSize"
+      :class="iconClass"
+    />
+    <span :class="[{ 'pl-3': icon }, textClass]">{{ text }}</span>
+  </button>
+</template>
 <style scoped lang="scss">
 @import '~widget/assets/scss/variables.scss';
 
diff --git a/app/javascript/widget/components/layouts/ViewWithHeader.vue b/app/javascript/widget/components/layouts/ViewWithHeader.vue
index dad629a16..e350d4372 100644
--- a/app/javascript/widget/components/layouts/ViewWithHeader.vue
+++ b/app/javascript/widget/components/layouts/ViewWithHeader.vue
@@ -1,42 +1,3 @@
-<template>
-  <div
-    class="w-full h-full bg-slate-25 dark:bg-slate-800"
-    :class="{ 'overflow-auto': isOnHomeView }"
-    @keydown.esc="closeWindow"
-  >
-    <div class="flex flex-col h-full relative">
-      <div
-        class="header-wrap sticky top-0 z-40 transition-all"
-        :class="{
-          expanded: !isHeaderCollapsed,
-          collapsed: isHeaderCollapsed,
-          'custom-header-shadow': isHeaderCollapsed,
-          ...opacityClass,
-        }"
-      >
-        <chat-header-expanded
-          v-if="!isHeaderCollapsed"
-          :intro-heading="channelConfig.welcomeTitle"
-          :intro-body="channelConfig.welcomeTagline"
-          :avatar-url="channelConfig.avatarUrl"
-          :show-popout-button="appConfig.showPopoutButton"
-        />
-        <chat-header
-          v-if="isHeaderCollapsed"
-          :title="channelConfig.websiteName"
-          :avatar-url="channelConfig.avatarUrl"
-          :show-popout-button="appConfig.showPopoutButton"
-          :available-agents="availableAgents"
-          :show-back-button="showBackButton"
-        />
-      </div>
-      <banner />
-      <router-view />
-
-      <branding v-if="!isOnArticleViewer" :disable-branding="disableBranding" />
-    </div>
-  </div>
-</template>
 <script>
 import Banner from '../Banner.vue';
 import Branding from 'shared/components/Branding.vue';
@@ -140,6 +101,45 @@ export default {
   },
 };
 </script>
+<template>
+  <div
+    class="w-full h-full bg-slate-25 dark:bg-slate-800"
+    :class="{ 'overflow-auto': isOnHomeView }"
+    @keydown.esc="closeWindow"
+  >
+    <div class="flex flex-col h-full relative">
+      <div
+        class="header-wrap sticky top-0 z-40 transition-all"
+        :class="{
+          expanded: !isHeaderCollapsed,
+          collapsed: isHeaderCollapsed,
+          'custom-header-shadow': isHeaderCollapsed,
+          ...opacityClass,
+        }"
+      >
+        <chat-header-expanded
+          v-if="!isHeaderCollapsed"
+          :intro-heading="channelConfig.welcomeTitle"
+          :intro-body="channelConfig.welcomeTagline"
+          :avatar-url="channelConfig.avatarUrl"
+          :show-popout-button="appConfig.showPopoutButton"
+        />
+        <chat-header
+          v-if="isHeaderCollapsed"
+          :title="channelConfig.websiteName"
+          :avatar-url="channelConfig.avatarUrl"
+          :show-popout-button="appConfig.showPopoutButton"
+          :available-agents="availableAgents"
+          :show-back-button="showBackButton"
+        />
+      </div>
+      <banner />
+      <router-view />
+
+      <branding v-if="!isOnArticleViewer" :disable-branding="disableBranding" />
+    </div>
+  </div>
+</template>
 
 <style scoped lang="scss">
 @import '~widget/assets/scss/variables';
diff --git a/app/javascript/widget/components/template/Article.vue b/app/javascript/widget/components/template/Article.vue
index f022215bd..00b9d4789 100644
--- a/app/javascript/widget/components/template/Article.vue
+++ b/app/javascript/widget/components/template/Article.vue
@@ -1,3 +1,22 @@
+<script>
+import messageFormatterMixin from 'shared/mixins/messageFormatterMixin';
+import FluentIcon from 'shared/components/FluentIcon/Index.vue';
+import darkModeMixin from 'widget/mixins/darkModeMixin.js';
+
+export default {
+  components: {
+    FluentIcon,
+  },
+  mixins: [messageFormatterMixin, darkModeMixin],
+  props: {
+    items: {
+      type: Array,
+      default: () => [],
+    },
+  },
+};
+</script>
+
 <template>
   <div
     v-if="!!items.length"
@@ -27,25 +46,6 @@
   </div>
 </template>
 
-<script>
-import messageFormatterMixin from 'shared/mixins/messageFormatterMixin';
-import FluentIcon from 'shared/components/FluentIcon/Index.vue';
-import darkModeMixin from 'widget/mixins/darkModeMixin.js';
-
-export default {
-  components: {
-    FluentIcon,
-  },
-  mixins: [messageFormatterMixin, darkModeMixin],
-  props: {
-    items: {
-      type: Array,
-      default: () => [],
-    },
-  },
-};
-</script>
-
 <style lang="scss" scoped>
 @import '~widget/assets/scss/variables.scss';
 
diff --git a/app/javascript/widget/components/template/EmailInput.vue b/app/javascript/widget/components/template/EmailInput.vue
index 8cf8bd84c..aae78f4cb 100644
--- a/app/javascript/widget/components/template/EmailInput.vue
+++ b/app/javascript/widget/components/template/EmailInput.vue
@@ -1,34 +1,3 @@
-<template>
-  <div>
-    <form
-      v-if="!hasSubmitted"
-      class="email-input-group"
-      @submit.prevent="onSubmit"
-    >
-      <input
-        v-model.trim="email"
-        class="form-input"
-        :placeholder="$t('EMAIL_PLACEHOLDER')"
-        :class="inputHasError"
-        @input="v$.email.$touch"
-        @keydown.enter="onSubmit"
-      />
-      <button
-        class="button small"
-        :disabled="v$.email.$invalid"
-        :style="{
-          background: widgetColor,
-          borderColor: widgetColor,
-          color: textColor,
-        }"
-      >
-        <fluent-icon v-if="!isUpdating" icon="chevron-right" />
-        <spinner v-else class="mx-2" />
-      </button>
-    </form>
-  </div>
-</template>
-
 <script>
 import { mapGetters } from 'vuex';
 import { useVuelidate } from '@vuelidate/core';
@@ -115,6 +84,37 @@ export default {
 };
 </script>
 
+<template>
+  <div>
+    <form
+      v-if="!hasSubmitted"
+      class="email-input-group"
+      @submit.prevent="onSubmit"
+    >
+      <input
+        v-model.trim="email"
+        class="form-input"
+        :placeholder="$t('EMAIL_PLACEHOLDER')"
+        :class="inputHasError"
+        @input="v$.email.$touch"
+        @keydown.enter="onSubmit"
+      />
+      <button
+        class="button small"
+        :disabled="v$.email.$invalid"
+        :style="{
+          background: widgetColor,
+          borderColor: widgetColor,
+          color: textColor,
+        }"
+      >
+        <fluent-icon v-if="!isUpdating" icon="chevron-right" />
+        <spinner v-else class="mx-2" />
+      </button>
+    </form>
+  </div>
+</template>
+
 <style lang="scss" scoped>
 @import '~widget/assets/scss/variables.scss';
 
diff --git a/app/javascript/widget/components/template/IntegrationCard.vue b/app/javascript/widget/components/template/IntegrationCard.vue
index 6ce22d26b..4915d8da7 100644
--- a/app/javascript/widget/components/template/IntegrationCard.vue
+++ b/app/javascript/widget/components/template/IntegrationCard.vue
@@ -1,33 +1,3 @@
-<template>
-  <div>
-    <button
-      class="button join-call-button"
-      color-scheme="secondary"
-      :is-loading="isLoading"
-      :style="{
-        background: widgetColor,
-        borderColor: widgetColor,
-        color: textColor,
-      }"
-      @click="joinTheCall"
-    >
-      <fluent-icon icon="video-add" class="mr-2" />
-      {{ $t('INTEGRATIONS.DYTE.CLICK_HERE_TO_JOIN') }}
-    </button>
-    <div v-if="dyteAuthToken" class="video-call--container">
-      <iframe
-        :src="meetingLink"
-        allow="camera;microphone;fullscreen;display-capture;picture-in-picture;clipboard-write;"
-      />
-      <button
-        class="button small join-call-button leave-room-button"
-        @click="leaveTheRoom"
-      >
-        {{ $t('INTEGRATIONS.DYTE.LEAVE_THE_ROOM') }}
-      </button>
-    </div>
-  </div>
-</template>
 <script>
 import IntegrationAPIClient from 'widget/api/integration';
 import FluentIcon from 'shared/components/FluentIcon/Index.vue';
@@ -82,6 +52,36 @@ export default {
   },
 };
 </script>
+<template>
+  <div>
+    <button
+      class="button join-call-button"
+      color-scheme="secondary"
+      :is-loading="isLoading"
+      :style="{
+        background: widgetColor,
+        borderColor: widgetColor,
+        color: textColor,
+      }"
+      @click="joinTheCall"
+    >
+      <fluent-icon icon="video-add" class="mr-2" />
+      {{ $t('INTEGRATIONS.DYTE.CLICK_HERE_TO_JOIN') }}
+    </button>
+    <div v-if="dyteAuthToken" class="video-call--container">
+      <iframe
+        :src="meetingLink"
+        allow="camera;microphone;fullscreen;display-capture;picture-in-picture;clipboard-write;"
+      />
+      <button
+        class="button small join-call-button leave-room-button"
+        @click="leaveTheRoom"
+      >
+        {{ $t('INTEGRATIONS.DYTE.LEAVE_THE_ROOM') }}
+      </button>
+    </div>
+  </div>
+</template>
 <style lang="scss" scoped>
 @import '~widget/assets/scss/variables.scss';
 
diff --git a/app/javascript/widget/views/ArticleViewer.vue b/app/javascript/widget/views/ArticleViewer.vue
index 4a5d587ba..69057c144 100644
--- a/app/javascript/widget/views/ArticleViewer.vue
+++ b/app/javascript/widget/views/ArticleViewer.vue
@@ -1,9 +1,3 @@
-<template>
-  <div class="bg-white h-full">
-    <iframe-loader :url="link" />
-  </div>
-</template>
-
 <script>
 import IframeLoader from 'shared/components/IframeLoader.vue';
 
@@ -20,3 +14,9 @@ export default {
   },
 };
 </script>
+
+<template>
+  <div class="bg-white h-full">
+    <iframe-loader :url="link" />
+  </div>
+</template>
diff --git a/app/javascript/widget/views/Campaigns.vue b/app/javascript/widget/views/Campaigns.vue
index d28d0e4f4..5c9e79521 100644
--- a/app/javascript/widget/views/Campaigns.vue
+++ b/app/javascript/widget/views/Campaigns.vue
@@ -1,7 +1,3 @@
-<template>
-  <unread-message-list :messages="messages" @close="closeFullView" />
-</template>
-
 <script>
 import { mapGetters } from 'vuex';
 import { IFrameHelper } from 'widget/helpers/utils';
@@ -38,3 +34,7 @@ export default {
   },
 };
 </script>
+
+<template>
+  <unread-message-list :messages="messages" @close="closeFullView" />
+</template>
diff --git a/app/javascript/widget/views/Home.vue b/app/javascript/widget/views/Home.vue
index 35b4ab899..1116a59ce 100755
--- a/app/javascript/widget/views/Home.vue
+++ b/app/javascript/widget/views/Home.vue
@@ -1,38 +1,3 @@
-<template>
-  <div
-    class="z-50 rounded-md w-full flex flex-1 flex-col"
-    :class="{ 'pb-2': showArticles, 'justify-end': !showArticles }"
-  >
-    <div class="px-4 pt-4 w-full">
-      <team-availability
-        :available-agents="availableAgents"
-        :has-conversation="!!conversationSize"
-        :unread-count="unreadMessageCount"
-        @start-conversation="startConversation"
-      />
-    </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
-          v-if="
-            !articleUiFlags.isFetching &&
-            !articleUiFlags.isError &&
-            popularArticles.length
-          "
-          :articles="popularArticles"
-          @view="openArticleInArticleViewer"
-          @view-all="viewAllArticles"
-        />
-      </div>
-    </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 />
-      </div>
-    </div>
-  </div>
-</template>
-
 <script>
 import TeamAvailability from 'widget/components/TeamAvailability.vue';
 import ArticleHero from 'widget/components/ArticleHero.vue';
@@ -134,3 +99,38 @@ export default {
   },
 };
 </script>
+
+<template>
+  <div
+    class="z-50 rounded-md w-full flex flex-1 flex-col"
+    :class="{ 'pb-2': showArticles, 'justify-end': !showArticles }"
+  >
+    <div class="px-4 pt-4 w-full">
+      <team-availability
+        :available-agents="availableAgents"
+        :has-conversation="!!conversationSize"
+        :unread-count="unreadMessageCount"
+        @start-conversation="startConversation"
+      />
+    </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
+          v-if="
+            !articleUiFlags.isFetching &&
+            !articleUiFlags.isError &&
+            popularArticles.length
+          "
+          :articles="popularArticles"
+          @view="openArticleInArticleViewer"
+          @view-all="viewAllArticles"
+        />
+      </div>
+    </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 />
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/app/javascript/widget/views/Messages.vue b/app/javascript/widget/views/Messages.vue
index ce473b521..261f79498 100644
--- a/app/javascript/widget/views/Messages.vue
+++ b/app/javascript/widget/views/Messages.vue
@@ -1,13 +1,3 @@
-<template>
-  <div
-    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" />
-    </div>
-    <chat-footer class="px-5" />
-  </div>
-</template>
 <script>
 import { mapGetters } from 'vuex';
 
@@ -26,3 +16,13 @@ export default {
   },
 };
 </script>
+<template>
+  <div
+    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" />
+    </div>
+    <chat-footer class="px-5" />
+  </div>
+</template>
diff --git a/app/javascript/widget/views/PreChatForm.vue b/app/javascript/widget/views/PreChatForm.vue
index 254782db7..40df0b063 100644
--- a/app/javascript/widget/views/PreChatForm.vue
+++ b/app/javascript/widget/views/PreChatForm.vue
@@ -1,8 +1,3 @@
-<template>
-  <div class="flex flex-1 overflow-auto">
-    <pre-chat-form :options="preChatFormOptions" @submit="onSubmit" />
-  </div>
-</template>
 <script>
 import PreChatForm from '../components/PreChat/Form.vue';
 import configMixin from '../mixins/configMixin';
@@ -62,3 +57,8 @@ export default {
   },
 };
 </script>
+<template>
+  <div class="flex flex-1 overflow-auto">
+    <pre-chat-form :options="preChatFormOptions" @submit="onSubmit" />
+  </div>
+</template>
diff --git a/app/javascript/widget/views/UnreadMessages.vue b/app/javascript/widget/views/UnreadMessages.vue
index c37b0763c..9d567e18f 100644
--- a/app/javascript/widget/views/UnreadMessages.vue
+++ b/app/javascript/widget/views/UnreadMessages.vue
@@ -1,7 +1,3 @@
-<template>
-  <unread-message-list :messages="messages" @close="closeFullView" />
-</template>
-
 <script>
 import { mapGetters } from 'vuex';
 import { IFrameHelper } from 'widget/helpers/utils';
@@ -26,3 +22,7 @@ export default {
   },
 };
 </script>
+
+<template>
+  <unread-message-list :messages="messages" @close="closeFullView" />
+</template>